Javascript Manuál. Drgo Pavel SOŠ

Transcription

1 2016 Javascript Manuál Drgo Pavel SOŠ

2 OBSAH JavaScript návod 01 Úvod do JavaScriptu...3 JavaScript návod 02 Kam s ním...5 JavaScript návod 03 Premenné úvod...9 JavaScript návod 04 Premenné typy...11 JavaScript návod 05 Operace s číselnými proměnnými...16 JavaScript návod 06 Operace s textovými premennými...22 JavaScript návod 08 Podmienky ELSE a ELSE IF...30 JavaScript návod 09 SWITCH CASE...35 JavaScript návod 10 Cykly FOR...37 JavaScript návod 11 Cykly WHILE a DO WHILE...41 JavaScript návod 12 Pole v JavaScriptu...44 JavaScript návod 13 Pole v JavaScriptu LENGTH a další metody...47 JavaScript návod 14 Pole v JavaScriptu Přidávání a mazání prvků...53 JavaScript Formuláre...57 JavaScript Obrázky...65 Hotové Javascripty...68

3 JavaScript návod 01 Úvod do JavaScriptu Čo je JavaScript JavaScript je programovací jazyk, který se používá v internetových stránkách. Zapisuje sa priamo do HTML kódu, čo je velká výhoda, pretože je to jednoduché. <script type="text/javascript"> document.write('toto je vypísané priamo zo scriptu'); JavaScript je klientsky skript. K znamená, že sa program, odosiela so stránkou na strane klienta (do prehliadača) a až potom je vykonávaný. Protikladom klientskych skriptov sú skripty serverové, ktoré sú vykonávané na serveri a klientovi idú uz len výsledky spracovania. JavaScript je často zamieňaný s Javou. Java je samostatný programovací jazyk. Má s JavaScriptom iba podobnú syntax.

4 Prejavy Javascriptu: Vyskakovacie okná Hodiny na web stránke Jednoduchý kalkulátor Čítače udalostí Vyplňanie formulárov Definícia Javascriptu: Je to mutltiplatformný,objektovo orientovaný,scriptový jazyk,používaný na stránke klienta.znamená to,že bude fungovať vo: Windows ios Linuxe Android,Na mobiloch, Android na tablete Kompatililita je závislá na webovom prehliadači a nie na operačnom systéme Charakteristiky jazyka JavaScript je jazyk interpretovaný -- nemusí sa kompilovat objektový -- využívá objektov prohliadača a zabudovaných objektov závislý na prehliadači -- funguje ale ve väčšine prehliadačov case sensitivní -- záleží na veľkosti písma v zápise syntaxou je podobnýjazykom C, Java a podobným

5 Obmedzenie jazyka JavaScript funguje iba v prehliadači. Uživateľ môže JavaScript zakázať Existujú rôzne odlišné verzie jazyka i prehliadačov,čo vedie k častým chybám. Nevie pristupovať k souborom (okrom cookies) ani k žiadnym systémovým objektom. Nevie žiadne data uložiť (okrom cookies). To všetko z neho robý iba robý jazyk druhoradý, účelovo použitelný iba v HTML stránkach. Ako sa učiť JavaScript Po zvládnutí základov je najlepšie všímať si cudzích skriptu na cudzích stránkach. Väčšina skriptu je zapísaná piamo v zdrojovom kodu stránky, takže sa dá skopírovať (niektoré kódy sú v externých súboroch,ale i tie sú stiahnuteľné). Najlepsie sa učí napodobňovaním príkladov Samotné scripty môžeme zapisovať: rovno do HTML dokumentu rovno do môžu byť načítané z externého súboru *.js Javascript sa nespúšťa na strane servera(ako napríklad PHP alebo ASP) ale až po načítaní stránky na strane klienta Javascript pripomína Javu,ale JS je omnoho jednoduchší a aj programovanie je je tiež jednoduchšie.

6 Prínos po zvládnutí JS: môžeme oživiť stránky textovými alebo grafickými efektmi múžeme si začať vytvárať rôzne kalkulátory alebo časové čítače Jednoduché hry Budeme môcť naviazať na frameworky ako napríklad Jquery Výhody použitia JS: Jednoduchosť programovania v JS Väčšia interakcia s návštevníkom stránok Možnosť tvorby dynamických prvkov priamo na stránke K tvorbe stránok nepotrebujeme žiadny špecializovaný software Nevýhody použitia JS: Kompaktibilita(závislosť na použitom prehliadači) Treba vytvárať stránky tak,by neboli závislé na našom JS(ak je JS v počítači blokovaný) Pre práci s JS budeme potrebovať: Znalosť HTML Znalosť niektorého objektovo orientovaného programovacieho jazyka(lazarus,java) Textový editor(doporučený editor so zvýraznenou syntaxou SUBLIME TEXT3,notepad++,NetBeans IDE 8.2.

7 Webový prehliadač na zobrazenie našich webových stránok(opera,ie,google CHROME,MOZILLA) JavaScript návod 02 Kam s ním Samotné scripty môžeme zapisovať: rovno do HTML dokumentu rovno do hlavičky html dokumentu môžu byť načítané z externého súboru rovno do html tagu 1.Zápis Java scriptu priamo do HTML dokumentu priklad1.html <html lang = "sk"> <title>zápis javascriptu priamo do kódu HTML</title> <meta charset = "utf-8"> body> <script type="text/javascript"> document.write('toto je vypísané priamo zo scriptu');

8 CHROME: Poznámka:document je objekt write je metoda 2.Priamo do hlavičky dokumentu Pr.2.html <html lang="sk"> <meta charset="utf-8"> <script src=" cript> <link rel="stylesheet" type="text/css" href="css/main.css"/> <script> $(document).ready(function(){ $("button").click(function(){ $(".test").hide(); ); ); <h2 class="test">toto je nadpis s triedou "test"</h2> <p class="text">toto odsek s triedou "text".</p> <p>toto je ďaľší osek.</p>

9 <button>stlač ma!</button> main.css /*súbor main.css*/ /*Nastavenie farieb prvkov */.test{ color: red;.text{ color: blue; p{ color: green; Chrome: PR2.1.Priklad HTML kódu v javascripte <html> <meta charset="utf-8"> <title>nauč sa Javascript</title>

10 <script type="text/javascript"> document.write('<em>mama</em> má Emu.<br>'); document.write('mama <em>má</em> Emu.<br>'); document.write('mama má <em>emu</em>.'); 3.Zápis javascriptu do externého súboru s príponou js Pr3.html <html> <title>javascript tútorial</title> <script type='text/javascript' src='externy.js'>

11 externy.js // zápis objektu a metódy do externého súboru// document.write('toto je vypísané z externého súboru'); CHROME: Výhody zápisu do externého súboru: môžeme funkcie ktoré máme v ňom obsiahnuté použiť vo viacerých html súboroch Samotný html dokument je prehľadnejší V prípade,že potrebujeme skombinovať obidva predchádzajúce metódy,môžeme to urobiť nasledovne: PR3 kombinácia externého a interného použitia javascriptu Pr4.html <html> <title>javascript tútorial</title>

12 <script type='text/javascript' src='externy.js'> <script type='text/javascript'> document.write('<strong>- a toto je vypísané priamo z kódu</strong>'); CHROME: PR.4.1.html Príklad kombinácie HTML a javascriptu index.html <html lang="sk"> <title>príklad kombinovania html a javascriptu. </title> <link rel="stylesheet" type="text/css" href="css/main.css"/> <p id ="nadpis">moja prvá CSS stránka</p> <h1 class="text1 pozadie1">informácie o mne</h1> <p class="text1">tu nasleduje text o mne...</p> <h1 class="text2 pozadie2">informácie o triede</h1> <p class="text2">sem umiestnite informácie o triede...</p> <h1 class="text3 pozadie3">informácie o odbore</h1> <p class="text3">na tomto mieste uvedte informácie o odbore...).</p> <h1 class="text4 pozadie4">informácie o škole</h1> <p class="text4">tu uviesť niekoľko informácií o škole...</p>

13 <script type='text/javascript' src='js/externy.js'> <script type="text/javascript"> document.write("<hr><br>"); document.write("<span style=color:blue>toto napísal Javascript:</style></span>"); document.write(datum()); externy.js function datum() { var dat = new Date(); var mesiac = new Array("január", "február", "marec", "apríl", "máj", "jún", "júl", "august", "september", "október", "november", "december"); var vrat = dat.getdate() + ". " + mesiac[dat.getmonth()] + " " + dat.getfullyear()+ ","+ dat.gethours()+":"+dat.getminutes(); return vrat; main.css /*súbor main.css*/ /*Máme triedu pre nastavenie farby textu a triedu pre pozadie a výberový prvok nadpis pre zväčšenie veľkosti písma v odstavci*/ #nadpis { font-size:200%; text-align: center;.text1 { color:blue;.pozadie1{ background-color:gold;.text2{ color:black;.pozadie2{ background-color:green;.text3{ color:red;

14 .pozadie3{ background-color:blue; Chrome: 3.Priamo ako atribút HTML tagu HTML tag bude na odkaz <a href> Udalosť bude onclick Reakcia na onclick bude hláška alert s hodnotou Toto je vypísané z html tagu ALERT je hláška v Javascripte Pr4.html <html> <title>javascript tútorial</title>

15 <a href='#' onclick ="alert('toto je vypísané z html tagu')">odkaz</a> CHROME: JavaScript návod 03 Premenné úvod Premenná:Je to miesto v pamäti počítača. Používame ich k uchovaniu hodnôt s ktorými chceme v programe pracovať.

16 Premenú si môžeme predstaviť ako krabicu s kartičkou. Na kartičku napíšeme všeobecný popis čo krabica obsahuje.na to aby sme si zapamätali obsah krabice stačí si zapamätať názov kartičky. Zásady tvorby a použitia premennej Pri prvom použití premennej použijeme slovíčko var V javascripte sa pri premenných rozlišujú malé a veľke písmená Koblihy a koblihy sú dve rôzne premenné Pri voľbe premených múžeme použiť číslice a podtržítko Koblihy1,male_koblihy Na začiatku mena premennej nesmie byť číslo 1kobliha Číslo použité inde ako na začiatku môže byť Kobli1ha Vyberať pre mená premennej výstižné názvy vyskastromu,vyska_stromu V mene premennej sa nesmie použiť medzera ani pomlčku Vyska stromu,vyska-stromu Vyvarujte sa použitiu diakritiky v názve premennej

17 výškastromu Ak sme už označili premennú slovíčkom var nemusíme ho pri daľšom použití používať Pr5 <html> <title>javascript tútorial</title> <script type ='text/javascript'> var vyskastromu = 10; vyskastromu =25; document.write(vyskastromu); CHROME:

18 JavaScript návod 04 Premenné typy V javascripte nie je potrebné deklarovať typ premennej.js sám určí či ide o číslo,text alebo logickú premennú. 1.Číselné premenné Pr6. Príklad deklarovania premennej bez deklarovania typu <script type='text/javascript'> var vyskastromu; document.write(vyskastromu); Ak neskôr zabudneme priradiť hodnotu premennej,dostaneme nasledovný výpis: CHROME: Lepšie riešenie je priradiť jej hneď na začiatku hodnotu.pre číselnú premennú priradíme hodnotu 0. Pr7.Príklady definovania číselných premenných <html>

19 <title>javascript tútorial</title> <script type='text/javascript'> var celecislo=10; var zapornecislo=-10; var desatinnecislo=10.5; document.write(celecislo+"<br>"); document.write(zapornecislo+"<br>"); document.write(desatinnecislo+"<br>"); CHROME: Pr7.1.Príklady číselných premenných na výpočet obsahu kruhu <html lang="sk"> <title>príklad na pouţitie číselných premenných</title> <script> var r = 10;/*Polomer kruhu*/ var obsah = 3.14 * r * r; document.write("obsah kruhu je:" + obsah + " cm²");

20 Hlášky alert výstraha Keby sa JavaScriptom dalo len zapisovať do dokumentu, bola by to nuda. Veselým efektom je príkaz alert, ktorý zobrazí upozorňovacie okienko s textom. <script> alert ( "To si sa ale zľakol!"); </ script> <html lang='sk'> <title>pozdrav pomocou alert</title> <meta charset='utf-8'> <link href='images/logo.png' rel='shortcut icon' type='image/png'> <script> alert ( "To si sa ale zľakol!"); Príklad príkazu alert () si môžete zobraziť. Text v zátvorke a v úvodzovkách sa vypíše do dialógu spolu s tlačidlom OK.

21 prompt Dialógové okno vyžadujúce vstup užívateľa je volaný príkazom prompt. Umožňuje do premennej vložiť hodnotu zadanú užívateľom. Zapisuje sa premenná = prompt (hláška, inicializačný hodnota). Príklad: <script> x = prompt ( "Zadaj svoje meno", "") ; document.write ( "Tvoje meno teda je"); document.write (x); </ script> </ body> <html lang='sk'> <title>vloţenie premennej pomocou promt</title> <meta charset='utf-8'> <link href='images/logo.png' rel='shortcut icon' type='image/png'> <script> x = prompt ( "Zadaj svoje meno", "") ; document.write ( "Tvoje meno teda je: "); document.write (x); Môžete si príklad zobraziť. Do premennej x sa načítala hodnota pomocou príkazu prompt (). Ten má dva parametre (zadávané v zátvorke). Text výzvy a inicializačnú hodnotu. Inicializačný hodnota je v tomto príklade prázdny reťazec "". Skript čaká na vstup užívateľa. Po zadaní údajov skript beží ďalej a premenná sa normálne spracováva (napríklad je vypísaná). Toľko úvodné príklady. Možno už tušíte, že je Javascript celkom použiteľný jazyk. V ďalšom texte sa pokúsim vysvetliť ďalšie rôzne spôsoby, ktorými sa skript môže začleniť do stránky.

22 Confirm -potvrď Potvrdzujúci dialóg. Možnosti sú áno / nie. Návratová hodnota je true alebo false. <script> pokracovat = confirm ( "chcete pokračovať?"); // teraz mám v premennej pokracovat uložené true alebo false if (pokracovat) document.write ( "tak teda pokračujeme"); </ script> <html lang='sk'> <title>vloţenie premennej pomocou confirm</title> <meta charset='utf-8'> <link href='images/logo.png' rel='shortcut icon' type='image/png'> <script> pokracovat = confirm ( "Chcete formátovať disk? "); // teraz mám v premennej pokracovat uložené true alebo false if (pokracovat) document.write ( " tak teda Formátujem disk :"); Poznámky Ak potrebujete v nejakom vypisovanie texte zalomiť riadok, robí sa to pomocou sekvencie \ n. alert ( "prvý riadok \ n druhý riadok"); Pr7.2.Príklady číselných premenných pomocou hlášky <html lang="sk"> <title>príklad kombinácie html a javascriptu</title>

23 <script> premenna = prompt("zadaj polomer kruhu v cm:", ""); r = Number(premenna);/*prevod z retazca na cislo*/ var obsah = 3.14 * r * r; document.write("obsah kruhu je:" + obsah + " cm²"); Pr7.3.Výpočet spotreby automobilu <html lang="sk"> <title>výpočet spotreby benzínu na zadaný počet kilometrov</title> <script> premenna1 = prompt("zadaj spotrebu na 100 km:",""); spotrebanasto = Number(premenna1); spotrebanakilometer = spotrebanasto/100;/*spotreba na jeden kilometer*/ premenna2 = prompt("zadaj počet odjazdených kilometrov:",""); pocetkilometrov = Number(premenna2); spotrebacelkom = spotrebanakilometer*pocetkilometrov;/*spotreba na zadaný počet km*/ document.write("spotreba benzínu na :"+pocetkilometrov+" km je:"+ spotrebacelkom+" litrov"+"<br><br>"); premenna3 = prompt("zadaj cenu za liter benzínu v eurách:",""); CenaZaliter = Number(premenna3); KolkoZaplatím = CenaZaliter*spotrebaCelkom; document.write("za:"+spotrebacelkom+" litrov"+"zaplatíš "+ KolkoZaplatím+ " ");

24 2.Reťazcová premenná Reťazcom rozumieme postupnosť znakov, ktorými môžeme zapisovať akýkoľvek text Ak dopredu nevieme hodnotu reťazca tak ju pre istotu nastavíme: <script type='text/javascript'> var menoziaka=""; Toto nesmieme robiť: <script type='text/javascript'> var neakytext="tu je "neaky"text"; document.write(neakytext); Pre zvýraznenie textu v reťazci musíme použiť nasledovné možnosti: a.použijeme pred každou úvodzovkou spätné lomítko \ <script type='text/javascript'> var neakytext="tu je \"neaký\"text"; document.write(neakytext); CHROME: b,nahradíme uvodzovky apostrofami alebo nahradíme apostrofy úvodzovkami Pr8

25 !DOCTYPE html> <html> <title>javascript tútorial</title> <script type='text/javascript'> var zakladnytext="tu je zakladny text"; var zakladnypodtext="tu je \"neaký\" text"; var zakladnypopodtext="tu je 'neaký' text" var apostrofy='tu je neaky text'; var podtext='tu je \'neaky\' text'; var uvodzovky='tu je "neaky" text' document.write(zakladnytext+"<br>"); document.write(zakladnypodtext+"<br>"); document.write(zakladnypopodtext+"<br>"); document.write(apostrofy+"<br>"); document.write(podtext+"<br>"); document.write(uvodzovky+"<br>"); CHROME: 3.Logické premenné Môžu nadobúdať iba dve hodnoty:true alebo FALSE Použijeme ju vtedy ak potrebujeme vložiť informáciu či je hodnota pravdivá alebo nie.

26 Pr9. <html> <title>javascript tútorial</title> <script type='text/javascript'> var mamradsisky=true; var mamradlekvar=false; document.write('mam rad sisky:'+mamradsisky+"<br>"); document.write('mam rad lekvar:'+mamradlekvar); CHROME Preskúšanie zo znalosti HWW a SWW JavaScript návod 05 Operace s číselnými proměnnými

27 Ak sú naše premenné čísla môžeme s nim vykonávať nasledovné aritmetické operácie: 1.súčet Pr10 <script type='text/javascript'> var bedna1=9; var bedna2=3; document.write(bedna1+bedna2); CHROME PR11 <script type='text/javascript'> var bedna1=9; var bedna2=3; var vysledok=bedna1+bedna2; document.write(vysledok); CHROME 2.Rozdiel Pr12 <script type='text/javascript'>

28 var bedna1=19; var bedna2=5; var vysledok=bedna1-bedna2; document.write(vysledok); CHROME: 3.Súčin Pr13. <script type='text/javascript'> var bedna1=19; var bedna2=50; var vysledok=bedna1*bedna2; document.write(vysledok); CHROME 4.Delenie Pr.14 <script type='text/javascript'> var bedna1=19; var bedna2=50; var vysledok=bedna1/bedna2; document.write(vysledok); CHROME

29 Poznámka:Priorita operátorov je rovnaká ako pozname z matematiky. Pr.15 <script type='text/javascript'> var bedna1=19; var bedna2=50; var bedna3=9; var vysledok=bedna3+bedna1/bedna2; document.write(vysledok); Poznamka:Najskôr sa vykoná operácia delenia a až potom sa pripočíta bedna3 CHROME Ak chceme zmeniť poradie operácií použijeme zátvorky PR16 <script type='text/javascript'> var bedna1=19; var bedna2=50; var bedna3=9; var vysledok=(bedna3+bedna1)/bedna2; document.write(vysledok); Poznámka:Najskôr sa urobí súčet a až potom sa vykoná delenie

30 CHROME: PR16.1.Jednoduchá kalkulačka <html lang="sk"> <link href='images/logo.png' rel='shortcut icon' type='image/png'> <title>jednoduchá kalkulačka so základnými aritmetickými operáciami</title> <script> premenna1 = prompt("zadaj prvé číslo:",""); prvecislo = Number(premenna1); premenna2 = prompt("zadaj druhé číslo:",""); druhecislo = Number(premenna2); sucet = prvecislo + druhecislo; rozdiel = prvecislo - druhecislo; sucin = prvecislo * druhecislo; podiel = prvecislo / druhecislo; document.write("súčet čísla:"+ prvecislo + " a " + druhecislo + " je "+ sucet+"<br>"); document.write("rozdiel čísla:"+ prvecislo + " a " + druhecislo + " je "+ rozdiel+"<br>"); document.write("súčin čísla:"+ prvecislo + " a " + druhecislo + " je "+ sucin+"<br>"); document.write("podiel čísla:"+ prvecislo + " a " + druhecislo + " je "+ podiel+"<br>"); <p>(c)ing.drgo Pavel,3.novembra 2016,17:55</p> Chrome:

31 AUTOMOBILOVÁ Kalkulačka s využitím funkcie a formulára <html lang="sk"> <title>výpočet spotreby benzínu na zadaný počet kilometrov</title> <body style="background-color:blue";> <h1>automobilová kalkulačka</h1> <form name="benzinform"> Zadaj spotrebu na sto km:<br><br> <input type="number" name="snasto"> <br><br> Zadaj počet odjazdených km:<br> <input type="number" name="pk"> <br><br> Zadaj cenu benzínu za liter:<br> <input type="number" name="cena"><br><br> <input type="button" value="výpočítaj parametre jazdy" onclick="calculatephm()"><br><br> <h2>vypočítané hodnoty</h2> Spotreba na jeden km:<br><br> <input type="text" name="spotrebanakilometer"><br><br> Spotreba celkom:<br><br> <input type="text" name="spc"><br><br> Koľko zaplatím :<br><br> <input type="text" name="kolko"> <br> </form> <script> function calculatephm() { var spotrebanasto = document.benzinform.snasto.value var spotrebanakilometer = spotrebanasto/100/*spotreba na jeden kilometer*/ document.benzinform.spotrebanakilometer.value = spotrebanakilometer var pocetkilometrov = document.benzinform.pk.value var spotrebacelkom = spotrebanakilometer*pocetkilometrov document.benzinform.spc.value = spotrebacelkom var cena = document.benzinform.cena.value var cenacelkom = cena*spotrebacelkom

32 document.benzinform.kolko.value = cenacelkom <p><em><strong>ing.drgo Pavel,11.november 2016,13:31</em><trong></p> Pr17 <script type='text/javascript'> var kremrola=5; kremrola+=5 document.write(kremrola); Operátory priradenia CHROME: 1.Nastavenie premennej na hodnotu 5 var kremrola=5;

33 2.Zvýšenie premennej o hodnotu 5 kremrola+=5; Je to to isté ako: kremrole=kremrole+5; 3.Zníženie hodnoty: kremrola-=5; Je to to isté ako: kremrole=kremrole-5; 4.Násobenie hodnotou 5 Kremrola*=5; Je to to isté ako: kremrole=kremrole*5; 5.Delenie hodnotou 5 Kremrola/=5; Je to to isté ako: kremrole=kremrole/5; 6.zvýšenie premennej o hodnotu 1 kremrola++; to isté je kremrola=kremrola+1; 7.zníženie premennej o hodnotu 1 Pr18 <html> Kremrola--; to isté je kremrola=kremrola-1;

34 <title>javascript tútorial</title> <script type='text/javascript'> var kremrola=5; document.write('kremrola:'+kremrola+"<br>"); kremrola++; document.write('nová kremrola:'+kremrola+"<br>"); var indian=19; document.write('indian:'+indian+"<br>"); indian--; document.write('zníţený indian:'+indian); Google CHROME: JavaScript návod 06 Operácie s textovými premennými Komentáre Vložené texty programu, ktoré nám program niako neovplyvňujú. Sú to poznámky k jednotlivým častiam programu.môžu nám ozrejmiť čo to vlastne v programe vykonávame.môže slúžiť ako vysvetľujúci komentár pre niekoho kto bude náš program skúmať.

35 1.Riadkový komentár začína znakom dve normálne lomítka /* Pr19 <script type='text/javascript'> //Toto sú deklarácie var x = 2; var y = 3; // V tomto riadku urobíme súčet var vysledok = x + y; document.write(vysledok); Google Chrome: 2.Komentár na viac riadkov Na začiatku komentára a na konci použijeme lomítko a hviezdičku /*...*/ Pr20 <html> <title>javascript tútorial</title> <script type='text/javascript'> /* Javascrip Tútorial Téma:komentáre Vytvorené:15.Júľa 2016 */

36 Poznámka :Zakomentovaný text sa v prehliadači nezobrazuje. A teraz k reťazcovým premenným Textovú hodnotu k premenným priraďujeme pomocou operátora priradenia =. Ak vo výpise chceme použiť viac reťazcových hodnôt spojíme ich pomocou operátora +: Pr21 <html> <title>javascript tútorial</title> <script type='text/javascript'> var sisky = "Šisky"; document.write("ku raňajkám som mal:"+sisky); Google chrome Pr22.Príklad výpisu viacerých premenných <html> <title>javascript tútorial</title>

37 <script type="text/javascript"> var sisky = "Šisky"; var ranajky = "Ku raňajkám som mal "; var pocetsisiek = 3; document.write(ranajky+pocetsisiek+sisky); Google chrome: Vo výpise by sme potrebovali na oddelenie 3 a Šisky jeden prázdny znak(medzeru).to urobíme pridaním medzery do výpisu. Javascriptu nevadí, že kombinujeme premenné iného datové typu: Textovú premennú (ranajky) Číselnú premennú(pocetsisiek) Reťazec s medzerou( ) A opäť textovú premennú(sisky) Pr23.Výpis so správne zobrazeným výpisom <html> <title>javascript tútorial</title> <script type="text/javascript">

38 var sisky = "Šišky"; var ranajky = "Ku raňajkám som mal "; var pocetsisiek = 3; document.write(ranajky+pocetsisiek+" "+sisky); Google Chrome Pri definícií objektu document a metódy write môţeme skombinovať aj textové premenné s logickými premennými Pr24. <html> <title>javascript tútorial</title> <script type="text/javascript"> var text = "Mám rád šišky je "; var pravdivost = false; document.write(text+pravdivost); Chrome

39 Test na získané vedomosti Výsledky 1C 2B 3A 4A 5B 6B 7C 8A 9A 10A 11B 12A 13B 14A 15C 16B 17C 18B 19C 20A HODNOTENIE BODY ZNÁMKA <4 5

40 JavaScript návod 07 Podmienky úvod Podmienky sú pre programovanie veľmi dôležité. Je to základny spôsob ako program ďalej vetviť. Pomocou podmienok môžeme určovať akým smerom sa bude náš program uberať Všeobecná ukážka vetvenia: Syntax príkazu vetvenia if (podmienka) { zoznam príkazov1; Najskôr sa vyhodnotí pravdivosť podmienky. V podmienke môže byť: Číselné premené Logická premenné Reťazcové premenné

41 Výraz Ak je podmienka splnená vykonájú sa príkazy uvedené medzi zloženými zátvorami.ak nie je podmienka splnená pokračuje sa príkazom uvedeným za -pravou zloženou zátvorkou. 1.V podmienke použijeme číselné premenné Pozrite sa na nasledujúcu tabuľku, ktorá ukazuje očakávané výsledky z if za odlišných podmienok. V tejto tabuľke X a Y sú dva premenné, ktoré boli inicializované na hodnotu. Podmienka: Vracia true, ak: x == y x a y sú rovnaké x! = y x a y nie sú rovnaké x> y X viac než y x> = y x je väčší alebo rovné y x <y x je menšia než y x <= y x je menšie ako alebo rovné y Pr25 testovanie podmienky s logickým operátorom priradenia ==(podmienka vyhodnotená jako pravdivá. <html> <title>testovanie podmienky</title> <script type="text/javascript"> pocetsisiek = 3; if(pocetsisiek == 3){ document.write(pocetsisiek + " Počet šišiek tak akurát"); Chrome Pr26 Podmienka nie je splnená,nezobrazí sa nič

42 <html> <title>javascript tútorial</title> <script type="text/javascript"> pocetsisiek = 4; if(pocetsisiek == 3){ document.write(pocetsisiek + " Počet šišiek tak akurát"); Chrome Pr27.Správanie sa programu ak podmieka je splnená(!=4) početsisiek sa nerovná 4,lebo je rovný 3 <html> <title>javascript tútorial</title> <script type="text/javascript"> pocetsisiek = 3; if(pocetsisiek!= 4){ document.write(pocetsisiek + " Počet šišiek nie je to pravé");

43 Chrome pr28 Tvorba a vyhodnotenie podmienky s operátorom > <html> <title>javascript tútorial</title> <script type="text/javascript"> pocetsisiek = 5; if(pocetsisiek > 4){ document.write(pocetsisiek + " Počet šišiek je uţ moc veľký"); Chrome Podobne bude vyhodnotená podmienka zo znakom < <script type="text/javascript"> pocetsisiek = 5; if(pocetsisiek < 3){ document.write(pocetsisiek + " Počet šišiek je uţ moc veľký"); Rovnako môžeme postaviť podmienku je menšie alebo rovné <=

44 Pr29 <html> <title>javascript tútorial</title> <script type="text/javascript"> pocetsisiek = 2; if(pocetsisiek <= 3){ document.write(pocetsisiek + " Počet šišiek je uţ moc malý") ; Chrome Ešte je možné použiť podmienku je väčšší alebo rovný. <script type="text/javascript"> pocetsisiek = 5; if(pocetsisiek >= 3){ document.write(pocetsisiek + " Počet šišiek je uţ moc veľký") ; CVIČENIE1 Bmi_upravene.html Kalkulátor telesnej hmotnosti-bmi <html> <title>testovanie telesnej hmotnosti BMI</title> <body style=background-color:gray>

45 <h1>index telesnej hmotnosti</h1> <form name="bmiform"> Tvoja hmotnosť(kg): <input type="text" name="weight" size="10"><br /><br /> Tvoja výška(cm): <input type="text" name="height" size="10"><br /><br /> <input type="button" value="výpočet BMI" onclick="calculatebmi()"><br /><br /> Tvoj BMI: <input type="text" name="bmi" size="10"><br /><br /> To znamená: <input type="text" name="meaning" size="25"><br /><br /> <input type="reset" value="reset" /><br /><br /> </form> <script type="text/javascript"> function calculatebmi() { var weight = document.bmiform.weight.value var height = document.bmiform.height.value if(weight > 0 && height > 0){ var finalbmi = weight/(height/100*height/100) document.bmiform.bmi.value = finalbmi if(finalbmi < 18.5){ document.bmiform.meaning.value = "Ţe ste príliš ľahký." if(finalbmi > 18.5 && finalbmi < 25){ document.bmiform.meaning.value = "Ţe ste zdravý." if(finalbmi > 25){ document.bmiform.meaning.value = "Ţe máte nadváhu." else{ alert("vyplňte prosím všetko správne") <i>ing.drgo Pavel,20.január 2017,09:26</i> CHROME:

46 JavaScript návod 08 Podmínky ELSE a ELSE IF Teraz použijeme na vytvorenie podmienok reťazcové premenné.(na rozdiel od návodu 07 kde sme v podmienkach použili číselné premenné.) Pr30Použitie reťazcovej premennej v podmienke <html> <title>javascript tútorial</title> <script type="text/javascript"> var den = "pondelok"; if(den =="pondelok"){ document.write("je pondelok");

47 Chrome: Úplna forma riešenia príkazu if If(podmienka){ else{ Príkaz1,ktorý sa vykoná ak je splnená podmienka príkaz2,ktorý sa vykoná ak podmienka nie je splnená;

48 Pr31 Príklad úplného vyhodnotenia podmienky <html> <title>javascript tútorial</title> <script type="text/javascript"> var den = "pondelok"; if(den =="pondelok"){ document.write("je pondelok"); else { document.write("nie je pondelok"); Chrome Pr31a Príklad pre vetvenie ak nie je splnená podmienka <html> <title>javascript tútorial</title> <script type="text/javascript">

49 //Tu je zmena oproti predchádzajúcemu príkladu var den = "utorok"; if(den =="pondelok"){ document.write("je pondelok"); else { document.write("nie je pondelok"); Chrome Rozšírenie počtu vyhodnotených podmienok Grafický zápis

50 SYNTAX: If(podmienka1){ Príkaz1,ktorý sa vykoná ak je splnená podmienka1; else if( podmienka2){ príkaz2,ktorý sa vykoná ak podmienka2 je splnená;

51 else { prikaz 3; Pr32 Vyhodnotenie viacerých podmienok <html> <title>javascript tútorial</title> <script type="text/javascript"> var den = "utorok"; if(den =="pondelok"){ document.write("je pondelok"); //Tu je zmena voči prechádzajúcemu príkladu else if(den=="utorok"){ document.write("je utorok"); Chrome Pr33 Opakované použitie príkazu else if

52 <html> <title>javascript tútorial</title> <script type="text/javascript"> //Tu je zmena dňa na stredu var den = "streda"; if(den =="pondelok"){ document.write("je pondelok"); else if(den=="utorok"){ document.write("je utorok"); else if(den =="streda"){ document.write("je streda"); Chrome: Pr34 Ošetrenie možnosti ak žiadna podmienka v if nie je splnená <html> <title>javascript tútorial</title> <script type="text/javascript"> //Tu je zmena dňa na piatok var den = "piatok"; if(den =="pondelok"){ document.write("je pondelok");

53 else if(den=="utorok"){ document.write("je utorok"); else if(den =="streda"){ document.write("je streda"); // Tu je vyriešená možnost ak žiadna podmienka nie je splnená else{ document.write("je iný deň") Chrome Pr.35 hľadanie maximálnej hodnoty z troch zadaných <html lang='sk'> <title>výber maximálnej hodnoty z troch zadaných hodnôt</title> <meta charset='utf-8'> <link href='images/logo.png' rel='shortcut icon' type='image/png'> <script type="text/javascript"> var max = 0; var cislo1 = prompt("zadej číslo a:", ""); var a = Number(cislo1); var cislo2 = prompt("zadej číslo b:", ""); var b = Number(cislo2); var cislo3 = prompt("zadej číslo c:", ""); var c = Number(cislo3); if(a > b){max = a else if (b > c) { max = b else { max = c

54 document.write("<strong>maximálna hodnota je:</strong>"+ max); Pr36.kalkulačka <html lang='sk'> <title>jednoduchá kalkulačka</title> <meta charset='utf-8'> <link href='images/logo.png' rel='shortcut icon' type='image/png'> <body style="background-color:hsla(120,100%,50%,0.7) ";> <!--(odtieň, sýtosť, ľahkosť, alfa), Zelená farba pozadia--> <h1> Vitajte v kalkulačke</h1> <script> var operacia = prompt("zadej číslo operácie:\n 1-sčítanie\n 2- odčítanien\n 3-Násobenie\n 4-Delenie", ""); var volba = Number(operacia); var cislo1 = prompt("zadej číslo a:", ""); var a = Number(cislo1); var cislo2 = prompt("zadej číslo b:", ""); var b = Number(cislo2); var vysledok = 0; var znak = ""; if (volba == 1){ vysledok = a + b; znak = "+"; else if (volba == 2){ vysledok = a - b; znak = "-"; else if (volba == 3){ vysledok = a * b;

55 znak = "*"; else if (volba == 4){ vysledok = a / b; znak = "/"; document.write("číslo a je: " + a + "<br>"); document.write("číslo b je: " + b + "<br>"); document.write("výsledok: "+ a + znak + b +" = "+vysledok); CHROME:

56 Pr.porovnaj.html <html lang='sk'> <title>porovnávanie čísel</title> <meta charset='utf-8'> <script> var a = prompt("zadej prvé číslo", ""); cislo1=number(a); var b = prompt("zadej druhé číslo", ""); cislo2=number(b); if (cislo1>cislo2){ document.write("prvé číslo je väčšie ako druhé"); else { document.write("druhé číslo je väčšie ako prvé");

57 Pozdrav.html <html lang='sk'> <title>pozdrav</title> <meta charset='utf-8'> <meta name='description' content='zobrazovanie času'> <meta name='keywords' content='html,javascript'> <meta name='author' content='drgo'> <meta name='robots' content='all'> <script type="text/javascript"> var a = prompt("zadej hodinu od 0 po 23", ""); var time = Number(a); if (time < 10) { document.write("dobré ráno"); else if (time < 20) { document.write("dobrý deň"); else { document.write("dobrý večer"); SWITCH CASE Swith case sa používa ak potrebujeme vyhodnotiť veľký počet podmienok.pre tento účel sa príkaz if...else if...else nehodí. Pr35 Použitie switch case pre vyhodnotenie vstupnej premennej

58 <html> <title>javascript tútorial</title> <script type="text/javascript"> // Vstupná premenná var zviera = "pes"; switch (zviera) { case "pes": document.write("zviera je:"+zviera); document.write(" a šteká"); break case "mačka": document.write("zviera je:"+zviera); document.write("a mravčí"); break default: document.write("ţiadne známe zviera"); Chrome Pr36 Zobrazenie dňa podľa jeho čísla <html> <title>javascript tútorial</title>

59 <script type="text/javascript"> // Vstupná premenná var denvtyzdni = "1"; switch (denvtyzdni) { case "1": document.write("dnes je Pondelok"); break case "2": document.write("dnes je Utorok"); break case "3": document.write("dnes je Streda"); break case "4": document.write("dnes je Štvrtok"); break default: document.write("ţiadny známy deň"); Chrome: Pr.Interaktívny týždeň PREZENTÁCIA <html> <title>zobrazenie dňa v tyţdni</title> <body style="background-color:gray";> <h1 style="color:blue;">zadaj poradové číslo dňa v týţdni</h1> <form name="formular">

60 <input type="text" name="den" size="10"><br /><br /> <input type="button" value="zobraziť deň v týţdni" onclick="tyzden()"><br /><br /> </form> <script type="text/javascript"> function tyzden() { // Vstupná premenná var denvtyzdni = document.formular.den.value; switch (denvtyzdni) { case "1": document.write("dnes je Pondelok"); break case "2": document.write("dnes je Utorok"); break case "3": document.write("dnes je Streda"); break case "4": document.write("dnes je Štvrtok"); break case "5": document.write("dnes je Piatok"); break case "6": document.write("dnes je Sobota"); break case "7": document.write("dnes je Nedeľa"); break default: document.write("ţiadny známy deň");

61 JavaScript návod 10 Cykly FOR Cykly možu byť výhodné ak opakovane vykonávame neaké akcie.napríklad ak potrebujeme 100 krát zapísať vetu Učím sa programovať Javascript.Museli by sme použiť 100 riadkov s príkazom: Document.write( Učím sa programovať Javascript ); Na elegantné vyriešenie dohto problému použijeme cyklus. 1.Cyklus s konečným počtom opakovaní for (i = 1;i <= 10;i++) Počitadlo opakovaní i začne na hodnote 1,opakovanie sa vykoná 10 krát. Pokaždom sa skontroluje hodnota i a počitadlo opakovaní sa zvýši o hodnotu 1. Pr37!DOCTYPE html> <html> <title>javascript tútorial</title>

62 <script type="text/javascript"> // Počet opakovaní je 10 for (i = 1;i <= 10;i++){ document.write("číslo:"+ i +"<br />"); Chrome Poznámka:Ak zmeníme číslo 10 napr. na 12,zopakuje sa document.write 12 krát Ak napríklad zmeníme i++ na i+=2 bude sa počidlo opakovaní meniť iba na nepárne čísla. Pr38 <html> <title>javascript tútorial</title> <script type="text/javascript"> // Počet opakovaní je 5,iba nepárne hodnoty for (i = 1;i <= 10;i+=2){ document.write("číslo:"+ i +"<br />");

63 Chrome Požitie príkazu break používa sa na prerušenie opakovaní bez ohľadu na to, že sa nedokončil plný počet opakovaní. Pr39 Príklad na predčasné ukončenie cyklu <html> <title>javascript tútorial</title> <script type="text/javascript"> // Ak premenná i nadobudne hodnotu 6 cyklus sa predčasne ukončí for (i = 1;i <= 12;i++){ document.write("číslo:"+ i +"<br />"); if(i == 6)break; Chrome

64 Použitie príkazu continue Použije sa v prípade, ak pre určitú hodnotu počitadla, chceme vykonať iný príkaz ako je pre ostatné hodnoty počitadla.po prerušení sa pokračuje dalej daľšou hodnotou počitadla. Pr40.Na využitie prerušenia v cykle FOR pri hodnote počitadla 6 <html> <title>javascript tútorial</title> <script type="text/javascript"> for (i = 1;i <= 12;i++){ document.write("<br />"); document.write("číslo:"+ i ); if(i == 6)continue; // Pre hodnotu počitadla 6 sa vypíše iný text document.write("je úţasné číslo"); Chrome

65 JavaScript návod 11 Cykly WHILE a DO WHILE Cykly WHILE

66 Tento cyklus má na začiatku podmienku.pokiaľ táto podmienka platí, budú sa vykonávať príkazy v tele cyklu. SYNTAX cyklu: while (podmienka){ Príkaz1;... Príkaz n; Pr41.Použitia príkazu while pre vytvorenie cyklu <html> <title>javascript tútorial</title> <script type = "text/javascript"> var pocetopakovani = 1; while(pocetopakovani <= 10){ document.write("cyklus číslo:"+ pocetopakovani + "<br />"); //Počitadlo opakovaní sa zvýši o 1 až po vykonaní príkazu document pocetopakovani ++;

67 Chrome 2.Cyklus do while V tomto prípade vyhodnocujeme podmienku až na konci cyklu. Hodnotu počítadla zvyšuje ešte pred vyhodnotením podmienky. Takže cyklus sa vykoná aspoň jeden krát bez ohľadu na to či je podmienka splnená alebo nie. Použitie tohto cyklu je v prípade, keď chceme aby sa cyklus vykonal aspoň jeden krát.

68 SYNTAX cyklu: do{ Príkaz1;... Príkaz n; Zvýšenie počitadla; while(podmienka) Pr42 Príklad na použitie cyklu typu do..while <html> <title>javascript tútorial</title> <script type = "text/javascript"> var pocetopakovani = 1; do{ document.write("cyklus číslo:"+ pocetopakovani +"<br />"); pocetopakovani ++; //Podmienka sa testuje až po vykonaní všetkých príkazov while(pocetopakovani <= 10) Chrome

69 Aj v týchto cykloch môţeme pouţiť príkazy break a continue Pr43 Pouţitie príkazu break na predčasné ukončenie cyklu <html> <title>javascript tútorial</title> <script type = "text/javascript"> var pocetopakovani = 1; do{ document.write("cyklus číslo:"+ pocetopakovani +"<br />"); pocetopakovani ++; /*Použitie break na predčasné ukončenie cyklu pri splnení podmienky*/ if(pocetopakovani == 6) break; //Podmienka sa testuje až po vykonaní všetkých príkazov while(pocetopakovani <= 10) Chrome: JavaScript návod 12 Pole v JavaScriptu Ak potrebujeme vypísať viac premenných,musíme otrocky ich mená.

70 document.write(bedna1+" "+bedna2+" "+bedna3+...+bedna n ); Čo v prípade ak budeme mať bední 50,100,200.Bolo by vhodné ak by sme moli pracovať s číslom bedne ako i indexom a použiť cyklus napríklad for. Vhodným riešením je použiť pole. Pole nám tvorí skupina premenných, ktoré majú spoločný názov a každá táto premenná (prvok poľa) má svoj index. Môžu byť očíslované.potom môžeme tento číselný index použiť a pracovať s ním v cykle. Pole Vytvoríme ho nasledovne: var bedna = new Array(); Číselný index poľa sa začína hodnotou 0 Zadefinovanie prvkov poľa sa robí nasledovne: bedna[0] = "bedna 1"; bedna[1] = "bedna 2"; bedna[2] = "bedna 3"; pr44.definovanie a zobrazenie prvkov poľa bedna <html> <title>javascript tútorial</title> <script type = "text/javascript"> var bedna = new Array(); bedna[0] = "bedna 1"; bedna[1] = "bedna 2"; bedna[2] = "bedna 3"; for(i = 0;i < 3;i++){ document.write(bedna[i]+"<br />");

71 Chrome Pr45 Skrátená forma zadefinovania prvkov poľa <html> <title>javascript tútorial</title> <script type="text/javascript"> //Položky poľa oddelíme čiarkou var bedna = new Array("bedna 1","bedna 2","bedna 3"); for(i = 0;i < 3;i++){ document.write(bedna[i]+"<br />"); Chrome:

72 Pr46 Ako index môžeme použiť neaký názov napr.pomarance <html> <title>javascript tútorial</title> <script type="text/javascript"> var bedna = new Array(); bedna["banany"] = 4; bedna["pomarance"] = 6; bedna["ananas"] = 4; //Použitie reťazcov ako indexov poľa document.write("počet pomarančov:"+bedna["pomarance"]+"<br />"); document.write("počet banánov:"+bedna["banany"]+"<br />"); document.write("počet ananasov:"+bedna["ananas"]+"<br />"); Chrome JavaScript návod 13 Pole v JavaScriptu LENGTH a další metódy Pri používaní prvkov poľa si musíme pamätať koľko ich je. Potrebovali by sme nejaký spôsob ako ich počet zistiť. Veľkosť poľa sa môže meniť: Pri vkladaní prvkov (ich počet rastie) Pri mazaní prvkov (ich počet sa zmenšuje) 1.Zisťovanie počtu prvkov poľa

73 Na zisťovanie dĺžky poľa, teda počet prvkov sa používa metóda length Pr47.Metóda zisťovania počtu prvkov poľa abc <html> <title>javascript tútorial</title> <script type = "text/javascript"> var abc = new Array("a","b","c"); // názov poľa je abc document.write("počet prvkov poľa abc je:"+abc.length); Chrome Pr48 Výpis prvkov trojrozmerného poľa abc <html> <title>javascript tútorial</title> <script type = "text/javascript"> var abc = new Array("a","b","c"); // Výpis prvkov poľa abc podľa indexov for(i = 0;i <= abc.length - 1;i ++){ //-1 je preto lebo počet prvkov poľa je 3,čo je 0,1,2 document.write("hodnota prvku:"+ i+":je:"+abc[i]+"<br>")

74 Chrome 2.Zisťovanie prvkov poľa z reťazcovej premennej Použijeme metódu: split( znak oddeľovača ) Oddeľovač ktorý je použitý na oddelenie jednotlivých reťazcov v textovej premennej Pr49 Oddelenie prvkov reťazcovej premennej do prvkov poľa <html> <title>javascript tútorial</title> <script type = "text/javascript"> //Prvky premennej "dobroty" oddelené oddelovačom čiarka "," var dobroty = "Šišky,Palacinky,Mrkva"; //dobroty je premnná z ktorej chceme naplniť pole "poledobrot" var poledobrot = dobroty.split(","); for(i = 0;i <= poledobrot.length - 1;i ++) //Metóda split slúži na oddelenie reťazcov z reťazcovej premennej "dobroty" document.write(poledobrot[i] +"<br />"); Chrome

75 3.Zmena indexovania číselného poľa Ak nadefinujeme pole takto: var tyzden = new array("pondelok","utorok","streda"); automaticky sa priradí: pondelku index 0 utorku index 1 strede index 2 automatické indexovanie môžeme obísť tak,že pridelíme indexy sami pr50 Výpis pola tyzden z ručne pridelenými indexami <html> <title>javascript tútorial</title> <script type = "text/javascript"> var tyzden = new Array(); // Indexy pridelíme ručne tyzden[1] ="Pondelok"; tyzden[2] ="Utorok"; tyzden[3] ="Streda"; /*metóda length zisťuje indexovanie automatické aj keď pole s indexom 0 nie je ručne obsadený*/ for(i = 1;i <= tyzden.length -1;i ++) //Dĺžka poľa je cez objekt tyzden a metódu length document.write("poradie prvku v poly tyzden:"+ i + ":"+tyzden[i] +"<br />") Chrome

76 JavaScript návod 14 Pole v JavaScriptu Přidávání a mazání prvků Pr51.Vytvorenie nového poľa(novej databázy) s menom smazenica <html> <title>javascript tútorial</title> <script type = "text/javascript"> // Nová databáza "smazenica" var smazenica = new Array("kozák","dubák","osikovec"); //Výpis databazy smazenica for(i = 0;i <= smazenica.length -1;i ++) //Dĺžka poľa je cez objekt tyzden a metódu length document.write( smazenica[i] +" "); Chrome

77 Pr52Pridanie prvku na koniec pola smazenica príkaz push <html> <title>javascript tútorial</title> <script type = "text/javascript"> // Nová databáza "smazenica" var smazenica = new Array("kozák","dubák","osikovec"); //Výpis databazy smazenica for(i = 0;i <= smazenica.length -1;i ++){ //Dĺžka poľa je cez objekt smazenica a metódu length document.write( smazenica[i] +" "); /*Na objekt smazenica aplikujeme metódu push pre pridanie nového prvku na koniec poľa smazenica*/ smazenica.push("muchotravka"); document.write("<br>");//prechod na nový riadok // Výpis nového poľa s pridaným prvkom for(i = 0;i <= smazenica.length -1;i ++){ //Dĺžka poľa je cez objekt smazenica a metódu length document.write( smazenica[i] +" "); chrome:

78 Pr53 Pridanie prvku na začiatok pola smazenica príkaz unshift na miesto prvoku s indexom 0 <html> <title>javascript tútorial</title> <script type = "text/javascript"> // Nová databáza "smazenica" var smazenica = new Array("kozák","dubák","osikovec"); //Výpis databazy smazenica for(i = 0;i <= smazenica.length -1;i ++){ //Dĺžka poľa je cez objekt smazenica a metódu length document.write( smazenica[i] +" "); /*Na objekt smazenica aplikujeme metódu unshift pre pridanie nového prvku na začiatok poľa smazenica,ostatné prvky sa posunú nahor*/ smazenica.unshift("muchotravka"); document.write("<br>");//prechod na nový riadok // Výpis nového poľa s pridaným prvkom for(i = 0;i <= smazenica.length -1;i ++){ document.write( smazenica[i] +" "); Chrome Pr5 4 Vymazanie prvku na začiatku pola smazenica príkazom shift () <html> <title>javascript tútorial</title>

79 <script type = "text/javascript"> // Nová databáza "smazenica" var smazenica = new Array("kozák","dubák","osikovec","muchotrávka"); //Výpis databazy smazenica for(i = 0;i <= smazenica.length -1;i ++){ //Dĺžka poľa je cez objekt smazenica a metódu length document.write( smazenica[i] +" "); /*Na objekt smazenica aplikujeme metódu shift pre zmazanie prvku na začiatok poľa smazenica*/ smazenica.shift(); document.write("<br>");//prechod na nový riadok // Výpis nového poľa s bez vymazaného prvku na poslednom indexe,bez muchotravky for(i = 0;i <= smazenica.length -1;i ++){ document.write( smazenica[i] +" "); Chrome Pr55 Vymazanie prvku na konci pola smazenica príkazom pop() <html> <title>javascript tútorial</title> <script type = "text/javascript"> // Nová databáza "smazenica" var smazenica = new Array("kozák","dubák","osikovec","muchotrávka"); //Výpis databazy smazenica for(i = 0;i <= smazenica.length -1;i ++){ //Dĺžka poľa je cez objekt smazenica a metódu length document.write( smazenica[i] +" ");

80 /*Na objekt smazenica aplikujeme metódu pop() pre vymazanie prvku na konci poľa smazenica */ smazenica.pop(); //na začiatok poľa smazenica document.write("<br>");//prechod na nový riadok // Výpis nového poľa s bez vymazaného prvku na poslednom indexe,bez muchotravky for(i = 0;i <= smazenica.length -1;i ++){ document.write( smazenica[i] +" "); Chrome Pr56 Vymazanie prvku na určitej pozícií v poly,teda s určitým indexom metóda splice() <html> <title>javascript tútorial</title> <script type = "text/javascript"> // Nová databáza "smazenica" var smazenica = new Array("kozák","dubák","osikovec","muchotrávka"); //Výpis databazy smazenica for(i = 0;i <= smazenica.length -1;i ++){ //Dĺžka poľa je cez objekt smazenica a metódu length document.write( smazenica[i] +" "); /*Na objekt smazenica aplikujeme metódu splice(a,b) a je poradie prvku v poli,b je počet prvkou poľa ktoré chceme od tejto pozície zmazať*/ smazenica.splice(1,1); //Vymaže od prvku s indexom 1,počet prvkov s hodnotou 1 document.write("<br>");//prechod na nový riadok

81 /* Výpis nového poľa s bez vymazaného prvku na 1 indexe v počte 1,teda "dubák"*/ for(i = 0;i <= smazenica.length -1;i ++){ document.write( smazenica[i] +" "); Chrome Pr57 Nahradenie prvku na určitej pozícií v poli,teda s určitým indexom metóda splice(a,b,c) <html> <title>javascript tútorial</title> <script type = "text/javascript"> // Nová databáza "smazenica" var smazenica = new Array("kozák","dubák","osikovec","muchotrávka"); //Výpis databazy smazenica for(i = 0;i <= smazenica.length -1;i ++){ //Dĺžka poľa je cez objekt smazenica a metódu length document.write( smazenica[i] +" "); /*Na objekt smazenica aplikujeme metódu splice(a,b,c),kde a je poradie prvku v poli,b je počet prvkou poľa a c je nový text ktorým chceme vybraný prvok nahradiť*/ smazenica.splice(1,1,"maslák"); //Nahradí od prvku s indexom 1,počet prvkov s hodnotou 1,textom "maslák" document.write("<br>");//prechod na nový riadok /* Výpis nového poľa s vymeneným prvku na 1 indexe v počte 1,teda "dubák" nahradíme textom "maslák"*/ for(i = 0;i <= smazenica.length -1;i ++){ document.write( smazenica[i] +" ");

82 Chrome Javascript Funkcie Jedná sa o blok kódu, ktorý raz napíšeme a potom ho môžeme ľubovoľne volať bez toho, aby sme ho písali znovu a opakovali sa. Funkciu deklarujeme pomocou kľúčového slova function a obsahuje blok kódu v zložených zátvorkách. vlastnosti funkcií samostatná pomenovaná časť programu (skriptu) volá sa (aj opakovane) zo skriptu ako reakcia na udalosť vnútri funkcie je možné volať inú funkciu sprehľadňuje skript, skracuje zdrojový text umožňuje získavať hodnoty, s ktorými bude skript pracov deklarácia funkcie kľúčové slovo Function názov funkcie - bez diakritiky a špeciálnych znakov zátvorky - prázdne alebo parametre SYNTAX DEFINÍCIE FUNKCIE: function name(parameter1, parameter2, parameter3) { kód ktorý má byť vykonaný

83 Názvy funkcií (name) môžu obsahovať písmená, číslice, podčiarknutia a znaky dolára (rovnaké pravidlá ako pre premenné). Parametre funkcie(parameter) sú názvy uvedené v definícii funkcie, ktoré sú dodané funkcií ak je volaná. Volanie funkcie Kód vnútri funkcie sa spustí, keď "niečo" volá funkciu: Ak dôjde k udalosti (keď používateľ klikne na tlačidlo) Pri vyvolaní kódu JavaScript Automaticky Keď JavaScript dosiahne príkaz return, bude zastavený. Funkcia často vypočítava návratovú hodnotu Definovanie a volanie funkcie bez parametra pozdrav.html <html lang="sk"> <title>definovanie a volanie funkcie</title> <script type="text/javascript"> function pozdrav() { document.write("ahoj,vrelo Ťa tu vítam!!!"); pozdrav(); // zavolanie funkcie pozdrav bez parametrov Chrome:

84 .Poznámka:Ak zavoláme funkciu pozdrav tri krát,tak tri krát vypíše podrav Ahoj Pozdrav3.html <html lang="sk"> <title>definovanie a volanie funkcie</title> <script type="text/javascript"> function pozdrav() { document.write("ahoj,vrelo Ťa tu vítam!!!<br>"); pozdrav(); // zavolanie funkcie pozdrav bez parametrov pozdrav(); pozdrav(); Chrome: Funkcie s parametrami Funkcia môže mať tiež ľubovoľný počet vstupných parametrov, ktoré píšeme do zátvorky v jej definícii a podľa nich ovplyvňujeme jej správanie. Poznámka: Vychadzajme z predcházajúceho príkladu,pri pozdrave chceme osloviť toho koho pozdravujeme

85 Meno.html <html lang="sk"> <title>definovanie a volanie funkcie s parametrom</title> <script type="text/javascript"> function pozdrav(meno) { document.write("ahoj,vrelo Ťa tu vítam," + meno + "!!!<br>"); pozdrav("karol"); // zavolanie funkcie pozdrav s parametrom meno pozdrav("tomáš"); pozdrav("andrej"); CHROME: Príklady funkcie s parametrami Funkcia.html <html lang="sk"> <title>funkcia s parametrami</title> <script type="text/javascript"> function f(a, b) { document.write("a = " + a + "<br>"); document.write("b = " + b + "<br>");

86 f(5); f(1, 2); CHROME: Vysledok.html <html lang="sk"> <title>funkcia s parametrami</title> <script type="text/javascript"> function sucin(a,b,popis) { document.write(popis+' = '+ a*b +"<br>"); sucin(4,5,"výsledok"); // výsledok = 20 sucin(40,50,'40 x 50'); // 40 x 50 = 2000 Chrome:

87 Praktická realizácia funkcií 1.Výpočet Obsahu kruhu s použitím formulára <html lang="sk"> <title>obsah kruhu - získanie poloţiek s formulára</title> <script language="javascript"> function vypocet() { var r,s; r = parsefloat(document.f.r.value);/*funkcia parsefloat zmení obsah v poli R na číslo*/ S = Math.round(100*Math.PI*r*r)/100;/*Math.round (x) vracia hodnotu x zaokrúhlenú na svoje najbližšie celé číslo:*/ /*Math.PI; // returns */ document.write("obsah kruhu je:" + S +"cm<sup>2</sup"); <h2> Obsah kruhu</h2> <form name="f"> <h3>zadaj polomer kruhu v cm:</h3> <input type="text" name="r"><br><br> <input type="button" value="vypočítaj obsah" onclick="vypocet()"><!-- Stlačenim tlačidla sa volá funkcia "vypocet"--> <input type="reset" value="vymaţ formulár"> </form> Chrome:

88 2.Výpočet koreňov kvadratickej rovnice Kvadrat.html <html lang="sk"> <title>kvadratická rovnica - vstupy s formulára</title> <script language="javascript"> function ake_korene() { var a,b,c,d; a = document.koef.a.value; b = document.koef.b.value; c = document.koef.c.value; d = b * b - 4 * a * c; ocument.all.odst1.innertext = "Diskriminátor je:" + d;/*vloží do prvku s id=odst1 obsah ktorý je uvedený za document...innertext=*/ if (d > 0) document.koef.vysl.value = "dva reálne korene"; if (d == 0) document.koef.vysl.value = "dvojnásobný reálný koreň"; if (d < 0) document.koef.vysl.value = "dva komplexné korene"; /*pre prvok dokumentu koef s menom vysl priradí hodnotu "počet koreňov"*/ <h2>aké korene má kvadratická rovnica?</h2> <h3>zadaj koeficienty rovnice ax² + bx + c</h3> <form name="koef"> a: <input type="text" name="a" size="3"> <br> b: <input type="text" name="b" size="3"> <br> c: <input type="text" name="c" size="3"> <br><br> <input type="button" value= "Potvrď voľby" onclick= "ake_korene()"> <h3>výsledok:</h3> <P id="odst1"></p> <P>Rovnica má: <input type="text" name="vysl" size="25"></p> </form> Chrome:

89 Prevodník teplôt <html lang="sk"> <title>prevodník teplôt</title> <script language="javascript"> function Cels2Fahr() { var teplcels=parsefloat(document.teplota.celsius.value); var teplfahr=(9/5)*teplcels+32; document.teplota.fahrenheit.value=math.round(teplfahr*10)/10; function Fahr2Cels() { var teplfahr=parsefloat(document.teplota.fahrenheit.value); var teplcels=(teplfahr-32)*(5/9); document.teplota.celsius.value=math.round(teplcels*10)/10; <form name="teplota"> <table border="0"> <tr align="center"> <td colspan="3"><b>teplota ve stupňoch</b></td> </tr> <tr align="center"> <td>celsia<br> <input type="text" name="celsius" size="10"> <td><input type="button" value=">>> C na F >>>" onclick="cels2fahr()"><br> <input type="button" value="<<< F na C <<<"onclick="fahr2cels()">

90 <td>fahrenheita<br><input type="text" name="fahrenheit" size="10"> </table> </form> Chrome: JavaScript Formuláre JavaScript umí pracovat s formuláři pomocí JavaScriptu je možné ověřovat vyplněná data, rozhodovat o odeslání formuláře atd. Prvky formuláře Na prvek formuláře (input, textarea atd.) je možné se odkazovat pomocí jejich pořadí v rámci formuláře (form), nebo efektivněji pomocí jejich jmen (atribut name): Pr59 Kontrola vloženia údajov do textové pola <html lang="sk"> <meta charset="utf-8"> <form name="form"> <input type="text" name="form2"> <input type="text" name="form3"> <a href="javascript:form();">potvrdte vloženie údajov!!!</a> </form> <script> function form(){ if(document.form.form2.value=="") window.alert("nevyplnil ste prvné pole!"); else if(document.form.form3.value=="") window.alert("nevyplnil ste druhé pole!"); else if(document.form.form3.value=="" && document.form.form2.value=="") window.alert("nic jste nevyplnil!"); else window.alert("1.pole obsahuje: "+document.form.form2.value+" a 2.pole obsahuje: "+document.forms[0].elements[1].value);

91 Chrome: Vytvořili jsme jednoduchý formulář, který ověřuje, zda jsou vyplněné obě položky (pokud ne, oznámí to dialogovým oknem), pokud jsou vyplněné vypíše je prostřednictvím dialogového okna. První vlastnost, kterou k formulářovému prvku přistupujeme, je document.forms[pořadí].elements[pořadí].value. První formulář na stránce má pořadové číslo 0, další 1 atd. Stejně tak prvky v rámci formuláře jsou postupně číslovány 0, 1, 2 atd. Přes tato čísla lze JavaScriptem získávat obsah polí. Je to metoda poměrně komplikovaná, nepřehledná a nepružná (při zavedení nového prvku do formuláře musíte přečíslovat skript). Druhá metoda je závislá na pojmenování (hodnoty atributů name) formuláře a jeho prvků. Hodnotu získáme pomocí vlastnosti document.jméno_formuláře.jméno_prvku.value, v uvedeném skriptu např.document.form.form2.value. Metody pro práci s formuláři S formuláři pracují tyto metody: Metoda Popis document.form.reset() Smaže obsah formuláře; ekvivalentní s tlačítkem [reset] document.form.submit() Odešle formulář; ekvivalentní s tlačítkem [submit] document.form.prvek.blur() Deaktivace pohledu na prvek

92 document.form.prvek.focus() Aktivace pohledu na prvek document.form.prvek.select() Vybere obsah prvku Místo "form" je třeba zadávat jméno formuláře, místo "prvek" název prvku formuláře. Ukázka: Pr60 Aktivovanie a deaktivovanie textového pola. <html lang="sk"> <meta charset="utf-8"> <form> <input type="text" name="form2"> <input type="button" value="vyber" onclick="form2.select();"> <input type="button" value="deaktivuj" onclick="form2.blur();"> </form> <script> function form(){ if(document.form.form2.value=="") window.alert("nevyplnili ste prvné pole!"); else if(document.form.form3.value=="") window.alert("nevyplnili ste druhé!"); else if(document.form.form3.value=="" && document.form.form2.value=="") window.alert("nič ste mevyplnili!"); else window.alert("1.pole obsahuje: "+document.form.form2.value+" a 2.pole obsahuje: "+document.forms[0].elements[1].value); Chrome: Pokud se formulářové metody nachází uvnitř formuláře, není nutné zapisovat ve funkci jméno formuláře.

93 Kontrola formulářových prvků (checked a radio) Checked, Select, Radio Už jsme si ukázali, jak ověřit data formulářových prvků input, nyní se podíváme na kontrolu komplikovanějších prvků checked, select a radio- Checked - zaškrtávací pole JavaScriptem lze zjistit, zda je zaškrtávací pole (checked) zaškrtnuto následovně: Pr61 Aktivovanie a deaktivovanie zaškrtávacieho pola. <html lang="sk"> <meta charset="utf-8"> <form name="form"> <input type="checkbox" name="form2"> <input type="button" value="overit" onclick="over();"> </form> <script> function over(){ if (document.form.form2.checked==true) window.alert("pole bolo zaškrtnuté"); else window.alert("pole nebolo zaškrtnuté"); Chrome: Funkce over() určí zda je pravda, že pole bylo zaškrtnuto. Tak jako document.form.prvek.value vrátí popis prvku, tak document.form.prvek.checked vrátí hodnotu true (1, pravda) nebo false (0, nepravda), podle toho, zda je pole zaškrtnuté,alebo nie..

94 Select a option - rolovací nabídka Rovněž rolovací menu lze ověřit a zjistit, co návštěvník vybral: Pr62 Aktivovanie a deaktivovanie selektorového pola. <html lang="sk"> <meta charset="utf-8"> <select name="sel" onchange="window.alert(this.options[this.selectedindex].value);"> <option value="javascript">javascript</option> <option value="php">php</option> <option value="html">html</option> <option value="css">css</option> </select> Chrome: JavaScript

95 Událost onchange reaguje na změnu výběru, pokud změna nastane, dialogové okno vypíše hodnotu vybrané položky pomocí this.options[this.selectedindex].value. Klíčové slovo this se odkazuje na daný prvek, u kterého se nachází.: Radio A ještě jeden formulářový prvek ke kontrole: Pr63 Aktivovanie a deaktivovanie radio pola. <html lang="sk"> <meta charset="utf-8"> <form name="form6"> <label>áno</label><input type="radio" name="a" checked> <label>nie</label><input type="radio" name="a"> <input type="button" onclick="over()" value="čo som zaškrtol?"> <script> function over(){ if (document.form6.a[0].checked) window.alert("áno"); else window.alert("nie") </form> > Chrome: ano ne Kontrola probíhá podobně jako u zaškrtávacího pole.

96 Zisťovanie Dalších hodn O prvcích formuláře můžete zjistit opravdu skoro všechno. Vlastnostdocument.form.prvek.value vrací hodnotu atributu value. I na ostatní atributy se lze dotazovat pomocí vlastnosti document.form.prvek.value size name rows cols atd.. Pr64 Aktivovanie a deaktivovanie bloku textu <html lang="sk"> <meta charset="utf-8"> <form name="form"> <input type="text" size="4" name="pole_textu" value="1234"> <textarea cols="3" rows="2" name="blok_textu" ></textarea> <script> document.write("<br>textové pole"); document.write("<br>meno: "+document.form.pole_textu.name); document.write("<br>veľkosť: "+document.form.pole_textu.size); document.write("<br>typ prvku: "+document.form.pole_textu.type); document.write("<br>popisok: "+document.form.pole_textu.value); document.write("<br><br>blok textu"); document.write("<br>meno: "+document.form.blok_textu.name); document.write("<br>počet riadkov: "+document.form.blok_textu.rows); document.write("<br>počet stľpcov: "+document.form.blok_textu.cols); </form> Chrome:

97 Pr56 Aktivovanie a deaktivovanie textového pola <html lang="sk"> <meta charset="utf-8"> <title>práca s polom</title> Address:<br> <textarea id="mytextarea"> 342 Alvin Road Ducksburg</textarea> <p>klikni na tlačidlo ak chceš zmeniť obsah textového pola.</p> <button type="button" onclick="myfunction()">skús to!!!</button> <script> function myfunction() { document.getelementbyid("mytextarea").value = "Fifth Avenue, New York City"; Chrome:

98 JavaScript - Obrázky JavaScriptem je možné vytvořit animaci nebo zaměňovat obrázky (rollover) Přístup k obrázkům Pomocí HTML můžete do dokumentu vložit obrázek prvkem img. Javascript přistupuje k obrázkům dvěmi vlastnostmi (podobně jako k formulářům). Buď pomocí pořadí obrázku na stránce document.images[0] nebo pokud použijeme u prvku img atribut name -document.obrazek. Druhá vlastnost je použitelnější. Manipulace s obrázky - rollover Velmi často se setkáte s obrázky, které se po najetí myši změní. Tento efekt lze vytvořit pomocí JavaScriptu: Pr57 Zmena obrázkov pri presunutí kurzora na pôvodný obrázok a naspäť Ukázka: Funkce ct2() změní obrázek (atribut src) pomocí vlastnosti document.obrazek.src="ct2.jpg" (obálka se otevře). Druhá funkce nastává po opuštění obrázku a mění obálku zpět na zavřenou. <html lang="sk"> <meta charset="utf-8"> <title>práca s obrázkom</title> <script> function ct1(){ document.obrazek.src="ct1.jpg"; function ct2(){ document.obrazek.src="ct2.jpg"; <img src="ct1.jpg" onmouseover="ct2()" onmouseout="ct1()" name="obrazek">

99 Chrome: Pôvodný obrázok Obrázok po presune kurzora Animace Je založena na opakovaném střídání obrázků: Pr58 Animácia z obrázkov!doctype html> <html lang="sk"> <meta charset="utf-8"> <title>práca s obrázkami</title> <script language="javascript" type="text/javascript"> obr = -1; cas = 1000; function animation(){ obrazky = ["a.gif","b.gif","c.gif"]; if (obr+1==obrazky.length) obr=0; else obr++; obrazek.src = obrazky[obr];

100 window.settimeout('animation()',cas); <body onload="animation()"> <img src="a.gif" name="obrazek"> Chrome: Hotové Javascriptove kódy 1.Bežiaci text vo formulárovom poli <html lang="sk"> <meta charset="utf-8"> <title>javascript beţiaci text</title> <script language="javascript">

101 <!-- var id,pause=0,position=0; function banner() { var m1 = " Toto je ukaţka skrolovacieho pásika"; var m2 = " Verím, ţe sa Vám páči!"; var m3 = " Nevahajte a pouzite ho na svojej stranke."; var m4 = " Nezabudnite si pozriet aj dalsie skripty!"; var i,k,msg=m1+m2+m3+m4; k=(70/msg.length)+1; for(i=0;i<=k;i++) msg+=" "+msg; document.oznam.obdlznik.value=msg.substring(position,position+120); if(position++==msg.length) position=100; id=settimeout("banner()",100); // --> <body onload="banner();"> <form name="oznam"> <input type="text" name="obdlznik" size=60> </form> Chrome: 2.Javascript stredne zložitá kalkulačka <html lang="sk"> <meta charset="utf-8"> <title>javascript stredne zloţitá kalkulačka</title> <script language="javascript"> <!-- function compute(obj) { obj.expr.value = eval(obj.expr.value);

102 var one = '1'; var two = '2'; var three = '3'; var four = '4'; var five = '5'; var six = '6'; var seven = '7'; var eight = '8'; var nine = '9'; var zero = '0'; var plus = '+'; var minus = '-'; var multiply = '*'; var divide = '/'; var decimal = '.'; function enter(obj, string) { obj.expr.value += string; function clear(obj) { obj.expr.value = ''; <!-- --> <form name="calculator"> <table border=1> <tr> <td colspan=4> <input type="text" name="expr" size=30 action="compute(this.form)"> </tr><tr> <td><input type="button" value=" 7 " onclick="enter(this.form, seven)"> <td><input type="button" value=" 8 " onclick="enter(this.form, eight)"> <td><input type="button" value=" 9 " onclick="enter(this.form, nine)"> <td><input type="button" value=" / " onclick="enter(this.form, divide)"> </tr> <tr> <td><input type="button" value=" 4 " onclick="enter(this.form, four)"> <td><input type="button" value=" 5 " onclick="enter(this.form, five)"> <td><input type="button" value=" 6 " onclick="enter(this.form, six)"> <td><input type="button" value=" * " onclick="enter(this.form, multiply)"> </tr> <tr> <td><input type="button" value=" 1 " onclick="enter(this.form, one)">

103 <td><input type="button" value=" 2 " onclick="enter(this.form, two)"> <td><input type="button" value=" 3 " onclick="enter(this.form, three)"> <td><input type="button" value=" - " onclick="enter(this.form, minus)"> </tr> <tr> <td colspan=2><input type="button" value=" 0 " onclick="enter(this.form, zero)"> <td><input type="button" value=". " onclick="enter(this.form, decimal)"> <td><input type="button" value=" + " onclick="enter(this.form, plus)"> </tr> <tr> <td colspan=2><input type="button" value=" = " onclick="compute(this.form)"> <td colspan=2><input type="button" value="ac" size= 3 onclick="clear(this.form)"> </table> </form> Chrome: 3. Zaslanie formularovych udajov om <html lang="sk"> <HEAD> <meta charset="utf-8"> <TITLE>Posielanie vyplneného formulára om </TITLE> </HEAD> <BODY> <FORM NAME="mail_form" ACTION="mailto:unknown@unknown.sk?Subject=JavaScript TEST" METHOD="POST" ENCTYPE="text/plain">

104 <INPUT TYPE="hidden" SIZE=0 NAME="Info"> <table> <tr> <td> Meno: <td> <INPUT TYPE = "text" NAME = "Name"> <TR> <td> Téma: <td> <INPUT TYPE ="text" NAME = "Subject"> <tr> <td> Obľubená farba: <td> <INPUT TYPE = "text" NAME = "Color"> <tr> <td> Operačny systém: <td> <INPUT TYPE = "text" NAME = "System"> <tr> <td> Komentáre: <td> <TEXTAREA NAME = "Comments, Suggestions" COLS = 50 ROWS = 6> </TEXTAREA> </table> <CENTER> <INPUT TYPE = "submit" VALUE = "Pošli"> </CENTER> </FORM> Chrome:

105 4. Viacero farebných prechodov <html lang="sk"> <title>javascript zmena farieb </title> <meta charset="utf-8"> <script language="javascript"> <!-- function cols(c1, c2, c3, c4, c5, c6, c7){ this.c1 = c1; this.c2 = c2; this.c3 = c3; this.c4 = c4; this.c5 = c5; this.c6 = c6; this.c7 = c7; rainbow = new cols("red", "orange", "yellow", "green", "blue", "indigo", "violet"); fade = new cols("white", "DDDDDD", "BBBBBB", "999999", "777777", "555555", "333333", "black"); greens = new cols("darkgreen", "forestgreen", "green", "lawngreen", "lightgreen", "limegreen", "palegreen"); sunset = new cols("skyblue", "slateblue", "violet", "darkorange", "red", "darkred", "black"); psyc = new cols("violet", "lawngreen", "violet", "lawngreen", "violet", "lawngreen", "violet"); function cycle(type){ scheme = type; document.bgcolor = scheme.c1; timerid=settimeout('document.bgcolor = scheme.c2', document.selector.interval.value * 10); timerid=settimeout('document.bgcolor = scheme.c3', document.selector.interval.value * 20);

106 timerid=settimeout('document.bgcolor = scheme.c4', document.selector.interval.value * 30); timerid=settimeout('document.bgcolor = scheme.c5', document.selector.interval.value * 40); timerid=settimeout('document.bgcolor = scheme.c6', document.selector.interval.value * 50); timerid=settimeout('document.bgcolor = scheme.c7', document.selector.interval.value * 60); // --> <FORM NAME="selector"> Zvolte si farebnú schému: <INPUT TYPE="button" VALUE="Dúha" onclick="cycle(rainbow)"> <INPUT TYPE="button" VALUE="Prechod na čiernu" onclick="cycle(fade)"> <INPUT TYPE="button" VALUE="Zelená" onclick="cycle(greens)"> <INPUT TYPE="button" VALUE="Západ slnka" onclick="cycle(sunset)"> <INPUT TYPE="button" VALUE="Psycho" onclick="cycle(psyc)"><p> Zadaj interval zmeny farieb (1/10 sekundy): <INPUT TYPE="text" SIZE="8" NAME="interval" VALUE="50"> </p> </FORM> Chrome: 5. Po vybrati polozky z pull-down menu, presmeruje na stranku bez nutnosti kliknutia <html lang="sk"> <HEAD> <TITLE>JavaScript výber z menu </TITLE>

107 <meta charset="utf-8"> <SCRIPT LANGUAGE = "JavaScript"> <!-- function MakeArray() { this.length = MakeArray.arguments.length for (var i = 0; i < this.length; i++) this[i+1] = MakeArray.arguments[i] var url = new MakeArray("", " " " " " function jumppage(form) { i = form.selectmenu.selectedindex; if (i == 0) return; window.location.href = url[i+1]; // --> </SCRIPT> </HEAD> <BODY> <FORM> <TABLE BORDER=0 CELLPADDING=5 CELLSPACING=0> <TR><TD> Jednoduché výberove menu </TD></TR><TR><TD> <SELECT NAME="SelectMenu" onchange="jumppage(this.form)"> <OPTION>Vyber si stranku <OPTION>Casopis Pavucina <OPTION>JavaScript DESTINATION <OPTION>Casopis Netacik <OPTION>R-NET <OPTION>Superzoznam </SELECT> </TD></TR></TABLE> </FORM> </BODY> </HTML> Chrome:

108 6. Zmena obrázku po nabehnutí myši <html lang="sk"> <meta charset="utf-8"> <title>práca s obrázkom</title> <script language="javascript" type="text/javascript"> var prednahrati = new Image(); prednahrati.src = 'cerveny.gif'; <a href=" onmouseover="self.document['obrazek'].src='cerveny.gif';" onmouseout="self.document['obrazek'].src='zluty.gif';"> <img name="obrazek" src="zluty.gif" border="0"> </a> Chrome:

109 Základný stav: Zmena po premiestnení kuzora do žltého tlačidla 7. Jak vytvořit rozjížděcí menu <html lang="sk"> <meta charset="utf-8"> <title>práca s menu</title> <script language="javascript" type="text/javascript"> function prejdi(na){ if (document.rozjizdeci.menu.value!= "") { document.location.href = na <form name="rozjizdeci"> <select name="menu" onchange="prejdi(document.rozjizdeci.menu.options [document.rozjizdeci.menu.options.selectedindex].value)"> <optgroup label="ponuka:"> <option value= <option value= <option value= <option value= <option value= <option value= & design</option> <option value= </optgroup> </select> </form> Chrome:

110