Dnes si povíme o konstrukci with a rovnou prozradím, že učiníte lépe, nebudete-li ji používat.

Konstrukce with

Konstrukce with je určena ke zkrácení zápisu přístupu k vlastnostem objektů.

var osoba = {
    jmeno: "franta",
    prijmeni: "frantiskovec",
    velikostBot: 42
};

//v rámci bloku with mohu pracovat s vlastnostmi
//objektu 'osoba' podobně jako s lokálními proměnnými
with (osoba) {
   //vypíše "franta"
   console.log(jmeno);
   //vypíše "frantiskovec"
   console.log(prijmeni);
   //vypíše odpověď na základní otázku života, vesmíru a vůbec
   console.log(velikostBot);
}

Zkuste si. Vypadá to užitečně, že? Ale třpyt neimplikuje zlato, jak již zajisté víme.

With nepřehledný a zrádný

Představte si, že při čtení JavaScriptového kódu narazíte na následující pasáž:

with (neco) {
    olala = bubu;
}

Poznáte, co uvedený kód dělá? Stát se mohou 4 různé věci, v závislosti na tom, zda jsou olala a bubu vlastnostmi objektu neco.

//olala je vlastností neco, bubu nikoli
neco.olala = bubu;
//bubu je vlastností neco, olala nikoli
olala = neco.bubu;
//bubu i olala jsou vlastnostmi neco
neco.olala = neco.bubu;
//bubu i olala nejsou vlastnostmi neco
olala = bubu;

Vzhledem k dynamické povaze JavaScriptu nemůžete nijak snadno zaručit, že objekt bude mít vámi předpokládané vlastnosti. A pokud je nemá, může zapsaná hodnota snadno skončit v globálním oboru platnosti, což lehce způsobí obtížně odladitelné chyby. Také pokud čtete cízí (nebo vlastní, ale starý) kód a předpoklad existence vlastností není vyjádřen jinak (třeba v komentáři), budete mít nejspíš problém pochopit autorův záměr.

Žijte bez with

With do JavaScriptu bezpochyby nepatří, proto byl ve striktním módu ECMAScriptu 5 vyřazen. Ačkoliv lze dlouze diskutovat o zajímavých použitích této konstrukce, usnadníte si život, pokud se bez něj obejdete i vy.

V prvním díle jsem psal o deklaraci lokálních proměnných, klíčovém slovu var a globálním ‚scope‘, navázal jsem krátkou zmínkou o tom, že v JavaScriptu jsou lokální proměnné platné vždy v rámci celé funkce a nakonec jsem se minulý týden rozepsal o méně známé vlastnosti: variable hoisting.

Funkce jako hodnota

Asi jednou z nejhezčích vlastností JavaScriptu je, že se funkce chovají naprosto stejně jako jakýkoliv jiný referenční datový typ. Můžete je ukládat do proměnných, předávat jako parametr jiným funkcím a dokonce i vracet jako návratovou hodnotu. (V angličtině se používá termín first class object, který ale nemá s objekty ani třídami z OOP nic společného).

Předpokládám, že každý čtenář dokáže bezpochyby funkci deklarovat:

//třeba takto
function ahoj() {
   //....
}

//nebo takto
var ahoj = function() {
   //...
}


//i takto
var ahoj = function ahoj() {
   //...
}

//všechny tři varianty voláme stejně, oslovujeme dle nálady
ahoj();

Ve všech třech příkladech vznikne v aktuálním kontextu (oboru platnosti) proměnná s názvem ahoj odkazující na naši novou funkci.

Deklarace versus výraz

Abychom neměli život příliš jednoduchý, je mezi prvním výše uvedeným příkladem a jeho následovníky podstatný rozdíl. Z hlediska syntaxe JavaScriptu existují dvě konstrukce, které lze použít k vytvoření funkce: function declaration (deklarace) a function expression (výraz).

Zatímco deklarace má pouze jednu formu:

//deklarace
function ahoj(parametr, dalsiparametr) {
   //....
}

Výraz může nabývat rozličných tvarů, chutí i vůní:

//anonymní funkce přiřazená do proměnné
var ahoj = function(parametr, dalsiparametr) {
   //....
}
//pojmenovaná funkce přiřazená do proměnné
var ahoj = function nazdar(parametr, dalsiparametr) {
   //....
}

Jak interpret JavaScriptu (nebo třeba programátor) pozná, zda jde v konkrétním případě o deklaraci či výraz? Je potřeba mít na paměti, že název funkce je u deklarace povinný a u výrazu volitelný, takže jeho nepřítomnost nelze považovat za rozhodující. Rozhodující pravidlo by mohlo být formulováno třeba takto: je-li v daném kontextu očekávána hodnota (přiřazení do proměnné, návratová hodnota, ale i další) bude konstrukce zpracována jako výraz, jinak jako deklarace. Těžko představitelné? Lze použít i lehce zjednodušující pomůcku: začíná-li příkaz (statement) klíčovým slovem function jde o deklaraci, jinak o výraz.

Srovnejte:

function ahoj() {...} //vyhodnocena jako deklarace

(function ahoj() {...}) //vyhodnocena jako výraz

function() {...} //je vyhodnocována jako deklarace, pak je ale očekáváno povinné jméno => dojde k syntaktické chybě

return function() {...} //zde již je vyhodnocována jako výraz

new function() {...}; // operátor new aplikovaný na anonymní funkci, která je opět vyhodnocena jako výraz. Funkce poslouží jako konstruktor.

Deklarace funkce se vznášejí také, ale jinak

Podobně jako u deklarací proměnných dochází k „vznášení“ identifikátorů funkcí. Pokud stvoříte funkci pomocí výrazu, aplikuje se variable hoisting podle totožného principu jako u ostatních proměnných (což nás nijak nepřekvapí). Použijete-li ale deklaraci, probublá na začátek nadřazeného kontextu nejen identifikátor, ale i tělo (nebo chcete-li hodnota) funkce.

Takže následující ukázka:

function tulipan() {
    //... kód
    var ahoj = function(parametr, dalsiparametr) {
        console.log("ahoj");
    }
    //... kód
    function nazdar() {
        console.log("nazdar");
    }

}

Je interpretována nějak takto:

function tulipan() {
    var ahoj, nazdar = function nazdar() {
        console.log("nazdar");
    };

    //... kód
    ahoj = function(parametr, dalsiparametr) {
        console.log("ahoj");
    }
    //... kód
}

Můžete si zkusit následující příklad:

function tulipan() {
    console.log(typeof ahoj); //=> undefined
    console.log(typeof nazdar); //=> function;
    //ahoj(); //odkomentujte a dojde k chybě
    nazdar(); //=> "nazdar"

    var ahoj = function(parametr, dalsiparametr) {
        console.log("ahoj");
    }
    console.log(typeof ahoj); //=> "function"
    ahoj(); //=> "ahoj"

    function nazdar() {
        console.log("nazdar");
    }
}

tulipan();

Trable s bloky

V souvislosti s deklaracemi funkcí musím zmínit jednu z nekompatibilit mezi současnými interprety JavaScriptu. Z hlediska specifikace totiž nesmí být deklarace funkce zanořena v blocích podmínek, cyklů a podobně. Všechny implementace JavaScriptu ale takovou konstrukci akceptují a chovají se různě.

Vyzkoušejte si následující ukázku v různých prohlížečích (se zapnutou konzolí) a uvidíte, že některé vypíšou „nazdar“, jiné „ahoj“.

function tulipan() {

   if (true) {
       function ahoj() {
           console.log("ahoj");
       }
   } else {
       function ahoj() {
           console.log("nazdar");
       }
   }


   ahoj();
   //Chrome a IE vypíšou 'nazdar'
   //Firefox vypíše 'ahoj'
}

tulipan();

Používat deklarace?

Nejsilnější výhodou deklarací je možnost volat funkci dříve, než je v kódu uvedena (u výrazu sice proměnná díky hoistingu existuje, ale má hodnotu undefined). Jako další argument pro používání deklarací se často uvádí lepší ladění v debuggerech – díky tomu, že funkce jsou pojmenované. Pozorný čtenář si ale v příkladech zajisté všiml pojmenované funkce i ve výrazech.

//pojmenovaná funkce přirazená do proměnné
var ahoj = function nazdar(parametr, dalsiparametr) {
   //....
}

Tato konstrukce problém řeší, leč bohužel nefuguje úplně korektně v Internet Exploreru (pro podrobnější popis viz na konci odkázaný článek).

Při vší skromnosti si myslím, že deklarace funkce je v JavaScriptu omylem. Respektive záměrně, ale jen aby usnadnila tvorbu kódu programátorům přicházejícím od jiných jazyků, kde jsou na podobnou konstrukci zvyklí. Poměrně se vymyká základní myšlence práce s funkcemi v JavaScriptu a působí víc zmatení, než užitku.

Nestačí-li vám můj stručný popis problematiky, doporučuji zevrubné a asi nejlepší zpracování tématu od Juriye ‚kangax‘ Zaytseva: Named function expressions demystified.

Essential JavaScript And jQuery Design Patterns e-book o návrhových vzorech v JS zdarma ke stažení. Rozhodně doporučuji alespoň prolistovat.

Pragmatic Guide to JavaScript nadějně vypadající kniha o Javascriptu (zaznamenal jsem dobré reference). E-book za 13 dolarů a tento pátek ji lze koupit se 40% slevou (sleva by se měla vztahovat na celý sortiment http://pragprog.com)

HTML5 Canvas na serveru? Ale jistě!

Snippet jQuery plugin pro obarvení zdrojových kódů. Interně používá SHJS. Vypadá velice hezky.

Dust.js je sympatický šablonovací engine pro JavaScript (lze použít v prohlížeči, ale třeba i na serveru).

Mathjax je moc hezké knihovna pro zobrazení matematických výrazů (Latex, MathML) na webu. Nic originálního, ale řešení působí lépe než podobné nástroje, se kterými jsem se v minulosti potkal.

Zdvihám, zdviháš, zdviháme

Princip je jednoduchý: interpret javascriptu při zpracování těla funkce nalezne všechny identifikátory lokálních proměnných deklarovaných pomocí klíčového slova var, a „vyzdvihne“ je na začátek těla funkce (před jakýkoliv příkaz).

Takže následující kód:

function tulipan() {
    if (test()) {
        var promenna = 10;
        fanfan();
    }
    var hodnota = "malá";
    return "vysledek";
    var cislo = 1;
}

Je interpretován jako:

function tulipan() {
    var promenna, hodnota, cislo;
    if (test()) {
        promenna = 10;
        fanfan();
    }
    hodnota = "malá";
    return "vysledek";
    cislo = 1;
}

Proč je to důležité?

Nuže podívejme se na několik ukázek kódu, kde neznalost tohoto principu způsobí vývojaří přinejmenším zmatení.

Přístup ke globální proměnné (či proměnné z nadřazených oborů platnosti):

var hodnota = 20;
function delej() {
    console.log(hodnota);
    var hodnota = 6;
    console.log(hodnota);
}
delej();

Můžete si vyzkoušet, že první volání console.log vypíše undefined a ne 20, jak by mohl očekávat neznalec.

Podobně v následující ukázce bude hodnota proměnné baf uvnitr funcke tulipan vždy vyhodnocena jako „vychozi“.

var baf = 'fanfan';

function tulipan() {
  var baf = baf || 'vychozi';
  console.log(baf);
};

tulipan();

Vyzkoušejte si.

Doporučení na závěr

Běžným doporučením, na které můžete ohledně psaní kódu v JavaScriptu narazit, je právě používání jediného klíčového slova var hned na začátku funkce, kde uvedete všechny lokální proměnné. Pokud k JavaScriptu přijdete z jiného jazyka (jako třeba já z Javy), může to být zarážející. Důvodem je ale právě variable hoisting. Dodržování této rady vám může ušetřit pár nepříjemných záseků.

Příště navážu opět souvisejícím tématem, povíme si něco o deklaracích funkcí.

Většina problémů, na které při vývoji aplikace narazíme, je již dávno vyřešena a hotovou knihovnu (zabalenou v pěkné černé krabičce), stačí většinou jen vybrat a použít. Nemohu popřít že to má většinou smysl, obzvlášť jde-li o obchod. Díky hotovým řešením můžeme vyrobit a dodat produkt rychleji, levněji, což bezpochyby není špatně.

V extrémním případě se ale z programátora stává cvičená opička. Jeho denním chlebem je pak výběr, studium a lepení již hotových frameworků, knihoven a dalších udělátek.

Programujete-li ve svém volném čase, nebojte se dělat věci, které již udělali jiní. I když je uděláte hůř (či úplně špatně), máte alespoň příležitost poučit se z vlastních chyb. Z opravdových programátorských chyb, které učiníte při řešení jiných úloh, než je výběr jednoho z n frameworků. A pokud ve svém volném čase neprogramujete, měli byste začít.

(obrázek pochází od chrisjfry, licence cac by-nc-nd)

Oproti tomu ve zmiňované Javě je platnost omezena na blok kódu.

// Java
public void funkce() {
    int  i = 10;
    for (int i =0; i < 15; i++) {
        System.out.println("Uvnitr bloku i: " + i);
    }
    System.out.println("Vne bloku i: " + i);

}

V uvedném kódu překryje proměnná i deklarovaná v záhlaví cyklu vnější proměnnou i.

V Javascriptu ale následující zápis postrádá smysl:

// JavaScript
function funkce() {
    var i = 10;

    for (var i = 0; i < 6; i++) {
        //neco...
    }

    for (var i = 0; i < 68; i++) {
        //neco jineho
    }

}

Proměnná i bude prostě jenom jedna, bez ohledu na počet použití klíčového slova var.

S oborem platnosti na úrovni funkce silně souvisí další zajímavá vlastnost, nazývaná „variable hoisting“. Proberu ji příště.

K deklaraci proměnné v Javascriptu slouží klíčové slovo var. Často se (a mylně) uvádí, že je jeho použití nepovinné. Ve většině případů má ale deklarace proměnné bez použití var jiný význam.

Vezměme si následující příklad:

function test() {
    var promenna = 10;
    console.log(promenna); //predpokladam dostupnou konzoli - tedy firefox+firebug ci jakukoliv prohlizec s rozumnymi vyvojarskymi nastroji
}

test();
console.log(promenna); //reference error

Zde je korektně deklarována lokální proměnná. Vyzkoušejte si..

Pokud ale klíčové slovo var záměrně či omylem vynecháme, Javascript deklaruje proměnnou v globálním oboru platnosti (alespoň v následujícím příkladu).

function test() {
    promenna = 10;
    console.log(promenna)
}

test();
console.log(promenna); //vypise 10

Vyzkoušejte si..

Tedy přesněji řečeno:

• při zápisu do proměnné v javascriptu interpret zjistí, zda požadovaná proměnná existuje. Pokud není deklarována jako lokální či parametr, hledá ji v celém „scope chain“ (česky by se asi dalo přeložit jako „zřetězení oborů platnosti“). Tomuto tématu (stejně jako uzávěrům) se ale budu věnovat někdy příště.
• pokud proměnnou někde nalezne, zapíše do ní přiřazovanou hodnotu
• pokud ji nenalezne, vytvoří ji v globálním oboru platnosti a zapíše do ní hodnotu.

Je to opravdu tak zlé?

Ano.

• Pokud nepoužíváte či zapomínáte var, zasviníte si globální obor platnosti spoustou proměnných, které tam nepatří. Obecně je za správnou považována snaha minimalizovat množství globálně platných proměnných, které kód vytváří, na jednu či méně.
• Snadno mohou vzniknout chyby, které těžko odhalíte:

function cykluj() {
   for (i = 0; i < 10; i++) {
       cyklujvic();
   }
}

function cyklujvic() {
   for (i = 0; i < 5; i++) {
       console.log(i);
   }
}

cykluj();

Vidíte průšvih? Obě funkce pracují se stejnou globální proměnnou. Nejen, že se kód bude chovat jinak, než bylo nejspíš zamýšleno, ale dokonce skončí v nekonečné smyčce (funkce cyklujvic vždy přenastaví proměnnou i a skončí na hodnotě 5, tudíž funkce cykluj nikdy nedojde na konečnou hodnotu). A teď si představte, že dané funkce jsou rozmístěny ve dvou odlišných souborech v jiných částech projektu.

• můžete se omylem dostat do konfliktu s vlastnostmi objektu window (Globální proměnné jsou totiž vlastnostmi tzv. globálního objektu, kterým je v prohlížeči právě window, v node.js je jím objekt global)
• tuto situaci ještě komplikuje Internet Explorer, který registruje pro elementy v DOM, které mají nastaven atribut id vlastnost objektu window (tedy globální proměnnou). Pokud se vám pak sejde stejné jméno proměnné jako id nějakého elementu a zapomenete na var, dojde k chybě.

Doporučení na závěr

Používejte klíčové slovo var vždy. Zvolte si vývojové prostředí, které vás na nedeklarovanou proměnnou umí upozornit. Používejte http://jslint.com.

A sledujte RSS nebo twitter, jelikož již brzy vám povím o dalších věcech, které byste o Javascriptu měli vědět.

JavaScript je mezi programovacími jazyky výjimečný tím, že většina z nás k němu přijde bez jakýchkoliv znalostí. Syntaxe je podobná jazykům vycházejícím z C a za pomoci (většinou mizerných) tutoriálů na internetu dokáže spatlat „nějak“ funkční kus kódu každý. Mnohdy si člověk vystačí bez pořádných znalostí jazyka poměrně dlouho a než se naděje, tvoří už svojí první velkou Javascriptovou věc. A pak to může dost bolet. V JavaScriptu (podobně jako v ostatních jazycích) existuje mnoho temných zákoutí, jejichž neznalost velice zkomplikuje vývojářův život. A naopak má svoje silné stránky, jejichž pochopení mu může pomoci dosáhnout výsledků rychleji, lépe a dokonce zábavněji ;-) . Ostatně, už jsem o tom nedávno psal.

Nebudu se zde zabývat základními konstrukcemi jazyka, jejichž popis se válí na každém internetovém rohu. Chci se spíš soustředit a informace, které bývají (bohužel) často v materiálech pro začátečníky opomíjeny nebo dokonce(!) uváděny špatně. Obvyjkle programátoři neznají ani po mnoha letech občasného užívání Javascriptových pilulek, nebo jim úplně nerozumí.

Seriál má vlastní štítek a také vlastní RSS.

Držte si čepice, přístí týden začínáme!

Aktualizace: zatím vyšlo

Zatím v seriálu vyšly následující články:

1. proměnná a globální obor platnosti
2. Javascript nemá ‚block-level scope‘
3. variable hoisting
4. deklarace funkce a funkce jako výraz
5. with je zlý čaroděj

Aneb co mě zaujalo v posledním týdnu? Nezávisle na tom, zda jde o aktuální novinky, nebo jsem objevil ameriku :)

The Noded je nový podcast o node.js. Natolik nový, že tvůrci stále nedokázali stvořit web. První díl je ale ke stažení a můžete také sledovat @thenoded na twitteru. Alespoň v prvním dílu se podcast hojně věnuje NodeCore, takže varuji před spoustou „céčkovských“ termínů a témat.

Firefox 4 bude obsahovat jednoduchou vývojářskou konzoli. Vývojáří rozšíření Firebug reagují: „Simply working harder to compete is equal to giving up. Instead we have to raise the bar!“ Držím palce.

Společnost Sencha zveřejnila developer preview aplikace Sencha Animator. Mělo by jít o CSS3 alternativu k Flashi. Vypadá velice zajímavě. Jen škoda, že se mi ji nepodařilo ani spustit.

Na blogu DailyJs vychází již od února seriál Let's Make a Framework. Autor postupně prochází různé kroky tvorby jednoduchého javascriptového frameworku od architektury, přes implementaci selektorů, obsluhu událostí až po podporu pluginů. Vznikající framework samozřejmě nemá být konkurencí existujícím hvězdám, ale jen učební pomůckou. Pokud je pro vás fungování vašeho oblíbeného JS frameworku magií a nechce s vám hned studovat jeho kód, doporučuji projít aspoň tento seriál.

Podpora pri indexaci AJAXových aplikací od Google a video záznam z přednášky Using Node.js and YUI 3 na YUI Theater spolu souvisí. Kdo pozná jak, má u mě zmrzlinu. :)

Zkusili jste někdy do vašeho oblíbeného vyhledávače zadat termín ‚javascript‘? Nebo nějaké slovní spojení týkající se dokumentaci či učení javascriptu? Na prvních pozicích se objevují stránky jako w3schools.com, javascript.com. Prostě staré a nepříliš kvalitní zdroje oblepené reklamou.

Účastníci nedávné konference JSConf v Berlíně se rozhodli, že je potřeba se současnou situací něco udělat. Tak vzniklo „hnutí“ Promote.js. Stačí navštívit uvedenou stránku, zkopírovat náhodně vygenerovaný kód obrázku s odkazem a vložit ho do svého webu, který by se ideálně měl alespoň trochu zabývat javascriptem. Výsledek můžete vidět v pravém sloupci mého zápisníku.

Odkazy jsou náhodně vybírané z databáze a cílí i na konrétní pojmy (javascript array, object a podobně). Z počátku směřovaly všechny vygenerované odkazy na stránky Mozzila Developer Center, které obsahují poměrně pěknou dokumentaci jazyka a souvisejících témat. Postupně přibývají další zdroje (můžete sami nějaký navrhnout pomocí kontaktů na stránce). Všiml jsem si například odkazů na některé obecně javascriptové články na blogu howtonode.

A funguje to? Zatím částečně. Průběžné výsledky včetně grafu vývoje naleznete na stránce arewefirstyet.com. A abych nezapomněl, @promotejs je samozřejmě i na twitteru.

Tak šup s odkazem na web!