<script> - HTML

Lær at bruge <script> til at udføre JavaScript eller anden script kode på hjemmesiden

Introduktion

<script> bruges til at inkludere eller referere til script kode i et HTML dokument.

Typisk vil script koden være JavaScript.

Se også mozilla.org, w3.org, Hvad er JavaScript?.

Element og attributter

Her ses hvordan <script> bruges med tilhørende attributter.


Attribut Betydning Mulige værdier
src Adresse til eksternt script For eksempel :
mappe/filnavn.js
type Scriptets MIME type.
I HTML5 er JavaScript standard så man kan undlade attributten hvis man vil
For eksempel :
text/javascript
async Scriptet udføres asynkront så snart det er tilgængeligt.

(bruges kun hvis src er sat)
[boolsk udtryk]
defer Scriptet udføres først når siden er færdig med at blive parset.

(bruges kun hvis src er sat)
[boolsk udtryk]
crossorigin (ikke standardiseret)
charset Bruges til at fortælle character encoding

(bruges kun hvis src er sat)
language bruges ikke mere (deprecated).
Brug type attributten i stedet


I <script> uden async og defer attributter bliver koden hentet og udført med det samme før browseren parser resten af siden.

Brug ikke document.write() fra et <script> som bruger async eller defer attributterne.

Grundlæggende

Her bruges <script> til at inkludere JavaScript kode i et HTML dokument.

Her bruges <script> til at referere til en fil med JavaScript kode.
Så kan man have HTML og JavaScript adskilt i hver sin fil.

Script element i HTML5

I HTML5 kan man undlade type="text/javascript" hvis man ønsker, da JavaScript er standard sproget for <script>.

Demo 2

Cache kontrol

Når man inkludere en ekstern fil kan browseren gemme filen i cache og indlæse fra cache når man i fremtiden besøge hjemmesiden.
Det er meget smart fordi så skal browseren ikke downloade script filen hver en side indlæses.
Men det giver et problem når man ændre i den ekstern fil og browseren fortsat bruger den gamle cachede fil.
For at undgå dette problem man kan ændre URL adressen ved at skifte filnavn eller tilføje en parameter manuelt.
Man kan også server-side hente et timestamp på hvornår filen sidst er ændret og automatisk ændre URL adressen.

Noscript

I tilfælde af JavaScript er slået fra i browserens indstillinger kan man informere brugeren om dette ved at bruge <noscript>.
Ellers kan brugeren sidde og undre sig over hvorfor ting på hjemmesiden ikke virker.

I Firefox kan man teste det ved at sætte about:config?filter=javascript.enabled til false.

Placering af script element, defer og async attribut

<script> elementet kan placeres i <head> delen af HTML koden hvis noget af koden kræves for at indlæse hjemmesiden.
Det kan dog blokere for parallel download at andre filer på hjemmesiden har jeg læst.

defer attributten kan bruges til at fortælle browseren at den kan downloade andre filer samtidig hvis scriptet ikke indeholder kode som document.write().
defer attributten bruges kun hvis man indlæser en eksternt fil (med src attributten).
Med defer attributten indlæses scriptet først når resten af siden er færdigt.


async attributten er ny i HTML5 og fungere vist sådan at scriptet kan blive downloadet i en anden rækkefølge end sådan som det der indsat i HTML koden hvis det ikke har nogen betydning hvilken rækkefølge JavaScript koden downloades i.


Ellers kan man placere <script> elementet i bunden af <body> delen af HTML koden hvilket ifølge hjemmeside-optimerings-programmer som YSlow kan gøre hjemmesiden hurtigere at indlæse fordi der ikke blokeres for at andre filer kan hentes samtidigt (som når <script> er placeret i <head> delen).

Skriv din kommentar

Spørg mig om hvad som helst
Du kan også skrive direkte til mig på
Stem
Søg
Language

Select English to navigate the website in English. Things like the navigation menu and contact form will be in English, but the main content on each page will not be translated.