Tópicos avançados em internet B Carlos Oberdan Rolim Ciência da Computação DOM Objeto Window Objeto window Top level na hierarquia JS Representa uma janela do browser Um novo objeto windows é criado automaticamente a cada tag <body> <frameset> Propriedades Closed Retorna um booleano especificando se a janela foi fechada Sintaxe: window.closed Exemplo: function checkWin() { if (myWindow.closed) ifClosed() else ifNotClosed() } Propriedades defaultStatus Define ou retorna o texto padrão da status bar de uma janela Sintaxe: window.defaultStatus=sometext Exemplo: <script type="text/javascript"> window.defaultStatus="This is the default text in the status bar!!" </script> Propriedades name Define ou retorna o nome da janela Sintaxe: window.name=name Exemplo: function checkWin() { document.write(myWindow.name) } </script> Propriedades opener Retorna uma referência para a janela que criou a corrente Sintaxe: window.opener Exemplo: <script type="text/javascript"> myWindow=window.open('','MyName','width=200,height=100') myWindow.document.write("This is 'myWindow'") myWindow.focus() myWindow.opener.document.write("This is the parent window") </script> Propriedades outerheight Retorna ou define a altura externa de uma janela incluindo todos seus elementos Sintaxe: window.outerheight=pixels Exemplo: <script type="text/javascript"> myWindow=window.open('','') myWindow.outerheight="100" myWindow.outerwidth="100" myWindow.document.write("This is 'myWindow'") myWindow.focus() </script> Propriedades outerwidth Retorna ou define a largura externa de uma janela incluindo todos seus elementos Sintaxe: window.outerwidth =pixels Exemplo: <script type="text/javascript"> myWindow=window.open('','') myWindow.outerheight="100" myWindow.outerwidth="100" myWindow.document.write("This is 'myWindow'") myWindow.focus() </script> Propriedades pageXOffset Define ou retorna a posição X corrente da página em relação ao canto superior esquerdo da área visível da janela Propriedades pageyOffset Define ou retorna a posição Y corrente da página em relação ao canto superior esquerdo da área visível da janela Propriedades parent Retorna a janela pai Propriedades scrollbars Define se scrool bars devem estar visíveis ou não Propriedades top Retorna a janela ao top (topmost ancestor window) Propriedades self Retorna uma referência para a janela corrente Sintaxe: window.self Exemplo: function breakout() { if (window.top!=window.self) { window.top.location="tryjs_breakout.htm" } } </script> Propriedades status Define ou retorna o Sintaxe: window.status=sometext Exemplo: <script type="text/javascript"> window.status="Some text in the status bar!!" </script> Propriedades statusbar Define se o browser deve mostrar ou não a status bar Métodos alert() Mostra um alert box Sintaxe: alert(message) Exemplo: function display_alert() { alert("I am an alert box!!") } Métodos blur() e focus () Remove (blur) e coloca (focus) o foco da janela corrente Sintaxe: window.blur ou window.focus Exemplo: (faz com que a janela perca o focus) <script type="text/javascript"> myWindow=window.open('','','width=200,height=100') myWindow.document.write("This is 'myWindow'") myWindow.blur() </script> // ou poderia ser usado myWindow.focus() Métodos setInterval() Executa uma função em determinado intervalo de tempo até que clearInterval seja chamado ou a janela fechada Sintaxe: setInterval(code,millisec[,"lang"]) Exemplo: (atualiza o contador a cada 50 milisegundos mostrando a data) <input type="text" id="clock" size="35" /> <script language=javascript> var int=self.setInterval("clock()",50) function clock() { var t=new Date() document.getElementById("clock").value=t } </script> </form> Métodos clearInterval() Cancela o intervalo definido por setInterval Sintaxe: clearInterval(id_of_setinterval) Exemplo: <input type="text" id="clock" size="35" /> <script language=javascript> var int=self.setInterval("clock()",50) function clock() { var t=new Date() document.getElementById("clock").value=t } </script> </form> <button onclick="int=window.clearInterval(int)"> Stop interval</button> Métodos setTimeout() Executa uma função após um intervalo de tempo Sintaxe: setTimeout(code,millisec,lang) Exemplo: (mostra um alert 5 segundos após clicar no botão) function timedMsg() { var t=setTimeout("alert('5 seconds!')",5000) } ...... <input type="button" value="Display timed alertbox!" onClick="timedMsg()"> Métodos clearTimeout() Cancela o setTimeout Sintaxe: clearTimeout(id_of_settimeout) Métodos Close Fecha janela corrente Confirm Mostra uma janela de confirmação Prompt Mostra uma prompt window Métodos createPopup() Cria uma popup Sintaxe Exemplo: function show_popup() { var p=window.createPopup() var pbody=p.document.body pbody.style.backgroundColor="lime" pbody.style.border="solid black 1px" pbody.innerHTML="This is a pop-up! Click outside to close.“ p.show(150,150,200,50,document.body) } Métodos moveBy() Move a janela x pixels de acordo com a posição corrente Sintaxe: window.moveBy(x,y) Exemplo: function moveWin() { myWindow.moveBy(50,50) } ...... myWindow=window.open('','','width=200,height=100') myWindow.document.write("This is 'myWindow'") .... <input type="button" value="Move 'myWindow'" onclick="moveWin()" /> Métodos moveTo() Move uma janela para determinada posição (referência canto superior esquerdo) Sintaxe: window.moveTo(x,y) Exemplo: function moveWin() { myWindow.moveTo(50,50) } ...... myWindow=window.open('','','width=200,height=100') myWindow.document.write("This is 'myWindow'") .... <input type="button" value="Move 'myWindow'" onclick="moveWin()" /> Métodos open() Abre uma nova janela Sintaxe: window.open(URL,name,specs,replace) URL = endereço a abrir name = (opcional) Especifica o nome alvo da janela. Pode ser usado _blank, _parent, _self, _top ou nome da janela specs = (opcional) Lista de atributos da janela separado por virgulas width=pixels, height=pixels, top=pixels, left=pixels, scrollbars=yes,status=no, resizable=no replace = (opcional) define se a url da janela criada deve substituir a history list ou não. Valores true ou false Métodos print() Imprime (na impressora) a janela corrente Sintaxe: window.print() Métodos scrollTo() Rola o conteúdo até determinada coordenada Sintaxe: scrollTo(xpos,ypos) Exemplo: function scrollWindow() { window.scrollTo(100,500) } Objeto document Objeto document Representa todo o documento html É parte do objeto window Acessado através da propriedade window.document Coleções Anchors[] Retorna referência para todos objetos anchors Forms[] Retorna referência para todos objetos forms Images[] Retorna referência para todos objetos images Links[] Retorna referência para todos objetos link e map areas Exemplo document.write(document.images.length) Propriedades cookie Retorna ou define cookies associado ao documento domain Retorna o dominio do documento lastModified Retorna data e hora que o documento foi alterado referrer Retorna a url que carregou o documento corrente title Retorna o titulo do documento corrente url Retorna a url do documento corrente Métodos close() Fecha o stream aberto com document.open e mostra o conteúdo getElementById() Retorna referência para primeiro objeto definido pelo id especificado getElementsByName Retorna uma coleção de objetos com o nome especificado getElementsByTagName Retorna uma coleção de objetos com a tag name especificada open() Abre stream para receber dados de document.write ou document.writeln write() Escreve na stream writeln() Objeto location Objeto location É parte do objeto window Acessado através da propriedade window.location Propriedades host Retorna o hostname e a porta da url corrente hostname Retorna o hostname da url corrente href Define ou retorna a url corrente Usado para enviar o usuário a uma nova url Exemplo: window.location.href="http://www.novaurl.com.br"; (window.location é um “atalho” para window.location.href) Objeto history Objeto history Faz parte do objeto window History consiste em um array de URLs visitadas Acessado através da propriedade window.history Propriedades length Retorna o número de elementos no histórico Métodos back Lê a URL anterior do histórico forward Lê a próxima URL do histórico go Lê uma URL específica do histórico