Declarando variáveis e expressões em JS

Esse post faz parte de uma série sobre primeiros passos em programação usando a linguagem Javascript.

Hoje vamos conhecer o que são, e como declarar variáveis em Javascript. O texto pode ser lido separadamente, mas é recomendável os seguintes links como leitura prévia:

A magia de criar programas é tornar automático algumas tarefas que teríamos que fazer “manualmente”, no fim desse post vamos ter um programa que pode ter resultados diferentes para cada pessoa que o utilizar.

Variáveis

No nosso primeiro código de programação mostramos um alerta na tela com uma mensagem simples. Vamos supor que você queira dizer “Olá, Maria” no alerta.

alert("Olá, Maria"); 

Concatenação

Quando queremos que o programa guarde um valor para ser usado posteriormente, declaramos uma variável no código. Vamos continuar esse exemplo e guardar o nome da pessoa. Abra seu Scratchpad e vamos criar mais códigos.

var nome = "Maria";
alert("Olá, "+nome); 

Na linha 1, usamos a palavra reservada var da linguagem JS para declararmos uma variável chamada “nome”, e ela recebe como valor o texto “Maria”.

Uma variável em Javascript pode ter qualquer nome que utilize letras (sem acentos), números ou _ (underline), desde que ele não comece com um número. O Símbolo de um igual (=) é usado para definir ou setar um valor na variável.

Na linha 2, chamamos o comando para criar o alerta na tela. O “+” nessa linha representa uma operação que chamamos de concatenação. Que nada mais é que juntar dois textos. Em ‘”Olá, ” + nome’ temos o resultado ‘Olá, Maria’, ou seja, o mesmo do primeiro exemplo. Colocamos um comando em cada linha para facilitar a leitura.

Uma das coisas que bons programadores fazem é deixar o código o mais claro possível, para que outras pessoas consigam entendê-lo. Por isso, mesmo que no nosso programa tenhamos colocado mais código para chegar no mesmo resultado, a variável acaba sendo o único lugar do código onde poderíamos trocar o nome do alerta, principalmente se esse nome for usado em várias partes do código.

Operações matemáticas

Além de textos, também podemos trabalhar com números em JS, vamos mostrar uma nova mensagem com a idade de Maria.

 
var nome = "Maria";
alert("Olá, "+nome); 

var anoNascimento = 1990;
var anoAtual = 2017;
alert(anoAtual - anoNascimento); 

Declaramos a partir da linha 4, uma variável que guarda o ano de nascimento de Maria e outra com o nosso ano atual (sim, você deveria colocar o ano em que está lendo isso). No comando Alert passamos dessa vez uma expressão matemática de subtração, já que o anoAtual – anoNascimento nos informa a idade de Maria.

Em Javascript temos os símbolos de +, – , * e / para representar as operações básicas de adição, subtração, multiplicação e divisão. Atente-se para o sinal de + que é o mesmo para a concatenação. É como aquelas pegadinhas do inglês onde depende do contexto :(. Se você está usando + entre duas strings (textos) estamos tratando de concatenação, se são dois números, é uma operação de adição.

Provavelmente você possa se perguntar “e se eu somar uma string e um número”, vamos evitar esse assunto por enquanto 😉 .

As leituras de expressões sempre vão da esquerda para a direita, mas temos que respeitar a precedência dos operadores, que leva as mesmas regras da matemática. Primeiro resolvemos todos os parênteses (do mais interno para o mais externo), depois as operações * e / , e por fim as de + e -. Por exemplo:

5 + 3 - 1 + ( 3 - 1 * 2 * ( 4 / 2 )) => 
5 + 3 - 1 + ( 3 - 1 * 2 * ( 2 )) => 
5 + 3 - 1 + ( 3 - 1 * 4) => 
5 + 3 - 1 + ( 3 - 4 ) => 
5 + 3 - 1 + ( - 1) => 
8 - 1 - 1  => 
7 - 1 => 
6

Expressões booleanas

Em um de nossos textos falamos sobre álgebra booleana, todo o conceito que aprendemos lá pode ser usado aqui com expressões.

alert(true & false);

 

Você verá um alerta “0” na tela, mas logo vai associar isso a false, certo :P.

Tipos das variáveis

Vimos então, que assim como podemos usar o alert com qualquer expressão, podemos setar uma variável com expressões também.

var anoNascimento = 1990; 
var anoAtual = 2017; 
var idade = anoAtual - anoNascimento; 
alert(idade);

var estouProgramando = true;
var queroParar = false; 
var vouAvancar = estouProgramando & !queroParar; 
alert(vouAvancar);

E a partir disse podemos afirmar que a variável idade é do tipo inteiro, ou seja, ela guarda um número inteiro. A variável vouAvancar é do tipo booleano… Veja a tabela abaixo para maior fixar o conceito.

Tipo Descrição Exemplos
Boolean (Booleano em portugês) Valores verdadeiro ou falso True / False
Integer (Inteiro) Números inteiros -5, 4 , 5, 6, 7
Float (Número de ponto fluante) Número fracionário 3.5, -5.6, 3.741
String Sequência de caracteres “bola” , “A&voçÊ” , “Ana tem 10 anos!”

Programas genéricos

O trabalho do programador é escrever um código que atenda muitos casos. Vamos criar agora um programa que imprima um nome diferente para cada pessoa que o executar. A intenção é que você rode uma vez pra você e apareça seu nome, e uma vez para um amigo ou familiar, e apareça outro nome. Isso sem que você tenha que editar o código.

Vamos utilizar um novo comando chamado prompt, ele gera uma janela com um campo de texto, onde você pode digitar qualquer coisa. Quando você apertar enter, o comando prompt vai se comportar como uma variável que guardou o valor que você digitou. Leia o código abaixo e acompanhe os comentários:

var nome = prompt(); 
// digite Maria quando o janela aparecer
// o codigo acima se comportará como
// var nome = "Maria";
alert("Olá, " + nome);

Ao rodar o programa no Scratchpad, você vai ver após digitar qualquer valor, um alerta de olá aparecerá com o nome que você digitou. Como guardamos o valor na variável nome, poderíamos usá-la mais uma vez para imprimir por exemplo “Você tem 11 anos, Maria”. Para isso seria legar deixar a pessoa digitar sua idade também, usando um novo prompt.

var nome = prompt("Qual seu nome?"); 
alert("Olá, " + nome);
var idade = prompt("Qual a sua idade?");
alert("Você tem "+idade+" anos, "+nome);

Passo a passo, o código acima seria:

  • Linha 1: Usamos o comando prompt para pegar o nome do usuário que está usando o promgrama. Perceba que usamos uma string dentro do comando prompt. Elá aparece em cima do campo de texto e deixa o programa mais fácil de se usar.
  • Linha 2: Cria um alerta na tela dando olá para a pessoa.
  • Linha 3: Guarda na variável idade, o valor digitado num novo prompt.
  • Linha 4: utiliza as duas variáveis e concatenação para Imprimir nossa frase final.

Dicas rápidas

  • Como você pode perceber, espaços não são permitidos para nomear variáveis, quando o nome da variável usar duas ou mais palavras você pode usar um padrão chamada camel case (de camelo), exemplo: nomePessoa, primeiraMinuscula, queroSerProgramador… ou um padrão chamado snake case (de cobra), exemplo: nome_pessoa, primeira_minuscula, quero_ser_programador.
  • O nome que você dá para as variáveis é muito importante. Como programador, geralmente você escreverá código que outras pessoas vão ler,  então é bem importante deixar tudo bem claro e explícito. Se nosso programa tivesse variáveis com nomes como a, b, c, seria bem mais complicado entender o que ele está fazendo.
  • Tente manter as variáveis perto de onde elas vão ser usadas. No último exemplo, só declaramos a variável idade na linha 3, pois ela só seria usado na linha 4.

Mão na massa

1) Crie um programa onde o usuário entre com dois números, um em cada prompt, e depois mostre um alerta com a multiplicação entre os números.

2) Escreva códigos para o usuário digitar seu ano de nascimento, um ano no futuro e mostrar em um alerta de quantos anos a pessoa terá nesse ano.

As respostas estão disponíveis nesse link.

Em próximos textos, vamos entrar numa área muito legal, onde vamos continuar fazendo nossos códigos terem resultados diferentes, mas dessa vez, baseado em alguma interação do usuário. Até lá.