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...

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.