Jen Looper
4 years ago
committed by
GitHub
commit
9aa98943f8
@ -0,0 +1,192 @@
|
|||||||
|
# प्रोग्रामिंग भाषाओं और व्यापार के उपकरण का परिचय
|
||||||
|
|
||||||
|
यह पाठ प्रोग्रामिंग भाषाओं की मूल बातें शामिल करता है। यहां शामिल विषय आज की अधिकांश आधुनिक प्रोग्रामिंग भाषाओं पर लागू होते हैं। 'टूल ऑफ़ ट्रेड' सेक्शन में, आप उपयोगी सॉफ़्टवेयर के बारे में जानेंगे जो आपको डेवलपर के रूप में मदद करता है।
|
||||||
|
|
||||||
|
|
||||||
|
>[टोमोमी इमुरा](https://twitter.com/girlie_mac) द्वारा स्केचनेट
|
||||||
|
|
||||||
|
## पूर्व व्याख्यान प्रश्नोत्तरी
|
||||||
|
[पूर्व व्याख्यान प्रश्नोत्तरी](https://nice-beach-0fe9e9d0f.azurestaticapps.net/quiz/1?loc=hi)
|
||||||
|
|
||||||
|
## परिचय
|
||||||
|
|
||||||
|
इस पाठ में, हम कवर करेंगे:
|
||||||
|
|
||||||
|
- प्रोग्रामिंग क्या है?
|
||||||
|
- प्रोग्रामिंग भाषाओं के प्रकार
|
||||||
|
- एक प्रोग्राम के बुनियादी तत्व
|
||||||
|
- पेशेवर डेवलपर के लिए उपयोगी सॉफ्टवेयर और टूलिंग
|
||||||
|
|
||||||
|
## प्रोग्रामिंग क्या है?
|
||||||
|
|
||||||
|
प्रोग्रामिंग (कोडिंग के रूप में भी जाना जाता है) एक डिवाइस, जैसे कि कंप्यूटर या मोबाइल डिवाइस, को निर्देश लिखने की प्रक्रिया है। हम इन निर्देशों को एक प्रोग्रामिंग भाषा के साथ लिखते हैं, जो तब डिवाइस द्वारा व्याख्या की जाती है। निर्देशों के इन सेटों को विभिन्न नामों से संदर्भित किया जा सकता है, लेकिन *प्रोग्राम*, *कंप्यूटर प्रोग्राम*, *एप्लिकेशन(ऐप)*, और *निष्पादन योग्य* कुछ लोकप्रिय नाम हैं.
|
||||||
|
|
||||||
|
एक *प्रोग्राम* कुछ भी हो सकता है जो कोड के साथ लिखा गया है; वेबसाइट, गेम और फ़ोन ऐप प्रोग्राम हैं। हालांकि, कोड लिखे बिना प्रोग्राम बनाना संभव है, अंतर्निहित तर्क की व्याख्या डिवाइस से की जाती है और उस तर्क को कोड के साथ लिखे जाने की सबसे अधिक संभावना है। एक प्रोग्राम जो *रनिंग* या *एक्जीक्यूटिंग कोड* निर्देश कर रहा है। जिस उपकरण के साथ आप वर्तमान में इस पाठ को पढ़ रहे हैं, वह आपकी स्क्रीन पर प्रिंट करने के लिए एक प्रोग्राम चला रहा है।
|
||||||
|
|
||||||
|
✅ थोड़ा अनुसंधान करें: कौन दुनिया का पहला कंप्यूटर प्रोग्रामर माना जाता है ?
|
||||||
|
|
||||||
|
## प्रोग्रामिंग भाषाएँ
|
||||||
|
|
||||||
|
प्रोग्रामिंग भाषाओं का एक मुख्य उद्देश्य है: डेवलपर्स को डिवाइस पर भेजने के लिए निर्देशों का निर्माण करना। डिवाइस केवल बाइनरी (1s और 0s) को समझ सकते हैं, और *सबसे अधिक* डेवलपर्स के लिए जो संवाद करने का एक बहुत ही कुशल तरीका नहीं है। प्रोग्रामिंग भाषाएं मनुष्य और कंप्यूटर के बीच संचार के लिए एक वाहन हैं।
|
||||||
|
|
||||||
|
प्रोग्रामिंग भाषाएँ विभिन्न स्वरूपों में आती हैं और विभिन्न उद्देश्यों की पूर्ति कर सकती हैं। उदाहरण के लिए, जावास्क्रिप्ट का उपयोग मुख्य रूप से वेब अनुप्रयोगों के लिए किया जाता है, जबकि बैश मुख्य रूप से ऑपरेटिंग सिस्टम के लिए उपयोग किया जाता है।
|
||||||
|
|
||||||
|
*निम्न स्तर की भाषाएं* आमतौर पर निर्देशों की व्याख्या करने के लिए एक उपकरण के लिए * उच्च स्तरीय भाषाओं की तुलना में कम चरणों की आवश्यकता होती है। हालांकि, उच्च स्तरीय भाषाओं को लोकप्रिय बनाने वाली इसकी पठनीयता और समर्थन है। जावास्क्रिप्ट को एक उच्च स्तरीय भाषा माना जाता है.
|
||||||
|
|
||||||
|
निम्न कोड जावास्क्रिप्ट के साथ एक उच्च स्तर की भाषा और एआरएम विधानसभा कोड के साथ निम्न स्तर की भाषा के बीच अंतर को दर्शाता है।
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
let number = 10
|
||||||
|
let n1 = 0, n2 = 1, nextTerm;
|
||||||
|
|
||||||
|
for (let i = 1; i <= number; i++) {
|
||||||
|
console.log(n1);
|
||||||
|
nextTerm = n1 + n2;
|
||||||
|
n1 = n2;
|
||||||
|
n2 = nextTerm;
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
```c
|
||||||
|
area ascen,code,readonly
|
||||||
|
entry
|
||||||
|
code32
|
||||||
|
adr r0,thumb+1
|
||||||
|
bx r0
|
||||||
|
code16
|
||||||
|
thumb
|
||||||
|
mov r0,#00
|
||||||
|
sub r0,r0,#01
|
||||||
|
mov r1,#01
|
||||||
|
mov r4,#10
|
||||||
|
ldr r2,=0x40000000
|
||||||
|
back add r0,r1
|
||||||
|
str r0,[r2]
|
||||||
|
add r2,#04
|
||||||
|
mov r3,r0
|
||||||
|
mov r0,r1
|
||||||
|
mov r1,r3
|
||||||
|
sub r4,#01
|
||||||
|
cmp r4,#00
|
||||||
|
bne back
|
||||||
|
end
|
||||||
|
```
|
||||||
|
|
||||||
|
मानो या न मानो, *वे दोनों एक ही काम कर रहे हैं*: 10 तक एक फाइबोनैचि अनुक्रम मुद्रित करना।
|
||||||
|
|
||||||
|
✅ एक फाइबोनैचि अनुक्रम को संख्याओं के एक सेट के रूप में [परिभाषित](https://en.wikipedia.org/wiki/Fibonacci_number) किया जाता है जैसे कि प्रत्येक संख्या दो पूर्ववर्ती का योग है, जिसकी शुरुआत 0 और 1 से होती है।
|
||||||
|
|
||||||
|
## एक प्रोग्राम के तत्व
|
||||||
|
|
||||||
|
किसी प्रोग्राम में एक निर्देश को एक *स्टेटमेंट* कहा जाता है और इसमें आमतौर पर एक कैरेक्टर या लाइन स्पेस होता है, जो उन सिरों को चिह्नित करता है, जहां से निर्देश समाप्त होता है, या *टर्मिनेट* होता है। कैसे एक कार्यक्रम समाप्त होता है प्रत्येक भाषा के साथ बदलता रहता है।
|
||||||
|
|
||||||
|
अधिकांश प्रोग्राम उपयोगकर्ता या कहीं और से डेटा का उपयोग करने पर निर्भर करते हैं, जहां कथन निर्देशों को पूरा करने के लिए डेटा पर भरोसा कर सकते हैं। डेटा बदल सकता है कि कोई प्रोग्राम कैसे व्यवहार करता है, इसलिए प्रोग्रामिंग भाषाएँ अस्थायी रूप से डेटा को संग्रहीत करने का एक तरीका है जो बाद में उपयोग किया जा सकता है। इस डेटा को *वैरिएबल* कहा जाता है। चर ऐसे कथन हैं जो किसी डिवाइस को उसकी मेमोरी में डेटा को बचाने का निर्देश देते हैं। कार्यक्रमों में विविधताएं बीजगणित में लोगों के समान हैं, जहां उनका एक अनूठा नाम है और समय के साथ उनका मूल्य बदल सकता है।
|
||||||
|
|
||||||
|
एक मौका है कि कुछ बयानों को डिवाइस द्वारा निष्पादित नहीं किया जाएगा। यह आमतौर पर डिज़ाइनर द्वारा लिखा जाता है जब डेवलपर द्वारा लिखा जाता है या जब कोई अप्रत्याशित त्रुटि होती है तो दुर्घटना से। किसी एप्लिकेशन का इस प्रकार का नियंत्रण उसे अधिक मजबूत और बनाए रखने योग्य बनाता है। आमतौर पर नियंत्रण में ये परिवर्तन तब होते हैं जब कुछ निर्णय मिलते हैं। `if..else` स्टेटमेंट आधुनिक प्रोग्रामिंग भाषाओं में एक सामान्य विवरण यह नियंत्रित करने के लिए कि प्रोग्राम कैसे चलाया जाता है।
|
||||||
|
|
||||||
|
✅ आप बाद के पाठों में इस प्रकार के कथन के बारे में अधिक जानेंगे
|
||||||
|
|
||||||
|
## व्यापार के उपकरण
|
||||||
|
|
||||||
|
[](https://youtube.com/watch?v=69WJeXGBdxg "व्यापार के उपकरण")
|
||||||
|
|
||||||
|
इस अनुभाग में, आप कुछ सॉफ़्टवेयर के बारे में जानेंगे जो आपको अपने व्यावसायिक विकास की यात्रा शुरू करने के दौरान बहुत उपयोगी लग सकते हैं .
|
||||||
|
|
||||||
|
एक **विकास पर्यावरण** उपकरण और सुविधाओं का एक अनूठा सेट है जो एक डेवलपर सॉफ्टवेयर लिखते समय अक्सर उपयोग करेगा। इन उपकरणों में से कुछ को एक डेवलपर विशिष्ट आवश्यकताओं के लिए अनुकूलित किया गया है, और समय के साथ बदल सकता है यदि कोई डेवलपर काम या व्यक्तिगत परियोजनाओं में प्राथमिकताएं बदलता है, या जब वे एक अलग प्रोग्रामिंग भाषा का उपयोग करते हैं। विकास का वातावरण डेवलपर्स के रूप में अद्वितीय है जो उनका उपयोग करते हैं।
|
||||||
|
|
||||||
|
### एडिटर्स
|
||||||
|
|
||||||
|
सॉफ्टवेयर विकास के लिए सबसे महत्वपूर्ण उपकरणों में से एक एडिटर्स है। एडिटर्स वे होते हैं जहाँ आप अपना कोड लिखते हैं और कभी-कभी जहाँ आप अपना कोड चलाते हैं।
|
||||||
|
|
||||||
|
डेवलपर्स कुछ अतिरिक्त कारणों से एडिटर्स पर भरोसा करते हैं:
|
||||||
|
|
||||||
|
- *डिबगिंग* कोड के माध्यम से कदम से, लाइन के द्वारा बग और त्रुटियों की खोज करना। कुछ एडिटर्स में डिबगिंग क्षमताएं होती हैं, या उन्हें विशिष्ट प्रोग्रामिंग भाषाओं के लिए अनुकूलित और जोड़ा जा सकता है।.
|
||||||
|
- *सिंटेक्स हाइलाइटिंग* कोड के लिए रंगों और पाठ स्वरूपण को जोड़ता है, यह पढ़ना आसान बनाता है। अधिकांश एडिटर अनुकूलित सिंटैक्स हाइलाइटिंग की अनुमति देते हैं.
|
||||||
|
- *एक्सटेंशन और एकीकरण* डेवलपर्स के लिए जो अतिरिक्त हैं, डेवलपर्स के लिए, अतिरिक्त टूल तक पहुंच के लिए जो कि आधार एडिटर में निर्मित नहीं हैं। उदाहरण के लिए, कई डेवलपर्स को अपने कोड को दस्तावेज करने और यह समझाने का तरीका भी चाहिए कि यह कैसे काम करता है और टाइपोस की जांच के लिए वर्तनी जांच एक्सटेंशन स्थापित करेगा। इनमें से अधिकांश परिवर्धन एक विशिष्ट एडिटर के भीतर उपयोग के लिए हैं, और अधिकांश एडिटर उपलब्ध एक्सटेंशन की खोज करने का एक तरीका है।
|
||||||
|
- *अनुकूलन* अधिकांश एडिटर अत्यंत अनुकूलन योग्य हैं, और प्रत्येक डेवलपर का अपना विशिष्ट विकास वातावरण होगा जो उनकी आवश्यकताओं के अनुरूप होगा। कई भी डेवलपर्स को अपना विस्तार बनाने की अनुमति देते हैं।
|
||||||
|
|
||||||
|
#### लोकप्रिय एडिटर्स और वेब डेवलपमेंटका एक्सटेंशन
|
||||||
|
|
||||||
|
- [Visual Studio Code](https://code.visualstudio.com/)
|
||||||
|
- [Code Spell Checker](https://marketplace.visualstudio.com/items?itemName=streetsidesoftware.code-spell-checker)
|
||||||
|
- [Live Share](https://marketplace.visualstudio.com/items?itemName=MS-vsliveshare.vsliveshare-pack)
|
||||||
|
- [Prettier - Code formatter](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode)
|
||||||
|
- [Atom](https://atom.io/)
|
||||||
|
- [spell-check](https://atom.io/packages/spell-check)
|
||||||
|
- [teletype](https://atom.io/packages/teletype)
|
||||||
|
- [atom-beautify](https://atom.io/packages/atom-beautify)
|
||||||
|
|
||||||
|
### ब्राउज़र्स
|
||||||
|
|
||||||
|
एक अन्य महत्वपूर्ण उपकरण ब्राउज़र है। वेब डेवलपर ब्राउज़र पर भरोसा करते हैं कि यह देखने के लिए कि उनका कोड वेब पर कैसे चलता है, इसका उपयोग वेब पेज के दृश्य तत्वों को देखने के लिए किया जाता है जो एडिटर में लिखे गए हैं, जैसे की HTML।
|
||||||
|
|
||||||
|
कई ब्राउज़र *डेवलपर टूल*(DevTools) के साथ आते हैं, जिसमें डेवलपर्स को अपने एप्लिकेशन के बारे में महत्वपूर्ण अंतर्दृष्टि एकत्र करने और कैप्चर करने में मदद करने के लिए उपयोगी सुविधाओं और जानकारी का एक सेट होता है। उदाहरण के लिए: यदि किसी वेब पेज में त्रुटियां हैं, तो कभी-कभी यह जानना उपयोगी होता है कि वे कब हुए। एक ब्राउज़र में DevTools इस जानकारी को पकड़ने के लिए कॉन्फ़िगर किया जा सकता है।
|
||||||
|
|
||||||
|
#### लोकप्रिय ब्राउज़रों और DevTools
|
||||||
|
|
||||||
|
- [Edge](https://docs.microsoft.com/microsoft-edge/devtools-guide-chromium?WT.mc_id=academic-13441-cxa)
|
||||||
|
- [Chrome](https://developers.google.com/web/tools/chrome-devtools/)
|
||||||
|
- [Firefox](https://developer.mozilla.org/docs/Tools)
|
||||||
|
|
||||||
|
### कमांड लाइन टूल्स
|
||||||
|
|
||||||
|
कुछ डेवलपर्स अपने दैनिक कार्यों के लिए कम ग्राफ़िकल दृश्य पसंद करते हैं और इसे प्राप्त करने के लिए कमांड लाइन पर भरोसा करते हैं। विकासशील कोड के लिए महत्वपूर्ण मात्रा में टाइपिंग की आवश्यकता होती है, और कुछ डेवलपर्स कीबोर्ड पर अपने प्रवाह को बाधित नहीं करना पसंद करते हैं और डेस्कटॉप विंडो के बीच स्वैप करने के लिए कीबोर्ड शॉर्टकट का उपयोग करेंगे, विभिन्न फ़ाइलों पर काम करेंगे, और टूल का उपयोग करेंगे। अधिकांश कार्यों को एक माउस के साथ पूरा किया जा सकता है, लेकिन कमांड लाइन का उपयोग करने का एक लाभ यह है कि माउस और कीबोर्ड के बीच स्वैपिंग की आवश्यकता के बिना कमांड लाइन टूल के साथ बहुत कुछ किया जा सकता है। कमांड लाइन का एक और लाभ यह है कि वे कॉन्फ़िगर करने योग्य हैं और आप अपने कस्टम कॉन्फ़िगरेशन को सहेज सकते हैं, इसे बाद में बदल सकते हैं और इसे नई विकास मशीनों में भी आयात कर सकते हैं। क्योंकि विकास वातावरण प्रत्येक डेवलपर के लिए बहुत अनूठा है, कुछ कमांड लाइन का उपयोग करने से बचेंगे, कुछ इस पर पूरी तरह से भरोसा करेंगे, और कुछ दोनों का मिश्रण पसंद करते हैं।
|
||||||
|
|
||||||
|
### लोकप्रिय कमांड लाइन विकल्प
|
||||||
|
|
||||||
|
आपके द्वारा उपयोग किए जाने वाले ऑपरेटिंग सिस्टम के आधार पर कमांड लाइन के विकल्प अलग-अलग होंगे.
|
||||||
|
|
||||||
|
*💻 = ऑपरेटिंग सिस्टम पर प्रीइंस्टॉल्ड आता है.*
|
||||||
|
|
||||||
|
#### विंडोज
|
||||||
|
|
||||||
|
- [Powershell](https://docs.microsoft.com/powershell/scripting/overview?view=powershell-7?WT.mc_id=academic-13441-cxa) 💻
|
||||||
|
- [Command Line](https://docs.microsoft.com/windows-server/administration/windows-commands/windows-commands?WT.mc_id=academic-13441-cxa) (also known as CMD) 💻
|
||||||
|
- [Windows Terminal](https://docs.microsoft.com/windows/terminal/?WT.mc_id=academic-13441-cxa)
|
||||||
|
- [mintty](https://mintty.github.io/)
|
||||||
|
|
||||||
|
#### मैक ओएस
|
||||||
|
|
||||||
|
- [Terminal](https://support.apple.com/guide/terminal/open-or-quit-terminal-apd5265185d-f365-44cb-8b09-71a064a42125/mac) 💻
|
||||||
|
- [iTerm](https://iterm2.com/)
|
||||||
|
- [Powershell](https://docs.microsoft.com/powershell/scripting/install/installing-powershell-core-on-macos?view=powershell-7?WT.mc_id=academic-13441-cxa)
|
||||||
|
|
||||||
|
#### लिनक्स
|
||||||
|
|
||||||
|
- [Bash](https://www.gnu.org/software/bash/manual/html_node/index.html) 💻
|
||||||
|
- [KDE Konsole](https://docs.kde.org/trunk5/en/applications/konsole/index.html)
|
||||||
|
- [Powershell](https://docs.microsoft.com/powershell/scripting/install/installing-powershell-core-on-linux?view=powershell-7?WT.mc_id=academic-13441-cxa)
|
||||||
|
|
||||||
|
#### लोकप्रिय कमांड लाइन टूल्स
|
||||||
|
|
||||||
|
- [Git](https://git-scm.com/) (💻 अधिकांश ऑपरेटिंग साइटम पर)
|
||||||
|
- [NPM](https://www.npmjs.com/)
|
||||||
|
- [Yarn](https://classic.yarnpkg.com/en/docs/cli/)
|
||||||
|
|
||||||
|
### प्रलेखन
|
||||||
|
|
||||||
|
जब कोई डेवलपर कुछ नया सीखना चाहता है, तो वे इसका उपयोग करने के तरीके जानने के लिए प्रलेखन की ओर रुख करेंगे। डेवलपर्स अक्सर टूल और भाषाओं का सही तरीके से उपयोग करने के लिए, और यह भी कि यह कैसे काम करता है के गहन ज्ञान प्राप्त करने के लिए मार्गदर्शन के लिए प्रलेखन पर भरोसा करते हैं।
|
||||||
|
|
||||||
|
#### वेब विकास पर लोकप्रिय प्रलेखन
|
||||||
|
|
||||||
|
- [Mozilla Developer Network](https://developer.mozilla.org/docs/Web)
|
||||||
|
- [Frontend Masters](https://frontendmasters.com/learn/)
|
||||||
|
|
||||||
|
✅ कुछ शोध करें: अब जब आप एक वेब डेवलपर के वातावरण की मूल बातें जानते हैं, तो इसकी तुलना करें और वेब डिजाइनर के वातावरण के साथ इसके विपरीत करें।
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 🚀 चुनौती
|
||||||
|
|
||||||
|
कुछ प्रोग्रामिंग भाषाओं की तुलना करें। जावास्क्रिप्ट बनाम जावा के कुछ विशिष्ट लक्षण क्या हैं? COBOL बनाम GO के बारे मे?
|
||||||
|
|
||||||
|
## व्याख्यान उपरांत प्रश्नोत्तरी
|
||||||
|
[व्याख्यान उपरांत प्रश्नोत्तरी](https://nice-beach-0fe9e9d0f.azurestaticapps.net/quiz/2?loc=hi)
|
||||||
|
|
||||||
|
## समीक्षा और स्व अध्ययन
|
||||||
|
|
||||||
|
प्रोग्रामर के लिए उपलब्ध विभिन्न भाषाओं पर थोड़ा अध्ययन करें। एक भाषा में एक पंक्ति लिखने का प्रयास करें, और फिर इसे दो अन्य में फिर से लिखें। आप क्या सीखते हैं?
|
||||||
|
|
||||||
|
## असाइनमेंट
|
||||||
|
|
||||||
|
[डॉक्स पढ़ना](assignment.hi.md)
|
||||||
@ -0,0 +1,315 @@
|
|||||||
|
# गिटहब का परिचय
|
||||||
|
|
||||||
|
इस पाठ में GitHub की मूल बातें शामिल हैं, जो आपके कोड में परिवर्तनों को होस्ट और प्रबंधित करने के लिए एक मंच है।
|
||||||
|
|
||||||
|
|
||||||
|
> [टोमोमी इमुरा](https://twitter.com/girlie_mac) द्वारा स्केचनेट
|
||||||
|
|
||||||
|
## पूर्व व्याख्यान प्रश्नोत्तरी
|
||||||
|
[पूर्व व्याख्यान प्रश्नोत्तरी](https://nice-beach-0fe9e9d0f.azurestaticapps.net/quiz/3?loc=hi)
|
||||||
|
|
||||||
|
## परिचय
|
||||||
|
|
||||||
|
इस पाठ में, हम कवर करेंगे:
|
||||||
|
|
||||||
|
- आपके द्वारा मशीन पर किए गए कार्य को ट्रैक करना
|
||||||
|
- दूसरों के साथ परियोजनाओं पर काम करना
|
||||||
|
- खुला स्त्रोत सॉफ़्टवेयर खोलने में योगदान कैसे करें
|
||||||
|
|
||||||
|
### आवश्यक शर्तें
|
||||||
|
|
||||||
|
शुरू करने से पहले, आपको जांचना होगा कि क्या Git स्थापित है। टर्मिनल में लिखे:
|
||||||
|
`git --version`
|
||||||
|
|
||||||
|
यदि गिट स्थापित नहीं है तो , [गिट डाउनलोड करे](https://git-scm.com/downloads). फिर, टर्मिनल में अपनी स्थानीय Git प्रोफ़ाइल सेट करें:
|
||||||
|
* `git config --global user.name "your-name"`
|
||||||
|
* `git config --global user.email "your-email"`
|
||||||
|
|
||||||
|
यह जाँचने के लिए कि क्या Git पहले से कॉन्फ़िगर है आप टाइप कर सकते हैं:
|
||||||
|
`git config --list`
|
||||||
|
|
||||||
|
आपको एक GitHub खाते, एक कोड एडिटर (जैसे Visual Studio कोड) की आवश्यकता होगी, और आपको अपना टर्मिनल (या: कमांड प्रॉम्प्ट) खोलने की आवश्यकता होगी।
|
||||||
|
|
||||||
|
[Github.com](https://github.com/) पर नेविगेट करें और यदि आप पहले से नहीं हैं, तो एक खाता बनाएं या लॉग इन करें और अपना प्रोफ़ाइल भरें।
|
||||||
|
|
||||||
|
✅ GitHub दुनिया में एकमात्र कोड भंडार नहीं है; अन्य हैं, लेकिन GitHub सबसे अच्छा ज्ञात है
|
||||||
|
|
||||||
|
### तैयारी
|
||||||
|
|
||||||
|
आपको अपने स्थानीय मशीन (लैपटॉप या पीसी) पर एक कोड परियोजना के साथ एक फ़ोल्डर की आवश्यकता होगी, और GitHub पर एक सार्वजनिक भंडार, जो दूसरों की परियोजनाओं में योगदान करने के लिए एक उदाहरण के रूप में काम करेगा।
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## कोड प्रबंधन
|
||||||
|
|
||||||
|
मान लें कि आपके पास कुछ कोड प्रोजेक्ट के साथ स्थानीय रूप से एक फ़ोल्डर है और आप संस्करण नियंत्रण प्रणाली - git का उपयोग करके अपनी प्रगति को ट्रैक करना शुरू करना चाहते हैं। कुछ लोग आपके भविष्य के लिए एक प्रेम पत्र लिखने के लिए git का उपयोग करने की तुलना करते हैं। अपने प्रतिबद्ध संदेशों को दिनों या हफ्तों या महीनों के बाद पढ़कर आप याद कर पाएंगे कि आपने निर्णय क्यों लिया, या "रोलबैक" में बदलाव किया - यानी जब आप अच्छा "कमिट मैसेज" लिखते हैं।
|
||||||
|
|
||||||
|
### कार्य: एक रीपाज़टॉरी और कमिट कोड बनाएं
|
||||||
|
1. **GitHub पर रीपाज़टॉरी बनाएँ**. GitHub.com पर, रिपॉजिटरी टैब में, या नेविगेशन बार टॉप-राइट से, **नया रेपो** बटन ढूंढें।
|
||||||
|
|
||||||
|
1. अपने रिपॉजिटरी (फ़ोल्डर) को एक नाम दें
|
||||||
|
1. **रिपॉजिटरी बनाएं** चुनें।
|
||||||
|
|
||||||
|
1. **अपने कार्यशील फ़ोल्डर में नेविगेट करें**. अपने टर्मिनल में, उस फ़ोल्डर पर स्विच करें (जिसे निर्देशिका के रूप में भी जाना जाता है) जिसे आप ट्रैक करना चाहते हैं, लिखे :
|
||||||
|
|
||||||
|
```bash
|
||||||
|
cd [फ़ोल्डरका नाम]
|
||||||
|
```
|
||||||
|
|
||||||
|
1. **एक गिट रिपॉजिटरी को प्रारंभ करें**. आपके प्रोजेक्ट मे लिखे:
|
||||||
|
```bash
|
||||||
|
git init
|
||||||
|
```
|
||||||
|
|
||||||
|
1. **अवस्था जांच**. अपने भंडार प्रकार की स्थिति की जांच करने के लिए लिखे:
|
||||||
|
|
||||||
|
```bash
|
||||||
|
git status
|
||||||
|
```
|
||||||
|
|
||||||
|
आउटपुट कुछ इस तरह दिख सकता है:
|
||||||
|
|
||||||
|
```output
|
||||||
|
Changes not staged for commit:
|
||||||
|
(use "git add <file>..." to update what will be committed)
|
||||||
|
(use "git checkout -- <file>..." to discard changes in working directory)
|
||||||
|
|
||||||
|
modified: file.txt
|
||||||
|
modified: file2.txt
|
||||||
|
```
|
||||||
|
|
||||||
|
आमतौर पर एक `git status` कमांड आपको ऐसी चीजें बताती है जैसे रेपो में _saved_ होने के लिए कौन सी फाइलें तैयार हैं या इस पर ऐसे बदलाव हैं जिन्हें आप जारी रखना चाहते हैं।
|
||||||
|
|
||||||
|
1. **ट्रैकिंग के लिए सभी फाइलें जोड़ें**
|
||||||
|
इसे स्टेजिंग फाइल / फाइल को स्टेजिंग एरिया में जोड़ना भी कहा जाता है।
|
||||||
|
|
||||||
|
```bash
|
||||||
|
git add .
|
||||||
|
```
|
||||||
|
|
||||||
|
`Git add` और `.` तर्क इंगित करता है कि आपकी सभी फाइलें और ट्रैकिंग के लिए परिवर्तन होगया है।
|
||||||
|
|
||||||
|
1. **ट्रैकिंग के लिए चयनित फ़ाइलें जोड़ें**
|
||||||
|
|
||||||
|
```bash
|
||||||
|
git add [फ़ाइल या फ़ोल्डर का नाम]
|
||||||
|
```
|
||||||
|
|
||||||
|
जब हम एक बार में सभी फ़ाइलों को कमिट नहीं करना चाहते हैं, तो यह हमें केवल स्टेजिंग क्षेत्र में चयनित फ़ाइलों को जोड़ने में मदद करता है।
|
||||||
|
|
||||||
|
1. **सभी फाइलों को अनस्टेज करें**
|
||||||
|
|
||||||
|
```bash
|
||||||
|
git reset
|
||||||
|
```
|
||||||
|
|
||||||
|
यह कमांड हमें एक ही बार में सभी फ़ाइलों को अस्थिर करने में मदद करता है।
|
||||||
|
|
||||||
|
1. **किसी विशेष फ़ाइल को अनस्टेज करें**
|
||||||
|
|
||||||
|
```bash
|
||||||
|
git reset [फ़ाइल या फ़ोल्डर का नाम]
|
||||||
|
```
|
||||||
|
|
||||||
|
यह कमांड हमें केवल एक विशेष फ़ाइल को एक बार में अनस्टेज करने में मदद करती है जिसे हम अगले कमिट के लिए शामिल नहीं करना चाहते हैं।
|
||||||
|
|
||||||
|
1. **अपना काम जारी रखना**. इस बिंदु पर आपने फ़ाइलों को तथाकथित _स्टैजिंग एरिया_ में जोड़ा है।एक जगह जहां Git आपकी फ़ाइलों को ट्रैक कर रही है। परिवर्तन को स्थायी करने के लिए आपको फ़ाइलों को _कॉमित_ की आवश्यकता होती है। ऐसा करने के लिए आप `git commit` कमांड के साथ एक _कमिट _ बनाते हैं। एक _कमिट_ आपके रेपो के इतिहास में एक बचत बिंदु का प्रतिनिधित्व करता है। _कमिट_ बनाने के लिए निम्नलिखित टाइप करें:
|
||||||
|
|
||||||
|
```bash
|
||||||
|
git commit -m "पहला कमिट"
|
||||||
|
```
|
||||||
|
|
||||||
|
यह आपकी सभी फ़ाइलों को "पहला कमिट" संदेश को जोड़ता है। भविष्य के कमिट संदेशों के लिए आप अपने विवरण में यह बताना चाहेंगे कि आपने किस प्रकार का परिवर्तन किया है।
|
||||||
|
|
||||||
|
1. **अपने स्थानीय Git रेपो को GitHub से कनेक्ट करें**. आपके मशीन पर एक Git रेपो अच्छा है, लेकिन कुछ बिंदु पर आप अपनी फ़ाइलों का बैकअप कहीं और रखना चाहते हैं और अन्य लोगों को भी अपने रेपो पर आपके साथ काम करने के लिए आमंत्रित करते हैं। ऐसा करने के लिए एक महान जगह GitHub है। याद रखें कि हमने पहले ही GitHub पर एक रेपो बना लिया है, इसलिए हमें केवल अपने Git रेपो को GitHub के साथ जोड़ना है। कमांड `git remote add` बस यही करेगा। निम्न कमांड टाइप करें:
|
||||||
|
|
||||||
|
> ध्यान दें, इससे पहले कि आप कमांड टाइप करें अपने रिपॉजिटरी URL को खोजने के लिए अपने GitHub रेपो पेज पर जाएं। आप इसे नीचे दिए गए कमांड में उपयोग करेंगे। अपने GitHub URL से `repository_name` बदलें।
|
||||||
|
|
||||||
|
```bash
|
||||||
|
git remote add origin https://github.com/username/repository_name.git
|
||||||
|
```
|
||||||
|
|
||||||
|
यह आपके द्वारा पहले बनाए गए GitHub रिपॉजिटरी को इंगित करते हुए "origin" नाम का एक _remote_, या कनेक्शन बनाता है।
|
||||||
|
|
||||||
|
1. **GitHub पर स्थानीय फ़ाइलें भेजें**. अब तक आपने स्थानीय रेपो और गिटहब रेपो के बीच एक _कनेक्शन_ बनाया है। चलो निम्न कमांड `git push` के साथ इन फाइलों को गिटहब को भेजें, जैसे:
|
||||||
|
|
||||||
|
```bash
|
||||||
|
git push -u origin main
|
||||||
|
```
|
||||||
|
|
||||||
|
यह आपकी "मैन" शाखा में GitHub को आपके कमिट भेजता है।
|
||||||
|
|
||||||
|
1. **अधिक परिवर्तन जोड़ने के लिए**. यदि आप परिवर्तन करना जारी रखना चाहते हैं और उन्हें GitHub पर धकेलना चाहते हैं, तो आपको निम्नलिखित तीन आदेशों का उपयोग करने की आवश्यकता होगी:
|
||||||
|
|
||||||
|
```bash
|
||||||
|
git add .
|
||||||
|
git commit -m "अपना संदेश यहाँ लिखें"
|
||||||
|
git push
|
||||||
|
```
|
||||||
|
|
||||||
|
> टिप, आप उन फ़ाइलों को रोकने के लिए एक `.gitignore` फ़ाइल भी अपनाना चाह सकते हैं जिन्हें आप GitHub पर दिखाने से रोकना चाहते हैं - जैसे नोट्स आप उसी फ़ोल्डर में संग्रहीत करते हैं, लेकिन सार्वजनिक रिपॉजिटरी में कोई स्थान नहीं है। आप `.gitignore` फाइल के लिए टेम्प्लेट में [.gitignore टेम्प्लेट](https://github.com/github/gitignore) पे पा सकते हैं
|
||||||
|
#### कमिट संदेश
|
||||||
|
|
||||||
|
एक महान Git कमिट विषय पंक्ति निम्नलिखित वाक्य को पूरा करती है:
|
||||||
|
यदि लागू किया जाता है, तो यह प्रतिबद्ध होगा <आपकी विषय पंक्ति यहां>
|
||||||
|
|
||||||
|
विषय के लिए अनिवार्य, वर्तमान काल का उपयोग करें: "परिवर्तन" न "बदला गया" और न ही "परिवर्तने"।
|
||||||
|
विषय के रूप में, शरीर में (वैकल्पिक) भी अनिवार्य, वर्तमान काल का उपयोग करते हैं। शरीर में परिवर्तन के लिए प्रेरणा शामिल होनी चाहिए और पिछले व्यवहार के साथ इसके विपरीत होना चाहिए। आप `क्यों` को समझा रहे हैं,` कैसे` को नहीं।
|
||||||
|
|
||||||
|
✅ GitHub के आसपास सर्फ करने के लिए कुछ मिनट लें। क्या आप वास्तव में महान कमिट संदेश पा सकते हैं? क्या आप वास्तव में न्यूनतम पा सकते हैं? आपको क्या संदेश लगता है कि एक कमिट संदेश देने के लिए सबसे महत्वपूर्ण और उपयोगी है?
|
||||||
|
|
||||||
|
### कार्य: सहयोग करें
|
||||||
|
|
||||||
|
गिटहब पर चीजें डालने का मुख्य कारण अन्य डेवलपर्स के साथ सहयोग करना संभव बनाना था।
|
||||||
|
|
||||||
|
## दूसरों के साथ परियोजनाओं पर काम करना
|
||||||
|
|
||||||
|
अपनी रिपॉजिटरी में, यह देखने के लिए कि आपकी परियोजना अनुशंसित सामुदायिक मानकों की तुलना कैसे करती है, `इनसाइट्स > कम्यूनिटी` पर जाएँ।
|
||||||
|
|
||||||
|
यहाँ कुछ चीजें हैं जो आपके GitHub रेपो में सुधार कर सकती हैं:
|
||||||
|
- **विवरण**. क्या आपने अपनी परियोजना के लिए एक विवरण जोड़ा?
|
||||||
|
- **README**. क्या आपने एक README जोड़ा? GitHub एक [README](https://docs.github.com/articles/about-readmes/) लिखने के लिए मार्गदर्शन प्रदान करता है।
|
||||||
|
- **योगदान दिशानिर्देश**. आपके प्रोजेक्टका [योगदान दिशानिर्देश](https://docs.github.com/articles/setting-guidelines-for-repository-contributors/) है,
|
||||||
|
- **आचार संहिता**. एक [आचार संहिता](https://docs.github.com/articles/adding-a-code-of-conduct-to-your-project/),
|
||||||
|
- **लाइसेंस**. शायद सबसे महत्वपूर्ण बात, एक [लाइसेंस](https://docs.github.com/articles/adding-a-license-to-a-repository/)?
|
||||||
|
|
||||||
|
|
||||||
|
इन सभी संसाधनों से टीम के नए सदस्यों को लाभ मिलेगा। और वे आम तौर पर इस तरह की चीजें हैं जो आपके कोड को देखने से पहले भी नए योगदानकर्ताओं को देखते हैं, यह पता लगाने के लिए कि क्या आपका प्रोजेक्ट उनके लिए अपना समय बिताने के लिए सही जगह है।
|
||||||
|
|
||||||
|
✅ README फाइलें, हालांकि उन्हें तैयार करने में समय लगता है, अक्सर व्यस्त रखवाले द्वारा उपेक्षित कर दिए जाते हैं। क्या आप एक विशेष रूप से वर्णनात्मक का एक उदाहरण पा सकते हैं? नोट: कुछ अच्छे [READMEs बनाने में मदद करने के लिए कुछ उपकरण हैं](https://www.makeareadme.com/) जिन्हें आप आज़माना चाहते हैं।
|
||||||
|
|
||||||
|
### कार्य: कुछ कोड मर्ज करें
|
||||||
|
|
||||||
|
डॉक्स में योगदान करने से लोगों को परियोजना में योगदान करने में मदद मिलती है। यह बताता है कि आप किस प्रकार के योगदान की तलाश कर रहे हैं और प्रक्रिया कैसे काम करती है। योगदानकर्ताओं को GitHub पर आपके रेपो में योगदान करने में सक्षम होने के लिए कई चरणों से गुजरना होगा:
|
||||||
|
|
||||||
|
|
||||||
|
1. **अपने रेपो को फोर्क करना** आप शायद लोगों को अपनी परियोजना को _fork_ करना चाहेंगे। फोर्किंग का अर्थ है उनके GitHub प्रोफाइल पर अपनी रिपॉजिटरी की प्रतिकृति बनाना।
|
||||||
|
1. **क्लोन**.वहां से वे इस परियोजना को अपनी स्थानीय मशीन से जोड़ देंगे।
|
||||||
|
1. **एक शाखा बनाएँ**. आप उन्हें अपने काम के लिए एक _शाखा_ बनाने के लिए कहना चाहेंगे।
|
||||||
|
1. **एक क्षेत्र पर उनके परिवर्तन पर ध्यान दें**.योगदानकर्ताओं से एक समय में एक चीज़ पर उनके योगदान पर ध्यान केंद्रित करने के लिए कहें - इस तरह से संभावना है कि आप उनके काम में विलय कर सकते हैं। कल्पना कीजिए कि वे एक बग फिक्स लिखते हैं, एक नई सुविधा जोड़ते हैं, और कई परीक्षण अपडेट करते हैं - क्या होगा यदि आप चाहते हैं, या केवल 3 में से 2, या 3 में से 1 परिवर्तन लागू कर सकते हैं?
|
||||||
|
|
||||||
|
✅ ऐसी स्थिति की कल्पना करें जहां शाखाएं विशेष रूप से अच्छे कोड लिखने और शिपिंग करने के लिए महत्वपूर्ण हैं। आप किन मामलों का उपयोग कर सकते हैं?
|
||||||
|
|
||||||
|
> ध्यान दें, वह परिवर्तन हो जो आप दुनिया में देखना चाहते हैं, और अपने काम के लिए भी शाखाएँ बनाएँ। आपके द्वारा किया गया कोई भी शाखा उस शाखा पर बना दी जाएगी जिसे आप वर्तमान में "चेक आउट" कर रहे हैं। कौन सी शाखा है यह देखने के लिए `git status` का प्रयोग करें।
|
||||||
|
|
||||||
|
चलो एक योगदानकर्ता वर्कफ़्लो के माध्यम से चलते हैं। मान लें कि योगदानकर्ता पहले से ही रेपो को _फोर्क_ और _क्लोन_ कर चुका है, इसलिए उनके पास अपने स्थानीय मशीन पर काम करने के लिए तैयार गिट रेपो है:
|
||||||
|
|
||||||
|
1. **एक शाखा बनाएँ**.एक शाखा बनाने के लिए कमांड `git branch` का उपयोग करें जिसमें वे परिवर्तन होंगे जो उनके योगदान के लिए हैं:
|
||||||
|
|
||||||
|
```bash
|
||||||
|
git branch [शाखाका-नाम]
|
||||||
|
```
|
||||||
|
|
||||||
|
1. **कार्यशील शाखा पर स्विच करें**. निर्दिष्ट शाखा में स्विच करें और `git checkout` के साथ कार्य निर्देशिका को अपडेट करें:
|
||||||
|
|
||||||
|
```bash
|
||||||
|
git checkout [शाखाका-नाम]
|
||||||
|
```
|
||||||
|
|
||||||
|
1. **काम करो**. इस बिंदु पर आप अपने परिवर्तन जोड़ना चाहते हैं। निम्नलिखित आदेशों के बारे में Git को बताना न भूलें:
|
||||||
|
|
||||||
|
```bash
|
||||||
|
git add .
|
||||||
|
git commit -m "मेरे परिवर्तन"
|
||||||
|
```
|
||||||
|
|
||||||
|
यह सुनिश्चित करें कि आप अपनी खातिर एक अच्छा नाम दें, साथ ही साथ आप जिस रेपो में मदद कर रहे हैं उसका रखवालाका भी।
|
||||||
|
|
||||||
|
1. **`main` शाखा के साथ अपने काम को मिलाएं**. कुछ बिंदु पर आप काम कर रहे हैं और आप `main` शाखा के साथ अपने काम को जोड़ना चाहते हैं। `main` शाखा इस बीच बदल सकती है, इसलिए सुनिश्चित करें कि आपने इसे निम्न कमांड के साथ नवीनतम में अपडेट किया है:
|
||||||
|
|
||||||
|
```bash
|
||||||
|
git checkout main
|
||||||
|
git pull
|
||||||
|
```
|
||||||
|
|
||||||
|
इस बिंदु पर आप यह सुनिश्चित करना चाहते हैं कि कोई भी _टकराव_, परिस्थितियां जहां Git आसानी से आपके कामकाजी शाखा में होने वाले परिवर्तनों को _संयोजित_ नहीं कर सकती है। इसलिए निम्न आदेश चलाएँ:
|
||||||
|
|
||||||
|
```bash
|
||||||
|
git checkout [शाखाका-नाम]
|
||||||
|
git merge main
|
||||||
|
```
|
||||||
|
|
||||||
|
यह आपकी शाखा में `main` से सभी बदलाव लाएगा और उम्मीद है कि आप अभी भी जारी रख सकते हैं। यदि नहीं, तो VS कोड आपको बताएगा कि गिट कहां _उलझन_ में है और आप यह कहने के लिए प्रभावित फाइलों को बदल देते हैं कि कौन सी सामग्री सबसे सटीक है।
|
||||||
|
|
||||||
|
1. **अपना काम GitHub को भेजें**. अपने काम को GitHub में भेजने का मतलब है दो चीजें। अपनी शाखा को अपने रेपो में धकेलना और फिर एक पीआर, पुल अनुरोध को खोलें।
|
||||||
|
|
||||||
|
```bash
|
||||||
|
git push --set-upstream origin [शाखाका-नाम]
|
||||||
|
```
|
||||||
|
|
||||||
|
उपरोक्त कमांड आपके फोर्क्ड रेपो पर शाखा बनाता है।
|
||||||
|
|
||||||
|
1. **एक पीआर खोलें**. अगला, आप एक पीआर खोलना चाहते हैं। आप GitHub पर फोर्केड रेपो में नेविगेट करके ऐसा करते हैं। आपको GitHub पर एक संकेत दिखाई देगा जहां यह पूछता है कि क्या आप एक नया PR बनाना चाहते हैं, आप उस पर क्लिक करते हैं और आपको एक इंटरफ़ेस पर ले जाया जाता है जहाँ आप प्रतिबद्ध संदेश शीर्षक बदल सकते हैं, इसे अधिक उपयुक्त विवरण दे सकते हैं। अब रेपो के अनुरक्षक आप इस पीआर को देखेंगे और _उँगलियाँ पार_ कर जाएँगे जो आपके पीआर को सराहेंगे और _मर्ज_ करेंगे। अब आप एक योगदानकर्ता हैं, याय :)
|
||||||
|
|
||||||
|
1. **साफ - सफाई**. अपने को सफलतापूर्वक मर्ज करने के बाद _सफाई करना_ अच्छा माना जाता है। आप अपनी स्थानीय शाखा और उस शाखा को साफ़ करना चाहते हैं जिसे आपने GitHub में धकेल दिया है। पहले इसे निम्नलिखित कमांड के साथ स्थानीय रूप से हटा दें:
|
||||||
|
|
||||||
|
```bash
|
||||||
|
git branch -d [शाखाका-नाम]
|
||||||
|
```
|
||||||
|
|
||||||
|
सुनिश्चित करें कि आप अगले फोर्केड रेपो के लिए GitHub पृष्ठ पर जाएं और उस दूरस्थ शाखा को हटा दें जिसे आपने अभी पुश किया था।
|
||||||
|
|
||||||
|
`पुल अनुरोध` एक मूर्खतापूर्ण शब्द की तरह लगता है क्योंकि वास्तव में आप परियोजना में अपने परिवर्तनों को आगे बढ़ाना चाहते हैं। लेकिन अनुरक्षक (परियोजना स्वामी) या कोर टीम को परियोजना की "main" शाखा के साथ विलय करने से पहले आपके परिवर्तनों पर विचार करने की आवश्यकता है, इसलिए आप वास्तव में एक अनुचर से परिवर्तन के निर्णय का अनुरोध कर रहे हैं।
|
||||||
|
|
||||||
|
एक पुल अनुरोध समीक्षा, टिप्पणियों, एकीकृत परीक्षणों और अधिक के साथ एक शाखा पर पेश किए गए मतभेदों की तुलना और चर्चा करने का स्थान है। एक अच्छा पुल अनुरोध एक प्रतिबद्ध संदेश के समान नियमों का पालन करता है। आप समस्या ट्रैकर में किसी समस्या के संदर्भ को जोड़ सकते हैं, जब उदाहरण के लिए आपका कार्य किसी समस्या को हल करता है। यह आपके अंक की संख्या के बाद एक `#` का उपयोग करके किया जाता है। उदाहरण के लिए `# 97`।
|
||||||
|
|
||||||
|
🤞उंगलियों ने पार कर दिया कि सभी चेक पास हो गए और परियोजना के मालिकों ने परियोजना में आपके बदलावों को मर्ज कर दिया🤞
|
||||||
|
|
||||||
|
GitHub पर संबंधित दूरस्थ शाखा से सभी नए कमिट के साथ अपनी वर्तमान स्थानीय कार्य शाखा को अपडेट करें:
|
||||||
|
|
||||||
|
`git pull`
|
||||||
|
|
||||||
|
## कैसे खुला स्रोत में योगदान करे
|
||||||
|
|
||||||
|
सबसे पहले, आप के हित के GitHub पर एक रिपॉजिटरी (या **रेपो**) ढूंढें और जिसमें आप बदलाव में योगदान करना चाहते हैं। आप इसकी सामग्री को अपनी मशीन पर कॉपी करना चाहेंगे।
|
||||||
|
|
||||||
|
✅'शुरुआती-अनुकूल' रेपो को खोजने का एक अच्छा तरीका है, ['good-first-issue' द्वारा खोज करना](https://github.blog/2020-01-22-browse-good-first-issues-to-start-contributing-to-open-source/).
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
कोड को कॉपी करने के कई तरीके हैं। एक तरीका है रिपॉजिटरी की सामग्री को "क्लोन" करना, HTTPS, SSH का उपयोग करना, या GitHub CLI (कमांड लाइन इंटरफ़ेस) का उपयोग करना।
|
||||||
|
|
||||||
|
अपना टर्मिनल खोलें और रिपॉजिटरी को क्लोन करें जैसे:
|
||||||
|
`git clone https://github.com/ProjectURL`
|
||||||
|
|
||||||
|
प्रोजेक्ट पर काम करने के लिए, सही फ़ोल्डर पर जाएँ:
|
||||||
|
`cd ProjectURL`
|
||||||
|
|
||||||
|
आप [Codespaces](https://github.com/features/codespaces), GitHub के एम्बेडेड कोड एडिटर / क्लाउड डेवलपमेंट एन्वायरमेंट, या [GitHub Desktop](https://desktop.github.com/) का उपयोग करके पूरी परियोजना भी खोल सकते हैं ) का है।
|
||||||
|
|
||||||
|
अंत में, आप ज़िप फ़ोल्डर में कोड डाउनलोड कर सकते हैं।
|
||||||
|
|
||||||
|
### GitHub के बारे में कुछ और दिलचस्प बातें
|
||||||
|
|
||||||
|
आप GitHub पर किसी भी पब्लिक रिपॉजिटरी को स्टार, पहरा और/या "फोर्क" कर सकते हैं। आप शीर्ष-दाएँ ड्रॉप-डाउन मेनू में अपने तारांकित रिपॉजिटरी पा सकते हैं। यह बुकमार्क करने जैसा है, लेकिन कोड के लिए।
|
||||||
|
|
||||||
|
परियोजनाओं में एक मुद्दा ट्रैकर है, ज्यादातर "इश्यू" टैब में गिटहब पर जब तक कि अन्यथा इंगित नहीं किया जाता है, जहां लोग परियोजना से संबंधित मुद्दों पर चर्चा करते हैं। और पुल अनुरोध टैब वह है जहां लोग उन परिवर्तनों की चर्चा और समीक्षा करते हैं जो प्रगति पर हैं।
|
||||||
|
|
||||||
|
परियोजनाओं की चर्चा फ़ोरम, मेलिंग सूचियों, या चैट चैनलों जैसे स्लैक, डिस्कोर्ड या आईआरसी में भी हो सकती है।
|
||||||
|
|
||||||
|
✅ अपने नए GitHub रेपो के चारों ओर एक नज़र डालें और कुछ चीजों को आज़माएं, जैसे कि सेटिंग्स को संपादित करना, अपने रेपो में जानकारी जोड़ना और एक प्रोजेक्ट बनाना (जैसे कंबन बोर्ड)। बहुत कुछ है जो आप कर सकते हैं!
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 🚀 चुनौती
|
||||||
|
|
||||||
|
एक दूसरे के कोड पर काम करने के लिए एक दोस्त के साथ जोडे। सहयोगी रूप से एक परियोजना बनाएँ, कोड बनाएँ, शाखाएँ बनाएँ, और परिवर्तनों को मर्ज करें।
|
||||||
|
|
||||||
|
## व्याख्यान उपरांत प्रश्नोत्तरी
|
||||||
|
[व्याख्यान उपरांत प्रश्नोत्तरी](https://nice-beach-0fe9e9d0f.azurestaticapps.net/quiz/4?loc=hi)
|
||||||
|
|
||||||
|
## समीक्षा और स्व अध्ययन
|
||||||
|
|
||||||
|
[ओपन सोर्स सॉफ्टवेयर में योगदान](https://opensource.guide/how-to-contribute/#how-to-submit-a-contribution) के बारे में और पढ़ें।
|
||||||
|
|
||||||
|
[गिट चिटशीट](https://training.github.com/downloads/github-git-cheat-sheet/).
|
||||||
|
|
||||||
|
अभ्यास, अभ्यास, अभ्यास। GitHub में [lab.github.com](https://lab.github.com/) के माध्यम से सीखने के शानदार रास्ते उपलब्ध हैं:
|
||||||
|
|
||||||
|
- [GitHub पर पहला सप्ताह](https://lab.github.com/githubtraining/first-week-on-github)
|
||||||
|
|
||||||
|
आपको और भी उन्नत प्रयोगशालाएँ मिलेंगी।
|
||||||
|
|
||||||
|
## असाइनमेंट
|
||||||
|
|
||||||
|
[GitHub प्रशिक्षण प्रयोगशाला पर पहला सप्ताह](https://lab.github.com/githubtraining/first-week-on-github) पूरा करे
|
||||||
@ -0,0 +1,227 @@
|
|||||||
|
# सुलभ वेबपृष्ठ बनाना
|
||||||
|
|
||||||
|
|
||||||
|
> [टोमोमी इमुरा](https://twitter.com/girlie_mac) द्वारा स्केचनेट
|
||||||
|
|
||||||
|
## पूर्व व्याख्यान प्रश्नोत्तरी
|
||||||
|
[पूर्व व्याख्यान प्रश्नोत्तरी](https://nice-beach-0fe9e9d0f.azurestaticapps.net/quiz/5?loc=hi)
|
||||||
|
|
||||||
|
> वेब की शक्ति अपनी सार्वभौमिकता में है। विकलांगता की परवाह किए बिना सभी तक पहुंच एक आवश्यक पहलू है।
|
||||||
|
>
|
||||||
|
> \- सर टिमोथी बर्नर्स-ली, W3C निदेशक और वर्ल्ड वाइड वेब के आविष्कारक
|
||||||
|
|
||||||
|
यह उद्धरण सुलभ वेबसाइट बनाने के महत्व पर पूरी तरह से प्रकाश डालता है। एक एप्लिकेशन जिसे सभी द्वारा एक्सेस नहीं किया जा सकता है वह परिभाषा बहिष्करण द्वारा है। वेब डेवलपर्स के रूप में हमें हमेशा ध्यान में रखना चाहिए। शुरू से इस पर ध्यान केंद्रित करने से आप अपने तरीके से अच्छी तरह से सुनिश्चित कर पाएंगे कि हर कोई आपके द्वारा बनाए गए पृष्ठों तक पहुंच बना सके। इस पाठ में, आप उन टूल्स के बारे में जानेंगे जो यह सुनिश्चित करने में आपकी मदद कर सकते हैं कि आपकी वेब एसेट्स सुलभ हैं और एक्सेसिबिलिटी को ध्यान में रखते हुए कैसे बनाया जाए।
|
||||||
|
|
||||||
|
## उपयोग करने के उपकरण
|
||||||
|
|
||||||
|
### स्क्रीन रीडर
|
||||||
|
|
||||||
|
सबसे प्रसिद्ध पहुँच उपकरणों में से एक स्क्रीन रीडर हैं।
|
||||||
|
|
||||||
|
[स्क्रीन रीडर](https://en.wikipedia.org/wiki/Screen_reader) आमतौर पर दृष्टि हानि वाले लोगों के लिए उपयोग किए जाते हैं। जैसा कि हम एक ब्राउज़र सुनिश्चित करने में समय बिताते हैं, हम जो जानकारी साझा करना चाहते हैं, उसे ठीक से बता देते हैं, हमें यह भी सुनिश्चित करना चाहिए कि स्क्रीन रीडर भी ऐसा ही करे।
|
||||||
|
|
||||||
|
इसके सबसे मूल में, एक स्क्रीन रीडर ऊपर से नीचे तक एक पृष्ठ को श्रव्य रूप से पढ़ेगा। यदि आपका पृष्ठ सभी पाठ है, तो पाठक एक ब्राउज़र में इसी तरह से जानकारी को बताएगा। बेशक, वेब पेज शायद ही कभी विशुद्ध रूप से टेक्स्ट होते हैं; वे लिंक, ग्राफिक्स, रंग, और अन्य दृश्य घटक शामिल होंगे। यह सुनिश्चित करने के लिए ध्यान रखा जाना चाहिए कि यह जानकारी स्क्रीन रीडर द्वारा सही ढंग से पढ़ी जाए।
|
||||||
|
|
||||||
|
प्रत्येक वेब डेवलपर को स्क्रीन रीडर के साथ खुद को परिचित करना चाहिए। जैसा कि ऊपर प्रकाश डाला गया है, यह वह क्लाइंट है जिसे आपके उपयोगकर्ता उपयोग करेंगे। बहुत कुछ उसी तरह से जिससे आप परिचित हैं कि ब्राउज़र कैसे संचालित होता है, आपको यह सीखना चाहिए कि स्क्रीन रीडर कैसे संचालित होता है। सौभाग्य से, स्क्रीन रीडर अधिकांश ऑपरेटिंग सिस्टम में निर्मित होते हैं।
|
||||||
|
|
||||||
|
कुछ ब्राउज़रों में अंतर्निहित टूल और एक्सटेंशन भी होते हैं, जो टेक्स्ट को जोर से पढ़ सकते हैं या कुछ बुनियादी नौवहन सुविधाएँ भी प्रदान कर सकते हैं, जैसे कि [ये एक्सेसिबिलिटी-केंद्रित एज ब्राउज़र टूल](https://support.microsoft.com/en-us/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://developer.mozilla.org/en-US/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/) कहा जाता है।
|
||||||
|
### कंट्रास्ट चेकर्स
|
||||||
|
|
||||||
|
कलर-ब्लाइंड यूजर्स या ऐसे लोग जिन्हें कम कंट्रास्ट कलर देखने में दिक्कत होती है, उनकी जरूरतों का जवाब देने के लिए वेब साइट्स पर रंगों को सावधानी से चुना जाना चाहिए।
|
||||||
|
|
||||||
|
✅ ब्राउज़र एक्सटेंशन के साथ रंग उपयोग के लिए उपयोग की जाने वाली वेब साइट का परीक्षण करें, जैसे कि [WCAG का कलर चेकर](https://microsoftedge.microsoft.com/addons/detail/wcag-color-contrast-check/idahaggnlnekelhgplklhfpchbfdmkjp?hl=en-US)। आप क्या सीखते हैं?
|
||||||
|
|
||||||
|
### लाइटहाउस
|
||||||
|
|
||||||
|
अपने ब्राउज़र के डेवलपर टूल क्षेत्र में, आपको लाइटहाउस टूल मिलेगा। वेब साइट की पहुंच (साथ ही अन्य विश्लेषण) का पहला दृश्य प्राप्त करने के लिए यह उपकरण महत्वपूर्ण है। हालांकि यह विशेष रूप से लाइटहाउस पर भरोसा नहीं करना महत्वपूर्ण है, एक आधार रेखा के रूप में 100% स्कोर बहुत मददगार है।
|
||||||
|
|
||||||
|
✅ अपने ब्राउज़र के डेवलपर टूल पैनल में लाइटहाउस ढूंढें और किसी भी साइट पर विश्लेषण चलाएं। आपको क्या मिला ?
|
||||||
|
|
||||||
|
## पहुंच के लिए डिजाइनिंग
|
||||||
|
|
||||||
|
पहुँच एक अपेक्षाकृत बड़ा विषय है। आपकी सहायता करने के लिए, कई संसाधन उपलब्ध हैं।
|
||||||
|
|
||||||
|
- [सुलभ यू - मिनेसोटा विश्वविद्यालय](https://accessibility.umn.edu/your-role/web-wevelopmentation)
|
||||||
|
|
||||||
|
हालांकि हम सुलभ साइटों को बनाने के हर पहलू को कवर नहीं कर पाएंगे, नीचे कुछ मुख्य सिद्धांत हैं जिन्हें आप लागू करना चाहते हैं। प्रारंभ से एक सुलभ पृष्ठ डिजाइन करना **हमेशा** सुलभ है और इसे सुलभ बनाने के लिए मौजूदा पृष्ठ पर वापस जाना आसान है।
|
||||||
|
|
||||||
|
## अच्छे प्रदर्शन के सिद्धांत
|
||||||
|
|
||||||
|
### रंग सुरक्षित पट्टियाँ
|
||||||
|
|
||||||
|
लोग दुनिया को विभिन्न तरीकों से देखते हैं, और इसमें रंग शामिल हैं। अपनी साइट के लिए एक रंग योजना का चयन करते समय, आपको यह सुनिश्चित करना चाहिए कि यह सभी के लिए सुलभ हो। रंग पट्टियाँ बनाने के लिए एक महान [टूल कलर सेफ है](http://colorsafe.co/)।
|
||||||
|
|
||||||
|
✅ एक वेब साइट की पहचान करें जो रंग के उपयोग में बहुत समस्याग्रस्त है। क्यों?
|
||||||
|
|
||||||
|
### सही HTML का उपयोग करें
|
||||||
|
|
||||||
|
सीएसएस और जावास्क्रिप्ट के साथ किसी भी तत्व को किसी भी प्रकार के नियंत्रण की तरह बनाना संभव है। `<span>` का उपयोग एक `<button>` बनाने के लिए किया जा सकता है, और `<b>` हाइपरलिंक बन सकता है। हालांकि यह शैली के लिए आसान माना जा सकता है, यह एक स्क्रीन रीडर के लिए कुछ भी नहीं बताता है। पृष्ठ पर नियंत्रण बनाते समय उपयुक्त HTML का उपयोग करें। यदि आप हाइपरलिंक चाहते हैं, तो `<a>` का उपयोग करें। सही नियंत्रण के लिए सही HTML का उपयोग करना शब्दार्थ HTML का उपयोग करना कहलाता है।
|
||||||
|
|
||||||
|
✅ किसी भी वेब साइट पर जाएं और देखें कि डिजाइनर और डेवलपर HTML का सही उपयोग कर रहे हैं या नहीं। क्या आपको एक बटन मिल सकता है जो एक लिंक होना चाहिए? संकेत: अंतर्निहित कोड देखने के लिए अपने ब्राउज़र में राइट क्लिक करें और 'व्यू पेज सोर्स' चुनें।
|
||||||
|
|
||||||
|
### एक वर्णनात्मक शीर्षक पदानुक्रम बनाएँ
|
||||||
|
|
||||||
|
स्क्रीन रीडर उपयोगकर्ता [शीर्षकों पर बहुत भरोसा करते हैं](https://webaim.org/projects/screenreadersurvey8/#finding) जानकारी खोजने और एक पृष्ठ के माध्यम से नेविगेट करने के लिए। वर्णनात्मक शीर्षक सामग्री लिखना और अर्थ हेडिंग टैग का उपयोग करना स्क्रीन रीडर उपयोगकर्ताओं के लिए आसानी से नेविगेट करने योग्य साइट बनाने के लिए महत्वपूर्ण है।
|
||||||
|
|
||||||
|
### अच्छे दृश्य सुराग का उपयोग करें
|
||||||
|
|
||||||
|
सीएसएस एक पृष्ठ पर किसी भी तत्व के देखो पर पूर्ण नियंत्रण प्रदान करता है। आप बिना किसी आउटलाइन या बिना हाइपरलिंक के टेक्स्ट बॉक्स बना सकते हैं। दुर्भाग्यवश उन सुरागों को हटाना किसी ऐसे व्यक्ति के लिए अधिक चुनौतीपूर्ण हो सकता है जो उन पर निर्भर करता है जो नियंत्रण के प्रकार को पहचानने में सक्षम हो।
|
||||||
|
|
||||||
|
## लिंक टेक्स्ट का महत्व
|
||||||
|
|
||||||
|
हाइपरलिंक्स वेब नेविगेट करने के लिए मुख्य हैं। नतीजतन, स्क्रीन रीडर सुनिश्चित करना लिंक को ठीक से पढ़ सकता है, जिससे सभी उपयोगकर्ता आपकी साइट को नेविगेट कर सकते हैं।
|
||||||
|
|
||||||
|
### स्क्रीन रीडर और लिंक
|
||||||
|
|
||||||
|
जैसा कि आप उम्मीद करेंगे, स्क्रीन रीडर्स लिंक टेक्स्ट को उसी तरह से पढ़ेंगे जैसे वे पृष्ठ पर किसी अन्य टेक्स्ट को पढ़ते हैं। इसे ध्यान में रखते हुए, नीचे प्रदर्शित टेक्स्ट पूरी तरह स्वीकार्य लग सकता है।
|
||||||
|
|
||||||
|
> छोटा पेंगुइन, जिसे कभी-कभी परी पेंगुइन के रूप में जाना जाता है, दुनिया का सबसे छोटा पेंगुइन है। अधिक जानकारी के लिए [यहां क्लिक करें](https://en.wikipedia.org/wiki/Little_penguin)।
|
||||||
|
|
||||||
|
> छोटा पेंगुइन, जिसे कभी-कभी परी पेंगुइन के रूप में जाना जाता है, दुनिया का सबसे छोटा पेंगुइन है। अधिक जानकारी के लिए https://en.wikipedia.org/wiki/Little_penguin पर जाएं।
|
||||||
|
> ** नोट ** जैसा कि आप पढ़ने वाले हैं, आपको ** कभी भी ** लिंक नहीं बनाना चाहिए जो ऊपर की तरह दिखते हों।
|
||||||
|
|
||||||
|
याद रखें, स्क्रीन रीडर एक अलग सेट के साथ ब्राउज़रों से अलग इंटरफ़ेस हैं।
|
||||||
|
|
||||||
|
### URL का उपयोग करने में समस्या
|
||||||
|
|
||||||
|
स्क्रीन रीडर पाठ पढ़ते हैं। यदि टेक्स्ट में URL दिखाई देता है, तो स्क्रीन रीडर URL को पढ़ेगा। सामान्यतया, URL सार्थक जानकारी नहीं देता है, और कष्टप्रद ध्वनि कर सकता है। यदि आपका फ़ोन कभी श्रव्य रूप से URL के साथ टेक्स्ट संदेश पढ़ता है, तो आपको इसका अनुभव हो सकता है।
|
||||||
|
|
||||||
|
### "यहाँ क्लिक करें" के साथ समस्या
|
||||||
|
|
||||||
|
स्क्रीन पाठकों के पास एक पृष्ठ पर केवल हाइपरलिंक पढ़ने की क्षमता होती है, उसी तरह एक दृष्टिहीन व्यक्ति लिंक के लिए एक पेज स्कैन करेगा। यदि लिंक टेक्स्ट हमेशा "यहां क्लिक करें" है, तो सभी उपयोगकर्ता सुनेंगे "यहां क्लिक करें, यहां क्लिक करें, यहां क्लिक करें, यहां क्लिक करें, यहां क्लिक करें ..." सभी लिंक अब एक दूसरे से अप्रभेद्य हैं।
|
||||||
|
|
||||||
|
### अच्छा लिंक टेक्स्ट
|
||||||
|
|
||||||
|
अच्छा लिंक टेक्स्ट संक्षेप में बताता है कि लिंक के दूसरी तरफ क्या है। उपरोक्त उदाहरणों में छोटे पेंगुइन के बारे में बात करते हुए, लिंक प्रजाति के बारे में विकिपीडिया पृष्ठ पर है। वाक्यांश *थोड़ा पेंगुइन* सही लिंक टेक्स्ट के लिए बना देगा क्योंकि यह स्पष्ट करता है कि कोई व्यक्ति इस बारे में सीखेगा कि क्या वे लिंक पर क्लिक करते हैं - छोटे पेंगुइन।
|
||||||
|
|
||||||
|
> [छोटा पेंगुइन](https://en.wikipedia.org/wiki/Little_penguin), जिसे कभी-कभी परी पेंगुइन के रूप में जाना जाता है, दुनिया का सबसे छोटा पेंगुइन है।
|
||||||
|
|
||||||
|
✅ उन पृष्ठों को खोजने के लिए कुछ मिनटों के लिए वेब सर्फ करें जो अस्पष्ट लिंकिंग रणनीतियों का उपयोग करते हैं। अन्य, बेहतर-लिंक्ड साइटों के साथ उनकी तुलना करें। आप क्या सीखते हैं?
|
||||||
|
|
||||||
|
#### खोज इंजन नोट्स
|
||||||
|
|
||||||
|
अपनी साइट को सुनिश्चित करने के लिए एक अतिरिक्त बोनस के रूप में सभी के लिए सुलभ है, आप खोज इंजन को आपकी साइट पर भी नेविगेट करने में मदद करेंगे। खोज इंजन पृष्ठों के विषयों को जानने के लिए लिंक पाठ का उपयोग करते हैं। इसलिए अच्छे लिंक टेक्स्ट का उपयोग करना सभी की मदद करता है!
|
||||||
|
|
||||||
|
### ARIA
|
||||||
|
|
||||||
|
निम्नलिखित पृष्ठ की कल्पना करें:
|
||||||
|
|
||||||
|
| Product | Description | Order |
|
||||||
|
| ------------ | ------------------ | ------------ |
|
||||||
|
| Widget | [Description]('#') | [Order]('#') |
|
||||||
|
| Super widget | [Description]('#') | [Order]('#') |
|
||||||
|
|
||||||
|
इस उदाहरण में, वर्णन और आदेश के पाठ की नकल करना किसी ब्राउज़र का उपयोग करने वाले व्यक्ति के लिए समझ में आता है। हालाँकि, स्क्रीन रीडर का उपयोग करने वाला कोई व्यक्ति केवल संदर्भ के बिना *विवरण* और *आदेश* दोहराता है।
|
||||||
|
|
||||||
|
इस प्रकार के परिदृश्यों का समर्थन करने के लिए, HTML [एक्सेसिबल रिच इंटरनेट एप्लिकेशन (ARIA)](https://developer.mozilla.org/docs/Web/Accessibility/ARIA) नामक विशेषताओं का एक सेट का समर्थन करता है। ये विशेषताएँ आपको स्क्रीन पाठकों को अतिरिक्त जानकारी प्रदान करने की अनुमति देती हैं।
|
||||||
|
|
||||||
|
> ** नोट **: HTML के कई पहलुओं की तरह, ब्राउज़र और स्क्रीन रीडर समर्थन भिन्न हो सकते हैं। हालांकि, अधिकांश मेनलाइन क्लाइंट ARIA विशेषताओं का समर्थन करते हैं।
|
||||||
|
|
||||||
|
जब पृष्ठ का प्रारूप आपको अनुमति नहीं देता है, तो लिंक का वर्णन करने के लिए आप `aria-label` का उपयोग कर सकते हैं। विजेट के लिए विवरण के रूप में सेट किया जा सकता है
|
||||||
|
|
||||||
|
``` html
|
||||||
|
<a href="#" aria-label="Widget description">description</a>
|
||||||
|
```
|
||||||
|
|
||||||
|
✅ सामान्य तौर पर, ऊपर वर्णित शब्दार्थ मार्कअप का उपयोग ARIA के उपयोग को बढ़ा देता है, लेकिन कभी-कभी विभिन्न HTML विजेट के लिए कोई शब्दार्थ समतुल्य नहीं होता है। एक अच्छा उदाहरण एक पेड़ है। एक पेड़ के लिए कोई HTML समतुल्य नहीं है, इसलिए आप इस तत्व के लिए एक उचित भूमिका और aria मान के साथ जेनेरिक `<div>` की पहचान करते हैं। [ARIA पर MDN प्रलेखन](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA) में अधिक उपयोगी जानकारी है।
|
||||||
|
|
||||||
|
```html
|
||||||
|
<h2 id="tree-label">File Viewer</h2>
|
||||||
|
<div role="tree" aria-labelledby="tree-label">
|
||||||
|
<div role="treeitem" aria-expanded="false" tabindex="0">Uploads</div>
|
||||||
|
</div>
|
||||||
|
```
|
||||||
|
|
||||||
|
## इमेजिस
|
||||||
|
|
||||||
|
यह बिना कहे चला जाता है कि स्क्रीन रीडर स्वचालित रूप से पढ़ने में असमर्थ हैं कि एक छवि में क्या है। यह सुनिश्चित करना कि छवियां सुलभ हैं, बहुत काम नहीं करता है - यह वही है जो `alt` गुणकी विशेषता है। सभी सार्थक चित्रों में यह बताने के लिए कि वे क्या हैं, एक `alt` गुण होना चाहिए।
|
||||||
|
छवियां जो विशुद्ध रूप से सजावटी हैं, उनके पास एक खाली स्ट्रिंग के लिए उनके `alt` विशेषता होनी चाहिए:`alt=""`। यह स्क्रीन पाठकों को अनावश्यक रूप से सजावटी छवि की घोषणा करने से रोकता है।
|
||||||
|
|
||||||
|
✅ जैसा कि आप उम्मीद कर सकते हैं, खोज इंजन भी यह समझने में असमर्थ हैं कि एक छवि में क्या है। वे ऑल्ट टेक्स्ट का भी इस्तेमाल करते हैं। तो एक बार फिर, सुनिश्चित करना कि आपका पृष्ठ सुलभ है, अतिरिक्त बोनस प्रदान करता है!
|
||||||
|
|
||||||
|
## थे कीबोर्ड
|
||||||
|
|
||||||
|
कुछ उपयोगकर्ता माउस या ट्रैकपैड का उपयोग करने में असमर्थ हैं, इसके बजाय एक तत्व से दूसरे तक टैब के लिए कीबोर्ड इंटरैक्शन पर निर्भर हैं। आपकी वेब साइट के लिए यह महत्वपूर्ण है कि आप अपनी सामग्री को तार्किक क्रम में प्रस्तुत करें ताकि एक कीबोर्ड उपयोगकर्ता प्रत्येक इंटरैक्टिव तत्व तक पहुँच सके क्योंकि वे एक दस्तावेज़ को स्थानांतरित करते हैं।यदि आप अपने वेब पेजों को सिमेंटिक मार्कअप के साथ बनाते हैं और उनके विज़ुअल लेआउट को स्टाइल करने के लिए CSS का उपयोग करते हैं, तो आपकी साइट कीबोर्ड-नेवीगेबल होनी चाहिए, लेकिन इस पहलू को मैन्युअल रूप से जांचना महत्वपूर्ण है। [कीबोर्ड नेविगेशन रणनीतियों](https://webaim.org/techniques/keyboard/) के बारे में अधिक जानें।
|
||||||
|
|
||||||
|
✅ किसी भी वेब साइट पर जाएं और केवल अपने कीबोर्ड का उपयोग करके इसके माध्यम से नेविगेट करने का प्रयास करें। क्या काम करता है, क्या काम नहीं करता है? क्यों?
|
||||||
|
|
||||||
|
## सारांश
|
||||||
|
|
||||||
|
कुछ के लिए सुलभ वेब वास्तव में 'विश्वव्यापी वेब' नहीं है। आपके द्वारा बनाई जा सकने वाली साइटों को सुनिश्चित करने का सबसे अच्छा तरीका शुरू से ही सुलभता सर्वोत्तम प्रथाओं को शामिल करना है। जबकि अतिरिक्त चरण शामिल हैं, इन कौशल को अपने वर्कफ़्लो में शामिल करने का मतलब होगा कि आपके द्वारा बनाए गए सभी पृष्ठ सुलभ होंगे।
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 🚀 चुनौती
|
||||||
|
|
||||||
|
इस HTML को ले लो और इसे फिर से संभव के रूप में सुलभ होने के लिए फिर से लिखना, आपके द्वारा सीखी गई रणनीतियों को देखते हुए।
|
||||||
|
|
||||||
|
```html
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<title>
|
||||||
|
Example
|
||||||
|
</title>
|
||||||
|
<link href='../assets/style.css' rel='stylesheet' type='text/css'>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div class="site-header">
|
||||||
|
<p class="site-title">Turtle Ipsum</p>
|
||||||
|
<p class="site-subtitle">The World's Premier Turtle Fan Club</p>
|
||||||
|
</div>
|
||||||
|
<div class="main-nav">
|
||||||
|
<p class="nav-header">Resources</p>
|
||||||
|
<div class="nav-list">
|
||||||
|
<p class="nav-item nav-item-bull"><a href="https://www.youtube.com/watch?v=CMNry4PE93Y">"I like turtles"</a></p>
|
||||||
|
<p class="nav-item nav-item-bull"><a href="https://en.wikipedia.org/wiki/Turtle">Basic Turtle Info</a></p>
|
||||||
|
<p class="nav-item nav-item-bull"><a href="https://en.wikipedia.org/wiki/Turtles_(chocolate)">Chocolate Turtles</a></p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="main-content">
|
||||||
|
<div>
|
||||||
|
<p class="page-title">Welcome to Turtle Ipsum.
|
||||||
|
<a href="">Click here</a> to learn more.
|
||||||
|
</p>
|
||||||
|
<p class="article-text">
|
||||||
|
Turtle ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="footer">
|
||||||
|
<div class="footer-section">
|
||||||
|
<span class="button">Sign up for turtle news</span>
|
||||||
|
</div><div class="footer-section">
|
||||||
|
<p class="nav-header footer-title">
|
||||||
|
Internal Pages
|
||||||
|
</p>
|
||||||
|
<div class="nav-list">
|
||||||
|
<p class="nav-item nav-item-bull"><a href="../">Index</a></p>
|
||||||
|
<p class="nav-item nav-item-bull"><a href="../semantic">Semantic Example</a></p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<p class="footer-copyright">© 2016 Instrument</span>
|
||||||
|
</div>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
```
|
||||||
|
|
||||||
|
## व्याख्यान उपरांत प्रश्नोत्तरी
|
||||||
|
[व्याख्यान उपरांत प्रश्नोत्तरी](https://nice-beach-0fe9e9d0f.azurestaticapps.net/quiz/6?loc=hi)
|
||||||
|
|
||||||
|
## समीक्षा और स्व अध्ययन
|
||||||
|
|
||||||
|
कई सरकारों के पास सुलभता आवश्यकताओं के संबंध में कानून हैं। अपने देश की पहुंच कानूनों पर पढ़ें। क्या शामिल है, और क्या नहीं है? एक उदाहरण है [यह सरकारी वेब साइट](https://accessibility.blog.gov.uk/).
|
||||||
|
|
||||||
|
## असाइनमेंट
|
||||||
|
|
||||||
|
[एक गैर-सुलभ वेब साइट का विश्लेषण करें](assignment.hi.md)
|
||||||
|
|
||||||
|
क्रेडिट: [Turtle Ipsum](https://github.com/Instrument/semantic-html-sample) साधन द्वारा
|
||||||
@ -0,0 +1,17 @@
|
|||||||
|
# वेब डेवलपमेंट के साथ शुरुआत करना
|
||||||
|
|
||||||
|
पाठ्यक्रम के इस खंड में, आपको पेशेवर डेवलपर बनने के लिए महत्वपूर्ण गैर-परियोजना आधारित अवधारणाओं से परिचित कराया जाएगा।
|
||||||
|
|
||||||
|
### विषय
|
||||||
|
|
||||||
|
1. [प्रोग्रामिंग भाषाओं और व्यापार के उपकरण का परिचय](../1-intro-to-programming-languages/translations/README.hi.md)
|
||||||
|
2. [गिटहब की मूल बातें](../2-github-basics/translations/README.hi.md)
|
||||||
|
3. [पहुँच की मूल बातें](../3-accessibility/translations/README.hi.md)
|
||||||
|
|
||||||
|
### क्रेडिट
|
||||||
|
|
||||||
|
एक्सेसिबिलिटी की मूल बातें [क्रिस्टोफर हैरिसन](https://twitter.com/geektrainer) द्वारा लिखी गया था
|
||||||
|
|
||||||
|
GitHub का परिचय [फ्लोर ड्रेस](https://twitter.com/floordrees) द्वारा ♥️ के साथ लिखी गई थीं
|
||||||
|
|
||||||
|
प्रोग्रामिंग भाषाओं और व्यापार के उपकरण का परिचय [जस्मिने ग्रीनवे](https://twitter.com/paladique) द्वारा ♥️ के साथ लिखी गई थीं
|
||||||
@ -0,0 +1,196 @@
|
|||||||
|
# जावास्क्रिप्ट मूल बातें: डेटा प्रकार
|
||||||
|
|
||||||
|
|
||||||
|
> [टोमोमी इमुरा](https://twitter.com/girlie_mac) द्वारा स्केचनेट
|
||||||
|
|
||||||
|
## पूर्व व्याख्यान प्रश्नोत्तरी
|
||||||
|
[पूर्व व्याख्यान प्रश्नोत्तरी](https://nice-beach-0fe9e9d0f.azurestaticapps.net/quiz/7?loc=hi)
|
||||||
|
|
||||||
|
इस पाठ में जावास्क्रिप्ट की मूल बातें शामिल हैं, वह भाषा जो वेब पर अन्तरक्रियाशीलता प्रदान करती है।
|
||||||
|
|
||||||
|
[](https://youtube.com/watch?v=JNIXfGiDWM8 "जावास्क्रिप्ट में डेटा प्रकार")
|
||||||
|
|
||||||
|
|
||||||
|
चलो वेरिएबल्स और डेटा प्रकारों के साथ शुरू करते हैं जो उन्हें आबाद करते हैं!
|
||||||
|
|
||||||
|
## वेरिएबल्स
|
||||||
|
|
||||||
|
वेरिएबल्स उन मूल्यों को संग्रहीत करते हैं जिन्हें आपके कोड में उपयोग और बदला जा सकता है।
|
||||||
|
|
||||||
|
बनाना और **घोषित करना** एक चर में निम्नलिखित सिंटैक्स है **[कीवर्ड] [नाम]**। यह दो भागों से बना है:
|
||||||
|
|
||||||
|
- **कीवर्ड**. कीवर्ड `let` या `var` हो सकते हैं।
|
||||||
|
|
||||||
|
> ध्यान दें, वे कीवर्ड `let` को ES6 में पेश किया गया था और आपके वैरिएबल को तथाकथित _block scope_ देता है। यह अनुशंसा की जाती है कि आप `let` over` var` का उपयोग करें। हम भविष्य के भागों में ब्लॉक स्कोप को अधिक गहराई से कवर करेंगे।
|
||||||
|
- **वेरिएबल्स नाम**, यह एक ऐसा नाम है जिसे आप स्वयं चुनते हैं।
|
||||||
|
|
||||||
|
### कार्य - वेरिएबल्स के साथ काम करना
|
||||||
|
|
||||||
|
1. ** एक वेरिएबल्स की घोषणा **। चलो 'let' कीवर्ड का उपयोग करते हुए एक चर घोषित करते हैं:
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
let myVariable;
|
||||||
|
```
|
||||||
|
|
||||||
|
`myVariable` अब` let` कीवर्ड का उपयोग करके घोषित किया गया है। वर्तमान में इसका कोई मूल्य नहीं है।
|
||||||
|
|
||||||
|
1. **एक मान असाइन करें**। वैरिएबल में `= 'ऑपरेटर के साथ एक वैल्यू स्टोर करें, उसके बाद अपेक्षित वैल्यू।
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
myVariable = 123;
|
||||||
|
```
|
||||||
|
|
||||||
|
> नोट: इस पाठ में `=` का उपयोग करने का अर्थ है कि हम एक "असाइनमेंट ऑपरेटर" का उपयोग करते हैं, जिसका उपयोग वैरिएबल पर मान सेट करने के लिए किया जाता है। यह समानता को निरूपित नहीं करता है।
|
||||||
|
|
||||||
|
`myVariable` अब मूल्य 123 के साथ * प्रारंभ * कर दिया गया है।
|
||||||
|
|
||||||
|
1. **रिफ्लेक्टर**। निम्नलिखित कथन के साथ अपना कोड बदलें।
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
let myVariable = 123;
|
||||||
|
```
|
||||||
|
|
||||||
|
उपरोक्त को _explicit initialization_ कहा जाता है जब एक चर घोषित किया जाता है और एक ही समय में एक मान निर्दिष्ट किया जाता है।
|
||||||
|
|
||||||
|
1. **Change the variable value**. Change the variable value in the following way:
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
myVariable = 321;
|
||||||
|
```
|
||||||
|
|
||||||
|
एक बार एक वेरिएबल्स घोषित होने के बाद, आप अपने कोड के किसी भी बिंदु पर इसके मूल्य को `=` ऑपरेटर और नए मूल्य के साथ बदल सकते हैं।
|
||||||
|
|
||||||
|
✅ कोशिश करो! आप अपने ब्राउज़र में जावास्क्रिप्ट सही लिख सकते हैं। ब्राउज़र विंडो खोलें और डेवलपर टूल पर नेविगेट करें. कंसोल में, आपको एक संकेत मिलेगा; टाइप करें `myVariable = 123`, फिर वापसी दबाएँ, फिर` myVariable` टाइप करें। क्या होता है? ध्यान दें, आप बाद के पाठों में इन अवधारणाओं के बारे में अधिक जानेंगे।
|
||||||
|
|
||||||
|
## कोन्सटांत्स
|
||||||
|
|
||||||
|
एक निरंतरता की घोषणा और आरंभीकरण वैसा ही होता है जैसा कि वैरिएबल के रूप में, कॉन्स्टैल्स के अपवाद के साथ होता है। स्थिरांक आमतौर पर सभी बड़े अक्षरों के साथ घोषित किए जाते हैं।
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
const MY_VARIABLE = 123;
|
||||||
|
```
|
||||||
|
|
||||||
|
कांस्टेंट दो अपवादों के साथ, वेरिएबल समान हैं:
|
||||||
|
|
||||||
|
- **मान होना चाहिए**। कांस्टेंट को प्रारंभ किया जाना चाहिए, या कोड चलाते समय कोई त्रुटि होगी।
|
||||||
|
- **संदर्भ नहीं बदला जा सकता है**. एक कांस्टेंट के संदर्भ को एक बार प्रारंभ करने के बाद नहीं बदला जा सकता है, या कोड चलाते समय एक त्रुटि उत्पन्न होगी। आइए दो उदाहरण देखें:
|
||||||
|
- **साधारण मूल्य**. निम्नलिखित की अनुमति नहीं है:
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
const PI = 3;
|
||||||
|
PI = 4; // not allowed
|
||||||
|
```
|
||||||
|
|
||||||
|
- **ऑब्जेक्ट संदर्भ संरक्षित है**.निम्नलिखित की अनुमति नहीं है।
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
const obj = { a: 3 };
|
||||||
|
obj = { b: 5 } // not allowed
|
||||||
|
```
|
||||||
|
|
||||||
|
- **ऑब्जेक्ट संदर्भ संरक्षित नहीं है**. निम्नलिखित की अनुमति है:
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
const obj = { a: 3 };
|
||||||
|
obj.a = 5; // allowed
|
||||||
|
```
|
||||||
|
|
||||||
|
ऊपर आप ऑब्जेक्ट के मूल्य को बदल रहे हैं, लेकिन स्वयं संदर्भ को नहीं, जो इसे अनुमति देता है।
|
||||||
|
|
||||||
|
> ध्यान दें, एक 'const' का अर्थ है कि संदर्भ को पुन: असाइनमेंट से सुरक्षित किया गया है। मान __अडिग__ नहीं है, हालांकि और बदल सकता है, खासकर अगर यह एक ऑब्जेक्ट की तरह एक जटिल निर्माण है।
|
||||||
|
|
||||||
|
## डाटा प्रकार
|
||||||
|
|
||||||
|
वेरिएबल्स कई अलग-अलग प्रकार के मानों को संग्रहीत कर सकती हैं, जैसे संख्याएं और पाठ। इन विभिन्न प्रकार के मूल्यों को **डेटा प्रकार** के रूप में जाना जाता है। डेटा प्रकार सॉफ्टवेयर विकास का एक महत्वपूर्ण हिस्सा है क्योंकि यह डेवलपर्स को निर्णय लेने में मदद करता है कि कोड को कैसे लिखा जाना चाहिए और सॉफ्टवेयर को कैसे चलाना चाहिए। इसके अलावा, कुछ डेटा प्रकारों में विशिष्ट विशेषताएं होती हैं जो मूल्य में अतिरिक्त जानकारी को बदलने या निकालने में मदद करती हैं।
|
||||||
|
|
||||||
|
✅ डेटा प्रकारों को जावास्क्रिप्ट डेटा प्राइमेटिव के रूप में भी जाना जाता है, क्योंकि वे भाषा द्वारा प्रदान किए जाने वाले निम्नतम-स्तरीय डेटा प्रकार हैं। 6 आदिम डेटा प्रकार हैं: स्ट्रिंग, संख्या, बिगिन्ट, बूलियन, अपरिभाषित और प्रतीक। यह देखने के लिए एक मिनट लें कि इनमें से प्रत्येक आदिम क्या प्रतिनिधित्व कर सकता है। एक `ज़ेबरा` क्या है? `0` ? `true`?
|
||||||
|
|
||||||
|
### नंबर्स
|
||||||
|
|
||||||
|
पिछले खंड में, `myVariable` का मान एक संख्या डेटा प्रकार था।
|
||||||
|
|
||||||
|
`let myVariable = 123;`
|
||||||
|
|
||||||
|
चर सभी प्रकार की संख्याओं को संग्रहीत कर सकते हैं, जिसमें दशमलव या नकारात्मक संख्याएं शामिल हैं। संख्याओं का उपयोग अंकगणितीय संचालकों के साथ भी किया जा सकता है, जिन्हें [अगले भाग](#operators) में शामिल किया गया है।
|
||||||
|
|
||||||
|
### अंकगणितीय आपरेटर
|
||||||
|
|
||||||
|
अंकगणितीय कार्यों को करते समय कई प्रकार के ऑपरेटरों का उपयोग करना होता है, और कुछ यहां सूचीबद्ध हैं:
|
||||||
|
|
||||||
|
| प्रतीक | विवरण | उदाहरण |
|
||||||
|
| ------ | ------------------------------------------------------------------------ | -------------------------------- |
|
||||||
|
| `+` | **जोड़**: दो संख्याओं के योग की गणना करता है | `1 + 2 //अपेक्षित उत्तर 3 है` |
|
||||||
|
| `-` | **Subtraction**: दो संख्याओं के अंतर की गणना करता है | `1 - 2 //अपेक्षित उत्तर -1 है` |
|
||||||
|
| `*` | **गुणा**: दो नंबरों के उत्पाद की गणना करता है | `1 * 2 //अपेक्षित उत्तर 2 है` |
|
||||||
|
| `/` | **विभाजन**: दो संख्याओं के भागफल की गणना करता है | `1 / 2 //अपेक्षित उत्तर 0. है` |
|
||||||
|
| `%` | **शेष**: दो संख्याओं के विभाजन से शेष की गणना करता है | `1 % 2 //expected answer is 1` |
|
||||||
|
|
||||||
|
✅ कोशिश करो! अपने ब्राउज़र के कंसोल में एक अंकगणितीय ऑपरेशन आज़माएँ। क्या परिणाम आपको आश्चर्यचकित करते हैं?
|
||||||
|
|
||||||
|
### Strings
|
||||||
|
|
||||||
|
स्ट्रिंग्स ऐसे पात्रों के समूह हैं जो एकल या दोहरे उद्धरणों के बीच रहते हैं।
|
||||||
|
|
||||||
|
- `'This is a string'`
|
||||||
|
- `"This is also a string"`
|
||||||
|
- `let myString = 'This is a string value stored in a variable';`
|
||||||
|
|
||||||
|
एक स्ट्रिंग लिखते समय उद्धरणों का उपयोग करना याद रखें, अन्यथा जावास्क्रिप्ट यह मान लेगा कि यह एक वेरीअबल नाम है।
|
||||||
|
|
||||||
|
### स्वरूपण स्ट्रिंग्स
|
||||||
|
|
||||||
|
स्ट्रिंग्स पाठात्मक हैं, और समय-समय पर प्रारूपण की आवश्यकता होगी।
|
||||||
|
|
||||||
|
दो या अधिक स्ट्रिंग्स को मिलाएं या उन्हें **एक साथ जोड़ने** के लिए, '+' ऑपरेटर का उपयोग करें।
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
let myString1 = "Hello";
|
||||||
|
let myString2 = "World";
|
||||||
|
|
||||||
|
myString1 + myString2 + "!"; //HelloWorld!
|
||||||
|
myString1 + " " + myString2 + "!"; //Hello World!
|
||||||
|
myString1 + ", " + myString2 + "!"; //Hello, World!
|
||||||
|
|
||||||
|
```
|
||||||
|
|
||||||
|
✅ जावास्क्रिप्ट में `1 + 1 = 2` क्यों करता है, लेकिन` '1' + '1' = 11? `इसके बारे में सोचो। `'1' + 1` के बारे में क्या?
|
||||||
|
|
||||||
|
**टेम्पलेट लिटेरल्स** स्ट्रिंग्स को फॉर्मेट करने का एक और तरीका है, उद्धरणों के बजाय, बैकटिक का उपयोग किया जाता है। जो कुछ भी सादा पाठ नहीं है, उसे प्लेसहोल्डर्स `$ {}` के अंदर रखा जाना चाहिए। इसमें कोई भी चर शामिल है जो तार हो सकते हैं।
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
let myString1 = "Hello";
|
||||||
|
let myString2 = "World";
|
||||||
|
|
||||||
|
`${myString1} ${myString2}!` //Hello World!
|
||||||
|
`${myString1}, ${myString2}!` //Hello, World!
|
||||||
|
```
|
||||||
|
|
||||||
|
आप या तो विधि के साथ अपने स्वरूपण लक्ष्यों को प्राप्त कर सकते हैं, लेकिन टेम्पलेट शाब्दिक किसी भी स्थान और लाइन ब्रेक का सम्मान करेंगे।
|
||||||
|
|
||||||
|
✅ आप टेम्प्लेट शाब्दिक लिटेरल्स सादे स्ट्रिंग का उपयोग कब करेंगे?
|
||||||
|
|
||||||
|
### बुलैंस
|
||||||
|
|
||||||
|
बूलियन केवल दो मूल्य हो सकते हैं: `true` या `false`। बूलियंस निर्णय लेने में मदद कर सकते हैं कि किन शर्तों को पूरा करने पर कोड की लाइनें चलनी चाहिए। कई मामलों में, [ऑपरेटर](#operators) एक बूलियन का मूल्य निर्धारित करने में सहायता करते हैं और आप अक्सर वैरिएबल या उनके मूल्यों को एक ऑपरेटर के साथ अपडेट किए जाने पर ध्यान देंगे और लिखेंगे।
|
||||||
|
|
||||||
|
- `let myTrueBool = true`
|
||||||
|
- `let myFalseBool = false`
|
||||||
|
|
||||||
|
✅ एक चर को 'सत्य' माना जा सकता है यदि यह एक बूलियन `true` का मूल्यांकन करता है। दिलचस्प रूप से, जावास्क्रिप्ट में, [सभी मूल्य सत्य हैं जब तक कि मिथ्या के रूप में परिभाषित नहीं किया जाता](https://developer.mozilla.org/en-US/docs/Glossary/Truthy)
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 🚀 चुनौती
|
||||||
|
|
||||||
|
जावास्क्रिप्ट मौके पर डेटाटिप्स को संभालने के अपने आश्चर्यजनक तरीकों के लिए कुख्यात है।इन 'gotchas' पर थोड़ा शोध करें। For example: case sensitivity can bite! इसे अपने कंसोल में आज़माएँ: `let age = 1; let Age = 2; age == Age` (`false` हल करता है - क्यों?). आपको अन्य क्या मिल सकते हैं?
|
||||||
|
|
||||||
|
## व्याख्यान उपरांत प्रश्नोत्तरी
|
||||||
|
[व्याख्यान उपरांत प्रश्नोत्तरी](https://nice-beach-0fe9e9d0f.azurestaticapps.net/quiz/8?loc=hi)
|
||||||
|
|
||||||
|
## समीक्षा और स्व अध्ययन
|
||||||
|
|
||||||
|
[जावास्क्रिप्ट अभ्यासों की यह सूची](https://css-tricks.com/snippets/javascript/) पर एक नज़र डालें और एक कोशिश करें। आपने क्या सीखा?
|
||||||
|
|
||||||
|
## असाइनमेंट
|
||||||
|
|
||||||
|
[डेटा प्रकार अभ्यास](assignment.hi.md)
|
||||||
@ -1,12 +0,0 @@
|
|||||||
_प्रति प्रश्न एक उत्तर की जाँच करके इस प्रश्नोत्तरी को पूरा करें._
|
|
||||||
|
|
||||||
1. किसी फ़ंक्शन में सभी मापदंडों के लिए तर्क प्रदान किए जाने चाहिए
|
|
||||||
|
|
||||||
- [ ] सही
|
|
||||||
- [ ] गलत
|
|
||||||
|
|
||||||
2. एक डिफ़ॉल्ट मान क्या करता है?
|
|
||||||
|
|
||||||
- [ ] एक सही मूल्य निर्धारित करता है
|
|
||||||
- [ ] एक पैरामीटर के लिए एक स्टार्टर मूल्य देता है ताकि आपका कोड अभी भी व्यवहार करता है यदि आप इसके लिए एक तर्क छोड़ देते हैं
|
|
||||||
- [ ] कोई उपयोगिता नहीं है
|
|
||||||
@ -1,12 +0,0 @@
|
|||||||
_इस क्विज को कक्षा में पूरा करें_
|
|
||||||
|
|
||||||
1. तर्क क्या है?
|
|
||||||
|
|
||||||
- [ ] यह कुछ है जिसे आप फ़ंक्शन परिभाषा में घोषित करते हैं
|
|
||||||
- [ ] यह ऐसा कुछ है जिसे आप एक समारोह में भेजते हैं
|
|
||||||
- [ ] यह कुछ ऐसा है जो आप उन लोगों के साथ हैं जिन्हें आप जानते हैं
|
|
||||||
|
|
||||||
2. सही या गलत: एक फ़ंक्शन को कुछ वापस करना होगा
|
|
||||||
|
|
||||||
- [ ] सही
|
|
||||||
- [ ] गलत
|
|
||||||
@ -0,0 +1,195 @@
|
|||||||
|
# जावास्क्रिप्ट मूल बातें: तरीके और कार्य
|
||||||
|
|
||||||
|
|
||||||
|
> [टोमोमी इमुरा](https://twitter.com/girlie_mac) द्वारा स्केचनेट
|
||||||
|
|
||||||
|
## पूर्व व्याख्यान प्रश्नोत्तरी
|
||||||
|
[पूर्व व्याख्यान प्रश्नोत्तरी](https://nice-beach-0fe9e9d0f.azurestaticapps.net/quiz/9?loc=hi)
|
||||||
|
|
||||||
|
जब हम कोड लिखने के बारे में सोचते हैं, तो हम हमेशा यह सुनिश्चित करना चाहते हैं कि हमारा कोड पढ़ने योग्य हो। हालांकि यह काउंटरटाइनेटिव लगता है, लेकिन कोड को लिखे जाने की तुलना में कई गुना अधिक पढ़ा जाता है। एक डेवलपर टूलबॉक्स में एक कोर टूल, जिसमें यह सुनिश्चित करने के लिए कि कोड योग्य है **फ़ंक्शन** है।
|
||||||
|
|
||||||
|
[](https://youtube.com/watch?v=XgKsD6Zwvlc "मेथड्स एंड फ़ंक्शंस")
|
||||||
|
|
||||||
|
> मेथड्स एंड फ़ंक्शंस के बारे में वीडियो के लिए ऊपर दी गई छवि पर क्लिक करें।
|
||||||
|
|
||||||
|
|
||||||
|
## फ़ंक्शंस
|
||||||
|
|
||||||
|
इसके मूल में, एक फ़ंक्शन कोड का एक ब्लॉक है जिसे हम मांग पर निष्पादित कर सकते हैं। यह उन परिदृश्यों के लिए एकदम सही है जहाँ हमें एक ही कार्य को कई बार करने की आवश्यकता होती है; कई स्थानों पर तर्क की नकल करने के बजाय (जो समय आने पर इसे अपडेट करना कठिन बना देगा), हम इसे एक स्थान पर केंद्रीकृत कर सकते हैं, और जब भी हमें ऑपरेशन की आवश्यकता हो, तब कॉल कर सकते हैं - आप अन्य कार्यों से भी कॉल कर सकते हैं!
|
||||||
|
|
||||||
|
बस के रूप में महत्वपूर्ण एक समारोह का नाम करने की क्षमता है। हालांकि यह तुच्छ प्रतीत हो सकता है, लेकिन नाम कोड के एक सेक्शन का दस्तावेजीकरण करने का एक त्वरित तरीका प्रदान करता है। आप इसे एक बटन पर एक लेबल के रूप में सोच सकते हैं। अगर मैं एक बटन पर क्लिक करता हूं जिसमें लिखा है "टाइमर को रद्द करें", मुझे पता है कि यह घड़ी को चलाने से रोकने वाला है।
|
||||||
|
|
||||||
|
## फंक्शन बनाना और कॉल करना
|
||||||
|
|
||||||
|
किसी फ़ंक्शन का सिंटैक्स निम्न जैसा दिखता है:
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
function nameOfFunction() { // function definition
|
||||||
|
// function definition/body
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
अगर मैं ग्रीटिंग प्रदर्शित करने के लिए कोई फ़ंक्शन बनाना चाहता हूं, तो यह इस तरह दिख सकता है:
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
function displayGreeting() {
|
||||||
|
console.log('Hello, world!');
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
जब भी हम अपने फ़ंक्शन को कॉल करना (या इनवोक करना) चाहते हैं, हम `()` के बाद फ़ंक्शन के नाम का उपयोग करते हैं। यह ध्यान देने योग्य है कि हमारे फ़ंक्शन को कॉल करने का निर्णय लेने से पहले या बाद में परिभाषित किया जा सकता है; जावास्क्रिप्ट कंपाइलर इसे आपके लिए खोजेगा।
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
// calling our function
|
||||||
|
displayGreeting();
|
||||||
|
```
|
||||||
|
|
||||||
|
> **नोट:** एक विशेष प्रकार का फ़ंक्शन है जिसे **method** के रूप में जाना जाता है, जिसे आप पहले से ही उपयोग कर रहे हैं! वास्तव में, हमने इसे ऊपर अपने डेमो में देखा था जब हमने `console.log` का उपयोग किया था। किसी कार्य को किसी फ़ंक्शन से अलग करने वाली विधि एक ऑब्जेक्ट से जुड़ी होती है (हमारे उदाहरण में `console`), जबकि एक फ़ंक्शन फ्री फ़्लोटिंग है। आपने सुना होगा कई डेवलपर्स इन शब्दों का इस्तेमाल परस्पर करते हैं।
|
||||||
|
|
||||||
|
### सर्वोत्तम फ़ंक्शन प्रथाएं
|
||||||
|
|
||||||
|
फ़ंक्शन का निर्माण करते समय ध्यान में रखने के लिए सर्वोत्तम अभ्यास हैं
|
||||||
|
|
||||||
|
- हमेशा की तरह, वर्णनात्मक नामों का उपयोग करें ताकि आप जान सकें कि फ़ंक्शन क्या करेगा
|
||||||
|
- शब्दों को संयोजित करने के लिए **camelCasing** का उपयोग करें
|
||||||
|
- अपने कार्यों को किसी विशिष्ट कार्य पर केंद्रित रखें
|
||||||
|
|
||||||
|
## किसी फ़ंक्शन के लिए जानकारी पास करना
|
||||||
|
|
||||||
|
किसी फ़ंक्शन को अधिक पुन: प्रयोज्य बनाने के लिए आप अक्सर उसमें जानकारी देना चाहेंगे। अगर हम ऊपर अपने `displayGreeting` उदाहरण पर विचार करते हैं, तो यह केवल **Hello,world** प्रदर्शित करेगा। सबसे उपयोगी फ़ंक्शन कोई नहीं बना सकता है। यदि हम इसे थोड़ा और लचीला बनाना चाहते हैं, जैसे किसी व्यक्ति को बधाई देने के लिए व्यक्ति का नाम निर्दिष्ट करने की अनुमति देना, हम एक **पैरामीटर** जोड़ सकते हैं। एक पैरामीटर (जिसे कभी-कभी **आर्गुमेंट** भी कहा जाता है), एक फ़ंक्शन को भेजी जाने वाली अतिरिक्त जानकारी है।
|
||||||
|
|
||||||
|
पैरामीटर को कोष्ठक के भीतर परिभाषा भाग में सूचीबद्ध किया गया है और अल्पविराम को अलग किया जाता है:
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
function name(param, param2, param3) {
|
||||||
|
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
हम एक नाम को स्वीकार करने के लिए अपने `displayGreeting` को अपडेट कर सकते हैं और उसे प्रदर्शित कर सकते हैं।
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
function displayGreeting(name) {
|
||||||
|
const message = `Hello, ${name}!`;
|
||||||
|
console.log(message);
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
जब हम अपने फ़ंक्शन को कॉल करना चाहते हैं और पैरामीटर में पास करते हैं, तो हम इसे कोष्ठक में निर्दिष्ट करते हैं।
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
displayGreeting('Christopher');
|
||||||
|
// displays "Hello, Christopher!" when run
|
||||||
|
```
|
||||||
|
|
||||||
|
## डिफॉल्ट मान
|
||||||
|
|
||||||
|
हम अधिक मापदंडों को जोड़कर अपने कार्य को और अधिक लचीला बना सकते हैं। लेकिन क्या होगा अगर हम हर मूल्य को निर्दिष्ट करने की आवश्यकता नहीं चाहते हैं? अपने ग्रीटिंग उदाहरण के साथ रखते हुए, हम आवश्यकता के अनुसार नाम छोड़ सकते हैं (हमें यह जानना होगा कि हम किसका अभिवादन कर रहे हैं), लेकिन हम चाहते हैं कि ग्रीटिंग को वांछित रूप में अनुकूलित किया जाए। यदि कोई इसे अनुकूलित नहीं करना चाहता है, तो हम इसके बजाय एक डिफ़ॉल्ट मान प्रदान करते हैं। एक पैरामीटर को एक डिफ़ॉल्ट मान प्रदान करने के लिए, हम इसे उसी तरह से सेट करते हैं जिस तरह से हम एक चर के लिए मान सेट करते हैं - `parameterName = 'defaultValue'`। एक पूर्ण उदाहरण देखने के लिए:
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
function displayGreeting(name, salutation='Hello') {
|
||||||
|
console.log(`${salutation}, ${name}`);
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
जब हम फ़ंक्शन को कॉल करते हैं, तो हम यह तय कर सकते हैं कि क्या हम `सैल्यूटेशन` के लिए कोई मूल्य निर्धारित करना चाहते हैं।
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
displayGreeting('Christopher');
|
||||||
|
// displays "Hello, Christopher"
|
||||||
|
|
||||||
|
displayGreeting('Christopher', 'Hi');
|
||||||
|
// displays "Hi, Christopher"
|
||||||
|
```
|
||||||
|
|
||||||
|
## मान लौटाएं
|
||||||
|
|
||||||
|
अब तक हमने जो फ़ंक्शन बनाया है वह हमेशा [कंसोल](https://developer.mozilla.org/en-US/docs/Web/API/console) पर आउटपुट करेगा। कभी-कभी यह ठीक वही हो सकता है जिसकी हम तलाश कर रहे हैं, खासकर जब हम फ़ंक्शन बनाते हैं जो अन्य सेवाओं को कॉल करेगा। लेकिन क्या होगा अगर मैं गणना करने और मान प्रदान करने के लिए एक सहायक फ़ंक्शन बनाना चाहता हूं तो मैं इसे कहीं और उपयोग कर सकता हूं?
|
||||||
|
|
||||||
|
हम **रिटर्न वैल्यू** का उपयोग करके ऐसा कर सकते हैं। एक वापसी मान फ़ंक्शन द्वारा लौटाया जाता है, और इसे एक चर में संग्रहीत किया जा सकता है, जैसे कि हम एक स्ट्रिंग या संख्या जैसे शाब्दिक मूल्य को संग्रहीत कर सकते हैं।
|
||||||
|
|
||||||
|
यदि कोई फ़ंक्शन कुछ वापस करता है तो कीवर्ड `return` का उपयोग किया जाता है। `return` कीवर्ड को इस तरह से लौटाए जाने के मूल्य या संदर्भ की उम्मीद है:
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
return myVariable;
|
||||||
|
```
|
||||||
|
|
||||||
|
हम एक बधाई संदेश बनाने के लिए एक फ़ंक्शन बना सकते हैं और कॉलर को वापस मान दे सकते हैं
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
function createGreetingMessage(name) {
|
||||||
|
const message = `Hello, ${name}`;
|
||||||
|
return message;
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
इस फ़ंक्शन को कॉल करते समय हम एक वैरिएबल में मान संग्रहीत करेंगे। यह उसी तरह है जैसे हम एक वैरिएबल को स्थिर मान (जैसे `const name ='Christopher'`) में सेट करते हैं।
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
const greetingMessage = createGreetingMessage('Christopher');
|
||||||
|
```
|
||||||
|
|
||||||
|
## फंक्शन्स के लिए पैरामीटर के रूप में कार्य
|
||||||
|
|
||||||
|
जैसे ही आप अपने प्रोग्रामिंग करियर में आगे बढ़ते हैं, आप ऐसे फंक्शन में आएंगे, जो फंक्शन्स को पैरामीटर के रूप में स्वीकार करते हैं। इस साफ-सुथरी चाल का इस्तेमाल आमतौर पर तब किया जाता है जब हम नहीं जानते कि कब कुछ होने वाला है या पूरा हो रहा है, लेकिन हम जानते हैं कि हमें प्रतिक्रिया में एक ऑपरेशन करने की जरूरत है।
|
||||||
|
|
||||||
|
एक उदाहरण के रूप में, [setTimeout](https://developer.mozilla.org/en-US/docs/Web/API/WindowOrWorkerGlobalScope/setTimeout) पर विचार करें, जो एक टाइमर शुरू करता है और पूरा होने पर कोड निष्पादित करेगा। हमें यह बताना होगा कि हम किस कोड को निष्पादित करना चाहते हैं। एक समारोह के लिए एक सही काम की तरह लगता है!
|
||||||
|
|
||||||
|
यदि आप नीचे दिए गए कोड को चलाते हैं, तो 3 सेकंड के बाद आपको संदेश दिखाई देगा **3 सेकंड में** समाप्त हो गया है।
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
function displayDone() {
|
||||||
|
console.log('3 seconds has elapsed');
|
||||||
|
}
|
||||||
|
// timer value is in milliseconds
|
||||||
|
setTimeout(displayDone, 3000);
|
||||||
|
```
|
||||||
|
|
||||||
|
### अनाम फंक्शन्स
|
||||||
|
|
||||||
|
आइए एक और नज़र डालें कि हमने क्या बनाया है। हम एक नाम के साथ एक फ़ंक्शन बना रहे हैं जिसका उपयोग एक बार किया जाएगा। जैसे-जैसे हमारा आवेदन अधिक जटिल होता जाता है, हम स्वयं को बहुत सारे कार्य बनाते हुए देख सकते हैं, जिसे केवल एक बार ही कहा जाएगा। यह आदर्श नहीं है। जैसा कि यह पता चला है, हमें हमेशा एक नाम प्रदान करने की आवश्यकता नहीं है!
|
||||||
|
|
||||||
|
जब हम एक फ़ंक्शन को एक पैरामीटर के रूप में पारित कर रहे हैं, तो हम पहले से एक बनाने के लिए बाईपास कर सकते हैं और इसके बजाय एक पैरामीटर के हिस्से के रूप में निर्माण कर सकते हैं। हम उसी `function` कीवर्ड का उपयोग करते हैं, लेकिन इसके बजाय हम इसे एक पैरामीटर के रूप में बनाते हैं।
|
||||||
|
|
||||||
|
अनाम फ़ंक्शन का उपयोग करने के लिए ऊपर दिए गए कोड को फिर से लिखें:
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
setTimeout(function() {
|
||||||
|
console.log('3 seconds has elapsed');
|
||||||
|
}, 3000);
|
||||||
|
```
|
||||||
|
|
||||||
|
यदि आप हमारा नया कोड चलाते हैं, तो आपको वही परिणाम मिलेंगे। हमने एक फ़ंक्शन बनाया है, लेकिन इसे कोई नाम नहीं देना है!
|
||||||
|
|
||||||
|
### फैट एरो फंक्शन्स
|
||||||
|
|
||||||
|
बहुत सारी प्रोग्रामिंग भाषाओं में एक शॉर्टकट (जावास्क्रिप्ट सहित) एक का उपयोग करने की क्षमता है जिसे **एरो** या **फैट एरो** फ़ंक्शन कहा जाता है। यह `=>` के एक विशेष संकेतक का उपयोग करता है, जो एक तीर की तरह दिखता है - इस प्रकार नाम! `=>` का उपयोग करके, हम `function` कीवर्ड को छोड़ सकते हैं।
|
||||||
|
|
||||||
|
चलो एक फैट एरो फंक्शन्स का उपयोग करने के लिए हमारे कोड को एक बार फिर से लिखें:
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
setTimeout(() => {
|
||||||
|
console.log('3 seconds has elapsed');
|
||||||
|
}, 3000);
|
||||||
|
```
|
||||||
|
|
||||||
|
### प्रत्येक रणनीति का उपयोग कब करें
|
||||||
|
|
||||||
|
अब आपने देखा है कि हमारे पास फंक्शन को एक पैरामीटर के रूप में पास करने के तीन तरीके हैं और प्रत्येक का उपयोग करते समय सोच सकते हैं। यदि आप जानते हैं कि आप एक से अधिक बार फ़ंक्शन का उपयोग कर रहे हैं, तो इसे सामान्य रूप से बनाएं। यदि आप इसे केवल एक स्थान के लिए उपयोग कर रहे हैं, तो यह आमतौर पर एक अनाम फ़ंक्शन का उपयोग करने के लिए सबसे अच्छा है।आप फैट एरो फंक्शन्स या अधिक पारंपरिक `फ़ंक्शन` सिंटैक्स का उपयोग करते हैं या नहीं, आप पर निर्भर है, लेकिन आप देखेंगे कि अधिकांश आधुनिक डेवलपर्स` => `पसंद करते हैं।
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 🚀 चुनौती
|
||||||
|
|
||||||
|
क्या आप एक वाक्य में कार्यों और विधियों के बीच के अंतर को स्पष्ट कर सकते हैं? कोशिश तो करो!
|
||||||
|
|
||||||
|
## व्याख्यान उपरांत प्रश्नोत्तरी
|
||||||
|
[पूर्व व्याख्यान प्रश्नोत्तरी](https://nice-beach-0fe9e9d0f.azurestaticapps.net/quiz/10?loc=hi)
|
||||||
|
|
||||||
|
## समीक्षा और स्व अध्ययन
|
||||||
|
|
||||||
|
यह लायक है [एरो फ़ंक्शंस पर थोड़ा और पढ़ना](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions), क्योंकि वे कोड बेस में उपयोग किए जा रहे हैं। एक फ़ंक्शन लिखने का अभ्यास करें, और फिर इस सिंटैक्स के साथ इसे फिर से लिखना।
|
||||||
|
|
||||||
|
## असाइनमेंट
|
||||||
|
|
||||||
|
[फन विथ फंशन्स ](assignment.hi.md)
|
||||||
@ -0,0 +1,174 @@
|
|||||||
|
# जावास्क्रिप्ट मूल बातें - निर्णय लेना
|
||||||
|
|
||||||
|
|
||||||
|
> [टोमोमी इमुरा](https://twitter.com/girlie_mac) द्वारा स्केचनेट
|
||||||
|
|
||||||
|
## पूर्व व्याख्यान प्रश्नोत्तरी
|
||||||
|
[पूर्व व्याख्यान प्रश्नोत्तरी](https://nice-beach-0fe9e9d0f.azurestaticapps.net/quiz/11?loc=hi)
|
||||||
|
|
||||||
|
निर्णय लेना और उस आदेश को नियंत्रित करना जिसमें आपका कोड चलता है, आपके कोड को पुन: प्रयोज्य और मजबूत बनाता है। यह खंड बूलियन डेटा प्रकारों के साथ उपयोग किए जाने पर जावास्क्रिप्ट में डेटा प्रवाह को नियंत्रित करने और इसके महत्व के लिए सिंटैक्स को कवर करता है
|
||||||
|
|
||||||
|
[](https://youtube.com/watch?v=SxTp8j-fMMY "निर्णय लेना")
|
||||||
|
|
||||||
|
> निर्णय लेने के बारे में वीडियो के लिए ऊपर दी गई छवि पर क्लिक करें।
|
||||||
|
## बूलियन्स पर एक संक्षिप्त पुनरावृत्ति
|
||||||
|
|
||||||
|
बूलियन केवल दो मूल्य हो सकते हैं: `true` या `false`। बूलियंस निर्णय लेने में मदद करते हैं कि किन शर्तों को पूरा करने पर कोड की लाइनें चलनी चाहिए।
|
||||||
|
|
||||||
|
इस तरह से सही या गलत होने के लिए अपना बूलियन सेट करें:
|
||||||
|
|
||||||
|
`let myTrueBool = true`
|
||||||
|
`let myFalseBool = false`
|
||||||
|
|
||||||
|
✅ बुलियन का नाम अंग्रेजी गणितज्ञ, दार्शनिक और तर्कशास्त्री जॉर्ज बोले (1815-1864) के नाम पर रखा गया है।
|
||||||
|
|
||||||
|
## तुलना ऑपरेटर और बूलियन
|
||||||
|
|
||||||
|
ऑपरेटर्स का उपयोग उन परिस्थितियों के मूल्यांकन के लिए किया जाता है जो एक बूलियन मूल्य बनाएंगे। निम्नलिखित ऑपरेटरों की एक सूची है जो अक्सर उपयोग की जाती हैं।
|
||||||
|
|
||||||
|
| प्रतीक | विवरण | उदाहरण |
|
||||||
|
| ------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------ |
|
||||||
|
| `<` | **से कम**: दो मानों की तुलना करता है और `true` बूलियन डेटा प्रकार लौटाता है यदि बाईं ओर का मान दाईं ओर से कम है | `5 < 6 // true` |
|
||||||
|
| `<=` | ** से कम या इसके बराबर**: दो मानों की तुलना करता है और `true` बूलियन डेटा प्रकार लौटाता है यदि बाईं ओर का मान दाईं ओर से कम या बराबर है | `5 <= 6 // true` |
|
||||||
|
| `>` | **से अधिक**: दो मानों की तुलना करता है और `true` बूलियन डेटा प्रकार लौटाता है यदि बाईं ओर का मान दाईं ओर से बड़ा है | `5 > 6 // false` |
|
||||||
|
| `>=` | **से अधिक या बराबर**: दो मानों की तुलना करता है और `true` बूलियन डेटा प्रकार देता है यदि बाईं ओर का मान righ से बड़ा या बराबर हैt | `5 >= 6 // false` |
|
||||||
|
| `===` | **सख्त समानता**: दो मूल्यों की तुलना करता है और `true` बूलियन डेटा प्रकार लौटाता है यदि दाएं और बाएं के मान समान हैं और समान डेटा प्रकार हैं। | `5 === 6 // false` |
|
||||||
|
| `!==` | **असमानता**: दो मूल्यों की तुलना करता है और एक सख्त समानता ऑपरेटर वापस आने के विपरीत बूलियन मूल्य लौटाता है | `5 !== 6 // true` |
|
||||||
|
|
||||||
|
✅ अपने ब्राउज़र के कंसोल में कुछ तुलनाएँ लिखकर अपने ज्ञान की जाँच करें। क्या कोई लौटा डेटा आपको आश्चर्यचकित करता है?
|
||||||
|
|
||||||
|
## ऍफ़ स्टेटमेंट
|
||||||
|
|
||||||
|
यदि ऍफ़ कथन सही है, तो स्टेटमेंट उसके ब्लॉक के बीच में कोड चलाएगा।
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
if (condition){
|
||||||
|
//Condition was true. Code in this block will run.
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
लॉजिकल ऑपरेटर्स का उपयोग अक्सर हालत बनाने के लिए किया जाता है.
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
let currentMoney;
|
||||||
|
let laptopPrice;
|
||||||
|
|
||||||
|
if (currentMoney >= laptopPrice){
|
||||||
|
//Condition was true. Code in this block will run.
|
||||||
|
console.log("Getting a new laptop!");
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
## ऍफ़..ईलस स्टेटमेंट
|
||||||
|
|
||||||
|
स्थिति के गलत होने पर `else` स्टेटमेंट उसके ब्लॉक के बीच कोड चलाएगा। यह `if` स्टेटमेंट के साथ वैकल्पिक है।
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
let currentMoney;
|
||||||
|
let laptopPrice;
|
||||||
|
|
||||||
|
if (currentMoney >= laptopPrice){
|
||||||
|
//Condition was true. Code in this block will run.
|
||||||
|
console.log("Getting a new laptop!");
|
||||||
|
}
|
||||||
|
else{
|
||||||
|
//Condition was true. Code in this block will run.
|
||||||
|
console.log("Can't afford a new laptop, yet!");
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
✅ इस कोड और निम्न कोड को ब्राउज़र कंसोल में चलाकर अपनी समझ का परीक्षण करें। CurrentMoney और laptopPrice वैरिएबल के मानों को बदलकर लौटे `console.log()` को बदलें।
|
||||||
|
|
||||||
|
## लॉजिकल ऑपरेटर्स और बुलियन
|
||||||
|
|
||||||
|
निर्णयों में एक से अधिक तुलनाओं की आवश्यकता हो सकती है, और बूलियन मूल्य का उत्पादन करने के लिए तार्किक ऑपरेटरों के साथ मिलकर संघर्ष किया जा सकता है।
|
||||||
|
|
||||||
|
| प्रतीक | विवरण | उदाहरण |
|
||||||
|
| ------ | ----------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------- |
|
||||||
|
| `&&` | **लॉजिकल एंड**: दो बूलियन अभिव्यक्तियों की तुलना करता है। सच्चा रिटर्न ** केवल ** यदि दोनों पक्ष सत्य हैं | `(5 > 6) && (5 < 6 ) //एक पक्ष झूठा है, दूसरा सच है। झूठा लौटता है` |
|
||||||
|
| `\|\|` | **लॉजिकल और**: दो बूलियन अभिव्यक्तियों की तुलना करता है। अगर कम से कम एक पक्ष सच है, तो सच है | `(5 > 6) \|\| (5 < 6) //एक पक्ष झूठा है, दूसरा सच है। सच लौटाता है` |
|
||||||
|
| `!` | **लॉजिकल नॉट**: एक बूलियन अभिव्यक्ति के विपरीत मूल्य देता है | `!(5 > 6) // 5 6 से अधिक नहीं है, लेकिन "!" सच लौटेगा` |
|
||||||
|
|
||||||
|
## तार्किक संचालकों के साथ स्थितियां और निर्णय
|
||||||
|
|
||||||
|
तार्किक संचालकों का उपयोग ऍफ़..ईलस स्टेटमेंट में स्थितियाँ बनाने के लिए किया जा सकता है।
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
let currentMoney;
|
||||||
|
let laptopPrice;
|
||||||
|
let laptopDiscountPrice = laptopPrice - (laptopPrice * .20) //Laptop price at 20 percent off
|
||||||
|
|
||||||
|
if (currentMoney >= laptopPrice || currentMoney >= laptopDiscountPrice){
|
||||||
|
//Condition was true. Code in this block will run.
|
||||||
|
console.log("Getting a new laptop!");
|
||||||
|
}
|
||||||
|
else {
|
||||||
|
//Condition was true. Code in this block will run.
|
||||||
|
console.log("Can't afford a new laptop, yet!");
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
### नेगटिव ऑपरेटर
|
||||||
|
|
||||||
|
आपने अभी तक देखा है कि अगर आप सशर्त तर्क बनाने के लिए `if...else` स्टेटमेंट का उपयोग कैसे कर सकते हैं। कुछ भी जो `if` में जाता है, उसे सही/गलत का मूल्यांकन करने की आवश्यकता होती है। '!' ऑपरेटर का उपयोग करके आप अभिव्यक्ति को _निगेट_ कर सकते हैं। ऐसा लगेगा:
|
||||||
|
```javascript
|
||||||
|
if (!condition) {
|
||||||
|
// runs if condition is false
|
||||||
|
} else {
|
||||||
|
// runs if condition is true
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
### टेरनरी एक्सप्रेशंस
|
||||||
|
|
||||||
|
`if...else` निर्णय तर्क व्यक्त करने का एकमात्र तरीका नहीं है। आप टर्नरी ऑपरेटर नामक किसी चीज़ का उपयोग भी कर सकते हैं। इसके लिए सिंटैक्स इस तरह दिखता है:
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
let variable = condition ? <return this if true> : <return this if false>
|
||||||
|
```
|
||||||
|
|
||||||
|
नीचे एक और मूर्त उदाहरण दिया गया है:
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
let firstNumber = 20;
|
||||||
|
let secondNumber = 10
|
||||||
|
let biggestNumber = firstNumber > secondNumber ? firstNumber: secondNumber;
|
||||||
|
```
|
||||||
|
|
||||||
|
✅ इस कोड को कुछ समय पढ़ने के लिए एक मिनट लें। क्या आप समझते हैं कि ये ऑपरेटर कैसे काम कर रहे हैं?
|
||||||
|
|
||||||
|
उपरोक्त कहा गया है कि
|
||||||
|
- यदि `firstNumber` `secondNumber` से बड़ा है
|
||||||
|
- इसके बाद `firstNumber` को `biggestNumber` को असाइन करें
|
||||||
|
- वरना `secondNumber` असाइन करें।
|
||||||
|
|
||||||
|
टर्नरी एक्सप्रेशन नीचे दिए गए कोड को लिखने का एक कॉम्पैक्ट तरीका है:
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
let biggestNumber;
|
||||||
|
if (firstNumber > secondNumber) {
|
||||||
|
biggestNumber = firstNumber;
|
||||||
|
} else {
|
||||||
|
biggestNumber = secondNumber;
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 🚀 चुनौती
|
||||||
|
|
||||||
|
एक प्रोग्राम बनाएं, जो पहले तार्किक ऑपरेटरों के साथ लिखा गया हो, और फिर इसे एक टर्नरी अभिव्यक्ति का उपयोग करके फिर से लिखना। आपका पसंदीदा सिंटेक्स क्या है?
|
||||||
|
|
||||||
|
---
|
||||||
|
## व्याख्यान उपरांत प्रश्नोत्तरी
|
||||||
|
[व्याख्यान उपरांत प्रश्नोत्तरी](https://nice-beach-0fe9e9d0f.azurestaticapps.net/quiz/12?loc=hi)
|
||||||
|
|
||||||
|
## समीक्षा और स्व अध्ययन
|
||||||
|
|
||||||
|
उपयोगकर्ता के लिए उपलब्ध कई ऑपरेटरों के बारे में और अधिक पढ़ें [MDN पर](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Operators)
|
||||||
|
|
||||||
|
जोश कोमू के अद्भुत [ऑपरेटर लुकअप](https://joshwcomeau.com/operator-lookup/) पर जाएं!
|
||||||
|
|
||||||
|
## असाइनमेंट
|
||||||
|
|
||||||
|
[ऑपरेटर्स](assignment.hi.md)
|
||||||
@ -0,0 +1,125 @@
|
|||||||
|
# जावास्क्रिप्ट मूल बातें: ऐरे और लूप्स
|
||||||
|
|
||||||
|
|
||||||
|
> [टोमोमी इमुरा](https://twitter.com/girlie_mac) द्वारा स्केचनेट
|
||||||
|
|
||||||
|
## पूर्व व्याख्यान प्रश्नोत्तरी
|
||||||
|
[पूर्व व्याख्यान प्रश्नोत्तरी](https://nice-beach-0fe9e9d0f.azurestaticapps.net/quiz/13?loc=hi)
|
||||||
|
|
||||||
|
इस पाठ में जावास्क्रिप्ट की मूल बातें शामिल हैं, वह भाषा जो वेब पर अन्तरक्रियाशीलता प्रदान करती है। इस पाठ में, आप ऐरे और लूप्स के बारे में जानेंगे, जिनका उपयोग डेटा में हेरफेर करने के लिए किया जाता है।
|
||||||
|
|
||||||
|
[](https://youtube.com/watch?v=Q_CRM2lXXBg "ऐरे और लूप्स")
|
||||||
|
|
||||||
|
> ऐरे और लूप्स के बारे में वीडियो के लिए ऊपर दी गई छवि पर क्लिक करें।
|
||||||
|
## एरेस
|
||||||
|
|
||||||
|
डेटा के साथ काम करना किसी भी भाषा के लिए एक सामान्य कार्य है, और यह एक बहुत आसान काम है जब डेटा को एक संरचनात्मक प्रारूप में व्यवस्थित किया जाता है, जैसे कि सरणियाँ। एरेस के साथ, डेटा को एक सूची के समान संरचना में संग्रहीत किया जाता है। सरणियों का एक प्रमुख लाभ यह है कि आप विभिन्न प्रकार के डेटा को एक सरणी में संग्रहीत कर सकते हैं।
|
||||||
|
|
||||||
|
✅ हमारे चारों तरफ ऐरे हैं! क्या आप किसी सरणी के वास्तविक जीवन के उदाहरण के बारे में सोच सकते हैं, जैसे कि सौर पैनल एरे?
|
||||||
|
|
||||||
|
एक एरे के लिए सिंटेक्स वर्ग कोष्ठक की एक जोड़ी है।
|
||||||
|
|
||||||
|
`let myArray = [];`
|
||||||
|
|
||||||
|
यह एक खाली एरे है, लेकिन एरेस को पहले से ही डेटा के साथ आबाद घोषित किया जा सकता है। एक एरे में एकाधिक मान अल्पविराम द्वारा अलग किए गए हैं।
|
||||||
|
|
||||||
|
`let iceCreamFlavors = ["Chocolate", "Strawberry", "Vanilla", "Pistachio", "Rocky Road"];`
|
||||||
|
|
||||||
|
एरे मानों को एक अद्वितीय मान दिया जाता है जिसे **सूचकांक** कहा जाता है, एक पूरी संख्या जो कि एरे की शुरुआत से इसकी दूरी के आधार पर निर्दिष्ट की जाती है। ऊपर के उदाहरण में, स्ट्रिंग मूल्य "चॉकलेट" में 0 का सूचकांक है, और "रॉकी रोड" का सूचकांक है। 4. एरे मानों को पुनः प्राप्त करने, बदलने या सम्मिलित करने के लिए वर्ग कोष्ठक के साथ सूचकांक का उपयोग करें।
|
||||||
|
|
||||||
|
✅ क्या यह आपको आश्चर्यचकित करता है कि एरेस शून्य सूचकांक पर शुरू होती हैं? कुछ प्रोग्रामिंग भाषाओं में, अनुक्रमित 1 से शुरू होते हैं। इसके आसपास एक दिलचस्प इतिहास है, जिसे आप [विकिपीडिया पर पढ़ सकते हैं] (https://en.wikipedia.org/wiki/Zero-based_numbering)।
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
let iceCreamFlavors = ["Chocolate", "Strawberry", "Vanilla", "Pistachio", "Rocky Road"];
|
||||||
|
iceCreamFlavors[2]; //"Vanilla"
|
||||||
|
```
|
||||||
|
|
||||||
|
आप इस तरह से मूल्य बदलने के लिए सूचकांक का लाभ उठा सकते हैं:
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
iceCreamFlavors[4] = "Butter Pecan"; //Changed "Rocky Road" to "Butter Pecan"
|
||||||
|
```
|
||||||
|
|
||||||
|
और आप किसी दिए गए इंडेक्स में इस तरह से एक नया मान सम्मिलित कर सकते हैं:
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
iceCreamFlavors[5] = "Cookie Dough"; //Added "Cookie Dough"
|
||||||
|
```
|
||||||
|
|
||||||
|
✅ एरे संचालकों के लिए मानों को धकेलने का एक अधिक सामान्य तरीका है सरणी संचालक जैसे array.push() का उपयोग करना
|
||||||
|
|
||||||
|
एक एरे में कितने आइटम हैं, यह जानने के लिए `length` संपत्ति का उपयोग करें।
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
let iceCreamFlavors = ["Chocolate", "Strawberry", "Vanilla", "Pistachio", "Rocky Road"];
|
||||||
|
iceCreamFlavors.length; //5
|
||||||
|
```
|
||||||
|
|
||||||
|
✅ इसे स्वयं आज़माएं! अपने खुद के निर्माण की एक सरणी बनाने और हेरफेर करने के लिए अपने ब्राउज़र के कंसोल का उपयोग करें।
|
||||||
|
|
||||||
|
## लुपस
|
||||||
|
|
||||||
|
लूप पुनरावृत्ति या **पुनरावृत्त** कार्यों के लिए अनुमति देते हैं, और बहुत समय और कोड बचा सकते हैं। प्रत्येक पुनरावृत्ति उनके वेरीअबल, मूल्यों और स्थितियों में भिन्न हो सकती है। जावास्क्रिप्ट में विभिन्न प्रकार के लूप हैं, और उनके बीच छोटे अंतर हैं, लेकिन अनिवार्य रूप से एक ही काम करते हैं: डेटा पर लूप।
|
||||||
|
|
||||||
|
### फॉर लूप
|
||||||
|
|
||||||
|
`For` लूप को पुनरावृति के लिए 3 भागों की आवश्यकता होती है:
|
||||||
|
- `counter` एक वैरिएबल है जिसे आमतौर पर एक संख्या के साथ आरंभीकृत किया जाता है जो पुनरावृत्तियों की संख्या को गिनता है।
|
||||||
|
- `condition` अभिव्यक्ति कि तुलना ऑपरेटरों का उपयोग करता है जब लूप को रोकने का कारण होता है `true`
|
||||||
|
- `iteration-expression` प्रत्येक पुनरावृत्ति के अंत में चलता है, आमतौर पर काउंटर मान को बदलने के लिए उपयोग किया जाता है
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
//Counting up to 10
|
||||||
|
for (let i = 0; i < 10; i++) {
|
||||||
|
console.log(i);
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
✅ इस कोड को ब्राउज़र कंसोल में चलाएं। जब आप काउंटर, स्थिति या पुनरावृत्ति अभिव्यक्ति में छोटे बदलाव करते हैं तो क्या होता है? क्या आप उल्टी गिनती बनाकर इसे पीछे की ओर चला सकते हैं?
|
||||||
|
|
||||||
|
### व्हाइल लूप
|
||||||
|
|
||||||
|
`for` लूप के लिए सिंटैक्स के विपरीत, `वाइल` लूप्स को केवल एक शर्त की आवश्यकता होती है जो लूप को रोक देगा जब `true` होगा। लूप में स्थितियां आमतौर पर काउंटर जैसे अन्य मूल्यों पर निर्भर करती हैं, और लूप के दौरान प्रबंधित की जानी चाहिए। काउंटर के लिए मान शुरू करना लूप के बाहर बनाया जाना चाहिए, और किसी भी स्थिति को पूरा करने के लिए किसी भी भाव सहित, काउंटर को लूप के अंदर बनाए रखा जाना चाहिए।
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
//Counting up to 10
|
||||||
|
let i = 0;
|
||||||
|
while (i < 10) {
|
||||||
|
console.log(i);
|
||||||
|
i++;
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
✅ आप एक फॉर लूप और वाइल लूप क्यों चुनेंगे? 17K दर्शकों का StackOverflow पर एक ही सवाल था, और कुछ राय [आपके लिए दिलचस्प हो सकती है] (https://stackoverflow.com/questions/39969145/ORE-loops-vs-for-loops-in-javascript)
|
||||||
|
|
||||||
|
## लूपस और अररेस
|
||||||
|
|
||||||
|
अररेस अक्सर लूपस के साथ उपयोग किया जाता है क्योंकि अधिकांश स्थितियों में लूप को रोकने के लिए अरै की लंबाई की आवश्यकता होती है, और सूचकांक भी काउंटर मूल्य हो सकता है।
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
let iceCreamFlavors = ["Chocolate", "Strawberry", "Vanilla", "Pistachio", "Rocky Road"];
|
||||||
|
|
||||||
|
for (let i = 0; i < iceCreamFlavors.length; i++) {
|
||||||
|
console.log(iceCreamFlavors[i]);
|
||||||
|
} //Ends when all flavors are printed
|
||||||
|
```
|
||||||
|
|
||||||
|
✅ अपने ब्राउजर के कंसोल में अपनी खुद की मेकिंग पर लूपिंग के साथ प्रयोग करें।
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 🚀 चुनौती
|
||||||
|
|
||||||
|
लूप के अलावा और अन्य अररेस पर लूपिंग के अन्य तरीके हैं। [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/Anray/map)। इन तकनीकों में से किसी एक का उपयोग करके अपने ऐरे लूप को फिर से लिखें।
|
||||||
|
|
||||||
|
## व्याख्यान उपरांत प्रश्नोत्तरी
|
||||||
|
[व्याख्यान उपरांत प्रश्नोत्तरी](https://nice-beach-0fe9e9d0f.azurestaticapps.net/quiz/14?loc=hi)
|
||||||
|
|
||||||
|
|
||||||
|
## समीक्षा और स्व अध्ययन
|
||||||
|
|
||||||
|
जावास्क्रिप्ट में ऐरे के पास कई तरीके हैं, जो डेटा हेरफेर के लिए बेहद उपयोगी हैं। [इन तरीकों को पढ़ें](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array) और उनमें से कुछ को आज़माएं (जैसे पुश, पॉप, स्लाइस और एसप्लाइस) आपकी रचना पे।
|
||||||
|
|
||||||
|
## असाइनमेंट
|
||||||
|
|
||||||
|
[एक अरै लूप](assignment.hi.md)
|
||||||
@ -0,0 +1,229 @@
|
|||||||
|
# टेरारियम प्रोजेक्ट पार्ट 1: HTML का परिचय
|
||||||
|
|
||||||
|
|
||||||
|
> [टोमोमी इमुरा](https://twitter.com/girlie_mac) द्वारा स्केचनेट
|
||||||
|
|
||||||
|
## पूर्व व्याख्यान प्रश्नोत्तरी
|
||||||
|
|
||||||
|
[पूर्व व्याख्यान प्रश्नोत्तरी](https://nice-beach-0fe9e9d0f.azurestaticapps.net/quiz/15?loc=hi)
|
||||||
|
|
||||||
|
### परिचय
|
||||||
|
|
||||||
|
HTML, या HyperText Markup Language, वेब का 'कंकाल' है। यदि CSS आपके HTML और 'ड्रेस अप' को जीवन में लाता है, तो HTML आपके वेब एप्लिकेशन का मुख्य भाग है। HTML का सिंटैक्स भी उस विचार को दर्शाता है, क्योंकि इसमें "head", "body" और "footer" टैग शामिल हैं।
|
||||||
|
|
||||||
|
इस पाठ में, हम अपने वर्चुअल टेरारियम के इंटरफ़ेस के 'कंकाल' को लेआउट करने के लिए HTML का उपयोग करने जा रहे हैं। इसमें एक शीर्षक और तीन कॉलम होंगे: एक दाएं और बाएं स्तंभ जहां ड्रैगेबल पौधे रहते हैं, और एक केंद्र क्षेत्र जो वास्तविक ग्लास दिखने वाला टेरारियम होगा। इस पाठ के अंत तक, आप कॉलम में पौधों को देख पाएंगे, लेकिन इंटरफ़ेस थोड़ा अजीब लगेगा; चिंता न करें, अगले भाग में आप सीएसएस शैली को बेहतर बनाने के लिए इंटरफ़ेस में जोड़ देंगे।
|
||||||
|
|
||||||
|
### टास्क
|
||||||
|
|
||||||
|
अपने कंप्यूटर पर, 'टेरारियम' नामक एक फ़ोल्डर बनाएं और उसके अंदर, एक फ़ाइल 'index.html'। विज़ुअल स्टूडियो कोड में आप ऐसा कर सकते हैं, जब आप एक नया वीएस कोड विंडो खोलकर, 'open folder' पर क्लिक करके, और अपने नए फ़ोल्डर में नेविगेट करके अपना टेरारियम फ़ोल्डर बना सकते हैं। एक्सप्लोरर फलक में छोटे 'फ़ाइल' बटन पर क्लिक करें और नई फ़ाइल बनाएँ:
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
या
|
||||||
|
|
||||||
|
अपने git bash पर इन कमांड का उपयोग करें:
|
||||||
|
* `mkdir terrarium`
|
||||||
|
* `cd terrarium`
|
||||||
|
* `touch index.html`
|
||||||
|
* `code index.html` या `nano index.html`
|
||||||
|
|
||||||
|
> index.html फ़ाइलें एक ब्राउज़र को इंगित करती हैं कि यह एक फ़ोल्डर में डिफ़ॉल्ट फ़ाइल है; URL जैसे `https://anysite.com/test` को एक फ़ोल्डर संरचना का उपयोग करके बनाया जा सकता है, जिसमें इसके अंदर` index` नाम के साथ `test` नामक एक फ़ोल्डर शामिल है; `index.html` को URL में नहीं दिखाना है।
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## DocType और html टैग
|
||||||
|
|
||||||
|
HTML फ़ाइल की पहली पंक्ति इसका सिद्धांत है। यह थोड़ा आश्चर्य की बात है कि आपको इस लाइन को फ़ाइल के शीर्ष पर रखने की आवश्यकता है, लेकिन यह पुराने ब्राउज़रों को बताता है कि वर्तमान HTML विनिर्देश के बाद ब्राउज़र को मानक मोड में पृष्ठ को प्रस्तुत करना होगा।
|
||||||
|
|
||||||
|
> युक्ति: वीएस कोड में, आप एक टैग पर होवर कर सकते हैं और एमडीएन संदर्भ गाइड से इसके उपयोग के बारे में जानकारी प्राप्त कर सकते हैं।
|
||||||
|
|
||||||
|
दूसरी पंक्ति `<html>` टैग का शुरुआती टैग होनी चाहिए, इसके ठीक बाद इसके समापन टैग `</html>` द्वारा होना चाहिए। ये टैग आपके इंटरफ़ेस के मूल तत्व हैं।
|
||||||
|
|
||||||
|
### टास्क
|
||||||
|
|
||||||
|
अपने `index.html` फ़ाइल के शीर्ष पर इन पंक्तियों को जोड़ें:
|
||||||
|
|
||||||
|
```HTML
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html></html>
|
||||||
|
```
|
||||||
|
|
||||||
|
✅ कुछ अलग तरीके हैं जो डॉक टाइप को क्वेरी स्ट्रिंग के साथ निर्धारित करके निर्धारित किए जा सकते हैं: [क्विर्क मोड और स्टैंडर्ड मोड](https://developer.mozilla.org/en-US/docs/Web/HTML/Quirks_Mode_and_Standards_Mode). ये मोड वास्तव में पुराने ब्राउज़रों का समर्थन करते थे जो आजकल सामान्य रूप से उपयोग नहीं किए जाते हैं (नेटस्केप नेविगेटर 4 और इंटरनेट एक्सप्लोरर 5)। आप मानक सिद्धांत घोषणा से चिपक सकते हैं।
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## दस्तावेज़ का 'head'
|
||||||
|
|
||||||
|
HTML दस्तावेज़ के 'हेड' क्षेत्र में आपके वेब पेज के बारे में महत्वपूर्ण जानकारी शामिल है, जिसे [मेटाडेटा](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/meta) के रूप में भी जाना जाता है। हमारे मामले में, हम वेब सर्वर को बताते हैं कि इस पेज को किस पेज पर भेजा जाएगा, ये चार बातें:
|
||||||
|
|
||||||
|
- पेज का शीर्षक
|
||||||
|
- पृष्ठ मेटाडेटा सहित:
|
||||||
|
- 'वर्ण सेट', पृष्ठ में किस वर्ण एन्कोडिंग का उपयोग किया जाता है, इस बारे में बताना
|
||||||
|
- `x-ua-compatible` सहित ब्राउज़र जानकारी, जो इंगित करता है कि IE = एज ब्राउज़र समर्थित है
|
||||||
|
- लोड होने पर व्यूपोर्ट कैसे व्यवहार करना चाहिए, इसके बारे में जानकारी। जब पृष्ठ पहली बार लोड होता है तो व्यूपोर्ट के शुरुआती स्तर को नियंत्रित करने के लिए व्यूपोर्ट सेट करना 1 को नियंत्रित करता है।
|
||||||
|
|
||||||
|
### टास्क
|
||||||
|
|
||||||
|
'<Html>' टैग खोलने और बंद करने के बीच अपने दस्तावेज़ में एक 'हेड' ब्लॉक जोड़ें।
|
||||||
|
|
||||||
|
```html
|
||||||
|
<head>
|
||||||
|
<title>Welcome to my Virtual Terrarium</title>
|
||||||
|
<meta charset="utf-8" />
|
||||||
|
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||||
|
</head>
|
||||||
|
```
|
||||||
|
|
||||||
|
✅ यदि आप व्यूपोर्ट मेटा टैग इस तरह सेट करते हैं तो क्या होगा: `<meta name="viewport" content="width=600">`? [Viewport](https://developer.mozilla.org/en-US/docs/Mozilla/Mobile/Viewport_meta_tag) के बारे में और पढ़ें।
|
||||||
|
---
|
||||||
|
|
||||||
|
## दस्तावेज़ की `body`
|
||||||
|
|
||||||
|
### HTML टैग्स
|
||||||
|
|
||||||
|
HTML में, आप वेब पेज के तत्वों को बनाने के लिए अपने .html फ़ाइल में टैग जोड़ते हैं। प्रत्येक टैग में आमतौर पर एक उद्घाटन और समापन टैग होता है, जैसे: पैराग्राफ को इंगित करने के लिए `<p>hello</ p>`। `<Html>` टैग जोड़ी के अंदर `<body>` टैग का एक सेट जोड़कर अपने इंटरफ़ेस का शरीर बनाएं; आपका मार्कअप अब इस तरह दिखता है:
|
||||||
|
|
||||||
|
### टास्क
|
||||||
|
|
||||||
|
```html
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<title>Welcome to my Virtual Terrarium</title>
|
||||||
|
<meta charset="utf-8" />
|
||||||
|
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||||
|
</head>
|
||||||
|
<body></body>
|
||||||
|
</html>
|
||||||
|
```
|
||||||
|
|
||||||
|
अब, आप अपने पृष्ठ का निर्माण शुरू कर सकते हैं। आम तौर पर, आप एक पृष्ठ में अलग-अलग तत्वों को बनाने के लिए `<div>` टैग का उपयोग करते हैं। हम '<div>' तत्वों की एक श्रृंखला बनाएंगे जिसमें चित्र शामिल होंगे।
|
||||||
|
|
||||||
|
### इमागेस
|
||||||
|
|
||||||
|
एक html टैग जिसे एक समापन टैग की आवश्यकता नहीं है, वह है <<img> `टैग, क्योंकि इसमें एक` src` तत्व है, जिसमें आइटम को रेंडर करने के लिए पृष्ठ की सभी जानकारी शामिल है।
|
||||||
|
|
||||||
|
अपने एप्लिकेशन में एक फ़ोल्डर बनाएं, जिसे `images` कहा जाता है और उस में, [स्रोत कोड फ़ोल्डर](../solution/images) में सभी छवियों को जोड़ें; (पौधों की 14 छवियां हैं)।
|
||||||
|
|
||||||
|
### टास्क
|
||||||
|
|
||||||
|
`<Body> </ body>` टैग के बीच उन पौधों की छवियों को दो कॉलमों में जोड़ें:
|
||||||
|
|
||||||
|
```html
|
||||||
|
<div id="page">
|
||||||
|
<div id="left-container" class="container">
|
||||||
|
<div class="plant-holder">
|
||||||
|
<img class="plant" alt="plant" id="plant1" src="./images/plant1.png" />
|
||||||
|
</div>
|
||||||
|
<div class="plant-holder">
|
||||||
|
<img class="plant" alt="plant" id="plant2" src="./images/plant2.png" />
|
||||||
|
</div>
|
||||||
|
<div class="plant-holder">
|
||||||
|
<img class="plant" alt="plant" id="plant3" src="./images/plant3.png" />
|
||||||
|
</div>
|
||||||
|
<div class="plant-holder">
|
||||||
|
<img class="plant" alt="plant" id="plant4" src="./images/plant4.png" />
|
||||||
|
</div>
|
||||||
|
<div class="plant-holder">
|
||||||
|
<img class="plant" alt="plant" id="plant5" src="./images/plant5.png" />
|
||||||
|
</div>
|
||||||
|
<div class="plant-holder">
|
||||||
|
<img class="plant" alt="plant" id="plant6" src="./images/plant6.png" />
|
||||||
|
</div>
|
||||||
|
<div class="plant-holder">
|
||||||
|
<img class="plant" alt="plant" id="plant7" src="./images/plant7.png" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div id="right-container" class="container">
|
||||||
|
<div class="plant-holder">
|
||||||
|
<img class="plant" alt="plant" id="plant8" src="./images/plant8.png" />
|
||||||
|
</div>
|
||||||
|
<div class="plant-holder">
|
||||||
|
<img class="plant" alt="plant" id="plant9" src="./images/plant9.png" />
|
||||||
|
</div>
|
||||||
|
<div class="plant-holder">
|
||||||
|
<img class="plant" alt="plant" id="plant10" src="./images/plant10.png" />
|
||||||
|
</div>
|
||||||
|
<div class="plant-holder">
|
||||||
|
<img class="plant" alt="plant" id="plant11" src="./images/plant11.png" />
|
||||||
|
</div>
|
||||||
|
<div class="plant-holder">
|
||||||
|
<img class="plant" alt="plant" id="plant12" src="./images/plant12.png" />
|
||||||
|
</div>
|
||||||
|
<div class="plant-holder">
|
||||||
|
<img class="plant" alt="plant" id="plant13" src="./images/plant13.png" />
|
||||||
|
</div>
|
||||||
|
<div class="plant-holder">
|
||||||
|
<img class="plant" alt="plant" id="plant14" src="./images/plant14.png" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
```
|
||||||
|
|
||||||
|
> नोट: स्पैन बनाम डिवाज। डिव को 'ब्लॉक' तत्व माना जाता है और स्पैन को 'इनलाइन'। अगर आप इन डिवो को स्पैन में तब्दील कर देंगे तो क्या होगा?
|
||||||
|
|
||||||
|
इस मार्कअप के साथ, पौधे अब स्क्रीन पर दिखाई देते हैं। यह बहुत बुरा लग रहा है, क्योंकि वे अभी तक CSS का उपयोग नहीं कर रहे हैं, और हम अगले पाठ में ऐसा करेंगे।
|
||||||
|
|
||||||
|
प्रत्येक छवि में ऑल्ट टेक्स्ट होता है, भले ही आप किसी चित्र को देख या प्रस्तुत नहीं कर सकते हैं। पहुँच के लिए शामिल करने के लिए यह एक महत्वपूर्ण विशेषता है। भविष्य के पाठों में पहुंच के बारे में अधिक जानें; अभी के लिए, याद रखें कि यदि कोई उपयोगकर्ता किसी कारण से इसे नहीं देख सकता है (धीमी गति से कनेक्शन के कारण, src विशेषता में कोई त्रुटि, या यदि उपयोगकर्ता एक स्क्रीन रीडर का उपयोग करता है), तो सर्वोच्च विशेषता किसी छवि के लिए वैकल्पिक जानकारी प्रदान करती है।
|
||||||
|
|
||||||
|
✅ क्या आपने देखा कि प्रत्येक छवि का एक ही ऑल्ट टैग है? क्या यह अच्छा अभ्यास है? क्यों या क्यों नहीं? क्या आप इस कोड को सुधार सकते हैं?
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## शब्दार्थ मार्कअप
|
||||||
|
|
||||||
|
सामान्य तौर पर, HTML लिखते समय सार्थक 'शब्दार्थ' का उपयोग करना बेहतर होता है। इसका क्या मतलब है? इसका अर्थ है कि आप जिस प्रकार के डेटा या इंटरैक्शन के लिए डिज़ाइन किए गए थे, उनका प्रतिनिधित्व करने के लिए आप HTML टैग का उपयोग करते हैं। उदाहरण के लिए, किसी पृष्ठ पर मुख्य शीर्षक पाठ में `<h1>` टैग का उपयोग करना चाहिए।
|
||||||
|
|
||||||
|
अपने उद्घाटन के ठीक नीचे निम्न पंक्ति जोड़ें `<body>` टैग:
|
||||||
|
|
||||||
|
```html
|
||||||
|
<h1>My Terrarium</h1>
|
||||||
|
```
|
||||||
|
|
||||||
|
सिमेंटिक मार्कअप का उपयोग करना जैसे हेडर होना `<h1>` और अनऑर्डर किए गए सूचियों को `<ul>` के रूप में प्रस्तुत किया जाना चाहिए। स्क्रीन रीडर्स को पेज के माध्यम से नेविगेट करने में मदद करता है। सामान्य तौर पर, बटन को `<button>` के रूप में लिखा जाना चाहिए और सूचियों को `<li>` होना चाहिए। हालांकि यह संभव नहीं है कि विशेष रूप से स्टाइल किए गए `<span>` 'तत्वों का उपयोग करने के लिए क्लिक हैंडलर के साथ बटन को मॉक करें, अक्षम उपयोगकर्ताओं के लिए प्रौद्योगिकियों का उपयोग करना बेहतर होता है यह निर्धारित करने के लिए कि एक पृष्ठ पर बटन कहाँ रहता है, और इसके साथ बातचीत करने के लिए, यदि तत्व एक के रूप में प्रकट होता है बटन। इस कारण से, संभव के रूप में अर्थ मार्कअप का उपयोग करने का प्रयास करें।
|
||||||
|
|
||||||
|
✅ एक स्क्रीन रीडर पर नज़र डालें और [यह कैसे एक वेब पेज के साथ बातचीत करता है](https://www.youtube.com/watch?v=OUDV1gqs9GA)। क्या आप देख सकते हैं कि गैर शब्दार्थ मार्कअप होने से उपयोगकर्ता निराश हो सकता है?
|
||||||
|
|
||||||
|
## टेरारियम
|
||||||
|
|
||||||
|
इस इंटरफ़ेस के अंतिम भाग में मार्कअप बनाना शामिल है जिसे टेरारियम बनाने के लिए स्टाइल किया जाएगा।
|
||||||
|
|
||||||
|
### टास्क:
|
||||||
|
|
||||||
|
इस मार्कअप को अंतिम `</div>` टैग के ऊपर जोड़ें:
|
||||||
|
|
||||||
|
```html
|
||||||
|
<div id="terrarium">
|
||||||
|
<div class="jar-top"></div>
|
||||||
|
<div class="jar-walls">
|
||||||
|
<div class="jar-glossy-long"></div>
|
||||||
|
<div class="jar-glossy-short"></div>
|
||||||
|
</div>
|
||||||
|
<div class="dirt"></div>
|
||||||
|
<div class="jar-bottom"></div>
|
||||||
|
</div>
|
||||||
|
```
|
||||||
|
|
||||||
|
✅ हालाँकि आपने इस मार्कअप को स्क्रीन पर जोड़ा है, फिर भी आप बिल्कुल कुछ भी प्रस्तुत नहीं करते हैं। क्यों?
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 🚀चुनौती
|
||||||
|
|
||||||
|
HTML में कुछ जंगली 'पुराने' टैग हैं जो अभी भी खेलने में मज़ेदार हैं, हालांकि आपको [[इन टैग्स](https://developer.mozilla.org/en-US/docs/Web/HTML/Element#Obirect_and_deprecated_elements) जैसे अस्वीकृत टैग का उपयोग नहीं करना चाहिए आपके मार्कअप में । फिर भी, आप h1 शीर्षक स्क्रॉल को क्षैतिज रूप से बनाने के लिए पुराने `<marquee>` टैग का उपयोग कर सकते हैं? (यदि आप ऐसा करते हैं, तो इसे बाद में हटाना न भूलें)
|
||||||
|
|
||||||
|
## व्याख्यान उपरांत प्रश्नोत्तरी
|
||||||
|
|
||||||
|
[व्याख्यान उपरांत प्रश्नोत्तरी](https://nice-beach-0fe9e9d0f.azurestaticapps.net/quiz/16?loc=hi)
|
||||||
|
|
||||||
|
## समीक्षा और स्व अध्ययन
|
||||||
|
|
||||||
|
HTML 'ट्राइ एंड ट्रू' बिल्डिंग ब्लॉक सिस्टम है जिसने वेब को आज के समय में बनाने में मदद की है। कुछ पुराने और नए टैग का अध्ययन करके इसके इतिहास के बारे में थोड़ा जानें। क्या आप यह पता लगा सकते हैं कि कुछ टैग क्यों हटाए गए और कुछ जोड़े गए? भविष्य में कौन से टैग पेश किए जा सकते हैं?
|
||||||
|
|
||||||
|
[Microsoft Learn](https://docs.microsoft.com/learn/modules/build-simple-website/?WT.mc_id=academy-13441-cxa) पर वेब और मोबाइल उपकरणों के लिए साइट बनाने के बारे में और जानें।
|
||||||
|
|
||||||
|
## असाइनमेंट
|
||||||
|
|
||||||
|
[अपने HTML का अभ्यास करें: एक ब्लॉग मॉकअप बनाएँ](assignment.hi.md)
|
||||||
@ -0,0 +1,265 @@
|
|||||||
|
# टेरारियम प्रोजेक्ट पार्ट 2: सीएसएस का परिचय
|
||||||
|
|
||||||
|
|
||||||
|
> [टोमोमी इमुरा](https://twitter.com/girlie_mac) द्वारा स्केचनेट
|
||||||
|
|
||||||
|
## पूर्व व्याख्यान प्रश्नोत्तरी
|
||||||
|
|
||||||
|
[पूर्व व्याख्यान प्रश्नोत्तरी](https://nice-beach-0fe9e9d0f.azurestaticapps.net/quiz/17?loc=hi)
|
||||||
|
|
||||||
|
### परिचय
|
||||||
|
|
||||||
|
CSS, या कैस्केडिंग स्टाइल शीट्स, वेब विकास की एक महत्वपूर्ण समस्या को हल करते हैं: आपकी वेब साइट को कैसे अच्छा बनाया जाए। अपने ऐप्स को स्टाइल करना उन्हें अधिक उपयोगी और अच्छे दिखने वाला बनाता है; आप रिस्पॉन्सिव वेब डिज़ाइन (RWD) बनाने के लिए CSS का भी उपयोग कर सकते हैं - जिससे आपके ऐप्स को कोई फर्क नहीं पड़ता कि वे किस स्क्रीन के आकार को प्रदर्शित करते हैं। CSS केवल आपके ऐप को अच्छा बनाने के बारे में नहीं है; इसकी कल्पना में एनिमेशन और ट्रांसफ़ॉर्म शामिल हैं जो आपके ऐप्स के लिए परिष्कृत इंटरैक्शन सक्षम कर सकते हैं। सीएसएस वर्किंग ग्रुप वर्तमान सीएसएस विनिर्देशों को बनाए रखने में मदद करता है; आप [वर्ल्ड वाइड वेब कंसोर्टियम की साइट](https://www.w3.org/Style/CSS/members) पर उनके काम का अनुसरण कर सकते हैं।
|
||||||
|
|
||||||
|
> ध्यान दें, CSS एक ऐसी भाषा है जो वेब पर सब कुछ की तरह विकसित होती है, और सभी ब्राउज़र विनिर्देश के नए भागों का समर्थन नहीं करते हैं। हमेशा [CanIUse.com](https://caniuse.com) से परामर्श करके अपने कार्यान्वयन की जाँच करें।
|
||||||
|
|
||||||
|
इस पाठ में, हम अपने ऑनलाइन टेरारियम में शैलियों को जोड़ने जा रहे हैं और कई सीएसएस अवधारणाओं के बारे में अधिक जान सकते हैं: कैस्केड, वंशानुक्रम, और चयनकर्ताओं, स्थिति और लेआउट का निर्माण करने के लिए सीएसएस का उपयोग करना। इस प्रक्रिया में हम टेरारियम लेआउट करेंगे और वास्तविक टेरारियम स्वयं बनाएंगे।
|
||||||
|
|
||||||
|
### शर्त
|
||||||
|
|
||||||
|
आपके पास निर्मित और तैयार होने के लिए तैयार होने के लिए आपके पास HTML होना चाहिए।
|
||||||
|
|
||||||
|
### टास्क
|
||||||
|
|
||||||
|
अपने टेरारियम फ़ोल्डर में, `style.css` नामक एक नई फ़ाइल बनाएँ। उस फ़ाइल को `<head>` अनुभाग में आयात करें:
|
||||||
|
|
||||||
|
```html
|
||||||
|
<link rel="stylesheet" href="./style.css" />
|
||||||
|
```
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## कैस्केड
|
||||||
|
|
||||||
|
कैस्केडिंग स्टाइल शीट्स इस विचार को शामिल करती है कि शैली 'कैस्केड' ऐसी है कि शैली का अनुप्रयोग इसकी प्राथमिकता द्वारा निर्देशित होता है। एक वेब साइट लेखक द्वारा निर्धारित शैलियाँ एक ब्राउज़र द्वारा सेट किए गए लोगों पर प्राथमिकता देती हैं। स्टाइल्स सेट 'इनलाइन' बाहरी स्टाइल शीट में सेट पर प्राथमिकता लेते हैं।
|
||||||
|
|
||||||
|
### टास्क
|
||||||
|
|
||||||
|
इनलाइन शैली "color:red" को अपने `<h1>` टैग में जोड़ें:
|
||||||
|
|
||||||
|
```HTML
|
||||||
|
<h1 style="color: red">My Terrarium</h1>
|
||||||
|
```
|
||||||
|
|
||||||
|
फिर, निम्न कोड को अपने `style.css` फ़ाइल में जोड़ें:
|
||||||
|
|
||||||
|
```CSS
|
||||||
|
h1 {
|
||||||
|
color: blue;
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
✅ आपके वेब ऐप में कौन सा रंग प्रदर्शित होता है? क्यों? क्या आप शैलियों को ओवरराइड करने का एक तरीका खोज सकते हैं? आप ऐसा कब करना चाहेंगे, या क्यों नहीं?
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## इनहेरिटेंस
|
||||||
|
|
||||||
|
पूर्वजों की शैली से वंशजों को वंश प्राप्त होता है, जैसे कि घोंसले वाले तत्व अपने माता-पिता की शैलियों को विरासत में देते हैं।
|
||||||
|
|
||||||
|
### टास्क
|
||||||
|
|
||||||
|
शरीर के फ़ॉन्ट को दिए गए फ़ॉन्ट पर सेट करें, और नेस्टेड तत्व के फ़ॉन्ट को देखने के लिए जांचें:
|
||||||
|
|
||||||
|
```CSS
|
||||||
|
body {
|
||||||
|
font-family: helvetica, arial, sans-serif;
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
अपने ब्राउज़र के कंसोल को 'एलिमेंट्स' टैब में खोलें और H1 के फॉन्ट को देखें। यह शरीर से अपने फ़ॉन्ट को विरासत में प्राप्त करता है, जैसा कि ब्राउज़र के भीतर कहा गया है:
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
✅ क्या आप एक नेस्टेड स्टाइल को एक अलग संपत्ति विरासत में दे सकते हैं?
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## CSS सिलेक्टोर
|
||||||
|
|
||||||
|
### टैग्स
|
||||||
|
|
||||||
|
अब तक, आपके `style.css` फ़ाइल में केवल कुछ टैग स्टाइल हैं, और एप्लिकेशन बहुत अजीब लग रहा है:
|
||||||
|
|
||||||
|
```CSS
|
||||||
|
body {
|
||||||
|
font-family: helvetica, arial, sans-serif;
|
||||||
|
}
|
||||||
|
|
||||||
|
h1 {
|
||||||
|
color: #3a241d;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
एक टैग को स्टाइल करने का यह तरीका आपको अद्वितीय तत्वों पर नियंत्रण देता है, लेकिन आपको अपने टेरारियम में कई पौधों की शैलियों को नियंत्रित करने की आवश्यकता है। ऐसा करने के लिए, आपको CSS चयनकर्ताओं का लाभ उठाने की आवश्यकता है।
|
||||||
|
|
||||||
|
### आइडी
|
||||||
|
|
||||||
|
बाएँ और दाएँ कंटेनरों को लेआउट करने के लिए कुछ शैली जोड़ें। चूंकि केवल एक बाएं कंटेनर और केवल एक सही कंटेनर है, इसलिए उन्हें मार्कअप में आईडी दिए गए हैं। उन्हें स्टाइल करने के लिए, `#` का उपयोग करें:
|
||||||
|
|
||||||
|
```CSS
|
||||||
|
#left-container {
|
||||||
|
background-color: #eee;
|
||||||
|
width: 15%;
|
||||||
|
left: 0px;
|
||||||
|
top: 0px;
|
||||||
|
position: absolute;
|
||||||
|
height: 100%;
|
||||||
|
padding: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#right-container {
|
||||||
|
background-color: #eee;
|
||||||
|
width: 15%;
|
||||||
|
right: 0px;
|
||||||
|
top: 0px;
|
||||||
|
position: absolute;
|
||||||
|
height: 100%;
|
||||||
|
padding: 10px;
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
यहां, आपने इन कंटेनरों को स्क्रीन के सबसे बाईं और दाईं ओर पूर्ण स्थिति में रखा है, और उनकी चौड़ाई के लिए प्रतिशत का उपयोग किया है ताकि वे छोटे मोबाइल स्क्रीन के लिए स्केल कर सकें।
|
||||||
|
|
||||||
|
✅ यह कोड काफी दोहराया जाता है, इस प्रकार "DRY" (Don't Repeat Yourself); क्या आप इन आईडी को स्टाइल करने का बेहतर तरीका ढूंढ सकते हैं, शायद आईडी और क्लास के साथ? आपको मार्कअप को बदलना होगा और CSS को रिफलेक्टर करना होगा:
|
||||||
|
|
||||||
|
```html
|
||||||
|
<div id="left-container" class="container"></div>
|
||||||
|
```
|
||||||
|
|
||||||
|
### क्लाससेस
|
||||||
|
|
||||||
|
ऊपर के उदाहरण में, आपने स्क्रीन पर दो अद्वितीय तत्वों को स्टाइल किया है। यदि आप शैली को स्क्रीन पर कई तत्वों पर लागू करना चाहते हैं, तो आप CSS कक्षाओं का उपयोग कर सकते हैं। इसे बाएं और दाएं कंटेनर में पौधों को लेआउट करने के लिए करें।
|
||||||
|
|
||||||
|
ध्यान दें कि HTML मार्कअप में प्रत्येक संयंत्र में आईडी और कक्षाओं का एक संयोजन होता है। यहाँ आइडी का उपयोग JavaScript द्वारा किया जाता है जिसे आप बाद में जोड़कर टेरारियम प्लांट प्लेसमेंट में जोड़ देंगे। कक्षाएं, हालांकि, सभी पौधों को एक दी गई शैली देती हैं।
|
||||||
|
|
||||||
|
```html
|
||||||
|
<div class="plant-holder">
|
||||||
|
<img class="plant" alt="plant" id="plant1" src="./images/plant1.png" />
|
||||||
|
</div>
|
||||||
|
```
|
||||||
|
|
||||||
|
अपने `style.css` फ़ाइल में निम्न जोड़ें:
|
||||||
|
|
||||||
|
```CSS
|
||||||
|
.plant-holder {
|
||||||
|
position: relative;
|
||||||
|
height: 13%;
|
||||||
|
left: -10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.plant {
|
||||||
|
position: absolute;
|
||||||
|
max-width: 150%;
|
||||||
|
max-height: 150%;
|
||||||
|
z-index: 2;
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
इस स्निपेट में उल्लेखनीय सापेक्ष और पूर्ण स्थिति का मिश्रण है, जिसे हम अगले भाग में कवर करेंगे। एक नज़र जिस तरह से ऊंचाइयों को प्रतिशत द्वारा नियंत्रित किया जाता है:
|
||||||
|
|
||||||
|
आपने प्लांट धारक की ऊंचाई 13% तक निर्धारित की, यह सुनिश्चित करने के लिए एक अच्छी संख्या है कि सभी पौधों को प्रत्येक ऊर्ध्वाधर कंटेनर में स्क्रॉल करने की आवश्यकता के बिना प्रदर्शित किया जाता है।
|
||||||
|
|
||||||
|
आपने संयंत्र धारक को बाईं ओर जाने के लिए सेट किया है ताकि पौधों को उनके कंटेनर के भीतर और अधिक केंद्रित होने दिया जा सके। चित्रों में बड़ी मात्रा में पारदर्शी पृष्ठभूमि होती है, ताकि उन्हें अधिक खींचने योग्य बनाया जा सके, इसलिए स्क्रीन पर बेहतर ढंग से फिट होने के लिए इसे बाईं ओर धकेलने की आवश्यकता होती है।
|
||||||
|
|
||||||
|
फिर, पौधे को अधिकतम 150% की चौड़ाई दी जाती है। यह इसे स्केल करने की अनुमति देता है क्योंकि ब्राउज़र नीचे स्केल करता है। अपने ब्राउज़र का आकार बदलने का प्रयास करें; पौधे अपने कंटेनरों में रहते हैं लेकिन फिट होने के लिए बड़े पैमाने पर होते हैं।
|
||||||
|
|
||||||
|
इसके अलावा उल्लेखनीय है जेड-इंडेक्स का उपयोग, जो किसी तत्व की सापेक्ष ऊंचाई को नियंत्रित करता है (ताकि पौधे कंटेनर के ऊपर बैठें और टेरारियम के अंदर बैठें)।
|
||||||
|
|
||||||
|
✅ आपको संयंत्र धारक और संयंत्र CSS चयनकर्ता दोनों की आवश्यकता क्यों है?
|
||||||
|
|
||||||
|
## सीएसएस पोजिशनिंग
|
||||||
|
|
||||||
|
मिक्सिंग पोजीशन प्रॉपर्टीज (इसमें स्टैटिक, रिलेटिव, फिक्स्ड, एब्सोल्यूट और स्टिकी पोजिशंस होते हैं) थोड़ा मुश्किल हो सकता है, लेकिन जब ठीक से किया जाता है तो यह आपके पेजों पर मौजूद तत्वों पर अच्छा नियंत्रण देता है।
|
||||||
|
|
||||||
|
निरपेक्ष तैनात तत्व उनके निकटतम पूर्वजों के सापेक्ष तैनात हैं, और यदि कोई नहीं हैं, तो यह दस्तावेज़ निकाय के अनुसार स्थित है।
|
||||||
|
|
||||||
|
संबंधित स्थिति को उसके प्रारंभिक स्थान से दूर रखने के लिए सीएसएस के निर्देशों के आधार पर सापेक्ष तत्व तैनात किए जाते हैं।
|
||||||
|
|
||||||
|
हमारे नमूने में, `plant-holder` एक रिश्तेदार-तैनात तत्व है जो एक निरपेक्ष-तैनात कंटेनर के भीतर तैनात है। परिणामी व्यवहार यह है कि साइड बार कंटेनरों को बाएं और दाएं पिन किया जाता है, और प्लांट धारक को नेस्टेड किया जाता है, साइड बार के भीतर खुद को समायोजित करते हुए, पौधों को ऊर्ध्वाधर पंक्ति में रखने के लिए जगह दी जाती है।
|
||||||
|
|
||||||
|
> `plant` में भी पूर्ण स्थिति होती है, जो आपको इसे खींचने योग्य बनाने के लिए आवश्यक है, जैसा कि आप अगले पाठ में जानेंगे।
|
||||||
|
|
||||||
|
✅ साइड कंटेनरों और प्लांट-धारक की स्थिति के प्रकारों को बदलने के साथ प्रयोग। क्या होता है?
|
||||||
|
|
||||||
|
## CSS लेऔटस
|
||||||
|
|
||||||
|
अब आप सीएसएस का उपयोग करके टेरारियम का निर्माण करने के लिए जो कुछ भी सीखा है, उसका उपयोग करेंगे
|
||||||
|
|
||||||
|
पहले, CSS का उपयोग करके एक गोल आयत के रूप में `.terrarium` डिव बच्चों को स्टाइल करें:
|
||||||
|
|
||||||
|
```CSS
|
||||||
|
.jar-walls {
|
||||||
|
height: 80%;
|
||||||
|
width: 60%;
|
||||||
|
background: #d1e1df;
|
||||||
|
border-radius: 1rem;
|
||||||
|
position: absolute;
|
||||||
|
bottom: 0.5%;
|
||||||
|
left: 20%;
|
||||||
|
opacity: 0.5;
|
||||||
|
z-index: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.jar-top {
|
||||||
|
width: 50%;
|
||||||
|
height: 5%;
|
||||||
|
background: #d1e1df;
|
||||||
|
position: absolute;
|
||||||
|
bottom: 80.5%;
|
||||||
|
left: 25%;
|
||||||
|
opacity: 0.7;
|
||||||
|
z-index: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.jar-bottom {
|
||||||
|
width: 50%;
|
||||||
|
height: 1%;
|
||||||
|
background: #d1e1df;
|
||||||
|
position: absolute;
|
||||||
|
bottom: 0%;
|
||||||
|
left: 25%;
|
||||||
|
opacity: 0.7;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dirt {
|
||||||
|
width: 60%;
|
||||||
|
height: 5%;
|
||||||
|
background: #3a241d;
|
||||||
|
position: absolute;
|
||||||
|
border-radius: 0 0 1rem 1rem;
|
||||||
|
bottom: 1%;
|
||||||
|
left: 20%;
|
||||||
|
opacity: 0.7;
|
||||||
|
z-index: -1;
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
यहां प्रतिशत के उपयोग पर ध्यान दें। यदि आप अपने ब्राउज़र को नीचे पैमाने पर रखते हैं, तो आप देख सकते हैं कि जार कैसे स्केल करता है। जार तत्वों के लिए चौड़ाई और ऊँचाई प्रतिशत को भी ध्यान में रखें और प्रत्येक तत्व को केंद्र में कैसे स्थित किया जाए, यह व्यूपोर्ट के तल पर पिन किया गया है।
|
||||||
|
|
||||||
|
हम सीमा-त्रिज्या(रैडीअस), फ़ॉन्ट-सापेक्ष लंबाई के लिए `rem` का भी उपयोग कर रहे हैं। इस प्रकार के सापेक्ष माप के बारे में और अधिक पढ़ें [सीएसएस स्पेक्स] (https://www.w3.org/TR/css-values-3/#font-relative-lengths)।
|
||||||
|
|
||||||
|
✅ Try changing the jar colors and opacity vs. those of the dirt. What happens? Why?
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 🚀चुनौती
|
||||||
|
|
||||||
|
जार के बाएँ निचले क्षेत्र में एक 'bubble' चमक जोड़ें, ताकि यह अधिक कांच जैसा दिखाई दे। आप एक प्रतिबिंबित चमक की तरह दिखने के लिए `.jar-glossy-long` और `.jar-glossy-short` को स्टाइल करेंगे। यहाँ है कि यह कैसा दिखेगा:
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
पोस्ट-लेक्चर क्विज को पूरा करने के लिए, इस लर्न मॉड्यूल से गुजरें: [CSS के साथ अपने HTML ऐप को स्टाइल करें](https://docs.microsoft.com/learn/modules/build-simple-website/4-css-basics?tT.mc_id=अकादमिक-13441-cxa)
|
||||||
|
|
||||||
|
## व्याख्यान उपरांत प्रश्नोत्तरी
|
||||||
|
|
||||||
|
[व्याख्यान उपरांत प्रश्नोत्तरी](https://nice-beach-0fe9e9d0f.azurestaticapps.net/quiz/18?loc=hi)
|
||||||
|
|
||||||
|
## समीक्षा और स्व अध्ययन
|
||||||
|
|
||||||
|
सीएसएस भ्रामक सीधा लगता है, लेकिन सभी ब्राउज़र और सभी स्क्रीन आकारों के लिए पूरी तरह से ऐप को स्टाइल करने की कोशिश करते समय कई चुनौतियां हैं। सीएसएस-ग्रिड और फ्लेक्सबॉक्स ऐसे उपकरण हैं जिन्हें काम को थोड़ा अधिक संरचित और अधिक विश्वसनीय बनाने के लिए विकसित किया गया है। [Flexbox Froggy](https://flexboxfroggy.com/) और [ग्रिड गार्डन](https://codepip.com/games/grid-garden/) खेलकर इन उपकरणों के बारे में जानें।
|
||||||
|
|
||||||
|
## असाइनमेंट
|
||||||
|
|
||||||
|
[CSS पुनर्रचना](assignment.hi.md)
|
||||||
@ -0,0 +1,217 @@
|
|||||||
|
# टेरारियम प्रोजेक्ट पार्ट 3: DOM मैनिपुलेशन और एक क्लोजर
|
||||||
|
|
||||||
|
|
||||||
|
> [टोमोमी इमुरा](https://twitter.com/girlie_mac) द्वारा स्केचनेट
|
||||||
|
|
||||||
|
## पूर्व व्याख्यान प्रश्नोत्तरी
|
||||||
|
|
||||||
|
[पूर्व व्याख्यान प्रश्नोत्तरी](https://nice-beach-0fe9e9d0f.azurestaticapps.net/quiz/19?loc=hi)
|
||||||
|
|
||||||
|
### परिचय
|
||||||
|
|
||||||
|
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 का प्रबंधन करने के लिए वैनिला जावास्क्रिप्ट के बजाय जावास्क्रिप्ट चौखटे का उपयोग करने के पीछे होती हैं, लेकिन हम अपने दम पर प्रबंधित करेंगे!
|
||||||
|
|
||||||
|
इसके अलावा, यह पाठ एक [जावास्क्रिप्ट क्लोजर](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Closures) के विचार को पेश करेगा, जिसे आप दूसरे से संलग्न फ़ंक्शन के रूप में सोच सकते हैं कार्य करें ताकि आंतरिक फ़ंक्शन बाहरी फ़ंक्शन के दायरे तक पहुंच सके।
|
||||||
|
|
||||||
|
> जावास्क्रिप्ट क्लोजर एक विशाल और जटिल विषय है। यह सबक सबसे बुनियादी विचार पर छूता है कि इस टेरारियम के कोड में, आपको एक बंद मिलेगा: एक आंतरिक फ़ंक्शन और एक बाहरी फ़ंक्शन, जो बाहरी फ़ंक्शन के दायरे में आंतरिक फ़ंक्शन का उपयोग करने की अनुमति देता है। यह कैसे काम करता है, इस बारे में अधिक जानकारी के लिए, कृपया [व्यापक प्रलेखन](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Closures) पर जाएँ।
|
||||||
|
|
||||||
|
हम DOM को हेरफेर करने के लिए एक क्लोशर का उपयोग करेंगे।
|
||||||
|
|
||||||
|
DOM को एक पेड़ के रूप में सोचें, उन सभी तरीकों का प्रतिनिधित्व करता है जो एक वेब पेज दस्तावेज़ में हेरफेर किया जा सकता है। विभिन्न एपीआई (एप्लिकेशन प्रोग्राम इंटरफेस) लिखे गए हैं ताकि प्रोग्रामर अपनी पसंद की प्रोग्रामिंग भाषा का उपयोग करके, DOM तक पहुंच सकें और इसे संपादित, बदल सकें, पुनर्व्यवस्थित कर सकें और अन्यथा इसका प्रबंधन कर सकें।
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
> DOM और HTML मार्कअप का प्रतिनिधित्व जो इसे संदर्भित करता है। [ओलाफा नसरौई](https://www.researchgate.net/publication/221417012_Profile-Based_Focused_Crawler_for_Social_Media-Sharing_Websites) से
|
||||||
|
|
||||||
|
इस पाठ में, हम जावास्क्रिप्ट बनाकर अपनी इंटरैक्टिव टेरारियम परियोजना को पूरा करेंगे जो उपयोगकर्ता को पृष्ठ पर पौधों को हेरफेर करने की अनुमति देगा।
|
||||||
|
|
||||||
|
### शर्त
|
||||||
|
|
||||||
|
आपके पास निर्मित टेरारियम के लिए आपके पास HTML और CSS होना चाहिए। इस पाठ के अंत तक आप पौधों को खींचकर टेरारियम में ले जा सकेंगे।
|
||||||
|
|
||||||
|
### टास्क
|
||||||
|
|
||||||
|
अपने टेरारियम फ़ोल्डर में, `script.js` नामक एक नई फ़ाइल बनाएँ। उस फ़ाइल को `<head>` अनुभाग में आयात करें:
|
||||||
|
|
||||||
|
```html
|
||||||
|
<script src="./script.js" defer></script>
|
||||||
|
```
|
||||||
|
|
||||||
|
> नोट: HTML फ़ाइल में एक बाहरी जावास्क्रिप्ट फ़ाइल आयात करते समय `defer` का उपयोग करें ताकि HTML फ़ाइल पूरी तरह से लोड होने के बाद ही जावास्क्रिप्ट निष्पादित हो सके। आप `async` विशेषता का भी उपयोग कर सकते हैं, जो स्क्रिप्ट को निष्पादित करने की अनुमति देता है जबकि HTML फ़ाइल पार्सिंग है, लेकिन हमारे मामले में, ड्रैग स्क्रिप्ट को निष्पादित करने की अनुमति देने से पहले HTML तत्वों को खींचने के लिए पूरी तरह से उपलब्ध होना आवश्यक है।
|
||||||
|
---
|
||||||
|
|
||||||
|
## डोम तत्व
|
||||||
|
|
||||||
|
पहली चीज जो आपको करने की ज़रूरत है वह उन तत्वों के संदर्भ बनाना है जिन्हें आप DOM में हेरफेर करना चाहते हैं। हमारे मामले में, वे 14 पौधे हैं जो वर्तमान में साइड बार में इंतजार कर रहे हैं।
|
||||||
|
|
||||||
|
### टास्क
|
||||||
|
|
||||||
|
```html
|
||||||
|
dragElement(document.getElementById('plant1'));
|
||||||
|
dragElement(document.getElementById('plant2'));
|
||||||
|
dragElement(document.getElementById('plant3'));
|
||||||
|
dragElement(document.getElementById('plant4'));
|
||||||
|
dragElement(document.getElementById('plant5'));
|
||||||
|
dragElement(document.getElementById('plant6'));
|
||||||
|
dragElement(document.getElementById('plant7'));
|
||||||
|
dragElement(document.getElementById('plant8'));
|
||||||
|
dragElement(document.getElementById('plant9'));
|
||||||
|
dragElement(document.getElementById('plant10'));
|
||||||
|
dragElement(document.getElementById('plant11'));
|
||||||
|
dragElement(document.getElementById('plant12'));
|
||||||
|
dragElement(document.getElementById('plant13'));
|
||||||
|
dragElement(document.getElementById('plant14'));
|
||||||
|
```
|
||||||
|
|
||||||
|
यहाँ क्या चल रहा है? आप दस्तावेज़ को संदर्भित कर रहे हैं और किसी विशेष आईडी के साथ एक तत्व खोजने के लिए इसके DOM के माध्यम से देख रहे हैं। HTML पर पहले पाठ में याद रखें कि आपने प्रत्येक संयंत्र छवि (`id="plant1"`) के लिए अलग-अलग Ids दिए हैं? अब आप उस प्रयास का उपयोग करेंगे। प्रत्येक तत्व की पहचान करने के बाद, आप उस आइटम को `dragElement` नामक एक फ़ंक्शन में पास करते हैं जिसे आप एक मिनट में बनाएंगे। इस प्रकार, HTML में तत्व अब ड्रैग-सक्षम है, या शीघ्र ही होगा।
|
||||||
|
|
||||||
|
✅ हम आईडी द्वारा तत्वों का संदर्भ क्यों देते हैं? उनके CSS क्लास के द्वारा क्यों नहीं? आप इस प्रश्न का उत्तर देने के लिए CSS के पिछले पाठ का उल्लेख कर सकते हैं।
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## थे क्लोशर
|
||||||
|
|
||||||
|
अब आप DragElement बंद करने के लिए तैयार हैं, जो एक बाहरी फ़ंक्शन है जो एक आंतरिक फ़ंक्शन या फ़ंक्शन को संलग्न करता है (हमारे मामले में, हमारे पास तीन होंगे)।
|
||||||
|
|
||||||
|
बाहरी फ़ंक्शन के कार्यक्षेत्र तक पहुँचने के लिए क्लोज़र उपयोगी होते हैं। यहाँ एक उदाहरण है:
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
function displayCandy(){
|
||||||
|
let candy = ['jellybeans'];
|
||||||
|
function addCandy(candyType) {
|
||||||
|
candy.push(candyType)
|
||||||
|
}
|
||||||
|
addCandy('gumdrops');
|
||||||
|
}
|
||||||
|
displayCandy();
|
||||||
|
console.log(candy)
|
||||||
|
```
|
||||||
|
|
||||||
|
इस उदाहरण में, DisplayCandy फ़ंक्शन एक फ़ंक्शन को घेरता है जो एक नए कैंडी प्रकार को एक सरणी में धकेलता है जो पहले से ही फ़ंक्शन में मौजूद है। यदि आप इस कोड को चलाते हैं, तो `candy` सरणी अपरिभाषित होगी, क्योंकि यह एक स्थानीय चर (बंद करने के लिए स्थानीय) है।
|
||||||
|
|
||||||
|
✅ आप `candy` अरै को कैसे सुलभ बना सकते हैं? इसे बंद करने के बाहर ले जाने की कोशिश करें। इस तरह, यह सरणी वैश्विक हो जाती है, बजाए केवल बंद होने के स्थानीय दायरे के उपलब्ध होने के।
|
||||||
|
|
||||||
|
### टास्क
|
||||||
|
|
||||||
|
`Script.js` में तत्व घोषणाओं के तहत, एक फ़ंक्शन बनाएँ:
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
function dragElement(terrariumElement) {
|
||||||
|
//set 4 positions for positioning on the screen
|
||||||
|
let pos1 = 0,
|
||||||
|
pos2 = 0,
|
||||||
|
pos3 = 0,
|
||||||
|
pos4 = 0;
|
||||||
|
terrariumElement.onpointerdown = pointerDrag;
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
`dragElement` स्क्रिप्ट के शीर्ष पर घोषणाओं से अपनी `terrariumElement` वस्तु प्राप्त करें। फिर, आप फ़ंक्शन में पारित ऑब्जेक्ट के लिए `0` पर कुछ स्थानीय स्थिति निर्धारित करते हैं। ये स्थानीय चर हैं जिन्हें प्रत्येक तत्व के लिए हेरफेर किया जाएगा क्योंकि आप प्रत्येक तत्व को बंद करने के भीतर खींचें और ड्रॉप कार्यक्षमता जोड़ते हैं। टेरारियम को इन घसीटे गए तत्वों द्वारा पॉपुलेट किया जाएगा, इसलिए एप्लिकेशन को इस बात पर नज़र रखने की आवश्यकता है कि उन्हें कहाँ रखा गया है।
|
||||||
|
|
||||||
|
इसके अलावा, इस फ़ंक्शन को पारित किए जाने वाले टेरारियम ईमेंट को एक `onpointerdown` ईवेंट सौंपा गया है, जो [वेब एपीआई](https://developer.mozilla.org/en-US/docs/Web/API) का एक हिस्सा है। डोम प्रबंधन के साथ मदद करने के लिए। `onpointerdown` एक बटन धकेलने पर, या हमारे मामले में, एक ड्रैग करने योग्य तत्व को छू जाता है। यह ईवेंट हैंडलर कुछ अपवादों के साथ [वेब और मोबाइल ब्राउज़र](https://caniuse.com/?search=onpointerdown) दोनों पर काम करता है।
|
||||||
|
|
||||||
|
✅ [ईवेंट हैंडलर `onclick`](https://developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers/onclick) को अधिक समर्थन क्रॉस-ब्राउज़र है; आप इसका उपयोग यहां क्यों नहीं करेंगे? स्क्रीन निर्माण के सटीक प्रकार के बारे में सोचें जिसे आप यहाँ बनाने का प्रयास कर रहे हैं।
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## पॉइंटरड्रैग फ़ंक्शन
|
||||||
|
|
||||||
|
terrariumElement को घसीटने के लिए तैयार है; जब `onpointerdown` ईवेंट को निकाल दिया जाता है, तो फ़ंक्शन पॉइंटरड्रैग को आमंत्रित किया जाता है। इस पंक्ति के नीचे उस फ़ंक्शन को जोड़ें: `terrariumElement.onpointerdown = pointerDrag;`:
|
||||||
|
|
||||||
|
### टास्क
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
function pointerDrag(e) {
|
||||||
|
e.preventDefault();
|
||||||
|
console.log(e);
|
||||||
|
pos3 = e.clientX;
|
||||||
|
pos4 = e.clientY;
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
कई चीजें होती हैं। सबसे पहले, आप डिफ़ॉल्ट ईवेंट्स को इंगित करते हैं जो आमतौर पर पॉइंटरडाउन पर होता है `e.preventDefault ();` का उपयोग करके। इस तरह से आपके पास इंटरफ़ेस के व्यवहार पर अधिक नियंत्रण है।
|
||||||
|
|
||||||
|
> जब आप पूरी तरह से स्क्रिप्ट फ़ाइल का निर्माण कर चुके हों और `e.preventDefault ()` के बिना प्रयास करें - इस पंक्ति में वापस आएं - क्या होता है?
|
||||||
|
|
||||||
|
दूसरा, ब्राउज़र विंडो में `index.html` खोलें, और इंटरफ़ेस का निरीक्षण करें। जब आप किसी प्लांट पर क्लिक करते हैं, तो आप देख सकते हैं कि 'e' ईवेंट कैसे कैप्चर किया जाता है। घटना में खुदाई करके देखें कि एक सूचक डाउन घटना द्वारा कितनी जानकारी एकत्र की जाती है!
|
||||||
|
|
||||||
|
इसके बाद, ध्यान दें कि कैसे स्थानीय चर `pos3` और` pos4` को e.clientX पर सेट किया जाता है। आप निरीक्षण फलक में `e` मान पा सकते हैं। ये मान उस समय संयंत्र के x और y निर्देशांक को कैप्चर करते हैं जब आप उस पर क्लिक करते हैं या उसे स्पर्श करते हैं। जब आप क्लिक करते हैं और उन्हें खींचते हैं, तो आपको पौधों के व्यवहार पर ठीक-ठीक नियंत्रण की आवश्यकता होगी, इसलिए आप उनके निर्देशांक पर नज़र रखें।
|
||||||
|
|
||||||
|
✅ क्या यह अधिक स्पष्ट हो रहा है कि इस पूरे ऐप को एक बड़े क्लोजर के साथ क्यों बनाया गया है? यदि यह नहीं था, तो आप 14 ड्रैगेबल पौधों में से प्रत्येक के लिए गुंजाइश कैसे बनाए रखेंगे?
|
||||||
|
|
||||||
|
`pos4 = e.clientY` के तहत दो और पॉइंटर इवेंट जोड़-तोड़ जोड़कर प्रारंभिक कार्य पूरा करें:
|
||||||
|
|
||||||
|
```html
|
||||||
|
document.onpointermove = elementDrag;
|
||||||
|
document.onpointerup = stopElementDrag;
|
||||||
|
```
|
||||||
|
अब आप यह संकेत दे रहे हैं कि आप चाहते हैं कि प्लांट आपको पॉइंटर के साथ-साथ खींचे, और जब आप प्लांट को अचयनित करते हैं, तब उसे रोकने के लिए जेस्चर को खींचे। `onpointermove` और` onpointerup` एक ही API के सभी भाग `onpointerdown` के रूप में हैं। इंटरफ़ेस अब त्रुटियों को फेंक देगा क्योंकि आपने अभी तक `elementDrag` और `stopElementDrag` फ़ंक्शन को परिभाषित नहीं किया है, इसलिए उन लोगों का निर्माण करेंt.
|
||||||
|
|
||||||
|
## elementDrag और stopElementDrag फंगक्शनस
|
||||||
|
|
||||||
|
आप दो और आंतरिक कार्यों को जोड़कर अपने बंद को पूरा करेंगे जो तब होगा जब आप किसी पौधे को खींचते हैं और उसे खींचना बंद कर देंगे। जो व्यवहार आप चाहते हैं, वह यह है कि आप किसी भी समय किसी भी पौधे को खींच सकते हैं और स्क्रीन पर कहीं भी रख सकते हैं। यह इंटरफ़ेस काफी गैर-राय है (उदाहरण के लिए कोई ड्रॉप ज़ोन नहीं है) आपको अपने टेरारियम को ठीक उसी तरह से डिज़ाइन करने की अनुमति देता है, जैसे आप पौधों को जोड़कर, हटाकर और रिपोजिट करके।
|
||||||
|
|
||||||
|
### टास्क
|
||||||
|
|
||||||
|
`PointerDrag` के समापन घुंघराले ब्रैकेट के ठीक बाद `elementDrag` फ़ंक्शन जोड़ें।
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
function elementDrag(e) {
|
||||||
|
pos1 = pos3 - e.clientX;
|
||||||
|
pos2 = pos4 - e.clientY;
|
||||||
|
pos3 = e.clientX;
|
||||||
|
pos4 = e.clientY;
|
||||||
|
console.log(pos1, pos2, pos3, pos4);
|
||||||
|
terrariumElement.style.top = terrariumElement.offsetTop - pos2 + 'px';
|
||||||
|
terrariumElement.style.left = terrariumElement.offsetLeft - pos1 + 'px';
|
||||||
|
}
|
||||||
|
```
|
||||||
|
इस फ़ंक्शन में, आप प्रारंभिक पदों 1-4 का बहुत अधिक संपादन करते हैं जो आप बाहरी फ़ंक्शन में स्थानीय चर के रूप में सेट करते हैं। यहाँ क्या चल रहा है?
|
||||||
|
|
||||||
|
जैसा कि आप खींचते हैं, आप `pos1` को` pos3` (जिसे आप पहले `e.clientX` के रूप में सेट करते हैं) के बराबर करके वर्तमान` e.clientX` मान को पुन: असाइन करते हैं। आप `pos2` के समान ऑपरेशन करते हैं। फिर, आप तत्व के नए X और Y निर्देशांक के लिए `pos3` और `pos4` को रीसेट करते हैं। जैसे ही आप ड्रैग करते हैं आप इन बदलावों को कंसोल में देख सकते हैं। फिर, आप प्लांट की सीएसएस शैली में हेरफेर करते हैं, ताकि पॉज़ के शीर्ष और बाएं एक्स और वाई निर्देशांक की गणना इन नए पदों के साथ तुलना करने के आधार पर `pos1` और `pos2` के नए पदों के आधार पर अपनी नई स्थिति निर्धारित कर सकें।
|
||||||
|
|
||||||
|
> `offsetTop` और `offsetLeft` सीएसएस गुण हैं जो एक तत्व की स्थिति को उसके पेरेंट्स के आधार पर निर्धारित करते हैं; इसका मूल कोई भी तत्व हो सकता है जिसे `static` के रूप में तैनात नहीं किया जाता है।
|
||||||
|
|
||||||
|
स्थिति के इस सभी पुनर्गणना से आपको टेरारियम और उसके पौधों के व्यवहार को ठीक करने की अनुमति मिलती है।
|
||||||
|
|
||||||
|
### टास्क
|
||||||
|
|
||||||
|
इंटरफ़ेस को पूरा करने के लिए अंतिम कार्य `elementDrag` के समापन कर्ली ब्रैकेट के बाद `stopElementDrag` फ़ंक्शन को जोड़ना है:
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
function stopElementDrag() {
|
||||||
|
document.onpointerup = null;
|
||||||
|
document.onpointermove = null;
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
यह छोटा फ़ंक्शन `onpointerup` और `onpointermove` इवेंट्स को रीसेट करता है ताकि आप या तो अपने प्लांट की प्रगति को फिर से खींचना शुरू कर सकें, या एक नए प्लांट को खींचना शुरू कर सकें।
|
||||||
|
|
||||||
|
✅ यदि आप इन घटनाओं को नल करने के लिए सेट नहीं करते हैं तो क्या होगा?
|
||||||
|
|
||||||
|
अब आपने अपना प्रोजेक्ट पूरा कर लिया है!
|
||||||
|
|
||||||
|
🥇बधाई हो! आपने अपना सुंदर टेरारियम पूरा कर लिया है। [समाप्त टेरारियम](./images/terrarium-final.png)
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 🚀चुनौती
|
||||||
|
|
||||||
|
पौधों को कुछ और करने के लिए अपने क्लोशर करने के लिए नया ईवेंट हैंडलर जोड़ें; उदाहरण के लिए, किसी पौधे को सामने लाने के लिए उस पर डबल-क्लिक करें। रचनात्मक हो!
|
||||||
|
|
||||||
|
## व्याख्यान उपरांत प्रश्नोत्तरी
|
||||||
|
|
||||||
|
[व्याख्यान उपरांत प्रश्नोत्तरी](https://nice-beach-0fe9e9d0f.azurestaticapps.net/quiz/20?loc=hi)
|
||||||
|
|
||||||
|
## समीक्षा और स्व अध्ययन
|
||||||
|
|
||||||
|
स्क्रीन के चारों ओर तत्वों को खींचते समय तुच्छ लगता है, ऐसा करने के कई तरीके और कई नुकसान हैं, जो आपके चाहने वाले प्रभाव पर निर्भर करता है। वास्तव में, एक संपूर्ण [ड्रैग एंड ड्रॉप एपीआई](https://developer.mozilla.org/en-US/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) पर सूचक घटनाओं के बारे में अधिक जानकारी प्राप्त करें।
|
||||||
|
|
||||||
|
हमेशा [CanIUse.com] (https://caniuse.com/) का उपयोग करके ब्राउज़र क्षमताओं की जाँच करें।
|
||||||
|
|
||||||
|
## असाइनमेंट
|
||||||
|
|
||||||
|
[DOM के साथ थोड़ा और काम करें](assignment.hi.md)
|
||||||
|
|
||||||
@ -0,0 +1,339 @@
|
|||||||
|
# इवेंट्स का उपयोग करके एक गेम बनाना
|
||||||
|
|
||||||
|
## पूर्व व्याख्यान प्रश्नोत्तरी
|
||||||
|
|
||||||
|
[पूर्व व्याख्यान प्रश्नोत्तरी](https://nice-beach-0fe9e9d0f.azurestaticapps.net/quiz/21?loc=hi)
|
||||||
|
|
||||||
|
## इवेंट संचालित प्रोग्रामिंग
|
||||||
|
|
||||||
|
ब्राउज़र आधारित एप्लिकेशन बनाते समय, हम उपयोगकर्ता के लिए एक ग्राफिकल यूजर इंटरफेस (जीयूआई) प्रदान करते हैं, जो कि हमने जो बनाया है, उसके साथ इंटरैक्ट करने के लिए। ब्राउज़र के साथ बातचीत करने का सबसे आम तरीका विभिन्न तत्वों में क्लिक और टाइपिंग है। एक डेवलपर के रूप में हमारे सामने जो चुनौती है, वह यह है कि हम नहीं जानते कि वे कब इन ऑपरेशनों को करने जा रहे हैं!
|
||||||
|
|
||||||
|
[ईवेंट संचालित प्रोग्रामिंग] (https://en.wikipedia.org/wiki/Event-driven_programming) प्रोग्रामिंग का प्रकार जो हमें अपने GUI को बनाने के लिए करने की आवश्यकता है। यदि हम इस वाक्यांश को थोड़ा तोड़ते हैं, तो हम यहाँ मुख्य शब्द ** ईवेंट ** देखते हैं। [ईवेंट](https://www.merriam-webster.com/dEDIA/event), मरियम-वेबस्टर के अनुसार, "कुछ ऐसा होता है" के रूप में परिभाषित किया गया है। यह हमारी स्थिति का पूरी तरह से वर्णन करता है। हम जानते हैं कि कुछ ऐसा होने जा रहा है जिसके लिए हम प्रतिक्रिया में कुछ कोड निष्पादित करना चाहते हैं, लेकिन हम नहीं जानते कि यह कब होगा।
|
||||||
|
|
||||||
|
जिस तरह से हम कोड के एक भाग को चिह्नित करते हैं जिसे हम निष्पादित करना चाहते हैं वह एक फ़ंक्शन बनाकर है। जब हम [प्रक्रियात्मक प्रोग्रामिंग] (https://en.wikipedia.org/wiki/Procedural_programming) के बारे में सोचते हैं, तो कार्यों को एक विशिष्ट क्रम में बुलाया जाता है। यही बात इवेंट संचालित प्रोग्रामिंग के साथ सही होने वाली है। अंतर **कैसे** कार्यों को कहा जाएगा।
|
||||||
|
|
||||||
|
ईवेंट्स (बटन क्लिकिंग, टाइपिंग आदि) को संभालने के लिए, हम **ईवेंट श्रोताओं** को रजिस्टर करते हैं। एक ईवेंट श्रोता एक ऐसा फंक्शन है जो किसी घटना को होने के लिए सुनता है और प्रतिक्रिया में निष्पादित करता है। इवेंट श्रोता यूआई को अपडेट कर सकते हैं, सर्वर पर कॉल कर सकते हैं, या उपयोगकर्ता की कार्रवाई के जवाब में और कुछ भी किया जा सकता है। हम एक घटना श्रोता को [addEventListener](https://developer.mozilla.org/docs/Web/API/EventTarget/addEventListener) का उपयोग करके, और निष्पादित करने के लिए एक फ़ंक्शन प्रदान करके जोड़ते हैं।
|
||||||
|
|
||||||
|
> **ध्यान दें:** यह ध्यान देने योग्य है कि घटना श्रोताओं को बनाने के कई तरीके हैं। आप अनाम फ़ंक्शंस का उपयोग कर सकते हैं, या नामित नाम बना सकते हैं। आप विभिन्न शॉर्टकट का उपयोग कर सकते हैं, जैसे कि `click` प्रॉपर्टी सेट करना, या `addEventListener` का उपयोग करना। हमारे अभ्यास में हम `addEventLister` और अनाम कार्यों पर ध्यान केंद्रित करने जा रहे हैं, क्योंकि यह संभवतः सबसे आम तकनीक वेब डेवलपर्स का उपयोग है। यह सबसे अधिक लचीली भी है, क्योंकि सभी घटनाओं के लिए `addEventListener` काम करता है, और इवेंट नाम को एक पैरामीटर के रूप में प्रदान किया जा सकता है।
|
||||||
|
|
||||||
|
### आम इवेंट्स
|
||||||
|
|
||||||
|
एप्लिकेशन बनाते समय आपको सुनने के लिए [दर्जनों इवेंट](https://developer.mozilla.org/docs/Web/Events) उपलब्ध हैं। मूल रूप से एक पृष्ठ पर एक उपयोगकर्ता कुछ भी करता है, एक घटना को बढ़ाता है, जो आपको यह सुनिश्चित करने के लिए बहुत शक्ति देता है कि वे आपकी इच्छा का अनुभव प्राप्त करें। सौभाग्य से, आपको आम तौर पर केवल कुछ मुट्ठी भर घटनाओं की आवश्यकता होगी। यहां कुछ सामान्य बातें हैं (दोनों में से एक का उपयोग हम अपने खेल को बनाते समय करेंगे)
|
||||||
|
|
||||||
|
- [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): उपयोगकर्ता कुछ टेक्स्ट इनपुट करता है
|
||||||
|
|
||||||
|
## खेल का निर्माण
|
||||||
|
|
||||||
|
हम जावास्क्रिप्ट में ईवेंट कैसे काम करते हैं, यह जानने के लिए एक गेम बनाने जा रहे हैं। हमारा खेल एक खिलाड़ी के टाइपिंग कौशल का परीक्षण करने जा रहा है, जो सभी डेवलपर्स के पास सबसे कम क्षमता वाले कौशल में से एक है। हम सभी को अपनी टाइपिंग का अभ्यास करना चाहिए! खेल का सामान्य प्रवाह इस तरह दिखेगा:
|
||||||
|
|
||||||
|
- प्लेयर स्टार्ट बटन पर क्लिक करता है और टाइप करने के लिए एक उद्धरण के साथ प्रस्तुत किया जाता है
|
||||||
|
- प्लेयर टेक्स्ट बॉक्स में जितनी जल्दी हो सके उद्धरण टाइप करें
|
||||||
|
- जैसा कि प्रत्येक शब्द पूरा हो गया है, अगले एक को हाइलाइट किया गया है
|
||||||
|
- यदि खिलाड़ी के पास टाइपो है, तो टेक्स्टबॉक्स को लाल रंग में अपडेट किया जाता है
|
||||||
|
- जब खिलाड़ी बोली को पूरा करता है, तो एक सफल संदेश बीते हुए समय के साथ प्रदर्शित होता है
|
||||||
|
|
||||||
|
चलो हमारे खेल का निर्माण करें, और घटनाओं के बारे में जानें!
|
||||||
|
|
||||||
|
### फ़ाइल संरचना
|
||||||
|
|
||||||
|
हमें कुल तीन फ़ाइलों की आवश्यकता है: **index.html**, **script.js** और **style.css**. आइए उन लोगों की स्थापना करके शुरू करें, जो हमारे लिए जीवन को थोड़ा आसान बनाते हैं।
|
||||||
|
|
||||||
|
- कंसोल या टर्मिनल विंडो खोलकर और निम्न आदेश जारी करके अपने काम के लिए एक नया फ़ोल्डर बनाएँ:
|
||||||
|
|
||||||
|
```bash
|
||||||
|
# Linux or macOS
|
||||||
|
mkdir typing-game && cd typing-game
|
||||||
|
|
||||||
|
# Windows
|
||||||
|
md typing-game && cd typing-game
|
||||||
|
```
|
||||||
|
|
||||||
|
- विजुअल स्टूडियो कोड खोलें
|
||||||
|
|
||||||
|
```bash
|
||||||
|
code .
|
||||||
|
```
|
||||||
|
|
||||||
|
- विज़ुअल स्टूडियो कोड के फ़ोल्डर में निम्नलिखित नामों के साथ तीन फाइलें जोड़ें:
|
||||||
|
- index.html
|
||||||
|
- script.js
|
||||||
|
- style.css
|
||||||
|
|
||||||
|
## उपयोगकर्ता इंटरफ़ेस बनाएँ
|
||||||
|
|
||||||
|
यदि हम आवश्यकताओं का पता लगाते हैं, तो हम जानते हैं कि हमें अपने HTML पृष्ठ पर मुट्ठी भर तत्वों की आवश्यकता है। यह एक रेसिपी की तरह है, जहाँ हमें कुछ सामग्री की आवश्यकता होती है:
|
||||||
|
|
||||||
|
- उपयोगकर्ता टाइप करने के लिए बोली प्रदर्शित करने के लिए कहीं
|
||||||
|
- कहीं कोई संदेश प्रदर्शित करने के लिए, जैसे कोई सफलता संदेश
|
||||||
|
- टाइपिंग के लिए एक टेक्स्टबॉक्स
|
||||||
|
- एक स्टार्ट बटन
|
||||||
|
|
||||||
|
उनमें से प्रत्येक को आईडी की आवश्यकता होगी ताकि हम अपने जावास्क्रिप्ट में उनके साथ काम कर सकें। हम सीएसएस और जावास्क्रिप्ट फ़ाइलों के संदर्भ भी जोड़ेंगे जिन्हें हम बनाने जा रहे हैं।
|
||||||
|
|
||||||
|
**index.html** नामक एक नई फ़ाइल बनाएँ। निम्नलिखित HTML जोड़ें:
|
||||||
|
|
||||||
|
```html
|
||||||
|
<!-- inside index.html -->
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<title>Typing game</title>
|
||||||
|
<link rel="stylesheet" href="style.css">
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<h1>Typing game!</h1>
|
||||||
|
<p>Practice your typing skills with a quote from Sherlock Holmes. Click **start** to begin!</p>
|
||||||
|
<p id="quote"></p> <!-- This will display our quote -->
|
||||||
|
<p id="message"></p> <!-- This will display any status messages -->
|
||||||
|
<div>
|
||||||
|
<input type="text" aria-label="current word" id="typed-value" /> <!-- The textbox for typing -->
|
||||||
|
<button type="button" id="start">Start</button> <!-- To start the game -->
|
||||||
|
</div>
|
||||||
|
<script src="script.js"></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
```
|
||||||
|
|
||||||
|
### एप्लिकेशन लॉन्च करें
|
||||||
|
|
||||||
|
यह देखना हमेशा सबसे अच्छा होता है कि कैसे चीजें देखें। चलो हमारे आवेदन का शुभारंभ करें। विजुअल स्टूडियो कोड के लिए एक अद्भुत एक्सटेंशन है जिसे [लाइव सर्वर](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer) कहा जाता है, जो आपके आवेदन को सहेजने और हर बार सहेजने के लिए ब्राउज़र को ताज़ा करेगा।
|
||||||
|
|
||||||
|
- लिंक का पालन करके और **स्थापित** पर क्लिक करके [लाइव सर्वर](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer) स्थापित करें
|
||||||
|
- आपको विज़ुअल स्टूडियो कोड खोलने के लिए ब्राउज़र द्वारा और फिर इंस्टॉलेशन करने के लिए विज़ुअल स्टूडियो कोड द्वारा संकेत दिया जाएगा
|
||||||
|
- संकेत मिलने पर विज़ुअल स्टूडियो कोड को पुनरारंभ करें
|
||||||
|
- विजुअल स्टूडियो कोड में स्थापित होने के बाद, कमांड पलेट खोलने के लिए Ctrl-Shift-P (या Cmd-Shift-P) पर क्लिक करें।
|
||||||
|
- **Live Server: Open with Live Server** लिखे
|
||||||
|
- लाइव सर्वर आपके एप्लिकेशन को होस्ट करना शुरू कर देगा
|
||||||
|
- एक ब्राउज़र खोलें और **https://localhost:5500** पर नेविगेट करें
|
||||||
|
- अब आपको आपके द्वारा बनाया गया पेज देखना चाहिए!
|
||||||
|
|
||||||
|
चलो कुछ कार्यक्षमता जोड़ते हैं।
|
||||||
|
|
||||||
|
## सीएसएस जोड़ें
|
||||||
|
|
||||||
|
हमारे HTML के निर्माण के साथ, मुख्य स्टाइलिंग के लिए CSS जोड़ते हैं। हमें उस शब्द को हाइलाइट करने की आवश्यकता है जो खिलाड़ी को टाइप करना चाहिए, और यदि उन्होंने टाइप किया है तो टेक्स्टबॉक्स को रंगीन करें। हम इसे दो वर्गों के साथ करेंगे।
|
||||||
|
|
||||||
|
**style.css** नाम की एक नई फ़ाइल बनाएं और निम्न सिंटैक्स जोड़ें।
|
||||||
|
|
||||||
|
```css
|
||||||
|
/* inside style.css */
|
||||||
|
.highlight {
|
||||||
|
background-color: yellow;
|
||||||
|
}
|
||||||
|
|
||||||
|
.error {
|
||||||
|
background-color: lightcoral;
|
||||||
|
border: red;
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
✅ जब यह सीएसएस की बात आती है तो आप अपने पेज को लेआउट कर सकते हैं लेकिन आप इसे पसंद कर सकते हैं थोड़ा समय लें और पृष्ठ को अधिक आकर्षक बनाएं:
|
||||||
|
|
||||||
|
- एक अलग फ़ॉन्ट चुनें
|
||||||
|
- हेडर को कलर करें
|
||||||
|
- आइटम का आकार बदलें
|
||||||
|
|
||||||
|
## जावास्क्रिप्ट
|
||||||
|
|
||||||
|
हमारे यूआई के साथ, यह जावास्क्रिप्ट पर हमारा ध्यान केंद्रित करने का समय है जो तर्क प्रदान करेगा। हम इसे मुट्ठी भर चरणों में तोड़ने जा रहे हैं:
|
||||||
|
|
||||||
|
- [स्थिरांक बनाएँ]](#add-the-constants)
|
||||||
|
- [खेल शुरू करने के लिए इवेंट श्रोता](#add-start-logic)
|
||||||
|
- [टाइप करने के लिए ईवेंट श्रोता](#add-typing-logic)
|
||||||
|
|
||||||
|
लेकिन सबसे पहले, **script.js** नामक एक नई फ़ाइल बनाएं।
|
||||||
|
|
||||||
|
### स्थिरांक जोड़ें
|
||||||
|
|
||||||
|
प्रोग्रामिंग के लिए हमारे जीवन को थोड़ा आसान बनाने के लिए हमें कुछ वस्तुओं की आवश्यकता है। फिर, एक नुस्खा के समान, यहाँ हम क्या करेंगे:
|
||||||
|
|
||||||
|
- सभी उद्धरणों की सूची के साथ अरै
|
||||||
|
- वर्तमान बोली के लिए सभी शब्दों को संग्रहीत करने के लिए खाली अरै
|
||||||
|
- खिलाड़ी शब्द के सूचकांक को संग्रहीत करने के लिए स्थान वर्तमान में टाइप कर रहा है
|
||||||
|
- जिस समय खिलाड़ी ने शुरुआत पर क्लिक किया
|
||||||
|
|
||||||
|
हम UI तत्वों के संदर्भ भी चाहते हैं:
|
||||||
|
|
||||||
|
- टेक्सटबॉक्स (**typed-value**)
|
||||||
|
- क्वोट डिस्प्ले (**quote**)
|
||||||
|
- मैसेज (**message**)
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
// inside script.js
|
||||||
|
// all of our quotes
|
||||||
|
const quotes = [
|
||||||
|
'When you have eliminated the impossible, whatever remains, however improbable, must be the truth.',
|
||||||
|
'There is nothing more deceptive than an obvious fact.',
|
||||||
|
'I ought to know by this time that when a fact appears to be opposed to a long train of deductions it invariably proves to be capable of bearing some other interpretation.',
|
||||||
|
'I never make exceptions. An exception disproves the rule.',
|
||||||
|
'What one man can invent another can discover.',
|
||||||
|
'Nothing clears up a case so much as stating it to another person.',
|
||||||
|
'Education never ends, Watson. It is a series of lessons, with the greatest for the last.',
|
||||||
|
];
|
||||||
|
// store the list of words and the index of the word the player is currently typing
|
||||||
|
let words = [];
|
||||||
|
let wordIndex = 0;
|
||||||
|
// the starting time
|
||||||
|
let startTime = Date.now();
|
||||||
|
// page elements
|
||||||
|
const quoteElement = document.getElementById('quote');
|
||||||
|
const messageElement = document.getElementById('message');
|
||||||
|
const typedValueElement = document.getElementById('typed-value');
|
||||||
|
```
|
||||||
|
|
||||||
|
✅ आगे बढ़ो और अपने खेल के लिए अधिक उद्धरण जोड़ें
|
||||||
|
|
||||||
|
> **नोट:** हम तत्वों को पुनः प्राप्त कर सकते हैं जब भी हम `document.getElementById` का उपयोग करके कोड में चाहते हैं। इस तथ्य के कारण कि हम नियमित रूप से इन तत्वों को संदर्भित करने जा रहे हैं, हम स्थिरांक के साथ स्थिरांक का उपयोग करके स्थिरांक से बचने जा रहे हैं। फ्रेमवर्क जैसे कि [Vue.js](https://vuejs.org/) या [रिएक्ट](https://reactjs.org/) आपको अपने कोड को बेहतर बनाने में मदद कर सकते हैं।
|
||||||
|
|
||||||
|
`const`,` let` और `var` का उपयोग करके वीडियो देखने के लिए एक मिनट का समय लें
|
||||||
|
|
||||||
|
[](https://youtube.com/watch?v=JNIXfGiDWM8 "चर के प्रकार")
|
||||||
|
|
||||||
|
> चरों के बारे में वीडियो के लिए ऊपर दी गई छवि पर क्लिक करें।
|
||||||
|
|
||||||
|
### प्रारंभ तर्क जोड़ें
|
||||||
|
|
||||||
|
गेम शुरू करने के लिए, प्लेयर स्टार्ट पर क्लिक करेगा। बेशक, हम नहीं जानते कि वे कब शुरू करने जा रहे हैं। यह वह जगह है जहाँ एक [इवेंट श्रोता](https://developer.mozilla.org/docs/Web/API/EventTarget/addEventListener) खेल में आता है। एक ईवेंट श्रोता हमें कुछ होने (किसी घटना) के लिए सुनने और प्रतिक्रिया में कोड निष्पादित करने की अनुमति देगा। हमारे मामले में, हम उस कोड को निष्पादित करना चाहते हैं जब उपयोगकर्ता प्रारंभ पर क्लिक करता है।
|
||||||
|
|
||||||
|
जब उपयोगकर्ता **प्रारंभ** पर क्लिक करता है, तो हमें एक उद्धरण का चयन करना होगा, उपयोगकर्ता इंटरफ़ेस सेटअप करना और वर्तमान शब्द और समय के लिए सेटअप ट्रैकिंग करना होगा। नीचे दिए गए जावास्क्रिप्ट को आपको जोड़ना होगा; हम स्क्रिप्ट ब्लॉक के ठीक बाद इस पर चर्चा करते हैं।
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
// at the end of script.js
|
||||||
|
document.getElementById('start').addEventListener('click', () => {
|
||||||
|
// get a quote
|
||||||
|
const quoteIndex = Math.floor(Math.random() * quotes.length);
|
||||||
|
const quote = quotes[quoteIndex];
|
||||||
|
// Put the quote into an array of words
|
||||||
|
words = quote.split(' ');
|
||||||
|
// reset the word index for tracking
|
||||||
|
wordIndex = 0;
|
||||||
|
|
||||||
|
// UI updates
|
||||||
|
// Create an array of span elements so we can set a class
|
||||||
|
const spanWords = words.map(function(word) { return `<span>${word} </span>`});
|
||||||
|
// Convert into string and set as innerHTML on quote display
|
||||||
|
quoteElement.innerHTML = spanWords.join('');
|
||||||
|
// Highlight the first word
|
||||||
|
quoteElement.childNodes[0].className = 'highlight';
|
||||||
|
// Clear any prior messages
|
||||||
|
messageElement.innerText = '';
|
||||||
|
|
||||||
|
// Setup the textbox
|
||||||
|
// Clear the textbox
|
||||||
|
typedValueElement.value = '';
|
||||||
|
// set focus
|
||||||
|
typedValueElement.focus();
|
||||||
|
// set the event handler
|
||||||
|
|
||||||
|
// Start the timer
|
||||||
|
startTime = new Date().getTime();
|
||||||
|
});
|
||||||
|
```
|
||||||
|
|
||||||
|
चलो कोड को तोड़ते है
|
||||||
|
|
||||||
|
- ट्रैकिंग शब्द सेट करें
|
||||||
|
- [math.floor](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Math/floor) और [math.random](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Math/random) का उपयोग करके हम `quotes` सरणी से एक उद्धरण का चयन करने के लिए अनुमति देते हैं।
|
||||||
|
- हम `quote` को `words` की एक सरणी में बदलते हैं, इसलिए हम उस खिलाड़ी को ट्रैक कर सकते हैं जो खिलाड़ी वर्तमान में टाइप कर रहा है
|
||||||
|
- `wordIndex` 0 पर सेट है, क्योंकि खिलाड़ी पहले शब्द पर शुरू होगा
|
||||||
|
- यूआई सेटअप करें
|
||||||
|
- `spanWords` की एक सरणी बनाएं, जिसमें `span` तत्व के अंदर प्रत्येक शब्द होता है
|
||||||
|
- यह हमें प्रदर्शन पर शब्द को उजागर करने की अनुमति देगा
|
||||||
|
- एक स्ट्रिंग बनाने के लिए `join` करने के लिए अरै का उपयोग करें जिसे हम `quoteElement` पर `innerHTML` अपडेट करने के लिए उपयोग कर सकते हैं
|
||||||
|
- यह खिलाड़ी को बोली प्रदर्शित करेगा
|
||||||
|
- पीले रंग के रूप में हाइलाइट करने के लिए `highlight` के लिए पहले `span` तत्व का `className` सेट करें
|
||||||
|
- `messageElement` को `''` पर सेट करके `messageElement` को साफ करें
|
||||||
|
- टेक्स्टबॉक्स सेट करें
|
||||||
|
- `typedValueElement` पर वर्तमान `value` को साफ़ करें
|
||||||
|
- `focus` को 'typedValueElement' पर सेट करें
|
||||||
|
- `getTime` कहकर टाइमर शुरू करें
|
||||||
|
|
||||||
|
### टाइपिंग तर्क जोड़ें
|
||||||
|
|
||||||
|
खिलाड़ी के प्रकार के रूप में, एक `input` घटना को उठाया जाएगा। यह ईवेंट श्रोता यह सुनिश्चित करने के लिए जांच करेगा कि खिलाड़ी शब्द को सही ढंग से टाइप कर रहा है, और गेम की वर्तमान स्थिति को संभाल सकता है। **script.js** पर लौटकर, निम्नलिखित कोड को अंत में जोड़ें। हम इसे बाद में तोड़ देंगे।
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
// at the end of script.js
|
||||||
|
typedValueElement.addEventListener('input', () => {
|
||||||
|
// Get the current word
|
||||||
|
const currentWord = words[wordIndex];
|
||||||
|
// get the current value
|
||||||
|
const typedValue = typedValueElement.value;
|
||||||
|
|
||||||
|
if (typedValue === currentWord && wordIndex === words.length - 1) {
|
||||||
|
// end of sentence
|
||||||
|
// Display success
|
||||||
|
const elapsedTime = new Date().getTime() - startTime;
|
||||||
|
const message = `CONGRATULATIONS! You finished in ${elapsedTime / 1000} seconds.`;
|
||||||
|
messageElement.innerText = message;
|
||||||
|
} else if (typedValue.endsWith(' ') && typedValue.trim() === currentWord) {
|
||||||
|
// end of word
|
||||||
|
// clear the typedValueElement for the new word
|
||||||
|
typedValueElement.value = '';
|
||||||
|
// move to the next word
|
||||||
|
wordIndex++;
|
||||||
|
// reset the class name for all elements in quote
|
||||||
|
for (const wordElement of quoteElement.childNodes) {
|
||||||
|
wordElement.className = '';
|
||||||
|
}
|
||||||
|
// highlight the new word
|
||||||
|
quoteElement.childNodes[wordIndex].className = 'highlight';
|
||||||
|
} else if (currentWord.startsWith(typedValue)) {
|
||||||
|
// currently correct
|
||||||
|
// highlight the next word
|
||||||
|
typedValueElement.className = '';
|
||||||
|
} else {
|
||||||
|
// error state
|
||||||
|
typedValueElement.className = 'error';
|
||||||
|
}
|
||||||
|
});
|
||||||
|
```
|
||||||
|
|
||||||
|
कोड को तोड़ दो! हम वर्तमान शब्द को पकड़कर शुरू करते हैं और खिलाड़ी ने इस प्रकार अब तक टाइप किया है। फिर हमारे पास झरना तर्क है, जहां हम जांचते हैं कि क्या उद्धरण पूरा है, शब्द पूरा है, शब्द सही है, या (अंत में), अगर कोई त्रुटि है।
|
||||||
|
|
||||||
|
- उद्धरण पूर्ण है, `typedValue` द्वारा `currentWord` के बराबर होने का संकेत दिया गया है, और `wordIndex` को `words` की `length` से कम के बराबर किया जा रहा है
|
||||||
|
- वर्तमान समय से `startTime` घटाकर` elapsedTime` की गणना करें
|
||||||
|
- मिलीसेकंड से सेकंड में परिवर्तित करने के लिए `elapsedTime` को 1,000 से विभाजित करें
|
||||||
|
- एक सफलता संदेश प्रदर्शित करें
|
||||||
|
- शब्द पूरा हो गया है, जो `typedValue` द्वारा एक स्थान के साथ समाप्त होने का संकेत है (एक शब्द का अंत) और `typedValue` को` currentWord` के बराबर किया जा रहा है
|
||||||
|
- अगले शब्द को टाइप करने की अनुमति देने के लिए `typedElement` to `''` पर `value` सेट करें
|
||||||
|
- वृद्धि `wordIndex` अगले शब्द पर ले जाने के लिए
|
||||||
|
- प्रदर्शन को फिर से प्रदर्शित करने के लिए `className` को `''` के लिए `quoteElement` के सभी `childNodes` के माध्यम से लूप करें
|
||||||
|
- वर्तमान शब्द के `className` को टाइप करने के लिए अगले शब्द के रूप में फ़्लैग करने के लिए `highlight` पर सेट करें
|
||||||
|
- वर्तमान में शब्द सही ढंग से टाइप किया गया है (लेकिन पूरा नहीं), `currentWord` द्वारा इंगित `typedValue` से शुरू हुआ
|
||||||
|
- सुनिश्चित करें कि `typeNalueElement` को `className` को क्लीयर करके डिफ़ॉल्ट के रूप में प्रदर्शित किया गया है
|
||||||
|
- यदि हमने इसे दूर किया है, तो हमारे पास एक त्रुटि है
|
||||||
|
- `className` पर `typedValueElement` से `error` सेट करे
|
||||||
|
|
||||||
|
## अपने ऐप्लकैशनको टेसेट करे
|
||||||
|
|
||||||
|
आपने इसे अंत तक बना दिया है! अंतिम चरण हमारे आवेदन कार्यों को सुनिश्चित करना है। इसे आजमा कर देखें! अगर वहाँ त्रुटियां हैं तो चिंता न करें; **सभी डेवलपर्स** में त्रुटियां हैं। संदेशों की जांच करें और आवश्यकतानुसार डिबग करें।
|
||||||
|
|
||||||
|
**start** पर क्लिक करें, और दूर टाइप करना शुरू करें! यह हमें पहले देखे गए एनीमेशन की तरह दिखना चाहिए।
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 🚀 चुनौती
|
||||||
|
|
||||||
|
अधिक कार्यक्षमता जोड़ें
|
||||||
|
|
||||||
|
- पूर्ण होने पर `input` ईवेंट श्रोता को अक्षम करें, और बटन पर क्लिक करने पर इसे फिर से सक्षम करें
|
||||||
|
- खिलाड़ी द्वारा बोली पूरा करने पर टेक्स्टबॉक्स को अक्षम करें
|
||||||
|
- सफलता संदेश के साथ एक मॉडल संवाद बॉक्स प्रदर्शित करें
|
||||||
|
- [localStorage](https://developer.mozilla.org/docs/Web/API/Window/localStorage) का उपयोग करके उच्च स्कोर स्टोर करें
|
||||||
|
|
||||||
|
## व्याख्यान उपरांत प्रश्नोत्तरी
|
||||||
|
|
||||||
|
[व्याख्यान उपरांत प्रश्नोत्तरी](https://nice-beach-0fe9e9d0f.azurestaticapps.net/quiz/22?loc=hi)
|
||||||
|
|
||||||
|
## समीक्षा और स्व अध्ययन
|
||||||
|
|
||||||
|
वेब ब्राउज़र के माध्यम से डेवलपर के लिए [उपलब्ध सभी घटनाओं](https://developer.mozilla.org/en-US/docs/Web/Events) को पढ़ें, और उन परिदृश्यों पर विचार करें जिनमें आप प्रत्येक का उपयोग करेंगे।
|
||||||
|
|
||||||
|
## असाइनमेंट
|
||||||
|
|
||||||
|
[एक नया कीबोर्ड गेम बनाए](assignment.hi.md)
|
||||||
@ -0,0 +1,12 @@
|
|||||||
|
# एक नया कीबोर्ड गेम बनाएं
|
||||||
|
|
||||||
|
## अनुदेश
|
||||||
|
|
||||||
|
एक छोटा गेम बनाएं जो कार्यों को करने के लिए कीबोर्ड इवेंट का उपयोग करता है। यह एक अलग तरह का टाइपिंग गेम या एक आर्ट टाइप गेम हो सकता है जो कि कीस्ट्रोक पर स्क्रीन के लिए पिक्सल को पेंट करता है। रचनात्मक हो!
|
||||||
|
|
||||||
|
## शीर्ष
|
||||||
|
|
||||||
|
| मानदंड | उदाहरणात्मक | पर्याप्त | सुधार की जरूरत |
|
||||||
|
| -------- | ------------------------ | ------------------------ | ----------------- |
|
||||||
|
| | एक पूर्ण खेल प्रस्तुत किया गया है | खेल बहुत कम है | खेल में बगस हैं |
|
||||||
|
| |
|
||||||
@ -0,0 +1,168 @@
|
|||||||
|
# ब्राउज़र एक्सटेंशन प्रोजेक्ट पार्ट 1: ब्राउज़रों के बारे में सभी
|
||||||
|
|
||||||
|
|
||||||
|
> स्केचनोट [वसीम चैघाम](https://dev.to/wassimchegham/ever-wondered-what-happens-when-you-type-in-a-url-in-an-address-bar-in-a-browser-3dob) द्वारा
|
||||||
|
|
||||||
|
## पूर्व व्याख्यान प्रश्नोत्तरी
|
||||||
|
|
||||||
|
[पूर्व व्याख्यान प्रश्नोत्तरी](https://nice-beach-0fe9e9d0f.azurestaticapps.net/quiz/23?loc=hi)
|
||||||
|
|
||||||
|
### परिचय
|
||||||
|
|
||||||
|
ब्राउज़र एक्सटेंशन ब्राउज़र में अतिरिक्त कार्यक्षमता जोड़ते हैं। लेकिन इससे पहले कि आप एक निर्माण करें, आपको थोड़ा सीखना चाहिए कि ब्राउज़र कैसे अपना काम करते हैं।
|
||||||
|
|
||||||
|
### ब्राउजरके बारे मे
|
||||||
|
|
||||||
|
पाठों की इस श्रृंखला में, आप सीखेंगे कि एक ब्राउज़र एक्सटेंशन कैसे बनाया जाए जो क्रोम, फ़ायरफ़ॉक्स और एज ब्राउज़र पर काम करेगा। इस भाग में, आपको पता चलेगा कि ब्राउज़र कैसे काम करते हैं और ब्राउज़र एक्सटेंशन के तत्वों को मचान बनाते हैं।
|
||||||
|
|
||||||
|
लेकिन वास्तव में एक ब्राउज़र क्या है? यह एक सॉफ्टवेयर एप्लिकेशन है जो एक अंतिम उपयोगकर्ता को सर्वर से सामग्री का उपयोग करने और इसे वेब पेजों पर प्रदर्शित करने की अनुमति देता है।
|
||||||
|
|
||||||
|
✅ थोड़ा इतिहास: पहला ब्राउज़र 'वर्ल्डवाइडवेब' कहलाता था और 1990 में सर टिमोथी बर्नर्स-ली द्वारा बनाया गया था।
|
||||||
|
|
||||||
|
|
||||||
|
> थोड़ी शुरुआती ब्राउजर , [Karen McGrane](https://www.slideshare.net/KMcGrane/week-4-ixd-history-personal-computing) द्वारा
|
||||||
|
|
||||||
|
जब कोई उपयोगकर्ता URL (यूनिफ़ॉर्म रिसोर्स लोकेटर) पते का उपयोग करके इंटरनेट से जुड़ा होता है, तो आमतौर पर एक `http` या `https` पते के माध्यम से हाइपरटेक्स्ट ट्रांसफर प्रोटोकॉल का उपयोग करते हुए, ब्राउज़र एक वेब सर्वर के साथ संचार करता है और एक वेब पेज प्राप्त करता है।
|
||||||
|
|
||||||
|
इस बिंदु पर, ब्राउज़र का रेंडरिंग इंजन इसे उपयोगकर्ता के डिवाइस पर प्रदर्शित करता है, जो मोबाइल फोन, डेस्कटॉप या लैपटॉप हो सकता है।
|
||||||
|
|
||||||
|
ब्राउज़रों के पास सामग्री को कैश करने की क्षमता भी होती है ताकि इसे हर बार सर्वर से पुनर्प्राप्त न करना पड़े। वे उपयोगकर्ता की ब्राउज़िंग गतिविधि के इतिहास को रिकॉर्ड कर सकते हैं, 'कुकीज़' को स्टोर कर सकते हैं, जो डेटा के छोटे टुकड़े हैं जिसमें उपयोगकर्ता की गतिविधि को संग्रहीत करने के लिए उपयोग की जाने वाली जानकारी होती है, और बहुत कुछ।
|
||||||
|
|
||||||
|
ब्राउज़रों के बारे में याद रखने वाली एक महत्वपूर्ण बात यह है कि वे सभी समान नहीं हैं! प्रत्येक ब्राउज़र की अपनी ताकत और कमजोरियां होती हैं, और एक पेशेवर वेब डेवलपर को यह समझने की आवश्यकता होती है कि वेब पेजों को अच्छी तरह से क्रॉस-ब्राउज़र कैसे करें। इसमें मोबाइल फोन जैसे छोटे व्यूपोर्ट को संभालना शामिल है, साथ ही एक उपयोगकर्ता जो ऑफ़लाइन है।
|
||||||
|
|
||||||
|
वास्तव में एक उपयोगी वेबसाइट जिसे आपको संभवतः उस ब्राउज़र में बुकमार्क करना चाहिए जिसे आप उपयोग करना चाहते हैं [caniuse.com](https://www.caniuse.com)। जब आप वेब पेज बना रहे होते हैं, तो कैनुएज़ की समर्थित तकनीकों की सूचियों का उपयोग करना बहुत मददगार होता है ताकि आप अपने उपयोगकर्ताओं का सर्वोत्तम समर्थन कर सकें।
|
||||||
|
|
||||||
|
✅ आप कैसे बता सकते हैं कि आपकी वेब साइट के उपयोगकर्ता आधार के साथ कौन से ब्राउज़र सबसे लोकप्रिय हैं? अपने एनालिटिक्स की जाँच करें - आप अपनी वेब डेवलपमेंट प्रक्रिया के हिस्से के रूप में विभिन्न एनालिटिक्स पैकेज स्थापित कर सकते हैं, और वे आपको बताएंगे कि विभिन्न लोकप्रिय ब्राउज़रों द्वारा ब्राउज़रों का सबसे अधिक उपयोग क्या किया जाता है।
|
||||||
|
|
||||||
|
## ब्राउजर इक्स्टेन्शन
|
||||||
|
|
||||||
|
आप ब्राउज़र एक्सटेंशन क्यों बनाना चाहेंगे? जब आप उन कार्यों तक त्वरित पहुँच की आवश्यकता होती है, जिन्हें आप दोहराना चाहते हैं, तो आपके ब्राउज़र से जुड़ना एक आसान बात है। उदाहरण के लिए, यदि आप अपने आप को विभिन्न वेब पृष्ठों पर रंगों की जांच करने की आवश्यकता महसूस करते हैं, जिनके साथ आप बातचीत करते हैं, तो आप एक रंग-पिकर ब्राउज़र एक्सटेंशन स्थापित कर सकते हैं। यदि आपको पासवर्ड याद रखने में समस्या है, तो आप पासवर्ड-प्रबंधन ब्राउज़र एक्सटेंशन का उपयोग कर सकते हैं।
|
||||||
|
|
||||||
|
ब्राउज़र एक्सटेंशन को विकसित करने में बहुत मज़ा आता है। वे उन कार्यों की एक सीमित संख्या का प्रबंधन करते हैं जो वे अच्छा प्रदर्शन करते हैं।
|
||||||
|
|
||||||
|
✅ आपके पसंदीदा ब्राउज़र एक्सटेंशन क्या हैं? वे कौन से कार्य करते हैं?
|
||||||
|
|
||||||
|
### एक्सटेंशन स्थापित करना
|
||||||
|
|
||||||
|
निर्माण शुरू करने से पहले, एक ब्राउज़र एक्सटेंशन के निर्माण और तैनाती की प्रक्रिया पर एक नज़र डालें। हालांकि प्रत्येक ब्राउज़र इस कार्य को प्रबंधित करने के तरीके में थोड़ा भिन्न होता है, प्रक्रिया Chrome और फ़ायरफ़ॉक्स पर इस उदाहरण के समान है एज पर:
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
संक्षेप में, प्रक्रिया होगी:
|
||||||
|
|
||||||
|
- `npm run build` के साथ अपना इक्स्टेन्शन बनाए
|
||||||
|
- शीर्ष पर दाईं ओर "Settings and more" बटन (`... 'आइकन) का उपयोग करके एक्सटेंशन फलक में ब्राउज़र में नेविगेट करें
|
||||||
|
- यदि यह एक नया इंस्टॉलेशन है, तो इसके बिल्ड फोल्डर से एक नया एक्सटेंशन अपलोड करने के लिए `load unpacked` चुनें (हमारे मामले में यह `/dist`) है
|
||||||
|
- या, यदि आप पहले से स्थापित एक्सटेंशन को पुनः लोड कर रहे हैं तो `reload` पर क्लिक करें
|
||||||
|
|
||||||
|
ये निर्देश आपके द्वारा बनाए गए एक्सटेंशन से संबंधित हैं; प्रत्येक ब्राउज़र से जुड़े ब्राउज़र एक्सटेंशन स्टोर पर जारी किए गए एक्सटेंशन को स्थापित करने के लिए, आपको उन [स्टोर](https://microsoftedge.microsoft.com/addons/Microsoft-Edge-Extensions-Home) पर नेविगेट करना चाहिए और अपनी पसंद का एक्सटेंशन इंस्टॉल करना चाहिए।
|
||||||
|
|
||||||
|
### शुरू हो जाओ
|
||||||
|
|
||||||
|
आप एक ऐसे ब्राउज़र एक्सटेंशन का निर्माण करने जा रहे हैं जो आपके क्षेत्र के कार्बन पदचिह्न को प्रदर्शित करता है, जो आपके क्षेत्र के ऊर्जा उपयोग और ऊर्जा के स्रोत को दर्शाता है। एक्सटेंशन में एक फ़ॉर्म होगा जो एपीआई की एकत्र करता है ताकि आप एक्सेस कर सकें
|
||||||
|
CO2 सिग्नल की एपीआई।
|
||||||
|
|
||||||
|
**आपको चाहिए:**
|
||||||
|
|
||||||
|
- [एज एपीआई की](https://www.co2signal.com/); इस पृष्ठ पर बॉक्स में अपना ईमेल दर्ज करें और एक आपको भेजा जाएगा
|
||||||
|
- [अपने क्षेत्र के लिए कोड](http://api.electricitymap.org/v3/zones) [विद्युत मानचित्र](https://www.electricitymap.org/map) के अनुरूप (बोस्टन में, उदाहरण के लिए, I) 'US-NEISO' का उपयोग करें)।
|
||||||
|
- [स्टार्टर कोड](../start)। `start` फ़ोल्डर डाउनलोड करें; आप इस फ़ोल्डर में कोड पूरा कर लेंगे।
|
||||||
|
- [एनपीएम](https://www.npmjs.com) -एनपीएम एक पैकेज प्रबंधन उपकरण है; इसे स्थानीय रूप से स्थापित करें और आपके वेब एसेट द्वारा उपयोग के लिए `package.json` फ़ाइल में सूचीबद्ध पैकेज इंस्टॉल किए जाएंगे
|
||||||
|
|
||||||
|
✅ इस [उत्कृष्ट लर्न मॉड्यूल](https://docs.microsoft.com/learn/modules/create-nodejs-project-dependencies/?WT.mc_id=academic-13441-cxa) में पैकेज प्रबंधन के बारे में अधिक जानें
|
||||||
|
|
||||||
|
कोडबेस के माध्यम से देखने के लिए एक मिनट लें:
|
||||||
|
|
||||||
|
dist
|
||||||
|
-|manifest.json (डिफ़ॉल्ट यहा सेट करे)
|
||||||
|
-|index.html (फ्रंट-एंड HTML मार्कअप यहाँ)
|
||||||
|
-|background.js (पृष्ठभूमि JS यहाँ)
|
||||||
|
-|main.js (बिलट JS)
|
||||||
|
src
|
||||||
|
-|index.js (आपका JS कोड यहा जाता है)
|
||||||
|
|
||||||
|
✅ एक बार जब आपके पास आपकी एपीआई की और क्षेत्र कोड काम आ जाए, तो भविष्य में उपयोग के लिए उन्हें किसी नोट में स्टोर करें।
|
||||||
|
|
||||||
|
### एक्सटेंशन के लिए HTML बनाएँ
|
||||||
|
|
||||||
|
इस विस्तार के दो विचार हैं। एपीआई की और क्षेत्र कोड इकट्ठा करने के लिए एक:
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
और क्षेत्र के कार्बन उपयोग को प्रदर्शित करने वाला दूसरा:
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
आइए एचटीएमएल के निर्माण के लिए फॉर्म के साथ शुरुआत करें और इसे सीएसएस के साथ स्टाइल करें।
|
||||||
|
|
||||||
|
`/dist` फ़ोल्डर में, आप एक फॉर्म और एक परिणाम क्षेत्र का निर्माण करेंगे। `index.html` फ़ाइल में, परिसीमित प्रपत्र क्षेत्र को आबाद करें:
|
||||||
|
|
||||||
|
```HTML
|
||||||
|
<form class="form-data" autocomplete="on">
|
||||||
|
<div>
|
||||||
|
<h2>New? Add your Information</h2>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<label for="region">Region Name</label>
|
||||||
|
<input type="text" id="region" required class="region-name" />
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<label for="api">Your API Key from tmrow</label>
|
||||||
|
<input type="text" id="api" required class="api-key" />
|
||||||
|
</div>
|
||||||
|
<button class="search-btn">Submit</button>
|
||||||
|
</form>
|
||||||
|
```
|
||||||
|
यह वह रूप है जहां आपकी सहेजी गई जानकारी इनपुट होगी और स्थानीय संग्रहण में सहेजी जाएगी।
|
||||||
|
|
||||||
|
अगला, परिणाम क्षेत्र बनाएं; अंतिम फॉर्म टैग के तहत, कुछ divs जोड़ें:
|
||||||
|
|
||||||
|
```HTML
|
||||||
|
<div class="result">
|
||||||
|
<div class="loading">loading...</div>
|
||||||
|
<div class="errors"></div>
|
||||||
|
<div class="data"></div>
|
||||||
|
<div class="result-container">
|
||||||
|
<p><strong>Region: </strong><span class="my-region"></span></p>
|
||||||
|
<p><strong>Carbon Usage: </strong><span class="carbon-usage"></span></p>
|
||||||
|
<p><strong>Fossil Fuel Percentage: </strong><span class="fossil-fuel"></span></p>
|
||||||
|
</div>
|
||||||
|
<button class="clear-btn">Change region</button>
|
||||||
|
</div>
|
||||||
|
```
|
||||||
|
इस बिंदु पर, आप एक निर्माण की कोशिश कर सकते हैं। इस एक्सटेंशन के पैकेज निर्भरता को स्थापित करना सुनिश्चित करें:
|
||||||
|
|
||||||
|
```
|
||||||
|
npm install
|
||||||
|
```
|
||||||
|
|
||||||
|
यह कमांड आपके एक्सटेंशन के निर्माण की प्रक्रिया के लिए वेबपैक स्थापित करने के लिए, npm पैकेज मैनेजर का उपयोग करेगा। वेबपैक एक बंडल है जो संकलन कोड को संभालता है। आप इस प्रक्रिया के आउटपुट को `/dist/main.js` में देखकर देख सकते हैं - आप देख सकते हैं कि कोड को बंडल कर दिया गया है।
|
||||||
|
|
||||||
|
अभी के लिए, एक्सटेंशन का निर्माण होना चाहिए और, यदि आप इसे एज में एक्सटेंशन के रूप में तैनात करते हैं, तो आपको एक फॉर्म बड़े करीने से दिखाई देगा।
|
||||||
|
|
||||||
|
बधाई हो, आपने ब्राउज़र एक्सटेंशन बनाने की दिशा में पहला कदम उठाया है। बाद के पाठों में, आप इसे और अधिक कार्यात्मक और उपयोगी बनाएंगे।
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 🚀 चुनौती
|
||||||
|
|
||||||
|
ब्राउज़र एक्सटेंशन स्टोर पर एक नज़र डालें और अपने ब्राउज़र में एक इंस्टॉल करें। आप इसकी फाइलों को दिलचस्प तरीके से जांच सकते हैं। तुम क्या खोजते हो?
|
||||||
|
|
||||||
|
## व्याख्यान उपरांत प्रश्नोत्तरी
|
||||||
|
|
||||||
|
[व्याख्यान उपरांत प्रश्नोत्तरी](https://nice-beach-0fe9e9d0f.azurestaticapps.net/quiz/24?loc=hi)
|
||||||
|
|
||||||
|
## समीक्षा और स्व अध्ययन
|
||||||
|
|
||||||
|
इस पाठ में आपने वेब ब्राउज़र के इतिहास के बारे में थोड़ा सीखा; वर्ल्ड वाइड वेब के अन्वेषकों ने इसके इतिहास के बारे में और अधिक पढ़कर इसका उपयोग कैसे किया, इसके बारे में जानने का यह अवसर लें। कुछ उपयोगी साइटों में शामिल हैं:
|
||||||
|
|
||||||
|
[वेब ब्राउजर का इतिहास](https://www.mozilla.org/firefox/browsers/browser-history/)
|
||||||
|
|
||||||
|
[वेब का इतिहास](https://webfoundation.org/about/vision/history-of-the-web/)
|
||||||
|
|
||||||
|
[टिम बर्नर्स-ली के साथ एक इंटरव्यू](https://www.theguardian.com/technology/2019/mar/12/tim-berners-lee-on-30-years-of-the-web-if-we-dream-a-little-we-can-get-the-web-we-want)
|
||||||
|
|
||||||
|
## असाइनमेंट
|
||||||
|
|
||||||
|
[अपने इक्स्टेन्शन को रीस्टाइल करें](assignment.hi.md)
|
||||||
|
|
||||||
@ -0,0 +1,224 @@
|
|||||||
|
# ब्राउज़र एक्सटेंशन प्रोजेक्ट पार्ट 2: एक एपीआई को कॉल करें, स्थानीय भंडारण का उपयोग करें
|
||||||
|
|
||||||
|
## पूर्व व्याख्यान प्रश्नोत्तरी
|
||||||
|
|
||||||
|
[पूर्व व्याख्यान प्रश्नोत्तरी](https://nice-beach-0fe9e9d0f.azurestaticapps.net/quiz/25?loc=hi)
|
||||||
|
|
||||||
|
### परिचय
|
||||||
|
|
||||||
|
इस पाठ में, आप अपने ब्राउज़र एक्सटेंशन के फ़ॉर्म को सबमिट करके एक एपीआई कॉल करेंगे और अपने ब्राउज़र एक्सटेंशन में परिणाम प्रदर्शित करेंगे। इसके अलावा, आप भविष्य के संदर्भ और उपयोग के लिए अपने ब्राउज़र के स्थानीय भंडारण में डेटा कैसे संग्रहीत कर सकते हैं, इसके बारे में जानेंगे।
|
||||||
|
|
||||||
|
✅ अपना कोड कहां रखना है, यह जानने के लिए उपयुक्त फाइलों में क्रमांकित खंडों का पालन करें
|
||||||
|
|
||||||
|
### एक्सटेंशन में हेरफेर करने के लिए तत्वों को सेट करें:
|
||||||
|
|
||||||
|
इस समय तक आपने अपने ब्राउज़र एक्सटेंशन के लिए फॉर्म और <div> के लिए HTML बना लिया है। अब से, आपको `/src/index.js` फ़ाइल में काम करना होगा और बिट द्वारा अपना एक्सटेंशन बिट बनाना होगा। अपनी परियोजना स्थापित करने और निर्माण की प्रक्रिया पर [पिछले पाठ](../../1-about-browsers/translations/README.hi.md) देखें।
|
||||||
|
|
||||||
|
अपने `index.js` फ़ाइल में काम करना, विभिन्न क्षेत्रों से जुड़े मूल्यों को धारण करने के लिए कुछ `const` चर बनाकर शुरू करें:
|
||||||
|
|
||||||
|
```JavaScript
|
||||||
|
// form fields
|
||||||
|
const form = document.querySelector('.form-data');
|
||||||
|
const region = document.querySelector('.region-name');
|
||||||
|
const apiKey = document.querySelector('.api-key');
|
||||||
|
|
||||||
|
// results
|
||||||
|
const errors = document.querySelector('.errors');
|
||||||
|
const loading = document.querySelector('.loading');
|
||||||
|
const results = document.querySelector('.result-container');
|
||||||
|
const usage = document.querySelector('.carbon-usage');
|
||||||
|
const fossilfuel = document.querySelector('.fossil-fuel');
|
||||||
|
const myregion = document.querySelector('.my-region');
|
||||||
|
const clearBtn = document.querySelector('.clear-btn');
|
||||||
|
```
|
||||||
|
|
||||||
|
इन सभी क्षेत्रों को उनके सीएसएस वर्ग द्वारा संदर्भित किया जाता है, जैसा कि आपने इसे पिछले पाठ में HTML में सेट किया था।
|
||||||
|
|
||||||
|
### लिस्टेनेर जोड़े
|
||||||
|
|
||||||
|
इसके बाद, ईवेंट श्रोताओं को फ़ॉर्म और स्पष्ट बटन में जोड़ें, जो फ़ॉर्म को रीसेट करता है, ताकि यदि कोई उपयोगकर्ता फ़ॉर्म को सबमिट करता है या उस रीसेट बटन को क्लिक करता है, तो कुछ घटित होगा, और फ़ाइल के निचले भाग में ऐप को आरंभीकृत करने के लिए कॉल जोड़ें:
|
||||||
|
|
||||||
|
```JavaScript
|
||||||
|
form.addEventListener('submit', (e) => handleSubmit(e));
|
||||||
|
clearBtn.addEventListener('click', (e) => reset(e));
|
||||||
|
init();
|
||||||
|
```
|
||||||
|
|
||||||
|
✅ ध्यान दें कि शॉर्टहैंड एक सबमिट या क्लिक करने के लिए सुनने के लिए प्रयोग किया जाता है, और यह कैसे घटना को हैंडल या रीसेट कार्यों के लिए पारित किया जाता है। क्या आप इस शॉर्टहैंड के बराबर लंबे प्रारूप में लिख सकते हैं? आप क्या पसंद करेंगे?
|
||||||
|
|
||||||
|
### Init() फ़ंक्शन और reset() फ़ंक्शन का निर्माण करें:
|
||||||
|
|
||||||
|
अब आप उस फ़ंक्शन का निर्माण करने जा रहे हैं जो एक्सटेंशन को इनिशियलाइज़ करता है, जिसे init() कहा जाता है:
|
||||||
|
|
||||||
|
```JavaScript
|
||||||
|
function init() {
|
||||||
|
//if anything is in localStorage, pick it up
|
||||||
|
const storedApiKey = localStorage.getItem('apiKey');
|
||||||
|
const storedRegion = localStorage.getItem('regionName');
|
||||||
|
|
||||||
|
//set icon to be generic green
|
||||||
|
//todo
|
||||||
|
|
||||||
|
if (storedApiKey === null || storedRegion === null) {
|
||||||
|
//if we don't have the keys, show the form
|
||||||
|
form.style.display = 'block';
|
||||||
|
results.style.display = 'none';
|
||||||
|
loading.style.display = 'none';
|
||||||
|
clearBtn.style.display = 'none';
|
||||||
|
errors.textContent = '';
|
||||||
|
} else {
|
||||||
|
//if we have saved keys/regions in localStorage, show results when they load
|
||||||
|
displayCarbonUsage(storedApiKey, storedRegion);
|
||||||
|
results.style.display = 'none';
|
||||||
|
form.style.display = 'none';
|
||||||
|
clearBtn.style.display = 'block';
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
function reset(e) {
|
||||||
|
e.preventDefault();
|
||||||
|
//clear local storage for region only
|
||||||
|
localStorage.removeItem('regionName');
|
||||||
|
init();
|
||||||
|
}
|
||||||
|
|
||||||
|
```
|
||||||
|
इस फ़ंक्शन में, कुछ दिलचस्प तर्क है। इसके माध्यम से पढ़ना, क्या आप देख सकते हैं कि क्या होता है?
|
||||||
|
|
||||||
|
- यदि उपयोगकर्ता ने APIKey और क्षेत्र कोड को स्थानीय संग्रहण में संग्रहीत किया है, तो यह जांचने के लिए दो `const` लगाए गए हैं।
|
||||||
|
- यदि उनमें से कोई भी नल है, तो अपनी शैली को 'ब्लॉक' के रूप में प्रदर्शित करने के लिए रूप बदलकर दिखाएं
|
||||||
|
- रिजल्ट, लोडिंग और clearBtn को छिपाएं और किसी भी एरर टेक्स्ट को खाली स्ट्रिंग पर सेट करें
|
||||||
|
- यदि कोई की और क्षेत्र मौजूद है, तो एक दिनचर्या शुरू करें:
|
||||||
|
- कार्बन उपयोग डेटा प्राप्त करने के लिए एपीआई को कॉल करें
|
||||||
|
- परिणाम क्षेत्र छिपाएँ
|
||||||
|
- फॉर्म को छिपाएं
|
||||||
|
- रीसेट बटन दिखाएं
|
||||||
|
|
||||||
|
आगे बढ़ने से पहले, ब्राउज़रों में उपलब्ध एक बहुत ही महत्वपूर्ण अवधारणा के बारे में सीखना उपयोगी है: [लोकलस्टोरेज](https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage).लोकलस्टोरेज, ब्राउज़र में स्ट्रिंगस को 'की-वैल्यू' पेयर के रूप में स्टोर करने का एक उपयोगी तरीका है। इस प्रकार के वेब स्टोरेज को ब्राउजर में डेटा को मैनेज करने के लिए जावास्क्रिप्ट द्वारा मैनिपुलेट किया जा सकता है। लोकलस्टोरीज की समय सीमा समाप्त नहीं होती है, जबकि ब्राउजर के बंद होने पर एक अन्य तरह का वेब स्टोरेज, स्टोरेज साफ हो जाता है। विभिन्न प्रकार के भंडारण में उनके उपयोग के पक्ष और विपक्ष हैं।
|
||||||
|
|
||||||
|
> नोट - आपके ब्राउज़र एक्सटेंशन का अपना स्थानीय भंडारण है; मुख्य ब्राउज़र विंडो एक अलग उदाहरण है और अलग-अलग व्यवहार करता है।
|
||||||
|
|
||||||
|
उदाहरण के लिए, आपने अपने APIKey को एक स्ट्रिंग मान दिया है, और आप देख सकते हैं कि यह एज पर "एक वेब पेज का निरीक्षण" (आप एक ब्राउज़र का निरीक्षण करने के लिए राइट-क्लिक कर सकते हैं) पर सेट है और एप्लिकेशन टैब पर जाकर भंडारण देख सकते हैं।
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
✅ उन स्थितियों के बारे में सोचें जहां आप लोकलस्टोरेज में कुछ डेटा स्टोर नहीं करना चाहेंगे। सामान्य तौर पर, लोकलस्टेज में एपीआई कीज रखना एक बुरा विचार है! क्या आप देख सकते हैं क्यों? हमारे मामले में, चूंकि हमारा ऐप विशुद्ध रूप से सीखने के लिए है और ऐप स्टोर में तैनात नहीं किया जाएगा, इसलिए हम इस पद्धति का उपयोग करेंगे।
|
||||||
|
|
||||||
|
ध्यान दें कि आप लोकलस्टोरेज में हेरफेर करने के लिए वेब एपीआई का उपयोग करते हैं, या तो `getItem()`, `setItem()` या `removeItem()` का उपयोग करके। यह ब्राउज़रों में व्यापक रूप से समर्थित है।
|
||||||
|
|
||||||
|
`DisplayCarbonUsage()` फ़ंक्शन का निर्माण करने से पहले जिसे `init()` कहा जाता है, चलो प्रारंभिक फॉर्म सबमिशन को संभालने के लिए कार्यक्षमता का निर्माण करते हैं।
|
||||||
|
|
||||||
|
### फॉर्म सबमिट करें
|
||||||
|
|
||||||
|
एक फ़ंक्शन बनाएं जिसे `handleSubmit` कहा जाता है जो एक ईवेंट तर्क `(e)` को स्वीकार करता है । ईवेंट को प्रचार करने से रोकें (इस मामले में, हम ब्राउज़र को रिफ्रेश होने से रोकना चाहते हैं) और एक नया फ़ंक्शन, `setUpUser`, तर्कों में गुजरते हुए `apiKey.value` और `region.value` को कॉल करें। इस प्रकार, आप उन दो मानों का उपयोग करते हैं, जो प्रारंभिक फ़ील्ड के माध्यम से लाए जाते हैं जब उपयुक्त फ़ील्ड पॉपुलेट किए जाते हैं।
|
||||||
|
|
||||||
|
```JavaScript
|
||||||
|
function handleSubmit(e) {
|
||||||
|
e.preventDefault();
|
||||||
|
setUpUser(apiKey.value, region.value);
|
||||||
|
}
|
||||||
|
```
|
||||||
|
✅ अपनी मेमोरी को रीफ़्रेश करें - आपने अंतिम पाठ में जो HTML सेट किया है, उसमें दो इनपुट फ़ील्ड हैं, जिनके `value` को फ़ाइल के शीर्ष पर स्थापित किए गए `const` के माध्यम से कैप्चर किया गया है, और वे दोनों `required` हैं, इसलिए ब्राउज़र उपयोगकर्ताओं को रोकता है शून्य मानों को इनपुट करने से।
|
||||||
|
|
||||||
|
### उपयोगकर्ता सेट करें
|
||||||
|
|
||||||
|
`SetUpUser` फ़ंक्शन पर चलते हुए, यहां वह स्थान है जहां आप apiKey और क्षेत्रनाम के लिए स्थानीय संग्रहण मान सेट करते हैं। एक नया फ़ंक्शन जोड़ें:
|
||||||
|
|
||||||
|
```JavaScript
|
||||||
|
function setUpUser(apiKey, regionName) {
|
||||||
|
localStorage.setItem('apiKey', apiKey);
|
||||||
|
localStorage.setItem('regionName', regionName);
|
||||||
|
loading.style.display = 'block';
|
||||||
|
errors.textContent = '';
|
||||||
|
clearBtn.style.display = 'block';
|
||||||
|
//make initial call
|
||||||
|
displayCarbonUsage(apiKey, regionName);
|
||||||
|
}
|
||||||
|
```
|
||||||
|
यह फ़ंक्शन API को दिखाने के लिए एक लोडिंग संदेश सेट करता है। इस बिंदु पर, आप इस ब्राउज़र एक्सटेंशन के सबसे महत्वपूर्ण कार्य को बनाने पर पहुंचे हैं!
|
||||||
|
|
||||||
|
### कार्बन उपयोग प्रदर्शित करें
|
||||||
|
|
||||||
|
अंत में यह एपीआई क्वेरी करने का समय है!
|
||||||
|
|
||||||
|
आगे जाने से पहले, हमें एपीआई पर चर्चा करनी चाहिए। एपीआई, या [एप्लीकेशन प्रोग्रामिंग इंटरफेस] (https://www.webopedia.com/TERM/A/API.html), वेब डेवलपर के टूलबॉक्स का एक महत्वपूर्ण तत्व है। वे एक दूसरे के साथ बातचीत और इंटरफ़ेस करने के लिए कार्यक्रमों के लिए मानक तरीके प्रदान करते हैं। उदाहरण के लिए, यदि आप एक वेब साइट का निर्माण कर रहे हैं, जिसे डेटाबेस से क्वेरी करने की आवश्यकता है, तो किसी ने आपके उपयोग के लिए एक एपीआई बनाया होगा। जबकि कई प्रकार के API हैं, जिनमें से एक सबसे लोकप्रिय है [REST API](https://www.smashingmagazine.com/2018/01/understanding-use-rest-api/)
|
||||||
|
|
||||||
|
✅ 'REST' शब्द 'Representational State Transfer' के लिए है और इसमें डेटा लाने के लिए विभिन्न कॉन्फ़िगर किए गए URL का उपयोग करने की सुविधा है। डेवलपर्स के लिए उपलब्ध विभिन्न प्रकार के एपीआई पर थोड़ा शोध करें। क्या प्रारूप आपको अपील करता है?
|
||||||
|
|
||||||
|
इस फ़ंक्शन के बारे में ध्यान देने योग्य महत्वपूर्ण बातें हैं। पहले [`async` कीवर्ड](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/async_function) को नोटिस करें। अपने कार्यों को लिखना ताकि वे अतुल्यकालिक रूप से चलाते हैं इसका मतलब है कि वे एक कार्रवाई की प्रतीक्षा करते हैं, जैसे डेटा लौटाए जाने से पहले, पूरा होने से पहले।
|
||||||
|
|
||||||
|
यहाँ `async` के बारे में एक त्वरित वीडियो है:
|
||||||
|
|
||||||
|
[](https://youtube.com/watch?v=YwmlRkrxvkk "promises के प्रबंधन के लिए Async और Await")
|
||||||
|
|
||||||
|
> Async/wait के वीडियो के लिए ऊपर दी गई छवि पर क्लिक करें।
|
||||||
|
|
||||||
|
C02Signal API को क्वेरी करने के लिए एक नया फ़ंक्शन बनाएँ:
|
||||||
|
|
||||||
|
```JavaScript
|
||||||
|
import axios from '../node_modules/axios';
|
||||||
|
|
||||||
|
async function displayCarbonUsage(apiKey, region) {
|
||||||
|
try {
|
||||||
|
await axios
|
||||||
|
.get('https://api.co2signal.com/v1/latest', {
|
||||||
|
params: {
|
||||||
|
countryCode: region,
|
||||||
|
},
|
||||||
|
headers: {
|
||||||
|
'auth-token': apiKey,
|
||||||
|
},
|
||||||
|
})
|
||||||
|
.then((response) => {
|
||||||
|
let CO2 = Math.floor(response.data.data.carbonIntensity);
|
||||||
|
|
||||||
|
//calculateColor(CO2);
|
||||||
|
|
||||||
|
loading.style.display = 'none';
|
||||||
|
form.style.display = 'none';
|
||||||
|
myregion.textContent = region;
|
||||||
|
usage.textContent =
|
||||||
|
Math.round(response.data.data.carbonIntensity) + ' grams (grams C02 emitted per kilowatt hour)';
|
||||||
|
fossilfuel.textContent =
|
||||||
|
response.data.data.fossilFuelPercentage.toFixed(2) +
|
||||||
|
'% (percentage of fossil fuels used to generate electricity)';
|
||||||
|
results.style.display = 'block';
|
||||||
|
});
|
||||||
|
} catch (error) {
|
||||||
|
console.log(error);
|
||||||
|
loading.style.display = 'none';
|
||||||
|
results.style.display = 'none';
|
||||||
|
errors.textContent = 'Sorry, we have no data for the region you have requested.';
|
||||||
|
}
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
यह एक बड़ा फंगक्शन है। यहाँ क्या चल रहा है?
|
||||||
|
|
||||||
|
- सर्वोत्तम कार्यप्रणालियों का पालन करते हुए, आप इस फ़ंक्शन का उपयोग करने के लिए एक `async` कीवर्ड का उपयोग करते हैं। फ़ंक्शन में एक `try/catch` ब्लॉक होता है क्योंकि यह एक वादा लौटाएगा जब एपीआई डेटा लौटाएगा। चूँकि आपके पास उस गति पर नियंत्रण नहीं है जो एपीआई प्रतिक्रिया देगा (यह प्रतिक्रिया नहीं दे सकता है!), आपको इस अनिश्चितता को असंगत रूप से कॉल करने की आवश्यकता है।
|
||||||
|
- आप अपने API की का उपयोग करके अपने क्षेत्र का डेटा प्राप्त करने के लिए co2signal API की क्वेरी कर रहे हैं। उस की का उपयोग करने के लिए, आपको अपने हेडर मापदंडों में एक प्रकार के प्रमाणीकरण का उपयोग करना होगा।
|
||||||
|
- एपीआई के जवाब देने के बाद, आप इस डेटा को दिखाने के लिए अपने स्क्रीन के कुछ हिस्सों में इसके रिस्पॉन्स डेटा के विभिन्न तत्वों को असाइन करते हैं।
|
||||||
|
- यदि कोई त्रुटि है, या कोई परिणाम नहीं है, तो आप एक त्रुटि संदेश दिखाते हैं।
|
||||||
|
|
||||||
|
✅ Asyncronous प्रोग्रामिंग पैटर्न का उपयोग करना आपके टूलबॉक्स में एक और बहुत उपयोगी उपकरण है। [विभिन्न तरीकों के बारे में](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/async_function) पढ़ें आप इस प्रकार के कोड को कॉन्फ़िगर कर सकते हैं।
|
||||||
|
|
||||||
|
बधाई हो! यदि आप अपना एक्सटेंशन बनाते हैं (`npm run build`) और इसे अपने एक्सटेंशन पेन में रिफ्रेश करें, तो आपके पास काम करने का एक्सटेंशन है! केवल एक चीज जो काम नहीं कर रही है वह आइकन है, और आप इसे अगले पाठ में ठीक कर देंगे।
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 🚀 चुनौती
|
||||||
|
|
||||||
|
हमने इन पाठों में अब तक कई प्रकार के एपीआई पर चर्चा की है। एक वेब एपीआई चुनें और गहराई से शोध करें कि यह क्या प्रदान करता है। उदाहरण के लिए, [HTML ड्रैग एंड ड्रॉप एपीआई](https://developer.mozilla.org/en-US/docs/Web/API/HTML_Drag_and_Drop_API) जैसे ब्राउज़रों के भीतर उपलब्ध एपीआई पर एक नज़र डालें। आपकी राय में एक महान एपीआई क्या है?
|
||||||
|
|
||||||
|
## व्याख्यान उपरांत प्रश्नोत्तरी
|
||||||
|
|
||||||
|
[व्याख्यान उपरांत प्रश्नोत्तरी](https://nice-beach-0fe9e9d0f.azurestaticapps.net/quiz/26?loc=hi)
|
||||||
|
|
||||||
|
## समीक्षा और स्व अध्ययन
|
||||||
|
|
||||||
|
आपने इस पाठ में लोकलस्टोरेज और एपीआई के बारे में सीखा, दोनों पेशेवर वेब डेवलपर के लिए बहुत उपयोगी हैं। क्या आप सोच सकते हैं कि ये दोनों चीजें एक साथ कैसे काम करती हैं? इस बारे में सोचें कि आप एक वेब साइट को कैसे आर्किटेक्ट करेंगे जो एक एपीआई द्वारा उपयोग की जाने वाली वस्तुओं को संग्रहीत करेगी।
|
||||||
|
|
||||||
|
## असाइनमेंट
|
||||||
|
|
||||||
|
[एक एपीआई अपनाएं](assignment.hi.md)
|
||||||
|
|
||||||
@ -0,0 +1,161 @@
|
|||||||
|
# ब्राउज़र एक्सटेंशन प्रोजेक्ट पार्ट 3: पृष्ठभूमि कार्य और प्रदर्शन के बारे में जानें
|
||||||
|
|
||||||
|
## पूर्व व्याख्यान प्रश्नोत्तरी
|
||||||
|
|
||||||
|
[पूर्व व्याख्यान प्रश्नोत्तरी](https://nice-beach-0fe9e9d0f.azurestaticapps.net/quiz/27?loc=hi)
|
||||||
|
|
||||||
|
### परिचय
|
||||||
|
|
||||||
|
इस मॉड्यूल के अंतिम दो पाठों में, आपने सीखा कि एपीआई से प्राप्त डेटा के लिए एक फॉर्म और डिस्प्ले क्षेत्र कैसे बनाया जाए। यह वेब पर वेब उपस्थिति बनाने का एक बहुत ही मानक तरीका है। आपने यह भी सीखा कि कैसे डेटा को असंगत रूप से संभालना है। आपका ब्राउज़र एक्सटेंशन लगभग पूरा हो चुका है।
|
||||||
|
|
||||||
|
यह कुछ पृष्ठभूमि कार्यों को प्रबंधित करने के लिए बना हुआ है, जिसमें एक्सटेंशन के आइकन का रंग ताज़ा करना शामिल है, इसलिए यह इस बारे में बात करने का एक शानदार समय है कि ब्राउज़र इस तरह के कार्य का प्रबंधन कैसे करता है। आइए इन ब्राउज़र कार्यों के बारे में अपनी वेब परिसंपत्तियों के प्रदर्शन के संदर्भ में सोचते हैं क्योंकि आप इन्हें बनाते हैं।
|
||||||
|
|
||||||
|
## वेब प्रदर्शन मूल बातें
|
||||||
|
|
||||||
|
> "वेबसाइट का प्रदर्शन दो चीजों के बारे में है: पेज कितनी तेजी से लोड होता है, और उस पर कोड कितनी तेजी से चलता है।" -- [जैक ग्रॉसबरत](https://www.smashingmagazine.com/2012/06/javascript-profiling-chrome-developer-tools/)
|
||||||
|
|
||||||
|
सभी प्रकार की स्थितियों में, सभी प्रकार के उपयोगकर्ताओं के लिए, आपकी वेब साइटों को सभी प्रकार के उपकरणों पर तेज़ी से तेज़ बनाने का विषय, बहुत ही विशाल है। यहां कुछ बिंदुओं को ध्यान में रखा जाता है क्योंकि आप या तो एक मानक वेब परियोजना या एक ब्राउज़र एक्सटेंशन का निर्माण करते हैं।
|
||||||
|
|
||||||
|
अपनी साइट को कुशलतापूर्वक चलाने के लिए सबसे पहले आपको यह सुनिश्चित करने की आवश्यकता है कि उसके प्रदर्शन के बारे में डेटा इकट्ठा किया जाए। ऐसा करने का पहला स्थान आपके वेब ब्राउज़र के डेवलपर टूल में है।. एज में, आप "Settings and more" बटन (ब्राउज़र के शीर्ष दाईं ओर तीन डॉट्स आइकन) का चयन कर सकते हैं, फिर More Tools> Developer Tools पर नेविगेट करें और प्रदर्शन टैब खोलें। आप विंडोज पर कीबोर्ड शॉर्टकट `Ctrl` +` शिफ्ट` + `I` या मैक पर डेवलपर विकल्प खोलने के लिए `Option` + `Command` +` I` का भी उपयोग कर सकते हैं।
|
||||||
|
|
||||||
|
प्रदर्शन टैब में एक प्रोफ़ाइल उपकरण होता है। एक वेब साइट खोलें (उदाहरण के लिए, https://www.microsoft.com) और 'Record' बटन पर क्लिक करें, फिर साइट को रीफ़्रेश करें। किसी भी समय रिकॉर्डिंग बंद कर दें, और आप साइट को 'स्क्रिप्ट', 'रेंडर' और 'पेंट' से उत्पन्न रूटीन को देख पाएंगे:
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
✅ किनारे पर प्रदर्शन पैनल पर [Microsoft दस्तावेज़ीकरण](https://docs.microsoft.com/en-us/microsoft-edge/devtools-guide/performance?WT.mc_id=academy-13441-cxa) पर जाएँ
|
||||||
|
|
||||||
|
> युक्ति: अपनी वेब साइट के स्टार्टअप समय का सही पठन करने के लिए, अपने ब्राउज़र का कैश साफ़ करें
|
||||||
|
|
||||||
|
आपके पृष्ठ लोड होने पर होने वाली घटनाओं को ज़ूम करने के लिए प्रोफ़ाइल समयरेखा के तत्वों का चयन करें।
|
||||||
|
|
||||||
|
प्रोफ़ाइल टाइमलाइन के एक भाग का चयन करके और सारांश फलक को देखकर अपने पृष्ठ के प्रदर्शन का एक स्नैपशॉट प्राप्त करें:
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
यह देखने के लिए कि क्या कोई घटना 15 ms से अधिक समय की नहीं है, इवेंट लॉग फलक की जाँच करें:
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
✅ अपने प्रोफाइलर को जाने! इस साइट पर डेवलपर टूल खोलें और देखें कि क्या कोई अड़चन है। सबसे धीमी गति से लोड होने वाली ऐसेट क्या है? सबसे तेज?
|
||||||
|
|
||||||
|
## प्रोफाइल की जाँच
|
||||||
|
|
||||||
|
सामान्य तौर पर कुछ "समस्या वाले क्षेत्र" होते हैं, जो हर वेब डेवलपर को साइट बनाते समय देखना चाहिए, ताकि उत्पादन में तैनात होने के समय बुरा आश्चर्य न हो।
|
||||||
|
|
||||||
|
**एसेट आकार**: पिछले कुछ वर्षों में वेब 'भारी' हो गया है, और इस तरह धीमा है। इस वजन का कुछ छवियों के उपयोग के साथ क्या करना है।
|
||||||
|
|
||||||
|
✅ पृष्ठ भार और अधिक के ऐतिहासिक दृश्य के लिए [इंटरनेट आर्काइव](https://httparchive.org/reports/page-weight) देखें।
|
||||||
|
|
||||||
|
एक अच्छा अभ्यास यह सुनिश्चित करना है कि आपकी छवियों को अनुकूलित किया जाए, आपके उपयोगकर्ताओं के लिए सही आकार और रिज़ॉल्यूशन पर वितरित किया जाए।
|
||||||
|
|
||||||
|
**DOM ट्रैवर्सल्स**: ब्राउज़र को आपके द्वारा लिखे गए कोड के आधार पर अपने डॉक्यूमेंट ऑब्जेक्ट मॉडल का निर्माण करना होता है, इसलिए यह आपके टैग को कम से कम रखने के लिए अच्छे पेज प्रदर्शन के हित में है, केवल पेज का उपयोग करके और स्टाइल करके। इस बिंदु पर, एक पृष्ठ से जुड़े अतिरिक्त सीएसएस को अनुकूलित किया जा सकता है; उदाहरण के लिए, केवल एक पृष्ठ पर उपयोग की जाने वाली शैलियों को मुख्य शैली पत्रक में शामिल करने की आवश्यकता नहीं है।
|
||||||
|
|
||||||
|
**जावास्क्रिप्ट**: Eबहुत ही जावास्क्रिप्ट डेवलपर को 'रेंडर-ब्लॉकिंग' स्क्रिप्ट्स को देखना चाहिए, जिन्हें बाकी डोम से पहले लोड किया जाना चाहिए और उन्हें ब्राउजर में चित्रित किया जा सकता है। अपनी इनलाइन स्क्रिप्ट के साथ `defer` का उपयोग करने पर विचार करें (जैसा कि टेरारियम मॉड्यूल में किया जाता है)।
|
||||||
|
|
||||||
|
✅ साइट के प्रदर्शन को निर्धारित करने के लिए की जाने वाली सामान्य जाँचों के बारे में अधिक जानने के लिए [साइट स्पीड टेस्ट वेबसाइट](https://www.webpagetest.org/) पर कुछ साइटों को आज़माएँ।
|
||||||
|
|
||||||
|
अब जब आपके पास यह विचार है कि ब्राउज़र आपके द्वारा भेजी जाने वाली संपत्ति को कैसे प्रदान करता है, तो आइए आखिरी कुछ चीजों पर गौर करें जिन्हें आपको अपने विस्तार को पूरा करने के लिए करना है:
|
||||||
|
|
||||||
|
### रंग की गणना करने के लिए एक फ़ंक्शन बनाएं
|
||||||
|
|
||||||
|
`/src/index.js` में कार्य करना,` const` वैरिएबल की श्रृंखला के बाद `calculateColor()` नामक एक फंक्शन जोड़ें, जिससे आप DOM तक पहुँच प्राप्त कर सकते हैं:
|
||||||
|
|
||||||
|
```JavaScript
|
||||||
|
function calculateColor(value) {
|
||||||
|
let co2Scale = [0, 150, 600, 750, 800];
|
||||||
|
let colors = ['#2AA364', '#F5EB4D', '#9E4229', '#381D02', '#381D02'];
|
||||||
|
|
||||||
|
let closestNum = co2Scale.sort((a, b) => {
|
||||||
|
return Math.abs(a - value) - Math.abs(b - value);
|
||||||
|
})[0];
|
||||||
|
console.log(value + ' is closest to ' + closestNum);
|
||||||
|
let num = (element) => element > closestNum;
|
||||||
|
let scaleIndex = co2Scale.findIndex(num);
|
||||||
|
|
||||||
|
let closestColor = colors[scaleIndex];
|
||||||
|
console.log(scaleIndex, closestColor);
|
||||||
|
|
||||||
|
chrome.runtime.sendMessage({ action: 'updateIcon', value: { color: closestColor } });
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
यहाँ क्या चल रहा है? आप पिछले पाठ में पूर्ण की गई एपीआई कॉल से एक मूल्य (कार्बन की तीव्रता) में पास होते हैं, और फिर आप गणना करते हैं कि रंगों के सरणी में प्रस्तुत सूचकांक के लिए इसका मूल्य कितना करीब है। फिर आप उस निकटतम रंग मान को क्रोम रनटाइम पर भेजते हैं।
|
||||||
|
|
||||||
|
Chrome.runtime में [एपीआई](https://developer.chrome.com/extensions/runtime) है जो सभी प्रकार के पृष्ठभूमि कार्यों को संभालता है, और आपका एक्सटेंशन इसका लाभ उठा रहा है:
|
||||||
|
|
||||||
|
> "पृष्ठभूमि पृष्ठ को पुनः प्राप्त करने के लिए chrome.runtime API का उपयोग करें, प्रकट के बारे में विवरण लौटाएं, और ऐप या एक्सटेंशन जीवनचक्र में घटनाओं के लिए सुनें और जवाब दें। आप URL के सापेक्ष पथ को पूरी तरह से योग्य URL में बदलने के लिए भी इस API का उपयोग कर सकते हैं।"
|
||||||
|
|
||||||
|
✅ यदि आप एज के लिए इस ब्राउज़र एक्सटेंशन को विकसित कर रहे हैं, तो यह आपको आश्चर्यचकित कर सकता है कि आप क्रोम एपीआई का उपयोग कर रहे हैं। नया एज ब्राउज़र संस्करण क्रोमियम ब्राउज़र इंजन पर चलता है, जिससे आप इन उपकरणों का लाभ उठा सकते हैं।
|
||||||
|
|
||||||
|
> ध्यान दें, यदि आप किसी ब्राउज़र एक्सटेंशन को प्रोफाइल करना चाहते हैं, तो एक्सटेंशन के भीतर से dev टूल लॉन्च करें, क्योंकि यह उसका अपना अलग ब्राउज़र उदाहरण है।
|
||||||
|
|
||||||
|
### एक डिफ़ॉल्ट आइकन रंग सेट करें
|
||||||
|
|
||||||
|
अब, `init()`फंक्शन में, आइकॉन को फिर से क्रोम के `updateIcon` एक्शन को कॉल करके शुरू करने के लिए जेनेरिक ग्रीन होने के लिए सेट करें:
|
||||||
|
|
||||||
|
```JavaScript
|
||||||
|
chrome.runtime.sendMessage({
|
||||||
|
action: 'updateIcon',
|
||||||
|
value: {
|
||||||
|
color: 'green',
|
||||||
|
},
|
||||||
|
});
|
||||||
|
```
|
||||||
|
### फ़ंक्शन को कॉल करें, कॉल निष्पादित करें
|
||||||
|
|
||||||
|
इसके बाद, उस फ़ंक्शन को कॉल करें जिसे आपने C02Signal API द्वारा दिए गए वादे से जोड़कर बनाया है:
|
||||||
|
|
||||||
|
```JavaScript
|
||||||
|
//let CO2...
|
||||||
|
calculateColor(CO2);
|
||||||
|
```
|
||||||
|
|
||||||
|
और अंत में, `/dist/background.js` में, इन बैकग्राउंड एक्शन कॉल के लिए श्रोता जोड़ें:
|
||||||
|
|
||||||
|
```JavaScript
|
||||||
|
chrome.runtime.onMessage.addListener(function (msg, sender, sendResponse) {
|
||||||
|
if (msg.action === 'updateIcon') {
|
||||||
|
chrome.browserAction.setIcon({ imageData: drawIcon(msg.value) });
|
||||||
|
}
|
||||||
|
});
|
||||||
|
//borrowed from energy lollipop extension, nice feature!
|
||||||
|
function drawIcon(value) {
|
||||||
|
let canvas = document.createElement('canvas');
|
||||||
|
let context = canvas.getContext('2d');
|
||||||
|
|
||||||
|
context.beginPath();
|
||||||
|
context.fillStyle = value.color;
|
||||||
|
context.arc(100, 100, 50, 0, 2 * Math.PI);
|
||||||
|
context.fill();
|
||||||
|
|
||||||
|
return context.getImageData(50, 50, 100, 100);
|
||||||
|
}
|
||||||
|
```
|
||||||
|
इस कोड में, आप बैकएंड टास्क मैनेजर में आने वाले किसी भी संदेश के लिए श्रोता जोड़ रहे हैं। यदि इसे 'अपडेटआईकॉन' कहा जाता है, तो अगला कोड चलाया जाता है, कैनवस एपीआई का उपयोग करके उचित रंग का एक आइकन खींचने के लिए।
|
||||||
|
|
||||||
|
✅ आप [अंतरिक्ष खेल के पाठों](../../../6-space-game/2-drawing-to-canvas/translations/README.hi.md) में कैनवस एपीआई के बारे में अधिक जानेंगे
|
||||||
|
|
||||||
|
आप स्पेस जीएनओ में कैनवस एपीआई के बारे में अधिक जानेंगे, अपने एक्सटेंशन का पुनर्निर्माण करेंगे (`npm run build`), अपने एक्सटेंशन को रीफ्रेश और लॉन्च करें, और रंग परिवर्तन देखें। क्या यह गलत काम चलाने या बर्तन धोने का अच्छा समय है? अब आप जानते हैं!
|
||||||
|
|
||||||
|
बधाई हो, आपने एक उपयोगी ब्राउज़र एक्सटेंशन बनाया है और इस बारे में अधिक जानकारी प्राप्त की है कि ब्राउज़र कैसे काम करता है और इसके प्रदर्शन को कैसे प्रोफाइल करता है।
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 🚀 चुनौती
|
||||||
|
|
||||||
|
कुछ ओपन सोर्स वेब साइटों की जांच करें जो बहुत पहले से हैं, और, उनके GitHub इतिहास के आधार पर, देखें कि क्या आप यह निर्धारित कर सकते हैं कि प्रदर्शन के लिए वे वर्षों में कैसे अनुकूलित किए गए थे, यदि बिल्कुल। सबसे आम दर्द बिंदु क्या है?
|
||||||
|
|
||||||
|
## व्याख्यान उपरांत प्रश्नोत्तरी
|
||||||
|
|
||||||
|
[व्याख्यान उपरांत प्रश्नोत्तरी](https://nice-beach-0fe9e9d0f.azurestaticapps.net/quiz/28?loc=hi)
|
||||||
|
|
||||||
|
## समीक्षा और स्व अध्ययन
|
||||||
|
|
||||||
|
[प्रदर्शन न्यूज़लेटर](https://perf.email/) के लिए साइन अप करने पर विचार करें
|
||||||
|
|
||||||
|
कुछ ऐसे तरीकों की जाँच करें जो ब्राउज़र अपने वेब टूल में प्रदर्शन टैब के माध्यम से वेब प्रदर्शन को गेज करते हैं। क्या आपको कोई बड़ा अंतर लगता है?
|
||||||
|
|
||||||
|
## असाइनमेंट
|
||||||
|
|
||||||
|
[प्रदर्शन के लिए एक साइट का विश्लेषण करें](assignment.hi.md)
|
||||||
|
|
||||||
@ -0,0 +1,304 @@
|
|||||||
|
# एक वेब ऐप में बैंकिंग ऐप पार्ट 1: HTML टेम्प्लेट और रूट बनाएं
|
||||||
|
|
||||||
|
## पूर्व व्याख्यान प्रश्नोत्तरी
|
||||||
|
|
||||||
|
[पूर्व व्याख्यान प्रश्नोत्तरी](https://nice-beach-0fe9e9d0f.azurestaticapps.net/quiz/41?loc=hi)
|
||||||
|
|
||||||
|
### परिचय
|
||||||
|
|
||||||
|
ब्राउज़रों में जावास्क्रिप्ट के आगमन के बाद से, वेबसाइटें पहले से कहीं अधिक इंटरैक्टिव और जटिल होती जा रही हैं। वेब प्रौद्योगिकियों का अब आमतौर पर पूरी तरह कार्यात्मक अनुप्रयोग बनाने के लिए उपयोग किया जाता है जो सीधे एक ब्राउज़र में चलता है जिसे हम [वेब एप्लिकेशन](https://en.wikipedia.org/wiki/Web_application) कहते हैं। चूंकि वेब ऐप्स अत्यधिक संवादात्मक हैं, इसलिए उपयोगकर्ता हर बार किसी क्रिया के पूरा होने तक पूर्ण पृष्ठ पुनः लोड होने की प्रतीक्षा नहीं करना चाहते हैं। यही कारण है कि एक चिकनी उपयोगकर्ता अनुभव प्रदान करने के लिए जावास्क्रिप्ट का उपयोग सीधे डोम का उपयोग करके HTML को अपडेट करने के लिए किया जाता है।
|
||||||
|
|
||||||
|
इस पाठ में, हम बैंक वेब ऐप बनाने के लिए नींव रखने जा रहे हैं, HTML टेम्प्लेट का उपयोग करके ऐसी कई स्क्रीन बना सकते हैं जिन्हें प्रदर्शित किया जा सकता है और पूरे HTML पृष्ठ को फिर से लोड किए बिना अपडेट किया जा सकता है।
|
||||||
|
|
||||||
|
### शर्त
|
||||||
|
|
||||||
|
इस पाठ में हमारे द्वारा बनाए गए वेब ऐप का परीक्षण करने के लिए आपको एक स्थानीय वेब सर्वर की आवश्यकता होगी। यदि आपके पास एक नहीं है, तो आप [Node.js](https://nodejs.org) को स्थापित कर सकते हैं और अपने प्रोजेक्ट फ़ोल्डर से कमांड `npx lite-server` का उपयोग कर सकते हैं। यह एक स्थानीय वेब सर्वर बनाएगा और आपके ऐप को एक ब्राउज़र में खोलेगा।
|
||||||
|
|
||||||
|
### तैयारी
|
||||||
|
|
||||||
|
अपने कंप्यूटर पर, उसके अंदर `index.html` नामक फ़ाइल के साथ `bank` नामक एक फ़ोल्डर बनाएँ। हम इस HTML [boilerplate](https://en.wikipedia.org/wiki/Boilerplate_code) से शुरू करेंगे :
|
||||||
|
|
||||||
|
```html
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>Bank App</title>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<!-- This is where you'll work -->
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
```
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## HTML टेम्पलेट
|
||||||
|
|
||||||
|
यदि आप एक वेब पेज के लिए कई स्क्रीन बनाना चाहते हैं, तो एक समाधान यह होगा कि आप जिस भी स्क्रीन को दिखाना चाहते हैं, उसके लिए एक HTML फाइल बनाई जाए। हालाँकि, यह समाधान कुछ असुविधा के साथ आता है:
|
||||||
|
|
||||||
|
- आपको स्क्रीन स्विच करते समय पूरे HTML को फिर से लोड करना होगा, जो धीमा हो सकता है।
|
||||||
|
- विभिन्न स्क्रीन के बीच डेटा साझा करना मुश्किल है।
|
||||||
|
|
||||||
|
एक अन्य दृष्टिकोण में केवल एक HTML फ़ाइल है, और `<template>` तत्व का उपयोग करके कई [HTML टेम्पलेट्स](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/template) को परिभाषित करें। एक टेम्पलेट एक पुन: प्रयोज्य HTML ब्लॉक है जो ब्राउज़र द्वारा प्रदर्शित नहीं किया जाता है, और जावास्क्रिप्ट का उपयोग करके रनटाइम पर तत्काल किया जाना चाहिए।
|
||||||
|
|
||||||
|
### टास्क
|
||||||
|
|
||||||
|
हम दो स्क्रीन के साथ एक बैंक ऐप बनाएंगे: लॉगिन पेज और डैशबोर्ड। सबसे पहले, एचटीएमएल बॉडी में एक प्लेसहोल्डर तत्व जोड़ें, जिसका उपयोग हम अपने ऐप की विभिन्न स्क्रीन को इंस्टेंट करने के लिए करेंगे:
|
||||||
|
|
||||||
|
```html
|
||||||
|
<div id="app">Loading...</div>
|
||||||
|
```
|
||||||
|
|
||||||
|
हम इसे एक `id` दे रहे हैं ताकि बाद में इसे जावास्क्रिप्ट के साथ ढूंढना आसान हो सके।
|
||||||
|
|
||||||
|
> युक्ति: चूंकि इस तत्व की सामग्री को बदल दिया जाएगा, हम एक लोडिंग संदेश या संकेतक में डाल सकते हैं जो ऐप लोड होने के दौरान दिखाया जाएगा।
|
||||||
|
|
||||||
|
अगला, लॉगिन पृष्ठ के लिए HTML टेम्पलेट के नीचे जोड़ें। अभी के लिए हम केवल एक शीर्षक और एक अनुभाग रखेंगे जिसमें एक लिंक होगा जिसका उपयोग हम नेविगेशन करने के लिए करेंगे।
|
||||||
|
|
||||||
|
```html
|
||||||
|
<template id="login">
|
||||||
|
<h1>Bank App</h1>
|
||||||
|
<section>
|
||||||
|
<a href="/dashboard">Login</a>
|
||||||
|
</section>
|
||||||
|
</template>
|
||||||
|
```
|
||||||
|
|
||||||
|
फिर हम डैशबोर्ड पृष्ठ के लिए एक और HTML टेम्पलेट जोड़ेंगे। इस पृष्ठ में विभिन्न अनुभाग होंगे:
|
||||||
|
|
||||||
|
- शीर्षक के साथ हैडर और लॉगआउट लिंक
|
||||||
|
- बैंक खाते का वर्तमान संतुलन
|
||||||
|
- लेनदेन की एक सूची, एक तालिका में प्रदर्शित
|
||||||
|
|
||||||
|
```html
|
||||||
|
<template id="dashboard">
|
||||||
|
<header>
|
||||||
|
<h1>Bank App</h1>
|
||||||
|
<a href="/login">Logout</a>
|
||||||
|
</header>
|
||||||
|
<section>
|
||||||
|
Balance: 100$
|
||||||
|
</section>
|
||||||
|
<section>
|
||||||
|
<h2>Transactions</h2>
|
||||||
|
<table>
|
||||||
|
<thead>
|
||||||
|
<tr>
|
||||||
|
<th>Date</th>
|
||||||
|
<th>Object</th>
|
||||||
|
<th>Amount</th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody></tbody>
|
||||||
|
</table>
|
||||||
|
</section>
|
||||||
|
</template>
|
||||||
|
```
|
||||||
|
|
||||||
|
> युक्ति: HTML टेम्प्लेट बनाते समय, यदि आप यह देखना चाहते हैं कि यह कैसा दिखेगा, तो आप `<template>` और `</template>` लाइनों को `<!-- -->` के साथ संलग्न करके टिप्पणी कर सकते हैं।
|
||||||
|
|
||||||
|
✅ आपको क्या लगता है कि हम टेम्प्लेट पर `id` विशेषताओं का उपयोग क्यों करते हैं? क्या हम कक्षाओं की तरह कुछ और उपयोग कर सकते हैं?
|
||||||
|
|
||||||
|
## जावास्क्रिप्ट के साथ टेम्पलेट्स प्रदर्शित करना
|
||||||
|
|
||||||
|
यदि आप अपनी वर्तमान 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) का उपयोग करके।
|
||||||
|
|
||||||
|
✅ DOM को संलग्न करने से पहले हमें टेम्प्लेट को क्लोन करने की आवश्यकता क्यों है? आपको क्या लगता है कि अगर हम इस कदम को छोड़ देते तो क्या होता?
|
||||||
|
|
||||||
|
### टास्क
|
||||||
|
|
||||||
|
अपने प्रोजेक्ट फ़ोल्डर में `app.js` नामक एक नई फ़ाइल बनाएँ और उस फ़ाइल को अपने HTML के `<head>`अनुभाग में आयात करें:
|
||||||
|
|
||||||
|
```html
|
||||||
|
<script src="app.js" defer></script>
|
||||||
|
```
|
||||||
|
|
||||||
|
अब `app.js` में, हम एक नया फ़ंक्शन `updateRoute` बनाएंगे:
|
||||||
|
|
||||||
|
```js
|
||||||
|
function updateRoute(templateId) {
|
||||||
|
const template = document.getElementById(templateId);
|
||||||
|
const view = template.content.cloneNode(true);
|
||||||
|
const app = document.getElementById('app');
|
||||||
|
app.innerHTML = '';
|
||||||
|
app.appendChild(view);
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
हम यहाँ क्या करते हैं, ऊपर वर्णित 3 चरण हैं। हम आईडी `templateId` के साथ टेम्पलेट को इंस्टेंट करते हैं, और हमारे ऐप प्लेसहोल्डर के भीतर इसकी क्लोन सामग्री डालते हैं। ध्यान दें कि हमें टेम्पलेट के पूरे उपप्रकार को कॉपी करने के लिए `cloneNode(true)` का उपयोग करने की आवश्यकता है।
|
||||||
|
|
||||||
|
अब इस फंक्शन को टेम्प्लेट में से किसी एक पर कॉल करें और परिणाम देखें।
|
||||||
|
|
||||||
|
```js
|
||||||
|
updateRoute('login');
|
||||||
|
```
|
||||||
|
|
||||||
|
✅ इस कोड का उद्देश्य क्या है `app.innerHTML =' '; `? इसके बिना क्या होता है?
|
||||||
|
|
||||||
|
## रूटस बनाना
|
||||||
|
|
||||||
|
जब एक वेब ऐप के बारे में बात की जाती है, तो हम *रूटिंग* को मैप करने का इरादा **URL** विशिष्ट स्क्रीन पर प्रदर्शित करते हैं जिन्हें प्रदर्शित किया जाना चाहिए। एकाधिक HTML फ़ाइलों वाली वेब साइट पर, यह स्वचालित रूप से किया जाता है क्योंकि URL पर फ़ाइल पथ प्रतिबिंबित होते हैं। उदाहरण के लिए, अपने प्रोजेक्ट फ़ोल्डर में इन फ़ाइलों के साथ:
|
||||||
|
|
||||||
|
```
|
||||||
|
mywebsite/index.html
|
||||||
|
mywebsite/login.html
|
||||||
|
mywebsite/admin/index.html
|
||||||
|
```
|
||||||
|
|
||||||
|
यदि आप रूट के रूप में `mywebsite` के साथ एक वेब सर्वर बनाते हैं, तो URL मैपिंग निम्न होगी:
|
||||||
|
|
||||||
|
```
|
||||||
|
https://site.com --> mywebsite/index.html
|
||||||
|
https://site.com/login.html --> mywebsite/login.html
|
||||||
|
https://site.com/admin/ --> mywebsite/admin/index.html
|
||||||
|
```
|
||||||
|
|
||||||
|
हालाँकि, हमारे वेब ऐप के लिए हम सभी स्क्रीन वाले एक एकल HTML फ़ाइल का उपयोग कर रहे हैं ताकि यह डिफ़ॉल्ट व्यवहार हमारी मदद न करे। हमें इस नक्शे को मैन्युअल रूप से बनाना होगा और जावास्क्रिप्ट का उपयोग करके प्रदर्शित टेम्प्लेट को अपडेट करना होगा।
|
||||||
|
|
||||||
|
### टास्क
|
||||||
|
|
||||||
|
URL पथ और हमारे टेम्प्लेट के बीच एक [मैप](https://en.wikipedia.org/wiki/Associative_array) को लागू करने के लिए हम एक साधारण वस्तु का उपयोग करेंगे। इस ऑब्जेक्ट को अपने `app.js` फ़ाइल के शीर्ष पर जोड़ें।
|
||||||
|
|
||||||
|
```js
|
||||||
|
const routes = {
|
||||||
|
'/login': { templateId: 'login' },
|
||||||
|
'/dashboard': { templateId: 'dashboard' },
|
||||||
|
};
|
||||||
|
```
|
||||||
|
|
||||||
|
अब चलो `updateRoute` फ़ंक्शन को थोड़ा संशोधित करते हैं। एक तर्क के रूप में सीधे `templateId` पास करने के बजाय, हम पहले वर्तमान URL को देखकर इसे पुनः प्राप्त करना चाहते हैं, और फिर संबंधित टेम्पलेट आईडी मान प्राप्त करने के लिए हमारे मानचित्र का उपयोग करते हैं। URL से केवल पथ अनुभाग प्राप्त करने के लिए हम [`window.location.pathname`](https://developer.mozilla.org/en-US/docs/Web/API/Location/pathname) का उपयोग कर सकते हैं।
|
||||||
|
|
||||||
|
```js
|
||||||
|
function updateRoute() {
|
||||||
|
const path = window.location.pathname;
|
||||||
|
const route = routes[path];
|
||||||
|
|
||||||
|
const template = document.getElementById(route.templateId);
|
||||||
|
const view = template.content.cloneNode(true);
|
||||||
|
const app = document.getElementById('app');
|
||||||
|
app.innerHTML = '';
|
||||||
|
app.appendChild(view);
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
यहां हमने संबंधित टेम्प्लेट में घोषित मार्गों को मैप किया। आप इसे आज़मा सकते हैं कि यह आपके ब्राउज़र में URL को मैन्युअल रूप से बदलकर सही ढंग से काम करता है।
|
||||||
|
|
||||||
|
✅ यदि आप URL में अज्ञात पथ दर्ज करते हैं तो क्या होगा? हम इसे कैसे हल कर सकते हैं?
|
||||||
|
|
||||||
|
## नेवीगेशन जोड़ना
|
||||||
|
|
||||||
|
हमारे एप्लिकेशन के लिए अगला चरण मैन्युअल रूप से URL बदलने के बिना पृष्ठों के बीच नेविगेट करने की संभावना को जोड़ना है। इसका तात्पर्य दो चीजों से है:
|
||||||
|
|
||||||
|
1. वर्तमान URL को अद्यतन करना
|
||||||
|
2. नए URL के आधार पर प्रदर्शित टेम्प्लेट को अपडेट करना
|
||||||
|
|
||||||
|
हमने पहले ही `updateRoute` फ़ंक्शन के साथ दूसरे भाग का ध्यान रखा, इसलिए हमें यह पता लगाना होगा कि वर्तमान URL को कैसे अपडेट किया जाए।
|
||||||
|
|
||||||
|
हमें जावास्क्रिप्ट और अधिक विशेष रूप से [`history.pushState`](https://developer.mozilla.org/en-US/docs/Web/API/History/pushState) का उपयोग करना होगा जो URL को अपडेट करने की अनुमति देता है HTML को पुनः लोड किए बिना, ब्राउज़िंग इतिहास में एक नई प्रविष्टि बनाएँ।
|
||||||
|
|
||||||
|
> नोट: जबकि HTML एंकर तत्व [`<a href>`] (https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a) का उपयोग हाइपरलिंक बनाने के लिए स्वयं किया जा सकता है विभिन्न यूआरएल, यह ब्राउज़र को डिफ़ॉल्ट रूप से HTML को फिर से लोड करेगा। क्लिक करें घटना पर preventDefault() फ़ंक्शन का उपयोग करके कस्टम जावास्क्रिप्ट के साथ रूटिंग को हैंडल करते समय इस व्यवहार को रोकना आवश्यक है।
|
||||||
|
|
||||||
|
### टास्क
|
||||||
|
|
||||||
|
आइए एक नया फ़ंक्शन बनाएं जिसे हम अपने ऐप में नेविगेट करने के लिए उपयोग कर सकते हैं:
|
||||||
|
|
||||||
|
```js
|
||||||
|
function navigate(path) {
|
||||||
|
window.history.pushState({}, path, window.location.origin + path);
|
||||||
|
updateRoute();
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
यह विधि पहले दिए गए पथ के आधार पर वर्तमान URL को अपडेट करती है, फिर टेम्पलेट को अपडेट करती है। प्रॉपर्टी `window.location.origin` URL रूट लौटाती है, जिससे हम किसी दिए गए पथ से एक पूर्ण URL का पुनर्निर्माण कर सकते हैं।
|
||||||
|
|
||||||
|
अब जब हमारे पास यह फ़ंक्शन है, तो हम इस समस्या का ध्यान रख सकते हैं कि अगर कोई रास्ता किसी परिभाषित मार्ग से मेल नहीं खाता है। यदि हम एक मैच नहीं पा सकते हैं, तो हम मौजूदा मार्ग में से किसी एक में वापसी को जोड़कर `updateRoute` फ़ंक्शन को संशोधित करेंगे।
|
||||||
|
|
||||||
|
```js
|
||||||
|
function updateRoute() {
|
||||||
|
const path = window.location.pathname;
|
||||||
|
const route = routes[path];
|
||||||
|
|
||||||
|
if (!route) {
|
||||||
|
return navigate('/login');
|
||||||
|
}
|
||||||
|
|
||||||
|
...
|
||||||
|
```
|
||||||
|
|
||||||
|
यदि कोई मार्ग नहीं मिल रहा है, तो हम अब `login` पेज पर रीडायरेक्ट करेंगे।
|
||||||
|
Now let's create a function to get the URL when a link is clicked, and to prevent the browser's default link behavior:
|
||||||
|
|
||||||
|
```js
|
||||||
|
function onLinkClick(event) {
|
||||||
|
event.preventDefault();
|
||||||
|
navigate(event.target.href);
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
HTML में हमारे *लॉगिन* और *लॉगआउट* लिंक से बाइंडिंग जोड़कर नेविगेशन सिस्टम को पूरा करें।
|
||||||
|
|
||||||
|
```html
|
||||||
|
<a href="/dashboard" onclick="onLinkClick()">Login</a>
|
||||||
|
...
|
||||||
|
<a href="/login" onclick="onLinkClick()">Logout</a>
|
||||||
|
```
|
||||||
|
|
||||||
|
[`onclick`](https://developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers/onclick) विशेषता का उपयोग करके जावास्क्रिप्ट कोड पर `click` ईवेंट को बांधें, यहाँ `navigate()` फ़ंक्शन पर कॉल करें।
|
||||||
|
|
||||||
|
इन लिंक पर क्लिक करने का प्रयास करें, अब आपको अपने ऐप के विभिन्न स्क्रीन के बीच नेविगेट करने में सक्षम होना चाहिए।
|
||||||
|
|
||||||
|
✅ `History.pushState` विधि HTML5 मानक का हिस्सा है और [सभी आधुनिक ब्राउज़रों](https://caniuse.com/?search=pushState) में लागू किया गया है। यदि आप पुराने ब्राउज़रों के लिए एक वेब ऐप बना रहे हैं, तो इस एपीआई के स्थान पर आप एक ट्रिक का उपयोग कर सकते हैं: इससे पहले [हैश (`#`)](https://en.wikipedia.org/wiki/URI_fragment) का उपयोग कर पथ आप नियमित एंकर नेविगेशन के साथ काम करने वाले रूटिंग को लागू कर सकते हैं और पृष्ठ को फिर से लोड नहीं करते हैं, क्योंकि इसका उद्देश्य एक पृष्ठ के भीतर आंतरिक लिंक बनाना था।
|
||||||
|
|
||||||
|
## ब्राउजर के बैक और फॉरवर्ड बटन को हैंडल करना
|
||||||
|
|
||||||
|
`History.pushState` का उपयोग करके ब्राउज़र के नेविगेशन इतिहास में नई प्रविष्टियाँ बनाता है। आप देख सकते हैं कि आपके ब्राउज़र का *बैक बटन* पकड़कर, इसे कुछ इस तरह प्रदर्शित करना चाहिए:
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
यदि आप कुछ बार बैक बटन पर क्लिक करने का प्रयास करते हैं, तो आप देखेंगे कि वर्तमान 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()` कहता है। हम अपने `app.js` फ़ाइल के नीचे करेंगे:
|
||||||
|
|
||||||
|
```js
|
||||||
|
window.onpopstate = () => updateRoute();
|
||||||
|
updateRoute();
|
||||||
|
```
|
||||||
|
|
||||||
|
> नोट: हमने एक [एरो फंक्शन](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Reference/Arrow_functions) का इस्तेमाल किया है ताकि हम अपने `poopstate` ईवेंट हैंडलर को संक्षिप्तता के लिए घोषित कर सकें, लेकिन नियमित कार्य एक ही काम करेगा।
|
||||||
|
|
||||||
|
यहां एरो फंक्शन पर एक ताज़ा वीडियो है:
|
||||||
|
|
||||||
|
[](https://youtube.com/watch?v=OP6eEbOj2sc "एरो फंक्शन")
|
||||||
|
|
||||||
|
> तीर के कार्यों के बारे में वीडियो के लिए ऊपर दी गई छवि पर क्लिक करें।
|
||||||
|
|
||||||
|
अब अपने ब्राउज़र के बैक और फ़ॉरवर्ड बटन का उपयोग करने का प्रयास करें, और जांचें कि इस बार प्रदर्शित मार्ग सही ढंग से अपडेट किया गया है।
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 🚀 चुनौती
|
||||||
|
|
||||||
|
तीसरे पृष्ठ के लिए एक नया टेम्प्लेट और रूट जोड़ें जो इस ऐप के लिए क्रेडिट दिखाता है।
|
||||||
|
|
||||||
|
## व्याख्यान उपरांत प्रश्नोत्तरी
|
||||||
|
|
||||||
|
[व्याख्यान उपरांत प्रश्नोत्तरी](https://nice-beach-0fe9e9d0f.azurestaticapps.net/quiz/42?loc=hi)
|
||||||
|
|
||||||
|
## समीक्षा और स्व अध्ययन
|
||||||
|
|
||||||
|
रूटिंग वेब विकास के आश्चर्यजनक रूप से मुश्किल भागों में से एक है, विशेष रूप से वेब पेज रीफ्रेश बिहेवियर से लेकर सिंगल पेज एप्लीकेशन पेज रिफ्रेश तक चलता है। [कैसे Azure स्टेटिक वेब ऐप सेवा](https://docs.microsoft.com/en-us/azure/static-web-apps/routes?WT.mc_id=academic-13441-cxa) के बारे में थोड़ा पढ़ें रूटिंग । क्या आप बता सकते हैं कि उस दस्तावेज़ पर वर्णित कुछ निर्णय क्यों आवश्यक हैं?
|
||||||
|
|
||||||
|
## असाइनमेंट
|
||||||
|
|
||||||
|
[रूटिंग में सुधार करें](assignment.hi.md)
|
||||||
@ -0,0 +1,295 @@
|
|||||||
|
# बैंकिंग ऐप पार्ट 2 बनाएँ: एक लॉगिन और पंजीकरण फॉर्म बनाएँ
|
||||||
|
|
||||||
|
## पूर्व व्याख्यान प्रश्नोत्तरी
|
||||||
|
|
||||||
|
[पूर्व व्याख्यान प्रश्नोत्तरी](https://nice-beach-0fe9e9d0f.azurestaticapps.net/quiz/43?loc=hi)
|
||||||
|
|
||||||
|
### परिचय
|
||||||
|
|
||||||
|
लगभग सभी आधुनिक वेब ऐप्स में, आप अपना निजी स्थान रखने के लिए एक खाता बना सकते हैं। चूंकि एक ही समय में कई उपयोगकर्ता वेब ऐप तक पहुंच सकते हैं, इसलिए आपको प्रत्येक उपयोगकर्ता के व्यक्तिगत डेटा को अलग से संग्रहीत करने के लिए एक तंत्र की आवश्यकता होती है और जानकारी प्रदर्शित करने के लिए कौन सी जानकारी का चयन करना चाहिए। हम [उपयोगकर्ता पहचान को सुरक्षित](https://en.wikipedia.org/wiki/Authentication) रूप से प्रबंधित करने के लिए को कवर नहीं करेंगे क्योंकि यह अपने आप में एक व्यापक विषय है, लेकिन हम सुनिश्चित करेंगे कि प्रत्येक उपयोगकर्ता एक बनाने में सक्षम है (या अधिक) हमारे ऐप पर बैंक खाता।
|
||||||
|
|
||||||
|
इस भाग में हम अपने वेब ऐप में लॉगिन और पंजीकरण को जोड़ने के लिए HTML रूपों का उपयोग करेंगे। हम देखेंगे कि डेटा को सर्वर एपीआई को प्रोग्रामेटिक रूप से कैसे भेजा जाए, और अंततः उपयोगकर्ता इनपुट के लिए बुनियादी सत्यापन नियमों को कैसे परिभाषित किया जाए।
|
||||||
|
|
||||||
|
### शर्त
|
||||||
|
|
||||||
|
इस पाठ के लिए आपको वेब ऐप का [HTML टेम्प्लेट और रूटिंग](../../1-template-route/translations/README.hi.md)) पूरा करना होगा। आपको स्थानीय रूप से [Node.js](https://nodejs.org) और [सर्वर एपीआई चलाने](../../api/README.hi.md) स्थापित करने की आवश्यकता है ताकि आप खाते बनाने के लिए डेटा भेज सकें।
|
||||||
|
|
||||||
|
आप परीक्षण कर सकते हैं कि सर्वर टर्मिनल में इस कमांड को निष्पादित करके ठीक से चल रहा है:
|
||||||
|
|
||||||
|
```sh
|
||||||
|
curl http://localhost:5000/api
|
||||||
|
# -> should return "Bank API v1.0.0" as a result
|
||||||
|
```
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## फोरम और कोन्टरोल्स
|
||||||
|
|
||||||
|
`<form>` एलेमेन्ट एक HTML दस्तावेज़ के एक भाग को एन्क्रिप्ट करता है जहां उपयोगकर्ता इनपुट कर सकता है और इंटरैक्टिव नियंत्रणों के साथ डेटा जमा कर सकता है। सभी प्रकार के उपयोगकर्ता इंटरफ़ेस (UI) नियंत्रण हैं जिनका उपयोग एक फॉर्म के भीतर किया जा सकता है, सबसे आम है `<input>` और `<button>` एलेमेन्ट ।
|
||||||
|
|
||||||
|
`<input>` के विभिन्न [प्रकार](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input) के कई उदाहरण हैं, उदाहरण के लिए एक फ़ील्ड बनाने के लिए जहां उपयोगकर्ता आप उपयोग कर सकते हैं इसके उपयोगकर्ता नाम दर्ज कर सकते हैं:
|
||||||
|
|
||||||
|
```html
|
||||||
|
<input id="username" name="username" type="text">
|
||||||
|
```
|
||||||
|
|
||||||
|
जब फॉर्म डेटा को भेज दिया जाएगा तो `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/en-US/docs/Glossary/Empty_element) है, जिस पर आपको एक मिलान समापन टैग नहीं जोड़ना चाहिए। हालाँकि आप स्व-समापन `<input/>` संकेतन का उपयोग कर सकते हैं, लेकिन इसकी आवश्यकता नहीं है।
|
||||||
|
|
||||||
|
फॉर्म के भीतर `<button>` एलेमेन्ट थोड़ा विशेष है। यदि आप इसकी `type` विशेषता निर्दिष्ट नहीं करते हैं, तो यह स्वचालित रूप से दबाए जाने पर सर्वर को फॉर्म डेटा प्रस्तुत करेगा। यहां संभावित `type` मान दिए गए हैं:
|
||||||
|
|
||||||
|
- `submit`: एक `form` के भीतर डिफ़ॉल्ट, बटन फार्म सबमिट एक्शन को ट्रिगर करता है।
|
||||||
|
- `reset`: बटन उनके प्रारंभिक मूल्यों पर सभी फॉर्म नियंत्रणों को रीसेट करता है।
|
||||||
|
- `button`: बटन दबाए जाने पर डिफ़ॉल्ट व्यवहार न निर्दिष्ट करें। फिर आप जावास्क्रिप्ट का उपयोग करके इसे कस्टम एक्शन दे सकते हैं।
|
||||||
|
|
||||||
|
### टास्क
|
||||||
|
|
||||||
|
आइए `login` टेम्प्लेट में एक फ़ॉर्म जोड़कर शुरू करें। हमें एक *उपयोगकर्ता नाम* फ़ील्ड और एक *लॉगिन* बटन की आवश्यकता होगी।
|
||||||
|
|
||||||
|
```html
|
||||||
|
<template id="login">
|
||||||
|
<h1>Bank App</h1>
|
||||||
|
<section>
|
||||||
|
<h2>Login</h2>
|
||||||
|
<form id="loginForm">
|
||||||
|
<label for="username">Username</label>
|
||||||
|
<input id="username" name="user" type="text">
|
||||||
|
<button>Login</button>
|
||||||
|
</form>
|
||||||
|
</section>
|
||||||
|
</template>
|
||||||
|
```
|
||||||
|
|
||||||
|
यदि आप एक करीब से देखते हैं, तो आप देख सकते हैं कि हमने यहां एक `<label>` एलेमेन्ट भी जोड़ा है। `<label>` एलेमेन्टस का उपयोग UI नियंत्रणों में एक नाम जोड़ने के लिए किया जाता है, जैसे कि हमारा उपयोगकर्ता नाम फ़ील्ड। लेबल आपके रूपों की पठनीयता के लिए महत्वपूर्ण हैं, लेकिन अतिरिक्त लाभ के साथ भी आते हैं:
|
||||||
|
|
||||||
|
- एक लेबल को फोरम कोन्टरोल्स से जोड़कर, यह उपयोगकर्ताओं को सहायक तकनीकों (जैसे कि स्क्रीन रीडर) का उपयोग करके यह समझने में मदद करता है कि उन्हें क्या डेटा प्रदान करने की उम्मीद है।
|
||||||
|
- आप संबंधित इनपुट पर सीधे ध्यान केंद्रित करने के लिए लेबल पर क्लिक कर सकते हैं, जिससे टच-स्क्रीन आधारित उपकरणों तक पहुंचना आसान हो जाता है।
|
||||||
|
|
||||||
|
> वेब पर [एक्सेसिबिलिटी](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)।
|
||||||
|
|
||||||
|
अब हम पंजीकरण के लिए दूसरा रूप जोड़ेंगे, पिछले एक के नीचे:
|
||||||
|
|
||||||
|
```html
|
||||||
|
<hr/>
|
||||||
|
<h2>Register</h2>
|
||||||
|
<form id="registerForm">
|
||||||
|
<label for="user">Username</label>
|
||||||
|
<input id="user" name="user" type="text">
|
||||||
|
<label for="currency">Currency</label>
|
||||||
|
<input id="currency" name="currency" type="text" value="$">
|
||||||
|
<label for="description">Description</label>
|
||||||
|
<input id="description" name="description" type="text">
|
||||||
|
<label for="balance">Current balance</label>
|
||||||
|
<input id="balance" name="balance" type="number" value="0">
|
||||||
|
<button>Register</button>
|
||||||
|
</form>
|
||||||
|
```
|
||||||
|
|
||||||
|
`value` विशेषता का उपयोग करके हम दिए गए इनपुट के लिए एक डिफ़ॉल्ट मान को परिभाषित कर सकते हैं।
|
||||||
|
सूचना यह भी है कि `balance` के इनपुट में `number` प्रकार है। क्या यह अन्य इनपुटों की तुलना में अलग दिखता है? इसके साथ बातचीत करने का प्रयास करें।
|
||||||
|
|
||||||
|
✅ क्या आप केवल कीबोर्ड का उपयोग करके फ़ॉर्म के साथ नेविगेट और इंटरैक्ट कर सकते हैं? आप वह कैसे करेंगें?
|
||||||
|
|
||||||
|
## सर्वर पर डेटा जमा करना
|
||||||
|
|
||||||
|
अब जब हमारे पास एक कार्यात्मक UI है, तो अगला चरण हमारे सर्वर पर डेटा भेजने के लिए है। चलो हमारे वर्तमान कोड का उपयोग करके एक त्वरित परीक्षण करें: यदि आप *लॉगिन* या *रजिस्टर* बटन पर क्लिक करते हैं तो क्या होता है?
|
||||||
|
|
||||||
|
क्या आपने अपने ब्राउज़र के URL अनुभाग में परिवर्तन को देखा है?
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
`<form>` के लिए डिफ़ॉल्ट क्रिया [GET मेथड](https://www.w3.org/Protocols/rfc2616/rfc2616-sec9.html##ecec9.3) का उपयोग करके वर्तमान सर्वर URL को फ़ॉर्म सबमिट करना है , फॉर्म डेटा को सीधे URL में जोड़ना। इस विधि में कुछ कमियाँ हैं:
|
||||||
|
|
||||||
|
- भेजा गया डेटा आकार में बहुत सीमित है (लगभग 2000 वर्ण)
|
||||||
|
- डेटा सीधे URL में दिखाई देता है (पासवर्ड के लिए महान नहीं)
|
||||||
|
- यह फ़ाइल अपलोड के साथ काम नहीं करता है
|
||||||
|
|
||||||
|
इसीलिए आप इसे [POST विधि](https://www.w3.org/Protocols/rfc2616/rfc2616-sec9.html#sec9.5) का उपयोग करने के लिए बदल सकते हैं, जो शरीर में सर्वर को फॉर्म डेटा भेजता है HTTP अनुरोध, पिछली सीमाओं के बिना।
|
||||||
|
|
||||||
|
> जबकि POST डेटा को भेजने के लिए सबसे आम तौर पर उपयोग की जाने वाली विधि है, [कुछ विशिष्ट परिदृश्यों में](https://www.w3.org/2001/tag/doc/whenToUseGet.html) यह GET विधि का उपयोग करने के लिए बेहतर है, जब उदाहरण के लिए खोज क्षेत्र लागू करना।
|
||||||
|
|
||||||
|
### टास्क
|
||||||
|
|
||||||
|
पंजीकरण फॉर्म में `action` और `method` गुण जोड़ें:
|
||||||
|
|
||||||
|
```html
|
||||||
|
<form id="registerForm" action="//localhost:5000/api/accounts" method="POST">
|
||||||
|
```
|
||||||
|
|
||||||
|
अब अपने नाम के साथ एक नया खाता पंजीकृत करने का प्रयास करें। * रजिस्टर * बटन पर क्लिक करने के बाद आपको कुछ इस तरह से देखना चाहिए:
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
यदि सब कुछ ठीक हो जाता है, तो सर्वर को आपके अनुरोध का जवाब एक [JSON](https://www.json.org/json-en.html) प्रतिक्रिया के साथ देना चाहिए जिसमें खाता डेटा बनाया गया था।
|
||||||
|
|
||||||
|
✅ एक ही नाम के साथ फिर से पंजीकरण करने का प्रयास करें। क्या होता है?
|
||||||
|
|
||||||
|
## पृष्ठ को फिर से लोड किए बिना डेटा सबमिट करना
|
||||||
|
|
||||||
|
जैसा कि आपने शायद देखा है, हमारे द्वारा अभी उपयोग किए गए दृष्टिकोण के साथ एक मामूली समस्या है: फॉर्म जमा करते समय, हम अपने ऐप से बाहर निकलते हैं और ब्राउज़र सर्वर URL पर रीडायरेक्ट करता है। हम अपने वेब ऐप के साथ सभी पेज रीलोड से बचने की कोशिश कर रहे हैं, क्योंकि हम एक [सिंगल-पेज एप्लिकेशन (SPA)](https://en.wikipedia.org/wiki/Single-page_application) हैं।
|
||||||
|
|
||||||
|
पृष्ठ पुनः लोड किए बिना सर्वर को फ़ॉर्म डेटा भेजने के लिए, हमें जावास्क्रिप्ट कोड का उपयोग करना होगा। एक `<form>` तत्व की `action` प्रॉपर्टी में एक यूआरएल डालने के बजाय, आप कस्टम क्रिया करने के लिए `javascript` स्ट्रिंग द्वारा प्रचलित किसी भी जावास्क्रिप्ट कोड का उपयोग कर सकते हैं। इसका उपयोग करने का अर्थ यह भी है कि आपको कुछ कार्यों को लागू करना होगा जो पहले ब्राउज़र द्वारा स्वचालित रूप से किए गए थे:
|
||||||
|
|
||||||
|
- फॉर्म डेटा को पुनः प्राप्त करें
|
||||||
|
- फ़ॉर्म डेटा को एक उपयुक्त प्रारूप में कनवर्ट और एन्कोड करें
|
||||||
|
- HTTP रिक्वेस्ट बनाएं और इसे सर्वर पर भेजें
|
||||||
|
|
||||||
|
### टास्क
|
||||||
|
|
||||||
|
पंजीकरण फॉर्म को `action` से बदलें:
|
||||||
|
|
||||||
|
```html
|
||||||
|
<form id="registerForm" action="javascript:register()">
|
||||||
|
```
|
||||||
|
|
||||||
|
`app.js` खोलें `register` नामक एक नया फ़ंक्शन जोड़ें:
|
||||||
|
|
||||||
|
```js
|
||||||
|
function register() {
|
||||||
|
const registerForm = document.getElementById('registerForm');
|
||||||
|
const formData = new FormData(registerForm);
|
||||||
|
const data = Object.fromEntries(formData);
|
||||||
|
const jsonData = JSON.stringify(data);
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
यहाँ हम `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) में क्रमबद्ध करते हैं, आमतौर पर वेब पर डेटा के आदान-प्रदान के लिए उपयोग किया जाने वाला प्रारूप।
|
||||||
|
|
||||||
|
डेटा अब सर्वर पर भेजे जाने के लिए तैयार है। `CreateAccount` नामक एक नया फ़ंक्शन बनाएँ:
|
||||||
|
|
||||||
|
```js
|
||||||
|
async function createAccount(account) {
|
||||||
|
try {
|
||||||
|
const response = await fetch('//localhost:5000/api/accounts', {
|
||||||
|
method: 'POST',
|
||||||
|
headers: { 'Content-Type': 'application/json' },
|
||||||
|
body: account
|
||||||
|
});
|
||||||
|
return await response.json();
|
||||||
|
} catch (error) {
|
||||||
|
return { error: error.message || 'Unknown error' };
|
||||||
|
}
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
यह क्या कार्य कर रहा है? सबसे पहले, यहां `async` कीवर्ड देखें। इसका मतलब है कि फ़ंक्शन में कोड शामिल है जो [**asynchronously**](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/async_function) को निष्पादित करेगा। जब `await` कीवर्ड का उपयोग किया जाता है, तो यह एसिंक्रोनस कोड को निष्पादित करने के लिए प्रतीक्षा करने की अनुमति देता है - जैसे सर्वर प्रतिक्रिया का इंतजार यहां जारी रखने से पहले।
|
||||||
|
|
||||||
|
यहाँ `async/await` उपयोग के बारे में एक त्वरित वीडियो है:
|
||||||
|
|
||||||
|
[](https://youtube.com/watch?v=YwmlRkrxvkk "परोमीसेस के प्रबंधन के लिए Async और Await")
|
||||||
|
|
||||||
|
> async/await के वीडियो के लिए ऊपर दी गई छवि पर क्लिक करें।
|
||||||
|
|
||||||
|
हम JSON डेटा को सर्वर पर भेजने के लिए `fetch()` API का उपयोग करते हैं। इस विधि में 2 पैरामीटर हैं:
|
||||||
|
|
||||||
|
- सर्वर का URL, इसलिए हमने यहां `//localhost:5000/api/accounts` वापस रखा है।
|
||||||
|
- अनुरोध की सेटिंग। यही कारण है कि हम अनुरोध के लिए `POST` विधि निर्धारित करते हैं और `body` प्रदान करते हैं। जैसा कि हम JSON डेटा सर्वर पर भेज रहे हैं, हमें `Content-type` हेडर को `application/json` पर सेट करने की भी आवश्यकता है, इसलिए सर्वर को पता है कि सामग्री की व्याख्या कैसे करें।
|
||||||
|
|
||||||
|
जैसा कि सर्वर JSON के साथ अनुरोध का जवाब देगा, हम JSON सामग्री को पार्स करने के लिए `await response.json()` का उपयोग कर सकते हैं और परिणामी वस्तु वापस कर सकते हैं। ध्यान दें कि यह विधि अतुल्यकालिक है, इसलिए हम यह सुनिश्चित करने के लिए कि प्रतीक्षा के दौरान किसी भी त्रुटि को भी पकड़ा जाता है, लौटने से पहले हम यहाँ `await` कीवर्ड का उपयोग करते हैं।
|
||||||
|
|
||||||
|
अब `createAccount()` कहने के लिए `register` फ़ंक्शन में कुछ कोड जोड़ें:
|
||||||
|
|
||||||
|
```js
|
||||||
|
const result = await createAccount(jsonData);
|
||||||
|
```
|
||||||
|
|
||||||
|
चूँकि हम यहाँ `await` कीवर्ड का उपयोग करते हैं, हमें रजिस्टर फंक्शन से पहले `async` कीवर्ड जोड़ना होगा:
|
||||||
|
|
||||||
|
```js
|
||||||
|
async function register() {
|
||||||
|
```
|
||||||
|
|
||||||
|
अंत में, परिणाम को जांचने के लिए कुछ लॉग जोड़ें। अंतिम कार्य इस तरह दिखना चाहिए:
|
||||||
|
|
||||||
|
```js
|
||||||
|
async function register() {
|
||||||
|
const registerForm = document.getElementById('registerForm');
|
||||||
|
const formData = new FormData(registerForm);
|
||||||
|
const jsonData = JSON.stringify(Object.fromEntries(formData));
|
||||||
|
const result = await createAccount(jsonData);
|
||||||
|
|
||||||
|
if (result.error) {
|
||||||
|
return console.log('An error occured:', result.error);
|
||||||
|
}
|
||||||
|
|
||||||
|
console.log('Account created!', result);
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
वह थोड़ा लंबा था लेकिन हम वहां पहुंच गए! यदि आप अपने [ब्राउज़र डेवलपर टूल] (https://developer.mozilla.org/en-US/docs/Learn/Common_questions/What_are_browser_developer_tools) खोलते हैं, और एक नया खाता आज़माते हैं, तो आपको वेब पेज पर कोई बदलाव नहीं देखना चाहिए लेकिन एक संदेश कंसोल में दिखाई देगा जो पुष्टि करता है कि सब कुछ काम करता है।
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
✅ क्या आपको लगता है कि डेटा सर्वर पर सुरक्षित रूप से भेजा जाता है? क्या होगा यदि कोई व्यक्ति अनुरोध को बाधित करने में सक्षम था? सुरक्षित डेटा संचार के बारे में अधिक जानने के लिए आप [HTTPS](https://en.wikipedia.org/wiki/HTTPS) के बारे में पढ़ सकते हैं।
|
||||||
|
|
||||||
|
## डेटा मान्य
|
||||||
|
|
||||||
|
यदि आप पहले उपयोगकर्ता नाम सेट किए बिना एक नया खाता पंजीकृत करने का प्रयास करते हैं, तो आप देख सकते हैं कि सर्वर स्थिति कोड [400 (खराब अनुरोध)](https://developer.mozilla.org/en-US/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 फॉर्म नियंत्रण विभिन्न विशेषताओं का उपयोग करके अंतर्निहित मान्यता प्रदान करता है:
|
||||||
|
|
||||||
|
- `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) पैटर्न को निर्धारित करने के लिए परीक्षण करने की अनुमति देता है कि दर्ज किया गया डेटा वैध है या नहीं।
|
||||||
|
|
||||||
|
> युक्ति: यदि आप मान्य हैं और `:valid` और `:invalid` CSS छद्म-क्लेसे का उपयोग नहीं कर रहे हैं, तो आप अपने फ़ॉर्म नियंत्रणों को अनुकूलित कर सकते हैं।s.
|
||||||
|
|
||||||
|
### टास्क
|
||||||
|
|
||||||
|
वैध नया खाता बनाने के लिए 2 आवश्यक फ़ील्ड हैं, उपयोगकर्ता नाम और मुद्रा, अन्य फ़ील्ड वैकल्पिक हैं। फॉर्म के HTML को अपडेट करें, फ़ील्ड के लेबल में `required` विशेषता और टेक्स्ट दोनों का उपयोग करके:
|
||||||
|
|
||||||
|
```html
|
||||||
|
<label for="user">Username (required)</label>
|
||||||
|
<input id="user" name="user" type="text" required>
|
||||||
|
...
|
||||||
|
<label for="currency">Currency (required)</label>
|
||||||
|
<input id="currency" name="currency" type="text" value="$" required>
|
||||||
|
```
|
||||||
|
|
||||||
|
हालांकि यह विशेष सर्वर कार्यान्वयन अधिकतम लंबाई वाले क्षेत्रों पर विशिष्ट सीमाएँ लागू नहीं करता है, यह किसी भी उपयोगकर्ता पाठ प्रविष्टि के लिए उचित सीमा को परिभाषित करने के लिए हमेशा एक अच्छा अभ्यास है।
|
||||||
|
|
||||||
|
टेक्स्ट फ़ील्ड में एक `maxlength` विशेषता जोड़ें:
|
||||||
|
|
||||||
|
```html
|
||||||
|
<input id="user" name="user" type="text" maxlength="20" required>
|
||||||
|
...
|
||||||
|
<input id="currency" name="currency" type="text" value="$" maxlength="5" required>
|
||||||
|
...
|
||||||
|
<input id="description" name="description" type="text" maxlength="100">
|
||||||
|
```
|
||||||
|
|
||||||
|
अब यदि आप *रजिस्टर* बटन दबाते हैं और एक फ़ील्ड हमारे द्वारा परिभाषित सत्यापन नियम का सम्मान नहीं करता है, तो आपको कुछ इस तरह से देखना चाहिए:
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
इस तरह के सत्यापन *से पहले* किसी भी डेटा को सर्वर पर भेजने के लिए **क्लाइंट-साइड** सत्यापन कहा जाता है। लेकिन ध्यान दें कि डेटा भेजे बिना हमेशा सभी जांचों को बेहतर बनाना संभव नहीं है। उदाहरण के लिए, यदि सर्वर पर रिक्वेस्ट भेजे बिना एक ही यूज़रनेम के साथ कोई खाता पहले से मौजूद है तो हम यहाँ जाँच नहीं कर सकते। सर्वर पर निष्पादित अतिरिक्त सत्यापन को **सर्वर-साइड** सत्यापन कहा जाता है।
|
||||||
|
|
||||||
|
आमतौर पर दोनों को लागू करने की आवश्यकता होती है, और क्लाइंट-साइड सत्यापन का उपयोग करते समय उपयोगकर्ता को त्वरित प्रतिक्रिया प्रदान करके उपयोगकर्ता के अनुभव को बेहतर बनाता है, यह सुनिश्चित करने के लिए सर्वर-साइड सत्यापन महत्वपूर्ण है कि जिस उपयोगकर्ता डेटा में आप हेरफेर करते हैं वह ध्वनि और सुरक्षित है।
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 🚀 चुनौती
|
||||||
|
|
||||||
|
यदि उपयोगकर्ता पहले से मौजूद है, तो HTML में एक त्रुटि संदेश दिखाएं।
|
||||||
|
|
||||||
|
यहाँ एक उदाहरण दिया गया है कि अंतिम लॉगिन पृष्ठ स्टाइल के थोड़े समय बाद कैसा दिख सकता है:
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
## व्याख्यान उपरांत प्रश्नोत्तरी
|
||||||
|
|
||||||
|
[व्याख्यान उपरांत प्रश्नोत्तरी](https://nice-beach-0fe9e9d0f.azurestaticapps.net/quiz/44?loc=hi)
|
||||||
|
|
||||||
|
## समीक्षा और स्व अध्ययन
|
||||||
|
|
||||||
|
डेवलपर्स ने अपने फॉर्म निर्माण प्रयासों के बारे में, विशेष रूप से सत्यापन रणनीतियों के बारे में बहुत रचनात्मक जानकारी प्राप्त की है। [CodePen](https://codepen.com) के माध्यम से देख कर विभिन्न प्रकार के प्रवाह के बारे में जानें; क्या आप कुछ दिलचस्प और प्रेरक रूप पा सकते हैं?
|
||||||
|
|
||||||
|
## असाइनमेंट
|
||||||
|
|
||||||
|
[अपने बैंक ऐप को स्टाइल करें](assignment.hi.md)
|
||||||
@ -0,0 +1,337 @@
|
|||||||
|
# एक बैंकिंग ऐप पार्ट 3 का निर्माण करें: डेटा प्राप्त करने और उपयोग करने के तरीके
|
||||||
|
|
||||||
|
## पूर्व व्याख्यान प्रश्नोत्तरी
|
||||||
|
|
||||||
|
[पूर्व व्याख्यान प्रश्नोत्तरी](https://nice-beach-0fe9e9d0f.azurestaticapps.net/quiz/45?loc=hi)
|
||||||
|
|
||||||
|
### परिचय
|
||||||
|
|
||||||
|
हर वेब एप्लिकेशन के मूल में *डेटा* है। डेटा कई रूप ले सकता है, लेकिन इसका मुख्य उद्देश्य हमेशा उपयोगकर्ता को जानकारी प्रदर्शित करना है। वेब एप्लिकेशन तेजी से इंटरेक्टिव और जटिल होने के साथ, उपयोगकर्ता कैसे पहुंचता है और जानकारी के साथ सहभागिता करता है, अब वेब विकास का एक महत्वपूर्ण हिस्सा है।
|
||||||
|
|
||||||
|
इस पाठ में, हम एक सर्वर से डेटा को असिंक्रोनोस रूप से प्राप्त करने का तरीका देखेंगे, और HTML को पुनः लोड किए बिना वेब पेज पर जानकारी प्रदर्शित करने के लिए इस डेटा का उपयोग करेंगे।
|
||||||
|
|
||||||
|
### शर्त
|
||||||
|
|
||||||
|
इस पाठ के लिए आपको वेब ऐप का [लॉगिन और पंजीकरण फॉर्म](../../2-forms/translations/README.hi.md) भाग बनाने की आवश्यकता है। आपको स्थानीय रूप से [Node.js](https://nodejs.org) और [सर्वर एपीआई चलाने](../../api/translations/README.hi.md) स्थापित करने की आवश्यकता है ताकि आपको खाता डेटा प्राप्त हो सके।
|
||||||
|
|
||||||
|
आप परीक्षण कर सकते हैं कि सर्वर टर्मिनल में इस कमांड को निष्पादित करके ठीक से चल रहा है:
|
||||||
|
|
||||||
|
```sh
|
||||||
|
curl http://localhost:5000/api
|
||||||
|
# -> should return "Bank API v1.0.0" as a result
|
||||||
|
```
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## AJAX और डेटा लाना
|
||||||
|
|
||||||
|
पारंपरिक वेब साइटें प्रदर्शित सामग्री को अपडेट करती हैं जब उपयोगकर्ता एक लिंक का चयन करता है या पूर्ण HTML पृष्ठ को फिर से लोड करके एक फॉर्म का उपयोग करके डेटा सबमिट करता है। हर बार नए डेटा को लोड करने की आवश्यकता होती है, वेब सर्वर एक नया HTML पृष्ठ लौटाता है जिसे ब्राउज़र द्वारा संसाधित करने की आवश्यकता होती है, वर्तमान उपयोगकर्ता कार्रवाई को बाधित करता है और पुनः लोड के दौरान इंटरैक्शन को सीमित करता है। इस वर्कफ़्लो को *मल्टी-पेज एप्लिकेशन* या *एमपीए* भी कहा जाता है।
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
जब वेब एप्लिकेशन अधिक जटिल और संवादात्मक होने लगे, तो [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 पहली बार पेश किया गया था, तो डेटा को अतुल्य रूप से लाने के लिए उपलब्ध एकमात्र 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 डेटा।
|
||||||
|
|
||||||
|
> जबकि सभी आधुनिक ब्राउज़र `Fetch API` का समर्थन करते हैं, यदि आप चाहते हैं कि आपका वेब एप्लिकेशन विरासत या पुराने ब्राउज़रों पर काम करे, तो यह हमेशा एक अच्छा विचार है कि [caniuse.com पर संगतता तालिका](https://caniuse.com/fetch) पहले की जाँच करें।
|
||||||
|
|
||||||
|
### टास्क
|
||||||
|
|
||||||
|
[पिछले पाठ में](../../2-forms/translations/README.hi.md) हमने खाता बनाने के लिए पंजीकरण फ़ॉर्म लागू किया था। अब हम किसी मौजूदा खाते का उपयोग कर लॉगिन करने के लिए कोड जोड़ेंगे और उसका डेटा प्राप्त करेंगे। `app.js` फ़ाइल खोलें और एक नया `login` फ़ंक्शन जोड़ें:
|
||||||
|
|
||||||
|
```js
|
||||||
|
async function login() {
|
||||||
|
const loginForm = document.getElementById('loginForm')
|
||||||
|
const user = loginForm.user.value;
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
यहाँ हम `getElementById()` के साथ फॉर्म एलिमेंट को पुनः प्राप्त करके शुरू करते हैं, और फिर हम `loginForm.user.value` के साथ इनपुट से यूज़रनेम प्राप्त करते हैं। प्रत्येक प्रपत्र नियंत्रण को उसके नाम (फॉर्म का गुण के रूप में HTML में `name` विशेषता का उपयोग करके सेट) तक पहुँचा जा सकता है।
|
||||||
|
|
||||||
|
पंजीकरण के लिए हमने जो कुछ किया था, उसी तरह से, हम सर्वर अनुरोध करने के लिए एक और कार्य करेंगे, लेकिन इस बार खाता डेटा प्राप्त करने के लिए:
|
||||||
|
|
||||||
|
```js
|
||||||
|
async function getAccount(user) {
|
||||||
|
try {
|
||||||
|
const response = await fetch('//localhost:5000/api/accounts/' + encodeURIComponent(user));
|
||||||
|
return await response.json();
|
||||||
|
} catch (error) {
|
||||||
|
return { error: error.message || 'Unknown error' };
|
||||||
|
}
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
हम सर्वर से एसिंक्रोनस रूप से डेटा का अनुरोध करने के लिए `fetch` एपीआई का उपयोग करते हैं, लेकिन इस बार हमें कॉल करने के लिए URL के अलावा किसी भी अतिरिक्त पैरामीटर की आवश्यकता नहीं है, क्योंकि हम केवल डेटा क्वेरी कर रहे हैं। डिफ़ॉल्ट रूप से, 'fetch' एक [`GET`](https://developer.mozilla.org/en-US/docs/Web/HTTP/Methods/GET) HTTP अनुरोध बनाता है , जो हम यहाँ चाह रहे हैं।
|
||||||
|
|
||||||
|
✅ `encodeURIComponent()` एक फ़ंक्शन है जो URL के लिए विशेष वर्णों से बच जाता है। यदि हम इस फ़ंक्शन को कॉल नहीं करते हैं और URL में सीधे `user` वैल्यू का उपयोग करते हैं, तो संभवतः हमारे पास क्या समस्याएँ हो सकती हैं?
|
||||||
|
|
||||||
|
आइए अब `getAccount` का उपयोग करने के लिए हमारे `login` फ़ंक्शन को अपडेट करें:
|
||||||
|
|
||||||
|
```js
|
||||||
|
async function login() {
|
||||||
|
const loginForm = document.getElementById('loginForm')
|
||||||
|
const user = loginForm.user.value;
|
||||||
|
const data = await getAccount(user);
|
||||||
|
|
||||||
|
if (data.error) {
|
||||||
|
return console.log('loginError', data.error);
|
||||||
|
}
|
||||||
|
|
||||||
|
account = data;
|
||||||
|
navigate('/dashboard');
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
सबसे पहले, जैसा कि `getAccount` एक असिंक्रोनोस फ़ंक्शन है, जिसे हमें सर्वर परिणाम की प्रतीक्षा करने के लिए `await` कीवर्ड के साथ मेल खाना चाहिए। किसी भी सर्वर अनुरोध के साथ, हमें त्रुटि मामलों से भी निपटना होगा। अभी के लिए हम केवल त्रुटि प्रदर्शित करने के लिए एक लॉग संदेश जोड़ेंगे, और बाद में वापस आएँगे।
|
||||||
|
|
||||||
|
फिर हमें डेटा को कहीं स्टोर करना होगा ताकि हम बाद में इसे डैशबोर्ड इनफार्मेशन्स को प्रदर्शित कर सकें। चूंकि `account` चर अभी तक मौजूद नहीं है, हम अपनी फ़ाइल के शीर्ष पर इसके लिए एक वैश्विक चर बनाएंगे।
|
||||||
|
|
||||||
|
```js
|
||||||
|
let account = null;
|
||||||
|
```
|
||||||
|
|
||||||
|
उपयोगकर्ता डेटा को एक चर में सहेजे जाने के बाद हम पहले से मौजूद `navigate()` फ़ंक्शन का उपयोग करके *लॉगिन* पृष्ठ से *डैशबोर्ड* तक नेविगेट कर सकते हैं।
|
||||||
|
|
||||||
|
अंत में, हमें HTML को संशोधित करके लॉगिन फ़ॉर्म सबमिट करने पर हमारे `login` फ़ंक्शन को कॉल करने की आवश्यकता है:
|
||||||
|
|
||||||
|
```html
|
||||||
|
<form id="loginForm" action="javascript:login()">
|
||||||
|
```
|
||||||
|
|
||||||
|
परीक्षण करें कि नया खाता पंजीकृत करके और उसी खाते का उपयोग करके लॉगिन करने का प्रयास करके सब कुछ सही ढंग से काम कर रहा है।
|
||||||
|
|
||||||
|
अगले भाग पर जाने से पहले, हम फ़ंक्शन के निचले भाग में इसे जोड़कर `register` फ़ंक्शन को भी पूरा कर सकते हैं:
|
||||||
|
|
||||||
|
```js
|
||||||
|
account = result;
|
||||||
|
navigate('/dashboard');
|
||||||
|
```
|
||||||
|
|
||||||
|
✅ क्या आप जानते हैं कि डिफ़ॉल्ट रूप से, आप सर्वर API को केवल उसी वेब पेज से *उसी डोमेन और पोर्ट* से कॉल कर सकते हैं जो आप देख रहे हैं? यह सुरक्षा तंत्र है जो ब्राउज़र द्वारा लागू किया जाता है। लेकिन रुकिए, हमारा वेब ऐप `localhost:3000` पर चल रहा है जबकि सर्वर एपीआई `localhost:5000` पर चल रहा है, यह काम क्यों नहीं करता है? [क्रॉस-ओरिजिनल रिसोर्स शेयरिंग (CORS)](https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS) नामक तकनीक का उपयोग करके, क्रॉस-ऑरिजनल HTTP रिक्वेस्ट करना संभव है अगर सर्वर प्रतिक्रिया के लिए विशेष हेडर जोड़ता है, विशिष्ट डोमेन के लिए अपवाद की अनुमति देता है।
|
||||||
|
|
||||||
|
> इसे [पाठ](https://docs.microsoft.com/en-us/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) प्रॉपर्टी का उपयोग करके आप किसी एलेमेन्ट का पाठ बदल सकते हैं। ध्यान दें कि इस मान को बदलने से सभी एलेमेन्ट के बच्चे (यदि कोई हो) को हटा देता है और प्रदान किए गए पाठ के साथ बदल देता है। जैसे, यह किसी दिए गए एलेमेन्ट के सभी बच्चों को एक खाली स्ट्रिंग `''` को निर्दिष्ट करके निकालने की एक कुशल विधि है।
|
||||||
|
|
||||||
|
- [`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) विधि का उपयोग करके आप बना सकते हैं और एक या अधिक नए बाल एलेमेन्ट संलग्न करें।
|
||||||
|
|
||||||
|
✅ किसी एलेमेन्ट की प्रॉपर्टी का उपयोग करते हुए [`innerHTML`](https://developer.mozilla.org/en-US/docs/Web/API/Element/innerHTML) का उपयोग करना संभव है, लेकिन यह एक होना चाहिए [क्रॉस-साइट स्क्रिप्टिंग (XSS)](https://developer.mozilla.org/en-US/docs/Glossary/Cross-site_scripting) हमलों के कारण इसकी चपेट में आने से बचा जा सकता है।
|
||||||
|
|
||||||
|
### टास्क
|
||||||
|
|
||||||
|
डैशबोर्ड स्क्रीन पर जाने से पहले, एक और चीज़ है जो हमें *लॉगिन* पेज पर करनी चाहिए। वर्तमान में, यदि आप एक उपयोगकर्ता नाम के साथ लॉगिन करने की कोशिश करते हैं जो मौजूद नहीं है, तो कंसोल में एक संदेश दिखाया जाता है लेकिन एक सामान्य उपयोगकर्ता के लिए कुछ भी नहीं बदलता है और आपको नहीं पता कि क्या चल रहा है।
|
||||||
|
|
||||||
|
आइए लॉगिन फॉर्म में एक प्लेसहोल्डर एलेमेन्ट जोड़ें जहां हम एक त्रुटि संदेश प्रदर्शित कर सकते हैं यदि आवश्यक हो। लॉगिन `<button>` के ठीक पहले एक अच्छी जगह होगी:
|
||||||
|
|
||||||
|
```html
|
||||||
|
...
|
||||||
|
<div id="loginError"></div>
|
||||||
|
<button>Login</button>
|
||||||
|
...
|
||||||
|
```
|
||||||
|
|
||||||
|
यह `<div>` एलेमेन्ट रिक्त है, जिसका अर्थ है कि स्क्रीन पर कुछ भी प्रदर्शित नहीं किया जाएगा जब तक हम इसमें कुछ सामग्री नहीं जोड़ते। हम इसे एक `id` भी देते हैं ताकि हम इसे जावास्क्रिप्ट के साथ आसानी से प्राप्त कर सकें।
|
||||||
|
|
||||||
|
|
||||||
|
`app.js` फ़ाइल पर वापस जाएँ और एक नया सहायक फ़ंक्शन `updateElement` बनाएँ:
|
||||||
|
|
||||||
|
```js
|
||||||
|
function updateElement(id, text) {
|
||||||
|
const element = document.getElementById(id);
|
||||||
|
element.textContent = text;
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
यह एक बहुत सीधा है: एक एलेमेन्ट *आईडी* और *टेक्स्ट* दिया गया है, यह DOM एलेमेन्ट के टेक्स्ट कंटेंट को `id` के मेल से अपडेट करेगा। आइए `login` फ़ंक्शन में पिछले त्रुटि संदेश के स्थान पर इस मेथड का उपयोग करें:
|
||||||
|
|
||||||
|
```js
|
||||||
|
if (data.error) {
|
||||||
|
return updateElement('loginError', data.error);
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
अब यदि आप अमान्य खाते से लॉगिन करने का प्रयास करते हैं, तो आपको कुछ इस तरह से देखना चाहिए:
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
अब हमारे पास त्रुटि पाठ है जो नेत्रहीन रूप से दिखाई देता है, लेकिन यदि आप इसे एक स्क्रीन रीडर के साथ आज़माते हैं तो आप देखेंगे कि कुछ भी घोषित नहीं हुआ है। पाठ पाठकों के लिए गतिशील रूप से एक पृष्ठ में जोड़े जाने की घोषणा के लिए, इसे [लाइव रीजन](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Live_Regions) नामक कुछ का उपयोग करने की आवश्यकता होगी। यहां हम एक विशिष्ट प्रकार के लाइव क्षेत्र का उपयोग करने जा रहे हैं, जिसे अलर्ट कहा जाता है:
|
||||||
|
|
||||||
|
```html
|
||||||
|
<div id="loginError" role="alert"></div>
|
||||||
|
```
|
||||||
|
|
||||||
|
`register` फ़ंक्शन त्रुटियों के लिए समान व्यवहार को लागू करें (एचटीएमएल को अपडेट करना न भूलें)।
|
||||||
|
|
||||||
|
## डैशबोर्ड पर जानकारी प्रदर्शित करें
|
||||||
|
|
||||||
|
हमने अभी जो तकनीक देखी है, उसी का उपयोग करते हुए, हम डैशबोर्ड पृष्ठ पर खाता जानकारी प्रदर्शित करने का भी ध्यान रखेंगे।
|
||||||
|
|
||||||
|
सर्वर से प्राप्त खाता ऑब्जेक्ट ऐसा दिखता है:
|
||||||
|
|
||||||
|
```json
|
||||||
|
{
|
||||||
|
"user": "test",
|
||||||
|
"currency": "$",
|
||||||
|
"description": "Test account",
|
||||||
|
"balance": 75,
|
||||||
|
"transactions": [
|
||||||
|
{ "id": "1", "date": "2020-10-01", "object": "Pocket money", "amount": 50 },
|
||||||
|
{ "id": "2", "date": "2020-10-03", "object": "Book", "amount": -10 },
|
||||||
|
{ "id": "3", "date": "2020-10-04", "object": "Sandwich", "amount": -5 }
|
||||||
|
],
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
> नोट: अपने जीवन को आसान बनाने के लिए, आप पहले से मौजूद `test` खाते का उपयोग कर सकते हैं जो पहले से ही डेटा से आबाद है।
|
||||||
|
|
||||||
|
### टास्क
|
||||||
|
|
||||||
|
प्लेसहोल्डर एलिमेंटस को जोड़ने के लिए HTML में "बैलेंस" अनुभाग को प्रतिस्थापित करके शुरू करें:
|
||||||
|
|
||||||
|
```html
|
||||||
|
<section>
|
||||||
|
Balance: <span id="balance"></span><span id="currency"></span>
|
||||||
|
</section>
|
||||||
|
```
|
||||||
|
|
||||||
|
|
||||||
|
खाता विवरण प्रदर्शित करने के लिए हम नीचे एक नया अनुभाग भी जोड़ेंगे:
|
||||||
|
|
||||||
|
```html
|
||||||
|
<h2 id="description"></h2>
|
||||||
|
```
|
||||||
|
|
||||||
|
✅ चूंकि खाता विवरण इसके नीचे की सामग्री के लिए एक शीर्षक के रूप में कार्य करता है, इसलिए इसे एक शीर्षक के रूप में शब्दार्थ के रूप में चिह्नित किया जाता है। पहुँच क्षमता के लिए [शीर्षक संरचना](https://www.nomensa.com/blog/2017/how-structure-headings-web-accessibility) के बारे में और जानें, और क्या निर्धारित करने के लिए पृष्ठ पर एक महत्वपूर्ण नज़र डालें एक शीर्षक हो सकता है।
|
||||||
|
|
||||||
|
अगला, हम प्लेसहोल्डर में भरने के लिए `app.js` में एक नया फ़ंक्शन बनाएंगे:
|
||||||
|
|
||||||
|
```js
|
||||||
|
function updateDashboard() {
|
||||||
|
if (!account) {
|
||||||
|
return navigate('/login');
|
||||||
|
}
|
||||||
|
|
||||||
|
updateElement('description', account.description);
|
||||||
|
updateElement('balance', account.balance.toFixed(2));
|
||||||
|
updateElement('currency', account.currency);
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
पहले, हम जाँचते हैं कि आगे जाने से पहले हमारे पास खाता डेटा है जो हमें चाहिए। तब हम HTML को अपडेट करने के लिए पहले बनाए गए `updateElement()` फ़ंक्शन का उपयोग करते हैं।
|
||||||
|
|
||||||
|
> बैलेंस डिस्प्ले को प्रीटियर करने के लिए, हम दशमलव बिंदु के बाद 2 अंकों के साथ मान प्रदर्शित करने के लिए मजबूर करने के लिए [`toFixed (2)`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/toFixed) विधि का उपयोग करते हैं।
|
||||||
|
|
||||||
|
अब हमें अपने `updateDashboard()` को हर बार डैशबोर्ड लोड होने पर कॉल करने की आवश्यकता है। यदि आपने पहले ही [पाठ 1 असाइनमेंट](../../1-template-route/translations/assignment.hi.md) को पूरा कर लिया है, तो यह स्ट्रेचेफोवर्ड होना चाहिए, अन्यथा आप निम्नलिखित कार्यान्वयन का उपयोग कर सकते हैं।
|
||||||
|
|
||||||
|
इस कोड को `updateRoute()` फ़ंक्शन के अंत में जोड़ें:
|
||||||
|
|
||||||
|
```js
|
||||||
|
if (typeof route.init === 'function') {
|
||||||
|
route.init();
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
और मार्गों की परिभाषा के साथ अद्यतन करें:
|
||||||
|
|
||||||
|
```js
|
||||||
|
const routes = {
|
||||||
|
'/login': { templateId: 'login' },
|
||||||
|
'/dashboard': { templateId: 'dashboard', init: updateDashboard }
|
||||||
|
};
|
||||||
|
```
|
||||||
|
|
||||||
|
इस परिवर्तन के साथ, हर बार डैशबोर्ड पृष्ठ प्रदर्शित होने पर, फ़ंक्शन `updateDashboard()` कल किया जाता है। एक लॉगिन के बाद, आपको तब खाता शेष, मुद्रा और विवरण देखने में सक्षम होना चाहिए।
|
||||||
|
|
||||||
|
## HTML टेम्पलेट के साथ गतिशील रूप से तालिका पंक्तियाँ बनाएं
|
||||||
|
|
||||||
|
[पहला पाठ](../../1-template-route/translations/README.hi.md) मे हमने एचटीएमएल टेम्पलेटके साथ [`appendChild()`](https://developer.mozilla.org/en-US/docs/Web/API/Node/appendChild) मेथड को नेवीगेशनके लिए अपने एप मे लागू किया था । टेम्प्लेट छोटे भी हो सकते हैं और किसी पृष्ठ के दोहराए गए भागों को गतिशील रूप से आबाद करने के लिए उपयोग किए जा सकते हैं।
|
||||||
|
|
||||||
|
हम एचटीएमएल तालिका में लेनदेन की सूची प्रदर्शित करने के लिए एक समान दृष्टिकोण का उपयोग करेंगे।
|
||||||
|
|
||||||
|
### टास्क
|
||||||
|
|
||||||
|
HTML `<body>` में एक नया टेम्प्लेट जोड़ें :
|
||||||
|
|
||||||
|
```html
|
||||||
|
<template id="transaction">
|
||||||
|
<tr>
|
||||||
|
<td></td>
|
||||||
|
<td></td>
|
||||||
|
<td></td>
|
||||||
|
</tr>
|
||||||
|
</template>
|
||||||
|
```
|
||||||
|
|
||||||
|
यह टेम्प्लेट एक एकल तालिका पंक्ति का प्रतिनिधित्व करता है, 3 कॉलम जिन्हें हम आबाद करना चाहते हैं: *डेट*, *ऑब्जेक्ट* और लेनदेन की *अमाउन्ट*।
|
||||||
|
|
||||||
|
फिर, इस `<id>` गुण को डैशबोर्ड टेम्पलेट के भीतर स्थित तालिका के तत्व `<tbody>` में जोड़ें, जिससे जावास्क्रिप्ट का उपयोग करना आसान हो:
|
||||||
|
|
||||||
|
```html
|
||||||
|
<tbody id="transactions"></tbody>
|
||||||
|
```
|
||||||
|
|
||||||
|
हमारा HTML तैयार है, चलो जावास्क्रिप्ट कोड पर जाएँ और एक नया फ़ंक्शन `createTransactionRow` बनाएं :
|
||||||
|
|
||||||
|
```js
|
||||||
|
function createTransactionRow(transaction) {
|
||||||
|
const template = document.getElementById('transaction');
|
||||||
|
const transactionRow = template.content.cloneNode(true);
|
||||||
|
const tr = transactionRow.querySelector('tr');
|
||||||
|
tr.children[0].textContent = transaction.date;
|
||||||
|
tr.children[1].textContent = transaction.object;
|
||||||
|
tr.children[2].textContent = transaction.amount.toFixed(2);
|
||||||
|
return transactionRow;
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
यह फ़ंक्शन ठीक वही करता है जो इसके नाम का अर्थ है: हमने पहले बनाए गए टेम्पलेट का उपयोग करके, यह एक नई तालिका पंक्ति बनाता है और लेनदेन डेटा का उपयोग करके अपनी सामग्री में भरता है। हम टेबल को आबाद करने के लिए अपने `updateDashboard()` फ़ंक्शन में इसका उपयोग करेंगे:
|
||||||
|
|
||||||
|
```js
|
||||||
|
const transactionsRows = document.createDocumentFragment();
|
||||||
|
for (const transaction of account.transactions) {
|
||||||
|
const transactionRow = createTransactionRow(transaction);
|
||||||
|
transactionsRows.appendChild(transactionRow);
|
||||||
|
}
|
||||||
|
updateElement('transactions', transactionsRows);
|
||||||
|
```
|
||||||
|
|
||||||
|
यहां हम उस मेथड का उपयोग करते हैं [`document.createDocumentFragment()`](https://developer.mozilla.org/en-US/docs/Web/API/Document/createDocumentFragment) जो एक नया DOM टुकड़ा बनाता है जिस पर हम काम कर सकते हैं, अंत में इसे हमारे HTML तालिका में संलग्न करने से पहले।
|
||||||
|
|
||||||
|
इस कोड के काम करने से पहले अभी भी हमें एक और काम करना है, क्योंकि हमारा `updateElement()` फ़ंक्शन वर्तमान में केवल टेक्स्ट सामग्री का सपोर्ट करता है। आइए इसके कोड को थोड़ा बदलें:
|
||||||
|
|
||||||
|
```js
|
||||||
|
function updateElement(id, textOrNode) {
|
||||||
|
const element = document.getElementById(id);
|
||||||
|
element.textContent = ''; // Removes all children
|
||||||
|
element.append(textOrNode);
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
हम [`append()`](https://developer.mozilla.org/en-US/docs/Web/API/ParentNode/append) मेथड का उपयोग करते हैं क्योंकि यह टेक्स्ट या [DOM नोड्स](https://developer.mozilla.org/en-US/docs/Web/API/Node) को पेरन्ट एलेमेन्टसे जोड़ने की अनुमति देता है , जो हमारे सभी उपयोग मामलों के लिए एकदम सही है।
|
||||||
|
|
||||||
|
यदि आप लॉगिन करने के लिए `टेस्ट` खाते का उपयोग करने का प्रयास करते हैं, तो आपको अब डैशबोर्ड पर एक लेनदेन सूची देखनी चाहिए 🎉.
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 🚀 चुनौती
|
||||||
|
|
||||||
|
डैशबोर्ड पृष्ठ को वास्तविक बैंकिंग ऐप की तरह बनाने के लिए एक साथ काम करें। यदि आप पहले से ही अपने ऐप को स्टाइल करते हैं, तो डेस्कटॉप और मोबाइल डिवाइस दोनों पर अच्छी तरह से काम करते हुए [उत्तरदायी डिज़ाइन](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://nice-beach-0fe9e9d0f.azurestaticapps.net/quiz/46?loc=hi)
|
||||||
|
|
||||||
|
## असाइनमेंट
|
||||||
|
|
||||||
|
[Refactor and comment your code](assignment.hi.md)
|
||||||
@ -0,0 +1,284 @@
|
|||||||
|
# एक बैंकिंग ऐप का निर्माण करें भाग 4: स्टेट प्रबंधन की अवधारणा
|
||||||
|
|
||||||
|
## पूर्व व्याख्यान प्रश्नोत्तरी
|
||||||
|
|
||||||
|
[पूर्व व्याख्यान प्रश्नोत्तरी](https://nice-beach-0fe9e9d0f.azurestaticapps.net/quiz/47?loc=hi)
|
||||||
|
|
||||||
|
### परिचय
|
||||||
|
|
||||||
|
जैसे-जैसे वेब एप्लिकेशन बढ़ता है, यह सभी डेटा फ्लो पर नज़र रखना एक चुनौती बन जाता है। किस कोड को डेटा मिलता है, कौन सा पेज इसका उपभोग करता है, कहां और कब इसे अपडेट करने की आवश्यकता होती है ... गंदे कोड को समाप्त करना आसान है जिसे बनाए रखना मुश्किल है। यह विशेष रूप से सच है जब आपको अपने ऐप के विभिन्न पृष्ठों के बीच डेटा साझा करने की आवश्यकता होती है, उदाहरण के लिए उपयोगकर्ता डेटा। *स्टेट प्रबंधन* की अवधारणा हमेशा सभी प्रकार के कार्यक्रमों में मौजूद रही है, लेकिन जैसा कि वेब ऐप जटिलता में बढ़ रहे हैं, यह अब विकास के दौरान सोचने का एक महत्वपूर्ण बिंदु है।
|
||||||
|
|
||||||
|
इस अंतिम भाग में, हम उस ऐप पर नज़र डालेंगे जिसे हमने बनाया है कि स्टेट कैसे प्रबंधित किया जाता है, किसी भी बिंदु पर ब्राउज़र रीफ्रेश के लिए समर्थन और उपयोगकर्ता सत्रों में डेटा को बनाए रखने की अनुमति देता है।
|
||||||
|
|
||||||
|
### शर्त
|
||||||
|
|
||||||
|
आपको इस पाठ के लिए वेब ऐप का [डेटा प्राप्त करने](../../3-data/translations/README.hi.md) वाला भाग पूरा करना होगा। आपको स्थानीय रूप से [Node.js](https://nodejs.org) और [सर्वर एपीआई चलाने](../../api/translations/README.hi.md) को स्थापित करने की आवश्यकता है ताकि आप खाता डेटा प्रबंधित कर सकें।
|
||||||
|
|
||||||
|
आप परीक्षण कर सकते हैं कि सर्वर टर्मिनल में इस कमांड को निष्पादित करके ठीक से चल रहा है:
|
||||||
|
|
||||||
|
```sh
|
||||||
|
curl http://localhost:5000/api
|
||||||
|
# -> should return "Bank API v1.0.0" as a result
|
||||||
|
```
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## स्टेट प्रबंधन पुनर्विचार
|
||||||
|
|
||||||
|
[पिछले पाठ](../../3-data/translations/README.hi.md) में, हमने अपने ऐप में वैश्विक `account` चर के साथ स्टेट की एक बुनियादी अवधारणा पेश की, जिसमें वर्तमान में लॉग इन उपयोगकर्ता के लिए बैंक डेटा शामिल है। हालांकि, हमारे वर्तमान कार्यान्वयन में कुछ खामियां हैं। जब आप डैशबोर्ड पर हों तो पृष्ठ को ताज़ा करने का प्रयास करें। क्या होता है?
|
||||||
|
|
||||||
|
वर्तमान कोड के साथ 3 समस्याएँ हैं:
|
||||||
|
|
||||||
|
- स्टेट कायम नहीं है, क्योंकि ब्राउज़र रीफ़्रेश आपको लॉगिन पृष्ठ पर वापस ले जाता है।
|
||||||
|
- स्टेट को संशोधित करने वाले कई कार्य हैं। जैसे-जैसे ऐप बढ़ता है, यह परिवर्तनों को ट्रैक करना मुश्किल बना सकता है और किसी एक को अपडेट करना भूल जाना आसान है।
|
||||||
|
- स्टेट को साफ नहीं किया जाता है, इसलिए जब आप * लॉगआउट * पर क्लिक करते हैं, तो खाता डेटा अभी भी वहीं है जबकि आप लॉगिन पेज पर हैं।
|
||||||
|
|
||||||
|
हम एक-एक करके इन मुद्दों से निपटने के लिए अपने कोड को अपडेट कर सकते हैं, लेकिन यह अधिक कोड दोहराव पैदा करेगा और ऐप को अधिक जटिल और बनाए रखना मुश्किल होगा। या हम कुछ मिनटों के लिए रुक सकते हैं और अपनी रणनीति पर फिर से विचार कर सकते हैं।
|
||||||
|
|
||||||
|
>
|
||||||
|
हम वास्तव में किन समस्याओं को हल करने की कोशिश कर रहे हैं?
|
||||||
|
|
||||||
|
[स्टेट प्रबंधन](https://en.wikipedia.org/wiki/State_management) इन दो विशेष समस्याओं को हल करने के लिए एक अच्छा तरीका खोजने के बारे में है:
|
||||||
|
|
||||||
|
- ऐप में डेटा फ्लो को कैसे समझा जा सकता है?
|
||||||
|
- उपयोगकर्ता इंटरफ़ेस (और इसके विपरीत) के साथ स्टेट के डेटा को हमेशा सिंक में कैसे रखा जाए?
|
||||||
|
|
||||||
|
एक बार जब आप इनका ध्यान रख लेते हैं, तो हो सकता है कि कोई अन्य समस्या या तो पहले से ही ठीक हो जाए या जिसे ठीक करना आसान हो जाए। इन समस्याओं को हल करने के लिए कई संभावित दृष्टिकोण हैं, लेकिन हम एक सामान्य समाधान के साथ जाएंगे जिसमें डेटा को **केंद्रीकृत करना और इसे बदलने के तरीके** शामिल हैं। डेटा प्रवाह इस तरह होगा:
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
> हम यहां उस हिस्से को कवर नहीं करेंगे जहां डेटा स्वचालित रूप से दृश्य अद्यतन को ट्रिगर करता है, क्योंकि यह [रीऐक्टिव प्रोग्रामिंग](https://en.wikipedia.org/wiki/Reactive_programming) की अधिक उन्नत अवधारणाओं से बंधा है। यदि आप एक गहरी गोता लगाने के लिए एक अच्छा अनुवर्ती विषय है।
|
||||||
|
|
||||||
|
✅ स्टेट प्रबंधन के विभिन्न दृष्टिकोणों के साथ वहाँ बहुत सारे पुस्तकालय हैं, [Redux](https://redux.js.org) एक लोकप्रिय विकल्प है। उपयोग की जाने वाली अवधारणाओं और पैटर्नों पर एक नज़र डालें क्योंकि यह अक्सर सीखने का एक अच्छा तरीका है कि आप बड़े वेब ऐप में किन संभावित मुद्दों का सामना कर रहे हैं और इसे कैसे हल किया जा सकता है।
|
||||||
|
|
||||||
|
### टास्क
|
||||||
|
|
||||||
|
हम थोड़ा सा रिफैक्टरिंग के साथ शुरुआत करेंगे। `account` घोषणा बदलें:
|
||||||
|
|
||||||
|
```js
|
||||||
|
let account = null;
|
||||||
|
```
|
||||||
|
|
||||||
|
With:
|
||||||
|
|
||||||
|
```js
|
||||||
|
let state = {
|
||||||
|
account: null
|
||||||
|
};
|
||||||
|
```
|
||||||
|
|
||||||
|
एक स्टेट वस्तु में हमारे सभी एप्लिकेशन डेटा को *केंद्रीकृत* करने का विचार है। हमारे पास स्टेट में अभी के लिए `account` है, इसलिए यह बहुत अधिक नहीं बदलता है, लेकिन यह प्रस्तावों के लिए एक रास्ता बनाता है।
|
||||||
|
|
||||||
|
|
||||||
|
हमें इसका उपयोग करके कार्यों को भी अपडेट करना होगा। `register()` और `login()` फंगक्शनसमे,`account = ...` को `state.account = ...` से बदले;
|
||||||
|
|
||||||
|
`UpdateDashboard()` फ़ंक्शन के शीर्ष पर, यह पंक्ति जोड़ें:
|
||||||
|
|
||||||
|
```js
|
||||||
|
const account = state.account;
|
||||||
|
```
|
||||||
|
|
||||||
|
अपने आप में इस रिफ्रैक्टिंग में बहुत सुधार नहीं हुआ, लेकिन विचार अगले बदलावों की नींव रखने का था।
|
||||||
|
|
||||||
|
## डेटा परिवर्तन ट्रैक करें
|
||||||
|
|
||||||
|
अब जब हमने अपने डेटा को स्टोर करने के लिए `state` ऑब्जेक्ट को रखा है, तो अगला चरण अपडेट को केंद्रीकृत करना है। लक्ष्य किसी भी परिवर्तन का ट्रैक रखना आसान है और जब वे होते हैं।
|
||||||
|
|
||||||
|
`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) का उपयोग कर सकते हैं । यदि आप एक अपरिवर्तनीय वस्तु में परिवर्तन करने की कोशिश करते हैं, तो एक अपवाद उठाया जाएगा।
|
||||||
|
|
||||||
|
✅ क्या आप एक *उथले* और एक *गहरी* अपरिवर्तनीय वस्तु के बीच का अंतर जानते हैं? आप इसके बारे में [यहां](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/freeze#What_is_shallow_freeze) पढ़ सकते हैं.
|
||||||
|
|
||||||
|
### टास्क
|
||||||
|
|
||||||
|
Let's create a new `updateState()` function:
|
||||||
|
|
||||||
|
```js
|
||||||
|
function updateState(property, newData) {
|
||||||
|
state = Object.freeze({
|
||||||
|
...state,
|
||||||
|
[property]: newData
|
||||||
|
});
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
इस फ़ंक्शन में, हम [*spread (`...`) operator*](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_syntax#Spread_in_object_literals) का उपयोग करके पिछले स्टेट से एक नया स्टेट ऑब्जेक्ट और कॉपी डेटा बना रहे हैं। फिर हम नए डेटा के साथ स्टेट ऑब्जेक्ट की एक विशेष प्रॉपर्टी को ओवरराइड करते हैं [ब्रैकेट नोटेशन] `[property]` असाइनमेंट के लिए। अंत में, हम `Object.freeze()` का उपयोग करके संशोधनों को रोकने के लिए ऑब्जेक्ट को लॉक करते हैं। हमारे पास अब केवल स्टेट में संग्रहीत `अकाउंट` प्रॉपर्टी है, लेकिन इस दृष्टिकोण के साथ आप स्टेट में जितनी आवश्यकता हो उतने गुण जोड़ सकते हैं।
|
||||||
|
|
||||||
|
हम यह भी सुनिश्चित करेंगे कि प्रारंभिक अवस्था भी जम गई है, यह सुनिश्चित करने के लिए `state` आरंभीकरण को अद्यतन करेगा:
|
||||||
|
|
||||||
|
```js
|
||||||
|
let state = Object.freeze({
|
||||||
|
account: null
|
||||||
|
});
|
||||||
|
```
|
||||||
|
|
||||||
|
उसके बाद, `state.account = result` के स्थान पर `register` फ़ंक्शन को अपडेट करें; असाइनमेंट के साथ:
|
||||||
|
|
||||||
|
```js
|
||||||
|
updateState('account', result);
|
||||||
|
```
|
||||||
|
|
||||||
|
`login` फ़ंक्शन के साथ भी ऐसा ही करें, `state.account = data;` के स्थान पर:
|
||||||
|
|
||||||
|
```js
|
||||||
|
updateState('account', data);
|
||||||
|
```
|
||||||
|
|
||||||
|
जब उपयोगकर्ता *लॉगआउट* पर क्लिक करेगा तो हम खाता डेटा के मुद्दे को ठीक करने का मौका नहीं लेंगे।
|
||||||
|
|
||||||
|
एक नया `logout()` फंगक्शन बनाए:
|
||||||
|
|
||||||
|
```js
|
||||||
|
function logout() {
|
||||||
|
updateState('account', null);
|
||||||
|
navigate('/login');
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
`updateDashboard()` मे , पुनर्निर्देशन `return navigate('/login');` की जगह `return logout()` के साथ;
|
||||||
|
|
||||||
|
एक नया खाता पंजीकृत करने की कोशिश करें, लॉग आउट करें और फिर से जाँच करें कि सब कुछ अभी भी सही ढंग से काम करता है।
|
||||||
|
|
||||||
|
युक्ति: आप `updateState()` के तल पर `console.log(state)` जोड़कर और अपने ब्राउज़र के डेवलपमेंट टूल में कंसोल खोलकर सभी स्टेट परिवर्तनों पर एक नज़र डाल सकते हैं।
|
||||||
|
|
||||||
|
## स्टेट को पर्सिस्ट करे
|
||||||
|
|
||||||
|
अधिकांश वेब ऐप्स को डेटा को सही ढंग से काम करने में सक्षम बनाने के लिए लगातार बने रहने की आवश्यकता होती है। सभी महत्वपूर्ण डेटा को आमतौर पर डेटाबेस पर संग्रहीत किया जाता है और सर्वर एपीआई के माध्यम से एक्सेस किया जाता है, जैसे हमारे मामले में उपयोगकर्ता खाता डेटा। लेकिन कभी-कभी, एक बेहतर उपयोगकर्ता अनुभव के लिए या लोडिंग प्रदर्शन में सुधार करने के लिए आपके ब्राउज़र में चल रहे क्लाइंट ऐप पर कुछ डेटा को जारी रखना भी दिलचस्प है।
|
||||||
|
|
||||||
|
जब आप अपने ब्राउज़र में डेटा को पर्सिस्ट रखना चाहते हैं, तो कुछ महत्वपूर्ण सवाल हैं जो आपको खुद से पूछना चाहिए:
|
||||||
|
|
||||||
|
- *क्या डेटा संवेदनशील है?* आपको क्लाइंट पर किसी भी संवेदनशील डेटा, जैसे उपयोगकर्ता पासवर्ड को संग्रहीत करने से बचना चाहिए।
|
||||||
|
- *आपको यह डेटा कब तक रखने की आवश्यकता है?* क्या आप इस डेटा को केवल वर्तमान सत्र के लिए एक्सेस करने की योजना बना रहे हैं या क्या आप चाहते हैं कि यह हमेशा के लिए स्टोर हो जाए?
|
||||||
|
|
||||||
|
वेब ऐप के अंदर जानकारी संग्रहीत करने के कई तरीके हैं, जो इस बात पर निर्भर करता है कि आप क्या हासिल करना चाहते हैं। उदाहरण के लिए, आप खोज क्वेरी को संग्रहीत करने के लिए URL का उपयोग कर सकते हैं, और इसे उपयोगकर्ताओं के बीच साझा करने योग्य बना सकते हैं। यदि आप डेटा को सर्वर के साथ साझा करने की आवश्यकता है, जैसे कि [authentication](https://en.wikipedia.org/wiki/Authentication) की जानकारी।
|
||||||
|
|
||||||
|
|
||||||
|
एक अन्य विकल्प डेटा भंडारण के लिए कई ब्राउज़र एपीआई में से एक का उपयोग करना है। उनमें से दो विशेष रूप से दिलचस्प हैं:
|
||||||
|
|
||||||
|
- [`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` की तरह ही काम करता है, सिवाय इसके कि इसमें संग्रहीत डेटा सत्र समाप्त होने पर (जब ब्राउज़र बंद हो जाता है) साफ हो जाता है।
|
||||||
|
|
||||||
|
यदि आप जटिल वस्तुओं को संग्रहीत करना चाहते हैं, तो आपको इसे [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) का उपयोग करके क्रमबद्ध करना होगा।
|
||||||
|
|
||||||
|
✅ यदि आप एक वेब ऐप बनाना चाहते हैं जो सर्वर के साथ काम नहीं करता है, तो [`IndexedDB` API](https://developer.mozilla.org/en-US/docs/Web/API/IndexedDB_API) का उपयोग करके क्लाइंट पर डेटाबेस बनाना भी संभव है। यह एक उन्नत उपयोग मामलों के लिए आरक्षित है या यदि आपको महत्वपूर्ण मात्रा में डेटा संग्रहीत करने की आवश्यकता है, क्योंकि यह उपयोग करने के लिए अधिक जटिल है।
|
||||||
|
|
||||||
|
### टास्क
|
||||||
|
|
||||||
|
हम चाहते हैं कि हमारे उपयोगकर्ता तब तक लॉग इन रहें जब तक कि वे स्पष्ट रूप से *लॉगआउट* बटन पर क्लिक न करें, इसलिए हम खाता डेटा संग्रहीत करने के लिए `localStorage` का उपयोग करेंगे। सबसे पहले, एक कुंजी परिभाषित करते हैं जिसका उपयोग हम अपने डेटा को संग्रहीत करने के लिए करेंगे।.
|
||||||
|
|
||||||
|
```js
|
||||||
|
const storageKey = 'savedAccount';
|
||||||
|
```
|
||||||
|
|
||||||
|
फिर इस लाइन को `updateState()` फ़ंक्शन के अंत में जोड़ें:
|
||||||
|
|
||||||
|
```js
|
||||||
|
localStorage.setItem(storageKey, JSON.stringify(state.account));
|
||||||
|
```
|
||||||
|
|
||||||
|
इसके साथ, उपयोगकर्ता खाते के डेटा को बनाए रखा जाएगा और हमेशा अप-टू-डेट रहेगा क्योंकि हमने अपने सभी स्टेट अपडेट पहले केंद्रीकृत किए थे। यह वह जगह है जहाँ हम अपने सभी पिछले रिफ्लेक्टरों से लाभान्वित होने लगते हैं 🙂.
|
||||||
|
|
||||||
|
डेटा सहेजे जाने के साथ, हमें ऐप को लोड करने पर इसे पुनर्स्थापित करने का भी ध्यान रखना होगा। चूंकि हम अधिक आरंभीकरण कोड शुरू करेंगे, इसलिए यह एक नया `init` फ़ंक्शन बनाने के लिए एक अच्छा विचार हो सकता है, जिसमें `app.js` के नीचे हमारा पिछला कोड भी शामिल है।:
|
||||||
|
|
||||||
|
```js
|
||||||
|
function init() {
|
||||||
|
const savedAccount = localStorage.getItem(storageKey);
|
||||||
|
if (savedAccount) {
|
||||||
|
updateState('account', JSON.parse(savedAccount));
|
||||||
|
}
|
||||||
|
|
||||||
|
// Our previous initialization code
|
||||||
|
window.onpopstate = () => updateRoute();
|
||||||
|
updateRoute();
|
||||||
|
}
|
||||||
|
|
||||||
|
init();
|
||||||
|
```
|
||||||
|
|
||||||
|
यहां हम सहेजे गए डेटा को पुनर्प्राप्त करते हैं, और यदि कोई है तो हम तदनुसार स्टेट को अपडेट करते हैं। रूट अपडेट करने से *पहले* इसे करना महत्वपूर्ण है, क्योंकि पेज अपडेट के दौरान स्टेट पर कोड निर्भर हो सकता है।
|
||||||
|
|
||||||
|
हम अपने एप्लिकेशन डिफॉल्ट पेज को भी * डैशबोर्ड * पेज बना सकते हैं, क्योंकि हम अब खाता डेटा को जारी रख रहे हैं। यदि कोई डेटा नहीं मिला है, तो डैशबोर्ड * लॉगिन * पेज वैसे भी पुनर्निर्देशित करने का ख्याल रखता है। `updateRoute()` में, फ़ॉलबैक `return navigate('/login');` को `return navigate('/dashboard');` से बदलें।
|
||||||
|
|
||||||
|
अब ऐप में लॉगइन करें और पेज को रिफ्रेश करने की कोशिश करें। आपको डैशबोर्ड पर रहना चाहिए। उस अपडेट के साथ हमने अपने सभी शुरुआती मुद्दों का ध्यान रखा है ...
|
||||||
|
|
||||||
|
## डाटाको रिफ्रेश करे
|
||||||
|
|
||||||
|
...लेकिन हम एक नया भी बना सकते हैं। ऊपस!
|
||||||
|
|
||||||
|
`test` खाते का उपयोग करके डैशबोर्ड पर जाएं, फिर एक नया लेनदेन बनाने के लिए इस कमांड को टर्मिनल पर चलाएं:
|
||||||
|
|
||||||
|
```sh
|
||||||
|
curl --request POST \
|
||||||
|
--header "Content-Type: application/json" \
|
||||||
|
--data "{ \"date\": \"2020-07-24\", \"object\": \"Bought book\", \"amount\": -20 }" \
|
||||||
|
http://localhost:5000/api/accounts/test/transactions
|
||||||
|
```
|
||||||
|
|
||||||
|
अब ब्राउज़र में अपने डैशबोर्ड पृष्ठ को रिफ्रेश करने का प्रयास करें। क्या होता है? क्या आप नया लेनदेन देखते हैं?
|
||||||
|
|
||||||
|
स्टेट अनिश्चित काल तक `localStorage` की बदौलत कायम है, लेकिन इसका मतलब यह भी है कि यह तब तक अपडेट नहीं किया जाता जब तक आप ऐप से लॉग-आउट नहीं करते और फिर से लॉग इन नहीं करते!
|
||||||
|
|
||||||
|
स्टेक डेटा से बचने के लिए, हर बार डैशबोर्ड को लोड करने के बाद खाते के डेटा को फिर से लोड करना एक निश्चित रणनीति है।
|
||||||
|
|
||||||
|
### टास्क
|
||||||
|
|
||||||
|
एक नया फंगक्शन `updateAccountData` बनाए:
|
||||||
|
|
||||||
|
```js
|
||||||
|
async function updateAccountData() {
|
||||||
|
const account = state.account;
|
||||||
|
if (!account) {
|
||||||
|
return logout();
|
||||||
|
}
|
||||||
|
|
||||||
|
const data = await getAccount(account.user);
|
||||||
|
if (data.error) {
|
||||||
|
return logout();
|
||||||
|
}
|
||||||
|
|
||||||
|
updateState('account', data);
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
यह विधि जांचती है कि हम वर्तमान में लॉग इन हैं फिर सर्वर से खाता डेटा पुनः लोड करता है।
|
||||||
|
|
||||||
|
एक दूसरा नया `refresh` नामका फंगक्शन बनाए:
|
||||||
|
|
||||||
|
```js
|
||||||
|
async function refresh() {
|
||||||
|
await updateAccountData();
|
||||||
|
updateDashboard();
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
यह एक खाता डेटा अपडेट करता है, फिर डैशबोर्ड पृष्ठ के HTML को अपडेट करने का ध्यान रखता है। डैशबोर्ड मार्ग लोड होने पर हमें यह कॉल करना होगा। इसके साथ रूट की परिभाषा को अपडेट करें:
|
||||||
|
|
||||||
|
```js
|
||||||
|
const routes = {
|
||||||
|
'/login': { templateId: 'login' },
|
||||||
|
'/dashboard': { templateId: 'dashboard', init: refresh }
|
||||||
|
};
|
||||||
|
```
|
||||||
|
|
||||||
|
डैशबोर्ड को अब पुनः लोड करने का प्रयास करें, इसे अद्यतन खाता डेटा प्रदर्शित करना चाहिए।
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 🚀 चुनौती
|
||||||
|
|
||||||
|
अब जब हम डैशबोर्ड लोड होने के बाद हर बार खाते के डेटा को लोड करते हैं, तो क्या आपको लगता है कि हमें अभी भी *सभी खाते* डेटा को बनाए रखने की आवश्यकता है?
|
||||||
|
|
||||||
|
सहेजने और लोड करने के लिए एक साथ काम करने का प्रयास करें `localStorage` से केवल उस ऐप में काम करने के लिए जो आवश्यक है उसे शामिल करें।
|
||||||
|
|
||||||
|
## व्याख्यान उपरांत प्रश्नोत्तरी
|
||||||
|
|
||||||
|
[व्याख्यान उपरांत प्रश्नोत्तरी](https://nice-beach-0fe9e9d0f.azurestaticapps.net/quiz/48?loc=hi)
|
||||||
|
|
||||||
|
## असाइनमेंट
|
||||||
|
|
||||||
|
["ट्रैन्सैक्शन जोड़े" डायलॉग इम्प्लमेन्ट करे](assignment.hi.md)
|
||||||
|
|
||||||
|
यहां असाइनमेंट पूरा करने के बाद एक उदाहरण दिया गया है:
|
||||||
|
|
||||||
|
|
||||||
@ -0,0 +1,88 @@
|
|||||||
|
[](https://github.com/microsoft/Web-Dev-For-Beginners/blob/master/LICENSE)
|
||||||
|
[](https://GitHub.com/microsoft/Web-Dev-For-Beginners/graphs/contributors/)
|
||||||
|
[](https://GitHub.com/microsoft/Web-Dev-For-Beginners/issues/)
|
||||||
|
[](https://GitHub.com/microsoft/Web-Dev-For-Beginners/pull/)
|
||||||
|
[](http://makeapullrequest.com)
|
||||||
|
|
||||||
|
[](https://GitHub.com/microsoft/Web-Dev-For-Beginners/watchers/)
|
||||||
|
[](https://GitHub.com/microsoft/Web-Dev-For-Beginners/network/)
|
||||||
|
[](https://GitHub.com/microsoft/Web-Dev-For-Beginners/stargazers/)
|
||||||
|
|
||||||
|
|
||||||
|
# शुरुआती के लिए वेब विकास - एक पाठ्यक्रम
|
||||||
|
|
||||||
|
Microsoft में Azure Cloud Advocates को 12-सप्ताह, 24-पाठ पाठ्यक्रम सभी JavaScript, सीएसएस और HTML मूल बातें प्रदान करने की कृपा है। प्रत्येक पाठ में पूर्व और बाद के पाठ क्विज़ शामिल हैं, पाठ को पूरा करने के लिए लिखित निर्देश, एक समाधान, एक असाइनमेंट और बहुत कुछ। हमारी परियोजना-आधारित शिक्षाशास्त्र आपको निर्माण करते समय सीखने की अनुमति देता है, नए कौशल 'stick =' के लिए एक सिद्ध तरीका है।
|
||||||
|
|
||||||
|
**हमारे लेखकों जेन लूपर, क्रिस नॉरिंग, क्रिस्टोफर हैरिसन, जैस्मीन ग्रीनवे, योहान लसोरा, फ़्लोर ड्रीज़ और स्केचनोट कलाकार टोमी इमुरा को हार्दिक धन्यवाद!**
|
||||||
|
|
||||||
|
> **शिक्षकों**, हमने इस पाठ्यक्रम का उपयोग करने के बारे में [कुछ सुझाव](for-teachers.hi.md) शामिल किए हैं। यदि आप अपना स्वयं का पाठ बनाना चाहते हैं, तो हमने एक [पाठ टेम्पलेट](lesson-template/translations/README.hi.md) भी शामिल किया है
|
||||||
|
|
||||||
|
**छात्र**, अपने दम पर इस पाठ्यक्रम का उपयोग करने के लिए, पूरे रेपो को फोर्क करें और अपने दम पर अभ्यास पूरा करें, एक प्री-लेक्चर क्विज़ से शुरू करें, फिर लेक्चर को पढ़ें और बाकी गतिविधियों को पूरा करें। समाधान कोड को कॉपी करने के बजाय पाठों को समझकर परियोजनाओं को बनाने की कोशिश करें; हालाँकि यह कोड प्रत्येक प्रोजेक्ट-ओरिएंटेड पाठ में / समाधान फ़ोल्डर में उपलब्ध है। एक और विचार दोस्तों के साथ एक अध्ययन समूह बनाने और एक साथ सामग्री के माध्यम से जाने का होगा। आगे के अध्ययन के लिए, हम अनुशंसा करते हैं [Microsoft Learn](https://docs.microsoft.com/users/jenlooper-2911/collections/jg2gax8pzd6o81?WT.mc_id=academic-13441-cxa) और नीचे दिए गए वीडियो देखकर।
|
||||||
|
|
||||||
|
[](https://youtube.com/watch?v=R1wrdtmBSII "प्रोमो वीडियो")
|
||||||
|
|
||||||
|
> परियोजना के बारे में एक वीडियो और इसे बनाने वाले लोगों के लिए ऊपर की छवि पर क्लिक करें!
|
||||||
|
|
||||||
|
## शिक्षणशास्र
|
||||||
|
|
||||||
|
हमने इस पाठ्यक्रम का निर्माण करते समय दो शैक्षणिक सिद्धांतों को चुना है: यह सुनिश्चित करना कि यह परियोजना-आधारित है और इसमें बार-बार क्विज़ शामिल हैं। इस श्रृंखला के अंत तक, छात्रों ने एक टाइपिंग गेम, एक वर्चुअल टेरारियम, एक 'ग्रीन' ब्राउज़र एक्सटेंशन, एक 'स्पेस इनवेस्टर्स' टाइप गेम और एक बिजनेस-टाइप बैंकिंग ऐप बनाया होगा, और जावास्क्रिप्ट की मूल बातें सीखी होंगी। , आज के वेब डेवलपर के आधुनिक टूलचैन के साथ, HTML और सीएसएस।
|
||||||
|
|
||||||
|
यह सुनिश्चित करते हुए कि सामग्री परियोजनाओं के साथ संरेखित होती है, प्रक्रिया को छात्रों के लिए अधिक आकर्षक बनाया जाता है और अवधारणाओं की अवधारण को संवर्धित किया जाएगा। हमने अवधारणाओं को पेश करने के लिए जावास्क्रिप्ट मूल बातें में कई स्टार्टर पाठ भी लिखे, वीडियो ट्यूटोरियल के "[Beginners Series to: JavaScript](https://channel9.msdn.com/Series/Beginners-Series-to-JavaScript?WT.mc_id=academic-13441-cxa)" संग्रह के साथ, जिनके कुछ लेखकों ने इस पाठ्यक्रम में योगदान दिया।
|
||||||
|
|
||||||
|
इसके अलावा, एक कक्षा से पहले एक कम-दांव प्रश्नोत्तरी एक विषय सीखने की दिशा में छात्र का इरादा निर्धारित करता है, जबकि कक्षा के बाद एक दूसरा प्रश्नोत्तरी एक प्रतिधारण सुनिश्चित करता है। इस पाठ्यक्रम को लचीला और मज़ेदार बनाने के लिए डिज़ाइन किया गया था और इसे पूरे या आंशिक रूप से लिया जा सकता है। परियोजनाएं छोटी शुरू होती हैं और 12 सप्ताह के चक्र के अंत तक तेजी से जटिल हो जाती हैं।
|
||||||
|
|
||||||
|
जबकि हमने उद्देश्यपूर्ण रूप से जावास्क्रिप्ट फ्रेमवर्क शुरू करने से बचा है, ताकि एक फ्रेमवर्क अपनाने से पहले वेब डेवलपर के रूप में आवश्यक बुनियादी कौशल पर ध्यान केंद्रित किया जा सके, इस पाठ्यक्रम को पूरा करने के लिए एक अच्छा अगला कदम वीडियो के एक अन्य संग्रह के माध्यम से Node.js के बारे में सीखना होगा: "[Beginner Series to: Node.js](https://channel9.msdn.com/Series/Beginners-Series-to-Nodejs?WT.mc_id=academic-13441-cxa)".
|
||||||
|
|
||||||
|
हमारे [आचार संहिता](/CODE_OF_CONDUCT.md), [योगदान](/CONTRIBUTING.md), और [अनुवाद](/TRANSLATIONS.md) दिशानिर्देश खोजें। हम आपकी रचनात्मक प्रतिक्रिया का स्वागत करते हैं!
|
||||||
|
>
|
||||||
|
## प्रत्येक पाठ में शामिल हैं:
|
||||||
|
|
||||||
|
- वैकल्पिक स्केचनोकोट
|
||||||
|
- वैकल्पिक पूरक वीडियो
|
||||||
|
- पूर्व-व्याख्यान वार्मअप प्रश्नोत्तरी
|
||||||
|
- लिखित पाठ
|
||||||
|
- प्रोजेक्ट-आधारित पाठों के लिए, प्रोजेक्ट के निर्माण के चरण-दर-चरण मार्गदर्शिकाएँ
|
||||||
|
- ज्ञान जांच
|
||||||
|
- एक चुनौती
|
||||||
|
- पूरक पढ़ना
|
||||||
|
- असाइनमेंट
|
||||||
|
- व्याख्यान उपरांत प्रश्नोत्तरी
|
||||||
|
|
||||||
|
> **क्विज़ के बारे में एक नोट**:सभी क्विज़ेज़ [इस ऐप में](https://nice-beach-0fe9e9d0f.azurestaticapps.net/) शामिल हैं, तीन प्रश्नों के कुल 48 क्विज़ के लिए। वे पाठों के भीतर से जुड़े हुए हैं लेकिन क्विज़ ऐप को स्थानीय रूप से चलाया जा सकता है; `quiz-app` फ़ोल्डर में दिए गए निर्देश का पालन करें। उन्हें धीरे-धीरे स्थानीयकृत किया जा रहा है।
|
||||||
|
|
||||||
|
## पाठ
|
||||||
|
|
||||||
|
| | प्रोजेक्टका नाम | अवधारणाओं जो सिखाया | सीखने के मकसद | लिंक किया हुआ पाठ | लिखा हुआ पाठ | स्केचनोट | असाइनमेंट | शुरुवाती प्रश्नोत्तरी | अंतिम प्रश्नोत्तरी | विडिओ| रचयिता |
|
||||||
|
| :---: | :------------------------------------------------------: | :--------------------------------------------------------------------: | ----------------------------------------------------------------------------------------------------------------------------------- | :----------------------------------------------------------------------------------------------------------------------------: | :------------: | :--------: | :--------: | :-----------: | :---------: | :---: | :---------------------: |
|
||||||
|
| 01 | शुरू करना | ट्रैड प्रोग्रामिंग और उपकरणों का परिचय | अधिकांश प्रोग्रामिंग भाषाओं के पीछे और सॉफ्टवेयर के बारे में बुनियादी जानकारी जानें जो पेशेवर डेवलपर्स को अपने काम करने में मदद करती हैं | [ट्रैड प्रोग्रामिंग और उपकरणों का परिचय](/1-getting-started-lessons/1-intro-to-programming-languages/translations/README.hi.md) | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ | जैस्मिन |
|
||||||
|
| 02 | शुरू करना | गिटहब की मूल बातें, एक टीम के साथ काम करना शामिल है | अपनी परियोजना में गिटहब का उपयोग कैसे करें, कोड आधार पर दूसरों के साथ कैसे सहयोग करें | [गिटहब का परिचय](/1-getting-started-lessons/2-github-basics/translations/README.hi.md) | ✅ | ✅ | ✅ | ✅ | ✅ | 🛑 | फलर |
|
||||||
|
| 03 | शुरू करना | अभिगम्यता |वेब अभिगम्यता की मूल बातें जानें | [अभिगम्यता कोष](/1-getting-started-lessons/3-accessibility/translations/README.hi.md) | ✅ | ✅ | ✅ | ✅ | ✅ | 🛑 | क्रिस्टोफर |
|
||||||
|
| 04 | जेएस की मूलबाते | जावास्क्रिप्ट डेटा प्रकार | जावास्क्रिप्ट डेटा प्रकार की मूल बातें | [डेटा प्रकार](/2-js-basics/1-data-types/translations/README.hi.md) | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ | जैस्मिन |
|
||||||
|
| 05 | जेएस की मूलबाते | फंगक्शनस और मेथड्स | एप्लिकेशन के तर्क प्रवाह को प्रबंधित करने के लिए फंगक्शनस और मेथड्स के बारे में जानें | [फंगक्शनस और मेथड्स](/2-js-basics/2-functions-methods/translations/README.hi.md) | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ | जैस्मिन and क्रिस्टोफर |
|
||||||
|
| 06 | जेएस की मूलबाते | जेएस के साथ निर्णय करना | निर्णय लेने के मेथड्स का उपयोग करके अपने कोड में स्थितियां बनाना सीखें | [निर्णय लेना](/2-js-basics/3-making-decisions/translations/README.hi.md) | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ | जैस्मिन |
|
||||||
|
| 07 | जेएस की मूलबाते | अररेस और लूपस | जावास्क्रिप्ट में अररेस और लूपस का उपयोग कर डेटा के साथ काम करें | [अररेस और लूपस](/2-js-basics/4-arrays-loops/translations/README.hi.md) | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ | जैस्मिन |
|
||||||
|
| 08 | [टेरारियम](/3-terrarium/solution/translations/README.hi.md) | एचटीएमएल प्रैक्टिस में | लेआउट बनाने पर ध्यान केंद्रित करते हुए, एक ऑनलाइन टेरारियम बनाने के लिए HTML बनाएँ | [एचटीएमएल का परिचय](/3-terrarium/1-intro-to-html/translations/README.hi.md) | ✅ | ✅ | ✅ | ✅ | ✅ | 🛑 | जेन |
|
||||||
|
| 09 | [टेरारियम](/3-terrarium/solution/translations/README.hi.md) | सीएसएस | पृष्ठ को उत्तरदायी बनाने सहित सीएसएस की मूल बातों पर ध्यान केंद्रित करते हुए, ऑनलाइन टेरेरियम को स्टाइल करने के लिए सीएसएस का निर्माण करें | [सीएसएसका परिचय](/3-terrarium/2-intro-to-css/translations/README.hi.md) | ✅ | ✅ | ✅ | ✅ | ✅ | 🛑 | जेन |
|
||||||
|
| 10 | [टेरारियम](/3-terrarium/solution) |जावास्क्रिप्ट क्लोजर, डोम मनिप्यलैशन | एक टेरारियम फंगक्शन को ड्रैग/ड्रॉप इंटरफेस के रूप में बनाने के लिए जावास्क्रिप्ट का निर्माण करें ,क्लोजर और डोम मनिप्यलैशन पर ध्यान केंद्रित करके | [जावास्क्रिप्ट क्लोजर और डोम मनिप्यलैशन](/3-terrarium/3-intro-to-DOM-and-closures/translations/README.hi.md) | ✅ | ✅ | ✅ | ✅ | ✅ | 🛑 | जेन |
|
||||||
|
| 11 | [टायपिंग गेम](/4-typing-game/solution) | एक टायपिंग गेम बनाए | अपने जावास्क्रिप्ट ऐप के तर्क को चलाने के लिए कीबोर्ड घटनाओं का उपयोग करना सीखें | [ईवेंट-संचालित प्रोग्रामिंग](/4-typing-game/typing-game/translations/README.hi.md) | ✅ | 🛑 | ✅ | ✅ | ✅ | ✅ | क्रिस्टोफर |
|
||||||
|
| 12 | [ग्रीन ब्राउजर इक्स्टेन्शन](/5-browser-extension/solution) | ब्राउज़रों के साथ काम करना | जानें कि ब्राउज़र कैसे काम करते हैं, उनका इतिहास और ब्राउज़र एक्सटेंशन के पहले एलिमेंट्स को कैसे मचानते हैं | [ब्राउज़रों के बारे में](/5-browser-extension/1-about-browsers/translations/README.hi.md) | ✅ | ✅ | ✅ | ✅ | ✅ | 🛑 | जेन |
|
||||||
|
| 13 | [ग्रीन ब्राउजर इक्स्टेन्शन](/5-browser-extension/solution) |एक फॉर्म का निर्माण, एक एपीआई को कॉल करना और लोकल स्टॉरिज में चर को संग्रहीत करना | लोकल स्टॉरिज में संग्रहीत चर का उपयोग करके एपीआई को कॉल करने के लिए अपने ब्राउज़र एक्सटेंशन के जावास्क्रिप्ट एलिमेंट्स का निर्माण करें | [एपीआईज, फॉर्म्स, और लोकल स्टॉरिज](/5-browser-extension/2-forms-browsers-local-storage/translations/README.hi.md) | ✅ | 🛑 | ✅ | ✅ | ✅ | ✅ | जेन |
|
||||||
|
| 14 | [ग्रीन ब्राउजर इक्स्टेन्शन](/5-browser-extension/solution) | ब्राउज़र में पृष्ठभूमि प्रक्रियाएं, वेब प्रदर्शन | एक्सटेंशन के आइकन को प्रबंधित करने के लिए ब्राउज़र की पृष्ठभूमि प्रक्रियाओं का उपयोग करें; वेब प्रदर्शन और बनाने के लिए कुछ अनुकूलन के बारे में जानें | [पृष्ठभूमि कार्य और प्रदर्शन](/5-browser-extension/3-background-tasks-and-performance/translations/README.hi.md) | ✅ | 🛑 | ✅ | ✅ | ✅ | 🛑 | जेन |
|
||||||
|
| 15 | [स्पेस गेम](/6-space-game/solution) | जावास्क्रिप्ट के साथ और अधिक उन्नत खेल विकास | एक खेल के निर्माण की तैयारी में क्लाससेस और काम्पज़िशन और पब/सब पैटर्न दोनों का उपयोग करके इन्हेरीटेन्स के बारे में जानें | [उन्नत खेल विकास का परिचय](/6-space-game/1-introduction/translations/README.hi.md) | ✅ | 🛑 | ✅ | ✅ | ✅ | 🛑 | क्रिस |
|
||||||
|
| 16 | [स्पेस गेम](/6-space-game/solution) | कैनवास पर ड्रॉ करना | कैनवास एपीआई के बारे में जानें, जिसका उपयोग एलिमेंट्स को स्क्रीन पर खींचने के लिए किया जाता है | [कैनवास पर ड्रॉ करना](/6-space-game/2-drawing-to-canvas/translations/README.hi.md) | ✅ | 🛑 | ✅ | ✅ | ✅ | 🛑 | क्रिस |
|
||||||
|
| 17 | [स्पेस गेम](/6-space-game/solution) | स्क्रीन के चारों ओर बढ़ते एलिमेंट्स | पता करे कि कार्टेशियन निर्देशांक और कैनवस एपीआई का उपयोग करके तत्व कैसे गति प्राप्त कर सकते हैं | [चारों ओर बढ़ते एलिमेंट्स](/6-space-game/3-moving-elements-around/translations/README.hi.md) | ✅ | 🛑 | ✅ | ✅ | ✅ | 🛑 | क्रिस |
|
||||||
|
| 18 | [स्पेस गेम](/6-space-game/solution) | कॉलिजन डिटेक्शन | एलिमेंट्स को आपस में टकराएं और कीपरेसेस का उपयोग करते हुए एक दूसरे से प्रतिक्रिया करें और खेल के प्रदर्शन को सुनिश्चित करने के लिए एक कुलडाउन फ़ंक्शन प्रदान करें | [कॉलिजन डिटेक्शन](/6-space-game/4-collision-detection/translations/README.hi.md) | ✅ | 🛑 | ✅ | ✅ | ✅ | 🛑 | क्रिस |
|
||||||
|
| 19 | [स्पेस गेम](/6-space-game/solution) | स्कोर रखना | खेल की स्थिति और प्रदर्शन के आधार पर गणित की गणना करें | [स्कोर रखना](/6-space-game/5-keeping-score/translations/README.hi.md) | ✅ | 🛑 | ✅ | ✅ | ✅ | 🛑 | क्रिस |
|
||||||
|
| 20 | [स्पेस गेम](/6-space-game/solution) | खेल को समाप्त करना और पुनः आरंभ करना | खेल को समाप्त करने और पुनः आरंभ करने के बारे में जानें,असेट्स को साफ करने और चरकी वैल्यू को रीसेट करने सहित | [अंत की स्थिति](/6-space-game/6-end-condition/translations/README.hi.md) | ✅ | 🛑 | ✅ | ✅ | ✅ | 🛑 | क्रिस |
|
||||||
|
| 21 | [बैंकिंग एप](/7-bank-project/solution) | एचटीएमएल टेम्पलेट्स और वेब ऐप में रूट | राउटिंग और एचटीएमएल टेम्प्लेट का उपयोग करके एक मल्टीफ़ेज वेबसाइट की वास्तुकला का मचान बनाना सीखें | [एचटीएमएल टेम्पलेट और रूट](/7-bank-project/1-template-route/translations/README.hi.md) | ✅ | 🛑 | ✅ | ✅ | ✅ | ✅ | योहन |
|
||||||
|
| 22 | [बैंकिंग एप](/7-bank-project/solution) | एक लॉगिन और पंजीकरण फॉर्म बनाएँ |फॉर्म के निर्माण और सत्यापन रूटीन सौंपने के बारे में जानें | [फॉर्म्स](/7-bank-project/2-forms/translations/README.hi.md) | ✅ | 🛑 | ✅ | ✅ | ✅ | ✅ | योहन |
|
||||||
|
| 23 | [बैंकिंग एप](/7-bank-project/solution) | डेटा लाने और उपयोग करने के तरीके | डेटा आपके ऐप से कैसे और कैसे बहता है, इसे कैसे लाया जाए, इसे स्टोर करें और इसका दिसपोस करें | [डाटा](/7-bank-project/3-data/translations/README.hi.md) | ✅ | 🛑 | ✅ | ✅ | ✅ | ✅ | योहन |
|
||||||
|
| 24 | [बैंकिंग एप](/7-bank-project/solution) | स्टेट प्रबंधन की अवधारणाएँ | जानें कि आपका ऐप किस तरह से स्थिति को बनाए रखता है और इसे कैसे व्यवस्थित रूप से प्रबंधित करता है | [स्टेट प्रबंधन](/7-bank-project/4-state-management/translations/README.hi.md) | ✅ | 🛑 | ✅ | ✅ | ✅ | | योहन |
|
||||||
|
|
||||||
|
## ऑफ़लाइन एक्सेस
|
||||||
|
|
||||||
|
आप इस दस्तावेज़ को ऑफ़लाइन कर सकते हैं [Docsify](https://docsify.js.org/#/) का उपयोग करके। अपने स्थानीय मशीन पर इस रेपो, [स्थापित डॉक्सिफ़ाइस्ट](https://docsify.js.org/#/quickstart) को फोर्क करें, और फिर इस रेपो के रूट फ़ोल्डर में, `docsify serve` टाइप करें। वेबसाइट को आपके लोकलहोस्ट पर पोर्ट 3000 पर परोसा जाएगा: `localhost:3000`.
|
||||||
|
|
||||||
|
<a href="https://trackgit.com">
|
||||||
|
<img src="https://us-central1-trackgit-analytics.cloudfunctions.net/token/ping/kkcxjd6o25veljfkpm9k" alt="trackgit-views" />
|
||||||
|
</a>
|
||||||
@ -0,0 +1,23 @@
|
|||||||
|
## शिक्षकों के लिए
|
||||||
|
|
||||||
|
क्या आप अपनी कक्षा में इस पाठ्यक्रम का उपयोग करना चाहेंगे? कृपया निःसंकोच!
|
||||||
|
|
||||||
|
वास्तव में, आप इसे गिटहब के भीतर गिटहब क्लासरूम का उपयोग करके उपयोग कर सकते हैं।
|
||||||
|
|
||||||
|
ऐसा करने के लिए, इस रेपो को फोर्क करे। आपको प्रत्येक पाठ के लिए रेपो बनाने की आवश्यकता है, इसलिए आपको प्रत्येक फ़ोल्डर को एक अलग रेपो में निकालने की आवश्यकता है। इस तरह, [गिटहब क्लासरूम](https://classroom.github.com/classrooms) प्रत्येक पाठ को अलग से उठा सकते हैं।
|
||||||
|
|
||||||
|
ये [पूर्ण निर्देश](https://github.blog/2020-03-18-set-up-your-digital-classroom-with-github-classroom/) आपको एक आइडिया देंगे कि आप अपनी कक्षा कैसे स्थापित करें।
|
||||||
|
|
||||||
|
## रेपो जैसा है वैसे ही उपयोग करे
|
||||||
|
|
||||||
|
यदि आप इस रेपो का उपयोग करना चाहते हैं, जैसा कि यह वर्तमान में खड़ा है, बिना गिटहब क्लासरूम का उपयोग किए बिना, जो भी किया जा सकता है। आपको अपने छात्रों के साथ संवाद करने की आवश्यकता होगी जो एक साथ काम करना सिखाते हैं।
|
||||||
|
|
||||||
|
एक ऑनलाइन प्रारूप (ज़ूम, टीम्स, या अन्य) में आप क्विज़ के लिए ब्रेकआउट रूम बना सकते हैं और छात्रों को सीखने के लिए तैयार होने में मदद करने के लिए सलाह देते हैं। फिर छात्रों को क्विज़ के लिए आमंत्रित करें और एक निश्चित समय पर 'इशूस' मुद्दों के रूप में प्रस्तुत करें। आप असाइनमेंट के साथ भी ऐसा ही कर सकते हैं, अगर आप चाहते हैं कि छात्र खुले में सहयोग करें।
|
||||||
|
|
||||||
|
यदि आप एक अधिक निजी प्रारूप पसंद करते हैं, तो अपने छात्रों से पाठ्यक्रम, पाठ द्वारा पाठ, अपने स्वयं के गिटहब रेपोस को निजी प्रतिनिधि के रूप में, और आपको एक्सेस देने के लिए कहें। फिर वे निजी रूप से क्विज़ और असाइनमेंट पूरा कर सकते हैं और उन्हें आपकी कक्षा के रेपो पर मुद्दों के माध्यम से आपके पास जमा कर सकते हैं।
|
||||||
|
|
||||||
|
ऑनलाइन कक्षा प्रारूप में इस काम को करने के कई तरीके हैं। कृपया हमें बताएं कि आपके लिए सबसे अच्छा क्या है!
|
||||||
|
|
||||||
|
## कृपया हमें अपने विचार दें!
|
||||||
|
|
||||||
|
हम इस पाठ्यक्रम को आपके और आपके छात्रों के लिए काम करना चाहते हैं। कृपया हमें [प्रतिक्रिया](https://forms.microsoft.com/Pages/ResponsePage.aspx?id=v4j5cvGGr0GRqy180BHbR2humCsRZhxNuI79cm6n0hRUQzRVVU9VVlU5UlFLWTRLWlkyQUxORTg5WS4u) दे ।
|
||||||
Loading…
Reference in new issue