topicos internet b dom window
Post on 01-Feb-2016
243 Views
Preview:
DESCRIPTION
TRANSCRIPT
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() // ou poderia ser usado myWindow.focus()
</script>
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
top related