1. Giới thiệu
JavaScript là một ngôn ngữ lập trình mạnh mẽ được sử dụng phổ biến trên web, giúp trang web của bạn trở nên sống động và tương tác hơn. JavaScript có thể được sử dụng trực tiếp trong tài liệu HTML để thực hiện các tác vụ như thay đổi nội dung, xử lý sự kiện, xác thực dữ liệu, và nhiều hơn nữa.
Trong bài viết này, chúng ta sẽ tìm hiểu cách nhúng JavaScript vào HTML, các cách viết mã JavaScript cơ bản, và ví dụ minh họa cụ thể.
2. Cách nhúng JavaScript vào HTML
JavaScript có thể được nhúng vào HTML bằng cách sử dụng thẻ <script>. Có ba cách chính để nhúng JavaScript vào HTML:
a. Nhúng JavaScript trực tiếp trong phần <head> hoặc <body>
Bạn có thể nhúng mã JavaScript trực tiếp trong tài liệu HTML bên trong thẻ <script>. Thông thường, mã JavaScript được đặt bên trong thẻ <body>, nhưng cũng có thể đặt trong thẻ <head>.
<!DOCTYPE html>
<html lang="vi">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Ví dụ JavaScript trong HTML</title>
<script>
function sayHello() {
alert("Chào mừng bạn đến với CodeTutHub!");
}
</script>
</head>
<body>
<h1>Chào mừng bạn đến với CodeTutHub</h1>
<button onclick="sayHello()">Nhấp vào đây!</button>
</body>
</html>b. Nhúng JavaScript ngoài file HTML (External JavaScript)
JavaScript cũng có thể được viết trong một file riêng biệt với phần mở rộng .js và được nhúng vào tài liệu HTML thông qua thẻ <script> với thuộc tính src chỉ đến file JavaScript.
Ví dụ:
- Tạo file
script.js:
function sayHello() {
alert("Chào mừng bạn đến với CodeTutHub từ file JS!");
}- Nhúng vào HTML:
<!DOCTYPE html>
<html lang="vi">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Ví dụ External JavaScript</title>
<script src="script.js"></script>
</head>
<body>
<h1>Chào mừng bạn đến với CodeTutHub</h1>
<button onclick="sayHello()">Nhấp vào đây!</button>
</body>
</html>c. Nhúng JavaScript nội tuyến (Inline JavaScript)
Bạn cũng có thể nhúng JavaScript trực tiếp vào các phần tử HTML bằng thuộc tính onclick, onmouseover, hoặc các sự kiện khác.
<!DOCTYPE html>
<html lang="vi">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Ví dụ Inline JavaScript</title>
</head>
<body>
<h1>Chào mừng bạn đến với CodeTutHub</h1>
<button onclick="alert('Chào mừng bạn đến với CodeTutHub!')">Nhấp vào đây!</button>
</body>
</html>3. Các câu lệnh JavaScript cơ bản
a. Thay đổi nội dung HTML
Bạn có thể sử dụng JavaScript để thay đổi nội dung của một phần tử HTML bằng cách sử dụng document.getElementById().
Ví dụ:
<!DOCTYPE html>
<html lang="vi">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Thay đổi nội dung HTML bằng JavaScript</title>
<script>
function changeContent() {
document.getElementById("demo").innerHTML = "Nội dung đã được thay đổi!";
}
</script>
</head>
<body>
<h1>Chào mừng bạn đến với CodeTutHub</h1>
<p id="demo">Đây là đoạn văn bản ban đầu.</p>
<button onclick="changeContent()">Nhấp để thay đổi nội dung</button>
</body>
</html>b. Thay đổi kiểu dáng CSS của phần tử
JavaScript cũng có thể thay đổi kiểu dáng của các phần tử HTML bằng cách chỉnh sửa thuộc tính style.
Ví dụ:
<!DOCTYPE html>
<html lang="vi">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Thay đổi kiểu dáng bằng JavaScript</title>
<script>
function changeStyle() {
document.getElementById("text").style.color = "red";
document.getElementById("text").style.fontSize = "20px";
}
</script>
</head>
<body>
<h1>Chào mừng bạn đến với CodeTutHub</h1>
<p id="text">Văn bản này sẽ thay đổi màu sắc và kích thước.</p>
<button onclick="changeStyle()">Nhấp để thay đổi kiểu dáng</button>
</body>
</html>c. Ẩn và hiển thị phần tử
Sử dụng JavaScript, bạn có thể ẩn hoặc hiển thị các phần tử trên trang.
Ví dụ:
<!DOCTYPE html>
<html lang="vi">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Ẩn và hiển thị phần tử bằng JavaScript</title>
<script>
function toggleVisibility() {
var x = document.getElementById("toggleText");
if (x.style.display === "none") {
x.style.display = "block";
} else {
x.style.display = "none";
}
}
</script>
</head>
<body>
<h1>Chào mừng bạn đến với CodeTutHub</h1>
<p id="toggleText">Văn bản này sẽ bị ẩn hoặc hiển thị khi nhấp vào nút.</p>
<button onclick="toggleVisibility()">Nhấp để ẩn/hiển thị</button>
</body>
</html>4. Xử lý sự kiện trong JavaScript
Sự kiện (events) trong JavaScript là những hành động hoặc hoạt động được kích hoạt bởi người dùng hoặc trình duyệt. Một số sự kiện phổ biến bao gồm:
onclick: Xảy ra khi người dùng nhấp chuột vào phần tử.onmouseover: Xảy ra khi người dùng di chuột qua phần tử.onload: Xảy ra khi trang hoặc phần tử đã tải xong.
Ví dụ: Sử dụng onmouseover để thay đổi ảnh khi di chuột qua
<!DOCTYPE html>
<html lang="vi">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Thay đổi ảnh khi di chuột qua</title>
<script>
function changeImage() {
document.getElementById("image").src = "https://via.placeholder.com/150/ff0000";
}
function restoreImage() {
document.getElementById("image").src = "https://via.placeholder.com/150";
}
</script>
</head>
<body>
<h1>Chào mừng bạn đến với CodeTutHub</h1>
<img id="image" src="https://via.placeholder.com/150" onmouseover="changeImage()" onmouseout="restoreImage()" alt="Ảnh ví dụ">
</body>
</html>5. Kết luận
JavaScript là một công cụ mạnh mẽ giúp trang web của bạn trở nên tương tác hơn và cung cấp nhiều tính năng động. Việc sử dụng JavaScript trong HTML rất dễ dàng, chỉ cần nhúng mã vào thẻ <script> hoặc sử dụng file JavaScript bên ngoài. Với những kiến thức cơ bản trong bài viết này, bạn đã có thể bắt đầu tạo ra những trang web động và tương tác với người dùng trên CodeTutHub.
Hãy thử nghiệm thêm các sự kiện khác nhau và các cách xử lý DOM trong dự án của bạn để nắm vững JavaScript!
0 Bình luận