4. A Linguagem JavaScript

Transcrição

1 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.! Alinguagem 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,

2 ! 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, a palavra-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: document.write("uma linha"); document.write(" e outra..."); document.write("uma linha"); document.write(" e outra..."); document.write("uma linha"); document.write(" e outra..."); irão produzir exatamente o mesmo resultado. Espaços e linhas em branco devem ser usados apenas para produzir código mais compreensível. ELFS,

3 ! A linguagem usa as mesmas construções usadas nas linguagens C e Java para escrever comentários: // Este é um comentário de uma única linha /* Este é um comentário que se estende por várias linhas */! 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: break do if switch while case else import this with continue export in typeof default ELFS, for new var delete function return void

4 ! 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: 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. 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: var x = new Date(); alert(x.gettime()); Neste caso, podemos usar o método gettime() porque a variável x é uma referência a um objeto Date. ELFS,

5 ! 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: var aluno = new Array(5); aluno[0] = 'Ana Cristina'; aluno[1] = 'Ana Lúcia'; 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 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: Andresa undefined Glasson ELFS,

6 ! JavaScript aceita arrays de várias dimensões. Exemplo: a tabela de notas a seguir pode ser escrita facilmente em JavaScript. Ana Cristina Ana Lúcia André Luiz Andresa Cilmara 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); var nota = new Array(5); for (i = 0; i < 5; i++) nota[i] = new Array(3); // coluna de nomes nota[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 1 nota[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 2 nota[0][2] = '9.6'; nota[1][2] = '9.1'; nota[2][2] = '9.2'; nota[3][2] = '8.7'; nota[4][2] = '10.0'; ELFS,

7 ! É 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: function nome_da_função( parâmetro1, parâmetro2,... ) { bloco_de_código_a_ser_executado; }! 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: <SCRIPT type="text/javascript"> Código do script </SCRIPT> ou <SCRIPT language="javascript"> Código do script </SCRIPT> ELFS,

8 ! 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ções deve-se colocar o script dentro do cabeçalho do documento. <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! 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 +. ELFS,

9 ! É 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: 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:elfsenne@feg.unesp.br'>" + "elfsenne@feg.unesp.br</a></p>"); exemplo2.js! Considere o seguinte documento XHTML: ELFS,

10 aula04_02.htm <HTML> <HEAD><TITLE>Programação JavaScript</TITLE></HEAD> <BODY> <SCRIPT type="text/javascript" src="exemplo2.js"></script> </BODY> </HTML>! Resulta em: ELFS,

11 ! 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,

12 aula04_03.htm <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> ELFS,

13 ! 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. aula04_04.htm <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)); </SCRIPT> </BODY> </HTML> ELFS,

14 ! 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) { A definição de funções deve ser feita if (i>j) dentro do cabeçalho, para que a return i; função seja definida antes de ser else executada. 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)); </SCRIPT> </BODY> </HTML> 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,

15 ! 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,

16 window history frames document navigator document forms location button radio Legenda checkbox reset objeto text submit array textarea hidden password select! 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 escrever document.form1, supõe-se estar se referindo a um objeto da janela em uso. ELFS,

17 ! 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,

18 ! 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,

19 ! 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. 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,

20 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("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> 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,

21 ! Oobjeto 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,

22 " 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: <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 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,

23 ! Para testar o frameset considere as seguintes páginas: <html> aula04_09a.htm <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> 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, é 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. <html> aula04_09b.htm <head> <title>teste</title> </head> <body> Você está na página SUB1! </body> </html> <html> aula04_09c.htm <head> <title>teste</title> </head> <body> Agora, você está na página SUB2! </body> </html> ELFS,

24 " window.status: coloca ou retorna uma mensagem na barra de status do navegador. Exemplo: <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 " 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 ELFS,

25 # 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 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"); </script> </body></html> aula04_11.htm ELFS,

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

27 " window.alert(string): Mostra o valor do parâmetro (um string) em uma caixa de alerta. Exemplo: <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): 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. aula04_14.htm aula04_13.htm ELFS,

28 " 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."); } else document.write("você não quis revelar sua idade!"); </script> </body> </html> aula04_15.htm É mesmo necessário fazer idade = idade - 0? Por que? ELFS,

29 ! 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: var num1= 3 ; var num2= 4 ; var num3=num1*num2;! 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: var num1= 3 ; var num2= 4 ; var num3=num1+num2; 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. Note que fazemos num-0 e não num+0 exatamente para que a operação não seja confundida com uma concatenação. ELFS,

30 ! 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 pixels. Use o evento onchange do tag <select> para carregar o documento escolhido. aula04_16.htm ELFS,

31 ! Exercício: Modificar o script que produz a tabuada de um inteiro dado. A página principal deve conter uma caixa de texto e um botão "tabuada". O usuá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 pixels. aula04_17.htm ELFS,