Opasarkisto: JavaScript-perusopas: Osa 8 - Ominaisuudet

Kuten tähän mennessä on käynyt ilmi, JavaScriptissä on olioita (tunnetaan myös nimellä objekti) kuten document, joka viittaa selaimessa auki olevaan www-sivuun. Olioilla on ominaisuuksia, esimerkiksi document-olion bgColor, jolla voidaan määrittää sivun taustaväri. Sen lisäksi olioilla on metodeita, kuten document-olion write, jonka avulla sivulle pystytään kirjoittamaan tekstiä. Tässä oppaassa käydään läpi eri olioiden ominaisuuksia. Opas ei kuitenkaan sisällä kaikkia olemassa olevia ominaisuuksia.

Esimerkiksi sivun taustaväri saadaan tietää bgColor-ominaisuuden avulla:

document.write("Sivun taustaväri on " + document.bgColor;);

Skripti tulostaa selaimeen sivun taustan värin heksalukuna, esimerkiksi valkoinen on #ffffff.

Vastaavalla tavalla voidaan selvittää käytettävän selaimen nimi:

document.write("Käyttämäsi selain on " + navigator.appName);

Yllä oleva skripti tulostaa näyttöön käytettävän selaimen nimen, esimerkiksi "Microsoft Internet Explorer".

Ominaisuuksia voi myös muuttaa, vaikkapa sivun taustaväriä seuraavasti:

document.bgColor = "#6511FF";

Seuraavaksi skripti, jossa käyttäjä voi kolmesta painikkeesta valita sivulle haluamansa taustavärin.

<script type="text/javascript">
function VaihdaVari(vari)
{
	document.bgColor = vari;
}
</script>

<form name="varin_vaihto">

	<input type="button" name="vari_1" value="Sininen" onclick="VaihdaVari('#002AFF')">

	<input type="button" name="vari_2" value="Punertava" onclick="VaihdaVari('#FF4E00')">

	<input type="button" name="vari_3" value="Vihreä" onclick="VaihdaVari('#397400')">

</form>

Nyt kun ominaisuuksien arvojen tulostaminen ja muuttaminen on opittu, on aika vilkaista, mitä eri ominaisuuksia objekteilla on.

document

<script type="text/javascript">

document.write("Sivun taustaväri on: " + document.bgColor + " ja edustan väri " + document.fgColor + ". Sivun otsikko on " + document.title + " ja sitä on muokattu viimeksi " + document.lastModified + ".");

</script>

Yllä olevassa esimerkissä tulostetaan taustaväri, tekstin väri, sivun otsikko ja sen viimeinen muokkausajankohta.

navigator

<script type="text/javascript">

var selaimen_nimi = navigator.appName;

if(selaimen_nimi == "Microsoft Internet Explorer")
	document.write("Käytät IE-selainta, tervetuloa!");
else
	document.write("Käyttämäsi selain ei ole IE, sivut eivät välttämättä toimi oikein!");

</script>

Yllä olevassa esimerkissä näytetään käyttäjälle eri viesti riippuen, käyttääkö hän Internet Exploreria vai jotain toista selainta. Tähän tapaan käyttäjä voidaan ohjata jopa kokonaan eri sivuille käytetyn selaimen perusteella tai näyttää viesti sivujen mahdollisesta toimimattomuudesta käytettäessä selainta, jolle sivuja ei olla suunniteltu. Tällaisessa tapauksessa koodi voisi näyttää tältä:

var selain_nimi = navigator.appName;

if(selain_nimi == "Microsoft Internet Explorer")
	parent.location = "index_IE.html";
else
	parent.location = "index_muut.html";

Skriptissä on uusi komento parent.location, jolla siirrytään toiselle sivulle. Eli jos käyttäjän selain on Internet Explorer, skripti ohjaa hänet sivulle "index_IE.html", mutta mikäli käytetään jonkin toisen valmistajan selainta, mennäänkin sivulle "index_muut.html". Tällä tavoin toteutettu selaimen tunnistus ei kuitenkaan ole täysin luotettava.

Toinen tapa ohjata selain uudelle sivulle on location.href = "sivun_osoite.html".

var selain_nimi = navigator.appName;

if(selain_nimi == "Microsoft Internet Explorer")
	location.href = "index_IE.html";
else
	location.href = "index_muut.html";

window

<script type="text/javascript">

function TilariviTulosta(teksti)
{
	window.status = teksti;
}

</script>
...
<form>

<img src="kuva.jpg" onmouseover="TilariviTulosta('Hiiri kuvan päällä!')" onmouseout="window.status='Ei ole enää'">

</form>

Skriptissä tulostetaan funktion parametrina oleva merkkijono tilariville, kun hiiri viedään kuvan päälle. Kun hiiri siirtyy kuvan päältä pois, tulostetaan tilariville toinen teksti.

location

<script type="text/javascript">

var protokolla = location.protocol;
var url = location.href;

document.write("Tämän sivun osoite on " + url + " ja protokolla " + protokolla + ".");

</script>

Skriptissä tulostetaan sivun osoite ja siirtoprotokolla. Siirtoprotokolla on http:, mikäli sivut on ladattu Internetistä, ja file:, jos sivut sijaitsevat omalla koneella.

history

<script type="text/javascript">

var osoite, sivujen_lkm;

osoite = history.current;
sivujen_lkm = history.length;

document.write("Tämän sivun osoite on " + osoite + ". Sivuja on sivuhistorialistassa " + sivujen_lkm + "kappaletta.");

</script>

Mainittakoon tässä samassa yhteydessä history-olion kolme metodia:

Metodeilla back() ja forward() voi tehdä linkkejä tai nappeja, joiden toiminta vastaa selaimen Edellinen / Seuraava-painikkeita. Metodilla go() voidaan käyttäjä siirtää sivuhistoriassa esimerkiksi viisi sivua taaksepäin go(-5) tai eteenpäin go(5).

function Taakse()
{
	history.go(-5);
}
...
<input type="button" value="Viisi sivua taaksepäin" onclick="Taakse()">

Tämä skripti heittää käyttäjän viisi sivua taaksepäin.

Sivun muihin elementteihin viittaaminen

Sen lisäksi, että esimerkiksi sivun taustaväriä voidaan muuttaa document.bgColor-ominaisuudella, pystytään JavaScriptillä viittaamaan myös muihin sivun elementteihin. Tällöin elementti, esimerkiksi taulukon solu, nimetään id-attribuuttia käyttäen. Tällä tavoin nimettyyn elementtiin voidaan viitata jo lomakkeiden yhteydessä opetetulla tavalla document.getElementById("elementin_id"). Seuraavassa skriptissä vaihdetaan taulukon solun taustaväri vihreäksi.

<table><tr>

<td id="otsikko">OTSIKKO</td>

</tr></table>

<script type="text/javascript">

document.getElementById("otsikko").bgColor = "#3FBF3F";

</script>

Elementteihin on mahdollista käyttää myös tyylimäärityksiä, esimerkiksi tekstin fonttityypin ja koon muuttaminen käy style-ominaisuuden avulla. Samoin lomakkeen kenttien ominaisuuksia voidaan muuttaa tällä tavalla.

<form>

<div id="otsake">Nimi</div>

<input type="text" id="nimi" onfocus="Valittu()">

</form>

<script type="text/javascript">

document.getElementById("otsake").style.font = "9pt Arial";

function Valittu()
{
	document.getElementById("nimi").style.border = "solid 2px blue";
}

</script>

Tekstikentän reuna vahvenee ja muuttuu siniseksi, kun käyttäjä valitsee kentän.

Yhteenveto

Tämän oppaan ei ole tarkoitus olla täydellinen luettelo käytössä olevista ominaisuuksista. Uusien ominaisuuksien opettelu on kuitenkin helppoa oppaassa käytyjä esimerkkejä soveltamalla. Täydellinen englanninkielinen luettelo JavaScriptin ominaisuuksista löytyy itseopiskelua varten Java2s-sivulta, jossa ovat muun muassa ominaisuuksien syntaksit eli käyttötavat ja esimerkkejä. Seuraavassa oppaassa pureudutaan matemaattisten ongelmien ratkomiseen JavaScriptin Math-olion avulla.