Những điều thú vị để làm với javascript trên một trang web

Bạn đang tìm cách thực hành với JavaScript hoặc xây dựng danh mục đầu tư của mình để gây ấn tượng với người quản lý tuyển dụng?

Theo Khảo sát nhà phát triển Stack Overflow năm 2021, JavaScript đã có 9 năm liên tiếp là ngôn ngữ lập trình được sử dụng phổ biến nhất, với 69% nhà phát triển sử dụng rộng rãi. Nếu bạn quan tâm đến việc trở thành nhà phát triển web (giao diện người dùng, mặt sau hoặc toàn bộ ngăn xếp), JavaScript là một trong những ngôn ngữ lập trình tốt nhất bạn có thể học. Một cách để làm điều đó là thực hiện một số dự án JavaScript dành cho người mới bắt đầu

Vanilla JavaScript, còn được gọi là JavaScript "đơn giản" - có nghĩa là không có bất kỳ khuôn khổ nào - là một trong những nền tảng của mã hóa và phát triển web. Hầu hết các trang web bạn thấy được xây dựng bằng cách sử dụng kết hợp các lệnh gọi HTML, CSS, vanilla JavaScript và API

Làm quen với những điều cơ bản về JavaScript có nghĩa là sử dụng những kỹ năng JavaScript đó để xây dựng các dự án thực hành JavaScript. May mắn thay, chúng tôi biết một số dự án JavaScript thú vị dành cho người mới bắt đầu mà bạn có thể thực hiện để trau dồi kỹ năng của mình từ hàng nghìn sinh viên mà chúng tôi đã đào tạo trong chương trình đào tạo nghề phát triển giao diện người dùng, Break into Tech

Những gì chúng tôi thấy ở những sinh viên thành công đã tìm được việc làm tại các công ty như GoDaddy, Toast, Asics Digital, 1Password, Figure và Apple là tất cả họ đều có các dự án thực hành JavaScript, danh mục đầu tư thể hiện kỹ năng nhà phát triển giao diện người dùng của họ và rất thành thạo . Thực hiện các dự án JavaScript cho người mới bắt đầu là một cách tuyệt vời để thực hành và xây dựng danh mục đầu tư của bạn

Nếu bạn muốn thực hành các kỹ năng nhà phát triển giao diện người dùng của mình, chúng tôi đã tổng hợp danh sách hơn 20 dự án JavaScript dành cho người mới bắt đầu mà bạn có thể bắt đầu thực hiện ngay bây giờ. Khi bạn tìm thấy một dự án thực hành JavaScript khiến bạn quan tâm, hãy theo liên kết của dự án. Mỗi dự án JavaScript nguồn mở dành cho người mới bắt đầu (trở lên) này đều có mã nguồn được liệt kê trên trang chủ của chúng để bạn sử dụng làm hướng dẫn

Lisa Savoie, một trong những người hướng dẫn JavaScript của Skillcrush, khuyên bạn nên đọc to mã nguồn để hiểu mã nguồn tốt hơn, tìm kiếm các tính năng để kết hợp với các dự án khác hoặc thậm chí gõ lại mã nguồn để ghi nhớ cách viết các hàm, biến và vòng lặp.

Cô ấy nói, “Bạn có thể Google các phương pháp mà bạn không quen thuộc để tìm hiểu thêm về chúng hoặc thậm chí phá mã và sửa nó - Thật thú vị khi phá vỡ mọi thứ😀. ”

Mục lục

1. Các lỗi thường gặp trong dự án JavaScript
2. Dự án JavaScript dành cho người mới bắt đầu
3. Phần tử di chuột qua
4. Cái đồng hồ
5. ma thuật 8 quả bóng
6. Xây dựng danh sách việc cần làm
7. Danh sách phát kết hợp sử thi
8. Cứu hộ vật nuôi
9. Bộ trống
10. Phát hiện giọng nói
11. Điều hướng dính
12. định vị địa lý
13. ứng dụng phim
14. Thẻ tên
15. Dự án JavaScript trung cấp
16. Tấn. js
17. Bản đồ bầu cử
18. Xác thực đăng nhập
19. Đoán từ
20. thiết bị đầu cuối
21. ứng dụng trò chuyện
22. Trò chơi đánh bài Tic Tac Toe
23. Ứng dụng đặt phòng khách sạn
24. Dự án JavaScript nâng cao
25. Trò chơi mê cung

Công nghệ có phù hợp với bạn không?

Bạn sẽ học. Nghề công nghệ có phù hợp với bạn không Nghề công nghệ nào phù hợp với thế mạnh của bạn Bạn cần có những kỹ năng gì để đạt được mục tiêu của mình

Các dự án dành cho người mới bắt đầu sử dụng JavaScript Các lỗi thường gặp

1. lỗi chính tả
2. Đọc những gì bảng điều khiển đang nói với bạn, đặc biệt nếu bạn liên tục nhận được thông báo lỗi
3. Bạn có đang làm việc với đúng loại biến không?
4. Là âm thanh logic của bạn?
5. Bạn có bao thanh toán trong các trường hợp cạnh như đầu vào trống hoặc số nguyên âm không?
6. Bạn có đang chuyển đúng loại/loại đối số cho một hàm không?

Dự án JavaScript cho người mới bắt đầu

1. Phần tử di chuột qua

Tại sao làm dự án này?

• Bạn sẽ thấy các hàm JavaScript hoạt động như thế nào và thực hành logic JavaScript của bạn
• Đây là một dự án JavaScript dành cho người mới bắt đầu thú vị để làm sống động trải nghiệm người dùng của bạn
• Tìm hiểu thêm về cách sử dụng trình xử lý ngẫu nhiên, chức năng và sự kiện

Mã nguồn phần tử di chuột qua

Các khái niệm chính được đề cập

• Hàm và câu lệnh if-else
• Ngẫu nhiên
• Người nghe sự kiện

phải làm gì

1. Sao chép mã nguồn từ CodePen
2. Triển khai mã JavaScript để khi bạn di chuột qua một quả bóng màu, nó sẽ to hơn

Thử thách tiền thưởng

Để kiểm tra mức độ hiểu biết của bạn về các khái niệm đằng sau yếu tố di chuột qua, phần thưởng thử thách của bạn là dự án con trỏ tùy chỉnh này

2. Đồng hồ JavaScript

Tại sao làm dự án này?

• Bạn được thực hành với loại công việc thực tế mà bạn sẽ làm với tư cách là nhà phát triển JavaScript
• Bạn sẽ áp dụng các khái niệm JavaScript chính và có một dự án đáng yêu cho danh mục đầu tư của mình
• Thực hành các khái niệm như biến, logic có điều kiện và API ngày

Mã nguồn đồng hồ JavaScript

Các khái niệm chính được đề cập

• Biến
• logic có điều kiện
• Luồng chương trình
• Chức năng
• Người nghe sự kiện
• API ngày
• phần tử DOM

phải làm gì

1. Sao chép mã nguồn từ CodePen
2. Triển khai mã JavaScript để mỗi khi bạn nhấp vào nút “Party Time. ” trong khoảng thời gian mà bạn chỉ định, bạn sẽ nhận được một LOLcat khác. Bạn có thể đặt thời gian khác nhau để xem các hình ảnh khác nhau — tổng cộng có bốn hình ảnh

Thử thách tiền thưởng.
Bây giờ bạn đã thành thạo đồng hồ Lolcat JavaScript, hãy thử thách bản thân bằng cách tạo đồng hồ đếm ngược của riêng bạn.

3. ma thuật 8 quả bóng

Tại sao làm dự án này?

• Nó cung cấp cho bạn một nền tảng vững chắc về cách sử dụng Toán. random để tạo ra kết quả ngẫu nhiên cho các dự án JavaScript
• Bạn có thể sử dụng dự án này để gây ấn tượng với bạn bè và đưa ra những quyết định nhỏ trong cuộc sống
• Tìm hiểu thêm về cách sử dụng hàm ngẫu nhiên, hàm lồng nhau và trình xử lý sự kiện

Mã nguồn 8 quả bóng ma thuật

Các khái niệm chính được đề cập

• môn Toán. ngẫu nhiên
• hàm lồng nhau
• Người nghe sự kiện

phải làm gì

1. Sao chép mã nguồn từ GitHub cho HTML và CSS
2. Triển khai mã JavaScript để bạn có thể lấy quả bóng số 8, đặt câu hỏi, lắc nó và quả bóng số 8 trả lời bằng một câu trả lời hơi khó hiểu, có thể áp dụng được

Thử thách tiền thưởng

Để kiểm tra sự hiểu biết của bạn về các khái niệm đằng sau Quả bóng ma thuật 8, thử thách tiền thưởng của bạn là trình tạo trò đùa của bố này

4. Những việc cần làm

Tại sao làm dự án này?

• Bạn sẽ nâng cao kỹ năng mã hóa danh sách tương tác, cho phép người dùng thêm, xóa và nhóm các mục
• Bạn có thể sử dụng dự án JavaScript dành cho người mới bắt đầu này trong cuộc sống hàng ngày và thêm nó vào danh mục đầu tư của mình
• Tìm hiểu thêm về cách sử dụng mảng, hàm lồng nhau và API lưu trữ cục bộ

Mã nguồn danh sách việc cần làm

Các khái niệm chính được đề cập

• API lưu trữ cục bộ
• Mảng
• hàm lồng nhau
• Người nghe sự kiện
• Thao tác DOM

phải làm gì

1. Sao chép mã nguồn từ CodePen
2. Triển khai mã JavaScript để bạn có thể thêm các mục mới và sử dụng các nút để chuyển đổi các mục đã hoàn thành, chỉnh sửa mục hoặc xóa mục

Thử thách tiền thưởng

Để kiểm tra mức độ hiểu biết của bạn về các khái niệm đằng sau danh sách Việc cần làm, phần thưởng thử thách của bạn là danh sách thực phẩm JavaScript này

5. Danh sách phát kết hợp sử thi

Tại sao làm dự án này?

• Nó giúp bạn thực hành các kỹ năng JavaScript cốt lõi, chẳng hạn như vòng lặp forEach và trình xử lý sự kiện, đồng thời làm việc với các hàm và danh sách
• Bạn có thể sử dụng dự án này để cho mọi người xem danh mục đầu tư của bạn sở thích âm nhạc tuyệt vời của bạn
• Tìm hiểu thêm về cách phân loại ClassList, innerHTML, forEach và mẫu chữ

Mã nguồn danh sách phát Epic Mix

Các khái niệm chính được đề cập

• Vòng lặp mảng (forEach)
• tài liệu. tạo phần tử
• Nối vào một mảng
• chữ mẫu

phải làm gì

1. Sao chép mã nguồn từ CodeSandbox
2. Triển khai mã JavaScript để bạn có thể tạo danh sách các bài hát yêu thích của mình và chỉ mục của chúng được tạo tự động

Thử thách tiền thưởng

Để kiểm tra sự hiểu biết của bạn về các khái niệm đằng sau danh sách phát kết hợp hoành tráng, phần thưởng thử thách của bạn là danh sách phim yêu thích này

6. Cứu hộ vật nuôi

Tại sao làm dự án này?

• Nó cung cấp cho bạn một nền tảng vững chắc để hiểu các mẫu và tham số chức năng của nhà máy
• Bạn có thể sử dụng dự án này để đóng góp vào việc giải cứu thú cưng hoặc hiển thị hàng tồn kho cho các sản phẩm trên trang web thương mại điện tử
• Tìm hiểu thêm về cách sử dụng các hàm, tham số, phương thức và đối tượng của nhà sản xuất

Mã nguồn giải cứu thú cưng

Các khái niệm chính được đề cập

• chức năng nhà máy
• Các phương thức và thuộc tính của đối tượng

phải làm gì

1. Sao chép mã nguồn từ CodeSandbox
2. Triển khai mã JavaScript để bạn có thể chấp nhận tên, loài và mức năng lượng của động vật làm tham số và cho biết trạng thái của từng con vật (cho dù chúng đang ngủ hay thức)

Thử thách tiền thưởng

Để kiểm tra sự hiểu biết của bạn về các khái niệm đằng sau Giải cứu thú cưng, phần thưởng thử thách của bạn là hệ thống kiểm kê này

7. Bộ trống

Tại sao làm dự án này?

• Bạn có thể thấy sự tương tác giữa việc xem các thành phần trên trang và nghe âm thanh cũng như học cách thêm và xóa các thành phần
• Bạn có thể sử dụng dự án này để thực hành kỹ năng đánh trống bằng kỹ năng JavaScript của mình
• Tìm hiểu thêm về cách sử dụng thẻ âm thanh và tài liệu. bộ chọn truy vấn

Mã nguồn bộ trống

Các khái niệm chính được đề cập

• Mảng
• Người nghe sự kiện
• thẻ âm thanh
• tài liệu. bộ chọn truy vấn
• Lớp

phải làm gì

1. Sao chép repo GitHub
2. Triển khai mã JavaScript để bạn có thể chơi trống bằng cách nhấn các phím cụ thể trong trình duyệt

Thử thách tiền thưởng

Để kiểm tra sự hiểu biết của bạn về các khái niệm đằng sau bộ trống, phần thưởng thử thách của bạn là trình phát piano JavaScript này

8. Phát hiện giọng nói

Tại sao làm dự án này?

• Nó cung cấp cho bạn cơ sở để hiểu cách hoạt động của tính năng phát hiện giọng nói, điều này tốt (và rất tuyệt. ) để biết
• Bạn sẽ có một phương pháp ghi chú tiện lợi ngay trong trình duyệt của mình
• Tìm hiểu thêm về nhận dạng giọng nói, nội dung văn bản và trình xử lý sự kiện

Mã nguồn phát hiện giọng nói

Các khái niệm chính được đề cập

• Cửa sổ. Nhận dạng giọng nói
• Mảng
• văn bảnnội dung
• Người nghe sự kiện

phải làm gì

1. Sao chép mã nguồn từ GitHub
2. Triển khai mã JavaScript để khi bạn nói, bất cứ điều gì bạn nói đều được phiên âm trên giấy có dòng kẻ trên màn hình của bạn

Thử thách tiền thưởng

Để kiểm tra mức độ hiểu biết của bạn về các khái niệm đằng sau tính năng phát hiện giọng nói, phần thưởng của bạn là thử thách chuyển văn bản thành giọng nói này bằng các ngôn ngữ khác nhau

9. Điều hướng dính

Tại sao làm dự án này?

• Nó hướng dẫn bạn cách giữ các phần tử của mình ở một vị trí cố định trên trang, đây là kỹ năng bạn có thể cần trong vai trò nhà phát triển giao diện người dùng của mình
• Bạn có thể sử dụng điều này để nâng cấp thiết kế trang web hoặc danh mục đầu tư của mình
• Tìm hiểu thêm về cách sử dụng trình bầu chọn truy vấn, trình xử lý sự kiện và phần bù

Mã nguồn điều hướng dính

Các khái niệm chính được đề cập

• bộ chọn truy vấn
• bù đắpTop
• Người nghe sự kiện

phải làm gì

1. Sao chép mã nguồn từ GitHub
2. Triển khai mã JavaScript để khi bạn cuộn lên hoặc xuống trang, thanh điều hướng của bạn vẫn ở vị trí cố định và hiển thị

Thử thách tiền thưởng

Để kiểm tra mức độ hiểu biết của bạn về các khái niệm đằng sau điều hướng cố định, thử thách bổ sung của bạn là tạo điều hướng trượt

10. định vị địa lý

Tại sao làm dự án này?

• Bạn có thể tìm hiểu thêm về cách phát triển cho thiết bị di động, cách hoạt động của vị trí địa lý và cách kiểm tra mã của bạn bằng trình mô phỏng hoặc một thiết bị khác
• Bạn có thể sử dụng dự án này trong cuộc sống hàng ngày của mình (nếu bạn dễ bị lạc)
• Tìm hiểu thêm về cách sử dụng bộ chọn truy vấn, xem vị trí và tọa độ

Mã nguồn định vị địa lý

Các khái niệm chính được đề cập

• bộ chọn truy vấn
• đồng hồVị trí
• văn bảnnội dung

phải làm gì

1. Sao chép mã nguồn từ GitHub
2. Cài đặt các gói với npm và chạy máy chủ cục bộ của bạn
3. Triển khai mã JavaScript để bạn thấy vị trí của mình trong thời gian thực. Bạn sẽ cần iOS hoặc trình mô phỏng iOS để kiểm tra xem mã của bạn có hoạt động hay không

Thử thách tiền thưởng

Để kiểm tra hiểu biết của bạn về các khái niệm đằng sau vị trí địa lý, phần thưởng của bạn là công cụ dự báo thời tiết này

11. ứng dụng phim

Tại sao làm dự án này?

• Nó cung cấp cho bạn nền tảng vững chắc về cách JavaScript hoạt động với HTML, CSS và các công cụ khác
• Bạn có thể sử dụng dự án này để tạo ứng dụng phim tùy chỉnh của riêng mình
• Tìm hiểu thêm về cách sử dụng JavaScript với lệnh gọi jQuery, Bootstrap và API

Mã nguồn ứng dụng phim

Các khái niệm chính được đề cập

• lệnh gọi API
• Chức năng
• Khi nhấp vào sự kiện

phải làm gì

1. Sao chép mã nguồn từ GitHub
2. Bạn sẽ cần lấy cho mình một khóa API
3. Triển khai mã JavaScript để bạn có thể tạo ứng dụng phim của riêng mình cho phép bạn xem những bộ phim phổ biến nhất, sắp xếp chúng theo thể loại và tìm kiếm các bộ phim khác

Thử thách tiền thưởng

Để kiểm tra mức độ hiểu biết của bạn về các khái niệm đằng sau ứng dụng phim, phần thưởng thử thách của bạn là xây dựng một trang đích thương mại điện tử

12. Thẻ tên

Tại sao làm dự án này?

• Là một dự án JavaScript dành cho người mới bắt đầu, nó cho phép bạn thực hành sử dụng React để tạo ra một công cụ thiết thực và hữu ích
• Bạn có thể sử dụng dự án này để trau dồi kỹ năng React và các khái niệm chính của mình
• Tìm hiểu thêm về cách xử lý đầu vào của người dùng, làm việc với các thành phần có trạng thái và hiển thị các mô hình dữ liệu mảng

Trình tạo thẻ tên Mã nguồn

Các khái niệm chính được đề cập

• Xử lý đầu vào của người dùng
• Các thành phần trạng thái
• Kết xuất mô hình dữ liệu mảng

phải làm gì

1. Sao chép mã nguồn từ CodeSandbox
2. Triển khai mã JavaScript để bạn có thể tạo hộp văn bản và nút để cho phép người dùng nhập văn bản và yêu cầu văn bản phản hồi đầu vào bằng cách tạo thẻ tên mới

Thử thách tiền thưởng

Để kiểm tra sự hiểu biết của bạn về các khái niệm đằng sau trình tạo thẻ tên, thử thách tiền thưởng của bạn là trình tạo Pokemon React này

(Trở lại đầu trang. )

Công nghệ có phù hợp với bạn không?

Bạn sẽ học. Nghề công nghệ có phù hợp với bạn không Nghề công nghệ nào phù hợp với thế mạnh của bạn Bạn cần có những kỹ năng gì để đạt được mục tiêu của mình

Dự án JavaScript trung cấp

13. Tấn. js

Tại sao làm dự án này?

• Bạn sẽ tìm hiểu cách tạo nhạc trình duyệt web tương tác với khả năng lên lịch nâng cao, synths và hiệu ứng cũng như phần tóm tắt âm nhạc trực quan được xây dựng trên API Web Audio
• Bạn có thể sử dụng dự án này để trở thành DJ và nhà sản xuất âm nhạc của riêng mình, miễn phí
• Tìm hiểu thêm về cách sử dụng trình xử lý sự kiện, triggerAttack, triggerRelease và các loại synth khác nhau

Tấn. mã nguồn js

Các khái niệm chính được đề cập

• triggerAttack và triggerRelease
• Người nghe sự kiện
• bộ chọn truy vấn
• tấn. Vòng

phải làm gì

1. Sao chép mã nguồn từ Tone. js GitHub. trang io
2. Triển khai mã JavaScript để bạn có thể tạo nhạc tương tác trong trình duyệt của riêng mình

Thử thách tiền thưởng

Để kiểm tra mức độ hiểu biết của bạn về các khái niệm đằng sau danh sách Việc cần làm, phần thưởng thử thách của bạn là danh sách thực phẩm JavaScript này

14. Bản đồ bầu cử

Tại sao làm dự án này?

• Nó cung cấp cho bạn một nền tảng vững chắc về sự khác biệt giữa JavaScript, HTML và CSS, đặc biệt là JavaScript làm gì và nó làm như thế nào
• Bạn có thể sử dụng dự án này trong cuộc sống hàng ngày và thêm nó vào danh mục đầu tư của mình
• Tìm hiểu thêm về cách sử dụng mảng và các hàm lồng nhau

Bản đồ bầu cử Mã nguồn

Các khái niệm chính được đề cập

• If-else và thực hành chức năng
• quan hệ cha mẹ con cái
• getElementById

phải làm gì

1. Sao chép mã nguồn từ JSBin
2. Triển khai mã JavaScript để bạn có thể thêm hai ứng cử viên tranh cử tổng thống và hiển thị số phiếu bầu mà họ nhận được từ mỗi bang, cả trong bảng ở dưới cùng bên phải và khi bạn di chuột qua một bang

Thử thách tiền thưởng

Để kiểm tra hiểu biết của bạn về các khái niệm đằng sau bản đồ bầu cử, phần thưởng thử thách của bạn là bản đồ tương tác này

15. Xác thực đăng nhập

Tại sao làm dự án này?

• Nó giới thiệu cho bạn về Angular JS và các khái niệm JavaScript nâng cao hơn
• Bạn có thể thấy cách xác thực đăng nhập hoạt động đằng sau hậu trường
• Tìm hiểu thêm về cách sử dụng trạng thái chức năng, bộ điều khiển ứng dụng và phần phụ thuộc

Đăng nhập mã nguồn xác thực

Các khái niệm chính được đề cập

• góc cạnhJS
• quản lý nhà nước
• bộ điều khiển ứng dụng
• phụ thuộc

phải làm gì

1. Sao chép mã nguồn từ CodePen
2. Triển khai mã JavaScript để bạn có thể nhập địa chỉ email và mật khẩu, đồng thời yêu cầu hệ thống cho bạn biết nếu địa chỉ email không hợp lệ khi bạn nhấn nút “Gửi”

Thử thách tiền thưởng

Để kiểm tra mức độ hiểu biết của bạn về các khái niệm đằng sau Trình xác thực đăng nhập, phần thưởng thử thách của bạn là trình tạo mật khẩu này

16. Đoán từ

Tại sao làm dự án này?

• Nó cung cấp cho bạn một nền tảng vững chắc cho các phương thức, tạo các biến toàn cục và làm việc với các trình lắng nghe sự kiện
• Bạn có thể sử dụng dự án này như một trò chơi tiệc tùng hoặc thử thách với bạn bè và đồng nghiệp của mình
• Tìm hiểu thêm về cách sử dụng các phương thức, hàm và biểu thức chính quy

Đoán mã nguồn từ

Các khái niệm chính được đề cập

• Các phương thức như match(), split(), trim(), và join()
• biểu thức chính quy
• bộ chọn truy vấn
• Người nghe sự kiện

phải làm gì

1. Sao chép mã nguồn từ GitHub
2. Triển khai mã JavaScript để người chơi bắt đầu bằng cách nhập một chữ cái. Nếu họ đoán đúng, chữ cái sẽ xuất hiện trong từ. Nếu họ đoán sai, họ sẽ biết họ còn lại bao nhiêu lần đoán. Người chơi cũng có thể xem những chữ cái mà họ đã đoán. Trò chơi cho người chơi biết nếu họ đã đoán một chữ cái hoặc đã nhập một ký tự không thuộc bảng chữ cái

Thử thách tiền thưởng

Để kiểm tra sự hiểu biết của bạn về các khái niệm đằng sau trò chơi Đoán từ, thử thách tiền thưởng của bạn là trò chơi Wordled này

Cảnh báo. mức độ khó cho việc này là nâng cao, vì vậy nếu bạn gặp sự cố với nó, thì đó không phải là bạn

17. thiết bị đầu cuối

Tại sao làm dự án này?

• Nó hướng dẫn bạn cách ghi lại màn hình thiết bị đầu cuối và chia sẻ công việc của bạn với người khác
• Bạn có thể sử dụng dự án này để gỡ lỗi và làm việc trên các dự án mã hóa với bạn bè
• Tìm hiểu thêm về cách sử dụng tệp ghi, độ trễ khung hình và đặt thời gian chờ

Mã nguồn thiết bị đầu cuối

Các khái niệm chính được đề cập

• tập tin ghi âm
• Sử dụng frameDelay
• Đặt thời gian nhàn rỗi

phải làm gì

1. Sao chép mã nguồn từ GitHub
2. Triển khai mã JavaScript để bạn có thể ghi thiết bị đầu cuối của mình và tạo ảnh GIF động hoặc chia sẻ liên kết trình phát web

Thử thách tiền thưởng

Để kiểm tra sự hiểu biết của bạn về các khái niệm đằng sau Terminalizer, phần thưởng thử thách của bạn là tìm ra cách phát/tạm dừng ảnh GIF

18. ứng dụng trò chuyện

Tại sao làm dự án này?

• Nó cung cấp cho bạn một nền tảng vững chắc về cách JavaScript và các thư viện mặt trước và mặt sau của nó có thể được sử dụng để tạo các ứng dụng
• Bạn có thể thêm dự án này vào danh mục đầu tư của mình để thể hiện kiến ​​thức về các khái niệm lập trình với tư cách là nhà phát triển ngăn xếp đầy đủ
• Tìm hiểu thêm về cách sử dụng ReactJS, NodeJS và socket cùng với JavaScript

Mã nguồn ứng dụng trò chuyện và liên kết hướng dẫn YouTube

Các khái niệm chính được đề cập

• Phản ứng
• Nút
• ổ cắm

phải làm gì

1. Bạn sẽ không thể sao chép và chạy dự án trực tiếp từ GitHub vì không có gói. json, nhưng bạn có thể tạo tệp này bằng cách sử dụng hướng dẫn của YouTube
2. Triển khai mã JavaScript để bạn có thể xây dựng ứng dụng trò chuyện thời gian thực cho phép bạn gửi và nhận tin nhắn bằng cách sử dụng ổ cắm web

Thử thách tiền thưởng

Để kiểm tra mức độ hiểu biết của bạn về các khái niệm đằng sau ứng dụng trò chuyện, phần thưởng của bạn là trình soạn thảo văn bản React này

19. Trò chơi đánh bài Tic Tac Toe

Tại sao làm dự án này?

• Dự án này sẽ kiểm tra ngữ nghĩa HTML và kỹ năng logic JavaScript của bạn
• Bạn có thể sử dụng điều này như một dự án thực hành và để làm gì đó trong khi mã của bạn biên dịch
• Tìm hiểu thêm về cách sử dụng mảng, phương thức lưới và trình xử lý sự kiện

Mã nguồn Tic-Tac-Toe

Các khái niệm chính được đề cập

• Mảng
• Người nghe sự kiện

phải làm gì

1. Sao chép mã nguồn từ CodePen
2. Triển khai mã JavaScript để người chơi có thể đặt mức độ khó dễ hay khó, chọn chơi X hay O, chơi trò chơi với máy tính, ghi nhớ ai thắng hoặc hòa và chơi lại

Thử thách tiền thưởng

Để kiểm tra sự hiểu biết của bạn về các khái niệm đằng sau trò chơi Tic-Tac-Toe, thử thách thưởng của bạn là trò chơi treo cổ này

20. Ứng dụng đặt phòng khách sạn

Tại sao làm dự án này?

• Bạn sẽ thực hành các khái niệm chính trong JavaScript ES6 và React JSX
• Bạn có thể sử dụng dự án này để thực hành xây dựng các trang web có nhiều chức năng hơn và sử dụng một số khả năng sáng tạo của mình bằng cách làm cho nó trông thật bắt mắt
• Tìm hiểu thêm về cách quản lý luồng dữ liệu và thao tác với DOM

Mã nguồn ứng dụng đặt phòng khách sạn

Các khái niệm chính được đề cập

• Thực hành ES6 và React JSX
• Quản lý luồng dữ liệu
• Thao tác DOM

phải làm gì

1. Sao chép mã nguồn từ CodePen
2. Triển khai mã JavaScript để bạn có thể tạo đặt phòng mẫu trên trang web khách sạn, hoàn chỉnh với kết quả tìm kiếm được lọc, hiển thị lượng phòng và xếp hạng khách sạn

Thử thách tiền thưởng

Để kiểm tra sự hiểu biết của bạn về các khái niệm đằng sau Ứng dụng đặt phòng khách sạn, phần thưởng thử thách của bạn là ứng dụng đặt vé này

(Trở lại đầu trang. )

Dự án JavaScript nâng cao

21. Trò chơi mê cung

Tại sao làm dự án này?

• Nó cung cấp cho bạn một ý tưởng vững chắc về cách sử dụng các chức năng và kỹ năng cốt lõi của JavaScript để tạo các trò chơi tương tác
• Bạn có thể đưa dự án này vào danh mục đầu tư của mình và thách thức bạn bè
• Tìm hiểu thêm về cách sử dụng các khái niệm toán học JavaScript, tạo phần tử và sử dụng vòng lặp

Mã nguồn trò chơi mê cung

Các khái niệm chính được đề cập

• Ngẫu nhiên và Tầng
• tạo phần tử
• vòng lặp

phải làm gì

1. Sao chép mã nguồn từ CodePen
2. Triển khai mã JavaScript để bạn có thể lấy dưa chua từ đầu này đến đầu kia của mê cung bằng cách sử dụng các hàm mũi tên (hoặc AWSD) trên bàn phím của mình, hiển thị số bước cần thực hiện để hoàn thành mê cung và có thể thiết lập

Thử thách tiền thưởng

Để kiểm tra hiểu biết của bạn về các khái niệm đằng sau trò chơi mê cung, phần thưởng thử thách của bạn là trò chơi Tetris này

(Trở lại đầu trang. )

Công nghệ có phù hợp với bạn không?

Bạn sẽ học. Nghề công nghệ có phù hợp với bạn không Nghề công nghệ nào phù hợp với thế mạnh của bạn Bạn cần có những kỹ năng gì để đạt được mục tiêu của mình

Justina Hwang

Justina Hwang là Giám đốc tiếp thị nội dung tại Skillcrush và đã phụ trách lĩnh vực giáo dục công nghệ trong hơn ba năm. Cô có bằng tiến sĩ của Đại học Brown. Justina dành thời gian rảnh của mình với chú mèo hơi thiếu thốn (nhưng rất đáng yêu) của mình

Tôi có thể sử dụng JavaScript để làm gì trong trang web của mình?

Những trang web phổ biến nào sử dụng JavaScript?

JavaScript có ổn cho người mới bắt đầu không?