4.

A Linguagem JavaScript
!

!
!

A linguagem XHTML, por no ser uma linguagem de programao e sim uma

linguagem de marcao, no permite interao entre o usurio e a pgina,
alm de clicar em um link, fazendo com que o browser carregue uma nova
pgina.
O primeiro passo para superar esta limitao foi a utilizao de scripts CGI
(Common Gateway Interface), que recebem dados enviados de alguma forma
pelo usurio, processam os dados no servidor (server side) e retornam uma
resposta ao usurio, sob a forma de uma nova pgina. Este tipo de processo,
ainda muito utilizado hoje em dia, exige acesso a reas especficas do
servidor, como o diretrio CGI-BIN (onde os scripts so armazenados), o que
nem sempre possvel.
A linguagem JavaScript, criada em conjunto pela Sun e pela Netscape, surgiu
como uma linguagem que pudesse ser carregada junto com a pgina XHTML e
executada pelo prprio navegador do usurio.
Embora com sintaxes semelhantes, as linguagens JavaScript e Java so
diferentes. Java compila um programa-fonte em um programa executvel
independente. Por outro lado, um programa JavaScript, por ser carregado e
interpretado pelo navegador, tem sua execuo totalmente dependente do
browser. Java uma linguagem de programao orientada a objeto (POO),
dispondo de todos os mecanismos da POO: construo de classes, herana e
polimorfismo. JavaScript uma linguagem baseada em objetos, no podendo
ser considerada uma linguagem de POO pois no inclui o conceito de herana.

ELFS, 2003

102

A Linguagem JavaScript
!

Nesta aula estaremos tratando da construo de scripts dentro de pginas

XHTML, que o uso mais comum da linguagem JavaScript. Ou seja,
estaremos discutindo a utilizao da linguagem JavaScript pelo lado do cliente
(client-side programming). A incluso de cdigo para o servidor dentro de
pginas web (server-side programming) tratada em linguagens como JSP
(Java Server Pages).
JavaScript uma linguagem que diferencia letras maisculas de minsculas.
Palavras-chave e identificadores (por exemplo, nomes de funes e de
variveis) devem ser escritos obedecendo a esta regra. Por exemplo, a
palavra-chave function deve ser escrita exatamente dessa forma e no como
Function ou FUNCTION. A linguagem ignora espaos em branco entre
comandos. Assim:
document.write("uma linha");
document.write(" e outra...");
document.write("uma linha"); document.write(" e outra...");
document.write("uma linha");
document.write(" e outra...");

iro produzir exatamente o mesmo resultado. Espaos e linhas em branco

devem ser usados apenas para produzir cdigo mais compreensvel.
ELFS, 2003

103

A Linguagem JavaScript
!

A linguagem usa as mesmas construes usadas nas linguagens C e Java para

escrever comentrios:
// Este um comentrio de uma nica linha
/* Este
um comentrio que
se estende por vrias linhas */

Os identificadores devem ser construdos obedecendo as seguintes regras:

"
deve comear com uma letra, o smbolo de cifro ( $ ) ou o smbolo de
sublinhado ( _ );
"
deve conter somente caracteres alfa-numricos (alm do $ e do _ );
"
uma palavra reservada no pode ser usada como identificador;
"
deve-se evitar outras palavras como document ou window que j so
associadas a objetos manipulados pela linguagem.
As palavras reservadas da linguagem so as seguintes:

ELFS, 2003

break

case

continue

default

delete

do

else

export

for

function

if

import

in

new

return

switch

this

typeof

var

void

while

with
104

A Linguagem JavaScript
!

Em JavaScript no preciso declarar de que tipo ser uma varivel. O tipo de

uma varivel ser determinado pelo valor que a varivel contm. Exemplo:
var x;
x = 5;
alert("o valor da varivel "+x);
x = 'agora sou um string';

Nem mesmo a declarao de variveis com a

palavra reservada var necessria.

Neste caso, a funo alert() ir exibir uma caixa de dilogo que mostra "o
valor da varivel 5". At este ponto a varivel x do tipo inteiro (pois
armazena um valor inteiro). A nova atribuio faz com que a varivel x passe
a ser do tipo string. O parmetro da funo alert um string. Observe que a
converso do valor inteiro 5 para o string "5" (para que possa ser
concatenado ao string "o valor da varivel ") automtica. Observe que
strings podem ser delimitados por aspas ( " ) ou por apstrofos ( ' ).
Uma varivel pode armazenar tambm uma referncia a um objeto. Neste
caso, podemos acessar todas as propriedades e mtodos desse objeto a partir
da varivel. Exemplo:
var x = new Date();
alert(x.getTime());

Neste caso, podemos usar o mtodo getTime() porque a varivel x uma

referncia a um objeto Date.
ELFS, 2003

105

A Linguagem JavaScript
!

Arrays tambm so possveis em JavaScript. Por exemplo: a coleo de nomes

('Ana Cristina', 'Ana Lcia', 'Andr Luiz', 'Andresa', 'Cilmara') pode ser criada
da seguinte forma:
var aluno = new Array(5);
aluno[0] = 'Ana Cristina';
aluno[1] = 'Ana Lcia';
aluno[2] = 'Andr Luiz';
aluno[3] = 'Andresa';
aluno[4] = 'Cilmara';

Arrays podem ser facilmente estendidos em JavaScript. Exemplo:

var aluno = new Array(5);
aluno[0] = 'Ana Cristina';
aluno[1] = 'Ana Lcia';
aluno[2] = 'Andr Luiz';
aluno[3] = 'Andresa';
aluno[4] = 'Cilmara';
aluno[9] = 'Glasson';
document.write(aluno[3]+"<br>");
document.write(aluno[7]+"<br>");
document.write(aluno[9]+"<br>");

ELFS, 2003

Neste caso, o array foi declarado como tendo

cinco elementos (numerados de 0 a 4), mas ao
fazermos a atribuio aluno[9] = 'Glasson' o array
estendido automaticamente para 10
elementos (numerados de 0 a 9). O que acontece
com os elementos de ndices 5, 6, 7 e 8? Esses
elementos continuam indefinidos, pois a eles
no foram atribudos valor algum. Neste caso, os
mtodos document.write iro produzir:
Andresa
undefined
Glasson
106

A Linguagem JavaScript
!

JavaScript aceita arrays de vrias dimenses. Exemplo: a tabela de notas a

seguir pode ser escrita facilmente em JavaScript.
Ana Cristina

9.5

9.6

Ana Lcia

10.0

9.1

Andr Luiz

9.7

9.2

Andresa

9.8

8.7

Cilmara

8.9

10.0

Neste caso, o array tem 2 dimenses

(linhas e colunas). Note que o objeto
nota construdo em primeiro lugar em
relao s linhas ( new Array(5) ) e, em
seguida, cada uma das linhas
construda em relao s colunas ( new
Array(3) ). Isto deve ser feito qualquer
que seja o nmero de dimenses do
array.
JavaScript no aceita, por exemplo:
var nota = new Array(5, 3);

ELFS, 2003

var nota = new Array(5);

for (i = 0; i < 5; i++)
nota[i] = new Array(3);
// coluna de
nota[0][0] =
nota[1][0] =
nota[2][0] =
nota[3][0] =
nota[4][0] =

nomes
'Ana Cristina';
'Ana Lcia';
'Andr Luiz';
'Andresa';
'Cilmara';

// coluna da
nota[0][1] =
nota[1][1] =
nota[2][1] =
nota[3][1] =
nota[4][1] =

nota 1
'9.5';
'10.0';
'9.7';
'9.8';
'8.9';

// coluna da
nota[0][2] =
nota[1][2] =
nota[2][2] =
nota[3][2] =
nota[4][2] =

nota 2
'9.6';
'9.1';
'9.2';
'8.7';
'10.0';
107

A Linguagem JavaScript
!

possvel definir uma funo em qualquer ponto de um script, mas mais

fcil compreender um programa JavaScript se agruparmos todas as funes
no incio do script. Para declarar uma funo devemos usar a seguinte sintaxe:
function nome_da_funo( parmetro1, parmetro2, ... )
{
bloco_de_cdigo_a_ser_executado;
}

Uma varivel tem escopo global se for definida fora de qualquer funo. Neste
caso, a varivel pode ser usada em qualquer parte do programa, a partir do
ponto em que foi definida. Quando definimos uma varivel dentro de uma
funo, essa varivel ter escopo local, significando que poder ser usada
somente dentro dessa funo.
Para inserir um script JavaScript em uma pgina HTML, devemos utilizar um
dos seguintes tags:
<SCRIPT type="text/javascript">
Cdigo do script
</SCRIPT>

ou
<SCRIPT language="javascript">
Cdigo do script
</SCRIPT>
ELFS, 2003

108

A Linguagem JavaScript
!

O tag de script pode ser inserido dentro do cabealho (HEAD) ou dentro do

corpo (BODY) do documento. A diferena que dentro do HEAD, o script ser
carregado antes do resto do arquivo, enquanto que no corpo, ele ser
carregado medida que o documento carregado. Se o script define funes
deve-se colocar o script dentro do cabealho do documento.
aula04_01.htm
<HTML>
<HEAD>
<TITLE>Programao JavaScript</TITLE>
</HEAD>
<BODY>
<SCRIPT type="text/javascript">
document.write("<BR><FONT SIZE='+4' COLOR='blue'>"+
"Programao para a Internet"+"<HR>");
</SCRIPT>
</BODY>
</HTML>

A funo document.write(), quando interpretada pelo navegador,

simplesmente escreve uma linha no documento que o navegador est
exibindo. Note que possvel escrever cdigo HTML como parmetro do
mtodo write, pois seu parmetro um string que pode ser composto por
diversos substrings concatenados com o operador +.

ELFS, 2003

109

A Linguagem JavaScript
!

possvel tambm colocar scripts em arquivos externos, que devem ser salvos
com a extenso js. Para isso, deve-se colocar dentro do tag de script o
parmetro src = "nome do arquivo". Considere, por exemplo, o
seguinte arquivo:
exemplo2.js
document.write(
"<p><h2>Obrigado por sua visita nossa pgina" +
"</p></h2><FONT size='+2' color='blue'>" +
"Ofertas da semana</FONT>" +
"<ul><li>Livros e revistas</li>" +
"
<li>Discos e fitas</li>" +
"
<li>Material de papelaria</li>" +
"
<li>Outras ofertas</li>" +
"</ul>" +
"<p><i>As ofertas acima sero mantidas at </i>" +
"<b>31/12/2003</b>" +
"<i> ou at enquanto durarem os estoques.</i></p>" +
"<p>Resposta a ser enviada para: " +
"<a href='mailto:elfsenne@feg.unesp.br'>" +
"elfsenne@feg.unesp.br</a></p>");

Considere o seguinte documento XHTML:

ELFS, 2003

110

A Linguagem JavaScript
aula04_02.htm
<HTML>
<HEAD><TITLE>Programao JavaScript</TITLE></HEAD>
<BODY>
<SCRIPT type="text/javascript" src="exemplo2.js"></SCRIPT>
</BODY>
</HTML>

Resulta em:

ELFS, 2003

111

A Linguagem JavaScript
!

Por no possuir variveis, o cdigo do exemplo anterior bastante limitado,

sendo to esttico quanto um cdigo HTML comum. A declarao de variveis
em JavaScript muito mais flexvel do que em outras linguagens, j que no
necessrio a especificao de um tipo, ou seja, no preciso dizer ao
interpretador se uma varivel um string, um caractere ou um inteiro: basta
atribuir varivel um valor inicial.
A palavra-chave var opcional, assim como a prpria declarao de varivel
no incio do script. Em JavaScript uma varivel pode aparecer pela primeira
vez no meio de um arquivo sem ter sido declarada previamente. Entretanto, a
declarao de variveis pode ser interessante para tornar o script mais
compreensvel.
Exemplo: Escrever um cdigo em JavaScript que gere a
tabela ao lado. Note que os caracteres devem aparecer,
alternadamente, em negrito e itlico, e nas cores vermelho e
azul. Neste caso, o uso de variveis facilita escrever o cdigo
do script, pois com as variveis val (valor do nmero), tag
(negrito ou itlico) e cor (vermelho ou azul) as linhas da
tabela podem ser produzidas por:
document.writeln ("<TR><TD WIDTH='100%'><" +
tag + ">" + cor + val + "*2 = " + val*2 +
"</FONT></" + tag + "></TD></TR>");

ELFS, 2003

112

A Linguagem JavaScript
aula04_03.htm
<HTML>
<HEAD>
<TITLE>Programao JavaScript</TITLE>
</HEAD>
<BODY>
<TABLE WIDTH="90" BORDER="2" CELLSPACING="2" CELLPADDING="0">
<SCRIPT language="JavaScript">
var val,tag,cor;
for (val = 1; val <= 10; val++)
{
if (val % 2 == 0)
{
cor="<FONT color='blue'>";
tag = "B";
}
else
{
cor="<FONT color='red'>";
tag = "I";
}
document.writeln ("<TR><TD WIDTH='100%'><" + tag + ">" + cor +
val + "*2 = " + val*2 + "</FONT></" + tag + "></TD></TR>");
}
</SCRIPT>
</TABLE>
</BODY>
</HTML>
ELFS, 2003

113

A Linguagem JavaScript
!

A possibilidade de definio de funes em um programa JavaScript permite a

criao de cdigo estruturado, muito mais fcil de ser analisado. Em
JavaScript as funes, assim como as variveis, so flexveis: uma funo
pode retornar ou no um valor, sem que haja a necessidade de modificar sua
declarao.
Exemplo: funo que recebe como parmetros dois inteiros e retorna o maior
dentre esses dois valores.
aula04_04.htm

<HTML>
<HEAD><TITLE>Exemplo de Funo JavaScript</TITLE></HEAD>
<BODY>
<SCRIPT language="JavaScript">
function Maior_Valor (i, j)
{
if (i > j)
return i;
else
return j;
}
var i = 1;
var j = 2;
document.writeln ("O maior valor entre "+ i +" e " + j + " e' " +
Maior_Valor(i,j));
</SCRIPT>
</BODY>
</HTML>
ELFS, 2003

114

A Linguagem JavaScript
!

Como um tag de script pode ser inserido tanto dentro do cabealho (HEAD)
como dentro do corpo (BODY) de um documento HTML, o cdigo acima
poderia ter sido implementado separando a definio da funo (que deve ser
feita dentro do cabealho), do restante do script, ou seja:
<HTML>
<HEAD><TITLE>Exemplo de Funo JavaScript</TITLE>
<SCRIPT type="text/javascript">
function Maior_Valor (i, j)
A definio de funes deve ser feita
{
dentro do cabealho, para que a
if (i>j)
funo seja definida antes de ser
return i;
executada.
else
return j;
}
</SCRIPT>
</HEAD>
<BODY>
<SCRIPT type="text/javascript">
var i = 1;
var j = 2;
document.write("O maior valor entre " + i + " e " + j + " e' " +
Maior_Valor(i,j));
O uso de funes deve ser feito dentro do corpo
</SCRIPT>
do documento, pois a funo j vai estar
</BODY>
definida quando o corpo do documento for
</HTML>
carregado.

ELFS, 2003

115

A Linguagem JavaScript
Exerccio: Escrever um script que gere a tabela ao lado, utilizando
uma funo tabuada(n) que recebe como parmetro um inteiro e
mostra a tabuada deste inteiro. Note que, neste caso, a funo
no deve retornar valor algum. Implementar o script separando a
definio da funo (que deve ser feita no cabealho do
documento) de sua chamada (que deve estar no corpo do
documento).

aula04_05.htm

Objetos na Programao JavaScript

!

Objetos so elementos importantes no desenvolvimento de aplicaes para

a Internet. Um boto, por exemplo, um objeto e, portanto, possui um
conjunto de propriedades (o valor que o boto exibe em sua face, por
exemplo) e um conjunto de mtodos (aes que podem ser executadas
quando algum evento ocorre com o boto, como um clique, por exemplo).
Embora JavaScript no seja uma linguagem de programao orientada a
objetos, conforme j comentamos, a linguagem tem a capacidade de
interagir com algumas classes de objetos. Uma dessas classes a classe de
objetos do navegador (Browser Object Model ). A figura a seguir mostra
uma parte da hierarquia destes objetos (esta hierarquia pode ser diferente
para diferentes navegadores).

ELFS, 2003

116

A Linguagem JavaScript
window
window

history
history

navigator
navigator

document
document

frames

location
location
document
document

forms

button
button

radio
radio

checkbox
checkbox

reset
reset

text
text

submit
submit

textarea
textarea

hidden
hidden

password
password

select
select

Legenda
objeto
objeto

array

Por conveno, para acessar um objeto, necessrio indicar todo o "caminho"

percorrido nesta hierarquia. Por exemplo, para acessar um formulrio form1,
necessrio escrever window.document.form1. Porm, ao escrever
document.form1, supe-se estar se referindo a um objeto da janela em
uso.

ELFS, 2003

117

A Linguagem JavaScript
!

Utilizar o caminho completo s ser necessrio no caso de scripts que tratam

com vrias janelas ao mesmo tempo. Uma outra forma de fazer referncia a
objetos por meio de ndices. Note, pela figura anterior, que forms um
array (o que significa que um documento pode conter vrios formulrios).
Portanto, para referenciar o primeiro formulrio do documento podemos
escrever: window.document.forms[0] (ou, simplesmente,
document.forms[0]), ou seja, podemos referenciar o formulrio por seu
ndice e no pelo seu nome (quando no se estabelece um nome para o
formulrio, essa ser a nica forma de referenci-lo). Observe, pela figura
anterior, que o objeto window pode conter tambm diversos frames, sendo
que cada frame tambm um objeto da classe document.
Nesta aula vamos discutir o objeto window. Mais frente sero abordados
outros objetos de grande importncia na programao JavaScript.

O objeto window
! O objeto window representa a janela do navegador e, portanto, permite uma
interao entre o script e o ambiente no qual ele est sendo executado. A
linguagem JavaScript possui algumas variveis que so referncias a um
objeto window. Algumas dessas variveis so: top, self e parent. A
varivel top refere-se ao objeto window representando toda a janela visvel
do navegador, independente de seu contedo. A varivel self refere-se ao
objeto window no qual o script est mais diretamente contido.
ELFS, 2003

118

A Linguagem JavaScript
!
!

A varivel parent refere-se janela que contm um frameset, no caso de

self referir-se a um frame (se self no se referir a um frame ento as
variveis parent e self referem-se ao mesmo objeto window).
Exemplo:
aula04_06.htm
<html>
<head><title>Propriedades Bsicas do Objeto Window</title>
<script language="JavaScript">
window.name = "Janela1";
window.defaultStatus = "Propriedades de window";
window.status = "Objeto window: propriedades";
document.write(window.screen.height+"<br>");
document.write(window.screen.availHeight+"<br>");
document.write(window.screen.width+"<br>");
document.write(window.screen.availWidth+"<br>");
document.write(window.closed+"<br>");
document.write(window.defaultStatus+"<br>");
document.write(window.document.title+"<br>");
document.write(window.location+"<br>");
document.write(window.name+"<br>");
document.write(window.navigator.appVersion+"<br>");
document.write(window.opener+"<br>");
document.write(window.status+"<br>");
</script></head>
<body></body>
</html>

ELFS, 2003

119

A Linguagem JavaScript
!

As descries de algumas das propriedades do objeto window so:

"
window.document: documento HTML exibido atualmente pela janela;
"
window.name: atribui um nome janela atual (importante quando
desejamos fazer referncia janela). Exemplo:
window.name="Janela1".
"
window.location: objeto que corresponde ao endereo completo
(URL) do documento atual. Para carregar um novo documento basta
escrever window.location="nova_URL". Observe que como
window.location tambm um objeto, ele tem suas prprias
propriedades. Verifique nos cdigos a seguir, algumas propriedades do
objeto window.location.
aula04_07a.htm

<html>
<head>
<title>Janela I</title>
</head>
<body>
<h4>Esta a Janela I</h4>
<form>
<input type="button" value="Novo Documento"
onclick="window.location='aula04_07b.htm?nome=Senne#inicio'">
</form>
</body>
</html>
ELFS, 2003

120

A Linguagem JavaScript
aula04_07b.htm
<html>
<head><title>Janela II</title>
</head>
<body>
<h4>Agora voc est na Janela II</h4>
<form>
<input type="button" value="Novo Documento"
onclick="window.location.href='aula04_07a.htm'">
</form>
<script language="javascript">
document.write("Parmetro: " + window.location.search + "<br>");
document.write("Hash_String: " + window.location.hash + "<br>");
document.write("URL: " + window.location.href + "<br>");
document.write("Path da URL: " + window.location.pathname + "<br>");
document.write("Host: " + window.location.host + "<br>");
document.write("Nome do host: " + window.location.hostname + "<br>");
document.write("Porta: " + window.location.port + "<br>");
document.write("Protocolo: " + window.location.protocol + "<br>");
</script>
</body>
</html>

Observe que na primeira pgina atribumos ao objeto window.location a URL da

nova pgina que desejamos carregar. J na segunda pgina fazemos a mesma coisa
de outra forma: atribumos a URL da nova pgina que desejamos carregar
propriedade href do objeto window.location. As duas formas so equivalentes.
ELFS, 2003

121

A Linguagem JavaScript
!

O objeto window.location possui tambm mtodos prprios:

"
location.reload(): recarrega a pgina; pode ser chamado com um
parmetro opcional igual a true, ou seja, location.reload(true),
para forar o browser a ignorar seu cache e recarregar a pgina e todos
seus recursos (imagens, folhas de estilo, applets, etc).
"
location.replace(url): troca a pgina atual pela pgina
correspondente URL passada como parmetro (alterando o histrico de
pginas visitadas do browser).
Exemplo:
aula04_08.htm
<html>
<head>
<title>Troca de Pgina</title>
<script language=JavaScript>
</script>
</head>
<body>
<form>
<input type="button" value="Troca"
onClick="location.replace('aula04_01.htm');">
</form>
</body>
</html>

ELFS, 2003

122

A Linguagem JavaScript
"

window.frames: vetor (array) de todos os frames da janela. Esta

propriedade muito til quando se deseja que um script carregado em
um frame altere documentos de 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 no vetor, que corresponde 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 denominado main no frameset).
Exemplo:
aula04_09.htm

<html>
<head>
<title>Testando frameset</title>
</head>
<frameset rows = "50%,*">
<frame name="main" src="aula04_09a.htm">
<frame name="sub1" src="aula04_09b.htm">
</frameset>
</html>

Neste caso, pode-se acessar o frame main utilizando

parent.frames[0] ou parent.main. Para acessar o frame sub1
podemos escrever: parent.frames[1] ou parent.sub1
ELFS, 2003

123

A Linguagem JavaScript
!

Para testar o frameset considere as seguintes pginas:

aula04_09a.htm
<html>
<head>
<title>Teste</title>
<script language=JavaScript>
function troca ()
{
parent.sub1.document.location = "aula04_09c.htm";
}
</script>
</head>
<body>
<a href="javascript:void(0)" onClick="troca()">
Clique aqui</a>
</body>
</html>
aula04_09b.htm
<html>
<head>
<title>Teste</title>
</head>
<body>
Voc est na pgina SUB1!
</body>
</html>
ELFS, 2003

Observe que o script

localizado no frame main
altera o arquivo do frame
sub1. Esta propriedade
muito til, pois um script
executado somente enquanto
o seu documento est
carregado no navegador.
Assim, possvel criar um
frame contendo um script que
ir comandar o
comportamento dos outros
frames, permitindo a criao
de pginas mais complexas e
interessantes.

aula04_09c.htm
<html>
<head>
<title>Teste</title>
</head>
<body>
Agora, voc est na pgina SUB2!
</body>
</html>
124

A Linguagem JavaScript
"

window.status: coloca ou retorna uma mensagem na barra de status

do navegador. Exemplo:
aula04_10.htm
<head>
<title>Barra de Status da Janela</title>
</head>
<body>
<a href="javascript:void(0)"
onMouseOver="window.status=
'Minha mensagem na barra de status!';return true;"
onMouseOut="window.status='';return true;">
Coloque o mouse sobre esta frase e veja a barra de status.
</a>
</body>
</html>

"

ELFS, 2003

window.open(URL,nome,caractersticas): Abre uma nova

janela, que recebe o nome passado pelo segundo argumento, carrega o
documento especificado no primeiro argumento com as caractersticas
descritas pelo terceiro argumento. Estas caractersticas podem ser:
#
toolbar (barra de ferramentas) = yes/no
#
location (barra de endereo) = yes/no
#
directories (barra de diretrios) = yes/no
#
status (barra de status) = yes/no
125

A Linguagem JavaScript
menubar (barra de menu) = yes/no
#
scrollbars (barra de rolagem) = yes/no
#
resizable (redimensionabilidade) = yes/no
#
width (largura) = n (pixels)
#
height (altura) = m (pixels)
Caso alguma destas caractersticas no seja explicitada, o navegador utilizar
um valor padro. O nome da janela pode ser utilizado com o atributo TARGET,
caso se crie um link em uma janela desejando que o arquivo seja carregado
em outra janela. O cdigo a seguir cria uma janela denominada Janela1 e
carrega o documento aula04_01.htm. A nova janela apresenta as seguintes
caractersticas: no possui barra alguma, tem as dimenses 500 200 pixels,
mas pode ser redimensionada.
#

aula04_11.htm
<html>
<head><title>Abrindo Novas Janelas</title></head>
<body>
<script type="text/javascript">
window.open("aula04_01.htm","Janela1",
"toolbar=no,location=no,directories=no,"+
"status=no,menubar=no,scrollbars=no,"+
"resizable=yes,width=500,height=200");
</script>
</body></html>
ELFS, 2003

126

A Linguagem JavaScript
"

window.close(): fecha uma janela. Exemplo:

aula04_12.htm

<html>
<head>
<title>Abrindo Novas Janelas</title>
</head>
<body>
<form>
<input type="button" value="Fechar" onClick="Janela1.close()">
</form>
<script type="text/javascript">
Janela1=window.open("aula04_01.htm","Janela1",
"toolbar=no,location=no,directories=no,"+
"status=no,menubar=no,scrollbars=no,"+
"resizable=yes,width=500,height=200");
</script>
</body>
</html>

Neste exemplo desejamos fechar a nova janela aberta. Para isso, ao abri-la,
temos que atribuir essa nova janela a um objeto (Janela1) para ser possvel
escrever Janela1.close(). Observe que se fizermos window.close()
estaremos nos referindo janela principal e no nova janela aberta.

ELFS, 2003

127

A Linguagem JavaScript
"

window.alert(string): Mostra o valor do parmetro (um string) em

uma caixa de alerta. Exemplo:
aula04_13.htm

<html>
<head>
<title>Mensagem de Alerta</title>
</head>
<body>
<script type="text/javascript">
alert("Esta e' uma caixa de alerta");
</script>
</body>
</html>
"

window.confirm(string): Idntico ao anterior, exibindo tambm os

botes Ok e Cancelar (Ok retorna true e Cancelar retorna false). Devemos
observar que as janelas no navegador so abertas de forma no-modal,
ou seja, ao abrir uma nova janela (a caixa de confirmao) a janela
anterior perde o foco (permanencendo aberta, no entanto).

Exerccio: Modificar o arquivo aula04_12.htm considerando uma funo

JavaScript fechar(janela) para confirmar o fechamento da janela. Observe que
a funo fechar recebe como parmetro o nome de um objeto window. Esse
objeto dever ser fechado somente se o usurio clicar no boto OK de uma
caixa de confirmao. aula04_14.htm

ELFS, 2003

128

A Linguagem JavaScript
"

window.prompt(frase,valor): Exibe uma caixa de dilogo,

contendo uma frase igual ao valor do primeiro parmetro (um string), um
campo de edio de texto com um valor padro igual ao segundo
parmetro (tambm um string), e os botes Ok e Cancelar. A funo
prompt retorna o valor digitado no campo de texto, caso o usurio clique
em Ok. Caso contrrio, retorna null. Exemplo:
aula04_15.htm
<html>
<head>
<title>Exemplo de Interao com o Usurio
</title>
</head>
<body>
<script type="text/javascript">
idade = prompt("Quantos anos voc tem?", "");
if (idade != null)
{
idade = idade - 0; mesmo necessrio fazer idade = idade - 0? Por que?
document.write("Voc diz que tem "+idade+" anos.");
}
else
document.write("Voc no quis revelar sua idade!");
</script>
</body>
</html>

ELFS, 2003

129

A Linguagem JavaScript
!

No exemplo anterior, a atribuico: idade = idade - 0; vai transformar

idade de um string para um nmero. Assim, se o usurio deixar a caixa de
edio em branco, mas clicar em Ok, a idade ser entendida como sendo
zero. Neste caso, a converso de string para nmero no to importante.
Mas existem situaes em que essa converso realmente necessria.
Considere, por exemplo:
var num1=3;
var num2=4;
var num3=num1*num2;

Neste caso, embora as variveis num1 e num2 sejam strings, elas sero
usadas como nmeros no comando num3=num1*num2, pois o operador * se
aplica apenas a nmeros. Neste caso, portanto, o valor de num3 ser,
corretamente, igual a 12. Mas considere que ao invs de multiplicar
desejamos somar as variveis num1 e num2. Nesse caso, se escrevermos:
var num1=3;
var num2=4;
var num3=num1+num2;

o valor de num3 ser "34" porque o operador + ser entendido como uma
concatenao e no como uma soma. Em casos assim ser importante realizar
a converso de string para nmero.
Note que fazemos num-0 e no num+0 exatamente para que a operao no seja
confundida com uma concatenao.
ELFS, 2003

130

A Linguagem JavaScript
!

Exerccio: Criar um script que execute as seguintes funes: a pgina principal

deve conter uma caixa de seleo com nomes de documentos. Quando o
usurio escolher um documento, dever aparecer uma caixa confirmando se a
janela contendo o documento deve realmente ser aberta. Caso o usurio
confirme (clicando em Ok), o documento escolhido dever ser carregado em
uma nova janela (sem nenhum atributo) com 600 300 pixels. Use o evento
onchange do tag <select> para carregar o documento escolhido.
aula04_16.htm

ELFS, 2003

131

A Linguagem JavaScript
!

Exerccio: Modificar o script que produz a tabuada de um inteiro dado. A

pgina principal deve conter uma caixa de texto e um boto "tabuada". O
usurio ir especificar o inteiro para o qual deseja a tabuada e clicar no boto.
Dever aparecer uma caixa confirmando se a tabuada deve realmente ser
exibida. Caso o usurio confirme, a tabuada escolhida dever ser exibida
centralizada em uma nova janela (no redimensionvel) com 150 300 pixels.
aula04_17.htm

ELFS, 2003

132