programming javascript

Đ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ẻ


  Pancakes
  Pudding
  Ice cream

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ẻ


  Pancakes
  Pudding
  Ice cream

4. Thuộc tính


  Pancakes
  Pudding
  Ice cream

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


  Pancakes
  Pudding
  Ice cream

4 thường được sử dụng


  Pancakes
  Pudding
  Ice cream

7Trường văn bản một dòng


  Pancakes
  Pudding
  Ice cream

8Giống như


  Pancakes
  Pudding
  Ice cream

7 nhưng ẩn văn bản được nhập



  document.querySelector["input"].focus[];
  console.log[document.activeElement.tagName];
  // → INPUT
  document.querySelector["input"].blur[];
  console.log[document.activeElement.tagName];
  // → BODY

0Công tắc bật/tắt



  document.querySelector["input"].focus[];
  console.log[document.activeElement.tagName];
  // → INPUT
  document.querySelector["input"].blur[];
  console.log[document.activeElement.tagName];
  // → BODY

1[Một phần] trường trắc nghiệm



  document.querySelector["input"].focus[];
  console.log[document.activeElement.tagName];
  // → INPUT
  document.querySelector["input"].blur[];
  console.log[document.activeElement.tagName];
  // → BODY

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ẻ


  Pancakes
  Pudding
  Ice cream

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


  Pancakes
  Pudding
  Ice cream

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,



  document.querySelector["input"].focus[];
  console.log[document.activeElement.tagName];
  // → INPUT
  document.querySelector["input"].blur[];
  console.log[document.activeElement.tagName];
  // → BODY

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ử.



  document.querySelector["input"].focus[];
  console.log[document.activeElement.tagName];
  // → INPUT
  document.querySelector["input"].blur[];
  console.log[document.activeElement.tagName];
  // → BODY

4 yêu cầu một thẻ đóng



  document.querySelector["input"].focus[];
  console.log[document.activeElement.tagName];
  // → INPUT
  document.querySelector["input"].blur[];
  console.log[document.activeElement.tagName];
  // → BODY

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



  document.querySelector["input"].focus[];
  console.log[document.activeElement.tagName];
  // → INPUT
  document.querySelector["input"].blur[];
  console.log[document.activeElement.tagName];
  // → BODY

7 của nó, làm văn bản bắt đầu


  Pancakes
  Pudding
  Ice cream

Cuối cùng, thẻ



  document.querySelector["input"].focus[];
  console.log[document.activeElement.tagName];
  // → INPUT
  document.querySelector["input"].blur[];
  console.log[document.activeElement.tagName];
  // → BODY

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


  Pancakes
  Pudding
  Ice cream

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



  document.querySelector["input"].focus[];
  console.log[document.activeElement.tagName];
  // → INPUT
  document.querySelector["input"].blur[];
  console.log[document.activeElement.tagName];
  // → BODY

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



  document.querySelector["input"].focus[];
  console.log[document.activeElement.tagName];
  // → INPUT
  document.querySelector["input"].blur[];
  console.log[document.activeElement.tagName];
  // → BODY

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


  Pancakes
  Pudding
  Ice cream

11 và


  Pancakes
  Pudding
  Ice cream

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


  Pancakes
  Pudding
  Ice cream

13 tương ứng với phần tử hiện được đặt tiêu điểm



  document.querySelector["input"].focus[];
  console.log[document.activeElement.tagName];
  // → INPUT
  document.querySelector["input"].blur[];
  console.log[document.activeElement.tagName];
  // → BODY

Đố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


  Pancakes
  Pudding
  Ice cream

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


  Pancakes
  Pudding
  Ice cream

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


  Pancakes
  Pudding
  Ice cream

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


  Pancakes
  Pudding
  Ice cream

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


  Pancakes
  Pudding
  Ice cream

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


  Pancakes
  Pudding
  Ice cream

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ử


  Pancakes
  Pudding
  Ice cream

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ử


  Pancakes
  Pudding
  Ice cream

3, phần tử DOM của nó sẽ có thuộc tính


  Pancakes
  Pudding
  Ice cream

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ử


  Pancakes
  Pudding
  Ice cream

3 có một thuộc tính gọi là


  Pancakes
  Pudding
  Ice cream

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


  Pancakes
  Pudding
  Ice cream

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


  Pancakes
  Pudding
  Ice cream

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]


  Pancakes
  Pudding
  Ice cream

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


  Pancakes
  Pudding
  Ice cream

5 của


  Pancakes
  Pudding
  Ice cream

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


  Pancakes
  Pudding
  Ice cream

86 của biểu mẫu, sử dụng yêu cầu


  Pancakes
  Pudding
  Ice cream

87 hoặc


  Pancakes
  Pudding
  Ice cream

88. Nhưng trước khi điều đó xảy ra, một sự kiện


  Pancakes
  Pudding
  Ice cream

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


  Pancakes
  Pudding
  Ice cream

10 trên đối tượng sự kiện


  Pancakes
  Pudding
  Ice cream

Chặn các sự kiện


  Pancakes
  Pudding
  Ice cream

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


  Pancakes
  Pudding
  Ice cream

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ẻ


  Pancakes
  Pudding
  Ice cream

4 với loại


  Pancakes
  Pudding
  Ice cream

7 hoặc


  Pancakes
  Pudding
  Ice cream

8, cũng như các thẻ


  Pancakes
  Pudding
  Ice cream

16, chia sẻ một giao diện chung. Các phần tử DOM của họ có thuộc tính



  document.querySelector["input"].focus[];
  console.log[document.activeElement.tagName];
  // → INPUT
  document.querySelector["input"].blur[];
  console.log[document.activeElement.tagName];
  // → BODY

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


  Pancakes
  Pudding
  Ice cream

18 và


  Pancakes
  Pudding
  Ice cream

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ư



  document.querySelector["input"].focus[];
  console.log[document.activeElement.tagName];
  // → INPUT
  document.querySelector["input"].blur[];
  console.log[document.activeElement.tagName];
  // → BODY

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ẻ



  document.querySelector["input"].focus[];
  console.log[document.activeElement.tagName];
  // → INPUT
  document.querySelector["input"].blur[];
  console.log[document.activeElement.tagName];
  // → BODY

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


  Pancakes
  Pudding
  Ice cream

Hàm


  Pancakes
  Pudding
  Ice cream

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



  document.querySelector["input"].focus[];
  console.log[document.activeElement.tagName];
  // → INPUT
  document.querySelector["input"].blur[];
  console.log[document.activeElement.tagName];
  // → BODY

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


  Pancakes
  Pudding
  Ice cream

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


  Pancakes
  Pudding
  Ice cream

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


  Pancakes
  Pudding
  Ice cream

85 của nó, thuộc tính này chứa giá trị Boolean


  Pancakes
  Pudding
  Ice cream

Thẻ


  Pancakes
  Pudding
  Ice cream

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


  Pancakes
  Pudding
  Ice cream

87 của nó phải tham chiếu đến


  Pancakes
  Pudding
  Ice cream

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


  Pancakes
  Pudding
  Ice cream

82 để chỉ một trong số chúng có thể hoạt động bất kỳ lúc nào


  Pancakes
  Pudding
  Ice cream

Phương thức


  Pancakes
  Pudding
  Ice cream

60 cung cấp cho chúng ta tất cả các phần tử với thuộc tính


  Pancakes
  Pudding
  Ice cream

82 đã cho. Ví dụ lặp lại các vòng lặp đó [với vòng lặp


  Pancakes
  Pudding
  Ice cream

87 thông thường, không phải


  Pancakes
  Pudding
  Ice cream

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


  Pancakes
  Pudding
  Ice cream

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ẻ



  document.querySelector["input"].focus[];
  console.log[document.activeElement.tagName];
  // → INPUT
  document.querySelector["input"].blur[];
  console.log[document.activeElement.tagName];
  // → BODY

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


  Pancakes
  Pudding
  Ice cream

66, thẻ



  document.querySelector["input"].focus[];
  console.log[document.activeElement.tagName];
  // → INPUT
  document.querySelector["input"].blur[];
  console.log[document.activeElement.tagName];
  // → BODY

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


  Pancakes
  Pudding
  Ice cream

Đ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


  Pancakes
  Pudding
  Ice cream

69 cho thẻ



  document.querySelector["input"].focus[];
  console.log[document.activeElement.tagName];
  // → INPUT
  document.querySelector["input"].blur[];
  console.log[document.activeElement.tagName];
  // → BODY

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


  Pancakes
  Pudding
  Ice cream

69 thành


  Pancakes
  Pudding
  Ice cream

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


  Pancakes
  Pudding
  Ice cream

66 hay không

Mỗi thẻ


  Pancakes
  Pudding
  Ice cream

84 có một giá trị. Giá trị này có thể được xác định bằng thuộc tính



  document.querySelector["input"].focus[];
  console.log[document.activeElement.tagName];
  // → INPUT
  document.querySelector["input"].blur[];
  console.log[document.activeElement.tagName];
  // → BODY

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



  document.querySelector["input"].focus[];
  console.log[document.activeElement.tagName];
  // → INPUT
  document.querySelector["input"].blur[];
  console.log[document.activeElement.tagName];
  // → BODY

7 của phần tử



  document.querySelector["input"].focus[];
  console.log[document.activeElement.tagName];
  // → INPUT
  document.querySelector["input"].blur[];
  console.log[document.activeElement.tagName];
  // → BODY

8 phản ánh tùy chọn hiện được chọn. Tuy nhiên, đối với trường


  Pancakes
  Pudding
  Ice cream

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ẻ


  Pancakes
  Pudding
  Ice cream

84 cho trường



  document.querySelector["input"].focus[];
  console.log[document.activeElement.tagName];
  // → INPUT
  document.querySelector["input"].blur[];
  console.log[document.activeElement.tagName];
  // → BODY

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


  Pancakes
  Pudding
  Ice cream

601 của trường. Mỗi tùy chọn có một thuộc tính gọi là


  Pancakes
  Pudding
  Ice cream

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


  Pancakes
  Pudding
  Ice cream

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


  Pancakes
  Pudding
  Ice cream

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


  Pancakes
  Pudding
  Ice cream

Thuộc tính


  Pancakes
  Pudding
  Ice cream

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



  document.querySelector["input"].focus[];
  console.log[document.activeElement.tagName];
  // → INPUT
  document.querySelector["input"].blur[];
  console.log[document.activeElement.tagName];
  // → BODY

2 là vì các trường tệp cũng hỗ trợ thuộc tính


  Pancakes
  Pudding
  Ice cream

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


  Pancakes
  Pudding
  Ice cream

604 có các thuộc tính như


  Pancakes
  Pudding
  Ice cream

82 [tên tệp],


  Pancakes
  Pudding
  Ice cream

69 [kích thước tệp tính bằng byte] và


  Pancakes
  Pudding
  Ice cream

5 [loại phương tiện của tệp, chẳng hạn như


  Pancakes
  Pudding
  Ice cream

611 hoặc


  Pancakes
  Pudding
  Ice cream

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


  Pancakes
  Pudding
  Ice cream

613 tương tự như


  Pancakes
  Pudding
  Ice cream

12 nhưng đối với các tệp


  Pancakes
  Pudding
  Ice cream

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


  Pancakes
  Pudding
  Ice cream

613, đăng ký một trình xử lý sự kiện


  Pancakes
  Pudding
  Ice cream

616 cho nó và gọi phương thức


  Pancakes
  Pudding
  Ice cream

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


  Pancakes
  Pudding
  Ice cream

618 của trình đọc chứa nội dung của tệp

Ví dụ sử dụng


  Pancakes
  Pudding
  Ice cream

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



  document.querySelector["input"].focus[];
  console.log[document.activeElement.tagName];
  // → INPUT
  document.querySelector["input"].blur[];
  console.log[document.activeElement.tagName];
  // → BODY

2 và


  Pancakes
  Pudding
  Ice cream

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


  Pancakes
  Pudding
  Ice cream

613 cũng kích hoạt sự kiện


  Pancakes
  Pudding
  Ice cream

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


  Pancakes
  Pudding
  Ice cream

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


  Pancakes
  Pudding
  Ice cream

625 [xem Chương 17] như thế này


  Pancakes
  Pudding
  Ice cream

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


  Pancakes
  Pudding
  Ice cream

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


  Pancakes
  Pudding
  Ice cream

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


  Pancakes
  Pudding
  Ice cream

Một giá trị trong


  Pancakes
  Pudding
  Ice cream

627 vẫn tồn tại cho đến khi nó bị ghi đè, nó bị xóa bằng


  Pancakes
  Pudding
  Ice cream

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


  Pancakes
  Pudding
  Ice cream

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


  Pancakes
  Pudding
  Ice cream

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


  Pancakes
  Pudding
  Ice cream

627. Người dùng có thể chọn ghi chú từ trường



  document.querySelector["input"].focus[];
  console.log[document.activeElement.tagName];
  // → INPUT
  document.querySelector["input"].blur[];
  console.log[document.activeElement.tagName];
  // → BODY

8 và thay đổi văn bản của ghi chú đó trong trường



  document.querySelector["input"].focus[];
  console.log[document.activeElement.tagName];
  // → INPUT
  document.querySelector["input"].blur[];
  console.log[document.activeElement.tagName];
  // → BODY

4. Một ghi chú có thể được thêm vào bằng cách nhấp vào một nút


  Pancakes
  Pudding
  Ice cream

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


  Pancakes
  Pudding
  Ice cream

635 thành giá trị được lưu trữ trong


  Pancakes
  Pudding
  Ice cream

627 hoặc, nếu thiếu, thành một đối tượng đơn giản chỉ có ghi chú


  Pancakes
  Pudding
  Ice cream

637 trống trong đó. Đọc một trường không tồn tại từ


  Pancakes
  Pudding
  Ice cream

627 sẽ mang lại


  Pancakes
  Pudding
  Ice cream

639. Chuyển


  Pancakes
  Pudding
  Ice cream

639 đến


  Pancakes
  Pudding
  Ice cream

641 sẽ làm cho nó phân tích cú pháp chuỗi


  Pancakes
  Pudding
  Ice cream

642 và trả về


  Pancakes
  Pudding
  Ice cream

639. Do đó, toán tử


  Pancakes
  Pudding
  Ice cream

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


  Pancakes
  Pudding
  Ice cream

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



  document.querySelector["input"].focus[];
  console.log[document.activeElement.tagName];
  // → INPUT
  document.querySelector["input"].blur[];
  console.log[document.activeElement.tagName];
  // → BODY

8 có trình xử lý



  document.querySelector["input"].focus[];
  console.log[document.activeElement.tagName];
  // → INPUT
  document.querySelector["input"].blur[];
  console.log[document.activeElement.tagName];
  // → BODY

9 thực hiện điều tương tự. Điều này là cần thiết vì sự kiện



  document.querySelector["input"].focus[];
  console.log[document.activeElement.tagName];
  // → INPUT
  document.querySelector["input"].blur[];
  console.log[document.activeElement.tagName];
  // → BODY

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ư


  Pancakes
  Pudding
  Ice cream

627 được gọi là


  Pancakes
  Pudding
  Ice cream

650. Sự khác biệt giữa hai loại này là nội dung của


  Pancakes
  Pudding
  Ice cream

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



  document.querySelector["input"].focus[];
  console.log[document.activeElement.tagName];
  // → INPUT
  document.querySelector["input"].blur[];
  console.log[document.activeElement.tagName];
  // → BODY

9 khi thay đổi, sự kiện


  Pancakes
  Pudding
  Ice cream

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ư



  document.querySelector["input"].focus[];
  console.log[document.activeElement.tagName];
  // → INPUT
  document.querySelector["input"].blur[];
  console.log[document.activeElement.tagName];
  // → BODY

7 [đối với trường văn bản và trường chọn] hoặc


  Pancakes
  Pudding
  Ice cream

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


  Pancakes
  Pudding
  Ice cream

89 của nó sẽ kích hoạt. Trình xử lý JavaScript có thể gọi


  Pancakes
  Pudding
  Ice cream

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ẻ


  Pancakes
  Pudding
  Ice cream

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


  Pancakes
  Pudding
  Ice cream

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


  Pancakes
  Pudding
  Ice cream

627 và


  Pancakes
  Pudding
  Ice cream

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



  document.querySelector["input"].focus[];
  console.log[document.activeElement.tagName];
  // → INPUT
  document.querySelector["input"].blur[];
  console.log[document.activeElement.tagName];
  // → BODY

4, khi được nhấn, trường này sẽ sử dụng hàm tạo


  Pancakes
  Pudding
  Ice cream

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


  Pancakes
  Pudding
  Ice cream

Sử dụng


  Pancakes
  Pudding
  Ice cream

664 hoặc


  Pancakes
  Pudding
  Ice cream

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


  Pancakes
  Pudding
  Ice cream

666 hoặc


  Pancakes
  Pudding
  Ice cream

667 trên nút có thể lấy thuộc tính



  document.querySelector["input"].focus[];
  console.log[document.activeElement.tagName];
  // → INPUT
  document.querySelector["input"].blur[];
  console.log[document.activeElement.tagName];
  // → BODY

7 của trường văn bản và gọi


  Pancakes
  Pudding
  Ice cream

669 trên đó

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


  Pancakes
  Pudding
  Ice cream

669 và lệnh gọi tới kết quả của nó trong một khối


  Pancakes
  Pudding
  Ice cream

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


  Pancakes
  Pudding
  Ice cream

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


  Pancakes
  Pudding
  Ice cream

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 ý đó


  Pancakes
  Pudding
  Ice cream

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


  Pancakes
  Pudding
  Ice cream

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


  Pancakes
  Pudding
  Ice cream

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


  Pancakes
  Pudding
  Ice cream

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


  Pancakes
  Pudding
  Ice cream

672 của nó thành chuỗi trống

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


  Pancakes
  Pudding
  Ice cream

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


  Pancakes
  Pudding
  Ice cream

676 chứa chúng và xem thuộc tính


  Pancakes
  Pudding
  Ice cream

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


  Pancakes
  Pudding
  Ice cream

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


  Pancakes
  Pudding
  Ice cream

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


  Pancakes
  Pudding
  Ice cream

Để 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ử


  Pancakes
  Pudding
  Ice cream

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ử


  Pancakes
  Pudding
  Ice cream

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 title. 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.

Lĩnh vực

Tiêu điểm

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

Hình thức tổng thể

Trường văn bản

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

Chọn trường

trường tệp

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

Tóm lược

bài tập

Bàn làm việc JavaScript

Tự động hoàn thành

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

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

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

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

Đ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?

Bài Viết Liên Quan

Toplist mới

Bài mới nhất

Chủ Đề