Tredun ohjelmistokehittäjien kurssimateriaaleja
Tähän asti olemme käyttäneet JavaScriptiä erillisinä tiedostoina ja ajaneet koodia konsolissa. Selaimessa JavaScriptin rooli on laajempi: sen avulla voidaan vaikuttaa verkkosivun sisältöön, ulkoasuun ja toimintaan käyttäjän selaimessa. JavaScript liitetään HTML-sivuun joko suoraan HTML-tiedoston sisälle tai erillisenä tiedostona. Kun sivu ladataan, selain lukee HTML:n, CSS:n ja JavaScriptin yhdessä ja suorittaa JavaScript-koodin, joka voi reagoida käyttäjän toimintaan, muuttaa sivun rakennetta tai käsitellä tietoa. Tässä osiossa keskitymme siihen, miten JavaScript lisätään verkkosivulle ja milloin koodi suoritetaan, ennen kuin siirrymme varsinaiseen sivun käsittelyyn.
JavaScriptiä voi lisätä HTML-koodin sisään. Kopioi seuraava HTML-tiedostoksi ja testaa sitä painamalla nappia.
<!DOCTYPE html>
<html>
<head>
<title>JavaScript alkeita</title>
</head>
<body>
<h1>Demo 1</h1>
<button onClick="alert('Toimii')">Testinappi</button>
</body>
</html>
Tässä esimerkissä käytetään siis JavaScriptin alert()-funktiota, joka on liitetty suoraan nappiin. Näin voi tehdä, jos koodi on erittäin lyhyt, mutta selkeyden vuoksi tapana on erottaa JavaScript, jotta se on helpompaa löytää ja ylläpitää.
Jos meidän on tarpeen kirjoittaa hieman pidempi määrä koodia, se kirjoitetaan script-tagien väliin.
<!DOCTYPE html>
<html>
<head>
<title>JavaScript alkeita</title>
</head>
<body>
<h1>Demo 2</h1>
<button onClick="kysely()">Kyselynappi</button>
<script>
const kysely = () => {
let name = prompt('Mikä on nimesi');
alert('Hei ' + name + ', kiva nähdä!');
}
</script>
</body>
</html>
Eli kun Kysely-nappia painetaan, kutsutaan kysely()-nimistä JavaScript-funktiota, joka on määritelty script-tagissa. Tällä funktiolla ei ole parametrejä tai palautusarvoa, vaan se avaa prompt-ikkunan, johon käyttäjä voi kirjoittaa vastauksen esitettyyn kysymykseen (toimii samoin kuin Pythonissa input mutta vain selaimessa, ei konsolissa). Käyttäjän antama tieto tallennetaan muuttujaan name ja alert()-ikkunan avulla voidaan tervehtiä käyttäjää hänen omalla nimellään. Script voidaan laittaa <head>iin tai <body>in, mutta otamme tavaksi laittaa scriptit bodyn loppuun, sillä silloin selain saa ensin ladata HTML:n, ennen kuin sen tarvitsee suorittaa JavaScriptiä.
Huom. prompt toimii, mutta sitä kannattaa käyttää vain testaamiseen, ei oikeilla sivuilla, sillä siihen on vaikeampi saada hyvä tietoturva ja tiedon käsittely. Oikeissa tilanteissa käytetään lomakkeita.
JavaScriptin voi kirjoittaa myös erilliseen tiedostoon, mikä on järkevää varsinkin, jos koodia on runsaasti, sillä se helpottaa koodin luettavuutta. Myös sivun lataus on nopeampaa, jos JavaScript on erillisessä tiedostossa. Silloin tiedosto on linkitettävä HTML-tiedostoon seuraavalla tyylillä: <script src="myScript.js"></script>. Linkin voi laittaa joko <head>iin tai <body>in.