SlideShare uma empresa Scribd logo
1 de 32
JavaScript e jQuery Melhorando a Experiência do Usuário com JavaScript e jQuery   Harlley R. Oliveira   http://twitter.com/harlley
JavaScript e jQuery ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
JavaScript e jQuery ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
JavaScript e jQuery ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
JavaScript e jQuery ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
JavaScript e jQuery   "Com grandes poderes vêm grandes responsabilidades"  Peter Benjamin  Parker     O JavaScript deve ser usado para melhorar a experiência do usuário, mas sempre devemos ficar atentos a outros dois requisitos importantes:  Acessibilidade e Performance .  
JavaScript e jQuery Antigamente as páginas eram criadas assim: HTML, CSS, JavaScript e até PHP ou ASP tudo junto no mesmo arquivo. O famoso código macarrão.
JavaScript e jQuery Agora trabalhamos desta forma Usando o HTML para o conteúdo (camada mais importante), CSS para a apresentação e JavaScript para o comportamento (camada mais divertida).
JavaScript e jQuery Imagens by  http://www.sitepoint.com/article/simply-javascript/
JavaScript e jQuery ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
JavaScript e jQuery Vamos sempre usar o JavaScript de modo não-intrusivo através de um include na página html   <script type=&quot;text/javascript&quot; src=&quot;[ path_file_js ]&quot;></script> Desta forma se mantém o código separado facilitando na manutenção e performance, pois assim como o CSS, o JavaScript fica no cache do browser.  
JavaScript e jQuery Nosso primeiro script:   // Preenche a variável var meu_nome =  'Harlley' ;   /* Mostra uma mensagem */ alert( 'Boa tarde '  + meu_nome +  '!' ); /* Toda string é um objeto e tem vários métodos e propriedades para ajudar na manipulação, um exemplo */ alert(meu_nome.length);
JavaScript e jQuery Vetores (Array)   // Cria um array com vários nomes var nomes = [ 'Fulano', 'Cicrano', 'Beltrano' ];   /* Mostra a mensagem com um dos nomes indicador pelo índice, que começa em zero */ alert( 'Boa tarde '  + nomes[0] +  '!' );   // O array também é um objeto com vários métodos e propriedades, um deles nomes.reverse();   alert( 'Boa tarde '  + nomes[0] +  '!' );
JavaScript e jQuery Operadores matemáticos básicos   var resultado;  resultado = 3 + 2; alert( '3 + 2 = '  +   resultado);   resultado = 3 - 2; alert( '3 - 2 = '  +   resultado);   resultado = 3 * 2; alert( '3 * 2 = '  +   resultado); resultado = 3 / 2; alert( '3 / 2 = '  +   resultado);
JavaScript e jQuery Operadores básicos lógicos e de comparação   alert(3 == 3);  /**********  igual */ alert(3 != 3);  /*********** diferente */ alert(3 > 3);  /************ maior */ alert(3 >= 3);  /********** maior ou igual */ alert(3 < 3);  /************ menor*/ alert(3 <= 3);  /********** menor ou igual */ alert(true && false);  /** e */ alert(true || false);  /**** ou */
JavaScript e jQuery Comandos básicos - if ... else   var hora = 8; // Se variável hora meno que 12 então diga Bom dia!    if ( hora < 12 )  {      alert( 'Bom dia!' ); }  // Senão se hora for maior que 12 e menor que 18, Boa tarde! else if( (hora > 12) && (hora < 18) ) {      alert( 'Boa tarde!' ); } //Senão for Bom dia e nem Boa tarde, só pode ser Boa noite! else {      alert( 'Boa noite!' ); }      
JavaScript e jQuery Comandos básicos - for   // Preencho o array dias_uteis com os nomes dos dias var dias_uteis = [ 'segunda' ,  'terça' ,  'quarta' ,  'quinta' ,  'sexta' ]; /* Inicializo a variável de iteração, e executo o comando alert enquanto a variável de iteração for menor que 5: 0, 1, 2, 3, 4 */ for ( i = 0; i < 5; i++ )  {      // Acesso o array dias_uteis através do índice      alert(dias_uteis[i]); }
JavaScript e jQuery Comandos básicos - for ... in   /* É similar ao for visto anteriormente, porém tem menos opções de configuração e percorre todos os elementos do objeto */ var dias_uteis = [ 'segunda' ,  'terça' ,  'quarta' ,  'quinta' ,  'sexta' ]; for ( i in dias_uteis )  {      alert(dias_uteis[i]); }
JavaScript e jQuery Funções   /* Função que recebe um vetor como parâmetro e imprime através do alert todos os ítens */   function mostrarMensagem(vetor) {      for ( i in vetor )  {          alert(vetor[i]);      }  } var dias_uteis = [ 'segunda' ,  'terça' ,  'quarta' ,  'quinta' ,  'sexta' ]; mostrarMensagem(dias_uteis);   var estacoes = [ 'primavera' ,  'verao' ,  'outono' ,  'inverno' ]; mostrarMensagem(estacoes);  
JavaScript e jQuery Alguns métodos do objeto String   var conteudo =   'JavaScript' ;   alert( conteudo.length );  // tamalho da string alert( conteudo.charAt(4) );  // acha o caractér pelo índice alert( conteudo.toLowerCase() );  // minúsculo alert( conteudo.toUpperCase() );  // minúsculo alert(  'JavaScript não é '  + conteudo.substr(0, 4) );   var conteudo =   'JavaScript não é Java ' ; alert( conteudo.split(' ')[0] );  // divide a string em vetores alert( conteudo.replace( ' Java ', 'difícíl' ) );  /* Substitui valores dentro da string */           
JavaScript e jQuery Vimos até agora somente os comandos básicos do JavaScript, existem muito mais comandos, mas não precisamos aprender todos, basta termos uma  boa referência para consulta . Pra quem quiser aprender um pouco mais sobre JavaScript, deixo as seguintes sugestões: http://aprendajs.klaus.pro.br/ http://eloquentjavascript.net/ Livro Simply JavaScript   Agora vamos aprender como manipular todo o DOM HTML de uma forma bem simples.     
JavaScript e jQuery ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
JavaScript e jQuery ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
JavaScript e jQuery Para usar o jQuery basta baixar o arquivo e incluir no HTML o include para o arquivo:   <script type=&quot;text/javascript&quot; src=&quot;[ path_file_js ]&quot;></script>     Em outro arquivo, vamos colocar o nosso script jQuery     /* garante que o código vai ser executado depois do DOM ser carregado. */      $(function() {         // Adiciona um elemento h1 ao DOM          $( 'body' ).append( '<h1>Olá Mundo!</h1>' );      });  
JavaScript e jQuery <span>Formulário</span> <fieldset>     <div class=&quot;item-form&quot;>         <label class=&quot;obrigatorio&quot; for=&quot;nome&quot;>Nome</label>         <input type=&quot;text&quot; id=&quot;nome&quot; />     </div>     <div class=&quot;item-form&quot;>         <label for=&quot;telefone&quot;>Telefone</label>         <input type=&quot;text&quot; id=&quot;telefone&quot; />     </div>         <input id=&quot;gravar&quot; type=&quot;button&quot; value=&quot;Gravar&quot; />     <button id=&quot;cancelar&quot; disabled=&quot;disabled&quot;>Cancelar</button>     <input type=&quot;button&quot; value=&quot;Excluir&quot;  /> </fieldset>
JavaScript e jQuery Seletores                                                                        Mais...   $( '#nome' ).val( 'Fulano' ); $( '.obrigatorio' ).css( 'color' ,  '#F00' ); $( '#nome, #telefone' ).attr( 'disabled' ,  'disabled' ); $( 'input:button' ).val( 'Gravado!!' ); $( '*' ,  'fieldset' ).css( 'border' ,  '1px solid #F00' ); $( 'fieldset label' ).css( 'background-color' ,  'blue' ); $( 'fieldset > label' ).css( 'background-color' ,  'blue' ); $( 'label + input' ).css( 'width' ,  '400px' ); $( '.item-form ~ input' ).css( 'background-color' ,  'blue' );
JavaScript e jQuery Manipulação do DOM                                                Mais...   $( '#nome' ).val( 'Fulano' ); $( 'fieldset' ).html( '<input type=&quot;text&quot;/>' ); $( 'fieldset' ).prepend( '<input type=&quot;text&quot;/>' ); $( 'fieldset' ).append( '<input type=&quot;text&quot;/>' ); $( 'fieldset' ).before( '<input type=&quot;text&quot;/>' );  $( 'fieldset' ).after( '<input type=&quot;text&quot;/>' ); $( '#cancelar' ).removeAttr( 'disabled' );  $( 'span' ).wrap( '<h1></h1>' ); $( 'button' ).remove(); $( 'fieldset' ).empty(); $( 'fieldset' ).css( 'background-color' ,  'blue' ); $( 'input:text:last' ).addClass( 'blue' );  
JavaScript e jQuery Eventos                                                                             Mais... $( '#gravar' ).click(function() {     $( '#nome' ).css( 'background-color' ,  'red' ).fadeOut().fadeIn(); });   $( '#nome' ).select( function () {      $( '#telefone' ).val( $(this).val() );  });  var contador = 0; $( '#telefone' ).keydown(function() {     contador = contador + 1;     $( 'span' ).html(contador); });
JavaScript e jQuery Efeitos                                                                             Mais...   $( '#gravar' ).click(function () {   $( 'span' ).toggle(); }); $( 'fieldset' ).hide( 'slow' ); $( 'div' ).slideUp( 'slow' ); $( 'div' ).fadeOut( 'slow' );  
JavaScript e jQuery Plugins                                                                       http://plugins.jquery.com/ http://jqueryui.com/ http://flowplayer.org/tools/demos/index.html    
JavaScript e jQuery Para saber mais sobre jQuery                                                                       Referência completa          http://api.jquery.com/        Livros          http://www.livrojquery.com.br/index.php            http://www.packtpub.com/jQuery/book/mid/1004077zztq0          http://www.manning.com/bibeault/           
JavaScript e jQuery Obrigado!                                                               [email_address] http://twitter.com/harlley  harlley.net          

Mais conteúdo relacionado

Mais procurados

Desenvolvendo com Dojo Toolkit
Desenvolvendo com Dojo ToolkitDesenvolvendo com Dojo Toolkit
Desenvolvendo com Dojo ToolkitFlávio Lisboa
 
Construindo Sistemas Com Django
Construindo Sistemas Com DjangoConstruindo Sistemas Com Django
Construindo Sistemas Com DjangoMarinho Brandão
 
Desvendando a linguagem JavaScript
Desvendando a linguagem JavaScriptDesvendando a linguagem JavaScript
Desvendando a linguagem JavaScriptRodrigo Branas
 
Javascript levado a serio
Javascript levado a serioJavascript levado a serio
Javascript levado a serioJaydson Gomes
 
Minicurso de JavaScript (Portuguese)
Minicurso de JavaScript (Portuguese)Minicurso de JavaScript (Portuguese)
Minicurso de JavaScript (Portuguese)Bruno Grange
 
Criando websites a jato com Django
Criando websites a jato com DjangoCriando websites a jato com Django
Criando websites a jato com DjangoMarcos Petry
 
Introdução ao Smarty
Introdução ao SmartyIntrodução ao Smarty
Introdução ao SmartyNelson Gomes
 
Serversidephp pptx2-120418140114-phpapp01
Serversidephp pptx2-120418140114-phpapp01Serversidephp pptx2-120418140114-phpapp01
Serversidephp pptx2-120418140114-phpapp01joaocarlobarros
 
Introdução à MEAN Stack
Introdução à MEAN StackIntrodução à MEAN Stack
Introdução à MEAN StackBruno Catão
 
Django Tem Ritmo
Django Tem RitmoDjango Tem Ritmo
Django Tem Ritmoitalomaia
 
Javascript Orientado a Objetos - Fisl12
Javascript Orientado a Objetos - Fisl12Javascript Orientado a Objetos - Fisl12
Javascript Orientado a Objetos - Fisl12Emerson Macedo
 
Minicurso Ajax - 5. Semana de Informática PUC Minas São Gabriel
Minicurso Ajax - 5. Semana de Informática PUC Minas São GabrielMinicurso Ajax - 5. Semana de Informática PUC Minas São Gabriel
Minicurso Ajax - 5. Semana de Informática PUC Minas São GabrielMarcelo Linhares
 
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
 
PHP e AJAX: do Request ao Framework
PHP e AJAX: do Request ao FrameworkPHP e AJAX: do Request ao Framework
PHP e AJAX: do Request ao FrameworkRafael Dohms
 

Mais procurados (20)

Desenvolvendo com Dojo Toolkit
Desenvolvendo com Dojo ToolkitDesenvolvendo com Dojo Toolkit
Desenvolvendo com Dojo Toolkit
 
Construindo Sistemas Com Django
Construindo Sistemas Com DjangoConstruindo Sistemas Com Django
Construindo Sistemas Com Django
 
Desvendando a linguagem JavaScript
Desvendando a linguagem JavaScriptDesvendando a linguagem JavaScript
Desvendando a linguagem JavaScript
 
Javascript levado a serio
Javascript levado a serioJavascript levado a serio
Javascript levado a serio
 
Minicurso de JavaScript (Portuguese)
Minicurso de JavaScript (Portuguese)Minicurso de JavaScript (Portuguese)
Minicurso de JavaScript (Portuguese)
 
Java script aula 02 - operadores
Java script   aula 02 - operadoresJava script   aula 02 - operadores
Java script aula 02 - operadores
 
Criando websites a jato com Django
Criando websites a jato com DjangoCriando websites a jato com Django
Criando websites a jato com Django
 
Introdução ao Smarty
Introdução ao SmartyIntrodução ao Smarty
Introdução ao Smarty
 
Curso de Desenvolvimento Web - Módulo 03 - JavaScript
Curso de Desenvolvimento Web - Módulo 03 - JavaScriptCurso de Desenvolvimento Web - Módulo 03 - JavaScript
Curso de Desenvolvimento Web - Módulo 03 - JavaScript
 
Serversidephp pptx2-120418140114-phpapp01
Serversidephp pptx2-120418140114-phpapp01Serversidephp pptx2-120418140114-phpapp01
Serversidephp pptx2-120418140114-phpapp01
 
Java script aula 05 - funções
Java script   aula 05 - funçõesJava script   aula 05 - funções
Java script aula 05 - funções
 
Introdução à MEAN Stack
Introdução à MEAN StackIntrodução à MEAN Stack
Introdução à MEAN Stack
 
Aplicacoes Web Com AJAX
Aplicacoes Web Com AJAXAplicacoes Web Com AJAX
Aplicacoes Web Com AJAX
 
Django Tem Ritmo
Django Tem RitmoDjango Tem Ritmo
Django Tem Ritmo
 
Javascript Orientado a Objetos - Fisl12
Javascript Orientado a Objetos - Fisl12Javascript Orientado a Objetos - Fisl12
Javascript Orientado a Objetos - Fisl12
 
Minicurso Ajax - 5. Semana de Informática PUC Minas São Gabriel
Minicurso Ajax - 5. Semana de Informática PUC Minas São GabrielMinicurso Ajax - 5. Semana de Informática PUC Minas São Gabriel
Minicurso Ajax - 5. Semana de Informática PUC Minas São Gabriel
 
Introdução básica ao JavaScript
Introdução básica ao JavaScriptIntrodução básica ao JavaScript
Introdução básica ao JavaScript
 
Java script aula 08 - formulários
Java script   aula 08 - formuláriosJava script   aula 08 - formulários
Java script aula 08 - formulários
 
Aula 07 acessibilidade
Aula 07  acessibilidadeAula 07  acessibilidade
Aula 07 acessibilidade
 
PHP e AJAX: do Request ao Framework
PHP e AJAX: do Request ao FrameworkPHP e AJAX: do Request ao Framework
PHP e AJAX: do Request ao Framework
 

Destaque

Php do início ao profissional
Php do início ao profissionalPhp do início ao profissional
Php do início ao profissionalAndré Pfeiffer
 
JavaScript e JQuery para Webdesigners
JavaScript e JQuery para WebdesignersJavaScript e JQuery para Webdesigners
JavaScript e JQuery para WebdesignersHarlley Oliveira
 
MiniCurso Jquery - IV SimSis
MiniCurso Jquery - IV SimSisMiniCurso Jquery - IV SimSis
MiniCurso Jquery - IV SimSisThiago Miranda
 
Curso de PHP Básico ao Avançado
Curso de PHP Básico ao AvançadoCurso de PHP Básico ao Avançado
Curso de PHP Básico ao AvançadoLuiz Junior
 
INTRODUÇÃO FUNDAMENTOS DE SISTEMAS DE INFORMAÇÃO
INTRODUÇÃO FUNDAMENTOS DE SISTEMAS DE INFORMAÇÃOINTRODUÇÃO FUNDAMENTOS DE SISTEMAS DE INFORMAÇÃO
INTRODUÇÃO FUNDAMENTOS DE SISTEMAS DE INFORMAÇÃOEdson Lima
 

Destaque (7)

Php do início ao profissional
Php do início ao profissionalPhp do início ao profissional
Php do início ao profissional
 
JavaScript e JQuery para Webdesigners
JavaScript e JQuery para WebdesignersJavaScript e JQuery para Webdesigners
JavaScript e JQuery para Webdesigners
 
PHP versus Java
PHP versus JavaPHP versus Java
PHP versus Java
 
MiniCurso Jquery - IV SimSis
MiniCurso Jquery - IV SimSisMiniCurso Jquery - IV SimSis
MiniCurso Jquery - IV SimSis
 
Introdução a jQuery
Introdução a jQueryIntrodução a jQuery
Introdução a jQuery
 
Curso de PHP Básico ao Avançado
Curso de PHP Básico ao AvançadoCurso de PHP Básico ao Avançado
Curso de PHP Básico ao Avançado
 
INTRODUÇÃO FUNDAMENTOS DE SISTEMAS DE INFORMAÇÃO
INTRODUÇÃO FUNDAMENTOS DE SISTEMAS DE INFORMAÇÃOINTRODUÇÃO FUNDAMENTOS DE SISTEMAS DE INFORMAÇÃO
INTRODUÇÃO FUNDAMENTOS DE SISTEMAS DE INFORMAÇÃO
 

Semelhante a Melhorando a Experiência do Usuário com JavaScript e jQuery

JavaScript - Aula Introdutória
JavaScript - Aula IntrodutóriaJavaScript - Aula Introdutória
JavaScript - Aula Introdutórialucasleite
 
Combinando OO e Funcional em javascript de forma prática
Combinando OO e Funcional em javascript de forma práticaCombinando OO e Funcional em javascript de forma prática
Combinando OO e Funcional em javascript de forma práticaMilfont Consulting
 
Apps Web em Wicket e Scala no GlassFish Java EE 6
Apps Web em Wicket e Scala no GlassFish Java EE 6Apps Web em Wicket e Scala no GlassFish Java EE 6
Apps Web em Wicket e Scala no GlassFish Java EE 6Bruno Borges
 
Lib.SAPO.JS - Codebits2007
Lib.SAPO.JS  - Codebits2007Lib.SAPO.JS  - Codebits2007
Lib.SAPO.JS - Codebits2007Claudio Gamboa
 
(Portuguese) Java EE Poliglota
(Portuguese) Java EE Poliglota(Portuguese) Java EE Poliglota
(Portuguese) Java EE PoliglotaPhil Calçado
 
Java mais ágil que nunca no desenvolvimento Web
Java mais ágil que nunca no desenvolvimento WebJava mais ágil que nunca no desenvolvimento Web
Java mais ágil que nunca no desenvolvimento WebBruno Borges
 
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
 
Javascript
JavascriptJavascript
Javascriptnasjo
 
Html5 - O futuro da Web
Html5 - O futuro da WebHtml5 - O futuro da Web
Html5 - O futuro da WebJose Berardo
 
Desenvolvimento de web sites com php
Desenvolvimento de web sites com phpDesenvolvimento de web sites com php
Desenvolvimento de web sites com phpbrenod123
 
RubyConfBr 2015 - Rails & Javascript: faça isso direito
RubyConfBr 2015 - Rails & Javascript: faça isso direitoRubyConfBr 2015 - Rails & Javascript: faça isso direito
RubyConfBr 2015 - Rails & Javascript: faça isso direitoCezinha Anjos
 
Da argila ao forte: como desenvolver uma loja com PagSeguro
Da argila ao forte: como desenvolver uma loja com PagSeguroDa argila ao forte: como desenvolver uma loja com PagSeguro
Da argila ao forte: como desenvolver uma loja com PagSeguroMichael Castillo Granados
 
2009 05 20 Floripa Flex
2009 05 20 Floripa Flex2009 05 20 Floripa Flex
2009 05 20 Floripa FlexEduardo Kraus
 

Semelhante a Melhorando a Experiência do Usuário com JavaScript e jQuery (20)

JavaScript - Aula Introdutória
JavaScript - Aula IntrodutóriaJavaScript - Aula Introdutória
JavaScript - Aula Introdutória
 
Combinando OO e Funcional em javascript de forma prática
Combinando OO e Funcional em javascript de forma práticaCombinando OO e Funcional em javascript de forma prática
Combinando OO e Funcional em javascript de forma prática
 
Tutorial Dwr - Configuração e Uso
Tutorial Dwr - Configuração e UsoTutorial Dwr - Configuração e Uso
Tutorial Dwr - Configuração e Uso
 
Apps Web em Wicket e Scala no GlassFish Java EE 6
Apps Web em Wicket e Scala no GlassFish Java EE 6Apps Web em Wicket e Scala no GlassFish Java EE 6
Apps Web em Wicket e Scala no GlassFish Java EE 6
 
Lib.SAPO.JS - Codebits2007
Lib.SAPO.JS  - Codebits2007Lib.SAPO.JS  - Codebits2007
Lib.SAPO.JS - Codebits2007
 
(Portuguese) Java EE Poliglota
(Portuguese) Java EE Poliglota(Portuguese) Java EE Poliglota
(Portuguese) Java EE Poliglota
 
Beagajs
BeagajsBeagajs
Beagajs
 
Java mais ágil que nunca no desenvolvimento Web
Java mais ágil que nunca no desenvolvimento WebJava mais ágil que nunca no desenvolvimento Web
Java mais ágil que nunca no desenvolvimento Web
 
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
 
Javascript
JavascriptJavascript
Javascript
 
Html5 - O futuro da Web
Html5 - O futuro da WebHtml5 - O futuro da Web
Html5 - O futuro da Web
 
Php 07 Cakephp
Php 07 CakephpPhp 07 Cakephp
Php 07 Cakephp
 
servlet-requisicoes
servlet-requisicoesservlet-requisicoes
servlet-requisicoes
 
Introdução ao JavaScript
Introdução ao JavaScriptIntrodução ao JavaScript
Introdução ao JavaScript
 
Desenvolvimento de web sites com php
Desenvolvimento de web sites com phpDesenvolvimento de web sites com php
Desenvolvimento de web sites com php
 
RubyConfBr 2015 - Rails & Javascript: faça isso direito
RubyConfBr 2015 - Rails & Javascript: faça isso direitoRubyConfBr 2015 - Rails & Javascript: faça isso direito
RubyConfBr 2015 - Rails & Javascript: faça isso direito
 
Da argila ao forte: como desenvolver uma loja com PagSeguro
Da argila ao forte: como desenvolver uma loja com PagSeguroDa argila ao forte: como desenvolver uma loja com PagSeguro
Da argila ao forte: como desenvolver uma loja com PagSeguro
 
2009 05 20 Floripa Flex
2009 05 20 Floripa Flex2009 05 20 Floripa Flex
2009 05 20 Floripa Flex
 
Tw Course Ajax 2007 Ap05
Tw Course Ajax 2007 Ap05Tw Course Ajax 2007 Ap05
Tw Course Ajax 2007 Ap05
 
Tutorial Dwr - Combos Dependentes
Tutorial Dwr - Combos DependentesTutorial Dwr - Combos Dependentes
Tutorial Dwr - Combos Dependentes
 

Mais de Harlley Oliveira

Curso de programação para iniciantes: Qual linguagem de programação escolher?
Curso de programação para iniciantes: Qual linguagem de programação escolher?Curso de programação para iniciantes: Qual linguagem de programação escolher?
Curso de programação para iniciantes: Qual linguagem de programação escolher?Harlley Oliveira
 
Second project venturebrazil
Second project venturebrazilSecond project venturebrazil
Second project venturebrazilHarlley Oliveira
 
Afinal, o que é uma linguagem de programação?
Afinal, o que é uma linguagem de programação?Afinal, o que é uma linguagem de programação?
Afinal, o que é uma linguagem de programação?Harlley Oliveira
 
Software fácil de usar não é difícil de programar
Software fácil de usar não é difícil de programarSoftware fácil de usar não é difícil de programar
Software fácil de usar não é difícil de programarHarlley Oliveira
 
Recomendações de usabilidade para TV Digital Interativa baseadas na experiênc...
Recomendações de usabilidade para TV Digital Interativa baseadas na experiênc...Recomendações de usabilidade para TV Digital Interativa baseadas na experiênc...
Recomendações de usabilidade para TV Digital Interativa baseadas na experiênc...Harlley Oliveira
 
Software fácil de usar não é difícil de programar
Software fácil de usar não é  difícil de programarSoftware fácil de usar não é  difícil de programar
Software fácil de usar não é difícil de programarHarlley Oliveira
 

Mais de Harlley Oliveira (7)

Curso de programação para iniciantes: Qual linguagem de programação escolher?
Curso de programação para iniciantes: Qual linguagem de programação escolher?Curso de programação para iniciantes: Qual linguagem de programação escolher?
Curso de programação para iniciantes: Qual linguagem de programação escolher?
 
Second project venturebrazil
Second project venturebrazilSecond project venturebrazil
Second project venturebrazil
 
Afinal, o que é uma linguagem de programação?
Afinal, o que é uma linguagem de programação?Afinal, o que é uma linguagem de programação?
Afinal, o que é uma linguagem de programação?
 
Software fácil de usar não é difícil de programar
Software fácil de usar não é difícil de programarSoftware fácil de usar não é difícil de programar
Software fácil de usar não é difícil de programar
 
Recomendações de usabilidade para TV Digital Interativa baseadas na experiênc...
Recomendações de usabilidade para TV Digital Interativa baseadas na experiênc...Recomendações de usabilidade para TV Digital Interativa baseadas na experiênc...
Recomendações de usabilidade para TV Digital Interativa baseadas na experiênc...
 
Software fácil de usar não é difícil de programar
Software fácil de usar não é  difícil de programarSoftware fácil de usar não é  difícil de programar
Software fácil de usar não é difícil de programar
 
Philips
PhilipsPhilips
Philips
 

Melhorando a Experiência do Usuário com JavaScript e jQuery

  • 1. JavaScript e jQuery Melhorando a Experiência do Usuário com JavaScript e jQuery Harlley R. Oliveira http://twitter.com/harlley
  • 2.
  • 3.
  • 4.
  • 5.
  • 6. JavaScript e jQuery   &quot;Com grandes poderes vêm grandes responsabilidades&quot; Peter Benjamin Parker     O JavaScript deve ser usado para melhorar a experiência do usuário, mas sempre devemos ficar atentos a outros dois requisitos importantes: Acessibilidade e Performance .  
  • 7. JavaScript e jQuery Antigamente as páginas eram criadas assim: HTML, CSS, JavaScript e até PHP ou ASP tudo junto no mesmo arquivo. O famoso código macarrão.
  • 8. JavaScript e jQuery Agora trabalhamos desta forma Usando o HTML para o conteúdo (camada mais importante), CSS para a apresentação e JavaScript para o comportamento (camada mais divertida).
  • 9. JavaScript e jQuery Imagens by http://www.sitepoint.com/article/simply-javascript/
  • 10.
  • 11. JavaScript e jQuery Vamos sempre usar o JavaScript de modo não-intrusivo através de um include na página html   <script type=&quot;text/javascript&quot; src=&quot;[ path_file_js ]&quot;></script> Desta forma se mantém o código separado facilitando na manutenção e performance, pois assim como o CSS, o JavaScript fica no cache do browser.  
  • 12. JavaScript e jQuery Nosso primeiro script:   // Preenche a variável var meu_nome = 'Harlley' ;   /* Mostra uma mensagem */ alert( 'Boa tarde ' + meu_nome + '!' ); /* Toda string é um objeto e tem vários métodos e propriedades para ajudar na manipulação, um exemplo */ alert(meu_nome.length);
  • 13. JavaScript e jQuery Vetores (Array)   // Cria um array com vários nomes var nomes = [ 'Fulano', 'Cicrano', 'Beltrano' ];   /* Mostra a mensagem com um dos nomes indicador pelo índice, que começa em zero */ alert( 'Boa tarde ' + nomes[0] + '!' );   // O array também é um objeto com vários métodos e propriedades, um deles nomes.reverse();   alert( 'Boa tarde ' + nomes[0] + '!' );
  • 14. JavaScript e jQuery Operadores matemáticos básicos   var resultado; resultado = 3 + 2; alert( '3 + 2 = ' + resultado);   resultado = 3 - 2; alert( '3 - 2 = ' + resultado);   resultado = 3 * 2; alert( '3 * 2 = ' + resultado); resultado = 3 / 2; alert( '3 / 2 = ' + resultado);
  • 15. JavaScript e jQuery Operadores básicos lógicos e de comparação   alert(3 == 3); /**********  igual */ alert(3 != 3); /*********** diferente */ alert(3 > 3); /************ maior */ alert(3 >= 3); /********** maior ou igual */ alert(3 < 3); /************ menor*/ alert(3 <= 3); /********** menor ou igual */ alert(true && false); /** e */ alert(true || false); /**** ou */
  • 16. JavaScript e jQuery Comandos básicos - if ... else   var hora = 8; // Se variável hora meno que 12 então diga Bom dia!  if ( hora < 12 )  {     alert( 'Bom dia!' ); } // Senão se hora for maior que 12 e menor que 18, Boa tarde! else if( (hora > 12) && (hora < 18) ) {     alert( 'Boa tarde!' ); } //Senão for Bom dia e nem Boa tarde, só pode ser Boa noite! else {     alert( 'Boa noite!' ); }      
  • 17. JavaScript e jQuery Comandos básicos - for   // Preencho o array dias_uteis com os nomes dos dias var dias_uteis = [ 'segunda' , 'terça' , 'quarta' , 'quinta' , 'sexta' ]; /* Inicializo a variável de iteração, e executo o comando alert enquanto a variável de iteração for menor que 5: 0, 1, 2, 3, 4 */ for ( i = 0; i < 5; i++ )  {      // Acesso o array dias_uteis através do índice     alert(dias_uteis[i]); }
  • 18. JavaScript e jQuery Comandos básicos - for ... in   /* É similar ao for visto anteriormente, porém tem menos opções de configuração e percorre todos os elementos do objeto */ var dias_uteis = [ 'segunda' , 'terça' , 'quarta' , 'quinta' , 'sexta' ]; for ( i in dias_uteis )  {     alert(dias_uteis[i]); }
  • 19. JavaScript e jQuery Funções   /* Função que recebe um vetor como parâmetro e imprime através do alert todos os ítens */ function mostrarMensagem(vetor) {      for ( i in vetor )  {          alert(vetor[i]);      } } var dias_uteis = [ 'segunda' , 'terça' , 'quarta' , 'quinta' , 'sexta' ]; mostrarMensagem(dias_uteis);   var estacoes = [ 'primavera' , 'verao' , 'outono' , 'inverno' ]; mostrarMensagem(estacoes);  
  • 20. JavaScript e jQuery Alguns métodos do objeto String   var conteudo =  'JavaScript' ;   alert( conteudo.length ); // tamalho da string alert( conteudo.charAt(4) ); // acha o caractér pelo índice alert( conteudo.toLowerCase() ); // minúsculo alert( conteudo.toUpperCase() ); // minúsculo alert( 'JavaScript não é ' + conteudo.substr(0, 4) );   var conteudo =  'JavaScript não é Java ' ; alert( conteudo.split(' ')[0] ); // divide a string em vetores alert( conteudo.replace( ' Java ', 'difícíl' ) ); /* Substitui valores dentro da string */        
  • 21. JavaScript e jQuery Vimos até agora somente os comandos básicos do JavaScript, existem muito mais comandos, mas não precisamos aprender todos, basta termos uma boa referência para consulta . Pra quem quiser aprender um pouco mais sobre JavaScript, deixo as seguintes sugestões: http://aprendajs.klaus.pro.br/ http://eloquentjavascript.net/ Livro Simply JavaScript   Agora vamos aprender como manipular todo o DOM HTML de uma forma bem simples.    
  • 22.
  • 23.
  • 24. JavaScript e jQuery Para usar o jQuery basta baixar o arquivo e incluir no HTML o include para o arquivo:   <script type=&quot;text/javascript&quot; src=&quot;[ path_file_js ]&quot;></script>     Em outro arquivo, vamos colocar o nosso script jQuery     /* garante que o código vai ser executado depois do DOM ser carregado. */      $(function() {        // Adiciona um elemento h1 ao DOM          $( 'body' ).append( '<h1>Olá Mundo!</h1>' );     });  
  • 25. JavaScript e jQuery <span>Formulário</span> <fieldset>     <div class=&quot;item-form&quot;>         <label class=&quot;obrigatorio&quot; for=&quot;nome&quot;>Nome</label>         <input type=&quot;text&quot; id=&quot;nome&quot; />     </div>     <div class=&quot;item-form&quot;>         <label for=&quot;telefone&quot;>Telefone</label>         <input type=&quot;text&quot; id=&quot;telefone&quot; />     </div>        <input id=&quot;gravar&quot; type=&quot;button&quot; value=&quot;Gravar&quot; />     <button id=&quot;cancelar&quot; disabled=&quot;disabled&quot;>Cancelar</button>     <input type=&quot;button&quot; value=&quot;Excluir&quot;  /> </fieldset>
  • 26. JavaScript e jQuery Seletores                                                                        Mais...   $( '#nome' ).val( 'Fulano' ); $( '.obrigatorio' ).css( 'color' , '#F00' ); $( '#nome, #telefone' ).attr( 'disabled' , 'disabled' ); $( 'input:button' ).val( 'Gravado!!' ); $( '*' , 'fieldset' ).css( 'border' , '1px solid #F00' ); $( 'fieldset label' ).css( 'background-color' , 'blue' ); $( 'fieldset > label' ).css( 'background-color' , 'blue' ); $( 'label + input' ).css( 'width' , '400px' ); $( '.item-form ~ input' ).css( 'background-color' , 'blue' );
  • 27. JavaScript e jQuery Manipulação do DOM                                               Mais...   $( '#nome' ).val( 'Fulano' ); $( 'fieldset' ).html( '<input type=&quot;text&quot;/>' ); $( 'fieldset' ).prepend( '<input type=&quot;text&quot;/>' ); $( 'fieldset' ).append( '<input type=&quot;text&quot;/>' ); $( 'fieldset' ).before( '<input type=&quot;text&quot;/>' );  $( 'fieldset' ).after( '<input type=&quot;text&quot;/>' ); $( '#cancelar' ).removeAttr( 'disabled' ); $( 'span' ).wrap( '<h1></h1>' ); $( 'button' ).remove(); $( 'fieldset' ).empty(); $( 'fieldset' ).css( 'background-color' , 'blue' ); $( 'input:text:last' ).addClass( 'blue' );  
  • 28. JavaScript e jQuery Eventos                                                                             Mais... $( '#gravar' ).click(function() {     $( '#nome' ).css( 'background-color' , 'red' ).fadeOut().fadeIn(); });   $( '#nome' ).select( function () {     $( '#telefone' ).val( $(this).val() );  }); var contador = 0; $( '#telefone' ).keydown(function() {     contador = contador + 1;     $( 'span' ).html(contador); });
  • 29. JavaScript e jQuery Efeitos                                                                             Mais...   $( '#gravar' ).click(function () {   $( 'span' ).toggle(); }); $( 'fieldset' ).hide( 'slow' ); $( 'div' ).slideUp( 'slow' ); $( 'div' ).fadeOut( 'slow' );  
  • 30. JavaScript e jQuery Plugins                                                                       http://plugins.jquery.com/ http://jqueryui.com/ http://flowplayer.org/tools/demos/index.html    
  • 31. JavaScript e jQuery Para saber mais sobre jQuery                                                                      Referência completa          http://api.jquery.com/        Livros          http://www.livrojquery.com.br/index.php           http://www.packtpub.com/jQuery/book/mid/1004077zztq0          http://www.manning.com/bibeault/        
  • 32. JavaScript e jQuery Obrigado!                                                              [email_address] http://twitter.com/harlley harlley.net