Hva er JavaScript, og ditt første script

Møt tredje sprog på nettet og skriv ditt første script, som snakker til nettleserkonsollen.

De tre språkene på nettet

Fra nivå 1 kjenner du to sprog:

HTML – sidens skjelett (hva der er på den),
CSS – utseendet (hvordan det ser ut).

Det tredje og siste sprog er JavaScript – atferd (hva som skjer, når…). Når du klikker på ▶ på YouTube og videoen starter, når en netthandel beregner en pris, når et spil holder styr på point – det er alt sammen JavaScript.

Hvor JavaScript bor

JavaScript bor i sin egen fil, som CSS. Du forteller siden om det med et <script>-tag – placer det på slutten av <body>, rett før </body>:

  ...page content...

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

💡

Hvorfor i slutningen? Nettleseren leser siden fra top til bund. Når scriptet er i slutningen, eksisterer hele siden allerede, og scriptet kan arbejde med den med en gang.

Jeg viser deg: ditt første script

I mappen my-web, lag en fil kalt script.js og skriv i den:
```
console.log("Hi, this is your website!");
```
I index.html, legg til linjen <script src="script.js"></script> rett før </body> og lagre begge filer.
Åpne siden i nettleseren og tryk på F12 (på Mac, Cmd+Alt+I). Et utviklerpanel åpner – klikk på fanen Console.

Ser du “Hi, this is your website!”? Ditt første JavaScript kjører! 🎉

Konsollen er et hemmelig rom i nettleseren, hvor programmerere snakker med siden. Besøgende ser den aldrig – den er kun til deg. console.log(...) betyder “print dette til konsollen.” Du bruker den hele tiden: det er den bedste måde at finne ut, hva som skjer inde i ditt script.

Konsollen kan også regne

Prøv at skrive dette direkte i konsollen (tryk Enter etter hver linje):

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

JavaScript er også en lommeregner – den legger tall sammen og limer tekster sammen (kalt strings, du kan spotte dem på deres anførselstegn) ende til ende.

Nå er det din tur 💪

Legg til script.js til hver side på din nettside (som du engang la til style.css).
La scriptet printe navnet på nettsiden din til konsollen og beregn, hvor mange timer der er til sommerferien – for eksempel console.log("Hours left until vacation:", 48 * 24);.
Lag bevidst en feil – slet et anførselstegn og gem. Se på, hvordan feilen ser ut i konsollen (rød tekst med et linjenummer). Ret den så. Det er en vigtig vane: konsollen forteller deg altid, hvor problemet er.

✅

Sjekk deg selv: Når du åpner en hvilken som helst side på din nettside, vises din melding i konsollen. Du ved, hvordan man åpner konsollen og hvordan en feil ser ut. Det er hele fundamentet – fra neste leksjon begynner vi at trylle på siden.

Dette tar du med deg fra leksjonen

JavaScript = det tredje sprog på nettet: atferd. Det skrives i en script.js-fil og forbindes med et <script src="...">-tag før </body>.
Konsollen (F12) er ditt vindue ind i scriptet: console.log() printer ting ud, feil vises i rødt med et linjenummer.
Tekst i anførselstegn er en string, og strings kan klistres sammen med +. Tal kan beregnes.