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.
<script language="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:
<script language="JavaScript">
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>
<script language="JavaScript">
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>
<script language="JavaScript">
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:
.
<script
language="JavaScript">
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:
<script
language="JavaScript">
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:
<Script language = "JavaScript">
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:
<script language = "JavaScript">
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" (enú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:
<script language = "JavaScript">
// 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:
<Script language = "JavaScript">
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:
<script language = "JavaScript">
// 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:
<script language = "JavaScript">
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>
<script language = "JavaScript">
function var_mudou() {
alert("Variável x foi modificada ");
}
</script>
</head>
<body>
<script language = "JavaScript">
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>
<script language = "JavaScript">
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>
<script language = "JavaScript">
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>
<script language = "JavaScript">
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.
|