/codegym.vn/ - 46
9. Hiển thị dữ liệu
JavaScript có thể "hiển thị" dữ liệu theo nhiều cách khác nhau:
● Viết thành một phần tử HTML, sử dụng thuộc tính innerHTML.
● Viết vào đầu ra HTML sử dụng hàm document.write().
● Viết vào một hộp cảnh báo sử dụng hàm alert().
● Viết vào bảng điều khiển trình duyệt sử dụng hàm console.log().
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). Trong đó, id là thuộc tính giúp xác định thành phần
HTML mà chúng ta muốn truy cập. Thuộc tính innerHTML chính là nội dung bên trong
của thành phần HTML đó:
Ví dụ:
1. <p id
=
"demo"></p>
2. <script>
3. document
.
getElementById
(
"demo"
).
innerHTML
=
7
;
4. </script>
Kết quả: Nội dung của thẻ <p> với id là demo đã được thay đổi thành 7.
Sử dụng document.write()
Hàm document.write() thường được dùng để hiển thị dữ liệu bằng cách viết trực tiếp
ra tài liệu HTML.
Ví dụ:
1. <h2>My First Web Page</h2>
2. <p>My first paragraph.</p>
3. <button type
=
"button" onclick
=
"document
.
write
(
5
+
6
)
">Try it</button>
Sử dụng hàm alert()
Hàm alert() có nhiệm vụ in một thông báo popup, nó có một tham số truyền vào là nội
dung ta muốn thông báo với người dùng.
Ví dụ:
1. <h2>My First Web Page</h2>
2. <p>My first paragraph.</p>
3. <button type
=
"button" onclick
=
"alert
(
5
+
6
)
">Try it</button>
Sử dụng console.log()
Hàm console.log() được sử dụng thường xuyên trong việc tìm lỗi (debug). Hàm này
có nhiệm vụ hiển thị ra giá trị của tất cả các loại dữ liệu như number, integer, array,
object... ra cửa sổ console của trình duyệt.
Tùy thuộc vào các trình duyệt mà cách thức mở panel console của trình duyệt sẽ khác
nhau, nhưng thường thì chúng ta sử dụng phím F12.
Ví dụ:
