SlideShare uma empresa Scribd logo
1 de 12
Baixar para ler offline
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: que age de forma sutil.
Como funciona?

O   que era feito:
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>
Como funciona?

O   que deve ser feito:
Como funciona?
   Ex: Estilos e Scripts divididos e fora do html e fora do html

estilo.css
#paragrafo{
font:60px helvetica,Arial,sans-serif;
color:red;
}

efeito.js
document.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>
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/javascript">
function textoBold(campo){
       campo.onmouseover = function(){this.style.fontWeight =
'bold'}}
</script>

<p onmouseover="textoBold(this)">Meu texto</p>
Podemos melhorar mais
   Aqui vemos um código sem interferência de javaScript no
    HTML:

efeitos.js
function 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>
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.
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.
Fim, Obrigado!

Mais conteúdo relacionado

Mais procurados

Minicurso de JavaScript (Portuguese)
Minicurso de JavaScript (Portuguese)Minicurso de JavaScript (Portuguese)
Minicurso de JavaScript (Portuguese)Bruno Grange
 
DOMinando JavaScript
DOMinando JavaScriptDOMinando JavaScript
DOMinando JavaScriptThiago Poiani
 
Introdução básica ao JavaScript
Introdução básica ao JavaScriptIntrodução básica ao JavaScript
Introdução básica ao JavaScriptCarlos Eduardo Kadu
 
Introdução AngularJs
Introdução AngularJsIntrodução AngularJs
Introdução AngularJsGDGFoz
 
Trabalho jQuery
Trabalho jQueryTrabalho jQuery
Trabalho jQuerygrupoucpel
 
Cursor bonecada
Cursor bonecadaCursor bonecada
Cursor bonecadaEducPaz
 
Javascript levado a serio
Javascript levado a serioJavascript levado a serio
Javascript levado a serioJaydson Gomes
 
08 Java Script Introdução - Teoria
08 Java Script   Introdução  - Teoria08 Java Script   Introdução  - Teoria
08 Java Script Introdução - TeoriaCentro Paula Souza
 
Aula Introdução a VRaptor 4 - Pós Java UTFPR
Aula Introdução a VRaptor 4 - Pós Java UTFPRAula Introdução a VRaptor 4 - Pós Java UTFPR
Aula Introdução a VRaptor 4 - Pós Java UTFPRAndré Luiz Forchesatto
 
4 - Introdução ao Desenvolvimento Web - Formulários (pt 1)
4 - Introdução ao Desenvolvimento Web - Formulários (pt 1)4 - Introdução ao Desenvolvimento Web - Formulários (pt 1)
4 - Introdução ao Desenvolvimento Web - Formulários (pt 1)Mauro Duarte
 
Design builder em testes
Design builder em testesDesign builder em testes
Design builder em testesTestRock!
 
Boas práticas de django
Boas práticas de djangoBoas práticas de django
Boas práticas de djangoFilipe Ximenes
 

Mais procurados (18)

Minicurso de JavaScript (Portuguese)
Minicurso de JavaScript (Portuguese)Minicurso de JavaScript (Portuguese)
Minicurso de JavaScript (Portuguese)
 
DOMinando JavaScript
DOMinando JavaScriptDOMinando JavaScript
DOMinando JavaScript
 
Introdução básica ao JavaScript
Introdução básica ao JavaScriptIntrodução básica ao JavaScript
Introdução básica ao JavaScript
 
Introdução AngularJs
Introdução AngularJsIntrodução AngularJs
Introdução AngularJs
 
Trabalho jQuery
Trabalho jQueryTrabalho jQuery
Trabalho jQuery
 
Apresentação angular js
Apresentação angular jsApresentação angular js
Apresentação angular js
 
Javascript aula 01 - visão geral
Javascript   aula 01 - visão geralJavascript   aula 01 - visão geral
Javascript aula 01 - visão geral
 
Angular js
Angular jsAngular js
Angular js
 
LAB JavaScript
LAB JavaScriptLAB JavaScript
LAB JavaScript
 
Cursor bonecada
Cursor bonecadaCursor bonecada
Cursor bonecada
 
Javascript levado a serio
Javascript levado a serioJavascript levado a serio
Javascript levado a serio
 
Javascript
JavascriptJavascript
Javascript
 
08 Java Script Introdução - Teoria
08 Java Script   Introdução  - Teoria08 Java Script   Introdução  - Teoria
08 Java Script Introdução - Teoria
 
Aula Introdução a VRaptor 4 - Pós Java UTFPR
Aula Introdução a VRaptor 4 - Pós Java UTFPRAula Introdução a VRaptor 4 - Pós Java UTFPR
Aula Introdução a VRaptor 4 - Pós Java UTFPR
 
Javascript para adultos
Javascript para adultosJavascript para adultos
Javascript para adultos
 
4 - Introdução ao Desenvolvimento Web - Formulários (pt 1)
4 - Introdução ao Desenvolvimento Web - Formulários (pt 1)4 - Introdução ao Desenvolvimento Web - Formulários (pt 1)
4 - Introdução ao Desenvolvimento Web - Formulários (pt 1)
 
Design builder em testes
Design builder em testesDesign builder em testes
Design builder em testes
 
Boas práticas de django
Boas práticas de djangoBoas práticas de django
Boas práticas de django
 

Semelhante a Unobtrusive JavaScript

ODIG - Javascript, DOM Elements e jQuery
ODIG - Javascript, DOM Elements e jQueryODIG - Javascript, DOM Elements e jQuery
ODIG - Javascript, DOM Elements e jQueryMarketing Digital ODIG
 
Fundamentos e Desenvolvimento de Interface Web com HTML5 & CSS3
Fundamentos e Desenvolvimento de Interface Web com HTML5 & CSS3 Fundamentos e Desenvolvimento de Interface Web com HTML5 & CSS3
Fundamentos e Desenvolvimento de Interface Web com HTML5 & CSS3 Cristofer Sousa
 
Desenvolvendo com Dojo Toolkit
Desenvolvendo com Dojo ToolkitDesenvolvendo com Dojo Toolkit
Desenvolvendo com Dojo ToolkitFlávio Lisboa
 
Edição de conteúdo web usando Javascript de ponta a ponta
Edição de conteúdo web usando Javascript de ponta a pontaEdição de conteúdo web usando Javascript de ponta a ponta
Edição de conteúdo web usando Javascript de ponta a pontaJorge Walendowsky
 
Desenvolvimento para a web usando html e css
Desenvolvimento para a web usando html e cssDesenvolvimento para a web usando html e css
Desenvolvimento para a web usando html e cssEduardo Bonfandini
 
Workshop Node.js + MongoDB + Mongoose
Workshop Node.js + MongoDB + MongooseWorkshop Node.js + MongoDB + Mongoose
Workshop Node.js + MongoDB + MongooseLuiz Duarte
 
Introdução ao Desenvolvimento front-end (2019)
Introdução ao Desenvolvimento front-end (2019)Introdução ao Desenvolvimento front-end (2019)
Introdução ao Desenvolvimento front-end (2019)Gustavo Teodoro
 
Palestra: Otimização de websites
Palestra: Otimização de websitesPalestra: Otimização de websites
Palestra: Otimização de websitesIntrus
 
JavaScript e JQuery para Webdesigners
JavaScript e JQuery para WebdesignersJavaScript e JQuery para Webdesigners
JavaScript e JQuery para WebdesignersHarlley Oliveira
 
Iniciando com Jquery
Iniciando com JqueryIniciando com Jquery
Iniciando com JqueryDanilo Sousa
 
Introdução ao Desenvolvimento WEB com Ruby on Rails
Introdução ao Desenvolvimento WEB com Ruby on RailsIntrodução ao Desenvolvimento WEB com Ruby on Rails
Introdução ao Desenvolvimento WEB com Ruby on RailsJulio Betta
 
Workshop Ruby on Rails dia 2 ruby-pt
Workshop Ruby on Rails dia 2  ruby-ptWorkshop Ruby on Rails dia 2  ruby-pt
Workshop Ruby on Rails dia 2 ruby-ptPedro Sousa
 
Desenvolvimento Front end (AngularJS e Bootstrap)
Desenvolvimento Front end (AngularJS e Bootstrap)Desenvolvimento Front end (AngularJS e Bootstrap)
Desenvolvimento Front end (AngularJS e Bootstrap)Julian Cesar
 
Navegadores por de baixo dos panos - Ana Luiza Bastos
Navegadores por de baixo dos panos - Ana Luiza BastosNavegadores por de baixo dos panos - Ana Luiza Bastos
Navegadores por de baixo dos panos - Ana Luiza BastosiMasters
 
Introdução de web
Introdução de webIntrodução de web
Introdução de webSedu
 

Semelhante a Unobtrusive JavaScript (20)

ODIG - Javascript, DOM Elements e jQuery
ODIG - Javascript, DOM Elements e jQueryODIG - Javascript, DOM Elements e jQuery
ODIG - Javascript, DOM Elements e jQuery
 
Java script1
Java script1Java script1
Java script1
 
Fundamentos e Desenvolvimento de Interface Web com HTML5 & CSS3
Fundamentos e Desenvolvimento de Interface Web com HTML5 & CSS3 Fundamentos e Desenvolvimento de Interface Web com HTML5 & CSS3
Fundamentos e Desenvolvimento de Interface Web com HTML5 & CSS3
 
04_Introducao_JavaScript.pdf
04_Introducao_JavaScript.pdf04_Introducao_JavaScript.pdf
04_Introducao_JavaScript.pdf
 
Desenvolvendo com Dojo Toolkit
Desenvolvendo com Dojo ToolkitDesenvolvendo com Dojo Toolkit
Desenvolvendo com Dojo Toolkit
 
Edição de conteúdo web usando Javascript de ponta a ponta
Edição de conteúdo web usando Javascript de ponta a pontaEdição de conteúdo web usando Javascript de ponta a ponta
Edição de conteúdo web usando Javascript de ponta a ponta
 
Desenvolvimento para a web usando html e css
Desenvolvimento para a web usando html e cssDesenvolvimento para a web usando html e css
Desenvolvimento para a web usando html e css
 
Workshop Node.js + MongoDB + Mongoose
Workshop Node.js + MongoDB + MongooseWorkshop Node.js + MongoDB + Mongoose
Workshop Node.js + MongoDB + Mongoose
 
Introdução ao Desenvolvimento front-end (2019)
Introdução ao Desenvolvimento front-end (2019)Introdução ao Desenvolvimento front-end (2019)
Introdução ao Desenvolvimento front-end (2019)
 
Criação de sites
Criação de sitesCriação de sites
Criação de sites
 
Palestra: Otimização de websites
Palestra: Otimização de websitesPalestra: Otimização de websites
Palestra: Otimização de websites
 
JavaScript e JQuery para Webdesigners
JavaScript e JQuery para WebdesignersJavaScript e JQuery para Webdesigners
JavaScript e JQuery para Webdesigners
 
Iniciando com Jquery
Iniciando com JqueryIniciando com Jquery
Iniciando com Jquery
 
Introdução ao Desenvolvimento WEB com Ruby on Rails
Introdução ao Desenvolvimento WEB com Ruby on RailsIntrodução ao Desenvolvimento WEB com Ruby on Rails
Introdução ao Desenvolvimento WEB com Ruby on Rails
 
Workshop Ruby on Rails dia 2 ruby-pt
Workshop Ruby on Rails dia 2  ruby-ptWorkshop Ruby on Rails dia 2  ruby-pt
Workshop Ruby on Rails dia 2 ruby-pt
 
Desenvolvimento Front end (AngularJS e Bootstrap)
Desenvolvimento Front end (AngularJS e Bootstrap)Desenvolvimento Front end (AngularJS e Bootstrap)
Desenvolvimento Front end (AngularJS e Bootstrap)
 
Navegadores por de baixo dos panos - Ana Luiza Bastos
Navegadores por de baixo dos panos - Ana Luiza BastosNavegadores por de baixo dos panos - Ana Luiza Bastos
Navegadores por de baixo dos panos - Ana Luiza Bastos
 
Owasp web app_flaws
Owasp web app_flawsOwasp web app_flaws
Owasp web app_flaws
 
Introdução de web
Introdução de webIntrodução de web
Introdução de web
 
Html5
Html5Html5
Html5
 

Mais de COTIC-PROEG (UFPA) (20)

LT - Redis
LT - RedisLT - Redis
LT - Redis
 
LT Ansible
LT AnsibleLT Ansible
LT Ansible
 
Testes automatizados com Cypress
Testes automatizados com CypressTestes automatizados com Cypress
Testes automatizados com Cypress
 
Loop back
Loop backLoop back
Loop back
 
METEOR
METEORMETEOR
METEOR
 
Desenvolvimento de software tradicional vs ágil
Desenvolvimento de software tradicional vs ágilDesenvolvimento de software tradicional vs ágil
Desenvolvimento de software tradicional vs ágil
 
Canva
CanvaCanva
Canva
 
Git v2
Git v2Git v2
Git v2
 
Atitudes que levam ao Fracasso profissional
Atitudes que levam ao Fracasso profissionalAtitudes que levam ao Fracasso profissional
Atitudes que levam ao Fracasso profissional
 
Os 5 Sensos da Qualidade
Os 5 Sensos da QualidadeOs 5 Sensos da Qualidade
Os 5 Sensos da Qualidade
 
WATSON - O Fascinante Computador da IBM
WATSON - O Fascinante Computador da IBMWATSON - O Fascinante Computador da IBM
WATSON - O Fascinante Computador da IBM
 
Produtividade sem enrrolação
Produtividade sem enrrolaçãoProdutividade sem enrrolação
Produtividade sem enrrolação
 
Principios e Valores Ágeis
Principios e Valores ÁgeisPrincipios e Valores Ágeis
Principios e Valores Ágeis
 
Big data
Big dataBig data
Big data
 
Metricas para Times Ágeis
Metricas para Times ÁgeisMetricas para Times Ágeis
Metricas para Times Ágeis
 
Aplicação de Abordagens Ágeis: Estudo de Caso de utlização do SCRUM – PROEG/UFPA
Aplicação de Abordagens Ágeis: Estudo de Caso de utlização do SCRUM – PROEG/UFPAAplicação de Abordagens Ágeis: Estudo de Caso de utlização do SCRUM – PROEG/UFPA
Aplicação de Abordagens Ágeis: Estudo de Caso de utlização do SCRUM – PROEG/UFPA
 
Técnicas para Programação em Par
Técnicas para Programação em ParTécnicas para Programação em Par
Técnicas para Programação em Par
 
Feedback Canvas
Feedback CanvasFeedback Canvas
Feedback Canvas
 
5 Doenças do Gerenciamento de Projetos
5 Doenças do Gerenciamento de Projetos5 Doenças do Gerenciamento de Projetos
5 Doenças do Gerenciamento de Projetos
 
Restrospectiva ágil
Restrospectiva ágilRestrospectiva ágil
Restrospectiva ágil
 

Unobtrusive JavaScript

  • 1. Unobtrusive JavaScript Iuri Raiol iuriraiol@gmail.com
  • 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. Como funciona? O que era feito:
  • 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. Como funciona? O que deve ser feito:
  • 6. Como funciona?  Ex: Estilos e Scripts divididos e fora do html e fora do html estilo.css #paragrafo{ font:60px helvetica,Arial,sans-serif; color:red; } efeito.js document.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. Um exemplo  Para fazer um código simples com uma ação simples: <p onmouseover="this.style.fontWeight='bold'">Meu texto</p>
  • 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. Podemos melhorar mais  Aqui vemos um código sem interferência de javaScript no HTML: efeitos.js function 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. 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. 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.