JavaScript

JavaScript Mgr. Valentína Gunišová

Javascript • je programovací jazyk so základnými objektovo orientovanými schopnosťami. • Stránka na webe môže obsahovať vďaka Javascriptudynamické 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

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

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 . Klub učiteľov informatiky, 15. 5. 2003

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

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

JavaScript –údajové typy • Polev 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

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

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

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

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,balebo 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

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

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=3,y=3; x=y=3; 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=3,y=3; x=y=3; 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; príkaz2; … } Klub učiteľov informatiky, 15. 5. 2003

JavaScript – príkaz if • if (podmienka) príkaz1; else príkaz2; • if (podmienka) { príkaz1; 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; } • 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> <script language=“JavaScript”> c=pytagoras(4,3); document.write(“<b>Prepona má dĺžku:</b> “ + c); </script> </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 </script> </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.htmramce\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

Javascript - internetové zdroje • www.javascript.skjednoduchá 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.czdiskusia a články o JavaScripte • http://www.scriptsearch.commnožstvo skriptov, nie len JavaScript Klub učiteľov informatiky, 15. 5. 2003

JavaScript

JavaScript

Presentation Transcript

JavaScript

JavaScript

JavaScript

JavaScript

JavaScript

JavaScript

Javascript

Javascript

JavaScript

JAVASCRIPT

JavaScript

JavaScript

Javascript

JavaScript

JavaScript

Javascript

Javascript

JavaScript

JavaScript

Javascript

JavaScript

JAVASCRIPT