1. Khả năng hiển thị dữ liệu của JavaScript

Js có thể hiển thị dữ liệu theo nhiều cách khác nhau. Nhưng đôi khi trong việc lập trình ta cần biết đầu ra của câu lệnh hoặc phép toán đó để xác nhận rằng việc ta đang làm là đúng hay code ta vẫn đang đúng. Cũng như một số ngôn ngữ lập trình phổ biến như C thì có printf() , System.out.print() trong Java, echo trong PHP,… thì trong Js ta cũng có 4 cách để nhận và hiển thị đầu ra là:

  • Viết vào một thành phần HTML sử dụng thuộc tính innerHTML
  • Viết vào trong đầu ra HTML sử dụng phương thức document.write()
  • Viết vào trong một hộp thoại cảnh báo, dùng window.alert()
  • Viết vào trong console(bảng điều khiển) trình duyệt , dùng phương thức console.log()

2. Thuộc tính innerHTML trong JavaScript

Js cho phép ta viết vào một phần tử HTML bằng cách sử dụng innerHTML. Ta có thể thêm bất cứ gì mà ta muốn như một tin nhắn, một số phần tử HTML,… Để thực hiện được điều đó trước hết thì ta cần cung cấp một id cụ thể cho phần tử HTML mà muốn dùng để truy cập mã Js.

Ví dụ:

<!DOCTYPE html>
<html>
<head>
<script>
function myFunction() {
  document.getElementById("demo").innerHTML = "Đoạn đã thay đổi.";
}
</script>
</head>
<body>
<h2>Demo JavaScript trong Head</h2>
<p id="demo">Một đoạn văn</p>
<button type="button" onclick="myFunction()">Try it</button>
</body>
</html>

Đây chính là một ví dụ ở bài trước mà có thể các bạn có chỗ không hiểu. Ví dụ như câu lệnh document.getElementById(“demo”).innerHTML thì ở đây demo chính là tên id được sử dụng và thuộc tính innerHTML được sử dụng để đặt nội dung cho nó. Để truy cập một phần tử HTML, JavaScript sử dụng phương thức document.getElementById(id), trong đó id là giá trị của thuộc tính id của thẻ HTML. Bằng cách này khi mà ta viết mã Js để thực hiện một số xử lý hay những logic của chính chúng ta thì ta có thể hiển thị đầu ra trong Js một cách đơn giản ngay trên trang hiển thị HTML. Thay đổi thuộc tính innerHTML của một phần tử HTML cũng là một cách phổ biến để hiển thị dữ liệu trong HTML.

3. Phương thức document.write() trong JavaScript

JavaScript cho phép bạn viết bất kỳ thông tin nào vào trang web HTML bằng cách sử dụng phương thức document.write(). Bằng cách sử dụng phương pháp này, bạn có thể ghi trực tiếp đầu ra trong JavaScript vào trang HTML. Hay hiểu theo một cách khác là phương thức document.write() ghi các biểu thức HTML hoặc mã JavaScript vào một tài liệu. Tuy nhiên phương thức này dành cho việc thử nghiệm là chủ yếu vì nó rất là thuận tiện.

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>
document.write(5 + 6);
</script>
</body>
</html>

Lưu ý

Tại sao mình lại nói là nó hay được sử dụng cho việc thử nghiệm? Bởi vì dùng phương thức document.write() sau khi tài liệu HTML đã được tải, sẽ xóa toàn bộ những HTML đang tồn tại. Vì vậy mà nên lưu ý nhé! Mà mình nghĩ là tốt nhất phương thức document.write() chỉ nên được sử dụng để thử nghiệm.

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>
<button type="button" onclick="document.write(5 + 6)">Try it</button>
</body>
</html>

4. Hộp thoại cảnh báo trong JavaScript

Như mà bạn đã sử dụng web thì một số trang đã sử dụng việc hiển thị một cảnh báo khi bạn thao tác, hành động gì đó(đăng xuất, xóa comment,…). Việc hiển thị ra hộp cảnh báo này chính là nhờ JS. Ở đây chính là việc sử dụng window.alert(). Ta có thể bỏ đi window và viết gọn lại thành alert(), JS vẫn sẽ hiểu và thực hiện đúng theo cú pháp. Vì trong Js, window là đối tượng mang 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 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ụ:

  • Sử dụng đầu đủ câu lệnh:
<!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(5 + 6);
</script>
</body>
</html>
  • Sử dụng mà không có từ khóa window:
<!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>
alert(5 + 6);
</script>
</body>
</html>

5. Phương thức console.log trong JavaScript

JavaScript cũng cho phép bạn sử dụng Công cụ phát triển dành cho nhà phát triển trên trình duyệt (Console) để nhằm mục đích kiểm tra và gỡ lỗi. Câu lệnh được viết bên trong Console sẽ được thực thi nhưng sẽ không được hiển thị trong trình duyệt thay vào đó nó sẽ được hiển thị ngay ở Console luôn.

Các bạn sẽ được tìm hiểu rõ hơn trong các bài học sau nhé!

<!DOCTYPE html>
<html>
<body>
<script>
console.log(5 + 6);
</script>
</body>
</html>

6. Phương thức Print trong JavaScript

Js sẽ không có bất kỳ đối tượng hay phương thức in ra nào. Ta cũng không thể kết nối những thiết bị đầu ra từ Js. Nhưng có một trường hợp ngoại lệ là khi 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()">In ra trang này</button>
</body>
</html>