🟢 المستوى الأول: أساسيات JavaScript

1. مقدمة عن JavaScript

🔹 ما هي JavaScript؟

• JavaScript هي لغة برمجة مخصصة في الأساس للعمل على المتصفحات لبرمجة المواقع، وهي المسؤولة عن جعل صفحات الويب ديناميكية وتفاعلية.

• بمعنى: لو الـ HTML هو هيكل الموقع، و CSS هو شكله وتصميمه، فإن JavaScript هو العقل الذي يعطيه الحركة والتفاعل.

مثال بسيط:

• زر في صفحة ويب:

  • HTML ينشئ الزر.

  • CSS يحدد لونه وشكله.

  • JavaScript يجعل الزر يقوم بعمل معين عند الضغط عليه (مثل فتح نافذة أو إظهار رسالة).

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

1. إضافة التفاعل (Interactivity):

   • مثل أزرار النقر، إظهار وإخفاء عناصر، النوافذ المنبثقة (Popups).

2. التحقق من البيانات (Validation):

   • مثل التأكد أن المستخدم كتب البريد الإلكتروني بشكل صحيح قبل الإرسال.

3. التأثيرات (Animations & Effects):

   • تحريك الصور أو العناصر على الصفحة.

4. التعامل مع البيانات:

   • إرسال وجلب بيانات من السيرفر باستخدام API بدون إعادة تحميل الصفحة (AJAX, Fetch API).

5. بناء تطبيقات كاملة:

   • مثل تطبيقات الطقس، الألعاب البسيطة، وحتى تطبيقات كبيرة مع مكتبات مثل React أو Vue.

🔹 العلاقة بين JavaScript و HTML و CSS

تخيل عندك سيارة:

• HTML = الهيكل (الشاسيه – الأبواب – الكراسي).

• CSS = التصميم واللون والشكل الداخلي والخارجي.

• JavaScript = المحرك ونظام التحكم (الذي يجعلها تمشي وتستجيب).

📌 بمعنى آخر:

• HTML يبني الأساس.

• CSS يجمل المظهر.

• JavaScript يضيف التفاعل.

🔹 تشغيل JavaScript في المتصفح

فيه أكثر من طريقة لتشغيل أكواد JavaScript:

1. داخل صفحة HTML مباشرة (Internal JS)

تكتب الكود بين وسم <script> و </script> داخل ملف HTML.

مثال:

➡ عند فتح الصفحة سيظهر مربع منبثق برسالة ترحيب.

2. ملف خارجي (External JS)

• الأفضل والأكثر تنظيمًا هو كتابة الكود في ملف مستقل مثلاً: script.js

• ثم ربطه داخل ملف HTML باستخدام:

• 

مثال:

📄 index.html

📄 script.js

3. التجربة السريعة في المتصفح

• افتح أي موقع أو صفحة فارغة.

• اضغط زر الفأرة اليمين → Inspect (فحص) → Console.

• اكتب أي كود JavaScript مثل:

• 

➡ ستظهر النتيجة في الـ Console.