Dynamické dokumenty na straně klienta Informatika pro ekonomy II

2 Statický × dynamický dokument •Statický dokument – vzhled je neměnný, uživatel si nemůže volit zobrazované informace •Dynamický dokument – tvar a prezentované informace může uživatel ovlivnit svojí činností •Generovaný dokument – vytvořen automatizovaně, ale může být statickým dokumentem

3 Dynamické dokumenty •Na straně serveru – vytvořeny programem, který běží na vzdáleném stroji  PHP, Perl (.pl), Python (.py), ASP •Na straně klienta – vytvoření a modifikaci zajišťuje prohlížeč (klient)

4 Dynamické dokumenty na straně klienta – princip klient (prohlížeč) WWW server URL HTML data HTML HTML dokument

5 Zpracování požadavku •Klient požádá server o soubor v jazyce HTML •Server zpět pošle požadovaný soubor bez jakéhokoliv zpracování •Obsahem souboru jsou kromě HTML značek také příkazy vloženého jazyka, které klient přečte •Pokud jim klient rozumí, provede je, tím vytvoří modifikovanou stránku, kterou sám zobrazuje

6 Vlastnosti dynamických dokumentů na straně klienta •Řešené úlohy nejsou rozsáhlé, množství zpracovávaných dat je poměrně nízké, data nelze čerpat ze souborů •Vysoká závislost na klientovi a jeho schopnostech (klient interpretuje vložený program) •Požadavky ani data uživatele včetně odpovědí nezatěžují síť •Lze reagovat na události vzniklé činností uživatele (pohyb myší, stisk libovolné klávesy,…)

7 Použití •Zpracování vstupu od uživatele •Kontrola dat ve formulářích •Výpočty •Oživení stránek (události s myší) •Přizpůsobení stránek •Automatický text (datum, citáty)

8 Skriptovací jazyky •Dynamické dokumenty se vytvářejí pomocí skriptovacích jazyků •Více druhů – JavaScript, JScript, VBScript… •JavaScript  zcela nezávislý na operačním systému  principiálně podobný jiným skriptovacím jazykům  nejrozšířenější  JavaScript ≠ Java (!)

9 Filosofie JavaScriptu •Práce s objekty  Manipulace s objekty prostřednictvím jejich metod •Přístup k zobrazeným prvkům v okně prohlížeče  Části okna  Prvky popsané jazykem HTML •Řada operací je závislá na typu a verzi prohlížeče

10 Filosofie JavaScriptu •Pomocí JavaScriptu lze vypisovat značky HTML  document.write(“ Nadpis “)  HTML značky jsou pro JavaScript obyčejný text  značky „převezme“ a interpretuje prohlížeč •Prvky HTML lze obsluhovat pomocí událostí JavaScriptu

11 Proměnné a datové typy •Proměnné není třeba deklarovat  založení proměnné prvním použitím  !překlepy, pojmenování  !citlivost na velikost písmen: suma ≠ Suma •Datové typy se neurčují  proměnná může obsahovat data různého typu  nejpoužívanější: číslo (celé a desetinné), řetězec, datum  !záměna řetězce a čísla

12 Proměnné a datové typy •Řetězce  uzavřeny do apostrofů nebo uvozovek ( "ahoj" )  !řetězec × proměnná  Speciální znaky v řetězcích: \n \r \t \\ \/ \” \’ \x126 •Čísla – s desetinnou tečkou! •Ostatní (datum…)

13 Typová konverze •Změna hodnoty na jiný datový typ •Typová konverze  vstup je v podobě řetězce  implicitní – 1 + "2"  "12"  3  explicitní – s pomocí předdefinovaných funkcí parseInt(ret,z) parseFloat(ret) eval(ret )

14 Syntaxe příkazů •Příkaz se ukončuje středníkem; •Blok příkazů: ve složených závorkách {}  blok = dva a více příkazů  na české klávesnici Win: AltGr+B, AltGr+N •Podmínka: uzavřená v kulatých závorkách  u funkcí a cyklů •Funkce: parametry v závorkách •Komentáře  jednořádkový: //  víceřádkový: /*...*/

15 Příkazy •Příkazy  jednoduché – přiřazení, volání podprogramu  strukturované – větvení a cykly •Přiřazení  proměnná = výraz  !rovnost: x == y •Speciální operátory a = a + b  a+=b, podobně -=, *=,/= a = a + 1  a++ a = a – 1  a--

16 Podprogramy •Pouze v podobě funkcí (za funkci se považuje i klasická procedura) •Funkce vestavěné i vlastní •Volání funkce: název(parametry) •Parametry nejsou povinné, závorky ano •Výsledkem podprogramu je vždy řetězec •Číselnou hodnotu získáme explicitní typovou konverzí funkcemi parseInt nebo parseFloat

17 Uživatelské funkce •Definice funkce (funkce fakt, formální parametr x) •Použití funkce (funkce fakt, skutečný parametr cis) function fakt(x) { if (x==0) return 1; else return x*fakt(x-1) } cis=prompt("Zadej číslo",""); document.write(cis+"! = "+fakt(cis));

18 Strukturované příkazy •Větvení if (podmínka) { … příkazy1 … } else { … příkazy2 … }

19 Strukturované příkazy •Cykly while (podmínka) { … příkazy … } for (inicializace;podmínka;modifikace) { … příkazy … }

20 Příklady if (A==B) { document.write("A se rovná B."); } while (A>0) { document.write(A," je stále kladné"); A--; } for (a=1;a<=6;a++) { document.write(a); }

21 Vložení příkazů JavaScriptu do stránky HTML •Skript v těle dokumentu (nebo v hlavičce) •Skript v externím souboru … příkazy jazyka JavaScript … <SCRIPT type="text/javascript" src="

22 Vložení příkazů JavaScriptu do stránky HTML •Inline zápis jako reakce na událost •HTML značka má jako jeden z parametrů název události •Příkaz je uveden jako hodnota tohoto parametru <img src="motyl.gif" onClick="this.src='motyl2.gif'">

23 Otevřený × uzavřený dokument Otevřený dokument •Není načtená celá HTML stránka, čeká se na odpověď uživatele (například metodou prompt ) •Po zpracování lze vkládat výsledek operace (například metodou document.write ), teprve poté se dokončí dokument

24 Otevřený × uzavřený dokument Uzavřený dokument •Je načten celý dokument včetně ukončovací značky •Do dokumentu se nezapisuje, používají se změny prvků (např. hodnota polí formuláře, změna obrázku) •Uplatňují se reakce na události (např. kliknutí myší, volba položky z nabídky, opuštění stránky apod.)

25 Otevřený dokument Vstup •Metodou prompt objektu window data=window.prompt(výzva,default) Výstup •Výpisem značek a textů metodou write document.write(" IE2 nás baví. ") •Metodou alert objektu window window.alert("Pozor, hoří!")

26 Uzavřený dokument Vstup •Ze zobrazených prvků (z formuláře) data=document.mujform.vstup.value Výstup •Změnou atributů zobrazených prvků document.mujform.vystup.value="50" document.images.obr.src="druhy.jpg" •Metodou alert objektu window window.alert("Pozor, hoří!")

27 Formulář •Syntax značky •Pro práci na straně klienta potřebujeme jen parametr name nebo id

28 Vstupní pole •Vstupní řádek formuláře •Vstupní řádek pro zadávání hesla

29 Tlačítka ve formuláři •Syntax značky •Typy tlačítek  odesílací – type="submit"  mazací – type="reset"  obecné – type="button", nemají přiřazenu žádnou funkci, je nutno obsluhu vyvolat reakcí na události  libovolný motiv: párovou značkou

30 Zaškrtávací pole a radiové tlačítko •Zaškrtávací pole – syntax •Implicitně nezaškrtnuto, nastavení implicitního zaškrtnutí – checked •Radiové tlačítko – syntax •Vždy právě jedno radiové tlačítko z každé skupiny musí být označeno

31 Nabídkový seznam •Syntaxe značky: •Pokud je uveden parametr multiple, může být vybráno více položek současně •Parametr size udává počet zobrazených položek, implicitně jedna •Položka nabídky

32 Textové pole •Syntax značky •Slouží pro vstup většího objemu textu

33 Objekty •Objekt je složená struktura, skládá se z atributů (vlastností, dat) a metod (procedur a funkcí pro manipulaci s daty) •Kategorie objektů  vestavěné – String, Math, Date,...  objekty prohlížeče – mohou k nim přistupovat příkazy skriptu  objekty zobrazeného dokumentu – všechny prvky HTML dokumentu •Přístup ke složkám – tečkovou notací objekt.složka

34 Vestavěné objekty (příklady) •Matem. konstanty a funkce – objekt Math  Math.PI   Math.cos(x) cos x  Math.min(x,y) minimum z parametrů  Math.pow(x,y) y-tá mocnina x •Řetězce – objekt String  String.length okamžitá délka řetězce  String.toUpperCase() velká písmena

35 Objektový model dokumentu •DOM – Document Object Model •Udává hierarchickou množinu objektů reprezentujících zobrazený dokument window location frames history document navigator event screen all anchors body forms frames images links forms name="data" method="post" input type="text" name="jm" value="obsah" window.document.forms[0].elements[0].value

36 Přístup k objektům a složkám •Úplný popis s využitím jmen prvků: window.document.data.jm.value •Okno je často jen jediné – lze vynechat document.data.jm.value •Univerzální funkce getElementById() document.getElementById('jm').value •Prvky musí mít name nebo id

37 Reakce na události (výběr) •Kliknutí myši na daném prvku onclick •Ponechání kurzoru na prvku onmouseover •Opuštění kurzoru z prvku onmouseout •Získání ohniska prvku onfocus •Odebrání ohniska prvku onblur •Odeslání formuláře onsubmit •Vymazání hodnot z formuláře onreset

38 Univerzální identifikátor this •Za this se v tomto případě považuje konkrétní značka, která obsahuje v parametru reakci na událost a k níž se reakce vztahuje <h2 align=center onmouseover="this.style.color='red'" onmouseout="this.style.color=''"> NADPIS

39 function Prazdne() { if (document.f.pole.value=='') alert('Nic jste nezadali'); } Javaskriptík 