HTML الديناميكي

الموسوعة الحرة
لغة ترميز النص الفائق
المقارنات
  • ف
  • ت
  • هـ

HTML الديناميكي ، أو DHTML ، هو مصطلح استخدمه بعض بائعي المتصفحات لوصف مجموعة HTML وأوراق الأنماط والبرامج النصية من جانب العميل ( JavaScript أو VBScript أو أي برامج نصية مدعومة أخرى) التي مكنت من إنشاء مستندات تفاعلية ومتحركة. [1] [2] تم تقديم تطبيق DHTML بواسطة Microsoft مع إصدار Internet Explorer 4 في عام 1997. [3] [ مصدر غير موثوق؟ ]


تسمح لغة DHTML (HTML الديناميكية) للغات البرمجة النصية، مثل JavaScript، بتعديل المتغيرات والعناصر في بنية صفحة الويب، مما يؤثر بدوره على مظهر وسلوك ووظائف محتوى HTML "الثابت" بعد تحميل الصفحة بالكامل وأثناء عملية المشاهدة. وبالتالي فإن السمة الديناميكية لـ DHTML هي الطريقة التي تعمل بها أثناء عرض الصفحة، وليس في قدرتها على إنشاء صفحة فريدة مع كل تحميل للصفحة.

على النقيض من ذلك، فإن صفحة الويب الديناميكية هي مفهوم أوسع، حيث تغطي أي صفحة ويب يتم إنشاؤها بشكل مختلف لكل مستخدم أو حدوث تحميل أو قيم متغيرات محددة. يتضمن هذا الصفحات التي تم إنشاؤها بواسطة نصوص برمجية من جانب العميل وتلك التي تم إنشاؤها بواسطة نصوص برمجية من جانب الخادم (مثل PHP أو Python أو JSP أو ASP.NET ) حيث يقوم خادم الويب بإنشاء المحتوى قبل إرساله إلى العميل.

DHTML هو السلف لـ Ajax ولا تزال صفحات DHTML تعتمد على الطلب وإعادة التحميل. بموجب نموذج DHTML، قد لا يكون هناك أي تفاعل بين العميل والخادم بعد تحميل الصفحة؛ تحدث جميع عمليات المعالجة على جانب العميل. وعلى النقيض من ذلك، يعمل Ajax على توسيع ميزات DHTML للسماح للصفحة ببدء طلبات الشبكة (أو "الطلبات الفرعية") إلى الخادم حتى بعد تحميل الصفحة لأداء إجراءات إضافية. على سبيل المثال، إذا كانت هناك علامات تبويب متعددة على الصفحة، فإن نهج DHTML الخالص سيقوم بتحميل محتويات جميع علامات التبويب ثم عرض علامة التبويب النشطة فقط بشكل ديناميكي، بينما يمكن لـ AJAX تحميل كل علامة تبويب فقط عندما تكون هناك حاجة إليها حقًا.

الاستخدامات

يتيح DHTML للمؤلفين إضافة تأثيرات إلى صفحاتهم يصعب تحقيقها بطريقة أخرى، وذلك من خلال تغيير نموذج كائن المستند (DOM) ونمط الصفحة. يوفر الجمع بين HTML وCSS وJavaScript طرقًا للقيام بما يلي:

  • تحريك النصوص والصور في مستنداتهم.
  • قم بتضمين شريط أخبار أو شاشة عرض ديناميكية أخرى تقوم تلقائيًا بتحديث محتواها بأحدث الأخبار أو أسعار الأسهم أو غيرها من البيانات.
  • استخدم نموذجًا لالتقاط إدخال المستخدم، ثم قم بمعالجة تلك البيانات والتحقق منها والرد عليها دون الحاجة إلى إرسال البيانات مرة أخرى إلى الخادم.
  • قم بتضمين أزرار التمرير أو القوائم المنسدلة.

الاستخدام الأقل شيوعًا هو إنشاء ألعاب الحركة المستندة إلى المتصفح. على الرغم من إنشاء عدد من الألعاب باستخدام DHTML خلال أواخر التسعينيات وأوائل العقد الأول من القرن الحادي والعشرين، [4] إلا أن الاختلافات بين المتصفحات جعلت هذا الأمر صعبًا: كان لا بد من تنفيذ العديد من التقنيات في الكود لتمكين الألعاب من العمل على منصات متعددة. ومنذ ذلك الحين، اتجهت المتصفحات نحو معايير الويب ، مما جعل تصميم ألعاب DHTML أكثر قابلية للتطبيق. يمكن لعب هذه الألعاب على جميع المتصفحات الرئيسية وفي تطبيقات سطح المكتب والأجهزة التي تدعم سياقات المتصفح المضمنة.

لقد أصبح مصطلح "DHTML" خارج الاستخدام في السنوات الأخيرة لأنه كان مرتبطًا بالممارسات والاتفاقيات التي تميل إلى عدم العمل بشكل جيد بين متصفحات الويب المختلفة. [5]

تم تقديم دعم DHTML مع إمكانية الوصول إلى DOM بشكل مكثف مع Internet Explorer 4.0 . وعلى الرغم من وجود نظام ديناميكي أساسي مع Netscape Navigator 4.0 ، لم يتم تمثيل جميع عناصر HTML في DOM. عندما أصبحت تقنيات نمط DHTML منتشرة على نطاق واسع، فإن الدرجات المتفاوتة من الدعم بين متصفحات الويب للتقنيات المعنية جعلت من الصعب تطويرها وتصحيح أخطائها . أصبح التطوير أسهل عندما تبنى Internet Explorer 5.0+ و Mozilla Firefox 2.0+ و Opera 7.0+ DOM مشتركًا موروثًا من ECMAScript .

وفي وقت لاحق، قامت مكتبات JavaScript مثل jQuery بتلخيص العديد من الصعوبات اليومية في معالجة DOM عبر المتصفحات، على الرغم من أن الامتثال للمعايير الأفضل بين المتصفحات قد قلل من الحاجة إلى ذلك.

هيكل صفحة الويب

عادةً ما يتم إعداد صفحة الويب التي تستخدم DHTML بالطريقة التالية: 

<!DOCTYPE html> 
< html  lang = "en" > 
< head > 
    < meta  charset = "utf-8" > 
    < title > مثال DHTML </ title > 
</ head > 
< body  bgcolor = "red" > 
    < script > 
function init () { let myObj = document . getElementById ( "navigation" ); // ... manipulate myObj } window . onload = init ; </ script > <!--     غالبًا ما يتم تخزين الكود في ملف خارجي؛ يتم ذلك     عن طريق ربط الملف الذي يحتوي على JavaScript.     يكون هذا مفيدًا عندما تستخدم عدة صفحات نفس البرنامج النصي:     --> < script src = "my-javascript.js" ></ script > </ body > </ html >

مثال: عرض كتلة إضافية من النص

يوضح الكود التالي وظيفة مستخدمة بشكل متكرر. لن يتم عرض جزء إضافي من صفحة الويب إلا إذا طلب المستخدم ذلك. 

<!DOCTYPE html> 
< html > 
< head > 
    < meta  charset = "utf-8" > 
    < title > استخدام دالة DOM </ title > 
    < style > 
a { لون الخلفية : #eee ; } a : hover { الخلفية : #ff0 ; } # toggleMe { الخلفية : #cfc ; العرض : لا شيء ; الهامش : 30 بكسل 0 ; الحشو : 1 em ; } </ style > </ head > < body > < h1 > استخدام دالة DOM </ h1 >            
            
                   
    


    
        
    < h2 >< a  id = "showhide"  href = "#" > إظهار الفقرة </ a ><</ h2 >
        
    < p  id = "toggle-me" > هذه هي الفقرة التي يتم عرضها فقط عند الطلب. </ p >
        
    < p > يستمر التدفق العام للوثيقة. </ p >
        
    <script> دالة changeDisplayState ( displayElement ، textElement ) { إذا ( displayElement.style.display === " none " || displayElement.style.display === " " 
) { displayElement.style.display = " block " ؛ textElement.innerHTML = " إخفاء الفقرة " ؛ } وإلا { displayElement.style.display = " none " ؛ textElement.innerHTML = " إظهار الفقرة " ؛ } } دع displayElement = document.getElementById ( " toggle - me " ) ؛ دع textElement = document.getElementById ( " showhide " ) ؛ textElement.addEventListener ( " click " ، دالة ( event ) { event.preventDefault ( ) ؛ changeDisplayState ( displayElement ، textElement ) ؛ } ) ; </script> </body> </html>​​​​​​​​

نموذج كائن المستند

DHTML ليست تقنية في حد ذاتها؛ بل هي نتاج ثلاث تقنيات مترابطة ومتكاملة: HTML وCascading Style Sheets (CSS) و JavaScript . للسماح للبرامج النصية والمكونات بالوصول إلى ميزات HTML وCSS، يتم تمثيل محتويات المستند ككائنات في نموذج برمجة يُعرف باسم نموذج كائن المستند (DOM).

تُعد واجهة برمجة تطبيقات DOM الأساس لـ DHTML، حيث توفر واجهة منظمة تسمح بالوصول إلى أي شيء تقريبًا في المستند ومعالجته. تتوفر عناصر HTML في المستند كشجرة هرمية من الكائنات الفردية، مما يجعل من الممكن فحص وتعديل عنصر وسماته من خلال قراءة وتعيين الخصائص واستدعاء الأساليب. يتوفر النص بين العناصر أيضًا من خلال خصائص وطرق DOM.

يوفر DOM أيضًا إمكانية الوصول إلى إجراءات المستخدم مثل الضغط على مفتاح والنقر بالماوس. ومن الممكن اعتراض ومعالجة هذه الأحداث وغيرها من خلال إنشاء وظائف روتينية لمعالجة الأحداث . ويتلقى معالج الأحداث التحكم في كل مرة يحدث فيها حدث معين ويمكنه تنفيذ أي إجراء مناسب، بما في ذلك استخدام DOM لتغيير المستند.

الأنماط الديناميكية

الأنماط الديناميكية هي ميزة أساسية في DHTML. باستخدام CSS، يمكن للمرء تغيير مظهر وتنسيق العناصر في المستند بسرعة دون إضافة أو إزالة عناصر. يساعد هذا في الحفاظ على حجم المستندات صغيرًا والبرامج النصية التي تعالج المستند بسرعة.

يوفر نموذج الكائن إمكانية الوصول البرمجي إلى الأنماط. وهذا يعني أنه يمكنك تغيير الأنماط المضمنة في العناصر الفردية وتغيير قواعد الأنماط باستخدام برمجة JavaScript البسيطة.

الأنماط المضمنة هي تعيينات أنماط CSS تم تطبيقها على عنصر باستخدام سمة النمط. يمكنك فحص هذه الأنماط وتعيينها من خلال استرداد كائن النمط لعنصر فردي. على سبيل المثال، لتسليط الضوء على النص في عنوان عندما يحرك المستخدم مؤشر الماوس فوقه، يمكنك استخدام كائن النمط لتكبير الخط وتغيير لونه، كما هو موضح في المثال البسيط التالي. 

<!DOCTYPE html> 
< html  lang = "en" > 
< head > 
    < meta  charset = "utf-8" > 
    < title > الأنماط الديناميكية </ title > 
    < style > 
ul { display : none ; } </ style > </ head >            
    


<body> < h1 id = " first - header" >
     مرحبًا بك في HTML الديناميكي </ h1 > 

    < p >< a  id = "clickable-link"  href = "#" > تعتبر الأنماط الديناميكية ميزة أساسية لـ DHTML. </ a ></ p >

    < ul  id = "unordered-list" > 
        < li > تغيير لون وحجم ونوع النص </ li > 
        < li > إظهار النص وإخفاؤه </ li > 
        < li > والكثير والكثير غير ذلك </ li > 
    </ ul >

    < p > لقد بدأنا للتو! </ p >

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

        المستند . getElementById ( "رابط قابل للنقر" ). addEventListener ( "انقر" ، دالة ( حدث ) { حدث . PreventDefault ()؛ showMe ()؛ }); </ script > </ body > </ html >

انظر أيضا

مراجع

  1. ^ "أسئلة وأجوبة حول نموذج كائن المستند". W3C . 22 أكتوبر 2003. تم الاسترجاع في 2022-02-16 .
  2. ^ "Web Style Sheets". W3C . 22 يوليو 1999. تم الاسترجاع في 7 أبريل 2018 .
  3. ^ Pedamkar, Priya (2020-07-19). "DHTML | نظرة سريعة على DHTML مع المكونات والميزات والاحتياجات". EDUCBA . تم الاسترجاع في 2022-10-13 .
  4. ^ داونز، ستيفن (18 أغسطس 1999). "المتعة والألعاب مع DHTML". موقع Stephen's Web . تم الاسترجاع في 2022-08-27 .
  5. ^ فيرجسون، روس؛ هيلمان، كريستيان (2013). بداية جافا سكريبت مع برمجة النصوص DOM وآجاكس (PDF) . بيركلي، كاليفورنيا: إبريس. ص. 49-68. doi :10.1007/978-1-4302-5093-7. ISBN 978-1-4302-5092-0. S2CID  20526670 . تم الاسترجاع في 30 مايو 2022 .
جافا سكريبت/دي إتش تي إم إل
  • QuirksMode، موقع شامل يحتوي على أمثلة اختبار وإرشادات حول كيفية كتابة كود DHTML الذي يعمل على العديد من المتصفحات.
  • دروس تمهيدية في DHTML
Retrieved from "https://en.wikipedia.org/w/index.php?title=Dynamic_HTML&oldid=1244355887"
Original text
Rate this translation
Your feedback will be used to help improve Google Translate