Download - Základy programování v JavaScriptu
Základy programování v Základy programování v JavaScriptuJavaScriptu
programujeme dynamické HTMLprogramujeme dynamické HTML
a internetové aplikacea internetové aplikace
RNDr. Pavel Vlach, Ph.D.RNDr. Pavel Vlach, Ph.D.
Obsah vzdělávacího kurzuObsah vzdělávacího kurzu• co to je JavaScript, vývoj scriptovacích jazykůco to je JavaScript, vývoj scriptovacích jazyků
• jádro Javascriptujádro Javascriptu– syntaxesyntaxe– datové typy, proměnné, operátorydatové typy, proměnné, operátory– řídící struktury, větvení programu, cyklyřídící struktury, větvení programu, cykly– pole, funkcepole, funkce– základy objektově orientovaného programovánízáklady objektově orientovaného programování
• JavaScript v prohlížečiJavaScript v prohlížeči– integrace v HTMLintegrace v HTML– objekty Window, Screen, Navigator, Location, Historyobjekty Window, Screen, Navigator, Location, History– objekt Document – obrázky, odkazy, záložkyobjekt Document – obrázky, odkazy, záložky– formuláře a jejich prvkyformuláře a jejich prvky
• DOMDOM
• Ovládání CSS pomocí scriptůOvládání CSS pomocí scriptů
• Ovladače událostíOvladače událostí
• Praktické příkladyPraktické příklady
JavaScriptJavaScript
• univerzální (nezávislý na platformě) scriptovací univerzální (nezávislý na platformě) scriptovací objektově-orientovaný jazykobjektově-orientovaný jazyk
• představila společnost Netscape (B. Eich)představila společnost Netscape (B. Eich)• obvyklé použití – klientský scriptovací jazyk (použití obvyklé použití – klientský scriptovací jazyk (použití
přímo v prohlížeči)přímo v prohlížeči)• vkládaný do HTML – ovládá grafické a interaktivní vkládaný do HTML – ovládá grafické a interaktivní
prvky stránky (obrázky, formuláře, odkazy, záložky) prvky stránky (obrázky, formuláře, odkazy, záložky) nebo vzhled stráneknebo vzhled stránek
• syntakticky podobný C++, Javasyntakticky podobný C++, Java• nemá vlastní grafické nástroje (využívá HTML a CSS)nemá vlastní grafické nástroje (využívá HTML a CSS)
Co JavaScript neumí?Co JavaScript neumí?
• žádné grafické schopnosti (ale může využít žádné grafické schopnosti (ale může využít grafických schopností HTML a CSS)grafických schopností HTML a CSS)
• neumožňuje práci se soubory - velké neumožňuje práci se soubory - velké omezení pro programovací jazyk, logické z omezení pro programovací jazyk, logické z bezpečnostních důvodůbezpečnostních důvodů
• nepodporuje práce se sítí – jen odeslání nepodporuje práce se sítí – jen odeslání formulářů na server, přechod na adresu URLformulářů na server, přechod na adresu URL
HistorieHistorie
• 1995 – představen jako doplněk k HTML1995 – představen jako doplněk k HTML• Java v názvu – žádná příbuznost k JAVA, jen Java v názvu – žádná příbuznost k JAVA, jen
obchodní tahobchodní tah• 1997 – standardizace ECMA (Europen 1997 – standardizace ECMA (Europen
Computer Manufacturers Association) – Computer Manufacturers Association) – základní standard, ze kterého vychází i např. základní standard, ze kterého vychází i např. ActionScriptActionScript
• 1998 – ISO standardizace1998 – ISO standardizace
× pozor na různé verze !!× pozor na různé verze !!
podpora prohlížečůpodpora prohlížečů
• odhadem 5% uživatelů nemají funkční odhadem 5% uživatelů nemají funkční JavaScritpové kódy – prohlížeč bez podpory JavaScritpové kódy – prohlížeč bez podpory (např. Lynx, prohlížeče v PDA, mobilech) (např. Lynx, prohlížeče v PDA, mobilech) nebo scripty zakázanénebo scripty zakázané
• moderní prohlížeče všechny podporují moderní prohlížeče všechny podporují 1.5ECMA JavaScript (nejmodernější) – od IE 1.5ECMA JavaScript (nejmodernější) – od IE 5.5, Navigatoru 6.0 (tj včetně Mozilly a 5.5, Navigatoru 6.0 (tj včetně Mozilly a Firefoxu), Opera 6.0Firefoxu), Opera 6.0
• různá rozšíření IE (někdy je přejal i různá rozšíření IE (někdy je přejal i Navigator) – např. document.all, innerHTML, Navigator) – např. document.all, innerHTML, innerTextinnerText
Jádro JavaScriptuJádro JavaScriptu
základní syntaxe, datové typy, základní syntaxe, datové typy, proměnné, příkazy, větveníproměnné, příkazy, větvení
Základní syntaxeZákladní syntaxe
• znaková sada Unicode (2 byte – 256 znaků)znaková sada Unicode (2 byte – 256 znaků)• case senzitive jazyk – rozlišuje malá a velká case senzitive jazyk – rozlišuje malá a velká
písmenapísmena• vždy středníky za datovými a příkazovými vždy středníky za datovými a příkazovými
strukturami (× jsou volitelné, ale JavaScript strukturami (× jsou volitelné, ale JavaScript je implicitně sám doplňuje, což může je implicitně sám doplňuje, což může způsobit problémy)způsobit problémy)
• složené závorky pro bloky příkazůsložené závorky pro bloky příkazů• komentáře jako v PHP, C++, Javě…komentáře jako v PHP, C++, Javě…
co něco zkusit?co něco zkusit?
• document.open(); document.open(); – otevírá dokumentotevírá dokument
• document.write(), document.write(), – zapisuje do dokumentuzapisuje do dokumentu
• alert();alert();– vypisuje do výstražného okna něcovypisuje do výstražného okna něco
• ÚkolÚkol– vypište něco na obrazovkuvypište něco na obrazovku– vyvolejte výstražné okno s nějakým textemvyvolejte výstražné okno s nějakým textem
Datové typyDatové typy
• primitivní datové typyprimitivní datové typy– číslo (číslo (nnumber)umber)– řetězec (řetězec (sstring)tring)– logická hodnota (logická hodnota (bboolean)oolean)– null, undefinednull, undefined
• pole pole • objektyobjekty• obalové objekty (obalové objekty (NNumber, umber, SString, tring, BBoolean)oolean)• funkcefunkce
číslačísla
• není rozdíl mezi celočíselnými hodnotami není rozdíl mezi celočíselnými hodnotami (integer - v MySQL, C++, JAVA – int, shortint, (integer - v MySQL, C++, JAVA – int, shortint, longint) a čísly s desetinou čárkou (real – longint) a čísly s desetinou čárkou (real – např. double)např. double)
• -9007199254740992 (-2-9007199254740992 (-25353) – 9007199254740992 (2) – 9007199254740992 (25353))• 64 bitová reprezentace čísla (tzn. přesnost na 15 64 bitová reprezentace čísla (tzn. přesnost na 15
desetinných míst)desetinných míst)
• možnost zápisu hexadecimálně (0×ff)možnost zápisu hexadecimálně (0×ff)• možnost zápisu v dalších soustavách možnost zápisu v dalších soustavách
(pomocí metody toString())(pomocí metody toString())
číslačísla
• matematické operace s čísly – pomocí matematické operace s čísly – pomocí objektu Mathobjektu Math
čísla – speciální hodnotyčísla – speciální hodnoty
• Infinity – kladné nebo záporné nekonečnoInfinity – kladné nebo záporné nekonečno• NaN – Not A Number – nečíselná hodnotaNaN – Not A Number – nečíselná hodnota• Number.MAX_VALUENumber.MAX_VALUE• Number.MIN_VALUENumber.MIN_VALUE• Number.NaNNumber.NaN• Number.POSITIVE_INFINITYNumber.POSITIVE_INFINITY• Number.NEGATIVE_INFINITYNumber.NEGATIVE_INFINITY
řetězce – stringřetězce – string
• datový typ reprezentovaný znaky UNICODEdatový typ reprezentovaný znaky UNICODE• text uzavřený do uvozovek nebo apostrofůtext uzavřený do uvozovek nebo apostrofů
escape sekvenceescape sekvence
• některé znaky nebo akce se musí zapisovat některé znaky nebo akce se musí zapisovat se zpětným lomítkem (tzv. escape sekcence)se zpětným lomítkem (tzv. escape sekcence)
spojování řetězcůspojování řetězců
• provádí se pomocí znaménka + (na rozdíl od provádí se pomocí znaménka + (na rozdíl od PHP)PHP)
příklady funkcí pro práci s řetězcipříklady funkcí pro práci s řetězci
logické hodnoty - booleanlogické hodnoty - boolean
• dvě hodnoty – true (pravda, 1), false dvě hodnoty – true (pravda, 1), false (nepravda, 0)(nepravda, 0)
• tento datový typ je často výsledkem tento datový typ je často výsledkem porovnání (větvení pomocí if)porovnání (větvení pomocí if)
PolePole• indexovaný soubor datových hodnotindexovaný soubor datových hodnot• číslování od nuly (první prvek pole má index [0]číslování od nuly (první prvek pole má index [0]• např: dny v týdnu, seznamynapř: dny v týdnu, seznamy
$DenvTydnu[1]=“pondělí“;$DenvTydnu[1]=“pondělí“;$DenvTydnu[2]=“úterý“;$DenvTydnu[2]=“úterý“;$DenvTydnu[7]=“neděle“;$DenvTydnu[7]=“neděle“;
• lze použít asociativní pole:lze použít asociativní pole:$PocetObyvatel[$PocetObyvatel[““Blovice“]=4005;Blovice“]=4005;$PocetObyvatel[$PocetObyvatel[““Habří“]=0;Habří“]=0;
• pole mohou obsahovat jakékoliv datové prvky – pole mohou obsahovat jakékoliv datové prvky – čísla, řetězce, jiná pole, objektyčísla, řetězce, jiná pole, objekty
• definice pomocí konstruktoru definice pomocí konstruktoru new Array();new Array();
PolePole
objektyobjekty
• soubor pojmenovaných hodnot uspořáda-soubor pojmenovaných hodnot uspořáda-ných do logického celkuných do logického celku
objektyobjekty
• objekty se většinou stanovují obecně, pak se objekty se většinou stanovují obecně, pak se vytváří kopie (instance) pomocí vytváří kopie (instance) pomocí konstruktorukonstruktoru a s daty v objektech se pracuje pomocí a s daty v objektech se pracuje pomocí funkcí – tzv. funkcí – tzv. metodmetod
• prakticky celý klientský JavaScript je založen prakticky celý klientský JavaScript je založen na Objektech – i když to není zřejména Objektech – i když to není zřejmé– všechny prvky na html stránce jsou podřízené všechny prvky na html stránce jsou podřízené
objektu Window objektu Window – potomky tohoto objektu (třídy) jsou Document, potomky tohoto objektu (třídy) jsou Document,
Frame, Field, Link, Img, Anchor, …Frame, Field, Link, Img, Anchor, …
funkcefunkce
• část předdefinovaného kódu JavaScriptučást předdefinovaného kódu JavaScriptu• je definována jen jednou, lze jí opakovaně je definována jen jednou, lze jí opakovaně
volatvolat• sémanticky lze rozlišit:sémanticky lze rozlišit:– proceduryprocedury – úseky kódu, které nemají parametr a – úseky kódu, které nemají parametr a
jen vykonávají standardní věci (např. výpis části jen vykonávají standardní věci (např. výpis části kódu)kódu)
– funkcefunkce – generuje výstup závislý na vstupních – generuje výstup závislý na vstupních parametrechparametrech
funkce funkce
• JavaScript obsahuje řadu přednastavených JavaScript obsahuje řadu přednastavených funkcí (resp. metod), pro práci s čísly (např. funkcí (resp. metod), pro práci s čísly (např. metody objektu Math)metody objektu Math)
• uživatel může definovat řadu funkcí nebo uživatel může definovat řadu funkcí nebo metod – tj. funkcí vázaných k určitým metod – tj. funkcí vázaných k určitým objektůmobjektům
funkcefunkce
obalové objektyobalové objekty
• kolem primitivních datových typů number, kolem primitivních datových typů number, string a boolean existují tzv. obalové objekty string a boolean existují tzv. obalové objekty Number (), String() a Boolean ()Number (), String() a Boolean ()
• obsahují další metody (funkce) pro práci s obsahují další metody (funkce) pro práci s těmito datovými typytěmito datovými typy
• objekt objekt DateDate• objekt objekt ErrorError – při chybě, lze tak ošetřit kód – při chybě, lze tak ošetřit kód
nebo použít k laděnínebo použít k ladění
ProměnnéProměnné
deklarace, platnost proměnných,deklarace, platnost proměnných,
primitivní a referenční typy, primitivní a referenční typy, uvolňování pamětiuvolňování paměti
deklaracedeklarace
• skládá se z identifikátoru (názvu) – bez $!! a skládá se z identifikátoru (názvu) – bez $!! a hodnotyhodnoty
deklarace se provádí prostřednictvím slova deklarace se provádí prostřednictvím slova varvarvar pi;var pi;
pi = 3.14159;pi = 3.14159;
var retezec = ‚ahojky‘;var retezec = ‚ahojky‘;
• použití nedeklarované proměnné způsobí použití nedeklarované proměnné způsobí chybuchybu
• lze opakovaně deklarovat proměnnoulze opakovaně deklarovat proměnnou• nemusí se uvádět datový typnemusí se uvádět datový typ
platnost proměnnýchplatnost proměnných
• deklarace ve funkci nebo metodě s použitím deklarace ve funkci nebo metodě s použitím var se vytvoří lokální proměnná platná jen ve var se vytvoří lokální proměnná platná jen ve funkcifunkci
• deklarací ve funkci bez použití var způsobí deklarací ve funkci bez použití var způsobí definici globální proměnné platné v celém definici globální proměnné platné v celém dokumentudokumentu
primitivní typy×referenční typyprimitivní typy×referenční typy
• primitivní typy (cislo, boolean, string) primitivní typy (cislo, boolean, string) předávají hodnotupředávají hodnotu
• referenční typy předávají odkaz na místo v referenční typy předávají odkaz na místo v paměti (pole, objekt)paměti (pole, objekt)
úkolúkol
• definujte různé proměnnédefinujte různé proměnné• proveďte matematické operace s čísly a proveďte matematické operace s čísly a
řetězci a vypište je na obrazovkuřetězci a vypište je na obrazovku• zkuste automatické přetypování pomocí čísla zkuste automatické přetypování pomocí čísla
uzavřeného do uvozovekuzavřeného do uvozovek
uvolňování pamětiuvolňování paměti
• na rozdíl od C++ a JAVA se pamět uvolňuje na rozdíl od C++ a JAVA se pamět uvolňuje automatickyautomaticky
• na pozadí běží proces, který neustále hledá na pozadí běží proces, který neustále hledá reference nebo hodnoty, které nejsou reference nebo hodnoty, které nejsou dosažitelné, ty jsou označenydosažitelné, ty jsou označeny
• garbage collector maže takto označená datagarbage collector maže takto označená data
operátoryoperátory
• matematické matematické + + - / * % ++ --- / * % ++ --
• porovnávací porovnávací == <= >= < > ===== <= >= < > ===
• logické logické && || !&& || !
• unární unární - +- +
• podmínkový (ternární)podmínkový (ternární)??
• bitovébitové
PříkazyPříkazy
přiřazení, větvení (if, switch), cykly přiřazení, větvení (if, switch), cykly (while, do-while, for, for-in), break, (while, do-while, for, for-in), break,
continue, return, throw, continue, return, throw, try/catch/finallytry/catch/finally
přiřazenípřiřazení
• provádí se pomocí znaku rovná seprovádí se pomocí znaku rovná se
úkolúkol
• napište v PSPadu scriptnapište v PSPadu script• použijte různé deklarace proměnných, použijte různé deklarace proměnných,
operujte s nimi (pomocí operátorů a metod operujte s nimi (pomocí operátorů a metod objektu Math)objektu Math)
• výstup tisk (pomocí) metody alert () nebo výstup tisk (pomocí) metody alert () nebo kombinace document.open(); a kombinace document.open(); a document.write();document.write();
větvení – if…elsevětvení – if…else
• strukturastrukturaif (výraz, podmínka) { …….. }if (výraz, podmínka) { …….. }
if (výraz, podmínka) { …….. } else { ……. }if (výraz, podmínka) { …….. } else { ……. }
if (výraz, podmínka) { …….. } else if { ……. }if (výraz, podmínka) { …….. } else if { ……. }
else else { ……. }{ ……. }
• v závorce se testuje proměnná typu boolean v závorce se testuje proměnná typu boolean nebo jakýkoliv výraz pomocí porovnávacích nebo jakýkoliv výraz pomocí porovnávacích operátorůoperátorů
if…elseif…else
podmínky - úkolpodmínky - úkol
• vytvořte 3 scripty, které budou využívat vytvořte 3 scripty, které budou využívat větvení pomocí podmínky větvení pomocí podmínky if elseif if elseif aa else else
• v prvním skriptu testujte výraz typu booleanv prvním skriptu testujte výraz typu boolean• v druhém skriptu testujte číselnou v druhém skriptu testujte číselnou
proměnnou pomocí operátorů proměnnou pomocí operátorů <, >, <=, =><, >, <=, =>• ve třetím scriptu testujte řetězce pomocí ve třetím scriptu testujte řetězce pomocí
operátorů operátorů == , !=== , != a logických operátorů a logických operátorů &&&& a a ||||
• uložte do vaší složkyuložte do vaší složky
větvení switchvětvení switch
• nahrazuje níže uvedenou strukturu:nahrazuje níže uvedenou strukturu:if (výraz1) {…………}if (výraz1) {…………}
elseif (výraz2) {…………}elseif (výraz2) {…………}
elseif (výrazn) {…………}elseif (výrazn) {…………}
else {…………………….}else {…………………….}
• má tento tvarmá tento tvarswitch (podmínka) {switch (podmínka) {
case výraz1:case výraz1:
case výraz2:case výraz2:
case výraz3:case výraz3:
default:default:
}}
switchswitch
úkol - switchúkol - switch
• napište script, který podle řídící proměnné napište script, který podle řídící proměnné reaguje třemi způsobyreaguje třemi způsoby
• použijte výpis pomocí alert() nebo použijte výpis pomocí alert() nebo document.write()document.write()
• použijte switchpoužijte switch
cyklus forcyklus for
• cyklus s parametrem – víme, kolikrát cyklus cyklus s parametrem – víme, kolikrát cyklus proběhneproběhne
for (i=1; i<=20; i++) { ……. }for (i=1; i<=20; i++) { ……. }
• před započetím konkrétního cyklu se vyhodnotí před započetím konkrétního cyklu se vyhodnotí výraz druhý (zde i<=20)výraz druhý (zde i<=20)
• neplatí-li podmínka, cyklus se ukončíneplatí-li podmínka, cyklus se ukončí• platí-li, cyklus pokračuje dále a provede se sekvence platí-li, cyklus pokračuje dále a provede se sekvence
mezi složenými závorkamimezi složenými závorkamipo ukončení těla smyčky se provede třetí výraz (zde po ukončení těla smyčky se provede třetí výraz (zde se parametr i zvýší o jedničkuse parametr i zvýší o jedničku
• vše se opakujevše se opakuje
cyklus for cyklus for
úkolúkol
• napište script, který pomocí cyklu for vypíše napište script, který pomocí cyklu for vypíše do okna prohlížeče toto:do okna prohlížeče toto:
cyklus s podmínkoucyklus s podmínkou
• s podmínkou na začátku :s podmínkou na začátku :• tělo cyklu proběhne jen tehdy, je-li platná tělo cyklu proběhne jen tehdy, je-li platná
podmínkapodmínkawhile (podmínka) {…….}while (podmínka) {…….}
• s podmínkou na konci :s podmínkou na konci :• tělo cyklu proběhne vždy minimálně jednoutělo cyklu proběhne vždy minimálně jednou• opakuje se, pokud platí podmínkaopakuje se, pokud platí podmínka
do {…….} while (podmínka)do {…….} while (podmínka)
úkolúkol
• modifikujte závěr příkladu, aby vypisoval, modifikujte závěr příkladu, aby vypisoval, kdo vyhrál (počítač, hráč)kdo vyhrál (počítač, hráč)
• platí tyto podmínky:platí tyto podmínky:• má-li někdo součet 21 vyhrál, překročil-li má-li někdo součet 21 vyhrál, překročil-li
někdo 21 prohrál, nikdo nevyhrál v případě někdo 21 prohrál, nikdo nevyhrál v případě rovnosti 21 nebo překročení 21 u obou hráčůrovnosti 21 nebo překročení 21 u obou hráčů
throwthrow
• za určité podmínky vyhazuje výjimku – chybuza určité podmínky vyhazuje výjimku – chybu
try, catch, finallytry, catch, finally
• trytry – obsahuje blok, který může způsobit chybu – obsahuje blok, který může způsobit chybu• catchcatch – zachytává a ošetřuje výjimky – zachytává a ošetřuje výjimky• finallyfinally – kód, který se provede i v případě chyby – kód, který se provede i v případě chyby
throw, try, catch, finallythrow, try, catch, finally
ObjektyObjekty
vytváření objektů, metodyvytváření objektů, metody
objektyobjekty
• soubor pojmenovaných hodnot soubor pojmenovaných hodnot uspořádaných do logického celkuuspořádaných do logického celku
• objekty se vytváří zvláštní funkcí, tzv. objekty se vytváří zvláštní funkcí, tzv. konstruktorem konstruktorem -- ten vytváří novou instanci ten vytváří novou instanci objektuobjektu
objektyobjekty
• definice „objektu“ tvoří definice „objektu“ tvoří prototypprototyp, jakýsi obecný , jakýsi obecný model pro tvorbu kopií (instancí)model pro tvorbu kopií (instancí)
• prototypovým objektům lze přiřadit funkce, které prototypovým objektům lze přiřadit funkce, které automaticky dopočítají hodnoty daným objektům automaticky dopočítají hodnoty daným objektům nebo pracují z daty => nebo pracují z daty => metodymetody
• metody jsou dostupné automaticky všem kopiím metody jsou dostupné automaticky všem kopiím (instancím) objektů(instancím) objektů
• POZOR!!POZOR!!• pole (Array) nebo řetězce (String) jsou v jistém slova pole (Array) nebo řetězce (String) jsou v jistém slova
smyslu objekty – lze jim přiřazovat nové prototypové smyslu objekty – lze jim přiřazovat nové prototypové metody, které fungují u všech instancí typu pole metody, které fungují u všech instancí typu pole nebo stringnebo string
objektyobjekty
objektyobjekty
• nové instance se vytváří pomocí nové instance se vytváří pomocí konstruktoru:konstruktoru:
mujobdelnik = new Obdelnik (10,10);mujobdelnik = new Obdelnik (10,10);
výpis se provede definovanou metodou výpis se provede definovanou metodou toString();toString();
mujobdelnik.toString();mujobdelnik.toString();
PolePole
struktura polístruktura polí
metody pro práci s polimetody pro práci s poli
PolePole
metody pro práci s polimetody pro práci s poli
metody pro práci s polimetody pro práci s poli
metody pro práci s polimetody pro práci s poli
metody pro práci s polimetody pro práci s poli
metody pro práci s polimetody pro práci s poli
• v dokumentu jsou pole obrázků, odkazů, v dokumentu jsou pole obrázků, odkazů, kotev, formulářů apod.kotev, formulářů apod.
Regulární výrazyRegulární výrazy
vyhledávání řetězcůvyhledávání řetězců
nahrazování znakůnahrazování znaků
zobecnění řetězcůzobecnění řetězců
Regulární výrazyRegulární výrazy
• objekt popisující vzor znakůobjekt popisující vzor znaků• používá se na vyhledávání znaků v řetězcíchpoužívá se na vyhledávání znaků v řetězcích• regulární výrazy se zapisují pomocí lomítekregulární výrazy se zapisují pomocí lomítek
var regular = /.$/var regular = /.$/
//budou se hledat řetězce, které končí tečkou//budou se hledat řetězce, které končí tečkou
var find = /\s\s/ var find = /\s\s/
//budou se hledat místa se dvěma mezerami//budou se hledat místa se dvěma mezerami
Regulární výrazyRegulární výrazy
Regulární výrazyRegulární výrazy
Klientský JavaScriptKlientský JavaScript
JavaScript v prohlížečiJavaScript v prohlížeči
objektová strukturaobjektová struktura
• nezapomeňte, že vše probíhá v okně (objekt nezapomeňte, že vše probíhá v okně (objekt Window), ve kterém je dokument (objekt Window), ve kterém je dokument (objekt Document), který je tvořen Formuláři Document), který je tvořen Formuláři (Forms), Odkazy (Links), obrázky (Links), (Forms), Odkazy (Links), obrázky (Links), záložkami (Anchor) a dalšími prvkyzáložkami (Anchor) a dalšími prvky
ovladače událostí?ovladače událostí?
• dynamickédynamické znamená měnící se znamená měnící se• interaktivníinteraktivní znamená reagující na činnost znamená reagující na činnost
uživateleuživatele• událostiudálosti v okně nastávají v případech – v okně nastávají v případech –
změní se velikost, nahraje se dokument, změní se velikost, nahraje se dokument, kurzor najede nad prvek, něco se změní…kurzor najede nad prvek, něco se změní…
• ovladače událostíovladače událostí – syntaxe, které sledují – syntaxe, které sledují výše uvedené změnyvýše uvedené změny
implementace do HTMLimplementace do HTML
• pomocí tagu pomocí tagu <script></script><script></script>• pro validitu je lepší uvést tento kódpro validitu je lepší uvést tento kód
<script type=„text/javascript“<script type=„text/javascript“..kódkód..</script></script>
• je možné vládat soubor typu .jsje možné vládat soubor typu .js<script type=„text/javascript“ src=„soubor.js></script><script type=„text/javascript“ src=„soubor.js></script>
objekt windowobjekt window
okna, jejich vlastnosti a metody okna, jejich vlastnosti a metody práce s oknypráce s okny
window - vlastnostiwindow - vlastnosti
• okna, ve kterém se otevírá dokumentokna, ve kterém se otevírá dokument
window - metodywindow - metody
window – metody open(), blur(), focus()window – metody open(), blur(), focus()
• setInterval()setInterval() – spouští činnosti v určitém – spouští činnosti v určitém intervaluintervalu
• setTimeout()setTimeout() – spuští činnost po určité době – spuští činnost po určité době
setIntervalsetInterval
metodymetody scroolby(), moveBy(), resizeBy(); scroolby(), moveBy(), resizeBy();
window – ovladače událostíwindow – ovladače událostí
ovladač události ovladač události onerroronerror
• nastane-li chyba vyhodí chybunastane-li chyba vyhodí chybu• funguje jen v některých prohlížečích – v IE se funguje jen v některých prohlížečích – v IE se
primárně spouští vlastní chybové oknoprimárně spouští vlastní chybové okno
onerror – implementace do HTMLonerror – implementace do HTML
documentdocument
dokument v okně, vlastnosti, dokument v okně, vlastnosti, metody práce s dokumenty, metody práce s dokumenty,
ovladače událostíovladače událostí
documentdocument
links[] links[]
• pole obsahující všechny odkazy v html pole obsahující všechny odkazy v html dokumentudokumentu
úkolúkol
• změňte výše uvedenou funkci tak, aby nejen změňte výše uvedenou funkci tak, aby nejen vypisovala odkazy, ale učinila je skutečnými vypisovala odkazy, ale učinila je skutečnými odkazyodkazy
img []img []
• pole obsahující všechny obrázkypole obsahující všechny obrázky• new Image(x,y).src=url;new Image(x,y).src=url;– konstruktor objektu Image – neumístí se na konstruktor objektu Image – neumístí se na
obrazovku, ale načte se do paměti – urychlí se obrazovku, ale načte se do paměti – urychlí se nahrávánínahrávání
implementace do htmlimplementace do html
forms[]forms[]
• pole, které obsahu všechny formuláře v pole, které obsahu všechny formuláře v dokumentudokumentu
• pole pole forms[]forms[] obsahují prvky obsahují prvky elements[]elements[]• na prvky polí se lze odkazovat i pomocí na prvky polí se lze odkazovat i pomocí
pojmenovaných atributůpojmenovaných atributů• u tagů zavedeme atribut name=„“ a poté se u tagů zavedeme atribut name=„“ a poté se
odkazujeme:odkazujeme:document.[nazevprvku].valuedocument.[nazevprvku].value
úkolúkol
• zapište příklad a modifikujte jej – místo pole zapište příklad a modifikujte jej – místo pole použijte atributy použijte atributy namename
hodinyhodiny