Tương tự CSS, chúng ta cũng có ba cách để thêm JavaScript vào HTML:
- Inline: gọi hàm xử lý sự kiện trong các thuộc tính sự kiện (chẳng hạn như
onclick,onblur, …). - Internal: viết trong thẻ
<script>. - External: viết trong các tập tin JavaScript rồi liên kết với tập tin HTML:
Ví dụ cho cách thứ 3:
<script type="text/javascript" src="index.js"></script>Thẻ <script> có thể đặt ở bên trong head hoặc <body>. Tuy nhiên, nên đặt trong thẻ <body> vì việc thông dịch code JavaScript có thể làm chậm quá trình render trang web.
Để thẻ <script> được thực thi sau khi HTML được parse, ta có thể thêm vào thuộc tính defer như sau:
<script defer type="text/javascript" src="index.js"></script>Ngoài defer thì ta còn có thuộc tính async: thực thi code JavaScript ngay sau khi nó được tải về. Tuy nhiên, cần chú ý rằng thứ tự thực thi của nó có thể không đúng với thứ tự khai báo trong code.
Ví dụ, script2.js hoặc script3.js ở trong đoạn code bên dưới có thể thực thi trước jquery.js.
<script async src="js/vendor/jquery.js"></script>
<script async src="js/script2.js"></script>
<script async src="js/script3.js"></script>Khi đó, nếu script2.js hoặc script3.js có phụ thuộc vào jquery.js thì có thể xảy ra lỗi. Do đó, chỉ nên dùng async khi các script được load không bị phụ thuộc lẫn nhau.
Minh họa cho cả ba loại script loading:
