Cách xuất ra thông tin trong JavaScript

JavaScript không có bất kỳ một hàm in hay hiển thị có sẵn nào. Tuy nhiên, chúng ta vẫn có thể xuất ra thông tin bằng nhiều cách khác nhau.

Cách hiển thị

JavaScript có thể "hiển thị" dữ liệu bằng nhiều cách khác nhau:

• Viết vào một hộp thoại cảnh báo, sử dụng window.alert();
• Xuất vào trong đầu ra của HTML, sử dụng document.write();
• Viết vào thành phần HTML, sử dụng innerHTML;
• Viết vào giao diện điều khiển của trình duyệt, sử dụng console.log();

Dùng window.alert()

Bạn có thể dùng hộp cảnh báo để xuất thông tin ra:

Ví dụ

<h1>Tin Học Sóc Trăng</h1>
<p>Xin chào các bạn.</p>

<script>
window.alert("Tin Học Sóc Trăng xin chào các bạn.");
</script>

Xem kết quả »

Dùng document.write()

Dùng document.write() để xuất ra thông tin:

Ví dụ

<h1>Tin Học Sóc Trăng</h1>
<p>HTML Làm Toán.</p>

<script>
document.write("1 + 2 = " , 1 + 2);
</script>

Xem kết quả »

Dùng document.write() sau các phần tử HTML, khi đã tải xong đầy đủ, nó sẽ xóa tất cả những HTML hiện có:

Ví dụ

<h1>Tin Học Sóc Trăng</h1>
<p>HTML Làm Toán.</p>

<button onclick="document.write('1 + 2 = ',1 + 2)">Kết quả</button>

Xem kết quả »

Dùng innerHTML

Để truy cập một thành phần 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, innerHTML là thuộc tính xác định nội dung HTML:

Ví dụ

<h1>Tin Học Sóc Trăng</h1>
<p>HTML Làm Toán.</p>
<p id="ketqua">Nhấn nút Kết quả để xem đáp án</p>
<button onclick="document.getElementById('ketqua').innerHTML = '1 + 2 = 3'">Kết quả</button>

Xem kết quả »

	Để "hiển thị dữ liệu" trong HTML, (trong hầu hết các trường hợp), bạn sẽ thiết lập giá trị của một thuộc tính innerHTML.

Dùng console.log()

Trong trình duyệt của bạn, bạn có thể sử dụng phương thức console.log() để hiển thị dữ liệu.
Để kích hoạt giao diện điều khiển của trình duyệt, bạn nhấn F12, và chọn "console".

Ví dụ

<h1>Tin Học Sóc Trăng</h1>
<p>HTML Làm Toán.</p>
<P>Vào console của trình duyệt để xem kết quả</p>

<script>
console.log("1 + 2 = ",3);
</script>

Xem kết quả »