Dodajanje JavaScript v dokumente HTML

Obstaja več možnosti, kako JavaScript vključimo v dokument HTML.

Možnosti za vključitev JavaScript v dokument HTML so:

z uporabo priveska <script>
s povezano na datoteko z JavaScript z uporabo lastnosti src v znački <script>
kot lastnost v znački neka dogodka v HTML
z uporabo psevdo-URL JavaScript: in navedbo povezave

Obstajajo še druge nestandardne možnosti uporabe JavaScript v spletnih straneh. Lahko se izvedejo na strežniški strani, lahko se izvajajo tudi ločeno od dokumentov HTML. V nadaljevanju bo opisana samo uporaba JavaScript v HTML.

JavaScript je tolmačen, tolmač je del brskalnika. Programi so zapisani tam, kjer jih tolmač kar najlažje najde - v dokumentih HTML ali pa so v dokumentu povezave na datoteke z izvorno kodo. V dokumentu je tolmaču treba povedati, kateri podatki so izvorna koda, in katere podatke naj brskalnik ne prikaže kot navadno besedilo.

Privesek <script>

Osnovna postopek vključevanja JavaScript v HTML je uporaba priveska <script>. Brskalnik, ki je sposoben tolmačiti skriptni jezik, razume vse, kar je med značkama <script> in </script> kot skriptni jezik. Običajno je ta jezik JavaScript. Lahko pa je tudi kakšen drug skriptni jezik, npr. VBScript, ki ga podpira Microsoftov Internet Explorer. Večina brskalnikov ima privzet skriptni jezik JavaScript, vendar pa lahko to tudi zapišemo v oznako, npr zapis:

<script language="JavaScript">
   //stavki
</script>

se bo tolmačil kot jezik JavaScript. Druga možnost

<script language="VBS">
   //stavki
</script>

se bo prestavljala kot uporabljeni jezik VBScript. Brskalnik bo poskušal ignorirati neznano vsebino znotraj elementa <script> kot tudi napačno uporabljene spremenljivke in vrednosti. Bodite pazljivi kaj napišete kot jezik v znački <script>. Pri napačni navedbi lahko brskalnik ignorira pravilen zapis. V skladu s pravili W3C HTML jezika ni potrebni navajati. Toda pozor, potrebno je dodati lastnost type, ki definira tip MIME uporabljenega jezika. Za JavaScript MIME tipe je potrebno navesti "text/javascript":

<script type="text/javascript">
   //stavki
</script>

Uporaba lastnosti type ni enaka lastnosti language, ki jo lahko uporabljamo še za drugačno uporabo, npr. za uporabo narečja jezika JavaScript, ki je podprt v brskalniku. Tako lahko da v elementu <script> uporabljate navedbo jezika na naslednji način (samo če je dokument HTML tipa Transitional):

<script language="JavaScript" type="text/javascript">
   //stavki
</script>

Ker obstaja več različic programskega jezika, pa tudi vsi brskalniki ne poznajo JavaScript, so uvedene še dodatne značke, ki povedo, za katero različico JavaScripta gre.

<script language="JavaScript1.1">
   //stavki
</script>

Vsi skriptabilni brskalniki (od Navigatorja 2 naprej in IE 3 naprej) prepoznajo lastnosti language="JavaScript". Sodobnejši brskalniki imajo že imajo nadgradnje različic JavaScripta ali v primeru IE druge jezike kot je VBScript. Za primer: JavaScript prevajalnik vgrajen v Navigator 3 pozna različico jezika JavaScript 1.1; Navigator 4 in IE 4 pa vsebujeta različico JavaScript 1.4. Različice je po originalni poti potrebno navesti tako, da dodaš številko različice za jezikovnim imenom brez praznih prostorov, kot je:

<script language="JavaScript1.1">
    // stavki
</script>

<script language="JavaScript1.2">
    // stavki
</script>

Uporaba je odvisna od ustreznosti želenega skripta. Za primer, medtem ko je Navigator 6 združljiv z JavaScript 1.5, in deluje z vsemi prejšnjimi jezikovnimi verzijami JavaScript. Jezikovne novosti, ki so nove v JavaScript 1.5 se izvršijo samo če so jezikovne lastnosti nastavljene na samo ustrezno različico. Pisanje skript za posebne vrste verzij brskalnikov potrebuješ nekoliko previdnosti, posebno kadar lahko skripti vsebujejo jezikovne novosti omogočene samo v novejših brskalnikih. Kot demonstracija v obsežni razpravi o brskalnikih pojasnjenih kasneje v tem poglavju, bo morda potrebno vključiti mnogovrstne verzije od skriptnih funkcij, lastnih <script> priveskov z različnimi jezikovnimi lastnosti.

Najnovejši brskalniki Internet Exploler ne prepoznajo več lastnosti language. Tudi standard HTML v različici Strict ne dovoljuje več uporabe lastnosti language. Pisati je potrebno z uporabo tipa MIME:

<script type="text/javascript">
    // stavki
</script>

Pri takšnem pisanju žal ne moremo upoštevati različice jezika.

Privesek <script> je lahko ali v glavi ali v telesu dokumenta. V dokumentu lahko uporabimo toliko priveskov <script>, kot želimo. Dokumenti bodo prebrali in izvedli vse skripte, razen tistih, ki so določene, da se izvedejo kasneje. V naslednjem primeru so napisani trije skripti, ki se izvedejo ena za drugo:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
       "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html lang="si" xml:lang="si" xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Uporaba elementa in oznake script</title>
</head>
<body>
<h1>Začnimo</h1>
<script type="text/javascript">
window.alert("Prvo okno.");
</script>
<h2>Nadaljujmo...</h2>
<script type="text/javascript">
window.alert("Drugo okno.");
</script>
<h2>... in ponovno</h2>
<script type="text/javascript">
window.alert("Tretje okno.");
</script>
</h1>Konec!</h1>
</body>
</html>

Opisani primer odprite v različnih brskalnikih. Brskalniki bodo izvajanje treh skript izvedli drugače.

Zapis v <head>

Posebno mesto za privesek <script> je namestitev v privesku <head> dokumenta HTML (glava dokumenta). Zaradi zaporednega tolmačenja spletnih dokumentov in zgradbe HTML se <head> vedno prebere in tolmači najprej, še preden se naloži telo dokumenta <body>. Zelo pogosto so v glavi definirane spremenljivke in funkcije, ki so kasneje uporabljene v dokumentu. Na spodnjem enostavnem primeru vidimo definicijo funkcije v glavi in njeno kasnejše klicanje v telesu dokumenta:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html lang="si" xml:lang="si" xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>JavaScript Pozdrav</title>
<script type="text/javascript">
function Test()
{
alert("Pozor! Pozor! JavaScript v glavi");
}
</script>
</head>
<body>
<h2>Skripta v glavi</h2>
<hr />
<script type="text/javascript">
Test();
</script>
</body>
</html>

Oglejte si v brskaniku.

JavaScript psevdo URL

V večini današnjih brskalnikov lahko večino skript izvedemo z URN (psevdo URL). JavaScript psevdo URL se prične z <script>JavaScript:</script>, nato pa sledi koda, ki se bo izvršila. Na primer, napišimo JavaScript:alert('Zdravo') neposredno v brskalnik.

V Netscape Navigatorju 4 in 6 je to mogoče dostopati do konzole JavaScript z tipkanjem ukaza neposredno v okence za URL. Ostali brskalniki ne omogočajo tako neposredne možnosti za testiranje kode JavaScript. Kodo moramo vključiti v dokument HTML.

<a href="JavaScript:alert('Zdravo! To je primer Psevdo URL!')">Klikni</a>

To lahko tudi preskusiš s klikom.

Seveda pa je mogoče še kaj več kot le preprost izpis niza, v naslednjem primeru, se bo po kliku na povezavo izračunala funkcija:

<a href="JavaScript:x=5;y=7;alert('Vsota = '+(x+y))">Klikni za izračun</a>

Klikni za izračun.

Seveda lahko z uporabo psevdo URL JavaScript le izpiše besedilo, izvede eno ali nekaj akcij ali naredi preprost izračun. Za kaj več pa moramo uporabiti ostale postopke. JavaScript psevdo URL predstavlja tudi problem za prazgodovinske brskalnike, ki ne podpirajo JavaScript. V tem primeru bodo povezave v brskalniku vidne, vendar se po kliku ne bo zgodilo nič. To lahko zafrustira uporabnike. Načrtovalci spletnih strani naj v takem primeru dodajo opozorilo za uporabnike, ki ne morejo uporabljati JavaScript:

<noscript>
<strong><em>
Opozorilo:Ta stran vsebuje JavaScript.
Vaš brskalnik pa tega ne podpira.
Hvala za obisk in na svidenje.
</em></strong>
</noscript>

Zunanja datoteka

Če se piše veliko skript za strani, ki so namenjene zahtevnejšim spletnim aplikacijam, je dobro razviti nekatere funkcije in tehnologije, uporabne za nekatere spletne strani. Rajši kot podvojiti izvorne kode vseh teh strani (in pri tem opraviti vse spremembe kopijam, glede novih lastnosti in napak), je bolje uporabiti skripitno knjižnico in jih povezovati z dokumenti HTML. Tak primer zunanjega skripta ne vsebuje drugega kot JavaScript značko <script> in ne kode HTML. Skriptna datoteka, ki se jo ustvari mora biti samo tekstovna datoteka in njeno ime mape se mora končati z dvočrkovnim podaljškom .js. Da bi ukazali brskalniku naj naloži zunanjo datoteko v pravem času v HTML, je potrebno dodati src pripis k znački <script> na sledeč način:

<script type="text/javascript" src="zunanja.js">
</script>

Oglej si primer.

Taka zvrst značke bi morala biti na vrhu dokumenta, zato, da se naloži pred drugimi v tekst integriranimi značkami <script>. Če se naloži več kot ena zunanja knjižnica, je najbolje vstaviti zaporedje takšnih značk na vrh dokumenta.

Zapomniti si je potrebno dve lastnosti o zgradbi značk zunanjih skript. Prvič, znački <script> in </script> morata biti v paru, tudi če ni ničesar med njima. Prvič, lahko se zamenja značke <script>, ki podrobno opišejo zunanje knjižnice z v isti dokument vključenimi skripti. Drugič, ni dovoljeno vstavljati drugih stavkov skripta med začetnimi in končnimi značkami, če začetna značka vsebuje lastnost src.

Kako se kliče izvorno datoteko v lastnosti src je odvisno od fizične lokacije in od vrste zapisa HTML. V gornjem primeru, je datoteka .js predvidoma v isti mapi kot HTML, ki vsebuje to značko. Toda v primeru sklicevanja na neodvisen URL, je protokol za to datoteko http:// (enako kot z HTML datoteko):

<script type="text/javascript" src="http://www.cool.com/hotscript.js">
</script>

Zelo pomembno orodje pri uporabi skriptnih knjižnic s spletnimi dokumenti je to, da program spletnega strežnika ve, kako shraniti datoteke s končnicami .js k tipu MIME. V primeru uporabe JavaScript v tej obliki, je potrebno najprej preskusiti s testnim primerom, preden se uporabi na strežniku.

Ko uporabnik vidi izvorno kodo spletne strani, ki povezuje zunanjo skriptino knjižnico, sicer ne vidi kode datoteke .js, pa čeprav brskalnik ravna z naloženo skripto kot z delom dokumenta. Kakorkoli že ime ali URL datoteke .js je viden (pokazan točno tako kot je viden v izvorni kodi). Vsak lahko izklopi JavaScript v brskalniku in odpre to datoteko (z uporabo protokola http), da vidi izvorno kodo datoteke .js. Z drugimi besedami, zunanja JavaScript izvorna koda nič bolj skrita pred ogledom, kot je skrita notranja JavaScript koda.

Predem preskusimo skripte, moramo vedeti ali je JavaScript vključen ali ne. V zadnjem času razvijalci spletnih strani množično pišejo skripte, ki naj bi delovale v vseh situacijah. Nekateri (resda prazgodovinski) brskalniki nimajo tolmača, ki bi razlagal JavaScript. Lahko pa tudi uporabnik izklopi JavaScript in skripti so ignorirani. Obstajajo postopki, ki omogočajo zaznavanje tolmačenja JavaScript v brskalniku. Izdelati je zato mogoče vzporedne strani brez JavaScript. Samo v IE4+ in NN6+ lahko skripta nadomesti navadni HTML z vsebino, ki že vsebuje skripte.

Gor e-gradiva JavaScript Rezervirane besede Brskalniki

SERŠ Maribor : Strokovna gimnazija : 2003 : Gregor Smogavec

e-gradiva	HTML	CSS	JavaScript	Načrtovanje

			SERŠ Maribor		Iskanje	Primeri