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