Vị trí JavaScipt trong HTML File - Fedu

CHÀO MỪNG BẠN ĐẾN VỚI THƯ VIỆN HỌC TẬP & ĐÀO TẠO CƠ BẢN

Vị trí JavaScipt trong HTML File

JavaScript

Hướng dẫn JavaScript

Biểu mẫu JavaScript

Đối tượng JavaScript

Hàm JavaScript

DOM JavaScript

Trình duyệt BOM

JavaScript Ajax

JavaScript Json

Trong HTML, mã JavaScript phải được chèn vào giữa các thẻ mở <script> và thẻ đóng </ script>.

<script>
document.getElementById(“demo”).innerHTML = “My First JavaScript”;
</script>

Các ví dụ 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.

Các chức năng và sự kiện của JavaScript

Một hàm JavaScript là một khối mã JavaScript, có thể được thực hiện khi “được gọi”. Ví dụ, một chức năng có thể được gọi khi một sự kiện xảy ra, giống như khi người dùng nhấp vào một nút.

JavaScript trong thẻ <head> hoặc <body>

Bạn có thể đặt bất kỳ số lượng script nào trong một tài liệu HTML. Các tập lệnh có thể được đặt trong phần <body>, hoặc trong phần <head> của một 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 một trang HTML. Hàm được gọi (called) khi một nút được nhấp:

<!DOCTYPE html>
<html>

<head>
<script>
function myFunction() {
document.getElementById(“demo”).innerHTML = “Paragraph changed.”;
}
</script>
</head>

<body>

<h1>A Web Page</h1>
<p id=”demo”>A Paragraph</p>
<button type=”button” onclick=”myFunction()”>Try it</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 một trang HTML. Hàm được gọi (called) khi một nút được nhấp:

<!DOCTYPE html>
<html>
<body>

<h1>A Web Page</h1>
<p id=”demo”>A Paragraph</p>
<button type=”button” onclick=”myFunction()”>Try it</button>

<script>
function myFunction() {
document.getElementById(“demo”).innerHTML = “Paragraph changed.”;
}
</script>

</body>
</html>

Việc đặt các script ở dưới cùng của phần tử <body> sẽ cải thiện tốc độ hiển thị, bởi vì việc biên dịch script làm chậm màn hình hiển thị.

JavaScript 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:

External file: myScript.js

function myFunction() {
document.getElementById(“demo”).innerHTML = “Paragraph changed.”;
}

Các script bên ngoài khi cùng một mã được sử dụng trong nhiều trang web khác nhau.

Các tệp JavaScript có đuôi tệp .js.

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

<!DOCTYPE html>
<html>
<body>

<script src=”myScript.js”></script>

</body>
</html>

Bạn có thể đặt tham chiếu script bên ngoài trong thẻ <head> hoặc <body> theo ý muốn. Script sẽ hoạt động như thể nó nằm chính xác nơi có thẻ <script> được đặt.

Các tập lệnh bên ngoài không thể chứa thẻ <script>.

Thuận tiện khi dùng JavaScript bên ngoài

Việc đặt các script trong các tệp ngoài có một số lợi thế:

  • Tách HTML và mã code
  • Làm cho HTML và JavaScript dễ dàng hơn để đọc và duy trì
  • 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 tin script vào một trang – sử dụng một số thẻ script:

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

Tham khảo JavaScript bên ngoài

Các script bên ngoài có thể được tham chiếu với một URL đầy đủ hoặc với một đường dẫn liên quan đến trang web hiện tại.

Ví dụ này sử dụng một URL đầy đủ để liên kết đến một script:

<script src=”https://www.w3schools.com/js/myScript1.js”></script>

Ví dụ này sử dụng một script nằm trong một thư mục được chỉ định trên trang web hiện tại:

<script src=”/js/myScript1.js”></script>

Ví dụ này liên kết đến một script nằm trong cùng thư mục với trang hiện tại:

<script src=”myScript1.js”></script>