Kako vstavimo JavaScript datoteko v HTML datoteko

Pri izgradnji spletnih strani se velikokrat srečamo z JavaScriptom. Ponavadi kodo vstavimo v glavo dokumenta HTML in tako povečamo dolžino dokumenta in posledično tudi nalaganje same strani. Če imamo več strani je potrebno kodo dodati na vsako stran, kjer se ta uporablja.

Spreminjanje take kode zahteva veliko časa saj je potrebno spremeniti kodo na vsaki strani posebej. Da se izognemu temu in pohitrimo nalaganje same strani, vstavimo našo JavaScript kodo v zunanjo datoteko in jo povežemo z našimi stranmi preko povezave.


Primer enostavne Javascript kode na samem linku

<button onclick=”alert(‘Hello World!’)”>Hello World</button>


Primer klasične metode, kjer je koda v glavi v linku pa imamo klic na funkcijo

<script type=”text/javascript”><!–
function helloWorld() {
alert(‘Hello World!’) ;
}
// –></script>

<button onclick=”helloWorld();”>Hello World</button>

Zgornji del kode je tipični primer JavaScript kode. Na takšen način boste pisali vso kodo v JavaScriptu. Na hitro bom pojasnil, kaj pomeni, ampak za naš primer to ni pomembno.

Opis kode
Značka <script type=”text/javascript”><!– pove brskalniku, da sledi nekaj skriptnega jezika, ki se bo izvršil na uporabnikovi strani.

Atribut “Type” pove brskalniku za kakšen skriptni jezik gre, v našem primeru bo brskalnik uporabil JavaScript.

<! … // >
Ta del kode se uporablja, kadar vključimo kodo v HTML dokument. Preprečuje pa prikaz vsebine, ki je med začetkom in koncem.

function
Nam pove, da tu ustvarjamo novo funkcijo.

helloWorld()
“helloworld” je ime naše funkcije. par oklepajev sledi vsem imenom funkcije. Tu povemo funkciji, katere parametre oziroma spremenljivke bo prijela. V našem primeru jih nimamo, zato uporabimo samo oklepaja.

{ … }
Vse v oklepajih { } je glavn idel naše funkcije. V ta del pride koda, ki se izvrši, ko pokličemo funkcijo.

alert(‘Hello World!’);
Ta koda je enaka kodi, ki je bila prej v samem linku (onclick()), sedaj pa je shranjena v glavi.


Primer metode z uporabo zunanje datoteke
(kodo vstavimo v glavo strani)
<script type=“text/javascript” src=js-datoteka.js></script>

Rabimo še JavaScript datoteko. Vsebina datoteke “js-datoteka.js”:
function helloWorld() {
alert(‘Hello World!’) ;
}

Funkcijo kličemo:
<button onclick=”helloWorld();”>Hello World</button>

Komentiraj

*