SlideShare uma empresa Scribd logo
1 de 89
Baixar para ler offline
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.




  Programa de Festas
          . 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?




-------25%------
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?




-------50%------
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




Demo #1 @ http://workshop.andr3.net/saposessions/
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/

-------75%------
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




Demo #2 @ http://workshop.andr3.net/saposessions/
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
Jeremy Keith: Behavioral Separation
SAPO Sessions #2                                  javascript, done right.


                                               javascript não obstrutivo

      Behavioral Separation, by Jeremy Keith
      http://whit.me/behavsep



                1. Começar com o conteúdo
                2. Dar­lhe estrutura com html semântico
                3. Aplicar css
                4. Aplicar comportamento com JS



A LIST APART.
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/
IE = usar uma iframe, ir alterando a SRC.
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

Mais conteúdo relacionado

Destaque

tmn - Introdução ao JavaScript
tmn - Introdução ao JavaScripttmn - Introdução ao JavaScript
tmn - Introdução ao JavaScriptClaudio Gamboa
 
NoSQL na BIREME: 20 anos de experiência
NoSQL na BIREME: 20 anos de experiênciaNoSQL na BIREME: 20 anos de experiência
NoSQL na BIREME: 20 anos de experiênciaLuciano Ramalho
 
JavaScript de qualidade: hoje, amanhã e sempre!
JavaScript de qualidade: hoje, amanhã e sempre!JavaScript de qualidade: hoje, amanhã e sempre!
JavaScript de qualidade: hoje, amanhã e sempre!Thiago de Oliveira Pires
 
JavaScript agora é sério (TDC 2011)
JavaScript agora é sério (TDC 2011)JavaScript agora é sério (TDC 2011)
JavaScript agora é sério (TDC 2011)Luciano Ramalho
 
Java script em 2016 - Como sobreviver a essa sopa de letrinhas com vue.js
Java script em 2016 - Como sobreviver a essa sopa de letrinhas com vue.jsJava script em 2016 - Como sobreviver a essa sopa de letrinhas com vue.js
Java script em 2016 - Como sobreviver a essa sopa de letrinhas com vue.jsVinicius Reis
 
Mercado de automação no ES
Mercado de automação no ESMercado de automação no ES
Mercado de automação no ESFelipe Martins
 
Modelagem e Controle de Robôs Móveis e Sistemas Multirrobôs
Modelagem e Controle de Robôs Móveis e Sistemas MultirrobôsModelagem e Controle de Robôs Móveis e Sistemas Multirrobôs
Modelagem e Controle de Robôs Móveis e Sistemas MultirrobôsFelipe Martins
 
Práticas de Desenvolvimento de Software
Práticas de Desenvolvimento de SoftwarePráticas de Desenvolvimento de Software
Práticas de Desenvolvimento de SoftwareTiago Barros
 
Interfaces fisicas para dispositivos moveis
Interfaces fisicas para dispositivos moveisInterfaces fisicas para dispositivos moveis
Interfaces fisicas para dispositivos moveisTiago Barros
 
Técnicas de Prototipação II - Physical Computing - Aula 02
Técnicas de Prototipação II - Physical Computing - Aula 02Técnicas de Prototipação II - Physical Computing - Aula 02
Técnicas de Prototipação II - Physical Computing - Aula 02Tiago Barros
 
Competições Estudantis de Rrobótica
Competições Estudantis de RrobóticaCompetições Estudantis de Rrobótica
Competições Estudantis de RrobóticaFelipe Martins
 
JavaScript for Beginners
JavaScript for BeginnersJavaScript for Beginners
JavaScript for BeginnersSAPO Sessions
 
Aprender Javascript e jQuery (UFCD
Aprender Javascript e jQuery (UFCDAprender Javascript e jQuery (UFCD
Aprender Javascript e jQuery (UFCDAfonso Gomes
 
O que falta na internet para as coisas?
O que falta na internet para as coisas?O que falta na internet para as coisas?
O que falta na internet para as coisas?Tiago Barros
 
Engenharia de Requisitos
Engenharia de RequisitosEngenharia de Requisitos
Engenharia de RequisitosTiago Barros
 

Destaque (20)

Javascript tutorial
Javascript tutorialJavascript tutorial
Javascript tutorial
 
tmn - Introdução ao JavaScript
tmn - Introdução ao JavaScripttmn - Introdução ao JavaScript
tmn - Introdução ao JavaScript
 
NoSQL na BIREME: 20 anos de experiência
NoSQL na BIREME: 20 anos de experiênciaNoSQL na BIREME: 20 anos de experiência
NoSQL na BIREME: 20 anos de experiência
 
JavaScript de qualidade: hoje, amanhã e sempre!
JavaScript de qualidade: hoje, amanhã e sempre!JavaScript de qualidade: hoje, amanhã e sempre!
JavaScript de qualidade: hoje, amanhã e sempre!
 
JavaScript agora é sério (TDC 2011)
JavaScript agora é sério (TDC 2011)JavaScript agora é sério (TDC 2011)
JavaScript agora é sério (TDC 2011)
 
Java script em 2016 - Como sobreviver a essa sopa de letrinhas com vue.js
Java script em 2016 - Como sobreviver a essa sopa de letrinhas com vue.jsJava script em 2016 - Como sobreviver a essa sopa de letrinhas com vue.js
Java script em 2016 - Como sobreviver a essa sopa de letrinhas com vue.js
 
Java script
Java scriptJava script
Java script
 
Mercado de automação no ES
Mercado de automação no ESMercado de automação no ES
Mercado de automação no ES
 
Modelagem e Controle de Robôs Móveis e Sistemas Multirrobôs
Modelagem e Controle de Robôs Móveis e Sistemas MultirrobôsModelagem e Controle de Robôs Móveis e Sistemas Multirrobôs
Modelagem e Controle de Robôs Móveis e Sistemas Multirrobôs
 
Aprender e ensinar com tecnologias móveis: um desafio para professores e alunos
Aprender e ensinar com tecnologias móveis: um desafio para professores e alunosAprender e ensinar com tecnologias móveis: um desafio para professores e alunos
Aprender e ensinar com tecnologias móveis: um desafio para professores e alunos
 
Práticas de Desenvolvimento de Software
Práticas de Desenvolvimento de SoftwarePráticas de Desenvolvimento de Software
Práticas de Desenvolvimento de Software
 
It's Javascript Time
It's Javascript TimeIt's Javascript Time
It's Javascript Time
 
Interfaces fisicas para dispositivos moveis
Interfaces fisicas para dispositivos moveisInterfaces fisicas para dispositivos moveis
Interfaces fisicas para dispositivos moveis
 
Técnicas de Prototipação II - Physical Computing - Aula 02
Técnicas de Prototipação II - Physical Computing - Aula 02Técnicas de Prototipação II - Physical Computing - Aula 02
Técnicas de Prototipação II - Physical Computing - Aula 02
 
Competições Estudantis de Rrobótica
Competições Estudantis de RrobóticaCompetições Estudantis de Rrobótica
Competições Estudantis de Rrobótica
 
JavaScript for Beginners
JavaScript for BeginnersJavaScript for Beginners
JavaScript for Beginners
 
Aprender Javascript e jQuery (UFCD
Aprender Javascript e jQuery (UFCDAprender Javascript e jQuery (UFCD
Aprender Javascript e jQuery (UFCD
 
O que falta na internet para as coisas?
O que falta na internet para as coisas?O que falta na internet para as coisas?
O que falta na internet para as coisas?
 
Java script aula 05 - funções
Java script   aula 05 - funçõesJava script   aula 05 - funções
Java script aula 05 - funções
 
Engenharia de Requisitos
Engenharia de RequisitosEngenharia de Requisitos
Engenharia de Requisitos
 

Mais de André Luís

Achieving consistency in large CSS projects — FullStackLX #2
Achieving consistency in large CSS projects — FullStackLX #2Achieving consistency in large CSS projects — FullStackLX #2
Achieving consistency in large CSS projects — FullStackLX #2André Luís
 
Designers & Developers
Designers & DevelopersDesigners & Developers
Designers & DevelopersAndré Luís
 
Responsive Web Design: Uma História das Trincheiras (sapo.pt)
Responsive Web Design: Uma História das Trincheiras (sapo.pt)Responsive Web Design: Uma História das Trincheiras (sapo.pt)
Responsive Web Design: Uma História das Trincheiras (sapo.pt)André Luís
 
Lições Práticas de Semântica com HTML5 — 2º evento HTML5PT
Lições Práticas de Semântica com HTML5 — 2º evento HTML5PTLições Práticas de Semântica com HTML5 — 2º evento HTML5PT
Lições Práticas de Semântica com HTML5 — 2º evento HTML5PTAndré Luís
 
Dr. © ou como eu deixei de me preocupar e passei a adorar licenças permissivas
Dr. © ou como eu deixei de me preocupar e passei a adorar licenças permissivasDr. © ou como eu deixei de me preocupar e passei a adorar licenças permissivas
Dr. © ou como eu deixei de me preocupar e passei a adorar licenças permissivasAndré Luís
 
We're not designing posters, here!
We're not designing posters, here!We're not designing posters, here!
We're not designing posters, here!André Luís
 
Dr. © - How I learned to stop worrying and love fair-use licenses
Dr. © - How I learned to stop worrying and love fair-use licensesDr. © - How I learned to stop worrying and love fair-use licenses
Dr. © - How I learned to stop worrying and love fair-use licensesAndré Luís
 
HTML5 - A nova era da Web
HTML5 - A nova era da WebHTML5 - A nova era da Web
HTML5 - A nova era da WebAndré Luís
 
Microformatos - 2009 - Juntando as Peças do Puzzle
Microformatos - 2009 - Juntando as Peças do PuzzleMicroformatos - 2009 - Juntando as Peças do Puzzle
Microformatos - 2009 - Juntando as Peças do PuzzleAndré Luís
 
Microformatos - juntando as peças do puzzle
Microformatos - juntando as peças do puzzleMicroformatos - juntando as peças do puzzle
Microformatos - juntando as peças do puzzleAndré Luís
 
Microformatos - pequenas peças do puzzle
Microformatos - pequenas peças do puzzleMicroformatos - pequenas peças do puzzle
Microformatos - pequenas peças do puzzleAndré Luís
 

Mais de André Luís (11)

Achieving consistency in large CSS projects — FullStackLX #2
Achieving consistency in large CSS projects — FullStackLX #2Achieving consistency in large CSS projects — FullStackLX #2
Achieving consistency in large CSS projects — FullStackLX #2
 
Designers & Developers
Designers & DevelopersDesigners & Developers
Designers & Developers
 
Responsive Web Design: Uma História das Trincheiras (sapo.pt)
Responsive Web Design: Uma História das Trincheiras (sapo.pt)Responsive Web Design: Uma História das Trincheiras (sapo.pt)
Responsive Web Design: Uma História das Trincheiras (sapo.pt)
 
Lições Práticas de Semântica com HTML5 — 2º evento HTML5PT
Lições Práticas de Semântica com HTML5 — 2º evento HTML5PTLições Práticas de Semântica com HTML5 — 2º evento HTML5PT
Lições Práticas de Semântica com HTML5 — 2º evento HTML5PT
 
Dr. © ou como eu deixei de me preocupar e passei a adorar licenças permissivas
Dr. © ou como eu deixei de me preocupar e passei a adorar licenças permissivasDr. © ou como eu deixei de me preocupar e passei a adorar licenças permissivas
Dr. © ou como eu deixei de me preocupar e passei a adorar licenças permissivas
 
We're not designing posters, here!
We're not designing posters, here!We're not designing posters, here!
We're not designing posters, here!
 
Dr. © - How I learned to stop worrying and love fair-use licenses
Dr. © - How I learned to stop worrying and love fair-use licensesDr. © - How I learned to stop worrying and love fair-use licenses
Dr. © - How I learned to stop worrying and love fair-use licenses
 
HTML5 - A nova era da Web
HTML5 - A nova era da WebHTML5 - A nova era da Web
HTML5 - A nova era da Web
 
Microformatos - 2009 - Juntando as Peças do Puzzle
Microformatos - 2009 - Juntando as Peças do PuzzleMicroformatos - 2009 - Juntando as Peças do Puzzle
Microformatos - 2009 - Juntando as Peças do Puzzle
 
Microformatos - juntando as peças do puzzle
Microformatos - juntando as peças do puzzleMicroformatos - juntando as peças do puzzle
Microformatos - juntando as peças do puzzle
 
Microformatos - pequenas peças do puzzle
Microformatos - pequenas peças do puzzleMicroformatos - pequenas peças do puzzle
Microformatos - pequenas peças do puzzle
 

SAPO Sessions #2 javascript, done right

  • 1. 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
  • 2. SAPO Sessions #2 javascript, done right. Antes de começar... um disclaimer. :)
  • 3. SAPO Sessions #2 javascript, done right. Não venho pregar.
  • 4. SAPO Sessions #2 javascript, done right. Nem vender nada.
  • 5. SAPO Sessions #2 javascript, done right. Venho‐vos falar da minha  experiência.
  • 6. SAPO Sessions #2 javascript, done right. Desde brincadeiras em javascript  no site dum canal de IRC. 2000
  • 7. SAPO Sessions #2 javascript, done right. Até aplicações web inseridas  no Webmail do SAPO. 2009
  • 8. SAPO Sessions #2 javascript, done right. Programa de Festas . Uso dado ao Javascript . Problemas . Como resolvê‐los . Javascript Não Obstrutivo . Hijax . Scripts não bloqueantes . Histórico com Javascript 2009
  • 9. SAPO Sessions #2 javascript, done right. javascript Tem sido muito maltratado ao longo do tempo
  • 10. 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.
  • 11. SAPO Sessions #2 javascript, done right. 2005 http://whit.me/ajax Até que...
  • 12. 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
  • 13. SAPO Sessions #2 javascript, done right. javascript é usado para
  • 14. SAPO Sessions #2 javascript, done right. javascript é usado para popups
  • 15. SAPO Sessions #2 javascript, done right. javascript é usado para efeitos de estilo
  • 16. SAPO Sessions #2 javascript, done right. javascript é usado para decorações natalícias
  • 17. SAPO Sessions #2 javascript, done right. javascript é usado para pré‐carregar imagens
  • 18. SAPO Sessions #2 javascript, done right. javascript é usado para mudar de página
  • 19. SAPO Sessions #2 javascript, done right. javascript é usado para evitar recarregamento de páginas inteiras
  • 20. SAPO Sessions #2 javascript, done right. javascript é usado para evitar recarregamento AJA X de páginas inteiras
  • 21. 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
  • 22. SAPO Sessions #2 javascript, done right. Será que isto é um problema? -------25%------
  • 23. 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.
  • 24. 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.
  • 25. 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.
  • 26. 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
  • 27. 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=”#”
  • 28. 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
  • 29. SAPO Sessions #2 javascript, done right. Degradação Graciosa vs. Melhoramento Progressivo Graceful Degradation Progressive Enhancement
  • 30. 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. 
  • 31. 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. 
  • 32. 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.
  • 33. 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.
  • 34. 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.
  • 35. SAPO Sessions #2 javascript, done right. ?
  • 36. SAPO Sessions #2 javascript, done right. javascript não obstrutivo
  • 37. 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.
  • 38. 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.
  • 39. SAPO Sessions #2 javascript, done right. javascript não obstrutivo Mas como?
  • 40. 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
  • 41. 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
  • 42. 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!!
  • 43. 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
  • 44. SAPO Sessions #2 javascript, done right. javascript não obstrutivo Quão importante é um mero link? -------50%------
  • 45. 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.
  • 46. 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)
  • 47. SAPO Sessions #2 javascript, done right. Douglas Engelbart 1963: NLS (oNLine System), que utilizava ligações (links) do conceito do hipertexto.
  • 48. SAPO Sessions #2 javascript, done right. Tim Berners‐Lee tanaka 1991: WWW, num lab do CERN.
  • 49. 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...
  • 50. 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!
  • 51. 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!
  • 52. 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.
  • 53. 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. ;)
  • 54. SAPO Sessions #2 javascript, done right. javascript não obstrutivo Remover obstruções <a href=”wonderbra.png” class=”preview” >... melhor
  • 55. 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’; }
  • 56. 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!
  • 57. SAPO Sessions #2 javascript, done right. javascript não obstrutivo Remover obstruções Frameworks ajudam a lidar com as  incoerências dos browsers
  • 58. 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; } ); } );
  • 59. 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;'); }); });
  • 60. 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); }); });
  • 61. SAPO Sessions #2 javascript, done right. javascript não obstrutivo Remover obstruções demo Demo #1 @ http://workshop.andr3.net/saposessions/
  • 62. SAPO Sessions #2 javascript, done right. javascript não obstrutivo Exemplo Lightbox http://www.lokeshdhakar.com/projects/lightbox2/ Fonte das imagens: http://brunoluis.com
  • 63. 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.
  • 64. 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
  • 65. SAPO Sessions #2 javascript, done right. javascript não obstrutivo E formulários?
  • 66. SAPO Sessions #2 javascript, done right. javascript não obstrutivo http://web.mail.sapo.pt/ -------75%------
  • 67. SAPO Sessions #2 javascript, done right. javascript não obstrutivo
  • 68. SAPO Sessions #2 javascript, done right. javascript não obstrutivo onSubmit DOM LOADED!
  • 69. SAPO Sessions #2 javascript, done right. javascript não obstrutivo onSubmit DOM LOADED!
  • 70. SAPO Sessions #2 javascript, done right. javascript não obstrutivo demo Demo #2 @ http://workshop.andr3.net/saposessions/
  • 71. 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.
  • 72. SAPO Sessions #2 javascript, done right. javascript não obstrutivo AJAX
  • 73. SAPO Sessions #2 javascript, done right. javascript não obstrutivo AJAX ! W PO KA
  • 74. 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.
  • 75. 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
  • 76. SAPO Sessions #2 javascript, done right. javascript não obstrutivo HIJAX by Jeremy Keith Mais info, no blog DomScripting.org http://whit.me/hijax
  • 77. SAPO Sessions #2 javascript, done right. javascript não obstrutivo http://unobtrusify.com Jeremy Keith: Behavioral Separation
  • 78. SAPO Sessions #2 javascript, done right. javascript não obstrutivo Behavioral Separation, by Jeremy Keith http://whit.me/behavsep 1. Começar com o conteúdo 2. Dar­lhe estrutura com html semântico 3. Aplicar css 4. Aplicar comportamento com JS A LIST APART.
  • 79. SAPO Sessions #2 javascript, done right. ?
  • 80. SAPO Sessions #2 javascript, done right. Scripts não‐bloqueantes
  • 81. SAPO Sessions #2 javascript, done right. scripts não bloqueantes <head> <script> <script> <body>
  • 82. SAPO Sessions #2 javascript, done right. scripts não bloqueantes <head> <body> <script> <script>
  • 83. 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)
  • 84. 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>
  • 85. SAPO Sessions #2 javascript, done right. Histórico em Webapps
  • 86. 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
  • 87. 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/ IE = usar uma iframe, ir alterando a SRC.
  • 88. SAPO Sessions #2 javascript, done right. ?
  • 89. 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