NTM Solutions

Thứ Bảy, 18 tháng 9, 2021

KHÓA HỌC JAVASCRIPT- BÀI 03: Xuất dữ liệu

Mục lục học JavaScript

Để xuất dữ liệu trong JavaScript ta có 05 cách sau đây:

1.innerHTML

Gắn dữ liệu vào 01 thẻ có id tương ứng.

Ví dụ:

<!DOCTYPE html>

<html>

<head>

<title>Tự học JavaScript</title>

<script>

function myFunction(){

document.getElementById("demo").innerHTML = "Chụt chụt chụt JavaScript!!!";

}

</script>

</head>

<body>

<h1 id="demo"></h1>

<button type="button" onclick="myFunction()">Bấm vào đây!!!</button>

</body>

</html>

2.document.write()

Chú ý: nếu dùng document.write() sau khi đã tải xong toàn bộ tài liệu HTML=>tất cả phần HTML sẽ bị xóa =>chỉ nên dùng phương thức này trong quá trình kiểm tra mã.

Ví dụ:

dùng lại ví dụ trên nhưng thay đoạn mã:

document.getElementById("demo").innerHTML = "Xin chào JavaScript!!!";

bằng đoạn mã:

document.write("<h1>Xin chào JavaScript!!!</h1>");


3.window.alert()

Hiển thị dữ liệu trong 01 hộp thoại.

Chú ý: ta có thể bỏ từ khóa window cũng được vì trong JavaScript, đối tượng window là đối tượng có phạm vi toàn cục global. Có nghĩa là các biến, phương thức, thuộc tính đều mặc định thuộc về đối tượng window=> từ khóa window dùng hay không là tùy ý.


Ví dụ:

dùng lại ví dụ trên nhưng thay đoạn mã:

document.write("<h1>Xin chào JavaScript!!!</h1>");

bằng đoạn mã:

window.alert("Xin chào JavaScript!!!");

hoặc:

alert("Xin chào JavaScript!!!");


4.console.log()

Công cụ console này nếu trong Microsoft Edge dùng phím Ctrl+Shift+i (trong menu là chọn mục Công cụ dành cho Nhà phát triểnTool for Developers) mới thấy được kết quả xuất ra.

Ví dụ:

thay đoạn mã:

window.alert("Xin chào JavaScript!!!");

bằng đoạn mã:

console.log("Xin chào JavaScript!!!");


5.window.print()

In nội dung toàn trang web.


Ví dụ:

<!DOCTYPE html>

<html>

<head>

<title>Tự học JavaScript</title>

</head>



<body>

<h1 id="demo">Nội dung cần in ra!!!</h1>

<button type="button" onclick="window.print()">In ra</button>

</body>

</html>


Nếu vẫn chưa rõ các bạn xem thêm video clip sau:


By #drM

Nguồn w3schools

Mục lục học JavaScript

Không có nhận xét nào:

Đăng nhận xét

Facebook Youtube RSS