Mikä on JavaScript ja ensimmäinen skriptisi

Tutustu verkon kolmanteen kieleen ja kirjoita ensimmäinen skriptisi joka puhuu selaimen konsolille.

Verkon kolme kieltä

Tasolta 1 tunnet kaksi kieltä:

HTML – sivun luuranko (mitä siinä on),
CSS – ulkoasu (miltä se näyttää).

Kolmas ja viimeinen kieli on JavaScript – käyttäytyminen (mitä tapahtuu kun…). Kun klikkaat ▶ YouTubessa ja video alkaa, kun verkkokauppa laskee hinnan, kun peli pitää kirjaa pisteistä – kaikki se on JavaScriptiä.

Missä JavaScript asuu

JavaScript asuu omassa tiedostossaan, aivan kuin CSS. Kerrot sivulle siitä <script>-tagilla – laita se aivan <body>:n loppuun, juuri ennen </body>:

  ...page content...

  <script src="script.js"></script>
</body>

💡

Miksi lopussa? Selain lukee sivun ylhäältä alas. Kun skripti on lopussa, koko sivu on jo olemassa, ja skripti voi heti työskennellä sen kanssa.

Näytän sinulle: ensimmäinen skriptisi

my-web-kansiossa luo tiedosto nimeltä script.js ja kirjoita siihen:
```
console.log("Hi, this is your website!");
```
index.html:ssä lisää rivi <script src="script.js"></script> juuri ennen </body> ja tallenna molemmat tiedostot.
Avaa sivu selaimessasi ja paina F12 (Macilla Cmd+Alt+I). Kehittäjäpaneeli avautuu – klikkaa Console-välilehteä.

Näetkö “Hi, this is your website!”? Ensimmäinen JavaScriptisi toimii! 🎉

Konsoli on salainen huone selaimessa, jossa ohjelmoijat juttelevat sivun kanssa. Vierailijat eivät koskaan näe sitä – se on vain sinulle. console.log(...) tarkoittaa “tulosta tämä konsoliin.” Käytät sitä koko ajan: se on paras tapa selvittää mitä skriptissä tapahtuu.

Konsoli osaa matematiikkaakin

Kokeile kirjoittaa tämä suoraan konsoliin (paina Enter jokaisen rivin jälkeen):

5 + 3
"Jake" + " is " + "awesome"
10 * 365

JavaScript on myös laskin – se laskee lukuja yhteen ja liimaa tekstejä (kutsutaan merkkijonoiksi, tunnistat ne lainausmerkeistä) peräkkäin.

Nyt sinun vuorosi 💪

Lisää script.js jokaiselle verkkosivusi sivulle (aivan kuin lisäsit kerran style.css:n).
Anna skriptin tulostaa verkkosivusi nimi konsoliin ja laskea montako tuntia kesälomaan on – esimerkiksi console.log("Hours left until vacation:", 48 * 24);.
Tee tahallaan virhe – poista lainausmerkki ja tallenna. Katso miltä virhe näyttää konsolissa (punainen teksti rivinumerolla). Sitten korjaa se. Tämä on tärkeä tapa: konsoli kertoo aina missä ongelma on.

✅

Tarkista itse: Kun avaat minkä tahansa verkkosivusi sivun, viestisi näkyy konsolissa. Tiedät miten avata konsoli ja miltä virhe näyttää. Se on koko perusta – seuraavasta oppitunnista alkaen alamme tehdä taikuutta sivulla.

Mitä opit tästä oppitunnista

JavaScript = verkon kolmas kieli: käyttäytyminen. Se kirjoitetaan script.js-tiedostoon ja yhdistetään <script src="...">-tagilla ennen </body>.
Konsoli (F12) on ikkunasi skriptiin: console.log() tulostaa asioita, virheet näkyvät punaisina rivinumerolla.
Lainausmerkeissä oleva teksti on merkkijono, ja merkkijonoja voi liimata yhteen +:lla. Lukuja voi laskea.