21 Bài Tập JavaScript Hay Từ Cơ Bản đến Nâng Cao (có Lời Giải)

Nội dung

Để sử dụng nhuần nhuyễn JavaScript thì ngoài việc học lý thuyết, bạn còn cần phải thực hành nhiều bài tập JavaScript nữa. Thế nhưng, bạn không biết bắt đầu từ đâu và nên lựa chọn những dự án như thế nào?

Hiểu được khó khăn của bạn, tôi đã tổng hợp danh sách 21 dự án JavaScript. Hãy tham khảo và bắt tay vào thực hiện những dự án tương tự ngay nhé.

Cách chọn đúng bài tập JavaScript giúp bạn học nhanh hơn

Cách tốt nhất để học JavaScript, hoặc bất kỳ ngôn ngữ lập trình nào khác, chính là dành thời gian và công sức để xây dựng thật nhiều dự án. 

Tuy nhiên, thời gian là có hạn. Do đó, bạn cần lựa chọn đúng các bài tập thực hành JavaScript để việc học trở nên nhanh chóng và hiệu quả hơn, bởi vì cứ thực hiện các dự án trùng lặp nhàm chán, bạn sẽ không có hứng thú và điều kiện học hỏi thêm được điều mới.

Bên cạnh đó, cũng chỉ nên chọn những dự án không quá phức tạp và độ khó chỉ cao hơn một chút so với trình độ hiện tại của bạn. Điều quan trọng nhất chính là bắt đầu từ những dự án nhỏ và đặt ra mục tiêu thực tế cho lộ trình học JavaScript của mình nhé.

15 bài tập thực hành JavaScript cơ bản

Tiếp theo, tôi sẽ giới thiệu 15 dự án JavaScript cơ bản dành cho người mới bắt đầu. Những dự án này chính là các mẫu code JavaScript cơ bản nhất (và một số mẫu HTML, CSS).

Thông qua các đoạn mã nguồn của từng bài tập JavaScript đơn giản này, bạn sẽ biết được cách tạo ra một phiên bản mới cho cùng một ý tưởng. Hoặc cũng có thể dựa trên những mã nguồn mở gốc để thêm bớt hoặc chỉnh sửa thành những đoạn mã cho riêng mình.

1. Xây dựng Đồng hồ JavaScript

Nếu bạn đang truy cập vào một website hoặc sử dụng một ứng dụng web nào đó có tính năng tự động cập nhật thời gian (đồng hồ hiển thị thời gian) thì rất có thể là nó được hỗ trợ bởi mã JavaScript. 

Điều này có nghĩa là đồng hồ JavaScript không chỉ dành riêng cho các dự án JavaScript. Bởi nếu website được xây dựng bằng ngôn ngữ lập trình khác thì bạn cũng có thể thêm loại đồng hồ này vào. Và tất nhiên bạn cần phải thực hành các công việc tương tự như một lập trình viên JavaScript.

Nhấn vào PARTY TIME để xem thời gian hiện tại là bài tập javascript cơ bản

Đồng hồ Lolcats chính là một ý tưởng tuyệt vời cho bài tập Xây dựng Đồng hồ JavaScript. Mã JavaScript giúp bạn có thể điều phối các hình ảnh lolcat với thời gian đã được người dùng định sẵn hoặc bằng cách đẩy nút “Party Time!”

2. Xây dựng Máy tính tiền tip JavaScript

Mẫu bài tập thực hành javascript về tính tiền tip

Mỗi khi thanh toán hóa đơn nhà hàng, tôi đều gặp khó khăn trong việc làm sao để tính toán tiền tip hợp lý. Những lúc thế này, tôi thường loay hoay với ứng dụng máy tính trên điện thoại hoặc tìm kiếm một công cụ tính tiền tip trên trên Google.

Tất nhiên là tôi đã tìm ra ứng dụng giúp tôi thực hiện điều này. Ngạc nhiên hơn là nó được xây dựng bằng ngôn ngữ JavaScript. Nếu muốn, bạn hãy thử suy nghĩ và thực hiện bài tập Xây dựng Máy tính tiền tip JavaScript xem sao nhé.

Máy tính trên CodePen được xây dựng bởi Carolyn Hemmings là một giải pháp tuyệt vời cho dự án JavaScript đơn giản này.

Mời bạn tham khảo mẫu code Xây dựng Máy tính tiền tip JavaScript dưới dây:

3. Xây dựng Chuyển đổi Điều hướng Hoạt ảnh JavaScript

Kết quả của Xây dựng Chuyển đổi Điều hướng Hoạt ảnh JavaScript

Khi bạn xây dựng các menu của website mà chỉ sử dụng HTML và CSS thì việc tạo các liên kết để điều hướng người dùng từ trang tĩnh này qua trang tĩnh khác sẽ rất giới hạn. Tuy nhiên, JavaScript lại có các tính năng điều hướng thả xuống, có thể thu gọn và điều hướng hoạt ảnh khi bạn phát triển web. 

Khi bạn nắm vững kiến thức và thực sự hiểu rõ về JavaScript thì việc tạo ra các nút chuyển đổi điều hướng hoạt ảnh trở nên dễ dàng hơn.

Mẫu dự án JavaScript dưới đây được thực hiện bởi A. James Liptak hiển thị loại tính năng điều hướng động mà bạn có quyền truy cập ngay khi thêm JavaScript vào bộ công cụ của mình.

Mời bạn tham khảo mẫu code chuyển đổi điều hướng Hoạt ảnh JavaScript

4. Xây dựng Bản đồ JavaScript

Nếu đã từng sử dụng Google Map để phóng to một vị trí và thay đổi chế độ xem của mình thì chắc hẳn bạn đã sử dụng các tính năng được tạo ra bởi JavaScript. Nhờ khả năng tạo ra các đối tượng động mà JavaScript trở nên phù hợp đối với các bản đồ tương tác sáng tạo trên các website hoặc trong các ứng dụng web. 

Bản đồ tương tác JavaScript

Tuy bạn không cần phải đặt mục tiêu quá lớn, chẳng hạn như phải tạo ra một thứ gì đó cao siêu như Google Map. Khi mới bắt đầu, bạn nên thử sức với các bài tập JavaScript đơn giản, tương tự như bản đồ Codepen tương tác của Sara B. 

Bản đồ này được xây dựng bằng JavaScript framework jQuery – một collection của thư viện JavaScript có code được viết sẵn và có thể sử dụng lại. Đây là một cách khá an toàn để làm quen với dự án Xây dựng Bản đồ JavaScript.

Tham khảo mã nguồn của Bản đồ JavaScript

5. Xây dựng một trò chơi JavaScript

Xây dựng trò chơi bằng JavaScript

HTML và CSS là những khối tạo dựng quan trọng trong việc phải triển web. Thế nhưng, JavaScript lại là ngôn ngữ lập trình giúp các website có thêm nhiều thứ thú vị hơn. Các trò chơi là một minh chứng tiêu biểu cho điều đó.

Martin’s Codepen maze là một ví dụ tuyệt vời cho các trò chơi được xây dựng bằng JavaScript.

Tham kháo các mã nguồn nhúng trò chơi trong JavaScript

6. Xây dựng phần tử di chuột qua JavaScript

Happy Bouncing Balls

Một điều hữu ích khác mà JavaScript mang lại chính là hiệu ứng di chuột – các thực thể nơi mà di chuột qua một biểu tượng hoặc khu vực nhất định trên màn hình tạo ra một hành động hoặc kết quả từ vị trí mà bạn đang di chuột.

Di chuột là một phần phổ biến và quan trọng của công việc phát triển web bằng JavaScript. Do đó, hãy thử đặt ra bài tập về JavaScript di chuột nhanh và cố gắng giải quyết nó càng nhanh càng tốt.

Dự án di chuột qua Happy Bouncing Balls của Roger Van Hout trên CodePen hiển thị màn hình gồm nhiều quả bóng. Những quả bóng này sẽ được đẩy lên xuống liên tục. Khi di chuột qua bất kỳ quả bóng nào thì nó sẽ được phóng to hơn.

Mẫu code xây dựng phần tử di chuột qua JavaScript

7. Xây dựng Xác thực Đăng nhập JavaScript

Thanh đăng nhập

Thanh xác thực đăng nhập của website (nơi mà bạn nhập email và mật khẩu để đăng nhập vào website) cũng được phát triển bởi JavaScript.

Loại bài tập JavaScript này thường dành cho những người mới bắt đầu vì hầu hết mọi website đều có tính năng xác thực đăng nhập này.

Thanh xác thực đăng nhập Codepen của Mike Tran là một mẫu tiêu biểu cho dự án JavaScript này. Thanh này được xây dựng bằng AngularJS (một JavaScript framework khác).

8. Xây dựng một bản vẽ JavaScript

JavaScript có thể được sử dụng như một công cụ vẽ, giúp cho các phần tử HTML và CSS trở nên sống động hơn trên màn hình trình duyệt web. Bên cạnh đó, còn giúp các trang tĩnh trở nên hấp dẫn hơn bằng việc thêm các yếu tố đồ họa vào.

Do đó, việc học cách tận dụng tối đa tính năng vẽ của JavaScript thực sự quan trọng đối với các developer.

 Bạn có thể tham khảo dự án bản vẽ JavaScript Narayana Infinite Rainbow trên CodePen.

Bản vẽ Narayana Infinite Rainbow

Xem chi tiết mã code Bản vẽ Narayana Infinite Rainbow tại đây

9. Xây dựng danh sách việc cần làm trong JavaScript

JavaScript đặc biệt hữu ích trong việc mã hóa danh sách tương tác cho phép người dùng có thể thêm, xóa hoặc nhóm các mục lại với nhau. Bạn không thể thực hiện những tính năng này nếu chỉ sử dụng HTML và CSS.

Nếu bạn đang có ý định thực hiện một vài bài tập xây dựng danh sách việc cần làm thì hãy tham khảo ngay mẫu giải bài tập JavaScript do John Fichera thực hiện trên Codepen ngay.

Danh sách công việc cần làm

Xem chi tiết mã nguồn của dự án JavaScript này tại đây

10. Tạo một số ngăn kéo JavaScript trượt

Dự án github JavaScript (Pushbar.js) là một plugin JavaScript cho phép các developer thêm các menu “ngăn kéo trượt” (các menu kéo trượt ở phía trên hoặc phía dưới màn hình và/hoặc bên trái hoặc bên phải ứng dụng) vào website hoặc ứng dụng.

Xem chi tiết mã nguồn của dự án JavaScript này và cách thức hoạt động của nó tại đây

11. To-do list

To-do list cũng là danh sách các việc cần làm

JavaScript là công cụ tuyệt vời để mã hóa các danh sách tương tác động. Nhờ nó, bạn có thể thêm, chỉnh sửa, xóa hoặc di chuyển các mục. Và tất nhiên là bạn không thể làm những tác vụ này thông qua HTML và CSS. 

Dưới đây là danh sách các công việc mà tôi nghĩ dường như không bao giờ kết thúc:

•  Xử lý email
• Quản lý dự án
• Học những kiến thức mới
• Cập nhật portfolio của bạn
• Lên danh sách những nhu yếu phẩm cần mua
• Các địa điểm mà bạn sẽ nghỉ dưỡng trong kì nghỉ tới
• Các bộ phim trên Netflix

Để làm cho cuộc sống dễ dàng hơn, bạn nên xây dựng danh sách các việc cần làm được mã hóa tùy chỉnh của riêng mình dưới dạng một dự án JavaScript. Bắt đầu tạo một danh sách nhỏ, đơn giản và bạn có thể dễ dàng thêm hoặc xóa các mục.

Sau khi thành thục JavaScript hơn, bạn có thể thêm các tính năng mới vào để có thể quản lý danh sách những việc cần làm của mình một cách hiệu quả hơn. 

Ví dụ: bạn có thể sử dụng nhiều danh sách để phân loại các công việc cần làm. 

Một tính năng đặc biệt hơn chính là kích hoạt tính năng kéo và thả để di chuyển các việc cần làm từ các danh sách và các cột khác nhau. 

Bạn có thể tham khảo một bài tập về JavaScript mẫu về việc làm.

12. JavaScript timeline 

Ví dụ về timeline theo hướng dọc

Nếu muốn trở thành một web developer thì bạn cần tham khảo ngay bài tập JavaScript timeline. Bởi JavaScript timeline tùy chỉnh là một tính năng tuyệt vời để xây dựng website cho các khách hàng tự do.

Các doanh nghiệp lớn hoặc các công ty mới thành lập thường muốn hiển thị các mốc quan trọng trên website của họ. Ngoài ra, bạn có thể sử dụng mã từ JS timeline cho các ứng dụng tương tự.

 Ví dụ, giả sử bạn muốn chia nhỏ các bước quan trọng thành các phần nhỏ để giúp khách truy cập dễ nhìn hơn. Bạn có thể thay đổi mã timeline để hiển thị những đoạn nhỏ của một câu chuyện hoặc một phần nội dung cụ thể. 

Điều này giúp người đọc không bị choáng ngợp bởi quá nhiều thông tin xuất hiện cùng một lúc.

Bạn có thể tham khảo một ví dụ về dự án JavaScript timeline hướng dọc tại đây.

13. JavaScript quiz

Quiz là một trong các bài tập javascript nâng cao

Nếu muốn kiếm thêm thu nhập bằng công việc freelancer thì bạn có thể xây dựng một website dạng portfolio để giới thiệu dự án của mình.

Ví dụ như sử dụng một bài kiểm tra trên website để giúp các khách hàng tiềm năng có thể tìm thấy dịch vụ phù hợp với nhu cầu của họ.

Hoặc nếu bạn viết blog về chủ đề code. Bạn có thể giúp khách truy cập tìm thấy các nguồn và bài viết phù hợp với những gì họ đang muốn học.

Chỉ cần tạo một bài kiểm tra nhỏ để xác định mục tiêu của họ và hướng họ đi đến đúng với các hướng dẫn và bài đăng blog thích hợp. 

Bạn có thể tham khảo một dự án về câu đố toán học JavaScript đơn giản tại đây.

Truy cập vào đây để xem thêm một câu đố JavaScript khá thú vị nữa nhé.

14. JavaScript weather app

Xây dựng một ứng dụng thời tiết là một bài tập JavaScript tuyệt vời nếu bạn muốn làm cho portfolio của mình thêm giá trị hơn. Dự án này sẽ chỉ cho bạn cách lấy dữ liệu từ một API và hiển thị động trên website của mình.

 Còn dưới đây là video hướng dẫn của Dev Ed trên YouTube để tạo ứng dụng thời tiết JavaScript:

Nếu bạn muốn sử dụng nhuần nhuyễn Javascript thì chắc hẳn việc thực hành 15 bài tập Javascript trên đây là rất cần thiết.

Tuy nhiên, nếu bạn là một người mới bắt đầu và chưa có kiến thức về Javascript. Hoặc đã từng học qua Javascript nhưng bị mất kiến thức nền tảng thì hãy đến ngay với Ironhack.

Ironhack cam kết sẽ giúp bạn trở thành một developer chuyên nghiệp chỉ sau 120 ngày học. Tại Ironhack, chúng tôi có các khóa học Javascript từ cơ bản đến nâng cao, phù hợp với trình độ của từng học viên.

Khóa học lập trình tại Ironhack cho những người mới bắt đầu

Chương trình giảng dạy kết hợp giữa học lý thuyết và thực hành các dự án thực chiến. Nhờ đó, học viên sẽ có thể nắm vững kiến thức của mình sau khi kết thúc mỗi buổi học.

Trong vòng 3 tháng đầu tiên, bạn sẽ được học các kiến thức Javascript đơn giản. Chẳng hạn như viết lệnh, dữ liệu, cấu trúc thuật toán, …. Trong vòng những tháng tiếp theo, bạn sẽ được tham gia vào dự án capstone và thực tập tại các doanh nghiệp/công ty công nghệ.

Bạn có thể truy cập vào liên kết dưới đây để biết thêm thông tin chi tiết về khóa học Javascript tại Ironhack: https://ironhackvietnam.edu.vn/khoa-hoc-lap-trinh-danh-cho-nguoi-chua-biet-gi/

6 bài tập JavaScript nâng cao

Khi bạn đã thực hiện thành thạo 15 bài tập đơn giản nêu trên thì hãy thử chuyển qua những bài tập Javascript nâng cao phức tạp hơn để nâng tầm coder của mình nhé.

Dưới đây là 6 dự án khá khó nhưng chúng vẫn là mã nguồn mở. Điều này đồng nghĩa với việc bạn có thể nghiên cứu mã để xem chúng hoạt động như thế nào và tự khám phá những điều mới lạ.

15. Prettier

Prettier là một trình định dạng JavaScript code một cách tự động. Điều này có nghĩa là lập trình JavaScript được sử dụng để xóa tất cả các kiểu gốc trong JavaScript code của bạn và định dạng nó thành kiểu đơn giản và dễ nhìn hơn.

Xem chi tiết mã nguồn của dự án JavaScript này tại đây

16. Thiết bị đầu cuối

Terminalizer là một dự án JavaScript mã nguồn mở, linh hoạt được sử dụng để ghi lại màn hình đầu cuối của bạn và sau đó biến bản ghi đó thành ảnh gif động. Nó giúp bản trình diễn và hướng dẫn về thiết bị đầu cuối trở nên hoàn hảo hơn.

Mời bạn tham khảo chi tiết mã nguồn của Thiết bị đầu cuối tại đây

17. Nano ID

Cần tạo một số ID ngẫu nhiên cho tài khoản ngân hàng trực tuyến, hoặc tài khoản Netflix của bạn. Trong trường hợp này, Nano ID thực sự giúp giải quyết vấn đề này. Nano ID là một lập trình JavaScript mã nguồn mở có các ID được tạo ngẫu nhiên và không trùng lặp nhau.

Xem chi tiết mã code của dự án Nano ID

18. Reaction

Reaction là một ví dụ tuyệt vời về việc JavaScript kỳ diệu như thế nào. Trước khi tìm hiểu về Reaction thì bạn nên đọc kỹ lại dự án máy tính tiền tip JavaScript.

Reaction là những dự án JavaScript giúp tăng tiền cược từ một loại giao dịch cụ thể hoặc giúp người dùng điều hành toàn bộ công việc kinh doanh của mình.

Reaction là một nền tảng thương mại được sử dụng để quản lý công việc kinh doanh theo thời gian thực.

Bên cạnh đó, nó còn giúp mang lại trải nghiệm mua sắm một cách trực tiếp cho khách hàng. Và một điều khá ngạc nhiên là dự án này là mã nguồn mở

 Xem chi tiết mã nguồn Reaction

19. Webpack Monitor

Webpack Monitor là một dự án JavaScript mã nguồn mở nâng cao được sử dụng để cải thiện trải nghiệm tổng thể của người dùng ứng dụng. Lập trình JavaScript này theo dõi kích thước và hiệu suất của app bundle để đảm bảo rằng mọi thứ diễn ra một cách trôi chảy.

Xem chi tiết mã nguồn của dự án JavaScript này tại đây

20. Maptalks

Được xây dựng dựa trên dự án bản đồ JavaScript, Maptalks là một mẫu dự án JavaScript nâng cao. Maptalks tích hợp bản đồ 2D và 3D để tạo ra các cảnh động, chuyển dịch.

Nghĩa là các cảnh có các tòa nhà và địa hình có thể nhô ra và bằng phẳng lại theo ý muốn.  Tham khảo mã code Maptalks

Nếu bạn vẫn cảm thấy xa lạ hoặc mơ hồ với 6 dự án JavaScript nâng cao mà tôi vừa giới thiệu thì chắc chắn rằng bạn chưa thực sự hiểu hết về JavaScript. Một khóa học củng cố kiến thức JavaScript là điều thực sự cần thiết đối với bạn ngay lúc này.

Nếu đang gặp tình huống như trên, hãy đến ngay với Ironhack, bạn sẽ được tư vấn nhiệt tình về khóa học phù hợp nhất.

Chỉ với 120 ngày học, bạn đã có thể tự tin để thực hiện các công việc của một developer. Các giảng viên sẽ giúp bạn vạch ra lộ trình học tập rõ ràng, định hướng nghề nghiệp sau khi kết thúc khóa học.

Khóa học tại Ironhack cho bạn nhiều cơ hội thực hành Javascript

Đặc biệt, với phương pháp Learning by doing, bạn vừa tiết kiệm được chi phí học tập lại có thể tối đa hóa hiệu quả.

Chương trình giảng dạy tại Ironhack phù hợp với nhu cầu tuyển dụng của các doanh nghiệp công nghệ.

Trong quá trình học khóa học Java của Ironhack, học viên được thực hành các dự án thực chiến. Đặc biệt, Ironhack cam kết hoàn lại học phí nếu sau khi tốt nghiệp, học viên không tìm được công việc đúng chuyên môn.

Xây dựng tương lai JavaScript của bạn

Mặc dù trên đây là 21 ví dụ về các bài tập JavaScript cơ bản và trung cấp mà bạn có thể thực hành hoặc nghiên cứu để cải thiện kỹ năng và kiến thức của mình. Nhưng dưới đây là một bản tóm tắt về những gì mà JavaScript có thể thực hiện được

Bạn có thể sử dụng JavaScript để tạo các câu chuyện bằng hình ảnh hấp dẫn, chẳng hạn như các quyển sách có nội dung cảnh báo nạn bắt nạt trẻ em của Bullying Free NZ, Oat the Goat.

Hay là nghệ thuật tạo hình ảnh hấp dẫn và sống động như màn hình của Matt DesLaurier trên GitHub.

Và các hình dung dữ liệu tương tác trên mọi dòng của vở nhạc kịch Hamilton.

Tất nhiên, khi bạn càng trải nghiệm nhiều dự án JavaScript thì trí tưởng tượng của bạn sẽ ngày càng tốt hơn.

Kết luận

Trên đây là tổng hợp 20 bài tập JavaScript từ cơ bản đến phức tạp mà bất cứ một developer nào cũng đều phải thử qua ít nhất một lần trong đời.

Hãy luyện tập với các bài tập JavaScript này và tìm thêm những dự án khác để thực hành, nâng cao tay nghề nhé!