دورة JavaScript بالعربية: من الأساسيات إلى التطبيق العملي

المتغيرات وأنواع البيانات (let وconst وtypeof)

[المستوى التطبيقي (Practitioner)] شرح تفصيلي من الصفر إلى الاحتراف لدرس «المتغيرات وأنواع البيانات (let وconst وtypeof)» ضمن وحدة «أساسيات JavaScript والأنواع والعوامل» في دورة JavaScript بالعربية: من الأساسيات إلى التطبيق العملي، مصمم بأسلوب Google Notebook مع ملخص صوتي حواري، وخريطة ذهنية بصرية، وشيفرة برمجية مشروحة، وبطاقات استذكار تفاعلية.
وقت الدراسة
12 دقيقة
الوحدة 1/7: أساسيات JavaScript والأنواع والعوامل المستوى التطبيقي (Practitioner) الدرس #2/35 • 12 دقيقة

المتغيرات وأنواع البيانات (let وconst وtypeof)

[المستوى التطبيقي (Practitioner)] شرح تفصيلي من الصفر إلى الاحتراف لدرس «المتغيرات وأنواع البيانات (let وconst وtypeof)» ضمن وحدة «أساسيات JavaScript والأنواع والعوامل» في دورة JavaScript بالعربية: من الأساسيات إلى التطبيق العملي، مصمم بأسلوب Google Notebook مع ملخص صوتي حواري، وخريطة ذهنية بصرية، وشيفرة برمجية مشروحة، وبطاقات استذكار تفاعلية.

المشروع التطبيقي المتصل: تطبيق إدارة المهام التفاعلي مع تفويض الأحداث والحفظ المحلي (LocalStorage)
دورة JavaScript بالعربية: من الأساسيات إلى التطبيق العملي

🎧 1. الملخص الصوتي والحوار الهندسي المعمّق (Notebook Audio Overview)

🎙️ سؤال المتدرب: لماذا نبدأ بـ «المتغيرات وأنواع البيانات (let وconst وtypeof)» في هذه المرحلة من تعلم JavaScript ES2026، وكيف يرتبط بما قبله وما بعده؟
👨‍💻 المهندس أديب الصلوي: سؤال جوهري! في هندسة البرمجيات، أكبر خطأ يقع فيه المتعلم هو القفز إلى كتابة الكود دون فهم موقع «المتغيرات وأنواع البيانات (let وconst وtypeof)» داخل المعمارية الكلية. داخل وحدة «أساسيات JavaScript والأنواع والعوامل»، يمثّل هذا الدرس حلقة الوصل التي تنقلك إلى المستوى التطبيقي (Practitioner)؛ حيث نطبّق كتابة الشيفرة القياسية وربط المدخلات بالمخرجات مع التحقق من صحة العقود directly داخل مشروع «تطبيق إدارة المهام التفاعلي مع تفويض الأحداث والحفظ المحلي (LocalStorage)».
🎙️ سؤال المتدرب: ما هي أشهر الأخطاء التي يرتكبها المبرمجون في الإنتاج عند التعامل مع «المتغيرات وأنواع البيانات (let وconst وtypeof)» وكيف نتفاداها هنا؟
👨‍💻 المهندس أديب الصلوي: في بيئات الإنتاج الحقيقية، يفترض المبتدئ أن المدخلات ستأتي دائماً بالصيغة المتوقعة أو أن الشبكة لن تنقطع. لذلك في الشيفرة العملية لهذا الدرس ستلاحظ أننا بدأنا بوضع حدود تحقق صارمة (Guard Clauses / Schema Validation) وعزلنا منطق «المتغيرات وأنواع البيانات (let وconst وtypeof)» بحيث يسهل اختباره آلياً دون التأثير على بقية أجزاء النظام.

🧠 2. الخريطة الذهنية والمخطط المعماري للدرس (Mind Map & Visual Flowchart)

خريطة المفاهيم المعمارية (Gemini Notebook Mind Map) — JavaScript ES2026 | الوحدة 1: أساسيات JavaScript والأنواع والعوامل المستوى التطبيقي (Practitioner) المحور المركزي للدرس المتغيرات وأنواع البيانات (let وcons JavaScript ES2026 — من البداية إلى الإنتاج 1. النموذج العقلي والعقد البرمجي تحديد المدخلات والمخرجات والقيود قبل كتابة أي سطر كود تنفيذي 2. التنفيذ النظيف وعزل الأخطاء فصل المسؤوليات والتحقق الصارم ومنع تسرب الحالات غير الصالحة 3. الأداء والتحصين الأمني قياس الاختناقات وحماية الحدود توافقاً مع معايير بيئة الإنتاج 4. التحقق الآلي والدمج بالمشروع اختبار الحالات الحدية والاستثنائية وتوثيق المخرج النهائي في المستودع منصة المهندس أديب الصلوي (https://adeebalsilwy.com) — تصميم تعليمي تفاعلي بأسلوب Google Notebook
عرض مخطط تدفق العمليات التفصيلي (Mermaid Flowchart)
flowchart TB
    subgraph S1["1. التأسيس (أساسيات JavaScript والأنواع والعوامل)"]
        A["فهم المتطلب: المتغيرات وأنواع البيانات (let وconst وtypeof)"] --> B["تعريف العقد والأنواع في JavaScript ES2026"]
    end
    subgraph S2["2. التنفيذ والتحقق (المستوى التطبيقي (Practitioner))"]
        B --> C["كتابة الشيفرة المعزولة"]
        C --> D{"فحص المدخلات والحالات الحدية"}
        D -- "بيانات صالحة" --> E["تنفيذ المنطق الأساسي"]
        D -- "بيانات شاذة" --> F["إرجاع خطأ مهيكل وآمن"]
    end
    subgraph S3["3. الإنتاج (تطبيق إدارة المهام التفاعلي مع...)"]
        E --> G["تسجيل الأثر (Audit/Logs) والدمج في المشروع"]
    end

📊 3. بطاقات الشرائح المتدرجة: من البداية إلى الاحتراف (Slide Deck Cards)

الشريحة 01 • التأسيس

لماذا هذا المفهوم؟

يفكّك «المتغيرات وأنواع البيانات (let وconst وtypeof)» المشكلة الأساسية في JavaScript ES2026 ويمنحك نموذجاً واضحاً لتدفق البيانات.

الشريحة 02 • العقد البرمجي

المدخلات والمخرجات

تحديد الأنواع والشروط المسبقة بدقة يمنع 80% من أخطاء وقت التشغيل قبل وقوعها.

الشريحة 03 • التطبيق

الدمج في المشروع

نربط المخرج مباشرةً بمشروع «تطبيق إدارة المهام التفاعلي مع تفويض الأحداث والحفظ المحلي (LocalStorage)» مع الحفاظ على نظافة الطبقات.

الشريحة 04 • الاحتراف

الأداء والإنتاج

تحصين الكود ضد الحالات الشاذة واختباره آلياً لضمان جاهزيته للنشر الفعلي.

💻 4. المختبر البرمجي المشروح بالاستشهادات (JavaScript ES2026 Code Walkthrough)

// [1] المرحلة (المستوى التطبيقي (Practitioner)) — الوحدة 1: أساسيات JavaScript والأنواع والعوامل
// [2] الهدف التنفيذي: المتغيرات وأنواع البيانات (let وconst وtypeof) داخل مشروع (تطبيق إدارة المهام التفاعلي مع تفويض الأحداث والحفظ المحلي (LocalStorage))
// المتغيرات وأنواع البيانات (let وconst وtypeof) — دورة JavaScript بالعربية: من الأساسيات إلى التطبيق العملي
'use strict';

export class TaskRepository {
  #storageKey = 'adeeb_tasks_v1';

  constructor(storage = window.localStorage) {
    this.storage = storage;
  }

  getAll() {
    try {
      const raw = this.storage.getItem(this.#storageKey);
      return raw ? JSON.parse(raw) : [];
    } catch (err) {
      console.error('Failed to parse stored tasks:', err);
      return [];
    }
  }

  add(title, priority = 'medium') {
    const cleanTitle = String(title ?? '').trim();
    if (!cleanTitle) {
      throw new Error('عنوان المهمة مطلوب ولا يمكن أن يكون فارغاً');
    }
    const tasks = this.getAll();
    const newTask = {
      id: crypto.randomUUID(),
      title: cleanTitle,
      priority,
      completed: false,
      createdAt: new Date().toISOString(),
    };
    const updated = [newTask, ...tasks];
    this.storage.setItem(this.#storageKey, JSON.stringify(updated));
    return newTask;
  }
}
// [3] التحقق النهائي: ضمان سلامة المخرجات وعدم تسرب الأخطاء في بيئة الإنتاج
مرجع [1] تهيئة السياق والحدود المعمارية: نحدّد نطاق الوحدة (أساسيات JavaScript والأنواع والعوامل) ونفصل الاعتماديات لضمان قابلية إعادة الاستخدام.
مرجع [2] التحقق المبكر وتنفيذ المنطق الأساسي: نفحص صحة المدخلات (Fail-Fast) قبل تعديل الحالة لحماية تطبيق إدارة المهام التفاعلي مع تفويض الأحداث والحفظ المحلي (LocalStorage) من البيانات غير الصالحة.
مرجع [3] قابلية الاختبار والمراقبة في الإنتاج: نُخرج نتيجة مهيكلة يسهل التحقق منها في اختبارات الوحدة (Unit Tests) وربطها بسجلات الأداء.

📋 5. جدول المقارنة والمفاضلات الهندسية (Production Data Table)

المعيار الهندسي الممارسة الهشة (تجنّبها) الممارسة الاحترافية المعتمدة الأثر في بيئة الإنتاج
العقد والتحقق تمرير البيانات الخام دون فحص فحص الأنواع والقيود عند حدود الدالة منع الأعطال الصامتة وفساد البيانات
فصل المسؤوليات خلط العرض مع قواعد العمل والتخزين عزل كل مسؤولية في وحدة قابلة للاختبار سهولة التطوير المستقبلي وكتابة الاختبارات
معالجة الفشل إخفاء الخطأ أو كشف تفاصيل حساسة إرجاع خطأ قياسي آمن مع تسجيل السبب أمان أعلى وتشخيص أسرع في الإنتاج

🃏 6. بطاقات الاستذكار التفاعلية (Notebook Flashcards — انقر لإظهار الإجابة)

بطاقة 1: ما هو الدور المعماري لدرس «المتغيرات وأنواع البيانات (let وconst وtypeof)» داخل وحدة «أساسيات JavaScript والأنواع والعوامل»؟

تحقيق كتابة الشيفرة القياسية وربط المدخلات بالمخرجات مع التحقق من صحة العقود بأسلوب منضبط يضمن سلامة البيانات وقابلية الصيانة داخل مشروع تطبيق إدارة المهام التفاعلي مع تفويض الأحداث والحفظ المحلي (LocalStorage).

بطاقة 2: لماذا نرفض الاعتماد على القيم الضمنية غير المتحقق منها في بيئة الإنتاج؟

لأن المدخلات غير المتوقعة في الإنتاج تؤدي إلى أخطاء متسلسلة أو ثغرات أمنية، والتحقق المبكر (Fail-Fast) يوقف الخطأ عند مصدره.

بطاقة 3: ما هو معيار اجتياز هذا الدرس والانتقال إلى الدرس التالي؟

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

🛠️ 7. التمرين العملي وقائمة التحقق الميداني (Hands-On Lab)

  1. التنفيذ المباشر: طبّق شيفرة «المتغيرات وأنواع البيانات (let وconst وtypeof)» داخل بيئة عملك المحلية في مشروع تطبيق إدارة المهام التفاعلي مع تفويض الأحداث والحفظ المحلي (LocalStorage).
  2. اختبار الحالات الحدية (Edge Cases): جرّب تمرير مدخلات فارغة أو غير متوقعة وتحقّق من استجابة الحماية في الخطوة [2].
  3. التوثيق والالتزام: أضف تعليقاً توثيقياً يوضح العقد البرمجي واحفظ تقدمك قبل الانتقال إلى الدرس التالي.

دروس نصية

#1

مقدمة إلى JavaScript وتاريخه ومحرك التنفيذ

#2

مقدمة إلى JavaScript وتاريخه ومحرك التنفيذ

#3

مقدمة إلى JavaScript وتاريخه ومحرك التنفيذ

#4

مقدمة إلى JavaScript وتاريخه ومحرك التنفيذ

#5

مقدمة إلى JavaScript وتاريخه ومحرك التنفيذ

#6

مقدمة إلى JavaScript وتاريخه ومحرك التنفيذ

#7

مقدمة إلى JavaScript وتاريخه ومحرك التنفيذ

#8

المتغيرات وأنواع البيانات (let وconst وtypeof)

#9

المتغيرات وأنواع البيانات (let وconst وtypeof)

#10

المتغيرات وأنواع البيانات (let وconst وtypeof)

#11

المتغيرات وأنواع البيانات (let وconst وtypeof)

#12

المتغيرات وأنواع البيانات (let وconst وtypeof)

#13

المتغيرات وأنواع البيانات (let وconst وtypeof)

#14

المتغيرات وأنواع البيانات (let وconst وtypeof)

#15

العوامل والتعبيرات والأولوية

#16

العوامل والتعبيرات والأولوية

#17

العوامل والتعبيرات والأولوية

#18

العوامل والتعبيرات والأولوية

#19

العوامل والتعبيرات والأولوية

#20

العوامل والتعبيرات والأولوية

#21

العوامل والتعبيرات والأولوية

#22

النصوص والأرقام والعمليات عليها

#23

النصوص والأرقام والعمليات عليها

#24

النصوص والأرقام والعمليات عليها

#25

النصوص والأرقام والعمليات عليها

#26

النصوص والأرقام والعمليات عليها

#27

النصوص والأرقام والعمليات عليها

#28

النصوص والأرقام والعمليات عليها

#29

الإدخال والإخراج: console والتنبيهات

#30

الإدخال والإخراج: console والتنبيهات

#31

الإدخال والإخراج: console والتنبيهات

#32

الإدخال والإخراج: console والتنبيهات

#33

الإدخال والإخراج: console والتنبيهات

#34

الإدخال والإخراج: console والتنبيهات

#35

الإدخال والإخراج: console والتنبيهات

عرض الدروس كاملة تحقق من صفحة تعلم الدورة
درس نصي 2/35
أنت تشاهد
المتغيرات وأنواع البيانات (let وconst وtypeof)