Javascript implements address book

With the popularity of the Internet and mobile devices, address books have become an indispensable tool in our daily lives. In this article, I will introduce you to how to use JavaScript to implement a simple address book.

1. Create an address book object

First, we need to create an address book object to store contact information. We can use an object-oriented approach to design the address book object, as shown below:

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);
    }
  }
}

In the above code, the AddressBook object contains a contacts array attribute for storing contact information. At the same time, this object also contains methods to add, find and delete contact information.

2. Create a contact object

Next, we need to create a contact object to store personal information, such as name, phone number, and email address. Similarly, we can use an object-oriented approach to design this object, as shown below:

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

In the above code, the Contact object contains attributes such as name, phone number, and email address, which are passed to the constructor as parameters. It should be noted that here we only provide basic information about the contact object. If you need to add more information, you can expand it as needed.

3. Implement interface interaction

Now that we have created the address book object and contact object, the next step is to implement the address book function through interface interaction. We can add a form to the HTML file for entering contact information. Then, write the corresponding event handling function in the JavaScript file, as shown below:

<!-- 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 = "";
});

In the above code, we first create an AddressBook object and bind the input box in the form to the corresponding variable . Then, use the addEventListener() method to add a submit event handler to the form. When the user clicks the submit button, a new Contact object is created, added to the address book object, and the form input box is cleared.

In addition to the function of adding contacts, we can also implement the function of finding and deleting contacts. These functions can be achieved by adding event handling functions to the buttons on the page. The code is very simple and will not be described in detail here.

Summary

Through the above steps, we successfully implemented a simple JavaScript address book. Of course, this is just an initial version and there are many areas for improvement. For example, you can add verification of contact information to prevent users from entering invalid information; you can also store address book information in a local or remote database to achieve true persistent storage.

However, this article aims to show you how to use JavaScript to implement a simple address book. I hope readers can further learn and understand the usage of JavaScript through this example.

The above is the detailed content of Javascript implements address book. For more information, please follow other related articles on the PHP Chinese website!