تعلم JavaScript خطوة بخطوة

 

---

مقدمة

JavaScript هي واحدة من أهم لغات البرمجة في العالم، وهي اللغة التي تجعل مواقع الويب تتفاعل مع المستخدم.

إذا كانت:

• HTML = هيكل الصفحة
• CSS = شكل الصفحة
• JavaScript = الحياة والتفاعل داخل الصفحة

فبدون JavaScript ستكون المواقع “صامتة” لا تتحرك ولا تستجيب.

JavaScript تُستخدم اليوم ليس فقط في الويب، بل أيضًا في:

• تطبيقات الهاتف
• تطبيقات سطح المكتب
• السيرفرات (Node.js)
• الألعاب
• الذكاء الاصطناعي أحيانًا

---

الفصل الأول: ما هي JavaScript؟

JavaScript هي لغة برمجة تُستخدم لإضافة التفاعل إلى صفحات الويب.

مثال بسيط:

<button onclick="alert('مرحبا!')">اضغط هنا</button>

عند الضغط على الزر يظهر تنبيه.

---

لماذا JavaScript مهمة؟

• تجعل الموقع تفاعلي
• تتحكم في HTML و CSS
• تُستخدم في كل المواقع الحديثة
• مطلوبة في سوق العمل

---

الفصل الثاني: أول كود JavaScript

الطريقة الأولى (داخل HTML):

<script>
  console.log("مرحبا بالعالم");
</script>

ماذا يحدث؟

يتم طباعة النص في Console داخل المتصفح.

---

أين أرى النتيجة؟

• افتح المتصفح
• اضغط F12
• اختر Console

---

الفصل الثالث: المتغيرات (Variables)

المتغير هو مكان لتخزين البيانات.

var (قديم)

var name = "Ali";

let (حديث)

let age = 25;

const (ثابت)

const country = "Morocco";

---

الفرق:

النوع	قابل للتغيير
var	نعم (قديم)
let	نعم
const	لا

---

الفصل الرابع: أنواع البيانات

1. النصوص (String)

let name = "Ahmed";

---

2. الأرقام (Number)

let age = 30;

---

3. القيم المنطقية (Boolean)

let isStudent = true;

---

4. المصفوفات (Array)

let colors = ["red", "blue", "green"];

---

5. الكائنات (Object)

let user = {
  name: "Ali",
  age: 25
};

---

الفصل الخامس: العمليات الحسابية

let a = 10;
let b = 5;

console.log(a + b);
console.log(a - b);
console.log(a * b);
console.log(a / b);

---

الفصل السادس: الشروط (Conditions)

if

let age = 18;

if (age >= 18) {
  console.log("مسموح بالدخول");
}

---

if / else

let age = 15;

if (age >= 18) {
  console.log("مسموح");
} else {
  console.log("ممنوع");
}

---

else if

let score = 75;

if (score >= 90) {
  console.log("ممتاز");
} else if (score >= 50) {
  console.log("ناجح");
} else {
  console.log("راسب");
}

---

الفصل السابع: الحلقات (Loops)

for

for (let i = 0; i < 5; i++) {
  console.log(i);
}

---

while

let i = 0;

while (i < 5) {
  console.log(i);
  i++;
}

---

الفصل الثامن: الدوال (Functions)

الدوال هي كود يُعاد استخدامه.

مثال:

function greet() {
  console.log("مرحبا!");
}

greet();

---

دالة مع مدخلات:

function sum(a, b) {
  return a + b;
}

console.log(sum(5, 3));

---

الفصل التاسع: الأحداث (Events)

JavaScript تتفاعل مع المستخدم عبر الأحداث.

مثال:

<button onclick="sayHello()">اضغط</button>

<script>
function sayHello() {
  alert("مرحبا!");
}
</script>

---

أحداث مهمة:

• click
• mouseover
• keydown
• submit

---

الفصل العاشر: التعامل مع HTML (DOM)

DOM هو طريقة JavaScript للوصول إلى عناصر HTML.

---

مثال:

<h1 id="title">مرحبا</h1>

<script>
document.getElementById("title").innerHTML = "تم التغيير";
</script>

---

شرح:

• document = الصفحة
• getElementById = اختيار عنصر
• innerHTML = تغيير المحتوى

---

الفصل الحادي عشر: اختيار العناصر

حسب ID

document.getElementById("title");

---

حسب class

document.getElementsByClassName("box");

---

حسب tag

document.getElementsByTagName("p");

---

الفصل الثاني عشر: تغيير CSS

<h1 id="title">نص</h1>

<script>
document.getElementById("title").style.color = "red";
</script>

---

الفصل الثالث عشر: المصفوفات المتقدمة

let fruits = ["apple", "banana", "orange"];

console.log(fruits.length);

---

إضافة عنصر:

fruits.push("mango");

---

حذف عنصر:

fruits.pop();

---

الفصل الرابع عشر: التكرار على المصفوفات

fruits.forEach(function(item) {
  console.log(item);
});

---

الفصل الخامس عشر: الكائنات (Objects)

let user = {
  name: "Ali",
  age: 25,
  city: "Rabat"
};

console.log(user.name);

---

الفصل السادس عشر: JSON

JSON يستخدم لتبادل البيانات.

let data = {
  "name": "Ahmed",
  "age": 20
};

---

الفصل السابع عشر: الأخطاء (Errors)

console.log(x); // خطأ

---

حل الأخطاء:

• استخدام try/catch

try {
  console.log(x);
} catch (error) {
  console.log("حدث خطأ");
}

---

الفصل الثامن عشر: البرمجة غير المتزامنة (Async)

setTimeout

setTimeout(function() {
  console.log("بعد 3 ثواني");
}, 3000);

---

الفصل التاسع عشر: fetch (جلب البيانات)

fetch("https://api.example.com")
  .then(response => response.json())
  .then(data => console.log(data));

---

الفصل العشرون: مشروع بسيط

HTML + JavaScript:

<button onclick="changeText()">اضغط</button>
<h1 id="text">مرحبا</h1>

<script>
function changeText() {
  document.getElementById("text").innerHTML = "تم التغيير!";
}
</script>

---

الفصل الحادي والعشرون: أخطاء المبتدئين

• عدم فهم DOM
• حفظ بدون تطبيق
• تجاهل الأخطاء
• عدم ممارسة المشاريع

---

الفصل الثاني والعشرون: كيف تتعلم JavaScript بسرعة؟

• ابدأ بالتطبيق مباشرة
• اصنع مشاريع صغيرة
• افهم قبل الحفظ
• تدرب يوميًا
• لا تنتقل بسرعة إلى React أو Node.js

---

الفصل الثالث والعشرون: مشاريع للمبتدئين

• آلة حاسبة
• To Do List
• لعبة تخمين الرقم
• تغيير ألوان الصفحة
• عداد تنازلي

---

خاتمة

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

تعلمها يحتاج:

• صبر
• تدريب
• مشاريع

لكن بمجرد إتقانها، ستفتح لك أبواب كبيرة في عالم البرمجة.

تعديل المقال