(A06) LabMM3 - JavaScript

960 visualizações

Publicada em

Publicada em: Educação
0 comentários
1 gostou
Estatísticas
Notas
  • Seja o primeiro a comentar

Sem downloads
Visualizações
Visualizações totais
960
No SlideShare
0
A partir de incorporações
0
Número de incorporações
4
Ações
Compartilhamentos
0
Downloads
118
Comentários
0
Gostaram
1
Incorporações 0
Nenhuma incorporação

Nenhuma nota no slide

(A06) LabMM3 - JavaScript

  1. 1. JavaScriptCarlos SantosLabMM 3 - NTC - DeCA - UAAula 05 - 06, 28-09-2011
  2. 2. Terceiro exemplo: Hello world! <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <body > <p id="ResultsP"></p> <script type="text/javascript"> // Script block 1 document.getElementById(ResultsP).innerHTML = Hello World!; </script> </body> </html>• E escrever o texto no campo de um formulário? document.getElementById("campoTexto").value = “Hello World”; Exemplo retirado de “Beginning JavaScript”, pág 14
  3. 3. getElementByID• Retorna uma referência para o primeiro objecto identificado por ID • document.getElementById( id ); • id é uma string case-sensitive com o ID do elemento a encontrar; • ex: document.getElementById(“areaOutput“); • o método retorna null se o elemento não for encontrado;• Porque é que é tão importante?
  4. 4. Tipos de input• formulários -> submit• uma tecla pressionada• um click num elemento• um movimento do cursor• uma página ou imagem que acabou de carregar• ...
  5. 5. Como sabemos que houve um input?• eventos • o código é notificado quando acontece um evento específico sobre um elemento pré-determinado • o programador decide quais os eventos que quer receber no seu código• pooling • métodos de “escuta” periódica por algum tipo de input/actividade • timers são fundamentais nesta estratégia• os formulários podem ter um comportamento diferente
  6. 6. Eventos• Eventos declarados nos atributos do HTML <button id="myBtn" onclick="fazPino()"> Faz o pino </button>• Eventos associados através do DOM <script> document.getElementById("myBtn").onclick=function() {fazPino()}; </script> Lista de eventos disponíveis http://www.w3schools.com/jsref/dom_obj_event.asp
  7. 7. fazPino() - o que é?• é um subalgoritmo! • no javascript só existe um tipo de subalgoritmo: funções• recordam-se deste exemplo?
  8. 8. Subalgoritmos - O que são?• Subalgoritmos são algoritmos dentro de algoritmos que compreendem um conjunto de instruções dedicadas à resolução de uma tarefa ou problema. • são identificados por um nome único que é definido na sua declaração; • são invocados através do seu nome único;• Conceptualmente, podem-se distinguir dois tipos de subalgoritmos: • procedimentos: definem um conjunto de instruções a executar; • funções: definem um conjunto de instruções a executar e retornam um valor final.
  9. 9. Funções em Javascript (sem parâmetros) identificador único do subalgoritmo/ função function nomeFunção () declaração { // código a executar [return valor;] } valor a retornar pela função (opcional) nomeFunção (); invocação
  10. 10. Como aceder ao DOM?• obter o conteúdo de um elemento var a=document.getElementById("intro").innerHTML;• alterar o conteúdo de um elemento document.getElementById("intro").innerHTML="Novo cont."; document.getElementById("parag3").style.color="red";• adicionar um novo elemento... element.appendChild(newElement);• remover um elemento... parent.removeChild(child);
  11. 11. Para elementos dos formulários...• não se utiliza a propriedade innerHTML• os valores dos campos dos formulários podem ser obtidos ou alterados através da propriedade value!• exemplos: var a=document.getElementById("inputA").value; document.getElementById("inputA").value = "10";
  12. 12. Tipos de dados• Diferentes abordagens por linguagem de programação • strongly typed • obrigatório explicitar o tipo de dados; • grandes restrições para operações entre diferentes tipos de dados. • weakly typed • mais fácil de utilizar mas mais suscetível a erros do programador; • em alguns casos... “seja o que o interpretador quiser”; :) • necessário perceber os fundamentos para controlar os resultados obtidos em algumas situações mais específicas.
  13. 13. Tipos de dados: tipos numéricos em C Tabela retirada de http://www.lix.polytechnique.fr/~liberti/public/ computing/prog/c/C/CONCEPT/data_types.html
  14. 14. Tipos de dados: JavaScript• Tipos de dados mais comuns: • Numéricos • inteiros (ex: 243, -9, 0) • frações/floating-point (ex: 1.2321, -43243.2) • Texto/strings • “...” ou ‘...’ • Booleanos • Verdadeiro (true) ou Falso (false)
  15. 15. Tipos de dados: Escrever strings com ‘ ou “• => It’s nice! • ‘It’s nice!’ • “It’s nice!” • ‘It’s nice!’ //sequência de escape com • => É “fabuloso”! • “É “fabuloso”!” • ‘É “fabuloso”!’ • “É ”fabuloso”!”
  16. 16. Tipos de dados: Exemplo sequências de escape Tabela retirada de “Beginning JavaScript, pág 19
  17. 17. Armazenamento de informação• Armazenamento temporário • Variáveis • armazenadas na memória do computador • grande velocidade de leitura e escrita• Armazenamento permanente • Ficheiros • txt, cookies,... • Bases de dados • em LabMM 4!
  18. 18. Variáveis: JavaScript• Case sensitive • mVariavel é diferente de mvariavel• Palavras chave e palavras reservadas • todas as palavras que fazem parte da linguagem e mais algumas... • http://www.quackit.com/javascript/javascript_reserved_words.cfm (lista completa)• Caracteres proibidos - todos os especiais com exceção do “_” e “$” • &, %, ?,... (palavras com acentos não devem ser utilizadas!)• Nomes têm que começar com: letra, “_” ou “$”• Ser consistente nos nomes e na forma! • por exemplo, lower camel case, nomes com significado, prefixos,...
  19. 19. Variáveis: JavaScript• Declaração • var minhaVariavel;• Atribuição • minhaVariavel = 30; • var outraVariavel = “Olá”; • minhaVariavel = outraVariavel;• Valor de uma variável não inicializada • undefined
  20. 20. typeof() - Qual o tipo de dados?• Para saber o tipo de dados armazenado numa variável • typeof(variavel); // retorna o tipo de dados armazenado• Resultados possíveis: • “undefined” • “boolean” • “string” • “number” • “object” //se é um objecto ou null • “function”
  21. 21. Cálculos numéricos: expressões• Atribuição de valores a variáveis • var intTotal = 10; // O “=” é o operador de atribuição • var jogoA = 4, jogoB; • jogoB = 5; • intTotal = jogoA + jogoB; // resultado?
  22. 22. Operadores aritméticos• Operadores base • +, -, *, /• % Módulo (resto da divisão inteira) • a = 13 % 4; => 1• ++/-- Incremento/Decremento • y++; => y = y + 1; • y--; => y = y - 1; • NOTA: numa expressão, y++ ou ++y pode provocar resultados diferentes• - negação • y = -a;
  23. 23. Operadores de atribuição• Outros operadores • x += 5; => x = x + 5; • x += z; => x = x + z; • x -= 5; => x = x - 5; • x *= 5; => x = x * 5; • x /= 5; => x = x / 5; • x %= 5; => x = x % 5;• Assumindo um valor inicial de x = 10 e z = 2, qual o resultado de cada uma das expressões anteriores?
  24. 24. Regras de precedência• Podem ser muito complexas mas para já só precisamos das aplicáveis na matemática básica. • resultado = 5 * 2 + 3; => ? • resultado = 5 + 2 * 3; => ? • resultado = 5 * (2 + 3); => ? • resultado = 2 + 4 * (2 - 1); => ?• Regras globais de precedência são complexas mas simples de aplicar nos casos mais regulares! • https://developer.mozilla.org/en/JavaScript/Reference/Operators/Operator_Precedence

×