$XOD0DQLSXODomRGH-DQHODVH)UDPHV

Transcrição

1 $XOD0DQLSXODomRGH-DQHODVH)UDPHV As formas de programação que vimos até aqui envolviam apenas uma janela ou frame. Aplicações reais, geralmente, envolvem múltiplas 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 são executados. 2EMHWLYRV Nesta aula você aprenderá: - como XVDUDEULUHIHFKDUMDQHODV; - como programar com WHPSRUL]DGRUHV - a usar o REMHWRIUDPH; - como fazer UHIHUrQFLDVHQWUHIUDPHV. 3UpUHTXLVLWRV As aulas anteriores. 0DQLSXODQGR-DQHODV O SULQFLSDO objeto da hierarquia do JavaScript, como já comentamos diversas vezes, é o REMHWRWindow; abaixo dele encontram-se todos os elementos de uma página HTML que podem ser manipulados através da linguagem JavaScript. Além do objeto representando a MDQHOD FRUUHQWH, cada janela do browser e FDGD IUDPH dentro da janela são representados também SRU XP REMHWR Window. Nesta aula exploraremos as SURSULHGDGHV H PpWRGRV deste objeto e mostraremos algumas técnicas interessantes de programação com janelas e frames. As principais propriedades do Window são os DUUD\V de formulários, OLQNV, âncoras e imagens da página. Além destes DUUD\V de objetos, esse objeto contém as propriedades mostradas na tabela DEHOD3URSULHGDGHVGRREMHWRWindow 3URSULHGDGH 'HVFULomR closed Especifica se a ZLQGRZ foi fechada. defaultstatus Texto com a mensagem mostrada na barra de status do EURZVHU. document Referência ao objeto Document contido na janela frames[] $UUD\ do objeto Window que representa os frames dentro da janela. history Referência ao objeto history da janela location URL da página sendo exibida, definindo essa propriedade causa o carregamento de um novo documento. 1

2 name opener parent screen self status top window Nome da janela. Janela onde a janela atual foi aberta. Se a janela corrente for um frame, refere-se ao frame da janela que a contém. Referência ao objeto screen da janela. Referência à própria janela, mesmo que window. Mensagem temporária na barra de status. Referência à janela top-level que contém a janela atual. Referência à própria janela, mesmo que self. Não foram incluídas na tabela anterior as diversas SURSULHGDGHVGHSHQGHQWHV GR QDYHJDGRU Este objeto também suporta diversos PpWRGRV importantes, como os mostrados na tabela pWRGR alert() blur() clearinterval() / setinterval(f,t) cleartimeout()/ settimeout(f,t) close ( ) confirm(p) focus ( ) moveby(dx,dy) moveto(x,y) open (s1,s2,s3,sb) (mais detalhes na seção 1.2) prompt(s,d) resizeby (dx,dy) resizeto(x,y) scrollby(dx,dy) scrollto(x,y) 7DEHOD0pWRGRVGRREMHWRWindow 'HVFULomR Mostra uma mensagem simples em uma caixa de diálogo com botão Ok. Retira o foco de uma janela. Cancela ou determina a execução periódica de um trecho de código f após um período de intervalo t milissegundos (f pode conter múltiplos comandos separados por ";"). Desprograma o WLPHU ou programa o WLPHU para executar a função f após t milissegundos. Fecha uma janela. Apresenta em uma caixa de diálogo à pergunta p e botões Ok (retorna true) e Cancel (retorna false). Coloca o foco numa janela, movendo-a para frente de todas. Move a janela da posição atual dx SL[HOV para a direita ou dy SL[HOV para baixo. Move o canto superior esquerdo da janela para a posição x y. Cria e/ou abre uma janela carregando o documento s1, tendo como nome s2 e de acordo com as propriedades indicadas em s3, na forma sb. Mostra a string s em uma caixa de diálogo com os botões Ok e Cancel e um campo de entrada de texto com a VWULQJ d. Retorna o texto fornecido. Redimensiona a janela aumentando-a de dx SL[HOV na horizontal e dy na vertical. Redimensiona a janela para x SL[HOVna horizontal e y na vertical. Rola o documento interior à janela para a posição x,y ou de um valor dx,dy. 2

3 Foram omitidos na tabela acima métodos dependentes do navegador. Os métodos alert, prompt e confirm (que já foram usados diversas vezes deste o início deste módulo de nosso curso), assim como a propriedade location, são PpWRGRVTXHSRGHPVHULQYRFDGRVVHPDQHFHVVLGDGHGHVH LQGLFDURREMHWR Window. As duas linhas abaixo são, portanto equivalentes: alert( mensagem ao usuário! ); window.alert( mensagem ao usuário! ); As linhas que seguem exemplificam o uso de location e confirm em uma aplicação útil: GLUHFLRQDPHQWRGHXPDSiJLQDSDUDXPQRYRHQGHUHoR. <TITLE>Redirecionando automaticamente </TITLE> <SCRIPT LANGUAGE="JavaScript">  <BODY onload="redire()"> <H2>Redirecionando automaticamente</h2> <SCRIPT LANGUAGE="JavaScript">  1.1. J anelas Sec undárias Abrir um documento em uma MDQHOD GLIHUHQWH da atual é útil em diversas situações. Pode se usar este artifício para abrir documentos fora do nosso site e dessa forma sua página não é sobrescrita por um documento alheio. Outra utilidade é abrir uma janela com instruções para preencher um formulário, sem, contudo apagar o próprio formulário. A forma de abrir uma QRYDMDQHOD em JavaScript é através do método open do objeto Window. Como indicado na tabela 19.2, este método pode receber até 4 parâmetros: s1 ; s2 ; s3 e sb. O SULPHLUR dos parâmetros de open, s1, é uma VWULQJ opcional e representa a URL do documento a ser carregado na nova janela. Se for omitido 3

4 ou se for uma VWULQJvazia permite a criação de uma SiJLQDHPEUDQFR. O VHJXQGR parâmetro é também uma VWULQJ opcional e corresponde a um nome para ser atribuído à propriedade name (não pode conter espaços). Se for fornecido um nome que MiH[LVWH, o método não irá criar uma nova janela, mas simplesmente retornará uma referência à janela especificada, sendo neste caso ignorado o terceiro argumento. O WHUFHLUR parâmetro é opcional e se não for especificado a nova janela terá as FDUDFWHUtVWLFDV SDGUmR. O valor deste parâmetro corresponde a uma VWULQJ indicando que recursos (VHSDUDGRV SRU YtUJXOD H VHP HVSDoRV) devem ser incluídos na janela a ser aberta. A tabela 19.3, a seguir, mostra RVUHFXUVRVTXHSRGHPVHUGHILQLGRV, a IRUPD como devem aparecer e seu VLJQLILFDGR. A maioria destes recursos deve ter os valores yes ou no. E se apenas aparecerem, isso é, forem incluídas na VWULQJ, VHP TXDOTXHUYDORU, é suposto que seu valor seja yes. Se QmRDSDUHFHU, o valor da característica é suposto ser no. Para a ODUJXUD H DOWXUD, os valores devem ser VHPSUHespecificados e correspondem ao número de SL[HOV. O ~OWLPR argumento ou parâmetro que também é opcional representa um ERROHDQR. Isso é dependendo de sb ser true ou false, a url que será carregada VXEVWLWXLUiRXQmR a corrente na history do EURZVHU. 7DEHOD5HFXUVRVSRVVtYHLVGHFRPSRURWHUFHLURSDUkPHWUR GHPpWRGRopenGRREMHWRWindow 5HFXUVR 6LJQLILFDGR height Altura e largura da janela onde o documento será mostrado. width titlebar Se a janela terá ou não área de título (yes ou no). status Se a janela terá ou não barra de status (yes ou no). scrollbars Se a janela terá ou não barras de rolagem (yes ou no). resizable Se a janela pode ou não ser redimensionada (yes ou no). menubar Se a janela terá ou não menu (yes ou no). location Se a janela terá ou não a barra de endereços (yes ou no). toolbar Se terá ou não a barra de ferramentas (toolbar) do EURZVHU. Na tabela 19.3 foram omitidos recursos dependentes do navegador. O exemplo a seguir ilustra a criação de uma janela de dimensões 400x350, com scrollbars e sem toolbar, área de endereço e barra de VWDWXV. Esta janela será posteriormente referenciada pela variável 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 através do open também têm um 4

5 document e com o método write é possível escrever nela. O método focus faz com que a janela seja exibida na frente das outras janelas (mesmo daquelas que não têm nada a ver com o navegador). Para fechar a janela utiliza-se o método close. O uso destes métodos é demonstrado nas linhas de código abaixo: <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(" Secundária"); jan.document.write("</h3><hr><br>"); 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!"); <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> A nova janela pode se referir à janela que a criou através da propriedade opener (tabela 19.1). Desta maneira, as duas janelas podem se referir uma a outra, e cada uma pode ler propriedades e LQYRFDU métodos da outra Lim it es de Tem po O método settimeout (tabela 19.2) permite programar a execução de uma função DSyV XPD GHWHUPLQDGD TXDQWLGDGH GH milissegundos. Este 5

6 método faz com que a função seja executada apenas uma vez. Para executar um número indeterminado de vezes, basta incluir, dentro da função, uma nova chamada ao settimeout ou usar o método setinterval. É possível que seja necessário interromper a seqüência de execuções após alguma condição, o que é feito através do método cleartimeout ou clearinterval. As duas linhas de código abaixo mostram como devem ser utilizados este métodos: tempo = settimeout("instrucao",tempo); cleartimeout(tempo); As linhas de código que seguem mostram como as funções setinterval e clearinterval podem ser usadas. Você deve salvar o primeiro código 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:  <TITLE>Primeira</TITLE> <SCRIPT LANGUAGE="JAVASCRIPT"> function Muda() location= exejanelas-a.html <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>  <TITLE>Segunda</TITLE> <SCRIPT LANGUAGE="JAVASCRIPT"> function Muda() location= exejanelas.html <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)"> 6

7 <INPUT TYPE="BUTTON" VALUE="Seguir" onclick="muda()"> </FORM> 2. Manipulando Fram es Vimos no módulo de HTML que é possível dividir uma janela em várias partes independentes, chamadas IUDPHV. Em JavaScript, um IUDPH se comporta exatamente FRPRXPDMDQHOD tendo as mesmas propriedades e métodos. O objeto Window tem um array com XPREMHWRSDUDFDGDIUDPHGHILQLGR QD MDQHOD. Cada IUDPH de uma janela pode se referir a outro usando as propriedades do objeto Window: frames[], parent e top.(tabela 19.1). Como em HTML, é possível que um IUDPH esteja exibindo um documento que cria novos IUDPHV. Como os IUDPHV são representados por objetos Window, logo também possuem um DUUD\ frames[ ], que pode ser usado para referenciar aos IUDPHV deste documento interno. Pode-se assim simplesmente acumular diversos subníveis de IUDPHV. O exemplo a seguir mostra um arquivo de OD\RXW que divide a janela em 2 frames: <TITLE>Exemplo de frames</title> <FRAMESET COLS="75%, 25%"> <FRAME NAME= fra SRC="pa.htm"> <FRAME NAME= flay SRC="lay.htm"> </FRAMESET> Se o arquivo lay.htm também fosse um arquivo de layout com o código mostrado a seguir: <TITLE>Arquivo lay.htm</title> <FRAMESET ROWS="*,*,*"> <FRAME NAME= frb SRC="pb.htm"> <FRAME NAME= frc SRC="pc.htm"> <FRAME NAME= frd SRC="pd.htm"> </FRAMESET> Então a exibição do primeiro arquivo produziria uma página com a seguinte 7

8 aparência: frb fra frc frd Ao observar estes arquivos de OD\RXW é possível notar que a divisão em IUDPHV é feita em GRLVQtYHLV: no primeiro nível, a janela é dividida em duas colunas (2 IUDPHV); no segundo nível, o segundo IUDPH é subdividido em três linhas (3 IUDPHV). Neste caso o objeto Window tem portanto um DUUD\ de dois elementos, sendo que o segundo elemento do DUUD\ (window.frame[1]), por sua vez, tem um DUUD\de frames com três elementos. Como cada IUDPH pode ser acessado pelo DUUD\frames ou pelo nome definido no atributo name, DV GXDV IRUPDV de escrever uma frase no frame de nome frb mostradas abaixo VmRYiOLGDV e têm o PHVPR significado: window.frames[1].frames[0].document.write( uma frase! ); window.frames[1].frb.document.write ( uma frase! ); Cada window tem a propriedade parent que se refere ao IUDPH que contém o seu arquivo de layout. Assim, o primeiro IUDPH da coluna esquerda pode se referir ao seu vizinho como parent.frames[1]. Se um IUDPH está contido dentro de outro IUDPH que é contido emr uma janela, o IUDPH pode se referir à janela de nível mais elevado por parent.parent. A propriedade top é neste caso um VLPSOLILFDGRU. Não importa quantos subníveis estejam envolvidos a cada nível de IUDPHV, top irá se referir ao IUDPH que está H[LELQGRRDUTXLYRGHOD\RXW que causou a abertura de todos os outros, isto é, o de PDLVDOWRQtYHOQDKLHUDUTXLD. Após entender bem as linhas de código abaixo, tente modificá-las para OD\RXW mais complexo, usando para referir-se aos níveis: top parent.parent parent.frames[] frames[].frames[].frames[].  <TITLE>Escrevendo em frame</title> <FRAMESET COLS="40%,20%,20%,20%"> <FRAME SRC="ex-a.html" NAME="f1"> <FRAME SRC="ex-b.html" NAME="f2"> 8

9 <FRAME SRC="ex-c.html" NAME="f3"> <FRAME SRC="ex-d.html" NAME="f4"> </FRAMESET> <NOFRAMES> <P>Browser inadequado a frames</p> </NOFRAMES>  <TITLE>Escrevendo em Frames</TITLE> <SCRIPT LANGUAGE="JAVASCRIPT">  <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>  <TITLE>Frame 2</TITLE> <BODY> <H2>f2</H2><br>frames[1]  <TITLE>Frame 3</TITLE> 9

10 ! " # $ %&'()"* +,-./ # 0$1+2 <BODY> <H2>f3</H2><br>frames[2]  <TITLE>Frame 4</TITLE> <BODY> <H2>f4</H2><br>frames[3] ([HUFtFLRV Utilize o exemplo apresentado no final da seção 1 e visualize o resultado que terá se trocar as linhas do exemplo "novo-endereco.html" pelo nome de uma página qualquer.. Misture cada uma das formas possíveis de abrir janelas da tabela 19.3 no exemplo do final da seção 1.2. Teste também sem qualquer recurso e sem algum dos parâmetros de open para verificar as formas padrão. Use os métodos settimeout() e cleartimeout() para gerar uma seqüência 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 usuário não apertar algum botão para parar o processo. (Dica: você pode usar a mesma estrutura dos dois arquivos do final da seção 1.2 ampliando a estrutura agora para 3 arquivos e trocando os métodos lá usados de manipulação de tempo!) Depois de visualizar e entender bem as formas de referência a IUDPHV. Faça o sugerido no final da seção 2. Isto é, usando o exemplo completo apresentado, transforme os IUDPHV para terem diversos OD\RXW e subníveis de forma a entender bem as formas de manipulação entre os diversos níveis. 5HVXPR Nesta aula, você aprendeu a usar diversas janelas e IUDPHV. Conheceu as formas de usar temporizadores. Podemos dizer que está quase pronto para ser um eficiente programador em JavaScript. Há pouquíssimo a ver agora! Estamos quase lá... $XWRDYDOLDomR Voltamos a dizer que a complexidade do assunto neste final do curso não deve assustá-lo. Não desanime e volte sempre a reler os pontos que ficaram um pouco obscuros. 10