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

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

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

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

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

JavaScript कंसोल

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

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

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

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

81% प्रतिभागियों ने कहा कि बूटकैंप में भाग लेने के बाद उन्हें अपनी तकनीकी नौकरी की संभावनाओं के बारे में अधिक आत्मविश्वास महसूस हुआ। आज ही एक बूटकैंप से मिलान करें।

बूटकैंप शुरू करने से लेकर अपनी पहली नौकरी खोजने तक, औसत बूटकैंप ग्रेड ने करियर संक्रमण में छह महीने से भी कम समय बिताया।

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

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

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

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

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

कंसोल में आपके द्वारा उपयोग की जाने वाली तीन मुख्य विधियाँ हैं:

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, या दस्तावेज़ ऑब्जेक्ट मॉडल, तत्व हमारे वेबपेज पर टैग हैं।

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;
}

पहली पंक्ति कंसोल संदेश "बटन क्लिक किया गया" कंसोल पर प्रिंट करेगी। इसके बाद, हम अपने "क्लिक्स" काउंटर में 1 जोड़ते हैं। फिर हम अपने टैग में टेक्स्ट की सामग्री को इनरटेक्स्ट विधि का उपयोग करके अपडेट की गई क्लिक गणना को प्रतिबिंबित करने के लिए बदलते हैं।

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

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

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

निष्कर्ष

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

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