aprender javascript e jquery (ufcd
Post on 26-Jun-2015
411 Views
Preview:
TRANSCRIPT
PROFISSIONAL EM WEBDESIGN
b Javascript
Qualquer coisa:
eu@afonsogomes.com
Dúvidas?
Pergunte. Agora!
PROFISSIONAL EM WEBDESIGN
Qualquer coisa:
eu@afonsogomes.com
Dúvidas?
Pergunte. Agora!
PROFISSIONAL EM WEBDESIGN
b Javascript
0158 - Javascript
2
JS
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
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
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’’
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();
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
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;
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
Qualquer coisa:
eu@afonsogomes.com
Dúvidas?
Pergunte. Agora!
PROFISSIONAL EM WEBDESIGN
b Javascript
10
Tipos de variáveis
aJS
varvarvar
var function
varvar 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*/
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 varvarvar new
vector1 = Array(1, 2, 3); vector2 = Array(); vector3 = [ ]; vector4 = [1, 2, 3, 4]; vector5 = Array( , , , ); ‘Cão’ ‘Gato’ ‘Piriquito’ ‘Girafa’
11
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
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
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 :)
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
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
Qualquer coisa:
eu@afonsogomes.com
Dúvidas?
Pergunte. Agora!
PROFISSIONAL EM WEBDESIGN
b Javascripta
JS 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
Qualquer coisa:
eu@afonsogomes.com
Dúvidas?
Pergunte. Agora!
PROFISSIONAL EM WEBDESIGN
b Javascripta
JS 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)
Qualquer coisa:
eu@afonsogomes.com
Dúvidas?
Pergunte. Agora!
PROFISSIONAL EM WEBDESIGN
b Javascripta
JS 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
Qualquer coisa:
eu@afonsogomes.com
Dúvidas?
Pergunte. Agora!
PROFISSIONAL EM WEBDESIGN
b Javascripta
JS 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
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
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>’
EX
EM
PLO
aJS
SIN
TA
XEfor ( ; ; ) {
}
<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:
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
SIN
TA
XEwhile ( ) {
}
condição// Código a executar
aJS var
while conta = 0;
(conta < 10) { document.write( + conta + ); conta++;}
’Valor conta: ‘ ’<br>’ EX
EM
PLO
23
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
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
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
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
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
Qualquer coisa:
eu@afonsogomes.com
Dúvidas?
Pergunte. Agora!
PROFISSIONAL EM WEBDESIGN
b Javascript
29
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
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
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’’);
Qualquer coisa:
eu@afonsogomes.com
Dúvidas?
Pergunte. Agora!
PROFISSIONAL EM WEBDESIGN
b Javascript
33
Quem usa jQuery:
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
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:
aH
TM
L
<script ></script>src=’’js/jquery-x.x.js’’
aH
TM
L <script>
</script>src=’’http//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js’’
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!
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!
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>
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’’);
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’’)
aC
SS
{ : ;}
{ : ;}
{ : ;}
h1
#elementocomid
.laranja
color
color
color
blue
blue
orange
Qualquer coisa:
eu@afonsogomes.com
Dúvidas?
Pergunte. Agora!
PROFISSIONAL EM WEBDESIGN
b Javascript
41
Exemplo básico de selectores em jQuery
aH
TM
L
<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...
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’’)
aH
TM
L
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’’)
aH
TM
L
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’’)
aH
TM
L
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’’)
aH
TM
L
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 , ...
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
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
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
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
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’’);
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() , ...
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
aH
TM
L
<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>
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’’)
aH
TM
L
<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>
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’’);
aH
TM
L
<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>
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!’’);
aH
TM
L
<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>
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 ...
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’’);
aH
TM
L
<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>
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’’);
aH
TM
L
<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>
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>© 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();
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 é e http://learn.jquery.com http://api.jquery.com
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
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’);
});
aH
TM
L
<span id=’’mensagem’’>Lorem ipsum dolor sit amet</span>
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();
aH
TM
L
<span id=’’mensagem’’>Lorem ipsum dolor sit amet</span>
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’’);
});
aH
TM
L
<p><a class="mostracap1">Ler capítulo 1</a></p>
<div id="cap1"> ... </div>
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
aH
TM
L
<p><a class="clicaaqui">Clica aqui para um animação!</a></p>
<div id="adiv"><p>Olá!</p></div>
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
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:
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/
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!
Qualquer coisa:
eu@afonsogomes.com
Dúvidas?
Pergunte. Agora!
PROFISSIONAL EM WEBDESIGN
b Javascript
www.youtube.com/watch?v=ufL85FJAgZQ
71
Até um dia!
top related