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

Ensimmäinen tapa sisältää JavaScript-koodia HTML-dokumenttiin on käyttää 

-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.

Toinen tapa käyttää JavaScriptia HTML-dokumentissa on viitata erilliseen JavaScript-tiedostoon. JavaScript-tiedosto liitetään HTML-dokumenttiin käyttämällä 

 kirjoitetaan tiedoston sijainti. Skripti voi sijaita sovelluksen omassa osoitteessa (jolloin siihen voidaan viitata pelkällä poululla ilman kokonaista URL-osoitetta) tai missä tahansa Internetissä.

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

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:

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:

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.

```javascript
<!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:

```html
<!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):

```javascript
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:

```html
<!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:

```html
<!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

@embed 6090db7eb0fb


JavaScriptin Käyttö HTML-Dokumentissa

Tämä kurssi on johdatus web-kehitykseen ja se keskittyy HTML:n, CSS:n, JavaScriptin ja taustajärjestelmien perusteisiin. Kurssin tavoitteena on antaa opiskelijoille tarvittavat taidot ja tietämys, jotta he voivat suunnitella ja kehittää ja ymmärtää yksinkertaisia web-sovelluksia.

Tämä kurssi on johdatus web-kehitykseen ja se keskittyy verkkosivustojen peruspalikoiden, eli HTML:n, CSS:n ja JavaScriptin sekä taustajärjestelmien perusteisiin. Kurssin tavoitteena on antaa sinulle tarvittavat taidot ja tietämys, jotta voit suunnitella ja kehittää yksinkertaisia full-stack web-sovelluksia, sekä ymmärtää muiden tekemiä web-sovelluksia.

Ensimmäisessä osassa opiskellaa HTML:ää joka on verkkosivustojen rakentamisessa käytetty merkintäkieli.


Toisessa osassa opiskellaan CSS:n perusteita, kuten tyylitiedoston käyttöä, sääntöjä, selektoreita ja muotoilua. Käsitellään myös CSS:n edistyneitä ominaisuuksia, kuten animaatioita ja responsiivista suunnittelua.


Kolmannessa osassa opiskellaan JavaScriptia joka on nykyisin valtavan tärkeä työkalu sekä frontend että backend -kehityksessä ja sitä kautta myös tietoturvassa ja eettisessä hakkeroinnissa.

Viimeisessä osassa opiskellaan rakentamaan taustajärjestelmiä Python Flask sovelluskehyksellä. Opit taustajärjestelmien perusteet, kuten tietokantojen käytön, autentikoinnin, istunnonhallinnan sekä pääsynhallinnan.

Voit tehdä kurssin tehtäviä omalla koneellasi jos haluat, mutta jokaisessa koodiesimerkissä on nappi jolla voit suoraan selaimessa ajaa kyseisen koodin ja nähdä miltä sivu näyttää, tai mitä skripti tulostaa. Sinun ei siis tarvitse asentaa mitään, mutta voit jos haluat.

On suositeltavaa mutta vapaaehtoista tehdä tili replit.com palvelussa, tällöin voit vain klikata "Fork" koodiesimerkeissä niin saat niistä kopion itsellesi jolla voit leikkiä

JavaScriptin Käyttö HTML-Dokumentissa

Inline-skriptit

Hakkeroinnin oppiminen alkaa tästä