जावास्क्रिप्ट की मूल बातें: वेब पेज को सोचना और जवाब देना सिखाइए

जावास्क्रिप्ट क्या है और इसे पेज में कैसे जोड़ें

जावास्क्रिप्ट (JS) एक प्रोग्रामिंग भाषा है जो वेब ब्राउज़र के अंदर चलती है (और Node.js से सर्वर पर भी)। यह पेज को इंटरैक्टिव बनाती है: फ़ॉर्म जाँचना, टेक्स्ट बदलना, पॉप-अप दिखाना, गेम चलाना।

इसे <script> टैग से जोड़ते हैं, पेज के अंदर या अलग फ़ाइल के रूप में:

<script>
  console.log("Hello");
</script>
<script src="app.js"></script>

आउटपुट: console.log() (डेवलपर कंसोल), alert() (पॉप-अप), document.write() (पुराना तरीका) या document.getElementById("id").textContent = … से किसी एलिमेंट का टेक्स्ट बदलना। इनपुट: prompt() या फ़ॉर्म फ़ील्ड का .value। टिप्पणी: // एक पंक्ति या /* कई पंक्तियाँ */। जावास्क्रिप्ट केस-सेंसिटिव है: Score और score अलग हैं।

वेरिएबल और डेटा टाइप

वेरिएबल किसी मान के लिए नाम वाला डिब्बा है।

let score = 5;        // बाद में बदल सकता है
const PI = 3.14;      // दोबारा नहीं बदला जा सकता
var old = 1;          // पुराना तरीका, न अपनाएँ

नाम में अक्षर, अंक, _ और $ हो सकते हैं, पर नाम अंक से शुरू नहीं हो सकता और कोई कीवर्ड (जैसे if) नहीं हो सकता। मुख्य डेटा टाइप:

• Number: 5, 3.14 (पूर्ण और दशमलव दोनों के लिए एक ही टाइप)
• String: उद्धरण चिह्नों में टेक्स्ट, "Asha" या 'Hi'
• Boolean: true या false
• undefined (अभी कोई मान नहीं) और null (जानबूझकर ख़ाली)
• Array: सूची, [4, 1, 3]; Object: {name: "Asha", age: 15}

typeof x टाइप बताता है। जावास्क्रिप्ट डायनामिक टाइप वाली है: एक वेरिएबल अलग-अलग समय पर अलग टाइप रख सकता है।

ऑपरेटर

• अंकगणितीय: + − * / % (शेषफल) ** (घात), ++ और −−। उदाहरण: 7 % 3 = 1।
• असाइनमेंट: = += −= *= /=। उदाहरण: x += 2 यानी x = x + 2।
• तुलना: > < >= <= == != === !==। === इस्तेमाल करें (मान और टाइप दोनों बराबर): 5 == "5" true है, पर 5 === "5" false है।
• तार्किक: && (AND, और), || (OR, या), ! (NOT, नहीं)।
• स्ट्रिंग जोड़ना: "Hi " + "Asha" = "Hi Asha"। ध्यान दें: "5" + 2 = "52" (टेक्स्ट), पर "5" * 2 = 10।
• टर्नरी: शर्त ? a : b।

शर्तें: if, else if, else और switch

let marks = 72;
if (marks >= 90) {
  grade = "A";
} else if (marks >= 33) {
  grade = "Pass";
} else {
  grade = "Try again";
}

पहली सही (true) शर्त वाला भाग चलता है, बाकी छूट जाते हैं। switch एक मान की कई case से तुलना करता है:

switch (day) {
  case 0: name = "Sunday"; break;
  case 6: name = "Saturday"; break;
  default: name = "Weekday";
}

break भूल जाने पर कोड अगले case में भी चला जाता है।

लूप और सरल प्रोग्राम

// for: जब पता हो कितनी बार
let sum = 0;
for (let i = 1; i <= 5; i++) { sum += i; }   // sum = 15

// while: जब तक शर्त सही है, दोहराओ
let n = 1;
while (n < 100) { n = n * 2; }               // n = 128

// do…while कम से कम एक बार चलता है
do { x--; } while (x > 0);

break लूप से बाहर निकालता है; continue अगले चक्कर पर कूद जाता है। अभ्यास के सरल प्रोग्राम: 1 से n तक योग, पहाड़ा, सम या विषम (n % 2 === 0), तीन संख्याओं में सबसे बड़ी, फ़ैक्टोरियल, संख्या उलटना, शब्द में स्वर गिनना।

फ़ंक्शन

फ़ंक्शन कोड का नाम वाला हिस्सा है। एक बार बनाइए, कई बार बुलाइए।

function area(l, b) {      // l, b पैरामीटर हैं
  return l * b;           // मान वापस भेजो
}
let a = area(4, 3);        // 4, 3 आर्ग्युमेंट हैं → a = 12

const square = x => x * x; // ऐरो फ़ंक्शन
const greet = function(n) { return "Hi " + n; }; // फ़ंक्शन एक्सप्रेशन

फ़ंक्शन के अंदर let/const से बने वेरिएबल लोकल होते हैं (सिर्फ़ अंदर दिखते हैं); बाहर वाले ग्लोबल। बिना return वाला फ़ंक्शन undefined देता है। डिफ़ॉल्ट पैरामीटर: function hi(n = "friend")।

स्ट्रिंग, ऐरे और Math मेथड

स्ट्रिंग

इंडेक्स 0 से शुरू होता है। "hello".length → 5; toUpperCase(), toLowerCase(); charAt(1) → "e"; indexOf("l") → 2; slice(1, 4) / substring(1, 4) → "ell"; replace("h", "j"); trim(); split(","); includes("ell") → true।

ऐरे

let a = [4, 1, 3]; a[0] → 4; a.length → 3; push(x) अंत में जोड़ता है, pop() आख़िरी हटाता है, unshift/shift शुरू में काम करते हैं; indexOf, includes, join("-"), reverse(), slice, splice, concat। sort() टेक्स्ट की तरह क्रम लगाता है, इसलिए संख्याओं के लिए sort((x, y) => x - y) लिखें। लूप सहायक: forEach, map, filter।

Math

Math.round(4.5) → 5, Math.floor(4.9) → 4, Math.ceil(4.1) → 5, Math.max(2, 8) → 8, Math.min, Math.sqrt(16) → 4, Math.pow(2, 3) → 8, Math.abs(-3) → 3, Math.PI। 1–6 के बीच यादृच्छिक पूर्ण संख्या: Math.floor(Math.random() * 6) + 1।

इवेंट हैंडलिंग

इवेंट पेज पर होने वाली घटना है: क्लिक, कुंजी दबाना, बॉक्स में लिखना, पेज लोड होना, माउस का किसी एलिमेंट पर जाना। इवेंट हैंडलर वह फ़ंक्शन है जो घटना होने पर चलता है।

<button id="btn">Click me</button>
<p id="out"></p>
<script>
  let count = 0;
  function clicked() {
    count++;
    document.getElementById("out").textContent = "Clicked " + count;
  }
  document.getElementById("btn").addEventListener("click", clicked);
</script>

मुख्य इवेंट: click, dblclick, mouseover, mouseout, keydown, input, change, submit, load, focus, blur। पुराना इनलाइन तरीका: <button onclick="clicked()">। फ़ॉर्म में event.preventDefault() पेज को दोबारा लोड होने से रोकता है ताकि जावास्क्रिप्ट पहले इनपुट जाँच सके।

मुख्य सूत्र और परिभाषाएँ

• let x = 5; (बदल सकता है) · const y = 10; (स्थिर)
• टाइप: number, string, boolean, undefined, null, array, object
• === मान और टाइप दोनों जाँचता है; == पहले टाइप बदलता है
• if (शर्त) { … } else if (शर्त2) { … } else { … }
• for (let i = शुरू; i <= अंत; i++) { … } · while (शर्त) { … }
• function नाम(p1, p2) { return …; } · const f = x => x * 2;
• इंडेक्स 0 से: आख़िरी इंडेक्स = length − 1
• 1 से n तक यादृच्छिक: Math.floor(Math.random() * n) + 1
• el.addEventListener("click", handler)

हल किए गए उदाहरण

आम गलतियाँ

• if के अंदर === (तुलना) की जगह = (असाइन) लिखना। if (x = 5) हमेशा चलता है क्योंकि वह x में 5 रख देता है।
• भूल जाना कि "5" + 2 = "52"। इनपुट टेक्स्ट को पहले Number() या parseInt() से संख्या बनाएँ।
• पहला इंडेक्स 1 मानना। ऐरे और स्ट्रिंग इंडेक्स 0 से शुरू होते हैं, आख़िरी length − 1 है।
• addEventListener("click", clicked()) में कोष्ठक लगाना। इससे फ़ंक्शन तुरंत चल जाता है; clicked बिना () के दें।