D ynamické 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é HTML JavaScript - 1. část

Reprezentuje otevřené okno v prohlížeči Window HTML dokument v daném okně Document Kontejner všech objektů uvnitř daného dokumentu. Každý HTML element má zde svůj objekt. all Kontejnery objektů odpovídajících určitému typu elementu . forms images a další Objektový model dokumentu HTML elementy jsouOBJEKTY. • 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ů:

forms[0] name= "formular1" method= "post" ... all anchors body forms frames images links scripts selection styleSheets location frames history navigator event screen document input type = "text" name = "polozka1" value = "implicitní obsah" ... Objektový model dokumentu window Pozn: Kontejnery Kolekce- s (např.forms) • Příklad: Odkaz na vlastnost value prvku formuláře: • document.forms[0].polozka1.value • document.all.polozka1.value • document.formular1.polozka1.value

Události, na které může objekt reagovat onclick při kliknutí myší na daném prvku ondblclick při dvojitém kliknutí myší na daném prvku onmousedown při stisknutém tlačítku myši na prvku onmouseup při uvolnění tlačítka myši na prvku onmouseover při ponechání myši nad prvkem onmousemove při najetí myši na prvek onmouseout 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) Události spojené s myší vznik události Události spojené s klávesnicí vznik události onkeypress při rychlém stisku klávesy na prvku onkeydown při stisknuté klávese na prvku onkeyup při uvolnění klávesy

Další události a obsluha události onsubmit při odeslání formuláře onreset při vymazání formuláře onselect při výběru textu v textovém poli onchange při změně hodnoty v prvku formuláře • Události spojené s formulářem vznik události • Další události vznik události onload při dokončení zavedení stránky se všemi jejími elementy onunload po odstranění obsahu dokumentu z okna nebo rámcem Tyto události lze použít jen v prvcích BODY a FRAMESET. • 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>

Pokračování příkladu <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>

JavaScript1. částzákladní pojmy a principy

ZADÁNÍ Vytvoření programu přesně stanovený postup, podle kterého jde vyřešit dané zadání ALGORITMUS algoritmus zapsaný v určitém programovacím jazyku ZDROJOVÝ TEXT PROGRAMU Překlad : Převod zdrojového textu do strojového kódu Odhalení syntaktických chyb Dva 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) Vývoj programovacích jazyků: PočítačČlověk Assembler Fortran Algol, Pascal, Basic C, C++, Java, Visual Basic JavaScript, VBScript Vývojová prostředí (Delphi, Visual Studio) PŘEKLAD /INTERPRETACE LADĚNÍ PROGRAM spustitelný strojový kód, do kterého byl převeden zdrojový text logické chyby – program nepracuje dle předpokladů Logické chyby Syntaktické chyby

Vývojový diagram– příklad TECHNOLOGICKÉ SCHÉMA ŘEŠENÍ PROBLÉMŮ Funguje ten krám? ANO NE Šťoural jste se v něm? Nešťourejte se v něm ANO NE Jste nemehlo Schytáte to? NE Viděl vás někdo? NE ANO Nechte to plavat Ututlejte to ANO Povedlo se? Máte to na koho svést? NE NE Jste blb ANO ANO Není co řešit

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) Programy a skripty – základní pojmy

Algoritmus, program– faktoriál START x! = 1  2  …  (x – 1)  x 5! = 1  2  3  4  5 = 120 VÝVOJOVÝ DIAGRAM a = 1 f = 1 Zdrojový text programu: a  5 NE a = 1; f = 1; while (a <= 5) { f = f * a; a = a + 1; } ANO STOP Program f = f · a a = a + 1 Po vykonání programu, bude proměnnáfobsahovat hodnotu 120.

C C++ Java JavaScript 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, VBScript • JavaScript • objektově orientovaný programovací jazyk • interpretovaný jazyk • Syntaktická 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

Zdrojový text skriptu je vložen do HTML dokumentu mezi značky <SCRIPT> a</SCRIPT> v hlavičce nebo těle dokumentu: Vložení skriptu do HTML dokumentu: <SCRIPT language="JavaScript"> text skriptu v jazyku JavaScript </SCRIPT> Skript lze otevřít z externího souboru: <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:

Jazyk JavaScript

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 Co může obsahovat zdrojový text skriptu: • 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

Deklarace proměnné • umožňuje nadefinovat používané proměnné • a vložit do nich počáteční hodnoty • jenepovinná • 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: • varsuma=0, ab1=10;

Co může dále obsahovat text skriptu: 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”; • KONSTANTA • hodnota konstanty se během provádění skriptu nemění • Tvar konstant: • literál25 true false • řetězec“ TEXT ”

Co může dále obsahovat text skriptu: • 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 false • KOMENTÁŘ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 */

D ynamické HTML JavaScript - 1. část