You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
668 lines
48 KiB
668 lines
48 KiB
# 30 दिन जावास्क्रिप्ट: जावास्क्रिप्ट में प्रवेश करने के लिए 30 दिनों का निःशुल्क अभ्यास
|
|
|
|
| # दिन | विषय |
|
|
| ----- | :-------------------------------------------------------------------------------------------------------------------------------------------------: |
|
|
| 01 | [परिचय](./readMe.md) |
|
|
| 02 | [डेटा प्रकार](./02_Day_Data_types/02_day_data_types.md) |
|
|
| 03 | [बूलियन, ऑपरेटर, तिथि](./03_Day_Booleans_operators_date/03_booleans_operators_date.md) |
|
|
| 04 | [शर्तों का उपयोग](./04_Day_Conditionals/04_day_conditionals.md) |
|
|
| 05 | [एरे](./05_Day_Arrays/05_day_arrays.md) |
|
|
| 06 | [लूप](./06_Day_Loops/06_day_loops.md) |
|
|
| 07 | [फंक्शन](./07_Day_Functions/07_day_functions.md) |
|
|
| 08 | [ऑब्जेक्ट](./08_Day_Objects/08_day_objects.md) |
|
|
| 09 | [उच्च आदेश फंक्शन](./09_Day_Higher_order_functions/09_day_higher_order_functions.md) |
|
|
| 10 | [सेट्स और मैप्स](./10_Day_Sets_and_Maps/10_day_Sets_and_Maps.md) |
|
|
| 11 | [डिस्ट्रक्चरिंग और स्प्रेडिंग](./11_Day_Destructuring_and_spreading/11_day_destructuring_and_spreading.md) |
|
|
| 12 | [नियमित अभिव्यक्तियाँ](./12_Day_Regular_expressions/12_day_regular_expressions.md) |
|
|
| 13 | [कंसोल ऑब्जेक्ट मेथड](./13_Day_Console_object_methods/13_day_console_object_methods.md) |
|
|
| 14 | [त्रुटि हैंडलिंग](./14_Day_Error_handling/14_day_error_handling.md) |
|
|
| 15 | [क्लासेस](./15_Day_Classes/15_day_classes.md) |
|
|
| 16 | [जेसन](./16_Day_JSON/16_day_json.md) |
|
|
| 17 | [वेब स्टोरेजेस](./17_Day_Web_storages/17_day_web_storages.md) |
|
|
| 18 | [प्रॉमिसेस](./18_Day_Promises/18_day_promises.md) |
|
|
| 19 | [क्लोजर](./19_Day_Closures/19_day_closures.md) |
|
|
| 20 | [स्वच्छ कोड लेखन](./20_Day_Writing_clean_codes/20_day_writing_clean_codes.md) |
|
|
| 21 | [DOM](./21_Day_DOM/21_day_dom.md) |
|
|
| 22 | [DOM ऑब्जेक्ट को मैनिपुलेट करना](./22_Day_Manipulating_DOM_object/22_day_manipulating_DOM_object.md) |
|
|
| 23 | [इवेंट लिस्टेनर](./23_Day_Event_listeners/23_day_event_listeners.md) |
|
|
| 24 | [मिनी प्रोजेक्ट: सोलर सिस्टम](./24_Day_Project_solar_system/24_day_project_solar_system.md) |
|
|
| 25 | [मिनी प्रोजेक्ट: वर्ल्ड कंट्रीज डेटा विजुअलाइजेशन 1](./25_Day_World_countries_data_visualization_1/25_day_world_countries_data_visualization_1.md) |
|
|
| 26 | [मिनी प्रोजेक्ट: वर्ल्ड कंट्रीज डेटा विजुअलाइजेशन 2](./26_Day_World_countries_data_visualization_2/26_day_world_countries_data_visualization_2.md) |
|
|
| 27 | [मिनी प्रोजेक्ट: पोर्टफोलियो](./27_Day_Mini_project_portfolio/27_day_mini_project_portfolio.md) |
|
|
| 28 | [मिनी प्रोजेक्ट: लीडरबोर्ड](./28_Day_Mini_project_leaderboard/28_day_mini_project_leaderboard.md) |
|
|
| 29 | [मिनी प्रोजेक्ट: कैरेक्टर्स को एनीमेट करना](./29_Day_Mini_project_animating_characters/29_day_mini_project_animating_characters.md) |
|
|
| 30 | [फाइनल प्रोजेक्ट](./30_Day_Mini_project_final/30_day_mini_project_final.md) |
|
|
|
|
<div>
|
|
<small>ज्ञानवर्धक सामग्री बनाने के लिए <strong>लेखक</strong> का समर्थन करें</small> <br />
|
|
<a href = "https://www.paypal.me/asabeneh"><img src='./images/paypal_lg.png' alt='Paypal Logo' style="width:10%"/></a>
|
|
</div>
|
|
<div align="center">
|
|
<h1> जावास्क्रिप्ट: 30 दिन का परिचय</h1>
|
|
<a class="header-badge" target="_blank" href="https://www.linkedin.com/in/asabeneh/">
|
|
<img src="https://img.shields.io/badge/style--5eba00.svg?label=LinkedIn&logo=linkedin&style=social">
|
|
</a>
|
|
<a class="header-badge" target="_blank" href="https://twitter.com/Asabeneh">
|
|
<img alt="Twitter Follow" src="https://img.shields.io/twitter/follow/asabeneh?style=social">
|
|
</a>
|
|
<sub>लेखक:
|
|
<a href="https://www.linkedin.com/in/asabeneh/" target="_blank">आसाबेनेह येतायेह</a><br>
|
|
<small> जनवरी, 2020</small>
|
|
</sub>
|
|
|
|
<div>
|
|
|
|
🇬🇧 [English](./readMe.md)
|
|
🇪🇸 [Spanish](./Spanish/readme.md)
|
|
🇮🇹 [Italian](./Italian/readMe.md)
|
|
🇷🇺 [Russian](./RU/README.md)
|
|
🇹🇷 [Turkish](./Turkish/readMe.md)
|
|
🇦🇿 [Azerbaijan](./Azerbaijani/readMe.md)
|
|
🇰🇷 [Korean](./Korea/README.md)
|
|
🇻🇳 [Vietnamese](./Vietnamese/README.md)
|
|
🇵🇱 [Polish](./Polish/readMe.md)
|
|
🇧🇷 [Portuguese](./Portuguese/readMe.md)
|
|
HI [Hindi](./Hindi/readMe.md)
|
|
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
[दिन 2 >>](./02_Day_Data_types/02_day_data_types.md)
|
|
|
|
|
|
|
|
- [JavaScript के 30 दिन](#30-days-of-javascript)
|
|
- [📔 दिन 1](#-day-1)
|
|
- [परिचय](#introduction)
|
|
- [आवश्यकताएं](#requirements)
|
|
- [सेटअप](#setup)
|
|
- [Node.js का इंस्टॉल करें](#install-nodejs)
|
|
- [ब्राउज़र](#browser)
|
|
- [Google Chrome का इंस्टॉल करें](#installing-google-chrome)
|
|
- [Google Chrome को कॉन्सोल पर खोलें](#opening-google-chrome-console)
|
|
- [ब्राउज़र कंसोल पर कोड लिखें](#writing-code-on-browser-console)
|
|
- [Console.log](#consolelog)
|
|
- [मल्टीपल आर्ग्यूमेंट्स के साथ Console.log](#consolelog-with-multiple-arguments)
|
|
- [टिप्पणियां](#comments)
|
|
- [सिंटैक्स](#syntax)
|
|
- [अंकगणित](#arithmetics)
|
|
- [कोड संपादक](#code-editor)
|
|
- [Visual Studio Code का इंस्टॉल करें](#installing-visual-studio-code)
|
|
- [Visual Studio Code का उपयोग कैसे करें](#how-to-use-visual-studio-code)
|
|
- [वेब पृष्ठ में JavaScript जोड़ना](#adding-javascript-to-a-web-page)
|
|
- [इनलाइन स्क्रिप्ट](#inline-script)
|
|
- [इंटरनल स्क्रिप्ट](#internal-script)
|
|
- [एक्सटर्नल स्क्रिप्ट](#external-script)
|
|
- [मल्टीपल एक्सटर्नल स्क्रिप्ट](#multiple-external-scripts)
|
|
- [डेटा प्रकारों का परिचय](#introduction-to-data-types)
|
|
- [अंक](#numbers)
|
|
- [स्ट्रिंग्स](#strings)
|
|
- [बूलियन](#booleans)
|
|
- [अनिर्दिष्ट](#undefined)
|
|
- [शून्य](#null)
|
|
- [डेटा प्रकारों की जाँच करना](#checking-data-types)
|
|
- [फिर से टिप्पणियाँ](#comments-again)
|
|
- [वेरिएबल](#variables)
|
|
- [💻 दिन 1: अभ्यास](#-day-1-exercises)
|
|
|
|
# 📔 दिन 1
|
|
|
|
## परिचय
|
|
|
|
**उपलब्धियां** JavaScript प्रोग्रामिंग चैलेंज में भाग लेने के फैसले पर बधाई हो। इस चैलेंज में आप एक JavaScript प्रोग्रामर बनने के लिए सब कुछ सीखेंगे, और विस्तृत रूप से प्रोग्रामिंग के संगठन को समझेंगे। चैलेंज के अंत में आपको 30DaysOfJavaScript प्रोग्रामिंग चैलेंज पूरा करने का प्रमाण पत्र मिलेगा। अगर आपको मदद की जरूरत होती है या आप दूसरों की मदद करना चाहते हैं, तो आप टेलीग्राम समूह से जुड़ सकते हैं।
|
|
[telegram group](https://t.me/ThirtyDaysOfJavaScript).
|
|
|
|
**A 30DaysOfJavaScript** एक नौसिखियों और उन्नत जावास्क्रिप्ट डेवलपरों दोनों के लिए एक गाइड है। जावास्क्रिप्ट वेब की भाषा है। मुझे जावास्क्रिप्ट का उपयोग करना और सिखाना दोनों ही बहुत पसंद है और मैं आशा करता हूँ कि आप भी ऐसा ही करेंगे।
|
|
|
|
इस स्टेप-बाय-स्टेप जावास्क्रिप्ट चैलेंज में, आप जावास्क्रिप्ट सीखेंगे, मानव इतिहास की सबसे लोकप्रिय प्रोग्रामिंग भाषा। जावास्क्रिप्ट का उपयोग **_वेबसाइटों में इंटरैक्टिविटी जोड़ने, मोबाइल ऐप्स, डेस्कटॉप एप्लीकेशन, खेल विकसित करने के लिए जावास्क्रिप्ट का उपयोग किया जाता है।_**
|
|
|
|
और आजकल जावास्क्रिप्ट का उपयोग **_मशीन लर्निंग_** और **_एआई_** के लिए भी किया जा सकता है। **_जावास्क्रिप्ट (JS)_** हाल के वर्षों में लोकप्रियता में बढ़त हुआ है और छ: निरंतर वर्षों के लिए अग्रणी प्रोग्रामिंग भाषा बन गया है और Github पर सबसे ज्यादा उपयोग की जाने वाली प्रोग्रामिंग भाषा है।
|
|
|
|
## आवश्यकताएं
|
|
|
|
इस चैलेंज का पालन करने के लिए प्रोग्रामिंग के किसी भी पूर्व ज्ञान की आवश्यकता नहीं होती है। आपको केवल निम्नलिखित चीजों की जरूरत होती है:
|
|
|
|
1. प्रेरणा
|
|
2. एक कंप्यूटर
|
|
3. इंटरनेट
|
|
4. एक ब्राउज़र
|
|
5. एक कोड संपादक
|
|
|
|
## सेटअप:
|
|
|
|
मुझे लगता है कि आपके पास डेवलपर बनने की महत्वाकांक्षा और मोटिवेशन, एक कंप्यूटर और इंटरनेट होंगे। यदि आपके पास ये सभी हैं तो आपके पास शुरू करने के लिए हर चीज है।
|
|
|
|
### Node.js इंस्टॉल करें
|
|
|
|
शायद आप अभी Node.js की जरूरत नहीं है, लेकिन बाद में आपको इसकी आवश्यकता हो सकती है। इसे इंस्टॉल करें:
|
|
[node.js](https://nodejs.org/en/).
|
|
|
|
|
|
|
|
डाउनलोड होने के बाद डबल क्लिक करें और इंस्टॉल करें।
|
|
|
|
|
|
|
|
हम अपने डिवाइस टर्मिनल या कमांड प्रॉम्प्ट को खोलकर देख सकते हैं कि नोड लोकल मशीन पर स्थापित है या नहीं।
|
|
|
|
```sh
|
|
asabeneh $ node -v
|
|
v12.14.0
|
|
```
|
|
|
|
### ब्राउज़र
|
|
|
|
वहाँ कई ब्राउज़र हैं। हालांकि, मैं Google Chrome की अधिष्ठापना गर्मी से सलाह देता हूँ।
|
|
|
|
#### गूगल क्रोम इंस्टॉल करना
|
|
|
|
इंस्टॉल [Google Chrome](https://www.google.com/chrome/) यदि आपके पास अभी तक नहीं है, तो आप ब्राउज़र कंसोल पर छोटे जावास्क्रिप्ट कोड लिख सकते हैं, लेकिन हम ब्राउज़र कंसोल का उपयोग एप्लिकेशन विकसित करने के लिए नहीं करते हैं।
|
|
|
|
|
|
|
|
#### Opening Google Chrome Console
|
|
|
|
आप गूगल क्रोम कंसोल को तीन बिंदुओं पर जाकर खोल सकते हैं: ब्राउज़र के शीर्ष दाहिने कोने पर तीन बिंदुओं पर क्लिक करना, अधिक उपकरण -> डेवलपर उपकरण चुनना या कीबोर्ड शॉर्टकट का उपयोग करना। मैं शॉर्टकट का उपयोग करना पसंद करता हूं।
|
|
|
|
|
|
|
|
Chrome कंसोल खोलने के लिए एक कुंजीपटल शॉर्टकट का उपयोग करना आसान होता है। निम्न चरणों का पालन करें:
|
|
|
|
```sh
|
|
Mac
|
|
Command+Option+J
|
|
|
|
Windows/Linux:
|
|
Ctl+Shift+J
|
|
```
|
|
|
|
|
|
|
|
जब आप Google Chrome कंसोल खोलते हैं, तो संकेतित बटनों की जांच करने की कोशिश करें। हम अधिकांश समय कंसोल पर व्यतीत करेंगे। कंसोल वह स्थान है जहां आपका JavaScript कोड जाता है। Google Console V8 इंजन आपके JavaScript कोड को मशीन कोड में बदलता है।
|
|
आइए हम Google Chrome कंसोल पर एक JavaScript कोड लिखते हैं:
|
|
|
|
|
|
|
|
#### ब्राउज़र कंसोल पर कोड लिखना
|
|
|
|
हम किसी भी जावास्क्रिप्ट कोड को Google कंसोल या किसी भी ब्राउज़र कंसोल पर लिख सकते हैं। लेकिन इस चैलेंज के लिए, हम केवल Google Chrome कंसोल पर ध्यान केंद्रित करेंगे। निम्नलिखित से कंसोल खोलें:
|
|
|
|
```sh
|
|
Mac
|
|
Command+Option+I
|
|
|
|
Windows:
|
|
Ctl+Shift+I
|
|
```
|
|
|
|
##### Console.log
|
|
|
|
हमने अपनी पहली JavaScript code लिखने के लिए एक निर्मित फंक्शन **console.log()** का उपयोग किया। हमने एक तर्क के रूप में इनपुट डेटा को भेजा और फंक्शन आउटपुट प्रदर्शित करता है। हमने console.log() फंक्शन में 'Hello, World' को इनपुट डेटा या तर्क के रूप में भेजा।
|
|
|
|
```js
|
|
console.log('Hello, World!')
|
|
```
|
|
|
|
##### एकाधिक तर्कों के साथ कंसोल.लॉग
|
|
|
|
**`console.log()`** फ़ंक्शन कॉमा से अलग किए गए कई पैरामीटर ले सकता है। सिंटैक्स इस तरह दिखता है:**`console.log(param1, param2, param3)`**
|
|
|
|
|
|
|
|
```js
|
|
console.log('Hello', 'World', '!')
|
|
console.log('HAPPY', 'NEW', 'YEAR', 2020)
|
|
console.log('Welcome', 'to', 30, 'Days', 'Of', 'JavaScript')
|
|
```
|
|
|
|
जैसा कि आप ऊपर दिए गए स्निपेट कोड से देख सकते हैं, _`console.log()`_ कई तर्क ले सकता है।
|
|
|
|
बधाई हो! आपने _`console.log()`_ का उपयोग करके अपना पहला JavaScript कोड लिखा था।
|
|
|
|
##### Comments
|
|
|
|
हम अपने कोड में टिप्पणियाँ जोड़ सकते हैं। कोड को अधिक पठनीय बनाने और हमारे कोड में टिप्पणी छोड़ने के लिए टिप्पणियाँ बहुत महत्वपूर्ण हैं। जावास्क्रिप्ट हमारे कोड के टिप्पणी भाग को निष्पादित नहीं करता है। जावास्क्रिप्ट में, जावास्क्रिप्ट में // से शुरू होने वाली कोई भी टेक्स्ट लाइन एक टिप्पणी है, और इस तरह संलग्न कुछ भी `//` भी एक टिप्पणी है।
|
|
|
|
**उदाहरण: सिंगल लाइन टिप्पणी**
|
|
|
|
```js
|
|
// This is the first comment
|
|
// This is the second comment
|
|
// I am a single line comment
|
|
```
|
|
|
|
**उदाहरण: बहुपंक्ति टिप्पणी**
|
|
|
|
```js
|
|
/*
|
|
This is a multiline comment
|
|
Multiline comments can take multiple lines
|
|
JavaScript is the language of the web
|
|
*/
|
|
```
|
|
|
|
##### वाक्य - विन्यास
|
|
|
|
प्रोग्रामिंग भाषाएं मानव भाषाओं के समान हैं। सार्थक संदेश देने के लिए अंग्रेजी या कई अन्य भाषा शब्दों, वाक्यांशों, वाक्यों, मिश्रित वाक्यों और अन्य का उपयोग करती है। वाक्य-विन्यास का अंग्रेजी अर्थ _भाषा में अच्छी तरह से गठित वाक्य बनाने के लिए शब्दों और वाक्यांशों की व्यवस्था_ है। सिंटैक्स की तकनीकी परिभाषा कंप्यूटर भाषा में कथनों की संरचना है। प्रोग्रामिंग भाषाओं में सिंटैक्स होता है। जावास्क्रिप्ट एक प्रोग्रामिंग लैंग्वेज है और अन्य प्रोग्रामिंग लैंग्वेज की तरह इसका अपना सिंटैक्स है। यदि हम एक सिंटैक्स नहीं लिखते हैं जिसे जावास्क्रिप्ट समझता है, तो यह विभिन्न प्रकार की त्रुटियां उत्पन्न करेगा। हम बाद में विभिन्न प्रकार की जावास्क्रिप्ट त्रुटियों का पता लगाएंगे। अभी के लिए, आइए सिंटैक्स एरर देखें।
|
|
|
|
|
|
|
|
मैंने जानबूझकर गलती की है। नतीजतन, कंसोल सिंटैक्स त्रुटियों को उठाता है। दरअसल, वाक्य रचना बहुत जानकारीपूर्ण है। यह बताता है कि किस प्रकार की गलती की गई थी। त्रुटि प्रतिक्रिया दिशानिर्देश पढ़कर, हम सिंटैक्स को सही कर सकते हैं और समस्या को ठीक कर सकते हैं। किसी प्रोग्राम से त्रुटियों को पहचानने और हटाने की प्रक्रिया को डिबगिंग कहा जाता है। आइए त्रुटियों को ठीक करें:
|
|
|
|
```js
|
|
console.log('Hello, World!')
|
|
console.log('Hello, World!')
|
|
```
|
|
|
|
अब तक, हमने _`console.log()`_ का उपयोग करके टेक्स्ट को प्रदर्शित करने का तरीका देखा। अगर हम _`console.log()`_ का इस्तेमाल करके टेक्स्ट या स्ट्रिंग प्रिंट कर रहे हैं, तो टेक्स्ट को सिंगल कोट्स, डबल कोट्स या बैकटिक के अंदर होना चाहिए।
|
|
**उदाहरण:**
|
|
|
|
```js
|
|
console.log('Hello, World!')
|
|
console.log("Hello, World!")
|
|
console.log(`Hello, World!`)
|
|
```
|
|
|
|
#### अंकगणित
|
|
|
|
अब, संख्या डेटा प्रकारों के लिए Google Chrome कंसोल पर _`console.log()`_ का उपयोग करके JavaScript कोड लिखने का अधिक अभ्यास करते हैं।
|
|
टेक्स्ट के अलावा, हम जावास्क्रिप्ट का उपयोग करके गणितीय गणनाएँ भी कर सकते हैं। आइए निम्नलिखित सरल गणनाएँ करें।
|
|
**_`console.log()`_** फ़ंक्शन के बिना सीधे Google क्रोम कंसोल पर जावास्क्रिप्ट कोड लिखना संभव है। हालाँकि, इसे इस परिचय में शामिल किया गया है क्योंकि इस चुनौती का अधिकांश भाग टेक्स्ट एडिटर में होगा जहाँ फ़ंक्शन का उपयोग अनिवार्य होगा। आप सीधे कंसोल पर निर्देशों के साथ खेल सकते हैं।
|
|
|
|
|
|
|
|
```js
|
|
console.log(2 + 3) // Addition
|
|
console.log(3 - 2) // Subtraction
|
|
console.log(2 * 3) // Multiplication
|
|
console.log(3 / 2) // Division
|
|
console.log(3 % 2) // Modulus - finding remainder
|
|
console.log(3 ** 2) // Exponentiation 3 ** 2 == 3 * 3
|
|
```
|
|
|
|
### कोड संपादक
|
|
|
|
हम अपने कोड ब्राउज़र कंसोल पर लिख सकते हैं, लेकिन यह बड़ी परियोजनाओं के लिए नहीं होगा। वास्तविक कामकाजी माहौल में, डेवलपर्स अपने कोड लिखने के लिए विभिन्न कोड संपादकों का उपयोग करते हैं। इस 30 दिनों की जावास्क्रिप्ट चुनौती में, हम विज़ुअल स्टूडियो कोड का उपयोग करेंगे।
|
|
|
|
#### विजुअल स्टूडियो कोड इंस्टॉल करना
|
|
|
|
विज़ुअल स्टूडियो कोड एक बहुत लोकप्रिय ओपन-सोर्स टेक्स्ट एडिटर है। मैं [download Visual Studio Code] (https://code.visualstudio.com/) करने की सलाह दूंगा, लेकिन यदि आप अन्य संपादकों के पक्ष में हैं, तो आपके पास जो कुछ भी है, उसका बेझिझक अनुसरण करें।
|
|
|
|
|
|
|
|
यदि आपने विज़ुअल स्टूडियो कोड स्थापित किया है, तो आइए इसका उपयोग करना शुरू करें।
|
|
|
|
#### विज़ुअल स्टूडियो कोड का उपयोग कैसे करें
|
|
|
|
इसके आइकन पर डबल क्लिक करके विजुअल स्टूडियो कोड खोलें। जब आप इसे ओपन करेंगे तो आपको इस तरह का इंटरफेस मिलेगा। लेबल किए गए आइकन के साथ सहभागिता करने का प्रयास करें।
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
## वेब पेज में जावास्क्रिप्ट जोड़ना
|
|
|
|
जावास्क्रिप्ट को वेब पेज में तीन अलग-अलग तरीकों से जोड़ा जा सकता है:
|
|
|
|
- **_Inline script_**
|
|
- **_Internal script_**
|
|
- **_External script_**
|
|
- **_Multiple External scripts_**
|
|
|
|
The following sections show different ways of adding JavaScript code to your web page.
|
|
|
|
### Inline Script
|
|
|
|
अपने डेस्कटॉप पर या किसी भी स्थान पर प्रोजेक्ट फ़ोल्डर बनाएं, इसे 30DaysOfJS नाम दें और प्रोजेक्ट फ़ोल्डर में **_`index.html`_** फ़ाइल बनाएं। फिर नीचे दिए गए कोड को पेस्ट करें और इसे किसी ब्राउज़र में खोलें, उदाहरण के लिए [Chrome](https://www.google.com/chrome/)।
|
|
|
|
```html
|
|
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<title>30DaysOfScript:Inline Script</title>
|
|
</head>
|
|
<body>
|
|
<button onclick="alert('Welcome to 30DaysOfJavaScript!')">Click Me</button>
|
|
</body>
|
|
</html>
|
|
```
|
|
|
|
अब, आपने अभी-अभी अपनी पहली इनलाइन स्क्रिप्ट लिखी है। हम _`alert()`_ बिल्ट-इन फ़ंक्शन का उपयोग करके एक पॉप अप अलर्ट संदेश बना सकते हैं।
|
|
|
|
### आंतरिक स्क्रिप्ट
|
|
|
|
आंतरिक स्क्रिप्ट _`head`_ या _`body`_ में लिखी जा सकती है, लेकिन इसे HTML दस्तावेज़ के मुख्य भाग पर रखना पसंद किया जाता है।
|
|
सबसे पहले, हम पृष्ठ के शीर्ष भाग पर लिखते हैं।
|
|
|
|
```html
|
|
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<title>30DaysOfScript:Internal Script</title>
|
|
<script>
|
|
console.log('Welcome to 30DaysOfJavaScript')
|
|
</script>
|
|
</head>
|
|
<body></body>
|
|
</html>
|
|
```
|
|
|
|
इसी तरह हम ज्यादातर समय एक आंतरिक स्क्रिप्ट लिखते हैं। जावास्क्रिप्ट कोड को बॉडी सेक्शन में लिखना सबसे पसंदीदा विकल्प है। `console.log()` से आउटपुट देखने के लिए ब्राउज़र कंसोल खोलें।
|
|
|
|
```html
|
|
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<title>30DaysOfScript:Internal Script</title>
|
|
</head>
|
|
<body>
|
|
<button onclick="alert('Welcome to 30DaysOfJavaScript!');">Click Me</button>
|
|
<script>
|
|
console.log('Welcome to 30DaysOfJavaScript')
|
|
</script>
|
|
</body>
|
|
</html>
|
|
```
|
|
|
|
`console.log()` से आउटपुट देखने के लिए ब्राउज़र कंसोल खोलें।
|
|
|
|
|
|
|
|
### बाहरी स्क्रिप्ट
|
|
|
|
आंतरिक स्क्रिप्ट के समान, बाहरी स्क्रिप्ट का लिंक हेडर या बॉडी पर हो सकता है, लेकिन इसे बॉडी में रखना पसंद किया जाता है।
|
|
सबसे पहले, हमें .js एक्सटेंशन के साथ एक बाहरी JavaScript फ़ाइल बनानी चाहिए। .js एक्सटेंशन के साथ समाप्त होने वाली सभी फाइलें जावास्क्रिप्ट फाइलें हैं। अपने प्रोजेक्ट डायरेक्टरी के अंदर इंट्रोडक्शन.जेएस नाम की एक फाइल बनाएं और निम्न कोड लिखें और इस .जेएस फाइल को बॉडी के नीचे लिंक करें।
|
|
|
|
```js
|
|
console.log('Welcome to 30DaysOfJavaScript')
|
|
```
|
|
|
|
_head_ में बाहरी स्क्रिप्ट:
|
|
|
|
```html
|
|
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<title>30DaysOfJavaScript:External script</title>
|
|
<script src="introduction.js"></script>
|
|
</head>
|
|
<body></body>
|
|
</html>
|
|
```
|
|
|
|
_body_ में बाहरी स्क्रिप्ट:
|
|
|
|
```html
|
|
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<title>30DaysOfJavaScript:External script</title>
|
|
</head>
|
|
<body>
|
|
<!-- JavaScript external link could be in the header or in the body -->
|
|
<!-- Before the closing tag of the body is the recommended place to put the external JavaScript script -->
|
|
<script src="introduction.js"></script>
|
|
</body>
|
|
</html>
|
|
```
|
|
|
|
`Console.log()` का आउटपुट देखने के लिए ब्राउज़र कंसोल खोलें।
|
|
|
|
### एकाधिक बाहरी लिपियों
|
|
|
|
हम कई बाहरी जावास्क्रिप्ट फ़ाइलों को एक वेब पेज से भी लिंक कर सकते हैं।
|
|
30DaysOfJS फ़ोल्डर के अंदर एक `helloworld.js` फ़ाइल बनाएं और निम्न कोड लिखें।
|
|
|
|
```html
|
|
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<title>Multiple External Scripts</title>
|
|
</head>
|
|
<body>
|
|
<script src="./helloworld.js"></script>
|
|
<script src="./introduction.js"></script>
|
|
</body>
|
|
</html>
|
|
```
|
|
|
|
_आपकी main.js फ़ाइल अन्य सभी स्क्रिप्ट्स के नीचे होनी चाहिए_। इसे याद रखना बहुत जरूरी है।
|
|
|
|
|
|
|
|
## डेटा प्रकार का परिचय
|
|
|
|
जावास्क्रिप्ट और अन्य प्रोग्रामिंग भाषाओं में, विभिन्न प्रकार के डेटा प्रकार होते हैं। निम्नलिखित जावास्क्रिप्ट आदिम डेटा प्रकार हैं: _स्ट्रिंग, संख्या, बूलियन, अपरिभाषित, नल_, और _प्रतीक_।
|
|
|
|
### नंबर
|
|
|
|
- पूर्णांक: पूर्णांक (ऋणात्मक, शून्य और धनात्मक) संख्याएँ
|
|
उदाहरण:
|
|
... -3, -2, -1, 0, 1, 2, 3 ...
|
|
- फ्लोट-पॉइंट नंबर: दशमलव संख्या
|
|
उदाहरण
|
|
... -3.5, -2.25, -1.0, 0.0, 1.1, 2.2, 3.5 ...
|
|
|
|
### स्ट्रिंग्स
|
|
|
|
दो सिंगल कोट्स, डबल कोट्स या बैकटिक्स के बीच एक या अधिक वर्णों का संग्रह।
|
|
|
|
**उदाहरण:**
|
|
|
|
```जे.एस
|
|
'ए'
|
|
'असबेनेह'
|
|
"असबेनेह"
|
|
'फिनलैंड'
|
|
'जावास्क्रिप्ट एक सुंदर प्रोग्रामिंग भाषा है'
|
|
'मुझे पढ़ाना पसंद है'
|
|
'मुझे आशा है कि आप पहले दिन का आनंद ले रहे हैं'
|
|
`हम बैकटिक का उपयोग करके एक स्ट्रिंग भी बना सकते हैं`
|
|
'एक तार एक वर्ण जितना छोटा या कई पृष्ठों जितना बड़ा हो सकता है'
|
|
'एकल उद्धरण, दोहरे उद्धरण या बैकटिक के तहत कोई भी डेटा प्रकार एक स्ट्रिंग है'
|
|
```
|
|
|
|
### बूलियन्स
|
|
|
|
बूलियन मान या तो True या False होता है। कोई भी तुलना एक बूलियन मान लौटाती है, जो या तो सत्य या असत्य होता है।
|
|
|
|
एक बूलियन डेटा प्रकार या तो एक सही या गलत मान होता है।
|
|
|
|
**उदाहरण:**
|
|
|
|
```js
|
|
true // if the light is on, the value is true
|
|
false // if the light is off, the value is false
|
|
```
|
|
|
|
### अपरिभाषित
|
|
|
|
JavaScript में, यदि हम किसी वेरिएबल को मान निर्दिष्ट नहीं करते हैं, तो मान अपरिभाषित होता है। इसके अलावा, यदि कोई फ़ंक्शन कुछ भी वापस नहीं कर रहा है, तो यह अपरिभाषित हो जाता है।
|
|
|
|
```js
|
|
let firstName
|
|
console.log(firstName) // undefined, because it is not assigned to a value yet
|
|
```
|
|
|
|
### व्यर्थ
|
|
|
|
जावास्क्रिप्ट में शून्य का अर्थ है एक खाली मान।
|
|
|
|
```js
|
|
let emptyValue = null
|
|
```
|
|
|
|
## डेटा प्रकार की जाँच करना
|
|
|
|
एक निश्चित चर के डेटा प्रकार की जाँच करने के लिए, हम **typeof** ऑपरेटर का उपयोग करते हैं। निम्नलिखित उदाहरण देखें।
|
|
|
|
```js
|
|
console.log(typeof 'Asabeneh') // string
|
|
console.log(typeof 5) // number
|
|
console.log(typeof true) // boolean
|
|
console.log(typeof null) // object type
|
|
console.log(typeof undefined) // undefined
|
|
```
|
|
|
|
## दोबारा टिप्पणी करें
|
|
|
|
याद रखें कि जावास्क्रिप्ट में टिप्पणी करना अन्य प्रोग्रामिंग भाषाओं के समान है। आपके कोड को अधिक पठनीय बनाने के लिए टिप्पणियाँ महत्वपूर्ण हैं।
|
|
टिप्पणी करने के दो तरीके हैं:
|
|
|
|
- _एक पंक्ति टिप्पणी_
|
|
- _बहुपंक्ति टिप्पणी_
|
|
|
|
```js
|
|
// commenting the code itself with a single comment
|
|
// let firstName = 'Asabeneh'; single line comment
|
|
// let lastName = 'Yetayeh'; single line comment
|
|
```
|
|
मल्टीलाइन टिप्पणी:
|
|
|
|
```js
|
|
/*
|
|
let location = 'Helsinki';
|
|
let age = 100;
|
|
let isMarried = true;
|
|
This is a Multiple line comment
|
|
*/
|
|
```
|
|
|
|
## वेरिएबल्स
|
|
|
|
वेरिएबल डेटा के _कंटेनर_ होते हैं। मेमोरी लोकेशन में डेटा को _स्टोर_ करने के लिए वेरिएबल्स का उपयोग किया जाता है। जब एक चर घोषित किया जाता है, तो स्मृति स्थान आरक्षित होता है। जब एक वेरिएबल को एक वैल्यू (डेटा) के लिए असाइन किया जाता है, तो मेमोरी स्पेस उस डेटा से भर जाएगा। एक चर घोषित करने के लिए, हम _var_, _let_, या _const_ कीवर्ड का उपयोग करते हैं।
|
|
|
|
एक चर के लिए जो एक अलग समय पर बदलता है, हम _let_ का उपयोग करते हैं। यदि डेटा बिल्कुल नहीं बदलता है, तो हम _const_ का उपयोग करते हैं। उदाहरण के लिए, पीआई, देश का नाम, गुरुत्वाकर्षण नहीं बदलता है, और हम _const_ का उपयोग कर सकते हैं। हम इस चुनौती में var का उपयोग नहीं करेंगे और मैं आपको इसका उपयोग करने की अनुशंसा नहीं करता। यह चर घोषित करने का त्रुटि प्रवण तरीका है, इसमें बहुत अधिक रिसाव है। हम var, let, और const के बारे में अन्य सेक्शन (दायरे) में विस्तार से बात करेंगे। अभी के लिए, उपरोक्त स्पष्टीकरण पर्याप्त है।
|
|
|
|
एक वैध जावास्क्रिप्ट चर नाम को निम्नलिखित नियमों का पालन करना चाहिए:
|
|
|
|
- एक JavaScript चर नाम किसी संख्या से शुरू नहीं होना चाहिए।
|
|
- एक जावास्क्रिप्ट चर नाम डॉलर चिह्न और अंडरस्कोर को छोड़कर विशेष वर्णों की अनुमति नहीं देता है।
|
|
- एक जावास्क्रिप्ट चर नाम एक कैमलकेस सम्मेलन का अनुसरण करता है।
|
|
- एक JavaScript चर नाम में शब्दों के बीच स्थान नहीं होना चाहिए।
|
|
|
|
निम्नलिखित वैध जावास्क्रिप्ट चर के उदाहरण हैं।
|
|
|
|
```js
|
|
firstName
|
|
lastName
|
|
country
|
|
city
|
|
capitalCity
|
|
age
|
|
isMarried
|
|
|
|
first_name
|
|
last_name
|
|
is_married
|
|
capital_city
|
|
|
|
num1
|
|
num_1
|
|
_num_1
|
|
$num1
|
|
year2020
|
|
year_2020
|
|
```
|
|
|
|
सूची में पहला और दूसरा चर जावास्क्रिप्ट में घोषित करने के कैमलकेस सम्मेलन का अनुसरण करता है। इस सामग्री में, हम कैमलकेस वेरिएबल्स (कैमलविथवनहंप) का उपयोग करेंगे। हम कक्षाओं की घोषणा करने के लिए CamelCase(CamelWithTwoHump) का उपयोग करते हैं, हम अन्य अनुभागों में कक्षाओं और वस्तुओं के बारे में चर्चा करेंगे।
|
|
|
|
अमान्य चर का उदाहरण:
|
|
|
|
```js
|
|
first-name
|
|
1_num
|
|
num_#_1
|
|
```
|
|
|
|
आइए हम विभिन्न डेटा प्रकारों के साथ वेरिएबल्स घोषित करें। एक चर घोषित करने के लिए, हमें चर नाम से पहले _let_ या _const_ कीवर्ड का उपयोग करना होगा। चर नाम के बाद, हम एक समान चिह्न (असाइनमेंट ऑपरेटर) और एक मान (असाइन किए गए डेटा) लिखते हैं।
|
|
|
|
```js
|
|
// Syntax
|
|
let nameOfVariable = value
|
|
```
|
|
|
|
NameOfVriable वह नाम है जो मूल्य के विभिन्न डेटा को संग्रहीत करता है। विस्तृत उदाहरणों के लिए नीचे देखें।
|
|
|
|
**घोषित चर के उदाहरण**
|
|
|
|
|
|
```js
|
|
// Declaring different variables of different data types
|
|
let firstName = 'Asabeneh' // first name of a person
|
|
let lastName = 'Yetayeh' // last name of a person
|
|
let country = 'Finland' // country
|
|
let city = 'Helsinki' // capital city
|
|
let age = 100 // age in years
|
|
let isMarried = true
|
|
|
|
console.log(firstName, lastName, country, city, age, isMarried)
|
|
```
|
|
|
|
```sh
|
|
Asabeneh Yetayeh Finland Helsinki 100 true
|
|
```
|
|
|
|
```js
|
|
// Declaring variables with number values
|
|
let age = 100 // age in years
|
|
const gravity = 9.81 // earth gravity in m/s2
|
|
const boilingPoint = 100 // water boiling point, temperature in °C
|
|
const PI = 3.14 // geometrical constant
|
|
console.log(gravity, boilingPoint, PI)
|
|
```
|
|
|
|
```sh
|
|
9.81 100 3.14
|
|
```
|
|
|
|
```js
|
|
// Variables can also be declaring in one line separated by comma, however I recommend to use a seperate line to make code more readble
|
|
let name = 'Asabeneh', job = 'teacher', live = 'Finland'
|
|
console.log(name, job, live)
|
|
```
|
|
|
|
```sh
|
|
Asabeneh teacher Finland
|
|
```
|
|
जब आप 01-दिन फ़ोल्डर में index.html फ़ाइल चलाते हैं तो आपको यह प्राप्त करना चाहिए:
|
|
|
|
|
|
|
|
🌕 आप अद्भुत हैं! आपने अभी-अभी दिन 1 चुनौती पूरी की है और आप महानता की राह पर हैं। अब अपने मस्तिष्क और मांसपेशियों के लिए कुछ व्यायाम करें।
|
|
|
|
#💻दिन 1: व्यायाम
|
|
|
|
1. एक पंक्ति टिप्पणी लिखें जो कहती है, _टिप्पणियां कोड को पठनीय बना सकती हैं_
|
|
2. एक और टिप्पणी लिखें जो कहती है, _30DaysOfJavaScript_ में आपका स्वागत है_
|
|
3. एक बहुपंक्ति टिप्पणी लिखें जो कहती है, _टिप्पणियां कोड को पठनीय, पुन: उपयोग करने में आसान बना सकती हैं_
|
|
_और जानकारीपूर्ण_
|
|
|
|
4. एक वेरिएबल.जेएस फ़ाइल बनाएं और वेरिएबल घोषित करें और स्ट्रिंग, बूलियन, अपरिभाषित और अशक्त डेटा प्रकार असाइन करें
|
|
5. datatypes.js फ़ाइल बनाएं और विभिन्न डेटा प्रकारों की जांच करने के लिए JavaScript **_typeof_** ऑपरेटर का उपयोग करें। प्रत्येक चर के डेटा प्रकार की जाँच करें
|
|
6. मान निर्दिष्ट किए बिना चार चर घोषित करें
|
|
7. असाइन किए गए मानों के साथ चार चर घोषित करें
|
|
8. अपने पहले नाम, अंतिम नाम, वैवाहिक स्थिति, देश और आयु को कई पंक्तियों में संग्रहीत करने के लिए चर घोषित करें
|
|
9. एक पंक्ति में अपना पहला नाम, अंतिम नाम, वैवाहिक स्थिति, देश और उम्र स्टोर करने के लिए चर घोषित करें
|
|
10. दो चर _myAge_ और _yourAge_ घोषित करें और उन्हें प्रारंभिक मान निर्दिष्ट करें और ब्राउज़र कंसोल पर लॉग इन करें।
|
|
|
|
```sh
|
|
I am 25 years old.
|
|
You are 30 years old.
|
|
```
|
|
|
|
🎉 बधाई! 🎉
|
|
|
|
[दिन 2 >>](./02_Day_Data_types/02_day_data_types.md) |