O documento resume as principais informações sobre JavaScript e jQuery para melhorar a experiência do usuário. Apresenta o que é JavaScript, suas aplicações além de páginas HTML, motiva o uso de efeitos e interações, e introduz conceitos básicos como variáveis, vetores, operadores, estruturas de controle e manipulação do DOM. Em seguida, explica o que é jQuery, como simplifica o JavaScript, e demonstra exemplos de seletores, manipulação e eventos.

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

6. 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 .

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/

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.

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