JavaScript

Vị trí của JavaScript trong file HTML

Vị trí của JavaScript trong file HTML
Được viết bởi Minh Hoàng

Series lập trình JavaScript, ngôn ngữ lập trình linh động, thực thi phía client.

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>
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ụ:
<!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>
Try it »
JavaScript giữa cặp thẻ <body>...</body>
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ụ:
<!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>
Try it »
External JavaScript
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
function myFunction() {
    document.getElementById("demo").innerHTML = "Minh Hoàng Blog | www.minhhn.com";
}

– 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ụ:
<script src="src/myScript.js"></script>
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ụ:
<script src="myScript1.js"></script>
<script src="myScript2.js"></script>

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.

Tham khảo w3schools.

Cảm ơn bạn đã theo dõi. Đừng ngần ngại hãy cùng thảo luận với chúng tôi!


Giới thiệu

Minh Hoàng

Xin chào, tôi là Hoàng Ngọc Minh, hiện đang làm BrSE, tại công ty Toyota, Nhật Bản. Những gì tôi viết trên blog này là những trải nghiệm thực tế tôi đã đúc rút ra được trong cuộc sống, quá trình học tập và làm việc. Các bài viết được biên tập một cách chi tiết, linh hoạt để giúp người đọc có thể tiếp cận một cách dễ dàng nhất. Hi vọng nó sẽ có ích hoặc mang lại một góc nhìn khác cho bạn[...]

Bình luận của bạn

avatar

Vị trí của JavaScript trong file HTML

by Minh Hoàng Time to read: 6 min
0