ब्राउज़र आधारित एप्लिकेशन बनाते समय, हम उपयोगकर्ता के लिए एक ग्राफिकल यूजर इंटरफेस (जीयूआई) प्रदान करते हैं, जो कि हमने जो बनाया है, उसके साथ इंटरैक्ट करने के लिए। ब्राउज़र के साथ बातचीत करने का सबसे आम तरीका विभिन्न तत्वों में क्लिक और टाइपिंग है। एक डेवलपर के रूप में हमारे सामने जो चुनौती है, वह यह है कि हम नहीं जानते कि वे कब इन ऑपरेशनों को करने जा रहे हैं!
[ईवेंट संचालित प्रोग्रामिंग] (https://en.wikipedia.org/wiki/Event-driven_programming) प्रोग्रामिंग का प्रकार जो हमें अपने GUI को बनाने के लिए करने की आवश्यकता है। यदि हम इस वाक्यांश को थोड़ा तोड़ते हैं, तो हम यहाँ मुख्य शब्द ** ईवेंट ** देखते हैं। [ईवेंट](https://www.merriam-webster.com/dEDIA/event), मरियम-वेबस्टर के अनुसार, "कुछ ऐसा होता है" के रूप में परिभाषित किया गया है। यह हमारी स्थिति का पूरी तरह से वर्णन करता है। हम जानते हैं कि कुछ ऐसा होने जा रहा है जिसके लिए हम प्रतिक्रिया में कुछ कोड निष्पादित करना चाहते हैं, लेकिन हम नहीं जानते कि यह कब होगा।
जिस तरह से हम कोड के एक भाग को चिह्नित करते हैं जिसे हम निष्पादित करना चाहते हैं वह एक फ़ंक्शन बनाकर है। जब हम [प्रक्रियात्मक प्रोग्रामिंग] (https://en.wikipedia.org/wiki/Procedural_programming) के बारे में सोचते हैं, तो कार्यों को एक विशिष्ट क्रम में बुलाया जाता है। यही बात इवेंट संचालित प्रोग्रामिंग के साथ सही होने वाली है। अंतर **कैसे** कार्यों को कहा जाएगा।
ईवेंट्स (बटन क्लिकिंग, टाइपिंग आदि) को संभालने के लिए, हम **ईवेंट श्रोताओं** को रजिस्टर करते हैं। एक ईवेंट श्रोता एक ऐसा फंक्शन है जो किसी घटना को होने के लिए सुनता है और प्रतिक्रिया में निष्पादित करता है। इवेंट श्रोता यूआई को अपडेट कर सकते हैं, सर्वर पर कॉल कर सकते हैं, या उपयोगकर्ता की कार्रवाई के जवाब में और कुछ भी किया जा सकता है। हम एक घटना श्रोता को [addEventListener](https://developer.mozilla.org/docs/Web/API/EventTarget/addEventListener) का उपयोग करके, और निष्पादित करने के लिए एक फ़ंक्शन प्रदान करके जोड़ते हैं।
> **ध्यान दें:** यह ध्यान देने योग्य है कि घटना श्रोताओं को बनाने के कई तरीके हैं। आप अनाम फ़ंक्शंस का उपयोग कर सकते हैं, या नामित नाम बना सकते हैं। आप विभिन्न शॉर्टकट का उपयोग कर सकते हैं, जैसे कि `click` प्रॉपर्टी सेट करना, या `addEventListener` का उपयोग करना। हमारे अभ्यास में हम `addEventLister` और अनाम कार्यों पर ध्यान केंद्रित करने जा रहे हैं, क्योंकि यह संभवतः सबसे आम तकनीक वेब डेवलपर्स का उपयोग है। यह सबसे अधिक लचीली भी है, क्योंकि सभी घटनाओं के लिए `addEventListener` काम करता है, और इवेंट नाम को एक पैरामीटर के रूप में प्रदान किया जा सकता है।
एप्लिकेशन बनाते समय आपको सुनने के लिए [दर्जनों इवेंट](https://developer.mozilla.org/docs/Web/Events) उपलब्ध हैं। मूल रूप से एक पृष्ठ पर एक उपयोगकर्ता कुछ भी करता है, एक घटना को बढ़ाता है, जो आपको यह सुनिश्चित करने के लिए बहुत शक्ति देता है कि वे आपकी इच्छा का अनुभव प्राप्त करें। सौभाग्य से, आपको आम तौर पर केवल कुछ मुट्ठी भर घटनाओं की आवश्यकता होगी। यहां कुछ सामान्य बातें हैं (दोनों में से एक का उपयोग हम अपने खेल को बनाते समय करेंगे)
हम जावास्क्रिप्ट में ईवेंट कैसे काम करते हैं, यह जानने के लिए एक गेम बनाने जा रहे हैं। हमारा खेल एक खिलाड़ी के टाइपिंग कौशल का परीक्षण करने जा रहा है, जो सभी डेवलपर्स के पास सबसे कम क्षमता वाले कौशल में से एक है। हम सभी को अपनी टाइपिंग का अभ्यास करना चाहिए! खेल का सामान्य प्रवाह इस तरह दिखेगा:
हमें कुल तीन फ़ाइलों की आवश्यकता है: **index.html**, **script.js** और **style.css**. आइए उन लोगों की स्थापना करके शुरू करें, जो हमारे लिए जीवन को थोड़ा आसान बनाते हैं।
यदि हम आवश्यकताओं का पता लगाते हैं, तो हम जानते हैं कि हमें अपने HTML पृष्ठ पर मुट्ठी भर तत्वों की आवश्यकता है। यह एक रेसिपी की तरह है, जहाँ हमें कुछ सामग्री की आवश्यकता होती है:
उनमें से प्रत्येक को आईडी की आवश्यकता होगी ताकि हम अपने जावास्क्रिप्ट में उनके साथ काम कर सकें। हम सीएसएस और जावास्क्रिप्ट फ़ाइलों के संदर्भ भी जोड़ेंगे जिन्हें हम बनाने जा रहे हैं।
यह देखना हमेशा सबसे अच्छा होता है कि कैसे चीजें देखें। चलो हमारे आवेदन का शुभारंभ करें। विजुअल स्टूडियो कोड के लिए एक अद्भुत एक्सटेंशन है जिसे [लाइव सर्वर](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer) कहा जाता है, जो आपके आवेदन को सहेजने और हर बार सहेजने के लिए ब्राउज़र को ताज़ा करेगा।
हमारे HTML के निर्माण के साथ, मुख्य स्टाइलिंग के लिए CSS जोड़ते हैं। हमें उस शब्द को हाइलाइट करने की आवश्यकता है जो खिलाड़ी को टाइप करना चाहिए, और यदि उन्होंने टाइप किया है तो टेक्स्टबॉक्स को रंगीन करें। हम इसे दो वर्गों के साथ करेंगे।
'When you have eliminated the impossible, whatever remains, however improbable, must be the truth.',
'There is nothing more deceptive than an obvious fact.',
'I ought to know by this time that when a fact appears to be opposed to a long train of deductions it invariably proves to be capable of bearing some other interpretation.',
'I never make exceptions. An exception disproves the rule.',
'What one man can invent another can discover.',
'Nothing clears up a case so much as stating it to another person.',
'Education never ends, Watson. It is a series of lessons, with the greatest for the last.',
];
// store the list of words and the index of the word the player is currently typing
> **नोट:** हम तत्वों को पुनः प्राप्त कर सकते हैं जब भी हम `document.getElementById` का उपयोग करके कोड में चाहते हैं। इस तथ्य के कारण कि हम नियमित रूप से इन तत्वों को संदर्भित करने जा रहे हैं, हम स्थिरांक के साथ स्थिरांक का उपयोग करके स्थिरांक से बचने जा रहे हैं। फ्रेमवर्क जैसे कि [Vue.js](https://vuejs.org/) या [रिएक्ट](https://reactjs.org/) आपको अपने कोड को बेहतर बनाने में मदद कर सकते हैं।
गेम शुरू करने के लिए, प्लेयर स्टार्ट पर क्लिक करेगा। बेशक, हम नहीं जानते कि वे कब शुरू करने जा रहे हैं। यह वह जगह है जहाँ एक [इवेंट श्रोता](https://developer.mozilla.org/docs/Web/API/EventTarget/addEventListener) खेल में आता है। एक ईवेंट श्रोता हमें कुछ होने (किसी घटना) के लिए सुनने और प्रतिक्रिया में कोड निष्पादित करने की अनुमति देगा। हमारे मामले में, हम उस कोड को निष्पादित करना चाहते हैं जब उपयोगकर्ता प्रारंभ पर क्लिक करता है।
जब उपयोगकर्ता **प्रारंभ** पर क्लिक करता है, तो हमें एक उद्धरण का चयन करना होगा, उपयोगकर्ता इंटरफ़ेस सेटअप करना और वर्तमान शब्द और समय के लिए सेटअप ट्रैकिंग करना होगा। नीचे दिए गए जावास्क्रिप्ट को आपको जोड़ना होगा; हम स्क्रिप्ट ब्लॉक के ठीक बाद इस पर चर्चा करते हैं।
- [math.floor](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Math/floor) और [math.random](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Math/random) का उपयोग करके हम `quotes` सरणी से एक उद्धरण का चयन करने के लिए अनुमति देते हैं।
- हम `quote` को `words` की एक सरणी में बदलते हैं, इसलिए हम उस खिलाड़ी को ट्रैक कर सकते हैं जो खिलाड़ी वर्तमान में टाइप कर रहा है
-`wordIndex` 0 पर सेट है, क्योंकि खिलाड़ी पहले शब्द पर शुरू होगा
- यूआई सेटअप करें
-`spanWords` की एक सरणी बनाएं, जिसमें `span` तत्व के अंदर प्रत्येक शब्द होता है
- यह हमें प्रदर्शन पर शब्द को उजागर करने की अनुमति देगा
- एक स्ट्रिंग बनाने के लिए `join` करने के लिए अरै का उपयोग करें जिसे हम `quoteElement` पर `innerHTML` अपडेट करने के लिए उपयोग कर सकते हैं
- यह खिलाड़ी को बोली प्रदर्शित करेगा
- पीले रंग के रूप में हाइलाइट करने के लिए `highlight` के लिए पहले `span` तत्व का `className` सेट करें
-`messageElement` को `''` पर सेट करके `messageElement` को साफ करें
- टेक्स्टबॉक्स सेट करें
-`typedValueElement` पर वर्तमान `value` को साफ़ करें
खिलाड़ी के प्रकार के रूप में, एक `input` घटना को उठाया जाएगा। यह ईवेंट श्रोता यह सुनिश्चित करने के लिए जांच करेगा कि खिलाड़ी शब्द को सही ढंग से टाइप कर रहा है, और गेम की वर्तमान स्थिति को संभाल सकता है। **script.js** पर लौटकर, निम्नलिखित कोड को अंत में जोड़ें। हम इसे बाद में तोड़ देंगे।
कोड को तोड़ दो! हम वर्तमान शब्द को पकड़कर शुरू करते हैं और खिलाड़ी ने इस प्रकार अब तक टाइप किया है। फिर हमारे पास झरना तर्क है, जहां हम जांचते हैं कि क्या उद्धरण पूरा है, शब्द पूरा है, शब्द सही है, या (अंत में), अगर कोई त्रुटि है।
- उद्धरण पूर्ण है, `typedValue` द्वारा `currentWord` के बराबर होने का संकेत दिया गया है, और `wordIndex` को `words` की `length` से कम के बराबर किया जा रहा है
- वर्तमान समय से `startTime` घटाकर` elapsedTime` की गणना करें
- मिलीसेकंड से सेकंड में परिवर्तित करने के लिए `elapsedTime` को 1,000 से विभाजित करें
- एक सफलता संदेश प्रदर्शित करें
- शब्द पूरा हो गया है, जो `typedValue` द्वारा एक स्थान के साथ समाप्त होने का संकेत है (एक शब्द का अंत) और `typedValue` को` currentWord` के बराबर किया जा रहा है
- अगले शब्द को टाइप करने की अनुमति देने के लिए `typedElement` to `''` पर `value` सेट करें
- वृद्धि `wordIndex` अगले शब्द पर ले जाने के लिए
- प्रदर्शन को फिर से प्रदर्शित करने के लिए `className` को `''` के लिए `quoteElement` के सभी `childNodes` के माध्यम से लूप करें
- वर्तमान शब्द के `className` को टाइप करने के लिए अगले शब्द के रूप में फ़्लैग करने के लिए `highlight` पर सेट करें
- वर्तमान में शब्द सही ढंग से टाइप किया गया है (लेकिन पूरा नहीं), `currentWord` द्वारा इंगित `typedValue` से शुरू हुआ
- सुनिश्चित करें कि `typeNalueElement` को `className` को क्लीयर करके डिफ़ॉल्ट के रूप में प्रदर्शित किया गया है
- यदि हमने इसे दूर किया है, तो हमारे पास एक त्रुटि है
-`className` पर `typedValueElement` से `error` सेट करे
आपने इसे अंत तक बना दिया है! अंतिम चरण हमारे आवेदन कार्यों को सुनिश्चित करना है। इसे आजमा कर देखें! अगर वहाँ त्रुटियां हैं तो चिंता न करें; **सभी डेवलपर्स** में त्रुटियां हैं। संदेशों की जांच करें और आवश्यकतानुसार डिबग करें।
वेब ब्राउज़र के माध्यम से डेवलपर के लिए [उपलब्ध सभी घटनाओं](https://developer.mozilla.org/docs/Web/Events) को पढ़ें, और उन परिदृश्यों पर विचार करें जिनमें आप प्रत्येक का उपयोग करेंगे।
