डायनेमिक एचटीएमएल

डायनेमिक HTML, या DHTML, एक ऐसा शब्द है जिसका उपयोग कुछ ब्राउज़र विक्रेताओं द्वारा HTML, स्टाइल शीट (वेब ​​डेवलपमेंट) और डायनेमिक वेब पेज # क्लाइंट-साइड स्क्रिप्टिंग | क्लाइंट-साइड स्क्रिप्ट (जावास्क्रिप्ट, VBScript, या) के संयोजन का वर्णन करने के लिए किया गया था। कोई अन्य समर्थित स्क्रिप्ट) जो इंटरैक्टिव और एनिमेटेड दस्तावेज़ों के निर्माण को सक्षम करती है। DHTML का अनुप्रयोग Microsoft द्वारा 1997 में Internet Explorer 4 की रिलीज़ के साथ पेश किया गया था।

डीएचटीएमएल स्क्रिप्टिंग भाषाओं को वेब पेज की डेफिनिशन लैंग्वेज में चर (प्रोग्रामिंग) को बदलने की अनुमति देता है, जो पेज के पूरी तरह से लोड होने के बाद और देखने की प्रक्रिया के दौरान अन्यथा स्टेटिक एचटीएमएल पेज कंटेंट के लुक और फंक्शन को प्रभावित करता है। इस प्रकार डीएचटीएमएल की गतिशील विशेषता पृष्ठ को देखे जाने के दौरान इसके कार्य करने का तरीका है, न कि प्रत्येक पृष्ठ लोड के साथ एक अद्वितीय पृष्ठ उत्पन्न करने की क्षमता में।

इसके विपरीत, एक गतिशील वेब पेज एक व्यापक अवधारणा है, जिसमें प्रत्येक उपयोगकर्ता के लिए अलग-अलग उत्पन्न होने वाले किसी भी वेब पेज, लोड घटना या विशिष्ट चर मानों को शामिल किया गया है। इसमें क्लाइंट-साइड स्क्रिप्टिंग द्वारा बनाए गए पेज और सर्वर-साइड स्क्रिप्टिंग (जैसे PHP, पायथन (प्रोग्रामिंग लैंग्वेज), JavaServer Pages या ASP.NET) द्वारा बनाए गए पेज शामिल हैं, जहां वेब सर्वर क्लाइंट को भेजने से पहले सामग्री तैयार करता है।

DHTML Ajax (प्रोग्रामिंग) का पूर्ववर्ती है और DHTML पृष्ठ अभी भी अनुरोध/पुनः लोड-आधारित हैं। डीएचटीएमएल मॉडल के तहत, पेज लोड होने के बाद क्लाइंट और सर्वर के बीच कोई इंटरेक्शन नहीं हो सकता है; सभी प्रसंस्करण क्लाइंट साइड पर होता है। इसके विपरीत, अजाक्स पृष्ठ लोड होने के बाद भी अतिरिक्त कार्य करने के लिए पृष्ठ को नेटवर्क अनुरोध (या 'उपअनुरोध') आरंभ करने की अनुमति देने के लिए DHTML की सुविधाओं का विस्तार करता है। उदाहरण के लिए, यदि किसी पृष्ठ पर एक से अधिक टैब हैं, तो शुद्ध DHTML दृष्टिकोण सभी टैब की सामग्री को लोड करेगा और फिर गतिशील रूप से केवल वही प्रदर्शित करेगा जो सक्रिय है, जबकि AJAX प्रत्येक टैब को केवल तभी लोड कर सकता है जब वास्तव में इसकी आवश्यकता हो।

उपयोग

DHTML लेखकों को दस्तावेज़ ऑब्जेक्ट मॉडल (DOM) और पृष्ठ शैली को बदलकर अपने पृष्ठों पर प्रभाव जोड़ने की अनुमति देता है जो अन्यथा प्राप्त करना कठिन होता है। HTML, CSS और JavaScript का संयोजन इसके तरीके प्रदान करता है:

• अपने दस्तावेज़ में पाठ और छवियों को एनिमेट करें।
• एक टिकर या अन्य डायनामिक डिस्प्ले एम्बेड करें जो नवीनतम समाचार, स्टॉक कोट्स या अन्य डेटा के साथ अपनी सामग्री को स्वचालित रूप से ताज़ा करता है।
• उपयोगकर्ता इनपुट को कैप्चर करने के लिए एक फॉर्म का उपयोग करें, और फिर डेटा को सर्वर पर वापस भेजे बिना उस डेटा को प्रोसेस, सत्यापित और प्रतिक्रिया दें।
• रोलओवर बटन या ड्रॉप-डाउन मेनू शामिल करें।

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

डीएचटीएम शब्द हाल के वर्षों में उपयोग से बाहर हो गया है क्योंकि यह उन प्रथाओं और सम्मेलनों से जुड़ा था जो विभिन्न वेब ब्राउज़रों के बीच अच्छी तरह से काम नहीं करते थे। व्यापक DOM एक्सेस के साथ DHTML समर्थन को Internet Explorer 4.0 के साथ पेश किया गया था। हालांकि नेटस्केप नेविगेटर|नेटस्केप नेविगेटर 4.0 के साथ एक बुनियादी गतिशील प्रणाली थी, डोम में सभी HTML तत्वों का प्रतिनिधित्व नहीं किया गया था। जब डीएचटीएमएल-शैली की तकनीकें व्यापक हो गईं, तो शामिल तकनीकों के लिए वेब ब्राउज़रों के बीच समर्थन की अलग-अलग डिग्री ने उन्हें विकसित करना और डीबग करना मुश्किल बना दिया। जब Internet Explorer 5|Internet Explorer 5.0+, Firefox 2.0+, और Opera (वेब ​​ब्राउज़र) 7.0+ ने ECMAScript से प्राप्त एक साझा दस्तावेज़ ऑब्जेक्ट मॉडल को अपनाया तो विकास आसान हो गया।

हाल ही में, जावास्क्रिप्ट पुस्तकालय जैसे कि jQuery ने क्रॉस-ब्राउज़र DOM हेरफेर में दिन-प्रतिदिन की कई कठिनाइयों को दूर कर दिया है।

एक वेब पेज की संरचना

See also: DOM events

आम तौर पर डीएचटीएम का उपयोग करने वाला एक वेब पेज निम्नलिखित तरीके से स्थापित किया जाता है:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>DHTML example</title>
</head>
<body bgcolor="red">
    <script>
        function init() {
            let myObj = document.getElementById("navigation");
            // ... manipulate myObj
        }
        window.onload = init;
    </script>
    <!--
    Often the code is stored in an external file; this is done
    by linking the file that contains the JavaScript.
    This is helpful when several pages use the same script:
    -->
    <script src="my-javascript.js"></script>
</body>
</html>

उदाहरण: पाठ का एक अतिरिक्त ब्लॉक प्रदर्शित करना

निम्नलिखित कोड अक्सर उपयोग किए जाने वाले फ़ंक्शन को दिखाता है। उपयोगकर्ता द्वारा अनुरोध किए जाने पर ही वेब पेज का एक अतिरिक्त भाग प्रदर्शित किया जाएगा।

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Using a DOM function</title>
    <style>
        a { background-color: #eee; }
        a:hover { background: #ff0; }
        #toggleMe { background: #cfc; display: none; margin: 30px 0; padding: 1em; }
    </style>
</head>
<body>
    <h1>Using a DOM function</h1>
        
    <h2><a id="showhide" href="#">Show paragraph</a></h2>
        
    <p id="toggle-me">This is the paragraph that is only displayed on request.</p>
        
    <p>The general flow of the document continues.</p>
        
    <script>
        function changeDisplayState(displayElement, textElement) {
            if (displayElement.style.display === "none" || displayElement.style.display === "") {
                displayElement.style.display = "block";
                textElement.innerHTML = "Hide paragraph";
            } else {
                displayElement.style.display = "none";
                textElement.innerHTML = "Show paragraph";
            }
        }
        
        let displayElement = document.getElementById("toggle-me");
        let textElement = document.getElementById("showhide");
        textElement.addEventListener("click", function (e) {
            e.preventDefault();
            changeDisplayState(displayElement, textElement);
        });
    </script>
</body>
</html>

दस्तावेज़ वस्तु मॉडल

Main article: Document Object Model

DHTML अपने आप में एक तकनीक नहीं है; बल्कि, यह तीन संबंधित और पूरक प्रौद्योगिकियों का उत्पाद है: एचटीएमएल, कैस्केडिंग स्टाइल शीट्स (सीएसएस), और जावास्क्रिप्ट। स्क्रिप्ट और घटकों को HTML और CSS की सुविधाओं तक पहुंचने की अनुमति देने के लिए, दस्तावेज़ की सामग्री को एक प्रोग्रामिंग मॉडल में ऑब्जेक्ट के रूप में दर्शाया जाता है जिसे दस्तावेज़ ऑब्जेक्ट मॉडल (DOM) के रूप में जाना जाता है।

DOM API DHTML की नींव है, जो एक संरचित इंटरफ़ेस प्रदान करता है जो दस्तावेज़ में लगभग किसी भी चीज़ की पहुँच और हेरफेर की अनुमति देता है। दस्तावेज़ में HTML तत्व अलग-अलग वस्तुओं के एक पदानुक्रमित पेड़ (डेटा संरचना) के रूप में उपलब्ध हैं, जिससे किसी तत्व और उसकी विशेषताओं को पढ़ने और सेट करने और विधियों को कॉल करके जांचना और संशोधित करना संभव हो जाता है। तत्वों के बीच का पाठ DOM गुणों और विधियों के माध्यम से भी उपलब्ध है।

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

गतिशील शैलियाँ

गतिशील शैलियाँ DHTML की एक प्रमुख विशेषता हैं। सीएसएस का उपयोग करके, तत्वों को जोड़ने या हटाने के बिना दस्तावेज़ में तत्वों की उपस्थिति और स्वरूपण को तुरंत बदल सकते हैं। यह दस्तावेज़ों को छोटा रखने में मदद करता है और दस्तावेज़ में तेजी से हेरफेर करने वाली स्क्रिप्ट।

ऑब्जेक्ट मॉडल शैलियों को प्रोग्रामेटिक एक्सेस प्रदान करता है। इसका मतलब है कि आप सरल जावास्क्रिप्ट प्रोग्रामिंग का उपयोग करके अलग-अलग तत्वों पर इनलाइन शैलियों को बदल सकते हैं और शैली के नियमों को बदल सकते हैं।

इनलाइन शैलियाँ CSS शैली असाइनमेंट हैं जो शैली विशेषता का उपयोग करके किसी तत्व पर लागू की गई हैं। आप किसी व्यक्तिगत तत्व के लिए स्टाइल ऑब्जेक्ट प्राप्त करके इन शैलियों की जांच और सेट कर सकते हैं। उदाहरण के लिए, जब उपयोगकर्ता माउस पॉइंटर को उसके ऊपर ले जाता है, तो शीर्षक में टेक्स्ट को हाइलाइट करने के लिए, आप फ़ॉन्ट को बड़ा करने और उसका रंग बदलने के लिए स्टाइल ऑब्जेक्ट का उपयोग कर सकते हैं, जैसा कि निम्नलिखित सरल उदाहरण में दिखाया गया है।

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Dynamic Styles</title>
    <style>
        ul { display: none; }
    </style>
</head>

<body>
    <h1 id="first-header">Welcome to Dynamic HTML</h1>

    <p><a id="clickable-link" href="#">Dynamic styles are a key feature of DHTML.</a></p>

    <ul id="unordered-list">
        <li>Change the color, size, and typeface of text</li>
        <li>Show and hide text</li>
        <li>And much, much more</li>
    </ul>

    <p>We've only just begun!</p>

    <script>
        function showMe() {
            document.getElementById("first-header").style.color = "#990000";
            document.getElementById("unordered-list").style.display = "block";
        }

        document.getElementById("clickable-link").addEventListener("click", function (e) {
            e.preventDefault();
            showMe();
        });
    </script>
</body>
</html>

यह भी देखें

• डायनेमिक वेब पेज

बाहरी संबंध

• QuirksMode, a comprehensive site with test examples and instructions on how to write DHTML code that runs on several browsers.
• Introductory DHTML Tutorial