JavaScript

1. TNPW2 2013/2014
Mgr. Lukáš Vacek
lukas.vacek@uhk.cz
JavaScript

2. Agenda
• JavaScript?
• Zdrojové kódy v JavaScriptu
• Syntaxe, metody, vlastní funkce
• Knihovny (frameworky)
• Nejčastější použití JavaScriptu
• Internet, doporučená literatura
2

3. Co je JavaScript? 3
• JavaScript je interpretovatelný (neprobíhá kompilování!) programovací jazyk
se základními objektově orientovanými vlastnostmi
• V polovině 90. let jej vytvořila firma Netscape a jeho interpret (běhové prostředí)
je standardní součástí webových prohlížečů
• Existuje norma ECMAScript pro použití JavaScriptu a jeho odvozenin (JScript od MS…)
• Aktuální verze ECMAScript Edition 5.1 (6/2011)
• JavaScript umožňuje vložit do webové stránky proveditelný obsah, který na straně
klienta (prohlížeče) může zvýšit interakci s uživatelem
• JavaScript je označován jako tzv. assembler webu
• Kombinace HTML5 + CSS3 + JavaScript je aktuálním trendem při návrhu UI aplikací
• JavaScript je ale možné využít i na straně webového serveru (Node.js apod.)!
• http://cs.wikipedia.org/wiki/JavaScript
• http://en.wikipedia.org/wiki/ECMAScript#Dialects
• http://en.wikipedia.org/wiki/JavaScript_engine

4. Zdrojové kódy v JavaScriptu

5. Vložení JavaScriptu do zdrojového kódu 5
• Interní skript
<script type="text/javascript">
/* <![CDATA[ */
kód skriptu
/* ]]> */
</script>
• Externí skript (knihovny)
<script type="text/javascript" src="mujskript-1.2.js"></script>
• Externí skripty je vhodné verzovat, vyhnete se problémům s HTTP cache!
• http://jsfiddle.net/ zkoušečka HTML + JavaScript

6. Práce se zdrojovým kódem v JavaScriptu 6
• Rozsáhlejší aplikační logika se ukládá do samostatných souborů s příponou *.js mimo
zdrojový (X)HTML kód stránky
• Zdrojový kód lze vizuálně strukturovat pro větší přehlednost, je možné jej komprimovat
(tzv. minifikace) v okamžiku nasazení na produkčním prostředí webového serveru
• http://dean.edwards.name/packer/
• http://yui.2clics.net/
• V řadě případů je vhodné použití i tzv. bundlování – sloučení (spojení) zdrojového kódu
z více *.js souborů do jednoho, který se načítá v aplikaci
• Debugování zdrojového kódu v JavaScriptu dnes není problém, existuje celá řada
vývojových prostředí a nástrojů, které to umožňují
• https://addons.mozilla.org/en-US/firefox/addon/1843 (Firebug pro Mozilla Firefox)
• http://code.google.com/p/jsdt/
• http://www.myeclipseide.com/module-htmlpages-display-pid-57.html

7. Dokumentování zdrojového kódu v JSDoc 7
• V rozsáhlých zdrojových kódech používejte komentáře!
• PROČ? Kvůli srozumitelnosti 
• Možné budoucí opravy/úpravy kódu, využití knihoven apod.
• Pro formátování komentářů pro dokumentaci existují pravidla, např. JSDoc syntaxe
<script type="text/javascript">
/* <![CDATA[ */
/**
* @tag_name description
*/
JavaScript Code…
/* ]]> */
</script>
• http://en.wikipedia.org/wiki/JSDoc

8. Syntaxe, metody, vlastní funkce

9. Syntaxe jazyka, metody, vlákna 9
• Jazyk JavaScript vychází ze syntaxe jazyka C (C++, Java, C#, PHP…)
• Jednotlivé příkazy JavaScriptu se oddělují ";"
• Hlavním rysem JavaScriptu je používání tzv. metod
• Metoda je objektově orientovaný termín pro funkci nebo proceduru – část zdrojového
kódu provádějící určitou činnost, nejčastěji řízení obsahu webových stránek/formulářů
• Metody jsou přímo součástí JavaScriptu, další je možné podle potřeby vytvořit
document.write("Text... "); // předdefinovaná metoda
mojeFunkce(); // použití vytvořené fce
• Aktuálně podporují webové prohlížeče JavaScript pouze v rámci jednoho vlákna.
Výhledově bude implementována podpora pro více vláken…
• http://html456.blogspot.com/2008/08/na-web-prijde-javascript-s-vice-vlakny.html
• http://stackoverflow.com/questions/39879/why-doesnt-javascript-support-multithreading (vysvětlení)

10. Vlastní funkce 10
• Funkce v JavaScriptu jsou pojmenované části programového kódu, které lze vyvolávat
podle potřeby (i opakovaně)
• Výstupem funkce je provedení naprogramované činnost nebo vrácení hodnoty
• Vlastní funkci je nutné nadefinovat před jejím prvním použitím!
<script type="text/javascript">
/* <![CDATA[ */
/**
* @return {boolean} Is the browser IE?
*/
function IsMSIE() {
var isMSIE = /*@cc_on!@*/false;
return isMSIE;
}
/* ]]> */
</script>
• http://met.blog.root.cz/2007/03/29/nejkratsi-detekce-internet-exploreru-na-svete/

11. Knihovny, frameworky

12. Knihovny (frameworky) 12
• Existuje celá řada nejrůznějších JavaScript knihoven, které umožňují vývojářům velmi
efektivním způsobem rozšířit funkcionalitu webových stránek (i pro mobilní web!)
• K nabízené funkcionalitě těchto knihoven patří např. procházení a manipulace s DOM
stránky, zpracování událostí v prohlížeči, práce s obrázky, načítání dat ze serveru,
podpora drag&drop, práce s cookies apod.
• Mezi nejpoužívanější knihovny patří např. JQuery, Prototype, script.aculo.us, mootools,
Yahoo! UI (YUI), Dojo a další
• http://jquery.com/
• http://prototypejs.org/
• http://script.aculo.us/
• http://dojotoolkit.org/
• http://developer.yahoo.com/yui/
• http://www.mootools.net/
• http://en.wikipedia.org/wiki/AngularJS (MVC pro JS)
• http://code.google.com/intl/cs/apis/libraries/

13. jQuery 13
• Velikostí malá (jeden soubor, tzv. minified verze 1.11.x/2.1.x má cca 30 KB!) a přitom
velmi kompaktní JavaScript knihovna poskytující interaktivitu mezi JavaScriptem
a (X)HTML v okně webového prohlížeče
• Původním autorem je John Resig (akce BarCamp, 2006)
• Jde o svobodný software pod licencí MIT a GPL
• Je např. součástí frameworků Microsoft ASP.NET AJAX, Spring na platformě Java nebo
Nokia jQuery na mobilech
• Základní knihovnu jQuery je možné rozšířit pomocí pluginů
• http://jquery.com/
• http://citron.blueboard.cz/clanek-331-jquery-pro-zacatecniky-zaklady.html
• http://jquery.jslab.net/zkousecka/
• Použití jQuery je rychlé, snadné a velmi efektivní
• Nic vám nebrání v napsání vlastního pluginu/knihovny

14. Načtení jQuery ve zdrojovém kódu webové stránky 14
• Často je vybraná knihovna uložena na stejném webovém serveru jako webové stránky
• Je doporučeno využití existujících souborů z CDN (Content Delivery Network)
např. jQuery z Google API serveru nebo jQuery CDN…
• http://code.jquery.com/jquery-1.11.0.min.js (aktuální verze, únor 2014)
• PROČ? Protože cache a datový traffic 
<script src="http://code.jquery.com/jquery-1.10.2.min.js"
type="text/javascript"></script>
<script type="text/javascript">
/* <![CDATA[ */
$(document).ready(function(){
// kód bude iniciován až po načtení celé stránky
});
/* ]]> */
</script>
• Je vhodné iniciovat aplikační kód až po načtení celé stránky a všech prvků!

15. Programovací jazyky využívající JavaScript 15
• PŘIPOMÍNKA! JavaScript je tzv. assembler webu 
• Některé nové programovací jazyky se pokoušejí odstranit nedostatky JavaScriptu
• Výhodou je, že se umějí se do zdrojového JS kódu zkompilovat
• Označují se jako source-to-source compiler, transcompiler nebo transpiler
• TypeScript (Open source, Microsoft)
• http://en.wikipedia.org/wiki/TypeScript
• http://devblog.cz/2012/10/typescript-jazyk-na-ktery-jsem-cekal/
• Dart (Google)
• http://en.wikipedia.org/wiki/Dart_(programming_language)
• Tady byla ta kompilace trochu divočejší 
• Coffee Script
• Nejstarší a nejrozšířenější
• http://en.wikipedia.org/wiki/CoffeeScript
• http://www.zdrojak.cz/clanky/coffeescript-radne-oslazeny-javascript/

16. Nejčastější použití JavaScriptu

17. Nejčastější použití JavaScriptu 17
• Práce s DOM, selektory, zpracování událostí
• Ovlivnění výstupu v prohlížeči
• Zobrazování dialogových oken
• Řízení prohlížeče (např. pohyb v historii, načtení dokumentu, refresh)
• Spolupráce s CSS
• Validace a zpracování formulářů
• Práce s obrázky – preloading obrázků, obrázkové galerie
• Práce s okny
• Třídění dat podle sloupců v tabulkách, datové filtry
• Grafy
• Bookmarklety
• Dynamický web (změna obsahu skriptem, AJAX)
• Na straně serveru (Node.js)

18. Práce s DOM, selektory 18
• Výběr prvků (DOM objektů) na stránce, zpracování událostí a manipulace s vlastnostmi
• DOM stránky lze v JavaScriptu upravovat i po jejím načtení!
• Frameworky manipulaci s DOM výrazně vylepšují proti základnímu JavaScriptu!
// výběr prvku podle ID v JavaScriptu, na validní stránce je 1!
document.getElementById('id_prvku')
// výběr prvků podle typu elementu v JavaScriptu
document.getElementsByTagName('nazev_tagu')
// výběr prvků dané třídy v JavaScriptu
document.getElementsByClassName('nazev_tridy') Až vyšší verze JS!
// výběr prvku podle ID v jQuery
$('#id_prvku')
// výběr prvků podle typu elementu v jQuery
$('nazev_tagu')
// výběr prvků dané třídy v jQuery
$('.nazev_tridy')
03-01-dom.html

19. Zpracování událostí na stránce, vlastnosti prvků 19
• Pro manipulaci s vlastnostmi a událostmi prvků se používá tečková konvence!
• Některé události detekované v prohlížeči: kliknutí na prvek, fokus, submit (odeslání
formuláře), aktuální hodnota…
// použití metody onmouseover u obrázku
<img src="img_01.gif" id="o1" onmouseover=
"document.getElementById('o1').src='img_02.gif'" />
• jQuery využívá při výběru prvků s nějakým stavem selektory s dvojtečkou (např. :first,
:last, :selected, :checked)
• Pro načtení návratové hodnoty nalezeného prvku v jQuery se používá metoda .val()
// použití metody val() pro načtení vybrané hodnoty z combo prvku
var hodnota = $("#combo1 option:selected").val();
03-02-udalosti.html

20. Ovlivnění výstupu v prohlížeči 20
• Obsah webové stránky je možné ovlivnit na straně klienta (v prohlížeči)
• Při načítání stránky – metodou write() objektu Document,
• Kdykoliv – změnou vlastnosti innerHTML u vybraného elementu, nebo html()
a text() v jQuery.
• Oba způsoby umožňují doplnit na stránku libovolný obsah, který se může podle potřeby
měnit, např. datum, text v odstavci, nové elementy apod.
// výpis řetězce, proměnné, hodnoty funkce v základním JavaScriptu
document.write("nějaký text... ");
document.write(mojePromenna);
document.write(Date());
var zmena = document.getElementById("myID");
zmena.innerHTML = "<strong>nějaký text</strong> s html elementy";
// jQuery
$("#myID").html("<strong>další text</strong> s html elementy");
$("#myID").text("prostý text bez html elementů");
03-03-vystup.html

21. Generovaný výstup v JS, webové standardy, přístupnost 21
• Generování (X)HTML kódu z vizuálních komponent vývojového prostředí je trend!
• Bohužel, tento dynamicky generovaný kód je velmi často nevalidní! Je to chyba!
• Berte v úvahu, že pro výstup generovaný v JavaScriptu platí stejná pravidla jako pro
zdrojový kód, který máte připravený na webovém serveru předem
• Nezapomeňte na přístupnost a použitelnost výstupu!
• JavaScript byl z tohoto hlediska donedávna zatracovanou technologií, ale přístup
odborníků se začíná měnit
• http://zdrojak.root.cz/clanky/tak-nam-zpristupnili-javascript/
• http://www.w3.org/TR/WCAG20/

22. Dialogová okna 22
• K zobrazení dialogového okna s určenou zprávou nebo k zadání vstupu od uživatele
se v základním JS používají funkce alert() resp. prompt()
• Jedná se o metody základního objektu Window
// použití metody window.alert()
<input type="button" value="Otevři dialogové okno"
onclick="window.alert('Ahoj...')" />
// použití metody window.prompt()
x = window.prompt("Zadej svoje jméno", "");
document.write("Tvoje jméno je " + x);
• Nebo použít framework (např. jQuery), který nabízí mnohem větší možnosti!
• http://docs.jquery.com/UI/Dialog
• Současným trendem jsou tzv. Single Page Apps

23. Řízení prohlížeče (History, Location) 23
• Objekt History umožňuje pohyb vpřed a zpět uživatelskou historií prohlížeče
• Pozor na AJAX aplikace a práci s historií! Používají se tzv. #hashtag a pluginy, např.
• http://benalman.com/projects/jquery-bbq-plugin/
• https://github.com/Panmind/jquery-ajax-nav
history.back(); // pohyb v historii zpět
history.forward(); // pohyb v historii vpřed
history.go(-3); // pohyb v historii o daný počet kroků
…
• Objekt Location reprezentuje URL v daném okně aktuálně zobrazeného dokumentu
// načtení dokumentu z dané adresy
location.href = "url";
// opětovné nahrání aktuálního dokumentu
location.reload();

24. Spolupráce s CSS 24
• JavaScript nabízí poměrně slušnou podporu pro přístup k jednotlivým elementům
stránky a umožňuje nastavovat jejich CSS vlastnosti
• Nezapomeňte! K jednotlivým elementům na stránce se nejlépe přistupuje přes jejich id!
• V základním JS je manipulace s CSS vlastnostmi poněkud nepřehledná , JS frameworky
(např. jQuery) jsou na tom mnohem lépe 
// Změna CSS vlastnosti v základním JavaScriptu
document.getElementById(#id).style.backgroundColor='red';
• jQuery používá pro práci s CSS vlastnost .css()
$('#test').css("color","blue");
03-04-css.html

25. CSS3 v JavaScriptu 25
• CSS3 má problematickou implementaci (zlepšuje se) v aktuálně používaných prohlížečích
• Nepodporu některých CSS3 (a HTML5) vlastností ve starších prohlížečích lze obejít
pomocí tzv. polyfill knihoven, např. Modernizr (detekce 150+), HTML5 Shiv (podpora)
• http://zdrojak.root.cz/clanky/javascriptareni-shim-fallback-polyfill/
• https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-browser-Polyfills

26. Validace a zpracování formulářů 26
• Při použití (X)HTML formuláře na stránce je vhodné před odesláním dat provést kontrolu
správnosti vyplnění jednotlivých položek formuláře uživatelem
• Identifikace jednotlivých prvků formuláře se nejčastěji provádí pomocí jejich id, je
možné použít i pole formulářů a prvků
document.getElementById('id_elementu').vlastnost
document.forms[0].elements[2].vlastnost
document.forms[0].id_elementu.vlastnost
• Pro jQuery existuje velmi propracovaný plugin Validation, který kromě běžných
validačních funkcí nabízí i podporu lokalizovaných chybových hlášek
• http://bassistance.de/jquery-plugins/jquery-plugin-validation/
• Jednoduchý český návod
03-05-formular.html

27. Práce s obrázky – preloading obrázků (trocha historie) 27
• V JavaScriptu je možné pracovat s jednotlivými obrázky na stránce a některé vlastnosti
obrázků měnit za chodu skriptu
• Někdy (např. při použití animovaného obrázkového menu) je vhodné předem (nejlépe
v okamžiku načítání stránky) načíst obrázky do cache prohlížeče, ale zobrazit je až
později, když jsou potřeba (z cache prohlížeče se pak rychleji načítají)
// preload obrázku JavaScriptem, obvykle fce v události onload
elementu body
var obr1 = new Image();
obr1.src = "flag1.jpg";
• Existuje alternativní řešení bez nutnosti preloadu obrázků
• http://www.wellstyled.com/css-nopreload-rollovers.html

28. Práce s obrázky – obrázkové galerie 28
• Běžné řešení >> po kliknutí na náhled vybraného obrázku na webové stránce je tento
zobrazen ve své originální (tj. větší) velikosti ve stávajícím nebo novém okně prohlížeče
• Alternativní řešení >> velmi elegantní je zobrazování obrázků ve stávající stránce
s využitím knihoven JavaScriptu
• http://www.huddletogether.com/projects/lightbox2/ (Lightbox)
• http://plugins.jquery.com/tag/lightbox/
• http://webdeveloperplus.com/jquery/21-brilliant-jquery-image-galleryslideshow-plugins/

29. Práce s okny 29
• V některých případech je potřeba otevírat stránky v novém okně (nedoporučuje se*)
• Vzhledem k tomu, že v XHTML 1.0 Strict není povolen atribut target, provádí se to
pomocí JavaScriptu
• Při použití JavaScriptu je třeba brát v úvahu možnost vypnutého skriptování na straně
klienta a tuto možnost ošetřit (negativní/pozitivní politika)!
JavaScript: function winopen(url){
var win = window.open(url,'okno1','width=400,height=340');
return false;}
HTML: <a href="http://www.uhk.cz" onclick="return winopen(this.href)">okno</a>
jQuery: $(document).ready(function(){ $('a[rel="external"]').click( function() {
window.open( $(this).attr('href') ); return false; }); });
jQuery: $(document).ready(function() { $('a[rel="external"]').attr('target',
'_blank'); });
HTML: <a href="http://www.google.com" rel="external">Google</a>
03-06-odkazy.html

30. Třídění tabulkových dat, datové filtry 30
• Pomocí JavaScriptu lze data v tabulce na straně klienta (prohlížeče) jednoduše třídit
nebo filtrovat, a to bez nutnosti jejich opakovaného načítání ze serveru (databáze)
při aktualizaci zobrazení
• Třídit nebo filtrovat lze data podle jednoduchých datových typů – číslo, řetězec, datum,
měna apod.
• Existují hotová řešení (knihovny), které můžete použít!
• http://tablesorter.com/docs/ (jQuery Tablesorter)
• http://www.datatables.net/ (jQuery DataTables)
• http://www.webdesignbooth.com/15-great-jquery-plugins-for-better-table-manipulation/
03-07-trideni.html – pomocí jQuery DataTables

31. Grafy 31
• Pro vkládání grafů na webové stránky se obvykle používají obrázky generované na
straně serveru, méně častěji potom Flash nebo JavaScript na straně klienta
• Pro vytváření grafů v JavaScriptu existuje několik knihoven, obvykle používají canvas
• Fungují ve všech nejrozšířenějších prohlížečích!
• http://www.flotcharts.org/ ( Flot plugin pro jQuery)
• http://bluff.jcoglan.com/ (Bluff je port Ruby knihovny Gruff)

32. Bookmarklety 32
• Bookmarklet je kód v JavaScriptu uložený v oblíbené záložce (bookmark)
• Místo běžné URL adresy obsahuje jeden nebo více příkazů JavaScriptu, které vykonávají
nějakou konkrétní činnost, která původně na stránce nebyla (zvětšení písma, podtržení
odkazů apod.)… funkcionalitu si doplňuje uživatel, nikoliv vyvývojář!
• Na Internetu je volně k dispozici velké množství bookmarkletů
javascript:příkaz;
javascript:resizeTo(800,600) // změna velikosti okna
• http://bookmarklets.com/tools/categor.html

33. Dynamický web, AJAX 33
• Reakce na události vyvolané uživatelem na straně klienta se posílají přes protokol HTTP
ke zpracování na server a stránka obdrží odpověď
• Tato odpověď ze serveru následně může změnit stav nějakého prvku na stránce nebo se
dynamicky vytvoří nový element
• Ve výsledku se tedy (většinou) nekoná reload celé stránky
• Pro vzdálené volání metod formou výměny XML dat s pevnou strukturou se ustálil pojem
AJAX (Asynchronous JavaScript and XML)
• AJAX nejčastěji používá protokol XML–RPC (využívá HTTP) a třídu XmlHttpRequest
• Komunikace s využitím AJAXu nemusí být asynchronní a data nemusí být přenášena pouze
pomocí XML (textový řetězec, stream, binární data)
• Používají se různé návrhové vzory a standardy (JSON apod.), v poslední době se diskutuje o tzv.
šablonovacích systémech pro oddělení aplikačních dat a jejich vizuální prezentace
• Bližší informace k AJAXu a spol. budou v přednášce o aktuálních trendech na webu

34. JavaScript na serveru (Node.js) 34
• Už ve druhé polovině 90. let se JavaScript používal na straně serveru
(technologie ASP od fy Microsoft umožňovala kromě VB Scriptu použít i JScript)
• „Node.js je „evented I/O framework for V8“, což si můžeme volně představit jako engine V8,
rozšířený o funkce, které umožňují prováděným skriptům přistupovat k souborům či síťovým
funkcím. Což v praxi znamená, že můžeme vytvořit server, který „naslouchá“ na určeném portu
téměř stejným způsobem, jakým vytváříme například obslužné metody pro události v prohlížeči.“
– Martin Malý (Zdroják)
• http://en.wikipedia.org/wiki/Nodejs
• http://en.wikipedia.org/wiki/CommonJS
• http://geddyjs.org/ (Node.js framework)
• http://www.zdrojak.cz/serialy/node-js-s-javascriptem-na-serveru/ (seriál)
• Populární novinka, ale s některými technologickými omezeními! (např. vlákna)

35. Internetové odkazy, literatura

36. Odkazy na internetu 36
• http://www.w3schools.com/js/default.asp
• http://zdrojak.root.cz/zpravicky/zdroje-prikladu-pro-javascriptove-vyvojare/
• http://www.hotscripts.com/
• http://en.wikipedia.org/wiki/List_of_JavaScript_libraries
• http://www.jquery.com
• http://bookmarklets.com/tools/categor.html
• http://scripty2.com/ (knihovna efektů, spíše pro zajímavost)
• http://interval.cz/clanky/sara-vieira-10-uzitecnych-utrzku-kodu-pro-jquery/
• http://www.1stwebdesigner.com/resources/javascript-sliders-scrollers/
• http://www.queness.com/post/9283/10-addictive-games-you-wouldnt-believe-theyre-made-with-javascript
(hry v JavaScriptu)
• http://www.jspatterns.com/scripting-photoshop-with-javascript/ (skriptování ve Photoshopu)
• http://www.root.cz/clanky/ajax/
• http://zdrojak.root.cz/clanky/node-js-s-javascriptem-na-server/ (JavaScript na serveru)

37. Doporučená literatura 37
• Flanagan, David – JavaScript Kompletní průvodce, Computer Press 2002
• Václavek, Petr – JavaScript – Hotová řešení, CP Books 2003
• Asleson, Ryan; Schutta, T. Nathaniel – Ajax – vytváříme vysoce interaktivní webové aplikace,
Computer Press 2006
• Chaffer, Jonathan; Swedberg, Karl – Learning jQuery 1.3, Packt Publishing 2009
• Bibeault, Bear; Katz, Yehuda – jQuery in Action, Second Edition, Manning Publications 2010
• Darwin, Peter Bacon; Kozlowski, Pawel – Mastering Web Application Development with
AngularJS, Packt Publishing 2013

38. Závěr, dotazy