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

Thanks for flagging this SlideShare!

Oops! An error has occurred.

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

TNPW2-2011-03

1,235

Published on

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

  • Be the first to like this

No Downloads
Views
Total Views
1,235
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
3
Comments
0
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. TNPW2
    2010/2011
    03 – JavaScript
    Mgr. Lukáš Vacek
    lukas.vacek@uhk.cz
  • 2. Agenda3
    • Co je to JavaScript?
    • 3. Vložení skriptu do zdrojového kódu stránky
    • 4. Syntaxe, metody, vlastní funkce
    • 5. Knihovny (frameworky)
    • 6. Nejčastější použití JavaScriptu
    • 7. Internet, doporučená literatura
    2
  • 8. Co je to JavaScript?
    JavaScript je interpretovatelný (neprobíhá kompilování!) programovací jazykse základními objektově orientovanými vlastnostmi
    V polovině 90. let jej vytvořila firma Netscape a jeho univerzální jádro (včetně různých modifikací – např. JScript od fy Microsoft) je součástí webových prohlížečů
    Existuje norma pro použití JavaScriptu a jeho odvozenin, ECMAScript
    Aktuální verze ECMAScriptEdition 5 (12/2009)
    JavaScript umožňuje vložit do (X)HTML stránky proveditelný obsah, tj. stránka může obsahovat dynamické programy, které s uživatelem komunikují na straně klienta (prohlížeče)
    Použití JavaScriptu na straně klienta může zvýšit interaktivitu s uživatelem
    Je označován jako tzv. assembler webu
    http://cs.wikipedia.org/wiki/JavaScript
    http://en.wikipedia.org/wiki/ECMAScript#Dialects
    http://www.w3schools.com/js/default.asp
    http://www.jakpsatweb.cz/javascript/
    http://www.root.cz/clanky/spor-o-budoucnost-javascriptu-vyresen/
    http://zdrojak.root.cz/clanky/ecmascript-strict-mode-ve-firefoxu-4/
    3
  • 9. Agenda3
    • Co je to JavaScript?
    • 10. Vložení skriptu do zdrojového kódu stránky
    • 11. Syntaxe, metody, vlastní funkce
    • 12. Knihovny (frameworky)
    • 13. Nejčastější použití JavaScriptu
    • 14. Internet, doporučená literatura
    4
  • 15. Vložení JavaScriptu do (X)HTML kódu
    Interní skript
    5
    <script type="text/javascript">
    /* <![CDATA[ */
    kód skriptu
    /* ]]> */
    </script>
    • Externí skript (knihovny)
    <script type="text/javascript" src="mujskript.js"></script>
  • 16. 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
    • 17. Zdrojový kód lze vizuálně strukturovat pro větší přehlednost, stejně tak je možné jej komprimovat v okamžiku nasazení na produkčním prostředí webového serveru
    • 18. http://dean.edwards.name/packer/
    • 19. http://yui.2clics.net/
    6
    • Debugování zdrojového kódu v JavaScriptu už dnes není problém, existuje celá řada vývojových prostředí a nástrojů, které to umožňují
    • 20. https://addons.mozilla.org/en-US/firefox/addon/1843 (Firebug pro MozillaFirefox)
    • 21. http://code.google.com/p/jsdt/
    • 22. http://www.myeclipseide.com/module-htmlpages-display-pid-57.html
  • Agenda3
    • Co je to JavaScript?
    • 23. Vložení skriptu do zdrojového kódu stránky
    • 24. Syntaxe, metody, vlastní funkce
    • 25. Knihovny (frameworky)
    • 26. Nejčastější použití JavaScriptu
    • 27. Internet, doporučená literatura
    7
  • 28. 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
    8
    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
  • 29. 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!
    9
    <script type="text/javascript">
    /* <![CDATA[ */
    functionabc() {
    var isMSIE = /*@cc_on!@*/false;
    returnisMSIE;
    }
    /* ]]> */
    </script>
    • http://met.blog.root.cz/2007/03/29/nejkratsi-detekce-internet-exploreru-na-svete/
  • Agenda3
    • Co je to JavaScript?
    • 30. Vložení skriptu do zdrojového kódu stránky
    • 31. Syntaxe, metody, vlastní funkce
    • 32. Knihovny (frameworky)
    • 33. Nejčastější použití JavaScriptu
    • 34. Internet, doporučená literatura
    10
  • 35. 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í 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/
    11
  • 36. jQuery
    Velikostí malá (jeden soubor, cca 57 KB!) a přitom velmi kompaktní JavaScript knihovna poskytující interaktivitu mezi JavaScriptem a (X)HTML v okně webového prohlížeče
    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/
    12
  • 37. Načtení knihovny na stránce
    Nejčastěji je vybraná knihovna uložena na stejném webovém serveru jako webové stránky (používám to i v příkladech k přednášce!)
    Doporučenou variantou pro často používané knihovny je využití existujících souborů v požadované verzi např. jQuery z Google API serveru…
    http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.js
    13
    <scriptsrc="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.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ů!
  • Agenda3
    • Co je to JavaScript?
    • 38. Vložení skriptu do zdrojového kódu stránky
    • 39. Syntaxe, metody, vlastní funkce
    • 40. Knihovny (frameworky)
    • 41. Nejčastější použití JavaScriptu
    • 42. Internet, doporučená literatura
    14
  • 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)
    15
  • 44. 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í!
    16
    // 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
  • 45. 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
    <imgsrc="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)
    • 46. 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
    varhodnota = $("#combooption:selected").val();
    03-02-udalosti.html
  • 47. 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)
    18
  • 48. 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.
    19
    // 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
  • 49. 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/
    20
  • 50. Nejčastější použití JavaScriptu
    • Práce s DOM, selektory, zpracování událostí
    • 51. 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)
    21
  • 52. 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
    22
    // 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!
    • 53. http://jqueryui.com/demos/dialog/
    Zdrojové kódy… prikladyjquery-dialogdevelopment-bundledemosdialog
    http://www.queness.com/post/77/simple-jquery-modal-window-tutorial
  • 54. Nejčastější použití JavaScriptu
    • Práce s DOM, selektory, zpracování událostí
    • 55. Ovlivnění výstupu v prohlížeči
    • 56. Zobrazování dialogových oken
    • 57. Ří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)
    23
  • 58. Řízení prohlížeče
    Objekt History umožňuje pohyb vpřed a zpět uživatelskou historií prohlížeče
    24
    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
  • Nejčastější použití JavaScriptu
    • Práce s DOM, selektory, zpracování událostí
    • 59. Ovlivnění výstupu v prohlížeči
    • 60. Zobrazování dialogových oken
    • 61. Ří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)
    25
  • 62. 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!
    26
    <div id="test">pokusný div</div>
    <script type="text/javascript">
    /* <![CDATA[ */
    functionTestCSS() {
    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
  • 63. CSS layouty v JavaScriptu
    CSS3 má velmi problematickou implementaci v aktuálně používaných prohlížečích
    Nepodporu některých CSS3 vlastností v prohlížečích lze už dnes obejít pomocí JavaScriptu
    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)
    27
  • 64. Nejčastější použití JavaScriptu
    • Práce s DOM, selektory, zpracování událostí
    • 65. Ovlivnění výstupu v prohlížeči
    • 66. Zobrazování dialogových oken
    • 67. Řízení prohlížeče (např. pohyb v historii, načtení dokumentu, refresh)
    • 68. 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)
    28
  • 69. 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ů
    29
    document.getElementById('id_elementu').vlastnost
    document.forms[0].elements[2].vlastnost
    document.forms[0].id_elementu.vlastnost
    • Pro jQuery existuje velmi propracovaný pluginValidation, který kromě běžných validačních funkcí nabízí i podporu lokalizovaných chybových hlášek
    • 70. http://bassistance.de/jquery-plugins/jquery-plugin-validation/
    • 71. http://programujte.com/?akce=clanek&cl=2009090500-jquery-plugin-validation-plugin-pro-snadnou-kontrolu-formularu (jednoduchý český návod)
    03-05-formular.html
  • 72. Nejčastější použití JavaScriptu
    • Práce s DOM, selektory, zpracování událostí
    • 73. Ovlivnění výstupu v prohlížeči
    • 74. Zobrazování dialogových oken
    • 75. Řízení prohlížeče (např. pohyb v historii, načtení dokumentu, refresh)
    • 76. Spolupráce s CSS
    • 77. 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)
    30
  • 78. Práce s obrázky – preloading obrázků
    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í)
    31
    // 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 preloaduobrázků
    • 79. http://www.wellstyled.com/css-nopreload-rollovers.html
  • 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://orangoo.com/labs/GreyBox/ (GreyBox)
    http://www.fortysomething.ca/mt/etc/archives/005400.php (přehled)
    32
    Práce s obrázky – obrázkové galerie
  • 80. Nejčastější použití JavaScriptu
    • Práce s DOM, selektory, zpracování událostí
    • 81. Ovlivnění výstupu v prohlížeči
    • 82. Zobrazování dialogových oken
    • 83. Řízení prohlížeče (např. pohyb v historii, načtení dokumentu, refresh)
    • 84. Spolupráce s CSS
    • 85. Validace a zpracování formulářů
    • 86. 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)
    33
  • 87. 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 Strictnení 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)!
    34
    functionwinopen(url){
    var win = window.open(url,'okno1','width=400,height=340');
    returnfalse;
    }
    <a href="http://www.uhk.cz" onclick="return winopen(this.href)">okno</a>
    03-06-odkazy.html
  • 88. Nejčastější použití JavaScriptu
    • Práce s DOM, selektory, zpracování událostí
    • 89. Ovlivnění výstupu v prohlížeči
    • 90. Zobrazování dialogových oken
    • 91. Řízení prohlížeče (např. pohyb v historii, načtení dokumentu, refresh)
    • 92. Spolupráce s CSS
    • 93. Validace a zpracování formulářů
    • 94. Práce s obrázky – preloading obrázků, obrázkové galerie
    • 95. Práce s okny
    Třídění dat podle sloupců v tabulkách, datové filtry
    Grafy
    Bookmarklety
    Dynamický web (změna obsahu skriptem, AJAX)
    35
  • 96. 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!
    36
    03-07-trideni.html
    03-08-filtry.html
  • 97. Nejčastější použití JavaScriptu
    • Práce s DOM, selektory, zpracování událostí
    • 98. Ovlivnění výstupu v prohlížeči
    • 99. Zobrazování dialogových oken
    • 100. Řízení prohlížeče (např. pohyb v historii, načtení dokumentu, refresh)
    • 101. Spolupráce s CSS
    • 102. Validace a zpracování formulářů
    • 103. Práce s obrázky – preloading obrázků, obrázkové galerie
    • 104. Práce s okny
    • 105. Třídění dat podle sloupců v tabulkách, datové filtry
    Grafy
    Bookmarklety
    Dynamický web (změna obsahu skriptem, AJAX)
    37
  • 106. 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)
    38
  • 107. Nejčastější použití JavaScriptu
    • Práce s DOM, selektory, zpracování událostí
    • 108. Ovlivnění výstupu v prohlížeči
    • 109. Zobrazování dialogových oken
    • 110. Řízení prohlížeče (např. pohyb v historii, načtení dokumentu, refresh)
    • 111. Spolupráce s CSS
    • 112. Validace a zpracování formulářů
    • 113. Práce s obrázky – preloading obrázků, obrázkové galerie
    • 114. Práce s okny
    • 115. Třídění dat podle sloupců v tabulkách, datové filtry
    • 116. Grafy
    Bookmarklety
    Dynamický web (změna obsahu skriptem, AJAX)
    39
  • 117. 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ů
    40
    javascript:příkaz;
    javascript:resizeTo(800,600) // změna velikosti okna
    http://bookmarklets.com/tools/categor.html
  • 118. Nejčastější použití JavaScriptu
    • Práce s DOM, selektory, zpracování událostí
    • 119. Ovlivnění výstupu v prohlížeči
    • 120. Zobrazování dialogových oken
    • 121. Řízení prohlížeče (např. pohyb v historii, načtení dokumentu, refresh)
    • 122. Spolupráce s CSS
    • 123. Validace a zpracování formulářů
    • 124. Práce s obrázky – preloading obrázků, obrázkové galerie
    • 125. Práce s okny
    • 126. Třídění dat podle sloupců v tabulkách, datové filtry
    • 127. Grafy
    • 128. Bookmarklety
    Dynamický web (změna obsahu skriptem, AJAX)
    41
  • 129. 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 (AsynchronousJavaScriptand 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
    42
  • 130. Nejčastější použití JavaScriptu
    • Práce s DOM, selektory, zpracování událostí
    • 131. Ovlivnění výstupu v prohlížeči
    • 132. Zobrazování dialogových oken
    • 133. Řízení prohlížeče (např. pohyb v historii, načtení dokumentu, refresh)
    • 134. Spolupráce s CSS
    • 135. Validace a zpracování formulářů
    • 136. Práce s obrázky – preloading obrázků, obrázkové galerie
    • 137. Práce s okny
    • 138. Třídění dat podle sloupců v tabulkách, datové filtry
    • 139. Grafy
    • 140. Bookmarklety
    • 141. Dynamický web (změna obsahu skriptem, AJAX)
    43
  • 142. Agenda3
    • Co je to JavaScript?
    • 143. Vložení skriptu do zdrojového kódu stránky
    • 144. Syntaxe, metody, vlastní funkce
    • 145. Knihovny (frameworky)
    • 146. Nejčastější použití JavaScriptu
    • 147. Internet, doporučená literatura
    44
  • 148. Odkazy na Internetu
    http://www.w3schools.com/js/default.asp
    http://www.jakpsatweb.cz/javascript/
    http://zdrojak.root.cz/zpravicky/zdroje-prikladu-pro-javascriptove-vyvojare/
    http://www.hotscripts.com/
    http://archive.devx.com/sourcebank/
    http://en.wikipedia.org/wiki/List_of_JavaScript_libraries
    http://bookmarklets.com/tools/categor.html
    http://www.jquery.com
    http://scripty2.com/ (knihovna efektů, spíše pro zajímavost)
    http://www.1stwebdesigner.com/resources/javascript-sliders-scrollers/
    http://www.root.cz/clanky/ajax/
    http://www.zive.cz/h/Programovani/Ar.asp?ARI=109710&CAI=2094
    http://zdrojak.root.cz/clanky/node-js-s-javascriptem-na-server/ (JavaScript na serveru)
    45
  • 149. Doporučená literatura
    Flanagan, David – JavaScript Kompletní průvodce, ComputerPress 2002
    Václavek, Petr – JavaScript – Hotová řešení, CP Books 2003
    Asleson, Ryan; Schutta, T. Nathaniel – Ajax – vytváříme vysoce interaktivní webové aplikace, ComputerPress 2006
    46
  • 150. Souhrn3
    • Co je to JavaScript?
    • 151. Vložení skriptu do zdrojového kódu stránky
    • 152. Syntaxe, metody, vlastní funkce
    • 153. Knihovny (frameworky)
    • 154. Nejčastější použití JavaScriptu
    • 155. Internet, doporučená literatura
    47

×