TỔNG HỢP KIẾN THỨC LẬP TRÌNH WEB

1. CSS Position: Relative vs. Absolute

Sự khác biệt cốt lõi nằm ở điểm tham chiếu và vị trí của phần tử trong luồng văn bản (document flow).

Tình huống Responsive:

Tạo một "Card" sản phẩm với nhãn "Hot Sale" ở góc. Set position: relative cho Card và position: absolute cho nhãn. Điều này giúp nhãn luôn cố định ở góc Card bất kể kích thước màn hình thay đổi.

Lưu ý Deploy: Cần sử dụng đơn vị linh hoạt như % hoặc rem để tránh việc phần tử absolute bị đè lấp nội dung khác trên thiết bị di động.

2. Quy trình Đăng ký Domain & Hosting

Các bước thực hiện:

  1. Đăng ký Domain: Mua tên miền tại các nhà cung cấp uy tín.
  2. Thuê Hosting: Chọn nơi lưu trữ phù hợp (Shared Host, VPS, hoặc Cloud).
  3. Cấu hình DNS: Trỏ bản ghi (A Record/CNAME) từ Domain về IP của Hosting.

Vai trò của DNS: Đóng vai trò "thông dịch viên", chuyển đổi tên miền (ví dụ: mysite.com) sang địa chỉ IP của máy chủ.

Công cụ hỗ trợ Deploy nhanh:

3. So sánh Let, Const và Var

Đặc tính var let const
Scope Function scope Block scope {} Block scope {}
Hoisting Có (giá trị undefined) Có (nằm trong TDZ) Có (nằm trong TDZ)
Gán lại Có Có Không

Ví dụ minh họa & Debug:

if (true) {
    var a = 10;
    let b = 20;
}
console.log(a); // 10
console.log(b); // Lỗi: ReferenceError: b is not defined

Cách Debug: Sử dụng tab Sources trong Chrome DevTools, đặt Breakpoint để theo dõi biến trong mục Scope ở cột bên phải.

4. Event Delegation trong JavaScript

Khái niệm: Là kỹ thuật gán sự kiện cho phần tử cha thay vì từng phần tử con đơn lẻ, tận dụng cơ chế Event Bubbling (sự kiện nổi bọt).

Ví dụ Dynamic List:

document.querySelector('#myList').addEventListener('click', function(e) {
    if(e.target && e.target.nodeName === "LI") {
        alert("Bạn đã click vào: " + e.target.innerText);
    }
});

Lợi ích tối ưu: