Por que você deve estudar JavaScript?
Porque é umas das três linguagens que todos os desenvolvedores da Web precisam saber, então se você quer ser um desenvolvedor Web, essa linguagem deve está no seu currículo junto com HTML e CSS.
Resumidamente, JavaScript é usado para programar comportamentos de páginas da Web, porém não é o único lugar onde se usa JavaScript. Programas desktop e servidor usam JavaScript por exemplo, Node.js é o principal deles. Alguns bancos de dados como CouchDB e MongoDB fazem uso dessa linguagem também.
Você deve estar se perguntando, JavaScript tem alguma coisa haver com Java?. A resposta é não, são linguagens completamente diferentes, tanto em conceito quanto em design. Isso vai ficar mais claro no decorrer das aulas.
Como eu disse, o JavaScript programa comportamentos nas páginas, ele também altera conteúdo HTML, essa é umas das funções mais usadas no JavaScript e o método que faz essa proeza é o getElementById(). Nós vamos falar mais dele, por enquanto fique com um exemplo desse método.
Primeiro exemplo JavaScript
Primeiro exemplo JavaScript
<h3>Primeiro exemplo JavaScript</h3>
<button type="button" onclick="document.getElementById('demo').innerHTML = Date()">Clique para visualizar data e hora</button>
<p id="demo"></p>
Assim como o conteúdo, o JavaScript também pode alterar valores de atributos HTML. Se você não sabe o que é isso, recomendo fortemente que passe na seção HTML e veja nossos tutoriais sobre essa linguagem.
Veja o JavaScript entrando em ação
Para não nos alongarmos muito, o JavaScript pode alterar tudo dentro do mundo HTML. Conteúdo, atributos e estilos são o normal, além disso ele pode tanto ocultar quanto mostrar elementos, pode excluir elementos e pode cria-los.
O poder do JavaScript vai muito além disso, ele é praticamente o detentor das joias do infinito* no universo WEB.
Onde vamos escrever nossos códigos JavaScript?
Podemos escrever JavaScript dentro do HTML, usando para isso o par de tags <script> </script>.
Info! Antigamente usava-se o atributo type para especificar a linguagem de script usada. Não se faz mais isso, hoje JavaScript é a linguagem padrão do HTML.
Antes: <script type=”text/javascript”> códigos aqui </script>
hoje: <script> códigos aqui </script>.
Essa tag (<script>) geralmente vai aninhada com a tag <head>, ou seja, no cabeçalho do documento HTML, mas nada impede de você escrever dentro da tag <body>, em qualquer parte.
Agora vem a manha. Colocar os scripts no final da tag <body>, melhora a velocidade de exibição, isso porque a compilação de scripts desacelera a exibição, ou seja, o navegador só vai interpretar os scripts depois de baixar todo o conteúdo da página. Se você faz o contrário, insere os scripts no início de <body> ou entre as tags <head>, todo o código JavaScript será lido e compilado, só depois o conteúdo será interpretado e baixado para o usuário, o desempenho da página pode ser muito prejudicado usando esse método.
Temos ainda uma terceira opção, arquivos externos. Usar arquivos externos torna tudo mais fácil, principalmente quando o mesmo código é usado em várias páginas diferentes. Quando você escrever arquivos externos, lembre-se de usar a extensão .js.
Para usar um script externo, coloque o atributo src (source) e o caminho/nome do arquivo. Se estiver usando os dois arquivos na mesma pasta, não precisa do caminho. Ex: <script src=”meuScript.js”></script>.
O script se comportará como se estivesse exatamente onde a tag <script> está localizada. Então a dica de desempenho também vale para scripts externos.
Scripts externos (.js) não podem conter a tag <script>, o código deve ser escrito livre dessa tag.
As vantagens de se usar scripts externos não muitas, dentre elas podemos citar:
- Separa o HTML e o código JavaScript;
- Torna mais fácil de ler e manter tanto HTML quanto JavaScript;
- Arquivos .js podem ser armazenados em cache, isso acelera o carregamento de páginas.
Vida longa ao CACHE!
Carlos Magno – Engenheiro de Rede
Mão na massa
Antes de realmente metermos a mão na massa, algumas declarações devem ficar claras.
Programas JavaScript: Um programa de computador é uma lista de instruções que devem ser executadas, chamamos isso de instruções mesmo. Um programa JavaScript é a mesma coisa, mas em vez de serem executadas pelo computador, serão executadas pelo navegador, que está instalado em um computador e faz uso de memória, processador, etc. No final é basicamente a mesma coisa, entenda que a saída será sempre em um navegador.
As instruções JavaScript são compostas por:
- Valores;
- Operadores;
- Expressões;
- Palavras-chave;
- Comentários.
Veja o famoso exemplo Hello World!: document.getElementById(“demo”).innerHTML = “Hello World!”;
Em um programa JavaScript, as instruções são executadas uma a uma e na ordem em que foram escritas.
Ponto e vírgula: Pontos-e-vírgulas separam as instruções JavaScript, então lembre-se de adicionar um (;) no final de cada instrução JavaScript, principalmente se você escrever as instruções na mesma linha.
Obs: Se o ponto e vírgula for omitido e cada instrução estiver em uma linha separada, não haverá erro no código, mas isso não é uma boa prática da W3C. Se você quiser, por exemplo, criar um minifier (deixar todo o código escrito em uma única linha) para aumentar o desempenho da página e não tiver (;) no final de cada instrução, com toda certeza vai bugar.
Espaço em branco: JavaScript ignora espaços. Você pode adicionar espaços para deixar seu script mais legível. var nome = “Rogério” e var nome=”Rogério” é a mesma coisa.
Blocos de código: Algumas instruções JavaScript podem ser agrupadas em blocos, dentro de chaves {…}. O objetivo disso é definir instruções que deve ser executadas juntas. Um bom exemplo disso são as funções (falaremos delas posteriormente).
function fazerAlgo() {
document.getElementById("demo1").innerHTML = "Olá mundo!";
document.getElementById("demo2").innerHTML = "Adeus mundo!";
}
Há também algumas, na verdade várias, palavras chaves no JavaScript. São palavras reservadas e que não podem ser usadas como nome de variáveis. Por exemplo, pause, if, for, etc. Ao longo do tutorial você vai aprender todas elas, “ou quase todas”.
Saídas JavaScript: O JavaScript pode exibir dados de diferentes maneiras:
- Escrevendo em um elemento HTML, usando innerHTML;
- No próprio HTML usando document.write();
- Em uma caixa de alerta, window.alert();
- E no console do navegador, console.log().
<!DOCTYPE html>
<html>
<body>
<h1>Título</h1>
<p>Parágrafo</p>
<p id="demo"></p>
<button type="button" onclick="document.write(5 + 6)">Tente isso.</button>
<script>
document.getElementById("demo").innerHTML = 5 + 6;
document.write("Olá mundo");
window.alert("Olá mundo");
console.log("Olá mundo");
</script>
</body>
</html>
Info! Para usar o innerHTLM é necessário conhecer o id do elemento. Para pegar o id usa-se a função document.getElementById(id).
Info! O document.write () é geralmente usado para fim de teste.
Atenção! Se usar o document.write( após o carregamento do documento HTML, todos os elementos existentes serão excluídos.
Info! Usando o window.alert() será exibido uma caixa de alerta com os dados.
Info! Finalmente, o console.log() serve para fim de depuração, a saída é no console do navegador. Para visualizar o console, clique com botão direito em algum lugar da página e depois em inspecionar. À direita você verá varias opções, o console deve estar lá.
Vamos ficar até aqui, por enquanto, mas siga com os estudos sobre JavaScript, tenho certeza que você vai encontrar muita coisa legal nos próximos capítulos desta série.
