در حال بارگذاری...

پروژهٔ کوچک — فهرست کارهای تعاملی

اینجا یک فهرست کار کوتاه می‌سازی. کار buy tea را اضافه می‌کنی، همان ردیف را انجام‌شده می‌کنی، و بعد حذفش می‌کنی. ردیف باز فقط buy tea است. ردیف انجام‌شده done: buy tea است.

خلاصه فهرست نمی‌ساخت

جلسهٔ قبل مهارت‌ها را نام برد و روی صفحه فهرستی نبود. اینجا خود فهرست، صفحه است. آرایه، فرم، textContent و کلیک را به کار می‌گیری. با هر اضافه کردن، صفحه نباید از نو بارگذاری شود.

هر کار یک شیء است

tasks یک آرایه است. هر عضو text دارد و done. کار تازه با done: false شروع می‌شود. addTask فاصلهٔ دو سر متن را برمی‌دارد. اگر چیزی نماند، آن را وارد فهرست نمی‌کند.

یک کار اضافه کن

javascript 
const tasks = [];
function addTask(text) {
const clean = text.trim();
if (!clean) {
return;
}
tasks.push({ text: clean, done: false });
}
addTask("buy tea");
console.log(tasks[0].text);
console.log(tasks[0].done);

اول buy tea چاپ می‌شود، بعد false. اگر addTask(" ") را صدا بزنی، بعد از trim رشته خالی است و push انجام نمی‌شود. در این حالت tasks.length همان 0 می‌ماند.

فرم نباید صفحه را تازه کند

دکمهٔ ثبت فرم، سند را از نو بارگذاری می‌کند. آرایه فقط در حافظه است. با بارگذاری تازه، آرایه می‌رود و فهرست خالی دیده می‌شود. event.preventDefault() همان بارگذاری را قطع می‌کند. بعد متن را اضافه کن، فیلد را خالی کن، و فهرست را دوباره بکش.

اضافه کردن بدون بارگذاری تازه

javascript 
const form = document.querySelector("#add-form");
const input = document.querySelector("#task-text");
form.addEventListener("submit", (event) => {
event.preventDefault();
addTask(input.value);
input.value = "";
render();
});

سند همان صفحه می‌ماند. فیلد دوباره خالی است. render با آرایهٔ تازه اجرا می‌شود. اگر فیلد فقط فاصله باشد، addTask برمی‌گردد و ردیف تازه‌ای ساخته نمی‌شود.

کشیدن، انجام‌شده، حذف

render محتوای #tasks را خالی می‌کند و برای هر کار یک li می‌سازد. کار باز همان text را نشان می‌دهد. کار انجام‌شده done: را جلوی text می‌گذارد. هر ردیف دو دکمه دارد و هر دو type="button" هستند تا فرم را ثبت نکنند. دکمهٔ Done مقدار done را برعکس می‌کند. دکمهٔ Remove با splice همان عضو را برمی‌دارد. هر دو بعدش render را صدا می‌زنند. اگر بعد از حذف دوباره نکشی، شمارهٔ دکمه‌های قدیمی به کار اشتباه اشاره می‌کند.

کشیدن، برعکس کردن، حذف

javascript 
function toggleTask(index) {
tasks[index].done = !tasks[index].done;
}
function removeTask(index) {
tasks.splice(index, 1);
}
function render() {
const list = document.querySelector("#tasks");
list.textContent = "";
tasks.forEach((task, index) => {
const item = document.createElement("li");
item.textContent = task.done ? "done: " + task.text : task.text;
const doneButton = document.createElement("button");
doneButton.type = "button";
doneButton.textContent = "Done";
doneButton.addEventListener("click", () => {
toggleTask(index);
render();
});
const removeButton = document.createElement("button");
removeButton.type = "button";
removeButton.textContent = "Remove";
removeButton.addEventListener("click", () => {
removeTask(index);
render();
});
item.append(doneButton, removeButton);
list.append(item);
});
}

از addTask("buy tea") شروع کن، بعد toggleTask(0) و بعد render. ردیف می‌شود done: buy tea. یک بار دیگر toggleTask(0) آن را به buy tea برمی‌گرداند. removeTask(0) طول آرایه را 0 می‌کند و render بعدی هیچ ردیفی نشان نمی‌دهد. متن فیلد را با textContent بنویس. آن را به‌صورت HTML داخل صفحه نگذار.

شماره مال همان نوبت کشیدن است

forEach شماره را از همان دور می‌بندد. بعد از splice آن شماره‌های قدیمی عضو دیگری را نشانه می‌روند. render دکمه‌های قبلی را دور می‌ریزد و دکمه‌های تازه با شمارهٔ درست می‌سازد. اگر این بار دوم را حذف کنی، Remove ردیف دیگری را برمی‌دارد.

همهٔ صفحه

فرم اضافه می‌کند. فهرست می‌کشد. Done و Remove فقط tasks را عوض می‌کنند و دوباره می‌کشند.

صفحهٔ فهرست کار

html 
<!DOCTYPE html>
<html>
<body>
<form id="add-form">
<input id="task-text" type="text">
<button type="submit">Add</button>
</form>
<ul id="tasks"></ul>
<script>
const tasks = [];
function addTask(text) {
const clean = text.trim();
if (!clean) return;
tasks.push({ text: clean, done: false });
}
function toggleTask(index) {
tasks[index].done = !tasks[index].done;
}
function removeTask(index) {
tasks.splice(index, 1);
}
function render() {
const list = document.querySelector("#tasks");
list.textContent = "";
tasks.forEach((task, index) => {
const item = document.createElement("li");
item.textContent = task.done ? "done: " + task.text : task.text;
const doneButton = document.createElement("button");
doneButton.type = "button";
doneButton.textContent = "Done";
doneButton.addEventListener("click", () => {
toggleTask(index);
render();
});
const removeButton = document.createElement("button");
removeButton.type = "button";
removeButton.textContent = "Remove";
removeButton.addEventListener("click", () => {
removeTask(index);
render();
});
item.append(doneButton, removeButton);
list.append(item);
});
}
document.querySelector("#add-form").addEventListener("submit", (event) => {
event.preventDefault();
addTask(document.querySelector("#task-text").value);
document.querySelector("#task-text").value = "";
render();
});
</script>
</body>
</html>

buy tea را بنویس و Add را بزن. یک ردیف buy tea می‌آید و فیلد خالی می‌شود. Done را بزن. همان ردیف done: buy tea می‌شود. Remove را بزن. فهرست خالی است. Add را روی فیلد خالی بزن. ردیفی اضافه نمی‌شود.

پشت پیشخوان

  1. addTask("buy tea") را صدا بزن. متن اول buy tea است و done برابر false است.
  2. فرم را ثبت کن. صفحه از نو بارگذاری نمی‌شود و ردیف دیده می‌شود.
  3. Done را بزن. ردیف done: buy tea است.
  4. Remove را بزن. tasks.length برابر 0 است.
  5. فقط فاصله ثبت کن. فهرست بزرگ‌تر نمی‌شود.

جاهایی که کار خراب می‌شود

بارگذاری تازه ذخیره نیست. فیلد خالی کار نیست. Done و Remove نباید فرم را ثبت کنند.

  • جا انداختن preventDefault، که با ثبت فرم آرایه از بین می‌رود
  • push کردن رشتهٔ خالی
  • گذاشتن type="submit" روی Done یا Remove
  • پاک کردن ردیف فقط از صفحه و فراموش کردن splice، که کشیدن بعدی همان ردیف را برمی‌گرداند
  • نزدن render بعد از splice، که شمارهٔ قدیمی ردیف دیگری را حذف می‌کند
  • ریختن متن فیلد در صفحه به‌صورت HTML

این‌ها را نگه دار

  • هر کار { text, done } است و done اول false است
  • addTask("buy tea") عبارت buy tea را نگه می‌دارد؛ فیلد خالی هیچ چیز نگه نمی‌دارد
  • preventDefault صفحه را نگه می‌دارد و بعد render ردیف‌ها را می‌کشد
  • Done متن done: buy tea را نشان می‌دهد؛ Remove طول را 0 می‌کند
  • بعد از هر تغییر دوباره بکش

🧠 دانش خود را بیازمایید

آماده شروع

دانش خود را بیازمایید

خود را با این آزمون تعاملی به چالش بکشید و ببینید موضوع را چقدر خوب درک کرده‌اید

❓
5
سوالات
🎯
70%
برای قبولی
♾️
∞
زمان
🔄
∞
تلاش‌ها

📝 دستورالعمل‌ها

  • هر سوال را با دقت بخوانید
  • بهترین پاسخ را برای هر سوال انتخاب کنید
  • می‌توانید آزمون را هر چند بار که می‌خواهید تکرار کنید
  • پیشرفت شما در بالا نمایش داده می‌شود
موضوع 70 از 71
Javascript آموزش