JavaScript a webové aplikace

původně byl web navržen pro sdílení statických dokumentů

dnes v něm lze používat různé aplikace

web je nová platforma pro provozování aplikací

globální dosah – aplikaci mohou využívat uživatelé z celého světa

minimalizace nákladů na správu aplikací – vše je uloženo na webovém serveru, není potřeba instalovat klientskou část aplikace, tu zajistí standardní prohlížeč

ovládání aplikací nedosahuje pohodlí a interaktivity nativních klientských aplikací určených pro konkrétní operační systém

webové vývojové nástroje zatím většinou nedosahují kvalit prostředí (IDE) pro vývoj klasických klientských aplikací

je potřeba pochopit a naučit se používat několik nových technologií

výkonná část aplikace běží přímo v prohlížeči

výkonná část aplikace běží na serveru

nejčastěji se dnes používá kombinace obou technologií

zobrazovat HTML stránky

používat v HTML stránce formuláře (obdoba dialogových oken)

odeslat data vyplněná do formuláře pomocí protokolu HTTP zpět serveru

bez formulářů by webové aplikace nemohly vůbec existovat

spouštět kód v jazyce JavaScript

nefunguje v některých hodně starých nebo speciálních prohlížečích

složité aplikace mohou mít na slabším HW problém s výkonem

špatně použitý JavaScript může stránku udělat nepřístupnou, nepoužitelnou a obtížněji indexovatelnou pro vyhledávače

čistě informační webové stránky by v ideálním případě měly fungovat i s vypnutým JavaScriptem

při použití horkých novinek je potřeba rozmyslet a ošetřit, co se staršími prohlížeči

přímo do HTML stránky lze zařadit programový kód

program může reagovat na události vyvolané uživatelem

program může manipulovat s dokumentem a prohlížečem

teoreticky lze použít libovolný jazyk, ale v praxi se dnes používá pouze JavaScript

pro zvládnutí klientského skriptování musíme znát: jazyk JavaScript, způsob jeho vložení do stránky HTML, objektový model dokumentu (DOM) a webová API

skript vložený přímo do HTML

<script>
  …příkazy…
</script>

skript načtený z externího souboru

<script src="…adresa skriptu…">
</script>

skripty prováděné v okamžiku načtení stránky většinou jen nadefinují funkce, které se pak vyvolávají jako odezva na reakci uživatele

dokud se skript nenačte a neprovede, nezpracovávají se následující části kódu HTML

každý element na stránce může být cílem různých událostí vyvolaných uživatelem nebo stavem prohlížeče

obslužný kód pro jednotlivé události lze zadat do atributu s názvem odpovídajícím události

jako hodnota atributu se uvádí kód, který se má provést

<tag událost="obslužný kód">…</tag>

<button onclick="alert('Ahoj')">Pozdrav</button>

pomocí událostí lze vytvářet interaktivní stránky – reagují na chování uživatele

přímo v odpovídajícím HTML atributu

<element onclick="doSomething()">

inicializace pomocí skriptu přiřazením do odpovídající vlastnosti

element.onclick = doSomething();

přidání pomocí funkce addEventListener()

element.addEventListener("click", doSomething());

využití pomocných knihoven, např. jQuery

element.click(doSomething());

jednoduchý skriptovací jazyk se syntaxí vycházející z Javy a C

netypované proměnné, podmínky, cykly, funkce, prototypové objekty

postupně existovalo několik verzí; prohlížeče nabízely různé své varianty (JavaScript/JScript)

standardizovaná verze JavaScriptu se jmenuje ECMAScript

skupina objektů, které zpřístupňují objekty stránky a prohlížeč

základní objekt, který umožňuje přístup k prohlížeči se jmenuje window, takže jeho jméno můžeme při zápisu cesty o objektu obvykle vynechat

v rámci window jsou pak dostupné další objekty:

při přístupu k nějaké části dokumentu se objekty oddělují tečkou

location.href
navigator.appName
document.documentElement.nodeName

objekt document strukturou vnořených objektů kopíruje strukturu elementů na stránce a umožňuje jejich čtení a modifikaci, včetně práce se styly atd.

jednotlivým elementům odpovídají uzly (node) ve stromu DOM

kompletní popis všech objektů, metod a vlastností je definován

nodeName – jméno elementu (velkými písmeny)

nodeType – typ uzlu (element, komentář, text, …)

localName/namespaceURI – jméno a jmenný prostor, pokud potřebujeme

innerHTML – obsah elementu jako HTML kód

textContent – obsah elementu jako prostý text

className – třídy elementu

style – styl elementu

parentNode/childNodes – primitivní způsob průchodu

document.getElementById(id) – vrátí element s daným ID

document.getElementsByClassName(třída) – vrátí elementy s danou třídou

document.getElementsByTagName(jméno elementu) – vrátí elementy s daným jménem

document.querySelect(selektor) – vrátí první element vyhovující danému selektoru

document.querySelectAll(selektor) – vrátí všechny element vyhovující danému selektoru

výše uvedené metody lze volat i na konkrétním elementu a pak se prohledává jen podstrom celého dokumentu

modifikace pomocí vlastnosti innerHTML

přímá manipulace se stromem pomocí speciálních metod:

z historických důvodů je v DOM mnoho podivností

některé atributy se mapují na vlastnosti a při interakci s prohlížečem se pak již jen mění vlastnosti, nikoliv původní atributy v DOM (např. pro formuláře)

metody vracející více elementů používají podivné struktury HTMLCollection a NodeList

současné aplikace vyžadují stále složitější klientské skripty

mezi prohlížeči pořád existují drobné rozdíly a jejich detekování a obcházení je pracné

řešení nabízejí tzv. javascriptové frameworky

díky postupnému upřesňování standardů a jejich implementacích v prohlížečích potřeba frameworků překlenujících rozdíly mezi prohlížeči naštěstí postupně mizí

M. Haverbeke: Eloquent Javascript