مقدمه‌ای بر اسکریپت یادداشت جاوا اسکریپت
در دنیای برنامه‌نویسی وب، جاوا اسکریپت به عنوان یک زبان قدرتمند و انعطاف‌پذیر شناخته می‌شود. یکی از کاربردهای رایج این زبان، ایجاد اپلیکیشن‌های یادداشت است. این اپلیکیشن‌ها به کاربران این امکان را می‌دهند تا یادداشت‌هایی را ایجاد، ویرایش و حذف کنند. البته، در اینجا به بررسی ویژگی‌ها و ساختار یک اسکریپت یادداشت در جاوا اسکریپت می‌پردازیم.
ساختار پایه یک اپلیکیشن یادداشت
برای ساخت یک اپلیکیشن یادداشت، ابتدا نیاز به یک رابط کاربری ساده داریم. این رابط معمولاً شامل یک نوار ورودی برای اضافه کردن یادداشت و یک لیست برای نمایش یادداشت‌ها است.
```html
<!DOCTYPE html>
<html lang="fa">
<head>
<meta charset="UTF-8">
<title>یادداشت‌ها</title>
</head>
<body>
<h1>اپلیکیشن یادداشت</h1>
<input type="text" id="noteInput" placeholder="یادداشت جدید...">
<button onclick="addNote()">اضافه کردن یادداشت</button>
<ul id="noteList"></ul>
<script src="script.js"></script>
</body>
</html>
```
افزودن یادداشت‌ها
در بخش جاوا اسکریپت، به تعریف تابعی می‌پردازیم که یادداشت‌ها را به لیست اضافه می‌کند. این تابع به سادگی ورودی کاربر را دریافت کرده و آن را به لیست اضافه می‌کند.
```javascript
function addNote() {
const noteInput = document.getElementById('noteInput');
const noteText = noteInput.value.trim();
if (noteText === '') {
alert('لطفاً یک یادداشت وارد کنید!');
return;
}
const noteList = document.getElementById('noteList');
const li = document.createElement('li');
li.textContent = noteText;
noteList.appendChild(li);
noteInput.value = '';
}
```
ویرایش و حذف یادداشت‌ها
برای افزایش کارایی، می‌توانیم گزینه‌ای برای ویرایش و حذف یادداشت‌ها اضافه کنیم. این کار با استفاده از رویدادهای کلیک و متدهای جاوا اسکریپت انجام می‌شود. کاربر می‌تواند با کلیک بر روی یادداشت، آن را ویرایش کند یا با کلیک بر روی یک دکمه جداگانه، آن را حذف نماید.
```javascript
li.addEventListener('click', function() {
const updatedText = prompt('ویرایش یادداشت:', noteText);
if (updatedText !== null) {
li.textContent = updatedText;
}
});
// برای حذف یادداشت
const deleteButton = document.createElement('button');
deleteButton.textContent = 'حذف';
deleteButton.addEventListener('click', function() {
noteList.removeChild(li);
});
li.appendChild(deleteButton);
```
نتیجه‌گیری
با پیاده‌سازی این کدها، یک اپلیکیشن یادداشت ساده و کارآمد خواهید داشت. این اپلیکیشن نه تنها به کاربران اجازه می‌دهد یادداشت‌های خود را مدیریت کنند، بلکه به یادگیری مفاهیم پایه جاوا اسکریپت کمک می‌کند. با افزودن ویژگی‌های بیشتر، می‌توانید قابلیت‌های اپلیکیشن خود را گسترش دهید.
