في هذا الفصل، سنعمل على وضع البرامج النصية في مستند HTML حتى نتمكن من استخدامها لتعديل مستند HTML بسرعة. لإدراج تعليمات برمجية JavaScript في صفحة HTML، يتم عادةً استخدام العنصر.

البرنامج الأول

لكي يتم تشغيل برنامج JavaScript (أو البرنامج النصي) الأول لديك، يجب تضمينه في مستند HTML.
يتم تضمين البرامج النصية في مستند HTML بعدة طرق قياسية:

• ضع الكود مباشرة في سمة الحدث لعنصر HTML؛
• ضع الكود بين علامتي الفتح والإغلاق؛
• ضع كل نصوصك البرمجية في ملف خارجي (بامتداد .js) ثم اربطه بمستند HTML.

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

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

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

هذا مستند HTML عادي

نخرج مرة أخرى إلى HTML

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

JavaScript في سمات حدث عنصر HTML

تم تنفيذ البرنامج النصي أعلاه عند فتح الصفحة وإخراج السلسلة: "Hello, World!" ومع ذلك، لا تريد دائمًا أن يبدأ تشغيل البرنامج النصي فورًا عند فتح الصفحة. في أغلب الأحيان، تريد تشغيل برنامج عند وقوع حدث معين، مثل عند الضغط على زر.

يضع المثال التالي وظيفة JavaScript في قسم من مستند HTML. فيما يلي مثال لعنصر HTML مع سمة حدث تستجيب لنقرات الماوس. عند النقر على الزر، يتم إنشاء حدث onclick.

مرحبا بالعالم!

انقر فوق لي

جافا سكريبت الخارجية

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

لتضمين كود JavaScript من ملف خارجي في مستند HTML، يتعين عليك استخدام سمة src (المصدر) للعلامة. يجب أن تكون قيمته عنوان URL للملف الذي يحتوي على كود JS:

يحدد هذا المثال المسار المطلق إلى ملف يسمى script.js يحتوي على البرنامج النصي (من جذر الموقع). يجب أن يحتوي الملف نفسه على تعليمات برمجية JavaScript فقط، والتي قد تكون موجودة بين العلامات و.

قياسا على العنصر يمكن تعيين عنوان URL كامل للسمة src لعنصر ما، وهو غير مرتبط بمجال صفحة HTML الحالية:

لتوصيل نصوص برمجية متعددة، استخدم علامات متعددة:

...

ملاحظة: لا يمكن أن يحتوي العنصر الذي يحتوي على السمة src على تعليمات برمجية Javascript إضافية بين العلامات و، على الرغم من تنفيذ البرنامج النصي الخارجي، يتم تجاهل التعليمات البرمجية المضمنة.

إذا كانت السمة src موجودة، فسيتم تجاهل الجزء الداخلي من علامة البرنامج النصي!

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

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

ملاحظة: يتم نسخ كود JavaScript فقط إلى الملفات الخارجية دون تحديد علامتي الفتح والإغلاق و.

موقع العلامة

أنت تعلم بالفعل أن المتصفح يقرأ مستند HTML من الأعلى إلى الأسفل ويبدأ في عرض الصفحة، ويعرض جزء المستند حتى ملف . عندما يواجه علامة، فإنه يتحول إلى وضع JavaScript وينفذ البرنامج النصي. عند الانتهاء، يعود مرة أخرى إلى وضع HTML ويعرض بقية المستند.

ويتضح ذلك بوضوح من خلال المثال التالي. يعرض أسلوب التنبيه () نافذة مشروطة تحتوي على رسالة ويوقف تنفيذ البرنامج النصي مؤقتًا حتى ينقر المستخدم على "موافق":

بداية المحتوى...

استمرار المحتوى

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

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

نصوص كسولة وغير متزامنة

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

بعض النص... لن يتم عرض هذا النص حتى يقوم المتصفح بتنفيذ script.js.

في هذا المثال، حتى يقوم المتصفح بتنزيل script.js وتنفيذه، فلن يُظهر الجزء من الصفحة الموجود أسفله. يُطلق على سلوك المتصفح هذا اسم "متزامن" ويمكن أن يسبب مشاكل إذا قمنا بتحميل ملفات JavaScript متعددة على الصفحة، لأنه يزيد من وقت العرض.

ماذا لو كان مستند HTML لا يعتمد فعليًا على ملفات JS هذه، ولكن المطور يريد التحكم في كيفية تحميل الملفات الخارجية وتنفيذها؟

ستساعد سمات العنصر غير المتزامن والتأجيل في حل مشكلة تحميل البرامج النصية بشكل جذري.

سمة غير متزامنة

يتم استخدام Async للإشارة إلى المتصفح أنه يمكن تنفيذ البرنامج النصي "بشكل غير متزامن".

عند اكتشاف علامة، لا يتوقف المتصفح عن معالجة مستند HTML لتنزيل البرنامج النصي وتنفيذه؛ يمكن أن يحدث التنفيذ بعد استلام البرنامج النصي بالتوازي مع تحليل المستند. عندما يتم تحميل البرنامج النصي، سيتم تنفيذه.

لا يتم ضمان تنفيذ البرامج النصية ذات السمة غير المتزامنة بالترتيب الذي تمت إضافتها به، على سبيل المثال:

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

ملاحظة: يتم استخدام السمة غير المتزامنة إذا كنت تريد السماح للمتصفح بمواصلة تحميل الصفحة دون انتظار اكتمال التنزيل وتنفيذ البرنامج النصي.

تأجيل السمة

تقوم سمة التأجيل بتأجيل تنفيذ البرنامج النصي حتى يتم تحميل صفحة HTML بأكملها بالكامل.

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

على الرغم من أنه في المثال أعلاه، تم تضمين العلامات في عنصر مستند HTML، فلن يبدأ تنفيذ البرامج النصية حتى يصل المتصفح إلى علامة الإغلاق.

بالإضافة إلى ذلك، على عكس غير المتزامن، سيتم الحفاظ على الترتيب النسبي لتنفيذ البرامج النصية مع سمة التأجيل.

يعد استخدام سمة التأجيل مفيدًا عندما يتضمن كود البرنامج النصي العمل مع مستند HTML، ويجب على المطور التأكد من استلام الصفحة بالكامل.

ملحوظة: السمتان غير المتزامنة والتأجيل مدعومتان فقط لملفات البرامج النصية الخارجية، مثل ملفات البرامج النصية الخارجية. تعمل فقط في حالة وجود سمة src.

نتائج

• يمكن إضافة JavaScript إلى مستند HTML باستخدام عنصر بطريقتين:
  • حدد برنامجًا نصيًا مضمّنًا يقع مباشرةً بين زوج العلامات.
  • قم بتوصيل ملف خارجي باستخدام كود JavaScript عبر .
• إذا تم استخدام كود JavaScript في عدة صفحات، فمن الأفضل تضمينه كبرنامج نصي خارجي. وهذا يسهل إلى حد كبير صيانة التعليمات البرمجية وتحريرها، كما يسرع أيضًا تحميل ومعالجة صفحات الويب - يتم تحميل البرنامج النصي الخارجي بواسطة المتصفح مرة واحدة فقط (سيتم استرجاعه لاحقًا من ذاكرة التخزين المؤقت للمتصفح).
• تشير سمة التأجيل إلى المتصفح بأن تحميل البرنامج النصي يمكن أن يبدأ على الفور، ولكن يجب تأخير التنفيذ حتى يتم تحميل مستند HTML بأكمله.
• في الحالات التي يحتوي فيها ملف البرنامج النصي على وظائف تتفاعل مع مستند HTML الذي يتم تحميله، أو عندما يكون هناك تبعية لملف آخر على الصفحة، يجب تحميل مستند HTML بالكامل قبل تنفيذ البرنامج النصي. كقاعدة عامة، يتم وضع هذا الرابط لبرنامج JavaScript النصي في أسفل الصفحة قبل علامة الإغلاق للتأكد من تحليل المستند بأكمله حتى يعمل. ومع ذلك، في الحالة التي يجب فيها، لسبب ما، وضع ملف JS في مكان آخر من المستند، يمكن أن تكون سمة التأجيل مفيدة.
• تحافظ سمة التأجيل على الترتيب النسبي لتنفيذ البرنامج النصي، بينما لا يحافظ المزامنة على ذلك.
• يتم تنفيذ البرنامج النصي ذو السمة غير المتزامنة بشكل غير متزامن مع معالجة الصفحة؛ عند تحميل البرنامج النصي، سيتم تنفيذه حتى لو لم يكن مستند HTML جاهزًا تمامًا بعد.
• بالنسبة لملفات JS التي لا تعتمد على ملفات أخرى، ستكون السمة async مفيدة للغاية. وبما أننا لا نهتم عند تنفيذ البرنامج النصي، فإن التحميل غير المتزامن هو الخيار الأنسب.

مهام

• نافذة منبثقة

  هنا وثيقة HTML بسيطة. ضع برنامجًا نصيًا في نص صفحة HTML التي تعرض نافذة منبثقة تقول: "مرحبًا جافا سكريبت!"

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

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

ما هو البرنامج النصي؟

لن أصف أي مفاهيم تقنية وذكية. لقد عرفنا جميعًا منذ فترة طويلة ما هو HTML وأنه ضروري لإنشاء إطار عمل لموقع الويب. ولكن بالإضافة إلى الإطار، لإنشاء موقع ويب، يجب تهيئته وتصميمه بطريقة مناسبة. يمكن لـ CSS مساعدتنا في هذا. وهناك حاجة إلى البرامج النصية لتوسيع وظائف المواقع. بشكل عام، لإضافة ديناميات إلى موقعنا.

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

البرامج النصية في HTML.

في حالتنا، سنستخدم علامتي HTML اللتين ستساعداننا في ربط البرامج النصية.

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

تهدف علامة HTML إلى إعلام زائر الصفحة بأن دعم البرنامج النصي معطل في متصفحه أو غير موجود على الإطلاق. وهذا يعني أنه لن يتمكن من استخدام الوظائف الكاملة للصفحة التي يوجد بها.

ربط البرنامج النصي. كيفية إدراج برنامج نصي في HTML؟ (جميع خيارات الاتصال)

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

ربط البرنامج النصي من خادم آخر.

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

في هذا المثال، سنقوم بتضمين دعم jQuery في وثيقتنا. الملف الذي يحتوي على البرامج النصية موجود على خادم Google ولتوصيله نحتاج فقط إلى الإشارة إلى العنوان الصحيح لموقع الملف. تجدر الإشارة أيضًا هنا إلى أنه عند استخدام علامة، يجب علينا استخدام سمة نوع HTML، والتي ستساعد في الإشارة إلى متصفح الويب نوع المستند الذي ينتمي إليه الملف المضمن.

لذلك، للاتصال، انتقل إلى صفحة مطوري Google. لتسهيل عملية البحث، إليك الرابط: https://developers.google.com/speed/libraries/devguide#jquery. ثم نقوم ببساطة بنسخ الكود بشيء من هذا القبيل في مستند HTML الخاص بنا:

قد يختلف إصدار المكتبة.

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

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

توصيل البرنامج النصي من الخادم الخاص بنا.

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

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

يمكنك تنزيل ملف البرنامج النصي نفسه على صفحة المواد الإضافية لدورة الفيديو في هذه الصفحة.

تظهر كيفية التحقق من تشغيل البرنامج النصي في مقطع الفيديو.

تضمين برنامج نصي في مستند HTML. كيفية إدراج برنامج نصي في HTML؟

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

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

$(function() ( $(".map").maphilight(); $("#squidheadlink").mouseover(function(e) ( $("#squidhead").mouseover(); )).mouseout( function(e) ( $("#squidhead").mouseout(); )).click(function(e) ( e.preventDefault(); )); ));

وبعد ذلك يجب إدراجه بين العلامات. أي أنه يمكننا إضافة بعض الوظائف الفردية مباشرةً إلى مستند HTML قبل العلامة:

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

علامة HTML.

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

السيناريو الخاص بك لا يعمل ...

يجب تضمين هذه العلامة بعد علامة الفتح.

درس فيديو: ربط البرامج النصية في HTML. قم بتشغيل الإضاءة الخلفية لخريطة الصورة.

يمكن ويجب تنزيل دليل HTML والمواد الأخرى!

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

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

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

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

دعونا نحاول نقل برنامجنا، الذي يتكون من سطر واحد من التعليمات البرمجية، إلى ملف خارجي وتضمين هذا الملف. لنسمي هذا الملف، على سبيل المثال، scripts.js:

جافا سكريبت. بداية سريعة

تنبيه("مرحبا!");

إذا قمنا الآن بتحديث الصفحة، فلن يتغير شيء، وسيعمل البرنامج النصي الخاص بنا وسيظل يعرض نافذة مشروطة مع التحية.

جافا سكريبت. بداية سريعة

تعلم أساسيات JavaScript من خلال مثال عملي لكيفية إنشاء تطبيق ويب.

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

لنحاول نقل الاتصالات بين علامات الرأس:

ماذا نرى؟ لا شيء سوى نافذة مشروطة. لا يوجد محتوى. هذا هو بيت القصيد. عند تضمين برنامج نصي خارجي في بداية المستند، يبدأ المتصفح في تنزيله ويحاول تنفيذه. وحتى يتم الانتهاء من تحميل وتنفيذ البرنامج النصي، لن يعرض المتصفح الجزء من المستند الذي يلي الملف المضمن.

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

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

< ! -- вариант1 -- > < ! -- вариант2 -- >

وفي كلتا الحالتين سنحصل على نفس النتيجة، حيث يتم توصيل البرنامج النصي دون مقاطعة عرض المستند:

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

هذا يختتم المقال. إذا كنت تريد معرفة المزيد عن JavaScript، فإنني أوصي بتحويل انتباهك إلى ملفات . حظ سعيد!

جافا سكريبت. بداية سريعة

تعلم أساسيات JavaScript من خلال مثال عملي لكيفية إنشاء تطبيق ويب.

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

ربط البرامج النصية JS (الملفات ذات الامتداد *.js) بالموقع

تساعدنا JavaScript على تحسين وظائف الموقع بعدة طرق. سواء كان ذلك أو، على سبيل المثال، بعض الجانب الفني للقضية.

يمكن توصيل JavaScript بطريقتين:

1. أولاً- يتم ذلك عن طريق إدخال التعليمات البرمجية مباشرة في موقع الويب الخاص بك باستخدام العلامات:

شفرة

2. ثانية– باستخدام الملف:

حيث "https://www..js" هو المسار إلى ملف البرنامج النصي. يوصى بكتابة هذا الخيار للملفات الموجودة على خادم بعيد (خارجي). إذا كان الملف موجودًا على موقعك، فيمكنك ببساطة تحديد المسار النسبي:

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

أما بالنسبة لموقع الاتصال، فمن المستحسن توصيل كافة البرامج النصية في قسم HEAD، قبل علامة الإغلاق الخاصة به. على سبيل المثال:

كل شيء لمشرف الموقع المبتدئ

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

ربط نصوص PHP (الملفات ذات الامتداد *.php) بالموقع

يتم توصيل نصوص PHP بثلاث طرق:

1. أولاً– هذا هو نفس إدخال التعليمات البرمجية في صفحة الموقع نفسها (لاحظ أنه إذا كان لديك صفحة ذات ملحق *.html، فستحتاج إلى تغيير الامتداد إلى *.php) باستخدام العلامات:

2. استخدام ملف (في هذه الحالة، يمكن أيضًا إجراء الاتصال على صفحة ذات ملحق *.html):

ولكن لكي تعمل هذه الطريقة، تحتاج إلى إضافة هذه الأسطر إلى ملف .htaccess، الموجود في جذر موقعك، في الأعلى:

RemoveHandler .html .htm AddType application/x-httpd-php .php .htm .html .phtml

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

3. ثالث- باستخدام البرنامج النصي JS. في هذه الحالة، يمكنك أيضًا الحصول على نتيجة برنامج PHP النصي الذي تم تنفيذه على الخادم.

التنفيذ سيكون على النحو التالي:

$(document).ready(function() ( $(".result").load("/main.php"); ));

حيث ".result" هي الفئة التي سيتم تحميل البيانات فيها، و"/main.php"، على التوالي، هو عنوان البرنامج النصي PHP.

إذا كنت تقوم بتحميل البيانات من خادم آخر، فلن يكون دعم PHP على الخادم الخاص بك مطلوبًا. لا تنس ربط مكتبة jQuery بموقعك.

القواعد هنا هي نفسها تمامًا: العنوان الكامل للملف إذا كان موجودًا على خادم خارجي، والعنوان النسبي إذا كان موجودًا على خادمك.

ملحوظة! إذا كنت تريد توصيل برنامج PHP النصي بموقعك، فيجب أن يتمتع الخادم بدعم PHP. تحقق مع مزود الاستضافة الخاص بك لمعرفة ما إذا كان لديك هذا الخيار.

إذا كنت تقوم بتوصيل البرامج النصية لأول مرة، فحاول توصيل البرامج النصية من الأرشيف، المرفق في نهاية المقالة. إذا تلقيت في كلتا الحالتين الرسالة "Hello World! "يعني أنك فعلت كل شيء بشكل صحيح.

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

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

البرامج النصية المضمنة

من أجل كتابة برنامج نصي داخل الصفحة، يجب عليك استخدام العلامة. هنا مثال:

كود جافا سكريبت

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

تجدر الإشارة إلى أنه بمرور الوقت، يتم نقل ميزات معينة من لغة JavaScript إلى CSS. ومن الأمثلة على ذلك إمكانية تحديد التغيير السلس في قيم الممتلكات.

البرامج النصية الخارجية

كقاعدة عامة، يتم استخدام الملفات ذات الامتداد .js لتوصيل البرامج النصية الخارجية. يتم تنفيذ هذا الإجراء باستخدام علامة مصحوبة بالسمة src، والتي تحدد المسار إلى الملف نفسه. على سبيل المثال:

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

من الأفضل توصيل البرامج النصية من ملف قبل العلامة التي تغلق المستند.