جاوا اسکریپت از خیلی صفر - درس 2

خب توی درس قبل با مفهوم متغییر و بعضی از کلید واژه های شرط و حلقه آشنا شدین درس اول رو میتونید از اینجا بخونیدتوی این درس اولا دوست دارم یکم کاربردی تر نگاه کنیم ثانیا ازتون میخوام سعی کنید عمیق تر بفهمید و ساده از هر چیزی عبور نکنید گفتیم برای برنامه نویسی لازمه متغییر هایی تعریف کنیم که داده هامون رو اونجا ذخیره کنیم یکم بیشتر در مورد انواع متغییر ها توی برنامه نویسی حرف بزنیم سه جور متغییر مهم میخوام معرفی کنم1. متغییر عددی 2. متغییر متنی (string) و 3. متغییر منطقی (boolean)الان توی کد بالا سه تا متغییر تعریف شده که اسم هاشون رو num و str و bool گذاشتم (می تونستم اسم دیگه بگذارم) و از همین سه مدل متغییر هستنتوی جاوا اسکریپت معمولا این متغیر ها خیلی راحت به هم تبدیل میشن و اینکار به صورت اتومات انجام میشه برای این که منظورم رو بفهمید اول یه کنسول باز کنید.کنسول چیه؟ تو دنیای برنامه نویسی به هر جایی که بشه توش دستور هایی وارد کرد و جوابشون رو گرفت میشه گفت کنسول اما برای جاوا اسکرپت کنسول جاییه که میتونید تیکه های کد جاوا اسکرپتتون رو اجرا کنید نتیجه رو ببینید.چجوری کنسول باز کنم ؟ اگه پشت کامیوتر هستید یه راه راحتش راست کلیک کردن توی یکی از صفحات مرورگر انتخاب گزینه inspect و انتخاب تب console که معمولا تب دوم هست اگرم با موبایل این پست رو میخونید یه راه جالب استفاده از ابزار ها آنلاین مثل jsbin هست از این لینک به کنسول jsbin می رویدحالا این چند تا مثال رو توی کنسول امتحان کنید:امیدوارم با این مثالا فرق متغییر متنی و عددی رو فهمیده باشین البته مثالایی که من زدم بعضیاش یکم برای شروع سنگینه فقط میخواستم خوب گیجتون بکنم که بفهمید چیز مهمیه ولی اگه مثال ها رو با حوصله امتحان کنید متوجه میشید.متغییر منطقی به چه درد میخوره؟ برای ایجاد یه شرط یا یه حلقه به یه عبارت صحیح/غلط نیاز داریم که بهش میگیم عبارت شرط و این عبارت شرط باید از نوع متغییر منطقی باشه برای این که متغر منطقی رو بهتر بفهمید توی کنسول بزنید: خب عالی شدحالا با اینکه هنوز شنا بلد نیستید میخوام یه چند تا کد با حال نشونتون بدم:برنامه اول: https://codepen.io/kyknight/full/QgwyJp برنامه دوم: https://codepen.io/Twinbee/pen/qpKymy برنامه سوم: https://codepen.io/Loopez10/full/dMaVdQ اگه به تعداد خط هایی که توی بخش جاوا اسکریپت نوشته شده دقت کنید میبینین خوب بودن برنامه در ارتباط مستقیم با تعداد خط های برنامه نویسیشه البته این یه اصل نیست ولی برای برنامه های کوچیک همیشه برقرارهاین جلسه میخوایم برنامه دوم رو توضیح بدم همون توپ سفید سرگردان هدف نهایی ما اینه که تا آخر درس چهارم همه ی مفاهیم لازم در برنامه سومی گفته بشه البته یاد گرفتن کد نویسی بر اساس نمونه کد مزایا و معایبی داره که به نظر من مزایاش بیشتر از معایبشه معایبش هم با تمرین کافی برطرف میشهاز این لینک میتونید کد برنامه دوم رو ببینید. خب توی دو خط اول برنامه دو تا متغییر به نام های canvas و ctx تعریف شدن این متغییر ها برای دسترسی ما به صفحه برنامه هستنالبته صفحه بازی توی بخش html تعریف شده و درس ما هم html نیست و سعی میکنیم خیلی واردش نشیمولی خب یاد گرفتن جاوا اسکریپت بدون یاد گرفتن html خیلی مضحکه اما خبر خوب اینه که html نسبتا آسونه و میتونید از منابع دیگه ای به راحتی یادش بگیرین تا اینجا بدونید که توی کد html این برنامه چیز خاصی نداریم فقط یه canvas تعریف شده که به معنی بوم نقاشی هست هر سه تا برنامه ای که گذاشتم و دیدین همین جوری هستن و کل برنامه توی یه canvas هستبا این دو تا متغییر canvas و ctx میتونیم به طول و عرض canvas دسترسی پیدا کنیم مربع و دایره توی صفحه بکشیم و پاک کنیم درحقیقت این توپ متحرک هی داره رسم میشه و پاک میشه و اینجوری متحرک به نظر میرسهتوی خط های 3 تا 7 چند تا متغییر دیگه برای شعاع توپ محل توپ سرعت توپ تعریف شدن دقت کنید که هم محل توپ و هم جهت حرکت اون در طول زمان ممکنه عوض بشه و مقدار های نوشته شده فقط مقدار اولیه هستن.متغییر x یعنی فاصله توپ از لبه ی سمت چپ صفحه canvasمتغییر y یعنی فاصله توپ از لبه ی بالایی صفحه canvasحالا میخوام یه کلید واژه جدید یادتون بدم به نام function کار اصلی فانکشن اینه که یه بخش از کد رو یه اسم براش انتخاب میکنیم و با کمک اون اسم میتونیم اون تکه کد رو چندین بار استفاده کنیم و به اصطلاح فانکشن یا تابع رو فراخوانی کنیممعمولا اسم تابع باید معنی دار باشه و کاری که اون تکه از کد قراره انجام بده رو بشه از اسمش فهمید مثلا توی این برنامه دو تا تابع داریم به اسم های drawBall و draw این که تابع draw چی کار میکنه رو بعد میگم اما تابع drawBall کاملا از اسمش معلومه که چه کاری قراره انجام بده قراره یه توپ توی صفحه رسم کنه اما کجا رسم میکنه ؟ در محلی که x و y معلوم میکننبرای بیشتر آشنا شدن با کلید واژه فانکشن میتونید به این لینک بریدروش کلی کار این برنامه اینه که میگه هر 10 میلی ثانیه (0.01 ثانیه) تابع draw رو فراخوانی کن و اون تابع با توجه به موقیت قبلی توپ توی صفحه میتونه محل توپ و جهت حرکتش رو تغییر بده این کار در خط 32 برنامه انجام شدهاولین کاری که توی تابع draw انجام میشه دستور clearRect هست کارش اینه که صفحه رو پاک میکنه و جزو دستورات داخلی canvas هست مثل همیشه اگه خواستید بدونید یه دستور چجوری کار میکنه میتونید به راحتی توی گوگل سرچش کنید و مثلا این صفحه رو بخونید که توضیح و مثال این دستور از canvas هستبعدش همون drawBall فراخوانی میشه که توپ رسم بشهبعد دو تا if داریم که کاربردشون اینه که بفهمیم توپ به لبه رسیده یا نه اگه رسیده بود جوری جهتش رو عوض کنیم که انگار کمونه کرده این دو تا رو بعد بیشتر توضیح میدمبعد از اون توی خط 28 و 29 دو تا دستور داریم که وظیفه جابجایی توپ رو به عهده دارن اونجا یه علامت جدید به نام علامت مثبت مساوی می بینید که مثل همیشه میتونید خود علامت رو با واژه جاوا اسکریپت در گوگل سرچ کنید و مثلا این لینک رو بخونید ولی من برای این که فعلا شما رو با اسم های عجیب غریب و مثل عملگر انتسابی درگیر نکنم اینجوری توضیح میدم:این دستور :x += dxاین دستور بوده که خلاصه شده :x = x + dxکارشم اینه که هر وقت کامپیوتر در زمان اجرای برنامه ما به این خط از برنامه برسه x رو به اندازه dx اضافه میکنه در برنامه نویسی کار علامت مساوی همیشه اینه که صبر میکنه عبارت سمت راست محاسبه بشه و مقدار نهایی رو در متغییر سمت چپ قرار میدهمفهوم دستور همون مفهوم جابجایی توپ هست گفتیم x محل افقی توپ هست (فاصله از چپ صفحه) و dx یه جورایی سرعت افقی توپ هست که میتونه مثبت یا منفی باشه (به راست بره یا به چپ) دوباره دقت کنید که این خط در تابع draw هست و پس هر 10 میلی ثانیه داره اجرا میشهاین یه توضیح کلی از برنامه خب برگردیم به if هااولین if کارش این هست که اگه توپ کامل به سمت چپ یا به سمت راست رسیده بود تشخیص بده و جهت سرعت افقی توپ رو برگردونه - آخ آخ صبر کنین چی شد؟ - من گفتم اگه این حالت شد یا اون حالت شد - همینجا میشه مفهوم یا توی برنامه نویسی رو توضیح داد "یا" یه عملگره که بین دو تا متغییر منطقی گرفته میشه و کافیه فقط یکیشون صحیح باشه تا حاصل صحیح بشه. علامت "یا" در خیلی زبان ها دو تا خط عمودی هست اینجوری: || خب حالا عملگر چیه؟ مثلا مثبت یا همون + یه عملگره که دو تا متغییر عددی رو جمع میکنه حاصل یه متغییر عددی دیگه میشهیعنی انگار ما دو طرف علامت || دو تا شرط داریم که هر کدومش صحیح باشه وارد if خواهیم شددومین if هم همینه فقط برای جهت عمودی که چه به بالای صفحه برسیم (y خیلی کوچیک بشه) چه به پایین برسیم (y بیش از طول صفحه بشه) جهت حرکت عمودی رو منفی مقدار قبلیش میکنیم و انگار توپ کمونه کرده باشه برمیگرده