🏞️ 👨🏿‍🤝‍👨🏾 🖖🏻 जावास्क्रिप्ट गाइड भाग 7: सख्त मोड, यह कीवर्ड, घटनाओं, मॉड्यूल, गणित ♦️ 🥧 〰️

आज, जावास्क्रिप्ट नियमावली के अनुवाद के सातवें भाग में, हम कड़ाई से मोड में कोड निष्पादन के बारे में बात करेंगे, इस कीवर्ड की विशेषताओं के बारे में, घटनाओं के बारे में, मॉड्यूल के बारे में और गणितीय गणनाओं के बारे में। यहां हम टाइमर और अतुल्यकालिक प्रोग्रामिंग के साथ काम करने के विषयों को कवर करेंगे।

→ भाग 1: पहला कार्यक्रम, भाषा सुविधाएँ, मानक
→ भाग 2: कोड शैली और कार्यक्रम संरचना
→ भाग 3: चर, डेटा प्रकार, भाव, वस्तु
→ भाग 4: सुविधाएँ
→ भाग 5: सरणियाँ और लूप
→ भाग 6: अपवाद, अर्धविराम, वाइल्डकार्ड शाब्दिक
→ भाग 7: सख्त मोड, यह कीवर्ड, घटनाओं, मॉड्यूल, गणितीय गणना
→ भाग 8: ES6 सुविधाओं का अवलोकन
→ भाग 9: ES7, ES8 और ES9 मानकों का अवलोकन

सख्त मोड

ईएस 5 मानक में सख्त मोड दिखाई दिया। इस मोड में, भाषा का शब्दार्थ बदल जाता है, इसका उद्देश्य जावास्क्रिप्ट के व्यवहार में सुधार करना है, जो इस तथ्य की ओर जाता है कि इस मोड में कोड सामान्य से भिन्न व्यवहार करता है। वास्तव में, हम इस तथ्य के बारे में बात कर रहे हैं कि इस मोड में, भाषा की कमियां, अस्पष्टताएं, अप्रचलित विशेषताएं जो संगतता कारणों से इसमें संग्रहीत की जाती हैं, समाप्त हो जाती हैं।

सख्त मोड को सक्षम करना

कुछ कोड में सख्त मोड का उपयोग करने के लिए, इसे स्पष्ट रूप से सक्षम होना चाहिए। यही है, हम इस तथ्य के बारे में बात नहीं कर रहे हैं कि यह मोड डिफ़ॉल्ट रूप से उपयोग किया जाता है। ऐसा दृष्टिकोण 1996 से शुरू से ही भाषा तंत्र पर आधारित अनगिनत मौजूदा कार्यक्रमों के काम को बाधित करेगा। वास्तव में, जावास्क्रिप्ट मानकों को विकसित करने वालों के महत्वपूर्ण प्रयासों का उद्देश्य विशेष रूप से संगतता सुनिश्चित करना है, ताकि मानकों के पुराने संस्करणों के आधार पर लिखे गए कोड को आज के जेएस इंजनों पर निष्पादित किया जा सके। यह दृष्टिकोण वेब विकास के लिए भाषा के रूप में जावास्क्रिप्ट की सफलता की कुंजी में से एक माना जा सकता है।

सख्त मोड को सक्षम करने के लिए, एक विशेष निर्देश का उपयोग किया जाता है जो इस तरह दिखता है।

'use strict'

"use strict" और उसी निर्देश के बाद लिखा गया निर्देश जिसके बाद एक अर्धविराम ( 'use strict'; "use strict"; और "use strict"; ) उसी प्रभाव को जन्म देता है। यह निर्देश (बस उस तरह - एक साथ उद्धरण चिह्नों के साथ), ताकि एक निश्चित फ़ाइल के सभी कोड को सख्त मोड में निष्पादित किया जा सके, इस फ़ाइल की शुरुआत में रखा गया है।

 'use strict' const name = 'Flavio' const hello = () => 'hey' //...

एक अलग फ़ंक्शन के स्तर पर सख्त मोड को सक्षम किया जा सकता है। ऐसा करने के लिए, फ़ंक्शन बॉडी कोड की शुरुआत में संबंधित निर्देश को रखा जाना चाहिए।

 function hello() { 'use strict' return 'hey' }

यह तब उपयोगी हो सकता है जब मौजूदा कोडबेस में सख्त मोड का उपयोग करने की आवश्यकता होती है और साथ ही इस पूरी फाइल के लिए कोड के गहन परीक्षण के लिए समय की कमी के कारण इसे फ़ाइल स्तर पर चालू करना व्यावहारिक नहीं है।

यह ध्यान दिया जाना चाहिए कि यदि सख्त मोड चालू है, तो आप प्रोग्राम निष्पादन के दौरान इसे बंद नहीं कर सकते।

सख्त मोड की कुछ विशेषताओं पर विचार करें।

Ables वैश्विक चर के यादृच्छिक प्रारंभिक संयोजन

हमने पहले ही कहा है कि यदि आप गलती से एक अघोषित चर के लिए एक निश्चित मान असाइन करते हैं, भले ही आप इसे फ़ंक्शन कोड में करते हैं, तो ऐसे चर को डिफ़ॉल्ट रूप से वैश्विक बनाया जाएगा (वैश्विक ऑब्जेक्ट से संबंधित)। इससे आश्चर्य हो सकता है।

उदाहरण के लिए, निम्न कोड केवल एक ऐसा चर बनाता है।

 ;(function() { variable = 'hey' })()

IIFE के निष्पादन के बाद variable वैश्विक दायरे में उपलब्ध होगा।

यदि इस फ़ंक्शन के स्तर पर सख्त मोड सक्षम किया गया है, तो समान कोड त्रुटि का कारण होगा।

 ;(function() { 'use strict' variable = 'hey' })()

। कार्य संचालन के दौरान होने वाली त्रुटियां

जावास्क्रिप्ट, सामान्य मोड में, असाइनमेंट ऑपरेशन के दौरान होने वाली किसी भी त्रुटि की रिपोर्ट नहीं करता है।

उदाहरण के लिए, जेएस में एक अपरिभाषित मूल्य है, जो भाषा के आदिम मूल्यों में से एक है और इसे undefined एक वैश्विक वस्तु की संपत्ति द्वारा दर्शाया गया है। नियमित जेएस में, इस तरह की कमान काफी संभव है।

 undefined = 1

ऐसा लगता है कि undefined नाम के साथ एक निश्चित चर के लिए एक इकाई लिखना है, लेकिन वास्तव में यह एक वैश्विक वस्तु की संपत्ति में एक नया मूल्य लिखने का एक प्रयास है, जो, मानक के अनुसार, वैसे नहीं लिखा जा सकता है। सामान्य मोड में, हालांकि इस तरह की कमांड संभव है, यह कुछ भी नहीं लेगा - यानी undefined मूल्य को नहीं बदला जाएगा, और एक त्रुटि संदेश नहीं दिखाई देगा। सख्त मोड में, यह एक त्रुटि का कारण होगा। इस त्रुटि संदेश को देखने के लिए, और एक ही समय में सुनिश्चित करें कि undefined मूल्य सामान्य मोड में ओवरराइड नहीं है, निम्न कोड को किसी ब्राउज़र या Node.js. में निष्पादित करने का प्रयास करें।

 undefined = 1 console.log('This is '+undefined) ;(() => { 'use strict' undefined = 1 })()

सिस्टम का समान व्यवहार भी विशेषता है जब Infinity और NaN साथ-साथ अन्य समान लोगों के साथ ऐसी संस्थाओं के साथ काम करना। सख्त मोड आपको इस सब से बचने की अनुमति देता है।

जावास्क्रिप्ट में, आप Object.defineProperty () विधि का उपयोग करके वस्तुओं के गुण सेट कर सकते हैं। विशेष रूप से, इस पद्धति का उपयोग करके आप ऐसे गुण सेट कर सकते हैं जिन्हें बदला नहीं जा सकता है।

 const car = {} Object.defineProperty(car, 'color', {  value: 'blue',  writable: false }) console.log(car.color) car.color = 'yellow' console.log(car.color)

color गुण सेट करते समय उपयोग की जाने वाली writable: false विशेषता पर ध्यान दें।

सामान्य मोड में निष्पादित उपरोक्त कोड, न तो color ऑब्जेक्ट की संपत्ति में कोई बदलाव करेगा, और न ही एक त्रुटि के आउटपुट के लिए। इस संपत्ति को सख्त मोड में बदलने के प्रयास के परिणामस्वरूप त्रुटि होगी।

 ;(() => { 'use strict' car.color = 'red' })()

वही गेटर्स के लिए जाता है। यह कोड निष्पादित करेगा, हालांकि कोई फायदा नहीं हुआ।

 const car = { get color() {   return 'blue' } } console.log(car.color) car.color = 'red' console.log(car.color)

और सख्त मोड में एक ही करने का प्रयास एक वस्तु की संपत्ति को सेट करने के प्रयास को रिपोर्ट करने में त्रुटि का कारण होगा जिसमें केवल एक गेटर है।

 ;(() => { 'use strict' car.color = 'yellow' } )()

जावास्क्रिप्ट में एक Object.preventExtensions () विधि है जो एक ऑब्जेक्ट को गैर-एक्स्टेंसिबल बनाता है, अर्थात, जिसमें से एक नया गुण जोड़ा नहीं जा सकता है। सामान्य मोड में इस तरह की वस्तुओं के साथ काम करते समय, भाषा की वही विशेषताएं जो हमने ऊपर जांच की थीं, वे प्रकट होती हैं।

 const car = { color: 'blue' } Object.preventExtensions(car) console.log(car.model) car.model = 'Fiesta' console.log(car.model)

यहां, model ऑब्जेक्ट की एक संपत्ति को प्राप्त करने के दोनों प्रयासों के परिणामस्वरूप कंसोल में undefined मूल्य दिखाई देगा। ऑब्जेक्ट में ऐसी कोई संपत्ति नहीं थी; ऑब्जेक्ट को गैर-विस्तार योग्य बनाने के बाद इसे बनाने का प्रयास कुछ भी नहीं हुआ। सख्त मोड में एक ही कार्रवाई के परिणामस्वरूप एक त्रुटि संदेश आता है।

 ;(() => { 'use strict' car.owner = 'Flavio' } )()

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

 let one = 1 one.prop = 2 console.log(one.prop)

सख्त मोड में समान होने से यह त्रुटि संदेश जाएगा कि यह दर्शाता है कि prop प्रॉपर्टी नंबर 1 पर नहीं बनाई जा सकती है। इसी तरह से, अन्य आदिम डेटा प्रकारों के साथ काम करते समय सिस्टम व्यवहार करता है।

▍ एंटिटी डिलेयन एरर्स

सामान्य मोड में, यदि आप डिलीट ऑपरेटर का उपयोग करके हटाने की कोशिश करते हैं, तो ऐसी ऑब्जेक्ट प्रॉपर्टी जिसे डिलीट नहीं किया जा सकता है, delete बस false वापसी होगी और सब कुछ चुपचाप विफल हो जाएगा।

 delete Object.prototype

सख्त मोड में, यहां एक त्रुटि उत्पन्न होगी।

। समान नाम के साथ फ़ंक्शन तर्क

फ़ंक्शंस में एक ही नाम के पैरामीटर हो सकते हैं, इससे त्रुटियों का कारण नहीं बनता है (हालांकि यह ऐसा फ़ंक्शन बनाने वाले से त्रुटि जैसा दिखता है)।

 ;(function(a, a, b) { console.log(a, b) })(1, 2, 3) //2 3

यह कोड सामान्यतः कंसोल में 2 3 प्रदर्शित करता है। सख्त मोड में, यह एक त्रुटि का कारण होगा।

वैसे, अगर ऐरो फंक्शन की घोषणा के दौरान इसके मापदंडों का एक ही नाम होगा, तो यह, सामान्य मोड में, एक त्रुटि संदेश के आउटपुट की ओर ले जाएगा।

Values अष्टम भाव

सामान्य जावास्क्रिप्ट में, आप शुरुआत में 0 जोड़कर अष्ट मान का उपयोग कर सकते हैं।

 ;(() => { console.log(010) })() //8

यहां, ऑक्टल नंबर 10 , यानी 8 का दशमलव प्रतिनिधित्व कंसोल में मिलेगा। यह 0 से पहले संख्या को बेतरतीब ढंग से रखा जा सकता है। सख्त मोड में, आप इस प्रारूप में निर्दिष्ट अष्टक संख्याओं के साथ काम नहीं कर सकते। लेकिन अगर आपको सख्त मोड का उपयोग करने और ऑक्टल नंबरों के साथ काम करने की आवश्यकता है, तो आप उन्हें 0oXX प्रारूप में लिख सकते हैं। निम्न कोड भी 8 आउटपुट करेगा।

 ;(() => { 'use strict' console.log(0o10) })() //8

▍Operator के साथ

बयान के साथ , जिसके कारण भ्रम पैदा हो सकता है, सख्त मोड में अनुमति नहीं है।
कोड के व्यवहार को सख्त मोड में बदलना उन तक सीमित नहीं है जिनकी हमने ऊपर चर्चा की थी। विशेष रूप से, इस मोड में, यह कीवर्ड अलग तरह से व्यवहार करता है, जिसे हम पहले ही देख चुके हैं, और जिसके बारे में हम अब और विस्तार से बात करेंगे।

यह कीवर्ड सुविधाएँ

this , या निष्पादन संदर्भ, आपको उस वातावरण का वर्णन करने की अनुमति देता है जिसमें JS कोड निष्पादित किया गया है। इसका अर्थ इसके उपयोग की जगह पर और इस पर निर्भर करता है कि सख्त मोड सक्षम है या नहीं।

। इसे सख्त मोड में रखें

सख्त मोड में, फ़ंक्शन को दिया गया this मान ऑब्जेक्ट पर नहीं डाला जाता है। इस रूपांतरण के लिए न केवल संसाधनों की आवश्यकता होती है, बल्कि यदि वे this सेट के साथ undefined या null हैं, तो उन्हें वैश्विक ऑब्जेक्ट तक पहुंच प्रदान करता है। इस व्यवहार का अर्थ है कि फ़ंक्शन वैश्विक ऑब्जेक्ट तक अनधिकृत पहुंच प्राप्त कर सकता है। सख्त मोड में, this फ़ंक्शन को दिए गए रूपांतरण का प्रदर्शन नहीं किया जाता है। अलग-अलग मोड में फ़ंक्शन में this के व्यवहार के बीच अंतर को देखने के लिए, इस कोड का उपयोग 'use strict' निर्देश का 'use strict' और इसके बिना करें।

 ;(function() { console.log(this) })()

। यह कीवर्ड ऑब्जेक्ट मेथड में है

एक विधि एक फ़ंक्शन है जिसे ऑब्जेक्ट प्रॉपर्टी में संदर्भित किया जाता है। ऐसे फ़ंक्शन में this इस ऑब्जेक्ट को संदर्भित करता है। इस कथन को निम्नलिखित उदाहरण द्वारा स्पष्ट किया जा सकता है।

 const car = { maker: 'Ford', model: 'Fiesta', drive() {   console.log(`Driving a ${this.maker} ${this.model} car!`) } } car.drive() //Driving a Ford Fiesta car!

इस स्थिति में, हम सामान्य फ़ंक्शन का उपयोग करते हैं (और न कि तीर एक - यह महत्वपूर्ण है), यह प्रयोग किया गया कीवर्ड जिसमें स्वचालित रूप से इस फ़ंक्शन वाले ऑब्जेक्ट के लिए बाध्य है।

ध्यान दें कि वस्तु विधि घोषित करने की उपरोक्त विधि इस प्रकार है:

 const car = { maker: 'Ford', model: 'Fiesta', drive: function() {   console.log(`Driving a ${this.maker} ${this.model} car!`) } }

ऑब्जेक्ट के this तरीके के व्यवहार को निम्न निर्माण का उपयोग करके भी देखा जा सकता है।

 const car = { maker: 'Ford', model: 'Fiesta' } car.drive = function() { console.log(`Driving a ${this.maker} ${this.model} car!`) } car.drive() //Driving a Ford Fiesta car!

Word इसको कीवर्ड करें और एरो फंक्शन करें

आइए, एक ऑब्जेक्ट विधि, एक तीर फ़ंक्शन के रूप में, उपरोक्त उदाहरण को फिर से लिखने का प्रयास करें।

 const car = { maker: 'Ford', model: 'Fiesta', drive: () => {   console.log(`Driving a ${this.maker} ${this.model} car!`) } } car.drive() //Driving a undefined undefined car!

जैसा कि आप देख सकते हैं, कार निर्माता और इसके मॉडल के नामों के बजाय, undefined मान प्रदर्शित किए जाते हैं। तथ्य यह है कि, जैसा कि हमने पहले ही कहा है, this तीर फ़ंक्शन में उस संदर्भ का लिंक है जिसमें फ़ंक्शन शामिल है।

यह तीर एक तीर फ़ंक्शन के लिए बाध्य नहीं हो सकता है, लेकिन आप कर सकते हैं

This इसको बांधकर

जावास्क्रिप्ट में this बंधन की तरह एक अवधारणा है। आप इसे कई तरीकों से कर सकते हैं। उदाहरण के लिए, एक फ़ंक्शन की घोषणा करते समय, आप इस कीवर्ड को bind() पद्धति का उपयोग करके किसी ऑब्जेक्ट में bind() ।

 const car = { maker: 'Ford', model: 'Fiesta' } const drive = function() { console.log(`Driving a ${this.maker} ${this.model} car!`) }.bind(car) drive() //Driving a Ford Fiesta car!

उसी विधि का उपयोग करते हुए, आप किसी अन्य वस्तु को एक वस्तु की विधि से बांध सकते हैं, जैसे कि।

 const car = { maker: 'Ford', model: 'Fiesta', drive() {   console.log(`Driving a ${this.maker} ${this.model} car!`) } } const anotherCar = { maker: 'Audi', model: 'A4' } car.drive.bind(anotherCar)() //Driving a Audi A4 car!

यह बंधन call() और apply() विधियों का उपयोग करके फ़ंक्शन को कॉल करने के चरण में भी आयोजित किया जा सकता है।

 const car = { maker: 'Ford', model: 'Fiesta' } const drive = function(kmh) { console.log(`Driving a ${this.maker} ${this.model} car at ${kmh} km/h!`) } drive.call(car, 100) //Driving a Ford Fiesta car at 100 km/h! drive.apply(car, [100]) //Driving a Ford Fiesta car at 100 km/h!

this पहले तर्क के रूप में इन विधियों को पारित करने के लिए बाध्य है। इन विधियों के बीच का अंतर यह है कि apply() , दूसरे तर्क के रूप में, फ़ंक्शन के पास दिए गए तर्कों के साथ एक सरणी लेता है, और call() तर्कों की एक सूची लेता है।

Hand ब्राउज़र इवेंट हैंडलर्स में इस बाइंडिंग के बारे में

ईवेंटबैक कॉलबैक में, this HTML तत्व की ओर इशारा करता है जिसके साथ ईवेंट हुआ। कॉलबैक में बाँधने के लिए, this रूप में, कुछ और, आप bind() विधि का उपयोग कर सकते हैं। इसका उदाहरण देने के लिए यहां एक उदाहरण दिया गया है।

 <!DOCTYPE html> <html> <body>   <button id="el">Element (this)</button>   <button id="win">Window (this</button>   <script>     const el = document.getElementById("el")     el.addEventListener('click', function () {         alert(this) //object HTMLButtonElement     })     const win = document.getElementById("win")     win.addEventListener('click', function () {         alert(this) //object Window     }.bind(this))   </script> </body> </html>

घटनाओं

ब्राउज़र में जावास्क्रिप्ट एक घटना संचालित प्रोग्रामिंग मॉडल का उपयोग करता है। ये या अन्य क्रियाएं घटनाओं के जवाब में कोड द्वारा की जाती हैं। इस खंड में, हम घटनाओं के बारे में बात करेंगे और उन्हें कैसे संभालेंगे।

एक घटना हो सकती है, उदाहरण के लिए, DOM लोड करने का काम पूरा करना, अतुल्यकालिक अनुरोध के परिणामस्वरूप किया गया डेटा प्राप्त करना, पृष्ठ तत्व पर क्लिक करना, पृष्ठ स्क्रॉल करना, कीबोर्ड से एक निश्चित वर्ण दर्ज करना। वास्तव में, ऐसी कई घटनाएं होती हैं, जिन्हें संसाधित करते समय, पृष्ठ का जेएस कोड आपको उपयोगकर्ताओं के साथ आवेदन की बातचीत में, पेज के तत्वों के साथ, पर्यावरण के साथ जिसमें कोड काम करता है, की एक विस्तृत श्रृंखला को हल करने की अनुमति देता है।

▍ईवेंट हैंडलर

आप ईवेंट हैंडलर का उपयोग करके ईवेंट का जवाब दे सकते हैं, जो फ़ंक्शन होते हैं जिन्हें इवेंट होने पर कॉल किया जाता है।
यदि आवश्यक हो, तो उसी घटना को संसाधित करने के लिए, आप कई हैंडलर पंजीकृत कर सकते हैं जिन्हें यह घटना होने पर बुलाया जाएगा। घटना संचालकों को विभिन्न तरीकों से पंजीकृत किया जा सकता है। ऐसे तीन तरीकों पर विचार करें।

Event अंतर्निहित ईवेंट हैंडलर

आजकल, अंतर्निहित इवेंट हैंडलर शायद ही कभी अपनी सीमाओं के कारण उपयोग किए जाते हैं। पहले, वे बहुत अधिक बार उपयोग किए जाते थे। इस तरह के ईवेंट हैंडलर को सेट करने के लिए, इसका कोड एक विशेष विशेषता के रूप में तत्व के HTML मार्कअप में जोड़ा जाता है। निम्न उदाहरण में, onclick ईवेंट के लिए ऐसा सरल हैंडलर जो बटन क्लिक करने पर होता है, Button 1 लेबल वाले Button 1 को सौंपा जाता है।

 <!DOCTYPE html> <html> <body>   <button onclick="alert('Button 1!')">Button 1</button>   <button onclick="doSomething()">Button 2</button>   <script>       function doSomething(){           const str = 'Button 2!'           console.log(str)           alert(str)       }       </script> </body> </html>

Button 2 के लिए HTML कोड एक समान दृष्टिकोण का उपयोग करता है, लेकिन यह एक फ़ंक्शन को इंगित करता है जिसका कोड एक बटन क्लिक के जवाब में निष्पादित होता है। यह कोड दिए गए स्ट्रिंग को कंसोल में आउटपुट करता है और एक ही टेक्स्ट के साथ एक विंडो प्रदर्शित करता है।

▍ एचटीएमएल एलिमेंट प्रॉपर्टी को हैंडलर सौंपना

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

उदाहरण के लिए, window ऑब्जेक्ट में एक onload , जिसे पेज के HTML कोड को लोड करने के बाद कहा जाता है और इसके लिए आवश्यक सभी अतिरिक्त संसाधन, उदाहरण के लिए, शैली और चित्र। यदि आप इस घटना के लिए एक हैंडलर असाइन करते हैं, तो जब आप इसे कॉल करते हैं, तो आप यह सुनिश्चित कर सकते हैं कि ब्राउज़र ने पृष्ठ की सभी सामग्रियों को लोड किया है, जिसे आप अब प्रोग्राम के साथ काम कर सकते हैं, इस डर के बिना कि पृष्ठ के कुछ तत्व अभी तक लोड नहीं किए गए हैं।

 window.onload = () => {   alert('Hi!') //   }

XHR अनुरोधों को संसाधित करते समय अक्सर इस दृष्टिकोण का उपयोग किया जाता है। इसलिए, एक अनुरोध स्थापित करने के दौरान, आप इसके ऑन्रेडिस्टेटचेंज इवेंट के लिए एक हैंडलर निर्दिष्ट कर सकते हैं, जिसे तब तैयार किया जाएगा जब इसकी तैयार संपत्ति संपत्ति में बदल जाती है। JSON डेटा को किसी सार्वजनिक API से लोड करने के लिए इस दृष्टिकोण का उपयोग करने का एक उदाहरण है।

 <!DOCTYPE html> <html> <body>   <button onclick="loadData()">Start</button>   <script>       function loadData (){           const xhr = new XMLHttpRequest()           const method = 'GET'           const url = 'https://jsonplaceholder.typicode.com/todos/1'           xhr.open(method, url, true)           xhr.onreadystatechange = function () {               if(xhr.readyState === XMLHttpRequest.DONE && xhr.status === 200) {                   console.log(xhr.responseText)               }           }           xhr.send()      }       </script> </body> </html>

यह जांचने के लिए कि क्या किसी हैंडलर को किसी निश्चित घटना को सौंपा गया है, आप ऐसा कर सकते हैं।

 if (window.onload){}

AddEventListener () विधि का प्रयोग

addEventListener() विधि, जिसे हम पहले ही देख चुके हैं, ईवेंट हैंडलर नियत करने का एक आधुनिक तंत्र है। यह आपको एक ही घटना के लिए कई हैंडलर पंजीकृत करने की अनुमति देता है।

 window.addEventListener('load', () => { //  })

ध्यान दें कि IE8 ब्राउज़र (और इसके पुराने संस्करण) addEventListener() विधि का समर्थन नहीं करता है। यह एक समान attachEvent() पद्धति का उपयोग करता है। यदि आपके प्रोग्राम को पुराने ब्राउज़र का समर्थन करना चाहिए, तो इसे ध्यान में रखा जाना चाहिए।

Lers विभिन्न तत्वों को ईवेंट हैंडलर सौंपने के बारे में

आप ईवेंट हैंडलर को "ग्लोबल" ईवेंट्स को संभालने के लिए window ऑब्जेक्ट से कनेक्ट कर सकते हैं, जैसे कीबोर्ड पर बटन दबाना। उसी समय, ईवेंट हैंडलर को व्यक्तिगत HTML तत्वों को सौंपा जाता है, जो इन तत्वों के साथ क्या होता है, उदाहरण के लिए, माउस के साथ उन पर क्लिक करके जवाब देता है। इसलिए, addEventListener() विधि का उपयोग window ऑब्जेक्ट और साधारण तत्वों के साथ दोनों किया जाता है।

▍ घटना वस्तु

पहले पैरामीटर के रूप में, ईवेंट हैंडलर एक ईवेंट ऑब्जेक्ट - Event ले सकता है। इस ऑब्जेक्ट के गुणों का सेट उस घटना पर निर्भर करता है जो इसका वर्णन करता है। यहां, उदाहरण के लिए, एक कोड है जो कि keydown ऑब्जेक्ट के keydown इवेंट का उपयोग करके कीबोर्ड कीस्ट्रोके इवेंट्स को हैंडल करता है।

 <!DOCTYPE html> <html> <body>   <script>       window.addEventListener('keydown', event => {           //              console.log(event.type, event.key)       })       window.addEventListener('mousedown', event => {           //             //0 -  , 2 -            console.log(event.type, event.button, event.clientX, event.clientY)       })   </script> </body> </html>

जैसा कि आप देख सकते हैं, यहां कंसोल के लिए दबाए गए कुंजी के बारे में जानकारी प्रदर्शित करने के लिए, key ऑब्जेक्ट की संपत्ति का उपयोग किया जाता है। type संपत्ति का उपयोग यहां भी किया जाता है, जो घटना के प्रकार को दर्शाता है। इस उदाहरण में, हम वास्तव में एक KeyboardEvent ऑब्जेक्ट के साथ काम कर रहे हैं, जिसका उपयोग कीबोर्ड से संबंधित घटनाओं का वर्णन करने के लिए किया जाता है। यह ऑब्जेक्ट ईवेंट ऑब्जेक्ट का वंशज है। विभिन्न प्रकार की घटनाओं को संभालने के लिए डिज़ाइन की गई वस्तुएँ एक मानक ईवेंट ऑब्जेक्ट की क्षमताओं का विस्तार करती हैं।

एक ही उदाहरण में, माउस इवेंट को संसाधित करने के लिए माउसइवेंट ऑब्जेक्ट का उपयोग किया जाता है। mousedown ईवेंट हैंडलर में, हम क्लिक के समय कंसोल के प्रकार, बटन संख्या ( button प्रॉपर्टी) और पॉइंटर के निर्देशांक ( clientX और clientY ) पर clientY ।

ड्रैगवेंट ऑब्जेक्ट का उपयोग पृष्ठ तत्वों को खींचते समय होने वाली घटनाओं को संभालने के लिए किया जाता है।

अन्य ईवेंट ऑब्जेक्ट्स में उपलब्ध Event ऑब्जेक्ट के गुणों के बीच, हम पहले से ही उल्लेख की गई प्रॉपर्टी और target प्रॉपर्टी का उल्लेख कर सकते हैं, जो DOM तत्व को इंगित करता है, जिस पर ईवेंट हुआ। Event ऑब्जेक्ट में विधियाँ हैं। उदाहरण के लिए, createEvent() विधि आपको नई ईवेंट बनाने की अनुमति देती है।

Sur इवेंट सर्फिंग

निम्नलिखित उदाहरण पर विचार करें।

 <!DOCTYPE html> <html>   <head>       <style>           #container {               height: 100px;               width: 200px;               background-color: blue;           }           #child {               height: 50px;               width: 100px;               background-color: green;           }       </style>   </head>   <body>   <div id="container">       <div id="child">       </div>   </div>   <script>       const contDiv = document.getElementById('container')       contDiv.addEventListener('click', event => {           console.log('container')       })       const chDiv = document.getElementById('child')       chDiv.addEventListener('click', event => {           console.log('child')       })       window.addEventListener('click', event => {           console.log('window')       })       </script> </body> </html>

यदि आप ब्राउज़र में इस कोड के साथ पृष्ठ खोलते हैं, तो कंसोल खोलें और पृष्ठ के मुक्त क्षेत्र में पहले माउस को क्लिक करें, फिर नीले आयत में, और फिर हरे रंग में, निम्नलिखित कंसोल में मिलेगा:

 window container window child container window

घटना बुदबुदाई

यहां जो देखा जा सकता है उसे इवेंट बबलिंग कहा जाता है। अर्थात्, बच्चे तत्व पर होने वाली घटना मूल तत्व तक फैली हुई है। यह प्रक्रिया तब तक जारी रहती है जब तक कि घटना "शीर्ष" तत्व तक नहीं पहुंच जाती। यदि जिन तत्वों के साथ पॉप-अप इवेंट पास होता है, उनके अनुरूप हैंडलर परिभाषित होते हैं, उन्हें इवेंट वितरण के आदेश के अनुसार कहा जाएगा।

stopPropagation() ऑब्जेक्ट के stopPropagation() पद्धति का उपयोग करके इवेंट stopPropagation() रोका जा सकता है। उदाहरण के लिए, यदि यह आवश्यक है कि, child तत्व पर क्लिक करने के बाद, संबंधित घटना आगे नहीं फैलती है, तो हमें उस कोड को फिर से लिखना होगा, जिसमें हम click इवेंट हैंडलर को निम्नानुसार असाइन करते click ।

 chDiv.addEventListener('click', event => {   console.log('child')   event.stopPropagation() })

, , — , — container , — child , .

 window container window child

▍

, .

load

load window . , , HTML- body .

click . dblclick — . click dblclick , click , — dblclick . mousedown , mousemove , mouseup , . , mousemove , , , . , - , . .

keydown . , . — keyup .

scroll

scroll window . , , , window.scrollY .

, , mousemove , .

mousemove scroll . - . . «» (throttling), Lodash . , , , , . .

 let cached = null window.addEventListener('mousemove', event => {   if (!cached) {       setTimeout(() => {           //     cached           console.log(cached.clientX, cached.clientY)           cached = null           }, 100)   }   cached = event })

, mousemove , 100 .

ES-

ES6 , ES-. , , -, , Node.js, .

, . , , . , , .

Node.js CommonJS. , ES-, , . , , ES-, , , , . , caniuse.com , 2018 ES- 80%.

ES- Node.js.

▍ ES-

Node.js ES- .

 import package from 'module-name'

CommonJS- .

 const package = require('module-name')

, JavaScript-, - . यह export कीवर्ड का उपयोग करके किया जाता है। , , , , uppercase.js . .

 export default str => str.toUpperCase()

, . .
( , ) .

HTML- , <script> type="module" .

 <script type="module" src="index.js"></script>

, (defer) . , , uppercase.js , , , . -. , -. , VSCode, Live Server ( — ritwickdey.liveserver).

 <!DOCTYPE html> <html> <head> </head> <body>   <script type="module">     import toUpperCase from './uppercase.js'     console.log(toUpperCase('hello'))   </script> </body> </html>

HELLO .

URL.

 import toUpperCase from 'https://flavio-es-modules-example.glitch.me/uppercase.js'

, , ./ / .

▍

, .

 export default str => str.toUpperCase()

 const a = 1 const b = 2 const c = 3 export { a, b, c }

module.js , , , .

 <html> <head> </head> <body>   <script type="module">     import * as m from './module.js'     console.log(ma, mb, mc)   </script> </body> </html>

1 2 3 .

, , .

 import { a } from './module.js' import { a, b } from './module.js'

, , .

 console.log(a)

 import { a, b as two } from './module.js'

, , , , . module.js .

 const a = 1 const b = 2 const c = 3 export { a, b, c } export default () => console.log('hi')

 import sayHi, { a } from './module.js' console.log(a) sayHi()

▍CORS

CORS . , CORS, ( Access-Control-Allow-Origin: * ).

▍ nomodule

, , , script , nomodule . , , .

 <script type="module" src="module.js"></script> <script nomodule src="fallback.js"></script>

▍ ES6 WebPack

ES6 — , , ECMAScript. , , , , . , WebPack, , , .

▍ CommonJS

, Node.js CommonJS. , . CommonJS npm.

CommonJS-, , . , up-node.js .

 exports.uppercase = str => str.toUpperCase()

, .

 const up = require('./up-node.js') console.log(up.uppercase('hello'))

HELLO .

, npm, , .

 const package = require('module-name')

CommonJS , . .

CommonJS- .

 exports.a = 1 exports.b = 2 exports.c = 3

, .

 const { a, b, c } = require('./up-node.js')

, JavaScript — . Math , . , , JS- .

▍

(+)

+ . :

 const three = 1 + 2 //3 const four = three + 1 //4

, , , .

 'three' + 1 // three1

(-)

 const two = 4 - 2 //2

(/)

 20 / 5 //4 20 / 7 //2.857142857142857

0, . Infinity ( ) - Infinity ( ).

 1 / 0 //Infinity -1 / 0 //-Infinity

(%)

% , .

 20 % 5 //0 20 % 7 //6

0 NaN (Not a Number — ).

 1 % 0 //NaN -1 % 0 //NaN

(*)

 1 * 2 //2 -1 * 2 //-2

(**)

, .

 1 ** 2 //1 2 ** 1 //2 2 ** 2 //4 2 ** 8 //256 8 ** 2 //64

▍

(++)

++ 1 . .

— 1 , .

 let x = 0 ++x //1 x //1

— , .

 let x = 0 x++ //0 x //1

(--)

-- ++ , 1 , .

 let x = 0 x-- //0 x //-1 --x //-2

(-)

 let x = 2 -x //-2 x //2

(+)

, , . — .

 let x = 2 +x //2 x = '2' +x //2 x = '2a' +x //NaN

▍

JavaScript, ( = ), , . , , += .

 let x = 2 x += 3 x //5

: « , , , , ». , .

 let x = 2 x = x + 3 x //5

-=
*=
/=
%=
**=

▍

. , .

 const a = 1 * 2 + 5 / 2 % 2

2.5 . , . , .

- + ++ -- — ,
/ % — , ,
+ - —
= += -= *= /= %= **= —

, , . , .

 const a = 1 * 2 + 5 / 2 % 2 const a = 2 + 2.5 % 2 const a = 2 + 0.5 const a = 2.5

. .

 const a = 1 * (2 + 5) / 2 % 2

1.5 .

▍ Math

Math , . . , .

, , Math.E — , e, Math.PI — , π.

 Math.E // 2.718281828459045 Math.PI //3.141592653589793

Math.abs() —
Math.ceil() — , ,
Math.cos() — ,
Math.floor() — , ,
Math.max() —
Math.min() —
Math.random() — [0, 1) ( 1)
Math.round() —
Math.sqrt() —

▍

JavaScript , .

== — . .
!= — .

, . , , , .

=== —
!== —

< — «»
> — «».
<= — « ».
>= — « ».

, .

 1 === true //false 1 == true //true

, , 1 true . 1 true , 1 true .

, , . Node.js. , :

PDF- Node.js.

परिणाम

, this, , , . , ES6.

प्रिय पाठकों! , JavaScript?

जावास्क्रिप्ट गाइड भाग 7: सख्त मोड, यह कीवर्ड, घटनाओं, मॉड्यूल, गणित