Aprender Javascript e jQuery (UFCD

PROFISSIONAL EM WEBDESIGN

b Javascript

Qualquer coisa:

[email protected]

Dúvidas?

Pergunte. Agora!


Qualquer coisa:

[email protected]

Dúvidas?

Pergunte. Agora!


b Javascript

0158 - Javascript

2

JS

Qualquer coisa:

[email protected]

Dúvidas?

Pergunte. Agora!


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:

[email protected]

Dúvidas?

Pergunte. Agora!


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:

[email protected]

Dúvidas?

Pergunte. Agora!


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:

[email protected]

Dúvidas?

Pergunte. Agora!


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:

[email protected]

Dúvidas?

Pergunte. Agora!


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:

[email protected]

Dúvidas?

Pergunte. Agora!


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:

[email protected]

Dúvidas?

Pergunte. Agora!


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:

[email protected]

Dúvidas?

Pergunte. Agora!


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:

[email protected]

Dúvidas?

Pergunte. Agora!


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:

[email protected]

Dúvidas?

Pergunte. Agora!


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:

[email protected]

Dúvidas?

Pergunte. Agora!


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.


13

Qualquer coisa:

[email protected]

Dúvidas?

Pergunte. Agora!


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:

[email protected]

Dúvidas?

Pergunte. Agora!


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:

[email protected]

Dúvidas?

Pergunte. Agora!


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:

[email protected]

Dúvidas?

Pergunte. Agora!


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:

[email protected]

Dúvidas?

Pergunte. Agora!


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


Qualquer coisa:

[email protected]

Dúvidas?

Pergunte. Agora!


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



Qualquer coisa:

[email protected]

Dúvidas?

Pergunte. Agora!


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


Qualquer coisa:

[email protected]

Dúvidas?

Pergunte. Agora!


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


Qualquer coisa:

[email protected]

Dúvidas?

Pergunte. Agora!


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:

[email protected]

Dúvidas?

Pergunte. Agora!


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:

[email protected]

Dúvidas?

Pergunte. Agora!


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:

[email protected]

Dúvidas?

Pergunte. Agora!


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:

[email protected]

Dúvidas?

Pergunte. Agora!


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


Qualquer coisa:

[email protected]

Dúvidas?

Pergunte. Agora!


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:

[email protected]

Dúvidas?

Pergunte. Agora!


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!");

}


Qualquer coisa:

[email protected]

Dúvidas?

Pergunte. Agora!


b Javascript

29

Qualquer coisa:

[email protected]

Dúvidas?

Pergunte. Agora!


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:

[email protected]

Dúvidas?

Pergunte. Agora!


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:

[email protected]

Dúvidas?

Pergunte. Agora!


b Javascript

32

Em jQuery:

É apenas uma linha de código!

$(’’#conteudo’’).load(’’page.html #conteudo’’);

Qualquer coisa:

[email protected]

Dúvidas?

Pergunte. Agora!


b Javascript

33

Quem usa jQuery:

Qualquer coisa:

[email protected]

Dúvidas?

Pergunte. Agora!


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:

[email protected]

Dúvidas?

Pergunte. Agora!


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:

[email protected]

Dúvidas?

Pergunte. Agora!


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:

[email protected]

Dúvidas?

Pergunte. Agora!


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:

[email protected]

Dúvidas?

Pergunte. Agora!


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:

[email protected]

Dúvidas?

Pergunte. Agora!


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:

[email protected]

Dúvidas?

Pergunte. Agora!


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:

[email protected]

Dúvidas?

Pergunte. Agora!


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:

[email protected]

Dúvidas?

Pergunte. Agora!


b Javascript

42


<header>



<li>Opção 1</li>

<li>Opção 2</li>

</ul>

</header>

$(’’header’’)

aH

TM

L

Qualquer coisa:

[email protected]

Dúvidas?

Pergunte. Agora!


b Javascript

43


<header>


<li>Opção 1</li>

<li>Opção 2</li>

</ul>

</header>


$(’’#logo’’)

aH

TM

L

Qualquer coisa:

[email protected]

Dúvidas?

Pergunte. Agora!


b Javascript

44


<header>


</header>


<li>Opção 1</li>

<li>Opção 2</li>

</ul>

$(’’ul.menu’’)

aH

TM

L

Qualquer coisa:

[email protected]

Dúvidas?

Pergunte. Agora!


b Javascript

45


<header>



</ul>

</header>

<li>Opção 1</li>

<li>Opção 2</li>

$(’’ul.menu li’’)

aH

TM

L

Qualquer coisa:

[email protected]

Dúvidas?

Pergunte. Agora!


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:

[email protected]

Dúvidas?

Pergunte. Agora!


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:

[email protected]

Dúvidas?

Pergunte. Agora!


b Javascript

48

Exemplos de filtros

Para dar cores de fundo a esta tabela em tipo zebra:$(’’#estudantes tr:even’’).css(’’background-color’’, ‘’#DDDDEE’’);


Felismino C 21 Bom

Felizardo A 22 Bom

Felisberto B 21

Fulano B 20


Qualquer coisa:

[email protected]

Dúvidas?

Pergunte. Agora!


b Javascript

49

Exemplos de filtros

$(’’#estudantes tr:even’’).css(’’background-color’’, ‘’#DDDDEE’’);$(’’#estudantes td.observacao:empty’’).text(’’Sem comentário’’);


Felismino C 21 Bom

Felizardo A 22 Bom

Felisberto B 21 Sem comentario

Fulano B 20 Sem comentario


Qualquer coisa:

[email protected]

Dúvidas?

Pergunte. Agora!


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’’);


Felismino C 21 Bom

Felizardo A 22 Bom

Felisberto B 21 Sem comentario

Fulano B 20 Sem comentario


Qualquer coisa:

[email protected]

Dúvidas?

Pergunte. Agora!


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:

[email protected]

Dúvidas?

Pergunte. Agora!


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:

[email protected]

Dúvidas?

Pergunte. Agora!


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:

[email protected]

Dúvidas?

Pergunte. Agora!


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>


</header>

<div id=’’conteudos’’></div>




Qualquer coisa:

[email protected]

Dúvidas?

Pergunte. Agora!


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>


</header>

<div id=’’conteudos’’>




</div>

Qualquer coisa:

[email protected]

Dúvidas?

Pergunte. Agora!


b Javascript

56

Métodos jQuery

Acrescentar coisas ao cabeçalho h1:

$(’’h1’’).append(’’ magnífico!’’);

aH

TM

L

<header>





</div>

</header>

<h1>O cabeçalho magnífico!</h1>

Qualquer coisa:

[email protected]

Dúvidas?

Pergunte. Agora!


b Javascript

57

Métodos jQuery

A este ponto, devem ter algo parecido com isto no vosso ficheiro:

aJS

<script>

</script>


});

$(’’p’’).appendTo(’’#conteudos’’);

$(’’h1’’).append(’’ magnífico!’’);

Vamos continuar ...

Qualquer coisa:

[email protected]

Dúvidas?

Pergunte. Agora!


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>





</div>

</header>

<p style=’’color:red’’>E outro parágrafo</p>

Qualquer coisa:

[email protected]

Dúvidas?

Pergunte. Agora!


b Javascript

59

Métodos jQuery

Acrescentar uma class ao <header>

$(’’header’’).addClass(’’headertopo’’);

aH

TM

L

<header class=’’headertopo’’>





<p style=’’color:red’’>E outro parágrafo</p>

</div>

</header>

Qualquer coisa:

[email protected]

Dúvidas?

Pergunte. Agora!


b Javascript

60

Métodos jQuery ... ainda mais exemplos

Para definição:

$(’’img.logo’’).attr(’’width’’, ‘’200px’’);

$(’’p.copyright’’).html(’’<span>&copy 2013 Felisberto</span>’’);

$(’’input#nome’’).val(’’Felismino’’);

Para leitura:

var larguralogo = $(’’img.logo’’).attr(’’width’’);

var copyright = $(’’p.copyright’’).html();

var nomeuser = $(’’input#nome’’).val();

Qualquer coisa:

[email protected]

Dúvidas?

Pergunte. Agora!


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:

[email protected]

Dúvidas?

Pergunte. Agora!


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:

[email protected]

Dúvidas?

Pergunte. Agora!


b Javascript

63


Vamos acrescentar isto ao nosso document ready:

aJS


});

$(’’#mensagem’’).click(function(){

$(this).css(’color’,’blue’);

});

aH

TM

L

<span id=’’mensagem’’>Lorem ipsum dolor sit amet</span>

Qualquer coisa:

[email protected]

Dúvidas?

Pergunte. Agora!


b Javascript

64


Também podemos disparar o evento manualmente!

aJS


});

$(’’#mensagem’’).click(function(){

$(this).css(’color’,’blue’);

});

$(’’#mensagem’’).click();

aH

TM

L

<span id=’’mensagem’’>Lorem ipsum dolor sit amet</span>

Qualquer coisa:

[email protected]

Dúvidas?

Pergunte. Agora!


b Javascript

65


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:

[email protected]

Dúvidas?

Pergunte. Agora!


b Javascript


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:

[email protected]

Dúvidas?

Pergunte. Agora!


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:

[email protected]

Dúvidas?

Pergunte. Agora!


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:

[email protected]

Dúvidas?

Pergunte. Agora!


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:

[email protected]

Dúvidas?

Pergunte. Agora!


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:

[email protected]

Dúvidas?

Pergunte. Agora!


b Javascript

www.youtube.com/watch?v=ufL85FJAgZQ

71

Até um dia!

Documents

Aprender Javascript e jQuery (UFCD