Unobtrusive JavaScript             Iuri Raiol iuriraiol@gmail.com
Unobtrusive JavaScript Significado   de JavaScript não obstrutivo: Obstrutivo:que não causa obstrução. Não-invasivo: qu...
Como funciona?O   que era feito:
Como funciona? Ex:   Estilos e Scripts inline.<p>        <font color="red" size="60" face="arial"        onmouseover="thi...
Como funciona?O   que deve ser feito:
Como funciona?   Ex: Estilos e Scripts divididos e fora do html e fora do htmlestilo.css#paragrafo{font:60px helvetica,Ar...
Um exemplo   Para fazer um código simples com uma ação simples:<p onmouseover="this.style.fontWeight=bold">Meu texto</p>
Vamos melhorar   Colocamos separado a ação do javaScript, somente    chamando-o onde é necessário:<script type="text/java...
Podemos melhorar mais   Aqui vemos um código sem interferência de javaScript no    HTML:efeitos.jsfunction textoBold(){  ...
Quais os Prós   Separação das folhas de estilo(CSS), linguagem de    marcação(HTML) e linguagem de script(JavaScript);  ...
Quais os Contras   Código ligeiramente mais complexo, entretanto quem    programa bem saberá lidar de forma satisfatória,...
Fim, Obrigado!
Próximos SlideShares
Carregando em…5
×

Unobtrusive JavaScript

685 visualizações

Publicada em

Publicada em: Diversão e humor
0 comentários
0 gostaram
Estatísticas
Notas
  • Seja o primeiro a comentar

  • Seja a primeira pessoa a gostar disto

Sem downloads
Visualizações
Visualizações totais
685
No SlideShare
0
A partir de incorporações
0
Número de incorporações
1
Ações
Compartilhamentos
0
Downloads
1
Comentários
0
Gostaram
0
Incorporações 0
Nenhuma incorporação

Nenhuma nota no slide

Unobtrusive JavaScript

  1. 1. Unobtrusive JavaScript Iuri Raiol iuriraiol@gmail.com
  2. 2. Unobtrusive JavaScript Significado de JavaScript não obstrutivo: Obstrutivo:que não causa obstrução. Não-invasivo: que age de forma sutil.
  3. 3. Como funciona?O que era feito:
  4. 4. Como funciona? Ex: Estilos e Scripts inline.<p> <font color="red" size="60" face="arial" onmouseover="this.style.color=olive;" onmouseout="this.style.color=red;"> Olá Mundo! </font></p>
  5. 5. Como funciona?O que deve ser feito:
  6. 6. Como funciona? Ex: Estilos e Scripts divididos e fora do html e fora do htmlestilo.css#paragrafo{font:60px helvetica,Arial,sans-serif;color:red;}efeito.jsdocument.getElementById("paragrafo").onmouseover =function(){this.style.color = olive};document.getElementById("paragrafo").onmouseout =function(){this.style.color = red};Index.html<p id="paragrafo">Olá Mundo!</p>
  7. 7. Um exemplo Para fazer um código simples com uma ação simples:<p onmouseover="this.style.fontWeight=bold">Meu texto</p>
  8. 8. Vamos melhorar Colocamos separado a ação do javaScript, somente chamando-o onde é necessário:<script type="text/javascript">function textoBold(campo){ campo.onmouseover = function(){this.style.fontWeight =bold}}</script><p onmouseover="textoBold(this)">Meu texto</p>
  9. 9. Podemos melhorar mais Aqui vemos um código sem interferência de javaScript no HTML:efeitos.jsfunction textoBold(){ var campo = document.getElementById("boldOnOver"); campo.onmouseover = function(){this.style.fontWeight = bold;};}window.onload = function() { textoBold();}Index.html<p id=“boldOnOver">Meu texto</p>
  10. 10. Quais os Prós Separação das folhas de estilo(CSS), linguagem de marcação(HTML) e linguagem de script(JavaScript); Facilita o Reuso do script em outras páginas. Fácil manutenibilidade; HTML mantém somente o que é relevante para a apresentação do conteúdo; Facilita a leitura do conteudo (HTML) pelos bots de sites de busca.
  11. 11. Quais os Contras Código ligeiramente mais complexo, entretanto quem programa bem saberá lidar de forma satisfatória, pois o JavaScript é o mesmo. Nenhum outro contra.
  12. 12. Fim, Obrigado!

×