جاري التحميل...
جاري التحميل...
ما هو JavaScript، المتغيرات، أنواع البيانات، المعاملات
جافاسكريبت هي لغة برمجة عالية المستوى تُستخدم لتطوير مواقع الويب وتطبيقات الويب والخوادم والمزيد.
إذا كان HTML هو هيكل الصفحة وCSS هو التصميم والمظهر، فإن جافاسكريبت هو الدماغ الذي يجعل الصفحة تفاعلية وحيوية.
💡 تشبيه بسيط::
تخيل أنك تبني روبوتًا: HTML هو الهيكل الجسدي (العظام)، CSS هو المظهر الخارجي (الجلد والملابس)، وجافاسكريبت هو الدماغ والمحرك الذي يجعل الروبوت يتحرك ويتفاعل مع بيئته.
ولدت جافاسكريبت في عام 1995 على يد المبرمج بريندان آيش في Netscape في أقل من 10 أيام! كان اسمها في الأصل موتشا، ثم لايفسكريبت، ثم جافاسكريبت. على الرغم من اسمها، ليس لها علاقة بجافا - كان التسمية لأغراض تسويقية بالدرجة الأولى.
اليوم، جافاسكريبت هي أكثر لغات البرمجة استخدامًا في العالم. كل صفحة ويب تزورها في المتصفح تستخدم جافاسكريبت بطريقة ما. منصات مثل Node.js جعلت من الممكن استخدام جافاسكريبت على الخوادم وتطبيقات سطح المكتب والهواتف الذكية أيضًا.
جافاسكريبت تحل مشكلة أساسية: كيف نجعل صفحات الويب تفاعلية وديناميكية؟
💡 حقيقة مهمة::
جميع تطبيقات الويب الحديثة مثل Gmail وخرائط جوجل وFacebook وYouTube تستخدم جافاسكريبت بشكل مكثف لتقديم تجربة مستخدم سلسة وتفاعلية.
بدون جافاسكريبت، صفحات الويب ثابتة - أي أنها لا يمكنها التفاعل مع المستخدم. كل تغيير يتطلب إعادة تحميل الصفحة بالكامل.
تخيل هذه المشاكل بدون جافاسكريبت:
جافاسكريبت يحل هذه المشاكل من خلال توفير آلية للتفاعل المباشر مع المستخدم وتحديثات الصفحة الذكية دون إعادة التحميل.
في البرمجة، نحتاج إلى تخزين البيانات واستخدامها. المتغيرات هي حاويات تحتوي على قيم يمكن استخدامها لاحقًا.
في جافاسكريبت، هناك ثلاث طرق لإنشاء المتغيرات:
1. var - الطريقة القديمة
كانت كلمة مفتاحية var هي الطريقة الوحيدة لإنشاء المتغيرات في جافاسكريبت القديم (قبل ES6). لها نطاق الدالة، مما يعني أنها متاحة فقط داخل الدالة.
2. let - متغير قابل للتعديل (ES6+)
تمت إضافة كلمة مفتاحية let في ES6 لإنشاء متغير يمكن تغيير قيمته. لها نطاق الكتلة، مما يعني أنها متاحة فقط داخل الأقواس المعقوفة {} التي تم إنشاؤها فيها.
3. const - ثابت (ES6+)
تُستخدم كلمة مفتاحية const لإنشاء قيمة ثابتة لا يمكن تغييرها بعد التعيين. إذا حاولت تغييرها، ستحصل على خطأ.
💡 متى نستخدم ماذا؟:
const كافتراضي - استخدمها دائمًا إلا إذا كنت بحاجة إلى تغيير القيمة لاحقًا.
let عندما تحتاج إلى تغيير قيمة المتغير (مثل العدادات أو القيم المؤقتة).
var تجنبها في الكود الحديث - استخدمها فقط إذا كنت تكتب كودًا قديمًا أو تفهم الفرق جيدًا.
أنواع البيانات
جافاسكريبت بها أنواع بيانات مختلفة. إليك الأكثر شيوعًا:
يمكنك التحقق من نوع أي قيمة باستخدام دالة typeof:
العمليات هي رموز تُستخدم لإجراء حسابات ومقارنات وعمليات منطقية على القيم.
العمليات الحسابية
عمليات المقارنة
تُستخدم لمقارنة قيمتين وإرجاع true أو false:
العمليات المنطقية
عمليات التعيين
دعنا نرى كيف يمكن لجافاسكريبت التفاعل مع الصفحة وعرض محتوى ديناميكي:
جافاسكريبت يمكنها التعامل مع عناصر الصفحة (DOM):
عندما تكتب كود جافاسكريبت وتشغيله في المتصفح، يحدث ما يلي:
setTimeout وDOM تعمل بشكل منفصل عن المحرك.💡 هل تعلم؟:
جافاسكريبت في المتصفح خيط واحد - مما يعني أنه ينفذ كودًا واحدًا في كل مرة. لكنه لا يزال يمكنه معالجة آلاف الأحداث في الثانية بفضل نظام Event Loop الذي يدير الأولويات بذكاء.
في بيئة Node.js (خارج المتصفح)، تعمل جافاسكريبت على نفس محرك V8 لكن بدون متصفح - مما يمكّنها من بناء الخوادم وتطبيقات سطح المكتب.
var لها سلوك غير متوقع بسبب نطاق الدالة.== تؤدي إلى تحويل تلقائي للنوع مما يسبب مفاجآت. استخدم دائمًا ===.const x = 5; x = 10; سيعطيك خطأ: 'Assignment to constant variable'.typeof null يُرجع 'object' وهو خطأ تاريخي في جافاسكريبت.let وclass وfunction محجوزة ولا يمكن استخدامها كأسماء متغيرات.let userName بدلاً من let x. الكود الجيد يُقرأ كنص.`مرحبًا ${name}` بدلاً من 'مرحبًا ' + name. أنظف وأكثر قابلية للقراءة.var (قديم)، let (قابل للتعديل)، const (ثابت).+ - * / % **=== و!== بدلاً من == و!=.&& (و)، || (أو)، ! (ليس).console.log() لطباعة القيم وفهم سلوك الكود.ما هو الفرق الرئيسي بين var و let و const؟
ما هو نتيجة: typeof null؟
أنشئ ملف جافاسكريبت جديد يحتوي على: 1. متغيرات لتخزين اسم المستخدم والعمر باستخدام <code>const</code>، 2. مصفوفة تحتوي على 3 هوايات للمستخدم، 3. كائن يمثل المستخدم بالخصائص: الاسم والعمر والهوايات، 4. استخدم console.log لطباعة معلومات المستخدم، 5. استخدم console.log لطباعة نوع كل متغير باستخدام typeof
الحل:
// بيانات المستخدم
const userName = "أحمد";
const userAge = 25;
// الهوايات
const hobbies = ["البرمجة", "القراءة", "الألعاب"];
// كائن المستخدم
const user = {
name: userName,
age: userAge,
hobbies: hobbies
};
// طباعة المعلومات
console.log("معلومات المستخدم:");
console.log("الاسم:", user.name);
console.log("العمر:", user.age);
console.log("الهوايات:", user.hobbies.join("، "));
// فحص الأنواع
console.log("\n--- أنواع البيانات ---");
console.log("typeof userName:", typeof userName);
console.log("typeof userAge:", typeof userAge);
console.log("typeof hobbies:", typeof hobbies);
console.log("typeof user:", typeof user);أنشئ ملف جافاسكريبت جديدًا يحتوي على:
const💡 ستحتاج إلى استخدام المتغيرات والمصفوفات والكائنات وعملية typeof.
مقارنة المتغيرات:
var - نطاق الدالة | إعادة التعيين: نعم | الرفع: نعم (undefined)let - نطاق الكتلة | إعادة التعيين: نعم | الرفع: نعم (منطقة الموت المؤقتة)const - نطاق الكتلة | إعادة التعيين: لا | الرفع: نعم (منطقة الموت المؤقتة)العمليات الشائعة:
+ - * / % **=== !== == != > <&& || != += -= *= /=