JavaScriptin Käyttö HTML-Dokumentissa

Helppo

20 min

JavaScriptin käyttö HTML-dokumentissa tapahtuu yleensä kahdella tavalla: sisällyttämällä koodi HTML-dokumentin sisään tai viittaamalla erilliseen JavaScript-tiedostoon.

Inline-skriptit

Ensimmäinen tapa sisältää JavaScript-koodia HTML-dokumenttiin on käyttää <script> -tagia. Tämä tagi sisältää JavaScript-koodin, joka suoritetaan HTML-dokumentin lataamisen yhteydessä. Tagi on esimerkissä head -osiossa, mutta sen ei ole pakko olla juuri siellä. Head ladataan ennen bodya, joten jos haluat että skripti ladataan vasta kun muu HTML on jo ladattu, se kannattaa laittaa vasta bodyn loppuun.

<!DOCTYPE html>
<html>
  <head>
    <title>JavaScriptin käyttö HTML-dokumentissa</title>
    <script>
        alert("Hei maailma!");
    </script>
  </head>
</html>

Ulkoiset skriptit

Toinen tapa käyttää JavaScriptia HTML-dokumentissa on viitata erilliseen JavaScript-tiedostoon. JavaScript-tiedosto liitetään HTML-dokumenttiin käyttämällä <script> -tagia, jonka attribuuttiin src kirjoitetaan tiedoston sijainti. Skripti voi sijaita sovelluksen omassa osoitteessa (jolloin siihen voidaan viitata pelkällä poululla ilman kokonaista URL-osoitetta) tai missä tahansa Internetissä.

HTML-dokumentti:

<!DOCTYPE html>
<html>
  <head>
    <title>JavaScriptin käyttö HTML-dokumentissa</title>
    <script src="scripts.js"></script>
  </head>
  <body>
    <button onclick="tervehdi()">Tervehdi</button>
  </body>
</html>

JavaScript-tiedosto (scripts.js):

function tervehdi() {
  alert("Hei maailma!");
}

Huomaa, että erillisessä JavaScript-tiedostossa olevat funktiot ovat käytettävissä kaikissa HTML-dokumentin osissa, kunhan ne on liitetty oikein HTML-tiedostoon.

DOM-tapahtumankäsittelijät

HTML DOM-tapahtumankäsittelijät ovat JavaScriptin tärkeä ominaisuus, jonka avulla voidaan määrittää, mitä tapahtuu, kun käyttäjä vuorovaikuttaa verkkosivun kanssa. DOM-tapahtumat voivat olla esimerkiksi hiiren klikkauksia, näppäimistön painalluksia tai sivun lataamista.

Selaimet tukevat myös DOM-tapahtumankäsittelijöitä, jotka määritellään HTML-elementtien attribuuteissa. Tämä tarkoittaa, että voit määrittää tapahtumankäsittelijän suoraan HTML:ään, sen sijaan että määrittelisit sen JavaScript-koodissa.

Tässä on esimerkki HTML-koodista, joka määrittää onclick-tapahtumankäsittelijän button-elementtiin:

<!DOCTYPE html>
<html>
<head>
  <title>DOM-tapahtumankäsittelijä</title>
</head>
<body>

  <button onclick="alert('Painoit nappia!')">Paina minua!</button>

</body>
</html>

Tässä esimerkissä määritetään onclick-tapahtumankäsittelijä button-elementtiin attribuutin avulla. Kun käyttäjä klikkaa painiketta, selain näyttää alert-ikkunan, jossa on teksti "Painoit nappia!".

Tässä on toinen esimerkki HTML-koodista, joka määrittää onmouseenter-tapahtumankäsittelijän div-elementtiin:

<!DOCTYPE html>
<html>
<head>
  <title>DOM-tapahtumankäsittelijä</title>
</head>
<body>

  <div onmouseenter="alert('Hiiri on nyt sisällä!')">Tämä on div-elementti</div>

</body>
</html>

Harjoittele

Kokeile itse!

Valmis ryhtymään eettiseksi hakkeriksi?
Aloita jo tänään.

Hakatemian jäsenenä saat rajoittamattoman pääsyn Hakatemian moduuleihin, harjoituksiin ja työkaluihin, sekä pääset discord-kanavalle jossa voit pyytää apua sekä ohjaajilta että muilta Hakatemian jäseniltä.