Hazarda bildo en retpaĝo

8-a julio 2007

Mia amiko plibonigadis sian retpaĝon kaj demandis min: Kiel bildigi en la paĝo hazardan bildon?

Ekzistas kelkaj eblecoj. La retumado funkcias proksimume tiel ĉi: Retumilo (kliento) petas la paĝon je iu adreso de la reta servilo. La reta servilo povas havi tiun ĉi paĝon konservite sur la fiksita disko; tiam ĝi ŝargas la paĝon kaj sendas ĝin. Aŭ ĝi povas havi sur disko la programon por krei la tekston de la paĝon; tiam ĝi ekigas la programon kaj sendas la kreitan tekston. La kliento poste la ricevitan tekston montras al la uzanto sur la ekrano.

Estas do esence du lokoj kie oni povas enigi la hazardan bildon en la tekston de la paĝo: aŭ ĉe la servilo dum kreado de la paĝo, aŭ ĉe la kliento post ĝia ricevo. La unua nomiĝas "servil-flanka skriptado" kaj la dua nomiĝas "klient-flanka skriptado".

Servil-flankaj programoj bezonas en la servilo instalitan programad-lingvon, ekzemple na Ruby, Perl, PHP, aŭ JSP. Ne ĉiu ret-provizanto subtenas tiujn lingvojn. Ankaŭ por bildigi tian paĝon en hejma komputilo ni bezonas retan servilon, ekzemple na Apache. Tiu ĉi solvo do postulas ion de la servilo, sed funkcias kun ĉiu reta kliento, do bildigas ĝuste al ĉiu vizitanto.

Klient-flankaj programoj estas skribitaj ene de la ret-paĝo, kutime uzante la programad-lingvon JavaScript. Ili funkcias en ajna servilo, kaj en la hejma komputilo sufiĉas ekigi ilin en la retumilo. Sed ili bildigas ĝuste al la uzanto, nur se ŝ/lia kliento subtenas na JavaScript. (Kelkaj uzantoj intence malŝaltas na JavaScript, por ke eviti ĝenantajn reklamojn.) En la paĝo oni povas specifi alternativan enhavon por bildigi kiam JavaScript ne haveblas.

Mia amiko havas ret-paĝon ĉe Google Pages, kie oni ne povas uzi servil-flankajn program-lingvojn. Tial ni uzos la klient-flankan programon en JavaScript. Kvankam por kelkaj vizitantoj ĝi ne funkcios ĝuste. La paĝo aspektos proksimume tiel ĉi:

<html>
<head>
<title>Paĝo kun hazarda bildo</title>
</head>
<body>

<h1>Titolo</h1>

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

var bildoj = ['unua.png', 'dua.png', 'tria.png'];

var bildo = bildoj[Math.floor(Math.random() * bildoj.length)];

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

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

</body>
</html>

Inter la markoj <script> kaj </script> estas programo en lingvo JavaScript; la restaĵo estas kutima HTML kodo. Ene tiuj ĉi markoj estas komentoj , por ke malpli novaj retumiloj, ne sciante na JavaScript, preteriru la programon (anstataŭ ekzemple bildigi ĝian kodon sur la ekrano). La parto de la paĝo inter markoj <noscript> kaj </noscript> estos bildigita nur al vizitanto ne havanta na JavaScript. Al tiu uzanto ni bildigos la bildon "standarda.png".

Vorto "var" signifas difinon de la variablo. (Simile ol ekzemple en programad-lingvo Pascal. Malsame ol Pascal ni ne specifas la datum-tipon de la variablo; en JavaScript ajna variablo povas enhavi ajnan valoron.) Al la variablo "bildoj" ni havigas la tabelon de ĉenoj -- adresoj de unuopaj bildoj. Al al variablo "bildo" ni havigas la lotecan adreson de tiu ĉi tabelo.

Eco "bildoj.length" donas la nombron de eroj en la tabelo "bijdoj", do ĉi-kaze la numeron 3. Funkcio "Math.random" donas aleatoran numeron el intervalo 0 ĝis 1 (la aleatora numero estos ĉiam malpli granda ol 1). Post multobligado de tiu ĉi aleatora numero per tri ni do ricevos aleatoran numeron ekde 0 ĝis 3 (sed neniam 3). Funkcio "Math.floor" stumpigas la numeron; la rezulto do estas entjero 0, 1, aŭ 2, ĉiuj eblaj indicoj en la tabelon "bildoj". Al la variablo "bildo" do haviĝos aleatora ĉeno el la tabelo "bildoj".

Funkcio "document.write" enigos en la paĝon (tien, kie tiu skripto troviĝas) pluan HTML kodon. Ni konstruos ĝin aldonante en la markon <img> la nomon de la hazarda bildo. Bonvolu rimarki du specojn de citiloj; la unuaj ĉirkaŭas la ĉenon en lingvo JavaScript, la duaj estas parto de la kreita HTML kodo kaj ĉirkaŭas la valoron de la eco "src"; en ambaŭ lingvoj oni povas uzi ambaŭ specojn de citiloj.

Kaj tio estas ĉio.

Rekomenditaj ligiloj:

JavaScript syntax (Wikipedia): klara sintakso de la lingo JavaScript; angle
DevGuru JavaScript Index: listo de objektoj kaj funkcioj de la lingvo JavaScript en retumilo; angle