الدرس 1: مقدمة JavaScript | المستوى الثالث

📖 ما هو JavaScript ولماذا يجب عليك تعلمه؟

JavaScript هي لغة برمجة عالية المستوى (High-Level Programming Language) تُستخدم بشكل أساسي لإضافة التفاعل والحركة لصفحات الويب. بخلاف HTML الذي يحدد هيكل الصفحة، وCSS الذي يحدد شكلها، فإن JavaScript هي التي تجعل الصفحة "حية" وتتفاعل مع المستخدم.

تطورت JavaScript بشكل كبير منذ إنشائها عام 1995 على يد Brendan Eich في شركة Netscape. اليوم، أصبحت إحدى أهم لغات البرمجة في العالم، وتستخدم في:

🌐 تطوير الواجهات الأمامية (Frontend): إضافة التفاعل للمواقع باستخدام React, Vue, Angular
⚙️ تطوير الخلفية (Backend): بناء السيرفرات والـ APIs باستخدام Node.js
📱 تطبيقات الموبايل: React Native و Ionic
🖥️ تطبيقات سطح المكتب: Electron
🎮 تطوير الألعاب: Phaser.js, Three.js

💡 لماذا JavaScript هي الخيار الأفضل للمبتدئين؟

JavaScript هي اللغة الوحيدة التي تعمل مباشرة في المتصفح بدون أي برامج إضافية. كل ما تحتاجه هو متصفح ومحفظة نصوص (Notepad) ويمكنك البدء فوراً. هذا يجعلها مثالية لمن يريد تعلم البرمجة بسرعة.

🔄 الفرق بين JavaScript و HTML و CSS

قبل أن نتعمق في JavaScript، من المهم فهم الفرق بين الثلاثة تقنيات الأساسية في تطوير الويب:

التقنية	الوظيفة	المثال
HTML	هيكل الصفحة ومحتواها	العناوين، الفقرات، الصور، الروابط
CSS	التصميم والألوان والتنسيق	الألوان، الخطوط، التباعد، التخطيط
JavaScript	التفاعل والمنطق والحركة	الأزرار، النماذج، الرسوم المتحركة، جلب البيانات

التشبيه العملي: تخيل موقع الويب كمنزل. HTML هو الأساس والجدران، CSS هو الدهان والديكور، وJavaScript هو الكهرباء والأجهزة التي تجعل المنزل يعمل.

⚙️ كيف تعمل JavaScript في المتصفح؟

عندما تفتح صفحة ويب، يقوم المتصفح بقراءة ملف HTML وإنشاء ما يسمى DOM (Document Object Model) — وهو تمثيل شجري لجميع عناصر الصفحة. JavaScript تتعامل مع هذا الـ DOM لتغيير العناصر ديناميكياً.

هذه العملية تتم بسرعة كبيرة:

المتصفح يحمل ملف HTML
يُنشئ الـ DOM
يُنفّذ JavaScript (إذا وجدت)
JavaScript تعدل الـ DOM حسب الكود المكتوب
المتصفح يُعيد رسم الصفحة بالتغييرات الجديدة

⚠️ ملاحظة مهمة:

JavaScript تعمل في المتصفح (Client-Side) ويمكنها أيضاً العمل على السيرفر (Server-Side) باستخدام Node.js. في هذا المستوى سنركز على الـ Client-Side أولاً.

📝 أول كود JavaScript لك

هناك طريقتان لإضافة JavaScript إلى صفحة HTML:

الطريقة الأولى: كتابة الكود داخل HTML (غير مستحسنة للمشاريع الكبيرة)

<!DOCTYPE html>
<html>
<head>
    <title>أول صفحة JavaScript</title>
</head>
<body>
    <h1>مرحباً!</h1>
    
    <!-- كتابة JavaScript داخل وسم script -->
    <script>
        alert("مرحباً بالعالم! أنا أتعلم JavaScript 🚀");
    </script>
</body>
</html>
            

الطريقة الثانية: ملف خارجي (مستحسنة دائماً)

هذه الطريقة أفضل لأنها تفصل بين HTML و JavaScript، مما يسهل الصيانة وإعادة استخدام الكود:

<!-- في ملف index.html -->
<script src="script.js"></script>

/* في ملف script.js */
alert("مرحباً بالعالم!");
            

✅ نصيحة احترافية:

دائماً استخدم الملفات الخارجية. هذا يساعد في: تنظيم الكود، إعادة الاستخدام، التخزين المؤقت (Caching) من المتصفح، وتحميل أسرع للصفحة.

📤 طرق إظهار المخرجات في JavaScript

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

1. alert() — رسالة منبثقة

تُستخدم لعرض رسالة بسيطة للمستخدم. لكن تجنب الإفراط في استخدامها لأنها تُوقف تنفيذ الكود حتى يضغط المستخدم "موافق".

alert("مرحباً! هذا تنبيه بسيط.");

2. console.log() — أهم أداة للمطورين

تُستخدم لطباعة المعلومات في Console الخاص بالمتصفح (اضغط F12 → Console). هذه هي الأداة الأساسية لتصحيح الأخطاء (Debugging).

// طباعة نص
console.log("رسالة عادية");

// طباعة خطأ
console.error("حدث خطأ في الاتصال!");

// طباعة تحذير
console.warn("تحذير: البيانات غير مكتملة");

// طباعة جدول
console.table([{name: "أحمد", age: 25}, {name: "سارة", age: 30}]);
            

3. document.write() — كتابة في الصفحة (نادر الاستخدام)

تُستخدم لكتابة نص مباشرة في الصفحة. تجنب استخدامها في المشاريع الحديثة لأنها تُعيد كتابة كل الصفحة.

document.write("هذا نص سيظهر في الصفحة");

❌ تحذير:

لا تستخدم document.write() بعد اكتمال تحميل الصفحة! ستُعيد كتابة كل المحتوى وتفقد كل شيء.

🎮 مثال تفاعلي: تغيير محتوى الصفحة ديناميكياً

هذا هو جوهر JavaScript — القدرة على تغيير الصفحة بناءً على تفاعل المستخدم. في المثال التالي، سنغير نص ونمط عنصر HTML باستخدام JavaScript:

<!-- HTML -->
<p id="message">اضغط الزر لتغيير هذا النص!</p>
<button onclick="changeText()">اضغط هنا</button>

<!-- JavaScript -->
<script>
function changeText() {
    // الوصول للعنصر باستخدام ID
    var element = document.getElementById("message");
    
    // تغيير النص
    element.innerHTML = "🎉 تم التغيير بنجاح باستخدام JavaScript!";
    
    // تغيير اللون
    element.style.color = "green";
    
    // تغيير حجم الخط
    element.style.fontSize = "24px";
}
</script>
            

ما الذي حدث هنا؟

حددنا العنصر باستخدام document.getElementById()
غيّرنا محتواه باستخدام innerHTML
غيّرنا أسلوبه (اللون والحجم) باستخدام style

هذه هي القوة الحقيقية لـ JavaScript — القدرة على التفاعل مع كل عنصر في الصفحة وتعديله في الوقت الفعلي.

✅ أفضل الممارسات عند كتابة JavaScript

لكتابة كود JavaScript نظيف ومهني، اتبع هذه القواعد:

📝 استخدم أسماء واضحة: بدلاً من x استخدم userName أو totalPrice
💬 أضف تعليقات: اشرح الكود المعقد لمساعدة نفسك والآخرين
📁 فصل الملفات: ضع JavaScript في ملفات .js منفصلة
🔒 استخدم 'use strict': يمنع الأخطاء الشائعة
🧪 اختبر الكود: افتح Console (F12) وتحقق من الأخطاء
📖 اقرأ التوثيق الرسمي: MDN Web Docs هو أفضل مصدر

// ✅ كود نظيف ومهني
'use strict';

// دالة لحساب مجموع سعر المنتجات
function calculateTotal(prices) {
    let total = 0;
    for (let i = 0; i < prices.length; i++) {
        total += prices[i];
    }
    return total;
}

console.log("المجموع: " + calculateTotal([100, 200, 300]) + " جنيه");
            

⚠️ أخطاء شائعة يجب تجنبها

المبتدئون غالباً ما يقعون في هذه الأخطاء. كن حذراً:

الخطأ	السبب	الحل
نسيان إغلاق الأقواس أو الفواصل	Syntax Error	استخدم محرر نصوص يدعم Syntax Highlighting
استخدام var بدلاً من let/const	مشاكل في نطاق المتغيرات	استخدم let للمتغيرات المتغيرة وconst للثابتة
كتابة الكود قبل تحميل HTML	العناصر غير موجودة بعد	ضع الـ script في نهاية body أو استخدم DOMContentLoaded
عدم التحقق من Console للأخطاء	تجاهل الأخطاء يُعقد المشكلة	افتح F12 → Console باستمرار أثناء التطوير

🚀 الخطوة التالية: ماذا تتعلم بعد هذا الدرس؟

في هذا الدرس تعلمت أساسيات JavaScript. في الدرس التالي، ستتعلم:

📦 المتغيرات (Variables): let, const, var — الفرق بينهم ومتى تستخدم كل واحد
🔢 أنواع البيانات: String, Number, Boolean, Array, Object
➕ العمليات الحسابية والمنطقية: الجمع، الطرح، المقارنات
🔄 جمل التحكم: if, else, switch

📚 مصادر إضافية موثوقة:

⚡ مقدمة في JavaScript: دليلك الشامل لتعلم لغة برمجة الويب التفاعلية

📋 محتويات الدرس