Articles
जावास्क्रिप्ट का परिचय
जावास्क्रिप्ट और HTML

जावास्क्रिप्ट और HTML

यह लेख जावास्क्रिप्ट और HTML को समझाता है।

YouTube Video

जावास्क्रिप्ट में window ऑब्जेक्ट

window ऑब्जेक्ट जावास्क्रिप्ट में ब्राउज़र पर्यावरण का ग्लोबल ऑब्जेक्ट है, जो वेब पेज और ब्राउज़र विंडो से संबंधित फ़ंक्शन और जानकारी प्रदान करता है। window चूंकि ब्राउज़र का ग्लोबल स्कोप है, ब्राउज़र में चल रहा सभी जावास्क्रिप्ट कोड window ऑब्जेक्ट का हिस्सा बन जाता है। window ऑब्जेक्ट ब्राउज़र पर्यावरण में जावास्क्रिप्ट चलाने में एक महत्वपूर्ण भूमिका निभाता है और कई API और प्रॉपर्टीज प्रदान करता है।

window ऑब्जेक्ट की मुख्य विशेषताएँ

प्रॉपर्टीज 

 1// Get and display the document's title
 2console.log(window.document.title);
 3
 4// Get and display the current URL
 5console.log(window.location.href);
 6
 7// Go back to the previous page
 8window.history.back();
 9
10// Display the browser's user agent
11console.log(window.navigator.userAgent);
12
13// Display the width and height of the viewport
14console.log(`Width: ${window.innerWidth}, Height: ${window.innerHeight}`);
  • window.document: वर्तमान HTML दस्तावेज़ तक पहुंचता है।
  • window.location: वर्तमान URL और ब्राउज़र नेविगेशन को प्रबंधित करता है।
  • window.history: ब्राउज़र का हिस्ट्री डेटा एक्सेस करता है और आगे और पीछे नेविगेशन की अनुमति देता है।
  • window.navigator: ब्राउज़र और डिवाइस के बारे में जानकारी प्रदान करता है।
  • window.innerWidth / window.innerHeight: व्यूपोर्ट की चौड़ाई और ऊंचाई प्राप्त करता है।

मेथड्स 

 1// Show an alert
 2window.alert('Hello, this is an alert!');
 3
 4// Show a confirmation dialog
 5if (window.confirm('Are you sure you want to proceed?')) {
 6    console.log('User clicked OK');
 7} else {
 8    console.log('User clicked Cancel');
 9}
10
11// Show a prompt dialog
12const userInput = window.prompt('Please enter your name:');
13console.log(`Hello, ${userInput}!`);
14
15// Open a new tab
16window.open('https://www.example.com', '_blank');
17
18// Display a message after 3 seconds
19window.setTimeout(() => {
20    console.log('This message appears after 3 seconds!');
21}, 3000);
22
23// Display a message every second
24const intervalId = window.setInterval(() => {
25    console.log('This message appears every second!');
26}, 1000);
27
28// Clear the interval after 5 seconds
29setTimeout(() => {
30    clearInterval(intervalId);
31    console.log('Interval cleared.');
32}, 5000);
  • window.alert(): एक एलर्ट डायलॉग प्रदर्शित करता है।
  • window.confirm(): एक डायलॉग प्रदर्शित करता है जो उपयोगकर्ता से पुष्टि मांगता है और OK या Cancel का परिणाम लौटाता है।
  • window.prompt(): उपयोगकर्ता से इनपुट के लिए एक डायलॉग प्रदर्शित करता है और दर्ज की गई मान को प्राप्त करता है।
  • window.open(): एक नई विंडो या टैब खोलता है।
  • window.setTimeout() / window.setInterval(): एक टाइमर सेट करता है जो किसी फ़ंक्शन को निर्दिष्ट समय या नियमित अंतराल पर निष्पादित करता है।

इवेंट हैंडलिंग 

 1// Display a message when the page is fully loaded
 2window.onload = () => {
 3    console.log('Page is fully loaded!');
 4};
 5
 6// Display a message when the window is resized
 7window.onresize = () => {
 8    console.log('Window resized! New size:', window.innerWidth, 'x', window.innerHeight);
 9};
10
11// Display a message when the page is being scrolled
12window.onscroll = () => {
13    console.log('Page is being scrolled!');
14};
  • window.onload: एक इवेंट जो तब निष्पादित होता है जब पेज पूरी तरह से लोड हो जाता है।
  • window.onresize: एक इवेंट जो तब निष्पादित होता है जब विंडो का आकार बदलता है।
  • window.onscroll: एक इवेंट जो तब ट्रिगर होता है जब उपयोगकर्ता पेज को स्क्रॉल करता है।

वैश्विक चर के रूप में भूमिका 

1var myVar = 10;
2console.log(window.myVar); // 10
  • window वस्तु वैश्विक चर और फ़ंक्शन को धारण करती है। अन्य शब्दों में, घोषित चर और फ़ंक्शन स्वतः ही window की प्रॉपर्टी बन जाते हैं।

जावास्क्रिप्ट में DOM में हेरफेर

जावास्क्रिप्ट DOM (डॉक्यूमेंट ऑब्जेक्ट मॉडल) में हेरफेर का उपयोग वेब पेज पर तत्वों के साथ डायनामिक रूप से इंटरैक्ट करने के लिए किया जाता है। DOM एक HTML दस्तावेज़ की संरचना को एक पेड़ के रूप में दर्शाता है, जिसे जावास्क्रिप्ट का उपयोग करके संरचना को संशोधित करने और पेज की डिस्प्ले को नियंत्रित करने के लिए बदला जा सकता है।

DOM की मूल बातें

DOM वेबपेज के HTML को ऑब्जेक्ट के रूप में मानता है, जिससे तत्वों और गुणों तक पहुंचने और संशोधित करने की अनुमति मिलती है। HTML दस्तावेज़ तक पहुंचने के लिए document वस्तु का उपयोग करें।

 1<!DOCTYPE html>
 2<html>
 3  <head>
 4    <title>Example of DOM Manipulation</title>
 5  </head>
 6  <body>
 7    <div id="content">Hello, World!</div>
 8    <button id="changeText">Change Text</button>
 9  </body>
10</html>

DOM तत्व प्राप्त करना

जावास्क्रिप्ट में DOM के तत्वों तक पहुंचने के लिए कई तरीके हैं।

  • document.getElementById(): id एट्रिब्यूट द्वारा किसी तत्व को प्राप्त करें
  • document.getElementsByClassName(): वर्ग नाम के आधार पर तत्व प्राप्त करें (HTMLCollection)
  • document.getElementsByTagName(): टैग नाम के आधार पर तत्व प्राप्त करें (HTMLCollection)
  • document.querySelector(): CSS सेलेक्टर का उपयोग करते हुए पहला मिलान करने वाला तत्व प्राप्त करें
  • document.querySelectorAll(): CSS सेलेक्टर का उपयोग करते हुए सभी मिलान करने वाले तत्व प्राप्त करें (NodeList)

उदाहरण: getElementById और querySelector 

1const content = document.getElementById('content');
2console.log(content.textContent); // "Hello, World!"
3
4const button = document.querySelector('#changeText');

DOM में हेरफेर

प्राप्त तत्वों पर विभिन्न ऑपरेशन किए जा सकते हैं।

पाठ बदलना

किसी तत्व के पाठ को बदलने के लिए textContent या innerHTML का उपयोग करें।

  • textContent: किसी तत्व की पाठ सामग्री प्राप्त करें या उसे बदलें। HTML टैग व्याख्या नहीं किए जाते।
  • innerHTML: किसी तत्व की HTML सामग्री प्राप्त करें या उसे बदलें। HTML टैग वाली स्ट्रिंग्स को भी प्रोसेस किया जाता है।
1content.textContent = 'Hello, world!';  // Change the text
2button.innerHTML = '<strong>Click to change</strong>';  // Change including HTML

गुणों को बदलना

setAttribute() और getAttribute() का उपयोग करके तत्व के गुणों को बदलें।

1button.setAttribute('disabled', 'true');  // Disable the button
2const id = content.getAttribute('id');  // Get the "content"

CSS बदलना

CSS शैलियों को बदलने के लिए style प्रॉपर्टी का उपयोग करें।

1content.style.color = 'red';  // Change the text color to red
2content.style.fontSize = '20px';  // Change the font size

कक्षाओं में हेरफेर करना

तत्व से कक्षाओं को जोड़ने या हटाने के लिए classList का उपयोग करें।

  • add(): एक कक्षा जोड़ें
  • remove(): एक कक्षा हटाएं
  • toggle(): कक्षा की उपस्थिति के आधार पर जोड़ें या हटाएं
  • contains(): जांचें कि क्या कोई कक्षा मौजूद है
1content.classList.add('highlight');  // Add a class
2button.classList.toggle('active');   // Toggle a class

DOM तत्वों को बनाना और हटाना

नए तत्व बनाना

एक नया तत्व बनाने और उसे DOM में जोड़ने के लिए document.createElement() का उपयोग करें।

1const newDiv = document.createElement('div');  // Create a new div element
2newDiv.textContent = 'This is a new element';
3document.body.appendChild(newDiv);  // Append to the body element

तत्वों को हटाना

एक तत्व को हटाने के लिए remove() विधि का उपयोग करें।

1newDiv.remove();  // Remove the created element

घटनाएं जोड़ना

DOM हेरफेर के भाग के रूप में, आप उपयोगकर्ता क्रियाओं का जवाब देने वाले घटना हैंडलर जोड़ सकते हैं। क्लिक और कीबोर्ड इंटरैक्शन जैसी घटनाओं को संभालने के लिए addEventListener() का उपयोग करें।

1button.addEventListener('click', () => {
2    content.textContent = 'The text has been changed';
3});

इस उदाहरण में, बटन पर क्लिक करने से #content तत्व का पाठ बदल जाता है।

DOM वृक्ष में नेविगेट करना

आप माता-पिता और सहोदर तत्वों तक पहुंचने के लिए DOM में नेविगेट कर सकते हैं।

  • parentNode: अभिभावक नोड तक पहुंचें
  • childNodes: बाल नोड तक पहुंचें (सभी प्रकार के)
  • firstChild / lastChild: पहला/अंतिम बाल तत्व
  • nextSibling / previousSibling: अगला सहोदर/पिछला सहोदर तत्व
1const parent = content.parentNode;  // Get the parent element
2const firstChild = parent.firstChild;  // Get the first child element
3console.log(firstChild);

उदाहरण: एक सूची में एक नया आइटम जोड़ना

यहां सूची में एक नया आइटम जोड़ने का एक उदाहरण दिया गया है।

 1<ul id="list">
 2  <li>Item 1</li>
 3  <li>Item 2</li>
 4</ul>
 5<button id="addItem">Add Item</button>
 6
 7<script>
 8    const list = document.getElementById('list');
 9    const addItemButton = document.getElementById('addItem');
10
11    addItemButton.addEventListener('click', () => {
12        const newItem = document.createElement('li');
13        newItem.textContent = 'New Item';
14        list.appendChild(newItem);
15    });
16</script>

इस कोड में, "आइटम जोड़ें" बटन पर क्लिक करने से सूची में एक नया <li> तत्व जुड़ जाता है।

सारांश

  • JavaScript DOM में हेरफेर आपको एक HTML दस्तावेज़ के भीतर तत्वों को प्राप्त करने, बदलने, बनाने और हटाने की अनुमति देता है।
  • आप getElementById() और querySelector() जैसे तरीकों का उपयोग करके तत्व प्राप्त कर सकते हैं।
  • पाठ और HTML बदलने के लिए textContent या innerHTML का उपयोग करें, और विशेषताओं को बदलने के लिए setAttribute() का उपयोग करें।
  • नए तत्व बनाने के लिए createElement() का उपयोग करें और उन्हें हटाने के लिए remove() का उपयोग करें।
  • आप ईवेंट हैंडलिंग के माध्यम से उपयोगकर्ता कार्यों का उत्तर देने वाले इंटरएक्टिव वेब पेज बना सकते हैं।

आप हमारे YouTube चैनल पर Visual Studio Code का उपयोग करके ऊपर दिए गए लेख के साथ आगे बढ़ सकते हैं। कृपया YouTube चैनल को भी देखें।

YouTube Video

जावास्क्रिप्ट में जनरेटर फंक्शन्स