Đầu ra JavaScript
Khả năng hiển thị JavaScript
JavaScript có thể "hiển thị" dữ liệu theo những cách khác nhau:
- Viết vào một phần tử HTML, sử dụng
innerHTML
. - Viết vào đầu ra HTML bằng cách sử dụng
document.write()
. - Viết vào một hộp cảnh báo, sử dụng
window.alert()
. - Ghi vào bảng điều khiển của trình duyệt bằng cách sử dụng
console.log()
.
Sử dụng innerHTML
Để truy cập một phần tử HTML, JavaScript có thể sử dụng document.getElementById(id)
phương pháp này.
Thuộc id
tính xác định phần tử HTML. Thuộc innerHTML
tính xác định nội dung HTML:
Thí dụ
<!DOCTYPE html>
<html>
<body>
<h1>My First Web Page</h1>
<p>My First Paragraph</p>
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML = 5 + 6;
</script>
</body>
</html>
Thay đổi thuộc tính innerHTML của một phần tử HTML là một cách phổ biến để hiển thị dữ liệu trong HTML.
Sử dụng document.write ()
Đối với mục đích thử nghiệm, nó là thuận tiện để sử dụng document.write()
:
Thí dụ
<!DOCTYPE html>
<html>
<body>
<h1>My First Web Page</h1>
<p>My first paragraph.</p>
<script>
document.write(5 + 6);
</script>
</body>
</html>
Sử dụng document.write () sau khi tài liệu HTML được tải, sẽ xóa tất cả HTML hiện có :
Thí dụ
<!DOCTYPE html>
<html>
<body>
<h1>My First Web Page</h1>
<p>My first paragraph.</p>
<button type="button" onclick="document.write(5 + 6)">Try it</button>
</body>
</html>
Phương thức document.write () chỉ nên được sử dụng để thử nghiệm.
Sử dụng window.alert ()
Bạn có thể sử dụng hộp cảnh báo để hiển thị dữ liệu:
Thí dụ
<!DOCTYPE html>
<html>
<body>
<h1>My First Web Page</h1>
<p>My first paragraph.</p>
<script>
window.alert(5 + 6);
</script>
</body>
</html>
Bạn có thể bỏ qua window
từ khóa.
Trong JavaScript, đối tượng cửa sổ là đối tượng phạm vi toàn cục, có nghĩa là các biến, thuộc tính và phương thức theo mặc định thuộc về đối tượng cửa sổ. Điều này cũng có nghĩa là việc chỉ định window
từ khóa là tùy chọn:
Thí dụ
<!DOCTYPE html>
<html>
<body>
<h1>My First Web Page</h1>
<p>My first paragraph.</p>
<script>
alert(5 + 6);
</script>
</body>
</html>
Sử dụng console.log ()
Đối với mục đích gỡ lỗi, bạn có thể gọi console.log()
phương thức trong trình duyệt để hiển thị dữ liệu.
Bạn sẽ tìm hiểu thêm về cách gỡ lỗi trong chương sau.
Thí dụ
<!DOCTYPE html>
<html>
<body>
<script>
console.log(5 + 6);
</script>
</body>
</html>
JavaScript Print
JavaScript không có bất kỳ đối tượng in hoặc phương thức in nào.
Bạn không thể truy cập các thiết bị đầu ra từ JavaScript.
Ngoại lệ duy nhất là bạn có thể gọi window.print()
phương thức trong trình duyệt để in nội dung của cửa sổ hiện tại.
Thí dụ
<!DOCTYPE html>
<html>
<body>
<button onclick="window.print()">Print this page</button>
</body>
</html>