Dúvidas?
Qualquer coisa:
JS 0158 - Javascript
Dúvidas?
Qualquer coisa:
O QUE É O JA O JAVA VASS C R I P T Antes de mais é JAVA JAVASCRIPT SCRIPT e não JAVA . Java é uma batalha diferente! diferente! Javascript é uma uma linguagem de programação utilizada 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 MooT MooTools) ools) para extender e acrescentar potencialidades. Dúvidas?
Qualquer coisa:
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 . S J
a
<script> window.onload = function () { alert(’’Isto é uma mensagem de aviso’’); console.log(’’Registo na consola’’); }
Exemplo em: http://cesae.afonsogomes.com/javascripts1.html Dúvidas?
Qualquer coisa:
COMO UTILIZAR JAVASCRIPT Idealmente temos todo o código javascript dentro de ficheiros com extensão .js e todos eles, chamados antes do . .
Também, idealmente, dentro de um só ficheiro para diminuir os HTTP Requests que uma página provoca. S J
a
.... <script src=’’js/jquery-1.10.2-min.js’’> <script src=’’js/os-meus-scripts.js’’> <script src=’’js/googleanalytics.js’’> ....
Dúvidas?
Qualquer coisa:
O primeiro programa em Javascript Introduzam o seguinte código num novo documento HTML. S J
a
<script> function helloWorld() { alert('Hello World!'); } helloWorld();
Dúvidas?
Qualquer coisa:
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?
Qualquer coisa:
Declarar variáveis Para declarar uma variável usamos a palavra ‘var’ antes. S J
a
var NomedaVariavel;
Podemos declarar multiplas variáveis numa só declaração: S J
a
var nome, endereco;
.
E podemos também atribuir valores iniciais: S J
a Dúvidas?
var largura = 100, mensagem = ‘’Olá’’; Qualquer coisa:
Âmbito das variáveis O âmbito da variável define onde ela pode ser usada (aonde está confinada) S J
a
<script> var x= 10;
A variável y só é conhecida dentro da função ‘fazAlgo’: S J
a
Dúvidas?
<script> function fazAlgo() { var y= 99; } alert(y); // Uncaught Reference Error: y is not defined Qualquer coisa:
Tipos de variáveis S J
a
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?
Qualquer coisa:
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: S J
a
Dúvidas?
var vector1 = new Array(1, 2, 3); var vector2 = new Array(); var vector3 = [ ]; var vector4 = [1, 2, 3, 4]; var vector5 = new Array(‘Cão’, ‘Gato’, ‘Piriquito’, ‘Girafa’);
Qualquer coisa:
Vectores Um vector pode ser acedido através de um index onde o primeiro elemento é o index zero. S J
a
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 adicionar o valor Zebra como 5º elemento (index 4) S J
a
Dúvidas?
animais[4] = ‘Zebra’; alert(animais.join(’ | ’));
Qualquer coisa:
Vectores Para sabermos o tamanho do vector usamos a propriedade lenght. E também podemos adicionar elementos com o push. S J
a
var animais = new Array(‘Cão’, ‘Gato’, ‘Piriquito’, ‘Girafa’); var contaanimais = animais.length; alert(contaanimais); animais.push(‘Falcão’); alert(animais.length);
Podemos, também, usar um ciclo para vermos todos os animais do vector. for( var i = 0; i < animais.length; i++) { S J alert(animais[i]); a } Exemplo em: http://cesae.afonsogomes.com/javascripts2.html Dúvidas?
Qualquer coisa:
Operadores Do PHP para o Javascript a coisa pouco muda :)
S J
a
<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;
Dúvidas?
Qualquer coisa:
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
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
a && b
E
Verdade se a maior ou igual a b 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?
Qualquer coisa:
Estruturas de controlo: IF S J
a
<script> if (condição){ // Código } if (condição){ // Código } else { // Código }
Dúvidas?
Qualquer coisa:
Estruturas de controlo: IF (exemplo 1) S J
a
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?
Qualquer coisa:
Estruturas de controlo: IF (exemplo 2) S J
a
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?
Qualquer coisa:
Estruturas de controlo: IF (exemplo 3) S J
a
var cao = ’Johnny’, idade = 2; 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?
Qualquer coisa:
Estruturas de controlo: SWITCH S J
a
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; };
Exemplo em: http://cesae.afonsogomes.com/javascripts7.html Dúvidas?
Qualquer coisa:
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?
Qualquer coisa:
O ciclo FOR Um ciclo FOR executa um bloco de código um numero determinado de vezes. S J
a
for (; ; ) { // Código a executar durante o for aqui }
E X A T N I S
E um exemplo: S J
a
Dúvidas?
for (var i = 0; i < 10; i++) { document.write(’Esta é a iteração: ‘ + i + ’
’); }
Qualquer coisa:
O L P M E X E
O ciclo WHILE Um ciclo WHILE executa um bloco de código enquanto uma determinada condição for verdade S J
a
S J
a
Dúvidas?
while (condição) { // Código a executar }
var conta = 0; while (conta < 10) { document.write(’Valor conta: ‘ + conta + ’
’); conta++; } Qualquer coisa:
E X A T N I S
O L P M E X E
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. S J
a
function clicaAqui() { alert(’Clicou!’); } var clicaAqui = function () { alert(’Clicou!’); } clicaAqui();
Dúvidas?
Qualquer coisa:
Funções Funções podem ter parâmetros de entrada e retornar valores com a palavra chave return. S J
a
function multiplica(x, y) { return x * y; } var seis = multiplica(2, 3); alert(seis); alert(multiplica(5, multiplica(5, 5)));
Dúvidas?
Qualquer coisa:
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!! S J
a
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?
Qualquer coisa:
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?
Qualquer coisa:
Caixa CONFIRM Vimos anteriormente como gerar um ALERT e um PROMPT. O CONFIRM fornece uma opção ao utilizador do site. S J
a
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?
Qualquer coisa:
Dúvidas?
Qualquer coisa:
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?
Qualquer coisa:
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
Fonte: http://alistapart.com/article/crossbrowserscripting Dúvidas?
Qualquer coisa:
Em jQuery:
É apenas uma linha de código! $(’’#conteudo’’).load(’’page.html #conteudo’’);
Dúvidas?
Qualquer coisa:
Quem usa jQuery:
Dúvidas?
Qualquer coisa:
Comparação jQuery com outras librarias de javascript
http://www.google.com/trends/explore#q=jQuery,prototype,yui,dojo,mootools Dúvidas?
Qualquer coisa:
Como usar o jQuery Podemos fazer o download ( http://jquery.com/download/ ) e servir uma versão armazenada no nosso site: L M T H
<script src=’’js/jquery-x.x.js’’>
a
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’’ > a L M T H
Dúvidas?
Qualquer coisa:
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. S J
a
<script src=’’js/jquery-1.10.2.js’’> <script> $(document).ready( function () { // O nosso código aqui! });
Dúvidas?
Qualquer coisa:
A filosofia do jQuery Procurar um elemento qualquer e fazer-lhe qualquer coisa! S J
a
<script src=’’js/jquery-1.10.2.js’’> <script> $(document).ready( function () { $(“div”).addClass(“xyz”); }); Procurar um elemento qualquer e fazer-lhe qualquer coisa!
Dúvidas?
Qualquer coisa:
Exemplo básico Vamos ver um exemplo: S J
a
Dúvidas?
Um parágrafo
Outro parágrafo
Ainda outro parágrafo
Qualquer coisa:
Exemplo básico Adicionar uma class com o nome teste a todos os parágrafos de uma página S J
a
Um parágrafo
Outro parágrafo
Ainda outro parágrafo
Código jQuery usado: $(’’p’’).addClass(’’teste’’);
Dúvidas?
Qualquer coisa:
Usando selectores em jQuery Podemos usar qualquer tipo de selectores ... tal e qual no CSS !!! S S C
a
h1 { }
S J
color: blue;
a
$(’’h1’’) Seleccionar um ID: $(’’#elementocomid’’)
#elementocomid { color: blue; }
Seleccionar uma classe: $(’’.laranja’’)
.laranja { color: orange; }
Dúvidas?
Seleccionar o elemento:
E até fazer combinações: $(’’footer ul.menu li’’)
Qualquer coisa:
Exemplo básico de selectores em jQuery Para já vamos só ver como seleccionar as coisas sem executar nenhuma acção sobre elas... L M T H
a
Dúvidas?
Qualquer coisa:
Exemplo básico de selectores em jQuery
$(’’header’’) L M T H
Dúvidas?
Qualquer coisa:
Exemplo básico de selectores em jQuery
$(’’#logo’’) L M T H
a
Dúvidas?
Qualquer coisa:
Exemplo básico de selectores em jQuery
$(’’ul.menu’’) L M T H
Dúvidas?
Qualquer coisa:
Exemplo básico de selectores em jQuery
$(’’ul.menu li’’) L M T H
a
Dúvidas?
Qualquer coisa:
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?
Qualquer coisa:
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?
Qualquer coisa:
Satisfaz
Exemplos de filtros Para dar cores de fundo a esta tabela em tipo zebra: $(’’#estudantes tr:even’’).css(’’background-color’’, ‘’#DDDDEE’’);
Nome
Turma
Idade
Felismino
C
21
Bom
Felizardo
A
22
Bom
Felisberto
B
21
Fulano
B
20
Fulaninho
D
19
Dúvidas?
Qualquer coisa:
Observação
Satisfaz
Exemplos de filtros $(’’#estudantes tr:even’’).css(’’background-color tr:even’’).css(’’background-color’’, ’’, ‘’#DDDDEE’’); $(’’#estudantes td.observacao:empty’’).text(’’Sem comentário’’);
Nome
Turma
Idade
Felismino
C
21
Bom
Felizardo
A
22
Bom
Felisberto
B
21
Sem comentario
Fulano
B
20
Sem comentario
Fulaninho
D
19
Satisfaz
Dúvidas?
Qualquer coisa:
Observação
Exemplos de filtros $(’’#estudantes tr:even’’).css(’’background-color tr:even’’).css(’’background-color’’, ’’, ‘’#DDDDEE’’); $(’’#estudantes td.observacao:empty’’).text(’’Sem comentário’’); $(’’#estudantes td[align=’center’]’’).addClass(’’te td[align=’center ’]’’).addClass(’’textovermelho’’); xtovermelho’’); Nome
Turma
Idade
Felismino
C
21
Bom
Felizardo
A
22
Bom
Felisberto
B
21
Sem comentario
Fulano
B
20
Sem comentario
Fulaninho
D
19
Satisfaz
Dúvidas?
Qualquer coisa:
Observação
Exemplos de selectores de forms $(’’:submit).click(function(event){ ... }); $(’’input:disabled’’).val(’’Não pode mudar-me!’’); $(’’#formcontacto input:checked’’).addClass(’’selecionado’’); input:checked’’).addClass(’’selecionado’’);
Dúvidas?
Qualquer coisa:
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?
Qualquer coisa:
Métodos jQuery Nesta explicação usaremos, outra vez, este pequeno bloco de HTML O código necessário aqui: http://cesae.afonsogomes.com/jquery.html L M T H
a
O cabeçalho
Um parágrafo
Outro parágrafo
E outro parágrafo
Dúvidas?
Qualquer coisa:
Métodos jQuery Para mover todos os parágrafos para dentro da div com id conteudos Seleccionar todos os parágrafos: $(’’p’’) L M T H
a
O cabeçalho
Um parágrafo
Outro parágrafo
E outro parágrafo
Dúvidas?
Qualquer coisa:
Métodos jQuery Mover todos os parágrafos para dentro da div com id conteudos $(’’p’’).appendTo(’’#conteudos’’); L M T H
a
O cabeçalho
Um parágrafo
Outro parágrafo
E outro parágrafo
Dúvidas?
Qualquer coisa:
Métodos jQuery Acrescentar coisas ao cabeçalho h1: $(’’h1’’).append(’’ magnífico!’’); L M T H
a
O cabeçalho magnífico!
Um parágrafo
Outro parágrafo
E outro parágrafo
Dúvidas?
Qualquer coisa:
Métodos jQuery A este ponto, devem ter algo parecido com isto no vosso ficheiro: S J
a
<script> $(document).ready( function () { $(’’p’’).appendTo(’’#conteudos’’); $(’’h1’’).append(’’ magnífico!’’); }); Vamos continuar ...
Dúvidas?
Qualquer coisa:
Métodos jQuery Pôr o último parágrafo com a cor vermelha $(’’#conteudos p:last’’).css(’’color’’, ‘’red’’); L M T H
a
O cabeçalho magnífico!
Um parágrafo
Outro parágrafo
E outro parágrafo
Dúvidas?
Qualquer coisa:
Métodos jQuery Acrescentar uma class ao