Trong bài viết này, chúng ta sẽ tìm hiểu về cách hiển thị và xuất dữ liệu trong JavaScript. Đây là những cách giúp chúng ta in thông báo, kết quả hoặc hiển thị dữ liệu ra màn hình một cách dễ dàng và thuận tiện.
Contents
Tại sao phải hiển thị dữ liệu?
Trong quá trình lập trình, có những tình huống mà chúng ta cần phải hiển thị dữ liệu hay xuất kết quả từ chương trình JavaScript của mình. Ví dụ như chúng ta muốn xem giá trị của biến hoặc viết thông báo lên màn hình console của trình duyệt để kiểm tra kết quả thực thi có đúng hay không.
Trong JavaScript, có nhiều cách khác nhau để tạo ra output, bao gồm:
- Ghi ra màn hình console của trình duyệt
- Hiển thị kết quả trong hộp thoại
- Viết đầu ra dưới dạng một phần tử HTML
- Và nhiều cách khác
Chúng ta sẽ tìm hiểu kỹ hơn về từng cách trong các phần tiếp theo.
1. In dữ liệu ngay trong Màn hình Console của trình duyệt
Bạn có thể dễ dàng xuất thông báo hoặc ghi dữ liệu vào màn hình console của trình duyệt bằng phương thức console.log()
. Đây là một phương pháp đơn giản nhưng rất mạnh mẽ để tạo ra output. Dưới đây là một ví dụ:
// In ra một đoạn text đơn giản
console.log("Xin chào JavaScript!");
// In ra giá trị của biến
var x = 10;
var y = 20;
var sum = x + y;
console.log(sum);
Mẹo: Để truy cập vào bảng điều khiển Console của trình duyệt, bạn có thể nhấn phím F12
và chọn tab Console
. Hoặc chuột phải + Inspect và chọn tab Console
. Hoặc bấm tổ hợp phím Ctrl + Shift + I
và chọn tab Console
.
2. Hiển thị dữ liệu thông qua hộp thoại bằng hàm Alert
Việc in một output ra màn hình console chỉ bạn hoặc một lập trình viên mới có thể thấy. Để người dùng nhìn thấy, bạn có thể sử dụng hộp thoại cảnh báo để hiển thị dữ liệu. Hộp thoại cảnh báo được tạo bằng phương thức alert()
. Dưới đây là một ví dụ:
// Hiển thị tin nhắn đơn giản
alert("Xin chào JavaScript!");
// Hiển thị giá trị của biến
var x = 10;
var y = 20;
var sum = x + y;
alert(sum);
3. Viết dữ liệu ra cửa sổ trình duyệt
Bạn có thể sử dụng phương thức document.write()
để ghi nội dung vào tài liệu hiện tại trong quá trình tải trang. Dưới đây là một ví dụ:
// Hiển thị tin nhắn đơn giản
document.write("Xin chào JavaScript!");
// Hiển thị giá trị của biến
var x = 10;
var y = 20;
var sum = x + y;
document.write(sum);
Lưu ý: Nếu bạn sử dụng phương thức document.write()
sau khi trang đã được tải, nó sẽ ghi đè lên toàn bộ nội dung hiện có trong tài liệu.
4. Chèn dữ liệu trong một phần tử HTML
Bạn cũng có thể viết hoặc in dữ liệu bằng cách sử dụng phần tử HTML thông qua thuộc tính innerHTML
. Tuy nhiên, trước khi in dữ liệu, chúng ta cần phải chỉ định phần tử đó bằng một phương thức như getElementById()
. Dưới đây là một ví dụ:
<p id="text1"></p>
<p id="text2"></p>
<script>
// Viết chuỗi văn bản vào phần tử HTML
document.getElementById("text1").innerHTML = "Xin chào thế giới!";
// Viết giá trị vào phần tử HTML
var x = 10;
var y = 20;
var sum = x + y;
document.getElementById("text2").innerHTML = sum;
</script>
Lưu ý: Phương pháp này sẽ thay thế toàn bộ nội dung hiện có trong phần tử HTML bằng dữ liệu đầu ra.
Tổng kết
Trong bài viết này, chúng ta đã tìm hiểu về 4 cách hiển thị dữ liệu trong JavaScript. Hiển thị dữ liệu ra màn hình giúp chúng ta biết, giúp người dùng nhìn thấy và trình bày nội dung một cách dễ dàng. Đây là những phương pháp quan trọng trong quá trình học JavaScript, giúp chúng ta kiểm tra kết quả và gỡ lỗi trong quá trình lập trình.
Nguồn: https://tenrenvietnam.com
Danh mục: Tài liệu chia sẻ