آموزش جاوا اسکریپت مبتدی : اولین نگاه به جاوا اسکریپت
حالا که کمی در مورد جاوا اسکریپت و کارهایی که میتوانید با آن انجام دهید اطلاعات تئوری کسب کردید، یک آموزش عملی را به شما ارائه میدهیم تا بتوانید نحوه ایجاد یک برنامه ساده جاوا اسکریپت را ببینید. در اینجا شما یک بازی ساده "حدس بزن عدد" را گام به گام خواهید ساخت.
معرفی مثال «بازی حدس اعداد» ما
ما میخواهیم انتظارات کاملاً واضحی را در اینجا تعیین کنیم: از شما انتظار نمیرود که تا پایان این مقاله جاوا اسکریپت را یاد بگیرید، یا حتی تمام کدی را که از شما میخواهیم بنویسید، بفهمید. در عوض، میخواهیم به شما ایدهای از نحوهی عملکرد ویژگیهای جاوا اسکریپت با هم و اینکه نوشتن جاوا اسکریپت چه حسی دارد، بدهیم. در مقالات بعدی، تمام ویژگیهای نشان داده شده در اینجا را با جزئیات بیشتری بررسی خواهید کرد، بنابراین اگر بلافاصله همه چیز را نفهمیدید، نگران نباشید!
بسیاری از ویژگیهای کدی که در جاوااسکریپت مشاهده خواهید کرد، مانند سایر زبانهای برنامهنویسی مانند توابع، حلقهها و غیره هستند. سینتکس کد متفاوت به نظر میرسد، اما مفاهیم هنوز تا حد زیادی یکسان هستند.
در این مقاله نحوه ساخت بازی یک بازی حدس زدن اعداد ساده را به شما نشان خواهیم داد.
فکر کردن مثل یک برنامهنویس
یکی از سختترین چیزهایی که باید در برنامهنویسی یاد بگیرید، سینتکس مورد نیاز برای یادگیری نیست، بلکه نحوهی بهکارگیری آن برای حل مشکلات دنیای واقعی است. شما باید مانند یک برنامهنویس فکر کنید - این عموماً شامل بررسی توضیحات مربوط به کارهایی است که برنامهی شما باید انجام دهد، تشخیص ویژگیهای کد مورد نیاز برای دستیابی به آن موارد و نحوهی کار آنها با یکدیگر است.
این کار مستلزم ترکیبی از کار سخت، تجربه با سینتکس برنامهنویسی و تمرین است - بهعلاوهی کمی خلاقیت. هر چه بیشتر کد بزنید، در آن بهتر خواهید شد. ما نمیتوانیم قول دهیم که در عرض پنج دقیقه «مغز برنامهنویس» خود را توسعه دهید، اما در اینجا و در طول بقیهی دوره، فرصتهای زیادی برای تمرین تفکر مانند یک برنامهنویس در اختیار شما قرار خواهیم داد.
بیایید تصور کنیم که کارفرمای شما دستورالعمل زیر را برای ایجاد این بازی به شما داده است:
من میخواهم یک بازی ساده از نوع «حدس زدن عدد» ایجاد کنید. این بازی باید یک عدد تصادفی بین ۱ تا ۱۰۰ انتخاب کند، سپس بازیکن را به چالش بکشد تا در ۱۰ نوبت عدد را حدس بزند. بعد از هر نوبت، باید به بازیکن گفته شود که آیا درست حدس زده است یا اشتباه، و اگر اشتباه است، آیا حدس او خیلی کم یا خیلی زیاد بوده است. همچنین باید به بازیکن گفته شود که قبلاً چه اعدادی را حدس زده است. بازی زمانی به پایان میرسد که بازیکن به درستی حدس بزند یا نوبتهایش تمام شود. وقتی بازی تمام میشود، باید به بازیکن این امکان داده شود که دوباره بازی را شروع کند.
با نگاهی به این خلاصه، اولین کاری که میتوانیم انجام دهیم این است که آن را به وظایف ساده و قابل اجرا، تا حد امکان با رویکرد یک برنامهنویس، تقسیم کنیم:
۱. یک عدد تصادفی بین ۱ تا ۱۰۰ ایجاد کنید.
۲. شماره نوبتی که بازیکن در آن قرار دارد را ثبت کنید. آن را از ۱ شروع کنید.
۳. به بازیکن راهی برای حدس زدن عدد بدهید.
۴. پس از ارائه یک حدس، ابتدا آن را در جایی ثبت کنید تا کاربر بتواند حدسهای قبلی خود را ببیند.
۵. سپس، بررسی کنید که آیا این عدد صحیح است یا خیر.
۶. اگر صحیح بود:
- پیام تبریک نمایش داده شود.
- از وارد کردن حدسهای بیشتر توسط بازیکن جلوگیری شود (این کار بازی را خراب میکند).
- کنترلی را نمایش دهید که به بازیکن اجازه میدهد بازی را مجدداً شروع کند.
اگر حدس اشتباه باشد و بازیکن نوبتهای بیشتری داشته باشد:
- به بازیکن بگویید که اشتباه کرده و آیا حدس او خیلی زیاد یا خیلی کم بوده است.
- به او اجازه دهید حدس دیگری وارد کند.
- شماره نوبت را ۱ واحد افزایش دهید.
اگر اشتباه باشد و بازیکن نوبت دیگری نداشته باشد:
- به بازیکن بگویید که بازی تمام شده است. جلوی بازیکن را برای وارد کردن حدسهای بیشتر بگیرید (این کار بازی را خراب میکند).
- کنترل را نمایش دهید و به بازیکن اجازه دهید بازی را دوباره شروع کند.
۷. پس از شروع مجدد بازی، مطمئن شوید که منطق بازی و رابط کاربری کاملاً تنظیم مجدد شدهاند، سپس به مرحله ۱ برگردید.
حالا بیایید به جلو برویم، ببینیم چگونه میتوانیم این مراحل را به کد تبدیل کنیم، مثال را بسازیم و ویژگیهای جاوا اسکریپت را در حین کار بررسی کنیم.
برای شروع این آموزش، از شما میخواهیم که با استفاده از ویرایشگر کد خود، یک کپی محلی از کد زیر را در یک فایل HTML جدید ایجاد کنید.
آن را در ویرایشگر متن خود باز نگه دارید و همچنین آن را در مرورگر وب خود باز کنید. در حال حاضر یک عنوان ساده، پاراگراف دستورالعمل و فرمی برای وارد کردن حدس خواهید دید، اما فرم در حال حاضر کاری انجام نمیدهد.
شما تمام کد جاوا اسکریپت خود را درون عنصر در پایین HTML اضافه خواهید کرد:
اضافه کردن متغیرها برای ذخیره دادههایمان
بیایید شروع کنیم. اول از همه، خطوط زیر را درون عنصر خود اضافه کنید:
این بخش از کد، متغیرها (و ثابتهایی) را که برای ذخیره دادههایی که برنامه ما استفاده خواهد کرد، نیاز داریم، تنظیم میکند.
متغیرها اساساً نامهایی برای مقادیر (مانند اعداد یا رشتههای متنی) هستند. شما یک متغیر را با کلمه کلیدی let و به دنبال آن نامی برای متغیر خود ایجاد میکنید.
ثابتها همچنین برای نامگذاری مقادیر استفاده میشوند، اما برخلاف متغیرها، نمیتوانید مقدار را پس از تنظیم تغییر دهید. در این حالت، ما از ثابتها برای ذخیره ارجاعات به بخشهایی از رابط کاربری خود استفاده میکنیم. متن داخل برخی از این عناصر ممکن است تغییر کند، اما هر ثابت همیشه به همان عنصر HTML که با آن مقداردهی اولیه شده است، ارجاع میدهد. شما یک ثابت را با کلمه کلیدی const و به دنبال آن نامی برای ثابت ایجاد میکنید.
شما میتوانید با علامت مساوی (=) و به دنبال آن مقداری که میخواهید به آن بدهید، یک مقدار به یک متغیر یا ثابت اختصاص دهید.
در مثال ما:
- به متغیر اول - randomNumber - یک عدد تصادفی بین ۱ تا ۱۰۰ اختصاص داده میشود که با استفاده از یک الگوریتم ریاضی محاسبه میشود.
- سه ثابت اول هر کدام برای ذخیره ارجاعی به پاراگرافهای نتایج در HTML ما ساخته شدهاند و برای درج مقادیر در پاراگرافها در ادامه کد استفاده میشوند (دقت کنید که چگونه درون یک عنصر قرار دارند، که خود برای انتخاب هر سه مورد برای تنظیم مجدد، هنگام شروع مجدد بازی، استفاده میشود):
- دو ثابت بعدی ارجاعاتی به ورودی متن فرم و دکمه ارسال را ذخیره میکنند و برای مدیریت ارسال حدس در مراحل بعدی استفاده میشوند.
- دو متغیر آخر ما تعداد حدس ۱ را ذخیره میکنند (برای پیگیری تعداد حدسهای بازیکن استفاده میشود) و ارجاعی به دکمهی ریست که هنوز وجود ندارد (اما بعداً وجود خواهد داشت).
سپس، کد زیر را به کد جاوا اسکریپت قبلی خود اضافه کنید:
توابع، بلوکهای کد قابل استفاده مجدد هستند که میتوانید یک بار بنویسید و بارها و بارها اجرا کنید و از تکرار مکرر کد جلوگیری کنید. روشهای مختلفی برای تعریف توابع وجود دارد، اما فعلاً روی یک نوع ساده تمرکز میکنیم. در اینجا ما یک تابع را با استفاده از کلمه کلیدی ، به دنبال آن یک نام، و سپس پرانتز بعد از آن تعریف کردهایم. پس از آن، دو آکولاد ({}) قرار میدهیم. داخل آکولاد، تمام کدهایی که میخواهیم هر زمان که تابع را فراخوانی میکنیم اجرا شوند، قرار میگیرند.
وقتی میخواهیم کد را اجرا کنیم، نام تابع را به همراه پرانتز تایپ میکنیم.
حالا بیایید این را امتحان کنیم. کد خود را ذخیره کنید و صفحه را در مرورگر خود رفرش کنید. سپس به کنسول جاوا اسکریپت ابزارهای توسعهدهنده بروید و خط زیر را وارد کنید:
پس از فشردن کلید ، باید عبارت را در کنسول مشاهده کنید؛ ما تابعی را در کد خود تعریف کردهایم که هر زمان آن را فراخوانی کنیم، یک پیام placeholder را نمایش میدهد.
رشتهها برای نمایش متن استفاده میشوند. ما قبلاً یک متغیر رشتهای () را دیدهایم: در کد زیر، "من یک متغیر جایگزین هستم" یک رشته است:
شما میتوانید رشتهها (string) را با استفاده از علامت نقل قول دوتایی (") یا علامت نقل قول تکی (') تعریف کنید، اما باید از همان شکل برای شروع و پایان یک تعریف رشته واحد استفاده کنید: نمیتوانید بنویسید "من یک placeholder هستم".
همچنین میتوانید رشتهها را با استفاده از علامتهای برگشتی (`) تعریف کنید. رشتههایی که به این صورت تعریف میشوند، قالبهای لیترال نامیده میشوند و ویژگیهای خاصی دارند. به طور خاص، میتوانید متغیرها یا حتی عبارات دیگری را در آنها جاسازی کنید:
این به شما مکانیزمی برای اتصال رشتهها به یکدیگر میدهد.
بلوکهای کد شرطی به شما این امکان را میدهند که بسته به اینکه یک شرط خاص درست است یا نه، کد را به صورت انتخابی اجرا کنید. آنها کمی شبیه یک تابع به نظر میرسند، اما متفاوت هستند. بیایید با اضافه کردن به مثال خود، شرطها را بررسی کنیم.
فکر میکنم میتوان با اطمینان گفت که ما نمیخواهیم تابع ما فقط یک پیام جایگزین را نمایش دهد. ما میخواهیم بررسی کند که آیا حدس یک بازیکن درست است یا خیر و به طور مناسب پاسخ دهد.
در این مرحله، تابع فعلی خود را با این نسخه جایگزین کنید:
این کد خیلی طولانی است - خب! بیایید هر بخش را بررسی کنیم و توضیح دهیم که چه کاری انجام میدهد.
- خط اول یک ثابت به نام userGuess تعریف میکند و مقدار آن را برابر با مقدار فعلی وارد شده در فیلد متن قرار میدهد. ما همچنین این مقدار را از طریق سازنده داخلی اجرا میکنیم، فقط برای اینکه مطمئن شویم مقدار قطعاً یک عدد است.
- در مرحله بعد، با اولین بلوک کد شرطی خود مواجه میشویم. سادهترین شکل بلوک شرطی با کلمه کلیدی if شروع میشود، سپس چند پرانتز، سپس چند آکولاد. داخل پرانتز، یک تست قرار میدهیم. اگر تست مقدار true را برگرداند، کد داخل آکولاد را اجرا میکنیم. اگر نه، اجرا نمیکنیم و به سراغ بخش بعدی کد میرویم. در این حالت، بررسی میکنیم که آیا متغیر guessCount برابر با ۱ است یا خیر (یعنی آیا این اولین تلاش بازیکن است یا خیر):
اگر اینطور باشد، محتوای متن پاراگراف guesses را برابر با Previous guesses: قرار میدهیم. اگر اینطور نباشد، این کار را نمیکنیم.
- در مرحله بعد، از یک الگوی لیترال برای اضافه کردن مقدار فعلی userGuess به انتهای پاراگراف guesses، با یک فاصله خالی بین آن، استفاده میکنیم.
- بلوک بعدی چند بررسی انجام میدهد:
اولین if(){ } بررسی میکند که آیا حدس کاربر برابر با randomNumber تنظیم شده در بالای جاوا اسکریپت ما است یا خیر. اگر اینطور باشد، بازیکن به درستی حدس زده و بازی را برده است، بنابراین یک پیام تبریک با رنگ سبز زیبا به بازیکن نشان میدهیم، محتویات کادر اطلاعات حدس پایین/بالا را پاک میکنیم و تابعی به نام را اجرا میکنیم که بعداً در مورد آن بحث خواهیم کرد.
حالا ما یک تست دیگر را با استفاده از ساختار به انتهای تست قبلی زنجیر کردهایم. این تست بررسی میکند که آیا این نوبت، آخرین نوبت کاربر است یا خیر. اگر اینطور باشد، برنامه همان کار بلوک قبلی را انجام میدهد، با این تفاوت که به جای پیام تبریک، یک پیام پایان بازی نمایش میدهد. بلوک نهایی که به انتهای این کد متصل شده است () حاوی کدی است که فقط در صورتی اجرا میشود که هیچ یک از دو تست دیگر نتیجه درست ندهند (بازیکن درست حدس نزده باشد، اما حدسهای بیشتری برایش باقی مانده باشد). در این حالت به آنها میگوییم که اشتباه میکنند، سپس یک تست شرطی دیگر انجام میدهیم تا بررسی کنیم که آیا حدس بالاتر یا پایینتر از جواب بوده است یا خیر، و در صورت لزوم پیام دیگری را نمایش میدهیم تا به آنها بگوییم که بالاتر یا پایینتر است.
- سه خط آخر در تابع، ما را برای ارائه حدس بعدی آماده میکنند. ما ۱ را به متغیر guessCount اضافه میکنیم تا بازیکن نوبت خود را تمام کند (++ یک عملیات افزایشی است - ۱ واحد افزایش مییابد) و مقدار را از فیلد متن فرم خالی میکنیم و دوباره روی آن فوکوس میکنیم تا برای وارد کردن حدس بعدی آماده شود.
در این مرحله، ما یک تابع داریم که به خوبی پیادهسازی شده است، اما چون هنوز آن را فراخوانی نکردهایم، کاری انجام نمیدهد. در حالت ایدهآل، میخواهیم وقتی دکمه "ارسال حدس" فشرده میشود، آن را فراخوانی کنیم و برای انجام این کار باید از یک رویداد استفاده کنیم. رویدادها اتفاقاتی هستند که در مرورگر رخ میدهند - کلیک شدن یک دکمه، بارگذاری صفحه، پخش ویدیو و غیره - که در پاسخ به آنها میتوانیم بلوکهایی از کد را اجرا کنیم. شنوندههای رویداد، رویدادهای خاص را مشاهده میکنند و توابع کنترلکننده رویداد را فراخوانی میکنند که در پاسخ به اجرای یک رویداد اجرا میشوند.
خط زیر را به زیر تابع خود اضافه کنید:
در اینجا ما یک شنونده رویداد () به دکمه guessSubmit اضافه میکنیم. این متدی است که دو مقدار ورودی (به نام آرگومان) میگیرد - نوع رویدادی که به آن گوش میدهیم (در این مورد click) به عنوان یک رشته، و تابعی که میخواهیم هنگام وقوع رویداد اجرا شود (در این مورد، ). توجه داشته باشید که هنگام نوشتن آن در نیازی به مشخص کردن پرانتز نداریم.
اکنون کد خود را ذخیره و رفرش کنید، و مثال شما باید تا حدی کار کند. تنها مشکل اکنون این است که اگر پاسخ صحیح را حدس بزنید یا حدسهایتان تمام شود، بازی متوقف میشود زیرا ما هنوز تابع را که قرار است پس از پایان بازی اجرا شود، تعریف نکردهایم. بیایید اکنون کد ناقص خود را اضافه کنیم و عملکرد مثال را تکمیل کنیم.
بیایید تابع را به انتهای کد خود اضافه کنیم و سپس آن را بررسی کنیم. اکنون این را زیر بقیه کد جاوا اسکریپت خود اضافه کنید:
- دو خط اول، ورودی متن فرم و دکمه را با تنظیم ویژگیهای disabled آنها روی true غیرفعال میکنند. این کار ضروری است، زیرا اگر این کار را نمیکردیم، کاربر میتوانست پس از پایان بازی حدسهای بیشتری ارسال کند که باعث میشد همه چیز بهم بریزد.
- سه خط بعدی یک عنصر جدید ایجاد میکنند، برچسب متنی آن را روی "Start new game" تنظیم میکنند و آن را به انتهای HTML موجود ما اضافه میکنند.
- خط آخر یک شنونده رویداد روی دکمه جدید ما تنظیم میکند تا وقتی روی آن کلیک میشود، تابعی به نام اجرا شود.
حالا باید را نیز تعریف کنیم! کد زیر را دوباره به انتهای جاوا اسکریپت خود اضافه کنید:
این بلوک کد نسبتاً طولانی، همه چیز را به طور کامل به حالت اولیهی بازی برمیگرداند، بنابراین بازیکن میتواند دوباره بازی کند.
به طور خاص، این کد:
- مقدار guessCount را به ۱ برمیگرداند.
- تمام متن پاراگرافهای اطلاعاتی را خالی میکند. ما تمام پاراگرافهای داخل را انتخاب میکنیم، سپس روی هر کدام حلقه میزنیم و textContent آنها را روی "" (یک رشتهی خالی) تنظیم میکنیم.
- دکمه تنظیم مجدد را از کد خود حذف میکند.
- عناصر فرم را دوباره فعال میکند و فیلد متن را خالی و متمرکز میکند تا برای وارد کردن حدس جدید آماده شود.
- رنگ پسزمینه را از پاراگراف lastResult حذف میکند.
- یک عدد تصادفی جدید تولید میکند تا شما دوباره همان عدد را حدس نزنید!
- در این مرحله، شما باید یک بازی کاملاً کاربردی داشته باشید - تبریک میگویم!
تنها کاری که اکنون در این مقاله باید انجام دهیم این است که در مورد چند ویژگی مهم دیگر کد که قبلاً دیدهاید صحبت کنیم، اگرچه ممکن است متوجه آن نشده باشید.
در بالا، ما به حلقهها اشاره کردیم، یک مفهوم بسیار مهم در برنامهنویسی که به شما امکان میدهد یک قطعه کد را بارها و بارها اجرا کنید، تا زمانی که یک شرط خاص برآورده شود.
بیایید یک مثال اساسی را بررسی کنیم تا به شما نشان دهیم که این به چه معناست. دوباره به کنسول جاوا اسکریپت ابزارهای توسعهدهنده مرورگر خود بروید، کد زیر را در آن قرار دهید و را فشار دهید:
چه اتفاقی افتاد؟ رشتههای در کنسول شما چاپ شدند.
این به دلیل حلقه است. خط یک آرایه ایجاد میکند که مجموعهای از مقادیر (در این مورد رشتهها) است.
سپس از یک حلقه برای دریافت هر مورد در آرایه و اجرای جاوا اسکریپت روی آن استفاده میکنیم. خط میگوید:
1. اولین مقدار را در fruits دریافت کن و آن را در متغیری به نام fruit ذخیره کن.
2. کد را بین {} آکولاد اجرا کن (که در این حالت، مقدار fruit را در کنسول ثبت میکند).
3. مقدار آرایه بعدی را در fruit ذخیره کن و 2 بار تکرار کن تا به انتهای آرایه fruits برسی.
حالا بیایید به حلقه در بازی حدس اعداد خود نگاه کنیم - موارد زیر را میتوان در تابع یافت:
این کد با استفاده از متد یک متغیر حاوی لیستی از تمام پاراگرافهای داخل ایجاد میکند، سپس روی تک تک آنها حلقه میزند و محتوای متنی هر کدام را حذف میکند.
توجه داشته باشید که اگرچه resetPara یک ثابت است، میتوانیم ویژگیهای داخلی آن مانند textContent را تغییر دهیم.
