Uma função é um grupo de linha(s) de código de
programação destinado uma tarefa bem específica e que podemos de
necessário, utilizar vária vezes. A utilização de funções melhora
bastante a leitura do script.
Em Javascript, existem dois tipos de funções:
·As funções próprias do Javascript. Que
chamamos de "métodos". Elas são associadas a um objecto bem
particular como o caso do método Alert() com o objecto window.
·As funções escritas por vós para
executar o vosso script. É a estas que nos vamos interessar agora.
declaração de funções
Para declarar ou definir
uma função, utiliza-se a palavra function.
A sintaxe de uma declaração de função é a seguinte:
function nome_da_função(argumentos) {
... código de instruções ...
}
O nome da função segue as mesmas regres do que as
das variáveis (número de caracteres indefinido, começado por uma letra
pode incluir números...). Volto a lembrar que o Javascript é case
sensitive. Assim função() não será igual a Função(). Todos os nomes
de funções num um script devem ser únicos.
A menção dos argumentos é facultativo mas no caso
dos parêntese devem ficar. É alias graças aos parêntese que o
interpretador Javascript distinga as variáveis das funções. Voltaremos
a falar mais em pormenor sobre os argumentos e outros parâmetros mais a
frente.
O facto de definir uma função não vai executar os
comandos que ela contém. ~só é executada quando chamamos a função.
invocação de uma função
A invocação de uma
função se faz o mas simples possível, pelo nome da função com
parêntese).
Seja por exemplo nome_da_função();
Convém verificar (porque o browser lê o script de
cima a baixo) que a vossa função deve estar bem definida antes de a
chamar.
As funções dentro <HEAD>...</HEAD>
É assim aconselhado de inserir todas as declarações
de funções no cabeçalho da página , isto é entre os tags
<HEAD>...</HEAD>. assim terão a certeza que as funções já
estarão interpretadas antes de serem invocadas no <BODY>.
exemplos
Neste exemplo, definimos dentro dos tags HEAD, uma função chamada mensagem() que
insere um texto "Bem vindo a minha página". Esta função será
chamada no carregamento da página ver onLoad=.... no tag <BODY>.
Pode-se
passar valores ou parâmetros as funções Javascript. Assim as funções
podem utilizar valores.
Para passar um parâmetro a uma função, fornece-se um nome de uma
variável dentro da declaração da função.
Um
exemplo simples para compreender. Está escrito uma função que insere
uma caixa de aviso em que o texto pode ser alterado.
Na declaração da função, escreve-se:
function
Exemplo(Texto) {
alert(texto);
}
O
nome da variável é Texto e é definida como um parâmetro da função.
Na invocação da função, fornece-se o texto:
Exemplo("Bom
dia a todos");
passar vários valores a uma função
Pode-se passar vários
parâmetros a uma função. Como é frequente o caso em Javascript,
separa-se os parâmetros por vírgulas.
function nome_da_função(arg1,
arg2, arg3) {
... código de instrução ...
}
Declaração de função:
function
Exemplobis(Texto1, Texto2){...}
Invocação da função:
Exemplobis("Bem
vindo a minha página", "Bom dia a todos")
voltar a um valor
O princípio é simples (a
prática por vez não é tão simples). Para reenviar um resultado, basta
escrever a palavra chave returnseguido da
expressão a reenviar. Notar que cercar a expressão de parênteses. Por
exemplo:
function cubo(numero) {
var cubo = numero*numero*numero
return cubo;
}
A instrução
return é facultativa e podemos
encontrar vários return na mesma função.
Para
explorar este valor da variável reenviada pela função, utiliza-se uma
formulação do tipo document.write(cubo(5)).
variáveis locais e
variáveis globais
Com as funções, o bom uso
de variáveis locais e globais tem toda a sua importância.
Uma variável declarada
dentro uma função pela palavra chave var terá uma invocação limitada a esta própria função.
Não se pode assim chama-la fora do script. Chamamos assim variável local.
function cubo(numero) {
var cubo = numero*numero*numero
}
Assim
a variável cubo neste exemplo é uma variável local. Se fazemos
referência a ela fora do script, esta variável será desconhecido pelo
interpretador Javascript (mensagem de erro).
Se
a variável é declarada contextualmente (sem utilizar a palavra var), a
sua invocação será global.
function cubo(numero) {
cubo = numero*numero*numero
}
A
variável cubo declarada será aqui uma variável global.
As
variáveis declaradas logo no início do script, fora e antes de todas as
funções, serão sempre globais, que ela seja declarada com var ou de
maneira contextual.
<SCRIPT LANGUAGE="javascript">
var cubo=1
function cubo(numero) {
var cubo = numero*numero*numero
}
</SCRIPT>
A
variável cubo será global.
Para
facilitar a gestão das variáveis, posso aconselhar de as declarar logo
no início do script (como a maior parte das linguagens de programação).
Este hábito pode prevenir algumas complicações.
Eventos
Geral
Com os eventos e sobretudo sua gestão, abordamos o lado
"mágico" do Javascript.
Em Html clássico, há um evento que conhecem bem. É o clique do rato sobre
um link que vai abrir outra página Web. Infelizmente, é praticamente o
único. Felizmente, o Javascript vai acrescentar uma boa dezena.
Os eventos Javascript, associados as funções, aos
métodos e aos formulários, abrem uma grande porta para uma verdadeira interactividade
das páginas.
Eventos
Vamos ver os diferentes
eventos implementados em Javascript.
EVENTOS
DESCRIÇÃO
Clik
Load
Unload
MouseOver
MouseOut
Focus
Blur
Change
Select
Submit
Quando o utilizador clica sobre um botão, um link
ou outro elementos.
Quando a página é carregada pelo browser.
Quando o utilizador saia da página.
Quando o utilizador coloca o ponteiro do rato
sobre um link ou outro elemento.
Quando o ponteiro do rato não está sobre um link
ou outro elemento.
Quando um elemento de formulário tem o focus,
istoé, que está activo.
Quando um elemento de formulário perde o focus,
isto é, quando o deixa de estar activo.
Quando o valor de um campo de formulário é
modificado.
Quando o utilizador selecciona um campo dentro de
elemento de formulário.
Quando o utilizador clica sobre o botão Submit para
enviar um formulário.
Gestão de eventos
Para ser eficaz, é necessário que a estes eventos sejam
associados as acções previstas por ti. É o papel de gestão de eventos. A
sintaxe é:
onevento="function()"
Por exemplo, onClick="alert('Bem
vindo ao Truques e Dicas')".
De maneira literária, no clicar do utilizador, abrir uma caixa de aviso com
a mensagem indicada.
onClick
Evento mais clássico em informática, o clique do rato.
O código deste botão é:
<FORM> <INPUT TYPE="button" VALUE="Clicar" onClick="alert('Acabas-te de clicar no
botão')"> </FORM>
Mais pormenores sobre os formulários no próximo capítulo.
onLoad
e onUnload
O evento Load aparece
quando a página acaba de se carregar. O inverso, Unload aparece
quando o utilizador saia da página.
Os eventos onLoad e onUnload são utilizados sob forma
de atributos do tags <BODY> ou <FRAMESET>. Pode-se assim escrever um
script para desejar as boas vindas na abertura de uma página e uma pequena
palavra de adeus ao sair desta.
<HTML>
<HEAD> <SCRIPT LANGUAGE='Javascript'>
function bemvindo() {
alert("Bem vindo a esta página");
}
function adeus() {
alert("Adeus");
}
</SCRIPT> </HEAD> <BODYonLoad='bemvindo()' onUnload='adeus()'> Html normal </BODY>
</HTML>
onmouseOver e onmouseOut
O evento onmouseOver
executa-se quando o cursor passa por cima (sem clicar) de um link ou de uma
imagem. Este evento é bastante prático, por exemplo, para inserir
explicações na barra de estado ou mesmo com uma pequena janela tipo
info-objecto.
Passar o cursor do rato sobre a
palavra exemplo (sem clicar no link).
O evento onmouseOut,
geralmente associado um onmouseOver, executa-se quando o cursor saia da
zona sensível (link ou imagem).
Falaremos com mais pormenor sobre o onmouseOver e o onmouseOut na página
seguinte.
Eventos
(continuação)
onFocus
O evento onFocus é quando um objecto se torna
activo, isto é, sempre que activamos uma janela, ou uma textfiel que fica
pronta para receber texto. Os objectos podem tornar-se activos com o clique
do rato ou com o uso da tecla "Tab".
Se clicar na zona do texto, irá se efectuar-se um
focus.
onBlur
O evento onBlur
executa-se quando por exemplo uma text field de um formulário perde o
focus. Isto aconteça quando o utilizador desactiva a text field clicando
fora dela ou utilizando a tecla "Tab".
Se depois de clicar e/ou escrever na zona do texto,
clica-se fora do documento, produza-se o evento Blur.
O código é:
<FORM>
<INPUT TYPE=text onBlur="alert('Isto é um
Blur!')">
</FORM>
Gestão de eventos
Para ser eficaz, é necessário que a estes eventos sejam
associados as acções previstas por ti. É o papel de gestão de eventos. A
sintaxe é:
onEvento="function()"
Por exemplo, onClick="alert('Bem
vindo ao Truques e Dicas')".
De maneira literária, no clicar do utilizador, abrir uma caixa de aviso com
a mensagem indicada.
onchange
Este evento é bastante
semelhante ao do onBlur mas com uma pequena diferença. Não só a área de
texto deve ter perdido o focus mas também o seu conteúdo deve ter sido
alterado pelo utilizador.
onSelect
Este evento executa-se quando o utilizador seleccionou
toda ou parte de um texto numa text field.
Gestões de eventos
disponíveis em Javascript
Agora apresento uma lista de
objectos que correspondem a gestões de evento bem determinado.
OBJECTO
GESTÕES
DE EVENTOS DISPONÍVEIS
Janela
Link hypertexto
Elemento de texto
Elemento de zona de texto
Elemento botão
Botão Radio
Lista de selecção
Botão
Submit
Botão
Reset
onLoad,
onUnload
onClick,
onmouseOver, on mouseOut
onBlur,
onChange, onFocus, onSelect
onBlur,
onChange, onFocus, onSelect
onClick
onClick
onBlur,
onChange, onFocus
onClick
onClick
Sintaxe do onmouseOver
O código de gestão de evento onmouseOver
acrescenta-se nos tags do de link :
<A HREF="#" onmouseOver="accao()">link</A>
Assim, quando o utilizador passa com o rato sobre o
link, a função action() é invocada. O atributo HREF é indispensável. Ele
pode conter o endereço de uma página Web se assim o desejares ou
simplesmente o cardinal "#" para que o link fica activo mas não
abra nenhuma página.
Exemplo: Ao sobrevoar o link "mensagem
importante", uma janela de aviso abra-se.
O código é :
<BODY>
...
<A HREF="#" onmouseOver="alert('Truques
e Dicas')">mensagem importante</A>
...
<BODY>
Ou se preferes usar os tags <HEAD>
<HTML>
<HEAD> <SCRIPT language="Javascript">
function mensagem(){
alert("Truques e Dicas")
}
</SCRIPT>
</HEAD>
<BODY>
<A HREF="#" onmouseOver="mensagem()">mensagem
importante</A>
</BODY>
</HTML>
Sintaxe do onmouseOver
Completamente similar ao onmouseOver, só que o evento
se executa quando o cursor do do rato saia do link ou da zona sensível.
Pode-se imaginar o código seguinte:
<A HREF="#" onmouseOver="alert('Truques
e Dicas')" onmouseOut="alert('Obrigado pela visita')">mensagem
importante</A>
Exemplo: Ao sobrevoar o link "mensagem
importante", uma janela de aviso abra-se.
Troca de imagens
Com a gestão de eventos onmouseOver, podemos prever que
depois de sobrevoar uma imagem pelo o utilizador, uma outra aparece (ambas as imagem devem ter o mesmo tamanho).
O código é relativamente simples.
Completem sempre em
Javascript os atributos width=x height=y das tuas imagens.
Exemplo:
Expressão if
Num momento ou outro da programação, teremos necessidade
de testar uma condição. O que vai permitir executar ou não uma série de
instruções.
Na sua formulação a mais simples, a expressão if
apresenta-se assim:
if (condição verdadeira) {
uma ou várias instruções;
}
Assim, se a condição é verdadeira, as instruções
executam-se. Se ela não é, as instruções não se executam-se e o programa
passa para o comando seguinte.
De maneira um pouco mais evoluídos, tem-se a expressão if...else
if (condição verdadeira) {
instrução1;
}
else {
instrução2;
}
Se a for verdadeira (true), o bloco de instruções 1 se
executa. Se ela não for (false), o bloco de instruções 2 se executa.
Graça aos operadores lógicos "e" e
"ou", a expressão de teste pode testar uma associação de condições.
Assim if ((condição1) && (condição2)), testará se a condição 1
e a condição 2 é realizada. E if ((condição1) || (condição2)), testará
se uma ao menos das condições é verdadeira.
Para ser mais completo (e para aqueles que gostam da
escrita concisa), também há:
(expressão) ? instrução a :
instrução b
Se a expressão entre parêntese é verdadeira, a instrução a
é executada. Se a expressão entre parêntese volta falsa, é a instrução b
que se executa-se.
Expressão for
A expressão for permite de executar um bloco de
instruções um certo número de vez em função da realização de um certo
critério. Sua sintaxe é:
for (valor inicial ; condição
; progressão) {
instruções;
}
Pegamos um exemplo concreto
for (i=1, i<10, i++) {
document.write(i + "<BR>")
}
Na primeira passagem, a variável i, é inicializada
a 1. Sendo a variável inferior a 10. Ela é então incrementada de uma unidade
pelo operador de incrementação i++
(i vale então 2) e as instruções executam-se.
No fim da execução das instruções, voltamos ao contador. A variável i (que
vale 2) é ainda inferior a 10. Ela é aumentada de 1 e as instruções
prosseguem, até que i vale 10.
A variável i não satisfaz mais a condição i<10.
O ciclo interrompa-se e o programa continua depois da chaveta fechada
While
A instrução while permite de executar uma
instrução (ou um grupo de instruções) um certo número de vezes.
while (condição verdadeira){
continuar a fazer alguma coisa
}
Enquanto que a condição é verdadeira, o Javascript
continua executar as instruções entre as chavetas. Uma vezes que a condição
não mais verdadeira, o ciclo interrompa-se e continua-se o script.
Pegamos neste exemplo:
cont=1;
while (cont<5) {
document.write ("linha : " + cont + "<BR>");
cont++;
}
document.write("fim do ciclo");
Vejamos como funciona este exemplo.
Primeiro a variável que ir+a servir de contador cont é inicializada em
1. o ciclo while arranca então com o valor 1 que é inferior a 5. A condição é verdadeira.
Executa-se as instruções das chavetas.
Primeiro, "linha : 1" é inserido e depois o contador é incrementado
de 1 e toma assim o valor 2.
A condição ainda é verdadeira. as instruções entre as
chavetas são executadas. E isso até inserir a linha 4. Aí , o contador depois
da incrementação vale 5. A
condição já não sendo verdadeiro, continuamos no script e é então o fim do
ciclo.
Atenção ! Com o sistema de ciclo, o risco existe (se a condição é
sempre verdadeira), de fazer o ciclo indefinidamente a 'instrução. O que pode
fazer crachar o browser !
Break
A instrução break
permite interromper prematuramente um ciclo for ou while.
Para ilustrar isto, retomamos o
nosso exemplo:
cont=1;
while (cont<5) { if (cont == 4)
break; document.write ("linha : " + cont
+ "<BR>");
cont++;
}
document.write("fim do ciclo");
O funcionamento é semelhante ao
exemplo precedente só que quando o contador vale 4. Nesse momento, o break
faz-nos sair do ciclo e "fim do ciclo" é inserido.
O resultado no écran será:
linha : 1
linha : 2
linha : 3
fim do ciclo
Continue
A instrução continue permite de saltar uma
instrução num ciclo for ou while e de continuar de seguida com
o ciclo (sem sair deste como faz o break).
Retomamos o nosso exemplo ;
cont=1;
while (cont<5) { if (cont == 3){
cont++
continue;}
document.write ("linha : " + cont + "<BR>");
cont++;
}
document.write("fim do ciclo");
Aqui, o ciclo começa, quando o contador vale 3, devido a
instrução continue, salta-se a instrução document.write (linha
: 3 não é afixada) e continua-se com o ciclo.
Nota-se que tivemos de inserir cont++ antes continue; para
evitar um ciclo infinito e crachar o browser (cont fica em 3).
O resultado no écran será:
linha : 1
linha : 2
linha : 4
fim do ciclo
Formulários
Em geral
Com o Javascript, os formulários Html tomem outra
dimensão. Não esquecer que em Javascript, podemos aceder a cada elemento de
um formulário para, por exemplo, ler ou escrever um valor, uma escolha a
qual poderá associar uma gestão de evento... Todos esses elementos irão
reforçar as capacidades interactivas da página.
Um formulário é um elemento
Html declarado pelo tags <FORM></FORM>.
Um formulário contém um ou vários elementos que chamamos os controladores
(widgets). Esses controladores são escrito por exemplo pelo tags <INPUT TYPE= ...>.
Declaração de um formulário
A declaração de um formulário
faz-se pelos tags <FORM> e </FORM>. Pode-se notar que em
Javascript, o atributo NAME="nome_do_formulário" tem toda a sua
importância para designar o caminho completo dos elementos. Em suma, os
atributos ACTIONeMETHODsão facultativos pelo menos até não fazer apelo ao
servidor.
Um erro clássico e em
Javascript é de esquecer de declarar o fim do formulário</FORM> depois de ter inserir um controlador.
Controlador de linha de texto
A zona de texto é o elemento de entrada/saída por
excelência do Javascript. A sintaxe Html é <INPUT TYPE="text"
NAME="nome" SIZE=x MAXLENGTH=y> para uma área de texto de uma
só linha, de comprimento x e de comprimento máximo y.
O objecto texto tem 3
propriedades:
PROPRIEDADES
DESCRIÇÃO
name
indica o nome do controlador pelo que podemos
aceder.
defaultvalue
indica o valor por defeito que será afixada na
zona de texto.
value
indica que o valor da zona de texto. Seja ele
escrito pelo utilizador ou já ter um valor por defeito.
Ler um valor numa zona de texto
Um exemplo que iremos pormenorizar:
Insira um valor e carregue no botão para controla-lo.
Quando clica-se no
botão "controlar", o Javascript chama a função controle()
no qual passamos o formulário em que o nome é form1 como argumento.
Esta funçãocontrole() definida nos tags <HEAD> Toma sob
a variável test, o valor da zona de texto. Para aceder a este valor,
escreve-se o caminho completo deste (ver o capítulo"Um pouco de teoria objecto"). No
documento presente, tem o objecto formulário chamado form1 que contém o
controlador de texto nomeado input e que tem como propriedade o elemento de
valor value. O que dá document.form1.input.value.
Escrever um valor na zona de texto
Inserir um valor qualquer na
zona do texto de entrada. Carregar sobre o botão para inserir este valor na
zona de texto saída.
Código:
<HTML>
<HEAD> <SCRIPT
LANGUAGE="javascript"> function afixar(form2) { var testin =document. form2.input.value; document.form2.output.value=testin } </SCRIPT> </HEAD> <BODY> <FORM NAME="form2"> <INPUT TYPE="text" NAME="input"
VALUE=""> Zona de texto de entrada<BR> <INPUT TYPE="button"
NAME="botao" VALUE="Afixar"
onClick="afixar(form2)"><BR> <INPUT TYPE="text" NAME="output"
VALUE=""> Zona de texto de saída </FORM> </BODY> </HTML>
Ao clicar no botão
"Afixar", o Javascript chama a função a função afixar() na
qual passa o formulário em que o nome é form2 desta vez como
argumento.
Esta função afixar() definida nos tags <HEAD> toma sob a
variável testin, o valor da zona de texto de entrada. À instrução
seguinte, dizemos ao Javascript que o valor da zona de texto output
contida no formulário nomeado form2 é a da variável testin.
Utiliza-se o caminho completo para chega a propriedade valor do objecto
desejado, seja em Javascript document.form2.output.value.
Formulários (continuação)
Os botões radio
Os botões radio são utilizados para escolher uma
escolha, e só uma, entre um conjunto.
PROPRIEDADES
DESCRIÇÃO
name
indica o nome do controlador. Todos os botões tem
o mesmo nome.
index
o index ou o conjunto de botões radio começando
por 0.
checked
indica o estado em curso do elemento radio
defaultchecked
indica o estado do botão seleccionado por defeito.
value
indica o valor do elemento radio.
Exemplo :
<HTML>
<HEAD> <SCRIPT language="javascript">
function escolhaprop(form3) {
if (form3.escolha[0].checked) { alert("Escolheste a proposição "
+ form3.escolha[0].value) };
if (form3.escolha[1].checked) { alert("Escolheste a proposição "
+ form3.escolha[1].value) };
if (form3.escolha[2].checked) { alert("Escolheste a proposição "
+ form3.escolha[2].value) };
}
</SCRIPT>
</HEAD>
<BODY>
Escolha :
<FORM NAME="form3">
<INPUT TYPE="radio" NAME="escolha"
VALUE="1">Escolha número 1<BR>
<INPUT TYPE="radio" NAME="escolha"
VALUE="2">Escolha número 2<BR>
<INPUT TYPE="radio" NAME="escolha"
VALUE="3">Escolha número 3<BR>
<INPUT TYPE="button"NAME="but" VALUE="Qual é
vossa escolha ?" onClick="escolhaprop(form3)">
</FORM>
</BODY>
</HTML> Clica na tua escolha :
No formulário nomeado form3, declara-se 3 botões
radio. De notar que utiliza-se o mesmo nome para os três botões. De seguida
temos um botão que invoca a função escolhaprop().
Esta função teste qual o botão radio é checkado.
Acede-se aos botões sob a forma de índice em relação ao nome dos botões
radio que seja escolha[0], escolha[1], escolha[2].
Teste-se a propriedade cheked do botão por if(form3.escolha[x].checked).
Depois de escolheres e carregar no botão "Qual a vossa escolha",
uma caixa de aviso aparece com a indicação do botão checkado. Esta mensagem
toma o valor ligado a cada botão pelo caminho form3.escolha[x].value.
Checkbox
Os botões checkbox são úteis para escolher uma ou
várias opções (relembro que os botões radio são utilizados para escolher só
uma opção). Sua sintaxe e seu uso é bastante semelhante aos botões radio,
excepto em relação ao atributo name.
PROPRIEDADES
DESCRIÇÃO
name
indica o nome do controlador. Todos os botões tem
o mesmo nome.
checked
indica o estado em curso do elemento radio
defaultchecked
indica o estado do botão seleccionado por defeito.
value
indica o valor do elemento radio.
Check as vossas escolhas :
escolha os números 1,2 e 4 para obter uma boa resposta.
<HTML>
<HEAD> <script language="javascript">
function resposta(form4) {
if ( (form4.check1.checked) == true && (form4.check2.checked) ==
true && (form4.check3.checked) == false &&
(form4.check4.checked) == true)
{ alert("É a boa respostas! ")
}
else
{alert("Errado! continua a tentar.")} }
</SCRIPT>
</HEAD>
<BODY>
Check
as vossas escolhas:
<FORM NAME="form4">
<INPUT TYPE="CHECKBOX" NAME="check1"
VALUE="1">Escolha número 1<BR>
<INPUT TYPE="CHECKBOX" NAME="check2"
VALUE="2">Escolha número 2<BR>
<INPUT TYPE="CHECKBOX" NAME="check3"
VALUE="3">Escolha número 3<BR>
<INPUT TYPE="CHECKBOX" NAME="check4"
VALUE="4">Escolha número 4<BR>
<INPUT TYPE="button"NAME="but"
VALUE="Corrigir"
onClick="resposta(form4)">
</FORM>
</BODY>
</HTML>
No formulário nomeado form4, declara-se 4 checkbox. De
referir que utiliza-se um nome diferente para as quatro checkbox. De
seguida temos um botão que irá invocar a função resposta().
Esta função teste quais botões que foram checkados. Para obter uma boa
resposta, tem de se checkar o 1,2 e 4. Acede-se aos botões utilizando de
cada vez os seus nomes. Teste-se a propriedade checked do botão por
(form4.nome_da_botão.checked). Ao carregar no botão
"Corrigir", no caso de positiva, uma caixa de aviso aparece que
indica que está certo, em caso de negativo a caixa de aviso convida a
tentar de novo.
Lista de selecção
OS botões da checkbox são utilizados para escolher uma
ou várias opções. Sua syntax e seu uso é semelhante aos do botão radio
excepto em relação ao atributo name.
PROPRIEDADES
DESCRIÇÃO
name
indica o nome da lista.
length
indica o número de elementos da lista.
selectedIndex
indica o lugar a partir do 0 do elemento da lista
que foi seleccionado pelo utilizador.
defaultselected
indica o elemento da lista seleccionado por
defeito.è aquele que aparece então na lista em primeiro.
No formulário nomeado form5, declara-se uma
liste de selecção pelos tags <SELECT></SELECT>.
Entre estes dois tags,declara-se os diferentes elementos da lista pelo tag <OPTION>. Depois temos um botão
que invoca a função lista().
Este função teste qual a opção foi seleccionada. o caminho completo do
elemento seleccionadoé form5.nome_da_lista.selectedIndex. Como o index
comece em 0, acrescenta-se 1 par encontrar a linha elemento.
Formulários
(continuação)
O controlador textarea
O objecto textarea é uma zona
de texto de várias linhas.
A sintaxe Html é :
<FORM> <TEXTAREA NAME="nome" ROWS=x
COLS=y>
texto por defeito
</TEXTAREA> </FORM>
onde ROWS=x representa
o número de linhas e COLS=y representa o número de colunas.
O objecto textarea possua
várias propriedades :
PROPRIEDADES
DESCRIÇÃO
name
indica o nome do controlador pelo qual pode-se
aceder.
defaultvalue
indica o valor por defeito que será afixado na
zona do texto.
value
indica o valor a decorrer na zona de texto. Seja
ela escrito pelo utilizador ou se este não escreveu nada, o valor por
defeito.
A estas propriedades, deve-se acrescentar o onFocus(),
onBlur(), onSelect() e onChange().
Em Javascript, utiliza-se \r\n
para quebra de linha.
Como por exemplo na expressão document.Form.Text.value =
'Check\r\nthis\r\nout'.
O controlador Reset
O controlador Reset permita de anular as
modificações efectuadas aos controladores de um formulário e de restaurar
os valores por defeito.
A sintaxe Html é:
<INPUT
TYPE="reset" NAME="nome" VALUE="texto">
Onde VALUE dá o texto do botão.
Um único método associado ao controlador Reset,
é o método onClick(). O que pode servir, por exemplo, par afixar um
outro valor do que a por defeito.
O controlador Submit
O controlador tem a tarefa específica de transmitir
todas as informações contidas no formulário ao URL designado no atributo ACTION
do tag <FORM>.
A sintaxe Html é:
<INPUT TYPE="submit"
NAME="nome" VALUE="texto"> Onde VALUE dá o texto do botão.
Um único método associado ao controlador Submit,
é o método onClick().
O controlador Hidden (escondido)
O controlador Hidden permite entrar no script
dos elementos (geralmente dados) que não aparecem no écran. Estes elementos
estão escondidos. Daí seu nome.
A sintaxe Html é:
<INPUT TYPE="hidden"
NAME="nome" VALUE="os dados escondidos ">
Envio de um formulário por E-mail
Javascript, não permite
escrever num ficheiros. Depois, o controlador Submit é sobretudo
destinado aos CGI. A solução é o envio do formulário via correio
electrónico.
E recebemos no e-mail, algo assim:
nome=Sérgio+Brandão&mensagem=olá!+Bem+vindo+ao+Truques+e+Dicas.
Onde encontramos os campos nome= e mensagem= separados pelo
símbolo &, os espaços são substituídos por + , e 17%OD%OA
corresponde a uma quebra de linha.
Um pouco de tudo
Caixas de Diálogo ou de Mensagem
Javascript coloca a vossa dispozição 3 caixas de
mensagens
·alert()
·prompt()
·confirm()
São as três métodos do objecto window.
O método alert()
O método alert() já deve ser-te familiar, visto
que já o utilizamos frequentemente ao longo do tutorial.
O método alert() afixa uma caixa de diálogo na
qual é reproduzido o valor (variável e/ou cadeia de caracteres) do
argumento que lhe foi fornecido. Esta caixa bloque o programa até que o
utilizador não terá clicado em "OK".
Sua sintaxe é:
alert(variável);
alert("cadeia de caracteres");
alert(variável + "cadeia de caracteres");
Para escrever em várias linhas, deves usar: \n.
O método prompt()
No mesmo estilo do que o
método alert(), Javascript dispõe de uma outra caixa de diálogo, no caso
presente é chamada caixa de convite, que é composto por um campo que contém
uma entrada a completar pelo utilizador. Esta entrada contém um valor por
defeito.
A sintaxe é:
prompt("texto da caixa
de convite","valor por defeito");
Ao clicar no OK, o método reenvia o valor escrito pelo
utilizador ou a resposta proposta por defeito. Se utilizador clica em
Cancel, o valor nulo é então reenviado.
Prompt() é porvez utilizado para incrementar dados fornecidos pelo
utilizador.
O método confirm()
Este método afixa 2 botões o "OK" e
"Cancel". Ao clicar no OK, confirm() reenvia o valor true e
obviamente false caso clicar em Cancel. Esta método é utilizado sobretudo
para confirmar uma opção.
A sintaxe deste exemplo :
confirm("Deseja
continuar ?")
Temporizador
Javascript dispõe de um
temporizador (ou mais presizamente uma contagem decresente) que permita
invocar uma função após um derterminado tempo.A sintaxe do temporizador é :
nome_do_contador
= setTimeout("função_invocada()", tempo em milisegundos)
Assim,
setTimeout("arrancar()",5000) vai chamar a função arrancar() após
5 segundos.Para parar o temporizador antes do fim da contagem, temos :
clearTimeout(nome_do_contador)
Tomamos o seguinte exemplo (de pouca utilidade mas
didátoco):Ao clicar em "Iniciar", activa-se o temporizador, que
após 3 segundos chama uma caixa alerte(). Pode-se parar o processo
prematuramente clicando em "Stop".Le script se présente comme
suit :
<HTML>
<HEAD>
</HEAD>
<BODY> <script language="Javascript">
<!--
function iniciar()
{
cont=setTimeout("alert('Tens os reflexos muito lentos !')", 3000)
}
// -->
</script>
<a href="#" onClick="iniciar()">Iniciar</a>
<a href="#" onClick="clearTimeout(cont)">Stop</a>
</HTML>
Com a instrucção cont=setTimeout("alert('Tens
os reflexos muito lentos !')",3000), inicializa-se um
temporizador, chamado pelo método setTimeout(). Este temporizador
vai invocar a função iniciar() on initialise un compteur, appelé comp par
la méthode setTimeout(). Ce compteur va déclencher la fonction start() após
2000 milisegundos seja 2 segundos. Com clearTimeout(cont), pode-se
parar o temporizador antes dele acabar a contagem e invocar a função.
O uso de This
Para designar o objecto, Javascript a tua disposição a
palavra chave this. Esta palavra é frequentemente utilizada (sem
risco de confusão) substituindo o caminho completo do objecto num
formulário.
Aqui tem um exemplo:
Seja o formulário :
<FORM NAME="form3">
<INPUT TYPE="radio" NAME="escolha"
VALUE="1">escolha número 1<BR>
<INPUT TYPE="radio" NAME="escolha"
VALUE="2">escolha número 2<BR>
<INPUT TYPE="radio" NAME="escolha"
VALUE="3">escolha número 3<BR>
<INPUT TYPE="button"NAME="botão" VALUE="Qual é
a tua escolha ?" onClick="escolhaprop(form3)">
</FORM>
Em vez de usar escolhaprop(form3), pode-se
utilisar escolhaprop(this.form) e evitar assim toda confusão com os
outros nomes dos formulários. Neste exemplo, this.form refera-se ao
formulário form3 completo. Enquanto que, escolhaprop(this) iria
referir-se só ao elemento tipo botão do form3.
Para ser completo, this é utilizado também para criar
uma ou várias propriedades de um objecto. Assim, para criar um objecto
livro com as propriedades autor, editor e preço esta operação pode ser
efectuada com a ajuda de uma função :
function livro(autor, editor, preço) {
this.auteur = autor;
this.editeur = editor;
this. prix = preço;
}
As mensagens de
erros
Pode-se dizer que as ferramentas do debug oferecidas pelo Javascript
seja das mais elevadas.
Pode,os estar orgulhoso da precisão dada pelo interpretador. O famoso "Javascript Error line x".
Os tipos de erro
Existem 3 grandes categorias de erros na utilização de
um programa Javascript :
·os erros no carregamento.
·os erros na execução.
·os erros de lógico.
Os erros no carregamento
No carregamento do script pelo browser, Javascript
passa em revista os diferentes erros que podem o impedir o funcionamento
deste.
Os erros no carregamento, são frequentes devido a erros de tecla e/ou erros
de sintaxe.
Para ajudar a determinar o erro, Javascript afixa caixa de mensagem de
erro, que indica o erro e o texto com erro. É de notar que nem sempre o
erro indicado pelo Javascript não é o erro verdadeiro, é sim o local onde o
erro ocorre, o erro pode estar bem antes.
Dos exemplos clássicos de erros no carregamento são os parênteses, chavetas
e aspas não fechadas, etc.
Os erros na execução
Aqui o script carrega sem problema, mas a caixa de erro
aparecem quando o script é invocado. Enquanto que os erros no carregamento
aparecem devido a enganos na sintaxe, os erros na execução aparecem devido
ao mau uso dos comandos e de objectos Javascript.
Um exemplo de erros na execução é a invocação de uma variável ou uma função
inexistente (isto acontece quando nos enganamos no nome da variável ou da
função).
Os erros lógicos
Este são os mais viciados porque o "debugge"
do Javascript não indica nenhum erro e o script funciona correctamente, Só
que o resultado esperado não é o esperado.
A única solução é rever a construção lógica do script.
Numerosos erros lógicos são devido aos valores de
variáveis incorrecto.
Alguns concelhos :
·No caso em que o utilizador deve inserir um
valor, esta deve estar no bom formato. Pode-se criar um pequeno script que
verifica o formato de entrada.
·Pode-se inserir ponto de controlo de valor
de variável ou de passagem com a instrução alert(variável) ou
alert("Ponto de passagem1").
Os grande clássicos de erros
Pode-se afixar uma lista de erros que todos os
iniciados fazem ou irão fazer fazer mais tarde.
·Deves ser vigilante ao nome das variáveis
(case sensitive). Assim Variável e variável são duas variáveis distintas.
·O nome da função tem de ter a mesma
ortografia na declaração e na invocação. O nome das funções tem de ser
único no script
·Não esquecer as aspas ou as apóstrofes antes
e depois de caracteres.
·Deve-se inserir vírgulas entre os diferentes
parâmetros ou argumentos.
·Deve colocar as chavetas no sítio certo sem
esquecer de os fechar.
·Assegura-te que os nomes dos objectos
Javascript estão correctos. A armadilha é que os objectos Javascript
comecem por uma maiúscula (Date, Math, Array...) mas as propriedades
comecem por minúscula (alert).
·A confusão entre = operador de cálculo e ==
operador de comparação.
Irá certamente acontecer após uma modificação
(correcção) do vosso script, e que nenhuma mudança seja visível no écran
mesmo após de fazer fazer "Reload" ou "Actualizar".
·Verificar se gravaste bem as tuas
modificações (isto aconteca mesmo aos melhores).
·É necessário porvez recarregar mais
profundamento a tua página, Shift + Reload em Netscape ou clicar na zona de
localisação do browser e fazer Enter.
Meu script não funciona numa tabela
Javascript nas tabelas, não nenhuma história de amor
(bug?). Recomenda-se na literatura de não colocar tags <SCRIPT> nos
tags <TD> mas sim de començar o tag <SCRIPT> antes do tag
<TD> e de escrever o tag <TD> até o tag </TD> usando o
objecto document.write. Assim fica:
Com os métodos e propriedades do objecto navegador (ver
este capítulo). Há maneira de detectar o tipo e a versão do browser. O que
é muito útil para adptar os scripts ao browser e a versão deste.
A compatibilidade das páginas Javascript com os diferentes
tipos e versões em circulação coloca alguns problemas.
<SCRIPT LANGUAGE =
"JavaScript">
<!-- var name = navigator.appName ;
if (name == 'Microsoft Internet Explorer') {
document.write('Atenção! estás a utilizar o Microsoft Explorer 3.0.')
<BR>');
document.write('Com este browser, alguns scripts podem não corer
correctamente');
}
else { null }
//-->
</SCRIPT>
Arredondar os números atrás da vírgula
Pode acontecer que o Javascript afixa uma divisão do
tipo 1.599999999999999. O que não é agradável. Falaremos sobre este assunto
mais aprofundamente no capítulo Math. Entre
os diferentes sistemas possíveis, propõe este:
variable= Math.round (variable*100)/100
Assim, 1.599999 é multiplicado por 100 o que faz 159.9999. O método
Math.round (159.9999) dá 160, que divida por 100 que faz por sua vez 1.60.
Com ...*100)/100, obtemos 2 números depois da vígula.
Vê-se o código do meu Javascript!
Pois é, pelo "View Document Source", o leitor
pode ver , estudar e copiar o código Javascript incluído nas vossas páginas
html. Existe na net vários pequenos programas de codificação de scripts,
que invoca ficheiros dissimulados, etc. Chegou-se a conclusão que nenhum
sistema poderá garantir a 100% a confidencialidade do dos scripts.
Transmitir variáveis de uma página para outra
As variáveis são definidas
no script da entidade que constitua a página Web. Caso deseja-se continuar
a utilizar estas variáveis numa outra página ou em todo o site. Como fazer?
A solução é utilizar frames. O Javascrips permita de passar variáveis de
uma para objectos que pertencem a uma autra frame. E como todos os browsers
Javascript admitem frames, porquê não as utilizares (ver un dos capítulos
seguinte).
Os botões radio reenviem-me a ordem inverso
Este bug é próprio do
Netscape 2, pode causar supresas desagradáveis, por exemplo num formulário
que utiliza botões radio. Caso que o botão radio 1 de uma série de 3 é
checked, é o valor 3 que é reenviado. Imagina, o cliente encomendou uma
camisa larga apesar de ele desejar uma pequena!
Para corrigir este bug, basta acrescentar um getor de eventos vazio em cada
controlo da série do botão radio.
Algumas propriedades e métodos do objecto window não te
são desconhecidas :
- as das caixas de diálogo. Seja alert(), confirm(), e prompt(),
- e as do temporizador. Seja
setTimeout() e clearTimeout().
Uma outra série relacionada com as frames :
- são frames[], length, parent , opener e top.
Uma série em relação a barra de estado :
- são status e defaultStatus.
Uma série parar a abertura e fecho de uma janela :
- são open() e close().
E por fim self que
reenvia a janela aberta.
Utilização da barra de estado
Com o Javascript, a barra de estado pode ser utilizado
para afixar mensagens que desejas. Como eu sou míope como uma toupeira, não
é a minha parte preferida do Javascript mas é uma opinião das mais
subjectivas.
As propriedades utilizadas são:
PROPRIEDADES
DESCRIÇÃO
status
valor do texto afixado na barra de estado da
janela.
defaultStatus
valor por defeito que aparece na barra de estado.
Geralmente, estes evento é
accionado por um omMouseOver() sobre um link.
Exemplo :
<HTML>
<BODY>
<A HREF="#" onmouseOver="self.status='Vosso
texto'; return true;"> Barra de estado</A>
</BODY>
</HTML>
Onde URL é o URL da página que desejamos abrir
na nova janela.
Onde caracteristicas_da_janela é uma lista de
alguma ou de todas as característica da janela seguinte, separadas por
vírgulas e sem espaços nem passagem de linha.
CARACTERÍSTICA
DESCRIÇÃO
toolbar=yes ou no
Visualização da barra de ferramentas
location=yes ou no
Visualização de campo de endereço (ou de
localização)
directories=yes ou no
Visualização dos botões de acesso rápido
status=yes ou no
Visualização da barra de estado
menubar=yes ou no
Visualização da barra de menus
scrollbars=yes ou no
Visualização das barras de desfilamento.
(scrollbars=no funciona mal sob Explorer 3.0)
resizable=yes ou no
Possibilidade de modificar as dimensões da janela
width=x em pixels
Largura da janela em pixeis
height=y em pixels
Altura da janela em pixeis
Pode-se utilizar 1 e 0 em vez de yes
e no.
Nota:
Esta nova janela vai aparecer em qualquer sítio no
vosso écran. Mas pode-se decidir o local exacto onde a janela vai aparecer.
O uso de novas janelas é bastante simples com o
Javascript para afixar informação suplementar sem sobrecarregar a página
inicial.
Abertura com um botão (usando onClick)
Vamos abrir uma pequena janela que irá afixar o
ficheiro test.htm com um botão na página.
Ficheiro test.htm :
<HTML>
<BODY>
<H1>Isto é um teste</H1> <FORM>
<INPUT TYPE="button" value= " Continuar " onClick="self.close()">
</FORM> </BODY>
</HTML>
onde self.close() fecha a janela corrente, isto é, a nova
janela.
Na página inicial:
<FORM>
<INPUT TYPE ="button" value="Abrir une nova fenêtre"
onClick="open('test.htm', 'new',
'width=300,height=150,toolbar=no,location=no,
directories=no,status=no,menubar=no,scrollbars=no,resizable=no')"> (sem espaços nem passagem de linha) </FORM>
xxxxx
Abertura com um botão (chamando uma função)
Na página inicial:
<SCRIPT
LANGUAGE="javascript">
<!--
function new_window() { xyz="open('test.htm', 'new',
'width=300,height=150,toolbar=no,location=no,
directories=no,status=no,menubar=no,scrollbars=no,resizable=no')" // sem
espaços nem passagem de linha }
// -->
</SCRIPT>
<FORM>
<INPUT TYPE ="button" value="Abrir uma nova janela" onClick="new_window()">
</FORM>
Objecto Window
(continuação)
Fecho da janela após alguns segundos
Com este script, sem intervenção do utilizador, a nova
janela se fecha automaticamente após 4 segundos. Ao clicar no botão, o
utilizador interrompe a contagem decrescente que ia fechar a janela e terá
de a fechar ele mesmo. Com este sistema, temos a certeza que a nova janela
será fechada.
<HTML>
<BODY onLoad='compt=setTimeout("self.close();",4000)'>
<H1>Isto é um teste</H1>
<FORM>
<INPUT TYPE="button" value=" Continuar " onClick="clearTimeout(compt);self.close();">
</FORM>
</BODY>
</HTML>
Na página inicial :
<FORM>
<INPUT TYPE ="button" value="Abrir uma nova janela" onClick="open('testc.htm','new','width=300,height=150,toolbar=no,
location=no,directories=no,
status=no,menubar=no,scrollbars=no,resizable=no')"> (sem espaços nem passagem de linha) </FORM>
Abertura clicando num link ou numa imagem
Acrescenta-se simplesmente "onClick=open..."
ao tag <A> do link ou da imagem.
Na página incial, temos:
<A HREF="#" onClick="open('test.htm',
'',
'width=300,height=150,toolbar=no,location=no,directories=no,status=no,menubar=
no,scrollbar=no,resizable=no')">link de teste</A> (sem espaços nem passagem de linha)
Acrescenta-se simplesmente
"onMouseOver=open..." ao tag <A> do link ou da imagem.
Na página incial, temos:
<A HREF="#" onMouseOver="open('test.htm',
'',
'width=300,height=150,toolbar=no,location=no,directories=no,status=no,menubar=
no,scrollbar=no,resizable=no')">link de teste</A> (sem espaços nem passagem de linha)
Abertura sobrevoando o link e fecho saíndo do link
aqui utiliza-se onmouseOver e onmouseOut.
De relembrar, que o onmouseOver é do Javascript 1.1 e não funciona então
com o Explorer 3.0.
Na página incial, temos:
<A HREF="#" onMouseOver="open('test.htm',
'',
'width=300,height=150,toolbar=no,location=no,directories=no,status=no,menubar=
no,scrollbar=no,resizable=no')"
onmouseOut="self.close()">link de teste</A>
(sem espaços nem passagem de linha)
<SCRIPT LANGUAGE="javascript">
<!--
function new_window() { xyz="open('test.htm', 'new', 'width=300,height=150,toolbar=no,location=no,
directories=no,status=no,menubar=no,scrollbars=no,resizable=no')" // sem
espaços nem passagem de linha }
// -->
</SCRIPT>
<FORM>
<INPUT TYPE ="button" value="Abrir uma nova janela" onClick="new_window()">
</FORM>
Objecto String
Em geral
Voltemos ao objecto String para nos interessar a
manipulação dos caracteres tão úteis para o aspecto da programação do
Javascript.
INSTRUÇÃO
DESCRIÇÃO
length
É um inteiro que indica o comprimento da cadeia de
caracteres.
charAt()
Método que permita de aceder a um caractere
isolado de uma cadeia.
indexOf()
Método que reenvia a posição de uma cadeia parcial
a partir de uma posição determinada.
(começando do início da cadeia principal seja na posição 0).
lastIndexOf()
Método que reenvia a posição de uma cadeia parcial
a partir de uma posição determinada.
(começando do FIM da cadeia principal seja na posição 1).
substring(x,y)
Método que reenvia uma String parcial situada
entre a posição x e a posição y-1.
toLowerCase()
Transforma todas as letras em minúsculas.
toUpperCase()
Transforma todas as letras em Maiúsculas.
A propriedade length
A propriedade length devolva
um inteiro que indica o número de elementos numa cadeia de caracteres. Se a
cadeia está vazia (" "), o número é zero.
A sintaxe é simples :
x=variable.length;
x=("cadeia de caracteres").length;
A propriedade length só serve
para as Strings, mas também para conhecer o comprimento e número de
elementos :
·de formulários.
Quantos formulários diferentes existem?
·de botões radio.
Quantos botões radio existem num grupo?
·de checkbox. Quantas checkbox existem num
grupo?
·de opções. Quantas opções existem num
Select?
·de frames. Quantas frames existem?
·de âncoras, de links, etc.
O método charAt()
Temos para já de notar os caracteres são contados da
esquerda para a direita e que a posição do primeiro caractere é 0. A posição do último
caractere é então o comprimento (length) da cadeia de caractere menos 1;
Se a posição que se indica é inferior à zero ou maior
que o comprimentos menos 1, Javascript devolva uma cadeia vazia.
A sintaxe de charAt() é:
cadeia_reposta =
cadeia_partida.charAt(x);
Onde x é um inteiro compreendido entre 0 e o
comprimento da cadeia a analisar menos 1.
Notar os seguintes exemplos:
var
str="Javascript";
var chr=str.charAt(0);
var chr="Javascript".charAt(0);
ou var chr=charAt(str,0);
ou var chr=charAt("Javascript",0);
A resposta é "J".
var
str="Javascript";
var chr=str.charAt(9);
var chr=charAt(str,9);
A resposta é "t".
var
str="Javascript";
var chr=charAt(str,13);
A resposta é ""
seja vazia.
O método indexOf
Este método reenvia à posição, seja x, de uma String
parcial (letra única, grupo de letras ou palavra) numa cadeia de caracteres
começando na posição indicado por y. Isto permita, por exemplo, de ver se
uma letra, um grupo de letras ou uma palavra existe numa frase.
Onde y é a posição à partir da qual a pesquisa
(da esquerda para a direita) deve começar. Este pode ser qualquer inteiro
compreendido entre 0 e o comprimento -1 da cadeia à analisar.
Se a posição não é especificada, a pesquisa começa por defeito da posição
0.
Se a string parcial não é encontrada na cadeia de
caracteres analisada, o valor devolvido será igual a -1. exemples :
Este método é muito parecido com o indexOf() só que a
pesquisa é feita da direita para a esquerda (começa pelo fim).
A sintaxe é idêntica só que o y representa uma
posição em relação ao fim da cadeia de caracteres.
x=variavel.lastIndexOf(var,y);
Os seguintes exemplos mostrem a diferença entre
index0f() e lastIndexOf() :
variável="Javascript"
var="a"
x=variavel.indexOf(var,0); aqui x vale 1 ou seja a posição do
primeiro a.
x=variavel.lastIndexOf(var,9); ici x vale 3 ou seja a posição do
segundo a.
De notar que mesmo quando começa-se a ler a partir do
fim da cadeia, a posição devolvida é contada desde o início da cadeia
começando por zero.
O método substring()
O método substring() é do tipo indexOf(),
lastIndexOf() e charAt() que acabamos de estudar. Este método será
particularmente útil, por exemplo, para tomar diferentes dados numa longa
cadeia de caracteres.
variavel = "cadeia de
caracteres"
resultado=variavel.substring(x,y)
Os x e y são inteiros compreendidos entre
0 e o comprimento menos 1 da cadeia de caracteres.
Se x é inferior ao y, o valor devolvido começa na posição x
e acaba na posição Y-1.
Se x é superior ao y, o valor devolvido começa na posição y
e acaba na posição X-1.
Isso, dá o mesmo resultado e é equivalente escrever por exemplo
substring(3,6) ou substring(6,3).
Se x é igual ao y, substring() devolva
uma cadeia vazia (lógico, não?)
A utilidade destes 2 métodos
não salta a vista. Mas é importante, visto que o Javascript é case
sensitive. Assim uma pesquisa sobre Euro irá dar o mesmo resultado do
que EURo.
Pode-se assim aconselhar de
converter as bases de dado em minúsculas (ou toda em maiúscula).
Objecto Math
Para manipular os numeros, aqui está o objecto Math.
O método abs()
x=Math.abs(y);
O método abs() reenvia o valor absoluto (valor
positivo) de y. Isto é, este método elemina o símbolo negativo de um
número.
y
= 4;
x = math.abs(y);
x = Math.abs(4);
x = math.abs(-4);
o resultado será sempre
x = 4
O método ceil()
x=Math.ceil(y);
O méthode ceil() reenvia o inteiro superior ou
igual ao y.
Atenção ! Este método não arredonda o número.
Como pode-se ver neste exemplo, se y = 1.01, o valor de x será 2.
y=1.01;
x=Math.ceil(y);
o resultado é
x=2.
O método floor()
x=Math.floor(y);
O método floor() reenvia o inteiro inferior ou
igual ao y.
Atenção! este método não arredonda o número.
Como pode-se ver no exemplo, se y = 1.99, o valor de x será 1.
y=1.999;
x=Math.floor(y);
o resultado será
x=1.
O método round(y)
x=Math.round(y);
O método round() arredonda o número ao inteiro
mais próximo.
y=20.355;
x=Math.round(y);
o resultado será
x=20;
Atenção! Alguns cálculos reclamam uma maior precisão.
Para ter duas decimais após a vírgula, utiliza-se a seguinte formula:
x=(Math.round(y*100))/100;
e o resultado será neste caso
x=20.36;
O método max()
x=Math.max(y,z);
O método max(y,z) reenvia o maior de 2 números y
e z.
y=20;
z=10;
x=Math.max(y,z);
o resultado
será
x=20;
O método min()
x=Math.min(y,z);
O
método min(y,z) reenvia o menor de 2 números y e z.
y=20;
z=10;
x=Math.min(y,z);
o resultado
será
x=10;
Objecto Math (continuação)
O método pow()
x=Math.pow(y,z);
O método pow() calculo o valor de um número y
elevado a z.
y=2; z=8
x=Math.pow(y,z);
o resultado será
x=28ou seja x=256
O método random()
x=Math.random();
O método random() reenvia o valor de um número
aleatório escolhido entre 0 e 1. Atenção! Este método só funciona em Unix. Por isso pode-se utilizar a seguinte função que reenvia um número
"aleatório" entre 0 e 9. function srand(){
t=new Date(); r=t.getTime();
p="a"+r; p=p.charAt((p.length-4)); x=p; }
O método sqrt()
x=Math.sqrt(y);
O método sqrt() reenvia a raiz quadrada de y.
y=25;
x=Math.sqrt(y);
o resultado
será
x=5;
O método parseInt()
x=parseInt(variável);
Devolva a parte inteira de um número com vírgula.
str='1.2345';
x=parseInt(str);
o resultado será
x=1;
O método eval()
x=eval(variável);
esta função avalia uma cadeia de caracteres sob a forma
de valor numérico. Pode-se inserir na cadeia operações numéricas, operações
de comparação, instruções e mesmo funções.
str='5 + 10';
x=eval(str);
o resultado será
x=15;
diz-se na literatura que esta função eval() é
uma operação majora do Javascript. Que seu uso não aconselhado para
iniciados. Pior, que esta função eval() não é suportada por todas as
plataformas, com todos as versões dos browsers. Verificar sempre o
resultado devolvido pelo eval().
As funções trigonométricas
Aqui (sem comentários) as diferentes funções
trigonométricas:
Este método reenvia todas as informações "data e
hora" do computador do utilizador.
variavel=new Date(); (as variáveis não levem acentos, por
isso "variavel" e não "variável")
Estas informações são gravadas pelo Javascript sob o
formato :
"Fri Feb 17 09:23:30 2001"
Atenção! a data e a hora no
Javascript começa em 1º Janeiro 1970. Toda referência a uma data anterior
irá dar um resultado aleatório.
O método new date() sem argumentos reenvia a
data e a hora corrente.
Para introduzir uma data e uma hora determinada, será da seguinte maneira:
variavel=new date("Jan 1, 2000 00:00:00");
Devolve o mês na variável_date sob a forma de um
inteiro compreendido entre 0 e 11 (0 para janeiro, 1 para fevereiro, 2 para
março, etc.). Ou seja 11 (o mês menos 1). Por isso para obter o mês certo
pode-se fazer como este exemplo seguinte:
<SCRIPT LANGUAGE="Javascript">
<!--
variavel_data=new date();
mes=variavel_data.getMonth();
document.write("Estamos no "+(mes+1)+"º
mês do ano.");
//-->
</SCRIPT>
Devolva o dia do mês na variavel_data sob a forma de um
inteiro compreendido entre 1 e 31.
Pois é, aqui começa-se em 1 em vês de 0 (porquê???).
Não confundir com getDay() que Devolva o dia da semana.
Para quem quer que a hora altera-se todos os segundos.
Recorda-se do temporizador seTimeOut [Um
pouco de tudo...]. Basta acrescentar ao script um seTimeOut que insere
a hora todos os segundos. A função que afixa a hora é getDt(), a instrução
à acrescentaré seTimeOut("getDt()",1000); E o resultado é:
Devolva a hora corrente na
variavel_data sob a forma de um inteiro representando o número de
milisegundos que passaram desde 1 Janeiro 1970 00:00:00.
getimezoneOffse()
Devolva a diferença entre a
hora local e a hora GMT (Greenwich, UK Mean
Time) sob a forma de um inteiro representando o número de minutos (e
não em horas).
seMonth(x)
Devolva um mês ao actual
valor da variavel_data sob a forma de um inteiro compreendido entre 0 e 11.
Exemplo : variavel_data.seMonth(1);
seDate(x)
Devolva um dia do mês ao
actual valor da variavel_data sob a forma de um inteiro compreendido entre
1 e 31.
Exemplo : variavel_data.seDate(1);
seHours(x)
Devolva uma hora ao actual
valor da variavel_data sob a forma de um inteiro compreendido entre 1 e 23.
Exemplo : variavel_data.seHours(1);
seMinutes(x)
Devolva os minutos ao actual
valor de variavel_data sob a forma de um inteiro compreendido entre 1 e 59.
Exemplo : variavel_data.seMinutes(1);
seSeconds(x)
Devolva os segungos ao
actual valor de variavel_data sob a forma de um inteiro compreendido entre
1 e 59.
Exemplo : variavel_data.seSeconds(0);
seTime(x)
Devolva a data desejada na
variavel_data sob a forma de um inteiro representando o número de
milisegundos que passaram desde 1 Janeiro 1970 00:00:00.
toGMTString()
Devolva o valor do actual
valor da variavel_data em
hora GMT (Greenwich Mean Time)
Objecto Array
Em geral
O objecto Array é uma lista de elementos
indexados nos quais pode-se guardar (escrever) dados ou as invocar (ler).
Atenção! O objecto Array é do
Javascript 1.1
Array de uma dimensão
Para fazer um array, procede-se a duas etapas:
·primeiro construir a estrutura do array.
Nesta fase, os elementos do array estão vazios.
·depois inserir valores nos elementos
definidos.
Começa-se por definir o array :
nome_do_array =
new Array (x);
Onde x é o
número de elementos do array.
De notar que, o número de elementos é limitado a 255.
Depois, depois
alimenta-se a estrutura definida :
nome_do_array [i]
= "elementos";
onde i é um
número compreendido entre 0 e x menos 1.
Exemplo: um caderno
de endereço com 3 pessoas
construção do array
: caderno = new Array(3);
inserir dados: caderno[0]="Sérgio";
caderno[1]="Paulo";
caderno[2]="Angelo";
para aceder a um elemento, emprega-se: document.write(caderno[2]);
Nota-se também que os dados são bem visíveis
ao leitor (view source).
Nota:
·Muitas vezes é prático carregar o array com
um ciclo. Admitindo que temos que carregar 50 imagens. Ou as carregamos
manualmente (0.gif, 1.gif, 2.gif...), ou utiliza-se um ciclo do estilo:
function gifs() {
gif = new Array(50);
for (var=i;i<50;i++)
{gif[i] =i+".gif";}
}
Propriedades e Métodos
ELEMENTOS
DESCRIÇÃO
length
Devolva o número de elementos do array.
join()
Junta todas os elementos do array numa única cadeia.
Os diferentes elementos são separados por um caractere separador
especificado no argumento. Por defeito, este separador é uma vírgula.
reverse()
Inversa a ordem dos elementos.
sort()
Devolva os elementos por ordem alfabético.
Usando os exemplo do quadro,
document.write(carnet.join()); dá como resultado
: Sérgio,Paulo,Ângelo. document.write(carnet.join("-")); dá como resultado :
Sérgio-Paulo-Ângelo. document.write(carnet.reverse().join("-")); dá como
resultado : Ângelo-Paulo-Sérgio
Array de duas dimensões
Pode-se criar arrays de duas dimensões (e mais ainda).
Primeiro declara-se array de 1 dimenão da maneira
clássica :
nome_do_array = new Array
(x);
Depois, declara-se cada
elemento do array como um array de 1 dimension :
nome_do_array[i] = new
Array(y);
Para um array de 3 por 3 :
PREÇOS
T. SMALL
T. MEDIUM
T. LARGE
CAMISAS
1200
1250
1300
POLOS
800
850
900
T-SHIRT
500
520
540
nome = new Array(3);
nome[0] = new Array(3);
nome[1] = new Array(3);
nome[2] = new Array(3);
nome[0][0]="1200"; nome[0][1]="1250";
nome[0][2]="1300";
nome[1][0]="800"; nome[1][1]="850";
nome[1][2]="900";
nome[2][0]="500"; nome[2][1]="520"; nome[2][2]
Para explorar estes dados, aqui tem uma ilustração do
que é possível:
O formulário escreva-se:
<FORM
name="form" >
<SELECT NAME="liste">
<OPTION>Camisas
<OPTION>Polos
<OPTION>T-shirts
</SELECT>
<SELECT NAME="tamanho">
<OPTION>T. Small
<OPTION>T. Medium
<OPTION>T. Large
</SELECT>
<INPUT TYPE="button" VALUE="Obter preço "
onClick="affi(this.form)">
<INPUT TYPE="TEXT" NAME="txt">
</FORM>
Onde a função affi() formula-se assim:
function affi() {
i = document.form.liste.selectedIndex;
j= document.form.taille.selectedIndex
document.form.txt.value=nome[i][j]; }
Objecto Array
(continuação)
Base de Dados
Aqui está um título bastante pesado! Si o Javascript
pode guardar dados e apresentar estas segundos os gostos do cliente, mas
estamos mesmo assim muito longe das ferramentas específicas para este tipo
de trabalho.
As bases de dados em Javascript serão sempre do tipo estático e
sobretudo com uma codificação trabalhosa.
Até agora, definiu-se alguns caracteres nos elementos
dos array. Nas strings, pode-se inserir muitos e sobretudo com as
ferramentas de manipulação das strings do Javascript, pode-se guardar
coisas do tipo:
Sérgio*Brandão*rua da Passagem,444*4440*Valongo*Portugal*
Ou seja neste caso, 6 dados.
Codificação tipo fixo
Retomando o exmplo do carderno de endereço. De maneira
clássica, deve-se prever os difrrentes campos e o número de posições
consacradas a cada campo. Por exemplo:
Cada campo deve respeitar o número de posições
predeterminados. As posições sobrenumerários devem ser completadas em branco. Com um
risco de erro elevado a codificação e um tempo de carregamento da página
sensivelmente aumentada para finalment transmetir que espaços vazios.
Nome 20 p.
Apelido 10 p.
Endereço 20 p.
Postal 10 p.
Cidade 10 p.
País 10 p.
Sérgio
Brandão
Rua da Passagem,444
4440
Valongo
Portugal
Para retomar os diferentes dados, utiliza-se a
instrução substring(x,y). Assim:
O princípio é de inserir um separador entre cada campo.
E "pede-se" ao Javascript de retirar os caracteres compreendidos
entre dois separadores.
Com o separador *, os dados tornam-se:
str="Sérgio*Brandão*Rua da passagem,444*4440*Valongo*Portugal*"
ou seja 60 posições em vês de 80 tem-se um ganho de 25 %.
Para ler este diferentes dados, proceda-se em varias
etapas:
·Para pos=str.indexOf("*"),
nota-se a posição na string do primeiro separador encontrado.
·Para str.substring(0,pos),
tem-se o primeiro dado compreendido entre o início da string (posição 0) e
a posição menos 1 do separador ou seja Sérgio.
·Para str=str.substring(pos+1,str.length),
recria-se uma string correspondendo à string do iníncio menos o dado
parcial que acabou-se de extrair menos um separador. O que dá: str="Brandão*Rua da passagem,444*4440*Valongo*Portugal*"
·E isto, por um ciclo, até haver separadores
menos 1.
Para guardar os dados, a maneira mais prática
para os guardar é o controlador do formulário Hidden (encondido)em vez da
string.
Pourquê? Bem com as string funciona, mas há o
risco de chegar a limitação do comprimento das strings em Javascript, 50 à
80 caracteres. Por isso usa-se o símbolo + e a concatenação dos dados para
que ele seja aceito pelo compilador Javascript.
O controlador do formulário Hidden não está
sujeito a esta limitação de caracteres. Pode-se guardar 30 K (e mais)
de dados. Basta assim entrar no controlador do formulário Hidden e dar
atributo value="os dados a guardar".
O script completo será algo do tipo:
<HTML>
<BODY>
<FORM name="form">
<INPUT type=hidden name="data" value="Sérgio*Brandão*Rua
da passagem,444*4440*Valongo*Portugal*">
</FORM>
<SCRIPT LANGUAGE="javascript">
str=document.form.data.value; // extriar o string do controlador hidden
nsep=6 // número do separador
for (var i=0;i<nsep;i++){
pos=str.indexOf("*");
document.write(str.substring(0,pos)+ "<BR>");
str=str.substring(pos+1,str.length);
}
</SCRIPT>
</BODY>
</HTML>
Frames
Em geral
Para já, vou apresentar as
frames. Utilisar as frames permita a divisão da janela afixando a página
HTML em várias partes independentes ums dos outros. Pode-se assim caregar
diferentes páginas em cada parte. Para a sintaxe Html das frames, recomendo
o tutorial de HTML - As frames
-
Em Javascript, interessa a
capacidade das frames à interagir. Ou seja a capacidade de trocar
informações entre elas.
A filosofia do Html quer que
cada página que compõe um site seja uma entidade independente.
Neste esquemas a página
principal contem duas frames, em que podemos trocar informações entre as
frames mantendo sempre a mesma página:
<=>
Propriedades
PROPRIEDADES
DESCRIÇÃO
length
Devolva o número de frames subordinadas na página
principal (página que contem todas as frames.
parent
Sinónimo para a página principal.
Troca de informação entre frames
Com o exemplo seguinte, vamos
transferir dados introduzidos pelo utilizador numa frame, para uma outra
frame.
<HTML>
<HEAD>
<SCRIPT LANGUAGE="Javascript">
<!--
function affi(form) { parent.subordinada01.document.form1.en.value=document.form2.out.value }
// -->
</SCRIPT>
</HEAD>
<BODY>
Escreve um valor e clica em "Enviar".
<FORM NAME="form2" >
<INPUT TYPE="TEXT" NAME="out">
<INPUT TYPE="button" VALUE="Enviar"
onClick="affi(this.form)">
</FORM>
</BODY>
</HTML>
Os dados introduzido pelo
utilizador encontra-se pelo caminho document.form2.out.value.
Transfere-se estes dados na zona de texto da outra frame. Para isso, temos
de especificar o caminho completo. Primeiro a zona de texto encontra-se na
frame subordinada chamada subordinada01. Então o caminho começa por parent.subordinada01.
Nesta frame encontra-se um documento que contém um formulário (form1) que
contém por sua vez uma zona de texto (en), que tem como propriedade value.
o que faz, que o caminho seja document.form1.en.value. E a expressão
completa será: