JavaScript من الصفر: القيم والقرارات والتكرار

طريقان إلى نفس الفكرة

قبل أن تبدأ

الفكرة الجوهرية

1أين تكتب JavaScript وأين ترى نتيجتها؟

ثلاثة أماكن: (1) داخل الدرس هنا: اضغط «تشغيل» تحت أي مثال، وعدّل الكود وشغّله مرة أخرى. (2) في المتصفح: اضغط F12 ثم تبويب Console، واكتب سطرًا واضغط Enter. (3) في صفحتك: داخل وسم <script> قبل نهاية body، أو في ملف app.js تربطه بـ <script src="app.js"></script>.

أهم أمر ستكتبه آلاف المرات هو console.log(...): يطبع أي قيمة في الـ Console حتى ترى ماذا يحدث داخل برنامجك. والتعليق يبدأ بـ // لسطر واحد، والمتصفح يتجاهله.

// my first program: press Run
console.log("Hello, Darb!");
console.log(2 + 3);
console.log("2" + "3");   // text joined to text, not maths
console.log(10 / 4, 10 % 4, 2 ** 10);

2المتغيرات: const وlet

المتغير اسم لقيمة تحفظها لتستخدمها لاحقًا. const لقيمة لن تُعيد ربطها بغيرها، وهي أغلب المتغيرات. let لقيمة ستتغيّر، مثل عدّاد. لا تستخدم var القديمة. والأسماء بالإنجليزية تبدأ بحرف صغير وتُكتب كلماتها ملتصقة بحرف كبير لكل كلمة جديدة: totalPrice (camelCase).

const shopName = "Darb Cafe";
const pricePerCup = 14;
let cups = 2;

console.log(shopName, "sells a cup for", pricePerCup);
cups = cups + 1;       // let can change
cups += 1;             // the same, shorter
console.log("cups now:", cups);
console.log("bill:", cups * pricePerCup);

3أنواع القيم: نص ورقم ومنطقي

كل قيمة لها نوع، وtypeof يخبرك به. النص string بين علامات تنصيص. الرقم number بلا تنصيص، صحيحًا أو عشريًا. المنطقي boolean قيمتان فقط: true وfalse. وundefined تعني «لم تُعطَ قيمة بعد»، وnull تعني «لا قيمة، عن قصد».

const name = "Sara";
const age = 21;
const isMember = true;
let nickname;            // no value yet

console.log(typeof name, typeof age, typeof isMember, typeof nickname);
console.log(Number("42") + 1, String(42) + 1);   // converting on purpose
console.log(Number("abc"));                      // NaN: "not a number"
console.log(0.1 + 0.2);                          // decimals are approximate!

لاحظ السطر الأخير: 0.1 + 0.2 ليست 0.3 بالضبط، لأن الحاسوب يخزّن الكسور العشرية بالنظام الثنائي تقريبيًا. لذلك تُحسب المبالغ المالية بالهللات (أعداد صحيحة) ثم تُقسم على 100 عند العرض فقط.

4العمل على النصوص

أسهل طريقة لبناء نص من قيم هي نص القالب بعلامة الإمالة ` `: تكتب ${...}` في وسطه وتضع أي قيمة أو عملية. وللنصوص أدوات جاهزة (دوال) تناديها بنقطة: الطول، الأحرف الكبيرة، القص، البحث، الاستبدال.

const customer = "  noura  ";
const drink = "latte";
const cups = 3;

const clean = customer.trim();
console.log(`Hello ${clean}, ${cups} x ${drink} = ${cups * 14} SAR`);
console.log(drink.length, drink.toUpperCase(), drink[0]);
console.log(drink.includes("tt"), drink.replace("latte", "mocha"));
console.log("05-123-4567".split("-"));

5المقارنة والمنطق: === و&& و||

المقارنة تعطي true أو false: > و< و>= و<=، و=== «يساوي تمامًا» و!== «لا يساوي». ولربط شرطين: && تعني «و» (الاثنان صحيحان)، و|| تعني «أو» (أحدهما يكفي)، و! تعني «ليس».

const age = 17;
const hasTicket = true;

console.log(age >= 18);                 // false
console.log(age >= 18 && hasTicket);    // both? false
console.log(age >= 18 || hasTicket);    // either? true
console.log(!hasTicket);                // not: false

console.log("5" === 5, "5" == 5);       // strict vs loose
console.log("" == 0, null == undefined); // loose surprises

6القرار: if وelse

if (شرط) { ... } ينفّذ الكتلة فقط إن كان الشرط صحيحًا. else للحالة الأخرى، وelse if لحالات متعددة بالترتيب، ويتوقف عند أول شرط صحيح. والمعامل الثلاثي شرط ? أ : ب قرار قصير يعطي قيمة.

function discountFor(total) {
  if (total >= 100) {
    return 0.15;
  } else if (total >= 50) {
    return 0.05;
  } else {
    return 0;
  }
}

for (const total of [30, 60, 120]) {
  const rate = discountFor(total);
  const label = rate > 0 ? `${rate * 100}% off` : "no discount";
  console.log(total, "->", label, "->", total - total * rate);
}

الصادق والكاذب: في الشرط، أي قيمة تتحوّل لـ true أو false. ست قيم فقط «كاذبة»: false و0 و"" (نص فارغ) وnull وundefined وNaN. كل ما عداها صادق، حتى "0" و"false" كنصوص. لذلك if (name) تعني «إن كان الاسم غير فارغ».

7التكرار: for وwhile

التكرار يعيد خطوات بدل أن تكتبها مرات. for (let i = 1; i <= 5; i++) يعدّ من 1 إلى 5: بداية، شرط استمرار، خطوة. وfor (const x of list) يمرّ على كل عنصر في قائمة، وهو الأوضح غالبًا. وwhile (شرط) يكرّر ما دام الشرط صحيحًا. وbreak يخرج من التكرار، وcontinue يتخطّى للدورة التالية.

// 1. count
for (let i = 1; i <= 3; i++) {
  console.log("cup number", i);
}

// 2. visit every item
const orders = ["latte", "mocha", "v60"];
for (const drink of orders) {
  if (drink === "mocha") continue;   // skip mocha
  console.log("making", drink);
}

// 3. repeat while a condition holds
let beans = 100;
let cupsMade = 0;
while (beans >= 18) {
  beans -= 18;
  cupsMade++;
}
console.log(cupsMade, "cups, beans left:", beans);

مثال محلول

المسألة: حاسبة فاتورة مقهى. لدينا عدد أكواب كل مشروب وسعره. احسب المجموع، طبّق خصم 10% إن تجاوز 50 ريالًا، أضف ضريبة 15%، واطبع الفاتورة. الخطوات: مرّ على الطلبات وأضف أكواب × سعر للمجموع، ثم قرار للخصم، ثم الضريبة، ثم اطبع بنص قالب. نحسب بالهللات لتجنّب كسور 0.1 + 0.2:

const order = [
  { drink: "latte", cups: 2, price: 1400 },   // prices in halalas
  { drink: "mocha", cups: 1, price: 1600 },
  { drink: "v60",   cups: 2, price: 1800 },
];

let subtotal = 0;
for (const line of order) {
  const lineTotal = line.cups * line.price;
  console.log(`${line.cups} x ${line.drink}`.padEnd(14), (lineTotal / 100).toFixed(2));
  subtotal += lineTotal;
}

const discount = subtotal > 5000 ? Math.round(subtotal * 0.10) : 0;
const tax = Math.round((subtotal - discount) * 0.15);
const total = subtotal - discount + tax;

console.log("subtotal".padEnd(14), (subtotal / 100).toFixed(2));
console.log("discount".padEnd(14), (-discount / 100).toFixed(2));
console.log("VAT 15%".padEnd(14), (tax / 100).toFixed(2));
console.log("TOTAL".padEnd(14), (total / 100).toFixed(2), "SAR");

جرّب: غيّر عدد أكواب الموكا إلى 0 وشغّل: هل ما زال الخصم يُطبَّق؟ ثم أضف سطرًا لمشروب رابع.

خرافة مقابل حقيقة

أين تقابله في العمل

اختبر فهمك

بطاقات مراجعة سريعة

تحقق من فهمك