Aprender Javascript e jQuery (UFCD

801 visualizações

Publicada em

0 comentários
2 gostaram
Estatísticas
Notas
  • Seja o primeiro a comentar

Sem downloads
Visualizações
Visualizações totais
801
No SlideShare
0
A partir de incorporações
0
Número de incorporações
3
Ações
Compartilhamentos
0
Downloads
80
Comentários
0
Gostaram
2
Incorporações 0
Nenhuma incorporação

Nenhuma nota no slide

Aprender Javascript e jQuery (UFCD

  1. 1. PROFISSIONAL EM WEBDESIGN b Javascript Qualquer coisa: eu@afonsogomes.com Dúvidas? Pergunte. Agora! PROFISSIONAL EM WEBDESIGN
  2. 2. Qualquer coisa: eu@afonsogomes.com Dúvidas? Pergunte. Agora! PROFISSIONAL EM WEBDESIGN b Javascript 0158 - Javascript 2 JS
  3. 3. Qualquer coisa: eu@afonsogomes.com Dúvidas? Pergunte. Agora! PROFISSIONAL EM WEBDESIGN b Javascript 3 O QUE É O JAVASCRIPT Antes de mais é e não . Java é uma batalha diferente! Javascript é uma linguagem de programação utilizada para conferir funcionalidades a páginas de um site. O seu modus operandi é, na sua essência, deixar que o DOM carregue e depois actuar sobre os elementos. São usadas bibliotecas de funções (ex: jQuery e/ou MooTools) para extender e acrescentar potencialidades. JAVASCRIPT JAVA
  4. 4. Qualquer coisa: eu@afonsogomes.com Dúvidas? Pergunte. Agora! PROFISSIONAL EM WEBDESIGN b Javascript 4 COMO UTILIZAR JAVASCRIPT Para testes rápidos podemos por código Javascript no próprio HTML dentro de tags <script> inseridas no mas recomenda-se a sua colocação antes do . <head> </body> aJS <script> </script> window.onload = function () { alert(’’Isto é uma mensagem de aviso’’); console.log(’’Registo na consola’’); } Exemplo em: http://cesae.afonsogomes.com/javascripts1.html
  5. 5. Qualquer coisa: eu@afonsogomes.com Dúvidas? Pergunte. Agora! PROFISSIONAL EM WEBDESIGN b Javascript 5 COMO UTILIZAR JAVASCRIPT Idealmente temos todo o código javascript dentro de ficheiros com extensão e todos eles, chamados.js antes do . Também, idealmente, dentro de um só ficheiro para diminuir os HTTP Requests que uma página provoca. </body> . aJS .... .... <script ></script> <script ></script> <script ></script> </body> src=’’js/jquery-1.10.2-min.js’’ src=’’js/os-meus-scripts.js’’ src=’’js/googleanalytics.js’’
  6. 6. Qualquer coisa: eu@afonsogomes.com Dúvidas? Pergunte. Agora! PROFISSIONAL EM WEBDESIGN b Javascript 6 O primeiro programa em Javascript Introduzam o seguinte código num novo documento HTML. aJS <script> </script> function helloWorld() { alert('Hello World!'); } helloWorld();
  7. 7. Qualquer coisa: eu@afonsogomes.com Dúvidas? Pergunte. Agora! PROFISSIONAL EM WEBDESIGN b Javascript Variáveis e tipos de dados Variáveis é um espaço onde se armazena informação enquanto o código é executado Usadas para armazenar informação e mais tarde ir busca-la As variáveis podem ser de difernetes tipos: numeros, strings, datas, vectores, objectos, etc. Javascript é uma linguagem implícita e por isso não precisamos de declarar de que tipo são as nossas variáveis 7
  8. 8. Qualquer coisa: eu@afonsogomes.com Dúvidas? Pergunte. Agora! PROFISSIONAL EM WEBDESIGN b Javascript 8 Declarar variáveis Para declarar uma variável usamos a palavra ‘var’ antes. Podemos declarar multiplas variáveis numa só declaração: . E podemos também atribuir valores iniciais: aJS var NomedaVariavel; aJS var largura = 100, mensagem = ‘’Olá’’; aJS var nome, endereco;
  9. 9. Qualquer coisa: eu@afonsogomes.com Dúvidas? Pergunte. Agora! PROFISSIONAL EM WEBDESIGN b Javascript 9 Âmbito das variáveis O âmbito da variável define onde ela pode ser usada (aonde está confinada) aJS <script> </script> var x= ;10 A variável y só é conhecida dentro da função ‘fazAlgo’: aJS <script> </script> function var fazAlgo() { y= ; } alert(y); 99 // Uncaught Reference Error: y is not defined
  10. 10. Qualquer coisa: eu@afonsogomes.com Dúvidas? Pergunte. Agora! PROFISSIONAL EM WEBDESIGN b Javascript 10 Tipos de variáveis aJS var var var var function var var new var nome = ; pi = ; ano = ; dizOla = () { alert( ); } numeros = [1, 2, 3, 4]; animais = Array( , , ); pessoa = { nome = , idade = , titulo = , } ‘Felismino’ 3.14 2013 ‘Olá Mundo’ ‘Cão’ ‘Gato’ ‘Piriquito’ ‘Felismino’ ‘31’ ’O Maior’ /* string */ /* float */ /* inteiro */ /* booleano */ /* vector */ /* vector */ /* objecto*/
  11. 11. Qualquer coisa: eu@afonsogomes.com Dúvidas? Pergunte. Agora! PROFISSIONAL EM WEBDESIGN b Javascript Quanto aos vectores Um vector é usado para armazenar multiplos vatores numa só variável. A um vector podemos adicionar e remover valores consoante a nossa necessidade. Um vector pode também alojar diferentes tipos de valores Exemplos de declaração de vectores e a sua inicialização: aJS var new var new var var var new vector1 = Array(1, 2, 3); vector2 = Array(); vector3 = [ ]; vector4 = [1, 2, 3, 4]; vector5 = Array( , , , );‘Cão’ ‘Gato’ ‘Piriquito’ ‘Girafa’ 11
  12. 12. Qualquer coisa: eu@afonsogomes.com Dúvidas? Pergunte. Agora! PROFISSIONAL EM WEBDESIGN b Javascript Vectores Um vector pode ser acedido através de um index onde o primeiro elemento é o index zero. Também podemos adicionar elementos ao vector, neste exemplo vamos adicionar o valor Zebra como 5º elemento (index 4) animais = Array( , , , ); primeiroelemento = animais[0]; alert(primeiroelemento); var new var ‘Cão’ ‘Gato’ ‘Piriquito’ ‘Girafa’ aJS animais[4] = ; alert(animais.join(’ | ’)); ‘Zebra’ aJS 12
  13. 13. Qualquer coisa: eu@afonsogomes.com Dúvidas? Pergunte. Agora! PROFISSIONAL EM WEBDESIGN b Javascript Vectores Para sabermos o tamanho do vector usamos a propriedade . E também podemos adicionar elementos com o . lenght push aJS var new var animais = Array( , , , ); contaanimais = animais.length; alert(contaanimais); animais.push( ); alert(animais.length); ‘Cão’ ‘Gato’ ‘Piriquito’ ‘Girafa’ ‘Falcão’ aJS for var( i = 0; i < animais.length; i++) { alert(animais[i]); } Podemos, também, usar um ciclo para vermos todos os animais do vector. Exemplo em: http://cesae.afonsogomes.com/javascripts2.html 13
  14. 14. Qualquer coisa: eu@afonsogomes.com Dúvidas? Pergunte. Agora! PROFISSIONAL EM WEBDESIGN b Javascript 14 Operadores aJS <script> </script> var var var var var var x= , y= ; adicao = x + y; subtracao = x - y; multiplicacao = x * y; divisao = x / y; resto = x % y; 10 20 Do PHP para o Javascript a coisa pouco muda :)
  15. 15. Qualquer coisa: eu@afonsogomes.com Dúvidas? Pergunte. Agora! PROFISSIONAL EM WEBDESIGN b Javascript EXEMPLO NOME RESULTADO a == b Igual Verdade se a igual a b a != b Diferente Verdade se a diferente de b a < b Menor Verdade se a menor que b a > b Maior Verdade se a mairo que b a <= b Menor/Igual Verdade se a menor ou igual a b a >= b Maior/Igual Verdade se a maior ou igual a b a && b E Verdade se a verdade e b verdade a || b Ou Verdade se a verdade ou b verdade !a Negação Verdade se a é falso Operadores e comparações booleanas 15
  16. 16. Qualquer coisa: eu@afonsogomes.com Dúvidas? Pergunte. Agora! PROFISSIONAL EM WEBDESIGN b Javascript 16 Estruturas de controlo: IF aJS <script> </script> if if else ( ){ } ( ){ } { } condição condição // Código // Código // Código
  17. 17. Qualquer coisa: eu@afonsogomes.com Dúvidas? Pergunte. Agora! PROFISSIONAL EM WEBDESIGN b JavascriptaJS var var var if if num1 = 10; num2 = 20; num3 = prompt("Introduza um número: "); (num3 > num2){ alert( ); } (num1 != num2){ alert( ); } ’num1 é maior’ ’num1 diferente de num2’ 17 Estruturas de controlo: IF (exemplo 1) O gera uma caixa tipo a de alert, mas pede o input do utilizador. É bonita para ensinar javascript, mas raramente vista em websites! prompt
  18. 18. Qualquer coisa: eu@afonsogomes.com Dúvidas? Pergunte. Agora! PROFISSIONAL EM WEBDESIGN b JavascriptaJS var if else if else horaactual = ; (horaactual > 6 && horaactual <= 7){ alert( ); } (horaactual > 13 && horaactual <= 14){ alert( ); } { alert( ); } 8 ’Acorda!’ ’Hora do almoço!’ ’Tempo livre!’ 18 Estruturas de controlo: IF (exemplo 2)
  19. 19. Qualquer coisa: eu@afonsogomes.com Dúvidas? Pergunte. Agora! PROFISSIONAL EM WEBDESIGN b JavascriptaJS var if if var if cao = , idade = 2; (cao == && idade == 2){ alert( + cao + + idade + ); } (idade == 0 || idade == 1){ alert(cao + ); } velho = idade > 10; (!velho){ alert(cao + ); } ’Johnny’ ’Johnny’ ’O ’ ’ tem ’ ’ anos!’ ’ ainda é um cachorro!’ ’ ainda é um cachorro!!!!’ 19 Estruturas de controlo: IF (exemplo 3) Exemplo em: http://cesae.afonsogomes.com/javascripts3.html
  20. 20. Qualquer coisa: eu@afonsogomes.com Dúvidas? Pergunte. Agora! PROFISSIONAL EM WEBDESIGN b JavascriptaJS var a = prompt(’’Escolha um número de 1 a 5’’); switch(a) { case ‘1’: alert(’Caso 1’); break; case ‘2’: alert(’Caso 2’); break; default: alert(’Caso por defeito.’); break; }; 20 Estruturas de controlo: SWITCH Exemplo em: http://cesae.afonsogomes.com/javascripts7.html
  21. 21. Qualquer coisa: eu@afonsogomes.com Dúvidas? Pergunte. Agora! PROFISSIONAL EM WEBDESIGN b Javascript A libraria de funções (classe) Math A classe Math contém muitos métodos frequentemente úteis: devolve o valor absoluto de um número decimal devolve o número com o maior valor devolve o número com o menor valor devolve a potência y de um número x devolve a raiz quadrada de x arredonda por defeito (para baixo) gera um número aleatório entre 0 e 1 Math.abs(x) Math.max(x1, x2) Math.min(x1, x2) Math.pow(x, y) Math.sqrt(x) Math.floor(x) Math.random() 21 Exemplo em: http://cesae.afonsogomes.com/javascripts4.html
  22. 22. Qualquer coisa: eu@afonsogomes.com Dúvidas? Pergunte. Agora! PROFISSIONAL EM WEBDESIGN b Javascript O ciclo FOR aJS for var( i = 0; i < 10; i++) { document.write( + i + ); } ’Esta é a iteração: ‘ ’<br>’ EXEMPLO aJS SINTAXE for ( ; ; ) { } <inicial> <condição> <update> // Código a executar durante o for aqui Um ciclo FOR executa um bloco de código um numero determinado de vezes. 22 E um exemplo:
  23. 23. Qualquer coisa: eu@afonsogomes.com Dúvidas? Pergunte. Agora! PROFISSIONAL EM WEBDESIGN b Javascript O ciclo WHILE Um ciclo WHILE executa um bloco de código enquanto uma determinada condição for verdade aJS SINTAXE while ( ) { } condição // Código a executar aJS var while conta = 0; (conta < 10) { document.write( + conta + ); conta++; } ’Valor conta: ‘ ’<br>’ EXEMPLO 23
  24. 24. Qualquer coisa: eu@afonsogomes.com Dúvidas? Pergunte. Agora! PROFISSIONAL EM WEBDESIGN b Javascript Funções Uma função é um bloco de código que será executado quando for chamado. Ambos os exemplos seguintes são exactamente os mesmos. aJS function var function clicaAqui() { alert( ); } clicaAqui = () { alert( ); } clicaAqui(); ’Clicou!’ ’Clicou!’ 24
  25. 25. Qualquer coisa: eu@afonsogomes.com Dúvidas? Pergunte. Agora! PROFISSIONAL EM WEBDESIGN b Javascript Funções Funções podem ter parâmetros de entrada e retornar valores com a palavra chave .return aJS function return var multiplica(x, y) { x * y; } seis = multiplica(2, 3); alert(seis); alert(multiplica(5, multiplica(5, 5))); 25
  26. 26. Qualquer coisa: eu@afonsogomes.com Dúvidas? Pergunte. Agora! PROFISSIONAL EM WEBDESIGN b Javascript Manipulação do DOM Vimos a estrutura básica do DOM nas sessões em que demos CSS. No javascript também podemos atingir determinados elementos do DOM. Assim como criar novos elementos!! aJS var var botao = document.createElement("BUTTON"); texto = document.createTextNode("Clica aqui!"); botao.appendChild(texto); document.body.appendChild(botao); 26 Exemplo em: http://cesae.afonsogomes.com/javascripts5.html
  27. 27. Qualquer coisa: eu@afonsogomes.com Dúvidas? Pergunte. Agora! PROFISSIONAL EM WEBDESIGN b Javascript Manipulação do DOM Também podemos atingir um determinado , ou um elemento com umo determinado ou uma determinada !! Com estas tarefas de manipulação de DOM são mais fáceis, por isso deixamos isto para mais tarde. elemento ID class jQuery 27
  28. 28. Qualquer coisa: eu@afonsogomes.com Dúvidas? Pergunte. Agora! PROFISSIONAL EM WEBDESIGN b Javascript Caixa CONFIRM Vimos anteriormente como gerar um ALERT e um PROMPT. O CONFIRM fornece uma opção ao utilizador do site. 28 aJS var a = confirm("Deseja ir para o Google ?") if (a == true){ alert("Disse que sim. A envia-lo para o Google"); window.open("http://google.pt", "_parent"); } else { alert("Escolheu cancelar!"); } Exemplo em: http://cesae.afonsogomes.com/javascripts6.html
  29. 29. Qualquer coisa: eu@afonsogomes.com Dúvidas? Pergunte. Agora! PROFISSIONAL EM WEBDESIGN b Javascript 29
  30. 30. Qualquer coisa: eu@afonsogomes.com Dúvidas? Pergunte. Agora! PROFISSIONAL EM WEBDESIGN b Javascript 30 O que é e porquê usar o jQuery ? - Biblioteca de funções de javascript - Simples e conciso de usar - Simplica as interações entre HTML e Javascript - Levezinho: +/- 19KB de tamanho (Minificado e zipado) - Usa regras válidas (compliant) CSS 1-3 - Cross Browser (IE 6+, FF 2+, Safari 3+, Opera 9+ e Chrome) - Open Source, comunidade de utilizadores muito activa, imensos plugins (grátis ou pagos), montes de tutoriais e livros na internet
  31. 31. Qualquer coisa: eu@afonsogomes.com Dúvidas? Pergunte. Agora! PROFISSIONAL EM WEBDESIGN b Javascript 31 Exemplo de manipulação de AJAX e DOM •if (!document.ELEMENT_NODE) { document.ELEMENT_NODE = 1; document.ATTRIBUTE_NODE = 2; document.TEXT_NODE = 3; document.CDATA_SECTION_NODE = 4; document.ENTITY_REFERENCE_NODE = 5; document.ENTITY_NODE = 6; document.PROCESSING_INSTRUCTION_NODE = 7; document.COMMENT_NODE = 8; document.DOCUMENT_NODE = 9; document.DOCUMENT_TYPE_NODE = 10; document.DOCUMENT_FRAGMENT_NODE = 11; document.NOTATION_NODE = 12; } document._importNode = function(node, allChildren) { switch (node.nodeType) { case document.ELEMENT_NODE: var newNode = document.createElement(node » .nodeName); if (node.attributes && node.attributes » .length > 0) for (var i = 0; il = node.attributes.length; » i < il) newNode.setAttribute(node.attributes » .nodeName, node.getAttribute(node.attributes[i++] » .nodeName)); if (allChildren && node.childNodes && » node.childNodes.length > 0) for (var i = 0; il = node.childNodes.length; » i<il) newNode.appendChild(document._importNode » (node.childNodes[i++], allChildren)); return newNode; break; case document.TEXT_NODE: case document.CDATA_SECTION_NODE: case document.COMMENT_NODE: return document.createTextNode(node.nodeValue); break; } }; Fonte: http://alistapart.com/article/crossbrowserscripting
  32. 32. Qualquer coisa: eu@afonsogomes.com Dúvidas? Pergunte. Agora! PROFISSIONAL EM WEBDESIGN b Javascript 32 Em jQuery: É apenas uma linha de código! $(’’#conteudo’’).load(’’page.html #conteudo’’);
  33. 33. Qualquer coisa: eu@afonsogomes.com Dúvidas? Pergunte. Agora! PROFISSIONAL EM WEBDESIGN b Javascript 33 Quem usa jQuery:
  34. 34. Qualquer coisa: eu@afonsogomes.com Dúvidas? Pergunte. Agora! PROFISSIONAL EM WEBDESIGN b Javascript 34 Comparação jQuery com outras librarias de javascript http://www.google.com/trends/explore#q=jQuery,prototype,yui,dojo,mootools
  35. 35. Qualquer coisa: eu@afonsogomes.com Dúvidas? Pergunte. Agora! PROFISSIONAL EM WEBDESIGN b Javascript 35 Como usar o jQuery Podemos fazer o download ( Ou então podemos usar um CDN (Google, jQuery.com ou outro) http://jquery.com/download/) e servir uma versão armazenada no nosso site: aHTML <script ></script>src=’’js/jquery-x.x.js’’ aHTML <script > </script> src=’’http//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js’’
  36. 36. Qualquer coisa: eu@afonsogomes.com Dúvidas? Pergunte. Agora! PROFISSIONAL EM WEBDESIGN b Javascript 36 Como usar o jQuery Depois de termos embebido o jQuery na nossa página, podemos começar a escrever código usando a nomenclatura jQuery. aJS <script ></script> <script> </script> src=’’js/jquery-1.10.2.js’’ $(document).ready( function () { }); // O nosso código aqui!
  37. 37. Qualquer coisa: eu@afonsogomes.com Dúvidas? Pergunte. Agora! PROFISSIONAL EM WEBDESIGN b Javascript 37 A filosofia do jQuery Procurar um elemento qualquer e fazer-lhe qualquer coisa! aJS <script src=’’js/jquery-1.10.2.js’’></script> <script> $(document).ready( function () { ; }); </script> $(“div”).addClass(“xyz”) Procurar um elemento qualquer e fazer-lhe qualquer coisa!
  38. 38. Qualquer coisa: eu@afonsogomes.com Dúvidas? Pergunte. Agora! PROFISSIONAL EM WEBDESIGN b Javascript 38 Exemplo básico Vamos ver um exemplo: aJS <body> <div> <p>Um parágrafo</p> <p class=’’especial’’>Outro parágrafo</p> </div> <p>Ainda outro parágrafo</p> </body>
  39. 39. Qualquer coisa: eu@afonsogomes.com Dúvidas? Pergunte. Agora! PROFISSIONAL EM WEBDESIGN b Javascript 39 Exemplo básico Adicionar uma class com o nome teste a todos os parágrafos de uma página aJS <body> <div> <p >Um parágrafo</p> <p class=’’especial ’’>Outro parágrafo</p> </div> <p >Ainda outro parágrafo</p> </body> class=’’teste’’ teste class=’’teste’’ Código jQuery usado: $(’’p’’).addClass(’’teste’’);
  40. 40. Qualquer coisa: eu@afonsogomes.com Dúvidas? Pergunte. Agora! PROFISSIONAL EM WEBDESIGN b Javascript 40 Usando selectores em jQuery Podemos usar qualquer tipo de selectores ... tal e qual no CSS !!! aJS Seleccionar o elemento: $(’’h1’’) Seleccionar um ID: Seleccionar uma classe: E até fazer combinações: $(’’#elementocomid’’) $(’’.laranja’’) $(’’footer ul.menu li’’) aCSS { : ; } { : ; } { : ; } h1 #elementocomid .laranja color color color blue blue orange
  41. 41. Qualquer coisa: eu@afonsogomes.com Dúvidas? Pergunte. Agora! PROFISSIONAL EM WEBDESIGN b Javascript 41 Exemplo básico de selectores em jQuery aHTML <header> <div id=“logo”>O Logo</div> <ul class=“menu”> <li>Opção 1</li> <li>Opção 2</li> </ul> </header> Para já vamos só ver como seleccionar as coisas sem executar nenhuma acção sobre elas...
  42. 42. Qualquer coisa: eu@afonsogomes.com Dúvidas? Pergunte. Agora! PROFISSIONAL EM WEBDESIGN b Javascript 42 Exemplo básico de selectores em jQuery <header> <div id=“logo”>O Logo</div> <ul class=“menu”> <li>Opção 1</li> <li>Opção 2</li> </ul> </header> $(’’header’’) aHTML
  43. 43. Qualquer coisa: eu@afonsogomes.com Dúvidas? Pergunte. Agora! PROFISSIONAL EM WEBDESIGN b Javascript 43 Exemplo básico de selectores em jQuery <header> <ul class=“menu”> <li>Opção 1</li> <li>Opção 2</li> </ul> </header> <div id=“logo”>O Logo</div> $(’’#logo’’) aHTML
  44. 44. Qualquer coisa: eu@afonsogomes.com Dúvidas? Pergunte. Agora! PROFISSIONAL EM WEBDESIGN b Javascript 44 Exemplo básico de selectores em jQuery <header> <div id=“logo”>O Logo</div> </header> <ul class=“menu”> <li>Opção 1</li> <li>Opção 2</li> </ul> $(’’ul.menu’’) aHTML
  45. 45. Qualquer coisa: eu@afonsogomes.com Dúvidas? Pergunte. Agora! PROFISSIONAL EM WEBDESIGN b Javascript 45 Exemplo básico de selectores em jQuery <header> <div id=“logo”>O Logo</div> <ul class=“menu”> </ul> </header> <li>Opção 1</li> <li>Opção 2</li> $(’’ul.menu li’’) aHTML
  46. 46. Qualquer coisa: eu@afonsogomes.com Dúvidas? Pergunte. Agora! PROFISSIONAL EM WEBDESIGN b Javascript 46 Usar filtros para seleção O jQuery possúi também filtros que, muitas vezes, revelam-se úteis. :first , :last , :even , :odd , entre outros ... :empty , :contains(texto) , :has(selector) , ... [atributo], [atributo=valor], [ ], ... . Filtros básicos: Filtros de conteúdos: Filtros de atributos: Filtros de forms: atributo!=valor :input, :text, :submit, :password , :enabled , :checked , ...
  47. 47. Qualquer coisa: eu@afonsogomes.com Dúvidas? Pergunte. Agora! PROFISSIONAL EM WEBDESIGN b Javascript 47 Exemplos de filtros Imaginemos esta tabela com o id #estudantes Nome Turma Idade Observação Felismino C 21 Bom Felizardo A 22 Bom Felisberto B 21 Fulano B 20 Fulaninho D 19 Satisfaz
  48. 48. Qualquer coisa: eu@afonsogomes.com Dúvidas? Pergunte. Agora! PROFISSIONAL EM WEBDESIGN b Javascript 48 Exemplos de filtros Para dar cores de fundo a esta tabela em tipo zebra: $(’’#estudantes tr:even’’).css(’’background-color’’, ‘’#DDDDEE’’); Nome Turma Idade Observação Felismino C 21 Bom Felizardo A 22 Bom Felisberto B 21 Fulano B 20 Fulaninho D 19 Satisfaz
  49. 49. Qualquer coisa: eu@afonsogomes.com Dúvidas? Pergunte. Agora! PROFISSIONAL EM WEBDESIGN b Javascript 49 Exemplos de filtros $(’’#estudantes tr:even’’).css(’’background-color’’, ‘’#DDDDEE’’); $(’’#estudantes td.observacao:empty’’).text(’’Sem comentário’’); Nome Turma Idade Observação Felismino C 21 Bom Felizardo A 22 Bom Felisberto B 21 Sem comentario Fulano B 20 Sem comentario Fulaninho D 19 Satisfaz
  50. 50. Qualquer coisa: eu@afonsogomes.com Dúvidas? Pergunte. Agora! PROFISSIONAL EM WEBDESIGN b Javascript 50 Exemplos de filtros $(’’#estudantes tr:even’’).css(’’background-color’’, ‘’#DDDDEE’’); $(’’#estudantes td.observacao:empty’’).text(’’Sem comentário’’); $(’’#estudantes td[align=’center’]’’).addClass(’’textovermelho’’); Nome Turma Idade Observação Felismino C 21 Bom Felizardo A 22 Bom Felisberto B 21 Sem comentario Fulano B 20 Sem comentario Fulaninho D 19 Satisfaz
  51. 51. Qualquer coisa: eu@afonsogomes.com Dúvidas? Pergunte. Agora! PROFISSIONAL EM WEBDESIGN b Javascript 51 Exemplos de selectores de forms .click(function(event){ ... }); .val(’’Não pode mudar-me!’’); $(’’:submit) $(’’input:disabled’’) $(’’#formcontacto input:checked’’).addClass(’’selecionado’’);
  52. 52. Qualquer coisa: eu@afonsogomes.com Dúvidas? Pergunte. Agora! PROFISSIONAL EM WEBDESIGN b Javascript 52 Métodos jQuery (acções) Agora que sabemos seleccionar elementos vamos fazer alguma coisa! before() , after() , append() , appendTo() , ... css() , addClass() , removeClass() , attr() , html() , val () , ... click() , bind() , unbind() , live() , ... Manipulação do DOM: Atributos: Eventos: Efeitos: AJAX: hide() , show() , fadeOut() , toggle() , animate() , ... load() , get() , post() , ajax() , ...
  53. 53. Qualquer coisa: eu@afonsogomes.com Dúvidas? Pergunte. Agora! PROFISSIONAL EM WEBDESIGN b Javascript Métodos jQuery 53 Nesta explicação usaremos, outra vez, este pequeno bloco de HTML O código necessário aqui: http://cesae.afonsogomes.com/jquery.html aHTML <header> <h1>O cabeçalho</h1> </header> <p>Um parágrafo</p> <p>Outro parágrafo</p> <div id=’’conteudos’’></div> <p>E outro parágrafo</p>
  54. 54. Qualquer coisa: eu@afonsogomes.com Dúvidas? Pergunte. Agora! PROFISSIONAL EM WEBDESIGN b Javascript 54 Métodos jQuery Para mover todos os parágrafos para dentro da div com id conteudos Seleccionar todos os parágrafos: $(’’p’’) aHTML <header> <h1>O cabeçalho</h1> </header> <div id=’’conteudos’’></div> <p>Um parágrafo</p> <p>Outro parágrafo</p> <p>E outro parágrafo</p>
  55. 55. Qualquer coisa: eu@afonsogomes.com Dúvidas? Pergunte. Agora! PROFISSIONAL EM WEBDESIGN b Javascript 55 Métodos jQuery Mover todos os parágrafos para dentro da div com id conteudos $(’’p’’).appendTo(’’#conteudos’’); aHTML <header> <h1>O cabeçalho</h1> </header> <div id=’’conteudos’’> <p>Um parágrafo</p> <p>Outro parágrafo</p> <p>E outro parágrafo</p> </div>
  56. 56. Qualquer coisa: eu@afonsogomes.com Dúvidas? Pergunte. Agora! PROFISSIONAL EM WEBDESIGN b Javascript 56 Métodos jQuery Acrescentar coisas ao cabeçalho h1: $(’’h1’’).append(’’ magnífico!’’); aHTML <header> <div id=’’conteudos’’> <p>Um parágrafo</p> <p>Outro parágrafo</p> <p>E outro parágrafo</p> </div> </header> <h1>O cabeçalho magnífico!</h1>
  57. 57. Qualquer coisa: eu@afonsogomes.com Dúvidas? Pergunte. Agora! PROFISSIONAL EM WEBDESIGN b Javascript 57 Métodos jQuery A este ponto, devem ter algo parecido com isto no vosso ficheiro: aJS <script> </script> $(document).ready( function () { }); $(’’p’’).appendTo(’’#conteudos’’); $(’’h1’’).append(’’ magnífico!’’); Vamos continuar ...
  58. 58. Qualquer coisa: eu@afonsogomes.com Dúvidas? Pergunte. Agora! PROFISSIONAL EM WEBDESIGN b Javascript 58 Métodos jQuery Pôr o último parágrafo com a cor vermelha $(’’#conteudos p:last’’).css(’’color’’, ‘’red’’); aHTML <header> <h1>O cabeçalho magnífico!</h1> <div id=’’conteudos’’> <p>Um parágrafo</p> <p>Outro parágrafo</p> </div> </header> <p style=’’color:red’’>E outro parágrafo</p>
  59. 59. Qualquer coisa: eu@afonsogomes.com Dúvidas? Pergunte. Agora! PROFISSIONAL EM WEBDESIGN b Javascript 59 Métodos jQuery Acrescentar uma class ao <header> $(’’header’’).addClass(’’headertopo’’); aHTML <header class=’’headertopo’’> <h1>O cabeçalho magnífico!</h1> <div id=’’conteudos’’> <p>Um parágrafo</p> <p>Outro parágrafo</p> <p style=’’color:red’’>E outro parágrafo</p> </div> </header>
  60. 60. Qualquer coisa: eu@afonsogomes.com Dúvidas? Pergunte. Agora! PROFISSIONAL EM WEBDESIGN b Javascript 60 Métodos jQuery ... ainda mais exemplos Para definição: $(’’img.logo’’).attr(’’width’’, ‘’200px’’); $(’’p.copyright’’).html(’’<span>&copy 2013 Felisberto</span>’’); $(’’input#nome’’).val(’’Felismino’’); Para leitura: var larguralogo = $(’’img.logo’’).attr(’’width’’); var copyright = $(’’p.copyright’’).html(); var nomeuser = $(’’input#nome’’).val();
  61. 61. Qualquer coisa: eu@afonsogomes.com Dúvidas? Pergunte. Agora! PROFISSIONAL EM WEBDESIGN b Javascript 61 Encadear métodos (chaining) Uma particularidade (boa) do jQuery é que podemos encadear acções. Isto é, aplicar várias acções ao mesmo selector. $(“#deleted”).addClass(“red”).fadeOut(“slow”); $(“:button”).val(’’Clica aqui’’).addClass(“foco”).removeClass(“desligado”); . Caso eu tenha esquecido: Dúvidas com jQuery o melhor sítio para aprender é ehttp://learn.jquery.com http://api.jquery.com
  62. 62. Qualquer coisa: eu@afonsogomes.com Dúvidas? Pergunte. Agora! PROFISSIONAL EM WEBDESIGN b Javascript 62 Exemplo de eventos em jQuery Agora vamos ver exemplos de EVENTOS... aJS $(document).ready( function () { $(o-selector).nomedoEvento(function(){ .... }); }); Vamos continuar a trabalhar no ficheiro que estão a editar de momento http://cesae.afonsogomes.com/jquery.html
  63. 63. Qualquer coisa: eu@afonsogomes.com Dúvidas? Pergunte. Agora! PROFISSIONAL EM WEBDESIGN b Javascript 63 Exemplo de eventos em jQuery Vamos acrescentar isto ao nosso document ready: aJS $(document).ready( function () { }); $(’’#mensagem’’).click(function(){ $(this).css(’color’,’blue’); }); aHTML <span id=’’mensagem’’>Lorem ipsum dolor sit amet</span>
  64. 64. Qualquer coisa: eu@afonsogomes.com Dúvidas? Pergunte. Agora! PROFISSIONAL EM WEBDESIGN b Javascript 64 Exemplo de eventos em jQuery Também podemos disparar o evento manualmente! aJS $(document).ready( function () { }); $(’’#mensagem’’).click(function(){ $(this).css(’color’,’blue’); }); $(’’#mensagem’’).click(); aHTML <span id=’’mensagem’’>Lorem ipsum dolor sit amet</span>
  65. 65. Qualquer coisa: eu@afonsogomes.com Dúvidas? Pergunte. Agora! PROFISSIONAL EM WEBDESIGN b Javascript 65 Exemplo de eventos em jQuery Quando .mostracap for clicado o #cap1 desliza para cima ou baixo. aJS $(document).ready( function () { }); $(’’a.mostracap1’’).click(function(){ $(’’#cap1’’).slideToggle(’’slow’’); }); aHTML <p><a class="mostracap1">Ler capítulo 1</a></p> <div id="cap1"> ... </div>
  66. 66. Qualquer coisa: eu@afonsogomes.com Dúvidas? Pergunte. Agora! PROFISSIONAL EM WEBDESIGN b Javascript Exemplo de eventos em jQuery 66 Também podemos fazer as animações ao nosso gosto ... aJS $(document).ready( function () { }); $(’’.clicaaqui’’).click(function(){ $(’’#adiv’’).animate({ }, ); }); width: ‘’960px’’, opacity: 0.7, fontSize: ‘’2em’’ 2000 aHTML <p><a class="clicaaqui">Clica aqui para um animação!</a></p> <div id="adiv"><p>Olá!</p></div>
  67. 67. Qualquer coisa: eu@afonsogomes.com Dúvidas? Pergunte. Agora! PROFISSIONAL EM WEBDESIGN b Javascript 67 Outro exemplo de eventos em jQuery Um código que se vê frequentemente em websites e muito procurado é o de Smooth Scroll. Aqui está um exemplo de código que poderão gostar: http://cesae.afonsogomes.com/jquery2.html
  68. 68. Qualquer coisa: eu@afonsogomes.com Dúvidas? Pergunte. Agora! PROFISSIONAL EM WEBDESIGN b Javascript 68 Exemplo de AJAX Já vimos antes que temos algumas funções de jQuery para AJAX ( $.load , $.ajax , $.get , $.post , etc...) aJS $(“#coms”).load(“comentarios.php”); aJS $(“#coms”).load(“comentarios.php”, {max: 5} ); Para carregar conteúdos de uma página para uma determinada div: Podemos também passar dados com o pedido que fazemos:
  69. 69. Qualquer coisa: eu@afonsogomes.com Dúvidas? Pergunte. Agora! PROFISSIONAL EM WEBDESIGN b Javascript 69 Exemplo de AJAX com o $.post Uma das grandes vantagens do AJAX é com os formulários. Podemos enviar um POST ao nosso ficheiro processador (de 1 formulário por ex), receber a resposta e mostra-la na página... isto sem precisar de sair da página onde estamos para outra. Vamos ao site do amigo Felismino Felisberto para analisar o código! http://cesae.afonsogomes.com/agomes/
  70. 70. Qualquer coisa: eu@afonsogomes.com Dúvidas? Pergunte. Agora! PROFISSIONAL EM WEBDESIGN b Javascript HASTA LA VISTA BABY 70 Nunca esquecer: - Vocês não sabem? O Google conhece muita gente que sabe! - O W3Schools é uma boa fonte de info mas ás vezes ... - Informações de confiança? Procurar nos sites de quem faz a coisa: HTML > W3.org PHP > PHP.net mySQL > mysql.com jQuery > jquery.com - Tenham amigos na mesma área, discutam e conversem sobre as vossas lutas, problemas, dúvidas, desejos, etc! - Pesquisam muito e mantenham-se sempre actuais!
  71. 71. Qualquer coisa: eu@afonsogomes.com Dúvidas? Pergunte. Agora! PROFISSIONAL EM WEBDESIGN b Javascript www.youtube.com/watch?v=ufL85FJAgZQ 71 Até um dia!

×