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.
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. 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
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. fazPino() - o que é?
• é um sub-algoritmo!
• no javascript só existe um tipo de sub-algoritmo: funções
• um exemplo:
8. 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.
9. 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
10. 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);
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";
• o valor retornado é uma string. Se necessário, pode ser convertida para um
número.
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. 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. 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. 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. Tipos de dados: Exemplo sequências de escape
Tabela retirada de “Beginning JavaScript, pág 19
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. • 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
19. • 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
20. • 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?
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. 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. 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?
