Hướng dẫn add to address book html code - thêm mã html vào sổ địa chỉ

Sau khi theo dõi cùng với bài tập về nhà cuối tuần, chúng tôi có một ứng dụng sách địa chỉ đơn giản có thể tạo liên hệ và thêm, xóa và tìm chúng trong một sổ địa chỉ. Bây giờ chúng ta hãy bắt đầu xây dựng UI!

Trong quá trình này, chúng tôi sẽ thử nghiệm thêm các yếu tố động vào DOM và tìm hiểu về các khái niệm mới như sự kiện sự kiện và ủy thác sự kiện. Đây là những khái niệm nâng cao hơn mà bạn sẽ không được dự kiến ​​sẽ áp dụng cho dự án độc lập của phần này. Tuy nhiên, bạn được khuyến khích thử nghiệm chúng, vì chúng sẽ giúp bạn trở thành một lập trình viên tốt hơn về lâu dài.event bubbling and event delegation. These are more advanced concepts that you won't be expected to apply to this section's independent project. However, you are encouraged to experiment with them, as they'll make you a better coder in the long run.

---

Hãy để những điều cơ bản của giao diện người dùng của chúng tôi. Chúng tôi sẽ tạo một tệp index.html ở cấp cao nhất của thư mục của chúng tôi với bảng hơi HTML sau:

index.html

Tiếp theo, hãy điền vào mỗi phần. Đầu tiên chúng tôi sẽ thêm các liên kết vào phần của chúng tôi:

index.html

Chúng tôi đã thêm những điều sau đây, tất cả sẽ được xem xét:

• Một liên kết đến CDN bootstrap để sử dụng các kiểu bootstrap trong dự án của chúng tôi.
• Một liên kết đến tệp scripts.js cục bộ của chúng tôi chứa logic JavaScript của chúng tôi.
• A
  0 cho trang của chúng tôi.

Chúng tôi sẽ thêm một bảng kiểu CSS sau khi chúng tôi sẵn sàng sử dụng nó.

Bây giờ chúng ta hãy tập trung vào

1. Chúng tôi sẽ giữ cho nó đơn giản trước khi thêm các lớp bootstrap để tạo kiểu và tổ chức:

index.html

...


  
Address Book
  
Add a Contact:
  

    First Name
    
    Last Name
    
    Phone Number
    
    Add
  

  
Contacts:
  

  

  

    
First Name: 
    
Last Name: 
    
Phone Number: 
  


...

Ở đây chúng tôi có:

• Một biểu mẫu để thêm danh bạ mới, bao gồm các trường cho tên, họ và số điện thoại. Mỗi trường cũng có một

  2 tương ứng.

• Một phần tử

  3 có ID là
  4, trong đó chúng tôi sẽ thêm danh sách
  5S.

• Một div

  6 cuối cùng sẽ hiển thị các chi tiết cho một liên hệ cụ thể khi được chọn từ danh sách.

CSS

---

Tiếp theo, hãy thêm CSS. Chúng tôi sẽ tạo một thư mục con

7 với tệp

8 bên trong chứa một quy tắc duy nhất:

css/styles.css

.hidden {
  display: none;
}

Điều này đảm bảo div

6 được ẩn cho đến khi chúng tôi hiển thị chi tiết của một liên hệ.

JavaScript

---

Sau khi theo dõi cùng với một vài bài học trước đây, chúng ta đã có một tệp scripts.js trong thư mục

...


  
Address Book
  
Add a Contact:
  

    First Name
    
    Last Name
    
    Phone Number
    
    Add
  

  
Contacts:
  

  

  

    
First Name: 
    
Last Name: 
    
Phone Number: 
  


...

1 trông như thế này:

js/scripts.js

// Business Logic for AddressBook ---------
function AddressBook() {
  this.contacts = {};
  this.currentId = 0;
}

AddressBook.prototype.addContact = function(contact) {
  contact.id = this.assignId();
  this.contacts[contact.id] = contact;
};

AddressBook.prototype.assignId = function() {
  this.currentId += 1;
  return this.currentId;
};

AddressBook.prototype.findContact = function(id) {
  if (this.contacts[id] !== undefined) {
    return this.contacts[id];
  }
  return false;
};

AddressBook.prototype.deleteContact = function(id) {
  if (this.contacts[id] === undefined) {
    return false;
  }
  delete this.contacts[id];
  return true;
};

// Business Logic for Contacts ---------
function Contact(firstName, lastName, phoneNumber) {
  this.firstName = firstName;
  this.lastName = lastName;
  this.phoneNumber = phoneNumber;
}

Contact.prototype.fullName = function() {
  return this.firstName + " " + this.lastName;
};

Bên dưới logic kinh doanh này, chúng tôi sẽ thêm một phần mới cho logic giao diện người dùng, được biểu thị bằng một nhận xét khác:

js/scripts.js

...

// User Interface Logic ---------
let addressBook = new AddressBook();

function handleFormSubmission(event) {
  event.preventDefault();
  const inputtedFirstName = document.querySelector("input#new-first-name").value;
  const inputtedLastName = document.querySelector("input#new-last-name").value;
  const inputtedPhoneNumber = document.querySelector("input#new-phone-number").value;
  let newContact = new Contact(inputtedFirstName, inputtedLastName, inputtedPhoneNumber);
  addressBook.addContact(newContact);
  console.log(addressBook.contacts);
}

window.addEventListener("load", function (){
  document.querySelector("form#new-contact").addEventListener("submit", handleFormSubmission);
});

Hãy đi qua mã mới này:

• Chúng tôi tạo một đối tượng

  ...
  
  
    
  Address Book
    
  Add a Contact:
    
  
      First Name
      
      Last Name
      
      Phone Number
      
      Add
    
  
    
  Contacts:
    
  
    
  
    
  
      
  First Name: 
      
  Last Name: 
      
  Phone Number: 
    
  
  
  ...
  

  2 mới có tên

  ...
  
  
    
  Address Book
    
  Add a Contact:
    
  
      First Name
      
      Last Name
      
      Phone Number
      
      Add
    
  
    
  Contacts:
    
  
    
  
    
  
      
  First Name: 
      
  Last Name: 
      
  Phone Number: 
    
  
  
  ...
  

  3. Đây là một biến toàn cầu vì nó được khai báo ở 'cấp cao nhất' của tệp của chúng tôi. Một lời nhắc nhở nhanh: Mặc dù chúng tôi thường muốn tránh các biến toàn cầu, chúng tôi đã tạo ra một ngoại lệ ở đây để bắt chước cơ sở dữ liệu.

• Ở dưới cùng của các tập lệnh của chúng tôi, chúng tôi tạo một trình nghe sự kiện cho sự kiện 'tải' của ____ 24. Hàm gọi lại mà chúng tôi chuyển vào

  ...
  
  
    
  Address Book
    
  Add a Contact:
    
  
      First Name
      
      Last Name
      
      Phone Number
      
      Add
    
  
    
  Contacts:
    
  
    
  
    
  
      
  First Name: 
      
  Last Name: 
      
  Phone Number: 
    
  
  
  ...
  

  5 sẽ được gọi khi trang web của chúng tôi đã tải tất cả các tài nguyên và sẵn sàng để đi.

• Trong trình nghe sự kiện 'tải' của ____ 24, chúng tôi tạo trình nghe sự kiện cho sự kiện gửi biểu mẫu. Khi biểu mẫu được gửi, hàm

  ...
  
  
    
  Address Book
    
  Add a Contact:
    
  
      First Name
      
      Last Name
      
      Phone Number
      
      Add
    
  
    
  Contacts:
    
  
    
  
    
  
      
  First Name: 
      
  Last Name: 
      
  Phone Number: 
    
  
  
  ...
  

  7 sẽ được gọi. Hãy lưu ý rằng quy ước đặt tên cho các chức năng xử lý sự kiện tiền tố với

  ...
  
  
    
  Address Book
    
  Add a Contact:
    
  
      First Name
      
      Last Name
      
      Phone Number
      
      Add
    
  
    
  Contacts:
    
  
    
  
    
  
      
  First Name: 
      
  Last Name: 
      
  Phone Number: 
    
  
  
  ...
  

  8 là rất phổ biến, nhưng nó không bắt buộc phải tuân theo. Đường cơ sở ở đây là luôn đặt tên cho các chức năng của bạn một cách mô tả, để mọi người có thể ngay lập tức biết mục đích của chức năng là gì trong mã.

• Sau đó, chúng tôi xác định chức năng

  ...
  
  
    
  Address Book
    
  Add a Contact:
    
  
      First Name
      
      Last Name
      
      Phone Number
      
      Add
    
  
    
  Contacts:
    
  
    
  
    
  
      
  First Name: 
      
  Last Name: 
      
  Phone Number: 
    
  
  
  ...
  

  7 ở trên nơi chúng tôi gọi nó trong trình nghe sự kiện 'load' ____24. Trong chức năng này, chúng tôi:
  • Gọi

    .hidden {
      display: none;
    }
    

    1 để ngăn chặn việc làm mới trang.
  • Thu thập đầu vào do người dùng cung cấp từ các trường biểu mẫu cho tên, họ và số điện thoại và gán chúng cho các biến

    .hidden {
      display: none;
    }
    

    2,

    .hidden {
      display: none;
    }
    

    3 và

    .hidden {
      display: none;
    }
    

    4.
  • Tạo một đối tượng
    5 mới, truyền thông tin được thu thập này dưới dạng đối số và lưu đối tượng
    5 mới trong biến

    .hidden {
      display: none;
    }
    

    7.
  • Thêm

    .hidden {
      display: none;
    }
    

    7 vào

    ...
    
    
      
    Address Book
      
    Add a Contact:
      
    
        First Name
        
        Last Name
        
        Phone Number
        
        Add
      
    
      
    Contacts:
      
    
      
    
      
    
        
    First Name: 
        
    Last Name: 
        
    Phone Number: 
      
    
    
    ...
    

    2 của chúng tôi bằng phương pháp

    // Business Logic for AddressBook ---------
    function AddressBook() {
      this.contacts = {};
      this.currentId = 0;
    }
    
    AddressBook.prototype.addContact = function(contact) {
      contact.id = this.assignId();
      this.contacts[contact.id] = contact;
    };
    
    AddressBook.prototype.assignId = function() {
      this.currentId += 1;
      return this.currentId;
    };
    
    AddressBook.prototype.findContact = function(id) {
      if (this.contacts[id] !== undefined) {
        return this.contacts[id];
      }
      return false;
    };
    
    AddressBook.prototype.deleteContact = function(id) {
      if (this.contacts[id] === undefined) {
        return false;
      }
      delete this.contacts[id];
      return true;
    };
    
    // Business Logic for Contacts ---------
    function Contact(firstName, lastName, phoneNumber) {
      this.firstName = firstName;
      this.lastName = lastName;
      this.phoneNumber = phoneNumber;
    }
    
    Contact.prototype.fullName = function() {
      return this.firstName + " " + this.lastName;
    };
    

    0.
  • Đăng nhập danh sách

    // Business Logic for AddressBook ---------
    function AddressBook() {
      this.contacts = {};
      this.currentId = 0;
    }
    
    AddressBook.prototype.addContact = function(contact) {
      contact.id = this.assignId();
      this.contacts[contact.id] = contact;
    };
    
    AddressBook.prototype.assignId = function() {
      this.currentId += 1;
      return this.currentId;
    };
    
    AddressBook.prototype.findContact = function(id) {
      if (this.contacts[id] !== undefined) {
        return this.contacts[id];
      }
      return false;
    };
    
    AddressBook.prototype.deleteContact = function(id) {
      if (this.contacts[id] === undefined) {
        return false;
      }
      delete this.contacts[id];
      return true;
    };
    
    // Business Logic for Contacts ---------
    function Contact(firstName, lastName, phoneNumber) {
      this.firstName = firstName;
      this.lastName = lastName;
      this.phoneNumber = phoneNumber;
    }
    
    Contact.prototype.fullName = function() {
      return this.firstName + " " + this.lastName;
    };
    

    1 vào

    ...
    
    
      
    Address Book
      
    Add a Contact:
      
    
        First Name
        
        Last Name
        
        Phone Number
        
        Add
      
    
      
    Contacts:
      
    
      
    
      
    
        
    First Name: 
        
    Last Name: 
        
    Phone Number: 
      
    
    
    ...
    

    2 của chúng tôi vào bảng điều khiển, để kiểm tra kỹ rằng liên hệ mới đã được thêm vào.

Trong bài học tiếp theo, chúng tôi sẽ thêm logic để hiển thị liên hệ với trang web.

Toàn bộ tệp ____99 được cập nhật trông như thế này:

js/scripts.js

// Business Logic for AddressBook ---------
function AddressBook() {
  this.contacts = {};
  this.currentId = 0;
}

AddressBook.prototype.addContact = function(contact) {
  contact.id = this.assignId();
  this.contacts[contact.id] = contact;
};

AddressBook.prototype.assignId = function() {
  this.currentId += 1;
  return this.currentId;
};

AddressBook.prototype.findContact = function(id) {
  if (this.contacts[id] !== undefined) {
    return this.contacts[id];
  }
  return false;
};

AddressBook.prototype.deleteContact = function(id) {
  if (this.contacts[id] === undefined) {
    return false;
  }
  delete this.contacts[id];
  return true;
};

// Business Logic for Contacts ---------
function Contact(firstName, lastName, phoneNumber) {
  this.firstName = firstName;
  this.lastName = lastName;
  this.phoneNumber = phoneNumber;
}

Contact.prototype.fullName = function() {
  return this.firstName + " " + this.lastName;
};

// User Interface Logic ---------
let addressBook = new AddressBook();

function handleFormSubmission(event) {
  event.preventDefault();
  const inputtedFirstName = document.querySelector("input#new-first-name").value;
  const inputtedLastName = document.querySelector("input#new-last-name").value;
  const inputtedPhoneNumber = document.querySelector("input#new-phone-number").value;
  let newContact = new Contact(inputtedFirstName, inputtedLastName, inputtedPhoneNumber);
  addressBook.addContact(newContact);
  console.log(addressBook.contacts);
}

window.addEventListener("load", function (){
  document.querySelector("form#new-contact").addEventListener("submit", handleFormSubmission);
});

Bây giờ chúng tôi có thể khởi chạy trang index.html của chúng tôi trong trình duyệt, điền vào mẫu của chúng tôi nhiều lần và xem danh sách ngày càng tăng của các

5 đã đăng nhập vào bảng điều khiển! Bước tiếp theo sẽ là thực sự hiển thị các liên hệ của chúng tôi trong DOM. Tuy nhiên, để làm điều đó, trước tiên chúng ta cần học cách lặp qua các thuộc tính đối tượng.

---

Ví dụ Github repo cho sổ địa chỉ