21
Dynamické HTML JavaScript - 1. část Ústav automatizace inženýrských úloh a informatiky FAST VUT v Brně 0U2 - Základy informatiky a výpočetní techniky 2
Dynamické HTMLJavaScript - 1. část
Ústav automatizace inženýrských úloh a informatikyFAST VUT v Brně
0U2 - Základy informatiky a výpočetní techniky 2
Objektový model dokumentuHTML elementy jsou OBJEKTY. Každý objekt : má vlastnosti – atributy
může reagovat na události Identifikace objektu:
atributy id – jednoznačná identifikace name – několik objektů může mít stejné name
Hierarchická struktura objektů:
Window
Document
all
forms
images
a další
Reprezentuje otevřené okno v prohlížeči
HTML dokument v daném okně
Kontejner všech objektů uvnitř daného dokumentu. Každý HTML element má zde svůj objekt.
Kontejnery objektů odpovídajících určitému typu elementu .
Objektový model dokumentu
Příklad: Odkaz na vlastnost value prvku formuláře:1. document.forms[0].polozka1.value2. document.all.polozka1.value3. document.formular1.polozka1.value
window
locationframeshistorynavigatoreventscreendocument
allanchorsbodyformsframesimageslinks scripts selection styleSheets
forms[0]name= "formular1"method= "post"...
inputtype = "text"name = "polozka1"value = "implicitní obsah"...Pozn: Kontejnery
Kolekce - s (např.forms)
Události, na které může objekt reagovat
Události spojené s myší vznik události
onclick při kliknutí myší na daném prvkuondblclick při dvojitém kliknutí myší na daném prvkuonmousedown při stisknutém tlačítku myši na prvkuonmouseup při uvolnění tlačítka myši na prvkuonmouseover při ponechání myši nad prvkemonmousemove při najetí myši na prvekonmouseout při opuštění prvku myšíonfocus při ponechání myši nad prvkem (u položek formuláře)onblur při opuštění prvku myší (u položek formuláře)
onkeypress při rychlém stisku klávesy na prvkuonkeydown při stisknuté klávese na prvkuonkeyup při uvolnění klávesy
Události spojené s klávesnicí vznik události
Další události a obsluha události Události spojené s formulářem vznik událostionsubmit při odeslání formulářeonreset při vymazání formulářeonselect při výběru textu v textovém polionchange při změně hodnoty v prvku formuláře
onload při dokončení zavedení stránky se všemi jejími elementyonunload po odstranění obsahu dokumentu z okna nebo rámcem Tyto události lze použít jen v prvcích BODY a FRAMESET.
Další události vznik události
OBSLUHA UDÁLOSTI<PRVEK Událost = “skript”>Př:<INPUT type=“button” value=“Výpočet” onclick=“Vypoc()”>
Volání funkce, ve které je zapsán program (skript) jenž se má provést.
Příklad - obsluha události<HTML><HEAD><TITLE>Pokusná stránka</TITLE></HEAD>
<BODY onload="alert('Detekována šikmo položená podložka pod myš!')"><H1 align="center">Vítejte!</H1>
<HR><FORM> <INPUT type="button" value="Zhasni" onclick="document.bgColor='black'"> <INPUT type="button" value="Rozsviť" onclick="document.bgColor='lightyellow'"></FORM>
<HR>
Pokračování příkladu<H2 >Vyberte si vlajku!</H2>
<FORM name="vlajky"> <INPUT type="text" name="zeme" size="20"></FORM><IMG src="images/flag_cz.gif" border="1" width="49" height="28" onmouseover="document.vlajky.zeme.value='Česká republika'" onmouseout="document.vlajky.zeme.value=''"><IMG src="images/flag_de.gif" border="1" width="49" height="28" onmouseover="document.vlajky.zeme.value='Německo'" onmouseout="document.vlajky.zeme.value=''"><IMG src="images/flag_gb.gif" border="1" width="49" height="28" onmouseover="document.vlajky.zeme.value='Velká Británie'" onmouseout="document.vlajky.zeme.value=''">
<HR>
<FORM> <INPUT type="button" value="Česká republika" onclick="document.all.vlajka.src='images/flag_cz.gif'"> <INPUT type="button" value="Německo" onclick="document.all.vlajka.src='images/flag_de.gif'"> <INPUT type="button" value="Velká Británie" onclick="document.all.vlajka.src='images/flag_gb.gif'"></FORM><IMG src="images/flag_cz.gif" id="vlajka" border="1" width="49" height="28">
<HR>
Pokračování příkladu
<FORM> <INPUT type="button" value="Zmenšit" onclick="document.all.pernstejn.width='137';
document.all.pernstejn.height='100'"> <INPUT type="button" value="Původní velikost" onclick="document.all.pernstejn.width='275';
document.all.pernstejn.height='201'"> <INPUT type="button" value="Zvětšit" onclick="document.all.pernstejn.width='550';
document.all.pernstejn.height='402'"></FORM><IMG src="images/pernstejn1.jpg" id="pernstejn" width="275" height="201">
</BODY></HTML>
Pokračování příkladu
JavaScript 1. část
základní pojmy a principy
Vytvoření programu
přesně stanovený postup, podle kterého jde vyřešit dané zadání
ZADÁNÍ
PŘEKLAD / INTERPRETAC
E
ALGORITMUS
ZDROJOVÝ TEXT
PROGRAMU
PROGRAM
LAD
ĚNÍ
Syntaktické chyby
Logické chyby
algoritmus zapsaný v určitém programovacím jazyku
Vývoj programovacích jazyků: Počítač Člověk Assembler
FortranAlgol, Pascal, Basic
C, C++, Java, Visual Basic JavaScript, VBScript Vývojová prostředí
(Delphi, Visual Studio)
Překlad :Převod zdrojového textu do strojového kóduOdhalení syntaktických chybDva tradiční principy:Kompilace: celý zdrojový text programu se nejprve přeloží do strojového kódu. Teprve přeložený program lze spustit. (Pascal, Java)Interpretace: postupná analýza příkazů zdrojového textu programu až při běhu programu (JavaScript)
spustitelný strojový kód, do kterého byl převeden zdrojový text
logické chyby – program nepracuje dle předpokladů
Funguje ten krám?
Nešťourejte se v něm Šťoural jste se v něm?
Jste nemehlo
Nechte to plavatUtutlejte to
Jste blb
Povedlo se? Máte to na koho svést?
Není co řešit
ANO
TECHNOLOGICKÉ SCHÉMA
ŘEŠENÍ PROBLÉMŮNE
ANO
NE
NE
ANO
ANO
NENE
ANO
ANO
NESchytáte to?
Viděl vás někdo?
Vývojový diagram – příklad
Programy a skripty – základní pojmy Program• Posloupnost příkazů, které mohou být vykonávány počítačem. • Příkazy jsou prováděny sekvenčně tak, jak jsou umístěné v těle programu.• Sekvenčnost může být potlačena použitím speciálních příkazů (cyklus, větvení).• Příkazy = instrukce (posloupnosti 1 a 0)
Zdrojový text programu• Text vytvořený textovým editorem případně vyspělejšími nástroji (obyčejný textový soubor).• Je tvořen posloupností příkazů patřících do syntaxe některého programovacího jazyka.
Skript• Program, jehož zdrojový text je součástí WWW stránky.• Skriptovací jazyky: JavaScript, JScript
VBScript (Visual Basic Script)
a 5
ANO
NE
Zdrojový text programu:
a = 1
f = 1
f = f · a
a = a + 1
START
STOP
x! = 1 2 … (x – 1) x
5! = 1 2 3 4 5 = 120
Po vykonání programu, bude proměnná f obsahovat hodnotu 120.
VÝVO
JOVÝ
DIA
GRA
MAlgoritmus, program – faktoriál
a = 1; f = 1; while (a <= 5) { f = f * a; a = a + 1; }
Prog
ram
Využití skriptů pro vytvoření dynamické stránky
Dynamická stránka • aktivně mění svůj obsah v reakci na činnost uživatele• zpracování na straně serveru ASP, PHP, CGI
na straně klienta – JavaScript, VBScriptJavaScript• objektově orientovaný programovací jazyk• interpretovaný jazykSyntaktická geneze JavaScriptu:
JavaScript umožňuje:• obsluhu událostí, provádění výpočtů, vkládání výsledků zpět do dokumentu JavaScript neumožňuje:• zápis do souborů a čtení dat ze souborů na straně klienta, nemá příkazy pro grafiku
C C++ Java JavaScript
Vložení skriptu do HTML dokumentu:Zdrojový text skriptu je vložen do HTML dokumentu mezi značky <SCRIPT> a </SCRIPT> v hlavičce nebo těle dokumentu:
Skript lze otevřít z externího souboru:
<SCRIPT language="JavaScript"> text skriptu v jazyku JavaScript</SCRIPT>
<SCRIPT language="JavaScript" src="Soubor.js"> </SCRIPT>Pokud prohlížeč neumí pracovat se skripty, je vhodné uzavřít kód skriptu do komentářových závorek HTML:<!-- text skriptu v JavaScriptu… -->
Jazyk JavaScript
Co může obsahovat zdrojový text skriptu:
PROMĚNNÁ• pojmenovaný úsek paměti, pro uložení hodnoty, se kterou skript pracuje• velikost přidělené paměti závisí na typu uložené hodnoty (určí se při prvním vložení hodnoty do proměnné)• hodnota proměnné se může během provádění skriptu měnit• vložení hodnoty do proměnné – přiřazovacím příkazem• jméno proměnné - tzv. identifikátor
Identifikátor:• Posloupnost písmen a číslic začínající písmenem• k pojmenování proměnných, konstant, objektů a funkcí• rozlišují se malá a VELKÁ písmena !! (case –sensitive)Příklady: max, a1, Souc, souc, SOUC
• umožňuje nadefinovat používané proměnné a vložit do nich počáteční hodnoty• je nepovinná• zpravidla se uvádí na začátku skriptu
Příklad: var suma; var ab1;totéž lze zapsat zkráceně takto: var suma, ab1;
• v deklaraci lze proměnné přiřadit hodnotu: var suma=0, ab1=10;
Deklarace proměnné
JavaScript je netypový jazyk (na rozdíl od Javy, C, Pascalu,...)Z toho důvodu lze do stejné proměnné přiřadit číslo a později ve skriptu třeba text: var ab1; ab1 = 10; … ab1 = ”ahoj”;
Co může dále obsahovat text skriptu:
KONSTANTA• hodnota konstanty se během provádění skriptu nemění• Tvar konstant:
literál 25 true false řetězec “ TEXT ”
Typy hodnot v JavaScriptu• číslo - celá a desetinná čísla v desítkové 102 21.51234 5.3e02 -4.448E-4
nebo šestnáctkové soustavě 0x1FB 0xFF 0x10• řetězec - znakový řetězec (text)
“Toto je řetězec” ‘Toto je také řetězec’• logické hodnoty
typ boolean (pravda nebo nepravda) true falseKOMENTÁŘE• texty, které prohlížeč ignoruje, programátorovi slouží jako vysvětlivky• texty mezi // a koncem řádku nebo text mezi znaky /* … */ Příklad: / / jednořádkový text, který prohlížeč ignoruje /* víceřádkový vysvětlivkový text, který prohlížeč ignoruje */
Co může dále obsahovat text skriptu:
