Có một sự linh hoạt được đưa ra để đưa mã JavaScript vào bất kỳ đâu trong tài liệu HTML. Tuy nhiên, các cách ưu tiên nhất để đưa JavaScript vào tệp HTML như sau:
- Tập lệnh trong phần <head> ... </head>.
- Tập lệnh trong phần <body> ... </body>.
- Tập lệnh trong phần <body> ... </body> và <head> ... </head>.
- Tập lệnh trong một tệp bên ngoài và sau đó đưa vào phần <head> ... </head>.
Trong phần sau, chúng ta sẽ xem cách chúng ta có thể đặt JavaScript trong tệp HTML theo những cách khác nhau.
JavaScript trong phần <head> ... </head>
Nếu bạn muốn tập lệnh chạy trên một số sự kiện, chẳng hạn như khi người dùng nhấp vào một nơi nào đó, thì bạn sẽ đặt tập lệnh đó vào đầu 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>
JavaScript trong phần <body> ... </body>
Nếu bạn cần một tập lệnh để chạy khi trang tải để tập lệnh tạo nội dung trong trang, thì tập lệnh sẽ nằm trong phần <body> của tài liệu. Trong trường hợp này, bạn sẽ không có bất kỳ hàm nào được xác định bằng JavaScript. Hãy xem đoạn mã sau.
Live Demo
<html>
<head>
</head>
<body>
<script type = "text/javascript">
<!--
document.write("Hello World")
//-->
</script>
<p>This is web page body </p>
</body>
</html>
JavaScript trong phần <body> và <head>
Bạn có thể đặt hoàn toàn mã JavaScript của mình trong phần <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>
JavaScript trong tệp bên ngoài
Khi bạn bắt đầu làm việc rộng rãi hơn với JavaScript, bạn sẽ có khả năng nhận thấy rằng có những trường hợp bạn đang sử dụng lại mã JavaScript giống hệt nhau trên nhiều trang của một trang web.
Bạn không bị hạn chế duy trì mã giống hệt nhau trong nhiều tệp HTML. Thẻ script cung cấp cơ chế cho phép bạn lưu trữ JavaScript trong một tệp bên ngoài và sau đó đưa nó vào các tệp HTML của bạn.
Dưới đây là một ví dụ để cho thấy cách bạn có thể bao gồm một tệp JavaScript bên ngoài trong mã HTML của mình bằng cách sử dụng thẻ script và thuộc tính src của nó.
<html>
<head>
<script type = "text/javascript" src = "filename.js" ></script>
</head>
<body>
.......
</body>
</html>
Để sử dụng JavaScript từ nguồn tệp bên ngoài, bạn cần viết tất cả mã nguồn JavaScript của mình trong một tệp văn bản đơn giản có phần mở rộng là ".js" và sau đó bao gồm tệp đó như được hiển thị ở trên.
Ví dụ: bạn có thể giữ nội dung sau trong tệp filename.js và sau đó bạn có thể sử dụng hàm sayHello trong tệp HTML của mình sau khi đã bao gồm tệp filename.js.
