जावास्क्रिप्ट में वर्ड काउंटर कैसे बनाएं

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

आप HTML, CSS और JavaScript का उपयोग करके अपना स्वयं का शब्द काउंटर बना सकते हैं। एक वेब ब्राउज़र में अपना शब्द काउंटर खोलें, अपना पाठ इनपुट फ़ील्ड में दर्ज करें, और देखें कि आप कितने शब्दों का उपयोग कर रहे हैं।

यह प्रोजेक्ट आपके जावास्क्रिप्ट ज्ञान का अभ्यास करने और उसे ठोस बनाने में आपकी मदद करने में भी उपयोगी हो सकता है।

वर्ड काउंटर के लिए यूआई कैसे बनाएं

शब्द काउंटर के लिए UI बनाने के लिए, मूल HTML पृष्ठ में टेक्स्ट क्षेत्र इनपुट जोड़ें। यह वह जगह है जहां आप उस वाक्य या पैराग्राफ को दर्ज कर सकते हैं जिसके लिए आप शब्दों की गिनती करना चाहते हैं।

1. "index.html" नामक एक नई HTML फ़ाइल बनाएँ।
2. फ़ाइल के अंदर, HTML वेबपेज के लिए मूल संरचना जोड़ें:

   एचटीएमएल>
   <एचटीएमएललैंग="एन-यूएस">
   <सिर>
   <शीर्षक> शब्द काउंटर शीर्षक>
   सिर>
   <शरीर>
   
   कक्षा="कंटेनर">
   <एच 1> शब्द गिनें एच 1>
   डिव>
   शरीर>
   एचटीएमएल>

3. कंटेनर div के अंदर और शीर्षक के नीचे, एक पाठ क्षेत्र जोड़ें:

   <पाठ क्षेत्रपहचान="इनपुट"पंक्तियों="10">पाठ क्षेत्र>

4. पाठ क्षेत्र के नीचे, एक बटन जोड़ें:

   <बटनपहचान="काउंट-बटन">शब्द गिनेंबटन>

5. उपयोगकर्ता द्वारा ऊपर दिए गए बटन पर क्लिक करने पर शब्द गणना प्रदर्शित करने के लिए एक स्पैन टैग जोड़ें:

   <डिव>
    शब्द: <अवधिपहचान="शब्द-गणना-परिणाम">0अवधि>
   डिव>

6. आपकी HTML फ़ाइल के समान फ़ोल्डर में, "styles.css" नामक एक नई फ़ाइल बनाएँ।
7. अपने वेबपेज को स्टाइल देने के लिए CSS फ़ाइल को कुछ CSS से भरें:

   शरीर {
    मार्जिन: 0;
    गद्दी: 0;
    पृष्ठभूमि का रंग: #f0fcfc;
   }
   * {
    फुहारा परिवार: "एरियल", सान्स सेरिफ़;
   }
   कंटेनर {
    पैडिंग: 100px 25%;
    डिस्प्ले: फ्लेक्स;
    फ्लेक्स-दिशा: स्तंभ;
    रेखा-ऊँचाई: 2रेम;
   फ़ॉन्ट आकार: 1.2रेम;
    रंग: #202C39;
   }
   पाठ क्षेत्र {
    पैडिंग: 20 पीएक्स;
    फ़ॉन्ट-आकार: 1रेम;
    मार्जिन-बॉटम: 40 पीएक्स;
   }
   बटन {
    पैडिंग: 10 पीएक्स;
    मार्जिन-बॉटम: 40 पीएक्स;
   } 

8. HTML हेड टैग के अंदर एक लिंक टैग शामिल करके CSS फ़ाइल को अपनी HTML फ़ाइल से लिंक करें:

   <जोड़नासंबंधित="शैली पत्रक"href="शैलियाँ.सीएसएस">

9. वेबपेज के यूआई का परीक्षण करने के लिए, इसे वेब ब्राउज़र में खोलने के लिए "index.html" फ़ाइल पर क्लिक करें।

टेक्‍स्‍टेरिया के अंदर प्रत्‍येक शब्‍द की गणना कैसे करें

जब कोई उपयोगकर्ता पाठ क्षेत्र में एक वाक्य दर्ज करता है, तो वेबपेज को प्रत्येक शब्द को गिनना चाहिए जब वे उस पर क्लिक करते हैं शब्द गिनें बटन।

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

1. आपकी "index.html" और "styles.css" फ़ाइलों वाले फ़ोल्डर में, "script.js" नामक एक नई फ़ाइल जोड़ें।
2. बॉडी टैग के नीचे एक स्क्रिप्ट टैग जोड़कर अपनी HTML फ़ाइल को अपनी जावास्क्रिप्ट फ़ाइल से लिंक करें:

   <शरीर>
    आपका कोड यहाँ 
   <लिखी हुई कहानीस्रोत="स्क्रिप्ट.जेएस">लिखी हुई कहानी>
   शरीर>

3. script.js के अंदर, textarea, बटन, और HTML तत्वों को पुनः प्राप्त करने के लिए getElementById() फ़ंक्शन का उपयोग करें। इन तत्वों को तीन अलग-अलग चरों में संग्रहित करें:

   होने देना इनपुट = दस्तावेज़.getElementById("इनपुट");
   होने देना बटन = दस्तावेज़.getElementById("काउंट-बटन");
   होने देना शब्द गणना परिणाम = दस्तावेज़.getElementById("शब्द-गणना-परिणाम");

4. एक क्लिक इवेंट श्रोता जोड़ें। उपयोगकर्ता द्वारा क्लिक करने पर यह फ़ंक्शन निष्पादित होगा शब्द गिनें बटन:

   बटन.ऐडइवेंट लिस्टनर ("क्लिक करें", समारोह() {
   });

5. क्लिक इवेंट श्रोता के अंदर, वह मान प्राप्त करें जो उपयोगकर्ता ने टेक्स्टारिया में दर्ज किया था। आप इस मान को इनपुट चर में पा सकते हैं, जो टेक्स्टरेरा HTML तत्व को संग्रहीत करता है।

   होने देना str = इनपुट.वैल्यू;

6. स्ट्रिंग को अलग-अलग शब्दों में अलग करने के लिए स्प्लिट () फ़ंक्शन का उपयोग करें। यह तब होगा जब स्ट्रिंग में कोई स्थान होगा। यह प्रत्येक शब्द को एक नई सरणी के तत्व के रूप में संग्रहीत करेगा। उदाहरण के लिए, यदि दर्ज किया गया वाक्य "आई लव डॉग्स" था, तो परिणामी सरणी ["आई", "लव", "डॉग्स"] होगी।

   होने देना शब्दसूची = str.split (" ");

7. सरणी की लंबाई का उपयोग करके शब्द गणना ज्ञात करें:

   होने देना गिनती = शब्दसूची.लंबाई;

8. उपयोगकर्ता को परिणाम वापस प्रदर्शित करने के लिए, नया मान प्रदर्शित करने के लिए स्पैन HTML तत्व की सामग्री बदलें:

   wordCountResult.innerHTML = गिनती; 

उदाहरण वर्ड काउंटर का उपयोग कैसे करें

आप वेब ब्राउज़र का उपयोग करके अपने शब्द काउंटर वेबपेज का परीक्षण कर सकते हैं।

1. किसी भी वेब ब्राउज़र में index.html खोलें।
2. पाठ क्षेत्र में एक वाक्य या अनुच्छेद दर्ज करें:
3. पर क्लिक करें शब्द गिनें शब्द गणना अद्यतन करने के लिए बटन। यह शब्द गणना प्रदर्शित करेगा, जैसे आप करते हैं Google डॉक्स पर शब्द गणना की जाँच की, माइक्रोसॉफ्ट वर्ड, या कोई अन्य संपादक जिसमें शब्द गणना हो।

जावास्क्रिप्ट का उपयोग करके सरल अनुप्रयोग बनाना

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