JavaScript Avançado

Para ir mais além da construção de pequenos programas que realizam funções muito simples, e começar a desenvolver aplicações realmente úteis em termos de World Wide Web, é necessário saber noções sintácticas de natureza mais avançada: as que se relacionam com a utilização de objectos e as que estão mais directamente relacionadas com as funções.

Funções

O código JavaScript é habitualmente dividido em funções, ou seja, em blocos de código. Uma função permite agrupar uma porção de expressões JavaScript num bloco, designado por um determinado nome, e pronto para ser utilizado em qualquer zona do código principal. Quando o nome da função for utilizado no código do programa, a função é executada.

Uma função declara-se com a seguinte sintaxe:

function nome (parâmetros) {

expressão1;

expressão2;

…

expressãoN

return(valor);

}

A função é identificada pelo nome que tem e pode ser definida com um conjunto de parâmetros (valores) que são passados para o interior da função, na altura da chamada da função. Estes parâmetros são utilizados como vulgares variáveis no interior da função.

Para além da execução das expressões colocadas no interior da função, esta também pode devolver um determinado valor para a expressão que chamou a função, através da instrução return. No exemplo da sintaxe anterior, o valor devolvido é o contido na variável "valor".

As funções em JavaScript são utilizadas com dois objectivos: o primeiro é a estruturação do código, por forma a que este seja organizado de forma eficiente e prática, a criação de funções evita, muitas vezes, a reescrita de código, por haver reutilização das linhas de código existentes no corpo da função. O segundo objectivo é o associar de funções JavaScript a acontecimentos ocorridos na página Web, denominados eventos.

Vejamos um exemplo de declaração e utilização de uma função em JavaScript.

function soma ( x, y ) {

var sum;

sum = x+y;

return (sum);

}

var total = soma(5,4);

document.write("Resultado da soma: ", total);

</script>

A função está definida no topo do script, contudo, só é chamada no final, no corpo principal do código do programa. A chamada à função (total=soma(5,4)) é feita passando como parâmetros os valores "5" e "4", que são colocados nas variáveis "x" e "y", internas à função em causa (não são conhecidas fora do corpo da função e que, como parâmetros fixos que são, não podem ser modificados no interior da função. Igualmente interna à função soma() é a variável "sum", cujo valor é por fim devolvido para o exterior da função, utilizando para tal a instrução "return(sum)".

O valor devolvido é colocado na variável "total", que foi utilizada na expressão de chamada da função.

A reutilização de código pode ser demonstrada com o exemplo seguinte. Nele é utilizada uma função "fact()", que simplesmente calcula o factorial de um número. Neste exemplo pretende-se calcular todos os factoriais de números entre 1 e 10, bem como dar a oportunidade de calcular o factorial de um número à escolha:

function fact(num) { // Função de Calculo do Factorial

var res=1; // Variável que vai conter o resultado final

for (var k=num; k>=1; k--) { // Cálculo do factorial

res *= k; // Expressão reduzida da multiplicação

}

return(res);

}

// Programa principal

for (var k=1; k<=10; k++) { // Cálculo dos factoriais entre 1 e 10

document.write(k, "! = " , fact(k), "<br/>");

}

var x;

x=prompt("Outro factorial a calcular:");

document.write(x, "! = " , fact(x));

</script>

A utilização da função fact() para calcular os factoriais dos números de 1 a 10 e depois a utilização da mesma função para calcular o factorial do número entrado pelo utilizador, permite efectuar reutilização de código, urna vez que a alternativa seria escrever duas vezes a rotina de cálculo do factorial.

Outro exemplo de escrever o mesmo código seria:

<html>

<head>

<title>Factorial</title>

function fact(num) { // Função de Calculo do Factorial

var res=1; // Variável que vai conter o resultado final

for (var k=num; k>=1; k--) { // Cálculo do factorial

res *= k; // Expressão reduzida da multiplicação

}

return(res);

} // Fim da função

// Programa principal

function main() {

for (var k=1; k<=10; k++) { // Cálculo dos factoriais entre 1 e 10

document.write(k, "! = " , fact(k), "<br/>");

}

var x;

x=prompt("Outro factorial a calcular:");

document.write(x, "! = " , fact(x));

}

</script>

</head>

<body>

<h3>Cálculo do Factorial</h3>

main();

</script>

</body>

</html>

Neste caso, o código JavaScript foi colocado no cabeçalho (header) da página HTML, sob a forma de funções, estando a função principal (main()) também residente nessa zona.

O corpo da página HTML contém, neste exemplo, apenas a invocação da função main(). Em muitas circunstâncias, a forma corno se integram scripts em páginas HTML será por recurso aos chamados eventos, ou seja, à execução de funções de código corno resposta a determinadas ocorrências numa página (por exemplo, um clique de rato),

Objectos, Arrays e Métodos

Objectos:

Os objectos são dos assuntos mais falados em linguagens de programação. Existem hoje variadíssimas linguagens orientadas a objectos, ou seja, que têm a capacidade de organizar os dados segundo uma estrutura baseada em entidades que modelam elementos físicos do mundo real: os objectos.

Estes não são mais do que agrupamentos de dados, embora esse agrupamento seja feito de uma forma muito lógica e organizada.

Conforme foi já referido, o JavaScript é urna linguagem baseada em objectos e não orientada a objectos corno, por exemplo, o Java. Isto deve-se ao facto de faltarem, no JavaScript, os mecanismos para a criação de classes (entidades que servem de modelo para a criação de objectos) e herança de características das classes, mecanismos esses existentes nas linguagens orientadas a objectos.

Um objecto em JavaScript é constituído por um conjunto de propriedades que de alguma forma o identificam. A definição de um objecto faz-se utilizando para tal uma função denominada construtora, que tem o mesmo nome do objecto que ela define e que contém no seu interior a definição das respectivas propriedades.

Para melhor entender este conceito, vejamos um exemplo de definição de um objecto veículo, que contém as características: marca, modelo, ano_matricula e cilindrada. A função construtora utilizada tem o mesmo nome do objecto a definir:

function veiculo(a,b,c,d) {

this.marca = a;

this.modelo = b;

this.ano_matricula = c;

this.cilindrada = d;

Os parâmetros passados para o interior do objecto são "a", "b", "c" e "d", que vão ser aplicados às diversas propriedades do objecto em causa (marca, modelo, ano da matricula e cilindrada). A palavra reservada "this" é utilizada para fazer referência ao objecto "corrente".

A sintaxe acima descrita faz apenas a definição de um objecto, não efectua a criação de nenhum objecto concreto. Para criar um objecto, utiliza-se a palavra reservada new, chamando a função construtora correspondente:

var carro1 = new veiculo("Porche","Carrera","1998",2400);

var carro2 = new veiculo("BMW","530","2004",2600);

Os nomes dos objectos ("carro1" e "carro2") são tratados corno qualquer variável e, portanto, existe a necessidade de serem declarados com a instrução "var", Ao efectuar a criação dos objectos, são passados como parâmetros os valores necessários para serem aplicados correspondentemente às diversas propriedades declaradas na função construtora do objecto.

A referência a qualquer das propriedades de um determinado objecto faz-se recorrendo à seguinte sintaxe:

nome_do_objecto.propriedade

Se, por exemplo, quiséssemos enviar para o ecrã a propriedade “cilindrada” do objecto do “carro1”, Utilizaríamos para tal a seguinte notação:

document.write("Cilindrada = ",carro1.cilindrada);

Repare-se que o próprio "document.write" é a utilização de um método "write",de um objecto "document”.

Deve-se ter um cuidado muito especial quando se atribui valores aos atributos de um objecto. Naturalmente que, durante a atribuição do valor a uma variável, como é lógico em JavaScript, não é feita nenhuma verificação de tipos. Isso significa que a declaração da cilindrada pode ser “2400” e 2600 ambas são possíveis e aceites, apesar de na primeira a cilindrada aparecer como uma String e na segunda surgir como um valor inteiro.

Algum cuidado será contudo, necessário para prevenir erros como o seguinte, quando se procura fazer a soma de duas cilindradas e obtém-se um resultado bem diferente do pretendido:

document.write("Soma das cilindradas: " ,carro1.cilindrada + carro4.cilindrada);

Soma das cilindradas: 24002600

Arrays:

Os Arrays são entidades constituídas por conjuntos agrupados de valores de um determinado tipo de dados. Eles são utilizados em qualquer linguagem de programação. No JavaScript, contudo, um array nao pode ser visto como uma variável, mas como um objecto.

Pode ser criado um array de forma muito simples, utilizando a seguinte sintaxe:

var norne_do_array = new Array(número_de_posições);

Um array em JavaScript é dividido em posições que vão de "0", até à dimensão máxima do array, menos uma unidade. Para aceder ao conteúdo de uma determinada posição do array, utiliza-se a seguinte sintaxe:

nome_do_array[posição] ;

Por exemplo, o seguinte array:

	4	ola	4.6	teste	false
Posição:	0	1	2	3	4

Pode ser declarado da seguinte forma:

var lista = new Array(5);

lista[0] = 4;

lista[1] = "ola";

lista[2] = 4.6;

lista[3] = "Teste";

lista[4] = false;

Uma das grandes facilidades que o JavaScript oferece no domínio dos arrays é, de facto, possibilidade de colocar valores de tipos de dados bem distintos numa só estrutura de dados.

Os arrays estão intimamente relacionados com as propriedades dos objectos, de tal forma que um array e um conjunto de propriedades de um objecto constituem duas formas distintas de acesso à mesma informação.

Um objecto pode ser, na verdade, visto como um array de propriedades e representado sintacticamente como tal.

Vejamos o exemplo:

var carro1 = new veiculo("Porche","Carrera","1998",2400);

Utilizando uma sintaxe alternativa, baseando-nos na ideia de que um objecto é composto por um array de propriedades, podíamos escrever o seguinte script:

var carro1 = new veiculo();

carro1[0] = "Porche ";

carro1[1] = "Carrera ";

carro1[2] = "1998";

carro1[3] = 2400;

// Lista das propriedades do objecto

for (var k=0; k<=3 ; k++) {

document.write("Propriedade ",k," = ",carro1[k]," <p/> ");

}

A grande vantagem de utilizar arrays e índices, em vez de nomes de propriedades, é possibilidade de realizar operações sobre as propriedades de um objecto, recorrendo a ciclos e fazendo variar as varáveis de controlo, como aqui fizemos para listar o conjunto de propriedades do objecto (com o ciclo for), sem necessidade de escrita exaustiva de código.

Existe, ainda, uma outra notação que é um pouco mista entre as duas anteriores, em que os índices dos arrays aparecem na sintaxe como nomes, neste caso, os nomes das propriedades. No caso do exemplo que vimos há pouco, a sintaxe apareceria como se segue:

var carro1 = new veiculo();

carro1[“marca”] = "Porche ";

carro1[“modelo”] = "Carrera ";

carro1[“ano_matricula”] = "1998";

carro1[“cilindrada”] = 2400;

Poderá utilizar qualquer uma das notações baseadas em arrays sempre que achar vantajoso utilizar índices para efectuar manipulação das propriedades dos objectos.

Métodos:

Os métodos são funções associadas aos objectos. Um objecto pode assim ser definido em termos de propriedades, não só pelas suas variáveis, mas também pelos métodos que tiver associados, que permitem não só realizar acções sobre as propriedades próprias do objecto, como também outros tipos de operações diversas.

Vejamos como podemos criar um método para visualizar o estado das variáveis que compõem o conjunto de propriedades de um objecto: .

function veiculo(a,b,c,d) { // Função construtora do Objecto

this.marca = a;

this.modelo = b;

this.ano_matricula = c;

this.cilindrada = d;

this.listar_variaveis = listar_variaveis; // Método listar variáveis

}

function listar_variaveis() {

for (var k=0; k<=3 ; k++) {

document.write("Propriedade ",k," = " ,this[k], " <p/> ");

}

var carro1 = new veiculo();

carro1[0] = "Porche ";

carro1[1] = "Carrera ";

carro1[2] = "1998";

carro1[3] = 2400;

carro1.listar_variaveis();

</script>

O método "listar_variaveis()" utiliza um ciclo for para mostrar todas as propriedades do objecto, vistas como um array.

A sintaxe utilizada para chamar um método de um determinado objecto é idêntica à que é utilizada para fazer referência a uma determinada propriedade do objecto, ou seja, o nome do objecto, um ponto"." e o nome do método,

objecto.método(argumentos);

Objectos integrados no JavaScript

O JavaScript incorpora, uma série de objectos que permitem realizar as tarefas mais importantes que se esperam realizar com esta linguagem.

Relativamente aos objectos que podem ser utilizados em scripts JavaScript, dividem-se em quatro tipos:

Objectos para operações com Strings

Permitem efectuar as mas variadas operações com texto e sequências de caracteres.

Operações matemáticas

Implementam as operações matemáticas correntes.

Data e Hora

Esta família de objectos permite realizar operações com datas e tempo.

Objectos relacionados com o browser

Estes objectos são os mais importantes, porque são os que permitem várias operações e manipulações ao nível do browser Web.

No JavaScript há funções que não estão associadas a nenhum objecto e que, portanto, não podem ser consideradas métodos

Estas funções são as seguintes:

escape(String)

unEscape(String)

eval(String)

parseFloat(String)

parseInt(String,base)

As funções escape() e unEscape() têm uma finalidade muito específica. Uma vez que certos caracteres (por exemplo, espaços em branco) não podem ser incluídos nos endereços Web (URL), é necessário fazer uma codificação, de forma a utilizá-los dessa forma. Assim, a função escape() gera como resultado o código correspondente a uma determinada entrada em texto simples, que pode ser incorporado num URL, enquanto o unEscape() realiza a função inversa. Por exemplo:

var x = escape(“ “);

var y = eval(“(12/4)*5“);

document.write("x = ",x);

document.write("y = ",y);

</script>

Devolve o resultado:

X = %20

Y = 15

Estas funções irão ser úteis apenas para os leitores que utilizarem cookies, uma vez que poderá ser necessário colocar espaços e outros caracteres fora do comum, nos URL's.

A função eval(), procura avaliar o conteúdo que lhe é passado corno parâmetro e gera um resultado numérico.

A função eval() é das mais úteis deste conjunto de funções e é, normalmente, muito utilizada nos programas para avaliação de expressões numéricas.

As funções parselnt() e parseFloat() têm características semelhantes. O objectivo é converter o valor passado corno parâmetro (uma String de texto) num valor numérico, inteiro no caso do parselnt(), ou de vírgula flutuante no caso do parseFloat(). Vejamos dois exemplos de aplicação destas duas funções: caso do

var x = parseInt("FF",16);

var y = parseFloat("23.34 litros ");

Obtém-se o seguinte resultado:

x = 255

y = 23.34

O parselnt() converte a String que lhe é passada num número inteiro na base indicada ("FF" na base 16 é igual a 255 em decimal), O parseFloat() converte a String que lhe é passada num número de vírgula flutuante (23.34, ignorando o restante texto).

Strings

O objecto String é utilizado no JavaScript para todas as operações que se possam realizar envolvendo strings. Este objecto pode ser utilizado sem sequer necessitarmos de o criar com a palavra reservada "new". No entanto, em termos formais, estaremos a chamar uma função JavaScript e não a instanciar um objecto (o comportamento do código deverá ser exactamente igual).

O objecto String é composto por uma propriedade e por um largo conjunto de métodos, que seguidamente se enunciam:

Propriedades:

length

Comprimento da string (número de caracteres)

Métodos:

anchor(name)

Devolve uma String com o texto HTML correspondente ao elemento de link (Anchor – <a name= "name">, com o parâmetro name preenchido.

big()

Formatação HTML com o elemento <big> (texto grande).

blink()

Formatação HTML com o elemento <blink> (texto a piscar).

bold()

Formatação HTML com a marca <b> (Bold).

charAt(posição)

Devolve o carácter localizado na posição indicada da String de texto.

charCodeAt(posição)

Devolve o código do carácter localizado na posição indicada da String de texto.

concat(valor1, ...)

Concatenar valores (1 a n) a uma string.

fixed()

Devolve uma String com a formatação HTML correspondente ao elemento <fixed>.

fontcolor(cor)

Devolve uma String com código HTML, em que é aplicado um elemento <font>, com um atributo color definido com o valor colocado em "cor", atributo esse definido na escala RGB, da forma que é aplicado no HTML.

fontSize(tamanho)

Devolve formatação HTML baseada na marca <fontsize>, com o atributo size igual a "tamanho".

fromCharcode(c1,c2,...)

(static) cria uma string a partir de códigos de carácter passados como parâmetro.

indexOf(string,loc)

Devolve a posição em que se encontra a primeira ocorrência da "string", a partir da posição indicada por "loc".

Italics()

Devolve uma String com a formatação HTML correspondente ao itálico (elemento <i>).

lastIndexOf(string,loc)

Idêntico a "indexOf()", mas devolve a última ocorrência de "string", em vez da primeira.

link(href)

Devolve uma String com o código HTML correspondente à colocação de um link (<a href = "href”>), com o parâmetro "href' preenchido.

match( exp )

Procura uma expressão (exp) numa string e devolve a string, bem como outros dados sobre a parte encontrada.

replace( exp, sub)

Idem, mas subtituindo a expressão encontrada (exp) pela de substituição (sub).

search(exp)

Procura numa string uma determinada substring (exp), devolvendo a posição encontrada.

slice(inicio,fim)

Define um pedaço de uma string entre as posições início e fim.

small()

Formatação HTML com o elemento <small>.

split( delimitador)

Parte uma string num array de strings, delimitada pelo delimitador.

strike()

Formatação HTML com o elemento <strike>.

sub()

Formatação HTML com o elemento <sub>.

substring(loc1 ,loc2)

Devolve uma String contida na String mãe, localizada entre as posições "loc1" e "loc2".

substr(inicio,comp)

Define uma substring, a partir de início e com o tamanho “comp".

sup()

Forrnatação HTML com o elemento <sup>.

toLowerCase()

Devolve uma String com todos os caracteres convertidos para minúsculas.

toUpperCase()

Idem, mas convertendo todos os caracteres para maiúsculas.

Exemplo:

var s="Esta e uma string de texto";

document.write("Esta e uma string de texto", "</p>");

document.write("Tamanho da String = ",s.length, " caracteres");

document.write(“ <br/> ");

// Definicao de uma Substring

document.write("uma substring de texto", "</p>");

var s1 = s.substring(4,10);

document.write(s1);

document.write(" <br/> ");

// Passagem para maiusculas

var s2 = s1.toUpperCase();

document.write(s2);

// Algumas formatacoes HTML

document.write("<br/> Italico: ",s2.italics());

document.write("<br/> Bold: ",s2.bold());

document.write("<br/> Piscar: ",s2.blink());

</script>

Neste exemplo, pode constatar que foi definida uma string logo no início e colocada na variável "s". Depois, foi calculado o tamanho da string e enviado para o ecrã. Foi depois definida urna substring ("s1") que é composta pelos caracteres localizados entre as posições 4 e 10 da string "s". Depois de enviada para o ecrã , foi convertida para maiúsculas (com o correspondente método toUpperCase() que coloca o resultado numa outra string "s2").

Finalmente, aplicaram-se algumas formatações HTML sobre esta string final, o que inclui o itálico, o Bold e o Blink.

Operações Matemáticas

Outro tipo de necessidades que existem em termos de programação é a realização de operações de natureza matemática. Estas são asseguradas por meio de um objecto denominado "Math". À semelhança do objecto anterior (String), com este objecto é também possível tratar este tipo de elementos como funções, não utilizando o "new" para efectuar a sua criação. Este objecto "Math" tem como característica fundamental o facto de as suas propriedades serem todas estáticas, isto é, não mudarem no decurso da utilização do objecto.

O objecto Math é composto por propriedades e por um conjunto de métodos, que seguidamente se enunciam:

Propriedades: (constantes matemáticas)

E Número de neper.

LN10 Logaritmo natural / neperiano de 10.

LN2 Logaritmo natural / neperiano de 2.

PI Número PI.

SQRT1_2 Raiz quadrada de 1/2.

SQRT2 Raiz quadrada de 2.

LOG10E Logaritmo base 10 de e.

LOG2E Logaritmo base 2 de e.

Exemplo:

document.write("E = ",Math.E);

document.write("<br/>LN10 = ",Math.LN10);

document.write("<br/>LN2 = ",Math.LN2);

document.write("<br/>PI = ",Math.PI);

document.write("<br/>SQRTC2 = ",Math.SQRT1_2);

document.write("<br/>SQRT2 = ",Math.SQRT2);

document.write("<br/>LOG10E = ",Math.LOG10E);

document.write("<br/>LOG2E = ",Math.LOG2E);

</script>

Todo os números, sendo reais e de cálculo infinito, aparecem com a precisão máxima que é possível ser conseguida:

E= 2,1718281828459045

LN10 = 2,302585092994046

LN2 = 0,6931471805599453

PI= 3,141592653589793

SQRT1_2 = 0,7071067811865476

SQRT2 = 1,4142135623730951

LOG10E = 0,4342944819032518

LOG2E = 1,4426950408889634

Métodos:

nota: Todos os métodos de natureza trigonométrica funcionam com valores em radianos.

abs(número)

Valor absoluto do "número", ou seja, sempre o valor independentemente do sinal (positivo ou negativo).

acos(número)

Arco-coseno de "número".

asin(número)

Arco-seno de "número".

atan(número)

Arco tangente de "número".

atan2(x,y)

Ângulo entre o eixo dos x e um ponto (identificado por x y).

ceil(núrnero)

Devolve o próximo inteiro maior que "número".

cos(núrnero)

Coseno de "número".

exp(número)

Devolve "e" levantado ao "número" (e^número).

floor(número)

Devolve o inteiro anterior menor que "número".

log(número)

Devolve o logaritmo de "número".

max(num1,num2)

Devolve o número maior dos números "num1" e "num2",

min(num1,num2)

Devolve o número menor dos números "num1" e "num2" .

pow(num,expoente)

Devolve "num" elevado a "expoente".

random()

Devolve um número aleatório entre 0 e 1.

round(número)

Arredonda "número" para o inteiro mais próximo.

sin(número)

Seno de "número".

sqrt(número)

Raiz quadrada de "número".

tan(número)

Tangente de "número".

Vejamos um conjunto de alguns exemplos de utilização de métodos do objecto "Math":

Exemplo:

// Coseno de PI (-1)

document.write("<br/>Coseno de PI = ",Math.cos(Math.PI));

// Raiz quadrada de 9 (3)

document.write("<br/>Raiz Quadrada de 9 = ", Math.sqrt(9));

// Arredondar um número (-5)

var x = -4.56;

document.write("<br/>Arredond. de -4.56 = ", Math.round(x));

//Gerar um número aleatório inteiro entre 0 e 10

var y = 10*(Math.random()); //gerar um número

var z = Math.round(y)); // arrendondar

document.write("<br/>z = ", z);

</script>

Datas e Horas

O trabalho com datas e tempo em JavaScript faz-se utilizando um objecto específico, "Date". Este objecto é criado e utilizado como qualquer outro objecto, sendo necessário efectuar a criação de um objecto concreto para o poder utilizar.

A criação de um objecto de tipo "Date" faz-se com a seguinte sintaxe:

nome_objecto = new Date(parâmetro);

O "parâmetro" é bastante importante para a utilização que se fizer do novo objecto criado. Se não for preenchido, a data que vai ficar contida no objecto é a data e hora correntes. Caso contrário, poderá ser lá colocada uma data e hora específicas, utilizando para tal a notação "ano,mês, dia,horas,minutos,segundos” ou, em alternativa, o tempo em milissegundos (representação interna).

O objecto Date é composto por um largo conjunto métodos. A data pode ser referenciada do seguinte modo, (aaaa,m-1,dd

Métodos:

getDate()

Devolve o dia do mês (inteiro entre 1 e 31).

getDay()

Devolve o dia da semana (0 = Domingo, 1 = Segunda-Feira, ... ,6 = Sábado).

getFullYear()

Devolve o ano correspondente à data, com quatro dígitos.

getHours()

Devolve a hora (inteiro entre 0 e 23).

getMilliseconds()

Devolve o campo milissegundos.

getMinutes()

Devolve os minutos (inteiro entre 0 e 59).

getMonth()

Devolve o mês (inteiro entre 0 = Janeiro e 11 = Dezembro).

getSeconds()

Devolve os segundos (inteiro entre 0 e 59).

getTime()

Devolve um inteiro com o número de milissegundos que se passaram desde 1 de Janeiro de 1970 às 0:00:00.

getTimezoneOffset()

Devolve o número de minutos de diferença para a hora de Greenwich (GMT).

getUTCDay()

Devolve o dia da semana, estando a data expressa em tempo universal (UTC).

getUTCFullYear()

Devolve o ano (tempo UTC).

getUTCHours()

Devolve a hora (UTC).

getUTCMilliseconds()

Devolve o campo milissegundos (UTC).

getUTCMinutes()

Devolve minutos (UTC).

getUTCMonth()

Devolve o mês (UTC).

getUTCSeconds()

Devolve segundos (UTC).

getYear()

Devolve o ano correspondente à data num formato de dois dígitos.

parse(data)

Devolve o número de milissegundos ocorridos entre 1 de Janeiro de 1970 e a data.

setDate(valor)

Coloca o Mês do objecto igual ao valor inteiro entre 1 e 31 passado em "valor".

setFullYear(valor)

Idem para o ano (ano completo 4 dígitos).

setHours(valor)

Idem para as horas ("valor" entre 0 e 23).

setMilliseconds(valor)

Idem para o campo milissegundos.

setMinutes( valor)

Idem para os minutos ("valor" entre 0 e 59).

setMonth( valor)

Idem para o mês ("valor" entre 0 e 11).

setSeconds( valor)

Idem para os segundos ("valor" entre 0 e 59).

setTime(valor)

Fixa a data, sendo o "valor" o número de milissegundos desde 1 de Janeiro de 1970 às 0:00:00.

setUTCDate(dia_mes)

Fixa o dia do mês (tempo UTC).

setUTCFullYear(valor)

Fixa o ano (UTC).

setUTCHours(valor)

Fixa a hora (UTC).

setUTCMilliseconds()

Fixa o campo milissegundos (UTC).

setUTCMinutes()

Fixa os minutos (UTC).

setUTCMonth()

Fixa o mês (UTC).

setUTCSeconds()

Fixa os segundos (UTC).

setYear(valor)

Fixa o ano.

toString()

toGMTString()

toLocaleString()

Diversas formas de obter diferentes Strings com a data representada no objecto em causa. Se usar o primeiro, obterá uma representação corrente.

toUTCString()

Converte uma data para uma string (UTC)

valueOf()

Converte uma data para um número.

UTC (ano,mes,dia,hora,minuto,segundo) - Devolve o número de milissegundos decorridos entre o dia 1 de Janeiro de 1970, às 0:00:00 GMT e a hora especificada.

No exemplo de script que se segue, vemos como podemos utilizar estes métodos para colocar no documento HTML exactamente aquilo que pretendemos, em ternos de data e hora:

Exemplo:

var hoje = new Date();

var dia = hoje.getDate();

var hora = hoje.getHours();

var minuto = hoje.getMinutes();

var ontem = new Date();

ontem.setYear(2000)

document.write("Hoje é dia ", dia);

document.write(" e são ",hora," horas e ");

document.write(minuto," minutos", "</p> "); //Hoje é dia dd e são hh horas e yy minutos

document.write("Data: ", hoje.toLocaleString()); //Data: day, month dd, aaaa hh:yy:mm

document.write("Diferença entre hoje e ontem = "); //aaaa – 2000

document.write(hoje.getYear() – ontem.getYear(),"anos. "); //Diferença de datas:

</script>

Objectos do Browser

Neste domínio é onde residem os maiores problemas de incompatibilidades entre Microsoft e Netscape. Não é aconselhado utilizar-se elementos que sejam específicos de um determinado browser.

history

Este objecto permite trabalhar sobre a lista de acessos a locais WWW existente no browser. As propriedades e métodos disponíveis são os seguintes:

Propriedades:

current

Uma string que representa o URL do documento actual.

length

Representa o número de elementos da lista de acessos.

next

Representa o URL do elemento após o corrente, na lista.

previous

Idem para o anterior.

Métodos:

back()

Retorna ao documento anteriormente visitado (como o botão Back do browser) na lista de acessos.

forward()

Avança para o documento seguinte na lista de acessos,

go(posição)

Avança para o documento WWW identificado por "posição". Se este argumento for um inteiro, a página identificada por este número na lista de acessos é escolhida, se pelo contrário for uma String, esta conterá um URL ou parte dele na lista de acessos.

toString()

Devolve uma tabela HTML contendo o histórico de acessos do browser.

Exemplo:

history.go(-1);

history.back();

São equivalentes a pressionar o botão Back do browser.

document

Este objecto é criado quando uma determinada página WWW é carregada e contém informação diversa acerca desse documento. Para alem disso, permite a sua manipulação com um conjunto e métodos muito simples.

Vejamos uma lista das propriedades e dos métodos associados. Pela primeira vez vamos ver algumas propriedades que podem ser modificadas e não só lidas.

No entanto, nem todas as propriedades que se seguem o permitem:

Propriedades:

alinkColor

Representa a cor que um link, ou ponteiro de tipo Anchor do HTML, toma quando é pressionado com o rato, mas antes de o botão deste ser largado.

anchors[]

Array de elementos de tipo Anchor do documento HTML.

applets[]

Array de objectos Java, um objecto por cada applet Java.

bgColor

A cor do fundo do documento.

cookie

Uma string com parâmetros "cookie" do documento.

domain

String que designa o domínio Internet a que o documento pertence.

ernbeds[]

Array com objectos inseridos com <embed>.

fgColor

A cor do texto.

forms[]

Array de objectos Form existentes na página HTML.

lmages[]

Array de objectos imagem do documento (<img>).

lastModified

Uma String com a data da última alteração do documento.

linkColor

A cor com que os links aparecem no documento.

links[]

Um array contendo todos os links do documento.

location

Uma String com o URL do corrente documento.

plugins[]

Idêntico ao embeds[].

referrer

Uma String contendo o URL do documento a Partir do qual foi chamado o corrente.

title

O título do documento HTML.

URL

URL do documento.

vlinkColor

Cor que tomam os links já visitados.

Propriedades específicas Netscape:

classes

Array que contém objectos de estilo.

height

Altura em pixels do documento.

ids

Array de objectos de estilo (<id>).

layers[]

Array de objectos layer.

tags

Array de objectos composto pelo conjunto de elementos HTML do documento.

width

Largura em pixels do documento.

Propriedades específicas Internet Explorer:

activeElement

Define o elemento <input> que tem o foco.

alI[]

Identifica todos os elementos HTML de um documento.

charset

Página de caracteres em uso.

children[]

Elementos HTML que compõem o documento, pela ordem pela qual aparecem no documento.

defaultCharset

Página de caracteres predefinida para um documento.

expando

Se colocada a false, esta propriedade impede que um objecto seja expandido.

parentWindow

Define a janela que contém o documento.

readyState

Indica o estado de carregamento de um document (uninitialized - não começou o carregamento, loading documento em carregamento, interactive - em carregamento, mas já possível interacção com utilizador ou complete - página carregada).

Atenção: nas propriedades, as cores são expressas em forma de texto ou em RGB com dados hexadecimais, por exemplo:

document.bgColor = "Red";

ou em alternativa:

document.bgColor = "FF0000";

Coloca o fundo de um documento a vermelho.

Métodos:

clear()

Limpa o conteúdo de uma janela.

close()

Termina a importação de um documento e dá carregamento como terminado ("Done").

open(tipo)

Abre um documento para recepção de dados (por exemplo vindos de um write()). O "tipo" é um parâmetro opcional, em que se pode colocar um outro tipo de dados (por exemplo, suportado por um plug-in - produto externo ao browser).

write()

Escreve texto (HTML) no documento.

writeln()

Escreve texto (HTML) no documento e coloca no final um carácter de fim de linha (só tem efeito se for utilizada formatação HTML <PRE>).

Métodos Netscape:

captureEvents(mask)

Define o tipo de eventos que o documento vai captar.

contextual(est1,est2)

Retoma um objecto de estilo que representa "est2" no contexto do "est1".

getSelection()

Retoma o texto que estiver seleccionado no documento.

releaseEvents()

Pára captura de eventos.

routeEvent(evento)

Passa um evento para um outro handler (gestor de evento).

Métodos Internet Explorer:

elementFromPoint(x,y)

Devolve o objecto HTML que estiver nas coordenadas em causa.

location

O objecto location providencia informação acerca do URL corrente. É composto somente por propriedades. Todas as propriedades sao stings que representam várias facetas distintas do URL:

Propriedades:

hash

Uma string com o nome da URL.

host

O nome da máquina e o porto no URL.

hostname

O nome da máquina.

href

Todo o URL.

pathname

Só a parte de caminho do URL.

port

Só o porto.

protocol

O protocolo usado (incluindo o carácter ":").

search

Informação eventualmente passada a um programa CGI (aparece a seguir a um carácter "?" no URL).

Métodos:

reload()

Recarrega o documento corrente.

replace()

Substitui o documento actual por outro, sem alterar a "história" do browser.

Como exemplo de utilização deste, vejamos um pequeno script de teste, que envia para o ecrã toda a informação relativa à localização em que o ficheiro HTML correspondente está:

Exemplo:

// Informação acerca do URL

document.write("hash = ",location.hash);

document.write("<br/>host = ",location.host);

document.write("<br/>hostname = ",location.hostname);

document.write("<br/>href = ",location.href);

document.write("<br/>pathname = ",location.pathname);

document.write("<br/>port = ",location.port);

document.write("<br/>protocol = ",location.protocol);

</script>

window

O objecto window funciona corno o objecto mãe, que incorpora documentos ou outros objectos. Operando sobre o window, tem-se a oportunidade de controlar directamente a janela do browser WWW utilizado.

Propriedades:

closed

Boleano que especifica se uma janela foi ou não fechada.

defaultStatus

Uma string com o valor contido na barra de status.

document

Referencia o documento contido na janela.

frames[]

Um Array com todas as Frames que integram a janela.

history

Referência ao objecto histórico na janela.

length

O número de Frames na janela.

location

Objecto location na janela.

Math

Referencia um objecto contendo funções matemáticas.

name

O nome da janela.

navigator

Objecto navigator.

offscreenBuffering

Define o tipo de buffering que o browser faz.

opener

Referencia uma janela que tenha invocado uma função open() para criar uma janela.

parent

O nome da janela principal que contém o conjunto de Frames (Frameset).

screen

Objecto screen.

self

O nome da janela corrente.

status

Valar a aparecer na barra de status (pode ser fixado atribuindo um valor a esta propriedade).

top

O nome da janela de topo.

window

O nome da janela corrente.

Propriedades Netscape:

crypto

Referencia um objecto que implementa criptografia (crypto).

innerHeight

Altura da área mostrável do documento.

innerWidth

Largura da mesma área.

Java

Referencia objecto global Java.

locationbar

Informa da presença, ou não, da barra de localização do browser.

menubar

Idem para a barra de menus.

netscape

Referencia a classe Java netscape.

outerHeight

Altura em pixels da janela.

outerWidth

Largura em pixels da janela.

Packages

Referencia Packages Java.

pageXOffset

Numero de pixels que o documento corrente foi deslocado para a direita (com a barra de deslocação).

pageYOffset

Idem na posição vertical (para baixo).

personalBar

Identifica a presença ou não da barra pessoal do browser.

screenX

Coordenada X do canto superior esquerdo da janela.

screenY

Coordenada Y do canto superior esquerdo da janela.

scrollbars

Visibilidade das barras de deslocação do browser.

statusbar

Visibilidade da barra de status do browser.

sun

Package Java da Sun.

toolbar

Visibilidade da barra toolbar.

Propriedades Internet Explorer:

clientInformation

Substituto da Microsoft para o objecto navigator.

event

Descreve o evento mais recente.

Métodos:

alert(mensagem)

Faz surgir uma janela de alerta com a mensagem passada como parâmetro. A janela capta a atenção do utilizador (não o deixa fazer mais nada no browser) e só desaparece quando é pressionado o botão.

blur()

Retira o foco do teclado da janela em causa, passando-o para a janela mãe.

clearInterval(id)

Pára uma execução periódica de código iniciada com um setInterval().

clearTimeout()

Cancela um timeout (execução diferida de código).

close()

Fecha a janela.

confirm(mensagem)

Faz surgir uma janela de confirmação com botões "OK" e "Cancel". Conforme o botão pressionado, é devolvido o valor "verdadeiro" ou "falso" ao utilizador.

focus()

Dá foco de teclado a uma janela (proporciona a ocorrência de eventos de teclado).

moveBy(x,y)

Move uma janela x pixels para a direita e Y para baixo.

moveTo(x,y)

Move a janela para uma posição absoluta x,y.

open(URL, nome, param)

Abre uma janela e carrega o URL passado como parâmetro. No "param" podem ser configurados alguns aspectos relativos ao aspecto da janela,

prompt(msg,resp_defeito)

Abre uma janela de diálogo, que aceita uma entrada do utilizador, que é devolvida. "msg" contém o texto da pergunta e "resp_defeito" o valor inicial que aparece no campo a preencher.

resizeBy(a,l)

Altera o tamanho de uma janela de a pixels na altura e de I na largura.

resizeTo(a,l)

Altera as dimensões da janela para a por I pixels.

scroll(x,y)

Deslocação num documento para uma posição x,y.

scrollBy(x,y)

Deslocação no documento de x pixels para a direita e de y para baixo.

scrollTo(x,y)

Idêntico ao scroll(), que veio substituir.

setInterval(code,interv)

Executa o código Javascript code após um período de tempo de interv milisegundos e de periódica.

nome=setTimeout(exp,time)

Avalia a expressão "exp" quando passar o número de milissegundos definido por "time".

Métodos Netscape:

atob(str)

Descodifica uma string em base-64.

back()

Idêntico a pressionar o botão back.

btoa(dados)

Codifica os dados em base-64.

captureEvents(event-mask)

Especifica que eventos podem ser capturados.

disableExtemalCapture()

Impede a captura de eventos que ocorram num servidor diferente daquele em que corre o script.

enableExtemalCapture()

O oposto do anterior.

find()

Procurar texto no documento.

forward()

Equivalente a pressionar o botão forward do browser.

handleEvent(evento)

Passa um evento para o adequado gestor de eventos.

home()

Botão home do browser.

print()

Botão print do browser.

releaseEvents(mask)

Parar captura de eventos.

routeEvent(mask)

Passar evento para o próximo gestor de eventos.

setHotkeys(comando)

Activa ou desactiva a utilização de teclas para dar comandos ao browser.

setResizable(comando)

Permite ou impede o ajuste do tamanho da janela.

setZOptions()

Controla o comportamento das janelas quando há mais do que uma aberta em simultâneo.

sop()

Pára o carregamento do documento.

Métodos Internet Explorer:

navigate(url)

Carrega uma URL.

Exemplo:

window.open(http://www.google.com”);

</script>

Debugging

No JavaScript foi introduzido um par de funções muito útil para questões de debugging ou correcção de erros em programas.

Trata-se dos métodos:

watch()

unwatch()

Estes métodos aplicam-se a um determinado objecto e permitem que se force a execução de uma determinada função quando algo ocorre. O watch() aceita como argumentos o nome da propriedade a ser observada, bem corno o nome da função a ser executada quando a propriedade em causa mudar.

O unwatch() chama-se para desligar o efeito de debugging e cancelar o efeito do watch().

Exemplo:

<html>

<head>

function var_mudou() {

alert("Variável x foi modificada ");

}

</script>

</head>

<body>

var x=0;

watch('x', var_mudou);

x=1;

unwatch();

</script>

</body>

</html>

O watch() aplica-se neste caso à variável "x", definindo-se a função "var_mudou()" corno gestora do evento de mudança da variável.

Neste caso, a linha "x=1;" provoca a modificação da variável x e, portanto, a execução do código constante da função var_mudou(). .

O mesmo aconteceria mesmo que o valor da variável não tivesse sido modificado, mas desde que tivesse sido feita urna nova atribuição ao seu valor (por exemplo: x=0).

Exemplos Práticos

Uma empresa mudou recentemente de endereço Web, contudo, muitos dos seus clientes apenas conhecem o antigo e muitos bookmarks apontam ainda para lá. Sendo assim, é necessário construir uma página HTML que redireccionasse os utilizadores que vierem à página antiga, automaticamente para a página nova.

O JavaScript é a melhor solução para conseguir este efeito, com um script extremamente simples. A página seguinte avisa o utilizador do novo endereço durante 10 segundos, findos os quais provoca o salto para esse mesmo endereço (neste caso, para "novo.html").

<html>

<head>

<title> Mudança de site </title>

</head>

<body>

<h3>Atenção! As páginas Web que procura mudaram de local! Daqui a 10 segundos o seu browser será reencamlnhado para o novo local! Por favor actualize as suas referências para o novo endereço <ahref="Novo.html"> Novo.html</a></h3>

window.setTimeout("expirou()" ,10000); // Passados 10 segundos

function expirou() { // chama a função

window.open("novo.html");

}

</script>

</body>

</html>

O funcionamento do script é muito simples. É criado um mecanismo de temporização (window.setTimeout)), findo o qual é chamada a função expirou(). Esta função tem como função carregar o novo URL numa outra janela.

O utilizador pode ir directamente para o novo endereço seguindo o link HTML ou então simplesmente esperar os 10000 milissegundos, findos os quais é aberta uma nova janela que carrega o novo endereço. A janela antiga permanece aberta com a mensagem de aviso.

Vamos procurar implementar um relógio de "rodapé", isto é, na base inferior da janela do browser (o mesmo local onde aparecem as mensagens do browser, tipo "Done"). Existem várias versões de relógios em JAVA e JavaScript.

<html>

<head>

<title> Relógio de rodapé </title>

</head>

<body>

<h3>Este é o Relógio de Rodapé</h3>

function relogio() {

var hoje = new Date();

window.status = hoje.toString();

setTimeout(" relógio()", 1000);

}

relogio()

</script>

</body>

</html>

O funcionamento gira em tomo da função relógio(). Esta é chamada uma única vez. No entanto, depois cria no seu interior um temporizador que expira de segundo em segundo, chamando de novo a própria função.

Dentro da função acha-se a data e hora correntes e depois aplica-se à barra de status da janela do browser, recorrendo à propriedade status do objecto window.

Finalmente, vamos criar uma página WWW que receba o visitante da forma mais calorosa possível. Para isso, é necessário cumprimentá-lo com “Bom dia”, “Boa tarde” ou “Boa noite”, consoante a hora a que e esteja a aceder à página e mostrar-lhe as horas.

<html>

<head>

<title>Título</title>

</head>

<body>

<h3>

function cumprimentar() {

var hoje = new Date(); // A data de Hoje

var hora = hoje.getHours(); // A Hora corrente

var minuto = hoje.getMinutes(); // Minutos

// Conforme a hora o cumprimento e distinto

if ((hora > 7) && (hora < 12)) {

document.write("Bom dia!<p>");

} else {

if ((hora > 12) && (hora < 20)) {

document.write("Boa tarde!<p>");

} else {

document.write("Boa noite!<p>");

}

// Colocar a hora e data

document.write("São ",hora," : ",minuto, "<p>");

document.write(hoje.getDate()," / ", hoje.getMonth()+ 1," / ");

document.write(hoje.getYear());

}

cumprimentar()

</script>

<hr/>Pressione <a href="inexistente.html">aqui<la> para prosseguir... <p/>

</h3>

</body>

</html>

O script chama a função cumprimentar() e determina se é manhã, tarde ou noite, tendo por base a hora corrente (obtida por intermédio de um método getHours(), de um objecto Date).

No caso de o acesso ser realizado à noite (entre as 20:00 e as 07:00), a mensagem seleccionada é "Boa noite!", surgindo depois a hora.