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ẻ <script> và </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 JavaScript là một khối mã JavaScript, có thể được thực thi khi được “gọi” đến.

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

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 của 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>. Điều đó giúp cải thiện khả năng 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):

Tôi viết các đoạn mã và lưu nó lại thành file: myScript.js

function 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, đư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 có thể đẩy nhanh tốc độ tải trang

Leave a Comment