Converter de Fahrenheit para graus Celsius (e vice-versa) em JavaScript

Neste Tutorial de JavaScript, vamos aprender como criar um script para conversar de graus Fahrenheit para graus Celsius, e vice-versa, usando o que aprendemos até o momento, da seção de Introdução ao JS.

Tutorial anterior: Exercícios Básicos de JavaScript

Conversão de Celsius para Fahrenheit

Vamos rever o enunciado da questão:
Você está no Brasil, e para temperatura usamos o grau Celsius.
Porém, quando você for contrato para trabalhar como programador Python no exterior, deverá usar graus Fahrenheit.

A fórmula da conversão é a seguinte:


Tutorial de JavaScript

Ou seja, o internauta que vai acessar seu site vai fornecer a temperatura em graus Celsius, e seu script vai fornecer a temperatura correspondente em graus Fahrenheit.

Vamos usar o comando prompt() para receber o dado do usuário e armazenar na variável celsius. Em seguida, devemos converter essa variável (que é inicialmente string), para um decimal, ou seja, um float, através da função parseFloat().

Reveja: Conversão de texto para número em JavaScript

Vamos armazenar a resposta na variável fahrenheit, o grande segredo desse exercício está na fórmula que mostramos, que linguagem de programação JavaScript se torna:


  • fahrenheit = (9*celsius/5) + 32 ;


Bem simples, não?
Nosso código JS fica:



<!DOCTYPE html>
<html>
 <head>
   <title>Curso JavaScript Progressivo</title>

   <script type="text/javascript">
    var celsius = parseFloat( prompt("Temperatura em 
                                      graus Celsius: ") );

    var fahrenheit = (9*celsius/5) + 32 ;

    document.write("Temperatura em graus Fahrenheit = ", 
                   fahrenheit);
   </script>

 </head>
</html>



Converter de Fahrenheit para graus Celsius

Como está sua Matemática? Em dias?
Lembre-se: computação vem de computar, contar...programação é Matemática pura, 100% lógica, tudo raciocínio.

Pegue a fórmula anterior, que converte de C para F e isole o C, fica:
Tutorial de JavaScript online grátis para download

O cerne do código, que é essa expressão, fica:
  • celsius = 5*(fahrenheit - 32) / 9 ;
Confere? Faz sentido?
Vamos ver como fica nosso código HTML + JS então:

<!DOCTYPE html>
<html>
 <head>
   <title>Curso JavaScript Progressivo</title>

   <script type="text/javascript">
    var fahrenheit = parseFloat( prompt("Temperatura em graus Fahrenheit: ") );

    var celsius = 5*(fahrenheit - 32) / 9 ;

    document.write("Temperatura em graus Celsius = ", celsius);
   </script>

 </head>
</html>

Calcular Área e Comprimento de Circunferência em JavaScript (Círculo)

Neste tutorial de nossa Apostila de JavaScript, vamos resolver um exercício da seção de Introdução ao JavaScript, onde vamos comentar e explicar bem direitinho como calcular a área de um círculo e o comprimento da circunferência.

Tutorial anterior: Exercícios Básicos de JavaScript

Área da Circunferência e Comprimento de Círculo

O enunciado da questão que vamos resolver é:

Faça um site HTML com código JS, que pede o raio de um círculo para o internauta.
Em seguida exiba a área do círculo e o comprimento da circunferência com aquele raio.

Para saber o valor da constante pi em JavaScript, use:
Math.pi

Essa constante é um float com o valor do pi.


Exercício resolvido com Código Comentado

Para resolver esse exercício, vamos precisar de duas fórmulas bem conhecidas da Matemática:
Área do círculo: pi * raio²
Comprimento da circunferência: 2 * pi * raio

Comprimento de um círculo em JavaScript - Apostila

Vamos lá.
Primeira parte de nosso código JS é pedir o raio ao internauta, usando o comando prompt() que já ensinamos, e armazenamos o que ele digitar na variável raio.

Lembrando que quando fazemos isso, armazenamos o que o usuário escreve na forma de string. Por isso, precisamos fazer uma conversão de string para float.

Fazemos isso com parseFloat() (relembre: Converter String para Float)

Em seguida, vamos declarar e inicializar duas variáveis:
comprimento, que vai receber o valor do comprimento, pela fórmula: 2 * Math.PI * raio
area, vai receber o valor da área, pela fórmula: Math.PI * raio * raio

Em seguida, apenas exibimos essas informações no documento, com a document.write() .
Veja como ficou nosso código:

<!DOCTYPE html>
<html>
 <head>
   <title>Curso JavaScript Progressivo</title>

   <script type="text/javascript">
    var raio = prompt("Raio do circulo: ");
    raio = parseFloat(raio);

    var comprimento = 2 * Math.PI * raio;
    var area = Math.PI * raio * raio;

    document.write("Comprimento da circunferencia        = ", comprimento, "<br>");
    document.write("Area da circunferencia               = ", area);
   </script>

 </head>
</html>


É possível ainda simplificar mais nosso código, reduzir o número de linhas e variáveis declaradas.
Veja se entendeu:

<!DOCTYPE html>
<html>
 <head>
   <title>Curso JavaScript Progressivo</title>

   <script type="text/javascript">
    var raio = parseFloat( prompt("Raio do circulo: ") );

    document.write("Comprimento da circunferencia        = ", 2 * Math.PI * raio, "<br>");
    document.write("Area da circunferencia               = ", Math.PI * Math.pow(raio, 2));
   </script>

 </head>
</html>

Exercícios Básicos de JavaScript

Agora que aprendemos os principais conceitos básicos da linguagem, em nossa seção Introdução ao JavaScript, vamos propor alguns exercícios.

É importante você tentar, se esforçar ao máximo possível. Se não souber algo, pesquise na internet, tente descobrir. Mesmo quando se tornar um programador profissional, vai precisar fazer pesquisas todo santo dia.

Habitue-se a isso. Um bom programador é aquele que tem a capacidade de aprender algo novo todo dia.

Exercícios de Introdução ao JavaScript

01. Escreva um programa que pede o raio de um círculo, e em seguida exiba o perímetro e área do círculo.

Para saber o valor do pi em JavaScript, use:
Math.PI

Pronto, terá o float com o valor do pi.
Solução: Área e comprimento de circunferência

02. Você está no Brasil, e para temperatura usamos o grau Celsius.
Porém, quando você for contrato para trabalhar como programador Python no exterior, deverá usar graus Fahrenheit.

A fórmula da conversão é a seguinte:

Tutorial completo de JavaScript
 Ou seja, você fornece a temperatura em graus Celsius, e seu script JS faz a conversão para graus Fahrenheit.

03. Agora faça o contrário. Você fornece a temperatura em graus Fahrenheit, seu programa deve converter para Celsius e exibir na tela a temperatura em graus Celsius.

Solução dos exercícios 02 e 03: Conversão entre graus Celsius e Fahrenheit em JavaScript

04. Um novo modelo de carro, super econômico foi lançado.
Ele faz 20 km com 1 litro de combustível.
Cada litro de combustível custa R$ 5,00.

Faça um programa que pergunte ao usuário quanto de dinheiro ele tem e em seguida diga quantos litros de combustível ele pode comprar e quantos kilometros o carro consegue andar com este tanto de combustível.

Seu script será usado no computador de bordo do carro.

A solução do exercício 04 deixamos para vocês, digitem aí nos comentários o seu script.

Operadores Matemáticos em JavaScript: Somar +, Subtrair -, Multiplicar *, Dividir / e Exponenciação (math.pow)

Neste tutorial de nosso Curso de JavaScript online grátis, vamos aprender como fazer as 4 operações básicas da Matemática e usar seus operadores para realizar operações aritméticas.

Tutorial anterior: Conversão entre números e strings

Operação Matemática em JS

Vamos voltar no tempo agora e aprender a fazer as operações matemáticas de adição, subtração, multiplicação e divisão.

A novidade é ... nenhuma. É a mesma coisa!
Mas só para dizer que não tudo exatamente igual, o símbolo de multiplicar é o asterisco: *
Já o símbolo de dividir é uma barra: /

Vamos criar um Script que pede dois números ao usuário, via método prompt() e exibe a soma, diferença, produto e divisão do primeiro pelo segundo:

<!DOCTYPE html>
<html>
 <head>
   <title>Curso JavaScript Progressivo</title>

   <script type="text/javascript">
    var num1 = prompt("Primeiro numero: ");
    num1 = parseInt(num1);

    var num2 = prompt("Segundo  numero: ");
    num2 = parseInt(num2);

    var soma = num1+num2;
    var sub  = num1-num2;
    var mult = num1 * num2;
    var div  = num1/num2;
    document.write("Adição        = ", soma, "<br>");
    document.write("Subtração     = ", sub, "<br>");
    document.write("Multiplicação = ", mult, "<br>");
    document.write("Divisão       = ", div);
   </script>

 </head>
</html>

Código JavaScript comentado

A primeira coisa diferente no nosso script é:
num1 = parseInt(num1)

Vamos lá.
Primeiro, pedimos ao leitor do seu site que forneça o primeiro valor, ele vai ser armazenado em num1 como uma string.

Vamos usar o operador de atribuição = para mudar o valor na variável num1.
Antes era uma string, agora vai receber um novo valor, que é um número: parseInt(num1)

Ou seja: num1 = parseInt(num1)
Deve ser lido como: "O novo valor de num1 é o antigo valor de num1 transformado em inteiro"

Faremos bastante isso em nosso curso, ok?

Depois, em nosso código JS, declaramos e inicializamos quatro variáveis: soma, sub, mult e div, que armazenarão os resultados das operações matemáticas de soma, subtração, multiplicação e divisão, respectivamente.

Lembrando que após escrever (write()) cada resultado, precisamos escrever na página uma quebra de linha também. No HTML, fazemos a quebra de linha com a tag <br>

Se preferir, é possível abreviar mais ainda o código e evitando de escrever as novas variáveis:

   <script type="text/javascript">
    var num1 = prompt("Primeiro numero: ");
    num1 = parseInt(num1);

    var num2 = prompt("Segundo  numero: ");
    num2 = parseInt(num2);

    document.write("Adição        = ", num1+num2, "<br>");
    document.write("Subtração     = ", num1-num2, "<br>");
    document.write("Multiplicação = ", num1*num2, "<br>");
    document.write("Divisão       = ", num1/num2);
   </script>

Exercício de JavaScript

Eu digitei a seguinte sequência de código em um script JS:
var teste;
teste = 1 ;
teste = teste +1 ;
teste = teste * teste

Ao final, eu escrevi document.write(teste) no meu documento HTML.
Se programar o código acima, apenas lendo, você poderia dizer qual o valor que vai aparecer, da variável teste ?

Digite nos comentários sua resposta.
Em seguida crie um script JS com o código e rode para ver o resultado. Você acertou?
Não vale mentir :)

Exponenciação em JavaScript (elevado a): método pow()

As quatro operações Matemáticas básicas de soma, diferença, produto e divisão, são bem simples e sem mistério, como explicadas acima, basta usar os operadores: + - * /

Porém, existe uma outra operação muito importante e usada, a exponenciação.
É o famoso: ... elevado a ...

Por exemplo:
2 elevado a 2 = 2² = 2 * 2 = 4
3 elevado a 2 = 3² = 3 * 3 = 9
2 elevado a 3 = 2³ = 2 * 2 * 2 = 8

Lembrou, né?

Não tem um operador ( + - * /) pra fazer isso, diretamente.
Em JavaScript, usamos o método pow()

Sintaxe:
Math.pow(x , y)

Ele vai retornar: x elevado a y.
Vamos ver um exemplo de um site, com um script JS que solicita dois números ao usuário e retorna o valor do primeiro elevado ao segundo:

<!DOCTYPE html>
<html>
 <head>
   <title>Curso JavaScript Progressivo</title>

   <script type="text/javascript">
    var num1 = prompt("Primeiro numero: ");
    num1 = parseInt(num1);

    var num2 = prompt("Segundo  numero: ");
    num2 = parseInt(num2);

    document.write(num1," elevado a ", num2, " = ", Math.pow(num1, num2) );
   </script>

 </head>
</html>

Converter String para Número e vice-versa em JavaScript

Neste tutorial, vamos aprender como transformar uma variável que é string em número (tanto inteiro como decimal, os floats) e vice-versa, em JavaScript.

Tutorial anterior: Como receber dados do usuário

Trabalhando com Dados do Usuário

Vamos criar um script que pede um número ao usuário, e armazena na variável num1.
Depois, vamos pedir outro número ao usuário, e vamos armazenar na variável num2.

Por fim, vamos exibir o resultado da soma dessas duas variáveis, no documento HTML.
Nosso código HTML/JS fica:

<!DOCTYPE html>
<html>
 <head>
   <title>Curso JavaScript Progressivo</title>

   <script type="text/javascript">
    var num1 = prompt("Primeiro numero: ");
    var num2 = prompt("Segundo  numero: ");
    document.write("Soma = ", num1+num2);
   </script>

 </head>
</html>

Digitando 1 num primeiro prompt() e 2 no segundo, temos o resultado:
12

Ou seja: 1 + 2 = 12
É...

Acho que o JavaScript não é muito com Matemática, não é mesmo?
É sim! Mas foi a gente que errou!

E por um motivo bem simples: quando o usuário digita algo para o método prompt(), este método armazena a informação digitada na forma de STRING.

Ou seja, não é 1, é "1" que está armazenado na variável num1, é um texto.
Não é 2, é "2".

Então, fizemos: "1" + "2" = "12"
Ou seja, agrupamos, concatenamos duas strings, grudamos uma na outra!

String para Inteiro: parseInt()

Para calcularmos corretamente a soma, precisamos usar uma função que já vem, por natureza, no JavaScript, a parseInt().

Para transformar "2" em 2, basta fazer: parseInt("2")
Ou seja, essa função recebe uma string e transforma num inteiro.

Vamos calcular a soma novamente, mas ao invés e usar num1 e num2, vamos usar parseInt(num1) e parseInt(num2) e ver o resultado:

<!DOCTYPE html>
<html>
 <head>
   <title>Curso JavaScript Progressivo</title>

   <script type="text/javascript">
    var num1 = prompt("Primeiro numero: ");
    var num2 = prompt("Segundo  numero: ");
    document.write("Soma = ", parseInt(num1) + parseInt(num2) );
   </script>

 </head>
</html

O resultado da soma fica:
Como transformar texto em número

Agora sim! O JS somou dois inteiros e exibiu a soma corretamente.
Faça um teste: digite um número decimal (lembre-se de usar ponto ao invés de vírgula).

String para Decimal: parseFloat()

Se digitar 0.5 para o primeiro número e 1.5 para o segundo, o resultado do parseInt() será um bizarro 1. Isso mesmo:
0.5 + 1.5 = 1

Isso acontece pois usamos número decimais (flutuantes) na função parseInt(), que deve receber apenas números inteiros.

A maneira correta de transformar string para decimais (flutuantes) é usando a função parseFloat(), veja como fica o código:

<!DOCTYPE html>
<html>
 <head>
   <title>Curso JavaScript Progressivo</title>

   <script type="text/javascript">
    var num1 = prompt("Primeiro numero decimal: ");
    var num2 = prompt("Segundo  numero decimal: ");
    document.write("Soma = ", parseFloat(num1) + parseFloat(num2) );
   </script>

 </head>
</html>

Conversão de Números para Strings

Para converter um número, seja ele inteiro ou decimal, em uma string, é bem simples: basta concatenar ele com uma String vazia.

Ou seja, 'somar' o número com "", veja:
1 + "" = "1"
2.9 + "" = "2.9"
2112 + "" = "2112"

Ou seja, o JavaScript entende que se somar um número com uma String, o resultado deve ser uma nova string, cuja concatenação é o número mais uma string vazia, ou seja, o número na forma de string.

Durante nosso curso precisaremos fazer essas conversões diversas vezes, dependendo do tipos de dados em JavaScript que queremos trabalhar.

Recebendo Dados e Informações do Usuário - Método prompt()

Neste tutorial de nosso Curso de JavaScript, vamos aprender como receber dados, informações do usuário. Ou seja, vamos aprender como salvar em variáveis algo que o usuário forneça (digitando, por exemplo). Isso será feito através do método prompt().

Tutorial anterior: Atribuindo e Acessando Valores de Variáveis

Troca de Informações em Programação

O que acontece quando você liga o computador?
Ele abre o navegador? O editor de texto? Começa a tocar uma música?

A reposta é: depende.
O que vai acontecer depende do que o usuário fizer. Especificamente, sua máquina reage de acordo com o que você fizer.

Se clicar no Chrome ou Firefox, vai abrir o navegador.
Se clicar no Excel, abre o editor de planilhas.
Etc etc

Clicar...abrir...digitar...isso tudo são informações que o usuário repassa para o computador.
Ele recebe, checa e toma uma atitude dependendo do que você fez.

É isso que vamos aprender agora: receber dados, informações do usuário, armazenar em variáveis e usar elas para algum propósito, em JavaScript!

O método prompt() do JavaScript

Exite muuuuuitas maneiras de receber dados do usuário, em JS, que está acessando sua página.
Vamos ensinar uma maneira agora, através do método prompt().

Mais adiante, em nosso curso, vamos te explicar melhor e com mais calma o que é um método, e vamos aprender até fazer os nossos. Por hora, imagine que método é, basicamente, um comando.

Vamos usar o comando prompt() para capturar algo que o usuário vai digitar.
O formato do uso é o seguinte:

variavel = prompt("Texto que vai aparecer:")

Ao fazer isso, vai aparecer uma janela quando o usuário entre no seu site, e nessa janela tem escrito "Texto que vai aparecer" e um campo para o usuário digitar algo.

Após digitar e dar enter (ou clicar em OK), o que ele digitou vai virar uma string, armazenada na variável variavel.

Exemplo de uso do prompt()

Crie uma página web que pergunte o nome do usuário, salve ele numa variável e depois exiba uma mensagem de boas vindas na página.

Vamos armazenar o que o usuário digitar na variável nome.
Em seguida, usamos o método document.write() para exibir o que tem dentro dessa variável.

Veja como ficou nosso código JavaScript:

<!DOCTYPE html>
<html>
 <head>
   <title>Curso JavaScript Progressivo</title>

   <script type="text/javascript">
    var nome = prompt("Digite seu nome: ")
    document.write("Bem vindo, ", nome);
   </script>

 </head>
</html>

O resultado deve ser o seguinte:
Salvar o que a pessoa digitou - Método prompt()

Mensagem no documento HTML:
Curso de JavaScript online grátis com certificado

Exemplo de uso do prompt()

Crie uma página HTML com um script em JS que pergunta a idade do usuário e armazena em uma variável. Depois, exiba: "Você tem x anos", onde 'x' é o número que o usuário forneceu.

Essa mensagem não deve ser exibida no documento HTML e sim numa pop-up do tipo alert.

Aqui, a ideia é a mesma do exemplo anterior, porém ao invés de usar document.write() vamos usar o comando alert():

<!DOCTYPE html>
<html>
 <head>
   <title>Curso JavaScript Progressivo</title>

   <script type="text/javascript">
    var idade = prompt("Qual sua idade: ");
    alert("Você tem " + idade + " anos de idade");
   </script>

 </head>
</html>


Note que usamos o símbolo de + para 'unir' as strings dentro do comando alert.
Tutorial de JavaScript online grátis

Simples e bacana, não?
Certamente você já acessou algum sistema que exibia esses tipos de mensagens, agora você fez isso.

Parabéns, já é um verdadeiro programador JavaScript!
Vamos seguir adiante em nosso curso.

Atribuindo e Acessando valores de Variáveis: = e document.write()

Neste tutorial vamos te ensinar como atribuir valores para variáveis. Ou seja, vamos aprender como uma variável armazena, de fato, informações e como acessar esses dados.

Tutoriais anteriores:
Como declarar uma variável
Tipos de dados

Atribuição em JavaScript: = 

Agora que já aprendemos quais os tipos de informações que podemos trabalhar em JavaScript (números, strings, booleanos, null, objetos e informações) bem como declarar uma variável, vamos aprender como atribuir um valor a uma variável.

Ou seja, vamos fazer uma variável que criamos armazenar determinada informação.
Isso é bem simples, é feito com o símbolo de atribuição de igual: =

Vamos criar uma variável chamada idade e fazer ela receber um valor (por exemplo, 18):
var idade;
idade = 18;

E prontinho, só isso.
Tem um bloco de memória reservado, e você pode acessar através da variável idade e lá dentro armazenamos um número, o 18.

Isso também pode ser feito assim:
var idade = 18 ;

Ou seja, declaramos, criamos a variável e já atribuímos um valor para ela!

Veja agora como atribuir uma string (texto) a uma variável que vamos chamar de nome:
var nome = "Olá, Mundo!"

Pronto. Reservou um bloco de memória, chamou de nome e dentro dele agora tem reservado o valor "Olá, Mundo!", uma string.

Acessando Variáveis

Agora que aprendemos a declarar e atribuir o valor a uma variável, vamos dar um exemplo de como acessar elas, ver o que está armazenado naquela variável.

Primeiro, vamos declarar a variável idade e atribuir o valor 18.
Em seguida, vamos 'imprimir', escrever na tela o valor dessa variável, usando o método document.write()

Para isso, basta fazer:
document.write(idade)

Veja o código:

<!DOCTYPE html>
<html>
 <head>
   <title>Curso JavaScript Progressivo</title>

   <script type="text/javascript">
    var idade = 18;
    document.write(idade);  
   </script>
   
 </head>
</html>

Agora abra seu site .html e veja o resultado:
18

Colocamos pra imprimir a variável idade e apareceu o número 18, que é o valor que está armazenado dentro dela.

"Olá mundo" usando variável

Agora, vamos declarar uma variável chamada curso e atribuir a ela a seguinte string:
"Olá, mundo!"

Vamos imprimir o valor armazenado nessa variável, usando o método document.write() do JavaScript:

<!DOCTYPE html>
<html>
 <head>
   <title>Curso JavaScript Progressivo</title>

   <script type="text/javascript">
    var nome = "Olá, mundo!";
    document.write(nome); 
   </script>

 </head>
</html>

Veja que o resultado foi simplesmente exibir a frase "Olá, mundo" na tela.

O Método document.write() - Exibindo coisas no documento

O método write() serve para você escrever informações no documento.
Ele é bem simples de usar, basta colocar dentro dos parêntesis o que deseja que apareça no documento (no caso, a página HTML).

Por exemplo, para exibir uma string:
document.write("JavaScript Progressivo");

Para exibir o valor de uma variável de nome teste:
document.write(teste)

É possível escrever no documento várias coisas usando este método, basta separar o que deseja exibir por vírgula:
document.write("Olá", "mundo")

Note que agora ele vai exibir duas strings:
"Olá"
"mundo"

Pois separamos por vírgula. Pode exibir também um número e uma string:
document.write("Olá mundo", 18)

O resultado: Olá mundo18
Sim, fica tudo 'grudado'.

Vamos definir duas variáveis, uma com seu nome e outra com sua idade.
Depois vamos escrever no documento a string:
"Meu nome é [nome] e tenho [idade] anos"

Nosso código fica assim:

<!DOCTYPE html>
<html>
 <head>
   <title>Curso JavaScript Progressivo</title>

   <script type="text/javascript">
    var nome="Francisco";
    var idade=18;

    document.write("Meu nome é ", nome," e tenho ", idade, " anos");
   </script>

 </head>
</html>

Exercício de JavaScript

Crie um site em HTML, e usando JavaScript que use duas variáveis, a nome com o nome de uma pessoa e a variável sobrenome com o sobrenome dela.

Em seguida, a página deve exibir a seguinte string:
"Bem vindo ao sistema [sobrenome], [nome]"

Digite seu código nos campos de comentários.

Tipos de Dados em JavaScript

Neste tutorial, vamos explicar os possíveis tipos de dados em programação JavaScript, quais os tipos de informações existem e como são classificados.

Tutorial anterior: Como declarar uma variável em JavaScript

Dados em Programação JavaScript

Muito provavelmente você já ouviu falar sobre sistema binário em computação.
Tudo para o computador é 0 e 1.

Um número armazenado, um texto, uma foto, um vídeo que você vai colocar no Youtube, um jogo no seu celular etc. Para eles, é tudo 0 e 1. Se quiser, pode trabalhar com binário também.

Uma variável sua pode ser identificada como:
010101010101010100110101

Já outra:
111011011101110111011001

Bem simples de decorar e trabalhar com isso né?
Claro que não! É impossível!

Por isso, é necessário a gente classificar alguns tipos de dados, informações.
No JavaScript, vamos lidar com os seguintes tipos de dados

  • Números
  • Strings
  • Booleanos
  • Null
  • Objetos
  • Funções

Vamos falar um pouco sobre cada um deles agora.

Tipo de dado: Número

Esse é o mais óbvio tipo de dado.
Seu dia de nascimento é um número, seu salário é um número (e bem grande se for um programador JavaScript que estudou com o JS Progressivo), o ano de um carro, a potência de seu motor.

Basicamente, temos dois tipos de números:

  • Inteiro: 1, 2, 3, 4, 5, 2112, -10 etc
  • Decimais:
    São os quebrados, em nossa língua portuguesa usamos eles separados por vírgulas:
    Preço: R$ 1,99
    Mas em programação, usamos ponto no lugar de vírgula:
    1, 99 para gente é 1.99 em computação, ok ?


Tipo de dado: Strings

Strings são, nada mais nada menos, que textos.
Uma palavra, uma frase, um caractere (como  ! @ # $ % "+ _ []/ etc).

Uma string é sempre representada por algo que está dentro de aspas.
Exemplos de strings:

  • "Olá mundo"
  • "Curso JavaScript Progressivo"
  • "a"
  • "b"
  • "c"


Mas, veja bem:
Número: 2112
String   : "2112"

Faz sentido você dividir o número 2112 com outro número, o resultado é um número também, é a nossa boa e velha Matemática. Mas não faz sentido dividir "2112" por um número, pois é uma string, um texto!

Tipo de dado: Boolean

Ainda no assunto de binários, 1 e 0, temos um tipo de dado bem especial, os Booleans ou Booleanos.
Eles podem assumir dois valores apenas:

  1. True
  2. False

Ou seja, verdadeiro e falso. E eles são muuuuuito importantes! Também são chamados de valores lógicos. Vamos usar bastante os Booleanos quando formos estudar testes e laços (loopings), bem em breve.

Convencionalmente, o número 0 é sinônimo de falso e tudo que for diferente de 0 (como 1, -1, 2, 3, 4, 5...) é verdadeiro.

Tipo de dado: Null

É a representação do vazio, do nada.
String nula: ""

Uma variável que não recebeu nenhum valor ou tipo de dado, é iniciada como nula, Null.
O vazio é um importante tipo de dado também.

Tipo de dado: Objetos

São as 'coisas'.

Uma imagem é um objeto, um botão é um objeto, um parágrafo específico pode ser um objeto, o título da página, um formulário etc.

É uma representação geral de alguma 'coisa'. Pode parecer vago agora, mas durante nosso curso irá entender melhor o conceito de um objeto.

Tipo de dado: Função

Por fim, temos as funções, que são blocos de código, específicos, que fazem uma tarefa específica e podem ser 'chamados' para serem executados.

Em nosso tutorial sobre Onde colocar o código JavaScript em um site, criamos duas funções de exemplo, a mostraData() cuja função é exibir a data e a mostraMensagem() que quando invocada, exibe uma frase (uma string).

Vamos dedicar uma seção inteira de nosso curso só para falar de funções.

Como declarar uma variável em JavaScript – var

No tutorial sobre o que é uma variável em JavaScript, vimos as inúmeras utilidades que podemos ter ao usar as variáveis.

Não é que elas sejam importante, são essenciais. É quase que impossível programar algum programa útil que não venha a usar nenhuma variável.
Neste tutorial de nosso Curso de JavaScript, vamos aprender como declarar, criar uma variável em JS.

Como declarar uma variável em JavaScriptvar

Declarar uma variável é reservar memória para armazenar uma informação. Essa informação vai ficar associada a essa variável, e para podermos fazer isso temos que usar um comando especial, que diga ao JavaScript “Ei, essa é uma variável! Guarde ela!”.
Esse comando é dado por uma palavra chamada var.
Assim, para declararmos uma variável, fazemos: var nome ;
Ou seja, primeiro escrevemos a palavra “var” e depois escolhemos um nome pra nossa variável e depois usamos o ponto e vírgula.
Por exemplo, se você quiser criar uma variável para armazenar a idade do leitor de seu site, faça:
var idade;
Para armazenar o dia, de uma data: 

  • var dia;
  • O mês: var mes;
  • O ano: var ano;
Quando você faz isso, você está armazenando um bloco de memória. Cada bloco de memória tem um endereço específico (tipo 0x2112H, algo que seu computador entende). Então, ao invés de usar esse endereço grande, feio e difícil de decorar, digite dia e pronto, vai estar acessando esse endereço de memória.

Como declarar mais de uma variável em uma linha

Você também pode definir essas três variáveis numa mesma linha, basta separar cada nome por uma vírgula:
var dia, mes, ano;
Uma outra maneira de declarar variáveis, é da seguinte maneira:
var dia,      mes,      ano;
Ao declarar variáveis dessa maneira, apenas estamos reservando um espaço em memória, é como se disséssemos “Ei, JavaScript, reserva espaço para essas variáveis, depois vamos usar elas!”
Nos próximos tutoriais iremos aprender a armazenar números, letras, textos e outras informações em nossas variáveis.

Como escolher o nome de uma variável em JS

No decorrer de nosso Curso de JavaScript Online Grátis, você vai criar muitas, muitas variáveis.
Algumas vezes, vai querer chamar alguma delas de “a”, “b”, “x” ou “y”, pois é bem mais simples e fácil.
No começo, não vai ser nada demais e você vai se lembrar das variáveis.
Mas a medida que for programando, seus scripts passarão a ter dezenas, centenas ou mesmo milhares de linhas de código, e certamente você não vai mais se lembrar do nome de todas as variáveis, caso tenha escolhido essas letras simples como nome.
Quer armazenar a idade de alguém? Coloque a variável com nome “idade”.
Quer armazenar  uma mensagem de erro? Uso algo como “msg_error” como nome.
Vai armazenar o valor de um desconto em juros? Use “juros”, pois assim você vai facilmente se lembrar, e seu código vai ficar mais legível e fácil de ser entendido por outros desenvolvedores web.

Regras para declarar variáveis em JavaScript

Você que vai escolher os nomes de suas variáveis, e baseado na dica que demos, escolha sempre nomes que façam sentido, que tenham a ver com a informação que vai ser armazenada na variável.
Porém, isso não quer dizer que possa escolher todo e qualquer nome, existem algumas regras.
O nome de suas variáveis devem começar com uma letra, com o sinal de underline _ ou com o cifrão $.
Ou seja, não começar começar com número, nem hífen ou algum outro caractere.
Embora não possa iniciar o nome de caractere com número, você pode usar números no nome de sua variável:
var IP1, IP_2, $IP3 ;
Devemos lembrar que as variáveis, em JavaScript, são case sensitive, ou seja, letra minúscula difere de letra maiúscula.
Assim, a variável: var JS;É diferente da variável: var js;
Por fim, a última regra é evitar palavras chave, palavras que são reservadas pelo JS, que são usadas para se programar em JavaScript. Por exemplo, a palavra var não pode ser usada como nome de uma variável, pois ela é usada para declararmos uma variável.

Lista de palavras reservadas

A seguir, uma lista de algumas palavras que são usadas pelo JavaScript, e que não podemos usar (como para declarar variáveis, por exemplo):

Palavras reservadas do JavaScript

  • break
  • case
  • catch
  • continue
  • debugger
  • default
  • delete
  • do
  • else
  • false
  • finally
  • for
  • function
  • if
  • in
  • instanceof
  • new
  • null
  • return
  • switch
  • this
  • throw
  • true
  • try
  • typeof
  • var
  • void
  • while
  • with

Palavras reservadas pelo browser

  • alert
  • blur
  • closed
  • document
  • focus
  • frames
  • history
  • innerHeight
  • innerWidth
  • length
  • location
  • navigator
  • open
  • outerHeight
  • outerWidth
  • parent
  • screen
  • screenX
  • screenY
  • statusbar
  • window

Palavras reservadas para propósitos futuros

As seguintes palavras são muito usadas em diversas linguagens de programação, e como o JavaScript continua sempre a evoluir, elas podem vir a ser usadas em breve, então também é bom evitar usá-las:
  • abstract
  • boolean
  • byte
  • char
  • class
  • const
  • double
  • enum
  • export
  • extends
  • final
  • float
  • goto
  • implements
  • import
  • int
  • interface
  • let
  • long
  • native
  • package
  • private
  • protected
  • public
  • short
  • static
  • super
  • synchronized
  • throws
  • transient
  • volatile
  • yield

Variável em JavaScript – O que é e Para que serve

Neste tutorial de nosso Curso de JavaScript, vamos introduzir um dos mais importantes conceitos, não só do JavaScript, mas da programação de uma maneira geral, que são as variáveis.
Vamos entender o que é uma variável, para que ela serve, onde é usada e motivo dela ser tão importante e essencial no desenvolvimento Web.

Por hora, vamos dar uma ideia mais geral sobre o que é variável, explicar seu conceito em termos de computação, para nos próximos artigos entramos em mais detalhes sobre os tipos de variáveis e, de fato, usá-las em nossos aplicativos JavaScript.

Variável em Programação

A Computação tem, basicamente, duas funções: fazer cálculos e armazenar informações.
A palavra computador vem de computar, que é contar, e é basicamente isso que um computador faz: cálculos.
Seja em uma pesquisa científica, uma troca de mensagens no Whatsapp ou a exibição de um site da internet, os computadores precisam fazer uma série de operações binárias em seu hardware, para resultar em pixels na sua tela, onde você vê o resultado acontecer.
Porém, só fazer essas operações binárias não serve de muita coisa, se os resultados desses cálculos não forem armazenados.

Imagine que a cada vez que você desliga seu computador ou celular, todas suas informações sejam apagadas: textos, vídeos, fotos, arquivos etc. Isso é inconcebível, computador é usado também para armazenar informações.
O ato de armazenar dados, de uma maneira temporária (até desligar o computador ou fechar um programa) ou permanente (gravar dados em um HD ou servidor), é tão essencial e importante que isso é feito de maneira bem frequente em programação, através de variáveis.
Através de variáveis, vamos poder armazenar quaisquer tipos de informações, para ser acessadas, modificadas, alteradas ou mesmo excluídas futuramente, tudo decidido pelo programador.

Variáveis em JavaScript

Certamente você já se deparou com um jogo feito em JavaScript, e talvez nem tenha percebido.
Você joga uma partida, e marca 100 pontos.
Depois, joga novamente e marca 200, então esse passa a ser seu novo recorde.
Mas como o jogo sabe que 200 é seu novo recorde? Para saber isso, ele teria que saber que sua pontuação anterior era menor que 200.
Ou seja, o número “100” foi armazenado pelo JavaScript em algum lugar, então quando você jogou de novo, sua nova pontuação foi comparada com essa anterior, para saber que seu record foi quebrado.
Você também já deve ter entrado em algum site que pedia seu nome, você digitava e depois ele exibia uma mensagem “Olá, Fulano”.

Ou seja, o Javascript guardou seu nome em algum lugar, para exibir no futuro.
Uma variável foi usada para armazenar o texto “Fulano”, que você escreveu. E depois, o JavaScript foi nessa variável, pegou as informações que tinha nela e exibiu para você o “Olá, Fulano”.
Em alguns sistemas bancários, é permitido fazer 3 saques por dia.
Então, de alguma maneira, o sistema tem que saber quantos saques foram feitos.
Inicialmente, ele armazena o número 0 em uma variável.
Quando você fizer um saque, ele atualiza aquela variável pra armazenar o número 1.
Efetuando outro saque, o sistema muda a variável para o número 2.
Mais uma vez, a variável é incrementada e armazena o número 3 quando você fizer mais um saque naquele dia.
Porém, sempre que você vai fazer um saque, o sistema checa essa variável.
Se tentar faz mais um, o sistema vai ver que número está armazenado na variável, e se for 3, ele não libera mais você para sacar novamente.
Enfim, poderíamos ficar muito mais tempo falando das inúmeras utilidades das variáveis.
No próximo tutorial iremos aprender como usar, manipular e editar as variáveis em JavaScript.