TNPW2-2011-03

1,413 views

Published on

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
1,413
On SlideShare
0
From Embeds
0
Number of Embeds
91
Actions
Shares
0
Downloads
4
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

TNPW2-2011-03

  1. 1. TNPW2<br />2010/2011<br />03 – JavaScript<br />Mgr. Lukáš Vacek<br />lukas.vacek@uhk.cz<br />
  2. 2. Agenda3<br /><ul><li>Co je to JavaScript?
  3. 3. Vložení skriptu do zdrojového kódu stránky
  4. 4. Syntaxe, metody, vlastní funkce
  5. 5. Knihovny (frameworky)
  6. 6. Nejčastější použití JavaScriptu
  7. 7. Internet, doporučená literatura</li></ul>2<br />
  8. 8. Co je to JavaScript?<br />JavaScript je interpretovatelný (neprobíhá kompilování!) programovací jazykse základními objektově orientovanými vlastnostmi<br />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čů<br />Existuje norma pro použití JavaScriptu a jeho odvozenin, ECMAScript<br />Aktuální verze ECMAScriptEdition 5 (12/2009)<br />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)<br />Použití JavaScriptu na straně klienta může zvýšit interaktivitu s uživatelem<br />Je označován jako tzv. assembler webu<br />http://cs.wikipedia.org/wiki/JavaScript <br />http://en.wikipedia.org/wiki/ECMAScript#Dialects<br />http://www.w3schools.com/js/default.asp<br />http://www.jakpsatweb.cz/javascript/<br />http://www.root.cz/clanky/spor-o-budoucnost-javascriptu-vyresen/<br />http://zdrojak.root.cz/clanky/ecmascript-strict-mode-ve-firefoxu-4/<br />3<br />
  9. 9. Agenda3<br /><ul><li>Co je to JavaScript?
  10. 10. Vložení skriptu do zdrojového kódu stránky
  11. 11. Syntaxe, metody, vlastní funkce
  12. 12. Knihovny (frameworky)
  13. 13. Nejčastější použití JavaScriptu
  14. 14. Internet, doporučená literatura</li></ul>4<br />
  15. 15. Vložení JavaScriptu do (X)HTML kódu<br />Interní skript<br />5<br /><script type="text/javascript"><br />/* <![CDATA[ */<br />kód skriptu<br />/* ]]> */<br /></script><br /><ul><li>Externí skript (knihovny)</li></ul><script type="text/javascript" src="mujskript.js"></script><br />
  16. 16. Práce s kódem v JavaScriptu<br /><ul><li>Rozsáhlejší aplikační logika se ukládá do samostatných souborů s příponou *.js mimo zdrojový (X)HTML kód
  17. 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. 18. http://dean.edwards.name/packer/
  19. 19. http://yui.2clics.net/</li></ul>6<br /><ul><li>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í
  20. 20. https://addons.mozilla.org/en-US/firefox/addon/1843 (Firebug pro MozillaFirefox)
  21. 21. http://code.google.com/p/jsdt/
  22. 22. http://www.myeclipseide.com/module-htmlpages-display-pid-57.html</li></li></ul><li>Agenda3<br /><ul><li>Co je to JavaScript?
  23. 23. Vložení skriptu do zdrojového kódu stránky
  24. 24. Syntaxe, metody, vlastní funkce
  25. 25. Knihovny (frameworky)
  26. 26. Nejčastější použití JavaScriptu
  27. 27. Internet, doporučená literatura</li></ul>7<br />
  28. 28. Syntaxe jazyka, metody, vlákna<br />Jazyk JavaScript vychází ze syntaxe jazyka C (C++, Java, C#, PHP…)<br />Jednotlivé příkazy JavaScriptu se oddělují ";"<br />Hlavním rysem JavaScriptu je používání tzv. metod<br />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ářů<br />Řada funkcí a procedur je přímo součástí JavaScriptu, další funkce je možné podle aktuální potřeby vytvořit<br />8<br />document.write("Text... "); // předdefinovaná metoda<br />mojeFunkce(); // použití vytvořené fce<br /><ul><li>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</li></ul>http://html456.blogspot.com/2008/08/na-web-prijde-javascript-s-vice-vlakny.html<br />
  29. 29. Vlastní funkce<br />Funkce v JavaScriptu jsou pojmenované části programového kódu, které lze vyvolávat podle potřeby (i opakovaně)<br />Jako svůj výstup funkce provede určitou naprogramovanou činnost nebo může vrátit nějakou hodnotu<br />Vlastní funkci je nutné nadefinovat před jejím prvním použitím!<br />9<br /><script type="text/javascript"><br />/* <![CDATA[ */ <br />functionabc() {<br />var isMSIE = /*@cc_on!@*/false;<br />returnisMSIE;<br />}<br />/* ]]> */<br /></script><br /><ul><li>http://met.blog.root.cz/2007/03/29/nejkratsi-detekce-internet-exploreru-na-svete/</li></li></ul><li>Agenda3<br /><ul><li>Co je to JavaScript?
  30. 30. Vložení skriptu do zdrojového kódu stránky
  31. 31. Syntaxe, metody, vlastní funkce
  32. 32. Knihovny (frameworky)
  33. 33. Nejčastější použití JavaScriptu
  34. 34. Internet, doporučená literatura</li></ul>10<br />
  35. 35. Knihovny (frameworky)<br />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<br />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. <br />Mezi nejpoužívanější knihovny patří např. JQuery, Prototype, script.aculo.us, mootools, Yahoo! UI (YUI), Dojo a další<br />http://jquery.com/<br />http://prototypejs.org/<br />http://script.aculo.us/<br />http://dojotoolkit.org/<br />http://developer.yahoo.com/yui/<br />http://www.mootools.net/<br />http://code.google.com/intl/cs/apis/libraries/<br />11<br />
  36. 36. jQuery<br />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<br />Autorem je John Resig (akce BarCamp, 2006)<br />Jde o svobodný software pod licencí MIT a GPL<br />Je např. součástí frameworků Microsoft ASP.NET AJAX, Spring na platformě Java nebo Nokia jQuery na mobilech<br />Základní knihovnu jQuery je možné rozšířit pomocí pluginů<br />http://jquery.com/<br />http://citron.blueboard.cz/clanek-331-jquery-pro-zacatecniky-zaklady.html<br />http://jquery.jslab.net/zkousecka/<br />12<br />
  37. 37. Načtení knihovny na stránce<br />Nejčastěji je vybraná knihovna uložena na stejném webovém serveru jako webové stránky (používám to i v příkladech k přednášce!)<br />Doporučenou variantou pro často používané knihovny je využití existujících souborů v požadované verzi např. jQuery z Google API serveru…<br />http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.js<br />13<br /><scriptsrc="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.js" type="text/javascript"></script><br /><script type="text/javascript"><br />/* <![CDATA[ */<br />$(document).ready(function(){<br /> // kód bude iniciován až po načtení celé stránky<br />});<br />/* ]]> */<br /></script><br /><ul><li>Je vhodné iniciovat aplikační kód až po načtení celé stránky a všech prvků!</li></li></ul><li>Agenda3<br /><ul><li>Co je to JavaScript?
  38. 38. Vložení skriptu do zdrojového kódu stránky
  39. 39. Syntaxe, metody, vlastní funkce
  40. 40. Knihovny (frameworky)
  41. 41. Nejčastější použití JavaScriptu
  42. 42. Internet, doporučená literatura</li></ul>14<br />
  43. 43. Nejčastější použití JavaScriptu<br />Práce s DOM, selektory, zpracování událostí<br />Ovlivnění výstupu v prohlížeči<br />Zobrazování dialogových oken<br />Řízení prohlížeče (např. pohyb v historii, načtení dokumentu, refresh)<br />Spolupráce s CSS<br />Validace a zpracování formulářů<br />Práce s obrázky – preloading obrázků, obrázkové galerie<br />Práce s okny<br />Třídění dat podle sloupců v tabulkách, datové filtry<br />Grafy<br />Bookmarklety<br />Dynamický web (změna obsahu skriptem, AJAX)<br />15<br />
  44. 44. Práce s DOM, selektory<br />Výběr jednotlivých prvků (DOM objektů) na webové stránce v prohlížeči<br />Následné zpracování událostí a manipulace s vlastnostmi<br />DOM stránky lze v JavaScriptu upravovat i po jejím načtení!<br />16<br />// výběr prvku podle ID v JavaScriptu, na validní stránce je 1!<br />document.getElementById('id_prvku')<br />// výběr prvků podle typu elementu v JavaScriptu<br />document.getElementsByTagName('nazev_tagu')<br />// výběr prvků dané třídy v JavaScriptu<br />Není! Musí se doprogramovat.<br />// výběr prvku podle ID v jQuery<br />$('#id_prvku')<br />// výběr prvků podle typu elementu v jQuery<br />$('nazev_tagu')<br />// výběr prvků dané třídy v jQuery<br />$('.nazev_tridy')<br />03-01-dom.html<br />
  45. 45. 17<br />Zpracování událostí na stránce, vlastnosti prvků<br />Pro manipulaci s vlastnostmi a událostmi prvků se používá tečková konvence! <br />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()<br />// použití metody onmouseover u obrázku<br /><imgsrc="img_01.gif" id="o1" onmouseover="document.getElementById('o1').src='img_02.gif'" /><br /><ul><li>jQuery využívá při výběru prvků s nějakým stavem selektory s dvojtečkou (např. :first, :last, :selected, :checked)
  46. 46. Pro načtení návratové hodnoty nalezeného prvku v jQuery se používá metoda .val()</li></ul>// použití metody val() pro načtení vybrané hodnoty z combo prvku<br />varhodnota = $("#combooption:selected").val();<br />03-02-udalosti.html<br />
  47. 47. Nejčastější použití JavaScriptu<br /><ul><li>Práce s DOM, selektory, zpracování událostí</li></ul>Ovlivnění výstupu v prohlížeči<br />Zobrazování dialogových oken<br />Řízení prohlížeče (např. pohyb v historii, načtení dokumentu, refresh)<br />Spolupráce s CSS<br />Validace a zpracování formulářů<br />Práce s obrázky – preloading obrázků, obrázkové galerie<br />Práce s okny<br />Třídění dat podle sloupců v tabulkách, datové filtry<br />Grafy<br />Bookmarklety<br />Dynamický web (změna obsahu skriptem, AJAX)<br />18<br />
  48. 48. Ovlivnění výstupu v prohlížeči<br />Obsah webové stránky je možné ovlivnit na straně klienta (v prohlížeči)<br />Při načítání stránky – metodou write() objektu Document, <br />Kdykoliv – změnou vlastnosti innerHTML u vybraného elementu, nebo html() a text() v jQuery.<br />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.<br />19<br />// výpis řetězce, proměnné, hodnoty funkce<br />document.write("nějaký text... ");<br />var mojePromenna = "nějaký text... ";<br />document.write(mojePromenna);<br />document.write(Date());<br />var zmena = document.getElementById("myID");<br />zmena.innerHTML = "<strong>nějaký text</strong> s html elementy";<br />// jQuery<br />$("#myID").html("<strong>další text</strong> s html elementy");<br />$("#myID").text("prostý text bez html elementů");<br />03-03-vystup.html<br />
  49. 49. Generovaný výstup a webové standardy<br />Generování (X)HTML kódu z vizuálních komponent vývojového prostředí je trend <br />Bohužel, tento dynamicky generovaný kód je velmi často nevalidní! Je to chyba!<br />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<br />Nezapomeňte na přístupnost a použitelnost výstupu!<br />JavaScript byl z tohoto hlediska donedávna zatracovanou technologií, ale přístup odborníků se začíná měnit<br />http://zdrojak.root.cz/clanky/tak-nam-zpristupnili-javascript/<br />http://www.w3.org/TR/WCAG20/<br />20<br />
  50. 50. Nejčastější použití JavaScriptu<br /><ul><li>Práce s DOM, selektory, zpracování událostí
  51. 51. Ovlivnění výstupu v prohlížeči</li></ul>Zobrazování dialogových oken<br />Řízení prohlížeče (např. pohyb v historii, načtení dokumentu, refresh)<br />Spolupráce s CSS<br />Validace a zpracování formulářů<br />Práce s obrázky – preloading obrázků, obrázkové galerie<br />Práce s okny<br />Třídění dat podle sloupců v tabulkách, datové filtry<br />Grafy<br />Bookmarklety<br />Dynamický web (změna obsahu skriptem, AJAX)<br />21<br />
  52. 52. Zobrazování dialogových oken<br />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()<br />Jedná se o metody základního objektu Window<br />22<br />// použití metody window.alert()<br /><input type="button" value="Otevři dialogové okno" onclick="window.alert('Ahoj...')" /><br />// použití metody window.prompt()<br />x = window.prompt("Zadej svoje jméno", "");<br />document.write("Tvoje jméno je " + x);<br /><ul><li>Nebo použít framework (např. jQuery), který nabízí mnohem větší možnosti!
  53. 53. http://jqueryui.com/demos/dialog/</li></ul>Zdrojové kódy… prikladyjquery-dialogdevelopment-bundledemosdialog<br />http://www.queness.com/post/77/simple-jquery-modal-window-tutorial<br />
  54. 54. Nejčastější použití JavaScriptu<br /><ul><li>Práce s DOM, selektory, zpracování událostí
  55. 55. Ovlivnění výstupu v prohlížeči
  56. 56. Zobrazování dialogových oken
  57. 57. Řízení prohlížeče (např. pohyb v historii, načtení dokumentu, refresh)</li></ul>Spolupráce s CSS<br />Validace a zpracování formulářů<br />Práce s obrázky – preloading obrázků, obrázkové galerie<br />Práce s okny<br />Třídění dat podle sloupců v tabulkách, datové filtry<br />Grafy<br />Bookmarklety<br />Dynamický web (změna obsahu skriptem, AJAX)<br />23<br />
  58. 58. Řízení prohlížeče<br />Objekt History umožňuje pohyb vpřed a zpět uživatelskou historií prohlížeče<br />24<br />history.back(); // pohyb v historii zpět<br />history.forward(); // pohyb v historii vpřed<br />history.go(-3); // pohyb v historii o daný počet kroků<br />history.go("string"); // pohyb v historii na odkaz obsahující // uvedený řetězec<br /><ul><li>Objekt Location reprezentuje URL v daném okně aktuálně zobrazeného dokumentu</li></ul>// načtení dokumentu z dané adresy<br />location.href = "url";<br />// opětovné nahrání aktuálního dokumentu<br />location.reload(); <br /><ul><li>Obsah stavového řádku lze ovlivnit vlastnostmi objektu Window –> window.status a window.defaultStatus</li></li></ul><li>Nejčastější použití JavaScriptu<br /><ul><li>Práce s DOM, selektory, zpracování událostí
  59. 59. Ovlivnění výstupu v prohlížeči
  60. 60. Zobrazování dialogových oken
  61. 61. Řízení prohlížeče (např. pohyb v historii, načtení dokumentu, refresh)</li></ul>Spolupráce s CSS<br />Validace a zpracování formulářů<br />Práce s obrázky – preloading obrázků, obrázkové galerie<br />Práce s okny<br />Třídění dat podle sloupců v tabulkách, datové filtry<br />Grafy<br />Bookmarklety<br />Dynamický web (změna obsahu skriptem, AJAX)<br />25<br />
  62. 62. Spolupráce s CSS<br />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<br />Nezapomeňte! K jednotlivým elementům na stránce se nejlépe přistupuje přes jejich id!<br />26<br /><div id="test">pokusný div</div><br /><script type="text/javascript"><br />/* <![CDATA[ */<br />functionTestCSS() { <br />document.getElementById('test').style.backgroundColor='red'; <br /> }<br />/* ]]> */<br /></script> <br /><ul><li>jQuery používá pro práci s CSS vlastnost .css()</li></ul>$('#test').css("color","blue");<br />03-04-css.html<br />
  63. 63. CSS layouty v JavaScriptu<br />CSS3 má velmi problematickou implementaci v aktuálně používaných prohlížečích<br />Nepodporu některých CSS3 vlastností v prohlížečích lze už dnes obejít pomocí JavaScriptu<br />Existuje kompletní implementace CSS3 modulu Template layout v JavaScriptu.<br />Jde o plugin do jQuery  <br />Pozor, je to Proof-of-concept a implementace není vhodná k produkčnímu nasazení!<br />http://code.google.com/p/css-template-layout/<br />http://www.w3.org/TR/css3-layout/<br />http://a.deveria.com/csstpl/ (ukázky)<br />27<br />
  64. 64. Nejčastější použití JavaScriptu<br /><ul><li>Práce s DOM, selektory, zpracování událostí
  65. 65. Ovlivnění výstupu v prohlížeči
  66. 66. Zobrazování dialogových oken
  67. 67. Řízení prohlížeče (např. pohyb v historii, načtení dokumentu, refresh)
  68. 68. Spolupráce s CSS</li></ul>Validace a zpracování formulářů<br />Práce s obrázky – preloading obrázků, obrázkové galerie<br />Práce s okny<br />Třídění dat podle sloupců v tabulkách, datové filtry<br />Grafy<br />Bookmarklety<br />Dynamický web (změna obsahu skriptem, AJAX)<br />28<br />
  69. 69. Validace a zpracování formulářů<br />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<br />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ů<br />29<br />document.getElementById('id_elementu').vlastnost<br />document.forms[0].elements[2].vlastnost<br />document.forms[0].id_elementu.vlastnost<br /><ul><li>Pro jQuery existuje velmi propracovaný pluginValidation, který kromě běžných validačních funkcí nabízí i podporu lokalizovaných chybových hlášek
  70. 70. http://bassistance.de/jquery-plugins/jquery-plugin-validation/
  71. 71. http://programujte.com/?akce=clanek&cl=2009090500-jquery-plugin-validation-plugin-pro-snadnou-kontrolu-formularu (jednoduchý český návod)</li></ul>03-05-formular.html<br />
  72. 72. Nejčastější použití JavaScriptu<br /><ul><li>Práce s DOM, selektory, zpracování událostí
  73. 73. Ovlivnění výstupu v prohlížeči
  74. 74. Zobrazování dialogových oken
  75. 75. Řízení prohlížeče (např. pohyb v historii, načtení dokumentu, refresh)
  76. 76. Spolupráce s CSS
  77. 77. Validace a zpracování formulářů</li></ul>Práce s obrázky – preloading obrázků, obrázkové galerie<br />Práce s okny<br />Třídění dat podle sloupců v tabulkách, datové filtry<br />Grafy<br />Bookmarklety<br />Dynamický web (změna obsahu skriptem, AJAX)<br />30<br />
  78. 78. Práce s obrázky – preloading obrázků<br />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<br />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í)<br />31<br />// preload obrázku JavaScriptem, obvykle fce v události onload elementu body<br />var obr1 = new Image();<br />obr1.src = "flag1.jpg";<br /><ul><li>Existuje alternativní řešení bez nutnosti preloaduobrázků
  79. 79. http://www.wellstyled.com/css-nopreload-rollovers.html</li></li></ul><li>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<br />Alternativní řešení –> velmi elegantní je zobrazování obrázků ve stávající stránce s využitím knihoven JavaScriptu<br />http://www.huddletogether.com/projects/lightbox2/ (Lightbox)<br />http://orangoo.com/labs/GreyBox/ (GreyBox)<br />http://www.fortysomething.ca/mt/etc/archives/005400.php (přehled)<br />32<br />Práce s obrázky – obrázkové galerie<br />
  80. 80. Nejčastější použití JavaScriptu<br /><ul><li>Práce s DOM, selektory, zpracování událostí
  81. 81. Ovlivnění výstupu v prohlížeči
  82. 82. Zobrazování dialogových oken
  83. 83. Řízení prohlížeče (např. pohyb v historii, načtení dokumentu, refresh)
  84. 84. Spolupráce s CSS
  85. 85. Validace a zpracování formulářů
  86. 86. Práce s obrázky – preloading obrázků, obrázkové galerie</li></ul>Práce s okny<br />Třídění dat podle sloupců v tabulkách, datové filtry<br />Grafy<br />Bookmarklety<br />Dynamický web (změna obsahu skriptem, AJAX)<br />33<br />
  87. 87. Práce s okny v JavaScriptu<br />V některých případech je potřeba otevírat stránky v novém okně<br />Vzhledem k tomu, že v XHTML 1.0 Strictnení povolen atribut target, provádí se to pomocí JavaScriptu<br />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)!<br />34<br />functionwinopen(url){<br />var win = window.open(url,'okno1','width=400,height=340'); <br />returnfalse;<br />} <br /><a href="http://www.uhk.cz" onclick="return winopen(this.href)">okno</a><br />03-06-odkazy.html<br />
  88. 88. Nejčastější použití JavaScriptu<br /><ul><li>Práce s DOM, selektory, zpracování událostí
  89. 89. Ovlivnění výstupu v prohlížeči
  90. 90. Zobrazování dialogových oken
  91. 91. Řízení prohlížeče (např. pohyb v historii, načtení dokumentu, refresh)
  92. 92. Spolupráce s CSS
  93. 93. Validace a zpracování formulářů
  94. 94. Práce s obrázky – preloading obrázků, obrázkové galerie
  95. 95. Práce s okny</li></ul>Třídění dat podle sloupců v tabulkách, datové filtry<br />Grafy<br />Bookmarklety<br />Dynamický web (změna obsahu skriptem, AJAX)<br />35<br />
  96. 96. Třídění tabulkových dat, datové filtry<br />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í<br />Třídit nebo filtrovat lze data podle jednoduchých datových typů, např. číslo, řetězec, datum, měna apod.<br />Existují hotová řešení (knihovny), které můžete použít!<br />36<br />03-07-trideni.html<br />03-08-filtry.html<br />
  97. 97. Nejčastější použití JavaScriptu<br /><ul><li>Práce s DOM, selektory, zpracování událostí
  98. 98. Ovlivnění výstupu v prohlížeči
  99. 99. Zobrazování dialogových oken
  100. 100. Řízení prohlížeče (např. pohyb v historii, načtení dokumentu, refresh)
  101. 101. Spolupráce s CSS
  102. 102. Validace a zpracování formulářů
  103. 103. Práce s obrázky – preloading obrázků, obrázkové galerie
  104. 104. Práce s okny
  105. 105. Třídění dat podle sloupců v tabulkách, datové filtry</li></ul>Grafy<br />Bookmarklety<br />Dynamický web (změna obsahu skriptem, AJAX)<br />37<br />
  106. 106. Grafy<br />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<br />Pro vytváření grafů v JavaScriptu existuje několik knihoven, obvykle používají značku canvas<br />Fungují ve všech nejrozšířenějších prohlížečích<br />http://code.google.com/p/flot/ (flot je plugin jQuery)<br />http://bluff.jcoglan.com/ (Bluff je port Ruby knihovny Gruff) <br />38<br />
  107. 107. Nejčastější použití JavaScriptu<br /><ul><li>Práce s DOM, selektory, zpracování událostí
  108. 108. Ovlivnění výstupu v prohlížeči
  109. 109. Zobrazování dialogových oken
  110. 110. Řízení prohlížeče (např. pohyb v historii, načtení dokumentu, refresh)
  111. 111. Spolupráce s CSS
  112. 112. Validace a zpracování formulářů
  113. 113. Práce s obrázky – preloading obrázků, obrázkové galerie
  114. 114. Práce s okny
  115. 115. Třídění dat podle sloupců v tabulkách, datové filtry
  116. 116. Grafy</li></ul>Bookmarklety<br />Dynamický web (změna obsahu skriptem, AJAX)<br />39<br />
  117. 117. Bookmarklety<br />Bookmarklet je kód v JavaScriptu uložený v oblíbené záložce (bookmark)<br />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.)<br />Na Internetu je volně k dispozici velké množství bookmarkletů<br />40<br />javascript:příkaz;<br />javascript:resizeTo(800,600) // změna velikosti okna<br />http://bookmarklets.com/tools/categor.html <br />
  118. 118. Nejčastější použití JavaScriptu<br /><ul><li>Práce s DOM, selektory, zpracování událostí
  119. 119. Ovlivnění výstupu v prohlížeči
  120. 120. Zobrazování dialogových oken
  121. 121. Řízení prohlížeče (např. pohyb v historii, načtení dokumentu, refresh)
  122. 122. Spolupráce s CSS
  123. 123. Validace a zpracování formulářů
  124. 124. Práce s obrázky – preloading obrázků, obrázkové galerie
  125. 125. Práce s okny
  126. 126. Třídění dat podle sloupců v tabulkách, datové filtry
  127. 127. Grafy
  128. 128. Bookmarklety</li></ul>Dynamický web (změna obsahu skriptem, AJAX)<br />41<br />
  129. 129. Dynamický web, AJAX <br />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ěď<br />Tato odpověď ze serveru následně může změnit stav nějakého prvku na stránce nebo se dynamicky vytvoří nový element <br />Ve výsledku se tedy (většinou) nekoná reload celé stránky<br />Pro vzdálené volání metod formou výměny XML dat s pevnou strukturou se ustálil pojem AJAX (AsynchronousJavaScriptand XML)<br />AJAX nejčastěji používá protokol XML–RPC (využívá HTTP) a třídu XmlHttpRequest<br />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)<br />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<br />Bližší informace k AJAXu a spol. budou v přednášce o aktuálních trendech na webu<br />42<br />
  130. 130. Nejčastější použití JavaScriptu<br /><ul><li>Práce s DOM, selektory, zpracování událostí
  131. 131. Ovlivnění výstupu v prohlížeči
  132. 132. Zobrazování dialogových oken
  133. 133. Řízení prohlížeče (např. pohyb v historii, načtení dokumentu, refresh)
  134. 134. Spolupráce s CSS
  135. 135. Validace a zpracování formulářů
  136. 136. Práce s obrázky – preloading obrázků, obrázkové galerie
  137. 137. Práce s okny
  138. 138. Třídění dat podle sloupců v tabulkách, datové filtry
  139. 139. Grafy
  140. 140. Bookmarklety
  141. 141. Dynamický web (změna obsahu skriptem, AJAX)</li></ul>43<br />
  142. 142. Agenda3<br /><ul><li>Co je to JavaScript?
  143. 143. Vložení skriptu do zdrojového kódu stránky
  144. 144. Syntaxe, metody, vlastní funkce
  145. 145. Knihovny (frameworky)
  146. 146. Nejčastější použití JavaScriptu
  147. 147. Internet, doporučená literatura</li></ul>44<br />
  148. 148. Odkazy na Internetu<br />http://www.w3schools.com/js/default.asp<br />http://www.jakpsatweb.cz/javascript/<br />http://zdrojak.root.cz/zpravicky/zdroje-prikladu-pro-javascriptove-vyvojare/<br />http://www.hotscripts.com/<br />http://archive.devx.com/sourcebank/<br />http://en.wikipedia.org/wiki/List_of_JavaScript_libraries<br />http://bookmarklets.com/tools/categor.html<br />http://www.jquery.com<br />http://scripty2.com/ (knihovna efektů, spíše pro zajímavost)<br />http://www.1stwebdesigner.com/resources/javascript-sliders-scrollers/<br />http://www.root.cz/clanky/ajax/<br />http://www.zive.cz/h/Programovani/Ar.asp?ARI=109710&CAI=2094<br />http://zdrojak.root.cz/clanky/node-js-s-javascriptem-na-server/ (JavaScript na serveru)<br />45<br />
  149. 149. Doporučená literatura<br />Flanagan, David – JavaScript Kompletní průvodce, ComputerPress 2002 <br />Václavek, Petr – JavaScript – Hotová řešení, CP Books 2003<br />Asleson, Ryan; Schutta, T. Nathaniel – Ajax – vytváříme vysoce interaktivní webové aplikace, ComputerPress 2006<br />46<br />
  150. 150. Souhrn3<br /><ul><li>Co je to JavaScript?
  151. 151. Vložení skriptu do zdrojového kódu stránky
  152. 152. Syntaxe, metody, vlastní funkce
  153. 153. Knihovny (frameworky)
  154. 154. Nejčastější použití JavaScriptu
  155. 155. Internet, doporučená literatura</li></ul>47<br />

×