Viittaukset - Metodit ja ominaisuudet

JavaScript -ohjelmointikieli on tarkoitettu toimivaksi HTML-sivujen sisällä. Jotta voisimme tehdä jotain sivulla oleville elementeille esimerkiksi teksteille ja kuville, tarvitsemme viittaustavan haluamiimme sivun objekteihin ja tavan vaikuttaa niihin.

Aluksi tarvitsemme tiedon siitä, että kaikki HTML-sivun dokumentin elementit ovat objekteja, joilla on ominaisuuksia ja metodeja.

Ominaisuudet ovat nimensä mukaan objekteihin liittyviä ominaisuuksia, kuten paikka, väri, koko tai sisältö riippuen siitä, mikä objekti on kyseessä. Esimerkiksi objektin tyyliin sisältyvät ominaisuudet ovat objektin style-ominaisuuksien joukossa ja tekstikentän sisältö löydetään objektin value-arvosta, toisaalta div-objektin sisältö on haettavissa ja muutettavissa innerHTML -ominaisuuden avulla. Objektien ominaisuuksiin voidaan siis viitata ja niitä voidaan muuttaa.

Metodit ovat objekteihin valmiiksi tallennettuja ohjelmia, jotka suorittavat jonkin tehtävän. Esimerkkinä olemme tutustuneet jo HTML-sivun document-objektin erääseen metodiin document.write(), joka kirjoittaa dokumentin body-osaan tekstiä.

document.getElementById() -metodi

GetElementById on HTML-dokumentin metodi, joka etsii sivuilta objektin id-arvon avulla.

Tehdään pieni kokeilu ja sijoitetaan sivulle kaksi objektia ja nappeja. Käytetään hyväksi napin tapahtumafunktiota onClick ja viitataan haluttuun objektiin document.getElementById() -metodilla.

<div id="xxx">Jokin teksti - kenttä</div>
<input type="text" id="yyy" value="Tekstiä" />

<script Language="JavaScript">
	var tekstix = document.getElementById("xxx");
	var syote = document.getElementById("yyy");
</script>

<input type="button" value="Muuta väriä" onClick="tekstix.style.color='#ff0000';" />

<input type="button" value="Muuta tekstia" onClick="tekstix.innerHTML=syote.value;" />

Esimerkissä esitellään aluksi kaksi objektia: div- ja input-kenttä.
Seuraavaksi objektit laitetaan muuttujiin teksti ja kentta.
Viimeisenä kirjoitetaan kaksi nappia, joiden onClick -tapahtumafunktioon liitetään JavaScript-koodi suoritettavaksi (koodi on lainausmerkkien sisällä) aina kun nappia klikataan.

Ensimmäisen napin onClick -tapahtumafunktion lainausmerkkien sisällä vaihdetaan teksti-objektin tyylin väri -ominaisuutta.

Toisessa napissa teksti-objektin sisäistä HTML-koodiin sijoitetaan kentta-objektin value -arvo.

document.getElementsByName() -metodi

GetElementsByName -metodi etsii dokumentin objekteja nimen perusteella. Tätä käytettäessä pitää huomata, että metodi laittaa löydetyt objektit taulukkoon (selitetään myöhemmin taulukot), jolloin koodissa täytyy kertoa järjestysluku, kuinka monenteen ko. nimiseen objektiin halutaan viitata.

<div name="eka">Jokin teksti - kenttä</div>
<p name="eka">Toinen tekstikenttä</p>

<script Language="JavaScript">
	var tekstit = document.getElementsByName("eka");
</script>

<input type="button" value="Muuta väriä ekasta" onClick="tekstit[0].style.color='#ff0000';" />

<input type="button" value="Muuta väriä tokasta" onClick="tekstit[1].style.color='#00ff00';" />

Esimerkissä esitellään aluksi kaksi objektia: div ja p, jotka nimetään samalla nimellä (eka)
Script osiossa sijoitetaan teksti-muuttujaan kaikki dokumentistä löytyvät eka-nimiset objektit.

Nappien onClick -tapahtumafunktioihin kirjoitetaan käskyt, jotka muuttavat halutun eka-nimisen objektin tekstin väriä.
Huomaa, että getElementsByName -metodi tallettaa ensimmäisen löytämänsä objektin numerolle 0.

Viittaukset lomakkeen kettään

Lomakkeeseen ja sen kenttiin voidaan viitata suoraan nimellä ja value-ominaisuudella.

<form name="lomake">
	<input type="text" name="teksti" value="Jokin" /><br />
	<input type="checkbox" name="ruksi" checked />
</form>

<input type="button" value="Teksti" onClick="window.alert(document.lomake.teksti.value);" />
<input type="button" value="Ruksi" onClick="window.alert(document.lomake.ruksi.value);" />

Esimerkissä esitellään myös window.alert -metodi. Tällä metodilla voidaan avata selaimeen pieni huomioikkuna.