نريد أن نتيح هذا المشروع المفتوح المصدر إلى كل الناس حول العالم. من فضلك ساعدنا على ترجمة محتوى هذه السلسله للغة التى تعرفها.
خريطة الدورة التعليمية
  1. الدورة التعليمية
  2. لغة جافا سكريبت
  3. أساسيات جافا سكريبت
٢٠ مارس ٢٠٢١

أهلاً، بالعالم!

هذا الجزء من البرنامج التعليمي عن أساسيات لغة جافا سكريبت، اللغة نفسها.

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

لذا أولاً، دعونا نرفق نصا برمجيا في صفحة الويب. بالنسبة للبيئات التي تعمل على الخوادم (مثل Node.js)، يمكنك تنفيذها من خلال استخدام أمر مثل "node my.js".

الوسم “script”

يمكن وضع برامج جافا سكريبت في أي جزء في مستند HTML باستخدام وسم <script>.

على سبيل المثال:

<!DOCTYPE HTML>
<html>

<body>

  <p>Before the script...</p>

  <script>
    alert( 'أهلاً، بالعالم!' );
  </script>

  <p>...After the script.</p>

</body>

</html>

يمكن أن تقوم بتشغيل المثال بالضغط على زر “تشغيل” في الجانب الأيمن العلوي بالمربع الأعلى.

الوسم <script> يحتوي على شفرات جافا سكريبت التي يمكن أن تُنفذ بشكل تلقائي عندما يقوم المتصفح بمعالجة الوسم.

الترميز الحديث

الوسم <script> يحتوي على بعض الخصائص التي نادراً مايتم استخدامها في وقتنا الحاضر، لكن يمكن أن تجدها في الشفرات البرمجية القديمة:

الخاصية type: <script type=…>

معيار HTML القديم، HTML4، يتطلب أن يحتوي وسم script على type. عادة ما كان type="text/javascript". لم تعد مطلوبة الآن. وأيضاً، معايير HTML الحديثة غيرت معنى هذه الخاصية. والآن، يمكن أن تستخدم لوحدات جافا سكريبت. لكن هذا الموضوع متقدم، وسنتحدث عن الوحدات في جزء آخر من البرنامج التعليمي.

الخاصية language: <script language=…>

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

التعليقات قبل وبعد النصوص البرمجية.

في الكتب والأدلة القديمة جداً، قد تجد تعليقات داخل وسم <script>، مثل هذا:

<script type="text/javascript"><!--
    ...
//--></script>

لا يتم استخدام هذه الخدعة في جافا سكريبت الحديثة. تخفي هذه التعليقات شفرات جافا سكريبت في المتصفحات القديمة التي لاتعرف كيفية عمل معالجة للوسم `

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

إذا كان لدينا عدد كبير من شيفرات جافا سكريبت، فإننا يمكن أن نضعها في ملف منفصل.

يتم إرفاق ملفات النصوص البرمجية HTML باستخدام خاصية src:

<script src="/path/to/script.js"></script>

هنا، /path/to/script.js هو مسار منفرد للنص البرمجي من جذر الموقع. يمكن أيضاً توفير مسار نسبي من خلال الصفحة الحالية. على سبيل المثال، src="script.js" تعني أن الملف "script.js" في نفس المجلد.

يمكن أن نعطي المسار الكامل أيضاً. على سبيل المثال :

<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.11/lodash.js"></script>

لكي نرفق العديد من النصوص البرمجية، استخدم To attach several scripts، use الوسوم بصورة مضاعفة:

<script src="/js/script1.js"></script>
<script src="/js/script2.js"></script>
…
برجاء الملاحظة:

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

فائدة الملفات المنفصلة هي أن المتصفح يقوم بتحميلها وتخزينها في ذاكرة التخزين المؤقتة.

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

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

إذا src تم تعيين، يتم تجاهل محتوى النص البرمجي.

وسم <script> منفرداً لايمكن أن يحتوي على خاصية src والشيفرة بداخله.

هذا لايعمل:

<script src="file.js">
  alert(1); // the content is ignored, because src is set
</script>

يجب اختيار إما خارجي <script src="…"> أو عادي <script> باستخدام الشيفرة.

يمكن تقسيم المثال أعلاه إلى نصين برمجيين لكي يعمل:

<script src="file.js"></script>
<script>
  alert(1);
</script>

ملخص

  • يمكن استخدام وسم <script> لإضافة شيفرة جافا سكريبت إلى صفحة.
  • الخصائص type Ùˆlanguage غير مطلوبة.
  • يمكن إدراج النص البرمجي في ملف خارجي باستخدام <script src="path/to/script.js"></script>.

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

مهمه

Show an alert

الأهمية: 5

Create a page that shows a message “I’m JavaScript!”.

Do it in a sandbox, or on your hard drive, doesn’t matter, just ensure that it works.

عرض توضيحي في نافذة جديدة

<!DOCTYPE html>
<html>

<body>

  <script>
    alert( "I'm JavaScript!" );
  </script>

</body>

</html>

افتح الحل في sandbox.

Show an alert with an external script

الأهمية: 5

Take the solution of the previous task Show an alert. Modify it by extracting the script content into an external file alert.js, residing in the same folder.

Open the page, ensure that the alert works.

The HTML code:

<!DOCTYPE html>
<html>

<body>

  <script src="alert.js"></script>

</body>

</html>

For the file alert.js in the same folder:

alert("I'm JavaScript!");
الدرس السابقالدرس التالي
خريطة الدورة التعليمية

التعليقات

إقرأ هذا قبل أن تضع تعليقًا…
  • إذا كان لديك اقتراحات أو تريد تحسينًا - من فضلك من فضلك إفتح موضوعًا فى جيتهاب أو شارك بنفسك بدلًا من التعليقات.
  • إذا لم تستطع أن تفهم شيئّا فى المقال - وضّح ماهو.
  • إذا كنت تريد عرض كود استخدم عنصر <code> ØŒ وللكثير من السطور استخدم <pre>ØŒ ولأكثر من 10 سطور استخدم (plnkr, JSBin, codepen…)

فصل

التنقل في الدرس

مشاركه
عدِّل فى جيتهاب