Kirjautuminen

Haku

Tehtävät

Kilpailu

Ohjelmoi tekoäly!
Aikaa on 6.1. saakka.

Opasarkisto: JavaScript-perusopas: Osa 8 - Ominaisuudet

  1. Osa 1 - Perusteet
  2. Osa 2 - Muuttujat ja taulukot
  3. Osa 3 - Tapahtumankäsittelijät ja informaatioikkunat
  4. Osa 4 - Komentorakenteet
  5. Osa 5 - Funktiot
  6. Osa 6 - Lomakkeiden käsittely
  7. Osa 7 - Merkkijonojen käsittely
  8. Osa 8 - Ominaisuudet
  9. Osa 9 - Matemaattiset laskutoimitukset
  10. Osa 10 - Olio-ohjelmointi
  11. Osa 11 - Käytännön sovelluksia

Kirjoittaja: MikaBug. Vuosi: 2007.

Huomio! Tämä opas on vanhentunut. Oppaan sisältöön ei voi enää luottaa. Opas on säilytetty vain sen historiallisen arvon vuoksi.

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

OMINAISUUSKUVAUS
bgColorsivun taustan väri
fgColorsivun edustan (tekstin) väri
linkColorhyperlinkin väri
alinkColoraktiivisen hyperlinkin väri
vlinkColorvieraillun hyperlinkin väri
locationsivun URL-osoite
referreredellisen käydyn sivun osoite
titlesivun otsikko
lastModifiedsivun viimeinen muokkauspäivämäärä
<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.

OMINAISUUSKUVAUS
appNameselaimen nimi
appCodeNameselaimen koodinimi (ohjelman kehityksen aikana käytetty nimi)
appVersionselaimen versio
userAgentselaimen antama tunnistetieto
<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

OMINAISUUSKUVAUS
statusselaimen tilarivillä näkyvä teksti
defaultStatusselaimen tilarivillä näkyvä oletusteksti
<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

OMINAISUUSKUVAUS
hostpalvelimen URL-osoite ja portti
hostnamepalvelimen URL-osoite
hrefsivun täydellinen URL-osoite
pathnameURL-osoitteen polkuosa
portkäytettävän portin numero
protocolkäytettävä protolla (esim. http: tai file:)
<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

OMINAISUUSKUVAUS
currentNykyisen sivun URL-osoite
lengthURL-osoitteiden lukumäärä sivuhistoriassa
<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:

METODIKUVAUS
back()Sivuhistorian edellinen sivu
forward()Sivuhistorian seuraava sivu
go()Parametrina määritelty sivumäärä eteen- / taaksepäin

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.


Kommentit

gamehouse [06.10.2007 09:16:58]

Lainaa #

Hyödyllistä, hyödyllistä... :D

Ceox [30.11.2007 16:18:24]

Lainaa #

Tilariviefektit eivät toimi Firefoxissa?

rax [26.02.2009 16:48:44]

Lainaa #

Eikä operassa Ceox

Laakeri [17.12.2010 09:03:40]

Lainaa #

Eikä chromessa Ceox. Ihmettelen vaan miten Facebook osaa muuttaa sitä tilariviä.

Kirjoita kommentti

Huomio! Kommentoi tässä ainoastaan tämän oppaan hyviä ja huonoja puolia. Älä kirjoita muita kysymyksiä tähän. Jos koodisi ei toimi tai tarvitset muuten vain apua ohjelmoinnissa, lähetä viesti keskusteluun.

Muista lukea kirjoitusohjeet.
Tietoa sivustosta