Previous | Table of Contents | Next |
JavaScript Math Object | JavaScript Document Object |
O JavaScript objeto de janela senta-se no topo da hierarquia de Objeto de JavaScript e representa a janela do browser (ou windows se você tiver mais de uma janela do navegador abertas ao mesmo tempo). Até este capítulo temos focado nos internos e na sintaxe do JavaScript. Neste capítulo vamos começar a fazer as coisas acontecerem na tela (que, afinal, é um dos principais propósitos do JavaScript). O objecto da janela permite aos programadores executar tarefas como abrir e fechar as janelas do navegador, mostrar as janelas de alerta e de alerta e configurar os tempos-limite (especificando uma acção a ter lugar após um determinado período de tempo). Embora os Timeouts sejam uma característica do objeto janela, vamos cobri-los no capítulo de Timeouts JavaScript, em vez de Neste capítulo.
Referenciando o Objeto window do JavaScript
Como abrangida no Objecto de JavaScript Básico geralmente é necessário o uso de notação de ponto ao acessar propriedades ou métodos de um objeto. Por exemplo, o seguinte fragmento de script acessa o método write() do objeto de documento:
document.write("Hello");
O objeto de janela é o objeto de nível superior da hierarquia de objetos. Como tal, sempre que um método de objeto ou propriedade é referenciado em um script sem o nome do objeto e prefixo do ponto, ele é assumido por JavaScript para ser um membro do objeto janela. Isto significa, por exemplo, que ao invocar o método de alerta de janela() para mostrar uma janela de alerta a janela. o prefixo não é obrigatório. Portanto, o seguinte método chama alcançar a mesma coisa:
window.alert();alert()
JavaScript janela de Propriedades do Objecto
O JavaScript objeto de janela contém um número de propriedades que pode ser inspecionado e utilizado em um script:
- a janela.fechado-usado ao manusear várias janelas, esta propriedade indica se uma janela foi fechada ou não.
- janela.defaultstatus / window.status-defaultstatus indica a mensagem por omissão mostrada na barra de Estado do navegador. o status especifica uma mensagem temporária para mostrar na barra de Estado do navegador no lugar do padrão. Desactivado em muitos navegadores.
- janela.frames-se a janela contém frames, esta lista contém a lista de objectos de frame (ver Arrays de JavaScript sobre o acesso a arrays).
- window.name -as janelas abertas por um script devem ter um nome. Esta propriedade contém o nome do objecto da janela correspondente.
- janela.opener-quando uma janela foi aberta num programa contido noutra janela, esta propriedade da janela-filha contém uma janela de referência que a abriu.
- janela.pai-ao trabalhar com os quadros numa janela esta propriedade contém uma referência ao objecto da janela que contém a moldura.
- janela.screen-um objeto que contém informações sobre a tela na qual a janela é exibida (as propriedades contidas neste objeto incluem altura, largura, disponibilidade, availewidth e colorDepth).
- janela.auto-uma referência à janela actual.
- janela.top-uma referência à janela de nível superior quando se trabalha com quadros.
abrir janelas de navegador usando JavaScript
uma nova janela de navegador pode ser aberta a partir de um script JavaScript usando o método open() do objeto janela. A sintaxe para abrir uma nova janela é a seguinte:
newWindowObj = window.open("URL", "WindowName", "feature, feature, feature ... ");
o seguinte fornece uma explicação dos argumentos passados ao método open ():
- URL – especifica o URL da página web a ser carregado na nova janela. Se não for indicado nenhum URL, é carregada uma janela em branco.
- WindowName-especifica o nome da janela e é usado para se referir à janela.
- funcionalidades-uma lista separada por vírgulas de funcionalidades que lhe permitem personalizar a aparência da janela. As opções são::
Configuração | Explicação |
---|---|
largura | Especifica a largura inicial do seu navegador da janela do cliente (ver innerWidth para o tamanho da área de conteúdo) |
altura | Especifica a altura inicial do seu navegador da janela do cliente (consulte download para o tamanho da área de conteúdo) |
innerWidth | Especifica a largura inicial da janela de área de conteúdo |
download | Especifica a altura inicial da janela de conteúdo área |
outerWidth | Especifica a largura inicial da janela do navegador |
outerHeight | Especifica a altura inicial da janela do navegador |
barra de ferramentas | Especifica se a janela deve conter a barra de ferramentas do navegador ou não |
estado | Especifica se a janela deve conter a barra de status do navegador ou não |
dependentes | Especifica se a janela deve fechar-se em uníssono com a sua janela principal |
menu | Especifica se a janela deve conter o navegador de menus |
localização | Especifica se a janela deve conter a localização do navegador/caixa de URL |
barras de rolagem | Mostra/Esconde navegador horizontal/vertical barras de rolagem |
redimensionável | Especifica se o usuário tem o direito de redimensionar a janela depois que ele aparece. |
diretórios | especifica se a janela deve conter a barra de ferramentas pessoal do navegador. |
copyHistory | Especifica se a nova janela deve conter uma cópia do histórico da URL do invocando janela |
esquerda | Especifica o número de pixels do lado esquerdo da tela para a nova janela |
top | Especificado o número de pixels a partir do topo do ecrã para a nova janela |
alwaysLowered | Cria uma nova janela que está sempre posicionado sob as outras janelas do navegador. Muitas vezes usado para aqueles anúncios pop-under irritantes. |
alwaysraized | cria uma nova janela que está sempre posicionada sobre o topo das outras janelas do navegador na tela. |
z-lock | bloqueia o nível em que o navegador aparece em relação a outras janelas do navegador. |
as características de altura, largura e posição são definidas usando números. As opções restantes do recurso podem ser definidas usando valores true ou false (também sim, não e 1 e 0 podem ser usados no lugar de true E false). Um atributo ausente é considerado falso. O exemplo seguinte cria uma nova janela com um menu, dimensão específica e sem barra de Ferramentas:
newWindowObj = window.open("URL", "WindowName", "toolbar=0, menubar=1, innerHeight=200, innerWidth=300");
fechar janelas de navegação usando JavaScript
uma janela pode ser fechada usando o método de fecho do objeto da janela (). O nome da janela (especificado no Método open ()) deve ser referenciado ao executar uma aproximação de modo que você tenha certeza de fechar a janela correta. Por exemplo, o seguinte código cria uma nova janela e cria um pushbutton que, quando carregado, fecha a nova janela:
<script language="JavaScript" type="text/javascript">newWindowObj = window.open ("", "MyWindow");</script><form action="null"> <input type="button" value="Close Window" onclick="newWindowObj.close()" /></form>
também é possível fechar a janela que abriu a janela atual usando o abridor de propriedade da janela atual objeto:
window.opener.close()
Isto irá fechar a janela que abriu a janela na qual o script acima é executado.
mover e redimensionar as janelas
uma janela pode ser movida para coordenadas específicas na tela usando o método moveTo() do objeto da janela que leva as coordenadas x e y como argumentos. O exemplo seguinte move uma nova janela para a localização 100, 200 no ecrã quando o botão “Mover a janela” é pressionado:
além de mover uma janela para uma nova localização específica também é possível mover uma janela em relação à sua localização atual no ecrã usando o método moveBy() do objeto da janela JavaScript. Mais uma vez, o método leva os valores x e y que são adicionados às coordenadas X e y atuais da janela especificada. Os valores negativos podem ser usados para mudar a direção do movimento:
<script language="JavaScript" type="text/javascript">newWindowObj = window.open ("", "MyWindow");</script><form action="null"> <input type="button" value="Move Window" onclick="newWindowObj.moveTo(100, 200)" /></form>
A janela resizeTo() e resizeBy() métodos funcionam da mesma forma em que eles permitem que você alterar o tamanho de uma janela para um tamanho específico, ou para um novo tamanho em relação ao tamanho atual.
mudar o foco da janela
quando uma janela é a janela seleccionada de momento no ecrã, diz-se que tem o foco. Normalmente, se carregar com o cursor do rato numa janela, dá-lhe o foco da janela. Com JavaScript é possível alterar programaticamente o foco de uma janela usando os métodos de foco() e borrão (). O exemplo a seguir exibe uma nova janela, confunde-lo para que a janela de abertura ainda tem o foco e fornece um botão para alternar o foco para a nova janela:
<script language="JavaScript" type="text/javascript">newWindowObj = window.open ("", "MyWindow");newWindowObj.blur();</script><form action="null"> <input type="button" value="Focus New Window" onclick="newWindowObj.focus()" /></form>
Apresentar a Caixa de Mensagem de caixas de diálogo
O JavaScript objeto de janela fornece métodos para apresentar três tipos de caixas de diálogo de mensagem, o de alerta, de confirmação e de prompt de caixas de diálogo:
- alerta – destina-se a exibir uma mensagem para o usuário. Ele contém uma área de mensagem onde a mensagem de alerta deve ser exibida e um botão” OK ” que o usuário pode clicar para descartar a janela. O método alert () leva um único argumento que representa a mensagem a ser mostrada na janela. O fragmento da página web seguinte mostra uma janela de alerta com a mensagem “Você não tem uma senha válida” quando o botão “Mostrar alerta” é clicado:
<form action="null"> <input type="button" value="Show Alert" onclick="window.alert('You do not have a valid password')" /></form>
- confirmação – usado quando é necessário obter uma resposta sim ou não do utilizador. Este tipo de janela mostra com uma mensagem e botões “OK” e “cancelar”. O método confirm () leva a mensagem a ser mostrada ao Utilizador como um argumento e devolve verdadeiro ou falso, dependendo se o utilizador carregou em “OK” ou “cancelar”:
<script language="JavaScript" type="text/javascript">function showConfirmation(){ var result = confirm("Would you like to continue?"); if (result) document.write("Continue"); else document.write("Do not continue");}</script><form action="null"> <input type="button" value="Show Confirmation" onclick="showConfirmation()" /></form>
- prompt – desenhado para permitir que a informação seja obtida do utilizador. A janela consiste em uma mensagem para o usuário, um campo de entrada de texto para a entrada de dados e botões OK e cancelar. O método prompt () pega na mensagem para ser mostrada como argumento e devolve o valor introduzido pelo utilizador:
<script language="JavaScript" type="text/javascript">function showPrompt(){ var userInput = prompt("Please enter your name:"); document.write("Hello, " + userInput);}</script><form action="null"> <input type="button" value="Show Prompt" onclick="showPrompt()" /></form>
Previous | Table of Contents | Next |
JavaScript Math Object | JavaScript Document Object |