HTML - JavaScript
A scriptlà một phần nhỏ của chương trình có thể thêm tính tương tác vào trang web của bạn. Ví dụ: một tập lệnh có thể tạo thông báo hộp cảnh báo bật lên hoặc cung cấp menu thả xuống. Tập lệnh này có thể được viết bằng JavaScript hoặc VBScript.
Bạn có thể viết các hàm nhỏ khác nhau, được gọi là trình xử lý sự kiện bằng bất kỳ ngôn ngữ kịch bản nào và sau đó bạn có thể kích hoạt các hàm đó bằng các thuộc tính HTML.
Chỉ bây giờ một ngày JavaScript và các khung liên quan đang được hầu hết các nhà phát triển web sử dụng, VBScript thậm chí không được hỗ trợ bởi các trình duyệt chính khác nhau.
Bạn có thể giữ mã JavaScript trong một tệp riêng và sau đó đưa nó vào bất cứ nơi nào cần hoặc bạn có thể xác định chức năng bên trong chính tài liệu HTML. Chúng ta hãy xem từng trường hợp một với các ví dụ phù hợp.
JavaScript bên ngoài
Nếu bạn định xác định một chức năng sẽ được sử dụng trong các tài liệu HTML khác nhau thì tốt hơn nên giữ chức năng đó trong một tệp JavaScript riêng và sau đó đưa tệp đó vào tài liệu HTML của bạn. Tệp JavaScript sẽ có phần mở rộng là.js và nó sẽ được đưa vào các tệp HTML bằng thẻ <script>.
Thí dụ
Hãy xem xét chúng tôi xác định một hàm nhỏ bằng JavaScript trong script.js có mã sau -
function Hello() {
alert("Hello, World");
}Bây giờ, hãy sử dụng tệp JavaScript bên ngoài ở trên trong tài liệu HTML sau của chúng tôi -
<!DOCTYPE html>
<html>
<head>
<title>Javascript External Script</title>
<script src = "/html/script.js" type = "text/javascript"/></script>
</head>
<body>
<input type = "button" onclick = "Hello();" name = "ok" value = "Click Me" />
</body>
</html>Điều này sẽ tạo ra kết quả sau, nơi bạn có thể thử nhấp vào nút đã cho -
Tập lệnh nội bộ
Bạn có thể viết mã tập lệnh trực tiếp vào tài liệu HTML của mình. Thông thường, chúng tôi giữ mã tập lệnh trong tiêu đề của tài liệu bằng thẻ <script>, nếu không thì không có hạn chế và bạn có thể đặt mã nguồn của mình ở bất kỳ đâu trong tài liệu nhưng bên trong thẻ <script>.
Thí dụ
<!DOCTYPE html>
<html>
<head>
<title>JavaScript Internal Script</title>
<base href = "https://www.tutorialspoint.com/" />
<script type = "text/JavaScript">
function Hello() {
alert("Hello, World");
}
</script>
</head>
<body>
<input type = "button" onclick = "Hello();" name = "ok" value = "Click Me" />
</body>
</html>Điều này sẽ tạo ra kết quả sau, nơi bạn có thể thử nhấp vào nút đã cho -
Trình xử lý sự kiện
Trình xử lý sự kiện không là gì ngoài các hàm được xác định đơn giản có thể được gọi đối với bất kỳ sự kiện chuột hoặc bàn phím nào. Bạn có thể xác định logic nghiệp vụ của mình bên trong trình xử lý sự kiện, có thể thay đổi từ một mã đến 1000 dòng.
Ví dụ sau giải thích cách viết một trình xử lý sự kiện. Hãy viết một hàm đơn giản EventHandler () trong tiêu đề của tài liệu. Chúng tôi sẽ gọi chức năng này khi bất kỳ người dùng nào đưa chuột qua một đoạn văn.
<!DOCTYPE html>
<html>
<head>
<title>Event Handlers Example</title>
<base href = "https://www.tutorialspoint.com/" />
<script type = "text/JavaScript">
function EventHandler() {
alert("I'm event handler!!");
}
</script>
</head>
<body>
<p onmouseover = "EventHandler();">Bring your mouse here to see an alert</p>
</body>
</html>Bây giờ Điều này sẽ tạo ra kết quả sau. Đưa chuột qua dòng này và xem kết quả -
Ẩn tập lệnh khỏi trình duyệt cũ hơn
Mặc dù hầu hết (nếu không phải tất cả) các trình duyệt ngày nay đều hỗ trợ JavaScript, nhưng một số trình duyệt cũ hơn thì không. Nếu một trình duyệt không hỗ trợ JavaScript, thay vì chạy tập lệnh của bạn, nó sẽ hiển thị mã cho người dùng. Để ngăn chặn điều này, bạn chỉ cần đặt các chú thích HTML xung quanh tập lệnh như được hiển thị bên dưới.
JavaScript Example:
<script type = "text/JavaScript">
<!--
document.write("Hello JavaScript!");
//-->
</script>
VBScript Example:
<script type = "text/vbscript">
<!--
document.write("Hello VBScript!")
'-->
</script>Phần tử <noscript>
Bạn cũng có thể cung cấp thông tin thay thế cho những người dùng có trình duyệt không hỗ trợ tập lệnh và cho những người dùng đã tắt tùy chọn tập lệnh trên trình duyệt của họ. Bạn có thể làm điều này bằng cách sử dụng<noscript> nhãn.
JavaScript Example:
<script type = "text/JavaScript">
<!--
document.write("Hello JavaScript!");
//-->
</script>
<noscript>Your browser does not support JavaScript!</noscript>
VBScript Example:
<script type = "text/vbscript">
<!--
document.write("Hello VBScript!")
'-->
</script>
<noscript>Your browser does not support VBScript!</noscript>Ngôn ngữ kịch bản mặc định
Có thể có một tình huống khi bạn sẽ bao gồm nhiều tệp kịch bản và cuối cùng sử dụng nhiều thẻ <script>. Bạn có thể chỉ định một ngôn ngữ kịch bản mặc định cho tất cả các thẻ tập lệnh của mình . Điều này giúp bạn không phải chỉ định ngôn ngữ mỗi khi bạn sử dụng thẻ script trong trang. Dưới đây là ví dụ -
<meta http-equiv = "Content-Script-Type" content = "text/JavaScript" />Lưu ý rằng bạn vẫn có thể ghi đè mặc định bằng cách chỉ định một ngôn ngữ trong thẻ script.