javascript實現通訊錄

隨著網路和行動裝置的普及，通訊錄成為了我們日常生活中不可或缺的工具。在這篇文章中，我將向大家介紹如何使用JavaScript來實作一個簡單的通訊錄。

1.建立通訊錄對象

首先，我們需要建立一個通訊錄對象，用於儲存聯絡人資訊。我們可以使用物件導向的方式來設計通訊錄對象，如下所示：

function AddressBook() {
  this.contacts = []; // 存储联系人信息的数组
  // 添加联系人信息的方法
  this.addContact = function(contact) {
    this.contacts.push(contact);
  }
  // 查找联系人信息的方法
  this.findContact = function(name) {
    for (var i = 0; i < this.contacts.length; i++) {
      if (this.contacts[i].name === name) {
        return this.contacts[i];
      }
    }
    return null;
  }
  // 删除联系人信息的方法
  this.removeContact = function(contact) {
    var index = this.contacts.indexOf(contact);
    if (index !== -1) {
      this.contacts.splice(index, 1);
    }
  }
}

上述程式碼中，AddressBook物件包含了一個contacts數組屬性，用於儲存聯絡人資訊。同時，這個物件也包含了新增、尋找和刪除聯絡人資訊的方法。

2.建立聯絡人對象

接下來，我們需要建立一個聯絡人對象，用於儲存個人訊息，如姓名、電話號碼和郵箱等。同樣，我們可以使用物件導向的方式來設計這個對象，如下所示：

function Contact(name, phone, email) {
  this.name = name;
  this.phone = phone;
  this.email = email;
}

在上述程式碼中，Contact物件包含了姓名、電話號碼和郵箱等屬性，它們作為參數傳遞給建構函式。需要注意的是，這裡我們僅提供了聯繫人對象的基本信息，如果需要添加更多信息，可以根據需要自行擴展。

3.實現介面互動

現在，我們已經創建了通訊錄對象和聯絡人對象，下一步是透過介面互動來實現通訊錄的功能。我們可以在HTML檔案中新增一個表單，用於輸入聯絡人資訊。然後，在JavaScript檔案中編寫對應的事件處理函數，如下所示：

<!-- HTML代码 -->
<form id="contactForm">
  <label for="name">姓名：</label>
  <input type="text" name="name" id="name"><br>
  <label for="phone">电话：</label>
  <input type="text" name="phone" id="phone"><br>
  <label for="email">邮箱：</label>
  <input type="email" name="email" id="email"><br>
  <button type="submit">添加联系人</button>
</form>

// JavaScript代码
var addressBook = new AddressBook();
var contactForm = document.getElementById("contactForm");
contactForm.addEventListener("submit", function(event) {
  event.preventDefault(); // 阻止表单提交
  var nameInput = document.getElementById("name");
  var phoneInput = document.getElementById("phone");
  var emailInput = document.getElementById("email");
  var contact = new Contact(nameInput.value, phoneInput.value, emailInput.value);
  addressBook.addContact(contact);
  nameInput.value = "";
  phoneInput.value = "";
  emailInput.value = "";
});

上述程式碼中，我們首先建立了一個AddressBook對象，並將表單中的輸入框綁定到對應的變數上。然後，使用addEventListener()方法為表單新增submit事件處理函數，當使用者點擊提交按鈕時，建立一個新的Contact對象，加入到通訊錄對像中，並清空表單輸入框。

除了新增聯絡人的功能，我們還可以實現尋找和刪除聯絡人的功能。透過為頁面上的按鈕添加事件處理函數即可實現這些功能，程式碼非常簡單，這裡不再贅述。

總結

透過上述步驟，我們成功實作了一個簡單的JavaScript通訊錄。當然，這只是一個初始版本，還有很多可以改進的地方。例如，可以新增對聯絡人資訊的驗證，避免使用者輸入無效資訊；也可以將通訊錄資訊儲存到本機或遠端資料庫中，實現真正的持久化儲存。

不過，本文旨在向大家展示如何使用JavaScript來實作一個簡單的通訊錄，希望讀者可以透過這個範例進一步學習並了解JavaScript的用法。

以上是javascript實現通訊錄的詳細內容。更多資訊請關注PHP中文網其他相關文章！