HTML JavaScript
JavaScript làm trang HTML thêm phần linh động và tương tác hơn.
ví dụ
<!DOCTYPE html>
<html>
<body>
<h1>My First JavaScript</h1>
<button type="button"
onclick="document.getElementById('demo').innerHTML = Date()">
Click me to display Date and Time.</button>
<p id="demo"></p>
</body>
</html> Thẻ <script> trong HTML
Thẻ <script> được dùng để định nghĩa một script phía người dùng(client-side script) (JavaScript).
Thành phần <script> chứa các câu lệnh script, hoặc trỏ nó đến một tệp script bên ngoài qua thuộc tính src .
Các cách sử dụng phổ biến của JavaScript là thao tác hình ảnh, xác thực form, và thay đổi nội dung một cách linh động.
Để chọn một thành phần HTML, JavaScript hầu hết sử dụng phương thức document.getElementById().
Đây là một ví dụ về JavaScript viết "Hello JavaScript!" vào một thành phần HTML với id="demo":
ví dụ
<script>
document.getElementById("demo").innerHTML = "Hello JavaScript!";
</script><!DOCTYPE html>
<html>
<body>
<h2>Use JavaScript to Change Text</h2>
<p>This example writes "Hello JavaScript!" into an HTML element with id="demo":</p>
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML = "Hello JavaScript!";
</script>
</body>
</html>
Tip: Bạn có thể học nhiều hơn về JavaScript trong hướng dẫn JavaScript.
Một JavaScript thường thấy
Đây là một vài ví dụ của JavaScript có thể làm gì:
JavaScript có thể thay đổi nội dung HTML:
document.getElementById("demo").innerHTML = "Hello JavaScript!";<!DOCTYPE html>
<html>
<body>
<h1>My First JavaScript</h1>
<p>JavaScript can change the content of an HTML element:</p>
<button type="button" onclick="myFunction()">Click Me!</button>
<p id="demo">This is a demonstration.</p>
<script>
function myFunction() {
document.getElementById("demo").innerHTML = "Hello JavaScript!";
}
</script>
</body>
</html>
JavaScript có thể thay đổi các phong cách HTML:
document.getElementById("demo").style.fontSize = "25px";
document.getElementById("demo").style.color = "red";
document.getElementById("demo").style.backgroundColor = "yellow";<!DOCTYPE html>
<html>
<body>
<h1>My First JavaScript</h1>
<p id="demo">JavaScript can change the style of an HTML element.</p>
<script>
function myFunction() {
document.getElementById("demo").style.fontSize = "25px";
document.getElementById("demo").style.color = "red";
document.getElementById("demo").style.backgroundColor = "yellow";
}
</script>
<button type="button" onclick="myFunction()">Click Me!</button>
</body>
</html>
JavaScript có thể thay đổi các thuộc tính HTML:
document.getElementById("image").src = "picture.gif";<!DOCTYPE html>
<html>
<body>
<script>
function light(sw) {
var pic;
if (sw == 0) {
pic = "pic_bulboff.gif"
} else {
pic = "pic_bulbon.gif"
}
document.getElementById('myImage').src = pic;
}
</script>
<img id="myImage" src="pic_bulboff.gif" width="100" height="180">
<p>
<button type="button" onclick="light(1)">Light On</button>
<button type="button" onclick="light(0)">Light Off</button>
</p>
</body>
</html>
Thẻ <noscript> trong HTML
Thẻ <noscript> được dùng để cung cấp một nội dung luân phiên cho người dùng có các script bị vô hiệu hóa trên trình duyệt của họ hoặc có một trình duyệt không hỗ trợ script phía người dùng(client-side):
ví dụ
<script>
document.getElementById("demo").innerHTML = "Hello JavaScript!";
</script>
<noscript>Sorry, your browser does not support JavaScript!</noscript><!DOCTYPE html>
<html>
<body>
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML = "Hello JavaScript!";
</script>
<noscript>Sorry, your browser does not support JavaScript!</noscript>
<p>A browser without support for JavaScript will show the text written inside the noscript element.</p>
</body>
</html>
Các thẻ Script trong HTML
HTML Script Tags
| Thẻ | Mô tả |
|---|---|
| <script> | Định nghĩa một client-side script |
| <noscript> | được dùng để cung cấp một nội dung luân phiên cho người dùng không hỗ trợ client-side script |
Tags:
Phản hồi từ học viên
5
(Dựa trên đánh giá ngày hôm nay)
