JavaScript: مقدمة في جافاسكريبت

آخر تحديث: 2026-10-13

جافاسكريبت هي لغة البرمجة للويب — إنها تحيي صفحات HTML الثابتة.

تم تصميم هذه الدورة للمبتدئين تمامًا. سنبدأ بالمتغيرات والدوال، وسنتقدم تدريجيًا حتى نتمكن من بناء تطبيق قائمة مهام كامل بأنفسنا.

1. ما ستتعلمه

• بناء جافاسكريبت الأساسية والمفاهيم الأساسية
• العمل مع المصفوفات والكائنات والدوال
• التلاعب بـ DOM ومعالجة الأحداث
• البرمجة غير المتزامنة والوحدات
• تطبيق عملي للمشروع

▶ مثال

هذا أبسط مثال; الأقسام التالية ستشرح بالتفصيل.## 2. المتطلبات الأساسية

قبل بدء هذه الدورة، يجب أن تكون على دراية بـ:

• أساسيات HTML (العلامات، السمات، النماذج)
• أساسيات CSS (المحددات، نموذج الصندوق)

2. ما هي جافاسكريبت

جافاسكريبت هي لغة نصية تعمل مباشرة في المتصفح — لا حاجة للترجمة. يقوم المتصفح بقراءة وتنفيذ كود JS الخاص بك سطرًا بسطر.

تم تصميم JS في الأصل للمتصفحات فقط، لكن انتشارها توسع منذ ذلك الحين لتشمل الخوادم (Node.js)، وتطبيقات سطح المكتب (Electron)، وحتى تطبيقات الجوالأ (React Native). في هذه الدورة، سنركز على كيفية عمل JS في صفحات الويب.

3. ماذا يمكن أن تفعل جافاسكريبت

تتعامل JS مع كل جانب تقريبًا من جوانب التفاعل على الويب:

• تغيير محتوى HTML — استبدال النص على الصفحة عند النقر على زر
• الاستجابة للأحداث — تشغيل المنطق عندما ينقر المستخدمون أو يمررون أو يكتبون
• التحقق من النماذج — التحقق من تنسيق البريد الإلكتروني وطول كلمة المرور قبل الإرسال
• التلاعب بـ CSS — تغيير الأنماط ديناميكيًا وإنشاء رسوم متحركة
• التواصل مع الخوادم — جلب البيانات دون تحديث الصفحة (AJAX)

باختصار: HTML يبني الهيكل، وCSS ينسقه، وجافاسكريبت تجعله تفاعليًا.

4. جافاسكريبت وHTML/CSS — العلاقة

تخيل صفحة الويب كشخص:

• HTML هو الهيكل العظمي — يحدد هيكل الصفحة
• CSS هو الجلد والملابس — يتحكم في المظهر
• JavaScript هي العضلات — تجعل الصفحة تتحرك وتتفاعل

لكل منها دوره الخاص. يغير JS مظهر الصفحة وسلوكها من خلال التلاعب بعناصر HTML وأنماط CSS.

5. تاريخ مختصر لجافاسكريبت

في عام 1995، كتب Brendan Eich في Netscape الإصدار الأول من جافاسكريبت في 10 أيام فقط. نعم، اللغة التي تسيطر الآن على الويب ولدت في أقل من أسبوعين.

بضعة مفاهيم خاطئة شائعة:

• جافاسكريبت وجافا هما لغتان مختلفتان تمامًا — مثلما يتشاركان اسم "جافاسكريبت" و"جافا"، لكن هذا كل شيء
• كانت JS تسمى في الأصل Mocha، ثم أعيدت تسميتها إلى LiveScript، وأخيرًا أعيدت تسميتها إلى JavaScript لركوب موجة شعبية جافا
• في عام 1997، تم تقديم JS إلى ECMA للتوحيد القياسي. أصبح اسمها الرسمي ECMAScript (ES). ES6 الذي تسمع عنه كثيرًا هو الإصدار السادس، الصادر في 2015

6. كيف تنفذ المتصفحات جافاسكريبت

كل متصفح يحتوي على محرك JS مدمج يترجم الكود الخاص بك إلى تعليمات الآلة:

• Chrome / Edge: محرك V8
• Firefox: محرك SpiderMonkey
• Safari: محرك JavaScriptCore

العملية مباشرة: المتصفح يحمل HTML ← يواجه علامة script ← محرك JS يحلل وينفذ سطرًا بسطر ← تظهر النتائج على الصفحة.

▶ مثال: تغيير نص الصفحة بجافاسكريبت

▶ مثال: جافاسكريبت تستجابة لأحداث المستخدم

▶ مثال: التحقق من النماذج بجافاسكريبت

❓ أسئلة شائعة

📖 ملخص

• جافاسكريبت هي لغة المتصفح النصية — تفسر وتنفذ الكود سطرًا بسطر دون خطوة ترجمة
• قدرات JS الأساسية: تغيير المحتوى، الاستجابة للأحداث، التحقق من النماذج، التلاعب بالأنماط، التواصل مع الخوادم
• HTML/CSS/JS لكل منها دور واضح — الهيكل، العرض، والسلوك
• تم إنشاء JS بواسطة Brendan Eich في عام 1995 في 10 أيام وتوحيد معاييرها لاحقًا بواسطة ECMA كـ ECMAScript
• تنفذ المتصفحات الكود عبر محركات JS المدمجة مثل V8

📝 تمارين

1. مبتدئ: أنشئ صفحة HTML بها زر وفقرة. عند النقر على الزر، غيّر نص الفقرة إلى "تعلمت جافاسكريبت!" واجعل لون النص أزرق.
2. متوسط: أنشئ صفحة بها زران — "تكبير" و"تصغير" — يزيدان أو يقلان حجم خط النص بمقدار 2 بكسل مع كل نقرة.
3. تحدي: أنشئ صفحة تحقق بسيطة لكلمة المرور. يجب أن تكون كلمة المرور 6 أحرف على الأقل وتحتوي على رقم واحد على الأقل. أظهر رسالة خطأ حمراء أسفل حقل الإدخال عندما لا يتم استيفاء الشروط.

فريق Web-Tutorial التقني

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

من نحن