Aula 19: Manipulao de Janelas e Frames

As formas de programao que vimos at aqui envolviam apenas uma janela ou frame. Aplicaes reais, geralmente, envolvem mltiplas janelas ou frames. Nesta aula explicaremos como as diversas janelas e frames podem interagir e cooperar umas com as outras e com os programas que nelas so executados. Objetivos: Nesta aula voc aprender: - como usar, abrir e fechar janelas; - como programar com temporizadores; - a usar o objeto frame; - como fazer referncias entre frames. Pr-requisitos: As aulas anteriores.

1. Manipulando Janelas O principal objeto da hierarquia do JavaScript, como j comentamos diversas vezes, o objeto Window e abaixo dele encontram-se todos os elementos de uma pgina HTML que podem ser manipulados atravs da linguagem JavaScript. Alm do objeto representando a janela corrente, cada janela do browser e cada frame dentro da janela so representados tambm por um objeto Window. Nesta aula exploraremos as propriedades e mtodos deste objeto e mostraremos algumas interessantes tcnicas de programao com janelas e frames. As principais propriedades do Window so os arrays de formulrios, links, ncoras e imagens da pgina. Alm destes arrays de objetos, esse objeto contm as propriedades mostradas na tabela 19.1 .

Tabela 19.1- Propriedades do objeto Window Propriedade Descrio closed Especifica se a window foi fechada. defaultStatus Texto com a mensagem mostrada na barra de status do browser. document Referncia ao objeto Document contido na janela frames[] Array do objeto Window que representa os frames dentro da janela. history Referncia ao objeto history da janela location URL da pgina sendo exibida, definindo essa propriedade causa o carregamento de um novo documento. name Nome da janela. opener Janela onde foi aberta a janela atual. parent Se a janela corrente for um frame, refere-se ao frame da janela que a contm. screen Referncia ao objeto Screen da janela. self Referncia prpria janela, mesmo que window. status Mensagem temporria na barra de status. top Referncia janela top-level que contm a janela atual. window Referncia prpria janela, mesmo que self. No foram includas na tabela anterior as diversas propriedades dependentes do navegador. Este objeto tambm suporta diversos mtodos importantes, como os mostrados na tabela 18.2.

Tabela 19.2- Mtodos do objeto Window Mtodo alert() Descrio Mostra uma mensagem simples em uma caixa de dilogo com boto Ok. blur() Retira o foco de uma janela. clearInterval() Cancela ou determina a execuo peridica de um / trecho de cdigo f aps um perodo de intervalo t setInterval(f,t) milissegundos (f pode conter mltiplos comandos separados por ";"). clearTimeout()/ Desprograma o timer ou programa o timer para setTimeout(f,t) executar a funo f aps t milissegundos. close ( ) Fecha uma janela. confirm(p) Apresenta em uma caixa de dilogo pergunta p e botes Ok (retorna true) e Cancel (retorna false). focus ( ) Coloca o foco numa janela, movendo-a para frente de todas. moveBy(dx,dy) Move a janela da posio atual dx pixels para a direita ou dy pixels para baixo. moveTo(x,y) Move o canto superior esquerdo da janela para a posio x y . open Cria e/ou abre uma janela carregando o documento (s1,s2,s3,sb) s1, tendo como nome s2 e de acordo com as (mais detalhes na propriedades indicadas em s3, na forma sb . seo 1.2) prompt(s,d) Mostra a string s em uma caixa de dilogo com os botes Ok e Cancel e um campo de entrada de texto com a string d. Retorna o texto fornecido. resizeBy Redimensiona a janela aumentando-a de dx pixels (dx,dy) na horizontal e dy na vertical. resizeTo(x,y) Redimensiona a janela para x pixels na horizontal e y na vertical. scrollBy(dx,dy) Rola o documento interior janela para a posio scrollTo(x,y) x,y ou de um valor dx,dy . Foram omitidos na tabela acima mtodos dependentes do navegador. Os mtodos alert, prompt e confirm (que j foram usados diversas vezes deste o incio deste mdulo de nosso curso), assim como a propriedade location, so mtodos que podem ser invocados sem a necessidade de se indicar o objeto Window. As duas linhas abaixo so portanto equivalentes: alert(mensagem ao usurio !); window.alert(mensagem ao usurio !); As linhas que seguem exemplificam o uso de location e confirm em uma aplicao til: direcionamento de uma pgina para um novo "endereo". <HTML> <HEAD> <TITLE>Redirecionando automaticamente </TITLE> <SCRIPT LANGUAGE="JavaScript">
3

<!-function redire() { //href e window podem ser omitidos if (confirm ("A pgina mudou-se. " + "\n Clique OK \n " + "para ver a nova. ")) location = "novo-endereco.html"; } //--> </SCRIPT> </HEAD> <BODY onload="redire()"> <H2>Redirecionando automaticamente</H2> <SCRIPT LANGUAGE="JavaScript"> <!-document["bgColor"]="lightpink"; // --> </SCRIPT> </BODY> </HTML>

1.1. Janelas Secundrias Abrir um documento em uma janela diferente da atual til em diversas situaes. Pode se usar este artifcio para abrir documentos fora do nosso site e dessa forma sua pgina no sobrescrita por um documento alheio. Outra utilidade abrir uma janela com instrues para preencher um formulrio, sem contudo apagar o prprio formulrio. A forma de abrir uma nova janela em JavaScript atravs do mtodo open do objeto Window. Como indicado na tabela 19.2, este mtodo pode receber at 4 parmetros: s1 ; s2 ; s3 e sb. O primeiro dos parmetros de open, s1, uma string opcional e representa a URL do documento a ser carregado na nova janela. Se for omitido ou se for uma string vazia permite a criao de uma pgina em branco. O segundo parmetro tambm uma string opcional e corresponde a um nome para ser atribudo propriedade name (no pode conter espaos). Se for fornecido um nome que j existe, o mtodo no ir criar uma nova janela, mas simplesmente retornar uma referncia janela especificada, sendo neste caso ignorado o terceiro argumento. O terceiro parmetro opcional e se no for especificado a nova janela ter as caractersticas padro. O valor deste parmetro corresponde a uma string indicando que recursos (separados por vrgula e sem espaos) devem ser includos na janela a ser aberta. A tabela 19.3, a seguir, mostra os recursos que podem ser definidos, a forma como devem aparecer e seu significado. A maioria destes recursos deve ter os valores yes ou no. E se apenas
4

aparecerem, isso , forem includas na string, sem qualquer valor, suposto que seu valor seja yes. Se no aparecer, o valor da caracterstica suposto ser no. Para a largura e altura, os valores devem ser sempre especificados e correspondem ao nmero de pixels. O ltimo argumento ou parmetro que tambm opcional representa um booleano. Isso dependendo de sb ser true ou false, a url que ser carregada substituir ou no a corrente na history do browser. Tabela 19.3- Recursos possveis de compor o terceiro parmetro de mtodo open do objeto Window Recurso height width titlebar status scrollbars resizable menubar location toolbar Significado Altura e largura da janela onde o documento ser mostrado. Se a janela ter ou no rea de ttulo (yes ou no). Se a janela ter ou no barra de status (yes ou no). Se a janela ter ou no barras de rolagem (yes ou no). Se a janela pode ou no ser redimensionada (yes ou no). Se a janela ter ou no menu (yes ou no). Se a janela ter ou no a barra de endereos (yes ou no). Se ter ou no a barra de ferramentas (toolbar) do browser.

Na tabela 19.3 foram omitidos recursos dependentes do navegador. O exemplo a seguir ilustra a criao de uma janela de dimenses 400x350, com scrollbars e sem toolbar, rea de endereo e barra de status. Esta janela ser posteriormente referenciada pela varivel jan: var jan = window.open(outraPag.html, janelaNova, toolbar=no,location=no,+ status=no,scrollbars=yes,+ width=400,height=350); Como a janela principal, as janelas criadas atravs do open tambm tm um document e com o mtodo write possvel escrever nela. O mtodo focus faz com que a janela seja exibida na frente das outras janelas (mesmo daquelas que no tm nada a ver com o navegador). Para fechar a janela utiliza-se o mtodo close. O uso destes mtodos demonstrado nas linhas de cdigo abaixo: <HTML> <HEAD> <TITLE>Abrindo janelas</TITLE> <SCRIPT LANGUAGE="JAVASCRIPT"> jan = null; function Abrir() { jan = open("","novaJanela", "resizable=yes,width=99,height=99"); jan.document.write("<H3>Janela "); jan.document.write(" Secundria"); jan.document.write("</H3><HR><BR>"); }
5

function Texto() { //verifica se pode abrir if (jan != null && !jan.closed) { jan.document.write("<p>Mais texto</p>"); jan.focus(); } else Fechada(); } function Fechada() { alert ("Abra antes !"); } </SCRIPT> </HEAD> <BODY bgcolor=lightblue> <H2>Abrindo nova janela</H2> <FORM> <input type="button" value="Abrir Janela" onclick="Abrir()"> <input type="button" value="Escrever nela" onclick="Texto()"> <input type="button" value="Fecha-la" onclick="if (!jan.closed) jan.close()"> </FORM> </BODY> </HTML> A nova janela pode se referir janela que a criou atravs da propriedade opener (tabela 19.1). Desta maneira, as duas janelas podem se referir uma a outra, e cada uma pode ler propriedades e invocar mtodos da outra. 1.2. Limites de Tempo O mtodo setTimeout (tabela 19.2) permite programar a execuo de uma funo aps uma determinada quantidade de milissegundos. Este mtodo faz com que a funo seja executada apenas uma vez. Para executar um nmero indeterminado de vezes, basta incluir dentro da funo uma nova chamada ao setTimeout ou usar o mtodo setInterval. possvel que seja necessrio interromper a seqncia de execues aps alguma condio, o que feito atravs do mtodo clearTimeout ou clearInterval. As duas linhas de cdigo abaixo mostram como devem ser utilizados este mtodos: tempo = setTimeout("instrucao",tempo); clearTimeout(tempo); As linhas de cdigo que seguem mostram como as funes setInterval e clearInterval podem ser usadas. Voc deve salvar o primeiro cdigo no arquivo exeJanelas.html e o segundo em um arquivo denominado exeJanelas-a.html, ou mudar as linhas "location=..." para os nomes que voc usou para cada arquivo: <!--primeiro arquivo:'exeJanelas.html'--> <HTML>
6

<HEAD> <TITLE>Primeira</TITLE> <SCRIPT LANGUAGE="JAVASCRIPT"> function Muda() { location='exeJanelas-a.html' } </SCRIPT> </HEAD> <BODY onload="mude=setInterval('Muda()',999)"bgcolor="kh aki"> <H3>Pagina:<FONT SIZE=+4>1</FONT></H3> <FORM> <INPUT TYPE="BUTTON" VALUE="Parar" onclick="clearInterval(mude)"> <INPUT TYPE="BUTTON" VALUE="Seguir" onclick="Muda()"> </FORM> </BODY> </HTML> <!--segundo arquivo:'exeJanelas-a.html'--> <HTML> <HEAD> <TITLE>Segunda</TITLE> <SCRIPT LANGUAGE="JAVASCRIPT"> function Muda() { location='exeJanelas.html' } </SCRIPT> </HEAD> <BODY onload="mude=setInterval('Muda()',999)" bgcolor="gold"> <H3> Pagina : <FONT SIZE=+4>2</FONT></H3> <FORM> <INPUT TYPE="BUTTON" VALUE="Parar" onclick="clearInterval(mude)"> <INPUT TYPE="BUTTON" VALUE="Seguir" onclick="Muda()"> </FORM> </BODY> </HTML> 2. Manipulando Frames Vimos no mdulo de HTML que possvel dividir uma janela em vrias partes independentes, chamadas frames. Em JavaScript, um frame se comporta exatamente como uma janela, tendo as mesmas propriedades e mtodos. O objeto Window tem um array com um objeto para cada frame definido na janela. Cada frame de uma janela pode se referir a outro usando as propriedades do objeto Window: frames[], parent e top.(tabela 19.1). Como foi visto em HTML, possvel que um frame esteja exibindo um
7

documento que cria novos frames. Como os frames so representados por objetos Window, logo tambm possuem um array frames[ ], que pode ser usado para referenciar aos frames deste documento interno. Pode-se assim simplesmente acumular diversos subnveis de frames. O exemplo a seguir mostra um arquivo de layout que divide a janela em 2 frames: <HTML> <HEAD> <TITLE>Exemplo de frames</TITLE> </HEAD> <FRAMESET COLS="75%,25%"> <FRAME NAME=fra SRC="pa.htm"> <FRAME NAME=flay SRC="lay.htm"> </FRAMESET> </HTML> Se o arquivo lay.htm tambm fosse um arquivo de layout com o cdigo mostrado a seguir: <HTML> <HEAD> <TITLE>Arquivo lay.htm</TITLE> </HEAD> <FRAMESET ROWS="*,*,*"> <FRAME NAME=frb SRC="pb.htm"> <FRAME NAME=frc SRC="pc.htm"> <FRAME NAME=frd SRC="pd.htm"> </FRAMESET> </HTML> a exibio do primeiro arquivo produziria uma pgina com a seguinte aparncia: frb fra frc frd Ao observar estes arquivos de layout possvel notar que a diviso em frames feita em dois nveis: no primeiro nvel, a janela dividida em duas colunas (2 frames); no segundo nvel, o segundo frame subdividido em trs linhas (3 frames). O objeto Window tem portanto um array de dois elementos, sendo que o segundo elemento do array (window.frame[1]), por sua vez, tem um array de frames com trs elementos. Como cada frame pode ser acessado pelo array frames ou pelo nome definido no atributo name, as duas formas de escrever uma frase no frame de nome frb mostradas abaixo so vlidas e tm o mesmo significado:

window.frames[1].frames[0].document.write(uma !); window.frames[1].frb.document.write (uma frase !);

frase

Cada window tem a propriedade parent que se refere ao frame que contm o seu arquivo de layout. Assim, o primeiro frame da coluna esquerda pode se referir ao seu vizinho como parent.frames[1]. Se um frame est contido dentro de outro frame que contido por uma janela , o frame pode se referir janela de nvel mais elevado por parent.parent. A propriedade top neste caso um simplificador. No importa quantos subnveis estejam envolvidos a cada nvel de frames, top ir se referir ao frame que est exibindo o arquivo de layout que causou a abertura de todos os outros, isto o de mais alto nvel na hierarquia. Aps entender bem as linhas de cdigo abaixo, tente modific-las para layout mais complexos, usando para referir-se aos nveis: top parent.parent parent.frames[] frames[].frames[].frames[]. <!-- arquivo principal --> <HTML> <HEAD> <TITLE>Escrevendo em frame</TITLE> </HEAD> <FRAMESET COLS="40%,20%,20%,20%"> <FRAME SRC="ex-a.html" NAME="f1"> <FRAME SRC="ex-b.html" NAME="f2"> <FRAME SRC="ex-c.html" NAME="f3"> <FRAME SRC="ex-d.html" NAME="f4"> </FRAMESET> <NOFRAMES> <P>Browser inadequado a frames</P> </NOFRAMES> </HTML> <HTML><!-- arquivo ex-a.html --> <HEAD> <TITLE>Escrevendo em Frames</TITLE> <SCRIPT LANGUAGE="JAVASCRIPT"> <!-function n1() { parent.f2.document.write("Um texto"); parent.f1.document.bgColor="tan"
9

} function n2() { parent.f3.document.write("texto<BR>"); parent.f2.document.bgColor="tan" } function n3() { parent.f4.document.write("<p>isso</p>"); parent.f3.document.bgColor="tan" } //--> </SCRIPT> </HEAD> <BODY> <H1>Escrevendo em Frames:</H1> <I>Em que frame quer escrever?</I> <FORM> <INPUT TYPE="BUTTON" VALUE="f2" onclick="n1()"> <INPUT TYPE="BUTTON" VALUE="f3" onclick="n2()"> <INPUT TYPE="BUTTON" VALUE="f4" onclick="n3()"> </FORM> </BODY> </HTML> <HTML><!-- arquivo ex-b.html --> <HEAD> <TITLE>Frame 2</TITLE> </HEAD> <BODY> <H2>f2</H2><br>frames[1] </BODY> </HTML> <HTML><!-- arquivo ex-c.html --> <HEAD> <TITLE>Frame 3</TITLE> </HEAD> <BODY> <H2>f3</H2><br>frames[2] </BODY> </HTML> <HTML><!-- arquivo ex-d.html --> <HEAD> <TITLE>Frame 4</TITLE> </HEAD> <BODY> <H2>f4</H2><br>frames[3] </BODY> </HTML>

10

Exerccios: 1. Utilize o exemplo apresentado no final da seo 1 e visualize o resultado que ter se trocar as linhas do exemplo "novo-endereco.html" pelo nome de uma pgina qualquer. 2. Misture cada uma das formas possveis de abrir janelas da tabela 19.3 no exemplo do final da seo 1.2. Teste tambm sem qualquer recurso e sem algum dos parmetros de open para verificar as formas padro. 3. Use os mtodos setTimeout() e clearTimeout() para gerar uma seqncia de 3 janelas que se referenciam recursivamente (isto , onde a primeira chama a segunda, e a segunda chama a terceira e esta retorna a primeira) enquanto o usurio no apertar algum boto para parar o processo. (Dica: voc pode usar a mesma estrutura dos dois arquivos do final da seo 1.2 ampliando a estrutura agora para 3 arquivos e trocando os mtodos l usados de manipulao de tempo!) 4. Depois de visualizar e entender bem as formas de referncia a frames. Faa o sugerido no final da seo 2. Isto , usando o exemplo completo apresentado, transforme os frames para terem diversos layout e subnveis de forma a entender bem as formas de manipulao entre os diversos nveis. Resumo: Nesta aula, voc aprendeu a usar diversas janelas e frames. Conheceu as formas de usar temporizadores. Podemos dizer que est quase pronto para ser um eficiente programador em JavaScript. H pouqussimo a ver agora! Estamos quase l.... Auto-avaliao: Voltamos a dizer que a complexidade do assunto neste final do curso no deve assust-lo. No desanime e volte sempre a reler os pontos que ficaram um pouco obscuros.

11