Cơ bản JavaScript

2 tuần Sơ cấp

Thay đổi nội dung khi nhấn nút. Tạo ra các chuyển động.

Tổng quan

Cái này là gì?

JavaScript là ngôn ngữ tạo chuyển động cho trang web.

Tại sao lại quan trọng?

Biến trang web tĩnh thành ứng dụng tương tác.

Bạn sẽ học được gì
  • Biến và kiểu dữ liệu
  • Cách viết hàm
  • Thao tác DOM
  • Sự kiện (Event)

Chi tiết

Biến (const, let)

Dùng để lưu trữ dữ liệu. const cho giá trị không đổi, let cho giá trị có thể thay đổi. Đừng dùng var nữa nhé.

Ví dụ:
  • const name = 'Kawa';
  • let count = 0;
Tips:
  • Ưu tiên dùng const, chỉ dùng let khi giá trị cần thay đổi
Lỗi thường gặp:
  • Cố tình gán lại giá trị cho const

Điều kiện (if và toán tử ba ngôi)

Tạo xử lý 'Nếu... thì'. Với các nhánh đơn giản, toán tử ba ngôi (điều kiện ? đúng : sai) rất tiện lợi.

Ví dụ:
  • if (age >= 18) { console.log('Người lớn'); }
  • const result = score >= 60 ? 'Đỗ' : 'Trượt';
Tips:
  • === kiểm tra cả kiểu dữ liệu, nên dùng === thay vì ==
Lỗi thường gặp:
  • Dùng = thay vì == hoặc === trong câu lệnh if

Lặp (vòng lặp for)

Lặp lại một xử lý nhiều lần. Thường dùng để xử lý mảng.

Ví dụ:
  • for (let i = 0; i < 5; i++) { console.log(i); }
Tips:
  • Khi lấy từng phần tử trong mảng, dùng map hoặc forEach sẽ tiện hơn
Lỗi thường gặp:
  • Tạo vòng lặp vô tận làm treo trình duyệt

Hàm và Arrow Function

Là một nhóm các xử lý. Gần đây, cách viết ngắn gọn `() => {}` (Arrow Function) rất phổ biến.

Ví dụ:
  • function greet() { return 'Hello'; }
  • const double = (x) => x * 2;
Tips:
  • Arrow function 1 dòng có thể bỏ qua return
Lỗi thường gặp:
  • Viết dấu ngoặc nhọn {} nhưng quên return dẫn đến trả về undefined

Thao tác chuỗi và Template Literal

Để nối chuỗi có thể dùng +, nhưng bao quanh bằng dấu backtick (`) giúp chèn biến trực tiếp rất tiện lợi.

Ví dụ:
  • const msg = `Xin chào, tôi là ${name}`;
Tips:
  • Dùng dấu backtick để viết chuỗi trên nhiều dòng
Lỗi thường gặp:
  • Dùng dấu nháy đơn làm ${name} hiển thị như văn bản bình thường

Mảng và thao tác mảng (map, filter)

Gộp nhiều giá trị vào một. map biến đổi mọi phần tử, filter tạo mảng mới chỉ gồm các phần tử thỏa mãn điều kiện.

Ví dụ:
  • const arr = [1, 2, 3];
  • const doubled = arr.map(n => n * 2);
Tips:
  • Mảng gốc không bị thay đổi (phương thức không phá hủy)
Lỗi thường gặp:
  • Quên rằng chỉ số mảng bắt đầu từ 0 chứ không phải 1

Các bước thực hành

  1. 1
    Dùng console.log 2 phút

    Xuất thông tin ra console để kiểm tra.

    • Viết trong thẻ <script>
    • Dùng console.log('Hello');
    <script>
    console.log('Hello');
    </script>
  2. 2
    Tính toán bằng biến 3 phút

    Tạo hộp (biến) để lưu dữ liệu và thực hiện tính toán đơn giản.

    • Khai báo const price = 1000;
    • Tính và hiển thị giá trị đã bao gồm thuế
    <script>
    const price = 1000;
    const tax = 1.1;
    console.log(`Giá sau thuế là ${price * tax} đồng`);
    </script>
  3. 3
    Mảng và vòng lặp 5 phút

    Xử lý nhiều dữ liệu cùng lúc và hiển thị tất cả bằng vòng lặp (for).

    • Tạo mảng các loại quả
    • Dùng vòng lặp for để xuất ra console
    <script>
    const fruits = ['Táo', 'Chuối', 'Cam'];
    for (let i = 0; i < fruits.length; i++) {
      console.log(fruits[i]);
    }
    </script>

Vị trí nghề nghiệp & thực tế

JS cơ bản trước React/Vue/TS—hầu hết job frontend cần JavaScript.

Ví dụ trong ngành

  • Validate form
  • Sự kiện analytics
  • Toggle UI đơn giản

Kế hoạch học đề xuất

Biến → hàm → mảng → object → điều kiện → vòng lặp.

Kiến thức nền

JS cơ bản trước React/Vue/TS—hầu hết job frontend cần JavaScript.…

Câu hỏi thường gặp

Tại sao 0.1 + 0.2 lại không bằng 0.3?
Đây là vấn đề về số thực dấu phẩy động trong máy tính, không chỉ JavaScript mà nhiều ngôn ngữ khác cũng gặp phải.
Tại sao không nên dùng var?
Dùng var rất dễ gây lỗi vì phạm vi (scope) của nó quá rộng, có thể vô tình ghi đè biến trùng tên ở nơi khác. let và const an toàn hơn vì chúng bị giới hạn trong khối lệnh ({}). Hãy để var lùi vào dĩ vãng.
== và === khác gì nhau?
=== kiểm tra nghiêm ngặt cả kiểu dữ liệu. == quá 'dễ dãi', nó coi chuỗi '0' và số 0 là giống nhau, dễ gây ra những lỗi khó đoán. Trong thực tế, hãy luôn dùng ===!
Vấn đề về this trong JavaScript?
this trong JS là một khái niệm khá rắc rối vì giá trị của nó thay đổi tùy theo cách hàm được gọi. Hiện nay, dùng Arrow function (() => {}) giúp cố định this theo phạm vi cha, giúp code bình yên hơn nhiều.
Tránh var?
Dùng const/let; var gây bug scope.
console.log production?
Tốt khi dev—xóa trước khi release.

① Đã đọc giải thích. Tiếp theo ② Làm bài tập.

Đã nắm vững cơ bản JavaScript.

Học về Layout (Flexbox, Grid) để sắp xếp giao diện phức tạp hơn.

② Làm bài tập (15 câu)
Công cụ liên quan: Định dạng JSON