JavaScript basic to advance guide
जावास्क्रिप्ट सीखें: शुरुआती से लेकर एडवांस तक एक सम्पूर्ण गाइड
जावास्क्रिप्ट (JavaScript) वेब डेवलपमेंट की दुनिया में एक बहुत ही शक्तिशाली और लोकप्रिय भाषा है। यह सिर्फ वेब पेजों को इंटरैक्टिव बनाने तक ही सीमित नहीं है, बल्कि सर्वर-साइड प्रोग्रामिंग, मोबाइल ऐप डेवलपमेंट और यहां तक कि गेम डेवलपमेंट में भी इसका उपयोग किया जाता है। यदि आप वेब डेवलपमेंट सीखना चाहते हैं या प्रोग्रामिंग में रुचि रखते हैं, तो जावास्क्रिप्ट एक बेहतरीन शुरुआत है। इस पोस्ट में, हम जावास्क्रिप्ट के बुनियादी सिद्धांतों से लेकर कुछ एडवांस अवधारणाओं तक को विस्तार से जानेंगे, उदाहरणों के साथ।
1. जावास्क्रिप्ट क्या है और इसका उपयोग क्यों किया जाता है?
जावास्क्रिप्ट एक हल्के वजन वाली, इंटरप्रेटेड या जस्ट-इन-टाइम कंपाइल की गई प्रोग्रामिंग भाषा है जिसमें फर्स्ट-क्लास फंक्शन्स होते हैं। इसे मूल रूप से वेब पेजों को 'जीवित' बनाने के लिए डिज़ाइन किया गया था।
उपयोग:
- वेब डेवलपमेंट (क्लाइंट-साइड): वेब ब्राउज़र में चलती है, HTML और CSS के साथ मिलकर वेब पेजों को डायनामिक और इंटरैक्टिव बनाती है। उदाहरण के लिए, बटन क्लिक करने पर कुछ दिखाना या छिपाना, फॉर्म डेटा की जाँच करना, एनिमेशन बनाना।
- वेब डेवलपमेंट (सर्वर-साइड): Node.js जैसे रनटाइम वातावरण का उपयोग करके, जावास्क्रिप्ट सर्वर पर भी चल सकती है। इसका उपयोग बैकएंड API बनाने, डेटाबेस से इंटरैक्ट करने आदि के लिए किया जाता है।
- मोबाइल ऐप डेवलपमेंट: React Native या Ionic जैसे फ्रेमवर्क का उपयोग करके, आप जावास्क्रिप्ट के साथ iOS और Android दोनों के लिए नेटिव मोबाइल ऐप बना सकते हैं।
- डेस्कटॉप ऐप डेवलपमेंट: Electron जैसे फ्रेमवर्क का उपयोग करके, आप जावास्क्रिप्ट, HTML और CSS का उपयोग करके डेस्कटॉप एप्लिकेशन बना सकते हैं।
- गेम डेवलपमेंट: कुछ फ्रेमवर्क और लाइब्रेरी जावास्क्रिप्ट का उपयोग करके ब्राउज़र-आधारित या अन्य प्रकार के गेम बनाने की अनुमति देते हैं।
2. जावास्क्रिप्ट में वेरिएबल कैसे घोषित करें?
वेरिएबल डेटा को स्टोर करने के लिए कंटेनर होते हैं। जावास्क्रिप्ट में वेरिएबल घोषित करने के तीन तरीके हैं:
var: फंक्शन स्कोप या ग्लोबल स्कोप होता है। इसे ES6 से पहले इस्तेमाल किया जाता था, लेकिन इसमें कुछ समस्याएं हैं (जैसे होस्टिंग व्यवहार)।let: ब्लॉक स्कोप होता है। इसे ES6 में पेश किया गया था और यहvarसे बेहतर माना जाता है क्योंकि यह स्कोप के मुद्दों को कम करता है। इसे रीअसाइन किया जा सकता है।const: ब्लॉक स्कोप होता है। इसे भी ES6 में पेश किया गया था। इसका मान एक बार असाइन होने के बाद बदला नहीं जा सकता (प्रिमिटिव वैल्यू के लिए)। ऑब्जेक्ट और एरे के लिए, आप उनके गुणों या तत्वों को बदल सकते हैं, लेकिन वेरिएबल को किसी नए ऑब्जेक्ट या एरे पर रीअसाइन नहीं कर सकते।
var उम्र = 30; // पुरानी शैली
let नाम = "राहुल"; // अनुशंसित
const pi = 3.14; // स्थिरांक
// मान बदलना
नाम = "सुमित"; // let की अनुमति है
// pi = 3.14159; // const की अनुमति नहीं है, त्रुटि देगा
3. जावास्क्रिप्ट में डेटा टाइप क्या हैं?
जावास्क्रिप्ट में डेटा के प्रकार को डेटा टाइप कहते हैं। मुख्य रूप से दो प्रकार के डेटा टाइप होते हैं:
प्रिमिटिव डेटा टाइप (Primitive Data Types): ये मूल डेटा टाइप हैं जो एक सिंगल वैल्यू रखते हैं।
- String: टेक्स्ट डेटा (जैसे "नमस्ते दुनिया", 'एकल उद्धरण')।
- Number: संख्याएं (जैसे 10, 3.14, -5)। इसमें पूर्णांक और फ्लोटिंग-पॉइंट संख्याएं दोनों शामिल हैं।
- Boolean: केवल दो मान होते हैं:
trueयाfalse। - Null: जानबूझकर असाइन किया गया 'कोई मान नहीं' मान। यह एक ऑब्जेक्ट नहीं है, हालांकि
typeofऑपरेटर इसे 'object' दिखाता है (यह एक ऐतिहासिक बग है)। - Undefined: एक वेरिएबल जिसे घोषित किया गया है लेकिन कोई मान असाइन नहीं किया गया है।
- Symbol (ES6): अद्वितीय पहचानकर्ताओं के लिए।
- BigInt (ES11): बहुत बड़ी पूर्णांक संख्याओं के लिए।
नॉन-प्रिमिटिव डेटा टाइप (Non-Primitive Data Types): ये जटिल डेटा टाइप हैं जो कई वैल्यू या अधिक जटिल संरचनाएं रख सकते हैं।
- Object: की-वैल्यू जोड़े का संग्रह (जैसे
{ नाम: "राहुल", उम्र: 30 })। फंक्शन्स और एरे भी तकनीकी रूप से ऑब्जेक्ट ही हैं। - Array: अनुक्रमित आइटमों का संग्रह (जैसे
[1, 2, 3, "चार"])। - Function: कोड ब्लॉक जिसे कॉल किया जा सकता है और निष्पादित किया जा सकता है।
let greeting = "हैलो"; // String
let count = 100; // Number
let isloggedIn = true; // Boolean
let emptyValue = null; // Null
let notAssigned; // Undefined
let person = { firstName: "जॉन", lastName: "डो" }; // Object
let numbers = [1, 2, 3, 4]; // Array
let sayHello = function() { console.log("हैलो!"); }; // Function
4. जावास्क्रिप्ट में ऑपरेटर कैसे काम करते हैं?
ऑपरेटर विशेष प्रतीक होते हैं जो वैल्यूज़ (ऑपरेंड) पर ऑपरेशन करते हैं। जावास्क्रिप्ट में कई प्रकार के ऑपरेटर हैं:
- अरिथमेटिक ऑपरेटर (Arithmetic Operators): जोड़ (+), घटाव (-), गुणा (*), भाग (/), मॉड्यूलो (%), घातांक (**) आदि।
- असाइनमेंट ऑपरेटर (Assignment Operators): मान असाइन करने के लिए (=, +=, -=, *=, /= आदि)।
- तुलनात्मक ऑपरेटर (Comparison Operators): वैल्यूज़ की तुलना करने के लिए (==, !=, ===, !==, >, <, >=, <=)।
==(समानता): वैल्यू की तुलना करता है, टाइप की नहीं (टाइप को कन्वर्ट करने की कोशिश करता है)।===(कठोर समानता): वैल्यू और टाइप दोनों की तुलना करता है। इसे उपयोग करने की सलाह दी जाती है।
- लॉजिकल ऑपरेटर (Logical Operators): लॉजिकल ऑपरेशन करने के लिए (&& (AND), || (OR), ! (NOT))।
- टर्नरी ऑपरेटर (Ternary Operator): तीन ऑपरेंड के साथ एक सशर्त ऑपरेटर (condition ? expr1 : expr2)।
- अन्य ऑपरेटर: टाइपऑपरेटर (
typeof), इंस्टेंसऑपरेटर (instanceof) आदि।
let a = 10;
let b = 5;
let sum = a + b; // 15
let difference = a - b; // 5
let product = a * b; // 50
let division = a / b; // 2
let remainder = a % b; // 0
a += 5; // a अब 15 है
let isEqual = (a == 15); // true
let isStrictlyEqual = (a === '15'); // false (टाइप अलग है)
let isGreater = (a > b); // true
let condition1 = true;
let condition2 = false;
let result = condition1 && condition2; // false
let result2 = condition1 || condition2; // true
let notCondition1 = !condition1; // false
let message = (a > 10) ? "बड़ा है" : "बड़ा नहीं है"; // बड़ा है
console.log(typeof a); // "number"
5. जावास्क्रिप्ट में फंक्शन कैसे बनाएं?
फंक्शन कोड के ब्लॉक होते हैं जिन्हें बार-बार उपयोग करने के लिए परिभाषित किया जाता है। यह कोड को व्यवस्थित और पुनः प्रयोज्य बनाने में मदद करता है। जावास्क्रिप्ट में फंक्शन बनाने के कई तरीके हैं:
- फंक्शन डिक्लेरेशन (Function Declaration): यह सबसे आम तरीका है। इसे होस्ट किया जाता है (इसे परिभाषित करने से पहले कॉल किया जा सकता है)।
- फंक्शन एक्सप्रेशन (Function Expression): एक वेरिएबल को फंक्शन असाइन करना। इसे होस्ट नहीं किया जाता है।
- एरो फंक्शन (Arrow Functions - ES6): फंक्शन एक्सप्रेशन का एक संक्षिप्त रूप। इनका अपना
thisसंदर्भ नहीं होता।
// फंक्शन डिक्लेरेशन
function नमस्ते(नाम) {
console.log("नमस्ते, " + नाम + "!");
}
नमस्ते("सीमा"); // आउटपुट: नमस्ते, सीमा!
// फंक्शन एक्सप्रेशन
const जोड़ें = function(x, y) {
return x + y;
};
let परिणाम = जोड़ें(5, 3); // परिणाम 8 है
console.log(परिणाम); // आउटपुट: 8
// एरो फंक्शन
const गुणा करें = (a, b) => a * b;
let उत्पाद = गुणा करें(4, 6); // उत्पाद 24 है
console.log(उत्पाद); // आउटपुट: 24
// सिंगल पैरामीटर के साथ एरो फंक्शन (ब्रैकेट वैकल्पिक हैं)
const वर्ग = num => num * num;
console.log(वर्ग(7)); // आउटपुट: 49
// बिना पैरामीटर के एरो फंक्शन
const हैलो = () => console.log("हैलो!");
हैलो(); // आउटपुट: हैलो!
6. जावास्क्रिप्ट में फंक्शन के प्रकार क्या हैं?
फंक्शन बनाने के तरीके के अलावा, हम उन्हें उनके उपयोग या परिभाषा के आधार पर वर्गीकृत कर सकते हैं:
- नेम्ड फंक्शन (Named Functions): वे फंक्शन जिनका एक नाम होता है (जैसे ऊपर दिया गया
नमस्ते)। - एनोनिमस फंक्शन (Anonymous Functions): वे फंक्शन जिनका कोई नाम नहीं होता। अक्सर फंक्शन एक्सप्रेशन या कॉलबैक फंक्शन के रूप में उपयोग किए जाते हैं (जैसे ऊपर दिया गया फंक्शन एक्सप्रेशन
जोड़ें)। - एरो फंक्शन (Arrow Functions): जैसा कि ऊपर बताया गया है, फंक्शन एक्सप्रेशन का एक संक्षिप्त सिंटैक्स।
- इमीडिएटली इन्वोक्ड फंक्शन एक्सप्रेशन (IIFE - Immediately Invoked Function Expression): एक फंक्शन एक्सप्रेशन जिसे परिभाषित होते ही तुरंत निष्पादित कर दिया जाता है। यह वेरिएबल स्कोप को अलग रखने के लिए उपयोगी है।
- कॉलबैक फंक्शन (Callback Functions): एक फंक्शन जिसे किसी अन्य फंक्शन में आर्गुमेंट के रूप में पास किया जाता है और बाद में (असिंक्रोनस ऑपरेशन पूरा होने पर, या किसी इवेंट के होने पर) निष्पादित किया जाता है।
- मेथड्स (Methods): जो फंक्शन किसी ऑब्जेक्ट की प्रॉपर्टी होते हैं।
// IIFE
(function() {
let निजीवेरिएबल = "यह बाहर से एक्सेस नहीं किया जा सकता";
console.log("IIFE चल रहा है");
})();
// console.log(निजीवेरिएबल); // यह त्रुटि देगा
// कॉलबैक फंक्शन
function डेटालाओ(कॉलबैक) {
// मान लीजिए डेटा लाने में कुछ समय लगता है
setTimeout(function() {
const डेटा = "सर्वर से डेटा";
कॉलबैक(डेटा); // डेटा मिलने के बाद कॉलबैक को कॉल करें
}, 2000); // 2 सेकंड का विलंब
}
डेटालाओ(function(प्राप्तडेटा) {
console.log("कॉलबैक द्वारा प्राप्त डेटा:", प्राप्तडेटा);
});
7. जावास्क्रिप्ट में स्कोप क्या है और कैसे काम करता है?
स्कोप यह निर्धारित करता है कि आप अपने कोड में वेरिएबल और फंक्शन्स को कहां एक्सेस कर सकते हैं। यह वेरिएबल्स की एक्सेसिबिलिटी को नियंत्रित करता है। जावास्क्रिप्ट में मुख्य रूप से तीन प्रकार के स्कोप हैं:
- ग्लोबल स्कोप (Global Scope): कोड के किसी भी हिस्से से एक्सेस किया जा सकता है। ब्राउज़र में, यह
windowऑब्जेक्ट (या Node.js मेंglobal) पर परिभाषित होता है।varका उपयोग करके फ़ंक्शन के बाहर घोषित वेरिएबल ग्लोबल होते हैं (यदि वे किसी ब्लॉक में नहीं हैं)। - फंक्शन स्कोप (Function Scope): केवल उस फंक्शन के अंदर एक्सेस किया जा सकता है जहां उन्हें घोषित किया गया है।
varका उपयोग करके फ़ंक्शन के अंदर घोषित वेरिएबल फंक्शन स्कोप होते हैं। - ब्लॉक स्कोप (Block Scope - ES6): केवल उस ब्लॉक (
{}कर्ली ब्रेसेस के अंदर) के अंदर एक्सेस किया जा सकता है जहां उन्हें घोषित किया गया है।letऔरconstका उपयोग करके घोषित वेरिएबल ब्लॉक स्कोप होते हैं।
let ग्लोबलवेरिएबल = "मैं ग्लोबल हूँ";
function मेराफंक्शन() {
let फंक्शनवेरिएबल = "मैं फंक्शन के अंदर हूँ";
console.log(ग्लोबलवेरिएबल); // एक्सेस कर सकता हूँ
console.log(फंक्शनवेरिएबल); // एक्सेस कर सकता हूँ
if (true) {
let ब्लॉकवेरिएबल = "मैं ब्लॉक के अंदर हूँ";
console.log(ब्लॉकवेरिएबल); // एक्सेस कर सकता हूँ
}
// console.log(ब्लॉकवेरिएबल); // त्रुटि देगा, ब्लॉक के बाहर है
}
मेराफंक्शन();
console.log(ग्लोबलवेरिएबल); // एक्सेस कर सकता हूँ
// console.log(फंक्शनवेरिएबल); // त्रुटि देगा, फंक्शन के बाहर है
8. जावास्क्रिप्ट में क्लोजर क्या है और कैसे काम करता है?
क्लोजर तब बनता है जब एक इनर फंक्शन अपने आउटर (पेरेंट) फंक्शन के वेरिएबल और स्कोप चेन तक पहुंच बनाए रखता है, भले ही आउटर फंक्शन का निष्पादन पूरा हो गया हो। क्लोजर आपको डेटा को निजी (private) रखने और स्टेट बनाए रखने की अनुमति देते हैं।
function बाहरीफंक्शन(बाहरीवेरिएबल) {
return function भीतरीफंक्शन(भीतरीवेरिएबल) {
// यह भीतरीफंक्शन बाहरीफंक्शन के स्कोप को 'बंद' (close over) कर रहा है
console.log("बाहरी वेरिएबल:", बाहरीवेरिएबल);
console.log("भीतरी वेरिएबल:", भीतरीवेरिएबल);
}
}
const मेराक्लोजर = बाहरीफंक्शन("हैलो"); // बाहरीफंक्शन निष्पादित हुआ और भीतरीफंक्शन लौटा
मेराक्लोजर("दुनिया"); // अब भीतरीफंक्शन को कॉल करें, यह बाहरीवेरिएबल को याद रखता है
// आउटपुट:
// बाहरी वेरिएबल: हैलो
// भीतरी वेरिएबल: दुनिया
इस उदाहरण में, बाहरीफंक्शन निष्पादित होने और रिटर्न होने के बाद भी, भीतरीफंक्शन (जो मेराक्लोजर वेरिएबल को असाइन किया गया है) अभी भी बाहरीवेरिएबल को एक्सेस और याद रख सकता है। यह क्लोजर का एक प्रमुख उदाहरण है।
9. जावास्क्रिप्ट में ऑब्जेक्ट कैसे बनाएं?
ऑब्जेक्ट की-वैल्यू जोड़े का संग्रह होते हैं। जावास्क्रिप्ट में ऑब्जेक्ट बनाने के कई तरीके हैं:
- ऑब्जेक्ट लिटरल (Object Literal): यह सबसे सरल और आम तरीका है।
new Object():Objectकंस्ट्रक्टर का उपयोग करना।- कंस्ट्रक्टर फंक्शन (Constructor Functions): ऑब्जेक्ट बनाने के लिए एक फंक्शन को 'ब्लूप्रिंट' के रूप में उपयोग करना।
- ES6 क्लास (ES6 Classes): कंस्ट्रक्टर फंक्शन्स का एक अधिक संरचित और सिंटैक्टिकली शुगर तरीका।
// ऑब्जेक्ट लिटरल
const व्यक्ति = {
नाम: "अमित",
उम्र: 25,
पेशा: "इंजीनियर"
};
console.log(व्यक्ति);
// new Object()
const कार = new Object();
कार.ब्रांड = "मारुति";
कार.मॉडल = "स्विफ्ट";
console.log(कार);
// कंस्ट्रक्टर फंक्शन
function पशु(प्रजाति, नाम) {
this.प्रजाति = प्रजाति;
this.नाम = नाम;
this.आवाज़दो = function() {
console.log(this.नाम + " आवाज़ कर रहा है!");
};
}
const कुत्ता = new पशु("कुत्ता", "टॉमी");
console.log(कुत्ता);
कुत्ता.आवाज़दो(); // आउटपुट: टॉमी आवाज़ कर रहा है!
// ES6 क्लास
class पुस्तक {
constructor(शीर्षक, लेखक) {
this.शीर्षक = शीर्षक;
this.लेखक = लेखक;
}
विवरण_दें() {
console.log(`${this.शीर्षक} द्वारा ${this.लेखक}`);
}
}
const मेरीपुस्तक = new पुस्तक("मेरी कहानी", "लेखक x");
console.log(मेरीपुस्तक);
मेरीपुस्तक.विवरण_दें(); // आउटपुट: मेरी कहानी द्वारा लेखक x
10. जावास्क्रिप्ट में ऑब्जेक्ट के गुण और तरीके क्या हैं?
ऑब्जेक्ट में दो मुख्य चीज़ें होती हैं:
- गुण (Properties): ये ऑब्जेक्ट की विशेषताएं या डेटा होते हैं, जिन्हें की-वैल्यू जोड़े के रूप में दर्शाया जाता है।
- तरीके (Methods): ये ऑब्जेक्ट से जुड़े फंक्शन होते हैं। वे ऑब्जेक्ट के डेटा पर कार्रवाई कर सकते हैं या ऑब्जेक्ट के व्यवहार को परिभाषित कर सकते हैं।
आप डॉट नोटेशन (object.property या object.method()) या ब्रैकेट नोटेशन (object['property'] या object['method']()) का उपयोग करके गुणों और तरीकों तक पहुँच सकते हैं। ब्रैकेट नोटेशन तब उपयोगी होता है जब प्रॉपर्टी का नाम वेरिएबल में हो या उसमें विशेष वर्ण हों।
const छात्र = {
नाम: "पूजा", // गुण
ग्रेड: "A", // गुण
नमस्ते_कहो: function() { // तरीका
console.log("नमस्ते, मेरा नाम " + this.नाम + " है।");
},
विषय: ["गणित", "विज्ञान"] // एक गुण जो एक एरे है
};
console.log(छात्र.नाम); // डॉट नोटेशन से गुण एक्सेस करें
console.log(छात्र['ग्रेड']); // ब्रैकेट नोटेशन से गुण एक्सेस करें
छात्र.नमस्ते_कहो(); // तरीके को कॉल करें
console.log(छात्र.विषय[0]); // एरे गुण के तत्व को एक्सेस करें
// नया गुण जोड़ना
छात्र.शहर = "दिल्ली";
console.log(छात्र.शहर); // आउटपुट: दिल्ली
11. जावास्क्रिप्ट में एरे कैसे बनाएं?
एरे अनुक्रमित तत्वों का एक संग्रह होता है। एरे के तत्वों को उनके इंडेक्स (0 से शुरू होकर) द्वारा एक्सेस किया जाता है। एरे बनाने के दो मुख्य तरीके हैं:
- एरे लिटरल (Array Literal): यह सबसे आम और अनुशंसित तरीका है।
new Array():Arrayकंस्ट्रक्टर का उपयोग करना।
// एरे लिटरल
const रंग = ["लाल", "हरा", "नीला"];
console.log(रंग); // आउटपुट: ["लाल", "हरा", "नीला"]
// new Array()
const संख्याएं = new Array(1, 2, 3, 4, 5);
console.log(संख्याएं); // आउटपुट: [1, 2, 3, 4, 5]
// खाली एरे
const खालीएरे = [];
// तत्वों को एक्सेस करना (इंडेक्स 0 से शुरू होता है)
console.log(रंग[0]); // आउटपुट: लाल
console.log(संख्याएं[2]); // आउटपुट: 3
// तत्वों को बदलना
रंग[1] = "पीला";
console.log(रंग); // आउटपुट: ["लाल", "पीला", "नीला"]
// एरे की लंबाई
console.log(रंग.length); // आउटपुट: 3
12. जावास्क्रिप्ट में एरे के तरीके क्या हैं?
जावास्क्रिप्ट एरे के साथ काम करने के लिए कई उपयोगी बिल्ट-इन तरीके प्रदान करता है। कुछ सामान्य तरीके हैं:
push(): एरे के अंत में एक या अधिक तत्व जोड़ता है।pop(): एरे के अंत से अंतिम तत्व हटाता है और उसे लौटाता है।shift(): एरे के शुरुआत से पहला तत्व हटाता है और उसे लौटाता है।unshift(): एरे के शुरुआत में एक या अधिक तत्व जोड़ता है।length: एरे के तत्वों की संख्या।concat(): दो या दो से अधिक एरे को जोड़ता है।join(): एरे के सभी तत्वों को एक स्ट्रिंग में जोड़ता है।slice(): एरे के एक हिस्से से एक नया एरे बनाता है।splice(): एरे में तत्वों को जोड़ता, हटाता या बदलता है (मूल एरे को बदलता है)।forEach(): एरे के प्रत्येक तत्व पर एक फ़ंक्शन को निष्पादित करता है।map(): एरे के प्रत्येक तत्व पर एक फ़ंक्शन को निष्पादित करता है और परिणामों के साथ एक नया एरे बनाता है।filter(): एरे के तत्वों को फ़िल्टर करता है जो एक शर्त को पूरा करते हैं और एक नया एरे बनाते हैं।reduce(): एरे के तत्वों को एक सिंगल वैल्यू में कम करता है।find(): एरे में पहली आइटम लौटाता है जो एक शर्त को पूरा करती है।findIndex(): एरे में पहली आइटम का इंडेक्स लौटाता है जो एक शर्त को पूरा करती है।
const फल = ["सेब", "केला", "संतरा"];
फल.push("अंगूर"); // ["सेब", "केला", "संतरा", "अंगूर"]
console.log(फल);
let अंतिमफल = फल.pop(); // अंतिमफल "अंगूर" है, फल है ["सेब", "केला", "संतरा"]
console.log(अंतिमफल, फल);
फल.unshift("आम"); // ["आम", "सेब", "केला", "संतरा"]
console.log( फल);
फल.forEach(function(item) {
console.log("फल:", item);
});
const संख्याएं = [1, 2, 3, 4, 5];
const दुगुनीसंख्याएं = संख्याएं.map(num => num * 2); // [2, 4, 6, 8, 10]
console.log(दुगुनीसंख्याएं);
const समसंख्याएं = संख्याएं.filter(num => num % 2 === 0); // [2, 4]
console.log(समसंख्याएं);
13. जावास्क्रिप्ट में डोम क्या है और कैसे काम करता है?
DOM का मतलब है **Document Object Model**। यह HTML या XML डॉक्यूमेंट का एक प्रोग्रामिंग इंटरफ़ेस है। ब्राउज़र HTML पेज को लोड करते समय उसका DOM ट्री बनाता है। यह ट्री डॉक्यूमेंट की संरचना का प्रतिनिधित्व करता है, जिसमें प्रत्येक HTML तत्व (जैसे <div>, <p>, <button>) एक नोड होता है।
जावास्क्रिप्ट DOM API का उपयोग करके इस ट्री तक पहुँच सकती है और उसे बदल सकती है। इसका मतलब है कि आप जावास्क्रिप्ट का उपयोग करके वेब पेज के:
- तत्वों (Elements) का चयन कर सकते हैं।
- तत्वों की सामग्री (Content) बदल सकते हैं (जैसे टेक्स्ट)।
- तत्वों के एट्रीब्यूट (Attributes) बदल सकते हैं (जैसे
src,href,class)। - तत्वों की स्टाइल (Style) बदल सकते हैं (जैसे रंग, फ़ॉन्ट आकार)।
- नए तत्व बना सकते हैं या मौजूदा तत्वों को हटा सकते हैं।
- इवेंट्स (जैसे क्लिक, माउसओवर) पर प्रतिक्रिया कर सकते हैं।
सरल शब्दों में, DOM ब्राउज़र को यह समझने का एक तरीका देता है कि वेब पेज कैसे संरचित है, और जावास्क्रिप्ट को उस संरचना और सामग्री को गतिशील रूप से बदलने की अनुमति देता है।
14. जावास्क्रिप्ट में इवेंट क्या हैं और कैसे काम करते हैं?
इवेंट्स ऐसी क्रियाएं हैं जो वेब पेज पर होती हैं। ये या तो उपयोगकर्ता द्वारा (जैसे माउस क्लिक, कीबोर्ड प्रेस, फॉर्म सबमिट करना) या ब्राउज़र द्वारा (जैसे पेज लोड होना, इमेज लोड होना) ट्रिगर की जा सकती हैं।
जब कोई इवेंट होता है, तो ब्राउज़र एक इवेंट ऑब्जेक्ट बनाता है जिसमें इवेंट के बारे में जानकारी होती है। जावास्क्रिप्ट इन इवेंट्स को 'सुन' सकती है और जब कोई विशिष्ट इवेंट होता है, तो एक निर्दिष्ट फ़ंक्शन (जिसे इवेंट हैंडलर या इवेंट लिसनर कहते हैं) को निष्पादित कर सकती है।
इवेंट्स DOM ट्री में ऊपर (बुबलिंग) या नीचे (कैप्चरिंग) तक फैल सकते हैं। यह इवेंट डेलिगेशन जैसी तकनीकों के लिए महत्वपूर्ण है।
15. जावास्क्रिप्ट में इवेंट लिस्टनर कैसे जोड़ें?
इवेंट लिस्टनर (Event Listener) एक फ़ंक्शन है जो किसी विशिष्ट एलिमेंट पर किसी विशिष्ट इवेंट के होने पर निष्पादित होता है। इवेंट लिस्टनर जोड़ने का सबसे अनुशंसित तरीका addEventListener() मेथड का उपयोग करना है।
element.addEventListener(event, listener, useCapture)
event: इवेंट का नाम (जैसे 'click', 'mouseover', 'submit')।listener: वह फ़ंक्शन जिसे इवेंट होने पर निष्पादित किया जाना है।useCapture(वैकल्पिक): एक बूलियन जो निर्दिष्ट करता है कि इवेंट कैप्चरिंग चरण (true) या बुबलिंग चरण (false) में पंजीकृत होना चाहिए। डिफ़ॉल्टfalseहै (बुबलिंग)।
आप पुरानी शैली के इवेंट हैंडलर प्रॉपर्टी (जैसे element.onclick = functionName) का भी उपयोग कर सकते हैं, लेकिन addEventListener अधिक लचीला है क्योंकि आप एक ही इवेंट के लिए कई लिसनर जोड़ सकते हैं।
<button id="मेराबटन">मुझ पर क्लिक करें</button>
<script>
const बटन = document.getElementById("मेराबटन");
// इवेंट लिस्टनर जोड़ें
बटन.addEventListener('click', function() {
alert("बटन पर क्लिक किया गया!");
});
// आप अलग से परिभाषित फंक्शन भी पास कर सकते हैं
function हैंडलक्लिक() {
console.log("एक और क्लिक हैंडलर!");
}
बटन.addEventListener('click', हैंडलक्लिक); // एक ही बटन पर दो क्लिक लिसनर
</script>
16. जावास्क्रिप्ट में डोम मैनिपुलेशन कैसे करें?
DOM मैनिपुलेशन का अर्थ है जावास्क्रिप्ट का उपयोग करके वेब पेज की सामग्री, संरचना या स्टाइल को बदलना। DOM API इसके लिए कई मेथड प्रदान करती है:
- तत्वों का चयन करना:
document.getElementById('id'): एक विशिष्ट आईडी वाला तत्व चुनें।document.querySelector('css-selector'): निर्दिष्ट CSS सेलेक्टर से मेल खाने वाला पहला तत्व चुनें।document.querySelectorAll('css-selector'): निर्दिष्ट CSS सेलेक्टर से मेल खाने वाले सभी तत्वों का एक NodeList चुनें।document.getElementsByClassName('class-name'): एक विशिष्ट क्लास नेम वाले सभी तत्वों का एक HTMLCollection चुनें।document.getElementsByTagName('tag-name'): एक विशिष्ट टैग नेम वाले सभी तत्वों का एक HTMLCollection चुनें।
- सामग्री बदलना:
element.innerHTML: तत्व के अंदर HTML सामग्री प्राप्त करें या सेट करें।element.textContent: तत्व के अंदर टेक्स्ट सामग्री प्राप्त करें या सेट करें (HTML टैग को अनदेखा करता है)।
- एट्रीब्यूट बदलना:
element.setAttribute('name', 'value'): एक एट्रीब्यूट का मान सेट करें।element.getAttribute('name'): एक एट्रीब्यूट का मान प्राप्त करें।element.removeAttribute('name'): एक एट्रीब्यूट हटाएँ।
- स्टाइल बदलना:
element.style.propertyName = 'value': इनलाइन स्टाइल प्रॉपर्टी बदलें (जैसेelement.style.color = 'red')।
- तत्व बनाना और हटाना:
document.createElement('tagname'): एक नया HTML तत्व बनाएँ।parentNode.appendChild(childNode): किसी तत्व को दूसरे तत्व के अंत में जोड़ें।parentNode.removeChild(childNode): किसी तत्व को हटाएँ।
<div id="संदेश">यह प्रारंभिक संदेश है।</div>
<ul id="सूची"></ul>
<script>
// सामग्री बदलना
const संदेशदिव = document.getElementById("संदेश");
संदेशदिव.textContent = "संदेश बदल गया!";
संदेशदिव.style.color = "green"; // स्टाइल बदलना
// नया तत्व बनाना और जोड़ना
const सूचीउल = document.getElementById("सूची");
const नयालिस्टआइटम = document.createElement("li");
नयालिस्टआइटम.textContent = "नई सूची आइटम";
सूचीउल.appendChild(नयालिस्टआइटम);
// एट्रीब्यूट जोड़ना
const लिंक = document.createElement("a");
लिंक.setAttribute("href", "https://www.google.com");
लिंक.textContent = "गूगल पर जाएँ";
सूचीउल.appendChild(लिंक); // लिंक को सूची में जोड़ें
</script>
17. जावास्क्रिप्ट का उपयोग वेब डेवलपमेंट में कैसे किया जाता है?
जैसा कि परिचय में उल्लेख किया गया है, जावास्क्रिप्ट वेब डेवलपमेंट का एक अनिवार्य हिस्सा है। इसका उपयोग मुख्य रूप से निम्नलिखित के लिए किया जाता है:
- फ्रंटएंड इंटरैक्टिविटी: बटन क्लिक, माउस मूवमेंट, कीबोर्ड इनपुट आदि पर प्रतिक्रिया करके वेब पेजों को गतिशील बनाना।
- डायनामिक कंटेंट लोडिंग: पेज को रीलोड किए बिना सर्वर से डेटा लाना और पेज के हिस्सों को अपडेट करना (AJAX या Fetch API का उपयोग करके)।
- फॉर्म वेलिडेशन: डेटा को सर्वर पर भेजने से पहले क्लाइंट-साइड पर फॉर्म इनपुट की जाँच करना (हालांकि सर्वर-साइड वेलिडेशन हमेशा आवश्यक है)।
- सिंगल-पेज एप्लीकेशन्स (SPAs): React, Angular, Vue जैसे फ्रेमवर्क का उपयोग करके ऐसे वेब एप्लिकेशन बनाना जो केवल एक HTML पेज लोड करते हैं और जावास्क्रिप्ट का उपयोग करके सामग्री को गतिशील रूप से अपडेट करते हैं।
- एनिमेशन और विज़ुअल इफेक्ट्स: CSS एनिमेशन को ट्रिगर करना या कैनवस API का उपयोग करके कस्टम एनिमेशन बनाना।
- ब्राउज़र API के साथ इंटरैक्ट करना: जिओलोकेशन, वेब स्टोरेज, नोटिफिकेशन्स आदि जैसी ब्राउज़र सुविधाओं का उपयोग करना।
- सर्वर-साइड रेंडरिंग (SSR) और स्टैटिक साइट जेनरेशन (SSG): Node.js और फ्रेमवर्क का उपयोग करके बेहतर परफॉरमेंस और SEO के लिए।
18. जावास्क्रिप्ट फ्रेमवर्क और लाइब्रेरी क्या हैं?
जैसे-जैसे वेब एप्लिकेशन अधिक जटिल होते गए, डेवलपर्स ने सामान्य कार्यों को सरल बनाने और कोड को व्यवस्थित करने के लिए टूल बनाए। यहीं पर फ्रेमवर्क और लाइब्रेरी आते हैं।
- लाइब्रेरी (Library): कोड का एक संग्रह है जो आपको विशिष्ट कार्य करने में मदद करता है। आप अपनी आवश्यकतानुसार लाइब्रेरी चुन सकते हैं और उन्हें अपने प्रोजेक्ट में एकीकृत कर सकते हैं। आप तय करते हैं कि कोड का प्रवाह कैसा होगा। उदाहरण: jQuery (DOM मैनिपुलेशन को सरल बनाने के लिए), Lodash (यूटिलिटी फंक्शन्स)।
- फ्रेमवर्क (Framework): आपके एप्लिकेशन की संरचना और आर्किटेक्चर के लिए एक नींव प्रदान करता है। यह आपके लिए कोड का प्रवाह (Flow) निर्धारित करता है, और आप फ्रेमवर्क के नियमों का पालन करके अपना कोड लिखते हैं। उदाहरण: React, Angular, Vue (सिंगल-पेज एप्लिकेशन बनाने के लिए)।
आधुनिक वेब डेवलपमेंट में फ्रेमवर्क और लाइब्रेरी का उपयोग आम है क्योंकि वे विकास को गति देते हैं, कोड को अधिक पठनीय और बनाए रखने योग्य बनाते हैं, और सामान्य समस्याओं के लिए सिद्ध समाधान प्रदान करते हैं।
19. जावास्क्रिप्ट में एपीआई कैसे कॉल करें?
API (Application Programming Interface) सर्वर-साइड डेटा या कार्यक्षमता तक पहुँचने का एक तरीका है। वेब डेवलपमेंट में, इसका मतलब अक्सर HTTP रिक्वेस्ट (जैसे GET, POST) का उपयोग करके सर्वर से डेटा लाना या डेटा भेजना होता है। जावास्क्रिप्ट में API कॉल करने के दो मुख्य तरीके हैं:
XMLHttpRequest(पुराना तरीका): यह एक ऑब्जेक्ट है जिसका उपयोग सर्वर से डेटा का अनुरोध करने के लिए किया जाता है। यह थोड़ा वर्बोस हो सकता है और कॉलबैक पर निर्भर करता है।- Fetch API (आधुनिक तरीका): यह API कॉल करने का एक नया और अधिक शक्तिशाली तरीका है। यह प्रॉमिस पर आधारित है, जो असिंक्रोनस कोड को प्रबंधित करना आसान बनाता है।
// पब्लिक API से डेटा लाना
fetch('https://jsonplaceholder.typicode.com/posts/1')
.then(response => {
// जांचें कि अनुरोध सफल था या नहीं
if (!response.ok) {
throw new Error('नेटवर्क प्रतिक्रिया ठीक नहीं थी');
}
return response.json(); // प्रतिक्रिया को JSON में पार्स करें
})
.then(data => {
console.log("प्राप्त डेटा:", data);
})
.catch(error => {
console.error('Fetch ऑपरेशन में समस्या:', error);
});
// Async/Await के साथ Fetch (आधुनिक तरीका)
async function डेटालाओAsync() {
try {
const response = await fetch('https://jsonplaceholder.typicode.com/posts/1');
if (!response.ok) {
throw new Error('नेटवर्क प्रतिक्रिया ठीक नहीं थी');
}
const data = await response.json();
console.log("Async/Await से प्राप्त डेटा:", data);
} catch (error) {
console.error('Fetch ऑपरेशन में समस्या (Async/Await):', error);
}
}
डेटालाओAsync();
20. जावास्क्रिप्ट में वेब स्टोरेज कैसे उपयोग करें?
वेब स्टोरेज ब्राउज़र में डेटा को क्लाइंट-साइड पर स्टोर करने का एक तरीका है। यह कुकीज़ का एक विकल्प है, जो अधिक डेटा स्टोर कर सकता है और सर्वर को हर बार रिक्वेस्ट के साथ डेटा नहीं भेजता। दो प्रकार के वेब स्टोरेज हैं:
localStorage: डेटा को तब तक स्टोर करता है जब तक उपयोगकर्ता ब्राउज़र कैश या स्टोरेज को मैन्युअल रूप से साफ नहीं करता। यह सत्रों के बीच भी बना रहता है।sessionStorage: डेटा को केवल वर्तमान सत्र के लिए स्टोर करता है। जब उपयोगकर्ता ब्राउज़र टैब या विंडो बंद करता है, तो डेटा हटा दिया जाता है।
दोनों localStorage और sessionStorage की-वैल्यू जोड़े में स्ट्रिंग के रूप में डेटा स्टोर करते हैं। ऑब्जेक्ट या एरे को स्टोर करने के लिए, आपको उन्हें JSON.stringify() का उपयोग करके स्ट्रिंग में बदलना होगा और प्राप्त करते समय JSON.parse() का उपयोग करके वापस बदलना होगा।
// localStorage में डेटा सेट करें
localStorage.setItem('उपयोगकर्तानाम', 'अंजली');
localStorage.setItem('पसंद', JSON.stringify({ थीम: 'डार्क', भाषा: 'हिंदी' }));
// localStorage से डेटा प्राप्त करें
const उपयोगकर्तानाम = localStorage.getItem('उपयोगकर्तानाम');
const पसंद = JSON.parse(localStorage.getItem('पसंद'));
console.log("उपयोगकर्तानाम:", उपयोगकर्तानाम); // आउटपुट: अंजली
console.log("पसंद:", पसंद); // आउटपुट: { थीम: 'डार्क', भाषा: 'हिंदी' }
// localStorage से डेटा हटाएँ
// localStorage.removeItem('उपयोगकर्तानाम');
// sessionStorage का उपयोग localStorage के समान ही है
sessionStorage.setItem('अस्थायीडेटा', 'यह केवल इस सत्र के लिए है');
console.log(sessionStorage.getItem('अस्थायीडेटा'));
21. जावास्क्रिप्ट में सुरक्षा के लिए क्या उपाय हैं?
जावास्क्रिप्ट क्लाइंट-साइड पर चलती है, जिसका अर्थ है कि कोड उपयोगकर्ता को दिखाई देता है। इसलिए, सुरक्षा के कुछ पहलुओं पर ध्यान देना महत्वपूर्ण है:
- क्लाइंट-साइड वेलिडेशन पर्याप्त नहीं है: हमेशा सर्वर-साइड पर भी इनपुट डेटा की जाँच करें। क्लाइंट-साइड वेलिडेशन केवल उपयोगकर्ता अनुभव को बेहतर बनाने के लिए है, सुरक्षा के लिए नहीं।
eval()का उपयोग करने से बचें:eval()फ़ंक्शन एक स्ट्रिंग को JavaScript कोड के रूप में निष्पादित करता है। यदि स्ट्रिंग उपयोगकर्ता इनपुट से आती है, तो यह गंभीर सुरक्षा जोखिम (कोड इंजेक्शन) पैदा कर सकता है।- उपयोगकर्ता द्वारा प्रदान की गई सामग्री को सैनिटाइज करें: यदि आप उपयोगकर्ता से इनपुट लेते हैं और उसे DOM में डालते हैं (जैसे किसी कमेंट सेक्शन में), तो सुनिश्चित करें कि कोई भी दुर्भावनापूर्ण HTML या JavaScript कोड हटा दिया गया है। टेक्स्ट कंटेंट के लिए
textContentका उपयोग करना अक्सरinnerHTMLसे सुरक्षित होता है। - कंटेंट सिक्योरिटी पॉलिसी (CSP) का उपयोग करें: CSP एक HTTP हेडर है जो ब्राउज़र को बताता है कि किन स्रोतों से स्क्रिप्ट, स्टाइलशीट और अन्य संसाधन लोड करने की अनुमति है। यह XSS हमलों को रोकने में मदद कर सकता है।
- विश्वसनीय स्रोतों से ही स्क्रिप्ट लोड करें: अज्ञात या अविश्वसनीय CDN से स्क्रिप्ट लोड करने से बचें।
- असुरक्षित APIs के बारे में जानें: कुछ ब्राउज़र API (जैसे
document.write()का कुछ उपयोग) सुरक्षा जोखिम पैदा कर सकते हैं।
22. जावास्क्रिप्ट में एक्सएसएस हमले क्या हैं और कैसे बचें?
XSS का मतलब है **Cross-Site Scripting**। यह एक वेब सुरक्षा भेद्यता है जहां हमलावर दुर्भावनापूर्ण जावास्क्रिप्ट कोड को वेब पेज में इंजेक्ट करने में सक्षम होता है जिसे अन्य उपयोगकर्ता देखते हैं। यह कोड फिर ब्राउज़र में निष्पादित होता है, जिससे हमलावर सत्र कुकीज़ चुरा सकता है, उपयोगकर्ताओं को दुर्भावनापूर्ण साइटों पर रीडायरेक्ट कर सकता है, या पेज की सामग्री को बदल सकता है।
कैसे बचें:
- उपयोगकर्ता इनपुट को सैनिटाइज करें: किसी भी उपयोगकर्ता-प्रदान किए गए डेटा को सर्वर-साइड पर प्रोसेस करने से पहले अवांछित HTML टैग्स या स्क्रिप्ट को हटा दें या एस्केप कर दें।
- आउटपुट को एस्केप करें: जब भी आप उपयोगकर्ता-प्रदान किए गए डेटा को HTML पेज पर प्रदर्शित करते हैं, तो सुनिश्चित करें कि इसे सही ढंग से एस्केप किया गया है ताकि ब्राउज़र इसे HTML या JavaScript कोड के बजाय प्लेन टेक्स्ट के रूप में माने।
textContentका उपयोग करनाinnerHTMLसे बेहतर है जब आप सिर्फ टेक्स्ट डिस्प्ले कर रहे हों। लाइब्रेरीज़ (जैसे OWASP ESAPI) सैनिटाइजेशन और एस्केपिंग में मदद कर सकती हैं। - कंटेंट सिक्योरिटी पॉलिसी (CSP) लागू करें: यह ब्राउज़र को यह नियंत्रित करने में मदद करता है कि कौन से स्क्रिप्ट स्रोत विश्वसनीय हैं।
23. जावास्क्रिप्ट में सीएसआरएफ हमले क्या हैं और कैसे बचें?
CSRF का मतलब है **Cross-Site Request Forgery**। यह एक प्रकार का हमला है जहां हमलावर उपयोगकर्ता को एक ऐसी वेब एप्लिकेशन पर एक अवांछित कार्रवाई करने के लिए धोखा देता है जिसमें वे वर्तमान में लॉग इन हैं। उदाहरण के लिए, एक दुर्भावनापूर्ण साइट पर क्लिक करने से उपयोगकर्ता के बैंक खाते से पैसे ट्रांसफर हो सकते हैं, अगर उपयोगकर्ता बैंक की साइट पर लॉग इन है और CSRF सुरक्षा लागू नहीं है।
CSRF हमले सीधे जावास्क्रिप्ट कोड इंजेक्शन से संबंधित नहीं हैं, लेकिन वे अक्सर वेब एप्लिकेशन की सुरक्षा पर असर डालते हैं और जावास्क्रिप्ट-एन्हांस्ड फॉर्म या AJAX रिक्वेस्ट के माध्यम से किए जा सकते हैं।
कैसे बचें:
- CSRF टोकन का उपयोग करें: प्रत्येक संवेदनशील फॉर्म या AJAX रिक्वेस्ट के साथ एक अद्वितीय, अप्रत्याशित, और सत्र-विशिष्ट टोकन शामिल करें। सर्वर को यह सत्यापित करना चाहिए कि प्राप्त टोकन उपयोगकर्ता के सत्र के लिए अपेक्षित टोकन से मेल खाता है।
- SameSite कुकीज़ का उपयोग करें:
SameSiteकुकी एट्रीब्यूट ब्राउज़र को यह नियंत्रित करने के लिए कहता है कि कुकीज़ को क्रॉस-साइट अनुरोधों के साथ कब भेजना है। इसे 'Strict' या 'Lax' पर सेट करने से CSRF हमलों को रोकने में मदद मिल सकती है। - Referrer हेडर की जाँच करें: सर्वर-साइड पर, आप HTTP
Referrerहेडर की जाँच कर सकते हैं कि अनुरोध आपकी अपनी साइट से आ रहा है या नहीं। हालांकि, इसे बायपास किया जा सकता है, इसलिए इसे अकेले उपयोग नहीं किया जाना चाहिए।
24. जावास्क्रिप्ट में डेटा वेलिडेशन कैसे करें?
डेटा वेलिडेशन यह सुनिश्चित करने की प्रक्रिया है कि उपयोगकर्ता द्वारा दर्ज किया गया डेटा सही फॉर्मेट में है और आवश्यकताओं को पूरा करता है। जावास्क्रिप्ट का उपयोग क्लाइंट-साइड पर तत्काल फीडबैक प्रदान करने और उपयोगकर्ता अनुभव को बेहतर बनाने के लिए वेलिडेशन के लिए किया जाता है।
महत्वपूर्ण नोट: क्लाइंट-साइड वेलिडेशन सुरक्षा के लिए पर्याप्त नहीं है। हमलावर आसानी से ब्राउज़र में क्लाइंट-साइड जावास्क्रिप्ट को बायपास कर सकते हैं। **हमेशा सर्वर-साइड पर भी डेटा की जाँच करें।**
क्लाइंट-साइड वेलिडेशन के तरीके:
- आवश्यक फ़ील्ड की जाँच करना: जांचें कि क्या फ़ील्ड खाली छोड़े गए हैं।
- डेटा टाइप की जाँच करना: जांचें कि क्या संख्या क्षेत्र में संख्या ही दर्ज की गई है, या ईमेल क्षेत्र में सही ईमेल फॉर्मेट है।
- लंबाई की जाँच करना: जांचें कि क्या इनपुट की लंबाई न्यूनतम या अधिकतम सीमा के भीतर है।
- रेगुलर एक्सप्रेशन्स (Regular Expressions) का उपयोग करना: जटिल पैटर्न मैचिंग के लिए, जैसे कि ईमेल फॉर्मेट, फ़ोन नंबर, या पासवर्ड की ताकत की जाँच करना।
- कंडीशनल स्टेटमेंट का उपयोग करना:
if,else if,elseस्टेटमेंट्स का उपयोग करके विभिन्न शर्तों की जाँच करना। - बिल्ट-इन HTML5 वेलिडेशन: कुछ इनपुट टाइप (जैसे
email,url,number) और एट्रीब्यूट (जैसेrequired,minlength,maxlength,pattern) ब्राउज़र द्वारा बिल्ट-in वेलिडेशन प्रदान करते हैं, जिसे जावास्क्रिप्ट द्वारा भी नियंत्रित किया जा सकता है।
<input type="text" id="ईमेलइनपुट" placeholder="ईमेल दर्ज करें">
<button onclick="ईमेलवेलिडेट करें()">जांचें</button>
<p id="त्रुटिसंदेश" style="color: red;"></p>
<script>
function ईमेलवेलिडेट करें() {
const ईमेलइनपुट = document.getElementById("ईमेलइनपुट");
const त्रुटिसंदेशपैरा = document.getElementById("त्रुटिसंदेश");
const ईमेल = ईमेलइनपुट.value;
// सरल रेगुलर एक्सप्रेशन ईमेल फॉर्मेट के लिए
const ईमेलपैटर्न = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,6}$/;
if (ईमेल === "") {
त्रुटिसंदेशपैरा.textContent = "ईमेल खाली नहीं हो सकता।";
} else if (!ईमेलपैटर्न.test(ईमेल)) {
त्रुटिसंदेशपैरा.textContent = "कृपया एक मान्य ईमेल पता दर्ज करें।";
} else {
त्रुटिसंदेशपैरा.textContent = ""; // कोई त्रुटि नहीं
alert("ईमेल मान्य है!"); // या अन्य सफल कार्रवाई करें
}
}
</script>
जावास्क्रिप्ट के कुछ अतिरिक्त महत्वपूर्ण तथ्य
उपरोक्त विषयों के अलावा, जावास्क्रिप्ट में कुछ अन्य अवधारणाएं हैं जो समझने के लिए महत्वपूर्ण हैं:
कंट्रोल फ्लो (Control Flow)
कंट्रोल फ्लो आपके कोड के निष्पादन के क्रम को नियंत्रित करता है। सामान्य कंट्रोल फ्लो स्टेटमेंट्स में शामिल हैं:
- सशर्त स्टेटमेंट्स (Conditional Statements):
if,else if,elseका उपयोग करके शर्तों के आधार पर कोड के ब्लॉक को निष्पादित करना। - स्विच स्टेटमेंट (Switch Statement): एक वेरिएबल के कई संभावित मानों में से किसी एक के आधार पर कोड ब्लॉक का चयन करना।
- लूप्स (Loops): कोड के ब्लॉक को बार-बार निष्पादित करना। सामान्य लूप्स हैं:
for,while,do...while,for...in(ऑब्जेक्ट प्रॉपर्टीज के लिए),for...of(इटरेशन योग्य ऑब्जेक्ट्स जैसे एरे के लिए)। एरे मेथड्स जैसेforEach,map,filterभी लूपिंग के आधुनिक तरीके हैं।
let संख्या = 10;
if (संख्या > 0) {
console.log("संख्या धनात्मक है।");
} else {
console.log("संख्या शून्य या ऋणात्मक है।");
}
const आइटम = ["A", "B", "C"];
for (let i = 0; i < आइटम.length; i++) {
console.log("आइटम:", आइटम[i]);
}
let काउंटर = 0;
while (काउंटर < 3) {
console.log("काउंटर:", काउंटर);
काउंटर++;
}
त्रुटि हैंडलिंग (Error Handling)
आपके कोड में अप्रत्याशित समस्याओं या त्रुटियों को शालीनता से संभालने के लिए त्रुटि हैंडलिंग महत्वपूर्ण है। जावास्क्रिप्ट try...catch...finally ब्लॉक प्रदान करता है।
try: कोड का वह ब्लॉक जिसे आप संभावित त्रुटियों के लिए परीक्षण करना चाहते हैं।catch: यदिtryब्लॉक में कोई त्रुटि होती है, तो यह ब्लॉक निष्पादित होता है। यह त्रुटि ऑब्जेक्ट प्राप्त करता है।finally: यह ब्लॉक हमेशा निष्पादित होता है, चाहेtryब्लॉक में त्रुटि हुई हो या नहीं।
try {
// मान लीजिए यह कोड त्रुटि पैदा कर सकता है
let result = undefinedVariable * 10;
console.log(result); // यह लाइन कभी नहीं पहुंचेगी
} catch (त्रुटि) {
console.error("एक त्रुटि हुई:", त्रुटि.message); // त्रुटि संदेश आउटपुट करें
} finally {
console.log("त्रुटि हैंडलिंग समाप्त।"); // यह हमेशा चलेगा
}
असिंक्रोनस जावास्क्रिप्ट (Asynchronous JavaScript)
जावास्क्रिप्ट मूल रूप से सिंगल-थ्रेडेड है, जिसका अर्थ है कि यह एक समय में एक ही काम कर सकता है। हालांकि, डेटा लाने (जैसे API कॉल) या टाइमर जैसे ऑपरेशन में समय लगता है। असिंक्रोनस प्रोग्रामिंग जावास्क्रिप्ट को इन ऑपरेशनों को पृष्ठभूमि में चलाने और उन्हें पूरा होने पर प्रतिक्रिया करने की अनुमति देती है, ताकि मुख्य थ्रेड ब्लॉक न हो और उपयोगकर्ता इंटरफ़ेस प्रतिक्रियाशील रहे।
मुख्य अवधारणाएं:
- कॉलबैक (Callbacks): फंक्शन जो किसी असिंक्रोनस ऑपरेशन के पूरा होने पर निष्पादित होते हैं (कभी-कभी "कॉलबैक हेल" का कारण बन सकते हैं)।
- प्रॉमिस (Promises): असिंक्रोनस ऑपरेशनों को संभालने का एक आधुनिक तरीका। एक प्रॉमिस या तो 'सफल' (resolved) होता है या 'अ असफल' (rejected)। यह
.then()और.catch()मेथड प्रदान करता है। - Async/Await (ES8): प्रॉमिस के ऊपर बना सिंटैक्टिकली शुगर जो असिंक्रोनस कोड को सिंक्रोनस कोड जैसा लिखने की अनुमति देता है, जिससे यह अधिक पठनीय हो जाता है।
function डेटालानेकाप्रॉमिस() {
return new Promise((resolve, reject) => {
setTimeout(() => {
const सफल = true; // मान लीजिए ऑपरेशन सफल रहा
if (सफल) {
resolve("प्रॉमिस से डेटा");
} else {
reject("डेटा लाने में त्रुटि");
}
}, 2000);
});
}
डेटालानेकाप्रॉमिस()
.then(data => {
console.log("प्रॉमिस सफल:", data);
})
.catch(error => {
console.error("प्रॉमिस असफल:", error);
});
// Async/Await उदाहरण ऊपर API कॉल सेक्शन में दिया गया है
मॉड्यूल (Modules - ES Modules)
मॉड्यूल आपको अपने जावास्क्रिप्ट कोड को अलग-अलग फाइलों में विभाजित करने की अनुमति देते हैं, जिससे कोड अधिक व्यवस्थित, बनाए रखने योग्य और पुनः प्रयोज्य बनता है। आप export का उपयोग करके फंक्शन्स, वेरिएबल या क्लासेस को एक मॉड्यूल से बाहर भेज सकते हैं और import का उपयोग करके उन्हें दूसरे मॉड्यूल में उपयोग कर सकते हैं।
// myModule.js फाइल में
export const PI = 3.14;
export function वर्गक्षेत्रफल(भुजा) {
return भुजा * भुजा;
}
// main.js फाइल में
import { PI, वर्गक्षेत्रफल } from './myModule.js'; // './' वर्तमान डायरेक्टरी को इंगित करता है
console.log(PI);
console.log(वर्गक्षेत्रफल(5));
मॉड्यूल का उपयोग करने के लिए आपको आमतौर पर स्क्रिप्ट टैग में type="module" एट्रीब्यूट का उपयोग करना होता है या बंडलर (जैसे Webpack, Parcel) का उपयोग करना होता है।
निष्कर्ष
जावास्क्रिप्ट एक विशाल और लगातार विकसित होने वाली भाषा है। इस पोस्ट में हमने इसके कई महत्वपूर्ण पहलुओं को कवर किया है, बुनियादी बातों से लेकर अधिक उन्नत अवधारणाओं और वेब डेवलपमेंट में इसके उपयोग तक। DOM मैनिपुलेशन और इवेंट्स, ऑब्जेक्ट्स, एरेज़, फंक्शन्स, स्कोप, क्लोजर्स और असिंक्रोनस प्रोग्रामिंग जैसी अवधारणाओं को समझना आधुनिक वेब डेवलपमेंट के लिए मौलिक है।
सुरक्षा पर भी विचार करना महत्वपूर्ण है, खासकर जब उपयोगकर्ता इनपुट को संभालते हैं। XSS और CSRF जैसे आम हमलों से बचने के लिए सैनिटाइजेशन, एस्केपिंग, CSRF टोकन और CSP जैसे उपाय आवश्यक हैं।
यह मार्गदर्शिका एक प्रारंभिक बिंदु है। जावास्क्रिप्ट और वेब डेवलपमेंट की दुनिया में महारत हासिल करने के लिए निरंतर अभ्यास और नए फ्रेमवर्क और टूल सीखने की आवश्यकता होगी। कोडिंग करते रहें और प्रयोग करते रहें!
टिप्पणियाँ
एक टिप्पणी भेजें