جافا سكريبت وتطوير الويب: استخدام نموذج كائن المستند (DOM)

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

dom MCHCSFfs DzTechs - جافا سكريبت وتطوير الويب: استخدام نموذج كائن المستند (DOM)

المقدمة

كيف تعمل صفحات الويب وجافا سكريبت معًا وكيف يمكنها التحدث مع بعضها البعض؟ تكمن الإجابات في فهم كيفية عمل نموذج كائن المستند (DOM).

الغرض من DOM

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

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

428px DOM model.svg  eUACSFfs DzTechs - جافا سكريبت وتطوير الويب: استخدام نموذج كائن المستند (DOM)

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

من المهم ملاحظة أن الشفرات البرمجية الخاصة بـ CSS و JavaScript لا توجد في DOM ، ولكن خارجه. كلاهما يعالج محتوى DOM ، بدلاً من أن تكون داخله.

ذات صلة:  موارد مفيدة لتعلم نظام Linux بالطريقة التي تناسبك

إعادة استخدام التعليمات البرمجية

لماذا تتم إدارة التعليمات البرمجية المصدر لصفحات الويب بهذه الطريقة؟ هناك سببان رئيسيان:

  • يتيح تخزين JavaScript في ملفات منفصلة إعادة استخدام الكود بسهولة أكبر. عندما تتم كتابة كود جافا سكريبت في السطر ، بجانب المحتوى الذي يرتبط به ، فيجب نسخه حتى تحدث نفس الوظيفة في مكان آخر.
  • يؤدي فصل JavaScript إلى ملف خارجي إلى جعل شفرة المصدر أكثر قابلية للقراءة من خلال إزالة وظيفة صفحة الويب (JavaScript) من المحتوى (HTML).

عقد DOM

تقتصر العقد التي يتم إنشاؤها والتحكم فيها على ما تدعمه مواصفات HTML والمتصفحات. هذا أحد الأسباب التي جعلت إدخال HTML5 لعناصر المستوى الأعلى الجديدة أمرًا مهمًا.

لأغراضنا ، فإن أهم أنواع العقد هي:

  • Element
  • Attribute
  • Text

على الرغم من أن المواصفات تسرد في الواقع اثنا عشر في المجموع.

DOM social01 kgoDSFfs DzTechs - جافا سكريبت وتطوير الويب: استخدام نموذج كائن المستند (DOM)

استخدام نص برمجي لإنشاء العقد في DOM

لغرض العرض التوضيحي البسيط ، سنستخدم JavaScript لإنشاء عنصر معين.

سنبين لك هنا مدى قوة JS من خلال استخدامها لإنشاء واحد من أكثر كائنات صفحات الويب الأساسية شيوعًا ، وهو العنوان.

لمتابعة هذا المثال ، فإن إنشاء خادم افتراضي بالكامل لا يستحق العناء ، لذلك من الأفضل إستخدام Sandbox عبر الإنترنت. ستحتاج إلى تطبيق مصغر للتجربة مثل JSBin. يعد JSBin رائعًا لأنه متعدد الأجزاء ، ويتضمن طريقة لرؤية كل شيء ومعالجته: HTML ، JS ، CSS ، ومعاينة صفحة الويب دفعة واحدة.

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

(Codepen مشابه ، ومن أجل هذا المثال ، سيعمل بنفس الطريقة.)

يمكن لـ JSBin أيضًا إنشاء عناوين URL بشكل حيوي لتعليمات JS والتي يمكن مشاركتها لاحقًا. إليك المثال الذي أنشأته لهذا الموضوع.

لقد قمت بإعادة إنشاء وإضافة التعليقات التوضيحية للمقتطفات التالية لإنتاج عنوان H1 جديد في body:

مقتطف HTML

prism html js 670x219 NjBCSFfs DzTechs - جافا سكريبت وتطوير الويب: استخدام نموذج كائن المستند (DOM)

مقتطف جافا سكريبت

//declare a new variable to hold a new h1 element

var newHeading = document.createElement("h1");

//add the text node to the document

var h1Text = document.createTextNode("Heading Level 1");

//make it a child node of the new heading

newHeading.appendChild(h1Text);

//append this as a child of element defined as "bt"

document.getElementById("bt").appendChild(newHeading);

مما يُنشئ عنصر H1 جديد ومحتواه تابع مباشرة للوسم <body>.

لاحظ أن HTML المصدر في الجزء الأيمن لا يتغير. هذا الرمز سهل القراءة إلى حد ما في هذا المثال. في تعليمات Javascript المتقدمة ، يمكن أن تصبح الأمور أكثر تعقيدًا.

التعرف قليلًا على بنية المفردات لجافا سكريبت

المقتطف أعلاه يحمل بعض الشرح.

ينشئ var متغيرًا ، يقوم بتخزين قيمة عشوائية لاستخدام التعليمات البرمجية الخاصة بك.

= هو عامل التعيين. يعمل هنا باستخدام المصطلح var واسم المتغير الجديد (على سبيل المثال ، newHeading) لتشكيل متغير كامل.

object.method هو استدعاء يستخدم بناء الجملة “dot” لفصل الكائنات ، مثل المستند ، عن الطرق المستخدمة فيما يتعلق بها ، كما في getElementById.

يستحق مفهوم “objects” في البرمجة الكثير من النقاش وهو خارج نطاق هذه المقالة. يكفي أن نقول إنها مكونات مهمة للتطبيق الخاص بك.

ذات صلة:  نصائح و طرق سهلة و مثالية لتعلم برمجة و تطوير مواقع الويب

Methods هي ما تتوقعه: إجراء معين أو إجراء مخطط يمكن تطبيقه على الكائنات.

من المؤكد أننا قمنا بتغطية الكثير من الموارد الرائعة لتعلم جافا سكريبت. تحقق مرة أخرى في قسم البرمجة لدينا لمزيد من المعلومات.

ماذا بعد

واحدة من الأطر الأكثر شعبية التي تستخدم JavaScript هي JQuery. إنها أساس مهم لأحدث تكرار لصفحات الويب والتطبيقات الغنية ، وهي المكان الذي قد ترغب في البدء فيه بعد ذلك.

JQuery هي مكتبة خاصة بالجافا سكريبت، تقوم باختصار العديد من النصوص البرمجية المكررة والمهام المعروفة، وذلك لتسهيل عملية البرمجة. JQuery برمجية حرة مفتوحة المصدر مرخصة تحت رخصتي إم آي تي وجي بي إل.

اشترك في نشرتنا الإخبارية
اشترك هنا للحصول على آخر الأخبار والتحديثات والعروض الخاصة التي يتم تسليمها مباشرة إلى البريد الإلكتروني الخاص بك.
يمكنك إلغاء الاشتراك في أي وقت
قد يعجبك ايضا

This website uses cookies to improve your experience. We'll assume you're ok with this, but you can opt-out if you wish. AcceptRead More