Načrtovanje in razvoj spletnih aplikacij

Vključitev JavaScripta v HTML

JavaScript izvorno kodo programa vključimo v HTML dokument kjerkoli, torej v glavo (head) ali telo (body) dokumenta. Program lahko razbijemo tudi na več delov in vključimo vsak del posebej s svojo oznako script, pri čemer jih je nekaj v glavi, nekaj pa v telesu dokumenta:


Tolmač za JavaScript je vgrajen v vseh novejših brskalnikih. Aktiviramo ga s pomočjo oznake <script>, ki jo vgradimo v dokument HTML. Vso besedilo, ki sledi do oznake </script>, bo tolmač razčlenil in sproti tolmačil:

<script> ...program... </script>

 

V ta del spletne strani je smiselno vključevati funkcije, to je koda za katero ne želimo, da bi se "pomešala" z ostalim delom. Funkcije lahko nato pokličemo kadarkoli, njen klic pa je enak kot pri večini ostalih programskih jezikov.

V primeru je funkcija mojaFunkcija() vključena v zaglavje HTML dokumenta. V telesu HTML dokumenta jo kličemo s klikom na gumb:

<!DOCTYPE html>  
<html>  
<head>  
   <title>JavaScript v glavi HTML</title>
   <script>
      function mojaFunkcija() {
         document.getElementById("odstavek").innerHTML = "Odstavek je bil spremenjen.";
      }
   </script>
</head>  

<body>  
  <h1>JavaScript v glavi HTML</h1>
  <p id="odstavek">Odstavek besedila...</p>
  <button type="button" onclick="mojaFunkcija()">Spremeni</button>
</body>  
</html>

JavaScript v glavi HTML

Odstavek besedila ...

Vključitev JavaScripta v <body>

Ta način uporabljamo takrat kadar ne želimo vsebine dati v funkcijo oziroma takrat kadar želimo, da se njena vsebina izpiše na tistem delu v dokumentu, kjer je tudi deklarirana.

V primeru je funkcija mojaFunkcija() vključena v telo HTML dokumenta. Funkcijo kličemo s klikom na gumb:

<!DOCTYPE html>  
<html>  
<head>  
   <title>JavaScript v telesu HTML</title>
</head>  
<body>  
  <h1>JavaScript v telesu HTML</h1>
  <p id="odstavek">Odstavek besedila...</p>
  <button type="button" onclick="mojaFunkcija()">Spremeni</button>
  <script>
    function mojaFunkcija() {
      document.getElementById("odstavek").innerHTML = "Odstavek je bil spremenjen.";
    }
  </script>
</body>  
</html>

JavaScript v telesu HTML

Odstavek besedila ...

Vključitev JavaScripta v <head> in <body>

Uporabimo lahko kombinacijo prejšnjih vključevanj pri čemer funkcije pišemo v head, ostalo kodo pa v body.


JavaScript v zunanji datoteki

Daljše programe JavaScript je nepraktično vključevati med kodo HTML. Prav tako tudi kodo JavaScript programa, ki ga potrebujemo v več dokumentih. V teh primerih se raje poslužimo možnosti, da kodo zapišemo v posebno datoteko, ki ji damo končnico .js. To datoteko pa vključimo v HTML takole:

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

Če imamo program zapisan na več datotekah, moramo na opisani način vključiti vsako datoteko posebej. Spet lahko to storimo v glavi ali telesu dokumenta HTML. Opozoriti pa velja, da z eno oznako script ne moremo kombinirati obeh načinov vključevanja programa. Za vsak del moramo uporabiti svojo oznako script.

Pri vključevanju kode z datoteke lahko z lastnostjo charset določimo, kakšno kodno tabelo smo uporabljali pri programiranju. Standardne oznake kodnih tabel za naše šumnike so utf-8 in iso-8859-2.

V primeru je funkcija mojaFunkcija() vključena v telo HTML dokumenta. Funkcijo kličemo s klikom na gumb:

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

Zunanji JavaScript

Odstavek besedila ...

Starejši brskalniki

Nekateri starejši brskalniki oznake script ne poznajo, zato programa, ki ga želimo vključiti z drugih datotek, ne bodo naložili. A to ni najhujši problem. Ti brskalniki bodo celoten program, ki ga napišemo znotraj dokumenta HTML, obravnavali kot običajno besedilo. Da bi to preprečili, je potrebno program zapisati v komentarju. Komentar v jeziku HTML pričnemo z <!--, končamo pa z -->. Tako dopolnjen primer vključitve programa v HTML bi zdaj izgledal takole:

<script type="text/javascript">
<!--
   ... program ...
//-->
</script>

Poševnici ob koncu komentarja označujeta vrstični komentar v JavaScriptu, s čimer smo zagotovili, da JavaScript te vrstice ne bo poskusil tolmačiti. Če bi tudi tam na začetku vrstice napisali dve poševnici, bi ju brskalnik, ki značke script ne pozna, prikazal kot dva navadna znaka. Dogovorjeno pa je, da znaki za začetek komentarja takoj za oznako script ne spadajo k programu.

V starih brskalnikih, ki oznake script ne poznajo, vsebina dokumenta verjetno ne bo takšna, kot smo si jo zamislili. Da bi bralca na to opozorili, lahko uporabimo oznako noscript, ki jo poznajo samo brskalniki, ki poznajo tudi oznako script. Ti brskalniki bodo vso vsebino med <noscript> in </noscript> preprosto ignorirali, medtem ko bodo stari brskalniki, ki te oznake ne poznajo, ignorirali samo oznako, vsebino pa bodo prikazali.

JavaScript ni edini skriptni programski jezik, ki ga lahko uporabljamo v kombinaciji s HTML. Zato je pri starejših primerih pri uporabi oznake script določen tudi atribut typein njegova vrednost text/javascript, ki določa, kateri tolmač želimo aktivirati.

Danes je JavaScript privzeti skriptni jezik v HTML, zato zapis atributa type="text/javascript" ni več potreben.

Brskalniki z izključenim tolmačem za JavaScript

Večina brskalnikov z vgrajeno podporo za JavaScript ponuja možnost, da tolmač za JavaScript začasno izključimo. Kako se to naredi, je odvisno od vsakega brskalnika posebej. Pri pisanju dokumentov HTML moramo torej paziti tudi na možnost, da ima bralec v svojem brskalniku tolmač za JavaScript izključen. Tak brskalnik program, vključen z oznako script preprosto ignorira, pri čemer ni potrebno, da bi bil program zapisan v komentarju, vsebino, določeno z oznako noscript pa prikaže.