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:

5. var myHeading = document.querySelector('h1');

myHeading.textContent = 'Hello world!';

6. 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

Uma sequência de texto é conhecida como uma string. Para mostrar que o valor é
String var myVariab
uma string, você deve envolvê-la em aspas.

Number Um número. Números não tem aspas ao redor deles. var myVariab

Um valor verdadeiro ou falso.

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

var myVariab
Array Uma estrutura que permite armazenar vários valores em uma única variável. Acesse cada
maneira: my

Basicamente, qualquer coisa. Tudo em JavaScript é um objeto e pode ser armazenado var myVariab
Object
em uma variável. Tenha isso em mente enquanto aprende. Todos os exe

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

6 + 9;
adição/concatenação Usado para somar dois números ou juntar duas strings. +
"Hello " + "wo

9 - 3;
subtrair, multiplicar, Fazem exatamente o que você espera que eles façam na
-, *, / 8 * 2; // no JS
dividir matemática básica.
9 / 3;

operador de
Você já viu essa, ela associa um valor a uma variável. = var myVariab
atribuição

Operador de Faz um teste para ver se dois valores são iguais um ao var myVariab
===
igualdade outro, retornando um resultado true/false (booleano). myVariable =

Para "Negaçã
comparação r

var myVariab
Retorna o valor lógico oposto do sinal; transforma um true !(myVariable
em um false, etc. Quando usado junto com o operador de "Não igual" d
Negação, não igual !, !==
igualdade, o operador de negação testa se os valores são sintaxe difere
diferentes. "é myVariable
retorna false

var myVariab
myVariable !=

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):

5. var myImage = document.querySelector('img');

6.

7. myImage.onclick = function() {

8. var mySrc = myImage.getAttribute('src');

9. if(mySrc === 'images/firefox-icon.png') {

10. myImage.setAttribute ('src','images/firefox2.png');

11. } else {

12. myImage.setAttribute ('src','images/firefox-icon.png');

13. }

14. 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:

3. var myButton = document.querySelector('button');

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

4. 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:

5. function setUserName() {

6. var myName = prompt('Por favor, digite seu nome.');

7. localStorage.setItem('name', myName);

8. 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.
 4. 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:

5. if(!localStorage.getItem('name')) {

6. setUserName();

7. } else {

8. var storedName = localStorage.getItem('name');

9. 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().

10. 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):