Categories JavaScript

Vị trí đặt của JavaScript

JavaScript có thể được đặt trong khu vực của thẻ <body> và thẻ <head> trong tài liệu HTML.


Thẻ <script>

Trong HTML, các đoạn mã JavaScript phải được chèn vào trong thẻ mở <script> và thẻ đóng </script>.

Ví dụ:

<script>
document.getElementById("demo").innerHTML = "Đoạn mã JavaScript đầu tiên của tôi";
</script>

Các ví dụ cũ có thể sử dụng thuộc tính type

<script type="text/javascript">

Thuộc tính type không phải là yêu cầu bắt buộc. JavaScript là ngôn ngữ scripting mặc định trong HTML.


Các hàm JavaScript và sự kiện

Một hàm (function) JavaScript là một khối mã JavaScript, có thể được thực thi khi được “gọi” / call đến.

Ví dụ, một hàm có thể được thực thi khi một sự kiện (event) có mặt, thí dụ như khi người dùng click vào nút bấm (button).

Bạn sẽ được học nhiều hơn về các hàm và sự kiện trong các bài khác trên Kiến càng.


JavaScript trong phần <head> hoặc <body>

Bạn có thể chèn các đoạn mã vô số lần trong tài liệu HTML.

Các đoạn mã có thể chèn trong phần <body> hoặc trong phần <head> của trang HTML, hay cả hai cũng được.

Mẹo: Giữ tất cả các đoạn code ở một khu vực thôi là thói quen tốt cho bạn.


JavaScript trong khu vực <head>

Trong ví dụ này, một hàm JavaScript trong khu vực <head> của trang HTML.

Hàm được gọi khi nút nhấn được click:

Ví dụ:

<!DOCTYPE html>
<html>
<head>
<script>
function myFunction() {
document.getElementById("demo").innerHTML = "Thay đổi văn bản.";
}
</script>
</head>

<body>

<h1>Trang web của tôi</h1>

<p id="demo">Một đoạn văn bản bất kỳ</p>

<button type="button" onclick="myFunction()">Bạn nhấn thử xem</button>

</body>
</html>

JavaScript trong khu vực <body>

Trong ví dụ này, một hàm JavaScript nằm trong khu vực <body> của trang HTML.

Hàm sẽ được gọi khi khi nút nhấn được click:

Ví dụ

<!DOCTYPE html>
<html>
<body>
<h1>Trang web của tôi</h1>

<p id="demo">Một đoạn văn bản bất kỳ</p>

<button type="button" onclick="myFunction()">Bạn nhấn thử xem</button>

<script>
function myFunction() {
document.getElementById("demo").innerHTML = "Văn bản được thay đổi.";
}
</script>

</body>
</html>

Sẽ là một ý tưởng tốt để đặt các đoạn mã ở cuối phần tử <body> (tức là ngày trên thẻ đóng </body>). Điều đó giúp cải thiện tốc độ tải trang, bởi vì để các đoạn mã lên trước có thể làm chậm quá trình hiển thị.


JavaScript bên ngoài

Các đoạn mã script cũng có thể được đặt ở file bên ngoài (giống kiểu file CSS):

Bạn viết các đoạn mã và lưu nó lại thành file: 

myScript.jsfunction myFunction() {
document.getElementById("demo").innerHTML = "Thay đổi nội dung văn bản";
}

Các đoạn mã bên ngoài rất hữu ích khi bạn cần sử dụng một đoạn code nhiều lần ở nhiều trang khác nhau.

File JavaScript có đuôi mở rộng là .js

Để sử dụng các đoạn mã ngoài, bạn đưa tên của file vào trong thuộc tính src của thẻ <script>:

Ví dụ:

<!DOCTYPE html>
<html>
<body>
<script src="myScript.js"></script>
</body>
</html>

Bạn có thể thêm các đoạn mã bên ngoài trong khu vực <head> hoặc <body> nếu bạn thích.

Các kịch bản sẽ thực thi như thể nó đã được đặt chính xác nơi các thẻ <script> nằm.

Lưu ý là các đoạn mã lưu ngoài không thể chứa thẻ <script> (nó không cần thẻ này trong file .js)


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

Các file JavaScript lưu ngoài có một số lợi ích sau:

  • Nó phân định rõ ràng HTML và code;
  • Nó làm cho HTML và JavaScript dễ đọc và bảo trì;
  • Các file JavaScript được lưu đệm (cache trình duyệt) có thể đẩy nhanh tốc độ tải trang;

Nếu bạn muốn thêm nhiều file JS vào trang đơn giản là thêm các thẻ script mới:

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

Các file JS ngoài có thể thêm vào trang thông qua 2 cách:

  • URL đầy đủ của nó, ví dụ:
<script
 src="https://code.jquery.com/jquery-3.6.0.min.js"
></script>

Điều này rất hay áp dụng với JS của bên thứ ba (tức là không nằm trên hosting của bạn).

  • URL dạng rút gọn, ví dụ:
<script src="js/myfile.js"
></script>

Cái này rất thường xuyên áp dụng nếu file JS nằm trên hosting của bạn, và bạn chỉ phải chỉ đường dẫn tương đối của nó cho đỡ mất thời gian.

Back to Top