Návrh a tvorba WWW stránek 1/30 Javascript skripty provádí prohlížeč - klient dynamicky generovaný obsah stránek, efekty, interakce nejrozšířenější klientský skriptovací jazyk (VBScript a další) nesouvisí s jazykem Java dnes využíván spíše v technologii AJAX, pomocí které lze měnit obsah stránky bez nutnosti jejího obnovení Javascript - jazyk interpretováný nemusí se kompilovat objektový využívá standardní i uživatelsky definované objekty závislý na prohlížeči problematická podpora case-sensitive záleží na velikosti písmen syntaxí podobný jazyku C
Návrh a tvorba WWW stránek 2/30 Co je dobré znát předem HTML formuláře v HTML a jejich obsluhu možnosti prohlížečů a jejich verzí Omezení jazyka uživatel může javascript zakázat funguje pouze ve spojení s prohlížečem neumí pracovat se soubory bezpečnost, běží na klientu neumí ukládat data (pouze cookies) neumí kreslení, komunikace v síti svázaný s www stránkou, nelze vytvořit samostatnou aplikaci
Návrh a tvorba WWW stránek 3/30 Javascript v HTML v případě HTML interpretuje prohlížeč značky, v případě javascriptu již vykonává program možnosti, jak vložit javascript do HTML dokumentu: 1. vnitřní deklarace skript je přímo součástí HTML 2. vnější (externí) deklarace v samostatném souboru 3. řádková deklarace na místě atributů ve značkách HTML všechny uvedené způsoby lze libovolně kombinovat
Návrh a tvorba WWW stránek 4/30 Vnitřní deklarace javascriptu mezi značky <script> a </script> skript je přímo součástí HTML dokumentu v hlavičce i v těle dokumentu většinou v hlavičce deklarace funkcí, objektů a proměnných prohlížeč skript zpracovává okamžitě nepovinný atribut type="text/javascript" nepovinné atributy language, src <head> <script type="text/javascript" language="javascript"> function Pozdrav() { alert ('Ahoj'); } </script> </head> <body onload="pozdrav()"> </body>
Návrh a tvorba WWW stránek 5/30 Externí deklarace javascriptu nejčastější způsob použití deklarace v externím souboru <head> <script type="text/javascript" src="externi_skript.js"> </script> </head> obsah externího souboru se provede jakoby byl uvnitř <script> Řádková deklarace javascriptu "in-line" obsluha událostí spojení skriptu s obsluhou tlačítka <form name="formular" method="post" action=""> <input type="button" name="tlacitko" value="stiskni" onclick="alert('stisknul jsi mě!')" /> </form>
Návrh a tvorba WWW stránek 6/30 Základní syntaxe javascriptu oddělování příkazů středníkem někdy lze vynechat velikost písmen case-sensitive (proměná Proměnná) použití apostrofů a uvozovek mají stejný význam <img onmouseover="alert('ahoj')" /> escape sekvence zobrazení speciálních znaků <img onmouseover="alert(\"ahoj\")" /> komentáře stejně jako v C (C++), navíc <!--řádkový komentář --> logické hodnoty true, false objekty a metody oddělují se tečkou (objekt.podobjekt.vlastnost)
Návrh a tvorba WWW stránek 7/30 Proměnné v javascriptu netypové, nemusí se deklarovat, deklarace uvozena var var x="hodnota"; vypsání hodnoty proměnné document.write(x); automatické určení typu proměnné při prvním použití <script type= " text/javascript" > y = 13; y = y * 2 * 7 * 11; text = "Hezké číslo je " + y; document.write(text); </script> automatická konverze typu proměnných x = 1+1; // výsledkem je 2 x = 1+'1'; // výsledkem je 11
Návrh a tvorba WWW stránek 8/30 Operátory v javascriptu operátory přiřazení = přiřazení += přičtení *=, -=, /= přinásobení, odečtení, oddělení ++ přičtení 1 početní operátory (+ - * /) logické operátory == rovnost (dvě rovnítka)!= nerovnost === identita < <= >= > aritmetické porovnávání && logické AND (a zároveň), logické OR (nebo)! logické NOT (negace)
Návrh a tvorba WWW stránek 9/30 Větvení if-else if (podmínka) { příkazy prováděné při splnění podmínky; } else { příkazy prováděné při nesplnění podmínky; } PŘÍPADNĚ proměnná = podmínka? hodnota1 : hodnota2; switch-case switch (proměnná) { case hodnota1 : příkaz1;break; case hodnota2 : příkaz2;break;... default : příkazx; }
Návrh a tvorba WWW stránek 10/30 Cykly while cyklus s podmínkou na začátku while (podmínka) { sekvence příkazů } do-while cyklus s podmínkou na konci do {sekvence příkazů} while (podmínka) for cyklus s daným počtem opakování for (počáteční hodnota; podmínka; navýšení) { příkazy; }
Návrh a tvorba WWW stránek 11/30 Funkce deklarace funkce většinou v hlavičce dokumentu function jmenofunkce([parametry]) { příkazy; [return hodnota]; }; volání funkce v těle dokumentu jmenofunkce([hodnota, hodnota]); volání funkce na základě události v těle HTML dokumentu <img onmouseover="nazevfunkce([parametry])" /> volání funkce, která vrací hodnotu proměnná = jmenofunkce([parametry]); deklarace lokální proměnné za klíčovým slovem var
Návrh a tvorba WWW stránek 12/30 Volání parametrů odkazem a hodnotou (1/3) pokud je parametr funkce volán hodnotou, veškeré operace ve funkci jsou pouze lokální - nezmění jeho hodnotu mimo funkci volání odkazem použijeme v případě, že chceme aby funkce volaný parametr změnila a tyto změny se projevily i mimo funkci u jednoho parametru toto zajistíme klíčovým slovem return v javascriptu jsou obecně jednoduché datové typy (čísla, řetězce, logické proměnné) předávány hodnotou, strukturované datové typy (objekty, pole) jsou předávány odkazem
Návrh a tvorba WWW stránek 13/30 Příklad: Volání parametrů odkazem a hodnotou (2/3) function Vypis(Cislo,Retezec,Objekt) { var S='Cislo: '+Cislo+'\nŘetězec: '+Retezec+'\nObjekt.jazyk: '+Objekt.jazyk; document.write(s); } function Nastav(Cislo,Retezec,Objekt) { Cislo++;Retezec+='-Přidáno-';Objekt.jazyk='PHP'; } var Cislo=10; // deklarace var Retezec='TEXT'; var Objekt = new Object();Objekt.jazyk='čeština'; Vypis(Cislo,Retezec,Objekt); // kontrolní výpis Nastav(Cislo,Retezec,Objekt); // změna hodnot Vypis(Cislo,Retezec,Objekt); // výpis po změně
Návrh a tvorba WWW stránek 14/30 Výsledek: Volání parametrů odkazem a hodnotou (3/3) Číslo:10 Řetězec: TEXT Objekt.jazyk: čeština Číslo: 10 Řetězec: TEXT /*string je rovněž jednoduchý typ*/ Objekt.jazyk: PHP
Návrh a tvorba WWW stránek 15/30 Objektový model javascriptu objektovost javascriptu znamená, že všechny vlastnosti a metody jsou uspořádány podle nějakého systému je třeba se naučit, jak se které prvky zapisují tečková notace (objekt.podobjekt.metoda()) metoda sama o sobě je příkazem, který něco dělá vlastnost nic nedělá, ale má hodnotu, dá se číst nebo zapisovat podobjekt může mít další metody, podobjekty a vlastnosti Příklad: window.history.back(); window.location.href="http://www.upce.cz";
Návrh a tvorba WWW stránek 16/30 Hierarchie objektů window location - frames - history - navigator - event - screen document - form links - anchors - images - filters - forms - applets - embeds - plugins - frames - scripts - selection - stylesheets - body - all - style objekt window lze při zápisu vynechat nejdůležitější je objekt document obsahuje objekty a vlastnosti vztahující se k aktuálnímu dokumentu přetrvává problém s kompatibilitou prohlížečů
Návrh a tvorba WWW stránek 17/30 Metody a vlastnosti objektu window window.alert(); window.blur(); window.close(); window.confirm(); window.focus(); window.open(); window.print(); window.prompt(); window.resizeby(); window.resizeto(); window.scrollby(); // zobrazení hlášky v okně // posunutí vybraného okna do pozadí // zavření okna (v FF pouze pro window.open) // hláška ano-ne (vrací true/false) // posunutí vybraného okna do popředí // vytvoření nového okna // tisk dokumentu // hláška pro zadání údajů // změna velikosti okna o danou hodnotu // změna velikosti na danou hodnotu // scrollování dokumentu
Návrh a tvorba WWW stránek 18/30 Metody objektu location location.href(url); location.reload(boolean); location.replace(); // načte URL do dokumentu // znovunačtení dokumentu // nahradí dokument jiným Vlastnosti objektu location protocol pathname hostname // vrátí protokol (http, file) // cesta k dané stránce //jméno hostitelského serveru (IP) Týká se adresy aktuálního dokumentu
Návrh a tvorba WWW stránek 19/30 Metody objektu history history.back(); history.back(3}; history.forward(2); history.go(-1); // o krok zpět // o 3 kroky zpět // vpřed o 2 kroky // o krok zpět Vlastnosti objektu history length // o kolik kroků se lze vrátit zpět Týká se historie prohlížených stránek
Návrh a tvorba WWW stránek 20/30 Metody objektu screen nejsou nelze ovlivňovat nastavení monitoru Vlastnosti objektu screen height width availheight availwidth colordepth // výška (rozlišení) // šířka (rozlišení) // dostupná výška okna // dostupná šířka okna // barevná hloubka Týká se vlastností obrazovky
Návrh a tvorba WWW stránek 21/30 Vlastnosti objektu navigator appname // název prohlížeče (např. "Netscape") appversion // verze prohlížeče (IE vraci "4.0") online // vrací true/false podle stavu připojení platform // operační systém klienta appcodename // kódové jméno prohlížeče, vždy Mozilla javaenabled // podpora javy v prohlížeči Týká se typu a verze prohlížeče
Návrh a tvorba WWW stránek 22/30 Metody objektu event AltKey CtrlKey ShiftKey button clientx clienty keycode ScreenX ScreenY // vrací true, pokud byl stisknut [Alt] // vrací true, pokud bylo stisknuto [Ctrl] // vrací true, pokud byl stisknut shift // vrací číslo stisknutého tlačítka(0 - žádné, 1 - levé, 2 - pravé, 4 - prostřední // souřadnice x kurzoru v okně prohlížeče // souřednice y kurzoru v okně prohlížeče // vrací ascii kod stisknuté klávesy // souřadnice x kurzoru vzhledem k obrazovce // souřadnice y kurzoru vzhledem k obrazovce Týká se práce s tlačítky (myš) a klávesami
Návrh a tvorba WWW stránek 23/30 Objekt document přístup k obrázkům, formulářům, odkazům, barvám atd. lze nastavovat všechny prvky v dokumentu (záměna obrázků, hodnoty ve formuláři, barvy dokumentu atd.) podobjekty images, forms, applets, all, style, metody write vlastnosti Týká se práce s prvky v dokumentu
Návrh a tvorba WWW stránek 24/30 Vlastnosti objektu document location // aktuální URL referrer // URL předchozí stránky alinkcolor, vlinkcolor, linkcolor // aktivní, visited, ostatní title // titulek stránky fgcolor // implicitní barva textu bgcolor // barva pozadí lastmodified // poslední změna dokumentu all[cislo] // pole všech objektů v dokumentu forms[], images[], anchors[], links[], stylesheets[]
Návrh a tvorba WWW stránek 25/30 Použití objektů dokumentu změna obrázku <img border="0" src="stoude.jpg" name="jmeno" onmouseover="document.images['jmeno'].src='druhy.jpg'" onmouseout="document.images['jmeno'].src='prvni.jpg'" /> zkráceně onmouseover="document.jmeno.src='druhy.jpg'" změna hodnoty prvku formuláře <form name="formular"> <input type="text" name="policko" size="20" value="" /> <input type="button" value="zelena" onclick="formular.policko.value='zelena'" /> <input type="button" value="cervena" onclick="formular.policko.value='cervena'" /> </form> alternativní styly a přepínání mezi nimi aktuální velikost okna skript musí být uvnitř <body>
Návrh a tvorba WWW stránek 26/30 Další objekty String práce s řetězci http://www.tvorba-webu.cz/javascript/string.php Math matematické výrazy http://www.tvorba-webu.cz/javascript/math.php Array práce s polem http://www.tvorba-webu.cz/javascript/array.php Datum a čas http://www.tvorba-webu.cz/javascript/datum.php
Návrh a tvorba WWW stránek 27/30 Události javascriptu události okna a dokumentu onload při úplném načtení stránky (framu) onunload při opuštění stránky onresize při změně velikosti okna onscroll při scrollování Události javascriptu události myši onclick, ondblclick, onmouseover, onmouseout, onmousemove, onmousedown, onmouseup názvy nejsou case-sensitive odchycení stisku tlačítka myši: <img src="" alt="" onmousedown="alert('neklikej!')" />
Návrh a tvorba WWW stránek 28/30 Události javascriptu události klávesnice onkeypress při stisknutí klávesy onkeydown onkeyup Události javascriptu události formuláře onsubmit, onreset před odesláním formuláře (po stisku Reset) <form onreset="return confirm('chcete opravdu vymazat hodnoty formuláře?')"> </form> onfocus, onblur při aktivaci (deaktivaci) políčka <textarea name="" rows="5" cols="60" onfocus="this.style.background='blue'"></textarea> onchange při změně hodnoty vstupního pole onselect při výběru textu myší (v celém body)
Návrh a tvorba WWW stránek 29/30 Otevření nového okna window.open("url", "volba_ramu", "atribut1,atribut2") atributy toolbar, location, status, menubar, scrollbars, resizeable width, height, left, top (pixely) fullscreen (CELÁ OBRAZOVKA) <a href="" onclick="window.open('index.htm');return false"> return false aby se nová stránka nenačetla do původního okna
Návrh a tvorba WWW stránek 30/30 Bookmarklet krátký javascript svázaný s odkazem (max ± 2000 znaků) <a href="javascript:kód skriptu">