Javascript vJavascript v
Zdeněk VlachZdeněk Vlach
v praxiv praxi
C á č ká?Co nás čeká?
• Core versus frameworky
DOM k l k• DOM – kolekce
• Události – fáze zpracováUdálosti fáze zpracová
• Detekce (browser x featu
• Prototypy
• Čas na dotazy• Čas na dotazy
y
ání událostiání události
ure)
C FCore versus Fram
• Je fajn vědět na čem sta
F k hl t• Framework – rychlost
• Core – vím co dělám!Core vím co dělám!
• Takže co je lepší?
keworky
avím
DOM (D t ODOM (Document O
• Programové rozhraní v J
HTML a XML dokumentyHTML a XML dokumenty
• Reprezentace dokument
tvořená ulzy a objekty, kt
metodymetody
var div = document.getEleg
alert(div[0].nodeName);
Ob t M d l)Obect Model)
Javascriptu pro práci s
yy
tu je strukturovanáj
teré mají vlastnosti a
ementsByTagName("div");y g ( );
DOM lDOM – pole
• Jsou součástí jádra Java
var pole = new Array(1,2,
pole.slice(1,2); // vra
• Odbočka: procházení po
f ( i 0 i l l htfor(var i=0; i<pole.lenght
alert(pole[i])
Array.prototype.kuk = func
for(var i in pole) {alert(p
ascriptu
,3);
ati 2
ole cyklem for
t i )t;i++)
ction() { //neco }
(i)} // chybay
DOM d Li t (kDOM – nodeList (k
• Jsou součástí DOM API
R t jí ý l d k k• Reprezentují výsledek, k
document.getElementsByTa
document.getElementsByCl
k l k )kolekce)
kt ý í t d j kkterý vrací metody jako:
gName(),
assName()
DOM d Li tDOM – nodeList
• Co vlastně kolekce je?
var nodes = document.getE
nodes.lenght; // vrati
nodes[0]; // pristonodes[0]; // pristo
nodes.slice(1,2); // ha tnodes.slice(1,2); // ha t
nodes.item(0); // a to
ElementsByTagName("div")
nejake cislo
oupi k prvni polozceoupi k prvni polozce
tohle nefungujetohle nefunguje
ohle zase ano
DOM d Li tDOM – nodeList
var nodes = document.getEl
var pole = [1,2,3];a po e [ , ,3];
nodes.constructor.toString
// "[object NodeList// [object NodeList
pole.constructor.toString(
// "function Array() {// function Array() {
[native code]
}"}"
ementsByTagName("div");
g();
tConstructor]"tConstructor]
);
DOM d Li tDOM – nodeList
• „Žije“
Můž být ýh d ější ř• Může být výhodnější pře
pole
var n = document.getElemen
for (var i=0; i<n lenght;for (var i=0; i<n.lenght;
n[i].parentNode.removeChil
}}
// nevymaze vse
// i d l// reseni preved na pole
é t k l k i b č j éevést kolekci na obyčejné
ntsByTagName("div");
i++) {i++) {
d(n[i]);
b klnebo zmen cyklus
Udál tiUdálosti
• API úrovně 0 – ošklivé p
API ú ě 2 t d d• API úrovně 2 – standard
• Fáze zpracování událostFáze zpracování událost
– Zachytávání (true)
T t– Target
– Bublání (false)
node.addEventListener("cl
omocí atributů
ží ý č tipoužívaný v současnosti
titi
lick",show,true/false)
Udál ti d l ZUdálosti – model ZZBZB
Udál ti říkl dUdálosti – příklad
document.addEventListener("
document.getElementById("he
("click", show2, true);
// naveseno v zachytavaci f
•Jaké bude pořadí volání
Jak to ovlivní funkce stop•Jak to ovlivní funkce stop
"click", show1, true);
eader").addEventListener
fazi
posluchačů?
pPropagation?pPropagation?
D t kDetekce
• Co chci detekovat?
P hlíž č– Prohlížeč
– Vlastnost kterou chci pou
– Používané a podporované
žít
é DOM moduly
D t k hlížDetekce - prohlíže
• Možnosti:
Vl t t ifi k– Vlastnost specifickou pro
– UserAgent řetezec (navig
if (window.opera) {
return "opera";
} l if ( i d h ) {} else if (window.chrome) {
return "chrome";
else if (this._agent.indexOf("KHTML")) {
if (this. vendor == "KDE") {if (this._vendor KDE ) {
return "konqueror";
} else {
return "safari";
}
čeč
d ý hlíž čdaný prohlížeč
gator.userAgent)
{
D t k f tDetekce - feature
• Pokud používám feature
některých prohlížečíchněkterých prohlížečích –
detekci UserAgent řeteze
if (document.addEventListen
elm addEventListener(telm.addEventListener(t
} else if (document.attachE
elm.attachEvent('on'+t(
e dostupnou pouze v
nebudu používat k– nebudu používat k
ec, ale:
ner) {
type action capture);type, action, capture);
Event) {
type, action);yp , );
D t k h F tDetekce - hasFeat
• Umožňuje detekovat, kte
verzi prohlížeč podporujeverzi prohlížeč podporuje
• Moduly: HTML, XHTML,y
• Odpověď true nemusí bý
console.log(document.implem
ML" "2 0"))ML , 2.0 ))
tture
erý DOM modul a v jaké
ee
Core, CSS, CSS2
ýt výhrou
mentation.hasFeature("HT
P t tPrototypy
• Javascript je netřídní jaz
rezervované slovo)rezervované slovo)
• Bez silné typové kontrolyy y
• Trošku obskurní, ale obje
dědičností na místo třídndědičností na místo třídn
yk (class je jen
yy
ektový a s prototypovou
níní
P t t j tPrototypy – co je t
• Každý objekt v JS má sv
objektobjekt
• Všechny vlastnosti protoy
jako vlastnosti každého o
prototypemprototypem
• To znamená že, každý o
éhsvého prototypu
t ?to?
vůj vlastní prototypový
otypového objektu se jevíy j j
objektu, jehož je
objekt dědí vlastnosti
P t t idPrototypy – idea
Prototype objekt pro
T
(sdilené vlastnosti)
Instanc
(sdilené vlastnosti)
T.prototype.p = 10;
T prototype a = [];
alert(t2
T.prototype.a = [];
T.prototypef. =
function () {};
alert(t2
//setrime pamet
Instance t1 new T()
alert(t1 p); // 10
ce t2 new T()
alert(t1.p); // 10
t1.p = 20;
alert(t1.p); // 20
.p); // 10
T1.a.push(1);
alert(t1.a.length);
.a.length);
P t t ká kPrototypy – ukázk
var Vozidlo = function () {} // funkvar Vozidlo = function () {} // funk
Vozidlo.prototype.jed = function ()
console log(Vozidlo prototype constrconsole.log(Vozidlo.prototype.constr
var vozidlo = new Vozidlo(); //nová
// zkusim vytvorit analogii tridniho
var Tank = function () {} // funkce
Tank.prototype = vozidlo; //bez framTank.prototype vozidlo; //bez fram
Tank.prototype.constructor = Tank; /
prototypovy objekt
Tank.prototype.vystrel = function ()p yp y ()
var tank = new Tank() // bude mit me
kka
kce konstruktorukce konstruktoru
{}
ructor) // fce Vozidloructor) // fce Vozidlo
instance
o dedeni
konstruktoru
meworku musim taktomeworku musim takto
// jelikoz si prepisu cely
{}{}
etody jed i vystrel
Otá k d ědOtázky a odpověddidi
Děkuji za pozornDěkuji za pozorn
Zdeněk Vlach
nostnost…