أساسيات الجافاسكريبت — for / if / function / array

if ( ) { }

الجملة الشرطية — if / else if / else

تُستخدم لاتّخاذ قرار بناءً على شرط منطقي نتيجته true أو false. لو الشرط صحّ يتنفّذ الكود اللي جواه، ولو غلط ينتقل لـ else if التانية أو لـ else الأخيرة.

الصيغة العامةif (الشرط) { // ينفّذ لو الشرط صحيح } else if (شرط آخر) { // ينفّذ لو الشرط الأول غلط والتاني صحيح } else { // ينفّذ لو كل الشروط السابقة غلط }

مثال 1

تصنيف رقم: موجب / سالب / صفر

عندنا رقم واحد، وعايزين نعرف نوعه بثلاث حالات — عدد الشروط دايمًا = عدد الحالات ناقص واحد (لأن else بتغطّي الحالة الأخيرة تلقائيًا).

لو number > 0 → موجب
لو number < 0 → سالب
غير كده (يبقى = 0) → صفر

sign.js

let number = -7;

if (number > 0) {
  console.log("الرقم موجب");
} else if (number < 0) {
  console.log("الرقم سالب");
} else {
  console.log("الرقم يساوي صفر");
}

اضغط ▶ شغّل لترى الناتج

مثال 2

تقدير درجة طالب

نفس الفكرة لكن بأربع حالات متسلسلة. لاحظ إن الترتيب مهم: لازم نبدأ بأعلى قيمة وننزل، لأن أول شرط يتحقق هو اللي يوقف التنفيذ.

grade.js

let score = 76;

if (score >= 85) {
  console.log("ممتاز");
} else if (score >= 65) {
  console.log("جيد جدًا");
} else if (score >= 50) {
  console.log("ناجح");
} else {
  console.log("راسب");
}

اضغط ▶ شغّل لترى الناتج

مثال 3

الشروط المتداخلة — if داخل if

ممكن نكتب if كاملة داخل if أخرى — وده اسمه التداخل (nested if). الشرط الداخلي مش بيتفحص أصلًا إلا لو الشرط الخارجي تحقق الأول.

الخارجي age >= 18 غلط → نطبع "العمر غير مناسب" ومنوصلش للداخلي خالص
الخارجي صحّ → ساعتها بس نفحص hasId
كل else بتتبع أقرب if ليها في نفس المستوى — تابع الأقواس { }

جرّب تغيّر age لـ 15 أو hasId لـ false وشوف أنهي فرع بيتنفّذ.

entry.js

let age = 20;
let hasId = true;

if (age >= 18) {
  if (hasId) {
    console.log("اتفضل ادخل");
  } else {
    console.log("أحضر البطاقة الأول");
  }
} else {
  console.log("العمر غير مناسب");
}

اضغط ▶ شغّل لترى الناتج

تنبيه امتحان

= للتخزين، أما == و=== فللمقارنة. الفرق: == يقارن القيمة فقط، بينما === يقارن القيمة والنوع معًا — استخدم === دائمًا لتفادي أخطاء المقارنة في الامتحان.

for ( ) { }

الحلقة التكرارية — for

تُستخدم لتكرار تنفيذ كود عدد معروف من المرات، بدل كتابة نفس السطر يدويًا. تتكوّن من ثلاثة أجزاء مفصولة بفاصلة منقوطة: البداية، الشرط، والخطوة.

الصيغة العامةfor (let i = البداية; i شرط النهاية; i++ ) { // الكود اللي هيتكرر }

مثال 1

طباعة الأرقام من 1 إلى 5

المتغيّر i يبدأ من 1، ويتكرر الكود طالما i <= 5، وبعد كل تكرار يزيد i بواحد عبر i++.

count.js

for (let i = 1; i <= 5; i++) {
  console.log(i);
}

اضغط ▶ شغّل لترى الناتج

مثال 2

حساب مجموع درجات مصفوفة

هنا الحلقة بتمشي على عناصر مصفوفة marks بدل أرقام ثابتة، وبنجمّع كل عنصر في متغيّر total خارج الحلقة.

marks.length = عدد عناصر المصفوفة (هنا 5)
الفهرسة تبدأ من 0، فآخر عنصر فهرسه length - 1

sum.js

let marks = [10, 8, 6, 9, 7];
let total = 0;

for (let i = 0; i < marks.length; i++) {
  total = total + marks[i];
}

console.log("المجموع = " + total);

اضغط ▶ شغّل لترى الناتج

مثال 3

الحلقات المتداخلة — for داخل for

ممكن نحط حلقة for كاملة داخل حلقة أخرى — وده اسمه التداخل (nested for). القاعدة الذهبية: في كل لفّة واحدة من الحلقة الخارجية، الحلقة الداخلية بتخلّص كل لفّاتها من الأول للآخر.

الخارجية 3 لفّات × الداخلية 2 لفّة = السطر الداخلي يتنفّذ 6 مرات
لازم اسم عدّاد مختلف لكل حلقة (i للخارجية وj للداخلية)

جرّب تزوّد عدد لفّات الداخلية لـ j <= 3 وشوف العدد النهائي هيبقى كام.

nested.js

let count = 0;

for (let i = 1; i <= 3; i++) {
  for (let j = 1; j <= 2; j++) {
    count++;
    console.log("i=" + i + " , j=" + j);
  }
}

console.log("عدد مرات التنفيذ = " + count);

اضغط ▶ شغّل لترى الناتج

مثال 4

تطبيق على التداخل — رسم مثلث نجوم

أشهر سؤال امتحان على الحلقات المتداخلة: الخارجية بتحدد رقم السطر، والداخلية بتكرر النجمة بعدد رقم السطر (لاحظ إن شرط الداخلية j <= i بيعتمد على عدّاد الخارجية).

stars.js

for (let i = 1; i <= 4; i++) {
  let stars = "";
  for (let j = 1; j <= i; j++) {
    stars = stars + "*";
  }
  console.log(stars);
}

اضغط ▶ شغّل لترى الناتج

تنبيه امتحان

أشهر غلطة هي الـ off-by-one: كتابة i <= marks.length بدل i < marks.length، وده بيسبب خطأ "undefined" لأنك بتحاول توصل لعنصر مش موجود.

function () { }

الدوال — function

الدالة كتلة كود لها اسم، تقدر تستدعيها أكتر من مرة بدل تكرار نفس الكود. ممكن تستقبل مدخلات (parameters) وترجّع نتيجة عبر return.

الصيغة العامةfunction اسم_الدالة(معامل1, معامل2) { // الكود return القيمة_الناتجة; } اسم_الدالة(قيمة1, قيمة2); // طريقة الاستدعاء

مثال 1

دالة تجمع رقمين

الدالة addNumbers بتستقبل a وb، وبترجّع ناتج جمعهم عن طريق return — من غير return كانت هترجّع undefined.

add.js

function addNumbers(a, b) {
  return a + b;
}

let result = addNumbers(5, 3);
console.log(result);

اضغط ▶ شغّل لترى الناتج

مثال 2

دالة تجمع for + if لتقييم الحضور

دالة checkAttendance بتاخد مصفوفة أيام غياب لكل طالب، وبتستخدم for علشان تمرّ على كل طالب، وif علشان تقرر حالته، وترجّع مصفوفة نتائج جديدة بـ push.

attendance.js

function checkAttendance(absencesArray) {
  let results = [];

  for (let i = 0; i < absencesArray.length; i++) {
    if (absencesArray[i] <= 2) {
      results.push("منتظم");
    } else {
      results.push("غير منتظم");
    }
  }

  return results;
}

let studentsAbsences = [1, 4, 0, 3];
console.log(checkAttendance(studentsAbsences));

اضغط ▶ شغّل لترى الناتج

تنبيه امتحان

return بتوقف تنفيذ الدالة فورًا وترجّع القيمة — أي كود بعدها جوّه نفس الدالة متنفّذش. ومتلخبطش بين console.log (بس بيعرض) وreturn (بترجّع قيمة نقدر نستخدمها).

[ ]

المصفوفات — array

المصفوفة متغيّر واحد بيخزّن مجموعة قيم مرتّبة، وكل قيمة ليها رقم ترتيب (index) يبدأ من 0 مش من 1.

الصيغة العامةlet arr = [قيمة1, قيمة2, قيمة3]; arr[0] // أول عنصر arr.length // عدد العناصر arr.push(x) // إضافة عنصر في الآخر

مثال 1

الوصول لعناصر مصفوفة أسماء

students[0] هو أول اسم، وstudents[2] هو الاسم الثالث — لأن العدّ بيبدأ من صفر.

students.js

let students = ["أحمد", "منى", "كريم", "سارة"];

console.log(students[0]);
console.log(students[2]);
console.log("عدد الطلاب = " + students.length);

اضغط ▶ شغّل لترى الناتج

مثال 2

إضافة وتعديل عناصر

push(20) بتضيف 20 في آخر المصفوفة (تكبر المصفوفة بعنصر)، بينما scores[1] = 19 بتستبدل العنصر التاني الموجود من غير ما تغيّر الطول.

scores.js

let scores = [15, 18, 12];

scores.push(20);
scores[1] = 19;

console.log(scores);

اضغط ▶ شغّل لترى الناتج

تنبيه امتحان

لو حاولت توصل لفهرس مش موجود زي students[10] في مصفوفة من 4 عناصر، الناتج undefined مش خطأ — لازم تتأكد إن الفهرس أصغر من length.

foriffn[ ]

تمرين شامل — تقييم درجات فصل كامل

هنا الأربعة مع بعض بالظبط زي أسئلة الامتحان: array لتخزين الدرجات، function لتغليف منطق التقييم، for للمرور على كل درجة، وif لاتخاذ قرار ناجح/راسب. جرّب تغيّر الدرجات في السطر الأخير وشغّل تاني.

خطوة بخطوة:

الدالة evaluateGrades بتستقبل مصفوفة درجات كاملة
مصفوفة results فاضية بتتجهز لتخزين النتائج
الحلقة for بتمر على كل درجة بالترتيب
الشرط if بيحدد "ناجح" أو "راسب" لكل طالب
return بيرجّع مصفوفة النتائج كاملة

evaluate.js

function evaluateGrades(gradesArray) {
  let results = [];

  for (let i = 0; i < gradesArray.length; i++) {
    let currentGrade = gradesArray[i];

    if (currentGrade >= 50) {
      results.push("ناجح");
    } else {
      results.push("راسب");
    }
  }

  return results;
}

let studentsGrades = [85, 42, 90, 49, 73];
let evaluationOutput = evaluateGrades(studentsGrades);

console.log(studentsGrades);
console.log(evaluationOutput);

اضغط ▶ شغّل لترى الناتج

</>

HTML — البنية والعناصر الأساسية

HTML مش لغة برمجة، دي لغة توصيف بتحدد هيكل الصفحة عن طريق وسوم (Tags). كل وسم غالبًا ليه بداية ونهاية، وممكن ياخد صفات (attributes) بتديله معلومات إضافية زي الرابط أو مصدر الصورة.

الصيغة العامة<tagname attribute="value"> المحتوى </tagname>

مثال 1

عناصر أساسية: عنوان، فقرة، رابط، صورة

جرّب غيّر النص جوه الوسوم وشغّل تاني عشان تشوف الفرق فورًا في المعاينة.

h1 لأكبر عنوان، والحجم بينزل لحد h6
a href="..." بيعمل رابط قابل للضغط
img src="..." alt="..." بيعرض صورة، وalt نص بديل لو الصورة متحمّلتش

index.html

<h1>عنوان رئيسي</h1>
<p>ده نص فقرة عادية في الصفحة.</p>
<a href="https://example.com">رابط لموقع</a>
<br>
<img src="pic.jpg" alt="صورة توضيحية">

المعاينة المباشرة

مثال 2

القوائم والحاويات: ul/li و div/span

القوائم بتنظّم عناصر متتالية، والحاويات بتجمّع أجزاء من الصفحة مع بعض.

ul + li = قائمة بنقاط، ol + li = قائمة مرقّمة
div عنصر block بياخد عرض السطر بالكامل
span عنصر inline بيتماشى جوه نفس السطر

index.html

<ul>
  <li>عنصر أول</li>
  <li>عنصر تاني</li>
</ul>
<div style="background:#eef2ff;padding:10px;border-radius:8px;">
  حاوية div بتاخد السطر بالكامل
</div>
<span style="color:#c1440e;font-weight:bold;">نص جوه span</span> جنب نص تاني في نفس السطر

المعاينة المباشرة

تنبيه امتحان

الفرق بين div وspan: div بياخد عرض السطر بالكامل (block)، أما span فبيتماشى جوه نفس السطر مع باقي المحتوى (inline) — استخدم div للحاويات الكبيرة، وspan لتنسيق جزء بسيط من نص.

{ }

CSS — التصميم والتنسيق

CSS بتحدد شكل عناصر HTML: الألوان، المقاسات، المسافات، الخطوط... المحدد (selector) بيحدد أنهي عنصر هيتنسق، والخصائص (properties) جوه الأقواس بتحدد الشكل نفسه.

الصيغة العامةselector { property: value; }

مثال 1

المحددات: عنصر، class، id

ثلاث طرق لاستهداف العناصر، وكل واحدة ليها "قوة" (specificity) مختلفة في التطبيق.

محدد العنصر p بيأثر على كل عناصر النوع ده
محدد .class بيأثر بس على العناصر اللي ليها الـclass ده، وممكن يتكرر
محدد #id بيأثر على عنصر واحد بس، ولازم يكون فريد في الصفحة

index.html

<style>
  p { color: #555; }
  .highlight { background: #fff3b0; }
  #title { font-size: 26px; color: #3454d1; }
</style>
<h2 id="title">عنوان بمحدد ID</h2>
<p class="highlight">فقرة باستخدام class للتظليل</p>
<p>فقرة عادية من غير أي تنسيق إضافي</p>

المعاينة المباشرة

مثال 2

نموذج الصندوق (Box Model)

كل عنصر في الصفحة عبارة عن صندوق مكوّن من طبقات متداخلة.

المحتوى (content) هو الأساس
حواليه padding (مسافة داخلية) ثم border (الحد)
وأخيرًا margin (مسافة خارجية بين العنصر واللي حواليه)

index.html

<style>
  .box {
    width: 160px;
    padding: 14px;
    border: 3px solid #3454d1;
    margin: 16px;
    background: #eef2ff;
    border-radius: 10px;
  }
</style>
<div class="box">صندوق بحدود ومسافات وزوايا مدوّرة</div>

المعاينة المباشرة

تنبيه امتحان

الترتيب من الداخل للخارج دايمًا: content ← padding ← border ← margin. أشهر غلطة في الامتحان هي الخلط بين padding (جوه الحد) وmargin (برّه الحد).

? × 50

اختبر نفسك — 50 سؤال شامل (JavaScript + HTML/CSS)

أسئلة اختيار من متعدد بنفس أسلوب الامتحان: اختيارات قريبة من بعضها قصدًا عشان تتأكد إنك فاهم مش بس حافظ. اختار إجابة وهيظهر لك فورًا صح ولا غلط مع السبب.

النتيجة: 0 / 50

أساسيات الجافاسكريبت: for، if، function، array

الجملة الشرطية — if / else if / else

تصنيف رقم: موجب / سالب / صفر

تقدير درجة طالب

الشروط المتداخلة — if داخل if

الحلقة التكرارية — for

طباعة الأرقام من 1 إلى 5

حساب مجموع درجات مصفوفة

الحلقات المتداخلة — for داخل for

تطبيق على التداخل — رسم مثلث نجوم

الدوال — function

دالة تجمع رقمين

دالة تجمع for + if لتقييم الحضور

المصفوفات — array

الوصول لعناصر مصفوفة أسماء

إضافة وتعديل عناصر

تمرين شامل — تقييم درجات فصل كامل

HTML — البنية والعناصر الأساسية

عناصر أساسية: عنوان، فقرة، رابط، صورة

القوائم والحاويات: ul/li و div/span

CSS — التصميم والتنسيق

المحددات: عنصر، class، id

نموذج الصندوق (Box Model)

اختبر نفسك — 50 سؤال شامل (JavaScript + HTML/CSS)