Chuyên mục Học nhanh Javascript cùng Minacode

Ví trí và các cách hiện thị dữ liệu ra ngoài trong Javascript - #2

Đăng bởi: Minacode|Cập nhật:15-01-2024

Ok anh em, Tiếp theo trong chủ đề học nhanh Javascript cùng Minacode. Bài viết này mình sẽ nói về các vị trí của đoạn mã Javascript trong trang và các cách để chúng ta hiện thị Javascipt ra ngoài nhé! Nào Let's go thôi.

Vị trí của mã Javascript

Thẻ <script>

Trong Html, mã JavaScript được chèn giữa các thẻ <script> và </script>.

<script>
document.getElementById("demo").innerHTML = "Xin chào Minacode";
</script>

Functions và Events trong JavaScript:

Function là một khối chứa mã JavaScript, chúng có thể được thực thi khi được "gọi".

Ví dụ: một hàm có thể được gọi khi một sự kiện(events) xảy ra, như khi người dùng nhấp vào nút(Sự kiện click) có id là demo như ví dụ ở trên. Chúng ta sẽ tìm hiểu các sự kiện trong các bài viết sau nhé!

Bạn có thể đặt bất kỳ mã Javascript nào bên trong tài liệu Html. Nó có thể trong thẻ <body> hoặc trong thẻ <head> của trang Html hoặc trong cả hai.

Ví dụ trong thẻ head: Hàm được gọi (được gọi) khi nhấp vào nút:

<!DOCTYPE html>
<html>
<head>
<script>
function myFunction() {
 document.getElementById("demo").innerHTML = "Minacode.";
}
</script>
</head>
<body>

<h2>JavaScript trong thẻ head</h2>

<p id="demo">Xin chào.</p>

<button type="button" onclick="myFunction()">nút</button>

</body>
</html>

Ví dụ trong thẻ body: Hàm được gọi (được gọi) khi nhấp vào nút:

<!DOCTYPE html>
<html>
<head>

</head>
<body>

<h2>JavaScript trong thẻ head</h2>

<p id="demo">Xin chào.</p>

<button type="button" onclick="myFunction()">nút</button>
<script>
function myFunction() {
 document.getElementById("demo").innerHTML = "Minacode.";
}
</script>
</body>
</html>

Tuy nhiên Việc đặt Javascipt ở cuối phần tử <body> sẽ cải thiện tốc độ hiển thị vì việc thực thi lệnh sẽ làm chậm quá trình tải và hiển thị nôi dung trang.

JavaScript đặt bên ngoài- External

Cũng áp dụng nội dung của ví dụ trên. Nhưng trường hợp này mình sẽ tạo một file myScript.js và đặt đoạn code vào trong đó:

function myFunction() {
 document.getElementById("demo").innerHTML = "Minacode.";
}

Sau đó mình sẽ dùng thuộc tính src của script để liên kết nó vào trang

<script src="myScript.js"></script>

Bạn có thể đặt đoạn code trên vào thẻ <head> hoặc <body> tùy thích.

Ưu điểm của JavaScript bên ngoài

Việc đặt Javascript bên ngoài có một số ưu điểm:

+ Nó tách biệt với Html
+ Nó làm cho code Html và JavaScript dễ đọc và dễ bảo trì hơn
+ Các file JavaScript được lưu trong bộ nhớ cache có thể tăng tốc độ tải trang

Để liên kết nhiều files Javascript chúng ta sử dụng nhiều thẻ script với src là đường dẫn của các files đó:

<script src="myScript1.js"></script>
<script src="myScript2.js"></script>

Các bạn tìm hiểu thêm bài viết:

Đường dẫn file trong Html

Output trong Javasript

Các cách hiển thị JavaScript. JavaScript có thể "hiển thị" dữ liệu theo nhiều cách khác nhau:

+ Hiển thị vào một phần tử Html, sử dụng innerHTML.
+ Hiển thị đầu ra Html bằng cách sử dụng document.write().
+ Hiển thị hộp cảnh báo, sử dụng window.alert().
+ Hiển thị vào bảng điều khiển của trình duyệt, sử dụng console.log().

Hiển thị vào một phần tử Html, sử dụng innerHTML.

<!DOCTYPE html>
<html>
<body>

<h2>Minacode</h2>

<p id="demo"></p>

<script>
document.getElementById("demo").innerHTML = "xin " + "chào";
</script>

</body>
</html>

Ta có:

Thay đổi thuộc tính InsideHTML của phần tử Html là cách phổ biến để hiển thị dữ liệu trong Html.

Hiển thị đầu ra Html bằng cách sử dụng document.write().

Đối với mục đích thử nghiệm, việc sử dụng document.write() sẽ rất thuận tiện.

<!DOCTYPE html>
<html>
<body>

<h2>Minacode</h2>


<script>
document.write("xin " + "chào");
</script>

</body>
</html>

Ta có kết quả tượng tự. Lưu ý: Khi các bạn dùng document.write() thì các phần tử Html sau khi load xong sẽ bị xóa đi để thay thế bằng nội dung của nó.

Hiển thị hộp cảnh báo, sử dụng window.alert().

Bạn có thể sử dụng hộp cảnh báo để hiển thị dữ liệu:

<!DOCTYPE html>
<html>
<body>

<h2>Minacode</h2>

<script>
window.alert("xin " + "chào");
</script>

</body>
</html>

Bạn có thể bỏ qua từ khóa window. Trong JavaScript, đối tượng window là đối tượng phạm vi toàn cục. Điều này có nghĩa là các biến, thuộc tính và phương thức theo mặc định thuộc về đối tượng window. Điều này cũng có nghĩa là việc chỉ định từ khóa này là tùy chọn:

<script>
alert("xin " + "chào");
</script>

Hiển thị vào bảng điều khiển của trình duyệt, sử dụng console.log().

Với mục đích gỡ lỗi, bạn có thể gọi phương thức console.log() trong trình duyệt để hiển thị dữ liệu.

<!DOCTYPE html>
<html>
<body>

<h2>MinaCode</h2>

<script>
console.log("xin " + "chào");
</script>

</body>
</html>

Lưu ý trong Javascrip không có phương thức print để hiện thị dữ liệu nhưng có thể dùng để in trang nhé!

Ví dụ:

<!DOCTYPE html>
<html>
<body>

<h2>Minacode|window.print()</h2>

<p>Phương thức print() dùng để in trang hiện tại.</p>

<button onclick="window.print()">Ấn để in trang này</button>

</body>
</html>

Ta có: