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

| | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | |

कोडिंग, मस्ती के साथ-साथ काफी उबाऊ भी हो सकती है।

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

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

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

JavaScript कंसोल

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

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

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

कंसोल का परिचय

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

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

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

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

ऐसा कहने के बाद, चलो चलते हैं ! कंसोल पर संदेश प्रदर्शित करने के लिए, आप इस कोड का उपयोग कर सकते हैं:

जैसे ही आप इस कमांड को चलाते हैं, निम्नलिखित वापस आ जाएंगे।

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

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

 GXz6eGAaJ96el M5cfzcRpa196fdNovCUxjUJQ2PhfTS6qzu40XrYivl5mtxBeUZGiTWoAe PIwF4SarOiG4St KfpQwMepeoqJTBjs0T52cxigKuo1Kuo1RE / figureReq2 <coJh2GK2 </ coJsquo2 आवेदन <coJuc5> </ figureRij64> coJuc5> </ figureRij64> coJuc5 सांत्वना वस्तु कार्रवाई प्रदर्शित करने के लिए कुकीज़ चयनकर्ता के मॉडल पर एक आवेदन पैदा करते हैं। इस एप्लिकेशन को होगा एक काउंटर प्रदर्शित करें जो हमें दिखाता है कि एक कप चाय की छवि कितनी बार क्लिक की गई है। हम कंसोल पर प्रत्येक क्लिक को रिकॉर्ड करेंगे ताकि हम ट्रैक कर सकें कि वे कब होते हैं।</p><h3>फ्रंट-एंड विकास </h3> <p>हमारा पहला कदम हमारे एप्लिकेशन के फ्रंट-एंड को विकसित करना है।

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

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

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

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

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

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

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

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

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

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

EIKDPoZ9JdR7K2z9gO1tF3EgmA SiXEKFGhG1IX2582CL9fAqROhwvP5GUrKZ2hJRxU O5PDdjUonsg6FUhmM7xwziHS1teOdzM8LqZV Sofm0 NnTl2mJPEDot4bvH64ElzOQm3

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

निष्कर्ष

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