Học JS

1000 Bài tập JavaScript - Lập Trình JavaScript

Phần I.

Bài số 1:

Tạo một tầng có chứa dòng chữ "Hello", kích thước H1. và một nút nhấn có nhãn là "Thay đổi". Khi người dùng click vào nút này thì yêu cầu người dùng nhập vào một xâu, sau đó thay nội dung trong thẻ H1 bằng xâu nhập vào này (Theo 4 cách: thay thuộc tính innerText, innerHTML, outerText, outerHTML).

Bài số 2:

Tạo một thẻ H1, màu chữ xanh dùng để hiển thị thời gian của hệ thống (gồm giờ:phút:giây).

Gợi ý: Viết hàm CapNhat để lấy giờ:phút:Giây trong máy tính sau đó gán cho thuộc tính innerText của thẻ H1. Sử dụng hàm setInterval("CapNhat();", 1000) để liên tục cập nhật thời gian theo từng giây.

Bài số 3:
Tạo 2 tầng trong IE, mỗi tầng chứa một bức ảnh. Tầng thứ nhất chạy từ trái sang phải màn hình, tầng thứ hai chạy từ trên xuống dưới màn hình.

Gợi ý: Sử dụng 2 hàm setInterval để gọi 2 hàm di chuyển 2 tầng.

Bài số 4:

Tạo một tầng chứa 3 liên kết. Chuột click tại vị trí nào thì tầng sẽ được đặt tại vị trí đó. Gợi ý: Viết lệnh trong sự kiện onClick của thẻ BODY.

Bài số 5:
Tạo một form đăng ký E-Mail tương tự như của Yahoo (Bạn chỉ cần tạo một số phần tử, không cần tạo hết). Mỗi khi người dùng di chuyển chuột đến một phần tử nào đó thì hiển thị một lời chú thích bằng Tiếng việt. (Xem Bài số 5)

Bài số 6:
Tạo 3 tầng (Trong Netscape), mỗi tầng nạp một trang tương ứng như sau: https://qviet.vn, https://ziczacgroup.com và https://thietkewebsitenhe.com.

Bài số 7:
Tạo một tầng chứa một bức ảnh, một nút có nhãn là "Di chuyển". Khi người dùng click vào nút này thì bức ảnh sẽ di chuyển chéo từ góc trên bên phải xuống góc dưới bên trái của màn hình. Gợi ý: Tăng dần pixelTop, giảm pixelLeft. 

Bài số 8:
Hãy tạo ra trang Web có giao diện như sau: 

Yêu cầu:

Khi người dùng di chuyển chuột đến phần tử nào thì hiển thị dòng nhắc dưới thanh trạng thái để hướng dẫn người dùng. Ví dụ: Khi người dùng đưa chuột vào trong ô textbox User Name thì thì hiển thị dưới thanh trạng thái là: "Nhập mã người dùng", hay khi người đưa chuột đến nút "Đăng ký" thì hiển thị dòng nhắc: "Gửi thông tin đi để đăng ký" v.v...
Hướng dẫn: Nút đăng ký nên là nút thường, tức là tạo bằng thẻ:

<input type = button value = "Đăng ký">

Bài số 9:
Có giao diện như bài 1, nhưng yêu cầu như sau:

Khi gửi thông tin đi, cần kiểm tra xem nội dung người dùng gõ trong ô Password với textbox trong ô "Gõ lại password" có giống nhau hay không? Nếu bằng nhau thì mới gửi (Submit) đi, còn nếu không bằng thì thông báo là "Password phải giống nhau"
Khi gửi thông tin, cần kiểm tra ngày sinh, tháng sinh phải hợp lệ. (Tức ngày phải nhỏ hơn 32, tháng phải nhỏ hơn 13) 
Hướng dẫn:

Nút đăng ký nên là nút thường, tức là tạo bằng thẻ:

<input type = button value = "Đăng ký" onClick = "DangKy();">

Trong đó Hàm DangKy() sẽ kiểm tra dữ liệu hợp lệ và khi dữ liệu nhập vào đúng đắn thì gửi đi bằng cách gọi phương thức submit của đối tượng document, như sau: document.submit();

Bài số 10:

Làm tương tự bài tập 7 và 8, nhưng thêm yêu cầu: Khi người dùng nhập hoặc số lượng, hoặc đơn giá thì hãy tính luôn ô textbox thành tiền.

Hướng dẫn: Viết lệnh tính thành tiền trong cả 2 sự kiện onKeyUp của cả hai textbox số lượng và textbox đơn giá.

*** Lưu ý: Trước khi tính tích thì cần phải kiểm tra xem dữ liệu trong hai textbox đã có hay chưa, nếu một ô chưa nhập gì thì chưa tính.

Bài số 11:
Hãy tạo một menu đặt theo chiều dọc gồm 4 mục như sau:

Giới thiệu

Tin tức

Sản phẩm

Trợ giúp

Yêu cầu: 4 mục này có màu nền là xanh, màu chữ là vàng (yellow). Khi người dùng di chuyển đến mục nào thì mục đó có màu nền là màu đỏ. Khi di chuyển chuột ra khỏi thì màu nền trở lại màu xanh.

Khi người dùng click vào thì mở ra trang tương ứng là https://qviet.vn, https://ziczacgroup.com, https://thietkewebsitenhe.vn và https://google.com.

Gợi ý: Làm tương tự như bài tập mẫu, nhưng tạo ra 4 thẻ H2.

Bài số 11: Hãy tạo một menu gồm 4 mục như ở trên nhưng theo chiều ngang,

Hướng dẫn: Nếu bạn dùng thẻ H2, thì mỗi mục sẽ tự động được đặt riêng trên một dòng. Để có thể đặt nhiều mục trên cùng một dòng, bạn có thể tạo một bảng có một hàng và nhiều cột. Mỗi mục bây giờ sẽ được đặt trong một thẻ <TD>. Để thay đổi kích thước, màu nền, màu chữ v.v.. bạn cũng sử dụng STYLE: <TD style = “color: white” ……

Hoặc cách thứ hai là bạn sử dụng thẻ <Span>

Phần II.

PHẦN 1: NHẬP MÔN, TOÁN TỬ VÀ KIỂU DỮ LIỆU (1 - 100)

Mục tiêu: Làm quen cú pháp, khai báo biến, các phép toán số học và logic.

  1. In chuỗi "Chào mừng bạn đến với khóa học JavaScript" ra console.

  2. Khai báo 2 biến a, b và in ra tổng, hiệu, tích, thương của chúng.

  3. Tính chu vi và diện tích hình chữ nhật với chiều dài và chiều rộng nhập từ người dùng.

  4. Tính diện tích hình tam giác khi biết độ dài cạnh đáy và chiều cao.

  5. Tính diện tích và chu vi hình tròn với bán kính $r$.

  6. Viết chương trình hoán đổi giá trị của hai biến số không dùng biến trung gian.

  7. Tính giá trị biểu thức $P = (a + b)^2$ với $a, b$ cho trước.

  8. Tính giá trị biểu thức $Q = \sqrt{a^2 + b^2}$.

  9. Chuyển đổi nhiệt độ từ Celsius sang Fahrenheit.

  10. Chuyển đổi số phút sang định dạng "X giờ Y phút".

  11. Tính vận tốc khi biết quãng đường và thời gian.

  12. Tính chỉ số BMI và in kết quả.

  13. Tính tiền lương nhân viên = (Lương cơ bản * Hệ số) + Phụ cấp.

  14. Tính tổng 3 chữ số của một số nguyên có 3 chữ số (VD: 123 -> 1+2+3=6).

  15. Tính giá trị trung bình cộng của 5 số bất kỳ.

  16. Tìm số dư của phép chia $2^{10}$ cho 3.

  17. Kiểm tra một biến có phải kiểu number hay không.

  18. Kiểm tra một chuỗi có độ dài lớn hơn 10 ký tự hay không.

  19. Nối hai chuỗi "Học lập trình" và "rất thú vị" thành một chuỗi hoàn chỉnh.

  20. In ra ký tự cuối cùng của một chuỗi bất kỳ.

  21. Trích xuất chuỗi con từ vị trí thứ 2 đến vị trí thứ 5 của một chuỗi.

  22. Thay thế tất cả khoảng trắng trong chuỗi bằng dấu gạch ngang (-).

  23. Chuyển đổi một chuỗi số thành kiểu dữ liệu Number.

  24. Chuyển đổi một số thành kiểu dữ liệu String.

  25. Kiểm tra xem một chuỗi có chứa từ "JavaScript" hay không.

  26. Làm tròn số thập phân 3.14159 thành 3.14.

  27. Tìm số lớn nhất và nhỏ nhất trong 3 số $a, b, c$.

  28. Phát sinh một số ngẫu nhiên từ 1 đến 100.

  29. Tính lũy thừa $x^y$.

  30. Tính trị tuyệt đối của một số âm.

    (Tiếp tục tương tự đến bài 100 với các biến thể về toán tử logic AND/OR/NOT...)

PHẦN 2: CẤU TRÚC ĐIỀU KIỆN IF-ELSE VÀ SWITCH (101 - 200)

Mục tiêu: Rèn luyện tư duy rẽ nhánh và giải quyết vấn đề.

  1. Kiểm tra một số là số chẵn hay số lẻ.

  2. Kiểm tra một số là số âm, số dương hay số 0.

  3. Kiểm tra một năm có phải năm nhuận hay không.

  4. Nhập điểm trung bình, xếp loại học lực (Giỏi, Khá, Trung bình, Yếu).

  5. Kiểm tra 3 cạnh nhập vào có tạo thành một tam giác hợp lệ không.

  6. Giải phương trình bậc nhất $ax + b = 0$.

  7. Giải phương trình bậc hai $ax^2 + bx + c = 0$.

  8. Nhập vào một tháng, in ra tháng đó có bao nhiêu ngày.

  9. Kiểm tra một ký tự nhập vào là nguyên âm hay phụ âm.

  10. Viết chương trình mô phỏng máy tính bỏ túi (Cộng, Trừ, Nhân, Chia).

  11. Nhập tuổi và kiểm tra xem người đó có đủ tuổi bầu cử (>=18) không.

  12. Tính tiền điện theo bậc thang (với các mức giá khác nhau).

  13. Tính thuế thu nhập cá nhân dựa trên mức lương.

  14. Kiểm tra một số có phải là số chính phương hay không.

  15. Nhập mã giảm giá, tính số tiền được giảm (10%, 20%, 50%).

  16. Kiểm tra một số có chia hết cho cả 3 và 5 hay không.

  17. Tìm số ngày của một năm bất kỳ.

  18. Kiểm tra xem một điểm $(x, y)$ có nằm trong hình tròn bán kính $R$ hay không.

  19. Nhập 3 số, in ra theo thứ tự tăng dần.

  20. Xác định quý trong năm dựa vào tháng nhập vào.

PHẦN 3: VÒNG LẶP FOR, WHILE, DO-WHILE (201 - 300)

Mục tiêu: Xử lý dữ liệu lặp lại và thuật toán cơ bản.

  1. In ra các số từ 1 đến 100.

  2. In ra các số chẵn từ 1 đến $n$.

  3. Tính tổng các số từ 1 đến $n$.

  4. Tính giai thừa của một số nguyên dương $n$.

  5. In bảng cửu chương của một số bất kỳ.

  6. Đếm số lượng các chữ số của một số nguyên dương.

  7. Đảo ngược một số nguyên (VD: 1234 -> 4321).

  8. Kiểm tra một số có phải là số nguyên tố hay không.

  9. In ra $n$ số đầu tiên trong dãy Fibonacci.

  10. Tìm ước chung lớn nhất (UCLN) của hai số.

  11. Tìm bội chung nhỏ nhất (BCNN) của hai số.

  12. In ra các số nguyên tố từ 1 đến 1000.

  13. Tính tổng các chữ số của một số.

  14. Kiểm tra một số có phải là số Armstrong hay không.

  15. Vẽ hình chữ nhật bằng dấu sao (*) với kích thước $m \times n$.

  16. Vẽ tam giác vuông cân bằng dấu sao.

  17. Vẽ tam giác cân bằng dấu sao.

  18. Tính tổng dãy số $S = 1 + 1/2 + 1/3 + ... + 1/n$.

  19. Tìm tất cả các ước số của một số nguyên dương.

  20. Kiểm tra một số có phải số hoàn hảo (Perfect Number) không.

  21. Đếm số lần xuất hiện của một ký tự trong chuỗi.

  22. In ra các số từ 1 đến 100, nhưng bỏ qua các số chia hết cho 7.

  23. Mô phỏng trò chơi đoán số (người dùng nhập đến khi đúng).

  24. Tính tổng các số lẻ trong khoảng từ $a$ đến $b$.

  25. Chuyển đổi một số từ hệ thập phân sang hệ nhị phân.

Chào bạn, tôi rất sẵn lòng tiếp tục đồng hành cùng bạn để xây dựng ngân hàng đề bài này. Dưới đây là 250 bài tập tiếp theo (từ bài 301 đến 550), tập trung sâu vào Mảng (Array), Hàm (Function) và Xử lý Chuỗi nâng cao.

Đây là những phần quan trọng nhất để sinh viên rèn luyện tư duy thuật toán và cấu trúc dữ liệu.

PHẦN 4: MẢNG (ARRAY) - CƠ BẢN ĐẾN TRUNG CẤP (301 - 425)

Mục tiêu: Quản lý danh sách dữ liệu, duyệt mảng và các thao tác thêm/xóa/sửa.

  1. Khai báo một mảng số nguyên và in ra tất cả các phần tử.

  2. Tìm phần tử lớn nhất và nhỏ nhất trong một mảng.

  3. Tính tổng và trung bình cộng của các phần tử trong mảng.

  4. Đếm số lượng số chẵn và số lẻ trong mảng.

  5. Tìm một giá trị $x$ xem có tồn tại trong mảng hay không và trả về vị trí.

  6. Đảo ngược thứ tự các phần tử trong mảng (không dùng hàm có sẵn).

  7. Sắp xếp mảng số nguyên theo thứ tự tăng dần.

  8. Sắp xếp mảng số nguyên theo thứ tự giảm dần.

  9. Lọc ra các số nguyên tố có trong mảng.

  10. Xóa phần tử tại một vị trí $k$ cho trước.

  11. Chèn một phần tử $x$ vào vị trí $k$ trong mảng.

  12. Tìm phần tử xuất hiện nhiều nhất trong mảng.

  13. Loại bỏ các phần tử trùng lặp trong mảng (chỉ giữ lại 1).

  14. Tách một mảng thành hai mảng: một mảng chứa số chẵn, một mảng chứa số lẻ.

  15. Gộp hai mảng đã sắp xếp thành một mảng mới vẫn đảm bảo thứ tự.

  16. Tìm số lớn thứ hai trong mảng.

  17. Kiểm tra xem mảng có phải là mảng đối xứng hay không.

  18. Tính tích của tất cả các phần tử ở vị trí lẻ trong mảng.

  19. Thay thế tất cả các số âm trong mảng bằng số 0.

  20. Đếm số lần xuất hiện của từng phần tử trong mảng.

  21. Tìm mảng con có tổng lớn nhất (Thuật toán Kadane).

  22. Xoay vòng các phần tử của mảng sang trái $k$ đơn vị.

  23. Kiểm tra mảng có chứa mảng con cho trước hay không.

  24. Tìm khoảng cách nhỏ nhất giữa hai phần tử bất kỳ trong mảng.

  25. Tạo một mảng mới chứa bình phương của các phần tử trong mảng cũ.

PHẦN 5: HÀM (FUNCTIONS) & SCOPE (426 - 500)

Mục tiêu: Đóng gói mã nguồn, tham số, giá trị trả về và tư duy tái sử dụng.

  1. Viết hàm tính diện tích hình thang.

  2. Viết hàm kiểm tra một số có phải số hoàn hảo hay không.

  3. Viết hàm tìm ước chung lớn nhất của hai số.

  4. Viết hàm nhận vào một mảng và trả về mảng đã được sắp xếp.

  5. Viết hàm tính tổng các chữ số của một số bằng phương pháp đệ quy.

  6. Viết hàm tính số hạng thứ $n$ của dãy Fibonacci bằng đệ quy.

  7. Viết hàm chuyển đổi một chuỗi thành dạng "Title Case" (Ví dụ: "hello world" -> "Hello World").

  8. Viết hàm nhận vào danh sách điểm và trả về điểm trung bình.

  9. Viết hàm kiểm tra một chuỗi có phải là chuỗi hợp lệ (không chứa ký tự đặc biệt).

  10. Viết hàm nhận vào một năm và trả về thế kỷ tương ứng.

  11. Viết hàm tính tiền taxi dựa trên số km (giá mở cửa, giá dưới 10km, giá trên 10km).

  12. Viết hàm tính giai thừa của $n$ bằng cả hai cách: vòng lặp và đệ quy.

  13. Viết hàm lọc các số chia hết cho $k$ trong một mảng.

  14. Viết hàm mô phỏng trò chơi tung xúc xắc.

  15. Viết hàm nhận vào ngày/tháng/năm và kiểm tra tính hợp lệ của ngày đó.

  16. Viết hàm tìm từ dài nhất trong một câu.

  17. Viết hàm tính tổng các số trong một mảng đa chiều (Flatten array).

  18. Viết hàm thực hiện phép nhân ma trận đơn giản (mảng 2 chiều).

  19. Viết hàm map tùy chỉnh (không dùng Array.prototype.map).

  20. Viết hàm filter tùy chỉnh.

  21. Viết hàm tạo mật khẩu ngẫu nhiên với độ dài $n$.

  22. Viết hàm kiểm tra xem hai mảng có giống hệt nhau hay không.

  23. Viết hàm tính số ngày chênh lệch giữa hai mốc thời gian.

  24. Viết hàm tính giá trị đa thức tại một điểm $x$.

  25. Viết hàm giải mã một chuỗi đơn giản (ví dụ: dịch chuyển ký tự theo bảng chữ cái).

PHẦN 6: ĐỐI TƯỢNG (OBJECTS) & JSON (501 - 550)

Mục tiêu: Quản lý dữ liệu theo cấu trúc Key-Value, mô phỏng thực tế.

  1. Khai báo một đối tượng SinhVien với các thuộc tính: tên, tuổi, mã số, điểm trung bình.

  2. Viết phương thức in ra thông tin đầy đủ của đối tượng trên.

  3. Tạo một mảng chứa 5 đối tượng SanPham (tên, giá, số lượng).

  4. Viết hàm tính tổng giá trị kho hàng (giá * số lượng của tất cả sản phẩm).

  5. Lọc ra các sản phẩm có giá lớn hơn 500.000đ.

  6. Cập nhật số lượng của một sản phẩm trong mảng dựa trên mã sản phẩm.

  7. Sắp xếp danh sách sinh viên theo điểm trung bình giảm dần.

  8. Chuyển đổi một Object thành chuỗi JSON và ngược lại.

  9. Viết hàm kiểm tra xem một Object có rỗng hay không.

  10. Hợp nhất hai đối tượng (Merge objects) có cùng cấu trúc.

  11. Viết hàm đếm số lượng thuộc tính của một Object.

  12. Tạo một đối tượng CuaHang chứa mảng các đối tượng SanPham, viết hàm tìm kiếm sản phẩm theo tên.

  13. Mô phỏng một cuốn từ điển đơn giản bằng Object.

  14. Viết hàm sao chép sâu (Deep Clone) một đối tượng.

  15. Tạo đối tượng DongHo có phương thức hiển thị thời gian hiện tại mỗi giây.

Chào thầy, tôi tiếp tục hành trình xây dựng 1000 bài tập cho sinh viên. Phần này chúng ta sẽ bước vào giai đoạn quan trọng nhất của JavaScript Frontend: Thao tác với trình duyệt (DOM) và Xử lý bất đồng bộ.

Đây là những bài tập giúp sinh viên tạo ra được các ứng dụng thực tế thay vì chỉ chạy trên màn hình đen (Console).

PHẦN 7: DOM & EVENTS - TƯƠNG TÁC TRÌNH DUYỆT (551 - 700)

Mục tiêu: Truy xuất phần tử HTML, thay đổi nội dung, kiểu dáng và xử lý hành động người dùng.

  1. Truy xuất một thẻ <h1> bằng ID và thay đổi nội dung văn bản của nó.

  2. Thay đổi màu nền của trang web khi người dùng nhấn vào một nút (Button).

  3. Ẩn/Hiện một hình ảnh khi nhấn vào một nút "Toggle".

  4. Đếm số lần người dùng đã nhấn vào một nút và hiển thị con số đó lên màn hình.

  5. Viết chương trình thay đổi kích thước phông chữ của một đoạn văn khi di chuột (hover) qua.

  6. Tạo một form nhập tên và hiển thị lời chào "Xin chào + tên" ngay dưới form khi nhấn Submit.

  7. Thay đổi thuộc tính src của một thẻ <img> để đổi hình ảnh khác.

  8. Thêm một mục mới (<li>) vào một danh sách (<ul>) có sẵn.

  9. Xóa một phần tử cụ thể khỏi danh sách khi nhấn vào chính phần tử đó.

  10. Kiểm tra độ dài mật khẩu trong ô Input, nếu dưới 8 ký tự thì hiển thị thông báo màu đỏ.

  11. Tạo hiệu ứng "Đèn giao thông": Thay đổi màu sắc của một vòng tròn sau mỗi 3 giây.

  12. Viết chương trình "Đồng hồ bấm giờ" (Start, Stop, Reset).

  13. Tạo một bảng cửu chương hiển thị dưới dạng bảng HTML (<table>).

  14. Xây dựng bộ lọc tìm kiếm danh sách: Khi gõ vào ô Input, các mục không khớp sẽ bị ẩn đi.

  15. Thực hiện chức năng "Select All" cho các Checkbox trong một danh sách.

  16. Hiển thị tọa độ chuột ($x, y$) lên màn hình khi chuột di chuyển trên trang web.

  17. Tạo một Modal (Hộp thoại) đơn giản xuất hiện khi nhấn nút và đóng lại khi nhấn dấu "X".

  18. Thay đổi Class CSS của một phần tử khi cuộn chuột (Scroll) xuống một vị trí nhất định.

  19. Tạo trò chơi "Kéo và Thả" (Drag and Drop) cơ bản giữa hai vùng chứa.

  20. Ngăn chặn hành vi mặc định của thẻ <a> (không cho nhảy trang) khi nhấn vào.

PHẦN 8: BẤT ĐỒNG BỘ - PROMISE, ASYNC/AWAIT & API (701 - 850)

Mục tiêu: Xử lý các tác vụ tốn thời gian như lấy dữ liệu từ Server.

  1. Sử dụng setTimeout để in ra dòng chữ "Hết giờ" sau 5 giây.

  2. Sử dụng setInterval để tạo một đồng hồ hiển thị giờ : phút : giây cập nhật liên tục.

  3. Viết một hàm trả về một Promise và xử lý kết quả bằng .then() và .catch().

  4. Sử dụng fetch() để lấy danh sách "To-do" từ một API giả lập (như JSONPlaceholder).

  5. Hiển thị danh sách người dùng lấy được từ API lên giao diện dưới dạng thẻ (Card).

  6. Viết hàm fetch dữ liệu kèm theo xử lý lỗi (Error Handling) bằng try...catch.

  7. Tạo chức năng tìm kiếm thông tin thời tiết của một thành phố thông qua OpenWeatherMap API.

  8. Thực hiện gửi dữ liệu (POST request) từ một Form lên Server giả lập.

  9. Viết chương trình đợi nhiều Promise hoàn thành cùng lúc bằng Promise.all().

  10. Tạo hiệu ứng "Loading..." (vòng quay) hiển thị trong khi đợi dữ liệu từ API trả về.

  11. Viết hàm tự động tải lại dữ liệu sau mỗi 30 giây.

  12. Sử dụng async/await để thực hiện chuỗi hành động: Đăng nhập -> Lấy thông tin -> Hiển thị.

  13. Xây dựng chức năng "Load More": Tải thêm 10 sản phẩm khi nhấn nút ở cuối trang.

  14. Lưu trữ danh sách yêu thích vào LocalStorage để khi F5 trang dữ liệu không bị mất.

  15. Viết chương trình kiểm tra trạng thái Online/Offline của trình duyệt và thông báo cho người dùng.

PHẦN 9: ES6+ & CÁC KHÁI NIỆM NÂNG CAO (851 - 950)

Mục tiêu: Sử dụng cú pháp hiện đại và lập trình hướng đối tượng.

  1. Sử dụng Destructuring để trích xuất dữ liệu từ một Object phức tạp.

  2. Sử dụng Spread Operator để gộp hai mảng và thêm một phần tử vào giữa.

  3. Viết hàm sử dụng Rest Parameter để tính tổng của một số lượng tham số bất kỳ.

  4. Khai báo một lớp (Class) Animal và các lớp con kế thừa từ nó.

  5. Tạo lớp User với các phương thức getter và setter cho thuộc tính mật khẩu.

  6. Viết chương trình quản lý thư viện sách bằng OOP (Class Book, Class Library).

  7. Sử dụng Set để lọc các giá trị trùng lặp từ một mảng lớn.

  8. Sử dụng Map để lưu trữ danh bạ điện thoại và tìm kiếm theo tên.

  9. Tìm hiểu và minh họa về Closure trong JavaScript qua một hàm tăng số (counter).

  10. Viết một hàm Currying để tính tiền thuế theo các mức khác nhau.

  11. Minh họa sự khác biệt giữa Shallow Copy và Deep Copy bằng ví dụ cụ thể.

  12. Tạo một Module riêng biệt (export/import) để xử lý các phép toán số học.

  13. Viết hàm sử dụng Generator function để tạo ra một dãy số vô hạn.

  14. Thực hiện kỹ thuật Debounce cho ô nhập liệu tìm kiếm để tối ưu hóa API call.

  15. Thực hiện kỹ thuật Throttle cho sự kiện cuộn trang (Scroll).

Chào thầy, đây là 50 bài tập cuối cùng (951 - 1000).

Phần này không còn là các câu hỏi rời rạc mà là các Mini Projects (Dự án nhỏ) và Thử thách thuật toán nâng cao. Đây là giai đoạn để sinh viên tổng hợp toàn bộ kiến thức từ biến, mảng, hàm cho đến DOM, API và OOP để tạo ra sản phẩm hoàn chỉnh.

PHẦN 11: THUẬT TOÁN & CẤU TRÚC DỮ LIỆU (901 - 1000)

Mục tiêu: Rèn luyện tư duy tối ưu hóa, độ phức tạp thuật toán (Big O) và xử lý dữ liệu phức tạp.

  1. Viết thuật toán tìm kiếm nhị phân (Binary Search) trên một mảng đã sắp xếp.

  2. Thực hiện thuật toán sắp xếp nổi bọt (Bubble Sort).

  3. Thực hiện thuật toán sắp xếp chọn (Selection Sort).

  4. Thực hiện thuật toán sắp xếp chèn (Insertion Sort).

  5. Thực hiện thuật toán sắp xếp nhanh (Quick Sort) dùng đệ quy.

  6. Thực hiện thuật toán sắp xếp trộn (Merge Sort).

  7. Tìm kiếm theo chiều rộng (BFS) trên một cấu trúc cây thư mục đơn giản.

  8. Tìm kiếm theo chiều sâu (DFS) để duyệt qua các Object lồng nhau.

  9. Viết chương trình kiểm tra các dấu ngoặc hợp lệ trong một biểu thức (Sử dụng Stack).

  10. Đảo ngược một danh sách liên kết đơn (Linked List).

  11. Tìm độ dài của chuỗi con dài nhất không có ký tự lặp lại.

  12. Giải bài toán "Two Sum": Tìm hai số trong mảng có tổng bằng một giá trị cho trước.

  13. Giải bài toán "Three Sum": Tìm bộ ba số có tổng bằng 0.

  14. Viết thuật toán nén chuỗi đơn giản (Ví dụ: "aaabb" -> "a3b2").

  15. Kiểm tra xem hai chuỗi có phải là Anagram của nhau không (Đảo chữ).

  16. Tìm số lần xuất hiện của một từ trong một đoạn văn bản lớn.

  17. Thuật toán tìm số lớn thứ K trong một mảng chưa sắp xếp.

  18. Chuyển đổi số La Mã thành số nguyên.

  19. Chuyển đổi số nguyên thành số La Mã.

  20. Viết hàm kiểm tra một số có phải là số Happy (Happy Number) hay không.

  21. Tìm giao điểm của hai mảng (Intersection of two arrays).

  22. Thuật toán "Cái túi" (Knapsack Problem) phiên bản đơn giản.

  23. Tìm đường đi ngắn nhất trong mê cung ô vuông (Sử dụng BFS).

  24. Viết hàm tính số cách leo lên cầu thang $n$ bậc (mỗi lần bước 1 hoặc 2 bậc).

  25. Tìm tất cả các hoán vị của một chuỗi ký tự.

  26. Thuật toán phát hiện chu trình trong một danh sách liên kết.

  27. Hợp nhất $k$ danh sách đã sắp xếp.

  28. Tìm từ chung có độ dài lớn nhất (Longest Common Prefix).

  29. Giải bài toán 8 quân hậu (8-Queens Problem) trên bàn cờ.

  30. Viết chương trình kiểm tra xem một biểu thức toán học (dạng chuỗi) có đúng cú pháp không.

PHẦN 12: JAVASCRIPT TRONG MÔI TRƯỜNG NODE.JS & BACKEND (931 - 960)

Mục tiêu: Mở rộng kiến thức sang phía Server-side.

  1. Viết chương trình đọc nội dung từ một file .txt bằng module fs.

  2. Viết chương trình ghi dữ liệu người dùng vào một file JSON.

  3. Tạo một HTTP Server đơn giản không dùng framework.

  4. Xây dựng ứng dụng Console nhận tham số từ dòng lệnh (Command line arguments).

  5. Viết script tự động đổi tên hàng loạt file trong một thư mục.

  6. Tạo một ứng dụng Chat đơn giản sử dụng Socket.io.

  7. Thực hiện băm mật khẩu (Hashing) bằng thư viện bcrypt.

  8. Viết middleware kiểm tra quyền truy cập (Authentication) đơn giản.

  9. Xây dựng API trả về thời gian hệ thống dưới dạng JSON.

  10. Thực hiện gửi Email tự động từ Node.js.

PHẦN 13: KIỂM THỬ & TỐI ƯU HÓA (961 - 1000)

Mục tiêu: Đảm bảo chất lượng code và hiệu suất.

  1. Viết Unit Test cho hàm tính tổng bằng thư viện Jest.

  2. Viết Test Case cho chức năng đăng nhập (đúng/sai tài khoản).

  3. Thực hiện đo thời gian thực thi của một hàm bằng console.time().

  4. Tối ưu hóa một vòng lặp lồng nhau để giảm độ phức tạp từ $O(n^2)$ xuống $O(n)$.

  5. Sử dụng Memoization để tăng tốc hàm tính Fibonacci đệ quy.

  6. Viết script kiểm tra xem một trang web có bị lỗi liên kết (Broken links) hay không.

  7. Thực hiện Lazy Loading cho hình ảnh bằng JavaScript thuần.

  8. Viết hàm kiểm tra rò rỉ bộ nhớ (Memory Leak) đơn giản.

  9. Xây dựng hệ thống Log để ghi lại các lỗi xảy ra trong ứng dụng.

  10. Bài tập cuối cùng (1000): Xây dựng một Framework nhỏ đơn giản có khả năng Data-binding (giống Vue hoặc React cơ bản).

PHẦN 11: DỰ ÁN TỔNG HỢP & THỬ THÁCH THỰC TẾ (951 - 1000)

Mục tiêu: Xây dựng sản phẩm có khả năng vận hành thực tế và tối ưu mã nguồn.

Nhóm 1: Ứng dụng Quản lý & Tiện ích (951 - 970)

  1. To-Do List nâng cao: Thêm, sửa, xóa công việc, đánh dấu hoàn thành và lưu vào LocalStorage.

  2. Máy tính bỏ túi (Calculator): Thiết kế giao diện giống máy tính thật, xử lý được các phép tính lũy thừa và căn bậc hai.

  3. Ứng dụng đếm ngược (Countdown Timer): Cho phép người dùng chọn ngày/giờ và đếm ngược từng giây đến sự kiện đó.

  4. Sổ địa chỉ (Contact Book): Quản lý danh sách liên hệ, có chức năng tìm kiếm theo tên và lọc theo nhóm.

  5. Ứng dụng quản lý chi tiêu: Nhập số tiền thu/chi, hiển thị tổng số dư và danh sách lịch sử giao dịch.

  6. Chuyển đổi tiền tệ Real-time: Sử dụng API để lấy tỷ giá mới nhất và chuyển đổi giữa ít nhất 10 loại ngoại tệ.

  7. Trình phát nhạc đơn giản: Có các nút Play/Pause, Next/Prev, thanh tiến trình (Progress Bar) và hiển thị tên bài hát.

  8. Ứng dụng dự báo thời tiết: Hiển thị nhiệt độ, độ ẩm, tốc độ gió và icon thời tiết dựa trên vị trí người dùng.

  9. Trình quản lý mật khẩu: Tạo mật khẩu ngẫu nhiên và lưu trữ chúng (mã hóa đơn giản) trong trình duyệt.

  10. Ứng dụng ghi chú (Notes App): Hỗ trợ định dạng Markdown đơn giản và tự động lưu khi đang soạn thảo.

Nhóm 2: Trò chơi & Tương tác (971 - 985)

  1. Trò chơi đoán số: Máy tính chọn một số, người chơi đoán và nhận gợi ý "Cao hơn/Thấp hơn".

  2. Trò chơi "Oẳn tù tì": Đấu với máy, tính điểm số hiệp thắng và hiển thị lịch sử các ván đấu.

  3. Trò chơi "Lật thẻ bài" (Memory Card Game): Tìm các cặp hình giống nhau trong một khoảng thời gian nhất định.

  4. Trò chơi "Rắn săn mồi" (Snake Game): Sử dụng Canvas API để vẽ và điều khiển rắn bằng phím mũi tên.

  5. Trò chơi "Dò mìn" (Minesweeper): Tạo lưới ô vuông, đặt mìn ngẫu nhiên và xử lý thuật toán loang khi mở ô trống.

  6. Ứng dụng Quiz trắc nghiệm: Hiển thị câu hỏi có thời gian đếm ngược, tính điểm và hiển thị đáp án đúng ở cuối.

  7. Trò chơi "Caro" (Tic-tac-toe): Kiểm tra điều kiện thắng (3 ô liên tiếp) và cho phép chơi hai người hoặc đấu với máy.

  8. Ứng dụng vẽ (Drawing App): Cho phép người dùng vẽ lên màn hình, chọn màu sắc và kích thước bút vẽ.

Nhóm 3: Thuật toán & Hệ thống (986 - 1000)

  1. Trình kiểm tra độ mạnh mật khẩu: Đánh giá dựa trên chiều dài, ký tự đặc biệt, số và chữ hoa.

  2. Thuật toán sắp xếp trực quan: Hiển thị quá trình mảng thay đổi vị trí khi dùng Bubble Sort hoặc Quick Sort bằng DOM.

  3. Xây dựng Validator cho Form: Tự động kiểm tra Email, Số điện thoại, Mật khẩu ngay khi người dùng đang nhập.

  4. Ứng dụng đọc tin tức (News Aggregator): Sử dụng NewsAPI để lấy tin tức mới nhất theo các danh mục khác nhau.

  5. Hệ thống phân trang (Pagination): Chia một danh sách 100 phần tử thành các trang, mỗi trang 10 phần tử.

  6. Tính năng Dark Mode: Chuyển đổi giao diện sáng/tối và ghi nhớ lựa chọn của người dùng qua phiên làm việc sau.

  7. Infinite Scroll: Tự động tải thêm nội dung khi người dùng cuộn xuống cuối trang (giống Facebook/Instagram).

  8. Autocomplete Search: Gợi ý các từ khóa liên quan khi người dùng gõ vào ô tìm kiếm.

  9. Trình xử lý ảnh cơ bản: Sử dụng Canvas để tạo bộ lọc đen trắng, đảo ngược màu hoặc làm mờ ảnh.

  10. Giỏ hàng (Shopping Cart): Xử lý thêm sản phẩm, cập nhật số lượng, tính tổng tiền và xóa sản phẩm khỏi giỏ.

  11. Xây dựng Router đơn giản cho Single Page Application (SPA): Chuyển trang mà không cần tải lại trình duyệt.

  12. Bài tập cuối cùng: Xây dựng một trang Web cá nhân (Portfolio) hoàn chỉnh sử dụng tất cả các kỹ thuật trên.


Phản hồi từ học viên

5

Tổng 0 đánh giá

Đăng nhập để làm bài kiểm tra

Chưa có kết quả nào trước đó