JavaScript

Kapitola 2.

Element `script`

Sluzi na vkladanie JavaScriptu (JS) do stranok HTML. atributy:

charset(nepovinny): Znakova sada kodu specifikovaneho pomocou atributu src. Zriedkave pouzitie, väcsina prehliadacov ho ignoruje
defer(nepovinny): Oznacuje, ze prevedenie scriptu je mozne bezpecne odlozit az do okamziku, kedy bude obsah dokumentu kompletne analyzovany a zobrazeny
src(nepovinny): Oznacuje externy subor, ktory obsahuje kod, ktory sa ma spustit
type (povinny): Obsahuje typ obsahu (tiez nazyvany ako MIME) skriptovacieho jazyka. Kvoli maximalne kompatibilite: "text/javascript"

Element script je mozne bud vlozit priamo do stranky HTML alebo sa da nacitat z externeho suboru.

<script type="text/javascript">
	function sayHI()
        {
        	alert("Ahoj");
        }
       
</script>

priklad (k2-p1)

Pri nacitani stranky sa zbytok obsahu nenacita a nezobrazi, pokoal sa nevyhondoti vsetok kod obsiahnuty v elemente script. V kode sa nesmie vyskytovat retazec </script>, nasledujuci kod by vyhodil chybu:

<script type="text/javascript">
	function sayHI()
        {
        	alert("</script>");
        }
       
</script>

priklad (k2-p2)

treba to odstranit napriklad rozdelenim toho retazca:

<script type="text/javascript">
	function sayHI()
        {
        	alert("</scr" + "ipt>");
        }
       
</script>

priklad (k2-p3)

Kod Javascriptu nacitany z externeho suboru:
<script type="text/javascript" src="example.js" />
Pripona suboru: *.js je nepovinna, zodpoveda nepisanej dohode. Pre väcsiu kompatibilitu sa odporuca uzavriet emement takto:
<script type="text/javascript" src="example.js"> </sctipt>
Je mozne nacitat script z vonkajsich domen, cize z domeny inej ako je domena sranky, ktora skript nacitava:
<script type="text/javascript" src="http://www.niekde.com/example.js">
Pri nacitani a interpretovani obsahu externeho suboru taktiez dochadza k pozastaveniu spravania obsahu stranky.

Umiestnenie znacky

Elementy script sa na stranke tradicne umiestnuju do elementu head

<html>
   <head>
   	<title>Ukazkova stranka</title>
   	<script type="text/javascript" src="example1.js"></script>
   	<script type="text/javascript" src="example2.js"></script>
   </head>
    <body>
      <!--Telo stranky-->
    </body>
</html>

Hlavny dovod k tomuto bol udrzat odkazy na externe subory spolu so subormi pre kaskadove styly v tej istej oblasti. nevyhoda je pri aplikaciach, kde je treba velmi vela JS-oveho kodu, pricom kym sa nenacita a neinterpretuje, nezacne sa s vykreslovanym stranky, co moze trvat znacnu dobu. preto moderne webove aplikacie maju vsetky odkazy na JS az v zavere elementu body:

<html>
   	<head>
   	  <title>Ukazkova stranka</title>
	</head>
    <body>
      <!--Telo stranky-->
   	  <script type="text/javascript" src="example1.js"></script>
   	  <script type="text/javascript" src="example2.js"></script>
    </body>
</html>

Takto sa najprv vykresli stranka a uzivatel nemusi cumiet na prazdne okno prehliadaca.

Odlozene spustenie skriptov

Jazyk HTML 4.01 zaviedol parameter defer, ktory signalizuje, ze dany script pri spusteni nezmeni strukturu stranky. Jeho nastavenie ma taky isty ucinok ako umiestnenie elementu script na koniec elementu body ako sme si ukazali vyssie.

<html>
   <head>
   	<title>Ukazkova stranka</title>
   	<script type="text/javascript" src="example1.js" defer="defer"></script>
   	<script type="text/javascript" src="example2.js" defer="defer"></script>
   </head>
    <body>
      <!--Telo stranky-->
    </body>
</html>

Tento parameter vsak podporuju len IE a Firefox, ostatné prehliacace ho ignoruju.

Zmeny v jazyku XHTML

Jazyk XHTML je prisnejsi, tento kod je v jazyku HTML platny, v jazyku XHTML uz nie:

<script type="text/javascript">
	function compare (a, b)
    {
    if (a < b ) {
    	alert("A je mensie ako B");
        } else if (a > b) {
        alert("A je väcsie ako B");
        } else {
        alert("A sa rovna B");
        }
    }
</script>

priklad (k2-p4)

Symbol mensita vo vyraze a < b sa interpretuje v jazyku XHTML ako zaciatok nejakej znacky, co sposoby syntakticku chybu, pretoze za symbolom mensitka nesmie byt medzera. Tato syntakticka chyba sa da opravit dvoma sposobmi. prvym je nahradit symboly mensitka (<) zodpovedajucou entitou HTML (<), vysledny kod potom vyzera nasledovne:

<script type="text/javascript">
	function compare (a, b)
    {
    if (a &lt; b ) {
    	alert("A je mensie ako B");
        } else if (a > b) {
        alert("A je väcsie ako B");
        } else {
        alert("A sa rovna B");
        }
    }
</script>

priklad (k2-p6)

Tento kod sa na stranke XHTML bez problemov spusti, je vsak horsie citatelny.

Druhou moznostou je je podla specifikacie jazyka XHTML obalit kod JS do sekcie CDATA. V jazyku XHTML a XML sa sekcieCDATA pouzivaju na oznacenie oblasti dokumentu, ktore obsahuju volne formatovany text, ktory nie je nutne analyzovat. Vdaka tomu je mozne v tejto seckii pouzivat lubovolne znaky bez toho, aby prislo k syntaktickej chybe:

<script type="text/javascript"> <![CDATA[
	function compare (a, b)
    {
    if (a < b ) {
    	alert("A je mensie ako B");
        } else if (a > b) {
        alert("A je väcsie ako B");
        } else {
        alert("A sa rovna B");
        }
    }
]]></script>

Takto je vyrieseny problem pre webove prehliadace podporujuce specifikaciu jazyka XHTML, mnoho prehliadacov vsak tuto specifikaciu stale nepodporuje a teda nepodporuju sekciu CDATA. To sa da obijst tak, ze znacky umiestnime do komentarov jazyka JS:

<script type="text/javascript"> 
//<![CDATA[
	function compare (a, b)
    {
    if (a < b ) {
    	alert("A je mensie ako B");
        } else if (a > b) {
        alert("A je väcsie ako B");
        } else {
        alert("A sa rovna B");
        }
    }
//]]>
</script>

priklad (k2-p7)

Tento sposob zapisu funguje vo vsetkych modernych prehliadacoch. Vyzera to sice krkolomne, jedna sa vsak o platny zapis v jazyku XHTML, ktory je zaroven elegantnym sposobom kompatibilny aj s prehliadacmi, ktore nepodporuju specifikaciu jazyka XHTML.

Element noscript

Tento element moze obsahovat akekolvek znacky HTML, ktore sa daju omiestnit do tela dokumentu okrem elementu script. Obsah tohto elementu sa zobrazi v dvoch pripadoch:

prehliadac nepodporuje skriptovanie
podpora skriptovania je v prehliadaci vypnuta

<html>
   <head>
   	<title>Ukazkova stranka</title>
   	<script type="text/javascript" src="example1.js" defer="defer"></script>
   	<script type="text/javascript" src="example2.js" defer="defer"></script>
   </head>
    <body>
       <noscript>
       	 <p>Tato stranka vyzaduje prehliadac s podporou JavaScriptu</p>
       </noscript>
      <!--Telo stranky-->
    </body>
</html>

Zaklady jazyka

Rozlysovanie velkych a malych pismeniek

Premenna test je ina premenna od premennej Test. Tuto vlastnost jazyka JS je treba mat stale na pamati. pri zakladani mien premennych a funkcii sa tieto nesmu vyberaz z klucovych slov jazyka JS. Napr. typeof je klucove slovo, ale typeOf uz mozeme pouzit pre nazov vlastnej funkcie.

Identifikatory

identifikator je nazov premennej, funkcie, vlastnosti alebo argumentu funkcie. Skladaju sa s jedneho alebo viacerych znakov v nasledujucom formate:

prvym znakom musi byt pismenko, podtrzitko (_) alebo znak dolaru ($)
pre vsetky ostatne znaky sa mozu pouzit pismenka, podtrzitka, znaky dolaru alebo cisla

Pismenka identifikatorou mozu obsahovat znaky rozsireneho kodovania ASCII alebo Unicode ako je Æ alebo Č, ale prilis sa to neodporuca. Identifikatory by sa mali (nie je to povinne ale odporuca sa to) riadit tzv. tavou konvenciou, cize prve pismenko slova ma byt male a kazde dalsie slovo zacina velkym pismenkom napriklad:

firstSecond
myCar
doSomethingImportant

Komentare

// toto je jednoriadkovy komentar

/* toto je komentar na
viac riadkov */

Prikazy

Prikazy sa ukoncuju bodkociarkou (;)

var sum = a + b;

Viac prikazov sa da uzavriet do bloku pomocou lavej zlozenej zatvorky ({) na ukoncit blok pomocou pravej zlozenej zatvorky (}).

if (test) {
	test = false;
    alert(test);
    }

Riadiace prikazy ako je napriklad if vyzaduju bloky kodu len ked sa ma vykonat viacej prikazov, ale je vhodnejsie pouzivat bloky kodu aj ked sa ma vykonat len jeden prikaz:

if (test)
	alert(test); //platny prikaz, ale nachylny k chybam, nemal by sa pouzivat
    
if (test) {
	alert(test); //preferovana varianta
    }

Klucove a vyhradene slova

Zoznam klucovych slov, nedaju sa pouzit ako identifikatory:

break	case	catch	continue
default	delete	do	else
false	finally	for	function
if	in	instanceof	new
null	return	switch	this
throw	true	try	typeof
var	void	while	with

Zoznam vyhradenych slov, nedaju sa pouzit ako identifikatory, su urcene pre buduce klucove slova podla standardu ECMA-262:

abstract	boolean	byte	char
class	const	debugger	double
enum	export	final	float
goto	implements	import	int
interface	long	native	package
private	protected	public	short
static	super	synchronized	throws
transient	volatile

pri pokuse pouzit krucove slovo ako identifikator prijde vo väcsine priehliadacov k chybe "ocakavany identifikator".

Premenne

Premenne su v ECMAScripre volne typovane, t.j. premnenna moze uchovavat rozny typ dat. K definovaniu premenne sa pouziva operator var, po ktorom nasleduje identifikator premennej:

 var message;

Premenna message ma tu bez inicializacie hodnotu undefined, pri definicii premennej mozeme rovno inicializovat jej hodnotu:

var message = "ahoj";

Premennej to priradi textovy retazec ako hodnotu, nedefinujeje ju ako textovu premennu, mozeme zmenit nie len jej hodnotu, ale aj typ:

var message = "ahoj";
message = 100; //v poriadku, ale neodporuca sa

Kod	Popis
\'	jednoduche uvodzovky
\"	dvojite uvodzovky
\&	ampersand
\\	opacne lomitko
\n	novy riadok
\r	carriage return
\t	tabelator
\b	backspace
\f	form feed

JS - Aritmetice operatory

Operator	Popis	Priklad	Vysledok
+	scitanie	x=y+2	x=7
-	odcitanie	x=y-2	x=3
*	nasobnenie	x=y*2	x=10
/	delenie	x=y/2	x=2,5
%	zvysok	x=y%2	x=1
++	zvysenie	x=++y	x=6
--	znizenie	x=--y	x=3

JS - Operatory porovnavania

Operator	Popis	Priklad
= =	rovna sa	x = = 8 je nepravda
= = =	je presne rovne (hodnota aj typ)	x = = =5 je pravda x = = ="5" je nepravda
!=	nerovna sa	x != 8 je pravda
>	je väcsie nez	x > 8 je nepravda
<	je mensie nez	x < 8 je pravda
>=	je väcsie alebo rovne	x >= 8 je nepravda
<=	je mnesie alebo rovne	x <= 8 je pravda

JS - Logicke operatory, x=6 a y=3

Operator	Popis	Priklad
&&	a zaroven	(x<10 && > 1) je pravda
\|\|	alebo	(x = =5 \|\| y = = 5) je nepravda
!	negacia	!(x = = y) je pravda

Conditional operator

Priraduje hodnotu na zaklade urcitrej podmienky:

Syntax

premenna=(podmienka)?hodnota1,hodnota2

Priklad

pozdrav=(navstrevnik=="direktor")?"Mily veduci","Mily"

Ak je hodnota premennej navstevnik "direktor", premennej pozdrav sa priradi hodnota "Mily veduci" inak sa jej priradi hodnota "Mily".

If Statement

Syntax:


if (podmienka)
	{
	prikazy, ktore maju byt vykonane, ked je splnena podmienka
	}

prikazy sa zadavaju malym

If..else Statement

Syntax:


if (podmienka)
	{
	prikazy, ktore maju byt vykonane, ked je splnena podmienka
	}
else
	{
	prikazy, ktore maju byt vykonane, ked nie je splnena podmienka
	}

If..else..if..else Statement

Syntax:


if (podmienka1)
	{
	prikazy, ktore maju byt vykonane, ked je splnena podmienka 1
	}
else if (podmienka2)
	{
	prikazy, ktore maju byt vykonane, ked je splnena podmienka 2
	}
else	{
	prikazy, ktore maju byt vykonane, ked nie je splnena podmienka 1 a 2
	}

Switch Statement

Syntax:


switch (vyraz)
{
case 1:
	vykonaj sekvenciu prikazov 1;
	break;
case 2:
	vykonaj sekvenciu prikazov 2;
	break;
default:
	sekvencia prikazov 3, ked nie je splnena ziadna z predchadzajucich podmienok
}

Napriklad:


<script type="text/javascript">
//Ziskam iny pozdrav v zavyslosti od dna v tyzdni
//Nedela=0,Pondelok=1,Utorok=2,...

var d=new Date();
theDay=d.getDay();

switch (theDay)
{
case 5:
	document.write("Konecne piatok!");
	break;
case 6:
	document.write("Hura sobota");
	break;
case 0:
	document.write("Ospala nedela");
	break;
case 1:
	document.write("Modry pondelok");
	break;
case 2:
	document.write("Pracovny utorok");
	break;
case 3:
	document.write("V stredu sa to uz lame");
	break;
default:
	document.write("Stvrtok, uz len 2 dni!");
	break;
}
</script>

Alert Box

Je to okienko s nejakou informaciou ktore vyskoci uzivetelovi a bez toho aby klikol na OK sa nedostane dalej. Syntax:

alert("nejaky text");

Priklad:


<html>
<head>
 <title>Alert Box</title>
 <script type="text/javascript">
  function show_alert()
   {
   alert("Ja som alert box!");
   }
 </script>
</head>
<body>
<input type="button" onclick="show_alert()" value="Ukaz Alert box" />
</body>
</html>

Confirm Box

Je to okienko s nejakou informaciou ktore vyskoci uzivetelovi a ma sa rozhodnut, ci s tym suhlasi alebo nie, cize stlacit "OK" alebo "Cancel". Ked uzivatel stlaci "OK", okno vrati do programu hodnotu "true", inak vrati hodnotu "false". Syntax:

confirm("nejaky text");

Priklad:


<html>
<head>
 <title>Confirm Box</title>
 <script type="text/javascript">
  function show_confirm()
   {
   var r=confirm("Stlac nejake tlacitko!");
   if (r==true)
     {
      alert("stracil si OK!");
     }
   else
     {
      alert("stracil si Cancel!");
     }
   }
 </script>
</head>
<body>
<input type="button" onclick="show_confirm()" value="Ukaz Confirm box" />
</body>
</html>

Prompt Box

Je casto pouzivane, ked chceme aby uzivatel vlozil nejaku hodnotu, napriklad pred vstupom na stranku. Ked sa zobrazi prompt box, uzivatel ma stlacit "OK alebo "Cancel" po vlozeni nejakej hodnoty. Ked Uzivatel stlaci "OK", box vrati vlozenu hodnotu. ked uzivatel stlaci "Cancel", box vrati nulu. Syntax:

prompt("nejaky text","prednastavena hodnota");

Priklad:


<html>
<head>
 <title>Prompt Box</title>
 <script type="text/javascript">
  function show_prompt()
   {
   var meno=prompt("Prosim vloz svoje meno","Martinko Klingacik");
   if (name!=null && name!="")
     {
      document.write("Ahoj " + name + "!");
     }
   else
     {
      document.write("Ahoj debil!");
     }
   }
 </script>
</head>
<body>
<input type="button" onclick="show_prompt()" value="Ukaz Prompt box" />
</body>
</html>