Sẵn sàng javascript để điền vào biểu mẫu. JavaScript biểu cảm: Biểu mẫu và Trường biểu mẫu. Hình thức đơn giản với xác nhận

Dạo này tôi đang say sưa học thuật
Tôi sẽ chiếm được lòng tin của bạn thông qua dịch vụ của tôi,
Bạn viết cho tôi một giấy nợ,
Vì vậy, tôi không có bất kỳ nghi ngờ nào về việc thanh toán.

Mephistophele, trong Faust của Goethe

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 để truyền thông tin do người dùng nhập qua HTTP. Chúng được phát triển trên web trước khi có JavaScript, với mong muốn xảy ra tương tác với máy chủ khi chuyển sang một trang khác.

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 mà các phần tử khác không có. Điều này cho phép xem và thao tác các trường đầu vào từ các chương trình JavaScript và thêm chức năng vào các biểu mẫu cổ điển hoặc sử dụng các biểu mẫu và trường làm cơ sở để xây dựng một ứng dụng.

Trường Một biểu mẫu web bao gồm bất kỳ số lượng trường đầu vào nào được bao quanh bởi một thẻ. HTML cung cấp nhiều trường khác nhau, từ các hộp kiểm bật/tắt đơn giản đến danh sách thả xuống và trường nhập văn bản. Cuốn sách này sẽ không thảo luận chi tiết về tất cả các loại lĩnh vực nhưng chúng tôi sẽ cung cấp một cái nhìn tổng quan ngắn gọn về chúng.

Nhiều loại trường đầu vào sử dụng thẻ. Thuộc tính type của nó được sử dụng để chọn kiểu của trường. Dưới đây là một số loại phổ biến:

trường văn bản văn bản trên một dòng
mật khẩu giống với văn bản nhưng ẩn đầu vào
bật/tắt hộp kiểm
phần radio của trường với khả năng chọn từ một số tùy chọn
tập tin cho phép người dùng chọn một tập tin trên 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 bên trong thẻ. Chúng có thể được đặt ở bất cứ đâu trên trang. Thông tin từ các trường như vậy không thể được chuyển đến máy chủ (điều này chỉ có thể thực hiện được đối với toàn bộ biểu mẫu), nhưng khi chúng tôi tạo các trường mà JavaScript xử lý, chúng tôi thường không cần chuyển thông tin từ các trường thông qua gửi.

(chữ)

(mật khẩu)

(hộp kiểm)

(Đài)

(tài liệu)

Giao diện JavaScript cho các phần tử như vậy khác nhau tùy thuộc vào loại. Chúng ta sẽ xem xét từng cái một lát sau.

Các trường văn bản nhiều dòng có thẻ riêng. Thẻ phải có thẻ đóng và sử dụng văn bản bên trong các thẻ đó thay vì sử dụng thuộc tính value.

một hai ba

Và thẻ được sử dụng để tạo trường cho phép người dùng chọn một trong các tùy chọn đã cho.
Bánh xèo kem

Khi giá trị của một trường thay đổi, sự kiện “thay đổi” sẽ được kích hoạt.

Tập trung Không giống như hầu hết các yếu tố tài liệu HTML, các trường biểu mẫu có thể nhận tiêu điểm bàn phím. Khi bạn nhấp vào hoặc chọn chúng, chúng sẽ hoạt động, tức là. máy thu chính của đầu vào bàn phím.

Nếu tài liệu có trường văn bản thì văn bản bạn nhập sẽ chỉ xuất hiện trong đó nếu trường đó có tiêu điểm nhập. Các trường khác phản hồi khác với bàn phím. Ví dụ: nó cố gắng di chuyển đến một tùy chọn có chứa văn bản mà người dùng nhập và cũng phản hồi các phím mũi tên bằng cách di chuyển lựa chọn tùy chọn lên và xuống.

Bạn có thể kiểm soát tiêu điểm từ JavaScript bằng cách sử dụng các phương pháp lấy nét và làm mờ. 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ị của document.activeElement tương ứng với tiêu điểm nhận phần tử hiện tại.

document.querySelector("input").focus(); console.log(document.activeElement.tagName); // → INPUT document.querySelector("input").blur(); console.log(document.activeElement.tagName); // → CƠ THỂ

Một số trang yêu cầu người dùng bắt đầu làm việc ngay trên một trong các trường biểu mẫu. Tại Trợ giúp về JavaScript Có thể đặt tiêu điểm cho trường này khi tài liệu được tải, nhưng HTML cũng có thuộc tính tự động lấy nét giúp đạt được kết quả tương tự nhưng cho trình duyệt biết ý định của chúng ta là gì. Trong trường hợp này, trình duyệt có thể ghi đè hành vi này trong những trường hợp thích hợp, chẳng hạn như khi người dùng đã di chuyển tiêu điểm đi nơi khác.

Các trình duyệt theo truyền thống cho phép người dùng di chuyển tiêu điểm Phím Tab. Chúng ta có thể tác động đến thứ tự điều hướng thông qua thuộc tính tabindex. Trong ví dụ, tài liệu sẽ thay đổi tiêu điểm từ trương Văn bản vào nút OK, thay vì đi qua liên kết trợ giúp trước.

(trợ giúp) được rồi

Theo mặc định, hầu hết các loại phần tử HTML không tập trung. Nhưng bằng cách thêm tabindex vào phần tử bạn sẽ làm được có thể nhận được tôi đang tập trung.

Các trường bị vô hiệu hóa Tất cả các trường có thể bị vô hiệu hóa bằng thuộc tính bị vô hiệu hóa, thuộc tính này cũng tồn tại dưới dạng thuộc tính của thành phần đối tượng DOM.

Tôi ổn, tôi kiệt sức rồi

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

Khi một chương trình đang trong quá trình xử lý thao tác nhấp chuột vào nút hoặc phần tử khác, việc này có thể yêu cầu liên lạc với máy chủ và mất nhiều thời gian, bạn nên tắt phần tử này cho đến khi hành động hoàn tất. Trong trường hợp này, khi người dùng mất kiên nhẫn và nhấp lại vào phần tử đó, hành động sẽ không được lặp lại nữa.

Toàn bộ biểu mẫu Khi một trường được chứa trong một phần tử, phần tử DOM của nó sẽ có thuộc tính biểu mẫu tham chiếu đến biểu mẫu. Ngược lại, phần tử này có thuộc tính Elements chứa tập hợp các trường giống như mảng.

Thuộc tính tên của một trường chỉ định cách xác định giá trị của trường này khi được gửi đến máy chủ. 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 phần tử của biểu mẫu, thuộc tính này hoạt động như một đối tượng giống như mảng (được truy cập theo số) và bản đồ (được truy cập theo tên).

Tên:
Mật khẩu:
Đăng nhập var form = document.querySelector("form"); console.log(form.elements.type); // → mật khẩu console.log(form.elements.password.type); // → mật khẩu console.log(form.elements.name.form == biểu mẫu); // → đúng

Nút có thuộc tính loại bằng gửi sẽ gửi biểu mẫu khi được nhấp vào. Nhấn Nhập phím bên trong một trường biểu mẫu có tác dụng tương tự.

Gửi biểu mẫu thường có nghĩa là trình duyệt đi đến trang được chỉ định bởi thuộc tính hình thức hành động sử dụng GET hoặc ĐĂNG yêu cầu. Nhưng trước đó, thuộc tính “submit” sẽ bị hủy. Nó có thể được xử lý bằng JavaScript và trình xử lý có thể ngăn chặn hành vi mặc định bằng cách gọi sự kiện PreventDefault trên đối tượng.

Giá trị: Lưu var form = document.querySelector("form"); form.addEventListener("gửi", function(event) ( console.log("Đang lưu giá trị", form.elements.value.value); event.preventDefault(); ));

Việc chặn các sự kiện “gửi” rất hữu ích trong một số trường hợp. Chúng ta có thể viết mã kiểm tra tính hợp lệ của các giá trị đã nhập và ngay lập tức hiển thị lỗi thay vì truyền dữ liệu biểu mẫu. Hoặc chúng ta có thể tắt tính năng gửi biểu mẫu theo mặc định và để chương trình tự xử lý dữ liệu đầu vào, ví dụ như sử dụng XMLHttpRequest để gửi dữ liệu đế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ó thẻ và loại văn bản và mật khẩu, cũng như thẻ, có giao diện chung. Các phần tử DOM của chúng có thuộc tính giá trị chứa nội dung hiện tại dưới dạng chuỗi văn bản. Việc đặt thuộc tính này thành một giá trị sẽ thay đổi nội dung của trường.

Thuộc tính trường văn bản SelectionStart và SelectionEnd chứa thông tin về vị trí của con trỏ và vùng chọn văn bản. Khi không có gì được chọn, giá trị của chúng giống nhau và bằng vị trí con trỏ. Ví dụ: 0 biểu thị phần đầu của văn bản, 10 biểu thị con trỏ ở ký tự thứ 10. Khi một phần của trường được chọn, các thuộc tính sẽ được những nghĩa khác nhau, cụ thể là phần đầu và phần cuối của văn bản đã chọn. Bạn cũng có thể nhập giá trị vào các trường này.

Ví dụ: hãy tưởng tượng rằng bạn đang viết một bài báo về Khasekhemwy, nhưng bạn gặp khó khăn khi đánh vần tên của anh ấy một cách chính xác. Đoạn mã sau gán một trình xử lý sự kiện cho thẻ, khi nhấn F2, sẽ chèn chuỗi “Khasekhemwy”.

var textarea = document.querySelector("textarea"); textarea.addEventListener("keydown", function(event) ( // Mã khóa cho F2 xảy ra là 113 if (event.keyCode == 113) ( thaySelection(textarea, "Khasekhemwy"); event.preventDefault(); ) )); hàm thay thếSelection(field, word) ( var from = field.selectionStart, to = field.selectionEnd; field.value = field.value.slice(0, from) + word + field.value.slice(to); // Đặt con trỏ sau từ field.selectionStart = field.selectionEnd = from + word.length );

Hàm thay thếSelection thay thế văn bản hiện được chọn bằng từ được chỉ định và di chuyển con trỏ đến vị trí sau từ đó để bạn có thể tiếp tục nhập.

Sự kiện "thay đổi" cho trường văn bản không kích hoạt mỗi lần nhập một ký tự. Nó kích hoạt sau khi trường mất tiêu điểm và giá trị của nó đã bị thay đổi. Để phản hồi ngay lập tức những thay đổi trong trường văn bản, bạn cần đăng ký một sự kiện “đầu vào”, sự kiện này sẽ kích hoạt mỗi khi bạn nhập một ký tự, xóa văn bản hoặc thao tác khác với nội dung của trường.

Trong ví dụ sau, chúng ta thấy một 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.

độ dài: 0 var text = document.querySelector("input"); đầu ra var = document.querySelector("#length"); text.addEventListener("input", function() ( out.textContent = text.value.length; ));

Hộp kiểm và nút radio Hộp kiểm là một nút radio nhị phân đơn giản. Giá trị của nó có thể được truy xuất hoặc thay đổi thông qua thuộc tính đã chọn, chứa giá trị Boolean.

Làm cho trang có màu tím var hộp kiểm = document.querySelector("#purple"); hộp kiểm.addEventListener("change", function() ( document.body.style.background = hộp kiểm.checked ? "mediumpurple" : ""; ));

Thẻ được sử dụng để liên kết một đoạn văn bản với trường đầu vào. Thuộc tính for phải khớp với id của trường. Nhấp vào nhãn sẽ kích hoạt trường đầu vào, nó nhận tiêu điểm và thay đổi giá trị - nếu đó là dấu kiểm hoặc nút radio.

Nút radio tương tự như dấu kiểm, nhưng nó được liên kết với các nút radio khác có cùng tên nên chỉ có thể chọn một trong số chúng.

Màu sắc: Tím Xanh Xanh Nút var = document.getElementsByName("color"); hàm setColor(event) ( document.body.style.background = event.target.value; ) for (var i = 0; i< buttons.length; i++) buttons[i].addEventListener("change", setColor);

Phương thức document.getElementsByName trả về tất cả các phần tử có giá trị đã cho thuộc tính tên. Ví dụ lặp qua chúng (thông qua thông thường vòng lặp for thay vì forEach 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 đích đề cập đến phần tử đã kích hoạt sự kiện. Điều này hữu ích khi tạo trình xử lý sự kiện - trình xử lý của chúng tôi có thể được gọi bởi các phần tử khác nhau và nó phải có cách truy cập vào phần tử hiện tại đã gọi nó.

Chọn trường Chọn trường tương tự như nút radio—chúng cũng cho phép bạn chọn từ nhiều tùy chọn. Nhưng nếu các nút radio cho phép chúng ta kiểm soát bố cục của các tùy chọn thì loại trường sẽ do trình duyệt xác định.

Các trường chọn có một tùy chọn trông giống danh sách hộp kiểm hơn là nút radio. Nếu có thuộc tính multiple, thẻ sẽ cho phép bạn chọn bất kỳ số lượng tùy chọn nào, thay vì chỉ một.

Bánh xèo kem

Trong hầu hết các trình duyệt vẻ bề ngoài các trường sẽ khác với trường một lựa chọn, thường trông giống như một menu thả xuống.

Thuộc tính kích thước của thẻ được sử dụng để đặt số lượng tùy chọn hiển thị cùng lúc - bằng cách này, bạn có thể tác động đến giao diện của phần bỏ học. Ví dụ: bằng cách chỉ định kích thước 3, bạn sẽ thấy ba dòng cùng một lúc, bất kể có nhiều tùy chọn hay không.

Mỗi thẻ có một ý nghĩa. Nó có thể được xác định bởi thuộc tính value, nhưng nếu nó không được chỉ định thì giá trị của thẻ sẽ xác định văn bản nằm bên trong thẻ... Thuộc tính giá trị của phần tử phản ánh tùy chọn hiện được chọn. Đối với trường có khả năng chọn một số tùy chọn, thuộc tính này không đặc biệt cần thiết vì nó sẽ chỉ chứa một trong một số tùy chọn đã chọn.

Thẻ trường có thể được truy cập dưới dạng đối tượng giống mảng thông qua thuộc tính tùy chọn. Mỗi tùy chọn có một thuộc tính được chọn cho biết tùy chọn đó hiện có được chọn hay không. Thuộc tính cũng có thể được thay đổi để làm cho tùy chọn được chọn hoặc không được chọn.

Ví dụ sau lấy các giá trị đã chọn từ một trường được chọn và sử dụng chúng để tạo Số nhị phân từ bit. Nhấn Ctrl (hoặc Command trên máy Mac) để chọn nhiều giá trị cùng một lúc.

0001 0010 0100 1000 = 0 var select = document.querySelector("select"); var đầu ra = document.querySelector("#output"); select.addEventListener("change", function() ( var number = 0; for (var i = 0; i< select.options.length; i++) { var option = select.options[i]; if (option.selected) number += Number(option.value); } output.textContent = number; });

Trường tệp Trường tệp ban đầu được dùng để tải tệp lên từ máy tính thông qua một biểu mẫu. Trong các trình duyệt hiện đại, chúng cũng cho phép bạn đọc tệp từ JavaScript. Trường này hoạt động như một người bảo vệ cho các tập tin. Tập lệnh không thể đơn giản lấy và mở tệp từ máy tính của người dùng, nhưng nếu người dùng chọn tệp trong trường này, trình duyệt sẽ cho phép tập lệnh bắt đầu đọc tệp.

Trường tệp thường trông giống như một nút có nhãn giống như “Chọn tệp” với thông tin về tệp đã chọn bên cạnh.

var input = document.querySelector("input"); input.addEventListener("change", function() ( if (input.files.length > 0) ( var file = input.files; console.log("Bạn đã chọn", file.name); if (file.type) console.log("Nó có kiểu", file.type);

Thuộc tính tệp của phần tử là một đối tượng giống mảng (không phải mảng thực) chứa danh sách các tệp đã chọn. Ban đầu nó trống rỗng. Phần tử không có tài sản đơn giản tệp vì người dùng có thể chọn nhiều tệp cùng một lúc khi thuộc tính multiple được bật.

Các đối tượng trong thuộc tính tệp có các thuộc tính tên (tên tệp), kích thước (kích thước tệp tính bằng byte) và loại (loại tệp theo nghĩa loại phương tiện - văn bản/thuần túy hoặc hình ảnh/jpeg).

Thứ nó không có là thuộc tính chứa nội dung của tệp. Bạn phải cố gắng hết sức để có được nội dung. Vì việc đọc tệp từ đĩa mất nhiều thời gian nên giao diện phải không đồng bộ để tài liệu không bị treo. Bạn có thể coi hàm tạo FileReader là hàm tạo XMLHttpRequest, nhưng dành cho tệp.

var input = document.querySelector("input"); input.addEventListener("change", function() ( Array.prototype.forEach.call(input.files, function(file) ( var reader = new FileReader(); reader.addEventListener("load", function() ( console .log("File", file.name, "bắt đầu bằng", reader.result.slice(0, 20)); reader.readAsText(file));

Việc đọc một tệp xảy ra bằng cách tạo một đối tượng FileReader, đăng ký một sự kiện "tải" cho nó và gọi phương thức readAsText của nó, truyền tệp vào ổ đĩa. Khi quá trình tải xuống hoàn tất, nội dung của tệp sẽ được lưu trữ trong thuộc tính kết quả.

Ví dụ này sử dụng Array.prototype.forEach để lặp qua mảng, vì trong một vòng lặp bình thường sẽ bất tiện khi nhận đồ vật cần thiết tập tin và trình đọc từ trình xử lý sự kiện. Các biến sẽ chung cho tất cả các lần lặp của vòng lặp.

FileReaders cũng có sự kiện "lỗi" khi đọc tệp không thành công. đối tượng lỗi sẽ được lưu trong thuộc tính lỗi. Nếu bạn không muốn bận tâm đến những điều bất tiện khác mạch không đồng bộ, bạn có thể gói nó trong một lời hứa (xem Chương 17):

Hàm readFile(file) ( return new Promise(function(succeed, failed) ( var reader = new FileReader(); reader.addEventListener("load", function() ( thành công(reader.result); )); reader.addEventListener ("lỗi", function() ( failed(reader.error); )); reader.readAsText(file));

Lưu trữ dữ liệu ở phía máy khách Các trang HTML đơn giản có bổ sung JavaScript có thể là cơ sở tuyệt vời cho các ứng dụng nhỏ - nhỏ chương trình hỗ trợ, tự động hóa các công việc hàng ngày. Bằng cách đính kèm trình xử lý sự kiện vào các trường biểu mẫu, bạn có thể thực hiện mọi việc từ chuyển đổi độ F sang độ C cho đến tạo 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 lưu thông tin giữa các phiên, các biến JavaScript không thể được sử dụng - giá trị của 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à sau đó ứng dụng sẽ lưu trữ dữ liệu của bạn ở đó. Chúng ta sẽ xem xét vấn đề này trong Chương 20. Nhưng nó làm tăng thêm công việc và sự phức tạp cho bạn. Đôi khi chỉ cần lưu trữ dữ liệu trong trình duyệt của bạn là đủ. Nhưng bằng cách nào?

Bạn có thể lưu trữ dữ liệu chuỗi để nó tồn tại khi tải lại trang - để thực hiện việc này, bạn cần đặt nó vào đối tượng localStorage. Nó cho phép dữ liệu chuỗi được lưu trữ dưới tên (cũng là chuỗi), như trong ví dụ này:

LocalStorage.setItem("tên người dùng", "marijn"); console.log(localStorage.getItem("tên người dùng")); // → marijn localStorage.removeItem("tên người dùng");

Biến trong localStorage được lưu trữ cho đến khi nó bị ghi đè, xóa bằng cách sử dụng RemoveItem hoặc xóa bộ nhớ cục bộ của người dùng.

Các trang web từ các miền khác nhau có các phần khác nhau trong bộ lưu trữ này. Nghĩa là, dữ liệu được lưu từ một trang web trong localStorage chỉ có thể được đọc hoặc ghi đè bởi các tập lệnh từ cùng một trang web.

Các trình duyệt cũng giới hạn lượng dữ liệu mà chúng có thể lưu trữ, thường là vài megabyte. Hạn chế này, cùng với thực tế là việc ghi điểm ổ cứng không mang lại lợi nhuận cho mọi người, ngăn không cho dung lượng ổ đĩa bị ăn hết.

Đoạn mã sau thực hiện một chương trình đơn giảnđể ghi chép. Nó lưu trữ các ghi chú như một đối tượng, liên kết các tiêu đề với nội dung. Nó được mã hóa bằng JSON và được lưu trữ trong localStorage. Người dùng có thể chọn một ghi chú thông qua trường và thay đổi văn bản của nó. Một mục được thêm bằng cách nhấp vào một nút.

Ghi chú: mới
var list = document.querySelector("#list"); function addToList(name) ( var option = document.createElement("option"); option.textContent = name; list.appendChild(option); ) // Lấy danh sách từ bộ nhớ cục bộ var note = JSON.parse(localStorage.getItem ("ghi chú")) || ("mua gì": ""); for (tên var trong ghi chú) if (notes.hasOwnProperty(name)) addToList(name); hàm saveToStorage() ( localStorage.setItem("notes", JSON.stringify(notes)); ) var current = document.querySelector("#currentnote"); current.value = ghi chú; list.addEventListener("change", function() ( current.value = ghi chú; )); current.addEventListener("change", function() ( note = current.value; saveToStorage(); )); hàm addNote() ( var name = nhắc("Tên ghi chú", ""); if (!name) return; if (!notes.hasOwnProperty(name)) ( ghi chú = ""; addToList(name); saveToStorage() ; ) list.value = tên; current.value = ghi chú)

Tập lệnh khởi tạo biến ghi chú với giá trị từ localStorage và nếu nó không có ở đó, thì bằng một đối tượng đơn giản có một mục nhập “mua gì”. Nỗ lực đọc trường bị thiếu từ localStorage sẽ trả về giá trị rỗng. Bằng cách chuyển null sang JSON.parse, chúng ta sẽ nhận lại null. Do đó, bạn có thể sử dụng toán tử || cho giá trị mặc định. .

Khi dữ liệu trong ghi chú thay đổi (thêm lối đi mới hoặc thay đổi hiện tại), hàm saveToStorage được gọi để cập nhật trường được lưu trữ. Nếu chúng tôi mong đợi rằng chúng tôi sẽ lưu trữ hàng nghìn bản ghi thì điều đó sẽ quá tốn kém và chúng tôi sẽ phải đưa ra một quy trình lưu trữ phức tạp hơn - ví dụ: một trường riêng cho mỗi bản ghi.

Khi người dùng thêm bản ghi, mã phải cập nhật trường văn bản, mặc dù trường này có trình xử lý "thay đổi". Điều này là cần thiết vì sự kiện "thay đổi" chỉ xảy ra 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ư localStorage được gọi là sessionStorage. Sự khác biệt giữa chúng là nội dung của sessionStorage bị quên vào cuối phiên, điều này đối với hầu hết các trình duyệt có nghĩa là thời điểm đóng.

Bản tóm tắt HTML cung cấp nhiều nhiều loại khác nhau trường biểu mẫu – văn bản, hộp kiểm, nhiều lựa chọn, chọn tệp.

Bạn có thể lấy giá trị và thao tác các trường này từ JavaScript. Khi thay đổi, chúng kích hoạt sự kiện “thay đổi”, khi nhập bằng bàn phím – “đầu vào” và nhiều sự kiện bàn phím khác nhau. Chúng giúp chúng tôi nắm bắt được thời điểm người dùng tương tác với trường đầu vào. Các thuộc tính như giá trị (đối với trường văn bản và lựa chọn) hoặc được chọn (đối với hộp kiểm và nút radio) được sử dụng để đọc và ghi nội dung của trường.

Khi gửi biểu mẫu, sự kiện "gửi" xảy ra. Sau đó, trình xử lý JavaScript có thể gọi ngăn chặnDefault trong sự kiện này để dừng truyền dữ liệu. Các thành phần của biểu mẫu không cần phải được đặt trong thẻ.

Khi người dùng chọn một tập tin có ổ cứng Thông qua trường chọn tệp, giao diện FileReader sẽ cho phép chúng ta truy cập nội dung của tệp từ chương trình JavaScript.

Các đối tượng localStorage và sessionStorage có thể được sử dụng để lưu trữ thông tin theo cách có thể tồn tại khi tải lại trang. Cái đầu tiên lưu dữ liệu vĩnh viễn (hoặc cho đến khi người dùng xóa nó một cách cụ thể) và cái thứ hai – cho đến khi đóng trình duyệt.

Bài tậpJavaScript Workbench Tạo một giao diện cho phép bạn viết và thực thi các đoạn mã JavaScript.

Tạo một nút bên cạnh, khi được nhấp vào, hàm tạo Hàm từ Chương 10 sẽ gói văn bản đã nhập vào 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 của hàm thành một chuỗi và in nó sau trường văn bản.

trả lại "xin chào"; Đi thôi // Mã của bạn.

Tự động hoàn tất Hoàn thành trường văn bản để khi bạn nhập văn bản, danh sách các tùy chọn sẽ xuất hiện bên dưới trường văn bản đó. Bạn có một mảng những lựa chọn khả thi và bạn cần hiển thị những cái bắt đầu bằng văn bản đã nhập. Khi người dùng nhấp vào tùy chọn được đề xuất, nó sẽ thay đổi nội dung của trường thành tùy chọn đó.

// Xây dựng một mảng các tên biến toàn cục, // như "alert", "document" và "scrollTo" var terms = ; for (tên var trong cửa sổ) terms.push(name); // Ma cua ban.

Trò chơi cuộc sống của Conway Đây là một mô phỏng đơn giản về cuộc sống trên một lưới hình chữ nhật, mỗi phần tử trong đó còn sống hoặc không. Mỗi thế hệ (bước trò chơi) áp dụng các quy tắc sau:

Mọi tế bào sống có số lượng tế bào lân cận ít hơn hai hoặc nhiều hơn ba sẽ chết
- mọi tế bào sống có hai đến ba tế bào lân cận đều tồn tại cho đến bước tiếp theo
- mọi ô chết có chính xác ba ô lân cận sẽ sống lại

Hàng xóm của một ô là tất cả các ô liền kề với nó theo chiều ngang, chiều dọc và đường chéo, tổng cộng là 8 ô.

Xin lưu ý rằng các quy tắc áp dụng cho toàn bộ lưới cùng một lúc chứ không áp dụng cho từng ô lần lượt. Nghĩa là, số lượng hàng xóm được tính tại một thời điểm trước bước tiếp theo và những thay đổi xảy ra ở các ô lân cận không ảnh hưởng đến trạng thái mới của ô.

Triển khai trò chơi bằng cách sử dụng bất kỳ cấu trúc phù hợp nào. Sử dụng Math.random để tạo các quần thể ban đầu ngẫu nhiên. Hiển thị trường dưới dạng lưới các dấu kiểm bằng nút “chuyển sang bước tiếp theo”. Khi người dùng bật hoặc tắt các hộp kiểm, những thay đổi này phải được tính đến khi tính toán thế hệ tiếp theo.

Thế hệ tiếp theo // Mã của bạn.

Giống như nhiều nhà phát triển web, tôi dành nhiều thời gian để thử nghiệm giao diện người dùng các trang web tôi đang làm việc.

Tất nhiên, kiểm tra tự động là một trợ giúp hữu ích trong quá trình này, nhưng “điểm yếu” trong giao diện thường không thể xác định được bằng bất kỳ cách nào khác ngoài việc sử dụng trang web. Lặp đi lặp lại. Quá trình này có thể trở nên nhàm chán rất nhanh. Đặc biệt là điền các mẫu đơn.

Tôi đã gặp phải tình huống này vài tháng trước khi chúng tôi thêm Bảng Anh vào các loại tiền tệ được hỗ trợ khi thanh toán ở Wufoo.

Để xác minh, cần phải điền vào nhiều trường với tên, địa chỉ, số thẻ tín dụng và mọi thứ khác được ngụ ý trong quá trình tính toán. Tất nhiên, một phần quan trọng của dữ liệu này không nên được lặp lại:

Cuối cùng tôi đã tạo một bookmarklet cho điền nhanh biểu mẫu với dữ liệu thử nghiệm. (Bookmarklet là một chương trình JavaScript được thiết kế dưới dạng dấu trang trong trình duyệt, là sự kết hợp giữa từ tiếng Anh “bookmark” - dấu trang và “applet” - ứng dụng nhỏ. - Transl.)

Tôi chọn dạng bookmarklet vì:

dễ dàng truyền tải tới người dùng;
dễ dàng cập nhật mà không cần sự can thiệp của người dùng;
nó chạy trên mọi nền tảng mà không cần sửa đổi.

Bạn có thể dễ dàng tạo một bookmarklet bằng cách tạo một "bút" mới trên CodePen và đặt nội dung như thế này vào HTML:

Người dùng chỉ cần kéo liên kết kết quả vào khu vực dấu trang của trình duyệt của mình. Nhấp vào dấu trang sẽ chạy mã trên trang hiện tại.

Đối với dự án này, tôi đã dựa vào jQuery để làm cho mã dễ đọc và tương thích với nhiều trình duyệt nhất có thể. Nếu bất cứ ai cần một phiên bản JavaScript thuần túy, hãy gửi nhận xét cho tôi và tôi sẽ cố gắng tìm ra điều gì đó.

Để tạo dữ liệu ngẫu nhiên, tôi đã sử dụng thư viện Faker tuyệt vời. Việc triển khai JavaScript của nó có thể được tìm thấy ở đây.

Khái niệm cơ bản về Bookmarklet

Chúng ta có thể đặt tất cả mã trực tiếp vào liên kết. Nhưng tùy chọn này sẽ bất tiện khi đọc và bảo trì. Ngoài ra, tôi muốn có thể thực hiện các thay đổi đối với mã mà không buộc người dùng phải cập nhật dấu trang. Vì vậy tốt hơn hết bạn nên để lại một liên kết trong bookmarklet để tập tin bên ngoài.

Bản thân bookmarklet trông như thế này:

Dấu trang của tôi

Trong đó, chúng tôi tải tập lệnh vào phần nội dung của trang và thêm liên kết đến tệp JavaScript bên ngoài ở đó. Cần lưu ý rằng nếu bookmarklet được sử dụng để kiểm tra một trang được tải qua https thì tệp JS bên ngoài cũng phải được cung cấp qua https, nếu không trình duyệt sẽ đưa ra lỗi bảo mật.

Rất có thể khi phát triển một bookmarklet bạn sẽ muốn sử dụng Máy chủ cục bộ. Trong trường hợp này, hãy đảm bảo thay thế địa chỉ trong liên kết bằng địa chỉ của máy chủ thực khi bạn phân phối tập lệnh của mình.

Điền vào các trường

Bây giờ chúng ta đã hoàn thành việc đánh dấu trang tải tập lệnh của mình, chúng ta có thể chuyển sang chính tập lệnh đó.

Nhiệm vụ quan trọng nhất đối với chúng tôi là không phá vỡ bất kỳ điều gì trong trang mà tập lệnh của chúng tôi sẽ kiểm tra.

Vì vậy, chúng tôi sẽ gói nó trong một hàm ẩn danh tự chạy. Điều này sẽ giới hạn phạm vi chức năng và các biến của chúng tôi tương ứng:

Tôi thực sự thích chức năng tạo số giả ngẫu nhiên do Chris Coyler cung cấp trong bài viết này. Hãy sử dụng nó khi cần thiết:

var _Rand = function(min, max) ( return Math.floor(Math.random() * (max - min + 1)) + min; )

Bây giờ hãy tải xuống FakerJS. Vì tập lệnh của chúng tôi phụ thuộc vào jQuery nên chúng tôi có thể sử dụng cơ chế tải từng phần của nó bằng hàm $.getScript:

Giờ đây, chúng tôi đã được hứa quyền truy cập vào Faker, chúng tôi có thể sử dụng các phương pháp của nó để tạo ra nhiều tên, địa điểm, địa chỉ và dữ liệu thử nghiệm khác hợp lý.

Hàm tạo sau đây sẽ cung cấp cho chúng tôi khả năng sử dụng lại dữ liệu đã tạo:

var FormData = function(faker) ( this.faker = faker; this.randomWord = faker.Internet.domainWord(); this.username = "fake_" + this.randomWord; this.username += _rand(100.9999); // đặt giá trị này cho thông số mật khẩu của bạn this.password = "pass1234"; this.name = faker.Name.findName(); this.address1 = faker.streetAddress(); br_state_abbr(); this.zip = faker.Address.zipCode(); // Chris" số thẻ tín dụng thực tế this.cc = "4242 4242 4242 4242"; this.exp1 = _Rand(1,12); this.exp2 = _rand(14,22); this.cvv = _rand(100,999);

Bạn cũng nên kiểm tra các hộp kiểm và nút radio trên trang web của chúng tôi, chọn chúng theo thứ tự ngẫu nhiên. Để làm điều này, chúng ta sẽ phải mở rộng một chút chức năng của hàm tạo:

// Chọn ngẫu nhiên danh sách thả xuống FormData.prototype.randomizeSelect = function(el) ( var $el = $(el), len = $el.find("option").length - 1; $el.children("option") .prop("đã chọn", false) .eq(_rand(1,len + 1)) .prop("đã chọn", true ); // Chọn ngẫu nhiên nút radio FormData.prototype.randomizeRadio = function(radios) ( radios.not(""); var len = radios.length; radios .prop("checked", false) .eq(_rand(0, len - 1)).prop("đã kiểm tra", đúng); // Thêm một số văn bản lorem cho vùng văn bản FormData.prototype.randomizeParagraph = function(el) ( $(el).val(this.faker.Lorem.sentence(5)); ); // Chọn ngẫu nhiên tất cả các trường hộp kiểm FormData.prototype.randomizeCheckbox = function(el) ( var $el = $(el); $el.prop("checked", false); if (_Rand(0,1) === 0 ) ( $el.prop("đã kiểm tra", true); ) ); FormData.prototype.randomizeEmail = function(el) ( // nếu chúng ta muốn các email khác nhau cho tất cả các trường email, chúng ta có thể sửa đổi $(el).val("chriscoyier+" + this.randomWord + "@gmail.com"); );

Cuối cùng, chúng ta cần ánh xạ dữ liệu được tạo tới các trường khác nhau của biểu mẫu mà chúng ta đang kiểm tra. Chúng tôi sẽ trích xuất tất cả các trường biểu mẫu từ trang của chúng tôi và điền dữ liệu vào chúng theo loại và lớp CS S của chúng.

Ở dạng này, tập lệnh của chúng tôi thực hiện hoàn hảo việc tách biệt giữa cơ chế tạo dữ liệu và cơ chế sử dụng dữ liệu đó:

var fillForm = function() ( data = new FormData(window.Faker); $("#name").val(data.name); $("#username").val(data.username); $(" #cc").val(data.cc); $("#exp-1").val(data.exp1); $("#exp-2").val(data.exp2); $("# cvv").val(data.cvv); $("#address").val(data.address1); $("#city").val(data.city); $("#state").val (data.state); $("#zip").val(data.zip); $("#pw").val(data.password); $("#pw-repeat").val(data. mật khẩu); data.randomizeRadio($("")); // Chọn ngẫu nhiên tất cả các hộp chọn $("select").each(function() ( data.randomizeSelect(this); )); "input) Found = true; ) if (!found) ok = false; ) return ok; ) function test(input) ( if (!check(input, "1", "2", "3", "4" , "5", "6", "7", "8", "9", "0", "/", "-", " ")) ( cảnh báo("Đầu vào không ổn."); ) else ( Alert("Input ok!"); ) ) // --> Điện thoại: Hàm test() xác định ký tự nào đã nhập được coi là chính xác.

Cung cấp thông tin được nhập vào biểu mẫu

Có những lựa chọn nào để truyền đạt thông tin được nhập vào biểu mẫu? Cách đơn giản nhất là gửi dữ liệu biểu mẫu qua e-mail(chúng ta sẽ xem xét phương pháp này chi tiết hơn).
Nếu bạn muốn dữ liệu nhập vào biểu mẫu được máy chủ giám sát thì bạn phải sử dụng giao diện CGI (Common Gateway Interface). Cái sau cho phép bạn tự động xử lý dữ liệu. Ví dụ: máy chủ có thể tạo cơ sở dữ liệu thông tin mà một số máy khách có thể truy cập được. Một ví dụ khác là các trang tìm kiếm như Yahoo. Họ thường cung cấp một biểu mẫu cho phép bạn tạo truy vấn để tìm kiếm cơ sở dữ liệu của riêng bạn. Kết quả là người dùng sẽ nhận được phản hồi ngay sau khi nhấp vào nút tương ứng. Anh ta không phải đợi những người chịu trách nhiệm bảo trì máy chủ này đọc dữ liệu anh ta chỉ định và tìm thông tin được yêu cầu. Tất cả điều này được thực hiện tự động bởi chính máy chủ. JavaScript không cho phép bạn làm những việc như vậy.
Bạn sẽ không thể tạo sách đánh giá của người đọc bằng JavaScript vì JavaScript không thể ghi dữ liệu vào bất kỳ tệp nào trên máy chủ. Bạn chỉ có thể thực hiện việc này thông qua giao diện CGI. Tất nhiên, bạn có thể tạo một cuốn sách đánh giá để người dùng gửi thông tin qua email. Tuy nhiên, trong trường hợp này bạn phải nhập đánh giá theo cách thủ công. Điều này có thể được thực hiện nếu bạn không mong đợi nhận được 1000 đánh giá mỗi ngày.
Kịch bản tương ứng sẽ là trong văn bản thuần túy HTML. Và không cần lập trình JavaScript ở đây chút nào! Tất nhiên, ngoại trừ trường hợp bạn cần kiểm tra dữ liệu đã nhập vào biểu mẫu trước khi gửi - và ở đây bạn thực sự cần JavaScript. Tôi chỉ nên nói thêm rằng lệnh mailto không hoạt động ở mọi nơi - ví dụ: không có hỗ trợ nào cho lệnh này trong Microsoft Internet Explorer 3.0.

Bạn có thích trang này không?
Không có gì.
Một sự lãng phí thời gian.
Trang web tồi tệ nhất trên web. Tham số enctype="văn bản/đồng bằng"

được sử dụng để chỉ gửi văn bản đơn giản mà không có bất kỳ phần được mã hóa nào. Điều này làm cho những thư như vậy dễ đọc hơn nhiều.

Hàm xác thực() ( // kiểm tra xem đầu vào có ổn không // ... if (inputOK) return true else return false; ) ... ... Một biểu mẫu được biên dịch theo cách này sẽ không được gửi tới Internet nếu các mục nhập không chính xác dữ liệu đã tạo.

Lựa chọn yếu tố cụ thể các hình thức

Sử dụng phương thức focus() bạn có thể làm cho biểu mẫu của mình thân thiện hơn với người dùng. Vì vậy, bạn có thể chọn phần tử nào sẽ được đánh dấu đầu tiên. Hoặc bạn có thể yêu cầu trình duyệt đánh dấu biểu mẫu nơi dữ liệu được nhập không chính xác. Nghĩa là, chính trình duyệt sẽ đặt con trỏ lên thành phần biểu mẫu mà bạn chỉ định, để người dùng không cần phải nhấp vào biểu mẫu trước khi nhập bất cứ thứ gì vào đó. Bạn có thể thực hiện việc này bằng cách sử dụng đoạn tập lệnh sau:

Hàm setfocus() ( document.first.text1.focus(); )

Mephistophele, trong Faust của Goethe

Lĩnh vực

Biểu mẫu web bao gồm bất kỳ số lượng trường đầu vào nào được bao quanh bởi một thẻ. HTML cung cấp nhiều trường khác nhau, từ các hộp kiểm bật/tắt đơn giản đến danh sách thả xuống và trường nhập văn bản. Cuốn sách này sẽ không thảo luận chi tiết về tất cả các loại lĩnh vực nhưng chúng tôi sẽ cung cấp một cái nhìn tổng quan ngắn gọn về chúng.

Nhiều loại trường đầu vào sử dụng phần mở rộng . Thuộc tính type của nó được sử dụng để chọn kiểu của trường. Dưới đây là một số loại phổ biến:

văn bản mật khẩu trường văn bản một dòng giống như văn bản, nhưng ẩn hộp kiểm đầu vào bật/tắt chuyển đổi phần radio của trường với tệp nhiều lựa chọn cho phép người dùng chọn một tệp trên máy tính của mình

Các trường biểu mẫu không nhất thiết phải xuất hiện bên trong tệp . Chúng có thể được đặt ở bất cứ đâu trên trang. Thông tin từ các trường như vậy không thể được chuyển đến máy chủ (điều này chỉ có thể thực hiện được đối với toàn bộ biểu mẫu), nhưng khi chúng tôi tạo các trường mà JavaScript xử lý, chúng tôi thường không cần chuyển thông tin từ các trường thông qua gửi.

(văn bản) (mật khẩu) (hộp kiểm) (radio) (tệp)

Giao diện JavaScript cho các phần tử như vậy khác nhau tùy thuộc vào loại. Chúng ta sẽ xem xét từng cái một lát sau.

Các trường văn bản nhiều dòng có thẻ riêng. Thẻ phải có thẻ đóng và sử dụng văn bản bên trong các thẻ đó thay vì sử dụng thuộc tính value.

một hai ba

Và thẻ được sử dụng để tạo trường cho phép người dùng chọn một trong các tùy chọn đã cho.

Bánh xèo kem

Khi giá trị của một trường thay đổi, sự kiện “thay đổi” sẽ được kích hoạt.

Tập trung

Không giống như hầu hết các thành phần tài liệu HTML, các trường biểu mẫu có thể nhận tiêu điểm bằng bàn phím. Khi bạn nhấp vào hoặc chọn chúng, chúng sẽ hoạt động, tức là. máy thu chính của đầu vào bàn phím.

tài liệu .querySelector("input" ).focus(); bảng điều khiển .log(tài liệu .activeElement.tagName); // → Tài liệu INPUT .querySelector("input" ).blur(); bảng điều khiển .log(tài liệu .activeElement.tagName); // → CƠ THỂ

Một số trang yêu cầu người dùng bắt đầu làm việc ngay trên một trong các trường biểu mẫu. Bằng cách sử dụng JavaScript, chúng tôi có thể đặt tiêu điểm cho trường này khi tài liệu được tải, nhưng HTML cũng có thuộc tính tự động lấy nét giúp đạt được kết quả tương tự nhưng cho trình duyệt biết ý định của chúng tôi là gì. Trong trường hợp này, trình duyệt có thể ghi đè hành vi này trong những trường hợp thích hợp, chẳng hạn như khi người dùng đã di chuyển tiêu điểm đi nơi khác.

Các trình duyệt theo truyền thống cho phép người dùng di chuyển tiêu điểm bằng phím Tab. Chúng ta có thể tác động đến thứ tự điều hướng thông qua thuộc tính tabindex. Trong ví dụ này, tài liệu sẽ di chuyển tiêu điểm từ trường văn bản sang nút OK, thay vì đi qua liên kết trợ giúp trước tiên.

(trợ giúp) được rồi

Theo mặc định, hầu hết các loại phần tử HTML không nhận được tiêu điểm. Nhưng việc thêm tabindex vào một phần tử sẽ giúp phần tử đó có thể nhận được tiêu điểm.

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

Tất cả các trường có thể bị vô hiệu hóa bằng thuộc tính bị vô hiệu hóa, thuộc tính này cũng tồn tại dưới dạng thuộc tính của thành phần đối tượng DOM.

Tôi ổn, tôi kiệt sức rồi

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

Sự thể hiện tổng quát

Khi một trường được chứa trong một phần tử, phần tử DOM của nó sẽ có thuộc tính biểu mẫu tham chiếu đến biểu mẫu. Ngược lại, phần tử này có thuộc tính Elements chứa tập hợp các trường giống như mảng.

Tên: Mật khẩu: Đăng nhập var form = document .querySelector("form" ); bảng điều khiển .log(form.elements.type); // → bảng điều khiển mật khẩu .log(form.elements.password.type); // → bảng điều khiển mật khẩu .log(form.elements.name.form == form); // → đúng

Nút có thuộc tính loại bằng gửi sẽ gửi biểu mẫu khi được nhấp vào. Nhấn Enter bên trong trường biểu mẫu cũng có tác dụng tương tự.

Gửi biểu mẫu thường có nghĩa là trình duyệt điều hướng đến trang được chỉ định trong thuộc tính hành động của biểu mẫu, sử dụng yêu cầu GET hoặc POST. Nhưng trước đó, thuộc tính “submit” sẽ bị hủy. Nó có thể được xử lý bằng JavaScript và trình xử lý có thể ngăn chặn hành vi mặc định bằng cách gọi sự kiện PreventDefault trên đối tượng.

Giá trị: Lưu var form = document .querySelector("form" ); form.addEventListener("gửi", hàm (sự kiện) ( console .log("Đang lưu giá trị", form.elements.value.value); event.preventDefault(); ));

Trường văn bản

Các trường có thẻ và loại văn bản, mật khẩu cũng như thẻ có giao diện chung. Các phần tử DOM của chúng có thuộc tính giá trị chứa nội dung hiện tại dưới dạng chuỗi văn bản. Việc đặt thuộc tính này thành một giá trị sẽ thay đổi nội dung của trường.

Thuộc tính trường văn bản SelectionStart và SelectionEnd chứa thông tin về vị trí của con trỏ và vùng chọn văn bản. Khi không có gì được chọn, giá trị của chúng giống nhau và bằng vị trí con trỏ. Ví dụ: 0 biểu thị phần đầu của văn bản, 10 biểu thị con trỏ ở ký tự thứ 10. Khi một phần của trường được chọn, các thuộc tính có các giá trị khác nhau, cụ thể là phần đầu và phần cuối của văn bản đã chọn. Bạn cũng có thể nhập giá trị vào các trường này.

var textarea = document .querySelector("textarea" ); textarea.addEventListener("keydown" , function (event ) ( // Mã khóa cho F2 xảy ra là 113 if (event.keyCode == 113 ) ( thaySelection(textarea, "Khasekhemwy" ); event.preventDefault(); ) )); hàm thay thếSelection(field, word ) ( var from = field.selectionStart, to = field.selectionEnd; field.value = field.value.slice(0 , from ) + word + field.value.slice(to); // Đặt con trỏ sau từ field.selectionStart = field.selectionEnd = from + word.length );

Trong ví dụ sau, chúng ta thấy một 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.

độ dài: 0 var text = document .querySelector("input" ); var đầu ra = document .querySelector("#length" ); text.addEventListener("input", function () ( out.textContent = text.value.length; )); Dấu kiểm và nút radio

Hộp kiểm là một công tắc nhị phân đơn giản. Giá trị của nó có thể được truy xuất hoặc thay đổi thông qua thuộc tính đã chọn, chứa giá trị Boolean.

Tạo trang màu tím var hộp kiểm = document .querySelector("#purple" ); hộp kiểm.addEventListener("change" , function () ( document .body.style.background = hộp kiểm.checked ? "mediumpurple" : "" ; ));

Nút radio tương tự như dấu kiểm, nhưng nó được liên kết với các nút radio khác có cùng tên nên chỉ có thể chọn một trong số chúng.

Màu sắc: Tím Xanh lục Nút var = tài liệu .getElementsByName("color" ); hàm setColor(event) ( document .body.style.background = event.target.value; ) for (var i = 0 ; i< buttons.length; i++) buttons[i].addEventListener("change" , setColor);

Phương thức document.getElementsByName trả về tất cả các phần tử có thuộc tính tên đã cho. Ví dụ lặp qua chúng (thông qua vòng lặp for thông thường thay vì forEach, vì tập hợ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 đích đề cập đến phần tử đã kích hoạt sự kiện. Điều này hữu ích khi tạo trình xử lý sự kiện - trình xử lý của chúng tôi có thể được gọi bởi các phần tử khác nhau và nó phải có cách truy cập vào phần tử hiện tại đã gọi nó.

Chọn trường

Các trường chọn tương tự như các nút radio—chúng cũng cho phép bạn chọn từ nhiều tùy chọn. Nhưng nếu các nút radio cho phép chúng ta kiểm soát bố cục của các tùy chọn thì loại trường sẽ do trình duyệt xác định.

Bánh xèo kem

Trong hầu hết các trình duyệt, giao diện của trường sẽ khác với trường một lựa chọn, thường trông giống như một menu thả xuống.

Thuộc tính kích thước của thẻ được sử dụng để đặt số lượng tùy chọn hiển thị cùng một lúc - bằng cách này, bạn có thể tác động đến giao diện của phần bỏ học. Ví dụ: bằng cách chỉ định kích thước 3, bạn sẽ thấy ba dòng cùng một lúc, bất kể có nhiều tùy chọn hay không.

Mỗi thẻ có một ý nghĩa. Nó có thể được xác định bởi thuộc tính value, nhưng nếu nó không được chỉ định thì giá trị của thẻ được xác định bởi văn bản bên trong thẻ ... Thuộc tính giá trị của phần tử phản ánh tùy chọn hiện được chọn. Đối với trường có khả năng chọn một số tùy chọn, thuộc tính này không đặc biệt cần thiết vì nó sẽ chỉ chứa một trong một số tùy chọn đã chọn.

Ví dụ sau trích xuất các giá trị được chọn từ trường chọn và sử dụng chúng để tạo số nhị phân từ các bit. Nhấn Ctrl (hoặc Command trên máy Mac) để chọn nhiều giá trị cùng một lúc.

0001 0010 0100 1000 = 0 var select = document .querySelector("select" ); var đầu ra = document .querySelector("#output" ); select.addEventListener("change" , function () ( var number = 0 ; for (var i = 0 ; i< select.options.length; i++) { var option = select.options[i]; if (option.selected) number += Number (option.value); } output.textContent = number; }); Trường tệp

Trường tệp ban đầu được dùng để tải tệp lên từ máy tính thông qua một biểu mẫu. Trong các trình duyệt hiện đại, chúng cũng cho phép bạn đọc tệp từ JavaScript. Trường này hoạt động như một người bảo vệ cho các tập tin. Tập lệnh không thể đơn giản lấy và mở tệp từ máy tính của người dùng, nhưng nếu người dùng chọn tệp trong trường này, trình duyệt sẽ cho phép tập lệnh bắt đầu đọc tệp.

Trường tệp thường trông giống như một nút có nhãn giống như “Chọn tệp” với thông tin về tệp đã chọn bên cạnh.

function () ( if (input.files.length > 0 ) ( var file = input.files; console .log("Bạn đã chọn" , file.name); if (file.type) console .log("Nó có loại " , loại tệp); ) ));

Thuộc tính tệp của phần tử là một đối tượng giống mảng (không phải mảng thực) chứa danh sách các tệp đã chọn. Ban đầu nó trống rỗng. Phần tử này không có thuộc tính tệp đơn giản vì người dùng có thể chọn nhiều tệp cùng một lúc khi bật thuộc tính multiple.

var input = document .querySelector("input" ); input.addEventListener("change" , function () ( Array .prototype.forEach.call(input.files, function (file ) function () ( console .log("File" , file.name, "starts with" , reader .result.slice(0 , 20 )); reader.readAsText(file)); ));

Ví dụ này sử dụng Array.prototype.forEach để lặp qua mảng, vì trong một vòng lặp bình thường, sẽ bất tiện khi nhận các đối tượng tệp và trình đọc được yêu cầu từ trình xử lý sự kiện. Các biến sẽ chung cho tất cả các lần lặp của vòng lặp.

FileReaders cũng có sự kiện "lỗi" khi đọc tệp không thành công. Đối tượng lỗi sẽ được lưu trữ trong thuộc tính lỗi. Nếu bạn không muốn lo lắng về một sơ đồ không đồng bộ rắc rối khác, bạn có thể gói gọn nó trong một lời hứa (xem Chương 17):

function readFile (file ) ( return new Promise (function (thành công, thất bại) ( var reader = new FileReader(); reader.addEventListener("load" , function () ( thành công(reader.result); )); reader.addEventListener ("lỗi", hàm () ( failed(reader.error); )); reader.readAsText(file)); Lưu trữ dữ liệu phía khách hàng

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

LocalStorage.setItem("tên người dùng", "marijn"); console .log(localStorage.getItem("tên người dùng" )); // → marijn localStorage.removeItem("tên người dùng" );

Biến trong localStorage được lưu trữ cho đến khi nó bị ghi đè, xóa bằng cách sử dụng RemoveItem hoặc xóa bộ nhớ cục bộ của người dùng.

Các trình duyệt cũng giới hạn lượng dữ liệu mà chúng có thể lưu trữ, thường là vài megabyte. Hạn chế này, cùng với thực tế là việc làm tắc nghẽn ổ cứng của mọi người không mang lại lợi nhuận, giúp ngăn không cho dung lượng ổ đĩa bị ăn hết.

Đoạn mã sau thực hiện một chương trình ghi chú đơn giản. Nó lưu trữ các ghi chú như một đối tượng, liên kết các tiêu đề với nội dung. Nó được mã hóa bằng JSON và được lưu trữ trong localStorage. Người dùng có thể chọn một ghi chú thông qua trường và thay đổi văn bản của nó ở định dạng . Một mục được thêm bằng cách nhấp vào một nút.

Lưu ý: new var list = document .querySelector("#list" ); function addToList (name) ( var option = document .createElement("option" ); option.textContent = name; list.appendChild(option); ) // Lấy danh sách từ bộ nhớ cục bộ var note = JSON .parse(localStorage.getItem ("ghi chú")) || ("mua gì" : "" ); for (tên var trong ghi chú) if (notes.hasOwnProperty(name)) addToList(name); hàm saveToStorage () ( localStorage.setItem("notes" , JSON .stringify(notes)); ) var current = document .querySelector("#currentnote" ); current.value = ghi chú; list.addEventListener("thay đổi", function () ( current.value = ghi chú; )); current.addEventListener("change" , function () ( note = current.value; saveToStorage(); )); hàm addNote () ( var name = nhắc("Tên bản ghi" , "" ); if (!name) return ; if (!notes.hasOwnProperty(name)) ( ghi chú = "" ; addToList(name); saveToStorage() ; ) list.value = tên; current.value = ghi chú)

Khi dữ liệu trong ghi chú thay đổi (bản ghi mới được thêm vào hoặc bản ghi hiện tại thay đổi), hàm saveToStorage được gọi để cập nhật trường được lưu trữ. Nếu chúng tôi mong đợi rằng chúng tôi sẽ lưu trữ hàng nghìn bản ghi thì điều đó sẽ quá tốn kém và chúng tôi sẽ phải đưa ra một quy trình lưu trữ phức tạp hơn - ví dụ: một trường riêng cho mỗi bản ghi.

Điểm mấu chốt

HTML cung cấp nhiều loại trường biểu mẫu khác nhau - văn bản, hộp kiểm, câu hỏi trắc nghiệm, lựa chọn tệp.

Khi gửi biểu mẫu, sự kiện "gửi" xảy ra. Sau đó, trình xử lý JavaScript có thể gọi ngăn chặnDefault trong sự kiện này để dừng truyền dữ liệu. Các phần tử của biểu mẫu không cần phải được đặt trong .

Khi người dùng đã chọn một tệp từ ổ cứng thông qua trường chọn tệp, giao diện FileReader sẽ cho phép chúng ta truy cập nội dung của tệp từ chương trình JavaScript.

Bài tập Bàn làm việc JavaScript

Tạo một giao diện cho phép bạn viết và thực thi các đoạn mã JavaScript.

Tạo một nút bên cạnh , nút này khi được nhấn sẽ khiến hàm tạo Hàm từ Chương 10 bao bọc văn bản đã nhập 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 của hàm thành một chuỗi và in nó sau trường văn bản.

trả lại "xin chào"; Đi thôi // Mã của bạn. Tự động hoàn thành

Hoàn thành trường văn bản để khi bạn nhập văn bản, danh sách các tùy chọn sẽ xuất hiện bên dưới nó. Bạn có một loạt các tùy chọn khả thi và bạn cần hiển thị những tùy chọn bắt đầu bằng văn bản đã nhập. Khi người dùng nhấp vào tùy chọn được đề xuất, nó sẽ thay đổi nội dung của trường thành tùy chọn đó.

// Xây dựng một mảng các tên biến toàn cục, // như "alert", "document" và "scrollTo" var terms = ; for (tên var trong window ) terms.push(name); // Ma cua ban. Trò chơi cuộc sống của Conway

Đây là một mô phỏng đơn giản về cuộc sống trên một lưới hình chữ nhật, mỗi phần tử trong đó còn sống hoặc không. Mỗi thế hệ (bước trò chơi) áp dụng các quy tắc sau:

- mọi tế bào sống, số lượng tế bào lân cận ít hơn hai hoặc nhiều hơn ba, sẽ chết - mọi tế bào sống, có từ hai đến ba tế bào lân cận, sống cho đến lượt tiếp theo - mọi tế bào chết, có đúng ba tế bào lân cận, đi vào cuộc sống

Hàng xóm của một ô là tất cả các ô liền kề với nó theo chiều ngang, chiều dọc và đường chéo, tổng cộng là 8 ô.

Xin lưu ý rằng các quy tắc áp dụng cho toàn bộ lưới cùng một lúc chứ không áp dụng cho từng ô lần lượt. Nghĩa là, việc đếm số lượng ô lân cận xảy ra tại một thời điểm trước bước tiếp theo và những thay đổi xảy ra trên các ô lân cận không ảnh hưởng đến trạng thái mới của ô.

Thế hệ tiếp theo // Mã của bạn.