المشروع - كل ما يتعلق بتطوير المواقع http://www.almashroo.com/

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

الفرق بين الجافاسكربت و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 وماهو من أصل الجافاسكربت.

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 وDHTM. وعرفنا كيف ندخل إلى أي Object أو عنصر في صفحة HTML وتغيرها حسب الطلب. أتمنى من الله أن أكون قد وفقت في شرح هذا الدرس، وللأخوة الذين لديهم أي استفسارات لاتترددوا في طرحها، وشكرا لكم على وقتكم لقراءة الموضوع.