۲۲ پروژه جاوا اسکریپت برای تمرین و افزایش مهارت

برای تبدیل شدن به یک برنامه نویس وب قوی و پیاده‌سازی پروژه‌های مختلف وب، لازم است هر فرد متقاضی این حرفه، مهارت‌های زبان برنامه نویسی جاوا اسکریپت را در خود بهبود ببخشد. جاوا اسکریپت هم‌اکنون یکی از محبوب‌ترین زبان‌های برنامه نویسی است و به خصوص در توسعه وب بسیار مورد استفاده قرار می‌گیرد. در این مطلب آموزشی از مجله فرادرس 22 پروژه جاوا اسکریپت برای تمرین و بهبود دانش کاربران از JavaScript به همراه توضیحات کوتاهی با هر پروژه ارائه شده است. ایده‌های به کار گرفته شده در این پروژه‌های مختلف از سطح مبتدی تا متوسط را شامل می‌شوند و برای کاربرانی که به جاوا اسکریپت علاقه دارند، بسیار مفید هستند.

نحوه انتخاب بهترین پروژه جاوا اسکریپت برای یادگیری سریع‌تر

بهترین راه برای یادگیری یک زبان برنامه نویسی، صرف زمان و تلاش روی پروژه‌های مختلف است. کاربران برای انتخاب بهترین پروژه به منظور کمک به ارتقای دانش خود، باید نسبت به تسلط آن‌ها به این زبان پروژه‌ های جاوا اسکریپتی خود را انتخاب کرده و روی آن‌ها کار کنند.

برای مثال کسانی که در سطح صفر از برنامه نویسی جاوا اسکریپت قرار دارند یا در سطح بسیار مبتدی با آن آشنا هستند، بهتر است از پروژه‌های ساده جاوا اسکریپت شروع کنند. به صورت کلی بهتر است کاربران همیشه موضوع‌هایی را انتخاب کنند که از سطح دانش فعلی آن‌ها کمی بالاتر هستند. این به این دلیل است که مانور دادن فقط روی چیزهایی که یاد دارند، کمکی به پیشرفتشان نخواهد کرد.

فهرست 22 پروژه جاوا اسکریپت

در سطح وب، سورس کدهای زیادی از پروژه‌های مختلف برای جاوا اسکریپت وجود دارد. در این بخش، فهرست ٢٢ تا از بهترین پرژوه های جاوا اسکریپت به همراه سورس کدهای آن‌ها گرد آوری شده است که کاربران به دلخواه خود می‌توانند کدهای آن را دست‌کاری کرده و آن‌ها را کاملاً شخصی‌سازی کنند تا بتوانند تسلط بیشتری را روی زبان جاوا اسکریپت و مهارت برنامه نویسی با آن کسب کنند. در این بخش ابتدا عنوان و موضوع پروژه‌ها فهرست شده‌اند و سپس هر پروژه در بخشی جداگانه معرفی و کدهای آن ارائه شده است.

همچنین تا حد امکان سعی کرده‌ایم کدهایها را توضیح بدهیم تا چندان جای ابهام باقی نماند. اما بهترین روش برای یادگیری این است که ابتدا سعی کنیم خودمان کدهای هر پورژه را بنویسیم و بعد از کدهای این مطلب کمک بگیریم، اما در هر صورت اجرا کردن کدهایها و حتی نوشتن ان‌ها در کدهای ادیتور به یادگیری هر چه بهتر کمک بسیار زیادی می‌کند.

1. پروژه زمان‌سنج با JavaScript
2. ساخت ساعت دیجیتال با جاوا اسکریپت
3. پروژه ساخت ماشین حساب
4. فهرست مواد غذایی
5. پروژه ساخت ساعت آنالوگ با جاوا اسکریپت
6. ساخت ماشین حساب وام
7. پروژه نقل قول از سخن بزرگان
8. ساخت ماشین حساب BMI با جاوا اسکریپت
9. پروژه تبدیل پوند به کیلوگرم
10. تغییر رنگ پس زمینه با جاوا اسکریپت
11. پروژه شمارنده طول کلمات
12. ساخت فرم تماس با حافظه محلی
13. اپلیکیشن نمایش روز هفته با جاوا اسکریپت
14. پروژه بازی جمع با JavaScript
15. فهرست وظایف با جاوا اسکریپت
16. ساخت سوالات چهار گزینه‌ای
17. پروژه خاموش و روش کردن لامپ
18. ساخت بازی ضربه زدن به هدف
19. به‌روزرسانی متغیرهای CSS با جاوا اسکریپت
20. جلوه ماوس با جاوا اسکریپت
21. پروژه ساخت کدهای ادیتور
22. ساخت اسلایدر عکس با جاوا اسکریپت

1. پروژه زمان‌سنج با JavaScript

پروژه زمان‌سنج، پروژه‌ای جذاب است که برای افرادی مبتدی بسیار مناسب به حساب می‌آید. در این پروژه کاربران با سه دکمه زیر با زمان‌سنج تعامل برقرار کنند.

• دکمه شروع
• دکمه توقف
• دکمه بازنشانی

در این پروژه از HTML و CSS نیز استفاده شده است که کدهای منبع آن به صورت زیر خواهد بود.

کدهای HTML پروژه زمان‌سنج با JavaScript به صورت زیر است:

کدهای CSS پروژه زمان‌سنج به صورت زیر است:

کدهای جاوا اسکریپت زمان‌سنج به صورت زیر است:

خروجی پروژه زمان‌سنج به صورت زیر است:

2. پروژه ساخت ساعت دیجیتال با جاوا اسکریپت

یکی دیگر از پروژه های جذاب جاوا اسکریپت، ساخت ساعت دیجیتال است. در این پروژه هم در کنار JavaScript از HTML و CSS نیز استفاده خواهد شد. این پروژه برای تمرین حلقه‌ها در جاوا اسکریپت و کار با متغیرهای جاوا اسکریپت بسیار پروژه مناسبی به حساب می‌آید. کدهای این پروژه Javascript در ادامه قرار خواهند گرفت.

کدهای HTML پروژه ساخت ساعت به صورت زیر است:

کدهای CSS پروژه ساخت ساعت به صورت زیر است:

کدهای جاوا اسکریپت ساخت ساعت به صورت زیر است:

خروجی پروژه ساخت ساخت ساعت دیجیتال به صورت زیر است:

٣. ساخت ماشین حساب با جاوا اسکریپت

یکی دیگر از پروژه های تمرینی جاوا اسکریپت، ساخت ماشین حساب با جاوا اسکریپت است. این پروژه چهار عمل اصلی جمع، تفریق، صرب و تقسیم را انجام می‌دهد و یک دکمه به عنوان دکمه پاک کننده دارد. این پروژه برای تمرین مفاهیم زیر بسیار مفید است.

• دست‌کاری DOM
• «ساختارهای کنترلی» (Control Structures)
• کار با ForEach در جاوا اسکریپت
• دست‌کاری CSS جاوا اسکریپت
• کار با «شنونده رویداد» (EventListeners) و رویداد در جاوا اسکریپت
• و بسیاری از موارد دیگر

قطعه کدهای پروژه ساخت ماشین حساب با JavaScript در ادامه خواهند آمد.

قطعه کدهای Html ساخت ماشین حساب با جاوا اسکریپت به صورت زیر است:

قطعه کدهای CSS پروژه ماشین حساب به صورت زیر است:

کدهای جاوا اسکریپت پروژه ساخت ماشین حساب به صورت زیر است:

خروجی این پروژه به صورت زیر خواهد بود:

4. پروژه فهرست مواد غذایی

هدف از این پروژه ایجاد فهرستی است که آیتمی را می‌پذیرد و آن را در فضای محلی ذخیره می‌کند. اگر کاربر بخواهد آیتم خالی را وارد کادر مربوطه کند در نتیجه برنامه به او اخطار می‌دهد. همچنین اگر کاربر با موفقیت آیتمی را وارد کند، برنامه به او پیام موفقیت‌آمیز بودن را نشان خواهد داد.

در این پروژه هر دفعه که آیتمی اضافه می‌شود، مورد در DOM نمایش داده خواهد شد و همچنین در حافظه محلی کاربر ذخیره می‌شود. همچنین اگر کاربر روی دکمه «پاک کردن موارد» کلیک کند، همه موارد از DOM و حافظه محلی حذف خواهند شد. مباحثی که در این پروژه به کار رفته‌اند شامل موارد زیر هستند:

• دست‌کاری‌های DOM
• توابع جاوا اسکریپت
• شنونده رویداد
• حلقه For در جاوا اسکریپت
• ذخیره‌سازی محلی در جاوا اسکریپت
• دست‌کاری CSS
• گزاره شرطی در جاوا اسکریپت

در ادامه کدهای مربوط به این پروژه JavaScript قرار خواهند گرفت.

قطعه کدهای Html پروژه مواد غذایی با JavaScript به صورت زیر است:

قطعه کدهای CSS پروژه فهرست مواد غذایی با جاوا اسکریپت به صورت زیر است:

قطعه کدهای پروژه ساخت فهرست مواد غذایی به صورت زیر است:

خروجی این پروژه به صورت زیر است:

5. پروژه ساخت ساعت آنالوگ با جاوا اسکریپت

پروژه بعدی، ساخت ساعت آنالوگ است. در این پروژه از Canvas Web API استفاده خواهد شد تا ساعت جاوا اسکریپتی راه‌اندازی شود. این پروژه برای مبتدیان مناسب نیست و برای افرادی که دانش نسبتاً متوسطی از جاوا اسکریپت دارند پروژه‌ای عالی است. در این پروژه کاربر نه تنها باید بداند که چگونه از Canvas API استفاده کند، بلکه باید بداند چگونه از ریاضیات برای دست‌کاری موقعیت بسیاری از عناصر در پروژه بهره ببرد. در ادامه قطعه کدهای این پروژه قرار خواهند گرفت.

قطعه کدهای HTML پروژه ساخت ساعت آنالوگ با JavaScript به صورت زیر است:

قطعه کدهای CSS پروژه ساعت آنالوگ با جاوا اسکریپت به صورت زیر است:

قطعه کدهای پروژه ساعت آنالوگ به صورت زیر است:

خروجی این پروژه به صورت زیر خواهد بود:

6. ساخت ماشین حساب وام

این مورد، پروژه‌ای نسبتاً ساده از ساخت ماشین حساب برای پرداخت بدهی وام با JavaScript است. در این پروژه از مفاهیم «جاوا اسکریپت درون خطی» (Inline JavaScript) و «عبارات با قاعده جاوا اسکریپت» (regular expressions) استفاده خواهد شد.

این پروژه برای درک مفاهیم چگونگی بازیابی از فیلد ورودی HTML بسیار مناسب است و پس از بازیابی مقادیر، محاسبات انجام خواهد شد. این ماشین حساب برای محاسبه سود ساده با توجه به نرخ بهره، مبلغ اصلی و تعداد ماه‌های پرداخت وام است. در این پروژه از توابع JavaScript درون خطی برای انجام این عمل استفاده خواهد شد و تمرین بسیار خوبی برای این مفهوم به حساب می‌آید. قطعه کدهای مربوط به این پروژه در ادامه خواهند آمد. قطعه کدهای HTML پروژه ماشین حساب وام با جاوا اسکریپت به صورت زیر است:

قطعه کدهای CSS پروژه ماشین حساب وام با جاوا اسکریپت به صورت زیر است:

قطعه کدهای پروژه ماشین حساب وام به صورت زیر است:

خروجی این پروژه به صورت زیر است:

در ادامه این مطلب پیش از پرداختن به سایر پروژه های جاوا اسکریپت مجموعه دوره‌های آموزش JavaScript فرادرس به علاقه‌مندان معرفی شده‌اند.

معرفی فیلم‌ های آموزش جاوا اسکریپت

جاوا اسکریپت به عنوان زبانی همه‌کاره نقش پررنگی را در حوزه‌های تخصصی مختلف ایفا می‌کند و جدا از اینکه که امروزه از مهم‌ترین زبان‌های توسعه وب به حساب می‌آید، در صنعت ساخت بازی‌های رایانه‌ای، ساخت و توسعه اپلیکیشن موبایل و دسکتاپ و غیره نیز به کار گرفته می‌شود. هم‌اکنون در پلتفرم فرادرس دوره‌ها و فیلم‌های آموزشی زیادی برای جاوا اسکریپت قرار داده شده است که نیاز کاربران را از جنبه‌های مختلفی پوشش می‌دهند. تمامی دوره‌های آموزش جاوا اسکریپت فرادرس در مجموعه آموزش جاوا اسکریپت گردآوری شده‌اند.

در زمان نگارش این مقاله، نزدیک به ۲۵ عنوان آموزشی حاوی بیش از ۱۲۰ ساعت ویدیو در سطوح مختلفی از جمله آموزش مقدماتی جاوا اسکریپت، آموزش حرفه‌ای و پیشرفته جاوا اسکریپت و همچنین آموزش انواع فریمورک‌های جاوا اسکریپت، آموزش پروژه‌محور جاوا اسکریپت و غیره ارائه شده است. فهرست فیلم‌های آموزشی جاوا اسکریپت در پلتفرم فرادرس دائماً در حال به روز شدن هستند و در آینده، فیلم‌ها و آموزش‌های بیشتری در فرادرس برای جاوا اسکریپت قرار خواهند گرفت. در تصویر بالا تنها تعداد کمی از دوره‌های آموزشی جاوا اسکریپت به عنوان نمونه نمایش داده ‌شده است.

• برای مشاهده همه فیلم های آموزش جاوا اسکریپت و شروع یادگیری + اینجا کلیک کنید.

7. پروژه نقل قول از سخن بزرگان

پروژه دیگر در فهرست پروژه های JavaScript در این مطلب، پروژه نمایش نقل‌قول‌ از سخن بزرگان است. این پروژه نیز برای مبتدیان مناسب و هدف از آن نمایش نقل‌قول‌ تصادفی با هر کلیک از میان نقل‌قول‌هایی است که وجود دارد. در این برنامه جاوا اسکریپت از مفاهیم زیر برای تمرین استفاده شده است.

• جاوا اسکریپت درون خطی
• «اشیا در جاوا اسکریپت» (JavaScript objects)
• انتخاب کننده در جاوا اسکریپت (JavaScript selectors)
• «کتاب‌خانه ریاضیات جاوا اسکریپت» (JavaScript math library)

در این پروژه کاربر یاد خواهد گرفت که چگونه با «شی» (Object) در جاوا اسکریپت کار کند و آن را در آرایه‌های جاوا اسکریپت قرار دهد. در این پروژه آرایه جاوا اسکریپت از 6 شی مختلف تشکیکل شده‌اند که هرکدهایام دارای جفت نام – مقدار هستند که به ترتیب نشان دهنده نام نویسنده (بزرگان) و نقل‌قول او است. در ادامه قطعه کدهای این پروژه نیز خواهند آمد. قطعه کدهای HTML پروژه نمایش نقل قول با JavaScript به صورت زیر است:

قطعه کدهای CSS پروژه نقل قول با جاوا اسکریپت به صورت زیر است:

قطعه کدهای پروژه نقل قول به صورت زیر است:

خروجی این پروژه به صورت زیر است:

8. ساخت ماشین حساب BMI

پروژه جدید این فهرست، ساخت ماشین حساب «BMI» با جاوا اسکریپت است. این پروژه نیز برای افراد مبتدی بسیار مناسب به حساب می‌آید و برای تمرین مفاهیم زیر بسیار مناسب است.

• استفاده از «جاوا اسکریپت خارجی» (external JavaScript)
• گزاره شرطی در جاوا اسکریپت
• ویژگی «AddEventListener» جاوا اسکریپت
• انتخاب‌گرهای CSS جاوا اسکریپت

این ماشین حساب فقط به دو ورودی نیاز دارد، قد کاربر به سانتی‌متر و وزن کاربر بر حسب کیلوگرم. زمانی که کاربر این دو ورودی را دریافت کند، یک بازخوانی BMI دریافت خواهد کرد. برخلاف پروژه‌های قبلی در این پروژه از جاوا اسکریپت داخلی استفاده نمی‌شود و از یک فایل JavaScript خارجی استفاده خواهد شد. در ادامه قطعه کدهای این پروژه نیز قرار خواهند گرفت.

قطعه کدهای HTML پروژه ساخت ماشین حساب BMI با جاوا اسکریپت به صورت زیر است:

قطعه کدهای CSS پروژه ساخت ماشین حساب BMI با جاوا اسکریپت به صورت زیر است:

کدهای جاوا اسکریپت ماشین حساب BMI به صورت زیر است:

خروجی این پروژه به صورت زیر خواهد بود:

9. تبدیل پوند به کیلوگرم

یکی دیگر از پروژه های ساده جاوا اسکریپت، تبدیل پوند به کیلوگرم است که برای تمرین مفاهیم زیر بسیار مناسب به حساب می‌آید.

• شنونده رویداد در جاوا اسکریپت
• گزاره شرطی در جاوا اسکریپت
• انتخاب‌گرهای CSS جاوا اسکریپت

در این برنامه جاوا اسکریپت، ماشین حساب فقط به یک ورودی نیاز دارد که آن هم وزن کاربر بر حسب پوند است و با زدن دکمه تبدیل این وزن به کیلوگرم تبدیل خواهد شد. این پروژه برای افراد مبتدی و کسانی که تازه یادگیری JavaScript را شروع کردند، بسیار مناسب است. قطعه کدهای این پروژه در ادامه قرار خواهند گرفت.

قطعه کدهای HTML پروژه تبدیل وزن با جاوا اسکریپت به صورت زیر است:

قطعه کدهای CSS پروژه تبدیل وزن با جاوا اسکریپت به صورت زیر است:

قطعه کدهای پروژ جاوا اسکریپت تبدیل پوند به کیلوگرم به صورت زیر است:

خروجی این پروژه به صورت زیر است:

10. پروژه تغییر رنگ پس زمینه

یکی دیگر از پروژه های جاوا اسکریپت که برای مبتدیان مناسب است، تغییر رنگ پس زمینه به حساب می‌آید. در این پروژه چهار دکمه مختلف برای چهار رنگ مختلف قرار داده شده است و توسط شنونده رویداد JavaScript رنگ پس‌زمینه با کلیک روی هر دکمه به آن رنگ تغییر خواهد کرد. این پروژه برای تمرین مفاهیم زیر بسیار مناسب است.

• حلقه‌های شرطی در جاوا اسکریپت
• ویژگی AddEventListener جاوا اسکریپت
• انتخاب‌گرهای CSS جاوا اسکریپت
• دست‌کاری CSS جاوا اسکریپت

در ادامه قطعه کدهای پروژه قرار خواهند گرفت.

قطعه کدهای HTML پروژه تغییر رنگ با جاوا اسکریپت به صورت زیر است:

قطعه کدهای CSS پروژه تغییر رنگ پس زمینه با جاوا اسکریپت به صورت زیر است:

قطعه کدهای پروژه تغییر رنگ پس زمینه به صورت زیر است:

خروجی این پروژه به صورت زیر خواهد بود:

11. پروژه شمارنده طول کلمات

یکی دیگر از پروژه های جاوا اسکریپت مناسب برای مبتدیان، شمارنده طول کلمات است. در این پروژه کاربر کلمه یا کلماتی را به عنوان ورودی می‌نویسد و JavaScript طول آن‌ها را محاسبه کرده و در صفحه‌ نمایش می‌دهد. در این پروژه از شنونده رویداد و دست‌کاری‌های DOM استفاده شده است. در ادامه قطعه کدهای این پروژه قرار خواهند گرفت.

قطعه کدهای HTML پروژه شمارنده طول کلمات به صورت زیر است:

قطعه کدهای CSS پروژه برای محاسبه طول کلمات به صورت زیر است:

قطعه کدهای جاوا اسکریپت شمارنده طول کلمات به صورت زیر است:

خروجی این پروژه به صورت زیر است:

12. پروژه ساخت فرم تماس با حافظه محلی

این پروژه برای بازیابی اطلاعات از فیلدهای متنی فرم‌های تماس و ذخیره کردن آن‌ها در حافظه‌های محلی استفاده خواهد کرد. این پروژه برای تمرین استفاده از حافظه محلی در جاوا اسکریپت بسیار مناسب است. همچنین باید به این نکته توجه داشت که پروژه فعلی اسکریپت‌های سمت سرور را پیاده‌سازی نخواهد کرد، بنابراین نباید نگران اضافه کردن ویژگی‌های «Action» و «Method» در این برنامه بود. پروژه ساخت فرم تماس برای تمرین موارد زیر در JavaScript بسیار مناسب است:

• شنونده رویداد در جاوا اسکریپت
• دست‌کاری‌ DOM
• کار با حافظه محلی

در ادامه قطعه کدهایها و خروجی مربوط به این پروژه JavaScript قرار خواهند گرفت.

قطعه کدهای HTML پروژه ساخت فرم تماس با جاوا اسکریپت به صورت زیر است:

قطعه کدهای CSS پروژه ساخت فرم تماس با جاوا اسکریپت به صورت زیر است:

قطعه کدهای جاوا اسکریپت ساخت فرم تماس با جاوا اسکریپت به صورت زیر است:

رابط کاربری این پروژه به صورت زیر خواهد بود:

خروجی نهایی این پروژه پس از زدن دکمه ارسال به صورت زیر است:

13. اپلیکیشن نمایش روز هفته

این پروژه ساده جاوا اسکریپت روز هفته را به همراه نقل‌قولی به کاربران نمایش می‌دهد و برای تمرین مفاهیم مقدماتی JavaScript بسیار مناسب است. در واقع این پروژه روی ٣ تا موضوع زیر در JavaScript مانور می‌دهد:

• شیء Date() ‎
• آرایه‌های جاوا اسکریپت
• عبارت Switch در جاوا اسکریپت

در ادامه قطعه کدهای مربوط به این پروژه Javascript خواهند آمد.

قطعه کدهای HTML پروژه نمایش روز هفته با JavaScript به صورت زیر است:

قطعه کدهای CSS پروژه نمایش روز هفته با جاوا اسکریپت به صورت زیر است:

قطعه نمایش روز هفته با جاوا اسکریپت به صورت زیر است:

خروجی این پروژه نیز به صورت زیر خواهد بود:

14. پروژه بازی جمع

یکی دیگر از پروژه های جاوا اسکریپت که برای افراد مبتدی مناسب خواهد بود، پروژه بازی جمع با JavaScript است. در این بازی جاوا اسکریپت دو عدد را تصادفی به عنوان ورودی به کاربر خواهد داد و از کاربر می‌خواهد که نتیجه را حدس بزند. در صورتی که جواب کاربر درست باشد، پیام موفقیت‌آمیز بودن ظاهر می‌شود و در غیر این صورت پیام خطا به کاربر نمایش داده خواهد شد. این پروژه نیز برای تمرین با اجزایی مانند موارد زیر در JavaScript مناسب است.

• آرایه ها در جاوا اسکریپت
• شنونده رویداد در جاوا اسکریپت
• تابع «Math.random» در جاوا اسکریپت

قطعه کدهای این پروژه در ادامه قرار خواهند گرفت.

قطعه کدهای HTML پروژه بازی جمع به صورت زیر است:

قطعه کدهای CSS پروژه بازی جمع به صورت زیر است:

قطعه کدهای JavaScript پروژه بازی جمع به صورت زیر است:

خروجی این پروژه چیزی مانند تصویر زیر خواهد بود:

15. پروژه فهرست وظایف

پروژه بعدی در این مطلب، پروژه فهرست کارها با جاوا اسکریپت است. هدف از پیاده‌سازی این پروژه،ایجاد فهرستی از وظایف یا کارها خواهد بود که به صورت بسیار ساده پیاده‌سازی خواهد شد. این پروژه برای تمرین مفاهیم زیر بسیار پروژه مناسبی به حساب می‌آید.

• شنونده رویداد
• آرایه در جاوا اسکریپت
• تابع در جاوا اسکریپت
• ذخیره‌سازی با جاوا اسکریپت
• دست‌کاری DOM

قطعه کدهای این پروژه در ادامه قرار خواهند گرفت.

قطعه کدهای HTML پروژه ساخت فهرست کار به صورت زیر است:

قطعه کدهای CSS پروژه فهرست کار با جاوا اسکریپت به صورت زیر است:

قطعه کدهای JavaScript پروژه فهرست کارها به صورت زیر است:

خروجی این پروژه به صورت زیر خواهد بود:

16. ساخت سوالات چهار گزینه ای با جاوا اسکریپت

یکی دیگر از پروژه های جاوا اسکریپت مهم در این مطلب، پروژه ساخت سؤالات چهارگزینه‌ای با JavaScript است. در این پروژه چند سؤال چهارگزینه‌ای از کاربر پرسیده می‌شود و در آخر با توجه به تعداد پاسخ‌های صحیح، امتیازی به کاربر تعلق می‌گیرد. این پروژه برای تمرین مفاهیم زیر در جاوا اسکریپت بسیار مهم است.

• شنونده رویداد
• حلقه‌های For در جاوا اسکریپت
• forEach در جاوا اسکریپت
• توابع جاوا اسکریپت
• دست‌کاری DOM

در ادامه قطعه کدهای این پروژه قرار خواهند گرفت.

قطعه کدهای HTML پروژه ساخت سؤالات چهارگزینه‌ای با جاوا اسکریپت به صورت زیر است:

قطعه کدهای CSS پروژه ساخت سؤالات چهارگزینه‌ای با جاوا اسکریپت به صورت زیر است:

قطعه کدهای پروژه ساخت سؤالات چهارگزینه‌ای به صورت زیر است:

خروجی این پروژه به صورت زیر خواهد بود:

17. خاموش و روش کردن لامپ با جاوا اسکریپت

یکی دیگر از پروژه های جاوا اسکریپت برای مبتدیان، خاموش و روشن کردن لامپ با جاوا اسکریپت است. این پروژه بسیار ساده بوده و در آن کاربر تنها با کلیک روی لامپی که در صفحه مرورگر نمایش داده خواهد شد، اقدام به خاموش و روشن کردن آن خواهد کرد.

پروژه مذکور برای اهدافی مانند استایل سازی با CSS با استفاده از JavaScript و دست‌کاری DOM بسیار مناسب است. لازم به ذكر است همراه این پروژه 2 فایل تصویری نیز لازم خواهد بود که باید در پوشه اصلی پروژه قررا بگیرند. در ادامه قطعه کدهای مربوط به این پروژه قرار دارند.

قطعه کدهای HTML پروژه خاموش و روشن کردن لامپ با جاوا اسکریپت به صورت زیر است:

قطعه کدهای CSS پروژه خاموش و روشن کردن لامپ با جاوا اسکریپت به صورت زیر است:

قطعه کدهای جاوا اسکریپت روشن و خاموش کردن لام با جاوا اسکریپت به صورت زیر است:

در این پروژه دو فایل با نام‌های lightoff.png و lighton.png باید در پوشه اصلی پروژه قرار بگیرند، در نهایت خروجی این پروژه به صورت زیر است:

18. ساخت بازی ضربه زدن به هدف

این پروژه در واقع به ساخت نوعی بازی می‌پردازد که در آن باید هر با به هدف ضربه زد تا امتیاز لازم را کسب کرد. در اینجا هدف جانداری است که پشت تپه‌های کوچک شن ظاهر می‌شود. در این پروژه از DOM API، توابع مختلف، ریاضیات و غیره استفاده شده است و تمرین خوبی برای افرادی که دانش متوسطی از جاوا اسکریپت دارند به حساب می‌آید.

• تابعی برای ایجاد زمان تصادفی که هدف در آن ظاهر می‌شود.
• تابعی برای انتخاب تپه تصادفی که هدف از آن به بیرون نگاه می‌کند.
• تابعی برای بیرون آمدن هدف از پشت تپه تصادفی با استفاده از دو تابع بالا.
• تابعی برای شروع بازی.
• تابعی برای جلوگیری از تقلب.

در ادامه قطعه کدهایها و خروجی این پروژه قرار داده خواهد شد.

قطعه کدهای HTML پروژه بازی ضربه زدن به هدف با JavaScript:

قطعه کدهای CSS پروژه این بازی به صورت زیر است:

قطعه کدهای جاوا اسکریپت این پروژه نیز به صورت زیر است:

در نهایت خروجی این پروژه به صورت زیر است:

19. پروژه به روزرسانی متغیرهای CSS

هدف از این پروژه دست‌کاری متغیرهای CSS به‌صورت تعاملی با استفاده از JavaScript است. این پروژه خیلی سخت نیست و برای افراد مبتدی توصیه می‌شود. همچنین در پروژه مذکور توابع مختلف جاوا اسکریپت، DOM API، ریاضیات و غیره استفاده شده است.

در این پروژه عکسی را می‌توان فراخوانی کرد و وضوح رنگ، فاصله‌گذاری و رنگ پایه آن را با JavaScript به صورت مستقیم قرار داد که در اینجا عکسی فرضی برای این کار قرار داده شده است. در ادامه کدهای JavaScript این پروژه به همراه خروجی آن قرار گرفته خواهد شد.

قطعه کدهای پروژه به‌روزرسانی متغیرهای CSS با جاوا اسکریپت به صورت زیر است:

خروجی این پروژه به صورت زیر خواهد بود:

20. جلوه ماوس با جاوا اسکریپت

پروژه بعدی در این مطلب، پروژه جلوه‌های ماوس با جاوا اسکریپت است. امروزه از جلوه ماوس در توسعه وب بسیار استفاده می‌شود. پروژه جلوه‌های ماوس با JavaScript در تعاملی کردن صفحات وب بسیار کاربرد دارد.

در این پروژه توپ‌های زیادی در صفحه پرت می‌شوند که در صورت گذاشتن ماوس روی آن‌ها توپ منبسط شده و بعد به حالت قبلی خود بازمی‌گردند. در ادامه قطعه کدهای این پروژه جذاب و خروجی آن قرار خواهند گرفت.

قطعه کدهای HTML پروژه جلوه ماوس با جاوا اسکریپت به صورت زیر است:

قطعه کدهای CSS پروژه جلوه ماوس به صورت زیر است:

قطعه کدهای جاوا اسکریپت پروژه جلوه ماوس نیز به صورت زیر است:

خروجی این پروژه به صورت زیر است:

21. پروژه ساخت کدهای ادیتور با جاوا اسکریپت

یکی دیگر از پروژه های جاوا اسکریپت دیگر در این مطلب، پروژه ساخت ویرایشگر کدهای یا کدهای ادیتور است. این پروژه اگر چه خیلی ساده به نظر نمی‌رسد اما برای افراد مبتدی و کسانی که دانش متوسطی از JavaScript دارند مناسب است.

کدهای ادیتوری که در این پروژه به ساخت آن پرداخته خواهد شد از سه زبان HTML، جاوا اسکریپت و PHP پشتیبانی می‌کند و کاربر می‌تواند بین آن‌ها سوئیچ کند. در ادامه قطعه کدهای مربوط به این ادیتور قرار خواهند گرفت.

قطعه کدهای HTML پروژه ساخت کدهای ادیتور با جاوا اسکریپت به صورت زیر است:

قطعه کدهای CSS پروژه ساخت کدهای ادیتور با جاوا اسکریپت به صورت زیر است:

سورس کدهای جاوا اسکریپت ساخت کدهای ادیتور به صورت زیر است:

خروجی این پروژه نیز به صورت زیر خواهد بود:

22. ساخت اسلایدر عکس

پروژه بعدی در این فهرست، پروژه ساخت اسلایدر با جاوا اسکریپت است که برای مبتدیان پروژه نسبتا خوبی برای تمرین به حساب می‌آید. در این پروژه، عکس‌ها در آرایه‌ای کدهایگذاری شده‌اند و هدف از آن مشاهده تصاویر به صورت اسلایدی خواهد بود.

در این پروژه از مفاهیم آرایه‌ها، حلقه For، تغییرات CSS با جاوا اسکریپت و غیره استفاده شده است. در ادامه قطعه کدهایها و خروجی این پروژه قرار خواهند گرفت.

قطعه کدهای HTML پروژه ساخت اسلایدر به صورت زیر است:

قطعه کدهای CSS پروژه ساخت اسلایدر با جاوا اسکریپت به صورت زیر است:

قطعه کدهای جاوا اسکریپت ساخت اسلایدر به صورت زیر است:

خروجی این پروژه اسلایدری به صورت زیر خواهد بود:

سؤالات متداول

در این بخش چندین سؤال متداول در مورد پروژه های JS مورد بررسی قرار خواهند گرفت تا کاربر با دیدی بازتری بتواند مطابق بامهارت خود پروژه‌هایی را برای تمرین برگزیند.

چه پروژه هایی را می‌توان با جاوا اسکریپت انجام داد؟

از جاوا اسکریپت می‌توان برای ساخت پروژه‌های بک‌اند و فرانت‌اند استفاده کرد. برای توسعه پروژه‌های بک‌اند نیاز به استفاده از فریمورک نود جی اس است. برای برنامه نویسان مبتدی جاوا اسکریپت توصیه می‌شود که پروژه‌های ساده‌ای مانند پروژه زمان‌سنج، پروژه تغییر رنگ پس‌زمینه، پروژه ساخت ساعت دیجیتال با جاوا اسکریپت و غیره را انتخاب کنند.

بهترین پروژه های جاوا اسکریپ برای مبتدیان کدهایام پروژه ها هستند؟

بسته به مهارت که کاربر دارد هر پروژه‌ای می‌تواند کاربرد خاص خودش را داشته باشد اما به صورت کلی برای مبتدیان مواردی مانند ساخت ساعت با JavaScript، پروژه ساخت ماشین حساب BMI با جاوا اسکریپت و فهرست کارهای JavaScript برای مبتدیان بسیار مناسب هستند.

چگونه باید یک پروژه جاوا اسکریپت را شروع کرد؟

قبل از هر تصمیمی برای پیاده‌سازی یک پروژه کاربر باید هدف خود را از پروژه تعیین کند. مثلاً باید بداند که پروژه را برای بک‌اند می‌سازد یا برای فرانت‌اند و در نهایت باید سطح مهارت خود را نیز در نظر بگیرد. پس از آن باید کدهای ادیتوری مناسب برای این کار برگزیند و ایده خود را با کمک به مهارت خود و جستجو در منابع اطلاعاتی و اینترنت پیاده‌سازی کند.

آیا یادگیری جاوا اسکریپت برای مبتدیان آسان است؟

بله، جاوا اسکریپت زبانی سطح بالا است و یکی از ساده‌ترین زبان‌های برنامه نویسی برای مبتدیان به حساب می‌آید. برای اجرای برنامه‌های نوشته شده با جاوا اسکریپت تنها چیزی که نیاز است، ویرایشگر مناسب کدهای و مرورگری خواهد بود که از جاوا اسکریپت پشتیبانی کند. همچنین در حال حاضر منابع اطلاعاتی رایگان و پولی زیادی در سطح وب برای یادگیری جاوا اسکریپت وجود دارد که کار مبتدیان را بیش از هر زمانی آسان‌تر کرده است.

سخن پایانی

در این مطلب آموزشی از مجله فرادرس سعی شد که پروژه‌های جذاب و مناسبی از جاوا اسکریپت به کاربران معرفی شود تا کاربران بتوانند از این پروژه‌ها ایده بگیرند. در این مطلب ٢٢ پروژه جاوا اسکریپت از مبتدی تا سطح متوسط به کاربران معرفی و در کنار آن سورس کدهای این پروژه های جاوا اسکریپت نیز آورده شد. پروژه‌های مذکور در این مطلب می‌توانند ایده‌های جذابی برای کاربران باشند و به آن‌ها انگیزه دهند که این پروژه‌ها را بیشتر و بهتر توسعه دهند. امید است که این مطلب مورد پسند کاربران عزیز قرار گرفته باشد.