Programação WEB I
BOM
(Browser Object Manager)
Thiago Miranda dos Santos Souza
Objetos
Programação Web I
Thiago Miranda dos Santos Souza
Window
Programação Web I
• Métodos já conhecidos:
•Window.alert(“Texto”);
•Window.prompt(“Digite algo”,””);
•Window.confirm(“Deseja mesmo fazer isso”);
Thiago Miranda dos Santos Souza
Window
Programação Web I
•Abrir uma Janela do navegador
Var janela =
window.open(‘http://www.google.com.br’
, ‘Google’, ‘width=500,height=450’);
Thiago Miranda dos Santos Souza
Window
Programação Web I
•Abrir uma Janela do navegador
window.open(‘url’, ‘nome’, ‘funcionalidades’);
url – Define o endereço a ser carregado
Nome – Define o nome da Janela
Thiago Miranda dos Santos Souza
Programação Web I
Funcionalidades Window.open
•Separados por vírgula definindo funcionalidades para a
janela aberta:
•Fullscreen:yes ou no – Modo tela cheia – Somente I.E.
•width: valor em pixel – Largura
•Height: valor em pixel – Altura
•Location: yes ou no - Mostra o endereço da página
•Menu: yes ou no – Mostra a barra de menu
•Resizable: yes ou no – Se permite redimensionar a janela
•Scrollbars: yes ou no – mostrar barra de rolagem
•Status: yes ou no – mostrar barra de status
•Title: yes ou no – Mostrar barra de título
•Toolbar: yes ou no – mostrar a barra de ferramentas da
janela.
Thiago Miranda dos Santos Souza
Window
Programação Web I
•Fechar uma janela
<script type=“text/javascript”>
function abre(){
janela = window.open(“http://www.google.com.br”, “”,
“width=200,height=200”);
}
function fecha(){
janela.close();
}
</script>
Thiago Miranda dos Santos Souza
Window
Programação Web I
• Redimensionar uma janela (Não funciona no Chrome)
<button onclick=“window.resizeTo(800,400)”>
Redimensionar</button>
<button onclick=“window.resizeBy(-100,
-10))”>
Redimensionar</button>
Thiago Miranda dos Santos Souza
Window
Programação Web I
• Mover uma janela
Janela = window.open(‘’,’’,’width=300,height=200’);
Janela.moveTo(500,300);
Janela.focus() // Dá foco a janela (Não funciona no
Chrome)
Janela.moveBy(20,20); //Move o top e o lado
esquero 20px.
Thiago Miranda dos Santos Souza
Window
Programação Web I
•Mover a barra de Rolagem
Window.scrollTo(100,350); // Coloca a barra de
rolagem na posição indicada.
Window.scrollBy(10,10) // Move a Barra de
Rolagem em 10px para a esquerda e 10px para
baixo
Thiago Miranda dos Santos Souza
Window
Programação Web I
• Imprimir o documento
Window.print();
janela = window.open(‘’,’’,’width=400,height=200’);
Janela.print();
Janela.focus();
Thiago Miranda dos Santos Souza
Window
Programação Web I
• Propriedade Opener
• Te dá acesso a página pai que abriu uma nova janela.
Na janela que abre o Pop-up
janela
=
window.open(‘teste.html’,’’,’width=400,height=200’
);
Em teste.html
Function fechar(){
Window.opener.document.body.style.background=
‘red’;}
<body onunload=“fechar()”>
Thiago Miranda dos Santos Souza
History
Programação Web I
• Trabalha com as informações do histórico do navegador,
e as urls visitadas por essa janela
history.back()
Retorna a página anterior visitada por essa janela,
tem o mesmo efeito do botão VOLTAR
history.foward()
Retorna a página Visitada depois que a janela foi
aberta, tem o mesmo efeito do botão AVANÇAR
Thiago Miranda dos Santos Souza
History
Programação Web I
history.go([-]n)
Recebe um número que pode ser positivo ou
negativo, sendo que os números positivos são para
ir para frente quantas páginas forem solicitadas e
quando negativo é para retornar quantas páginas
foram solicitadas.
history.go(-2); // Retorna duas páginas
Thiago Miranda dos Santos Souza
History
Programação Web I
history.length
- É uma propriedade!
Retorna a quantidade de páginas visitadas nessa
janela.
Thiago Miranda dos Santos Souza
Location
Programação Web I
É uma referência ao objeto location que armazena
informações sobre a URL aberta em uma janela.
Propriedades:
Hash
Retorna ou define uma âncora para a URL
Teste.html#div1
Alert(location.hash); // Retorna div1
Location.hash = div2;
Alert(location.hash); // Retorna div2
Thiago Miranda dos Santos Souza
Location
Programação Web I
Propriedades:
Hostname
Retorna ou define a parte da url que define a
página.
http://www.google.com.br/teste.php
Alert(location.hostname) // Retorna
www.google.com.br
Thiago Miranda dos Santos Souza
Location
Programação Web I
Propriedades:
Href
Retorna ou Define a URL completa presente na
janela.
http://www.google.com.br/teste.php
Alert(location.href) // Retorna o endereço
completo.
Thiago Miranda dos Santos Souza
Location
Programação Web I
Propriedades:
Pathname
Retorna ou Define a parte da URL que contém o
caminho para o arquivo.
http://www.google.com.br/arquivo/teste.php
Alert(location.pathname) // Retorna
/arquivo/teste.php
Thiago Miranda dos Santos Souza
Location
Programação Web I
Métodos:
Assign(url)
Window.location.assign(“http://www.google.com.br”);
Carrega a URL defina no parâmetro da função.
Reload(booleano)
Window.location.reload();
Recarrega a url atual da página.
O padrão é false, o true força a página a ser recarregada
mesmo não havendo alteração desde a última vez que foi
carregada.
Thiago Miranda dos Santos Souza
Location
Programação Web I
Métodos:
Replace(url)
Carrega a URL definida no parâmetro, sendo diferente dos
métodos anteriores por sobrescrever o histórico do
navegador .
Window.location.replace(‘http://www.google.com.br’);
Thiago Miranda dos Santos Souza
Navigator
Programação Web I
É uma referência ao navegador
armazenando informações sobre este.
Propriedades:
utilizado,
Navigator.appname // Retorna o nome do navegador
Navigator.appversion // Retorna a versão do navegador
Navigator.useragent // Retorna várias características do
navegador
Navigator.cookieEnabled // Retorna true ou false para se o
navegador está com os cookies habilitados ou não
Navigator.language // retorna a Língua padrão do
navegador
Thiago Miranda dos Santos Souza
setTimeout()
Programação Web I
Define um intervalo de tempo de espera para
executar determinada ação.
Opção 1:
setTimeout(‘alert(“teste”)’,4000));
Opção 2:
setTimeout(function(){
alert(‘Teste’);
},4000);
(Esta é a opção mais recomendada!)
Thiago Miranda dos Santos Souza
clearTimeout()
Programação Web I
Anula a execução de uma ação definida pelo
método setTimeout().
msg = setTimeout(alertauser,4000);
clearTimeout(msg); // Cancela a linha de cima
function alertauser(){
alert(“Teste”);
}
Thiago Miranda dos Santos Souza
Cronômetro
Programação Web I
<script type=“text/javascript”>
Var i=0; Var contator = null; Var contando = false;
Function contar (){
i++;
document.form[0].elements[0].value = i; // Essa linha será vista posteriormente mas ela
coloca o valor de i em um campo de formulário.
contador = setTimeout(contar,1000); //1000 milesegundos = 1 seg
}
Function iniciar(){
if(contando == false){
contando = true;
contar(); }
}
Function parar(){
clearTimeout(contator);
contando = false;
i = 0;
}
</script>
Thiago Miranda dos Santos Souza
Cronômetro
Programação Web I
<body>
<form>
<input type=“text” value=“0” />
<button onClick=“iniciar();”> Iniciar</button>
<button onClick=“parar();”>Parar</button>
</form>
</body>
Thiago Miranda dos Santos Souza
setInterval
Programação Web I
Define um intervalo de tempo para repetir uma mesma
ação. Enquanto o método setTimeout() executa o código
uma única vez, o setInterval() executa a mesma ação de
forma repetida e indefinidamente a cada intervalo de
tempo.
setInterval(alertuser,4000);
Function alertuser(){
alert(“Teste”);
}
Thiago Miranda dos Santos Souza
clearInterval
Programação Web I
Cancela a execução de uma ação definida pelo método
setInterval()
msg = setInterval(alertuser,4000);
clearInterval(msg);
Function alertuser(){
alert(“Teste”);
}
Thiago Miranda dos Santos Souza
Cronômetro 2
Programação Web I
<script type=“text/javascript”>
Var i=0; Var contator = null; Var contando = false;
Function contar (){
i++;
document.form[0].elements[0].value = i; // Essa linha será vista posteriormente mas ela
coloca o valor de i em um campo de formulário.
}
Function iniciar(){
if(contando == false){
contando = true;
contador = setInterval(contar,1000); }
}
Function parar(){
clearInterval(contator);
contando = false;
i = 0;
}
</script>
Thiago Miranda dos Santos Souza
Cronômetro 2
Programação Web I
<body>
<form>
<input type=“text” value=“0” />
<button onClick=“iniciar();”> Iniciar</button>
<button onClick=“parar();”>Parar</button>
</form>
</body>
Thiago Miranda dos Santos Souza
Download
