T04_LM3: Javascript (2013-2014)

  • 354 views
Uploaded on

 

More in: Education
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
354
On Slideshare
0
From Embeds
0
Number of Embeds
1

Actions

Shares
Downloads
34
Comments
0
Likes
2

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. JavaScript Carlos Santos LabMM 3 - NTC - DeCA - UA Aula 04 - 06, 20-09-2013
  • 2. getElementByID • Retorna uma referência para o primeiro objeto 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?
  • 3. 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 • ...
  • 4. 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/atividade • timers são fundamentais nesta estratégia • os formulários podem ter um comportamento diferente
  • 5. 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
  • 6. fazPino() - o que é? • é um sub-algoritmo! • no javascript só existe um tipo de sub-algoritmo: funções • um exemplo:
  • 7. Sub-algoritmos - 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 sub-algoritmos: • procedimentos: definem um conjunto de instruções a executar; • funções: definem um conjunto de instruções a executar e retornam um valor final.
  • 8. Funções em Javascript (sem parâmetros) function nomeFunção () { // código a executar [return valor;] } identificador único do sub-algoritmo/ função valor a retornar pela função (opcional) nomeFunção (); declaração invocação
  • 9. Como aceder ao DOM? • obter o conteúdo de um elemento var a=document.getElementById("intro").innerHTML; • alterar o conteúdo ou estilo 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);
  • 10. 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"; • o valor retornado é uma string. Se necessário, pode ser convertida para um número.
  • 11. 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.
  • 12. 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
  • 13. 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)
  • 14. 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”!”
  • 15. Tipos de dados: Exemplo sequências de escape Tabela retirada de “Beginning JavaScript, pág 19
  • 16. 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!
  • 17. • 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,... Variáveis: JavaScript
  • 18. • Declaração • var minhaVariavel; • Atribuição • minhaVariavel = 30; • var outraVariavel = “Olá”; • minhaVariavel = outraVariavel; • Valor de uma variável não inicializada • undefined Variáveis: JavaScript
  • 19. • 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” typeof() - Qual o tipo de dados?
  • 20. 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?
  • 21. 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;
  • 22. 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?