المقدمة: التاريخ، الميزات، وأين يُستخدم — JavaScript

ما هذا ولماذا؟

تخيل أنك مخرج فيلمك الخاص، وأن حاسوبك هو استوديو سينمائي. HTML يشبه السيناريو والديكورات (نصوص، صور، أزرار، جداول). CSS هو مصمم الأزياء ومسؤول الإضاءة (الألوان، الخطوط، الترتيب الجميل). أما JavaScript فهو الممثلون والمؤثرات الخاصة! إن JS هو ما يجعل كل شيء يتحرك، ويتفاعل مع الضغط على الأزرار، ويحسب، ويظهر النوافذ المنبثقة، ويغير الصور، بل ويصنع الألعاب.

إذا كان الموقع شخصًا، فإن:

• HTML هو الهيكل العظمي والجلد (البنية).
• CSS هو الملابس والمكياج (المظهر الخارجي).
• JavaScript هو الدماغ والعضلات (المنطق والأفعال).

بدون JavaScript، سيكون الموقع مجرد كتاب ممل يمكنك قراءته فقط، لكن لا يمكنك تقليب الصفحات، أو النقر على الروابط، أو اللعب، أو ملء النماذج. JS يجعل صفحات الويب "حية".

أين يُستخدم JavaScript؟

• في كل مكان على الإنترنت: فكونتاكتي، يوتيوب، الألعاب في المتصفح (مثل Agar.io)، الآلات الحاسبة عبر الإنترنت، الخرائط (خرائط ياندكس)، محررات الأكواد (مثل الذي تقرأ فيه هذه المقالة الآن).
• حتى على الخوادم (باستخدام Node.js) — على سبيل المثال، لمعالجة الرسائل في الدردشات أو تخزين البيانات.
• في تطبيقات الهواتف المحمولة (React Native) وعلى أجهزة الكمبيوتر المكتبية (Electron — الذي كُتب به Discord و VS Code).

JavaScript هي اللغة الأكثر شعبية في العالم! لماذا؟ لأنها مدمجة مباشرة في المتصفح. لا تحتاج إلى تثبيت أي شيء (على عكس Python الذي يجب تنزيله). افتح المفكرة، اكتب الكود، احفظه كـ .html — وانتهى! يمكنك تشغيله بنقرة مزدوجة.

فرق مهم عن Python: في Python، يتم تنفيذ الكود بمفرده في وحدة التحكم، أما في JavaScript فهو دائمًا مرتبط بصفحة الويب. JS لا يمكنه إنشاء نوافذ رسومية بنفسه (مثل pygame)، لكنه يستطيع التحكم في ما هو موجود بالفعل على الشاشة — الأزرار، النصوص، الصور.

أمثلة على الكود مع الشرح

أسهل طريقة للبدء هي كتابة الكود مباشرة في المتصفح. اضغط F12 (أو زر الفأرة الأيمن → "عرض الكود") وانتقل إلى علامة التبويب "Console" (وحدة التحكم). يمكنك إدخال الأوامر هناك. لكننا سنكتب صفحات كاملة.

أنشئ ملفًا على حاسوبك باسم test.html، وافتحه بالمفكرة، والصق فيه الكود من الأمثلة. ثم احفظه وافتحه في المتصفح.

مثال 1: مرحبًا، أيها العالم! (أول برنامج)

// هذا تعليق من سطر واحد. لا يتم تنفيذه.
/* وهذا تعليق متعدد الأسطر.
   إنه ضروري لشرح الكود. */

// الأمر alert() يظهر نافذة منبثقة برسالة.
alert("Hello, world! JavaScript works!");

// الأمر console.log() يطبع نصًا في وحدة تحكم المطور.
// لرؤية النتيجة، اضغط F12 وافتح علامة التبويب Console.
console.log("This is a message in the console. You are great!");

// الأمر document.write() يكتب نصًا مباشرة على الصفحة.
document.write("<h1>This is a heading created by JavaScript!</h1>");

ماذا سيحدث؟

• أولاً، ستظهر نافذة منبثقة بها نص.
• ثم، في وحدة التحكم (F12)، ستظهر رسالة ثانية.
• في النهاية، سيظهر عنوان كبير على الصفحة.

في Python، البرنامج الأول هو ببساطة print("Hello"). في JS، نستخدم alert() أو console.log(). الفرق هو أن JS يعيش في المتصفح، لذلك لديه إمكانية الوصول إلى النوافذ والصفحة نفسها.

مثال 2: المتغيرات — صناديق للبيانات

// المتغير يشبه صندوقًا عليه ملصق.
// في Python تكتب: name = "Vasya"
// في JS نستخدم الكلمة المفتاحية let (الطريقة الحديثة).

let name = "Masha";           // سلسلة نصية
let age = 12;                 // رقم
let lovesPizza = true;        // قيمة منطقية (نعم/لا)
let emptyBox = null;          // فارغ (لا شيء)

// لنطبع كل شيء في وحدة التحكم:
console.log("Name:", name);
console.log("Age:", age);
console.log("Loves pizza?", lovesPizza);

// يمكننا جمع السلاسل النصية (الدمج):
let greeting = "Hello, " + name + "! You are " + age + " years old.";
console.log(greeting);

// ويمكننا استخدام السلاسل النصية القالبية (مثل f-strings في Python، لكن مع ${}):
let betterGreeting = `Hello, ${name}! You are ${age} years old.`;
console.log(betterGreeting);

// لنغير قيمة المتغير:
age = 13;  // كان عيد ميلاد ماشا!
console.log("Now age is:", age);

الشرح: المتغيرات ضرورية لتخزين المعلومات. let يشبه var في Python، لكن في JS يجب كتابة let (أو const للثوابت). لاحظ الفاصلة المنقوطة ; في نهاية كل سطر — في Python لا توجد، أما في JS فتكتب (على الرغم من أنها تعمل أحيانًا بدونها، لكن من الأفضل دائمًا كتابتها).

السلاسل النصية القالبية (مع علامات الاقتباس الخلفية `` ` ``) مريحة جدًا — تقوم بإدراج المتغيرات مباشرة في النص عبر ${}.

مثال 3: العبارة الشرطية if (كما في الحياة: "إذا... فإن...")

let userAge = 15;

// إذا كان العمر أكبر من أو يساوي 18:
if (userAge >= 18) {
    console.log("You are an adult! You can watch horror movies.");
} else if (userAge >= 12) {
    console.log("You are a teenager! You can play most games.");
} else {
    console.log("You are a child. Better read a book.");
}

// مثال آخر: التحقق من زوجية الرقم
let number = 7;
if (number % 2 === 0) {  // % هو باقي القسمة
    console.log("The number is even.");
} else {
    console.log("The number is odd.");
}

// لاحظ: في JS، للمقارنة يُستخدم === (ثلاث علامات يساوي)،
// وليس == (علامتان). علامتا يساوي تعني مقارنة "غير صارمة"، وقد تعطي
// نتائج غريبة (مثلاً، 5 == "5" صحيح، على الرغم من أن الرقم والسلسلة
// النصية نوعان مختلفان). استخدم دائمًا ===.

الشرح: العبارة الشرطية if تسمح للبرنامج باتخاذ قرارات بناءً على شروط. else if تسمح بإضافة شروط إضافية، و else تنفذ إذا لم يتحقق أي شرط. عامل المقارنة === يتحقق من المساواة في القيمة والنوع معًا، وهذا هو الأفضل دائمًا.