* Hiển thị dữ liệu trong JavaScript
Để hiển thị dữ liệu trong JavaScript ta có nhiều cách khác nhau như:
- Xuất dữ liệu / nội dung trong trong 1 thẻ của HTML, sử dụng innerHTML.
- Xuất dữ liệu / nội dung trong HTML, sử dụng cú pháp document.write(); .
- Xuất dữ liệu / nội dung bằng 1 cửa sổ thông báo trên trình duyệt, sử dụng với cú pháp window.alert(); .
- Xuất dữ liệu/ nội dung trong giao diện điều khiển của trình duyệt (F12), với cú pháp console.log(); .
1. Hàm innerHTML.
Để truy cập vào một phần tử của HTML, ta sử dụng câu lệnh trong JavaScript:
id : là thuộc tính định nghĩa trong phần tử của HTML.
innerHTML : thuộc tính định nghĩa thành phần nội dung trong HTML.
2. Hàm document.write() .
Khác với mục đich của innerHTML, document.write() sẽ dụng cho mục đích để kiểm tra.
3. Hàm window.alert(); .
Với hàm này sẽ cho ta 1 hộp thông báo trên màn hình.
4. Hàm console.log(); .
Khác mục đích các hàm trên, hàm console.log(); được sử dụng với mục đích để kiểm tra lỗi trên giao diện điều khiển trình duyệt (F12) với các coder.
Lưu ý: Khai báo hiện thị, xuất dữ liệu với các hàm trên
- Nếu hàm là kiểu chuỗi - "string" thì ta sẽ để trong ngoặc kép hoặc nháy đơn.
- Nếu muốn dùng ký tự đặc biệt để hiện thị bạn cần đặt '\' trước dấu đó.
Để hiển thị dữ liệu trong JavaScript ta có nhiều cách khác nhau như:
- Xuất dữ liệu / nội dung trong trong 1 thẻ của HTML, sử dụng innerHTML.
- Xuất dữ liệu / nội dung trong HTML, sử dụng cú pháp document.write(); .
- Xuất dữ liệu / nội dung bằng 1 cửa sổ thông báo trên trình duyệt, sử dụng với cú pháp window.alert(); .
- Xuất dữ liệu/ nội dung trong giao diện điều khiển của trình duyệt (F12), với cú pháp console.log(); .
Để truy cập vào một phần tử của HTML, ta sử dụng câu lệnh trong JavaScript:
Cú pháp
document.getElementById("id").innerHTML
trong đó:id : là thuộc tính định nghĩa trong phần tử của HTML.
innerHTML : thuộc tính định nghĩa thành phần nội dung trong HTML.
Ví dụ - Sử dụng thuộc tính innerHTML
<!DOCTYPE html>
<html>
<head>
<title>JavaScript Output - Xuất dữu liệu trong JavaScript</title>
</head>
<body>
<p id="test"></p>
<script>
document.getElementById("test").innerHTML = "Zero Coder - Learn Js Free";
</script>
</body>
</html>
Kết Quả xuất hiện màn hình
Zero Coders - Learn Js FreeVới thuộc tính này sẽ làm thay đổi một thành tử trong HTML. Đây cũng là cách phổ biến để xuất dữ liệu từ JavaScript.
2. Hàm document.write() .
Khác với mục đich của innerHTML, document.write() sẽ dụng cho mục đích để kiểm tra.
Ví dụ - sử dụng thuộc tính document.write()
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Hàm document.write() trong Js</title>
</head>
<body>
<h1>Hello, Zero Coders</h1>
<p>These series are about basic JavaScript</p>
<script>document.write("JavaScript Output here.");</script>
</body>
</html>
Bạn cần phải lưu ý khi sử dụng hàm document.write(); . Nếu các phần tử trang đã được hiện thi xong mà lệnh document.write() mới thực hiện thì nó sẽ ghi đè lên tất cả các phần tử.
Ví dụ: Xóa nội dung trên web khi hàm document.write() load sau.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Hàm document.write(); trong JavaScript </title>
</head>
<body>
<h1>Hướng dẫn học JavaScript cơ bản</h1>
<button onclick="document.write("Everything is changed")">Click here</button>
</body>
</html>
Ta cũng có thể dùng chuỗi các phần tử HTML trong hàm.
Ví dụ
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Hàm document.write(); trong JavaScript </title>
</head>
<body>
<script> document.write("Hướng dẫn học JavaScript Cơ bản");</script>
</body>
</html>
3. Hàm window.alert(); .
Với hàm này sẽ cho ta 1 hộp thông báo trên màn hình.
Ví dụ
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Hàm window.alert() trong JavScript</title>
</head>
<body>
<script>
window.alert("Khóa học JavaScript cơ bản");
</script>
</body>
</html>
hoặc dùng hàm alert();
Ví dụ
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Hàm window.alert() trong JavScript</title>
</head>
<body>
<script>
alert("Khóa học JavaScript cơ bản");
</script>
</body>
</html>
4. Hàm console.log(); .
Khác mục đích các hàm trên, hàm console.log(); được sử dụng với mục đích để kiểm tra lỗi trên giao diện điều khiển trình duyệt (F12) với các coder.
Ví dụ: Hàm console.log()
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Hàm console.log() trong JavScript</title>
</head>
<body>
<script>
var myWeb ={name:'Zero Coders', author:'Mr No Name', ad: 2};
console.log(myWeb.name, myWeb.author);
</script>
</body>
</html>
Lưu ý: Khai báo hiện thị, xuất dữ liệu với các hàm trên
- Nếu hàm là kiểu chuỗi - "string" thì ta sẽ để trong ngoặc kép hoặc nháy đơn.
- Nếu muốn dùng ký tự đặc biệt để hiện thị bạn cần đặt '\' trước dấu đó.
Ví dụ: Lỗi khi viết nội dung hiện thị trong JavaScript
<script>
document.write("Zero Coders"); // Đúng
document.write('Zero Coders'); //Đúng
document.write('Zero Coders - "JavaScript"'); //Đúng
document.write("Zero Coders - 'JavaScript'"); //Đúng
document.write("Zero Coders - "JavaScript""); //Sai
document.write("Zero Coders - \"JavaScript\""); //Đúng
document.write('Zero Coders - 'JavaScript''); //Sai
document.write('Zero Coders - \'JavaScript\''); //Đúng
document.write('Zero Coders"); //Sai
document.write(123); // Đúng
document.write('123'); //Đúng
</script>