O documento discute as principais mudanças no JavaScript introduzidas pelo HTML5, incluindo novas APIs para canvas, áudio e vídeo, geolocalização, mensagens entre documentos, XMLHttpRequest nível 2, WebSocket e armazenamento na web. O HTML5 objetiva compatibilidade, utilidade, interoperabilidade e acesso universal com o apoio de grandes empresas como Apple, Mozilla e Google.
1. HTML5:
o que mudou no javascript
Marcelo de Souza
msouza@conrad-caine.com
2. Sobre mim
Marcelo de Souza
Líder do time de Front-End
Conrad Caine
Fatec/Senac
IFSul (Cefet)
http://www.linkedin.com/in/marcelodesouzacc
3. Conrad Caine
• 1998, Munique, 2 pessoas
• 2005, Pelotas, 1 pessoa (+ 3)
• 2012, 115 pessoas
o Munique, Alemanha
o Pelotas, Brasil
o Buenos Aires, Argentina
• Tecnologias
o PHP, .NET, Python, Ruby, Node.js HTML5, Flash, Mobile (iOS, Android) e Javascript
• Criatividade Pragmática
5. HTML
• 1993 - IETF (Internet Engineering Task Force) - HTML 2.0
• 1999 - W3C (World Wide Web Consortium) - HTML 4.1
• 2000 - XHTML 1.0
• 2001 - XHTML 1.1 (CSS)
• 2004 - XHTML 2 - não compatível
6. HTML5
• 2004 - WHATWG (Web Hypertext Application Technology Working Group)
• Opera, Apple, Mozilla, Google
• HTML5
o compatilidade
o utilidade
o interoperabilidade (APIs)
o acesso universal
o plugin free
8. Javascript
"Enquanto HTML é usado para armazenar o conteúdo e a formatação de uma página web, e o CSS
codifica o estilo de como o conteúdo formatado deve ser exibido graficamente, JavaScript é
usado para criar efeitos ricos ou aplicações web ricas."
Mozilla Developer Network
10. HTML5 Javascript APIs
• Canvas
• Audio e Video
• Geolocation
• Messaging
• XMLHttpRequest 2
• Web Socket
• Web Worker
• Web Storage
11. CANVAS API
• Elemento HTML que pode ser manipulado por javascript através de uma API
• criado pela Aple - direitos autorais
• SVG (Adobe) e VML (Microsoft)
• Explorer
• Navegadores
o Firefox
o Safari
o Chrome
o Opera
o IE9
15. AUDIO E VIDEO API
• Plugin free
• Audio Codecs
o AAC
o MPEG-3
o Ogg Vorbis (free)
• Video Codecs
o H.264
o VP8
o Ogg Theora (free)
• iPhone: acelerador de hardware para H.264
• Google lança webm em 2010 (VP8 + Ogg Vorbis)
16. AUDIO E VIDEO API
Nave mp we og
gador S bm N
Intern 4 N g
et
Firefo
Explor N S S
x 9
er4.0
Googl S S S
e
Apple S N N
Chro
Safari
me 6
Opera N S S
5
10.6
17. AUDIO E VIDEO API
<video id="video1" poster="video.jpg"
controls>
<source src="video.webm" />
<source src="video.ogv" />
<source src="video.mp4" />
<p>Atualize seu navegador!</p>
</video>
18. AUDIO E VIDEO API
<audio controls="controls">
<source src="som.ogg" />
<source src="som.mp3" />
<p>Atualize seu navegador!</p>
</audio>
19. AUDIO E VIDEO API
var vd = document.getElementById('video1');
vd.play();
vd.pause();
console.log(vd.duration);
20. AUDIO E VIDEO API
• http://www.w3.org/2010/05/video/mediaevents.html
• http://videojs.com/
• http://www.youtube.com/html5
21. GEOLOCATION API
• latitude e longitude
• segurança: permissão do usuário
• tablet, smartphone, notebook
• uma das primeiras funções suportadas por todos os navegadores
o Firefox 3.5
o Chrome 5
o IE9
o Safari 5
o Opera 10.6
22. GEOLOCATION API
function upd(position) {
// codigo
}
function err(error) {
// codigo
}
if (navigator.geolocation) {
navigator.geolocation
.getCurrentPosition(upd, err);
}
23. GEOLOCATION API
• http://html5demos.com/geo
• http://maxheapsize.com/static/html5geolocationdemo.html
24. Cross Document Messaging
• comunicação entre iFrames, tabs e windows em um navegador
• permite diferentes sites comunicarem-se entre si através do navegador
• segurança: origem da mensagem
• Navegadores
o Firefox 3
o Chrome
o IE8
o Opera 9.6
o Safari 4
25. Cross Document Messaging
if (window.postMessage) {
var h = document.body.clientHeight;
window.postMessage(h, 'exemplo.com');
}
28. HXMLHttpRequest Level 2
• Versão melhorada do AJAX
• Cross Origin (configurações no servidor)
• Progress events
o loadstart, progress, abort, error, load, loaded
• Navegadores
o Chrome
o Firefox 3.5
o Safari 4
29. WebSocket API
• Full-Duplex: Conexão em tempo real com o servidor
• redução da quantidade de bytes
• redução da latência
• aplicativos web
• websocket servers
o Kaazing, Netty, mod_pywebsocket, node.js
• Navegadores
o Chrome 4
o Firefox 4
o Safari 5
31. WebSocket API
if (window.WebSocket) {
ws = new WebSocket('ws://exemplo.com');
ws.onopen = function() {
ws.send('mensagem ao servidor');
}
ws.onmessage = function(ev) {
console.log(ev.data);
}
ws.onclose = function(ev) {
console.log('conexão fechada');
}
}
32. Web Workers API
• Processamento Javascript em Background
• Threads: multicore CPUs
• Previne avisos: "Script não responde"
• Não trava o navegador
33. Web Workers API
• Não consegue acessar elementos na página pai
• Usa postMessage como comunicação
• Navegadores
o Firefox 3.5
o Chrome 3
o IE10
o Opera 10.6
o Safari 4
34. Web Workers API
// main.js
if (window.Worker) {
w = new Worker('task.js');
w.postMessage('start');
w.onmessage = function(ev) {
console.log(ev.data);
w.terminate();
}
}
35. Web Workers API
// task.js
importScripts('jQuery.js');
function start() {
// codigo
}
self.onmessage = function(ev) {
if (ev.data == 'start') {
start();
self.postMessage('feito!');
}
}
36. Web Workers API
• http://ie.microsoft.com/testdrive/Graphics/WorkerFountains/D
• http://ie.microsoft.com/testdrive/HTML5/WebWorkerTest262/D
• http://www.facebooktv.co/labs/html5_demo_web_workers/
37. Web Storage API
• Armazenamento de dados local
o Local Storage
o Session Storage
• Cookie
o 4KB
o enviado ao servidor
• Navegadores
o Chrome 3
o Firefox 3
o IE8
o Opera 10
o Safari 4
38. Web Storage API
if (window.localStorage) {
localStorage.setItem('nome', 'Marcelo');
console.log(localStorage.getItem('nome'));
localStorage.removeItem('nome');
localStorage.clear();
}
// window.sessionStorage
39. Web Storage API
• http://labs.zenorocha.com/html5/local-storage/
• http://diveintohtml5.info/examples/localstorage-halma.html