Cơ bản JavaScript
2 tuần Sơ cấpThay đổi nội dung khi nhấn nút. Tạo ra các chuyển động.
Tổng quan
JavaScript là ngôn ngữ tạo chuyển động cho trang web.
Biến trang web tĩnh thành ứng dụng tương tác.
- 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é.
- const name = 'Kawa';
- let count = 0;
- Ưu tiên dùng const, chỉ dùng let khi giá trị cần thay đổi
- 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.
- if (age >= 18) { console.log('Người lớn'); }
- const result = score >= 60 ? 'Đỗ' : 'Trượt';
- === kiểm tra cả kiểu dữ liệu, nên dùng === thay vì ==
- 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.
- for (let i = 0; i < 5; i++) { console.log(i); }
- Khi lấy từng phần tử trong mảng, dùng map hoặc forEach sẽ tiện hơn
- 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.
- function greet() { return 'Hello'; }
- const double = (x) => x * 2;
- Arrow function 1 dòng có thể bỏ qua return
- 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.
- const msg = `Xin chào, tôi là ${name}`;
- Dùng dấu backtick để viết chuỗi trên nhiều dòng
- 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.
- const arr = [1, 2, 3];
- const doubled = arr.map(n => n * 2);
- Mảng gốc không bị thay đổi (phương thức không phá hủy)
- 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 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 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 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.