الدرس 28 · الوحدة 9: تفاعلية الويب المتقدمة
إنشاء العناصر وحذفها: قائمة مهام
نبني الصفحة من البيانات: نضيف العناصر ونحذفها بالبرمجة. ⏱ نحو 30 دقيقة.
بعد هذا الدرس ستستطيع أن:
- تنشئ عناصر جديدة بـ
createElementوتضيفها بـappend. - تبني قائمة من مصفوفة بيانات.
- تحذف العناصر بـ
remove. - تبني تطبيق قائمة مهام كاملًا، وتتعرف على
localStorage.
١إنشاء عنصر جديد
حتى الآن غيّرنا عناصر موجودة. الآن ننشئ عناصر جديدة لم تكن في HTML، في ثلاث خطوات:
<ul id="list"> <li>قهوة</li></ul><script src="script.js"></script>
// 1) أنشئ العنصرconst li = document.createElement("li");// 2) ضع فيه محتوىli.textContent = "شاي";// 3) أضفه إلى الصفحة داخل أبيهdocument.querySelector("#list").append(li);
Console
| الدالة | تفعل |
|---|---|
document.createElement("li") | تنشئ عنصرًا في الذاكرة (لا يظهر بعد). |
parent.append(el) | تضيفه في آخر الأب، فيظهر. |
parent.prepend(el) | تضيفه في أول الأب. |
el.remove() | تحذف العنصر من الصفحة. |
٢من مصفوفة إلى قائمة
هكذا تعرض المتاجر منتجاتها: بيانات في مصفوفة، وحلقة تنشئ عنصرًا لكل منتج:
<div id="menu"></div><script src="script.js"></script>
.item { display: flex; justify-content: space-between; padding: 8px; border-bottom: 1px solid #ddd; }const menu = [ { name: "قهوة عربية", price: 8 }, { name: "قهوة مختصة", price: 18 }, { name: "شاي", price: 5 }]; const box = document.querySelector("#menu");for (const item of menu) { const div = document.createElement("div"); div.className = "item"; div.innerHTML = `<span>${item.name}</span><b>${item.price} ريال</b>`; box.append(div);}
Console
٣المشروع: قائمة مهام
نجمع كل ما تعلمناه: حدث، وقراءة حقل، وإنشاء عنصر، وحذفه:
<form id="form"> <input id="task" placeholder="مهمة جديدة…"> <button>أضف</button></form><ul id="list"></ul><p id="count">لا توجد مهام</p><script src="script.js"></script>
li { display: flex; justify-content: space-between; padding: 6px; border-bottom: 1px solid #eee; cursor: pointer; }li.done span { text-decoration: line-through; opacity: 0.5; }.del { background: none; border: 0; color: crimson; cursor: pointer; }
const form = document.querySelector("#form");const input = document.querySelector("#task");const list = document.querySelector("#list"); function updateCount() { const n = list.children.length; document.querySelector("#count").textContent = n === 0 ? "لا توجد مهام" : `عدد المهام: ${n}`;} form.addEventListener("submit", function (e) { e.preventDefault(); const text = input.value.trim(); if (text === "") return; const li = document.createElement("li"); const span = document.createElement("span"); span.textContent = text; const del = document.createElement("button"); del.textContent = "✕"; del.className = "del"; span.addEventListener("click", function () { li.classList.toggle("done"); }); del.addEventListener("click", function () { li.remove(); updateCount(); }); li.append(span, del); list.append(li); input.value = ""; updateCount();});
Console
جرّب في المعاينة: أضف مهام، واضغط على مهمة لتشطبها، واضغط ✕ لتحذفها. لاحظ أن كل مهمة لها زر حذف خاص بها، يعرف أي li يحذف.
٤حفظ المهام: localStorage
لو حدّثت الصفحة تختفي المهام، لأنها في الذاكرة فقط. المتصفح يوفر مخزنًا صغيرًا يبقى بعد إغلاق الصفحة:
// حفظ: localStorage يخزن النصوص فقط، فنحوّل المصفوفة إلى JSONlocalStorage.setItem("tasks", JSON.stringify(["مراجعة", "تسليم"])); // قراءة عند فتح الصفحةconst saved = JSON.parse(localStorage.getItem("tasks")) || [];
جرّب هذا في ملفك على جهازك (المعاينة هنا معزولة لا تحفظ). البيانات تبقى في متصفح هذا الجهاز فقط؛ أما الحفظ للجميع فمكانه قاعدة بيانات في الخادم.
توقّع وتحقّق
ما الذي ينشئ عنصر li جديدًا؟
createElement.أنشأت العنصر لكنه لا يظهر. ماذا نسيت؟
يجب إضافته إلى أب.
حذف العنصر el من الصفحة:
remove.عدد أبناء القائمة list:
children.الخلاصة
createElementثمtextContentثمappend: ثلاث خطوات لعنصر جديد.el.remove()يحذف العنصر، وchildren.lengthعدد الأبناء.- لكل عنصر جديد مستمع أحداث خاص به.
localStorageيحفظ نصوصًا في متصفح الجهاز، وJSONلتحويل المصفوفات.
تحدٍّ برمجي: قائمة المشتريات
متقدماكتب في script.js قائمة مشتريات: يكتب الزائر صنفًا ويضغط «أضف»، فيظهر في القائمة مع زر حذف، ويتحدث العدد.
المطلوب:
- عند الإرسال: أنشئ li فيه اسم الصنف وأضفه إلى #list.
- لا تُضاف القيمة الفارغة.
- يُفرّغ الحقل بعد الإضافة.
- لكل li زر بالصنف del يحذفه.
- #count يعرض: الأصناف: (العدد) بعد كل إضافة وحذف.
👀 اعرض شكل الناتج المطلوب
Console
✓ التحقق الآلي من حلّك:
- إضافة صنف تنشئ li فيه اسمه.
- القيمة الفارغة لا تُضاف.
- الحقل يُفرّغ بعد الإضافة.
- زر del في كل li يحذفه.
- #count يطابق عدد الأصناف.
💡 تلميح 1
const li = document.createElement("li"); … list.append(li);💡 تلميح 2
زر الحذف: del.addEventListener(
"click", function () { li.remove(); updateCount(); });حاول بنفسك أولًا؛ للمسألة أكثر من حلّ صحيح.
<form id="form"> <input id="item" placeholder="صنف جديد"> <button>أضف</button></form><ul id="list"></ul><p id="count">الأصناف: 0</p><script src="script.js"></script>
const form = document.querySelector("#form");const input = document.querySelector("#item");const list = document.querySelector("#list"); function updateCount() { document.querySelector("#count").textContent = `الأصناف: ${list.children.length}`;} form.addEventListener("submit", function (e) { e.preventDefault(); const text = input.value.trim(); if (text === "") return; const li = document.createElement("li"); li.textContent = text + " "; const del = document.createElement("button"); del.textContent = "حذف"; del.className = "del"; del.addEventListener("click", function () { li.remove(); updateCount(); }); li.append(del); list.append(li); input.value = ""; updateCount();});