JavaScript trong phần thân hoặc phần đầu: Các tập lệnh js có thể được đặt bên trong phần thân hoặc phần đầu của trang HTML hoặc bên trong cả phần đầu và phần thân.
1.JavaScript trong phần đầu:
Một hàm JavaScript được đặt bên trong phần đầu của trang HTML và hàm này được gọi khi một nút được bấm.
Ví dụ: HTML
<html>
<head>
<script>
function wkc() {
document.getElementById("demo").innerHTML = "vpsus";
}
</script>
</head>
<h2>
JavaScript in Head
</h2>
<p id="demo"
style="color:green;">
vpsus.vn
</p>
<button type="button"
onclick="wkc()">
click it
</button>
</html>
Đầu ra:
Trước khi nhấn vào nút
Sau khi nhấn vào nút
2.JavaScript trong phần thân:
Một hàm JavaScript được đặt bên trong phần thân của trang HTML và hàm này được gọi khi một nút được bấm.
Thí dụ:
<html>
<head>
</head>
<body>
<h2>
JavaScript in Body
</h2>
<p id="demo">
vpsus.vn
</p>
<button type="button"
onclick="wkc()">
Try it
</button>
<script>
function wkc() {
document.getElementById("demo").innerHTML = "vpsus";
}
</script>
</body>
</html>
Đầu ra:
Trước khi nhấn vào nút
Sau khi nhấn vào nút
3.JavaScript load từ bên ngoài(từ file js):
JavaScript cũng có thể được sử dụng từ file bên ngoài. Các file JavaScript có phần mở rộng file là .js. Để sử dụng tập lệnh từ bên ngoài, hãy đặt tên của file tập lệnh trong thuộc tính src của thẻ script. Lưu ý Tập lệnh load từ bên ngoài không thể chứa thẻ script.
Thí dụ:
Script.js
function wkc () {
document.getElementById('demo').innerHTML = 'Paragraph Changed'
}
Index.html
<html>
<head>
</head>
<body>
<h2>
External JavaScript
</h2>
<p id="demo">
vpsus dev.
</p>
<button type="button"
onclick="myFunction()">
Try it
</button>
<script src="myScript.js"></script>
</body>
</html>
Đầu ra trước khi nhấp:
Đầu ra sau khi nhấp:
Ưu điểm của JavaScript bên ngoài:
- Các tệp JavaScript được lưu trong bộ nhớ cache có thể tăng tốc độ tải trang
- Nó làm cho JavaScript và HTML dễ đọc và dễ bảo trì hơn
- Nó tách mã HTML và JavaScript
- Nó tập trung vào khả năng sử dụng lại code mà một Code JavaScript có thể chạy trong các tệp HTML khác nhau.
Tiếp theo, hãy cùng Thế giới JS tìm hiểu thêm các kiến thức về Javascript trong các bài tiếp theo trong series học miễn phí Javascript từ cơ bản tới nâng cao.
Nếu bạn cảm thấy hữu ích và yêu thích Thế giới JS, hãy tham gia và theo dõi chúng tôi để nhận thêm nhiều kiến thức MIỄN PHÍ hơn nữa nhé:
Share to learn more than!
