JavaScript úvod. Jazyky webového vývojáře Dynamická stránka  aktivně mění svůj obsah v reakci na činnost uživatele  zpracování na straně serveru (PHP,

Prezentace na téma: "JavaScript úvod. Jazyky webového vývojáře Dynamická stránka  aktivně mění svůj obsah v reakci na činnost uživatele  zpracování na straně serveru (PHP,"— Transkript prezentace:

1 JavaScript úvod

2 Jazyky webového vývojáře

3 Dynamická stránka  aktivně mění svůj obsah v reakci na činnost uživatele  zpracování na straně serveru (PHP, ASP,.NET, Java) na straně klienta (JavaScript)

4 JavaScript  skriptovací jazyk interpretovaný programovací jazyk  objektově orientovaný  multiplatformní  case sensitive

5 JavaScript  umožňuje obsluhu událostí provádění výpočtů vkládání výsledků zpět do dokumentu  neumožňuje zápis do souborů a čtení dat ze souborů na straně klienta

6 Co mají společného JavaScript a Java

7 Manipulace s DOM  JavaScript umí manipulovat s HTML elementy pomocí DOM (Document Object Modelu)  Co můžeme provádět? Změnu HTML elementů Odstranění HTML elementů Vytvoření nových HTML elementů Kopírování a a klonování HTML elementů A mnoho dalšího...

8 DOM

9 Hierarchická struktura objektů Kontejnery objektů odpovídajících určitému typu elementu document all forms images a další 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 zde má svůj objekt. window

10 Objektový model  HTML elementy jsou OBJEKTY => mají vlastnosti – atributy mohou reagovat na události  Identifikujeme je pomocí značky atributu  id – jednoznačná identifikace  name – několik objektů může mít stejné

11 HTML -> DOM Sample page Sample page This is a simple sample. Sample page Sample page This is a simple sample.

12 První skript První skript v JavaScriptu První skript v JavaScriptu Datum a čas JS_prvni.htm

13 První skript DOM Live DOM Viewer http://software.hixie.ch/utilities/js/ live-dom-viewer/

14 První skript s komentářem … <button type="button" onclick="document. getElementById('demo'). innerHTML = Date()"> Datum a čas … HTML element reagující na událost Reakce na událost

15 První skript popis JS kódu document.getElementById('demo'). innerHTML = Date() HTML dokument v aktuálním okně JS metoda pro nalezení HTML elementu v DOM dle identifikátoru HTML element s identifikátorem demo Vlastnost příslušného HTML elementu, obsahující jeho vnitřní HTML kód JS funkce, vrací systémový datum a čas

16 První skript výsledek

17 Událost  Něco, co se stane s HTML elementem  JavaScript na ni může reagovat  Původcem je buď uživatel nebo prohlížeč  Příklady : Formulářové pole bylo změněno Na tlačítko bylo kliknuto myší Nahrávání HTML dokumentu (webové stránky) bylo ukončeno

18 Události spojené s myší onclick kliknutí myší na daném prvku ondblclick dvojité kliknutí myší na daném prvku onmousedown stisknutí tlačítka myši na prvku onmouseup uvolnění tlačítka myši na prvku onmouseover ponechání myši nad prvkem onmousemove najetí myši na prvek onmouseout opuštění prvku myší onfocus ponechání myši nad prvkem formuláře onblur opuštění prvku formuláře myší

19 Události spojené s klávesnicí onkeypress rychlý stisk klávesy na prvku onkeydown stisknutá klávesa na prvku onkeyup uvolnění klávesy

20 Události spojené s formulářem onsubmit odeslání formuláře onreset vymazání formuláře onselect výběr textu v textovém poli onchange změna hodnoty v prvku formuláře

21 Seznam událostí  http://www.tvorba-webu.cz/javascript/udalosti.php http://www.tvorba-webu.cz/javascript/udalosti.php  http://www.w3schools.com/jsref/dom_obj_event.asp http://www.w3schools.com/jsref/dom_obj_event.asp

22 Příklad Obsluha události

23 HTML atribut události  Může spouštět přímo JS kód volat JS funkci volat uživatelem vytvořenou funkci

24  mezi značky a v hlavičce nebo těle dokumentu:  z externího souboru: text skriptu Vložení skriptu do HTML dokumentu

25 Vstupy v JavaScriptu  použitím metody prompt objektu window  čtením hodnot z položek formuláře  čtením hodnoty vlastnosti innerHTML objektu

26 Výstupy v JavaScriptu  použitím metody alert objektu window  použitím metody write objektu dokument  přiřazením hodnoty do položek formuláře  přiřazením hodnoty vlastnosti innerHTML objektu dokument  přiřazením hodnoty vlastnosti innerText objektu dokument