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. 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.
5. 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
• ...
6. 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
7. 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
8. fazPino() - o que é?
• é um subalgoritmo!
• no javascript só existe um tipo de subalgoritmo: funções
• recordam-se deste exemplo?
9. 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.
10. 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
11. 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);
12. 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";
13. 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.
14. 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
15. 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)
16. 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”!”
17. Tipos de dados: Exemplo sequências de escape
Tabela retirada de “Beginning JavaScript, pág 19
18. 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!
19. 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,...
20. 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
21. 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”
22. 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?
23. 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;
24. 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?
25. 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
