2. 2
Agenda
Co je to JavaScript?
Vlo転en鱈 skriptu do zdrojov辿ho k坦du str叩nky
Syntaxe, metody, vlastn鱈 funkce
Knihovny (frameworky)
Nejastj邸鱈 pou転it鱈 JavaScriptu
Internet, doporuen叩 literatura
3. 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 vytvoila firma Netscape a jeho interpret (bhov辿 prosted鱈) 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鱈転ee) m哲転e zv箪邸it interaktivitu s u転ivatelem
JavaScript je oznaov叩n jako tzv. assembler webu
Kombinace HTML5 + CSS3 + JavaScript je aktu叩ln鱈m trendem pi 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
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. 4
Agenda
Co je to JavaScript?
Vlo転en鱈 skriptu do zdrojov辿ho k坦du str叩nky
Syntaxe, metody, vlastn鱈 funkce
Knihovny (frameworky)
Nejastj邸鱈 pou転it鱈 JavaScriptu
Internet, doporuen叩 literatura
6. 6
Pr叩ce s k坦dem v JavaScriptu
Rozs叩hlej邸鱈 aplikan鱈 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 vt邸鱈 pehlednost, stejn tak je mo転n辿 jej
komprimovat v okam転iku nasazen鱈 na produkn鱈m prosted鱈 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 prosted鱈 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. 7
Dokumentov叩n鱈 zdrojov辿ho k坦du v JSDoc
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. 8
Agenda
Co je to JavaScript?
Vlo転en鱈 skriptu do zdrojov辿ho k坦du str叩nky
Syntaxe, metody, vlastn鱈 funkce
Knihovny (frameworky)
Nejastj邸鱈 pou転it鱈 JavaScriptu
Internet, doporuen叩 literatura
9. 9
Syntaxe jazyka, metody, vl叩kna
Jazyk JavaScript vych叩z鱈 ze syntaxe jazyka C (C++, Java, C#, PHP)
Jednotliv辿 p鱈kazy JavaScriptu se oddluj鱈 ";"
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叩dj鱈c鱈 uritou innost, nejastji 鱈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鱈 poteby vytvoit
document.write("Text... "); // peddefinovan叩 metoda
mojeFunkce(); // pou転it鱈 vytvoen辿 fce
Aktu叩ln podporuj鱈 webov辿 prohl鱈転ee 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 (vysvtlen鱈)
10. 10
Vlastn鱈 funkce
Funkce v JavaScriptu jsou pojmenovan辿 叩sti programov辿ho k坦du, kter辿 lze vyvol叩vat
podle poteby (i opakovan)
Jako sv哲j v箪stup funkce provede uritou naprogramovanou innost nebo m哲転e vr叩tit
njakou hodnotu
Vlastn鱈 funkci je nutn辿 nadefinovat ped jej鱈m prvn鱈m pou転it鱈m!
<script type="text/javascript">
/* <![CDATA[ */
/**
* @return {boolean} Is the browser IE?
*/
function abc() {
var isMSIE = /*@cc_on!@*/false;
return isMSIE;
}
/* ]]> */
</script>
http://met.blog.root.cz/2007/03/29/nejkratsi-detekce-internet-exploreru-na-svete/
11. 11
Agenda
Co je to JavaScript?
Vlo転en鱈 skriptu do zdrojov辿ho k坦du str叩nky
Syntaxe, metody, vlastn鱈 funkce
Knihovny (frameworky)
Nejastj邸鱈 pou転it鱈 JavaScriptu
Internet, doporuen叩 literatura
12. 12
Knihovny (frameworky)
Existuje cel叩 ada nejr哲znj邸鱈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 tchto knihoven pat鱈 nap. proch叩zen鱈 a manipulace s DOM
str叩nky, zpracov叩n鱈 ud叩lost鱈 v prohl鱈転ei, pr叩ce s obr叩zky, na鱈t叩n鱈 dat ze serveru,
podpora drag&drop, pr叩ce s cookies apod.
Mezi nejpou転鱈vanj邸鱈 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. 13
jQuery
Velikost鱈 mal叩 (jeden soubor, tzv. minified verze 1.8.2 m叩 32 KB!) a pitom velmi
kompaktn鱈 JavaScript knihovna poskytuj鱈c鱈 interaktivitu mezi JavaScriptem a (X)HTML
v okn webov辿ho prohl鱈転ee
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/
14. 14
Naten鱈 knihovny na str叩nce
asto je vybran叩 knihovna ulo転ena na stejn辿m webov辿m serveru jako webov辿 str叩nky
Doporuenou 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.8.2.min.js (aktu叩ln鱈 verze, 鱈jen 2012)
<script src=/slideshow/tnpw2201303/14625377/"http:/code.jquery.com/jquery-1.8.2.min.js"
type="text/javascript"></script>
<script type="text/javascript">
/* <![CDATA[ */
$(document).ready(function(){
// k坦d bude iniciov叩n a転 po naten鱈 cel辿 str叩nky
});
/* ]]> */
</script>
Je vhodn辿 iniciovat aplikan鱈 k坦d a転 po naten鱈 cel辿 str叩nky a v邸ech prvk哲!
15. 15
Programovac鱈 jazyky vyu転鱈vaj鱈c鱈 JavaScript
PIPOMNKA! JavaScript je tzv. assembler webu
Nkter辿 nov辿 programovac鱈 jazyky se pokou邸ej鱈 odstranit nedostatky JavaScriptu
V箪hodou je, 転e se umj鱈 se do zdrojov辿ho JS k坦du zkompilovat!
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 divoej邸鱈
Coffee Script
Nejstar邸鱈 a nejroz邸鱈enj邸鱈
http://en.wikipedia.org/wiki/CoffeeScript
http://www.zdrojak.cz/clanky/coffeescript-radne-oslazeny-javascript/
16. 16
Agenda
Co je to JavaScript?
Vlo転en鱈 skriptu do zdrojov辿ho k坦du str叩nky
Syntaxe, metody, vlastn鱈 funkce
Knihovny (frameworky)
Nejastj邸鱈 pou転it鱈 JavaScriptu
Internet, doporuen叩 literatura
17. 17
Nejastj邸鱈 pou転it鱈 JavaScriptu
Pr叩ce s DOM, selektory, zpracov叩n鱈 ud叩lost鱈
Ovlivnn鱈 v箪stupu v prohl鱈転ei
Zobrazov叩n鱈 dialogov箪ch oken
鱈zen鱈 prohl鱈転ee (nap. pohyb v historii, naten鱈 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鱈dn鱈 dat podle sloupc哲 v tabulk叩ch, datov辿 filtry
Grafy
Bookmarklety
Dynamick箪 web (zmna obsahu skriptem, AJAX)
Na stran serveru (Node.js)
18. 18
Pr叩ce s DOM, selektory
V箪br jednotliv箪ch prvk哲 (DOM objekt哲) na webov辿 str叩nce v prohl鱈転ei
N叩sledn辿 zpracov叩n鱈 ud叩lost鱈 a manipulace s vlastnostmi
DOM str叩nky lze v JavaScriptu upravovat i po jej鱈m naten鱈!
// v箪br prvku podle ID v JavaScriptu, na validn鱈 str叩nce je 1!
document.getElementById('id_prvku')
// v箪br prvk哲 podle typu elementu v JavaScriptu
document.getElementsByTagName('nazev_tagu')
// v箪br prvk哲 dan辿 t鱈dy v JavaScriptu
Nen鱈! Mus鱈 se doprogramovat.
// v箪br prvku podle ID v jQuery
$('#id_prvku')
// v箪br prvk哲 podle typu elementu v jQuery
$('nazev_tagu')
// v箪br prvk哲 dan辿 t鱈dy v jQuery
$('.nazev_tridy')
03-01-dom.html
19. 19
Zpracov叩n鱈 ud叩lost鱈 na str叩nce, vlastnosti prvk哲
Pro manipulaci s vlastnostmi a ud叩lostmi prvk哲 se pou転鱈v叩 tekov叩 konvence!
Nkter辿 ud叩losti detekovan辿 v prohl鱈転ei:
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=/slideshow/tnpw2201303/14625377/"img_01.gif" id="o1" onmouseover=
"document.getElementById('o1').src='img_02.gif'" />
jQuery vyu転鱈v叩 pi v箪bru prvk哲 s njak箪m stavem selektory s dvojtekou (nap. :first,
:last, :selected, :checked)
Pro naten鱈 n叩vratov辿 hodnoty nalezen辿ho prvku v jQuery se pou転鱈v叩 metoda .val()
// pou転it鱈 metody val() pro naten鱈 vybran辿 hodnoty z combo prvku
var hodnota = $("#combo option:selected").val();
03-02-udalosti.html
20. 20
Nejastj邸鱈 pou転it鱈 JavaScriptu
Pr叩ce s DOM, selektory, zpracov叩n鱈 ud叩lost鱈
Ovlivnn鱈 v箪stupu v prohl鱈転ei
Zobrazov叩n鱈 dialogov箪ch oken
鱈zen鱈 prohl鱈転ee (nap. pohyb v historii, naten鱈 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鱈dn鱈 dat podle sloupc哲 v tabulk叩ch, datov辿 filtry
Grafy
Bookmarklety
Dynamick箪 web (zmna obsahu skriptem, AJAX)
Na stran serveru (Node.js)
21. 21
Ovlivnn鱈 v箪stupu v prohl鱈転ei
Obsah webov辿 str叩nky je mo転n辿 ovlivnit na stran klienta (v prohl鱈転ei)
Pi na鱈t叩n鱈 str叩nky metodou write() objektu Document,
Kdykoliv zmnou 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 poteby
mnit, nap. datum, text v odstavci, nov辿 elementy apod.
// v箪pis etzce, promnn辿, hodnoty funkce
document.write("njak箪 text... ");
var mojePromenna = "njak箪 text... ";
document.write(mojePromenna);
document.write(Date());
var zmena = document.getElementById("myID");
zmena.innerHTML = "<strong>njak箪 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
22. 22
Generovan箪 v箪stup a webov辿 standardy
Generov叩n鱈 (X)HTML k坦du z vizu叩ln鱈ch komponent v箪vojov辿ho prosted鱈 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 pipraven箪 na webov辿m serveru pedem
Nezapomete 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叩 mnit
http://zdrojak.root.cz/clanky/tak-nam-zpristupnili-javascript/
http://www.w3.org/TR/WCAG20/
23. 23
Nejastj邸鱈 pou転it鱈 JavaScriptu
Pr叩ce s DOM, selektory, zpracov叩n鱈 ud叩lost鱈
Ovlivnn鱈 v箪stupu v prohl鱈転ei
Zobrazov叩n鱈 dialogov箪ch oken
鱈zen鱈 prohl鱈転ee (nap. pohyb v historii, naten鱈 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鱈dn鱈 dat podle sloupc哲 v tabulk叩ch, datov辿 filtry
Grafy
Bookmarklety
Dynamick箪 web (zmna obsahu skriptem, AJAX)
Na stran serveru (Node.js)
24. 24
Zobrazov叩n鱈 dialogov箪ch oken
K zobrazen鱈 dialogov辿ho okna s urenou 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="Otevi 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 vt邸鱈 mo転nosti!
http://docs.jquery.com/UI/Dialog
Souasn箪m trendem jsou tzv. Single Page Apps
25. 25
Nejastj邸鱈 pou転it鱈 JavaScriptu
Pr叩ce s DOM, selektory, zpracov叩n鱈 ud叩lost鱈
Ovlivnn鱈 v箪stupu v prohl鱈転ei
Zobrazov叩n鱈 dialogov箪ch oken
鱈zen鱈 prohl鱈転ee (nap. pohyb v historii, naten鱈 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鱈dn鱈 dat podle sloupc哲 v tabulk叩ch, datov辿 filtry
Grafy
Bookmarklety
Dynamick箪 web (zmna obsahu skriptem, AJAX)
Na stran serveru (Node.js)
26. 26
鱈zen鱈 prohl鱈転ee
Objekt History umo転uje pohyb vped a zpt u転ivatelskou histori鱈 prohl鱈転ee
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 zpt
history.forward(); // pohyb v historii vped
history.go(-3); // pohyb v historii o dan箪 poet krok哲
history.go("string"); // pohyb v historii na odkaz obsahuj鱈c鱈
// uveden箪 etzec
Objekt Location reprezentuje URL v dan辿m okn aktu叩ln zobrazen辿ho dokumentu
// naten鱈 dokumentu z dan辿 adresy
location.href = "url";
// optovn辿 nahr叩n鱈 aktu叩ln鱈ho dokumentu
location.reload();
Obsah stavov辿ho 叩dku lze ovlivnit vlastnostmi objektu Window > window.status
a window.defaultStatus
27. 27
Nejastj邸鱈 pou転it鱈 JavaScriptu
Pr叩ce s DOM, selektory, zpracov叩n鱈 ud叩lost鱈
Ovlivnn鱈 v箪stupu v prohl鱈転ei
Zobrazov叩n鱈 dialogov箪ch oken
鱈zen鱈 prohl鱈転ee (nap. pohyb v historii, naten鱈 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鱈dn鱈 dat podle sloupc哲 v tabulk叩ch, datov辿 filtry
Grafy
Bookmarklety
Dynamick箪 web (zmna obsahu skriptem, AJAX)
Na stran serveru (Node.js)
28. 28
Spolupr叩ce s CSS
JavaScript nab鱈z鱈 pomrn slu邸nou podporu pro p鱈stup k jednotliv箪m element哲m
str叩nky a umo転uje nastavovat jejich CSS vlastnosti
Nezapomete! K jednotliv箪m element哲m na str叩nce se nejl辿pe pistupuje pes jejich id!
<div id="test">pokusn箪 div</div>
<script type="text/javascript">
/* <![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
29. 29
CSS3 v JavaScriptu
CSS3 m叩 problematickou implementaci (zlep邸uje se) v aktu叩ln pou転鱈van箪ch prohl鱈転e鱈ch
Nepodporu nkter箪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 produkn鱈mu nasazen鱈!
http://code.google.com/p/css-template-layout/
http://www.w3.org/TR/css3-layout/
http://a.deveria.com/csstpl/ (uk叩zky)
30. 30
Nejastj邸鱈 pou転it鱈 JavaScriptu
Pr叩ce s DOM, selektory, zpracov叩n鱈 ud叩lost鱈
Ovlivnn鱈 v箪stupu v prohl鱈転ei
Zobrazov叩n鱈 dialogov箪ch oken
鱈zen鱈 prohl鱈転ee (nap. pohyb v historii, naten鱈 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鱈dn鱈 dat podle sloupc哲 v tabulk叩ch, datov辿 filtry
Grafy
Bookmarklety
Dynamick箪 web (zmna obsahu skriptem, AJAX)
Na stran serveru (Node.js)
31. 31
Validace a zpracov叩n鱈 formul叩哲
Pi pou転it鱈 (X)HTML formul叩e na str叩nce je vt邸inou vhodn辿 ped odesl叩n鱈m dat prov辿st
kontrolu spr叩vnosti vyplnn鱈 jednotliv箪ch polo転ek formul叩e u転ivatelem
Identifikace jednotliv箪ch prvk哲 formul叩e se nejastji 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
validan鱈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
32. 32
Nejastj邸鱈 pou転it鱈 JavaScriptu
Pr叩ce s DOM, selektory, zpracov叩n鱈 ud叩lost鱈
Ovlivnn鱈 v箪stupu v prohl鱈転ei
Zobrazov叩n鱈 dialogov箪ch oken
鱈zen鱈 prohl鱈転ee (nap. pohyb v historii, naten鱈 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鱈dn鱈 dat podle sloupc哲 v tabulk叩ch, datov辿 filtry
Grafy
Bookmarklety
Dynamick箪 web (zmna obsahu skriptem, AJAX)
Na stran serveru (Node.js)
33. 33
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 nkter辿 vlastnosti
obr叩zk哲 mnit za chodu skriptu
Nkdy (nap. pi pou転it鱈 animovan辿ho obr叩zkov辿ho menu) je vhodn辿 pedem (nejl辿pe
v okam転iku na鱈t叩n鱈 str叩nky) na鱈st obr叩zky do cache prohl鱈転ee, ale zobrazit je a転
pozdji, kdy転 jsou poteba (z cache prohl鱈転ee se pak rychleji na鱈taj鱈)
// preload obr叩zku JavaScriptem, obvykle fce v ud叩losti onload elementu body
var obr1 = new Image();
obr1.src = /slideshow/tnpw2201303/14625377/"flag1.jpg";
Existuje alternativn鱈 e邸en鱈 bez nutnosti preloadu obr叩zk哲
http://www.wellstyled.com/css-nopreload-rollovers.html
34. 34
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. vt邸鱈) velikosti ve st叩vaj鱈c鱈m nebo nov辿m okn prohl鱈転ee
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 (pehled)
35. 35
Nejastj邸鱈 pou転it鱈 JavaScriptu
Pr叩ce s DOM, selektory, zpracov叩n鱈 ud叩lost鱈
Ovlivnn鱈 v箪stupu v prohl鱈転ei
Zobrazov叩n鱈 dialogov箪ch oken
鱈zen鱈 prohl鱈転ee (nap. pohyb v historii, naten鱈 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鱈dn鱈 dat podle sloupc哲 v tabulk叩ch, datov辿 filtry
Grafy
Bookmarklety
Dynamick箪 web (zmna obsahu skriptem, AJAX)
Na stran serveru (Node.js)
36. 36
Pr叩ce s okny v JavaScriptu
V nkter箪ch p鱈padech je poteba 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
Pi pou転it鱈 JavaScriptu je teba br叩t v 炭vahu mo転nost vypnut辿ho skriptov叩n鱈 na stran
klienta a tuto mo転nost o邸etit (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
37. 37
Nejastj邸鱈 pou転it鱈 JavaScriptu
Pr叩ce s DOM, selektory, zpracov叩n鱈 ud叩lost鱈
Ovlivnn鱈 v箪stupu v prohl鱈転ei
Zobrazov叩n鱈 dialogov箪ch oken
鱈zen鱈 prohl鱈転ee (nap. pohyb v historii, naten鱈 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鱈dn鱈 dat podle sloupc哲 v tabulk叩ch, datov辿 filtry
Grafy
Bookmarklety
Dynamick箪 web (zmna obsahu skriptem, AJAX)
Na stran serveru (Node.js)
38. 38
T鱈dn鱈 tabulkov箪ch dat, datov辿 filtry
Pomoc鱈 JavaScriptu lze data v tabulce na stran klienta (prohl鱈転ee) jednodu邸e t鱈dit
nebo filtrovat, a to bez nutnosti jejich opakovan辿ho na鱈t叩n鱈 ze serveru (datab叩ze)
pi aktualizaci zobrazen鱈
T鱈dit nebo filtrovat lze data podle jednoduch箪ch datov箪ch typ哲, nap. 鱈slo, etzec,
datum, mna 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
39. 39
Nejastj邸鱈 pou転it鱈 JavaScriptu
Pr叩ce s DOM, selektory, zpracov叩n鱈 ud叩lost鱈
Ovlivnn鱈 v箪stupu v prohl鱈転ei
Zobrazov叩n鱈 dialogov箪ch oken
鱈zen鱈 prohl鱈転ee (nap. pohyb v historii, naten鱈 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鱈dn鱈 dat podle sloupc哲 v tabulk叩ch, datov辿 filtry
Grafy
Bookmarklety
Dynamick箪 web (zmna obsahu skriptem, AJAX)
Na stran serveru (Node.js)
40. 40
Grafy
Pro vkl叩d叩n鱈 graf哲 na webov辿 str叩nky se obvykle pou転鱈vaj鱈 obr叩zky generovan辿 na stran
serveru, m辿n astji potom Flash nebo JavaScript na stran klienta
Pro vytv叩en鱈 graf哲 v JavaScriptu existuje nkolik knihoven, obvykle pou転鱈vaj鱈 znaku
canvas
Funguj鱈 ve v邸ech nejroz邸鱈enj邸鱈ch prohl鱈転e鱈ch
http://code.google.com/p/flot/ (flot je plugin jQuery)
http://bluff.jcoglan.com/ (Bluff je port Ruby knihovny Gruff)
41. 41
Nejastj邸鱈 pou転it鱈 JavaScriptu
Pr叩ce s DOM, selektory, zpracov叩n鱈 ud叩lost鱈
Ovlivnn鱈 v箪stupu v prohl鱈転ei
Zobrazov叩n鱈 dialogov箪ch oken
鱈zen鱈 prohl鱈転ee (nap. pohyb v historii, naten鱈 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鱈dn鱈 dat podle sloupc哲 v tabulk叩ch, datov辿 filtry
Grafy
Bookmarklety
Dynamick箪 web (zmna obsahu skriptem, AJAX)
Na stran serveru (Node.js)
42. 42
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鱈
njakou konkr辿tn鱈 innost, kter叩 p哲vodn na str叩nce nebyla (zvt邸en鱈 p鱈sma, podtr転en鱈
odkaz哲 apod.)
Na Internetu je voln k dispozici velk辿 mno転stv鱈 bookmarklet哲
javascript:p鱈kaz;
javascript:resizeTo(800,600) // zmna velikosti okna
http://bookmarklets.com/tools/categor.html
43. 43
Nejastj邸鱈 pou転it鱈 JavaScriptu
Pr叩ce s DOM, selektory, zpracov叩n鱈 ud叩lost鱈
Ovlivnn鱈 v箪stupu v prohl鱈転ei
Zobrazov叩n鱈 dialogov箪ch oken
鱈zen鱈 prohl鱈転ee (nap. pohyb v historii, naten鱈 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鱈dn鱈 dat podle sloupc哲 v tabulk叩ch, datov辿 filtry
Grafy
Bookmarklety
Dynamick箪 web (zmna obsahu skriptem, AJAX)
Na stran serveru (Node.js)
44. 44
Dynamick箪 web, AJAX
Reakce na ud叩losti vyvolan辿 u転ivatelem na stran klienta se pos鱈laj鱈 pes protokol HTTP
ke zpracov叩n鱈 na server a str叩nka obdr転鱈 odpov
Tato odpov ze serveru n叩sledn m哲転e zmnit stav njak辿ho prvku na str叩nce nebo se
dynamicky vytvo鱈 nov箪 element
Ve v箪sledku se tedy (vt邸inou) nekon叩 reload cel辿 str叩nky
Pro vzd叩len辿 vol叩n鱈 metod formou v箪mny XML dat s pevnou strukturou se ust叩lil pojem
AJAX (Asynchronous JavaScript and XML)
AJAX nejastji pou転鱈v叩 protokol XMLRPC (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 pen叩邸ena pouze pomoc鱈 XML (textov箪 etzec, 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 oddlen鱈 aplikan鱈ch dat a jejich vizu叩ln鱈 prezentace
Bli転邸鱈 informace k AJAXu a spol. budou v pedn叩邸ce o aktu叩ln鱈ch trendech na webu
45. 45
Nejastj邸鱈 pou転it鱈 JavaScriptu
Pr叩ce s DOM, selektory, zpracov叩n鱈 ud叩lost鱈
Ovlivnn鱈 v箪stupu v prohl鱈転ei
Zobrazov叩n鱈 dialogov箪ch oken
鱈zen鱈 prohl鱈転ee (nap. pohyb v historii, naten鱈 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鱈dn鱈 dat podle sloupc哲 v tabulk叩ch, datov辿 filtry
Grafy
Bookmarklety
Dynamick箪 web (zmna obsahu skriptem, AJAX)
Na stran serveru (Node.js)
46. 46
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 pedstavit jako engine
V8, roz邸鱈en箪 o funkce, kter辿 umo転uj鱈 prov叩dn箪m skript哲m pistupovat k soubor哲m i
s鱈泥ov箪m funkc鱈m. Co転 v praxi znamen叩, 転e m哲転eme vytvoit server, kter箪 naslouch叩 na
uren辿m portu t辿m stejn箪m zp哲sobem, jak箪m vytv叩鱈me nap鱈klad obslu転n辿 metody
pro ud叩losti v prohl鱈転ei. 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 nkter箪mi technologick箪mi omezen鱈mi! (nap. vl叩kna)
47. 47
Nejastj邸鱈 pou転it鱈 JavaScriptu
Pr叩ce s DOM, selektory, zpracov叩n鱈 ud叩lost鱈
Ovlivnn鱈 v箪stupu v prohl鱈転ei
Zobrazov叩n鱈 dialogov箪ch oken
鱈zen鱈 prohl鱈転ee (nap. pohyb v historii, naten鱈 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鱈dn鱈 dat podle sloupc哲 v tabulk叩ch, datov辿 filtry
Grafy
Bookmarklety
Dynamick箪 web (zmna obsahu skriptem, AJAX)
Na stran serveru (Node.js)
48. 48
Agenda
Co je to JavaScript?
Vlo転en鱈 skriptu do zdrojov辿ho k坦du str叩nky
Syntaxe, metody, vlastn鱈 funkce
Knihovny (frameworky)
Nejastj邸鱈 pou転it鱈 JavaScriptu
Internet, doporuen叩 literatura
49. 49
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)
50. 50
Doporuen叩 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
51. 51
Souhrn
Co je to JavaScript?
Vlo転en鱈 skriptu do zdrojov辿ho k坦du str叩nky
Syntaxe, metody, vlastn鱈 funkce
Knihovny (frameworky)
Nejastj邸鱈 pou転it鱈 JavaScriptu
Internet, doporuen叩 literatura