Dynamické dokumenty na straně klienta

Informatika pro ekonomy II

2

Statický × dynamický Statický × dynamický dokumentdokument• 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

klient(prohlížeč)

WWWserver

URL

HTML

data

HTML

HTML dokume

nt

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ý dokumentOtevř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ý dokumentUzavř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 window data=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 name nebo id

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 size udá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.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

locationframeshistorydocumentnavigatoreventscreen

allanchorsbodyformsframesimageslinks

formsname="data"method="post"

inputtype="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í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<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

<form name="f"> <input type="text" name="pole"> <input type="button" value="Zkontroluj"

onclick="Prazdne()"> <input type="reset" value="Smazat"> </form> <script> function Prazdne() { if (document.f.pole.value=='') alert('Nic jste nezadali'); }</script>

Javaskriptík