جاوا اسکریپت یک زبان برنامه نویسی مهم برای یادگیری است. اگر در این زمینه تازه کار هستید، در اینجا چند پروژه وجود دارد که به شما کمک می کند دانش خود را تقویت کنید.
جاوا اسکریپت یکی از مهم ترین زبان های برنامه نویسی است که امروزه در توسعه وب مورد استفاده قرار می گیرد. با ایجاد فریم ورک هایی مانند Express.js و Vue، به نظر می رسد این زبان همچنان به تحول در برنامه نویسی وب ادامه خواهد داد.
بنابراین اگر مبتدی هستید، محکم بنشینید. این ایده های پروژه جاوا اسکریپت مهارت های شما را تقویت می کند و شما را با مفاهیم اولیه زبان آشنا می کند.
1. یک برنامه لیست کارهای ساده
در حالی که با استفاده از جاوا اسکریپت یک لیست کارهای انجام می‌دهید، منطق اصلی پشت اقدامات CRUD را یاد خواهید گرفت. شما همچنین عملکردهای مدیریت رویداد جاوا اسکریپت را بررسی خواهید کرد. در این پروژه، شما یک اسکریپت برای ایجاد، خواندن، به روز رسانی و حذف وظایف می سازید.
با استفاده از کنترل‌کننده‌های رویداد، فرم‌های ارسالی را برای ورود به هر کار مدیریت می‌کنید، سپس آنها را پس از ایجاد نمایش می‌دهید. هنگامی که کد جاوا اسکریپت برای کنترل عملکرد برنامه شما کار کرد، می توانید از روش نمایش شبکه CSS برای سازماندهی هر کار استفاده کنید. سپس با استفاده از دستور شرطی جاوا اسکریپت و روش های تاریخ، اولویت را به آنها اختصاص دهید.
اگرچه اجباری نیست، اما می توانید با ذخیره وظایف در یک پایگاه داده محلی، این کار را بیشتر انجام دهید. به عنوان مثال، ذخیره هر ورودی در یک فایل JSON در دستگاه محلی خود به شما امکان می دهد عملیات CRUD را روی اشیاء JSON واقعی تمرین کنید.
2. یک تایمر ساده ایجاد کنید
تایمر یکی از ساده ترین پروژه هایی است که می توانید با استفاده از جاوا اسکریپت انجام دهید. اگرچه بسیار ابتدایی به نظر می رسد، اما به شما می آموزد که چگونه وضعیت یک عنصر را در فواصل زمانی مشخص تغییر دهید.
برای افزودن کمی خلاقیت، می توانید یک تایمر شمارش معکوس بسازید که در مقدار مشخص شده توسط کاربر متوقف می شود. شما نیازی به ذخیره چیزی در پایگاه داده یا شیء JSON ندارید، زیرا این نمونه ای است که کاربران می توانند آن را به دلخواه خود تغییر دهند.
هنگام کدنویسی تایمر، با توابع جاوا اسکریپت و رویدادهای محدود به زمان آشنا خواهید شد. همچنین یاد خواهید گرفت که چگونه کد جاوا اسکریپت را برای تبدیل های ریاضی پایه بنویسید تا پارامترهای زمانی مختلف را مدیریت کنید.
3. یک چرخ فلک تصویر از ابتدا بسازید
چرخ فلک یکی از جذاب ترین عناصر بصری رابط کاربری یک وب سایت است. وقتی با UX عالی همراه شود، می تواند وب سایت شما را کاربرپسندتر کند. به علاوه، به شما امکان می دهد فضا را مدیریت کنید و تصاویر یا موارد را در طرح بندی های مختلف نمایش دهید.
برای ساختن یک چرخ فلک پاسخگو باید دستان خود را با حلقه جاوا اسکریپت کثیف کنید. می توانید تصاویر خود را از DOM دریافت کنید و آنها را به یک آرایه خالی جاوا اسکریپت فشار دهید. سپس رویدادهای کلیک را به دکمه بعدی و قبلی اضافه می کنید تا تصاویر را به صورت متوالی در سمت راست یا چپ نمایش دهید.
هرچند این تنها رویکرد نیست. شما می توانید با استفاده از هر روشی که برای شما بهترین کار را انجام می دهد، این کار را انجام دهید.
اگر کنجکاو هستید و می‌خواهید مسیر بیشتری را طی کنید، حتی می‌توانید صفحه نمایش خود را متحرک کنید تا استفاده از آن را جذاب‌تر و آسان‌تر کنید.
4. ماشین حساب وب
ساخت یک ماشین حساب وب پاسخگو یکی دیگر از ایده های جالب پروژه مبتدی جاوا اسکریپت است.
جاوا اسکریپت مانند سایر زبان های برنامه نویسی از عملیات ریاضی متعددی پشتیبانی می کند. بنابراین، هنگام کدنویسی این پروژه، نحوه استفاده از این عملگرها را به صورت پویا یاد خواهید گرفت. همچنین رویدادهای کلیک را به دکمه‌های HTML یا divهای سفارشی اضافه می‌کنید و یاد می‌گیرید که چگونه UI خود را با استفاده از CSS سازماندهی کنید. این تمام چیزی است که برای ساخت یک ماشین حساب پاسخگو که در مرورگر نمایش داده می شود، لازم است.
اگر با اپراتورهای جاوا اسکریپت آشنایی ندارید، فرصتی برای شروع بازی با آنها خواهید داشت. سپس سر خود را دور گردانندگان رویداد بپیچید تا نحوه عملکرد آنها را بهتر درک کنید.
در حالی که پرمخاطب تر است، می توانید با نوشتن اسکریپت خود به صورت رویه ای شروع کنید. اما زمانی که ماشین حساب شما شروع به کار کرد، آن را دوباره به توابع تبدیل کنید.
شما می توانید با ایجاد یک CSS flexbox به طراحی نزدیک شوید. سپس با استفاده از HTML مقادیر و عملگرها را به دکمه های ماشین حساب اختصاص دهید. در نهایت، می توانید با استفاده از یک حلقه جاوا اسکریپت، تابع مدیریت رویداد خود را روی هر عنصر در flexbox فراخوانی کنید.
5. Resume Generator با جاوا اسکریپت
اگرچه ممکن است در مورد نحوه شروع این برنامه کمی گیج شده باشید، چند برنامه وب برای رزومه سازی برای تغذیه ایده شما وجود دارد.
در نهایت، شما یک سازنده رزومه قابل استفاده مجدد خواهید ساخت که می تواند اطلاعات جدید را بپذیرد و اطلاعات موجود را حذف یا به روز کند.
پس از درک منطق اولیه، ایجاد الگوهای رزومه بیشتر دشوار نیست. بنابراین، می‌توانید با یک الگو شروع کنید و با گذشت زمان به طرح‌های جذاب‌تر برسید. البته، شما همچنین می خواهید یک دکمه دانلود اضافه کنید تا کاربران بتوانند رزومه خود را به صورت PDF دریافت کنند.
یک پروژه رزومه سازی به شما کمک می کند تا عملیات CRUD اصلی جاوا اسکریپت را درک کنید. همچنین نحوه استفاده از حلقه‌ها، کنترل‌کننده‌های رویداد، شرایط و برخی توابع داخلی را یاد خواهید گرفت. شما همچنین می توانید اطلاعات کاربران را در یک شی JSON ذخیره کنید تا برنامه شما بتواند بعداً به آن ارجاع دهد.
6. یک برنامه افزودنی مرورگر بسازید
ساختن یک افزونه مرورگر برای یک پروژه آغازین ممکن است پیچیده به نظر برسد. اما این یک بار نیست که الزامات کدنویسی یک عملکردی را درک می کنید.
این یک کار ارزشمند است، به خصوص اگر قبلاً دانش پایه ای از جاوا اسکریپت دارید و می خواهید پروژه چالش برانگیزتری را امتحان کنید.
تلاش زیادی برای کارکرد برنامه افزودنی شما در مرورگرها انجام می شود. اما می توانید با یک افزونه مخصوص مرورگر شروع کنید و نیازی به ساختن یک افزونه پیچیده ندارید. شما می توانید یک دانلود کننده فایل ساده، یک تغییر اندازه تصویر یا یک برنامه افزودنی برای جلوگیری از محتوای خاصی در Chrome باشد.
در حین ساخت افزونه خود، باید آن را نیز قابل نصب کنید. این جایی است که اطلاعات برنامه خود را در یک فایل “manifest.json” مشخص می کنید تا مرورگر بتواند آن را تشخیص دهد و بپذیرد. به طور کلی، این پروژه شما را به حل مشکلات واقعی با جاوا اسکریپت بیشتر می برد.
7. یک برنامه بودجه بسازید
همه ما می خواهیم نظارت کنیم که چگونه پول خود را خرج می کنیم تا از بیش از حد بودجه جلوگیری کنیم. یک برنامه بودجه‌بندی به شما امکان می‌دهد هزینه‌های خود را پیگیری کنید—بنابراین بیشتر از آنچه برای آن چانه‌زنی کرده‌اید خرج نکنید.
چه این را برای خود بسازید چه برای دیگران، گنجینه ای است که ارزش نگهداری در مخزن خود را دارد. ایجاد یک برنامه بودجه DIY با جاوا اسکریپت فقط دانش شما را در مورد رندر DOM بهبود نمی بخشد. شما همچنین یاد خواهید گرفت که از عملگرهای جاوا اسکریپت برای حل مشکلات واقعی استفاده کنید.
هنگام نوشتن کد، ورودی های فرم را جمع آوری کرده و هزینه ها را از بودجه خود کم می کنید. می‌توانید با نوشتن کد برای تنظیم یک هشدار خودکار برای کاربر هر زمان که قصد دارد از بودجه خود فراتر رود، این کار را بیشتر انجام دهید.
8. تبدیل واحد
آیا می خواهید با عملیات ریاضی پایه و دستورات شرطی در جاوا اسکریپت بازی کنید؟ ایجاد یک مبدل واحد این انعطاف را برای شما فراهم می کند. این می تواند یک مبدل طول، وزن، فشار یا دما باشد.
علاوه بر نوشتن فرمول های ریاضی برای تبدیل واحدها، یاد می گیرید که چگونه خروجی ها را تغییر دهید و آنها را در سمت کلاینت رندر کنید. از آنجایی که برنامه شما احتمالاً چندین تبدیل را انجام می دهد، می توانید یک منوی کشویی ایجاد کنید که در آن کاربران می توانند واحدهای انتخابی خود را انتخاب کنند.
سپس عبارات منطقی نحوه تبدیل اسکریپت شما به پارامترها را بر اساس انتخاب کاربر مدیریت می کند. در واقع، مبدل واحد یکی از ساده ترین پروژه های جاوا اسکریپت است که می توانید با آن مقابله کنید.
9. یک دفتر خاطرات بسازید
در اینجا یک پروژه جاوا اسکریپت بسیار مفید برای کسانی که دوست دارند برنامه های روزمره خود را حفظ کنند وجود دارد. برنامه خاطرات با جاوا اسکریپت یک پروژه همه کاره اما ساده است که برای مبتدیان مناسب است.
از آنجایی که این یک برنامه یادداشت برداری است، باید تاریخ ها را بر اساس فعالیت ها مشخص کنید. می‌توانید این ورودی‌ها را در یک فایل به‌عنوان اشیاء JSON ذخیره کنید و بعداً زمانی که نیاز به ردیابی تاریخچه و ورودی‌های ذخیره‌شده خود دارید به آنها ارجاع دهید.
اگرچه ممکن است کمی پیچیده باشد، اما می توانید کاربران را از انتخاب زمان فعالیت با کد برای ذخیره خودکار آنها نجات دهید. مانند یک برنامه کاری، این نیز به شما یاد می دهد که چگونه یک برنامه CRUD با استفاده از جاوا اسکریپت بسازید.
10. بازی آجر شکن
اگر نمی دانستید، می توانید یک بازی ساده با استفاده از جاوا اسکریپت وانیلی نیز بسازید. اگر با بازی های دوبعدی آشنایی دارید، حتماً قبلاً بازی شکسته ای را بازی کرده یا دیده اید.
اگرچه ممکن است نیاز به آینده نگری و تفکر داشته باشد، یکی از نکات مثبت این پروژه لذتی است که در پایان به ارمغان می آورد. اگرچه این مسیر مطمئنی برای توسعه بازی نیست، اما در حین کار بر روی این کار با بسیاری از عملکردهای جاوا اسکریپت آشنا خواهید شد.
کارکرد هدف است. اما ممکن است لازم باشد مقداری CSS را با جاوا اسکریپت در اینجا ترکیب کنید تا آجرهای خود را به طور یکنواخت مرتب کنید. در نهایت، برنامه شما تعیین می کند که بازیکن چه زمانی برنده یا ببازد و بعد از آن چه اتفاقی می افتد.
جاوا اسکریپت: با انجام دادن به یادگیری ادامه دهید
انجام پروژه های جاوا اسکریپت بهترین راه برای یادگیری است. این ایده های پروژه مبتدی مهارت های شما را تقویت می کند و شما را برای پروژه های جاوا اسکریپت واقعی آماده می کند.
گفته می‌شود، در حالی که استایل در اکثر این پروژه‌ها ضروری است، مراقب باشید از دست اول حواس‌تان پرت نشود. در عوض، بیشتر بر روی عملکرد جاوا اسکریپت تمرکز کنید و قبل از اینکه متوجه شوید، وب‌سایت‌های واکنش‌گرا می‌سازید. کد نویسی مبارک!