Your SlideShare is downloading. ×
0
TNPW2-2012-03
TNPW2-2012-03
TNPW2-2012-03
TNPW2-2012-03
TNPW2-2012-03
TNPW2-2012-03
TNPW2-2012-03
TNPW2-2012-03
TNPW2-2012-03
TNPW2-2012-03
TNPW2-2012-03
TNPW2-2012-03
TNPW2-2012-03
TNPW2-2012-03
TNPW2-2012-03
TNPW2-2012-03
TNPW2-2012-03
TNPW2-2012-03
TNPW2-2012-03
TNPW2-2012-03
TNPW2-2012-03
TNPW2-2012-03
TNPW2-2012-03
TNPW2-2012-03
TNPW2-2012-03
TNPW2-2012-03
TNPW2-2012-03
TNPW2-2012-03
TNPW2-2012-03
TNPW2-2012-03
TNPW2-2012-03
TNPW2-2012-03
TNPW2-2012-03
TNPW2-2012-03
TNPW2-2012-03
TNPW2-2012-03
TNPW2-2012-03
TNPW2-2012-03
TNPW2-2012-03
TNPW2-2012-03
TNPW2-2012-03
TNPW2-2012-03
TNPW2-2012-03
TNPW2-2012-03
TNPW2-2012-03
TNPW2-2012-03
TNPW2-2012-03
TNPW2-2012-03
TNPW2-2012-03
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

TNPW2-2012-03

1,294

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,294
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
3
Comments
0
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. TNPW22011/201203 – JavaScriptMgr. Lukáš Vaceklukas.vacek@uhk.cz
  • 2. 2Agenda • 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. 3Co 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/JavaScripthttp://en.wikipedia.org/wiki/ECMAScript#Dialectshttp://en.wikipedia.org/wiki/JavaScript_enginehttp://www.w3schools.com/js/default.asphttp://www.root.cz/clanky/spor-o-budoucnost-javascriptu-vyresen/http://zdrojak.root.cz/clanky/ecmascript-strict-mode-ve-firefoxu-4/
  • 4. 4Agenda  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
  • 5. 5Vlož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. 6Prá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. 7Agenda  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
  • 8. 8Syntaxe 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řitdocument.write("Text... "); // předdefinovaná metodamojeFunkce(); // 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. 9Vlastní 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!<script type="text/javascript">/* <![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. 10Agenda  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
  • 11. 11Knihovny (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. 12jQuery• 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.htmlhttp://jquery.jslab.net/zkousecka/
  • 13. 13Nač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><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ů!
  • 14. 14Agenda  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
  • 15. 15Nejč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. 16Prá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 JavaScriptudocument.getElementsByTagName(nazev_tagu)// výběr prvků dané třídy v JavaScriptuNení! 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. 17Zpracová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 prvkuvar hodnota = $("#combo option:selected").val();03-02-udalosti.html
  • 18. 18Nejč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)
  • 19. 19Ovlivně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 funkcedocument.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. 20Generovaný 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. 21Nejč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)
  • 22. 22Zobrazová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. 23Nejč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)
  • 24. 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-navhistory.back(); // pohyb v historii zpěthistory.forward(); // pohyb v historii vpředhistory.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é adresylocation.href = "url";// opětovné nahrání aktuálního dokumentulocation.reload(); • Obsah stavového řádku lze ovlivnit vlastnostmi objektu Window –> window.status a window.defaultStatus
  • 25. 25Nejč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)
  • 26. 26Spoluprá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><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
  • 27. 27CSS3 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. 28Nejč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)
  • 29. 29Validace 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).vlastnostdocument.forms[0].elements[2].vlastnostdocument.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ávod03-05-formular.html
  • 30. 30Nejč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)
  • 31. 31Prá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 bodyvar 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. 32Prá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 JavaScriptuhttp://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. 33Nejč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)
  • 34. 34Prá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. 35Nejč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)
  • 36. 36Tří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. 37Nejč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)
  • 38. 38Grafy• 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. 39Nejč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)
  • 40. 40Bookmarklety • 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 oknahttp://bookmarklets.com/tools/categor.html
  • 41. 41Nejč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)
  • 42. 42Dynamický 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í prezentaceBližší informace k AJAXu a spol. budou v přednášce o aktuálních trendech na webu
  • 43. 43Nejč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)
  • 44. 44JavaScript 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. 45Nejč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)
  • 46. 46Agenda  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
  • 47. 47Odkazy 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. 48Doporuč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. 49Souhrn  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

×