Bài 10: JavaScript cơ bản – Biến, kiểu dữ liệu, DOM & sự kiện
🎯 Mục tiêu
- Hiểu JavaScript dùng để làm gì trong web tĩnh
- Biết khai báo biến:
let,const - Biết kiểu dữ liệu cơ bản: number, string, boolean, array, object
- Biết thao tác DOM: chọn phần tử, đổi nội dung, đổi style
- Biết bắt sự kiện: click, input
📘 Lý thuyết ngắn
1) Biến trong JavaScript
// const: giá trị không đổi (khuyên dùng nếu không cần đổi)
const name = "An";
// let: giá trị có thể thay đổi
let age = 16;
age = 17;
2) Kiểu dữ liệu cơ bản
const n = 10; // number
const s = "Xin chào"; // string
const ok = true; // boolean
const arr = ["HTML","CSS"]; // array
const obj = { name:"A", age:16 }; // object
3) DOM là gì?
DOM là “cây” các phần tử HTML. JavaScript có thể “đụng vào” HTML để thay đổi nội dung, màu sắc, ẩn/hiện...
4) Chọn phần tử và bắt sự kiện
const btn = document.getElementById("btn");
btn.addEventListener("click", () => {
alert("Bạn vừa click!");
});
💻 Code mẫu (Mini app: đổi giao diện + đếm click + chào theo tên)
<!doctype html>
<html lang="vi">
<head>
<meta charset="utf-8">
<title>Bài 10 - JavaScript cơ bản</title>
<style>
body{
font-family: Arial;
padding: 24px;
background:#f7f8fa;
line-height: 1.7;
}
.card{
max-width: 760px;
margin: 0 auto;
background:#fff;
border:1px solid #e5e5e5;
border-radius: 12px;
padding: 18px;
}
h1{ margin-top:0; text-align:center; }
.row{
display:flex;
gap:10px;
flex-wrap:wrap;
align-items:center;
justify-content:center;
margin-top: 10px;
}
input{
padding:10px 12px;
border:1px solid #ddd;
border-radius: 10px;
min-width: 220px;
}
button{
padding:10px 14px;
border:0;
border-radius: 10px;
cursor:pointer;
background:#111;
color:#fff;
font-weight:600;
}
button.blue{ background:#2563eb; }
.box{
margin-top: 14px;
padding: 12px;
border-radius: 12px;
background:#f3f4f6;
border:1px solid #e5e7eb;
}
.badge{
display:inline-block;
padding:2px 10px;
border-radius: 999px;
background:#eef2ff;
border:1px solid #dbeafe;
font-size:12px;
}
.dark{
background:#0b1220;
color:#e5e7eb;
}
.dark .card{
background:#0f172a;
border-color:#1f2937;
}
.dark input{
background:#0b1220;
color:#e5e7eb;
border-color:#334155;
}
.dark .box{
background:#111827;
border-color:#1f2937;
}
</style>
</head>
<body>
<div class="card">
<h1 id="title">Mini app JavaScript</h1>
<p>
JavaScript giúp web có tương tác. Hãy nhập tên và thử các nút bên dưới.
<span class="badge">DOM + Event</span>
</p>
<div class="row">
<input id="name" type="text" placeholder="Nhập tên của bạn...">
<button class="blue" id="btnHello">Chào</button>
<button id="btnClick">Đếm click</button>
<button id="btnTheme">Đổi theme</button>
</div>
<div class="box" id="out">
Kết quả sẽ hiển thị ở đây.
</div>
</div>
<script>
// 1) Khai báo biến
const inputName = document.getElementById("name");
const btnHello = document.getElementById("btnHello");
const btnClick = document.getElementById("btnClick");
const btnTheme = document.getElementById("btnTheme");
const out = document.getElementById("out");
const title = document.getElementById("title");
let clickCount = 0; // number
let isDark = false; // boolean
// 2) Sự kiện click: chào theo tên
btnHello.addEventListener("click", function(){
const name = inputName.value.trim(); // string
if(name.length === 0){
out.textContent = "❌ Bạn chưa nhập tên.";
return;
}
out.innerHTML = "✅ Xin chào " + name + "! Chúc bạn học tốt.";
});
// 3) Sự kiện click: đếm số lần bấm
btnClick.addEventListener("click", function(){
clickCount++;
out.textContent = "Bạn đã bấm nút Đếm click: " + clickCount + " lần.";
title.textContent = "Mini app JavaScript (" + clickCount + ")";
});
// 4) Đổi theme sáng/tối bằng class trên body
btnTheme.addEventListener("click", function(){
isDark = !isDark;
document.body.classList.toggle("dark", isDark);
out.textContent = isDark ? "Đã bật theme tối." : "Đã bật theme sáng.";
});
// 5) Sự kiện input: gõ tới đâu hiển thị tới đó
inputName.addEventListener("input", function(){
const name = inputName.value.trim();
if(name.length === 0){
title.textContent = "Mini app JavaScript";
} else {
title.textContent = "Xin chào, " + name;
}
});
</script>
</body>
</html>
👉 Copy code → lưu thành bai10.html → mở bằng Chrome.
Thử gõ tên, bấm các nút để hiểu DOM + Event hoạt động như thế nào.
✍️ Bài tập
- Thêm nút “Reset” để đưa
clickCountvề 0 và reset tiêu đề. - Nếu tên dài hơn 12 ký tự, hiển thị cảnh báo “Tên hơi dài”.
- (Nâng cao) Lưu theme sáng/tối vào
localStorageđể mở lại vẫn giữ. - (Nâng cao) Khi nhấn Enter trong ô input, tự động bấm nút “Chào”.
✅ Đáp án gợi ý
1) Nút Reset (gợi ý)
// HTML
<button id="btnReset">Reset</button>
// JS
const btnReset = document.getElementById("btnReset");
btnReset.addEventListener("click", function(){
clickCount = 0;
out.textContent = "Đã reset.";
title.textContent = "Mini app JavaScript";
});
2) Tên dài hơn 12 ký tự
if(name.length > 12){
out.textContent = "⚠️ Tên hơi dài.";
}
3) Lưu theme bằng localStorage (gợi ý)
// khi đổi theme
localStorage.setItem("theme", isDark ? "dark" : "light");
// khi tải trang
const saved = localStorage.getItem("theme");
if(saved === "dark"){
isDark = true;
document.body.classList.add("dark");
}
4) Nhấn Enter để chào
inputName.addEventListener("keydown", function(e){
if(e.key === "Enter"){
btnHello.click();
}
});
📌 Danh sách bình luận