NSWI096 - INTERNET JavaScript

Rozměr: px

Začít zobrazení ze stránky:

Download "NSWI096 - INTERNET JavaScript"

Eliška Vaňková
před 4 lety
Počet zobrazení:

1 NSWI096 - INTERNET JavaScript Mgr. Petr Lasák

2 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

3 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"/>

4 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">  </script>

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

6 REAKCE NA UDÁLOSTI ELEMENTŮ <input type="text" id=" " onchange="check ()"> 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

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

8 ZAJÍMAVÉ ODKAZY Tutorial javascriptu Greasemonkey scripty Firefox addon existují i porty do jiných browserů Validace javascriptu - neoficiální

9 DOM/SAX UNDER THE HOOD

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

11 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

12 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

13 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()

14 ROZHRANÍ DOM DOM = Document Object Model Standard W3C - Verze: DOM1, DOM2 a DOM3 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

15 KOUZLA S DOM Dotazy na jednotlivé elementy XPATH Pomocí jednoduchých dotazů procházení struktury Změna struktury dokumentu DOM Kromě stavby, dokáže dom i měnit strukturu Dodatečný dynamizace pomocí dotazů JQuery Lze posílat dodatečné dotazy, zabudované XPATH a DOM

16 CHCETE VĚDĚT VÍCE? Technologie XML NPRG036 (LS) Irena Mlýnková, Martin Nečasky DOM - Oficiální stránky W3C SAX Oficiální stránky tvůrce pro Javu

17 JAVASCRIPT JAK TO BYLO DOOPRAVDY

18 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 Prototypový jazyk!!!

19 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;

20 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() );

21 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ě

22 A JE TOHO MNOHEM VÍCE Douglas Crockford otec zakladatel O Reilly Javascript: The Good Parts

Podobné dokumenty

Formuláře. Internetové publikování. Formuláře - příklad

Formuláře. Internetové publikování. Formuláře - příklad Formuláře Internetové publikování Formuláře - příklad 1 Formuláře - použití Odeslání dat od uživatele Možnosti zpracování dat Webová aplikace na serveru (ASP, PHP) Odeslání e-mailem Lokální script Formuláře