JavaScript Where To BT1288
Thẻ <script>
Trong HTML, JavaScript code được đưa vào giữa thẻ <script> và </script>.
ví dụ
<script>
document.getElementById("demo").innerHTML = "My First JavaScript";
</script>
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript in Body</h2>
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML = "My First JavaScript";
</script>
</body>
</html> Tip: Các ví dụ JavaScript cũ có thể dùng loại thuộc tính: <script type="text/javascript">.
Thuộc tính loại không bắt buộc. JavaScript là ngôn ngữ kịch bản mặc định trong HTML.
JavaScript Functions (hàm) và Events (sự kiện)
Một JavaScript function(hàm) là một khối lệnh(code) JavaScript, có thể được thực thi khi được "gọi"
đến.
Ví dụ, một hàm có thể được gọi khi một sự kiện xảy ra, như khi người dùng bấm vào một nút.
Tip: Bạn sẽ học hỏi nhiều hơn nữa về hàm và sự kiện trong chương sau.
JavaScript trong <head> hoặc <body>
Bạn có thể đặt bất kì số lượng tập lệnh(scripts) trong một tài liệu HTML.
Các tập lệnh(scripts) có thể đặt trong phần <body>, hoặc phần <head> của trang HTML,
hoặc trong cả hai.
JavaScript trong <head>
Trong ví dụ này, một function(hàm) JavaScript được đặt trong phần <head> của trang HTML.
Hàm được gọi khi nút được bấm:
ví dụ
<!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 <body>
Trong ví dụ này, function(hàm) JavaScript được đặt trong phần <body>của trang HTML.
Hàm được gọi khi nút được bấm:
ví dụ
<!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>Tip: Đặt các tập lệnh(scripts) ở dưới cùng của thẻ <body> sẽ cải thiện tốc độ hiển thị, vì tập lệnh khi biên dịch sẽ làm chậm quá trình hiển thị.
External(bên ngoài) JavaScript
Các tập lệnh(scripts) có thể đặt trong những file bên ngoài:
External file: myScript.js
function myFunction() {
document.getElementById("demo").innerHTML = "Paragraph changed.";
}Các tập lệnh(scripts) ở bên ngoài hữu dụng khi một dòng code được sử dụng trong nhiều trang web khác nhau.
JavaScript files có phần mở rộng là .js
Để dùng một tập lệnh(scripts) bên ngoài, cho tên của file chứa các tập lệnh(scripts) vào trong thuộc tính src (nguồn) của thẻ <script>:
<script src="myScript.js"></script><!DOCTYPE html>
<html>
<body>
<h2>External JavaScript</h2>
<p id="demo">A Paragraph.</p>
<button type="button" onclick="myFunction()">Try it</button>
<p>(myFunction is stored in an external file called "myScript.js")</p>
<script src="myScript.js"></script>
</body>
</html>Bạn có thể đặt các tập lệnh(scripts) bên ngoài trong <head>hoặc <body> theo cách của bạn.
Các tập lệnh(scripts) sẽ được xử lý như thể nó được đặt chính xác nơi đặt thẻ <script>.
Tip: Các scripts ở bên ngoài không thể chứa thẻ <script>.
Các lợi ích của External JavaScript
Đặt các tập lệnh(scripts) ở các tệp bên ngoài có một số lợi ích:
- Nó chia cắt HTML và code
- Nó làm cho HTML và JavaScript dễ dàng hơn để đọc và duy trì
- Bộ đệm(cached) của các tệp JavaScript có thể làm tăng tốc độ tải trang.
Để thêm vào một vài cách tập lệnh tới một trang - dùng một số thẻ script sau:
<script src="myScript1.js"></script>
<script src="myScript2.js"></script>External References(tham chiếu)
Các tập lệnh(scripts) mở rộng có thể được tham chiếu bằng một URL tuyệt đối hoặc với một đường dẫn liên quan tới trang web hiện tại.
Đây là một ví dụ dùng một đường dẫn URL tuyệt đối để liên kết tới một tập lệnh(scripts).
<script src="https://www.w3schools.com/js/myScript1.js"></script><!DOCTYPE html>
<html>
<body>
<h2>External JavaScript</h2>
<p id="demo">A Paragraph.</p>
<button type="button" onclick="myFunction()">Try it</button>
<p>(myFunction is stored in an external file called "myScript.js")</p>
<script src="https://www.w3schools.com/js/myScript.js"></script>
</body>
</html>
Đây là một ví dụ dùng một tập lệnh được đặt vị trí trong một thư mục cụ thể trên trang web hiện tại:
ví dụ
<script src="/js/myScript1.js"></script><!DOCTYPE html>
<html>
<body>
<h2>External JavaScript</h2>
<p id="demo">A Paragraph.</p>
<button type="button" onclick="myFunction()">Try it</button>
<p>(myFunction is stored in an external file called "myScript.js")</p>
<script src="/js/myScript.js"></script>
</body>
</html>Đây là một ví dụ liên kết tới một tập lệnh(scripts) được đặt trong cùng thư mục với trang hiện tại:
ví dụ
<script src="myScript1.js"></script><!DOCTYPE html>
<html>
<body>
<h2>External JavaScript</h2>
<p id="demo">A Paragraph.</p>
<button type="button" onclick="myFunction()">Try it</button>
<p>(myFunction is stored in an external file called "myScript.js")</p>
<script src="myScript.js"></script>
</body>
</html>
Tags: