JavaScript on tehokas skriptikieli, joka suoritetaan selaimessa ja mahdollistaa verkkosivun sisällön ja toiminnallisuuden muokkaamisen. Jos verrataan sitä taloon, JavaScript toimii talon toiminnallisuutena, kattaen esimerkiksi sähköjärjestelmät, putkistot, kotiautomaatiojärjestelmät ja keskuslämmityksen – käytännössä kaiken, mikä tarjoaa toiminnallisuutta.

Näin voimme lisätä JavaScriptin HTML-dokumenttiin:

Sisäinen JavaScript

JavaScript voidaan sisällyttää suoraan HTML-dokumenttiin käyttämällä <script>-tägiä. Tämä menetelmä soveltuu nopeiden, kertaluonteisten skriptien lisäämiseen.

Esimerkki:

Napsauta alla olevaa Click Me -painiketta.

Ulkoinen JavaScript

Suurempia skriptejä tai uudelleenkäytettävää koodia useilla sivuilla varten on tavallista käyttää ulkoisia JavaScript-tiedostoja. Luo erillinen JavaScript-tiedosto (esim. index.js) ja liitä se HTML-dokumenttiin käyttämällä <script>-tagia.

Esimerkki:

Varmista, että tarkastelet kaikkia kolmea esimerkin tiedostoa.

JavaScriptin perusteet

JavaScript mahdollistaa vuorovaikutteisuuden ja dynaamisen käyttäytymisen lisäämisen verkkosivuille. Tässä joitakin peruskäsitteitä:

Muuttujat

Muuttujia käytetään tietojen tallentamiseen. Muuttujat voidaan määritellä let- tai const-avainsanoilla.

let age = 30;
const name = "Peter";

Funktiot

Funktiot ovat uudelleenkäytettäviä koodilohkoja, jotka suorittavat tietyn tehtävän. Funktiot voidaan määritellä function-avainsanalla.

function greet() {
  alert('Hello, World!');
}

DOM-manipulointi

Document Object Model (DOM) kuvaa verkkosivun rakennetta. JavaScriptin avulla voidaan muokata DOM:ia ja siten muuttaa verkkosivun sisältöä ja käyttäytymistä dynaamisesti.

document.getElementById('myElement').innerHTML = 'New Content';

Ehtolauseet

Ehtolauseiden avulla voidaan suorittaa eri koodilohkoja määriteltyjen ehtojen perusteella.

if (age >= 21) {
  alert('You are an adult.');
} else {
  alert('You are a minor.');
}

Videotutoriaali