كل موقع استخدمته اليوم شغّل JavaScript. حين يزيد عدّاد “الإعجابات” دون أن يُعاد تحميل الصفحة، وحين يخبرك نموذج التسجيل أن كلمة المرور قصيرة قبل أن تضغط “إرسال”، وحين تتحرّك الخريطة تحت إصبعك، فهذه JavaScript تعمل داخل متصفّحك. إنها لغة البرمجة الوحيدة التي يفهمها كل متصفّح، ولهذا هي أفضل لغة أولى لكل من يريد أن يبني للويب.
\nستتعلّمها بالطريقة البطيئة المتينة: بأن تراقب ما يفعله الحاسوب فعلًا بكل سطر تكتبه.
\nJavaScript لغة: مجموعة قواعد لكتابة التعليمات. ولا بدّ من شيء يقرأ هذه التعليمات وينفّذها، وهذا الشيء هو محرّك JavaScript (JavaScript engine). يستخدم Chrome وEdge محرّكًا اسمه V8، ويستخدم Firefox محرّك SpiderMonkey، ويستخدم Safari محرّك JavaScriptCore. وكلها تتبع المعيار الرسمي نفسه، واسمه ECMAScript، الذي يصدر منه إصدار جديد كل عام.
\nالمحرّك لا يعمل وحده أبدًا. إنه يعيش داخل بيئة مضيفة (host) تمنح كودك قدرات إضافية:
\ndocument)، والنقرات وضغطات المفاتيح، والشبكة (fetch)، ومساحة تخزين صغيرة (localStorage).لهذا التقسيم أهمية من اليوم الأول. كل ما في الأقسام من 1 إلى 3 من هذه الدورة هو اللغة نفسها، لذلك يعمل في البيئتين. أما القسم 4 فيستخدم إضافات المتصفّح، فلا يعمل كوده إلا داخل صفحة ويب.
\nهذا برنامج JavaScript كامل. اضغط زر التشغيل (Run).
\nconsole.log(\"Pocket is running\");\nconsole.log(450 + 1200);حدث شيئان، بالترتيب. أولًا قرأ المحرّك السطر 1، فوجد تعليمةً تطلب طباعة نصّ، فطبعه. ثم قرأ السطر 2، فحسب 450 + 1200، وطبع الناتج 1650. كل سطر من هذين السطرين تعليمة (statement)، أي أمر واحد، وتنتهي عادةً بفاصلة منقوطة. ينفّذ المحرّك التعليمات من الأعلى إلى الأسفل، واحدة تلو الأخرى، ولا يبدأ تعليمة قبل أن ينهي التي قبلها.
console.log() هي نافذتك إلى داخل برنامجك. ستستخدمها باستمرار، وكذلك يفعل المطوّرون المحترفون. كل ما بين القوسين يُحسب أولًا، ثم يُطبع الناتج.
ستبني طوال هذه الدورة برنامجًا واحدًا، قطعةً بعد قطعة: Pocket، وهو متتبّع للمصاريف. في الدروس القادمة سيكون مجرّد بضعة متغيّرات تُطبع في الـ console. وبحلول القسم 3 سيحمل قائمة مصاريف، ويجمعها حسب الفئة، ويرتّبها. وفي القسم 4 يصبح صفحة ويب فيها نموذج إدخال وقائمة حيّة وبيانات محفوظة. وفي القسم 5 تنظّمه كما تُنظَّم المشاريع الحقيقية، بالوحدات (modules) والأصناف (classes) ومعالجة سليمة للأخطاء.
\nينتهي معظم الدروس بتمرين. تكتب الكود في المحرّر، وتضغط زر التحقّق (Check)، فتخبرك مجموعة من الفحوص الآلية بما يعمل وما لم يعمل بعد. أن تخطئ في أحد الفحوص أمر طبيعي ومفيد: اقرأ الرسالة، وغيّر شيئًا واحدًا، ثم حاول مجددًا. هذه الحلقة من الكتابة ثم التشغيل ثم القراءة ثم الإصلاح هي ما تبدو عليه البرمجة كل يوم.
\nفي الدرس التالي تتعرّف إلى المادة الخام التي يعمل بها كل برنامج: القيم، وأنواعها، والمتغيّرات التي تحملها.
\n","toc":[{"id":"sec-1","text":"لغة واحدة وبيتان","level":2},{"id":"sec-2","text":"أول سطر كود لك","level":2},{"id":"sec-3","text":"ما الذي ستبنيه: Pocket","level":2}],"takeaways":["JavaScript لغة برمجة يستطيع كل متصفّح ويب تشغيلها، وNode.js يشغّل اللغة نفسها خارج المتصفّح.","اللغة نفسها صغيرة؛ أما البيئة المضيفة التي تعمل فيها (المتصفّح أو Node.js) فتضيف إمكانات أخرى مثل الصفحة أو الملفات أو الشبكة.","يُنفَّذ الكود تعليمةً تلو الأخرى، من الأعلى إلى الأسفل، ما لم تطلب منه غير ذلك.","console.log() تطبع قيمة كي ترى ما يفعله برنامجك؛ وهي أول أداة تلجأ إليها في تصحيح الأخطاء (debugging)."],"further":[{"title":"What is JavaScript? (MDN)","url":"https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Scripting/What_is_JavaScript"},{"title":"Introduction to Node.js","url":"https://nodejs.org/en/learn/getting-started/introduction-to-nodejs"},{"title":"console.log() (MDN)","url":"https://developer.mozilla.org/en-US/docs/Web/API/console/log_static"}],"quiz":[{"q":"تكتب console.log(2 + 3) في السطر 1 وconsole.log("done") في السطر 2. ماذا يظهر في الـ console، وبأي ترتيب؟
5 ثم done، لأن التعليمات تُنفَّذ من الأعلى إلى الأسفل.","why":"صحيح. تُحسب التعليمة الأولى وتُطبع، ثم الثانية."},{"text":"done ثم 5، لأن النص يُطبع قبل الأرقام.","why":"لا تجمّع JavaScript المخرجات حسب نوعها. التعليمات تُنفَّذ بالترتيب الذي كُتبت به."},{"text":"2 + 3 ثم done، لأن console.log تطبع ما كتبته حرفيًا.","why":"يُحسب التعبير 2 + 3 أولًا، فتستلم console.log الرقم 5، لا الحروف التي كتبتها."}],"answer":0},{"q":"أيّ مما يلي يضيفه المتصفّح، وليس جزءًا من لغة JavaScript نفسها؟
","options":[{"text":"الأرقام والعامل+.","why":"الأرقام والعوامل جزء من اللغة، لذلك تعمل بالطريقة نفسها في Node.js وفي كل متصفّح."},{"text":"التعليمة if.","why":"أدوات التحكّم في سير البرنامج مثل if جزء أساسي من قواعد اللغة، وموجودة في كل بيئة مضيفة."},{"text":"الكائن document الذي يتيح لك تغيير الصفحة.","why":"صحيح. document واجهة برمجية (API) يوفّرها المتصفّح. لا توجد صفحة في Node.js، لذلك لا يوجد فيه document."}],"answer":2},{"q":"يقول لك صديق: “JavaScript نسخة مبسّطة من Java”. ما الردّ الأدق؟
","options":[{"text":"هما لغتان لا علاقة بينهما، تشتركان في جزء من الاسم لأسباب تسويقية عام 1995.","why":"صحيح. سُمّيت JavaScript بهذا الاسم لتستفيد من شهرة Java في ذلك الوقت. واللغتان تعملان بطريقتين مختلفتين تمامًا."},{"text":"JavaScript هي نسخة المتصفّح من Java، وتُترجَم إلى الـ bytecode نفسه.","why":"لا تُترجَم JavaScript إلى bytecode خاص بـ Java، ولها معيارها الخاص، ECMAScript."},{"text":"JavaScript لغة أقدم حلّت Java محلّها لاحقًا على الويب.","why":"الـ applets المكتوبة بـ Java اختفت من الويب؛ وJavaScript هي اللغة التي يشغّلها كل متصفّح اليوم."}],"answer":0}],"exercise":{"kind":"web","mode":"js","starter":{"js":"// 1. Log the text: Welcome to Pocket\n// 2. Log the result of adding three expenses: 450, 1200 and 899\n"},"solution":{"js":"console.log(\"Welcome to Pocket\");\nconsole.log(450 + 1200 + 899);\n"},"checks":[{"id":"logs-welcome","test":"return logs.some((l) => l.toLowerCase().includes('welcome to pocket'));"},{"id":"logs-total","test":"return logs.some((l) => l.trim() === '2549');"},{"id":"welcome-first","test":"const w = logs.findIndex((l) => l.toLowerCase().includes('welcome to pocket'));\nconst t = logs.findIndex((l) => l.trim() === '2549');\nreturn w !== -1 && t !== -1 && w < t;\n"}],"title":"رحّب بـ Pocket","prompt":"اكتب برنامجًا من سطرين. أولًا اطبع النص Welcome to Pocket. ثم اطبع مجموع ثلاثة مصاريف، 450 و1200 و899، واترك JavaScript تُجري عملية الجمع داخل console.log().
"هكذا". أما الأرقام فلا تحتاج إلى علامات تنصيص.","يمكنك وضع عملية حسابية كاملة داخل القوسين، مثل console.log(1 + 2).","console.log(450 + 1200 + 899); تطبع المجموع."],"explanation":"ينفّذ المحرّك تعليمتيك بالترتيب. في الأولى، "Welcome to Pocket" نصّ، فيُطبع كما هو. وفي الثانية، تحسب JavaScript التعبير 450 + 1200 + 899 أولًا، فتحصل على 2549، وبعدها فقط تسلّم هذا الرقم الواحد إلى console.log(). قاعدة “احسب ما داخل القوسين قبل استخدامه” ستعتمد عليها في كل درس.