Programação WEB I BOM (Browser Object Manager)
Objetos
Window Métodos já conhecidos: Window.alert( Texto ); Window.prompt( Digite algo, ); Window.confirm( Deseja mesmo fazer isso );
Window Abrir uma Janela do navegador Var janela = window.open( http://www.google.com.br, Google, width=500,height=450 );
Window Abrir uma Janela do navegador window.open( url, nome, funcionalidades ); url Define o endereço a ser carregado Nome Define o nome da Janela
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.
Window 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>
Window Redimensionar uma janela (Não funciona no Chrome) <button onclick= window.resizeto(800,400) > Redimensionar</button> <button onclick= window.resizeby(-100, -10)) > Redimensionar</button>
Window 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.
Window 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
Window Imprimir o documento Window.print(); janela = window.open(,, width=400,height=200 ); Janela.print(); Janela.focus();
Window 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() >
History 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
History 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
History history.length - É uma propriedade! Retorna a quantidade de páginas visitadas nessa janela.
Location É 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
Location 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
Location 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.
Location 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
Location 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.
Location 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 );
Navigator É uma referência ao navegador utilizado, armazenando informações sobre este. Propriedades: 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
settimeout() 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!)
cleartimeout() 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 ); }
Cronômetro <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>
Cronômetro <body> <form> <input type= text value= 0 /> <button onclick= iniciar(); > Iniciar</button> <button onclick= parar(); >Parar</button> </form> </body>
setinterval 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 ); }
clearinterval Cancela a execução de uma ação definida pelo método setinterval() msg = setinterval(alertuser,4000); clearinterval(msg); Function alertuser(){ alert( Teste ); }
Cronômetro 2 <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>
Cronômetro 2 <body> <form> <input type= text value= 0 /> <button onclick= iniciar(); > Iniciar</button> <button onclick= parar(); >Parar</button> </form> </body>