T04_LM3: Javascript (2013-2014)
3 gostaram641 visualizações
1. O documento discute conceitos básicos de JavaScript, incluindo como obter elementos do DOM, eventos, funções e tipos de dados. 2. É explicado que funções são sub-algoritmos em JavaScript e como declarar e invocar funções sem parâmetros. 3. São descritos os principais tipos de dados em JavaScript, incluindo números, strings, booleanos e como verificar o tipo de uma variável.
![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](https://image.slidesharecdn.com/a04lm31314javascript2-130924092258-phpapp02/85/T04_LM3-Javascript-2013-2014-9-320.jpg)
T04_LM3: Javascript (2013-2014)
- 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?
- 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?