49
| Date post: | 25-Dec-2014 |
| Category: |
Technology |
| Upload: | lukas-vacek |
| View: | 1,251 times |
| Download: | 0 times |
2
Agenda
3• Co je to JavaScript?• Vložení skriptu do zdrojového kódu stránky• Syntaxe, metody, vlastní funkce• Knihovny (frameworky)• Nejčastější použití JavaScriptu• Internet, doporučená literatura
3
Co je to JavaScript?
• JavaScript je interpretovatelný (neprobíhá kompilování!) programovací jazyk se základními objektově orientovanými vlastnostmi
• V polovině 90. let jej vytvořila firma Netscape a jeho interpret (běhové prostředí) je standardní součástí webových prohlížečů
• Existuje norma ECMAScript pro použití JavaScriptu a jeho odvozenin (JScript od MS…) • Aktuální verze ECMAScript Edition 5.1 (6/2011)• JavaScript umožňuje vložit do webové stránky proveditelný obsah, tj. stránka může
obsahovat dynamické programy, které s uživatelem komunikují na straně klienta (prohlížeče) >> může zvýšit interaktivitu s uživatelem
• JavaScript je označován jako tzv. assembler webu• Využití HTML5 + CSS3 + JavaScriptu je aktuálním trendem při návrhu UI aplikací
http://cs.wikipedia.org/wiki/JavaScript http://en.wikipedia.org/wiki/ECMAScript#Dialectshttp://en.wikipedia.org/wiki/JavaScript_enginehttp://www.w3schools.com/js/default.asp http://www.root.cz/clanky/spor-o-budoucnost-javascriptu-vyresen/ http://zdrojak.root.cz/clanky/ecmascript-strict-mode-ve-firefoxu-4/
4
Agenda
3 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
Vložení JavaScriptu do (X)HTML kódu
• Interní skript
• Externí skript (knihovny)
<script type="text/javascript">/* <![CDATA[ */
kód skriptu
/* ]]> */</script>
<script type="text/javascript" src="mujskript.js"></script>
6
Práce s kódem v JavaScriptu
• Rozsáhlejší aplikační logika se ukládá do samostatných souborů s příponou *.js mimo zdrojový (X)HTML kód stránky
• Zdrojový kód lze vizuálně strukturovat pro větší přehlednost, stejně tak je možné jej komprimovat v okamžiku nasazení na produkčním prostředí webového serveru
• http://dean.edwards.name/packer/ • http://yui.2clics.net/
• Debugování zdrojového kódu v JavaScriptu už dnes není problém, existuje celá řada vývojových prostředí a nástrojů, které to umožňují
• https://addons.mozilla.org/en-US/firefox/addon/1843 (Firebug pro Mozilla Firefox)• http://code.google.com/p/jsdt/ • http://www.myeclipseide.com/module-htmlpages-display-pid-57.html
7
Agenda
3 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
Syntaxe jazyka, metody, vlákna
• Jazyk JavaScript vychází ze syntaxe jazyka C (C++, Java, C#, PHP…)• Jednotlivé příkazy JavaScriptu se oddělují ";"• Hlavním rysem JavaScriptu je používání tzv. metod• Metoda je objektově orientovaný termín pro funkci nebo proceduru – část zdrojového
kódu provádějící určitou činnost, nejčastěji řízení obsahu webových stránek a (X)HTML formulářů
• Řada funkcí a procedur je přímo součástí JavaScriptu, další funkce je možné podle aktuální potřeby vytvořit
document.write("Text... "); // předdefinovaná 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
Vlastní funkce
• Funkce v JavaScriptu jsou pojmenované části programového kódu, které lze vyvolávat podle potřeby (i opakovaně)
• Jako svůj výstup funkce provede určitou naprogramovanou činnost nebo může vrátit nějakou hodnotu
• Vlastní funkci je nutné nadefinovat před jejím prvním použitím!
<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
Agenda
3 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
Knihovny (frameworky)
• Existuje celá řada nejrůznějších JavaScript knihoven, které umožňují vývojářům velmi efektivním způsobem rozšířit funkcionalitu webových stránek
• K nabízené funkcionalitě těchto knihoven patří např. procházení a manipulace s DOM stránky, zpracování událostí v prohlížeči, práce s obrázky, načítání dat ze serveru, podpora drag&drop, práce s cookies apod.
• Mezi nejpoužívanější knihovny patří např. JQuery, Prototype, script.aculo.us, mootools, Yahoo! UI (YUI), Dojo a další
http://jquery.com/http://prototypejs.org/http://script.aculo.us/http://dojotoolkit.org/http://developer.yahoo.com/yui/http://www.mootools.net/
http://code.google.com/intl/cs/apis/libraries/
12
jQuery
• Velikostí malá (jeden soubor, tzv. minified verze 1.7.1 má 31 KB!) a přitom velmi kompaktní JavaScript knihovna poskytující interaktivitu mezi JavaScriptem a (X)HTML v okně webového prohlížeče
• Autorem je John Resig (akce BarCamp, 2006)• Jde o svobodný software pod licencí MIT a GPL• Je např. součástí frameworků Microsoft ASP.NET AJAX, Spring na platformě Java nebo
Nokia jQuery na mobilech• Základní knihovnu jQuery je možné rozšířit pomocí pluginů
http://jquery.com/ http://citron.blueboard.cz/clanek-331-jquery-pro-zacatecniky-zaklady.html http://jquery.jslab.net/zkousecka/
13
Načtení knihovny na stránce
• Často je vybraná knihovna uložena na stejném webovém serveru jako webové stránky• Doporučenou variantou je využití existujících souborů z CDN (Content Delivery Network)
v požadované verzi např. jQuery z Google API serveru nebo jQuery CDN…
• http://code.jquery.com/jquery-1.6.4.min.js
<script src="http://code.jquery.com/jquery-1.6.4.min.js" type="text/javascript"></script><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
Agenda
3 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
Nejčastější použití JavaScriptu
• Práce s DOM, selektory, zpracování událostí• Ovlivnění výstupu v prohlížeči• Zobrazování dialogových oken• Řízení prohlížeče (např. pohyb v historii, načtení dokumentu, refresh)• Spolupráce s CSS• Validace a zpracování formulářů• Práce s obrázky – preloading obrázků, obrázkové galerie• Práce s okny• Třídění dat podle sloupců v tabulkách, datové filtry• Grafy• Bookmarklety• Dynamický web (změna obsahu skriptem, AJAX)• Na straně serveru (Node.js)
16
Práce s DOM, selektory
• Výběr jednotlivých prvků (DOM objektů) na webové stránce v prohlížeči• Následné zpracování událostí a manipulace s vlastnostmi• DOM stránky lze v JavaScriptu upravovat i po jejím načtení!
// výběr prvku podle ID v JavaScriptu, na validní stránce je 1!document.getElementById('id_prvku')// výběr prvků podle typu elementu v 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
• 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'" />
Zpracování událostí na stránce, vlastnosti prvků
• 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
Nejčastější použití JavaScriptu
Práce s DOM, selektory, zpracování událostí• Ovlivnění výstupu v prohlížeči• Zobrazování dialogových oken• Řízení prohlížeče (např. pohyb v historii, načtení dokumentu, refresh)• Spolupráce s CSS• Validace a zpracování formulářů• Práce s obrázky – preloading obrázků, obrázkové galerie• Práce s okny• Třídění dat podle sloupců v tabulkách, datové filtry• Grafy• Bookmarklety• Dynamický web (změna obsahu skriptem, AJAX)• Na straně serveru (Node.js)
19
Ovlivnění výstupu v prohlížeči
• Obsah webové stránky je možné ovlivnit na straně klienta (v prohlížeči)▫ Při načítání stránky – metodou write() objektu Document, ▫ Kdykoliv – změnou vlastnosti innerHTML u vybraného elementu, nebo html() a text() v jQuery.
• Oba způsoby umožňují doplnit na stránku libovolný obsah, který se může podle potřeby měnit, např. datum, text v odstavci, nové elementy apod.
// výpis řetězce, proměnné, hodnoty 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
Generovaný výstup a webové standardy
• Generování (X)HTML kódu z vizuálních komponent vývojového prostředí je trend • Bohužel, tento dynamicky generovaný kód je velmi často nevalidní! Je to chyba!• Berte v úvahu, že pro výstup generovaný v JavaScriptu platí stejná pravidla jako pro
zdrojový kód, který máte připravený na webovém serveru předem• Nezapomeňte na přístupnost a použitelnost výstupu!• JavaScript byl z tohoto hlediska donedávna zatracovanou technologií, ale přístup
odborníků se začíná měnit
• http://zdrojak.root.cz/clanky/tak-nam-zpristupnili-javascript/ • http://www.w3.org/TR/WCAG20/
21
Nejčastější použití JavaScriptu
Práce s DOM, selektory, zpracování událostí Ovlivnění výstupu v prohlížeči• Zobrazování dialogových oken• Řízení prohlížeče (např. pohyb v historii, načtení dokumentu, refresh)• Spolupráce s CSS• Validace a zpracování formulářů• Práce s obrázky – preloading obrázků, obrázkové galerie• Práce s okny• Třídění dat podle sloupců v tabulkách, datové filtry• Grafy• Bookmarklety• Dynamický web (změna obsahu skriptem, AJAX)• Na straně serveru (Node.js)
22
Zobrazování dialogových oken
• K zobrazení dialogového okna s určenou zprávou nebo k zadání vstupu od uživatele se používají funkce alert() resp. prompt()
• Jedná se o metody základního objektu Window
// použití metody window.alert()<input type="button" value="Otevři dialogové okno" onclick="window.alert('Ahoj...')" />
// použití metody window.prompt()x = window.prompt("Zadej svoje jméno", "");document.write("Tvoje jméno je " + x);
• Nebo použít framework (např. jQuery), který nabízí mnohem větší možnosti!• http://docs.jquery.com/UI/Dialog • Současným trendem jsou tzv. Single Page Apps
23
Nejčastější použití JavaScriptu
Práce s DOM, selektory, zpracování událostí Ovlivnění výstupu v prohlížeči Zobrazování dialogových oken• Řízení prohlížeče (např. pohyb v historii, načtení dokumentu, refresh)• Spolupráce s CSS• Validace a zpracování formulářů• Práce s obrázky – preloading obrázků, obrázkové galerie• Práce s okny• Třídění dat podle sloupců v tabulkách, datové filtry• Grafy• Bookmarklety• Dynamický web (změna obsahu skriptem, AJAX)• Na straně serveru (Node.js)
24
Řízení prohlížeče• Objekt History umožňuje pohyb vpřed a zpět uživatelskou historií prohlížeče• Pozor na AJAX aplikace a práci s historií! Používají se tzv. #hashtag a pluginy, např.
▫ http://benalman.com/projects/jquery-bbq-plugin/ ▫ https://github.com/Panmind/jquery-ajax-nav
history.back(); // pohyb v historii zpě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
// načtení dokumentu z dané adresylocation.href = "url";
// opětovné nahrání aktuálního dokumentulocation.reload();
• Objekt Location reprezentuje URL v daném okně aktuálně zobrazeného dokumentu
• Obsah stavového řádku lze ovlivnit vlastnostmi objektu Window –> window.status a window.defaultStatus
25
Nejčastější použití JavaScriptu
Práce s DOM, selektory, zpracování událostí Ovlivnění výstupu v prohlížeči Zobrazování dialogových oken Řízení prohlížeče (např. pohyb v historii, načtení dokumentu, refresh)• Spolupráce s CSS• Validace a zpracování formulářů• Práce s obrázky – preloading obrázků, obrázkové galerie• Práce s okny• Třídění dat podle sloupců v tabulkách, datové filtry• Grafy• Bookmarklety• Dynamický web (změna obsahu skriptem, AJAX)• Na straně serveru (Node.js)
26
Spolupráce s CSS
• JavaScript nabízí poměrně slušnou podporu pro přístup k jednotlivým elementům stránky a umožňuje nastavovat jejich CSS vlastnosti
• Nezapomeňte! K jednotlivým elementům na stránce se nejlépe přistupuje přes jejich id!
<div id="test">pokusný div</div>
<script type="text/javascript">/* <![CDATA[ */
function TestCSS() { document.getElementById('test').style.backgroundColor='red'; }/* ]]> */</script>
03-04-css.html
• jQuery používá pro práci s CSS vlastnost .css()
$('#test').css("color","blue");
27
CSS3 v JavaScriptu
• CSS3 má problematickou implementaci (zlepšuje se) v aktuálně používaných prohlížečích• Nepodporu některých CSS3 (a HTML5) vlastností ve starších prohlížečích lze už dnes
obejít pomocí tzv. polyfill knihoven, např. Modernizr
• http://zdrojak.root.cz/clanky/javascriptareni-shim-fallback-polyfill/• https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-browser-Polyfills
• Existuje kompletní implementace CSS3 modulu Template layout v JavaScriptu.• Jde o plugin do jQuery • Pozor, je to Proof-of-concept a implementace není vhodná k produkčnímu nasazení!
• http://code.google.com/p/css-template-layout/ • http://www.w3.org/TR/css3-layout/ • http://a.deveria.com/csstpl/ (ukázky)
28
Nejčastější použití JavaScriptu
Práce s DOM, selektory, zpracování událostí Ovlivnění výstupu v prohlížeči Zobrazování dialogových oken Řízení prohlížeče (např. pohyb v historii, načtení dokumentu, refresh) Spolupráce s CSS• Validace a zpracování formulářů• Práce s obrázky – preloading obrázků, obrázkové galerie• Práce s okny• Třídění dat podle sloupců v tabulkách, datové filtry• Grafy• Bookmarklety• Dynamický web (změna obsahu skriptem, AJAX)• Na straně serveru (Node.js)
29
Validace a zpracování formulářů
• Při použití (X)HTML formuláře na stránce je většinou vhodné před odesláním dat provést kontrolu správnosti vyplnění jednotlivých položek formuláře uživatelem
• Identifikace jednotlivých prvků formuláře se nejčastěji provádí pomocí jejich id, je možné použít i pole formulářů a prvků
document.getElementById('id_elementu').vlastnostdocument.forms[0].elements[2].vlastnostdocument.forms[0].id_elementu.vlastnost
03-05-formular.html
• Pro jQuery existuje velmi propracovaný plugin Validation, který kromě běžných validačních funkcí nabízí i podporu lokalizovaných chybových hlášek
• http://bassistance.de/jquery-plugins/jquery-plugin-validation/ • Jednoduchý český návod
30
Nejčastější použití JavaScriptu
Práce s DOM, selektory, zpracování událostí Ovlivnění výstupu v prohlížeči Zobrazování dialogových oken Řízení prohlížeče (např. pohyb v historii, načtení dokumentu, refresh) Spolupráce s CSS Validace a zpracování formulářů• Práce s obrázky – preloading obrázků, obrázkové galerie• Práce s okny• Třídění dat podle sloupců v tabulkách, datové filtry• Grafy• Bookmarklety• Dynamický web (změna obsahu skriptem, AJAX)• Na straně serveru (Node.js)
31
Práce s obrázky – preloading obrázků (trochu historie)
• V JavaScriptu je možné pracovat s jednotlivými obrázky na stránce a některé vlastnosti obrázků měnit za chodu skriptu
• Někdy (např. při použití animovaného obrázkového menu) je vhodné předem (nejlépe v okamžiku načítání stránky) načíst obrázky do cache prohlížeče, ale zobrazit je až později, když jsou potřeba (z cache prohlížeče se pak rychleji načítají)
// preload obrázku JavaScriptem, obvykle fce v události onload elementu 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
• Běžné řešení >> po kliknutí na náhled vybraného obrázku na webové stránce je tento zobrazen ve své originální (tj. větší) velikosti ve stávajícím nebo novém okně prohlížeče
• Alternativní řešení >> velmi elegantní je zobrazování obrázků ve stávající stránce s využitím knihoven JavaScriptu
http://www.huddletogether.com/projects/lightbox2/ (Lightbox)http://plugins.jquery.com/plugin-tags/lightbox-gallery (jQuery pluginy)http://www.fortysomething.ca/mt/etc/archives/005400.php (přehled)
Práce s obrázky – obrázkové galerie
33
Nejčastější použití JavaScriptu
Práce s DOM, selektory, zpracování událostí Ovlivnění výstupu v prohlížeči Zobrazování dialogových oken Řízení prohlížeče (např. pohyb v historii, načtení dokumentu, refresh) Spolupráce s CSS Validace a zpracování formulářů Práce s obrázky – preloading obrázků, obrázkové galerie• Práce s okny• Třídění dat podle sloupců v tabulkách, datové filtry• Grafy• Bookmarklety• Dynamický web (změna obsahu skriptem, AJAX)• Na straně serveru (Node.js)
34
Práce s okny v JavaScriptu
• V některých případech je potřeba otevírat stránky v novém okně• Vzhledem k tomu, že v XHTML 1.0 Strict není povolen atribut target, provádí se to
pomocí JavaScriptu• Při použití JavaScriptu je třeba brát v úvahu možnost vypnutého skriptování na straně
klienta a tuto možnost ošetřit (negativní/pozitivní politika)!
JavaScript: function winopen(url){ var win = window.open(url,'okno1','width=400,height=340'); return false;}
HTML: <a href="http://www.uhk.cz" onclick="return winopen(this.href)">okno</a>
jQuery: $(document).ready(function(){ $('a[rel="external"]').click( function() { window.open( $(this).attr('href') ); return false; }); });
jQuery: $(document).ready(function() { $('a[rel="external"]').attr('target', '_blank'); });
HTML: <a href="http://www.google.com" rel="external">Google</a>
03-06-odkazy.html
35
Nejčastější použití JavaScriptu
Práce s DOM, selektory, zpracování událostí Ovlivnění výstupu v prohlížeči Zobrazování dialogových oken Řízení prohlížeče (např. pohyb v historii, načtení dokumentu, refresh) Spolupráce s CSS Validace a zpracování formulářů Práce s obrázky – preloading obrázků, obrázkové galerie Práce s okny• Třídění dat podle sloupců v tabulkách, datové filtry• Grafy• Bookmarklety• Dynamický web (změna obsahu skriptem, AJAX)• Na straně serveru (Node.js)
36
Třídění tabulkových dat, datové filtry
• Pomocí JavaScriptu lze data v tabulce na straně klienta (prohlížeče) jednoduše třídit nebo filtrovat, a to bez nutnosti jejich opakovaného načítání ze serveru (databáze) při aktualizaci zobrazení
• Třídit nebo filtrovat lze data podle jednoduchých datových typů, např. číslo, řetězec, datum, měna apod.
• Existují hotová řešení (knihovny), které můžete použít!
• http://tablesorter.com/docs/ (jQuery Tablesorter)• http://www.datatables.net/ (jQuery DataTables)• http://www.webdesignbooth.com/15-great-jquery-plugins-for-better-table-
manipulation/
03-07-trideni.html – pomocí jQuery DataTables
37
Nejčastější použití JavaScriptu
Práce s DOM, selektory, zpracování událostí Ovlivnění výstupu v prohlížeči Zobrazování dialogových oken Řízení prohlížeče (např. pohyb v historii, načtení dokumentu, refresh) Spolupráce s CSS Validace a zpracování formulářů Práce s obrázky – preloading obrázků, obrázkové galerie Práce s okny Třídění dat podle sloupců v tabulkách, datové filtry• Grafy• Bookmarklety• Dynamický web (změna obsahu skriptem, AJAX)• Na straně serveru (Node.js)
38
Grafy
• Pro vkládání grafů na webové stránky se obvykle používají obrázky generované na straně serveru, méně častěji potom Flash nebo JavaScript na straně klienta
• Pro vytváření grafů v JavaScriptu existuje několik knihoven, obvykle používají značku canvas
• Fungují ve všech nejrozšířenějších prohlížečích
• http://code.google.com/p/flot/ (flot je plugin jQuery)• http://bluff.jcoglan.com/ (Bluff je port Ruby knihovny Gruff)
39
Nejčastější použití JavaScriptu
Práce s DOM, selektory, zpracování událostí Ovlivnění výstupu v prohlížeči Zobrazování dialogových oken Řízení prohlížeče (např. pohyb v historii, načtení dokumentu, refresh) Spolupráce s CSS Validace a zpracování formulářů Práce s obrázky – preloading obrázků, obrázkové galerie Práce s okny Třídění dat podle sloupců v tabulkách, datové filtry Grafy• Bookmarklety• Dynamický web (změna obsahu skriptem, AJAX)• Na straně serveru (Node.js)
40
Bookmarklety
• Bookmarklet je kód v JavaScriptu uložený v oblíbené záložce (bookmark)• Místo běžné URL adresy obsahuje jeden nebo více příkazů JavaScriptu, které vykonávají
nějakou konkrétní činnost, která původně na stránce nebyla (zvětšení písma, podtržení odkazů apod.)
• Na Internetu je volně k dispozici velké množství bookmarkletů
javascript:příkaz;
javascript:resizeTo(800,600) // změna velikosti okna
http://bookmarklets.com/tools/categor.html
41
Nejčastější použití JavaScriptu
Práce s DOM, selektory, zpracování událostí Ovlivnění výstupu v prohlížeči Zobrazování dialogových oken Řízení prohlížeče (např. pohyb v historii, načtení dokumentu, refresh) Spolupráce s CSS Validace a zpracování formulářů Práce s obrázky – preloading obrázků, obrázkové galerie Práce s okny Třídění dat podle sloupců v tabulkách, datové filtry Grafy Bookmarklety• Dynamický web (změna obsahu skriptem, AJAX)• Na straně serveru (Node.js)
42
Dynamický web, AJAX
• Reakce na události vyvolané uživatelem na straně klienta se posílají přes protokol HTTP ke zpracování na server a stránka obdrží odpověď
• Tato odpověď ze serveru následně může změnit stav nějakého prvku na stránce nebo se dynamicky vytvoří nový element
• Ve výsledku se tedy (většinou) nekoná reload celé stránky• Pro vzdálené volání metod formou výměny XML dat s pevnou strukturou se ustálil pojem
AJAX (Asynchronous JavaScript and XML)• AJAX nejčastěji používá protokol XML–RPC (využívá HTTP) a třídu XmlHttpRequest
• Komunikace s využitím AJAXu nemusí být asynchronní, skriptovacím jazykem nemusí být JavaScript a data nemusí být přenášena pouze pomocí XML (textový řetězec, stream, binární data)
• Používají se různé návrhové vzory a standardy (JSON apod.), v poslední době se diskutuje o tzv. šablonovacích systémech pro oddělení aplikačních dat a jejich vizuální prezentace
Bližší informace k AJAXu a spol. budou v přednášce o aktuálních trendech na webu
43
Nejčastější použití JavaScriptu
Práce s DOM, selektory, zpracování událostí Ovlivnění výstupu v prohlížeči Zobrazování dialogových oken Řízení prohlížeče (např. pohyb v historii, načtení dokumentu, refresh) Spolupráce s CSS Validace a zpracování formulářů Práce s obrázky – preloading obrázků, obrázkové galerie Práce s okny Třídění dat podle sloupců v tabulkách, datové filtry Grafy Bookmarklety Dynamický web (změna obsahu skriptem, AJAX)• Na straně serveru (Node.js)
44
JavaScript na serveru (Node.js)
• Už ve druhé polovině 90. let se JavaScript používal na straně serveru (technologie ASP od fy Microsoft umožňovala kromě VB Scriptu použít i JScript)
• „Node.js je „evented I/O framework for V8“, což si můžeme volně představit jako engine V8, rozšířený o funkce, které umožňují prováděným skriptům přistupovat k souborům či síťovým funkcím. Což v praxi znamená, že můžeme vytvořit server, který „naslouchá“ na určeném portu téměř stejným způsobem, jakým vytváříme například obslužné metody pro události v prohlížeči.“ – Martin Malý (Zdroják)
• http://en.wikipedia.org/wiki/Nodejs • http://en.wikipedia.org/wiki/CommonJS • http://zdrojak.root.cz/clanky/node-js-s-javascriptem-na-server/ • http://geddyjs.org/ (Node.js framework)
45
Nejčastější použití JavaScriptu
Práce s DOM, selektory, zpracování událostí Ovlivnění výstupu v prohlížeči Zobrazování dialogových oken Řízení prohlížeče (např. pohyb v historii, načtení dokumentu, refresh) Spolupráce s CSS Validace a zpracování formulářů Práce s obrázky – preloading obrázků, obrázkové galerie Práce s okny Třídění dat podle sloupců v tabulkách, datové filtry Grafy Bookmarklety Dynamický web (změna obsahu skriptem, AJAX) Na straně serveru (Node.js)
46
Agenda
3 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
Odkazy na Internetu
• http://www.w3schools.com/js/default.asp • http://zdrojak.root.cz/zpravicky/zdroje-prikladu-pro-javascriptove-vyvojare/
http://www.hotscripts.com/
• http://en.wikipedia.org/wiki/List_of_JavaScript_libraries• http://www.jquery.com • http://bookmarklets.com/tools/categor.html• http://scripty2.com/ (knihovna efektů, spíše pro zajímavost)• http://www.1stwebdesigner.com/resources/javascript-sliders-scrollers/ • http://www.queness.com/post/9283/10-addictive-games-you-wouldnt-believe-theyre-made-with-
javascript (hry v JavaScriptu)• http://www.jspatterns.com/scripting-photoshop-with-javascript/ (skriptování ve Photoshopu)
• http://www.root.cz/clanky/ajax/
• http://zdrojak.root.cz/clanky/node-js-s-javascriptem-na-server/ (JavaScript na serveru)
48
Doporučená literatura
• Flanagan, David – JavaScript Kompletní průvodce, Computer Press 2002 • Václavek, Petr – JavaScript – Hotová řešení, CP Books 2003• Asleson, Ryan; Schutta, T. Nathaniel – Ajax – vytváříme vysoce interaktivní webové
aplikace, Computer Press 2006• Chaffer, Jonathan; Swedberg, Karl – Learning jQuery 1.3, Packt Publishing 2009• Bibeault, Bear; Katz, Yehuda – jQuery in Action, Second Edition, Manning Publications
2010
49
Souhrn
3 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
