Bạn có thể khai báo lệnh JavaScript ở bất cứ nơi nào trong tài liệu HTML một cách linh hoạt. Tuy nhiên, các cách được ưu tiên nhất để nhúng JavaScript vào HTML như sau:
- Trong thẻ HTML <head>...</head>
- Trong thẻ HTML <body>...</body>
- Liên kết với file .js từ bên ngoài, đường dẫn của file .js được khai báo trong thẻ HTML <head>...</head>
Nội dung chính
Trong thẻ HTML <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="Hello!" />
</body>
</html>
Kết quả:
Trong thẻ HTML <body>...</body>
Nếu bạn cần một script để chạy khi tải trang để tạo nội dung trong trang, thì khi đó. Trong trường hợp này, bạn sẽ không có bất kỳ hàm nào được định nghĩa bởi sử dụng JavaScript. Ví dụ:
<html>
<head>
</head>
<body>
<script type="text/javascript">
<!--
document.write("Hello JavaScript!");
//-->
</script>
<p> Ví dụ nhúng JavaScript và thẻ HTML body </p>
</body>
</html>
Kết quả:
Cách này ít được sử dụng vì JavaScript và JQuery cung cấp nhiều hàm để thực hiện việc chèn nội dung vào HTML.
Liên kết với file .js từ bên ngoài
Liên kết với file .js từ bên ngoài, đường dẫn của file .js được khai báo trong thẻ HTML <head>...</head>
Phương pháp này giúp tái sử dụng code và bảo trì dễ dàng hơn.
Ví dụ
Tạo file JavaScript common.js có nội dung như sau:
function sayHello() {
alert("Hello World!")
}
Nhúng file common.js vào trang HTML như sau, sau đó chúng ta có thể sử dụng hàm sayHello():
<html>
<head>
<script type="text/javascript" src="common.js" ></script>
</head>
<body>
<input type="button" onclick="sayHello()" value="Hello!" />
</body>
</html>
Kết quả:
