[HTML/HTML5] Phần 21: Javascript

Cập nhật lần cuối: 04/09/2017 lúc 20:47:47

Để 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ài trước

Trang mục lục

Bài tiếp theo >>

Liên quan: [JQuery] Phần 4: Các sự kiện trong jQuery

Trích dẫn bài viết

APA:
Dammio. (2017). [HTML/HTML5] Phần 21: Javascript. https://www.dammio.com/2017/09/03/htmlhtml5-phan-21-javascript.
BibTeX:
@misc{dammio, author = {Dammio}, title = {[HTML/HTML5] Phần 21: Javascript}, year = {2017}, url = {https://www.dammio.com/2017/09/03/htmlhtml5-phan-21-javascript}, urldate = {2024-12-05} }

Kết nối