जावास्क्रिप्ट कंसोल: शुरुआती लोगों के लिए गाइड

कोड लिखना, जबकि मनोरंजक, काफी थकाऊ भी हो सकता है।

ऐसे दिन होते हैं जब आप कोड लिखना शुरू करते हैं, महसूस करते हैं कि कुछ नहीं चल रहा है, और बहुत निराश हो जाते हैं। इससे भी अधिक कष्टप्रद तब होता है जब आपका कोड चलता है, लेकिन आप यह नहीं समझ पाते कि यह सही ढंग से काम क्यों नहीं कर रहा है; जब आपके कोड में कुछ ऐसा होता है जिसे ठीक करने की आवश्यकता होती है।

यहीं जावास्क्रिप्ट कंसोल उपयोगी हो सकता है। कंसोल आपको अपने कोड में क्या हो रहा है, इसका ट्रैक रखने की अनुमति देता है। इससे यह पता लगाना आसान हो जाता है कि आपके कोड में क्या गलत है।

इस गाइड में, हम जावास्क्रिप्ट कंसोल का उपयोग करने के तरीके पर चर्चा करेंगे। हम कंसोल का उपयोग करने वाले एप्लिकेशन का एक उदाहरण भी प्रदान करेंगे ताकि आप जावास्क्रिप्ट कंसोल को जल्दी से मास्टर कर सकें।

जावास्क्रिप्ट कंसोल

डेवलपर, कंसोल से मिलें। आप डेवलपर के रूप में अपने समय में कंसोल में बहुत समय बिताएंगे, इसलिए यह कुछ ऐसा है जिससे आपको खुद को परिचित करने की आवश्यकता है।

कंसोल एक ऐसी जगह है जहां आप अपने एप्लिकेशन के चलते समय संदेश प्रदर्शित कर सकते हैं और जहां आप वेब पेज की सामग्री में हेरफेर कर सकते हैं।

आप अपने कोड को कंसोल पर संदेश लॉग करने के लिए कह सकते हैं और वे तब प्रकट होंगे जब आपने उन्हें ऐसा करने का निर्देश दिया हो। आप कंसोल का उपयोग वेरिएबल्स, मानों को संशोधित करने और वेरिएबल में स्टोर मानों का निरीक्षण करने के लिए भी कर सकते हैं।

अपना कंसोल प्रदर्शित करने के लिए, आपको डेवलपर टूल्स खोलने होंगे। क्रोम में, आप विंडोज पर Ctrl + Shift + I या मैक पर Cmd + Alt + I का उपयोग करके ऐसा कर सकते हैं। फ़ायरफ़ॉक्स में, आप Command + Option + K का उपयोग करके डेवलपर टूल्स खोल सकते हैं।

जब आप ऐसा करते हैं, तो इस तरह एक विंडो खुलेगी:

हर आधुनिक ब्राउज़र का अपना डेवलपर टूल्स सूट होता है और सभी ब्राउज़र्स में कई सामान्य विशेषताएं होती हैं। इस ट्यूटोरियल के लिए, हम केवल कंसोल पर ध्यान केंद्रित करने जा रहे हैं।

कंसोल के साथ शुरुआत करना

हम कंसोल पर संदेश प्रदर्शित करके शुरू करने जा रहे हैं। हम इसे वेब पेज खोले बिना भी कर सकते हैं। आपको बस अपना ब्राउज़र कंसोल खोलना है और उन जावास्क्रिप्ट स्टेटमेंट्स को लिखना है जिन्हें आप एक्जीक्यूट करना चाहते हैं।

कंसोल में आप तीन मुख्य मेथड्स का उपयोग करेंगे:

• console.log(): कंसोल पर संदेश प्रदर्शित करता है।
• console.warn(): कंसोल में चेतावनी प्रदर्शित करता है।
• console.error(): कंसोल में त्रुटि प्रदर्शित करता है।

जारी रखने से पहले, आपको अपने कंसोल में कुछ भी पेस्ट नहीं करना चाहिए बिना पहले यह जाने कि कोड क्या करता है। कई आधुनिक साइटें आपको इसके प्रति चेतावनी देंगी क्योंकि ऐसे घोटाले हैं जो संवेदनशील उपयोगकर्ता जानकारी तक पहुंचने के लिए कंसोल का उपयोग करते हैं।

इसके साथ ही, आइए शुरू करें! कंसोल पर संदेश प्रदर्शित करने के लिए, हम इस कोड का उपयोग कर सकते हैं:

console.log("Career Karma is logging stuff to the console!");

जैसे ही आप इस कमांड को एक्जीक्यूट करते हैं, निम्नलिखित लौटाया जाएगा:

आप कंसोल पर त्रुटियों और चेतावनियों को भी प्रदर्शित कर सकते हैं। त्रुटियों और चेतावनियों और पारंपरिक log() स्टेटमेंट के बीच अंतर यह है कि त्रुटियां और चेतावनियां क्रमशः नारंगी और लाल रंग में दिखाई देती हैं:

console.warn("Hey, something is going on!"); console.error("Hey, your code has stopped working!");

हमारा कोड रिटर्न करता है:

एप्लिकेशन में कंसोल का उपयोग करना

हम कंसोल ऑब्जेक्ट को एक्शन में दिखाने के लिए कुकी क्लिकर के बाद तैयार एक ऐप बनाने जा रहे हैं। यह ऐप एक काउंटर प्रदर्शित करेगा जो हमें दिखाता है कि चाय के कप की छवि को कितनी बार क्लिक किया गया है। हम हर क्लिक को कंसोल पर लॉग करेंगे ताकि हम ट्रैक रख सकें कि वे कब होते हैं।

फ्रंट-एंड विकसित करना

हमारा पहला कदम हमारे एप्लिकेशन के फ्रंट-एंड को विकसित करना है। "index.html" नामक फाइल बनाएं और निम्न कोड पेस्ट करें:

<!DOCTYPE html> <html> <head> <title>Tea Clicker</title> <link rel="stylesheet" href="./styles.css"> </head> <body> <div class="container"> <h2>Tea Clicker</h2> <p>Click the tea cup as many times as you can!</p> <img src="https://images.all-free-download.com/images/graphiclarge/tea_cup_with_teabag_311679.jpg" height="100" width="100" onclick="createClick()" /> <p>You have clicked the tea cup <span>0</span> times.</p> </div> <script src="./scripts.js"></script> </body> </html>

यह कोड हमारे वेब पेज पर चार आइटम प्रदर्शित करता है: एक शीर्षक, गेम का विवरण, चाय के कप की छवि और एक संदेश जो उपयोगकर्ता को सूचित करता है कि उन्होंने चाय के कप को कितनी बार क्लिक किया है।

आइए अपने कोड में कुछ स्टाइल्स भी जोड़ें ताकि यह आकर्षक दिखे। "styles.css" नामक फाइल बनाएं और यह कोड पेस्ट करें:

.container { background-color: lightblue; margin: auto; width: 50%; padding: 40px; text-align: center; } span { color: yellow; } img { border-radius: 50px; }

ये स्टाइल्स हमारे टी क्लिकर गेम के लिए एक बॉक्स बनाते हैं, क्लिक काउंटर का रंग पीला सेट करते हैं और हमारी छवि के लिए गोल कोने बनाते हैं। यहां हमारा वेबपेज अब कैसा दिखता है:

जब आप चाय के कप पर क्लिक करते हैं, तो कुछ नहीं होता। ऐसा इसलिए है क्योंकि हमने अभी तक अपना जावास्क्रिप्ट कोड नहीं जोड़ा है। आइए अपने एप्लिकेशन के लिए जावास्क्रिप्ट कोड लिखें।

जावास्क्रिप्ट का उपयोग करके कार्यक्षमता जोड़ना

जब उपयोगकर्ता चाय के कप पर क्लिक करता है, तो काउंटर को एक से बढ़ना चाहिए। अपना काउंटर बढ़ाने से पहले, हमें उन DOM एलिमेंट्स को चुनना होगा जिनके साथ हम काम करने जा रहे हैं: छवि और काउंटर। DOM, या डॉक्यूमेंट ऑब्जेक्ट मॉडल, एलिमेंट्स हमारे वेबपेज पर टैग हैं।

var clickCounter = document.querySelector("span"); var teaCup = document.querySelector("img");

हम एक वेरिएबल भी सेट करने जा रहे हैं जो ट्रैक करता है कि चाय के कप को कितनी बार क्लिक किया गया है:

var clicks = 0;

हमारा अगला कदम एक फंक्शन बनाना है जो लॉग करता है कि हमारा बटन कब क्लिक किया गया है और हमारे काउंटर को एक से बढ़ाता है। हम निम्न कोड का उपयोग करके ऐसा कर सकते हैं:

function createClick() { console.log("The button has been clicked") clicks += 1; clickCounter.innerText = clicks; }

पहली लाइन कंसोल संदेश "The button has been clicked" को कंसोल पर प्रिंट करेगी। अगला, हम अपने "clicks" काउंटर में 1 जोड़ते हैं। फिर हम innerText मेथड का उपयोग करके अपने <span> टैग में टेक्स्ट की सामग्री को अपडेटेड क्लिक काउंट को प्रतिबिंबित करने के लिए बदलते हैं।

आइए अपना वेब पेज देखें और चाय के कप की छवि पर क्लिक करें:

जैसा कि देखा गया, जब हम चाय के कप पर क्लिक करते हैं तो हमारा काउंटर एक से बढ़ जाता है। इसके अलावा, हमारे कोड में निर्दिष्ट संदेश कंसोल पर प्रिंट होता है। यह हमें यह समझने में मदद करता है कि उपयोगकर्ता चाय के कप पर कब क्लिक करता है।

जबकि यह console.log() स्टेटमेंट का बहुत बेसिक कार्यान्वयन है, बड़े एप्लिकेशन में आप देख सकते हैं कि लॉगिंग व्यापक रूप से उपयोग की जाती है। अधिकांश भाग के लिए, लॉग्स केवल एप्लिकेशन के डेवलपमेंट वर्जन में रखे जाते हैं। ऐसा इसलिए है क्योंकि उपयोगकर्ताओं को पर्दे के पीछे क्या हो रहा है, यह देखने की आवश्यकता नहीं है। इसके बावजूद, लॉगिंग अभी भी डेवलपर्स के लिए एक अविश्वसनीय रूप से मूल्यवान टूल है।

निष्कर्ष

कंसोल एक टूल है जिसका उपयोग आप यह जानने के लिए कर सकते हैं कि आपका कोड कैसे काम करता है। आप इसका उपयोग अपने कोड के चलते समय डिबगिंग संदेश प्रदर्शित करने या चेतावनियों और त्रुटियों का ट्रैक रखने के लिए कर सकते हैं।

आपको लॉगिंग स्टेटमेंट्स का उपयोग केवल तभी करना चाहिए जब आप अपना एप्लिकेशन विकसित कर रहे हों, या यदि आप अपने कोड के लिए कस्टम त्रुटि संदेश बनाना चाहते हैं जिनका उपयोग आप डिबगिंग के लिए कर सकते हैं। आपको ऑनलाइन उपलब्ध वेब एप्लिकेशन में बहुत अधिक लॉग नहीं रखने चाहिए।