أساسيات JavaScript والمتغيرات

أهلاً بيك في أول أسبوع تعلم JavaScript! النهاردة، هنغطي الأساسيات المهمة اللي هتبني عليها معرفتك المستقبلية في لغة البرمجة القوية دي.

إيه هيا الـ JavaScript؟

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

لما تشوف image slider، أو نوافذ pop-up، أو تحديث المحتوى من غير ما الصفحة تعيد التحميل، كل ده بيشتغل بـ JavaScript.

دي واحدة من تلات تقنيات أساسية للويب، جنب HTML (اللي بيحدد هيكل المحتوى) و CSS (اللي بيحدد شكل المحتوى).

تقدر تفتكر JavaScript كـ "الجهاز العصبي" لصفحة الويب، بيتحكم في سلوك العناصر.

المتغيرات وأنواع البيانات

المتغيرات هي containers لحفظ قيم البيانات. في JavaScript، عندنا تلات طرق لإعلان المتغيرات: var، let، و const.

var (الطريقة القديمة)

دي كانت الطريقة الوحيدة لإعلان المتغيرات قبل 2015.

ليها "Function Scope"، يعني المتغير معروف بس جوه الدالة اللي اتعرف فيها.

ممكن يتعرف تاني ويتغير، وده ممكن يسبب مشاكل في التطبيقات الكبيرة.

var name = "أحمد";
var name = "علي"; // مفيش مشكلة
console.log(name); // النتيجة: علي

let (الطريقة الحديثة)

اتقدمت في ES6 (2015) عشان تحل مشاكل var.

ليها "Block Scope"، يعني المتغير معروف بس جوه البلوك اللي اتعرف فيه (زي for loop أو if statement).

مينفعش يتعرف تاني في نفس الـ scope، بس قيمته ممكن تتحدث.

let age = 25;
age = 26; // مسموح
// let age = 27; // خطأ: مينفعش تعرفه تاني
console.log(age); // النتيجة: 26

const (للثوابت)

بيستخدم لإعلان متغيرات مش هتتغير قيمتها أبداً (ثوابت).

ليها "Block Scope" زي let.

لازم تاخد قيمة لما تتعرف، والقيمة دي مينفعش تتغير بعدين.

const birthYear = 1995;
// birthYear = 1996; // خطأ: مينفعش تغير قيمة الثابت
console.log(birthYear); // النتيجة: 1995

نصيحة: استخدم const بشكل افتراضي، واستخدم let بس لما تعرف إنك محتاج تغير قيمة المتغير. تجنب استخدام var في المشاريع الحديثة.

Template Literals

Template literals هي طريقة حديثة وسهلة لدمج المتغيرات والتعبيرات جوه النصوص. بنستخدم backticks (`) بدل single أو double quotes.

الطريقة التقليدية:

const firstName = "سارة";
const job = "مطورة";
console.log("اسمي " + firstName + " وأنا " + job + ".");

استخدام Template Literals:

const firstName = "سارة";
const job = "مطورة";
console.log(`اسمي ${firstName} وأنا ${job}.`);

الميزة هنا سهولة القراءة والكتابة، خاصة مع النصوص الطويلة والمعقدة.

العمليات الحسابية والمنطقية

العوامل الحسابية

بتستخدم لعمل عمليات رياضية.

• الجمع: +

• الطرح: -

• الضرب: *

• القسمة: /

• باقي القسمة: % (بيدي باقي القسمة)

• الأس: ** (ES2016)

مثال:

let x = 10;
let y = 3;
console.log(x + y); // 13
console.log(x - y); // 7
console.log(x * y); // 30
console.log(x / y); // 3.333...
console.log(x % y); // 1 (لأن 10 / 3 = 3 والباقي 1)
console.log(x ** y); // 1000 (10 * 10 * 10)

العوامل المنطقية

بتستخدم لاتخاذ قرارات بناء على شروط متعددة.

• AND (&&): كل الشروط لازم تكون صح

• OR (||): شرط واحد على الأقل لازم يكون صح

• NOT (!): بيعكس القيمة المنطقية (بيحول true لـ false والعكس)

مثال:

let hasLicense = true;
let hasGoodVision = true;
console.log(hasLicense && hasGoodVision); // true

let isTired = true;
let hasCoffee = false;
console.log(isTired || hasCoffee); // true

console.log(!hasLicense); // false

الجمل الشرطية: if/else و switch

بتخلينا ننفذ كود مختلف بناء على شروط مختلفة.

جملة if/else

الأداة الأساسية لاتخاذ القرارات.

const hour = 19;

if (hour < 12) {
  console.log("صباح الخير!");
} else if (hour < 18) {
  console.log("مساء الخير!");
} else {
  console.log("مساء النور!");
}
// النتيجة: مساء النور!

جملة switch

بتستخدم لما يكون عندك اختيارات كتير لنفس المتغير. غالباً بتكون أكتر تنظيماً وسهولة في القراءة من if/else if متعددة.

const day = "الاتنين";

switch (day) {
  case "السبت":
  case "الأحد":
    console.log("ده ويك إند!");
    break;
  case "الاتنين":
    console.log("بداية أسبوع الشغل.");
    break;
  default:
    console.log("ده يوم عادي.");
}
// النتيجة: بداية أسبوع الشغل.

ملحوظة: متنساش تستخدم break في نهاية كل case عشان متخليش الكود يكمل على الـ case اللي بعده.

تطبيق عملي: "منظم اليوم الذكي"

يلا نعمل برنامج صغير وحلو يساعدنا نخطط ليومنا بناء على أحوال الجو والمزاج. المثال ده هيجمع كل اللي اتعلمناه النهاردة: المتغيرات، وأنواع البيانات، والعمليات المنطقية، والجمل الشرطية.

السيناريو:

تخيل إن عندك مساعد ذكي بيقولك تلبس إيه وإيه النشاط المناسب لليوم بناء على درجة الحرارة وإذا كان بتمطر ولا لأ.

الخطوة الأولى: إعداد المتغيرات

الأول، هنعرف المتغيرات بتاعتنا باستخدام let و const. هنستخدم const للاسم لأنه ثابت، و let للمتغيرات اللي ممكن تتغير زي الطقس.

const userName = "علي";
let temperature = 22; // درجة الحرارة بالمئوية
let isRaining = false; // هل بتمطر؟ (قيمة boolean)
let whatToWear; // هنحدد نلبس إيه بعدين

• const userName: بيخزن اسم المستخدم كـ string

• let temperature: بيخزن درجة الحرارة كرقم

• let isRaining: بيخزن قيمة boolean - يا true يا false

• let whatToWear: متغير لسه ماخدش قيمة، فهو حالياً undefined

الخطوة التانية: اتخاذ القرارات باستخدام if/else والعوامل المنطقية

دلوقتي، هنستخدم الجمل الشرطية والعوامل المنطقية (&& و !) عشان نقرر إيه الهدوم المناسبة.

if (temperature > 25 && !isRaining) {
  whatToWear = "تي شيرت ونضارة شمس";
} else if (temperature >= 18 && temperature <= 25 && !isRaining) {
  whatToWear = "قميص خفيف وجينز";
} else if (temperature < 18) {
  whatToWear = "جاكيت ومعطف";
} else if (isRaining) {
  whatToWear = "جاكيت ضد المطر وشمسية";
} else {
  whatToWear = "هدوم بيت مريحة";
}

شرح الكود:

• الشرط الأول: لو درجة الحرارة أكبر من 25 و مش بتمطر، يبقى جو حر

• الشرط التاني: لو درجة الحرارة بين 18 و 25 و مش بتمطر، يبقى جو معتدل

• الشرط التالت: لو درجة الحرارة أقل من 18، يبقى جو بارد مهما كان فيه مطر ولا لأ

• الشرط الرابع: لو بتمطر، ده أهم اعتبار

الخطوة التالتة: عرض النتيجة النهائية باستخدام Template Literals

أخيراً، هنستخدم template literals عشان نعرض رسالة شخصية وسهلة القراءة للمستخدم.

// الرسالة النهائية باستخدام Template Literals
const finalMessage = `أهلاً ${userName}! نصيحة النهاردة: الجو مناسب لـ ${whatToWear}.`;

console.log(finalMessage);

النتيجة المتوقعة:

بناء على المتغيرات اللي حطيناها في البداية (temperature = 22 و isRaining = false)، النتيجة اللي هتطبع في الـ console هتكون:

أهلاً علي! نصيحة النهاردة: الجو مناسب لـ قميص خفيف وجينز.

جربها بنفسك!

اطلب من الطلاب يغيروا قيم temperature و isRaining عشان يشوفوا إزاي النصيحة بتتغير بشكل ديناميكي. مثلاً، لو غيرنا isRaining = true;، النتيجة تبقى:

أهلاً علي! نصيحة النهاردة: الجو مناسب لـ جاكيت ضد المطر وشمسية.

المثال ده بيوضح إزاي الأساسيات البسيطة ممكن تتجمع عشان تعمل برامج صغيرة وذكية ومفيدة.

تمارين إضافية للممارسة

تمرين 1: حاسبة العمر

اعمل برنامج يحسب عمر حد بناء على سنة ميلاده:

const currentYear = 2024;
const birthYear = 1995;
const age = currentYear - birthYear;

console.log(`عمرك ${age} سنة.`);

تمرين 2: مقيم الدرجات

اعمل برنامج يقيم الدرجات:

const score = 85;
let grade;

if (score >= 90) {
  grade = "ممتاز";
} else if (score >= 80) {
  grade = "جيد جداً";
} else if (score >= 70) {
  grade = "جيد";
} else if (score >= 60) {
  grade = "مقبول";
} else {
  grade = "راسب";
}

console.log(`درجتك: ${grade}`);

تمرين 3: آلة حاسبة بسيطة

اعمل آلة حاسبة أساسية باستخدام switch statement:

const num1 = 10;
const num2 = 5;
const operation = "+";
let result;

switch (operation) {
  case "+":
    result = num1 + num2;
    break;
  case "-":
    result = num1 - num2;
    break;
  case "*":
    result = num1 * num2;
    break;
  case "/":
    result = num1 / num2;
    break;
  default:
    result = "عملية غير صالحة";
}

console.log(`${num1} ${operation} ${num2} = ${result}`);

الملاحظات المهمة

1. استخدم إعلانات المتغيرات الحديثة: فضل const و let على var

2. Template literals بتخلي تنسيق النصوص أنضف وأسهل في القراءة

3. العوامل المنطقية بتساعد في إنشاء شروط معقدة

4. الجمل الشرطية بتخلي برامجك تاخد قرارات

5. اتمرن على دمج المفاهيم عشان تبني تطبيقات مفيدة

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

1. نسيان break في switch statements - بيؤدي لسلوك fall-through

2. استخدام var بدل let أو const - ممكن يسبب مشاكل في الـ scoping

3. الخلط بين assignment (=) و comparison (===) - استخدم دايماً triple equals للمقارنة

4. عدم استخدام template literals - بتخلي الكود أسهل في القراءة بكتير

5. تعقيد الشروط أكتر من اللازم - ساعات if/else بسيطة أحسن من logical expressions معقدة

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