JavaScript क्या है

docs.scrimba.com

एक वेब पेज खोलें और एक बटन पर क्लिक करें जो एक मेनू खोलता है, एक सर्च बॉक्स में टाइप करें जो जाते ही सुझाव देता है, या एक फीड को देखें जो स्क्रॉल करते समय अधिक पोस्ट लोड करता है। इनमें से कोई भी HTML नहीं है, और कोई भी CSS नहीं है। यह JavaScript है: वह भाषा जो ब्राउज़र के अंदर चलती है और एक पेज को आपके द्वारा किए जाने वाले कार्यों का जवाब देता है। यह अध्याय इस बारे में है कि वह भाषा क्या है, यह कहाँ चलती है, और यह आपके पहले से ज्ञात HTML और CSS के साथ कैसे फिट होती है।

पेजों को काम करने के लिए एक भाषा

JavaScript एक प्रोग्रामिंग भाषा है: निर्देशों को लिखने का एक तरीका जो एक कंप्यूटर चरण दर चरण निष्पादित करता है। जहाँ HTML बताता है कि एक पेज पर क्या है और CSS बताता है कि यह कैसा दिखता है, JavaScript बताता है कि क्या होता है। यह वह हिस्सा है जो प्रतिक्रिया करता है।

एक वेब पेज को एक घर के रूप में सोचें। HTML संरचना है, दीवारें और कमरे। CSS पेंट और फर्नीचर है। JavaScript बिजली और प्लंबिंग है: वह तार जो एक स्विच को एक लाइट चालू करता है, या एक नल को पानी निकालता है। यह वह है जो पेज को कुछ करता है जब एक व्यक्ति इसके साथ इंटरैक्ट करता है।

JavaScript एक वेब पेज की व्यवहार परत है। HTML संरचना प्रदान करता है और CSS प्रस्तुतिकरण प्रदान करता है; JavaScript तर्क और इंटरैक्टिविटी जोड़ता है। यह पेज को लोड होने के बाद पढ़ और बदल सकता है, क्लिक और कुंजी दबाने जैसी घटनाओं का जवाब दे सकता है, स्थिति को ट्रैक कर सकता है, और नए डेटा लोड करने के लिए सर्वर से बात कर सकता है।

HTML और CSS के विपरीत, जो एक परिणाम का वर्णन करते हैं, JavaScript एक पूर्ण प्रोग्रामिंग भाषा है: इसमें चर, शर्तें, लूप और फ़ंक्शन हैं। आप केवल यह घोषणा नहीं कर रहे हैं कि आप क्या चाहते हैं, आप उन चरणों को लिख रहे हैं जो ब्राउज़र चलाता है। यह पारी है जो यह हैंडबुक है, एक पेज का वर्णन करने से एक को प्रोग्राम करने तक।

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

ध्यान रखने योग्य फ्रेमिंग यह है कि HTML और CSS घोषणात्मक हैं जबकि JavaScript अनिवार्य और ट्यूरिंग-पूर्ण है: आप केवल एक वांछित परिणाम नहीं, बल्कि संगणना व्यक्त करते हैं। यह शक्ति ही है कि पूरे वेब की इंटरैक्टिविटी इस पर चलती है, और यह भी कि जिस अनुशासन की HTML और CSS को मुश्किल से आवश्यकता है, नामकरण, संरचना, त्रुटि संभालना, आपकी जिम्मेदारी बन जाती है जैसे ही तर्क पेज में प्रवेश करता है। यह हैंडबुक ज्यादातर उस शक्ति को उपयोग करने के बारे में है केवल आप ही समझ सकते हैं ऐसा अव्यवस्था बनाए बिना।

// HTML आपको एक बटन देता है। JavaScript इसे कुछ करता है।
const button = document.querySelector(".menu-toggle");
button.addEventListener("click", openMenu);

आप इसके हर हिस्से से बाद के अध्यायों में मिलेंगे। अभी के लिए, आकार पर ध्यान दें: JavaScript पेज में पहुँचता है (document.querySelector), और यह उस चीज़ का जवाब देता है जो उपयोगकर्ता करता है (addEventListener)। अंदर पहुँचना और जवाब देना ज्यादातर है जो ब्राउज़र JavaScript करता है।

Junoपेजों को काम करने के लिए एक भाषा HTML संरचना है, CSS शैली है, JavaScript व्यवहार है: वह हिस्सा जो जवाब देता है जब कोई पेज का उपयोग करता है। यह एक वास्तविक प्रोग्रामिंग भाषा है, इसलिए आप निर्देश लिखते हैं जो ब्राउज़र चरण दर चरण अनुसरण करता है। यह पारी है जो आप शुरू कर रहे हैं: एक पेज का वर्णन करने से इसे बताने तक कि क्या करना है।

Junoपेजों को काम करने के लिए एक भाषा JavaScript व्यवहार परत है: यह पेज को पढ़ता और बदलता है, घटनाओं का जवाब देता है, और सर्वर से बात करता है। HTML और CSS के विपरीत यह तर्क और स्थिति के साथ एक पूर्ण भाषा है, इसलिए आप पेज को घोषित करने के बजाय प्रोग्राम करते हैं। उस काम को अपने दिमाग में स्पष्ट रखना अन्य दो को रखने में आसान बनाता है।

Junoपेजों को काम करने के लिए एक भाषा JavaScript अनिवार्य और ट्यूरिंग-पूर्ण है, जो कि पूरे वेब की इंटरैक्टिविटी को ले जाने का कारण है और यह भी कि संरचना आपका काम बन जाती है जैसे ही तर्क दिखता है। यह गतिशील रूप से टाइप किया गया है, इसलिए एक नाम कोई भी प्रकार रख सकता है और प्रकार की जाँच रनटाइम पर होती है। यहाँ अधिकांश कला ऐसी शक्ति को उपयोग करने के बारे में है जिसे केवल आप ही पढ़ सकते हैं।

JavaScript कहाँ चलता है

JavaScript ब्राउज़र के अंदर चलता है। हर ब्राउज़र, Chrome, Safari, Firefox, के पास एक बिल्ट-इन इंजन है जो आपके JavaScript को पढ़ता है और चलाता है। इसका मतलब है कि शुरुआत करने के लिए कुछ भी स्थापित नहीं करना पड़ता है: यदि आप एक वेब पेज खोल सकते हैं, तो आप JavaScript चला सकते हैं।

आप एक <script> टैग के साथ एक पेज में JavaScript जोड़ते हैं, आमतौर पर बंद </body> टैग से ठीक पहले। अपने कोड को अपनी फाइल में रखने के लिए, टैग को src विशेषता के साथ इसकी ओर इशारा करें जो फाइल का नाम देती है, उसी तरह जैसे एक छवि टैग एक छवि की ओर इशारा करता है।

कोड की एक पंक्ति आजमाने के लिए सबसे तेज़ जगह ब्राउज़र कंसोल है, डेवलपर टूल्स में एक पैनल जहाँ आप JavaScript टाइप कर सकते हैं और तुरंत परिणाम देख सकते हैं।

JavaScript एक रनटाइम में चलता है: एक वातावरण जो आपके कोड को निष्पादित करने के लिए इंजन प्लस अतिरिक्त सुविधाएँ प्रदान करता है जो कोड उपयोग कर सकता है। ब्राउज़र में, रनटाइम आपको पेज के लिए document, ब्राउज़र टैब के लिए window, नेटवर्क अनुरोधों के लिए fetch, और अन्य चीजें देता है। भाषा छोटी है; अधिकांश जो आप ब्राउज़र में उपयोग करते हैं वह इसके चारों ओर रनटाइम से आता है। <script> टैग और इसकी src विशेषता के साथ एक बाहरी स्क्रिप्ट लोड करें, और defer जोड़ें ताकि ब्राउज़र स्क्रिप्ट चलाने से पहले पेज का निर्माण पूरा कर लें, जो आपको "तत्व नहीं मिला" बग के एक वर्ग से बचाता है। डेव टूल्स में कंसोल एक लाइव रनटाइम है जिसमें आप टाइप कर सकते हैं, और यह वह है जहाँ आप सबसे तेज़ ideas का परीक्षण करेंगे।

JavaScript एक भाषा विनिर्देश द्वारा परिभाषित है (ECMAScript) और एक इंजन जैसे V8 (Chrome, Node) या JavaScriptCore (Safari) द्वारा निष्पादित किया जाता है। इंजन कहानी का केवल आधा हिस्सा है: उपयोगी क्षमताएँ होस्ट वातावरण से आती हैं, रनटाइम जो इंजन को एम्बेड करता है और इसे API लोगों तक पहुँचाता है। ब्राउज़र में वह होस्ट पेज है, DOM, टाइमर, fetch, स्टोरेज, और घटनाएँ प्रदान करता है; Node जैसे सर्वर रनटाइम में यह ऑपरेटिंग सिस्टम है, फाइलें और सॉकेट प्रदान करता है।

दो व्यावहारिक परिणाम। पहला, एक ही भाषा बहुत अलग जगहों पर चलती है, इसलिए "क्या यह JavaScript है या एक ब्राउज़र सुविधा" एक वास्तविक भेद है: Array और Promise भाषा हैं, जबकि document और localStorage ब्राउज़र हैं। दूसरा, कैसे एक स्क्रिप्ट लोड होती है वह व्यवहार को प्रभावित करता है: एक क्लासिक <script> पार्सिंग को रोकता है, defer इसे DOM के बाद क्रम में चलाता है, और type="module" डिफ़ॉल्ट रूप से defers और आपको import/export प्लस अपना स्कोप देता है। यह जानना कि आप कौन सा उपयोग कर रहे हैं "मेरे पेज अस्तित्व में आने से पहले यह क्यों चला" confusion को समझाता है।

JunoJavaScript कहाँ चलता है JavaScript ब्राउज़र में चलता है, जिसके पास पहले से ही इसे निष्पादित करने के लिए एक इंजन है, इसलिए कुछ भी स्थापित नहीं करना पड़ता है। आप इसे एक <script> टैग के साथ एक पेज में जोड़ते हैं, और एक पंक्ति आजमाने के लिए सबसे तेज़ जगह ब्राउज़र के डेवलपर टूल्स में कंसोल है। इसे खोलें और कुछ टाइप करें, आप कुछ नहीं तोड़ सकते।

JunoJavaScript कहाँ चलता है ब्राउज़र आपको एक रनटाइम देता है: इंजन प्लस extras जैसे document और fetch। अपने कोड को <script src> के साथ लोड करें और defer जोड़ें ताकि यह पेज के बाद चले। कंसोल ideas का परीक्षण करने के लिए एक लाइव रनटाइम है, और यह सबसे तेज़ प्रतिक्रिया है जो आप पाएँगे।

JunoJavaScript कहाँ चलता है इंजन भाषा (ECMAScript) चलाता है; होस्ट वातावरण API प्रदान करता है, जो कि Array JavaScript है लेकिन document ब्राउज़र है। कैसे एक स्क्रिप्ट लोड होती है यह भी महत्वपूर्ण है: क्लासिक स्क्रिप्ट्स पार्सिंग को रोकती हैं, defer DOM के बाद क्रम में चलता है, और type="module" defers और import scope जोड़ता है। यह भेद "यह पेज से पहले चला" bugs की अधिकांश व्याख्या करता है।

JavaScript का पहला दृश्य

यहाँ एक छोटा प्रोग्राम है। आपको अभी हर हिस्से को समझने की आवश्यकता नहीं है, अगले अध्याय हर एक को कवर करते हैं, लेकिन आप पहले से ही इसके आकार को पढ़ सकते हैं:

let name = "राज";
console.log("नमस्ते " + name); // नमस्ते राज

पहली पंक्ति पाठ "राज" को name नाम के तहत संग्रहीत करती है। दूसरी पंक्ति कंसोल को एक संदेश प्रिंट करती है, "नमस्ते " और संग्रहीत नाम को एक साथ जोड़ते हुए। console.log यह है कि आप JavaScript को एक मान दिखाने के लिए कहते हैं जबकि आप सीख रहे हैं, और आप इसे लगातार उपयोग करेंगे।

एक पहला प्रोग्राम, छोटा लेकिन पूर्ण:

let name = "राज";
let greeting = "नमस्ते " + name;
console.log(greeting); // नमस्ते राज

तीन विचार पहले से ही यहाँ हैं: एक चर जो एक मान रखता है, एक अभिव्यक्ति जो मानों को जोड़ता है ("नमस्ते " + name), और एक कथन जो परिणाम के साथ कुछ करता है (console.log)। लगभग सभी JavaScript ये तीन चीजें स्टैक की हुई हैं: कुछ मानों को नाम दें, उनके साथ गणना करें, और परिणाम पर कार्य करें। console.log कंसोल को प्रिंट करता है और आपकी कोड वास्तव में क्या कर रही है यह देखने के लिए आपका डिफ़ॉल्ट टूल है।

सबसे छोटा उपयोगी प्रोग्राम भी भाषा के मूल लूप को दिखाता है:

const name = "राज";
const greeting = `नमस्ते ${name}`;
console.log(greeting); // नमस्ते राज

एक कार्यशील डेवलपर यहाँ प्रतिक्रिया से बनाए गए विकल्पों पर ध्यान दें: let के बजाय const क्योंकि बाइंडिंग कभी नहीं बदलती (इरादा संकेत और आकस्मिक पुनः असाइनमेंट को रोकना), और एक टेम्पलेट लिटरल (बैकटिक स्ट्रिंग with ${...}) के बजाय + संघनन क्योंकि यह साफ़ पढ़ता है और प्रकारों को अधिक पूर्वानुमान से संभालता है। इसमें से कोई भी पंक्ति को चलाने के लिए आवश्यक नहीं है, जो बिल्कुल बिंदु है: JavaScript느슨संस्करण को खुशी से स्वीकार करेगा, इसलिए आपके कोड की गुणवत्ता उन निर्णयों से आती है जो भाषा को बल नहीं देती है। यह हैंडबुक इसके समय के अधिकांश variables के साथ शुरू होने वाले उन निर्णयों पर खर्च करता है।

JunoJavaScript का पहला दृश्य एक प्रोग्राम ज्यादातर यह है: कुछ मानों को संग्रहीत करें, उन्हें संयोजित करें, और परिणाम के साथ कुछ करें। console.log एक मान प्रिंट करता है ताकि आप इसे देख सकें, और यह सीखते समय आपका सबसे अच्छा दोस्त है। अभी विवरण के बारे में चिंता न करें, आप अगले अध्यायों में हर हिस्से से ठीक से मिलेंगे।

JunoJavaScript का पहला दृश्य अधिकांश JavaScript तीन चीजें हैं स्टैक की गई: चर जो मानों को रखते हैं, अभिव्यक्तियाँ जो उन्हें जोड़ती हैं, और कथन जो परिणाम पर कार्य करते हैं। किसी भी स्निपेट में उन तीनों को पहचानना अपरिचित कोड को बहुत कम डराता है। console.log को पास रखें, यह है कि आप कैसे जाँच करते हैं कि आपका कोड वास्तव में क्या कर रहा है।

JunoJavaScript का पहला दृश्य भाषा ढीले संस्करण और सावधान संस्करण को समान रूप से चलाती है, इसलिए गुणवत्ता उन विकल्पों से आती है जो यह कभी नहीं देती: const over let जब एक बाइंडिंग fixed हो, readability के लिए + पर template literals। यह स्वतंत्रता JavaScript का आशीर्वाद और इसका जाल है। अगले अध्याय ज्यादातर उन कॉल को अच्छी तरह करने के बारे में हैं, variables के साथ शुरू करते हुए।

"आधुनिक JavaScript" का क्या मतलब है

आप लोगों को आधुनिक JavaScript के बारे में बात करते हुए सुनेंगे। JavaScript 1995 के बाद से है और हर साल नई सुविधाएँ मिलती हैं, लेकिन पुराना कोड काम करता रहता है, इसलिए भाषा को वर्षों में एक ही चीज़ को करने के कुछ अलग तरीके मिल गए हैं।

अच्छी खबर: आपको इतिहास की आवश्यकता नहीं है। यह हैंडबुक हर चीज़ को लिखने के लिए वर्तमान, अनुशंसित तरीका सिखाता है। यदि आप पुराने tutorials देखते हैं जो चर बनाने के लिए var का उपयोग करते हैं, वह पुरानी शैली है; आप let और const सीखेंगे बजाय, जो आज डेवलपर्स उपयोग करते हैं।

"आधुनिक JavaScript" आमतौर पर मतलब है भाषा जैसे यह एक बड़े 2015 अपडेट से है (ES2015, या ES6) और तब से वार्षिक additions। उस अपडेट ने let और const, arrow functions, template literals, और अधिक जोड़े, और यह baseline है जो हर वर्तमान ब्राउज़र समर्थन करता है।

यह महत्वपूर्ण है क्योंकि आप कोड के दो eras में चलेंगे। पुरानी सामग्री हर जगह var, function अभिव्यक्तियों, और string concatenation का उपयोग करती है; वर्तमान कोड const/let, arrow functions, और template literals का उपयोग करता है। यह हैंडबुक आधुनिक शैली सिखाता है और पुराने रूपों को केवल नाम देता है ताकि आप उन्हें जंगली में पहचानें। आपको build tools या configuration की आवश्यकता नहीं है इनमें से किसी को भी उपयोग करने के लिए; यह ब्राउज़र में जैसे है चलता है।

JavaScript को ECMAScript के रूप में मानकीकृत किया जाता है, और ES2015 के बाद विनिर्देश वार्षिक जहाज करता है (ES2016, ES2017, इत्यादि), हर एक एक छोटा, backward-compatible सुविधाओं का सेट जोड़ते हुए। "आधुनिक JavaScript" उस विकसित भाषा के विरुद्ध लिखने के लिए shorthand है, const/let, arrow functions, template literals, destructuring, modules, async/await, pre-2015 idioms के बजाय।

कारण यह वास्तव में सरल रहता है JavaScript की backward compatibility की nearly-absolute commitment: नया syntax जोड़ा जाता है, पुराना syntax लगभग कभी नहीं breaks, इसलिए एक दशक पुरानी स्क्रिप्ट अभी भी चलती है। यह कारण है कि आप केवल आधुनिक रूपों को सीख सकते हैं और var और उसके युग को पुरानी कोड को बनाए रखने के लिए read-only ज्ञान के रूप में सुरक्षित रूप से मान सकते हैं। एक जगह जहाँ अतीत घुसपैठ करता है वह है जब आप किसी और के पुराने codebase को पढ़ते हैं, और यह हैंडबुक उन पुराने रूपों को flags करता है जैसे वे आते हैं ताकि वे आपको trip न करें। अगला अध्याय, variables, वहीं शुरू होता है, आधुनिक तरीके के साथ मानों को नाम देने और संग्रहीत करने के लिए।

Junoआधुनिक JavaScript का क्या मतलब है JavaScript पुराना है और अपने पुराने कोड को काम करता रहता है, इसलिए कुछ चीजों को करने के कुछ तरीके हैं। आपको इतिहास की आवश्यकता नहीं है: यह हैंडबुक हर बार वर्तमान, अनुशंसित तरीका सिखाता है। यदि एक tutorial var उपयोग करता है, वह पुरानी शैली है, और आप let और const सीखेंगे।

Junoआधुनिक JavaScript का क्या मतलब है आधुनिक JavaScript मतलब भाषा 2015 अपडेट से: const और let, arrow functions, template literals। आप पुराना कोड मिलेंगे जो var और concatenation उपयोग करता है, इसलिए यह हैंडबुक आधुनिक शैली सिखाता है और पुराने रूपों को केवल नाम देता है ताकि आप उन्हें पहचानें। यह सभी ब्राउज़र में build step के बिना चलता है।

Junoआधुनिक JavaScript का क्या मतलब है ECMAScript वार्षिक जहाज करता है और backward compatible रहता है, इसलिए नया syntax जोड़ा जाता है और पुराना syntax लगभग कभी नहीं breaks। यह कारण है कि आप केवल आधुनिक रूपों को सीख सकते हैं और पुरानी codebases के लिए read-only ज्ञान के रूप में var और इसके युग को मान सकते हैं। विकसित भाषा के विरुद्ध लिखें और जैसे ही legacy forms दिखें हैंडबुक उन्हें flag करने दें।

JavaScript यहाँ से कहाँ जाता है

JavaScript एक बड़ी भाषा है, लेकिन यह छोटी शुरुआत करती है: मान, उनके नाम, और उन्हें जोड़ने और कार्य करने के तरीके। एक बार जब ये क्लिक करते हैं, यह हैंडबुक बाहर की ओर बनाता है: निर्णय लेना और काम दोहराना, कोड को functions में व्यवस्थित करना, arrays और objects में संग्रह रखना, और फिर the DOM के साथ पेज में पहुँचना खुद चीजें बनाने के लिए जो लोग वास्तव में उपयोग कर सकते हैं।

अगला अध्याय, variables, जहाँ असली काम शुरू होता है: एक मान को कैसे संग्रहीत करें, let और const के बीच अंतर, और छोटे नियमों का सेट जो पूरी बाकी भाषा पर बनी है।