Random, véletlenszám generálása JavaScript-ben (JS Math.random() és Math.floor() magyarul)

Ebben a leckében a random szám generálással ismerkedünk meg JavaScript nyelven. A véletlenszám generáláshoz felhasználjuk a JavaScript Math.random() és a Math.floor() függvényét.

Ingyenes JavaScript leckék, magyarul - JavaScript bejegyzések borítóképe

Random, véletlenszám generálása JavaScript-ben (JS Math.random() és Math.floor() magyarul)

Vannak olyan helyzetek a programozás során, amikor arra kényszerülünk, hogy elő kell állítanunk egy random, véletlenszerű számot, alapvetően úgy gondolnánk, hogy ez a világon a legegyszerűbb dolog, de ha kicsit jobban mögé nézünk a dolognak, akkor láthatjuk, hogy van pár olyan dolog, amivel nagyon figyelmesnek kell lennünk.

Mikor lehet szükségünk véletlenszerű (random) számokra?

Random generált számokra rengeteg esetben szükségünk lehet, és nem csak a legáltalánosabban gondolt helyzetekben, amikor például annyi a célunk vele, hogy generáljunk egy random számot, amit majd aztán kiíratunk.

Rengeteg helyzetben fel lehet használni a random számokat, a teljesség igénye nélkül nézzünk meg pár esetet:

  • felhasználhatjuk játékok során, például ki kell találni, hogy mire “gondol” a gép
  • kisorsolhatjuk vele, hogy ki kezdje a játékot
  • szerencsejátékok során is felhasználhatjuk
  • nyertest sorsolhatunk vele
  • easter-egg-eket készíthetünk vele, hogy minden x-edik látogatónak legyen valami meglepetés

Math.random() magyarul

A Math.random() egy véletlengenerált számmal tér vissza 0 és 1 között, melyből a 0 zárt intervallum, azaz tartalmazhatja a generált szám, míg az 1 nyitott, így azt nem tartalmazhatja a véletlenszám. Azaz a kapott érték mindenképp 1 alatti lesz.

Math.random() szintaxis:

Math.random();
Code language: JavaScript (javascript)

Nem kell megadnunk semmilyen intervallumot, hiszen a JavaScript véletlenszerűen generál egy értéket 0 és 1 között.

Példa:

JavaScript + HTML kód

Random generált szám: <p id="szoveg"></p>
<button onclick="document.getElementById('szoveg').innerHTML = Math.random();">Random szám generálása</button>
Code language: HTML, XML (xml)

Eredmény

Random generált szám:


>> Próbáld ki ezt a kódot az online weboldal szerkesztőnkben. <<

1-nél nagyobb számok generálása

Elsőre sokkoló lehet a pánik, hogy: ,,na de akkor mégis hogyan fogok 1-nél nagyobb számokat generálni?”. De nem kell megijedni, ehhez a jóöreg matematikát kell segítségül hívnunk.

Példa:

JavaScript + HTML kód

1-nél nagyobb random generált szám: <p id="szoveg"></p>
<button onclick="document.getElementById('szoveg').innerHTML = Math.random()*10;">1-nél nagyobb random szám generálása</button>
Code language: HTML, XML (xml)

Eredmény

1-nél nagyobb random generált szám:


>> Próbáld ki ezt a kódot az online weboldal szerkesztőnkben. <<

Ha [0;9[ között szeretnénk számokat generálni, akkor elég a Math.random() függvényünket felszorozni tízzel.

Példa:

JavaScript + HTML kód

1-nél nagyobb random generált szám: <p id="szoveg"></p>
<button onclick="document.getElementById('szoveg').innerHTML = Math.random()*10;">1-nél nagyobb random szám generálása</button>
Code language: HTML, XML (xml)

Eredmény

1-nél nagyobb random generált szám:


>> Próbáld ki ezt a kódot az online weboldal szerkesztőnkben. <<

Ha [0;99[ között szeretnénk számokat generálni, akkor elég a Math.random() függvényünket felszorozni százzal.

Ha 10-el szorzunk, akkor a generált szám maximum értéke 9 lehet, ha 100-al szorzunk, akkor 99, szóval könnyen beláthatjuk, hogy a maximum érték a szorzóként használt számnál 1-el kisebb lesz. Azaz, ha egy 0-tól x-ig terjedő számot szeretnénk kapni, akkor annyi a dolgunk, hogy x+1-el szorozzuk meg a Math.random() függvényét.

Math.floor() magyarul

Ha nem tetszenek a tört számok, akkor sem kell megijedni, csak segítségül kell hívnunk a Math.floor() függvényt, amely minden esetben lefelé fogja kerekíteni a számot, hogy egy egész számot kapjunk.

Math.random() szintaxis:

Math.floor(ÉRTÉK);
Code language: JavaScript (javascript)

Mivel mi egy random szám értékét szeretnénk kerekíteni, így az “ÉRTÉK” helyére a Math.random() függvény fog menni.

Példa:

JavaScript + HTML kód

Kerekített szám generálása: <p id="szoveg"></p>
<button onclick="document.getElementById('szoveg').innerHTML = Math.floor(Math.random()*10);">Kerekített random szám generálása</button>
Code language: HTML, XML (xml)

Eredmény

Kerekített szám generálása:


>> Próbáld ki ezt a kódot az online weboldal szerkesztőnkben. <<

A random számot megszoroztuk tízzel, majd azután kerekítettünk, nagyon fontos a sorrend, mert ha először kerekítünk és utána szorzunk, akkor mindenesetben 0-át fogunk eredményül kapni.

Számok generálása tetszőleges intervallumon

Ez sem lehetetlen feladat, de ehhez is szükségünk lesz egy kis matematikára. Mindössze annyit kell tennünk, hogy el kell tolnunk az alap intervallumot, annyival, ahonnan szeretnénk, hogy induljon az intervallumunk.

Példa:

JavaScript + HTML kód

Szám generálása: <p id="szoveg"></p>
<button onclick="document.getElementById('szoveg').innerHTML = Math.floor(Math.random()*100)+100;">Random szám generálása</button>
Code language: HTML, XML (xml)

Eredmény

Szám generálása:


>> Próbáld ki ezt a kódot az online weboldal szerkesztőnkben. <<

Alapvetően 0-tól 99-ig menne az intervallum, de mivel eltoltam 100-al, így 100-tól megy 199-ig. Így már van egy tetszőleges intervallumunk, amiről értékeket generálhatunk.

Random szám generálása intervallum megadásával

Alább található egy JavaScript-ben megírt randomszám generáló függvény, melynek két paramétere van, az egyik a minimum érték, a másik pedig a maximum érték. A két megadott érték is generálódhat a függvény által, azaz az intervallum zárt lesz.

JavaScript + HTML kód

<script>
  function random(min, max) {
     return Math.floor(Math.random() * (max - min + 1) ) + min;
}
</script>

Szám generálása: <p id="szoveg"></p>
<button onclick="document.getElementById('szoveg').innerHTML = random(30,60)">Random szám generálása</button>
Code language: HTML, XML (xml)

Eredmény

Szám generálása:


>> Próbáld ki ezt a kódot az online weboldal szerkesztőnkben. <<

A példánkban a két bemeneti érték (paraméter) a 30 és a 60, így a minimális értéke a generált számnak a 30 lehet, míg a maximális a 60, illetve random generálódhatnak még a két érték között lévő egész számok is.

Ha hasznos volt számodra, akkor kérlek oszd meg másokkal is, hogy ezzel támogass minket!