Aqui veremos detalhes básicos do JavaScript, lembrando que não tem nenhuma relação com Java, já que uma é uma linguagem usada geralmente do lado do navegador, ou front-end, e a outra é uma linguagem baseada em construir aplicações do lado do servidor, ou server-side, ou até mesmo aplicações desktop.
Apesar de existirem motores de JavaScript que operam do lado do servidor, como JScript, Node.js, e até mesmo motores dentro do Java (Nashorn), focaremos aqui apenas no JavaScript para navegadores.
Em um código HTML, você precisa incluir o código JavaScript no mesmo momento em que ele irá ler o arquivo, ou seja, tanto o código HTML como o código JavaScript, é lido e executado linha por linha, então a importância da ordenação no uso do código é elementar, ou então poderá executar códigos enquanto não houver ainda elementos renderizados, gerando erro.
Para incluir um código JavaScript em uma página Web, você precisa usar o seguinte elemento:
<script type="text/javascript"> // Código Javascript </script>
Este é a tag HTML para se inserir um script, e tudo que estiver dentro da tag, será executado como código JavaScript, e não mais como HTML.
<script type="text/javascript">
alert("Olá Mundo!");
</script>
Isto fará aparecer uma tela de alerta ao navegador contendo um botão de "Ok", com a mensagem "Olá Mundo!".
Assim que o navegador faz a leitura do script, o alerta é exibido, e a renderização do restante do conteúdo é pausado neste momento até que o usuário clique em "ok", deixando o navegador terminar de renderizar a página.
Mas cuidado com o tempo de execução do código JavaScript, pois como é lido linha por linha, cuidado para que o elemento que queira manipular e/ou alterar, exista antes de querer alterar, ou então terá um erro, veja o exemplo:
<html>Este código por exemplo, irá gerar o seguinte erro:
<head>
<title>Exemplo</title>
<script type="text/javascript">
document.getElementById("texto1").innerText = "Texto 2";
</script>
</head>
<body>
<p id="texto1">Texto</p>
</body>
</html>
Uncaught TypeError: Cannot set property 'innerText' of nullEste erro ocorreu porque o elemento texto1 ainda não existe no momento que o HTML foi renderizado, então nem sempre o script pode ser utilizado na tag head de um site, a não ser que utilize funções e faça uso dos mesmos apenas quando a página terminar sua carga, colocando o script no final da página.
Até algum tempo, era prática utilizar todos os plugins e scripts no cabeçalho, na tag head do HTML, mas por questões de abrir o site mais rápido, alguns adotam a prática de colocar todos os códigos de script próximo ao final do </body>.
O que se faz com JavaScript?
Com o código JavaScript, você pode manipular elementos na página web, seja no document ou no window.Estes são elementos que existem por padrão para qualquer página no navegador, ou seja, com valores pré-definidos para conseguir manipular ou executar, como exemplo, o alert, é uma função que pertence ao objeto window, mas como pertence ao escopo global, você pode acessá-lo diretamente.
Ou seja, seria o mesmo que escrever:
<script type="text/javascript">
alert("Olá Mundo!");
</script>
Poderia ser também:
<script type="text/javascript">
window.alert("Olá Mundo!");
</script>
Estes métodos e funções existem por padrão no navegador, e com o window, você pode por exemplo alterar o título da página no navegador (no Google Chrome, nas guias), ou o status que fica na barra de status (no caso do Internet Explorer com a barra de status ativada), ou outras informações como navegador utilizado, tamanho da tela do usuário, e muitas outras informações, como até mesmo o sistema operacional do usuário.
Alguns itens dentro do escopo window possíveis:
window.history(): Esta função permite retornar o usuário para de onde ele veio, a mesma função do clique no botão voltar. Ex.: "history.back();" ou também "history.back(-1);".
window.screen: Pode-se obter o tamanho atual da tela do navegador.
window.screen.width: Pode obter a largura da tela do usuário.
window.innerWidth: Pode obter a largura que o documento está sendo renderizado no navegador, ou seja, se a janela do usuário não estiver maximizada, este valor será menor, pois irá contar apenas a área visível.
Repare que elementos terminados com parênteses "()" são funções, e elementos terminados sem estes parênteses são variáveis. As variáveis possuem valores, podendo ser número, textos, ou conjunto de dados, que também são chamados de dicionários ou Arrays.
Outra curiosidade referente ao document, ele também faz parte do escopo window, ou seja, também pode ser acessível como window.document.*.
Ou seja, com JavaScript você pode fazer praticamente tudo o que quiser com o navegador, controlar elementos Web, div, página, scroll, título da tela, inclusive outros itens de mídia, como música, áudio, e muito mais. A criatividade não tem limites.
Comentários
Postar um comentário