JavaScript Hello World e manipulação de elementos DOM

JavaScript
Carlos Santos
LabMM 3 - NTC - DeCA - UA
Aula 05 - 06, 28-09-2011

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

getElementByID

• Retorna uma referência para o primeiro objecto identiﬁcado 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?

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

• ...

Como sabemos que houve um input?

• eventos

• o código é notiﬁcado quando acontece um evento especíﬁco 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

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

fazPino() - o que é?

• é um subalgoritmo!

• no javascript só existe um tipo de subalgoritmo: funções

• recordam-se deste exemplo?

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.

Funções em Javascript (sem parâmetros)

identiﬁcador ú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

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);

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";

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íﬁcas.

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

Tipos de dados: JavaScript

• Tipos de dados mais comuns:

• Numéricos

• inteiros (ex: 243, -9, 0)

• frações/ﬂoating-point (ex: 1.2321, -43243.2)

• Texto/strings

• “...” ou ‘...’

• Booleanos

• Verdadeiro (true) ou Falso (false)

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”!”

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 velocidade de leitura e escrita

• Armazenamento permanente

• Ficheiros

• txt, cookies,...

• Bases de dados

• em LabMM 4!

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 signiﬁcado, preﬁxos,...

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

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”

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?

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;

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?

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

JavaScript Hello World e manipulação de elementos DOM

Recomendados

Recomendados

Más contenido relacionado

La actualidad más candente

La actualidad más candente (20)

Destacado

Destacado (16)

Similar a JavaScript Hello World e manipulação de elementos DOM

Similar a JavaScript Hello World e manipulação de elementos DOM (20)

Más de Carlos Santos

Más de Carlos Santos (20)

Último

Último (20)

JavaScript Hello World e manipulação de elementos DOM