4.1 Objetos do navegador
Como você já sabe, a linguagem JavaScript funciona dentro do navegador, então ela precisa de alguma forma interagir com esse mesmo navegador. Para fazer isso, o navegador possui vários objetos e funções disponíveis no JavaScript.
A primeira é an object window
, que descreve a janela do navegador. Ou melhor, eu costumava descrever quando os navegadores ficavam sem abas. Agora, o objeto window descreve a guia atual do navegador na qual a página com o script é carregada.
Em segundo lugar, este é an object document
o responsável pelo documento exibido na guia. Isso pode ser um pouco confuso. Para simplificar, digamos que documento é o que é exibido para o usuário e janela é o que esse documento é exibido.
Em terceiro lugar, este é an object console
o responsável pela saída para o console do navegador. Sim, os navegadores também possuem um console, usado principalmente para depurar o script e exibir mensagens de erro. Normalmente, você pode abri-lo pressionando o botão F12 em seu navegador.
Object window
, é o objeto de nível superior para todos os objetos de página. E embora você possa escrever nomes de objetos diretamente document
em console
seu script, na verdade, seus nomes window.document
e arquivos window.console
.
4.2 Diálogos em JavaScript
método alert()
Ele também an object window
possui várias funções que são visíveis para o script da página. O mais comumente usado é o alert()
. Ele permite que você exiba uma caixa de diálogo com uma mensagem para o usuário. O script é suspenso até que o usuário clique em OK.
Exemplo:
alert("JavaScript is the best!");
método prompt()
Há também uma função com a qual você pode solicitar ao usuário que insira algum valor - isto é prompt()
.
Exemplo:
var age = prompt("Enter Year of Birth");
método confirm()
Você pode exibir uma caixa de diálogo com dois botões Ok
- Cancel
pergunte ao usuário sobre alguma ação.
Exemplo:
var isOK = confirm("Are you ready");
4.3 evento onload()
E mais um momento útil e interessante. A janela do navegador tem um evento que é acionado quando o documento é totalmente carregado. Você pode especificar o código a ser executado depois que o documento for carregado e exibido.
Isso pode ser feito de três maneiras.
Primeiro, você pode incorporar o código JavaScript diretamente em uma página HTML como um valor de atributo:
<body onload="alert('document loaded');">
<img src="big-image.png">
</body>
Em segundo lugar, você pode incorporar código JavaScript simplesmente em uma página HTML:
<head>
<script>
function load()
{
alert('document loaded');
}
window.onload = load;
</script>
</head>
<body>
<img src="big-image.png">
</body>
Em terceiro lugar, podemos escrevê-lo um pouco mais curto declarando uma função anônima:
<head>
<script>
window.onload = function () {
alert('document loaded');
}
</script>
</head>
<body>
<img src="big-image.png">
</body>
4.4 evento onclick ()
E, finalmente, outro evento importante (evento) é event OnClick
. Que ocorre em qualquer elemento em que o usuário clicou. Assim como event OnLoad
pode ser definido de diferentes maneiras, daremos apenas o mais simples:
<body>
<img src="big-image.png" onclick="alert('user clicked on the image');">
</body>
GO TO FULL VERSION