ستعرض هذه المقالة هيكل المستند الذي يعمل معه JavaScript. من خلال امتلاك معرفة عملية عن نموذج كائن المستند المُلخص ، يمكنك كتابة التعليمات البرمجية لـ JavaScript والتي تعمل على أي صفحة ويب.
المقدمة
كيف تعمل صفحات الويب وجافا سكريبت معًا وكيف يمكنها التحدث مع بعضها البعض؟ تكمن الإجابات في فهم كيفية عمل نموذج كائن المستند (DOM).
الغرض من DOM
يقوم DOM بتنظيم محتوى صفحة الويب ويوفر خريطة طريق فيها. يتكون النموذج من العُقد. يتم ترتيب العُقد في تسلسل هرمي يُفضل اعتباره بنية شجرية. يجب أن نكون قادرين على أخذ أي شفرة برمجية بـ HTML وتمثيلها بهذه الطريقة.
على سبيل المثال ، نص هذه الفقرة هو عقدة داخل نموذج كائن المستند. الفقرة هي عقدة أخرى وهي الأصل لعقدة النص. المستند نفسه هو في النهاية عقدة أصلية لكليهما.
يمكننا كتابة JavaScript للعمل على صفحة الويب من خلال تحديد العقد. نظرًا لأن كل جزء من المحتوى عبارة عن عقدة ، فيمكننا حينئذٍ كتابة JavaScript ذي صلة بأي كيان نريد تغييره. ستلاحظ أن هذا مشابه لكيفية عمل CSS: فهو يطبق الأسلوب أو المظهر المرئي على المحتوى باستخدام سمات المُعرّف وفئة عناصر HTML ، تمامًا مثل سلوك JavaScript.
من المهم ملاحظة أن الشفرات البرمجية الخاصة بـ CSS و JavaScript لا توجد في DOM ، ولكن خارجه. كلاهما يعالج محتوى DOM ، بدلاً من أن تكون داخله.
إعادة استخدام التعليمات البرمجية
لماذا تتم إدارة التعليمات البرمجية المصدر لصفحات الويب بهذه الطريقة؟ هناك سببان رئيسيان:
- يتيح تخزين JavaScript في ملفات منفصلة إعادة استخدام الكود بسهولة أكبر. عندما تتم كتابة كود جافا سكريبت في السطر ، بجانب المحتوى الذي يرتبط به ، فيجب نسخه حتى تحدث نفس الوظيفة في مكان آخر.
- يؤدي فصل JavaScript إلى ملف خارجي إلى جعل شفرة المصدر أكثر قابلية للقراءة من خلال إزالة وظيفة صفحة الويب (JavaScript) من المحتوى (HTML).
عقد DOM
تقتصر العقد التي يتم إنشاؤها والتحكم فيها على ما تدعمه مواصفات HTML والمتصفحات. هذا أحد الأسباب التي جعلت إدخال HTML5 لعناصر المستوى الأعلى الجديدة أمرًا مهمًا.
لأغراضنا ، فإن أهم أنواع العقد هي:
- Element
- Attribute
- Text
على الرغم من أن المواصفات تسرد في الواقع اثنا عشر في المجموع.
استخدام نص برمجي لإنشاء العقد في DOM
لغرض العرض التوضيحي البسيط ، سنستخدم JavaScript لإنشاء عنصر معين.
سنبين لك هنا مدى قوة JS من خلال استخدامها لإنشاء واحد من أكثر كائنات صفحات الويب الأساسية شيوعًا ، وهو العنوان.
لمتابعة هذا المثال ، فإن إنشاء خادم افتراضي بالكامل لا يستحق العناء ، لذلك من الأفضل إستخدام Sandbox عبر الإنترنت. ستحتاج إلى تطبيق مصغر للتجربة مثل JSBin. يعد JSBin رائعًا لأنه متعدد الأجزاء ، ويتضمن طريقة لرؤية كل شيء ومعالجته: HTML ، JS ، CSS ، ومعاينة صفحة الويب دفعة واحدة.
(Codepen مشابه ، ومن أجل هذا المثال ، سيعمل بنفس الطريقة.)
يمكن لـ JSBin أيضًا إنشاء عناوين URL بشكل حيوي لتعليمات JS والتي يمكن مشاركتها لاحقًا. إليك المثال الذي أنشأته لهذا الموضوع.
لقد قمت بإعادة إنشاء وإضافة التعليقات التوضيحية للمقتطفات التالية لإنتاج عنوان H1 جديد في body:
مقتطف HTML
مقتطف جافا سكريبت
//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 برمجية حرة مفتوحة المصدر مرخصة تحت رخصتي إم آي تي وجي بي إل.
