HTML مع JavaScript | PhineX Academy

المفهوم الأساسي

🔌 كيف يتصل JavaScript بصفحة HTML؟

JavaScript لغة برمجة تعمل في المتصفح. هي تقرأ وتعدّل HTML في الوقت الفعلي دون الحاجة لتحديث الصفحة. هذا ما يجعل المواقع "حية".

3 طرق لإضافة JavaScript:
1️⃣ Inline: onclick="doSomething()" مباشرة في الـ tag — للاستخدام السريع فقط
2️⃣ Internal: <script>...</script> داخل HTML — للصفحات البسيطة
3️⃣ External: <script src="app.js"> — الأفضل دائماً للمشاريع الحقيقية

adding-js.html — الطرق الثلاث

<!DOCTYPE html>
الهيكل الأساسي
<html lang="ar" dir="rtl">
<head>
  <meta charset="UTF-8">
  <title>HTML + JS</title>
  <!── الطريقة 3: ملف خارجي — يجب أن يكون قبل </head> ──>
  <script src="app.js" defer></script>
defer: ينفّذ بعد تحميل HTML كاملاً
</head>
<body>
 
  <!── الطريقة 1: Inline — مباشرة في الـ tag ──>
سريعة لكن صعبة الصيانة
  <button onclick="alert('مرحباً!')">اضغط هنا</button>
onclick ينفّذ JS لحظة الضغط
 
  <!── الطريقة 2: Internal — tag script ──>
في آخر body أو في head مع defer
  <script>
كل ما داخله JavaScript
    console.log("الصفحة محمّلة!");
يطبع في Developer Tools
  </script>
إغلاق tag الـ script
</body>
</html>

⚠️ لماذا JS في آخر body أو مع defer؟ عندما يصل المتصفح لـ <script> يتوقف عن تحميل HTML ويُنفّذ JS أولاً. لو JS يحاول الوصول لعنصر لم يُحمَّل بعد → خطأ! الحل: defer أو وضع الـ script قبل </body>.

القسم الأول

🎯 الوصول لعناصر HTML من JavaScript

الـ DOM (Document Object Model) هو تمثيل HTML كشجرة من الكائنات التي يمكن لـ JavaScript قراءتها وتعديلها.

dom-access.html + dom-access.js

<!── HTML: عناصر ستُعدَّل ──>
في ملف HTML
<h1 id="page-title">العنوان الأصلي</h1>
id يُستخدم للوصول السريع المباشر
<p class="info">نص أول</p>
class يُستخدم لتحديد مجموعة
<p class="info">نص ثانٍ</p>
نفس الـ class
<button id="myBtn">اضغط</button>
زر للتفاعل
<div data-product="laptop">لاب توب</div>
data-* للبيانات المخصصة
 
// JavaScript: طرق الوصول للعناصر
في ملف JS أو script tag
 
// 1. getElementById — الأسرع (بالـ id)
const title = document.getElementById('page-title');
يُرجع عنصراً واحداً أو null
 
// 2. querySelector — الأكثر مرونة (CSS selector)
const btn  = document.querySelector('#myBtn');
بالـ id مع #
const first = document.querySelector('.info');
أول .info فقط
const h2   = document.querySelector('h2');
أول h2 في الصفحة
const prod = document.querySelector('[data-product="laptop"]');
بقيمة data attribute — قوي جداً
 
// 3. querySelectorAll — يُرجع كل المطابقين
const all = document.querySelectorAll('.info');
NodeList — تحتاج forEach للمرور عليها
all.forEach(el => console.log(el.textContent));
el.textContent يقرأ النص داخل العنصر

القسم الثاني

✏️ تعديل العناصر برمجياً

modify-dom.js — كل أنواع التعديل

const el = document.getElementById('myElement');
احصل على العنصر أولاً
 
// ─── تعديل المحتوى ───
el.textContent = "نص جديد آمن";
textContent: نص فقط — لا يُشغّل HTML — آمن
el.innerHTML  = "<strong>نص غامق</strong>";
innerHTML: يُشغّل HTML — خطر XSS إذا من مستخدم
el.innerText  = "نص مرئي";
innerText: يأخذ CSS بالحسبان (يتجاهل hidden)
 
// ─── تعديل الـ CSS ───
el.style.color           = "#39ff14";
خاصية CSS واحدة مباشرة
el.style.backgroundColor = "#0f1219";
background-color → backgroundColor (camelCase في JS)
el.style.display         = "none";
يُخفي العنصر تماماً
el.style.display         = "block";
يُظهره مجدداً
 
// ─── classList: الطريقة الأفضل للـ CSS ───
بدل style مباشرة
el.classList.add('active');
يُضيف class — لا يحذف الكلاسات الأخرى
el.classList.remove('hidden');
يحذف class
el.classList.toggle('dark-mode');
إذا موجود يحذفه، إذا لا يُضيفه
el.classList.contains('active');
يُرجع true/false — للتحقق
 
// ─── تعديل الـ Attributes ───
el.setAttribute('href', 'https://new-url.com');
يُعيّن قيمة أي attribute
el.getAttribute('href');
يقرأ قيمة attribute
el.removeAttribute('disabled');
يحذف attribute — مثالي لتفعيل الأزرار
el.dataset.userId;
يقرأ data-user-id بسهولة

القسم الثالث

🎧 الأحداث (Events) — قلب التفاعل

الـ Event هو أي شيء يحدث في الصفحة: ضغطة، تحرك ماوس، كتابة، تحميل. JavaScript يستمع لهذه الأحداث ويستجيب لها.

events.js — كل أنواع الأحداث

const btn = document.querySelector('#myBtn');
احصل على الزر
 
// ─── addEventListener — الطريقة الصحيحة ───
btn.addEventListener('click', (event) => {
'click' = نوع الحدث. event = معلومات الحدث
  console.log('تم الضغط!');
  console.log(event.target);
event.target = العنصر الذي أطلق الحدث
});
 
// ─── أشهر الأحداث ───
btn.addEventListener('click', fn);
نقرة واحدة
btn.addEventListener('dblclick', fn);
نقرتان متتاليتان
el.addEventListener('mouseover', fn);
الماوس يدخل العنصر
el.addEventListener('mouseout', fn);
الماوس يخرج من العنصر
input.addEventListener('input', fn);
عند كل حرف يُكتب في الحقل — مثالي للبحث الفوري
input.addEventListener('change', fn);
بعد مغادرة الحقل (blur) والقيمة تغيرت
input.addEventListener('focus', fn);
عند النقر على الحقل (يصبح نشطاً)
input.addEventListener('blur', fn);
عند مغادرة الحقل
document.addEventListener('keydown', fn);
ضغط مفتاح في لوحة المفاتيح
window.addEventListener('scroll', fn);
تمرير الصفحة
window.addEventListener('load', fn);
الصفحة وكل مواردها محمّلة
document.addEventListener('DOMContentLoaded', fn);
HTML محمّل (بدون انتظار الصور) — أسرع من load

🛠️ مثال تطبيقي: زر تغيير المظهر

اكتب الكود:

h2 { color: #39ff14; margin-bottom: 10px; }
body.light h2 { color: #00a000; }

button {
  background: #39ff14;
  color: #000;
  border: none;
  padding: 10px 20px;
  border-radius: 8px;
  cursor: pointer;
  font-weight: bold;
  margin-bottom: 16px;
}
#counter-display {
  font-size: 2rem;
  font-weight: bold;
  color: #39ff14;
  margin: 10px 0;
}
body.light #counter-display { color: #00a000; }
.count-btns { display: flex; gap: 8px; }
.count-btns button { flex: 1; }
</style>

<button onclick="toggleTheme()">🌙 تبديل المظهر</button>

<div class="card">
  <h2>عداد تفاعلي</h2>
  <div id="counter-display">0</div>
  <div class="count-btns">
    <button onclick="changeCount(-1)">➖</button>
    <button onclick="changeCount(1)">➕</button>
    <button onclick="resetCount()">🔄 إعادة</button>
  </div>
</div>

<div class="card">
  <h2>بحث فوري</h2>
  <input type="text" id="search" placeholder="ابحث..." oninput="filterList()"
    style="width:100%;padding:8px;border-radius:6px;border:1px solid #333;background:#0a0d12;color:#c9d1d9;margin-bottom:8px;">
  <ul id="fruit-list" style="list-style:none;padding:0;">
    <li>🍎 تفاح</li><li>🍊 برتقال</li>
    <li>🍌 موز</li><li>🍇 عنب</li><li>🍓 فراولة</li>
  </ul>
</div>

function toggleTheme() {
  document.body.classList.toggle('light');
}

function changeCount(n) {
  count += n;
  document.getElementById('counter-display').textContent = count;
}

function resetCount() {
  count = 0;
  document.getElementById('counter-display').textContent = 0;
}

function filterList() {
  const term = document.getElementById('search').value.toLowerCase();
  document.querySelectorAll('#fruit-list li').forEach(li => {
    li.style.display = li.textContent.includes(term) ? '' : 'none';
  });
}
</script>

النتيجة المباشرة:

القسم الرابع

🏗️ إنشاء وحذف عناصر HTML برمجياً

create-remove.js

// ─── إنشاء عنصر جديد ───
const card = document.createElement('div');
ينشئ div في الذاكرة — لم يُضَف للصفحة بعد
card.className    = 'product-card';
يضيف class
card.id           = 'card-1';
يضيف id
card.innerHTML    = `
template literal للمحتوى المتعدد الأسطر
    <h3>اسم المنتج</h3>
    <p>الوصف هنا</p>
    <button>شراء</button>
`;
 
// ─── إضافة العنصر للصفحة ───
const container = document.getElementById('products');
الأب الذي سيحتوي البطاقة
container.appendChild(card);
يُضيف العنصر كآخر ابن في container
container.prepend(card);
يُضيف كأول ابن
container.insertAdjacentHTML('beforeend', '<p>جديد</p>');
الأسرع لإضافة HTML مباشرة
 
// ─── حذف عنصر ───
card.remove();
يحذف العنصر من الصفحة مباشرة
container.innerHTML = '';
يحذف كل الأبناء دفعة واحدة

📋 مثال كامل: قائمة مهام ديناميكية

التطبيق الكامل:

<h2>📝 قائمة المهام</h2>
<div class="input-row">
  <input type="text" id="task-input" placeholder="مهمة جديدة...">
  <button onclick="addTask()">إضافة ➕</button>
</div>
<ul id="todo-list"></ul>
<div id="count"></div>

function addTask() {
  const input = document.getElementById('task-input');
  const text = input.value.trim();
  if (!text) return;

tasks.push({ id: Date.now(), text, done: false });
  input.value = '';
  renderTasks();
}

function toggleTask(id) {
  tasks = tasks.map(t => t.id === id ? {...t, done: !t.done} : t);
  renderTasks();
}

function deleteTask(id) {
  tasks = tasks.filter(t => t.id !== id);
  renderTasks();
}

const done = tasks.filter(t => t.done).length;
  document.getElementById('count').textContent =
    `${done} من ${tasks.length} مهمة مكتملة`;
}

// إضافة بالضغط Enter
document.getElementById('task-input').addEventListener('keydown', e => {
  if (e.key === 'Enter') addTask();
});
</script>

النتيجة:

HTML مع JavaScript
أضف الحياة لصفحاتك

🔌 كيف يتصل JavaScript بصفحة HTML؟

🎯 الوصول لعناصر HTML من JavaScript

✏️ تعديل العناصر برمجياً

🎧 الأحداث (Events) — قلب التفاعل

🛠️ مثال تطبيقي: زر تغيير المظهر

🏗️ إنشاء وحذف عناصر HTML برمجياً

📋 مثال كامل: قائمة مهام ديناميكية

🧠 اختبار HTML مع JavaScript

HTML مع JavaScriptأضف الحياة لصفحاتك

🔌 كيف يتصل JavaScript بصفحة HTML؟

🎯 الوصول لعناصر HTML من JavaScript

✏️ تعديل العناصر برمجياً

🎧 الأحداث (Events) — قلب التفاعل

🛠️ مثال تطبيقي: زر تغيير المظهر

🏗️ إنشاء وحذف عناصر HTML برمجياً

📋 مثال كامل: قائمة مهام ديناميكية

🧠 اختبار HTML مع JavaScript

HTML مع JavaScript
أضف الحياة لصفحاتك