Vị trí JavaScipt trong HTML File
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ó ...
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>
- Học lập trình front-end cơ bản với bootstrap 4/html5/css3
- Học lập trình front-end nâng cao qua Project thực tế
- Học thiết kế web với Photoshop, CSS theo kiểu SASS
- Học cách sử dụng Git_hub cho lập trình viên
- Học lập trình Back-end PHP theo mô hình MVC cơ bản
- Học lập trình Back-end PHP theo mô hình MVC nâng cao
- Học lập trình Cơ sở dữ liệu với AngularJS
- Học lập trình theme wordpress. Làm ra mọi website hoàn chỉnh với wordpress
- Combo lập trình front-end từ cơ bản – nâng cao
- Combo lập trình back-end từ cơ bản đến nâng cao
- Combo lập trình web với word press từ A-Z
