![Page 1: Melhorando a Experiência do Usuário com JavaScript e jQuery](https://reader035.vdocuments.net/reader035/viewer/2022062419/55726bd6d8b42a92608b47d7/html5/thumbnails/1.jpg)
JavaScript e jQuery
Melhorando a Experiência do Usuário com
JavaScript e jQuery
Harlley R. Oliveira http://twitter.com/harlley
![Page 2: Melhorando a Experiência do Usuário com JavaScript e jQuery](https://reader035.vdocuments.net/reader035/viewer/2022062419/55726bd6d8b42a92608b47d7/html5/thumbnails/2.jpg)
JavaScript e jQuery
O que é JavaScript?• Não é Java• Foi projetado para dar interatividade às páginas HTML• É uma linguagem de script que é intepretada pelo browser • É a linguagem mais popular da internet, principalmente
agora com essa onda de Web 2.0• Os browsers estão se preparando para melhorar a
performance para o uso intensivo de JavaScript:o Chromeo Firefox 3.1+o Safari 4o Internet Explorer 8
![Page 3: Melhorando a Experiência do Usuário com JavaScript e jQuery](https://reader035.vdocuments.net/reader035/viewer/2022062419/55726bd6d8b42a92608b47d7/html5/thumbnails/3.jpg)
JavaScript e jQuery
Além de páginas HTML• Adobe Air• Google Gears• Extensões para o Google Chrome • Firefox
o Criando extensõeso Criando comandos para o Ubiquityo Criando scripts para Greasemonkey
• Widgets para iGoogle, Open Social , celular e até iPhone.
![Page 4: Melhorando a Experiência do Usuário com JavaScript e jQuery](https://reader035.vdocuments.net/reader035/viewer/2022062419/55726bd6d8b42a92608b47d7/html5/thumbnails/4.jpg)
JavaScript e jQuery
Antes de programar, vamos nos motivar!• Validar formulários e aplicar máscaras• Efeitos especiais :)• Interações
o Arrastar e soltaro Selecionaro Redimensionar o Ordenar
• Componentes de interface o Accordion e abaso Calendárioo Barra de Progressoo Slidero Caixa de diálogo e grids.
![Page 5: Melhorando a Experiência do Usuário com JavaScript e jQuery](https://reader035.vdocuments.net/reader035/viewer/2022062419/55726bd6d8b42a92608b47d7/html5/thumbnails/5.jpg)
JavaScript e jQuery
Mais um pouco de motivação • Mapas• Carousel• Lightbox • Aplicações complexas
Se achou pouco, aqui e aqui tem mais.
![Page 6: Melhorando a Experiência do Usuário com JavaScript e jQuery](https://reader035.vdocuments.net/reader035/viewer/2022062419/55726bd6d8b42a92608b47d7/html5/thumbnails/6.jpg)
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.
![Page 7: Melhorando a Experiência do Usuário com JavaScript e jQuery](https://reader035.vdocuments.net/reader035/viewer/2022062419/55726bd6d8b42a92608b47d7/html5/thumbnails/7.jpg)
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.
![Page 8: Melhorando a Experiência do Usuário com JavaScript e jQuery](https://reader035.vdocuments.net/reader035/viewer/2022062419/55726bd6d8b42a92608b47d7/html5/thumbnails/8.jpg)
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).
![Page 9: Melhorando a Experiência do Usuário com JavaScript e jQuery](https://reader035.vdocuments.net/reader035/viewer/2022062419/55726bd6d8b42a92608b47d7/html5/thumbnails/9.jpg)
JavaScript e jQuery
Imagens by http://www.sitepoint.com/article/simply-javascript/
![Page 10: Melhorando a Experiência do Usuário com JavaScript e jQuery](https://reader035.vdocuments.net/reader035/viewer/2022062419/55726bd6d8b42a92608b47d7/html5/thumbnails/10.jpg)
JavaScript e jQuery
Agora chegou a melhor hora, programar! Vamos precisar das seguintes ferramentas:• Firefox
o Extensão Firebugo Extensão Web Developer
• Bloco de notas
![Page 11: Melhorando a Experiência do Usuário com JavaScript e jQuery](https://reader035.vdocuments.net/reader035/viewer/2022062419/55726bd6d8b42a92608b47d7/html5/thumbnails/11.jpg)
JavaScript e jQuery
Vamos sempre usar o JavaScript de modo não-intrusivo através de um include na página html
<script type="text/javascript" src="[ path_file_js ]"></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.
![Page 12: Melhorando a Experiência do Usuário com JavaScript e jQuery](https://reader035.vdocuments.net/reader035/viewer/2022062419/55726bd6d8b42a92608b47d7/html5/thumbnails/12.jpg)
JavaScript e jQuery
Nosso primeiro script: // Preenche a variávelvar 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);
![Page 13: Melhorando a Experiência do Usuário com JavaScript e jQuery](https://reader035.vdocuments.net/reader035/viewer/2022062419/55726bd6d8b42a92608b47d7/html5/thumbnails/13.jpg)
JavaScript e jQuery
Vetores (Array) // Cria um array com vários nomesvar 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 delesnomes.reverse(); alert('Boa tarde ' + nomes[0] + '!');
![Page 14: Melhorando a Experiência do Usuário com JavaScript e jQuery](https://reader035.vdocuments.net/reader035/viewer/2022062419/55726bd6d8b42a92608b47d7/html5/thumbnails/14.jpg)
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);
![Page 15: Melhorando a Experiência do Usuário com JavaScript e jQuery](https://reader035.vdocuments.net/reader035/viewer/2022062419/55726bd6d8b42a92608b47d7/html5/thumbnails/15.jpg)
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 */
![Page 16: Melhorando a Experiência do Usuário com JavaScript e jQuery](https://reader035.vdocuments.net/reader035/viewer/2022062419/55726bd6d8b42a92608b47d7/html5/thumbnails/16.jpg)
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!');}
![Page 17: Melhorando a Experiência do Usuário com JavaScript e jQuery](https://reader035.vdocuments.net/reader035/viewer/2022062419/55726bd6d8b42a92608b47d7/html5/thumbnails/17.jpg)
JavaScript e jQuery
Comandos básicos - for // Preencho o array dias_uteis com os nomes dos diasvar 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]);}
![Page 18: Melhorando a Experiência do Usuário com JavaScript e jQuery](https://reader035.vdocuments.net/reader035/viewer/2022062419/55726bd6d8b42a92608b47d7/html5/thumbnails/18.jpg)
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]);}
![Page 19: Melhorando a Experiência do Usuário com JavaScript e jQuery](https://reader035.vdocuments.net/reader035/viewer/2022062419/55726bd6d8b42a92608b47d7/html5/thumbnails/19.jpg)
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);
![Page 20: Melhorando a Experiência do Usuário com JavaScript e jQuery](https://reader035.vdocuments.net/reader035/viewer/2022062419/55726bd6d8b42a92608b47d7/html5/thumbnails/20.jpg)
JavaScript e jQuery
Alguns métodos do objeto String var conteudo = 'JavaScript'; alert( conteudo.length ); // tamalho da stringalert( conteudo.charAt(4) ); // acha o caractér pelo índicealert( conteudo.toLowerCase() ); // minúsculoalert( conteudo.toUpperCase() ); // minúsculoalert( 'JavaScript não é ' + conteudo.substr(0, 4) ); var conteudo = 'JavaScript não é Java ';alert( conteudo.split(' ')[0] ); // divide a string em vetoresalert( conteudo.replace(' Java ', 'difícíl') ); /* Substitui valores dentro da string */
![Page 21: Melhorando a Experiência do Usuário com JavaScript e jQuery](https://reader035.vdocuments.net/reader035/viewer/2022062419/55726bd6d8b42a92608b47d7/html5/thumbnails/21.jpg)
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.
![Page 22: Melhorando a Experiência do Usuário com JavaScript e jQuery](https://reader035.vdocuments.net/reader035/viewer/2022062419/55726bd6d8b42a92608b47d7/html5/thumbnails/22.jpg)
JavaScript e jQuery
DOM - Document Object Model
• DOM é um padrão da W3C pra manipular documentos HTML e XML
• O código HTML é interpretado pelo browser e transformado em uma árvore de objetos que pode ser completamente manipulado, no nosso caso usando JavaScript.
![Page 23: Melhorando a Experiência do Usuário com JavaScript e jQuery](https://reader035.vdocuments.net/reader035/viewer/2022062419/55726bd6d8b42a92608b47d7/html5/thumbnails/23.jpg)
JavaScript e jQuery
O que é jQuery?
• É um framework JavaScript que simplifica a manipulação do DOM HTML, tratamento de eventos, efeitos visuais e Ajax.
• Suporta os seletores CSS 1-3• Está em conformidade com os padrões web • Cross-browser IE6+, FF2+, Safari3+, Opera9+, Chrome• Está sendo usado por grandes empresas como Google,
Dell, Globo, Digg e Mozilla
![Page 24: Melhorando a Experiência do Usuário com JavaScript e jQuery](https://reader035.vdocuments.net/reader035/viewer/2022062419/55726bd6d8b42a92608b47d7/html5/thumbnails/24.jpg)
JavaScript e jQuery
Para usar o jQuery basta baixar o arquivo e incluir no HTML o include para o arquivo:
<script type="text/javascript" src="[ path_file_js ]"></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>'); });
![Page 25: Melhorando a Experiência do Usuário com JavaScript e jQuery](https://reader035.vdocuments.net/reader035/viewer/2022062419/55726bd6d8b42a92608b47d7/html5/thumbnails/25.jpg)
JavaScript e jQuery
<span>Formulário</span><fieldset> <div class="item-form"> <label class="obrigatorio" for="nome">Nome</label> <input type="text" id="nome" /> </div> <div class="item-form"> <label for="telefone">Telefone</label> <input type="text" id="telefone" /> </div> <input id="gravar" type="button" value="Gravar" /> <button id="cancelar" disabled="disabled">Cancelar</button> <input type="button" value="Excluir" /></fieldset>
![Page 26: Melhorando a Experiência do Usuário com JavaScript e jQuery](https://reader035.vdocuments.net/reader035/viewer/2022062419/55726bd6d8b42a92608b47d7/html5/thumbnails/26.jpg)
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');
![Page 27: Melhorando a Experiência do Usuário com JavaScript e jQuery](https://reader035.vdocuments.net/reader035/viewer/2022062419/55726bd6d8b42a92608b47d7/html5/thumbnails/27.jpg)
JavaScript e jQuery
Manipulação do DOM Mais... $('#nome').val('Fulano');$('fieldset').html('<input type="text"/>');$('fieldset').prepend('<input type="text"/>');$('fieldset').append('<input type="text"/>');$('fieldset').before('<input type="text"/>'); $('fieldset').after('<input type="text"/>');$('#cancelar').removeAttr('disabled'); $('span').wrap('<h1></h1>');$('button').remove();$('fieldset').empty();$('fieldset').css('background-color', 'blue');$('input:text:last').addClass('blue');
![Page 28: Melhorando a Experiência do Usuário com JavaScript e jQuery](https://reader035.vdocuments.net/reader035/viewer/2022062419/55726bd6d8b42a92608b47d7/html5/thumbnails/28.jpg)
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);});
![Page 29: Melhorando a Experiência do Usuário com JavaScript e jQuery](https://reader035.vdocuments.net/reader035/viewer/2022062419/55726bd6d8b42a92608b47d7/html5/thumbnails/29.jpg)
JavaScript e jQuery
Efeitos Mais... $('#gravar').click(function () { $('span').toggle();});
$('fieldset').hide('slow');$('div').slideUp('slow');
$('div').fadeOut('slow');
![Page 30: Melhorando a Experiência do Usuário com JavaScript e jQuery](https://reader035.vdocuments.net/reader035/viewer/2022062419/55726bd6d8b42a92608b47d7/html5/thumbnails/30.jpg)
JavaScript e jQuery
Plugins http://plugins.jquery.com/http://jqueryui.com/http://flowplayer.org/tools/demos/index.html
![Page 31: Melhorando a Experiência do Usuário com JavaScript e jQuery](https://reader035.vdocuments.net/reader035/viewer/2022062419/55726bd6d8b42a92608b47d7/html5/thumbnails/31.jpg)
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/