1. Mgr. Valentína Gunišová
JavaScript
Mgr. Valentína Gunišová
KUI, Košice

2. Javascript
je programovací jazyk so základnými objektovo orientovanými schopnosťami.
Stránka na webe môže obsahovať vďaka Javascriptu dynamické programy komunikujúce s používateľom (dialógové okná a užívateľské vstupy - formulár).
Javascript umožňuje riadiť prehliadač, pracovať s oknami a dynamicky vytvára obsah HTML (vkladanie dátumu a času, matematické výpočty, ...).
Klub učiteľov informatiky,
KUI, Košice

3. Javascript – troška teórie
Lexikálna štruktúra
Identifikátory (premenné a funkcie)
Výrazy a operátory
Príkazy
Klub učiteľov informatiky,
KUI, Košice

4. JavaScript – lexikálna štruktúra
JavaScript je citlivý na veľké a malé písmená,
riadok ukončujeme znakom ; (bodkočiarka), príkazy v jednom riadku oddeľujeme znakom , (čiarka),
akýkoľvek text medzi // a koncom riadku sa považuje za poznámku; akýkoľvek text medzi /* a */ sa považuje za poznámku,
ak riadok začína postupnosťou <!--, JavaScript ho považuje za jednoriadkovú poznámku, ale nerozpoznáva uzatváraciu sekvenciu -->.
Klub učiteľov informatiky,
KUI, Košice

5. JavaScript –údajové typy
číslo s pohyblivou desatinnou čiarkou,
číslo v osmičkovej sústave (začína ±0),
číslo v šestnástkovej sústave (začína ± 0x),
reťazec,
boolean (true, false; 1, 0; napr. 4 + true je 5),
pole (súbor pomenovaných údajov – každá údajová hodnota poľa má svoj index, prvky poľa môžu byť rôznych typov),
objekt (súbor pomenovaných údajov – vlastností a metór).
Klub učiteľov informatiky,
KUI, Košice

6. JavaScript –údajové typy
najväčšie kladné číslo, s akým pracuje JavaScript zistíte, ak do URL riadku vášho prezerača napíšete:
javascript: Number.MAX_VALUE
(najmenšie záporné je -Number.MAX_VALUE)
najmenšie kladné číslo, s akým pracuje JavaScript zistíte, ak do URL riadku vášho prezerača napíšete:
javascript: Number.MIN_VALUE
(najväčšie záporné je -Number.MIN_VALUE)
Ak sa hodnota s pohyblivou desatinnou čiarkou stane väčšou (menšou) ako najväčší prezentovateľný typ, výsledkom je špeciálna hodnota Infinity (-Infinity)
Klub učiteľov informatiky,
KUI, Košice

7. JavaScript –údajové typy
Pole v JavaScripte môže mať ľubovoľnú dĺžku, ktorú vopred nešpecifikujeme. Každý jeho prvok môže byť iného typu. Prvý prvok poľa má index 0.
Vytvorenie poľa:
a = Array(); //nedefinujeme dĺžku poľa
b = Array(4); //pole dĺžky 4
c = Array(1,2,”ahoj”,0x20) //inicializácia prvkov poľa
a[0] = 1;
b[a[0]] = “dvojka”;
document.write(b[5]); //vypíše undefined
JavaScript nepodporuje skutočné viacrozmerné polia, môžeme ale pracovať s poľom polí:
a = Array(Array(),Array());
b = Array(Array(1,”ahoj”),Array(“cau”,34));
a[0][0] = 34;
document.write(b[1][0]); //vypíše cau - prvok v 2. riadku a 1. stĺpci
Klub učiteľov informatiky,
KUI, Košice

8. JavaScript –údajové typy
Príklad: Načítanie a výpis prvkov poľa.
a = Array();
//načítanie prvkov poľa z klávesnice pomocou dialógového okna
for (i = 0; i <=3; i++) a[i] = window.prompt();
//výpis prvkov poľa
for (i = 0; i < 4; i++) document.write(a[i]);
//alebo
for (i = 0; i <= 3; i++) document.write(a[i]);
//to isté docielime aj pomocou vlastnosti length
for (i = 0; i < a.length; i++) document.write(a[i]);
Klub učiteľov informatiky,
KUI, Košice

9. JavaScript – špeciálne hodnoty
null (predstavuje chýbajúcu hodnotu, ide o hodnotu objektového typu, takže ak má premenná hodnotu null, vieme, že neobsahuje platný objekt, pole, číslo, reťazec, ...),
NaN (Not-a-Number)
napr. napíšte do URL riadku prezerača
javascript:a=5;b=“ahoj”;c=a*b;
Undefined
napr. použijeme premennú, ktorú sme deklarovali var a, ale nebola jej ešte priradená hodnota).
Klub učiteľov informatiky,
KUI, Košice

10. JavaScript – identifikátory
ide o názov premennej alebo funkcie,
prvý znak identifikátora musí byť písmeno alebo podčiarovník alebo $),
ako identifikátor nemôžu byť použité rezervované slová JavaScriptu, kľúčové slová Javy rezervované JavaScriptom a niektoré ďalšie (alert, escape, History, Text, Window, Document, close, ...).
Klub učiteľov informatiky,
KUI, Košice

11. JavaScript – premenné
JavaScript je netypový jazyk (i=4; i=new Date();),
premenné vo všeobecnosti nie je potrebné deklarovať, ale môžeme tak urobiť
(var a,b alebo var a = 5),
premennú je potrebné deklarovať, ak ju chceme použiť ako lokálnu premennú funkcie a jej názov je totožný s globálnou premennou,
JavaScript dokáže vhodne pretypovať premenné (napr. ak sčítame číselnú premennú s reťazcovou)
Skúste napísať do URL riadku prezerača:
javascript:x=4;y=“ahoj”;x+y;
javascript:x=4;y=“54”;x+y;
Záver: číselná premenná je pretypovaná na reťazcovú.
Klub učiteľov informatiky,
KUI, Košice

12. JavaScript – funkcie
funkcie v JavaScripte sú skutočnými údajovými typmi, môžeme s nimi pracovať ako s premennými, môžu byť argumentom inej funkcie,
funkcia môže byť priradená niektorému objektu (je metódou tohto objektu, napr. objekt Math a jeho metóda abs: Math.abs).
Klub učiteľov informatiky,
KUI, Košice

13. JavaScript – výrazy a operátory
jednoduché výrazy,
zložené výrazy (uzatvárame ich medzi znaky { a }).
Klub učiteľov informatiky,

14. JavaScript – výrazy a operátory
Prehľad niektorých operátorov:
- (rozdiel čísel),
+ (súčet čísel, zlučovanie reťazcov),
* (súčin čísel),
/ (podiel čísel),
++ inkrementácia (pred alebo po)
- - dekrementácia (pred alebo po)
% (zvyšok po delení),
== (rovná sa),
!= (nerovná sa),
&& (logické AND),
|| (logické OR),
= (priradenie),
*=, /=, %=, +=, -= (priradenie s operáciou),
?: (podmienkový operátor),
new (vytvorenie nového objektu),
delete (zrušenie objektu).
Klub učiteľov informatiky,

15. JavaScript – výrazy a operátory
Priradenie s operáciou:
x=3,y=4; x=3,y=4;
y=y+x; y+=x;
Podmienkový operátor:
x=4;
y=2;
(y=0)?Document.write(”nedelím nulou“):Document.write(x/y);
Klub učiteľov informatiky,

16. JavaScript – výrazy a operátory
Inkrementácia po:
x=3,y=3; x=y=3;
y=y+x; y+=x++;
x=x+1;
Inkrementácia pred:
x=x+1; y+=++x;
y=y+x;
Klub učiteľov informatiky,

17. JavaScript – výrazy a operátory
Dekrementácia po:
x=3,y=3; x=y=3;
y=y+x; y+=x--;
x=x-1;
Dekrementácia pred:
x=x-1; y+=--x;
y=y+x;
Klub učiteľov informatiky,

18. JavaScript – príkazy if while for break continue with var function
return
prázdny príkaz
Klub učiteľov informatiky,

19. JavaScript – príkaz if if (podmienka) príkaz; if (podmienka){ príkaz1;… }
Klub učiteľov informatiky,

20. JavaScript – príkaz if if (podmienka) príkaz1; else príkaz2;… }
else {
príkaz_1;
príkaz_2;
Pozor, else sa považuje za súčasť najbližšieho if!
Klub učiteľov informatiky,

21. JavaScript – príkaz while
while (podmienka)
príkaz;
while (podmienka) {
príkaz1;
príkaz2; … }
Klub učiteľov informatiky,

22. JavaScript – príkaz for
for (inicializácia; podmienka; aktulizácia) príkaz;
for (inicializácia; podmienka; aktulizácia) { príkaz1;
príkaz2; … }
Klub učiteľov informatiky,

23. JavaScript – príkaz break
používame ho v cykloch while a for na ukončenie behu cyklu (napr. ak v poli hľadáme prvé kladné číslo – nemusíme cyklom for prejsť celé pole, ale keď nájdeme hľadaný prvok, cyklus ukončíme).
JavaScript – príkaz continue
používame ho v cykloch while a for na ukončenie aktuálneho cyklu a začatie nového cyklu (napr. ak chceme, aby isté hodnoty prvkov poľa neboli zahrnuté do nejakého výpočtu).
Klub učiteľov informatiky,

24. JavaScript – príkaz with
zjednodušuje prácu s objektami:
x = Math.abs(-342);
y = Math.sin(Math.pi/4);
nahradíme
with Math {
x = abs(-342);
y = sin(pi/4); }
Klub učiteľov informatiky,

25. JavaScript – príkaz var
príkaz var slúži na deklarovanie premenných, používame ho najmä na deklarovanie lokálnych premenných funkcií,
ak použijeme príkaz var v inicializačnej časti príkazu for, táto premenná sa stáva globálnou (teda neplatí len v cykle for).
Klub učiteľov informatiky,

26. JavaScript – príkaz function
umožňuje definovať funkcie:
function meno_funkcie () {
príkazy; }
function meno_funkcie (argumenty) {
Príkazy, ktoré tvoria telo funkcie, sa vykonajú až po zavolaní funkcie (meno_funkcie (), resp. meno_funkcie(argumenty).
Klub učiteľov informatiky,

27. JavaScript – príkaz function
Kam umiestniť definíciu funkcie? Do hlavičky HTML dokumentu. Odkiaľ ju volať? Z tela HTML dokumentu alebo z inej funkcie (nie je dokonca potrebné ustrážiť to, aby funkcia, ktorá je volaná inou funkciou, bola definovaná ako prvá).
<html>
<head>
<script language=“JavaScript”>
function pytagoras(a,b){return(Math.sqrt(a*a+b*b));}
</script>
</head>
<body>
c=pytagoras(4,3);
document.write(“<b>Prepona má dĺžku:</b> “ + c);
</body>
</html>
Klub učiteľov informatiky,

28. JavaScript – príkaz function
Kvôli prehľadnosti je dobré použiť externý súbor nazov_suboru.js, ktorý obsahuje definície funkcií (knižnica funkcií). V HTML dokumente stačí špecifikovať, kde sa nami používané funkcie nachádzajú:
<html>
<head>
<script language=“JavaScript” SRC=“nazov_suboru.js”>
</script>
</head>
<body>
<script language=“JavaScript”>
// tu môžeme pracovať s funkciami, ktorých definície sa nachádzajú v súbore
// nazov_suboru.js
</body>
</html>
Klub učiteľov informatiky,

29. JavaScript – príkaz return
príkaz return použijeme v tele funkcie, určuje hodnotu, ktorú funkcia vráti:
return výraz;
ak ho nepoužijeme alebo napíšeme return; (bez výrazu), vráti nedefinovanú hodnotu.
Klub učiteľov informatiky,

30. JavaScript – prázdny príkaz
na prvý pohľad zbytočnosť: ;
príklad použitia – súčet čísel od 1 po n:
n=10; s=0; for (i=1;i<=n;s+=(i++)); Document.write(s);
Aká bude hodnota premennej s v tomto prípade:
n=10;
s=0;
for (i=1;i<=n;s+=(++i));
Document.write(s);
Klub učiteľov informatiky,

31. Javascript – praktické príklady
práca s oknami a dokumentom
objekt window objekt_window.htm ramce\index.htm
objekt_dokument.htm
dialogove_okna.htm
matematické funkcie
objekt_math.htm
práca s dátumom a časom
preklapanie_obrazkov.htm
formular.htm
Klub učiteľov informatiky,
KUI, Košice

32. Javascript - internetové zdroje
jednoduchá príručka + množstvo príkladov (momentálne nefunkčné), kópia je napr.: na programovanie a internet
diskusia a články o JavaScripte
množstvo skriptov, nie len JavaScript
Klub učiteľov informatiky,