Programação WEB I BOM (Browser Object Manager)

Tamanho: px

Começar a partir da página:

Download "Programação WEB I BOM (Browser Object Manager)"

Tomás Candal Carvalhal
9 Há anos
Visualizações:

1 Programação WEB I BOM (Browser Object Manager)

2 Objetos

3 Window Métodos já conhecidos: Window.alert( Texto ); Window.prompt( Digite algo, ); Window.confirm( Deseja mesmo fazer isso );

4 Window Abrir uma Janela do navegador Var janela = window.open( Google, width=500,height=450 );

5 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

6 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.

7 Window Fechar uma janela <script type= text/javascript > function abre(){ janela = window.open( width=200,height=200 ); } function fecha(){ janela.close(); } </script>

8 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>

9 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.

10 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

11 Window Imprimir o documento Window.print(); janela = window.open(,, width=400,height=200 ); Janela.print(); Janela.focus();

12 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() >

13 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

14 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

15 History history.length - É uma propriedade! Retorna a quantidade de páginas visitadas nessa janela.

16 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

17 Location Propriedades: Hostname Retorna ou define a parte da url que define a página. Alert(location.hostname) // Retorna

18 Location Propriedades: Href Retorna ou Define a URL completa presente na janela. Alert(location.href) // Retorna o endereço completo.

19 Location Propriedades: Pathname Retorna ou Define a parte da URL que contém o caminho para o arquivo. Alert(location.pathname) // Retorna /arquivo/teste.php

20 Location Métodos: Assign(url) Window.location.assign( ); 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.

21 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( );

22 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

23 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!)

24 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 ); }

25 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>

26 Cronômetro <body> <form> <input type= text value= 0 /> <button onclick= iniciar(); > Iniciar</button> <button onclick= parar(); >Parar</button> </form> </body>

27 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 ); }

28 clearinterval Cancela a execução de uma ação definida pelo método setinterval() msg = setinterval(alertuser,4000); clearinterval(msg); Function alertuser(){ alert( Teste ); }

29 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>

30 Cronômetro 2 <body> <form> <input type= text value= 0 /> <button onclick= iniciar(); > Iniciar</button> <button onclick= parar(); >Parar</button> </form> </body>

Documentos relacionados

Incorporando JavaScript em HTML

Incorporando JavaScript em HTML Existem quatro maneiras de incorporar JavaScript em HTML. Vamos abordar as três primeiras, por ser mais comum: Entre as tags dentro do código HTML. A partir