Moderní použití JavaScriptu

Josef Šíma

Webmaster Senior

Co nás čeká

Javascript a jeho pověst v minulosti

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?

Dobré pratiky při tvorbě Javascriptu

Co je to AJAX?

Co je to AJAX?

Asynchronous Javascript And XML

Proč by nás měl AJAX zajímat?

Proč to trvalo tak dlouho?

Web 1.0 (klasický web)

Dnes většina webových stránek (u Seznamu např. Homepage, Vyhledávání, Novinky.cz apod.)

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

Schéma AJAXové webové aplikace

AJAXová webová aplikace

AJAXová aplikace krok za krokem

  1. Vytvoří se nový XMLHttpRequest (XHR), určíme HTTP metodu, URL a callback funkci
  2. Vytvořený XHR objekt se spustí a vyšle požadavek na server
  3. Server obdrží požadavek, zpracuje je ho a vrátí odpověď do XHR
  4. XHR objekt zavolá určenou callback funkci a předá ji odpověď od serveru
  5. Callback funkce podle odpovědi provede akci (aktualizace UI)

Pratické nevýhody AJAXu

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

Kde například používáme JavaScript (JSON)?

Praktický příklad: Editace textu "on the fly"

A to je vše

Děkuji za pozornost a nyní je čas na vaše dotazy