Learn in 10 minutes

Learn in 10 minutes

تعلم JavaScript في 10 دقائق

JavaScript هي لغة برمجة عالية المستوى ومفسرة معروفة بتنوعها واستخدامها الواسع في تطوير الويب. يغطي هذا البرنامج التعليمي ميزات JavaScript الحديثة (ES6+) لمساعدتك على تعلم اللغة بسرعة.

1. كتابة أول برنامج JavaScript الخاص بك

لنبدأ ببرنامج بسيط. أنشئ ملفًا باسم hello.js وأدخل الكود التالي:

console.log("Hello, World!");

احفظ الملف وقم بتشغيل الأمر التالي في الطرفية أو سطر الأوامر:

node hello.js

أو قم بتضمينه في ملف HTML:

<script>
  console.log("Hello, World!");
</script>

سيكون الناتج:

Hello, World!

يوضح هذا البرنامج البسيط وظيفة الإخراج الأساسية في JavaScript. تُستخدم الدالة console.log() لعرض معلومات النص في وحدة التحكم.

2. البنية الأساسية

بنية JavaScript مشابهة للغات أخرى على غرار C. تستخدم فاصلة منقوطة لإنهاء العبارات وأقواس معقوفة {} لتحديد كتل التعليمات البرمجية.

// هذا تعليق على سطر واحد
console.log("Hello, World!");

/*
هذا تعليق متعدد
الأسطر يمتد عبر
عدة أسطر.
*/

القواعد الأساسية للبنية في JavaScript:

  • الفاصلة المنقوطة: اختيارية ولكن موصى بها لإنهاء العبارات
  • التعليقات: تبدأ التعليقات ذات السطر الواحد بـ //، والتعليقات متعددة الأسطر بـ /* */
  • حساسية الأحرف: JavaScript حساسة لحالة الأحرف
  • كتل التعليمات البرمجية: محددة بواسطة الأقواس المعقوفة {}

3. المتغيرات وأنواع البيانات

في JavaScript، يتم الإعلان عن المتغيرات باستخدام let أو const أو var. تفضل JavaScript الحديثة let و const.

إعلان المتغيرات:

let name = "John"; // متغير قابل للتغيير
const age = 25;     // ثابت غير قابل للتغيير
var oldWay = "deprecated"; // تجنب استخدام var

أنواع البيانات الرئيسية في JavaScript:

  • Number: 42, 3.14, -10
  • String: "hello", 'world', `template`
  • Boolean: true, false
  • Undefined: undefined (تم الإعلان عن المتغير ولكن لم يتم تعيينه)
  • Null: null (غياب متعمد للقيمة)
  • Object: {key: "value"}, [1, 2, 3]
  • Symbol: Symbol("description") (ES6+)
  • BigInt: 1234567890123456789012345678901234567890n (ES2020+)

3.1 نوع Number

تستخدم JavaScript أرقام الفاصلة العائمة 64 بت لجميع القيم الرقمية.

let integer = 42;
let float = 3.14159;
let scientific = 2.5e3; // 2500
let hex = 0xFF;         // 255
let binary = 0b1010;    // 10
let octal = 0o10;       // 8

3.2 نوع String

يمكن إنشاء السلاسل باستخدام علامات اقتباس مفردة أو مزدوجة أو قوالب حرفية.

let single = 'سلسلة بعلامات اقتباس مفردة';
let double = "سلسلة بعلامات اقتباس مزدوجة";
let template = `قالب حرفي`;

// قوالب حرفية مع الاستيفاء
let name = "Alice";
let greeting = `مرحبًا، ${name}!`; // "مرحبًا، Alice!"

عمليات السلسلة:

let text = "برمجة JavaScript";
console.log(text.length);        // طول السلسلة: 15
console.log(text.toUpperCase()); // "برمجة JAVASCRIPT"
console.log(text.toLowerCase()); // "برمجة javascript"
console.log(text[0]);            // الحرف الأول: "ب"
console.log(text.slice(0, 6));  // "برمجة"

3.3 نوع Boolean

نوع Boolean له قيمتان: true و false.

let isActive = true;
let isComplete = false;

// العمليات المنطقية
let result1 = true && false;  // false
let result2 = true || false;  // true
let result3 = !true;          // false

3.4 Undefined و Null

undefined تعني أن المتغير قد تم الإعلان عنه ولكن لم يتم تعيين أي قيمة. null هو غياب متعمد لأي قيمة.

let unassigned; // undefined
let empty = null;

if (unassigned === undefined) {
  console.log("المتغير غير محدد");
}

if (empty === null) {
  console.log("القيمة null");
}

4. هياكل البيانات

4.1 Array

المصفوفات هي مجموعات مرتبة وقابلة للتغيير من القيم.

let numbers = [1, 2, 3, 4, 5];
numbers.push(6);        // إضافة عنصر: [1, 2, 3, 4, 5, 6]
numbers.pop();          // إزالة الأخير: [1, 2, 3, 4, 5]
numbers.unshift(0);     // إضافة في البداية: [0, 1, 2, 3, 4, 5]
numbers.shift();        // إزالة الأول: [1, 2, 3, 4, 5]
numbers[0] = 10;        // تعديل: [10, 2, 3, 4, 5]

طرق المصفوفة:

let fruits = ["تفاح", "موز", "برتقال"];

// التكرار
fruits.forEach(fruit => console.log(fruit));

// التحويل
let lengths = fruits.map(fruit => fruit.length); // [4, 3, 6]

## 4.2 Object

الكائنات هي مجموعات من أزواج المفتاح-القيمة.

```javascript
let person = {
  name: "John",
  age: 30,
  city: "New York",
  isStudent: false
};

// الوصول إلى الخصائص
console.log(person.name);       // "John"
console.log(person["age"]);     // 30

// إضافة خصائص
person.country = "USA";
person["occupation"] = "مطور";

// إزالة خصائص
delete person.isStudent;

// طرق الكائن
let keys = Object.keys(person);    // ["name", "age", "city", "country", "occupation"]
let values = Object.values(person); // ["John", 30, "New York", "USA", "مطور"]
let entries = Object.entries(person); // [["name", "John"], ["age", 30], ...]

4.3 Set

المجموعات هي مجموعات من القيم الفريدة.

let numbers = new Set([1, 2, 3, 3, 4, 4, 5]);
console.log(numbers); // Set {1, 2, 3, 4, 5}

// عمليات المجموعة
numbers.add(6);       // إضافة قيمة
numbers.delete(1);    // إزالة قيمة
numbers.has(2);       // true
numbers.size;         // 5

// التكرار
numbers.forEach(num => console.log(num));

4.4 Map

الخرائط هي مجموعات من أزواج المفتاح-القيمة مع أي نوع بيانات كمفاتيح.

let map = new Map();
map.set("name", "Alice");
map.set(1, "رقم واحد");
map.set(true, "منطقي صحيح");

console.log(map.get("name"));    // "Alice"
console.log(map.has(1));         // true
console.log(map.size);           // 3

// التكرار
for (let [key, value] of map) {
  console.log(`${key}: ${value}`);
}

5. العمليات والمعاملات

توفر JavaScript معاملات مختلفة للحسابات والمقارنات.

  • الحسابية: +, -, *, /, %, ** (الأس)
  • المقارنة: ==, ===, !=, !==, >, <, >=, <=
  • المنطقية: &&, ||, !
  • التعيين: =, +=, -=, *=, /=, %=
  • الثلاثي: condition ? expr1 : expr2

5.1 المعاملات الحسابية

let a = 10, b = 3;

console.log(a + b);   // 13
console.log(a - b);   // 7
console.log(a * b);   // 30
console.log(a / b);   // 3.333...
console.log(a % b);   // 1
console.log(a ** b);  // 1000

5.2 معاملات المقارنة

let x = 5, y = 10;

console.log(x == y);    // false
console.log(x === y);   // false (مساواة صارمة)
console.log(x != y);    // true
console.log(x !== y);   // true (عدم مساواة صارمة)
console.log(x > y);     // false
console.log(x < y);     // true
console.log(x >= y);    // false
console.log(x <= y);    // true

5.3 المعاملات المنطقية

let a = true, b = false;

console.log(a && b);   // false
console.log(a || b);   // true
console.log(!a);       // false

6. التحكم في التدفق

6.1 عبارات if

let age = 20;

if (age >= 18) {
  console.log("بالغ");
} else if (age >= 13) {
  console.log("مراهق");
} else {
  console.log("طفل");
}

6.2 عبارة switch

let day = "الاثنين";

switch (day) {
  case "الاثنين":
    console.log("بداية الأسبوع");
    break;
  case "الجمعة":
    console.log("نهاية الأسبوع تقريبًا هنا");
    break;
  default:
    console.log("يوم عادي");
}

6.3 حلقات for

// حلقة for تقليدية
for (let i = 0; i < 5; i++) {
  console.log(i); // 0, 1, 2, 3, 4
}

// حلقة for...of (مصفوفات، سلاسل)
let fruits = ["تفاح", "موز", "برتقال"];
for (let fruit of fruits) {
  console.log(fruit);
}

// حلقة for...in (خصائص الكائن)
let person = {name: "John", age: 30};
for (let key in person) {
  console.log(`${key}: ${person[key]}`);
}

6.4 حلقات while

// حلقة while
let count = 0;
while (count < 5) {
  console.log(count);
  count++;
}

// حلقة do...while
let i = 0;
do {
  console.log(i);
  i++;
} while (i < 5);

6.5 break و continue

for (let i = 0; i < 10; i++) {
  if (i === 5) {
    break; // الخروج من الحلقة
  }
  if (i % 2 === 0) {
    continue; // تخطي الأرقام الزوجية
  }
  console.log(i); // 1, 3
}

7. الدوال

الدوال هي كتل تعليمات برمجية قابلة لإعادة الاستخدام.

7.1 تعريف الدالة

function greet(name) {
  return `مرحبًا، ${name}!`;
}

console.log(greet("Alice")); // "مرحبًا، Alice!"

7.2 تعبيرات الدالة

const multiply = function(a, b) {
  return a * b;
};

console.log(multiply(4, 5)); // 20

7.3 دوال السهم (ES6+)

const add = (a, b) => a + b;
const square = x => x * x;
const greet = name => `مرحبًا، ${name}!`;

console.log(add(2, 3));      // 5
console.log(square(4));      // 16
console.log(greet("Bob"));   // "مرحبًا، Bob!"

7.4 المعلمات الافتراضية

function createUser(name, age = 18, isActive = true) {
  return {name, age, isActive};
}

console.log(createUser("John"));        // {name: "John", age: 18, isActive: true}
console.log(createUser("Alice", 25));  // {name: "Alice", age: 25, isActive: true}

7.5 معلمات rest

function sum(...numbers) {
  return numbers.reduce((total, num) => total + num, 0);
}

console.log(sum(1, 2, 3, 4)); // 10
console.log(sum(5, 10, 15));  // 30

7.6 معامل spread

let numbers = [1, 2, 3];
let moreNumbers = [4, 5, 6];
let allNumbers = [...numbers, ...moreNumbers]; // [1, 2, 3, 4, 5, 6]

let person = {name: "John", age: 30};
let updatedPerson = {...person, city: "New York"}; // {name: "John", age: 30, city: "New York"}

8. الفئات والكائنات (ES6+)

8.1 تعريف الفئة

class Person {
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }

  introduce() {
    return `أنا ${this.name}، عمري ${this.age} سنة`;
  }

  haveBirthday() {
    this.age++;
    return `${this.name} احتفل بعيد ميلاده، الآن عمره ${this.age} سنة`;
  }
}

let person = new Person("John", 25);
console.log(person.introduce());      // "أنا John، عمري 25 سنة"
console.log(person.haveBirthday());   // "John احتفل بعيد ميلاده، الآن عمره 26 سنة"

8.2 الوراثة

class Animal {
  constructor(name, species) {
    this.name = name;
    this.species = species;
  }

  makeSound() {
    return `${this.name} يصدر صوتًا`;
  }
}

class Dog extends Animal {
  constructor(name, breed) {
    super(name, "كلب");
    this.breed = breed;
  }

  makeSound() {
    return `${this.name} ينبح`;
  }

  fetch() {
    return `${this.name} يجلب الكرة`;
  }
}

let dog = new Dog("Buddy", "Golden Retriever");
console.log(dog.makeSound()); // "Buddy ينبح"
console.log(dog.fetch());     // "Buddy يجلب الكرة"

8.3 Getters و Setters

class Circle {
  constructor(radius) {
    this.radius = radius;
  }

  get diameter() {
    return this.radius * 2;
  }

  set diameter(diameter) {
    this.radius = diameter / 2;
  }

  get area() {
    return Math.PI * this.radius ** 2;
  }
}

let circle = new Circle(5);
console.log(circle.diameter); // 10
console.log(circle.area);     // 78.53981633974483

circle.diameter = 20;
console.log(circle.radius);   // 10

9. JavaScript غير المتزامن

9.1 Callbacks

function fetchData(callback) {
  setTimeout(() => {
    callback("تم استلام البيانات");
  }, 1000);
}

fetchData(data => {
  console.log(data); // "تم استلام البيانات" بعد ثانية واحدة
});

9.2 الوعود (Promises)

function fetchData() {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve("تم استلام البيانات");
      // reject("حدث خطأ");
    }, 1000);
  });
}

fetchData()
  .then(data => console.log(data)) // "تم استلام البيانات"
  .catch(error => console.error(error));

9.3 async/await (ES2017+)

async function getData() {
  try {
    let data = await fetchData();
    console.log(data); // "تم استلام البيانات"
  } catch (error) {
    console.error(error);
  }
}

getData();

9.4 Fetch API

async function getUser() {
  try {
    let response = await fetch('https://api.example.com/user');
    let user = await response.json();
    console.log(user);
  } catch (error) {
    console.error('خطأ:', error);
  }
}

10. معالجة الأخطاء

try {
  let result = 10 / 0;
  if (!isFinite(result)) {
    throw new Error("القسمة على صفر");
  }
  console.log(result);
} catch (error) {
  console.error("خطأ:", error.message);
} finally {
  console.log("هذا يعمل دائمًا");
}

11. الوحدات (ES6+)

11.1 التصدير

// math.js
export const PI = 3.14159;

export function add(a, b) {
  return a + b;
}

export default function multiply(a, b) {
  return a * b;
}

11.2 الاستيراد

// main.js
import multiply, { PI, add } from './math.js';

console.log(PI);           // 3.14159
console.log(add(2, 3));    // 5
console.log(multiply(4, 5)); // 20

12. ميزات JavaScript الحديثة

12.1 التفكيك (Destructuring)

// تفكيك المصفوفة
let [first, second, third] = [1, 2, 3];
console.log(first, second, third); // 1 2 3

// تفكيك الكائن
let {name, age} = {name: "John", age: 30, city: "NY"};
console.log(name, age); // John 30

// تفكيك معاملات الدالة
function greet({name, age}) {
  return `مرحبًا ${name}، عمرك ${age} سنة`;
}

12.2 القوالب الحرفية

let name = "Alice";
let age = 25;

// الاستيفاء الأساسي
let greeting = `مرحبًا، ${name}!`;

// سلاسل متعددة الأسطر
let message = `
  الاسم: ${name}
  العمر: ${age}
  الحالة: ${age >= 18 ? "بالغ" : "قاصر"}
`;

// تقييم التعبير
let calculation = `2 + 3 = ${2 + 3}`; // "2 + 3 = 5"

12.3 السلسلة الاختيارية (?.)

let user = {
  profile: {
    name: "John",
    address: {
      city: "New York"
    }
  }
};

console.log(user?.profile?.name);           // "John"
console.log(user?.profile?.age);            // undefined
console.log(user?.profile?.address?.city);  // "New York"
console.log(user?.employment?.company);     // undefined (بدون خطأ)

12.4 الالتصاق الفارغ (??)

let name = "";
let age = 0;
let city = null;
let country = undefined;

console.log(name || "مجهول");    // "مجهول" (السلسلة الفارغة falsy)
console.log(name ?? "مجهول");    // "" (فقط null/undefined)

console.log(age || 18);           // 18 (0 falsy)
console.log(age ?? 18);           // 0 (فقط null/undefined)

console.log(city ?? "مجهول");   // "مجهول"
console.log(country ?? "الولايات المتحدة");    // "الولايات المتحدة"

13. طرق المصفوفة المفيدة

let numbers = [1, 2, 3, 4, 5];

// map: تحويل كل عنصر
let squares = numbers.map(n => n * n); // [1, 4, 9, 16, 25]

// filter: اختيار العناصر
let evens = numbers.filter(n => n % 2 === 0); // [2, 4]

// reduce: تجميع القيم
let sum = numbers.reduce((total, n) => total + n, 0); // 15

// find: إيجاد أول عنصر مطابق
let firstEven = numbers.find(n => n % 2 === 0); // 2

// some: التحقق إذا كان أي عنصر مطابق
let hasEven = numbers.some(n => n % 2 === 0); // true

// every: التحقق إذا كانت جميع العناصر مطابقة
let allPositive = numbers.every(n => n > 0); // true

// sort: ترتيب العناصر
let sorted = numbers.sort((a, b) => b - a); // [5, 4, 3, 2, 1]

14. التاريخ والوقت

let now = new Date();
console.log(now.toString());      // التاريخ والوقت الحالي
console.log(now.getFullYear());   // السنة الحالية
console.log(now.getMonth());      // الشهر الحالي (0-11)
console.log(now.getDate());       // اليوم الحالي (1-31)
console.log(now.getHours());      // الساعة الحالية (0-23)

// تنسيق التواريخ
console.log(now.toLocaleDateString()); // سلسلة تاريخ محلية
console.log(now.toLocaleTimeString()); // سلسلة وقت محلية
console.log(now.toISOString());        // سلسلة بتنسيق ISO

// إنشاء تواريخ محددة
let specificDate = new Date(2025, 0, 1); // 1 يناير 2025
let timestamp = new Date(1640995200000); // من الطابع الزمني

15. التعبيرات المنتظمة

let text = "مرحبًا، بريدي الإلكتروني هو [email protected] وهاتفي هو 123-456-7890";

// نمط البريد الإلكتروني
let emailPattern = /[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}/g;
let emails = text.match(emailPattern); // ["[email protected]"]

// نمط الهاتف
let phonePattern = /\d{3}-\d{3}-\d{4}/g;
let phones = text.match(phonePattern); // ["123-456-7890"]

// طريقة test
let isValidEmail = emailPattern.test("[email protected]"); // true

// طريقة replace
let maskedText = text.replace(phonePattern, "XXX-XXX-XXXX");
console.log(maskedText);

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