Interval.cz > Programování > JavaScript a Ajax > Využití náhody v Javacriptu ve svůj prospěch

Využití náhody v Javacriptu ve svůj prospěch

23. 11. 2000 | Jarmil Halamíček | JavaScript a Ajax | Komentáře: 0

Způsobů, jak oživit www stránky, jsou desítky, možná i stovky. Mezi nejzábavnější z nich patří nejrůznější aplikace náhodného generování obsahu stránek. V tomto článku si ukážeme jednoduchý a univerzální princip, jak přinutit "náhodu" pracovat pro nás.

V dávných dobách našeho Internetu byly náhodné prvky velice populární: z každé druhé stránky na nás jukaly náhodně generované citáty, vtipy, odkazy a další překvapení. Poté, co po programátorech převzaly štafetu tvorby stránek profesionální reklamní agentury, náhodné prvky začaly valem ustupovat. Dnes se, jak se zdá, v poněkud umírněnější formě opět vracejí. Jak tedy takový klasický náhodný prvek vypadá? Podívejte se na následující řádek:

K obědu budou

Poslední slovo uvedeného textu bylo generováno náhodně. Pokud stisknete ve svém prohlížeči tlačítko Obnovit (Reload, pro MSIE klávesa F5, pro NN kombinace Ctrl+R), velmi pravděpodobně se vám při opětovném načtení této stránky zobrazí jiné koncové slovíčko.

Princip generování tohoto náhodného textu je poměrně jednoduchý. V prvním kroku si nejprve vytvoříme pole řetězců, do kterého uložíme všechny možnosti, ze kterých budeme náhodně vybírat. Vhodné místo pro definici tohoto pole je ve skriptu v tagu HEAD. Pro náš příklad byl použit následující skript:

var Array1 = new CreateArray('brambory', 'řízky', 'ryby', 'raci');

Pole lze vytvořit a naplnit různými způsoby. V uvedeném příkladu jsem využil objekt, jednak pro jistou eleganci tohoto řešení, a ovšem také proto, abychom si užili trochu změny. Objekt vytvoříme pomocí klíčového slova "new", přičemž voláme vlastní konstruktor s názvem CreateArray, jemuž předáváme 4 parametry - řetězce. Konstruktor je napsán tak, že akceptuje libovolný počet parametrů (můžeme tedy vytvořit 3, 4 nebo 100 prvkové pole), a jeho zdrojový kód vypadá takto (konstruktor opět uvedeme v tagu HEAD):

function CreateArray(){     this.length = CreateArray.arguments.length     for (var i = 0; i < this.length; i++)     this[i + 1] = CreateArray.arguments[i] }

Poznámka: pokud si nejste příliš jisti prací s objekty, klidně vezměte tento kód "jak je napsán", a použijte jej - pro úspěšnou práci s tímto příkladem není nutné aktivně znát principy objektového programování.

Když už píšeme kód ve skriptu v tagu HEAD, zrovna si v něm nachystáme ještě jednu užitečnou funkci - jedná se o upravenou funkci random, tj. generátoru náhodných čísel:

function randNum (num) {     var rnd1 = Math.round( (num-1) * Math.random() + 1 )     return rnd1; }

Zatímco klasická funkce Math.random vrací číslo v intervalu 0..1, tato upravená funkce randNum vrací číslo v intervalu 1..num, kde num je argument na vstupu funkce. Pokud tedy zadáme jako argument této funkce velikost (dimenzi) pole, vrátí nám náhodné číslo, které můžeme přímo použít jako index k získání určitého prvku pole. Zde je tedy čtvrtá, závěrečná část kódu, kterou použijeme už přímo na místě, kde chceme generovat náhodný text:

K obědu budou <script> document.write (Array1[randNum(Array1.length)])</script>

Je to vše? Ano i ne. V úvodu článku jsem vám slíbil, že princip, který si ukážeme, bude univerzální. Podívejme se tedy na tuto univerzálnost blíže.

Kromě náhodného textu můžeme tímto způsobem generovat i náhodné prvky jiných typů, dokonce můžeme na jedné stránce použít více na sobě nezávislých náhodných prvků. Stačí nadefinovat další pole, do kterého si tentokrát uložíme třeba adresy obrázků:

var Array2 = new CreateArray('img1.gif', 'img2.gif', 'img3.gif', 'img4.gif');

a ve vhodný okamžik stačí použít toto pole v rámci tagu IMG...

<script> document.write ("<img src='"+Array2[randNum(Array2.length)]+"'>")</script>

Nakonec dostaneme následující výsledek (obrázek je opět generován náhodně, při reloadu stránky se - pravděpodobně - změní):

Na další příklady použití jistě přijdete sami, namátkou: náhodná hudba hrající v pozadí stránky, náhodný odkaz na náhodnou stránku na náhodném serveru, náhodný citát z myšlenek moudrých apod. Přeji vám příjemný den.

Starší komentáře ke článku

Pokud máte zájem o starší komentáře k tomuto článku, naleznete je zde.

---

---

Další aktuální články na interval.cz

• Rychost, rychlost, rychlost - zrychlete své stránky
• Chamurappiho Webylon: čtyři články s kritikou W3C
• Nenápadný cloud: synchronizace dat z prohlížečů
• Pozvánka: Random Hacks of Kindness 2012
• Zajímavost o češtině pro redakční systém WordPress

Tematicky související články

• JavaScriptová ruleta ve vašem prohlížeči
• Sloupcový graf pomocí JavaScriptu podruhé
• Jednoduché zadávání datumu ve formuláři
• Využití regulárních výrazů v JavaScriptu
• Navigace pomocí formulářového pole SELECT 2.

Dejte vědět i ostatním o článku

Diskuse (počet komentářů: 0)

Buďte prvním návštěvníkem, který přidá nový komentář.