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 객체에는 연락처 정보를 저장하기 위한 연락처 배열 속성이 포함되어 있습니다. 동시에 이 개체에는 연락처 정보를 추가, 검색 및 삭제하는 메서드도 포함되어 있습니다.

2. 연락처 개체 만들기

다음으로 이름, 전화번호, 이메일 주소 등 개인 정보를 저장하는 연락처 개체를 만들어야 합니다. 마찬가지로, 아래와 같이 객체 지향 접근 방식을 사용하여 이 객체를 디자인할 수 있습니다.

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

위 코드에서 연락처 객체에는 이름, 전화번호, 이메일 주소와 같은 속성이 포함되어 있으며, 이 속성은 다음과 같이 생성자에 전달됩니다. 매개변수. 여기서는 연락처 개체에 대한 기본 정보만 제공한다는 점에 유의하세요. 더 많은 정보를 추가해야 하는 경우 필요에 따라 확장할 수 있습니다.

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() 메서드를 사용하여 제출 이벤트 핸들러를 양식에 추가합니다. 사용자가 제출 버튼을 클릭하면 새 연락처 개체가 생성되고 주소록 개체에 추가되며 양식 입력 상자가 지워집니다.

연락처 추가 기능 외에도 연락처 찾기 및 삭제 기능도 구현할 수 있습니다. 이러한 기능은 페이지의 버튼에 이벤트 처리 기능을 추가하여 수행할 수 있으며 코드는 매우 간단하므로 여기서는 자세히 설명하지 않습니다.

요약

위의 과정을 통해 간단한 자바스크립트 주소록을 성공적으로 구현했습니다. 물론 이는 초기 버전일 뿐이며 개선할 부분이 많습니다. 예를 들어, 사용자가 잘못된 정보를 입력하지 못하도록 연락처 정보 확인을 추가할 수 있으며, 주소록 정보를 로컬 또는 원격 데이터베이스에 저장하여 진정한 영구 저장을 달성할 수도 있습니다.

그러나 이 글의 목적은 JavaScript를 사용하여 간단한 주소록을 구현하는 방법을 보여주는 것입니다. 독자들이 이 예제를 통해 JavaScript의 사용법을 더 자세히 배우고 이해할 수 있기를 바랍니다.

위 내용은 Javascript는 주소록을 구현합니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!