کاربران گرامی در این پروژه به شما پروژه کاربردی  با جاوا اسکریپت را قرارداده ایم شما عزیزان می توانید از بخش دانلود پروژه کاربردی با جاوااسکریپت سایر  پروژه هایی که با جاوا اسکریپت طراحی شده اند را مشاهده و دانلود کنید.

در صورتی که نیاز به آموزش حضوری و یا غیر حضوری این پروژه داشتید میتوانید با ما در ارتباط باشید تا این پروژه را به شما آموزش دهیم حتی میتوانید در صورت دلخواه پروژه را به خواسته شما شخصی سازی کنیم لازم به ذکر است که تیم پروژه در صفحه دانلود پروژه کاربردی پروژه  های مختلفی را به زبان های مختلف برنامه نویسی قرار داده است .شماره تماس با پرپروژه 09050394455 می باشد

   

 ساخت یک **Address Book** ساده با استفاده از JavaScript یک پروژه جذاب است که به شما کمک می‌کند با مدیریت داده‌ها، تعامل کاربر، و ذخیره‌سازی محلی آشنا شوید. در این پروژه، کاربران می‌توانند آدرس‌ها و اطلاعات مربوط به مخاطبین خود را وارد کرده و آنها را مشاهده کنند.

 

### توضیحات پروژه

برنامه **Address Book** به کاربران این امکان را می‌دهد که نام، شماره تلفن، و آدرس یک مخاطب را وارد کنند. کاربران می‌توانند اطلاعات مخاطبین را مشاهده و حذف کنند.

 

### ویژگی‌های اصلی پروژه

1. **اضافه کردن مخاطب**: کاربران می‌توانند نام و اطلاعات تماس یک مخاطب جدید را اضافه کنند.

2. **نمایش لیست مخاطبین**: تمام مخاطبین در یک لیست نمایش داده می‌شوند.

3. **حذف مخاطب**: کاربران می‌توانند مخاطبین را از لیست حذف کنند.

4. **ذخیره‌سازی محلی**: اطلاعات مخاطبین در Local Storage مرورگر ذخیره می‌شوند تا پس از بارگذاری مجدد صفحه نیز باقی بمانند.

 

### کد منبع نمونه

 

#### ۱. ایجاد فایل HTML

ابتدا یک فایل HTML به نام `index.html` ایجاد کنید و کد زیر را در آن قرار دهید:

 

```html

   

   

   

   

   

دفترچه آدرس

   

   

   

    اضافه کردن مخاطب

    

   

لیست مخاطبین

   

    

   

```

 

#### ۲. ایجاد فایل JavaScript

سپس یک فایل JavaScript به نام `app.js` ایجاد کنید و کد زیر را در آن قرار دهید:

 

```javascript

// انتخاب عناصر از DOM

const nameInput = document.getElementById("name");

const phoneInput = document.getElementById("phone");

const addressInput = document.getElementById("address");

const addButton = document.getElementById("addButton");

const contactList = document.getElementById("contactList");

 

// بارگذاری مخاطبین از Local Storage

let contacts = JSON.parse(localStorage.getItem("contacts")) || [];

 

// نمایش مخاطبین

function displayContacts() {

    contactList.innerHTML = "";

    contacts.forEach((contact, index) => {

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

        li.innerHTML = `${contact.name} - ${contact.phone} - ${contact.address} حذف`;

        contactList.appendChild(li);

    });

}

 

// اضافه کردن مخاطب

addButton.addEventListener("click", () => {

    const name = nameInput.value;

    const phone = phoneInput.value;

    const address = addressInput.value;

 

    if (name && phone && address) {

        const newContact = { name, phone, address };

        contacts.push(newContact);

        localStorage.setItem("contacts", JSON.stringify(contacts));

        nameInput.value = "";

        phoneInput.value = "";

        addressInput.value = "";

        displayContacts();

    } else {

        alert("لطفاً تمام فیلدها را پر کنید.");

    }

});

 

// حذف مخاطب

function deleteContact(index) {

    contacts.splice(index, 1);

    localStorage.setItem("contacts", JSON.stringify(contacts));

    displayContacts();

}

 

// نمایش مخاطبین هنگام بارگذاری صفحه

displayContacts();

```

 

### توضیحات کد

1. **انتخاب عناصر DOM**: با استفاده از `getElementById` عناصر مورد نیاز را انتخاب می‌کنیم.

2. **ذخیره‌سازی محلی**: مخاطبین در Local Storage مرورگر ذخیره می‌شوند و در هنگام بارگذاری صفحه، دوباره بارگذاری می‌شوند.

3. **عملکرد افزودن مخاطب**: با کلیک بر روی دکمه، اگر تمام فیلدها پر شده باشند، مخاطب جدید به لیست اضافه می‌شود و در Local Storage ذخیره می‌شود.

4. **عملکرد حذف مخاطب**: با کلیک بر روی گزینه "حذف" در کنار هر مخاطب، آن مخاطب از لیست و از Local Storage حذف می‌شود.

 

### نحوه اجرای پروژه

1. یک پوشه جدید ایجاد کنید و فایل‌های `index.html` و `app.js` را در آن قرار دهید.

2. فایل `index.html` را در مرورگر باز کنید تا دفترچه آدرس را مشاهده کنید و با افزودن مخاطبین جدید کار کنید.

 

### نتیجه‌گیری

این پروژه **Address Book** یک ابزار ساده و کاربردی است که به شما کمک می‌کند تا با مفاهیم پایه‌ای JavaScript، HTML و CSS آشنا شوید. شما می‌توانید این پروژه را با افزودن ویژگی‌هایی مانند ویرایش مخاطبین، جستجو در میان مخاطبین، یا استفاده از یک API برای ذخیره‌سازی اطلاعات گسترش دهید. این پروژه به شما کمک می‌کند مهارت‌های خود را در برنامه‌نویسی و توسعه وب بهبود بخشید.