Javascript tutorial

Ultima actualização: 18-10-2011

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

EFJ - TIPO 7

JAVASCRIPT

FORMADOR: JOSÉ BATISTA


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.


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


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 ?


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

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

1. Como conteúdo do elemento 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.

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

O atributo src pode especificar qualquer URL, relativo ou absoluto

Incluir código JavaScript em páginas HTML

<script type="text/javascript" >

alert("Executando o código");

</script>

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

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

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


O primeiro programa em JavaScript

<HTML>

<HEAD>

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


alert("Hello World!");

</script>

</HEAD>

<BODY>

</BODY>

</HTML>


Comentários

Valores,Variáveis

Expressões e Operadores

Funções

Instruções

Arrays

Eventos

Objectos

Conceitos nucleares


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 permitem identificar valores (valores primitivos, arrays ou objectos) através de um nome. O valor diz-se o conteúdo da variável.

Declaração de variáveis

Exemplos

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

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

Variáveis

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

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

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

Os parêntesis rectos indicam que a

expressão é opcional. Na sua

inexistência a variável fica com o valor

undefined


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)

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


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!

Valores Primitivos


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


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:

Operadores

Aritméticos

(de) Strings

Afectação

Comparação

Lógicos (booleanos)

Operadores

A prioridade relativa dos operadores está definida no slide

tabela de operadores eprecedências


Operadores aritméticos

+ soma - subtracção * multiplicação / divisão

Comportam-se como os seus equivalentes matemáticos. Ex: 1 / 2 retorna 0.5

% 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

Operadores aritméticos operam sobre valores numéricos (literal ou variável) e retornam um valor numérico.

Os 4 operadores básicos:

Os operadores incremento

e decremento

O operador Módulo

var1++ var1 --

incrementam ou decrementam var1. Retornam o valor original de var1

++ var1 -- var1

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

Menos Unário - Menos unário

Nega o operando que o segue Ex: y = -x (se x=3, y=-3)

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


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


Operadores de afectação

Um operador de afectação afecta o

operando à esquerda com o valor do

operando à direita e retorna o valor com que

ficou o operando afectado.

Ex: a+= 3 a = a+ 3

retorna 7 se a valer 4

Operador Equivalência

x += y x = x + y

x -= y x = x - y

x *= y x = x * y

x /= y x = x / y

x %= y x = x % y

x ^= y x = x ^ y


Operadores de comparação II

Operador Descrição Examplos que retornam true

IGUAL == Retorna true se os dois operandos forem iguais de acordo com as

regras acima. Se os dois operados não forem do mesmo tipo, é feita

uma conversão de tipos conveniente (típicamente os operandos são

convertidos em string)

3 == var1

s1 == ’a"

DIFERENTE != Retorna true se os dois operandos forem diferentes, de acordo com

as regras acima. Se os dois operados não forem do mesmo tipo, é

feita uma conversão de tipos conveniente (típicamente os operandos

são convertidos em string)

var1 != 4

s2 != "B"

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

Assumindo var1=3

var2=4

s1="a"

s2="b"


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

(Logical AND)

Retorna exp1 se este poder ser convertido para false. Caso contrário,

retorna exp2. Na situação normal de exp1 e exp2 serem expressões

booleanas, retorna true se ambas forem true

|| exp1 || exp2

(Logical OR)

Retorna exp1 se este poder ser convertido para true. Caso contrário,

retorna exp2. Na situação normal de exp1 e exp2 serem expressões

booleanas, retorna true se pelo menos uma for true

! ! exp

(Logical NOT)

Retorna false se exp poder ser convertido para true. Caso contrário

retorna true


Tabela de operadores e precedências

Prioridade

+

_

Operador Descrição

. [] () 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


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.

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.

Exemplo - O quadrado de um número

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

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

}

Funções (definição)

function square( x) {

return x * x;

}


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


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

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("Continuar a execução?");

if (answer == true) {

... // É para continuar!

}

else {

... //É para Cancelar!

}


strings

• Uma string consiste em 0 ou mais caracteres delimitados

por plicas ‘ ou aspas ". Os delimitadores têm de ser do

mesmo tipo- ambos aspas ou ambos plicas. Exemplos:

"blah"

‟blah‟

"1234"

"one line \n another line"

• A um valor do tipo string podem ser aplicados as

propriedades e métodos dos objectos String

• Exemplos:

var s="abc";

alert(s.length); // 3

Caracteres especiais que se

podem incluír dentro de strings

Caracteres Meaning

\b Backspace

\f Form feed

\n New line

\r Carriage return

\t Tab

\’ Apostrophe or single quote

\" Double quote

\\ Backslash character (\)

\XXX The character with the Latin-1

encoding specified by up to three

octal digits XXX between 0 and 377.

For example, \251 is the octal

sequence for © (copyright) symbol.

\xXX The character with the Latin-1

encoding specified by the two

hexadecimal digits XX between 00

and FF. For example, \xA9 is the

hexadecimal sequence © (copyright)

symbol.

\uXXXX The Unicode character specified by

the four hexadecimal digitsXXXX. For

example, \u00A9 is the Unicode

sequence for © (copyright) symbol.


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

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.

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

Arrays

var dias="";

for (var i=0; i < diasDaSemana.length; ++i)

dias += diasDaSemana[i] + "\n";

alert(dias);

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

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


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

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:

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:

• 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

Instruções


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

Instrução if

function maiorDeTres( val1,val2,val3)

{

if (val1 > val2)

{

if (val1 > val3)

return val1;

else

return val3;

}

else

{

if (val2 > val3)

return val2;

else

return val3;

}

}

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

A utilização da instrução

composta não é necessária

neste exemplo, mas torna o

código mais legível


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;

case 3: // quarta

alert("anime! Deve ter um joguito de futebol na televisão");

break;

case 4: case 5: // quinta, sexta

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

}

A instrução switch, quando todos os

seus ramos terminam pela instrução

break, é semelhante a uma cadeia de

instruções if -- else if -- else


*A instrução switch (II)

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

switch(teste){

case '1':

alert('seu valor foi 1');

case '2':


case '3':


case '4':


case '5':


default:

alert('seu valor nao foi nenhum valor entre 1 e 5');

}

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


A instrução while

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

executada zero ou mais vezes.

Exemplos

var n=0; var x=0; while( n < 10 ) { n ++; x += n; }

while ( condição) instrução

var i=1;

while(i <= 10)

{

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

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

Obter a soma dos 10 primeiros inteiros


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

A instrução for

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


A instrução do...while

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= Number(lido);

}

while ( isNaN(i) || i < min || i > max);

return i;

}

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

Ler um valor inteiro

(através da função

prompt), dentro do

intervalo [min, max]


var i = 0;

var n = 0;

while (i++ < 5) {

if (i == 3)

continue;

n += i;

}

*A instrução continue

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.

continue [label]


A instrução return

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

return [ expressã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";

}


break [label]

A instrução break

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

for (i = 1;;i++) {

if (i > 10) {

break;

}

document.write(i);

}

Utilização da instrução break

para sair de um ciclo


var matriz = [ [ 1, 0, 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] ]; var encontrou=false; 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");

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

Ex: procurar um

elemento de uma

matriz (array

bidimensional) de

inteiros com o

valor 0


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


Tabela de eventos

nome de Handler Elementos a que se aplica Descrição

onblur A, AREA, BUTTON, INPUT, LABEL, SELECT,

TEXTAREA the element lost the focus

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

onfocus A, AREA, BUTTON, INPUT, LABEL, SELECT,

TEXTAREA the element got the focus

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" > </script> </HEAD> <BODY onload="init();"> <label for="valor" > x </label> <input type="text" id="valor" onkeyup="changedValue();" value="" /> <label for="vSquare" > x ² </label> <input type="text" id="vSquare" readonly="true" > <label for="vSquareRoot" > √ x </label> <input type="text" id="vSquareRoot" readonly="true" > </BODY> </HTML>

O código está no slide seguinte

código Unicode

do símbolo ²

código Unicode

do símbolo √


Eventos – exemplo (JavaScript)

var valEdit;

var squareEdit;

var squareRootEdit;

function square(number) {

return number * number;

}

function squareRoot( x) {

var srx = 1;

while (square(srx) < x)

++srx;

return square(srx) > x ?

srx-1 :

srx;

}

function changedValue() {

var value = valEdit.value;

squareEdit.value= square(value);

squareRootEdit.value=squareRoot(value);

}

function init() {

valEdit = document.getElementById("valor");

squareEdit = document.getElementById("vSquare");

squareRootEdit= document.getElementById("vSquareRoot");

}


• 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

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

Introdução aos objectos

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


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.

function Carro(fabricante, modelo, ano){

this.fabricante = fabricante;

this.modelo = modelo;

this.ano= ano;

}

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

Carro é

função

construtora

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

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


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_dist( p1) {

var distx= this.x - p1.x

var disty= this.y - p1.y;

return Math.sqrt(distx*distx + disty*disty);

}

function Ponto(x,y) {

this.x=x;

this.y = y;

this.dist= Ponto_dist;

}

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

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


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

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

inc incrementa módulo maxValue e mostra

Atributos

Métodos


utilização do objecto Counter

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

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


utilização do objecto Counter (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,0,100,20,40);

counter.show();

}

function startInc() {

interval=window.setInterval("counter.inc()", 50);

}

function stop() {

interval=window.clearInterval(interval);

}

function startDec() {

interval=window.setInterval("counter.dec()", 50);

}

</script>

A instrução invoca o método

show do objecto counter.

Dentro do método show,

this corresponde ao objecto

counter sobre o qual foi

invocado o método

O código do objecto

Counter está no ficheiro

counter.js


objecto Counter (implementação I)

function Counter_show() {

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

}

function Counter_increment() {

this.value++;

if (this.value == this.maxValue+1) this.value=0;

this.show();

}

function Counter_decrement() {

this.value--;

if (this.value < 0) this.value=this.maxValue;

this.show();

}

métodos de

Counter

afixar o valor corrente

na página

decrementa o valor

módulo maxValue e

mostra o novo valor

incrementa o valor

módulo maxValue e

mostra o novo valor


classe Counter (implementação II)

function Counter(viewer, value, module, w,h) {

// atributos

this.value=value;

this.nDigs = numberOfDigits(module-1); this.module = module;

this.viewer = viewer;

// metodos

this.show = Counter_show;

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

}

A função construtora de Counter

Parâmetros:

viewer : elemento html que vai conter os

digitos do contador

value: valor inicial

module: módulo de contagem

w,h: comprimento e largura de cada

digito

função que retorna

o total de dígitos de

um número


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

Objectos nativos

Em JavaScript existem os seguintes objectos nativos:


métodos genéricos para todos os objectos

Método Descrição

toString Retorna uma representação textual do objecto

valueOf Returna o valor primitivo (caso exista) do objecto corrente

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

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

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.

Exemplos:

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 Math

Propriedade Descrição

E Euler’s constant and the

base of natural logarithms,

approximately 2.718.

LN10 Natural logarithm of 10,


LN2 Natural logarithm of 2,


LOG10E Base 10 logarithm of E

(approximately 0.434).

LOG2E Base 2 logarithm of E

(approximately 1.442).

PI Ratio of the circumference

of a circle to its diameter,


SQRT1_2 equivalently, 1 over the

square root of 2 -


SQRT2 Square root of 2,


Método Descrição

abs Returns the absolute value of a number.

acos Returns the arccosine (in radians) of a number.

asin Returns the arcsine (in radians) of a number.

atan Returns the arctangent (in radians) of a number.

atan2 Returns the arctangent of the quotient of its arguments.

ceil Returns the smallest integer greater than or equal to a number.

cos Returns the cosine of a number.

exp Returns Enumber, where number is the argument, and E is Euler’s, constant, the base of the natural logarithms.

floor Returns the largest integer less than or equal to a number.

log Returns the natural logarithm (base E) of a number.

max Returns the greater of two numbers.

min Returns the lesser of two numbers.

pow Returns base to the exponent power, that is, baseexponent.

random Returns a pseudo-random number between 0 and 1.

round Returns the value of a number rounded to the nearest integer.

sin Returns the sine of a number.

sqrt Returns the square root of a number.

tan Returns the tangent of a number.


objectos String

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

Atributo Tipo Descrição ReadOnly

length Number Reflects the length of the string. S


var a, x, y;

var r=10;

a = Math.PI * r * r;

x = r * Math.cos(Math.PI);

y = r * Math.sin(Math.PI/2);

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

*A instrução with

with ( object) { instruções }

var a, x, y;

var r=10;

with (Math) {

a = PI * r * r;

x = r * cos(PI);

y = r * sin(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.

Os atributos e métodos do objecto window podem

ser acedidos sem referir explicitamente o objecto

• Exs: window.document document

window.alert("viva!") alert("viva!")

Nos slides seguintes apresentam-se as Atributos e

métodos mais relevantes dos objectos:

• window

• document

• location

• navigator

Excerto da hierarquia de

objectos representantes dos

documentos html acedidos

numa sessão do browser

checkbox

anchorsdocument

locationwindow

forms

images

links

history

buttons

radio

navigator


O objecto window (Atributos e handlers de eventos)

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.

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.

Handlers de eventos

Atributos


O objecto window (métodos)

Método Descrição Exemplo

alert(msgStr) Displays a dialog box containing an application-defined message.

setInterval(codigo, timeVal)

Executa repetidamente o código Javascript presente na string codigo de cada vez vez que deccorer o tempo (em miliseg.) definido em timeVal

var timer= setInterval(“tick()”,1000); // invoca a função tick todos os // segundos

clearInterval(intervalId) Cancels the interval previously started using the setInterval method.

var idInt=setInterval(f,10);

clearInterval(idInt);

close() Closes the current browser window

confirm(msgStr) Displays a confirmation dialog box that 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(codigo, timeVal)

Executa o código Javascript presente na string codigo de quando deccorer o tempo (em miliseg.) definido em timeVal

var timer= setTimeout(“fim();”, 2000);

//invoca a função fim após 2 segundos

clearTimeout(timerId) Cancels a time-out that was set with the setTimeout method.

var idTimer=setTimeout(f,10);

clearTimeout(idTimer);

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.


* Objecto navigator

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.

Persistent cookies are those that are stored on the client-side computer.

S

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

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


* Objecto location

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

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.

Propriedades


<TABLE>

<TBODY>

<TR>

<TD>Shady Grove</TD>

<TD>Aeolian</TD>

</TR>

<TR>

<TD>Over the River, Charlie</TD>

<TD>Dorian</TD>

</TR>

</TBODY>

</TABLE>

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

documento HTML à

esquerda

Elementos

Nós de texto


DOM (genérico)

A ligação entre os nós representa

uma associação "é um": por

exemplo, a interface Document

também é uma interface Node, ou

seja, possui todas os atributos e

métodos descritas em Node

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,

chamamos interface à descrição de um conjunto de atributos e

métodos. Um objecto que respeita a interface Node é um Node

porque contém todas as propriedades descritas em Node. A

maior parte dos objectos DOM são Nodes. As excepções são

objectos que representam sequências de Nodes, como

NameNodeMap e NodeList


Atributos de Node

Propriedade Tipo Descrição

Read/Only

nodeName String. O nome do nó S

nodeType Number.

O tipo do nó (elemento, texto, comentário...)

S

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

A tabela mostra as propriedades

comuns a todos os objectos que

representam elementos e texto em

documentos HTML Propriedades


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


métodos de Node

Método Parâmetros Retorna Descrição

insertBefore(newChild, refChild) newChild : Node

refChild: Node

Node Insere o novo nó filho newChild

antes do nó filho refChild. Retorna

newChild

replaceChild(newChild, oldChild) newChild : Node

oldChild : Node

Node Substitui o nó filho oldChild por

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

a true indica que os nós

filhos também são copiados

Node Cria um nó idêntico ao nó corrente.

Retorna o novo nó

Métodos

A tabela mostra os métodos que

são comuns a todos os objectos

que representam elementos e texto

em documentos HTML


Propriedades de NamedNodeMap

Nome Tipo Descrição R/O

length Number indica o número de nós

do NodeMap

S

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]

Certas propriedades de objectos

que representam elementos HTML

referenciam objectos

NamedNodeMap, que não são

mais que colecções de pares nome-

valor, em que nome é uma string.

São usados, por exemplo, para

representar os atributos de um

elemento

Atributos

Métodos


Propriedades de NodeList


length Number indica o número de nós

na sequência

S

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]

Certas propriedades de objectos

que representam elementos HTML

referenciam objectos NodeList, que

não são mais do que uma

sequência de nós. São usados, por

exemplo, para representar os

elementos filhos de um elemento

Atributos

Métodos

Um NodeList pode ser visto

com um Array de nós


Propriedades de Text e Comment

Nome Tipo Descrição Readonly

data String. representa o texto N

length Number Número de caracteres do texto S


substringData(offset, count) offset : Number.

count : Number

String retorna a substring do texto

com dimesão count a partir de

offset

appendData(arg) arg: String Nada acrescenta a string arg ao texto

insertData(offset, arg) offset : Number

arg : String

Nada insere a string arg a partir de

offset

deleteData(offset, count) offset : Number

count : Number

Nada apaga count caracteres do

texto a partir de offset

replaceData(offset, count, arg) offset : Number

count : Number

arg : String

Nada substitui count caracteres a

partir de offset pela string arg

Atributos

Métodos


Attr (atributo)


name String nome do atributo S

specified Boolean indica se o atributo está

especificado no elemento

S

value String valor do atributo N

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

Propriedades


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

Propriedade Tipo Descrição ReadOnly

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

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

Atributos

Métodos

Uma HTMLCollection pode ser vista

com um Array de nós, isto é, se col

for uma HTMLCollection, então

col.item(i) col[i]


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

HTMLCollection

Colecção das imagens do documento S

links

HTMLCollection

Colecção das imagens do documento S

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


createAttribute(atrName) atrName: String Attr

cria um atributo com o nome

especificado e valor null

createComment(strComment) strComment: String Comment cria um objecto comentário com a string

strComment.

createElement(elemName) elemName: String

Element cria um elemento de nome elemName

Ex: document.createElement("img") cria

um objecto img.

createTextNode(strText) strText: String Text cria um nó de texto com os caracteres

indicados em strText

getElementById(strId) strId: String Element retorna o objecto de id strId.

getElementsByName(strName) strName: String NodeList retorna a sequência de objectos de nome

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 de Element bem como as propriedades da tabela abaixo

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

className porque class é palavra

resevada em JavaSCript

N

Propriedades


Propriedades de HTMLInputElement

HTMLInputElement tem

todas as propriedades de

HTMLElement bem como

as propriedades da tabela

ao lado


defaultValue String O valor inicial no caso de input tipo text

ou password N

defaultChecked Boolean o estado inicial no caso de input tipo

radio ou checkbox N

alt String o texto alternativo caso o browser não

possa mostrar o elemento N

checked Boolean o estado corrente no caso de input tipo

radio ou checkbox N

maxLength Number máximo de caracteres do input caso seja

text ou password N

name String identificador de grupo para radio buttons N

readOnly Boolean a true se não poder ser alterado (text ou

password) N

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

focus() coloca o foco no elemento

select() simula uma selecção no elemento

click() simula um click no elemento

Atributos

Métodos


Propriedades de HTMLSelectElement

HTMLSelectElement

tem todas as

propriedades de

HTMLElement bem

como as propriedades

das tabelas ao lado

Propriedade Tipo Descrição Readonly

type String a string "select-multiple" ou "select-

one", dependendo do atributo multiple

S

selectedIndex Number o índice do elemento seleccionado, a

começar em 0. Se nenhum elemento está

selccionado, vale -1

S

value String o valor do atributo value do elemento

seleccionado

N

length Number o número de opções S

options HTMLCollection uma colecção com as opções S

multiple Boolean true se for de selecção múltipla N

size Number o total de linhas visíveis N

tabIndex Number A tecla tab permite navegar dentro dos

elementos de um form(taborder).

tabIndex define índice no taborder.

N


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

Atributos

Métodos


Propriedades de HTMLOptionElement

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

abaixo


defaultSelected Boolean valor da opção seleccionada à

priori

S

text String o texto contido na opção S

index Number o índice (a começar em 0) da

opção no elemento select a

que pertence

S

selected Boolean true se a opção for a

seleccionada

N

value String o valor do atributo HTML value N

Propriedades


Propriedades de HTMLTextAreaElement

HTMLTextAreaElement tem todas as propriedades de HTMLElement bem como as propriedades das

tabelas abaixo


defaultValue String o valor inicial N

cols Number comprimento do elemento em

caracteres

N

name String o nome do elemento se está

dentro de um form

N

readOnly Boolean true se for só de leitura N

rows Number o número de linhas vísiveis do

elemento

N

type String a string "textarea" S

value String o texto associado ao elemento N

Método Descrição

blur() retira o foco do elemento

focus() poe o foco no elemento

select() seleccionado o texto do elemento

Atributos

Métodos


Propriedades e métodos de HTMLTableElement

Propriedade Tipo R/

O

caption HTMLTableCaptionElement N

tHead HTMLTableSectionElement N

tFoot HTMLTableSectionElement N

rows HTMLCollection N

tBodies HTMLCollection N

Método Parâmetros Retorno

createTHead() Não tem HTMLTHeadElement

deleteTHead() Não tem Não tem

createTFoot() HTMLTFootElement Não tem

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

HTMLTableElement tem todas as propriedades de HTMLElement bem como as propriedades das

tabelas abaixo

Propriedades Métodos


Propriedades de HTMLTableRowElement

HTMLTableRowElement tem todas as propriedades de HTMLElement bem como as propriedades

definidas aqui

Propriedade Tipo R/O

rowIndex Number S

sectionRowIndex Number S

cells HTMLCollection S

Método Parâmetros Retorno

insertCell(index) index :Number HTMLTableCellElement

deleteCell(index) index : Number Não tem

Atributos

Métodos


propriedades de HTMLTableCellElement

HTMLTableCellElement tem todas as propriedades de HTMLElement bem como as propriedades

definidas aqui

Propriedade Tipo Descrição R/O

cellIndex Number índice da célula (a começar em zero) na linha a que

pertence S

abbr String abreviatura da célula N

colSpan Number total de colunas ocupadas pela célula N

height String altura da célula N

noWrap Boolean true se não houver mudançda automática de linha no

texto da célula N

rowSpan Number total de linhas ocupadas pela célula N

Propriedades


Objecto que representa um evento de mouse

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.

Apenas o NetScape 6.0 ou

superior suportam os objectos

evento apresentados!

Propriedades


Objecto que representa um evento de tecla

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.

Propriedades

Apenas o NetScape 6.0 ou

superior suportam os objectos

evento apresentados!


Anexos

Elementos HTML de interacção

Acesso a estilos em JavaScript

Palavras Reservadas

Bibliografia

Índice


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

<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

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

Elementos HTML de interação (inputs)

input

button

input

password

input

radio


Elementos HTML de interação (inputs)

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

input

text

Uncheck this check box for some free advice.

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

input

checkbox


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

The patient is in stable condition

</textarea>

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

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

<option value="1" selected>BMW

<option value="2">Porsche

<option value="3" selected>Mercedes

</select>

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

<option value="1">Calico

<option value="2">Tortie

<option value="3" selected>Siamese

</select>

multiple

select

single

select

textarea


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> <input type="radio" id="basico" name="level" value="0" checked /> </div> <div> <span> Intermédio </span> <input type="radio" id="intermedio" name="level" value ="1" /> </div> <div> <span> Avançado </span> <input type="radio" id="avancado" name="level" value ="2" /> </div> </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>

No slide seguinte

está o aspecto do

formulário gerado

pelo HTML,

depois de

aplicada a style

sheet também

apresentada


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


<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 { digit.style.visibility="visible"; toggle.value="Esconder"; } showed = !showed; } function init() { digit = document.getElementById("digit"); toggle= document.getElementById( alert(digit.style.visibility); } </script>

</HEAD> <BODY onload="init();" > <input type="button" value="Esconder" onclick="mostraEsc();" id="toggle"/> <img src="c:\images\digits\9.gif" id="digit" /> </BODY> </HTML>

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)

Embora o estilo por

omissão de visibility

seja "inherit", o estilo

mostrado é uma string

vazia!

Isto acontece porque a

propriedade style não

representa o estilo

"corrente", mas apenas

as regras de estilo

definidas inline.


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

abstract double got o 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

Palavras reservadas

Palavras reservadas mas não utilizadas


* Conceitos avançados

Recursividade

Excepções

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

presente como informação para os alunos mais interessados


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

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

function factorial(n) {

if (n==0) return 1;

return n*factorial(n-1);

}

n>0 n*(n-1)! n! n=0 1


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:

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

ajuda a resolver o problema?

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


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;

}

else {

arrayFromValue(Math.floor(value/10), ndigits-1, digits);

digits[digits.length] = value%10;

}

}

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

Recursividade (III)

Colocar no array o

número sem o

algarismo da unidades

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

</HTML> página que é usada para mostrar a

hierarquia de elementos da página corrente



// usada para fechar a janela auxiliar que mostra

// a hierarquia

function closeWindowScreen() {

if (newWindow != undefined) newWindow.close();

}

// função utilitária para indentar o inicio de cada

// linha de acordo com a posicao do elemento na

// hierarquia

function indent(page,level) {

for (i=0; i < level; ++i) page.value +=" ";

}

// função principal. Abre a janela auxiliar e invoca

// a função recursiva sTree que escreve na textArea screen

// a hierarquia existente no elemento body corrente function showTree() {

closeWindowScreen();

newWin = window.open("screen.html");

var screen;

screen=newWin.document.getElementById("screen");

sTree(document.body, screen, 0);

}

var newWindow;

var ELEMENT_NODE=1;

var nodeTypes= [

"EMPTY_NODE",

"ELEMENT_NODE",

"ATTRIBUTE_NODE",

"TEXT_NODE",

"CDATA_SECTION_NODE",

"ENTITY_REFERENCE_NODE",

"ENTITY_NODE",

"PROCESSING_INSTRUCTION_NODE",

"COMMENT_NODE",

"DOCUMENT_NODE",

"DOCUMENT_TYPE_NODE",

"DOCUMENT_FRAGMENT_NODE",

"NOTATION_NODE"

];

a propriedade nodeType de qualquer elemento tem um valor inteiro

cujo significado é dado pelas strings da tabela nodeTypes


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

if (elem.nodeType != ELEMENT_NODE) return;

indent(page,level); page.value += "atributos:\n";

indent(page,level+1);

var atribs= elem.attributes;

if (atribs != undefined) {

var nUnspec=0, first=true;

for (var i=0; i < atribs.length;++i) {

if (atribs[i].specified) {

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

}

}


A função que percorre

recursivamente a hierarquia de nós.

Para cada nó mostra o tipo e o nome

e o valor.

Se o nó for um elemento, mostra os

atributos e os nós filhos, invocando-

se a si própria.


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;

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


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.

A instrução try

var undef;

try {

……

}

catch(e) {

alert("excepção: " + e);

}

try { instruções… }

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

[finally { instruções…} ]


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

}


Bibliografia

Documents

Javascript tutorial