HTML, CSS & JavaScript

Mörkt tema

Verktyg & felsökning (30 min) ​

💡 Introduktion till ämnet (flipped classroom) ​

⏰ Tidsåtgång: c.a. 30 min

Verktyg & debugging (14 min) ​

Var skriva JavaScript (5 min) ​

Läsa dokumentation (7 min) ​

📖 Läsanvisningar ​

🏋️ Övningsuppgifter ​

Grund ​

Lägg in följande <script>-block i en tom HTML-fil, och försök identifiera vad felet beror på. Använd konsolen i webbläsaren för att granska felmeddelandena.

Du behöver inte förstå, i nuläget, vad felet betyder.

Fixa felet 1
html
<script>
console.log(dog);

const dog = 'Lasse';
</script>
Fixa felet 2
html
<script>
  const dog 'Lasse';
  console.log(dog);
</script>
Fixa felet 3
html
<script>
  const dog = 'Lasse';
  dog = 'Bertil';
  console.log(dog);
</script>

Medel ​

Fixa felet 4
html
<script>
  const cat;
  cat = 'Rudolf';
</script>
Dokumentation

Utan att (nödvändigtvis) förstå de exakta detaljerna, läs dokumentationen för substring

Svår ​

Fixa felet 5
html
<script>
  function sayHello {
    console.log('Hello World!');
  }
</script>

Next level ​

Fixa felet 6
html
<script>
  // Varför skriver den inte ut hej?
  () => console.log('hej');
</script>

✅ Avstämning ​

Använd denna lista för att "checka av" att du förstår modulens koncept.

Terminologi
  • Console-fliken i webbläsaren
  • Debugging
Du är klar när…
  • Du vet hur du får upp console-verktyget
  • Du vet vilken rad och kolumn du hittar felet på
  • Du vet var du skriver JavaScript
  • Du vet vilka filer du behöver
  • Du vet varför JavaScript bör ligga precis innan </body>-taggen

Våga Fråga-lådan ​

Anonyma frågelådan

📚 Resurser ​

Klar? ​

Övrigt ​

Async & Defer (överkurs)

Det går att lägga till attribut i <script>-taggen i form av async och defer.

Om ett HTML-dokument innehåller väldigt mycket text/innehåll, som tar lång tid att ladda ner, så kan man lägga till defer-attributet i en <script>-tagg. Då laddas scriptet in i bakgrunden, och körs när DOM-strukturen är helt klar.

Taggar som utformas <script src="" defer></script> blockerar alltså aldrig inladdningen av resterande innehåll.

Script som har async-attributet körs direkt när de är inladdade, och blockerar inte heller HTML-dokumentets inladdning.

Skillnaden mellan async och defer är att async körs direkt när det är inladdat, medan defer körs precis innan eventet "DOMContentLoaded" körs.

Script med defer-attributet körs i den ordningen de länkas in i dokumentet.

Async

  • Laddar in i bakgrunden (precis som defer)
  • Kan avbryta DOM:ets inladdning & köras "mitt i" inladdningen
  • Körs så fort som möjligt när inladdningen är klar och i ingen särskild ordning

Defer

  • Laddar in i bakgrunden (precis som async)
  • Avbryter inte DOM:ets inladdning för att köras
  • Körs precis innan HTML-dokumentets DOMContentLoaded-event triggas

Happy coding!