Siirry sivun sisältöön Avut CSS HTML JavaScript Kotisivu

Johdanto JavaScriptin käyttöön Web-sivuilla

Esimerkkien merkkauskielenä on XHTML 1.0.

Sisällysluettelo

  1. JavaScriptin tuominen dokumenttiin
    1. Koodin tuonti SCRIPT-elementillä
    2. Koodin upotus SCRIPT-elementillä
    3. Koodin upotus elementtien tapahtuma-attribuuteilla
    4. Koodin upotus javascript-pseudoprotokollalla
  2. Ennen JavaScriptin käyttöä
    1. Navigoinnin toimivuuden varmistaminen
    2. Vaihtoehtoisen sisällön tarjoaminen
      1. JavaScript-tuen tarkistus
      2. NOSCRIPT-elementti

JavaScriptin tuominen dokumenttiin

JavaScript (tästä edes JS) voidaan tuoda dokumenttiin muutamalla eri keinolla, joko tuomalla koodi ulkopuolisesta JS-tiedostosta, tai upottamalla koodi suoraan elementtien (ja/tai attribuuttien) sisällöksi. Useimmiten käytetään SCRIPT-elementtiä, joka mahdollistaa joko koodin tuonnin tai sen upottamisen. SCRIPT-elementtejä voidaan sijoittaa, sekä HEAD-, että BODY-elementtien lapsiksi, eikä niiden esiintymiskertoja ole rajattu.

Koodin tuonti SCRIPT-elementillä

Koodin tuonti ulkopuolisesta JS-tiedostosta on useastakin syystä paras tapa tuoda JS-koodi dokumentteihin:

Ulkoiset scriptit ovat myös portatiivisempia, kun yhteensopivuudesta HTML:n ja XHTML:n välillä ei tarvitse huolehtia.

SCRIPT-elementtiesimerkkimme sijoittuu dokumentin rakenteessa HEAD-elementin lapsielementiksi ja tuontisyntaksi on seuraavanlainen:

<script
 type="text/javascript"
 charset="iso-8859-1"
 src="heips.js">
/* Elementin sisältö jätetään tyhjäksi.*/
</script>

Yo. esimerkkielementtiimme on merkitty kolme attribuuttia arvoineen:

JS-tiedostomme on aivan tavallinen tekstitiedosto, joka sisältää muutaman rivin tekstiä (joista vain yksi on koodia) ja jolle on annettu tiedostopäätteeksi .js, jotta se helposti erottuisi JS-tiedostoksi. Tiedoston sisältö on seuraavanlainen:

/*
 * Kutsutaan window-olion alert-metodia,
 * jota käytetään välittämään viestejä
 * käyttäjälle. Metodin viestit vaativat
 * käyttäjältä ainoastaan kuittauksen.
 */
window.alert('Hei maailma!');

Koodin upotus SCRIPT-elementillä

Koodin upotusmenetelmällä koodi sijoitetaan SCRIPT-elementin sisällöksi:

<script type="text/javascript" xml:space="preserve">
//<![CDATA[ merkataan koodi XHTML-yhteensopivaksi

window.alert('Hei maailma!');

// CDATA-merkintä loppuu!]]>
</script>

Attribuuteista edelleen merkitään pakollinen TYPE, sekä XML:SPACE, joka preserve-arvolla varustettuna pyytää XML-sovelluksia säilyttämään elementin sisältämän tyhjän tilan. SRC-attribuutti korvautuu elementin sisällöllä ja CHARSET-attribuutin arvo taas (oletustapauksessa) periytyy dokumentista itsestään.

SCRIPT-elementillä upotettu koodi voidaan sijoittaa, sekä HEAD-, että BODY-elementin lapseksi. Mikäli JS-koodi kirjoittaa dokumentin runkoon (document.write -metodilla) sijoita SCRIPT-elementti BODY-elementtiin, muuten HEAD-elementin lapsielementiksi. Luonnollisuuden ja helpomman ylläpidon lisäksi tällä varmistetaan, että kaikki aliohjelmat ovat latautuneet ennen kun niitä kutsutaan.

Koodin upotus elementtien tapahtuma-attribuuteilla

Melkein kaikkiin (X)HTML-elementteihin voidaan yhdistää attribuutteja, jotka viittaavat scripteihin. Nämä attribuutit reagoivat tiettyihin tapahtumiin, yleensä käyttäjän tekemiin toimenpiteisiin. Nämä tapahtumat toimivat koodin aktivoimiskäskyinä. Esimerkkinä ONCLICK, joka aktivoituu, kun käyttäjä näpäyttää osoittimen nappia elementin päällä:

<p onclick="window.alert('Hei maailma!');">
Tämä on esimerkkikoodi elementistä,
johon on yhdistetty tapahtuma-attribuutti.</p>

Tähän tekstikappaleeseen on yhdistetty yo. koodin mukainen attribuutti arvoineen. Voit testata asiakasohjelmasi scripti/tapahtuma-attribuuttitukea näpäyttämällä osoittimen nappia tämän tekstikappaleen päällä.

Tapahtuma-attribuutit, niiden kuvaukset ja elementtisuhteet on koottu eri sivulle.

Koodin upotus javascript-pseudoprotokollalla

JS-koodi voidaan vielä upottaa HREF-attribuutin arvoksi käyttämällä javascript-pseudoprotokollaa seuraavan esimerkin mukaisesti:

<a href="javascript:window.alert('Hei maailma!');">
esimerkkilinkki joka viittaa javascript-protokollaan.</a>

Yo. koodi tulostuu dokumenttiin seuraavasti: esimerkkilinkki joka viittaa javascript-protokollaan.

Metodin selvänä haittapuolena on se, että ilman JS-tukea dokumenttiin jää toimimaton linkki. Lähes aina tälle metodille löytyy parempi toteutusvaihtoehto, esim. yhdistämällä koodi tapahtuma-attribuuttiin. Todella hyödyllinen pseudoprotokolla lienee ainoastaan omiin tarpeisiin tehtyjen linkkien (scriplettien) yhteydessä.

Ennen JavaScriptin käyttöä

Ennen JS:n käyttöä on tärkeää hahmottaa, että asiakaspuolen scriptejä tulisi käyttää siten, ettei niiden myötä vaarannu verkkojulkaisujen oleelliset toiminnot, kuten linkitys tai asiasisällön saavutettavuus. Se mikä voidaan tehdä merkkauskielellä tulisi tehdä merkkauskielellä ja sivujen tekijöiden tulisi varmistaa scriptejä käyttävien sivujen toimivuus ja mielekkyys myös tilanteissa, joissa sivuja pyytää asiakasohjelma ilman JS-tukea.

Navigoinnin toimivuuden varmistaminen

Hyvä nyrkkisääntö on pitää JS ja navigointi täysin erillään toisistaan. Pahimmassa tapauksessa JS:n yhdistäminen navigointiin voi estää sivuilla liikkumisen kokonaan ja parhaassakin tapauksessa navigoinnin toimivuuden varmistaminen vaatii runsaasti lisätyötä.

Mikäli JS:iä kuitenkin päädytään käyttämään, niin koodi tulee sijoittaa tapahtuma-attribuuttiin, eikä pseudoprotokollalla HREF-attribuuttiin. Tällä varmistetaan linkityksen toimivuus kaikissa tilanteissa.

<!-- ei näin: -->
<a href="javascript:/*koodi tässä*/;">seuraava sivu</a>

<!-- vaan esim. näin: -->
<a href="sivu2.htm" onclick="/*koodi tässä*/;">seuraava sivu</a>

Vaihtoehtoisen sisällön tarjoaminen

Edelleen, toinen hyvä nyrkkisääntö on välttää JS:n käyttöä sivujen oleellisissa toiminnoissa, jottei sisällön tai sen tärkeän osan saatavuus olisi kiinni JS-tuesta. Mikäli JS:iä kuitenkin päädytään käyttämään, niin tällöin olisi syytä huolehtia vaihtoehtoisesta tavasta saavuttaa sivujen sisältö.

JavaScript-tuen tarkistus

JS-tuen tarkistuksella voidaan välttää toimimattoman tai tarkoituksettoman sivun tarjoamista asiakkaalle. Apuna voimme käyttää edellistä esimerkkiä hieman muunneltuna:

<a 
 href="ei-tukea.htm"
 onclick="this.href='tuki-on.htm'">seuraava sivu</a>

Nyt linkistä latautuva sivu riippuu JS-tuesta. Tapahtuma-attribuutin arvo astuu voimaan, mikäli JS-tuki on olemassa ja se on päällä. Muuten aktivoituu HREF-attribuutin arvo. Tämä metodi sopinee parhaiten tilanteisiin, joissa laajemmat kokonaisuudet tarvitsevat scriptitukea.

NOSCRIPT-elementti

Vaihtoehtoinen sisältö voidaan myös tuoda dokumenttiin juuri tähän tarkoitukseen suunnitellulla NOSCRIPT-elementillä. Elementti sopinee parhaiten pienempien osuuksien vaihtoehtoisen sisällön esittämiseen.

Tähän dokumenttiin on lisätty seuraava kokonaisuus havainnollistamaan asiaa:

<script type="text/javascript" xml:space="preserve">
//<![CDATA[
document.write('<p>Tämä on JS:llä kirjoitettu teksti'
+'kappale. Mikäli tämä teksti tulostuu, niin alla me'
+'rkattu <b>NOSCRIPT</b>-lohko ei tulisi näkyä.</p>');
//]]>
</script>

<noscript><p>Tämä on tekstikappale (<b>P</b>-elementti)
<b>NOSCRIPT</b>-lohkon sisällä. Tämä teksti tulisi
näkyä asiakasohjelman tulkitsemana vain mikäli
scriptituki puuttuu.</p></noscript>

Yo. kokonaisuus tulostuu dokumenttiin seuraavasti:

Viimeinen päivitys: 2006-02-13
Osmo Saarikumpu

yksi taso ylös