Hướng dẫn cách sử dụng các lệnh nhập, xuất thông tin trong JavaScript

Trong JavaScript, nhập (input) và xuất (output) thông tin là hai thao tác cơ bản giúp tương tác với người dùng. Dưới đây là hướng dẫn chi tiết về cách sử dụng các lệnh nhập, xuất thông tin trong JavaScript.

1. Xuất thông tin (Output) trong JavaScript

JavaScript cung cấp nhiều cách để hiển thị thông tin ra màn hình, bao gồm:

a) Sử dụng console.log() (Xuất ra bảng điều khiển - Console)

console.log("Xin chào JavaScript!");
let x = 10;
console.log("Giá trị của x là:", x);

  • Dùng để hiển thị thông tin trong tab Console của trình duyệt (F12 > Console).

  • Hữu ích trong việc kiểm tra và debug chương trình.

b) Sử dụng alert() (Hiển thị hộp thoại cảnh báo)

alert("Chào mừng bạn đến với JavaScript!");

  • Hiển thị một hộp thoại chứa thông báo.

  • Người dùng phải nhấn OK để tiếp tục.

c) Sử dụng document.write() (Ghi trực tiếp vào trang web)

document.write("<h2>Chào mừng bạn đến với JavaScript!</h2>");

  • Dùng để ghi nội dung trực tiếp lên trang HTML.

  • Thường dùng trong các ví dụ đơn giản hoặc thử nghiệm.

  • Không nên dùng trong các ứng dụng thực tế vì có thể ghi đè nội dung trang web.

d) Sử dụng innerHTML (Xuất nội dung vào phần tử HTML)

document.getElementById("output").innerHTML = "Nội dung được cập nhật bằng JavaScript!";

  • Dùng để cập nhật nội dung của một phần tử HTML có id cụ thể.

  • Phù hợp với các ứng dụng web động.

2. Nhập thông tin (Input) trong JavaScript

JavaScript cũng cung cấp nhiều cách để lấy thông tin từ người dùng:

a) Sử dụng prompt() (Nhập dữ liệu từ hộp thoại)

let name = prompt("Nhập tên của bạn:");
console.log("Tên của bạn là:", name);

  • Hiển thị hộp thoại cho phép người dùng nhập dữ liệu.

  • Giá trị nhập vào luôn là kiểu chuỗi (string).

b) Sử dụng confirm() (Hộp thoại xác nhận)

let isConfirmed = confirm("Bạn có chắc chắn muốn tiếp tục?");
if (isConfirmed) {
    console.log("Người dùng đã chọn OK");
} else {
    console.log("Người dùng đã chọn Cancel");
}

  • Hiển thị hộp thoại với hai nút "OK" và "Cancel".

  • Trả về giá trị true nếu chọn OK, và false nếu chọn Cancel.

c) Nhập thông tin từ các ô nhập (input) trên trang HTML

<input type="text" id="userInput" placeholder="Nhập nội dung...">
<button onclick="getValue()">Lấy giá trị</button>
<p id="display"></p>
<script>
function getValue() {
    let value = document.getElementById("userInput").value;
    document.getElementById("display").innerHTML = "Bạn đã nhập: " + value;
}
</script>

  • Lấy dữ liệu từ ô nhập (<input>) và hiển thị trên trang web.

  • Phù hợp với các biểu mẫu nhập liệu (form).

 

Ví dụ về sử dụng lệnh nhập xuất thông tin trong javaScript

Ví dụ 1: Viết đoạn code để vào giá trị cho 2 số a và  b sau đó tính tổng của hai số và in ra kết quả.

Code chương trình:

 

Ví dụ 2: Viết chương trình Thiết kế form nhập thông số a và số b, tính tổng hai số và in kết quả ra màn hình theo mẫu sau:

Code chương trình:

 

3. Kết luận

Việc nhập và xuất dữ liệu trong JavaScript giúp xây dựng các ứng dụng web có tính tương tác cao. Tùy vào mục đích sử dụng, bạn có thể chọn cách hiển thị hoặc lấy dữ liệu phù hợp để tối ưu trải nghiệm người dùng.

Xem bài học trên kênh 

BÀI TẬP THỰC HÀNH

Bài 1:Viết chương trình nhập vào giá trị của số a và số b từ bàn phím, sau đó tính giá trị của phép nhân a x b và in ra màn hình .

Bài 2:Viết chương trình tính diện tích của hình chữ nhật.

Bài 3: Viết chương trình tính chu vi và diện tích của hình tròn có bán kính là r.

Bài 4: Viết chương trình tính diện tích của hình tam giác khi biết chiều dài của ba cạnh theo công thức Herong.