Vị trí JavaScript trong tài liệu HTML

152
Vị trí JavaScript trong tài liệu HTML

Code JavaScript có thể bố trí linh động ở bất cứ đâu trong một tài liệu HTML. Tuy nhiên, mức độ ưu tiên là:

  • Script trong khu vực <head>…</head>
  • Script trong khu vực <body>…</body>
  • Script trong khu vực <body>…</body> và <head>…</head>.
  • Script ở file ngoài và sau đó được khai báo trong khu vực <head>…</head>

JavaScript trong khu vực <head>…</head>

Nếu bạn muốn có một script chạy trên một số sự kiện, như khi người sử dụng nhấp chuột vào nơi nào đó, thì khi đó bạn sẽ đặt script đó trong head như sau:

<html>
<head>
<script type="text/javascript">
<!--
function sayHello() {
alert("Hello World")
}
//-->
</script>
</head>

<body>
<input type="button" onclick="sayHello()" value="Say Hello" />
</body>
</html>

Kết quả:

Vị trí JavaScript trong tài liệu HTML - 01

JavaScript trong khu vực <body>…</body>

Nếu bạn cần một script để tạo nội dung trong trang khi trang chạy, thì script nên là một phần <body> của tài liệu. Trong trường hợp này, sẽ không có hàm nào được định nghĩa. Bạn xem code sau:

<html>
<head>
</head>

<body>
<script type="text/javascript">
<!--
document.write("Hello World")
//-->
</script>
<p>This is web page body </p>
</body>
</html>

Kết quả:

Vị trí JavaScript trong tài liệu HTML - 02

JavaScript trong khu vực <body> và <head>

Bạn có thể đặt code JavaScript trong khu vực <head> và <body> như sau:

<html>
<head>
<script type="text/javascript">
<!--
function sayHello() {
alert("Hello World")
}
//-->
</script>
</head>

<body>
<script type="text/javascript">
<!--
document.write("Hello World")
//-->
</script>

<input type="button" onclick="sayHello()" value="Say Hello" />

</body>
</html>

Kết quả:

Vị trí JavaScript trong tài liệu HTML - 03

JavaScript ở file ngoài

Khi bạn bắt đầu làm việc quy mô hơn với JavaScript, bạn sẽ cần sử dụng lại JavaScript code đồng nhất trên nhiều trang của một site.

Bạn không bị giới hạn để duy trì code đồng nhất trong nhiều HTML file. Thẻ script cung cấp một kỹ thuật cho phép bạn lưu JavaScript trong một file bên ngoài và sau đó include nó trong các HTML file của bạn.

Dưới đây là một ví dụ để include một JavaScript file bên ngoài:

<html>
<head>
<script type="text/javascript" src="filename.js" ></script>
</head>

<body>
.......
</body>
</html>

Để sử dụng JavaScript từ một nguồn file bên ngoài, bạn cần viết tất cả code nguồn JavaScript trong một file với phần mở rộng “.js” và sau đó include file đó như trên.

Ví dụ, bạn có thể giữ nội dung sau trong filename.js và sau đó bạn có thể sử dụng hàm sayHello trong HTML file sau khi include filename.js này.

function sayHello() {
alert("Hello World")
}

Kết quả vẫn là:

Vị trí JavaScript trong tài liệu HTML - 04