DOM और Web Browser Environment क्या है? (DOM and Web Browser Environments in Hindi)
DOM और Web Browser Environment क्या है? (DOM and Web Browser Environments in Hindi)
परिचय
JavaScript का उपयोग मुख्य रूप से वेब ब्राउज़र में किया जाता है, जहां यह वेब पेज को डायनामिक और इंटरएक्टिव बनाने में मदद करता है। JavaScript के दो महत्वपूर्ण घटक होते हैं: DOM (Document Object Model) और Web Browser Environment। DOM वेब पेज की संरचना को नियंत्रित करता है, जबकि ब्राउज़र एनवायरनमेंट JavaScript कोड के निष्पादन के लिए आवश्यक सुविधाएँ प्रदान करता है।
1. DOM (Document Object Model) क्या है?
DOM एक प्रोग्रामिंग इंटरफेस (API) है, जो HTML और XML डॉक्यूमेंट को ट्री-स्ट्रक्चर में प्रस्तुत करता है। DOM के माध्यम से हम वेब पेज के HTML एलिमेंट्स को एक्सेस, एडिट, हटाने (delete) और जोड़ने (add) का काम कर सकते हैं।
DOM Tree का स्ट्रक्चर
DOM एक ट्री (Tree) स्ट्रक्चर में HTML डॉक्यूमेंट को प्रस्तुत करता है। उदाहरण के लिए:
├──
│ ├──
│ ├── <meta>
├── <body>
├── <h1>
├── <p>
├── <div>
</code>
</pre>
<h3>DOM के तीन मुख्य घटक</h3>
<ul>
<li><b>Elements:</b> HTML टैग्स जैसे <code><h1></code>, <code><p></code>, <code><div></code>।</li>
<li><b>Attributes:</b> HTML टैग्स के गुण जैसे <code>id</code>, <code>class</code>, <code>src</code>।</li>
<li><b>Text:</b> HTML टैग्स के अंदर लिखी गई सामग्री।</li>
</ul>
<h2>2. DOM के माध्यम से HTML को कैसे एक्सेस करें?</h2>
<p>JavaScript हमें DOM को एक्सेस करने के लिए कई विधियाँ प्रदान करता है।</p>
<h3>2.1. getElementById()</h3>
<p>किसी <code>id</code> वाले एलिमेंट को एक्सेस करने के लिए।</p>
<pre>
<code>
let heading = document.getElementById("main-heading");
console.log(heading.innerHTML);
</code>
</pre>
<h3>2.2. getElementsByClassName()</h3>
<p>एक ही <code>class</code> वाले सभी एलिमेंट्स को एक्सेस करने के लिए।</p>
<pre>
<code>
let elements = document.getElementsByClassName("paragraph");
console.log(elements[0].innerHTML);
</code>
</pre>
<h3>2.3. querySelector()</h3>
<p>CSS सेलेक्टर की तरह किसी भी एलिमेंट को एक्सेस करने के लिए।</p>
<pre>
<code>
let para = document.querySelector(".paragraph");
console.log(para.innerHTML);
</code>
</pre>
<h2>3. DOM के माध्यम से HTML को कैसे अपडेट करें?</h2>
<p>JavaScript का उपयोग करके DOM के एलिमेंट्स को बदला जा सकता है।</p>
<h3>3.1. innerHTML के माध्यम से</h3>
<pre>
<code>
document.getElementById("main-heading").innerHTML = "नया टेक्स्ट!";
</code>
</pre>
<h3>3.2. style प्रॉपर्टी के माध्यम से</h3>
<pre>
<code>
document.getElementById("main-heading").style.color = "red";
</code>
</pre>
<h2>4. Web Browser Environment क्या है?</h2>
<p>Web Browser Environment वह वातावरण (environment) होता है, जिसमें JavaScript कोड वेब ब्राउज़र पर चलता है। इसमें निम्नलिखित मुख्य घटक होते हैं:</p>
<h3>4.1. Window Object</h3>
<p>JavaScript में <b>window</b> सबसे शीर्ष (top-level) ऑब्जेक्ट होता है, जिसमें ब्राउज़र से संबंधित सभी जानकारी होती है।</p>
<h4>Example: Window Object</h4>
<pre>
<code>
console.log(window.innerHeight); // ब्राउज़र विंडो की ऊँचाई
console.log(window.innerWidth); // ब्राउज़र विंडो की चौड़ाई
</code>
</pre>
<h3>4.2. Document Object</h3>
<p><b>document</b> ऑब्जेक्ट HTML डॉक्यूमेंट को एक्सेस करने के लिए उपयोग किया जाता है।</p>
<h4>Example: Document Object</h4>
<pre>
<code>
console.log(document.title); // वेब पेज का टाइटल
console.log(document.URL); // वेब पेज का URL
</code>
</pre>
<h3>4.3. Navigator Object</h3>
<p><b>navigator</b> ऑब्जेक्ट ब्राउज़र की जानकारी प्रदान करता है।</p>
<h4>Example: Navigator Object</h4>
<pre>
<code>
console.log(navigator.userAgent); // ब्राउज़र का नाम और वर्शन
console.log(navigator.language); // ब्राउज़र की भाषा
</code>
</pre>
<h3>4.4. Location Object</h3>
<p><b>location</b> ऑब्जेक्ट वर्तमान वेब पेज का URL दिखाता है और पेज को रीडायरेक्ट भी कर सकता है।</p>
<h4>Example: Location Object</h4>
<pre>
<code>
console.log(location.href); // वर्तमान पेज का URL
// location.href = "https://www.google.com"; // गूगल पर रीडायरेक्ट
</code>
</pre>
<h3>4.5. History Object</h3>
<p><b>history</b> ऑब्जेक्ट ब्राउज़र के बैक और फॉरवर्ड नेविगेशन को नियंत्रित करता है।</p>
<h4>Example: History Object</h4>
<pre>
<code>
// पिछला पेज खोलने के लिए
history.back();
// अगला पेज खोलने के लिए
history.forward();
</code>
</pre>
<h2>5. Events और Event Handling</h2>
<p>JavaScript में <b>इवेंट्स</b> का उपयोग उपयोगकर्ता की गतिविधियों (जैसे <b>क्लिक, कीबोर्ड प्रेस, माउस मूवमेंट</b>) को नियंत्रित करने के लिए किया जाता है।</p>
<h3>Example: Event Handling</h3>
<pre>
<code>
document.getElementById("btn").addEventListener("click", function() {
alert("बटन क्लिक किया गया!");
});
</code>
</pre>
<h2>6. Web Storage API</h2>
<p>Web Browser Environment में <b>Local Storage</b> और <b>Session Storage</b> जैसी विशेषताएँ होती हैं, जो ब्राउज़र में डेटा को स्टोर करने की अनुमति देती हैं।</p>
<h3>Example: Local Storage</h3>
<pre>
<code>
localStorage.setItem("username", "Rahul");
console.log(localStorage.getItem("username"));
</code>
</pre>
<h2>निष्कर्ष</h2>
<p><b>DOM</b> और <b>Web Browser Environment</b> वेब डेवलपमेंट में एक महत्वपूर्ण भूमिका निभाते हैं। DOM हमें HTML डॉक्यूमेंट को एक्सेस और संशोधित करने की सुविधा देता है, जबकि ब्राउज़र एनवायरमेंट हमें विभिन्न ब्राउज़र सुविधाओं तक पहुंच प्रदान करता है। JavaScript के साथ इन दोनों अवधारणाओं को समझना आवश्यक है, क्योंकि ये वेब डेवलपमेंट के लिए आवश्यक हैं।</p> </div>
</div>
<!-- Tab 2 -->
<div id="tab2" class="tab-content hidden">
<div class="bg-white p-6 rounded-lg shadow">
<br>
</div>
</div>
</div>
</div>
</section>
</div>
</div>
<div class="col-span-1">
<h2 class="text-3xl md:text-4xl font-bold text-gray-800 mb-6">Related Post</h2>
<div style="height: 2500px; overflow: scroll;">
<ul class="space-y-4">
<li>
<a class=" text-capitalize block text-left w-full px-4 py-2 rounded-lg bg-gray-100 text-gray-800 hover:bg-blue-600 hover:text-white transition duration-300" title="WWW क्या है? - Concept of WWW in Hindi" href="https://myprojecthd.in/index.php/blog/concept-of-www-in-hindi">WWW क्या है? - Concept of WWW in Hindi</a>
</li>
<li>
<a class=" text-capitalize block text-left w-full px-4 py-2 rounded-lg bg-gray-100 text-gray-800 hover:bg-blue-600 hover:text-white transition duration-300" title="Internet और WWW के बीच अंतर (Difference Between Internet and WWW in Hindi)" href="https://myprojecthd.in/index.php/blog/difference-between-internet-and-www">Internet और WWW के बीच अंतर (Difference Between Internet and WWW in Hindi)</a>
</li>
<li>
<a class=" text-capitalize block text-left w-full px-4 py-2 rounded-lg bg-gray-100 text-gray-800 hover:bg-blue-600 hover:text-white transition duration-300" title="HTTP Protocol Request और Response (HTTP Request and Response in Hindi)" href="https://myprojecthd.in/index.php/blog/http-protocol-request-and-response">HTTP Protocol Request और Response (HTTP Request and Response in Hindi)</a>
</li>
<li>
<a class=" text-capitalize block text-left w-full px-4 py-2 rounded-lg bg-gray-100 text-gray-800 hover:bg-blue-600 hover:text-white transition duration-300" title="वेब ब्राउज़र और वेब सर्वर क्या है? (What is Web Browser and Web Server in Hindi)" href="https://myprojecthd.in/index.php/blog/what-is-web-browser-and-web-server">वेब ब्राउज़र और वेब सर्वर क्या है? (What is Web Browser and Web Server in Hindi)</a>
</li>
<li>
<a class=" text-capitalize block text-left w-full px-4 py-2 rounded-lg bg-gray-100 text-gray-800 hover:bg-blue-600 hover:text-white transition duration-300" title="Web 2.0 Web Design के फीचर्स (Features of Web 2.0 Web Design in Hindi)" href="https://myprojecthd.in/index.php/blog/features-of-web-2-0-web-design">Web 2.0 Web Design के फीचर्स (Features of Web 2.0 Web Design in Hindi)</a>
</li>
<li>
<a class=" text-capitalize block text-left w-full px-4 py-2 rounded-lg bg-gray-100 text-gray-800 hover:bg-blue-600 hover:text-white transition duration-300" title="Web Design Issues (ब्राउज़र सहित वेब डिज़ाइन समस्याएँ) in Hindi" href="https://myprojecthd.in/index.php/blog/web-design-issues-including-browser">Web Design Issues (ब्राउज़र सहित वेब डिज़ाइन समस्याएँ) in Hindi</a>
</li>
<li>
<a class=" text-capitalize block text-left w-full px-4 py-2 rounded-lg bg-gray-100 text-gray-800 hover:bg-blue-600 hover:text-white transition duration-300" title="Bandwidth और Cache क्या है? (Bandwidth and Cache in Web Technology in Hindi)" href="https://myprojecthd.in/index.php/blog/bandwidth-and-cache-in-web-technology">Bandwidth और Cache क्या है? (Bandwidth and Cache in Web Technology in Hindi)</a>
</li>
<li>
<a class=" text-capitalize block text-left w-full px-4 py-2 rounded-lg bg-gray-100 text-gray-800 hover:bg-blue-600 hover:text-white transition duration-300" title="वेबसाइट का लुक और फील (Look and Feel of the Website in Web Technology in Hindi)" href="https://myprojecthd.in/index.php/blog/look-and-feel-of-the-website">वेबसाइट का लुक और फील (Look and Feel of the Website in Web Technology in Hindi)</a>
</li>
<li>
<a class=" text-capitalize block text-left w-full px-4 py-2 rounded-lg bg-gray-100 text-gray-800 hover:bg-blue-600 hover:text-white transition duration-300" title="Page Layout और Linking क्या है? (Page Layout and Linking in Web Technology in Hindi)" href="https://myprojecthd.in/index.php/blog/page-layout-and-linking">Page Layout और Linking क्या है? (Page Layout and Linking in Web Technology in Hindi)</a>
</li>
<li>
<a class=" text-capitalize block text-left w-full px-4 py-2 rounded-lg bg-gray-100 text-gray-800 hover:bg-blue-600 hover:text-white transition duration-300" title="User Centric Design क्या है? (User Centric Design in IWT in Hindi)" href="https://myprojecthd.in/index.php/blog/user-centric-design-in-iwt">User Centric Design क्या है? (User Centric Design in IWT in Hindi)</a>
</li>
<li>
<a class=" text-capitalize block text-left w-full px-4 py-2 rounded-lg bg-gray-100 text-gray-800 hover:bg-blue-600 hover:text-white transition duration-300" title="साइट मैप क्या है? (What is Sitemap in Hindi)" href="https://myprojecthd.in/index.php/blog/what-is-sitemap">साइट मैप क्या है? (What is Sitemap in Hindi)</a>
</li>
<li>
<a class=" text-capitalize block text-left w-full px-4 py-2 rounded-lg bg-gray-100 text-gray-800 hover:bg-blue-600 hover:text-white transition duration-300" title="वेबसाइट की प्लानिंग और पब्लिशिंग (Planning and Publishing Website in Web Technology in Hindi)" href="https://myprojecthd.in/index.php/blog/planning-and-publishing-website">वेबसाइट की प्लानिंग और पब्लिशिंग (Planning and Publishing Website in Web Technology in Hindi)</a>
</li>
<li>
<a class=" text-capitalize block text-left w-full px-4 py-2 rounded-lg bg-gray-100 text-gray-800 hover:bg-blue-600 hover:text-white transition duration-300" title="प्रभावी नेविगेशन डिज़ाइन कैसे करें? (Designing Effective Navigation in Web Technology in Hindi)" href="https://myprojecthd.in/index.php/blog/designing-effective-navigation">प्रभावी नेविगेशन डिज़ाइन कैसे करें? (Designing Effective Navigation in Web Technology in Hindi)</a>
</li>
<li>
<a class=" text-capitalize block text-left w-full px-4 py-2 rounded-lg bg-gray-100 text-gray-800 hover:bg-blue-600 hover:text-white transition duration-300" title="HTML क्या है? (What is HTML in Hindi)" href="https://myprojecthd.in/index.php/blog/what-is-html-in-hindi">HTML क्या है? (What is HTML in Hindi)</a>
</li>
<li>
<a class=" text-capitalize block text-left w-full px-4 py-2 rounded-lg bg-gray-100 text-gray-800 hover:bg-blue-600 hover:text-white transition duration-300" title="HTML में Formatting और Fonts (Formatting and Fonts in HTML in Hindi)" href="https://myprojecthd.in/index.php/blog/formatting-and-fonts-in-html">HTML में Formatting और Fonts (Formatting and Fonts in HTML in Hindi)</a>
</li>
<li>
<a class=" text-capitalize block text-left w-full px-4 py-2 rounded-lg bg-gray-100 text-gray-800 hover:bg-blue-600 hover:text-white transition duration-300" title="HTML में Commenting Code (Commenting Code in HTML in Hindi)" href="https://myprojecthd.in/index.php/blog/commenting-code-in-html">HTML में Commenting Code (Commenting Code in HTML in Hindi)</a>
</li>
<li>
<a class=" text-capitalize block text-left w-full px-4 py-2 rounded-lg bg-gray-100 text-gray-800 hover:bg-blue-600 hover:text-white transition duration-300" title="HTML Tags: Color, Hyperlink, Lists, Tables, Images, और Forms (HTML Tags in Hindi)" href="https://myprojecthd.in/index.php/blog/html-tags-color-hyperlink-lists-tables-images-forms">HTML Tags: Color, Hyperlink, Lists, Tables, Images, और Forms (HTML Tags in Hindi)</a>
</li>
<li>
<a class=" text-capitalize block text-left w-full px-4 py-2 rounded-lg bg-gray-100 text-gray-800 hover:bg-blue-600 hover:text-white transition duration-300" title="XHTML क्या है? (What is XHTML in Hindi)" href="https://myprojecthd.in/index.php/blog/what-is-xhtml-in-hindi">XHTML क्या है? (What is XHTML in Hindi)</a>
</li>
<li>
<a class=" text-capitalize block text-left w-full px-4 py-2 rounded-lg bg-gray-100 text-gray-800 hover:bg-blue-600 hover:text-white transition duration-300" title="HTML में Meta Tags क्या हैं? (Meta Tags in HTML in Hindi)" href="https://myprojecthd.in/index.php/blog/meta-tags-in-html-in-hindi">HTML में Meta Tags क्या हैं? (Meta Tags in HTML in Hindi)</a>
</li>
<li>
<a class=" text-capitalize block text-left w-full px-4 py-2 rounded-lg bg-gray-100 text-gray-800 hover:bg-blue-600 hover:text-white transition duration-300" title="HTML में Frames और Frameset क्या हैं? (Frames and Framesets in HTML in Hindi)" href="https://myprojecthd.in/index.php/blog/frames-and-framesets-in-html-in-hindi">HTML में Frames और Frameset क्या हैं? (Frames and Framesets in HTML in Hindi)</a>
</li>
<li>
<a class=" text-capitalize block text-left w-full px-4 py-2 rounded-lg bg-gray-100 text-gray-800 hover:bg-blue-600 hover:text-white transition duration-300" title="Browser Architecture और Website Structure क्या है? (Browser Architecture and Website Structure in Hindi)" href="https://myprojecthd.in/index.php/blog/browser-architecture-and-website-structure-in-hindi">Browser Architecture और Website Structure क्या है? (Browser Architecture and Website Structure in Hindi)</a>
</li>
<li>
<a class=" text-capitalize block text-left w-full px-4 py-2 rounded-lg bg-gray-100 text-gray-800 hover:bg-blue-600 hover:text-white transition duration-300" title="HTML5 का अवलोकन और विशेषताएँ (Overview and Features of HTML5 in Hindi)" href="https://myprojecthd.in/index.php/blog/overview-and-features-of-html5-in-hindi">HTML5 का अवलोकन और विशेषताएँ (Overview and Features of HTML5 in Hindi)</a>
</li>
<li>
<a class=" text-capitalize block text-left w-full px-4 py-2 rounded-lg bg-gray-100 text-gray-800 hover:bg-blue-600 hover:text-white transition duration-300" title="CSS क्या है? (What is CSS in Hindi)" href="https://myprojecthd.in/index.php/blog/what-is-css-in-hindi">CSS क्या है? (What is CSS in Hindi)</a>
</li>
<li>
<a class=" text-capitalize block text-left w-full px-4 py-2 rounded-lg bg-gray-100 text-gray-800 hover:bg-blue-600 hover:text-white transition duration-300" title="CSS में Style Properties (Background, Colors, Text, Fonts, Borders, Box Model, Positioning) in Hindi" href="https://myprojecthd.in/index.php/blog/style-properties-in-css-in-hindi">CSS में Style Properties (Background, Colors, Text, Fonts, Borders, Box Model, Positioning) in Hindi</a>
</li>
<li>
<a class=" text-capitalize block text-left w-full px-4 py-2 rounded-lg bg-gray-100 text-gray-800 hover:bg-blue-600 hover:text-white transition duration-300" title="CSS3 का अवलोकन और विशेषताएँ (Overview and Features of CSS3 in Hindi)" href="https://myprojecthd.in/index.php/blog/overview-and-features-of-css3-in-hindi">CSS3 का अवलोकन और विशेषताएँ (Overview and Features of CSS3 in Hindi)</a>
</li>
<li>
<a class=" text-capitalize block text-left w-full px-4 py-2 rounded-lg bg-gray-100 text-gray-800 hover:bg-blue-600 hover:text-white transition duration-300" title="Client Side Scripting with JavaScript in Hindi - क्लाइंट साइड स्क्रिप्टिंग क्या है?" href="https://myprojecthd.in/index.php/blog/client-side-scripting-with-javascript-in-hindi">Client Side Scripting with JavaScript in Hindi - क्लाइंट साइड स्क्रिप्टिंग क्या है?</a>
</li>
<li>
<a class=" text-capitalize block text-left w-full px-4 py-2 rounded-lg bg-gray-100 text-gray-800 hover:bg-blue-600 hover:text-white transition duration-300" title="JavaScript में Variables, Functions, Conditions, Loops और Repetition (JavaScript Basics in Hindi)" href="https://myprojecthd.in/index.php/blog/javascript-variables-functions-conditions-loops-repetition-in-hindi">JavaScript में Variables, Functions, Conditions, Loops और Repetition (JavaScript Basics in Hindi)</a>
</li>
<li>
<a class=" text-capitalize block text-left w-full px-4 py-2 rounded-lg bg-gray-100 text-gray-800 hover:bg-blue-600 hover:text-white transition duration-300" title="JavaScript में Objects क्या हैं? (JavaScript and Objects in Hindi)" href="https://myprojecthd.in/index.php/blog/javascript-and-objects-in-hindi">JavaScript में Objects क्या हैं? (JavaScript and Objects in Hindi)</a>
</li>
<li>
<a class=" text-capitalize block text-left w-full px-4 py-2 rounded-lg bg-gray-100 text-gray-800 hover:bg-blue-600 hover:text-white transition duration-300" title="JavaScript में अपने खुद के Objects कैसे बनाएं? (Creating Own Objects in JavaScript in Hindi)" href="https://myprojecthd.in/index.php/blog/creating-own-objects-in-javascript-in-hindi">JavaScript में अपने खुद के Objects कैसे बनाएं? (Creating Own Objects in JavaScript in Hindi)</a>
</li>
<li>
<a class=" active text-capitalize block text-left w-full px-4 py-2 rounded-lg bg-gray-100 text-gray-800 hover:bg-blue-600 hover:text-white transition duration-300" title="DOM और Web Browser Environment क्या है? (DOM and Web Browser Environments in Hindi)" href="https://myprojecthd.in/index.php/blog/dom-and-web-browser-environments-in-hindi">DOM और Web Browser Environment क्या है? (DOM and Web Browser Environments in Hindi)</a>
</li>
<li>
<a class=" text-capitalize block text-left w-full px-4 py-2 rounded-lg bg-gray-100 text-gray-800 hover:bg-blue-600 hover:text-white transition duration-300" title="JavaScript में DOM Manipulation क्या है? (Manipulation using DOM in JavaScript in Hindi)" href="https://myprojecthd.in/index.php/blog/manipulation-using-dom-in-javascript-in-hindi">JavaScript में DOM Manipulation क्या है? (Manipulation using DOM in JavaScript in Hindi)</a>
</li>
<li>
<a class=" text-capitalize block text-left w-full px-4 py-2 rounded-lg bg-gray-100 text-gray-800 hover:bg-blue-600 hover:text-white transition duration-300" title="DHTML क्या है? HTML, CSS और JavaScript का संयोजन (DHTML: Combining HTML, CSS and JavaScript in Hindi)" href="https://myprojecthd.in/index.php/blog/dhtml-combining-html-css-and-javascript-in-hindi">DHTML क्या है? HTML, CSS और JavaScript का संयोजन (DHTML: Combining HTML, CSS and JavaScript in Hindi)</a>
</li>
<li>
<a class=" text-capitalize block text-left w-full px-4 py-2 rounded-lg bg-gray-100 text-gray-800 hover:bg-blue-600 hover:text-white transition duration-300" title="DHTML में Events और Buttons क्या हैं? (Events and Buttons in DHTML in Hindi)" href="https://myprojecthd.in/index.php/blog/events-and-buttons-in-dhtml-in-hindi">DHTML में Events और Buttons क्या हैं? (Events and Buttons in DHTML in Hindi)</a>
</li>
<li>
<a class=" text-capitalize block text-left w-full px-4 py-2 rounded-lg bg-gray-100 text-gray-800 hover:bg-blue-600 hover:text-white transition duration-300" title="वेब टेक्नोलॉजी में XML का परिचय (Introduction to XML in Web Technology in Hindi)" href="https://myprojecthd.in/index.php/blog/introduction-to-xml-in-web-technology-in-hindi">वेब टेक्नोलॉजी में XML का परिचय (Introduction to XML in Web Technology in Hindi)</a>
</li>
<li>
<a class=" text-capitalize block text-left w-full px-4 py-2 rounded-lg bg-gray-100 text-gray-800 hover:bg-blue-600 hover:text-white transition duration-300" title="वेब टेक्नोलॉजी में XML के उपयोग (Uses of XML in Web Technology in Hindi)" href="https://myprojecthd.in/index.php/blog/uses-of-xml-in-web-technology-in-hindi">वेब टेक्नोलॉजी में XML के उपयोग (Uses of XML in Web Technology in Hindi)</a>
</li>
<li>
<a class=" text-capitalize block text-left w-full px-4 py-2 rounded-lg bg-gray-100 text-gray-800 hover:bg-blue-600 hover:text-white transition duration-300" title="XML के प्रमुख घटक (XML Key Components in Web Technology in Hindi)" href="https://myprojecthd.in/index.php/blog/xml-key-components-in-web-technology-in-hindi">XML के प्रमुख घटक (XML Key Components in Web Technology in Hindi)</a>
</li>
<li>
<a class=" text-capitalize block text-left w-full px-4 py-2 rounded-lg bg-gray-100 text-gray-800 hover:bg-blue-600 hover:text-white transition duration-300" title="PHP का परिचय और बुनियादी सिंटैक्स (Introduction and Basic Syntax of PHP in Hindi)" href="https://myprojecthd.in/index.php/blog/introduction-and-basic-syntax-of-php-in-hindi">PHP का परिचय और बुनियादी सिंटैक्स (Introduction and Basic Syntax of PHP in Hindi)</a>
</li>
<li>
<a class=" text-capitalize block text-left w-full px-4 py-2 rounded-lg bg-gray-100 text-gray-800 hover:bg-blue-600 hover:text-white transition duration-300" title="PHP में ऑब्जेक्ट ओरिएंटेड प्रोग्रामिंग (OOP) का परिचय (Object Oriented Programming with PHP in Hindi)" href="https://myprojecthd.in/index.php/blog/object-oriented-programming-with-php-in-hindi">PHP में ऑब्जेक्ट ओरिएंटेड प्रोग्रामिंग (OOP) का परिचय (Object Oriented Programming with PHP in Hindi)</a>
</li>
<li>
<a class=" text-capitalize block text-left w-full px-4 py-2 rounded-lg bg-gray-100 text-gray-800 hover:bg-blue-600 hover:text-white transition duration-300" title="PHP में Cookies और Session का उपयोग (Cookies and Session in PHP in Hindi)" href="https://myprojecthd.in/index.php/blog/cookies-and-session-in-php-in-hindi">PHP में Cookies और Session का उपयोग (Cookies and Session in PHP in Hindi)</a>
</li>
</ul>
</div>
</div>
</div>
<!-- Comment List -->
<!-- <div class="space-y-4">
<h3 class="text-xl font-semibold text-gray-800 mb-2">Comments</h3>
<div class="bg-gray-100 rounded-md p-4">
<p class="text-sm text-gray-600 font-semibold">CharlesJatte</p>
<p class="text-gray-800">4x4 rental tbilisi <a href=https://drivelity.com/car-rental-tbilisi-georgia>https://drivelity.com/car-rental-tbilisi-georgia</a></p>
</div>
<div class="bg-gray-100 rounded-md p-4">
<p class="text-sm text-gray-600 font-semibold">CharlesJatte</p>
<p class="text-gray-800"><a href=https://drivelity.com/car-rental-yerevan-armenia>luxury car rental yerevan</a></p>
</div>
<div class="bg-gray-100 rounded-md p-4">
<p class="text-sm text-gray-600 font-semibold">Randyfeews</p>
<p class="text-gray-800"><a href=https://drivelity-greece.com/rent-car-kalamata-greece>car rental kalamata airport</a></p>
</div>
<div class="bg-gray-100 rounded-md p-4">
<p class="text-sm text-gray-600 font-semibold">Randyfeews</p>
<p class="text-gray-800"><a href=https://drivelity-greece.com/car-rental-heraklion-crete>car rental heraklion no credit card</a></p>
</div>
</div>
</div> -->
<!-- <div class="mt-10 max-w-3xl mx-auto bg-white shadow-md rounded-lg p-6">
<h2 class="text-2xl font-semibold text-gray-800 mb-4">Comments</h2>
<form action="https://myprojecthd.in/index.php/comment" method="POST" class="space-y-4 database_operations">
<div>
<label for="name" class="block text-sm font-medium text-gray-700">Name</label>
<input type="hidden" name="_token" value="ZNjVeKpzEjIDNNmNc6s9qg8cYlRufbi90kdaJ2ws">
<input type="hidden" name="blog_id" value="1647" >
<input type="text" id="name" name="name" required
class="mt-1 block w-full px-4 py-2 border border-gray-300 rounded-md focus:ring-purple-500 focus:border-purple-500">
</div>
<div>
<label for="email" class="block text-sm font-medium text-gray-700">Email</label>
<input type="email" id="email" name="email" required
class="mt-1 block w-full px-4 py-2 border border-gray-300 rounded-md focus:ring-purple-500 focus:border-purple-500">
</div>
<div>
<label for="comment" class="block text-sm font-medium text-gray-700">Comment</label>
<textarea id="comment" name="comment" rows="4" required
class="mt-1 block w-full px-4 py-2 border border-gray-300 rounded-md focus:ring-purple-500 focus:border-purple-500"></textarea>
</div>
<div>
<button type="submit"
class="px-6 py-2 bg-gradient-to-r from-purple-500 via-pink-500 to-red-500 text-white rounded-md font-semibold hover:opacity-90">
Submit
</button>
</div>
</form>
</div> -->
</div>
<div class="max-w-7xl mx-auto mb-4 mt-4">
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-7413641233735665"
crossorigin="anonymous"></script>
<ins class="adsbygoogle"
style="display:block; text-align:center;"
data-ad-layout="in-article"
data-ad-format="fluid"
data-ad-client="ca-pub-7413641233735665"
data-ad-slot="1208383348"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
</div>
</main>
<script>
// Tab functionality
const tabs = document.querySelectorAll('.tab-btn');
const contents = document.querySelectorAll('.tab-content');
tabs.forEach((tab) => {
tab.addEventListener('click', () => {
// Remove active class
tabs.forEach(t => t.classList.remove('text-pink-500', 'border-pink-500', 'active'));
contents.forEach(c => c.classList.add('hidden'));
// Add active class to clicked tab
tab.classList.add('text-pink-500', 'border-pink-500', 'active');
const target = document.getElementById(tab.dataset.tab);
target.classList.remove('hidden');
});
});
</script>
<!-- Enhanced Modern Footer -->
<footer class="bg-gradient-to-br from-gray-900 via-gray-800 to-gray-900 text-white relative overflow-hidden">
<!-- Decorative Background Elements -->
<div class="absolute inset-0 opacity-5">
<div class="absolute top-0 left-0 w-96 h-96 bg-purple-500 rounded-full blur-3xl"></div>
<div class="absolute bottom-0 right-0 w-96 h-96 bg-pink-500 rounded-full blur-3xl"></div>
</div>
<div class="max-w-7xl mx-auto px-6 py-16 relative z-10">
<!-- Main Footer Content -->
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-12 mb-12">
<!-- Brand Section -->
<div class="space-y-4">
<div class="flex items-center space-x-2 mb-4">
<div class="w-10 h-10 bg-gradient-to-r from-purple-600 to-pink-600 rounded-lg flex items-center justify-center">
<span class="text-2xl font-bold">M</span>
</div>
<h3 class="text-2xl font-bold bg-gradient-to-r from-purple-400 via-pink-400 to-red-400 bg-clip-text text-transparent">My Project HD</h3>
</div>
<p class="text-gray-400 leading-relaxed">Empowering students with free projects, tutorials, and resources for computer science education in Hindi.</p>
<div class="flex space-x-3 pt-4">
<a href="https://www.instagram.com/myprojecthd.in/" target="_blank" rel="noopener noreferrer" aria-label="Follow us on Instagram" class="w-10 h-10 bg-gradient-to-r from-pink-600 to-purple-600 rounded-lg flex items-center justify-center transform hover:scale-110 hover:rotate-6 transition-all duration-300 shadow-lg hover:shadow-pink-500/50">
<img src="https://myprojecthd.in/index.php/public/social-icon/instagram.png" alt="Instagram" class="w-6 h-6">
</a>
<a href="https://www.youtube.com/c/MyProjectHD" target="_blank" rel="noopener noreferrer" aria-label="Subscribe to our YouTube channel" class="w-10 h-10 bg-gradient-to-r from-red-600 to-pink-600 rounded-lg flex items-center justify-center transform hover:scale-110 hover:rotate-6 transition-all duration-300 shadow-lg hover:shadow-red-500/50">
<img src="https://myprojecthd.in/index.php/public/social-icon/youtube.png" alt="YouTube" class="w-6 h-6">
</a>
<a href="https://www.facebook.com/engineersworld.in/" target="_blank" rel="noopener noreferrer" aria-label="Like us on Facebook" class="w-10 h-10 bg-gradient-to-r from-blue-600 to-indigo-600 rounded-lg flex items-center justify-center transform hover:scale-110 hover:rotate-6 transition-all duration-300 shadow-lg hover:shadow-blue-500/50">
<img src="https://myprojecthd.in/index.php/public/social-icon/facebook.png" alt="Facebook" class="w-6 h-6">
</a>
</div>
</div>
<!-- Quick Links -->
<div>
<h4 class="text-lg font-bold mb-6 text-pink-400 flex items-center">
<svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"></path>
</svg>
Quick Links
</h4>
<ul class="space-y-3">
<li><a href="https://myprojecthd.in/index.php" class="text-gray-400 hover:text-white hover:translate-x-2 inline-block transition-all duration-300">→ Home</a></li>
<li><a href="https://myprojecthd.in/index.php/project-categories" class="text-gray-400 hover:text-white hover:translate-x-2 inline-block transition-all duration-300">→ Projects</a></li>
<li><a href="https://myprojecthd.in/index.php/web-technology-tutorial-in-hindi" class="text-gray-400 hover:text-white hover:translate-x-2 inline-block transition-all duration-300">→ Web Development</a></li>
<li><a href="https://myprojecthd.in/index.php/tech-news" class="text-gray-400 hover:text-white hover:translate-x-2 inline-block transition-all duration-300">→ Tech News</a></li>
<li><a href="https://myprojecthd.in/index.php/responsive-web-design-html-css-js-tutorial-download" class="text-gray-400 hover:text-white hover:translate-x-2 inline-block transition-all duration-300">→ Designs</a></li>
</ul>
</div>
<!-- Popular Categories -->
<div>
<h4 class="text-lg font-bold mb-6 text-pink-400 flex items-center">
<svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 7h.01M7 3h5c.512 0 1.024.195 1.414.586l7 7a2 2 0 010 2.828l-7 7a2 2 0 01-2.828 0l-7-7A1.994 1.994 0 013 12V7a4 4 0 014-4z"></path>
</svg>
Categories
</h4>
<ul class="space-y-3">
<li><a href="https://myprojecthd.in/index.php/core-php-projects-free-download-with-source-code" class="text-gray-400 hover:text-white hover:translate-x-2 inline-block transition-all duration-300">→ Core PHP</a></li>
<li><a href="https://myprojecthd.in/index.php/codeigniter-projects-free-download-with-source-code" class="text-gray-400 hover:text-white hover:translate-x-2 inline-block transition-all duration-300">→ Codeigniter</a></li>
<li><a href="https://myprojecthd.in/index.php/laravel-projects-free-download-with-source-code" class="text-gray-400 hover:text-white hover:translate-x-2 inline-block transition-all duration-300">→ Laravel</a></li>
<li><a href="https://myprojecthd.in/index.php/computer-science-notes-in-hindi" class="text-gray-400 hover:text-white hover:translate-x-2 inline-block transition-all duration-300">→ CS Notes</a></li>
<li><a href="https://myprojecthd.in/index.php/development-tools" class="text-gray-400 hover:text-white hover:translate-x-2 inline-block transition-all duration-300">→ Dev Tools</a></li>
</ul>
</div>
<!-- Newsletter & Stats -->
<div>
<h4 class="text-lg font-bold mb-6 text-pink-400 flex items-center">
<svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"></path>
</svg>
Our Impact
</h4>
<div class="space-y-4">
<div class="bg-white/5 backdrop-blur rounded-xl p-4 border border-white/10 hover:border-purple-500/50 transition-all duration-300">
<div class="text-3xl font-bold text-transparent bg-clip-text bg-gradient-to-r from-purple-400 to-pink-400">500+</div>
<div class="text-sm text-gray-400">Free Projects</div>
</div>
<div class="bg-white/5 backdrop-blur rounded-xl p-4 border border-white/10 hover:border-pink-500/50 transition-all duration-300">
<div class="text-3xl font-bold text-transparent bg-clip-text bg-gradient-to-r from-pink-400 to-red-400">1000+</div>
<div class="text-sm text-gray-400">Video Tutorials</div>
</div>
</div>
</div>
</div>
<!-- Divider -->
<div class="border-t border-gray-700 pt-8">
<div class="text-center">
<p class="text-gray-400 text-sm">
© 2026 My Project HD Team. All rights reserved. Made with
<span class="text-red-500 animate-pulse">❤</span> for Students
</p>
</div>
</div>
</div>
<!-- Bottom Gradient Line -->
<div class="h-1 bg-gradient-to-r from-purple-600 via-pink-600 to-red-600"></div>
</footer>
<!-- Modal Background -->
<div id="authModal" class="fixed inset-0 z-50 flex items-center justify-center bg-black bg-opacity-50 hidden">
<div class="bg-white rounded-2xl shadow-lg w-full max-w-md p-6 relative">
<button id="closeModal" class="absolute top-2 right-2 text-gray-500 hover:text-red-600 text-xl">×</button>
<h3 id="modalTitle" class="text-2xl mb-2 font-bold text-gray-800">Join With</h3>
<div id="g_id_onload"
data-client_id="963847232336-5ge5nvieancsbi1o5nqr4943o0t3bq10.apps.googleusercontent.com"
data-callback="handleCredentialResponse">
</div>
<div class="g_id_signin"
data-type="standard"
data-size="large"
data-theme="outline"
data-text="sign_in_with"
data-shape="rectangular"
data-logo_alignment="left">
</div>
</div>
<!-- Font Awesome for social media icons -->
<script src="https://kit.fontawesome.com/a076d05399.js"></script>
<!-- JavaScript for Menu Toggle -->
<script src="https://kit.fontawesome.com/a076d05399.js"></script>
<script>
function handleCredentialResponse(response) {
// JWT decode
const payload = JSON.parse(atob(response.credential.split('.')[1]));
$.post(BASE_URL+'/api/googlelogin',{name:payload.name,email:payload.email,profile_pic:payload.picture},function(){
window.location.reload();
})
}
// Optional: Retry if auto-login fails
window.onload = function () {
google.accounts.id.initialize({
client_id: 'YOUR_CLIENT_ID',
callback: handleCredentialResponse,
});
google.accounts.id.prompt(); // Show one-tap prompt
};
const menuToggle = document.getElementById('menu-toggle');
const menuClose = document.getElementById('menu-close');
const mobileMenu = document.getElementById('mobile-menu');
menuToggle.addEventListener('click', function () {
mobileMenu.classList.add('open');
});
menuClose.addEventListener('click', function () {
mobileMenu.classList.remove('open');
});
function toggleModal(id) {
const modal = document.getElementById(id);
modal.classList.toggle('hidden');
}
// Modern Navigation Scroll Effect - Simple shadow on scroll
const modernNav = document.querySelector('.modern-nav');
const isHomePage = window.location.pathname === '/' || window.location.pathname === '';
console.log('Is Home Page:', isHomePage);
console.log('Modern Nav Element:', modernNav);
if (modernNav) {
// Check initial state
console.log('Initial classes:', modernNav.className);
window.addEventListener('scroll', function() {
const scrollTop = window.pageYOffset || document.documentElement.scrollTop;
console.log('Scroll position:', scrollTop);
// Only apply scroll effect on home page
// On other pages, keep the solid background always
if (isHomePage) {
if (scrollTop > 50) {
modernNav.classList.add('scrolled');
console.log('Added scrolled class');
} else {
modernNav.classList.remove('scrolled');
console.log('Removed scrolled class');
}
}
// For non-home pages, scrolled class is already applied via PHP
});
// Force check on page load
const initialScroll = window.pageYOffset || document.documentElement.scrollTop;
if (isHomePage && initialScroll > 50) {
modernNav.classList.add('scrolled');
}
}
</script>
<!-- Firebase CDN -->
<script src="https://www.gstatic.com/firebasejs/9.6.11/firebase-app-compat.js"></script>
<script src="https://www.gstatic.com/firebasejs/9.6.11/firebase-messaging-compat.js"></script>
<script>
// Step 1: Firebase Config from your Firebase Console
const firebaseConfig = {
apiKey: "AIzaSyCg2iyzAiusQVMQbJ7gW-3Xf6OTFMUhK48",
authDomain: "webpush-c7626.firebaseapp.com",
databaseURL: "https://webpush-c7626.firebaseio.com",
projectId: "webpush-c7626",
storageBucket: "webpush-c7626.firebasestorage.app",
messagingSenderId: "272378245464",
appId: "1:272378245464:web:346d05bfc861e684aef52d"
};
// Initialize Firebase
firebase.initializeApp(firebaseConfig);
const messaging = firebase.messaging();
// New style for requesting permission and getting token
function initFirebaseMessagingRegistration() {
Notification.requestPermission().then((permission) => {
if (permission === 'granted') {
messaging.getToken({
vapidKey: 'BP89Rr-JBJtnsCBBiRhhY5ahdKoO2s6kALIBInc7Lq-C7EzzsXOrtTrN-7VXzOIBoogCzl0nsJFPF8EFKREf3sc'
}).then((currentToken) => {
if (currentToken) {
// Send token to server
$.get(`${BASE_URL}/save-token/${currentToken}`,{
},function(fb){
})
} else {
console.log('No registration token available. Request permission to generate one.');
}
}).catch((err) => {
console.log('An error occurred while retrieving token. ', err);
});
} else {
console.log('Notification permission not granted.');
}
});
}
// Trigger on DOM load
document.addEventListener("DOMContentLoaded", function () {
initFirebaseMessagingRegistration();
});
// Receive foreground messages
messaging.onMessage((payload) => {
console.log('Message received: ', payload);
// Show custom UI or toast here
});
</script>
</body>
</html>