Xin chào các bạn, trong bài học ngày hôm nay mình sẽ giới thiệu đến các bạn cách hiển thị dữ liệu ra màn hình trong JavaScript. Có 3 câu lệnh chính được sử dụng để in dữ liệu ra màn hình là alert, prompt, confirm. Bây giờ chúng ta sẽ đi vào chi tiết từng loại nhé.
Alert
Cú pháp:
|
1 |
alert(message); |
No sẽ hiển thị dữ liệu trên một cửa sổ nhỏ và tạm dừng thực thi mã lệnh khi người dùng nhấn “OK“.
Ví dụ:
|
1 |
alert("Hello"); |
kết quả:
Cửa sổ nhỏ chứa thông báo được gọi là cửa sổ phương thức. Từ “phương thức” 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ư nhấn các nút khác, v.v. cho đến khi họ xử lý cửa sổ. Trong trường hợp này – người dùng chỉ có thể thực hiện các thao tác khác cho đến khi họ nhấn “OK”.
Prompt
Hàm prompt nhận vào hai đối sô:
|
1 |
result = prompt(title[, default]); |
Nó sẽ hiển thị một cửa sổ phương thức với một đoạn tin nhắn, một trường đầu vào cho khách truy cập và các nút OK / CANCEL.
- title: Văn bản hiển thị cho người dùng truy cập.
- default: Đây là một tham số không bắt buộc, chứa giá trị ban đầu cho trường nhập.
Người dùng có thể nhập nội dung vào trường nhập và nhấn OK. Hoặc họ có thể hủy bỏ đầu vào bằng cách nhấn nút CANCEL hoặc nhấn phím Esc.
Hàm prompt sẽ trả về đoạn văn bản ở trong trường nhập hoặc null nếu đầu vào bị cancel.
Ví dụ:
|
1 2 3 |
var age = prompt('How old are you?', 100); alert(`You are ${age} years old!`); // You are 100 years old! |
kết quả:
Confirm
Cú pháp:
|
1 |
result = confirm(question); |
Hàm confirm sẽ hiển thị một cửa sổ phương thức với một câu hỏi và hai nút: OK và CANCEL.
Kết quả là đúng nếu OK được nhấn và sai nếu thực hiện các thao tác khác.
Ví dụ:
|
1 2 3 |
var isBoss = confirm("Are you the boss?"); alert( isBoss ); //trả về true nếu người dùng nhấn nút OK |
Kết quả:
document.write
Khi bạn sử dụng hàm document.write(), nội dung bạn muốn hiển thị sẽ nằm ở đúng vị trí được đặt trong trang web.
Ví dụ:
|
1 |
document.write("Chao mung ban den voi website thaygiaoquocdan.vn"); |
Kết quả:
document.getElementById().innerHTML
Câu lệnh này được sử dụng khi bạn muốn hiển thị một nội dung bên trong một phần tử nhất định.
Cú pháp:
|
1 |
document.getElementById("id phần tử").innerHTML = nội dung của bạn; |
Ví dụ:
|
1 2 3 |
<script> document.getElementById("1").innerHTML = "Chuc ban hoc tap vui ve!"; </script> |
Tổng kết
Như vậy trong bài ngày hôm nay chúng ta đã cùng nhau tìm hiểu về 3 cách hiển thị nội dung ra màn hình bao gồm:
- alert: hiển thị nội dung một đoạn text.
- prompt: hiển thị thông báo yêu cầu người dùng nhập vào dữ liệu. Nó trả về dữ liệu được nhận vào hoặc null nếu người dùng nhấn vào CANCEL hoặc Esc.
- confirm: hiển thị thông báo và đợi người dùng nhấn “OK” hoặc “CANCEL”. Nó trả về true nếu người dùng nhấn OK và false cho CANCEL / Esc.
Trong bài học tiếp theo mình sẽ giới thiệu đến các bạn toán tử điều kiện trong JavaScript.
Chúc các bạn học tập tốt!
