[Tự học Javascript] Tương tác với alert, prompt, confirm trong Javascript

Chúng ta sẽ sử dụng các trình duyệt như môi trường demo của chúng ta, chúng ta hãy xem một vài hàm tương tác với người sử dụng: alert, promptvà confirm.

1. alert

Cái này chúng ta đã thấy rồi. Nó hiển thị một thông báo và chờ người dùng nhấn nút OK OK.

Ví dụ:

alert("Hello");

Cửa sổ nhỏ với thông điệp được gọi là cửa sổ phương thức(modal window). Từ Modal có nghĩa là khách truy cập không thể tương tác với phần còn lại của trang, nhấn các nút khác, v.v., cho đến khi họ xử lý được cửa sổ. Trong trường hợp này – cho đến khi họ nhấn vào OK.

2. Lời nhắc(prompt)

Hàm promptchấp nhận hai đối số:

result = prompt(title, [default]);

Nó hiển thị một cửa sổ phương thức với một văn bản tin nhắn, trường nhập cho khách truy cập và các nút OK / Cancel.title Các văn bản để hiển thị cho khách truy cập. default Một tham số thứ hai tùy chọn, giá trị ban đầu cho trường nhập vào.

Dấu ngoặc vuông trong cú pháp [...]

Dấu ngoặc vuông xung quanh defaulttrong cú pháp trên biểu thị rằng tham số là tùy chọn, không bắt buộc.

Khách truy cập có thể nhập nội dung nào đó vào trường nhập nhanh chóng và nhấn OK. Sau đó, chúng ta nhận được văn bản đó trong result. Hoặc họ có thể hủy bỏ đầu vào bằng cách nhấn Hủy hoặc nhấn phím Esc, sau đó chúng ta nhận nulllàm result.

Gọi prompt để trả về văn bản hoặc nullnếu đầu vào bị hủy.

Ví dụ:

let age = prompt('How old are you?', 100);

alert(`You are ${age} years old!`); // You are 100 years old!

Trong IE: luôn cung cấp một default

Tham số thứ hai là tùy chọn, nhưng nếu chúng tôi không cung cấp, Internet Explorer sẽ chèn văn bản "undefined"vào nơi nhập văn bản.

Chạy code này trong Internet Explorer để xem:

let test = prompt("Test");

Vì vậy, để các prompt có vẻ tốt trong IE, chúng ta khuyên bạn luôn luôn cung cấp đối số thứ hai:

let test = prompt("Test", ''); // <-- for IE

3. Xác nhận(confirm)

Cú pháp:

result = confirm(question);

Chức năng confirmhiển thị một cửa sổ phương thức với một questionvà hai nút: OK và Cancel.

Kết quả là truenếu OK được nhấn và falsenếu không.

Ví dụ:

let isBoss = confirm("Are you the boss?");

alert( isBoss ); // true if OK is pressed

4. Tóm lược

Chúng ta có 3 hàm dành riêng cho trình duyệt để tương tác với khách truy cập:alert hiển thị một tin nhắn. prompt hiển thị một thông báo yêu cầu người dùng nhập văn bản. Nó trả về văn bản hoặc, nếu nút Cancel hoặc Esc được bấm sẽ trả null. confirm hiển thị một thông báo và chờ người dùng nhấn vào OK hoặc Hủy. Nó trả về true nếu nhấn OK và falsecho Hủy / Esc.

Tất cả các hàm này là phương thức: chúng tạm dừng thực thi tập lệnh và không cho phép khách truy cập tương tác với phần còn lại của trang cho đến khi cửa sổ bị loại bỏ.

Có hai hạn chế được chia sẻ bởi tất cả các phương pháp trên:

1. Vị trí chính xác của cửa sổ phương thức được xác định bởi trình duyệt. Thông thường, nó ở trung tâm.
2. Giao diện chính xác của cửa sổ cũng phụ thuộc vào trình duyệt. Chúng ta không thể sửa đổi nó.

Đó là cái giá cho sự đơn giản. Có nhiều cách khác để hiển thị các cửa sổ đẹp hơn và tương tác phong phú hơn với khách truy cập.