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, ASP,.NET, Java) na straně klienta (JavaScript)

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

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

Co mají společného JavaScript a Java

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...

DOM

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

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é

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

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

První skript DOM Live DOM Viewer live-dom-viewer/

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

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

První skript výsledek

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

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ší

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

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

Seznam událostí  

Příklad Obsluha události

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

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

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

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