JavaScript làm cho các trang HTML năng động hơn và tương tác hơn.
Như hình trên là ví dụ về sự tương tác của JavaScript trong HTML. Cái này tôi sẽ viết kỹ trong series Học JavaScript của tôi. Còn trong bài này tôi sẽ viết về một số thẻ trong HTML liên quan đến JavaScript
1. Thẻ <script>
Thẻ <script> được sử dụng để xác định các câu lệnh của JavaScript.
Thẻ <script> có thể chứa các đoạn mã được viết trực tiếp hoặc liên kết tới một đoạn mã được viết bên ngoài thông qua thuộc tính src.
JavaScript được sử dụng để tạo ra các trang web có tính tương tác:
+ Chèn nội dung động vào trang web
+ Đáp ứng lại các thao tác của người dùng
+ Lấy thông tin từ máy tính người sử dụng
+ Thực hiện tính toán trên máy tính người sử dụng
+ Tạo các ứng dụng, chức năng cho trang web
Ngoài ra còn nhiều ứng dụng khác nữa.
Để chọn một phần tử HTML, JavaScript rất thường sử dụng cú pháp:
document.getElementById(“tên id”)
Ví dụ tôi dùng JavaScript để viết “Hello JavaScript!” thành một phần tử HTML với id = “demo”
Các bạn cần lưu ý thêm rằng Java và JavaScript là hai ngôn ngữ hoàn toàn khác nhau.
2. Các ứng dụng đơn giản của JavaScript trong HTML
2.1 JavaScript có thể thay đổi nội dung HTML
2.2 JavaScript có thể thay đổi các kiểu (style) HTML
2.3 JavaScript có thể thay đổi thuộc tính (attribute) HTML
Như hình trên bạn chỉ cần bấm vào chữ Tắt đèn nó sẽ hiển thị hình 1, nếu bạn bấm vào chữ Bật đèn nó sẽ hiển thị hình 2.
3. Thẻ <noscript>
Thẻ <noscript> có thể chứa các thẻ HTML khác.
Thẻ <noscript> được sử dụng để hiển thị nội dung thay thế nếu người dùng tắt tính năng chạy script trên trình duyệt hoặc trình duyệt của họ không hỗ trợ chạy các đoạn script.
Như hình trên các bạn thấy khi trình duyệt không hỗ trợ JavaScript thì nó sẽ xuất hiện đoạn văn trong thẻ <noscript>
4. Các bài tập
4.1 Bài tập 1
Dùng JavaScript để thay đổi nội dung của thẻ <p> thành “Hello World!”.
<!DOCTYPE html> <html> <body> <p id="demo">Hi.</p> <script> // Viết code của bạn ở đây </script> </body> </html>
Câu trả lời của bài tập 1
<!DOCTYPE html>
<html>
<body>
<p id="demo">Hi.</p>
<script>
document.getElementById("demo").innerHTML = "Hello World!";
</script>
</body>
</html>
4.2 Bài tập 2
Dùng JavaScript để thay đổi cỡ chữ trong thẻ <p> thành 40 pixels.
<!DOCTYPE html> <html> <body> <p id="demo">Hello World!</p> <script> // Viết code của bạn ở đây </script> </body> </html>
Câu trả lời của bài tập 2
<!DOCTYPE html>
<html>
<body>
<p id="demo">Hello World!</p>
<script>
document.getElementById("demo").style.fontSize = "40px";
</script>
</body>
</html>
4.3 Bài tập 3
Dùng JavaScript để làm màu nền của phần tử <p> thành màu đỏ
<!DOCTYPE html> <html> <body> <p id="demo">Hello World!</p> <script> // Viết code của bạn ở đây </script> </body> </html>
Câu trả lời của bài tập 3
<!DOCTYPE html>
<html>
<body>
<p id="demo">Hello World!</p>
<script>
document.getElementById("demo").style.backgroundColor = "red";
</script>
</body>
</html>
5. Lời cuối bài
Đến đây là chúng ta đã kết thúc phần bài viết về một số thẻ trong HTML liên quan đến JavaScript. Nếu các bạn muốn tìm hiểu kỹ hơn về JavaScript thì xem series về Học JavaScript của tôi. Ở bài sau tôi sẽ viết về các thẻ nằm trong cặp thẻ <head></head>
The post [HTML bài 25] Một số thẻ trong HTML liên quan đến JavaScript appeared first on Học online.
from WordPress http://ift.tt/2vq5Jb3
via IFTTT
Không có nhận xét nào:
Đăng nhận xét