Hiển thị, xuất dữ liệu sau khi xử lý rất quan trọng phải không? Chúng ta cùng xem JavaScript có các hàm nào hỗ trợ công việc này nhé.
Các khả năng “hiển thị” của JavaScript
JavaScript có khả năng “hiển thị” dữ liệu theo các cách sau:
- Hiển thị hộp thoại thông báo, sử dụng
window.alert(). - Viết vào đầu ra của HTML, sử dụng
document.write(). - Viết vào bên trong một phần tử HTML, sử dụng
innerHTML. - Viết vào giao diện trình duyệt điều khiển, sử dụng
console.log().
Sử dụng window.alert()
Bạn có thể sử dụng hộp thoại window.alert() để hiển thị dữ liệu.
Ví dụ:
<!DOCTYPE html>
<html>
<body><h1>Trang web đầu tiên của tôi</h1>
<p>Đoạn đầu tiên của tôi.</p><script>
window.alert(8 + 7);
</script>
</body>
</html>Sử dụng document.write()
Cho mục đích kiểm tra, thật tiện lợi để sử dụng hàm document.write().
Ví dụ:
<!DOCTYPE html>
<html>
<body><h1>Trang web đầu tiên của tôi</h1>
<p>Văn bản đầu tiên của tôi.</p><script>
document.write(8 + 7);
</script>
</body>
</html>Khi bạn sử dụng document.write() sau khi tài liệu HTML được tải xong hoàn toàn, nó sẽ xoá tất cả tài liệu HTML đã tồn tại trước đó.
Ví dụ:
<!DOCTYPE html>
<html>
<body><h1>Trang web đầu tiên của tôi</h1>
<p>Văn bản đầu tiên của tôi.</p><button onclick="document.write(7 + 8)">Click vào đây</button>
</body>
</html>Phương thức document.write() chỉ nên dùng cho mục đích kiểm tra.
Sử dụng innerHTML
Để “truy cập” vào một phần tử HTML, JavaScript có thể sử dụng phương thức document.getElementById(id)
Thuộc tính id định nghĩa một phần tử HTML. Thuộc tính innerHTML định nghĩa nội dung của HTML:
Ví dụ
<!DOCTYPE html>
<html>
<body><h1>Trang web đầu tiên của tôi</h1>
<p>Văn bản đầu tiên của tôi</p><p id="demo"></p><script>
document.getElementById("demo").innerHTML = 7 + 8;
</script>
</body>
</html>Để “hiển thị dữ liệu” trong HTML (trong hầu hết trường hợp), bạn sẽ thiết lập giá trị cho thuộc tính innerHTML.
Sử dụng console.log()
Trong trình duyệt của bạn, bạn có thể sử dụng phương thức consolo.log() để hiển thị dữ liệu.
Kích hoạt tính năng consolo của trình duyệt với phím F12, và lựa chọn “Consolo” trong menu.
Ví dụ
<!DOCTYPE html>
<html>
<body><h1>Trang web đầu tiên của tôi</h1>
<p>Đoạn văn bản đầu tiên của tôi.</p><script>
console.log(7 + 8);
</script>
</body>
</html>