SAPO Sessions #2
18 Março 2009
JAVASCRIPT
DONE
RIGH
T!
creative commons
André Luís
attribution
non-commercial http://andr3.net
share-alike 3.0 aluis@co.sapo.pt

SAPO Sessions #2 javascript, done right.
Antes de começar... um disclaimer. :)

SAPO Sessions #2 javascript, done right.
Não venho pregar.

SAPO Sessions #2 javascript, done right.
Nem vender nada.

SAPO Sessions #2 javascript, done right.
Venho‐vos falar da minha
experiência.

SAPO Sessions #2 javascript, done right.
Desde brincadeiras em javascript
no site dum canal de IRC.
2000

SAPO Sessions #2 javascript, done right.
Até aplicações web inseridas
no Webmail do SAPO.
2009

SAPO Sessions #2 javascript, done right.
Índice
Uso dado ao Javascript
Problemas
Como resolvê‐los
Javascript Não Obstrutivo
Hijax
Scripts não bloqueantes
Histórico com Javascript
2009

SAPO Sessions #2 javascript, done right.
javascript
Tem sido muito maltratado ao longo do tempo

SAPO Sessions #2 javascript, done right.
2001
ppopu
s
puop p
pop p
o u up
pjavascript s
popups s
ps
filho do diabo
Em 2001, era o filho do diabo.

SAPO Sessions #2 javascript, done right.
2005
http://whit.me/ajax
Até que...

SAPO Sessions #2 javascript, done right.
2005
st
X que
JA e
A pR
tt javascript
H WebAp
L
M ps
X everybody’s bitch
lover
Mashup
s

SAPO Sessions #2 javascript, done right.
javascript é usado para

SAPO Sessions #2 javascript, done right.
javascript é usado para popups

SAPO Sessions #2 javascript, done right.
javascript é usado para efeitos de estilo

SAPO Sessions #2 javascript, done right.
javascript é usado para decorações
natalícias

SAPO Sessions #2 javascript, done right.
javascript é usado para pré‐carregar
imagens

SAPO Sessions #2 javascript, done right.
javascript é usado para mudar de página

SAPO Sessions #2 javascript, done right.
javascript é usado para evitar recarregamento
de páginas inteiras

SAPO Sessions #2 javascript, done right.
javascript é usado para evitar recarregamento
AJA X
de páginas inteiras

SAPO Sessions #2 javascript, done right.
javascript é usado para tudo
Am
s Valid
a
p
a bie ação
M de
nte Form
fline
s Of s G s
pp
A ráf
/Sub icos
Emu Pub
lador
es de
(spec Jogo
trum tes
s ui
e S
, etc) ffic
O

SAPO Sessions #2 javascript, done right.
Será que isto é um problema?

SAPO Sessions #2 javascript, done right.
problemas com o javascript
Ausência de suporte para Javascript
Intranets corp., screen-readers, search engine crawlers, NoScript, etc.
Somando as pequenas percentagens destes factores, facilmente se chega acima
dos 10%.
Mais: um utilizador que veja um site quebrado, muito provavelmente, não volta.

SAPO Sessions #2 javascript, done right.
problemas com o javascript
Ausência de suporte para Javascript
Não é bookmarkable
Não oferece, de origem, mecanismos para guardar o estado duma webapp
Soa a algo familiar? Argumento muitas vezes usado por *nós* contra sites 100% Flash.

SAPO Sessions #2 javascript, done right.
problemas com o javascript
Ausência de suporte para Javascript
Não é bookmarkable
Quebra o histórico (retroceder, avançar)
Não oferece, de origem, mecanismos para guardar o histórico
Permite-nos implementar mecanismos para isto, mas não fornece de origem.

SAPO Sessions #2 javascript, done right.
problemas com o javascript
Ausência de suporte para Javascript
Não é bookmarkable
Quebra o histórico (retroceder, avançar)
Acessibilidade: navegação por teclado
Eventos onmousedown, onmouseover não disparam se não se usar um disp. apontador
focus para além do onmouseover, onclick em vez de onmousedown

SAPO Sessions #2 javascript, done right.
problemas com o javascript
Ausência de suporte para Javascript
Não é bookmarkable
Quebra o histórico (retroceder, avançar)
Acessibilidade: navegação por teclado
Usabilidade: controlar a abertura dum link
Abrir numa nova tab, nova janela ou enviar link por mail. Problema: href=”#”

SAPO Sessions #2 javascript, done right.
problemas com o javascript
Ausência de suporte para Javascript
Não é bookmarkable
Boas notícias: tudo isto é evitável.
Quebra o histórico (retroceder, avançar)
Acessibilidade: navegação por teclado
Usabilidade: controlar a abertura dum link

SAPO Sessions #2 javascript, done right.
Degradação Graciosa vs. Melhoramento Progressivo
Graceful Degradation Progressive Enhancement

SAPO Sessions #2 javascript, done right.
Degradação Graciosa vs. Melhoramento Progressivo
Graceful Degradation Progressive Enhancement
Mostram‐se versões
alternativas no caso do
cliente não suportar todas
as tecnologias utilizadas.

SAPO Sessions #2 javascript, done right.
Degradação Graciosa vs. Melhoramento Progressivo
Graceful Degradation Progressive Enhancement
Exemplos:
<img src=”foto.png” alt=”Fotografia”>
Mostram‐se versões
<noscript>
alternativas no caso do
<noframes>
cliente não suportar todas
as tecnologias utilizadas.

SAPO Sessions #2 javascript, done right.
Degradação Graciosa vs. Melhoramento Progressivo
Graceful Degradation Progressive Enhancement
Constrói‐se uma versão
base/usável duma
funcionalidade e melhora‐se
progressivamente.

SAPO Sessions #2 javascript, done right.
Degradação Graciosa vs. Melhoramento Progressivo
Graceful Degradation Progressive Enhancement
Exemplos:
Constrói‐se uma versão
Substitução de Imagens por CSS
base/usável duma
Javascript Não Obstrutivo
funcionalidade e melhora‐se
progressivamente.

SAPO Sessions #2 javascript, done right.
Degradação Graciosa vs. Melhoramento Progressivo
Graceful Degradation Progressive Enhancement
Exemplos:
Melhorar
Constrói‐se uma versão
Substitução de Imagens por CSS
progressivamente!
base/usável duma
Javascript Não Obstrutivo
funcionalidade e melhora‐se
progressivamente.

SAPO Sessions #2 javascript, done right.
?

SAPO Sessions #2 javascript, done right.
javascript não obstrutivo

SAPO Sessions #2 javascript, done right.
obstrutivo: adj.
que causa obstrução;
que serve para obstruir.
Funny story: não foi possível colocar o link directo para “obstrutivo” pq a priberam usa JS
obstrutivo.

SAPO Sessions #2 javascript, done right.
obstrutivo: adj.
que causa obstrução;
que serve para obstruir.
fonte: Priberam
http://priberam.pt/dlpo/
FAIL
Funny story: não foi possível colocar o link directo para “obstrutivo” pq a priberam usa JS
obstrutivo.

SAPO Sessions #2 javascript, done right.
javascript não obstrutivo
Mas como?

SAPO Sessions #2 javascript, done right.
javascript não obstrutivo
Revisão da matéria dada: Camadas de Separação
Conteúdo
HTML
Comportamento
Apresentação
JAVASCRIPT
CSS

SAPO Sessions #2 javascript, done right.
javascript não obstrutivo
Revisão da matéria dada: Camadas de Separação
/whatever.php
Conteúdo
HTML
/css/style.css /js/whatever.js
Comportamento
Apresentação
JAVASCRIPT
CSS

SAPO Sessions #2 javascript, done right.
javascript não obstrutivo
Revisão da matéria dada: Camadas de Separação
/whatever.php
Não misturar
Conteúdo
tecnologias.
HTML
/css/style.css /js/whatever.js
Comportamento
Apresentação
JAVASCRIPT
CSS
Loose coupling FTW!!

SAPO Sessions #2 javascript, done right.
javascript não obstrutivo
Revisão da matéria dada: Carregamento e Eventos
HTML
onDomReady / domContentLoaded
CSS JAVASCRIPT
MEDIA
window.onLoad
DOMContentLoaded no HTML5

SAPO Sessions #2 javascript, done right.
javascript não obstrutivo
Quão importante é um mero link?

SAPO Sessions #2 javascript, done right.
Vannevar Bush
1945: propôs o Memex, um computador teórico que em vez de ordenar informação
alfabeticamente, usava associações entre documentos. Inspirou a criação do conceito de
hipertexto. Artigo: As We May Think.

SAPO Sessions #2 javascript, done right.
Ted Nelson
1960: Fundou projecto Xanadu, definiu o conceito de Hipertexto. Apesar do seu conceito ser
um pouco mais completo, xanadu falhou. (links que se quebram nem gestão de versões, na
WWW do TBL)

SAPO Sessions #2 javascript, done right.
Douglas Engelbart
1963: NLS (oNLine System), que utilizava ligações (links) do conceito do hipertexto.

SAPO Sessions #2 javascript, done right.
Tim Berners‐Lee
tanaka
1991: WWW, num lab do CERN.

SAPO Sessions #2 javascript, done right.
javascript não obstrutivo
Remover obstruções
<a href=”javascript:show(
‘wonderbra.png’, ...
FAIL
Link sem href = big no no.
Motores de busca não seguem.
Não há JS, não há link. Não tem de ser assim...

SAPO Sessions #2 javascript, done right.
javascript não obstrutivo
Remover obstruções
<a href=”#” onclick=”show(
‘wonderbra.png’, ...
FAIL
Ainda assim...
Está a definir um handler por Javascript... mas não tem href.
AVISO: Sempre que escreverem “#”. YOU’RE DOIN’ IT WRONG!

SAPO Sessions #2 javascript, done right.
javascript não obstrutivo
Remover obstruções
<a href=”#” onclick=”show(
‘wonderbra.png’, ...
FAIL
Ainda assim...
I CAN HAZ CHEEZBURGER
http://whit.me/doinitwrong
Está a definir um handler por Javascript... mas não tem href.
AVISO: Sempre que escreverem “#”. YOU’RE DOIN’ IT WRONG!

SAPO Sessions #2 javascript, done right.
javascript não obstrutivo
Remover obstruções
<a href=”wonderbra.png”
onclick=”show(‘wonderbra.png’);
return false;”>...
menos mau
Já tem href.
ATENÇÃO: return false; impede o browser de seguir o href=
Mas... javascript inline é má idea.

SAPO Sessions #2 javascript, done right.
javascript não obstrutivo
Remover obstruções
<a href=”wonderbra.png”
onclick=”show(this.href);
return false;”>...
menos mau
DRY - don’t repeat yourself. ;)

SAPO Sessions #2 javascript, done right.
javascript não obstrutivo
Remover obstruções
<a href=”wonderbra.png”
class=”preview”
>...
melhor

SAPO Sessions #2 javascript, done right.
javascript não obstrutivo
Remover obstruções
meanwhile...
in a js file not
far from there
var prevs =
document.getElementsByClassName(‘preview’);
for (var i=0,len=prevs.length;i<len;i++) {
prevs[i].addEventListener (‘click’, show);
prevs[i].onclick = ‘return false’;
}

SAPO Sessions #2 javascript, done right.
javascript não obstrutivo
Remover obstruções
meanwhile...
in a js file not
far from there
var prevs =
document.getElementsByClassName(‘preview’);
for (var i=0,len=prevs.length;i<len;i++) {
prevs[i].addEventListener (‘click’, show);
prevs[i].onclick = ‘return false’;
}
In your dreams,
sucker!

SAPO Sessions #2 javascript, done right.
javascript não obstrutivo
Remover obstruções
Frameworks ajudam a lidar com as
incoerências dos browsers

SAPO Sessions #2 javascript, done right.
javascript não obstrutivo
Remover obstruções
jQuery
jQuery (document).ready ( function () {
jQuery('a.jquery').click (function () {
alert('jQuery!');
return false;
} );
} );

SAPO Sessions #2 javascript, done right.
javascript não obstrutivo
Remover obstruções
Prototype.js
document.observe ( 'dom:loaded', function () {
$$('a.prototype').each (function (el) {
Event.observe (el, 'click', function () {
alert('Prototype!');
});
el.setAttribute( 'onclick', 'return false;');
});
});

SAPO Sessions #2 javascript, done right.
javascript não obstrutivo
Remover obstruções
Prototype.js
document.observe ( 'dom:loaded', function () {
$$('a.prototype').each (function (el) {
Event.observe (el, 'click', function (ev) {
alert('Prototype!');
});
Event.stop(ev);
});
});

SAPO Sessions #2 javascript, done right.
javascript não obstrutivo
Remover obstruções
demo

SAPO Sessions #2 javascript, done right.
javascript não obstrutivo
Exemplo Lightbox http://www.lokeshdhakar.com/projects/lightbox2/
Fonte das imagens: http://brunoluis.com

SAPO Sessions #2 javascript, done right.
javascript não obstrutivo
Exemplo Lightbox
Links para as imagens: href=”wonderbra.jpg”
1
on dom:loaded, procurar links com rel=”lightbox”
2
Definir funções para mostrar o Loading... e carregar
3
imagem dentro da página
Cancelar a acção de “click” para o browser não seguir o
4
que está no href.

SAPO Sessions #2 javascript, done right.
javascript não obstrutivo
Exemplo Lightbox
<a href=”wonderbra.jpg” rel=”lightbox”>
1
a[rel=lightbox] todos os links com atributo rel=lightbox
2
addEventListener (w3c) / attachEvent (IE)
3
return false;
4

SAPO Sessions #2 javascript, done right.
javascript não obstrutivo
E formulários?

SAPO Sessions #2 javascript, done right.
javascript não obstrutivo
http://web.mail.sapo.pt/

SAPO Sessions #2 javascript, done right.
javascript não obstrutivo

SAPO Sessions #2 javascript, done right.
javascript não obstrutivo
onSubmit
DOM
LOADED!

SAPO Sessions #2 javascript, done right.
javascript não obstrutivo
onSubmit
DOM
LOADED!

SAPO Sessions #2 javascript, done right.
javascript não obstrutivo
demo

SAPO Sessions #2 javascript, done right.
javascript não obstrutivo
Mais aplicações:
Ecrãs de registo, transformar link
“Termos e condições” num overlay.
Reconhecer microformatos e inserir links
para as transformações.

SAPO Sessions #2 javascript, done right.
javascript não obstrutivo
AJAX

SAPO Sessions #2 javascript, done right.
javascript não obstrutivo
AJAX
!
W
PO
KA

SAPO Sessions #2 javascript, done right.
javascript não obstrutivo
HIJAX
by Jeremy Keith
Construir um site que utilize links e formulários
1
tradicionais. Sem recurso a javascript.
Entrar no DOM, definir eventListeners para os eventos certos e
2
substituir os carregamentos de páginas completas por pequenos
pedidos AJAX.

SAPO Sessions #2 javascript, done right.
javascript não obstrutivo
HIJAX
by Jeremy Keith
Planear para o AJAX desde as wireframes.
1
Implementá‐lo no final.
2

SAPO Sessions #2 javascript, done right.
javascript não obstrutivo
HIJAX
by Jeremy Keith
Mais info, no blog DomScripting.org
http://whit.me/hijax

SAPO Sessions #2 javascript, done right.
javascript não obstrutivo
http://unobtrusify.com

SAPO Sessions #2 javascript, done right.
?

SAPO Sessions #2 javascript, done right.
Scripts não‐bloqueantes

SAPO Sessions #2 javascript, done right.
scripts não bloqueantes
<head>
<script>
<script>
<body>

SAPO Sessions #2 javascript, done right.
scripts não bloqueantes
<head>
<body>
<script>
<script>

SAPO Sessions #2 javascript, done right.
scripts não bloqueantes
<script type=”text/javascript”>
(function () {
<head>
var scr = document.createElement(‘script’);
scr.type = ‘text/javascript’;
<body>
scr.src = ‘ficheiro_de_js_nao_obstrutivo.js”;
var cabeca = document.getElementsByTagName(‘head’)[0];
cabeca.appendChild(scr);
)( );
</script>
<script>
<script>
Função Anónima, auto-executável e limpa. (nada no scope global)

SAPO Sessions #2 javascript, done right.
scripts não bloqueantes
<script type=”text/javascript”>
(function () {
<head>
var scr = document.createElement(‘script’);
scr.type = ‘text/javascript’;
Esquecer: document.write
<body>
scr.src = ‘ficheiro_de_js_nao_obstrutivo.js”;
var cabeca = document.getElementsByTagName(‘head’)[0];
cabeca.appendChild(scr);
)( );
</script>
<script>
<script>

SAPO Sessions #2 javascript, done right.
Histórico em Webapps

SAPO Sessions #2 javascript, done right.
Histórico em Webapps
Quebra o histórico (retroceder, avançar)
Não oferece, de origem, mecanismos para guardar o histórico
Alterar o location.href.hash
1
Verificar se o location.href.hash mudou e
2
lidar com essa mudança

SAPO Sessions #2 javascript, done right.
Histórico em Webapps
Quebra o histórico (retroceder, avançar)
Não oferece, de origem, mecanismos para guardar o histórico
Alterar o location.href.hash
1
Verificar se o location.href.hash mudou e
2
lidar com essa mudança
Inconsistências de browsers *cof*IE*cof*
3
http://developer.yahoo.com/yui/history/

SAPO Sessions #2 javascript, done right.
?

SAPO Sessions #2 javascript, done right.
That’s all folks!
André Luís
aluis@co.sapo.pt
me@andr3.net
http://domscripting.org
creative commons
http://www.alistapart.com/topics/code/scripting/
attribution
http://talks.andr3.net/2009/js,doneright.pdf
non-commercial
http://slideshare.net/andr3 share-alike 3.0