Modul 5

Kap 5.1 - Vad JavaScript tillför

HTML ger struktur, CSS ger utseende och JavaScript kan ge sidan beteende.

Mål

  • Förstå vad JavaScript används till på en webbsida.
  • Koppla en extern JavaScript-fil med script.
  • Använda konsolen för att testa och felsöka.

JavaScript i webbläsaren

JavaScript körs i webbläsaren och kan reagera på sådant användaren gör. En knapp kan öppna en meny, ett formulär kan visa feedback och en text kan ändras utan att hela sidan laddas om.

Koppla en JavaScript-fil

Lägg ofta JavaScript i en egen fil, till exempel js/main.js. Använd defer så att HTML hinner läsas in innan skriptet körs.

Skriv script-raden i HTML-filen, oftast i slutet av head. Om din HTML-fil heter index.html och JavaScript-filen ligger i mappen js, ska sökvägen vara js/main.js.

<script src="js/main.js" defer></script>
Filstruktur och placering
  • index.html: här skriver du <script src="js/main.js" defer></script> i head.
  • js/main.js: här skriver du JavaScript-koden, till exempel console.log("JavaScript fungerar");.
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Min sida</title>
    <link rel="stylesheet" href="css/style.css">
    <script src="js/main.js" defer></script>
</head>

defer betyder att webbläsaren laddar JavaScript-filen men väntar med att köra koden tills HTML-dokumentet har lästs in. Det gör att JavaScript lättare kan hitta element på sidan.

Konsolen

Konsolen i utvecklarverktygen visar fel och kan skriva ut testmeddelanden.

console.log("JavaScript fungerar");

Skriv raden ovan i js/main.js, spara filen och ladda om sidan i webbläsaren.

  1. Öppna sidan i Chrome.
  2. Högerklicka på sidan och välj Inspect eller Inspektera.
  3. Klicka på fliken Console.
  4. Ladda om sidan om du inte ser meddelandet direkt.
Elements Console Sources Network
> JavaScript fungerar
main.js:1

Om något inte händer på sidan: öppna konsolen först. Ett felmeddelande kan ofta peka på raden där problemet finns.

Små steg

Ändra en sak i taget. Testa först att filen är kopplad, sedan att du kan hitta ett element, och först därefter att elementet ändras.