web-intro
  • Introduction
  • Introduksjon
    • Introduksjon
    • Din første nettside
      • Hello World
      • DevTools
  • Grunnleggende webutvikling
    • HTML
      • Elementer
      • Head og body
      • Semantikk
      • Bilder
      • Lenker
      • Knapper
      • DOM-en
    • CSS
      • Selectorer
      • Pseudo-klasser
      • Box model
      • Flyt
      • Layout
      • Responsivt
    • JavaScript
      • Filer
      • Variabler
      • Typer og operatorer
      • Strenger
      • Funksjoner
      • Listeoperasjoner
      • DOM-apiet
      • Promises
      • Async/await
      • Web-APIer
      • ESNext
      • Rammeverk
  • Neste steg
    • Universell utforming
    • React
    • Utviklingsmiljø
      • Dytt det til skyen!
    • Best practices
      • Linting og formatering
      • Code review
      • Keep it simple, stupid!
    • Flere ressurser
Powered by GitBook
On this page
  1. Grunnleggende webutvikling
  2. JavaScript

Filer

Vi bruker en script-tag når vi legger inn JavaScript-filer i html-dokumentene våre:

<!DOCTYPE html>
<html lang="no">
  <head>
    <meta charset="utf-8" />
    <title>En enkel HTML-side</title>
    <script type="text/javascript">
        console.log('her er mitt lille JavaScript!');
     </script>
  </head>
  <body>
    <h1>Hello World</h1>
    <p>Min første nettside</p>
    <script type="text/javascript">
        console.log('her er mitt andre lille JavaScript!');
    </script>
  </body>
</html>

Som regel skriver vi ikke script inne i html-filene, men har det i en egen .js-fil. Når dette er tilfellet importerer vi js-filene vi ønsker på denne måten:

<body>
  <script type="text/javascript" src="filnavn.js"></script>
</body>

Tips!

JavaScript er som regel noe av det som tar langst tid å hente inn på en nettside. Derfor er det også greit å legge nederst i body, så alt av statisk innhold og stiler er lastet først. I tillegg må script-fila lastes etter HTMLen hvis JavaScripten din skal bruke HTMLen. Dette fordi hvis scriptet lastes først, vil det ikke klare å få tak i HTML-elementene, fordi de ikke er tegnet ennå.

Oppgaver

  • Lag en egen .js-fil som inneholder en egen console.log, og importer det på siden. Obs! Husk å importere det nederst i body, så vi kan få tak i HTML-elementene på siden fra JavaScripten (les tipset over for å skjønne hvorfor)

PreviousJavaScriptNextVariabler

Last updated 5 years ago

Utvid nettsiden du satte opp i med de to scriptene i det øverste kodeeksempelet på denne siden og sjekk i consolet (DevTools) hva du får ut. Hvilket script ble kjørt først?

del 1