ما هو JavaScript؟

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

لماذا نستخدم JavaScript؟

1. إضافة التفاعلية للموقع:
   باستخدام JavaScript، يمكنك إضافة العديد من التفاعلات مثل: النقر على الأزرار، التنقل بين الصفحات، التمرير، تغيير المحتوى على الصفحة، وعرض الرسائل المنبثقة.
2. التفاعل مع المستخدم:
   يمكن لـ JavaScript التقاط المدخلات من المستخدم (مثل الكتابة في النماذج) والرد عليها فورًا بدون الحاجة لإعادة تحميل الصفحة.
3. التحقق من البيانات في النماذج:
   باستخدام JavaScript، يمكنك التحقق من صحة المدخلات في النماذج (مثل التأكد من أن البريد الإلكتروني صحيح أو أن الحقل غير فارغ) قبل إرسال البيانات إلى الخادم.
4. العمل مع APIs:
   يمكن لـ JavaScript الاتصال بـ APIs لجلب البيانات أو إرسالها، مما يتيح لك إنشاء تطبيقات تفاعلية تتفاعل مع قواعد البيانات.
5. التعامل مع الأحداث (Events):
   JavaScript يتعامل مع الأحداث التي تحدث على الصفحة مثل النقر على الزر، تحريك الماوس، الضغط على المفاتيح، وغيرها.

المفاهيم الأساسية في JavaScript

1. المتغيرات (Variables)

المتغيرات في JavaScript تُستخدم لتخزين البيانات مثل النصوص، الأرقام، أو القيم الأخرى.

• let: يُستخدم لتعريف متغير يمكن تغيير قيمته.
• const: يُستخدم لتعريف متغير ثابت لا يمكن تغييره.
• var: كان يُستخدم في الإصدارات القديمة من JavaScript، ولكنه الآن يُعتبر قديمًا وتم استبداله بـ let و const.

مثال:

let age = 25; // متغير يمكن تغييره
const name = "Ahmad"; // متغير ثابت

2. الأنواع (Data Types)

JavaScript يدعم العديد من الأنواع مثل:

• String: نصوص مثل “Hello”.
• Number: أرقام مثل 10 و 3.14.
• Boolean: قيمتين فقط (true أو false).
• Array: قائمة من العناصر.
• Object: كائن يحتوي على خصائص وطرق.

مثال:

let name = "John"; // String
let age = 30; // Number
let isActive = true; // Boolean
let fruits = ["apple", "banana", "cherry"]; // Array
let person = {name: "Ali", age: 25}; // Object

3. العمليات (Operators)

العمليات هي الأساس في JavaScript لتنفيذ العمليات الحسابية والمنطقية:

• عمليات رياضية: مثل +, -, *, /, %.
• عمليات منطقية: مثل && (AND)، || (OR)، ! (NOT).
• عمليات مقارنة: مثل ==, ===, >, <.

مثال:

let x = 10;
let y = 5;
let result = x + y; // 15 (عملية جمع)
let isEqual = (x === y); // false (مقارنة)

4. الجمل الشرطية (Conditional Statements)

الجمل الشرطية تستخدم لاتخاذ قرارات بناءً على شروط معينة. أكثرها شيوعًا هو if و else.

مثال:

let age = 18;
if (age >= 18) {
    console.log("أنت بالغ");
} else {
    console.log("أنت قاصر");
}

5. الحلقات (Loops)

تُستخدم الحلقات لتنفيذ مجموعة من الأوامر عدة مرات. أشهر الحلقات هي:

• for: للتكرار عدد معين من المرات.
• while: للتكرار طالما أن الشرط صحيح.

مثال:

for (let i = 0; i < 5; i++) {
  console.log(i); // يطبع الأرقام من 0 إلى 4
}

let j = 0;
while (j < 5) {
  console.log(j); // يطبع الأرقام من 0 إلى 4
  j++;
}

6. الدوال (Functions)

الدوال هي مجموعة من التعليمات التي يمكنك استخدامها لتنفيذ مهمة معينة. تُستخدم لتقليل التكرار في الكود وجعل البرمجة أكثر تنظيمًا.

مثال:

function greet(name) {
    console.log("Hello, " + name);
}

greet("Ahmed"); // يطبع "Hello, Ahmed"

7. الكائنات (Objects)

الكائنات هي نوع من البيانات في JavaScript يحتوي على مجموعة من الخصائص (Properties) والطرق (Methods). تُستخدم الكائنات لتمثيل الكيانات المعقدة مثل الأشخاص أو المنتجات.

مثال:

let person = {
  name: "Ali",
  age: 30,
  greet: function() {
    console.log("Hello, " + this.name);
  }
};

person.greet(); // يطبع "Hello, Ali"

8. التعامل مع الأحداث (Event Handling)

واحدة من أهم ميزات JavaScript هي التعامل مع الأحداث. مثلًا، يمكنك التعامل مع حدث الضغط على الزر أو التمرير.

مثال:

document.getElementById("myButton").addEventListener("click", function() {
    alert("تم النقر على الزر");
});

في المثال ده، عند الضغط على الزر الذي يحتوي على id=”myButton”، سيتم عرض رسالة تنبيهية.

9. التفاعل مع الـ DOM (Document Object Model)

JavaScript يُستخدم للتفاعل مع الـ DOM (نموذج الكائنات المستندة إلى المستند)، اللي هو الهيكل الشجري لمحتوى صفحة الويب. من خلال DOM، يمكنك التلاعب بالعناصر على الصفحة مثل النصوص، الصور، الأزرار، إلخ.

مثال:

document.getElementById("myDiv").innerHTML = "نص جديد!";

10. التعامل مع الـ APIs (التفاعل مع البيانات)

JavaScript يسمح لك بالتفاعل مع APIs لجلب البيانات من الخوادم أو إرسالها. يُستخدم fetch لجلب البيانات عبر الإنترنت.

مثال:

fetch('https://api.example.com/data')
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.log('Error:', error));

الخاتمة

JavaScript هي لغة البرمجة التي تضيف التفاعل والحيوية للمواقع الإلكترونية. من خلال JavaScript، يمكنك إجراء العمليات الحسابية، التفاعل مع المستخدم، التحقق من صحة البيانات، التعامل مع الأحداث، التفاعل مع الـ APIs، وأكثر. تعلم JavaScript هو خطوة أساسية لكل مطور ويب، فهي اللغة التي تتيح لك بناء تطبيقات ويب ديناميكية وقوية.