Trong bài này, chúng ta sẽ cùng tìm hiểu về vị trí của JavaScript trong file HTML.
1. Về thẻ <script>
Trong HTML, JavaScript code cần phải được chèn vào giữa cặp thẻ <script> và </script>.
Ví dụ:
<script>
document.getElementById("demo").innerHTML = "My First JavaScript";
</script>
Try it »Trong các ví dụ JavaScript cũ có sử dụng thuộc tính type: <script type=”text/javascript”>.
Thuộc tính type là không cần thiết. JavaScript là ngôn ngữ kịch bản mặc định trong HTML.
Functions và Events của JavaScript
– Một hàm JavaScript là một khối mã JavaScript, có thể được thực hiện khi nó “được gọi – called”.
– Ví dụ, một hàm có thể được gọi khi một sự kiện xảy ra, giống như khi người dùng click vào một nút.
Chúng ta sẽ cùng tìm hiểu thêm về các functions và events của JavaScript trong các bài viết tiếp theo.
2. Vị trí đặt code JavaScript trong file HTML
Việc đặt code JavaScript trong file HTML không hạn chế về số lượng và rất linh động, có thể đặt ở một trong các vị trí như sau:
- Giữa cặp thẻ <head>…</head>
- Giữa cặp thẻ <body>…</body>
- Hoặc đồng thời giữa cặp thẻ <head>…</head> và <body>…</body>
- Script trong file ngoại vi và sau đó được included vào giữa cặp thẻ <head> hoặc giữa cặp thẻ <body>
Việc đặt javascript code ở phần dưới cùng của thẻ <body> sẽ cải thiện tốc độ hiển thị, vì việc biên dịch javascript code sẽ làm chậm việc hiển thị nội dung của trang web.
JavaScript giữa cặp thẻ <head>…</head>
– Trong ví dụ này, một hàm JavaScript được đặt trong phần <head> của một trang HTML.
– Hàm được gọi (invoked/called) khi một nút được nhấn:
Ví dụ:
[code language=”javascript”]<!DOCTYPE html><html>
<head>
<script>
function myFunction() {
document.getElementById("demo").innerHTML = "Minh Hoàng Blog | www.minhhn.com";
}
</script>
</head>
<body>
<h2>JavaScript in Head</h2>
<p id="demo">Welcome to my blog!</p>
<button type="button" onclick="myFunction()">Try it</button>
</body>
</html>[/code]
Try it »
JavaScript giữa cặp thẻ <body>…</body>
– Trong ví dụ này, một hàm JavaScript được đặt trong phần <body> của một trang HTML.
– Hàm được gọi (invoked/called) khi một nút được nhấn:
Ví dụ:
[code language=”javascript”]<!DOCTYPE html><html>
<body>
<h2>JavaScript in Body</h2>
<p id="demo">Welcome to my blog!</p>
<button type="button" onclick="myFunction()">Try it</button>
<script>
function myFunction() {
document.getElementById("demo").innerHTML = "Minh Hoàng Blog | www.minhhn.com";
}
</script>
</body>
</html>[/code]
Try it »
External JavaScript
Các lệnh scripts cũng có thể được đặt trong các file bên ngoài:
External file: myScript.js
[code language=”javascript”]function myFunction() {document.getElementById("demo").innerHTML = "Minh Hoàng Blog | www.minhhn.com";
}[/code]
– Các scripts bên ngoài (external scripts) rất hay được sử dụng khi cùng một mã lệnh được sử dụng trong nhiều trang web khác nhau.
– Các file JavaScript có phần mở rộng là .js
– Để sử dụng tập lệnh bên ngoài (external script), bạn hãy đặt đường dẫn đến file script vào thuộc tính src (source) của thẻ <script>:
Ví dụ:
[code language=”javascript”]<script src="src/myScript.js"></script>[/code] Try it »– Bạn có thể đặt tham chiếu tập lệnh bên ngoài (external script reference) vào <head> hoặc <body> tùy thích.
– Khi đó các lệnh scrips trong file bên ngoài cũng sẽ hoạt động như thể nó đang được đặt vào chính xác vị trí của thẻ <script> vậy.
Lưu ý: Trong nội dung của file external script không được chứa các thẻ <script>.
Ưu điểm của file JavaScript bên ngoài (External JavaScript)
– Việc đặt các lệnh scripts vào tập tin bên ngoài (external files) có một số ưu điểm:
- Giúp tách biệt mã HTML và JavaScript.
- Làm cho mã HTML và JavaScript dễ đọc và bảo trì hơn.
- Các files JavaScript được lưu trong bộ nhớ cache có thể tăng tốc độ tải trang.
– Để thêm một vài file scripts bên ngoài vào cùng một trang HTML, bạn có thể thêm như sau:
Ví dụ:
[code language=”javascript”]<script src="myScript1.js"></script><script src="myScript2.js"></script>[/code]
Cách xác định đường dẫn tham chiếu của file JavaScript bên ngoài (External JavaScript)
| Đường dẫn của file | Giải thích |
| <script src=”myScript.js”></script> | myScript.js nằm trong cùng folder với trang hiện tại. |
| <script src=”js/myScript.js”></script> | myScript.js nằm trong folder js của thư mục hiện tại. |
| <script src=”/js/myScript.js”></script> | myScript.js nằm trong folder js ở gốc (root) của trang web hiện tại. |
| <script src=”../myScript.js”></script> | myScript.js nằm trong folder một cấp cao hơn (one level up) folder hiện tại. |
