Moderní použití JavaScriptu
Josef Šíma
Webmaster Senior
Co nás čeká
- Javascrtip a jeho reputace
- Nevtíravý JavaScript
- Co je to AJAX
- Co je to JSON
- Praktický příklad
- Otázky a diskuse
Javascript a jeho pověst v minulosti
- Špatná reputace - nevhodně aplikován
- Otravné popupy
- Otravné chybové hlášky
- Špatná přístupnost
Otevření nového okna
<a href="javascript:window.open('stranka.html')">skvělé stránky</a>
Otřesné!
Otevření nového okna
<a href="#" onclick="window.open('stranka.html')">skvělé stránky</a>
Špatné!
Otevření nového okna
<a href="stranka.html" onclick="return !window.open(this.href)">skvělé stránky</a>
Lepší
Otevření nového okna
<a href="stranka.html" class="popup">skvělé stránky</a>
Nejlepší!
Nevtíravý JavaScript a otevření odkazu v novém okně
function aktualizujOdkazy() {
if (!document.getElementsByTagName) return false;
var links = document.getElementsByTagName("a");
for (var i=0; i < links.length; i++) {
if (links[i].className.match("popup")) {
links[i].onclick = function() {
return !window.open(this.href);
}
}
}
}
window.onload = aktualizujOdkazy;
Co to je nevtíravý Javascript?
- Neobtěžuje
- Neomezuje
- Stránka je na Javascriptu nezávislá
- Není ve stránce na první pohled patrný
Dobré pratiky při tvorbě Javascriptu
- Dobře strukturujte kód
- Externí je lepší než interní (tzv. nenápadný/unobtrusive Javascript)
- Využívejte degradace funkčnosti
Co je to AJAX?
Co je to AJAX?
Asynchronous Javascript And XML
- Název vytvořil Jesse James Garrett z firmy AdaptivePath (adaptivepath.com)
- Je to technika, ne technologie
- Je to spojení několika technologií (JavaScript, XML, HTML, serverová část)
- AJAXové aplikace jsou někdy nazývány jako WEB 2.0
Proč by nás měl AJAX zajímat?
- Umožňuje vytvářet rychlejší stránky
- Menší přenos dat
- Méně stránek (kliknutí) k dokončení úkolu
- Může nabídnout lepší uživatelský zážitek
Proč to trvalo tak dlouho?
- Nedostatečná a rozdílná podpora JS v prohlížečích
- Žádné pomocné nástroje (knihovny)
- Málo odborných článků
Web 1.0 (klasický web)
Dnes většina webových stránek (u Seznamu např. Homepage, Vyhledávání, Novinky.cz apod.)
- Malá akce znovu načte celou stránku
- Datově náročné
- Často pomalé odpovědi
Schéma klasické webové aplikace

Tradiční webová aplikace

Web 2.0 (AJAX)
Nové weby, které hojně využívající JavaScript (Mapy.cz, Live.com, Gmail apod.)
- Malá akce nutně nenačítá celou stránku - Přímá obsluha
- Okamžitá odpověď
- Rychlé aktualizace UI (HTML kódu stránky)
- Aktualizace pouze konkrétních prvků UI
Schéma AJAXové webové aplikace

AJAXová webová aplikace

AJAXová aplikace krok za krokem
- Vytvoří se nový XMLHttpRequest (XHR), určíme HTTP metodu, URL a callback funkci
- Vytvořený XHR objekt se spustí a vyšle požadavek na server
- Server obdrží požadavek, zpracuje je ho a vrátí odpověď do XHR
- XHR objekt zavolá určenou callback funkci a předá ji odpověď od serveru
- Callback funkce podle odpovědi provede akci (aktualizace UI)
Pratické nevýhody AJAXu
- XML je nutné zpracovat (někdy také generovat) v JavaScriptu
- XML zbytečně zvětšuje datový přenos
- Dražší vývoj a údržba AJAX aplikací
- Obtížně řešitelné tlačítko zpět
- Problém s URL a jeho aktuálností
Příklad dat v XML
<?xml version="1.0" encoding="utf-8"?>
<answer>
<tv>
<description>Terapie šokem Michal...</description>
<time>20:00</time>
<channel>Nova</channel>
<title>Ordinace v růžové zahradě (65)</title>
</tv>
</answer>
Příklad dat v JSON
answer = {
tv : {
description : 'Terapie šokem Michal je na dně....',
time : '20:00',
channel : 'Nova',
title : 'Ordinace v růžové zahradě (65)'
}
};
Řešení v podobě JSON
- JSON - JavaScript Object Notation
- Využívá nativního statického objektového modelu v JavaScriptu
- Zachovává strukturu z XML
- Méně náročné na klienta
- Menší přenos dat
Kde například používáme JavaScript (JSON)?
- HP Seznam.cz (Našeptávač, TV program, Bleskovky, Poznámky)
- Mapy.cz - kompletní JavaScriptová aplikace
- Sauto a další
Praktický příklad: Editace textu "on the fly"
- Předvedeme si strukturovaný zápis JavaScriptu (JSON)
- Ukážeme si nevtíravý JavaScript
- Vyzkoušíme si práci s událostmi v JavaScriptu
A to je vše
Děkuji za pozornost a nyní je čas na vaše dotazy