Khi bạn làm việc với JavaScript (JS), việc hiển thị dữ liệu ra màn hình rất quan trọng để theo dõi quá trình thực thi và tương tác với người dùng. Trong bài viết này, chúng ta sẽ tìm hiểu cách hiển thị dữ liệu trong JS và các cách để xuất thông tin ra màn hình.
Đây là cách mà JavaScript hiển thị thông tin cho người dùng hoặc ghi ra trình duyệt web. Dưới đây là một số cách mà JavaScript có thể “hiển thị” dữ liệu:
- Sử dụng
innerHTMLđể ghi vào phần tử HTML: Bạn có thể sử dụng thuộc tínhinnerHTMLđể thay đổi nội dung của một phần tử HTML. Điều này cho phép bạn cập nhật nội dung của một phần tử HTML cụ thể trên trang web. - Sử dụng
document.write()để ghi vào đầu ra HTML: Hàmdocument.write()cho phép bạn ghi dữ liệu trực tiếp vào đầu ra HTML. Tuy nhiên, bạn nên sử dụng nó một cách cẩn thận, vì nó có thể ghi đè lên hoặc thay đổi nội dung của trang web. - Sử dụng hộp thông báo (alert box) bằng
window.alert(): Bạn có thể sử dụngwindow.alert()để hiển thị thông báo pop-up trên trình duyệt của người dùng. Điều này thường được sử dụng để thông báo cho người dùng về một sự kiện hoặc lỗi. - Sử dụng bảng điều khiển trình duyệt (browser console) bằng
console.log(): Hàmconsole.log()được sử dụng để ghi thông tin ra bảng điều khiển của trình duyệt. Điều này thường được sử dụng để ghi thông tin gỡ lỗi hoặc hiển thị dữ liệu ghi vào bảng điều khiển trong quá trình kiểm tra.
// Sử dụng innerHTML để ghi vào một phần tử HTML có id là "myElement"
document.getElementById("myElement").innerHTML = "Nội dung mới";
// Sử dụng document.write() để ghi vào đầu ra HTML
document.write("Hello, world!");
// Sử dụng alert box để hiển thị thông báo cho người dùng
window.alert("Thông báo quan trọng!");
// Sử dụng console.log() để ghi thông tin ra bảng điều khiển trình duyệt
console.log("Dữ liệu ghi vào bảng điều khiển");Mỗi cách hiển thị dữ liệu này có ứng dụng và trường hợp sử dụng riêng biệt trong phát triển ứng dụng JavaScript.
Sử dụng innerHTML để 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ụ:
<html>
<body>
<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à cách thông thường để hiển thị dữ liệu trong HTML. Trong ví dụ trên, code JavaScript sử dụng document.getElementById("demo").innerHTML để thay đổi nội dung của phần tử có id là “demo” và hiển thị kết quả 5 + 6 (11) trong phần tử đó.
Sử dụng document.write().
Vì mục đích kiểm tra, việc sử dụng document.write() là tiện lợi:
<html>
<body>
<script>
document.write(5 + 6);
</script>
</body>
</html>Kết quả.
11Sử dụng document.write() sau khi tài liệu HTML đã được tải sẽ xóa toàn bộ HTML hiện có.
Phương thức document.write() nên chỉ được sử dụng cho mục đích kiểm tra và gỡ lỗi. Trong các tình huống thực tế, nó không nên được sử dụng để cập nhật nội dung trang web, vì nó có thể xóa hoặc thay đổi HTML hiện có và gây ra các vấn đề không mong muốn. Thay vào đó, bạn nên sử dụng innerHTML hoặc các phương thức khác để thao tác và cập nhật nội dung của trang web.
<html>
<body>
<button type="button" onclick="document.write(5 + 6)">Try it</button>
</body>
</html>Kết quả khi nhấn nút Try it.
11Bạn có thể sử dụng thông báo (alert box) để hiển thị dữ liệu cho người dùng.
<html>
<body>
<script>
window.alert(5 + 6);
</script>
</body>
</html>Kết quả.
Sử dụng console.log().
Để gỡ lỗi và kiểm tra dữ liệu trong JavaScript, bạn có thể sử dụng phương thức console.log() trong trình duyệt để hiển thị thông tin trong bảng điều khiển trình duyệt.
<html>
<body>
<script>
console.log(5 + 6);
</script>
</body>
</html>Hãy bật F12 và vào console để xem output.
console.log() là một công cụ quan trọng cho việc gỡ lỗi và phân tích lỗi trong JavaScript. Bạn có thể sử dụng nó để in ra giá trị biến, kiểm tra quá trình thực thi của chương trình, và tìm hiểu về lỗi khi chúng xuất hiện.
JavaScript không thể sử dụng lệnh print.
Tuy nhiên, có một ngoại 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ổ trình duyệt hiện tại. Điều này cho phép người dùng in trang web hoặc tài liệu mà họ đang xem từ trình duyệt.
<html>
<body>
<button onclick="window.print()">Print this page</button>
</body>
</html>Kết quả.
