JavaScript é a linguagem de programação usada para adicionar interatividade ao seu site (por exemplo: jogos, respostas quando botões são pressionados ou dados são inseridos em formulários, estilo dinâmico, animações). Esse artigo ajuda você a começar com essa linguagem interessante e dá uma idéia do que é possível.

O que é JavaScript, realmente?

JavaScript (abreviado como "JS") é uma linguagem de programação dinâmica cheia de recursos que quando aplicada em um documento HTML, pode fornecer interatividade dinâmica em sites. Foi inventada por Brendan Eich, co-fundador do projeto Mozilla, da Fundação Mozilla e da Corporação Mozilla.

JavaScript é incrivelmente versátil. Você pode começar pequeno, com carrosséis, galerias de imagens, layouts flutuantes e respostas a cliques de botão. Com mais experiência, você poderá criar jogos, gráficos 2D e 3D animados, aplicativos abrangentes baseados em bancos de dados e muito mais!

JavaScript em si é bastante compacto, mas muito flexível. Os desenvolvedores escreveram uma grande variedade de ferramentas sobre a linguagem JavaScript principal, desbloqueando uma grande quantidade de funcionalidades extras com o mínimo de esforço. Essas incluem:

  • Interfaces de programação de aplicativos no navegador (APIs) - APIs integradas em navegadores da Web, fornecendo funcionalidade como criar dinamicamente HTML e definir estilos CSS, coletar e manipular um fluxo de vídeo da webcam do usuário ou gerando gráficos 3D e amostras de áudio.
  • APIs de terceiros  — permitem que os desenvolvedores incorporem funcionalidades em seus sites de outros provedores de conteúdo, como o Twitter ou o Facebook.
  • Estruturas e bibliotecas de terceiros — você pode aplicá-las ao seu HTML para permitir que você crie rapidamente sites e aplicativos.

Como este artigo deve ser apenas uma introdução ao JavaScript, não vamos confundir você neste estágio, falando em detalhes sobre qual é a diferença entre a linguagem JavaScript principal e as diferentes ferramentas listadas acima. Você pode aprender tudo isso em detalhes mais tarde, em nossa área de aprendizado de JavaScript e no restante do MDN.

Abaixo, apresentaremos alguns aspectos da linguagem principal, e você também poderá jogar com alguns recursos da API do navegador. Diverta-se!

Um exemplo "Olá Mundo"

A seção acima pode parecer realmente empolgante, e assim deve ser  — o JavaScript é uma das tecnologias mais ativas da Web e, à medida que você começa a usá-lo bem, seus sites entrarão em uma nova dimensão de poder e criatividade.

A introdução acima parece ser empolgante, e de fato é — JavaScript é uma tecnologia incrível, e quando você começar a pegar o jeito, seus sites vão entrar em um novo patamar de criatividade e interação.

No entanto, ficar confortável com o JavaScript é um pouco mais difícil do que ficar confortável com HTML e CSS. Você pode ter que começar pequeno e continuar trabalhando em pequenos passos consistentes. Para começar, mostraremos como adicionar alguns JavaScript básicos à sua página, criando um exemplo de "olá mundo!" (o padrão em exemplos básicos de programação).

Importante: Se você não acompanhou o restante de nosso curso, faça o download desse código exemplo e use-o como um ponto de partida.

  1. Primeiro, vá para o seu site de teste e crie uma nova pasta chamada scripts. Em seguida, dentro da nova pasta de scripts que você acabou de criar, crie um novo arquivo chamado main.js. Salve na sua pasta de scripts.
  2. Em seguida, no seu arquivo index.html, insira o seguinte elemento em uma nova linha logo 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 aplica o JavaScript à página, para que ele tenha efeito no HTML (junto com o CSS e qualquer outra coisa na página).
  4. Agora adicione o seguinte código no arquivo main.js:
    var myHeading = document.querySelector('h1');
    myHeading.textContent = 'Hello world!';
  5. Por fim, verifique se os arquivos HTML e Javascript estão salvos e, em seguida, carregue o index.html no navegador. Você deve ver algo do tipo:

Nota: A razão pela qual colocamos o elemento <script> perto da parte inferior do arquivo HTML, é que o HTML é carregado pelo navegador na ordem em que ele aparece no arquivo. Se o JavaScript é carregado primeiro ele pode afetar o HTML abaixo dele, mas as vezes isso pode não funcionar, já que o JavaScript seria carregado antes do HTML em que ele deveria trabalhar. Portanto, colocar o JavaScript próximo à parte inferior da página HTML geralmente é a melhor estratégia.

O que aconteceu?

Seu texto de título foi alterado para "Hello world!" usando JavaScript. Você fez isso primeiro usando uma função chamada querySelector() para obter uma referência ao título e armazená-lo em uma variável chamada myHeading. Isso é muito parecido ao que fizemos usando seletores CSS. Quando queremos fazer algo em um elemento, primeiro você precisa selecioná-lo.

Depois disso, você define o valor da propriedade textContent para "Hello world!", na variável myHeading (que representa o conteúdo do título).

Nota: Os dois recursos usados acima são partes da API do Modelo de Objeto de Documento (DOM), que permite manipular documentos.

Curso intensivo de fundamentos da linguagem

Vamos explicar alguns dos principais recursos da linguagem JavaScript, para dar a você um melhor entendimento de como tudo funciona. Vale a pena notar que esses recursos são comuns a todas as linguagens de programação, por isso, se você dominar esses fundamentos, estará no caminho certo para programar qualquer coisa!

Importante: Nesse artigo, tente escrever linhas de código de exemplo no seu console JavaScript para ver o que acontece. Para mais detalhes sobre o console JavaScript, consulte Descobrir as ferramentas do desenvolvedor do navegador.

Variáveis

Variáveis são espaços na memória do computador onde você pode armazenar dados. Você começa declarando uma variável com a palavra-chave var, seguida por qualquer nome que você queira chamá-la:

var myVariable;

Nota: Ponto-e-vírgula no fim de uma linha indica onde uma instrução termina; só é absolutamente necessário quando você precisa separar instruções em uma única linha. No entanto, algumas pessoas acreditam que é uma boa prática colocá-las no final de cada instrução. Existem outras regras para quando você deve ou não usá-las — consulte Seu Guia para Ponto-e-Vírgula em Javascript para mais detalhes.

Nota: Você pode dar quase qualquer nome a uma variável, mas há algumas restrições (veja esse artigo sobre regras de nomes de variáveis). Se você não tem certeza, você pode conferir se sua variável tem um nome válido.

Nota: JavaScript é case sensitive — myVariable é  diferente de myvariable. Se você estiver tendo problemas no seu código, cheque seu casing!

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 têm diferentes tipos de dados:

Variáveis Explicação Exemplo
String Uma sequência de texto é conhecida como uma string. Para mostrar que o valor é uma string, você deve envolvê-la em aspas. var myVariable = 'Bob';
Number Um número. Números não tem aspas ao redor deles. var myVariable = 10;
Boolean

Um valor verdadeiro ou falso.

As palavras true e false são palavras reservadas em JS e não precisam de aspas.

var myVariable = true;
Array Uma estrutura que permite armazenar vários valores em uma única variável. var myVariable = [1,'Bob','Steve',10];
Acesse cada item do array dessa maneira: myVariable[0], myVariable[1], etc.
Object Basicamente, qualquer coisa. Tudo em JavaScript é um objeto e pode ser armazenado em uma variável. Tenha isso em mente enquanto aprende. var myVariable = document.querySelector('h1');
Todos os exemplos acima também.

Então, por que precisamos de variáveis? Bom, variáveis são necessárias para fazer qualquer coisa interessante 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, 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:

/* 
Tudo no meio é um comentário.
*/

Se o seu comentário não tiver quebras de linha, é mais fácil colocá-lo depois de duas barras como esta:

// Isto é um comentário.

Operadores

Um operador é um símbolo matemático que produz um resultado baseado em dois valores (ou variáveis). Na tabela a seguir, você pode ver alguns dos operadores mais simples, além de alguns exemplos para experimentar no console JavaScript.

Operador Explicação Simbolo(s) Exemplo
adição/concatenação Usado para somar dois números ou juntar duas strings. + 6 + 9;
"Hello " + "world!";
subtrair, multiplicar, dividir Fazem exatamente o que você espera que eles façam na matemática básica. -, *, / 9 - 3;
8 * 2; // no JS a multiplicação é um asterisco
9 / 3;
operador de atribuição Você já viu essa, ela associa um valor a uma variável. = var myVariable = 'Bob';

Operador de igualdade

Faz um teste para ver se dois valores são iguais um ao outro, retornando um resultado true/false (booleano). === var myVariable = 3;
myVariable === 4;
Negação, não igual Retorna o valor lógico oposto do sinal; transforma um true em um false, etc. Quando usado junto com o operador de igualdade, o operador de negação testa se os valores são diferentes. !, !==

Para "Negação", a expressão básica é true, mas a comparação retorna false porque a negamos:

var myVariable = 3;
!(myVariable === 3);

"Não igual" dá basicamente o mesmo resultado com sintaxe diferente. Aqui estamos testando "é myVariable NÃO é igual a 3". Isso retorna false porque myVariable É igual a 3.

var myVariable = 3;
myVariable !== 3;

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

Nota: Misturar tipos de dados pode levar a resultados estranhos quando uma operação é executada, portanto, tome cuidado para declarar suas variáveis corretamente, e você obterá os resultados esperados. Por exemplo, digite "35" + "25" no seu console. Por que você não teve o resultado esperado? Porque as aspas transformam os números em strings, você acabou concatenando strings em vez de somar os números. Se você digitar 35 + 25, você obterá o resultado correto.

Condicionais

Condicionais são estruturas de código que te permitem testar se uma expressão retorna verdadeiro ou não, executando um código alternativo revelado por seu resultado. Uma forma muito comum de condicional é a instrução if ... else. 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 igualdade (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, o primeiro bloco de código será executado. Se a comparação não for verdadeira, o primeiro bloco de código será ignorado e o segundo bloco de código, após a instrução else, será executado.

Funções

Funções são uma maneira de encapsular funcionalidades que você deseja reutilizar. Quando você precisa de um procedimento, você pode chamar a função com um nome, em vez de reescrever o código inteiro a cada vez. Você já viu alguns usos de funções acima, por exemplo:

  1. var myVariable = document.querySelector('h1');
  2. alert('hello!');

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

Se você ver algo que parece com um nome de variável, mas com parênteses — () — depois, provavelmente é uma função. Funções geralmente tem Argumentos — pedaços de dados que elas precisam para realizarem o seu trabalho. 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 navegador, mas precisamos passar uma string como argumento para dizer à função o que escrever 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 dois números como argumentos e os multiplica:

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

Tente executar a função acima no console e teste com vários argumentos. Por exemplo:

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

Nota: A instrução return diz ao navegador para retornar a variável result da função para que ela esteja disponível para uso. Isso é necessário porque as variáveis definidas dentro das funções só estão disponíveis dentro destas funções. Isso é chamado Escopo de variável (leia mais sobre o escopo da variável.)

Eventos

Interatividade real em um site precisa de eventos. Estas são estruturas de código que percebem as coisas que acontecem no navegador, executando o código em resposta. O exemplo mais óbvio é o evento de clique, que é disparado pelo navegador quando você clica em algo com o mouse. Para demonstrar isso, insira o seguinte código no seu console e, em seguida clique na página da Web atual:

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

Há muitas maneiras de associar um evento a um elemento. Aqui selecionamos o elemento <html>, definindo sua propriedade onclick igual a uma função anônima (ou seja, sem nome), que contém o código que queremos que o evento clique execute.

Observe que:

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

é equivalente a

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

É só uma maneira mais curta de escrever.

Melhorando nosso site de exemplo

Agora que analisamos alguns fundamentos do JavaScript, vamos adicionar alguns recursos interessantes ao nosso site de exemplo para ver o 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 images.
  3. Renomeie a imagem para 'firefox2.png' (sem as aspas).
  4. Vá no seu arquivo main.js, e digite o seguinte código JavaScript (se seu "hello world" em JavaScript ainda estiver lá, delete-o):
    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 navegador. Agora quando você clicar na imagem, ela deve mudar para a outra!

Você armazena uma referência ao seu elemento <img> na variável myImage. Depois, você faz a propriedade do manipulador de evento onclick dessa variável igual a uma função sem nome (uma função "anônima"). Agora, toda vez que esse elemento de imagem é clicado:

  1. Você recupera o valor do atributo src da imagem.
  2. Você usa uma condicional para checar se o valor src é igual ao caminho da imagem original:
    1. Se for, você muda o valor de src para o caminho da segunda imagem, forçando a outra imagem a ser carregada dentro do elemento <img>.
    2. Se não é (significando que já mudou), nós mudamos o valor src de volta ao caminho da imagem original, para o estado original.

Adicionando uma mensagem personalizada de boas vindas

Em seguida, adicionaremos outro trecho de código, alterando o título da página para uma mensagem personalizada de boas vindas quando o usuário realizar sua primeira visita ao site. Essa mensagem de boas vindas persistirá, quando o usuário deixar o site e voltar mais tarde — salvaremos a mensagem usando a API de Armazenamento Web. Incluiremos também uma opção para mudar o usuário e, portanto, a mensagem de boas vindas sempre que necessário.

  1. Em index.html, adicione a seguinte linha de código antes do elemento <script>:
    <button>Mudar usuário</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 título, 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 corrigiremos isso em um momento:
    function setUserName() {
      var myName = prompt('Por favor, digite seu nome.');
      localStorage.setItem('name', myName);
      myHeading.textContent = 'Mozilla is cool, ' + myName;
    }

Essa função contem uma função prompt(), que traz uma caixa de diálogo assim como alert() faz. Este prompt(), no entanto, pede ao usuário para inserir algum dado e guarda os dados em uma variável quando o botão OK é pressionado. Nesse caso, estamos pedindo ao usuário para digitar seu nome. Em seguida, chamamos uma API denominada localStorage, o que nos permite guardar dados no navegador para usarmos mais tarde. Usamos a função setItem() de localStorage para criar e guardar um item de dado chamado 'name', definindo seu valor para a variável myName que contém o nome que o usuário digitou. Finalmente, definimos o textContent do título como uma string, além do nome recém-armazenado do usuário.

  1. Em seguida, adicione esse bloco if ... else — poderíamos chamar isso de código de inicialização, pois ele estrutura o aplicativo quando é carregado pela primeira vez:
    if(!localStorage.getItem('name')) {
      setUserName();
    } else {
      var storedName = localStorage.getItem('name');
      myHeading.textContent = 'Mozilla is cool, ' + storedName;
    }
    Primeiro, esse bloco usa o operador de negação (NÃO lógico representado pelo !) para checar se o dado name existe — se não existir, a função setUserName() executa para criá-lo. Se ele já existir (isto é, se o usuário já tiver digitado quando visitou o site anteriormente), nós recuperamos o nome guardado usando getItem() e associamos o  textContent do título a uma string, mais o nome do usuário, como fizemos dentro de setUserName().
  2. Finalmente, coloque o gerenciador de evento onclick no botão, para que quando clicado, ele execute a função setUserName(). Isso permite ao usuário defina um novo nome sempre que quiser ao pressionar o botão:
myButton.onclick = function() {
  setUserName();
}

Agora quando você visitar seu site pela primeira vez, ele solicitará seu nome de usuário e, em seguida, enviará uma mensagem personalizada. Você pode alterar o nome a qualquer momento, pressionando o botão. Como um bônus, porque o nome é armazenado dentro de localStorage, ele persiste depois que o site é fechado, mantendo a mensagem personalizada lá quando você abrir o site novamente!

Conclusão

Se você seguiu todas as instruções deste artigo, você deve terminar com uma página parecida com essa (você também pode ver nossa versão aqui):

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

Nós mal arranhamos a superfície do JavaScript. Se você gostou e deseja avançar ainda mais, acesse nosso tópico de aprendizado sobre JavaScript.

Neste Módulo