JavaScript v Seznamu

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

Obsah

O JavaScriptu
Co je obtížné
JAK
Co s JAKem není obtížné
Widgety

O JavaScriptu

Přesněji ECMAScript, jazyk primárně určený pro obohacení funkcionality webových stránek
Dnes alfa a omega řady webů (mapy.cz, gmail.com, …)
Poslední dobou se rozmáhá použití i mimo webový prohlížeč
Expresivní, interpretovaný, slabě typovaný dynamický jazyk s prototypovou dědičností
Java is to JavaScript as ham is to hamster
JavaScript je náročný a je proto zdrojem mnoha nedorozumění

JS v prohlížeči

Každý webový prohlížeč obsahuje interpret jazyka

Různé interprety, různé chování:

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

Hlavní použití JS v prohlížeči

Zpracovávání událostí (typicky vyvolaných uživatelem)
Změna obsahu stránky a jejího vzhledu
Načítání dat "na pozadí" (bez obnovení stránky)
API pro blízkou budoucnost: 3D, zvuk, databáze, …

Co je obtížné

DOM
Prototypová dědičnost
Klíčové slovo this
Scope chain / closures

DOM

DOM = Document Object Model
Rozhraní pro přístup k dokumentu (webové stránce)
Typický vývojář si plete JavaScript a DOM
alert, window, document, …
document.addEventListener("click", funkce, false); document.attachEvent("onclick", funkce);
var odstavce = document.getElementsByTagName("p"); for (var i=0; i<odstavce.length; i++) { odstavce[i].parentNode.removeChild(odstavce[i]); }

Prototypová dědičnost

Čerstvý absolvent OOP je navyklý na třídní dědičnost:
- Třída = abstraktní popis
- Instance = konkrétní realizace
JS realizuje prototypovou dědičnost:
- Všechno je proměnná
- Všechno je objekt
- Společné chování je realizováno pomocí prototypů

Prototypová dědičnost – ukázka


var Clovek = function() {};          /* funkce je datový typ */

Clovek.prototype.mzda = 1;           /* kde se vzala vlastnost prototype? */

Clovek.prototype.pracuj = function() {
	this.penize += this.mzda;
};

var Programator = function() {};

Programator.prototype = new Clovek(); /* přepsání vlastnosti prototype */
Programator.prototype.mzda = 2;

var ondra = new Programator();
ondra.pracuj();

Klíčové slovo this


var jakSeJmenujes = function() { alert(this.jmeno); }

var jmeno = "Lojza";
jakSeJmenujes();

var objekt = {
	jmeno: "Pepa"
}
jakSeJmenujes.call(objekt);

var Clovek = function(jmeno) {
	this.jmeno = jmeno;
}
Clovek.prototype.jakSeJmenujes = jakSeJmenujes;

var jarda = new Clovek("Jarda");
jarda.jakSeJmenujes();

Scope chain / closures

Úloha: po kliknutí na každou z položek číslovaného seznamu vypsat její pořadí


var items = ul.getElementsByTagName("li");
for (var i=0; i<items.length; i++) {
	var item = items[i];
	var poKliknuti = function() { alert(i); }
	item.addEventListener("click", poKliknuti, false);
}

JAK

JS knihovna z dílny Seznamu
http://jak.seznam.cz/
Vznikla z důvodu vnitřní potřeby kvalitního řešení
Sada volně provázáných modulů
Unifikovaný a zjednodušený přístup k většině vlastností jazyka a DOMu
Vyvíjeno jako OpenSource na serveru Github

Komponenty JAKu

Jádro:
- Dědičnost
- Události / Signály
- AJAX (HTTP Request)
- Cross-browser DOM
Utility:
- XML
- Animace
- Vektorová grafika
Widgety:
- WYSIWYG editor
- Kalendář
- Barevná paleta
- Rozbalovací stromy položek

Co s JAKem není obtížné

Cross-browser DOM
Dědičnost – podpora třídního modelu
Předávání callbacků s kontextem
Mizí nutnost nořených a/nebo anonymních funkcí
AJAX
Návrhový vzor Observer

JAK a DOM


/* specifikace značky, atributů a stylů */
var input = JAK.mel("input", {type:"text", value:"ahoj"}, {color:"red"});

/* CSS 1 selektor */
var odstavce = JAK.query("#id .class p");

/* souřadnice vůči levému hornímu rohu stránky */
var pos = JAK.DOM.getBoxPosition(odstavce[0]); 

JAK.DOM.append([rodic1, prvek1, prvek2], [rodic2, prvek3, …]);

JAK a události


var Odkaz = function(a) {
	this.id = JAK.Events.addListener(a, "click", this, "_click");
};

Odkaz.prototype._click = function(e, elm) {
	JAK.Events.cancelDef(e);
	alert(elm.href);
	JAK.Events.removeListener(this.id);
};
	
new Odkaz(JAK.gel("id"));

JAK a třídy


var Class = JAK.ClassMaker.makeClass({
	NAME: "Test class",
	VERSION: "1.0"
});
Class.prototype.method = function(a) {};

var Interface = JAK.ClassMaker.makeInterface({
	NAME: "Test interface"
});
Interface.prototype.otherMethod = function() {};

var SubClass = JAK.ClassMaker.makeSingleton({
	NAME: "Test subclass",
	EXTEND: Class,
	IMPLEMENT: [Interface]
});	
SubClass.prototype.method = function(a, b) {
	this.$super(a);
}
SubClass.getInstance().method();

JAK a vlastní události


var Sender = JAK.ClassMaker.makeClass({
	NAME: "Sender",
	IMPLEMENT: JAK.ISignals
});
Sender.prototype.send = function() {
	this.makeEvent("porad-se-neco-deje");
};

var Receiver = JAK.ClassMaker.makeClass({
	NAME: "Receiver",
	IMPLEMENT: JAK.ISignals
});
Receiver.prototype.$constructor = function(sender) {
	this.addListener("porad-se-neco-deje", "_receive", sender);
};
Receiver.prototype._receive = function(e) { alert(e.type); }

JAK a AJAX


var r = new JAK.Request(JAK.Request.XML); /* možno také TEXT, JSONP, BINARY */

var odpoved = function(xmlDoc, status) {
	alert("HTTP/" + status);
	alert(xmlDoc.documentElement.nodeName);
}
r.setCallback(odpoved);

var data = {
	"a": "b",
	"c": ["něco", "něco jiného"]
};

r.send("/zpracuj.php", data);

Co všechno zvládá JAK.Request

Timeout
Abort
Hlavičky
Serializaci požadavku
Libovolné HTTP metody
Volání odpovědi v zadaném kontextu

JAK a animace


var div = JAK.mel("div");
var i = new JAK.CSSInterpolator(div, 500);

i.addProperty("opacity", 1, 0);
i.addProperty("width", 500, 0, "px");
i.addColorProperty("backgroundColor", "#f00", "#000");

i.start();

JAK a periodické opakování


var Metronom = function() {}
Metronom.prototype.tick = function() {}
	
var m = new Metronom();

var t = JAK.Timekeeper.getInstance();
t.addListener(m, "tick", 5); /* jednou za 100ms */

/* nějaká činnost … */
t.removeListener(m);

Widgety

Konec

Prostor pro otázky