Hvad er JavaScript, og dit første script

Mød det tredje sprog på nettet og skriv dit første script, der taler til browserkonsollen.

De tre sprog på nettet

Fra niveau 1 kender du to sprog:

HTML – sidens skelet (hvad der er på den),
CSS – udseendet (hvordan det ser ud).

Det tredje og sidste sprog er JavaScript – adfærd (hvad der sker, når…). Når du klikker på ▶ på YouTube og videoen starter, når en onlinebutik 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, ligesom CSS. Du fortæller siden om det med et <script>-tag – placer det lige i slutningen af <body>, lige før </body>:

  ...page content...

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

💡

Hvorfor i slutningen? Browseren læser siden fra top til bund. Når scriptet er i slutningen, eksisterer hele siden allerede, og scriptet kan arbejde med den med det samme.

Vis mig: dit første script

I mappen my-web, opret en fil kaldet script.js og skriv ind i den:
```
console.log("Hi, this is your website!");
```
I index.html, tilføj linjen <script src="script.js"></script> lige før </body> og gem begge filer.
Åbn siden i din browser og tryk på F12 (på Mac, Cmd+Alt+I). Et udviklerpanel åbner – klik på fanen Console.

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

Konsollen er et hemmeligt rum i browseren, hvor programmører chatter med siden. Besøgende ser den aldrig – den er kun til dig. console.log(...) betyder “print dette til konsollen.” Du bruger den hele tiden: det er den bedste måde at finde ud af, hvad der sker inde i dit script.

Konsollen kan også regne

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

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

JavaScript er også en lommeregner – den lægger tal sammen og klistrer tekster (kaldet strings, du kan spotte dem på deres anførselstegn) ende til ende.

Nu er det din tur 💪

Tilføj script.js til hver side på din hjemmeside (ligesom du engang tilføjede style.css).
Lad scriptet printe din hjemmesides navn til konsollen og beregn, hvor mange timer der er til sommerferien – for eksempel console.log("Hours left until vacation:", 48 * 24);.
Lav bevidst en fejl – slet et anførselstegn og gem. Kig på, hvordan fejlen ser ud i konsollen (rød tekst med et linjenummer). Ret den så. Det er en vigtig vane: konsollen fortæller dig altid, hvor problemet er.

✅

Tjek dig selv: Når du åbner en hvilken som helst side på din hjemmeside, vises din besked i konsollen. Du ved, hvordan man åbner konsollen og hvordan en fejl ser ud. Det er hele fundamentet – fra næste lektion begynder vi at trylle på siden.

Det tager du med fra denne lektion

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