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

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

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

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

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

उपयोग

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

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

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

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

व्यापक डॉम प्रवेशाज्ञा के साथ डीएचटीएमएल समर्थन को इंटरनेट एक्सप्लोरर 4.0 के साथ प्रस्तुत किया गया था। चूंकि नेटस्केप नेविगेटर|नेटस्केप नेविगेटर 4.0 के साथ एक मूलभूत सक्रिय प्रणाली थी, डोम में सभी एचटीएमएल तत्वों का प्रतिनिधित्व नहीं किया गया था। जब डीएचटीएमएल-शैली की विधि व्यापक हो गईं, तो सम्मिलित विधि के लिए वेब ब्राउज़रों के बीच समर्थन की अलग-अलग डिग्री ने उन्हें विकसित करना और डीबग करना जटिल बना दिया। जब इंटरनेट एक्सप्लोरर 5|इंटरनेट एक्सप्लोरर 5.0+, फ़ायरफ़ॉक्स 2.0+, और ओपेरा (वेब ​​ब्राउज़र) 7.0+ ने इसीएमएस्क्रिप्ट से प्राप्त साझा दस्तावेज़ वस्तु मॉडल को अपनाया तो विकास आसान हो गया।

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

एक वेब पृष्ठ की संरचना

See also: डोम इवेंट्स

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

<!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: दस्तावेज़ वस्तु मॉडल

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

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

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

सक्रिय शैलियाँ

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

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

<!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 डीएचटीएमएल code that runs on several browsers.
• Introductory डीएचटीएमएल Tutorial