Dynamické dokumenty na straně klienta

1. 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é dokumentyna straně klienta – princip URL HTML data WWWserver klient(prohlížeč) 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(“<h1>Nadpis</h1>“) • 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"1 + 2  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átorya = 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ů JavaScriptudo stránky HTML • Skript v těle dokumentu (nebo v hlavičce) • Skript v externím souboru <SCRIPT> … příkazy jazyka JavaScript … </SCRIPT> <SCRIPT type="text/javascript" src="http://www.abc.cz/skript.js"> </SCRIPT>

22. Vložení příkazů JavaScriptudo 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 </html> • 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 windowdata=window.prompt(výzva,default) Výstup • Výpisem značek a textů metodou writedocument.write("<h2>IE2 nás baví.</h2>") • Metodou alert objektu windowwindow.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 windowwindow.alert("Pozor, hoří!")

27. Formulář • Syntax značky<form action="URL_skriptu" method="get" nebo "post" name="identifikátor"> • Pro práci na straně klienta potřebujeme jen parametr nameneboid

28. Vstupní pole • Vstupní řádek formuláře<input type="text" size="velikost" maxlength="maximum_znaků" value="počáteční_hodnota"> • Vstupní řádek pro zadávání hesla<input type="password" ...>

29. Tlačítka ve formuláři • Syntax značky<input type="typ_tlačítka" value="popis_tlačítka"> • 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 <button>

30. Zaškrtávací pole a radiové tlačítko • Zaškrtávací pole – syntax<input type="checkbox"checked> • Implicitně nezaškrtnuto, nastavení implicitního zaškrtnutí – checked • Radiové tlačítko – syntax<input type="radio" name="identifikátor_skupiny"> • Vždy právě jedno radiové tlačítko z každé skupiny musí být označeno

31. Nabídkový seznam • Syntaxe značky:<select multiple size="velikost"> • Pokud je uveden parametr multiple, může být vybráno více položek současně • Parametr sizeudává počet zobrazených položek, implicitně jedna • Položka nabídky<option value="hodnota" checked>

32. Textové pole • Syntax značky<textarea cols="počet_sloupců" rows="počet_řádků"> • 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.PIp • 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 forms name="data" method="post" location frames history document navigator event screen all anchors body forms frames images links window 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 vynechatdocument.data.jm.value • Univerzální funkce getElementById()document.getElementById('jm').value • Prvky musí mítnameneboid

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ářeonreset <input type=button onclick="Vypocet()" value=Výpočet>

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 </h2>

39. Javaskriptík  <form name="f"> <input type="text" name="pole"> <input type="button" value="Zkontroluj" onclick="Prazdne()"> <input type="reset" value="Smazat"> </form> <script> functionPrazdne() { if (document.f.pole.value=='') alert('Nic jste nezadali'); } </script>