پروژه لیست TODO (CRUD) در جاوا اسکریپت: راهنمای کامل و جامع با کد منبع


در دنیای توسعه وب، پروژه‌های لیست TODO یکی از محبوب‌ترین و کاربردی‌ترین نمونه‌هایی هستند که نه تنها یادگیری مفاهیم پایه‌ای برنامه‌نویسی و DOM در جاوا اسکریپت را تسهیل می‌کنند، بلکه امکان ساخت برنامه‌های کاربردی ساده و در عین حال موثر را فراهم می‌آورند. این پروژه، به صورت کامل و جامع، شامل عملیات پایه‌ای CRUD است؛ یعنی Create، Read، Update و Delete. در ادامه، به تفصیل هر بخش این پروژه را شرح می‌دهیم، همراه با ارائه کد منبع، تا بتوانید به راحتی آن را در پروژه‌های خود پیاده‌سازی کنید.
ابتدا لازم است، نگاهی کلی به ساختار پروژه بیندازیم. این پروژه، شامل یک فرم ساده برای افزودن وظایف جدید، لیستی برای نمایش وظایف، و امکاناتی برای ویرایش یا حذف وظایف است. در کنار این موارد، از ذخیره‌سازی محلی در Local Storage بهره می‌گیریم تا حتی پس از بسته شدن مرورگر، وظایف باقی بمانند. حال، بیایید گام به گام، وارد بخش‌های مختلف این پروژه شویم.
ساختار HTML: پایه و اساس پروژه
در مرحله اول، باید یک ساختار HTML مناسب طراحی کنیم. این ساختار شامل یک فرم برای وارد کردن وظایف، یک بخش برای نمایش وظایف و دکمه‌های لازم برای عملیات‌های مختلف است. برای مثال:
html  

<!DOCTYPE html>

<html lang="fa">

<head>

  <meta charset="UTF-8" />

  <title>لیست TODO در جاوا اسکریپت</title>

  <style>

    body { font-family: Tahoma, sans-serif; padding: 20px; }

    input[type="text"] { width: 300px; padding: 8px; }

    button { padding: 8px 12px; margin-left: 8px; }

    ul { list-style: none; padding: 0; margin-top: 20px; }

    li { padding: 8px; background: #f4f4f4; margin-bottom: 8px; display: flex; justify-content: space-between; align-items: center; }

  </style>

</head>

<body>

  <h2>لیست وظایف (TODO)</h2>

  <form id="todo-form">

    <input type="text" id="task-input" placeholder="وظیفه جدید را وارد کنید" />

    <button type="submit">افزودن</button>

  </form>

  <ul id="todo-list"></ul>
<script src="app.js"></script>

</body>

</html>

در این ساختار، یک فرم برای وارد کردن وظایف وجود دارد. با کلیک بر روی دکمه، وظیفه جدید به لیست افزوده می‌شود. لیست وظایف در عنصر `<ul>` نگهداری می‌شود و هر وظیفه در قالب یک `<li>` است.
کد جاوا اسکریپت: عملیات CRUD و ذخیره‌سازی
حالا نوبت به نوشتن کد جاوا اسکریپت می‌رسد. در فایل `app.js`، ابتدا باید بتوانیم وظایف را در یک آرایه نگهداری کنیم. سپس، عملیات افزودن، خواندن، ویرایش و حذف وظایف را پیاده‌سازی کنیم. در ادامه، کد کامل این بخش را مشاهده می‌کنید:
javascript  

// گرفتن المان‌ها  

const taskInput = document.getElementById('task-input');

const todoForm = document.getElementById('todo-form');

const todoList = document.getElementById('todo-list');
// آرایه وظایف  

let tasks = JSON.parse(localStorage.getItem('tasks')) || [];
// تابع برای ذخیره‌سازی در لوکال استوریج  

function saveTasks() {

  localStorage.setItem('tasks', JSON.stringify(tasks));

}
// نمایش لیست وظایف  

function renderTasks() {

  todoList.innerHTML = '';

  tasks.forEach((task, index) => {

    const li = document.createElement('li');

    li.textContent = task.name;
// دکمه ویرایش  

    const editBtn = document.createElement('button');

    editBtn.textContent = 'ویرایش';

    editBtn.onclick = () => editTask(index);
// دکمه حذف  

    const deleteBtn = document.createElement('button');

    deleteBtn.textContent = 'حذف';

    deleteBtn.onclick = () => deleteTask(index);
li.appendChild(editBtn);

    li.appendChild(deleteBtn);

    todoList.appendChild(li);

  });

}
// افزودن وظیفه جدید  

todoForm.onsubmit = function(e) {

  e.preventDefault();

  const taskName = taskInput.value.trim();

  if (taskName !== '') {

    tasks.push({ name: taskName });

    saveTasks();

    renderTasks();

    taskInput.value = '';

  }

};
// ویرایش وظیفه  

function editTask(index) {

  const newName = prompt('ویرایش وظیفه:', tasks[index].name);

  if (newName !== null && newName.trim() !== '') {

    tasks[index].name = newName.trim();

    saveTasks();

    renderTasks();

  }

}
// حذف وظیفه  

function deleteTask(index) {

  tasks.splice(index, 1);

  saveTasks();

  renderTasks();

}
// نمایش وظایف در هنگام بارگذاری صفحه  

window.onload = function() {

  renderTasks();

};

در این کد، چند نکته مهم وجود دارد:
- ذخیره‌سازی در Local Storage: هر بار که وظایف تغییر می‌کنند، این تغییر در Local Storage ذخیره می‌شود، تا پس از بسته شدن مرورگر، وظایف باقی بمانند.
- نمایش وظایف: تابع `renderTasks()`، تمامی وظایف را در لیست نشان می‌دهد، همراه با دکمه‌های ویرایش و حذف.
- عملیات CRUD: افزودن، ویرایش و حذف وظایف، به صورت مستقیم روی آرایه انجام می‌شود، سپس نتیجه در ذخیره‌سازی ثبت و نمایش داده می‌شود.
- مدیریت خطاها: برای جلوگیری از افزودن وظایف خالی، از تابع `trim()` استفاده می‌شود.
مزایای این پروژه و نکات قابل توجه
این پروژه، نمونه‌ای عالی برای یادگیری عملیات پایه‌ای در برنامه‌نویسی سمت کلاینت است. با طراحی ساده، قابل فهم و توسعه‌پذیر، پایه‌ای برای پروژه‌های بزرگ‌تر محسوب می‌شود. همچنین، استفاده از Local Storage، راهی ساده اما کاربردی برای حفظ اطلاعات است که می‌تواند جایگزین پایگاه‌داده‌های پیچیده در پروژه‌های کوچک باشد.
علاوه بر این، توسعه‌دهندگان می‌توانند امکانات بیشتری به این پروژه اضافه کنند. برای مثال، افزودن تاریخ و زمان وظایف، دسته‌بندی وظایف، یا حتی افزودن قابلیت‌های مهم‌تری مانند جستجو و فیلتر وظایف. در کنار این موارد، می‌توان با تغییر استایل‌ها، ظاهر پروژه را به سلیقه خود سفارشی کرد.
نتیجه‌گیری
پروژه لیست TODO با عملیات CRUD در جاوا اسکریپت، نمونه‌ای کاربردی و در عین حال ساده است که به خوبی مفاهیم پایه‌ای برنامه‌نویسی وب را آموزش می‌دهد. با این پروژه، نه تنها توانایی کار با DOM و رویدادها را توسعه می‌دهید، بلکه مفهوم ذخیره‌سازی داده‌ها در Local Storage را نیز می‌آموزید. این پروژه، نقطه شروعی عالی برای شروع پروژه‌های بیشتر و پیچیده‌تر است، و به راحتی می‌تواند به عنوان اسکلت اولیه برای پروژه‌های بزرگ‌تر و تخصصی‌تر مورد استفاده قرار گیرد.