Náhodný obrázok na webovej stránke

8. júla 2007

Kamarát si vylepšoval webovú stránku a opýtal sa ma: Ako urobiť, aby sa na stránke ukazoval náhodný obrázok?

Možností je viacero. Prezeranie webových stránok funguje približne takto: Webový prezerač (klient) si vypýta stránku na danej adrese od webového servera. Webový server môže mať túto stránku uloženú na disku; vtedy ju načíta a pošle. Alebo môže mať na disku uložený program, ktorý vytvára text stránky; vtedy spustí program, a vytvorený text pošle. Klient potom prijatý text zobrazí používateľovi na obrazovke.

Sú teda v zásade dve miesta, na ktorých môžeme do textu stránky vložiť náhodný obrázok: buď na serveri počas vytvárania stránky, alebo u klienta po jej načítaní. To prvé sa nazýva "skriptovanie na strane servera" a to druhé "skriptovanie na strane klienta".

Programy na strane servera vyžadujú, aby bol na serveri inštalovaný programovací jazyk ako napríklad Ruby, Perl, PHP, alebo JSP. Nie každý webový poskytovateľ podporuje tieto jazyky. Aj keď si takú stránku chcem spustiť na domácom počítači, musím mať inštalovaný webový server, napríklad Apache. Toto riešenie má teda určité nároky na server, ale funguje s každým webovým klientom, čiže zobrazí sa správne každému používateľovi.

Programy na strane klienta sa píšu dovnútra webovej stránky, zvyčajne v programovacom jazyku JavaScript. Fungujú na hocijakom serveri, a aj na domácom počítači ich stačí spustiť vo webovom prezerači. Používateľovi sa však zobrazia správne iba ak jeho klient podporuje JavaScript. (Niektorí používatelia si JavaScript úmyselne vypínajú, aby sa im nezobrazovali rušivé reklamy.) Na stránke je možné zadať alternatívny obsah, ktorý sa zobrazí vtedy, keď JavaScript nie je k dispozícii.

Kamarát má webovú stránku na Google Pages, kde nemôže používať programovacie jazyky na strane servera. Preto použijeme program na strane klienta, čiže JavaScript. Aj keď to niektorým používateľom nebude fungovať. Stránka bude vyzerať približne takto:

<html>
<head>
<title>Stránka s náhodným obrázkom</title>
</head>
<body>

<h1>Nadpis</h1>

<p><script language="JavaScript"><!--

var obrazky = ['prvy.png', 'druhy.png', 'treti.png'];

var obrazok = obrazky[Math.floor(Math.random() * obrazky.length)];

document.write('<img src="' + obrazok + '"/>');

// --></script><noscript><img src="standardny.png"/></noscript></p>

</body>
</html>

To, čo sa nachádza medzi značkami <script> a </script> je program v jazyku JavaScript; to ostatné naokolo je obyčajný kód HTML. Vo vnútri týchto značiek sú komentáre , aby staršie prezerače, ktoré nepoznajú JavaScript, tento program preskočili (namiesto toho aby napríklad jeho kód vypísali na obrazovku). Časť stránky medzi značkami <noscript> a </noscript> sa zase vypisuje iba tomu používateľovi, ktorý nemá zapnutý JavaScript. Takému používateľovi teda zobrazíme obrázok "standardny.png".

Slovom "var" označujeme definíciu premennej. (Podobne ako napríklad v programovacom jazyku Pascal. Na rozdiel od Pascalu však neurčujeme typ premennej; v JavaScripte možno do hociktorej premennej priradiť hocičo.) Do premennej "obrazky" priradíme pole reťazcov -- adresy jednotlivých obrázkov. Do premennej "obrazok" priradíme náhodne vybranú adresu z tohoto poľa.

Vlastnosť "obrazky.length" vráti počet prvkov pole "obrazky", čiže v danom prípade číslo 3. Funkcia "Math.random" vráti náhodné číslo z intervalu 0 až 1 (náhodné číslo bude vždy menšie ako 1). Po vynásobení tohoto náhodného čísla tromi dostaneme teda náhodné číslo od 0 do 3 (ale nikdy nie 3). Funkcia "Math.floor" zaokrúhli toto číslo nadol; výsledkom je teda celé číslo 0, 1, alebo 2, čo sú všetky možné indexy do poľa "obrázky". Do premennej "obrazok" sa teda priradí náhodný reťazec z poľa "obrázky".

Funkcia "document.write" doplní do tela stránky (tam, kde sa nachádza práve vykonávaný skript) ďalší kód HTML. Ten sa poskladá tak, že sa do značky <img> doplní názov náhodne vybraného obrázku. Všimnite si dva rôzne druhy úvodzoviek; jedny ohraničujú reťazec v jazyku JavaScript, druhé sú súčasťou vytvoreného kódu HTML a ohraničujú hodnotu atribútu "src"; v oboch jazykoch možno použiť oba druhy úvodzoviek.

A to je všetko.

Odporúčané linky:

JavaScript syntax (Wikipedia): prehľadná syntax jazyka JavaScript; po anglicky
DevGuru JavaScript Index: zoznam objektov a funkcií jazyka JavaScript vo webovom prezerači; po anglicky