JavaScript básico

O que realmente é JavaScript

JavaScript é uma linguagem de programação que pode ser aplicada em um documento HTML e usada para criar interações dinâmicas em sites. Ela foi inventada por Brendan Eich, co-fundador do projeto Mozilla, da Fundação Mozilla e da Corporação Mozilla.

Você pode fazer muita coisa com JavaScript. Você vai começar com coisas simples como ajustar layouts, fazer coisas acontecerem quando botões são clicados, sliders e galerias de imagem — mas a medida que você for ganhando experiência com a linguagem, você poderá criar jogos, animações gráficas em 2D e 3D, aplicativos com base de dados desenvolvidas e muito mais.

JavaScript é por si só uma linguagem compacta, mas muito flexível, e desenvolvedores tem escrito diversas ferramentas para que você possa ter acesso à várias funcionalidades extras com pequeno esforço. Essas incluem:

• Application Programming Interfaces (APIs) construídas em web browsers, possuem várias funções como criar HTML e atribuir estilos de CSS, para pegar e manipular um stream de vídeo da webcam de um usuário, ou gerar gráficos 3D e amostras de áudio.
• APIs de terceiros, que permitem aos desenvolvedores incorporarem funcionalidades em seus sites de outras propriedades, como Twitter ou Facebook.
• Frameworks e bibliotecas, que você pode aplicar em seu HTML para permitir que você construa rapidamente sites e aplicações.

Um exemplo "hello world"

A sessão acima soa excelente, e de fato é — JavaScript é uma das tecnologias web mais incríveis, e quando você começar a ficar bom nisso, seus sites vão entrar em uma nova dimensão de poder e criatividade.

No entanto, JavaScript é um pouco mais difícil do que HTML e CSS, e você terá que começar devagar e continuar trabalhando em pequenos passos. Para começar, nós vamos mostrar a você como adicionar algum Javascript realmente básico para sua página, para criar um exemplo "hello world!" (o padrão em exemplos de programação básica.)

1. Primeiro, vá na pasta do seu site e crie um novo arquivo chamado main.js e salve na sua pasta scripts.
2. Depois, vá no seu arquivo index.html e digite o seguinte código em uma nova linha antes da tag de fechamento </body>:

   <script src="scripts/main.js"></script>

3. Isso é basicamente a mesma coisa que o elemento <link> para o CSS — ele insere o JavaScript na página, para que ele tenha efeito no HTML, no CSS, e no que mais estiver na página.
4. Agora adicione o seguinte código no arquivo main.js:

   var myHeading = document.querySelector('h1');
   myHeading.innerHTML = 'Hello world!';

5. Tenha certeza que seus arquivos HTML e Javascript estão salvos, e carregue o index.html no seu browser. Você deve ver algo do tipo:

O que aconteceu?

Seu cabeçalho mudou para "Hello world!" usando JavaScript. Nós fizemos isso usando uma função chamada querySelector() para pegar uma referência do nosso cabeçalho e armazená-la em uma variável chamada myHeading. Isso é similar ao que fizemos em CSS usando os seletores . Quando nós queremos fazer algo a um elemento, então precisamos selecioná-lo primeiro. Depois disso, nós indicamos o valor da propriedade myHeading.innerHTML (que representa o conteúdo do cabeçalho) para "Hello world!".

Curso intensivo sobre o básico da linguagem

Vamos explicar só o básico das funcionalidades da linguagem  JavaScript, para te dar um entendimento básico de como tudo isso funciona. Essas características são comuns em todas as linguagens de programação, se você consegue entender os fundamentos, você está pronto para programar em qualquer linguagem.

Variáveis

Variáveis são caixas nas quais você armazena valores. Você começa declarando uma variável com a palavra-chave var, seguida por qualquer nome que você queira chamá-la:

var myVariable;

Depois de declarar uma variável, você pode dar a ela um valor:

myVariable = 'Bob';

Você pode fazer as duas operações na mesma linha se você quiser:

var myVariable = 'Bob';

Você pode retornar o valor chamando a variável pelo nome:

myVariable;

Depois de dar à variável um valor, você pode mudá-lo:

var myVariable = 'Bob';
myVariable = 'Steve';

Note que as variáveis tem diferentes tipos de dados:

Mas, por que nós precisamos de variáveis? Bom, variáveis são necessárias para fazer praticamente tudo em programação. Se os valores não pudessem mudar, então você não poderia fazer nada dinâmico, como personalizar uma mensagem de boas-vindas para o usuário que visita seu site, ou mudar a imagem mostrada em uma galeria de imagens.

Comentários

Você pode colocar comentários em códigos JavaScript, assim como pode colocar no CSS. Para um comentário com várias linhas, por exemplo, usamos /*...*/:

/* 
This is a multi line comment 
*/

Se o seu comentário possuir apenas uma linha, você pode optar por colocá-lo depois de duas barras invertidas, como por exemplo:

// This is a comment

Operadores

Um operador é um símbolo matemático que pode atuar em dois valores (ou variáveis) e produzir um resultado. Na tabela a seguir, você pode ver alguns dos operadores mais simples, com alguns exemplos para tentar em seu console de browser.

Há vários outros operadores para explorar, mas por enquanto esses são suficientes. Veja Expressões e operadores para ver uma lista completa.

Condicionais

Condicionais são estruturas de código que te permitem testar se uma expressão retorna verdadeiro ou falso, e então executar diferentes linhas de código dependendo do resultado. A forma mais comum de condicional é chamada if ... else. Então, por exemplo:

var iceCream = 'chocolate';
if (iceCream === 'chocolate') {
  alert('Yay, I love chocolate ice cream!');    
} else {
  alert('Awwww, but chocolate is my favorite...');    
}

A expressão dentro do if ( ... ) é o teste — ela usa o operador de identificação (como descrito anteriormente) para comparar a variável iceCream com a string chocolate para ver se elas são iguais. Se essa comparação retorna true, execute o primeiro bloco de código. Se não, pule esse código e execute o segundo bloco depois do comando else.

Funções

Funções são uma maneira de encapsular funcionalidades que você tem que usar mais de uma vez, então você pode chamar aquela função com um nome simples de função, e não reescrever todo o código de novo e de novo a cada vez que você quiser usá-lo. Você já viu algumas funções, por exemplo:

1. var myVariable = document.querySelector('h1');

2. alert('hello!');

Essas funções (document.querySelector e alert)são pré-definidas para você usar quando quiser.

Se você vê algo que parece com um nome de variável, mas com parênteses — () — depois disso, provavelmente é uma função. Funções geralmente tem argumentos — pedaços de dados que elas precisam para fazerem o trabalho delas. Os argumentos são colocados dentro dos parênteses e separados por vírgulas se houver mais de um.

Por exemplo, a função alert() faz com que uma caixa pop-up apareça dentro da janela do browser, mas nós precisamos passar uma string como argumento para dizer qual mensagem deve ser escrita na caixa pop-up.

A boa noticia é que você pode definir suas próprias funções — no próximo exemplo nós escrevemos uma função simples que recebe 2 números como argumentos e os multiplicar:

function multiply(num1,num2) {
  var result = num1 * num2;
  return result;
}

Tente rodar o código acima no console, e então tente usar sua nova função algumas vezes. Por exemplo:

multiply(4,7);
multiply(20,20);
multiply(0.5,3);

Eventos

Para criar interatividade em um site, você tem que usar eventos — estruturas de código que percebem as coisas que acontecem no browser e permitem que você rode um código em resposta. O exemplo mais óbvio é o evento de clique, que é disparado pelo browser quando o mouse clica em algo. Para demonstrar isso, tente digitar o código a seguir no seu console, e depois clique na página:

document.querySelector('html').onclick = function() {
    alert('Ouch! Stop poking me!');
}

Há muitas maneiras de associar um evento a um elemento, aqui estamos selecionando o elemento HTML e fazendo sua propriedade onclick igual a uma função anônima que contem o código que nós queremos rodar quando o clique ocorrer.

Note que:

document.querySelector('html').onclick = function() {};

é equivalente a

var myHTML = document.querySelector('html');
myHTML.onclick = function() {};

É só uma maneira mais curta de escrever isso.

Dando uma melhorada no seu site exemplo

Agora que nós vimos o básico de JavaScript, vamos adicionar algumas funcionalidades básicas ao nosso site para te dar uma noção do que é possível fazer.

Adicionando um modificador de imagem

Nessa parte, nós adicionaremos outra imagem no nosso site, e vamos usar o JavaScript para alternar entre as duas, quando a imagem for clicada.

1. Antes de tudo, ache outra imagem que você gostaria que aparecesse no seu site. Tenha certeza que ela tem o mesmo tamanho que sua primeira imagem, ou o mais perto disso possível.
2. Salve a imagem na pasta imagens.
3. Vá no seu arquivo main.js, e digite o seguinte código JavaScript (se seu hello world em JavaScript ainda estiver lá, delete-o):
    

4. var myImage = document.querySelector('img');
   
   myImage.onclick = function() {
       var mySrc = myImage.getAttribute('src');
       if(mySrc === 'images/firefox-icon.png') {
         myImage.setAttribute ('src','images/firefox2.png');
       } else {
         myImage.setAttribute ('src','images/firefox-icon.png');
       }
   }

5. Salve todos os arquivos e carregue o index.html no browser. Agora quando você clicar na imagem, ela deve mudar para a outra!

Então aqui, nós estamos armazenando uma referência ao nosso elemento de imagem na variável myImage. Depois, nós fazemos o evento onclick dessa variável igual a uma função anônima. Agora, toda vez que esse elemento de imagem é clicado:

1. Nós recuperamos o valor do atributo src da imagem.
2. Nós usamos uma condicional para checar se o valor src é igual ao caminho da imagem original:
   1. Se for, nós mudamos o valor do src para o caminho da segunda imagem, forçando a outra imagem a ser carregada dentro do elemento <image>.
   2. Se não é (significando que já mudou), nós mudamos o valor src de volta ao caminho da imagem original, para mudar ao que era antes.

Adicionando uma mensagem personalizada de boas vindas

Agora nós vamos adicionar um pouco mais de código, para mudar o título da página, incluindo uma mensagem personalizada de boas vindas para quando um usuário realizar sua primeira visita ao site. Essa mensagem de boas vindas vai persistir quando o usuário deixar o site e voltar. Nós vamos ainda incluir uma opção para mudar o usuário e portanto a mensagem de boas vindas aparecerá sempre que necessária.

1. Em index.html, adicione a seguinte linha de código antes do elemento <script>:

   <button>Change user</button>

2. Em main.js, adicione o seguinte código no fim do arquivo, exatamente como está escrito — isso pega referências para o novo botão que adicionamos e para o cabeçalho, e guarda ambos em variáveis:

   var myButton = document.querySelector('button');
   var myHeading = document.querySelector('h1');

3. Agora adicione a seguinte função para criar a saudação personalizada — isso não vai fazer nada ainda, mas usaremos mais tarde:

   function setUserName() {
     var myName = prompt('Please enter your name.');
     localStorage.setItem('name', myName);
     myHeading.innerHTML = 'Mozilla is cool, ' + myName;
   }

   Essa função contem uma função prompt(), que traz uma caixa de diálogo assim como o alert() faz; a diferença é que o prompt() pede ao usuário para inserir algum dado, e guarda os dados em uma variável quando o botão OK é pressionado. Nesse caso, nós estamos pedindo ao usuário para digitar seu nome. Agora, nós invocamos uma API chamada localStorage, o que nos permite guardar dados no browser, e o usa mais tarde. Nós usamos a função setItem() do localStorage's para criar e guardar um item de dado chamado 'name', e relaciona seu valor à variável  myName que contem o nome que o usuário digitou. Finalmente, nós associamos o innerHTML do cabeçalho a uma string, mais o nome do usuário.
4. Agora, adicione esse bloco if ... else — nós podemos escrever esse código de inicialização, assim ele estabelece o aplicativo quando ele abrir pela primeira vez:

   if(!localStorage.getItem('name')) {
     setUserName();
   } else {
     var storedName = localStorage.getItem('name');
     myHeading.innerHTML = 'Mozilla is cool, ' + storedName;
   }

   Primeiramente, esse bloco usa o operador de negação (logical NOT) para checar se o item de dados name existe — se não existir, a função setUserName() roda para criá-lo. Se ele já existir (isso é, o usuário tiver digitado quando visitou o site anteriormente), nós recuperamos o nome guardado usando getItem() e associamos o innerHTML do cabeçalho a uma string, mais o nome do usuário, assim como fizemos dentro de setUserName().
5. Finalmente, coloque o gerenciador de evento onclick no botão, para que quando clicado, ele rode a função setUserName(). Isso permite ao usuário dar um novo nome sempre que quiserem ao pressionar o botão:

   myButton.onclick = function() {
     setUserName();
   }
   

Agora quando você visitar seu site pela primeira vez, vai te perguntar o nome de usuário e te dar uma mensagem personalizada. Você pode então mudar o nome toda vez que quiser ao pressionar o botão. Como um bonus, porque o nome é guardado dentro de localStorage, ele persiste depois que a janela do site é fechada, então a mensagem personalizada sempre estará lá quando você abre o site novamente!

Conclusão

Se você tiver seguido todas as instruções do artigo, você deve terminar com uma página que parece algo do tipo (você também pode ver nossa versão aqui):

Se você ficar empacado, você pode sempre comparar seu trabalho com o nosso exemplo finalizado no Github.

Aqui, nós só arranhamos a superfície do JavaScript. Se você gostou de aprender sobre isso é quer aprofundar seus estudos, vá ao nosso Guia de JavaScript.