際際滷

際際滷Share a Scribd company logo
TNPW2
2012/2013
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)
            Nejastj邸鱈 pou転it鱈 JavaScriptu
            Internet, doporuen叩 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 vytvoila firma Netscape a jeho interpret (bhov辿 prosted鱈) 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, kter箪 na stran
   klienta (prohl鱈転ee) m哲転e zv箪邸it interaktivitu s u転ivatelem
  JavaScript je oznaov叩n jako tzv. assembler webu
  Kombinace HTML5 + CSS3 + JavaScript je aktu叩ln鱈m trendem pi n叩vrhu UI aplikac鱈
  JavaScript je ale mo転n辿 vyu転鱈t i na stran webov辿ho serveru (Node.js apod.)!

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)
          Nejastj邸鱈 pou転it鱈 JavaScriptu
          Internet, doporuen叩 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=/slideshow/tnpw2201303/14625377/"mujskript.js"></script>
6

Pr叩ce s k坦dem v JavaScriptu
 Rozs叩hlej邸鱈 aplikan鱈 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 vt邸鱈 pehlednost, stejn tak je mo転n辿 jej
  komprimovat v okam転iku nasazen鱈 na produkn鱈m prosted鱈 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 prosted鱈 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

Dokumentov叩n鱈 zdrojov辿ho k坦du v JSDoc
  V rozs叩hl箪ch zdrojov箪ch k坦dech pou転鱈vejte koment叩e!
  PRO? Kv哲li srozumitelnosti 
  Mo転n辿 budouc鱈 opravy/炭pravy k坦du, vyu転it鱈 knihoven apod.

  Pro form叩tov叩n鱈 koment叩哲 pro dokumentaci existuj鱈 pravidla, nap. JSDoc syntaxe

<script type="text/javascript">
/* <![CDATA[ */
    /**
    * @tag_name   description
    */
    JavaScript Code
/* ]]> */
</script>


http://en.wikipedia.org/wiki/JSDoc
8




Agenda

          Co je to JavaScript?
          Vlo転en鱈 skriptu do zdrojov辿ho k坦du str叩nky
          Syntaxe, metody, vlastn鱈 funkce
          Knihovny (frameworky)
          Nejastj邸鱈 pou転it鱈 JavaScriptu
          Internet, doporuen叩 literatura
9

Syntaxe jazyka, metody, vl叩kna
  Jazyk JavaScript vych叩z鱈 ze syntaxe jazyka C (C++, Java, C#, PHP)
  Jednotliv辿 p鱈kazy JavaScriptu se oddluj鱈 ";"
  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叩dj鱈c鱈 uritou innost, nejastji 鱈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鱈 poteby vytvoit

document.write("Text... ");               // peddefinovan叩 metoda
mojeFunkce();                             // pou転it鱈 vytvoen辿 fce


  Aktu叩ln podporuj鱈 webov辿 prohl鱈転ee 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 (vysvtlen鱈)
10

Vlastn鱈 funkce
  Funkce v JavaScriptu jsou pojmenovan辿 叩sti programov辿ho k坦du, kter辿 lze vyvol叩vat
   podle poteby (i opakovan)
  Jako sv哲j v箪stup funkce provede uritou naprogramovanou innost nebo m哲転e vr叩tit
   njakou hodnotu
  Vlastn鱈 funkci je nutn辿 nadefinovat ped jej鱈m prvn鱈m pou転it鱈m!

<script type="text/javascript">
/* <![CDATA[ */
    /**
    * @return {boolean} Is the browser IE?
    */
    function abc() {
    var isMSIE = /*@cc_on!@*/false;
    return isMSIE;
    }
/* ]]> */
</script>

  http://met.blog.root.cz/2007/03/29/nejkratsi-detekce-internet-exploreru-na-svete/
11




Agenda

          Co je to JavaScript?
          Vlo転en鱈 skriptu do zdrojov辿ho k坦du str叩nky
          Syntaxe, metody, vlastn鱈 funkce
          Knihovny (frameworky)
          Nejastj邸鱈 pou転it鱈 JavaScriptu
          Internet, doporuen叩 literatura
12

Knihovny (frameworky)
 Existuje cel叩 ada nejr哲znj邸鱈ch JavaScript knihoven, kter辿 umo転uj鱈 v箪voj叩哲m velmi
  efektivn鱈m zp哲sobem roz邸鱈it funkcionalitu webov箪ch str叩nek (i pro mobiln鱈 web!)
 K nab鱈zen辿 funkcionalit tchto knihoven pat鱈 nap. proch叩zen鱈 a manipulace s DOM
  str叩nky, zpracov叩n鱈 ud叩lost鱈 v prohl鱈転ei, pr叩ce s obr叩zky, na鱈t叩n鱈 dat ze serveru,
  podpora drag&drop, pr叩ce s cookies apod.
 Mezi nejpou転鱈vanj邸鱈 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://en.wikipedia.org/wiki/AngularJS (MVC pro JS)

http://code.google.com/intl/cs/apis/libraries/
13

jQuery
 Velikost鱈 mal叩 (jeden soubor, tzv. minified verze 1.8.2 m叩 32 KB!) a pitom velmi
  kompaktn鱈 JavaScript knihovna poskytuj鱈c鱈 interaktivitu mezi JavaScriptem a (X)HTML
  v okn webov辿ho prohl鱈転ee
 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/
14

Naten鱈 knihovny na str叩nce
  asto je vybran叩 knihovna ulo転ena na stejn辿m webov辿m serveru jako webov辿 str叩nky
  Doporuenou 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.8.2.min.js (aktu叩ln鱈 verze, 鱈jen 2012)


<script src=/slideshow/tnpw2201303/14625377/"http:/code.jquery.com/jquery-1.8.2.min.js"
type="text/javascript"></script>
<script type="text/javascript">
/* <![CDATA[ */
  $(document).ready(function(){
  // k坦d bude iniciov叩n a転 po naten鱈 cel辿 str叩nky
  });
/* ]]> */
</script>


  Je vhodn辿 iniciovat aplikan鱈 k坦d a転 po naten鱈 cel辿 str叩nky a v邸ech prvk哲!
15

Programovac鱈 jazyky vyu転鱈vaj鱈c鱈 JavaScript
 PIPOMNKA! JavaScript je tzv. assembler webu 
 Nkter辿 nov辿 programovac鱈 jazyky se pokou邸ej鱈 odstranit nedostatky JavaScriptu
 V箪hodou je, 転e se umj鱈 se do zdrojov辿ho JS k坦du zkompilovat!

TypeScript (Open source, Microsoft)
 http://en.wikipedia.org/wiki/TypeScript
 http://devblog.cz/2012/10/typescript-jazyk-na-ktery-jsem-cekal/

Dart (Google)
 http://en.wikipedia.org/wiki/Dart_(programming_language)
 Tady byla ta kompilace trochu divoej邸鱈 

Coffee Script
 Nejstar邸鱈 a nejroz邸鱈enj邸鱈
 http://en.wikipedia.org/wiki/CoffeeScript
 http://www.zdrojak.cz/clanky/coffeescript-radne-oslazeny-javascript/
16




Agenda

          Co je to JavaScript?
          Vlo転en鱈 skriptu do zdrojov辿ho k坦du str叩nky
          Syntaxe, metody, vlastn鱈 funkce
          Knihovny (frameworky)
          Nejastj邸鱈 pou転it鱈 JavaScriptu
          Internet, doporuen叩 literatura
17

Nejastj邸鱈 pou転it鱈 JavaScriptu
   Pr叩ce s DOM, selektory, zpracov叩n鱈 ud叩lost鱈
   Ovlivnn鱈 v箪stupu v prohl鱈転ei
   Zobrazov叩n鱈 dialogov箪ch oken
   鱈zen鱈 prohl鱈転ee (nap. pohyb v historii, naten鱈 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鱈dn鱈 dat podle sloupc哲 v tabulk叩ch, datov辿 filtry
   Grafy
   Bookmarklety
   Dynamick箪 web (zmna obsahu skriptem, AJAX)
   Na stran serveru (Node.js)
18

Pr叩ce s DOM, selektory
  V箪br jednotliv箪ch prvk哲 (DOM objekt哲) na webov辿 str叩nce v prohl鱈転ei
  N叩sledn辿 zpracov叩n鱈 ud叩lost鱈 a manipulace s vlastnostmi
  DOM str叩nky lze v JavaScriptu upravovat i po jej鱈m naten鱈!
// v箪br prvku podle ID v JavaScriptu, na validn鱈 str叩nce je 1!
document.getElementById('id_prvku')
// v箪br prvk哲 podle typu elementu v JavaScriptu
document.getElementsByTagName('nazev_tagu')
// v箪br prvk哲 dan辿 t鱈dy v JavaScriptu
Nen鱈! Mus鱈 se doprogramovat.

// v箪br prvku podle ID v jQuery
$('#id_prvku')
// v箪br prvk哲 podle typu elementu v jQuery
$('nazev_tagu')
// v箪br prvk哲 dan辿 t鱈dy v jQuery
$('.nazev_tridy')


03-01-dom.html
19

Zpracov叩n鱈 ud叩lost鱈 na str叩nce, vlastnosti prvk哲
  Pro manipulaci s vlastnostmi a ud叩lostmi prvk哲 se pou転鱈v叩 tekov叩 konvence!
  Nkter辿 ud叩losti detekovan辿 v prohl鱈転ei:
   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=/slideshow/tnpw2201303/14625377/"img_01.gif" id="o1" onmouseover=
"document.getElementById('o1').src='img_02.gif'" />


  jQuery vyu転鱈v叩 pi v箪bru prvk哲 s njak箪m stavem selektory s dvojtekou (nap. :first,
   :last, :selected, :checked)
  Pro naten鱈 n叩vratov辿 hodnoty nalezen辿ho prvku v jQuery se pou転鱈v叩 metoda .val()

// pou転it鱈 metody val() pro naten鱈 vybran辿 hodnoty z combo prvku
var hodnota = $("#combo option:selected").val();


03-02-udalosti.html
20

Nejastj邸鱈 pou転it鱈 JavaScriptu
   Pr叩ce s DOM, selektory, zpracov叩n鱈 ud叩lost鱈
   Ovlivnn鱈 v箪stupu v prohl鱈転ei
   Zobrazov叩n鱈 dialogov箪ch oken
   鱈zen鱈 prohl鱈転ee (nap. pohyb v historii, naten鱈 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鱈dn鱈 dat podle sloupc哲 v tabulk叩ch, datov辿 filtry
   Grafy
   Bookmarklety
   Dynamick箪 web (zmna obsahu skriptem, AJAX)
   Na stran serveru (Node.js)
21

Ovlivnn鱈 v箪stupu v prohl鱈転ei
  Obsah webov辿 str叩nky je mo転n辿 ovlivnit na stran klienta (v prohl鱈転ei)
       Pi na鱈t叩n鱈 str叩nky  metodou write() objektu Document,
       Kdykoliv  zmnou 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 poteby
   mnit, nap. datum, text v odstavci, nov辿 elementy apod.

// v箪pis etzce, promnn辿, hodnoty funkce
document.write("njak箪 text... ");
var mojePromenna = "njak箪 text... ";
document.write(mojePromenna);
document.write(Date());

var zmena = document.getElementById("myID");
zmena.innerHTML = "<strong>njak箪 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
22

Generovan箪 v箪stup a webov辿 standardy
 Generov叩n鱈 (X)HTML k坦du z vizu叩ln鱈ch komponent v箪vojov辿ho prosted鱈 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 pipraven箪 na webov辿m serveru pedem
 Nezapomete 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叩 mnit

 http://zdrojak.root.cz/clanky/tak-nam-zpristupnili-javascript/
 http://www.w3.org/TR/WCAG20/
23

Nejastj邸鱈 pou転it鱈 JavaScriptu
   Pr叩ce s DOM, selektory, zpracov叩n鱈 ud叩lost鱈
   Ovlivnn鱈 v箪stupu v prohl鱈転ei
   Zobrazov叩n鱈 dialogov箪ch oken
   鱈zen鱈 prohl鱈転ee (nap. pohyb v historii, naten鱈 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鱈dn鱈 dat podle sloupc哲 v tabulk叩ch, datov辿 filtry
   Grafy
   Bookmarklety
   Dynamick箪 web (zmna obsahu skriptem, AJAX)
   Na stran serveru (Node.js)
24

Zobrazov叩n鱈 dialogov箪ch oken
  K zobrazen鱈 dialogov辿ho okna s urenou 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="Otevi 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 vt邸鱈 mo転nosti!
  http://docs.jquery.com/UI/Dialog
  Souasn箪m trendem jsou tzv. Single Page Apps
25

Nejastj邸鱈 pou転it鱈 JavaScriptu
   Pr叩ce s DOM, selektory, zpracov叩n鱈 ud叩lost鱈
   Ovlivnn鱈 v箪stupu v prohl鱈転ei
   Zobrazov叩n鱈 dialogov箪ch oken
   鱈zen鱈 prohl鱈転ee (nap. pohyb v historii, naten鱈 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鱈dn鱈 dat podle sloupc哲 v tabulk叩ch, datov辿 filtry
   Grafy
   Bookmarklety
   Dynamick箪 web (zmna obsahu skriptem, AJAX)
   Na stran serveru (Node.js)
26

鱈zen鱈 prohl鱈転ee
  Objekt History umo転uje pohyb vped a zpt u転ivatelskou histori鱈 prohl鱈転ee
  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   zpt
history.forward();                //   pohyb v   historii   vped
history.go(-3);                   //   pohyb v   historii   o dan箪 poet krok哲
history.go("string");             //   pohyb v   historii   na odkaz obsahuj鱈c鱈
                                  //   uveden箪   etzec

  Objekt Location reprezentuje URL v dan辿m okn aktu叩ln zobrazen辿ho dokumentu
// naten鱈 dokumentu z dan辿 adresy
location.href = "url";

// optovn辿 nahr叩n鱈 aktu叩ln鱈ho dokumentu
location.reload();


  Obsah stavov辿ho 叩dku lze ovlivnit vlastnostmi objektu Window > window.status
   a window.defaultStatus
27

Nejastj邸鱈 pou転it鱈 JavaScriptu
   Pr叩ce s DOM, selektory, zpracov叩n鱈 ud叩lost鱈
   Ovlivnn鱈 v箪stupu v prohl鱈転ei
   Zobrazov叩n鱈 dialogov箪ch oken
   鱈zen鱈 prohl鱈転ee (nap. pohyb v historii, naten鱈 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鱈dn鱈 dat podle sloupc哲 v tabulk叩ch, datov辿 filtry
   Grafy
   Bookmarklety
   Dynamick箪 web (zmna obsahu skriptem, AJAX)
   Na stran serveru (Node.js)
28

Spolupr叩ce s CSS
  JavaScript nab鱈z鱈 pomrn slu邸nou podporu pro p鱈stup k jednotliv箪m element哲m
   str叩nky a umo転uje nastavovat jejich CSS vlastnosti
  Nezapomete! K jednotliv箪m element哲m na str叩nce se nejl辿pe pistupuje pes 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
29

CSS3 v JavaScriptu
 CSS3 m叩 problematickou implementaci (zlep邸uje se) v aktu叩ln pou転鱈van箪ch prohl鱈転e鱈ch
 Nepodporu nkter箪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 produkn鱈mu nasazen鱈!

 http://code.google.com/p/css-template-layout/
 http://www.w3.org/TR/css3-layout/
 http://a.deveria.com/csstpl/ (uk叩zky)
30

Nejastj邸鱈 pou転it鱈 JavaScriptu
   Pr叩ce s DOM, selektory, zpracov叩n鱈 ud叩lost鱈
   Ovlivnn鱈 v箪stupu v prohl鱈転ei
   Zobrazov叩n鱈 dialogov箪ch oken
   鱈zen鱈 prohl鱈転ee (nap. pohyb v historii, naten鱈 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鱈dn鱈 dat podle sloupc哲 v tabulk叩ch, datov辿 filtry
   Grafy
   Bookmarklety
   Dynamick箪 web (zmna obsahu skriptem, AJAX)
   Na stran serveru (Node.js)
31

Validace a zpracov叩n鱈 formul叩哲
  Pi pou転it鱈 (X)HTML formul叩e na str叩nce je vt邸inou vhodn辿 ped odesl叩n鱈m dat prov辿st
   kontrolu spr叩vnosti vyplnn鱈 jednotliv箪ch polo転ek formul叩e u転ivatelem
  Identifikace jednotliv箪ch prvk哲 formul叩e se nejastji 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
   validan鱈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
32

Nejastj邸鱈 pou転it鱈 JavaScriptu
   Pr叩ce s DOM, selektory, zpracov叩n鱈 ud叩lost鱈
   Ovlivnn鱈 v箪stupu v prohl鱈転ei
   Zobrazov叩n鱈 dialogov箪ch oken
   鱈zen鱈 prohl鱈転ee (nap. pohyb v historii, naten鱈 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鱈dn鱈 dat podle sloupc哲 v tabulk叩ch, datov辿 filtry
   Grafy
   Bookmarklety
   Dynamick箪 web (zmna obsahu skriptem, AJAX)
   Na stran serveru (Node.js)
33

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 nkter辿 vlastnosti
   obr叩zk哲 mnit za chodu skriptu
  Nkdy (nap. pi pou転it鱈 animovan辿ho obr叩zkov辿ho menu) je vhodn辿 pedem (nejl辿pe
   v okam転iku na鱈t叩n鱈 str叩nky) na鱈st obr叩zky do cache prohl鱈転ee, ale zobrazit je a転
   pozdji, kdy転 jsou poteba (z cache prohl鱈転ee se pak rychleji na鱈taj鱈)

// preload obr叩zku JavaScriptem, obvykle fce v ud叩losti onload elementu body
var obr1 = new Image();
obr1.src = /slideshow/tnpw2201303/14625377/"flag1.jpg";



  Existuje alternativn鱈 e邸en鱈 bez nutnosti preloadu obr叩zk哲
  http://www.wellstyled.com/css-nopreload-rollovers.html
34

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. vt邸鱈) velikosti ve st叩vaj鱈c鱈m nebo nov辿m okn prohl鱈転ee
 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 (pehled)
35

Nejastj邸鱈 pou転it鱈 JavaScriptu
   Pr叩ce s DOM, selektory, zpracov叩n鱈 ud叩lost鱈
   Ovlivnn鱈 v箪stupu v prohl鱈転ei
   Zobrazov叩n鱈 dialogov箪ch oken
   鱈zen鱈 prohl鱈転ee (nap. pohyb v historii, naten鱈 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鱈dn鱈 dat podle sloupc哲 v tabulk叩ch, datov辿 filtry
   Grafy
   Bookmarklety
   Dynamick箪 web (zmna obsahu skriptem, AJAX)
   Na stran serveru (Node.js)
36

Pr叩ce s okny v JavaScriptu
  V nkter箪ch p鱈padech je poteba 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
  Pi pou転it鱈 JavaScriptu je teba br叩t v 炭vahu mo転nost vypnut辿ho skriptov叩n鱈 na stran
   klienta a tuto mo転nost o邸etit (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
37

Nejastj邸鱈 pou転it鱈 JavaScriptu
   Pr叩ce s DOM, selektory, zpracov叩n鱈 ud叩lost鱈
   Ovlivnn鱈 v箪stupu v prohl鱈転ei
   Zobrazov叩n鱈 dialogov箪ch oken
   鱈zen鱈 prohl鱈転ee (nap. pohyb v historii, naten鱈 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鱈dn鱈 dat podle sloupc哲 v tabulk叩ch, datov辿 filtry
   Grafy
   Bookmarklety
   Dynamick箪 web (zmna obsahu skriptem, AJAX)
   Na stran serveru (Node.js)
38

T鱈dn鱈 tabulkov箪ch dat, datov辿 filtry
  Pomoc鱈 JavaScriptu lze data v tabulce na stran klienta (prohl鱈転ee) jednodu邸e t鱈dit
   nebo filtrovat, a to bez nutnosti jejich opakovan辿ho na鱈t叩n鱈 ze serveru (datab叩ze)
   pi aktualizaci zobrazen鱈
  T鱈dit nebo filtrovat lze data podle jednoduch箪ch datov箪ch typ哲, nap. 鱈slo, etzec,
   datum, mna 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
39

Nejastj邸鱈 pou転it鱈 JavaScriptu
   Pr叩ce s DOM, selektory, zpracov叩n鱈 ud叩lost鱈
   Ovlivnn鱈 v箪stupu v prohl鱈転ei
   Zobrazov叩n鱈 dialogov箪ch oken
   鱈zen鱈 prohl鱈転ee (nap. pohyb v historii, naten鱈 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鱈dn鱈 dat podle sloupc哲 v tabulk叩ch, datov辿 filtry
   Grafy
   Bookmarklety
   Dynamick箪 web (zmna obsahu skriptem, AJAX)
   Na stran serveru (Node.js)
40

Grafy
 Pro vkl叩d叩n鱈 graf哲 na webov辿 str叩nky se obvykle pou転鱈vaj鱈 obr叩zky generovan辿 na stran
  serveru, m辿n astji potom Flash nebo JavaScript na stran klienta
 Pro vytv叩en鱈 graf哲 v JavaScriptu existuje nkolik knihoven, obvykle pou転鱈vaj鱈 znaku
  canvas
 Funguj鱈 ve v邸ech nejroz邸鱈enj邸鱈ch prohl鱈転e鱈ch

 http://code.google.com/p/flot/ (flot je plugin jQuery)
 http://bluff.jcoglan.com/ (Bluff je port Ruby knihovny Gruff)
41

Nejastj邸鱈 pou転it鱈 JavaScriptu
   Pr叩ce s DOM, selektory, zpracov叩n鱈 ud叩lost鱈
   Ovlivnn鱈 v箪stupu v prohl鱈転ei
   Zobrazov叩n鱈 dialogov箪ch oken
   鱈zen鱈 prohl鱈転ee (nap. pohyb v historii, naten鱈 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鱈dn鱈 dat podle sloupc哲 v tabulk叩ch, datov辿 filtry
   Grafy
   Bookmarklety
   Dynamick箪 web (zmna obsahu skriptem, AJAX)
   Na stran serveru (Node.js)
42

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鱈
   njakou konkr辿tn鱈 innost, kter叩 p哲vodn na str叩nce nebyla (zvt邸en鱈 p鱈sma, podtr転en鱈
   odkaz哲 apod.)
  Na Internetu je voln k dispozici velk辿 mno転stv鱈 bookmarklet哲

javascript:p鱈kaz;

javascript:resizeTo(800,600)           // zmna velikosti okna


http://bookmarklets.com/tools/categor.html
43

Nejastj邸鱈 pou転it鱈 JavaScriptu
   Pr叩ce s DOM, selektory, zpracov叩n鱈 ud叩lost鱈
   Ovlivnn鱈 v箪stupu v prohl鱈転ei
   Zobrazov叩n鱈 dialogov箪ch oken
   鱈zen鱈 prohl鱈転ee (nap. pohyb v historii, naten鱈 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鱈dn鱈 dat podle sloupc哲 v tabulk叩ch, datov辿 filtry
   Grafy
   Bookmarklety
   Dynamick箪 web (zmna obsahu skriptem, AJAX)
   Na stran serveru (Node.js)
44

Dynamick箪 web, AJAX
 Reakce na ud叩losti vyvolan辿 u転ivatelem na stran klienta se pos鱈laj鱈 pes protokol HTTP
  ke zpracov叩n鱈 na server a str叩nka obdr転鱈 odpov
 Tato odpov ze serveru n叩sledn m哲転e zmnit stav njak辿ho prvku na str叩nce nebo se
  dynamicky vytvo鱈 nov箪 element
 Ve v箪sledku se tedy (vt邸inou) nekon叩 reload cel辿 str叩nky
 Pro vzd叩len辿 vol叩n鱈 metod formou v箪mny XML dat s pevnou strukturou se ust叩lil pojem
  AJAX (Asynchronous JavaScript and XML)
 AJAX nejastji pou転鱈v叩 protokol XMLRPC (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 pen叩邸ena pouze pomoc鱈 XML (textov箪 etzec, 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 oddlen鱈 aplikan鱈ch dat a jejich vizu叩ln鱈 prezentace

Bli転邸鱈 informace k AJAXu a spol. budou v pedn叩邸ce o aktu叩ln鱈ch trendech na webu
45

Nejastj邸鱈 pou転it鱈 JavaScriptu
   Pr叩ce s DOM, selektory, zpracov叩n鱈 ud叩lost鱈
   Ovlivnn鱈 v箪stupu v prohl鱈転ei
   Zobrazov叩n鱈 dialogov箪ch oken
   鱈zen鱈 prohl鱈転ee (nap. pohyb v historii, naten鱈 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鱈dn鱈 dat podle sloupc哲 v tabulk叩ch, datov辿 filtry
   Grafy
   Bookmarklety
   Dynamick箪 web (zmna obsahu skriptem, AJAX)
   Na stran serveru (Node.js)
46

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 pedstavit jako engine
  V8, roz邸鱈en箪 o funkce, kter辿 umo転uj鱈 prov叩dn箪m skript哲m pistupovat k soubor哲m i
  s鱈泥ov箪m funkc鱈m. Co転 v praxi znamen叩, 転e m哲転eme vytvoit server, kter箪 naslouch叩 na
  uren辿m portu t辿m stejn箪m zp哲sobem, jak箪m vytv叩鱈me nap鱈klad obslu転n辿 metody
  pro ud叩losti v prohl鱈転ei.  Martin Mal箪 (Zdroj叩k)

   http://en.wikipedia.org/wiki/Nodejs
   http://en.wikipedia.org/wiki/CommonJS
   http://geddyjs.org/ (Node.js framework)
   http://www.zdrojak.cz/serialy/node-js-s-javascriptem-na-serveru/ (seri叩l)

 Popul叩rn鱈 novinka, ale s nkter箪mi technologick箪mi omezen鱈mi! (nap. vl叩kna)
47

Nejastj邸鱈 pou転it鱈 JavaScriptu
   Pr叩ce s DOM, selektory, zpracov叩n鱈 ud叩lost鱈
   Ovlivnn鱈 v箪stupu v prohl鱈転ei
   Zobrazov叩n鱈 dialogov箪ch oken
   鱈zen鱈 prohl鱈転ee (nap. pohyb v historii, naten鱈 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鱈dn鱈 dat podle sloupc哲 v tabulk叩ch, datov辿 filtry
   Grafy
   Bookmarklety
   Dynamick箪 web (zmna obsahu skriptem, AJAX)
   Na stran serveru (Node.js)
48




Agenda

          Co je to JavaScript?
          Vlo転en鱈 skriptu do zdrojov辿ho k坦du str叩nky
          Syntaxe, metody, vlastn鱈 funkce
          Knihovny (frameworky)
          Nejastj邸鱈 pou転it鱈 JavaScriptu
          Internet, doporuen叩 literatura
49

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)
50

Doporuen叩 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
51




Souhrn

          Co je to JavaScript?
          Vlo転en鱈 skriptu do zdrojov辿ho k坦du str叩nky
          Syntaxe, metody, vlastn鱈 funkce
          Knihovny (frameworky)
          Nejastj邸鱈 pou転it鱈 JavaScriptu
          Internet, doporuen叩 literatura

More Related Content

TNPW2-2013-03

  • 1. TNPW2 2012/2013 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) Nejastj邸鱈 pou転it鱈 JavaScriptu Internet, doporuen叩 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 vytvoila firma Netscape a jeho interpret (bhov辿 prosted鱈) 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, kter箪 na stran klienta (prohl鱈転ee) m哲転e zv箪邸it interaktivitu s u転ivatelem JavaScript je oznaov叩n jako tzv. assembler webu Kombinace HTML5 + CSS3 + JavaScript je aktu叩ln鱈m trendem pi n叩vrhu UI aplikac鱈 JavaScript je ale mo転n辿 vyu転鱈t i na stran webov辿ho serveru (Node.js apod.)! 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) Nejastj邸鱈 pou転it鱈 JavaScriptu Internet, doporuen叩 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=/slideshow/tnpw2201303/14625377/"mujskript.js"></script>
  • 6. 6 Pr叩ce s k坦dem v JavaScriptu Rozs叩hlej邸鱈 aplikan鱈 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 vt邸鱈 pehlednost, stejn tak je mo転n辿 jej komprimovat v okam転iku nasazen鱈 na produkn鱈m prosted鱈 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 prosted鱈 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 Dokumentov叩n鱈 zdrojov辿ho k坦du v JSDoc V rozs叩hl箪ch zdrojov箪ch k坦dech pou転鱈vejte koment叩e! PRO? Kv哲li srozumitelnosti Mo転n辿 budouc鱈 opravy/炭pravy k坦du, vyu転it鱈 knihoven apod. Pro form叩tov叩n鱈 koment叩哲 pro dokumentaci existuj鱈 pravidla, nap. JSDoc syntaxe <script type="text/javascript"> /* <![CDATA[ */ /** * @tag_name description */ JavaScript Code /* ]]> */ </script> http://en.wikipedia.org/wiki/JSDoc
  • 8. 8 Agenda Co je to JavaScript? Vlo転en鱈 skriptu do zdrojov辿ho k坦du str叩nky Syntaxe, metody, vlastn鱈 funkce Knihovny (frameworky) Nejastj邸鱈 pou転it鱈 JavaScriptu Internet, doporuen叩 literatura
  • 9. 9 Syntaxe jazyka, metody, vl叩kna Jazyk JavaScript vych叩z鱈 ze syntaxe jazyka C (C++, Java, C#, PHP) Jednotliv辿 p鱈kazy JavaScriptu se oddluj鱈 ";" 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叩dj鱈c鱈 uritou innost, nejastji 鱈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鱈 poteby vytvoit document.write("Text... "); // peddefinovan叩 metoda mojeFunkce(); // pou転it鱈 vytvoen辿 fce Aktu叩ln podporuj鱈 webov辿 prohl鱈転ee 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 (vysvtlen鱈)
  • 10. 10 Vlastn鱈 funkce Funkce v JavaScriptu jsou pojmenovan辿 叩sti programov辿ho k坦du, kter辿 lze vyvol叩vat podle poteby (i opakovan) Jako sv哲j v箪stup funkce provede uritou naprogramovanou innost nebo m哲転e vr叩tit njakou hodnotu Vlastn鱈 funkci je nutn辿 nadefinovat ped jej鱈m prvn鱈m pou転it鱈m! <script type="text/javascript"> /* <![CDATA[ */ /** * @return {boolean} Is the browser IE? */ function abc() { var isMSIE = /*@cc_on!@*/false; return isMSIE; } /* ]]> */ </script> http://met.blog.root.cz/2007/03/29/nejkratsi-detekce-internet-exploreru-na-svete/
  • 11. 11 Agenda Co je to JavaScript? Vlo転en鱈 skriptu do zdrojov辿ho k坦du str叩nky Syntaxe, metody, vlastn鱈 funkce Knihovny (frameworky) Nejastj邸鱈 pou転it鱈 JavaScriptu Internet, doporuen叩 literatura
  • 12. 12 Knihovny (frameworky) Existuje cel叩 ada nejr哲znj邸鱈ch JavaScript knihoven, kter辿 umo転uj鱈 v箪voj叩哲m velmi efektivn鱈m zp哲sobem roz邸鱈it funkcionalitu webov箪ch str叩nek (i pro mobiln鱈 web!) K nab鱈zen辿 funkcionalit tchto knihoven pat鱈 nap. proch叩zen鱈 a manipulace s DOM str叩nky, zpracov叩n鱈 ud叩lost鱈 v prohl鱈転ei, pr叩ce s obr叩zky, na鱈t叩n鱈 dat ze serveru, podpora drag&drop, pr叩ce s cookies apod. Mezi nejpou転鱈vanj邸鱈 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://en.wikipedia.org/wiki/AngularJS (MVC pro JS) http://code.google.com/intl/cs/apis/libraries/
  • 13. 13 jQuery Velikost鱈 mal叩 (jeden soubor, tzv. minified verze 1.8.2 m叩 32 KB!) a pitom velmi kompaktn鱈 JavaScript knihovna poskytuj鱈c鱈 interaktivitu mezi JavaScriptem a (X)HTML v okn webov辿ho prohl鱈転ee 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/
  • 14. 14 Naten鱈 knihovny na str叩nce asto je vybran叩 knihovna ulo転ena na stejn辿m webov辿m serveru jako webov辿 str叩nky Doporuenou 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.8.2.min.js (aktu叩ln鱈 verze, 鱈jen 2012) <script src=/slideshow/tnpw2201303/14625377/"http:/code.jquery.com/jquery-1.8.2.min.js" type="text/javascript"></script> <script type="text/javascript"> /* <![CDATA[ */ $(document).ready(function(){ // k坦d bude iniciov叩n a転 po naten鱈 cel辿 str叩nky }); /* ]]> */ </script> Je vhodn辿 iniciovat aplikan鱈 k坦d a転 po naten鱈 cel辿 str叩nky a v邸ech prvk哲!
  • 15. 15 Programovac鱈 jazyky vyu転鱈vaj鱈c鱈 JavaScript PIPOMNKA! JavaScript je tzv. assembler webu Nkter辿 nov辿 programovac鱈 jazyky se pokou邸ej鱈 odstranit nedostatky JavaScriptu V箪hodou je, 転e se umj鱈 se do zdrojov辿ho JS k坦du zkompilovat! TypeScript (Open source, Microsoft) http://en.wikipedia.org/wiki/TypeScript http://devblog.cz/2012/10/typescript-jazyk-na-ktery-jsem-cekal/ Dart (Google) http://en.wikipedia.org/wiki/Dart_(programming_language) Tady byla ta kompilace trochu divoej邸鱈 Coffee Script Nejstar邸鱈 a nejroz邸鱈enj邸鱈 http://en.wikipedia.org/wiki/CoffeeScript http://www.zdrojak.cz/clanky/coffeescript-radne-oslazeny-javascript/
  • 16. 16 Agenda Co je to JavaScript? Vlo転en鱈 skriptu do zdrojov辿ho k坦du str叩nky Syntaxe, metody, vlastn鱈 funkce Knihovny (frameworky) Nejastj邸鱈 pou転it鱈 JavaScriptu Internet, doporuen叩 literatura
  • 17. 17 Nejastj邸鱈 pou転it鱈 JavaScriptu Pr叩ce s DOM, selektory, zpracov叩n鱈 ud叩lost鱈 Ovlivnn鱈 v箪stupu v prohl鱈転ei Zobrazov叩n鱈 dialogov箪ch oken 鱈zen鱈 prohl鱈転ee (nap. pohyb v historii, naten鱈 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鱈dn鱈 dat podle sloupc哲 v tabulk叩ch, datov辿 filtry Grafy Bookmarklety Dynamick箪 web (zmna obsahu skriptem, AJAX) Na stran serveru (Node.js)
  • 18. 18 Pr叩ce s DOM, selektory V箪br jednotliv箪ch prvk哲 (DOM objekt哲) na webov辿 str叩nce v prohl鱈転ei N叩sledn辿 zpracov叩n鱈 ud叩lost鱈 a manipulace s vlastnostmi DOM str叩nky lze v JavaScriptu upravovat i po jej鱈m naten鱈! // v箪br prvku podle ID v JavaScriptu, na validn鱈 str叩nce je 1! document.getElementById('id_prvku') // v箪br prvk哲 podle typu elementu v JavaScriptu document.getElementsByTagName('nazev_tagu') // v箪br prvk哲 dan辿 t鱈dy v JavaScriptu Nen鱈! Mus鱈 se doprogramovat. // v箪br prvku podle ID v jQuery $('#id_prvku') // v箪br prvk哲 podle typu elementu v jQuery $('nazev_tagu') // v箪br prvk哲 dan辿 t鱈dy v jQuery $('.nazev_tridy') 03-01-dom.html
  • 19. 19 Zpracov叩n鱈 ud叩lost鱈 na str叩nce, vlastnosti prvk哲 Pro manipulaci s vlastnostmi a ud叩lostmi prvk哲 se pou転鱈v叩 tekov叩 konvence! Nkter辿 ud叩losti detekovan辿 v prohl鱈転ei: 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=/slideshow/tnpw2201303/14625377/"img_01.gif" id="o1" onmouseover= "document.getElementById('o1').src='img_02.gif'" /> jQuery vyu転鱈v叩 pi v箪bru prvk哲 s njak箪m stavem selektory s dvojtekou (nap. :first, :last, :selected, :checked) Pro naten鱈 n叩vratov辿 hodnoty nalezen辿ho prvku v jQuery se pou転鱈v叩 metoda .val() // pou転it鱈 metody val() pro naten鱈 vybran辿 hodnoty z combo prvku var hodnota = $("#combo option:selected").val(); 03-02-udalosti.html
  • 20. 20 Nejastj邸鱈 pou転it鱈 JavaScriptu Pr叩ce s DOM, selektory, zpracov叩n鱈 ud叩lost鱈 Ovlivnn鱈 v箪stupu v prohl鱈転ei Zobrazov叩n鱈 dialogov箪ch oken 鱈zen鱈 prohl鱈転ee (nap. pohyb v historii, naten鱈 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鱈dn鱈 dat podle sloupc哲 v tabulk叩ch, datov辿 filtry Grafy Bookmarklety Dynamick箪 web (zmna obsahu skriptem, AJAX) Na stran serveru (Node.js)
  • 21. 21 Ovlivnn鱈 v箪stupu v prohl鱈転ei Obsah webov辿 str叩nky je mo転n辿 ovlivnit na stran klienta (v prohl鱈転ei) Pi na鱈t叩n鱈 str叩nky metodou write() objektu Document, Kdykoliv zmnou 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 poteby mnit, nap. datum, text v odstavci, nov辿 elementy apod. // v箪pis etzce, promnn辿, hodnoty funkce document.write("njak箪 text... "); var mojePromenna = "njak箪 text... "; document.write(mojePromenna); document.write(Date()); var zmena = document.getElementById("myID"); zmena.innerHTML = "<strong>njak箪 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
  • 22. 22 Generovan箪 v箪stup a webov辿 standardy Generov叩n鱈 (X)HTML k坦du z vizu叩ln鱈ch komponent v箪vojov辿ho prosted鱈 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 pipraven箪 na webov辿m serveru pedem Nezapomete 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叩 mnit http://zdrojak.root.cz/clanky/tak-nam-zpristupnili-javascript/ http://www.w3.org/TR/WCAG20/
  • 23. 23 Nejastj邸鱈 pou転it鱈 JavaScriptu Pr叩ce s DOM, selektory, zpracov叩n鱈 ud叩lost鱈 Ovlivnn鱈 v箪stupu v prohl鱈転ei Zobrazov叩n鱈 dialogov箪ch oken 鱈zen鱈 prohl鱈転ee (nap. pohyb v historii, naten鱈 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鱈dn鱈 dat podle sloupc哲 v tabulk叩ch, datov辿 filtry Grafy Bookmarklety Dynamick箪 web (zmna obsahu skriptem, AJAX) Na stran serveru (Node.js)
  • 24. 24 Zobrazov叩n鱈 dialogov箪ch oken K zobrazen鱈 dialogov辿ho okna s urenou 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="Otevi 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 vt邸鱈 mo転nosti! http://docs.jquery.com/UI/Dialog Souasn箪m trendem jsou tzv. Single Page Apps
  • 25. 25 Nejastj邸鱈 pou転it鱈 JavaScriptu Pr叩ce s DOM, selektory, zpracov叩n鱈 ud叩lost鱈 Ovlivnn鱈 v箪stupu v prohl鱈転ei Zobrazov叩n鱈 dialogov箪ch oken 鱈zen鱈 prohl鱈転ee (nap. pohyb v historii, naten鱈 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鱈dn鱈 dat podle sloupc哲 v tabulk叩ch, datov辿 filtry Grafy Bookmarklety Dynamick箪 web (zmna obsahu skriptem, AJAX) Na stran serveru (Node.js)
  • 26. 26 鱈zen鱈 prohl鱈転ee Objekt History umo転uje pohyb vped a zpt u転ivatelskou histori鱈 prohl鱈転ee 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 zpt history.forward(); // pohyb v historii vped history.go(-3); // pohyb v historii o dan箪 poet krok哲 history.go("string"); // pohyb v historii na odkaz obsahuj鱈c鱈 // uveden箪 etzec Objekt Location reprezentuje URL v dan辿m okn aktu叩ln zobrazen辿ho dokumentu // naten鱈 dokumentu z dan辿 adresy location.href = "url"; // optovn辿 nahr叩n鱈 aktu叩ln鱈ho dokumentu location.reload(); Obsah stavov辿ho 叩dku lze ovlivnit vlastnostmi objektu Window > window.status a window.defaultStatus
  • 27. 27 Nejastj邸鱈 pou転it鱈 JavaScriptu Pr叩ce s DOM, selektory, zpracov叩n鱈 ud叩lost鱈 Ovlivnn鱈 v箪stupu v prohl鱈転ei Zobrazov叩n鱈 dialogov箪ch oken 鱈zen鱈 prohl鱈転ee (nap. pohyb v historii, naten鱈 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鱈dn鱈 dat podle sloupc哲 v tabulk叩ch, datov辿 filtry Grafy Bookmarklety Dynamick箪 web (zmna obsahu skriptem, AJAX) Na stran serveru (Node.js)
  • 28. 28 Spolupr叩ce s CSS JavaScript nab鱈z鱈 pomrn slu邸nou podporu pro p鱈stup k jednotliv箪m element哲m str叩nky a umo転uje nastavovat jejich CSS vlastnosti Nezapomete! K jednotliv箪m element哲m na str叩nce se nejl辿pe pistupuje pes 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
  • 29. 29 CSS3 v JavaScriptu CSS3 m叩 problematickou implementaci (zlep邸uje se) v aktu叩ln pou転鱈van箪ch prohl鱈転e鱈ch Nepodporu nkter箪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 produkn鱈mu nasazen鱈! http://code.google.com/p/css-template-layout/ http://www.w3.org/TR/css3-layout/ http://a.deveria.com/csstpl/ (uk叩zky)
  • 30. 30 Nejastj邸鱈 pou転it鱈 JavaScriptu Pr叩ce s DOM, selektory, zpracov叩n鱈 ud叩lost鱈 Ovlivnn鱈 v箪stupu v prohl鱈転ei Zobrazov叩n鱈 dialogov箪ch oken 鱈zen鱈 prohl鱈転ee (nap. pohyb v historii, naten鱈 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鱈dn鱈 dat podle sloupc哲 v tabulk叩ch, datov辿 filtry Grafy Bookmarklety Dynamick箪 web (zmna obsahu skriptem, AJAX) Na stran serveru (Node.js)
  • 31. 31 Validace a zpracov叩n鱈 formul叩哲 Pi pou転it鱈 (X)HTML formul叩e na str叩nce je vt邸inou vhodn辿 ped odesl叩n鱈m dat prov辿st kontrolu spr叩vnosti vyplnn鱈 jednotliv箪ch polo転ek formul叩e u転ivatelem Identifikace jednotliv箪ch prvk哲 formul叩e se nejastji 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 validan鱈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
  • 32. 32 Nejastj邸鱈 pou転it鱈 JavaScriptu Pr叩ce s DOM, selektory, zpracov叩n鱈 ud叩lost鱈 Ovlivnn鱈 v箪stupu v prohl鱈転ei Zobrazov叩n鱈 dialogov箪ch oken 鱈zen鱈 prohl鱈転ee (nap. pohyb v historii, naten鱈 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鱈dn鱈 dat podle sloupc哲 v tabulk叩ch, datov辿 filtry Grafy Bookmarklety Dynamick箪 web (zmna obsahu skriptem, AJAX) Na stran serveru (Node.js)
  • 33. 33 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 nkter辿 vlastnosti obr叩zk哲 mnit za chodu skriptu Nkdy (nap. pi pou転it鱈 animovan辿ho obr叩zkov辿ho menu) je vhodn辿 pedem (nejl辿pe v okam転iku na鱈t叩n鱈 str叩nky) na鱈st obr叩zky do cache prohl鱈転ee, ale zobrazit je a転 pozdji, kdy転 jsou poteba (z cache prohl鱈転ee se pak rychleji na鱈taj鱈) // preload obr叩zku JavaScriptem, obvykle fce v ud叩losti onload elementu body var obr1 = new Image(); obr1.src = /slideshow/tnpw2201303/14625377/"flag1.jpg"; Existuje alternativn鱈 e邸en鱈 bez nutnosti preloadu obr叩zk哲 http://www.wellstyled.com/css-nopreload-rollovers.html
  • 34. 34 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. vt邸鱈) velikosti ve st叩vaj鱈c鱈m nebo nov辿m okn prohl鱈転ee 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 (pehled)
  • 35. 35 Nejastj邸鱈 pou転it鱈 JavaScriptu Pr叩ce s DOM, selektory, zpracov叩n鱈 ud叩lost鱈 Ovlivnn鱈 v箪stupu v prohl鱈転ei Zobrazov叩n鱈 dialogov箪ch oken 鱈zen鱈 prohl鱈転ee (nap. pohyb v historii, naten鱈 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鱈dn鱈 dat podle sloupc哲 v tabulk叩ch, datov辿 filtry Grafy Bookmarklety Dynamick箪 web (zmna obsahu skriptem, AJAX) Na stran serveru (Node.js)
  • 36. 36 Pr叩ce s okny v JavaScriptu V nkter箪ch p鱈padech je poteba 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 Pi pou転it鱈 JavaScriptu je teba br叩t v 炭vahu mo転nost vypnut辿ho skriptov叩n鱈 na stran klienta a tuto mo転nost o邸etit (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
  • 37. 37 Nejastj邸鱈 pou転it鱈 JavaScriptu Pr叩ce s DOM, selektory, zpracov叩n鱈 ud叩lost鱈 Ovlivnn鱈 v箪stupu v prohl鱈転ei Zobrazov叩n鱈 dialogov箪ch oken 鱈zen鱈 prohl鱈転ee (nap. pohyb v historii, naten鱈 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鱈dn鱈 dat podle sloupc哲 v tabulk叩ch, datov辿 filtry Grafy Bookmarklety Dynamick箪 web (zmna obsahu skriptem, AJAX) Na stran serveru (Node.js)
  • 38. 38 T鱈dn鱈 tabulkov箪ch dat, datov辿 filtry Pomoc鱈 JavaScriptu lze data v tabulce na stran klienta (prohl鱈転ee) jednodu邸e t鱈dit nebo filtrovat, a to bez nutnosti jejich opakovan辿ho na鱈t叩n鱈 ze serveru (datab叩ze) pi aktualizaci zobrazen鱈 T鱈dit nebo filtrovat lze data podle jednoduch箪ch datov箪ch typ哲, nap. 鱈slo, etzec, datum, mna 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
  • 39. 39 Nejastj邸鱈 pou転it鱈 JavaScriptu Pr叩ce s DOM, selektory, zpracov叩n鱈 ud叩lost鱈 Ovlivnn鱈 v箪stupu v prohl鱈転ei Zobrazov叩n鱈 dialogov箪ch oken 鱈zen鱈 prohl鱈転ee (nap. pohyb v historii, naten鱈 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鱈dn鱈 dat podle sloupc哲 v tabulk叩ch, datov辿 filtry Grafy Bookmarklety Dynamick箪 web (zmna obsahu skriptem, AJAX) Na stran serveru (Node.js)
  • 40. 40 Grafy Pro vkl叩d叩n鱈 graf哲 na webov辿 str叩nky se obvykle pou転鱈vaj鱈 obr叩zky generovan辿 na stran serveru, m辿n astji potom Flash nebo JavaScript na stran klienta Pro vytv叩en鱈 graf哲 v JavaScriptu existuje nkolik knihoven, obvykle pou転鱈vaj鱈 znaku canvas Funguj鱈 ve v邸ech nejroz邸鱈enj邸鱈ch prohl鱈転e鱈ch http://code.google.com/p/flot/ (flot je plugin jQuery) http://bluff.jcoglan.com/ (Bluff je port Ruby knihovny Gruff)
  • 41. 41 Nejastj邸鱈 pou転it鱈 JavaScriptu Pr叩ce s DOM, selektory, zpracov叩n鱈 ud叩lost鱈 Ovlivnn鱈 v箪stupu v prohl鱈転ei Zobrazov叩n鱈 dialogov箪ch oken 鱈zen鱈 prohl鱈転ee (nap. pohyb v historii, naten鱈 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鱈dn鱈 dat podle sloupc哲 v tabulk叩ch, datov辿 filtry Grafy Bookmarklety Dynamick箪 web (zmna obsahu skriptem, AJAX) Na stran serveru (Node.js)
  • 42. 42 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鱈 njakou konkr辿tn鱈 innost, kter叩 p哲vodn na str叩nce nebyla (zvt邸en鱈 p鱈sma, podtr転en鱈 odkaz哲 apod.) Na Internetu je voln k dispozici velk辿 mno転stv鱈 bookmarklet哲 javascript:p鱈kaz; javascript:resizeTo(800,600) // zmna velikosti okna http://bookmarklets.com/tools/categor.html
  • 43. 43 Nejastj邸鱈 pou転it鱈 JavaScriptu Pr叩ce s DOM, selektory, zpracov叩n鱈 ud叩lost鱈 Ovlivnn鱈 v箪stupu v prohl鱈転ei Zobrazov叩n鱈 dialogov箪ch oken 鱈zen鱈 prohl鱈転ee (nap. pohyb v historii, naten鱈 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鱈dn鱈 dat podle sloupc哲 v tabulk叩ch, datov辿 filtry Grafy Bookmarklety Dynamick箪 web (zmna obsahu skriptem, AJAX) Na stran serveru (Node.js)
  • 44. 44 Dynamick箪 web, AJAX Reakce na ud叩losti vyvolan辿 u転ivatelem na stran klienta se pos鱈laj鱈 pes protokol HTTP ke zpracov叩n鱈 na server a str叩nka obdr転鱈 odpov Tato odpov ze serveru n叩sledn m哲転e zmnit stav njak辿ho prvku na str叩nce nebo se dynamicky vytvo鱈 nov箪 element Ve v箪sledku se tedy (vt邸inou) nekon叩 reload cel辿 str叩nky Pro vzd叩len辿 vol叩n鱈 metod formou v箪mny XML dat s pevnou strukturou se ust叩lil pojem AJAX (Asynchronous JavaScript and XML) AJAX nejastji pou転鱈v叩 protokol XMLRPC (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 pen叩邸ena pouze pomoc鱈 XML (textov箪 etzec, 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 oddlen鱈 aplikan鱈ch dat a jejich vizu叩ln鱈 prezentace Bli転邸鱈 informace k AJAXu a spol. budou v pedn叩邸ce o aktu叩ln鱈ch trendech na webu
  • 45. 45 Nejastj邸鱈 pou転it鱈 JavaScriptu Pr叩ce s DOM, selektory, zpracov叩n鱈 ud叩lost鱈 Ovlivnn鱈 v箪stupu v prohl鱈転ei Zobrazov叩n鱈 dialogov箪ch oken 鱈zen鱈 prohl鱈転ee (nap. pohyb v historii, naten鱈 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鱈dn鱈 dat podle sloupc哲 v tabulk叩ch, datov辿 filtry Grafy Bookmarklety Dynamick箪 web (zmna obsahu skriptem, AJAX) Na stran serveru (Node.js)
  • 46. 46 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 pedstavit jako engine V8, roz邸鱈en箪 o funkce, kter辿 umo転uj鱈 prov叩dn箪m skript哲m pistupovat k soubor哲m i s鱈泥ov箪m funkc鱈m. Co転 v praxi znamen叩, 転e m哲転eme vytvoit server, kter箪 naslouch叩 na uren辿m portu t辿m stejn箪m zp哲sobem, jak箪m vytv叩鱈me nap鱈klad obslu転n辿 metody pro ud叩losti v prohl鱈転ei. Martin Mal箪 (Zdroj叩k) http://en.wikipedia.org/wiki/Nodejs http://en.wikipedia.org/wiki/CommonJS http://geddyjs.org/ (Node.js framework) http://www.zdrojak.cz/serialy/node-js-s-javascriptem-na-serveru/ (seri叩l) Popul叩rn鱈 novinka, ale s nkter箪mi technologick箪mi omezen鱈mi! (nap. vl叩kna)
  • 47. 47 Nejastj邸鱈 pou転it鱈 JavaScriptu Pr叩ce s DOM, selektory, zpracov叩n鱈 ud叩lost鱈 Ovlivnn鱈 v箪stupu v prohl鱈転ei Zobrazov叩n鱈 dialogov箪ch oken 鱈zen鱈 prohl鱈転ee (nap. pohyb v historii, naten鱈 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鱈dn鱈 dat podle sloupc哲 v tabulk叩ch, datov辿 filtry Grafy Bookmarklety Dynamick箪 web (zmna obsahu skriptem, AJAX) Na stran serveru (Node.js)
  • 48. 48 Agenda Co je to JavaScript? Vlo転en鱈 skriptu do zdrojov辿ho k坦du str叩nky Syntaxe, metody, vlastn鱈 funkce Knihovny (frameworky) Nejastj邸鱈 pou転it鱈 JavaScriptu Internet, doporuen叩 literatura
  • 49. 49 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)
  • 50. 50 Doporuen叩 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
  • 51. 51 Souhrn Co je to JavaScript? Vlo転en鱈 skriptu do zdrojov辿ho k坦du str叩nky Syntaxe, metody, vlastn鱈 funkce Knihovny (frameworky) Nejastj邸鱈 pou転it鱈 JavaScriptu Internet, doporuen叩 literatura