JSguide

JavaScript (um guia simplificado)
ISEL 2001/2002 - Programação Ultima actualização:

DEETC - Secção de Programação 20-03-23
Sumário
Introdução  Eventos DOM Anexos

Conceitos Nucleares •Tabela •Hierarquia de interfac • Elementos HTML
•Exemplo es genéricas de interacção
•Comentários
•Variáveis •Node •input
Recursividade
•Identificadores •sequências
•select
•Valores Objectos •texto e comentários
•textarea
•Literais •Objectos Nativos •atributos
•exemplos
•Expressões •Object •interfaces específicas
•Operadores •Date para HTML •acesso a estilos
•Funções •Number •document •exemplo
•Strings •Math •elementos •palavras reservadas
•Arrays •String •input •bibliografia
•Instruções •Objectos do Browser •select e option
•if then else •window •textArea
•switch •navigator •table
•while •location •eventos
•for
•Instruções de manipulaçã •mouse
•do while
o (de objectos) •teclado
•continue
•Instrução for..in
•return
•break •Instrução with

O JavaScript e os ambientes de execução
 A linguagem JavaScript não define à priori mecanismos (objectos ou funções) para

utilização dos serviços disponibilizados pelo sistema operativo.
 Cada ambiente de execução - hospedeiro (host) de JavaScript - oferece um conjunto de

objectos que tornam a linguagem útil em diferentes contextos. Na disciplina de programação
vamos utilizar o ambiente disponibilizado pelos browsers, que é especialmente útil no
desenvolvimento da interface (gráfica) com o utilizador.
 Quando o JavaScript é usado no contexto de um browser são disponibilizados objectos que

permitem ler e/ou modificar atributos de todos os elementos da página e mesmo criar ou
remover elementos. Para além disso existem objectos que permitem interagir com o
browser, por exemplo, para abrir novas janelas ou navegar pelas páginas acedidas durante
a sessão.

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!");’ />
1. Como conteúdo do elemento script. <script type="text/javascript" >

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

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>

O JavaScript e a construção dinâmica de páginas
Uma característica especialmente interessante do JavaScript é a possibilidade de alterar

dinamicamente documentos HTML, quer enquanto estes estão a ser carregados pelo browser, quer na utilização
normal da página. A seguir mostra-se uma forma de acrescentar HTML ao documento, em tempo de
carregamento, usando o método document.write(mensagem). Este processo não é aconselhado, pois só
funciona em tempo de carregamento e não permite aceder e/ou modificar elementos já existentes. À frente veremos
como é possível aceder a elementos HTML em JavaScript.
<html>
<head>
<title>
O Primeiro Script
</title>
<style type="text/css">
p.scriptMessage { font-size : 20; color : blue }
</style>
</title>
<body>
<p> A mensagem seguinte foi gerada por um script <br/> embebido na página corrente </p>
<script type="text/javascript">
document.write("<p class='scriptMessage'> Olá Mundo! </p>");
</script>
</body>
</html>

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

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. */

Variáveis
 Variáveis permitem identificar valores (valores primitivos 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
inexistência a variável fica com o valor
 Declaração de variáveis
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 um 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!

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)

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!

Literais
 Literais são usados em JavaScript para representar valores. Chamam-se literais por que são
são colocados literalmente no texto do programa. Existem os seguintes literais:
 Inteiros
 Ex: 42, 0xFFF, -345.
 Literais booleanos
 true, false.
 Literais floating-point
 Ex: 3.1415, -3.1E12, .1e12, 2E-12
 Cadeias de caracteres (strings) literais
 Ex: "one line \n another line"
 Arrays literais
 Ex: ["French Roast", "Columbian", "Kona"]
 Ex: ["Lion", , "Angel"]
É possível omitir valores do array
 Objectos literais colocando vírgulas sem expressão
 apresentados mais tarde associada. Essas posições do array
ficam com o valor null

Expressões e Operadores
 Expressões são quaisquer sequências válidas de operadores e operandos (literais, variá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
 Certos operadores, como os operadores de afectação e os operadores de incremento e

decremento, descritos à frente, para além de gerarem um valor, têm também o efeito lateral
(side-effect) de modificar o valor do operando esquerdo. Por exemplo, a expressão 3+4 dá
7 como resultado. A avaliação da expressão x=2+5, também dá 7 como resultado, e, por
outro lado, coloca como conteúdo da variável x o valor 7.

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
(de) Bits
Operadores Afectação
Comparação
Lógicos (booleanos)
Especiais
 A prioridade relativa dos operadores está definida no slide

tabela de operadores eprecedências

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)

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
• Para converter um valor numérico (ou outro) em string, uma possibilidade é:

var str = String(valor);

Operadores bit a bit
 Os operadores bit a bit tratam os seus operandos como valores a 32 bits.
Operador Uso Descrição
Bitwise AND a&b Coloca a 1 no resultado os bits correspondentes nos operandos que estão
ambos a 1
Ex: 0xFE & 3 // retorna 2
Bitwise OR a|b Coloca a 1 no resultado os bits correspondentes nos operandos em que
pelo menos um dos bits está a 1
Ex: 0xFE | 1 // retorna 0xFF
Bitwise XOR a^b Coloca a 0 no resultado os bits correspondentes nos operandos que são
de igual valor (ambos a 1 ou ambos a 0).
Ex: var a=0x7; var b= 0x5; a ^ b // retorna 2
Bitwise NOT ~a Inverte os bits do operando.
Ex: ~0 // retorna 0xffff
Left shift a << b Retorna o valor a deslocado de b bits para a esquerda, enchendo com 0
pela direita
Ex: 2 << 2 // retorna 8
Sign-propagating a >> b Retorna o valor a deslocado de b bits para a direita, enchendo com o bit
right shift de sinal de a pela esquerda
Ex: -4 >> 2 // retorna -1
Zero-fill right shift a >>> b Retorna o valor a deslocado de b bits para a direita, enchendo com 0 pela
esquerda
Ex: -1 >> 1 // retorna 0x7fffffff

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
Para além do operador de afectação
básico (=) existem as variantes associadas a x <<= y x = x << y
operadores aritméticos, bit a bit e String,
x >>= y x = x >> y
mostradas na tabela ao lado.
x >>>= y x = x >>> y
Ex: a+= 3  a = a+ 3 x &= y x=x&y

retorna 7 se a valer 4 x ^= y x=x^y
x |= y x=x|y

Operadores de comparação
Regras de igualdade
(e desigualdade) entre
operandos
• Strings são comparadas alfabeticamente, carácter a carácter. São iguais se têm

exactamente a mesma sequência de caracteres. A string em que o primeiro carácter
diferente tenha o código maior, é considerada a string maior
• NaN é diferente de qualquer número, incluindo NaN.
•Zeros positivos e negativos são iguais
• Duas variáveis que referenciam objectos são iguais se referenciarem o mesmo
objecto.
• Valores booleanos são iguais se forem ambos true ou ambos false.
• Os valores null e undefined são iguais

Assumindo
Operadores de comparação II var1=3
var2=4
s1=“a”
s2=“b”
Operador Descrição Examplos que

retornam true
Equal == 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)
Not equal != 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)
Strict equal === Retorna true se os dois operandos forem iguais e do mesmo tipo 3 === var1
Strict not equal !== Retorna true se os dois operandos forem de valor ou tipo diferente var1 !== "3"
3 !== “3”
Greater than > true se o operando esquerdo for maior que o direito. var2 > var1
Greater than or equal >= true se o operando esquerdo for maior ou igual que o direito. var2 >= var1
var1 >= 3
Less than < true se o operando esquerdo for menor que o direito. var1 < var2
Less than or equal <= true se o operando esquerdo for menor ou igual que o direito. var1 <= var2
s1 <= s2
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

Operadores especiais
 Em JavaScript existem operadores que, por não se encaixarem em nenhuma das categorias
anteriores, são designados de operadores especiais :
• O operador ?:
• o operador ,
. o operador indexação [ ]
. o operador chamada a função ()
• delete
• in
• instanceof Estes operadores serão
• new analisados quando falarmos de
• typeof objectos
 O operador ?: é um operador ternário ( tem 3 operandos) expCondição ? exp1 : exp2
 Ex: (a > b) ? a : b; // O resultado da expressão é o maior dos

// valores a e b
 O operador vírgula (,) permite criar uma expressão através da concatenação de duas expressões. O
resultado é o da avaliação da segunda expressão. O operador é particularmente útil para fazer mais que
uma iniciação na instrução for.
 Ex: for ( var i= 0, res=0; i < 10; ++i) res += i;

Tabela de operadores e precedências
Operador Descrição
Prioridade . [] ()
Accesso a propriedades, índexação, chamadas a funções e sub-
expressões
++ — - ~ ! new typeof
Operadores unários e criação de objectos
+ void delete
*/ % Multiplication, division, modulo division
+- Addition, subtraction, string concatenation
<< >> >>> Bit shifting
Less than, less than or equal, greater than, greater than or equal,
< <= > >= in instanceof
instanceof
== != === !== Equality, inequality, strict equality, and strict inequality
& Bitwise AND
^ Bitwise XOR
| Bitwise OR
&& Logical AND
|| Logical OR
?: Conditional
_ = OP= Assignment, assignment with operation
, Multiple evaluation
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;
 Exemplo1 - O quadrado de um número }
function squareRoot( x) {
 Exemplo 2 - A raíz quadrada inteira de um número var srx = 1;
while (square(srx) < x) ++srx;
return square(srx) > x ? srx-1 : srx;
}
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); // a variável i fica com o valor 25
 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 = squareRoot ( square(5) ); // i vale ?....

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

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 é "undefined".
var idade = prompt(“Quantos anos tem?”, “”);

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(“Continar a execução?”);

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

Funções globais
Função Descrição Retorna Exemplo

Executa a string strCode, que contém código
valor
eval(strCode) JavaSCript . Retorna a avaliação da última eval("2+3") retorna 5
genérico
instrução existente em strCode
avalia um argumento para determinar se é um ifFinite(1/0) retorna

isFinite(exp) Boolean
número finito false
Converte a string (str), sequência de dígitos na parseInt("1001", 2)

parseInt(str [,base]) Number
base (base), em valor numérico retorna 9
isNaN( "a") retorna

isNaN(exp) Determina se o argumento é ou não valor numérico Boolean
true
Number("3.25")
Number(value) Converte o valor em número. (ver objecto Number) Number
retorna 3.25
Converte o valor em booleano. ( ver objecto Boolean( 10) retorna
Boolean(value) Boolean
Boolean) true
String( true) retorna
String(value) Converte o valor em string. (ver objecto String) String
"true"

strings Caracteres especiais que se
podem incluír dentro de strings
Char Meaning
• Um literal string consiste em 0 ou mais caracteres \b Backspace
delimitados por plicas ‘ ou aspas ". Os delimitadores têm de \f Form feed
ser do mesmo tipo- ambos aspas ou ambos plicas. \n New line
Exemplos: \r Carriage return
\t Tab
"blah"
’blah’ \’ Apostrophe or single quote
"1234" \" Double quote
"one line \n another line"
\\ Backslash character (\)
\XXX The character with the Latin-1 encoding
specified by up to three octal digits
•A um valor do tipo string podem ser aplicados as XXX between 0 and 377. For
example, \251 is the octal sequence for
propriedades e métodos dos objectos String © (copyright) symbol.
\xXX The character with the Latin-1 encoding
• Exemplos: specified by the two hexadecimal digits
XX between 00 and FF. For example, \
var s="abc"; xA9 is the hexadecimal sequence ©
(copyright) symbol.
alert(s.length); // 3
\uXXXX The Unicode character specified by the
four hexadecimal digitsXXXX. For
example, \u00A9 is the Unicode
sequence for © (copyright) symbol.

Arrays
 array é uma sequência de valores (elementos). Um array literal é 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);

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 ... }

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 return val3;
A utilização da instrução
}
composta não é necessária else {
neste exemplo, mas torna o if (val2 > val3) return val2;
código mais legível else return val3;
}
}

A instrução switch
A instrução switch é uma conveniente de programar um

switch (expression) { conjunto de alternativas, equivalente a uma cadeia de
case label1: instruções if-then-else
case label2:
instruções [ break; ]
case label3:
instruções[ break; ] function genTries() {
... with (Math) {
default : var ntries=floor(random()*5)+1;
instruções; var tries=new Array();
} var i=0;
switch (ntries) {
case 5:
tries[i++]= random();
case 4:
o que faz tries[i++]= random();
este case 3:
código?... tries[i++]= random();
case 2:
case 1:
}
return tries;
}
}

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;
}
Retornar o primeiro elemento filho do elemento passado como parâmetro

que é um elemento anchor. Retorna null se não existir nenhum
function findAnchor(elem) {
var child=elem.firstChild;
while (child != null) {
if (child.nodeName.toLowerCase() == "a")break;
child = child.nextSibling; // o próximo irmão
}
return child;
}

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
function quantasPositivas(notas0a20) {
for (var i=0, total=0; i < notas0a20.length; i++) {

if (notas0a20[i] >= 10)
total++;
}
return total;
}

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
function getIntValue(min,max) {
var i, lido;
do {
lido=prompt("Introduza um valor inteiro entre "+
min + "e" + max, min);
i= lido-0;
}
while ( isNaN(i) || i < min || i > max);
return i;
}

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

A instrução continue (II)
Exemplo de utilização da
instrução continue em
ciclos aninhados
linesLoop: é exemplo var nLinhas=0;

de label. As labels var matriz = [
identificador : [ 1, 2, 3, 4, 5, 6, 7, 8, 9, 10],
permitem identificar o [ 2, 3, 4, 7, 8, 9, 0, 7, 12, 6],
ciclo a continuar ou a [10, 9, 0, 7, 6, 5, 4, 3, 2, 1]
abortar em instruções ];
continue e break
linesLoop:
for (var i=0; i < matriz.length; ++i) {
for (var j=0; j < matriz[i].length; ++j) {
if ( matriz[i][j] ==0) {
++nLinhas;
continue linesLoop;
}
}
}
alert("existem " + nLinhas + " linhas com o valor zero!</br>");

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
function findValue(tab, val) {

for ( var i=0; i < tab.length; ++i)
if (tab[i] == val) return i;
return -1;
}

A instrução break
break [label]
Bom, foi feito em
A instrução break é usada para terminar um ciclo ou 27/10/2001...
a instrução switch
Utilização da instrução break

para sair de um ciclo function greetings() {
var d = new Date(); // devolve um objecto com a data corrente
var msgWeek=document.getElementById("greetingArea");
switch( d.getDay()) {
case 1: case 2: // segunda e terça-feiras
var images = document.images; msgWeek.value=
var i; "um início de semana com muita energia!";
for ( i=0; break;
i < images.length; case 3: // quarta
++i) { msgWeek.value=
"anime! Deve ter um joguito de futebol na televisão";
if (images[i].isMap) break;
break;
} case 4: case 5: // quinta, sexta
msgWeek.value="O fim de semana está quase...";
if (i < images.length) { break;
// foi encontrado um case 6: case 0: // sábado, domingo
// mapa na posição i msgWeek.value="Com saudades do trabalho?...";
............ break;
} default:
// nunca pode acontecer (se o getDay não tiver erros...)
msgWeek.value=
"Mas que raio? Em que dia da semana é que estamos?";
}
}

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:
<html>
<body>
<script type="lang/javascript";
var matriz = [
[ 1, 2, 3, 4, 5, 6, 7, 8, 9, 10],
[ 2, 3, 4, 7, 8, 9, 0, 7, 12, 6],
[10, 9, 8, 7, 6, 5, 4, 3, 2, 1]
Ex: procurar um ];
elemento de uma
matriz (array var encontrou=false;
pesquisa:
bidimensional) de for (var i=0; i < matriz.length; ++i) {
inteiros com o for (var j=0; j < matriz[i].length; ++j) {
if ( matriz[i][j] ==0) {
valor 0 encontrou= true;
break pesquisa;
}
}
}
if (encontrou)
document.write( "O valor 0 achado em matriz[" + i +"," + j + "]");
else
document.write("O valor não foi encontrado");
</script>
</body>
</html>

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.htmlgoodies.com"
onMouseOver="window.status='Go to the Goodies Home Page';return false;"
onMouseOut="window.status='';return false;" >
Click Here to see some good information on HTML
</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).

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

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 ² </label>
do símbolo ²
<input type="text" id="vSquare" readonly="true" >
<label for="vSquareRoot" > √ x </label>

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

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

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!

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?

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

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> página que é usada para mostrar a
</HTML> hierarquia de elementos da página corrente

a propriedade nodeType de qualquer elemento tem um valor inteiro
cujo significado é dado pelas strings da tabelanodeTypes
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
"DOCUMENT_NODE", screen // 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);
}

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

Introdução aos objectos
 Objectos em JavaScript são colecções de propriedades e métodos.
 Propriedade é um valor ou conjunto de valores (array ou objecto) que é elemento constituinte (membro)
do objecto e identificado por um nome.
Ex: document.body
 Método é uma propriedade que representa uma função membro do objecto

Ex: document.getElementById
 A linguagem JavaScript suporta três espécies de objectos:
1. Objectos nativos (Math, Date, String, Array e Number)

2. Novos objectos criados pelo programa
3. Objectos do programa hospedeiro (host), isto é, 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

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
 Number propriedades e métodos para números em geral
 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

O objecto Object
new Object();
 podem-se criar novos objectos sem propriedades usando a instrução:
 Exemplo : var obj= new Object(); // obj é uma referência para um novo objecto
 Podem-se acrescentar novas propriedades a qualquer objecto usando a forma normal de

afectar o valor propriedades. A propriedade é acrescentado ao objecto, caso não exista
 Exemplo: obj.name=“José Carlos”; // o objecto passou a ter a propriedade name com o

// valor “José Carlos”
 Aproveitando esta característica, podem-se criar objectos com propriedades que

representam conceitos importantes no programa
 Exemplo: a função Ponto retorna um novo objecto que representa um ponto, com
propriedades x e y, iniciadas com os valores passados como argumentos
function Ponto(x,y) {
var p = new Object();
p.x = x;
p.y = y;
return p;
}

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étodosdepende, no entanto, do tipo do objecto.
Método Descrição
toString Retorna uma representação textual do objecto
valueOf Returns 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 n= new Number(3);

alert("n.toString()=" + n.toString() + ",n.valueOf()=" + n.valueOf() );
var s= new String("abc");

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

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

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

O objecto Number
Normalmente não é necessário criar novos objectos Number, sendo usado o objecto Number pré-definido
Propriedade Descrição
MAX_VALUE The largest representable number.
MIN_VALUE The smallest representable number.
NaN Special "not a number" value. (também existe como propriedade global)
NEGATIVE_INFINITY Special value representing negative infinity- returned on overflow.
POSITIVE_INFINITY Special value representing infinity- returned on overflow.
Pode-se converter qualquer valor em valor numérico usando o objecto Number como uma função
var value= Number("123"); // value tem o valor numérico 123

var str= "2+3" ; var num = Number(str)l); // num vale NaN
strings (excepto no operador +) :
Se os seus caracteres constituirem um literal numérico é convertida no valor correspondente.
Regras de conversão
de valores não
Caso contrário em NaN
numéricos em valores
objectos  NaN
numéricos
null  0, undefined  NaN
false 0, true  1

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 acos Returns the arccosine (in radians) of a number.
logarithms, approximately asin Returns the arcsine (in radians) of a number.
2.718.
atan Returns the arctangent (in radians) of a number.
LN10 Natural logarithm of 10,
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.
exp Returns Enumber, where number is the argument, and E is Euler’s,
LOG10E Base 10 logarithm of E constant, the base of the natural logarithms.
(approximately 0.434).
floor Returns the largest integer less than or equal to a number.
LOG2E Base 2 logarithm of E
(approximately 1.442). log Returns the natural logarithm (base E) of a number.
max Returns the greater of two numbers.
PI Ratio of the circumference min Returns the lesser of two numbers.
of a circle to its diameter,
pow Returns base to the exponent power, that is, base exponent.
approximately 3.14159.
random Returns a pseudo-random number between 0 and 1.
SQRT1_2 equivalently, 1 over the
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.
sqrt Returns the square root of a number.
SQRT2 Square root of 2,
approximately 1.414. tan Returns the tangent of a number.

objectos String
Propriedade 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
A instrução for..in
for ( variavel in objecto) instrução
 A instrução for..in permite iterar sobre todas as propriedades de um objecto. Para cada
propriedade a instrução é executada. Variável tem o nome da propriedade corrente.
object[variável] permite aceder ao valor da propriedade.
 Esta instrução é especialmente útil na correção (debugging) de eventuais erros em

programas que usem objectos .
 Exemplo
function dump_props(obj, obj_name) {
var result = "";
for (var i in obj) {
result += obj_name + "." + i + " = " + obj[i] + "\
n";
}
return result;
}
 Para um carro com as propriedades make and model, o resultado podia ser:
car.make = Ford
car.model = Mustang

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

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.
window location
 As propriedades e métodos do objecto window
podem ser acedidos sem referir explicitamente o
objecto
• Exs: window.document  document document anchors
window.alert("viva!")  alert("viva!")
 Nos slides seguintes apresentam-se as propriedades history forms checkbox

e métodos mais relevantes dos objectos:
• window
• document navigator
images buttons
• location
• navigator
links radio
Excerto da hierarquia de
objectos representantes dos
documentos html acedidos
numa sessão do browser

O objecto window (propriedades e handlers de eventos)
Propriedades
Propriedade 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.
Evento 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.

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.
setInterval(func, timeVal) Executes a function each time a specified var timer= setInterval(func,1000);
number of milliseconds has elapsed. //invoca func todos os segundos
Cancels the interval previously started using var idInt=setInterval(f,10);
clearInterval(intervalId) the setInterval method. clearInterval(idInt);
close() Closes the current browser window
Displays a confirmation dialog box that
confirm(msgStr) contains 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.
setTimeout(func, timeVal) Evaluates an expression after a specified var timer= setTimeout(func, 2000);
number of milliseconds has elapsed. //invoca func após 2 segundos
var idTimer=setTimeout(f,10);
clearTimeout(timerId) Cancels a time-out that was set with the
setTimeout method. clearTimeout(idTimer);

Objecto navigator
O objecto Navigator permite obter informações acerca do browser
Propriedade 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
userAgent String Retrieves a string equivalent to the HTTP user-agent request header. S
userLanguage String Retrieves the operating system's natural language setting. S

Objecto location
 O objecto location permite aceder às características do URL da página corrente.
Propriedades
Propriedade 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.

DOM (Document Object Model)
O DOM é um standard do W3C que especifica os métodos e 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

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 uma associação "é um": por
propriedades e métodos. Um objecto que respeita a interface exemplo, a interface Document
Node é um Node porque contém todas as propriedades e também é uma interface Node, ou
métodos descritas em Node. A maior parte dos objectos DOM seja, possui todas as propriedades
são Nodes. As excepções são objectos que representam e métodos descritas em Node
sequências de Nodes, como NameNodeMap e NodeList

propriedades 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

métodos de Node
A tabela mostra os métodos que
são comuns a todos os objectos
que representam elementos e
Métodos texto 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
propriedades e métodos de NamedNodeMap
Certas propriedades de objectos

que representam elementos HTML
referenciam objectos
Propriedades NamedNodeMap, que não são
mais que colecções de pares
nome-valor, em que nome é uma
Nome Tipo Descrição R/O string. São usados, por exemplo,
length Number indica o número de nós S para 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]

propriedades e métodos de NodeList
Certas propriedades de objectos
que representam elementos HTML
referenciam objectos NodeList, que
Propriedades 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

propriedades e métodos de Text e Comment
Propriedades
Nome Tipo Descrição Readonly

data String. representa o texo N
length Number Número de caracteres do texto S
Métodos
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
Attr (atributo)
Attr tem todas as propriedades e métodos de Node bem como as propriedades da tabela
abaixo
Propriedades

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

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

propriedades do objecto document
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

métodos do objecto document
Attr cria um atributo com o nome especificado
createAttribute(atrName) atrName: String 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

propriedades de um elemento genérico HTML (HTMLElement)
Attr tem todas as propriedades e métodos 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

propriedades e métodos de HTMLCollection
Propriedades
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]

propriedades e métodos de HTMLInputElement
O valor inicial no caso de input tipo text
defaultValue String N
Propriedades 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 e
o estado corrente no caso de input tipo
métodos de HTMLElement checked Boolean N
radio ou checkbox
bem como as propriedades
da tabela ao lado máximo de caracteres do input caso
maxLength Number N
seja text ou password
name String identificador de grupo para radio buttons N
a true se não poder ser alterado (text
readOnly Boolean N
ou 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

propriedades e métodos de HTMLSelectElement
Propriedade Tipo Descrição Readonly
type String a string "select-multiple" ou "select- S
Propriedades 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
HTMLSelectElement value String o valor do atributo value do elemento N
tem todas as seleccionado
propriedades e length Number o número de opções S
métodos 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
e métodos das size Number o total de linhas visíveis N
tabelas ao lado tabIndex Number A tecla tab permite navegar dentro dos N
elementos de um form(taborder).
tabIndex define índice no taborder.

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
propriedades e métodos de HTMLOptionElement
HTMLOptionElement tem todas as propriedades e métodos de HTMLElement bem como as propriedades

da tabela abaixo
Propriedades

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

propriedades e métodos de HTMLTextAreaElement
HTMLTextAreaElement tem todas as propriedades e métodos de HTMLElement bem como as
propriedades e métodos das tabelas abaixo
Nome Tipo Descrição R/O

Propriedades 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

propriedades e métodos de HTMLTableElement
HTMLTableElement tem todas as propriedades e métodos de HTMLElement bem como as
propriedades e métodos 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
align String N
createCaption() Não tem HTMLCaptionElement
bgColor String N
border String. N deleteCaption() Não tem Não tem
cellPadding String N
insertRow(index) Number index HTMLRowElement
cellSpacing String N
width String N deleteRow(index) Number index Não tem

propriedades e métodos de HTMLTableSectionElement e HTMLTableColElement
Propriedades
HTMLTableColElement tem Nome Tipo R/O Descrição
todas as propriedades e align String N alinhamento horizontaldas células na coluna
métodos de HTMLElement
bem como as propriedades ch String N caracter de formatação
definidas aqui chOff String N offset dentro da célula do caracter de formatação
span Number N o número de colunas do grupo
vAlign String N alinhamento vertical do conteúdo das celulas da coluna
width String N O comprimento das células da coluna
Propriedade Tipo R/O

HTMLTableSectionElement tem todas
as propriedades e métodos de Propriedades align String N
HTMLElement bem como as ch String N
propriedades definidas aqui
chOff String N
vAlign String. N
rows HTMLCollection S
Métodos Método Parâmetros Retorno

insertRow(index) Number index HTMLTableRowElement
deleteRow(index) Number index Não tem

propriedades e métodos de HTMLTableRowElement
HTMLTableRowElement tem todas as propriedades e métodos de HTMLElement bem como as
Propriedade Tipo R/O

Propriedades
rowIndex Number S
sectionRowIndex Number S
cells HTMLCollection S
align String N
bgColor String N
ch String N
chOff String N
vAlign String N
Método Parâmetros Retorno

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

propriedades de HTMLTableCellElement
HTMLTableCellElement tem todas as propriedades e métodos de HTMLElement bem como as
Propriedades

índice da célula (a começar em zero) na linha a que
cellIndex Number S
pertence
abbr String abreviatura da célula N
align String alinhamento horizontal do conteúdo da celula N
bgColor String cor de background 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
vAlign String alinhamento vertica do conteúdo da célula N
width String comprimento da célula N

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.

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.

Conceitos avançados
Esta matéria não faz parte, em princípio, do programa da disciplina, estando aqui
presente como informação para os alunos mais interessados
 Programação baseada em objectos em JavaScript
 Excepções

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 queria criar objectos para representar carros. Para definir carro, crie
uma função que especifique as propriedades que pretende associar a um carro. Tal função
denomina-se uma 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):
mycar = new Carro("Rover", "414 Si", 1997);

A palavra chave this
 A palavra-chave this refere o objecto corrente. Em geral, dentro de um método, this refere o
objecto sobre o qual se invocou o método.
 Syntaxe
this[. propriedade] ou this[.metodo( parametros...) ]
 Exemplo
• Suponha uma função chamada valida. Serve para verificar se a propriedade value de um objecto está
dentro do intervalo entre lowval e hival:
function valida(obj, lowval, hival) {

if ((obj.value < lowval) || (obj.value > hival))
alert("Invalid Value!")
}
• Qualquer objecto que tenha uma propriedade de nome value pode ser validado quando alterado, como no
exemplo seguinte:
<B> Enter a number between 18 and 99: </B>

<INPUT TYPE = "text" id ="age" SIZE = 3 onChange="valida(this, 18, 99);">
objecto que se pretende validar. Ao

passar this, estamos a indicar o objecto
que representa o elemento corrente

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 a posição ocupada pelo contador dentro
do elemento onde foi inserido
new Counter(table, //elemento pai

0, // valor inicial
21, // valor máximo
20, // canto superior
50, // esquerdo (x=50,y=20)
30, // comprimento dígitos
60); // altura dígitos
Nome Descrição
value valor corrente do contador
Propriedades nDigs número de dígitos da afixação do valor

maxValue módulo de contagem
viewer elemento HTML onde o contador se mostra
getValue retorna um array de caracteres com o valor
show mostra o contador na página
Métodos
dec decrementa módulo maxValue e mostra
inc incrementa módulo maxValue e mostra

utilização do objecto Counter
<style type="text/css">
body { background-color : blue }
#counterWrapper { margin-left: 20%; position: relative; width: 125; height: 60; }
#counterWrapper { margin-left: 15%;margin-bottom: 10%; }
#counterWrapper { background-color : rgb(0%,0%,0%) }
#counterWrapper { 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>

utilização do objecto Counter (script)


<script type="text/javascript" src="../javascript/utils.js"> </script>


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

classe Counter (implementação I) métodos da
classe Counter
function Counter_getValue() { obter o valor do

var digs = new Array(); contador na forma de
arrayFromValue(this.value, this.nDigs, digs); array de dígitos
return digs;
}
function Counter_show() { afixar o valor corrente

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

classe Counter (implementação II)
A função construtora de Counter
function Counter(parent, value,maxValue, t, l, w,h) {
// propriedades Parâmetros:
this.value=value;
this.nDigs = numberOfDigits(maxValue); parent : elemento html que vai conter o
this.maxValue = maxValue; counter e que se pressupoe ser um
// criar o viewer do contador (div) elemento com referencial próprio
this.viewer = document.createElement("div");
value: valor inicial
// metodos
this.getValue = Counter_getValue; maxValue: valor Máximo
this.show = Counter_show;
this.inc = Counter_increment;
this.dec = Counter_decrement; t, l: coordenadas do canto superor
esquerdo
// construir o viewer e inser~-lo no elemento pai w,h comprimento e largura de cada digito
for(i=0; i < this.nDigs; ++i) {
var newImg = document.createElement("img");
newImg.width=w;
newImg.height=h;
this.viewer.appendChild(newImg);
}
with (this.viewer.style) {
position="absolute";
top=t+"px";
left=l+"px";
visibility="hidden";
}
parent.appendChild( this.viewer);
}

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;

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 {
if (undef.nothing == true)
document.write("oops!");
document.write("e a excepção? </br>");
}
catch(e) {
document.write("excepção: " + e);
}

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

Anexos
 Elementos HTML de interacção
 Acesso a estilos em JavaScript
 Palavras Reservadas
 Bibliografia
 Índice

Elementos HTML de interacçã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

Elementos HTML de interacçã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

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>

Elementos HTML de interacçã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>

Elementos HTML de interacçã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

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

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 ainda 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

Bibliografia

JSguide

Enviado por

Dados do documento

Direitos autorais

Formatos disponíveis

Compartilhar este documento

Compartilhar ou incorporar documento

Opções de compartilhamento

Você considera este documento útil?

Este conteúdo é inapropriado?

Direitos autorais:

Formatos disponíveis

JSguide

Enviado por

Direitos autorais:

Formatos disponíveis

JavaScript (um guia simplificado)

ISEL 2001/2002 - Programação Ultima actualização:

Introdução  Eventos DOM Anexos

ISEL 2001/2002 - Programação Ultima actualização:

 A linguagem JavaScript não define à priori mecanismos (objectos ou funções) para

 Cada ambiente de execução - hospedeiro (host) de JavaScript - oferece um conjunto de

 Quando o JavaScript é usado no contexto de um browser são disponibilizados objectos que

ISEL 2001/2002 - Programação Ultima actualização:

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

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

1. Como conteúdo do elemento script. <script type="text/javascript" >

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

<script src="common.js"> </script>

Ex: <SCRIPT SRC="http://home.netscape.com/functions/jsfuncs.js">

ISEL 2001/2002 - Programação Ultima actualização:

<script type="text/javascript" >

ISEL 2001/2002 - Programação Ultima actualização:

Uma característica especialmente interessante do JavaScript é a possibilidade de alterar

ISEL 2001/2002 - Programação Ultima actualização:

ISEL 2001/2002 - Programação Ultima actualização:

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

 O JavaScript suporta dois estilos de comentários:

 com múltiplas linhas

ISEL 2001/2002 - Programação Ultima actualização:

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

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

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

ISEL 2001/2002 - Programação Ultima actualização:

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

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

 var _window2 = window.open();

ISEL 2001/2002 - Programação Ultima actualização:

O JavaScript permite trabalhar com os seguintes valores primitivos:

 Valores númericos (inteiros e reais)

 Valores lógicos (booleanos).

 Cadeias de caracteres (strings)

 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

ISEL 2001/2002 - Programação Ultima actualização:

ISEL 2001/2002 - Programação Ultima actualização:

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

 Na linguagem JavaScript existem expressões:

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

 Certos operadores, como os operadores de afectação e os operadores de incremento e

ISEL 2001/2002 - Programação Ultima actualização:

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

 O JavaScript tem os seguintes operadores:

 A prioridade relativa dos operadores está definida no slide

ISEL 2001/2002 - Programação Ultima actualização:

+ soma Comportam-se como os seus equivalentes

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

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

ISEL 2001/2002 - Programação Ultima actualização:

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

 O facto dos operador + ter comportamento diferente em strings e números pode

• Para converter um valor numérico (ou outro) em string, uma possibilidade é:

ISEL 2001/2002 - Programação Ultima actualização:

ISEL 2001/2002 - Programação Ultima actualização:

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

Ex: a+= 3  a = a+ 3 x &= y x=x&y

ISEL 2001/2002 - Programação Ultima actualização:

• Strings são comparadas alfabeticamente, carácter a carácter. São iguais se têm

ISEL 2001/2002 - Programação Ultima actualização:

Operador Descrição Examplos que

<label for="vSquareRoot" > √ x </label>