dynamické dokumenty na straně klienta
Post on 06-Jan-2016
48 Views
Preview:
DESCRIPTION
TRANSCRIPT
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
top related