SlideShare a Scribd company logo
TNPW2
2011/2012
03 – JavaScript


Mgr. Lukáš Vacek
lukas.vacek@uhk.cz
2




Agenda

         •   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#Dialects
http://en.wikipedia.org/wiki/JavaScript_engine
http://www.w3schools.com/js/default.asp
http://www.root.cz/clanky/spor-o-budoucnost-javascriptu-vyresen/
http://zdrojak.root.cz/clanky/ecmascript-strict-mode-ve-firefoxu-4/
4




Agenda

          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
<script type="text/javascript">
/* <![CDATA[ */

kód skriptu

/* ]]> */
</script>


 • Externí skript (knihovny)
<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

          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á metoda
mojeFunkce();                             // 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

          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

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

Zpracová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 prvku
var 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 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
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ět
history.forward();                //   pohyb v   historii   vpřed
history.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é adresy
location.href = "url";

// opětovné nahrání aktuálního dokumentu
location.reload();


 • 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>


 • jQuery používá pro práci s CSS vlastnost .css()
$('#test').css("color","blue");


03-04-css.html
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').vlastnost
document.forms[0].elements[2].vlastnost
document.forms[0].id_elementu.vlastnost

 • Pro jQuery existuje velmi propracovaný plugin Validation, který kromě běžných
   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


03-05-formular.html
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 body
var 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

Práce s obrázky – obrázkové galerie
• Běžné řešení >> po kliknutí na náhled vybraného obrázku na webové stránce je tento
  zobrazen ve své originální (tj. 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)
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

          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

          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

More Related Content

PPTX
TNPW2-2013-03
PPTX
TNPW2-2011-03
PPTX
TNPW2-2014-03
PPTX
TNPW2-2012-05
PPTX
TNPW2-2014-05
PPTX
TNPW2-2013-04
PPTX
Čtvrtkon #71 - Marian Benčat - Angular a NativeScript
PPTX
TNPW2-2012-06
TNPW2-2013-03
TNPW2-2011-03
TNPW2-2014-03
TNPW2-2012-05
TNPW2-2014-05
TNPW2-2013-04
Čtvrtkon #71 - Marian Benčat - Angular a NativeScript
TNPW2-2012-06

Viewers also liked (8)

PPS
London From Above
PPTX
TNPW2-2013-07
PPTX
TNPW2-2013-06
PPTX
TNPW2-2016-03
PPTX
TNPW2-2016-05
PPTX
TNPW2-2016-06
PPTX
TNPW2-2016-01
PPTX
TNPW2-2016-04
London From Above
TNPW2-2013-07
TNPW2-2013-06
TNPW2-2016-03
TNPW2-2016-05
TNPW2-2016-06
TNPW2-2016-01
TNPW2-2016-04
Ad

Similar to TNPW2-2012-03 (20)

PPTX
TNPW2-2012-07
PDF
node.js: zápisky z fronty (Battle guide to node.js)
PDF
Smalltalk prakticky [CZ]
PPTX
TNPW2-2011-08
PPTX
TNPW2-2013-05
PPTX
Webové technologie
PPT
Rich Internet Applications 2009 (Czech)
PPTX
TNPW2-2013-02
ODP
Ondra Kučera: Otevřený web a jeho současný stav
PPT
JavaScript
PPT
2010 Web Technologie 1
PPTX
TNPW2-2012-02
PDF
Vyhledávače a JavaScript
ODP
XSS PHP CSP ETC OMG WTF BBQ
PDF
Bez HTML5/CSS3 to nejde
PDF
Optimalizace webových aplikací
PPTX
TNPW2-2012-04
ODP
20101124 Aplikované nástroje SW inženýra
PDF
Webový front-end ve službách mobilního vývojáře
PPTX
TNPW2-2014-02
TNPW2-2012-07
node.js: zápisky z fronty (Battle guide to node.js)
Smalltalk prakticky [CZ]
TNPW2-2011-08
TNPW2-2013-05
Webové technologie
Rich Internet Applications 2009 (Czech)
TNPW2-2013-02
Ondra Kučera: Otevřený web a jeho současný stav
JavaScript
2010 Web Technologie 1
TNPW2-2012-02
Vyhledávače a JavaScript
XSS PHP CSP ETC OMG WTF BBQ
Bez HTML5/CSS3 to nejde
Optimalizace webových aplikací
TNPW2-2012-04
20101124 Aplikované nástroje SW inženýra
Webový front-end ve službách mobilního vývojáře
TNPW2-2014-02
Ad

More from Lukáš Vacek (12)

PPTX
TNPW2-2016-07
PPTX
TNPW2-2016-02
PPTX
TNPW2-2014-01
PPTX
TNPW2-2014-06
PPTX
TNPW2-2014-04
PPTX
TNPW2-2013-10
PPTX
TNPW2-2013-09
PPTX
TNPW2-2013-08
PPTX
TNPW2-2013-01
PPTX
TNPW2-2012-10
PPTX
TNPW2-2012-09
PPTX
TNPW2-2012-08
TNPW2-2016-07
TNPW2-2016-02
TNPW2-2014-01
TNPW2-2014-06
TNPW2-2014-04
TNPW2-2013-10
TNPW2-2013-09
TNPW2-2013-08
TNPW2-2013-01
TNPW2-2012-10
TNPW2-2012-09
TNPW2-2012-08

TNPW2-2012-03

  • 1. TNPW2 2011/2012 03 – JavaScript Mgr. Lukáš Vacek lukas.vacek@uhk.cz
  • 2. 2 Agenda • 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. 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#Dialects http://en.wikipedia.org/wiki/JavaScript_engine http://www.w3schools.com/js/default.asp http://www.root.cz/clanky/spor-o-budoucnost-javascriptu-vyresen/ http://zdrojak.root.cz/clanky/ecmascript-strict-mode-ve-firefoxu-4/
  • 4. 4 Agenda  Co je to JavaScript? • Vložení skriptu do zdrojového kódu stránky • Syntaxe, metody, vlastní funkce • Knihovny (frameworky) • Nejčastější použití JavaScriptu • Internet, doporučená literatura
  • 5. 5 Vlož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. 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. 7 Agenda  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. 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á metoda mojeFunkce(); // 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. 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. 10 Agenda  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. 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. 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. 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. 14 Agenda  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. 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. 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 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
  • 17. 17 Zpracová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 prvku var hodnota = $("#combo option:selected").val(); 03-02-udalosti.html
  • 18. 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. 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 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
  • 20. 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. 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. 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. 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. 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ět history.forward(); // pohyb v historii vpřed history.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é adresy location.href = "url"; // opětovné nahrání aktuálního dokumentu location.reload(); • Obsah stavového řádku lze ovlivnit vlastnostmi objektu Window –> window.status a window.defaultStatus
  • 25. 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. 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> • jQuery používá pro práci s CSS vlastnost .css() $('#test').css("color","blue"); 03-04-css.html
  • 27. 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. 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. 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').vlastnost document.forms[0].elements[2].vlastnost document.forms[0].id_elementu.vlastnost • Pro jQuery existuje velmi propracovaný plugin Validation, který kromě běžných 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 03-05-formular.html
  • 30. 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. 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 body var 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. 32 Práce s obrázky – obrázkové galerie • Běžné řešení >> po kliknutí na náhled vybraného obrázku na webové stránce je tento zobrazen ve své originální (tj. 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)
  • 33. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 46 Agenda  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. 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. 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. 49 Souhrn  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