اسکریپت سورس کد در مورد Create, Read, Update, Delete (CRUD) با استفاده از جاوا اسکریپت JavaScript


در دنیای برنامه‌نویسی، عملیات CRUD (ساخت، خواندن، به‌روزرسانی، حذف) نقش اساسی در مدیریت داده‌ها و توسعه برنامه‌های وب دارند. این عملیات، پایه و اساس بسیاری از برنامه‌های ارتباط با پایگاه داده، اپلیکیشن‌های تعاملی و سیستم‌های مدیریت محتوا محسوب می‌شوند. در این مقاله، قصد دارم به‌طور کامل و جامع، درباره پیاده‌سازی این عملیات با زبان برنامه‌نویسی جاوا اسکریپت صحبت کنم، و نشان دهم چگونه می‌توان این عملیات را در سمت کاربر، با استفاده از اسکریپت‌های ساده و در عین حال قدرتمند انجام داد.
پیش‌زمینه و اهمیت عملیات CRUD
در دنیای برنامه‌نویسی، عملیات CRUD در اصل چهار عملیات اصلی است که به برنامه‌نویسان اجازه می‌دهد تا داده‌های مورد نظر خود را مدیریت کنند. فرض کنید یک اپلیکیشن لیست وظایف دارید؛ شما باید بتوانید وظایف جدیدی را اضافه کنید (Create)، وظایف موجود را مشاهده کنید (Read)، آنها را اصلاح کنید (Update) و در صورت نیاز حذف کنید (Delete). این عملیات، برای هر نوع سیستم داده‌ای، حیاتی است و بدون آن، مدیریت داده‌ها تقریباً غیرممکن است.
در سمت سرور، این عملیات معمولاً با پایگاه داده‌ها انجام می‌شود، اما در سمت کاربر، می‌توان این عملیات‌ها را با استفاده از جاوا اسکریپت و DOM (Document Object Model) پیاده‌سازی کرد. این روش، به توسعه‌دهندگان کمک می‌کند تا برنامه‌های تعاملی و پویا بسازند، بدون نیاز به ارتباط مداوم با سرور.
پیاده‌سازی عملیات CRUD با جاوا اسکریپت
در این بخش، قصد دارم نمونه‌ای ساده ولی جامع از پیاده‌سازی عملیات CRUD در سمت کاربر را، با استفاده از جاوا اسکریپت، ارائه دهم. فرض کنید، یک لیست وظایف دارید و می‌خواهید بتوانید وظایف جدید اضافه کنید، آنها را مشاهده کنید، اصلاح کنید و در نهایت حذف نمایید.
ابتدا، باید ساختار HTML مناسب را تعریف کنیم. این ساختار، شامل ورودی برای اضافه کردن وظایف، لیستی برای نمایش وظایف، و دکمه‌هایی برای اصلاح و حذف است.
html  


<div>


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


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


  <button onclick="addTask()">اضافه کردن</button>


  <ul id="taskList"></ul>


</div>

در این ساختار، ورودی متن و دکمه برای افزودن وظیفه، و لیست برای نمایش وظایف قرار دارد. حال، باید با جاوا اسکریپت، عملیات CRUD را پیاده‌سازی کنیم.

۱. عملیات Create (ایجاد)




اضافه کردن وظیفه جدید، اولین قدم است. تابع `addTask`، وظیفه وارد شده در input را می‌گیرد، یک عنصر لیست جدید ساخته و به لیست وظایف اضافه می‌کند.
javascript  


function addTask() {


  const taskInput = document.getElementById('taskInput');


  const taskText = taskInput.value.trim();
if (taskText === '') {


    alert('لطفاً وظیفه‌ای وارد کنید!');


    return;


  }
const taskList = document.getElementById('taskList');
const li = document.createElement('li');
// ساختن متن وظیفه به همراه دکمه‌های اصلاح و حذف  


  li.innerHTML = `


    <span>${taskText}</span>


    <button onclick="editTask(this)">اصلاح</button>


    <button onclick="deleteTask(this)">حذف</button>


  `;
taskList.appendChild(li);


  taskInput.value = '';


}

د... ← ادامه مطلب در magicfile.ir