Mảng (Array) trong JavaScript

Đối tượng Array được sử dụng để lưu trữ danh sách các giá trị. Có hai cách phổ biến để khởi tạo mảng:

• Sử dụng từ khóa new Array().
• Sử dụng cú pháp dấu ngoặc vuông [] (khuyên dùng).

const danhSachCu = new Array(10, 20, 30);
const danhSachMoi = [10, 20, 30];

JavaScript cho phép truy cập và gán giá trị tại bất kỳ chỉ mục nào. Kích thước mảng có thể thay đổi động và chứa nhiều kiểu dữ liệu khác nhau.

danhSachMoi[5] = "Xin chào";
console.log(danhSachMoi[5]);

Thuộc tính length trả về số lượng phần tử hiện có trong mảng.

for (let index = 0; index < danhSachMoi.length; index++) {
    console.log(danhSachMoi[index]);
}

Một số phương thức xử lý mảng thường gặp:

• forEach(): Duyệt qua từng phần tử.
• push(): Thêm phần tử vào cuối mảng.
• splice(): Xóa hoặc thay thế phần tử.

// Duyệt mảng
danhSachMoi.forEach((phanTu) => {
    console.log(phanTu);
});

// Thêm phần tử
danhSachMoi.push(100);

// Xóa phần tử (bắt đầu từ vị trí 1, xóa 2 phần tử)
danhSachMoi.splice(1, 2);

Chuỗi (String)

Chuỗi có thể được khai báo như một đối tượng hoặc dạng nguyên thủy.

const vanBan = new String("JavaScript");
const noiDung = "JavaScript";

Thuộc tính length cho biết độ dài chuỗi. Các phương thức xử lý bao gồm:

• charAt(index): Lấy ký tự tại vị trí chỉ định.
• indexOf(): Tìm vị trí xuất hiện của chuỗi con.
• trim(): Loại bỏ khoảng trắng ở hai đầu.
• substring(start, end): Cắt chuỗi (không bao gồm ký tự tại vị trí end).

const chuoiGoc = "Hello World";
const chuoiCoKhoangTrang = "  Hello World  ";

console.log(chuoiGoc.length); // 11
console.log(chuoiGoc.charAt(4)); // o
console.log(chuoiGoc.indexOf("lo")); // 3
console.log(chuoiCoKhoangTrang.trim()); // "Hello World"
console.log(chuoiGoc.substring(0, 5)); // Hello

Đối tượng tùy chỉnh (Custom Object)

Đối tượng được định nghĩa bằng cặp ngoặc nhọn, chứa các cặp khóa-giá trị và phương thức.

const hoSoNhanVien = {
    hoTen: "Nguyen Van A",
    tuoi: 25,
    gioiTinh: "Nam",
    chamCong: function() {
        console.log("Đã điểm danh");
    }
};

Truy cập thuộc tính hoặc gọi phương thức:

console.log(hoSoNhanVien.hoTen);
hoSoNhanVien.chamCong();

Định dạng JSON

JSON (JavaScript Object Notation) là chuẩn trao đổi dữ liệu dạng văn bản, cú pháp tương tự đối tượng JavaScript nhưng yêu cầu khóa và chuỗi giá trị phải nằm trong ngoặc kép.

const duLieuJSON = '{"hoTen":"Nguyen Van A","tuoi":25,"diaChi":["Ha Noi", "Da Nang"]}';

Để sử dụng, cần chuyển đổi giữa chuỗi JSON và đối tượng JavaScript:

• JSON.parse(): Chuyển chuỗi JSON thành đối tượng JS.
• JSON.stringify(): Chuyển đối tượng JS thành chuỗi JSON.

const doiTuongJS = JSON.parse(duLieuJSON);
console.log(doiTuongJS.hoTen);

const chuoiKetQua = JSON.stringify(hoSoNhanVien);
console.log(chuoiKetQua);

Mô hình đối tượng trình duyệt (BOM)

BOM (Browser Object Model) cung cấp các đối tượng tương tác với cửa sổ trình duyệt.

• Window: Đối tượng cửa sổ chính.
• Navigator: Thông tin trình duyệt.
• Location: Thông tin URL.
• History: Lịch sử duyệt web.

Các phương thức hữu ích của Window:

• alert(), confirm(), prompt(): Hộp thoại tương tác.
• setInterval(): Thực thi lặp lại theo chu kỳ.
• setTimeout(): Thực thi sau một khoảng thời gian.

// Hộp thoại xác nhận
const ketQua = confirm("Bạn có đồng ý không?");
console.log(ketQua);

// Bộ đếm thời gian
let demLan = 0;
setInterval(() => {
    demLan++;
    console.log("Lần thứ: " + demLan);
}, 2000);

setTimeout(() => {
    console.log("Chỉ chạy một lần sau 3 giây");
}, 3000);

Đối tượng location cho phép điều hướng trang:

console.log(location.href);
// location.href = "https://www.example.com";

Mô hình đối tượng tài liệu (DOM)

DOM (Document Object Model) biểu diễn cấu trúc HTML dưới dạng cây đối tượng, cho phép JavaScript thao tác với nội dung,样式 và sự kiện.

Các thành phần chính:

• Document: Đại diện cho toàn bộ trang.
• Element: Các thẻ HTML (div, body, v.v.).
• Attribute: Các thuộc tính của thẻ.
• Text: Nội dung văn bản.

Phương thức truy xuất phần tử:

• getElementById(): Lấy theo ID (trả về 1 phần tử).
• getElementsByTagName(): Lấy theo tên thẻ (trả về mảng).
• getElementsByName(): Lấy theo thuộc tính name.
• getElementsByClassName(): Lấy theo class.

Ví dụ minh họa tương tác DOM và sự kiện:

<!DOCTYPE html>
<html lang="vi">
<head>
    <meta charset="UTF-8">
    <title>Ví dụ DOM</title>
</head>
<body>
    <img src="img/den_tat.png" id="bonDen" alt="Đèn"><br>
    <button onclick="batDen()">Bật đèn</button>
    <button onclick="tatDen()">Tắt đèn</button><br><br>
    
    <input type="text" id="nhapTen" value="Example" onfocus="chuyenThuong()" onblur="chuyenHoa"><br><br>
    
    <input type="checkbox" name="soThich"> Đọc sách
    <input type="checkbox" name="soThich"> Du lịch
    <input type="checkbox" name="soThich"> Code<br><br>
    
    <button onclick="chonTatCa()">Chọn tất cả</button>
    <button onclick="daoNguoc()">Bỏ chọn tất cả</button>

    <script>
        function batDen() {
            const hinhAnh = document.getElementById("bonDen");
            hinhAnh.src = "img/den_bat.png";
        }
        function tatDen() {
            const hinhAnh = document.getElementById("bonDen");
            hinhAnh.src = "img/den_tat.png";
        }
        function chuyenThuong() {
            const input = document.getElementById("nhapTen");
            input.value = input.value.toLowerCase();
        }
        function chuyenHoa() {
            const input = document.getElementById("nhapTen");
            input.value = input.value.toUpperCase();
        }
        function chonTatCa() {
            const danhSachCheck = document.getElementsByName("soThich");
            for (let i = 0; i < danhSachCheck.length; i++) {
                danhSachCheck[i].checked = true;
            }
        }
        function daoNguoc() {
            const danhSachCheck = document.getElementsByName("soThich");
            for (let i = 0; i < danhSachCheck.length; i++) {
                danhSachCheck[i].checked = false;
            }
        }
    </script>
</body>
</html>