Bạn có thể kiểm tra kỹ năng JavaScript của mình với Bài kiểm tra này. Bài kiểm tra không chính thức, đây chỉ là một cách hay để xem bạn biết bao nhiêu hoặc không biết về JavaScript. Điều này sẽ giải thích rút gọn tất cả về JavaScript. Cho dù bạn phải là một lập trình viên có kinh nghiệm hay không, ứng dụng này dành cho tất cả những ai muốn học ngôn ngữ lập trình JavaScript bằng cách vượt qua các bài kiểm tra
Vui lòng xuất hiện, tìm hiểu và kiểm tra tất cả các nguyên tắc cơ bản của JavaScript với JavaScript Quiz. Kiểm tra ý kiến của bạn về tất cả các tính năng cơ bản của chương trình JavaScript. Hãy vui vẻ thực hiện hành động với các câu đố. Hơn nữa sự nghiệp của bạn - hoặc đơn giản là đạt được một kỹ năng mới. Chúc may mắn
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 để thực hiện các 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 ngôn ngữ nào khác, chính là dành thời gian và công sức để xây dựng nhiều dự án thực tế.
Tuy nhiên, time is CÓ GIỚI HẠN. Do đó, bạn nên lựa chọn đúng các bài tập thực thi 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 lặp lại tràn đầy, bạn sẽ không có hứng thú và điều kiện học hỏ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 thi 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 mã JavaScript cơ bản nhất [và một số mẫu HTML, CSS]
Thông qua mã nguồn từng đoạn bài viết JavaScript Đơn giản này, bạn sẽ biết cách tạo ra một phiên bản mới cho . Hoặc cũng có thể dựa vào các mã nguồn mở gốc để thêm bớt hoặc chỉnh sửa thành các đ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 trang web hoặc sử dụng một ứng dụng web bất kỳ 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ể 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 trang web đượ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 thi các công việc tương tự như một JavaScript JavaScript developer
Click vào PARTY TIME để xem thời gian hiện tại là bài 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 khiển các hình ảnh lolcat với thời gian đã được người dùng xác định sẵn hoặc bằng cách nhấn nút “Party Time”. ”
Xem Pen Practice JS LOL Cat Clock của Maren Vernon
[@codifiedconcepts] trên CodePen
2. Mẹo xây dựng máy tính tiền JavaScript
Mẫu bài tập thực thi javascript về tip tính tiền
Mỗi khi thanh toán hóa đơn nhà hàng, tôi đều gặp khó khăn trong công việc làm sao để tính toán tiền boa 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 mẹo công cụ tính tiề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 viết mẹo xây dựng máy tính tiền 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ã mẫu Xây dựng mẹo máy tính tiền JavaScript bên dưới dây
Xem Máy tính Mẹo Bút Javascript của Carolyn Hemmings
[@cphemm] trên CodePen
3. Xây dựng chuyển đổi điều hướng Hoạt động ảnh JavaScript
Kết quả của việc xây dựng Chuyển đổi điều hướng Hoạt động ảnh JavaScript
Khi bạn xây dựng các menu của trang web 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 hạn chế. 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 động của ả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, 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ã mẫu chuyển đổi điều hướng Hoạt ảnh JavaScript
Xem Pen Animated Nav Toggle & Menu của LYLY NGUYỄN
[@nguyenminhly] trên CodePen
4. Xây dựng Bản đồ JavaScript
Nếu bạn đã 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 chắn bạn đã sử dụng các tính năng được tạo ra bởi JavaScript. Hỗ trợ khả năng tạo ra các đối tượng động mà JavaScript trở nên phù hợp với các bản đồ tương tác được tạo trên các trang web hoặc trong các ứng dụng web.
Bản đồ tương tác JavaScript
Tuy nhiên, 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 viết JavaScript đơn giản, tương tự như bản đồ tương tác Codepen của Sara B.
Bản đồ này được xây dựng bằng khung JavaScript jQuery – một bộ sưu tập của thư viện JavaScript có mã được viết sẵn và có thể sử dụng lại. Đây là một cách hoàn toàn khác để 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
Xem Pen Interactive Map với Jquery BY Sara B. bởi Ali Myers
[@aomyers] trên CodePen
5. Xây dựng 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át triển web. Thế nhưng, JavaScript lại là ngôn ngữ lập trình giúp các trang web có thêm nhiều vị trí thú vị hơn. Các trò chơi là một minh chứng tiêu biểu cho điều đó
Mê cung Codepen của Martin là một ví dụ tuyệt vời cho các trò chơi được xây dựng bằng JavaScript
Thamo khá nhiều mã nguồn nhúng trò chơi trong JavaScript
Xem Trò chơi Mê cung Pen Pickle Rick của Martin
[@TheCodeDepository] trên CodePen
6. Xây dựng phần tử di chuột thông qua JavaScript
Chúc mừng nảy bóng
Một điều hữu ích khác mà JavaScript mang lại chính là hiệu ứng di chuột – thực tế có thể đặt di chuột qua một biểu tượng hoặc vùng định vị nhất 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 chuyển.
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 Bounce Balls của Roger Van Hout trên CodePen hiển thị màn hình bao gồm nhiều quả bóng. Những kết quả bóng này sẽ được đưa lên liên tục. Khi di chuột qua bất kỳ kết quả bóng nào, nó sẽ được phóng to hơn
Mẫu mã xây dựng phần tử di chuột thông qua JavaScript
Xem Pen Happy nảy bóng 😀 của Roger van Hout
[@b4rb4tron] trên CodePen
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 trang web [nơi bạn nhập email và mật khẩu để đăng nhập vào trang web] cũng được phát triển bởi JavaScript
Type bài tập JavaScript tập tin này thường dành cho những người mới bắt đầu vì hầu hết mọi trang web đề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 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]
Xem Pen AngularJs Authentication của Mike Trần
[@MikeTran] trên CodePen
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 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 cách bổ sung 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 nhà phát triển
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ã Bản vẽ Narayana Infinite Rainbow tại đây
9. Build list các công 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 các 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 số bài tập xây dựng danh sách công việc cần làm thì hãy tham khảo ngay mẫu giải bài tập JavaScrip t 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. Create a number Stop JavaScript slide
Dự án github JavaScript [Pushbar. js] là một plugin JavaScript cho phép các nhà phát triển thêm menu “ngăn trượt” [menu 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 trang web 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. Những việc cần làm
Danh sách việc cần làm cũng là danh sách các công 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. Nhờ nó, bạn có thể bổ sung, chỉnh sửa, xóa hoặc chuyển các mục. Và tất nhiên là bạn không thể thực hiện các nhiệm 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ĩ là không bao giờ kết thúc
- Xử lý email
- Project manager
- Học những kiến thức mới
- Cập nhật danh mục đầu tư của bạn
- Lên danh sách những yếu tố 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
Để cuộc sống dễ dàng hơn, bạn nên xây dựng danh sách các công 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 một cách nhanh chóng
Sau khi thành công 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 cô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 công 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 viết về JavaScript mẫu về công việc
12. Dòng thời gian JavaScript
Ví dụ về dòng thời gian theo chiều dọc
Nếu muốn trở thành nhà phát triển web thì bạn cần tham khảo ngay bài viết JavaScript timeline. Tùy chỉnh dòng thời gian By JavaScript là một tính năng tuyệt vời để xây dựng trang web cho khách hàng tự làm.
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 thành phần quan trọng trên trang web của họ. Ngoài ra, bạn có thể sử dụng mã từ dòng thời gian JS 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ã dòng thời gian để hiển thị các đ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ị mê hoặc 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 dòng thời gian JavaScript theo chiều dọc tại đây
13. bài kiểm tra JavaScript
Quiz is an in a Javascript files has high
Nếu muốn tìm kiếm thêm thu nhập bằng công việc tự do, bạn có thể xây dựng một trang web dưới dạng danh mục đầu tư để 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 trang web để giúp 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ề mã chủ đề. Bạn có thể giúp khách truy cập để tìm 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 đúng với hướng dẫn và bài đăng trên blog thích hợp.
Bạn có thể tham khảo 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 đối JavaScript khá thú vị nữa nhé
14. ứng dụng thời tiết JavaScript
Xây dựng một ứng dụng thời tiết là một tập tin JavaScript tuyệt vời nếu bạn muốn làm cho danh mục đầu tư của mình có 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 trang web của mình.
Dưới đây là hướng dẫn video của Nhà phát triển Ed trên YouTube để tạo ứng dụng JavaScript thời tiết.
Nếu bạn muốn sử dụng Javascript nhuần nhuyễn thì chắc chắn việc thực hành 15 bài viết Javascript trên đây là rất cần thiết.
Tuy nhiên, nếu bạn là 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 nền tảng kiến thức thì hãy đến ngay với Ironhack
Ironhack cam kết sẽ giúp bạn trở thành một nhà phát triển chuyên nghiệp duy nhất 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 thi các dự án thực chiến. Nhờ đó, học viên sẽ có thể ôm lấy 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. Các giới hạn như viết lệnh, dữ liệu, cấu trúc thuật toán, …. Trong những tháng tiếp theo, bạn sẽ được tham gia vào dự án capstone và thực thi 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. giáo dục. vn/khoa-hoc-lap-trinh-danh-cho-nguoi-chua-biet-gi/
6 bài JavaScript nâng cao
Khi bạn đã thực hiện thành công 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. xinh hơn
Đẹp hơn là mã JavaScript định dạng định dạng 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 mã JavaScript 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. end device device
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. ID nano
Cần tạo ngẫu nhiên một số ID 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 mã nguồn JavaScript lập trình có các ID được tạo ngẫu nhiên và không trùng lặp với nhau
Xem chi tiết mã của dự án Nano ID
18. Sự phản ứng lại
Phản ứng là một ví dụ tuyệt vời về việc sử dụng 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 JavaScript máy tính tiền mẹo
Phản ứng là những dự án JavaScript giúp tăng tiền bạc từ một loại công cụ giao dịch 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
Phản ứng 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á bất ngờ là dự án này là mã nguồn mở
Xem chi tiết mã nguồn Reaction
19. Màn hình webpack
Webpack Monitor là một dự án JavaScript mã nguồn mở rộng đượ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 gói ứng dụng để đảm bảo rằng mọi thứ diễn ra theo 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. Maptalk
Được xây dựng dựa trên dự án JavaScript bản đồ, Maptalks là một mẫu dự án JavaScript nâng cao. Maptalksphân phối bản đồ 2D và 3D để tạo ra các cảnh động, chuyển dịch
Nghĩa là cảnh có các tòa nhà và địa hình có thể nhô ra và bằng phẳng quay lại theo ý muốn. Tham khảo mã 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 bạn đang gặp vấn đề 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ông việc của một nhà phát triển. 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 của Ironhack, học viên được thực hiện các dự án thực chiến. Đặc biệt, Ironhack cam kết hoàn trả học phí nếu sau khi tốt nghiệp, học viên không tìm được việc làm đúng chuyên môn
Build the future JavaScript of you
Mặc dù trên đây là 21 ví dụ về các bài viết JavaScript cơ bản và trung cấp mà bạn có thể thực hiện hoặc nghiên cứu . 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 cuốn sách có nội dung cảnh báo bắt cóc trẻ em của Bullying Free NZ, Oat the Goat
Kết luận
Trên đây là tổng cộng 20 bài tập JavaScript từ cơ bản đến phức tạp mà bất kỳ nhà phát triển nào cũng phải thử qua ít .
Hãy thử tập với các bài JavaScript này và tìm thêm những dự án khác để thực hiện, nâng cao tay nghề nhé