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

جدول المحتويات

1. المتغيرات
2. صفائف
3. عبارات مشروطة
4. وظائف
5. أشياء
6. DOM (نموذج كائن المستند)
7. الأحداث
8. دمج HTML و JavaScript

---

1. المتغيرات

المتغيرات هي حاويات للبيانات المستخدمة في برامجك. تقدم JavaScript طريقتين رئيسيتين لإعلانهما:

• دع : للمتغيرات التي قد تتغير قيمها.
• const : للقيم التي يجب أن تظل ثابتة.

مثال:

let age = 25;
const name = "Mario";

يمكن أن تحتفظ المتغيرات

بأرقام أو نص (سلاسل) أو قيم حقيقية/خاطئة (منطقية) أو حتى قيم غير محددة. يوفر JavaScript عوامل حسابية قياسية (، -،*، /، ٪) ومشغل الأسعار (**).

console.log(2 ** 3); // Output: 8

---

2. المصفوفات

صفائف تخزن قيم متعددة داخل متغير واحد. استخدم أقواس مربعة لتحديد صفيف:

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

الوصول إلى عناصر باستخدام فهرسها (بدءًا من 0):

console.log(fruits[0]); // Output: apple

إضافة وإزالة العناصر:

المصفوفات ديناميكية ؛ يمكنك تعديلها:

• . push () : يضيف عنصرًا إلى النهاية.
• . Unshift () : يضيف عنصرًا إلى البداية.
• . pop () : يزيل العنصر الأخير.
• . Shift () : يزيل العنصر الأول.

مثال:

fruits.push("orange");
console.log(fruits); // Output: ["apple", "banana", "cherry", "orange"]

البحث المصفوفات:

• . indexof () : يجد فهرس القيمة.

console.log (fruits.indexof ("banana")) ؛ // الإخراج: 1 console.log (fruits.includes ("Grape")) ؛ // الإخراج: false

console.log(fruits.indexOf("banana")); // Output: 1
console.log(fruits.includes("grape")); // Output: false

---

3. البيانات الشرطية

تتيح البيانات الشرطية الكود الخاص بك اتخاذ القرارات.

if

و أخرى شائعة الاستخدام:

إذا (الصف> 60) { console.log ("لقد مرت!") ؛ } آخر { console.log ("لقد فشلت!") ؛ }

if (grade > 60) {
  console.log("You passed!");
} else {
  console.log("You failed!");
}

عوامل المقارنة:

هذه المشغلين ضرورية لتقييم الشروط:

===
• (مساواة صارمة)
! ==
• (عدم المساواة الصارمة)
>
• (أكبر من)
(أقل من) > =
• (أكبر من أو يساوي)
(أقل من أو يساوي)

---

4. وظائف

وظائف هي كتل قابلة لإعادة الاستخدام من الكود. حددها باستخدام الدالة

الكلمة الرئيسية:

وظيفة تحية (الاسم) { إرجاع `hello ، $ {name}!` ؛ } console.log (تحية ("أليس")) ؛ // الإخراج: مرحبًا ، أليس!

if (grade > 60) {
  console.log("You passed!");
} else {
  console.log("You failed!");
}

المعلمات والوسائط:

يمكن أن تقبل الدالات مدخلات (

معلمات

) واستخدامها عند استدعاءها مع وسيطات :

وظيفة إضافة (a ، b) { إرجاع ب ؛ } console.log (إضافة (2 ، 3)) ؛ // الإخراج: 5

console.log(fruits.indexOf("banana")); // Output: 1
console.log(fruits.includes("grape")); // Output: false

---

5. أشياء

الكائنات هي مجموعات من أزواج القيمة الرئيسية ، مثل databases المصغرة:

const car = { العلامة التجارية: "تسلا" ، النموذج: "النموذج 3" ، السنة: 2020 } ؛ console.log (car.brand) ؛ // الإخراج: Tesla

if (grade > 60) {
  console.log("You passed!");
} else {
  console.log("You failed!");
}

طرق في الكائنات:

يمكن أن تحتوي الكائنات أيضًا على وظائف (

طرق

):

const phone = { العلامة التجارية: "Apple" ، جرس() { console.log ("الحلقة ، الحلقة!؟") ؛ } } ؛ phone.ring () ؛

console.log(fruits.indexOf("banana")); // Output: 1
console.log(fruits.includes("grape")); // Output: false

---

6. DOM (نموذج كائن المستند)

يتيح DOM لجافا سكريبت التفاعل مع عناصر HTML.

اختيار العناصر:

استخدم مستند

كائن لتحديد العناصر:

const adiding = document.queryselector ("H1") ؛ console.log (heading.innertext) ؛ // يسجل النص داخل علامة

if (grade > 60) {
  console.log("You passed!");
} else {
  console.log("You failed!");
}

تحديث العناصر:

تعديل المحتوى ديناميكيًا:

heading.innertext = "مرحبًا بك في JavaScript!" ؛

console.log(fruits.indexOf("banana")); // Output: 1
console.log(fruits.includes("grape")); // Output: false

---

7. الأحداث

الرد على تصرفات المستخدم (نقرات ، يضغط المفتاح) باستخدام

. addeventListener ()

:

button.addeventListener ("Click" ، () => { console.log ("زر النقر!") ؛ }) ؛

if (grade > 60) {
  console.log("You passed!");
} else {
  console.log("You failed!");
}

مثال: زيادة عداد:

دع العد = 0 ؛ button.addeventListener ("Click" ، () => { عدد ؛ console.log (`$ {count} times`) ؛ }) ؛

console.log(fruits.indexOf("banana")); // Output: 1
console.log(fruits.includes("grape")); // Output: false

---

8. دمج HTML و JavaScript

إضافة JavaScript مباشرة إلى html باستخدام

. JS

ملف:

هذا يختتم رحلة التعلم JavaScript الخاصة بي من المبتدئين إلى المستويات المتوسطة! آمل أن يثبت هذا الدليل مفيدًا. لا تتردد في مشاركة نصائح التعلم الخاصة بك أو طرح أسئلة في التعليقات! ترميز سعيد! ✨

---