[HTML/HTML5] Phần 21: Javascript

49 lượt xem

Để trang web có nhiều hiệu ứng động và tương tác tốt hơn với người dùng, bạn có thể sử dụng JavaScript. Bài viết này chỉ giới thiệu sơ lược về JavaScript, để tìm hiểu kỹ về JavaScript mời bạn xem series chuyên biệt về JavaScript sẽ được viết trong thời gian sắp tới.

Thẻ script
Một ngôn ngữ kịch bản phía client (JavaScript) được định nghĩa bằng thẻ script. Phần tử script chứa các đoạn mã lập trình, hoặc trỏ đến tập tin chứa đoạn mã bên ngoài thông qua thuộc tính src.

Các thao tác thường dùng JavaScript là tương tác hình ảnh, chứng thực form và thay đổi nội dung động. Để chọn 1 phần tử HTML, bạn hãy dùng phương thức document.getElementById(id) trong JavaScript. Ví dụ sau hiển thị dòng chữ “Hello Dammio!” ở phần tử p có id=”dammio” trong tập tin Test.html.

<!DOCTYPE html>
<html>
<body>

<p id="dammio"></p>

<script>
document.getElementById("dammio").innerHTML = "Hello Dammio!";
</script> 

</body>
</html>

Thay đổi nội dung HTML
JavaScript có thể thay đổi nội dung của 1 phần tử HTML bất kỳ. Khi nhấn nút thì hàm myFunction() được thực thi, chứa dòng lệnh document.getElementById(“demo”).innerHTML để thay đổi nội dung của phần tử có id=”demo”.

<!DOCTYPE html>
<html>
<body>

<h1>Ví dụ JavaScript --- dammio.com</h1>
<p>JavaScript có thể thay đổi nội dung của 1 phần tử bất kỳ:</p>
<button type="button" onclick="myFunction()">Nhấn vào đây!</button>
<p id="demo">Nội dung ban đầu.</p>

<script>
function myFunction() { 
    document.getElementById("demo").innerHTML = "Nội dung thay đổi.";
}
</script>
</body>
</html>

Thay đổi phong cách HTML
JavaScript còn có thể thay đổi phong cách HTML của 1 phần tử nào đó.

<!DOCTYPE html>
<html>
<body>

<h1>Ví dụ JavaScript --- dammio.com</h1>
<p id="demo">JavaScript có thể thay đổi phong cách của 1 phần tử HTML.</p>
<script>
function myFunction() {
    document.getElementById("demo").style.fontSize = "30px"; 
    document.getElementById("demo").style.color = "green";
    document.getElementById("demo").style.backgroundColor = "lightblue";        
}
</script>
<button type="button" onclick="myFunction()">Nhấn nút!</button>
</body>
</html>

JavaScript có thể thay đổi thuộc tính HTML

<!DOCTYPE html>
<html>
<body>
<script>
function changeColor(c) {
    document.getElementById('demo').color = c;
}
</script>
<body>
<font id="demo">Thay đổi màu sắc văn bản --- dammio.com</font>
<p>
<button type="button" onclick="changeColor('blue')">Blue</button>
<button type="button" onclick="changeColor('red')">Red</button>
</p>
</body>
</html>

Thẻ noscript
Thẻ này dùng để cung cấp nội dung hiển thị thay thế nếu JavaScript không hoạt động trên trình duyệt ở máy người dùng.

<!DOCTYPE html>
<html>
<body>

<p id="demo"></p>

<script>
document.getElementById("demo").innerHTML = "Hello Dammio!";
</script>

<noscript>Rất tiếc, trình duyệt của bạn không hỗ trợ JavaScript!</noscript>
</body>
</html>

Kết luận: Bài viết đã trình bày kiến thức rất cơ bản về JavaScript, một ngôn ngữ kịch bản có vai trò rất quan trọng trong việc thiết kế Web. Mời bạn theo dõi các phần tiếp theo.

Bình luận Facebook

Để lại bình luận

2 Comments on "[HTML/HTML5] Phần 21: Javascript"

Thông báo khi có
avatar
1000
Sắp xếp theo:   mới nhất | cũ nhất | nhiều bình chọn nhất
trackback

[…] Đăng ngày 29 Tháng Tám, 20173 Tháng Chín, 2017 bởi dammio 22 lượt xem (adsbygoogle = window.adsbygoogle || []).push({}); << Bài trước Trang mục lục Bài tiếp theo >> […]

trackback

[…] 2017 bởi dammio 1 lượt xem (adsbygoogle = window.adsbygoogle || []).push({}); << Bài trước Trang mục lục Bài tiếp theo […]

wpDiscuz