JavaScript

JavaScript वेब पेजों को इंटरैक्टिव बनाने में इस्तेमाल होती है, जैसे खुलने वाले मेनू, इनपुट जाँचने वाले फ़ॉर्म और बिना पेज रीलोड किए अपडेट होने वाला कंटेंट। JavaScript, Node.js के ज़रिए सर्वर पर भी चलती है और कई मोबाइल और डेस्कटॉप ऐप चलाती है। हर आधुनिक ब्राउज़र JavaScript को सीधे चलाता है।

JavaScript और Java दो अलग प्रोग्रामिंग भाषाएँ हैं जिनका सिर्फ़ नाम का एक हिस्सा मिलता है। JavaScript मुख्य रूप से ब्राउज़र में चलती है और डायनामिकली टाइप्ड है, जबकि Java स्टैटिकली टाइप्ड है और Java Virtual Machine के लिए बाइटकोड में कंपाइल होती है। मिलता-जुलता नाम 1990 के दशक के एक मार्केटिंग फ़ैसले से आया।

DOM, यानी Document Object Model, ऑब्जेक्ट का वह ट्री है जो ब्राउज़र HTML पेज से बनाता है ताकि JavaScript पेज को पढ़ और बदल सके। DOM के ज़रिए JavaScript एलिमेंट ढूँढ सकती है, टेक्स्ट बदल सकती है, क्लास जोड़ सकती है और नए एलिमेंट बना सकती है। स्क्रिप्ट पेज में जो भी दिखने वाला बदलाव करती है, वह DOM से होकर जाता है।

HTML पेज में JavaScript एक script टैग से जोड़ें, जिसमें या तो सीधे कोड हो या src एट्रिब्यूट से अलग JavaScript फ़ाइल की ओर इशारा हो। script टैग को body के आख़िर में रखने या defer एट्रिब्यूट जोड़ने से HTML पहले लोड होता है। अलग JavaScript फ़ाइलें कैश और मेंटेन करने में आसान होती हैं।

JavaScript में let और const ब्लॉक स्कोप वाले हैं, जबकि var फ़ंक्शन स्कोप वाला है और दोबारा घोषित किया जा सकता है। const वेरिएबल को दोबारा असाइन नहीं किया जा सकता, हालाँकि const में रखा ऑब्जेक्ट अंदर से बदल सकता है। आधुनिक JavaScript डिफ़ॉल्ट रूप से const, वैल्यू बदलनी हो तो let इस्तेमाल करती है और var से बचती है।

JavaScript में इवेंट वे संकेत हैं जो ब्राउज़र कुछ होने पर भेजता है, जैसे क्लिक, की प्रेस, फ़ॉर्म सबमिट या पेज का लोड पूरा होना। स्क्रिप्ट addEventListener से एक लिसनर फ़ंक्शन जोड़कर इवेंट पर प्रतिक्रिया देती है। इवेंट लिसनर से ही JavaScript पेज को यूज़र पर प्रतिक्रिया देना सिखाती है।

JavaScript में इवेंट डेलिगेशन का मतलब है हर चाइल्ड एलिमेंट पर अलग लिसनर की बजाय पैरेंट एलिमेंट पर एक इवेंट लिसनर लगाना। लिसनर इवेंट टारगेट देखकर पता करता है कि किस चाइल्ड पर क्लिक हुआ। इवेंट डेलिगेशन कम मेमोरी लेता है और बाद में पेज पर जोड़े गए एलिमेंट के लिए भी काम करता है।

JavaScript में API से डेटा माँगने के लिए fetch फ़ंक्शन इस्तेमाल करें, फिर रिस्पॉन्स के json मेथड से बॉडी पढ़ें। fetch फ़ंक्शन एक promise लौटाता है, इसलिए कोड आमतौर पर async और await से नतीजे का इंतज़ार करता है। रिस्पॉन्स स्टेटस जाँचना और एरर पकड़ना नेटवर्क फ़ेल होने पर भी पेज को चालू रखता है।

JavaScript में promise एक ऑब्जेक्ट है जो ऐसी वैल्यू को दर्शाता है जो बाद में तैयार होगी, जैसे नेटवर्क रिक्वेस्ट का नतीजा। promise या तो pending, fulfilled या rejected होता है। कोड नतीजे पर then और catch से, या async और await से प्रतिक्रिया देता है।

async और await से JavaScript कोड किसी promise का इंतज़ार ऐसे तरीके से करता है जो सामान्य कदम दर कदम कोड जैसा पढ़ा जाता है। async वाला फ़ंक्शन हमेशा promise लौटाता है, और await उस फ़ंक्शन को promise पूरा होने तक रोक देता है। async फ़ंक्शन के अंदर की एरर सामान्य try और catch ब्लॉक से संभाली जाती हैं।

ES6, जिसे ECMAScript 2015 भी कहते हैं, JavaScript भाषा स्टैंडर्ड का 2015 का बड़ा अपडेट है। ES6 ने let और const, arrow फ़ंक्शन, क्लास, टेम्पलेट लिटरल, डीस्ट्रक्चरिंग, मॉड्यूल और promise जोड़े। हर आधुनिक ब्राउज़र ES6 सपोर्ट करता है, और तब से हर साल JavaScript में नए फ़ीचर जुड़ते रहे हैं।

JavaScript में arrow फ़ंक्शन => सिंटैक्स से फ़ंक्शन लिखने का छोटा तरीका हैं। arrow फ़ंक्शन का अपना this नहीं होता, इसलिए this आसपास के कोड की वैल्यू रखता है। arrow फ़ंक्शन छोटे callback के लिए आम हैं, जैसे map और filter को दिए जाने वाले।

JSON, यानी JavaScript Object Notation, की और वैल्यू के रूप में डेटा रखने और भेजने का एक टेक्स्ट फ़ॉर्मैट है। JavaScript, JSON.stringify से ऑब्जेक्ट को JSON टेक्स्ट में और JSON.parse से JSON टेक्स्ट को वापस ऑब्जेक्ट में बदलती है। ज़्यादातर वेब API, JSON के रूप में डेटा भेजते और लेते हैं।

JavaScript शुरू करना आसान है, क्योंकि शुरुआती को सिर्फ़ एक ब्राउज़र और एक टेक्स्ट एडिटर चाहिए। मुश्किल हिस्से बाद में आते हैं, जैसे असिंक्रोनस कोड, स्कोप और भाषा के आसपास के कई टूल। ज़्यादातर सीखने वाले कुछ हफ़्तों के नियमित अभ्यास में काम के इंटरैक्टिव पेज बना लेते हैं।

हाँ, React या Vue से पहले सादी JavaScript सीखने से दोनों में से कोई भी फ़्रेमवर्क समझना बहुत आसान हो जाता है। दोनों फ़्रेमवर्क फ़ंक्शन, ऐरे, ऑब्जेक्ट, मॉड्यूल और promise जैसे मूल JavaScript फ़ीचर पर बने हैं। बुनियादी बातें जानने वाले डेवलपर अंदाज़ा लगाने की बजाय फ़्रेमवर्क कोड डिबग भी कर पाते हैं।

TypeScript स्टैटिक टाइप जोड़ी गई JavaScript है, जिसे Microsoft ने बनाया और जो सादी JavaScript में कंपाइल होती है। टाइप की मदद से कोड एडिटर कोड चलने से पहले ही कई गलतियाँ पकड़ लेता है। TypeScript बड़े प्रोजेक्ट में लोकप्रिय है जहाँ कई डेवलपर एक ही कोड पर काम करते हैं।

JavaScript वाले पेज तेज़ लोड करने के लिए कम JavaScript भेजें, स्क्रिप्ट defer या async से लोड करें और बड़े बंडल बाँटें ताकि हर पेज सिर्फ़ अपनी ज़रूरत का कोड लोड करे। फ़ाइलों को मिनिफ़ाई और कंप्रेस करने से डाउनलोड साइज़ घटता है। भारी काम को मेन थ्रेड से दूर रखने से पेज क्लिक और टाइपिंग पर तुरंत प्रतिक्रिया देता है।

JavaScript में === वैल्यू और टाइप दोनों की तुलना करता है, जबकि == तुलना से पहले टाइप बदल देता है। उदाहरण के लिए, 0 == "0" सच है, लेकिन 0 === "0" झूठ है। === इस्तेमाल करने से चौंकाने वाले नतीजों से बचा जाता है और आधुनिक JavaScript कोड में यही आम नियम है।

JavaScript मॉड्यूल अलग फ़ाइलें हैं जो फ़ंक्शन या वैल्यू export करती हैं और दूसरी फ़ाइलों से अपनी ज़रूरत की चीज़ें import करती हैं। मॉड्यूल कोड को व्यवस्थित रखते हैं, ग्लोबल वेरिएबल से बचाते हैं और बड़े प्रोजेक्ट को मेंटेन करना आसान बनाते हैं। ब्राउज़र मॉड्यूल को ऐसे script टैग से लोड करते हैं जिसका type एट्रिब्यूट module हो।

ब्राउज़र में JavaScript डेवलपर टूल्स से डिबग करें, जो F12 दबाकर या पेज पर राइट-क्लिक करके Inspect चुनने से खुलते हैं। Console एरर और लॉग की गई वैल्यू दिखाता है, और Sources पैनल में आप ब्रेकपॉइंट लगाकर कोड को लाइन दर लाइन चला सकते हैं। Network पैनल पेज की हर रिक्वेस्ट और उसका जवाब दिखाता है।

इवेंट लूप वह तंत्र है जिससे सिंगल-थ्रेड वाली JavaScript बिना अटके कई काम संभालती है। टाइमर और नेटवर्क रिक्वेस्ट जैसा धीमा काम बैकग्राउंड में इंतज़ार करता है, और कॉल स्टैक खाली होने पर इवेंट लूप हर पूरे हुए callback को चलाता है। लंबा चलने वाला कोड फिर भी इवेंट लूप को रोक देता है, इसीलिए भारी लूप पेज को अटका देते हैं।

हाँ, JavaScript, Node.js, Deno और Bun जैसे रनटाइम के ज़रिए सर्वर पर चलती है। सर्वर-साइड JavaScript से API बनाए जा सकते हैं, फ़ाइलें पढ़ी जा सकती हैं और डेटाबेस से जुड़ा जा सकता है। ब्राउज़र और सर्वर दोनों पर एक ही भाषा इस्तेमाल करने से टीम कोड और स्किल साझा कर पाती है।

JavaScript कोड सुरक्षित रखने के लिए कभी भी अविश्वसनीय टेक्स्ट को innerHTML से पेज में न डालें, सर्वर पर हर इनपुट दोबारा वैलिडेट करें और सीक्रेट को फ्रंटएंड कोड से बाहर रखें। ब्राउज़र को भेजी गई हर चीज़ यूज़र पढ़ सकते हैं, API की भी। Content Security Policy और अपडेटेड डिपेंडेंसी कई आम हमलों को रोकती हैं।

JavaScript में localStorage डेटा सिर्फ़ ब्राउज़र में रखता है, जबकि कुकी हर रिक्वेस्ट के साथ सर्वर को भेजी जाती हैं। localStorage ज़्यादा डेटा रखता है और चुनी गई थीम जैसी सेटिंग के लिए ठीक है। HttpOnly और Secure वाली कुकी लॉगिन सेशन के लिए ज़्यादा सुरक्षित जगह हैं, क्योंकि स्क्रिप्ट उन्हें पढ़ नहीं सकतीं।

मेंटेन करने लायक JavaScript कोड छोटे फ़ंक्शन, साफ़ नाम, मॉड्यूल, एक जैसी फ़ॉर्मैटिंग और ESLint जैसे लिंटर से लिखें। ग्लोबल वेरिएबल से बचें, और DOM बदलने वाले कोड को डेटा संभालने वाले कोड से अलग रखें। ऑटोमेटेड टेस्ट बाद के बदलावों को सुरक्षित बनाते हैं।