अपना पहला वेब ऐप बनाएं: नोट्स + काउंटर आसान और तेज़ 📝⚡

प्रोग्रामिंग में शुरुआत करना बहुत कठिन लग सकता है, क्योंकि इसमें बहुत सारी भाषाओं, फ्रेमवर्क और कार्यप्रणालियों पर विचार करना होता है। कभी-कभी सब कुछ AI को सौंप देना आसान लग सकता है। चिंता मत करो! वेब के लिए प्रोग्रामिंग सरल, मज़ेदार और सबसे अच्छी बात यह है कि यह पूरी तरह से निःशुल्क हो सकती है! 🌐✨

आप क्या बनाने जा रहे हैं

इस ट्यूटोरियल का अनुसरण करके, आप टेक्स्ट नोट्स संग्रहीत करने और वर्णों और शब्दों की गणना करने के लिए एक सरल वेब एप्लिकेशन बनाएंगे।

ऐप डेटा को बनाए रखेगा, इसलिए जब आप पृष्ठ को पुनः लोड करेंगे या पुनः खोलेंगे तो यह पाठ को याद रखेगा। इसका मतलब यह है कि आपके पास किसी भी पाठ को सहेजने का एक सुविधाजनक तरीका होगा जिसे आप बाद में संदर्भित करना चाहते हैं, जैसे पते, यूआरएल, आदि।

एक सरल पाठ-आधारित वेब अनुप्रयोग का उदाहरण जो कैलेंडर प्रविष्टि और URL की सूची सहित नोट्स प्रदर्शित करता है।

यह वर्णों और शब्दों की भी गणना करता है, जो स्ट्रिंग (पाठ) प्रबंधन के लिए एक अच्छा परिचय है। बेशक, ऐप बहुत सरल है: यही इसका उद्देश्य है! लेकिन इस ट्यूटोरियल के साथ, आप वेब एप्लिकेशन विकसित करने की मूल बातें सीखेंगे, और फिर दुनिया आपके लिए खुली होगी। 🦪💻

आप इसका निर्माण कैसे करेंगे?

यद्यपि वेब अनुप्रयोग बहुत विविध हैं, फिर भी उनमें आम तौर पर तीन मुख्य प्रौद्योगिकियां शामिल होती हैं: HTML, CSS, और जावास्क्रिप्ट। यह आवश्यक है कि आप शुरू करने से पहले उनकी भूमिका को समझें। 📚

HTML: हाइपरटेक्स्ट मार्कअप लैंग्वेज आपको अपनी सामग्री की संरचना को परिभाषित करने की अनुमति देती है। इसके साथ, आप किसी पाठ को उसके अर्थ के अनुसार चिह्नित कर सकते हैं, उदाहरण के लिए, यह इंगित करते हुए कि यह एक पैराग्राफ है, शीर्षक है, या सूची में कोई आइटम है।
सीएसएस: कैस्केडिंग स्टाइल शीट्स आपको अपनी सामग्री को स्टाइल करने की अनुमति देती है। इस भाषा का उपयोग करके, आप किसी पैराग्राफ को हरा रंग दे सकते हैं, अपने सभी लिंक को बोल्ड बना सकते हैं, या अपने मुख्य लेख के बगल में एक साइडबार रख सकते हैं। 🎨
जावास्क्रिप्ट: इस प्रोग्रामिंग भाषा के साथ, आप अपनी वेबसाइट में कार्यक्षमता जोड़ सकते हैं। आप बटनों पर क्लिक करने पर अपने दस्तावेज़ के कुछ भाग दिखा या छिपा सकते हैं, या एक पूर्ण विकसित वर्ड प्रोसेसर या वीडियो गेम लागू कर सकते हैं। 🎮

वह वेबसाइट.dev (क्रोम टीम के सदस्यों द्वारा लिखित) और MDN, मोज़िला डेवलपर नेटवर्क, मौलिक वेब प्रौद्योगिकियों पर जानकारी के दो उत्कृष्ट स्रोत हैं।

HTML, CSS और JavaScript के लिए शिक्षण संसाधनों के साथ web.dev साइट का मुखपृष्ठ।

ऐप की संरचना

आपके द्वारा बनाया जाने वाला ऐप तीन सरल फ़ाइलों से मिलकर बनेगा: index.html, styles.css, और script.js. 🗂️

ऐप चलाने के लिए कोई विशेष आवश्यकता नहीं है, आपको बस एक वेब ब्राउज़र की आवश्यकता है। इसमें कोई बैकएंड कार्यक्षमता नहीं है, इसलिए आपको PHP जैसी स्क्रिप्टिंग भाषा या स्थानीय वेब सर्वर की आवश्यकता नहीं है। एक बार आपका काम पूरा हो जाए, तो आप इसे खोल सकते हैं index.html फ़ाइल को सीधे अपने ब्राउज़र में और सब कुछ ठीक हो जाएगा. 😊

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

नोट लेने वाला उपकरण कैसे बनाएं

एक ही डायरेक्टरी में निम्नलिखित तीन फ़ाइलें बनाएं और फिर वेब ब्राउज़र में index.html खोलें। वैकल्पिक रूप से, आप फ़ाइलों को यहाँ से डाउनलोड कर सकते हैं यह GitHub रिपोजिटरी. 📥

HTML के साथ संरचना का निर्माण

index.html फ़ाइल आपके ऐप की सामग्री की संरचना को HTML में परिभाषित करती है। अन्य दो फ़ाइलों के संदर्भ शामिल करें ताकि ब्राउज़र उन्हें अंतिम उत्पाद के लिए संयोजित कर सके।

सभी HTML दस्तावेजों की तरह, शीर्ष-स्तरीय संरचना में एक हेड अनुभाग होता है जिसमें मेटाडेटा होता है और एक बॉडी अनुभाग होता है जिसमें पृष्ठ पर दिखाई देने वाली वास्तविक सामग्री होती है:

एचटीएमएल>
<एचटीएमएल>
<सिर>
    ...
सिर>

<शरीर>
…
शरीर>
एचटीएमएल>

हेड में मेटाडेटा बहुत संक्षिप्त है, जिसमें केवल एक पृष्ठ शीर्षक (जो आपके ब्राउज़र के शीर्षक बार में दिखाई देता है) और styles.css फ़ाइल का संदर्भ है:

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

शरीर अधिक जटिल है, लेकिन इसमें कुछ ही महत्वपूर्ण भाग हैं:

    <डिव पहचान="विरोध करना">
        शब्द: <अवधि पहचान="शब्द">0अवधि>
        / वर्ण: <अवधि पहचान="अक्षर">0अवधि>
    डिव>

<पाठ क्षेत्र पहचान="मूलपाठ" ऑटोफोकस=«1»>पाठ क्षेत्र>

<लिखी हुई कहानी स्रोत=«स्क्रिप्ट.js»>लिखी हुई कहानी>

Div तत्व में ऐप के शब्द और वर्ण की संख्या होती है। यह वेब ऐप के शीर्ष पर स्थित होगा और प्रत्येक बार पाठ बदलने पर अपडेट हो जाएगा।

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

टेक्स्टएरिया एक अंतर्निहित फॉर्म तत्व है जो आपको ब्राउज़र में सरल पाठ टाइप करने की अनुमति देता है। ऑटोफोकस विशेषता के साथ, आप पेज लोड होते ही लिखने के लिए तैयार हो जाएंगे। अंत में, पृष्ठ जावास्क्रिप्ट फ़ाइल script.js का संदर्भ देता है।

इस बिंदु पर, आप ब्राउज़र में index.html फ़ाइल खोल सकते हैं। यह अभी कुछ नहीं करेगा, और यह देखने में भी अच्छा नहीं लगेगा, लेकिन यह सुनिश्चित करने के लिए कि मूल बातें आपकी अपेक्षा के अनुरूप काम करती हैं, प्रत्येक चरण पर अपने ऐप का परीक्षण करना उपयोगी है।

डिफ़ॉल्ट ब्राउज़र शैलियों के साथ नोट लेने वाले वेब ऐप का एक दृश्य, जो ऊपरी बाएं कोने में समूहीकृत सब कुछ दिखाता है।

CSS के साथ उन्हें अच्छा बनाना

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

सबसे पहले, समग्र डिज़ाइन को परिभाषित करने के लिए बॉडी को स्टाइल करें:

शरीर {
    अंतर: 0;
    पैडिंग: 0;
    प्रदर्शन: ग्रिड;
    मिनट-ऊंचाई: 100वीएच;
    ग्रिड-टेम्पलेट-पंक्तियाँ: न्यूनतम सामग्री 1फादर;
}

यह सीएसएस उपयोग करता है ग्रिड लेआउट शब्द और वर्ण गणना को टेक्स्ट क्षेत्र के ऊपर एक संकीर्ण पंक्ति में रखने के लिए। ग्रिड-टेम्पलेट-पंक्तियाँ गुण निर्दिष्ट करता है कि गिनती पंक्ति यथासंभव छोटी होनी चाहिए (min-content) और टेक्स्टएरिया को शेष स्थान (1fr) भरना चाहिए।

प्रति पंक्ति की एक बुनियादी शैली है जो इसे शेष पाठ से अलग करती है, मुख्यतः इसकी पृष्ठभूमि के माध्यम से:

#काउंटर {
    फुहारा परिवार: सान्स सेरिफ़;
    पृष्ठभूमि का रंग: #f7f7f7;
    पाठ-संरेखण: केंद्र;
    चौड़ाई: 100%;
    पैडिंग: 0.5ईएम 0;
}

अंत में, टेक्स्ट क्षेत्र को पर्याप्त स्थान के साथ सुपाठ्य पाठ प्रदर्शित करने के लिए स्टाइल किया जाता है। गणनाओं को पाठ से अलग करने वाली रेखा वास्तव में इस पाठ क्षेत्र की ऊपरी सीमा है।

पाठ क्षेत्र {
    चौड़ाई: 100%;
    ऊंचाई: 100%;
    फ़ॉन्ट आकार: 16पीटी;
    पैडिंग: 1में;
    बॉक्स आकार: बॉर्डर-बॉक्स;
    रूपरेखा: 0;
    सीमा: कोई नहीं;
    बॉर्डर-शीर्ष: 1पिक्सल ठोस #999;
}

कस्टम शैलियों वाला नोट लेने वाला ऐप शीर्ष पर टैली बार प्रदर्शित करता है, तथा नीचे पूर्ण आकार का टेक्स्ट क्षेत्र प्रदर्शित करता है।

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

संरचना और शैली निर्धारित होने के बाद, आप कार्यक्षमता जोड़ने के लिए तैयार हैं: वह कोड जो इस सरल ऐप को वास्तव में कुछ करने में सक्षम बनाता है। 🛠️

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

प्रविष्ट पाठ को सहेजें और आवश्यकता पड़ने पर पुनः लोड करें।
वास्तविक समय के आँकड़े उपलब्ध कराने के लिए वर्ण और शब्द गणना को अद्यतन करें। 📊

दोनों आवश्यकताओं में दस्तावेज़ में तत्वों को अद्यतन करना शामिल है। अतः स्क्रिप्ट getElementById विधि का उपयोग करके इन नोड्स के संदर्भ प्राप्त करके प्रारंभ होती है:

कॉन्स्ट शब्द = दस्तावेज़.getElementById("शब्द");
कॉन्स्ट वर्ण = दस्तावेज़.getElementById("अक्षर");
कॉन्स्ट टेक्स्टएरिया = दस्तावेज़.getElementById("मूलपाठ");

ध्यान दें कि शब्द, अक्षर और पाठ दस्तावेज़ में उनके संबंधित तत्वों की आईडी हैं, जिन्हें HTML फ़ाइल में id विशेषता के साथ निर्दिष्ट किया गया है।

इसके बाद, हमें चाहिए कि जब टेक्स्ट बदला जाए तो एप प्रतिक्रिया दे:

टेक्स्टएरिया.addEventListener("इनपुट", समारोह(ईवी) { लोकलस्टोरेज.setItem("मूलपाठ", ev.target.मूल्य); अपडेट_काउंट्स(ev.target.value); });

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

इसके बाद, हम टेक्स्टएरिया की वर्तमान सामग्री को सहेजने के लिए वेब स्टोरेज एपीआई का उपयोग करते हैं, जो ev.target.value से आता है। इस संरचना में, ev एक ऑब्जेक्ट है जो उस इवेंट का प्रतिनिधित्व करता है जिसने श्रोता को ट्रिगर किया, ev.target वह नोड है जिसने इवेंट प्राप्त किया, और ev.target.value उस टेक्स्टएरिया का टेक्स्ट है।

setItem विधि दो पैरामीटर लेती है: डेटा के साथ संबद्ध करने के लिए कुंजी नाम और संग्रहीत करने के लिए वास्तविक डेटा।

इसके बाद, हम उसी टेक्स्ट को पास करते हुए update_counts() को कॉल करते हैं। हम थोड़ी देर में उस विशेषता के बारे में बताएंगे।

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

खिड़की.addEventListener("भार", समारोह(ईवी) {
    वर टेक्स्ट = लोकलस्टोरेज.getItem("मूलपाठ"); textarea.value = पाठ; update_counts(पाठ); });

यह श्रोता विंडो ऑब्जेक्ट पर होने वाली लोड घटना को संभालता है, जो ब्राउज़र विंडो का शीर्ष-स्तरीय प्रतिनिधित्व है। जब विंडो लोड होती है, तो getItem() को कॉल करने पर स्थानीय स्टोरेज से संग्रहीत टेक्स्ट मान वापस आ जाता है। यह कोड फिर लोड किए गए टेक्स्ट में टेक्स्टएरिया का मान सेट करता है और, ऊपर दिए गए श्रोता की तरह, इस टेक्स्ट के साथ update_counts() को कॉल करता है।

शेष कार्य update_counts() फ़ंक्शन में किया जाता है जो इस प्रकार दिखता है:

समारोह अद्यतन_गणना(मूलपाठ) { chars.innerHTML = टेक्स्ट.लंबाई; शब्द.आंतरिकHTML = पाठ.विभाजन(' ')।लंबाई; }

टेक्स्टएरिया के विपरीत, नियमित टेक्स्ट में value गुण नहीं होता है, इसलिए हम इसके स्थान पर innerHTML गुण सेट करते हैं। किसी स्ट्रिंग का लम्बाई गुण एक सरल केवल-पठन योग्य गुण है जो हमें वर्णों की संख्या बताता है।

text.split(' ') स्ट्रिंग को रिक्त स्थान वाले अक्षरों पर विभाजित करता है, तथा परिणाम को स्ट्रिंग की एक सारणी के रूप में लौटाता है। स्ट्रिंग्स की तरह, सरणियों में भी एक लंबाई गुण होता है जो हमें सरणियों में तत्वों की संख्या बताता है।

हालाँकि, यदि आप इस कोड का परीक्षण करेंगे, तो आपको कुछ त्रुटियाँ दिखाई दे सकती हैं:

यह किसी पंक्ति में किसी शब्द की सही गणना नहीं करेगा, क्योंकि उसके चारों ओर कोई रिक्त स्थान नहीं है।
बिना किसी पाठ के, यह केवल एक शब्द की रिपोर्ट करेगा क्योंकि स्प्लिट (विभाजन) किस प्रकार कार्य करता है।

पहली समस्या को हल करने के लिए, आप स्पेस के बजाय नियमित अभिव्यक्ति (\s का अर्थ है "रिक्त वर्ण") पर विभाजन कर सकते हैं। दूसरे को हल करने के लिए, परिणाम से रिक्त स्ट्रिंग्स को फ़िल्टर करें:

    शब्द.आंतरिकHTML = पाठ.विभाजन(/\एस/).फ़िल्टर(समारोह(एन) { वापस करना एन != ''; })।लंबाई;

यदि आप उस पंक्ति को पूरी तरह से नहीं समझते हैं, तो MDN पृष्ठ देखें विभाजित करना और फ़िल्टर.

नमूना पाठ के साथ वेब अनुप्रयोग, सटीक वर्ण और शब्द गणना दर्शाता है।

आप कुछ ही फाइलों से कई उपयोगी वेब अनुप्रयोग बना सकते हैं। आप अधिक कार्यक्षमता जोड़ने के लिए इस सरल नोट्स ऐप का विस्तार भी कर सकते हैं। उदाहरण के लिए, आप इसका उपयोग कर सकते हैं विंडो.लोकेशन प्रॉपर्टी वर्तमान URL को पुनः प्राप्त करने और localStorage.setItem को दिए गए नाम को बदलकर एकाधिक नोट्स का समर्थन करने के लिए। 🗒️🌍