Your SlideShare is downloading. ×
0
JavaScript e JQuery para Webdesigners
JavaScript e JQuery para Webdesigners
JavaScript e JQuery para Webdesigners
JavaScript e JQuery para Webdesigners
JavaScript e JQuery para Webdesigners
JavaScript e JQuery para Webdesigners
JavaScript e JQuery para Webdesigners
JavaScript e JQuery para Webdesigners
JavaScript e JQuery para Webdesigners
JavaScript e JQuery para Webdesigners
JavaScript e JQuery para Webdesigners
JavaScript e JQuery para Webdesigners
JavaScript e JQuery para Webdesigners
JavaScript e JQuery para Webdesigners
JavaScript e JQuery para Webdesigners
JavaScript e JQuery para Webdesigners
JavaScript e JQuery para Webdesigners
JavaScript e JQuery para Webdesigners
JavaScript e JQuery para Webdesigners
JavaScript e JQuery para Webdesigners
JavaScript e JQuery para Webdesigners
JavaScript e JQuery para Webdesigners
JavaScript e JQuery para Webdesigners
JavaScript e JQuery para Webdesigners
JavaScript e JQuery para Webdesigners
JavaScript e JQuery para Webdesigners
JavaScript e JQuery para Webdesigners
JavaScript e JQuery para Webdesigners
JavaScript e JQuery para Webdesigners
JavaScript e JQuery para Webdesigners
JavaScript e JQuery para Webdesigners
JavaScript e JQuery para Webdesigners
JavaScript e JQuery para Webdesigners
JavaScript e JQuery para Webdesigners
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

JavaScript e JQuery para Webdesigners

12,784

Published on

Curso de JavaScript e jQuery que ministrei para os webdesigners do Serpro

Curso de JavaScript e jQuery que ministrei para os webdesigners do Serpro

Published in: Design, Technology
0 Comments
8 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
12,784
On Slideshare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
316
Comments
0
Likes
8
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. JavaScript e jQuery JavaScript e jQuery para Webdesigners Harlley R. Oliveira
  • 2. 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
  • 3. JavaScript e jQuery Além de páginas HTML Adobe Air Google Gears Jaxer Extensões para o Google Chrome Firefox Criando extensões Criando comandos para o Ubiquity Criando scripts para Greasemonkey Widgets para iGoogle, Netvibes, Open Social e até celular.
  • 4. JavaScript e jQuery Antes de programar, vamos nos motivar! Validar formulários e aplcar 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.
  • 5. JavaScript e jQuery Mais um pouco de motivação Mapas Carousel Lightbox Aplicações complexas Se achou pouco, aqui e aqui tem mais.
  • 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. Por isso era mais fácil fazer tudo em Flash.
  • 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-
  • 10. 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 Aqui neste link tem uma apostila de Introdução a Lógica de Programação e neste aqui tem uma introdução usando o 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="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.
  • 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 e usando uma sintaxe bem conhecida por todos, seletores CSS.
  • 22. 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.
  • 23. 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
  • 24. JavaScript e jQuery Pra 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>'); });
  • 25. 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>
  • 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="text"/>'); $('fieldset').append('<input type="text"/>'); $('fieldset').prepend('<input type="text"/>'); $('fieldset').after('<input type="text"/>'); $('fieldset').before('<input type="text"/>'); $('#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'); $('#gravar').click(function(){ $('fieldset').animate({ width: '70%', opacity: 0.4, fontSize: '3em', borderWidth: '10px' }, 1500 ); });
  • 30. JavaScript e jQuery AJAX (Asynchronous Javascript And XML) é o uso metodológico de tecnologias como Javascript e XML, providas por navegadores, para tornar páginas mais interativas com o usuário, utilizando-se de solicitações assíncronas de informações. mais...
  • 31. JavaScript e jQuery Ajax Mais... $('#gravar').click(function(){ $('body').prepend('<img id="loading" src="images/ajax- loader.gif" />'); $.ajax({ url: "http://localhost/jquery/ajax_content.php", cache: false, success: function(html){ $("body").append(html); $('#loading').remove(); } }); });
  • 32. JavaScript e jQuery Plugins http://plugins.jquery.com/ http://jqueryui.com/
  • 33. 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/
  • 34. JavaScript e jQuery Obrigado! harlley@gmail.com http://twitter.com/harlley

×