Un développeur Web peut avoir besoin de nombreux outils qui se trouvent sur le [Documentation MDN pour l'outillage côté client](https://developer.mozilla.org/en-US/docs/Learn/Tools_and_testing/Understanding_client-side_tools/Overview). Sélectionnez 3 outils non traités dans la leçon, expliquez pourquoi un développeur Web l'utiliserait, recherchez un outil qui relève de cette catégorie et partagez sa documentation. N'utilisez pas le même exemple d'outil sur les documents MDN.
Un développeur Web peut avoir besoin de nombreux outils qui se trouvent sur le [Documentation MDN pour l'outillage côté client](https://developer.mozilla.org/docs/Learn/Tools_and_testing/Understanding_client-side_tools/Overview). Sélectionnez 3 outils non traités dans la leçon, expliquez pourquoi un développeur Web l'utiliserait, recherchez un outil qui relève de cette catégorie et partagez sa documentation. N'utilisez pas le même exemple d'outil sur les documents MDN.
Er zijn veel tools die een webontwikkelaar nodig heeft en die staan in de [MDN-documentatie voor client-side tooling](https://developer.mozilla.org/en-US/docs/Learn/Tools_and_testing/Understanding_client-side_tools/Overview). Selecteer 3 tools die niet in de les worden behandeld, leg uit waarom een webontwikkelaar deze zou gebruiken en zoek naar een tool die onder deze categorie valt en deel de documentatie ervan. Gebruik niet hetzelfde toolvoorbeeld voor MDN-documenten.
Er zijn veel tools die een webontwikkelaar nodig heeft en die staan in de [MDN-documentatie voor client-side tooling](https://developer.mozilla.org/docs/Learn/Tools_and_testing/Understanding_client-side_tools/Overview). Selecteer 3 tools die niet in de les worden behandeld, leg uit waarom een webontwikkelaar deze zou gebruiken en zoek naar een tool die onder deze categorie valt en deel de documentatie ervan. Gebruik niet hetzelfde toolvoorbeeld voor MDN-documenten.
Msanidi wa wavuti anaweza kuhitaji zana nyingi ambazo zinaweza kupatikana kwenye [Hati ya MDN ya Utengenezaji Upande wa Mteja](https://developer.mozilla.org/en-US/docs/Learn/Tools_and_testing/Understanding_client-side_tools/Overview).
Msanidi wa wavuti anaweza kuhitaji zana nyingi ambazo zinaweza kupatikana kwenye [Hati ya MDN ya Utengenezaji Upande wa Mteja](https://developer.mozilla.org/docs/Learn/Tools_and_testing/Understanding_client-side_tools/Overview).
Chagua zana 3 ambazo hazijafunikwa kwenye somo, eleza ni kwanini msanidi wa wavuti atatumia, pata zana ambayo iko kwenye kitengo hiki, na ushiriki nyaraka zake. Usitumie zana sawa ya sampuli kwenye hati za MDN.
प्रत्येक वेब डेवलपर को स्क्रीन रीडर के साथ खुद को परिचित करना चाहिए। जैसा कि ऊपर प्रकाश डाला गया है, यह वह क्लाइंट है जिसे आपके उपयोगकर्ता उपयोग करेंगे। बहुत कुछ उसी तरह से जिससे आप परिचित हैं कि ब्राउज़र कैसे संचालित होता है, आपको यह सीखना चाहिए कि स्क्रीन रीडर कैसे संचालित होता है। सौभाग्य से, स्क्रीन रीडर अधिकांश ऑपरेटिंग सिस्टम में निर्मित होते हैं।
कुछ ब्राउज़रों में अंतर्निहित टूल और एक्सटेंशन भी होते हैं, जो टेक्स्ट को जोर से पढ़ सकते हैं या कुछ बुनियादी नौवहन सुविधाएँ भी प्रदान कर सकते हैं, जैसे कि [ये एक्सेसिबिलिटी-केंद्रित एज ब्राउज़र टूल](https://support.microsoft.com/en-us/help/4000734/microsoft-edge-accessibility-features)। ये महत्वपूर्ण एक्सेसिबिलिटी टूल भी हैं, लेकिन स्क्रीन रीडर्स से बहुत अलग तरीके से काम करते हैं और स्क्रीन रीडर टेस्टिंग टूल्स के लिए इनसे गलती नहीं होनी चाहिए।
कुछ ब्राउज़रों में अंतर्निहित टूल और एक्सटेंशन भी होते हैं, जो टेक्स्ट को जोर से पढ़ सकते हैं या कुछ बुनियादी नौवहन सुविधाएँ भी प्रदान कर सकते हैं, जैसे कि [ये एक्सेसिबिलिटी-केंद्रित एज ब्राउज़र टूल](https://support.microsoft.com/help/4000734/microsoft-edge-accessibility-features)। ये महत्वपूर्ण एक्सेसिबिलिटी टूल भी हैं, लेकिन स्क्रीन रीडर्स से बहुत अलग तरीके से काम करते हैं और स्क्रीन रीडर टेस्टिंग टूल्स के लिए इनसे गलती नहीं होनी चाहिए।
✅ स्क्रीन रीडर और ब्राउज़र टेक्स्ट रीडर आज़माएं। विंडोज पर [नैरेटर](https://support.microsoft.com/en-us/windows/complete-guide-to-narrator-e4397a0d-ef4f-b386-d8ae-c17bf109bdb1) डिफ़ॉल्ट रूप से शामिल है, और [JAWS](https://webaim.org/articles/jaws/) और [NVDA](https://www.nvaccess.org/about-nvda/) भी इंस्टॉल किए जा सकते हैं। MacOS और iOS पर, [VoiceOver](https://support.apple.com/guide/voiceover/welcome/10) डिफ़ॉल्ट रूप से स्थापित है।
✅ स्क्रीन रीडर और ब्राउज़र टेक्स्ट रीडर आज़माएं। विंडोज पर [नैरेटर](https://support.microsoft.com/windows/complete-guide-to-narrator-e4397a0d-ef4f-b386-d8ae-c17bf109bdb1) डिफ़ॉल्ट रूप से शामिल है, और [JAWS](https://webaim.org/articles/jaws/) और [NVDA](https://www.nvaccess.org/about-nvda/) भी इंस्टॉल किए जा सकते हैं। MacOS और iOS पर, [VoiceOver](https://support.apple.com/guide/voiceover/welcome/10) डिफ़ॉल्ट रूप से स्थापित है।
### ज़ूम
आमतौर पर दृष्टि दोष वाले लोगों द्वारा उपयोग किया जाने वाला एक अन्य उपकरण जूमिंग है। जूमिंग का सबसे मूल प्रकार स्थिर ज़ूम है, जिसे 'कंट्रोल + प्लस साइन (+)' या स्क्रीन रिज़ॉल्यूशन कम करके नियंत्रित किया जाता है। इस प्रकार का ज़ूम पूरे पृष्ठ को आकार देने का कारण बनता है, इसलिए एक अच्छा उपयोगकर्ता अनुभव प्रदान करने के लिए [उत्तरदायी डिज़ाइन](https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Responsive_Design) का उपयोग करना महत्वपूर्ण है बढ़े हुए ज़ूम स्तर पर।
आमतौर पर दृष्टि दोष वाले लोगों द्वारा उपयोग किया जाने वाला एक अन्य उपकरण जूमिंग है। जूमिंग का सबसे मूल प्रकार स्थिर ज़ूम है, जिसे 'कंट्रोल + प्लस साइन (+)' या स्क्रीन रिज़ॉल्यूशन कम करके नियंत्रित किया जाता है। इस प्रकार का ज़ूम पूरे पृष्ठ को आकार देने का कारण बनता है, इसलिए एक अच्छा उपयोगकर्ता अनुभव प्रदान करने के लिए [उत्तरदायी डिज़ाइन](https://developer.mozilla.org/docs/Learn/CSS/CSS_layout/Responsive_Design) का उपयोग करना महत्वपूर्ण है बढ़े हुए ज़ूम स्तर पर।
एक अन्य प्रकार का ज़ूम स्क्रीन और पैन के एक क्षेत्र को बढ़ाने के लिए विशेष सॉफ़्टवेयर पर निर्भर करता है, बहुत कुछ वास्तविक आवर्धक कांच का उपयोग करने जैसा। विंडोज पर, [Magnifier](https://support.microsoft.com/en-us/windows/use-magnifier-to-make-things-on-the-screen-easier-to-see-414948ba-8b1bc-d3bd-8615-0e5e32204198) में बनाया गया है और [ZoomText](https://www.freedomscientific.com/training/zoomtext/getting-started/) अधिक सुविधाओं और एक बड़ा उपयोगकर्ता आधार के लिए एक तृतीय-पक्ष आवर्धन सॉफ्टवेयर है। दोनों macOS और iOS में एक अंतर्निहित आवर्धन सॉफ्टवेयर होता है जिसे [ज़ूम](https://www.apple.com/accessibility/mac/vision/) कहा जाता है।
एक अन्य प्रकार का ज़ूम स्क्रीन और पैन के एक क्षेत्र को बढ़ाने के लिए विशेष सॉफ़्टवेयर पर निर्भर करता है, बहुत कुछ वास्तविक आवर्धक कांच का उपयोग करने जैसा। विंडोज पर, [Magnifier](https://support.microsoft.com/windows/use-magnifier-to-make-things-on-the-screen-easier-to-see-414948ba-8b1bc-d3bd-8615-0e5e32204198) में बनाया गया है और [ZoomText](https://www.freedomscientific.com/training/zoomtext/getting-started/) अधिक सुविधाओं और एक बड़ा उपयोगकर्ता आधार के लिए एक तृतीय-पक्ष आवर्धन सॉफ्टवेयर है। दोनों macOS और iOS में एक अंतर्निहित आवर्धन सॉफ्टवेयर होता है जिसे [ज़ूम](https://www.apple.com/accessibility/mac/vision/) कहा जाता है।
### कंट्रास्ट चेकर्स
कलर-ब्लाइंड यूजर्स या ऐसे लोग जिन्हें कम कंट्रास्ट कलर देखने में दिक्कत होती है, उनकी जरूरतों का जवाब देने के लिए वेब साइट्स पर रंगों को सावधानी से चुना जाना चाहिए।
✅ सामान्य तौर पर, ऊपर वर्णित शब्दार्थ मार्कअप का उपयोग ARIA के उपयोग को बढ़ा देता है, लेकिन कभी-कभी विभिन्न HTML विजेट के लिए कोई शब्दार्थ समतुल्य नहीं होता है। एक अच्छा उदाहरण एक पेड़ है। एक पेड़ के लिए कोई HTML समतुल्य नहीं है, इसलिए आप इस तत्व के लिए एक उचित भूमिका और aria मान के साथ जेनेरिक `<div>` की पहचान करते हैं। [ARIA पर MDN प्रलेखन](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA) में अधिक उपयोगी जानकारी है।
✅ सामान्य तौर पर, ऊपर वर्णित शब्दार्थ मार्कअप का उपयोग ARIA के उपयोग को बढ़ा देता है, लेकिन कभी-कभी विभिन्न HTML विजेट के लिए कोई शब्दार्थ समतुल्य नहीं होता है। एक अच्छा उदाहरण एक पेड़ है। एक पेड़ के लिए कोई HTML समतुल्य नहीं है, इसलिए आप इस तत्व के लिए एक उचित भूमिका और aria मान के साथ जेनेरिक `<div>` की पहचान करते हैं। [ARIA पर MDN प्रलेखन](https://developer.mozilla.org/docs/Web/Accessibility/ARIA) में अधिक उपयोगी जानकारी है।
@ -30,7 +30,7 @@ Sommige browsers hebben ook ingebouwde tools en extensies die tekst hardop kunne
### Zoom
Een ander hulpmiddel dat vaak wordt gebruikt door mensen met een visuele beperking, is zoomen. De meest basale manier van zoomen is statische zoom, bestuurd via `Control + plusteken (+)` of door de schermresolutie te verlagen. Dit type zoom zorgt ervoor dat het formaat van de hele pagina wordt aangepast, dus het gebruik van [responsive design](https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Responsive_Design) is belangrijk om een goede gebruikerservaring te bieden bij verhoogde zoomniveaus.
Een ander hulpmiddel dat vaak wordt gebruikt door mensen met een visuele beperking, is zoomen. De meest basale manier van zoomen is statische zoom, bestuurd via `Control + plusteken (+)` of door de schermresolutie te verlagen. Dit type zoom zorgt ervoor dat het formaat van de hele pagina wordt aangepast, dus het gebruik van [responsive design](https://developer.mozilla.org/docs/Learn/CSS/CSS_layout/Responsive_Design) is belangrijk om een goede gebruikerservaring te bieden bij verhoogde zoomniveaus.
Een ander type zoom is afhankelijk van gespecialiseerde software om een deel van het scherm te vergroten en te pannen, net zoals bij het gebruik van een echt vergrootglas. Op Windows is [Magnifier](https://support.microsoft.com/nl-nl/windows/vergrootglas-gebruiken-voor-een-betere-zichtbaarheid-op-het-scherm-414948ba-8b1c-d3bd-8615-0e5e32204198) ingebouwd en [ZoomText](https://www.freedomscientific.com/training/zoomtext/getting-started/) is vergrotingssoftware van derden met meer functies en een groter gebruikersbestand. Zowel macOS als iOS hebben ingebouwde vergrotingssoftware genaamd [Zoom](https://www.apple.com/nl/accessibility/vision/).
@ -123,7 +123,7 @@ Stelt u de volgende pagina voor:
In dit voorbeeld is het zinvol om de tekst van de beschrijving en volgorde te dupliceren voor iemand die een browser gebruikt. Iemand die een schermlezer gebruikt, hoort echter alleen de woorden *beschrijving* en *volgorde* herhaald zonder context.
Om dit soort scenario's te ondersteunen, ondersteunt HTML een set attributen die bekend staan als [Accessible Rich Internet Applications (ARIA)](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA). Met deze attributen kunt u aanvullende informatie verstrekken aan schermlezers.
Om dit soort scenario's te ondersteunen, ondersteunt HTML een set attributen die bekend staan als [Accessible Rich Internet Applications (ARIA)](https://developer.mozilla.org/docs/Web/Accessibility/ARIA). Met deze attributen kunt u aanvullende informatie verstrekken aan schermlezers.
> **OPMERKING**: Zoals veel aspecten van HTML, kan de ondersteuning van browser en schermlezer variëren. De meeste mainline-clients ondersteunen echter ARIA-attributen.
@ -133,7 +133,7 @@ U kunt `aria-label` gebruiken om de link te beschrijven als het formaat van de p
✅ Over het algemeen vervangt het gebruik van semantische opmaak zoals hierboven beschreven het gebruik van ARIA, maar soms is er geen semantisch equivalent voor verschillende HTML-widgets. Een goed voorbeeld is een boom. Er is geen HTML-equivalent voor een boomstructuur, dus identificeert u de generieke `<div>` voor dit element met een juiste rol en aria-waarden. De [MDN-documentatie over ARIA](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA) bevat meer nuttige informatie.
✅ Over het algemeen vervangt het gebruik van semantische opmaak zoals hierboven beschreven het gebruik van ARIA, maar soms is er geen semantisch equivalent voor verschillende HTML-widgets. Een goed voorbeeld is een boom. Er is geen HTML-equivalent voor een boomstructuur, dus identificeert u de generieke `<div>` voor dit element met een juiste rol en aria-waarden. De [MDN-documentatie over ARIA](https://developer.mozilla.org/docs/Web/Accessibility/ARIA) bevat meer nuttige informatie.
This lesson covers the basics of JavaScript, the language that provides interactivity on the web.
> You can take this lesson on [Microsoft Learn](https://docs.microsoft.com/en-us/learn/modules/web-development-101-variables/?WT.mc_id=academic-13441-cxa)!
> You can take this lesson on [Microsoft Learn](https://docs.microsoft.com/learn/modules/web-development-101-variables/?WT.mc_id=academic-13441-cxa)!
[](https://youtube.com/watch?v=JNIXfGiDWM8 "Variables in JavaScript")
Cette leçon couvre les bases de JavaScript, le language qui permet l'interactivité sur le web.
> Vous pouvez suivre cette leçon sur [Microsoft Learn](https://docs.microsoft.com/en-us/learn/modules/web-development-101-variables/?WT.mc_id=academic-13441-cxa)!
> Vous pouvez suivre cette leçon sur [Microsoft Learn](https://docs.microsoft.com/learn/modules/web-development-101-variables/?WT.mc_id=academic-13441-cxa)!
[](https://youtube.com/watch?v=JNIXfGiDWM8 "Variables in JavaScript")
✅ एक चर को 'सत्य' माना जा सकता है यदि यह एक बूलियन `true` का मूल्यांकन करता है। दिलचस्प रूप से, जावास्क्रिप्ट में, [सभी मूल्य सत्य हैं जब तक कि मिथ्या के रूप में परिभाषित नहीं किया जाता](https://developer.mozilla.org/en-US/docs/Glossary/Truthy)
✅ एक चर को 'सत्य' माना जा सकता है यदि यह एक बूलियन `true` का मूल्यांकन करता है। दिलचस्प रूप से, जावास्क्रिप्ट में, [सभी मूल्य सत्य हैं जब तक कि मिथ्या के रूप में परिभाषित नहीं किया जाता](https://developer.mozilla.org/docs/Glossary/Truthy)
@ -12,7 +12,7 @@ When we think about writing code, we always want to ensure our code is readable.
> 🎥 Click the image above for a video about methods and functions.
> You can take this lesson on [Microsoft Learn](https://docs.microsoft.com/en-us/learn/modules/web-development-101-functions/?WT.mc_id=academic-13441-cxa)!
> You can take this lesson on [Microsoft Learn](https://docs.microsoft.com/learn/modules/web-development-101-functions/?WT.mc_id=academic-13441-cxa)!
@ -118,7 +118,7 @@ Los parámetros se enumeran en la parte de definición entre paréntesis y está
### Parámetro
Hasta ahora, la función que construimos siempre saldrá a la [consola](https://developer.mozilla.org/en-US/docs/Web/API/console). A veces, esto puede ser exactamente lo que estamos buscando, especialmente cuando creamos funciones que llamarán a otros servicios. Pero, ¿qué pasa si quiero crear una función auxiliar para realizar un cálculo y devolver el valor para poder usarlo en otro lugar?
Hasta ahora, la función que construimos siempre saldrá a la [consola](https://developer.mozilla.org/docs/Web/API/console). A veces, esto puede ser exactamente lo que estamos buscando, especialmente cuando creamos funciones que llamarán a otros servicios. Pero, ¿qué pasa si quiero crear una función auxiliar para realizar un cálculo y devolver el valor para poder usarlo en otro lugar?
Podemos hacer esto usando un **valor de retorno**. La función devuelve un valor de retorno y se puede almacenar en una variable de la misma manera que podríamos almacenar un valor literal como una cadena o un número.
@ -183,7 +183,7 @@ Cualquier parámetro con valores predeterminados debe estar al final de la lista
## Revisión y autoestudio
Vale la pena [leer un poco más sobre las funciones de flecha](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions), ya que se utilizan cada vez más en bases de código. Practique escribir una función y luego reescribirla con esta sintaxis.
Vale la pena [leer un poco más sobre las funciones de flecha](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Functions/Arrow_functions), ya que se utilizan cada vez más en bases de código. Practique escribir una función y luego reescribirla con esta sintaxis.
**Tarea**: [Práctica de tipos de datos](assignment.es.md)
अब तक हमने जो फ़ंक्शन बनाया है वह हमेशा [कंसोल](https://developer.mozilla.org/en-US/docs/Web/API/console) पर आउटपुट करेगा। कभी-कभी यह ठीक वही हो सकता है जिसकी हम तलाश कर रहे हैं, खासकर जब हम फ़ंक्शन बनाते हैं जो अन्य सेवाओं को कॉल करेगा। लेकिन क्या होगा अगर मैं गणना करने और मान प्रदान करने के लिए एक सहायक फ़ंक्शन बनाना चाहता हूं तो मैं इसे कहीं और उपयोग कर सकता हूं?
अब तक हमने जो फ़ंक्शन बनाया है वह हमेशा [कंसोल](https://developer.mozilla.org/docs/Web/API/console) पर आउटपुट करेगा। कभी-कभी यह ठीक वही हो सकता है जिसकी हम तलाश कर रहे हैं, खासकर जब हम फ़ंक्शन बनाते हैं जो अन्य सेवाओं को कॉल करेगा। लेकिन क्या होगा अगर मैं गणना करने और मान प्रदान करने के लिए एक सहायक फ़ंक्शन बनाना चाहता हूं तो मैं इसे कहीं और उपयोग कर सकता हूं?
हम **रिटर्न वैल्यू** का उपयोग करके ऐसा कर सकते हैं। एक वापसी मान फ़ंक्शन द्वारा लौटाया जाता है, और इसे एक चर में संग्रहीत किया जा सकता है, जैसे कि हम एक स्ट्रिंग या संख्या जैसे शाब्दिक मूल्य को संग्रहीत कर सकते हैं।
जैसे ही आप अपने प्रोग्रामिंग करियर में आगे बढ़ते हैं, आप ऐसे फंक्शन में आएंगे, जो फंक्शन्स को पैरामीटर के रूप में स्वीकार करते हैं। इस साफ-सुथरी चाल का इस्तेमाल आमतौर पर तब किया जाता है जब हम नहीं जानते कि कब कुछ होने वाला है या पूरा हो रहा है, लेकिन हम जानते हैं कि हमें प्रतिक्रिया में एक ऑपरेशन करने की जरूरत है।
एक उदाहरण के रूप में, [setTimeout](https://developer.mozilla.org/en-US/docs/Web/API/WindowOrWorkerGlobalScope/setTimeout) पर विचार करें, जो एक टाइमर शुरू करता है और पूरा होने पर कोड निष्पादित करेगा। हमें यह बताना होगा कि हम किस कोड को निष्पादित करना चाहते हैं। एक समारोह के लिए एक सही काम की तरह लगता है!
एक उदाहरण के रूप में, [setTimeout](https://developer.mozilla.org/docs/Web/API/WindowOrWorkerGlobalScope/setTimeout) पर विचार करें, जो एक टाइमर शुरू करता है और पूरा होने पर कोड निष्पादित करेगा। हमें यह बताना होगा कि हम किस कोड को निष्पादित करना चाहते हैं। एक समारोह के लिए एक सही काम की तरह लगता है!
यदि आप नीचे दिए गए कोड को चलाते हैं, तो 3 सेकंड के बाद आपको संदेश दिखाई देगा **3 सेकंड में** समाप्त हो गया है।
@ -188,7 +188,7 @@ setTimeout(() => {
## समीक्षा और स्व अध्ययन
यह लायक है [एरो फ़ंक्शंस पर थोड़ा और पढ़ना](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions), क्योंकि वे कोड बेस में उपयोग किए जा रहे हैं। एक फ़ंक्शन लिखने का अभ्यास करें, और फिर इस सिंटैक्स के साथ इसे फिर से लिखना।
यह लायक है [एरो फ़ंक्शंस पर थोड़ा और पढ़ना](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Functions/Arrow_functions), क्योंकि वे कोड बेस में उपयोग किए जा रहे हैं। एक फ़ंक्शन लिखने का अभ्यास करें, और फिर इस सिंटैक्स के साथ इसे फिर से लिखना।
@ -12,7 +12,7 @@ Making decisions and controlling the order in which your code runs makes your co
> 🎥 Click the image above for a video about making decisions.
> You can take this lesson on [Microsoft Learn](https://docs.microsoft.com/en-us/learn/modules/web-development-101-if-else/?WT.mc_id=academic-13441-cxa)!
> You can take this lesson on [Microsoft Learn](https://docs.microsoft.com/learn/modules/web-development-101-if-else/?WT.mc_id=academic-13441-cxa)!
## A Brief Recap on Booleans
Booleans can be only two values: `true` or `false`. Booleans help make decisions on which lines of code should run when certain conditions are met.
@ -14,7 +14,7 @@ This lesson covers the basics of JavaScript, the language that provides interact
> 🎥 Click the images above for videos about arrays and loops.
> You can take this lesson on [Microsoft Learn](https://docs.microsoft.com/en-us/learn/modules/web-development-101-arrays/?WT.mc_id=academic-13441-cxa)!
> You can take this lesson on [Microsoft Learn](https://docs.microsoft.com/learn/modules/web-development-101-arrays/?WT.mc_id=academic-13441-cxa)!
> 🎥 Cliquez sur l'image ci-dessus pour une vidéo sur les tableaux et les boucles.
> Vous pouvez suivre cette leçon sur [Microsoft Learn](https://docs.microsoft.com/en-us/learn/modules/web-development-101-arrays/?WT.mc_id=academic-13441-cxa)!
> Vous pouvez suivre cette leçon sur [Microsoft Learn](https://docs.microsoft.com/learn/modules/web-development-101-arrays/?WT.mc_id=academic-13441-cxa)!
## Les tableaux
Travailler avec des données est une tâche courante pour n'importe quel langage, et c'est une tâche beaucoup plus facile lorsque les données sont organisées dans un format structurel, tel que des tableaux. Avec les tableaux, les données sont stockées dans une structure similaire à une liste. L'un des principaux avantages des tableaux est que vous pouvez stocker différents types de données dans un seul tableau.
@ -14,7 +14,7 @@ Esta lição cobre os conceitos básicos do JavaScript, a linguagem que proporci
> 🎥 Clique na imagem acima para um vídeo sobre arrays e loops.
> Pode seguir esta lição em [Microsoft Aprender](https://docs.microsoft.com/en-us/learn/modules/web-development-101-arrays/?WT.mc_id=academic-13441-cxa)!
> Pode seguir esta lição em [Microsoft Aprender](https://docs.microsoft.com/learn/modules/web-development-101-arrays/?WT.mc_id=academic-13441-cxa)!
## Arrays
Trabalhar com dados é uma tarefa comum para qualquer língua, e é uma tarefa muito mais fácil quando os dados são organizados num formato estrutural, tal como as matrizes. Com arrays, os dados são armazenados numa estrutura semelhante a uma lista. Uma grande vantagem dos arrays é que se pode armazenar diferentes tipos de dados numa única matriz.
@ -116,7 +116,7 @@ for (let i = 0; i < iceCreamFlavors.length; i++) {
## 🚀 挑戰
除了 for 迴圈與 while 迴圈外，仍有許多使用矩陣與迴圈的方法：[forEach](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach)、[for-of](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/for...of) 與 [map](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map)。用上列其中一種語法改寫你的迴圈。
除了 for 迴圈與 while 迴圈外，仍有許多使用矩陣與迴圈的方法：[forEach](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach)、[for-of](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/for...of) 與 [map](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array/map)。用上列其中一種語法改寫你的迴圈。
## 課後測驗
@ -125,7 +125,7 @@ for (let i = 0; i < iceCreamFlavors.length; i++) {
@ -48,13 +48,13 @@ HTML फ़ाइल की पहली पंक्ति इसका सि
<html></html>
```
✅ कुछ अलग तरीके हैं जो डॉक टाइप को क्वेरी स्ट्रिंग के साथ निर्धारित करके निर्धारित किए जा सकते हैं: [क्विर्क मोड और स्टैंडर्ड मोड](https://developer.mozilla.org/en-US/docs/Web/HTML/Quirks_Mode_and_Standards_Mode). ये मोड वास्तव में पुराने ब्राउज़रों का समर्थन करते थे जो आजकल सामान्य रूप से उपयोग नहीं किए जाते हैं (नेटस्केप नेविगेटर 4 और इंटरनेट एक्सप्लोरर 5)। आप मानक सिद्धांत घोषणा से चिपक सकते हैं।
✅ कुछ अलग तरीके हैं जो डॉक टाइप को क्वेरी स्ट्रिंग के साथ निर्धारित करके निर्धारित किए जा सकते हैं: [क्विर्क मोड और स्टैंडर्ड मोड](https://developer.mozilla.org/docs/Web/HTML/Quirks_Mode_and_Standards_Mode). ये मोड वास्तव में पुराने ब्राउज़रों का समर्थन करते थे जो आजकल सामान्य रूप से उपयोग नहीं किए जाते हैं (नेटस्केप नेविगेटर 4 और इंटरनेट एक्सप्लोरर 5)। आप मानक सिद्धांत घोषणा से चिपक सकते हैं।
---
## दस्तावेज़ का 'head'
HTML दस्तावेज़ के 'हेड' क्षेत्र में आपके वेब पेज के बारे में महत्वपूर्ण जानकारी शामिल है, जिसे [मेटाडेटा](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/meta) के रूप में भी जाना जाता है। हमारे मामले में, हम वेब सर्वर को बताते हैं कि इस पेज को किस पेज पर भेजा जाएगा, ये चार बातें:
HTML दस्तावेज़ के 'हेड' क्षेत्र में आपके वेब पेज के बारे में महत्वपूर्ण जानकारी शामिल है, जिसे [मेटाडेटा](https://developer.mozilla.org/docs/Web/HTML/Element/meta) के रूप में भी जाना जाता है। हमारे मामले में, हम वेब सर्वर को बताते हैं कि इस पेज को किस पेज पर भेजा जाएगा, ये चार बातें:
- पेज का शीर्षक
- पृष्ठ मेटाडेटा सहित:
@ -212,7 +212,7 @@ HTML में, आप वेब पेज के तत्वों को ब
## 🚀चुनौती
HTML में कुछ जंगली 'पुराने' टैग हैं जो अभी भी खेलने में मज़ेदार हैं, हालांकि आपको [[इन टैग्स](https://developer.mozilla.org/en-US/docs/Web/HTML/Element#Obirect_and_deprecated_elements) जैसे अस्वीकृत टैग का उपयोग नहीं करना चाहिए आपके मार्कअप में । फिर भी, आप h1 शीर्षक स्क्रॉल को क्षैतिज रूप से बनाने के लिए पुराने `<marquee>` टैग का उपयोग कर सकते हैं? (यदि आप ऐसा करते हैं, तो इसे बाद में हटाना न भूलें)
HTML में कुछ जंगली 'पुराने' टैग हैं जो अभी भी खेलने में मज़ेदार हैं, हालांकि आपको [[इन टैग्स](https://developer.mozilla.org/docs/Web/HTML/Element#Obirect_and_deprecated_elements) जैसे अस्वीकृत टैग का उपयोग नहीं करना चाहिए आपके मार्कअप में । फिर भी, आप h1 शीर्षक स्क्रॉल को क्षैतिज रूप से बनाने के लिए पुराने `<marquee>` टैग का उपयोग कर सकते हैं? (यदि आप ऐसा करते हैं, तो इसे बाद में हटाना न भूलें)
✅ 通过设置带有查询字符串（query string）的 DocType 可以设定几种不同的模式：[怪异模式与标准模式](https://developer.mozilla.org/en-US/docs/Web/HTML/Quirks_Mode_and_Standards_Mode)。这些模式用于支持现在非常不常用的古老浏览器(Netscape Navigator 4 和 Internet Explorer 5)。你仍可以使用标准的文档类型声明。
✅ 通过设置带有查询字符串（query string）的 DocType 可以设定几种不同的模式：[怪异模式与标准模式](https://developer.mozilla.org/docs/Web/HTML/Quirks_Mode_and_Standards_Mode)。这些模式用于支持现在非常不常用的古老浏览器(Netscape Navigator 4 和 Internet Explorer 5)。你仍可以使用标准的文档类型声明。
---
## 文档的 'head'（脑袋）
HTML 文档中的 'head' 包含的区域有很多关于页面的重要信息，它也被称作[元数据(metadata)](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/meta)。在我们的例子中，我们告诉 web 服务器这个页面将依据哪些信息被发送进行渲染，主要是四种:
HTML 文档中的 'head' 包含的区域有很多关于页面的重要信息，它也被称作[元数据(metadata)](https://developer.mozilla.org/docs/Web/HTML/Element/meta)。在我们的例子中，我们告诉 web 服务器这个页面将依据哪些信息被发送进行渲染，主要是四种:
- 网页的标题
- 网页的元数据，它包含：
@ -215,7 +215,7 @@ HTML 文档中的 'head' 包含的区域有很多关于页面的重要信息，
## 🚀 挑战
HTML 中还有一些狂野的'旧'标签，玩起来仍然很有趣。虽然[这些标签](https://developer.mozilla.org/en-US/docs/Web/HTML/Element#Obsolete_and_deprecated_elements)不推荐你使用，但是，你还是可以试试，能否用 `<marquee>` 标签让 h1 标题文字变成纵向展示的吗？（如果你这么尝试了，不要忘了在后面移除它们）
HTML 中还有一些狂野的'旧'标签，玩起来仍然很有趣。虽然[这些标签](https://developer.mozilla.org/docs/Web/HTML/Element#Obsolete_and_deprecated_elements)不推荐你使用，但是，你还是可以试试，能否用 `<marquee>` 标签让 h1 标题文字变成纵向展示的吗？（如果你这么尝试了，不要忘了在后面移除它们）
DOM, या "Document Object Model" में हेरफेर, वेब विकास का एक प्रमुख पहलू है। [MDN](https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model/Introduction) के अनुसार, "The Document Object Model (DOM) संरचना को समाहित करने वाली वस्तुओं का डेटा प्रतिनिधित्व है। और वेब पर एक दस्तावेज़ की सामग्री। " वेब पर DOM हेरफेर के आसपास की चुनौतियाँ अक्सर DOM का प्रबंधन करने के लिए वैनिला जावास्क्रिप्ट के बजाय जावास्क्रिप्ट चौखटे का उपयोग करने के पीछे होती हैं, लेकिन हम अपने दम पर प्रबंधित करेंगे!
DOM, या "Document Object Model" में हेरफेर, वेब विकास का एक प्रमुख पहलू है। [MDN](https://developer.mozilla.org/docs/Web/API/Document_Object_Model/Introduction) के अनुसार, "The Document Object Model (DOM) संरचना को समाहित करने वाली वस्तुओं का डेटा प्रतिनिधित्व है। और वेब पर एक दस्तावेज़ की सामग्री। " वेब पर DOM हेरफेर के आसपास की चुनौतियाँ अक्सर DOM का प्रबंधन करने के लिए वैनिला जावास्क्रिप्ट के बजाय जावास्क्रिप्ट चौखटे का उपयोग करने के पीछे होती हैं, लेकिन हम अपने दम पर प्रबंधित करेंगे!
इसके अलावा, यह पाठ एक [जावास्क्रिप्ट क्लोजर](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Closures) के विचार को पेश करेगा, जिसे आप दूसरे से संलग्न फ़ंक्शन के रूप में सोच सकते हैं कार्य करें ताकि आंतरिक फ़ंक्शन बाहरी फ़ंक्शन के दायरे तक पहुंच सके।
इसके अलावा, यह पाठ एक [जावास्क्रिप्ट क्लोजर](https://developer.mozilla.org/docs/Web/JavaScript/Closures) के विचार को पेश करेगा, जिसे आप दूसरे से संलग्न फ़ंक्शन के रूप में सोच सकते हैं कार्य करें ताकि आंतरिक फ़ंक्शन बाहरी फ़ंक्शन के दायरे तक पहुंच सके।
> जावास्क्रिप्ट क्लोजर एक विशाल और जटिल विषय है। यह सबक सबसे बुनियादी विचार पर छूता है कि इस टेरारियम के कोड में, आपको एक बंद मिलेगा: एक आंतरिक फ़ंक्शन और एक बाहरी फ़ंक्शन, जो बाहरी फ़ंक्शन के दायरे में आंतरिक फ़ंक्शन का उपयोग करने की अनुमति देता है। यह कैसे काम करता है, इस बारे में अधिक जानकारी के लिए, कृपया [व्यापक प्रलेखन](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Closures) पर जाएँ।
> जावास्क्रिप्ट क्लोजर एक विशाल और जटिल विषय है। यह सबक सबसे बुनियादी विचार पर छूता है कि इस टेरारियम के कोड में, आपको एक बंद मिलेगा: एक आंतरिक फ़ंक्शन और एक बाहरी फ़ंक्शन, जो बाहरी फ़ंक्शन के दायरे में आंतरिक फ़ंक्शन का उपयोग करने की अनुमति देता है। यह कैसे काम करता है, इस बारे में अधिक जानकारी के लिए, कृपया [व्यापक प्रलेखन](https://developer.mozilla.org/docs/Web/JavaScript/Closures) पर जाएँ।
हम DOM को हेरफेर करने के लिए एक क्लोशर का उपयोग करेंगे।
@ -108,9 +108,9 @@ function dragElement(terrariumElement) {
`dragElement` स्क्रिप्ट के शीर्ष पर घोषणाओं से अपनी `terrariumElement` वस्तु प्राप्त करें। फिर, आप फ़ंक्शन में पारित ऑब्जेक्ट के लिए `0` पर कुछ स्थानीय स्थिति निर्धारित करते हैं। ये स्थानीय चर हैं जिन्हें प्रत्येक तत्व के लिए हेरफेर किया जाएगा क्योंकि आप प्रत्येक तत्व को बंद करने के भीतर खींचें और ड्रॉप कार्यक्षमता जोड़ते हैं। टेरारियम को इन घसीटे गए तत्वों द्वारा पॉपुलेट किया जाएगा, इसलिए एप्लिकेशन को इस बात पर नज़र रखने की आवश्यकता है कि उन्हें कहाँ रखा गया है।
इसके अलावा, इस फ़ंक्शन को पारित किए जाने वाले टेरारियम ईमेंट को एक `onpointerdown` ईवेंट सौंपा गया है, जो [वेब एपीआई](https://developer.mozilla.org/en-US/docs/Web/API) का एक हिस्सा है। डोम प्रबंधन के साथ मदद करने के लिए। `onpointerdown` एक बटन धकेलने पर, या हमारे मामले में, एक ड्रैग करने योग्य तत्व को छू जाता है। यह ईवेंट हैंडलर कुछ अपवादों के साथ [वेब और मोबाइल ब्राउज़र](https://caniuse.com/?search=onpointerdown) दोनों पर काम करता है।
इसके अलावा, इस फ़ंक्शन को पारित किए जाने वाले टेरारियम ईमेंट को एक `onpointerdown` ईवेंट सौंपा गया है, जो [वेब एपीआई](https://developer.mozilla.org/docs/Web/API) का एक हिस्सा है। डोम प्रबंधन के साथ मदद करने के लिए। `onpointerdown` एक बटन धकेलने पर, या हमारे मामले में, एक ड्रैग करने योग्य तत्व को छू जाता है। यह ईवेंट हैंडलर कुछ अपवादों के साथ [वेब और मोबाइल ब्राउज़र](https://caniuse.com/?search=onpointerdown) दोनों पर काम करता है।
✅ [ईवेंट हैंडलर `onclick`](https://developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers/onclick) को अधिक समर्थन क्रॉस-ब्राउज़र है; आप इसका उपयोग यहां क्यों नहीं करेंगे? स्क्रीन निर्माण के सटीक प्रकार के बारे में सोचें जिसे आप यहाँ बनाने का प्रयास कर रहे हैं।
✅ [ईवेंट हैंडलर `onclick`](https://developer.mozilla.org/docs/Web/API/GlobalEventHandlers/onclick) को अधिक समर्थन क्रॉस-ब्राउज़र है; आप इसका उपयोग यहां क्यों नहीं करेंगे? स्क्रीन निर्माण के सटीक प्रकार के बारे में सोचें जिसे आप यहाँ बनाने का प्रयास कर रहे हैं।
---
@ -205,9 +205,9 @@ function stopElementDrag() {
## समीक्षा और स्व अध्ययन
स्क्रीन के चारों ओर तत्वों को खींचते समय तुच्छ लगता है, ऐसा करने के कई तरीके और कई नुकसान हैं, जो आपके चाहने वाले प्रभाव पर निर्भर करता है। वास्तव में, एक संपूर्ण [ड्रैग एंड ड्रॉप एपीआई](https://developer.mozilla.org/en-US/docs/Web/API/HTML_Drag_and_Drop_API) है जिसे आप आज़मा सकते हैं। हमने इसका उपयोग इस मॉड्यूल में नहीं किया क्योंकि हम जो प्रभाव चाहते थे वह कुछ अलग था, लेकिन इस एपीआई को अपने प्रोजेक्ट पर आज़माएँ और देखें कि आप क्या हासिल कर सकते हैं।
स्क्रीन के चारों ओर तत्वों को खींचते समय तुच्छ लगता है, ऐसा करने के कई तरीके और कई नुकसान हैं, जो आपके चाहने वाले प्रभाव पर निर्भर करता है। वास्तव में, एक संपूर्ण [ड्रैग एंड ड्रॉप एपीआई](https://developer.mozilla.org/docs/Web/API/HTML_Drag_and_Drop_API) है जिसे आप आज़मा सकते हैं। हमने इसका उपयोग इस मॉड्यूल में नहीं किया क्योंकि हम जो प्रभाव चाहते थे वह कुछ अलग था, लेकिन इस एपीआई को अपने प्रोजेक्ट पर आज़माएँ और देखें कि आप क्या हासिल कर सकते हैं।
[W3C डॉक्स](https://www.w3.org/TR/pointerevents1/) और [MDN वेब डॉक्स](https://developer.mozilla.org/en-US/docs/Web/API/Pointer_events) पर सूचक घटनाओं के बारे में अधिक जानकारी प्राप्त करें।
[W3C डॉक्स](https://www.w3.org/TR/pointerevents1/) और [MDN वेब डॉक्स](https://developer.mozilla.org/docs/Web/API/Pointer_events) पर सूचक घटनाओं के बारे में अधिक जानकारी प्राप्त करें।
हमेशा [CanIUse.com] (https://caniuse.com/) का उपयोग करके ब्राउज़र क्षमताओं की जाँच करें।
在螢幕上拖曳物件看似簡單，但依照不同的目的與實現方法會遭遇到不同的問題。事實上，這邊有一份關於你可以嘗試的[拖曳 API](https://developer.mozilla.org/en-US/docs/Web/API/HTML_Drag_and_Drop_API)。我們沒在專案中使用是為了建立不一樣的實現方法，試著使用這些 API 到專案中，看看你能完成什麼。
在螢幕上拖曳物件看似簡單，但依照不同的目的與實現方法會遭遇到不同的問題。事實上，這邊有一份關於你可以嘗試的[拖曳 API](https://developer.mozilla.org/docs/Web/API/HTML_Drag_and_Drop_API)。我們沒在專案中使用是為了建立不一樣的實現方法，試著使用這些 API 到專案中，看看你能完成什麼。
एप्लिकेशन बनाते समय आपको सुनने के लिए [दर्जनों इवेंट](https://developer.mozilla.org/docs/Web/Events) उपलब्ध हैं। मूल रूप से एक पृष्ठ पर एक उपयोगकर्ता कुछ भी करता है, एक घटना को बढ़ाता है, जो आपको यह सुनिश्चित करने के लिए बहुत शक्ति देता है कि वे आपकी इच्छा का अनुभव प्राप्त करें। सौभाग्य से, आपको आम तौर पर केवल कुछ मुट्ठी भर घटनाओं की आवश्यकता होगी। यहां कुछ सामान्य बातें हैं (दोनों में से एक का उपयोग हम अपने खेल को बनाते समय करेंगे)
- [click](https://developer.mozilla.org/en-US/docs/Web/API/Element/click_event): उपयोगकर्ता ने कुछ पर क्लिक किया, आमतौर पर एक बटन या हाइपरलिंक
- [contextmenu](https://developer.mozilla.org/en-US/docs/Web/API/Element/contextmenu_event): उपयोगकर्ता ने सही माउस बटन क्लिक किया
- [select](https://developer.mozilla.org/en-US/docs/Web/API/Element/select_event): उपयोगकर्ता ने कुछ टेक्स्ट पर प्रकाश डाला
- [input](https://developer.mozilla.org/en-US/docs/Web/API/Element/input_event): उपयोगकर्ता कुछ टेक्स्ट इनपुट करता है
- [click](https://developer.mozilla.org/docs/Web/API/Element/click_event): उपयोगकर्ता ने कुछ पर क्लिक किया, आमतौर पर एक बटन या हाइपरलिंक
- [contextmenu](https://developer.mozilla.org/docs/Web/API/Element/contextmenu_event): उपयोगकर्ता ने सही माउस बटन क्लिक किया
- [select](https://developer.mozilla.org/docs/Web/API/Element/select_event): उपयोगकर्ता ने कुछ टेक्स्ट पर प्रकाश डाला
- [input](https://developer.mozilla.org/docs/Web/API/Element/input_event): उपयोगकर्ता कुछ टेक्स्ट इनपुट करता है
वेब ब्राउज़र के माध्यम से डेवलपर के लिए [उपलब्ध सभी घटनाओं](https://developer.mozilla.org/en-US/docs/Web/Events) को पढ़ें, और उन परिदृश्यों पर विचार करें जिनमें आप प्रत्येक का उपयोग करेंगे।
वेब ब्राउज़र के माध्यम से डेवलपर के लिए [उपलब्ध सभी घटनाओं](https://developer.mozilla.org/docs/Web/Events) को पढ़ें, और उन परिदृश्यों पर विचार करें जिनमें आप प्रत्येक का उपयोग करेंगे।
आगे बढ़ने से पहले, ब्राउज़रों में उपलब्ध एक बहुत ही महत्वपूर्ण अवधारणा के बारे में सीखना उपयोगी है: [लोकलस्टोरेज](https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage).लोकलस्टोरेज, ब्राउज़र में स्ट्रिंगस को 'की-वैल्यू' पेयर के रूप में स्टोर करने का एक उपयोगी तरीका है। इस प्रकार के वेब स्टोरेज को ब्राउजर में डेटा को मैनेज करने के लिए जावास्क्रिप्ट द्वारा मैनिपुलेट किया जा सकता है। लोकलस्टोरीज की समय सीमा समाप्त नहीं होती है, जबकि ब्राउजर के बंद होने पर एक अन्य तरह का वेब स्टोरेज, स्टोरेज साफ हो जाता है। विभिन्न प्रकार के भंडारण में उनके उपयोग के पक्ष और विपक्ष हैं।
आगे बढ़ने से पहले, ब्राउज़रों में उपलब्ध एक बहुत ही महत्वपूर्ण अवधारणा के बारे में सीखना उपयोगी है: [लोकलस्टोरेज](https://developer.mozilla.org/docs/Web/API/Window/localStorage).लोकलस्टोरेज, ब्राउज़र में स्ट्रिंगस को 'की-वैल्यू' पेयर के रूप में स्टोर करने का एक उपयोगी तरीका है। इस प्रकार के वेब स्टोरेज को ब्राउजर में डेटा को मैनेज करने के लिए जावास्क्रिप्ट द्वारा मैनिपुलेट किया जा सकता है। लोकलस्टोरीज की समय सीमा समाप्त नहीं होती है, जबकि ब्राउजर के बंद होने पर एक अन्य तरह का वेब स्टोरेज, स्टोरेज साफ हो जाता है। विभिन्न प्रकार के भंडारण में उनके उपयोग के पक्ष और विपक्ष हैं।
> नोट - आपके ब्राउज़र एक्सटेंशन का अपना स्थानीय भंडारण है; मुख्य ब्राउज़र विंडो एक अलग उदाहरण है और अलग-अलग व्यवहार करता है।
@ -145,7 +145,7 @@ function setUpUser(apiKey, regionName) {
✅ 'REST' शब्द 'Representational State Transfer' के लिए है और इसमें डेटा लाने के लिए विभिन्न कॉन्फ़िगर किए गए URL का उपयोग करने की सुविधा है। डेवलपर्स के लिए उपलब्ध विभिन्न प्रकार के एपीआई पर थोड़ा शोध करें। क्या प्रारूप आपको अपील करता है?
इस फ़ंक्शन के बारे में ध्यान देने योग्य महत्वपूर्ण बातें हैं। पहले [`async` कीवर्ड](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/async_function) को नोटिस करें। अपने कार्यों को लिखना ताकि वे अतुल्यकालिक रूप से चलाते हैं इसका मतलब है कि वे एक कार्रवाई की प्रतीक्षा करते हैं, जैसे डेटा लौटाए जाने से पहले, पूरा होने से पहले।
इस फ़ंक्शन के बारे में ध्यान देने योग्य महत्वपूर्ण बातें हैं। पहले [`async` कीवर्ड](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/async_function) को नोटिस करें। अपने कार्यों को लिखना ताकि वे अतुल्यकालिक रूप से चलाते हैं इसका मतलब है कि वे एक कार्रवाई की प्रतीक्षा करते हैं, जैसे डेटा लौटाए जाने से पहले, पूरा होने से पहले।
यहाँ `async` के बारे में एक त्वरित वीडियो है:
@ -200,7 +200,7 @@ async function displayCarbonUsage(apiKey, region) {
- एपीआई के जवाब देने के बाद, आप इस डेटा को दिखाने के लिए अपने स्क्रीन के कुछ हिस्सों में इसके रिस्पॉन्स डेटा के विभिन्न तत्वों को असाइन करते हैं।
- यदि कोई त्रुटि है, या कोई परिणाम नहीं है, तो आप एक त्रुटि संदेश दिखाते हैं।
✅ Asyncronous प्रोग्रामिंग पैटर्न का उपयोग करना आपके टूलबॉक्स में एक और बहुत उपयोगी उपकरण है। [विभिन्न तरीकों के बारे में](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/async_function) पढ़ें आप इस प्रकार के कोड को कॉन्फ़िगर कर सकते हैं।
✅ Asyncronous प्रोग्रामिंग पैटर्न का उपयोग करना आपके टूलबॉक्स में एक और बहुत उपयोगी उपकरण है। [विभिन्न तरीकों के बारे में](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/async_function) पढ़ें आप इस प्रकार के कोड को कॉन्फ़िगर कर सकते हैं।
बधाई हो! यदि आप अपना एक्सटेंशन बनाते हैं (`npm run build`) और इसे अपने एक्सटेंशन पेन में रिफ्रेश करें, तो आपके पास काम करने का एक्सटेंशन है! केवल एक चीज जो काम नहीं कर रही है वह आइकन है, और आप इसे अगले पाठ में ठीक कर देंगे।
@ -208,7 +208,7 @@ async function displayCarbonUsage(apiKey, region) {
## 🚀 चुनौती
हमने इन पाठों में अब तक कई प्रकार के एपीआई पर चर्चा की है। एक वेब एपीआई चुनें और गहराई से शोध करें कि यह क्या प्रदान करता है। उदाहरण के लिए, [HTML ड्रैग एंड ड्रॉप एपीआई](https://developer.mozilla.org/en-US/docs/Web/API/HTML_Drag_and_Drop_API) जैसे ब्राउज़रों के भीतर उपलब्ध एपीआई पर एक नज़र डालें। आपकी राय में एक महान एपीआई क्या है?
हमने इन पाठों में अब तक कई प्रकार के एपीआई पर चर्चा की है। एक वेब एपीआई चुनें और गहराई से शोध करें कि यह क्या प्रदान करता है। उदाहरण के लिए, [HTML ड्रैग एंड ड्रॉप एपीआई](https://developer.mozilla.org/docs/Web/API/HTML_Drag_and_Drop_API) जैसे ब्राउज़रों के भीतर उपलब्ध एपीआई पर एक नज़र डालें। आपकी राय में एक महान एपीआई क्या है?
恭喜你！當你建制你的專案(`npm run build`)並在瀏覽器上刷新功能，你有個可以運作的應用套件了！現在只差圖示無法正常顯示，我們會在下一堂課中修正它。
@ -208,7 +208,7 @@ async function displayCarbonUsage(apiKey, region) {
## 🚀 挑戰
我們在課程中討論了不同種類的 API。選擇一樣網頁 API 並做更深度的研究。舉例來說，看看瀏覽器內支援的 API 如 [HTML Drag and Drop API](https://developer.mozilla.org/en-US/docs/Web/API/HTML_Drag_and_Drop_API)。依你看，什麼決定了 API 的優劣？
我們在課程中討論了不同種類的 API。選擇一樣網頁 API 並做更深度的研究。舉例來說，看看瀏覽器內支援的 API 如 [HTML Drag and Drop API](https://developer.mozilla.org/docs/Web/API/HTML_Drag_and_Drop_API)。依你看，什麼決定了 API 的優劣？
✅ किनारे पर प्रदर्शन पैनल पर [Microsoft दस्तावेज़ीकरण](https://docs.microsoft.com/en-us/microsoft-edge/devtools-guide/performance?WT.mc_id=academy-13441-cxa) पर जाएँ
✅ किनारे पर प्रदर्शन पैनल पर [Microsoft दस्तावेज़ीकरण](https://docs.microsoft.com/microsoft-edge/devtools-guide/performance?WT.mc_id=academy-13441-cxa) पर जाएँ
> युक्ति: अपनी वेब साइट के स्टार्टअप समय का सही पठन करने के लिए, अपने ब्राउज़र का कैश साफ़ करें
@ -41,7 +41,7 @@ If you want to create multiples screens for a web page, one solution would be to
- You have to reload the entire HTML when switching screen, which can be slow.
- It's difficult to share data between the different screens.
Another approach is have only one HTML file, and define multiple [HTML templates](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/template) using the `<template>` element. A template is a reusable HTML block that is not displayed by the browser, and needs to be instantiated at runtime using JavaScript.
Another approach is have only one HTML file, and define multiple [HTML templates](https://developer.mozilla.org/docs/Web/HTML/Element/template) using the `<template>` element. A template is a reusable HTML block that is not displayed by the browser, and needs to be instantiated at runtime using JavaScript.
### Task
@ -107,9 +107,9 @@ If you try your current HTML file in a browser, you'll see that it get stuck dis
Instantiating a template is usually done in 3 steps:
1. Retrieve the template element in the DOM, for example using [`document.getElementById`](https://developer.mozilla.org/en-US/docs/Web/API/Document/getElementById).
2. Clone the template element, using [`cloneNode`](https://developer.mozilla.org/en-US/docs/Web/API/Node/cloneNode).
3. Attach it to the DOM under a visible element, for example using [`appendChild`](https://developer.mozilla.org/en-US/docs/Web/API/Node/appendChild).
1. Retrieve the template element in the DOM, for example using [`document.getElementById`](https://developer.mozilla.org/docs/Web/API/Document/getElementById).
2. Clone the template element, using [`cloneNode`](https://developer.mozilla.org/docs/Web/API/Node/cloneNode).
3. Attach it to the DOM under a visible element, for example using [`appendChild`](https://developer.mozilla.org/docs/Web/API/Node/appendChild).
✅ Why do we need to clone the template before attaching it to the DOM? What do you think would happen if we skipped this step?
@ -174,7 +174,7 @@ const routes = {
};
```
Now let's modify a bit the `updateRoute` function. Instead of passing directly the `templateId` as an argument, we want to retrieve it by first looking at the current URL, and then use our map to get the corresponding template ID value. We can use [`window.location.pathname`](https://developer.mozilla.org/en-US/docs/Web/API/Location/pathname) to get only the path section from the URL.
Now let's modify a bit the `updateRoute` function. Instead of passing directly the `templateId` as an argument, we want to retrieve it by first looking at the current URL, and then use our map to get the corresponding template ID value. We can use [`window.location.pathname`](https://developer.mozilla.org/docs/Web/API/Location/pathname) to get only the path section from the URL.
```js
function updateRoute() {
@ -202,9 +202,9 @@ The next step for our app is to add the possibility to navigate between pages wi
We already took care of the second part with the `updateRoute` function, so we have to figure out how to update the current URL.
We'll have to use JavaScript and more specifically the [`history.pushState`](https://developer.mozilla.org/en-US/docs/Web/API/History/pushState) that allows to update the URL and create a new entry in the browsing history, without reloading the HTML.
We'll have to use JavaScript and more specifically the [`history.pushState`](https://developer.mozilla.org/docs/Web/API/History/pushState) that allows to update the URL and create a new entry in the browsing history, without reloading the HTML.
> Note: While the HTML anchor element [`<a href>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a) can be used on its own to create hyperlinks to different URLs, it will make the browser reload the HTML by default. It is necessary to prevent this behavior when handling routing with custom javascript, using the preventDefault() function on the click event.
> Note: While the HTML anchor element [`<a href>`](https://developer.mozilla.org/docs/Web/HTML/Element/a) can be used on its own to create hyperlinks to different URLs, it will make the browser reload the HTML by default. It is necessary to prevent this behavior when handling routing with custom javascript, using the preventDefault() function on the click event.
### Task
@ -254,7 +254,7 @@ Let's complete the navigation system by adding bindings to our *Login* and *Logo
The `event` object above, captures the `click` event and passes it to our `onLinkClick` function.
Using the [`onclick`](https://developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers/onclick) attribute bind the `click` event to JavaScript code, here the call to the `navigate()` function.
Using the [`onclick`](https://developer.mozilla.org/docs/Web/API/GlobalEventHandlers/onclick) attribute bind the `click` event to JavaScript code, here the call to the `navigate()` function.
Try clicking on these links, you should be now able to navigate between the different screens of your app.
@ -268,7 +268,7 @@ Using the `history.pushState` creates new entries in the browser's navigation hi
If you try clicking on the back button a few times, you'll see that the current URL changes and the history is updated, but the same template keeps being displayed.
That's because the application does not know that we need to call `updateRoute()` every time the history changes. If you take a look at the [`history.pushState` documentation](https://developer.mozilla.org/en-US/docs/Web/API/History/pushState), you can see that if the state changes - meaning that we moved to a different URL - the [`popstate`](https://developer.mozilla.org/en-US/docs/Web/API/Window/popstate_event) event is triggered. We'll use that to fix that issue.
That's because the application does not know that we need to call `updateRoute()` every time the history changes. If you take a look at the [`history.pushState` documentation](https://developer.mozilla.org/docs/Web/API/History/pushState), you can see that if the state changes - meaning that we moved to a different URL - the [`popstate`](https://developer.mozilla.org/docs/Web/API/Window/popstate_event) event is triggered. We'll use that to fix that issue.
> Note: we used an [arrow function](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions) here to declare our `popstate` event handler for conciseness, but a regular function would work the same.
> Note: we used an [arrow function](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Functions/Arrow_functions) here to declare our `popstate` event handler for conciseness, but a regular function would work the same.
Here's a refresher video on arrow functions:
@ -301,7 +301,7 @@ Add a new template and route for a third page that shows the credits for this ap
## Review & Self Study
Routing is one of the surprisingly tricky parts of web development, especially as the web moves from page refresh behaviors to Single Page Application page refreshes. Read a little about [how the Azure Static Web App service](https://docs.microsoft.com/en-us/azure/static-web-apps/routes?WT.mc_id=academic-13441-cxa) handles routing. Can you explain why some of the decisions described on that document are necessary?
Routing is one of the surprisingly tricky parts of web development, especially as the web moves from page refresh behaviors to Single Page Application page refreshes. Read a little about [how the Azure Static Web App service](https://docs.microsoft.com/azure/static-web-apps/routes?WT.mc_id=academic-13441-cxa) handles routing. Can you explain why some of the decisions described on that document are necessary?
@ -41,7 +41,7 @@ Si vous souhaitez créer plusieurs écrans pour une page Web, une solution serai
- Vous devez recharger l'intégralité du code HTML lors du changement d'écran, ce qui peut être lent.
- Il est difficile de partager des données entre les différents écrans.
Une autre approche consiste à n'avoir qu'un seul fichier HTML et à définir plusieurs [modèles HTML](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/template) à l'aide de l'élément `<template>`. Un modèle est un bloc HTML réutilisable qui n'est pas affiché par le navigateur et doit être instancié lors de l'exécution à l'aide de JavaScript.
Une autre approche consiste à n'avoir qu'un seul fichier HTML et à définir plusieurs [modèles HTML](https://developer.mozilla.org/docs/Web/HTML/Element/template) à l'aide de l'élément `<template>`. Un modèle est un bloc HTML réutilisable qui n'est pas affiché par le navigateur et doit être instancié lors de l'exécution à l'aide de JavaScript.
### Tâche
@ -107,9 +107,9 @@ Si vous essayez votre fichier HTML actuel dans un navigateur, vous verrez qu'il
L'instanciation d'un modèle se fait généralement en 3 étapes :
1. Récupérez l'élément du modèle dans le DOM, par exemple en utilisant [`document.getElementById`](https://developer.mozilla.org/en-US/docs/Web/API/Document/getElementById).
2. Clonez l'élément de modèle à l'aide de [`cloneNode`](https://developer.mozilla.org/en-US/docs/Web/API/Node/cloneNode).
3. Attachez-le au DOM sous un élément visible, par exemple en utilisant [`appendChild`](https://developer.mozilla.org/en-US/docs/Web/API/Node/appendChild).
1. Récupérez l'élément du modèle dans le DOM, par exemple en utilisant [`document.getElementById`](https://developer.mozilla.org/docs/Web/API/Document/getElementById).
2. Clonez l'élément de modèle à l'aide de [`cloneNode`](https://developer.mozilla.org/docs/Web/API/Node/cloneNode).
3. Attachez-le au DOM sous un élément visible, par exemple en utilisant [`appendChild`](https://developer.mozilla.org/docs/Web/API/Node/appendChild).
✅ Pourquoi avons-nous besoin de cloner le modèle avant de l'attacher au DOM ? Que pensez-vous qu'il se passerait si nous sautions cette étape?
@ -174,7 +174,7 @@ const routes = {
};
```
Modifions maintenant un peu la fonction `updateRoute`. Au lieu de passer directement le `templateId` comme argument, nous voulons le récupérer en regardant d'abord l'URL actuelle, puis en utilisant notre carte pour obtenir la valeur d'ID de modèle correspondante. Nous pouvons utiliser [`window.location.pathname`](https://developer.mozilla.org/en-US/docs/Web/API/Location/pathname) pour obtenir uniquement la section du chemin de l'URL.
Modifions maintenant un peu la fonction `updateRoute`. Au lieu de passer directement le `templateId` comme argument, nous voulons le récupérer en regardant d'abord l'URL actuelle, puis en utilisant notre carte pour obtenir la valeur d'ID de modèle correspondante. Nous pouvons utiliser [`window.location.pathname`](https://developer.mozilla.org/docs/Web/API/Location/pathname) pour obtenir uniquement la section du chemin de l'URL.
```js
function updateRoute() {
@ -202,9 +202,9 @@ La prochaine étape pour notre application consiste à ajouter la possibilité d
Nous nous sommes déjà occupés de la deuxième partie avec la fonction `updateRoute`, nous devons donc trouver comment mettre à jour l'URL actuelle.
Il va falloir utiliser JavaScript et plus précisément le [`history.pushState`](https://developer.mozilla.org/en-US/docs/Web/API/History/pushState) qui permet de mettre à jour l'URL et créer une nouvelle entrée dans l'historique de navigation, sans recharger le code HTML.
Il va falloir utiliser JavaScript et plus précisément le [`history.pushState`](https://developer.mozilla.org/docs/Web/API/History/pushState) qui permet de mettre à jour l'URL et créer une nouvelle entrée dans l'historique de navigation, sans recharger le code HTML.
> Remarque : Bien que l'élément d'ancrage HTML [`<a href>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a) puisse être utilisé seul pour créer des liens hypertexte à des URL différentes, il fera le navigateur recharger le HTML par défaut. Il est nécessaire d'empêcher ce comportement lors de la gestion du routage avec un javascript personnalisé, en utilisant la fonction preventDefault() sur l'événement click.
> Remarque : Bien que l'élément d'ancrage HTML [`<a href>`](https://developer.mozilla.org/docs/Web/HTML/Element/a) puisse être utilisé seul pour créer des liens hypertexte à des URL différentes, il fera le navigateur recharger le HTML par défaut. Il est nécessaire d'empêcher ce comportement lors de la gestion du routage avec un javascript personnalisé, en utilisant la fonction preventDefault() sur l'événement click.
### Tâche
@ -254,7 +254,7 @@ Complétons le système de navigation en ajoutant des liens à nos liens *Login*
L'objet `event` ci-dessus capture l'événement `click` et le transmet à notre fonction `onLinkClick`.
Utiliser l'attribut [`onclick`](https://developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers/onclick) lie l'événement `click` au code JavaScript, dans ce cas via l'appel à la fonction `navigate ()`.
Utiliser l'attribut [`onclick`](https://developer.mozilla.org/docs/Web/API/GlobalEventHandlers/onclick) lie l'événement `click` au code JavaScript, dans ce cas via l'appel à la fonction `navigate ()`.
Essayez de cliquer sur ces liens, vous devriez maintenant pouvoir naviguer entre les différents écrans de votre application.
@ -268,7 +268,7 @@ L'utilisation de `history.pushState` crée de nouvelles entrées dans l'historiq
Si vous essayez de cliquer plusieurs fois sur le bouton Précédent, vous verrez que l'URL actuelle change et que l'historique est mis à jour, mais le même modèle reste affiché.
C'est parce que l'application ne sait pas que nous devons appeler `updateRoute()` chaque fois que l'historique change. Si vous jetez un oeil à [ `la documentation de history.pushState`](https://developer.mozilla.org/en-US/docs/Web/API/History/pushState), vous pouvez voir que si l'état change - c'est que nous sommes passés à une URL différente - l'événement [ `popstate`](https://developer.mozilla.org/en-US/docs/Web/API/Window/popstate_event) est déclenché. Nous allons l'utiliser pour résoudre ce problème.
C'est parce que l'application ne sait pas que nous devons appeler `updateRoute()` chaque fois que l'historique change. Si vous jetez un oeil à [ `la documentation de history.pushState`](https://developer.mozilla.org/docs/Web/API/History/pushState), vous pouvez voir que si l'état change - c'est que nous sommes passés à une URL différente - l'événement [ `popstate`](https://developer.mozilla.org/docs/Web/API/Window/popstate_event) est déclenché. Nous allons l'utiliser pour résoudre ce problème.
> Remarque : nous avons utilisé une [fonction fléchée](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions) ici pour déclarer notre gestionnaire d'événements `popstate` pour plus de concision, mais un la fonction normale fonctionnerait de la même manière.
> Remarque : nous avons utilisé une [fonction fléchée](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Functions/Arrow_functions) ici pour déclarer notre gestionnaire d'événements `popstate` pour plus de concision, mais un la fonction normale fonctionnerait de la même manière.
Voici une vidéo de rappel sur les fonctions fléchées :
@ -302,7 +302,7 @@ Ajoutez un nouveau modèle et une route pour une troisième page qui affiche les
## Révision et étude personnelle
Le routage est l'une des parties étonnamment délicates du développement Web, d'autant plus que le Web passe des comportements d'actualisation des pages aux actualisations des pages d'application à page unique. En savoir plus sur [comment le service Azure Static Web App](https://docs.microsoft.com/en-us/azure/static-web-apps/routes?WT.mc_id=academic-13441-cxa) gère le routage . Pouvez-vous expliquer pourquoi certaines des décisions décrites dans ce document sont nécessaires?
Le routage est l'une des parties étonnamment délicates du développement Web, d'autant plus que le Web passe des comportements d'actualisation des pages aux actualisations des pages d'application à page unique. En savoir plus sur [comment le service Azure Static Web App](https://docs.microsoft.com/azure/static-web-apps/routes?WT.mc_id=academic-13441-cxa) gère le routage . Pouvez-vous expliquer pourquoi certaines des décisions décrites dans ce document sont nécessaires?
- आपको स्क्रीन स्विच करते समय पूरे HTML को फिर से लोड करना होगा, जो धीमा हो सकता है।
- विभिन्न स्क्रीन के बीच डेटा साझा करना मुश्किल है।
एक अन्य दृष्टिकोण में केवल एक HTML फ़ाइल है, और `<template>` तत्व का उपयोग करके कई [HTML टेम्पलेट्स](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/template) को परिभाषित करें। एक टेम्पलेट एक पुन: प्रयोज्य HTML ब्लॉक है जो ब्राउज़र द्वारा प्रदर्शित नहीं किया जाता है, और जावास्क्रिप्ट का उपयोग करके रनटाइम पर तत्काल किया जाना चाहिए।
एक अन्य दृष्टिकोण में केवल एक HTML फ़ाइल है, और `<template>` तत्व का उपयोग करके कई [HTML टेम्पलेट्स](https://developer.mozilla.org/docs/Web/HTML/Element/template) को परिभाषित करें। एक टेम्पलेट एक पुन: प्रयोज्य HTML ब्लॉक है जो ब्राउज़र द्वारा प्रदर्शित नहीं किया जाता है, और जावास्क्रिप्ट का उपयोग करके रनटाइम पर तत्काल किया जाना चाहिए।
### टास्क
@ -106,9 +106,9 @@
यदि आप अपनी वर्तमान HTML फ़ाइल को किसी ब्राउज़र में आज़माते हैं, तो आप देखेंगे कि यह `Loading...` को प्रदर्शित करता है। ऐसा इसलिए है क्योंकि हमें HTML टेम्प्लेट को इंस्टेंट करने और प्रदर्शित करने के लिए कुछ जावास्क्रिप्ट कोड जोड़ना होगा।
एक टेम्पलेट को तत्काल बनाना आमतौर पर 3 चरणों में किया जाता है:
1. DOM में टेम्पलेट तत्व को पुनः प्राप्त करें, उदाहरण के लिए [`document.getElementById`](https://developer.mozilla.org/en-US/docs/Web/API/Document/getEgetById) का उपयोग करके।
2. टेम्पलेट तत्व को क्लोन करें, [`cloneNode`](https://developer.mozilla.org/en-US/docs/Web/API/Node/cloneNode) का उपयोग करके।
3. इसे एक दृश्य तत्व के तहत DOM में संलग्न करें, उदाहरण के लिए [`appendChild`](https://developer.mozilla.org/en-US/docs/Web/API/Node/appendChild) का उपयोग करके।
1. DOM में टेम्पलेट तत्व को पुनः प्राप्त करें, उदाहरण के लिए [`document.getElementById`](https://developer.mozilla.org/docs/Web/API/Document/getEgetById) का उपयोग करके।
2. टेम्पलेट तत्व को क्लोन करें, [`cloneNode`](https://developer.mozilla.org/docs/Web/API/Node/cloneNode) का उपयोग करके।
3. इसे एक दृश्य तत्व के तहत DOM में संलग्न करें, उदाहरण के लिए [`appendChild`](https://developer.mozilla.org/docs/Web/API/Node/appendChild) का उपयोग करके।
✅ DOM को संलग्न करने से पहले हमें टेम्प्लेट को क्लोन करने की आवश्यकता क्यों है? आपको क्या लगता है कि अगर हम इस कदम को छोड़ देते तो क्या होता?
@ -173,7 +173,7 @@ const routes = {
};
```
अब चलो `updateRoute` फ़ंक्शन को थोड़ा संशोधित करते हैं। एक तर्क के रूप में सीधे `templateId` पास करने के बजाय, हम पहले वर्तमान URL को देखकर इसे पुनः प्राप्त करना चाहते हैं, और फिर संबंधित टेम्पलेट आईडी मान प्राप्त करने के लिए हमारे मानचित्र का उपयोग करते हैं। URL से केवल पथ अनुभाग प्राप्त करने के लिए हम [`window.location.pathname`](https://developer.mozilla.org/en-US/docs/Web/API/Location/pathname) का उपयोग कर सकते हैं।
अब चलो `updateRoute` फ़ंक्शन को थोड़ा संशोधित करते हैं। एक तर्क के रूप में सीधे `templateId` पास करने के बजाय, हम पहले वर्तमान URL को देखकर इसे पुनः प्राप्त करना चाहते हैं, और फिर संबंधित टेम्पलेट आईडी मान प्राप्त करने के लिए हमारे मानचित्र का उपयोग करते हैं। URL से केवल पथ अनुभाग प्राप्त करने के लिए हम [`window.location.pathname`](https://developer.mozilla.org/docs/Web/API/Location/pathname) का उपयोग कर सकते हैं।
```js
function updateRoute() {
@ -201,9 +201,9 @@ function updateRoute() {
हमने पहले ही `updateRoute` फ़ंक्शन के साथ दूसरे भाग का ध्यान रखा, इसलिए हमें यह पता लगाना होगा कि वर्तमान URL को कैसे अपडेट किया जाए।
हमें जावास्क्रिप्ट और अधिक विशेष रूप से [`history.pushState`](https://developer.mozilla.org/en-US/docs/Web/API/History/pushState) का उपयोग करना होगा जो URL को अपडेट करने की अनुमति देता है HTML को पुनः लोड किए बिना, ब्राउज़िंग इतिहास में एक नई प्रविष्टि बनाएँ।
हमें जावास्क्रिप्ट और अधिक विशेष रूप से [`history.pushState`](https://developer.mozilla.org/docs/Web/API/History/pushState) का उपयोग करना होगा जो URL को अपडेट करने की अनुमति देता है HTML को पुनः लोड किए बिना, ब्राउज़िंग इतिहास में एक नई प्रविष्टि बनाएँ।
> नोट: जबकि HTML एंकर तत्व [`<ahref>`] (https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a) का उपयोग हाइपरलिंक बनाने के लिए स्वयं किया जा सकता है विभिन्न यूआरएल, यह ब्राउज़र को डिफ़ॉल्ट रूप से HTML को फिर से लोड करेगा। क्लिक करें घटना पर preventDefault() फ़ंक्शन का उपयोग करके कस्टम जावास्क्रिप्ट के साथ रूटिंग को हैंडल करते समय इस व्यवहार को रोकना आवश्यक है।
> नोट: जबकि HTML एंकर तत्व [`<ahref>`] (https://developer.mozilla.org/docs/Web/HTML/Element/a) का उपयोग हाइपरलिंक बनाने के लिए स्वयं किया जा सकता है विभिन्न यूआरएल, यह ब्राउज़र को डिफ़ॉल्ट रूप से HTML को फिर से लोड करेगा। क्लिक करें घटना पर preventDefault() फ़ंक्शन का उपयोग करके कस्टम जावास्क्रिप्ट के साथ रूटिंग को हैंडल करते समय इस व्यवहार को रोकना आवश्यक है।
### टास्क
@ -250,7 +250,7 @@ HTML में हमारे *लॉगिन* और *लॉगआउट* ल
[`onclick`](https://developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers/onclick) विशेषता का उपयोग करके जावास्क्रिप्ट कोड पर `click` ईवेंट को बांधें, यहाँ `navigate()` फ़ंक्शन पर कॉल करें।
[`onclick`](https://developer.mozilla.org/docs/Web/API/GlobalEventHandlers/onclick) विशेषता का उपयोग करके जावास्क्रिप्ट कोड पर `click` ईवेंट को बांधें, यहाँ `navigate()` फ़ंक्शन पर कॉल करें।
इन लिंक पर क्लिक करने का प्रयास करें, अब आपको अपने ऐप के विभिन्न स्क्रीन के बीच नेविगेट करने में सक्षम होना चाहिए।
@ -264,7 +264,7 @@ HTML में हमारे *लॉगिन* और *लॉगआउट* ल
यदि आप कुछ बार बैक बटन पर क्लिक करने का प्रयास करते हैं, तो आप देखेंगे कि वर्तमान URL बदल जाता है और इतिहास अपडेट हो जाता है, लेकिन वही टेम्पलेट प्रदर्शित होता रहता है।
ऐसा इसलिए है क्योंकि हमें नहीं पता है कि इतिहास बदलने के लिए हमें हर बार `updateRoute()` को कॉल करना होगा। यदि आप [`history.pushState` दस्तावेज़ीकरण](https://developer.mozilla.org/en-US/docs/Web/API/History/pushState) पर एक नज़र डालते हैं, तो आप देख सकते हैं कि यदि राज्य बदलता है - इसका अर्थ है कि हम एक अलग URL पर चले गए - [`popstate`] (https://developer.mozilla.org/en-US/docs/Web/API/Window/popstate_event) इवेंट ट्रिगर है। हम उस समस्या को ठीक करने के लिए इसका उपयोग करेंगे।
ऐसा इसलिए है क्योंकि हमें नहीं पता है कि इतिहास बदलने के लिए हमें हर बार `updateRoute()` को कॉल करना होगा। यदि आप [`history.pushState` दस्तावेज़ीकरण](https://developer.mozilla.org/docs/Web/API/History/pushState) पर एक नज़र डालते हैं, तो आप देख सकते हैं कि यदि राज्य बदलता है - इसका अर्थ है कि हम एक अलग URL पर चले गए - [`popstate`] (https://developer.mozilla.org/docs/Web/API/Window/popstate_event) इवेंट ट्रिगर है। हम उस समस्या को ठीक करने के लिए इसका उपयोग करेंगे।
> नोट: हमने एक [एरो फंक्शन](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Reference/Arrow_functions) का इस्तेमाल किया है ताकि हम अपने `poopstate` ईवेंट हैंडलर को संक्षिप्तता के लिए घोषित कर सकें, लेकिन नियमित कार्य एक ही काम करेगा।
> नोट: हमने एक [एरो फंक्शन](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Reference/Arrow_functions) का इस्तेमाल किया है ताकि हम अपने `poopstate` ईवेंट हैंडलर को संक्षिप्तता के लिए घोषित कर सकें, लेकिन नियमित कार्य एक ही काम करेगा।
यहां एरो फंक्शन पर एक ताज़ा वीडियो है:
@ -297,7 +297,7 @@ updateRoute();
## समीक्षा और स्व अध्ययन
रूटिंग वेब विकास के आश्चर्यजनक रूप से मुश्किल भागों में से एक है, विशेष रूप से वेब पेज रीफ्रेश बिहेवियर से लेकर सिंगल पेज एप्लीकेशन पेज रिफ्रेश तक चलता है। [कैसे Azure स्टेटिक वेब ऐप सेवा](https://docs.microsoft.com/en-us/azure/static-web-apps/routes?WT.mc_id=academic-13441-cxa) के बारे में थोड़ा पढ़ें रूटिंग । क्या आप बता सकते हैं कि उस दस्तावेज़ पर वर्णित कुछ निर्णय क्यों आवश्यक हैं?
रूटिंग वेब विकास के आश्चर्यजनक रूप से मुश्किल भागों में से एक है, विशेष रूप से वेब पेज रीफ्रेश बिहेवियर से लेकर सिंगल पेज एप्लीकेशन पेज रिफ्रेश तक चलता है। [कैसे Azure स्टेटिक वेब ऐप सेवा](https://docs.microsoft.com/azure/static-web-apps/routes?WT.mc_id=academic-13441-cxa) के बारे में थोड़ा पढ़ें रूटिंग । क्या आप बता सकते हैं कि उस दस्तावेज़ पर वर्णित कुछ निर्णय क्यों आवश्यक हैं?
`<form>` एलेमेन्ट एक HTML दस्तावेज़ के एक भाग को एन्क्रिप्ट करता है जहां उपयोगकर्ता इनपुट कर सकता है और इंटरैक्टिव नियंत्रणों के साथ डेटा जमा कर सकता है। सभी प्रकार के उपयोगकर्ता इंटरफ़ेस (UI) नियंत्रण हैं जिनका उपयोग एक फॉर्म के भीतर किया जा सकता है, सबसे आम है `<input>` और `<button>` एलेमेन्ट ।
`<input>` के विभिन्न [प्रकार](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input) के कई उदाहरण हैं, उदाहरण के लिए एक फ़ील्ड बनाने के लिए जहां उपयोगकर्ता आप उपयोग कर सकते हैं इसके उपयोगकर्ता नाम दर्ज कर सकते हैं:
`<input>` के विभिन्न [प्रकार](https://developer.mozilla.org/docs/Web/HTML/Element/input) के कई उदाहरण हैं, उदाहरण के लिए एक फ़ील्ड बनाने के लिए जहां उपयोगकर्ता आप उपयोग कर सकते हैं इसके उपयोगकर्ता नाम दर्ज कर सकते हैं:
```html
<inputid="username"name="username"type="text">
@ -36,9 +36,9 @@ curl http://localhost:5000/api
जब फॉर्म डेटा को भेज दिया जाएगा तो `name` विशेषता को संपत्ति के नाम के रूप में उपयोग किया जाएगा। `id` विशेषता का उपयोग फॉर्म नियंत्रण के साथ एक `label` को जोड़ने के लिए किया जाता है।
>
एक विचार पाने के लिए [`<input>` प्रकार](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input) और [अन्य फोरम कोन्टरोल्स](https://developer.mozilla.org/en-US/docs/Learn/Forms/Other_form_controls) की संपूर्ण सूची पर एक नज़र डालें अपने UI का निर्माण करते समय आप उपयोग कर सकते हैं सभी देशी UI तत्व।
एक विचार पाने के लिए [`<input>` प्रकार](https://developer.mozilla.org/docs/Web/HTML/Element/input) और [अन्य फोरम कोन्टरोल्स](https://developer.mozilla.org/docs/Learn/Forms/Other_form_controls) की संपूर्ण सूची पर एक नज़र डालें अपने UI का निर्माण करते समय आप उपयोग कर सकते हैं सभी देशी UI तत्व।
✅ ध्यान दें कि `<input>` एक [खाली एलेमेन्ट](https://developer.mozilla.org/en-US/docs/Glossary/Empty_element) है, जिस पर आपको एक मिलान समापन टैग नहीं जोड़ना चाहिए। हालाँकि आप स्व-समापन `<input/>` संकेतन का उपयोग कर सकते हैं, लेकिन इसकी आवश्यकता नहीं है।
✅ ध्यान दें कि `<input>` एक [खाली एलेमेन्ट](https://developer.mozilla.org/docs/Glossary/Empty_element) है, जिस पर आपको एक मिलान समापन टैग नहीं जोड़ना चाहिए। हालाँकि आप स्व-समापन `<input/>` संकेतन का उपयोग कर सकते हैं, लेकिन इसकी आवश्यकता नहीं है।
फॉर्म के भीतर `<button>` एलेमेन्ट थोड़ा विशेष है। यदि आप इसकी `type` विशेषता निर्दिष्ट नहीं करते हैं, तो यह स्वचालित रूप से दबाए जाने पर सर्वर को फॉर्म डेटा प्रस्तुत करेगा। यहां संभावित `type` मान दिए गए हैं:
@ -69,7 +69,7 @@ curl http://localhost:5000/api
- एक लेबल को फोरम कोन्टरोल्स से जोड़कर, यह उपयोगकर्ताओं को सहायक तकनीकों (जैसे कि स्क्रीन रीडर) का उपयोग करके यह समझने में मदद करता है कि उन्हें क्या डेटा प्रदान करने की उम्मीद है।
- आप संबंधित इनपुट पर सीधे ध्यान केंद्रित करने के लिए लेबल पर क्लिक कर सकते हैं, जिससे टच-स्क्रीन आधारित उपकरणों तक पहुंचना आसान हो जाता है।
> वेब पर [एक्सेसिबिलिटी](https://developer.mozilla.org/en-US/docs/Learn/Accessibility/What_is_accessibility) एक बहुत ही महत्वपूर्ण विषय है जिसकी अक्सर अनदेखी की जाती है। [अर्थ संबंधी HTML एलेमेन्टस](https://developer.mozilla.org/en-US/docs/Learn/Accessibility/HTML) के लिए धन्यवाद यदि आप इन्हें ठीक से उपयोग करते हैं तो सुलभ सामग्री बनाना मुश्किल नहीं है। सामान्य गलतियों से बचने और एक जिम्मेदार डेवलपर बनने के लिए आप (पहुंच के बारे में और अधिक पढ़ सकते हैं](https://developer.mozilla.org/en-US/docs/Web/Accessibility)।
> वेब पर [एक्सेसिबिलिटी](https://developer.mozilla.org/docs/Learn/Accessibility/What_is_accessibility) एक बहुत ही महत्वपूर्ण विषय है जिसकी अक्सर अनदेखी की जाती है। [अर्थ संबंधी HTML एलेमेन्टस](https://developer.mozilla.org/docs/Learn/Accessibility/HTML) के लिए धन्यवाद यदि आप इन्हें ठीक से उपयोग करते हैं तो सुलभ सामग्री बनाना मुश्किल नहीं है। सामान्य गलतियों से बचने और एक जिम्मेदार डेवलपर बनने के लिए आप (पहुंच के बारे में और अधिक पढ़ सकते हैं](https://developer.mozilla.org/docs/Web/Accessibility)।
अब हम पंजीकरण के लिए दूसरा रूप जोड़ेंगे, पिछले एक के नीचे:
@ -157,7 +157,7 @@ function register() {
}
```
यहाँ हम `getElementById()` का उपयोग कर फॉर्म एलिमेंट को पुनः प्राप्त करते हैं और फॉर्म से मान निकालने के लिए [`FormData`](https://developer.mozilla.org/en-US/docs/Web/API/FormData/) का उपयोग करते हैं। की/वैल्यू जोड़े के एक सेट के रूप में नियंत्रण। फिर हम [`Object.fromEntries()`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Object/Object/fromEntries) का उपयोग करके डेटा को एक नियमित ऑब्जेक्ट में परिवर्तित करते हैं और अंत में डेटा को [JSON](https://www.json.org/json-en.html) में क्रमबद्ध करते हैं, आमतौर पर वेब पर डेटा के आदान-प्रदान के लिए उपयोग किया जाने वाला प्रारूप।
यहाँ हम `getElementById()` का उपयोग कर फॉर्म एलिमेंट को पुनः प्राप्त करते हैं और फॉर्म से मान निकालने के लिए [`FormData`](https://developer.mozilla.org/docs/Web/API/FormData/) का उपयोग करते हैं। की/वैल्यू जोड़े के एक सेट के रूप में नियंत्रण। फिर हम [`Object.fromEntries()`](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Object/Object/fromEntries) का उपयोग करके डेटा को एक नियमित ऑब्जेक्ट में परिवर्तित करते हैं और अंत में डेटा को [JSON](https://www.json.org/json-en.html) में क्रमबद्ध करते हैं, आमतौर पर वेब पर डेटा के आदान-प्रदान के लिए उपयोग किया जाने वाला प्रारूप।
डेटा अब सर्वर पर भेजे जाने के लिए तैयार है। `CreateAccount` नामक एक नया फ़ंक्शन बनाएँ:
@ -176,7 +176,7 @@ async function createAccount(account) {
}
```
यह क्या कार्य कर रहा है? सबसे पहले, यहां `async` कीवर्ड देखें। इसका मतलब है कि फ़ंक्शन में कोड शामिल है जो [**asynchronously**](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/async_function) को निष्पादित करेगा। जब `await` कीवर्ड का उपयोग किया जाता है, तो यह एसिंक्रोनस कोड को निष्पादित करने के लिए प्रतीक्षा करने की अनुमति देता है - जैसे सर्वर प्रतिक्रिया का इंतजार यहां जारी रखने से पहले।
यह क्या कार्य कर रहा है? सबसे पहले, यहां `async` कीवर्ड देखें। इसका मतलब है कि फ़ंक्शन में कोड शामिल है जो [**asynchronously**](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/async_function) को निष्पादित करेगा। जब `await` कीवर्ड का उपयोग किया जाता है, तो यह एसिंक्रोनस कोड को निष्पादित करने के लिए प्रतीक्षा करने की अनुमति देता है - जैसे सर्वर प्रतिक्रिया का इंतजार यहां जारी रखने से पहले।
यहाँ `async/await` उपयोग के बारे में एक त्वरित वीडियो है:
@ -220,7 +220,7 @@ async function register() {
}
```
वह थोड़ा लंबा था लेकिन हम वहां पहुंच गए! यदि आप अपने [ब्राउज़र डेवलपर टूल] (https://developer.mozilla.org/en-US/docs/Learn/Common_questions/What_are_browser_developer_tools) खोलते हैं, और एक नया खाता आज़माते हैं, तो आपको वेब पेज पर कोई बदलाव नहीं देखना चाहिए लेकिन एक संदेश कंसोल में दिखाई देगा जो पुष्टि करता है कि सब कुछ काम करता है।
वह थोड़ा लंबा था लेकिन हम वहां पहुंच गए! यदि आप अपने [ब्राउज़र डेवलपर टूल] (https://developer.mozilla.org/docs/Learn/Common_questions/What_are_browser_developer_tools) खोलते हैं, और एक नया खाता आज़माते हैं, तो आपको वेब पेज पर कोई बदलाव नहीं देखना चाहिए लेकिन एक संदेश कंसोल में दिखाई देगा जो पुष्टि करता है कि सब कुछ काम करता है।
@ -228,15 +228,15 @@ async function register() {
## डेटा मान्य
यदि आप पहले उपयोगकर्ता नाम सेट किए बिना एक नया खाता पंजीकृत करने का प्रयास करते हैं, तो आप देख सकते हैं कि सर्वर स्थिति कोड [400 (खराब अनुरोध)](https://developer.mozilla.org/en-US/docs/Web/HTTP/Status/400#:~:text=The%20HyperText%20Transfer%20Protocol%20(HTTP,%2C%20or%20deceptive%20request%20routing).) के साथ एक त्रुटि देता है
यदि आप पहले उपयोगकर्ता नाम सेट किए बिना एक नया खाता पंजीकृत करने का प्रयास करते हैं, तो आप देख सकते हैं कि सर्वर स्थिति कोड [400 (खराब अनुरोध)](https://developer.mozilla.org/docs/Web/HTTP/Status/400#:~:text=The%20HyperText%20Transfer%20Protocol%20(HTTP,%2C%20or%20deceptive%20request%20routing).) के साथ एक त्रुटि देता है
किसी सर्वर पर डेटा भेजने से पहले, जब संभव हो, एक वैध अनुरोध भेजना सुनिश्चित करने के लिए पहले से [फॉर्म डेटा को मान्य करें](https://developer.mozilla.org/en-US/docs/Learn/Forms/Form_validation) यह एक अच्छा अभ्यास है। HTML5 फॉर्म नियंत्रण विभिन्न विशेषताओं का उपयोग करके अंतर्निहित मान्यता प्रदान करता है:
किसी सर्वर पर डेटा भेजने से पहले, जब संभव हो, एक वैध अनुरोध भेजना सुनिश्चित करने के लिए पहले से [फॉर्म डेटा को मान्य करें](https://developer.mozilla.org/docs/Learn/Forms/Form_validation) यह एक अच्छा अभ्यास है। HTML5 फॉर्म नियंत्रण विभिन्न विशेषताओं का उपयोग करके अंतर्निहित मान्यता प्रदान करता है:
- `required`: फ़ील्ड को भरने की आवश्यकता है अन्यथा फॉर्म जमा नहीं किया जा सकता है।
- `minlength` और `maxlength`: टेक्स्ट क्षेत्रों में न्यूनतम और अधिकतम वर्णों को परिभाषित करता है।
- `min` और `max`:एक संख्यात्मक क्षेत्र के न्यूनतम और अधिकतम मूल्य को परिभाषित करता है।
- `type`: अपेक्षित डेटा के प्रकार को परिभाषित करता है, जैसे `number`, `email`, `file` या [अन्य निर्मित प्रकार](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input). यह विशेषता फॉर्म नियंत्रण के दृश्य रेंडरिंग को भी बदल सकती है.
- `pattern`: एक [रेगुलर इक्स्प्रेशन](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Regular_Expressions) पैटर्न को निर्धारित करने के लिए परीक्षण करने की अनुमति देता है कि दर्ज किया गया डेटा वैध है या नहीं।
- `type`: अपेक्षित डेटा के प्रकार को परिभाषित करता है, जैसे `number`, `email`, `file` या [अन्य निर्मित प्रकार](https://developer.mozilla.org/docs/Web/HTML/Element/input). यह विशेषता फॉर्म नियंत्रण के दृश्य रेंडरिंग को भी बदल सकती है.
- `pattern`: एक [रेगुलर इक्स्प्रेशन](https://developer.mozilla.org/docs/Web/JavaScript/Guide/Regular_Expressions) पैटर्न को निर्धारित करने के लिए परीक्षण करने की अनुमति देता है कि दर्ज किया गया डेटा वैध है या नहीं।
> युक्ति: यदि आप मान्य हैं और `:valid` और `:invalid` CSS छद्म-क्लेसे का उपयोग नहीं कर रहे हैं, तो आप अपने फ़ॉर्म नियंत्रणों को अनुकूलित कर सकते हैं।s.
> [網頁親和力](https://developer.mozilla.org/en-US/docs/Learn/Accessibility/What_is_accessibility)是非常重要但常被忽視的主題。感謝[語義化 HTML 元素](https://developer.mozilla.org/en-US/docs/Learn/Accessibility/HTML)的幫助，建立無障礙的網頁內容變得更加容易。你可以[閱讀更多有關網頁親和力的文章](https://developer.mozilla.org/en-US/docs/Web/Accessibility)，避免觸犯到常見的錯誤並成為負責任的開發者。
> [網頁親和力](https://developer.mozilla.org/docs/Learn/Accessibility/What_is_accessibility)是非常重要但常被忽視的主題。感謝[語義化 HTML 元素](https://developer.mozilla.org/docs/Learn/Accessibility/HTML)的幫助，建立無障礙的網頁內容變得更加容易。你可以[閱讀更多有關網頁親和力的文章](https://developer.mozilla.org/docs/Web/Accessibility)，避免觸犯到常見的錯誤並成為負責任的開發者。
在傳輸資料給伺服器之前，最好先[驗證表單資料](https://developer.mozilla.org/en-US/docs/Learn/Forms/Form_validation)，以確保我們傳送合法的網頁請求。 HTML5 表單控制內建包含了驗證方法，使用了多樣的屬性： controls provides built-in validation using various attributes:
在傳輸資料給伺服器之前，最好先[驗證表單資料](https://developer.mozilla.org/docs/Learn/Forms/Form_validation)，以確保我們傳送合法的網頁請求。 HTML5 表單控制內建包含了驗證方法，使用了多樣的屬性： controls provides built-in validation using various attributes:
जब वेब एप्लिकेशन अधिक जटिल और संवादात्मक होने लगे, तो [AJAX (असिंक्रोनोस जावास्क्रिप्ट और XML)](https://en.wikipedia.org/wiki/Ajax_(programming)) नामक एक नई तकनीक सामने आई। यह तकनीक वेब ऐप्स को HTML पेज को फिर से लोड किए बिना, जावास्क्रिप्ट के उपयोग से सर्वर से असिंक्रोनोस रूप से डेटा भेजने और पुनः प्राप्त करने की अनुमति देती है, जिसके परिणामस्वरूप तेज़ अपडेट और सुगम उपयोगकर्ता सहभागिता होती है। जब सर्वर से नया डेटा प्राप्त होता है, तो वर्तमान HTML पृष्ठ को [DOM](https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Melel) API का उपयोग करके जावास्क्रिप्ट के साथ भी अपडेट किया जा सकता है। समय के साथ, यह दृष्टिकोण अब एक [* सिंगल-पेज एप्लिकेशन* या *एसपीए*](https://en.wikipedia.org/wiki/Single-page_application) कहलाता है।
जब वेब एप्लिकेशन अधिक जटिल और संवादात्मक होने लगे, तो [AJAX (असिंक्रोनोस जावास्क्रिप्ट और XML)](https://en.wikipedia.org/wiki/Ajax_(programming)) नामक एक नई तकनीक सामने आई। यह तकनीक वेब ऐप्स को HTML पेज को फिर से लोड किए बिना, जावास्क्रिप्ट के उपयोग से सर्वर से असिंक्रोनोस रूप से डेटा भेजने और पुनः प्राप्त करने की अनुमति देती है, जिसके परिणामस्वरूप तेज़ अपडेट और सुगम उपयोगकर्ता सहभागिता होती है। जब सर्वर से नया डेटा प्राप्त होता है, तो वर्तमान HTML पृष्ठ को [DOM](https://developer.mozilla.org/docs/Web/API/Document_Object_Melel) API का उपयोग करके जावास्क्रिप्ट के साथ भी अपडेट किया जा सकता है। समय के साथ, यह दृष्टिकोण अब एक [* सिंगल-पेज एप्लिकेशन* या *एसपीए*](https://en.wikipedia.org/wiki/Single-page_application) कहलाता है।
जब AJAX पहली बार पेश किया गया था, तो डेटा को अतुल्य रूप से लाने के लिए उपलब्ध एकमात्र API [`XMLHttpRequest`](https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/Using_XMLHttpRequest) था। लेकिन आधुनिक ब्राउज़र अब अधिक सुविधाजनक और शक्तिशाली [`Fetch` API](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API) लागू करते हैं, जो प्रामिसेस का उपयोग करता है और हेरफेर करने के लिए बेहतर अनुकूल है JSON डेटा।
जब AJAX पहली बार पेश किया गया था, तो डेटा को अतुल्य रूप से लाने के लिए उपलब्ध एकमात्र API [`XMLHttpRequest`](https://developer.mozilla.org/docs/Web/API/XMLHttpRequest/Using_XMLHttpRequest) था। लेकिन आधुनिक ब्राउज़र अब अधिक सुविधाजनक और शक्तिशाली [`Fetch` API](https://developer.mozilla.org/docs/Web/API/Fetch_API) लागू करते हैं, जो प्रामिसेस का उपयोग करता है और हेरफेर करने के लिए बेहतर अनुकूल है JSON डेटा।
> जबकि सभी आधुनिक ब्राउज़र `Fetch API` का समर्थन करते हैं, यदि आप चाहते हैं कि आपका वेब एप्लिकेशन विरासत या पुराने ब्राउज़रों पर काम करे, तो यह हमेशा एक अच्छा विचार है कि [caniuse.com पर संगतता तालिका](https://caniuse.com/fetch) पहले की जाँच करें।
@ -63,7 +63,7 @@ async function getAccount(user) {
}
```
हम सर्वर से एसिंक्रोनस रूप से डेटा का अनुरोध करने के लिए `fetch` एपीआई का उपयोग करते हैं, लेकिन इस बार हमें कॉल करने के लिए URL के अलावा किसी भी अतिरिक्त पैरामीटर की आवश्यकता नहीं है, क्योंकि हम केवल डेटा क्वेरी कर रहे हैं। डिफ़ॉल्ट रूप से, 'fetch' एक [`GET`](https://developer.mozilla.org/en-US/docs/Web/HTTP/Methods/GET) HTTP अनुरोध बनाता है , जो हम यहाँ चाह रहे हैं।
हम सर्वर से एसिंक्रोनस रूप से डेटा का अनुरोध करने के लिए `fetch` एपीआई का उपयोग करते हैं, लेकिन इस बार हमें कॉल करने के लिए URL के अलावा किसी भी अतिरिक्त पैरामीटर की आवश्यकता नहीं है, क्योंकि हम केवल डेटा क्वेरी कर रहे हैं। डिफ़ॉल्ट रूप से, 'fetch' एक [`GET`](https://developer.mozilla.org/docs/Web/HTTP/Methods/GET) HTTP अनुरोध बनाता है , जो हम यहाँ चाह रहे हैं।
✅ `encodeURIComponent()` एक फ़ंक्शन है जो URL के लिए विशेष वर्णों से बच जाता है। यदि हम इस फ़ंक्शन को कॉल नहीं करते हैं और URL में सीधे `user` वैल्यू का उपयोग करते हैं, तो संभवतः हमारे पास क्या समस्याएँ हो सकती हैं?
@ -109,19 +109,19 @@ account = result;
navigate('/dashboard');
```
✅ क्या आप जानते हैं कि डिफ़ॉल्ट रूप से, आप सर्वर API को केवल उसी वेब पेज से *उसी डोमेन और पोर्ट* से कॉल कर सकते हैं जो आप देख रहे हैं? यह सुरक्षा तंत्र है जो ब्राउज़र द्वारा लागू किया जाता है। लेकिन रुकिए, हमारा वेब ऐप `localhost:3000` पर चल रहा है जबकि सर्वर एपीआई `localhost:5000` पर चल रहा है, यह काम क्यों नहीं करता है? [क्रॉस-ओरिजिनल रिसोर्स शेयरिंग (CORS)](https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS) नामक तकनीक का उपयोग करके, क्रॉस-ऑरिजनल HTTP रिक्वेस्ट करना संभव है अगर सर्वर प्रतिक्रिया के लिए विशेष हेडर जोड़ता है, विशिष्ट डोमेन के लिए अपवाद की अनुमति देता है।
✅ क्या आप जानते हैं कि डिफ़ॉल्ट रूप से, आप सर्वर API को केवल उसी वेब पेज से *उसी डोमेन और पोर्ट* से कॉल कर सकते हैं जो आप देख रहे हैं? यह सुरक्षा तंत्र है जो ब्राउज़र द्वारा लागू किया जाता है। लेकिन रुकिए, हमारा वेब ऐप `localhost:3000` पर चल रहा है जबकि सर्वर एपीआई `localhost:5000` पर चल रहा है, यह काम क्यों नहीं करता है? [क्रॉस-ओरिजिनल रिसोर्स शेयरिंग (CORS)](https://developer.mozilla.org/docs/Web/HTTP/CORS) नामक तकनीक का उपयोग करके, क्रॉस-ऑरिजनल HTTP रिक्वेस्ट करना संभव है अगर सर्वर प्रतिक्रिया के लिए विशेष हेडर जोड़ता है, विशिष्ट डोमेन के लिए अपवाद की अनुमति देता है।
> इसे [पाठ](https://docs.microsoft.com/en-us/learn/modules/use-apis-discover-museum-art?WT.mc_id=academic-13441-cxa) ले कर एपीआई के बारे में और जानें
> इसे [पाठ](https://docs.microsoft.com/learn/modules/use-apis-discover-museum-art?WT.mc_id=academic-13441-cxa) ले कर एपीआई के बारे में और जानें
## डेटा प्रदर्शित करने के लिए HTML अपडेट करें
अब जब हमारे पास उपयोगकर्ता डेटा है, तो हमें इसे प्रदर्शित करने के लिए मौजूदा HTML को अपडेट करना होगा। हम पहले से ही जानते हैं कि DOM से एक एलेमेन्ट कैसे प्राप्त किया जा सकता है उदाहरण के लिए `document.getElementById()` का उपयोग करना। आपके पास आधार एलेमेन्ट होने के बाद, यहां कुछ API हैं जिनका उपयोग आप इसे संशोधित करने या इसमें बाल एलेमेन्ट जोड़ने के लिए कर सकते हैं:
- [`TextContent`](https://developer.mozilla.org/en-US/docs/Web/API/Node/textContent) प्रॉपर्टी का उपयोग करके आप किसी एलेमेन्ट का पाठ बदल सकते हैं। ध्यान दें कि इस मान को बदलने से सभी एलेमेन्ट के बच्चे (यदि कोई हो) को हटा देता है और प्रदान किए गए पाठ के साथ बदल देता है। जैसे, यह किसी दिए गए एलेमेन्ट के सभी बच्चों को एक खाली स्ट्रिंग `''` को निर्दिष्ट करके निकालने की एक कुशल विधि है।
- [`TextContent`](https://developer.mozilla.org/docs/Web/API/Node/textContent) प्रॉपर्टी का उपयोग करके आप किसी एलेमेन्ट का पाठ बदल सकते हैं। ध्यान दें कि इस मान को बदलने से सभी एलेमेन्ट के बच्चे (यदि कोई हो) को हटा देता है और प्रदान किए गए पाठ के साथ बदल देता है। जैसे, यह किसी दिए गए एलेमेन्ट के सभी बच्चों को एक खाली स्ट्रिंग `''` को निर्दिष्ट करके निकालने की एक कुशल विधि है।
- [`document.createElement()`](https://developer.mozilla.org/en-US/docs/Web/API/Document/createElement) के साथ [`append()`](https://developer.mozilla.org/en-US/docs/Web/API/ParentNode/append) विधि का उपयोग करके आप बना सकते हैं और एक या अधिक नए बाल एलेमेन्ट संलग्न करें।
- [`document.createElement()`](https://developer.mozilla.org/docs/Web/API/Document/createElement) के साथ [`append()`](https://developer.mozilla.org/docs/Web/API/ParentNode/append) विधि का उपयोग करके आप बना सकते हैं और एक या अधिक नए बाल एलेमेन्ट संलग्न करें।
✅ किसी एलेमेन्ट की प्रॉपर्टी का उपयोग करते हुए [`innerHTML`](https://developer.mozilla.org/en-US/docs/Web/API/Element/innerHTML) का उपयोग करना संभव है, लेकिन यह एक होना चाहिए [क्रॉस-साइट स्क्रिप्टिंग (XSS)](https://developer.mozilla.org/en-US/docs/Glossary/Cross-site_scripting) हमलों के कारण इसकी चपेट में आने से बचा जा सकता है।
✅ किसी एलेमेन्ट की प्रॉपर्टी का उपयोग करते हुए [`innerHTML`](https://developer.mozilla.org/docs/Web/API/Element/innerHTML) का उपयोग करना संभव है, लेकिन यह एक होना चाहिए [क्रॉस-साइट स्क्रिप्टिंग (XSS)](https://developer.mozilla.org/docs/Glossary/Cross-site_scripting) हमलों के कारण इसकी चपेट में आने से बचा जा सकता है।
### टास्क
@ -160,7 +160,7 @@ if (data.error) {
अब हमारे पास त्रुटि पाठ है जो नेत्रहीन रूप से दिखाई देता है, लेकिन यदि आप इसे एक स्क्रीन रीडर के साथ आज़माते हैं तो आप देखेंगे कि कुछ भी घोषित नहीं हुआ है। पाठ पाठकों के लिए गतिशील रूप से एक पृष्ठ में जोड़े जाने की घोषणा के लिए, इसे [लाइव रीजन](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Live_Regions) नामक कुछ का उपयोग करने की आवश्यकता होगी। यहां हम एक विशिष्ट प्रकार के लाइव क्षेत्र का उपयोग करने जा रहे हैं, जिसे अलर्ट कहा जाता है:
अब हमारे पास त्रुटि पाठ है जो नेत्रहीन रूप से दिखाई देता है, लेकिन यदि आप इसे एक स्क्रीन रीडर के साथ आज़माते हैं तो आप देखेंगे कि कुछ भी घोषित नहीं हुआ है। पाठ पाठकों के लिए गतिशील रूप से एक पृष्ठ में जोड़े जाने की घोषणा के लिए, इसे [लाइव रीजन](https://developer.mozilla.org/docs/Web/Accessibility/ARIA/ARIA_Live_Regions) नामक कुछ का उपयोग करने की आवश्यकता होगी। यहां हम एक विशिष्ट प्रकार के लाइव क्षेत्र का उपयोग करने जा रहे हैं, जिसे अलर्ट कहा जाता है:
```html
<divid="loginError"role="alert"></div>
@ -225,7 +225,7 @@ function updateDashboard() {
पहले, हम जाँचते हैं कि आगे जाने से पहले हमारे पास खाता डेटा है जो हमें चाहिए। तब हम HTML को अपडेट करने के लिए पहले बनाए गए `updateElement()` फ़ंक्शन का उपयोग करते हैं।
> बैलेंस डिस्प्ले को प्रीटियर करने के लिए, हम दशमलव बिंदु के बाद 2 अंकों के साथ मान प्रदर्शित करने के लिए मजबूर करने के लिए [`toFixed (2)`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/toFixed) विधि का उपयोग करते हैं।
> बैलेंस डिस्प्ले को प्रीटियर करने के लिए, हम दशमलव बिंदु के बाद 2 अंकों के साथ मान प्रदर्शित करने के लिए मजबूर करने के लिए [`toFixed (2)`](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Number/toFixed) विधि का उपयोग करते हैं।
अब हमें अपने `updateDashboard()` को हर बार डैशबोर्ड लोड होने पर कॉल करने की आवश्यकता है। यदि आपने पहले ही [पाठ 1 असाइनमेंट](../../1-template-route/translations/assignment.hi.md) को पूरा कर लिया है, तो यह स्ट्रेचेफोवर्ड होना चाहिए, अन्यथा आप निम्नलिखित कार्यान्वयन का उपयोग कर सकते हैं।
@ -250,7 +250,7 @@ const routes = {
## HTML टेम्पलेट के साथ गतिशील रूप से तालिका पंक्तियाँ बनाएं
[पहला पाठ](../../1-template-route/translations/README.hi.md) मे हमने एचटीएमएल टेम्पलेटके साथ [`appendChild()`](https://developer.mozilla.org/en-US/docs/Web/API/Node/appendChild) मेथड को नेवीगेशनके लिए अपने एप मे लागू किया था । टेम्प्लेट छोटे भी हो सकते हैं और किसी पृष्ठ के दोहराए गए भागों को गतिशील रूप से आबाद करने के लिए उपयोग किए जा सकते हैं।
[पहला पाठ](../../1-template-route/translations/README.hi.md) मे हमने एचटीएमएल टेम्पलेटके साथ [`appendChild()`](https://developer.mozilla.org/docs/Web/API/Node/appendChild) मेथड को नेवीगेशनके लिए अपने एप मे लागू किया था । टेम्प्लेट छोटे भी हो सकते हैं और किसी पृष्ठ के दोहराए गए भागों को गतिशील रूप से आबाद करने के लिए उपयोग किए जा सकते हैं।
हम एचटीएमएल तालिका में लेनदेन की सूची प्रदर्शित करने के लिए एक समान दृष्टिकोण का उपयोग करेंगे।
@ -301,7 +301,7 @@ for (const transaction of account.transactions) {
updateElement('transactions', transactionsRows);
```
यहां हम उस मेथड का उपयोग करते हैं [`document.createDocumentFragment()`](https://developer.mozilla.org/en-US/docs/Web/API/Document/createDocumentFragment) जो एक नया DOM टुकड़ा बनाता है जिस पर हम काम कर सकते हैं, अंत में इसे हमारे HTML तालिका में संलग्न करने से पहले।
यहां हम उस मेथड का उपयोग करते हैं [`document.createDocumentFragment()`](https://developer.mozilla.org/docs/Web/API/Document/createDocumentFragment) जो एक नया DOM टुकड़ा बनाता है जिस पर हम काम कर सकते हैं, अंत में इसे हमारे HTML तालिका में संलग्न करने से पहले।
इस कोड के काम करने से पहले अभी भी हमें एक और काम करना है, क्योंकि हमारा `updateElement()` फ़ंक्शन वर्तमान में केवल टेक्स्ट सामग्री का सपोर्ट करता है। आइए इसके कोड को थोड़ा बदलें:
@ -313,7 +313,7 @@ function updateElement(id, textOrNode) {
}
```
हम [`append()`](https://developer.mozilla.org/en-US/docs/Web/API/ParentNode/append) मेथड का उपयोग करते हैं क्योंकि यह टेक्स्ट या [DOM नोड्स](https://developer.mozilla.org/en-US/docs/Web/API/Node) को पेरन्ट एलेमेन्टसे जोड़ने की अनुमति देता है , जो हमारे सभी उपयोग मामलों के लिए एकदम सही है।
हम [`append()`](https://developer.mozilla.org/docs/Web/API/ParentNode/append) मेथड का उपयोग करते हैं क्योंकि यह टेक्स्ट या [DOM नोड्स](https://developer.mozilla.org/docs/Web/API/Node) को पेरन्ट एलेमेन्टसे जोड़ने की अनुमति देता है , जो हमारे सभी उपयोग मामलों के लिए एकदम सही है।
यदि आप लॉगिन करने के लिए `टेस्ट` खाते का उपयोग करने का प्रयास करते हैं, तो आपको अब डैशबोर्ड पर एक लेनदेन सूची देखनी चाहिए 🎉.
@ -321,7 +321,7 @@ function updateElement(id, textOrNode) {
## 🚀 चुनौती
डैशबोर्ड पृष्ठ को वास्तविक बैंकिंग ऐप की तरह बनाने के लिए एक साथ काम करें। यदि आप पहले से ही अपने ऐप को स्टाइल करते हैं, तो डेस्कटॉप और मोबाइल डिवाइस दोनों पर अच्छी तरह से काम करते हुए [उत्तरदायी डिज़ाइन](https://developer.mozilla.org/en-US/docs/Web/Progressive_web_apps/Responsive/responsive_design_building_blocks) बनाने के लिए [मीडिया क्वेरीज़](https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries) का उपयोग करने का प्रयास करें।
डैशबोर्ड पृष्ठ को वास्तविक बैंकिंग ऐप की तरह बनाने के लिए एक साथ काम करें। यदि आप पहले से ही अपने ऐप को स्टाइल करते हैं, तो डेस्कटॉप और मोबाइल डिवाइस दोनों पर अच्छी तरह से काम करते हुए [उत्तरदायी डिज़ाइन](https://developer.mozilla.org/docs/Web/Progressive_web_apps/Responsive/responsive_design_building_blocks) बनाने के लिए [मीडिया क्वेरीज़](https://developer.mozilla.org/docs/Web/CSS/Media_Queries) का उपयोग करने का प्रयास करें।
यहाँ एक सत्यलेड डैशबोर्ड पृष्ठ का उदाहरण दिया गया है:
網頁應用程式變得更加複雜，促使新的技術問世：[AJAX (Asynchronous JavaScript and XML)](https://zh.wikipedia.org/wiki/AJAX)。
這個技巧允許網頁應用程式使用 JavaScript 非同步地傳遞與接收伺服器的資料，不需要重新載入 HTML 頁面，也反映在更快速的更新速率與更流暢的使用者體驗。在接收伺服器的新資料時，目前的 HTML 頁面可以被 JavaScript 利用 [DOM](https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model) API 更新。自此之後，這種流程演變成現今的[*單一頁面應用程式(Single-Page Application)*，*SPA*](https://zh.wikipedia.org/wiki/%E5%8D%95%E9%A1%B5%E5%BA%94%E7%94%A8)。
這個技巧允許網頁應用程式使用 JavaScript 非同步地傳遞與接收伺服器的資料，不需要重新載入 HTML 頁面，也反映在更快速的更新速率與更流暢的使用者體驗。在接收伺服器的新資料時，目前的 HTML 頁面可以被 JavaScript 利用 [DOM](https://developer.mozilla.org/docs/Web/API/Document_Object_Model) API 更新。自此之後，這種流程演變成現今的[*單一頁面應用程式(Single-Page Application)*，*SPA*](https://zh.wikipedia.org/wiki/%E5%8D%95%E9%A1%B5%E5%BA%94%E7%94%A8)。
✅ 使用 [`innerHTML`](https://developer.mozilla.org/en-US/docs/Web/API/Element/innerHTML) 元素屬性也能改變 HTML 的內容，但這方法要避免使用。這可能會遭遇有關[跨網站指令碼 (XSS)](https://developer.mozilla.org/en-US/docs/Glossary/Cross-site_scripting)的攻擊。
✅ 使用 [`innerHTML`](https://developer.mozilla.org/docs/Web/API/Element/innerHTML) 元素屬性也能改變 HTML 的內容，但這方法要避免使用。這可能會遭遇有關[跨網站指令碼 (XSS)](https://developer.mozilla.org/docs/Glossary/Cross-site_scripting)的攻擊。
### 課題
@ -161,7 +161,7 @@ if (data.error) {
現在我們印出錯誤訊息，但螢幕報讀器並沒有做任何報讀。為了讓被動態加入的文字能被螢幕報讀器閱讀出來，我們需要使用 [Live Region](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Live_Regions)。這邊我們使用一種 Live Region 的類型 alert：
現在我們印出錯誤訊息，但螢幕報讀器並沒有做任何報讀。為了讓被動態加入的文字能被螢幕報讀器閱讀出來，我們需要使用 [Live Region](https://developer.mozilla.org/docs/Web/Accessibility/ARIA/ARIA_Live_Regions)。這邊我們使用一種 Live Region 的類型 alert：
```html
<divid="loginError"role="alert"></div>
@ -225,7 +225,7 @@ function updateDashboard() {
首先，我們需要先檢查帳戶的資料。使用我們之前建立的函式 `updateElement()` 來更新 HTML 檔。
在[第一堂課](../../1-template-route/translations/README.zh-tw.md)中，我們使用 HTML 模板與方法 [`appendChild()`](https://developer.mozilla.org/en-US/docs/Web/API/Node/appendChild) 來做出應用程式內的轉換。模板還能執行更小規模的行為，動態地改變一部份的頁面
在[第一堂課](../../1-template-route/translations/README.zh-tw.md)中，我們使用 HTML 模板與方法 [`appendChild()`](https://developer.mozilla.org/docs/Web/API/Node/appendChild) 來做出應用程式內的轉換。模板還能執行更小規模的行為，動態地改變一部份的頁面
我們使用類似的方式來顯示 HTML 表格中的交易清單。
@ -301,7 +301,7 @@ for (const transaction of account.transactions) {
updateElement('transactions', transactionsRows);
```
這裡我們使用了方法 [`document.createDocumentFragment()`](https://developer.mozilla.org/en-US/docs/Web/API/Document/createDocumentFragment)，建立新的 DOM 分段，再接到我們的 HTML 表格中。
這裡我們使用了方法 [`document.createDocumentFragment()`](https://developer.mozilla.org/docs/Web/API/Document/createDocumentFragment)，建立新的 DOM 分段，再接到我們的 HTML 表格中。
`state` वस्तु में किए गए परिवर्तनों से बचने के लिए, यह [*अपरिवर्तनीय*](https://en.wikipedia.org/wiki/Immutable_object) पर विचार करने के लिए एक अच्छा अभ्यास है, जिसका अर्थ है कि इसे बिल्कुल भी संशोधित नहीं किया जा सकता है। इसका अर्थ यह भी है कि यदि आप इसमें कुछ भी बदलना चाहते हैं तो आपको एक नया स्टेट ऑब्जेक्ट बनाना होगा। ऐसा करने से, आप संभावित रूप से अवांछित [साइड इफेक्ट्स](https://en.wikipedia.org/wiki/Side_effect_(computer_science)) के बारे में एक सुरक्षा का निर्माण करते हैं, और अपने ऐप में नई सुविधाओं के लिए संभावनाएं खोलते हैं जैसे कि undo/redo को लागू करना, जबकि डिबग करना भी आसान है। उदाहरण के लिए, आप स्टेट में किए गए प्रत्येक परिवर्तन को लॉग कर सकते हैं और बग के स्रोत को समझने के लिए परिवर्तनों का इतिहास रख सकते हैं।
जावास्क्रिप्ट में, आप एक अपरिवर्तनीय संस्करण एक ऑब्जेक्ट बनाने के लिए [`Object.freeze()`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/freeze) का उपयोग कर सकते हैं । यदि आप एक अपरिवर्तनीय वस्तु में परिवर्तन करने की कोशिश करते हैं, तो एक अपवाद उठाया जाएगा।
जावास्क्रिप्ट में, आप एक अपरिवर्तनीय संस्करण एक ऑब्जेक्ट बनाने के लिए [`Object.freeze()`](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object/freeze) का उपयोग कर सकते हैं । यदि आप एक अपरिवर्तनीय वस्तु में परिवर्तन करने की कोशिश करते हैं, तो एक अपवाद उठाया जाएगा।
✅ क्या आप एक *उथले* और एक *गहरी* अपरिवर्तनीय वस्तु के बीच का अंतर जानते हैं? आप इसके बारे में [यहां](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/freeze#What_is_shallow_freeze) पढ़ सकते हैं.
✅ क्या आप एक *उथले* और एक *गहरी* अपरिवर्तनीय वस्तु के बीच का अंतर जानते हैं? आप इसके बारे में [यहां](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object/freeze#What_is_shallow_freeze) पढ़ सकते हैं.
### टास्क
@ -103,7 +103,7 @@ function updateState(property, newData) {
}
```
इस फ़ंक्शन में, हम [*spread (`...`) operator*](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_syntax#Spread_in_object_literals) का उपयोग करके पिछले स्टेट से एक नया स्टेट ऑब्जेक्ट और कॉपी डेटा बना रहे हैं। फिर हम नए डेटा के साथ स्टेट ऑब्जेक्ट की एक विशेष प्रॉपर्टी को ओवरराइड करते हैं [ब्रैकेट नोटेशन] `[property]` असाइनमेंट के लिए। अंत में, हम `Object.freeze()` का उपयोग करके संशोधनों को रोकने के लिए ऑब्जेक्ट को लॉक करते हैं। हमारे पास अब केवल स्टेट में संग्रहीत `अकाउंट` प्रॉपर्टी है, लेकिन इस दृष्टिकोण के साथ आप स्टेट में जितनी आवश्यकता हो उतने गुण जोड़ सकते हैं।
इस फ़ंक्शन में, हम [*spread (`...`) operator*](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Operators/Spread_syntax#Spread_in_object_literals) का उपयोग करके पिछले स्टेट से एक नया स्टेट ऑब्जेक्ट और कॉपी डेटा बना रहे हैं। फिर हम नए डेटा के साथ स्टेट ऑब्जेक्ट की एक विशेष प्रॉपर्टी को ओवरराइड करते हैं [ब्रैकेट नोटेशन] `[property]` असाइनमेंट के लिए। अंत में, हम `Object.freeze()` का उपयोग करके संशोधनों को रोकने के लिए ऑब्जेक्ट को लॉक करते हैं। हमारे पास अब केवल स्टेट में संग्रहीत `अकाउंट` प्रॉपर्टी है, लेकिन इस दृष्टिकोण के साथ आप स्टेट में जितनी आवश्यकता हो उतने गुण जोड़ सकते हैं।
हम यह भी सुनिश्चित करेंगे कि प्रारंभिक अवस्था भी जम गई है, यह सुनिश्चित करने के लिए `state` आरंभीकरण को अद्यतन करेगा:
@ -156,12 +156,12 @@ function logout() {
एक अन्य विकल्प डेटा भंडारण के लिए कई ब्राउज़र एपीआई में से एक का उपयोग करना है। उनमें से दो विशेष रूप से दिलचस्प हैं:
- [`localStorage`](https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage): एक [Key/Value store](https://en.wikipedia.org/wiki/Key%E2%80%93value_database) विभिन्न सत्रों में वर्तमान वेब साइट के लिए विशिष्ट डेटा को बनाए रखने की अनुमति देते हैं। इसमें सहेजा गया डेटा कभी समाप्त नहीं होता है।
- [`sessionStorage`](https://developer.mozilla.org/en-US/docs/Web/API/Window/sessionStorage): यह एक `sessionStorage` की तरह ही काम करता है, सिवाय इसके कि इसमें संग्रहीत डेटा सत्र समाप्त होने पर (जब ब्राउज़र बंद हो जाता है) साफ हो जाता है।
- [`localStorage`](https://developer.mozilla.org/docs/Web/API/Window/localStorage): एक [Key/Value store](https://en.wikipedia.org/wiki/Key%E2%80%93value_database) विभिन्न सत्रों में वर्तमान वेब साइट के लिए विशिष्ट डेटा को बनाए रखने की अनुमति देते हैं। इसमें सहेजा गया डेटा कभी समाप्त नहीं होता है।
- [`sessionStorage`](https://developer.mozilla.org/docs/Web/API/Window/sessionStorage): यह एक `sessionStorage` की तरह ही काम करता है, सिवाय इसके कि इसमें संग्रहीत डेटा सत्र समाप्त होने पर (जब ब्राउज़र बंद हो जाता है) साफ हो जाता है।
यदि आप जटिल वस्तुओं को संग्रहीत करना चाहते हैं, तो आपको इसे [JSON](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/JSON) प्रारूप [`JSON.stringify()`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/JSON/stringify) का उपयोग करके क्रमबद्ध करना होगा।
यदि आप जटिल वस्तुओं को संग्रहीत करना चाहते हैं, तो आपको इसे [JSON](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/JSON) प्रारूप [`JSON.stringify()`](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/JSON/stringify) का उपयोग करके क्रमबद्ध करना होगा।
✅ यदि आप एक वेब ऐप बनाना चाहते हैं जो सर्वर के साथ काम नहीं करता है, तो [`IndexedDB` API](https://developer.mozilla.org/en-US/docs/Web/API/IndexedDB_API) का उपयोग करके क्लाइंट पर डेटाबेस बनाना भी संभव है। यह एक उन्नत उपयोग मामलों के लिए आरक्षित है या यदि आपको महत्वपूर्ण मात्रा में डेटा संग्रहीत करने की आवश्यकता है, क्योंकि यह उपयोग करने के लिए अधिक जटिल है।
✅ यदि आप एक वेब ऐप बनाना चाहते हैं जो सर्वर के साथ काम नहीं करता है, तो [`IndexedDB` API](https://developer.mozilla.org/docs/Web/API/IndexedDB_API) का उपयोग करके क्लाइंट पर डेटाबेस बनाना भी संभव है। यह एक उन्नत उपयोग मामलों के लिए आरक्षित है या यदि आपको महत्वपूर्ण मात्रा में डेटा संग्रहीत करने की आवश्यकता है, क्योंकि यह उपयोग करने के लिए अधिक जटिल है।
@ -6,7 +6,7 @@ Onze bank-app mist nog één belangrijk kenmerk: de mogelijkheid om nieuwe trans
Gebruik alles wat u in de vier voorgaande lessen heeft geleerd en implementeer een dialoogvenster "Transactie toevoegen":
- Voeg een knop "Transactie toevoegen" toe op de dashboardpagina
- Maak een nieuwe pagina met een HTML-sjabloon of gebruik JavaScript om de HTML-dialoog weer te geven/te verbergen zonder de dashboardpagina te verlaten (u kunt [`hidden`](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/hidden) eigenschap daarvoor gebruiken, of CSS-class)
- Maak een nieuwe pagina met een HTML-sjabloon of gebruik JavaScript om de HTML-dialoog weer te geven/te verbergen zonder de dashboardpagina te verlaten (u kunt [`hidden`](https://developer.mozilla.org/docs/Web/HTML/Global_attributes/hidden) eigenschap daarvoor gebruiken, of CSS-class)
- Zorg ervoor dat u [toetsenbord en schermlezer toegankelijkheid](https://developer.paciellogroup.com/blog/2018/06/the-current-state-of-modal-dialog-accessibility/) afhandelt voor het dialoogvenster
- Implementeer een HTML-formulier om invoergegevens te ontvangen
- Maak JSON-gegevens van de formuliergegevens en stuur deze naar de API
Microsoft takes the security of our software products and services seriously, which includes all source code repositories managed through our GitHub organizations, which include [Microsoft](https://github.com/Microsoft), [Azure](https://github.com/Azure), [DotNet](https://github.com/dotnet), [AspNet](https://github.com/aspnet), [Xamarin](https://github.com/xamarin), and [our GitHub organizations](https://opensource.microsoft.com/).
If you believe you have found a security vulnerability in any Microsoft-owned repository that meets [Microsoft's definition of a security vulnerability](https://docs.microsoft.com/en-us/previous-versions/tn-archive/cc751383(v=technet.10)), please report it to us as described below.
If you believe you have found a security vulnerability in any Microsoft-owned repository that meets [Microsoft's definition of a security vulnerability](https://docs.microsoft.com/previous-versions/tn-archive/cc751383(v=technet.10)), please report it to us as described below.
## Reporting Security Issues
@ -12,7 +12,7 @@ If you believe you have found a security vulnerability in any Microsoft-owned re
Instead, please report them to the Microsoft Security Response Center (MSRC) at [https://msrc.microsoft.com/create-report](https://msrc.microsoft.com/create-report).
If you prefer to submit without logging in, send email to [secure@microsoft.com](mailto:secure@microsoft.com). If possible, encrypt your message with our PGP key; please download it from the [Microsoft Security Response Center PGP Key page](https://www.microsoft.com/en-us/msrc/pgp-key-msrc).
If you prefer to submit without logging in, send email to [secure@microsoft.com](mailto:secure@microsoft.com). If possible, encrypt your message with our PGP key; please download it from the [Microsoft Security Response Center PGP Key page](https://www.microsoft.com/msrc/pgp-key-msrc).
You should receive a response within 24 hours. If for some reason you do not, please follow up via email to ensure we received your original message. Additional information can be found at [microsoft.com/msrc](https://www.microsoft.com/msrc).
@ -36,6 +36,6 @@ We prefer all communications to be in English.
## Policy
Microsoft follows the principle of [Coordinated Vulnerability Disclosure](https://www.microsoft.com/en-us/msrc/cvd).
Microsoft follows the principle of [Coordinated Vulnerability Disclosure](https://www.microsoft.com/msrc/cvd).
Jen Looper
3 years ago