۳۰ تمرین جاوا اسکریپت با راه حل + معرفی سایت های تمرینی
- خواهید آموخت با تمرین عملی، مهارت خود در برنامه‌نویسی جاوا اسکریپت را تقویت کنید.
- یاد می‌گیرید پروژه‌هایی مانند ماشین حساب، بازی و اپ هواشناسی را توسعه دهید.
- می‌آموزید چگونه با APIها و رویدادهای صفحه وب کار کنید.
- به تمرینات مرتبط با فریمورک‌های «Vue.js»، انگولار و غیره دسترسی خواهید داشت.
- خواهید توانست کدهای خود را ساختارمند بنویسید و خطاها را به‌درستی مدیریت کنید.
- را‌هکارهایی برای ساخت نمونه‌کار قابل ارائه و ورود به بازار کار کسب می‌کنید.
جاوا اسکریپت چیست و چگونه باید آن را تمرین کرد ؟
جاوا اسکریپت صفحات وب تعاملی ایجاد می‌کند. این زبان، از زبان‌های برنامه نویسی پرطرفداری به حساب میآید که یکی از بالاترین درآمدها را دارد. جاوا اسکریپت بسیار گسترده است، بنابراین نه تنها از نظر کارایی اهمیت دارد، بلکه به نوعی سرگرم‌کننده هم خواهد بود. اگر جاوا اسکریپت را بلد باشید، می‌توانید احساس کنید که پشت پرده شبکه جهانی وب را می‌بینید. مقالات زیادی در مورد تمرینهای تمرینی سطح مبتدی برای جاوا اسکریپت وجود دارد. برخی افراد را به انجام تمرین ساخت بازی Tic-Tac-Toe تشویق می‌کنند، که می‌تواند کمی کسل‌کننده باشد. برخی فقط گفتند «شما باید سعی کنید با جاوا اسکریپت یک وبلاگ بسازید» اما پس از آن هیچ دستورالعملی ارائه ندادند.
جاوا اسکریپت یکی از فناوری‌هایی است که احتمالاً حتی بدون توجه به آن، روزانه هزاران بار به کارش می‌برید و تقریباً همه جا رد پایی از جاوا اسکریپت وجود دارد. جاوا اسکریپت به کاربران اجازه لذت بردن از کدنویسی عملکردهای المان‌های جذاب صفحات وب را می‌دهد. البته اگر در برنامه نویسی تازه کار باشید، باید با توجه به تجربه محدود خود در این زبان از قدم‌های ابتدایی‌تر شروع کنید.
چرا باید تمرین های جاوا اسکریپت را انجام دهیم ؟
در صورت دانستن اصول اولیه جاوا اسکریپت، انجام تمرینها گام بعدی ما برای افزودن اعتبار بیشتر به رزومه است. اگر هیچ تجربه برنامه نویسی نداریم، میتوان کتاب‌های جاوا اسکریپت را خواند یا دوره‌های اولیه این زبان را گذراند، سپس به سراغ انجام تمرینها بازگشت. اگر اطلاعات لازم درباره زبان‌های HTML و CSS را داشته باشیم، بیشتر تمرینهای جاوا اسکریپت را درک خواهیم کرد، زیرا کد منبع تمرینها ارائه شده است.
قبل از اینکه به تمرینهای واقعی بپردازیم، در اینجا ویژگی‌های مهم جاوا اسکریپت را یادآوری می‌کنیم:
- در «سمت مشتری» (Client-Side) و «سمت سرور» (Server-Side) برای ایجاد محتوای وب تعاملی استفاده می‌شود.
- تجربه کاربر را با عملکرد پویا بسیار بهبود می‌بخشد.
- زبان سبک با قابلیت‌های شی گرایی
- زبان تفسیر شده، باز و چند پلتفرمی
- یکپارچگی ادغام با زبان‌های جاوا و HTML
بخش اول: بهترین تمرین های جاوا اسکریپت برای مبتدیان
میتوان کارهای زیادی را با جاوا اسکریپت انجام داد، اما ما نمی‌خواهیم تمرینهایی را معرفی کنیم تا تحت فشار قرار بگیرید. خوشبختانه تعداد زیادی تمرین مبتدی برای ورود آهسته و مزه مزه کردن جاوا اسکریپت وجود دارد. با این تمرینهای جاوا اسکریپت و همراه با کد منبع خوب و آسان شروع خواهیم کرد تا بتوان به راحتی شروع کرد.
یک فریمورک اساساً یک قطعه کد از پیش آماده شده است که کار خاصی را انجام می‌دهد. آن را به عنوان برگه تقلب یا میانبر میتوان در نظر گرفت. فریمورک‌ها می‌آیند و می‌روند، اما این جاوا اسکریپت است که برای همیشه می‌ماند. به همین دلیل این آموزش با تمرینهای ساده و خالص جاوا اسکریپت برای مبتدیان شروع می‌شود. این تمرینها، به هیچ فریمورکی متکی نیستند.
پیش از شروع انجام و یادگیری تمرینهای جاوا اسکریپت در این مطلب لازم است آشنایی مقدماتی با جاوا اسکریپت داشته باشید. برای این منظور می‌توانید از دوره آموزش جاوا اسکریپت فرادرس استفاده کنید.
تمرین ساخت ماشین حساب با جاوا اسکریپت
تابع اصلی eval() تابعی جهانی برای جاوا اسکریپت است که کدهای JS را حل می‌کند. تابع display() عدد انتخاب شده را روی صفحه ماشین حساب نمایش می‌دهد. توجه داشته باشید که این برنامه فقط برای فعالیت‌های مربوط به ماوس کار می‌کند. در ادامه کدهای کامل این تمرین را مشاهده می‌کنید که به بخش‌های CSS و HTML و جاوا اسکریپت تقسیم شده است.
کدهای HTML تمرین ساخت ماشین حساب با JS
برای پیاده‌سازی برنامه ماشین حساب با جاوا اسکریپت ابتدا لازم است ساختار HTML صفحه وب ایجاد شود. بنابراین، کدهای HTML مربوط به این تمرین در ادامه آمده است.
حال پس از ذخیره کردن کدهای HTML در یک فایل، نوبت به نوشتن و استفاده از کدهای CSS برای استایل‌دهی به صفحه ماشین حساب فرا می‌رسد، بنابراین در بخش بعدی کدهای CSS ارائه شده‌اند.
کدهای CSS تمرین ساخت ماشین حساب با JS
کدهای CSS مربوط به تمرین ماشین حساب با جاوا اسکریپت نیز در ادامه آمده است.
و در نهایت باید برنامه جاوا اسکریپت را بنویسیم.
کدهای جاوا اسکریپت تمرین ساخت ماشین حساب
در بخش آخر کدهای مربوط به تمرین ماشین حساب، به سراغ کد JS آن می‌رویم که در ادامه میتوان آن را بررسی کرد.
حال نوبت به شما می‌رسد تا با استفاده از این ۳ بخش کد، شروع به انجام اولین تمرین از میان تمرینهای جاوا اسکریپت کنید. بهتر است سعی کنید ابتدا خودتان کدها را بنویسید و بعد آنها را با کدهای این تمرین مقایسه کنید. اگر نتوانستید، کدها را با دقت بخوانید و سعی کنید بفهمید هر خط کد چه کاری را انجام می‌دهد.
سپس خودتان دوباره سعی کنید کدها را بنویسید و اگر هم به خاطر نیاوردید، باز هم کدها را از روی این مطلب خودتان دستی بنویسید، اما کپی‌پیست نکنید. وقتی کدها را می‌نویسید به آنچه می‌نویسید بیاندیششید تا درک بهتری نسبت کدها بدست آورید. این مراحل را برای همه پروژه‌های ارائه شده در این مطلب انجام دهید.
بازی Tic Tac Toe
برخی بازی‌ها مانند Tic-Tac-Toe با زبان‌های زیادی قابل پیاده‌سازی هستند و در قدم‌های اول یادگیری هر زبان، میتوان کدهای این بازی‌ها را نوشت و از پیاده‌سازی آنها لذت برد.
تمرین ایجاد برنامه پیش بینی آب و هوا با جاوا اسکریپت
این برنامه آموزشی، شما را به ساخت یک برنامه هواشناسی مبتنی بر مکان، هدایت می‌کند. بر اساس موقعیت فعلی شما، برنامه آب و هوای محل زندگی را نشان خواهد داد. یا میتوان هنگامی که نام مکانی را در این تمرین تغییر می‌دهید، نمایش آب و هوا بلافاصله بدون بازخوانی صفحه تغییر کند. رابط کاربری آن نیز بسیار کاربرپسند است. توجه داشته باشید که اکثر برنامه‌های هواشناسی از API استفاده می‌کنند که داده‌های آب و هوا را دریافت می‌کند. ما از محبوب‌ترین و رایج‌ترین API به اسم Open Weather Map استفاده خواهیم کرد.
انجام تمرین ساخت برنامه موسیقی با جاوا اسکریپت
در این تمرین، «شنونده‌های رویداد» (eventListeners) را معرفی می‌کنیم که براساس صفحه کلید عمل می‌کنند. به عنوان مثال، اگر کلید "S" فشار داده شود، یک رویداد رخ خواهد داد. هر کدام از کلیدها کد و اکشن متفاوتی خواهند داشت. به غیر از شنوندگان رویداد، نحوه افزودن و پخش فایل‌های صوتی را نیز یاد خواهیم گرفت. توجه داشته باشید که استایل‌دهی CSS بسیار ابتدایی به پروژه اضافه شده است، زیرا تمرکز اینجا روی جاوا اسکریپت قرار دارد و شما باید صداها و تصویر پس‌زمینه خود را وارد کنید تا برنامه به طور کامل کار کند. کدهای این تمرین در ادامه آمده است.
تمرین ایجاد صفحه منوی رستوران با JS
اعتبار سنجی فرم
اعتبارسنجی فرم جنبه مفیدی است و توسط بسیاری از وب سایت‌ها برای اعتبارسنجی سمت مشتری اطلاعات کاربر، مانند جزئیات کارت و آدرس و باقی اطلاعات استفاده می‌شود. به عنوان مثال، اگر یک نام فیلد ورودی اجباری وجود داشته باشد، کاربر ممکن است عددی را تایپ کند، فیلد را خالی بگذارد یا فقط یک حرف را تایپ کند.
جاوا اسکریپت می‌تواند این اطلاعات را تایید کند. تمرین زیر شامل اعتبارسنجی ساده فُرم است. البته تمرین به عناصر HTML نیز نیاز خواهد داشت. در این تمرین جاوا اسکریپت هیچ استایل‌دهی گسترده‌ای (با CSS) انجام نشده است و فقط شامل عناصر اساسی در خود HTML می‌شود. در ادامه کد کامل یک فرم ساده با اعتبارسنجی اولیه آمده است.
تمرین ساخت صفحه وب تعاملی Landing page برای وب سایت با JS
اگر قصد دارید با استفاده از جاوا اسکریپت شغلی پیدا کنید، یک ایده خوب ساخت وب سایت شخصی خود با استفاده از جاوا اسکریپت خواهد بود. این تمرین به شما یاد خواهد داد که چگونه یک صفحه اصلی یا صفحه Landing را به نحوی بسازید که بتوان با آن ارتباط برقرار کرد و نام خود را در حافظه محلی، ذخیره کرد.
تمرین نمایش جزئیات تصویر با JS
در این تمرین جاوا اسکریپت برخی از تصاویر را در یک صفحه وب نمایش خواهیم داد. هنگامی که کاربر روی تصاویر قرار می‌گیرد، جزئیات بیشتری ظاهر می‌شوند. میتوان تصاویر را از هر جایی دانلود کرد یا از تصاویری استفاده کرد که در حال حاضر باز هستند. باز هم از HTML و CSS پایه همراه با جاوا اسکریپت استفاده می‌شود که کد این برنامه را در ادامه مشاهده می‌کنیم.
برای پیچیده‌تر کردن این تمرین میتوان نمایش اسلاید را امتحان کرد. میتوان رویدادهای onClick را به رویدادهای onMousehover و onMouseout تغییر داد، در این صورت زمانی که کاربر ماوس را روی تصاویر قرار دهد، تصاویر تغییر می‌کنند.
ایجاد یک بازی به سبک پرشی (Platformer) با JS
تکمیل دوره آموزشی برای بهبود تمرین جاوا اسکریپت
اگر تمرینهای فوق را دنبال کرده‌اید و به نوعی احساس سردگم شدن کردید، هیچ اشکالی در یادگیری جاوا اسکریپت با کمی کمک گرفتن نیست. گاهی لازم است یک دوره آموزشی تعاملی پیدا کنید که مهارت‌های شما را به تدریج با پیشروی در درس‌ها و ماژول‌ها، توسعه دهد.
بخش دوم: تمرین های جاوا اسکریپت سطح متوسط
در این بخش از مطلب تمرین جاوا اسکریپت و پس از پشت سر گذاشتن برخی از تمرینهای ساده‌تر، به سراغ تمرینهایی در سطح متوسط می‌رویم. این تمرینها دیگر فقط محدود به استفاده از CSS ،HTML و جاوا اسکریپت نیستیم و در صورت نیاز تمرین باید به سراغ سایر ابزارها و زبان‌ها نیز برویم.
ساخت سبد خرید یا لیستی از مواد غذایی برای انجام سفارش
تمرین ساخت اپلیکیشن تک صفحه ای با جاوا اسکریپت
ویرایشگر کد مرورگر با جاوا اسکریپت
تمرین چت بلادرنگ با جاوا اسکریپت
ساخت پلتفرم بازی دو بعدی با JS
ساخت بازی‌ها یک راه عالی و سرگرم کننده برای یادگیری جاوا اسکریپت هستند. به همین دلیل است که تمرینهای زیادی را خواهیم دید که حول بازی‌ها می‌چرخند. این تمرین به ما می‌آموزند که چگونه یک پلتفرم بازی دو بعدی بسازیم، همه آن با استفاده از HTML، CSS و جاوا اسکریپت و درکی از مفاهیم OOPs و یک API استفاده می‌شود، که تمامی این مهارت‌ها مفید هستند.
برنامه اشتراک گذاری فایل
تمرین اشتراک گذاری عکس با جاوا اسکریپت
بخش سوم: تمرینهای Vue.js جاوا اسکریپتی برای مبتدیان
فریمورک‌های مختلفی برای جاوا اسکریپت وجود دارند. این فریمورک‌ها کارهای مشابه یا دارای هم‌پوشانی تمرینهای مختلف را انجام می‌دهند. vue.js یکی از آن‌هاست. vue.js برای ساخت برنامه‌ها و رابط‌های کاربری تعاملی کاربر انتخاب بسیار مناسبی است. در حالی که React نیز کار مشابهی انجام می‌دهد و محبوب‌تر است (از نظر برخی، یادگیری آن مفیدتر خواهد بود)، اما Vue.js ممکن است برای مبتدیان گزینه بهتری باشد.
به همین دلیل در این بخش انتخاب شده است. این بخش شامل چند تمرین جاوا اسکریپتی برای یادگیری Vue.js می‌شود.
تمرین برنامه دستور پخت غذا با جاوا اسکریپت
در این تمرین جاوا اسکریپت به سراغ تمرینهای غذایی با استفاده از زبان جاوا اسکریپت می‌رویم. برای کسی که عاشق آشپزی است و دستور پخت‌های به هم ریخته دارد، اما همیشه تلاش می‌کند تمام دستور پخت‌های خود را در یک مکان نگه دارد، این تمرین دستور پخت‌ها راه حلی مناسب است. آموزش عالی برای مبتدیان جاوا اسکریپت که بسیار کاربردی و جذاب خواهد بود.
این تمرین جاوا اسکریپت از فریمورک‌های زیادی بهره می‌برد. لازم است از Vue2 ،Vuex ،Vuetify و Cosmic.js استفاده شود. این آموزش از تمرینهای ارزشمند برای مبتدیان محسوب می‌شود و در نهایت محصولی واقعاً جالب، زیبا و بالقوه مفید ایجاد خواهد کرد. برای دسترسی به کد این تمرین میتوان به لینک [+] مراجعه کرد.
ایجاد کاربر و ورود به سیستم
این تمرین جاوا اسکریپت ما را با نحوه ساخت یک سامانه ساده ثبت‌نام و ورود به سیستم آشنا خواهد کرد. امکان ایجاد یک صفحه ورود، تمرین بسیار مهمی است، زیرا این ابزار، یک ویژگی بسیار ضروری در برنامه نویسی وب‌سایت محسوب می‌شود.
ساخت برنامه انجام کارهای روزمره
تمرین ساخت وب سایت خبری با جاوا اسکریپت
ویدئوی آموزشی آن، تنها نشان می‌دهد که فردی در حال تایپ کردن است و چیزی را توضیح نمی‌دهد. با این حال، همچنان میتوان آن را مفید دانست. در مقایسه با دیگر آموزش‌های این مطلب، تمرین ساخت وب سایت خبری بسیار کوتاه است، ولی همچنان برای تمرین و یادگیری افراد می‌تواند موثر باشد.
برنامه مبدل دما
بسیاری از کشورها از واحد دمای سلسیوس استفاده می‌کنند. در مقابل برخی دیگر از کشورها از واحد فارنهایت برای گزارش دما استفاده می‌کنند. این تمرین وب‌سایت تبدیل‌کننده دما می‌تواند این مشکل را رفع کند و این سردرگمی را از بین ببرد. انجام دادن این تمرین کار سختی نیست، زیرا چندین راه‌حل مختلف توسط سایر توسعه دهندگان نوشته شده است که میتوان با جستجو در گوگل آنها را مشاهده کرد، اینکه چه ابزاری استفاده می‌کنند و چگونه این تمرین را انجام می‌دهند.
سایتی شبیه به Trello
در این تمرین بیشتر بر جنبه یادگیری در حین کار کردن متمرکز می‌شویم، بنابراین در هنگام غرق شدن در مخزن گیت‌هابِ مربوط به این تمرین [+]، این نکته را به خاطر داشته باشید.
بخش چهارم: تمرین های جاوا اسکریپت انگولار برای مبتدیان
این فریمورک نقاط ضعف جاوا اسکریپت برای برنامه‌های تک‌صفحه‌ای که روزانه محبوبیت بیشتری پیدا می‌کنند را تا حد خوبی پوشش می‌دهد. از آنجا که انگولار مفهوم پیچیده‌تری دارد، بیشتر این آموزش‌ها در سطح کارهای ساده‌تر نگه داشته شده‌اند.
ساخت یک پخشکننده صوتی
این تمرین جاوا اسکریپت، از جنس تمرینهایی است که توسعه آن با جاوا اسکریپت خالص بسیار دشوار خواهد بود. با این حال Angular و Angular Materials مقابله با این چالش را بسیار آسان‌تر می‌کند. آموزش این تمرین احتمالاً فراتر از سطح اکثر مبتدیان جاوا اسکریپت خواهد بود. با این حال، به خوبی نوشته شده و مفصل است تا هر کس بتواند این موضوع را برای یادگیری انتخاب کند.
ایجاد یک نقشه گوگل با استفاده از انگولار
این تمرین مختصر و مفید است و خواندن آن زمان کمی به طول می‌انجامد، با این حال مطمئناً پیاده‌سازی کدهای آن طولانی‌تر خواهد بود. با اینکه تمام کدها در اختیار شما قرار داده شده‌اند، ولی نیاز به زمان زیادی برای پیاده‌سازی و درک آن خواهید داشت. همچنین توضیح داده شده که هر بخش از کد چه کاری انجام می‌دهد، چرا مهم است و حتی چگونه برنامه نویس می‌تواند آن را تغییر دهد.
صفحه اصلی گوگل
Scrimba فهرست خوبی از تمرینهای جاواسکریپت دارد. یکی از جذاب‌ترین آنها، توسعه صفحه‌ای، شبیه به صفحه اصلی گوگل است. این تمرین خیلی سخت نیست و تنها با یک دانش پایه‌ای در HTML ،CSS و جاوا اسکریپت می‌توانید شروع کنید.
ماشین حساب مخارج و درآمد
بخش فرانت‌اند یک وبلاگ شخصی
داشتن یک وبلاگ شخصی چیزی است که بسیاری، به آن علاقه‌مند هستند. ایجاد یک وبلاگ، برای هر کسی می‌تواند مفید باشد. بسیاری از Squarespace یا WordPress استفاده می‌کنند، با این حال شما می‌توانید این کار را با انگولار انجام دهید. این تمرین، یکی از بهترین تمرینهایی است که می‌توانید با جاوا اسکریپت انجام دهید.
در این تمرین شما با ایجاد بخش فرانت‌اند یک وبلاگ شخصی آشنا خواهید شد. سطح این آموزش کمی فراتر از آن چیزی است که بتوان آن را مبتدی دانست، با این حال آن را یک تمرین جذاب و مفید خواهید دید. این تمرین چیزی است که میتوان آن را فراتر از یک تمرین، بدون هیچ پایان مشخصی، در نظر گرفت. همچنین پس از پایان تمرین، میتوان از این وبلاگ شخصی به عنوان یکی از نمونه‌کارهای خود استفاده کرد.
تمرین اساسی
معمولاً تمرینهای Hello World چندان جذاب و یا حتی مفید نیستند. با این حال، این تمرین جاوا اسکریپت برای مبتدیان یک استثنا است. به خصوص، از آنجایی که عادت کردن به انگولار می‌تواند کمی مشکل باشد، این تمرین پایه‌ای مانند یک بسته شروع برای انگولار خواهد بود. در واقع میتوان این تمرین را یک تمرین Hello World با ویژگی‌های اضافی و جذاب دانست.
جمع بندی
کتابخانه‌ها و فریمورک‌های بسیار بیشتری، فراتر از آنچه در این مطلب ارائه شد وجود دارد. با این حال، این تمرینها نقطه شروع خوبی برای مبتدیان هستند. به چند فریمورک دیگر نیز در این آموزش، اشاره شد که ممکن است علاقه‌مند به بررسی بیشتر آنها باشید.
هرچه در جاوا اسکریپت عمیق‌تر شوید، چیزهای بیشتری برای یادگیری خواهید یافت. تعداد بی‌شماری از تمرینهای جاوا اسکریپت برای تمرین وجود دارند که میتوان با استفاده از هر یک از فریمورک‌هایی که برای شما جذاب‌تر است، آن را پیاده‌سازی کنید.
تفاوتی نمی‌کند که یک برنامه نویس مبتدی یا یک برنامه نویس حرفه‌ای باشید، در هر صورت جاوا اسکریپت زبان شگفت‌انگیزی برای یادگیری خواهد بود. از آنجا که به طور مداوم اینترنت نقش بیشتری در زندگی ما ایفا می‌کند، یادگیری پایه‌هایی که اینترنت بر روی آنها ساخته شده است نیز، بسیار جذاب خواهد بود.
این تمرینها به ما این امکان را می‌دهند کمی به پشت پرده آنچه در اینترنت در حال رخ دادن است بنگریم و به طور مداوم در مورد وب‌سایت‌هایی که هر روز به آنها نگاه می‌کنیم، چیزهای بیشتری بیاموزیم. پس از تکمیل این تمرینهای تمرینی، به چیزی که ساخته‌اید افتخار خواهید کرد.
سوالات متداول
در انتها به برخی پرسش‌های رایج در مورد این مطلب پاسخ داده شده است.
چه تمرین هایی میتوان با جاوا اسکریپت انجام داد ؟
چندین انتخاب برای برنامه نویسی تمرینها در جاوا اسکریپت داریم. برای مبتدیان تمرینهایی مانند ماشین حساب و تمرینهای آسانی که در لیست این مطلب به آنها اشاره شد، گزینههای خوبی برای شروع هستند.
چگونه یک تمرین جاوا اسکریپت را شروع کنیم؟
با کدنویسی باید قدم اول در یادگیری را برداشت. اولین مرحله محبوبی که بین تمرینهای جاوا اسکریپت وجود دارد، تمرین ماشین حساب است. برای شروع آن به سراغ لیست تمرینها در ابتدای مطلب بروید.
از کجا میتوان یادگیری جاوا اسکریپت را برای افراد مبتدی شروع کرد ؟
از کجا میتوان تمرین های جاوا اسکریپت را دریافت کرد ؟
میتوان تمرینهای مبتدی جاوا اسکریپت را در ابتدای این مطلب برای چند تمرین ساده و جالب بررسی کرد. همچنین میتوان برای پیدا کردن سایر ایده‌های تمرین جاوا اسکریپت در اینترنت جستجو کنید.
مطالب مجله فرادرس را در جستجوی گوگل سریع‌تر ببینید
