JavaScript lahko v dokument HTML vključimo na več načinov. Kodo lahko zapišemo neposredno v dokument ali pa jo povežemo z zunanjo datoteko. V sodobni praksi je pomembno tudi razlikovanje med klasičnimi skripti in moduli.

Osnovna pravila

JavaScript v dokument HTML vključimo z elementom <script>.
Kodo lahko zapišemo neposredno v dokument ali pa jo povežemo z atributom src iz zunanje datoteke.
Pri sodobnih projektih je pogosto priporočljiva uporaba zunanjih datotek in modulov.
Zunanji klasični skripti v <head> pogosto uporabljajo atribut defer, da ne blokirajo razčlenjevanja dokumenta.
Modulni skripti z type="module" se odloženo obdelujejo že privzeto.

Pomni: Element <script> lahko vsebuje neposredno zapisano kodo ali pa se z atributom src sklicuje na zunanjo datoteko.

Primerjave

JavaScript v `<head>`

V del <head> pogosto vključimo funkcije, nastavitve ali povezave na zunanje datoteke. Če v glavi vključimo zunanji klasični skript, je pogosto smiselna uporaba atributa defer.

Namen atributa defer je, da brskalnik datoteko s skriptom prenese že med branjem dokumenta, vendar izvajanje skripta odloži do trenutka, ko je dokument HTML že razčlenjen. Tako skript ne ustavi sprotnega razčlenjevanja strani in je posebej primeren za skripte, ki uporabljajo elemente dokumenta, zapisane nižje v telesu strani.

Pomni: Atribut defer uporabljamo pri zunanjem skriptu z atributom src. Skript se prenese med razčlenjevanjem dokumenta, izvede pa se po končanem razčlenjevanju dokumenta.

Primer vključitve zunanjega skripta v del <head> z atributom defer:

<!DOCTYPE html>
<html>
<head>
   <title>JavaScript v glavi HTML</title>
   <script src="program.js" defer></script>
</head>
<body>
   <h1>JavaScript v glavi HTML</h1>
   <p id="odstavek">Odstavek besedila ...</p>
   <button type="button" onclick="mojaFunkcija()">Spremeni</button>
</body>
</html>

V zunanji datoteki program.js je lahko zapisana na primer taka funkcija:

function mojaFunkcija() {
   document.getElementById("odstavek").textContent = "Odstavek je bil spremenjen.";
}

Tak način je primeren, kadar želimo ohraniti dokument HTML bolj pregleden, kodo shraniti v ločeno datoteko in preprečiti, da bi skript po nepotrebnem ustavljal razčlenjevanje dokumenta.

JavaScript v `<body>`

Če je koda vezana neposredno na določen del dokumenta, jo lahko vključimo tudi v telo dokumenta. Pri krajših učnih primerih je tak pristop pregleden, pri večjih projektih pa je manj priporočljiv.

<!DOCTYPE html>
<html>
<head>
   <title>JavaScript v telesu HTML</title>
</head>
<body>
   <h1>JavaScript v telesu HTML</h1>
   <p id="odstavek1">Odstavek besedila ...</p>
   <button type="button" onclick="mojaFunkcija1()">Spremeni</button>

   <script>
      function mojaFunkcija1() {
         document.getElementById("odstavek1").textContent = "Odstavek je bil spremenjen.";
      }
   </script>
</body>
</html>

JavaScript v telesu HTML

Odstavek besedila ...

JavaScript v zunanji datoteki

Za večje projekte je običajno primerneje, da kodo shranimo v datoteko s končnico .js in jo vključimo z atributom src. Tak pristop izboljša preglednost in ponovno uporabo kode.

<script src="program.js" defer></script>

Z isto oznako <script> ne kombiniramo atributa src in programske kode v vsebini elementa. Za vsak način vključitve uporabimo samostojen element <script>.

JavaScript kot modul

Sodobni projekti pogosto uporabljajo module. Ti omogočajo uporabo ukazov import in export ter boljšo organizacijo kode.

<script type="module" src="app.js"></script>

Pomni: Pri modulih uporabimo type="module". Taki skripti se obdelujejo odloženo že privzeto.

Razlika med `defer` in `async`

Atributa defer in async uporabljamo pri zunanjih skriptih, da brskalnik datoteko prenese vzporedno z razčlenjevanjem dokumenta. Razlika je v trenutku izvajanja in v tem, ali je vrstni red skriptov ohranjen.

defer je primeren, kadar skript potrebuje dokument HTML ali kadar je pomembno, da se več skriptov izvede v istem vrstnem redu, kot so zapisani v dokumentu. async je primeren za samostojne skripte, pri katerih vrstni red ni pomemben, saj se izvedejo takoj, ko so preneseni.

<script src="glavni-skript.js" defer></script>
<script src="analitika.js" async></script>

Pozor: Če sta hkrati navedena atributa defer in async, se element obnaša tako, kot da je naveden samo async.

Priporočila

Pri krajših primerih je neposredna vključitev kode pregledna, pri večjih projektih pa je priporočljiva zunanja datoteka.
Klasične zunanje skripte v <head> pogosto vključimo z atributom defer.
Za sodobno zasnovo večjih programov uporabljamo module z type="module".
Pri onemogočenem izvajanju skriptov uporabimo element <noscript>, ki prikaže nadomestno vsebino.

Pozor: Atribut defer nima učinka pri notranjem skriptu brez atributa src. Pri modulih ga praviloma ne potrebujemo, ker se odloženo izvajanje uporabi že privzeto.

Element `<noscript>`

Element <noscript> uporabimo za nadomestno vsebino, kadar je izvajanje skriptov onemogočeno ali ni na voljo.

<noscript>
   V brskalniku je izvajanje skriptov onemogočeno ali nepodprto.
</noscript>

Nazaj

Naprej