Hướng dẫn cách nhúng JavaScript vào file HTML
Cập nhật:
19 thg 8, 2019
17:04
Có 3 cách để nhúng đoạn mã JavaScript vào file HTML: inline, internal, external.
1. Nhúng JavaScript vào HTML kiểu inline:
Với cách nhúng kiểu inline này thì các coder hạn chế dùng. Nó rất khó để kiểm soát được code của bạn. Khi bạn muốn sửa code sẽ rất phức tạp. Với cách này, mình khuyên không dùng.
2. Nhúng JavaScript vào HTML kiểu internal:
Trong cách này ta có 2 kiểu nhúng:
- Nhúng ở trong cặp thẻ <head>...<head>:
- Nhúng ở trong cặp thẻ <body>...</body>:
Tùy vào việc hoạt động của file mà chúng ta sẽ đặt chúng ở trong 2 cặp thẻ <head>...</head> hoặc thẻ <body>...</body>.
3. Nhúng JavaScript vào file HTML kiểu External:
Với kiểu nhúng này, chúng ta sẽ đặt tạo ra một file với đuôi .js để chèn vào file HTML. Các file .js chúng ta sẽ đưa lên host.
Chúng ta có thể chèn nhiều file vào trong HTML. Vị trí chèn file giống kiểu internal, đều chèn vào trong cặp thẻ <head>...</head> hoặc <body>...<body>. Tùy từng chức năng, hoạt động của file:
Kết luận: Như vậy, mình đã đưa ra 3 cách khác nhau để nhúng JavaScript vào 1 file HTML. Nhưng mình khuyên các bạn chỉ nên làm cách 2 và cách 3 để kiểm soát code cũng như việc chỉnh sửa code dễ dàng hơn.
1. Nhúng JavaScript vào HTML kiểu inline:
<!DOCTYPE html>
<html lang='en'>
<head>
<title>Nhúng JavaScript vào HTML kiểu inline</title>
</head>
<body>
<button onclick ="document.getElementById('demo').innerHTML='Zero Coders'">Click here</button>
<p id='demo'></p>
</body>
</html>
Với cách nhúng kiểu inline này thì các coder hạn chế dùng. Nó rất khó để kiểm soát được code của bạn. Khi bạn muốn sửa code sẽ rất phức tạp. Với cách này, mình khuyên không dùng.
2. Nhúng JavaScript vào HTML kiểu internal:
Trong cách này ta có 2 kiểu nhúng:
- Nhúng ở trong cặp thẻ <head>...<head>:
<!DOCTYPE html>
<head>
<script>
console.log('Hello! Mr No Name');
</script>
</head>
<body>
...
</body>
</html>
- Nhúng ở trong cặp thẻ <body>...</body>:
<!DOCTYPE html>
<head>
...
</head>
<body>
<script>
console.log('Hello! Zero Coders');
</script>
</body>
</html>
Tùy vào việc hoạt động của file mà chúng ta sẽ đặt chúng ở trong 2 cặp thẻ <head>...</head> hoặc thẻ <body>...</body>.
3. Nhúng JavaScript vào file HTML kiểu External:
Với kiểu nhúng này, chúng ta sẽ đặt tạo ra một file với đuôi .js để chèn vào file HTML. Các file .js chúng ta sẽ đưa lên host.
Chúng ta có thể chèn nhiều file vào trong HTML. Vị trí chèn file giống kiểu internal, đều chèn vào trong cặp thẻ <head>...</head> hoặc <body>...<body>. Tùy từng chức năng, hoạt động của file:
<!DOCTYPE html>
<head>
<script src='file.js'></script>
<script src='file.js'></script>
</head>
<body>
...
</body>
</html>
hoặc
<!DOCTYPE html>
<head>
...
</head>
<body>
<script src='file.js'></script>
<script src='file.js'></script>
</body>
</html>
Kết luận: Như vậy, mình đã đưa ra 3 cách khác nhau để nhúng JavaScript vào 1 file HTML. Nhưng mình khuyên các bạn chỉ nên làm cách 2 và cách 3 để kiểm soát code cũng như việc chỉnh sửa code dễ dàng hơn.