topicos internet b dom window
DESCRIPTION
internetTRANSCRIPT
![Page 1: Topicos Internet b Dom Window](https://reader033.vdocuments.mx/reader033/viewer/2022061617/5695d2f41a28ab9b029c51cb/html5/thumbnails/1.jpg)
Tópicos avançados em internet B
Carlos Oberdan Rolim
Ciência da Computação
![Page 2: Topicos Internet b Dom Window](https://reader033.vdocuments.mx/reader033/viewer/2022061617/5695d2f41a28ab9b029c51cb/html5/thumbnails/2.jpg)
DOM
Objeto Window
![Page 3: Topicos Internet b Dom Window](https://reader033.vdocuments.mx/reader033/viewer/2022061617/5695d2f41a28ab9b029c51cb/html5/thumbnails/3.jpg)
Objeto window
Top level na hierarquia JS
Representa uma janela do browser
Um novo objeto windows é criado automaticamente a cada tag <body> <frameset>
![Page 4: Topicos Internet b Dom Window](https://reader033.vdocuments.mx/reader033/viewer/2022061617/5695d2f41a28ab9b029c51cb/html5/thumbnails/4.jpg)
Propriedades
Closed
Retorna um booleano especificando se a janela foi fechada
Sintaxe: window.closed
Exemplo:
function checkWin() {
if (myWindow.closed) ifClosed() else ifNotClosed() }
![Page 5: Topicos Internet b Dom Window](https://reader033.vdocuments.mx/reader033/viewer/2022061617/5695d2f41a28ab9b029c51cb/html5/thumbnails/5.jpg)
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>
![Page 6: Topicos Internet b Dom Window](https://reader033.vdocuments.mx/reader033/viewer/2022061617/5695d2f41a28ab9b029c51cb/html5/thumbnails/6.jpg)
Propriedades
name
Define ou retorna o nome da janela
Sintaxe:
window.name=name
Exemplo:
function checkWin() { document.write(myWindow.name) } </script>
![Page 7: Topicos Internet b Dom Window](https://reader033.vdocuments.mx/reader033/viewer/2022061617/5695d2f41a28ab9b029c51cb/html5/thumbnails/7.jpg)
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>
![Page 8: Topicos Internet b Dom Window](https://reader033.vdocuments.mx/reader033/viewer/2022061617/5695d2f41a28ab9b029c51cb/html5/thumbnails/8.jpg)
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>
![Page 9: Topicos Internet b Dom Window](https://reader033.vdocuments.mx/reader033/viewer/2022061617/5695d2f41a28ab9b029c51cb/html5/thumbnails/9.jpg)
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>
![Page 10: Topicos Internet b Dom Window](https://reader033.vdocuments.mx/reader033/viewer/2022061617/5695d2f41a28ab9b029c51cb/html5/thumbnails/10.jpg)
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
![Page 11: Topicos Internet b Dom Window](https://reader033.vdocuments.mx/reader033/viewer/2022061617/5695d2f41a28ab9b029c51cb/html5/thumbnails/11.jpg)
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
![Page 12: Topicos Internet b Dom Window](https://reader033.vdocuments.mx/reader033/viewer/2022061617/5695d2f41a28ab9b029c51cb/html5/thumbnails/12.jpg)
Propriedades
parent
Retorna a janela pai
![Page 13: Topicos Internet b Dom Window](https://reader033.vdocuments.mx/reader033/viewer/2022061617/5695d2f41a28ab9b029c51cb/html5/thumbnails/13.jpg)
Propriedades
scrollbars
Define se scrool bars devem estar visíveis ou não
![Page 14: Topicos Internet b Dom Window](https://reader033.vdocuments.mx/reader033/viewer/2022061617/5695d2f41a28ab9b029c51cb/html5/thumbnails/14.jpg)
Propriedades
top
Retorna a janela ao top (topmost ancestor window)
![Page 15: Topicos Internet b Dom Window](https://reader033.vdocuments.mx/reader033/viewer/2022061617/5695d2f41a28ab9b029c51cb/html5/thumbnails/15.jpg)
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>
![Page 16: Topicos Internet b Dom Window](https://reader033.vdocuments.mx/reader033/viewer/2022061617/5695d2f41a28ab9b029c51cb/html5/thumbnails/16.jpg)
Propriedades
status
Define ou retorna o
Sintaxe:
window.status=sometext
Exemplo:
<script type="text/javascript">
window.status="Some text in the status bar!!"
</script>
![Page 17: Topicos Internet b Dom Window](https://reader033.vdocuments.mx/reader033/viewer/2022061617/5695d2f41a28ab9b029c51cb/html5/thumbnails/17.jpg)
Propriedades
statusbar
Define se o browser deve mostrar ou não a status bar
![Page 18: Topicos Internet b Dom Window](https://reader033.vdocuments.mx/reader033/viewer/2022061617/5695d2f41a28ab9b029c51cb/html5/thumbnails/18.jpg)
Métodos
alert()
Mostra um alert box
Sintaxe:
alert(message)
Exemplo:
function display_alert() {
alert("I am an alert box!!")
}
![Page 19: Topicos Internet b Dom Window](https://reader033.vdocuments.mx/reader033/viewer/2022061617/5695d2f41a28ab9b029c51cb/html5/thumbnails/19.jpg)
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() // ou poderia ser usado myWindow.focus()
</script>
![Page 20: Topicos Internet b Dom Window](https://reader033.vdocuments.mx/reader033/viewer/2022061617/5695d2f41a28ab9b029c51cb/html5/thumbnails/20.jpg)
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>
![Page 21: Topicos Internet b Dom Window](https://reader033.vdocuments.mx/reader033/viewer/2022061617/5695d2f41a28ab9b029c51cb/html5/thumbnails/21.jpg)
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>
![Page 22: Topicos Internet b Dom Window](https://reader033.vdocuments.mx/reader033/viewer/2022061617/5695d2f41a28ab9b029c51cb/html5/thumbnails/22.jpg)
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()">
![Page 23: Topicos Internet b Dom Window](https://reader033.vdocuments.mx/reader033/viewer/2022061617/5695d2f41a28ab9b029c51cb/html5/thumbnails/23.jpg)
Métodos
clearTimeout()
Cancela o setTimeout
Sintaxe:
clearTimeout(id_of_settimeout)
![Page 24: Topicos Internet b Dom Window](https://reader033.vdocuments.mx/reader033/viewer/2022061617/5695d2f41a28ab9b029c51cb/html5/thumbnails/24.jpg)
Métodos
Close
Fecha janela corrente
Confirm
Mostra uma janela de confirmação
Prompt
Mostra uma prompt window
![Page 25: Topicos Internet b Dom Window](https://reader033.vdocuments.mx/reader033/viewer/2022061617/5695d2f41a28ab9b029c51cb/html5/thumbnails/25.jpg)
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) }
![Page 26: Topicos Internet b Dom Window](https://reader033.vdocuments.mx/reader033/viewer/2022061617/5695d2f41a28ab9b029c51cb/html5/thumbnails/26.jpg)
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()" />
![Page 27: Topicos Internet b Dom Window](https://reader033.vdocuments.mx/reader033/viewer/2022061617/5695d2f41a28ab9b029c51cb/html5/thumbnails/27.jpg)
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()" />
![Page 28: Topicos Internet b Dom Window](https://reader033.vdocuments.mx/reader033/viewer/2022061617/5695d2f41a28ab9b029c51cb/html5/thumbnails/28.jpg)
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
![Page 29: Topicos Internet b Dom Window](https://reader033.vdocuments.mx/reader033/viewer/2022061617/5695d2f41a28ab9b029c51cb/html5/thumbnails/29.jpg)
Métodos
print()
Imprime (na impressora) a janela corrente
Sintaxe:
window.print()
![Page 30: Topicos Internet b Dom Window](https://reader033.vdocuments.mx/reader033/viewer/2022061617/5695d2f41a28ab9b029c51cb/html5/thumbnails/30.jpg)
Métodos
scrollTo()
Rola o conteúdo até determinada coordenada
Sintaxe:
scrollTo(xpos,ypos)
Exemplo:
function scrollWindow() {
window.scrollTo(100,500)
}
![Page 31: Topicos Internet b Dom Window](https://reader033.vdocuments.mx/reader033/viewer/2022061617/5695d2f41a28ab9b029c51cb/html5/thumbnails/31.jpg)
Objeto document
![Page 32: Topicos Internet b Dom Window](https://reader033.vdocuments.mx/reader033/viewer/2022061617/5695d2f41a28ab9b029c51cb/html5/thumbnails/32.jpg)
Objeto document
Representa todo o documento html
É parte do objeto window
Acessado através da propriedade window.document
![Page 33: Topicos Internet b Dom Window](https://reader033.vdocuments.mx/reader033/viewer/2022061617/5695d2f41a28ab9b029c51cb/html5/thumbnails/33.jpg)
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)
![Page 34: Topicos Internet b Dom Window](https://reader033.vdocuments.mx/reader033/viewer/2022061617/5695d2f41a28ab9b029c51cb/html5/thumbnails/34.jpg)
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
![Page 35: Topicos Internet b Dom Window](https://reader033.vdocuments.mx/reader033/viewer/2022061617/5695d2f41a28ab9b029c51cb/html5/thumbnails/35.jpg)
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()
![Page 36: Topicos Internet b Dom Window](https://reader033.vdocuments.mx/reader033/viewer/2022061617/5695d2f41a28ab9b029c51cb/html5/thumbnails/36.jpg)
Objeto location
![Page 37: Topicos Internet b Dom Window](https://reader033.vdocuments.mx/reader033/viewer/2022061617/5695d2f41a28ab9b029c51cb/html5/thumbnails/37.jpg)
Objeto location
É parte do objeto window
Acessado através da propriedade window.location
![Page 38: Topicos Internet b Dom Window](https://reader033.vdocuments.mx/reader033/viewer/2022061617/5695d2f41a28ab9b029c51cb/html5/thumbnails/38.jpg)
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)
![Page 39: Topicos Internet b Dom Window](https://reader033.vdocuments.mx/reader033/viewer/2022061617/5695d2f41a28ab9b029c51cb/html5/thumbnails/39.jpg)
Objeto history
![Page 40: Topicos Internet b Dom Window](https://reader033.vdocuments.mx/reader033/viewer/2022061617/5695d2f41a28ab9b029c51cb/html5/thumbnails/40.jpg)
Objeto history
Faz parte do objeto window
History consiste em um array de URLs visitadas
Acessado através da propriedade window.history
![Page 41: Topicos Internet b Dom Window](https://reader033.vdocuments.mx/reader033/viewer/2022061617/5695d2f41a28ab9b029c51cb/html5/thumbnails/41.jpg)
Propriedades
length
Retorna o número de elementos no histórico
![Page 42: Topicos Internet b Dom Window](https://reader033.vdocuments.mx/reader033/viewer/2022061617/5695d2f41a28ab9b029c51cb/html5/thumbnails/42.jpg)
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