Javascript Output

16/06/2019

Bài sau » « Bài trước

Javascript có thể hiển thị kết quả bằng nhiều cách khác nhau:

  • In kết quả lên thẻ HTML, sử dụng innerHTML.
  • In trực tiếp trong file HTML document.write().
  • In trên hộp thư alert, sử dụng window.alert().
  • In trên console của trình duyệt, sử dụng console.log().

Sử dụng innerHTML

Để truy cập một phần tử HTML, JavaScript sử dụng phương thức document. getElementById(id).

Trong đó, id chính là thuộc tính id trong thẻ HTML. Thuộc tính innerHTML xác định nội dung bên trong thẻ HTML đó.

<!DOCTYPE html> <html> <body> <h3>Ví dụ sử dụng innerHTML </h3> <p>5 + 6 bằng mấy ?</p> <p id="demo"></p> <script> document.getElementById("demo").innerHTML = 5 + 6; </script> </body> </html>

Kết quả hiển thị như sau:

Ví dụ sử dụng innerHTML

5 + 6 bằng mấy ?

11

Thay đổi nội dung thẻ HTML bằng cách sử dụng innerHTML là cách phổ biến nhất.

Sử dụng document.write()

Để test kết quả hiển thị, thì document.write() là lựa chọn phù hợp.

<!DOCTYPE html> <html> <body> <h3>Ví dụ sử dụng document.write() </h3> <p>5 + 6 bằng mấy ?</p> <script> document.write(5 + 6); </script> </body> </html>

Ví dụ sử dụng document.write()

5 + 6 bằng mấy ?

11

Nếu gọi document.write() sau khi tải xong website. Nó sẽ ghi đè lên document. Nghĩa là tất cả nội dung của website bị xóa hết. Vì vậy, document.write() chỉ phù hợp cho việc test kết quả.

Sử dụng window.alert()

Bạn có thể sử dụng alert để hiển thị.

<!DOCTYPE html> <html> <body> <h3>Ví dụ sử dụng window.alert() </h3> <p>5 + 6 bằng mấy ?</p> <script> window.alert(5 + 6); </script> </body> </html>

Click vào để xem

Sử dụng console.log()

Để in kết quả và debug dữ liệu, ta có thể dùng console.log() của trình duyệt. Nhấn F12 hoặc click chuột phải trên trình duyệt > Chọn Kiểm tra (Inspec element) > Chọn đến Tab console.

<!DOCTYPE html> <html> <body> <h3>Ví dụ sử dụng console.log()</h3> <p>5 + 6 bằng mấy ?</p> <script> console.log(5 + 6); </script> </body> </html>

Bạn có thể viết code trực tiếp trong khung cửa sổ của tab console nhé. Xem hình ví dụ trên trình duyệt Chrome :

Javascript output


Bài hướng dẫn Javascript Output đến đây là kết thúc. Chúc các bạn thực hành thành công!

Bài sau » « Bài trước
Back to top