Đầu ra JavaScript
Khả năng hiển thị JavaScript
JavaScript có thể "hiển thị" dữ liệu theo nhiều 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 hộp cảnh báo, sử dụng
window.alert()
. - Viết vào bảng điều khiển trình duyệt, sử dụng
console.log()
.
Sử dụng HTML bên trong
Để truy cập một phần tử HTML, JavaScript có thể sử dụng phương thức document.getElementById(id)
.
Thuộc tính id
xác định phần tử HTML. Thuộc tính innerHTML
xác định nội dung HTML:
Ví 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>
Hãy tự mình thử »Thay đổi thuộc tính InsideHTML của phần tử HTML là 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, sẽ rất thuận tiện khi sử dụng document.write()
:
Ví dụ
<!DOCTYPE html>
<html>
<body>
<h1>My First Web Page</h1>
<p>My first paragraph.</p>
<script>
document.write(5 + 6);
</script>
</body>
</html>
Hãy tự mình thử »Việc 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ó :
Ví 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>
Hãy tự mình thử »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:
Ví dụ
<!DOCTYPE html>
<html>
<body>
<h1>My First Web Page</h1>
<p>My first paragraph.</p>
<script>
window.alert(5 + 6);
</script>
</body>
</html>
Hãy tự mình thử » Bạn có thể bỏ qua từ khóa window
.
Trong JavaScript, đối tượng window là đối tượng phạm vi toàn cục. Điều này 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 window. Điều này cũng có nghĩa là việc chỉ định từ khóa window
là tùy chọn:
Ví dụ
<!DOCTYPE html>
<html>
<body>
<h1>My First Web Page</h1>
<p>My first paragraph.</p>
<script>
alert(5 + 6);
</script>
</body>
</html>
Hãy tự mình thử »Sử dụng console.log()
Với mục đích gỡ lỗi, bạn có thể gọi phương thức console.log()
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.
Ví dụ
<!DOCTYPE html>
<html>
<body>
<script>
console.log(5 + 6);
</script>
</body>
</html>
Hãy tự mình thử »In JavaScript
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 phương thức window.print()
trong trình duyệt để in nội dung của cửa sổ hiện tại.
Ví dụ
<!DOCTYPE html>
<html>
<body>
<button onclick="window.print()">Print this page</button>
</body>
</html>
Hãy tự mình thử »