JavaScript: परिचय, इतिहास, विशेषताएँ और उपयोग
यह क्या है और क्यों?
कल्पना करो कि तुम अपनी खुद की फिल्म के निर्देशक हो, और तुम्हारा कंप्यूटर एक फिल्म स्टूडियो है। HTML पटकथा और सेट (टेक्स्ट, चित्र, बटन, टेबल) की तरह है। CSS कॉस्ट्यूम डिज़ाइनर और लाइटिंग मैन (रंग, फ़ॉन्ट, सुंदर लेआउट) की तरह है। और JavaScript अभिनेता और स्पेशल इफ़ेक्ट है! JS ही चीज़ों को हिलाता है, बटन दबाने पर रिएक्ट करता है, गणना करता है, पॉप-अप दिखाता है, चित्र बदलता है और यहाँ तक कि गेम भी बनाता है।
अगर वेबसाइट एक इंसान होती, तो:
- HTML — कंकाल और त्वचा (संरचना)।
- CSS — कपड़े और मेकअप (दिखावट)।
- JavaScript — दिमाग और मांसपेशियाँ (तर्क और क्रियाएँ)।
JavaScript के बिना, वेबसाइट एक उबाऊ किताब की तरह होगी जिसे केवल पढ़ा जा सकता है, लेकिन पलटा नहीं जा सकता, लिंक पर क्लिक नहीं किया जा सकता, गेम नहीं खेला जा सकता या फ़ॉर्म नहीं भरे जा सकते। JS वेब पेजों को "जीवंत" बनाता है।
JavaScript कहाँ उपयोग होता है?
- इंटरनेट पर हर जगह: VKontakte, YouTube, ब्राउज़र गेम (जैसे Agar.io), ऑनलाइन कैलकुलेटर, मैप्स (Yandex.Maps), कोड एडिटर (जैसे जिसमें तुम यह लेख पढ़ रहे हो)।
- सर्वर पर भी (Node.js की मदद से) — उदाहरण के लिए, चैट में संदेशों को प्रोसेस करना या डेटा स्टोर करना।
- मोबाइल ऐप (React Native) और डेस्कटॉप (Electron — इसी पर Discord और VS Code बने हैं) में।
JavaScript दुनिया की सबसे लोकप्रिय भाषा है! क्यों? क्योंकि यह सीधे ब्राउज़र में बनी होती है। तुम्हें कुछ भी इंस्टॉल करने की ज़रूरत नहीं है (Python के विपरीत, जिसे डाउनलोड करना पड़ता है)। नोटपैड खोलो, कोड लिखो, .html के रूप में सेव करो — और हो गया! डबल-क्लिक करके चला सकते हो।
Python से एक महत्वपूर्ण अंतर: Python में कोड कंसोल में अपने आप चलता है, जबकि JavaScript में यह हमेशा एक वेब पेज से जुड़ा होता है। JS अपने आप ग्राफ़िकल विंडो नहीं बना सकता (जैसे pygame), लेकिन यह स्क्रीन पर पहले से मौजूद चीज़ों — बटन, टेक्स्ट, चित्रों — को नियंत्रित कर सकता है।
उदाहरण सहित कोड की व्याख्या
शुरू करने का सबसे आसान तरीका है सीधे ब्राउज़र में कोड लिखना। F12 दबाओ (या राइट-क्लिक करके "इंस्पेक्ट करें" चुनो) और "Console" टैब पर जाओ। वहाँ कमांड टाइप कर सकते हो। लेकिन हम पूर्ण पेज बनाएँगे।
अपने कंप्यूटर पर test.html फ़ाइल बनाओ, इसे नोटपैड में खोलो और उदाहरणों का कोड डालो। फिर सेव करो और ब्राउज़र में खोलो।
उदाहरण 1: नमस्ते, दुनिया! (सबसे पहला प्रोग्राम)
// यह एक एकल-पंक्ति टिप्पणी है। यह निष्पादित नहीं होती।
/* और यह एक बहु-पंक्ति टिप्पणी है।
इसका उपयोग कोड समझाने के लिए किया जाता है। */
// alert() कमांड एक पॉप-अप संदेश दिखाती है।
alert("Hello, world! JavaScript is working!");
// console.log() कमांड डेवलपर कंसोल में टेक्स्ट आउटपुट करती है।
// परिणाम देखने के लिए, F12 दबाओ और Console टैब खोलो।
console.log("This is a message in the console. Well done!");
// document.write() कमांड सीधे पेज पर टेक्स्ट लिखती है।
document.write("<h1>This is a heading created by JavaScript!</h1>");
क्या होगा?
- पहले टेक्स्ट के साथ एक बॉक्स पॉप अप होगा।
- फिर कंसोल (F12) में दूसरा संदेश दिखाई देगा।
- अंत में पेज पर एक बड़ा शीर्षक दिखाई देगा।
Python में पहला प्रोग्राम सिर्फ print("Hello") होता है। JS में हम alert() या console.log() का उपयोग करते हैं। अंतर यह है कि JS ब्राउज़र में रहता है, इसलिए इसकी विंडो और पेज तक पहुँच होती है।
उदाहरण 2: वेरिएबल — डेटा के लिए बक्से
// वेरिएबल एक लेबल वाले बक्से की तरह है।
// Python में तुम लिखते हो: name = "Vasya"
// JS में हम कीवर्ड let (आधुनिक तरीका) का उपयोग करते हैं।
let name = "Masha"; // स्ट्रिंग (टेक्स्ट)
let age = 12; // संख्या
let lovesPizza = true; // बूलियन मान (हाँ/नहीं)
let emptyBox = null; // खालीपन (कुछ नहीं)
// सब कुछ कंसोल में आउटपुट करते हैं:
console.log("Name:", name);
console.log("Age:", age);
console.log("Loves pizza?", lovesPizza);
// स्ट्रिंग्स को जोड़ा जा सकता है (कॉन्केटनेशन):
let greeting = "Hello, " + name + "! You are " + age + " years old.";
console.log(greeting);
// या टेम्पलेट स्ट्रिंग्स का उपयोग कर सकते हैं (Python में f-strings की तरह, बस ${} के साथ):
let betterGreeting = `Hello, ${name}! You are ${age} years old.`;
console.log(betterGreeting);
// वेरिएबल का मान बदलते हैं:
age = 13; // Masha का जन्मदिन था!
console.log("Now age is:", age);
व्याख्या: वेरिएबल जानकारी स्टोर करने के लिए होते हैं। let Python में var जैसा है, बस JS में let (या कॉन्स्टेंट के लिए const) लिखना ज़रूरी है। प्रत्येक पंक्ति के अंत में सेमीकोलन ; पर ध्यान दो — Python में यह नहीं होता, JS में लगाया जाता है (हालाँकि कभी-कभी बिना भी चलता है, लेकिन हमेशा लगाना बेहतर है)।
टेम्पलेट स्ट्रिंग्स (बैकटिक `` ` `` के साथ) बहुत सुविधाजनक हैं — वेरिएबल को सीधे टेक्स्ट में ${} के माध्यम से डालो।
उदाहरण 3: सशर्त ऑपरेटर if (जीवन की तरह: "अगर... तो...")
let userAge = 15;
// अगर उम्र 18 या उससे अधिक है:
if (userAge >= 18) {
console.log("You are an adult! You can watch horror movies.");
} else if (userAge >= 12) {
console.log("You are a teenager! You can play most games.");
} else {
console.log("You are a child. Better read a book.");
}
// एक और उदाहरण: संख्या सम है या विषम
let number = 7;
if (number % 2 === 0) { // % भाग का शेषफल है
console.log("The number is even.");
} else {
console.log("The number is odd.");
}
// ध्यान दो: JS में तुलना के लिए === (तीन बराबर) का उपयोग होता है,
// न कि == (दो बराबर) का। दो बराबर "असख्त" तुलना है, यह अजीब परिणाम दे सकता है
// (जैसे, 5 == "5" सत्य है, हालाँकि संख्या और स्ट्रिंग अलग प्रकार हैं)। हमेशा === का उपयोग करो।
व्याख्या: if स्टेटमेंट कोड के ब्लॉक को केवल तभी निष्पादित करने देता है जब कोई शर्त सत्य हो। else if अतिरिक्त शर्तों की जाँच करता है, और else वह सब कुछ पकड़ लेता है जो पिछली शर्तों से मेल नहीं खाता। === (सख्त समानता) का मतलब है कि मान और प्रकार दोनों समान होने चाहिए। % (मॉड्यूलो) भाग का शेषफल देता है — यदि शेषफल 0 है, तो संख्या सम है।
उदाहरण 4: लूप्स (दोहराव) — for और while
// for लूप: "जब तक i 5 से कम है, i को 1 बढ़ाओ और कोड निष्पादित करो"
console.log("Counting from 0 to 4:");
for (let i = 0; i < 5; i++) {
console.log("Number:", i);
}
// while लूप: "जब तक शर्त सत्य है, दोहराओ"
console.log("While loop: counting down from 5 to 1");
let countdown = 5;
while (countdown > 0) {
console.log("Countdown:", countdown);
countdown--; // countdown = countdown - 1 के समान
}
// एक सरणी (ऐरे) पर लूप — यह Python की सूची की तरह है
let fruits = ["apple", "banana", "cherry"];
console.log("List of fruits:");
for (let i = 0; i < fruits.length; i++) {
console.log("Fruit:", fruits[i]);
}
// आधुनिक तरीका: for...of (Python में for x in list: के समान)
console.log("Using for...of:");
for (let fruit of fruits) {
console.log("Fruit:", fruit);
}
व्याख्या: लूप कोड को कई बार दोहराने देते हैं। for लूप में तीन भाग होते हैं: प्रारंभिकीकरण (let i = 0), शर्त (i < 5), और वृद्धि (i++ जो i = i + 1 के समान है)। while लूप तब तक चलता है जब तक शर्त सत्य है। fruits.length सरणी में तत्वों की संख्या देता है। for...of सरणी के तत्वों पर सीधे लूप करने का एक साफ तरीका है।
उदाहरण 5: फंक्शन — कोड के ब्लॉक जिन्हें दोबारा इस्तेमाल किया जा सकता है
// फंक्शन घोषित करना (Python में def की तरह)
function greet(name) {
console.log("Hello, " + name + "!");
}
// फंक्शन को कॉल करना
greet("Alice");
greet("Bob");
// रिटर्न वैल्यू वाला फंक्शन
function add(a, b) {
return a + b;
}
let sum = add(5, 3);
console.log("Sum:", sum); // 8 आउटपुट करेगा
// एरो फंक्शन (आधुनिक तरीका, Python में लैम्ब्डा की तरह)
const multiply = (x, y) => {
return x * y;
};
console.log("Product:", multiply(4, 5)); // 20 आउटपुट करेगा
// यदि फंक्शन में केवल एक स्टेटमेंट है, तो आप { } और return को छोड़ सकते हैं:
const square = n => n * n;
console.log("Square of 6:", square(6)); // 36 आउटपुट करेगा
व्याख्या: फंक्शन कोड को व्यवस्थित करने और दोहराने में मदद करते हैं। function कीवर्ड एक फंक्शन बन