From db3244330a37c99347de233d1493752817933535 Mon Sep 17 00:00:00 2001 From: Bikram Sutar <38653376+theBstar@users.noreply.github.com> Date: Thu, 16 Jul 2020 21:17:46 +0530 Subject: [PATCH] Revert "Developer console" --- 1-js/01-getting-started/4-devtools/article.md | 60 +++++++------- 1-js/02-first-steps/01-hello-world/article.md | 83 ++++++++++--------- 2 files changed, 73 insertions(+), 70 deletions(-) diff --git a/1-js/01-getting-started/4-devtools/article.md b/1-js/01-getting-started/4-devtools/article.md index 03011d00f..50926d4f7 100644 --- a/1-js/01-getting-started/4-devtools/article.md +++ b/1-js/01-getting-started/4-devtools/article.md @@ -1,63 +1,63 @@ -# डेवलपर कंसोल (Developer console) +# Developer console -कोड में त्रुटि की संभावना है। आप संभवतः त्रुटियां करेंगे। ओह, मैं किस बारे में बात कर रहा हूं? आप *बिल्कुल* त्रुटियां करेंगे, कम से कम यदि आप एक इंसान हैं और [रोबोट](https://en.wikipedia.org/wiki/Bender_(Futurama)) नहीं। +Code is prone to errors. You will quite likely make errors... Oh, what am I talking about? You are *absolutely* going to make errors, at least if you're a human, not a [robot](https://en.wikipedia.org/wiki/Bender_(Futurama)). -लेकिन ब्राउज़र में, उपयोगकर्ता सामान्य रूप से त्रुटियों को नहीं देखते हैं। इसलिए, अगर स्क्रिप्ट में कुछ गलत होता है, तो हम यह नहीं देखेंगे कि क्या टूटा है और इसलिए हम उसे ठीक नहीं कर सकते। +But in the browser, users don't see errors by default. So, if something goes wrong in the script, we won't see what's broken and can't fix it. -त्रुटियों को देखने और स्क्रिप्ट के बारे में अन्य उपयोगी जानकारी प्राप्त करने के लिए, "डेवलपर टूल" को ब्राउज़र में एम्बेड किया गया है। +To see errors and get a lot of other useful information about scripts, "developer tools" have been embedded in browsers. -अधिकांश डेवलपर विकास के लिए क्रोम या फ़ायरफ़ॉक्स की ओर झुकते हैं क्योंकि उन ब्राउज़र में सबसे अच्छा डेवलपर टूल होता है। अन्य ब्राउज़र भी डेवलपर उपकरण प्रदान करते हैं, कभी-कभी विशेष सुविधाओं के साथ, लेकिन आमतौर पर क्रोम या फ़ायरफ़ॉक्स के करीब नहीं होते हैं। इसलिए अधिकांश डेवलपर्स के पास "पसंदीदा" ब्राउज़र होता है और यदि कोई समस्या ब्राउज़र-विशिष्ट है तो ही दूसरों का उपयोग करता है। +Most developers lean towards Chrome or Firefox for development because those browsers have the best developer tools. Other browsers also provide developer tools, sometimes with special features, but are usually playing "catch-up" to Chrome or Firefox. So most developers have a "favorite" browser and switch to others if a problem is browser-specific. -डेवलपर उपकरण शक्तिशाली हैं; उनकी कई विशेषताएं हैं। शुरू करने के लिए, हम सीखेंगे कि उन्हें कैसे खोलें, त्रुटियों को देखें और जावास्क्रिप्ट कमांड चलाएं। +Developer tools are potent; they have many features. To start, we'll learn how to open them, look at errors, and run JavaScript commands. -## गूगल क्रोम (Google Chrome) +## Google Chrome -इस पृष्ठ (page) को खोलें [bug.html](bug.html). +Open the page [bug.html](bug.html). -इस पर जावास्क्रिप्ट कोड में एक त्रुटि है। यह एक नियमित उपयोगकर्ता की आंखों से छिपा हुआ है, इसलिए इसे देखने के लिए डेवलपर टूल खोलें। +There's an error in the JavaScript code on it. It's hidden from a regular visitor's eyes, so let's open developer tools to see it. -`key:F12` दबाएँ या, यदि आप Mac पर हैं, तो `key:Cmd+Opt+J` दबाएँ. +Press `key:F12` or, if you're on Mac, then `key:Cmd+Opt+J`. -डेवलपर टूल डिफ़ॉल्ट रूप से कंसोल टैब पर खुलेगा। +The developer tools will open on the Console tab by default. -यह कुछ इस तरह दिखता है: +It looks somewhat like this: ![chrome](chrome.png) -डेवलपर टूल का सटीक रूप आपके Chrome के संस्करण पर निर्भर करता है। यह समय-समय पर बदलता रहता है लेकिन यह इस तरह ही होना चाहिए। +The exact look of developer tools depends on your version of Chrome. It changes from time to time but should be similar. -- यहां हम लाल रंग का एरर मैसेज (error message) देख सकते हैं। इस मामले में, स्क्रिप्ट में एक अज्ञात "lalala" कमांड है। -- दाईं ओर, लाइन नंबर के साथ स्रोत `Bug.html: 12` पर क्लिक करने योग्य लिंक है जहां त्रुटि हुई है। +- Here we can see the red-colored error message. In this case, the script contains an unknown "lalala" command. +- On the right, there is a clickable link to the source `bug.html:12` with the line number where the error has occurred. -त्रुटि संदेश के नीचे, एक नीला `>` प्रतीक है। यह एक "कमांड लाइन" (command line, console) है जहाँ हम जावास्क्रिप्ट कमांड टाइप कर सकते हैं। उन्हें चलाने के लिए `key:Enter` दबाएँ। +Below the error message, there is a blue `>` symbol. It marks a "command line" where we can type JavaScript commands. Press `key:Enter` to run them. -अब हम त्रुटियां देख सकते हैं, और यह शुरुआत के लिए पर्याप्त है। हम बाद में डेवलपर टूल पर वापस आएंगे और अध्याय में अधिक गहराई से डिबगिंग को कवर करेंगे। +Now we can see errors, and that's enough for a start. We'll come back to developer tools later and cover debugging more in-depth in the chapter . ```smart header="Multi-line input" -आमतौर पर, जब हम कंसोल में कोड की एक पंक्ति डालते हैं, और फिर `key:Enter` दबाते हैं, यह निष्पादित होता है। +Usually, when we put a line of code into the console, and then press `key:Enter`, it executes. -कई पंक्तियों को सम्मिलित करने के लिए, `key:Shift + Enter` दबाएँ। इस तरह से कोई भी लंबे जावास्क्रिप्ट कोड को लिख और निष्पादित कर सकता है। +To insert multiple lines, press `key:Shift+Enter`. This way one can enter long fragments of JavaScript code. ``` -## फ़ायरफ़ॉक्स, एज, और अन्य ब्राउज़र (Firefox, Edge, and others) +## Firefox, Edge, and others -अधिकांश अन्य ब्राउज़र डेवलपर टूल खोलने के लिए `key:F12` का उपयोग करते हैं। +Most other browsers use `key:F12` to open developer tools. -इनका लुक और फील काफी समान है। एक बार जब आप जानते हैं कि इनमें से किसी एक टूल का उपयोग कैसे करें (आप Chrome से शुरू कर सकते हैं), तो आप आसानी से दूसरे का उपयोग कर सकते हैं। +The look & feel of them is quite similar. Once you know how to use one of these tools (you can start with Chrome), you can easily switch to another. -## सफारी (Safari) +## Safari -सफारी (मैक ब्राउज़र, विंडोज/लिनक्स द्वारा समर्थित नहीं है) थोड़ा विशेष है। हमें पहले "Develop menu" को सक्रिय करने की आवश्यकता है। +Safari (Mac browser, not supported by Windows/Linux) is a little bit special here. We need to enable the "Develop menu" first. -Preferences खोलें और "Advanced" फलक पर जाएं। नीचे एक चेकबॉक्स है: +Open Preferences and go to the "Advanced" pane. There's a checkbox at the bottom: ![safari](safari.png) -अब `key:Cmd + Opt + C` कंसोल को टॉगल कर सकता है। इसके अलावा, ध्यान दें कि "Develop" नाम का नया शीर्ष मेनू आइटम दिखाई दिया है। इसमें कई अन्य कमांड और विकल्प हैं। +Now `key:Cmd+Opt+C` can toggle the console. Also, note that the new top menu item named "Develop" has appeared. It has many commands and options. -## सारांश +## Summary -- डेवलपर टूल हमें त्रुटियों को देखने, कमांड चलाने, variables की जांच करने और बहुत कुछ करने की अनुमति देते हैं। -- वे विंडोज पर अधिकांश ब्राउज़रों के लिए `key:F12` के साथ खोले जा सकते हैं। Mac पर Chrome को `key:Cmd + Opt + J`, Safari:` key:Cmd + Opt + C` (पहले सक्रिय करने की आवश्यकता है) की आवश्यकता है। +- Developer tools allow us to see errors, run commands, examine variables, and much more. +- They can be opened with `key:F12` for most browsers on Windows. Chrome for Mac needs `key:Cmd+Opt+J`, Safari: `key:Cmd+Opt+C` (need to enable first). -अब हमारे पास वातावरण तैयार है। अगले भाग में, हम जावास्क्रिप्ट लिखेंगे। +Now we have the environment ready. In the next section, we'll get down to JavaScript. diff --git a/1-js/02-first-steps/01-hello-world/article.md b/1-js/02-first-steps/01-hello-world/article.md index 7617df69d..4343a2055 100644 --- a/1-js/02-first-steps/01-hello-world/article.md +++ b/1-js/02-first-steps/01-hello-world/article.md @@ -1,16 +1,18 @@ -# Hello, world! (नमस्ते दुनिया!) +# Hello, world! शिक्षण जो आप पढ़ रहे हैं, वह कोर जावास्क्रिप्ट के बारे में है, जो प्लेटफ़ॉर्म-स्वतंत्र है। इसके अलावा, आप Node.JS और इसका उपयोग करने वाले अन्य प्लेटफ़ॉर्म सीखेंगे। -लेकिन, हमें अपनी स्क्रिप्ट को चलाने के लिए काम करने का environment चाहिए, और, सिर्फ इसलिए कि यह पुस्तक ऑनलाइन है, ब्राउज़र एक अच्छा विकल्प है। हम ब्राउज़र-विशिष्ट commands की मात्रा कम रखेंगे (जैसे `alert`) ताकि, यदि आप किसी अन्य environment जैसे Node.JS पर ध्यान केंद्रित करने की योजना बनाते हैं, तब आप ब्राउज़र जावास्क्रिप्ट सीखने में समय व्यतीत नहीं करेंगे। हम ट्यूटोरियल के [अगले भाग](/ui) में ब्राउज़र जावास्क्रिप्ट पर ध्यान केंद्रित करेंगे। +लेकिन, हमें अपनी स्क्रिप्ट को चलाने के लिए काम करने का environment चाहिए, और, सिर्फ इसलिए कि यह पुस्तक ऑनलाइन है, ब्राउज़र एक अच्छा विकल्प है। हम ब्राउज़र-विशिष्ट commands की मात्रा रखेंगे (jase ki `alert`) यदि आप किसी अन्य environment जैसे Node.JS पर ध्यान केंद्रित करने की योजना बनाते हैं, तो न्यूनतम समय मैं उन पर समय व्यतीत न करें। दूसरी ओर, ब्राउज़र विवरण में विस्तार से बताया गया है [अगला भाग](/ui) ट्यूटोरियल का. -तो पहले यह देखते हैं कि हम किसी स्क्रिप्ट को वेबपेज से कैसे जोड़ते हैं। सर्वर-साइड वातावरण (जैसे Node.js) के लिए, आप स्क्रिप्ट को `"node my.js"` जैसे कमांड से निष्पादित कर सकते हैं। -## "स्क्रिप्ट" टैग +So first, let's see how we attach a script to a webpage. For server-side environments (like Node.js), you can execute the script with a command like `"node my.js"`. -जावास्क्रिप्ट प्रोग्रामों को HTML दस्तावेज़ के किसी भी भाग में ` */!* -

...स्क्रिप्ट के बाद.

+

...After the script.

@@ -34,23 +36,24 @@ ``` ```online -आप ऊपर दिए गए बॉक्स के दाएं-कोने में "प्ले" बटन पर क्लिक करके उदाहरण चला सकते हैं। +You can run the example by clicking the "Play" button in the right-top corner of the box above. ``` -`<स्क्रिप्ट>` टैग में जावास्क्रिप्ट कोड होता है जो ब्राउज़र द्वारा टैग को संसाधित (process) करने पर स्वचालित रूप से निष्पादित होता है। +The ` ``` - इस तकनीक का उपयोग आधुनिक जावास्क्रिप्ट में नहीं किया जाता है। ये टिप्पणियां जावास्क्रिप्ट कोड को उन पुराने ब्राउज़रों से छिपाती हैं, जो '<स्क्रिप्ट>' टैग को प्रोसेस करना नहीं जानते थे। चूंकि पिछले 15 वर्षों में जारी किए गए ब्राउज़रों में यह समस्या नहीं है, इसलिए इस तरह की टिप्पणी से आप वास्तव में पुराने कोड को पहचान सकते हैं। + This trick isn't used in modern JavaScript. These comments hide JavaScript code from old browsers that didn't know how to process the ` ``` -यहाँ, `/path/to/script.js` यह साइट रूट से स्क्रिप्ट के लिए एक absolute (निरपेक्ष) पथ है। वर्तमान पृष्ठ से कोई एक relative (आपेक्षिक) पथ भी प्रदान कर सकता है। उदाहरण के लिए, `src="script.js"` वर्तमान फोल्डर के अंदर एक फ़ाइल `"script.js"` का अर्थ होगा। +Here, `/path/to/script.js` is an absolute path to the script from the site root. One can also provide a relative path from the current page. For instance, `src="script.js"` would mean a file `"script.js"` in the current folder. -हम एक पूर्ण URL भी दे सकते हैं। उदाहरण के लिए: +We can give a full URL as well. For instance: ```html ``` -कई स्क्रिप्ट संलग्न करने के लिए, कई टैग का उपयोग करें: +To attach several scripts, use multiple tags: ```html @@ -88,29 +91,29 @@ ``` ```smart -एक नियम के रूप में, केवल सरलतम स्क्रिप्ट HTML में डाली जाती हैं। अधिक जटिल अलग फ़ाइलों में रहते हैं। +As a rule, only the simplest scripts are put into HTML. More complex ones reside in separate files. -एक अलग फ़ाइल का लाभ यह है कि ब्राउज़र इसे डाउनलोड करेगा और इसे अपने कैश में रखेगा [cache](https://en.wikipedia.org/wiki/Web_cache). +The benefit of a separate file is that the browser will download it and store it in its [cache](https://en.wikipedia.org/wiki/Web_cache). -उसी स्क्रिप्ट को संदर्भित करने वाले अन्य पृष्ठ इसे डाउनलोड करने के बजाय इसे कैश से ले लेंगे, इसलिए फ़ाइल वास्तव में केवल एक बार डाउनलोड की जाती है। +Other pages that reference the same script will take it from the cache instead of downloading it, so the file is actually downloaded only once. -यह ट्रैफ़िक कम करता है और पृष्ठों को तेज़ बनाता है। +That reduces traffic and makes pages faster. ``` -````warn header="यदि `src` सेट है, तो स्क्रिप्ट के अंदर मौजूद कोड को अनदेखा कर दिया जाता है।" -एक ``` -हमें या तो बाहरी स्क्रिप्ट का चयन करना होगा जैसे ` @@ -120,11 +123,11 @@ ``` ```` -## सारांश +## Summary -- हम एक पृष्ठ पर जावास्क्रिप्ट कोड जोड़ने के लिए एक `<स्क्रिप्ट>` टैग का उपयोग कर सकते हैं। -- `टाइप` और` भाषा` attribute की आवश्यकता नहीं है। -- एक बाहरी फाइल में लिखी गई स्क्रिप्ट को ` के साथ डाला जा सकता है। +- We can use a ``. -ब्राउज़र स्क्रिप्ट और वेबपेज के interaction (परस्पर क्रिया) के बारे में जानने के लिए बहुत कुछ है। लेकिन ध्यान रखें कि ट्यूटोरियल का यह हिस्सा जावास्क्रिप्ट भाषा के लिए समर्पित है, इसलिए हमें इसके विशिष्ट ब्राउज़र कार्यान्वयन के साथ खुद को विचलित नहीं करना चाहिए। हम जावास्क्रिप्ट को चलाने के लिए ब्राउज़र का उपयोग करेंगे, जो कई विकल्पों में से ऑनलाइन पढ़ने के लिए बहुत सुविधाजनक है। +There is much more to learn about browser scripts and their interaction with the webpage. But let's keep in mind that this part of the tutorial is devoted to the JavaScript language, so we shouldn't distract ourselves with browser-specific implementations of it. We'll be using the browser as a way to run JavaScript, which is very convenient for online reading, but only one of many.