परिचय

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

हम इकोनोमी परियोजना को पूरा करने के लिए 5 प्रयोगशालाओं के माध्यम से काम करेंगे।

ज्ञान बिंदु:

• परिवर्तनीय घोषणाएं (चलो, स्थिरांक)
• DOM हेरफेर की मूल बातें (तत्व प्राप्त करना, तत्व सामग्री को संशोधित करना)
• इवेंट सुनना (addEventListener)

बुनियादी जावास्क्रिप्ट

जावास्क्रिप्ट एक सरल, वस्तु-उन्मुख और घटना-संचालित भाषा है। इसे सर्वर से क्लाइंट पर डाउनलोड किया जाता है और ब्राउज़र द्वारा निष्पादित किया जाता है।

इसका उपयोग HTML और वेब के साथ और अधिक व्यापक रूप से सर्वर, पीसी, लैपटॉप, टैबलेट और स्मार्टफोन पर किया जा सकता है।

इसकी विशेषताओं में शामिल हैं:

• आमतौर पर क्लाइंट-साइड स्क्रिप्ट लिखने के लिए उपयोग किया जाता है।
• मुख्य रूप से HTML पृष्ठों में इंटरैक्टिव व्यवहार जोड़ने के लिए उपयोग किया जाता है।
• यह एक व्याख्या की गई भाषा है, जैसा इसकी व्याख्या की जाती है वैसा ही निष्पादित किया जाता है।

तो, हम HTML में जावास्क्रिप्ट को कैसे शामिल करें?

समावेशन विधि सीएसएस के समान है और इसे तीन तरीकों से किया जा सकता है:

• सीधे HTML टैग में, विशेष रूप से संक्षिप्त जावास्क्रिप्ट कोड के लिए।
• टैग का उपयोग करके, जावास्क्रिप्ट कोड को HTML दस्तावेज़ के और में एम्बेड किया जा सकता है।
• बाहरी JavaScript फ़ाइल का उपयोग करके, .js प्रत्यय वाली फ़ाइल में JavaScript स्क्रिप्ट कोड लिखें और

उदाहरण के लिए, यदि हम F12 दबाते हैं, तो हम देख सकते हैं कि इस पृष्ठ में कई बाहरी जावास्क्रिप्ट फ़ाइलें शामिल हैं, और इवेंट श्रोताओं पर क्लिक करके, हम देख सकते हैं कि इसके भीतर कई प्रकार की घटनाएं हैं पेज.

अब, स्क्रिप्ट.जेएस फ़ाइल को शामिल करने के लिए ~/project/index.html में

अगला, आइए जानें कि जावास्क्रिप्ट में वेरिएबल्स को कैसे परिभाषित किया जाए!

वेरिएबल्स क्या हैं

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

चर घोषित करना

जावास्क्रिप्ट में, आप वेरिएबल घोषित करने के लिए var, Let, या const कीवर्ड का उपयोग कर सकते हैं:

• var: ES6 से पहले, var वेरिएबल घोषित करने का प्राथमिक तरीका था, और इसमें फ़ंक्शन स्कोप है।
• लेट: ईएस6 में प्रस्तुत, लेट आपको ब्लॉक-स्कोप वाले स्थानीय चर घोषित करने की अनुमति देता है।
• const: ES6 में भी पेश किया गया, इसका उपयोग एक स्थिरांक घोषित करने के लिए किया जाता है जिसे एक बार घोषित करने के बाद बदला नहीं जा सकता।

उदाहरण के लिए:

var name = "Alice"; // Using var to declare a variable
let age = 30; // Using let to declare a variable
const city = "London"; // Using const to declare a constant

चर के प्रकार

जावास्क्रिप्ट में, कई अलग-अलग डेटा प्रकार हैं:

• स्ट्रिंग: टेक्स्ट डेटा, जैसे "हैलो, वर्ल्ड!"।
• संख्या: पूर्णांक या फ़्लोटिंग-पॉइंट संख्याएं, जैसे 42 या 3.14।
• बूलियन: सही या गलत।
• ऑब्जेक्ट: कई मानों या जटिल डेटा संरचनाओं को संग्रहीत कर सकता है।
• शून्य और अपरिभाषित: विशेष प्रकार जो क्रमशः "कोई मूल्य नहीं" और "मान परिभाषित नहीं है" का प्रतिनिधित्व करते हैं।

वेरिएबल का उपयोग करना

एक बार वेरिएबल घोषित हो जाने पर, आप उन्हें अपने प्रोग्राम में उपयोग कर सकते हैं:

console.log(name); // Outputs: Alice
console.log("Age: "   age); // Outputs: Age: 30
console.log(city   " is a beautiful city"); // Outputs: London is a beautiful city

कंसोल.लॉग() स्थिर विधि कंसोल पर एक संदेश आउटपुट करती है।

डोम हेरफेर

DOM (Document Object Model) एक क्रॉस-प्लेटफ़ॉर्म, भाषा-स्वतंत्र इंटरफ़ेस है जो HTML और XML दस्तावेज़ों को एक ट्री संरचना के रूप में मानता है , जहां प्रत्येक नोड दस्तावेज़ का एक हिस्सा है, जैसे तत्व, विशेषताएँ और पाठ सामग्री।

DOM तत्वों तक पहुँचना

किसी वेब पेज की सामग्री में हेरफेर करने के लिए, आपको सबसे पहले DOM ट्री में तत्वों तक पहुंचने की आवश्यकता है। आप तत्वों तक पहुंचने के लिए विभिन्न तरीकों का उपयोग कर सकते हैं, जैसे कि उनकी आईडी, वर्ग का नाम, या टैग नाम:

let elementById = document.getElementById("elementId"); // Access element by ID
let elementsByClassName = document.getElementsByClassName("className"); // Access a collection of elements by class name
let elementsByTagName = document.getElementsByTagName("tagName"); // Access a collection of elements by tag name

EconoMe प्रोजेक्ट की ~/project/script.js फ़ाइल में निम्नलिखित कोड जोड़ें:

const form = document.getElementById("record-form");
const recordsList = document.getElementById("records-list");
const totalIncomeEl = document.getElementById("total-income");
const totalExpenseEl = document.getElementById("total-expense");
const balanceEl = document.getElementById("balance");

तत्व सामग्री को संशोधित करना

एक बार जब आपके पास किसी तत्व का संदर्भ हो, तो आप उसकी सामग्री को संशोधित कर सकते हैं। इस उद्देश्य के लिए आमतौर पर आंतरिक HTML और textContent गुणों का उपयोग किया जाता है।

उदाहरण के लिए, id=content के साथ एक div तत्व में

नया HTML सामग्री

डालने के लिए और id=info वाले एक स्पैन तत्व में "Hello" को "नया टेक्स्ट सामग्री" से बदलने के लिए, आप इसका उपयोग करेंगे। निम्नलिखित जावास्क्रिप्ट कोड:

तत्वों को जोड़ना और हटाना

आप जावास्क्रिप्ट का उपयोग करके पृष्ठ पर तत्वों को गतिशील रूप से जोड़ या हटा सकते हैं।

उदाहरण के लिए:

// Create a new element
let newElement = document.createElement("div");
newElement.textContent = "Hello, world!";
document.body.appendChild(newElement); // Add the new element to the document body
document.body.removeChild(newElement); // Remove the element from the document body

• एक HTML दस्तावेज़ में, document.createElement() विधि HTML तत्व बनाती है।
• Document.body.appendChild() विधि तत्व के अंत में नया तत्व जोड़ती है।
• Document.body.removeChild() विधि तत्व से तत्व को हटा देती है।

घटना से निपटना

इवेंट श्रोता आपको उपयोगकर्ता की गतिविधियों पर प्रतिक्रिया देने की अनुमति देते हैं।

addEventListener("event", function () {});

जैसे क्लिक, होवर, या कुंजी दबाना:

elementById.addEventListener("click", function () {
  console.log("Element was clicked!");
});

बुनियादी DOM संचालन सीखने के बाद, आप EconoMe प्रोजेक्ट की ~/project/script.js फ़ाइल में निम्नलिखित कोड जोड़ सकते हैं:

document.addEventListener("DOMContentLoaded", function () {
  const form = document.getElementById("record-form");
  const recordsList = document.getElementById("records-list");
  const totalIncomeEl = document.getElementById("total-income");
  const totalExpenseEl = document.getElementById("total-expense");
  const balanceEl = document.getElementById("balance");
  let draggedIndex = null; // Index of the dragged item
});

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

इस प्रयोगशाला को इस बिंदु पर प्रभाव का पूर्वावलोकन करने की आवश्यकता नहीं है। हम निम्नलिखित चरणों में कोड पूरा करने के बाद इसकी समीक्षा करेंगे।

सारांश

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

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

---

? अभी अभ्यास करें: मूल जावास्क्रिप्ट और DOM

---

और अधिक जानना चाहते हैं?

• ? नवीनतम जावास्क्रिप्ट कौशल वृक्ष सीखें
• ? अधिक जावास्क्रिप्ट ट्यूटोरियल पढ़ें
• ? हमारे डिस्कॉर्ड में शामिल हों या हमें @WeAreLabEx पर ट्वीट करें