1. TNPW2 2010/2011 03 – JavaScript Mgr. Lukáš Vacek lukas.vacek@uhk.cz

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

4. Syntaxe, metody, vlastní funkce

5. Knihovny (frameworky)

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

7. Internet, doporučená literatura2

8. Co je to JavaScript? JavaScript je interpretovatelný (neprobíhá kompilování!) programovací jazykse základními objektově orientovanými vlastnostmi V polovině 90. let jej vytvořila firma Netscape a jeho univerzální jádro (včetně různých modifikací – např. JScript od fy Microsoft) je součástí webových prohlížečů Existuje norma pro použití JavaScriptu a jeho odvozenin, ECMAScript Aktuální verze ECMAScriptEdition 5 (12/2009) JavaScript umožňuje vložit do (X)HTML stránky proveditelný obsah, tj. stránka může obsahovat dynamické programy, které s uživatelem komunikují na straně klienta (prohlížeče) Použití JavaScriptu na straně klienta může zvýšit interaktivitu s uživatelem Je označován jako tzv. assembler webu http://cs.wikipedia.org/wiki/JavaScript http://en.wikipedia.org/wiki/ECMAScript#Dialects http://www.w3schools.com/js/default.asp http://www.jakpsatweb.cz/javascript/ http://www.root.cz/clanky/spor-o-budoucnost-javascriptu-vyresen/ http://zdrojak.root.cz/clanky/ecmascript-strict-mode-ve-firefoxu-4/ 3

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

11. Syntaxe, metody, vlastní funkce

12. Knihovny (frameworky)

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

14. Internet, doporučená literatura4

17. 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

18. http://dean.edwards.name/packer/

20. https://addons.mozilla.org/en-US/firefox/addon/1843 (Firebug pro MozillaFirefox)

21. http://code.google.com/p/jsdt/

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

24. Syntaxe, metody, vlastní funkce

25. Knihovny (frameworky)

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

27. Internet, doporučená literatura7

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

31. Syntaxe, metody, vlastní funkce

32. Knihovny (frameworky)

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

34. Internet, doporučená literatura10

35. 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í 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/ 11

36. jQuery Velikostí malá (jeden soubor, cca 57 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/ 12

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

39. Syntaxe, metody, vlastní funkce

40. Knihovny (frameworky)

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

42. Internet, doporučená literatura14

43. 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) 15

44. 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í! 16 // 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

46. 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 varhodnota = $("#combooption:selected").val(); 03-02-udalosti.html

48. 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. 19 // 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

49. 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/ 20

51. Ovlivnění výstupu v prohlížečiZobrazová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) 21

53. http://jqueryui.com/demos/dialog/Zdrojové kódy… prikladyquery-dialogevelopment-bundleemosialogbr />http://www.queness.com/post/77/simple-jquery-modal-window-tutorial

55. Ovlivnění výstupu v prohlížeči

56. Zobrazování dialogových oken

57. Ří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) 23

59. Ovlivnění výstupu v prohlížeči

60. Zobrazování dialogových oken

61. Ří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) 25

63. CSS layouty v JavaScriptu CSS3 má velmi problematickou implementaci v aktuálně používaných prohlížečích Nepodporu některých CSS3 vlastností v prohlížečích lze už dnes obejít pomocí JavaScriptu 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) 27

65. Ovlivnění výstupu v prohlížeči

66. Zobrazování dialogových oken

67. Řízení prohlížeče (např. pohyb v historii, načtení dokumentu, refresh)

68. Spolupráce s CSSValidace 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) 28

70. http://bassistance.de/jquery-plugins/jquery-plugin-validation/

71. http://programujte.com/?akce=clanek&cl=2009090500-jquery-plugin-validation-plugin-pro-snadnou-kontrolu-formularu (jednoduchý český návod)03-05-formular.html

73. Ovlivnění výstupu v prohlížeči

74. Zobrazování dialogových oken

75. Řízení prohlížeče (např. pohyb v historii, načtení dokumentu, refresh)

76. Spolupráce s CSS

77. 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) 30

81. Ovlivnění výstupu v prohlížeči

82. Zobrazování dialogových oken

83. Řízení prohlížeče (např. pohyb v historii, načtení dokumentu, refresh)

84. Spolupráce s CSS

85. Validace a zpracování formulářů

86. Práce s obrázky – preloading obrázků, obrázkové galeriePráce s okny Třídění dat podle sloupců v tabulkách, datové filtry Grafy Bookmarklety Dynamický web (změna obsahu skriptem, AJAX) 33

87. 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 Strictnení 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)! 34 functionwinopen(url){ var win = window.open(url,'okno1','width=400,height=340'); returnfalse; } <a href="http://www.uhk.cz" onclick="return winopen(this.href)">okno</a> 03-06-odkazy.html

89. Ovlivnění výstupu v prohlížeči

90. Zobrazování dialogových oken

91. Řízení prohlížeče (např. pohyb v historii, načtení dokumentu, refresh)

92. Spolupráce s CSS

93. Validace a zpracování formulářů

94. Práce s obrázky – preloading obrázků, obrázkové galerie

95. Práce s oknyTřídění dat podle sloupců v tabulkách, datové filtry Grafy Bookmarklety Dynamický web (změna obsahu skriptem, AJAX) 35

96. 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! 36 03-07-trideni.html 03-08-filtry.html

98. Ovlivnění výstupu v prohlížeči

99. Zobrazování dialogových oken

100. Řízení prohlížeče (např. pohyb v historii, načtení dokumentu, refresh)

101. Spolupráce s CSS

102. Validace a zpracování formulářů

103. Práce s obrázky – preloading obrázků, obrázkové galerie

104. Práce s okny

105. Třídění dat podle sloupců v tabulkách, datové filtryGrafy Bookmarklety Dynamický web (změna obsahu skriptem, AJAX) 37

106. 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) 38

108. Ovlivnění výstupu v prohlížeči

109. Zobrazování dialogových oken

110. Řízení prohlížeče (např. pohyb v historii, načtení dokumentu, refresh)

111. Spolupráce s CSS

112. Validace a zpracování formulářů

113. Práce s obrázky – preloading obrázků, obrázkové galerie

114. Práce s okny

115. Třídění dat podle sloupců v tabulkách, datové filtry

116. GrafyBookmarklety Dynamický web (změna obsahu skriptem, AJAX) 39

117. 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ů 40 javascript:příkaz; javascript:resizeTo(800,600) // změna velikosti okna http://bookmarklets.com/tools/categor.html

119. Ovlivnění výstupu v prohlížeči

120. Zobrazování dialogových oken

121. Řízení prohlížeče (např. pohyb v historii, načtení dokumentu, refresh)

122. Spolupráce s CSS

123. Validace a zpracování formulářů

124. Práce s obrázky – preloading obrázků, obrázkové galerie

125. Práce s okny

126. Třídění dat podle sloupců v tabulkách, datové filtry

127. Grafy

128. BookmarkletyDynamický web (změna obsahu skriptem, AJAX) 41

129. 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 (AsynchronousJavaScriptand 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 42

131. Ovlivnění výstupu v prohlížeči

132. Zobrazování dialogových oken

133. Řízení prohlížeče (např. pohyb v historii, načtení dokumentu, refresh)

134. Spolupráce s CSS

135. Validace a zpracování formulářů

136. Práce s obrázky – preloading obrázků, obrázkové galerie

137. Práce s okny

138. Třídění dat podle sloupců v tabulkách, datové filtry

139. Grafy

140. Bookmarklety

141. Dynamický web (změna obsahu skriptem, AJAX)43

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

144. Syntaxe, metody, vlastní funkce

145. Knihovny (frameworky)

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

147. Internet, doporučená literatura44

148. Odkazy na Internetu http://www.w3schools.com/js/default.asp http://www.jakpsatweb.cz/javascript/ http://zdrojak.root.cz/zpravicky/zdroje-prikladu-pro-javascriptove-vyvojare/ http://www.hotscripts.com/ http://archive.devx.com/sourcebank/ http://en.wikipedia.org/wiki/List_of_JavaScript_libraries http://bookmarklets.com/tools/categor.html http://www.jquery.com http://scripty2.com/ (knihovna efektů, spíše pro zajímavost) http://www.1stwebdesigner.com/resources/javascript-sliders-scrollers/ http://www.root.cz/clanky/ajax/ http://www.zive.cz/h/Programovani/Ar.asp?ARI=109710&CAI=2094 http://zdrojak.root.cz/clanky/node-js-s-javascriptem-na-server/ (JavaScript na serveru) 45

149. Doporučená literatura Flanagan, David – JavaScript Kompletní průvodce, ComputerPress 2002 Václavek, Petr – JavaScript – Hotová řešení, CP Books 2003 Asleson, Ryan; Schutta, T. Nathaniel – Ajax – vytváříme vysoce interaktivní webové aplikace, ComputerPress 2006 46

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

152. Syntaxe, metody, vlastní funkce

153. Knihovny (frameworky)

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

155. Internet, doporučená literatura47