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