Hiển thị dữ liệu trong Javascript
JavaScript có thể “hiển thị” dữ liệu bằng nhiều cách khác nhau: Viết thành một phần tử HTML, sử dụng innerHTML. Ghi vào đầu ra HTML bằng cách sử dụng document.write (). Viết vào một hộp cảnh báo, sử dụng window.alert (). Viết vào giao diện điều ...
JavaScript có thể “hiển thị” dữ liệu bằng nhiều cách khác nhau:
- Viết thành một phần tử HTML, sử dụng innerHTML.
- Ghi vào đầu ra HTML bằng cách sử dụng document.write ().
- Viết vào một hộp cảnh báo, sử dụng window.alert ().
- Viết vào giao diện điều khiển của trình duyệt, sử dụng console.log ().
Sử dụng innerHTML
Để truy cập vào 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 định nghĩa nội dung HTML:
<!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>
Thay đổi thuộc tính innerHTML của một phần tử HTML là một cách phổ biến để hiển thị dữ liệu trong HTML.
Sử dụng document.write ()
Đối với các mục đích thử nghiệm, sử dụng document.write () khá thuận tiện:
<!DOCTYPE html>
<html>
<body><h1>My First Web Page</h1>
<p>My first paragraph.</p><script>
document.write(5 + 6);
</script></body>
</html>
Sử dụng document.write () sau khi một tài liệu HTML được tải đầy đủ, sẽ xóa tất cả HTML hiện có:
<!DOCTYPE html>
<html>
<body><h1>My First Web Page</h1>
<p>My first paragraph.</p><button onclick=”document.write(5 + 6)”>Try it</button>
</body>
</html>
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 một hộp cảnh báo để hiển thị dữ liệu:
<!DOCTYPE html>
<html>
<body><h1>My First Web Page</h1>
<p>My first paragraph.</p><script>
window.alert(5 + 6);
</script></body>
</html>
Sử dụng console.log()
Đối với mục đích gỡ lỗi, bạn có thể sử dụng phương pháp console.log () để hiển thị dữ liệu.
<!DOCTYPE html>
<html>
<body><script>
console.log(5 + 6);
</script></body>
</html>
- Học lập trình front-end cơ bản với bootstrap 4/html5/css3
- Học lập trình front-end nâng cao qua Project thực tế
- Học thiết kế web với Photoshop, CSS theo kiểu SASS
- Học cách sử dụng Git_hub cho lập trình viên
- Học lập trình Back-end PHP theo mô hình MVC cơ bản
- Học lập trình Back-end PHP theo mô hình MVC nâng cao
- Học lập trình Cơ sở dữ liệu với AngularJS
- Học lập trình theme wordpress. Làm ra mọi website hoàn chỉnh với wordpress
- Combo lập trình front-end từ cơ bản – nâng cao
- Combo lập trình back-end từ cơ bản đến nâng cao
- Combo lập trình web với word press từ A-Z
