Javascript melaksanakan buku alamat

Dengan populariti Internet dan peranti mudah alih, buku alamat telah menjadi alat yang sangat diperlukan dalam kehidupan seharian kita. Dalam artikel ini, saya akan memperkenalkan anda kepada cara menggunakan JavaScript untuk melaksanakan buku alamat mudah.

1. Cipta objek buku alamat

Pertama, kita perlu mencipta objek buku alamat untuk menyimpan maklumat hubungan. Kita boleh menggunakan pendekatan berorientasikan objek untuk mereka bentuk objek buku alamat, seperti yang ditunjukkan di bawah:

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

Dalam kod di atas, objek Buku Alamat mengandungi atribut tatasusunan kenalan untuk menyimpan maklumat hubungan. Pada masa yang sama, objek ini juga mengandungi kaedah untuk menambah, mencari dan memadam maklumat hubungan.

2. Cipta objek kenalan

Seterusnya, kita perlu mencipta objek kenalan untuk menyimpan maklumat peribadi, seperti nama, nombor telefon dan alamat e-mel. Begitu juga, kita boleh menggunakan pendekatan berorientasikan objek untuk mereka bentuk objek ini, seperti yang ditunjukkan di bawah:

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

Dalam kod di atas, objek Kenalan mengandungi atribut seperti nama, nombor telefon dan alamat e-mel, yang dihantar kepada pembina sebagai parameter. Perlu diingatkan bahawa di sini kami hanya menyediakan maklumat asas tentang objek kenalan Jika anda perlu menambah lebih banyak maklumat, anda boleh mengembangkannya mengikut keperluan.

3. Laksanakan interaksi antara muka

Sekarang kita telah mencipta objek buku alamat dan objek kenalan, langkah seterusnya ialah melaksanakan fungsi buku alamat melalui interaksi antara muka. Kami boleh menambah borang pada fail HTML untuk memasukkan maklumat hubungan. Kemudian, tulis fungsi pengendalian peristiwa yang sepadan dalam fail JavaScript, seperti yang ditunjukkan di bawah:

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

Dalam kod di atas, kami mula-mula mencipta objek Buku Alamat dan mengikat kotak input dalam bentuk kepada pembolehubah yang sepadan . Kemudian, gunakan kaedah addEventListener() untuk menambah pengendali acara serah pada borang Apabila pengguna mengklik butang hantar, objek Kenalan baharu dibuat, ditambahkan pada objek buku alamat dan kotak input borang dikosongkan.

Selain fungsi menambah kenalan, kita juga boleh melaksanakan fungsi mencari dan memadam kenalan. Fungsi ini boleh dicapai dengan menambahkan fungsi pengendalian acara pada butang pada halaman Kod ini sangat mudah dan tidak akan diterangkan secara terperinci di sini.

Ringkasan

Melalui langkah di atas, kami berjaya melaksanakan buku alamat JavaScript yang mudah. Sudah tentu, ini hanyalah versi awal dan terdapat banyak bidang untuk penambahbaikan. Sebagai contoh, anda boleh menambah pengesahan maklumat hubungan untuk menghalang pengguna daripada memasukkan maklumat yang tidak sah anda juga boleh menyimpan maklumat buku alamat dalam pangkalan data tempatan atau jauh untuk mencapai storan berterusan yang benar.

Walau bagaimanapun, artikel ini bertujuan untuk menunjukkan kepada anda cara menggunakan JavaScript untuk melaksanakan buku alamat mudah saya harap pembaca dapat mempelajari dan memahami penggunaan JavaScript melalui contoh ini.

Atas ialah kandungan terperinci Javascript melaksanakan buku alamat. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!