JavaScript

محتوى التوثيق

الدروس مرتّبة من الأساس إلى المتقدّم. اقرأها بالترتيب أو اقفز إلى ما تحتاجه.

1. 01

   الفصل 1

   البداية

   • 1مقدمة إلى JavaScriptJavaScript هي لغة برمجة الويب؛ بها تصبح الصفحات تفاعلية، وتعمل أيضًا خارج المتصفح على الخوادم عبر Node.js.
   • 2أين تكتب JavaScript؟يُكتب كود JavaScript داخل الوسم <script> أو في ملف خارجي بامتداد .js. تعرّف على المكان المناسب له، ولماذا تُعد الخاصية defer مهمة.
   • 3عرض المخرجاتاعرض النتائج باستخدام console.log()، أو اكتبها داخل عناصر الصفحة عبر textContent وinnerHTML، أو أظهر رسالة سريعة باستخدام alert().
   • 4قواعد الكتابة (Syntax)تعرّف على قواعد كتابة JavaScript: التعليمات، والفاصلة المنقوطة، وحساسية حالة الأحرف، والمعرّفات، وكتل الكود.
   • 5التعليقاتالتعليقات تشرح الكود ويتجاهلها البرنامج عند التشغيل. استخدم // لتعليق من سطر واحد، و/* */ لتعليق من عدة أسطر.
2. 02

   الفصل 2

   المتغيرات والبيانات

   • 6المتغيراتالمتغيرات حاويات لها أسماء لتخزين البيانات. تعلّم تعريفها باستخدام let وconst، وافهم الكلمة القديمة var ولماذا نتجنبها.
   • 7أنواع البياناتفي JavaScript سبعة أنواع بيانات بدائية إضافةً إلى الكائنات. تعرّف عليها، واستخدم العامل typeof لمعرفة نوع أي قيمة.
   • 8العوامل (Operators)العوامل تُجري العمليات على القيم: عوامل حسابية، وعوامل إسناد، وعوامل مقارنة، وعوامل منطقية، إضافةً إلى العاملين الحديثين ?? و?..
   • 9النصوص (Strings)النصوص تخزّن الكتابة. تعلّم علامات الاقتباس، والقوالب النصية (Template Literals)، ورموز الهروب، والخاصية length.
   • 10دوال النصوصتوفّر JavaScript دوالًا جاهزة للبحث في النصوص وقصّها وتغيير حالة أحرفها وحذف المسافات منها وتقسيمها. إليك أكثرها استخدامًا.
   • 11الأعداد والكائن Mathفي JavaScript نوع واحد للأعداد يشمل الصحيحة والعشرية. تعرّف على دقة الحسابات العشرية، والدالة toFixed()، وتحويل النصوص إلى أعداد، والقيمة NaN، والكائن Math.
   • 12القيم المنطقية والمقارناتالقيمة المنطقية إما true أو false. تعرّف على القيم التي تُعامل كصحيحة أو خاطئة (Truthy وFalsy)، ولماذا يجب أن تستخدم === بدلًا من ==.
3. 03

   الفصل 3

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

   • 13الجمل الشرطية if...elseاستخدم if وelse if وelse لتنفيذ أكواد مختلفة حسب الشروط، والعامل الثلاثي لاتخاذ القرارات القصيرة.
   • 14الجملة switchتقارن الجملة switch قيمة واحدة بعدة حالات محتملة، وهي بديل مرتب لسلاسل else if الطويلة.
   • 15الحلقة forتكرر الحلقة for الكود عددًا محددًا من المرات، وهي مثالية للعد والمرور على عناصر المصفوفات.
   • 16الحلقتان while وdo...whileتكرر الحلقة while الكود ما دام الشرط صحيحًا، بينما تُنفَّذ do...while مرة واحدة على الأقل. وتتحكم في الحلقات باستخدام break وcontinue.
   • 17الحلقتان for...of وfor...inتمر الحلقة for...of على قيم المصفوفات والنصوص، بينما تمر for...in على مفاتيح الكائن.
4. 04

   الفصل 4

   الدوال

   • 18الدوال (Functions)الدوال كتل كود قابلة لإعادة الاستخدام. تعلّم كيف تعرّفها، وتمرر لها المعاملات، وتضع لها قيمًا افتراضية، وتُرجع منها النتائج.
   • 19الدوال السهميةالدوال السهمية طريقة أقصر لكتابة الدوال باستخدام =>، وتجدها في كل مكان في JavaScript الحديثة، خصوصًا مع دوال المصفوفات.
   • 20النطاق والإغلاقاتيحدد النطاق (Scope) أين يمكن استخدام المتغير: نطاق الكتلة، أو نطاق الدالة، أو النطاق العام. أما الإغلاقات (Closures) فتجعل الدوال تتذكر متغيرات النطاق الذي أُنشئت فيه.
5. 05

   الفصل 5

   المصفوفات والكائنات

   • 21المصفوفات (Arrays)المصفوفات تخزّن قوائم مرتبة من القيم. تعلّم كيف تنشئها، وتصل إلى عناصرها بالموضع، وتضيف العناصر وتحذفها وتبحث عنها وترتّبها.
   • 22دوال المصفوفات: map وfilter وreduceتعامل مع المصفوفات باحتراف باستخدام forEach وmap وfilter وreduce وfind وsome وevery، مع أمثلة عملية على درجات الطلاب.
   • 23الكائنات (Objects)تجمع الكائنات البيانات المترابطة وسلوكها في أزواج من المفاتيح والقيم. تعلّم الخصائص والدوال والكلمة this، وطرق المرور على الكائنات.
   • 24التفكيك وعامل النشريستخرج التفكيك (Destructuring) القيم من المصفوفات والكائنات إلى متغيرات مباشرة، ويُستخدم عامل النشر ... لنسخ القيم ودمجها، وصيغة البقية لتجميعها.
   • 25التعامل مع JSONJSON هي الصيغة النصية المعتمدة لتبادل البيانات. حوّل الكائنات إلى JSON باستخدام JSON.stringify()، وأعدها إلى كائنات باستخدام JSON.parse().
6. 06

   الفصل 6

   المتصفح

   • 26التعامل مع DOMالـ DOM هو النموذج الحي للصفحة داخل JavaScript. تعلّم اختيار العناصر وتغيير نصوصها ومحتواها وتنسيقاتها وأصنافها، وإنشاء عناصر جديدة.
   • 27الأحداث (Events)الأحداث تجعل كودك يستجيب للمستخدم. استخدم addEventListener() مع النقر والكتابة وإرسال النماذج، واقرأ كائن الحدث، وتعرّف على تفويض الأحداث.
   • 28النماذج والتحقق من المدخلاتاقرأ القيم من حقول النموذج، وتحقق منها باستخدام JavaScript، واعرض رسائل خطأ واضحة، وأوقف الإرسال غير الصالح باستخدام preventDefault().
7. 07

   الفصل 7

   JavaScript الحديثة

   • 29الأصناف (Classes)الأصناف (Classes) قوالب لإنشاء الكائنات. تعلّم الدالة البانية constructor، والدوال، والوراثة باستخدام extends وsuper، ودوال القراءة (Getters).
   • 30معالجة الأخطاءتعامل مع الأخطاء بذكاء باستخدام try وcatch وfinally، وأنشئ أخطاءك الخاصة باستخدام throw، وتعرّف على أنواع الأخطاء الشائعة.
   • 31الوعود وasync/awaitتعامل مع المهام التي تستغرق وقتًا دون تجميد الصفحة. تعلّم setTimeout، والوعود (Promises) مع then وcatch، والصيغة الأوضح async وawait.
   • 32جلب البيانات باستخدام Fetch APIاستخدم fetch() مع async وawait لجلب بيانات JSON من الخادم، والتحقق من الاستجابة، ومعالجة أخطاء الشبكة بالشكل الصحيح.