Lyhyesti ilmaistuna javascript on selaimessa suoritettavaa koodia.
Kyseessä on ohjelmointikieli, jonka avulla www-sivuille voidaan lisätä erilaisia toimintoja. Tyypillisesti javascriptillä toteutettavat toiminnot ovat sellaisia, joita ei voi toteuttaa esimerkiksi XHTML:llä. Javascriptin avulla voidaan esimerkiksi avata uusia selainikkunoita ajastetusti tai luoda sivulle graafinen kello. Myös monet CSS:lle tyypilliset toiminnot ovat mahdollisia, kuten tekstien ja taustojen värjääminen.
Javascript poikkeaa useimmista muista www-sivujen teossa hyödynnetyistä ohjelmointikielistä siinä, että sen toiminta on riippuvainen selaimesta. Mikäli selaimen javascript-tuki on pois päältä, javascript-koodi ei toimi. Useimmat muut ohjelmointikielet, kuten php, suoritetaan selaimen sijasta www-sivujen palvelimella. Niinpä vierailijoiden käyttämä selain ei vaikuta niiden toimintaan.
Javascriptin avulla ei kannata toteuttaa mitään sivuston kannalta välttämätöntä toimintoa, koska monet vierailijat pitävät javascript-tukea tietoturvasyistä poissa päältä. Heillä javascriptin avulla toteutetut ratkaisut eivät toimi. Www-sivuja suunnitellessa kannattaakin aina tarkistaa, että sivut ovat käyttökelpoiset myös ilman javascriptiä.
Tällä sivulla esitellään vain muutamia alkeellisia javascriptin käyttötapoja. Mikäli haluat tutustua javascriptiin ohjelmointikielenä paremmin, sivun lopussa on aiheeseen liittyviä linkkejä, joiden joukosta löydät myös useita helppotajuisia ja laajoja oppaita.
Javascript-koodia voidaan upottaa sivulle pääsääntöisesti kolmella tavalla: script-tageilla, ulkoisena javascript-tiedostona sekä erityisten attribuuttien avulla.
Yleisin keino upottaa javascript-koodia sivulle on käyttää HTML:ssä ja XHTML:ssä esiintyviä script-tageja. Javascript-koodi sijoitetaan tällöin script-tagien väliin www-sivun head-osioon. Merkintätapa poikkeaa hieman HTML:ssä ja XHTML:ssä.
Esimerkiksi:
HTML:
<script type="text/javascript"> <!-- JAVASCRIPT-KOODI TÄHÄN --> </script>
XHTML:
<script type="text/javascript"> /*<![CDATA[*/ JAVASCRIPT-KOODI TÄHÄN /*]]>*/ </script>
Javascript-koodi voidaan tallentaa .js-päätteiseksi tiedostoksi. Tiedoston koodi voidaan upottaa www-sivulle viittaamalla siihen script-tagien avulla www-sivun head-osiossa.
Esimerkiksi alla viitataan tiedostoon mansikka.js:
<script type="text/javascript" src="mansikka.js"></script>
Javascriptiä voi upottaa suoraan haluttuun XHTML- tai HTML-elementtiin niin sanottujen tapahtuma-attribuuttien avulla. Tällöin haluttu javascript-pätkä kirjoitetaan attribuutin arvoksi.
Esimerkiksi alla olevan koodin avulla kuvan mansikka.gif tilalla näytetään banaani.gif, kun hiiri viedään kuvan päälle.
<img src="mansikka.gif" onmouseover="this.src='banaani.gif'" alt="Hedelmä" />
Onfocus-attribuutin ja pienen javascript-pätkän avulla voidaan luoda tekstikenttä, jossa valmiina oleva teksti muuttuu, kun kenttä valitaan.
onfocus="if(this.value=='Valmis teksti tähän')this.value='Ilmestyvä teksti tähän';"
Esimerkki:
Lisää seuraava koodipätkä sivusi head-tagien väliin (mikäli käytät XHTML:n sijaan HTML:ää, muista vaihtaa vihreällä merkityt kommentit):
<script type="text/javascript"> /*<![CDATA[*/ var bookmarkurl="Sivusi osoite (myös http:// -osa!)" var bookmarktitle="Sivusi nimi (saa sisältää ä- ja ö-kirjaimia)" function addbookmark(){ if (document.all) window.external.AddFavorite(bookmarkurl,bookmarktitle) } /*]]>*/ </script>
Lisää seuraava pätkä "Lisää sivu suosikkeihin"-linkin osoitteeksi.
javascript:addbookmark();
Onclick-attribuutin avulla voidaan määrittää linkki avautumaan uudessa ikkunassa siten, että uudessa ikkunassa näkyvät vain ennalta määritellyt valikot ja palkit. Samassa yhteydessä voidaan määrittää myös uuden ikkunan koko.
Haluttujen valikoiden ja palkkien näkyminen määritetään kirjoittamalla koodiin lisäys valikko=arvo, jossa "valikko" on jokin alla olevista vaihtoehdoista ja arvo on joko 0 tai 1 (0 = valikkoa ei näytetä, 1 = valikko näytetään). Korkeus ja leveys tosin määritetään pikseleissä, ei 1:n tai 0:n avulla. Eri määrittelyt erotetaan toisistaan pilkulla.
Lisää seuraava attribuutti haluamaasi linkkiin. Muista määrittää linkin osoite ja javascriptissä ilmoitettu osoite samoiksi.
onclick="window.open('osoite', 'popupin nimi', 'Muut määrittelyt'); return false"
Esimerkiksi:
<a href="esim.html" onclick="window.open('esim.html', 'Es', 'location=0,menubar=0'); return false">
Klikkaa tästä</a>
Lisää seuraava javascript-pätkä linkin osoitteeksi.
javascript:window.location.reload();
Www-sivun taustaväriin ja sen vaihtumiseen voi vaikuttaa monilla attribuuteilla. Attribuutin arvo on kuitenkin taustaväriin vaikutettaessa seuraava:
this.style.background='väri'
Esimerkiksi alla on määritelty tekstikentän taustaväriksi keltainen silloin, kun tekstikenttää klikataan:
<textarea cols="4" rows="4" onclick="this.style.background='yellow"></textarea>
Lisää seuraava javascript-pätkä linkin osoitteeksi.
javascript:self.close();
Lisää seuraava javascript-pätkä linkin osoitteeksi.
javascript:history.back();