Mgr. Valentína Gunišová JavaScript Mgr. Valentína Gunišová KUI, 15. 5. 2003 Košice

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, 15. 5. 2003 KUI, 15. 5. 2003 Košice

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, 15. 5. 2003 KUI, 15. 5. 2003 Košice

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, 15. 5. 2003 KUI, 15. 5. 2003 Košice

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, 15. 5. 2003 KUI, 15. 5. 2003 Košice

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, 15. 5. 2003 KUI, 15. 5. 2003 Košice

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, 15. 5. 2003 KUI, 15. 5. 2003 Košice

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, 15. 5. 2003 KUI, 15. 5. 2003 Košice

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, 15. 5. 2003 KUI, 15. 5. 2003 Košice

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, 15. 5. 2003 KUI, 15. 5. 2003 Košice

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, 15. 5. 2003 KUI, 15. 5. 2003 Košice

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, 15. 5. 2003 KUI, 15. 5. 2003 Košice

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

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. 5. 2003

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, 15. 5. 2003

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, 15. 5. 2003

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, 15. 5. 2003

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

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

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, 15. 5. 2003

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

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, 15. 5. 2003

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, 15. 5. 2003

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, 15. 5. 2003

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, 15. 5. 2003

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, 15. 5. 2003

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, 15. 5. 2003

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, 15. 5. 2003

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, 15. 5. 2003

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, 15. 5. 2003

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, 15. 5. 2003 KUI, 15. 5. 2003 Košice

Javascript - internetové zdroje www.javascript.sk jednoduchá príručka + množstvo príkladov (momentálne nefunkčné), kópia je napr.: na http://www.gjar-po.sk/studium/informatika/informatika.htm#programovanie, programovanie a internet http://www.builder.cz diskusia a články o JavaScripte http://www.scriptsearch.com množstvo skriptov, nie len JavaScript Klub učiteľov informatiky, 15. 5. 2003