Hvor bør script-tagen plasseres i HTML?
Skrevet av Arild den 19. June, 2011 i Programmering, Webutvikling | 
0 kommentarer
Når man skal kjøre et JavaScript på en HTML-side, er det mange som tror at plasseringen av script-tagene i dokumentet har lite å si. Det er altså feil. Mange er også av den oppfatning at script-tagene skal plasseres inne i head-tagen. Dette er bare delvis sant; ifølge DTD-en er det også fullt mulig å legge script-tagene inne i body-tagen.
Med denne kunnskapen i lomma har vi en gyllen anledning til å skrive mer oversiktlig JavaScript-kode.
Script-tag i head
La oss gå ut ifra denne koden:
<!doctype html>
<html lang="no">
<head>
<meta charset="utf-8">
<title>Mitt HTML-dokument</title>
<script type="text/javascript">
window.onload = function() {
var p = document.getElementById('mittAvsnitt');
alert(p.innerHTML);
}
</script>
</head>
<body>
<p id="mittAvsnitt">Denne setningen skal vises i en
alert-boks ved hjelp av JavaScript.</p>
</body>
</html>
(Merk: Jeg har skrevet JavaScriptet direkte inn i HTML-dokumentet. Dette er noe jeg ikke vil anbefale i vanlig praksis. Jeg har bare gjort det slik denne gangen for å forenkle eksemplet.)
Vi har her et stykke JavaScript som skal ha tilgang til et DOM-element (nemlig avsnittet vårt) og skrive ut hva som står inne i det i en alert-boks (linje 8-9). Når vi har et JavaScript som er avhengig av å kommunisere med DOM-en, og vi i tillegg plasserer script-tagen inne i head-tagen vår, er vi nødt til å pause JavaScriptet vårt og vente til hele HTML-dokumentet er ferdig innlastet. Først når det er konvertert til en DOM av nettleseren kan vi kjøre JavaScriptet vårt. Derfor bruker vi window-objektet sin onload-event, som sørger for at funksjonen vår ikke kjører før HTML-dokumentet er ferdig innlastet.
Script-tag i body
Denne typen sjekking er det derimot ikke behov for hvis vi plasserer scriptet vårt nederst i body-elementet. Regelen er at all HTML over script-tagen i dokumentet vil være ferdig innlastet før scriptet kjøres. Med andre ord: Hvis du setter scriptet nederst i body-tagen, betyr det at alt innhold i dokumentet vil være ferdig innlastet idet scriptet kjøres:
<!doctype html>
<html lang="no">
<head>
<meta charset="utf-8">
<title>Mitt HTML-dokument</title>
</head>
<body>
<p id="mittAvsnitt">Denne setningen skal vises i en
alert-boks ved hjelp av JavaScript.</p>
<script type="text/javascript">
var p = document.getElementById('mittAvsnitt');
alert(p.innerHTML);
</script>
</body>
</html>
Konklusjon
Scriptet ser nå en del ryddigere ut og er dessuten effektivisert. Jeg gjorde det også slik da vi så på import-funksjonen jeg skrev i JavaScript i dette blogginnlegget. Ettersom det ikke medfører noen ulemper å plassere scriptene våre nederst i body-tagen, er det ingen grunn til å la være å gjøre det. Altså er det trygt å innprente følgende setning:
Alle script legges i bunnen av HTML-dokumentet.
Script-tag i HTML5
Det bør likevel nevnes at script-tagen i HTML5 har fått et nytt attributt: async. Hvis denne settes til false, vil kjøringen av scriptet skje synkront, altså etter at HTML-koden er ferdig innlastet – uavhengig av hvor du plasserer script-tagen. Hva du gjør, er fullstendig opp til deg, men husk at det er en merkbar andel av verdens befolkning som fremdeles bruker nettlesere som ikke støtter HTML5.
Kommentarer