NSWI096 - INTERNET JavaScript 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() this Ekvivalent obnovit v prohlížeči 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: www.kosek.cz Atributy jsou součástí parametrů startelement()
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