الفرق بين الجافاسكربت والDOM والDHTML؟

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

الفرق بين الجافاسكربت والDOM والDHTML؟

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

إذا ماهي الDHTML؟

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

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

ما هو الDOM؟

اختصار لكلمة Document @-X-@@-X-@@-X-@@-X-@@-X-@@-X-@ Model وهي API أو وصلة تطبيق برمجي لملفات الHTML والXML التي تتيح هيكلة الملف وتقسيمه، ومن ثم يمكنك أن تحدد أي @-X-@@-X-@@-X-@@-X-@@-X-@@-X-@ من ذلك الملف والتعديل عليه من ناحية النص أو الشكل أو لون الخلفية ... الخ. باختصار شديد هي حلقة الوصل بين الDHTML والجافاسكربت.
معنى ال@-X-@@-X-@@-X-@@-X-@@-X-@@-X-@s أي أن كل ما يضيفه مصمم الويب من صور وجدوال ونص وماخلافه يكون @-X-@@-X-@@-X-@@-X-@@-X-@@-X-@s، ويمكنك تحديد أي @-X-@@-X-@@-X-@@-X-@@-X-@@-X-@ في صفحتك والدخول إليه لتغير خصائصه عن طريق الDOM.
والDOM تستعمل غالبا مع الجافاسكربت، ولكنها ليست جزء من اللغة نفسها فقد تم تصميم الDOM ليكون إضافاة للغات البرمجة وليس ليستعمل مع لغة الجافاسكربت فقط، وهنا أحب أن أوضح نقطه قد يكون أكثر من 90% من مصممي الويب غافل عنها وهي أن الحركات التفاعلية وتغير الألوان يكون بالجافاسكربت DOM وليس بالجافاسكربت لوحدها.
أمثلة لاستخدامات الDOM في لغات البرمجة الأخرى: لغة ال[عزيزى الزائر مرحبا بكم سجل معنا ليظهر الرابط. ]
سأوضح كلامي السابق بمثال، لنفترض أنك أنشأت صفحة ويب HTML وكان فيها عنصر div أو img وأردت عندما يقوم الزائر بالضفط على زر في الصفحة أن تتغير لون خلفية هذا العنصر اللذي أضفناه، فوسيلتك الوحيدة للدخول إلى هذا العنصر وتغير خلفيته هو بالجافاسكربت DOM.

كيفية استخدام الجافاسكربت DOM؟

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

var anchorTags =

لتعريف المتغير في الجافاسكربت

كود PHP:

 document.getElementsByTagName("a") 


الdocument ومن تعريف الw3c له هو الصفحة الكاملة التي تحتوي على كل شيء من صور وخلافه، والدالة getElementsByTagName تبحث عن كل الأوسمة التي في الdocument أو الصفحة وأي وسم يطابق المعطيات لهذه الدالة سوف يتم تخزينه في المتغير أعلاه، وهذا من خصائص وتعاريف الDOM</H5>
For-Loop

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

anchorTags.length

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

anchorTags[i].href

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

المراجع

[عزيزى الزائر مرحبا بكم سجل معنا ليظهر الرابط. ]

الخلاصة

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

مع تحياتي