Phương pháp Hiển thị / Xuất dữ liệu trong Javascript

Trong bài hướng dẫn tự học lập trình Javascript này, bạn sẽ tìm hiểu cách hiển thị / xuất dữ liệu ra, cách in ra màn hình console, tạo thông báo hay in kết quả ra màn hình trong JavaScript...

Tại sao phải hiển thị dữ liệu?

Trong khi lập trình, có một số tình huống nhất định có thể cần phải hiển thị dữ liệu, xuất kết quả từ chương trình JavaScript của mình.

Ví dụ: Bạn có thể 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 để giúp kiểm tra kết quả thực thi có đúng hay chưa.

Trong JavaScript, có một số 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.v.

Chúng ta sẽ xem xét kỹ hơn từng cách trong các phần tiếp theo ngay đây.

Phương pháp Hiển thị / Xuất dữ liệu trong Javascript

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. Đây là một ví dụ:

// In ra một đoạn text đơn giản
console.log("Hello Javascript!"); // Hello Javascript!

// In ra giá trị của biến
var x = 10;
var y = 20;
var sum = x + y;
console.log(sum); // 30

Mẹo:

Để truy cập vào bảng điều khiển Console của trình duyệt. Bạn nhấn phím F12 và click vào tab Console. Hoặc Chuột phải + Inspect và click vào tab Console. Hoặc bấm tổ hợp phí Ctrl + Shift + I và bấm vào 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 thì 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 thì bạn có thể sử dụng hộp thoại cảnh báo cho việc hiển thị dữ liệu.

Một hộp thoại cảnh báo được tạo bằng phương thức alert(). Và đây là một ví dụ:

// Hiển thị tin nhắn đơn giản
alert("Hello Javascript!"); // Outputs: Hello Javascript!

// Hiển thị giá trị của biến
var x = 10;
var y = 20;
var sum = x + y;
alert(sum); // Outputs: 30

3. Viết dữ liệu ra cửa sổ trình duyệt

Bạn chỉ có thể sử dụng phương thức document.write() để ghi nội dung vào tài liệu document hiện tại trong khi tài liệu đó đang được phân tích. Đây là một ví dụ:

// Hiển thị tin nhắn đơn giản
document.write("Hello Javascript!"); // Prints: Hello Javascript!

// Hiển thị giá trị của biến
var x = 10;
var y = 20;
var sum = x + y;
document.write(sum); // Prints: 30

Nếu bạn sử dụng phương thức phương thức document.write() sau khi trang được tải, nó sẽ ghi đè lên tất cả nội dung hiện có trong tài liệu đó. Thử kiểm tra ví dụ sau:

<h1>Đây là một tiêu đề 1</h1>
<p>Đây là một đoạn Text.</p>

<button type="button" onclick="document.write('Hello Javascript!')">Click Me</button>

4. Chèn dữ liệu trong một phần tử HTML

Bạn cũng có thể viết hoặc in ra dữ liệu bằng cách sử dụng cách sử dụng kèm với phần tử HTML thông qua thuộc tính innerHTML.

Tuy nhiên, trước khi in ra 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(), như đã chứng minh trong ví dụ sau đây:

<p id="text1"></p>
<p id="text2"></p>

<script>
// Viết chuỗi văn bản bên trong phần tử HTML
document.getElementById("text1").innerHTML = "Hello World!";

// Viết ra giá trị bên trong 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 bên trong phần tử HTML đó bằng dữ liệu đầu ra.

Tổng kết

Qua bài viết này bạn đã biết 4 cách để hiển thị dữ liệu. Hiển thị dữ liệu ra để giúp bạn biết, hoặc để giúp người dùng nhìn thấy hay là chỉ đơn giản là trình bày nội dung.

Đây là một phương pháp quan trọng bởi vì trong suốt quá trình học Javascript chúng ta sẽ liên tục kiểm tra các kết quả, gỡ lỗi bằng cách xem chương trình tạo ra kết quả gì.