آموزش ساخت یک Todo List با استفاده از DOM و جاوا اسکریپت: راهنمای گام به گام

ساخت یک Todo List با استفاده از جاوااسکریپت و DOM یکی از پروژه‌های محبوب و کاربردی برای یادگیری نحوه مدیریت المان‌های HTML و ایجاد تعاملات پویا در صفحات وب است. در این مقاله به صورت گام به گام نحوه ایجاد یک Todo List ساده را بررسی خواهیم کرد و نکات بهینه‌سازی و سئو مرتبط با استانداردهای گوگل را نیز توضیح می‌دهیم.

اهداف این مقاله:

• ایجاد المان‌های HTML به صورت داینامیک با استفاده از DOM

• افزودن و حذف وظایف (Tasks) به لیست

• مدیریت رویدادها و تعاملات کاربری

• نکات بهینه‌سازی برای بهبود سئو و عملکرد

گام اول: ساختار HTML اولیه

در ابتدا یک فایل HTML ساده ایجاد می‌کنیم که شامل بخش‌هایی برای نمایش لیست وظایف، ورودی برای افزودن وظایف جدید، و یک دکمه برای اضافه کردن وظایف است.

< ! DOCTYPE html >
< html lang="fa" >
< head >
    < meta charset="UTF-8" >
    < meta name="viewport" content="width=device-width, initial-scale=1.0" >
    < title > Todo List < / title >
    < style >
        body {
            font-family: Arial, sans-serif;
            background-color: #f4f4f4;
            margin: 0;
            padding: 20px;
        }
        #todo-form {
            display: flex;
            justify-content: space-between;
        }
        #todo-input {
            width: 70%;
            padding: 10px;
            font-size: 16px;
        }
        #add-button {
            padding: 10px 20px;
            background-color: #28a745;
            color: white;
            border: none;
            cursor: pointer;
        }
        #add-button:hover {
            background-color: #218838;
        }
        #todo-list {
            list-style-type: none;
            padding: 0;
        }
        .todo-item {
            display: flex;
            justify-content: space-between;
            background-color: white;
            padding: 10px;
            margin-top: 10px;
            border: 1px solid #ddd;
            border-radius: 5px;
        }
        .delete-button {
            background-color: #dc3545;
            color: white;
            border: none;
            padding: 5px 10px;
            cursor: pointer;
        }
        .delete-button:hover {
            background-color: #c82333;
        }
    < / style >
< / head >
< body >
    < h1 > لیست کارهای روزانه < / h1 >
    < div id="todo-form" >
        < input type="text" id="todo-input" placeholder="کار جدید..." >
        < button id="add-button" > افزودن < / button >
    < / div >
    < ul id="todo-list" > < / ul >

    < script src="app.js" > < / script >
< / body >
< / html >

توضیحات HTML:

• یک ورودی متنی برای وارد کردن کار جدید (todo-input).

• یک دکمه برای افزودن کار جدید به لیست (add-button).

• یک لیست نامرتب (ul) که وظایف جدید به آن اضافه خواهند شد (todo-list).

گام دوم: نوشتن کد جاوااسکریپت برای افزودن وظایف

حالا نوبت به نوشتن کد جاوااسکریپت می‌رسد. ابتدا باید کدی بنویسیم که وقتی کاربر روی دکمه "افزودن" کلیک می‌کند، کار جدید به لیست اضافه شود.

در فایل app.js، کد زیر را اضافه کنید:

// دسترسی به المان‌های صفحه
const todoInput = document.getElementById('todo-input');
const addButton = document.getElementById('add-button');
const todoList = document.getElementById('todo-list');

// افزودن وظیفه جدید
addButton.addEventListener('click', function() {
    const taskText = todoInput.value.trim();

    if (taskText === '') {
        alert('لطفاً یک کار وارد کنید');
        return;
    }

    // ایجاد المان‌های مربوط به وظیفه جدید
    const todoItem = document.createElement('li');
    todoItem.classList.add('todo-item');

    const taskContent = document.createElement('span');
    taskContent.textContent = taskText;

    const deleteButton = document.createElement('button');
    deleteButton.textContent = 'حذف';
    deleteButton.classList.add('delete-button');

    // اضافه کردن المان‌ها به لیست
    todoItem.appendChild(taskContent);
    todoItem.appendChild(deleteButton);
    todoList.appendChild(todoItem);

    // پاک کردن ورودی پس از افزودن
    todoInput.value = '';

    // اضافه کردن رویداد حذف به دکمه حذف
    deleteButton.addEventListener('click', function() {
        todoItem.remove();
    });
});

توضیحات کد:

• ابتدا به المان‌های HTML مثل ورودی (todo-input)، دکمه (add-button) و لیست (todo-list) دسترسی پیدا می‌کنیم.

• با کلیک بر روی دکمه افزودن، محتویات ورودی خوانده شده و بررسی می‌شود که آیا خالی است یا خیر. اگر خالی باشد، یک پیام هشدار نمایش داده می‌شود.

• یک عنصر < li > جدید ایجاد می‌شود که شامل متن وظیفه و یک دکمه حذف است.

• وظیفه به لیست اضافه می‌شود و رویداد کلیک برای دکمه حذف تعریف می‌شود تا وظیفه از لیست حذف شود.

گام سوم: افزودن قابلیت حذف وظایف

در مرحله قبل، قابلیت حذف وظایف را به صورت داینامیک اضافه کردیم. با کلیک بر روی دکمه "حذف" در کنار هر وظیفه، آن وظیفه از لیست حذف خواهد شد.

بهینه‌سازی و نکات سئو

• استفاده از Lazy Loading: در صورتی که تعداد وظایف بسیار زیاد شود، می‌توانید از تکنیک بارگذاری تنبل (Lazy Loading) برای بارگذاری بخش‌های دیگر صفحه به صورت تدریجی استفاده کنید تا تجربه کاربری بهتری فراهم شود.

• بهینه‌سازی تعاملات کاربری: با استفاده از جاوااسکریپت می‌توانید صفحه‌ای تعاملی بسازید که تجربه کاربری را بهبود می‌دهد. صفحاتی که تجربه کاربری بهتری دارند، از نظر گوگل امتیاز بیشتری کسب می‌کنند.

• کاهش دستکاری‌های غیرضروری DOM: هرچه تغییرات و دستکاری‌های کمتری روی DOM اعمال کنید، سرعت صفحه بهتر می‌شود. اضافه و حذف المان‌ها باید بهینه باشد.

• استفاده از Event Delegation: اگر تعداد زیادی وظیفه داشته باشید، به جای افزودن Event Listener برای هر دکمه حذف، می‌توانید از Event Delegation استفاده کنید تا به جای هر وظیفه، تنها یک Event Listener به والد اعمال شود. این تکنیک باعث بهبود عملکرد می‌شود.

بهینه‌سازی حذف با Event Delegation:

todoList.addEventListener('click', function(event) {
    if (event.target.classList.contains('delete-button')) {
        event.target.parentElement.remove();
    }
});

در این روش، رویداد کلیک تنها به عنصر والد (todoList) اضافه شده و سپس بررسی می‌شود که آیا عنصر کلیک شده دکمه حذف است یا خیر. اگر بله، آن وظیفه حذف می‌شود. این کار باعث کاهش تعداد Event Listenerها و بهبود عملکرد صفحه می‌شود.

نتیجه‌گیری

ساخت یک Todo List ساده با استفاده از جاوااسکریپت و DOM به شما این امکان را می‌دهد تا با مفاهیم اساسی جاوااسکریپت مانند دستکاری DOM، مدیریت رویدادها و تعاملات کاربری آشنا شوید. با رعایت نکات بهینه‌سازی عملکرد و سئو، می‌توانید صفحات وب تعاملی، سریع و بهینه برای کاربران و موتورهای جستجو بسازید. گوگل سایت‌هایی که سریع‌تر بارگذاری می‌شوند و تجربه کاربری بهتری دارند، رتبه بهتری می‌دهد، بنابراین بهینه‌سازی‌های انجام‌شده نه‌تنها به بهبود تجربه کاربری کمک می‌کند، بلکه سئوی سایت شما را نیز بهبود خواهد داد.