JavaScript
Carlos Santos
LabMM 3 - NTC - DeCA - UA
Aula 04 - 06, 20-09-2013
getElementByID
• Retorna uma referência para o primeiro objeto identificado por ID
• document.getElementById( id );
• id é ...
Tipos de input
• formulários -> submit
• uma tecla pressionada
• um click num elemento
• um movimento do cursor
• uma pági...
Como sabemos que houve um input?
• eventos
• o código é notificado quando acontece um evento específico sobre um
elemento pr...
Eventos
• Eventos declarados nos atributos do HTML
<button id="myBtn" onclick="fazPino()">
Faz o pino
</button>
• Eventos ...
fazPino() - o que é?
• é um sub-algoritmo!
• no javascript só existe um tipo de sub-algoritmo: funções
• um exemplo:
Sub-algoritmos - O que são?
• Subalgoritmos são algoritmos dentro de algoritmos que compreendem um
conjunto de instruções ...
Funções em Javascript (sem parâmetros)
function nomeFunção ()
{
// código a executar
[return valor;]
}
identificador único
...
Como aceder ao DOM?
• obter o conteúdo de um elemento
var a=document.getElementById("intro").innerHTML;
• alterar o conteú...
Para elementos dos formulários...
• não se utiliza a propriedade innerHTML
• os valores dos campos dos formulários podem s...
Tipos de dados
• Diferentes abordagens por linguagem de programação
• strongly typed
• obrigatório explicitar o tipo de da...
Tipos de dados: tipos numéricos em C
Tabela retirada de http://www.lix.polytechnique.fr/~liberti/public/
computing/prog/c/...
Tipos de dados: JavaScript
• Tipos de dados mais comuns:
• Numéricos
• inteiros (ex: 243, -9, 0)
• frações/floating-point (...
Tipos de dados: Escrever strings com ‘ ou “
• => It’s nice!
• ‘It’s nice!’
• “It’s nice!”
• ‘It’s nice!’ //sequência de es...
Tipos de dados: Exemplo sequências de escape
Tabela retirada de “Beginning JavaScript, pág 19
Armazenamento de informação
• Armazenamento temporário
• Variáveis
• armazenadas na memória do computador
• grande velocid...
• Case sensitive
• mVariavel é diferente de mvariavel
• Palavras chave e palavras reservadas
• todas as palavras que fazem...
• Declaração
• var minhaVariavel;
• Atribuição
• minhaVariavel = 30;
• var outraVariavel = “Olá”;
• minhaVariavel = outraV...
• Para saber o tipo de dados armazenado numa variável
• typeof(variavel); // retorna o tipo de dados armazenado
• Resultad...
Cálculos numéricos: expressões
• Atribuição de valores a variáveis
• var intTotal = 10; // O “=” é o operador de atribuiçã...
Operadores aritméticos
• Operadores base
• +, -, *, /
• % Módulo (resto da divisão inteira)
• a = 13 % 4; => 1
• ++/-- Inc...
Operadores de atribuição
• Outros operadores
• x += 5; => x = x + 5;
• x += z; => x = x + z;
• x -= 5; => x = x - 5;
• x *...
T04_LM3: Javascript (2013-2014)
Upcoming SlideShare
Loading in...5
×

T04_LM3: Javascript (2013-2014)

414

Published on

Published in: Education
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
414
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
35
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

T04_LM3: Javascript (2013-2014)

  1. 1. JavaScript Carlos Santos LabMM 3 - NTC - DeCA - UA Aula 04 - 06, 20-09-2013
  2. 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. 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. 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. 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. 6. fazPino() - o que é? • é um sub-algoritmo! • no javascript só existe um tipo de sub-algoritmo: funções • um exemplo:
  7. 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. 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. 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. 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. 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. 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. 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. 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. 15. Tipos de dados: Exemplo sequências de escape Tabela retirada de “Beginning JavaScript, pág 19
  16. 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. 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. 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. 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. 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. 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. 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?
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×