Tuto Javascript

T r u q u e s e D i c a s - Tutorial de Javascript
URL original:
http://www.truquesedicas.com/tutoriais/javascript/index.htm
TUTORIAL DE JAVASCRIPT
Indice
O que o Javascript?
Uma breve noo sobre o Javascript desde da sua origem at a sua funcionalidade.
Javascript no Java!
importante saber que o Javascript completamente diferente do Java.
Um pouco de teoria objecto
Uma simples explicao ilustrada sobre os objecto do javascript.
Ferramentas para o Javascript
O pouco que necessrio para trabalhar com o Javascript
O Javascript simples
O comeo com esta linguagem.
Inserir texto
Todas os mtodos de inserir texto em Javascript
Variveis
As variveis contm dados que podem ser modificados durante a execuo de um programa...
Operadores
Vejamos os diferentes operadores que esto a nossa disposio no Javascript.
Funes
Uma funo um grupo de linha(s) de cdigo de programao...
Eventos
Com os eventos e sobretudo sua gesto, abordamos o lado "mgico" do Javascript
Condies
Num momento ou outro da programao, teremos necessidade de testar uma condio.
Formulrios
Com o Javascript, os formulrios Html tomem outra dimenso.
Um pouco de tudo
Alguns mtodos e funes mais usados.
As mensagens de erros
Existem 3 grandes categorias de erros na utilizao de um programa Javascript.
Mini FAQ
Respostas para as dvidas mais frequentas
Objecto Window
Tudo sobre o objecto Window.
Objecto String
Tudo sobre o objecto String.
Objecto Math
Tudo sobre o objecto Math.
Objecto Date
Tudo sobre o objecto Date.
Objecto Array
Tudo sobre o objecto Array.
Frames
Em Javascript, interessa a capacidade das frames interagir. Ou seja a capacidade de trocar
informaes entre elas.
2001-2003 Truques e Dicas - Produo:
1
O que o Javascript?
O Javascript uma linguagem de script que incorporado nos tag's Html, permite
incrementar a apresentao e interactividade das pginas Web.
Javascript ento uma extenso do cdigo Html das pginas Web. Os scripts, que se inserem nos tag's Html,
podem ser comparados aos macros de uma formatao de texto.
Estes scripts vo ser gerados e executados pelo prprio browser sem fazer apelo aos recursos de um servidor.
Estas instrues sero assim executadas directamente e sobretudo sem atrasos.
Javascript foi desenvolvido inicialmente pela Netscape e na altura intitulava-se LiveScript. Adoptado no fim do ano
de 1995, pela firma Sun (que tambm desenvolveu o Java), ele tomou assim o seu nome actual Javascript.
Javascript no prprio do browser Netscape. Microsoft tambm adoptou o Javascript desde do seu Internet
Explorer 3. E melhorou significativamente no Explorer 4.
As verses do Javascript sucederam-se com as diferentes verses do Netscape: Javascript para Netscape 2,
Javascript 1.1 para Netscape 3 e Javascript 1.2 para Netscape 4. Apesar de existir alguns problemas de
compatibilidade, segundo o browser utilizado nas pgina que contm codificao Javascript.
O futuro do Javascript est entre as mos dos dois grandes browsers da Web e em parte ligada a guerra entre a
Microsoft e a Netscape. Podemos mesmo assim prever um futuro promissor a esta linguagem sobretudo pela sua
independncia em relao ao servidor.
Javascript no Java!
importante saber que o Javascript completamente diferente do Java. Mesmo que os

dois sejam utilizados para criar pginas Web evoludas. Mesmo que os dois usam o
mesmo termo Java (caf em americano), temos a duas ferramentas informticas bem
diferentes.
JAVASCRIPT JAVA
Cdigo integrado na pgina Html Modulo (applet) distinto da pgina Html
Cdigo interpretado pelo browser no O cdigo compilado antes da sua

momento da execuo execuo
Cdigos de programao simples mas Linguagem de programao muito
para aplicaes limitadas mais complexa mas mais poderosa
Permite de aceder aos objectos do No tem acesso aos objectos do
browser browser
Confidencialidade do cdigo nulo Segurana (Cdigo compilado)
(Cdigo visvel)
Javascript mais simples realizar visto que o cdigo que se insere directamente nas pginas Html com por
exemplo um simples editor de texto como o Notepad. O Java necessita de uma compilao prvia do cdigo.
O campo de aplicao do Javascript um tanto limitado enquanto que com o Java pode-se fazer tudo em
princpio.
Como o cdigo Javascript includo nas pginas Html, este visvel e pode ser copiado por todos. Pelo contrrio
o Java, o cdigo compilado o que o torna indecifrvel.
Os cdigos de Javascript no atrasem o carregamento da pgina enquanto que um applet Java pode demorar
minutos a carregar.
2
Um pouco de teoria objecto...
Os objectos e as suas hierarquias
Para bons internautas, vem neste cran uma pgina Web.

Javascript vai dividir esta pgina em objectos e vai permitir aceder e manipular este objectos sem
retirar informaes.
Vejamos em primeiro uma ilustrao dos diferentes objectos que uma pgina pode conter.
Carregou-se a pgina seguinte:
Esta pgina aparece numa janela. o objecto janela.
Nesta janela, h um documento Html, o objecto documento. Quer isto dizer (e aqui que
vemos aparecer a noo de hierarquia dos objectos Javascript), o objecto janela contm o objecto
documento.
3
Um pouco de teoria objecto... (continuao)
Neste documento, temos um formulrio. o objecto formulrio. Dito de outra maneira, o objecto
janela contm um objecto documento que contm por sua vez um objecto formulrio.
Neste documento encontramos 3 objectos. Os botes radio, um boto clssico e uma zona de texto.
Que so respectivamente o objecto radio, o objecto boto, e o objecto texto. Por outras
palavras o objecto janela contm o objecto documento que contm o objecto formulrio que contm
por sua vez os objectos radio, boto, e texto.
A hierarquia deste exemplo ento:
> radio
janela > documento > formulrio > boto
> texto
Para aceder a um objecto, necessrio dar o caminho completo do objecto comeando pelo objecto
mais externo at ao objecto de referncia.
Seja por exemplo para o boto radio "semana": (window).document.form.radio[0].
Insira-se o objecto window entre parentes porque ele ocupa a primeira posio na hierarquia.
E enfim para os puristas, Javascript no propriamente uma linguagem orientada para os objectos
tal o como C++ ou Java. Dizemos antes que Javascript uma linguagem baseada nos objectos.
As propriedades dos objectos
Uma propriedade um atributo, uma caracterstica, uma descrio do objecto. Por exemplo, o
objecto volante de um carro tem como propriedades que ele pode ser de madeira ou em couro. O
objecto livro tem como propriedades seu autor, sua editora, seu ttulo, etc.
4
Ainda os objectos Javascript tem propriedades personalizadas. No caso dos botes radio, uma das
suas propriedades , por exemplo, sua seleco ou sua no-seleco (checked em ingls).
Em Javascript, parar aceder as propriedades, utiliza-se a sintaxe:
nome_do_objecto.nome_da_propriedade
No caso do boto radio "semana", para testar a propriedade de seleco, escreva-se:
document.form.radio[0].checked
Ferramentas para o Javascript
Para aprender e descobrir o Javascript, necessrio:
1. Um browser compatvel com o Javascript.

2. Um bom conhecimento de Html.
3. Um simples editor de texto.
Um browser compatvel com o Javascript
Unicamente a Netscape e a Microsoft dispem de browser Javascript "enabled". Para a Microsoft a

partir do IExplorer 3.0 e a Netscape a partir do Netscape Navigator 2.0.
De toda a maneira deveremos estar atento as verses de Javascript exploradas por este browers.
Netscape 2.0 Javascript (baptizado posteriormente por 1.0)

Netscape 3.0 Javascript 1.1
Netscape 4.0 Javascript 1.2
IExplorer 3.0 Alguma codificao de Javascript 1.0
IExplorer 4.0 Javascript 1.2
Um bom conhecimento de Html
Como o cdigo do Javascript vem juntar-se ao cdigo da linguagem Html, um conhecimento

aprofundado dos tags Html praticamente indispensvel. Assim os utilizadores dos editores Html
"whsiwyg" ou outros "publishers" Html risquem de serem obrigados a voltar aos seus estudos.
Posso apenas recomendar a consulta do "Tutorial de Html"
Um simples editor de texto
Uma pgina Html simplesmente texto. O cdigo Javascript tambm ele que s texto. Nada mais
simples do que editor de texto como o Notepad do Windows para inserir o vosso Javascript na vossa
pgina Html. Cada vez mais editores Html whsiwyg propem uma janela para o Javascript. Ateno
! Se alguns parecem bem feitos como o Dreamweaver e o WebExpert 2 com outros, o cdigo
Javascript introduzido seja alterado pelo editor como FrontPage ou Netscape Gold...
O Javascript simples
O tag <SCRIPT>
Como j foi visto o Javascript insere-se numa pgina Web.
A linguagem Html utiliza os tags para "dizer" ao browser para inserir uma poro de texto em
negrito, em itlico, etc.
Na lgica da linguagem Html, ento necessrio assinalar ao browser atravs de um tag que o
texto que segue script e que Javascript (et no VBScript). o tag:
<SCRIPT LANGUAGE="Javascript">.
5
Tambm necessrio informar o browser do fim do script.

o tag:
</SCRIPT>.
Comentrios
Ser por vez til incluir comentrios pessoais no vosso cdigo Javascript.
mesmo vivamente recomendado como para todas as linguagens de programao. Javascript
utiliza as convenes utilizadas em C e C++ seja:
// comentrio
Tudo o que est escrito entre o // e o fim da linha ser ignorado.
Tambm possvel incluir comentrios em diversas linhas com o cdigo:
/* comentrio em
diversas linhas */
No confundir os comentrios Javascript e os comentrios Html ().
Esconder o script para os antigos browsers
Os browsers que no compreendem o Javascript (e ainda existem) ignoram o tag <script> e vo

inserir o cdigo do script na pgina sem poder o executar. Para evitar o aparecimento pouco
esttico das inscries do cdigo, utiliza-se os tags de comentrio da linguagem Html .
O Javascript ir parecer assim:
<SCRIPT LANGUAGE="javascript">

</SCRIPT>
Onde incluir o cdigo em Javascript ?
O princpio simples. Basta respeitar este dois princpios seguintes :
- em qualquer stio
- mas onde necessrio
O browser trata a pgina Html de cima para baixo.

Por consequncia, todas as instrues s podero ser executadas se o browser possuir neste
preciso momento todos os elementos necessrios para sua execuo. Estes elementos devem ser
declarados antes ou a quando a instruo.
Para assegurar que o programa script carregado na pgina e pronta a funcionar a todas as
intervenes do utilizador, aqui tomaremos por hbito de declarar sistematicamente (sempre que
ser possvel) um mximo de elementos nos tags de cabealho seja entre <HEAD> e </HEAD> e
antes do tag <BODY>. Ser o caso por exemplo para as funes.
Nada proba de inserir vrios scripts na mesma pgina Html.
preciso notar que a utilizao do tag script no sempre obrigatrio. Ser o caso dos eventos
Javascript (por exemplo "onClick") onde se tem simplesmente que inserir o cdigo no interior do
comando Html como um atributo desta. O evento ir chamar a funo Javascript quando o comando
Html ser activado. Pode-se dizer que o Javascript funciona como uma extenso da linguagem Html.
6
Uma primeira instruo Javascript
Sem entrar verdadeiramente com detalhes, vejamos uma primeira instruo Javascript (um mtodo
do objecto window) seja a instruo alert().
alert("vosso texto");
Teste
Esta instruo insere uma mensagem numa caixa de dilogo munido com um boto OK. Para
continuar na pgina o utilizador dever clicar neste boto.
Pode reparar os pontos-e-virgulos no fim de cada instruo Javascript, o Javascript mais flexvel
do que as outras linguagens e geralmente no d mensagem de erro caso que faltam. Podemos
considerar que o ponto-e-virgula opcional e s obrigatrio quando escreve-se vrias instrues
na mesma linha.
O Javascript simples (continuao)
Primeira pgina Html com Javascript
<HTML> Html normal

<HEAD> ...
<TITLE>Meu primeiro Javascript</TITLE> ...
</HEAD> ...
<BODY> ...
Bla-bla em Html ...
<SCRIPT LANGUAGE="Javascript"> Incio do script
 Fim de esconder
</SCRIPT> Fim do script
Continuao bla-bla em Html Html normal
</BODY> ...
</HTML> ...
Notao
Javascript case sensitive. Assim ser necessrio escrever alert() e no Alert(). Para a escrita
das instrues Javascript, utilizaremos o alfabeto ASCII clssico (a 128 caracteres) como em Html.
Os caracteres acentuados como "" ou "" s podem ser utilizados nos textos tipo "vosso texto" do
nosso exemplo.
As aspes " e o apostrofo ' fazem parte da linguagem do Javascript. Pode-se utilizar uma ou outra
forma na condio de no as misturar. Assim alert("...') dar uma mensagem de erro.
Para browser que suportem o Javascript 1.0
Verses da linguagem Javascript
Com as diferentes verses existente (Javascript 1.0, Javascript 1.1 et Javascript 1.2), podemos
imaginar scripts adaptados as diferentes verses mas sobretudo aos diferentes browsers;
<SCRIPT LANGUAGE="Javascript">
// programa para Netscape 2 et Explorer 3
var version="1.0";
</SCRIPT>
<SCRIPT LANGUAGE="Javascript1.1">
7
// programa para Netscape 3 et Explorer 4

var version=1.1;
</SCRIPT>
// programa para Netscape 4
var version=1.2;
</SCRIPT>
Extenso .js para scripts externos
possvel utilizar ficheiros externos para os programas Javascript. Podemos assim guardar os
scripts dentro de ficheiros distintos (com a extenso .js) e as chamar a partir de um ficheiro Html. O
programador pode desta maneira constituir-se uma biblioteca de script e as chamar na maneira dos
#include do C ou C++.
Alert() ...vermelha
Aquela simples janelinha em Javascript que criamos utilizada para chamar ateno do utilizador
para coisas mais importantes. O Javascript pe a vossa disposio a possibilidade de criar novas
janelas com a dimenso desejada que aparecem um pouco como as Popup dos ficheiros de ajuda.
Que iremos estudar mais a frente em o objecto Window.
Alert() um mtodo do objecto Window. Para se conformar notao clssica

nome_do_objecto.nome_da_propriedade, poderamos ter escrito window.alert(). Sendo window
sempre o primeiro objecto Javascript, este por defeito sempre interpretado pelo browser assim
ele torna-se facultativo.
Para que o texto da janela alert() aparece em vrias linhas, ser necessrio utilizar o caractere
especial /n para criar uma nova linha.
Inserir texto
Mtodo do objecto documento
Como j foi explicado anteriormente, o que aparece no cran pode ser dividido em objectos e que o
Javascript d possibilidade de aceder a este objectos (um pouco de teoria do objecto).
A pgina Html que aparece na janela do browser um objecto tipo document.
A cada objecto Javascript, o programador da linguagem previu um conjunto de mtodos ( ou

funes dedicados a este objecto). Para document o Javascript dedicou o mtodo "escrever no
documento" , o mtodo write().
O chamamento do mtodo se faz segundo a notao:
nome_do_objecto.nome_do_mtodo
Para chamar o mtodo write() do documento, escreva-se:
document.write();
O mtodo write()
A sintaxe bastante simples
write("vosso texto");
Pode-se tambm escrever uma varivel, seja a varivel resultado,

write(resultado);
8
Para associar texto (cadeia de caracteres) e variveis, utiliza-se a instruo

write("O resultado " + resultado);
Pode-se utilizar os tags Html para incrementar o texto

write("<B>O resultado </B>" + resultado); ou
write ("<B>" + "O resultado " + "</B>" + resultado)
Exemplo (clssico !)
Agora vamos escrever texto em Html e em Javascript.
<HTML>
<BODY>
<H1>Isto Html</H1>

</SCRIPT>
</BODY>
</HTML>
E o resultado :
Formatao dos carateres em Javascript
varivel.big();
O uso de .big() vai inserir a varivel como se ela estivesse compreendida entre os tags Html
<BIG></BIG>.
As quartro instrues Javascript seguintes so equivalentes :
str="Texto"; (str uma varivel)
document.write("<BIG>"+str+"</BIG>");
document.write('<BIG>Texto</BIG>');
document.write(str.big());
document.write("Texto".big());
varivel.small();
O uso de .small() vai inserir a varivel como se ela estivesse compreendida entre os tags Html
<SMALL></SMALL>.
str="Texto";
document.write("<SMALL>"+str +"</SMALL>");
9
document.write("<SMALL>Texto" +"</SMALL>");
document.write(str.small());
document.write("Texto".small());
varivel.blink();
O uso de .blink() vai inserir a varivel como se ela estivesse compreendida entre os tags Html
<BLINK></BLINK> .
str="Texto";
document.write('<BLINK>'+str+'</BLINK>');
document.write("<BLINK>Texto</BLINK>");
document.write(str.blink());
document.write("Texto".blink());
varivel.bold();
O uso de .bold() vai inserir a varivel como se ela estivesse compreendida entre os tags Html
<B></B>.
str="Texto";
document.write("<B>"+str+"</B>");
document.write("<B>Texto</B>");
document.write(str.bold());
document.write("Texto".bold());
varivel.fixed();
O uso de .fixed() vai inserir a varivel como se ela estivesse compreendida entre os tags Html
<TT></TT>.
str="Texto";
document.write("<TT>"+str+"</TT>");
document.write("<TT>Texto</TT>");
document.write(str.fixed());
document.write("Texto".fixed());
Inserir texto (continuao)
variavel.italics();
O uso de .italics() vai inserir a varivel como se ela estivesse compreendida entre os tags Html
<I></I> .
str="Texto"; (str uma varivel)
document.write("<I>"+str+"</I>");
document.write('<I>Texto</I>');
document.write(str.italics());
document.write("Texto".italics());
variavel.fontcolor(color);
10
O uso de .fontcolor(color) vai inserir a varivel como se ela estivesse compreendida entre os
tags Html <FONT COLOR='color'></FONT> .
str1="Texto";
str2="red"
document.write("<FONT COLOR='red'>"+str1+"</FONT>");
document.write("<FONT COLOR='red'>"+"Texto</FONT>");
document.write(str1.fontcolor(str2));
document.write("Texto".fontcolor("red"));
variavel.fontsize(x);
O uso de .fontsize(x) vai inserir a varivel como se ela estivesse compreendida entre os tags Html
<FONT SIZE="x"></FONT> .
str="Texto";
x=3
document.write('<FONT SIZE=3>'+str+'</FONT>');
document.write("<FONT SIZE=3>"+"Texto</FONT>");
document.write(str.fontsize(x)));
document.write(str.fontsize(3));
variavel.strike();
O uso de.strike() vai inserir a varivel como se ela estivesse compreendida entre os tags Html
<STRIKE></STRIKE>.
str="Texto";
document.write("<STRIKE>"+str+"</STRIKE>");
document.write("<STRIKE>Texto"+"</STRIKE>");
document.write(str.strike());
document.write("Texto".strike());
variavel.sub();
O uso de .sub() vai inserir a varivel como se ela estivesse compreendida entre os tags Html
<SUB></SUB>.
str="Texto";
document.write("<SUB>"+str+"</SUB>");
document.write("<SUB>Texto</SUB>");
document.write(str.sub());
document.write("Texto".sub());
variavel.sup();
O uso de .sup() vai inserir a varivel como se ela estivesse compreendida entre os tags Html
<SUP></SUP>.
str="Texto";
document.write("<SUP>"+str+"</SUP>");
document.write("<SUP>Texto</SUP>");
document.write(str.sup());
document.write("Texto".sup());
11
Instrues de formatao do document
Para j queria lembrar que o que se segue opcional e que se pode utilizar a instruo
document.write() de maneira clssica.
Seja document.write("<BODY BGCOLOR="#FFFFFF");
document.bgColor
Esta instruo permita de especificar a cor do fundo de um objecto document. pode-se utilizar o
nome da cor ou o seu valor RGB.
document.bgColor="white";
document.bgColor="#FFFFFF";
document.fgColor
Esta instruo permita de especificar a cor do primeiro plano (texto) de um objecto document.
pode-se utilizar o nome da cor ou o seu valor RGB.
document.fgColor="black";
document.fgColor="#000000";
document.alinkColor
Esta instruo permita de especificar a cor de um link activo (depois do clique do rato mas antes de
sar do link) de um objecto document. pode-se utilizar o nome da cor ou o seu valor RGB.
document.alinkColor="red";
document.alinkColor="#FF0000";
document.linkColor
Esta instruo permita de especificar a cor de um link de um objecto document. pode-se utilizar o
nome da cor ou o seu valor RGB.
document.linkColor="blue";
document.linkColor="#0000FF";
document.vlinkColor
Esta instruo permita de especificar a cor de um link j vesitados (depois do clique do rato mas
antes de sar do link) de um objecto document. pode-se utilizar o nome da cor ou o seu valor RGB.
document.vlinkColor="red";
document.vlinkColor="#FF0000";
Variveis
As variveis em Javascript
As variveis contm dados que podem ser modificados durante a execuo de um programa. Faz-se
referncia pelo nome desta varivel.
Um nome de varivel deve comear por uma letra (alfabeto ASCII) ou o smbolo _ e ser composto
de letras, de nmeros e de caracteres _ e $. O nmero de caracteres no est definido. Para
chamar funes o Javascript case sensitive. Ateno ento as maisculas e minsculas!
Declaraes de variveis
As variveis podem declararem-se de duas maneira:
1. seja de maneira explcita. Diz-se em Javascript que isto uma varivel.
12
O comando que permite declarar uma varivel a palavra var. Por exemplo:
var Numero = 1
var Nome = "Srgio"
2. seja de maneira implcita. Escreva-se directamente o nome da varivel seguido do valor de

atribuio. Por exemplo:
Numero = 1
Nome = "Srgio"
Ateno! Apesar desta aparncia facilidade, a maneira que se declare a varivel ter uma grande
importncia com a visibilidade da varivel no programa Javascript.
Ver para este assunto, a distino entre varivel local e varivel global no Javascript avanado
deste captulo.
Para tornar o vosso script mais legvel, aconselhamos de utilizar cada vez palavra var par declarar
as variveis.
Os dados sob Javascript
O Javascript utiliza 4 tipos de dados:
TIPO DESCRIO
Nmeros Todo nmero inteiro ou com virgula tal

que 22 ou 3.1416
Cadeias de caracteres Toda cadeia de caracteres inseridas

entre aspas tal que "cadeia de
caracteres"
Booleanos
as palavras true para verdadeiro e false
para falso
Palavra nulo
Palavra especial que representa sem
valor
Nota-se tambm que ao contrrio da linguagem C ou C++, No se declara o tipo de dados de uma
varivel. Sendo assim no temos necessidade de inserir o tipo (int, float, double, char e outros) em
Javascript.
Exerccio
Vamos utilizar o mtodo write() para visualizar as variveis. Defina-se uma varivel chamada
"texto" que contm uma cadeia de caracteres "Meu nmero preferido o " e uma outra chamada
"variavel" inicializada em 7.
<HTML>
<BODY>

</SCRIPT>
</BODY>
</HTML>
13
E obtm-se o seguinte resultado:
Os nomes reservados
as palavras da lista abaixo s podem ser utilizadas para nomes de funes ou de variveis.
Algumas desta palavras so palavras chaves Javascript, outras foram reservadas pela Netscape
para um eventual uso futuro.
A abstract
B boolean break byte
C case catch char class const continue
D default do double
E else extends
F false final finally float for function
G goto
I if implements import in instanceof int interface
L long
N native new null
P package private protected public
R return
S short static super switch synchronized
T this throw throws transient true try
V var void
W while with
Variveis globais e variveis locais
As variveis declaradas no incio do script, fora e antes de todas funes (ver mais a frente), sero
globais, mesmo que esta seja declarada com var ou de maneira contextual. Pode-se assim as
chamar em qualquer stio no script.
Numa funo, uma varivel declarada pela palavra chave var e s pode ser invocada dentro da sua
funo. Sendo assim no se pode invocar a varivel fora da funo. Da seu nome local. No entanto,
sempre numa funo, se a varivel declarada contextualmente (sem utilizada a palavra var), sua
invocao ser global.
Voltaremos a falar deste tema nos estudos das funes.
Operadores
As variveis so teis mas necessrio saber as manipula-las, Vejamos os diferentes operadores que esto a
nossa disposio no Javascript.
14
Nos exemplos, O valor inicial da varivel x ser sempre igual 11
operadores de clculos
SMBOLO NOME SIGNIFICADO EX. RESUL.
+ mais adio x+3 14
- menos subtraco x-3 8
* multiplicar por multiplicao x*2 22
/ dividir por diviso x /2 5.5
% resto da diviso por resto x%5 1
= toma valor de valorizao x=5 5
operadores de comparao
SMBOLO NOME EX. RESUL.
== igual x==11 true
< inferior x<11 false
<= inferior ou igual x<=11 true
> superior x>11 false
>= superior ou igual x>=11 true
!= diferente x!=11 false
Importante. Confunda-se muitas vezes o = e o == (dois smbolos =). O = um operador de

atribuio de valor enquanto que o == um operador de comparao. Este confuso uma grande
fonte de erros de programao.
operadores de associao
Chama-se assim aos operadores que realizem um clculo no qual uma varivel intervm nos dois
lados do smbolo = (so de alguma maneira operadores de atribuio).
No exemplo que segue o x tem sempre o valor 11 e y ter como valor 5
SMBOLO DESCRIO EX. SIGNIFICADO RESUL.
+= mais igual x += y x=x+y 16
-= menos igual x -= y x=x-y 6
*= multiplicar igual x *= y x=x*y 55
/= dividir igual x /= y x=x/y 2.2
operadores lgicos
Tambm chamados operadores booleanos, esses operadores servem a verificar duas ou vrias
condies.
SMBOLO NOME EX. SIGNIFICADO
&& e (condio1) && (condio2) condio1 e condio2
|| ou (condio1) || (condio2) condio1 ou condio2
15
operadores de incrementao
Estes operadores vo aumentar ou diminuir o valor da varivel de uma unidade. Esses operador
so muito usados e teis, por exemplo para executar um ciclo.
Nos exemplo x vale 3.
SMBOLO DESCRIO EX. SIGNIFICADO RESUL.
x++ incrementao y = x++ 3 depois mais 1 4

(x++ o mesmo que
x=x+1)
x-- decrementao y= x-- 3 depois mais 1 2

(x-- o mesmo que
x=x-1)
operadores de incrementao
O operadores executam-se na ordem seguinte de prioridade (do grau de prioridade o mais fraco ou
grau de prioridade o mais elevado).
No caso dos operadores iguais, da esquerda para a direita.
OPERADOR OPERAO
, vrgula ou separador de lista

= += -= *= /= %= valorizao
?: operador condicional
|| "ou" lgico
&& "e" lgico
== != igualdades
< <= >= > relaes
+- adio substrao
*/ multiplicar dividir
! - ++ -- incrementos
() parntese
Funes
definio
Uma funo um grupo de linha(s) de cdigo de programao destinado uma tarefa bem especfica
e que podemos de necessrio, utilizar vria vezes. A utilizao de funes melhora bastante a
leitura do script.
Em Javascript, existem dois tipos de funes:
As funes prprias do Javascript. Que chamamos de "mtodos". Elas so associadas a um

objecto bem particular como o caso do mtodo Alert() com o objecto window.
As funes escritas por vs para executar o vosso script. a estas que nos vamos interessar
agora.
declarao de funes
Para declarar ou definir uma funo, utiliza-se a palavra function.

A sintaxe de uma declarao de funo a seguinte:
function nome_da_funo(argumentos) {
... cdigo de instrues ...
}
16
O nome da funo segue as mesmas regres do que as das variveis (nmero de caracteres
indefinido, comeado por uma letra pode incluir nmeros...). Volto a lembrar que o Javascript
case sensitive. Assim funo() no ser igual a Funo(). Todos os nomes de funes num um
script devem ser nicos.
A meno dos argumentos facultativo mas no caso dos parntese devem ficar. alias graas aos
parntese que o interpretador Javascript distinga as variveis das funes. Voltaremos a falar mais
em pormenor sobre os argumentos e outros parmetros mais a frente.
O facto de definir uma funo no vai executar os comandos que ela contm. ~s executada
quando chamamos a funo.
invocao de uma funo
A invocao de uma funo se faz o mas simples possvel, pelo nome da funo com parntese).
Seja por exemplo nome_da_funo();
Convm verificar (porque o browser l o script de cima a baixo) que a vossa funo deve estar bem
definida antes de a chamar.
As funes dentro <HEAD>...</HEAD>
assim aconselhado de inserir todas as declaraes de funes no cabealho da pgina , isto entre os tags
<HEAD>...</HEAD>. assim tero a certeza que as funes j estaro interpretadas antes de serem invocadas no
<BODY>.
exemplos
Neste exemplo, definimos dentro dos tags HEAD, uma funo chamada mensagem() que insere um
texto "Bem vindo a minha pgina". Esta funo ser chamada no carregamento da pgina ver
onLoad=.... no tag <BODY>.
<HTML>
<HEAD>
<--
function mensagem() {
document.write("Bem vindo a minha pgina");
}
//-->
</SCRIPT>
</HEAD>
<BODY onLoad="mensagem()" >
</BODY>
</HTML>
passar um valor a uma funo
Pode-se passar valores ou parmetros as funes Javascript. Assim as funes podem utilizar valores.
Para passar um parmetro a uma funo, fornece-se um nome de uma varivel dentro da declarao da funo.
Um exemplo simples para compreender. Est escrito uma funo que insere uma caixa de aviso em que o texto
pode ser alterado.
Na declarao da funo, escreve-se:
function Exemplo(Texto) {
alert(texto);
}
17
O nome da varivel Texto e definida como um parmetro da funo.
Na invocao da funo, fornece-se o texto:
Exemplo("Bom dia a todos");
passar vrios valores a uma funo
Pode-se passar vrios parmetros a uma funo. Como frequente o caso em Javascript,
separa-se os parmetros por vrgulas.
function nome_da_funo(arg1, arg2, arg3) {

... cdigo de instruo ...
}
Declarao de funo:
function Exemplobis(Texto1, Texto2){...}
Invocao da funo:
Exemplobis("Bem vindo a minha pgina", "Bom dia a todos")
voltar a um valor
O princpio simples (a prtica por vez no to simples). Para reenviar um resultado, basta
escrever a palavra chave return seguido da expresso a reenviar. Notar que cercar a expresso
de parnteses. Por exemplo:
function cubo(numero) {
var cubo = numero*numero*numero
return cubo;
}
A instruo return facultativa e podemos encontrar vrios return na mesma funo.
Para explorar este valor da varivel reenviada pela funo, utiliza-se uma formulao do tipo
document.write(cubo(5)).
variveis locais e variveis globais
Com as funes, o bom uso de variveis locais e globais tem toda a sua importncia.
Uma varivel declarada dentro uma funo pela palavra chave var ter uma invocao limitada a
esta prpria funo. No se pode assim chama-la fora do script. Chamamos assim varivel local.
}
Assim a varivel cubo neste exemplo uma varivel local. Se fazemos referncia a ela fora do
script, esta varivel ser desconhecido pelo interpretador Javascript (mensagem de erro).
Se a varivel declarada contextualmente (sem utilizar a palavra var), a sua invocao ser global.
cubo = numero*numero*numero
}
A varivel cubo declarada ser aqui uma varivel global.
As variveis declaradas logo no incio do script, fora e antes de todas as funes, sero sempre
globais, que ela seja declarada com var ou de maneira contextual.
18
var cubo=1
}
</SCRIPT>
A varivel cubo ser global.
Para facilitar a gesto das variveis, posso aconselhar de as declarar logo no incio do script (como
a maior parte das linguagens de programao). Este hbito pode prevenir algumas complicaes.
Eventos
Geral
Com os eventos e sobretudo sua gesto, abordamos o lado "mgico" do Javascript.

Em Html clssico, h um evento que conhecem bem. o clique do rato sobre um link que vai abrir
outra pgina Web. Infelizmente, praticamente o nico. Felizmente, o Javascript vai acrescentar
uma boa dezena.
Os eventos Javascript, associados as funes, aos mtodos e aos formulrios, abrem uma grande
porta para uma verdadeira interactividade das pginas.
Eventos
Vamos ver os diferentes eventos implementados em Javascript.
EVENTOS DESCRIO
Clik Quando o utilizador clica sobre um boto, um link ou outro

elementos.
Load Quando a pgina carregada pelo browser.
Unload Quando o utilizador saia da pgina.
MouseOver Quando o utilizador coloca o ponteiro do rato sobre um link

ou outro elemento.
MouseOut Quando o ponteiro do rato no est sobre um link ou outro

elemento.
Focus Quando um elemento de formulrio tem o focus, isto, que

est activo.
Blur Quando um elemento de formulrio perde o focus, isto ,

quando o deixa de estar activo.
Change Quando o valor de um campo de formulrio modificado.
Select Quando o utilizador selecciona um campo dentro de elemento

de formulrio.
Submit Quando o utilizador clica sobre o boto Submit para enviar

um formulrio.
Gesto de eventos
19
Para ser eficaz, necessrio que a estes eventos sejam associados as aces previstas por ti. o
papel de gesto de eventos. A sintaxe :
onevento="function()"
Por exemplo, onClick="alert('Bem vindo ao Truques e Dicas')" .

De maneira literria, no clicar do utilizador, abrir uma caixa de aviso com a mensagem indicada.
onClick
Evento mais clssico em informtica, o clique do rato.
Clicar
O cdigo deste boto :
<FORM>
<INPUT TYPE="button" VALUE="Clicar" onClick="alert('Acabas-te de clicar no boto')" >
</FORM>
Mais pormenores sobre os formulrios no prximo captulo.
onLoad e onUnload
O evento Load aparece quando a pgina acaba de se carregar. O inverso, Unload aparece quando
o utilizador saia da pgina.
Os eventos onLoad e onUnload so 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
pgina e uma pequena palavra de adeus ao sair desta.
<HTML>
<HEAD>
<SCRIPT LANGUAGE='Javascript'>
function bemvindo() {
alert("Bem vindo a esta pgina");
}
function adeus() {
alert("Adeus");
}
</SCRIPT>
</HEAD>
<BODY onLoad='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 prtico, por exemplo, para inserir explicaes 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).
Exemplo
O evento onmouseOut, geralmente associado um onmouseOver, executa-se quando o cursor saia da zona
sensvel (link ou imagem).
Falaremos com mais pormenor sobre o onmouseOver e o onmouseOut na pgina seguinte.
20
Eventos (continuao)
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 formulrio perde o focus.
Isto acontea 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 cdigo :
<FORM>
<INPUT TYPE=text onBlur="alert('Isto um Blur!')" >
</FORM>
Gesto de eventos
Para ser eficaz, necessrio que a estes eventos sejam associados as aces previstas por ti. o
papel de gesto de eventos. A sintaxe :
onEvento="function()"
Por exemplo, onClick="alert('Bem vindo ao Truques e Dicas')" .

De maneira literria, 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 diferena. No s a rea
de texto deve ter perdido o focus mas tambm o seu contedo deve ter sido alterado pelo
utilizador.
onSelect
Este evento executa-se quando o utilizador seleccionou toda ou parte de um texto numa text field.
tenta selecionar este texto
Gestes de eventos disponveis em Javascript
Agora apresento uma lista de objectos que correspondem a gestes de evento bem determinado.
21
OBJECTO GESTES DE EVENTOS DISPONVEIS
Janela onLoad, onUnload
Link hypertexto onClick, onmouseOver, on mouseOut
Elemento de texto onBlur, onChange, onFocus, onSelect
Elemento de zona de onBlur, onChange, onFocus, onSelect

texto
Elemento boto onClick
Boto Radio onClick
Lista de seleco onBlur, onChange, onFocus
Boto Submit onClick
Boto Reset onClick
Sintaxe do onmouseOver
O cdigo de gesto 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 funo action() invocada. O atributo
HREF indispensvel. Ele pode conter o endereo de uma pgina Web se assim o desejares ou
simplesmente o cardinal "#" para que o link fica activo mas no abra nenhuma pgina.
Exemplo: Ao sobrevoar o link "mensagem importante ", uma janela de aviso abra-se.
O cdigo :
<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 sensvel.
Pode-se imaginar o cdigo seguinte:
22
<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 gesto 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 cdigo relativamente simples.
<HTML>
<HEAD>
function lightUp() {
document.images["homeButton"].src="button_hot.gif"
}
function dimDown() {
document.images["homeButton"].src="button_dim.gif"
}
</SCRIPT>
</HEAD>
<BODY>
<A HREF="#" onmouseOver="lightUp();" onmouseOut="dimDown();" >
<IMG SRC="button_dim.gif" name="homeButton" width=100 height=50
border=0> </A>
</BODY>
</HTML>
Completem sempre em Javascript os atributos width=x height=y das tuas imagens.
Exemplo:
Condies
Expresso if
Num momento ou outro da programao, teremos necessidade de testar uma condio. O que vai
permitir executar ou no uma srie de instrues.
Na sua formulao a mais simples, a expresso if apresenta-se assim:
if (condio verdadeira) {
uma ou vrias instrues;
}
Assim, se a condio verdadeira, as instrues executam-se. Se ela no , as instrues no se
23
executam-se e o programa passa para o comando seguinte.
De maneira um pouco mais evoludos, tem-se a expresso if...else
if (condio verdadeira) {
instruo1;
}
else {
instruo2;
}
Se a for verdadeira (true), o bloco de instrues 1 se executa. Se ela no for (false), o bloco de
instrues 2 se executa.
Graa aos operadores lgicos "e" e "ou", a expresso de teste pode testar uma associao de
condies. Assim if ((condio1) && (condio2)), testar se a condio 1 e a condio 2
realizada. E if ((condio1) || (condio2)), testar se uma ao menos das condies
verdadeira.
Para ser mais completo (e para aqueles que gostam da escrita concisa), tambm h:
(expresso) ? instruo a : instruo b
Se a expresso entre parntese verdadeira, a instruo a executada. Se a expresso entre

parntese volta falsa, a instruo b que se executa-se.
Expresso for
A expresso for permite de executar um bloco de instrues um certo nmero de vez em funo da
realizao de um certo critrio. Sua sintaxe :
for (valor inicial ; condio ; progresso) {

instrues;
}
Pegamos um exemplo concreto
for (i=1, i<10, i++) {

document.write(i + "<BR>")
}
Na primeira passagem, a varivel i, inicializada a 1. Sendo a varivel inferior a 10. Ela ento
incrementada de uma unidade pelo operador de incrementao i++
(i vale ento 2) e as instrues executam-se.

No fim da execuo das instrues, voltamos ao contador. A varivel i (que vale 2) ainda inferior
a 10. Ela aumentada de 1 e as instrues prosseguem, at que i vale 10. A varivel i no satisfaz
mais a condio i<10. O ciclo interrompa-se e o programa continua depois da chaveta fechada
While
A instruo while permite de executar uma instruo (ou um grupo de instrues) um certo nmero
de vezes.
while (condio verdadeira){

continuar a fazer alguma coisa
}
Enquanto que a condio verdadeira, o Javascript continua executar as instrues entre as

chavetas. Uma vezes que a condio no mais verdadeira, o ciclo interrompa-se e continua-se o
script.
Pegamos neste exemplo:
24
cont=1;
while (cont<5) {
document.write ("linha : " + cont + "<BR>");
cont++;
}
document.write("fim do ciclo");
Vejamos como funciona este exemplo. Primeiro a varivel que ir+a servir de contador cont
inicializada em 1. o ciclo while arranca ento com o valor 1 que inferior a 5. A condio
verdadeira. Executa-se as instrues das chavetas.
Primeiro, "linha : 1" inserido e depois o contador incrementado de 1 e toma assim o valor 2. A
condio ainda verdadeira. as instrues entre as chavetas so executadas. E isso at inserir a
linha 4. A , o contador depois da incrementao vale 5. A condio j no sendo verdadeiro,
continuamos no script e ento o fim do ciclo.
Ateno ! Com o sistema de ciclo, o risco existe (se a condio sempre verdadeira), de fazer o
ciclo indefinidamente a 'instruo. O que pode fazer crachar o browser !
Break
A instruo 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;
cont++;
}
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 instruo continue permite de saltar uma instruo num ciclo for ou while e de continuar de
seguida com o ciclo (sem sair deste como faz o break).
Retomamos o nosso exemplo ;
25
cont=1;
while (cont<5) {
if (cont == 3){
cont++
continue;}
cont++;
}
Aqui, o ciclo comea, quando o contador vale 3, devido a instruo continue , salta-se a
instruo document.write (linha : 3 no 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
Formulrios
Em geral
Com o Javascript, os formulrios Html tomem outra dimenso. No esquecer que em Javascript,
podemos aceder a cada elemento de um formulrio para, por exemplo, ler ou escrever um valor,
uma escolha a qual poder associar uma gesto de evento... Todos esses elementos iro reforar
as capacidades interactivas da pgina.
Um formulrio um elemento Html declarado pelo tags <FORM></FORM>. Um formulrio

contm um ou vrios elementos que chamamos os controladores (widgets). Esses controladores so
escrito por exemplo pelo tags <INPUT TYPE= ...>.
Declarao de um formulrio
A declarao de um formulrio faz-se pelos tags <FORM> e </FORM>. Pode-se notar que em
Javascript, o atributo NAME="nome_do_formulrio" tem toda a sua importncia para designar o
caminho completo dos elementos. Em suma, os atributos ACTION e METHOD so facultativos
pelo menos at no fazer apelo ao servidor.
Um erro clssico e em Javascript de esquecer de declarar o fim do formulrio</FORM> depois

de ter inserir um controlador.
Controlador de linha de texto
A zona de texto o elemento de entrada/sada por excelncia 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 mximo y.
O objecto texto tem 3 propriedades:
PROPRIEDADES DESCRIO
name indica o nome do controlador pelo que podemos aceder.
defaultvalue indica o valor por defeito que ser afixada na zona de texto.
26
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 boto para controla-lo.
Controlar
O script completo assim:
<HTML>
<HEAD>
function controle(form1) {
var test = document.form1.input.value;
alert("Escreveste: " + test);
}
</SCRIPT>
</HEAD>
<BODY>
<FORM NAME="form1">
<INPUT TYPE="text" NAME="input" VALUE=""><BR>
<INPUT TYPE="button" NAME="botao" VALUE="Controlar"
onClick="controle(form1)" >
</FORM>
</BODY>
</HTML>
Quando clica-se no boto "controlar", o Javascript chama a funo controle() no qual passamos o
formulrio em que o nome form1 como argumento.
Esta funocontrole() definida nos tags <HEAD> Toma sob a varivel test, o valor da zona de
texto. Para aceder a este valor, escreve-se o caminho completo deste (ver o captulo"Um pouco de
teoria objecto "). No documento presente, tem o objecto formulrio chamado form1 que contm 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 boto para inserir este
valor na zona de texto sada.
Zona de texto de entrada

Afixar
Zona de texto de sada
Cdigo:
<HTML>
<HEAD>
function afixar(form2) {
var testin =document. form2.input.value;
document.form2.output.value=testin
}
</SCRIPT>
27
</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 sada
</FORM>
</BODY>
</HTML>
Ao clicar no boto "Afixar", o Javascript chama a funo a funo afixar() na qual passa o
formulrio em que o nome form2 desta vez como argumento.
Esta funo afixar() definida nos tags <HEAD> toma sob a varivel testin, o valor da zona de texto
de entrada. instruo seguinte, dizemos ao Javascript que o valor da zona de texto output
contida no formulrio nomeado form2 a da varivel testin. Utiliza-se o caminho completo para
chega a propriedade valor do objecto desejado, seja em Javascript
document.form2.output.value .
Formulrios (continuao)
Os botes radio
Os botes radio so utilizados para escolher uma escolha, e s uma, entre um conjunto.
name indica o nome do controlador. Todos os botes tem o mesmo

nome.
index o index ou o conjunto de botes radio comeando por 0.
checked indica o estado em curso do elemento radio
defaultchecked indica o estado do boto 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 proposio " +
form3.escolha[0].value) };
}
</SCRIPT>
</HEAD>
<BODY>
Escolha :
<FORM NAME="form3">
<INPUT TYPE="radio" NAME="escolha" VALUE="1">Escolha nmero 1<BR>
<INPUT TYPE="button"NAME="but" VALUE="Qual vossa escolha ?"
onClick="escolhaprop(form3)" >
</FORM>
</BODY>
28
</HTML>
Clica na tua escolha :
Escolha nmero 1
Escolha nmero 2
Escolha nmero 3
Qual vossa escolha ?
No formulrio nomeado form3, declara-se 3 botes radio. De notar que utiliza-se o mesmo nome
para os trs botes. De seguida temos um boto que invoca a funo escolhaprop().
Esta funo teste qual o boto radio checkado. Acede-se aos botes sob a forma de ndice em
relao ao nome dos botes radio que seja escolha[0], escolha[1], escolha[2].
Teste-se a propriedade cheked do boto por if(form3.escolha[x].checked). Depois de
escolheres e carregar no boto "Qual a vossa escolha", uma caixa de aviso aparece com a
indicao do boto checkado. Esta mensagem toma o valor ligado a cada boto pelo caminho
form3.escolha[x].value .
Checkbox
Os botes checkbox so teis para escolher uma ou vrias opes (relembro que os botes radio
so utilizados para escolher s uma opo). Sua sintaxe e seu uso bastante semelhante aos
botes radio, excepto em relao ao atributo name.
name indica o nome do controlador. Todos os botes tem o mesmo

nome.
checked indica o estado em curso do elemento radio
defaultchecked indica o estado do boto seleccionado por defeito.
value indica o valor do elemento radio.
Check as vossas escolhas :

escolha os nmeros 1,2 e 4 para obter uma boa resposta.
Escolha nmero 1
Escolha nmero 2
Escolha nmero 3
Escolha nmero 4
Corrigir
<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 nmero 1<BR>
29

<INPUT TYPE="button"NAME="but" VALUE="Corrigir" onClick="resposta(form4)" >
</FORM>
</BODY>
</HTML>
No formulrio nomeado form4, declara-se 4 checkbox. De referir que utiliza-se um nome diferente
para as quatro checkbox. De seguida temos um boto que ir invocar a funo resposta().
Esta funo teste quais botes que foram checkados. Para obter uma boa resposta, tem de se
checkar o 1,2 e 4. Acede-se aos botes utilizando de cada vez os seus nomes. Teste-se a
propriedade checked do boto por (form4.nome_da_boto.checked). Ao carregar no boto
"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 seleco
OS botes da checkbox so utilizados para escolher uma ou vrias opes. Sua syntax e seu uso
semelhante aos do boto radio excepto em relao ao atributo name.
name indica o nome da lista.
length indica o nmero 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 ento na lista em primeiro.
Um pequeno exemplo :
escolha um elemento da lista:
Elemento 1 Qual o elemento escolhido?
<HTML>
<HEAD>
<script language="javascript">
function lista(form5) {
alert("O elemento " + (form5.list.selectedIndex + 1));
}
</SCRIPT>
</HEAD>
<BODY>
Escolha um elemento: : <FORM NAME="form5">
<SELECT NAME="list">
<OPTION VALUE="1">Elemento 1
</SELECT>
<INPUT TYPE="button"NAME="b" VALUE="Qual o elemento escolhido?"
onClick="lista(form5)" > </FORM>
</BODY>
</HTML>
No formulrio nomeado form5, declara-se uma liste de seleco pelos tags

<SELECT></SELECT> . Entre estes dois tags,declara-se os diferentes elementos da lista pelo
tag <OPTION> . Depois temos um boto que invoca a funo lista().
30
Este funo teste qual a opo 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.
Formulrios (continuao)
O controlador textarea
O objecto textarea uma zona de texto de vrias linhas.
A sintaxe Html :
<FORM>
<TEXTAREA NAME="nome" ROWS=x COLS=y>
texto por defeito
</TEXTAREA>
</FORM>
onde ROWS=x representa o nmero de linhas e COLS=y representa o nmero de colunas.
texto por defeito
O objecto textarea possua vrias propriedades :
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 no 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 expresso document.Form.Text.value = 'Check\r\nthis\r\nout'.
O controlador Reset
O controlador Reset permita de anular as modificaes efectuadas aos controladores de um

formulrio e de restaurar os valores por defeito.
A sintaxe Html :
<INPUT TYPE="reset" NAME="nome" VALUE="texto">
Onde VALUE d o texto do boto.
Um nico mtodo associado ao controlador Reset, o mtodo 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 especfica de transmitir todas as informaes contidas no formulrio ao

URL designado no atributo ACTION do tag <FORM>.
31
A sintaxe Html :
<INPUT TYPE="submit" NAME="nome" VALUE="texto">
Onde VALUE d o texto do boto.
Um nico mtodo associado ao controlador Submit, o mtodo onClick().
O controlador Hidden (escondido)
O controlador Hidden permite entrar no script dos elementos (geralmente dados) que no
aparecem no cran. Estes elementos esto escondidos. Da seu nome.
A sintaxe Html :
<INPUT TYPE="hidden" NAME="nome" VALUE="os dados escondidos ">
Envio de um formulrio por E-mail
Javascript, no permite escrever num ficheiros. Depois, o controlador Submit sobretudo

destinado aos CGI. A soluo o envio do formulrio via correio electrnico.
A sintaxe :
<FORM METHOD="post" ACTION="mailto:vosso_endereo_Email">

<INPUT TYPE=text NAME="nome"><br>
<TEXTAREA NAME="mensagem" ROWS=2 COLS=35>
</TEXTAREA><br>
<INPUT TYPE=submit VALUE="Submit">
</FORM>
O que d:
Submit
E recebemos no e-mail, algo assim:

nome=Srgio+Brando&mensagem=ol!+Bem+vindo+ao+Truques+e+Dicas.
Onde encontramos os campos nome= e mensagem= separados pelo smbolo &, os espaos so
substitudos por + , e 17%OD%OA corresponde a uma quebra de linha.
Um pouco de tudo
Caixas de Dilogo ou de Mensagem
Javascript coloca a vossa dispozio 3 caixas de mensagens
alert()
prompt()
confirm()
So as trs mtodos do objecto window.
32
O mtodo alert()
O mtodo alert() j deve ser-te familiar, visto que j o utilizamos frequentemente ao longo do
tutorial.
O mtodo alert() afixa uma caixa de dilogo na qual reproduzido o valor (varivel e/ou cadeia de
caracteres) do argumento que lhe foi fornecido. Esta caixa bloque o programa at que o utilizador
no ter clicado em "OK".
Sua sintaxe :
alert(varivel);
alert("cadeia de caracteres");
alert(varivel + "cadeia de caracteres");
Para escrever em vrias linhas, deves usar: \n.
O mtodo prompt()
No mesmo estilo do que o mtodo alert(), Javascript dispe de uma outra caixa de dilogo, no caso
presente chamada caixa de convite, que composto por um campo que contm uma entrada a
completar pelo utilizador. Esta entrada contm um valor por defeito.
A sintaxe :
prompt("texto da caixa de convite","valor por defeito");
Ao clicar no OK, o mtodo reenvia o valor escrito pelo utilizador ou a resposta proposta por defeito.
Se utilizador clica em Cancel, o valor nulo ento reenviado.
Prompt() porvez utilizado para incrementar dados fornecidos pelo utilizador.
O mtodo confirm()
Este mtodo afixa 2 botes o "OK" e "Cancel". Ao clicar no OK, confirm() reenvia o valor true e
obviamente false caso clicar em Cancel. Esta mtodo utilizado sobretudo para confirmar uma
opo.
33
A sintaxe deste exemplo :
confirm("Deseja continuar ?")
Temporizador
Javascript dispe de um temporizador (ou mais precisamente uma contagem decresente) que
permita invocar uma funo aps um derterminado tempo.A sintaxe do temporizador :
nome_do_contador = setTimeout("funo_invocada()", tempo em milisegundos)
Assim, setTimeout("arrancar()",5000) vai chamar a funo arrancar() aps 5 segundos.Para parar o

temporizador antes do fim da contagem, temos :
clearTimeout(nome_do_contador)
Tomamos o seguinte exemplo (de pouca utilidade mas didtoco):Ao clicar em "Iniciar", activa-se o
temporizador, que aps 3 segundos chama uma caixa alerte(). Pode-se parar o processo
prematuramente clicando em "Stop". A sintaxe :
Iniciar Stop
<HTML>
<HEAD>
</HEAD>
<BODY>
<script language="Javascript">

</script>
<a href="#" onClick="iniciar()" >Iniciar</a>

<a href="#" onClick="clearTimeout(cont)" >Stop</a>
</HTML>
Com a instruco cont=setTimeout("alert('Tens os reflexos muito lentos !')",3000),

inicializa-se um temporizador, chamado pelo mtodo setTimeout(). Com clearTimeout(cont),
pode-se parar o temporizador antes dele acabar a contagem e invocar a funo.
O uso de This
Para designar o objecto, Javascript a tua disposio a palavra chave this. Esta palavra
frequentemente utilizada (sem risco de confuso) substituindo o caminho completo do objecto num
formulrio.
Aqui tem um exemplo:
Seja o formulrio :
<FORM NAME="form3">
<INPUT TYPE="radio" NAME="escolha" VALUE="1">escolha nmero 1<BR>
<INPUT TYPE="button"NAME="boto" VALUE="Qual a tua escolha ?"
onClick="escolhaprop(form3)" >
34
</FORM>
Em vez de usar escolhaprop(form3), pode-se utilisar escolhaprop(this.form) e evitar assim toda

confuso com os outros nomes dos formulrios. Neste exemplo, this.form refera-se ao formulrio
form3 completo. Enquanto que, escolhaprop(this) iria referir-se s ao elemento tipo boto do
form3.
Para ser completo, this utilizado tambm para criar uma ou vrias propriedades de um objecto.
Assim, para criar um objecto livro com as propriedades autor, editor e preo esta operao pode
ser efectuada com a ajuda de uma funo :
function livro(autor, editor, preo) {

this.auteur = autor;
this.editeur = editor;
this. prix = preo;
}
As mensagens de erros
Pode-se dizer que as ferramentas do debug oferecidas pelo Javascript seja das mais elevadas.
Pode,os estar orgulhoso da preciso dada pelo interpretador. O famoso "Javascript Error line x ".
Os tipos de erro
Existem 3 grandes categorias de erros na utilizao de um programa Javascript :
os erros no carregamento.
os erros na execuo.
os erros de lgico.
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, so 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
no o erro verdadeiro, sim o local onde o erro ocorre, o erro pode estar bem antes.
Dos exemplos clssicos de erros no carregamento so os parnteses, chavetas e aspas
no fechadas, etc.
Os erros na execuo
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
35
sintaxe, os erros na execuo aparecem devido ao mau uso dos comandos e de objectos
Javascript.
Um exemplo de erros na execuo a invocao de uma varivel ou uma funo
inexistente (isto acontece quando nos enganamos no nome da varivel ou da funo).
Os erros lgicos
Este so os mais viciados porque o "debugge" do Javascript no indica nenhum erro e o

script funciona correctamente, S que o resultado esperado no o esperado.
A nica soluo rever a construo lgica do script.
Numerosos erros lgicos so devido aos valores de variveis 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 varivel ou de passagem com a
instruo alert(varivel) ou alert("Ponto de passagem1").
Os grande clssicos de erros
Pode-se afixar uma lista de erros que todos os iniciados fazem ou iro fazer fazer mais
tarde.
Deves ser vigilante ao nome das variveis (case sensitive). Assim Varivel e
varivel so duas variveis distintas.
O nome da funo tem de ter a mesma ortografia na declarao e na invocao.
O nome das funes tem de ser nico no script
No esquecer as aspas ou as apstrofes antes e depois de caracteres.
Deve-se inserir vrgulas entre os diferentes parmetros ou argumentos.
Deve colocar as chavetas no stio certo sem esquecer de os fechar.
Assegura-te que os nomes dos objectos Javascript esto correctos. A armadilha
que os objectos Javascript comecem por uma maiscula (Date, Math, Array...)
mas as propriedades comecem por minscula (alert).
A confuso entre = operador de clculo e == operador de comparao.
Mini FAQ
Nenhuma mudana aps a modificao do script

Meu script no funciona numa tabela
Adaptar o script segundo o browser do leitor
Arredondar os nmeros atrs da vrgula
V-se o cdigo do meu Javascript!
Transmitir variveis de uma pgina para outra
Os botes radio reenviem-me a ordem inverso
Nenhuma mudana aps a modificao do script
Ir certamente acontecer aps uma modificao (correco) do vosso script, e que

nenhuma mudana seja visvel no cran mesmo aps de fazer fazer "Reload" ou
"Actualizar".
Verificar se gravaste bem as tuas modificaes (isto aconteca mesmo aos

melhores).
36
necessrio porvez recarregar mais profundamento a tua pgina, Shift + Reload

em Netscape ou clicar na zona de localisao do browser e fazer Enter.
Meu script no funciona numa tabela
Javascript nas tabelas, no nenhuma histria de amor (bug?). Recomenda-se na

literatura de no colocar tags <SCRIPT> nos tags <TD> mas sim de comenar o tag
<SCRIPT> antes do tag <TD> e de escrever o tag <TD> at o tag </TD> usando o
objecto document.write . Assim fica:

</SCRIPT>
Adaptar o script segundo o browser do leitor
Com os mtodos e propriedades do objecto navegador (ver este captulo). H maneira

de detectar o tipo e a verso do browser. O que muito til para adptar os scripts ao
browser e a verso deste.
A compatibilidade das pginas Javascript com os diferentes tipos e verses em

circulao coloca alguns problemas.
<SCRIPT LANGUAGE = "JavaScript">


</SCRIPT>
Arredondar os nmeros atrs da vrgula
Pode acontecer que o Javascript afixa uma diviso do tipo 1.599999999999999. O que
no agradvel. Falaremos sobre este assunto mais aprofundamente no captulo Math.
Entre os diferentes sistemas possveis, prope este:
variable= Math.round (variable*100)/100

Assim, 1.599999 multiplicado por 100 o que faz 159.9999. O mtodo Math.round
(159.9999) d 160, que divida por 100 que faz por sua vez 1.60. Com ...*100)/100,
obtemos 2 nmeros depois da vgula.
37
V-se o cdigo do meu Javascript!
Pois , pelo "View Document Source", o leitor pode ver , estudar e copiar o cdigo
Javascript includo nas vossas pginas html. Existe na net vrios pequenos programas de
codificao de scripts, que invoca ficheiros dissimulados, etc. Chegou-se a concluso que
nenhum sistema poder garantir a 100% a confidencialidade do dos scripts.
Transmitir variveis de uma pgina para outra
As variveis so definidas no script da entidade que constitua a pgina Web. Caso

deseja-se continuar a utilizar estas variveis numa outra pgina ou em todo o site.
Como fazer? A soluo utilizar frames. O Javascrips permita de passar variveis de
uma para objectos que pertencem a uma autra frame. E como todos os browsers
Javascript admitem frames, porqu no as utilizares (ver un dos captulos seguinte).
Os botes radio reenviem-me a ordem inverso
Este bug prprio do Netscape 2, pode causar supresas desagradveis, por exemplo
num formulrio que utiliza botes radio. Caso que o boto radio 1 de uma srie 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
srie do boto radio.
<FORM NAME="radioTest">
<INPUT TYPE="radio" NAME="test" VALUE="A" onClick="">A
<INPUT TYPE="radio" NAME="test" VALUE="B" onClick="">B
<INPUT TYPE="radio" NAME="test" VALUE="C" onClick="">C
</FORM>
Objecto Window
Propriedades e mtodos do objecto window
Algumas propriedades e mtodos do objecto window no te so desconhecidas :

- as das caixas de dilogo. Seja alert(), confirm(), e prompt(),
- e as do temporizador. Seja setTimeout() e clearTimeout().
Uma outra srie relacionada com as frames :

- so frames[], length, parent , opener e top.
Uma srie em relao a barra de estado :

- so status e defaultStatus.
Uma srie parar a abertura e fecho de uma janela :

- so open() e close().
E por fim self que reenvia a janela aberta.
Utilizao da barra de estado
Com o Javascript, a barra de estado pode ser utilizado para afixar mensagens que desejas. Como
eu sou mope como uma toupeira, no a minha parte preferida do Javascript mas uma opinio
das mais subjectivas.
As propriedades utilizadas so:
38
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>
Barra de estado
(sobrevoar)
indispensvel de acrescentar return true ;
Abertura e fecho de uma janela (teoria)
Os mtodos utilizados so:
MTODOS DESCRIO
open() abra uma nova janela.

close() fecha a janela activa.
A sintaxe :
[window.]open("URL","nome_da_janela","caracteristicas_da janela")
Onde URL o URL da pgina que desejamos abrir na nova janela.
Onde caracteristicas_da_janela uma lista de alguma ou de todas as caracterstica da janela

seguinte, separadas por vrgulas e sem espaos nem passagem de linha.
CARACTERSTICA DESCRIO
toolbar=yes ou no Visualizao da barra de ferramentas

location=yes ou no Visualizao de campo de endereo (ou de localizao)
directories=yes ou no Visualizao dos botes de acesso rpido
status=yes ou no Visualizao da barra de estado
menubar=yes ou no Visualizao da barra de menus
scrollbars=yes ou no Visualizao das barras de desfilamento.
(scrollbars=no funciona mal sob Explorer 3.0)
resizable=yes ou no Possibilidade de modificar as dimenses 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 stio 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 informao suplementar
sem sobrecarregar a pgina inicial.
39
Abertura com um boto (usando onClick)
Vamos abrir uma pequena janela que ir afixar o ficheiro test.htm com um boto na pgina.
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 pgina inicial:
<FORM>
<INPUT TYPE ="button" value="Abrir une nova janela"
onClick="open('test.htm', 'new', 'width=300,height=150,toolbar=no,location=no,
directories=no,status=no,menubar=no,scrollbars=no,resizable=no')">
(sem espaos nem passagem de linha)
</FORM>
xxxxx
Abrir uma nova janela
Abertura com um boto (chamando uma funo)
Na pgina inicial:

</SCRIPT>
<FORM>
<INPUT TYPE ="button" value="Abrir uma nova janela"
onClick="new_window()">
</FORM>
Objecto Window (continuao)
Fecho da janela aps alguns segundos
Com este script, sem interveno do utilizador, a nova janela se fecha automaticamente aps 4
segundos. Ao clicar no boto, 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.
40
<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 pgina inicial :
<FORM>
onClick="open('testc.htm','new','width=300,height=150,toolbar=no,
location=no,directories=no,
status=no,menubar=no,scrollbars=no,resizable=no')">
</FORM>
Abertura clicando num link ou numa imagem
Acrescenta-se simplesmente "onClick=open..." ao tag <A> do link ou da imagem.
Na pgina 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 espaos nem passagem de linha)
link de teste
(clicar)
Abertura sobrevoando um link ou uma imagem
Acrescenta-se simplesmente "onMouseOver=open..." ao tag <A> do link ou da imagem.
<A HREF="#" onMouseOver="open('test.htm', '',

no,scrollbar=no,resizable=no')">link de teste</A> (sem espaos nem passagem de linha)
link de teste
(sobrevoar)
Abertura sobrevoando o link e fecho sando do link
aqui utiliza-se onmouseOver e onmouseOut. De relembrar, que o onmouseOver do Javascript

1.1 e no funciona ento com o Explorer 3.0.
<A HREF="#" onMouseOver="open('test.htm', '',

no,scrollbar=no,resizable=no')" onmouseOut="self.close()">link de teste</A>
41
link de teste
(sobrevoar)
Abertura com um boto (chamando uma funo)
Na pgina inicial:

</SCRIPT>
<FORM>
onClick="new_window()">
</FORM>
Objecto String
Em geral
Voltemos ao objecto String para nos interessar a manipulao dos caracteres to teis para o
aspecto da programao do Javascript.
INSTRUO DESCRIO
length um inteiro que indica o comprimento da cadeia de caracteres.
charAt() Mtodo que permita de aceder a um caractere isolado de uma

cadeia.
indexOf() Mtodo que reenvia a posio de uma cadeia parcial a partir de

uma posio determinada.
(comeando do incio da cadeia principal seja na posio 0).
lastIndexOf() Mtodo que reenvia a posio de uma cadeia parcial a partir de

uma posio determinada.
(comeando do FIM da cadeia principal seja na posio 1).
substring(x,y) Mtodo que reenvia uma String parcial situada entre a posio x
e a posio y-1.
toLowerCase() Transforma todas as letras em minsculas.
toUpperCase() Transforma todas as letras em Maisculas.
A propriedade length
42
A propriedade length devolva um inteiro que indica o nmero de elementos numa cadeia de
caracteres. Se a cadeia est vazia (" "), o nmero zero.
A sintaxe simples :
x=variable.length;
x=("cadeia de caracteres").length;
A propriedade length s serve para as Strings, mas tambm para conhecer o comprimento e
nmero de elementos :
de formulrios. Quantos formulrios diferentes existem?

de botes radio. Quantos botes radio existem num grupo?
de checkbox. Quantas checkbox existem num grupo?
de opes. Quantas opes existem num Select?
de frames. Quantas frames existem?
de ncoras, de links, etc.
O mtodo charAt()
Temos para j de notar os caracteres so contados da esquerda para a direita e que a posio do
primeiro caractere 0. A posio do ltimo caractere ento o comprimento (length) da cadeia de
caractere menos 1;
cadeia : Javascript (comprimento = 10)

||||||||||
posio : 0123456789 (comprimento - 1)
Se a posio 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"; A resposta "J".

var chr=str.charAt(0);
var chr="Javascript".charAt(0);
ou var chr=charAt(str,0);
ou var chr=charAt("Javascript",0);
var str="Javascript"; A resposta "t".

var chr=str.charAt(9);
var chr=charAt(str,9);
var str="Javascript"; A resposta ""

var chr=charAt(str,13); seja vazia.
O mtodo indexOf
Este mtodo reenvia posio, seja x, de uma String parcial (letra nica, grupo de letras ou
palavra) numa cadeia de caracteres comeando na posio indicado por y. Isto permita, por
exemplo, de ver se uma letra, um grupo de letras ou uma palavra existe numa frase.
variavel="cadeia_de_caracteres";
var="string_parcial";
x=variavel.indexOf(var,y);
Onde y a posio partir da qual a pesquisa (da esquerda para a direita) deve comear. Este
pode ser qualquer inteiro compreendido entre 0 e o comprimento -1 da cadeia analisar.
43
Se a posio no especificada, a pesquisa comea por defeito da posio 0.
Se a string parcial no encontrada na cadeia de caracteres analisada, o valor devolvido ser igual
a -1. exemples :
Alguns exemplos
variavel="Javascript" x vale 4
var="script"
x=variable.indexOf(var,0);
variavel="www.truquesedicas.com" x vale -1
var="@"
x=variable.indexOf(var);
Objecto String (continuao)
O mtodo lastIndexOf()
Este mtodo muito parecido com o indexOf() s que a pesquisa feita da direita para a esquerda
(comea pelo fim).
A sintaxe idntica s que o y representa uma posio em relao ao fim da cadeia de caracteres.
x=variavel.lastIndexOf(var,y);
Os seguintes exemplos mostrem a diferena entre index0f() e lastIndexOf() :
varivel="Javascript"
var="a"
x=variavel.indexOf(var,0); aqui x vale 1 ou seja a posio do primeiro a.
x=variavel.lastIndexOf(var,9); ici x vale 3 ou seja a posio do segundo a.
De notar que mesmo quando comea-se a ler a partir do fim da cadeia, a posio devolvida
contada desde o incio da cadeia comeando por zero.
O mtodo substring()
O mtodo substring() do tipo indexOf(), lastIndexOf() e charAt() que acabamos de estudar. Este
mtodo 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 so inteiros compreendidos entre 0 e o comprimento menos 1 da cadeia de caracteres.

Se x inferior ao y, o valor devolvido comea na posio x e acaba na posio Y-1.
Se x superior ao y, o valor devolvido comea na posio y e acaba na posio 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 (lgico, no?)
Aqui esto alguns exemplos :
Javascript
||||||||||
0123456789
str="Javascript";
str1=str.substring(0,4);
str2="Javascript".substring(0,4);
str3=str.substring(6,9);
44
Os resultados so :
str1="Java"; seja as posies 0,1,2 et 3.

str2="Java"; seja as posies 0,1,2 et 3.
str3="rip"; seja as posies 6,7 et 8
O mtodo toLowerCase()
Este mtodo rescreve uma cadeia toda em minsculos.
variavel2="cadeia de caracteres";
variavel1=variavel2.toLowerCase();
Exemplo :
str="JavaScript";
str1=str.toLowerCase();
str2="JavaScript".toLowerCase();
O resultado ser :
str1="javascript";
str2="javascript";
O mtodo toUpperCase()
Este mtodo rescreve uma cadeia toda em minsculos.
variavel2="cadeia de caracteres";
variavel1=variavel2.toUpperCase();
Exemplo :
str="JavaScript";
str1=str.toUpperCase();
str2="JavaScript".toUpperCase();
O resultado ser :
str1="JAVASCRIPT";
str2="JAVASCRIPT";
Utilidade do toLowerCase() e do toUpperCase()
A utilidade destes 2 mtodos no 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 minsculas (ou toda em maiscula).
Objecto Math
Para manipular os numeros, aqui est o objecto Math.
O mtodo abs()
45
x=Math.abs(y);
O mtodo abs() reenvia o valor absoluto (valor positivo) de y. Isto , este mtodo
elemina o smbolo negativo de um nmero.
y = 4;
x = math.abs(y);
x = Math.abs(4);
x = math.abs(-4);
o resultado ser sempre
x=4
O mtodo ceil()
x=Math.ceil(y);
O mthode ceil() reenvia o inteiro superior ou igual ao y.
Ateno ! Este mtodo no arredonda o nmero.

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 mtodo floor()
x=Math.floor(y);
O mtodo floor() reenvia o inteiro inferior ou igual ao y.
Ateno! este mtodo no arredonda o nmero.

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 mtodo round(y)
x=Math.round(y);
O mtodo round() arredonda o nmero ao inteiro mais prximo.
y=20.355;
x=Math.round(y);
o resultado ser
x=20;
Ateno! Alguns clculos reclamam uma maior preciso. Para ter duas decimais aps a
vrgula, utiliza-se a seguinte formula:
46
x=(Math.round(y*100))/100;
e o resultado ser neste caso
x=20.36;
O mtodo max()
x=Math.max(y,z);
O mtodo max(y,z) reenvia o maior de 2 nmeros y e z.
y=20; z=10;
x=Math.max(y,z);
o resultado ser
x=20;
O mtodo min()
x=Math.min(y,z);
O mtodo min(y,z) reenvia o menor de 2 nmeros y e z.
y=20; z=10;
x=Math.min(y,z);
o resultado ser
x=10;
Objecto Math (continuao)
O mtodo pow()
x=Math.pow(y,z);
O mtodo pow() calculo o valor de um nmero y elevado a z.
y=2; z=8
x=Math.pow(y,z);
o resultado ser
x=2 8 ou seja x=256
O mtodo random()
x=Math.random();
O mtodo random() reenvia o valor de um nmero aleatrio escolhido entre 0 e 1.

Ateno! Este mtodo s funciona em Unix.
Por isso pode-se utilizar a seguinte funo que reenvia um nmero "aleatrio" entre 0 e 9.
47
function srand(){ t=new Date(); r=t.getTime();

p="a"+r; p=p.charAt((p.length-4)); x=p; }
O mtodo sqrt()
x=Math.sqrt(y);
O mtodo sqrt() reenvia a raiz quadrada de y.
y=25;
x=Math.sqrt(y);
o resultado ser
x=5;
O mtodo parseInt()
x=parseInt(varivel);
Devolva a parte inteira de um nmero com vrgula.
str='1.2345';
x=parseInt(str);
o resultado ser
x=1;
O mtodo eval()
x=eval(varivel);
esta funo avalia uma cadeia de caracteres sob a forma de valor numrico. Pode-se inserir na
cadeia operaes numricas, operaes de comparao, instrues e mesmo funes.
str='5 + 10';
x=eval(str);
o resultado ser
x=15;
diz-se na literatura que esta funo eval() uma operao majora do Javascript. Que seu uso no
aconselhado para iniciados. Pior, que esta funo eval() no suportada por todas as plataformas,
com todos as verses dos browsers. Verificar sempre o resultado devolvido pelo eval().
As funes trigonomtricas
Aqui (sem comentrios) as diferentes funes trigonomtricas:
x=Math.PI;
x=Math.sin(y);
x=Math.asin(y);
x=Math.cos(y);
x=Math.acos(y);
x=Math.tan(y);
x=Math.atan(y);
48
As funes logartmicas
Para quem quer saber, as diferentes funes logaritmicas:
x=Math.exp(y);
x=Math.log(y);
x=Math.LN2;
x=Math.LN10;
x=Math.E;
x=Math.LOG2E;
x=Math.LOG10E;
Objecto Date
new Date()
Este mtodo reenvia todas as informaes "data e hora" do computador do utilizador.
variavel=new Date();
(as variveis no levem acentos, por isso "variavel" e no "varivel")
Estas informaes so gravadas pelo Javascript sob o formato :
"Fri Feb 17 09:23:30 2001"
Ateno! a data e a hora no Javascript comea em 1 Janeiro 1970. Toda referncia a uma data
anterior ir dar um resultado aleatrio.
O mtodo 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");
getYear()
variavel_data=new date();
an=variavel_data.getYear();
Devolve os dois ltimos nmeros do ano na variavel_data. Ou seja aqui 01.

Como s se tem dois nmeros, pode-se colocar 20 como prefixo, assim:
an="20"+variavel_data.getYear();
getMonth()
mes=variavel_data.getMonth();
Devolve o ms na varivel_date sob a forma de um inteiro compreendido entre 0 e 11 (0 para

janeiro, 1 para fevereiro, 2 para maro, etc.). Ou seja 11 (o ms menos 1). Por isso para obter o
ms certo pode-se fazer como este exemplo seguinte:

</SCRIPT>
o resultado ser:
Estamos no 2 ms do ano.
getDate()
diam=variavel_data.getDate();
Devolva o dia do ms na variavel_data sob a forma de um inteiro compreendido entre 1 e 31.

Pois , aqui comea-se em 1 em vs de 0 (porqu???).
No confundir com getDay() que Devolva o dia da semana.
getDay()
dia=variavel_data.getDay();
Devolva o dia da semana na variavel_data sob a forma de um inteiro compreendido entre 0 e 6 (0

para Domingo, 1 para Segunda-feira, etc.).
getHours()
horas=variavel_data.getHours();
Devolva a hora na variavel_data sob a forma de um inteiro compreendido entre 0 e 23.
geMinutes()
minutos=variavel_data.getMinutes();
Devolva os minutes na variavel_data sob a forma de um inteiro compreendido entre 0 e 59.
getSeconds()
segundos=variavel_data.getSeconds();
Devolva os segundos na variavel_data sob a forma de um inteiro compreendido entre 0 e 59.
Exemplo: Um script que d a hora em que entrou na pgina.
25/5/19103 22:48:43
14/5/19103 18:21:40
50
<HTML>
<HEAD>

</SCRIPT>
</HEAD>
<BODY >

</SCRIPT>
</BODY>
</HTML>
Exemplo: Um script com horas dinmicas
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 funo que afixa a hora getDt(), a instruo acrescentar
seTimeOut("getDt()",1000); E o resultado :
22:48:49
<HTML>
<HEAD>

</SCRIPT>
</HEAD>
<BODY onLoad="getDt()">
<FORM name="relogio">
<INPUT TYPE="text" NAME="display" SIZE=15 VALUE ="">
</FORM>
</BODY>
</HTML>
51
Outras propriedades (menos frequentes talvez)
getime()
Devolva a hora corrente na variavel_data sob a forma de um inteiro representando o nmero de

milisegundos que passaram desde 1 Janeiro 1970 00:00:00.
getimezoneOffse()
Devolva a diferena entre a hora local e a hora GMT (Greenwich, UK Mean Time) sob a forma
de um inteiro representando o nmero de minutos (e no em horas).
seMonth(x)
Devolva um ms 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 ms 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 nmero 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)
52
Objecto Array
Em geral
O objecto Array uma lista de elementos indexados nos quais pode-se guardar (escrever) dados
ou as invocar (ler).
Ateno! O objecto Array do Javascript 1.1
Array de uma dimenso
Para fazer um array, procede-se a duas etapas:
primeiro construir a estrutura do array. Nesta fase, os elementos do array esto vazios.
depois inserir valores nos elementos definidos.
Comea-se por definir o array :
nome_do_array = new Array (x);
Onde x o nmero de elementos do array.
De notar que, o nmero de elementos limitado a 255.
Depois, depois alimenta-se a estrutura definida :
nome_do_array [i] = "elementos";
onde i um nmero compreendido entre 0 e x menos 1.
Exemplo: um caderno de endereo com 3 pessoas
construo do array :
caderno = new Array(3);
inserir dados:
caderno[0]="Srgio";
caderno[1]="Paulo";
caderno[2]="Angelo";
para aceder a um elemento, emprega-se:

document.write(caderno[2]);
Nota-se tambm que os dados so bem visveis ao leitor (view source).
Nota:
Muitas vezes prtico 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 Mtodos
ELEMENTOS DESCRIO
length Devolva o nmero de elementos do array.
53
join() Junta todas os elementos do array numa nica cadeia.

Os diferentes elementos so separados por um caractere separador
especificado no argumento. Por defeito, este separador uma vrgula.
reverse() Inversa a ordem dos elementos.
sort() Devolva os elementos por ordem alfabtico.
Usando os exemplo do quadro,
document.write(carnet.join()); d como resultado : Srgio,Paulo,ngelo.

document.write(carnet.join("-")); d como resultado : Srgio-Paulo-ngelo.
document.write(carnet.reverse().join("-")); d como resultado : ngelo-Paulo-Srgio
Array de duas dimenses
Pode-se criar arrays de duas dimenses (e mais ainda).
Primeiro declara-se array de 1 dimeno da maneira clssica :
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 :
PREOS 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[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 ilustrao do que possvel:
Escolha do artigo : Camisas
Escolha do tamanho : T. Small

Obter preo
O formulrio escreva-se:
<FORM name="form" >

<SELECT NAME="liste">
<OPTION>Camisas
<OPTION>Polos
<OPTION>T-shirts
</SELECT>
<SELECT NAME="tamanho">
<OPTION>T. Small
54
<OPTION>T. Medium
<OPTION>T. Large
</SELECT>
<INPUT TYPE="button" VALUE="Obter preo " onClick="affi(this.form)">
<INPUT TYPE="TEXT" NAME="txt">
</FORM>
Onde a funo 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 (continuao)
Base de Dados
Aqui est um ttulo bastante pesado! Si o Javascript pode guardar dados e apresentar estas
segundos os gostos do cliente, mas estamos mesmo assim muito longe das ferramentas especficas
para este tipo de trabalho.
As bases de dados em Javascript sero sempre do tipo esttico e sobretudo com uma codificao
trabalhosa.
At agora, definiu-se alguns caracteres nos elementos dos array. Nas strings, pode-se inserir muitos
e sobretudo com as ferramentas de manipulao das strings do Javascript, pode-se guardar coisas
do tipo:
Srgio*Brando*rua da Passagem,444*4440*Valongo*Portugal*
Ou seja neste caso, 6 dados.
Codificao tipo fixo
Retomando o exmplo do carderno de endereo. De maneira clssica, deve-se prever os difrrentes

campos e o nmero de posies consacradas a cada campo. Por exemplo:
Nome 20 posies
Apelido 10 posies
Endereo 20 posies
Cdigo postal 10 posies
Cidade 10 posies
Pas 10 posies
Cada campo deve respeitar o nmero de posies predeterminados. As posies sobrenumerrios

devem ser completadas em branco. Com um risco de erro elevado a codificao e um tempo de
carregamento da pgina sensivelmente aumentada para finalment transmetir que espaos vazios.
Nome Apelido Endereo Postal Cidade Pas

20 p. 10 p. 20 p. 10 p. 10 p. 10 p.
Srgio Brando Rua da Passagem,444 4440 Valongo Portugal
Para retomar os diferentes dados, utiliza-se a instruo substring(x,y). Assim:
Nome substring(0,19)
Apelido substring(20,29)
Endereo substring(30,49)
Cdigo postal substring(50,59)
Cidade substring(60,69)
Pas substring(70,79)
55
Codificao tipo varivel
O princpio 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="Srgio*Brando*Rua da passagem,444*4440*Valongo*Portugal*"
ou seja 60 posies em vs 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 posio na string do primeiro separador encontrado.

Para str.substring(0,pos), tem-se o primeiro dado compreendido entre o incio da string
(posio 0) e a posio menos 1 do separador ou seja Srgio.
Para str=str.substring(pos+1,str.length), recria-se uma string correspondendo string
do inncio menos o dado parcial que acabou-se de extrair menos um separador. O que d:
str="Brando*Rua da passagem,444*4440*Valongo*Portugal*"
E isto, por um ciclo, at haver separadores menos 1.
Para guardar os dados, a maneira mais prtica para os guardar o controlador do

formulrio Hidden (encondido)em vez da string.
Pourqu? Bem com as string funciona, mas h o risco de chegar a limitao do

comprimento das strings em Javascript, 50 80 caracteres. Por isso usa-se o smbolo +
e a concatenao dos dados para que ele seja aceito pelo compilador Javascript.
O controlador do formulrio Hidden no est sujeito a esta limitao de caracteres.

Pode-se guardar 30 K (e mais) de dados. Basta assim entrar no controlador do
formulrio Hidden e dar atributo value="os dados a guardar".
O script completo ser algo do tipo:
Teste
<HTML>
<BODY>
<FORM name="form">
<INPUT type=hidden name="data" value="Srgio*Brando*Rua da
passagem,444*4440*Valongo*Portugal*">
</FORM>
str=document.form.data.value; // extriar o string do controlador hidden
nsep=6 // nmero 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 diviso da janela afixando a pgina
HTML em vrias partes independentes ums dos outros. Pode-se assim caregar diferentes pginas
em cada parte. Para a sintaxe Html das frames, recomendo o tutorial de HTML - As frames -
56
Em Javascript, interessa a capacidade das frames interagir. Ou seja a capacidade de trocar

informaes entre elas.
A filosofia do Html quer que cada pgina que compe um site seja uma entidade independente.
Neste esquemas a pgina principal contem duas frames, em que podemos trocar informaes entre
as frames mantendo sempre a mesma pgina:
<=>
Propriedades
length Devolva o nmero de frames subordinadas na pgina principal

(pgina que contem todas as frames.
parent Sinnimo para a pgina principal.
Troca de informao entre frames
Com o exemplo seguinte, vamos transferir dados introduzidos pelo utilizador numa frame, para uma
outra frame.
Teste do exemplo
A pgina principal das frames
<HTML>
<HEAD>
</HEAD>
<FRAMESET ROWS="30%,70%">
<FRAME SRC="subordinada01.htm" name="subordinada01">
<FRAME SRC="subordinada02.htm" name="subordinada02">
</FRAMESET>
</HTML>
A pgina principal contm duas frames subordinadas "subordinada01" e "subordinada02".
A frame subordinada01.htm
<HTML>
<BODY>
<FORM name="form1">
<INPUT TYPE="TEXT" NAME="en" value=" ">
</FORM>
</BODY>
</HTML>
A frame subordinada02.htm
<HTML>
<HEAD>

</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. Ento o caminho comea por parent.subordinada01. Nesta frame encontra-se um
documento que contm um formulrio (form1) que contm 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
expresso completa ser:
parent.subordinada01.document.form1.en.value=document.form2.out.value
Por: Srgio Brando
58

Tuto Javascript

Caricato da

Informazioni sul documento

Copyright

Formati disponibili

Condividi questo documento

Condividi o incorpora il documento

Opzioni di condivisione

Hai trovato utile questo documento?

Questo contenuto è inappropriato?

Copyright:

Formati disponibili

Tuto Javascript

Caricato da

Copyright:

Formati disponibili

T r u q u e s e D i c a s - Tutorial de Javascript

2001-2003 Truques e Dicas - Produo:

importante saber que o Javascript completamente diferente do Java. Mesmo que os

Cdigo integrado na pgina Html Modulo (applet) distinto da pgina Html

Cdigo interpretado pelo browser no O cdigo compilado antes da sua

Um pouco de teoria objecto...

Os objectos e as suas hierarquias

Para bons internautas, vem neste cran uma pgina Web.

Carregou-se a pgina seguinte:

Esta pgina aparece numa janela. o objecto janela.

Um pouco de teoria objecto... (continuao)

A hierarquia deste exemplo ento:

As propriedades dos objectos

Em Javascript, parar aceder as propriedades, utiliza-se a sintaxe:

No caso do boto radio "semana", para testar a propriedade de seleco, escreva-se:

Ferramentas para o Javascript

Para aprender e descobrir o Javascript, necessrio:

1. Um browser compatvel com o Javascript.

Um browser compatvel com o Javascript

Unicamente a Netscape e a Microsoft dispem de browser Javascript "enabled". Para a Microsoft a

Netscape 2.0 Javascript (baptizado posteriormente por 1.0)

Um bom conhecimento de Html

Como o cdigo do Javascript vem juntar-se ao cdigo da linguagem Html, um conhecimento

Posso apenas recomendar a consulta do "Tutorial de Html"

Um simples editor de texto

Tambm necessrio informar o browser do fim do script.

Tudo o que est escrito entre o // e o fim da linha ser ignorado.

Tambm possvel incluir comentrios em diversas linhas com o cdigo:

No confundir os comentrios Javascript e os comentrios Html ().

Esconder o script para os antigos browsers

Os browsers que no compreendem o Javascript (e ainda existem) ignoram o tag <script> e vo

Onde incluir o cdigo em Javascript ?

O princpio simples. Basta respeitar este dois princpios seguintes :

O browser trata a pgina Html de cima para baixo.

Nada proba de inserir vrios scripts na mesma pgina Html.

Uma primeira instruo Javascript

O Javascript simples (continuao)

Primeira pgina Html com Javascript

<HTML> Html normal

Para browser que suportem o Javascript 1.0

Verses da linguagem Javascript

// programa para Netscape 3 et Explorer 4

Extenso .js para scripts externos

Alert() um mtodo do objecto Window. Para se conformar notao clssica

Mtodo do objecto documento

A pgina Html que aparece na janela do browser um objecto tipo document.

A cada objecto Javascript, o programador da linguagem previu um conjunto de mtodos ( ou

Para chamar o mtodo write() do documento, escreva-se:

A sintaxe bastante simples

Pode-se tambm escrever uma varivel, seja a varivel resultado,

Para associar texto (cadeia de caracteres) e variveis, utiliza-se a instruo

Pode-se utilizar os tags Html para incrementar o texto

Agora vamos escrever texto em Html e em Javascript.

Formatao dos carateres em Javascript

str="Texto"; (str uma varivel)

Inserir texto (continuao)

str="Texto"; (str uma varivel)

Instrues de formatao do document

As variveis podem declararem-se de duas maneira:

1. seja de maneira explcita. Diz-se em Javascript que isto uma varivel.

2. seja de maneira implcita. Escreva-se directamente o nome da varivel seguido do valor de

Os dados sob Javascript

O Javascript utiliza 4 tipos de dados:

Nmeros Todo nmero inteiro ou com virgula tal

= multiplicar igual x = y x=x*y 55