जावास्क्रिप्ट (JavaScript) - मूल अवधारणाएँ — Study Notes

1. परिचय

जावास्क्रिप्ट (JavaScript) एक स्क्रिप्टिंग भाषा है जो वेब पेजों को इंटरैक्टिव और गतिशील बनाती है। जबकि एचटीएमएल वेब पेज की संरचना और सीएसएस उसकी सुंदरता निर्धारित करते हैं, जावास्क्रिप्ट वेब पेज में जान डालता है। इसका उपयोग वेब पेज पर घटनाओं (Events) को नियंत्रित करने, गणनाएँ करने, डेटा सत्यापित करने और गतिशील सामग्री प्रदर्शित करने के लिए किया जाता है। जावास्क्रिप्ट क्लाइंट-साइड स्क्रिप्टिंग भाषा है, अर्थात यह उपयोगकर्ता के ब्राउज़र पर चलती है, न कि सर्वर पर। इसका प्रयोग करना अत्यंत सरल है और यह सभी आधुनिक ब्राउज़रों द्वारा समर्थित है। जावास्क्रिप्ट को केवल वेब पेजों तक ही सीमित नहीं माना जाता; आज इसका उपयोग मोबाइल एप्लिकेशन, गेम्स और सर्वर-साइड प्रोग्रामिंग (जैसे Node.js) में भी होता है।

2. जावास्क्रिप्ट की विशेषताएँ (Features of JavaScript)

• क्लाइंट-साइड स्क्रिप्टिंग: यह ब्राउज़र पर चलती है, जिससे सर्वर की लोड कम होती है।
• इंटरप्रिटेड भाषा: इसे संकलित (Compile) करने की आवश्यकता नहीं होती; ब्राउज़र सीधे निष्पादित करता है।
• गतिशील टाइपिंग (Dynamic Typing): चर (Variable) में किसी भी प्रकार का मान रखा जा सकता है।
• ऑब्जेक्ट-आधारित: इसमें ऑब्जेक्ट और फंक्शन प्रमुख भूमिका निभाते हैं।
• घटना-संचालित (Event-Driven): माउस क्लिक, कीबोर्ड जैसी घटनाओं पर प्रतिक्रिया दे सकती है।
• हल्की भाषा: कोड छोटा और सरल होता है।
• प्लेटफ़ॉर्म स्वतंत्र: किसी भी ब्राउज़र और ऑपरेटिंग सिस्टम पर चलती है।

3. जावास्क्रिप्ट को एचटीएमएल में कैसे जोड़ें (Adding JavaScript to HTML)

जावास्क्रिप्ट को एचटीएमएल पेज में तीन तरीकों से जोड़ा जा सकता है:

3.1 आंतरिक जावास्क्रिप्ट (Internal JavaScript)

कोड को <script> टैग के अंदर लिखा जाता है। इसे <head> या <body> में रखा जा सकता है।

<script>
    document.write("नमस्कार!");
</script>

3.2 बाहरी जावास्क्रिप्ट (External JavaScript)

कोड को अलग .js फाइल में लिखा जाता है और src विशेषता से जोड़ा जाता है।

<script src="script.js"></script>

3.3 इनलाइन जावास्क्रिप्ट (Inline JavaScript)

कोड सीधे किसी घटना विशेषता (जैसे onclick) में लिखा जाता है।

<button onclick="alert('स्वागत है!')">क्लिक करें</button>

4. जावास्क्रिप्ट के मूल तत्व (Basic Elements)

4.1 टिप्पणी (Comments)

• एक-पंक्ति टिप्पणी: // यह एक टिप्पणी है
• बहु-पंक्ति टिप्पणी: /* यह बहु-पंक्ति टिप्पणी है */

4.2 चर (Variables)

डेटा को संग्रहीत करने के लिए चर का उपयोग होता है। चर घोषित करने के तीन तरीके: - var: पुराना तरीका, फंक्शन-स्कोप्ड। - let: नया तरीका, ब्लॉक-स्कोप्ड। - const: स्थिर मान, जिसे बदला नहीं जा सकता।

उदाहरण:

var नाम = "राहुल";
let आयु = 15;
const विद्यालय = "केंद्रीय विद्यालय";

4.3 डेटा प्रकार (Data Types)

• संख्या (Number): 15, 3.14
• स्ट्रिंग (String): "नमस्ते"
• बूलियन (Boolean): true, false
• अनिर्धारित (Undefined): जिस चर का कोई मान नहीं
• शून्य (Null): जानबूझकर खाली मान
• ऑब्जेक्ट (Object): कुंजी-मान जोड़े

4.4 ऑपरेटर (Operators)

• अंकगणितीय: + (जोड़), - (घटाव), * (गुणा), / (भाग), % (शेष)
• असाइनमेंट: =, +=, -=, *=
• तुलना: ==, ===, !=, <, >, <=, >=
• लॉजिकल: && (और), || (या), ! (नहीं)
• वृद्धि/ह्रास: ++, --

5. फंक्शन (Functions)

फंक्शन कोड का एक पुनः उपयोग योग्य खंड है जो एक विशिष्ट कार्य करता है। फंक्शन को एक बार परिभाषित करके कई बार कॉल किया जा सकता है।

5.1 फंक्शन की घोषणा

function गुणनफल(a, b) {
    return a * b;
}

5.2 फंक्शन का आह्वान (Calling)

let परिणाम = गुणनफल(5, 6);

• function कीवर्ड से फंक्शन घोषित किया जाता है।
• कोष्ठक के अंदर पैरामीटर (Parameter) होते हैं।
• return स्टेटमेंट फंक्शन का परिणाम लौटाता है।
• फंक्शन के बिना पैरामीटर भी हो सकते हैं।

6. सशर्त कथन (Conditional Statements)

प्रोग्राम में निर्णय लेने के लिए सशर्त कथन उपयोग होते हैं:

6.1 if-else कथन

if (आयु >= 18) {
    alert("आप वयस्क हैं");
} else {
    alert("आप नाबालिग हैं");
}

6.2 else-if कथन

कई स्थितियों की जाँच के लिए:

if (अंक >= 90) {
    ग्रेड = "A";
} else if (अंक >= 75) {
    ग्रेड = "B";
} else {
    ग्रेड = "C";
}

6.3 स्विच कथन (Switch Statement)

कई मानों की तुलना के लिए:

switch (दिन) {
    case 1:
        alert("सोमवार");
        break;
    case 2:
        alert("मंगलवार");
        break;
    default:
        alert("अमान्य दिन");
}

7. लूप्स (Loops)

बार-बार कार्य करने के लिए लूप्स का उपयोग होता है:

7.1 for लूप

for (let i = 1; i <= 5; i++) {
    document.write(i + " ");
}

इसमें आरंभ, शर्त और वृद्धि तीनों एक ही पंक्ति में होते हैं।

7.2 while लूप

let i = 1;
while (i <= 5) {
    document.write(i + " ");
    i++;
}

यह तब तक चलता है जब तक शर्त सत्य होती है।

7.3 do-while लूप

let i = 1;
do {
    document.write(i + " ");
    i++;
} while (i <= 5);

यह कम से कम एक बार अवश्य चलता है।

8. एर्रे और ऑब्जेक्ट (Arrays and Objects)

8.1 एर्रे (Array)

एक ही चर में अनेक मान संग्रहीत करने के लिए एर्रे का उपयोग होता है:

let विषय = ["गणित", "विज्ञान", "अंग्रेजी"];
alert(विषय[0]);  // गणित

• एर्रे की इंडेक्सिंग 0 से शुरू होती है।
• विषय.length से एर्रे का आकार मिलता है।
• विषय.push("हिंदी") से अंत में नया मान जुड़ता है।

8.2 ऑब्जेक्ट (Object)

कुंजी-मान जोड़े में डेटा संग्रहीत करने के लिए:

let छात्र = { नाम: "राहुल", कक्षा: 10, अंक: 85 };
alert(छात्र.नाम);  // राहुल

9. घटनाएँ (Events)

जावास्क्रिप्ट में घटनाएँ वे क्रियाएँ हैं जो उपयोगकर्ता या ब्राउज़र करते हैं। प्रमुख घटनाएँ:

• onclick: तत्व पर क्लिक करने पर।
• onmouseover: माउस को तत्व पर ले जाने पर।
• onmouseout: माउस को तत्व से हटाने पर।
• onkeydown: कीबोर्ड की कुंजी दबाने पर।
• onload: वेब पेज लोड होने पर।
• onchange: फॉर्म तत्व में बदलाव होने पर।
• onfocus: किसी तत्व को फोकस करने पर।
• onsubmit: फॉर्म जमा करने पर।

10. महत्वपूर्ण फंक्शन (Important Built-in Functions)

• alert(): स्क्रीन पर चेतावनी संदेश दिखाता है।
• prompt(): उपयोगकर्ता से इनपुट लेता है।
• confirm(): हाँ/नहीं का विकल्प दिखाता है।
• document.write(): पेज पर टेक्स्ट लिखता है।
• console.log(): ब्राउज़र कंसोल में संदेश दिखाता है।
• parseInt(): स्ट्रिंग को पूर्णांक में बदलता है।
• parseFloat(): स्ट्रिंग को दशमलव संख्या में बदलता है।

त्वरित पुनरावृत्ति तालिकाएँ

तालिका 1: डेटा प्रकार

डेटा प्रकार	उदाहरण	विवरण
Number	25, 3.14	संख्यात्मक मान
String	"नमस्ते"	टेक्स्ट मान
Boolean	true, false	सत्य/असत्य
Undefined	-	मान निर्धारित नहीं
Null	null	जानबूझकर खाली
Object	{नाम:"राहुल"}	कुंजी-मान जोड़े

तालिका 2: ऑपरेटर

प्रकार	ऑपरेटर	उदाहरण
अंकगणितीय	+, -, *, /, %	a + b
तुलना	==, ===, !=, >, <	a == b
लॉजिकल	&&, ||, !	a && b
असाइनमेंट	=, +=, -=	a += b
वृद्धि	++, --	i++

तालिका 3: घटनाएँ

घटना	कब होती है
onclick	क्लिक करने पर
onmouseover	माउस ले जाने पर
onmouseout	माउस हटाने पर
onkeydown	कुंजी दबाने पर
onload	पेज लोड होने पर
onsubmit	फॉर्म जमा होने पर

माइंड मैप

graph TD
    A["जावास्क्रिप्ट"] --> B["विशेषताएँ"]
    B --> B1["क्लाइंट-साइड"]
    B --> B2["इंटरप्रिटेड"]
    A --> C["चर"]
    C --> C1["var, let, const"]
    A --> D["डेटा प्रकार"]
    D --> D1["Number, String, Boolean"]
    A --> E["ऑपरेटर"]
    E --> E1["अंकगणितीय, तुलना, लॉजिकल"]
    A --> F["नियंत्रण"]
    F --> F1["if-else, switch"]
    F --> F2["for, while, do-while"]
    A --> G["घटनाएँ"]
    G --> G1["onclick, onmouseover"]
    A --> H["फंक्शन"]
    H --> H1["function, return"]

महत्वपूर्ण आरेख (SVG)

if-else प्रवाह आरेख

for लूप का प्रवाह

सामान्य गलतियाँ

1. == और === में अंतर न समझना; == केवल मान की तुलना करता है जबकि === मान और प्रकार दोनों की तुलना करता है।
2. एर्रे की इंडेक्सिंग 1 से शुरू मान लेना; वास्तव में यह 0 से शुरू होती है।
3. var, let, const के बीच का अंतर न जानना; const का मान बदला नहीं जा सकता।
4. while लूप में वृद्धि (i++) लिखना भूल जाना, जिससे लूप अनंत (Infinite) हो जाता है।
5. document.write() और alert() के उपयोग में भ्रम; document.write पेज पर लिखता है जबकि alert संदेश बॉक्स दिखाता है।
6. switch कथन में break न लगाना, जिससे सभी case चल जाते हैं।
7. स्ट्रिंग और संख्या को जोड़ना, जैसे "5" + 5 का परिणाम 55 (स्ट्रिंग जोड़) होता है, 10 नहीं।
8. फंक्शन का नाम और कॉल में भिन्नता; केस सेंसिटिविटी के कारण त्रुटि होती है।

परीक्षा युक्तियाँ

1. आउटपुट आधारित प्रश्नों (जैसे for लूप का आउटपुट) का अभ्यास करें; ये परीक्षाओं में अत्यंत सामान्य हैं।
2. ऑपरेटरों के प्रकार और उदाहरण याद रखें, विशेषकर % (मॉड्यूलो) का अर्थ।
3. चर घोषणा के तीनों कीवर्ड (var, let, const) के बीच का अंतर समझें।
4. घटनाओं (onclick, onmouseover आदि) की सूची रटें।
5. फंक्शन की घोषणा और आह्वान का छोटा प्रोग्राम लिखने का अभ्यास करें।
6. एर्रे और ऑब्जेक्ट के डेटा एक्सेस करने के तरीके (विषय[0], छात्र.नाम) याद रखें।
7. पिछले वर्षों के प्रश्नपत्रों में कोड से संबंधित प्रश्नों को हल करें।

निष्कर्ष

जावास्क्रिप्ट वेब विकास की सबसे महत्वपूर्ण भाषाओं में से एक है, जो वेब पेजों को स्थिर से गतिशील बनाती है। इस अध्याय में हमने जावास्क्रिप्ट की विशेषताओं, चर, डेटा प्रकार, ऑपरेटर, फंक्शन, सशर्त कथन, लूप्स, एर्रे, ऑब्जेक्ट और घटनाओं का अध्ययन किया। ये सभी अवधारणाएँ किसी भी जावास्क्रिप्ट प्रोग्राम की नींव हैं। इंटरैक्टिव वेब पेज बनाने के लिए एचटीएमएल, सीएसएस और जावास्क्रिप्ट तीनों का सम्मिलित ज्ञान आवश्यक है। जावास्क्रिप्ट का अभ्यास करके हम वेब पेज में फॉर्म सत्यापन, गणना, एनीमेशन और गतिशील सामग्री जोड़ सकते हैं। यह भाषा सीखना आसान है, परंतु इसमें निपुणता के लिए नियमित अभ्यास आवश्यक है।