الإعلانات

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

المقدمة

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

الغرض من DOM

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

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

وثيقة نموذج كائن التوضيح
صورة الائتمان: بيرغر إريكسون عبر ويكيميديا ​​كومنز

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

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

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

إعادة استخدام الرمز

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

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

عقد DOM

تقتصر العقد التي تنشئها وتحكم فيها على ما تدعمه مواصفات HTML والمتصفحات. هذا سبب واحد لذلك كان إدخال HTML5 لعناصر المستوى الأعلى الجديدة أمرًا مهمًا ما هو HTML5 ، وكيف يغير الطريقة التي أستعرضها؟ [يشرح MakeUseOf]خلال السنوات القليلة الماضية ، ربما تكون قد سمعت مصطلح HTML5 كل مرة من حين إلى آخر. سواء كنت تعرف أي شيء عن تطوير الويب أم لا ، فقد يكون المفهوم غامضًا ومربكًا إلى حد ما. بوضوح،... اقرأ أكثر .

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

  • جزء
  • ينسب
  • نص

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

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

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

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

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

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

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

لقد قمت بإعادة إنتاج وتعليق المقتطفات التالية لإنتاج عنوان H1 جديد في الجسم:

  • مقتطف HTMLمقتطف HTML به علامات مميزة للاستخدام مع العرض التوضيحي لطراز كائن المستند
  • مقتطف جافا سكريبت
    / / قم بتعريف متغير جديد للاحتفاظ بعنصر h1 جديد var newHeading = document.createElement ("h1")؛ // أضف العقدة النصية إلى المستند var h1Text = document.createTextNode ("عنوان المستوى 1") ؛ // اجعلها عقدة تابعة للعنوان الجديد newHeading.appendChild (h1Text) ؛ / / إلحاق هذا كطفل عنصر المعرّفة كـ "bt" document.getElementById ("bt"). appendChild (newHeading)؛

مما يخلق عنصر H1 جديد ومحتواه تابع مباشرة لـ

علامة الافتتاح.

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

قليلا عن هيكل المعجم لجافا سكريبت

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

  • فار ينشئ متغيرًا ، يقوم بتخزين قيمة عشوائية لاستخدام التعليمات البرمجية الخاصة بك.
  • = هو مشغل المهمة. هنا تعمل مع فار مصطلح واسم المتغير الجديد (على سبيل المثال ، newHeading) لتشكيل إعلان كامل.
  • object.method هو استدعاء يستخدم بناء الجملة "نقطة" لفصل الكائنات ، مثل وثيقة، من الأساليب المستخدمة فيما يتعلق بهم ، كما هو الحال في getElementById.
    • مفهوم "الأشياء" في البرمجة من أين حصلت برمجة الكائنات؟الكائنات الموجهة ليست مجرد كلمة طنانة عشوائية تسمعها في دوائر البرمجة. هناك سبب وراء الاسم - لكن ماذا؟ انضم إليّ وأنا أستكشف بعض أساسيات مفاهيم البرمجة وشرح ... اقرأ أكثر يستحق الكثير من النقاش وهو خارج نطاق هذه المقالة. يكفي أن نقول إنها مكونات مهمة للتطبيق الخاص بك.
    • الطرق هي ما تتوقعه: إجراء معين أو إجراء مخطط يمكن تطبيقه على الكائنات.

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

ماذا بعد

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

هل ساعدتك هذه المقالة على معرفة المزيد حول بدء JavaScript؟ لديك نهج مختلف؟ نريد أن نسمع منك في التعليقات أدناه!

صورة الائتمان: Imagentle عبر Shutterstock.com

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