JavaScript - Aula04

ELFS, 2003 102

4. A Linguagem JavaScript

! A linguagem XHTML, por não ser uma linguagem de programação e sim uma linguagem de marcação, não permite interação entre o usuário e a página, além de clicar em um link, fazendo com que o browser carregue uma nova página.

! O primeiro passo para superar esta limitação foi a utilização de scripts CGI(Common Gateway Interface), que recebem dados enviados de alguma forma pelo usuário, processam os dados no servidor (server side) e retornam uma resposta ao usuário, sob a forma de uma nova página. Este tipo de processo, ainda muito utilizado hoje em dia, exige acesso a áreas específicas do servidor, como o diretório CGI-BIN (onde os scripts são armazenados), o que nem sempre é possível.

! A linguagem JavaScript, criada em conjunto pela Sun e pela Netscape, surgiu como uma linguagem que pudesse ser carregada junto com a página XHTML e executada pelo próprio navegador do usuário.

! Embora com sintaxes semelhantes, as linguagens JavaScript e Java são diferentes. Java compila um programa-fonte em um programa executável independente. Por outro lado, um programa JavaScript, por ser carregado e interpretado pelo navegador, tem sua execução totalmente dependente do browser. Java é uma linguagem de programação orientada a objeto (POO), dispondo de todos os mecanismos da POO: construção de classes, herança e polimorfismo. JavaScript é uma linguagem baseada em objetos, não podendo ser considerada uma linguagem de POO pois não inclui o conceito de herança.

ELFS, 2003 103

A Linguagem JavaScript

! Nesta aula estaremos tratando da construção de scripts dentro de páginas XHTML, que é o uso mais comum da linguagem JavaScript. Ou seja, estaremos discutindo a utilização da linguagem JavaScript pelo lado do cliente (client-side programming). A inclusão de código para o servidor dentro de páginas web (server-side programming) é tratada em linguagens como JSP (Java Server Pages).

! JavaScript é uma linguagem que diferencia letras maiúsculas de minúsculas. Palavras-chave e identificadores (por exemplo, nomes de funções e de variáveis) devem ser escritos obedecendo a esta regra. Por exemplo, apalavra-chave function deve ser escrita exatamente dessa forma e não como Function ou FUNCTION. A linguagem ignora espaços em branco entre comandos. Assim:

irão produzir exatamente o mesmo resultado. Espaços e linhas em branco devem ser usados apenas para produzir código mais compreensível.

document.write("uma linha");document.write(" e outra...");

document.write("uma linha"); document.write(" e outra...");

document.write("uma linha");

document.write(" e outra...");

ELFS, 2003 104


! A linguagem usa as mesmas construções usadas nas linguagens C e Java para escrever comentários:

! Os identificadores devem ser construídos obedecendo as seguintes regras:" deve começar com uma letra, o símbolo de cifrão ( $ ) ou o símbolo de

sublinhado ( _ );" deve conter somente caracteres alfa-numéricos (além do $ e do _ );" uma palavra reservada não pode ser usada como identificador;" deve-se evitar outras palavras como document ou window que já são

associadas a objetos manipulados pela linguagem.! As palavras reservadas da linguagem são as seguintes:

// Este é um comentário de uma única linha

/* Este éum comentário que

se estende por várias linhas */

withwhile

voidvartypeofthisswitch

returnnewinimportif

functionforexportelsedo

deletedefaultcontinuecasebreak

ELFS, 2003 105


! Em JavaScript não é preciso declarar de que tipo será uma variável. O tipo de uma variável será determinado pelo valor que a variável contém. Exemplo:

Neste caso, a função alert() irá exibir uma caixa de diálogo que mostra "o valor da variável é 5". Até este ponto a variável x é do tipo inteiro (pois armazena um valor inteiro). A nova atribuição faz com que a variável x passe a ser do tipo string. O parâmetro da função alert é um string. Observe que a conversão do valor inteiro 5 para o string "5" (para que possa ser concatenado ao string "o valor da variável é ") é automática. Observe que strings podem ser delimitados por aspas ( " ) ou por apóstrofos ( ' ).

! Uma variável pode armazenar também uma referência a um objeto. Neste caso, podemos acessar todas as propriedades e métodos desse objeto a partir da variável. Exemplo:

Neste caso, podemos usar o método getTime() porque a variável x é uma referência a um objeto Date.

var x;x = 5;alert("o valor da variável é "+x);x = 'agora sou um string';

Nem mesmo a declaração de variáveis com a palavra reservada var é necessária.

var x = new Date();alert(x.getTime());

ELFS, 2003 106


! Arrays também são possíveis em JavaScript. Por exemplo: a coleção de nomes ('Ana Cristina', 'Ana Lúcia', 'André Luiz', 'Andresa', 'Cilmara') pode ser criada da seguinte forma:

! Arrays podem ser facilmente estendidos em JavaScript. Exemplo:

var aluno = new Array(5);aluno[0] = 'Ana Cristina';aluno[1] = 'Ana Lúcia';aluno[2] = 'André Luiz';aluno[3] = 'Andresa';aluno[4] = 'Cilmara';

var aluno = new Array(5);aluno[0] = 'Ana Cristina';aluno[1] = 'Ana Lúcia';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>");

Neste caso, o array foi declarado como tendo cinco elementos (numerados de 0 a 4), mas ao fazermos a atribuição 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 não foram atribuídos valor algum. Neste caso, os métodos document.write irão produzir:

AndresaundefinedGlasson

ELFS, 2003 107


! JavaScript aceita arrays de várias dimensões. Exemplo: a tabela de notas a seguir pode ser escrita facilmente em JavaScript.

var nota = new Array(5);for (i = 0; i < 5; i++)nota[i] = new Array(3);

// coluna de nomesnota[0][0] = 'Ana Cristina';nota[1][0] = 'Ana Lúcia';nota[2][0] = 'André Luiz';nota[3][0] = 'Andresa';nota[4][0] = 'Cilmara';

// coluna da nota 1nota[0][1] = '9.5';nota[1][1] = '10.0';nota[2][1] = '9.7';nota[3][1] = '9.8';nota[4][1] = '8.9';

// coluna da nota 2nota[0][2] = '9.6';nota[1][2] = '9.1';nota[2][2] = '9.2';nota[3][2] = '8.7';nota[4][2] = '10.0';

Neste caso, o array tem 2 dimensões (linhas e colunas). Note que o objeto nota é construído em primeiro lugar em relação às linhas ( new Array(5) ) e, em seguida, cada uma das linhas éconstruída em relação às colunas ( new Array(3) ). Isto deve ser feito qualquer que seja o número de dimensões do array.JavaScript não aceita, por exemplo:

var nota = new Array(5, 3);

10.08.9Cilmara

8.79.8Andresa

9.29.7André Luiz

9.110.0Ana Lúcia

9.69.5Ana Cristina

ELFS, 2003 108


! É possível definir uma função em qualquer ponto de um script, mas é mais fácil compreender um programa JavaScript se agruparmos todas as funções no início do script. Para declarar uma função devemos usar a seguinte sintaxe:

! Uma variável tem escopo global se for definida fora de qualquer função. Neste caso, a variável pode ser usada em qualquer parte do programa, a partir do ponto em que foi definida. Quando definimos uma variável dentro de uma função, essa variável terá escopo local, significando que poderá ser usada somente dentro dessa função.

! Para inserir um script JavaScript em uma página HTML, devemos utilizar um dos seguintes tags:

ou

function nome_da_função( parâmetro1, parâmetro2, ... ){bloco_de_código_a_ser_executado;

}

<SCRIPT type="text/javascript"> Código do script

</SCRIPT>

<SCRIPT language="javascript"> Código do script

</SCRIPT>

ELFS, 2003 109


! O tag de script pode ser inserido dentro do cabeçalho (HEAD) ou dentro do corpo (BODY) do documento. A diferença é 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 funçõesdeve-se colocar o script dentro do cabeçalho do documento.

! A função document.write(), quando interpretada pelo navegador, simplesmente escreve uma linha no documento que o navegador estáexibindo. Note que é possível escrever código HTML como parâmetro do método write, pois seu parâmetro é um string que pode ser composto por diversos substrings concatenados com o operador +.

<HTML><HEAD><TITLE>Programação JavaScript</TITLE></HEAD><BODY><SCRIPT type="text/javascript">document.write("<BR><FONT SIZE='+4' COLOR='blue'>"+"Programação para a Internet"+"<HR>");

</SCRIPT></BODY></HTML>

aula04_01.htm

ELFS, 2003 110


! É possível também colocar scripts em arquivos externos, que devem ser salvos com a extensão js. Para isso, deve-se colocar dentro do tag de script o parâmetro src = "nome do arquivo". Considere, por exemplo, o seguinte arquivo:

! Considere o seguinte documento XHTML:

document.write("<p><h2>Obrigado por sua visita à nossa página" +"</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 serão 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:[email protected]'>" +"[email protected]</a></p>");

exemplo2.js

ELFS, 2003 111


! Resulta em:

<HTML><HEAD><TITLE>Programação JavaScript</TITLE></HEAD><BODY><SCRIPT type="text/javascript" src="exemplo2.js"></SCRIPT>

</BODY></HTML>

aula04_02.htm

ELFS, 2003 112


! Por não possuir variáveis, o código do exemplo anterior é bastante limitado, sendo tão estático quanto um código HTML comum. A declaração de variáveis em JavaScript é muito mais flexível do que em outras linguagens, já que não énecessário a especificação de um tipo, ou seja, não é preciso dizer ao interpretador se uma variável é um string, um caractere ou um inteiro: basta atribuir à variável um valor inicial.

! A palavra-chave var é opcional, assim como a própria declaração de variável no início do script. Em JavaScript uma variável pode aparecer pela primeira vez no meio de um arquivo sem ter sido declarada previamente. Entretanto, a declaração de variáveis pode ser interessante para tornar o script mais compreensível.

Exemplo: Escrever um código em JavaScript que gere a tabela ao lado. Note que os caracteres devem aparecer, alternadamente, em negrito e itálico, e nas cores vermelho e azul. Neste caso, o uso de variáveis facilita escrever o código do script, pois com as variáveis val (valor do número), tag(negrito ou itálico) 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 113


<HTML><HEAD><TITLE>Programação 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>

aula04_03.htm

ELFS, 2003 114


! A possibilidade de definição de funções em um programa JavaScript permite a criação de código estruturado, muito mais fácil de ser analisado. Em JavaScript as funções, assim como as variáveis, são flexíveis: uma função pode retornar ou não um valor, sem que haja a necessidade de modificar sua declaração.

! Exemplo: função que recebe como parâmetros dois inteiros e retorna o maior dentre esses dois valores.<HTML><HEAD><TITLE>Exemplo de Função 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));


aula04_04.htm

ELFS, 2003 115


! Como um tag de script pode ser inserido tanto dentro do cabeçalho (HEAD)como dentro do corpo (BODY) de um documento HTML, o código acima poderia ter sido implementado separando a definição da função (que deve ser feita dentro do cabeçalho), do restante do script, ou seja:

<HTML><HEAD><TITLE>Exemplo de Função JavaScript</TITLE><SCRIPT type="text/javascript">function Maior_Valor (i, j){if (i>j) return i;

elsereturn 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));


A definição de funções deve ser feita dentro do cabeçalho, para que a função seja definida antes de ser executada.

O uso de funções deve ser feito dentro do corpo do documento, pois a função já vai estar definida quando o corpo do documento for carregado.

ELFS, 2003 116


! Exercício: Escrever um script que gere a tabela ao lado, utilizando uma função tabuada(n) que recebe como parâmetro um inteiro e mostra a tabuada deste inteiro. Note que, neste caso, a função não deve retornar valor algum. Implementar o script separando a definição da função (que deve ser feita no cabeçalho do documento) de sua chamada (que deve estar no corpo do documento).

aula04_05.htm

Objetos na Programação JavaScript

! Objetos são elementos importantes no desenvolvimento de aplicações para a Internet. Um botão, por exemplo, é um objeto e, portanto, possui um conjunto de propriedades (o valor que o botão exibe em sua face, por exemplo) e um conjunto de métodos (ações que podem ser executadas quando algum evento ocorre com o botão, como um clique, por exemplo).

! Embora JavaScript não seja uma linguagem de programação 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 117


Legenda

windowwindow

frames

forms

historyhistory

locationlocation

documentdocument

buttonbutton

navigatornavigator

documentdocument

radioradio

checkboxcheckbox resetreset

texttext submitsubmit

textareatextarea

selectselectpasswordpassword

hiddenhidden

objetoobjeto

array

! Por convenção, para acessar um objeto, é necessário indicar todo o "caminho" percorrido nesta hierarquia. Por exemplo, para acessar um formulário form1, é necessário escrever window.document.form1. Porém, ao escreverdocument.form1, supõe-se estar se referindo a um objeto da janela em uso.

ELFS, 2003 118

! Utilizar o caminho completo só será necessário no caso de scripts que tratam com várias janelas ao mesmo tempo. Uma outra forma de fazer referência a objetos é por meio de índices. Note, pela figura anterior, que forms é um array (o que significa que um documento pode conter vários formulários). Portanto, para referenciar o primeiro formulário do documento podemos escrever: window.document.forms[0] (ou, simplesmente, document.forms[0]), ou seja, podemos referenciar o formulário por seu índice e não pelo seu nome (quando não se estabelece um nome para o formulário, essa será a única forma de referenciá-lo). Observe, pela figura anterior, que o objeto window pode conter também diversos frames, sendo que cada frame é também um objeto da classe document.

! Nesta aula vamos discutir o objeto window. Mais à frente serão abordados outros objetos de grande importância na programação JavaScript.

O objeto window! O objeto window representa a janela do navegador e, portanto, permite uma

interação entre o script e o ambiente no qual ele está sendo executado. A linguagem JavaScript possui algumas variáveis que são referências a um objeto window. Algumas dessas variáveis são: top, self e parent. A variável top refere-se ao objeto window representando toda a janela visível do navegador, independente de seu conteúdo. A variável self refere-se ao objeto window no qual o script está mais diretamente contido.


ELFS, 2003 119

! A variável parent refere-se à janela que contém um frameset, no caso de self referir-se a um frame (se self não se referir a um frame então as variáveis parent e self referem-se ao mesmo objeto window).

! Exemplo:


<html><head><title>Propriedades Básicas 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>

aula04_06.htm

ELFS, 2003 120

! As descrições de algumas das propriedades do objeto window são:" window.document: documento HTML exibido atualmente pela janela;" window.name: atribui um nome à janela atual (importante quando

desejamos fazer referência à janela). Exemplo:window.name="Janela1".

" window.location: objeto que corresponde ao endereço completo (URL) do documento atual. Para carregar um novo documento basta escrever window.location="nova_URL". Observe que como window.location também é um objeto, ele tem suas próprias propriedades. Verifique nos códigos a seguir, algumas propriedades do objeto window.location.


<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>

aula04_07a.htm

ELFS, 2003 121


<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("Parâmetro: " + 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>

aula04_07b.htm

Observe que na primeira página atribuímos ao objeto window.location a URL da nova página que desejamos carregar. Já na segunda página fazemos a mesma coisa de outra forma: atribuímos a URL da nova página que desejamos carregar àpropriedade href do objeto window.location. As duas formas são equivalentes.

ELFS, 2003 122

! O objeto window.location possui também métodos próprios:" location.reload(): recarrega a página; pode ser chamado com um

parâmetro opcional igual a true, ou seja, location.reload(true), para forçar o browser a ignorar seu cache e recarregar a página e todos seus recursos (imagens, folhas de estilo, applets, etc).

" location.replace(url): troca a página atual pela página correspondente à URL passada como parâmetro (alterando o histórico de páginas visitadas do browser). Exemplo:


<html><head><title>Troca de Página</title><script language=JavaScript></script></head><body><form><input type="button" value="Troca"

onClick="location.replace('aula04_01.htm');"></form></body></html>

aula04_08.htm

ELFS, 2003 123

" 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 contém o frameset é a janela parent. Cada frame de um frameset pode ser referenciado por seu índice no vetor, que corresponde à sua posição 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:

Neste caso, pode-se acessar o frame main utilizando parent.frames[0] ou parent.main. Para acessar o frame sub1podemos escrever: parent.frames[1] ou parent.sub1


<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>

aula04_09.htm

ELFS, 2003 124

! Para testar o frameset considere as seguintes páginas:


<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_09a.htm

<html><head><title>Teste</title></head><body>Você está na página SUB1!</body></html>

<html><head><title>Teste</title></head><body>Agora, você está na página SUB2!</body></html>

aula04_09b.htm aula04_09c.htm

Observe que o scriptlocalizado no frame mainaltera o arquivo do frame sub1. Esta propriedade émuito útil, pois um script éexecutado somente enquanto o seu documento estácarregado no navegador. Assim, é possível criar um frame contendo um script que irá comandar o comportamento dos outros frames, permitindo a criação de páginas mais complexas e interessantes.

ELFS, 2003 125

" window.status: coloca ou retorna uma mensagem na barra de status do navegador. Exemplo:

" window.open(URL,nome,características): Abre uma nova janela, que recebe o nome passado pelo segundo argumento, carrega o documento especificado no primeiro argumento com as características descritas pelo terceiro argumento. Estas características podem ser: # toolbar (barra de ferramentas) = yes/no# location (barra de endereço) = yes/no# directories (barra de diretórios) = yes/no # status (barra de status) = yes/no


<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>

aula04_10.htm

ELFS, 2003 126

# 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 características não seja explicitada, o navegador utilizaráum valor padrão. 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 código a seguir cria uma janela denominada Janela1 e carrega o documento aula04_01.htm. A nova janela apresenta as seguintes características: não possui barra alguma, tem as dimensões 500 × 200 pixels, mas pode ser redimensionada.


<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");


aula04_11.htm

ELFS, 2003 127

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

! 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 possível escrever Janela1.close(). Observe que se fizermos window.close()estaremos nos referindo à janela principal e não à nova janela aberta.


<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");


aula04_12.htm

ELFS, 2003 128

" window.alert(string): Mostra o valor do parâmetro (um string) em uma caixa de alerta. Exemplo:

" window.confirm(string): Idêntico ao anterior, exibindo também os botões Ok e Cancelar (Ok retorna true e Cancelar retorna false). Devemos observar que as janelas no navegador são abertas de forma não-modal, ou seja, ao abrir uma nova janela (a caixa de confirmação) a janela anterior perde o foco (permanencendo aberta, no entanto).

! Exercício: Modificar o arquivo aula04_12.htm considerando uma função JavaScript fechar(janela) para confirmar o fechamento da janela. Observe que a função fechar recebe como parâmetro o nome de um objeto window. Esse objeto deverá ser fechado somente se o usuário clicar no botão OK de uma caixa de confirmação.


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

aula04_13.htm

aula04_14.htm

ELFS, 2003 129

" window.prompt(frase,valor): Exibe uma caixa de diálogo, contendo uma frase igual ao valor do primeiro parâmetro (um string), um campo de edição de texto com um valor padrão igual ao segundo parâmetro (também um string), e os botões Ok e Cancelar. A função prompt retorna o valor digitado no campo de texto, caso o usuário clique em Ok. Caso contrário, retorna null. Exemplo:


<html><head><title>Exemplo de Interação com o Usuário</title></head><body><script type="text/javascript">idade = prompt("Quantos anos você tem?", "");if (idade != null){idade = idade - 0;document.write("Você diz que tem "+idade+" anos.");

}elsedocument.write("Você não quis revelar sua idade!");


aula04_15.htm

É mesmo necessário fazer idade = idade - 0? Por que?

ELFS, 2003 130

! No exemplo anterior, a atribuicão: idade = idade - 0; vai transformar idade de um string para um número. Assim, se o usuário deixar a caixa de edição em branco, mas clicar em Ok, a idade será entendida como sendo zero. Neste caso, a conversão de string para número não é tão importante. Mas existem situações em que essa conversão é realmente necessária. Considere, por exemplo:

! Neste caso, embora as variáveis num1 e num2 sejam strings, elas serão usadas como números no comando num3=num1*num2, pois o operador * se aplica apenas a números. Neste caso, portanto, o valor de num3 será, corretamente, igual a 12. Mas considere que ao invés de multiplicar desejamos somar as variáveis num1 e num2. Nesse caso, se escrevermos:

o valor de num3 será "34" porque o operador + será entendido como uma concatenação e não como uma soma. Em casos assim será importante realizar a conversão de string para número.


var num1=”3”;var num2=”4”;var num3=num1*num2;

Note que fazemos num-0 e não num+0 exatamente para que a operação não seja confundida com uma concatenação.

var num1=”3”;var num2=”4”;var num3=num1+num2;

ELFS, 2003 131

! Exercício: Criar um script que execute as seguintes funções: a página principal deve conter uma caixa de seleção com nomes de documentos. Quando o usuário escolher um documento, deverá aparecer uma caixa confirmando se a janela contendo o documento deve realmente ser aberta. Caso o usuário 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 132

! Exercício: Modificar o script que produz a tabuada de um inteiro dado. Apágina principal deve conter uma caixa de texto e um botão "tabuada". Ousuário irá especificar o inteiro para o qual deseja a tabuada e clicar no botão. Deverá aparecer uma caixa confirmando se a tabuada deve realmente ser exibida. Caso o usuário confirme, a tabuada escolhida deverá ser exibida centralizada em uma nova janela (não redimensionável) com 150 × 300 pixels.


aula04_17.htm

Documents

JavaScript - Aula04