🚀 Web1043 - JavaScript Basic Learning

Dự án học tập JavaScript cơ bản - Web1043 Course

📖 Giới thiệu

Đây là dự án học tập JavaScript cơ bản theo chương trình Web1043. Dự án này được thiết kế để giúp bạn từ một người mới bắt đầu trở thành một JavaScript Developer có khả năng xây dựng các ứng dụng web tương tác.

Mỗi lab sẽ có một bài học mới với các kỹ năng và dự án thực tế, từ cơ bản đến nâng cao.

🎯 Mục tiêu dự án

✅ Học JavaScript từ cơ bản đến nâng cao
✅ Thực hành xây dựng các ứng dụng web tương tác
✅ Làm quen với DOM manipulation và event handling
✅ Hiểu về variables, functions, arrays, objects
✅ Phát triển kỹ năng debugging và problem solving

📊 Tiến độ học tập

Lab	Trạng thái	Project	Mô tả
Lab 1	✅ Hoàn thành	JavaScript Basics	Console.log, Variables, Alert, Prompt
Lab 2	✅ Hoàn thành	Math & Arrays	Pythagorean, Unit conversion, BMI, Array manipulation, Number guessing game
Lab 3	✅ Hoàn thành	Event Handling & Games	Calculator, Rock Paper Scissors
Lab 4	✅ Hoàn thành	Objects & Functions	Product management, Student objects, Date/Time, Window manipulation
Lab 5	✅ Hoàn thành	DOM Manipulation & Shopping Cart	Product display, Shopping cart functionality
Lab 6	✅ Hoàn thành	Local Storage	Data persistence (tích hợp trong ASM)
Lab 7	✅ Hoàn thành	API Integration	Fetch API, async/await (tích hợp trong ASM)
Lab 8	✅ Hoàn thành	Project Tổng hợp	Web application (tổng hợp qua ASM)

Tổng tiến độ: 8/8 (100%) — ĐÃ HOÀN THÀNH VÀ PASS MÔN ✅

📁 Cấu trúc dự án

web1043-javascript-basic/
├── 📁 Lab1/ ✅
│   ├── 📁 assets/
│   │   └── 📁 css/
│   │       └── style.css
│   ├── 📁 js/
│   │   └── main.js
│   └── lab1.html
├── 📁 Lab2/ ✅
│   ├── 📁 assets/
│   │   └── 📁 css/
│   │       └── style.css
│   ├── 📁 js/
│   │   └── lab2.js
│   └── lab2.html
├── 📁 Lab3/ ✅
├── 📁 Lab4/ ✅
├── 📁 Lab5/ ✅
├── 📁 Lab6/ ✅
├── 📁 Lab7/ ✅
├── 📁 Lab8/ ✅
├── 📁 ASM/
│   ├── 📁 OnTap/
│   │   ├── cau1_1.html
│   │   ├── cau2_1.html
│   │   └── cau3_1.html
│   └── 📁 BaoVeASM/
│       ├── question_1.html
│       └── question_3.html
├── 📁 resources/
│   ├── 📁 cheatsheets/
│   ├── 📁 templates/
│   └── 📁 tools/
├── 📁 projects/
│   ├── 📁 calculator/
│   ├── 📁 todo-app/
│   └── 📁 weather-app/
└── README.md

📋 Mô tả thư mục:

📁 LabX/: Mỗi thư mục chứa bài học của một lab
- labX.html: File HTML chính của lab X
- 📁 assets/: Tài nguyên (CSS, JS, hình ảnh, icons)
- 📁 js/: Thư mục chứa file JavaScript
- README.md: Hướng dẫn chi tiết cho lab đó (nếu có)
📁 resources/: Tài liệu tham khảo và công cụ hỗ trợ
📁 projects/: Các dự án tổng hợp sau khi hoàn thành

🛠️ Công nghệ và công cụ

🎨 Frontend Technologies

Technology	Version	Mục đích
	HTML5	Cấu trúc và semantic markup
	CSS3	Styling, layout và animations
	ES6+	Logic và tương tác

🛠️ Development Tools

Tool	Mục đích
	Code editor chính
	Development server
	Version control
	Debugging

📚 Lộ trình học tập chi tiết

🗓️ Lab 1: JavaScript Cơ bản ✅

Bài tập	Trạng thái	Mô tả
Bài 1	✅ Hoàn thành	Khai báo biến và gán giá trị
Bài 2	✅ Hoàn thành	Sử dụng `console.log()` để hiển thị thông tin
Bài 3	✅ Hoàn thành	Tạo cấu trúc HTML cơ bản và liên kết JavaScript
Bài 4	✅ Hoàn thành	Tạo file JavaScript riêng và sử dụng `alert()`
Bài 5	✅ Hoàn thành	Sử dụng `prompt()` để nhập dữ liệu và `document.write()` để hiển thị

Bạn đã làm gì (Lab 1)

Tạo file HTML/JS cơ bản, liên kết script đúng cách
In thông điệp, hiển thị popup, nhập dữ liệu người dùng

Kiến thức chính

Biến và kiểu dữ liệu; alert, console.log, prompt
DOM cơ bản: getElementById().innerHTML

🗓️ Lab 2: Math & Arrays ✅

Bài tập	Trạng thái	Mô tả
Bài 1	✅ Hoàn thành	Định lý Pythagorean (a²+b²=c²)
Bài 2	✅ Hoàn thành	Đổi đơn vị đất đai (m² → sào, ha)
Bài 3	✅ Hoàn thành	Tính chỉ số BMI với điều kiện
Bài 4	✅ Hoàn thành	Thao tác với mảng (unshift, pop, splice, push)
Bài 5	✅ Hoàn thành	Game đoán số bí mật (10-15)

Bạn đã làm gì (Lab 2)

Tính toán Pythagorean, BMI; đổi đơn vị diện tích
Thao tác mảng (thêm/xóa/chèn) và mini-game đoán số

Kiến thức chính

Math.sqrt, Math.random, Math.round, ép kiểu parseFloat
Array methods: push, pop, unshift, splice

🗓️ Lab 3: Event Handling & Games ✅

Bài tập	Trạng thái	Mô tả
Bài 1	✅ Hoàn thành	Máy tính phép tính cơ bản (prompt, switch-case)
Bài 2	✅ Hoàn thành	In bảng cửu chương (for, template string, DOM)
Bài 3	✅ Hoàn thành	Máy tính số học giao diện nút bấm (Calculator UI)
Bài 4	✅ Hoàn thành	Rock Paper Scissors (Kéo Búa Bao)

Bạn đã làm gì (Lab 3)

Máy tính số học dạng prompt và dạng UI nút bấm
Game kéo-búa-bao với logic thắng/thua/hòa

Kiến thức chính

Sự kiện: onclick, onsubmit, cập nhật DOM động
switch-case, tách hàm xử lý, quản lý trạng thái giao diện

🗓️ Lab 4: Objects & Functions ✅

Bài tập	Trạng thái	Mô tả
Bài 1	✅ Hoàn thành	Product Objects & Arrays (Object creation, array methods)
Bài 2	✅ Hoàn thành	Student Object with Methods (Object methods, DOM manipulation)
Bài 3	✅ Hoàn thành	Date & Time Display (Date object, setInterval)
Bài 4	✅ Hoàn thành	Window Manipulation (window.open, window.close)
Bài 5	✅ Hoàn thành	Student Management System (Dynamic table creation)

Bạn đã làm gì (Lab 4)

Tạo object sản phẩm/sinh viên; thêm vào mảng, hiển thị thông tin
Hiển thị thời gian; mở/đóng cửa sổ trình duyệt; render bảng sinh viên

Kiến thức chính

Object literal, phương thức object (this), mảng object
Date, window.open/close, render HTML động bằng template string

🗓️ Lab 5: DOM Manipulation & Shopping Cart ✅

Bài tập	Trạng thái	Mô tả
Bài 1	✅ Hoàn thành	Product Display System (DOM traversal, event handling)
Bài 2	✅ Hoàn thành	Shopping Cart Application (Add/Remove products, total calculation)

Bạn đã làm gì (Lab 5)

Hiển thị danh sách sản phẩm, nhập số lượng, tính tổng tiền
Thêm/xóa dòng sản phẩm; cập nhật tổng theo thời gian thực

Kiến thức chính

DOM traversal (previousElementSibling, parentElement), cloneNode
Định dạng tiền: toLocaleString('vi-VN'), thao tác chuỗi substring

🗓️ Lab 6-8: Nâng cao ✅

Lab	Project	Trạng thái	Mô tả
Lab 6	✅ Local Storage	Hoàn thành	Lưu/đọc dữ liệu giỏ hàng qua localStorage
Lab 7	✅ API Integration	Hoàn thành	Ôn fetch/async-await (tổng hợp qua ASM)
Lab 8	✅ Project Tổng hợp	Hoàn thành	Kết hợp DOM + Storage + Event

Bạn đã làm gì (Lab 6–8)

Tích hợp localStorage cho giỏ hàng: lưu, khôi phục, đồng bộ
Ôn fetch API/async-await qua các ví dụ và tổng hợp ASM
Hoàn thiện flow app nhỏ: render → tương tác → lưu trữ → cập nhật

Kiến thức chính

localStorage.setItem/getItem, JSON.stringify/parse
fetch, await response.json(), try/catch
Tổ chức code theo chức năng, phân tách dữ liệu/hiển thị

🎨 Chi tiết các lab đã hoàn thành

✅ Lab 1: JavaScript Cơ bản

File: Lab1/lab1.html
JavaScript: Lab1/js/main.js
CSS: Lab1/assets/css/style.css

📋 Các bài tập đã hoàn thành:

Bài 1: Khai báo biến

// set a value of 10
let a = 10;
console.log(a);
alert(a);

Kiến thức mới:

let: Khai báo biến có phạm vi block scope
console.log(): In ra console để debug
alert(): Hiển thị thông báo popup

Bài 2: Console.log với thông tin cá nhân

console.log("Châu Nhật Duy");

Kiến thức mới:

String literals: Chuỗi ký tự trong dấu ngoặc kép

Bài 3: Hello World

console.log("Hello World");

Kiến thức mới:

Console debugging: Cách debug cơ bản

Bài 4: Tạo file JavaScript riêng

Tạo file main.js riêng biệt
Liên kết với HTML qua <script> tag
Sử dụng alert() và console.log() Kiến thức mới:
External JavaScript: Tách code JS ra file riêng
<script> tag: Liên kết file JS với HTML

Bài 5: Prompt và Document Write

let x = prompt("Input x:");
document.getElementById("des").innerHTML = "Hello";

Kiến thức mới:

prompt(): Nhập dữ liệu từ người dùng
document.getElementById(): Truy cập element theo ID
innerHTML: Thay đổi nội dung HTML của element

🎯 Kỹ năng học được:

✅ Khai báo biến với let, var
✅ Sử dụng console.log() để debug
✅ Sử dụng alert() để hiển thị thông báo
✅ Sử dụng prompt() để nhập dữ liệu
✅ DOM manipulation cơ bản
✅ Liên kết JavaScript với HTML

✅ Lab 2: Math & Arrays

File: Lab2/lab2.html
JavaScript: Lab2/js/lab2.js
CSS: Lab2/assets/css/style.css

📋 Các bài tập đã hoàn thành:

Bài 1: Định lý Pythagorean

let a = prompt("Nhập giá trị của a");
let b = prompt("Nhập giá trị của b");
let c = Math.sqrt(a*a + b*b);
document.getElementById("result").innerHTML = c;

Kiến thức mới:

Math.sqrt(): Tính căn bậc hai
Toán tử *: Phép nhân
Toán tử +: Phép cộng

Bài 2: Đổi đơn vị đất đai

let dat = prompt("Nhap dien tich m:");
let sao = dat / 360;
let ha = sao / 10;
document.getElementById("sao").innerHTML = sao;
document.getElementById("ha").innerHTML = ha;

Kiến thức mới:

Toán tử /: Phép chia
Chuyển đổi đơn vị: Công thức tính toán

Bài 3: Tính chỉ số BMI

let kg = parseFloat(prompt("Nhập trọng lượng cơ thể (kg):"));
let height = parseFloat(prompt("Nhập chiều cao của bạn (m):")) / 100;
let bmi = kg / (height * height);

if (bmi < 18.5) {
    alert("Thiếu cân");
} else if (bmi <= 24.99) {
    alert("Bình thường");
} else if (bmi <= 29.99) {
    alert("Thừa cân");
} else {
    alert("Béo phì");
}

Kiến thức mới:

parseFloat(): Chuyển đổi string thành số thực
if-else if-else: Cấu trúc điều kiện phức tạp
So sánh số: <, <=, >, >=

Bài 4: Thao tác với mảng

const theList = ['Lauren', 'Kevin', true, 35, null, undefined, ['one', 'two']];
theList.unshift('FIRST');
theList.pop();
theList.splice(4, 0, 'hello world');
theList.splice(3, 0, 'middle');
theList.push('LAST');
console.log(theList);

Kiến thức mới:

const: Khai báo hằng số (không thể thay đổi)
unshift(): Thêm phần tử vào đầu mảng
pop(): Xóa phần tử cuối mảng
splice(): Thêm/xóa phần tử tại vị trí cụ thể
push(): Thêm phần tử vào cuối mảng
Mixed data types: Mảng chứa nhiều kiểu dữ liệu

Bài 5: Game đoán số bí mật

var x = 10 + Math.round(5 * Math.random());
var a = prompt("Số nhập vào");

if(a == x){
    alert("Chúc mừng, bạn đã đoán đúng");
} else if (a > x){
    alert("Giá trị của bạn lớn hơn số bí mật");
} else {
    alert("Giá trị của bạn nhỏ hơn số bí mật");
}

Kiến thức mới:

Math.random(): Tạo số ngẫu nhiên từ 0-1
Math.round(): Làm tròn số
var: Khai báo biến (function scope)
So sánh ==: So sánh giá trị (không quan tâm kiểu dữ liệu)

🎯 Kỹ năng học được:

✅ Sử dụng Math.sqrt() và Math.round()
✅ Xử lý điều kiện với if-else
✅ Thao tác với mảng: unshift(), pop(), splice(), push()
✅ Sử dụng parseFloat() để chuyển đổi kiểu dữ liệu
✅ Tạo số ngẫu nhiên với Math.random()
✅ DOM manipulation với getElementById()

✅ Lab 3: Event Handling & Games

Bài 1:
- File: Lab3/lab3-1.html, Lab3/js/lab3-1.js, Lab3/assets/lab3-1.css
- Chức năng: Nhập 2 số và phép toán (+, -, *, /) qua prompt, thực hiện phép tính bằng switch-case, hiển thị kết quả lên trang.
- Kiến thức mới:
```
switch(o) {
    case '+':
        var kq = a + b;
        break;
    case '-':
        var kq = a - b;
        break;
    // ...
}
```
  - switch-case: Cấu trúc điều kiện cho nhiều trường hợp
  - break: Thoát khỏi switch-case
  - case: Định nghĩa trường hợp cụ thể
Bài 2:
- File: Lab3/lab3-2.html, Lab3/js/lab3-2.js, Lab3/assets/lab3-2.css
- Chức năng: Nhập số, in bảng cửu chương từ 1 đến 10, sử dụng for, template string, DOM, in ra console thông tin biến và kiểu dữ liệu.
- Kiến thức mới:
```
for (let i = 1; i <= 10; i++) {
    let kq = a * i;
    output += `${a} x ${i} = ${kq}<br>`;
}
```
  - for loop: Vòng lặp với điều kiện
  - Template literals: ${variable} để nhúng biến vào string
  - +=: Toán tử cộng và gán
  - typeof: Kiểm tra kiểu dữ liệu
Bài 3:
- File: Lab3/lab3-3.html, Lab3/js/lab3-3.js, Lab3/assets/lab3-3.css
- Chức năng: Máy tính số học với giao diện nút bấm, nhập số, chọn toán tử, nhấn = để tính, xử lý nhập nhiều chữ số, báo lỗi chia cho 0.
- Kiến thức mới:
```
function toan_hang(x) {
    if (!nhap_b) {
        if (a === null) a = x;
        else a = a * 10 + x;
        updateDisplay(a);
    }
}
```
  - Event handling: Xử lý sự kiện click
  - Global variables: Biến toàn cục để lưu trạng thái
  - DOM manipulation nâng cao
  - onclick: Thuộc tính xử lý sự kiện click
Bài 4:
- File: Lab3/lab3-4.html, Lab3/js/lab3-4.js, Lab3/assets/lab3-4.css
- Chức năng: Trò chơi kéo búa bao giữa người và máy, máy chọn ngẫu nhiên, so sánh kết quả, hiển thị thắng/thua/hòa.
- Kiến thức mới:
```
var arr = ['Rock', 'Paper', 'Scissors'];
var s = Math.floor(Math.random() * 3);
switch (c) {
    case 0: // Rock
        if (s === 2) {
            // Win logic
        }
        break;
}
```
  - Array indexing: Truy cập phần tử mảng bằng index
  - Math.floor(): Làm tròn xuống
  - Game logic: Tư duy logic cho game đơn giản

✅ Lab 4: Objects & Functions

Bài 1: Product Objects & Arrays
- File: Lab4/lab4-1.html, Lab4/js/lab4-1.js
- Chức năng: Tạo object sản phẩm, thêm vào mảng, truy xuất thuộc tính.
- Kiến thức mới:
```
let product = {
    name: "Iphone 14",
    model: "Pro Max",
    cost: 21,
    quantity: 50
};
products.push(product);
console.log(products[2].quantity);
```
  - Object literal: Tạo object bằng cú pháp {}
  - Object properties: Thuộc tính của object
  - push(): Thêm object vào mảng
  - Dot notation: Truy cập thuộc tính object bằng .
Bài 2: Student Object with Methods
- File: Lab4/lab4-2.html, Lab4/js/lab4-2.js, Lab4/assets/css/lab4-2.css
- Chức năng: Tạo object sinh viên với phương thức hiển thị, xếp loại học lực.
- Kiến thức mới:
```
var sv = new Object();
sv.hoTen = prompt("Nhập họ và tên sinh viên:");
sv.hienThi = function() {
    if (this.diem >= 5) {
        this.hocLuc = "Đậu";
    } else {
        this.hocLuc = "Rớt";
    }
};
```
  - new Object(): Tạo object bằng constructor
  - Object methods: Phương thức của object
  - this: Tham chiếu đến object hiện tại
  - querySelector(): Truy cập element bằng CSS selector
Bài 3: Date & Time Display
- File: Lab4/lab4-3.html, Lab4/js/lab4-3.js
- Chức năng: Hiển thị thời gian hiện tại, cập nhật mỗi giây.
- Kiến thức mới:
```
let currentDateTime = new Date();
let h = currentDateTime.getHours();
let m = currentDateTime.getMinutes();
let s = currentDateTime.getSeconds();
window.setTimeout(reload(), 1000);
```
  - new Date(): Tạo object thời gian hiện tại
  - getHours(), getMinutes(), getSeconds(): Lấy giờ, phút, giây
  - setTimeout(): Thực hiện function sau thời gian delay
Bài 4: Window Manipulation
- File: Lab4/lab4-4.html, Lab4/js/lab4-4.js
- Chức năng: Mở, đóng, kiểm tra trạng thái cửa sổ mới.
- Kiến thức mới:
```
newWindow = window.open("", "Cửa sổ mới", 
    `toolbar=yes,menubar=yes,width=${width},height=${height}`);
if (newWindow && !newWindow.closed) {
    newWindow.close();
}
```
  - window.open(): Mở cửa sổ mới
  - window.close(): Đóng cửa sổ
  - window.closed: Kiểm tra cửa sổ đã đóng chưa
  - Window properties: Thuộc tính cửa sổ
Bài 5: Student Management System
- File: Lab4/lab4-baitap.html, Lab4/js/lab4-baitap.js
- Chức năng: Tạo bảng sinh viên động, nhập dữ liệu qua prompt.
- Kiến thức mới:
```
let students = [];
for (let i = 0; i < n; i++) {
    let student = {};
    student.name = prompt(`Nhập tên sinh viên thứ ${i + 1}:`);
    student.result = student.diem >= 5 ? "Đậu" : "Rớt";
    students.push(student);
}
```
  - Dynamic object creation: Tạo object động
  - Ternary operator: condition ? value1 : value2
  - Template literals trong prompt
  - Dynamic HTML generation

✅ Lab 5: DOM Manipulation & Shopping Cart

Bài 1: Product Display System
- File: Lab5/lab5-1.html, Lab5/js/lab5-cau1.js
- Chức năng: Hiển thị danh sách sản phẩm, tính toán giá trị đơn hàng.
- Kiến thức mới:
```
function display(obj) {
    let product = obj.previousElementSibling.previousElementSibling;
    let name = product.innerText;
    let price = parseFloat(product.getAttribute("data-price"));
    let qty = obj.previousElementSibling;
    let quantity = parseFloat(qty.value);
    let amount = quantity * price;
}
```
  - DOM traversal: previousElementSibling, nextElementSibling
  - getAttribute(): Lấy giá trị thuộc tính HTML
  - data-* attributes: Thuộc tính tùy chỉnh
  - Function parameters: Tham số function
Bài 2: Shopping Cart Application
- File: Lab5/lab5-2.html, Lab5/js/lab5-cau2.js
- Chức năng: Thêm/xóa sản phẩm vào giỏ hàng, tính tổng tiền.
- Kiến thức mới:
```
function addProduct(button) {
    let row = button.parentElement.parentElement.cloneNode(true);
    let btnRemove = row.getElementsByTagName("button")[0];
    btnRemove.innerText = "Remove";
    btnRemove.setAttribute("onclick", "removeProduct(this)");
    document.getElementById("cart").appendChild(row);
}
```
  - cloneNode(): Sao chép element
  - getElementsByTagName(): Lấy elements theo tag name
  - setAttribute(): Đặt thuộc tính HTML
  - appendChild(): Thêm element con
  - removeChild(): Xóa element con
  - String manipulation: substring(), parseInt()

🎯 Kỹ năng học được:

✅ Object creation và manipulation
✅ Array methods với objects
✅ DOM traversal và manipulation nâng cao
✅ Event handling với objects
✅ Dynamic HTML generation
✅ Shopping cart logic
✅ Date/Time manipulation
✅ Window API

📦 ASM (Ôn tập & Bảo vệ)

🧪 OnTap (Ôn tập trước bảo vệ)

Câu 1: Image Slider (ASM/OnTap/cau1_1.html)
- Nút Previous/Next, counter 1/3, vòng lặp đầu/cuối
- Kiến thức: Array, DOM update, sự kiện onclick
Câu 2: Login Form (ASM/OnTap/cau2_1.html)
- Validate đơn giản: username/password; thông báo success/error
- Kiến thức: Form handling, onsubmit, DOM class toggle
Câu 3: Giỏ hàng (localStorage) (ASM/OnTap/cau3_1.html)
- Thêm vào giỏ, +/- số lượng, xóa, tổng tiền, lưu localStorage
- Kiến thức: Array find/filter/map, DOM table, localStorage
- Ghi chú: Dùng toLocaleString('vi-VN') để định dạng tiền VND

🛡️ BaoVeASM (Bài bảo vệ)

Question 1: Support Form (ASM/BaoVeASM/question_1.html)
- Ràng buộc: Họ tên ≥ 8, Email hợp lệ, Phone 10-11 số, chọn nhóm
- Hiển thị lỗi nền đỏ, thông báo thành công/thất bại
- Kiến thức: Validation cơ bản, DOM class, focus
Question 3: Sản phẩm cao giá nhất (ASM/BaoVeASM/question_3.html)
- Mảng 4 sản phẩm (mỗi sp có 2 ảnh), tìm giá cao nhất, hover đổi ảnh
- Kiến thức: Duyệt mảng, tìm max, sự kiện onmouseover/onmouseout
- Ghi chú: Render 1 sản phẩm (đơn giản hóa theo yêu cầu)

Trạng thái: ASM đã hoàn thành để sẵn sàng bảo vệ.

🧠 Kiến thức trọng tâm theo từng Lab (tổng hợp nhanh)

Lab 1: JavaScript cơ bản

Biến và kiểu dữ liệu: let, const, var
Hàm built-in: alert, console.log, prompt
DOM cơ bản: document.getElementById().innerHTML

Lab 2: Toán học và Mảng

Toán học: Math.sqrt, cộng/trừ/nhân/chia, thứ tự phép toán
Ép kiểu: parseFloat, Number
Mảng và method: push, pop, unshift, splice
Cấu trúc điều kiện nhiều nhánh: if/else if/else

Lab 3: Sự kiện và DOM tương tác

Bắt sự kiện: onclick, onsubmit, oninput
Cập nhật giao diện theo trạng thái
switch-case cho nhiều trường hợp
Tư duy game logic (Rock/Paper/Scissors)

Lab 4: Đối tượng và Hàm

Object literal, thuộc tính & phương thức (this)
Làm việc với thời gian: Date, getHours/Minutes/Seconds
Window API: window.open/close, window.closed
Khởi tạo dữ liệu động và render danh sách (bảng)

Lab 5: DOM nâng cao & Giỏ hàng

Truy xuất DOM theo quan hệ: previousElementSibling, parentElement
Tạo/ghép nội dung động: innerHTML, appendChild, cloneNode
Tính toán tổng, xử lý định dạng số toLocaleString

Lab 6: LocalStorage (tổng hợp trong ASM)

Lưu/đọc dữ liệu: localStorage.setItem/getItem
Chuyển đổi định dạng: JSON.stringify/parse
Đồng bộ giỏ hàng qua reload trang

Lab 7: API cơ bản (tổng hợp trong ASM/demo)

Gọi API: fetch, async/await, response.json()
Xử lý lỗi: try/catch, kiểm tra trạng thái HTTP

Lab 8: Project tổng hợp

Kết hợp DOM + LocalStorage + Event + tách module hợp lý
Tổ chức cấu trúc file rõ ràng (assets, js, pages)

Gợi ý ôn thi nhanh: đọc lại các ví dụ trong Lab3, Lab5 và ASM để nắm chắc sự kiện, DOM động và lưu trữ trình duyệt.

🚀 Hướng dẫn bắt đầu

1. Chuẩn bị môi trường

# Clone dự án (nếu có trên GitHub)
git clone https://github.com/your-username/web1043-javascript-basic.git

# Hoặc tạo thư mục mới
mkdir web1043-javascript-basic
cd web1043-javascript-basic

2. Cài đặt công cụ

VS Code: Download
Live Server Extension: Cài đặt trong VS Code
Git: Download

3. Cấu trúc thư mục cơ bản

mkdir Lab1
cd Lab1
mkdir assets
mkdir assets/css
mkdir js
touch lab1.html
touch assets/css/style.css
touch js/main.js

4. Template HTML cơ bản

<!DOCTYPE html>
<html lang="vi">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Lab X - JavaScript Basic</title>
    <link rel="stylesheet" href="assets/css/style.css">
</head>
<body>
    <div class="container">
        <h1>Lab X</h1>
        <div id="content"></div>
    </div>
    
    <script src="js/main.js"></script>
</body>
</html>

5. Chạy lab

Mở file labX.html trong trình duyệt
Mở Developer Tools (F12) để xem console output
Thực hiện các tương tác theo yêu cầu của từng bài

🎨 Các dự án sẽ xây dựng

🧮 1. Calculator App

Tính năng:
- Basic arithmetic operations
- Clear và reset functionality
- Responsive design
- Keyboard support
Kỹ năng: DOM manipulation, event handling, calculations

📝 2. Todo List App

Tính năng:
- Add/remove tasks
- Mark as complete
- Local storage persistence
- Filter tasks
Kỹ năng: Arrays, local storage, CRUD operations

🌤️ 3. Weather App

Tính năng:
- Weather API integration
- Location-based weather
- 5-day forecast
- Responsive design
Kỹ năng: API calls, async/await, JSON parsing

📖 Tài liệu tham khảo

📚 JavaScript Resources

Resource	Link	Mô tả
	MDN JavaScript	Tài liệu chính thức Mozilla
	W3Schools JavaScript	Tutorial tương tác
	JavaScript.info	Modern JavaScript

🎨 CSS Resources

Resource	Link	Mô tả
	MDN CSS Guide	CSS fundamentals
	CSS-Tricks	Tips và tricks

📚 HTML Resources

Resource	Link	Mô tả
	MDN HTML Guide	HTML fundamentals
	W3Schools HTML	HTML tutorial

🛠️ Công cụ và tài nguyên hữu ích

💻 Code Editors

Editor	Download	Mô tả
	Download	Editor chính, nhiều extensions
	Download	Fast và lightweight

🌐 Online Tools

Tool	Link	Mô tả
	CodePen	Code playground
	JSFiddle	JavaScript testing
	Replit	Online IDE

📝 Tips học tập hiệu quả

🎯 1. Thực hành hàng ngày

Thời gian: Dành ít nhất 1-2 giờ mỗi ngày
Phương pháp: Code theo hướng dẫn và tự sửa đổi
Cải tiến: Tạo thêm các tính năng mới

📝 2. Ghi chép và tài liệu

Notes: Viết notes cho mỗi bài học
Cheatsheet: Tạo cheatsheet cá nhân
Comments: Comment code để hiểu rõ

🐛 3. Debugging và troubleshooting

Console: Sử dụng console.log() thường xuyên
DevTools: Kiểm tra Chrome DevTools
Errors: Tìm hiểu error messages

✨ 4. Tối ưu hóa code

Clean code: Viết code clean và readable
Naming: Sử dụng meaningful names
Refactor: Refactor code thường xuyên

📊 Theo dõi tiến độ

✅ Checklist hàng ngày

Xem video tutorial hoặc đọc tài liệu
Code theo hướng dẫn
Tự sửa đổi và cải tiến
Commit code lên Git
Chia sẻ kết quả

📈 Đánh giá cuối tuần

Review lại kiến thức
Hoàn thành project tổng hợp
Ghi chép những gì đã học
Lên kế hoạch tuần tiếp theo

🎉 Kết quả mong đợi

Sau khi hoàn thành tất cả labs, bạn sẽ có thể:

🎨 JavaScript Skills

✅ Hiểu rõ JavaScript fundamentals
✅ DOM manipulation thành thạo
✅ Event handling và user interactions
✅ Working with arrays và objects
✅ API integration và async programming

💼 Portfolio Projects

✅ Có 8+ lab projects để showcase
✅ Calculator application
✅ Todo list application
✅ Weather application

🚀 Career Ready

✅ Hiểu rõ JavaScript development workflow
✅ Có kinh nghiệm với modern tools
✅ Sẵn sàng học tiếp React/Vue/Angular
✅ Có thể apply cho JavaScript developer jobs

📄 Giấy phép

Dự án này được tạo ra cho mục đích học tập. Bạn có thể tự do sử dụng, chia sẻ và đóng góp cải tiến.

🙏 Lời cảm ơn

Cảm ơn các giảng viên và cộng đồng JavaScript đã chia sẻ kiến thức và hỗ trợ lẫn nhau trong quá trình học tập.

Chúc bạn học tập hiệu quả và thành công trên con đường trở thành JavaScript Developer! 🚀

"Practice makes perfect" - Thực hành tạo nên sự hoàn hảo! 💪

Name		Name	Last commit message	Last commit date
Latest commit History 99 Commits
ASM		ASM
F8		F8
Lab1		Lab1
Lab2		Lab2
Lab3		Lab3
Lab4		Lab4
Lab5		Lab5
Lab6		Lab6
Lab7		Lab7
Lab8		Lab8
.gitignore		.gitignore
README.md		README.md

ndyudev/web1043-javascript-basic

Folders and files

Latest commit

History

Repository files navigation

🚀 Web1043 - JavaScript Basic Learning

📖 Giới thiệu

🎯 Mục tiêu dự án

📊 Tiến độ học tập

📁 Cấu trúc dự án

📋 Mô tả thư mục:

🛠️ Công nghệ và công cụ

🎨 Frontend Technologies

🛠️ Development Tools

📚 Lộ trình học tập chi tiết

🗓️ Lab 1: JavaScript Cơ bản ✅

Bạn đã làm gì (Lab 1)

Kiến thức chính

🗓️ Lab 2: Math & Arrays ✅

Bạn đã làm gì (Lab 2)

Kiến thức chính

🗓️ Lab 3: Event Handling & Games ✅

Bạn đã làm gì (Lab 3)

Kiến thức chính

🗓️ Lab 4: Objects & Functions ✅

Bạn đã làm gì (Lab 4)

Kiến thức chính

🗓️ Lab 5: DOM Manipulation & Shopping Cart ✅

Bạn đã làm gì (Lab 5)

Kiến thức chính

🗓️ Lab 6-8: Nâng cao ✅

Bạn đã làm gì (Lab 6–8)

Kiến thức chính

🎨 Chi tiết các lab đã hoàn thành

✅ Lab 1: JavaScript Cơ bản

📋 Các bài tập đã hoàn thành:

🎯 Kỹ năng học được:

✅ Lab 2: Math & Arrays

📋 Các bài tập đã hoàn thành:

🎯 Kỹ năng học được:

✅ Lab 3: Event Handling & Games

✅ Lab 4: Objects & Functions

✅ Lab 5: DOM Manipulation & Shopping Cart

🎯 Kỹ năng học được:

📦 ASM (Ôn tập & Bảo vệ)

🧪 OnTap (Ôn tập trước bảo vệ)

🛡️ BaoVeASM (Bài bảo vệ)

🧠 Kiến thức trọng tâm theo từng Lab (tổng hợp nhanh)

Lab 1: JavaScript cơ bản

Lab 2: Toán học và Mảng

Lab 3: Sự kiện và DOM tương tác

Lab 4: Đối tượng và Hàm

Lab 5: DOM nâng cao & Giỏ hàng

Lab 6: LocalStorage (tổng hợp trong ASM)

Lab 7: API cơ bản (tổng hợp trong ASM/demo)

Lab 8: Project tổng hợp

🚀 Hướng dẫn bắt đầu

1. Chuẩn bị môi trường

2. Cài đặt công cụ

3. Cấu trúc thư mục cơ bản

4. Template HTML cơ bản

5. Chạy lab

🎨 Các dự án sẽ xây dựng

🧮 1. Calculator App

📝 2. Todo List App

🌤️ 3. Weather App

📖 Tài liệu tham khảo

📚 JavaScript Resources

🎨 CSS Resources

📚 HTML Resources

🛠️ Công cụ và tài nguyên hữu ích

💻 Code Editors

🌐 Online Tools

📝 Tips học tập hiệu quả

🎯 1. Thực hành hàng ngày

📝 2. Ghi chép và tài liệu

🐛 3. Debugging và troubleshooting

✨ 4. Tối ưu hóa code

📊 Theo dõi tiến độ

✅ Checklist hàng ngày

Packages