Esta tradução está incompleta. Por favor, ajude a traduzir este artigo do Inglês.

JavaScript é uma linguagem de programação que dá interatividade ao seu website (sob a forma, por exemplo, de jogos, respostas quando os botões são pressionados ou quando são inseridos dados nos formulários, estilos dinâmicos ou animações). Este artigo faz uma introdução a esta linguagem excitante e dá-lhe uma ideia do que é possível.

O que é JavaScript, realmente?

JavaScript (abreviado "JS") é uma linguagem de programação dinâmica completa que, quando é aplicada a um documento HTML, produz interatividade dinânimca no website. Foi inventada por Brendan Eich, co-fundador do projeto Mozilla, da Mozilla Foundation, e da Mozilla Corporation.

JavaScript é incrivelmente versátil. Pode começar em ponto pequeno, com carrosséis, galerias de imagens, layouts flutuantes, e mensagens quando se prime um botão. Depois de ganhar experiência, será capaz de criar jogos, gráficos 2D e 3D animados, aplicações completas conduzidas por bases-de-dados e muito mais!

JavaScript é relativamente compacta e muito flexível. Os programadores já escreveram uma grande variedade de ferramentas sobre o núcleo desta linguagem, o que abriu portas a uma vasta quantidade de funcionalidade extra com esforço mínimo. Isto inclui:

  • API de navegadores — São as API incluídas nos navegadores, que proporcionam funcionalidades como criar HTML dinamicamente e definir estilos CSS, agregar e manipular uma transmissão de vídeo da webcam do utilizador, ou gerar gráficos 3D graphics e amostras de som.
  • API de terceiros — que permitem aos programadores incorporar funcionalidade nos seus sites de outros fornecedores de conteúdo, como Twitter ou Facebook.
  • Framework e bibliotecas de terceiros — que podem ser aplicadas ao HTML e assim permitem construir sites e aplicações rapidamente.

Uma vez que este artigo é apenas uma introdução ligeira a JavaScript, não vamos confundi-lo com detalhes sobre a diferença entre JavaScript puro e as ferramentas enumeradas em cima. Poderá aprender esse detalhe mais tarde, na nossa área de aprendizagem de JavaScript, e no resto da MDN.

De seguida vamos introduzi-lo a alguns aspetos do núcleo da linguagem (JS puro, sem ferramentas), e também vai jogar com algumas funcionalidades da API do navegador. Divirta-se!

Um exemplo "olá mundo"

A secção anterior deve parecer mesmo empolgante — JavaScript é uma das tecnologias web mais animadas, e à medida que se torna bom a usá-la, os seus sites entrarão numa nova dimensão de poder e creatividade.

Contudo, ficar confortável com JavaScript é um pouco mais difícil do que ficar confortável com HTML e CSS. Terá que começar com projetos pequenos e prosseguir com passos pequenos e consistentes. Para começar, vamos mostrar como adicionar JavaScript básico à sua página, criando um exemplo "hello world" / "olá mundo!" (o padrão de exemplos básicos de programação).

Importante: Se não tem seguido o resto deste curso, descarregue este exemplo de código e utilize-o como ponto de partida.

  1. Primeiro, crie uma pasta "scripts" (sem aspas) na raíz do seu site de testes. Depois, dento desta pasta, crie um ficheiro chamado main.js.
  2. A seguir, no ficheiro index.html introduza o elemento seguinte numa linha nova mesmo antes da etiqueta de fechi </body>:
    <script src="scripts/main.js"></script>
  3. Basicamente isto faz o mesmo que o elemento <link> faz com CSS — aplica o código JavaScript à página, para que surta efeito no HTML (juntamente com o CSS, e outros recursos da página).
  4. Agora adicione o código seguinte ao ficheiro main.js:
    var myHeading = document.querySelector('h1');
    myHeading.textContent = 'Olá mundo!';
  5. Finalmente, certifique-se que guardou as alterações aos ficheiros HTML e JavaScript, e carregue o ficheiro index.html no navegador. Deverá ver algo como:

Nota: O motivo pelo qual pusemos o elemento <script> no fim do ficheiro HTML é que os elementos são carregados pelo navaegador na ordem em que aparecem no ficheiro. Se o JavaScript é carregado primeiro e tem que afetar o HTML por baixo dele, pode não funcionar, já que o código JavaScript seria carregado antes do HTML que era suposto modificar. Assim, colocar o JavaScript no fim do ficheiro HTML costuma ser a melhor estratégia.

O que aconteceu?

O texto do título foi mudado para "Hello world!", utilizando JavaScript. Isto foi feito com a função querySelector() para obter uma referência do título e guardá-la numa variável myHeading. Isto é semelhante ao que fizémos com seletores CSS. Quando se pretende fazer algo com um elemento, há que selecioná-lo primeiro.

Depois, muda-se o valor da propriedade textContent da variável myHeading (a qual representa o conteúdo textual do título) para "Olá Mundo!".

Nota: Ambas as funções utilizadas fazem parte da API do Document Object Model (DOM) , o qual permite manipular documentos HTML.

Curso intensivo das bases da linguagem

Vamos explicar algumas funcionalidades fundamentais da linguagem JavaScript, para permitir uma melhor compreensão de como a mesma funciona. Note que estas funcionalidades são comuns a todas as linguagens de programação, por isso, se dominar estes fundamentos, estará no bom caminho para programar praticamente qualquer coisa!

Importante: Neste artigo, tente introduzir os exemplos de código na consola JavaScript para ver o que acontece. Para mais detalhes sobre a consola JavaScript, veja o artigo Descobrir as ferramentas de desenvolvimentos do navegador.

Variáveis

Variáveis são "recipientes" em que pode guardar valores. Comece por declarar a variável com a palavra-chave var, seguida de qualquer nome que lhe queira dar:

var minhaVariavel;

Nota: O ponto e vírgula indica onde termina a instrução; apenas é estritamente necessário quando pretente separar instruções numa só linha. Contudo, algumas pessoas acham que é boa prática colocar este sinal no fim de cada instrução. Há mais regras sobre quando se deve ou não utilizá-lo — veja o artigo Your Guide to Semicolons in JavaScript (inglês) para obter mais detalhes.

Nota: O nome da varíavel pode ser quase tudo, mas há restrições (veja este artigo sobre regras para dar nome às variáveis (inglês)). Se não tem a certeza, pode verificar o nome da sua varíavel para assegurar que é válido.

Nota: JavaScript é sensível a maiúsculas — minhaVariavel é uma variável diferente de minhavariavel. Se tiver encontrar problemas depois de escrever p código, verifique as maiúsculas e minúsculas!

Depois de declarar a variável, pode atribuir-lhe um valor:

minhaVariavel = 'Bob';

Pode efetuar ambas as operações com uma só instrução:

var myVariable = 'Bob';

O valor é obtido simplesmente escrevendo o nome da variável:

myVariable;

Depois de lhe dar um valor, pode optar por mudá-lo mais tarde:

var minhaVariavel = 'Bob';
minhaVariavel = 'Steve';

Atenção que as variáveis podem ter valores com diferentes tipos de de dados:

Variável Explicação Exemplo
String Uma sequência de texto conhecido como string ou cadeia de caracteres. Para indicar que é uma string, envolve-se em plicas '. var minhaVariavel = 'Bob';
Number Um número. Não tem plicas em sua volta. var minhaVariavel = 10;
Boolean Valor que ou é verdadeiro ou falso. As palavras true e false são palavras-chave em JS, e não precisam de plicas. var minhaVariavel = true;
Array Estrutura que permite guardar múltiplos valores numa só referência. var minhaVariavel = [1,'Bob','Steve',10];
Cada elemento da Array é referido desta forma (começa em zero):
myVariable[0], myVariable[1], etc.
Object Pode ser qualquer coisa. Em JavaScript, tudo é um objeto e pode guardar-se numa variável. Mantenha isto em mente enquanto aprende. var minhaVariavel = document.querySelector('h1');
Assim como todos os exemplos anteriores.

Então para que precisamos das variáveis? Bem, são necessárias para qualquer tarefa interessante em programação. Se não houvesse valores que mudassem, não seria possível criar nada que fosse dinâmico, como personalizar uma mensagem de boas vindas ou mudar a imagem que se está a ver numa galeria.

Comentários

Pode deixar comentários no seu código JavaScript, tal como em CSS:

/*
Tudo entre estas marcas é um comentário.
*/

Se o comentário não contiver quebras de linha, deve ser mais fácil utilizar duas barras, assim:

// Isto é um comentário

Operadores

Um operator é um símbolo matemático que produz o resultado de uma operação entre dois valores (que podem ser variáveis). Na tabela seguinte constam alguns dos operadores mais simples, juntamente com alguns exemplos que pode experimentar na consola de JavaScript.

Operador Explicação Símbolo(s) Exemplo
Adição Soma números ou junta duas strings. + 6 + 9;
"Hello " + "world!";
Subtração, Multiplicação, Divisão Comportam-se com esperado em aritmética. -, *, / 9 - 3;
8 * 2; // em JS, o sinal de "vezes" é um asterisco
9 / 3;
Atribuição Já vimos isto: atribui um valor a uma variável. = var minhaVariavel = 'Bob';
Igualdade Faz um teste para verificar se dois valores são iguais e retorna um valor booleano (true/false). === var minhaVariavel = 3;
minhaVariavel === 4;
Negação, Desigualdade Devolve o valor logicamente oposto, ou seja, torna o verdadeiro em falso e vice-versa. When it is used alongside the Equality operator, the negation operator tests whether two values are not equal. !, !==

The basic expression is true, but the comparison returns false because we've negated it:

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

Verificar se "a minhaVariavel NÃO é igual a 3". Retorna false porque minhaVariavel é de facto igual a 3.

var minhaVariavel = 3;
minhaVariavel !== 3;

Há muito mais operadores a explorar, mas por agora basta. Veja uma lista completa no artigo Expressões e operadores.

Nota: Misturar tipos de dados pode ter resultados estranhos, então certifique-se que está a utilizar as variáveis corretamente e que os resultados estão dentro do esperado. Por exemplo, introduza "35" + "25" na consola. Porque é que não faz a soma dos números? Porque as aspas tornam os números em strings, então em vez de somar, fez a concatenção das strings. Se introduzir, 35 + 25 já obterá o resultado correto.

Condições

Condições são estruturas de código que permitem, em função do valor lógico (verdadeiro/falso) de uma expressão, executar código de entre várias alterantivas. Uma forma comum de uma condiçães é a instrução if ... else (se ... senão). Por exemplo:

var gelado = 'chocolate';
if (gelado === 'chocolate') {
  alert('Viva, adoro gelado de chocolate!');    
} else {
  alert('Ohhhh, mas o meu favorito é chocolate...');    
}

A expressão dentro de parênteses em if ( ... ) é a condição — utilza o operador de igualdade (como foi descrito em cima) para comparar a variável gelado com a string 'chocolate' e assim verificar se são iguais. Caso esta comparação devolva true, é executado o primeiro bloco de código. Se não for verdadeira, não é executado o primeiro mas sim o segundo bloco de código, depois da instrução else.

Funções

Functions são uma maneira de juntar uma funcionalidade ou um conjunto instruções que se pretende reutilizar. Quando se pretende utilizar esta funcionalidade, chama-se a função pelo nome, em vez de voltar a escrever o código em cada utilização. Já pudémos ver a utilização de algumas funções, por exemplo:

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

Estas funções, document.querySelector e alert, estão incluídas no navegador para serem utilizadas sempre que necessário.

Quando vê algo que parece um nome de uma variável mas tem parênteses à direita— () —  é provavelmente uma função. As funções costumam possuir arguments — dados de que necessitam para fazer o seu trabalho. Estes são passados dentros dos parênteses, separados por vírgulas quando há mais do que um.

Por exemplo, a função alert() faz aparecer um "pop-up" na janela do navegador, mas é preciso dar-lhe uma string como argumento para que ela saiba o que escrever.

E as boa notícia é que pode definir as suas próprias funções. Neste exemplo escrevemos uma função simples que aceita dois argumentos numéricos e multiplica-os:

function multiplicar(num1,num2) {
  var resultado = num1 * num2;
  return resultado;
}

Tente declarar esta função na consola e depois testá-la com vários argumentos. Por exemplo:

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

Nota: A instrução return diz ao navegador para devolver/retornar a variável result para fora da função para que o seu valor possa ser utilizado. Isto é necessário porque variáveis definidas dentro das funções só estão disponíveis dentro dessas funções — a essa particularidade chama-se o âmbito da variável (scoping). (Leia mais sobre âmbito de variáveis)

Eventos

Num site, interactividade a sério precisa de eventos. Eles são estruturas de código que esperam que algo aconteça no navegador e respondem executando código. O exemplo mais óbvio é o evento de clique, que é enviado pelo navegador quando se clica em algo com o rato. Para demonstrar, introduza isto na sua consola, e depois clique na página atual:

document.querySelector('html').onclick = function() {
    alert('Ai! Para de me picar!');
}

Há muitas maneiras de associar um evento a um elemento. Aqui, selecionamos o elemento <html>, atribuímos à sua propriedade onclick o manuseador do evento (event handler), que neste caso é uma função anónima (sem nome), que contém o código que queremos que o evento de clique execute.

Note que isto:

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

É equivalente a isto:

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

Só que o primeiro é mais curto.

Supercarregar o nosso site-exemplo

Agora que que já vimos as bases de JavaScript, vamos acrescentar umas funcionalidades fixes ao nosso site para ver o que é possível.

Acrescentar um alterador de imagens

Nesta secção, vamos acrescentar uma imagem adicional ao nosso site com funções da API da DOM, utilizando JavaScript para mudar alternar entre as duas imagens quando se clica nelas.

  1. Primeiro, encontre outra imagem que goste de ter no seu site. Certifique-se que o tamanho é o mais próximo possível da primeira imagem.
  2. Guarde-a na pasta images.
  3. Mude o nome para "firefox2.png" (sem aspas).
  4. Vá ao ficheiro main.js, e introduza o seguinte código JavaScript. (Apague o código do "olá mundo", se ainda lá estiver)
    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. Guarde todos os ficheiros e carregue o index.html no navegador. Agora, quando clicar sobre a imagem, ela deve mudar para a outra!

Guardou-se uma referência para o elemento <img> na variável myImage. Depois, atribui-se à propriedade onclick desta variável uma função anónima. Agora, sempre que se clica no elemento:

  1. Obtem-se o valor do atributo src.
  2. Utiliza-se uma condição para averiguar se o valor do mesmo é igual ao caminho da primeira imagem:
    1. Se for, muda-se para o caminho da 2ª imagem, o que a obriga a ser carregada no elemento <img>.
    2. Se não for (e portanto, já se trocaram as imagens), o valor de src volta a ser o caminho da imagem original.

Dar uma mensagem de boas-vindas personalizada

De seguida vamos acrescentar mais um pouco de código, que vai mudar o título da página para uma mensagem de boas-vindas personalizada quando o utilizador navega no site pela primeira vez. A mesma vai persistir, mesmo que o utilizador saia do site e volte mais tarde — vamos guardá-la com a API de Web Storage. Também vamos acrescentar opção de mudar de utilizador e, com o mesmo, a mensagem de boas-vindas sempre que for necessário.

  1. Em index.html, acrescente esta linha logo antes do elemento <script>:
    <button>Change user</button>
  2. Em main.js, coloque o código seguinte no fim do ficheiro, tal como está escrito — isto obtem referências ao novo botão e o título, e guarda-os em variáveis:
    var myButton = document.querySelector('button');
    var myHeading = document.querySelector('h1');
  3. Agora acrescente a função em baixo para estabelecer a mensagem personalizada — por agora não faz nada, mas já vamos tratar disso:
    function setUserName() {
      var myName = prompt('Por favor introuduza o seu nome.');
      localStorage.setItem('name', myName);
      myHeading.textContent = 'Mozilla is cool, ' + myName;
    }
    Este função faz uso da função prompt(), que mostra uma caixa de diálogo, semelhante a alert(). Mas a prompt() pede ao utilizador que introduza dados, que armazena numa variável depois que o mesmo faça OK. Neste caso, pedimos ao utilizador que introduza o seu nome. Depois, recorremos à API chamada localStorage, que nos permite guardar dados no navegador para os obter mais tarde. Utilizamos a função setItem() para criar e guardar o artigo 'name', e dando-lhe o valor da variável myName, a qual contém o nome introduzido pelo utilizador. Finalmente, mudamos o textContent do título para uma string, à qual concatenamos o nome recentemente armazenado.
  4. Próximo: acrescente este bloco if ... else — podemos chamar-lhe código de iniciação, já que define a estrutura da aplicação quando é carregada pela primeira vez:
    if(!localStorage.getItem('name')) {
      setUserName();
    } else {
      var storedName = localStorage.getItem('name');
      myHeading.textContent = 'Mozilla is cool, ' + storedName;
    }
    Este bloco começa por utilizar o operador de negação ("não-lógico", representado pelo !) para averiguar se o dado name existe. Se não existir, a função setUserName() é utilizada para o criar. Se existe (ou seja, o utilizador introduziu-o numa visita anterior), recuperamos o nome armazenado com getItem() e mudamos textContent do título para a string, mais o nome do utilizador, da mesma forma que fizémos em setUserName().
  5. Finalmente, coloque o manuseador do evento onclick no botão, como se mostra em baixo. Quando se clica no botão, é chamada a função setUserName(). Isto permite ao utilizador introduzir um novo nome, sempre que desejar, ao premir o botão:
    myButton.onclick = function() {
      setUserName();
    }
    

Agora, sempre que visitar o site, vai pedir-lhe o seu nome de utilizador, e depois mostrar a mensagem personalizada. Pode mudar o nome sempre que quiser ao premir o botão. Como bónus, já que o nome está guardado em localStorage (armazenamento local), persiste mesmo que o site seja fechado, e mantém a mensagem quando se voltar ao site!

Conclusão

If you have followed all the instructions in this article, you should end up with a page that looks something like this (you can also view our version here):

If you get stuck, you can compare your work with our finished example code on GitHub.

We have barely scratched the surface of JavaScript. If you have enjoyed playing, and wish to advance even further, head to our JavaScript learning topic.

 

Neste módulo

 

Etiquetas do documento e contribuidores

Contribuidores para esta página: diogo-panaca, mdnwebdocs-bot, mansil
Última atualização por: diogo-panaca,