[Sisällys] [Seuraava]

HTML-Lomakkeet

HTML-kielen lomakkeilla on ratkaiseva merkitys JavaScript-kielen hyödyntämisessä. Lähes aina JavaScript-ohjelmat toimivat siten, että WWW-sivulla on jokin lomake, joka sisältää esimerkiksi nappulan josta painettaessa suoritetaan jokin JavaScript-käsky tai funktio.

JavaScript-toimintojen yhdistäminen lomakkeen toimintoihin on tehty hyvin helpoksi. Esimerkiksi normaaliin button- eli nappula-komponenttiin voidaan lisätä määre onClick, jonka arvoksi asetetaan suoritettava JavaScript-käsky: 

  <FORM>
  <INPUT VALUE="Paina" TYPE="button" onClick="teeJotain()">
  </FORM>
Tätä nappulaa painettaessa kutsuttaisiin siis JavaScript-funktiota teeJotain().

JavaScript-ohjelma voi myös viitata lomakkeen komponenttien data-kenttiin. Jos haluttaisiin vaikkapa, että lomakkeen nappulaa painettaessa asetettaisiin vieressä sijaitsevaan tekstikenttään teksti "Foo", toimittaisiin seuraavasti: 

  <FORM>
  <INPUT NAME="teksti" VALUE="" SIZE=10>
  <INPUT VALUE="Paina" TYPE="button" onClick="this.form.teksti.value = 'Foo'">
  </FORM>
Jolloin lomake näyttää sivulla tältä:
Suoritettaessa button-komponentin onClick:in määrittelemää käskyä, on this-objektin arvona kyseinen button-objekti. Tämä objekti sisältää ominaisuutena lomakkeen, jossa se sijaitsee nimellä form. Tämä form-objektin taas sisältää kaikki komponenttinsa ominaisuuksina niillä nimillä mitkä niille on NAME-tagilla annettu. Näinollen tekstikentän VALUE-tagin arvoon voidaan viitata käskyllä this.form.teksti.value.

Toinen vaihtoehto on asettaa javascript-koodia HREF-linkkeihin. Tällöin syntaksi on seuraava: 

  <A HREF=javascript:foo()>Zzzzap!</A>

Tällöin siis tekstiä Zzzap! klikattaessa suoritetaan javascript- funktio nimeltä foo().

Tätä ominaisuutta hyödyntämällä voidaan luoda linkkejä jotka eivät tee mitään: 

  <A HREF=javascript:void(0)>Nop</A>

Tästä on hyötyä jos halutaan vaikkapa tehdä sivulle hiiren liikkeiden mukana muuttuvia kuvia.

Mihin ohjelma kirjoitetaan?

JavaScript-ohjelma sijoitetaan normaalisti HTML-sivun HEAD-osioon SCRIPT-tagien väliin. SCRIPT-tagille annetaan argumenttina kieli jolla ohjelma on kirjoitettu, eli JavaScriptin ollessa kyseessä kieleksi annetaan tyypillisesti "JavaScript". Itse asiassa tämä määrittely tarkoittaa kielen versiota 1.0, jota NetScape2.0 pystyy suorittamaan. NetScape 3.0:n mukana esiteltiin uusi versio 1.1, joka voidaan ottaa käyttöön antamalla kieleksi "JavaScript1.1" ja vastaavasti 1.2:lle "JavaScript1.2". 

  <HTML>
  <HEAD>
  <SCRIPT LANGUAGE="JavaScript">

    function teeJotain() {
      ...
    }

  </SCRIPT>
  </HEAD>
SCRIPT-tagi on sallittu missä tahansa HTML-koodin seassa. On kuitenkin suositeltavaa kirjoittaa koko ohjelma yhteen paikkaan, eikä ripotella ohjelmanpätkiä ympäri HTML-sivua.

Koska aina on olemassa (vanhoja) selaimia, jotka eivät tue JavaScriptiä, on SCRIPT-tagien välissä oleva koodi hyvä naamioida kommentiksi. Ja jotta JavaScript-tulkki ei tästä kimpaantuisi, naamioidaan HTML-kommentin loppumerkki JavaScriptin kannalta kommentiksi. Eli edellinen esimerkki kirjoitettaisiinkin: 

  <HTML>
  <HEAD>
  <SCRIPT LANGUAGE="JavaScript">
    <!--
    function teeJotain() {
      ...
    }
    // -->
  </SCRIPT>
  </HEAD>
Nyt vanhat selaimet tulkitsevat JavaScript-ohjelman kommentiksi, eivätkä lakkaa tämän vuoksi toimimasta.

Vanhat selaimet saattavat kommentiksi naamionnista huolimatta tuottaa ongelmia. Nimenomaan >-merkit saattavat aiheuttaa sen, että selain tulkitsee kommentin loppuneeksi ja alkaa suorittaa JavaScript-koodia HTML-koodina. Tämä yleensä aiheuttaa sivun toimimattomuuden. Tämän vuoksi kannattaa ehkä käyttää >-merkkiä varauksella ja korvata vaikkapa muoto (a > b) muodolla !(a <= b).

SCRIPT-tagille voidaan myös antaa määre SRC, joka lataa JavaScript- ohjelman määritellystä tiedostosta. Jos vaikkapa ohjelma olisi talletettu tiedostoon "ohjelma.js", toimittaisiin seuraavasti: 

  <HTML>
  <HEAD>
  <SCRIPT SRC="ohjelma.js" LANGUAGE="JavaScript">
  </SCRIPT>
  </HEAD>

SRC-määreen polkuna voi olla myös absoluuttinen URL.

WWW-sivu objekteina

WWW-sivu on JavaScript-ohjelman näkökulmasta monitasoinen luokkarakenne.

Esimerkiksi jos lähdetään tarkastelemaan selaimen ikkunaa, jossa on yksinkertainen HTML-dokumentti sisältäen yhden lomakkeen jolle on annettu nimi lomake. Ajatellaan vielä, että lomake sisältää komponentteina nappulan ja tekstikentän, joille on annettu nimet nappi ja teksti. Tällöin luokat voitaisiin esittää rakennekaaviona seuraavasti: 

         window
           |
        document
           |
         lomake
         /    \
     nappi   teksti
Eli window-objekti sisältää ominaisuutena dokumentin nimellä document. Dokumentti sisältää ominaisuuksina kaikki sisältämänsä lomakkeet, joita tässä tapauksessa on yksi, nimeltään lomake. Lomake sisältää ominaisuuksina kaikki sisältämänsä komponentit. Kaikkiin lomakkeisiin voidaan myös viitata document.forms[indeksi] muodolla. Tässä indeksi juoksee nollasta alkaen. Taulukon pituus on document.forms.length.

Jos ikkuna sisältää kehyksiä (frame), tulee luokkahierarkiaan vielä yksi taso lisää. Olkoon ikkuna jaettu kehyksillä kahteen osaan, joiden nimiksi on annettu main ja title. Tällöin luokkarakenne näyttäisi seuraavalta: 

            window
           /      \
          main   title
           |       |
      document   document
         |
       lomake
       /    \
   nappi   teksti
Jos esimerkiksi kehys main olisi jaettu vielä kahteen osaan, tulisi sen alapuolelle vielä nämä kaksi kehys-objektia.

Milloin missäkin

Tämä WWW-sivun objektimallisuus aiheuttaa sen, että aina JavaScript-ohjelmaa suoritettaessa ollaan jonkin objektin sisällä. Se, että mikä objekti on kyseessä riippuu siitä, että missä kohtaa HTML-sivua kyseinen koodi sijaitsee.

Simo.Sarkka@iki.fi