يدور هذا الجزء من البرنامج التعليمي حول JavaScript الأساسية، وهي اللغة نفسها.
لكننا نحتاج إلى بيئة عمل لتشغيل نصوصنا، وبما أن هذا الكتاب موجود على الإنترنت، فإن المتصفح يعد خيارًا جيدًا. سنبقي كمية الأوامر الخاصة بالمتصفح (مثل alert ) عند الحد الأدنى حتى لا تقضي وقتًا فيها إذا كنت تخطط للتركيز على بيئة أخرى (مثل Node.js). سنركز على JavaScript في المتصفح في الجزء التالي من البرنامج التعليمي.
لذا أولاً، دعونا نرى كيف نرفق برنامجًا نصيًا بصفحة الويب. بالنسبة للبيئات من جانب الخادم (مثل Node.js)، يمكنك تنفيذ البرنامج النصي باستخدام أمر مثل "node my.js" .
يمكن إدراج برامج JavaScript في أي مكان تقريبًا في مستند HTML باستخدام علامة <script> .
على سبيل المثال:
<!DOCTYPE HTML>
<أتش تي أم أل>
<الجسم>
<p>قبل البرنامج النصي...</p>
<النص البرمجي>
تنبيه("مرحبا بالعالم!" );
</script>
<p>...بعد البرنامج النصي.</p>
</الجسم>
</html>يمكنك تشغيل المثال بالنقر فوق الزر "تشغيل" في الزاوية العلوية اليمنى من المربع أعلاه.
تحتوي العلامة <script> على كود JavaScript الذي يتم تنفيذه تلقائيًا عندما يقوم المتصفح بمعالجة العلامة.
تحتوي العلامة <script> على بعض السمات التي نادرًا ما تُستخدم في الوقت الحاضر ولكن لا يزال من الممكن العثور عليها في التعليمات البرمجية القديمة:
سمة type : <script type =…>
يتطلب معيار HTML القديم، HTML4، أن يحتوي البرنامج النصي على type . عادة كان type="text/javascript" . لم يعد مطلوبا بعد الآن. كما أن معيار HTML الحديث غيّر تمامًا معنى هذه السمة. الآن، يمكن استخدامه لوحدات JavaScript. ولكن هذا موضوع متقدم، سنتحدث عن الوحدات في جزء آخر من البرنامج التعليمي.
سمة language : <script language =…>
كان المقصود من هذه السمة إظهار لغة البرنامج النصي. لم تعد هذه السمة منطقية لأن JavaScript هي اللغة الافتراضية. ليست هناك حاجة لاستخدامه.
التعليقات قبل وبعد البرامج النصية.
في الكتب والأدلة القديمة حقًا، قد تجد تعليقات داخل علامات <script> ، مثل هذا:
<script type="text/javascript"><!--
...
//--></script> لا تُستخدم هذه الخدعة في JavaScript الحديثة. تخفي هذه التعليقات كود JavaScript من المتصفحات القديمة التي لم تكن تعرف كيفية معالجة علامة <script> . نظرًا لأن المتصفحات التي تم إصدارها في آخر 15 عامًا لا تعاني من هذه المشكلة، فإن هذا النوع من التعليقات يمكن أن يساعدك في التعرف على التعليمات البرمجية القديمة حقًا.
إذا كان لدينا الكثير من أكواد JavaScript، فيمكننا وضعها في ملف منفصل.
يتم إرفاق ملفات البرنامج النصي بـ HTML باستخدام السمة src :
<script src="/path/to/script.js"></script>
هنا، /path/to/script.js هو المسار المطلق للبرنامج النصي من جذر الموقع. يمكن للمرء أيضًا توفير مسار نسبي من الصفحة الحالية. على سبيل المثال، src="script.js" ، تمامًا مثل src="./script.js" ، يعني وجود ملف "script.js" في المجلد الحالي.
يمكننا تقديم عنوان URL كامل أيضًا. على سبيل المثال:
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.11/lodash.js"></script>
لإرفاق عدة نصوص برمجية، استخدم علامات متعددة:
<script src="/js/script1.js"></script> <script src="/js/script2.js"></script> …
يرجى الملاحظة:
كقاعدة عامة، يتم وضع أبسط البرامج النصية فقط في HTML. توجد ملفات أكثر تعقيدًا في ملفات منفصلة.
وتتمثل فائدة الملف المنفصل في أن المتصفح سيقوم بتنزيله وتخزينه في ذاكرة التخزين المؤقت الخاصة به.
الصفحات الأخرى التي تشير إلى نفس البرنامج النصي ستأخذه من ذاكرة التخزين المؤقت بدلاً من تنزيله، لذلك يتم تنزيل الملف فعليًا مرة واحدة فقط.
وهذا يقلل من حركة المرور ويجعل الصفحات أسرع.
إذا تم تعيين src ، فسيتم تجاهل محتوى البرنامج النصي.
لا يمكن أن تحتوي علامة <script> واحدة على سمة src والكود معًا.
هذا لن ينجح:
<script src="file.js"> تنبيه (1)؛ // يتم تجاهل المحتوى، لأنه تم تعيين src </script>
يجب علينا اختيار إما <script src="…"> خارجي أو <script> عادي مع الكود.
يمكن تقسيم المثال أعلاه إلى نصين للعمل:
<script src="file.js"></script> <النص البرمجي> تنبيه (1)؛ </script>
يمكننا استخدام علامة <script> لإضافة كود JavaScript إلى الصفحة.
سمات type language غير مطلوبة.
يمكن إدراج برنامج نصي في ملف خارجي باستخدام <script src="path/to/script.js"></script> .
هناك الكثير مما يمكن تعلمه حول البرامج النصية للمتصفح وتفاعلها مع صفحة الويب. ولكن دعونا نضع في اعتبارنا أن هذا الجزء من البرنامج التعليمي مخصص للغة JavaScript، لذلك لا ينبغي لنا أن نصرف انتباهنا عن تطبيقات خاصة بالمتصفح لها. سنستخدم المتصفح كوسيلة لتشغيل JavaScript، وهو أمر مناسب جدًا للقراءة عبر الإنترنت، ولكنه مجرد واحد من العديد.
الأهمية: 5
أنشئ صفحة تعرض رسالة "أنا جافا سكريبت!".
افعل ذلك في وضع الحماية، أو على محرك الأقراص الثابتة لديك، لا يهم، فقط تأكد من أنه يعمل.
العرض التوضيحي في نافذة جديدة
<!DOCTYPE html>
<أتش تي أم أل>
<الجسم>
<النص البرمجي>
تنبيه("أنا جافا سكريبت!" );
</script>
</الجسم>
</html>افتح الحل في رمل.
الأهمية: 5
خذ حل المهمة السابقة اظهر تنبيها. قم بتعديله عن طريق استخراج محتوى البرنامج النصي إلى ملف alert.js خارجي.js، الموجود في نفس المجلد.
افتح الصفحة وتأكد من عمل التنبيه.
كود HTML:
<!DOCTYPE html> <أتش تي أم أل> <الجسم> <script src="alert.js"></script> </الجسم> </html>
بالنسبة للملف alert.js في نفس المجلد:
تنبيه ("أنا جافا سكريبت!")؛