Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. Web Development

سلسلة جافا سيكريبت و DOM: الدرس 1

by
Difficulty:IntermediateLength:LongLanguages:

Arabic (العربية/عربي) translation by Maryam Abbas (you can also view the original English article)

مرحبًا بكم في الجزء الأول مما نأمل أن يكون سلسلة واسعة النطاق تغطي الجوانب الأساسية للغة برمجة جافا سكريبت و DOM API.

في حين أن الأطر مثل jQuery، و Prototype و MooTools هي طرق رائعة لقمع أخطاء المتصفح وتسريع التطوير، فإن من المهم معرفة وفهم التقنيات الأساسية. تعتزم هذه السلسلة إخبارك بما تحتاج إلى معرفته حول JavaScript ونموذج كائن المستند (DOM). حتى لو وثقت بمكتبة معينة، فسيظل هذا مفيدًا لك - إن معرفة كيف يعمل شيء ما في الداخل أمر جيد!

مقدمات

جافا سكريبت

جافا سكريبت هي لغة برمجة ديناميكية، مكتوبة بطريقة فضفاضة، تستخدم في العديد من البيئات المختلفة. بالإضافة إلى كونها لغة البرمجة السائدة من جانب العميل، فإنها تستخدم أيضًا لكتابة الإضافات الخاصة بـ IDEs، في ملفات PDF وكأساس لمنصات أخرى ولأفكار تجريدية أعلى.

يعتمد JavaScript على معيار (ECMAScript (ECMA-262 وتم إنشاؤه بواسطة Brendan Eich من Netscape. كان يُطلق عليه في البداية اسم LiveScript ولكنه تمت تسميته لاحقًا إلى JavaScript، وربما كان الهدف الوحيد هوأنه يسبب في حدوث ارتباك.

فيما يلي بعض ميزاته بتفاصيل أكثر:

  • لغات برمجة ديناميكية يتم تنفيذها في وقت التشغيل؛ لم يتم تجميعها. ولهذا السبب، تعتبر جافا سكريبت في بعض الأحيان لغة برمجة ملف بدلاً من لغة برمجة حقيقية (من الواضح أنها فكرة خاطئة). عندما يكون لديك JavaScript في مستند HTML سيتم تحليله أثناء تحميل الصفحة داخل المتصفح، ومن ثم في "وقت التشغيل".
  • اللغات المكتوبة بشكل فضفاض لا تصر على أي نظام كتابة قوي. إذا قمت ببرمجة في لغة C أو Java (ليست هي نفسها لغة JavaScript) فستعلم أنه عند تعيين متغيرعليك تحديد نوع مثل 'int' (عدد صحيح). جافا سكريبت مختلفة في ذلك لا تحتاج إلى تحديد النوع.
  • لتنفيذ الوراثة داخل JavaScript يجب عليك استخدام شيء ما يسمى النماذج الأولية. جافا سكريبت لا يدعم الفئات.
  • JavaScript أيضًا لغة وظيفية. يعامل الوظائف ككائنات من الدرجة الأولى؛ هذه هي الفكرة وراء لامدا.

إن فهم النقاط الواردة أعلاه ليس مهمًا في تعلم جافا سكريبت. إنها مجرد أفكار قليلة لابد من توصيلها إلى دماغك، ويجب أن تساعدك على تمييز JavaScript عن لغات البرمجة الأخرى التي قد تكون لديك خبرة بها.

طراز كائن المستند

طراز كائن المستند، عادة ما يتم اختصاره إلى DOM، هو واجهة برمجة التطبيقات التي تتفاعل من خلالها جافا سكريبت مع المحتوى داخل موقع الويب. غالبًا ما يُنظر إلى جافا سكريبت و DOM ككيان واحد لأن جافا سكريبت الأكثر استخدامًا لهذا الغرض (التفاعل مع المحتوى على الويب). يتم استخدام DOM API للوصول إلى مستندات HTML و XML وعبورها ومعالجتها.

Typical structure of a DOM hierarchy
مخطط أساسي لتسلسل DOM النموذجي (المبسط)

إليك بعض الأشياء الجديرة بالذكر حول DOM:

  • يخدم كائن النافذة ككائن عمومي، يمكنك الوصول إليه بمجرد كتابة "نافذة". من داخل هذا الكائن، يتم تنفيذ جميع شيفرة جافا سكريبت الخاصة بك. مثل جميع الكائنات لديه خصائص وطرق.
    • الخاصية هي متغير مخزّن تحت كائن. جميع المتغيرات التي تم إنشاؤها على صفحة الويب بشكل تلقائي تصبح خصائص كائن النافذة.
    • الطريقة هي وظيفة مخزنة تحت كائن. بما أن جميع الوظائف مخزنة تحت (على الأقل) كائن النافذة، فيمكن الإشارة إليها جميعًا باسم "الطرق".
  • ينشئ DOM تسلسلاً مطابقًا لهيكل كل مستند ويب. يتكون هذا التسلسل الهرمي من العقد. هناك عدة أنواع مختلفة من عقد DOM، أهمها "العنصر" و "النص" و "المستند".
    • تمثل عقدة "العنصر"عنصرًا داخل الصفحة. إذا كان لديك عنصر فقرة ('')، فيمكن الوصول إليه من خلال DOM كعقدة.
    • تمثل عقدة "النص" جميع النصوص (داخل العناصر) داخل الصفحة. لذا إذا كانت فقرتك تحتوي على جزء من النص فيمكن الوصول إليها مباشرة من خلال DOM.
    • تمثل عقدة "المستند" الوثيقة بأكملها. (إنها عقدة الجذر في التسلسل الهرمي لـ DOM / الشجرة).
    • لاحظ أيضًا أن سمات العنصر هي عقد DOM نفسها.
  • يحتوي كل محرك تخطيط على تنفيذ مختلف قليلاً لمعيار DOM. على سبيل المثال، فإن متصفح الويب فايرفوكس، الذي يستخدم محرك تخطيط Gecko، لديه تطبيق جيد (على الرغم من أنه لا يتوافق تمامًا مع مواصفات W3C) إلا أن Internet Explorer، الذي يستخدم محرك تخطيط Trident، يشتهر بتطبيقه ذو العيوب وغير المكتمل؛ مما يسبب الكثير من الألم داخل مجتمع تطوير الويب!

تنزيل Firebug

إذا كنت تستخدم Firefox ولم يكن لديك بالفعل Firebug addon، فأنا أوصي بتنزيله وتثبيته الآن. إنه أداة مفيدة جدًا للحصول على صورة لائقة عن هيكل المستند بأكمله.

 JavaScript على الويب

عنصر النص

عندما تريد استخدام JavaScript على موقع الويب يجب تضمينه في عنصر نصي:

كما ترى لدينا عنصر نصي في أسفل المستند. يجب تعيين سمة النوع بشكل صارم على "application / javascript"، ولكن دون لا تتفاجئ في أنها لا تعمل في Internet Explorer، لذا فإننا نتعامل إما مع "text / javascript" أو لا توجد سمة نوع على الإطلاق. إذا كنت مهتمًا بالتحقق من الصحة، فربما يكون الاقتراح السابق مناسبًا لك.

Specify CDATA if you're using XHTML

تذكر أن تحدد البرامج النصية الخاصة بك كما CDATA!

ستلاحظ أيضًا أنه ضمن عنصر النص البرمجي هذا لدينا سطرين من خطوط التعليق. هذه تبلغ المتصفحات التي تدعم XHTML أن محتوى عنصر SCRIPT هو "بيانات حروف" ويجب ألا يتم تفسيره على أنه ترميز XHTML. هذا ضروري فقط إذا كنت تخطط لاستخدام الأحرف "<" أو ">" في شفرة جافا سكريبت الخاصة بك. من الواضح أنه يمكنك نسيان كل هذا إذا كنت تستخدم HTML عادي.

سمة التأجيل

سيتم تشغيل أي JavaScript يتم تضمينه داخل عنصر SCRIPT هذا عند تحميل الصفحة. الاستثناء الوحيد هو عندما يكون لعنصر SCRIPT سمة "تأجيل". بشكل افتراضي، عندما يستوفي أحد المستعرضات عنصر SCRIPT، فإنه يتوقف عن تشغيل الشيفرة، ثم يستمر في تحليل المستند. تقوم السمة تأجيل بإعلام المستعرض بأن الشيفرة لا تحتوي على أي كود يغير الوثيقة، وبالتالي يمكن تشغيله لاحقًا. المشكلة الوحيدة في هذا أنها تعمل فقط في IE، لذا من الأفضل تجنب هذه الخاصية.

ربط النصوص الخارجية

إذا كنت تريد الارتباط بملف برنامج نصي خارجي، فقم ببساطة بإضافة سمة SRC إلى عنصر SCRIPT تتوافق مع موقعه. من الأفضل عادةً أن يكون لديك ملفات نصية منفصلة بدلاً من كتابة التعليمات البرمجية المضمنة لأنه يعني أن المستعرض يمكنه تخزين الملف مؤقتًا. بالإضافة إلى أنك لا داعي للقلق بشأن أي من هراء CDATA:

أساسيات JavaScript

قبل أن نستمر في DOM من المستحسن أن يكون لديك فهم أساسي لبعض أساسيات JavaScript. إذا واجهتك مشكلة في فهم بعض هذه الأشياء، فلا داعي للقلق - ستلتقطها في النهاية!

في JavaScript يمكن أن يكون لديك أنواع مختلفة من القيم. هناك أرقام، سلاسل، قيم منطقية، كائنات، غير محددة وأصفار:

تتم كتابة التعليقات ذات السطر الواحد باستخدام الشريطتين المائلتين (//)، ويفترض أن يكون كل النص المتبقي على هذا السطر بمثابة تعليق بواسطة المحلل اللغوي. يتم تدوين التعليقات متعددة الأسطر باستخدام "/ *" و "* /" لإنهاء التعليق.

الأعداد

في JavaScript يتم تمثيل جميع الأرقام كقيم عائمة. عند تحديد متغير الأرقام تذكر أن لا تغطيه بأي علامات اقتباس.

السلاسل

يتم أخذ أي سلسلة تحددها حرفيًا، ولن تعالجها جافا سكريبت. السلسلة عبارة عن سلسلة من أحرف موحدة التشفير ويجب تغليفها في زوج متطابق من علامات الاقتباس الفردية أو المزدوجة.

القيم المنطقية

تعتبر الأنواع المنطقية مفيدة عندما تريد تقييم حالة - لمعرفة ما إذا كانت تفي بمعايير محددة. لا يوجد سوى قيمتين منطقيتين محتملتين: حقيقي و مزيف. أي مقارنة، باستخدام عوامل تشغيل منطقية، ستؤدي إلى قيمة منطقية.

إن '===' التي تراها أعلاه هي مشغل مقارنة، سنقوم بتغطيتها لاحقًا.

الدالات

الدالة هي كائن متخصص:

المصفوفات

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

الكائنات

الكائن عبارة عن مجموعة من القيم المسماة (أزواج المفتاح - القيمة). تشبه المصفوفة، الاختلاف الوحيد هو أنه يمكنك تحديد اسم لكل قيمة بيانات.

عبارة If/else

واحدة من أكثر التركيبات شيوعًا في JavaScript هي عبارة 'IF' / 'ELSE'. إنه شيء مثل هذا:

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

بدلاً من إدراجهم جميعًا هنا أقترح عليك زيارة مقالة MDC حول المشغلات. إنها تشرحها بكثير من التفاصيل. لقد قمت بإعداد بعض الأمثلة لإعطائك فكرة عن كيفية استخدام بعض المشغلات أدناه:

الحلقات

التكرارمفيد عندما تحتاج إلى المرور عبر كافة العناصر في مصفوفة أو كافة أعضاء الكائن. الطريقة الأكثر شيوعًا للتكرار في JavaScript هي استخدام عبارة FOR أو WHILE.

About the FOR loop in JavaScript

حلقات FOR هي الحلقات الأكثر شعبية من خلال المصفوفات.

العودة إلى DOM

الوصول إلى عقد DOM

لنفترض أن لدينا مستند XHTML أساسي يحتوي على فقرة وقائمة غير مرتبة:

في هذا المثال الأول سنقوم بالوصول إلى فقرتنا باستخدام طريقة DOM "getElementById":

(يدخل هذا الرمز داخل عنصر SCRIPT في النموذج أعلاه).

يعد المتغير 'introParagraph' الآن مرجعًا لعقدة DOM. يمكننا القيام بعدد من الأشياء باستخدام هذه العقدة ، - يمكننا الاستعلام عن محتواها وسماتها،ويمكننا التلاعب بأي جانب من جوانبها. يمكننا إزالته أو استنساخه أو نقله إلى أجزاء أخرى من شجرة DOM.

أي شيء موجود داخل مستند يمكننا الوصول إليه باستخدام JavaScript و DOM API. لذا، قد نرغب في الوصول إلى القائمة غير المرتبة بطريقة مماثلة، والمشكلة الوحيدة هي أنه ليس لديها معرف. يمكنك تقديم معرف له ثم استخدام نفس الطريقة المذكورة أعلاه أو يمكننا الوصول إليه باستخدام" الحصول على العناصر بواسطة أسم الوسم ":

الحصول على العناصر بواسطة أسم الوسم

ترجع طريقة 'الحصول على العناصر بواسطة أسم الوسم 'إلى قائمة / مجموعة العقدة مباشرة. إنها مشابهة للمصفوفة في أنها تحتوي على خاصية الطول. من المهم ملاحظة أن هذه المجموعات "نشطة" - إذا أضفت عنصرًا جديدًا إلى DOM، فستقوم المجموعة بتحديث نفسها. نظرًا لأنها كائن يشبه المصفوفة، يمكننا الوصول إلى كل عقدة عبر دليل، من 0 إلى إجمالي طول المجموعة (ناقص 1):

Accessing nodes and attributes within the DOM

الوصول إلى العقد والسمات داخل DOM

عبور DOM

يستخدم مصطلح "العبور" لوصف عمل الانتقال عبر DOM، والعثورعلى العقد. تقدم لنا واجهة برمجة التطبيقات (API) الكثير من خصائص العقدة التي يمكننا استخدامها للتحرك لأعلى ولأسفل من خلال جميع العقد داخل الوثيقة.

هذه الخصائص مضمنة في جميع العقد وتمكنك من الوصول إلى العقد ذات الصلة / المغلقة:

  • Node.childNodes: يمكنك استخدام هذا للوصول إلى كافة العقد التابعة المباشرة لعنصر واحد. ستكون كائنًا شبيهًا بالمصفوفة، والذي يمكنك التكرار من خلاله. تتضمن العقد داخل هذا المصفوفة جميع أنواع العقدة المختلفة بما في ذلك العقد النصية وعقد العناصر الأخرى.
  • Node.firstChild: هذا هو نفس الوصول إلى العنصر الأول في مصفوفة "childNode" ('Element.childNodes [0]'). انها مجرد اختصار.
  • Node.lastChild: هذا هو نفس الوصول إلى العنصر الأخير في المصفوفة'childNode' ('Element.childNodes [Element.childNodes.length-1]'). انها مجرد اختصار.
  • Node.parentNode: يتيح لك هذا الوصول إلى العقدة الأب للعقدة الحالية لديك. لن يكون هناك سوى عقدة أب واحدة. من أجل الوصول إلى الأجداد، يمكنك ببساطة استخدام "Node.parentNode.parentNode" وما إلى ذلك.
  • Node.nextSibling: يتيح لك هذا الوصول إلى العقدة التالية على نفس المستوى داخل شجرة DOM.
  • Node.previousSibling: يتيح لك هذا الوصول إلى العقدة الأخيرة على نفس المستوى داخل شجرة DOM.
Traversing the DOM

عبور مستند (مبسطة - يرجى قراءة أدناه)

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

شيء واحد يجب ملاحظته حول الرسم أعلاه: يمكن استرداد عناصر القائمة بهذه الطريقة فقط إذا لم يكن هناك مسافة بيضاء بينهما. نظرًا لأنه يمكن أن يكون لديك عقد نصية وعقد عناصر في مستند، فإن المسافة بين '' وأول '' يتم احتسابها بالفعل كعقدة في حد ذاتها. وبالمثل فإن القائمة غير المرتبة ليست في الواقع الشقيقة التالية للفقرة - بما أنه يوجد في سطر جديد فراغ بين العنصرين - وبالتالي، عقدة أخرى! عادة، ما ستفعله في هذا الموقف هو الحلقة خلال مصفوفة "childNode" واختبار "نمط العقدة". نمط العقدة" 1 تعني أنه عنصر، 2 تعني أنه سمة، 3 تعني أنه عقدة نصية. يمكنك الاطلاع على القائمة الكاملة هنا: https://developer.mozilla.org/En/DOM/Node.nodeType.

هذا كل ما هو!

هذه هي الطريقة التي تعمل بها جميع مكتبات جافا سكريبت الرئيسية وراء الكواليس؛ باستخدام أساليب وخصائص DOM الأصلية لتمنحك الوصول إلى هذه العناصر من خلال تجريد مصقول لطيف. ما يفصلك عن إطار العمل هو أن لديك الآن فكرة عن كيفية البقاء دون إطار (إذا لم تكن قد فعلت)!

والى اللقاء التالي

`حسنا، هذا هو الجزء الأول. آمل أن تكون قد تعلمت شيئًا عن جميع هذه الامور المشتتة. في الجزء التالي من السلسلة، نأمل أن نركز على بعض الأمثلة الأكثر قابلية للتطبيق ؛ من المحتمل أن نغطي نموذج حدث المتصفح أيضًا.

`في الوقت الحالي وإذا لم تكن قد قمت بالفعل بالتحقق من هذه المحادثات من قبل دوج كروكفورد (موقع ياهو!):

شكرا للقراءة!

  • اشترك في NETTUTS RSS Feed لمزيد من المقتنيات اليومية لتطوير الويب والمقالات.


Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.