آموزش جاوا اسکریپت مقدماتی: ساخت بازی حدس اعداد — به زبان ساده

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

پیش‌نیازها

• سواد مقدماتی رایانه
• داشتن درکی ابتدایی از HTML و CSS
• آشنایی با ماهیت جاوا اسکریپت

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

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

شیوه تفکر مانند یک برنامه‌نویس

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

فیلم آموزش JavaScript ES6 جاوا اسکریپت در فرادرس

کلیک کنید

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

با این ذهنیت مثالی را بررسی می‌کنیم که در آن یک بازی با استفاده از جاوا اسکریپت ساخته می‌شود و همچنین فرایند کلی تقسیم این برنامه به وظایف ملموس را مورد بررسی قرار خواهیم داد.

مثال: بازی حدس زدن اعداد

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

با اجرای این بازی تلاش کنید قبل از بررسی کد با آن بیشتر آشنا شوید. تصور کنید در یک شرکت برنامه‌نویسی مشغول به کار شده‌اید، و رییس با ارائه توضیح‌های زیر از شما می‌خواهد که یک چنین بازی بسازید:

از شما می‌خواهم یک بازی ساده برای حدس زدن اعداد بسازید. در این بازی یک عدد تصادفی بین 1 تا 100 انتخاب می‌شود و سپس از بازیکن خواسته می‌شود که در 10 نوبت این عدد را حدس بزند. پس از هر حدس باید به بازیکن اعلام شود که حدس وی درست یا نادرست بوده است و اگر نادرست باشد، باید مشخص شود که حدس وی بالاتر یا پایین‌تر از عدد مورد نظر است. همچنین باید اعدادی را که بازیکن قبلاً حدس زده است به وی اعلام کند. بازی زمانی پایان می‌یابد که یا بازیکن به درستی عدد مورد را حدس بزند و یا تعداد دفعات امتحان کردن وی به اتمام برند. زمانی که بازی پایان می‌یابد، باید گزینه‌ای در اختیار بازیکن قرار گیرد که بتواند دوباره بازی را شروع کند.

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

1. یک عدد تصادفی بین 1 تا 100 ایجاد کن.
2. تعداد دفعه‌هایی که بازیکن حدس می‌زند را با آغاز 1 ثبت کن.
3. روشی برای حدس زدن عدد در اختیار بازیکن قرار بده.
4. زمانی که حدس ارائه شد در جایی ثبت کن تا کاربر بتواند حدس‌های قبلی خود را نیز ببیند.
5. سپس بررسی کن که آیا عدد صحیح است یا نه.
6. اگر صحیح بود:
   1. پیام موفقیت را نمایش بده.
   2. امکان وارد کردن حدس‌ها را متوقف کن (چون ادامه این فرایند بازی را خراب می‌کند).
   3. کنترل‌هایی را نمایش بده که به بازیکن امکان اجرای مجدد بازی را بدهند.
7. اگر حدس نادرست بود و بازیکن نوبت امتحان دیگری داشت:
   1. به بازیکن اعلام کن که حدسش نادرست بوده است
   2. به وی اجازه بده حدس دیگری وارد کند.
   3. تعداد حدس‌های وارد شده را 1 واحد افزایش بده.
8. اگر حدس نادرست بود و نوبت امتحان دیگری نمانده بود:
   1. به بازیکن اعلام کن که بازی تمام شده است.
   2. امکان وارد کردن حدس از سوی بازیکن را متوقف کن.
   3. کنترل‌هایی که امکان اجرای مجدد بازی را فراهم می‌سازند، در اختیار بازیکن قرار بده.
9. زمانی که بازی ری‌استارت شد، اطمینان حاصل کن که منطق و رابط کاربری بازی کاملاً ریست شده است و سپس از مرحله 1 آغاز کن.

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

تنظیمات اولیه

برای آغاز این راهنما بهتر است یک کپی محلی از این فایل (+) را روی رایانه خود ایجاد کنید. آن را در ویرایشگر متنی مورد علاقه و همچنین مرورگر وب خود باز کنید. در این زمان شما شاهد یک عنوان، یک پاراگراف از دستورالعمل‌های بازی و یک فرم برای وارد کردن حدس هستند؛ اما هنوز هیچ چیز کار نمی‌کند.

جایی که کد خود را اضافه خواهیم کرد درون عنصر <script> در انتهای فایل HTML است:

<script>

// Your JavaScript goes here

</script>

افزودن متغیرهایی برای ذخیره‌سازی داده‌ها

در آغاز و قبل از هر چیز کدهای زیر را درون عنصر <script> وارد کنید:

let randomNumber = Math.floor(Math.random() * 100) + 1;

const guesses = document.querySelector('.guesses');
const lastResult = document.querySelector('.lastResult');
const lowOrHi = document.querySelector('.lowOrHi');

const guessSubmit = document.querySelector('.guessSubmit');
const guessField = document.querySelector('.guessField');

let guessCount = 1;
let resetButton;

در این بخش از کد متغیرها و ثابت‌هایی که برای ذخیره‌سازی داده‌های برنامه مورد نیاز هستند، راه‌اندازی می‌شوند. متغیرها اساساً محفظه‌هایی برای نگهداری مقدار (مانند عدد، یا رشته‌های متنی) هستند. یک متغیر را با دستور let (یا var) و سپس تعیین یک نام برای متغیر می‌توان ایجاد کرد. برای مطالعه بیشتر در مورد متغیرهای جاوا اسکریپت به مقاله «متغیرهای جاوا اسکریپت و ذخیره‌سازی اطلاعات در آن‌ها — راهنمای مقدماتی» مراجعه کنید. ثابت‌ها برای ذخیره‌سازی مقادیری در برنامه استفاده می‌شوند که در طی اجرای برنامه تغییر نخواهند یافت و به وسیله کلیدواژه const ایجاد می‌شوند. در این مثال ما از ثابت‌ها برای ذخیره‌سازی ارجاع به بخش‌های مختلف رابط کاربری برنامه استفاده می‌کنیم؛ برخی از متن‌های درون آن‌ها ممکن تغییر یابند؛ اما عناصر HTML که مورد ارجاع قرار می‌گیرند، همیشه ثابت هستند.

با استفاده از عملگر تساوی (=) می‌توان یک مقدار را به یک متغیر یا ثابت انتساب داد و به این منظور باید ابتدا نام متغیر یا ثابت و سپس علامت تساوی و در نهایت مقدار مورد نظر را نوشت.

در مورد مثال ما:

• متغیر اول یعنی randomNumber یک عدد تصادفی بین 1 و 100 دریافت می‌کند که به وسیله یک الگوریتم ریاضی محاسبه می‌شود.
• سه ثابت اول هر یک برای ذخیره‌سازی ارجاعی به پاراگراف‌های نتایج در کد HTML ما استفاده می‌شوند و برای درج مقادیر در پاراگراف بعدی کد مورد استفاده قرار می‌گیرند:

<p class="guesses"></p>
<p class="lastResult"></p>
<p class="lowOrHi"></p>

• دو ثابت دیگر شامل ارجاعی به ورودی متنی فرم و دکمه ارسال هستند که برای کنترل کردن ارسال حدس‌ها در ادامه مورد استفاده قرار می‌گیرند:

<label for="guessField">Enter a guess: </label><input type="text" id="guessField" class="guessField">
<input type="submit" value="Submit guess" class="guessSubmit">

• دو متغیر نهایی ما یکی شمارنده حدس با مقدار اولیه 1 است که تعداد حدس‌هایی که کاربر وارد کرده است را ثبت می‌کند و دیگری ارجاعی به دکمه ریست است که هنوز وجود ندارد؛ اما بعداً ایجاد خواهیم کرد.

تابع‌ها

سپس این کد را در زیر کد قبلی جاوا اسکریپت اضافه می‌کنیم:

function checkGuess() {
   alert('I am a placeholder');
}

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

فیلم آموزش تعریف توابع در جاوا اسکریپت (JavaScript) (رایگان) در فرادرس

کلیک کنید

چند روش برای تعریف کردن تابع وجود دارد؛ اما در حال حاضر روی ساده‌ترین نوع تمرکز می‌کنیم. در این روش یک تابع با استفاده از کلیدواژه function و سپس نام تابع و در انتها دو پرانتز باز و بسته تعریف می‌شود. پس از آن دو آکولاد باز و بسته {} می‌آید و درون این آکولادها کدی که قرار است در زمان فراخوانی تابع اجرا شود نوشته می‌شود.

زمانی که می‌خواهیم این کد را اجرا کنیم، باید نام تابع و سپس یک جفت پرانتز را بنویسیم.

برای بررسی عمل مسائل فوق ابتدا کدی که نوشته‌اید را ذخیره کنید و سپس مرورگر را رفرش کنید. در ادامه به کنسول ابزارهای توسعه‌دهنده مرورگر خود بروید و خط زیر را وارد کنید (برای رفتن به کنسول توسعه‌دهنده دکمه CTRL+SHIFT+I را در مرورگر وب بزنید):

checkGuess();

پس از زدن دکمه اینتر با یک پیام مواجه می‌شوید که اعلام می‌کند «I am a placeholder»؛ در واقع ما تابعی در کد خود نوشته‌ایم که هر زمان فراخوانی می‌شود، یک هشدار نمایش می‌دهد.

عملگرها (Operators)

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

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

در جدول زیر عملیات حسابی نمونه‌ای برای عملگرهای مختلف ارائه شده است:

همچنین می‌توانید از عملگر + برای الحاق رشته‌ها به هم که در برنامه‌نویسی «concatenation» نامیده می‌شود استفاده کنید. خطوط کد زیر را یک به یک در کنسول وارد کنید:

let name = 'Bingo';
name;
let hello = ' says hello!';
hello;
let greeting = name + hello;
greeting;

همچنین برخی عملگرهای میانبر نیز وجود دارند که عملگرهای انتسابی افزوده (augmented) نامیده می‌شوند. برای نمونه اگر بخواهید یک رشته متنی جدید را به یک رشته موجود اضافه کرده و نتیجه را بازگشت دهید، می‌توانید به صورت زیر عمل کنید:

name += ' says hello!';

این دستور معادل دستور زیر است:

name = name + ' says hello!';

زمانی که تست‌های درست/نادرست را (برای مثال درون شرط‌ها) اجرا می‌کنیم از عملگرهای مقایسه‌ای استفاده می‌کنیم. برای نمونه:

شرط‌ها

اگر به تابع ()checkGuess خود بازگردیم، می‌توانیم به جرئت بگوییم که قصد نداشته‌ایم صرفاً یک پیام placeholder را نمایش دهیم. در واقع قصد ما این بوده است که بررسی کنیم آیا حدس بازیکن صحیح بوده یا نه و بر این مبنا پاسخ متناسبی ارائه کنیم.

در این زمان باید تابع ()checkGuess را با نسخه زیر جایگزین کنیم:

function checkGuess() {
  let userGuess = Number(guessField.value);
  if (guessCount === 1) {
    guesses.textContent = 'Previous guesses: ';
  }
  guesses.textContent += userGuess + ' ';
 
  if (userGuess === randomNumber) {
    lastResult.textContent = 'Congratulations! You got it right!';
    lastResult.style.backgroundColor = 'green';
    lowOrHi.textContent = '';
    setGameOver();
  } else if (guessCount === 10) {
    lastResult.textContent = '!!!GAME OVER!!!';
    setGameOver();
  } else {
    lastResult.textContent = 'Wrong!';
    lastResult.style.backgroundColor = 'red';
    if(userGuess < randomNumber) {
      lowOrHi.textContent = 'Last guess was too low!';
    } else if(userGuess > randomNumber) {
      lowOrHi.textContent = 'Last guess was too high!';
    }
  }
 
  guessCount++;
  guessField.value = '';
  guessField.focus();
}

این کد زیادی است؛ اما نباید بهراسید، چون کارکرد هر یک از بخش‌ها را یک به یک در ادامه توضیح می‌دهیم.

• در خط اول (خط شماره 2 فوق) یک متغیر به نام userGuess اعلان می‌شود و مقدار آن برابر با مقدار کنونی وارد شده درون فیلد متنی تعیین می‌شود. همچنین این مقدار به وسیله متد داخلی ()Number بررسی می‌شود تا مطمئن شویم که یک مقدار عددی است.
• سپس با نخستین بلوک شرطی برنامه مواجه می‌شویم (خطوط 3 تا 5 فوق). یک بلوک کد شرطی امکان اجرای گزینشی کد بر اساس این که شرایط خاصی وجود دارد یا نه را فراهم می‌سازد. این بلوک شرطی تا حدودی شبیه تابع به نظر می‌رسد؛ ولی این دو مفاهیم متفاوتی هستند. ساده‌ترین شکل بلوک شرطی با یک کلیدواژه if آغاز می‌شود و سپس پرانتز و آکولادهایی تعریف می‌شوند. درون پرانتزها یک بررسی صورت می‌گیرد. اگر نتیجه بررسی true باشد، در این صورت کد درون آکولاد اجرا می‌شود. اگر چنین نباشد، اجرای برنامه به بخش‌های دیگر کد می‌رسد. در این مثال به بررسی این مسئله می‌پردازیم که متغیر guessCount برابر با 1 است یا نه (یعنی این اولین حدس بازیکن است یا نه؟):

guessCount === 1

• اگر چنین باشد، محتوای متنی پاراگراف حدس را برابر با «Previous guesses:» قرار می‌دهیم، در غیر این صورت چنین نمی‌کنیم.
• خط 6 به این نکته بستگی دارد که مقدار userGuess باید به انتهای پاراگراف guesses الحاق شود یا نه؛ همچنین یک فضای خالی در انتهای آن قرار می‌گیرد تا بین هر حدس یک فاصله وجود داشته باشد.
• در بلوک بعدی (خطوط 8 تا 24) چند بررسی صورت می‌گیرد:
  • نخست {} () if بررسی می‌کند که آیا حدس کاربر با مقدار randomNumber که در ابتدای کد جاوا اسکریپت تعیین شده، برابر است یا نه. اگر چنین باشد، بازیکن درست حدس زده است و بازی را می‌برد، بنابراین یک پیام موفقیت با رنگ سبز به بازیکن نمایش داده می‌شود، محتوای کادر اطلاعات حدس بالا/پایین پاک می‌شود و تابع ()setGameOver که در ادامه بررسی خواهیم کرد اجرا خواهد شد.
  • اکنون تست دیگری را با استفاده از ساختار {} () else if به انتهای تست آخر اضافه می‌کنیم. این تست بررسی می‌کند که آیا این نوبت، آخرین نوبتی است که کاربر می‌تواند استفاده کند یا نه. اگر چنین باشد، برنامه همان کاری را انجام می‌دهد که بلوک قبلی انجام می‌داد؛ به جز این که پیام خاتمه بازی را به جای پیام موفقیت، نمایش می‌دهد.
  • بلوک آخر که در انتهای این کد قرار گرفته است یعنی {}else، شامل کدی است که تنها در صورتی اجرا می‌شود که هیچ یک از دو مورد فوق صحیح نباشند (یعنی بازیکن درست حدس نزده باشد و همچنان نوبت‌های حدس دیگری نیز داشته باشد). در این حالت، به بازیکن گفته می‌شود که حدسش نادرست بوده است و سپس بررسی شرطی دیگری صورت می‌گیرد تا متوجه شویم که حدس ما بالاتر یا پایین‌تر از پاسخ اصلی است و بر همین مبنا پیام دیگری به بازیکن نمایش داده می‌شود.
• سه خط آخر تابع (خطوط 26 تا 28) ما را آماده ارسال حدس بعدی می‌کند. مقدار 1 را به متغیر guessCount اضافه می‌کنیم تا بازیکن بتواند از نوبت خود استفاده کند (عملگر ++ یک عملگر افزایشی است که هر با 1 واحد متغیر را افزایش می‌دهد) و مقدار موجود در فیلد متنی فرم خالی شده و فوکوس صفحه روی آن قرار می‌گیرد تا بازیکن بتواند حدس بعدی خود را وارد کند.

رویدادها (Events)

در این زمان یک تابع ()checkGuess داریم که به خوبی پیاده‌سازی شده است؛ اما هیچ کاری انجام نمی‌دهد، زیرا هنوز آن را فراخوانی نکرده‌ایم. به طور معمول باید آن را زمانی فراخوانی کنیم که دکمه «Submit guess» فشرده می‌شود و برای انجام این کار باید از یک رویداد استفاده کنیم. رویدادها چیزهایی هستند که در مرورگر رخ می‌دهند، مثلاً دکمه‌ای کلیک، صفحه‌ای بارگذاری، یک ویدئو پخش و یا مواردی از این دست رخ می‌دهند. در پاسخ به این رویدادها می‌توانیم بلوک‌های خاصی از کد را اجرا کنیم. این ساختارها که منتظر وقوع رویدادی هستند، به نام «شنونده رویداد» (event listener) شناخته می‌شوند. همچنین بلوک‌های کدی که در پاسخ به وقوع یک رویداد اجرا می‌شوند، «دستگیره‌های رویداد (event handler) نام دارند.

فیلم آموزش جاوا اسکریپت JavaScript در فرادرس

کلیک کنید

خط زیر را پس از تابع ()checkGuess اضافه کنید:

guessSubmit.addEventListener('click', checkGuess);

در این کد ما یک شنونده رویداد به دکمه guessSubmit اضافه می‌کنیم. این همان متدی است که دو مقدار ورودی می‌گیرد. این مقادیر ورودی آرگومان (argument) نامیده می‌شوند. نوع رویدادی که منتظر وقوع آن هستیم در این مثال به صورت click از جنس رشته است و کدی که می‌خواهیم هنگام وقوع رویداد اجرا کنیم، محسوب می‌شود. دقت کنید که وقتی درون ()addEventListener کدنویسی می‌کنیم، لازم نیست پرانتزها را قید کنید.

خاتمه بخشیدن کارکرد بازی

اینک تابع ()setGameOver را به انتهای کد خود اضافه می‌کنیم که در زمان پایان بازی اجرا شود. کد زیر را به انتهای اسکریپت جاوا اسکریپت اضافه کنید:

function setGameOver() {
  guessField.disabled = true;
  guessSubmit.disabled = true;
  resetButton = document.createElement('button');
  resetButton.textContent = 'Start new game';
  document.body.appendChild(resetButton);
  resetButton.addEventListener('click', resetGame);
}

• دو خط اول امکان ورود متن و همچنین دکمه را با تعیین خصوصیت disabled به صورت true، غیر فعال می‌کنند. این امر ضروری است، زیرا اگر کاربر بتواند پس از پایان بازی نیز حدس‌های خود را وارد کند، بازی به هم می‌خورد.
• سه خط بعدی یک عنصر <button> تولید می‌کنند که برچسب متنی آن به صورت «Start new Game» است و آن را به انتهای HTML موجود اضافه می‌کند.
• خط آخر یک شنونده رویداد روی دکمه جدید تنظیم می‌کند که وقتی دکمه کلیک شود، یک تابع به نام ()resetGame را اجرا می‌کند.

اکنون باید این تابع را نیز تعریف کنیم. کد زیر را نیز به انتهای کد جاوا اسکریپت اضافه کنید:

function resetGame() {
  guessCount = 1;

  const resetParas = document.querySelectorAll('.resultParas p');
  for (let i = 0 ; i < resetParas.length ; i++) {
    resetParas[i].textContent = '';
  }

  resetButton.parentNode.removeChild(resetButton);

  guessField.disabled = false;
  guessSubmit.disabled = false;
  guessField.value = '';
  guessField.focus();

  lastResult.style.backgroundColor = 'white';

  randomNumber = Math.floor(Math.random() * 100) + 1;
}

این کد نسبتاً طولانی به طور کامل همه چیز را ریست می‌کند تا به حالتی که در ابتدای بازی بود دربیایند، از این رو بازیکن می‌تواند یک دور دیگر بازی کند. این کد موارد زیر را انجام می‌دهد:

• guessCount را مجدداً به مقدار 1 تنظیم می‌کند.
• همه متن‌های موجود در پاراگراف‌های اطلاعات را خالی می‌کند.
• دکمه ریست را از کد حذف می‌کند.
• عناصر روی فرم را فعال کرده و فیلد متنی را خالی کرده و فوکوس صفحه را روی آن قرار می‌دهد تا برای ورود حدس جدید آماده باشد.
• رنگ پس زمینه را از پاراگراف lastResult حذف می‌کند.
• یک عدد تصادفی جدید ایجاد می‌کند، به طوری که در این دور نتوان عدد قبلی را حدس زد.

در این مرحله یک بازی نمونه کامل شده داریم. تنها کاری که مانده است تا انجام دهیم این است که در مورد ویژگی‌های مهم دیگر که قبلاً دیدید و ممکن است درک نکرده باشید کمی توضیح دهیم.

حلقه‌ها (Loops)

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

برای درک بهتر حلقه‌ها، مجدداً با زدن دکمه‌های CTRL + SHIFT + I به کنسول توسعه مرورگر بروید و کد زیر را وارد کنید:

for (let i = 1 ; i < 21 ; i++) { console.log(i) }

چه اتفاقی افتاد؟ اعداد 1 تا 20 در کنسول نمایش یافتند. دلیل این امر آن است که ما از یک حلقه استفاده کره‌ایم. حلقه fot سه مقدار ورودی (آرگومان) می‌گیرد:

• یک مقدار آغازین: در این مثال ما از مقدار آغازین 1 استفاده می‌کنیم؛ اما این عدد می‌تواند هر چیز دیگری نیز باشد. حرف i را می‌توان با هر نام دیگری جایگزین کرد؛ اما i به عنوان یک عرف در این موارد استفاده می‌شود زیرا کوتاه است و به‌خاطرسپاری آن آسان‌تر است.
• یک شرط خروجی: در این بخش شرط i < 21 را تعیین کرده‌ایم، این حلقه به کار خود ادامه می‌دهد تا این که i دیگر کمتر از 21 نباشد. یعنی وقتی i به عدد 21 برسد، این حلقه دیگر اجرا نخواهد شد.
• یک افزاینده: ما در این مورد از ++i استفاده کرده‌ایم که به این معنی است که باید 1 واحد به i اضافه شود. این حلقه برای هر یک از مقادیر i یک بار اجرا می‌شود تا این که i به مقدار 21 برسد. در این مثال ما مقدار متغیر i را در هر بار تکرار حلقه با استفاده از متد ()console.log در کنسول نمایش می‌دهیم.

اینک به بررسی حلقه‌ها در بازی حدس اعداد می‌پردازیم. کد زیر درون تابع ()resetGame قرار دارد:

let resetParas = document.querySelectorAll('.resultParas p');
for (let i = 0 ; i < resetParas.length ; i++) {
  resetParas[i].textContent = '';
}

این کد یک متغیر ایجاد می‌کند که شامل فهرستی از همه پاراگراف‌های <"div class="resultParas> با استفاده از متد ()querySelectorAll است و سپس روی هر یک از آن‌ها چرخ می‌زند و محتوای متنی هر کدام را حذف می‌کند.

بحثی کوتاه در باب شیءها

پیش از این که به توضیح شیءها بپردازیم، یک بهبود دیگر در کد خود ایجاد می‌کنیم. کد زیر را درست زیر ;let resetButton و در بخش نزدیک به ابتدای کد جاوا اسکریپت وارد کنید و سپس فایل خود را ذخیره کنید:

guessField.focus();

این خط از متد ()focus برای قرار دادن خودکار کرسر متن در روی فیلد متنی <input> به محض بارگذاری صفحه استفاده می‌کند و معنی آن این است که کاربر می‌تواند به راحتی نخستین حدس خود را در فیلد مربوطه وارد کند و نیازی به کلیک کردن ابتدایی روی فیلد متنی ندارد. این تنها یک تغییر کوچک است؛ اما قابلیت استفاده از برنامه را تا حد زیادی افزایش می‌دهد و سرنخی بصری به کاربر می‌دهد که برای انجام بازی باید چه کاری انجام دهد.

آن چه در این کد صورت می‌گیرد را با دقت بیشتری بررسی می‌کنیم. در جاوا اسکریپت همه چیز یک شیء محسوب می‌شود. یک شیء مجموعه‌ای از کارکردهای مرتبط است که در یک گروه‌بندی منفرد ذخیره شده‌اند. هر کس می‌تواند شیءهای خاص خود را ایجاد کند؛ اما این مسئله تا حدودی پیشرفته است و قصد نداریم در این نوشته به آن بپردازیم. فعلاً تنها به این نکته اشاره می‌کنیم که برخی شیءهای داخلی در مرورگر وجود دارند که امکان انجام کارهای بسیار مفیدی را به ما می‌دهند.

در این مورد خاص ما ابتدا یک ثابت guessField ایجاد کرده‌ایم که ارجاعی به یک ورودی متن از فیلد مربوطه در HTML خود نگهداری می‌کند. خط زیر را می‌توانید در نزدیکی ابتدای کد جاوا اسکریپت ببینید:

const guessField = document.querySelector('.guessField');

برای دریافت این ارجاع، ما از متد ()querySelector برای شیء document استفاده می‌کنیم. ()querySelector یک بخش از اطلاعات را دریافت می‌کند که یک سلکتور CSS است که عناصری را که می‌خواهیم مورد ارجاع قرار دهیم انتخاب می‌کند.

از آنجا که guessField در حال حاضر شامل ارجاعی به یک عنصر <input > است هم اکنون به تعدادی از مشخصات (به طور مقدماتی متغیرهای ذخیره شده درون شیءها که برخی از آن‌ها نمی‌توانند تغییر یابند) و متدها (تابع‌های ذخیره شده درون شیءها) دسترسی دارد. یکی از متدهای عناصر ورودی ()focus است که از آن در خط کد زیر استفاده شده است:

guessField.focus();

متغیرهایی که شامل ارجاعی به عناصر فرم نیستند، دارای متد ()focus نیستند. برای نمونه ثابت guesses شامل ارجاعی به عنصر <p> است و متغیر guessCount شامل یک عدد است.

کار کردن با شیءهای مرورگر

اینک با برخی از شیءهای موجود در مرورگر کار می‌کنیم.

• ابتدا برنامه خود را در مرورگر باز کنید.
• سپس بخش ابزار توسعه‌دهنده مرورگر را باز کنید و مطمئن شوید که برگه کنسول جاوا اسکریپت باز است.
• عبارت guessField را در کنسول مرورگر وارد کنید تا به شما نشان دهد که این متغیر شامل یک عنصر <input> است. همچنین متوجه خواهید شد که کنسول نام‌های شیءهایی که درون محیط اجرا وجود دارند را به طور خودکار تکمیل می‌کند و این‌ها شامل متغیرها نیز می‌شوند.
• اینک کد زیر را وارد کنید:

guessField.value = 'Hello';

مشخصه value نشان‌دهنده مقدار جاری وارد شده در فیلد متنی است. می‌بینید که با وارد کردن دستور فوق مقدار فیلد متنی را تغییر داده‌ایم.

• اینک guesses را وارد کرده و اینتر را بزنید. کنسول هم اکنون متغیری که شامل عنصر را نمایش خواهد داد.
• سپس کد زیر را وارد کنید:

guesses.value

در این زمان مرورگر عبارت undefined را بازمی‌گرداند، چون این پاراگراف دارای مشخصه value نیست.

• برای تغییر دادن متن درون پاراگراف باید به جای value از مشخصه textContent استفاده کنید. کد زیر را وارد کنید:

guesses.textContent = 'Where is my paragraph?';

• اکنون برای سرگرمی کد زیر را خط به خط وارد کنید:

guesses.style.backgroundColor = 'yellow';
guesses.style.fontSize = '200%';
guesses.style.padding = '10px';
guesses.style.boxShadow = '3px 3px 6px black';

• هر عنصر روی صفحه دارای یک مشخصه style است که خودش شامل یک شیء است که مشخصاتش در همه سبک‌های CSS درون‌خطی اعمال شده روی آن عنصر وجود دارند. این وضعیت امکان تنظیم دینامیک سبک‌های جدید CSS روی عناصر با استفاده از جاوا اسکریپت را فراهم می‌کند.

سخن پایانی

بدین ترتیب به پایان این راهنما در مورد کدنویسی عملی جاوا اسکریپت رسیده‌ایم. شما می‌توانید اینک کد نهایی را اجرا کنید و بازی را انجام دهید. اگر کد شما کار نمی‌کند، سورس کد آن را با سورس موجود در این آدرس (+) مقایسه کنید.

فیلم مجموعه آموزش جاوااسکریپت JavaScript – مقدماتی تا پیشرفته در فرادرس

کلیک کنید

اگر این مطلب برایتان مفید بوده است، آموزش‌های زیر نیز به شما پیشنهاد می‌شوند:

• مجموعه آموزش‌های برنامه‌نویسی
• آموزش جاوا اسکریپت — مجموعه مقالات جامع وبلاگ فرادرس
• مجموعه آموزش‌های طراحی و توسعه پروژه های وب
• جاوا اسکریپت چیست؟ — به زبان ساده
• 1۰ کتابخانه و فریم‌ورک جاوا اسکریپت که باید آنها را بشناسید
• بررسی اشیاء در جاوا اسکریپت

==