Đầu ra trong JavaScript

NỘI DUNG BÀI VIẾT

Khi lập trình, đôi khi chúng ta cần biết đầu ra của câu lệnh hoặc phép toán đó để xác nhận rằng chúng ta đang code đúng. Trong bài viết này, chúng ta sẽ tìm hiểu 4 cách để nhận và hiển thị đầu ra trong JavaScript, giống như chúng ta sử dụng các câu lệnh như printf() trong ngôn ngữ C, cout trong C++ hay System.out.print() trong Java,… như sau:

Sử dụng thuộc tính innerHTML
Sử dụng phương thức document.write()
Sử dụng hộp thoại cảnh báo
Sử dụng phương thức console.log()

Mình sẽ trình bày tất cả những điều này thông qua các ví dụ. Ngoài ra, đừng lo lắng nếu bạn không hiểu cú pháp của những câu lệnh này, mình sẽ trình bày chi tiết và hướng dẫn sử dụng trong các bài viết về chúng.

1. Thuộc tính innerHTML trong JavaScript

JavaScript cho phép bạn viết vào một phần tử HTML bằng cách sử dụng thuộc tính innerHTML. Chúng ta có thể thêm bất cứ thứ gì chúng ta muốn, nó có thể là một tin nhắn văn bản, một số phần tử HTML hoặc bất cứ thứ gì khác.

Để làm điều đó, trước tiên bạn cần cung cấp một id cụ thể cho phần tử HTML mà bạn muốn truy cập bằng mã JavaScript.

Để truy cập một phần tử HTML, JavaScript sử dụng phương thức document.getElementById(id), trong đó id là giá trị của thuộc tính id của thẻ HTML.

Hãy lấy một ví dụ, trong ví dụ này, thuộc tính id được sử dụng để xác định phần tử HTML và thuộc tính innerHTML được sử dụng để đặt nội dung cho nó.

<html>
<head>
<title>JavaScript Output using innerHTML</title>
<script>
function addText()
{
    document.getElementById("script").innerHTML= "This text has been written using the JavaScript.";
}
</script>
</head>
<body>
<p id="script">This is the old text.</p>
<button type="button" onclick="addText()">Click to use JavaScript</button>
</body>
</html>Code language: HTML, XML (xml)

Bằng cách này, nếu bạn đang viết mã JavaScript để thực hiện một số xử lý hoặc nếu bạn có bất kỳ logic nào, bạn có thể dễ dàng hiển thị đầu ra trong JavaScript một cách đơn giản ngay trên trang hiển thị HTML của mình.

2. Phương thức document.write() trong JavaScript

JavaScript cho phép bạn viết bất kỳ thông tin nào vào trang web HTML bằng cách sử dụng phương thức document.write(). Bằng cách sử dụng phương pháp này, bạn có thể ghi trực tiếp đầu ra trong JavaScript vào trang HTML.

Phương thức document.write() ghi các biểu thức HTML hoặc mã JavaScript vào một tài liệu.

Trong ví dụ dưới, mình sử dụng phương thức document.write() được sử dụng để ghi trực tiếp vào trang web.

<html>
<head>
<title>JavaScript Output using document.write()</title>
</head>
<body>
<script>
    document.write("This is the text written using JavaScript.") ;
</script>
</body>
</html>Code language: HTML, XML (xml)

3. Hộp thoại cảnh báo trong JavaScript

Có một số trang web cung cấp cho bạn thông báo cảnh báo khi bạn truy cập chúng hoặc khi bạn thực hiện một số hành động, bạn sẽ thấy thông báo đầu ra trong hộp cảnh báo. Bạn cũng có thể gửi thông báo cảnh báo trên chính trang web của mình để thông báo điều gì đó cho người dùng bằng JavaScript.

Để sử dụng tính năng bạn cần sử dụng window.alert(), bạn có thể bỏ đi tiền tố window và viết gọn lại thành alert(), JavaScript vẫn sẽ hiểu và thực hiện đúng theo cú pháp.

Trong ví dụ này, mình đang sử dụng hộp cảnh báo để viết tin nhắn và hiển thị cho người dùng.

<html>
<head>
<title>JavaScript Output using Alert Box</title>
</head>
<body>
<script>
    window.alert("This is an alert message.") ;
</script>
</body>
</html>Code language: HTML, XML (xml)

Tìm hiểu thêm về Alert trong JavaScript tại đây

4. Phương thức console.log trong JavaScript

JavaScript cũng cho phép bạn sử dụng Công cụ phát triển dành cho nhà phát triển trên trình duyệt (Console) để nhằm mục đích kiểm tra và gỡ lỗi. Câu lệnh được viết bên trong Console sẽ được thực thi nhưng sẽ không được hiển thị trong trình duyệt thay vào đó nó sẽ được hiển thị ngay ở Console luôn.

Cú pháp rất đơn giản là:

console.log(SOME-EXPRESSION-OR-STRING)

let a = 3;
console.log(a;) // 3

console.log("Hello World!"); // Hello World!Code language: JavaScript (javascript)

Để mở công cụ của nhà phát triển trong trình duyệt Chrome/Edge, nhấn F12 trong Windows và Command + Option + I trong MacOS. Hình ảnh dưới đây cho bạn thấy Console sẽ như thế nào.

Cùng thử ví dụ sau để ghi đầu ra trong JavaScript vào Console như thế nào nhé:

<html>
<head>
    <title>JavaScript console example</title>
    <script>
        console.log(2 + 3); // 5
    </script>
</head>
<body>
    <!-- HTML body -->
</body>
</html>Code language: HTML, XML (xml)

Kết luận

Qua đây, chúng ta đã học cách hiển thị đầu ra trong JavaScript tới giao diện người dùng theo nhiều cách khác nhau. Tất cả các ví dụ trên phần nào giúp bạn hiểu được cách thức các câu lệnh hoạt động cũng như sử dụng công cụ.

Cảm ơn bạn đã đọc!

Các bạn có thể tham khảo các bài viết hay về JavaScript tại đây.

Hãy tham gia nhóm Học lập trình để thảo luận thêm về các vấn đề cùng quan tâm.

TỔNG HỢP TÀI LIỆU HỌC LẬP TRÌNH CƠ BẢN CHO NGƯỜI MỚI BẮT ĐẦU
KHOÁ HỌC BOOTCAMP JAVA/PHP/.NET TRỞ THÀNH LẬP TRÌNH VIÊN TRONG 5-6 THÁNG

Đầu ra trong JavaScript