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>
<div class="col-span-1">
<h2 class="text-3xl md:text-4xl font-bold text-gray-800 mb-6">Related Post</h2>
<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/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/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/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/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/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/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/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/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/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/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/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/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/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/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/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/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/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/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/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/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/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/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/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/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/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/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/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/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/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/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/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/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/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/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/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/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/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/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/blog/cookies-and-session-in-php-in-hindi">PHP में Cookies और Session का उपयोग (Cookies and Session in PHP in Hindi)</a>
</li>
</ul>
</div>
</div>
<!-- Comment List -->
<div class="space-y-4">
<h3 class="text-xl font-semibold text-gray-800 mb-2">Comments</h3>
<!-- Single Comment -->
<!-- Add more static/dynamic comments here -->
</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/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="wCIT8HdYgv7AFQISr5DxjMPAT7KPXd1nGNb61rV2">
<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>
<!-- Footer -->
<footer class="bg-gray-800 text-white py-6">
<div class="max-w-7xl mx-auto text-center">
<div class="text-center py-4">
<a href="https://www.instagram.com/myprojecthd.in/" target="_blank" style="display: inline-block; margin: 0 10px;">
<img src="https://myprojecthd.in/public/social-icon/instagram.png" alt="Instagram" style="width: 40px; height: 40px;">
</a>
<a href="https://www.youtube.com/c/MyProjectHD" target="_blank" style="display: inline-block; margin: 0 10px;">
<img src="https://myprojecthd.in/public/social-icon/youtube.png" alt="YouTube" style="width: 40px; height: 40px;">
</a>
<a href="https://www.facebook.com/engineersworld.in/" target="_blank" style="display: inline-block; margin: 0 10px;">
<img src="https://myprojecthd.in/public/social-icon/facebook.png" alt="Facebook" style="width: 40px; height: 40px;">
</a>
</div>
<p>© 2024 My Project HD Team. All rights reserved.</p>
</div>
</footer>
<!-- 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>
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');
}
</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>