Anda di halaman 1dari 103

Técnico de Multimédia – Nível IV

EFJ - TIPO 7

JAVASCRIPT

FORMADOR: JOSÉ BATISTA

Ultima actualização: 18-10-2011


Papel do JavaScript na Internet:
 Linguagem de programação JavaScript:
• Desenvolvida pela Netscape para uso nos seus browsers
• Objectivo: tornar as páginas Web (documentos) mais dinâmicos e
interactivos.
• Alterar o conteúdo de um documento, permitir formulários e opções de
controlo, animação, etc.
 Linguagem de scripting
 Orientada ao objecto.
 Interpretada pelo browser.
 Os scripts são executados sem serem compilados.
 Os scripts ocupam pouco espaço (poucos kbit).
 Linguagem mais popular na Internet.
 Utilizado na forma de scripts embebidos no código HTML ou em ficheiros com
a extensão .js
 JavaScript é suportado pelos browsers mais famosos, como o Netscape, o
Internet Explorer , Firefox, chrome e o Opera.

Ultima actualização: 18-10-2011


 O que é que o JavaScript pode fazer ?
 Geração de HTML de forma dinâmica:
• Inserção de texto, imagens e elementos num página.
 Reacção a eventos:
• Quando ocorre um evento, código JavaScript pode ser executado.
 O JavaScript pode ler e escrever elementos HTML:
• Consulta e mudança de atributos de um elemento:
 Imagens, links, forms, texto, etc.

 Validação de campos nos formulários:


• Pode ser útil para validar os dados antes de estes serem submetidos
ao servidor.
• Poupa trabalho no servidor !!!!
• Minimiza o tráfego !!!

Ultima actualização: 18-10-2011


 Vantagens:
 Fácil de aprender.
 Desenvolvimento rápido.
 Independente da plataforma.
 Peso relativamente pequeno.
 Desvantagens:
 Gama limitada de métodos incorporados.
 Não se pode esconder o código.
 Faltam ferramentas de desenvolvimento.
 Instável, compatibilidade ?

Ultima actualização: 18-10-2011


Incluir código JavaScript em páginas HTML

 Existem três formas de incluir JavaScript em páginas HTML:


1. Associando código a atributos designadores de handlers de eventos

<input type="button" value="clickMe" onClick=‘alert("thanks to click me!");’ />

<script type="text/javascript" >


1. Como conteúdo do elemento script. alert("Executando o código");
</script>

1. Especificando um ficheiro de código através do atributo src do elemento script. Esta


solução é vantajosa quando pretende usar o mesmo código em vários documentos
HTML.
<script src="common.js"> </script>

 Neste caso,qualquer código dentro do elemento script é ignorado!


 O atributo src pode especificar qualquer URL, relativo ou absoluto
Ex: <SCRIPT SRC="http://home.netscape.com/functions/jsfuncs.js">

Ultima actualização: 18-10-2011


O primeiro programa em JavaScript

<HTML>
<HEAD>
<TITLE> O meu primeiro programa em JavaScript </TITLE>

<script type="text/javascript" >


alert("Hello World!");
</script>

</HEAD>
<BODY>
</BODY>
</HTML>

Ultima actualização: 18-10-2011


Conceitos nucleares

 Comentários
 Valores,Variáveis
 Expressões e Operadores
 Funções
 Instruções
 Arrays
 Eventos
 Objectos

Ultima actualização: 18-10-2011


Comentários

 Comentários são anotações que servem para clarificar certos aspectos do


código ou explicar determinadas opções. Os comentários são ignorados
pelo interpretador de JavaScript.

 O JavaScript suporta dois estilos de comentários:

 de uma só linha
• // This is a single-line comment.

 com múltiplas linhas


• /* This is a multiple-line comment. It can be of any length, and
you can put whatever you want here. */

Ultima actualização: 18-10-2011


Variáveis
 Variáveis permitem identificar valores (valores primitivos, arrays ou objectos) através de um
nome. O valor diz-se o conteúdo da variável.
Os parêntesis rectos indicam que a
expressão é opcional. Na sua
 Declaração de variáveis inexistência a variável fica com o valor
undefined

var nome_variável [ = expressão_iniciação ] [, ... ] ;


 Exemplos

• var notInicialized; // a variável fica com o valor undefined


• var euro=200.482;
• var codigo_postal="1900 LISBOA";
• var var1=2, var2=3, var3;

 Em JavaScript as variáveis não têm tipo (isto é, um conjunto de valores possíveis) definido a
priori. Assim, qualquer variável pode conter qualquer valor.

 Exemplo

codigo_postal=1900; // A variável foi iniciada com uma string e agora


// passou a ter como conteúdo um valor numérico!

Ultima actualização: 18-10-2011


Regras para os identificadores (nomes de variáveis e funções)

 Os identificadores em JavaScript têm de respeitar as seguintes regras:

 Começar por uma letra ou o carácter ´_´


 Os caracteres seguintes podem ser qualquer combinação de letras, ‘_’ e dígitos.
 Distinguem-se letras minúsculas e maiúsculas.

 Exemplos

 var _window2 = window.open();


 var name = "joão";
name e Name são variáveis diferentes!
 var Name = "Carlos";
 var 3values = [ 1, 2, 3]; // nome de variável inválido (começa por um dígito)

Ultima actualização: 18-10-2011


Valores Primitivos

O JavaScript permite trabalhar com os seguintes valores primitivos:

 Valores númericos (inteiros e reais)


• Exs: 42 3.1415 50.0 NaN (lê-se not a number e é o resultado de uma expressão com um
operando que não pode ser convertido em valor numérico)

 Valores lógicos (booleanos).


• true e false

 Cadeias de caracteres (strings)


• Ex: "Isto é uma string!"

 undefined  representa o conteúdo de variáveis não iniciadas

 null  representa o não valor, ou seja a inexistência de valor associado a uma


variável
Ex: varA= null; // varA passou a não ter valor, ou melhor,
// passou a valer null!

Ultima actualização: 18-10-2011


Expressões e Operadores

 Expressões são quaisquer sequências válidas de operadores e operandos (lvariáveis e


subexpressões - expressões parentesiadas) que, depois de avaliadas, geram um
 valor primitivo (número, string, valor lógico), ou um objecto.

 Na linguagem JavaScript existem expressões:

 Aritméticas: a avaliação dá um número (Ex: 2/4  0.5 )


 String: a avaliação dá uma string (Ex: "Fred" +1  "Fred1")
 Lógicas: a avaliação dá um valor lógico (Ex: 3 > 4  false)
 Especiais: têm operadores especiais que, por exemplo, podem retornar (ou gerar) objectos

Ultima actualização: 18-10-2011


Operadores

 Existem operadores unários (só com um operando), binários (com 2


operandos), e um operador ternário (com três operandos)

 O JavaScript tem os seguintes operadores:

Aritméticos
(de) Strings
Operadores Afectação
Comparação
Lógicos (booleanos)

 A prioridade relativa dos operadores está definida no slide


tabela de operadores eprecedências

Ultima actualização: 18-10-2011


Operadores aritméticos
Operadores aritméticos operam sobre valores numéricos (literal ou variável) e retornam um valor numérico.
+ soma Comportam-se como os seus equivalentes
 Os 4 operadores básicos: matemáticos.
- subtracção
Ex: 1 / 2 retorna 0.5
* multiplicação
/ divisão

Operandos não numéricos são convertidos em números usando as regras definidas em Number, com excepção das
situações indicadas em operadores de String

 O operador Módulo % módulo retorna o resto da divisão inteira entre dois operandos . Os
operandos são convertidos para valores inteiros
Ex: 12 % 5 retorna 2

 Os operadores incremento var1++ incrementam ou decrementam var1. Retornam o valor


e decremento var1 -- original de var1
++ var1 incremento ou decremento de var1. retornam o valor após
-- var1 a operação

 Menos Unário - Menos Nega o operando que o segue


unário Ex: y = -x (se x=3, y=-3)

Ultima actualização: 18-10-2011


Operadores de Strings
 Se pelo menos um dos operandos do operador + for uma string, aquele
passa a funcionar como operador de concatenação , retornando outra
string, concatenação léxica dos dois operandos

 "my " + "string" retorna "my string".


 23 + "a" retorna "23a"
 var a = "2"; var val = a + 3; // o valor de val é a string "23"

 O facto dos operador + ter comportamento diferente em strings e


números pode gerar confusão.

 Para converter explícitamente uma string (ou outro valor) em número


pode fazer:
var num = Number(valor); // num=Number("23")  num = 23

Ultima actualização: 18-10-2011


Operadores de afectação

 Um operador de afectação afecta o Operador Equivalência


operando à esquerda com o valor do x += y x=x+y
operando à direita e retorna o valor com que
ficou o operando afectado. x -= y x=x-y

x *= y x=x*y

x /= y x=x/y

x %= y x=x%y
Ex: a+= 3  a = a+ 3
retorna 7 se a valer 4 x ^= y x=x^y

Ultima actualização: 18-10-2011


Assumindo
Operadores de comparação II var1=3
var2=4
s1="a"
s2="b"

Operador Descrição Examplos que


retornam true
IGUAL == Retorna true se os dois operandos forem iguais de acordo com as 3 == var1
regras acima. Se os dois operados não forem do mesmo tipo, é feita s1 == ’a"
uma conversão de tipos conveniente (típicamente os operandos são
convertidos em string)
DIFERENTE != Retorna true se os dois operandos forem diferentes, de acordo com var1 != 4
as regras acima. Se os dois operados não forem do mesmo tipo, é s2 != "B"
feita uma conversão de tipos conveniente (típicamente os operandos
são convertidos em string)
MAIOR QUE > true se o operando esquerdo for maior que o direito. var2 > var1

MAIOR OU IGUAL >= true se o operando esquerdo for maior ou igual que o direito. var2 >= var1
var1 >= 3
MENOR QUE < true se o operando esquerdo for menor que o direito. var1 < var2

MENOR OU IGUAL <= true se o operando esquerdo for menor ou igual que o direito. var1 <= var2
s1 <= s2

Ultima actualização: 18-10-2011


Operadores lógicos (booleanos)
 Operadores Lógicos são normalmente usados com valores booleanos. Nesse caso geram valores booleanos.
Os operadores && e || podem ter como operandos valores não booleanos e nesse caso retornam um dos
operandos
 Em geral, qualquer valor não booleano é convertível para true, à excepção de 0, a string vazia (""), null e
undefined, que são convertíveis para false.
 As expressões lógicas são avaliadas o mínimo necessário para obter o resultado, de acordo com as regras:
 exp1 && exp2 é imediatamente avaliada para exp1 (se Boolean(exp1)== false), sem necessidade de avaliar exp2
 exp1 || exp2 é imediatamente avaliada para exp1 (se Boolean(exp1) == true), sem necessidade de avaliar exp2

Operador Uso Descrição

&& exp1 && exp2 Retorna exp1 se este poder ser convertido para false. Caso contrário,
(Logical AND) retorna exp2. Na situação normal de exp1 e exp2 serem expressões
booleanas, retorna true se ambas forem true
|| exp1 || exp2 Retorna exp1 se este poder ser convertido para true. Caso contrário,
(Logical OR) retorna exp2. Na situação normal de exp1 e exp2 serem expressões
booleanas, retorna true se pelo menos uma for true
! ! exp Retorna false se exp poder ser convertido para true. Caso contrário
(Logical NOT) retorna true

Ultima actualização: 18-10-2011


Tabela de operadores e precedências
Operador Descrição
Prioridade . [] ()
Accesso a propriedades, índexação, chamadas a funções e sub-
expressões
+ ++ — - ~ ! new Operadores unários e criação de objectos
*/ % Multiplication, division, modulo division
+- Addition, subtraction, string concatenation
< <= > >= Less than, less than or equal, greater than, greater than or equal,
== != Equality, inequality,
&& Logical AND
|| Logical OR
_

Ultima actualização: 18-10-2011


Funções (definição)

 As funções em JavaScript são semelhantes às suas congéneres na matemática. Têm um nome


e, em geral, têm argumentos e geram um valor. No entanto, ao contrário daquelas, podem não
ter argumentos e/ou não gerar ( retornar) um valor. De qualquer modo, podem sempre alterar o
estado do programa através de efeitos laterais (side-effets), por exemplo, modificando o valor de
variáveis globais.

function nome_de_função ( parametro1, parametro2, ... ) {


declarações de variáveis e instruções...
}

 As variáveis declaradas dentro de uma função, ao contrário das variáveis globais, só podem ser
acedidas dentro da função onde são declaradas.

 A definição de uma função consiste na palavra-chave function, seguida pelo seu nome, uma lista
de argumentos - dentro de parêntesis e separados por vírgulas - e as respectivas instruções,
dentro de chavetas.
function square( x) {
return x * x;
 Exemplo - O quadrado de um número }

Ultima actualização: 18-10-2011


Funções (invocação)

 Uma função só é executada quando invocada. A sua definição não implica a


execução de qualquer código.

 Exemplo: a função square definida no slide anterior, poderia ser invocada com o
argumento 5, da seguinte maneira:

• var i = square(5);

 Uma função é invocada colocando o seu nome, seguido dos argumentos de


invocação entre parêntesis. A chamada da função pode ser feita em qualquer
ponto do programa onde possa aparecer uma expressão

• var i = square(5) ; // i vale ?....

Ultima actualização: 18-10-2011


Entrada/saída de dados (a função alert)
 Quando se utiliza o JavaScript em páginas HTML, existem funções pré-definidas que
permitem a interacção simples com o utilizador

Para mostrar informação pode-se usar a função alert

Uso
alert( mensagem)
Parâmetros
mensagem – String com a mensagem a afixar
Retorno
A função não retorna nada

alert("Ganhou!");

Ultima actualização: 18-10-2011


Entrada/saída de dados ( a função prompt)

Para recolhar dados pode-se usar a função prompt

Uso
var stringLida = prompt( mensagem, valorInicial );
Parâmetros
mensagem (opcional). String que especifica a mensagem a mostrar na dialogBox de recolha do
valor. Por omissao é ‘’’’.
valorInicial (opcional). String que especifica o valor inicial a ser colocado no campo de recolha. Por
omissao é "".

var idade = prompt("Quantos anos tem?", "");

Ultima actualização: 18-10-2011


Entrada/saída de dados ( a função confirm)

No caso particular da recolha de um valor booleano, é útil usar a função confirm

Uso
var res=confirm(mensagem);
Parâmetros
mensagem – string com a mensagem a afixar
Retorno
se o utilizador premiu OK res é true. Se o utilizador premiu Cancel res é false.

var answer =confirm("Continuar a execução?");


if (answer == true) {
... // É para continuar!
}
else {
... //É para Cancelar!
}

Ultima actualização: 18-10-2011


strings Caracteres especiais que se
podem incluír dentro de strings

Caracteres Meaning
\b Backspace
• Uma string consiste em 0 ou mais caracteres delimitados
por plicas ‘ ou aspas ". Os delimitadores têm de ser do \f Form feed

mesmo tipo- ambos aspas ou ambos plicas. Exemplos: \n New line


\r Carriage return
"blah" \t Tab
‟blah‟
\’ Apostrophe or single quote
"1234"
"one line \n another line" \" Double quote
\\ Backslash character (\)
\XXX The character with the Latin-1
encoding specified by up to three
•A um valor do tipo string podem ser aplicados as octal digits XXX between 0 and 377.
propriedades e métodos dos objectos String For example, \251 is the octal
sequence for © (copyright) symbol.
• Exemplos: \xXX The character with the Latin-1
encoding specified by the two
hexadecimal digits XX between 00
var s="abc"; and FF. For example, \xA9 is the
alert(s.length); // 3 hexadecimal sequence © (copyright)
symbol.
\uXXXX The Unicode character specified by
the four hexadecimal digitsXXXX. For
example, \u00A9 is the Unicode
sequence for © (copyright) symbol.

Ultima actualização: 18-10-2011


Arrays
 array é uma sequência de valores (elementos). Um array de strings é uma sequência de zero ou mais
expressões dentro de parêntesis rectos

var diasDaSemana= [ "domingo","segunda","terça", "quarta","quinta","sexta","sábado" ];


A variável diasDaSemana passa a ser uma referência para o array de comprimento 7 (isto é, com sete
elementos). O comprimento de um array pode ser obtido através da propriedade length.

alert("Numero de dias da semana= " + diasDaSemana.length);

 Os elementos de um array são acedidos através do seu índice (posição) . O primeiro elemento ocupa o
índice 0, o último ocupa o índice length-1.

Ex: diasDaSemana[2] acede ao terceiro elemento do array (a string "terça").

 Um array pode ser criado pela forma alternativa new Array(size) em que size indica o número de
elementos do array. Nesse caso todos os elementos ficam iniciados a null

Ex: var tab=new Array(5); // tab fica a referenciar um array de 5 elementos, todos com o valor null

var dias="";
for (var i=0; i < diasDaSemana.length; ++i)
dias += diasDaSemana[i] + "\n";
alert(dias);

Ultima actualização: 18-10-2011


Instruções
 A linguagem JavaScript tem um conjunto compacto mas completo de instruções. Nesta
secção são apresentadas as instruções do JavaScript, separadas do seguinte modo:

• Instruções condicionais: a instrução if ... else e a instrução switch


• Instruções de ciclo: as instruções while, for, do while e continue
• Instrução return
• Instrução break: usada na instrução switch e em casos excepcionais associada a ciclos
• Instrução expressão
• Instrução composta

 As instruções de manipulação de objectos (a instrução for..in e a instrução with) e as


instruções de tratamento de excepções (instruções try...catch e throw) serão analisadas
mais tarde

 Notas:

• As expressões são instruções quando terminadas por ;

• É possível usar mais que uma instrução sempre que aparecer a palavra instrução nas descrições
dos slides seguintes, usando a instrução composta:

instrução composta  { instruções ... }

Ultima actualização: 18-10-2011


Instrução if

if ( condição) instrução [ else instrução ]

• A parte das instruções que aparece dentro dos parêntesis rectos é opcional
• Se for necessário colocar mais que uma instrução nos ramos da instrução if
pode-se usar a instrução composta  { instruções ... }

function maiorDeTres( val1,val2,val3)


{
if (val1 > val2)
{
if (val1 > val3)
return val1;
else
A utilização da instrução return val3;
composta não é necessária }
neste exemplo, mas torna o else
código mais legível {
if (val2 > val3)
return val2;
else
return val3;
}
}
Ultima actualização: 18-10-2011
A instrução switch

switch (expression) {
case label1:
case label2:
instruções [ break; ]
case label3:
instruções[ break; ]
...
default :
instruções; var d = new Date(); // devolve um objecto com a data corrente
}
switch( d.getDay()) {
case 1: case 2: // segunda e terça-feiras
alert("um início de semana com muita energia!");
break;
A instrução switch, quando todos os case 3: // quarta
seus ramos terminam pela instrução alert("anime! Deve ter um joguito de futebol na televisão");
break;
break, é semelhante a uma cadeia de case 4: case 5: // quinta, sexta
instruções if -- else if -- else alert("O fim de semana está quase...");
break;
case 6: case 0: // sábado, domingo
alert("Com saudades do trabalho?...");
break;
default:
// nunca pode acontecer (se o getDay não tiver erros...)
alert("Mas que raio? Em que dia da semana é que estamos?");
}

Ultima actualização: 18-10-2011


*A instrução switch (II)

Se algum ou alguns ramos da instrução


swaitch não terminam por break, todas as
intruções do switch a partir do ramo inicial
são executadas, o que pode ter resultados
interessantes

var teste = prompt("digite um valor de 1 até 5");

switch(teste){
case '1':
alert('seu valor foi 1');
case '2':
alert('seu valor foi 2');
case '3':
alert('seu valor foi 3');
case '4':
alert('seu valor foi 4');
case '5':
alert('seu valor foi 5');
default:
alert('seu valor nao foi nenhum valor entre 1 e 5');
}

Ultima actualização: 18-10-2011


A instrução while

while ( condição) instrução

 Executa instrução enquanto condição for verdadeira. A instrução é


executada zero ou mais vezes.
var n=0;
var x=0;
 Exemplos
while( n < 10 ) {
n ++;
Obter a soma dos 10 primeiros inteiros x += n;
}

O comando while é semelhante ao comando for, porém na maioria das vezes o while é aplicado quando
não podemos determinar a quantidade de voltas que nosso ciclo vai ter

var i=1;
while(i <= 10)
{
document.write(i++ +’<br>’); //escrevendo e ao mesmo tempo adicionando um para a variável i
}

Ultima actualização: 18-10-2011


A instrução for

for ( [ expressaoInicial] ; [ condição] ; [ expressaoFimCiclo] ) instrução

 Descrição
 Executa instrução enquanto a avaliação de condição der true
 Avalia expressaoInicial antes da primeira avaliação de condição e expressaoFimCiclo no final de
cada ciclo

var notas0a20 = new Array(5,12,16);


function quantasPositivas(notas0a20) {
total=0
for (var i=0; i < notas0a20.length; i++) {
if (notas0a20[i] >= 10)
total++;
}
return total;
}

Ultima actualização: 18-10-2011


A instrução do...while

do instrução while ( expressão_de_condição)

 A instrução do..while executa a instrução associada até que expressão_de_condição seja


avaliada como false

Ler um valor inteiro


(através da função function getIntValue(min,max) {
prompt), dentro do
var i, lido;
intervalo [min, max]
do {
lido=prompt("Introduza um valor inteiro entre "+
min + "e" + max, min);
i= Number(lido);
}
while ( isNaN(i) || i < min || i > max);
return i;
}

Ultima actualização: 18-10-2011


*A instrução continue

continue [label]

 A instrução continue é usada para reiniciar um ciclo . Numa instrução while é reavaliada a
condição associada. Numa instrução for o ciclo termina sendo avaliada a expressão de final de
ciclo e começa um novo ciclo na avaliação da expressão de condição

 Exemplo
 o exemplo seguinte mostra um ciclo while com uma instrução continue que executa quando o valor de i
for 3. Assim, n toma, sucessivamente, os valores 1, 3, 7 e 12.

var i = 0;
var n = 0;
while (i++ < 5) {
if (i == 3)
continue;
n += i;
}

Ultima actualização: 18-10-2011


A instrução return

return [ expressão ]

 A instrução return só pode ser usada dentro de funções. Termina de imediato a


execução da função onde está inserida. A expressão associada (opcional) é o valor
retornado pela função

var tab =["0l2","121","16"];


var val=12
var i=0
function findValue(tab,val) {
for ( i=0 ; i < tab.length; ++i)
if (tab[i] == val)
return i;
return "nenhum é igual";
}

Ultima actualização: 18-10-2011


A instrução break
break [label]

A instrução break é usada para terminar um ciclo ou a instrução switch

Utilização da instrução break


para sair de um ciclo

for (i = 1;;i++) {
if (i > 10) {
break;
}
document.write(i);
}

Ultima actualização: 18-10-2011


*A instrução break (II)
 A instrução break pode ser associada à instrução label para
permitir o abandono de mais que um ciclo, como mostrado
no exemplo seguinte:

procurar um var matriz = [


[ 1, 0, 3, 4, 5, 6, 7, 8, 9, 10],
mento de uma [ 2, 3, 4, 7, 8, 9, 0, 7, 12, 6],
riz (array [10, 9, 8, 7, 6, 5, 4, 3, 2, 1]
];
mensional) de
ros com o var encontrou=false;
r0 for (var i=0; i < matriz.length; ++i) {
for (var j=0; j < matriz[i].length; ++j) {
if ( matriz[i][j] ==0)
{
document.write( "O valor 0 achado na posicão [" + i +"," + j + "] da matriz<br>");
encontrou= true;
}
}
}
if (encontrou==false)
document.write("O valor não foi encontrado");

Ultima actualização: 18-10-2011


Eventos em JavaScript
 As aplicações JavaScript em ambiente de browser são típicamente orientadas por eventos (event-
driven). Eventos ocorrem geralmente como resultado (directo ou indirecto) da interacção com o utilizador.

 Premir um elemento botão, modificar um elemento texto, ou mover o rato por cima de elemento
âncora são exemplos de eventos. Para o programa reagir a um evento, terão de ser definidos event
handlers, com onClick ou onChange

<a href="http://www.viseu.tv"
onMouseOver="javascript:window.status=„Ir para o site da televisão de viseu';return false;"
onMouseOut="javascript:window.status='';return false;" >
VISEU TV

</a>

O elemento âncora mostra a associação de código HTML


a handlers de eventos (onMouseOver, onMouseOut). a
instrução "return false;" garante que o evento não é
tratado por nenhum outro handler, o que poderia
comprometer o comportamento pretendido (Nota: este
processo de terminar a propagação de um evento só
funciona no Internet Explorer).

Ultima actualização: 18-10-2011


Tabela de eventos
nome de Handler Elementos a que se aplica Descrição
A, AREA, BUTTON, INPUT, LABEL, SELECT,
onblur the element lost the focus
TEXTAREA
onchange INPUT, SELECT, TEXTAREA the element value was changed
onclick Todos com visual a pointer button was clicked
ondblclick Todos com visual a pointer button was double clicked
A, AREA, BUTTON, INPUT, LABEL, SELECT,
onfocus the element got the focus
TEXTAREA
onkeydown Todos com visual a key was pressed down
onkeypress Todos com visual a key was pressed and released
onkeyup Todos com visual a key was released
onload BODY the document has been loaded
onmousedown Todos com visual a pointer button was pressed down
onmousemove Todos com visual a pointer was moved within
onmouseout Todos com visual a pointer was moved away
onmouseover Todos com visual a pointer was moved onto
onmouseup Todos com visual a pointer button was released
onreset FORM the form was reset
onselect INPUT, TEXTAREA some text was selected
onunload BODY the document has been removed

Ultima actualização: 18-10-2011


Eventos – exemplo (HTML)
<HTML>
<HEAD>

<TITLE> Quadrados e Raízes </TITLE>

<script type"text/javascript" >

O código está no slide seguinte


</script>

</HEAD>

<BODY onload="init();">

<label for="valor" > x </label>


<input type="text" id="valor" onkeyup="changedValue();" value="" />
código Unicode
<label for="vSquare" > x &#178; </label>
do símbolo ²
<input type="text" id="vSquare" readonly="true" >

<label for="vSquareRoot" > &#8730; x </label>


<input type="text" id="vSquareRoot" readonly="true" > código Unicode
do símbolo √
</BODY>

</HTML>

Ultima actualização: 18-10-2011


Eventos – exemplo (JavaScript)

var valEdit; function changedValue() {


var squareEdit; var value = valEdit.value;
var squareRootEdit;
squareEdit.value= square(value);
squareRootEdit.value=squareRoot(value);
function square(number) { }
return number * number;
}

function init() {
valEdit = document.getElementById("valor");
function squareRoot( x) { squareEdit = document.getElementById("vSquare");
var srx = 1; squareRootEdit= document.getElementById("vSquareRoot");
while (square(srx) < x) }
++srx;
return square(srx) > x ?
srx-1 :
srx;
}

Ultima actualização: 18-10-2011


Introdução aos objectos
Objectos são colecções de propriedades, que podem atributos e métodos

• Atributo é um valor identificado por um nome. O conjunto de atributos de um objecto define o seu
estado

Ex: document.body; // body é atributo do objecto document

•Método é uma propriedade que representa uma função associada ao objecto. O conjunto de métodos de
um objecto caracteriza o seu comportamento
Ex: document. getElementById(...); // getElementById é metodo do objecto document

 A linguagem JavaScript suporta três espécies de objectos:

• Objectos nativos (Math, Date, String, Array)


• Novos objectos criados pelo programa, para representar entidades
• Objectos providenciados pelo ambiente de execução do JavaScript. No caso de um browser
temos, como exemplos, o objecto window e o objecto document.

Nota: No Internet Explorer existe um quarto tipo de objectos, denominados objectos ActiveX, que permitem o
acesso a recursos externos ao browser

Ultima actualização: 18-10-2011


Criação de novos objectos

 É possível criar objectos com propriedades e métodos definidos pelo programador. Para isso
define-se uma função construtora e usa-se a instrução new para a criação dos objectos

Por exemplo, imagine que pretende criar objectos para representar carros. Para definir carro,
crie uma função que especifique as propriedades (atributos e/ou métodos) que quer associar a
um carro. Tal função denomina-se uma função construtora.
Carro é
função
construtora function Carro(fabricante, modelo, ano){
this.fabricante = fabricante;
this.modelo = modelo;
this.ano= ano;
}

A seguir, pode criar novos carros usando a instrução de criação de objectos (new):

var mycar = new Carro("Rover", "414 Si", 1997);

Ultima actualização: 18-10-2011


A palavra chave this

 A palavra-chave this só pode ser usada dentro de um método ou de uma função


construtora. this refere o objecto sobre o qual se invocou o método ou o objecto que está a
ser construído, no caso de uma função construtora.

 Syntaxe
this[. propriedade] ou this[.metodo( parametros...) ]

 Exemplo:
Seja o objecto Ponto com três propriedades - atributos (x,y) que representam as
coordenadas do ponto e método (dist) para calcular a distância a outro Ponto
function Ponto(x,y) { function Ponto_dist( p1) {
this.x=x; var distx= this.x - p1.x
this.y = y; var disty= this.y - p1.y;
this.dist= Ponto_dist; return Math.sqrt(distx*distx + disty*disty);
} }

var p1= new Ponto(2,3), p2= new Ponto(6,6);


alert("distancia de p1 a p2 = " + p1.dist(p2));

Ultima actualização: 18-10-2011


Exemplo de criação de objectos - objecto Counter
Pretende-se criar objectos contadores como os
mostrados no jogo de ping-pong. Deve ser possível
definir o módulo de contagem, o número de digitos que
se pretende afixar (com zeros à esquerda), a dimensão
de cada dígito e o elemento onde o contador é inserido

new Counter(table, //elemento pai


0, // valor inicial
22, // módulo de contagem
30, // comprimento dígitos
60); // altura dígitos

Nome Descrição
value valor corrente do contador

Atributos nDigs número de dígitos da afixação do valor


maxValue módulo de contagem
viewer elemento HTML onde o contador se mostra

show mostra o contador na página


dec decrementa módulo maxValue e mostra
Métodos
inc incrementa módulo maxValue e mostra

Ultima actualização: 18-10-2011


utilização do objecto Counter

<style type="text/css">
body { background-color : blue }
#counterWrapper {
margin-left: 20%; margin-bottom: 10%; width: 125px; height: 60px; }
background-color : rgb(0,0,0);
padding: 5px; border-style=inset;
}
</style>

<BODY onload="init();">
<div id="counterWrapper" > </div>
<input style="clear : both"
type="button"
value="Increment"
onmousedown="startInc();"
onmouseup="stop();"
/>
<input type="button"
value="Decrement"
onmousedown="startDec();"
onmouseup="stop();"
/>
</BODY>

Ultima actualização: 18-10-2011


utilização do objecto Counter (script)
O código do objecto
Counter está no ficheiro
counter.js
<!-- importar implementação do objecto Counter -->
<script type="text/javascript" src="../javascript/counter.js"> </script>

<script type="text/javascript" >

var counter;
var counterWrapper;
var interval;

function init() {
counterWrapper= document.getElementById("counterWrapper");
counter = new Counter(counterWrapper,0,100,20,40);
counter.show();
}
A instrução invoca o método
function startInc() { show do objecto counter.
interval=window.setInterval("counter.inc()", 50);
Dentro do método show,
}
function stop() { this corresponde ao objecto
interval=window.clearInterval(interval); counter sobre o qual foi
} invocado o método
function startDec() {
interval=window.setInterval("counter.dec()", 50);
}
</script>

Ultima actualização: 18-10-2011


objecto Counter (implementação I) métodos de
Counter

afixar o valor corrente


function Counter_show() { na página
var aux = this.value;
var images= this.viewer.childNodes;
for (i= images.length-1; i >=0; --i) {
var dig = aux %10;
aux= Math.floor( aux /10);
// gerar o nome do ficheiro com o gif correspondente
var gifName = "images/digits/" + dig + "7SEG.GIF";
images[i].src= gifName;
}
this.viewer.style.visibility="visible"; incrementa o valor
}
módulo maxValue e
function Counter_increment() { mostra o novo valor
this.value++;
if (this.value == this.maxValue+1) this.value=0;
this.show();
}

decrementa o valor
function Counter_decrement() { módulo maxValue e
this.value--; mostra o novo valor
if (this.value < 0) this.value=this.maxValue;
this.show();
}

Ultima actualização: 18-10-2011


classe Counter (implementação II)
A função construtora de Counter

Parâmetros:

function Counter(viewer, value, module, w,h) { viewer : elemento html que vai conter os
// atributos digitos do contador
this.value=value;
this.nDigs = numberOfDigits(module-1); value: valor inicial
this.module = module;
module: módulo de contagem
this.viewer = viewer; função que retorna
w,h: comprimento e largura de cada
o total de dígitos de
// metodos digito
this.show = Counter_show; um número
this.inc = Counter_increment;
this.dec = Counter_decrement;

// construir os elementos imagem para os digitos e inseri-los em viewer


for(i=0; i < this.nDigs; ++i) {
var newImg = document.createElement("img");
newImg.style.width=w;
newImg.style.height=h;
this.viewer.appendChild(newImg);
}

this.viewer.style.visibility="hidden";
}

Ultima actualização: 18-10-2011


Objectos nativos

Em JavaScript existem os seguintes objectos nativos:

 Object objecto genérico


 Math Contém propriedades e métodos utéis em cálculos
matemáticos
 Date para trabalhar com datas
 String propriedades e métodos utéis para manipular strings
 Array propriedades e métodos utéis para manipular arrays

Ultima actualização: 18-10-2011


métodos genéricos para todos os objectos
Todos os objectos em JavaScript possuem os métodos indicados na tabela abaixo.
O resultado da chamada dos métodos depende, no entanto, do tipo do objecto.

Método Descrição
toString Retorna uma representação textual do objecto
valueOf Returna o valor primitivo (caso exista) do objecto corrente

Exemplos:
Se p for um ponto definido no slide anterior, então:

alert("p.toString()=" + p.toString()",p.valueOf()=" + p.valueOf() );

var s= new String("abc");


alert("s.toString()=" + s.toString() + ",s.valueOf()=" + s.valueOf() );

Ultima actualização: 18-10-2011


objectos Date

 objectos Date facilitam o tratamento de datas

 existem variadas formas de criar novos objectos Date:

 var date = new Date( [ parâmetros ] );


 Exemplos
var today= new Date(); // criar um objecto Date com a data corrente

var natal95 = new Date("December 25, 1995 00:00:00").


• A string representing a date in the following form: "Month day, year hours:minutes:seconds. if
you omit hours, minutes, or seconds, the value will be set to zero

 O alcance de datas é de -100,000,000 dias até 100,000,000 days relativos a 1


de Janeiro de 1970

Ultima actualização: 18-10-2011


objectos Date (II)
Método Descrição
getDate Returns the day of the month (0..31)
getDay Returns the day of the week (0..6)
getFullYear Returns the full year (in 4 digits)
getHours Returns the hour (0..23)
getMilliseconds Returns the milliseconds (0..999)
getMinutes Returns the minutes (0..59)
getMonth Returns the month in the specified date according to local time.
getSeconds Returns the seconds (0..59)
setDate Sets the day of the month
setFullYear Sets the full year
setHours Sets the setMilliseconds
setMinutes Sets the minutes
setMonth Sets the month
setSeconds Sets the seconds
toGMTString Converts a date to a string, using the Internet GMT conventions

Ultima actualização: 18-10-2011


O objecto Math

Propriedade Descrição Método Descrição


abs Returns the absolute value of a number.
E Euler’s constant and the
base of natural logarithms, acos Returns the arccosine (in radians) of a number.
approximately 2.718. asin Returns the arcsine (in radians) of a number.
LN10 Natural logarithm of 10, atan Returns the arctangent (in radians) of a number.
approximately 2.302.
atan2 Returns the arctangent of the quotient of its arguments.
LN2 Natural logarithm of 2, ceil Returns the smallest integer greater than or equal to a number.
approximately 0.693.
cos Returns the cosine of a number.
LOG10E Base 10 logarithm of E exp Returns Enumber, where number is the argument, and E is Euler’s,
(approximately 0.434). constant, the base of the natural logarithms.

LOG2E Base 2 logarithm of E floor Returns the largest integer less than or equal to a number.
(approximately 1.442).
log Returns the natural logarithm (base E) of a number.
PI Ratio of the circumference max Returns the greater of two numbers.
of a circle to its diameter, min Returns the lesser of two numbers.
approximately 3.14159. pow Returns base to the exponent power, that is, baseexponent.

SQRT1_2 equivalently, 1 over the random Returns a pseudo-random number between 0 and 1.
square root of 2 - round Returns the value of a number rounded to the nearest integer.
approximately 0.707.
sin Returns the sine of a number.
SQRT2 Square root of 2, sqrt Returns the square root of a number.
approximately 1.414.
tan Returns the tangent of a number.

Ultima actualização: 18-10-2011


objectos String

Atributo Tipo Descrição ReadOnly


length Number Reflects the length of the string. S

Método Descrição
charAt(index) Returns the character at the specified index
charCodeAt(index) Returns a number indicating the Unicode value of the character at the given index

concat(s1,s2,...) Combines the text of two strings and returns a new string
indexOf(str [, firstIdx]) Returns the index within the calling String object of the first occurrence of the specified value, or -1 if not
found
lastIndexOf(str [, firstIdx]) Returns the index within the calling String object of the last occurrence of the specified value, or -1 if not
found
slice(idxStart [, idxEnd]) Extracts a section of a string and returns a new string
split( separator[nSplits]) Splits a String object into an array of strings by separating the string into substrings

substr(idxStart, nChars) Returns the characters in a string beginning at the specified location through the specified number of
characters
substringIidxStart,idxEnd) Returns the characters in a string between two indexes into the string
toLowerCase() Returns the calling string value converted tolowercase
toSource() Returns an object literal representing the specified object. You can use this value to create a new object

toString() Returns a string representing the specified object


toUpperCase() Returns the calling string value converted to uppercase
valueOf() Returns the primitive value of the specified object

Ultima actualização: 18-10-2011


*A instrução with

with ( object) { instruções }

 A instrução with define o objecto onde são procurados por omissão os nomes referidos no
programa
 Se um nome existe como propriedade do objecto referido na instrução with englobante então esse
objecto é usado.
 Senão, o nome é entendido como o de uma variável local, ou global

 Exemplo: A instrução é especialmente útil com objectos usados em expressões, como o


objecto Math

var a, x, y; var a, x, y;
var r=10; var r=10;
with (Math) {
a = PI * r * r; a = Math.PI * r * r;
x = r * cos(PI); x = r * Math.cos(Math.PI);
y = r * sin(PI/2); y = r * Math.sin(Math.PI/2);
}

Ultima actualização: 18-10-2011


Hierarquia de Objectos do Browser

 O browser instancia um conjunto de objectos que


permitem a manipulação em javascript dos vários
elementos das páginas carregadas.

 Os atributos e métodos do objecto window podem window location

ser acedidos sem referir explicitamente o objecto


• Exs: window.document  document
window.alert("viva!")  alert("viva!") document anchors

 Nos slides seguintes apresentam-se as Atributos e


métodos mais relevantes dos objectos: history forms checkbox
• window
• document
• location navigator buttons
• navigator images

links radio
Excerto da hierarquia de
objectos representantes dos
documentos html acedidos
numa sessão do browser

Ultima actualização: 18-10-2011


O objecto window (Atributos e handlers de eventos)
Atributos

Atributo Descrição
screenLeft Retrieves the x-coordinate of the upper left-hand corner of the browser's client area, relative to the upper left-
hand corner of the screen.
screenTop Retrieves the y-coordinate of the top corner of the browser's client area, relative to the top corner of the screen.
status Sets or retrieves the message in the status bar at the bottom of the window.
document Represents the HTML document in a given browser window.
history Contains information about the URLs visited by the client.
location Contains information about the current URL.
navigator Contains information about the Web browser.
screen Contains information about the client's screen and rendering capabilities.

handler Descrição
onblur Fires when the object loses the input focus.
Handlers de eventos onfocus Fires when the object receives the focus.
onload Fires immediately after the browser loads the object.

onresize Fires when the size of the object is about to change.

onunload Fires immediately before the object is unloaded.

Ultima actualização: 18-10-2011


O objecto window (métodos)
O objecto window oferece um conjunto de serviços úteis para a criação de aplicações interactivas e a
possibilidade de navegar nas páginas acedidas durante a sessão.

Método Descrição Exemplo


alert(msgStr) Displays a dialog box containing an application-
defined message.
Executa repetidamente o código Javascript var timer=
setInterval(codigo, presente na string codigo de cada vez vez que setInterval(“tick()”,1000);
timeVal) deccorer o tempo (em miliseg.) definido em // invoca a função tick todos os
timeVal // segundos
Cancels the interval previously started using the var idInt=setInterval(f,10);
clearInterval(intervalId)
setInterval method. clearInterval(idInt);
close() Closes the current browser window
Displays a confirmation dialog box that contains
confirm(msgStr) an optional message as well as OK and Cancel
buttons.
navigate(urlStr) Loads the specified URL to the current window.

open(urlStr) Opens a new window and loads the document


specified by a given URL.
prompt(msgStr, valStr) Displays a dialog box that prompts the user with a
message and an input field.
Executa o código Javascript presente na string var timer= setTimeout(“fim();”,
setTimeout(codigo, timeVal) codigo de quando deccorer o tempo (em 2000);
miliseg.) definido em timeVal //invoca a função fim após 2
segundos
var idTimer=setTimeout(f,10);
clearTimeout(timerId) Cancels a time-out that was set with the clearTimeout(idTimer);
setTimeout method.

Ultima actualização: 18-10-2011


* Objecto navigator
O objecto Navigator permite obter informações acerca do browser

Atributo Tipo Descrição R/O


appCodeName String Retrieves the code name of the browser. S
appMinorVersion String Retrieves the application's minor version value. S
appName String Retrieves the name of the browser. S
appVersion String Retrieves the platform and version of the browser. S
browserLanguage String Retrieves the current browser language. S
cookieEnabled String Retrieves whether client-side persistent cookies are enabled in the browser. S
Persistent cookies are those that are stored on the client-side computer.
cpuClass String Retrieves a string denoting the CPU class. S
online String Retrieves a value indicating whether the system is in global offline mode. S
platform String Retrieves the name of the user's operating system. S
systemLanguage String Retrieves the default language used by the operating system. S
userLanguage String Retrieves the operating system's natural language setting. S

Ultima actualização: 18-10-2011


* Objecto location
 O objecto location permite aceder às características do URL da página corrente.

Propriedades

Atributo Tipo Descrição


hostname String Sets or retrieves the host name part of the location or URL.

href String Sets or retrieves the entire URL as a string.

pathname String Sets or retrieves the file name or path specified by the object.

protocol String Sets or retrieves the protocol portion of a URL.

Método Descrição
reload() Reloads the current page.
replace(urlStr) Replaces the current document by loading another document at the specified URL.

Ultima actualização: 18-10-2011


DOM (Document Object Model)
O DOM é um standard do W3C que especifica as propriedades dos objectos que
representam os elementos existentes em documentos HTML (e noutras linguagens baseadas em
marcas). Tanto o Internet Explorer como o NetScape respeitam, de forma geral, o standard DOM.
Nesta secção são descritos as interfaces DOM mais utilizados.
Nós DOM que
representam o excerto de
Elementos
documento HTML à
esquerda
<TABLE>
<TBODY>
<TR>
<TD>Shady Grove</TD>
<TD>Aeolian</TD>
</TR>
<TR>
<TD>Over the River, Charlie</TD>
<TD>Dorian</TD>
</TR>
</TBODY>
</TABLE>

Nós de texto

Ultima actualização: 18-10-2011


DOM (genérico)
O diagrama mostra as interfaces DOM genéricas, isto é,
aquelas que existem em qualquer documento baseado em
marcas, mesmo que não seja HTML. Neste contexto, A ligação entre os nós representa
chamamos interface à descrição de um conjunto de atributos e uma associação "é um": por
métodos. Um objecto que respeita a interface Node é um Node exemplo, a interface Document
porque contém todas as propriedades descritas em Node. A também é uma interface Node, ou
maior parte dos objectos DOM são Nodes. As excepções são seja, possui todas os atributos e
objectos que representam sequências de Nodes, como métodos descritas em Node
NameNodeMap e NodeList

Ultima actualização: 18-10-2011


Atributos de Node
A tabela mostra as propriedades
comuns a todos os objectos que
representam elementos e texto em
Propriedades documentos HTML

Propriedade Tipo Descrição Read/Only

nodeName String. O nome do nó S

nodeType Number. O tipo do nó (elemento, texto, S


comentário...)
parentNode Node O elemento pai S
childNodes NodeList A coleccção de nós filhos S
firstChild Node O primeiro filho. null se não existir S
lastChild Node O último filho. null se não existir S
previousSibling Node O irmão anterior S
nextSibling Node O irmão seguinte S
attributes NamedNodeMap A colecção de atributos S
ownerDocument Document O documento a que pertence o nó S

Ultima actualização: 18-10-2011


Tipos de Nodes (valores do campo NodeType)

Nome Valor

ELEMENT_NODE 1

ATTRIBUTE_NODE 2

TEXT_NODE 3

CDATA_SECTION_NODE 4

PROCESSING_INSTRUCTION_NODE 7

DOCUMENT_NODE 9

COMMENT_NODE 8

Ultima actualização: 18-10-2011


métodos de Node
A tabela mostra os métodos que
são comuns a todos os objectos
que representam elementos e texto
Métodos em documentos HTML

Método Parâmetros Retorna Descrição


insertBefore(newChild, refChild) newChild : Node Node Insere o novo nó filho newChild
refChild: Node antes do nó filho refChild. Retorna
newChild

replaceChild(newChild, oldChild) newChild : Node Node Substitui o nó filho oldChild por


oldChild : Node newChild. Retorna oldChild

removeChild(oldChild) oldChild : Node Node Retira o nó filho oldChild. Retorna


oldChild.

appendChild(newChild) newChild : Node Node Acrescenta newChild como ultimo


filho. Retorna newChild

hasChildNodes() Não tem Boolean true se o elemento tiver filhos

cloneNode(deep) deep : Boolean Node Cria um nó idêntico ao nó corrente.


a true indica que os nós Retorna o novo nó
filhos também são copiados

Ultima actualização: 18-10-2011


Propriedades de NamedNodeMap

Certas propriedades de objectos


que representam elementos HTML
referenciam objectos
Atributos NamedNodeMap, que não são
mais que colecções de pares nome-
valor, em que nome é uma string.
Nome Tipo Descrição R/O São usados, por exemplo, para
length Number indica o número de nós S representar os atributos de um
do NodeMap elemento

Métodos

Método Descrição
getNamedItem(name) retorna o valor (Node) associado ao nó name. Se nodeMap for uma variável que
referencia um NodeMap então:
nodeMap.getNamedItem ("item1")  nodeMap["item1"]
setNamedItem(arg) acrescenta ao NodeMap o nó indicado
removeNamedItem(name) remove do NodeMap o nó name
item(index) retorna o nó na posição index. Se nodeMap for uma variável que referencia um
NodeMap então: nodeMap.item(2)  nodeMap[2]

Ultima actualização: 18-10-2011


Propriedades de NodeList
Certas propriedades de objectos
que representam elementos HTML
referenciam objectos NodeList, que
Atributos não são mais do que uma
sequência de nós. São usados, por
exemplo, para representar os
Nome Tipo Descrição R/O elementos filhos de um elemento
length Number indica o número de nós S
na sequência

Métodos

Método Descrição
item(index) retorna o nó na posição index. Se nodeList for uma variável que referencia um NodeList
então: nodeList.item(2)  nodeList[2]

Um NodeList pode ser visto


com um Array de nós

Ultima actualização: 18-10-2011


Propriedades de Text e Comment

Atributos

Nome Tipo Descrição Readonly


data String. representa o texto N
length Number Número de caracteres do texto S

Métodos
Método Parâmetros Retorna Descrição
substringData(offset, count) offset : Number. String retorna a substring do texto
count : Number com dimesão count a partir de
offset
appendData(arg) arg: String Nada acrescenta a string arg ao texto
insertData(offset, arg) offset : Number Nada insere a string arg a partir de
arg : String offset
deleteData(offset, count) offset : Number Nada apaga count caracteres do
count : Number texto a partir de offset
replaceData(offset, count, arg) offset : Number Nada substitui count caracteres a
count : Number partir de offset pela string arg
arg : String

Ultima actualização: 18-10-2011


Attr (atributo)

Attr tem todas as propriedades de Node bem como as propriedades da tabela abaixo

Propriedades

Nome Tipo Descrição Readonly


name String nome do atributo S
specified Boolean indica se o atributo está S
especificado no elemento
value String valor do atributo N

Ultima actualização: 18-10-2011


DOM (excerto da hierarquia de objectos para documentos HTML)
A maior parte dos
objectos para
representar
documentos HTML
são Nodes.
HTMLCollection é a
excepção

Ultima actualização: 18-10-2011


propriedades de HTMLCollection

Atributos

Propriedade Tipo Descrição ReadOnly

length Number Total de Nós da colecção S

Métodos

Método Parâmetros Retorno Descrição

item(index) Number index Node devolve o nó da colecção de índice


index. Em caso de falha retorna null
namedItem(name) String name Node Devolve o nó da colecção com id
name. Em caso de falha retorna null

Uma HTMLCollection pode ser vista


com um Array de nós, isto é, se col
for uma HTMLCollection, então
col.item(i)  col[i]

Ultima actualização: 18-10-2011


attributos do objecto document

Atributos Tipo Descrição R/O

title String. O valor do elemento TITLE N

referrer String. O URL da página que permitiu a negação a este documento S

URL String. O URL completo do documento S

body HTMLElement O objecto que representa o elemento body N

images Colecção das imagens do documento S


HTMLCollection

links Colecção das imagens do documento S


HTMLCollection

forms HTMLCollection Colecção das forms do documento S

anchors HTMLCollection Colecção dos elementos âncora do documento S

cookie String lista de coockies na forma nome1=valor1;nome2=valor;... N

Ultima actualização: 18-10-2011


métodos do objecto document
Método Parâmetros Retorna Descrição
Attr cria um atributo com o nome
createAttribute(atrName) atrName: String especificado e valor null
Comment cria um objecto comentário com a string
createComment(strComment) strComment: String strComment.
Element cria um elemento de nome elemName
createElement(elemName) elemName: String Ex: document.createElement("img") cria
um objecto img.
Text cria um nó de texto com os caracteres
createTextNode(strText) strText: String
indicados em strText
Element retorna o objecto de id strId.
getElementById(strId) strId: String

NodeList retorna a sequência de objectos de nome


getElementsByName(strName) strName: String strName

open() Não tem Nada abrir o documento para injectar HTML


close() Não tem Nada fechar o documento préviamente aberto
e forçar a visualização das alterações
write(msg) msg : String Nada escreve texto HTML no documento,
desde que este esteja aberto
writeln(msgr) msg : String Nada escreve texto HTML no documento,
seguido de uma mudança de linha,desde
que o documento esteja aberto

Ultima actualização: 18-10-2011


propriedades de um elemento genérico HTML (HTMLElement)

Attr tem todas as propriedades de Element bem como as propriedades da tabela abaixo

Propriedades

Propriedade Tipo Descrição Readonly


id String. O valor do atributo id N
title String. O valor do atributo title N
lang String. O valor do atributo lang N
dir String. O valor do atributo dir N
className String. O valor do atributo class. Denomina-se N
className porque class é palavra
resevada em JavaSCript

Ultima actualização: 18-10-2011


Propriedades de HTMLInputElement
Nome Tipo Descrição Readonly
O valor inicial no caso de input tipo text
defaultValue String N
Atributos ou password
o estado inicial no caso de input tipo
defaultChecked Boolean N
radio ou checkbox
o texto alternativo caso o browser não
HTMLInputElement tem alt String N
possa mostrar o elemento
todas as propriedades de
o estado corrente no caso de input tipo
HTMLElement bem como checked Boolean N
radio ou checkbox
as propriedades da tabela
ao lado máximo de caracteres do input caso seja
maxLength Number N
text ou password
name String identificador de grupo para radio buttons N
a true se não poder ser alterado (text ou
readOnly Boolean N
password)
type String o tipo de elemento input N
value String o valor associado ao elemento N

Método Descrição
blur() retira o foco do elemento
Métodos focus() coloca o foco no elemento
select() simula uma selecção no elemento

click() simula um click no elemento

Ultima actualização: 18-10-2011


Propriedades de HTMLSelectElement
Propriedade Tipo Descrição Readonly
type String a string "select-multiple" ou "select- S
Atributos one", dependendo do atributo multiple
selectedIndex Number o índice do elemento seleccionado, a S
começar em 0. Se nenhum elemento está
selccionado, vale -1
value String o valor do atributo value do elemento N
HTMLSelectElement seleccionado
tem todas as length Number o número de opções S
propriedades de options HTMLCollection uma colecção com as opções S
HTMLElement bem
multiple Boolean true se for de selecção múltipla N
como as propriedades
das tabelas ao lado size Number o total de linhas visíveis N
tabIndex Number A tecla tab permite navegar dentro dos N
elementos de um form(taborder).
tabIndex define índice no taborder.

Método Parâmetros Retorna Descrição


Métodos add(element, before) element : HTMLElement before :HTMLElement acrescenta uma opção
remove(index) index : long Nada remove a opção de
índice index
blur() Não Tem Nada retira o foco
focus() Não Tem Nada pôe o foco

Ultima actualização: 18-10-2011


Propriedades de HTMLOptionElement

HTMLOptionElement tem todas as propriedades de HTMLElement bem como as propriedades da tabela


abaixo

Propriedades

Nome Tipo Descrição Readonly


defaultSelected Boolean valor da opção seleccionada à S
priori
text String o texto contido na opção S
index Number o índice (a começar em 0) da S
opção no elemento select a
que pertence
selected Boolean true se a opção for a N
seleccionada
value String o valor do atributo HTML value N

Ultima actualização: 18-10-2011


Propriedades de HTMLTextAreaElement
HTMLTextAreaElement tem todas as propriedades de HTMLElement bem como as propriedades das
tabelas abaixo

Nome Tipo Descrição R/O


Atributos defaultValue String o valor inicial N
cols Number comprimento do elemento em N
caracteres
name String o nome do elemento se está N
dentro de um form
readOnly Boolean true se for só de leitura N
rows Number o número de linhas vísiveis do N
elemento
type String a string "textarea" S
value String o texto associado ao elemento N

Métodos Método Descrição


blur() retira o foco do elemento
focus() poe o foco no elemento
select() seleccionado o texto do elemento

Ultima actualização: 18-10-2011


Propriedades e métodos de HTMLTableElement
HTMLTableElement tem todas as propriedades de HTMLElement bem como as propriedades das
tabelas abaixo

Propriedades Métodos

Propriedade Tipo R/ Método Parâmetros Retorno


O
caption HTMLTableCaptionElement N createTHead() Não tem HTMLTHeadElement
tHead HTMLTableSectionElement N deleteTHead() Não tem Não tem
tFoot HTMLTableSectionElement N
createTFoot() HTMLTFootElement Não tem
rows HTMLCollection N
tBodies HTMLCollection N deleteTFoot() Não tem Não tem

createCaption() Não tem HTMLCaptionElement

deleteCaption() Não tem Não tem

insertRow(index) Number index HTMLRowElement

deleteRow(index) Number index Não tem

Ultima actualização: 18-10-2011


Propriedades de HTMLTableRowElement
HTMLTableRowElement tem todas as propriedades de HTMLElement bem como as propriedades
definidas aqui

Propriedade Tipo R/O


Atributos
rowIndex Number S
sectionRowIndex Number S
cells HTMLCollection S

Método Parâmetros Retorno


Métodos
insertCell(index) index :Number HTMLTableCellElement
deleteCell(index) index : Number Não tem

Ultima actualização: 18-10-2011


propriedades de HTMLTableCellElement
HTMLTableCellElement tem todas as propriedades de HTMLElement bem como as propriedades
definidas aqui

Propriedades

Propriedade Tipo Descrição R/O


índice da célula (a começar em zero) na linha a que
cellIndex Number S
pertence
abbr String abreviatura da célula N
colSpan Number total de colunas ocupadas pela célula N
height String altura da célula N
true se não houver mudançda automática de linha no
noWrap Boolean N
texto da célula
rowSpan Number total de linhas ocupadas pela célula N

Ultima actualização: 18-10-2011


Objecto que representa um evento de mouse
Apenas o NetScape 6.0 ou
superior suportam os objectos
evento apresentados!
Propriedades

Nome Descrição
screenX This read-only property is a number.
screenY This read-only property is a number.
clientX This read-only property is a number.
clientYr This read-only property is a number.
ctrlKey This read-only property is of type Boolean.
shiftKey This read-only property is of type Boolean.
altKey This read-only property is of type Boolean.
metaKey This read-only property is of type Boolean.
button This read-only property is of type Number.

Ultima actualização: 18-10-2011


Objecto que representa um evento de tecla
Apenas o NetScape 6.0 ou
superior suportam os objectos
evento apresentados!
Propriedades

Nome Descrição
outputString This property is of type String.
keyVal This property is of type int.
virtKeyVal This property is of type int.
inputGenerated This property is of type boolean.
numPad This property is of type boolean.

Ultima actualização: 18-10-2011


Anexos

 Elementos HTML de interacção

 Acesso a estilos em JavaScript

 Palavras Reservadas

 Bibliografia

 Índice

Ultima actualização: 18-10-2011


Elementos HTML de interação (inputs)
input
button

<input type="button" id="emergencyBtn" value="push me!" onClick="alert('Aggggghh!!!!');" />

input
password

Password <input type="password" id="txtPassword" />

input
radio

<input type="radio" name="ages" /> 1-10 years old


<input type="radio" name="ages"checked="true" />
11 years old
<input type="radio" name="ages" /> 12-120 years old

Ultima actualização: 18-10-2011


Elementos HTML de interação (inputs)

input
text

<input type="text "value="para inserir texto" id="textbox" size=15 />

Uncheck this check box for some free advice.


< input type="checkbox" checked="true" id="chk1" onclick="choosebox1()" />

input
checkbox

Ultima actualização: 18-10-2011


Elementos HTML de interacção (select e textarea)
multiple
select

<select id="cars" name="Cars" multiple>


<option value="1" selected>BMW
<option value="2">Porsche
<option value="3" selected>Mercedes
</select>

single
select

<select name="Cats" size="1">


<option value="1">Calico
<option value="2">Tortie
<option value="3" selected>Siamese
</select>
textarea

<textarea STYLE="overflow:hidden" id=txtComments>


The patient is in stable condition
</textarea>

Ultima actualização: 18-10-2011


Elementos HTML de interação (exemplo )
<div class="dialogBox" >
<div> <span> Nome: </span> <input id="name" type="text" value="Your Name" /> </div>
<div> <span> Password: </span><input type="password" id="passwdBox" /> </div>
<div>
Nível:
<div class="levels">
<div>
<span> Básico </span> No slide seguinte
<input type="radio" id="basico" name="level" value="0" checked />
</div> está o aspecto do
<div> formulário gerado
<span> Intermédio </span> pelo HTML,
<input type="radio" id="intermedio" name="level" value ="1" />
</div> depois de
<div> aplicada a style
<span> Avançado </span> sheet também
<input type="radio" id="avancado" name="level" value ="2" />
</div> apresentada
</div>
</div>
<div> Mudanças Automáticas: <input id="autoChanger" type="checkbox" checked="true" />
</div>
<div>
Imagens por seg.:
<select id="imagesPerSec" >
<option value="15" > Quinze </option>
<option value="20" selected="true"> Vinte </option>
<option value="25" > Vinte e Cinco </option>
<option value="30" > Trinta </option>
</select>
</div>
</div>

Ultima actualização: 18-10-2011


Elementos HTML de interação (exemplo)

.dialogBox { position : absolute ; top : 20%; left: 20% }


.dialogBox { background-color : blue ; padding: 20px; }
.dialogBox { font-family : "Arial"; font-size: 14px; color : yellow}

.dialogBox span { width: 5em }


.dialogBox .levels { margin-left : 3 em }

style sheet associada ao excerto


HTML do slide anterior para obter o
aspecto mostrado na figura à direita

Ultima actualização: 18-10-2011


Acesso a estilos em JavaScript
 todos os objectos DOM que representam elementos HTML possibilitam o acesso ao atributo style (inline style)
através de uma propriedade com o mesmo nome (style). A propriedade style é um objecto com propriedades
com os mesmos nomes dos atributos de estilo existentes, excepto quando se usam hiphens nos nomes dos
atributos de estilo. Nesse caso, o hiphen é omitido e a letra a seguir é colocada em maíuscula (por exemplo,
background-color chama-se em JavaScript backgroundColor)
<HTML>
<HEAD
<TITLE> Acesso a estilos em JavaScript</TITLE>
<script type="text/javascript" >
var showed=true;
var digit;
var toggle;
function mostraEsc() {
if (showed) {
digit.style.visibility="hidden"; toggle.value="Mostra";
}
else {
Embora o estilo por digit.style.visibility="visible"; toggle.value="Esconder";
omissão de visibility }
showed = !showed;
seja "inherit", o estilo }
mostrado é uma string
vazia! function init() {
digit = document.getElementById("digit");
toggle= document.getElementById(
Isto acontece porque a alert(digit.style.visibility);
propriedade style não }
representa o estilo </script>
"corrente", mas apenas </HEAD>
<BODY onload="init();" >
as regras de estilo <input type="button" value="Esconder" onclick="mostraEsc();" id="toggle"/>
definidas inline. <img src="c:\images\digits\9.gif" id="digit" />
</BODY>
</HTML>

Ultima actualização: 18-10-2011


Palavras Reservadas

Palavras reservadas

break with function return typeof


case do if switch var
catch else in this void
continue false instanceof throw while
default for null try
delete finally new true

Palavras reservadas mas não utilizadas

abstract double goto native static


boolean enum implements package super
byte export import private synchronized
char extends int protected throws
class final interface public transient
const float long short volatile

Ultima actualização: 18-10-2011


* Conceitos avançados

Esta matéria não faz parte do programa da disciplina, estando aqui


presente como informação para os alunos mais interessados

 Recursividade

 Excepções

Ultima actualização: 18-10-2011


Recursividade

 A recursividade é um instrumento de programação poderoso, pois permite resolver muitos


problemas de forma mais natural. Em JavaScript a recursividade exprime-se através de
uma função que se invoca, directa ou indirectamente, a ela própria.

 Exemplo  a função factorial

function factorial(n) {
n>0  n*(n-1)! if (n==0) return 1;
n! return n*factorial(n-1);
n=0  1 }

 Qualquer algoritmo recursivo segue o esquema geral da função factorial acima,


isto é:

 Caso tenha sido atingida a situação em que o resultado é imediato (no caso do factorial quando
n=0, n! é 1 por definição) é retornado o valor correspondente. A esta situação limite chama-se a
condição terminal da recursividade.
 Se a condição não tiver sido atingida, aplica-se a expressão que exprime a recursividade (no caso
do factorial n! = n*(n-1)! ). Note-se que é fundamental que cada invocação recursiva esteja mais perto
da condição terminal (convirja), pois é importante que o algoritmo termine! No caso do factorial isso é
óbvio. Em cada chamada, n diminui de uma unidade, logo chega a zero!

Ultima actualização: 18-10-2011


Recursividade (II)
Imagine que se pretende colocar os digitos de um número num array de inteiros, do dígito de maior peso para
o dígito de menor peso.
O dígito de menor peso é fácil de arranjar - se n for o número, n % 10 (resto da divisão inteira) é o dígito
de menor peso.
O número sem o dígito de menor peso também se obtém facilmente- se n é o número , Math.floor(n /10)
é o número ao qual se retirou o dígito de menor peso.
Podemos assim pensar num algoritmo para obter os sucessivos dígitos de um número:

var n = ...; // o número


var digits=new Array(); // array onde ficam os dígitos de n
var i=0;
do {
digits[i++] = n % 10;
n = Math.floor(n/10);
}
while (n> 0);

O problema é que os dígitos ficam no array por ordem inversa à pretendida. Como é que a recursividade nos
ajuda a resolver o problema?

Ultima actualização: 18-10-2011


Recursividade (III)
 A seguir mostra-se uma uma função recursiva que coloca os dígitos na ordem certa e que além disso coloca
zeros necessários no array para ocupar no mínimo ndigits caracteres
 Se o número for inferior a 10 então o objectivo está praticamente cumprido: basta colocar ndigits-1 a zero e de
seguida o número. Está encontrada a condição terminal da recursividade.
 Senão, temos de encontrar uma definição recursiva que se pode enunciar como:

1. Colocar no array o número sem o algarismo das unidades.


2. Colocar o algarismo das unidades

function arrayFromValue(numero, ndigits, digits) {


if (value < 10) {
// colocar tantos zeros quantos os necessários para ocupar ndigits casas
for (i=1; i < ndigs; ++i) {
digits[digits.length] = 0;
}
// agora escrever o caracter correspondente
digits[digits.length] = value;
} Colocar no array o
else { número sem o
arrayFromValue(Math.floor(value/10), ndigits-1, digits); algarismo da unidades
digits[digits.length] = value%10; (chamada recursiva)
} Colocar o algarismo
}
das unidades

Ultima actualização: 18-10-2011


Navegar na hierarquia de elementos do documento

<BODY onunload="closeWindows();" >


<input type="button" value="Show Nodes Tree" onclick="showTree();"/>
<div id="teste"> Teste </div>
</BODY>

Pretende-se fazer um programa em JavaScript


que tenha a capacidade de mostrar, numa
textarea de nova janela de browser criada para
o efeito, a hierarquia de elementos de qualquer
página. Aplicado ao body de documento HTML
definido acima, teria o resultado mostrado na
figura ao lado

<HTML>
<BODY>
<textarea id="screen" rows="20" cols="80">
</textarea>
</BODY>
</HTML> página que é usada para mostrar a
hierarquia de elementos da página corrente

Ultima actualização: 18-10-2011


Navegar na hierarquia de elementos do documento
a propriedade nodeType de qualquer elemento tem um valor inteiro
cujo significado é dado pelas strings da tabela nodeTypes
var newWindow;

var ELEMENT_NODE=1; // usada para fechar a janela auxiliar que mostra


// a hierarquia
function closeWindowScreen() {
if (newWindow != undefined) newWindow.close();
var nodeTypes= [ }
"EMPTY_NODE",
"ELEMENT_NODE", // função utilitária para indentar o inicio de cada
"ATTRIBUTE_NODE", // linha de acordo com a posicao do elemento na
// hierarquia
"TEXT_NODE",
function indent(page,level) {
"CDATA_SECTION_NODE", for (i=0; i < level; ++i) page.value +=" ";
"ENTITY_REFERENCE_NODE", }
"ENTITY_NODE",
"PROCESSING_INSTRUCTION_NODE", // função principal. Abre a janela auxiliar e invoca
"COMMENT_NODE", // a função recursiva sTree que escreve na textArea screen
"DOCUMENT_NODE", // a hierarquia existente no elemento body corrente
function showTree() {
"DOCUMENT_TYPE_NODE",
closeWindowScreen();
"DOCUMENT_FRAGMENT_NODE", newWin = window.open("screen.html");
"NOTATION_NODE" var screen;
]; screen=newWin.document.getElementById("screen");
sTree(document.body, screen, 0);
}

Ultima actualização: 18-10-2011


Navegar na hierarquia de elementos do documento
function sTree(elem, page, level) {
indent(page,level); page.value += nodeTypes[elem.nodeType] + ", nome=" + elem.nodeName;
if (elem.data != null) page.value += ", texto=" + elem.data;
page.value += "\n"; A função que percorre
if (elem.nodeType != ELEMENT_NODE) return; recursivamente a hierarquia de nós.
indent(page,level); page.value += "atributos:\n";
indent(page,level+1); Para cada nó mostra o tipo e o nome
var atribs= elem.attributes; e o valor.
if (atribs != undefined) {
var nUnspec=0, first=true; Se o nó for um elemento, mostra os
for (var i=0; i < atribs.length;++i) { atributos e os nós filhos, invocando-
if (atribs[i].specified) { se a si própria.
if (!first) page.value+=","; else first=false;
page.value += atribs[i].name + "=\"" + atribs[i].value + "\"";
}
else nUnspec++;
}
if (!first) page.value+="\n";
if (nUnspec != 0) {
indent(page,level+1); page.value += nUnspec + " atributos não especificados!\n";
}
}
indent(page,level); page.value += "filhos:\n";
if (!elem.hasChildNodes()) {
indent(page,level+1); page.value += "Não tem!\n";
}
else {
for (var i=0; i < elem.childNodes.length; ++i) sTree(elem.childNodes[i],page , level+1);
}
}

Ultima actualização: 18-10-2011


Tratamento de excepções – a instrução throw

throw expressão

 Excepções sinalizam situações de falha e são iniciadas pela instrução throw. Uma
excepção modifica o fluxo normal de execução do programa, que continua no
primeiro bloco catch que for encontrado no encadeamento de funções em que a
excepção foi iniciada.

 Caso não exista nenhum bloco de tratamento de excepções o script termina,


típicamente com uma janela indicativa de erro

 Exemplos:

throw "Erro de conversão";

throw 42;

Ultima actualização: 18-10-2011


A instrução try

try { instruções… }
[catch ( catchVar) { instruções…} ]
[finally { instruções…} ]

 The try...catch statement marks a block of statements to try, and specifies a response should an exception
be thrown. If an exception is thrown, the try...catch statement catches it.

 The try...catch statement consists of a try block, which contains one or more statements, and a catch
block, containing statements that specify what to do if an exception is thrown in the try block. That is, you
want the try block to succeed, and if it does not succeed, you want control to pass to the catch block. If any
statement within the try block (or in a function called from within the try block) throws an exception, control
immediately shifts to the catch block. If no exception is thrown in the try block succeed, the catch block is
skipped. The finally block executes after the try and catch blocks execute but before the statements
following the try...catch statement.

var undef;

try {
……
}
catch(e) {
alert("excepção: " + e);
}

Ultima actualização: 18-10-2011


Os blocos catch, finally

 The following example uses a try...catch statement. The example calls a function that
retrieves a month name from an array based on the value passed to the function. If the value
does not correspond to a month number (1-12), an exception is thrown with the value
"InvalidMonthNo".

function getMonthName (mo) {


// Adjust month number for array index (1=Jan, 12=Dec)
mo=mo-1;
var months= [
"Jan","Feb","Mar","Apr","May","Jun","Jul",
"Aug", "Sep", "Oct", "Nov", "Dec"];
if (months[mo] != null)
return months[mo];
else
throw "InvalidMonthNumber";
}

Ultima actualização: 18-10-2011


Bibliografia

Ultima actualização: 18-10-2011