JavaScript có thể được thực hiện bởi các lệnh JavaScript được đặt trong thẻ HTML <script>… </script> trong một file HTML

Bạn có thể đặt các thẻ <script>, chứa JavaScript bất cứ đâu trong trang của bạn, nhưng kỹ năng số khuyến nghị bạn nên đặt nó trong cặp thẻ <head>.

Thẻ <script> báo cho chương trình trình duyệt bắt đầu phiên dịch tất cả văn bản ở giữa các thẻ này như là một script.

Thẻ <script>

Trong HTML, mã JavaScript được chèn vào giữa các thẻ <script></script>

Hãy thử ví dụ dưới đây

<html>
<body>

<h2>JavaScript trong Body</h2>

<p id="demo"></p>

<script>
document.getElementById("demo").innerHTML = "Chương trình Javascript đầu tiên của tôi";
</script>

</body>
</html> 

Lưu ý: Các phiên bản JavaScript cũ có thể sử dụng thuộc tính type: <script type = “text / javascript”>.
Thuộc tính type không bắt buộc. JavaScript là ngôn ngữ kịch bản mặc định trong HTML.

JavaScript trong <head> hoặc <body>

Trong một tài liệu HTML có thể chứa nhiều các đoạn mã Javascript.

Tập lệnh javascript có thể được đặt trong <body>hoặc trong cặp thẻ <head> của trang HTML hoặc trong cả hai.

JavaScript trong <head>

Trong ví dụ này, chúng ta tạo ra các hàm (function) JavaScript và đặt chúng trong <head>của trang HTML.

Hàm được gọi khi một nút được nhấp vào:

<html>
<head>
<script>
function myFunction() {
  document.getElementById("demo").innerHTML = "Nội dung đã được thay đổi";
}
</script>
</head>
<body>

<h2>Demo JavaScript trong thẻ Head</h2>

<p id="demo">Xin chào các bạn</p>

<button type="button" onclick="myFunction()">Bấm để xem!</button>

</body>
</html> 

JavaScript trong <body>

Trong ví dụ này, chúng ta xây dựng hàm JavaScript và đặt chúng trong <body> của trang HTML.

Hàm được gọi khi một nút được nhấp vào:

<html>
<body>

<h2>Demo JavaScript trong Body</h2>

<p id="demo">Xin chào các bạn</p>

<button type="button" onclick="myFunction()">Bấm để xem!</button>

<script>
function myFunction() {
  document.getElementById("demo").innerHTML = "Nội dung đã được thay đổi";
}
</script>

</body>
</html> 

JavaScript ở file bên ngoài

Các tập lệnh cũng có thể được đặt trong các tệp tin 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ẽ tìm thấy rằng có các trường hợp bạn đang 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 ngoại vi và sau đó bao gồm nó trong các HTML file của bạn.

Giả sử chúng ta có một file chứa mã javascript bên ngoài với tên myscript.js

function myFunction() {
  document.getElementById("demo").innerHTML = "Nội dung đã được thay đổi";
}

Các tệp JavaScript có phần mở rộng tệp là .js .

Để sử dụng tập lệnh bên ngoài, hãy đặt tên của tệp tập lệnh trong thuộc tính src của thẻ <script>:

<html>
<body>

<h2>Demo JavaScript ở file ngoại vi</h2>

<p id="demo">Xin chào các bạn</p>

<button type="button" onclick="myFunction()">Bấm để xem!</button>
<p>Đây là file Javascript ngoại vi "myscript.js".</p>
<p>(myFunction là hàm được tạo ra trong file "myScript.js")</p>
<script src="myscript.js"></script>

</body>
</html>

Bạn có thể đặt tham chiếu tập tin javascript bên ngoài vào <head> hoặc <body> tùy thích.

Ưu điểm của JavaScript bên ngoài

Sử dụng các mã javascript từ các tệp bên ngoài có một số lợi thế:

  • Phân tách giữa HTML và mã giúp dễ kiểm soát code hơn
  • Nó làm cho HTML và JavaScript dễ đọc và dễ bảo trì hơn
  • Các tệp JavaScript được lưu trong bộ nhớ cache có thể tăng tốc độ tải trang

Để thêm một số tệp tập lệnh vào một trang – hãy sử dụng một số thẻ tập lệnh:

<script src="myScript1.js"></script>
<script src="myScript2.js"></script>