تعلم Dhtml -جافاسكربتDom

الفرق بين الجافاسكربت والDOM والDHTML؟
الجافاسكربت هي لغة برمجية للويب، وهي لغة Object scripting language أي أنها لغة تعتمد على الClasses بشكل كبير على العكس من الPHP أول ماظهرت لم تكن تعتمد على الClasses كانت تعتمد على Functions وبعد ذلك تم إضافة الدعم للClasses في النسخ المتأخرة من الphp، ولكن أغلب المبرمجين على الجافاسكربت لايستفيدون من هذه الخاصية المهمة وهو ليس موضوع حديثنا اليوم ولكنني أحببت أن أوضح الفرق.
لغة الجافاسكربت هي لغة في نصها أشتقت من لغة الC لكي يسهل على المطورين تعلمها بسرعة بدون العناء إلى تعلم نص أو syntax جديدة لهذه اللغة.

إذا ماهي الDHTML؟
الDHTML عزيزي القارئ هي اختصار لكلمة Dynamic HTML وهي لغة الHTML التفاعلية، وكما نعلم فإن الHTML هي لغة برمجية static أو ثابيه، فأي شيء تبرمجه ستجده ظاهرا على الصفحة بدون أي حركات أو إضافات animation، واكن بعدما قامت شكرة netscape المشهورة بإضافة لغة الجافاسكربت إلى متصفحها هنا أضافت الحركة إلى الصفحة وجعلتها تتفاعل أكثر مع المستخدم ومن ثم تم تتطبيقها بشكل رسمي من المنظمة العالمية للويب w3c،

الآن وبعدما عرفنا الDHTML نذهب إلى تعريف مهم وهو الDOM

ما هو الDOM؟
اختصار لكلمة Document Object Model وهي API أو وصلة تطبيق برمجي لملفات الHTML والXML التي تتيح هيكلة الملف وتقسيمه، ومن ثم يمكنك أن تحدد أي Object من ذلك الملف والتعديل عليه من ناحية النص أو الشكل أو لون الخلفية ... الخ. باختصار شديد هي حلقة الوصل بين الDHTML والجافاسكربت.

معنى الObjects أي أن كل ما يضيفه مصمم الويب من صور وجدوال ونص وماخلافه يكون Objects، ويمكنك تحديد أي Object في صفحتك والدخول إليه لتغير خصائصه عن طريق الDOM.

والDOM تستعمل غالبا مع الجافاسكربت، ولكنها ليست جزء من اللغة نفسها فقد تم تصميم الDOM ليكون إضافاة للغات البرمجة وليس ليستعمل مع لغة الجافاسكربت فقط، وهنا أحب أن أوضح نقطه قد يكون أكثر من 90% من مصممي الويب غافل عنها وهي أن الحركات التفاعلية وتغير الألوان يكون بالجافاسكربت DOM وليس بالجافاسكربت لوحدها.
أمثلة لاستخدامات الDOM في لغات البرمجة الأخرى: لغة [php].

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

كيفية استخدام الجافاسكربت DOM؟
الآن وصلنا إلى أهم نقطة في حديثنا اليوم، كيف نوظف الجافاسكربت DOM وكيف نعطي صفحتنا فاعلية أكثر ونحولها إلى DHTML. انظر إلى المثال التالي وهو مأخوذ من موقع شركة Mozilla، هذا الكود راح يأخذ كل الأوسمة أو الTags التي هي على شكل والتي تمثل أوسمة الوصلات الموجودة في صفحتك ويخزنها على شكل Array أو مصفوفة في المتغير anchorTags، وراح يعطيك مسج أو alert() بكل وصلة يؤدي إليها هذا الوسم باستخدام For Loop:

var anchorTags = document.getElementsByTagName(”a”);
for (var i = 0; i <anchorTags.length ; i++)
{
alert(”Href of ” + i + “-th element is : ” + anchorTags[i].href + “\n”);
}

الآن لنحلل هذا الكود ولنتعرف على ماهو الDOM وماهو من أصل الجافاسكربت، للتوضيح فقد تم تلوين خصائص الDOM باللون الأحمر وخصائص الجافاسكربت الأساسية باللون الأزرق:

var anchorTags =
لتعريف المتغير في الجافاسكربت.

document.getElementsByTagName("a")
الdocument ومن تعريف الw3c له هو الصفحة الكاملة التي تحتوي على كل شيء من صور وخلافه، والدالة getElementsByTagName تبحث عن كل الأوسمة التي في الdocument أو الصفحة وأي وسم يطابق المعطيات لهذه الدالة سوف يتم تخزينه في المتغير أعلاه، وهذا من خصائص وتعاريف الDOM.

For-Loop
هي حلقة معروفة لدى المبرمجين وهذه من خصائص الجافاسكربت

anchorTags.length
هي للإثنين تقريبا لأنها تعتبر مصفوفة في نظر الجافاسكربت وفي نظر الDOM وحسب تعريف الw3c لها هي عدد العقد أو الNodes، على أي حال هي تعبر عن عدد العقد التي رجعت إلينا من منادة الدالة document.getElementsByTagName("a").

anchorTags[i].href
للمبرمجين الC يمكن أن يلاحظوها على طول، فنحن هنا نأخذ المصفوفة anchorTags رقم i وندخل إلى خاصية الhref بها ونأخذ مابداخلها. وخاصية الhref بهذه الطريقة هي من خصائص الDOM ويرجع لنا على شكل نص أو String.

المراجع
http://developer.mozilla.org/en/docs/About_the_Document_Object_Model

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

مع تحياتي