Vad är JavaScript – och ditt första script

Möt webbens tredje språk och skriv ditt första script som pratar med webbläsarens konsol.

Webbens tre språk

Från nivå 1 kan du två språk:

HTML – sidans skelett (vad som finns på den),
CSS – utseendet (hur det ser ut).

Det tredje och sista språket är JavaScript – beteendet (vad som händer när…). När du klickar på ▶ på YouTube och videon startar, när en nätbutik räknar ut ett pris, när ett spel håller poäng – det är allt JavaScript.

Var JavaScript bor

JavaScript bor i sin egen fil, precis som CSS. Du berättar för sidan om den med en <script>-tagg – placera den längst ner i <body>, precis före </body>:

  ...page content...

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

💡

Varför längst ner? Webbläsaren läser sidan uppifrån och ner. När scriptet ligger längst ner finns hela sidan redan, och scriptet kan jobba med den direkt.

Jag visar: ditt första script

I mappen my-web, skapa en fil som heter script.js och skriv in:
```
console.log("Hi, this is your website!");
```
I index.html, lägg till raden <script src="script.js"></script> precis före </body> och spara båda filerna.
Öppna sidan i webbläsaren och tryck F12 (på Mac, Cmd+Alt+I). En utvecklarpanel öppnas – klicka på fliken Console.

Ser du “Hi, this is your website!”? Ditt första JavaScript körs! 🎉

Konsolen är ett hemligt rum i webbläsaren där programmerare chattar med sidan. Besökare ser den aldrig – den är bara för dig. console.log(...) betyder “skriv ut det här i konsolen.” Du använder den hela tiden: det är det bästa sättet att ta reda på vad som händer inuti ditt script.

Konsolen kan räkna också

Prova skriva det här direkt i konsolen (tryck Enter efter varje rad):

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

JavaScript är också en miniräknare – den adderar tal och klistrar ihop texter (kallas strängar, du känner igen dem på citattecknen) i rad.

Nu är det din tur 💪

Lägg till script.js på varje sida av din webbplats (precis som du en gång lade till style.css).
Låt scriptet skriva ut din webbplats namn i konsolen och räkna ut hur många timmar som är kvar till sommarlovet – till exempel console.log("Hours left until vacation:", 48 * 24);.
Gör medvetet ett misstag – radera ett citattecken och spara. Titta hur felet ser ut i konsolen (röd text med radnummer). Fixa det sedan. Det här är en viktig vana: konsolen berättar alltid var problemet är.

✅

Kolla själv: När du öppnar vilken sida som helst på din webbplats dyker ditt meddelande upp i konsolen. Du vet hur man öppnar konsolen och hur ett fel ser ut. Det är hela grunden – från nästa lektion börjar vi trolla på sidan.

Det här tar du med dig från lektionen

JavaScript = webbens tredje språk: beteende. Det skrivs i en script.js-fil och kopplas med en <script src="...">-tagg före </body>.
Konsolen (F12) är ditt fönster in i scriptet: console.log() skriver ut saker, fel visas i rött med radnummer.
Text i citattecken är en sträng, och strängar kan klistras ihop med +. Tal kan räknas ut.