أول برنامج: console.log والتعليقات

في هذا الدرس ستكتب أول برنامج حقيقي لك. ستتعلم كيف تجعل JavaScript «تتكلم» وتعرض لك النتائج باستخدام console.log، وكيف تكتب ملاحظات داخل الكود لا ينفّذها الجهاز، وهي التعليقات. هاتان الأداتان سترافقانك في كل درس قادم.

ما هو console.log؟

عندما تكتب برنامجاً، تحتاج إلى طريقة لترى ما يحدث بداخله. الأمر console.log يعمل مثل مكبّر الصوت: أي شيء تضعه بين القوسين، يعلنه البرنامج في الطرفية.

الأمر مكوّن من جزأين:

• console تعني الطرفية، أي المكان الذي تظهر فيه الرسائل.
• log تعني «سجِّل» أو «اكتب».

فمعنى console.log("مرحباً") هو: «اكتب كلمة مرحباً في الطرفية».

console.log("أهلاً بك");
console.log(42);
console.log(10 + 5);

الناتج

أهلاً بك
42
15

لاحظ ثلاثة أشياء:

1. النص يُكتب بين علامتي تنصيص "...".
2. الأرقام تُكتب بدون علامات تنصيص.
3. العمليات الحسابية تُحسب أولاً، ثم تُعرض نتيجتها.

الفرق بين النص والعملية الحسابية

انظر إلى هذين السطرين جيداً:

console.log(10 + 5);
console.log("10 + 5");

الناتج

15
10 + 5

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

علامات التنصيص تشبه الاقتباس في الكتابة: عندما تقول «قال أحمد: اثنان زائد ثلاثة»، فأنت تنقل الكلام كما هو، ولا تحسبه.

عرض أكثر من قيمة في سطر واحد

يمكنك أن تعطي console.log عدة قيم بينها فواصل، فيعرضها كلها في سطر واحد مع مسافة بين كل قيمة والتي تليها:

console.log("العمر:", 15);
console.log("الاسم:", "سارة", "- العمر:", 14);

الناتج

العمر: 15
الاسم: سارة - العمر: 14

هذه الطريقة مفيدة جداً عندما تريد أن تعرف قيمة شيء ما مع وصف بسيط له.

معلومة

المبرمجون المحترفون يستخدمون console.log كل يوم لاكتشاف الأخطاء. عندما لا يعمل البرنامج كما تتوقع، اطبع القيم في أماكن مختلفة لترى أين تختلف عن توقعك.

الفاصلة المنقوطة في نهاية السطر

ربما لاحظت العلامة ; في نهاية كل سطر. هذه الفاصلة المنقوطة، وهي تعني «انتهى الأمر»، مثل النقطة في نهاية الجملة.

JavaScript تستطيع غالباً أن تفهم نهاية السطر حتى بدونها، لكن كتابتها عادة جيدة تجعل الكود أوضح وتمنع بعض الأخطاء النادرة. في هذا الكورس سنكتبها دائماً.

التعليقات (Comments)

التعليق نص تكتبه داخل الكود لتشرح شيئاً، وJavaScript تتجاهله تماماً ولا تنفّذه. تخيّله مثل الملاحظات التي تكتبها بالقلم الرصاص على هامش كتابك المدرسي: تساعدك على الفهم، لكنها ليست جزءاً من الدرس نفسه.

تعليق السطر الواحد

يبدأ بعلامتي //، وكل ما بعدهما حتى نهاية السطر يُعتبر تعليقاً:

// هذا تعليق في سطر واحد
console.log("سطر يعمل"); // تعليق بعد الكود

تعليق متعدد الأسطر

يبدأ بـ /* وينتهي بـ */، وكل ما بينهما تعليق مهما كان عدد الأسطر:

/*
  هذا تعليق
  من عدة أسطر
*/

إيقاف سطر مؤقتاً

من الاستخدامات الذكية للتعليقات أن تعطّل سطراً دون أن تحذفه:

console.log("سطر يعمل");
// console.log("هذا السطر لن يعمل");

الناتج

سطر يعمل

اختصار مفيد

في VS Code ومعظم المحررات، اضغط Ctrl + / لتحويل السطر الحالي إلى تعليق، واضغطها مرة أخرى لإلغاء التعليق.

متى تكتب تعليقاً؟

اكتب التعليق ليشرح لماذا فعلت شيئاً، وليس ماذا يفعل الكود إذا كان واضحاً. التعليق // اطبع 5 فوق console.log(5) لا يضيف شيئاً. أما // نخصم 10% لأن العميل مشترك قديم فهو مفيد جداً لمن يقرأ الكود بعدك، حتى لو كان هو أنت بعد شهر!

جرّب بنفسك

شغّل الكود، ثم جرّب هذه التعديلات واحداً تلو الآخر:

1. اطبع اسمك وعمرك في سطر واحد باستخدام الفاصلة.
2. أزل علامتي // من السطر الأخير وشاهد ما يحدث.
3. اطبع ناتج 7 * 8.

جرّب بنفسكJavaScript

محرر الكود (JavaScript)// برنامجي الأول console.log("أهلاً بك"); console.log(10 + 5); console.log("10 + 5"); console.log("الاسم:", "سارة", "- العمر:", 14); // console.log("أنا سطر معطّل");

شغّلارجع للكود الأصليأو اضغط Ctrl + Enter

الناتج

أخطاء شائعة

• نسيان علامة تنصيص: console.log("مرحباً); سيظهر خطأ لأن النص لم يُغلق. تأكد أن كل علامة تنصيص لها شريكة.
• كتابة الأمر بحروف كبيرة: Console.Log("مرحباً") لن يعمل. JavaScript حساسة لحالة الأحرف، فـ console غير Console.
• نص عربي بلا علامات تنصيص: console.log(مرحباً) ستظن JavaScript أن «مرحباً» اسم لشيء معرّف، ولن تجده فيظهر خطأ.

اختبر نفسك

سؤال

ما ناتج الأمر console.log('4 + 4')؟

خطأ84 + 4

سؤال

كيف تكتب تعليقاً من سطر واحد في JavaScript؟

// تعليق# تعليق<!-- تعليق -->

الخلاصة

• console.log يعرض النصوص والأرقام ونتائج العمليات في الطرفية.
• النص بين علامات تنصيص يُعرض كما هو، والعمليات بدون تنصيص تُحسب أولاً.
• يمكنك عرض عدة قيم في سطر واحد بفصلها بفواصل.
• التعليقات تُكتب بـ // لسطر واحد، أو بين /* و */ لعدة أسطر، وJavaScript تتجاهلها.
• اكتب التعليق ليشرح «لماذا»، وليس ما هو واضح من الكود.