Code js trong trang html ở ví trí nào

Series lập trình JavaScript, ngôn ngữ lập trình linh động, thực thi phía client.

Trong bài này, chúng ta sẽ cùng tìm hiểu về vị trí của JavaScript trong file HTML.

1. Về thẻ

Trong HTML, JavaScript code cần phải được chèn vào giữa cặp thẻ và .

Ví dụ:

document.getElementById["demo"].innerHTML = "My First JavaScript";

Try it »

Trong các ví dụ JavaScript cũ có sử dụng thuộc tính type: .
Thuộc tính type là không cần thiết. JavaScript là ngôn ngữ kịch bản mặc định trong HTML.

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

Chúng ta sẽ cùng tìm hiểu thêm về các functions và events của JavaScript trong các bài viết tiếp theo.

2. Vị trí đặt code JavaScript trong file HTML

Việc đặt code JavaScript trong file HTML không hạn chế về số lượng và rất linh động, có thể đặt ở một trong các vị trí như sau:

• Giữa cặp thẻ …
• Giữa cặp thẻ …
• Hoặc đồng thời giữa cặp thẻ … và …
• Script trong file ngoại vi và sau đó được included vào giữa cặp thẻ hoặc giữa cặp thẻ

Việc đặt javascript code ở phần dưới cùng của thẻ sẽ cải thiện tốc độ hiển thị, vì việc biên dịch javascript code sẽ làm chậm việc hiển thị nội dung của trang web.

JavaScript giữa cặp thẻ ...

JavaScript giữa cặp thẻ …

– Trong ví dụ này, một hàm JavaScript được đặt trong phần của một trang HTML.

– Hàm được gọi [invoked/called] khi một nút được nhấn:

Ví dụ:

function myFunction[] {
    document.getElementById["demo"].innerHTML = "Minh Hoàng Blog | www.minhhn.com";
}





JavaScript in Head

Welcome to my blog!

Try it

Try it »

JavaScript giữa cặp thẻ ...

JavaScript giữa cặp thẻ …

– Trong ví dụ này, một hàm JavaScript được đặt trong phần của một trang HTML.

– Hàm được gọi [invoked/called] khi một nút được nhấn:

Ví dụ:

JavaScript in Body

Welcome to my blog!

Try it


function myFunction[] {
    document.getElementById["demo"].innerHTML = "Minh Hoàng Blog | www.minhhn.com";
}

Try it »

External JavaScript

External JavaScript

Các lệnh scripts cũng có thể được đặt trong các file bên ngoài:

External file: myScript.js

function myFunction[] {
    document.getElementById["demo"].innerHTML = "Minh Hoàng Blog | www.minhhn.com";
}

– Các scripts bên ngoài [external scripts] rất hay được sử dụng khi cùng một mã lệnh được sử dụng trong nhiều trang web khác nhau.

– Các file JavaScript có phần mở rộng là .js

– Để sử dụng tập lệnh bên ngoài [external script], bạn hãy đặt đường dẫn đến file script vào thuộc tính src [source] của thẻ :

Ví dụ:

Try it »

– Bạn có thể đặt tham chiếu tập lệnh bên ngoài [external script reference] vào hoặc tùy thích.

– Khi đó các lệnh scrips trong file bên ngoài cũng sẽ hoạt động như thể nó đang được đặt vào chính xác vị trí của thẻ vậy.

Lưu ý: Trong nội dung của file external script không được chứa các thẻ .

– Việc đặt các lệnh scripts vào tập tin bên ngoài [external files] có một số ưu điểm:

• Giúp tách biệt mã HTML và JavaScript.
• Làm cho mã HTML và JavaScript dễ đọc và bảo trì hơn.
• Các files JavaScript được lưu trong bộ nhớ cache có thể tăng tốc độ tải trang.

– Để thêm một vài file scripts bên ngoài vào cùng một trang HTML, bạn có thể thêm như sau:

Ví dụ: