1. Thẻ <script>
Trước khi chúng ta đi sâu vào việc học HTML, mình muốn làm quen với một thứ tuyệt vời khác – ngôn ngữ JavaScript.
JavaScript là một ngôn ngữ lập trình mạnh mẽ, được sử dụng để tạo các trang web có tính động và tương tác. Nó cho phép phản hồi hành động của người dùng, thay đổi nội dung trang web, tương tác với servers và nhiều cách khác giúp tăng sự hài lòng của người dùng khi sử dụng website.
Hiện tại chúng ta sẽ không học JavaScript, nhưng đôi khi mình sẽ thêm nó vào ví dụ, vì vậy hãy cùng xem làm thế nào để dính kèm JavaScript vào một tài liệu HTML.
Thẻ <script> được dùng để nhúng code JavaScript vào tài liệu HTML.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Giới thiệu về JavaScript</title>
</head>
<body>
<h1>Chào mừng đến trang web của mình!</h1>
<script>
// Code JavaScript của bạn ở đây
alert('Chào thế giới!');
</script>
</body>
</html>
Trong ví dụ này, thẻ <script> được sử dụng để nhúng một đoạn code JavaScript đơn giản, hiện ra một cửa sổ thông báo với thông điệp "Chào thế giới!".
2. Gắn script
Đôi khi tốt hơn là lưu giữ code JavaScript trong một file riêng. Điều này cải thiện tổ chức code và tái sử dụng. Để kết nối file JavaScript cũng sử dụng thẻ <script>, và với thuộc tính src có thể chỉ định tên file JavaScript.
Kết nối một file JavaScript bên ngoài:
</h1>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Giới thiệu về JavaScript</title>
<script src="script.js" defer></script>
</head>
<body>
<h1>Chào mừng đến trang web của mình!</h1>
</body>
</html>
Tệp HTML này yêu cầu trình duyệt kết nối file JavaScript, được gọi là script.js, và có thể chứa cùng một đoạn code như trong ví dụ trên:
//script.js:
// Code JavaScript của bạn ở đây
alert('Chào thế giới!');
Thuộc tính defer được sử dụng để chỉ ra rằng trình duyệt nên thực thi script sau khi toàn bộ tài liệu HTML được tải và hiển thị hoàn chỉnh.
3. Inline-code
Bạn có nhớ cách mình viết css-styles trực tiếp bên trong thuộc tính style của phần tử?
<p style="color:red"> Đỏ</p>
Bạn cũng có thể viết code JavaScript theo cách tương tự.
Giả sử chúng ta muốn khi nhấn vào một phần tử thì màu của nó chuyển sang màu xanh. Khi đó cần viết đoạn code sau:
<p style="color:red" onclick="this.style.color = 'blue';">Đỏ</p>
Code JavaScript được tô màu xanh lá, nó sẽ chạy khi người dùng nhấp vào phần tử <p>. Đơn giản, đúng không?
-
onclick: Thuộc tính HTML, chỉ chức năng được thực thi khi nhấp vào phần tử. this: Tham chiếu đến phần tử mà người dùng đã nhấp vào.-
style.color: Thuộc tính CSS, thay đổi màu văn bản của phần tử.
GO TO FULL VERSION