الدرس 1: رحلة الانطلاق.. عالم JavaScript وبيئة العمل
ابدأ رحلتك مع جافا سكريبت في "الشيفرة": اكتشف أهمية اللغة، الفرق بين المتصفح وNode.js، وجهز بيئة العمل (VS Code) لتشغيل أول كود برمجي لك بنجاح.
مرحباً بك في أولى محطات رحلتك في موقع "الشيفرة". اليوم، أنت لا تتعلم مجرد لغة برمجة؛ أنت تتعلم "اللغة التي تحكم الويب". سنضع اليوم حجر الأساس، نجهز أدواتنا، ونطلق أول شرارة برمجية لك.
1. ما هي JavaScript ولماذا هي "سيد الويب"؟
جافا سكريبت (JavaScript)
هي لغة برمجة عالية المستوى، ديناميكية، وتفاعلية. إذا اعتبرنا صفحات الويب ككائن حي:
HTML: هو الهيكل العظمي (الأساس).
CSS: هو المظهر الخارجي والجماليات.
JavaScript: هي "الدماغ" والأعصاب التي تعطي الأوامر والحركة.
لماذا نستخدمها؟
تسمح لك JS بتحديث المحتوى مباشرة دون إعادة تحميل الصفحة، التحكم في الوسائط، تحريك الصور، وبناء تطبيقات معقدة مثل "فيسبوك" و"يوتيوب".
2. المواجهة الكبرى: المتصفح vs. Node.js
كثير من المبتدئين يخلطون بين الاثنين، لكن الفرق بسيط وجوهري:
وجه المقارنة | المتصفح (Browser) | Node.js |
|---|---|---|
مكان التشغيل | داخل المتصفح (Chrome, Firefox) | على نظام التشغيل مباشرة (السيرفر) |
الاستخدام | التفاعل مع المستخدم والواجهات | بناء السيرفرات وقواعد البيانات |
الوصول للملفات | محدود جداً (لدواعي أمنية) | وصول كامل للمفات والأنظمة |
معلومة تقنية: كلاهما يستخدم نفس "المحرك" (Engine) المسمى V8، وهو المحرك الجبار الذي طورته جوجل لتحويل الكود البرمجي إلى لغة يفهمها المعالج بسرعة البرق.
3. تجهيز "البيئة" البرمجية (Environment Setup)
لكي تكتب شفراتك باحترافية، نحتاج إلى بيئة عمل منظمة. الخيار رقم 1 عالمياً للمبرمجين هو Visual Studio Code (VS Code).
لماذا VS Code؟
مجاني تماماً ومفتوح المصدر.
خفيف الوزن وسريع جداً.
يدعم آلاف الإضافات التي تسهل حياتك.
إضافات (Extensions) ننصحك بها في "الشيفرة":
Prettier: لتنسيق الكود تلقائياً وجعله جميلاً.
Auto Close Tag: لإغلاق وسوم HTML تلقائياً.
ESLint: لاكتشاف الأخطاء الإملائية والمنطقية أثناء الكتابة.
(ملاحظة: ستجد دليلاً تفصيلياً بالصور لكيفية التثبيت في قسم "الدليل التقني" قريباً).
4. لحظة الحقيقة: تشغيل أول كود "Hello World"
لن ننتظر طويلاً. سنقوم الآن بتنفيذ أول أمر برمجي لك بطريقتين:
الطريقة الأولى: المتصفح (للتجارب السريعة)
افتح متصفحك واضغط
F12.انتقل إلى تبويب Console.
اكتب الكود التالي واضغط
Enter:
مثال برمجى
اضغط على تشغيل لرؤية النتيجة...الطريقة الثانية: ملف مستقل (الاحترافية)
قم بإنشاء ملف جديد في VS Code باسم app.js واكتب فيه:
مثال برمجى
اضغط على تشغيل لرؤية النتيجة...ثم قم بربطه بملف HTML أو تشغيله عبر Node.js (سنتعلم ذلك بالتفصيل لاحقاً).
💡 تحدي الدرس (Challenge)
لا تكتفِ بالقراءة! افتح الـ Console في متصفحك الآن، وحاول طباعة عملية حسابية، مثلاً: console.log(20 + 26); وشاهد النتيجة.
هل ظهرت لك النتيجة؟ شاركنا ما حدث معك في التعليقات أسفل الدرس!
ماذا بعد؟
أنت الآن تمتلك الأدوات وتعرف أين تقف. في الدرس القادم، سنبدأ بتعلم المتغيرات (Variables)، وهي الصناديق السحرية التي سنخزن فيها بياناتنا داخل الذاكرة.