Skripti kaasamine HTML lehel

Kuigi mõningate reservatsioonidega on JavaScript programmi põhimõtteliselt võimalik käivitada ka .js faili kujul otse töölaualt, on sellesisuliste skriptide enimlevinud käivitamise moodus siiski käivitamine osana veebilehest. Olgu programmi eesmärgiks vormi väljade kontroll, täiendavate andmete pärimine serverilt AJAX päringuna või muu selline tegevus. JavaScripti kaasamiseks HTML lehe sees on võimalik kasutada <script> silti.

Ajalooliselt oli <script> silt mõeldud erinevate programmeerimiskeelte jaoks. Suhteliselt kasutatav oli varem näiteks VBScript ehk Visual Basic Scripting Edition. Kuna VBScript töötab ainult Microsoft Internet Explorer brauserites, samas kui JavaScript on vaikimisi skriptimiskeeleks kõikides skriptimisvõimelistes brauserites, ei ole VBScript hoolimata Internet Exploreri jätkuvalt suurest turuosast eriti kasutatav ning on muutunud üsnagi marginaalseks. Reeglina kasutatakse <script> silti HTML lehe sees seega ainult JavaScripti programmide kaasamiseks.

Silti saab kasutada peamiselt kahel juhul - esiteks kui skript asub algussildi <script> ja lõpusildi </script> vahel tekstikujul ning teiseks, kui skript ligitakse lehele läbi välise faili, kasutades src atribuuti.

<script>
  alert(1);
</script>

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

Juhul kui skript laetakse sisse välise failina, ei pea selles sisalduma enam eraldi <script> või mingit muud HTML märgistust. Näites toodus alert.js faili sisu võiks siis olla järgmine:

alert(1);

Sildi <script> juures on võimalik kasutada mitmeid atribuute - näiteks eespool kasutatud src, mis lingib käivitamiseks lehele välise JavaScript faili. Juhul kui kasutatavaks keeleks on JavaScript 1.5 või selle JScript analoog, siis polegi rohkem atribuute <script> sildi defineerimisel vaja kasutada, kuna JavaScript 1.5 on kõikides brauserites vaikimisi skriptimiskeeleks.

Läbimaks osade HTML validaatorite kontrolli võib sildi juurde lisada siiski täiendava atribuudi type, mille väärtuseks peaks olema kasutatava skriptimiskeele MIME tüüp. JavaScripti puhul peaks selleks väärtuseks olema „text/javascript“. RFC 4329 dokument soovitab kasutada varianti „application/javascript“, kuid osade vanemate brauserite puhul võib see probleemiks osutuda ning hetkel veel tasub jääda „text/javascript“ väärtuse juurde.

Varemalt on kasutatud ka atribuuti language, kuid see on praeguseks vananenud ja seda pole mõtet kasutada. Atribuuti kasutati algselt skriptimiskeele valikuks (JavaScript või VBScript) ning ka JavaScripti nõutud versiooni määramiseks.

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

Praeguseks on kogu selle funktsionaalsuse võtnud üle eelpool märgitud atribuut type. Näiteks kui tahame kasutada teist tüüpi JavaScripti versiooni, kui vaikimisi määratud (Mozilla põhistes brauserites on selleks 1.6), saab seda teha HTTP päises lisaded MIME tüübile ka soovitud versiooninumbri.

<script type="application/javascript;version=1.8"></script>

XHTML lehe korrektse vormistamise tarbeks tuleb skript tähistada CDATA märgenditega <![CDATA[ ja ]]>. CDATA on akrünüüm sõnadest Character Data ning on mõeldud XML formaadis failidesse

<script type="text/javascript">
//<![CDATA[
 ...
//]]>
</script>

Kuna CDATA märgendid ei ole JavaScripti poolt tunnistatud, tuleks need kasutamisel JavaScripti jaoks välja kommenteerida.

<script> silti saab HTML koodis paigutada praktiliselt kuhu iganes - brauser käivitab selle igal juhul - kuid suvaline positsioon ei pruugi olla sugugi kõige optimaalsem.

JavaScript faili laadimine blokeerib brauseris kõik muud tegevused. See tähendab, et samal ajal kui laetakse alla <script> sildi poolt määratud JavaScript fail, jäävad pildid, CSS failid, Flash failid ja ka järgnevad JavaScript failid laadimisel ootele. Neid faile hakatakse edasi laadima alles siis, kui JavaScript fail on laetud ja käivitatud. Kui näiteks pildifaile suudab brauser korraga alla tõmmata mitu, avades selleks serveriga vajaliku arvu ühendusi, siis JavaScripti laadimise ajal seda võimalust ei kasutata.

Arvestades JavaScript failide laadimise eksklusiivsust brauseri suhtes, tasub skriptide laadimine jätta alati kõige viimaseks või vähemalt laadida need peale CSS faile - sellisel juhul oskab brauser esialgse HTML failis oleva sisu ekraanile CSS failide alusel välja joonistada ning kasutaja jaoks ei teki häirivat viivitust, nn. valget lehte.

Tuleb ka arvestada, et kui skript laetakse sisse HTML koodis enne lehekülje sisuelemente, ei saa skript käivitumisel neid elemente kasutada. Seda seetõttu, et skripti käivitumise hetkel (skript käivitatakse kohe peale allalaadimist), pole brauser veel liikunud vastava sisuelemendi juurde ega lisanud seda DOM puusse.

<script>alert(document.getElementById('tekst').innerHTML);</script>
<div id="tekst">Test tekst</div>
<script>(document.getElementById('tekst').innerHTML);</script>

Esimene <script> silt tekitab veateate (selleks hetkeks pole veel sisuelementi <div id="tekst"/> laetud), aga teine väljastab juba teate sisuga „Test tekst“.

Seega sisuelementidega manipuleerivad skriptid tuleks panna kas lehekülje lõppu või defineerida need päises sobiva sündmuse tegevusena, näiteks window.onLoad juurde. Kui leht on täielikult laetud, siis sündmus window.onLoad käivitab ka soovitud skripti.

Mõnikord on mõistlik JavaScript faile kohe mitte sisse laadida või laadida neid vastavalt mingisugustele kontrollitavatele tingimustele - näiteks kui brauseris on kindel küpsis seatud, siis laetakse üks JavaScript fail, aga kui seda pole, siis laetakse teine.

Üheks võimaluseks on kasutada document.write funktsiooni. Sellega saab lehe laadimisel kirjutada sobivasse kohta dünaamiliselt uue <script> sildi, mis seejärel ka kohe serverist ära laetakse.

document.write('<script src="/script.js" type="text/javascript"></script>');

Alati pole selline lähenemine siiski võimalik, kuna document.write on kasutatav ainult lehe laadimise ajal. Kui leht on kord juba laetud ja brauseris renderdatud, siis document.write kirjutab terve lehekülje üle, mitte ainult seda kohta kus ta ise asub.

Teine võimalus on lisada <script> silt dünaamiliselt lehe DOM puusse.

var skript = document.createElement('script');
skript.type = "text/javascript";
skript.src = "skript.js";
document.getElementsByTagName("head")[0].appendChild(skript);

Selline skript loob uue DOM elemendi, mis on script tüüpi (uus <script> silt), seab selle atribuudid, sh. ka laetava skriptifaili aadressi ning lisab elemendi lehe DOM puu päisesse. Peale seda laeb brauser serverist vastava skriptifaili alla ning käivitab selle. Erinevalt document.write meetodist saab antud varianti kasutada suvalisel hetkel skripti eluea jooksul.