1. ماذا يفعل JavaScript في المتصفح؟

الهدف: تميّز بين HTML و CSS و JS ومتى تحتاج كل واحدة.

HTML يبني الهيكل. CSS يزيّن. JavaScript (JS) يضيف السلوك: عند النقر يتغيّر النص، عند الإدخال تُحسب النتيجة، عند الإرسال تُفحص البيانات.

JS في المتصفح يعمل داخل <script> أو ملف .js منفصل. لا يحتاج تثبيت — المتصفح ينفّذه مباشرة.

بعد مسار HTML/CSS، JS هو الخطوة التالية لتقديم صفحات «حيّة» للعملاء — حاسبة أسعار، نموذج ذكي، أو لوحة مهام بسيطة.

JS = منطق وتفاعل داخل المتصفح
<script> في نهاية body أو ملف خارجي
console.log() للتجربة في أدوات المطوّر
ابدأ بمهام صغيرة قبل مشاريع كبيرة

صورة ذهنية

HTML (هيكل)
   +
CSS (شكل)
   +
JS (سلوك)
   ═══════
صفحة تفاعلية

مختبر — أول سطر JS

<!DOCTYPE html>
<html lang="ar" dir="rtl">
<head><meta charset="UTF-8"><title>أول JS</title></head>
<body>
  <p id="msg">انتظر...</p>
  <script>
    document.getElementById('msg').textContent = 'مرحباً — JS يعمل!';
    console.log('تم التشغيل');
  </script>
</body>
</html>

افتح أدوات المطوّر (F12) → Console ولاحظ رسالة log.

مهمة عملية

غيّر النص المعروض إلى جملة تعريف بك، واطبع اسمك في console.

اختبر فهمك

أين يُكتب JavaScript عادة في صفحة بسيطة؟

2. المتغيرات — let و const

الهدف: تخزّن قيماً بأسماء واضحة وتستخدمها لاحقاً.

let للقيم التي قد تتغيّر: let count = 0;
const للثابت: const siteName = 'Mesue Learn';

أنواع شائعة: نص (string)، رقم (number)، true/false (boolean).

تسمية واضحة: price بدل x، userName بدل n — يسهّل القراءة وعملك مع العملاء.

let متغير، const ثابت
النص بين '' أو \"\"
typeof(x) يكشف النوع
const افتراضياً إن لم تتغيّر القيمة

صورة ذهنية

const name = "سارة"
let score = 0
score = score + 10
// name ثابت · score يتغيّر

مختبر — حساب سعر

<script>
  const product = 'استضافة';
  let price = 99;
  let discount = 10;
  let finalPrice = price - discount;

  console.log('المنتج:', product);
  console.log('السعر النهائي:', finalPrice);
</script>

غيّر discount ولاحظ finalPrice — المتغير let يسمح بالتحديث.

مهمة عملية

أضف const currency = 'ر.س' واطبع جملة: «المنتج X بسعر Y ر.س».

اختبر فهمك

أي كلمة للقيمة التي لن تتغيّر؟

let var const static

3. الشروط — if و else

الهدف: تتخذ قرارات في الكود حسب القيم.

if (شرط) { ... } else if (شرط_آخر) { ... } else { ... }

عوامل المقارنة: === !== < > <= >=

مثال عملي: إن كان الطلب > 500 فالشحن مجاني، وإلا 25 ر.س.

=== يقارن القيمة والنوع — أفضل من == في معظم الحالات.

if (score >= 60) ناجح
else للحالة الباقية
&& و || لدمج شروط
=== للمساواة الصارمة

صورة ذهنية

if (total >= 500)
  → شحن مجاني
else
  → شحن 25

مختبر — شحن مجاني

<script>
  const orderTotal = 620;
  let shipping = 25;

  if (orderTotal >= 500) {
    shipping = 0;
    console.log('شحن مجاني!');
  } else {
    console.log('الشحن:', shipping, 'ر.س');
  }

  console.log('الإجمالي:', orderTotal + shipping);
</script>

جرّب orderTotal = 300 و 500 — لاحظ نقطة التحوّل.

مهمة عملية

أضف else if: إن total >= 300 الشحن 15 بدل 25.

اختبر فهمك

ماذا يعني === في JavaScript؟

تعيين قيمة مساواة في القيمة والنوع أكبر من أو منطقي

4. الدوال — function

الهدف: تغلف منطقاً قابلاً لإعادة الاستخدام.

function greet(name) {
return 'أهلاً ' + name;
}

الدالة تأخذ مدخلات (parameters) وترجع نتيجة بـ return.

function calcTotal(price, qty) { return price * qty; } — تستدعيها: calcTotal(50, 3).

الدوال تجعل الكود أنظف: بدل تكرار نفس الحساب، استدعِ دالة واحدة.

function name(args) { return ... }
return ينهي الدالة ويرجع قيمة
استدعاء: name(قيم)
دالة = وحدة قابلة للاختبار

صورة ذهنية

calcTotal(50, 3)
      │
      ▼
[ function ] → 150
      │
      ▼
  استخدم النتيجة

مختبر — دوال الأسعار

<script>
  function formatPrice(amount) {
    return amount + ' ر.س';
  }

  function calcTotal(price, qty) {
    return price * qty;
  }

  const total = calcTotal(49, 2);
  console.log('المجموع:', formatPrice(total));
</script>

اكتب دالة applyDiscount(price, percent) واستخدمها قبل formatPrice.

مهمة عملية

أنشئ دالة isFreeShipping(total) ترجع true إن total >= 500.

اختبر فهمك

ماذا تفعل return داخل دالة؟

تكرار الحلقة ترجع قيمة وتنهي الدالة تحذف المتغير تفتح نافذة

5. الأحداث — النقر على زر

الهدف: تشغّل كوداً عندما يفعل المستخدم شيئاً.

addEventListener يربط حدثاً بدالة:

button.addEventListener('click', function() { ... });

أحداث شائعة: click، input، submit، keydown.

النمط: 1) اختر العنصر 2) اسمع للحدث 3) نفّذ الدالة.

هذا أساس كل زر «اشترِ»، «أظهر المزيد»، أو «احسب» في مواقع العملاء.

querySelector أو getElementById
addEventListener('click', handler)
لا تنس id أو class للعنصر
handler = دالة بدون () عند التسجيل

صورة ذهنية

[ زر ]
  click
    │
    ▼
[ handler() ]
    │
    ▼
تغيير في الصفحة

مختبر — عدّاد نقرات

<button id="helloBtn">اضغطني</button>
<p id="out"></p>
<script>
  const btn = document.getElementById('helloBtn');
  const out = document.getElementById('out');
  let clicks = 0;

  btn.addEventListener('click', function () {
    clicks = clicks + 1;
    out.textContent = 'نقرات: ' + clicks;
  });
</script>

لاحظ: نمرّر الدالة بدون أقواس () — وإلا تُنفَّذ فوراً.

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

<!DOCTYPE html><html lang="ar" dir="rtl"><head><meta charset="UTF-8"><style>body{font-family:Tahoma,sans-serif;padding:2rem;text-align:center}button{background:#2563eb;color:#fff;border:none;padding:.75rem 1.5rem;border-radius:8px;font-size:1rem;cursor:pointer}button:hover{background:#1d4ed8}#msg{margin-top:1rem;font-size:1.1rem;color:#334155}</style></head><body><button id="btn">👋 اضغط هنا</button><p id="msg">لم تضغط بعد</p><script>document.getElementById("btn").addEventListener("click",function(){document.getElementById("msg").textContent="أحسنت! JS استجاب للنقر 🎉";});</script></body></html>

مهمة عملية

أضف زر «إعادة» يصفّر العداد إلى 0.

اختبر فهمك

أي حدث عند ضغط المستخدم على زر؟

load click scroll resize

6. تغيير النص — DOM

الهدف: تقرأ وتعدّل محتوى عناصر HTML من JS.

DOM = تمثيل الصفحة كشجرة عناصر يمكن لـ JS قراءتها وتعديلها.

document.getElementById('id')
document.querySelector('.class')

element.textContent = 'نص جديد' — للنص الصرف
element.innerHTML — لل HTML (احذر XSS)

element.classList.add('active') — لإضافة class CSS.

textContent آمن للنص العادي
querySelector يختار أول عنصر مطابق
classList.toggle('hidden')
DOM = الجسر بين JS و HTML

صورة ذهنية

JS ──▶ getElementById
         │
         ▼
      [ <p> ]
         │
    textContent = "..."

مختبر — تحديث عنوان

<h1 id="title">عنوان قديم</h1>
<button id="changeBtn">غيّر العنوان</button>
<script>
  const title = document.getElementById('title');
  document.getElementById('changeBtn').addEventListener('click', function () {
    title.textContent = 'عنوان جديد — ' + new Date().toLocaleTimeString('ar');
    title.style.color = '#2563eb';
  });
</script>

جرّب classList.add على عنصر div لتفعيل CSS مختلف.

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

<!DOCTYPE html><html lang="ar" dir="rtl"><head><meta charset="UTF-8"><style>body{font-family:Tahoma,sans-serif;padding:2rem;max-width:28rem;margin:0 auto}#quote{font-size:1.2rem;color:#1e293b;min-height:3rem;padding:1rem;background:#f1f5f9;border-radius:8px;margin:1rem 0}.btn{background:#059669;color:#fff;border:none;padding:.6rem 1rem;border-radius:8px;cursor:pointer;margin-left:.5rem}</style></head><body><p id="quote">اضغط للحصول على نصيحة</p><button class="btn" id="tipBtn">💡 نصيحة</button><button class="btn" id="resetBtn" style="background:#64748b">↩️ إعادة</button><script>const tips=["ابدأ بصفحة واحدة","اختبر على الموبايل","اسم متغيرات واضح","راجع قبل التسليم"];const q=document.getElementById("quote");document.getElementById("tipBtn").addEventListener("click",function(){q.textContent=tips[Math.floor(Math.random()*tips.length)];});document.getElementById("resetBtn").addEventListener("click",function(){q.textContent="اضغط للحصول على نصيحة";});</script></body></html>

مهمة عملية

أنشئ span يعرض حالة «متصل/غير متصل» ويُبدّلها بالنقر.

اختبر فهمك

أي خاصية لتغيير النص دون HTML؟

innerStyle textContent valueOf nodeName

7. مشروع مصغّر — حاسبة

الهدف: تجمع inputs + دوال + events في أداة بسيطة.

input.value يقرأ ما كتبه المستخدم. Number(input.value) يحوّله لرقم.

الحاسبة: حقلان + زر «احسب» + span للنتيجة.

تحقق: إن القيمة فارغة أو NaN — اعرض رسالة خطأ بدل نتيجة غريبة.

هذا النمط (قراءة → حساب → عرض) يتكرر في كل أداة تفاعلية.

document.getElementById('x').value
Number() للتحويل
isNaN() للتحقق
عرض النتيجة في textContent

صورة ذهنية

[ input a ] [ input b ]
        │
     [ احسب ]
        │
        ▼
    النتيجة: ...

مختبر — حاسبة إجمالي

<label>السعر: <input type="number" id="price" value="100"></label>
<label>الكمية: <input type="number" id="qty" value="2"></label>
<button id="calcBtn">احسب</button>
<p>الإجمالي: <span id="result">—</span></p>
<script>
  document.getElementById('calcBtn').addEventListener('click', function () {
    const p = Number(document.getElementById('price').value);
    const q = Number(document.getElementById('qty').value);
    const out = document.getElementById('result');
    if (isNaN(p) || isNaN(q)) {
      out.textContent = 'أدخل أرقاماً صحيحة';
      return;
    }
    out.textContent = p * q + ' ر.س';
  });
</script>

أضف حقل «خصم %» وعدّل الحساب ليطرح الخصم.

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

<!DOCTYPE html><html lang="ar" dir="rtl"><head><meta charset="UTF-8"><style>body{font-family:Tahoma,sans-serif;padding:2rem;max-width:320px;margin:0 auto;background:#f8fafc}h2{color:#1e40af}label{display:block;margin:.75rem 0;font-size:.9rem}input{width:100%;padding:.5rem;border:1px solid #cbd5e1;border-radius:6px;font-size:1rem}button{width:100%;background:#2563eb;color:#fff;border:none;padding:.75rem;border-radius:8px;margin-top:1rem;cursor:pointer;font-size:1rem}#out{font-size:1.5rem;font-weight:bold;color:#059669;margin-top:1rem;text-align:center}</style></head><body><h2>حاسبة</h2><label>العدد الأول<input type="number" id="a" value="10"></label><label>العدد الثاني<input type="number" id="b" value="5"></label><button id="go">+ جمع</button><p id="out">15</p><script>function calc(){const a=Number(document.getElementById("a").value);const b=Number(document.getElementById("b").value);document.getElementById("out").textContent=isNaN(a)||isNaN(b)?"خطأ":a+b;}document.getElementById("go").addEventListener("click",calc);</script></body></html>

مهمة عملية

أضف أزرار «−» «×» «÷» ودوال لكل عملية.

اختبر فهمك

كيف تقرأ قيمة حقل input من JS؟

input.text input.value input.content input.data

8. التحقق من النماذج

الهدف: تمنع إرسال بيانات ناقصة أو خاطئة.

form.addEventListener('submit', function(e) { e.preventDefault(); ... })

preventDefault يوقف إرسال الصفحة الافتراضي — نتحقق أولاً.

تحقق شائع: الاسم غير فارغ، البريد فيه @، الرسالة أطول من 10 أحرف.

اعرض رسالة خطأ بجانب الحقل أو في div.alert — تجربة مستخدم أوضح من alert() فقط.

submit + preventDefault
trim() لإزالة المسافات
includes('@') فحص بريد بسيط
رسائل خطأ بالعربية

صورة ذهنية

إرسال
  │
  ▼
[ تحقق ]
  ├─ OK → نجاح
  └─ خطأ → رسالة

مختبر — فحص بريد

<form id="contactForm">
  <input id="email" type="email" placeholder="البريد">
  <button type="submit">إرسال</button>
  <p id="err" style="color:red"></p>
</form>
<script>
  document.getElementById('contactForm').addEventListener('submit', function (e) {
    e.preventDefault();
    const email = document.getElementById('email').value.trim();
    const err = document.getElementById('err');
    if (!email.includes('@')) {
      err.textContent = 'أدخل بريداً صحيحاً';
      return;
    }
    err.textContent = '';
    alert('تم — ' + email);
  });
</script>

أضف حقل اسم وتحقق أن length >= 2.

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

<!DOCTYPE html><html lang="ar" dir="rtl"><head><meta charset="UTF-8"><style>body{font-family:Tahoma,sans-serif;padding:2rem;max-width:360px;margin:0 auto}input{width:100%;padding:.6rem;margin:.5rem 0;border:1px solid #cbd5e1;border-radius:6px}button{background:#2563eb;color:#fff;border:none;padding:.6rem 1.2rem;border-radius:8px;cursor:pointer}.ok{color:#059669}.bad{color:#dc2626;font-size:.85rem}</style></head><body><h3>تسجيل سريع</h3><form id="f"><input id="name" placeholder="الاسم" required><input id="email" placeholder="البريد"><button type="submit">إرسال</button><p id="msg"></p></form><script>document.getElementById("f").addEventListener("submit",function(e){e.preventDefault();const n=document.getElementById("name").value.trim();const em=document.getElementById("email").value.trim();const m=document.getElementById("msg");if(n.length<2){m.className="bad";m.textContent="الاسم قصير جداً";return;}if(!em.includes("@")){m.className="bad";m.textContent="بريد غير صالح";return;}m.className="ok";m.textContent="مرحباً "+n+"! تم التحقق ✓";});</script></body></html>

مهمة عملية

أضف تحقق: الرسالة لا تقل عن 10 أحرف.

اختبر فهمك

لماذا e.preventDefault() في submit؟

لحذف النموذج لمنع إعادة تحميل الصفحة والتحكم بالإرسال لتشغيل CSS لإخفاء الأزرار

9. ربط JS بصفحة HTML كاملة

الهدف: تنظّم ملف HTML + script منفصل أو داخلي.

للمشاريع الصغيرة: script في نهاية body قبل </body> — HTML يُحمّل أولاً.

للمشاريع الأكبر: <script src="app.js" defer></script> في head.

قسّم منطقك: دوال في الأعلى، event listeners في الأسفل، أو ملف modules لاحقاً.

اربط هذا بصفحتك من مسار WEB — نفس index.html + app.js للتفاعل.

script في آخر body = عناصر جاهزة
src=\"app.js\" لملف خارجي
defer يحمّل JS دون حجب HTML
فصل المحتوى عن السلوك

صورة ذهنية

index.html
   ├── styles.css
   └── app.js
         │
    addEventListener
         │
    عناصر الصفحة

مختبر — ملفان

<!-- index.html -->
<!DOCTYPE html>
<html lang="ar" dir="rtl">
<head>
  <meta charset="UTF-8">
  <title>صفحة + JS</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <h1 id="greet">...</h1>
  <button id="btn">تحية</button>
  <script src="app.js"></script>
</body>
</html>

// app.js
const greet = document.getElementById('greet');
document.getElementById('btn').addEventListener('click', () => {
  greet.textContent = 'أهلاً من ملف JS منفصل!';
});

أنشئ index.html و app.js في مجلد واحد — افتح index من المتصفح.

مهمة عملية

انقل حاسبة الدرس 7 إلى app.js منفصل مربوط بصفحة HTML.

اختبر فهمك

أين نضع <script src=\"app.js\"> غالباً للصفحات البسيطة؟

قبل <!DOCTYPE> نهاية body داخل title داخل meta

10. مشروع نهائي — قائمة مهام

الهدف: تبني mini-project تفاعلي كامل من الصفر.

قائمة مهام (Todo): حقل إدخال + زر «أضف» + ul للعناصر.

عند الإضافة: أنشئ li، ضع النص، أضف زر «تم» يشطب المهمة.

بديل: مولّد نصائح عشوائي من مصفوفة — أبسط إن أردت.

هذا المشروع يجمع: DOM، events، arrays، وconditions — جاهز للعرض في ملفك أو كdemo لعميل.

مصفوفة tasks = [] أو إضافة li مباشرة
createElement + appendChild
classList.add('done') للشطب
ابدأ بسيط — حسّن لاحقاً

صورة ذهنية

[ input ] [ أضف ]
      │
      ▼
  • مهمة 1 [تم]
  • مهمة 2 [تم]
  • مهمة 3

مختبر — Todo List

<input id="taskInput" placeholder="مهمة جديدة">
<button id="addBtn">أضف</button>
<ul id="list"></ul>
<style>
  .done { text-decoration: line-through; color: #94a3b8; }
  li { margin: .5rem 0; }
  button.small { font-size: .75rem; margin-right: .5rem; }
</style>
<script>
  const input = document.getElementById('taskInput');
  const list = document.getElementById('list');

  document.getElementById('addBtn').addEventListener('click', function () {
    const text = input.value.trim();
    if (!text) return;
    const li = document.createElement('li');
    li.textContent = text + ' ';
    const done = document.createElement('button');
    done.textContent = 'تم';
    done.className = 'small';
    done.addEventListener('click', function () { li.classList.toggle('done'); });
    li.appendChild(done);
    list.appendChild(li);
    input.value = '';
  });
</script>

أضف Enter في input لإضافة مهمة — keydown === 'Enter'.

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

<!DOCTYPE html><html lang="ar" dir="rtl"><head><meta charset="UTF-8"><style>body{font-family:Tahoma,sans-serif;padding:2rem;max-width:400px;margin:0 auto;background:#0f172a;color:#e2e8f0}h2{color:#38bdf8}.row{display:flex;gap:.5rem;margin-bottom:1rem}input{flex:1;padding:.6rem;border:1px solid #334155;border-radius:8px;background:#1e293b;color:#fff}button{background:#2563eb;color:#fff;border:none;padding:.6rem 1rem;border-radius:8px;cursor:pointer}ul{list-style:none;padding:0}li{background:#1e293b;padding:.75rem;margin:.5rem 0;border-radius:8px;display:flex;justify-content:space-between;align-items:center}.done{opacity:.5;text-decoration:line-through}.del{background:#dc2626;font-size:.75rem;padding:.3rem .6rem}</style></head><body><h2>✅ مهامي</h2><div class="row"><input id="in" placeholder="مهمة جديدة..."><button id="add">+</button></div><ul id="list"></ul><script>const inp=document.getElementById("in");const lst=document.getElementById("list");function addTask(){const t=inp.value.trim();if(!t)return;const li=document.createElement("li");li.innerHTML="<span>"+t+"</span><button class="del">×</button>";li.querySelector(".del").onclick=function(){li.remove();};document.getElementById("list").appendChild(li);inp.value="";}document.getElementById("add").onclick=addTask;inp.onkeydown=function(e){if(e.key==="Enter")addTask();};</script></body></html>

مهمة عملية

أكمل المشروع: 3 مهام افتراضية + عدّاد «X مهام متبقية» يتحدّث.

اختبر فهمك

أفضل خطوة بعد إنهاء مسار JS؟

دمج JS في صفحتك من مسار WEB ونشرها نسيان HTML/CSS عدم بناء مشاريع تعلّم 10 أطر دفعة واحدة

JavaScript للمتصفح — تفاعل وواجهات

كيف تدرس هذا المسار؟

1. ماذا يفعل JavaScript في المتصفح؟

صورة ذهنية

مختبر — أول سطر JS

مهمة عملية

اختبر فهمك

2. المتغيرات — let و const

صورة ذهنية

مختبر — حساب سعر

مهمة عملية

اختبر فهمك

3. الشروط — if و else

صورة ذهنية

مختبر — شحن مجاني

مهمة عملية

اختبر فهمك

4. الدوال — function

صورة ذهنية

مختبر — دوال الأسعار

مهمة عملية

اختبر فهمك

5. الأحداث — النقر على زر

صورة ذهنية

مختبر — عدّاد نقرات

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

مهمة عملية

اختبر فهمك

6. تغيير النص — DOM

صورة ذهنية

مختبر — تحديث عنوان

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

مهمة عملية

اختبر فهمك

7. مشروع مصغّر — حاسبة

صورة ذهنية

مختبر — حاسبة إجمالي

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

مهمة عملية

اختبر فهمك

8. التحقق من النماذج

صورة ذهنية

مختبر — فحص بريد

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

مهمة عملية

اختبر فهمك

9. ربط JS بصفحة HTML كاملة

صورة ذهنية

مختبر — ملفان

مهمة عملية

اختبر فهمك

10. مشروع نهائي — قائمة مهام

صورة ذهنية

مختبر — Todo List

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

مهمة عملية

اختبر فهمك

صفحتك لم تعد ثابتة — صارت تتفاعل