HTML ديناميكي

الموسوعة الحرة

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

تتيح لغة DHTML للغات البرمجة النصية، مثل جافا سكريبت، تعديل المتغيرات والعناصر في بنية صفحة الويب، مما يؤثر بدوره على مظهر وسلوك ووظائف محتوى 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 مع متصفح إنترنت إكسبلورر 4.0 . على الرغم من وجود نظام ديناميكي أساسي في متصفح نتسكيب نافيجاتور 4.0 ، إلا أن جميع عناصر HTML لم تكن ممثلة في DOM. عندما انتشرت تقنيات DHTML على نطاق واسع، أدى تفاوت مستوى دعم متصفحات الويب لهذه التقنيات إلى صعوبة تطويرها وتصحيح أخطائها . أصبح التطوير أسهل عندما اعتمد متصفح إنترنت إكسبلورر 5.0 والإصدارات الأحدث ، وموزيلا فايرفوكس 2.0 والإصدارات الأحدث، وأوبرا 7.0 والإصدارات الأحدث، نموذج DOM مشتركًا موروثًا من ECMAScript .

في وقت لاحق، قامت مكتبات جافا سكريبت مثل 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 " ) ; // ... التعامل مع 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 { background - color : #eee ; } a : hover { background : # ff0 ; } #toggleMe { background : #cfc ; display : none ; margin : 30px 0 ; padding : 1em ; } </style> </head> <body> <h1> استخدام دالة DOM </h1>​​​​​​​​<h2> <a id="showhide" href="#"> إظهار الفقرة </a> </h2>​​​​​​​​​​​< p id = "toggle-me" > هذه الفقرة لا تظهر إلا عند الطلب. </ p ><p> يستمر التدفق العام للوثيقة. < / p ><script> function changeDisplayState ( displayElement , textElement ) { if ( displayElement.style.display === " none " || displayElement.style.display === " " ) { displayElement.style.display = " block " ; textElement.innerHTML = " إخفاء الفقرة " ; } else { displayElement.style.display = " none " ; textElement.innerHTML = " إظهار الفقرة " ; } } let displayElement = document.getElementById ( " toggle - me " ) ; let textElement = document.getElementById ( " showhide " ) ; textElement.addEventListener ( " click " , function ( event ) { event.preventDefault ( ) ; changeDisplayState ( displayElement , textElement ) ; } ) ; </script> </body> </html>​​​​​​​​

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

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

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

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

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

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

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

الأنماط المضمنة هي أنماط 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 " ; }document.getElementById ( " clickable -link" ) . addEventListener ( " click" , function ( event ) { event.preventDefault ( ) ; showMe ( ) ; } ) ; </script> </body> </html>

انظر أيضاً

مراجع

  1. ↑ "أسئلة وأجوبة حول نموذج كائن المستند" . اتحاد شبكة الويب العالمية (W3C) . 22 أكتوبر 2026. تم الاطلاع عليه بتاريخ 16 فبراير 2026 .
  2. ↑ "أوراق أنماط الويب" . اتحاد شبكة الويب العالمية . 22 يوليو 1999. تم الاطلاع عليه في 7 أبريل 2018 .
  3. ↑ بيدامكار، بريا (19 يوليو 2020). "نظرة سريعة على DHTML مع المكونات والميزات والاحتياجات" . EDUCBA . تم الاسترجاع في 13 يونيو 2026 .
  4. ↑ داونز، ستيفن (18 أغسطس 1999). "متعة وألعاب مع DHTML" . موقع ستيفن الإلكتروني . تم الاسترجاع في 27 أغسطس 2022 .
  5. ↑ فيرغسون، روس؛ هيلمان، كريستيان (2013). مقدمة في جافا سكريبت باستخدام برمجة DOM و Ajax (ملف PDF) . بيركلي، كاليفورنيا: Apress. الصفحات 49-68 . doi : 10.1007/978-1-4302-5093-7 . ISBN  978-1-4302-5092-0. S2CID 20526670 . تم الاسترجاع في 30 مايو 2022 .