docPROFISSIONAL EM WEBDESIGN
download 
Denúncia Transcrição
PROFISSIONAL EM WEBDESIGN
PROFISSIONAL EM WEBDESIGN b Javascript PROFISSIONAL EM WEBDESIGN Dúvidas? Pergunte. Agora! Qualquer coisa: [email protected] PROFISSIONAL EM WEBDESIGN b Javascript JS 0158 - Javascript Dúvidas? Pergunte. Agora! Qualquer coisa: [email protected] 2 PROFISSIONAL EM WEBDESIGN b Javascript O QUE É O JAVASCRIPT Antes de mais é JAVASCRIPT e não JAVA. 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. Dúvidas? Pergunte. Agora! Qualquer coisa: [email protected] 3 PROFISSIONAL EM WEBDESIGN b Javascript COMO UTILIZAR JAVASCRIPT Para testes rápidos podemos por código Javascript no próprio HTML dentro de tags <script> inseridas no <head> mas recomenda-se a sua a JS colocação antes do </body>. <script> window.onload = function () { alert(’’Isto é uma mensagem de aviso’’); console.log(’’Registo na consola’’); } </script> Exemplo em: http://cesae.afonsogomes.com/javascripts1.html Dúvidas? Pergunte. Agora! Qualquer coisa: [email protected] 4 PROFISSIONAL EM WEBDESIGN b Javascript COMO UTILIZAR JAVASCRIPT Idealmente temos todo o código javascript dentro de ficheiros com extensão .js e todos eles, chamados antes do </body>. . Também, idealmente, dentro de um só ficheiro para diminuir os a JS HTTP Requests que uma página provoca. .... <script src=’’js/jquery-1.10.2-min.js’’></script> <script src=’’js/os-meus-scripts.js’’></script> <script src=’’js/googleanalytics.js’’></script> .... </body> Dúvidas? Pergunte. Agora! Qualquer coisa: [email protected] 5 PROFISSIONAL EM WEBDESIGN b Javascript O primeiro programa em Javascript a JS Introduzam o seguinte código num novo documento HTML. <script> function helloWorld() { alert('Hello World!'); } helloWorld(); </script> Dúvidas? Pergunte. Agora! Qualquer coisa: [email protected] 6 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 Dúvidas? Pergunte. Agora! Qualquer coisa: [email protected] 7 PROFISSIONAL EM WEBDESIGN b Javascript Declarar variáveis a JS Para declarar uma variável usamos a palavra ‘var’ antes. var NomedaVariavel; a JS Podemos declarar multiplas variáveis numa só declaração: var nome, endereco; . a JS E podemos também atribuir valores iniciais: Dúvidas? Pergunte. Agora! var largura = 100, mensagem = ‘’Olá’’; Qualquer coisa: [email protected] 8 PROFISSIONAL EM WEBDESIGN b Javascript Âmbito das variáveis O âmbito da variável define onde ela pode ser usada (aonde está confinada) a JS <script> var x= 10; </script> a JS A variável y só é conhecida dentro da função ‘fazAlgo’: <script> function fazAlgo() { var y= 99; } alert(y); // Uncaught Reference Error: y is not defined </script> Dúvidas? Pergunte. Agora! Qualquer coisa: [email protected] 9 PROFISSIONAL EM WEBDESIGN b Javascript a JS Tipos de variáveis var nome = ‘Felismino’; /* string */ var pi = 3.14; /* float */ var ano = 2013; /* inteiro */ var dizOla = function () { /* booleano */ alert(‘Olá Mundo’); } var numeros = [1, 2, 3, 4]; /* vector */ var animais = new Array(‘Cão’, ‘Gato’, ‘Piriquito’); /* vector */ var pessoa = { nome = ‘Felismino’, idade = ‘31’, titulo = ’O Maior’, } /* objecto*/ Dúvidas? Pergunte. Agora! Qualquer coisa: [email protected] 10 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 a JS Exemplos de declaração de vectores e a sua inicialização: var var var var var Dúvidas? Pergunte. Agora! vector1 vector2 vector3 vector4 vector5 = = = = = new Array(1, 2, 3); new Array(); [ ]; [1, 2, 3, 4]; new Array(‘Cão’, ‘Gato’, ‘Piriquito’, ‘Girafa’); Qualquer coisa: [email protected] 11 PROFISSIONAL EM WEBDESIGN b Javascript Vectores Um vector pode ser acedido através de um index onde o primeiro elemento a JS é o index zero. var animais = new Array(‘Cão’, ‘Gato’, ‘Piriquito’, ‘Girafa’); var primeiroelemento = animais[0]; alert(primeiroelemento); Também podemos adicionar elementos ao vector, neste exemplo vamos a JS adicionar o valor Zebra como 5º elemento (index 4) Dúvidas? Pergunte. Agora! animais[4] = ‘Zebra’; alert(animais.join(’ | ’)); Qualquer coisa: [email protected] 12 PROFISSIONAL EM WEBDESIGN b Javascript Vectores Para sabermos o tamanho do vector usamos a propriedade lenght. E a JS também podemos adicionar elementos com o push. var animais = new Array(‘Cão’, ‘Gato’, ‘Piriquito’, ‘Girafa’); var contaanimais = animais.length; alert(contaanimais); animais.push(‘Falcão’); alert(animais.length); a JS Podemos, também, usar um ciclo para vermos todos os animais do vector. for( var i = 0; i < animais.length; i++) { alert(animais[i]); } Exemplo em: http://cesae.afonsogomes.com/javascripts2.html Dúvidas? Pergunte. Agora! Qualquer coisa: [email protected] 13 PROFISSIONAL EM WEBDESIGN b Javascript Operadores a JS Do PHP para o Javascript a coisa pouco muda :) <script> var x= 10, y= 20; var adicao = x + y; var subtracao = x - y; var multiplicacao = x * y; var divisao = x / y; var resto = x % y; </script> Dúvidas? Pergunte. Agora! Qualquer coisa: [email protected] 14 PROFISSIONAL EM WEBDESIGN b Javascript Operadores e comparações booleanas 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 Dúvidas? Pergunte. Agora! Qualquer coisa: [email protected] 15 PROFISSIONAL EM WEBDESIGN b Javascript a JS Estruturas de controlo: IF <script> if (condição){ // Código } if (condição){ // Código } else { // Código } </script> Dúvidas? Pergunte. Agora! Qualquer coisa: [email protected] 16 PROFISSIONAL EM WEBDESIGN b Javascript a JS Estruturas de controlo: IF (exemplo 1) var num1 = 10; var num2 = 20; var num3 = prompt("Introduza um número: "); if (num3 > num2){ alert(’num1 é maior’); } if (num1 != num2){ alert(’num1 diferente de num2’); } O prompt gera uma caixa tipo a de alert, mas pede o input do utilizador. É bonita para ensinar javascript, mas raramente vista em websites! Dúvidas? Pergunte. Agora! Qualquer coisa: [email protected] 17 PROFISSIONAL EM WEBDESIGN b Javascript a JS Estruturas de controlo: IF (exemplo 2) var horaactual = 8; if (horaactual > 6 && horaactual <= 7){ alert(’Acorda!’); } else if (horaactual > 13 && horaactual <= 14){ alert(’Hora do almoço!’); } else { alert(’Tempo livre!’); } Dúvidas? Pergunte. Agora! Qualquer coisa: [email protected] 18 PROFISSIONAL EM WEBDESIGN b Javascript var cao = ’Johnny’, idade = 2; a JS Estruturas de controlo: IF (exemplo 3) if (cao == ’Johnny’ && idade == 2){ alert(’O ’ + cao + ’ tem ’ + idade + ’ anos!’); } if (idade == 0 || idade == 1){ alert(cao + ’ ainda é um cachorro!’); } var velho = idade > 10; if (!velho){ alert(cao + ’ ainda é um cachorro!!!!’); } Exemplo em: http://cesae.afonsogomes.com/javascripts3.html Dúvidas? Pergunte. Agora! Qualquer coisa: [email protected] 19 PROFISSIONAL EM WEBDESIGN b Javascript var a = prompt(’’Escolha um número de 1 a 5’’); a JS Estruturas de controlo: SWITCH switch(a) { case ‘1’: alert(’Caso 1’); break; case ‘2’: alert(’Caso 2’); break; default: alert(’Caso por defeito.’); break; }; Exemplo em: http://cesae.afonsogomes.com/javascripts7.html Dúvidas? Pergunte. Agora! Qualquer coisa: [email protected] 20 PROFISSIONAL EM WEBDESIGN b Javascript A libraria de funções (classe) Math A classe Math contém muitos métodos frequentemente úteis: Math.abs(x) devolve o valor absoluto de um número decimal Math.max(x1, x2) devolve o número com o maior valor Math.min(x1, x2) devolve o número com o menor valor Math.pow(x, y) devolve a potência y de um número x Math.sqrt(x) devolve a raiz quadrada de x Math.floor(x) arredonda por defeito (para baixo) Math.random() gera um número aleatório entre 0 e 1 Exemplo em: http://cesae.afonsogomes.com/javascripts4.html Dúvidas? Pergunte. Agora! Qualquer coisa: [email protected] 21 PROFISSIONAL EM WEBDESIGN b Javascript O ciclo FOR for (<inicial>; <condição>; <update>) { // Código a executar durante o for aqui } SINTAXE a JS Um ciclo FOR executa um bloco de código um numero determinado de vezes. Dúvidas? Pergunte. Agora! for (var i = 0; i < 10; i++) { document.write(’Esta é a iteração: ‘ + i + ’<br>’); } Qualquer coisa: [email protected] EXEMPLO a JS E um exemplo: 22 PROFISSIONAL EM WEBDESIGN b Javascript O ciclo WHILE Um ciclo WHILE executa um bloco de código enquanto uma determinada Dúvidas? Pergunte. Agora! var conta = 0; while (conta < 10) { document.write(’Valor conta: ‘ + conta + ’<br>’); conta++; } Qualquer coisa: [email protected] SINTAXE while (condição) { // Código a executar } EXEMPLO a JS a JS condição for verdade 23 PROFISSIONAL EM WEBDESIGN b Javascript Funções Uma função é um bloco de código que será executado quando for chamado. a JS Ambos os exemplos seguintes são exactamente os mesmos. function clicaAqui() { alert(’Clicou!’); } var clicaAqui = function () { alert(’Clicou!’); } clicaAqui(); Dúvidas? Pergunte. Agora! Qualquer coisa: [email protected] 24 PROFISSIONAL EM WEBDESIGN b Javascript Funções Funções podem ter parâmetros de entrada e retornar valores com a a JS palavra chave return. function multiplica(x, y) { return x * y; } var seis = multiplica(2, 3); alert(seis); alert(multiplica(5, multiplica(5, 5))); Dúvidas? Pergunte. Agora! Qualquer coisa: [email protected] 25 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. a JS Assim como criar novos elementos!! var botao = document.createElement("BUTTON"); var texto = document.createTextNode("Clica aqui!"); botao.appendChild(texto); document.body.appendChild(botao); Exemplo em: http://cesae.afonsogomes.com/javascripts5.html Dúvidas? Pergunte. Agora! Qualquer coisa: [email protected] 26 PROFISSIONAL EM WEBDESIGN b Javascript Manipulação do DOM Também podemos atingir um determinado elemento, ou um elemento com umo determinado ID ou uma determinada class !! Com jQuery estas tarefas de manipulação de DOM são mais fáceis, por isso deixamos isto para mais tarde. Dúvidas? Pergunte. Agora! Qualquer coisa: [email protected] 27 PROFISSIONAL EM WEBDESIGN b Javascript Caixa CONFIRM Vimos anteriormente como gerar um ALERT e um PROMPT. O CONFIRM a JS fornece uma opção ao utilizador do site. 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 Dúvidas? Pergunte. Agora! Qualquer coisa: [email protected] 28 PROFISSIONAL EM WEBDESIGN b Javascript Dúvidas? Pergunte. Agora! Qualquer coisa: [email protected] 29 PROFISSIONAL EM WEBDESIGN b Javascript 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 Dúvidas? Pergunte. Agora! Qualquer coisa: [email protected] 30 PROFISSIONAL EM WEBDESIGN b Javascript 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 Dúvidas? Pergunte. Agora! Qualquer coisa: [email protected] 31 PROFISSIONAL EM WEBDESIGN b Javascript Em jQuery: É apenas uma linha de código! $(’’#conteudo’’).load(’’page.html #conteudo’’); Dúvidas? Pergunte. Agora! Qualquer coisa: [email protected] 32 PROFISSIONAL EM WEBDESIGN b Javascript Quem usa jQuery: Dúvidas? Pergunte. Agora! Qualquer coisa: [email protected] 33 PROFISSIONAL EM WEBDESIGN b Javascript Comparação jQuery com outras librarias de javascript http://www.google.com/trends/explore#q=jQuery,prototype,yui,dojo,mootools Dúvidas? Pergunte. Agora! Qualquer coisa: [email protected] 34 PROFISSIONAL EM WEBDESIGN b Javascript Como usar o jQuery Podemos fazer o download (http://jquery.com/download/) e servir uma a HTML versão armazenada no nosso site: <script src=’’js/jquery-x.x.js’’></script> a HTML Ou então podemos usar um CDN (Google, jQuery.com ou outro) <script src=’’http//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js’’> </script> Dúvidas? Pergunte. Agora! Qualquer coisa: [email protected] 35 PROFISSIONAL EM WEBDESIGN b Javascript Como usar o jQuery Depois de termos embebido o jQuery na nossa página, podemos começar a JS a escrever código usando a nomenclatura jQuery. <script src=’’js/jquery-1.10.2.js’’></script> <script> $(document).ready( function () { // O nosso código aqui! }); </script> Dúvidas? Pergunte. Agora! Qualquer coisa: [email protected] 36 PROFISSIONAL EM WEBDESIGN b Javascript A filosofia do jQuery Procurar um elemento qualquer e fazer-lhe qualquer coisa! a JS <script src=’’js/jquery-1.10.2.js’’></script> <script> $(document).ready( function () { $(“div”).addClass(“xyz”); }); </script> Procurar um elemento qualquer e fazer-lhe qualquer coisa! Dúvidas? Pergunte. Agora! Qualquer coisa: [email protected] 37 PROFISSIONAL EM WEBDESIGN b Javascript Exemplo básico a JS Vamos ver um exemplo: <body> <div> <p>Um parágrafo</p> <p class=’’especial’’>Outro parágrafo</p> </div> <p>Ainda outro parágrafo</p> </body> Dúvidas? Pergunte. Agora! Qualquer coisa: [email protected] 38 PROFISSIONAL EM WEBDESIGN b Javascript Exemplo básico a JS Adicionar uma class com o nome teste a todos os parágrafos de uma página <body> <div> <p class=’’teste’’>Um parágrafo</p> <p class=’’especial teste’’>Outro parágrafo</p> </div> <p class=’’teste’’>Ainda outro parágrafo</p> </body> Código jQuery usado: $(’’p’’).addClass(’’teste’’); Dúvidas? Pergunte. Agora! Qualquer coisa: [email protected] 39 PROFISSIONAL EM WEBDESIGN b Javascript Usando selectores em jQuery h1 { color: blue; } #elementocomid { color: blue; } .laranja { color: orange; } Dúvidas? Pergunte. Agora! a JS a CSS Podemos usar qualquer tipo de selectores ... tal e qual no CSS !!! Seleccionar o elemento: $(’’h1’’) Seleccionar um ID: $(’’#elementocomid’’) Seleccionar uma classe: $(’’.laranja’’) E até fazer combinações: $(’’footer ul.menu li’’) Qualquer coisa: [email protected] 40 PROFISSIONAL EM WEBDESIGN b Javascript Exemplo básico de selectores em jQuery Para já vamos só ver como seleccionar as coisas sem executar nenhuma a HTML acção sobre elas... <header> <div id=“logo”>O Logo</div> <ul class=“menu”> <li>Opção 1</li> <li>Opção 2</li> </ul> </header> Dúvidas? Pergunte. Agora! Qualquer coisa: [email protected] 41 PROFISSIONAL EM WEBDESIGN b Javascript Exemplo básico de selectores em jQuery a HTML $(’’header’’) <header> <div id=“logo”>O Logo</div> <ul class=“menu”> <li>Opção 1</li> <li>Opção 2</li> </ul> </header> Dúvidas? Pergunte. Agora! Qualquer coisa: [email protected] 42 PROFISSIONAL EM WEBDESIGN b Javascript Exemplo básico de selectores em jQuery a HTML $(’’#logo’’) <header> <div id=“logo”>O Logo</div> <ul class=“menu”> <li>Opção 1</li> <li>Opção 2</li> </ul> </header> Dúvidas? Pergunte. Agora! Qualquer coisa: [email protected] 43 PROFISSIONAL EM WEBDESIGN b Javascript Exemplo básico de selectores em jQuery a HTML $(’’ul.menu’’) <header> <div id=“logo”>O Logo</div> <ul class=“menu”> <li>Opção 1</li> <li>Opção 2</li> </ul> </header> Dúvidas? Pergunte. Agora! Qualquer coisa: [email protected] 44 PROFISSIONAL EM WEBDESIGN b Javascript Exemplo básico de selectores em jQuery a HTML $(’’ul.menu li’’) <header> <div id=“logo”>O Logo</div> <ul class=“menu”> <li>Opção 1</li> <li>Opção 2</li> </ul> </header> Dúvidas? Pergunte. Agora! Qualquer coisa: [email protected] 45 PROFISSIONAL EM WEBDESIGN b Javascript Usar filtros para seleção O jQuery possúi também filtros que, muitas vezes, revelam-se úteis. . Filtros básicos: :first , :last , :even , :odd , entre outros ... Filtros de conteúdos: :empty , :contains(texto) , :has(selector) , ... Filtros de atributos: [atributo], [atributo=valor], [atributo!=valor], ... Filtros de forms: :input, :text, :submit, :password , :enabled , :checked , ... Dúvidas? Pergunte. Agora! Qualquer coisa: [email protected] 46 PROFISSIONAL EM WEBDESIGN b Javascript 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 Dúvidas? Pergunte. Agora! Qualquer coisa: [email protected] Satisfaz 47 PROFISSIONAL EM WEBDESIGN b Javascript Exemplos de filtros Para dar cores de fundo a esta tabela em tipo zebra: $(’’#estudantes tr:even’’).css(’’background-color’’, ‘’#DDDDEE’’); Turma Idade Felismino C 21 Bom Felizardo A 22 Bom Felisberto B 21 Fulano B 20 Fulaninho D 19 Nome Dúvidas? Pergunte. Agora! Qualquer coisa: [email protected] Observação Satisfaz 48 PROFISSIONAL EM WEBDESIGN b Javascript Exemplos de filtros $(’’#estudantes tr:even’’).css(’’background-color’’, ‘’#DDDDEE’’); $(’’#estudantes td.observacao:empty’’).text(’’Sem comentário’’); Turma Idade Felismino C 21 Bom Felizardo A 22 Bom Felisberto B 21 Sem comentario Fulano B 20 Sem comentario Fulaninho D 19 Satisfaz Nome Dúvidas? Pergunte. Agora! Qualquer coisa: [email protected] Observação 49 PROFISSIONAL EM WEBDESIGN b Javascript Exemplos de filtros $(’’#estudantes tr:even’’).css(’’background-color’’, ‘’#DDDDEE’’); $(’’#estudantes td.observacao:empty’’).text(’’Sem comentário’’); $(’’#estudantes td[align=’center’]’’).addClass(’’textovermelho’’); Turma Idade Felismino C 21 Bom Felizardo A 22 Bom Felisberto B 21 Sem comentario Fulano B 20 Sem comentario Fulaninho D 19 Satisfaz Nome Dúvidas? Pergunte. Agora! Qualquer coisa: [email protected] Observação 50 PROFISSIONAL EM WEBDESIGN b Javascript Exemplos de selectores de forms $(’’:submit).click(function(event){ ... }); $(’’input:disabled’’).val(’’Não pode mudar-me!’’); $(’’#formcontacto input:checked’’).addClass(’’selecionado’’); Dúvidas? Pergunte. Agora! Qualquer coisa: [email protected] 51 PROFISSIONAL EM WEBDESIGN b Javascript Métodos jQuery (acções) Agora que sabemos seleccionar elementos vamos fazer alguma coisa! Manipulação do DOM: before() , after() , append() , appendTo() , ... Atributos: css() , addClass() , removeClass() , attr() , html() , val () , ... Eventos: click() , bind() , unbind() , live() , ... Efeitos: hide() , show() , fadeOut() , toggle() , animate() , ... AJAX: load() , get() , post() , ajax() , ... Dúvidas? Pergunte. Agora! Qualquer coisa: [email protected] 52 PROFISSIONAL EM WEBDESIGN b Javascript Métodos jQuery Nesta explicação usaremos, outra vez, este pequeno bloco de HTML a HTML O código necessário aqui: http://cesae.afonsogomes.com/jquery.html <header> <h1>O cabeçalho</h1> <p>Um parágrafo</p> <p>Outro parágrafo</p> <div id=’’conteudos’’></div> <p>E outro parágrafo</p> </header> Dúvidas? Pergunte. Agora! Qualquer coisa: [email protected] 53 PROFISSIONAL EM WEBDESIGN b Javascript Métodos jQuery Para mover todos os parágrafos para dentro da div com id conteudos a HTML Seleccionar todos os parágrafos: $(’’p’’) <header> <h1>O cabeçalho</h1> <p>Um parágrafo</p> <p>Outro parágrafo</p> <div id=’’conteudos’’></div> <p>E outro parágrafo</p> </header> Dúvidas? Pergunte. Agora! Qualquer coisa: [email protected] 54 PROFISSIONAL EM WEBDESIGN b Javascript Métodos jQuery Mover todos os parágrafos para dentro da div com id conteudos a HTML $(’’p’’).appendTo(’’#conteudos’’); <header> <h1>O cabeçalho</h1> <div id=’’conteudos’’> <p>Um parágrafo</p> <p>Outro parágrafo</p> <p>E outro parágrafo</p> </div> </header> Dúvidas? Pergunte. Agora! Qualquer coisa: [email protected] 55 PROFISSIONAL EM WEBDESIGN b Javascript Métodos jQuery Acrescentar coisas ao cabeçalho h1: a HTML $(’’h1’’).append(’’ magnífico!’’); <header> <h1>O cabeçalho magnífico!</h1> <div id=’’conteudos’’> <p>Um parágrafo</p> <p>Outro parágrafo</p> <p>E outro parágrafo</p> </div> </header> Dúvidas? Pergunte. Agora! Qualquer coisa: [email protected] 56 PROFISSIONAL EM WEBDESIGN b Javascript Métodos jQuery a JS A este ponto, devem ter algo parecido com isto no vosso ficheiro: <script> $(document).ready( function () { $(’’p’’).appendTo(’’#conteudos’’); $(’’h1’’).append(’’ magnífico!’’); }); </script> Vamos continuar ... Dúvidas? Pergunte. Agora! Qualquer coisa: [email protected] 57 PROFISSIONAL EM WEBDESIGN b Javascript Métodos jQuery Pôr o último parágrafo com a cor vermelha a HTML $(’’#conteudos p:last’’).css(’’color’’, ‘’red’’); <header> <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> Dúvidas? Pergunte. Agora! Qualquer coisa: [email protected] 58 PROFISSIONAL EM WEBDESIGN b Javascript Métodos jQuery Acrescentar uma class ao <header> a HTML $(’’header’’).addClass(’’headertopo’’); <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> Dúvidas? Pergunte. Agora! Qualquer coisa: [email protected] 59 PROFISSIONAL EM WEBDESIGN b Javascript Métodos jQuery ... ainda mais exemplos Para definição: $(’’img.logo’’).attr(’’width’’, ‘’200px’’); $(’’p.copyright’’).html(’’<span>© 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(); Dúvidas? Pergunte. Agora! Qualquer coisa: [email protected] 60 PROFISSIONAL EM WEBDESIGN b Javascript 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 é http://learn.jquery.com e http://api.jquery.com Dúvidas? Pergunte. Agora! Qualquer coisa: [email protected] 61 PROFISSIONAL EM WEBDESIGN b Javascript Exemplo de eventos em jQuery a JS Agora vamos ver exemplos de EVENTOS... $(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 Dúvidas? Pergunte. Agora! Qualquer coisa: [email protected] 62 PROFISSIONAL EM WEBDESIGN b Javascript Exemplo de eventos em jQuery a JS Vamos acrescentar isto ao nosso document ready: $(document).ready( function () { $(’’#mensagem’’).click(function(){ $(this).css(’color’,’blue’); }); a HTML }); <span id=’’mensagem’’>Lorem ipsum dolor sit amet</span> Dúvidas? Pergunte. Agora! Qualquer coisa: [email protected] 63 PROFISSIONAL EM WEBDESIGN b Javascript Exemplo de eventos em jQuery a HTML a JS Também podemos disparar o evento manualmente! $(document).ready( function () { $(’’#mensagem’’).click(function(){ $(this).css(’color’,’blue’); }); $(’’#mensagem’’).click(); }); <span id=’’mensagem’’>Lorem ipsum dolor sit amet</span> Dúvidas? Pergunte. Agora! Qualquer coisa: [email protected] 64 PROFISSIONAL EM WEBDESIGN b Javascript Exemplo de eventos em jQuery a JS $(document).ready( function () { $(’’a.mostracap1’’).click(function(){ $(’’#cap1’’).slideToggle(’’slow’’); }); }); a HTML Quando .mostracap for clicado o #cap1 desliza para cima ou baixo. <p><a class="mostracap1">Ler capítulo 1</a></p> <div id="cap1"> ... </div> Dúvidas? Pergunte. Agora! Qualquer coisa: [email protected] 65 PROFISSIONAL EM WEBDESIGN b Javascript Exemplo de eventos em jQuery Também podemos fazer as animações ao nosso gosto ... a HTML a JS $(document).ready( function () { $(’’.clicaaqui’’).click(function(){ $(’’#adiv’’).animate({ width: ‘’960px’’, opacity: 0.7, fontSize: ‘’2em’’ }, 2000 ); }); }); <p><a class="clicaaqui">Clica aqui para um animação!</a></p> <div id="adiv"><p>Olá!</p></div> Dúvidas? Pergunte. Agora! Qualquer coisa: [email protected] 66 PROFISSIONAL EM WEBDESIGN b Javascript 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 Dúvidas? Pergunte. Agora! Qualquer coisa: [email protected] 67 PROFISSIONAL EM WEBDESIGN b Javascript Exemplo de AJAX Já vimos antes que temos algumas funções de jQuery para AJAX ( $.load , $.ajax , $.get , $.post , etc...) a JS Para carregar conteúdos de uma página para uma determinada div: $(“#coms”).load(“comentarios.php”); a JS Podemos também passar dados com o pedido que fazemos: Dúvidas? Pergunte. Agora! $(“#coms”).load(“comentarios.php”, {max: 5} ); Qualquer coisa: [email protected] 68 PROFISSIONAL EM WEBDESIGN b Javascript 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/ Dúvidas? Pergunte. Agora! Qualquer coisa: [email protected] 69 PROFISSIONAL EM WEBDESIGN b Javascript HASTA LA VISTA BABY 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! Dúvidas? Pergunte. Agora! Qualquer coisa: [email protected] 70 PROFISSIONAL EM WEBDESIGN b Javascript www.youtube.com/watch?v=ufL85FJAgZQ Até um dia! Dúvidas? Pergunte. Agora! Qualquer coisa: [email protected] 71
