• Trang chủ
• Học JavaScript
• Tạo đầu ra trong JS

Tạo đầu ra trong JS

Trong hướng dẫn này, bạn sẽ học cách tạo kết quả đầu ra trong JavaScript.

Tạo đầu ra trong JavaScript

Có một số tình huống mà bạn có thể cần tạo đầu ra từ mã JavaScript của mình. Ví dụ: bạn có thể muốn xem giá trị của biến hoặc viết một thông báo tới bảng điều khiển trình duyệt để giúp bạn gỡ lỗi sự cố trong mã JavaScript đang chạy của mình, v.v.

Trong JavaScript, có một số cách khác nhau để tạo đầu ra bao gồm ghi đầu ra vào cửa sổ trình duyệt hoặc bảng điều khiển trình duyệt, hiển thị đầu ra trong hộp thoại, viết đầu ra vào phần tử HTML, v.v. Chúng ta sẽ xem xét kỹ hơn từng cách này trong phần sau phần.

Ghi đầu ra vào Bảng điều khiển trình duyệt

Bạn có thể dễ dàng xuất tin nhắn hoặc ghi dữ liệu vào bảng điều khiển trình duyệt bằng phương phápconsole.log() này. Đây là một phương pháp đơn giản nhưng rất hiệu quả để tạo đầu ra chi tiết. Đây là một ví dụ:

// Printing a simple text message
console.log("Hello World!"); // Prints: Hello World!

// Printing a variable value 
var x = 10;
var y = 20;
var sum = x + y;
console.log(sum); // Prints: 30

Hiển thị đầu ra trong hộp thoại cảnh báo

Bạn cũng có thể sử dụng các hộp thoại cảnh báo để hiển thị thông báo hoặc xuất dữ liệu cho người dùng. Một hộp thoại cảnh báo được tạo bằng phương pháp alert() này. Đây là một ví dụ:

// Displaying a simple text message
alert("Hello World!"); // Outputs: Hello World!

// Displaying a variable value 
var x = 10;
var y = 20;
var sum = x + y;
alert(sum); // Outputs: 30

Ghi đầu ra vào cửa sổ trình duyệt

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

// Printing a simple text message
document.write("Hello World!"); // Prints: Hello World!

// Printing a variable value 
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 document.write() method 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 đó. Kiểm tra ví dụ sau:

<h1>This is a heading</h1>
<p>This is a paragraph of text.</p>

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

Chèn đầu ra bên trong một phần tử HTML

Bạn cũng có thể viết hoặc chèn đầu ra bên trong phần tử HTML bằng cách sử dụng thuộc tính của phần tử innerHTML. Tuy nhiên, trước khi viết đầu ra, trước tiên chúng ta cần chọn phần tử bằng một phương thức như getElementById(), như được minh họa trong ví dụ sau:

<p id="greet"></p>
<p id="result"></p>

<script>
// Writing text string inside an element
document.getElementById("greet").innerHTML = "Hello World!";

// Writing a variable value inside an element
var x = 10;
var y = 20;
var sum = x + y;
document.getElementById("result").innerHTML = sum;
</script>

Bạn sẽ tìm hiểu chi tiết về thao tác phần tử HTML trong chương thao tác DOM JavaScript .