Trong bài hướng dẫntự học lập trình Javascriptnày, bạn sẽ tìm hiểu cách hiển thị / xuấtdữ 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ìnhtrong JavaScript…
Đang xem: Nhập dữ liệu từ bàn phím 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ấtkế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úpkiể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ệungay 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ệtbằ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ảnconsole.log(“Hello Javascript!”); // Hello Javascript!// In ra giá trị của biếnvar 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ôngqua hộp thoại bằng hàm Alert
Việc in một Outputra 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.
Xem thêm: Bán Acc Liên Quân Giá Rẻ Vn
Để 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ảnalert(“Hello Javascript!”); // Outputs: Hello Javascript!// Hiển thị giá trị của biếnvar x = 10;var y = 20;var sum = x + y;alert(sum); // Outputs: 30
3. Viếtdữ 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 documenthiệ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ảndocument.write(“Hello Javascript!”); // Prints: Hello Javascript!// Hiển thị giá trị của biếnvar 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:
Đây là một tiêu đề 1Đây là một đoạn Text.
Click Me
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ệubằng cáchsử dụng cách sử dụng kèm với phần tử HTML thông quathuộ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ứcnhư getElementById(), như đã chứng minh trong ví dụ sau đây:
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ì.
Ý kiến học viên
Kiến thức học tại NIIT – ICT Hà Nội giúp mình có lợi thế rất lớn đối với công việc Marketing tại VTC Mobile mà hiện tại mình theo đuổi. Chúc NIIT – ICT Hà Nội ngày càng phát triển ^^.
Xem thêm: Top 10 Kem Dưỡng Ẩm Body Nào Tốt Nhất Hiện Nay, +8 Kem Dưỡng Ẩm Body Tốt Nhất 2021: Hiệu Quả
Trần Ngọc Quỳnh – Marketing – VTC Mobile
Mình thấy rằng chất lượng đào tạo luôn được NIIT – ICT Hà Nội coi trọng. Cái mình học được ở đây là cách suy nghĩ như một lập trình viên, áp dụng CNTT để làm việc mình yêu thích.
Nguyễn Thành Luân – Graphics Designer tại Reface Studio
Quãng thời gian học tại NIIT – ICT Hà Nội đã giúp mình trưởng thành rất nhiều. Hiện tại nghiệp code cũng khá là suôn sẻ. Chúc các em khóa sau học thật tốt nhé!
