Trong HTML, JavaScript code được đưa vào giữa thẻ <script> và </script>.
<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.
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.
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.
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:
<!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>
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:
<!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ị.
Các tập lệnh(scripts) có thể đặt trong những file bên ngoài:
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>.
Đặ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>
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:
<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:
<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>
Ứng Dụng Học
Theo dõi cập nhật nội dung học trên Youtube & Facebook
Thông Tin Liên Hệ
Công Ty Cổ Phần Phát Triển Công Nghệ Gozic.
Website: https://gozic.vn
SĐT: 096 - 70 25 996
Email: ziczacgroup@gmail.com
Thiết kế webiste chuyên nghiệp
Thiết kế phần mềm quản trị
Thiết kế ứng dụng Android
Thiết kế ứng dụng IOS
Thiết kế Web App
Hỗ trợ Digital Marketing
Hỗ trợ quảng cáo Google Ads
Hỗ trợ quảng cáo Facebook Ads
Hỗ trợ SEO Website