Download - Aprender Javascript e jQuery (UFCD
![Page 1: Aprender Javascript e jQuery (UFCD](https://reader034.vdocuments.net/reader034/viewer/2022042423/558cb3f1d8b42a5a7a8b46a8/html5/thumbnails/1.jpg)
PROFISSIONAL EM WEBDESIGN
b Javascript
Qualquer coisa:
Dúvidas?
Pergunte. Agora!
PROFISSIONAL EM WEBDESIGN
![Page 2: Aprender Javascript e jQuery (UFCD](https://reader034.vdocuments.net/reader034/viewer/2022042423/558cb3f1d8b42a5a7a8b46a8/html5/thumbnails/2.jpg)
Qualquer coisa:
Dúvidas?
Pergunte. Agora!
PROFISSIONAL EM WEBDESIGN
b Javascript
0158 - Javascript
2
JS
![Page 3: Aprender Javascript e jQuery (UFCD](https://reader034.vdocuments.net/reader034/viewer/2022042423/558cb3f1d8b42a5a7a8b46a8/html5/thumbnails/3.jpg)
Qualquer coisa:
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
![Page 4: Aprender Javascript e jQuery (UFCD](https://reader034.vdocuments.net/reader034/viewer/2022042423/558cb3f1d8b42a5a7a8b46a8/html5/thumbnails/4.jpg)
Qualquer coisa:
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
![Page 5: Aprender Javascript e jQuery (UFCD](https://reader034.vdocuments.net/reader034/viewer/2022042423/558cb3f1d8b42a5a7a8b46a8/html5/thumbnails/5.jpg)
Qualquer coisa:
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’’
![Page 6: Aprender Javascript e jQuery (UFCD](https://reader034.vdocuments.net/reader034/viewer/2022042423/558cb3f1d8b42a5a7a8b46a8/html5/thumbnails/6.jpg)
Qualquer coisa:
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();
![Page 7: Aprender Javascript e jQuery (UFCD](https://reader034.vdocuments.net/reader034/viewer/2022042423/558cb3f1d8b42a5a7a8b46a8/html5/thumbnails/7.jpg)
Qualquer coisa:
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
![Page 8: Aprender Javascript e jQuery (UFCD](https://reader034.vdocuments.net/reader034/viewer/2022042423/558cb3f1d8b42a5a7a8b46a8/html5/thumbnails/8.jpg)
Qualquer coisa:
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;
![Page 9: Aprender Javascript e jQuery (UFCD](https://reader034.vdocuments.net/reader034/viewer/2022042423/558cb3f1d8b42a5a7a8b46a8/html5/thumbnails/9.jpg)
Qualquer coisa:
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
![Page 10: Aprender Javascript e jQuery (UFCD](https://reader034.vdocuments.net/reader034/viewer/2022042423/558cb3f1d8b42a5a7a8b46a8/html5/thumbnails/10.jpg)
Qualquer coisa:
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*/
![Page 11: Aprender Javascript e jQuery (UFCD](https://reader034.vdocuments.net/reader034/viewer/2022042423/558cb3f1d8b42a5a7a8b46a8/html5/thumbnails/11.jpg)
Qualquer coisa:
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
![Page 12: Aprender Javascript e jQuery (UFCD](https://reader034.vdocuments.net/reader034/viewer/2022042423/558cb3f1d8b42a5a7a8b46a8/html5/thumbnails/12.jpg)
Qualquer coisa:
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
![Page 13: Aprender Javascript e jQuery (UFCD](https://reader034.vdocuments.net/reader034/viewer/2022042423/558cb3f1d8b42a5a7a8b46a8/html5/thumbnails/13.jpg)
Qualquer coisa:
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
![Page 14: Aprender Javascript e jQuery (UFCD](https://reader034.vdocuments.net/reader034/viewer/2022042423/558cb3f1d8b42a5a7a8b46a8/html5/thumbnails/14.jpg)
Qualquer coisa:
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 :)
![Page 15: Aprender Javascript e jQuery (UFCD](https://reader034.vdocuments.net/reader034/viewer/2022042423/558cb3f1d8b42a5a7a8b46a8/html5/thumbnails/15.jpg)
Qualquer coisa:
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
![Page 16: Aprender Javascript e jQuery (UFCD](https://reader034.vdocuments.net/reader034/viewer/2022042423/558cb3f1d8b42a5a7a8b46a8/html5/thumbnails/16.jpg)
Qualquer coisa:
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
![Page 17: Aprender Javascript e jQuery (UFCD](https://reader034.vdocuments.net/reader034/viewer/2022042423/558cb3f1d8b42a5a7a8b46a8/html5/thumbnails/17.jpg)
Qualquer coisa:
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
![Page 18: Aprender Javascript e jQuery (UFCD](https://reader034.vdocuments.net/reader034/viewer/2022042423/558cb3f1d8b42a5a7a8b46a8/html5/thumbnails/18.jpg)
Qualquer coisa:
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)
![Page 19: Aprender Javascript e jQuery (UFCD](https://reader034.vdocuments.net/reader034/viewer/2022042423/558cb3f1d8b42a5a7a8b46a8/html5/thumbnails/19.jpg)
Qualquer coisa:
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
![Page 20: Aprender Javascript e jQuery (UFCD](https://reader034.vdocuments.net/reader034/viewer/2022042423/558cb3f1d8b42a5a7a8b46a8/html5/thumbnails/20.jpg)
Qualquer coisa:
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
![Page 21: Aprender Javascript e jQuery (UFCD](https://reader034.vdocuments.net/reader034/viewer/2022042423/558cb3f1d8b42a5a7a8b46a8/html5/thumbnails/21.jpg)
Qualquer coisa:
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
![Page 22: Aprender Javascript e jQuery (UFCD](https://reader034.vdocuments.net/reader034/viewer/2022042423/558cb3f1d8b42a5a7a8b46a8/html5/thumbnails/22.jpg)
Qualquer coisa:
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:
![Page 23: Aprender Javascript e jQuery (UFCD](https://reader034.vdocuments.net/reader034/viewer/2022042423/558cb3f1d8b42a5a7a8b46a8/html5/thumbnails/23.jpg)
Qualquer coisa:
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
![Page 24: Aprender Javascript e jQuery (UFCD](https://reader034.vdocuments.net/reader034/viewer/2022042423/558cb3f1d8b42a5a7a8b46a8/html5/thumbnails/24.jpg)
Qualquer coisa:
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
![Page 25: Aprender Javascript e jQuery (UFCD](https://reader034.vdocuments.net/reader034/viewer/2022042423/558cb3f1d8b42a5a7a8b46a8/html5/thumbnails/25.jpg)
Qualquer coisa:
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
![Page 26: Aprender Javascript e jQuery (UFCD](https://reader034.vdocuments.net/reader034/viewer/2022042423/558cb3f1d8b42a5a7a8b46a8/html5/thumbnails/26.jpg)
Qualquer coisa:
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
![Page 27: Aprender Javascript e jQuery (UFCD](https://reader034.vdocuments.net/reader034/viewer/2022042423/558cb3f1d8b42a5a7a8b46a8/html5/thumbnails/27.jpg)
Qualquer coisa:
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
![Page 28: Aprender Javascript e jQuery (UFCD](https://reader034.vdocuments.net/reader034/viewer/2022042423/558cb3f1d8b42a5a7a8b46a8/html5/thumbnails/28.jpg)
Qualquer coisa:
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
![Page 29: Aprender Javascript e jQuery (UFCD](https://reader034.vdocuments.net/reader034/viewer/2022042423/558cb3f1d8b42a5a7a8b46a8/html5/thumbnails/29.jpg)
Qualquer coisa:
Dúvidas?
Pergunte. Agora!
PROFISSIONAL EM WEBDESIGN
b Javascript
29
![Page 30: Aprender Javascript e jQuery (UFCD](https://reader034.vdocuments.net/reader034/viewer/2022042423/558cb3f1d8b42a5a7a8b46a8/html5/thumbnails/30.jpg)
Qualquer coisa:
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
![Page 31: Aprender Javascript e jQuery (UFCD](https://reader034.vdocuments.net/reader034/viewer/2022042423/558cb3f1d8b42a5a7a8b46a8/html5/thumbnails/31.jpg)
Qualquer coisa:
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
![Page 32: Aprender Javascript e jQuery (UFCD](https://reader034.vdocuments.net/reader034/viewer/2022042423/558cb3f1d8b42a5a7a8b46a8/html5/thumbnails/32.jpg)
Qualquer coisa:
Dúvidas?
Pergunte. Agora!
PROFISSIONAL EM WEBDESIGN
b Javascript
32
Em jQuery:
É apenas uma linha de código!
$(’’#conteudo’’).load(’’page.html #conteudo’’);
![Page 33: Aprender Javascript e jQuery (UFCD](https://reader034.vdocuments.net/reader034/viewer/2022042423/558cb3f1d8b42a5a7a8b46a8/html5/thumbnails/33.jpg)
Qualquer coisa:
Dúvidas?
Pergunte. Agora!
PROFISSIONAL EM WEBDESIGN
b Javascript
33
Quem usa jQuery:
![Page 34: Aprender Javascript e jQuery (UFCD](https://reader034.vdocuments.net/reader034/viewer/2022042423/558cb3f1d8b42a5a7a8b46a8/html5/thumbnails/34.jpg)
Qualquer coisa:
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
![Page 35: Aprender Javascript e jQuery (UFCD](https://reader034.vdocuments.net/reader034/viewer/2022042423/558cb3f1d8b42a5a7a8b46a8/html5/thumbnails/35.jpg)
Qualquer coisa:
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’’
![Page 36: Aprender Javascript e jQuery (UFCD](https://reader034.vdocuments.net/reader034/viewer/2022042423/558cb3f1d8b42a5a7a8b46a8/html5/thumbnails/36.jpg)
Qualquer coisa:
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!
![Page 37: Aprender Javascript e jQuery (UFCD](https://reader034.vdocuments.net/reader034/viewer/2022042423/558cb3f1d8b42a5a7a8b46a8/html5/thumbnails/37.jpg)
Qualquer coisa:
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!
![Page 38: Aprender Javascript e jQuery (UFCD](https://reader034.vdocuments.net/reader034/viewer/2022042423/558cb3f1d8b42a5a7a8b46a8/html5/thumbnails/38.jpg)
Qualquer coisa:
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>
![Page 39: Aprender Javascript e jQuery (UFCD](https://reader034.vdocuments.net/reader034/viewer/2022042423/558cb3f1d8b42a5a7a8b46a8/html5/thumbnails/39.jpg)
Qualquer coisa:
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’’);
![Page 40: Aprender Javascript e jQuery (UFCD](https://reader034.vdocuments.net/reader034/viewer/2022042423/558cb3f1d8b42a5a7a8b46a8/html5/thumbnails/40.jpg)
Qualquer coisa:
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
![Page 41: Aprender Javascript e jQuery (UFCD](https://reader034.vdocuments.net/reader034/viewer/2022042423/558cb3f1d8b42a5a7a8b46a8/html5/thumbnails/41.jpg)
Qualquer coisa:
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...
![Page 42: Aprender Javascript e jQuery (UFCD](https://reader034.vdocuments.net/reader034/viewer/2022042423/558cb3f1d8b42a5a7a8b46a8/html5/thumbnails/42.jpg)
Qualquer coisa:
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
![Page 43: Aprender Javascript e jQuery (UFCD](https://reader034.vdocuments.net/reader034/viewer/2022042423/558cb3f1d8b42a5a7a8b46a8/html5/thumbnails/43.jpg)
Qualquer coisa:
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
![Page 44: Aprender Javascript e jQuery (UFCD](https://reader034.vdocuments.net/reader034/viewer/2022042423/558cb3f1d8b42a5a7a8b46a8/html5/thumbnails/44.jpg)
Qualquer coisa:
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
![Page 45: Aprender Javascript e jQuery (UFCD](https://reader034.vdocuments.net/reader034/viewer/2022042423/558cb3f1d8b42a5a7a8b46a8/html5/thumbnails/45.jpg)
Qualquer coisa:
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
![Page 46: Aprender Javascript e jQuery (UFCD](https://reader034.vdocuments.net/reader034/viewer/2022042423/558cb3f1d8b42a5a7a8b46a8/html5/thumbnails/46.jpg)
Qualquer coisa:
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 , ...
![Page 47: Aprender Javascript e jQuery (UFCD](https://reader034.vdocuments.net/reader034/viewer/2022042423/558cb3f1d8b42a5a7a8b46a8/html5/thumbnails/47.jpg)
Qualquer coisa:
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
![Page 48: Aprender Javascript e jQuery (UFCD](https://reader034.vdocuments.net/reader034/viewer/2022042423/558cb3f1d8b42a5a7a8b46a8/html5/thumbnails/48.jpg)
Qualquer coisa:
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
![Page 49: Aprender Javascript e jQuery (UFCD](https://reader034.vdocuments.net/reader034/viewer/2022042423/558cb3f1d8b42a5a7a8b46a8/html5/thumbnails/49.jpg)
Qualquer coisa:
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
![Page 50: Aprender Javascript e jQuery (UFCD](https://reader034.vdocuments.net/reader034/viewer/2022042423/558cb3f1d8b42a5a7a8b46a8/html5/thumbnails/50.jpg)
Qualquer coisa:
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
![Page 51: Aprender Javascript e jQuery (UFCD](https://reader034.vdocuments.net/reader034/viewer/2022042423/558cb3f1d8b42a5a7a8b46a8/html5/thumbnails/51.jpg)
Qualquer coisa:
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’’);
![Page 52: Aprender Javascript e jQuery (UFCD](https://reader034.vdocuments.net/reader034/viewer/2022042423/558cb3f1d8b42a5a7a8b46a8/html5/thumbnails/52.jpg)
Qualquer coisa:
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() , ...
![Page 53: Aprender Javascript e jQuery (UFCD](https://reader034.vdocuments.net/reader034/viewer/2022042423/558cb3f1d8b42a5a7a8b46a8/html5/thumbnails/53.jpg)
Qualquer coisa:
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>
![Page 54: Aprender Javascript e jQuery (UFCD](https://reader034.vdocuments.net/reader034/viewer/2022042423/558cb3f1d8b42a5a7a8b46a8/html5/thumbnails/54.jpg)
Qualquer coisa:
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>
![Page 55: Aprender Javascript e jQuery (UFCD](https://reader034.vdocuments.net/reader034/viewer/2022042423/558cb3f1d8b42a5a7a8b46a8/html5/thumbnails/55.jpg)
Qualquer coisa:
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>
![Page 56: Aprender Javascript e jQuery (UFCD](https://reader034.vdocuments.net/reader034/viewer/2022042423/558cb3f1d8b42a5a7a8b46a8/html5/thumbnails/56.jpg)
Qualquer coisa:
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>
![Page 57: Aprender Javascript e jQuery (UFCD](https://reader034.vdocuments.net/reader034/viewer/2022042423/558cb3f1d8b42a5a7a8b46a8/html5/thumbnails/57.jpg)
Qualquer coisa:
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 ...
![Page 58: Aprender Javascript e jQuery (UFCD](https://reader034.vdocuments.net/reader034/viewer/2022042423/558cb3f1d8b42a5a7a8b46a8/html5/thumbnails/58.jpg)
Qualquer coisa:
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>
![Page 59: Aprender Javascript e jQuery (UFCD](https://reader034.vdocuments.net/reader034/viewer/2022042423/558cb3f1d8b42a5a7a8b46a8/html5/thumbnails/59.jpg)
Qualquer coisa:
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>
![Page 60: Aprender Javascript e jQuery (UFCD](https://reader034.vdocuments.net/reader034/viewer/2022042423/558cb3f1d8b42a5a7a8b46a8/html5/thumbnails/60.jpg)
Qualquer coisa:
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();
![Page 61: Aprender Javascript e jQuery (UFCD](https://reader034.vdocuments.net/reader034/viewer/2022042423/558cb3f1d8b42a5a7a8b46a8/html5/thumbnails/61.jpg)
Qualquer coisa:
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
![Page 62: Aprender Javascript e jQuery (UFCD](https://reader034.vdocuments.net/reader034/viewer/2022042423/558cb3f1d8b42a5a7a8b46a8/html5/thumbnails/62.jpg)
Qualquer coisa:
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
![Page 63: Aprender Javascript e jQuery (UFCD](https://reader034.vdocuments.net/reader034/viewer/2022042423/558cb3f1d8b42a5a7a8b46a8/html5/thumbnails/63.jpg)
Qualquer coisa:
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>
![Page 64: Aprender Javascript e jQuery (UFCD](https://reader034.vdocuments.net/reader034/viewer/2022042423/558cb3f1d8b42a5a7a8b46a8/html5/thumbnails/64.jpg)
Qualquer coisa:
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>
![Page 65: Aprender Javascript e jQuery (UFCD](https://reader034.vdocuments.net/reader034/viewer/2022042423/558cb3f1d8b42a5a7a8b46a8/html5/thumbnails/65.jpg)
Qualquer coisa:
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>
![Page 66: Aprender Javascript e jQuery (UFCD](https://reader034.vdocuments.net/reader034/viewer/2022042423/558cb3f1d8b42a5a7a8b46a8/html5/thumbnails/66.jpg)
Qualquer coisa:
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>
![Page 67: Aprender Javascript e jQuery (UFCD](https://reader034.vdocuments.net/reader034/viewer/2022042423/558cb3f1d8b42a5a7a8b46a8/html5/thumbnails/67.jpg)
Qualquer coisa:
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
![Page 68: Aprender Javascript e jQuery (UFCD](https://reader034.vdocuments.net/reader034/viewer/2022042423/558cb3f1d8b42a5a7a8b46a8/html5/thumbnails/68.jpg)
Qualquer coisa:
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:
![Page 69: Aprender Javascript e jQuery (UFCD](https://reader034.vdocuments.net/reader034/viewer/2022042423/558cb3f1d8b42a5a7a8b46a8/html5/thumbnails/69.jpg)
Qualquer coisa:
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/
![Page 70: Aprender Javascript e jQuery (UFCD](https://reader034.vdocuments.net/reader034/viewer/2022042423/558cb3f1d8b42a5a7a8b46a8/html5/thumbnails/70.jpg)
Qualquer coisa:
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!
![Page 71: Aprender Javascript e jQuery (UFCD](https://reader034.vdocuments.net/reader034/viewer/2022042423/558cb3f1d8b42a5a7a8b46a8/html5/thumbnails/71.jpg)
Qualquer coisa:
Dúvidas?
Pergunte. Agora!
PROFISSIONAL EM WEBDESIGN
b Javascript
www.youtube.com/watch?v=ufL85FJAgZQ
71
Até um dia!