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() メソッドを使用して送信イベント ハンドラをフォームに追加します。ユーザーが送信ボタンをクリックすると、新しい Contact オブジェクトが作成されてアドレス帳オブジェクトに追加され、フォーム入力ボックスがクリアされます。

連絡先を追加する機能に加えて、連絡先を検索および削除する機能も実装できます。これらの機能は、ページ上のボタンにイベント処理関数を追加することで実現できますが、コードは非常に簡単なので、ここでは詳しく説明しません。

概要

上記の手順により、簡単な JavaScript アドレス帳を実装することができました。もちろん、これは単なる初期バージョンであり、改善の余地はたくさんあります。たとえば、連絡先情報の検証を追加して、ユーザーが無効な情報を入力できないようにしたり、アドレス帳情報をローカルまたはリモートのデータベースに保存して真の永続ストレージを実現したりすることもできます。

ただし、この記事の目的は、JavaScript を使用して簡単なアドレス帳を実装する方法を示すことです。この例を通じて、読者が JavaScript の使用法をさらに学び、理解できることを願っています。

以上がJavascriptでアドレス帳を実装の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。