Pildid

Tekstis olevaid pilte saab javaskripti abil vahetada. Lehekülje loomisel luuakse seal paiknevatest piltidest massiiv, nii et document.images[0] tähistab esimest pilti, document.images[1] teist jne. Klassil Image on mitu atribuuti. Mõnda neist (nagu kõrgus ja laius) saab vaid lugeda, kuid parameetrit src, mis sisaldab pildi URLi, saab vajadusel muuta. Niimoodi pilte vahetades saab luua illusiooni liikumisest, samuti, nagu järgnevas näites näha, võib vahetada pilti siis, kui temale hiirega peale minna. Hiire liikumisele on võimeline reageerima viide <a href= …>, kui hiir satub viitele, näidatakse pilti failist pilt2.gif, hiire väljumisel failist pilt1.gif. Pildi juurde on border=0 kirjutatud seepärast, et et pildi ümber sinist ranti ei tekiks. Kuna tegemist on viite alla kuuluva teksti osaga, siis tekiks tema ümber muidu joon, et oleks näha, et sinna vajutades kuhugi jõuda saab. Kuna siin näiteks ei soovi ma hiirega viitele vajutamisele lehekülge vahetada, siis on viiteks pandud selle sama faili aadress ehk Pilt1.html.

<html><head><title>Pildi muutmine</title></head>

<body>

<a href="Pilt1.html"

onmouseover="document.images[0].src='pilt2.gif';"

onmouseout="document.images[0].src='pilt1.gif';">

</body>

</html>

Pilte saab ka automaatselt vahetuma panna. Järgnevas dokumendis on kaks pilti ning funktsioon vaheta vahetab nad omavahel. Muutuja olek näitab kumba pidi pildid on ning igal korral muudetakse selle muutuja väärtus. Käsklus window.setTimeout("vaheta()", 500); ütleb, et 500 millisekundi pärast kutsutakse välja meetod vaheta(). Siin juhul tähendab see, et sama funktsioon palub objektil window ennast uuesti poole sekundi pärast välja kutsuda ning tulemuseks on, et meetod kutsub end pidevalt välja ning iga poole sekundi tagant vahetatakse pildid.

<html><head><title>Pildi muutmine</title>

var olek=0;

function vaheta(){

if(olek==0){

document.images[0].src='pilt1.gif';

document.images[1].src='pilt2.gif';

} else{

document.images[0].src='pilt2.gif';

document.images[1].src='pilt1.gif';

}

if(olek==0) olek=1; else olek=0;

window.setTimeout("vaheta()", 500);

}

</script>

</head>

<img src=pilt1.gif>   Tervitus!   <img src=pilt2.gif>

</h1></center>

</body>

</html>

Kui pilte soovitakse järjest panna enam ehk näidatav kino on pikem, sel juhul võib pildid massiivi paigutada ning massiivi elementidena on neid kergem soovitud järjestuses kätte saada. Massiivi elemendid võib kohe loomisel ette anda, sellisel juhul paigutatakse need sinna üksteise järele, nii et esimese indeksiks saab 0. Järgnev programm on nii koostatud, et korduvasse seeriasse piltide lisamiseks või eemaldamiseks tuleb lihtsalt sobivad pildid massiivi alles jätta ning neid seal siis järjekorras näidataksegi.

Muutuja nr hoiab eneses pildi numbrit, mida parajasti näidatakse. Funktsiooni "edasi" iga väljakutsumise korral leitakse uus näidatava pildi järjekorranumber ning seejärel kuvatakse vastav pilt ekraanile.

document.pilt1.src=pildid[nr];

tulemusena määratakse pilt1-ks nimetatud pildi andmete lugemise failiks massiivis pildid kohal nr leiduv failinimi. Esimestel kordadel, kui vastav fail pole veel võrku pidi kohale loetud, võib pildi näitamine veidi aega võtta, kuni andmed pärale jõuavad. Järgmise ringi puhul aga on andmed juba kohalikus arvutis ning pildi näitamine ei tohiks kuigi palju aega võtta.

Pildi järjekorranumbrit arvutatakse nii, et numbrit suurendatakse iga sammu juures ühe võrra. Kui ollakse viimasest pildist mööda läinud, siis alustatakse taas algusest, et pildist 0. Tingimuse (++nr>=pildid.length) juures suurendatakse kõigepealt muutuja nr väärtust ühe võrra ning alles siis hakatase väärtusi võrdlema. ++ muutuja ees tähendab, et väärtust suurendatakse enne, kui tema väärtusega midagi peale hakatakse. Oleks ++ taga, sel juhul kõigepealt kasutataks muutuja väärtust arvutustes ning alles pärast muu tegevuse lõppu suurendatakse seda. Massiivi pikkus pildid.length näitab elementide arvu selles. Kui praeguses näites on massiivis pildid neli elementi, siis pildid.length väärtuseks on neli, olgugi, et esimese elemendi järjekorranumber on null ning viimase oma kolm.

Käsklus setInterval('edasi();', 500); dokumendi laadimise juures tähendab, et pärast lehe saabumist hakatakse alamprogrammi "edasi" välja kutsuma iga viiesaja millisekundi tagant. Nõndamoodi vahetubki iga natukese aja tagant pilt ning meile tundub, nagu meie silme ees toimuks väikene etendus.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<html><head><title>Piltide vahetamine</title>

var pildid=new Array("sinine.gif", "punane.gif", "kollane.gif", "roheline.gif");

var nr=0;

function edasi(){

if(++nr>=pildid.length)nr=0;

document.pilt1.src=pildid[nr];

}

</script>

</head>

<h2>Piltide vahetamine</h2>

</center>

</body></html>

Ühe koha peal pilte vahetades saab oma silmade ette väiksese filmilõigu. Veidi juhtkäske rakendades või juhuarve kasutades võib seda filmilõiku ka veidi muuta, luues pildid mitmest võimalikust liikumisharust ning neid mingi omale või arvutile teada oleva algoritmi abil järjestades. Nii võib luua vaikselt hõõguvast lõkkest, mis iga natukese, kuid ettearvamatu aja tagant korraks heledamaks lahvatab. Samuti võib kujutada teel jalutajat, kellele augud, palgid ja muud konarused mõne aja tagant ette satuvad ning kelle tee näib kogu aja muutuvat. Veel mõtet edasi arendades võib tee tasapisi seda siledamaks minna, kui kaugele kasutaja muude tegevustega, näiteks lehe peal paiknevate ülesannete lahendamisega jõudnud on.

Lehe peal paiknevaid pilte võib mitu olla. Sel juhul muutub vahetamine paindlikumaks, korraga saab muuta väiksemat ala, ilma suuremal pinnal muutusi tegemata. Kui eelmises näites peab iga juhu tarvis uus pilt olema, siis väikeste piltide puhul võib paari pilti kombineerides juba soovitud tulemuse saada. Kõik mustvalged kujutised on põhimõtteliselt võimalik ekraanile manada kahe pildi abil – üks must ja teine valge. Ning kummagi suuruseks piisab ühest punktist, pildile ette antavate laiuse ja kõrgusega saab neid lihtsalt sobivasse suurusesse venitada. Samuti kui soovin kedagi või midagi ekraanil liikuma panna, siis esimesel juhul peaks iga asukoha tarvis eri pilt olema, mitme pildi puhul aga võib seda lihtsalt parajas kohas välja näidata.

Alljärgnevas näites liigub roheline silm kollastest ristkülikutest koosneva ringi peal. Jõudnud oma liikumisega ühte serva, põrkab ta sealt tagasi. Programm on taas koostatud nii, et alguses paiknevate parameetrite (pildifailide nimed, piltide laius, kõrgus, arv) järgi määratuna toimib kogu ülejäänud osa nii, et soovitava andmete muutmise puhul piisab muutusest vaid alguses, ka ülejäänud koodi mõistmata peaks tulemus vastama kasutaja ootustele. Sarnaselt on maailmas võrku üles pandud hulgaliselt näiteid, kust enesele lõike kopeerides võib päris ilusaid ja kasulikke lehti kokku panna, ilma, et programmeerimise poolest peaks oluliselt enam muret tundma kui hoolitsema, et ühendatud lõigud omavahel hästi läbi saaksid ning üksteisega tülli ei läheks.

Muutuja nr näitab teistest erineva pildi järjekorranumbrit. Iga järgmise pildivahetuse juures muudetakse seda numbrit niipalju, kui muutuja "samm" ette näeb. Nii on teisevärviline pilt igal korral uue koha peal ning peakski tekkima illusioon liikumisest. Servast tagasipöördumine on kirjutatud veidi pikemalt kui hädapärast tarvis arvestades, et liikumine toimiks ka ühest suuremate sammude korral. Enne iga joonistamist ja astumist kontrollitakse, et ega eraldi näidatava pildi järjekorranumber servale liiga lähedale jõudnud pole. Kui selgub, et järgneva astutava sammuga jõutaks lubatud piiridest välja, siis keeratakse sammu suund selliseks, et astutaks servast eemale. Absoluutväärtus on pööramisel arvesse võetud seetõttu, et pikemate sammude, sammu pikkuse või asukoha mujalt määratava muutumise puhul võib tekkida olukord, kus asukoht on juba enne suuna arvutamist lubatud piiridest väljas, suund aga juba õigele poole keeratud. Kui tahta veidi koodi lihtsustada, siis siin näiteks võiks absoluutväärtuse asendada lihtsalt miinusmärgiga, ehk põrgates vastu serva keeratakse suund vastupidiseks. Keerukamatel juhtudel võib aga selline lihtsustus maksta kätte avastusega, et liikuja jääbki lubatu ning lubatava piiri peale põrkama.

Igal korral enne uue asukoha välja arvutamist pannakse endise erivärvilise pildi asemele tagasi tavapilt, et me ekraani peal paiknev liikuja ikka üksikuks jääks ning soovimatult paljunema ei hakkaks. Loodus tühja kohta ei salli ning kui jätaksime rohelise eelmise asukoha peale kollase kasti joonistamata, siis jääks sinna paratamatult roheline ning uude kohta tekiks ikkagi sinna määratud roheline.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<html><head><title>Liikuva silmaga joon</title>

var tavapilt="kollane.gif";

var eripilt="roheline.gif";

var piltidearv=20, pildilaius=15, pildikorgus=8;

var nr=0, samm=1;

function edasi(){

if(nr+samm>=piltidearv)samm=-Math.abs(samm);

if(nr+samm<0)samm=Math.abs(samm);

document.images[nr].src=tavapilt;

nr=nr+samm;

document.images[nr].src=eripilt;

}

</script>

</head>

<h2>Liikuva silmaga joon</h2>

for(var i=0; i<piltidearv; i++){

document.write("<img src="+tavapilt+" height="+pildikorgus+" width="+pildilaius+">");

}

</script>

</center>

</body></html>

Kui soovida korraga liikuma panna mitu täpikest, sellisel juhul tuleks igaühe puhul meelde jätta asukoht, kus see parajasti paikneb, enne uut joonistusringi asendada kõik kohad taustapiltidega ning seejärel joonistada iga uus ruuduke temale määratud kohta. Kuhugile pole kirjutatud, et pildid peavad asetsema ühes reas. Neid võib rahus paigutada tabelisse või üksteise alla, kuid lihtsalt tuleb meeles pidada või välja arvutada, millises kohas parajasti millise numbriga pilt asub.

Hiirevajutus pildile

Pildil enesel standardi järele hiirevajutamise peale reageerimise võimalust pole. Küll aga lisaks selline vahend lehe paindlikkust ning väikeste kavaluste abil saab sarnase olukorra lausa mitmel moel korraldada. Kui pilt muuta viiteks, siis õnnestub selle kaudu nii avada teisi lehti, kui muudki moodi kasutajat rõõmustada. Kaarti kasutades pildi piirkonnad tundlikuks muutes võib lausa iga pildi piirkonna peale oma tegevuse siduda.

Ankru juurde kuulvad lisaks enimkasutatud lehe avamise võimalusele (href=... ) veel alamprogrammide käivitamise kohad nii hiire sisenemise, hiire väljumise kui vajutuse tarvis, vastavalt siis onMouseOver, onMouseOut ja onClick. Viimasel juhul kaasneb harilikult ka viite avamine, kuid kui käskluse lõpul teatada "return false;", siis jäetakse teisele lehele suundumine katki ning täidetakse käsklused, mis vajutamise juurde kuuluvad. Nagu all näha, vahetatakse kollane pilt hiirevajutuse puhul rohelise vastu.

<html><head><title>Vajutamisel muutuv pilt</title></head>

<body>

<a href='' onClick='document.pilt1.src="roheline.gif";return false;'><img

src="kollane.gif" height=20 width=20 name="pilt1" border=0></a>

</body></html>

Järgnevalt veidi pikem näide, mida soovi korral annab kasutada nii õpetava kaardi, hiirevajutusi nõudva mängu kui lihtsalt rõõmsa ekraaniilustuse põhjana. Kollase tausta peal muutub pilt, millesse siseneti roheliseks ning millele vajutati punaseks. Pildilt lahkudes pannakse vana kollane taust taas tagasi. Kui siit tuttavaid vajutuse püüdmisi edasi arendada, siis ei peaks kuigi raske olema kokku panna mäng, kus kasutaja peab ümberpööratud kaartide seast sobivaid paare otsima.

Alamprogramm varvivahetus paigutab etteantud rea ja veeruga pildile kolmanda parameetrina ette antud failinimes paikneva sisu. Praegu kasutatakse sama alamprogrammi nii hiirevajutuse kui sisenemiste-väljumiste tarvis, kuid see on tehtud vaid lühiduse mõttes ning ei pruugi muudes rakendustes sugugi nii olla. Jällegi on püütud koodi muudetavad osad paigutada etteotsa ning osalt seetõttu on tagumine pool võibolla suhteliselt lühikeseks ja kirjuks muutunud, kuid loodetavasti on sellest mõningase mõtlemise tulemusena siiski võimalik aru saada. Pilte kirjutatakse järjest ilma tühikuteta üksteise järgi, et nad ekraanil moodustaksid ühtlase välja. Iga rea lõppu tuleb reavahetus, et järgmised pildid taas rea algusest peale hakkaksid. Nii sündmuste onClick, onMouseOver kui onMouseOut puhul kutsutakse välja funktsioon varvivahetus, igal korral aga antakse sinna ette eri värv. Rea ja veeru järgi arvutatakse tagasi pildi järjekorranumber ning sinna sisse määratud värv pannaksegi. Read ja veerud algavad nullist, iga järgneva rea puhul lisatakse numbrile ette rida*veergudearv, see tähendab, et kui tegemist on näiteks pinnaga, kus viis pilti reas, siis esimese rea esimene element oleks number 0, järgmise puhul aga juba viie võrra suurem (ehk 5). Kirjutatav rida

" onClick=\"return varvivahetus("+rida+", "+veerg+", '"+pilt1+"');\""

oleks lahtiseletatult järgmine. Üldiselt paigutatakse jutumärkide vahele välja kirjutatav tekst, kuid kui soovitakse teksti enese sees jutumärki väljastada, tuleb see esitada kujul \" , kus langjoon jutumärgi ees varjestab selle ning laseb rahumeeli tavalise jutumärgina lehele trükkida. Üks konkreetne rida võiks sellisel puhul tulla näiteks

onClick="return varvivahetus(3, 2, 'punane.gif');"

Kuigi võib eraldajana kasutada nii ühe- (') kui kahekordseid (") jutumärke, et pääsenud siin mitte langjoone kasutamisest, sest kui on vaja eristada nii programmi poolt väljastatavaid käske, onClick-i puhul käivitatavat funktsiooni ning failinime, mida kannab muutuja pilt1, siis kolme sorti jutumärke lihtsalt javaskriptis pole.

<html><head><title>Vajutamisel muutuv pilt</title>

var ridadearv=10, veergudearv=10;

var pilt1="punane.gif", pilt2="kollane.gif", pilt3="roheline.gif";

function varvivahetus(rida, veerg, sisu){

document.images[rida*veergudearv+veerg].src=sisu;

return false;

}

</script>

</head>

<body>

for(var rida=0; rida<ridadearv; rida++){

for(var veerg=0; veerg<veergudearv; veerg++){

document.write("<a href=''"+

" onClick=\"return varvivahetus("+rida+", "+veerg+", '"+pilt1+"');\""+

" onMouseOver=\"return varvivahetus("+rida+", "+veerg+", '"+pilt3+"');\""+

" onMouseOut=\"return varvivahetus("+rida+", "+veerg+", '"+pilt2+"');\""+

"><img src="+pilt2+" height=20, width=20 border=0></a>");

}

document.write("<br>");

}

</script>

</body></html>

Hiirevajutuse koordinaadid

Nagu mitmed muud kujundusega seotud vahendid, nii ka hiire asukoha määramine on seiluriti erinev. Kui soovitakse üheaegselt toime tulla mitme brauseri keskkonnas, siis tuleb tähelepanu pöörata, millisel juhul kuidas andmeid püüda. Järgnev näide töötab vaid Netscapes.

Kõigepealt öeldakse brauserile, milliste teadetega üldse tegelda tuleb. Kui kasutaja vastavaid andmeid ei vaja, siis pole mõistlik ka seiluri energiat nende püüdmisele raisata. Edasi määratakse alamprogramm, mis vastavale sündmusele reageerimisega tegelema peab. Netscapes on korraldatud nii, et alamprogrammile antakse parameetrina objekt, kelle parameetrite kaudu saab teada sündmuse toimumise asukoha.

<html><head><title>Hiire koordinaadid</title>

document.captureEvents(Event.MOUSEDOWN);

document.onmousedown=naitaKoordinaate;

function naitaKoordinaate(syndmus){

alert("Hiir vajutati kohal "+syndmus.pageX+

", "+syndmus.pageY);

}

</script>

</head>

<body>

Head vajutamist!

</body>

</html>

Kui soovida mitme seiluriga hakkama saada, siis üheks võimaluseks on kindlaks teha, millise brauseriga parajasti tegemist on. Siin näites on reageerimise eeltingimuseks seatud Javascript1.2 toetus ning edaspidi käitutakse Internet Exploreriga ühtviisi, ülejäänutega teisiti. Objekti window.navigator parameeter userAgent näitab brauseri tüüpi ning kui selles leidub MSIE, siis tõenäoliselt on tegemist Microsofti soovide järgi tegutseva tootega. Seal saadakse andmed hiire asukoha kohta objektist event ning sündmuste püüdmise registreerimist pole vaja.

<html><head><title>Hiire koordinaadid liikumisel</title>

var kasIE=false;

if(window.navigator.userAgent.indexOf("MSIE")>=0) kasIE=true;

if(kasIE){

document.onmousemove=hiireliikumineIE;

} else {

document.captureEvents(Event.MOUSEMOVE);

document.onmousemove=hiireliikumine;

}

function hiireliikumineIE(){

document.tekstikastivorm.koordinaadid.value=

event.x+", "+event.y;

}

function hiireliikumine(syndmus){

document.tekstikastivorm.koordinaadid.value=

syndmus.pageX+", "+syndmus.pageY;

}

</script>

</head>

<body>

Head liigutamist!

</form>

</body>

</html>

Muusika

Lihtsalt loo saab mängima panna, kui öelda, millisest failist selle tarvis andmed võtta. Ekraanile ilmub soovitud suuruses juhtpult, kus saab soovitud hetkel lugu mängida või mängimist katkestada.

<body>

</body></html>

Kui parameetrile loop anda väärtus –1, siis peaks kordusmängimine kestma igavesti. Kui kord jõutakse loo lõppu, siis alustatakse taas algusest. Hidden ütleb, et juhtpult on varjatud ning kasutajal ei õnnestu mängivast loost muidu lahti saada, kui sellelt lehelt lihtsalt lahkuda. Kui aga lugu meeldib, siis pole tarvis sellega kiirustada.

<body>

Pala mängitakse kogu lehel olemise aja, juhtnupud peidetud

</body></html>

Programmi koha pealt tähtsamaks käsuks on võimalus javaskripti abil määrata, millal lugu alustada või lõpetada. Kui siin vaid vajutamise peale hakatakse mängima, siis võib ju päris lehel lasta soovikohaseid kõlle just siis, kui selleks õige aeg avaneb.

<body>

<form>

</form>

</body></html>