Thẻ <script>
Trong HTML, code JavaScript có thể được chèn vào giữa các thẻ <script> và </script>.
<script> document.getElementById("demo").innerHTML = "Xin chào Javascript"; </script>
Các ví dụ JavaScript cũ có thể sử dụng: <script type="text/javascript">. Thuộc tính type là không bắt buộc. JavaScript là ngôn ngữ kịch bản mặc định trong HTML.
Hàm và sự kiện trong JavaScript
Hàm JavaScript là một khối code JavaScript, có thể được thực thi khi được "gọi".
Ví dụ: một hàm có thể được gọi khi một sự kiện xảy ra, chẳng hạn như khi người dùng nhấp vào một nút.
Chi tiết về hàm và sự kiện sẽ có ở những bài sau.
JavaScript trong <head> hoặc <body>
Bạn có thể đặt bất kỳ số lượng script nào trong HTML.
Các script có thể được đặt trong <body> hoặc trong phần <head> của trang HTML hoặc trong cả hai.
JavaScript trong thẻ <head>
Trong ví dụ này, một hàm JavaScript được đặt trong phần <head> của trang HTML.
Hàm được gọi khi nhấp vào nút:
<!DOCTYPE html> <html> <head> <script> function myFunction() { document.getElementById("demo").innerHTML = "Đoạn văn đã được thay đổi."; } </script> </head> <body> <h2>Demo JavaScript trong thẻ Head</h2> <p id="demo">Đoạn văn</p> <button type="button" onclick="myFunction()">Thử click vào đây!</button> </body> </html>
JavaScript trong thẻ <body>
Trong ví dụ này, một hàm JavaScript được đặt trong phần <body> của trang HTML.
Hàm được gọi khi nhấp vào nút:
<!DOCTYPE html> <html> <head> </head> <body> <h2>Demo JavaScript trong thẻ Head</h2> <p id="demo">Đoạn văn</p> <button type="button" onclick="myFunction()">Thử click vào đây!</button> <script> function myFunction() { document.getElementById("demo").innerHTML = "Đoạn văn đã được thay đổi."; } </script> </body> </html>
External JavaScript
Các script cũng có thể được đặt trong các tệp bên ngoài:
function myFunction() { document.getElementById("demo").innerHTML = "Đoạn văn."; }
Các script bên ngoài là được sử dụng thực tế khi sử dụng cùng một code được sử dụng trong nhiều trang web khác nhau.
Các tệp JavaScript có phần mở rộng tệp là .js.
Để sử dụng script bên ngoài, hãy đặt tên của tệp tập lệnh trong thuộc tính src (nguồn) của thẻ <script>:
<script src="myScript.js"></script>
Bạn có thể đặt script bên ngoài trong <head> hoặc <body> tùy thích.
Tập lệnh sẽ hoạt động như thể nó nằm chính xác ở vị trí của thẻ <script>.
Tập lệnh bên ngoài không được chứa thẻ <script>.
Ưu điểm External JavaScript
Đặt tập lệnh trong tệp bên ngoài có một số lợi thế:
- Nó tách HTML và JavaScript
- 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 nhiều tệp tập lệnh vào một trang - hãy sử dụng một số thẻ <script>:
<script src="myScript1.js"></script> <script src="myScript2.js"></script>
Thêm External JavaScript từ bên ngoài
Một script bên ngoài có thể được thêm vào theo 3 cách khác nhau:
- Với một URL đầy đủ (một địa chỉ web đầy đủ)
- Với đường dẫn tệp (như /js/)
- Không có đường dẫn nào
Ví dụ này sử dụng một URL đầy đủ để liên kết tới myScript.js:
<script src="truonghoclaptrinh.com/js/myScript.js"></script>Ví dụ này sử dụng đường dẫn tệp để liên kết tới myScript.js:
<script src="/js/myScript.js"></script>Ví dụ này không sử dụng đường dẫn để liên kết đến myScript.js:
<script src="myScript.js"></script>