Điều gì xảy ra khi một biểu mẫu được gửi trong javascript?

Các biểu mẫu đã được giới thiệu ngắn gọn trong chương trước như một cách để gửi thông tin do người dùng cung cấp qua HTTP. Chúng được thiết kế cho Web tiền JavaScript, giả định rằng tương tác với máy chủ luôn diễn ra bằng cách điều hướng đến một trang mới

Nhưng các phần tử của chúng là một phần của DOM giống như phần còn lại của trang và các phần tử DOM đại diện cho các trường biểu mẫu hỗ trợ một số thuộc tính và sự kiện không có trên các phần tử khác. Những điều này giúp kiểm tra và kiểm soát các trường đầu vào đó bằng chương trình JavaScript và thực hiện những việc như thêm chức năng vào biểu mẫu truyền thống hoặc sử dụng biểu mẫu và trường làm khối xây dựng trong ứng dụng JavaScript

Lĩnh vực

Biểu mẫu web bao gồm bất kỳ số lượng trường nhập nào được nhóm trong thẻ

<select>
  <option>Pancakesoption>
  <option>Puddingoption>
  <option>Ice creamoption>
select>
3. HTML cho phép một số kiểu trường khác nhau, từ hộp kiểm bật/tắt đơn giản đến menu thả xuống và trường để nhập văn bản. Cuốn sách này sẽ không cố gắng thảo luận toàn diện về tất cả các loại trường, nhưng chúng tôi sẽ bắt đầu với một cái nhìn tổng quan sơ bộ.

Rất nhiều loại trường sử dụng thẻ

<select>
  <option>Pancakesoption>
  <option>Puddingoption>
  <option>Ice creamoption>
select>
4. Thuộc tính
<select>
  <option>Pancakesoption>
  <option>Puddingoption>
  <option>Ice creamoption>
select>
5 của thẻ này được sử dụng để chọn kiểu của trường. Đây là một số loại
<select>
  <option>Pancakesoption>
  <option>Puddingoption>
  <option>Ice creamoption>
select>
4 thường được sử dụng

<select>
  <option>Pancakesoption>
  <option>Puddingoption>
  <option>Ice creamoption>
select>
7Trường văn bản một dòng
<select>
  <option>Pancakesoption>
  <option>Puddingoption>
  <option>Ice creamoption>
select>
8Giống như
<select>
  <option>Pancakesoption>
  <option>Puddingoption>
  <option>Ice creamoption>
select>
7 nhưng ẩn văn bản được nhập
<input type="text">
<script>
  document.querySelector("input").focus();
  console.log(document.activeElement.tagName);
  // → INPUT
  document.querySelector("input").blur();
  console.log(document.activeElement.tagName);
  // → BODY
script>
0Công tắc bật/tắt
<input type="text">
<script>
  document.querySelector("input").focus();
  console.log(document.activeElement.tagName);
  // → INPUT
  document.querySelector("input").blur();
  console.log(document.activeElement.tagName);
  // → BODY
script>
1(Một phần) trường trắc nghiệm
<input type="text">
<script>
  document.querySelector("input").focus();
  console.log(document.activeElement.tagName);
  // → INPUT
  document.querySelector("input").blur();
  console.log(document.activeElement.tagName);
  // → BODY
script>
2Cho phép người dùng chọn một tệp từ máy tính của họ

Các trường biểu mẫu không nhất thiết phải xuất hiện trong thẻ

<select>
  <option>Pancakesoption>
  <option>Puddingoption>
  <option>Ice creamoption>
select>
3. Bạn có thể đặt chúng ở bất cứ đâu trong một trang. Không thể gửi các trường như vậy (chỉ có thể gửi toàn bộ biểu mẫu), nhưng khi phản hồi đầu vào bằng JavaScript, chúng tôi thường không muốn gửi các trường của mình theo cách thông thường

<select>
  <option>Pancakesoption>
  <option>Puddingoption>
  <option>Ice creamoption>
select>
1

Giao diện JavaScript cho các phần tử như vậy khác với loại phần tử. Chúng ta sẽ đi qua từng người trong số họ sau trong chương

Các trường văn bản nhiều dòng có thẻ riêng của chúng,

<input type="text">
<script>
  document.querySelector("input").focus();
  console.log(document.activeElement.tagName);
  // → INPUT
  document.querySelector("input").blur();
  console.log(document.activeElement.tagName);
  // → BODY
script>
4, chủ yếu là do việc sử dụng một thuộc tính để chỉ định giá trị bắt đầu nhiều dòng sẽ rất khó xử.
<input type="text">
<script>
  document.querySelector("input").focus();
  console.log(document.activeElement.tagName);
  // → INPUT
  document.querySelector("input").blur();
  console.log(document.activeElement.tagName);
  // → BODY
script>
4 yêu cầu một thẻ đóng
<input type="text">
<script>
  document.querySelector("input").focus();
  console.log(document.activeElement.tagName);
  // → INPUT
  document.querySelector("input").blur();
  console.log(document.activeElement.tagName);
  // → BODY
script>
6 phù hợp và sử dụng văn bản giữa hai thẻ đó, thay vì sử dụng thuộc tính
<input type="text">
<script>
  document.querySelector("input").focus();
  console.log(document.activeElement.tagName);
  // → INPUT
  document.querySelector("input").blur();
  console.log(document.activeElement.tagName);
  // → BODY
script>
7 của nó, làm văn bản bắt đầu

<select>
  <option>Pancakesoption>
  <option>Puddingoption>
  <option>Ice creamoption>
select>
6

Cuối cùng, thẻ

<input type="text">
<script>
  document.querySelector("input").focus();
  console.log(document.activeElement.tagName);
  // → INPUT
  document.querySelector("input").blur();
  console.log(document.activeElement.tagName);
  // → BODY
script>
8 được sử dụng để tạo trường cho phép người dùng chọn từ một số tùy chọn được xác định trước

<select>
  <option>Pancakesoption>
  <option>Puddingoption>
  <option>Ice creamoption>
select>

Bất cứ khi nào giá trị của trường biểu mẫu thay đổi, nó sẽ kích hoạt sự kiện

<input type="text">
<script>
  document.querySelector("input").focus();
  console.log(document.activeElement.tagName);
  // → INPUT
  document.querySelector("input").blur();
  console.log(document.activeElement.tagName);
  // → BODY
script>
9

Tiêu điểm

Không giống như hầu hết các thành phần trong tài liệu HTML, các trường biểu mẫu có thể lấy tiêu điểm bàn phím. Khi được nhấp vào — hoặc được kích hoạt theo cách khác — chúng trở thành phần tử hiện đang hoạt động, phần nhận chính của đầu vào bàn phím

Nếu tài liệu có trường văn bản, văn bản đã nhập sẽ chỉ xuất hiện ở đó khi trường được đặt tiêu điểm. Các trường khác phản ứng khác với các sự kiện bàn phím. Ví dụ: menu

<input type="text">
<script>
  document.querySelector("input").focus();
  console.log(document.activeElement.tagName);
  // → INPUT
  document.querySelector("input").blur();
  console.log(document.activeElement.tagName);
  // → BODY
script>
8 cố gắng di chuyển đến tùy chọn chứa văn bản mà người dùng đã nhập và phản hồi các phím mũi tên bằng cách di chuyển lựa chọn của nó lên và xuống

Chúng tôi có thể kiểm soát tiêu điểm từ JavaScript bằng các phương thức

<select>
  <option>Pancakesoption>
  <option>Puddingoption>
  <option>Ice creamoption>
select>
11 và
<select>
  <option>Pancakesoption>
  <option>Puddingoption>
  <option>Ice creamoption>
select>
12. Cái đầu tiên di chuyển tiêu điểm đến phần tử DOM mà nó được gọi và cái thứ hai loại bỏ tiêu điểm. Giá trị trong
<select>
  <option>Pancakesoption>
  <option>Puddingoption>
  <option>Ice creamoption>
select>
13 tương ứng với phần tử hiện được đặt tiêu điểm

<input type="text">
<script>
  document.querySelector("input").focus();
  console.log(document.activeElement.tagName);
  // → INPUT
  document.querySelector("input").blur();
  console.log(document.activeElement.tagName);
  // → BODY
script>

Đối với một số trang, người dùng sẽ muốn tương tác với trường biểu mẫu ngay lập tức. JavaScript có thể được sử dụng để tập trung trường này khi tài liệu được tải, nhưng HTML cũng cung cấp thuộc tính

<select>
  <option>Pancakesoption>
  <option>Puddingoption>
  <option>Ice creamoption>
select>
14, thuộc tính này tạo ra hiệu ứng tương tự nhưng cho trình duyệt biết những gì chúng tôi đang cố gắng đạt được. Điều này giúp trình duyệt có thể vô hiệu hóa hành vi khi không phù hợp, chẳng hạn như khi người dùng tập trung vào thứ khác

<select>
  <option>Pancakesoption>
  <option>Puddingoption>
  <option>Ice creamoption>
select>
1

Các trình duyệt truyền thống cũng cho phép người dùng di chuyển tiêu điểm qua tài liệu bằng cách nhấn phím Tab. Chúng ta có thể tác động đến thứ tự các phần tử nhận tiêu điểm bằng thuộc tính

<select>
  <option>Pancakesoption>
  <option>Puddingoption>
  <option>Ice creamoption>
select>
15. Tài liệu ví dụ sau sẽ cho phép chuyển tiêu điểm từ mục nhập văn bản sang nút OK, thay vì đi qua liên kết trợ giúp trước

<select>
  <option>Pancakesoption>
  <option>Puddingoption>
  <option>Ice creamoption>
select>
8

Theo mặc định, hầu hết các loại phần tử HTML không thể được tập trung. Nhưng bạn có thể thêm thuộc tính

<select>
  <option>Pancakesoption>
  <option>Puddingoption>
  <option>Ice creamoption>
select>
15 vào bất kỳ phần tử nào, điều này sẽ làm cho phần tử đó có thể được đặt tiêu điểm

Các trường bị vô hiệu hóa

Tất cả các trường biểu mẫu có thể bị vô hiệu hóa thông qua thuộc tính

<select>
  <option>Pancakesoption>
  <option>Puddingoption>
  <option>Ice creamoption>
select>
17 của chúng, thuộc tính này cũng tồn tại dưới dạng thuộc tính trên đối tượng DOM của phần tử

<select>
  <option>Pancakesoption>
  <option>Puddingoption>
  <option>Ice creamoption>
select>
1

Không thể tập trung hoặc thay đổi các trường bị vô hiệu hóa và không giống như các trường đang hoạt động, chúng thường có màu xám và nhạt dần

Khi một chương trình đang trong quá trình xử lý một hành động do một số nút hoặc điều khiển khác gây ra, điều này có thể yêu cầu giao tiếp với máy chủ và do đó mất một lúc, bạn nên tắt điều khiển đó cho đến khi hành động đó kết thúc. Bằng cách đó, khi người dùng mất kiên nhẫn và nhấp lại vào đó, họ sẽ không vô tình lặp lại hành động của mình

Hình thức tổng thể

Khi một trường được chứa trong phần tử

<select>
  <option>Pancakesoption>
  <option>Puddingoption>
  <option>Ice creamoption>
select>
3, phần tử DOM của nó sẽ có thuộc tính
<select>
  <option>Pancakesoption>
  <option>Puddingoption>
  <option>Ice creamoption>
select>
19 liên kết trở lại phần tử DOM của biểu mẫu. Ngược lại, phần tử
<select>
  <option>Pancakesoption>
  <option>Puddingoption>
  <option>Ice creamoption>
select>
3 có một thuộc tính gọi là
<select>
  <option>Pancakesoption>
  <option>Puddingoption>
  <option>Ice creamoption>
select>
81 chứa một tập hợp các trường giống như mảng bên trong nó

Thuộc tính

<select>
  <option>Pancakesoption>
  <option>Puddingoption>
  <option>Ice creamoption>
select>
82 của trường biểu mẫu xác định cách giá trị của nó sẽ được xác định khi biểu mẫu được gửi. Nó cũng có thể được sử dụng làm tên thuộc tính khi truy cập thuộc tính
<select>
  <option>Pancakesoption>
  <option>Puddingoption>
  <option>Ice creamoption>
select>
81 của biểu mẫu, hoạt động như một đối tượng dạng mảng (có thể truy cập theo số) và bản đồ (có thể truy cập theo tên)

<select>
  <option>Pancakesoption>
  <option>Puddingoption>
  <option>Ice creamoption>
select>
8

Một nút có thuộc tính

<select>
  <option>Pancakesoption>
  <option>Puddingoption>
  <option>Ice creamoption>
select>
5 của
<select>
  <option>Pancakesoption>
  <option>Puddingoption>
  <option>Ice creamoption>
select>
85, khi được nhấn, sẽ khiến biểu mẫu được gửi. Nhấn Enter khi một trường biểu mẫu được đặt tiêu điểm cũng có tác dụng tương tự

Gửi biểu mẫu thông thường có nghĩa là trình duyệt điều hướng đến trang được chỉ định bởi thuộc tính

<select>
  <option>Pancakesoption>
  <option>Puddingoption>
  <option>Ice creamoption>
select>
86 của biểu mẫu, sử dụng yêu cầu
<select>
  <option>Pancakesoption>
  <option>Puddingoption>
  <option>Ice creamoption>
select>
87 hoặc
<select>
  <option>Pancakesoption>
  <option>Puddingoption>
  <option>Ice creamoption>
select>
88. Nhưng trước khi điều đó xảy ra, một sự kiện
<select>
  <option>Pancakesoption>
  <option>Puddingoption>
  <option>Ice creamoption>
select>
89 được kích hoạt. Sự kiện này có thể được xử lý bằng JavaScript và trình xử lý có thể ngăn hành vi mặc định bằng cách gọi
<select>
  <option>Pancakesoption>
  <option>Puddingoption>
  <option>Ice creamoption>
select>
10 trên đối tượng sự kiện

<select>
  <option>Pancakesoption>
  <option>Puddingoption>
  <option>Ice creamoption>
select>
6

Chặn các sự kiện

<select>
  <option>Pancakesoption>
  <option>Puddingoption>
  <option>Ice creamoption>
select>
89 trong JavaScript có nhiều cách sử dụng khác nhau. Chúng tôi có thể viết mã để xác minh rằng các giá trị mà người dùng đã nhập có ý nghĩa và ngay lập tức hiển thị thông báo lỗi thay vì gửi biểu mẫu khi họ không. Hoặc chúng tôi có thể tắt hoàn toàn cách gửi biểu mẫu thông thường, như trong ví dụ trước và để chương trình của chúng tôi xử lý đầu vào, có thể sử dụng
<select>
  <option>Pancakesoption>
  <option>Puddingoption>
  <option>Ice creamoption>
select>
12 để gửi nó đến máy chủ mà không cần tải lại trang

Trường văn bản

Các trường được tạo bởi các thẻ

<select>
  <option>Pancakesoption>
  <option>Puddingoption>
  <option>Ice creamoption>
select>
4 với loại
<select>
  <option>Pancakesoption>
  <option>Puddingoption>
  <option>Ice creamoption>
select>
7 hoặc
<select>
  <option>Pancakesoption>
  <option>Puddingoption>
  <option>Ice creamoption>
select>
8, cũng như các thẻ
<select>
  <option>Pancakesoption>
  <option>Puddingoption>
  <option>Ice creamoption>
select>
16, chia sẻ một giao diện chung. Các phần tử DOM của họ có thuộc tính
<input type="text">
<script>
  document.querySelector("input").focus();
  console.log(document.activeElement.tagName);
  // → INPUT
  document.querySelector("input").blur();
  console.log(document.activeElement.tagName);
  // → BODY
script>
7 chứa nội dung hiện tại của họ dưới dạng giá trị chuỗi. Đặt thuộc tính này thành một chuỗi khác sẽ thay đổi nội dung của trường

Thuộc tính

<select>
  <option>Pancakesoption>
  <option>Puddingoption>
  <option>Ice creamoption>
select>
18 và
<select>
  <option>Pancakesoption>
  <option>Puddingoption>
  <option>Ice creamoption>
select>
19 của trường văn bản cung cấp cho chúng ta thông tin về con trỏ và vùng chọn trong văn bản. Khi không có gì được chọn, hai thuộc tính này giữ cùng một số, cho biết vị trí của con trỏ. Ví dụ: 0 cho biết bắt đầu văn bản và 10 cho biết con trỏ ở sau ký tự thứ 10. Khi một phần của trường được chọn, hai thuộc tính sẽ khác nhau, giúp chúng tôi bắt đầu và kết thúc văn bản đã chọn. Giống như
<input type="text">
<script>
  document.querySelector("input").focus();
  console.log(document.activeElement.tagName);
  // → INPUT
  document.querySelector("input").blur();
  console.log(document.activeElement.tagName);
  // → BODY
script>
7, các thuộc tính này cũng có thể được ghi vào

Ví dụ, hãy tưởng tượng bạn đang viết một bài báo về Khasekhemwy nhưng gặp khó khăn khi đánh vần tên của ông ấy. Đoạn mã sau kết nối thẻ

<input type="text">
<script>
  document.querySelector("input").focus();
  console.log(document.activeElement.tagName);
  // → INPUT
  document.querySelector("input").blur();
  console.log(document.activeElement.tagName);
  // → BODY
script>
4 với trình xử lý sự kiện mà khi bạn nhấn F2, nó sẽ chèn chuỗi “Khasekhemwy” cho bạn

<select>
  <option>Pancakesoption>
  <option>Puddingoption>
  <option>Ice creamoption>
select>
8

Hàm

<select>
  <option>Pancakesoption>
  <option>Puddingoption>
  <option>Ice creamoption>
select>
82 thay thế phần đang được chọn trong nội dung của trường văn bản bằng từ đã cho rồi di chuyển con trỏ sau từ đó để người dùng có thể gõ tiếp

Sự kiện

<input type="text">
<script>
  document.querySelector("input").focus();
  console.log(document.activeElement.tagName);
  // → INPUT
  document.querySelector("input").blur();
  console.log(document.activeElement.tagName);
  // → BODY
script>
9 cho trường văn bản không kích hoạt mỗi khi nhập nội dung nào đó. Thay vào đó, nó kích hoạt khi trường mất tiêu điểm sau khi nội dung của nó bị thay đổi. Để phản hồi ngay lập tức với những thay đổi trong trường văn bản, thay vào đó, bạn nên đăng ký trình xử lý cho sự kiện
<select>
  <option>Pancakesoption>
  <option>Puddingoption>
  <option>Ice creamoption>
select>
84, sự kiện này sẽ kích hoạt mỗi khi người dùng nhập ký tự, xóa văn bản hoặc thao tác nội dung của trường

Ví dụ sau đây hiển thị trường văn bản và bộ đếm hiển thị độ dài hiện tại của văn bản đã nhập

<select>
  <option>Pancakesoption>
  <option>Puddingoption>
  <option>Ice creamoption>
select>
60

Hộp kiểm và nút radio

Trường hộp kiểm là một chuyển đổi nhị phân đơn giản. Giá trị của nó có thể được trích xuất hoặc thay đổi thông qua thuộc tính

<select>
  <option>Pancakesoption>
  <option>Puddingoption>
  <option>Ice creamoption>
select>
85 của nó, thuộc tính này chứa giá trị Boolean

<select>
  <option>Pancakesoption>
  <option>Puddingoption>
  <option>Ice creamoption>
select>
61

Thẻ

<select>
  <option>Pancakesoption>
  <option>Puddingoption>
  <option>Ice creamoption>
select>
86 được sử dụng để liên kết một đoạn văn bản với trường nhập liệu. Thuộc tính
<select>
  <option>Pancakesoption>
  <option>Puddingoption>
  <option>Ice creamoption>
select>
87 của nó phải tham chiếu đến
<select>
  <option>Pancakesoption>
  <option>Puddingoption>
  <option>Ice creamoption>
select>
88 của trường. Nhấp vào nhãn sẽ kích hoạt trường, lấy tiêu điểm và chuyển đổi giá trị của nó khi đó là hộp kiểm hoặc nút radio

Nút radio tương tự như hộp kiểm, nhưng nó được liên kết ngầm với các nút radio khác có cùng thuộc tính

<select>
  <option>Pancakesoption>
  <option>Puddingoption>
  <option>Ice creamoption>
select>
82 để chỉ một trong số chúng có thể hoạt động bất kỳ lúc nào

<select>
  <option>Pancakesoption>
  <option>Puddingoption>
  <option>Ice creamoption>
select>
62

Phương thức

<select>
  <option>Pancakesoption>
  <option>Puddingoption>
  <option>Ice creamoption>
select>
60 cung cấp cho chúng ta tất cả các phần tử với thuộc tính
<select>
  <option>Pancakesoption>
  <option>Puddingoption>
  <option>Ice creamoption>
select>
82 đã cho. Ví dụ lặp lại các vòng lặp đó (với vòng lặp
<select>
  <option>Pancakesoption>
  <option>Puddingoption>
  <option>Ice creamoption>
select>
87 thông thường, không phải
<select>
  <option>Pancakesoption>
  <option>Puddingoption>
  <option>Ice creamoption>
select>
63, vì bộ sưu tập được trả về không phải là một mảng thực) và đăng ký một trình xử lý sự kiện cho từng phần tử. Hãy nhớ rằng các đối tượng sự kiện có thuộc tính
<select>
  <option>Pancakesoption>
  <option>Puddingoption>
  <option>Ice creamoption>
select>
64 đề cập đến phần tử đã kích hoạt sự kiện. Điều này thường hữu ích trong các trình xử lý sự kiện như thế này, sẽ được gọi trên các phần tử khác nhau và cần một số cách để truy cập mục tiêu hiện tại

Chọn trường

Các trường chọn về mặt khái niệm tương tự như các nút radio—chúng cũng cho phép người dùng chọn từ một tập hợp các tùy chọn. Nhưng khi một nút radio đặt bố cục của các tùy chọn dưới sự kiểm soát của chúng tôi, sự xuất hiện của thẻ

<input type="text">
<script>
  document.querySelector("input").focus();
  console.log(document.activeElement.tagName);
  // → INPUT
  document.querySelector("input").blur();
  console.log(document.activeElement.tagName);
  // → BODY
script>
8 được xác định bởi trình duyệt

Các trường được chọn cũng có một biến thể giống với danh sách hộp kiểm hơn là hộp radio. Khi được cung cấp thuộc tính

<select>
  <option>Pancakesoption>
  <option>Puddingoption>
  <option>Ice creamoption>
select>
66, thẻ
<input type="text">
<script>
  document.querySelector("input").focus();
  console.log(document.activeElement.tagName);
  // → INPUT
  document.querySelector("input").blur();
  console.log(document.activeElement.tagName);
  // → BODY
script>
8 sẽ cho phép người dùng chọn bất kỳ số lượng tùy chọn nào, thay vì chỉ một tùy chọn duy nhất

<select>
  <option>Pancakesoption>
  <option>Puddingoption>
  <option>Ice creamoption>
select>
63

Điều này, trong hầu hết các trình duyệt, sẽ hiển thị khác với trường chọn không phải ____466, thường được vẽ dưới dạng điều khiển thả xuống chỉ hiển thị các tùy chọn khi bạn mở nó

Thuộc tính

<select>
  <option>Pancakesoption>
  <option>Puddingoption>
  <option>Ice creamoption>
select>
69 cho thẻ
<input type="text">
<script>
  document.querySelector("input").focus();
  console.log(document.activeElement.tagName);
  // → INPUT
  document.querySelector("input").blur();
  console.log(document.activeElement.tagName);
  // → BODY
script>
8 được sử dụng để đặt số lượng tùy chọn hiển thị cùng một lúc, cho phép bạn kiểm soát rõ ràng giao diện của trình đơn thả xuống. Ví dụ: đặt thuộc tính
<select>
  <option>Pancakesoption>
  <option>Puddingoption>
  <option>Ice creamoption>
select>
69 thành
<select>
  <option>Pancakesoption>
  <option>Puddingoption>
  <option>Ice creamoption>
select>
82 sẽ làm cho trường hiển thị ba dòng, bất kể trường đó có bật tùy chọn
<select>
  <option>Pancakesoption>
  <option>Puddingoption>
  <option>Ice creamoption>
select>
66 hay không

Mỗi thẻ

<select>
  <option>Pancakesoption>
  <option>Puddingoption>
  <option>Ice creamoption>
select>
84 có một giá trị. Giá trị này có thể được xác định bằng thuộc tính
<input type="text">
<script>
  document.querySelector("input").focus();
  console.log(document.activeElement.tagName);
  // → INPUT
  document.querySelector("input").blur();
  console.log(document.activeElement.tagName);
  // → BODY
script>
7, nhưng khi không được cung cấp, văn bản bên trong tùy chọn sẽ được tính là giá trị của tùy chọn. Thuộc tính
<input type="text">
<script>
  document.querySelector("input").focus();
  console.log(document.activeElement.tagName);
  // → INPUT
  document.querySelector("input").blur();
  console.log(document.activeElement.tagName);
  // → BODY
script>
7 của phần tử
<input type="text">
<script>
  document.querySelector("input").focus();
  console.log(document.activeElement.tagName);
  // → INPUT
  document.querySelector("input").blur();
  console.log(document.activeElement.tagName);
  // → BODY
script>
8 phản ánh tùy chọn hiện được chọn. Tuy nhiên, đối với trường
<select>
  <option>Pancakesoption>
  <option>Puddingoption>
  <option>Ice creamoption>
select>
66, thuộc tính này không có nhiều ý nghĩa vì nó sẽ chỉ cung cấp giá trị của một trong các tùy chọn hiện được chọn

Các thẻ

<select>
  <option>Pancakesoption>
  <option>Puddingoption>
  <option>Ice creamoption>
select>
84 cho trường
<input type="text">
<script>
  document.querySelector("input").focus();
  console.log(document.activeElement.tagName);
  // → INPUT
  document.querySelector("input").blur();
  console.log(document.activeElement.tagName);
  // → BODY
script>
8 có thể được truy cập dưới dạng một đối tượng giống như mảng thông qua thuộc tính
<select>
  <option>Pancakesoption>
  <option>Puddingoption>
  <option>Ice creamoption>
select>
601 của trường. Mỗi tùy chọn có một thuộc tính gọi là
<select>
  <option>Pancakesoption>
  <option>Puddingoption>
  <option>Ice creamoption>
select>
602, cho biết liệu tùy chọn đó hiện có được chọn hay không. Thuộc tính cũng có thể được viết để chọn hoặc bỏ chọn một tùy chọn

Ví dụ sau trích xuất các giá trị đã chọn từ trường chọn

<select>
  <option>Pancakesoption>
  <option>Puddingoption>
  <option>Ice creamoption>
select>
66 và sử dụng chúng để soạn một số nhị phân từ các bit riêng lẻ. Giữ Ctrl (hoặc Command trên máy Mac) để chọn nhiều tùy chọn

<select>
  <option>Pancakesoption>
  <option>Puddingoption>
  <option>Ice creamoption>
select>
64

trường tệp

Các trường tệp ban đầu được thiết kế như một cách để tải tệp lên từ máy của trình duyệt thông qua biểu mẫu. Trong các trình duyệt hiện đại, chúng cũng cung cấp cách đọc các tệp như vậy từ các chương trình JavaScript. Trường đóng vai trò như một người gác cổng. Tập lệnh không thể đơn giản bắt đầu đọc các tệp riêng tư từ máy tính của người dùng, nhưng nếu người dùng chọn một tệp trong trường như vậy, trình duyệt sẽ hiểu hành động đó có nghĩa là tập lệnh có thể đọc tệp

Trường tệp thường trông giống như một nút được gắn nhãn với nội dung như “chọn tệp” hoặc “duyệt”, bên cạnh thông tin về tệp đã chọn

<select>
  <option>Pancakesoption>
  <option>Puddingoption>
  <option>Ice creamoption>
select>
65

Thuộc tính

<select>
  <option>Pancakesoption>
  <option>Puddingoption>
  <option>Ice creamoption>
select>
604 của phần tử trường tệp là một đối tượng dạng mảng (một lần nữa, không phải mảng thực) chứa các tệp được chọn trong trường. Ban đầu nó trống rỗng. Lý do không chỉ đơn giản là thuộc tính
<input type="text">
<script>
  document.querySelector("input").focus();
  console.log(document.activeElement.tagName);
  // → INPUT
  document.querySelector("input").blur();
  console.log(document.activeElement.tagName);
  // → BODY
script>
2 là vì các trường tệp cũng hỗ trợ thuộc tính
<select>
  <option>Pancakesoption>
  <option>Puddingoption>
  <option>Ice creamoption>
select>
66, cho phép chọn nhiều tệp cùng một lúc

Các đối tượng trong thuộc tính

<select>
  <option>Pancakesoption>
  <option>Puddingoption>
  <option>Ice creamoption>
select>
604 có các thuộc tính như
<select>
  <option>Pancakesoption>
  <option>Puddingoption>
  <option>Ice creamoption>
select>
82 (tên tệp),
<select>
  <option>Pancakesoption>
  <option>Puddingoption>
  <option>Ice creamoption>
select>
69 (kích thước tệp tính bằng byte) và
<select>
  <option>Pancakesoption>
  <option>Puddingoption>
  <option>Ice creamoption>
select>
5 (loại phương tiện của tệp, chẳng hạn như
<select>
  <option>Pancakesoption>
  <option>Puddingoption>
  <option>Ice creamoption>
select>
611 hoặc
<select>
  <option>Pancakesoption>
  <option>Puddingoption>
  <option>Ice creamoption>
select>
612)

Những gì nó không có là thuộc tính chứa nội dung của tệp. Bắt được điều đó có liên quan nhiều hơn một chút. Vì việc đọc tệp từ đĩa có thể mất thời gian nên giao diện sẽ phải không đồng bộ để tránh đóng băng tài liệu. Bạn có thể nghĩ hàm tạo

<select>
  <option>Pancakesoption>
  <option>Puddingoption>
  <option>Ice creamoption>
select>
613 tương tự như
<select>
  <option>Pancakesoption>
  <option>Puddingoption>
  <option>Ice creamoption>
select>
12 nhưng đối với các tệp

<select>
  <option>Pancakesoption>
  <option>Puddingoption>
  <option>Ice creamoption>
select>
66

Việc đọc một tệp được thực hiện bằng cách tạo một đối tượng

<select>
  <option>Pancakesoption>
  <option>Puddingoption>
  <option>Ice creamoption>
select>
613, đăng ký một trình xử lý sự kiện
<select>
  <option>Pancakesoption>
  <option>Puddingoption>
  <option>Ice creamoption>
select>
616 cho nó và gọi phương thức
<select>
  <option>Pancakesoption>
  <option>Puddingoption>
  <option>Ice creamoption>
select>
617 của nó, cung cấp cho nó tệp mà chúng ta muốn đọc. Sau khi quá trình tải kết thúc, thuộc tính
<select>
  <option>Pancakesoption>
  <option>Puddingoption>
  <option>Ice creamoption>
select>
618 của trình đọc chứa nội dung của tệp

Ví dụ sử dụng

<select>
  <option>Pancakesoption>
  <option>Puddingoption>
  <option>Ice creamoption>
select>
619 để lặp lại mảng vì trong một vòng lặp bình thường, sẽ rất khó để lấy đúng các đối tượng
<input type="text">
<script>
  document.querySelector("input").focus();
  console.log(document.activeElement.tagName);
  // → INPUT
  document.querySelector("input").blur();
  console.log(document.activeElement.tagName);
  // → BODY
script>
2 và
<select>
  <option>Pancakesoption>
  <option>Puddingoption>
  <option>Ice creamoption>
select>
621 từ trình xử lý sự kiện. Các biến sẽ được chia sẻ bởi tất cả các lần lặp lại của vòng lặp

<select>
  <option>Pancakesoption>
  <option>Puddingoption>
  <option>Ice creamoption>
select>
613 cũng kích hoạt sự kiện
<select>
  <option>Pancakesoption>
  <option>Puddingoption>
  <option>Ice creamoption>
select>
623 khi đọc tệp không thành công vì bất kỳ lý do gì. Bản thân đối tượng lỗi sẽ kết thúc trong thuộc tính
<select>
  <option>Pancakesoption>
  <option>Puddingoption>
  <option>Ice creamoption>
select>
624 của trình đọc. Nếu bạn không muốn nhớ chi tiết về một giao diện không đồng bộ không nhất quán khác, bạn có thể gói nó trong một
<select>
  <option>Pancakesoption>
  <option>Puddingoption>
  <option>Ice creamoption>
select>
625 (xem Chương 17) như thế này

<select>
  <option>Pancakesoption>
  <option>Puddingoption>
  <option>Ice creamoption>
select>
67

Có thể chỉ đọc một phần của tệp bằng cách gọi

<select>
  <option>Pancakesoption>
  <option>Puddingoption>
  <option>Ice creamoption>
select>
626 trên tệp đó và chuyển kết quả (được gọi là đối tượng blob) cho trình đọc tệp

Lưu trữ dữ liệu phía máy khách

Các trang HTML đơn giản với một chút JavaScript có thể là một phương tiện tuyệt vời cho “các ứng dụng nhỏ”—các chương trình trợ giúp nhỏ giúp tự động hóa mọi việc hàng ngày. Bằng cách kết nối một số trường biểu mẫu với trình xử lý sự kiện, bạn có thể thực hiện mọi việc từ chuyển đổi giữa độ C và độ F sang tính toán mật khẩu từ mật khẩu chính và tên trang web

Khi một ứng dụng như vậy cần ghi nhớ điều gì đó giữa các phiên, bạn không thể sử dụng các biến JavaScript vì chúng sẽ bị loại bỏ mỗi khi đóng trang. Bạn có thể thiết lập một máy chủ, kết nối nó với Internet và để ứng dụng của bạn lưu trữ thứ gì đó ở đó. Chúng ta sẽ xem làm thế nào để làm điều đó trong Chương 20. Nhưng điều này làm tăng thêm rất nhiều công việc và sự phức tạp. Đôi khi chỉ cần giữ dữ liệu trong trình duyệt là đủ. Nhưng bằng cách nào?

Bạn có thể lưu trữ dữ liệu chuỗi theo cách tồn tại khi tải lại trang bằng cách đặt nó vào đối tượng

<select>
  <option>Pancakesoption>
  <option>Puddingoption>
  <option>Ice creamoption>
select>
627. Đối tượng này cho phép bạn gửi các giá trị chuỗi dưới tên (cũng là chuỗi), như trong ví dụ này

<select>
  <option>Pancakesoption>
  <option>Puddingoption>
  <option>Ice creamoption>
select>
68

Một giá trị trong

<select>
  <option>Pancakesoption>
  <option>Puddingoption>
  <option>Ice creamoption>
select>
627 vẫn tồn tại cho đến khi nó bị ghi đè, nó bị xóa bằng
<select>
  <option>Pancakesoption>
  <option>Puddingoption>
  <option>Ice creamoption>
select>
629 hoặc người dùng xóa dữ liệu cục bộ của họ

Các trang web từ các miền khác nhau có các ngăn lưu trữ khác nhau. Điều đó có nghĩa là dữ liệu được lưu trữ trong

<select>
  <option>Pancakesoption>
  <option>Puddingoption>
  <option>Ice creamoption>
select>
627 bởi một trang web nhất định, về nguyên tắc, chỉ có thể được đọc (và ghi đè) bởi các tập lệnh trên cùng một trang web đó

Các trình duyệt cũng thực thi giới hạn về kích thước dữ liệu mà một trang web có thể lưu trữ trong

<select>
  <option>Pancakesoption>
  <option>Puddingoption>
  <option>Ice creamoption>
select>
627, thường ở mức vài megabyte. Hạn chế đó, cùng với thực tế là việc lấp đầy ổ đĩa cứng của mọi người bằng rác không thực sự mang lại lợi nhuận, đã ngăn không cho tính năng này ngốn quá nhiều dung lượng

Đoạn mã sau triển khai một ứng dụng ghi chú đơn giản. Nó giữ ghi chú của người dùng như một đối tượng, liên kết tiêu đề ghi chú với chuỗi nội dung. Đối tượng này được mã hóa dưới dạng JSON và được lưu trữ trong

<select>
  <option>Pancakesoption>
  <option>Puddingoption>
  <option>Ice creamoption>
select>
627. Người dùng có thể chọn ghi chú từ trường
<input type="text">
<script>
  document.querySelector("input").focus();
  console.log(document.activeElement.tagName);
  // → INPUT
  document.querySelector("input").blur();
  console.log(document.activeElement.tagName);
  // → BODY
script>
8 và thay đổi văn bản của ghi chú đó trong trường
<input type="text">
<script>
  document.querySelector("input").focus();
  console.log(document.activeElement.tagName);
  // → INPUT
  document.querySelector("input").blur();
  console.log(document.activeElement.tagName);
  // → BODY
script>
4. Một ghi chú có thể được thêm vào bằng cách nhấp vào một nút

<select>
  <option>Pancakesoption>
  <option>Puddingoption>
  <option>Ice creamoption>
select>
69

Tập lệnh khởi tạo biến

<select>
  <option>Pancakesoption>
  <option>Puddingoption>
  <option>Ice creamoption>
select>
635 thành giá trị được lưu trữ trong
<select>
  <option>Pancakesoption>
  <option>Puddingoption>
  <option>Ice creamoption>
select>
627 hoặc, nếu thiếu, thành một đối tượng đơn giản chỉ có ghi chú
<select>
  <option>Pancakesoption>
  <option>Puddingoption>
  <option>Ice creamoption>
select>
637 trống trong đó. Đọc một trường không tồn tại từ
<select>
  <option>Pancakesoption>
  <option>Puddingoption>
  <option>Ice creamoption>
select>
627 sẽ mang lại
<select>
  <option>Pancakesoption>
  <option>Puddingoption>
  <option>Ice creamoption>
select>
639. Chuyển
<select>
  <option>Pancakesoption>
  <option>Puddingoption>
  <option>Ice creamoption>
select>
639 đến
<select>
  <option>Pancakesoption>
  <option>Puddingoption>
  <option>Ice creamoption>
select>
641 sẽ làm cho nó phân tích cú pháp chuỗi
<select>
  <option>Pancakesoption>
  <option>Puddingoption>
  <option>Ice creamoption>
select>
642 và trả về
<select>
  <option>Pancakesoption>
  <option>Puddingoption>
  <option>Ice creamoption>
select>
639. Do đó, toán tử
<select>
  <option>Pancakesoption>
  <option>Puddingoption>
  <option>Ice creamoption>
select>
644 có thể được sử dụng để cung cấp giá trị mặc định trong tình huống như thế này

Bất cứ khi nào dữ liệu ghi chú thay đổi (khi ghi chú mới được thêm vào hoặc ghi chú hiện có thay đổi), hàm

<select>
  <option>Pancakesoption>
  <option>Puddingoption>
  <option>Ice creamoption>
select>
645 được gọi để cập nhật trường lưu trữ. Nếu ứng dụng này nhằm xử lý hàng nghìn ghi chú, thay vì một số ít, thì điều này sẽ quá đắt và chúng tôi phải nghĩ ra một cách phức tạp hơn để lưu trữ chúng, chẳng hạn như tạo cho mỗi ghi chú một trường lưu trữ riêng

Khi người dùng thêm ghi chú mới, mã phải cập nhật trường văn bản một cách rõ ràng, mặc dù trường

<input type="text">
<script>
  document.querySelector("input").focus();
  console.log(document.activeElement.tagName);
  // → INPUT
  document.querySelector("input").blur();
  console.log(document.activeElement.tagName);
  // → BODY
script>
8 có trình xử lý
<input type="text">
<script>
  document.querySelector("input").focus();
  console.log(document.activeElement.tagName);
  // → INPUT
  document.querySelector("input").blur();
  console.log(document.activeElement.tagName);
  // → BODY
script>
9 thực hiện điều tương tự. Điều này là cần thiết vì sự kiện
<input type="text">
<script>
  document.querySelector("input").focus();
  console.log(document.activeElement.tagName);
  // → INPUT
  document.querySelector("input").blur();
  console.log(document.activeElement.tagName);
  // → BODY
script>
9 chỉ kích hoạt khi người dùng thay đổi giá trị của trường chứ không phải khi tập lệnh thực hiện điều đó

Có một đối tượng khác tương tự như

<select>
  <option>Pancakesoption>
  <option>Puddingoption>
  <option>Ice creamoption>
select>
627 được gọi là
<select>
  <option>Pancakesoption>
  <option>Puddingoption>
  <option>Ice creamoption>
select>
650. Sự khác biệt giữa hai loại này là nội dung của
<select>
  <option>Pancakesoption>
  <option>Puddingoption>
  <option>Ice creamoption>
select>
650 bị quên vào cuối mỗi phiên, điều này đối với hầu hết các trình duyệt có nghĩa là bất cứ khi nào trình duyệt bị đóng

Tóm lược

HTML có thể thể hiện nhiều loại trường biểu mẫu khác nhau, chẳng hạn như trường văn bản, hộp kiểm, trường nhiều lựa chọn và bộ chọn tệp

Các trường như vậy có thể được kiểm tra và thao tác bằng JavaScript. Chúng kích hoạt sự kiện

<input type="text">
<script>
  document.querySelector("input").focus();
  console.log(document.activeElement.tagName);
  // → INPUT
  document.querySelector("input").blur();
  console.log(document.activeElement.tagName);
  // → BODY
script>
9 khi thay đổi, sự kiện
<select>
  <option>Pancakesoption>
  <option>Puddingoption>
  <option>Ice creamoption>
select>
84 khi văn bản được nhập và các sự kiện bàn phím khác nhau. Những sự kiện này cho phép chúng tôi nhận thấy khi người dùng đang tương tác với các trường. Các thuộc tính như
<input type="text">
<script>
  document.querySelector("input").focus();
  console.log(document.activeElement.tagName);
  // → INPUT
  document.querySelector("input").blur();
  console.log(document.activeElement.tagName);
  // → BODY
script>
7 (đối với trường văn bản và trường chọn) hoặc
<select>
  <option>Pancakesoption>
  <option>Puddingoption>
  <option>Ice creamoption>
select>
85 (đối với hộp kiểm và nút radio) được sử dụng để đọc hoặc đặt nội dung của trường

Khi một biểu mẫu được gửi, sự kiện

<select>
  <option>Pancakesoption>
  <option>Puddingoption>
  <option>Ice creamoption>
select>
89 của nó sẽ kích hoạt. Trình xử lý JavaScript có thể gọi
<select>
  <option>Pancakesoption>
  <option>Puddingoption>
  <option>Ice creamoption>
select>
10 trong sự kiện đó để ngăn quá trình gửi xảy ra. Các phần tử của trường biểu mẫu không cần phải được bao bọc trong các thẻ
<select>
  <option>Pancakesoption>
  <option>Puddingoption>
  <option>Ice creamoption>
select>
3

Khi người dùng đã chọn một tệp từ hệ thống tệp cục bộ của họ trong trường bộ chọn tệp, giao diện

<select>
  <option>Pancakesoption>
  <option>Puddingoption>
  <option>Ice creamoption>
select>
613 có thể được sử dụng để truy cập nội dung của tệp này từ một chương trình JavaScript

Các đối tượng

<select>
  <option>Pancakesoption>
  <option>Puddingoption>
  <option>Ice creamoption>
select>
627 và
<select>
  <option>Pancakesoption>
  <option>Puddingoption>
  <option>Ice creamoption>
select>
650 có thể được sử dụng để lưu thông tin theo cách tồn tại khi tải lại trang. Cái đầu tiên lưu dữ liệu mãi mãi (hoặc cho đến khi người dùng quyết định xóa nó) và cái thứ hai lưu nó cho đến khi đóng trình duyệt

bài tập

Bàn làm việc JavaScript

Xây dựng giao diện cho phép mọi người nhập và chạy các đoạn mã JavaScript

Đặt một nút bên cạnh trường

<input type="text">
<script>
  document.querySelector("input").focus();
  console.log(document.activeElement.tagName);
  // → INPUT
  document.querySelector("input").blur();
  console.log(document.activeElement.tagName);
  // → BODY
script>
4, khi được nhấn, trường này sẽ sử dụng hàm tạo
<select>
  <option>Pancakesoption>
  <option>Puddingoption>
  <option>Ice creamoption>
select>
663 mà chúng ta đã thấy trong Chương 10 để ngắt dòng văn bản trong một hàm và gọi nó. Chuyển đổi giá trị trả về của hàm hoặc bất kỳ lỗi nào mà nó đưa ra thành một chuỗi và hiển thị nó sau trường văn bản

<select>
  <option>Pancakesoption>
  <option>Puddingoption>
  <option>Ice creamoption>
select>
0

Sử dụng

<select>
  <option>Pancakesoption>
  <option>Puddingoption>
  <option>Ice creamoption>
select>
664 hoặc
<select>
  <option>Pancakesoption>
  <option>Puddingoption>
  <option>Ice creamoption>
select>
665 để có quyền truy cập vào các phần tử được xác định trong HTML của bạn. Trình xử lý sự kiện cho các sự kiện
<select>
  <option>Pancakesoption>
  <option>Puddingoption>
  <option>Ice creamoption>
select>
666 hoặc
<select>
  <option>Pancakesoption>
  <option>Puddingoption>
  <option>Ice creamoption>
select>
667 trên nút có thể lấy thuộc tính
<input type="text">
<script>
  document.querySelector("input").focus();
  console.log(document.activeElement.tagName);
  // → INPUT
  document.querySelector("input").blur();
  console.log(document.activeElement.tagName);
  // → BODY
script>
7 của trường văn bản và gọi
<select>
  <option>Pancakesoption>
  <option>Puddingoption>
  <option>Ice creamoption>
select>
669 trên đó

Đảm bảo rằng bạn gói cả lệnh gọi tới

<select>
  <option>Pancakesoption>
  <option>Puddingoption>
  <option>Ice creamoption>
select>
669 và lệnh gọi tới kết quả của nó trong một khối
<select>
  <option>Pancakesoption>
  <option>Puddingoption>
  <option>Ice creamoption>
select>
671 để bạn có thể nắm bắt các ngoại lệ mà nó tạo ra. Trong trường hợp này, chúng tôi thực sự không biết loại ngoại lệ nào chúng tôi đang tìm kiếm, vì vậy hãy nắm bắt mọi thứ

Thuộc tính

<select>
  <option>Pancakesoption>
  <option>Puddingoption>
  <option>Ice creamoption>
select>
672 của phần tử đầu ra có thể được sử dụng để điền vào nó bằng một thông báo chuỗi. Hoặc, nếu bạn muốn giữ lại nội dung cũ, hãy tạo một nút văn bản mới bằng cách sử dụng
<select>
  <option>Pancakesoption>
  <option>Puddingoption>
  <option>Ice creamoption>
select>
673 và nối nó vào phần tử. Hãy nhớ thêm một ký tự xuống dòng vào cuối để không phải tất cả đầu ra xuất hiện trên một dòng

Tự động hoàn thành

Mở rộng trường văn bản để khi người dùng nhập, danh sách các giá trị được đề xuất sẽ hiển thị bên dưới trường. Bạn có sẵn một mảng các giá trị có thể có và sẽ hiển thị những giá trị bắt đầu bằng văn bản được nhập. Khi một gợi ý được nhấp vào, hãy thay thế giá trị hiện tại của trường văn bản bằng gợi ý đó

<select>
  <option>Pancakesoption>
  <option>Puddingoption>
  <option>Ice creamoption>
select>
1

Sự kiện tốt nhất để cập nhật danh sách đề xuất là

<select>
  <option>Pancakesoption>
  <option>Puddingoption>
  <option>Ice creamoption>
select>
84 vì sự kiện đó sẽ kích hoạt ngay lập tức khi nội dung của trường được thay đổi

Sau đó lặp lại mảng thuật ngữ và xem liệu chúng có bắt đầu bằng chuỗi đã cho hay không. Ví dụ: bạn có thể gọi

<select>
  <option>Pancakesoption>
  <option>Puddingoption>
  <option>Ice creamoption>
select>
675 và xem kết quả có bằng 0 không. Đối với mỗi chuỗi phù hợp, hãy thêm một phần tử vào các đề xuất
<select>
  <option>Pancakesoption>
  <option>Puddingoption>
  <option>Ice creamoption>
select>
676. Có lẽ bạn cũng nên để trống mỗi khi bạn bắt đầu cập nhật các đề xuất, chẳng hạn bằng cách đặt
<select>
  <option>Pancakesoption>
  <option>Puddingoption>
  <option>Ice creamoption>
select>
672 của nó thành chuỗi trống

Bạn có thể thêm trình xử lý sự kiện

<select>
  <option>Pancakesoption>
  <option>Puddingoption>
  <option>Ice creamoption>
select>
666 vào mọi thành phần đề xuất hoặc thêm một trình xử lý duy nhất vào bên ngoài
<select>
  <option>Pancakesoption>
  <option>Puddingoption>
  <option>Ice creamoption>
select>
676 chứa chúng và xem thuộc tính
<select>
  <option>Pancakesoption>
  <option>Puddingoption>
  <option>Ice creamoption>
select>
64 của sự kiện để tìm xem đề xuất nào đã được nhấp vào

Để lấy văn bản đề xuất ra khỏi nút DOM, bạn có thể xem

<select>
  <option>Pancakesoption>
  <option>Puddingoption>
  <option>Ice creamoption>
select>
672 của nó hoặc đặt một thuộc tính để lưu trữ văn bản một cách rõ ràng khi bạn tạo phần tử

Trò chơi cuộc đời của Conway

Conway's Game of Life là một trò chơi mô phỏng đơn giản tạo ra "sự sống" nhân tạo trên một ô lưới, mỗi ô trong số đó có thể sống hoặc không. Mỗi thế hệ (lượt), các quy tắc sau được áp dụng

  • Bất kỳ ô sống nào có ít hơn hai hoặc nhiều hơn ba hàng xóm sống chết

  • Bất kỳ tế bào trực tiếp nào có hai hoặc ba hàng xóm trực tiếp sẽ sống ở thế hệ tiếp theo

  • Bất kỳ ô chết nào có chính xác ba hàng xóm sống sẽ trở thành ô sống

Một hàng xóm được định nghĩa là bất kỳ ô liền kề nào, bao gồm các ô liền kề theo đường chéo

Lưu ý rằng các quy tắc này được áp dụng cho toàn bộ lưới cùng một lúc, không áp dụng cho từng ô vuông. Điều đó có nghĩa là việc đếm các ô lân cận dựa trên tình huống khi bắt đầu tạo và những thay đổi xảy ra với các ô lân cận trong quá trình tạo này sẽ không ảnh hưởng đến trạng thái mới của một ô nhất định

Triển khai trò chơi này bằng bất kỳ cấu trúc dữ liệu nào bạn thấy phù hợp. Sử dụng

<select>
  <option>Pancakesoption>
  <option>Puddingoption>
  <option>Ice creamoption>
select>
682 để điền vào lưới một mẫu ngẫu nhiên ban đầu. Hiển thị nó dưới dạng lưới các trường hộp kiểm, với một nút bên cạnh để chuyển sang thế hệ tiếp theo. Khi người dùng chọn hoặc bỏ chọn các hộp kiểm, những thay đổi của họ sẽ được đưa vào khi tính toán thế hệ tiếp theo

<select>
  <option>Pancakesoption>
  <option>Puddingoption>
  <option>Ice creamoption>
select>
2

Để giải quyết vấn đề xảy ra đồng thời các thay đổi về mặt khái niệm, hãy thử xem tính toán của một thế hệ dưới dạng một hàm thuần túy, lấy một lưới và tạo ra một lưới mới đại diện cho lượt tiếp theo

Biểu diễn lưới có thể được thực hiện theo bất kỳ cách nào được trình bày trong Chương 7 và 15. Đếm hàng xóm trực tiếp có thể được thực hiện với hai vòng lặp lồng nhau, lặp qua các tọa độ liền kề. Chú ý không đếm các ô bên ngoài trường và bỏ qua ô ở trung tâm, ô mà chúng ta đang đếm

Thực hiện các thay đổi đối với các hộp kiểm có hiệu lực trên thế hệ tiếp theo có thể được thực hiện theo hai cách. Trình xử lý sự kiện có thể nhận thấy những thay đổi này và cập nhật lưới hiện tại để phản ánh chúng hoặc bạn có thể tạo lưới mới từ các giá trị trong hộp kiểm trước khi tính toán lượt tiếp theo

Nếu bạn chọn sử dụng trình xử lý sự kiện, bạn có thể muốn đính kèm các thuộc tính xác định vị trí tương ứng với mỗi hộp kiểm để dễ dàng tìm ra ô nào cần thay đổi

Để vẽ lưới các hộp kiểm, bạn có thể sử dụng phần tử

<select>
  <option>Pancakesoption>
  <option>Puddingoption>
  <option>Ice creamoption>
select>
683 (xem Chương 13) hoặc chỉ cần đặt tất cả chúng vào cùng một phần tử và đặt phần tử
<select>
  <option>Pancakesoption>
  <option>Puddingoption>
  <option>Ice creamoption>
select>
684 (ngắt dòng) giữa các hàng

Điều gì xảy ra khi biểu mẫu được gửi?

Khi tất cả các trường trong biểu mẫu đã được điền vào, người dùng nhấp vào nút gửi để ghi lại dữ liệu biểu mẫu. Hành vi tiêu chuẩn là thu thập tất cả dữ liệu đã được nhập vào biểu mẫu và gửi dữ liệu đó đến một chương trình khác để xử lý .

Sự kiện nào kích hoạt khi biểu mẫu được gửi?

Sự kiện gửi kích hoạt khi

Làm cách nào để xử lý việc gửi biểu mẫu trong JavaScript?

Trong thẻ body, tạo biểu mẫu HTML và chỉ định id, phương thức và hành động của biểu mẫu. Trong biểu mẫu, hãy chỉ định thẻ neo với sự kiện onclick. Tạo một hàm cho JavaScript sẽ được thực thi khi nhấp vào liên kết. Khi chúng ta click vào link thì hàm submitForm() sẽ được thực thi

Điều gì xảy ra với dữ liệu được nhập vào biểu mẫu khi chúng tôi nhấn nút gửi?

Nút gửi đơn giản . Khi gửi, cặp tên/giá trị dữ liệu được gửi đến máy chủ . Trong trường hợp này, chuỗi sẽ là text=usertext , trong đó "usertext" là văn bản do người dùng nhập, được mã hóa để giữ nguyên các ký tự đặc biệt.