تعلم JavaScript للمبتدئين: الأساسيات وأول كود تكتبه

JavaScript هي لغة برمجة الويب: تعمل في كل متصفح حديث وتجعل الصفحات تفاعلية، ومع Node.js تعمل أيضاً على جهازك وعلى الخوادم. في هذا الشرح ستشغّل أول سطر JavaScript في Console المتصفح، وتتعلم اللبنات الأساسية للغة، ثم تجعل زراً حقيقياً يستجيب للنقر.

الجواب السريع: افتح أدوات المطور في متصفحك، واكتب console.log("Hello") في Console ثم اضغط Enter، وبهذا تكون شغّلت JavaScript. بعد ذلك تعلّم المتغيرات والدوال والشروط والحلقات والمصفوفات والكائنات، وطبّقها على صفحة ويب بسيطة.

ما هي JavaScript وأين تعمل؟

صفحة الويب تُبنى عادة من ثلاث طبقات:

• HTML يعطي الصفحة هيكلها: العناوين والفقرات والأزرار.
• CSS يتحكم في الشكل: الألوان والخطوط وترتيب العناصر.
• JavaScript تضيف السلوك: الاستجابة للنقر، والتحقق من النماذج، وتحديث المحتوى دون إعادة تحميل الصفحة.

بدأت JavaScript داخل المتصفح، لكنها اليوم تعمل خارجه أيضاً بفضل Node.js، وهي بيئة تشغّل ملفات JavaScript من الطرفية. لهذا تجدها في جانبي تطوير الويب، وإذا كانت هذه المصطلحات جديدة عليك فاقرأ الفرق بين Frontend وBackend.

	في المتصفح	في Node.js
طريقة التشغيل	Console أو وسم <script> في صفحة HTML	الأمر node app.js في الطرفية
تعديل صفحات الويب (DOM)	نعم	لا، لا توجد صفحة
الوصول إلى ملفات جهازك	فقط الملفات التي يختارها المستخدم	نعم
الاستخدام الشائع	المواقع التفاعلية	الخوادم والأدوات والسكربتات

أساس اللغة (المتغيرات والدوال والحلقات) واحد في المكانين، والاختلاف في البيئة المحيطة بها فقط.

شغّل أول كود في Console المتصفح

1. افتح أي صفحة ويب في Chrome أو Edge أو Firefox.
2. اضغط F12 (أو انقر بزر الفأرة الأيمن واختر Inspect)، ثم افتح تبويب Console.
3. اكتب السطرين التاليين، كل سطر على حدة، واضغط Enter بعد كل منهما:

console.log("Hello, Taqnio!");
2 + 3

السطر الأول يطبع Hello, Taqnio! والثاني يعرض 5. الأمر console.log هو أداتك الأساسية لترى ما يفعله الكود، وستستخدمه باستمرار.

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

تشغيل ملف باستخدام Node.js

عندما تريد حفظ الكود في ملف، ثبّت نسخة LTS من Node.js من موقعه الرسمي nodejs.org، وتأكد من التثبيت بالأمر node --version، ثم أنشئ ملفاً باسم app.js وشغّله:

node app.js

المحرر الجيد يسهّل عليك هذا كثيراً، راجع إعدادات VS Code الأساسية وإضافاته.

المتغيرات: let وconst

المتغير صندوق له اسم ويحفظ قيمة.

let age = 25;
age = 26;            // let allows a new value
const name = "Sara"; // const cannot be reassigned
console.log(name, age); // Sara 26

ابدأ دائماً بـ const، وانتقل إلى let فقط عندما تحتاج فعلاً تغيير القيمة. إذا حاولت إسناد قيمة جديدة إلى const فستظهر رسالة الخطأ TypeError: Assignment to constant variable.

أنواع البيانات التي ستستخدمها يومياً

const city = "Riyadh";  // string (text)
const price = 19.5;     // number (whole or decimal)
const isOpen = true;    // boolean (true or false)
let notSet;             // undefined (no value yet)
const empty = null;     // null (deliberately empty)

console.log(typeof city, typeof price, typeof isOpen); // string number boolean

انتبه لمفاجأة مشهورة: العلامة + تدمج النصوص بدلاً من الجمع إذا كان أحد الطرفين نصاً.

console.log("5" + 3);         // 53
console.log(Number("5") + 3); // 8

الدوال والشروط والحلقات

الدوال

الدالة مجموعة أسطر لها اسم، تكتبها مرة وتستخدمها كلما احتجت:

function greet(name) {
  return "Hello, " + name + "!";
}

const add = (a, b) => a + b; // arrow function, a shorter form

console.log(greet("Omar")); // Hello, Omar!
console.log(add(2, 3));     // 5

ويمكنك تركيب النصوص بطريقة أسهل باستخدام علامات backtick، مثل: `Welcome, ${name}`.

الشروط

const score = 72;

if (score >= 90) {
  console.log("Excellent");
} else if (score >= 60) {
  console.log("Passed");
} else {
  console.log("Try again");
}

للمقارنة استخدم === (المساواة الصارمة). أما == القديمة فتحوّل الأنواع قبل المقارنة، لذلك 5 == "5" نتيجتها true بينما 5 === "5" نتيجتها false.

الحلقات

for (let i = 1; i <= 3; i++) {
  console.log("Round " + i);
}

let count = 3;
while (count > 0) {
  console.log(count);
  count--;
}

حلقة for تطبع من Round 1 إلى Round 3، وحلقة while تعدّ تنازلياً 3 ثم 2 ثم 1.

المصفوفات والكائنات

المصفوفة (Array) قائمة مرتبة، وترقيم عناصرها يبدأ من 0.

const fruits = ["apple", "banana", "orange"];
fruits.push("mango");       // add to the end
console.log(fruits[0]);     // apple
console.log(fruits.length); // 4

for (const fruit of fruits) {
  console.log(fruit);
}

الكائن (Object) يجمع قيماً مترابطة تحت أسماء تسمى المفاتيح:

const user = { name: "Sara", age: 25, city: "Riyadh" };
console.log(user.name); // Sara
user.age = 26;          // allowed, even though user is const

const تمنعك من استبدال الكائن كله، لكنها لا تمنع تعديل ما بداخله. ومعظم البيانات التي ستتعامل معها لاحقاً، مثل بيانات JSON القادمة من واجهات API، عبارة عن مصفوفات من الكائنات.

أول مثال على DOM: اجعل زراً يعمل

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

الملف index.html:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>My first JavaScript</title>
</head>
<body>
  <button id="btn">Click me</button>
  <p id="msg">No clicks yet</p>

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

الملف app.js:

const btn = document.getElementById("btn");
const msg = document.getElementById("msg");
let clicks = 0;

btn.addEventListener("click", () => {
  clicks++;
  msg.textContent = "Clicks: " + clicks;
});

افتح index.html في المتصفح بالنقر عليه نقراً مزدوجاً، ثم اضغط الزر. كل نقرة تشغّل الدالة، فتزيد العدّاد وتحدّث نص الفقرة.

لاحظ أن وسم <script> موجود في نهاية <body>، وبهذا يكون الزر موجوداً في الصفحة عندما يبحث عنه الكود.

أخطاء JavaScript الأولى ومعنى رسائلها

الخطأ	ما تراه	الحل
تشغيل الكود قبل وجود العنصر	Cannot read properties of null	ضع <script> في نهاية <body> أو أضف له defer
اسم مكتوب خطأ أو بحروف كبيرة وصغيرة مختلفة	ReferenceError: ... is not defined أو ... is not a function	اللغة تفرّق بين الحروف: getElementById وليس getElementByID
استخدام = بدلاً من === في الشرط	الشرط يُسند قيمة بدلاً من أن يقارن	= للإسناد و=== للمقارنة
إسناد قيمة جديدة إلى const	TypeError: Assignment to constant variable.	استخدم let إذا كانت القيمة ستتغير
جمع نص مع رقم	"5" + 3 تعطي "53"	حوّل النص أولاً باستخدام Number()

عندما يتعطل شيء، افتح Console أولاً، فرسالة الخطأ تذكر غالباً سبب المشكلة ورقم السطر.

خطوتك التالية بعد الأساسيات

1. أعد بناء صفحة الزر من ذاكرتك، ثم طوّرها: أضف زراً لتصفير العدّاد، أو اعرض رسالة بعد عشر نقرات.
2. تعلّم دوال المصفوفات مثل map وfilter، فستستخدمها كثيراً.
3. تعلّم fetch لجلب البيانات من واجهة API، وتدرّب بمشروع صغير مثل قائمة مهام.
4. عندما ترتاح مع الأساسيات، جرّب كتابة سكربتات Node.js، ثم أحد أطر العمل لاحقاً.

وللحصول على خطة كاملة، اقرأ كيف تبدأ تعلم البرمجة من الصفر. وأفضل مرجع مجاني أثناء التعلم هو موقع MDN، الذي يشرح كل ميزة في اللغة مع أمثلة.

المصادر الرسمية: دليل JavaScript على MDN · مقدمة DOM على MDN · Node.js