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

JavaScript e jQuery Melhorando a Experiência do Usuário com JavaScript e jQuery Harlley R. Oliveira http://twitter.com/harlley

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:

Chrome

Firefox 3.1+

Safari 4

Internet Explorer 8

JavaScript e jQuery

Além de páginas HTML

Adobe Air

Google Gears

Extensões para o Google Chrome

Firefox

Criando extensões

Criando comandos para o Ubiquity

Criando scripts para Greasemonkey

Widgets para iGoogle, Open Social , celular e até iPhone .

JavaScript e jQuery

Antes de programar, vamos nos motivar!

Validar formulários e aplicar máscaras

Efeitos especiais :)

Interações

Arrastar e soltar

Selecionar

Redimensionar

Ordenar

Componentes de interface

Accordion e abas

Calendário

Barra de Progresso

Slider

Caixa de diálogo e grids .

JavaScript e jQuery

Mais um pouco de motivação

M apas

Carousel

Lightbox

Aplicações complexas

Se achou pouco, aqui e aqui tem mais.

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

Agora chegou a melhor hora, programar! Vamos precisar das

seguintes ferramentas:

Firefox

Extensão Firebug

Extensão Web Developer

Bloco de notas

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.

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

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.

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

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>' ); });

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>

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="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' );

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