nswi096 - internetlasak/js2011.pdf · javascript –jak se dnes pouŽÍvÁ skriptovací...
TRANSCRIPT
NSWI096 - INTERNETJavaScript
Mgr. Petr Lasák
JAVASCRIPT – JAK SE DNES POUŽÍVÁ
Skriptovací (interpretovaný) jazyk
Umožňuje interaktivitu
Použití:
Dialogy
Kontrola dat ve formulářích
Změny v (X)HTML dokumentu
Časované události
…
Nestihneme probrat vše
http://www.w3schools.com/js/
UMÍSTĚNÍ SKRIPTU V HLAVIČCE XHTML
Definování funkcí mezi tagy <script>
<script type="text/javascript">
function show_alert()
{
alert("Toto je výstraha...");
}
</script>
Ty lze volat na události v kódu
<input type="button" onclick="show_alert()" value="Výstraha"/>
UMÍSTĚNÍ SKRIPTU V TĚLE XHTML
Definování mezi tagy <script>
Mohu definovat funkce a nebo přímo psát tělo
<script type="text/javascript">
document.write("<h1>Hello World!</h1>");
</script>
Ale toto není validní XHTML
Nelze mít <h1> tag mezi <script> tagy
Řešení je dát to do komentářů
<script type="text/javascript">
<!-- document.write("<h1>Hello World!</h1>"); -->
</script>
UMÍSTĚNÍ SKRIPTU V EXTERNÍM SOUBORU
V hlavičce dokumentu
<script type="text/javascript" src="script.js"/>
Stejné efekty jako linkovaný CSS soubor
Pokud mám vypnuté JS – tag <noscript>
<noscript>
<h1>Tak nic, když nemáte JavaScript</h1>
</noscript>
REAKCE NA UDÁLOSTI ELEMENTŮ
<input type="text" id="email" onchange="checkEmail()">
Při změně položky formuláře
<form method="post" action="xxx.htm" onsubmit="return
checkForm()">
Při odeslání. Pokud vrátíte false, formulář se neodešle
onmouseover
onmouseout
<body onload="…">
Při nahrání dokumentu
ZAJÍMAVÉ FUNKCE A OBRATY
document.getElementById('id')
Vrátí element podle id
timeout = setTimeout('funkce', time)
Spustí funkci funkce za time milisekund
Třeba na zobrazení hodin
history.back()
Ekvivalent „zpět“ v prohlížeči
location.reload()
Ekvivalent „obnovit“ v prohlížeči
this
Odkaz na aktuální objekt (ten na kterém je skript spuštěn při události)
ZAJÍMAVÉ ODKAZY
Tutorial javascriptu
http://www.w3schools.com/js/
Greasemonkey scripty
https://addons.mozilla.org/cs/firefox/addon/greasemonkey/
Firefox addon – existují i porty do jiných browserů
Validace javascriptu - neoficiální
http://www.jslint.com/
DOM/SAX – UNDER THE HOOD
SOUVISLOSTI SE STAVBOU XHTML - DOM
Stromová struktura – existují vazby
<zprava>
<adresa>
<jmeno>Jan Amos</jmeno>
<ulice>Severni 12</ulice>
</adresa>
<text>Pozdrav z <it>rise divu</it>!</text>
<priloha cesta="obr1.png"/>
</zprava>
ZAJÍMAVÉ VLASTNOSTI UZLU
Každá položka stromu je uzel
Element Information Item
Nejvyšší element je Document
[children]
(Případně prázdný) uspořádaný seznam dětských položek
[attributes]
(Případně prázdná) neuspořádaná množina atributů
[parent]
Document/Element Information Item v jehož vlastnosti [children]
je obsažen
Další položky viz http://www.w3.org/TR/xml-infoset/
MANIPULACE S TÍMTO STROMEM
Pro zpracování se používá rozhraní DOM / SAX
Každý browser musí zpracovávat příchozí text
Pracují podle jednoho z těchto dvou přístupů
Obsahují příslušný parser
Parser = SW, který umí přes vhodné rozhraní poskytovat infoset
dokumentu aplikaci
ROZHRANÍ SAX
SAX = Simple API for XML
Načtení části dokumentu = událost
Můžeme definovat obsluhu
Hlavní události:
Atributy jsou součástí parametrů startElement()
ww
w.k
ose
k.c
z
ROZHRANÍ DOM
DOM = Document Object Model
Standard W3C - Verze: DOM1, DOM2 a DOM3
http://www.w3.org/DOM/DOMTR
Celý dokument je načten do paměti
Stromová reprezentace
Jednotlivé uzly stromu jsou reprezentovány objekty
Metody objektů jsou dány specifikací DOM
Potomci objektů jsou dány XML Infosetem
KOUZLA S DOM
Dotazy na jednotlivé elementy – XPATH
Pomocí jednoduchých dotazů procházení struktury
http://www.w3schools.com/xpath/
Změna struktury dokumentu – DOM
Kromě stavby, dokáže dom i měnit strukturu
http://www.w3schools.com/jsref/default.asp
Dodatečný dynamizace pomocí dotazů – JQuery
Lze posílat dodatečné dotazy, zabudované XPATH a DOM
http://www.w3schools.com/jquery/default.asp
CHCETE VĚDĚT VÍCE?
Technologie XML – NPRG036 (LS)
Irena Mlýnková, Martin Nečasky
DOM - Oficiální stránky W3C
http://www.w3.org/DOM/
SAX – Oficiální stránky tvůrce pro Javu
http://www.megginson.com/downloads/SAX/
http://www.saxproject.org/
JAVASCRIPT – JAK TO BYLO DOOPRAVDY
ZNAKY JAZYKA
C++ like syntaxe
A z ní vyplývající konstrukce jako if, switch, operatory …
Komentáře /* …. */
Beztypový jazyk – definice přes VAR
ALE TO NEZNAMENÁ ŽE SE NEPRACUJE S DAT. TYPY!!!
Number, Text, Real, Boolean, Object
Provede se jednoduchá konverze
„5“ + 2
Prototypový jazyk!!!
OBJEKTOVÝ PŘÍSTUP
Definicí funkce se vytvoří její prototyp (definice)
Každý prototyp je objekt a tak se s ní pracuje
Každá proměnná uvnitř je private property
Dají se uvnitř funkce definovat funkce -> metody
Kód na úrovni funkce je vlastně konstruktor
function MyClass()
{
var _myproperty; /* private property */
_myproperty = null;
}
VYTVÁŘENÍ METOD – ÚPRAVOU PROTOTYPŮ
Prototypové jazyky umí anonymní funkce
Metodou upravujeme prototyp funkce
Pomocí přístupu na identifikator.prototype
function MyClass() {
var _myproperty = „Ahoj“;
MyClass.prototype.toString = function()
{ return this. _myproperty;}
}
Lze i pomocí funkce method( name, function() );
JINÉ ZAJIMAVOSTI
Dají se definovat jmenné prostory – namespaces
Existuje jeden globalní namespace
Definice stejná jako v C# včetně volání
Dědičnost – klasická
Definování přes metody .inherits(className);
Lze i multiple inheritance, jelikož máme prototypy
Dědičnost – parazitická
Privátní dědění od třídy v sobě
A JE TOHO MNOHEM VÍCE
Douglas Crockford – otec zakladatel
www.crockford.com
O’Reilly – Javascript: The Good Parts