JavaScript
أول برنامج JavaScript لك — من الكتابة إلى التنفيذ 2026
📅 2026-09-21⏱ 8 دقائق قراءة
في المقال السابق، قمنا بتثبيت 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: كتابة أول سطر كود
اكتب في الملف:
```javascript
console.log("مرحباً بالعالم!");
```
احفظ الملف بـ `Ctrl + S`.
**شرح الكود:**
- `console`: كائن (object) يمثل "الطرفية" أو "وحدة التحكم"
- `.log()`: دالة (function) تطبع ما بداخلها
- `"مرحباً بالعالم!"`: نص (string) نريد طباعته
- `;`: فاصلة منقوطة تنهي السطر (اختيارية في JavaScript لكن يُفضل كتابتها)
### الخطوة 4: تشغيل البرنامج
افتح Terminal في VS Code:
- اضغط `` Ctrl + ` `` (أو `` Cmd + ` `` على ماك)
- اكتب الأمر التالي:
```bash
node hello.js
```
**النتيجة المتوقعة:**
مرحباً بالعالم!
**🎉 مبروك! لقد كتبت وشغّلت أول برنامج JavaScript لك!**
### الخطوة 5: إضافة المزيد من الأسطر
الآن، أضف أسطراً أخرى لترى كيف يعمل البرنامج:
```javascript
console.log("مرحباً بالعالم!");
console.log("اسمي أحمد");
console.log("أتعلم JavaScript");
console.log("اليوم هو يوم رائع!");
```
شغّل البرنامج مرة أخرى:
```bash
node hello.js
```
**النتيجة:**
مرحباً بالعالم!
اسمي أحمد
أتعلم JavaScript
اليوم هو يوم رائع!
**لاحظ:** JavaScript تنفذ الأسطر بالترتيب من الأعلى إلى الأسفل.
## الطريقة الثانية: تشغيل JavaScript في المتصفح
JavaScript وُلدت في المتصفح، لذلك من المهم أن تتعلم كيف تشغلها هناك.
### الخطوة 1: إنشاء ملف HTML
في نفس المجلد `javascript-learning`، أنشئ ملفاً جديداً باسم `index.html`:
```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()`.
```javascript
alert("مرحباً بالعالم!");
```
**الفرق بينهما:**
**الفرق:**
<table>
<thead>
<tr>
<th>console.log()</th>
<th>alert()</th>
</tr>
</thead>
<tbody>
<tr>
<td>تطبع في Console</td>
<td>تظهر كنافذة منبثقة</td>
</tr>
<tr>
<td>لا توقف البرنامج</td>
<td>توقف البرنامج حتى تضغط OK</td>
</tr>
<tr>
<td>للمطورين</td>
<td>للمستخدمين</td>
</tr>
</tbody>
</table>
**⚠️ نصيحة:** استخدم `console.log()` دائماً أثناء التعلم، لأن `alert()` مزعجة.
## التعليقات في JavaScript
التعليقات هي أسطر لا ينفذها المترجم، وتستخدم للتوضيح.
### تعليق سطر واحد
```javascript
// هذا تعليق لا ينفذ
console.log("هذا ينفذ");
```
### تعليق متعدد الأسطر
```javascript
/*
هذا تعليق
متعدد الأسطر
لا ينفذ
*/
console.log("هذا ينفذ");
```
### متى تستخدم التعليقات؟
- لشرح كود معقد
- لتعطيل جزء من الكود مؤقتاً
- لكتابة ملاحظات لنفسك لاحقاً
- لتوثيق الدوال
## المتغيرات — أول خطوة نحو البرمجة الحقيقية
الآن بعد أن تعلمت الطباعة، حان وقت تعلم المتغيرات. المتغير هو "صندوق" نخزن فيه قيمة.
```javascript
let name = "أحمد";
console.log(name);
```
**النتيجة:**
أحمد
**شرح:**
- `let`: كلمة مفتاحية لتعريف متغير
- `name`: اسم المتغير (تختاره أنت)
- `=`: علامة الإسناد (assign)
- `"أحمد"`: القيمة المخزنة
### أنواع المتغيرات في JavaScript
<table>
<thead>
<tr>
<th>الكلمة</th>
<th>الوصف</th>
<th>متى تستخدمها</th>
</tr>
</thead>
<tbody>
<tr>
<td><code>let</code></td>
<td>متغير قابل للتغيير</td>
<td>الأكثر استخداماً</td>
</tr>
<tr>
<td><code>const</code></td>
<td>ثابت لا يتغير</td>
<td>للقيم الثابتة</td>
</tr>
<tr>
<td><code>var</code></td>
<td>الطريقة القديمة</td>
<td>تجنبها في الكود الحديث</td>
</tr>
</tbody>
</table>
**مثال:**
```javascript
let age = 25;
const country = "الأردن";
var city = "عمان";
console.log(age);
console.log(country);
console.log(city);
```
**النتيجة:**
25
الأردن
عمان
## أول تفاعل مع المستخدم
يمكنك جعل البرنامج يسأل المستخدم عن اسمه:
```javascript
const name = prompt("ما اسمك؟");
console.log("مرحباً يا " + name + "!");
```
**⚠️ ملاحظة:** `prompt()` تعمل فقط في المتصفح، وليس في Node.js.
**النتيجة في المتصفح:**
1. تظهر نافذة تسأل "ما اسمك؟"
2. يكتب المستخدم "أحمد"
3. يظهر في Console: `مرحباً يا أحمد!`
## تمارين عملية
### تمرين 1: طباعة معلوماتك
اكتب برنامجاً يطبع: اسمك، عمرك، مدينتك، هوايتك المفضلة.
**الحل:**
```javascript
console.log("اسمي: أحمد");
console.log("عمري: 25");
console.log("مدينتي: عمان");
console.log("هوايتي: البرمجة");
```
### تمرين 2: استخدام المتغيرات
أعد كتابة التمرين السابق باستخدام المتغيرات.
**الحل:**
```javascript
const name = "أحمد";
const age = 25;
const city = "عمان";
const hobby = "البرمجة";
console.log("اسمي: " + name);
console.log("عمري: " + age);
console.log("مدينتي: " + city);
console.log("هوايتي: " + hobby);
```
### تمرين 3: آلة حاسبة بسيطة
اكتب برنامجاً يطبع مجموع رقمين.
**الحل:**
```javascript
const num1 = 10;
const num2 = 5;
const sum = num1 + num2;
console.log("المجموع: " + sum);
```
**النتيجة:**
المجموع: 15
### تمرين 4: الترحيب بالمستخدم
اكتب برنامجاً يسأل المستخدم عن اسمه ثم يرحب به.
**الحل:**
```javascript
const userName = prompt("ما اسمك؟");
const greeting = "أهلاً وسهلاً يا " + userName + "!";
console.log(greeting);
```
### تمرين 5: حساب العمر
اكتب برنامجاً يحسب عمرك بعد 10 سنوات.
**الحل:**
```javascript
const currentAge = 25;
const futureAge = currentAge + 10;
console.log("عمري الآن: " + currentAge);
console.log("عمري بعد 10 سنوات: " + futureAge);
```
## حل المشاكل الشائعة
### 🔴 المشكلة 1: SyntaxError: Unexpected token
**السبب:** خطأ في كتابة الكود (فاصلة منقوطة ناقصة، قوس غير مغلق...).
**الحل:**
- راجع السطر المشار إليه في الخطأ
- تأكد من إغلاق جميع الأقواس `()`, `{}`, `[]`
- تأكد من علامات التنصيص `"..."` أو `'...'`
### 🔴 المشكلة 2: ReferenceError: name is not defined
**السبب:** استخدمت متغيراً قبل تعريفه.
**الحل:**
```javascript
// خطأ:
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، أو شغّل الكود في المتصفح.
## جدول الأوامر الأساسية
<table>
<thead>
<tr>
<th>الأمر</th>
<th>الوظيفة</th>
</tr>
</thead>
<tbody>
<tr>
<td><code>console.log()</code></td>
<td>طباعة رسالة في الطرفية</td>
</tr>
<tr>
<td><code>alert()</code></td>
<td>نافذة منبثقة في المتصفح</td>
</tr>
<tr>
<td><code>prompt()</code></td>
<td>سؤال المستخدم في المتصفح</td>
</tr>
<tr>
<td><code>let x = 5;</code></td>
<td>تعريف متغير قابل للتغيير</td>
</tr>
<tr>
<td><code>const y = 10;</code></td>
<td>تعريف ثابت</td>
</tr>
<tr>
<td><code>// تعليق</code></td>
<td>تعليق سطر واحد</td>
</tr>
</tbody>
</table>
## قائمة تحقق نهائية
<table>
<thead>
<tr>
<th>المهمة</th>
<th>الحالة</th>
</tr>
</thead>
<tbody>
<tr>
<td>إنشاء ملف <code>hello.js</code></td>
<td>⬜</td>
</tr>
<tr>
<td>كتابة <code>console.log("مرحباً")</code></td>
<td>⬜</td>
</tr>
<tr>
<td>تشغيل البرنامج بـ <code>node hello.js</code></td>
<td>⬜</td>
</tr>
<tr>
<td>تشغيل JavaScript في المتصفح</td>
<td>⬜</td>
</tr>
<tr>
<td>تعلم المتغيرات <code>let</code> و <code>const</code></td>
<td>⬜</td>
</tr>
<tr>
<td>حل التمارين الخمسة</td>
<td>⬜</td>
</tr>
</tbody>
</table>
## ماذا بعد هذا المقال؟
الآن بعد أن كتبت أول برنامج، أنت جاهز للمقال التالي:
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` لإضافة المقال الثاني:
```tsx
const javascriptArticles = [
{ slug: "install-javascript-guide", step: 1 },
{ slug: "first-javascript-program", step: 2 },
];
```
أعد تشغيل السيرفر:
```bash
rm -rf .next
npm run dev
```