Sau khi đã dựng được giao diện và bố cục với HTML + CSS, bây giờ là lúc chúng ta thổi linh hồn vào trang web: giúp nó biết phản hồi, tương tác, thay đổi theo hành động của người dùng.
Đó là lúc JavaScript xuất hiện và tỏa sáng
Hãy tưởng tượng bạn đang có một nút “Bấm vào tôi”, nhưng khi bấm thì… chẳng có gì xảy ra.
Hay bạn có một trang tính điểm học sinh, nhưng không thể tự động tính điểm trung bình.
Hoặc bạn muốn làm một cái đồng hồ hiển thị thời gian thật, nhưng… HTML và CSS không thể giúp bạn làm điều đó.
Giải pháp là JavaScript – ngôn ngữ lập trình chạy ngay trong trình duyệt, giúp bạn khiến web có thể tư duy và phản ứng.
Mục tiêu bài học
- Hiểu JavaScript là gì và dùng để làm gì
- Học cách nhúng JavaScript vào trang web
- Làm quen với biến, kiểu dữ liệu, toán tử
- Viết và gọi hàm
- Dùng câu lệnh điều kiện để kiểm tra logic
- Viết chương trình đơn giản bằng JS
1. JavaScript là gì?
JavaScript là một ngôn ngữ lập trình dành cho trình duyệt.
Nó giúp bạn:
- xử lý sự kiện (click, di chuột, nhập liệu…)
- thay đổi nội dung trang web khi đang xem
- tạo hiệu ứng, game, form thông minh
- giao tiếp với server (AJAX, API…)
JavaScript chạy ngay trên trình duyệt của người dùng, không cần cài thêm gì cả.
2. Cách viết JavaScript
1. Inline trong HTML
<button onclick="alert('Xin chào!')">Bấm vào đây</button>
2. Viết trong thẻ <script>
<script>
alert("Xin chào bạn học viên!");
</script>
Đặt thường là cuối trang HTML, trước </body>, để đảm bảo HTML đã được render xong.
3. File riêng .js
<script src="script.js"></script>
Cách này được khuyên dùng để tách biệt giao diện và logic.
3. Biến trong JavaScript
Biến (variable) dùng để lưu trữ dữ liệu.
Cách khai báo:
let ten = "Minh";
const tuoi = 21;
var diaChi = "Hà Nội";
let: dùng khi biến có thể thay đổiconst: dùng khi giá trị không thay đổi (như hằng số)var: kiểu cũ, ít dùng trong code mới
let diemToan = 9;
let diemVan = 8;
let diemTB = (diemToan + diemVan) / 2;
console.log("Điểm trung bình:", diemTB);
4. Kiểu dữ liệu cơ bản
| Kiểu | Ví dụ |
|---|---|
| Number | 10, 3.14 |
| String | "Hello", 'Xin chào' |
| Boolean | true, false |
| Null | null |
| Undefined | undefined |
5. Toán tử cơ bản
// Toán học
+, -, *, /, %
// So sánh
==, ===, !=, !==, >, <, >=, <=
// Logic
&& (và), || (hoặc), ! (phủ định)
Ví dụ:
let a = 5;
let b = 10;
console.log(a + b); // 15
console.log(a > b); // false
console.log(a < b && b > 0); // true
6. Hàm – function
Hàm là một khối mã dùng để thực hiện một nhiệm vụ, và có thể được gọi lại nhiều lần.
Cách khai báo hàm:
function chaoBan(ten) {
console.log("Xin chào, " + ten + "!");
}
Gọi hàm:
chaoBan("Minh");
chaoBan("Hà");
7. Câu lệnh điều kiện – if…else
Dùng để ra quyết định trong chương trình:
let diem = 7;
if (diem >= 8) {
console.log("Giỏi");
} else if (diem >= 5) {
console.log("Trung bình");
} else {
console.log("Yếu");
}
8. Ví dụ tổng hợp: tính điểm học sinh
<button onclick="tinhDiem()">Tính điểm</button>
<script>
function tinhDiem() {
let toan = 9;
let van = 8;
let tb = (toan + van) / 2;
if (tb >= 8) {
alert("Bạn học sinh giỏi!");
} else if (tb >= 5) {
alert("Bạn học trung bình.");
} else {
alert("Cần cố gắng hơn nhé!");
}
}
</script>
9. Thực hành
- Tạo file
main.jsvà liên kết với HTML - Viết chương trình:
- Lưu tên, tuổi người dùng vào biến
- In ra câu: “Xin chào, tôi là ___, năm nay tôi ___ tuổi”
- Viết hàm kiểm tra tuổi:
- Nếu < 18: “Bạn chưa đủ tuổi đi bầu”
- Nếu từ 18–60: “Bạn là công dân trưởng thành”
- Nếu > 60: “Bạn thuộc nhóm người cao tuổi”
Bonus:
- Tạo nút HTML, khi click thì gọi hàm JS
Kết bài – bạn vừa học lập trình thật sự!
Chúc mừng bạn! Đây là bước đầu tiên bạn thật sự lập trình chứ không chỉ làm giao diện nữa.
Bạn đã biết cách:
- khai báo biến
- tính toán, kiểm tra điều kiện
- viết hàm và xử lý logic đơn giản
Trong bài tiếp theo, mình sẽ hướng dẫn bạn tương tác với trang web – ví dụ: khi người dùng bấm nút, nhập dữ liệu vào form, làm đổi màu, ẩn/hiện nội dung… Đó là lúc bạn sẽ gặp khái niệm rất thú vị: DOM và sự kiện.
Hẹn gặp bạn ở Bài 6: DOM và sự kiện – Tương tác với người dùng
Thảo luận