در این ارزیابی و تمرین JavaScript به شما وظیفه داده می‌شود که بخشی از دانشی را که در سلسله مقاله‌های JavaScript به دست آورده‌اید بردارید و از آن برای ایجاد یک برنامه سرگرم‌کننده که داستان‌های احمقانه تصادفی تولید می‌کند، استفاده کنید. با کیهان وب همراه باشید تا شروع کنیم . خوش بگذره!
پیش نیازها: قبل از اقدام به این ارزیابی، باید قبلاً روی تمام مقالات این ماژول کار کرده باشید.
هدف: برای آزمایش درک اصول جاوا اسکریپت، مانند متغیرها، اعداد، عملگرها، رشته ها و آرایه ها باید تمرین JavaScript را دنبال کنید.
نقطه شروع
برای شروع این ارزیابی، باید:
1. برای مثال بروید و فایل HTML را بردارید، یک کپی محلی از آن را به عنوان index.html در یک فهرست جدید در جایی در رایانه خود ذخیره کنید و برای شروع ، ارزیابی را به صورت محلی انجام دهید. این همچنین دارای CSS برای استایل دادن به مثال موجود در آن است.
۲. به صفحه حاوی متن خام بروید و آن را در یک تب مرورگر جداگانه در جایی باز نگه دارید. بعداً به آن نیاز خواهید داشت.
از طرف دیگر، می توانید از سایتی مانند JSBin یا Glitch برای ارزیابی خود استفاده کنید. می توانید HTML، CSS و JavaScript را در یکی از این ویرایشگرهای آنلاین قرار دهید. اگر ویرایشگر آنلاینی که استفاده می‌کنید پانل جاوا اسکریپت مجزایی ندارد، به راحتی آن را در یک عنصر<script> در صفحه HTML قرار دهید.
چکیده پروژه
تعدادی HTML/CSS خام و چند رشته متن و توابع JavaScript به شما ارائه شده است. شما باید جاوا اسکریپت لازم را بنویسید تا آن را به یک برنامه کاری تبدیل کنید، که کارهای زیر را انجام می دهد:
با فشار دادن دکمه “Generate random story” یک داستان احمقانه ایجاد می کند.
نام پیش‌فرض “Bob” در داستان را با یک نام سفارشی جایگزین می‌کند، تنها در صورتی که قبل از فشار دادن دکمه تولید، یک نام سفارشی در قسمت نوشتاری “Enter custom name” وارد شود.
اگر دکمه رادیویی بریتانیا قبل از فشار دادن دکمه تولید علامت زده شود، مقادیر و واحدهای وزن و دمای پیش‌فرض ایالات متحده را در داستان به معادل‌های بریتانیا تبدیل می‌کند.
هر بار که دکمه فشار داده می شود، یک داستان احمقانه تصادفی جدید ایجاد می کند.
تصویر زیر نمونه ای از خروجی برنامه تمام شده را نشان می دهد:
مراحل تکمیل
بخش‌های زیر آنچه را که باید انجام دهید شرح می‌دهد.
راه اندازی اولیه:
1. یک فایل جدید به نام main.js در همان دایرکتوری فایل index.html خود ایجاد کنید.
2. فایل JavaScript خارجی را با درج عنصر <script> در main.js مرجع HTML خود به HTML خود اعمال کنید. آن را درست قبل از تگ بسته شدن </body> قرار دهید.
متغیرها و توابع اولیه:
1.در فایل متنی خام، تمام کدهای زیر عنوان “1. COMPLETE VARIABLE AND FUNCTION DEFINITIONS” را کپی کنید و آن را در بالای فایل main.js قرار دهید. این به شما سه متغیر می دهد که ارجاعات را به فیلد متنی Enter custom name” (customName)”، دکمه “Generate random story” (تصادفی کردن)، و عنصر
در پایین بدنه HTML که داستان خواهد بود را ذخیره می کند. به ترتیب در (داستان) کپی شد. علاوه بر این، تابعی به نام ()randomValueFromArray دارید که یک آرایه را می گیرد و یکی از آیتم های ذخیره شده در آرایه را به صورت تصادفی برمی گرداند.
2.اکنون به بخش دوم فایل متن خام نگاه کنید. “2. RAW TEXT TRINGS” این شامل رشته های متنی است که به عنوان ورودی برنامه ما عمل می کند. ما از شما می خواهیم این متغیرهای داخلی را در main.js داشته باشید:
اولین رشته طولانی و بزرگ متن را در متغیری به نام storyText ذخیره کنید.
اولین مجموعه از سه رشته را در یک آرایه به نام insertX ذخیره کنید.
مجموعه دوم از سه رشته را در یک آرایه به نام insertY ذخیره کنید.
مجموعه سوم از سه رشته را در یک آرایه به نام insertZ ذخیره کنید.
قرار دادن کنترل کننده رویداد و عملکرد ناقص:
۱.حالا به فایل متنی خام برگردید.
2.کد موجود در زیر عنوان “3. EVENT LISTENER AND PARTIAL FUNCTION DEFINITION” را کپی کنید و آن را در پایین فایل main.js خود قرار دهید. این:
یک شنونده رویداد کلیک را به متغیر تصادفی اضافه می کند تا وقتی روی دکمه ای که نشان می دهد کلیک شود، تابع () result اجرا شود.
یک تعریف تابع ()result نتیجه جزئی کامل شده را به کد شما اضافه می کند. برای بقیه ارزیابی، خطوطی را در داخل این تابع پر می کنید تا آن را کامل کنید و به درستی کار کند.
تکمیل تابع () result:
1.یک متغیر جدید به نام newStory ایجاد کنید و مقدار آن را برابر storyText قرار دهید. این مورد نیاز است تا بتوانیم با هر بار فشار دادن دکمه و اجرای تابع، یک داستان تصادفی جدید ایجاد کنیم. اگر مستقیماً در storyText تغییراتی ایجاد کنیم، فقط یک بار می‌توانیم یک داستان جدید ایجاد کنیم.
2.سه متغیر جدید به نام‌های xItem، yItem و zItem ایجاد کنید و آنها را برابر با نتیجه فراخوانی ()randomValueFromArray در سه آرایه خود قرار دهید (نتیجه در هر مورد، یک آیتم تصادفی از هر آرایه‌ای است که فراخوانی می‌شود). برای مثال میتوانید تابع را فراخوانی کنید و با نوشتن randomValueFromArray(insertX) یک رشته تصادفی را از insertX بازگردانید.
نکته
3.در مرحله بعد می‌خواهیم سه مکان‌نما در رشته newStory — :insertx:، :inserty:، و :insertz: — را با رشته‌های ذخیره شده در xItem، yItem و zItem جایگزین کنیم. دو روش رشته احتمالی وجود دارد که در اینجا به شما کمک می کند – در هر مورد، فراخوانی متد را برابر با newStory کنید، بنابراین هر بار که آن فراخوانی می شود، newStory برابر با خودش است، اما با تعویض هایی که انجام می شود. بنابراین هر بار که دکمه فشار داده می‌شود، این مکان‌ها هر کدام با یک رشته احمقانه تصادفی جایگزین می‌شوند. به عنوان یک راهنمایی بیشتر، بسته به روشی که انتخاب می کنید، ممکن است لازم باشد یکی از تماس ها را دو بار برقرار کنید.
4.در اولین بلوک if، یک فراخوانی متد جایگزین رشته دیگر اضافه کنید تا نام «Bob» موجود در رشته newStory را با متغیر name جایگزین کنید. در این بلوک می گوییم “اگر مقداری در ورودی متن customName وارد شده است، «Bob» را در داستان با آن نام سفارشی جایگزین کنید.”
5.در داخل بلوک if دوم، ما در حال بررسی هستیم که آیا دکمه رادیویی بریتانیا انتخاب شده است یا خیر. اگر چنین است، می‌خواهیم مقادیر وزن و دما در داستان را از پوند و فارنهایت به سنگ و درجه سانتیگراد تبدیل کنیم. :
کاری که باید انجام دهید به شرح زیر است
فرمول های تبدیل پوند به سنگ و فارنهایت به سانتیگراد را جستجو کنید.
در داخل خطی که متغیر وزن را تعریف می کند، 300 را با محاسبه ای جایگزین کنید که 300 پوند را به سنگ تبدیل می کند. “stone” را به انتهای نتیجه فراخوانی کلی ()Math.round الحاق کنید.
در داخل خطی که متغیر دما را تعریف می کند، 94 را با محاسبه ای جایگزین کنید که 94 فارنهایت را به درجه سانتی گراد تبدیل می کند. ‘ centigrade’ را به انتهای نتیجه فراخوانی کلی ()Math.round الحاق کنید.
درست در زیر دو تعریف متغیر، دو خط جایگزین رشته دیگر اضافه کنید که به جای «94 fahrenheit» با محتوای متغیر دما، و «300 pounds» با محتوای متغیر وزن جایگزین شود.
6.در نهایت، در خط دوم تا آخر تابع، ویژگی textContent متغیر story (که به پاراگراف اشاره دارد) برابر newStory قرار دهید.
نکات و راهنمایی ها
شما به هیچ وجه نیازی به ویرایش HTML ندارید، مگر اینکه JavaScript را در HTML خود اعمال کنید.
اگر مطمئن نیستید که جاوا اسکریپت به درستی بر روی HTML شما اعمال می شود، سعی کنید همه چیزهای دیگر را به طور موقت از فایل JavaScript حذف کنید، یک بیت ساده جاوا اسکریپت را اضافه کنید که می دانید جلوه واضحی ایجاد می کند، سپس ذخیره و تازه سازی کنید. برای مثال، موارد زیر پس‌زمینه عنصر <html> را قرمز می‌کنند ، بنابراین اگر JavaScript به درستی اعمال شود، کل پنجره مرورگر باید قرمز شود:
document.querySelector(“html”).style.backgroundColor = “red”;
()Math.round یک روش JavaScript داخلی است که نتیجه یک محاسبه را به نزدیکترین عدد صحیح گرد می کند.
سه نمونه از رشته ها وجود دارد که باید جایگزین شوند. می توانید متد ()replace را چندین بار تکرار کنید یا می توانید از ()replaceAll استفاده کنید. به یاد داشته باشید، رشته ها تغییر ناپذیر هستند!
ارزیابی یا کمک بیشتر
اگر میخواهید کارتان ارزیابی شود، یا گیر کرده‌اید و میخواهید کمک بخواهید:
1.کار خود را در یک ویرایشگر قابل اشتراک گذاری آنلاین مانند CodePen، jsFiddle یا Glitch قرار دهید.
برای ارزیابی and/or کمک در دسته آموزش گفتمان MDN، پستی بنویسید. پست شما باید شامل موارد زیر باشد:
عنوانی توصیفی مانند “Assessment wanted for Silly story generator”.
جزئیات آنچه قبلاً امتحان کرده‌اید، و آنچه میخواهید ما انجام دهیم، به عنوان مثال،اگر گیر کرده اید و نیاز به کمک دارید یا می خواهید ارزیابی کنید.
پیوندی به مثالی که میخواهید ارزیابی شود یا نیاز به کمک دارید، در یک ویرایشگر آنلاین قابل اشتراک‌گذاری (همانطور که در مرحله ۱ در بالا ذکر شد). این یک تمرین خوب برای ورود به آن است – اگر نمی توانید کد او را ببینید کمک به کسی که مشکل کدنویسی دارد بسیار سخت است.
پیوندی به صفحه کار یا ارزیابی واقعی، تا بتوانیم سؤالی را که میخواهید در مورد آن کمک کنید، پیدا کنیم.
خلاصه و پایان
این آخرین جلسه از سلسله مقالات جاوا اسکریپت بود که بتوانید چیز هایی را که یاد گرفته اید در حد مبتدی تمرین کنید.اگر مشکلی داشتید با ما در میان بگذراید و یا اگر میخواهید بدون دغدغه برای خود سایتی داشته باشید میتوانید از ما یعنی کیهان وب بخواهید از این رو از نمونه کار ها و تعرفه های سایت دیدن کنید.
ممنون که تا به اینجا همراه ما بودید به زودی مقاله های دیگری از در زمینه برنامه نویسی در اختیاز شما قرار خواهیم داد.