نوشته های یک علیرضا

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

یک علیرضا — Sat, 27 Jul 2019 11:05:30 +0430

خب توی درس قبل با مفهوم متغییر و بعضی از کلید واژه های شرط و حلقه آشنا شدین درس اول رو میتونید از اینجا بخونیدتوی این درس اولا دوست دارم یکم کاربردی تر نگاه کنیم ثانیا ازتون میخوام سعی کنید عمیق تر بفهمید و ساده از هر چیزی عبور نکنید گفتیم برای برنامه نویسی لازمه متغییر هایی تعریف کنیم که داده هامون رو اونجا ذخیره کنیم یکم بیشتر در مورد انواع متغییر ها توی برنامه نویسی حرف بزنیم سه جور متغییر مهم میخوام معرفی کنم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 بیش از طول صفحه بشه) جهت حرکت عمودی رو منفی مقدار قبلیش میکنیم و انگار توپ کمونه کرده باشه برمیگرده

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

یک علیرضا — Tue, 23 Jul 2019 14:08:17 +0430

خب سلام یعنی یه آموزش از صفر دیگه؟ آره شایدچرا؟ چون جاوا اسکریپت زبان خیلی خوبیه و کلی کار میشه باهاش کرد اما برای از صفر شروع کردن یکم بد قلقه خب چیا لازمه؟ یه کامپیوتر ( اگه نشد یه تبلت با یه کیبورد اگه دیگه واقعا نشد با موبایل هم میشه)حوصله به مقدار لازمانگلیسی چی؟ برای سریع تر پیشرفت کردن و عبور کردن از سطح متوسط ضروریه ولی اول کار مهم نیستچیز دیگه ای بلد باشیم که کمک کنه؟ میتونید قبل از این آموزش با فلوچارت شروع کنید که این کتاب برای شروع خوبه و میتونید از بخش فلوچارت یا صفحه 51 شروع کنیددرس اول:برنامه نویسی در اصل مثل یه زبونه ولی برای صحبت کردن با کامپیوتر یعنی بیشتر برای نوشتن یه برنامه حالا برای این زبون یه تعداد لغت لازم داریم ولی تعداد لغت ها خیلی محدوده مثلا 40 تا که با ترکیب های مختلف کلمات مفاهیم و برنامه های مختلف درست میشن توی این جلسه چند تا از کلید واژه ها رو یاد میگیریم .برای تعریف متغییر:توی جاوا اسکریپت سه تا کلید واژه برای تعریف متغیر ها داریم اولین کلید واژه var هست مثلا اینجا :حالا تعریف متغییر یعنی چی؟ توی کامپیوتر حافظه هایی وجود داره که عدد ها و متن های لازم توی اونا ذخیره میشن تعریف متغیر یعنی شما یه اسم تعریف میکنین که با کمک اون یه محل توی حافظه و نوع محتوای اون (مثلا عدد یا متن) مشخص میشه توی مثال بالا یه متغییر به اسم a تعریف شده که از نوع عدد هست و مقدارش صفرهدوتا کلید واژه دیگه هم برای تعریف پارامتر ها داریم به اسم های const و let الان کاری بهشون نداشته باشین فقط برای این که براتون سوال نشه میگم یه متغیر تعریف شده با const قابل تغییر نیست و let متغییر محلی تعریف میکنه فرق خیلی اساسی با var نداره.پر استفاده ترین کلید واژه ها اونهایی هستن که برای کنترل جریان برنامه استفاده میشن دو دسته شون رو معرفی میکنم کلید واژه هایی که برای ایجاد حلقه استفاده میشن و اونهایی که برای شرط استفاده میشنبرای ایجاد شرط: دو کلید واژه مهم برای شرط وجود داره که توی اکثر زبان های برنامه نویسی هم مشترکن به نام های if و else که به معنی اگر و در غیر این صورت هستن خب اول نوع استفادش رو ببینیم:البته if بدون else هم میشه نوشت باید دقت کنید که همه ی علامت ها مثل آکلاد و پرانتز مهم هستن شرط برای چیه؟ در برنامه نویسی لازمه که بتونیم در حالت های مختلف کار های مختلفی انجام بدیم شرط یه عبارته که جوابش صحیح یا غلطه اگه شرط درست بود یک قسمت از کد ها اجرا بشن اگه نبود قسمت دیگهمثلا a < 5 میتونه یک شرط باشه که اگه a کمتر از 5 باشه صحیحهبرای ایجاد حلقه:دو تا کلید واژه هم برای حلقه داریم به نام های while و for مثلا while اینجوری استفاده میشه:معنیش اینه که کد هایی که داخل while هستن تا زمانی که شرط صحیح باشه هی اجرا میشنخب قبل از این که for رو بگم میخوام یه مثال بزنم :میخوایم یه برنامه بنویسیم که 6 تا عدد از کاربر بگیره و هرکدوم از 15 کمتر بودن رو نمایش بده این کد نهاییه:چجوری این برنامه رو اجرا کنم؟ از طرق لینک زیر در codepenhttps://codepen.io/alireza2/pen/GVoWew?editors=0010یا از طریق صفحه زیر: https://codepen.io/alireza2/pen/GVoWew?editors=1010 حالا کمی تغییرش بدید ....خب خیلی تبریک میگم شما اولین کد جاوا اسکریپتتون رو نوشتید ! حالا اینا یعنی چی؟دستور prompt توی کد بالا چی کار میکنه؟ یه دستور ساده هست برای گرفتن ورودی از کاربر البته به روش های دیگه ای هم میشه از کاربر ورودی گرفتن و در سایت های واقعی از دستور prompt خیلی کم استفاده میشه ولی کار ما رو راه میندازهدستور documet.write توی کد بالا چه کاری میکنه؟ این دستور هم در سایت های واقعی خیلی استفاده نداره چون باعث میشه توی اولین باری که این دستور استفاده میشه کل صفحه سایت پاک بشه که چیز بدیه ولی کاربردش چاپ کردن توی صفحه سایت هستاگه codepen رو باز کرده باشید میبینید که من کل کد رو در یک function قرار دادم اینم یه کلید واژه خیلی مهم دیگه هست که بعدا بهش میرسیم صبر داشته باشیدحالا برسیم به کلید واژه for:خیلی شبیه while هست فقط بعضی جا ها باعث میشه کمی کد خلاصه تر بشه مثلا توی مثال بالا:این کد:میتونه تبدیل بشه به این کد:به علامت های نقطه-ویرگول که توی for به کار رفتن دقت کنید چون مهم هستن !تا بعد ...

یک اولین پست - چرا بنویسم؟

یک علیرضا — Sun, 09 Dec 2018 19:18:25 +0330

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