الوحدة 1 · الخطوات الأولى
ما هي JavaScript وأين تعمل
10 دقراءة 3 دبيئة تجريب الكود
الدرس في لمحة
تعرف ما هي JavaScript، وأين تعمل (في المتصفّح وفي Node.js)، وكيف تشغّل أول سطر كود لك، وما الذي ستبنيه في هذه الدورة.
لا فيديو هنا، بل الشيء الحقيقي: درس مكتوب وأمثلة قابلة للتشغيل واختبار وتدريب.
كل موقع استخدمته اليوم شغّل JavaScript. حين يزيد عدّاد “الإعجابات” دون أن يُعاد تحميل الصفحة، وحين يخبرك نموذج التسجيل أن كلمة المرور قصيرة قبل أن تضغط “إرسال”، وحين تتحرّك الخريطة تحت إصبعك، فهذه JavaScript تعمل داخل متصفّحك. إنها لغة البرمجة الوحيدة التي يفهمها كل متصفّح، ولهذا هي أفضل لغة أولى لكل من يريد أن يبني للويب.
ستتعلّمها بالطريقة البطيئة المتينة: بأن تراقب ما يفعله الحاسوب فعلًا بكل سطر تكتبه.
لغة واحدة وبيتان
JavaScript لغة: مجموعة قواعد لكتابة التعليمات. ولا بدّ من شيء يقرأ هذه التعليمات وينفّذها، وهذا الشيء هو محرّك JavaScript (JavaScript engine). يستخدم Chrome وEdge محرّكًا اسمه V8، ويستخدم Firefox محرّك SpiderMonkey، ويستخدم Safari محرّك JavaScriptCore. وكلها تتبع المعيار الرسمي نفسه، واسمه ECMAScript، الذي يصدر منه إصدار جديد كل عام.
المحرّك لا يعمل وحده أبدًا. إنه يعيش داخل بيئة مضيفة (host) تمنح كودك قدرات إضافية:
- في المتصفّح، تضيف البيئة المضيفة الصفحة نفسها (
document)، والنقرات وضغطات المفاتيح، والشبكة (fetch)، ومساحة تخزين صغيرة (localStorage). - في Node.js، يعمل محرّك V8 نفسه على حاسوب أو خادم بلا أي صفحة. وبدلًا من ذلك، تضيف البيئة المضيفة الملفات والخوادم وأدوات سطر الأوامر.
لهذا التقسيم أهمية من اليوم الأول. كل ما في الأقسام من 1 إلى 3 من هذه الدورة هو اللغة نفسها، لذلك يعمل في البيئتين. أما القسم 4 فيستخدم إضافات المتصفّح، فلا يعمل كوده إلا داخل صفحة ويب.
أول سطر كود لك
هذا برنامج JavaScript كامل. اضغط زر التشغيل (Run).
console.log("Pocket is running");
console.log(450 + 1200);حدث شيئان، بالترتيب. أولًا قرأ المحرّك السطر 1، فوجد تعليمةً تطلب طباعة نصّ، فطبعه. ثم قرأ السطر 2، فحسب 450 + 1200، وطبع الناتج 1650. كل سطر من هذين السطرين تعليمة (statement)، أي أمر واحد، وتنتهي عادةً بفاصلة منقوطة. ينفّذ المحرّك التعليمات من الأعلى إلى الأسفل، واحدة تلو الأخرى، ولا يبدأ تعليمة قبل أن ينهي التي قبلها.
console.log() هي نافذتك إلى داخل برنامجك. ستستخدمها باستمرار، وكذلك يفعل المطوّرون المحترفون. كل ما بين القوسين يُحسب أولًا، ثم يُطبع الناتج.
ما الذي ستبنيه: Pocket
ستبني طوال هذه الدورة برنامجًا واحدًا، قطعةً بعد قطعة: Pocket، وهو متتبّع للمصاريف. في الدروس القادمة سيكون مجرّد بضعة متغيّرات تُطبع في الـ console. وبحلول القسم 3 سيحمل قائمة مصاريف، ويجمعها حسب الفئة، ويرتّبها. وفي القسم 4 يصبح صفحة ويب فيها نموذج إدخال وقائمة حيّة وبيانات محفوظة. وفي القسم 5 تنظّمه كما تُنظَّم المشاريع الحقيقية، بالوحدات (modules) والأصناف (classes) ومعالجة سليمة للأخطاء.
ينتهي معظم الدروس بتمرين. تكتب الكود في المحرّر، وتضغط زر التحقّق (Check)، فتخبرك مجموعة من الفحوص الآلية بما يعمل وما لم يعمل بعد. أن تخطئ في أحد الفحوص أمر طبيعي ومفيد: اقرأ الرسالة، وغيّر شيئًا واحدًا، ثم حاول مجددًا. هذه الحلقة من الكتابة ثم التشغيل ثم القراءة ثم الإصلاح هي ما تبدو عليه البرمجة كل يوم.
في الدرس التالي تتعرّف إلى المادة الخام التي يعمل بها كل برنامج: القيم، وأنواعها، والمتغيّرات التي تحملها.
أهم النقاط
- JavaScript لغة برمجة يستطيع كل متصفّح ويب تشغيلها، وNode.js يشغّل اللغة نفسها خارج المتصفّح.
- اللغة نفسها صغيرة؛ أما البيئة المضيفة التي تعمل فيها (المتصفّح أو Node.js) فتضيف إمكانات أخرى مثل الصفحة أو الملفات أو الشبكة.
- يُنفَّذ الكود تعليمةً تلو الأخرى، من الأعلى إلى الأسفل، ما لم تطلب منه غير ذلك.
console.log()تطبع قيمة كي ترى ما يفعله برنامجك؛ وهي أول أداة تلجأ إليها في تصحيح الأخطاء (debugging).