آموزش تولید عدد تصادفی در جاوا اسکریپت بین حداقل و حداکثر

در این مقاله به شما چگونگی تولید عدد تصادفی در جاوا اسکریپت بین حداقل و حداکثر (شامل هر دو) را آموزش خواهم داد. توضیحات کامل ارائه شده اما دانش اولیه در مورد HTML و جاوا اسکریپت مورد نیاز است.

کدهای نهایی در CodePen زیر آمده است. پس از آن، مرحله به مرحله آن را توضیح خواهم داد.

See the Pen تولید عدد تصادفی در جاوا اسکریپت بین حداقل و حداکثر by الوند وردپرس (@alvandwp) on CodePen.

فهرست مطالب

• تولید عدد تصادفی در جاوا اسکریپت – بخش اول
• تولید عدد تصادفی در جاوا اسکریپت – بخش دوم
• عبارت سمت راست مساوی چطور عمل می‌کند؟
• نتیجه‌گیری

تولید عدد تصادفی در جاوا اسکریپت – بخش اول

ابتدا، به یک عنصر دکمه HTML نیاز داریم تا روی آن کلیک کنیم و عدد تصادفی را دریافت کنیم. من ویژگی id را با مقدار generate به آن اضافه کردم تا بتوانیم با استفاده از جاوا اسکریپت به آن قابلیت اجرایی اضافه کنیم.

این کد آن است:

<button type="button" id="generate">کلیک کنید</button>

برای پس از کلیک روی دکمه‌ی قبلی، یک عنصر پاراگراف HTML برای نمایش نتیجه تعریف کردم. یک ویژگی id با مقدار result اضافه کردم تا بتوانیم مقدار متن آن را با استفاده از جاوا اسکریپت تغییر دهیم.

کد زیر را ببینید:

<p id="result">نتیجه</p>

تولید عدد تصادفی در جاوا اسکریپت – بخش دوم

حالا در جاوا اسکریپت، یک متغیر با نام button تعریف نموده و عنصر دکمه HTML را از طریق DOM با استفاده از querySelector بازیابی کردم. حالا می‌توانیم هر قابلیتی را که می‌خواهیم به آن اضافه کنیم.

کد زیر را داریم:

const button = document.querySelector("#generate");

بعد از آن، یک متغیر با نام output تعریف کردم و عنصر پاراگراف HTML را از طریق DOM با استفاده از querySelector دریافت کردم. سپس می‌توانیم با استفاده از آن، عدد تصادفی را در خروجی نمایش دهیم.

این کد را مشاهده کنید:

const output = document.querySelector("#result");

من یک EventListener به عنصر دکمه اضافه کردم برای وقتی که روی آن کلیک می‌کنیم تا اجرا شود. در این حالت، یک تابع را اجرا می‌کند تا خروجی را محاسبه و در عنصر پاراگراف ذکر شده چاپ کند.

button.addEventListener("click", () => {
  const min = 1;
  const max = 10;
  output.innerText = Math.floor(Math.random() * (max - min + 1) + min);
});

توضیحاتی در مورد کد بالا در ادامه آمده است.

کد زیر متغیری را تعریف می‌کند که حداقل عدد مورد نظر ما (در این مثال، 1) را نشان می‌دهد:

const min = 1;

کد زیر متغیری را تعریف می‌کند که حداکثر عدد مورد نظر ما (در این مثال، 10) را نشان می‌دهد:

const max = 10;

با قطعه کد پایین، مقدار محاسبه‌شده‌ی عبارت سمت راست علامت مساوی که عددی تصادفی بین 1 تا 10 است، در متن داخلی عنصر پاراگراف قرار داده خواهد شد:

output.innerText = Math.floor(Math.random() * (max - min + 1) + min);

عبارت سمت راست مساوی چطور عمل می‌کند؟

این دفعه از توضیحات Aaron Plocharczyk در سایت StackOverflow در مورد فرمول فوق استفاده می‌کنم. متن زیر ترجمه آن است:

فرض کنید می‌خواهیم یک عدد تصادفی از 5 تا 15 (شامل هر دو عدد 5 و 15 به عنوان نتایج ممکن) داشته باشیم. خب، ما باید با Math.random() کار کنیم که فقط مقادیری از 0 تا تقریباً 0.99999999999999 تولید می‌کند. بنابراین برای کار با این مورد باید دو ترفند انجام دهیم.

ترفند شماره یک

اولین ترفند این است که تشخیص دهیم کمترین مقدار بازگشتی Math.random() برابر با 0 است و حاصل ضرب 0 در هر چیزی برابر با 0 می‌شود، بنابراین باید محدوده خود را از 0 شروع کنیم و در انتها آن را طوری تنظیم کنیم که این موضوع را در نظر بگیرد. به جای محاسبه 5 تا 15 از ابتدا، تشخیص می‌دهیم که 11 مقدار در 5 تا 15 وجود دارد (5، 6، 7، 8، 9، 10، 11، 12، 13، 14 و 15) و به همان تعداد از 0 به بالا می‌شماریم (0، 1، 2، 3، 4، 5، 6، 7، 8، 9، 10) تا از 0 تا 10 به عنوان محدوده خود استفاده کنیم.

این کاری است که بخش max - min فرمول انجام می‌دهد. این بخش، حداکثر جدید ما را برابر با 10 تعریف می‌کند. سپس، در پایان محاسبات، فقط 5 را به هر نتیجه‌ای که به دست می‌آوریم اضافه می‌کنیم تا محدوده نتیجه ممکن از 0 تا 10 به 5 تا 15 تغییر کند. این کاری است که بخش + min فرمول انجام می‌دهد.

ترفند شماره دو

ترفند دوم این است که تشخیص دهیم ضرب Math.random() در محدوده حداکثر جدید 10 ما فقط می‌تواند نتیجه‌ای به بزرگی حدود 9.999999999999 به ما بدهد، زیرا Math.random() فقط تا حدود 0.999999999999 بالا می‌رود (هرگز در واقع 1 نمی‌شود). وقتی بعد آن را با Math.floor() به یک عدد صحیح تبدیل می‌کنیم، نتیجه به 9 کاهش می‌یابد، بنابراین باید 1 را به آن اضافه کنیم تا حداکثر مقدار ممکن به جای 9، 10 شود. این کاری است که قسمت + 1 فرمول انجام می‌دهد.

نتیجه‌گیری

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