تمرین های جاوا اسکریپت | معرفی 6 پروژه بی نظیر برای تمرین + ویدئو

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

یادگیری جاوا اسکریپت و حل تمرین

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

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

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

مسلط شدن در جاوا اسکریپت

امروزه دوره های زیادی در زمینه یادگیری جاوا اسکریپت در سطح اینترنت وجود دارند ولی با وجود دوره های مختلف خیلی از افراد دنبال متخصص شدن در زمینه جاوا اسکریپت هستند! به نظر شما مشکل کجاست؟ چرا خیلی از دوستان نمی توانند با دوره های در سطح اینترنت یک متخصص و مسلط واقعی بشوند؟!

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

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

مشکلات یادگیری جاوا اسکریپت

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

منابع یادگیری جی اس

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

داکیومنت هر زبان برنامه نویسی

شما از هر دوره آموزشی که استفاده کرده باشید، اگر از داکیومنت استفاده نکنید هرگز یک متخصص واقعی نخواهید شد.

داکیومنت هر فریمورک یا زبان برنامه نویسی کامل ترین منبع برای یادگیری آن می باشد، البته به شرطی که زبان انگلیسی را تا حدی بلد باشید. به عنوان مثال داکیومنت زبان PHP وب سایت https://www.php.net/ برای یادگیری صفر تا صد جاوا اسکریپت هم می توانید از داکیومنت های موجود به آدرس های https://javascript.info/ و https://developer.mozilla.org/ استفاده کنید. اگه در زبان انگلیسی چندان قوی نیستید نگران نباشید. مقاله‌های زیادی درباره‌ی آموزش زبان برنامه نویسی جاوا اسکریپت وجود دارن که می‌تونید برای یادگیری این زبان برنامه نویسی استفاده کنید. در سایت سبزلرن ما مقاله‌های مختلفی درباره‌ی مباحث مختلف جاوا اسکریپت آماده کردیم که می‌توانید با کمک آن‌ها تمرین جاوا اسکریپت انجام دهید. پس نتیجه می گیریم از هر دوره آموزشی که استفاده می کنید، به هیچ وجه از داکیومنت غافل نشوید. کتاب تمرین جاوا اسکریپت هم گزینه مناسبی دیگری برای یادگیری این زبان است. انواع مختلف کتاب تمرین جاوا اسکریپت در بازار موجود است که می‌توانید هر کدام از آن‌ها را انتخاب کنید.

کد های بقیه برنامه نویسان را بخوانید

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

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

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

زیاد به باگ(مشکل) میخورم

بنظرم باگ چاشنی برنامه نویسی است

مطمئن باشید که در دنیای برنامه نویسی متخصص ترین افراد هم به طور مداوم با باگ مواجه می شوند،پس برخورد با خطا های برنامه نویسی هیچ ارتباطی با ضعف و سطح پایین بودن شما ندارد.

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

پس نتیجه میگیریم که هر چقدر که با خطا مواجه می شوید زده نشوید، چون (بنظرم) خیلی از مباحثی را که بلد نیستیم از جستجو برای رفع خطا یاد می گیریم.

کد های بقیه برنامه نویسان را دیباگ کنید

کد های بقیه برنامه نویسان را دیباگ کنید

همان طور که در بخش قبلی در مورد خطا های برنامه نویسی گفته شد، با تلاش برای دیباگ(رفع خطا) مباحث جدیدی یاد می گیریم.

یک جمله معروفی بین برنامه نویسان وجود دارد: “ترجیح میدم خودم از صفر کدنویسی کنم تا این که کد های یه برنامه نویس دیگه رو ویرایش کنم!”. برنامه ای که توسط یک برنامه نویس دیگر نوشته شده است خواندن و درک کدها برای شما ممکن است کمی سخت باشد. اگر شما بتوانید کد های بقیه برنامه نویسان را خوانده و آن ها را باگ یابی کنید به این معنی است که ذر مباحث مورد نظر کاملا مسلط هستید.

برای این موضوع می توانید به سایت های مثل https://codepen.io/,  https://github.com/ یا http://codeforces.com/ یا امثال آن ها مراجعه کنید.

تاثیر زبان انگلیسی در یادگیری برنامه نویسی

همان طور که بالاتر گفته شد، اکثر منابع فارسی برای برنامه نویسی کامل نیستند و برای مسلط شدن بهتره از منابع انگلیسی مخصوصا داکیومنت‌‌ها و مقالات استفاده کنید. البته امروزه در سایت‌های فارسی نیز داکیومنت‌های زیادی برای یادگیری javascript وجود دارد.

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

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

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

1. وب سایت https://practity.com/582-2/ نزدیک به 50 تمرین جاوا اسکریپت دارد که می توانید از آن ها در زمینه رسیدن به تخصص در جاوا اسکریپت استفاده کنید.
2. وب سایت https://exercism.io/tracks/javascript/exercises کلی تمرین سطح بندی شده و دسته بندی شده دارد که می توانید از این وب سایت نیز کمک شایانی بگیرید.
3. وب سایت https://edabit.com/challenges/javascript نیز بالغ بر 1000 تمرین سطح بندی شده جاوا اسکریپت دارد که می توانید از این وب سایت نیز استفاده کنید.
4. وب سایت https://github.com/exercism/javascript/tree/master/exercises بیشتر از 100 تمرین فوق العاده در زمینه جاوا اسکریپت دارد که می توانید برای حرفه ای شدن در جاوا اسکریپت از این وب سایت نیز استفاده کنید.
5. وب سایت https://coderbyte.com/challenges نیز نزدیک به 1000 تمرین برنامه نویسی بسیار جذاب و دسته بندی شده در زمینه جاوا اسکریپت دارد که کمک می تواند کمک ویژه ای به شما بکند.
6. وب سایت https://w3resource.com/javascript-exercises/ بالای 500 نمونه تمرین جاوا اسکریپت دارد که می توانید از این سایت نیز استفاده بکنید.
7. وب سایت http://asmarterwaytolearn.com/js/index-of-exercises.html فوق العاده هست. این وب سایت بیشتر از 1000 تمرین جاوا اسکریپت دارد که می توانید به کمک آن ها گام خوبی در متخصص شدن در جاوا اسکریپت بردارید.

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

دیگر تمرین ها در جاوا اسکریپت

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

پروژه TodoList:

همان طور که با این پروژه آشنایی دارید، برای ذخیره و مدیریت کار های روزانه هر شخص است.

قابلیت های پروژه:

1. اضافه کردن تودو به لیست
2. حذف تودو
3. ویرایش تودو
4. زمانبندی برای هر تودو
5. پیاده سازی نوتیفیکشن برای تودو های مورد نیاز
6. ذخیره سازی همه تودوها در localStorage و نمایش اطلاعات از localStorage در DOM

پروژه بازی حدس کلمه:

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

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

پروژه بازی ردیاب:

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

بیاید بازی را کمی چالشی تر کنیم!

می توانید یک تایمر نیز برای بازی قرار دهید که اگه تایمر به اتمام رسید و کاربر نتوانست عنصر مربوط به سیستم را بگیرد، بازی Game Over می شود.

پروژه دارک / لایت مود

همان طور که از اسم پروژه مشخص بوده و در بسیاری از وب سایت ها مشاهده کردید، برای راحتی کاربر و ارتقای Ux وب سایت یک وب سایت تک صفحه ای پیاده سازی کرده و در قسمت Header آن یک سوئیچ باکس قرار دهید که با تغییر یافتن آن توسط کاربر، تم وب سایت به دارک یا لایت تغییر پیدا کنم.

برای بهتر شدن این مینی پروژه جاوا اسکریپت می توانید از localStorage نیز استفاده نمایید. به این شکل که آخرین تم تغییر داده شده توسط کاربر را در localStorage مرورگر ذخیره کنید تا اگر کاربر برای مدتی از وب سایت خارج شده و سپس وارد وب سایت شود، شما تم وب سایت را با آخرین تم تغییر داده کاربر ست کنید. به عنوان مثل اگر کاربر تم سایت به دارک تغییر داده و از وب سایت خارج و بعد از مدتی وارد وب سایت شود، شما وب سایت را با همان تم دارک به کاربر نمایش دهید.

پروژه فروش بلیط:

قطعا در خیلی از وب سایت های فروش بلیط مثل علی بابا، سفر724، مستر بلیط و … مشاهده کرده اید که اگر شما استانی را به عنوان مبدا یا مقصد انتخاب کنید، شهر های آن استان برایتان نمایش داده می شوند.

یک وب سایت تک صفحه ای برای فروش بلیط پیاده سازی کنید. به این شکل که به هنگام انتخاب مبدا و مقصد، شهر ها را مدیریت کنید. یعنی اگر استان تبریز بعنوان مبدا انتخاب شد، در سلکت باکس مربوط به شهر، شهر های استان تبریز نمایش داده شوند و همچنین برای مقصد نیز به همین شکل عمل کنید. تا زمانی که همه ورودی ها توسط کاربر مقدار دهی نشده اند، دکمه ثبت سفر در حالت disabled بماند‌ و به محض valid شدن (مورد قبول بودن) ورودی های لازم دکمه ثبت سفر به حالت Enabled تغییر پیدا می کند.

پروژه آزمون آنلاین:

قطعا تا به حال در آزمون های آنلاین مدرسه، دانشگاه و یا موسسه های مختلف شرکت کرده اید. یک آزمون آنلاین با تعداد سوالات دلخواه(مثلا 4 سوال) پیاده سازی کنید. سوالات آزمون به صورت ۴ گزینه ای می باشند و در هر سوال به محض کلیک روی گزینه دلخواه توسط کاربر، سوال بعدی نماش داده شود و در نهایت امتیاز کاربر محاسبه و نمایش داده شود.

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

 پیاده سازی نمونه کار برای ورود به بازار کار

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

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

سخن پایانی

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

امیدوارم این مقاله برای شما مفید واقع شده باشد.

پیشنهاد میکنم حتما ویدئوی مربوط به این مقاله را مشاهده کرده و در صورت وجود هرگونه سوال، انتقاد یا پیشنهاد در بخش کامنت های مقاله بنویسید، بهتون پاسخ می دهم.

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

• از کی باید پیاده سازی تمرین های جاوا اسکریپت را شروع کنیم؟

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

• آیا یک ماه برای تمرین های جاوا اسکریپت کافی است؟

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

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

بله شما می‌توانید با یادگیری نود جی اس بدون نیاز به html و CSS به تمرین جاوا اسکریپت بپردازید. اگرچه این کار هم نیازمند آشنایی اولیه با دو زبان برنامه نویسی html و CSS است. اگر برای یادگیری این دو زبان فرصت و هزینه‌ی زیادی ندارید، بهتر است از دوره‌های رایگان و کوتاه مدت سبزلرن برای آموزش زبان html و آموزش زبان CSS استفاده کنید.

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

شما می‌توانید با کمک این زبان برنامه نویسی انواع برنامه‌های زیر را بسازید:

1. وب‌سایت‌‌ها
2. وب اپلیکیشن‌ها
3. سرور اپلیکیشن‌ها
4. بازی
5. برنامه‌های کاربردی برای اسمارت واچ
6. برنامه‌های موبایل
7. اینترنت اشیا

• برای یادگیری مبانی اولیه‌ی جاوا اسکریپت چند ساعت در روز باید زمان صرف کنیم؟

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