Javascript implémente le carnet d'adresses

Avec la popularité d'Internet et des appareils mobiles, les carnets d'adresses sont devenus un outil indispensable dans notre vie quotidienne. Dans cet article, je vais vous présenter comment utiliser JavaScript pour implémenter un carnet d'adresses simple.

1. Créer un objet carnet d'adresses

Tout d'abord, nous devons créer un objet carnet d'adresses pour stocker les informations de contact. Nous pouvons utiliser une approche orientée objet pour concevoir l'objet carnet d'adresses, comme indiqué ci-dessous :

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

Dans le code ci-dessus, l'objet AddressBook contient un attribut de tableau de contacts pour stocker les informations de contact. En même temps, cet objet contient également des méthodes pour ajouter, rechercher et supprimer des informations de contact.

2. Créer un objet contact

Ensuite, nous devons créer un objet contact pour stocker des informations personnelles, telles que le nom, le numéro de téléphone et l'adresse e-mail. De même, nous pouvons utiliser une approche orientée objet pour concevoir cet objet, comme indiqué ci-dessous :

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

Dans le code ci-dessus, l'objet Contact contient des attributs tels que le nom, le numéro de téléphone et l'adresse e-mail, qui sont transmis au constructeur comme paramètres. Il convient de noter que nous ne fournissons ici que des informations de base sur l'objet de contact. Si vous devez ajouter plus d'informations, vous pouvez les développer si nécessaire.

3. Implémenter l'interaction d'interface

Maintenant que nous avons créé l'objet carnet d'adresses et l'objet contact, l'étape suivante consiste à implémenter la fonction de carnet d'adresses via l'interaction d'interface. Nous pouvons ajouter un formulaire au fichier HTML pour saisir les informations de contact. Ensuite, écrivez la fonction de gestion d'événement correspondante dans le fichier JavaScript, comme indiqué ci-dessous :

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

Dans le code ci-dessus, nous créons d'abord un objet AddressBook et lions la zone de saisie du formulaire à la variable correspondante. Ensuite, utilisez la méthode addEventListener() pour ajouter un gestionnaire d'événements de soumission au formulaire. Lorsque l'utilisateur clique sur le bouton de soumission, un nouvel objet Contact est créé, ajouté à l'objet carnet d'adresses et la zone de saisie du formulaire est effacée.

En plus de la fonction d'ajout de contacts, nous pouvons également implémenter la fonction de recherche et de suppression de contacts. Ces fonctions peuvent être réalisées en ajoutant des fonctions de gestion d'événements aux boutons de la page. Le code est très simple et ne sera pas décrit en détail ici.

Résumé

Grâce aux étapes ci-dessus, nous avons réussi à implémenter un carnet d'adresses JavaScript simple. Bien entendu, il ne s’agit que d’une première version et de nombreux points peuvent être améliorés. Par exemple, vous pouvez ajouter la vérification des informations de contact pour empêcher les utilisateurs de saisir des informations non valides ; vous pouvez également stocker les informations du carnet d'adresses dans une base de données locale ou distante pour obtenir un véritable stockage persistant.

Cependant, cet article vise à vous montrer comment utiliser JavaScript pour implémenter un carnet d'adresses simple. J'espère que les lecteurs pourront apprendre et comprendre davantage l'utilisation de JavaScript grâce à cet exemple.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!