Tổng Quan Về JavaScript
Làm chủ JavaScript đòi hỏi sự hiểu biết vững chắc về nền tảng trước khi đi sâu vào các tính năng nâng cao. Mục tiêu của tài liệu này là cung cấp lộ trình học tập rõ ràng, tránh gây quá tải thông tin cho người mới. Chúng ta sẽ tập trung vào việc xây dựng tư duy lập trình thay vì chỉ ghi nhớ cú pháp đơn thuần.
Cài Đặt Môi Trường Và Chạy Đoạn Mã Đầu Tiên
Khác với nhiều ngôn ngữ lập trình khác, JavaScript có thể chạy trực tiếp trên hầu hết các trình duyệt web hiện đại mà không cần cài đặt phần mềm bổ sung. Ngoài ra, bạn cũng có thể sử dụng môi trường thực thi như Node.js để chạy mã độc lập trên máy tính cá nhân.
Cách thức nhanh nhất để bắt đầu là sử dụng công cụ Developer Tools tích hợp sẵn trong trình duyệt (thường truy cập bằng phím F12 hoặc Ctrl+Shift+I).
<!DOCTYPE html>
<html lang="vi">
<head>
<meta charset="UTF-8">
<title>Ứng Dụng JS Đơn Giản</title>
</head>
<body>
<div id="bao-cao"></div>
<script>
const cauLenhGuiHienThi = document.getElementById('bao-cao');
cauLenhGuiHienThi.innerText = "Chào mừng đến với JavaScript!";
</script>
</body>
</html>Trong ví dụ trên, chúng ta nhúng trực tiếp đoạn mã script vào file HTML để hiển thị nội dung lên một thẻ div.
Khai Báo Và Sử Dụng Biến
Biến là nơi lưu trữ dữ liệu để xử lý sau này. Trong JavaScript phiên bản hiện đại, ưu tiên sử dụng let cho biến có thể thay đổi giá trị và const cho hằng số không đổi. Tránh sử dụng var cũ vì phạm vi toàn cục của nó dễ gây xung đột tên biến.
const tenNguoiDung = "Nam";
let tuoiHienTai = 25;
tuoiHienTai += 1; // Cập nhật tuổi
console.log(`Người dùng: ${tenNguoiDung}, Tuổi: ${tuoiHienTai}`);Cấu Trúc Dữ Liệu Cơ Bản
JavaScript là ngôn ngữ có kiểu dữ liệu động (loosely typed), nghĩa là biến không bị giới hạn bởi một kiểu cụ thể cố định sau khi khai báo.
Xâu Ký Tự (String)
Dùng để chứa văn bản. Có thể sử dụng ngoặc kép hoặc ngoặc đơn. Để chèn biến vào chuỗi, dùng template literals với ký hiệu \${}.
const diaChi = "Hà Nội";
const moTaDiaDiem = `Địa điểm du lịch tại ${diaChi};`;Số Học Và Logic (Number & Boolean)
Toán tử cộng (+) có hai chức năng: cộng số hoặc nối chuỗi tùy thuộc vào đối số tham gia.
const soA = 10;
const chuoiB = "20";
// Kết quả là chuỗi "1020" chứ không phải số 30
console.log(typeof(soA + chuoiB)); Boolean biểu diễn trạng thái đúng (true) hoặc sai (false), thường dùng để kiểm tra điều kiện.
Mảng Và Đối Tượng (Array & Object)
Mảng dùng để lưu danh sách các phần tử. Đối tượng dùng để mô tả thực thể phức tạp với các cặp khóa-giá trị.
// Mảng danh sách sản phẩm
const sanPham = ["Laptop", "Chuột", "Bàn phím"];
// Đối tượng thông tin người dùng
const thongTinCaNhan = {
hoTen: "Lan Anh",
chucVu: "Frontend Dev",
tinhTrang: true
};Toán Tử Trong JavaScript
Toán Tử Số Học
Bao gồm cộng (+), trừ (-), nhân (*), chia (/) và lấy phần dư (%). Lưu ý toán tử tăng giảm (++, --). x++ trả về giá trị cũ rồi tăng lên, còn ++x tăng lên rồi trả về giá trị mới.
let demSo = 5;
demSo++;
console.log(demSo); // In ra 6Toán Tử So Sánh
Nên dùng === và !== để đảm bảo kiểm tra cả giá trị và kiểu dữ liệu, tránh sự ép kiểu ngầm định của toán tử ==.
console.log(5 === "5"); // false
console.log(5 == "5"); // trueCấu Trúc Điều Khiển
Rẽ Nhánh If... Else
Cho phép thực thi khối lệnh khác nhau tùy thuộc vào kết quả kiểm tra điều kiện.
const diemSo = 85;
if (diemSo >= 80) {
console.log("Xếp loại Giỏi");
} else if (diemSo >= 50) {
console.log("Xếp loại Trung bình");
} else {
console.log("Không đạt yêu cầu");
}Vòng Lặp (Loops)
Có ba cấu trúc vòng lặp chính:
for: Khi biết rõ số lần lặp.while: Khi điều kiện dừng phụ thuộc vào trạng thái động.for...of: Duyệt qua các phần tử của mảng/iterable.
const mangThuGian = ['Thứ Hai', 'Thứ Ba', 'Thứ Tư'];
for (let ngay of mangThuGian) {
console.log(`Hôm nay là: ${ngay}`);
}Lệnh Switch
Thay thế tốt cho chuỗi if...else if khi kiểm tra nhiều giá trị cụ thể của cùng một biến.
const chonMenu = "home";
switch (chonMenu) {
case "home":
console.log("Trang chủ");
break;
default:
console.log("Trang chưa xác định");
}Hàm Và Phạm Vi (Scope)
Hàm giúp tái sử dụng mã nguồn. Hàm arrow (() => {}) là cách viết gọn gàng được ưa chuộng trong ES6. Một hàm có thể nhận tham số và trả về kết quả.
// Khai báo hàm theo chuẩn hiện đại
const tinhTienVeMayBay = (soDem, giaVe) => {
return soDem * giaVe;
};
const tongTien = tinhTienVeMayBay(2, 3000000);
console.log(tongTien);Lưu ý về sự khác biệt giữa Function Declaration (nổi lên phía trên do Hoisting) và Function Expression.
Đối Tượng Và Prototype
Đối tượng là bộ sưu tập các thuộc tính và phương thức. Bạn có thể tạo đối tượng bằng literal notation hoặc constructor function.
function SanPham(loai, maMau) {
this.loaiSanPham = loai;
this.manSac = maMau;
this.moTa = function() {
return `${this.loaiSanPham} màu ${this.manSac}`;
};
}
const doiTuongVd = new SanPham("Áo thun", "Xanh Navy");
console.log(doiTuongVd.moTa());Xử Lý Sự Kiện (Event Handling)
Sự kiện là hành động của người dùng tương tác với trang web (click, keypress, submit...). Thay vì gắn trực tiếp vào thẻ HTML, hãy dùng addEventListener để quản lý linh hoạt hơn.
const nutChuot = document.querySelector('.btn-dong-y');
nutChuot.addEventListener('click', () => {
console.log("Sự kiện click đã kích hoạt");
});
document.body.addEventListener('keypress', (event) => {
if (event.key === 'Enter') {
console.log("Phím Enter được nhấn");
}
});Mô Hình Đối Tượng Tài Liệu (DOM)
DOM là cây cấu trúc của trang HTML mà JavaScript có thể thao tác. Việc sửa đổi DOM ảnh hưởng trực tiếp đến giao diện người dùng.
Tạo Và Xóa Phần Tử
Sử dụng createElement để tạo phần tử mới và appendChild để đưa vào cây DOM. Ngược lại, remove() dùng để xóa phần tử.
const khoiTaoDiv = document.createElement("div");
khoiTaoDiv.classList.add("hoat-dong");
khoiTaoDiv.textContent = "Nội dung mới thêm vào";
document.body.appendChild(khoiTaoDiv);Duyệt Qua Cây DOM
Có thể di chuyển giữa các nút cha con thông qua các thuộc tính như parentNode, firstElementChild, hay nextElementSibling. Đây là kỹ năng quan trọng để thao tác cấu trúc trang động.
const phanTuCanLoc = document.querySelector(".item-mac");
const phanTuChan = phanTuCanLoc.parentElement; // Truy cập cha
console.log(phanTuChan.id);