پروژه ليست TODO (CRUD) در جاوا اسکريپت
اسکریپت پروژه لیست TODO (CRUD) در جاوا اسکریپت با کد منبع
در دنیای برنامه‌نویسی، پروژه‌های کوچک و در عین حال کاربردی، همواره فرصت مناسبی برای یادگیری و تمرین مفاهیم مختلف هستند. یکی از این پروژه‌های پرکاربرد، ساخت یک لیست TODO است که بتواند عملیات پایه‌ای مانند افزودن، ویرایش، حذف و نمایش آیتم‌ها را انجام دهد. در این مقاله، به طور کامل و جامع، درباره ساخت یک اسکریپت پروژه لیست TODO با استفاده از جاوا اسکریپت، همراه با کد منبع، صحبت خواهیم کرد.
این پروژه نه تنها به فهم بهتر ساختارهای DOM و رویدادهای جاوا اسکریپت کمک می‌کند، بلکه مفاهیم پایه‌ای مانند مدیریت حالت، ذخیره‌سازی داده‌ها و کار با لیست‌ها را نیز آموزش می‌دهد. در ادامه، به صورت مرحله به مرحله، قسمت‌های مختلف پروژه را شرح می‌دهیم، از طراحی صفحه HTML گرفته تا نوشتن کدهای جاوا اسکریپت، و در نهایت، نکات مهم و پیشنهاداتی برای توسعه بیشتر ارائه می‌گردد.
طراحی صفحه HTML
در مرحله اول، نیاز است که یک ساختار ساده و کاربرپسند برای صفحه وب خود طراحی کنیم. این صفحه باید شامل یک فرم برای وارد کردن آیتم‌های جدید، یک لیست برای نمایش آیتم‌ها و دکمه‌هایی برای عملیات‌های مختلف باشد. به عنوان مثال، یک ساختار پایه می‌تواند به شکل زیر باشد:
html
<!DOCTYPE html>
<html lang="fa">
<head>
<meta charset="UTF-8" />
<title>لیست TODO در جاوا اسکریپت</title>
<style>
body { font-family: Arial, sans-serif; margin: 20px; }
input[type="text"] { width: 300px; padding: 8px; }
button { padding: 8px 12px; margin-left: 5px; }
ul { list-style: none; padding: 0; }
li { padding: 10px; border-bottom: 1px solid #ccc; display: flex; justify-content: space-between; align-items: center; }
.actions button { margin-left: 5px; }
</style>
</head>
<body>
<h1>لیست وظایف (TODO)</h1>
<input type="text" id="taskInput" placeholder="وظیفه جدید وارد کنید..." />
<button id="addBtn">افزودن</button>
<ul id="taskList"></ul>
<script src="script.js"></script>
</body>
</html>
این ساختار، یک ورودی برای وارد کردن وظایف جدید، یک دکمه برای افزودن آن‌ها، و یک لیست unordered برای نمایش آیتم‌های لیست را در بر می‌گیرد. استایل‌های پایه نیز برای ظاهر بهتر در نظر گرفته شده است.
نوشتن کد جاوا اسکریپت (CRUD)
حالا نوبت به نوشتن کدهای جاوا اسکریپت می‌رسد تا عملیات‌های مختلف روی لیست پیاده‌سازی شوند. در این پروژه، عملیات‌های زیر را پوشش می‌دهیم:
- Create (افزودن وظیفه جدید)
- Read (نمایش لیست وظایف)
- Update (ویرایش وظیفه)
- Delete (حذف وظیفه)
برای شروع، ابتدا باید المان‌های HTML را انتخاب کنیم و یک آرایه برای نگهداری وظایف تعریف کنیم. فرض بر این است که هر وظیفه یک شیء است که شامل شناسه، متن وظیفه و وضعیت انجام است.
javascript
const taskInput = document.getElementById('taskInput');
const addBtn = document.getElementById('addBtn');
const taskList = document.getElementById('taskList');
let tasks = [];
let taskId = 0; // شناسه یکتا برای هر وظیفه
افزودن وظیفه جدید
برای افزودن وظیفه، رویداد کلیک روی دکمه "افزودن" را مدیریت می‌کنیم:
javascript
addBtn.addEventListener('click', () => {
const taskText = taskInput.value.trim();
if (taskText !== "") {
tasks... ← ادامه مطلب در magicfile.ir
باکس دانلود (پروژه ليست TODO (CRUD) در جاوا اسکريپت)
دانلود
پیشنهاد برای دانلود ( پروژه ليست TODO (CRUD) در جاوا اسکريپت )
برای دانلود کردن اینجا را کلیک فرمایید
نظرات کاربران (۳)
مریم احمدی
عالی بود .. با تشکر