انتقل إلى المحتوى

١.١ ملفك الأول بلغة JavaScript

ما JavaScript؟

هي لغة برمجة نصية. يمكنك استخدامها لكتابة برامج وتشغيلها في أي متصفح حديث.

معلومة (١): لا تتطلب اللغات النصية عادةً استخدام مُصرّف (Compiler) منفصل قبل التشغيل.

معلومة (٢): المُصرّف برنامج يحوّل التعليمات المكتوبة بلغة برمجة إلى صيغة أخرى قابلة للتنفيذ، مثل لغة الآلة.

ما ملف JavaScript؟

ملف JavaScript ملف نصي بسيط يحمل الامتداد js .

أمثلة على أسماء ملفات JavaScript:

  • script.js

  • file.js

  • jquery.js

  • whateverYouWant.js

كيف تُنشئ ملف JavaScript؟

أنشئ ملفًا نصيًا جديدًا، وسمّه بما تشاء مع استخدام الامتداد js . سنُنشئ ملف JavaScript باسم script.js

كيف تُشغّل ملف JavaScript؟

أولًا: أنشئ ملف HTML سنستخدم المتصفح لتشغيل JavaScript في هذا الدرس. لنُنشئ ملف HTML بسيطًا باسم index.html):

ملاحظة (١): تأكّد من وجود الملفين index.html و script.js في المجلد نفسه.

<!DOCTYPE html>
 <html lang="en" dir="ltr">
   <head>
     <meta charset="utf-8">
     <title>Your first JavaScript file</title>
    </head>
    <body>
    </body>
</html>

ثانيًا: اربط ملف JavaScript نحتاج الآن إلى ربط ملف JavaScript الذي أنشأناه script.js بملف HTML الجديد index.html.

يمكننا فعل ذلك بإضافة وسم script إلى الملف index.html.

١- أضف وسم فتح script قبل وسم إغلاق body في الملف index.html:

....
<script>
</body>

٢- أضف السمة src إلى وسم script:

....
<script src="">
</body>

٣- أضف اسم ملف JavaScript الذي أنشأناه إلى السمة src :

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

٤- أغلق وسم script :

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

٥- سيبدو الملف كما يلي:

<!DOCTYPE html>
  <html lang="en" dir="ltr">
    <head>
      <meta charset="utf-8">
      <title>Your first JavaScript file<title>
    </head>
    <body>
      <script src="script.js"></script>
    </body>
  </html>

ثالثًا: أضف شيفرة إلى script.js: أضف الشيفرة التالية إلى الملف script.js واحفظ الملف:

alert("Hi there, I come from the JavaScript file you have just created");

افتح الآن index.html في المتصفح. رائع! ستظهر نافذة منبثقة تعرض الرسالة: Hi there, I come from the JavaScript file you have just created. لقد كتبت أول شيفرة JavaScript لك بنجاح. تهانينا!

كيف تعمل هذه الشيفرة؟

  1. يقرأ المتصفح ملف HTML index.html سطرًا بسطر.

  2. عندما يصل إلى وسم <script> ، يُحمّل الملف المحدّد في السمة src وهو script.js.

  3. يقرأ الشيفرة الموجودة في script.js سطرًا بسطر.

  4. ينفّذ التعليمة alert. وتقوم alert بعرض نافذة منبثقة في المتصفح تحمل الرسالة المكتوبة بين علامتي الاقتباس alert('Message')

  5. الأمر بهذه البساطة.

معلومة (٣): يحتوي كل متصفح على برنامج يقرأ شيفرة JavaScript وينفّذها، ويُسمّى «محرّك JavaScript». في متصفح Chrome يُسمّى هذا المحرّك V8.

شيفرة JavaScript داخل ملف HTML

يمكننا تضمين شيفرة JavaScript داخل ملف HTML نفسه. لنعدّل الملف index.html:

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>Your first JavaScript file</title>
  </head>
  <body>
    <script>
      alert("Hi there, I come from the JavaScript file you have just created");
    </script>
  </body>
</html>

لاحظ أن السمة src حُذفت من وسم script، وأُضيف سطر alert داخل الوسم. افتح index.html في المتصفح، وستحصل على النتيجة السابقة نفسها.

كيف تعمل؟

  1. يقرأ المتصفح ملف HTML index.html سطرًا بسطر.

  2. عندما يصل إلى وسم <script> ، يُحمّل الشيفرة الموجودة داخله.

  3. يقرأ تلك الشيفرة سطرًا بسطر.

  4. ينفّذ التعليمة alert.

طريقة أخرى لتشغيل شيفرة JavaScript

هل تريد تجربة الشيفرة بسرعة من دون إضافة وسم script إلى ملف HTML؟ إليك طريقة أخرى:

١- افتح أي موقع، مثل Google.

٢- انقر بزر الفأرة الأيمن في أي مكان في الصفحة، ثم اختر inspect.

٣- ستظهر لوحة جديدة؛ اختر تبويب console .

٤- ستجد مؤشر الكتابة يومض. اكتب شيفرتك هناك:

alert("Hi there, I come from the JavaScript file you have just created");

٥- اضغط Enter لتظهر النافذة المنبثقة.

٦- رائع! جرّب الآن تحديث الصفحة؛ ستُعاد تهيئة بيئة تنفيذ الشيفرة.

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