PresentationerSlide 1/1

Modul 5 · Kapitel 5.1

Vad JavaScript tillför

JavaScript kan ge webbsidan beteende och interaktion.

Mål

Efter kapitlet ska du kunna...

  • förklara vad JavaScript används till
  • koppla en extern JavaScript-fil
  • förklara vad defer gör
  • använda konsolen för testning och felsökning

Tre språk

Olika ansvar på samma webbsida

HTMLInnehåll och struktur
CSSUtseende och layout
JavaScriptBeteende och interaktion

HTML

Vad finns på sidan?

<button>Öppna meny</button>

HTML skapar knappen och beskriver dess innehåll.

HTML bestämmer inte automatiskt vad som händer när knappen används.

CSS

Hur ser sidan ut?

button {
  background: teal;
  color: white;
}

CSS kan ändra knappens färg, storlek och placering.

JavaScript

Vad händer på sidan?

  • En knapp öppnar en meny.
  • Ett formulär visar feedback.
  • Text ändras utan att sidan laddas om.
  • Innehåll visas eller döljs efter en händelse.

Interaktivt exempel

En knapp ändrar sidan

Knappen utlöser en händelse. JavaScript reagerar och ändrar texten.

Antal klick: 0

Min webbsida

Texten har inte ändrats ännu.

Extern fil

Separera JavaScript från HTML

min-sida/
├── index.html
├── css/
│   └── style.css
└── js/
    └── main.js

JavaScript-koden skrivs i js/main.js.

Koppla filen

script-elementet

<script src="js/main.js" defer></script>
  • src anger sökvägen till filen.
  • defer styr när koden körs.
  • </script> behövs – elementet är inte självstängande.

Placering

script-raden i head

<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

Vänta tills HTML är läst

1
HTML börjar läsas2
JavaScript-filen laddas3
HTML läses klart4
Koden körs

Då kan JavaScript lättare hitta elementen som redan finns i HTML.

Första testet

Skriv till konsolen

console.log("JavaScript fungerar");

Raden ändrar inget på själva webbsidan.

Meddelandet visas i webbläsarens Console.

Öppna konsolen

Chrome DevTools

  1. Öppna sidan i Chrome.
  2. Högerklicka och välj Inspektera.
  3. Öppna fliken Console.
  4. Ladda om sidan.

Console

Så kan testmeddelandet se ut

ElementsConsoleSourcesNetwork
> JavaScript fungerar main.js:1

main.js:1 betyder att meddelandet kommer från rad 1 i filen.

Interaktiv konsol

Testmeddelande eller fel

Läs meddelandet och filens radnummer.

ElementsConsoleSources

Felmeddelanden

Läs från vänster till höger

Uncaught ReferenceError: message is not defined
    at main.js:4
  • Typ: ReferenceError
  • Problem: namnet message är inte definierat
  • Plats: main.js, rad 4

Små steg

Testa en sak i taget

1. KopplaSer du console.log?
2. HittaKan koden hitta elementet?
3. ÄndraHänder rätt sak på sidan?

När inget händer

Kontrollera i denna ordning

  1. Är filnamnet och sökvägen rätt?
  2. Har du sparat filerna?
  3. Har sidan laddats om?
  4. Finns ett fel i Console?
  5. Pekar felet på en viss rad?

Prova själv

Koppla din första JavaScript-fil

  1. Skapa mappen js.
  2. Skapa js/main.js.
  3. Koppla filen med script och defer.
  4. Skriv ett console.log()-meddelande.
  5. Öppna Console och kontrollera resultatet.

Sammanfattning

Kom ihåg

  • JavaScript ger sidan beteende.
  • Extern kod kan ligga i js/main.js.
  • script src kopplar filen.
  • defer väntar tills HTML har lästs.
  • Console visar testmeddelanden och fel.