Ako na to | Príručka JavaScript | Základy
Donedávna sme mali možnosť sa v Internete stretnúť len so statickými stránkami. Inými slovami povedané, stránky vyzerali rovnako ráno, na obed i večer. Vďaka veľkému rozšíreniu a popularizácii skriptového jazyka JavaScript, teraz má každý možnosť si pomerne jednoduchým spôsobom stránku obohatiť o rôzne interaktívne prvky. Je možné v ňom naprogramovať hry, jednoduché aplikácie, prezentačné prvky a iné zaujímavé veci.
Kam si ho mám skryť ?!Skripty napísané v JavaScripte je možné umiestňovať v ľubovolnej časti dokumentu HTML. Niekedy je však vhodné, zahrnúť skript medzi párovú značku (tag) <head>. Význam má to hlavne vtedy, ak chceme zabezpečiť, aby návštevník stránky nemal možnosť nič na stránke urobiť, kým sa nenahrá samotný skript. Príklad 1.1: Vypísanie textu pomocou JavaScriptu <html>
<head>
<title>Moja prva JavaScriptova stranka</title>
</head>
<body>
<script language="JavaScript">
<!--
document.write("Vas prehliadac podporuje JavaScript");
// -->
</script>
</body>
</html>
Ak si tento príklad pozrieme v prehliadači podporujúcom JavaScript, na stránke sa objaví: Váš prehliadač podporuje JavaScript. V opačnom prípade sa zobrazí úplne prázdna stránka.
Aby prehliadač stránok vedel, že sa v stránke nachádzajú skripty, je potrebné dať zdrojový tvar skriptu medzi tag <script language="JavaScript"> a </script>. Komentárové tagy <!-- a --> sú prítomné z toho dôvodu, aby staršie prehliadače stránok, ktoré nedokážu interpretovať JavaScript, nevypisovali na stránke zbytočne zdroják skriptu.
V tomto skripte sa po prvýkrát stretávame s funkciou document.write(). Táto funkcia slúži na vypisovanie textu na stránke. Ak máme v úmysle si dať vypísať text, ktorý obsahuje úvodzovky prípadne chceme v texte využiť tagy, je potrebné použiť miesto document.write("text"), tvar document.write('text'). Je to z titulu, aby prehliadač nemal zmätok z toľkých úvodzoviek a aby vedel presne o čo nám ide. Haló? Kto je tam?V tejto časti si povieme niečo o dialógových oknách, ktoré je možné vyvolať pomocou JavaScriptu. Rozoznávame niekoľko typov dialógových okienok, a to: informačné (výstražné), potvrdzovacie (Ok/Storno), vstupné (vkládacie) a chybové (error).
Informačné okno je vhodné použiť v situáciách, kedy potrebujeme oznámiť návštevníkovi stránky nejaký oznam. Aktivuje sa vyvolaním funkcie window.alert().
Potvrdzovacie okno sa hojne používa v prípadoch, kedy potrebujeme zistiť odpoveď na otázku typu áno/nie. Aktivuje sa vyvolaním funkcie window.confirm(). Návštevník ma potom na výber, že či súhlasí s uvedenou otázkou (Ok) alebo nie (Storno).
Vstupné okno sa používa, keď potrebujeme získať od návštevníka stránky nejaké údaje. Aktivuje sa vyvolaním funkcie window.prompt().}
Chybové okno sa vyvolá automaticky v prípade, keď prehliadač narazí na neexistujúci príkaz/funkciu/metódu JavaScriptu, tzn. ak si nesprávne naprogramujeme svoj skript. :-) Príklad 1.2: Informačné okno
 | | <html>
<head>
<title>Vystrazne okno</title>
</head>
<body>
<script language="JavaScript">
<!--
window.alert("Pozor !\nTato stranka je vo vystavbe.");
// -->
</script>
</body>
</html> | Príklad 1.3: Potvrdzovacie okno
 | | <html>
<head>
<title>Potvrdzovacie okno</title>
</head>
<body>
<script language="JavaScript">
<!--
window.confirm("Paci sa vam tento serial ?");
// -->
</script>
</body>
</html> |
Príklad 1.4: Vstupné okno
 | | <html>
<head>
<title>Vstupne okno</title>
</head>
<body>
<script language="JavaScript">
<!--
window.prompt("Kolko mate rokov ?");
// -->
</script>
</body>
</html> |
Ste dieťa alebo dospelý?Keďže sme sa na mini príkladoch zoznámili s prvými základnými stavebnými prvkami jazyka JavaScript, môžeme sa pustiť do naprogramovania prvého trošku zložitejšieho skriptu. Čo poviete na jednoduchý kvíz, ktorý podľa vámi zadaných údajov určí vašu vyspelosť ? Môže byť ? Príklad 1.5: Jednoduchý kvíz <html>
<head>
<title>Moj prvy zlozitejsi skript</title>
</head>
<body>
<script language="JavaScript">
<!--
window.alert("Dobry den\n\nVitajte na mojej kvizovej stranke"); meno=window.prompt("1.otazka:\tAko sa volate ?");
vek=window.prompt("2.otazka:\tKolko mate rokov ?"); if (vek<18) stav="dieta";
else stav="dospely"; document.write("<b>Vysledok kvizu:</b><p>");
document.write("Volate sa: "+meno+"<br>");
document.write("Kedze mate "+vek+" rokov, ste "+stav);
// -->
</script>
</body>
</html>
Ako to celé funguje ? Po načítaní stránky, vás tento skript pekne pozdraví a uvíta. Potom sa vás opýta na vaše meno a následne si vyžiada váš vek. Nakoniec vyhodnotí zadané údaje, tzn. že podľa veku určí či ste dieťa alebo už dospelý jedinec a vypíše na stránke výsledok kvízu.
Na rozdiel od predošlých príkladov, v ktorých sme nepotrebovali spracovať údaje z dialógových okien, v tomto príklade priradzujeme obsah jednotlivých okien do rôznych premenných.Premenná nám slúži na uchovanie údajov (číselných, textových alebo logických), aby sme ich mohli následne v ďalších krokoch vyhodnocovať a spracovať. Do premennej meno priradzujeme text, ktorý vloží návštevník do okna. napr. meno=window.prompt("Ako sa volate ?"); To iste platí aj pre premennú vek, ktorá bude uchovávať vek návštevníka.
Konštrukcia if a else vyhodnotí pravdivosť daného výrazu a v závislosti od toho vykoná požadovanú činnosť. V našom prípade zisťujeme, že či je vek návštevníka menší ako 18. Ak je vek menší, výraz (vek<18) je pravdivý, teda do premennej stav sa vloží text dieťa. Ak nie je splnený daný výraz (ak zadáme čislo rovné alebo väčsie ako 18), príkaz else prevezme činnosť a do premennej stav vloží text dospely.
Zvyšná časť skriptu nás oboznamuje o výsledkoch kvízu. Využíva sa tu už spomenutá funkcia document.write(), no naviac vypisujeme nielen zadaný text, ale aj obsah premenných meno, vek a stav. PRÍLOHA: Základné znamienka a formátovacie znaky Pri programovaní skriptov sa môžeme stretnúť s potrebou vyhodnotenia aj iného výrazu, a preto si uvedieme základné vyhodnocovacie znamienka, ktoré sa zvyknú používať. | > | | väčšie ako | | < | menšie ako | | == | rovné (zapisujeme ako dve = za sebou) | | >= | väčšie alebo rovné ako | | <= | menšie alebo rovné ako | | != | rôzne ako |
Možno ste si všimli, že v niektorých riadkoch kvízového skriptu sa nachádzajú isté znaky. Napr. znak \n v riadku, v ktorom sa vyvoláva informačné okno. Takéto znaky sa nazývajú formátovacie a plnia rôzne funkcie. Medzi tie, ktoré su podporované JavaScriptom patria: | \n | | text sa začne vypisovať v novom riadku | | \t | vynechá sa taký veľký počet medzier, aká je veľkosť tabulátora | | \" | takýto znak je vhodné použiť v prípade ak potrebujeme napísať úvodzovky |
|
