TNPW2-2012-03

TNPW2
2011/2012
03 – JavaScript

Mgr. Lukáš Vacek
lukas.vacek@uhk.cz

2

Agenda

• Co je to JavaScript?
• Vložení skriptu do zdrojového kódu stránky
• Syntaxe, metody, vlastní funkce
• Knihovny (frameworky)
• Nejčastější použití JavaScriptu
• Internet, doporučená literatura

3

Co je to JavaScript?
• 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, tj. stránka může
obsahovat dynamické programy, které s uživatelem komunikují na straně klienta
(prohlížeče) >> může zvýšit interaktivitu s uživatelem
• JavaScript je označován jako tzv. assembler webu
• Využití HTML5 + CSS3 + JavaScriptu je aktuálním trendem při návrhu UI aplikací

http://cs.wikipedia.org/wiki/JavaScript
http://en.wikipedia.org/wiki/ECMAScript#Dialects
http://en.wikipedia.org/wiki/JavaScript_engine
http://www.w3schools.com/js/default.asp
http://www.root.cz/clanky/spor-o-budoucnost-javascriptu-vyresen/
http://zdrojak.root.cz/clanky/ecmascript-strict-mode-ve-firefoxu-4/

4

Agenda

 Co je to JavaScript?
• Vložení skriptu do zdrojového kódu stránky

5

Vložení JavaScriptu do (X)HTML kódu
• Interní skript
<script type="text/javascript">
/* <![CDATA[ */

kód skriptu

/* ]]> */
</script>

• Externí skript (knihovny)
<script type="text/javascript" src="mujskript.js"></script>

6

Práce s kódem v JavaScriptu
• 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, stejně tak je možné jej
komprimovat v okamžiku nasazení na produkčním prostředí webového serveru

• http://dean.edwards.name/packer/
• http://yui.2clics.net/

• Debugování zdrojového kódu v JavaScriptu už 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

Agenda

 Vložení skriptu do zdrojového kódu stránky

8

Syntaxe jazyka, metody, vlákna
• 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 a (X)HTML
formulářů
• Řada funkcí a procedur je přímo součástí JavaScriptu, další funkce je možné podle
aktuální 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í)

9

Vlastní funkce
• Funkce v JavaScriptu jsou pojmenované části programového kódu, které lze vyvolávat
podle potřeby (i opakovaně)
• Jako svůj výstup funkce provede určitou naprogramovanou činnost nebo může vrátit
nějakou hodnotu
• Vlastní funkci je nutné nadefinovat před jejím prvním použitím!

/* <![CDATA[ */
function abc() {
var isMSIE = /*@cc_on!@*/false;
return isMSIE;
}
/* ]]> */
</script>

• http://met.blog.root.cz/2007/03/29/nejkratsi-detekce-internet-exploreru-na-svete/ 

10

Agenda

 Syntaxe, metody, vlastní funkce

11

Knihovny (frameworky)
• 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
• 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://code.google.com/intl/cs/apis/libraries/

12

jQuery
• Velikostí malá (jeden soubor, tzv. minified verze 1.7.1 má 31 KB!) a přitom velmi
kompaktní JavaScript knihovna poskytující interaktivitu mezi JavaScriptem a (X)HTML
v okně webového prohlížeče
• 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/

13

Načtení knihovny na stránce
• Často je vybraná knihovna uložena na stejném webovém serveru jako webové stránky
• Doporučenou variantou je využití existujících souborů z CDN (Content Delivery Network)
v požadované verzi např. jQuery z Google API serveru nebo jQuery CDN…
• http://code.jquery.com/jquery-1.6.4.min.js

<script src="http://code.jquery.com/jquery-1.6.4.min.js"
type="text/javascript"></script>
/* <![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ů!

14

Agenda

 Knihovny (frameworky)

15

Nejčastější použití JavaScriptu
• 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)

16

Práce s DOM, selektory
• Výběr jednotlivých prvků (DOM objektů) na webové stránce v prohlížeči
• Následné zpracování událostí a manipulace s vlastnostmi
• DOM stránky lze v JavaScriptu upravovat i po jejím načtení!
// 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
Není! Musí se doprogramovat.

// 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

17

Zpracování událostí na stránce, vlastnosti prvků
• Pro manipulaci s vlastnostmi a událostmi prvků se používá tečková konvence!
• Některé události detekované v prohlížeči:
onclick() // kliknutí myší na objekt jQuery: click()
onmouseover // myš nad objektem jQuery: mouseover()
onmouseout // myš z objektu jQuery: mouseout()
onsubmit // odeslání formulář jQuery: submit()

// 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 = $("#combo option:selected").val();

03-02-udalosti.html

18

 Práce s DOM, selektory, zpracování událostí
• Ovlivnění výstupu v prohlížeči
• Práce s okny
• Grafy
• Bookmarklety

19

Ovlivnění výstupu v prohlížeči
• 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
document.write("nějaký text... ");
var mojePromenna = "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

20

Generovaný výstup a webové standardy
• 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/

21

 Ovlivnění výstupu v prohlížeči
• Práce s okny
• Grafy
• Bookmarklety

22

Zobrazování dialogových oken
• K zobrazení dialogového okna s určenou zprávou nebo k zadání vstupu od uživatele se
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

 Zobrazování dialogových oken
• Práce s okny
• Grafy
• Bookmarklety

24

Řízení prohlížeče
• 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ů
history.go("string"); // pohyb v historii na odkaz obsahující
// uvedený řetězec

• 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();

• Obsah stavového řádku lze ovlivnit vlastnostmi objektu Window –> window.status
a window.defaultStatus

25

 Řízení prohlížeče (např. pohyb v historii, načtení dokumentu, refresh)
• Práce s okny
• Grafy
• Bookmarklety

26

Spolupráce s CSS
• 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!
<div id="test">pokusný div</div>

/* <![CDATA[ */
function TestCSS() {
document.getElementById('test').style.backgroundColor='red';
}
/* ]]> */
</script>

• jQuery používá pro práci s CSS vlastnost .css()
$('#test').css("color","blue");

03-04-css.html

27

CSS3 v JavaScriptu
• 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 už dnes
obejít pomocí tzv. polyfill knihoven, např. Modernizr

• http://zdrojak.root.cz/clanky/javascriptareni-shim-fallback-polyfill/
• https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-browser-Polyfills

• Existuje kompletní implementace CSS3 modulu Template layout v JavaScriptu.
• Jde o plugin do jQuery 
• Pozor, je to Proof-of-concept a implementace není vhodná k produkčnímu nasazení!

• http://code.google.com/p/css-template-layout/
• http://www.w3.org/TR/css3-layout/
• http://a.deveria.com/csstpl/ (ukázky)

28

 Spolupráce s CSS
• Práce s okny
• Grafy
• Bookmarklety

29

Validace a zpracování formulářů
• Při použití (X)HTML formuláře na stránce je většinou 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

30

 Validace a zpracování formulářů
• Práce s okny
• Grafy
• Bookmarklety

31

Práce s obrázky – preloading obrázků (trochu historie)
• 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

32

Práce s obrázky – obrázkové galerie
• 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/plugin-tags/lightbox-gallery (jQuery pluginy)
http://www.fortysomething.ca/mt/etc/archives/005400.php (přehled)

33

 Práce s obrázky – preloading obrázků, obrázkové galerie
• Práce s okny
• Grafy
• Bookmarklety

34

Práce s okny v JavaScriptu
• V některých případech je potřeba otevírat stránky v novém okně
• 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

35

 Práce s okny
• Grafy
• Bookmarklety

36

Třídění tabulkových dat, datové filtry
• 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ů, např.
čí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

37

 Práce s okny
 Třídění dat podle sloupců v tabulkách, datové filtry
• Grafy
• Bookmarklety

38

Grafy
• 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í značku
canvas
• Fungují ve všech nejrozšířenějších prohlížečích

• http://code.google.com/p/flot/ (flot je plugin jQuery)
• http://bluff.jcoglan.com/ (Bluff je port Ruby knihovny Gruff)

39

 Práce s okny
 Grafy
• Bookmarklety

40

Bookmarklety
• 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.)
• 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

41

 Práce s okny
 Grafy
 Bookmarklety

42

Dynamický web, AJAX
• 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í, skriptovacím jazykem nemusí být
JavaScript 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

43

 Práce s okny
 Grafy
 Bookmarklety
 Dynamický web (změna obsahu skriptem, AJAX)

44

JavaScript na serveru (Node.js)
• 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://zdrojak.root.cz/clanky/node-js-s-javascriptem-na-server/
• http://geddyjs.org/ (Node.js framework)

45

 Práce s okny
 Grafy
 Bookmarklety
 Dynamický web (změna obsahu skriptem, AJAX)
 Na straně serveru (Node.js)

46

Agenda

 Nejčastější použití JavaScriptu

47

Odkazy na Internetu
• 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://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)

48

Doporučená literatura
• 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

49

Souhrn

 Nejčastější použití JavaScriptu
 Internet, doporučená literatura

TNPW2-2012-03

Recomendados

Recomendados

Mais conteúdo relacionado

Destaque

Destaque (8)

Semelhante a TNPW2-2012-03

Semelhante a TNPW2-2012-03 (20)

Mais de Lukáš Vacek

Mais de Lukáš Vacek (12)

TNPW2-2012-03