أول برنامج JavaScript لك — من الكتابة إلى التنفيذ 2026

في المقال السابق، قمنا بتثبيت Node.js وVS Code وتأكدنا من أن بيئة العمل جاهزة. الآن حان الوقت لكتابة أول برنامج JavaScript لك. لا تقلق إذا لم تكن قد كتبت أي كود من قبل — سنبدأ من الصفر تماماً.

في هذا الدليل العملي، سنأخذك خطوة بخطوة من كتابة أول سطر كود إلى تشغيله في الطرفية والمتصفح، مع تمارين وحلول لتثبيت المفاهيم.

لماذا نبدأ ببرنامج "Hello World"؟

برنامج "Hello World" هو تقليد قديم في عالم البرمجة، ويعود إلى السبعينيات. السبب في أهميته:

• يتحقق من أن بيئة العمل تعمل — إذا ظهرت الرسالة، فكل شيء جاهز
• يعرّفك على بنية البرنامج — كيف يُكتب الكود وكيف يُشغّل
• يعطيك إحساساً بالإنجاز — أول برنامج يعمل هو لحظة لا تُنسى
• يبني الثقة — تنتقل من "لا أعرف شيئاً" إلى "أنا أبرمج"

ما هو JavaScript بالضبط؟

قبل أن نكتب الكود، دعنا نفهم ما هي JavaScript:

• لغة برمجة — تعطي المتصفح أو الخادم تعليمات لتنفيذها
• لغة تفسيرية — لا تحتاج إلى ترجمة مسبقة (مثل C++ أو Java)
• لغة ديناميكية — يمكنك تغيير أنواع البيانات أثناء التشغيل
• لغة متعددة المنصات — تعمل في المتصفح، على الخادم (Node.js)، وفي تطبيقات الجوال

أين تعمل JavaScript؟

• في المتصفح: للتفاعل مع الصفحات (أزرار، نماذج، تأثيرات)
• في Node.js: لبناء خوادم وتطبيقات سطر الأوامر
• في تطبيقات الجوال: عبر React Native أو Capacitor
• في تطبيقات سطح المكتب: عبر Electron

الطريقة الأولى: تشغيل JavaScript في الطرفية (Node.js)

الخطوة 1: إنشاء مجلد المشروع

افتح VS Code، ثم:

1. اذهب إلى File → Open Folder
2. أنشئ مجلداً جديداً باسم javascript-learning
3. اختر هذا المجلد

الخطوة 2: إنشاء ملف JavaScript الأول

داخل VS Code:

1. اضغط Ctrl + N (أو Cmd + N على ماك) لإنشاء ملف جديد
2. اضغط Ctrl + S لحفظه
3. احفظه باسم hello.js في مجلد javascript-learning

⚠️ مهم: تأكد من أن امتداد الملف هو .js (وليس .txt أو .jsx). هذا يخبر VS Code أن الملف يحتوي على JavaScript.

الخطوة 3: كتابة أول سطر كود

اكتب في الملف:

console.log("مرحباً بالعالم!");

احفظ الملف بـ Ctrl + S.

شرح الكود:

• console: كائن (object) يمثل "الطرفية" أو "وحدة التحكم"
• .log(): دالة (function) تطبع ما بداخلها
• "مرحباً بالعالم!": نص (string) نريد طباعته
• ;: فاصلة منقوطة تنهي السطر (اختيارية في JavaScript لكن يُفضل كتابتها)

الخطوة 4: تشغيل البرنامج

افتح Terminal في VS Code:

• اضغط Ctrl + ` (أو Cmd + ` على ماك)
• اكتب الأمر التالي:

node hello.js

النتيجة المتوقعة:

مرحباً بالعالم!

🎉 مبروك! لقد كتبت وشغّلت أول برنامج JavaScript لك!

الخطوة 5: إضافة المزيد من الأسطر

الآن، أضف أسطراً أخرى لترى كيف يعمل البرنامج:

console.log("مرحباً بالعالم!");
console.log("اسمي أحمد");
console.log("أتعلم JavaScript");
console.log("اليوم هو يوم رائع!");

شغّل البرنامج مرة أخرى:

node hello.js

النتيجة: مرحباً بالعالم! اسمي أحمد أتعلم JavaScript اليوم هو يوم رائع!

لاحظ: JavaScript تنفذ الأسطر بالترتيب من الأعلى إلى الأسفل.

الطريقة الثانية: تشغيل JavaScript في المتصفح

JavaScript وُلدت في المتصفح، لذلك من المهم أن تتعلم كيف تشغلها هناك.

الخطوة 1: إنشاء ملف HTML

في نفس المجلد javascript-learning، أنشئ ملفاً جديداً باسم index.html:

<!DOCTYPE html>
<html lang="ar" dir="rtl">
<head>
  <meta charset="UTF-8">
  <title>أول برنامج JavaScript</title>
</head>
<body>
  <h1>مرحباً بك في JavaScript!</h1>
  <p>افتح Console لرؤية الرسالة.</p>
  
  <script src="hello.js"></script>
</body>
</html>

الخطوة 2: فتح الملف في المتصفح

1. انقر بزر الفأرة الأيمن على index.html
2. اختر Open with Live Server (إذا كنت قد ثبّت live-server)
3. أو اسحب الملف وأفلته في نافذة المتصفح

الخطوة 3: فتح Console

في المتصفح:

1. اضغط F12 (أو Ctrl + Shift + I)
2. اذهب إلى تبويب Console

يجب أن ترى:

مرحباً بالعالم! اسمي أحمد أتعلم JavaScript اليوم هو يوم رائع!

🎉 مبروك! لقد شغّلت JavaScript في المتصفح أيضاً!

الفرق بين console.log و alert

هناك طريقة أخرى لعرض الرسائل في المتصفح: alert().

alert("مرحباً بالعالم!");

الفرق بينهما:

الفرق:

console.log()	alert()
تطبع في Console	تظهر كنافذة منبثقة
لا توقف البرنامج	توقف البرنامج حتى تضغط OK
للمطورين	للمستخدمين

⚠️ نصيحة: استخدم console.log() دائماً أثناء التعلم، لأن alert() مزعجة.

التعليقات في JavaScript

التعليقات هي أسطر لا ينفذها المترجم، وتستخدم للتوضيح.

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

// هذا تعليق لا ينفذ
console.log("هذا ينفذ");

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

/*
  هذا تعليق
  متعدد الأسطر
  لا ينفذ
*/
console.log("هذا ينفذ");

متى تستخدم التعليقات؟

• لشرح كود معقد
• لتعطيل جزء من الكود مؤقتاً
• لكتابة ملاحظات لنفسك لاحقاً
• لتوثيق الدوال

المتغيرات — أول خطوة نحو البرمجة الحقيقية

الآن بعد أن تعلمت الطباعة، حان وقت تعلم المتغيرات. المتغير هو "صندوق" نخزن فيه قيمة.

let name = "أحمد";
console.log(name);

النتيجة: أحمد

شرح:

• let: كلمة مفتاحية لتعريف متغير
• name: اسم المتغير (تختاره أنت)
• =: علامة الإسناد (assign)
• "أحمد": القيمة المخزنة

أنواع المتغيرات في JavaScript

الكلمة	الوصف	متى تستخدمها
let	متغير قابل للتغيير	الأكثر استخداماً
const	ثابت لا يتغير	للقيم الثابتة
var	الطريقة القديمة	تجنبها في الكود الحديث

مثال:

let age = 25;
const country = "الأردن";
var city = "عمان";

console.log(age);
console.log(country);
console.log(city);

النتيجة: 25 الأردن عمان

أول تفاعل مع المستخدم

يمكنك جعل البرنامج يسأل المستخدم عن اسمه:

const name = prompt("ما اسمك؟");
console.log("مرحباً يا " + name + "!");

⚠️ ملاحظة: prompt() تعمل فقط في المتصفح، وليس في Node.js.

النتيجة في المتصفح:

1. تظهر نافذة تسأل "ما اسمك؟"
2. يكتب المستخدم "أحمد"
3. يظهر في Console: مرحباً يا أحمد!

تمارين عملية

تمرين 1: طباعة معلوماتك

اكتب برنامجاً يطبع: اسمك، عمرك، مدينتك، هوايتك المفضلة.

الحل:

console.log("اسمي: أحمد");
console.log("عمري: 25");
console.log("مدينتي: عمان");
console.log("هوايتي: البرمجة");

تمرين 2: استخدام المتغيرات

أعد كتابة التمرين السابق باستخدام المتغيرات.

الحل:

const name = "أحمد";
const age = 25;
const city = "عمان";
const hobby = "البرمجة";

console.log("اسمي: " + name);
console.log("عمري: " + age);
console.log("مدينتي: " + city);
console.log("هوايتي: " + hobby);

تمرين 3: آلة حاسبة بسيطة

اكتب برنامجاً يطبع مجموع رقمين.

الحل:

const num1 = 10;
const num2 = 5;
const sum = num1 + num2;

console.log("المجموع: " + sum);

النتيجة: المجموع: 15

تمرين 4: الترحيب بالمستخدم

اكتب برنامجاً يسأل المستخدم عن اسمه ثم يرحب به.

الحل:

const userName = prompt("ما اسمك؟");
const greeting = "أهلاً وسهلاً يا " + userName + "!";
console.log(greeting);

تمرين 5: حساب العمر

اكتب برنامجاً يحسب عمرك بعد 10 سنوات.

الحل:

const currentAge = 25;
const futureAge = currentAge + 10;

console.log("عمري الآن: " + currentAge);
console.log("عمري بعد 10 سنوات: " + futureAge);

حل المشاكل الشائعة

🔴 المشكلة 1: SyntaxError: Unexpected token

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

الحل:

• راجع السطر المشار إليه في الخطأ
• تأكد من إغلاق جميع الأقواس (), {}, []
• تأكد من علامات التنصيص "..." أو '...'

🔴 المشكلة 2: ReferenceError: name is not defined

السبب: استخدمت متغيراً قبل تعريفه.

الحل:

// خطأ:
console.log(name);
let name = "أحمد";

// صحيح:
let name = "أحمد";
console.log(name);

🔴 المشكلة 3: node: command not found

السبب: Node.js غير مثبت أو غير مضاف إلى PATH.

الحل: راجع مقال "كيف تثبت JavaScript" لحل هذه المشكلة.

🔴 المشكلة 4: prompt is not defined

السبب: تحاول استخدام prompt() في Node.js (تعمل فقط في المتصفح).

الحل: استخدم readline في Node.js، أو شغّل الكود في المتصفح.

جدول الأوامر الأساسية

الأمر	الوظيفة
console.log()	طباعة رسالة في الطرفية
alert()	نافذة منبثقة في المتصفح
prompt()	سؤال المستخدم في المتصفح
let x = 5;	تعريف متغير قابل للتغيير
const y = 10;	تعريف ثابت
// تعليق	تعليق سطر واحد

قائمة تحقق نهائية

المهمة	الحالة
إنشاء ملف hello.js	⬜
كتابة console.log("مرحباً")	⬜
تشغيل البرنامج بـ node hello.js	⬜
تشغيل JavaScript في المتصفح	⬜
تعلم المتغيرات let و const	⬜
حل التمارين الخمسة	⬜

ماذا بعد هذا المقال؟

الآن بعد أن كتبت أول برنامج، أنت جاهز للمقال التالي:

1. المتغيرات وأنواع البيانات — تعمق في let, const, var
2. الشروط (if/else) — اتخاذ القرارات في الكود
3. الحلقات (for/while) — تكرار المهام

الخلاصة

في هذا المقال، تعلمت:

• ✅ كيفية كتابة أول برنامج JavaScript
• ✅ تشغيل الكود في Node.js والمتصفح
• ✅ الفرق بين console.log() و alert()
• ✅ التعليقات (// و /* */)
• ✅ المتغيرات (let, const, var)
• ✅ التفاعل مع المستخدم (prompt())

تذكر: البرمجة مهارة تُكتسب بالممارسة. لا تكتفِ بالقراءة — اكتب الكود بنفسك، وجرّب، وارتكب الأخطاء، وتعلم منها.

هل نجحت في تشغيل أول برنامج لك؟ شاركنا في التعليقات!

---

✅ بعد نسخ الملف:

1. احفظه في content/articles/first-javascript-program.md.
2. عدّل app/learn/programming/javascript/page.tsx لإضافة المقال الثاني:

const javascriptArticles = [
  { slug: "install-javascript-guide", step: 1 },
  { slug: "first-javascript-program", step: 2 },
];

أعد تشغيل السيرفر:

rm -rf .next
npm run dev