Você está na página 1de 35

JavaScript

Prof. Jairo - jairo@uninove.br


Primeiro Semestre/2002

2.1 - INTRODUO..........................................................................................................................................................3
2.1.1 - DEFINIO.............................................................................................................................................................3
2.1.2 - JAVASCRIPT NO JAVA......................................................................................................................................3
2.1.3 - CONCEITOS BSICOS: VARIVEIS, OPERADORES, EXPRESSES, FUNES, OBJETOS E EVENTOS...........................3
2.1.3.1 - Variveis........................................................................................................................................................3
2.1.3.2 - Operadores....................................................................................................................................................3
2.1.3.3 - Expresses.....................................................................................................................................................3
2.1.3.4 - Funes.........................................................................................................................................................4
2.1.3.5 - Mtodo...........................................................................................................................................................4
2.1.3.6 - Objetos...........................................................................................................................................................4
2.1.3.7 - Eventos..........................................................................................................................................................4
2.1.4 - USO DOS SCRIPTS JAVASCRIPT...............................................................................................................................4
2.2 - VARIVEIS, OPERADORES, FUNES E OBJETOS......................................................................................8
2.2.1 - VARIVEIS.............................................................................................................................................................8
2.2.1.1 - Variveis globais...........................................................................................................................................8
2.2.1.2 - Variveis locais..............................................................................................................................................8
2.2.1.3 - Nomenclatura das variveis.........................................................................................................................8
2.2.1.4 - Tipos de variveis..........................................................................................................................................8
2.2.2 - OPERADORES.........................................................................................................................................................9
2.2.2.1 - Operadores Unrios e binrios.....................................................................................................................9
2.2.2.2 - Operador de String........................................................................................................................................9
2.2.2.3 - Operadores Matemticos..............................................................................................................................9
2.2.2.4 - Operadores relacionais...............................................................................................................................11
2.2.2.5 - Operadores lgicos......................................................................................................................................11
2.2.2.6 - Operadores de atribuio............................................................................................................................12
2.2.3 - FUNES..............................................................................................................................................................13
2.2.4 - OBJETOS...............................................................................................................................................................14
2.2.4.1 - Objeto window.............................................................................................................................................15
2.2.4.2 - Objeto document.........................................................................................................................................19
2.2.4.3 - Objeto matemtico......................................................................................................................................21
2.3 - EVENTOS, APLICAES EM FORMULRIOS E DETECO DE BROWSERS....................................24
2.3.1 - EVENTOS..............................................................................................................................................................24
2.3.1.1 - Eventos onLoad e onUnload......................................................................................................................24
2.3.1.2 - Eventos onMouseOver, onMouseOut, onClick..........................................................................................25
2.3.1.3 - Eventos ligados a elementos de formulrio...............................................................................................25
2.3.2 - APLICAES EM FORMULRIOS...........................................................................................................................27
2.3.3 - DETECO DE BROWSER.....................................................................................................................................30
2.3.4 - COMENTRIOS FINAIS..........................................................................................................................................32
2.4 - EXERCCIOS..........................................................................................................................................................33
2.5 - RESPOSTAS DOS EXERCCIOS.........................................................................................................................34

_________________________________________________________________
JAVASCRIPT PRIMEIRO SEMESTRE 2002 Prof. Jairo jairo@uninove.br

2 - JavaScript

2.1 - INTRODUO

2.1.1 - Definio
Originalmente chamada de Livescript, JavaScript uma linguagem de roteiro interpretada (script language) baseada em
objetos desenvolvida pela Netscape em 1994. Ela passou a ser chamada JavaScript em dezembro de 1995, quando
Netscape e Sun Microsystems fizeram uma parceria para o desenvolvimento dessa linguagem.
JavaScript roda no browser do cliente que l a pgina HTML quando tem acesso local a uma mquina virtual java (local
Java Virtual Machine - JVM).
Cada script JavaScript consiste de um nico mdulo contnuo de cdigo onde ficam todas as funes e variveis
utilizadas pelo programa. Normalmente o cdigo posicionado no arquivo HTML entre descritores (tags) <SCRIPT> e
</SCRIPT>.
Como JavaScript tem muitas possibilidades que permitem criar documentos HTML sofisticados, possvel introduzir
recursos de interatividade em uma pgina Web, fazer animaes, imagens clicveis independentes de CGI, etc.
IMPORTANTE:
Como um script JavaScript s existe dentro de um arquivo HTML no existem aplicaes JavaScript independentes de
browser. O primeiro browser a suportar JavaScript foi o Netscape Navigator 2.0.
Apesar das limitaes, JavaScript vem evoluindo e pode ser usado em um grande nmero de aplicaes srias,
principalmente aquelas destinadas Intranet e Internet e usadas atravs de um browser.
2.1.2 - JavaScript NO Java
JavaScript s vezes confundida com Java, mas a verdade que JavaScript e Java so duas linguagens completamente
diferentes que compartilham diversas semelhanas no que se refere sintaxe, mas com diferenas marcantes.
Java uma linguagem de programao e JavaScript uma linguagem de hiper-texto que no compilada em bytecodes
mas interpretada bloco a bloco pelo browser que l o documento HTML.
Em certo sentido pode-se dizer que JavaScript mais uma extenso do HTML do que uma linguagem de programao
propriamente dita.
Como JavaScript fcil de entender, muito usado para criar tanto efeitos teis quanto bonitos sem ter que se
incomodar com programao.
2.1.3 - Conceitos bsicos: variveis, operadores, expresses, funes, objetos e eventos
O cdigo JavaScript, como muitas outras linguagens de programao, constitudo de declaraes as quais so usadas
para fazer atribuies, comparar valores, executar outras sees do cdigo, etc. (mais frente veremos esses conceitos
detalhadamente).
2.1.3.1 - Variveis
So valores que so atribudos dinamicamente, ou seja, no tm um valor pr-definido; so rtulos que se referem a um
valor que pode mudar. Podem ser definidos pelo usurio, bem como por qualquer outro mtodo.
Exemplo:
var nome = "Joo";
var num = 123;
2.1.3.2 - Operadores
So usados para calcular ou comparar valores; o operador executa uma operao especfica e rotorna um valor.
Exemplo:
total = lapis + caneta;
2.1.3.3 - Expresses
So quaisquer combinaes de variveis, operadores ou declaraes que avaliam alguma coisa para obter um resultado.
_________________________________________________________________
JAVASCRIPT PRIMEIRO SEMESTRE 2002 Prof. Jairo jairo@uninove.br

Exemplo:
total = 100;
if(total > 100) resto = 0;
2.1.3.4 - Funes
So comandos ou conjuntos de comandos utilizados para cumprir certos objetivos dentro do script.
Existem dois tipos de funes em JavaScript: funes internas ou intrnsecas e funes externas ou definidas pelo
usurio.
A.Funes internas ou intrnsecas so aquelas que no precisam ser especificadas, pois o prprio JavaScript j as
reconhece e sabe o que fazer com elas. Um exemplo pode ser a funo alert() que veremos logo nos primeiros
exemplos.
B.Funes externas ou definidas pelo usurio so aquelas que o usurio precisa explicar para o JavaScript quais so as
aes que ele precisa tomar, pois a linguagem desconhece seu nome. Uma funo em JavaScript similar a uma
"procedure" ou "subroutine" em outras linguagens de programao, ou seja, um conjunto de declaraes que
realizam alguma ao. As funes podem aceitar valores (parmetros), e tambm podem retornar valores, como por
exemplo a function hello() logo abaixo (exemplo 2.1.4.2).
2.1.3.5 - Mtodo
simplesmente uma funo a qual est contida num objeto. Por exemplo, a funo que fecha uma janela, chamada de
"close()" parte do objeto window, portanto window.close() conhecido como um mtodo. Da mesma forma,
window.alert() tambm um mtodo.
(exemplos 2.2.4.1.4, 2.1.4.2, 2.1.4.3, 2.1.4.4 e 2.2.2.5.1).
2.1.3.6 - Objetos
So os componentes de uma pgina HTML e um dos tpicos mais extensos do Javascript. So blocos de construo os
quais possuem uma srie de valores, cada valor reflete uma propriedade individual do objeto.
Objetos so conceitos crticos e caractersticos do JavaScript: um simples objeto pode conter muitas propriedades, cada
propriedade age como uma varivel refletindo um certo valor.
JavaScript tem um grande nmero de objetos pr-definidos (built-in) os quais se referem a caractersticas dos
documentos Web. Por exemplo, o objeto "document" contm propriedades as quais permitem modificar a cor de fundo
do documento, seu ttulo e muito mais.
2.1.3.7 - Eventos
O evento algo que iniciado e aciona algum procedimento. Por exemplo, o clique sobre algum objeto da pgina um
evento; passar o mouse sobre um link um evento; abrir, reiniciar ou sair de uma pgina so eventos; selecionar um
campo de formulrio um evento. Os programas JavaScript so tipicamente dirigidos pelos eventos.
Em JavaScript, um manipulador de evento (event handler) um mecanismo que causa um script reagir a um evento. Por
exemplo, um hiperlink est sujeito ao evento onMouseOver, e significa que o 'event handler' ser disparado quando a
seta do mouse for posicionada acima do link. O 'event handler' especifica qual cdigo JavaScript deve ser executado.
2.1.4 - Uso dos scripts JavaScript
O uso mais comum de JavaScript nos documentos HTML ocorre sob a forma de funes as quais so chamadas em
determinadas situaes ou em resposta a determinados eventos. As funes podem estar localizadas em qualquer parte
do cdigo HTML, a nica restrio que devem comear com a declarao da tag <SCRIPT> e terminar com
</SCRIPT>. Por conveno costuma-se colocar todas as funes no HEAD do documento entre as tags <HEAD> e
</HEAD> para garantir que o cdigo JavaScript seja carregado antes que o usurio interaja com o documento HTML,
ou seja, antes do <BODY>. Os exemplos abaixo ilustram o uso de JavaScript em casos simples.
Exemplo 2.1.4.1:
<HTML>
<HEAD>
<TITLE>Exemplo muito simples de JavaScript</TITLE>
</HEAD>
<BODY>
Nesta linha s tem HTML.<BR>
<SCRIPT>
_________________________________________________________________
JAVASCRIPT PRIMEIRO SEMESTRE 2002 Prof. Jairo jairo@uninove.br

document.write("Mas esta linha j tem JavaScript !!<BR>");


</SCRIPT>
De volta ao bom HTML.
</BODY>
</HTML>
Ir mostrar:
Nesta linha s tem HTML.
Mas esta linha j tem JavaScript !!
De volta ao bom HTML.
IMPORTANTE:
Como em C ou outra boa linguagem de programao, as linhas devem ser terminadas com ";" (ponto e vrgula).
Excees a essa regra so os casos onde aparecem blocos FOR, IF ou WHILE, como veremos mais frente. Em
JavaScript, ao contrrio do HTML, as quebras de linhas do editor de textos so levadas em considerao e por isso no
se deve quebrar a linha no meio da expresso.
Exemplo 2.1.4.2:
<HTML>
<HEAD>
<TITLE>Outro Exemplo</TITLE>
<SCRIPT language="JavaScript">
<!-- Escondendo dos browsers velhos
function hello() {
alert("Al !!!");
}
// -->
</SCRIPT>
</HEAD>
<BODY>
<A HREF="page10.html" onMouseOver="hello()">ponha a seta do mouse aqui</A>
</BODY>
</HTML>
Ir mostrar uma janelinha de "alerta" com a mensagem "Al !!!" toda vez que a seta do mouse for posicionada em cima
do link (no necessrio clicar no link).
O Netscape sob o Linux abre outra janela "alert" mesmo que a janela anterior no tenha sido fechada, ao contrrio do
que ocorre sob o Windows onde uma nova janelinha "alert" somente poder aparecer aps fechar a anterior.
NOTA 1:
Embora a tag <SCRIPT> no necessite do atributo "language", recomendvel sempre utiliz-lo, inclusive para
informar ao browser a verso do JavaScript usado.
Exemplo: <SCRIPT language="JavaScript1.2">.
NOTA 2:
Se o browser no possui suporte a JavaScript ele no reconhece a tag <SCRIPT>, ento ele a ignora mas mostra tudo
que estiver no interior como se fosse um simples texto HTML. O uso de comentrios "<!--" e "// -->" permite
"esconder" o cdigo JavaScript dos browsers velhos.
IMPORTANTE:
Os comentrios "<!--" e "// -->" apenas escondem dos browsers que no suportam Javascript, mas se a verso da funo
intrnseca JavaScript for muito recente e o browser um pouco velho, ele no suportar a funo. As funes intrnsecas
JavaScript1.2 (ou maior) no so suportadas por browsers verso 3.
Se os comentrios fossem usados no exemplo 2.1.4.1, ficaria assim:
<SCRIPT>
<!-- Esconde o cdigo JavaScript dos browsers mais antigos
document.write("Mas esta linha j tem JavaScript !!<BR>");
// -->
</SCRIPT>
Exemplo 2.1.4.3:
<HTML>
<HEAD>
_________________________________________________________________
JAVASCRIPT PRIMEIRO SEMESTRE 2002 Prof. Jairo jairo@uninove.br

<TITLE>Exemplo 2.1.4.3</TITLE>
<SCRIPT language="JavaScript">
<!-- Escondendo dos browsers velhos
function pushbutton() {
alert("Al !");
}
// -->
</SCRIPT>
</HEAD>
<BODY>
<FORM>
<INPUT TYPE="button" NAME="Button1" VALUE="Pressione" onClick="pushbutton()">
</FORM>
</BODY>
</HTML>
Exemplo 2.1.4.4:
<HTML>
<HEAD>
<TITLE>Exemplo 2.1.4.4</TITLE>
<SCRIPT language="JavaScript">
<!-- esconde o script dos browsers velhos
function getname(str) {
alert("Oi, " + str + " !");
}
// -->
</SCRIPT>
</HEAD>
<BODY>
Coloque o seu nome, por favor:
<FORM>
<INPUT TYPE="text" NAME="name" VALUE="Seu Nome Aqui" onBlur="getname(this.value)">
</FORM>
</BODY>
</HTML>
NOTA 1:
No exemplo acima, o evento "onBlur" iniciado quando o usurio "sai" da caixa de texto, clicando em outro local da
pgina ou teclando <ENTER>. Exceo: o Internet Explorer 3 no responde com a janelinha "alert" quando se tecla
<enter>.
NOTA 2:
'this.value' significa o valor que foi atribudo ao elemento de formulrio (no exemplo acima o texto da caixa de texto).
Exemplo 2.1.4.5:
Posicione a seta do mouse <A HREF="page10.html" TARGET="janela1" onMouseOver="window.status='Minha
pgina favorita'; return true;" onMouseOut="window.status=' '; return true;">aqui </A> e observe a barra de status do
browser
NOTA:
O exemplo acima um caso de script que no precisa das tags <SCRIPT> e </SCRIPT>, basta inserir a funo
intrnseca 'onMouseOver' como se fosse um atributo da tag <A HREF>. Exceo: o Internet Explorer 3 no responde ao
evento 'onMouseOut', ou seja, uma vez mostrada a mensagem "Minha pgina favorita" ela permanece na barra de status
do browser mesmo aps retirar a seta do mouse de cima do link.
Exemplo 2.1.4.6:
possvel tambm colocar scripts em arquivos externos, que devem ser salvos com a extenso "js". Para isso, deve se
colocar o parmetro SRC dentro da tag <SCRIPT> e fornecer o caminho (path) para encontrar o arquivo:
<HTML>
<HEAD>
<TITLE>Hello world em JavaScript</TITLE>
</HEAD>
_________________________________________________________________
JAVASCRIPT PRIMEIRO SEMESTRE 2002 Prof. Jairo jairo@uninove.br

<BODY>
<SCRIPT SRC="helloworld.js">
</SCRIPT>
</BODY>
</HTML>
O contedo do arquivo helloworld.js :
document.write("Hello World !!!<BR>");
IMPORTANTE:
Embora algumas verses 3 de browsers suportem o atributo SRC, scripts em arquivos externos somente so plenamente
suportados em verses 4 ou maior. Por exemplo, o Netscape 3 suporta o atributo SRC e o Internet Explorer 3 no.
Exemplo 2.1.4.7:
Incluso de data e hora em documentos HTML.
<HTML>
<HEAD>
<TITLE>Data e Hora</TITLE>
</HEAD>
<BODY>
<SCRIPT language="JavaScript">
<!-- esconde
today = new Date();
document.write("A hora agora : ",today.getHours(),":",today.getMinutes(),".<BR>")
document.write("A data : ", today.getDate(),"/",today.getMonth()+1,"/",today.getYear());
// final do esconde -->
</SCRIPT>
</BODY>
</HTML>
NOTA1:
A data e hora includa no documento HTML atravs de JavaScript tem pouco valor, pois trata-se de leitura do relgio no
computador do cliente, ou seja, estamos dando ao cliente algo que ele j tem.
NOTA2:
No Netscape (incluindo a verso 4.7) a funo "getYear()" retorna um "bug" eterno: usando o exemplo 2.1.4.7 acima,
obtenho "A data : 12/2/102" para o ano 2002, 103 para o ano 2003, etc.
simples corrigir essa "falha" somando 1900 ao ano.

_________________________________________________________________
JAVASCRIPT PRIMEIRO SEMESTRE 2002 Prof. Jairo jairo@uninove.br

2.2 - VARIVEIS, OPERADORES, FUNES E OBJETOS

2.2.1 - Variveis
Em JavaScript, variveis dinmicas podem ser criadas e inicializadas sem declaraes formais.
2.2.1.1 - Variveis globais
As variveis globais so declaradas/criadas fora de uma funo e acessadas em qualquer parte do programa.
2.2.1.2 - Variveis locais
As variveis locais so declaradas/criadas dentro de uma funo e s podem ser utilizadas dentro da funo onde foram
criadas. Essas variveis precisam ser definidas com a instruo var.
Exemplo:
var grau = "a";
e a varivel grau ser inicializada com o valor 'a'.
NOTA:
Podem existir variveis globais com o mesmo nome de variveis locais, porm esta prtica no aconselhvel.
2.2.1.3 - Nomenclatura das variveis
As variveis devem comear por uma letra ou pelo caracter sublinhado (underscore), o restante da definio do nome
pode conter qualquer letra ou nmero.
Exemplo:
_Myvar10 = 0;
IMPORTANTE:
A varivel "a" diferente da varivel "A", pois JavaScript "case sensitive" (caixa alta ou baixa faz diferena).
2.2.1.4 - Tipos de variveis
Existem trs tipos de variveis: Numricas, Booleanas e Strings.
A.As variveis numricas so assim chamadas pois armazenam nmeros.
B.As variveis Booleanas armazenam valores lgicos (True/False).
C.As variveis Strings armazenam sequncia de caracteres.
Exemplos:
total = 234;
erro = true;
texto = "abc";
As strings podem ser delimitadas por aspas simples ou duplas, a nica restrio que se a delimitao comear com as
aspas simples, deve terminar com aspas simples, da mesma forma para as aspas duplas.
Podem ser includos dentro de uma string alguns caracteres especiais, a saber:
\t - posiciona o texto na prxima tabulao;
\n - quebra de linha;
\f - form feed;
\b - back space;
\r - carrige return.
O JavaScript reconhece ainda um outro tipo de contdo em variveis, que o NULL. Na prtica isso utilizado para a
manipulao de variveis no inicializadas sem que ocorra um erro no programa.
Quando uma varivel possui o valor NULL, significa dizer que ela possui um valor desconhecido ou nulo, o null no
igual a nada, nem mesmo ao prprio null. A representao literal para NULL a string 'null' sem os delimitadores.
_________________________________________________________________
JAVASCRIPT PRIMEIRO SEMESTRE 2002 Prof. Jairo jairo@uninove.br

IMPORTANTE:
NULL uma palavra reservada.
2.2.2 - Operadores
Junto com funes e variveis, operadores so os blocos de construo das expresses. Um operador semelhante a
uma funo no sentido de que executa uma operao especfica e retorna um valor.
2.2.2.1 - Operadores Unrios e binrios
Todos os operadores em JavaScript requerem um ou dois argumentos, chamados operandos. Aqueles que requerem um
operando apenas so denominados operadores unrios, e os que requerem dois operandos so chamados de operadores
binrios.
2.2.2.2 - Operador de String
O operador de String o operador de concatenao +:
Exemplo:
Nome1="Jos";
Nome2="Silva";
Nome = Nome1 + " da " + Nome2; // O resultado : "Jos da Silva"
var text_extenso="o valor dessa varivel precisou ter uma " +
"quebra de linha do editor de textos.";
IMPORTANTE:
Nas declaraes de strings as quebras de linha do editor de texto precisam ser concatenadas conforme o exemplo acima.
Se quisssemos quebra de linha ou tabulao no valor da varivel string, usaramos caracteres especiais tais como \n
ou \t.
Exemplo:
texto_com_quebras = "Essa varivel tem uma quebra \n de linha !";
2.2.2.3 - Operadores Matemticos
Os operadores matemticos so: +, -, *, /, %, ++ e -Exemplo:
V01=5;
V02=2;
Adio: +
V=V01+V02; // resulta em: 7
Subtrao: V=V01-V02; // resulta em: 3
Multiplicao: *
V=V01*V02; // resulta em: 10
Diviso: /
V=V01/V02; // resulta em: 2.5
Mdulo da diviso (resto da diviso): %
V=V01%V02; // resulta em: 1 (pois 5/2 tem como resto 1)
Exemplo 2.2.2.3.1:
<HTML>
<HEAD>
<TITLE>Operadores matemticos</TITLE>
</HEAD>
<BODY>
_________________________________________________________________
JAVASCRIPT PRIMEIRO SEMESTRE 2002 Prof. Jairo jairo@uninove.br

Operadores matemticos:<BR>
<SCRIPT language="JavaScript">
<!-- esconde
V01=5;
V02=2;
document.write("V01=" + V01 + "<BR>");
document.write("V02=" + V02 + "<BR>");
V=V01+V02;
document.write("adio V01+V02: " + V + "<BR>"); // V=7
V=V01-V02;
document.write("subtrao V01-V02: " + V + "<BR>"); // V=3
V=V01*V02;
document.write("multiplicao V01*V02: " + V + "<BR>"); // V=10
V=V01/V02;
document.write("diviso V01/V02: " + V + "<BR>"); // V=2.5
V=V01%V02;
document.write("mdulo da diviso V01%V02: " + V + "<BR>"); // V=1
// -->
</SCRIPT>
</BODY>
</HTML>
Exemplo de Incremento: ++
V01 = 5;
Pode acontecer de duas formas: ++Varivel ou Varivel++
V03 = ++V01; // Resulta em 6
V04 = V01; // Resulta em 6
V01 = 5;
V03 = V01++; // Resulta em 5
V04 = V01; // Resulta em 6
Exemplo de Decremento: -Pode acontecer de duas formas: --Varivel ou Varivel-V01 = 5;
V02 = --V01; // Resulta em 4
V03 = V01; // Resulta em 4
V01 = 5;
V02 = V01--; // Resulta em 5
V03 = V01; // Resulta em 4
Exemplo 2.2.2.3.2:
<HTML>
<HEAD>
<TITLE>Incremento e decremento</TITLE>
</HEAD>
<BODY>
<SCRIPT language="JavaScript">
<!-- esconde
document.write("Incremento ++<BR>");
V01=5;
V02=2;
document.write("VO1=" + V01 + "<BR>");
document.write("VO2=" + V02 + "<BR>");
V03=++V01;
document.write("V03=++V01: VO3=" + V03 + "<BR>"); // V03=6
V04=V01;
document.write("V04=V01: VO4=" + V04 + "<BR>"); // V04=6
V03=V02++;
_________________________________________________________________
JAVASCRIPT PRIMEIRO SEMESTRE 2002 Prof. Jairo jairo@uninove.br

10

document.write("V03=V02++: VO3=" + V03 + "<BR>"); // V03=2


V04=V02;
document.write("V04=V02: VO4=" + V04 + "<BR>"); // V04=3
document.write("Decremento --<BR>");
V01=5;
V02=2;
document.write("VO1=" + V01 + "<BR>");
document.write("VO2=" + V02 + "<BR>");
V03=--V01;
document.write("V03=--V01: VO3=" + V03 + "<BR>"); // V03=4
V04=V01;
document.write("V04=V01: VO4=" + V04 + "<BR>"); // V03=4
V03=V02--;
document.write("V03=V02--: VO3=" + V03 + "<BR>"); // V03=2
V04=V02;
document.write("V04=V02: VO4=" + V04 + "<BR>"); // V03=1
// -->
</SCRIPT>
</BODY>
</HTML>
2.2.2.4 - Operadores relacionais
Os operadores relacionais so: <, >, ==, !=, >= e <=
Menor que:
Maior que:
Igual:
Diferente:
Maior ou igual:
Menor ou igual:

<
>
==
!=
>=
<=

2.2.2.5 - Operadores lgicos


Os operadores lgicos so &&, || e !
E lgico:
Ou lgico:
No lgico

&&
||
!

Exemplo 2.2.2.5.1
<HTML>
<HEAD>
<TITLE>window.prompt</TITLE>
</HEAD>
<BODY>
<SCRIPT language="javascript">
<!-- esconde
idade = prompt ("Quantos anos vc tem ?", "12");
if (idade != null){
if(idade.length == 0 || idade == " " || idade == " "){
document.write("<H1>STRING VAZIA</H1>");
}
else
alert ("Voc tem " + idade + " anos.");
}
else{
document.write("<H1>CANCELADO</H1>");
}
// -->
</SCRIPT>
</BODY>
_________________________________________________________________
JAVASCRIPT PRIMEIRO SEMESTRE 2002 Prof. Jairo jairo@uninove.br

11

</HTML>
Exemplo 2.2.2.5.2:
<HTML>
<HEAD>
<TITLE>Exemplo de funo com operadores</TITLE>
<SCRIPT language="JavaScript">
<!-- esconde
function Maior_Valor(i,j){
if (i>j)
return i;
else
return j;
}
// -->
</SCRIPT>
</HEAD>
<BODY>
<SCRIPT language="JavaScript">
<!-- esconde
var i = 1;
var j = 2;
document.writeln ("O maior valor entre " + i + " e " + j + " " + Maior_Valor(i,j));
// -->
</SCRIPT>
</BODY>
</HTML>
Ir retornar:
O maior valor entre 1 e 2 2
2.2.2.6 - Operadores de atribuio
Os operadores de atribuio so: =, +=, -=, *=, /= e %=
Atribuir um valor a uma varivel:
Soma ou concatenao e atribuio:
Subtrao e atribuio:
Multiplicao e atribuio:
Diviso e atribuio:
Mdulo e atribuio:

=
+= (x+=5 // o mesmo que: x=x+5)
-= (x-=5 // o mesmo que: x=x-5)
*= (x*=5 // o mesmo que: x=x*5)
/= (x/=5 // o mesmo que: x=x/5)
%= (x%=5 // o mesmo que: x=x%5)

Exemplo 2.2.2.6.1:
Determinao de 216 cores HTML.
<HTML>
<HEAD>
<TITLE>Cores HTML</TITLE>
</HEAD>
<BODY>
<CENTER><H3>216 cores HTML:</H3></CENTER><BR><BR>
<SCRIPT language="JavaScript">
<!-var hex3char="0369CF";
for (i=0; i<6; i++){
var backcol1="#"+hex3char.charAt(i)+hex3char.charAt(i);
var forecol1="#"+hex3char.charAt((i+4)%6)+hex3char.charAt((i+4)%6);
document.write("<TABLE WIDTH=\"99%\">");
for (j=0; j<6; j++){
var backcol2=backcol1+hex3char.charAt(j)+hex3char.charAt(j);
var forecol2=forecol1+hex3char.charAt((j+4)%6)+hex3char.charAt((j+4)%6);
document.write("<TR>");
for (k=0; k<6; k++){
var backcol3=backcol2+hex3char.charAt(k)+hex3char.charAt(k);
_________________________________________________________________
JAVASCRIPT PRIMEIRO SEMESTRE 2002 Prof. Jairo jairo@uninove.br

12

var forecol3=forecol2+hex3char.charAt((k+4)%6)+hex3char.charAt((k+4)%6);
document.write("<TD WIDTH=\"16%\" BGCOLOR=\"",backcol3,"\"><P
ALIGN=\"center\"><
FONT COLOR=\"",forecol3,"\">",backcol3,"</FONT></P></TD>");
}
document.write("</TR>");
}
document.write("</TABLE>");
}
//-->
</SCRIPT>
</BODY>
</HTML>
NOTA1:
Toda a estrutura da determinao das cores HTML est baseada na funo "charAt()", que determina um caracter em
detrminada posio da string.
NOTA2:
Convm notar que o operador "%" obtm o resto da diviso, por exemplo 6%4=2 e 4%6=4.
2.2.3 - Funes
Funo um elemento de programao que permite a criao de cdigo estruturado, muito mais limpo e fcil de ser
analisado. Em JavaScript as funes so flexveis assim como as variveis: uma funo pode retornar ou no valores,
sem modificar sua declarao. Funes so os blocos fundamentais de construo em muitos programas JavaScript.
A sintaxe bsica a seguinte:
function <nome da funo> (<lista de parmetros>) {
<lista de comandos>
}
Exemplo 2.2.3.1:
<HTML>
<HEAD>
<TITLE>Funo</TITLE>
<SCRIPT language="JavaScript">
<!-- Escondendo dos browsers velhos
function boldblink(message){
document.write("<BLINK><STRONG>" + message + "</STRONG></BLINK>");
}
// -->
</SCRIPT>
</HEAD>
<BODY>
<SCRIPT language="JavaScript">
<!-- escondendo
message="<font color=\"#FF0000\">blink: texto piscando no Netscape</font>\n";
boldblink(message);
// -->
</SCRIPT>
</BODY>
</HTML>
NOTA 1:
Para carregar a cor na varivel 'message' foi necessrio uma barra invertida '\' antes das aspas duplas, isso para que no
houvesse confuso com as aspas duplas do final da string.
NOTA 2:
A tag <BLINK> no interpretada pelo Internet Explorer.
Exemplo 2.2.3.2:
_________________________________________________________________
JAVASCRIPT PRIMEIRO SEMESTRE 2002 Prof. Jairo jairo@uninove.br

13

Algumas funes podem retornar um valor expresso que a chamou. A funo abaixo aceita dois argumentos, x e y e
retorna o resultado de x elevado potncia y.
<HTML>
<HEAD>
<TITLE>function</TITLE>
<SCRIPT language="JavaScript">
<!-- esconde
function raiseP(x,y){
total=1;
for (j=0; j<y; j++){
total*=x;
}
return total; // resultado de x elevado potncia y
}
// -->
</SCRIPT>
</HEAD>
<BODY>
<SCRIPT language="JavaScript">
<!-- esconde
X = 3;
Y = 4;
document.writeln(raiseP(X,Y)); // retorna 81
// -->
</SCRIPT>
</BODY>
</HTML>
NOTA:
Funes que retornam um resultado podem ser chamadas de dentro de uma expresso:
Exemplos:
total=raiseP(2,8);
if (raiseP(tax,2)<100) total = 500;
Exemplo 2.2.3.3:
"Refresh" JavaScript 1,55 segundos (1550 milisegundos) aps acessar a pgina onde est a funo reDirect:
<SCRIPT language="JavaScript">
<!-- esconde
function reDirect(){
setTimeout("location.href='outra_hp.html';",1550);
}
// -->
</SCRIPT>
2.2.4 - Objetos
Um objeto um elemento que possui um conjunto de caractersticas e mtodos prprios, com os quais se pode interagir.
Um boto um objeto que tem uma forma e sobre o qual se pode executar certas aes pr-definidas. JavaScript no
possui realmente uma estrutura para criar novos objetos, porm tem a capacidade de interagir com os objetos do
navegador.
A hierarquia dos principais objetos JavaScript a seguinte :

_________________________________________________________________
JAVASCRIPT PRIMEIRO SEMESTRE 2002 Prof. Jairo jairo@uninove.br

14

window
|
|________________________________________________________
|
|
|
|
|
|
parent
top
self
frames
Location
|______________|_____________|______________|________History
|
|
Document _____________________________________________________________________|
|
|
|
|
|
|
Link
Forms
Anchor
|
|________________________________________________________
|
|
|
|
|
|
|
|
Text
|
Reset |
Submit |
CheckBox
|
Password
Button
Select
Radio

Por conveno, para se acessar um objeto deveria-se indicar todo o "caminho" percorrido nesta hierarquia. Por exemplo,
para se acessar um formulrio chamado form1, deveria-se indicar window.document.form1. Porm, na prtica utiliza-se
somente document.form1, j que se supem que estamos dentro do window corrente. Utilizar o caminho completo s
necessrio quando se constri scripts que tratam de vrias janelas ao mesmo tempo.
De todos eles, vamos nos deter mais nos objeto window e document, por serem os mais importantes.
2.2.4.1 - Objeto window
Esse objeto representa a janela do navegador, e portanto permite uma interao entre o script e o ambiente no qual ele
est funcionando. So sinnimos 'window' e 'self' quando se trata da janela corrente, e 'parent' indica a janela mais alta
em um FRAMESET. Pode-se tambm enfatizar a janela atual utilizando a palavra chave 'this.'.
A.window.document - documento HTML exibido atualmente pela janela: permite alterar as propriedades do documento.
B.window.name - atribui um nome janela atual. Por exemplo, o cdigo window.name="win" atribui janela corrente o
nome 'win'.
IMPORTANTE:
O nome atribudo janela s vale para o script JavaScript, pois para HTML continua valendo o nome definido no
atributo NAME do FRAME HTML.
C.window.location - URL do documento atual. Para ir para outra URL basta escrever window.location="URL". Pode-se
utilizar tambm a funo location.replace("URL").
Exemplo 2.2.4.1.1:
<HTML>
<HEAD>
<TITLE>window.location</TITLE>
<SCRIPT language="JavaScript">
<!-- esconde
function troca(){
window.location = "http://www.if.usp.br";
}
// -->
</SCRIPT>
</HEAD>
<BODY>
<A HREF="page10.html" onMouseOver="troca( )">Ponha a seta do mouse aqui</A>
</BODY>
</HTML>

_________________________________________________________________
JAVASCRIPT PRIMEIRO SEMESTRE 2002 Prof. Jairo jairo@uninove.br

15

D.window.frames - matriz de todos os frames da janela. Esta propriedade muito til quando se deseja que um script
carregado em um FRAME altere documentos em outros frames. Considera-se que a janela que contm o
FRAMESET a janela 'parent'. Cada FRAME de um FRAMESET pode ser referenciado por seu ndice na matriz,
que depende de sua posio no FRAMESET (parent.frames[0], por exemplo, indica o primeiro FRAME definido
em um FRAMESET), ou por seu nome (parent.main indica o FRAME chamado de main no FRAMESET).
Exemplo 2.2.4.1.2:
index.html
<HTML>
<HEAD>
<TITLE>window.frames</TITLE>
</HEAD>
<FRAMESET ROWS = "50%, *">
<FRAME NAME="main" src="main.html">
<FRAME NAME="sub" src="sub.html">
</FRAMESET>
</HTML>
main.html
<HTML>
<HEAD>
<TITLE>main.html</TITLE>
<SCRIPT language="JavaScript">
<!-- esconde
function troca() {
parent.sub.document.location ="sub1.html";
}
// -->
</SCRIPT>
</HEAD>
<BODY>
<A HREF="#" onMouseOver ="troca( )">Ponha a seta do mouse aqui</A>
</BODY>
</HTML>
NOTA 1:
pode-se acessar o frame 'main' utilizando parent.frames[0] ou parent.main, e o frame 'sub' utilizando parent.frames[1]
ou parent.sub.
sub.html
<HTML>
<HEAD>
<TITLE>sub.html</TITLE>
</HEAD>
<BODY>
Voc est no sub.
</BODY>
</HTML>
sub1.html
<HTML>
<HEAD>
<TITLE>sub1.html</TITLE>
</HEAD>
<BODY>
Agora, voc est no sub 1.
</BODY>
</HTML>
NOTA 2:
No exemplo acima, o script localizado no frame 'main' altera o arquivo do frame 'sub'. muito til esta propriedade,
pois torna possvel criar um frame contendo um script que ir comandar o comportamento dos outros frames,
_________________________________________________________________
JAVASCRIPT PRIMEIRO SEMESTRE 2002 Prof. Jairo jairo@uninove.br

16

permitindo assim a criao de scripts mais complexos e interessantes. Este exemplo funciona com o Netscape 3 mas no
com o Internet Explorer 3.
E.window.status - coloca ou retorna uma mensagem na barra de status do navegador.
(exemplo 2.1.4.5)
F.window.open (URL, nome, caractersticas) - Abre uma nova janela, que recebe o nome passado pelo segundo
argumento, carrega o documento especificado em URL e possui as caractersticas descritas, que podem ser:
toolbar (barra de ferramentas) = yes/no
location(localizao) = yes/no
directories (diretrios) = yes/no
status (barra de status) = yes/no
menubar (barra de menu = yes/no
scrollbars (barra de rolagem) = yes/no
resizable (redimensionabilidade) = yes/no
width (largura) = n (pixels)
height (altura) = m (pixels)
Exemplo 2.2.4.1.3:
<HTML>
<HEAD>
<TITLE>window.open</TITLE>
<SCRIPT language="JavaScript">
<!-- esconde
function openwinsize(URL, windowname) {
window.open(URL,windowname,"toolbar=no,location=no,directories=no,status=no,menubar=no," +
"scrollbars=no,resizable=no,width=400,height=300");
}
// -->
</SCRIPT>
</HEAD>
<BODY>
<A HREF="#" onClick="openwinsize('doc.html', 'nova_janela');">Clique para abrir uma nova janela</A>
</BODY>
</HTML>
Uma variao do exemplo acima o caso abrir vrias novas janelas (contra a vontade do cliente HTTP, evidentemente):
<BODY>
Loop para abrir 10 novas janelas:
<SCRIPT language="JavaScript">
<!-- esconde
for(i=0; i<=10; i++){
nova_janela = "janela" + i;
openwinsize('doc.html',nova_janela);
}
// -->
</SCRIPT>
</BODY>
NOTA 1:
Caso alguma destas caractersticas no sejam explicitadas, o navegador utilizar um valor padro. O exemplo acima cria
uma janela chamada de "nova janela", carrega o documento doc.html (exemplo 2.2.4.1.5) e no possui nenhuma barra,
no pode ser redimensionada e possui 400 por 300 pixels.
NOTA 2:
No Internet Explorer 3 no funciona 'resizable=no', ou seja, a nova janela ser sempre redimensionvel.
Exemplo 2.2.4.1.4:
Outra variao usar window.open e, atravs do JavaScript, escrever o contedo do documento HTML na nova janela:
<HTML>
_________________________________________________________________
JAVASCRIPT PRIMEIRO SEMESTRE 2002 Prof. Jairo jairo@uninove.br

17

<HEAD>
<TITLE>window.open</TITLE>
<SCRIPT language="JavaScript">
<!-function WinOpen() {
msg=window.open("","UmaNovaJanela","toolbar=yes,directories=yes,menubar=yes");
msg.document.write("<HTML>\n<HEAD>\n<TITLE>Nova Janela Browser</TITLE>\n</HEAD>\n");
msg.document.write("<BODY>\n");
msg.document.write("<CENTER><H1><B>NOVA JANELA</B></h1></CENTER>\n");
msg.document.write("</BODY>\n</HTML>");
}
// -->
</SCRIPT>
</HEAD>
<BODY>
<FORM>
<INPUT TYPE="button" NAME="button1" VALUE="Clique Aqui" OnClick="WinOpen()">
</FORM>
</BODY>
</HTML>
G.window.close() - fecha a janela atual, se tiver sido aberta pelo JavaScript.
Exemplo 2.2.4.1.5:
doc.html
<HTML>
<HEAD>
<TITLE>Window.close</TITLE>
</HEAD>
<BODY>
<FORM>
<INPUT TYPE="button" VALUE="Fechar" onClick="window.close()">
</FORM>
</BODY>
</HTML>
H.window.alert (String) - Mostra a string em uma caixa de alerta.
(exemplos: 2.1.4.2, 2.1.4.3, 2.1.4.4 e 2.2.2.5.1)
I.window.confirm (String) - Idntico ao anterior, exibindo tambm os botes Ok e Cancel: Ok retorna true e Cancel
retorna false. Para testarmos 'window.confirm', o documento 'doc.html' (exemplo 2.2.4.1.4) deve ser modificado
conforme o exemplo abaixo.
Exemplo 2.2.4.1.6:
<HTML>
<HEAD>
<TITLE>Window.confirm</TITLE>
<SCRIPT language="JavaScript">
<!-- esconde
function fechar (){
confirma = window.confirm("Deseja mesmo fechar a janela ?");
if (confirma) window.close();
}
// -->
</SCRIPT>
</HEAD>
<BODY>
<FORM>
<INPUT TYPE="button" VALUE="Fechar" onClick="fechar()">
</FORM>
</BODY>
_________________________________________________________________
JAVASCRIPT PRIMEIRO SEMESTRE 2002 Prof. Jairo jairo@uninove.br

18

</HTML>
J.window.prompt (String, Valor)- Exibe uma caixa de dilogo com uma frase representada por 'String' e um campo de
texto com um valor representado por 'Valor'. A caixa retorna o valor digitado no campo de texto caso o usurio
clique em Ok e retorna null caso contrrio (exemplo 2.2.2.5.1).
2.2.4.2 - Objeto document
Esse objeto representa o documento HMTL carregado no navegador. sem dvida o objeto mais importante do
JavaScript, pois atravs dele que o script tem acesso aos elementos da pgina. Assim como visto no objeto window,
todos os elementos de uma pgina podem ser referenciados a travs de uma matriz determinada. Entre eles, os mais
importantes so apresentados abaixo.
A.document.forms - matriz de todos os forms de um documento.
B.document.images - matriz de todas as imagens contidas em um documento. Assim como no objeto window, a posio
de um elemento em sua respectiva matriz depende de sua posio no documento. Cada elemento pode tambm ser
acessado por seu nome, designado pelo parmetro NAME. Por exemplo:
<HTML>
<HEAD>
<TITLE>document</TITLE>
</HEAD>
<BODY>
<IMG SRC="img1.gif" NAME="imagem1">
<FORM NAME="formulario">
<INPUT TYPE="buttom" VALUE="Enviar">
</FORM>
<IMG SRC="img2.gif">
</BODY>
</HTML>
A primeira imagem pode ser referenciada como document.images[0] ou document.imagem1, assim como o formulrio,
que pode ser referenciado por document.forms[0] ou document.formulario. Porm, a segunda imagem apenas pode ser
refernciada por document.images[1], uma vez que a esta no foi designado um nome.
Exemplo 2.2.4.2.1:
<HTML>
<HEAD>
<TITLE>Link animado</TITLE>
</HEAD>
<BODY>
Posicione a seta do mouse sobre o link:<BR>
<A HREF="page10.htm" onMouseOver="document.immagine.src='livb.gif';"
onMouseOut="document.immagine.src='liva.gif';">
<IMG SRC="liva.gif" NAME="immagine" BORDER="0" ALT="Retire a seta do mouse do link"></A>
</BODY>
</HTML>
NOTA:
Alguns browsers verso 3 reconhecem o atributo <IMG NAME> e outros no. Por exemplo, o Netscape 3 reconhece e
o Internet Explorer 3 no.
C.document.bgColor - permite modificar a cor de fundo do documento atual.
D.document.linkColor - permite modificar a cor definida para links.
E.document.vlinkColor - permite modificar a cor definida para links que j foram vistos.
F.document.title - permite modificar o ttulo do documento atual.
Exemplo 2.2.4.2.2:
<HTML>
<HEAD>
_________________________________________________________________
JAVASCRIPT PRIMEIRO SEMESTRE 2002 Prof. Jairo jairo@uninove.br

19

<TITLE>Algumas propriedades de document.</TITLE>


</HEAD>
<BODY BGCOLOR="#CCCCCC" LINK="#FF00FF">
<SCRIPT language="javascript">
<!-- esconde
function muda_tudo(){
document.bgColor = "#00FFAA";
alert("Ttulo: " + document.title + "\n Cor do link: " + document.linkColor);
document.linkColor = "#000000";
}
// -->
</SCRIPT>
<A HREF="javascript:void(0)" onClick="muda_tudo()">Clique aqui</A>
</BODY>
</HTML>
Ao se clicar no link os parametros cor de fundo da pgina e cor do link mudam.
G.document.clear() - funo que apaga um documento de uma janela. S funciona quando o script executa este
comando em um documento no qual ele no est contido (outro frame ou janela, ou arquivo externo).
Exemplo 2.2.4.2.3:
main2.html
<HTML>
<HEAD>
<TITLE>main2.html</TITLE>
<SCRIPT language="JavaScript">
<!-- esconde
function limpa() {
parent.sub2.document.clear();
}
// -->
</SCRIPT>
</HEAD>
<BODY>
<A HREF="#" onClick ="limpa()">Clique aqui</A>
</BODY>
</HTML>
sub2.html
<HTML>
<HEAD>
<TITLE>sub2.html</TITLE>
</HEAD>
<BODY>
Voc est no sub2.
</BODY>
</HTML>
frame2.html
<HTML>
<HEAD>
<TITLE>document.clear</TITLE>
</HEAD>
<FRAMESET ROWS="50%, *">
<FRAME NAME="main2" SRC="main2.html">
<FRAME NAME="sub2" SRC="sub2.html">
</FRAMESET>
</HTML>
NOTA:
_________________________________________________________________
JAVASCRIPT PRIMEIRO SEMESTRE 2002 Prof. Jairo jairo@uninove.br

20

No funciona com verso 3 de browser.


H.document.open() - funo que abre o 'stream' do documento, ou seja, "abre" o documento para escrita. O processo
anlogo ao processo de carregamento de um documento HTML na internet: o navegador se conecta ao servidor e
este abre um 'stream', escreve os dados contidos no documento requisitado e fecha o 'stream'. 'open()' deve ser
utilizado com write e close.
I.document.close() - funo que fecha o 'stream' aberto pela funo 'open()'.
J.document.write(String) - escreve a String dentro de um novo documento, cuja 'stream' foi previamente aberta.
K.document.writeln(String) - idntico ao anterior, inserindo uma quebra de linha no final.
Exemplo 2.2.4.2.4:
Aproveite o exemplo anterior e substitua main2.html por main3.html:
main3.html
<HTML>
<HEAD>
<TITLE>main3.html</TITLE>
<SCRIPT language="JavaScript">
<!-- esconde
function escreve() {
parent.sub2.document.open();
parent.sub2.document.write("<H1><B>Modifiquei o texto !!!</B></H1>");
parent.sub2.document.close();
}
// -->
</SCRIPT>
</HEAD>
<BODY>
<A HREF="#" onClick ="escreve()">Clique aqui</A>
</BODY>
</HTML>
NOTA1:
A substituio do texto em 'sub2' feita apenas dentro do navegador: o arquivo fsico sub2.html no modificado pelo
comando.
NOTA 2:
Surpreendentemente funciona tanto com o Netscape 3 quanto Internet Explorer 3.

2.2.4.3 - Objeto matemtico


Esse objeto permite efetuar vrias operaes matemticas. Pode ser dividido em trs partes: trigonomtrico,
exponenciao/logartmo e miscelnea.
Exemplo 2.2.4.3.1:
Trigonometria:
<HTML>
<HEAD>
<TITLE>Objeto Matemtico: trigonometria</TITLE>
</HEAD>
<BODY>
<SCRIPT LANGUAGE="JavaScript">
<!-document.write("TRIGONOMETRIA:<BR>");
x = 0.5;
document.write("x=",x,"<BR><BR>");
z = Math.sin(x); //seno
document.write("sin(x)=",z,"<BR>");
z = Math.cos(x); //cosseno
_________________________________________________________________
JAVASCRIPT PRIMEIRO SEMESTRE 2002 Prof. Jairo jairo@uninove.br

21

document.write("cos(x)=",z,"<BR>");
z = Math.tan(x); //tangente
document.write("tan(x)=",z,"<BR>");
z = Math.asin(x); //arco seno
document.write("asin(x)=",z,"<BR>");
z = Math.acos(x); //arco cosseno
document.write("acos(x)=",z,"<BR>");
z = Math.atan(x); //arco tangente
document.write("atan(x)=",z,"<BR>");
// -->
</SCRIPT>
</BODY>
</HTML>
Exemplo 2.2.4.3.2:
Exponenciao/logartmo:
<HTML>
<HEAD>
<TITLE>Objeto Matemtico: exponenciao/logartmo</TITLE>
</HEAD>
<BODY>
<SCRIPT LANGUAGE="JavaScript">
<!-document.write("EXPONENCIAO/LOGARTMO:<BR>");
x = 5;
y = 3;
document.write("x=",x," y=",y, "<BR><BR>");
z = Math.log(x);//logartmo natural
document.write("log(x)=",z,"<BR>");
z = Math.exp(x);//constante de Euler
document.write("exp(x)=",z,"<BR>");
z = Math.pow(x,y);//x elevado a y
document.write("pow(x,y)=",z,"<BR>");
z = Math.sqrt(x);//raiz quadrada
document.write("sqrt(x)=",z,"<BR>");
// -->
</SCRIPT>
</BODY>
</HTML>
Exemplo 2.2.4.3.3:
Miscelnea:
<HTML>
<HEAD>
<TITLE>Objeto Matemtico: miscelnea</TITLE>
</HEAD>
<BODY>
<SCRIPT LANGUAGE="JavaScript">
<!-document.write("MISCELNEA:<BR>");
x = 5.3;
y = 4;
document.write("x=",x," y=",y, "<BR><BR>");
z = Math.ceil(x);//menor inteiro, maior ou igual a x
document.write("ceil(x)=",z,"<BR>");
_________________________________________________________________
JAVASCRIPT PRIMEIRO SEMESTRE 2002 Prof. Jairo jairo@uninove.br

22

z = Math.floor(x);//maior inteiro, menor ou igual a x


document.write("floor(x)=",z,"<BR>");
z = Math.round(x);//arredonda para o inteiro mais prximo
document.write("round(x)=",z,"<BR>");
z = Math.max(x,y);//maior entre x e y
document.write("max(x,y)=",z,"<BR>");
z = Math.random();//produz nmero aleatrio entre 0 e 1
document.write("random()=",z,"<BR>");
// -->
</SCRIPT>
</BODY>
</HTML>
Exemplo 2.2.4.3.4:
Este um exemplo genrico que mostra, atravs do uso de funes matemticas, um texto se deslocando numa caixa de
texto:
<HTML>
<HEAD>
<TITLE>texto correndo na caixa</TITLE>
<SCRIPT language="JavaScript">
<!-var scrtxt="Aqui vai a mensagem correndo na caixa de texto. "+
"Observe que ela reinicia, poderia muito bem sortear outras mensagens...";
var lentxt=scrtxt.length;
var width=100;
var pos=1-width;
function scroll() {
pos++;
var scroller="";
if (pos==lentxt) {pos=1-width;}
if (pos<0) {
for (var i=1; i<=Math.abs(pos); i++){scroller=scroller+" ";}
scroller=scroller+scrtxt.substring(0,width-i+1);
}
else {
scroller=scroller+scrtxt.substring(pos,width+pos);
} document.formul.scroll_text.value = scroller; setTimeout("scroll()",150);
}
// -->
</SCRIPT>
</HEAD>
<BODY onLoad="scroll()">
Preste ateno no texto que aparece na caixa:<BR>
<FORM NAME="formul">
<INPUT TYPE="text" SIZE="60" NAME="scroll_text" VALUE="Iniciando">
</FORM>
</BODY>
</HTML>

_________________________________________________________________
JAVASCRIPT PRIMEIRO SEMESTRE 2002 Prof. Jairo jairo@uninove.br

23

2.3 - EVENTOS, APLICAES EM FORMULRIOS E DETECO DE BROWSERS

2.3.1 - Eventos
Em programao, eventos so aes que ocorrem durante a execuo de um programa e que podem ser captadas e
tratadas por este: cliques ou movimentos de mouse, abertura ou fechamento de uma janela ou modificao de um texto.
Linguagens mais antigas como Basic ou C ANSI no implementaram manipuladores de eventos pois, poca em que
foram criadas essas linguagens, os computadores funcionavam em modo texto exclusivamente e no havia necessidade
de se tratar eventos. Atualmente, como grande parte dos programas so feitos para ambientes de janelas (como MacOS,
Windows ou XWindows), as linguagens mais modernas orientadas a objeto como Visual Basic, Delphi ou Java possuem
mtodos intrnsecos para tratar destes eventos. JavaScript, que cria pequenas aplicaes grficas ligadas a um
documento HTML, implementou manipuladores de eventos especficos para o ambiente da Internet.
Manipulador de evento (event handler) um mecanismo que causa um script reagir a um evento. o 'event handler' que
especifica qual cdigo JavaScript deve ser executado. Eventos mais comuns:
Evento

Ocorre quando...

Manipulador

click
change
focus
blur
mouseover
mouseout
select
submit
resize
load
unload

clique num elemento de FORM ou LINK


muda valor de TEXT, TEXTAREA ou SELECT
elemento INPUT de FORM entra "em foco"
elemento INPUT de FORM sai de "foco"
mouse sobre link ou imagem
mouse sai do link ou imagem
selecionar elemento INPUT de FORM
submeter um FORM
redimensionar a janela do browser
pgina carregada na janela browser
usurio sai da pgina

onClick
onChange
onFocus
onBlur
onMouseOver
onMouseOut
onSelect
onSubmit
onResize
onLoad
onUnload

Os manipuladores de eventos devem ser inseridos dentro das tags, uma vez que eles tratam aes ocorridas sobre
objetos, tais como imagens, formularios, links, etc. A sintaxe bsica a seguinte:
<TAG MANIPULADOR="ao">
onde ao podem ser instrues em JavaScript chamadas a funes. Cada objeto tem um conjunto de eventos que ele
pode tratar.
2.3.1.1 - Eventos onLoad e onUnload
Esses eventos esto ligados ao navegador e ao documento.
A.onLoad - Deve ser inserido dentro das tags <BODY> e <FRAMESET> e acionado quando a pgina carregada.
Exemplo 2.3.1.1.1:
<HTML>
<HEAD>
<TITLE>onLoad</TITLE>
<SCRIPT language="JavaScript">
<!-- esconde
function pergunta() {
nome = prompt ("Qual o seu nome ?", "Seu nome");
document.writeln ("<H1>Benvindo, " + nome + "</H1><BR>");
// -->
}
</SCRIPT>
</HEAD>
<BODY onLoad="pergunta()">
</BODY>
</HMTL>

_________________________________________________________________
JAVASCRIPT PRIMEIRO SEMESTRE 2002 Prof. Jairo jairo@uninove.br

24

B.onUnload - Idntico ao anterior, porm executado quando o documento sai do navegador (caso a pgina seja mudada
ou a janela fechada).
Exemplo 2.3.1.1.2:
<HTML>
<HEAD>
<TITLE>onUnload</TITLE>
<SCRIPT language="JavaScript">
<!-- esconde
function despedida() {
alert ("At a prxima, volte sempre!!!");
}
// -->
</SCRIPT>
</HEAD>
<BODY onUnload="despedida()">
O "alert" aparece aps abandonar a pgina (ir para outro endereo, por exemplo).<BR>
</BODY>
</HMTL>
2.3.1.2 - Eventos onMouseOver, onMouseOut, onClick
Esses eventos esto ligados ao do mouse.
A.onMouseOver - manipulador acionado quando o ponteiro o mouse passa sobre um link ou sobre uma imagem.
B.onMouseOut - manipulador acionado quando o ponteiro do mouse sai de cima de um link ou de uma imagem.
Exemplo 2.3.1.2.1:
<A HREF="#" onMouseOver="window.status='Voc posicionou o mouse sobre o link'; return true;"
onMouseOut="window.status='Voc tirou o mouse do link'; return true;">Passe o mouse aqui</A>
C.onClick - este manipulador executado por cliques de mouse, e pode ser usado com botes, caixas de seleo, botes
de rdio, caixas e campos de texto, etc. muito til para se criar pseudo-links, que substituem ou melhoram a tag
<A HREF>. Por exemplo, o cdigo abaixo gera um falso link que aciona uma caixa de alerta:
Exemplo:
<A HREF="javascript:void(0)" onClick="window.alert('Este link falso!!!')">Clique Aqui</A>
NOTA 1:
Com a tag <A HREF> o valor javascript:void(0) pode ser utilizado quando se deseja que um clique no carregue uma
nova pgina no navegador.
NOTA 2:
O Internet Explorer 3 d erro quando se usa 'void(0)'.

2.3.1.3 - Eventos ligados a elementos de formulrio


Como os formulrios so uma parte importante do HTML, foram criados vrios manipuladores que permitem tratar
aes especficas sobre seus elementos.
A.onBlur: Manipulador acionado sempre que um objeto perde o foco, ou seja, quando se seleciona um outro objeto. Na
prtica, deve ser usado com campos de texto.
Exemplo:
<FORM>
<INPUT NAME="campo1" TYPE="text" SIZE="30" onBlur="alert('O campo1 saiu de foco')">
</FORM>
B.onFocus: Manipulador executado quando um objeto selecionado.
Exemplo:
_________________________________________________________________
JAVASCRIPT PRIMEIRO SEMESTRE 2002 Prof. Jairo jairo@uninove.br

25

<FORM>
<INPUT NAME="campo1" TYPE="text" SIZE="30" onFocus="alert('O campo1 foi selecionado')">
</FORM>
C.onChange: Manipulador parecido com onBlur, executado quando o objeto perde o foco e seu valor foi alterado.
Pode ser utilizado com caixas e campos de texto.
Exemplo:
<FORM>
<INPUT NAME="campo2" TYPE="text" SIZE="30" onChange="alert('O texto do campo2 foi modificado')">
</FORM>
D.onSelect: Manipulador acionado quando uma caixa de texto ou campo de texto selecionado. O efeito muito
parecido com o onFocus.
E.onReset: Manipulador de eventos acionado sempre que o boto RESET de um formulrio clicado. Deve ser inserido
dentro da tag <FORM>.
F.onSubmit: Idntico ao anterior, porm acionado quando o boto 'Submit' for clicado.
Exemplo 2.3.1.3.1:
<HTML>
<HEAD>
<TITLE>Eventos ligados formulrio</TITLE>
<SCRIPT language="JavaScript">
<!-- esconde
function Confirma (){
var conf = confirm ("Vc deseja mesmo apagar os dados ?");
if (conf) return true;
else return false;
}
// -->
</SCRIPT>
</HEAD>
<BODY>
<FORM NAME="formulario" onReset="return (Confirma())"
onSubmit="alert('Os seus dados foram enviados')">
Nome <INPUT NAME="nome" TYPE="text" SIZE="30"><BR>
Sobrenome <INPUT NAME="sobrenome" TYPE="text" SIZE="30"><BR>
Sexo<BR>
<INPUT TYPE="radio" VALUE="M" NAME="sexo" CHECKED="1">M
<INPUT TYPE="radio" VALUE="F" NAME="Sexo" >F<BR>
<BR>
<INPUT NAME="name" TYPE="reset" VALUE="Reset">
<INPUT NAME="name" TYPE="submit" VALUE="Submit">
</FORM>
</BODY>
</HTML>
NOTA:
onReset no funciona com Internet Explorer 3.
Exemplo 2.3.1.3.2:
Este exemplo mostra como deixar uma determinada caixa de texto selecionada para escrita.
<HTML>
<HEAD>
<TITLE>Pointer</TITLE>
<SCRIPT language="JavaScript">
<!-- esconde
function Pointer(){
document.formulario.mensagem2.focus();
}
_________________________________________________________________
JAVASCRIPT PRIMEIRO SEMESTRE 2002 Prof. Jairo jairo@uninove.br

26

// -->
</SCRIPT>
</HEAD>
<BODY onLoad="Pointer()">
Repare no cursor j apontado para a segunda caixa de texto:<BR>
<FORM METHOD="post" NAME="formulario">
<INPUT NAME="mensagem1" TYPE="text" SIZE="40" MAXLENGTH="350">
<BR>
<INPUT NAME="mensagem2" TYPE="text" SIZE="40" MAXLENGTH="350">
<BR>
<INPUT TYPE="submit" VALUE="Enviar">
</FORM>
</BODY>
</HTML>
2.3.2 - Aplicaes em formulrios
Provavelmente o caso JavaScript mais interessante e mais til seja seu emprego nos formulrios HTML por uma razo
bem simples: imagine o caso de um usurio que estivesse tentando se cadastrar em alguma base de dados, e, aps
preencher e enviar um formulrio extenso receber como resposta do servidor web que algum campo foi esquecido ou
estava incorreto.
Isto significa que o usurio ter que preencher tudo de novo, e dependendo da pressa (e da pacincia), muito
provavelmente o usurio desiste e procura um site realmente funcional.
Esta situao poderia ser evitada caso fossem includas verificaes JavaScript nos campos obrigatrios do formulrio,
de modo que quando o usurio o enviasse no haveria porque ser recusado o hipottico cadastro.
Atravs de alguns exemplos veremos que esta verificao JavaScript no to complexa assim e que mais importante
nas caixas de texto, pois so mais suscetveis de erros no preenchimento.
Exemplo 2.3.2.1:
Este exemplo na verdade no um formulrio, mas tem por inteno familiarizar o uso da tag FORM com JavaScript.
O exemplo mostra uma aplicao de mudana de cor de fundo de documento FRAME usando duas maneiras: botes
(button) e caixa de seleo (select).
frame.html
<HTML>
<HEAD>
<TITLE>Frame.html</TITLE>
</HEAD>
<FRAMESET COLS="*,40%">
<FRAMESET ROWS="50%,*">
<FRAME SRC="frame_1.html" NAME="frame1" NORESIZE>
<FRAME SRC="frame_2.html" NAME="frame2" NORESIZE>
</FRAMESET>
<FRAME SRC="frame_3.html" NAME="frame3" NORESIZE>
</FRAMESET>
</HTML>
frame_1.html
<HTML>
<HEAD>
<TITLE>frame_1.html</TITLE>
</HEAD>
<BODY BGCOLOR="#ffffff">
<CENTER>
<H1>Este o frame #1</H1>
</CENTER>
</BODY>
</HTML>
frame_2.html
<HTML>
<HEAD>
_________________________________________________________________
JAVASCRIPT PRIMEIRO SEMESTRE 2002 Prof. Jairo jairo@uninove.br

27

<TITLE>frame_2.html</TITLE>
</HEAD>
<BODY BGCOLOR="#ffffff">
<H1>Este o frame #2</H1>
</BODY>
</HTML>
frame_3.html
<HTML>
<HEAD>
<TITLE>frame_3.html</TITLE>
</HEAD>
<BODY BGCOLOR="#ffffff">
<CENTER>
<H1>Este o frame #3</H1>
<P>
<FORM NAME="buttons">
<INPUT TYPE="button" VALUE="Red" onClick="parent.frame2.document.bgColor='red'">
<INPUT TYPE="button" VALUE="Blue" onClick="parent.frame2.document.bgColor='blue'">
<INPUT TYPE="button" VALUE="Green" onClick="parent.frame2.document.bgColor='green'">
<INPUT TYPE="button" VALUE="Orange" onClick="parent.frame2.document.bgColor='orange'">
</FORM>
<BR><BR>
<FORM METHOD="post" NAME="caixa_select">
<SELECT SIZE=1 NAME="selecionando"
onChange="parent.frame2.document.bgColor=options[selectedIndex].value;
document.bgColor=options[selectedIndex].value">
<OPTION VALUE="red">Red</OPTION>
<OPTION VALUE="blue">Blue</OPTION>
<OPTION VALUE="green">Green</OPTION>
<OPTION VALUE="cyan">Cyan</OPTION>
</SELECT>
</FORM>
</CENTER>
</BODY>
</HTML>
NOTA:
Repare que no caso 'button' o manipulador de eventos 'onClick' e no 'select' 'onChange', e ambos fazem basicamente
a mesma coisa.
Exemplo 2.3.2.2:
Neste exemplo temos um caso de redirecionamento de pgina usando uma caixa de lista suspensa, usando o
manipulador de eventos 'onChange'.
<HTML>
<HEAD>
<TITLE>Seleo de pgina</TITLE>
</HEAD>
<BODY>
<FORM NAME="menu1">
<SMALL>Escolha o site favorito:</SMALL><BR>
<SELECT NAME="site" onChange="window.location.href=options[selectedIndex].value">
<OPTION VALUE="http://www.dominio.com.br">www.dominio.com.br
<OPTION VALUE="http://www.uol.com.br">www.uol.com.br
<OPTION VALUE="http://www.if.usp.br">www.if.usp.br
<OPTION VALUE="http://www.uninove.br">www.uninove.br
<OPTION VALUE="http://www.terra.com.br">www.terra.com.br
</SELECT>
<BR><BR>
<SMALL>Se o site no estiver na lista acima, escreva o endereo completo:</SMALL><BR>
<INPUT TYPE="text" SIZE="45" VALUE="http://www.dominio.com.br">
_________________________________________________________________
JAVASCRIPT PRIMEIRO SEMESTRE 2002 Prof. Jairo jairo@uninove.br

28

<INPUT TYPE="button" VALUE=" Ir " onClick="window.location.href=this.form.elements[1].value">


</FORM>
</BODY>
</HTML>
Exemplo 2.3.2.3:
Validao de formulrio (Validao JavaScript).
<HTML>
<HEAD>
<TITLE>Form validator</TITLE>
<SCRIPT language="JavaScript">
<! -- esconde
function Form_Validator()
{
var texto, msg, erro;
msg = 'A informao no est completa.\n';
erro = false;
//nome
texto = document.verifica.nome.value;
if (texto.length == 0){
msg+='\n- O NOME no foi preenchido';
erro = true;
}
//endereo
texto = document.verifica.endereco.value;
if (texto.length == 0){
msg+='\n- O ENDEREO no foi preenchido';
erro = true;
}
//cpf
texto = document.verifica.cpf.value;
if (texto.length == 0){
msg+='\n- O CPF no foi preenchido';
erro = true;
}
else{
if(texto.length < 11){
msg+='\n- O campo CPF necessita de 11 caracteres numricos';
erro = true;
}
else{
var checkOK = "0123456789";
var checkStr = texto;
var allValid = true;
for (i = 0; i < checkStr.length; i++){
ch = checkStr.charAt(i); // charAt(): funo mtodos para strings
for (j = 0; j < checkOK.length; j++)
if (ch == checkOK.charAt(j))
break;
if (j == checkOK.length){
allValid = false;
break;
}
}
if (!allValid){
msg+='\n- O campo CPF pode conter apenas caracteres numricos.';
_________________________________________________________________
JAVASCRIPT PRIMEIRO SEMESTRE 2002 Prof. Jairo jairo@uninove.br

29

erro =true;
}
}
}
if (erro) alert(msg);
return !(erro);
}
// -->
</SCRIPT>
</HEAD>
<BODY>
Preencha os campos abaixo:<BR>
<FORM NAME="verifica" ACTION="verifica.cgi" METHOD="POST"
onSubmit="return Form_Validator();">
Nome:<BR>
<INPUT TYPE="text" SIZE="25" MAXLENGTH="40" NAME="nome"><BR>
Endereo:<BR>
<INPUT TYPE="text" SIZE="25" MAXLENGTH="60"
NAME="endereco"><BR>
CPF:<BR>
<INPUT TYPE="text" SIZE="11" MAXLENGTH="11" NAME="cpf"><BR><BR>
<INPUT TYPE="submit" VALUE="Enviar">
</FORM>
</BODY>
</HTML>
NOTA:
A validao JavaScript tem como nica inteno facilitar a vida do usurio, impedindo que ele envie dados incorretos e
depois receba uma mensagem de erro. No conte com JavaScript para filtragem de dados, pois essa validao ocorre no
browser do cliente, que pode muito bem desabilit-la se assim o desejar.
2.3.3 - Deteco de browser
Sabemos que JavaScript extremamente dependente do browser e da verso do browser, ento se quisermos oferecer
recursos que apenas um determinado browser suporta, precisamos antes determinar que browser o cliente HTTP est
usando, em seguida poderemos redirecion-lo para uma pgina especfica.
Exemplo 2.3.3.1:
<HTML>
<HEAD>
<TITLE>Navegador</TITLE>
</HEAD>
<BODY BGCOLOR="#000000" TEXT="#FFFFFF">
<CENTER>
<H3>Browser:</H3><BR>
<SCRIPT language="javascript">
<!-- esconde
document.writeln('Voc est navegando num <FONT COLOR=\"#FFFF00\">' +
navigator.appName + ' </FONT>para ler essa pgina.');
// -->
</SCRIPT>
</BODY>
</HTML>
Exemplo 2.3.3.2:
Neste exemplo, o cliente redirecionado para uma pgina especfica, baseado no tipo e verso do browser.
<HTML>
<HEAD>
<TITLE>Deteco de Browser</TITLE>
</HEAD>
<BODY>
_________________________________________________________________
JAVASCRIPT PRIMEIRO SEMESTRE 2002 Prof. Jairo jairo@uninove.br

30

<SCRIPT language="JavaScript">
<!-- esconde
browsername=navigator.appName;
if (browsername.indexOf("Netscape")!=-1){browsername="NS";}
else{
if (browsername.indexOf("Microsoft")!=-1){browsername="MSIE";}
else {browsername="N/A";}
}
//detecta the a verso do browser
browserversion=0;
if (navigator.appVersion.indexOf("2.")!=-1) {browserversion=2;}
if (navigator.appVersion.indexOf("3.")!=-1) {browserversion=3;}
if (navigator.appVersion.indexOf("4.")!=-1) {browserversion=4;}
if (navigator.appVersion.indexOf("5.")!=-1) {browserversion=5;}
//redireciona o usurio
if (browsername=="NS") {//Netscape
if(browserversion >= 4){window.location="page_NS1.html";}
else{window.location="page_NS2.html";}
}
if (browsername=="MSIE") {//Internet Explorer
if(browserversion >= 4){window.location="page_IE1.html";}
else{window.location="page_IE2.html";}
}
if (browsername=="N/A") {//desconhecido
if(browserversion >= 4){window.location="page_N_A1.html";}
else{window.location="page_N_A2.html";}
}
// -->
</SCRIPT>
</BODY>
</HTML>
Exemplo 2.3.3.3:
<HTML>
<HEAD>
<TITLE>Deteco do Browser</TITLE>
<SCRIPT language="JavaScript">
<!-- esconde
function detectbrowser(){
browsername=navigator.appName;
if(browsername.indexOf("Netscape")!=-1){browsername="NETSCAPE";}
else{
if(browsername.indexOf("Microsoft")!=-1) {
browsername="MS INTERNET EXPLORER";
}
else {browsername="DESCONHECIDO";}
}
document.detectform.T0.value=browsername;
document.detectform.T1.value=navigator.appCodeName;
document.detectform.T2.value=navigator.appName;
document.detectform.T3.value=navigator.appVersion;
document.detectform.T4.value=navigator.userAgent;
document.detectform.T5.value=navigator.platform;
}
// -->
</SCRIPT>
</HEAD>
<BODY BGCOLOR="#FFFF00" TEXT="#000000" onLoad="detectbrowser()">
_________________________________________________________________
JAVASCRIPT PRIMEIRO SEMESTRE 2002 Prof. Jairo jairo@uninove.br

31

<CENTER>
<B>O seu browser e sua plataforma so:</B><BR><BR>
<FORM NAME="detectform">
<TABLE BORDER="0" ALIGN="center" CELLPADDING="5" CELLSPACING="4">
<TR BGCOLOR="#AAAABB">
<TD><SMALL>
<FONT color="#000000"><B>navigator.appCodeName</B></FONT></SMALL></TD>
<TD><INPUT type="text" name="T0" size="60" readonly></TD>
</TR>
<TR BGCOLOR="#AAAABB">
<TD><SMALL>
<FONT color="#000000"><B>navigator.appCodeName</B></FONT></SMALL></TD>
<TD><INPUT type="text" name="T1" size="60" readonly></TD>
</TR>
<TR BGCOLOR="#AAAABB">
<TD><SMALL>
<FONT color="#000000"><B>navigator.appName</B></FONT></SMALL></TD>
<TD><INPUT type="text" name="T2" size="60" readonly></TD>
</TR>
<TR BGCOLOR="#AAAABB">
<TD><SMALL>
<FONT color="#000000"><B>navigator.appVersion</B></FONT></SMALL></TD>
<TD><INPUT type="text" name="T3" size="60" readonly></TD>
</TR>
<TR BGCOLOR="#AAAABB">
<TD><SMALL>
<FONT color="#000000"><B>navigator.userAgent</B></FONT></SMALL></TD>
<TD><INPUT type="text" name="T4" size="60" readonly></TD>
</TR>
<TR BGCOLOR="#AAAABB">
<TD><SMALL>
<FONT color="#000000"><B>navigator.platform</B></FONT></SMALL></TD>
<TD><INPUT type="text" name="T5" size="60" readonly></TD>
</TR>
</TABLE>
</FORM>
</BODY>
</HTML>
2.3.4 - Comentrios finais
Uma observao importante que existem muitas verses de JavaScript suportadas por certos browsers e verses de
browsers. Infelizmente, isto freqentemente leva a incompatibilidades e confuses.
Desde que a Netscape introduziu o JavaScript, JavaScript 1.0 foi a especificao de linguagem suportada pelo Netscape
Navigator 2.0. Subseqentemente, Navigator 3.0 suportou novos incrementos os quais compreendem JavaScript 1.1 e
Navigator 4.0 suportou JavaScript 1.2.
Em paralelo, a Microsoft tentou suportar JavaScript 1.0 no seu Internet Explorer 3.0. Conhecido como "Jscript", o
suporte inicial ao JavaScript oferecido pela Microsoft no foi confivel mas cheio de "bugs". Posteriormente o Internet
Explorer 4.0 incluiu suporte robusto ao JavaScript padronizado, o qual divide muito em comum com o JavaScript 1.2 da
Netscape, porm essas verses de JavaScript no so exatamente equivalentes.

_________________________________________________________________
JAVASCRIPT PRIMEIRO SEMESTRE 2002 Prof. Jairo jairo@uninove.br

32

2.4 - EXERCCIOS
2.4.1 - Escreva um documento HTML que, ao ser acessado apresente a mensagem "Ol, seja benvindo" e quando o
usurio sair da pgina (ir para outro endereo, atualizar, fechar a janela browser), apresentar a janelinha "alert" com a
mensagem "Obrigado, volte sempre", onde essa ltima mensagem dever estar aproximadamente no formato abaixo:
Obrigado,
volte
sempre
Ok
NO use uma funo externa, use a funo intrnseca apropriada.
2.4.2 - Escreva uma pgina HTML que liste na janela browser os nmeros de 1 a 100 e avise quando for mltiplo de 10,
na seguinte formatao:
linha 1
linha 2
linha 3
linha 4
linha 5
linha 6
linha 7
linha 8
linha 9
linha 10 mltiplo de 10 !
linha 11
linha 12
.
.
.
linha 19
linha 20 mltiplo de 10 !
linha 21
.
.
.
linha 98
linha 99
linha 100 mltiplo de 10 !
Obs: os pontinhos indicam que a numerao continua.
2.4.3 - Escreva um documento HTML que pergunte por dois nmeros e, uma vez recebidos, some esses nmeros e
apresente o resultado. No necessrio confirmar se realmente o usurio digitou um nmero e no qualquer string.
Sugesto: use o mtodo prompt() para perguntar pelos nmeros.
Obs: Lembre-se que a soma tem o mesmo operando que a concatenao de strings, e que essa tem precedncia sobre a
soma.
2.4.4. -.Escreva um documento HTML que apresente a cor de fundo vermelha e a seguinte mensagem alinhada direita
da janela browser:
"Posicione a seta do mouse sobre o link para mudar a cor de fundo".
Ao posicionar a seta sobre link a cor de fundo do documento muda para verde, ao retirar a seta do mouse a cor volta a
ser vermelha, ao clicar no link abre a janelinha "alert" com a mensagem "Muda a cor de fundo".
2.4.5. - Escreva um documento HTML que apresente centralizada a mensagem:
"Clique aqui para abrir uma nova janela browser".
Ao clicar no link "aqui", abre uma nova janela browser que apresenta apenas a barra de menus, a barra de status e
resoluo de 200x150 pixels.
_________________________________________________________________
JAVASCRIPT PRIMEIRO SEMESTRE 2002 Prof. Jairo jairo@uninove.br

33

2.5 - RESPOSTAS DOS EXERCCIOS


2.5.1 - Resposta do exerccio 2.4.1:
<HTML>
<HEAD>
<TITLE>page251.html</TITLE>
</HEAD>
<BODY onUnload="alert('obrigado, \n\t volte \n\t\t sempre')">
Ol, seja benvindo
</BODY>
</HTML>
2.5.2 - Resposta do exerccio 2.4.2:
<HTML>
<HEAD>
<TITLE>page252.html</TITLE>
</HEAD>
<BODY>
<SCRIPT language="JavaScript">
<!-- esconde
for(i=1;i<=100;i++){
document.write("<BR>linha " + i);
if(i%10==0)
document.write(" - mltiplo de 10 !");
}
// -->
</SCRIPT>
</BODY>
</HTML>
2.5.3 - Resposta do exerccio 2.4.3:
<HTML>
<HEAD>
<TITLE>page3.html</TITLE>
</HEAD>
<BODY>
<SCRIPT language="JavaScript">
<!-- esconde
V01 = prompt("Entre com V01:", "5");
V02 = prompt("Entre com V02:", "7");
V01 = V01/1; //garante que V01 seja tratado como nmero e no string
V02 = V02/1; //garante que V02 seja tratado como nmero e no string
V = V01 + V02;
document.write("V = " + V);
// -->
</SCRIPT>
</BODY>
</HTML>
2.5.4 - Resposta do exerccio 2.4.4:
<HTML>
<HEAD>
<TITLE>page254.html</TITLE>
</HEAD>
<BODY BGCOLOR="#FF0000">
<P ALIGN="right">
Posicione a seta do mouse sobre o
<A HREF="#" onMouseOver="document.bgColor='#00FF00'"
onMouseOut="document.bgColor='#FF0000'"
onClick="alert('Muda a cor de fundo')">link</A>
para mudar a cor de fundo
_________________________________________________________________
JAVASCRIPT PRIMEIRO SEMESTRE 2002 Prof. Jairo jairo@uninove.br

34

</P>
</BODY>
</HTML>
2.5.5 - Resposta do exerccio 2.4.5:
<HTML>
<HEAD>
<TITLE>page255.html</TITLE>
<SCRIPT language="JavaScript">
<!-function openwinsize(URL,x,y) {
window.open(URL,"windowname",
"toolbar=no,location=no,directories=no,status=yes,"+
"menubar=yes,scrollbars=no,resizable=no,width=x,height=y");
}
//-->
</SCRIPT>
</HEAD>
<BODY>
<CENTER>
Clique
<A HREF="#" onClick="openwinsize('page255.html',200,150);">aqui</A>
para abrir uma nova janela browser
</CENTER>
</BODY>
</HTML>

_________________________________________________________________
JAVASCRIPT PRIMEIRO SEMESTRE 2002 Prof. Jairo jairo@uninove.br

35