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

Spread the love

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.

Có thể bạn quan tâm

    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.

    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. 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.

    More From Author