JavaScript on tehokas skriptikieli, joka suoritetaan selaimessa ja mahdollistaa verkkosivun sisällön ja käyttäytymisen 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

Voimme sisällyttää JavaScriptin suoraan HTML-dokumenttiin käyttämällä <script>-tagia. Tämä tapa on hyödyllinen nopeiden, kertaluonteisten skriptien lisäämiseen.

Esimerkki:

Ole hyvä ja napsauta alla olevaa Klikkaa minua -painiketta.

Ulkoinen JavaScript

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

Esimerkki:

Muista tarkistaa kaikki kolme esimerkin tiedostoa.

JavaScriptin perusteet

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

Muuttujat

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

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

Funktiot

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

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