Javascript do básico ao intermediário – Variáveis

Quando trabalhamos com qualquer linguagem de programação, nos deparamos com o uso de variáveis, seja ela Tipada ou não. O fato é que é basicamente usamos variáveis para tudo, seja para armazenar vetores, listas, valores monetários ou até mesmo string JSON.

Antes de começarmos a utilizar nossas variáveis, vamos entender como elas funcionam. Imagine sua casa, nela contém: Geladeira, Armários, Cômoda entre outros moveis que utiliza para guardar seus objetos, de forma organizada. Em sua geladeira você não pode guardar qualquer coisa, como no compartimento de Ovos guardarem um Tenis, em seu armário guardar uma carne entre outros.

Variáveis são como gavetas, possuem diversos tamanhos e cada uma tem sua finalidade, como no exemplo acima citado, você não pode guardar uma panela na mesma gaveta de talheres, mas os talheres você guarda do local onde guarda as panelas, embora seja errado.

Na programação as regras são bem mais rigorosas, em linguagens como Java, CSharp, C entre outros onde a Tipagem é obrigatória. No Javascript as variáveis são Tipadas pelo interpretador, ou seja, isto não cabe ao programador.

Veja na tabela abaixo os principais tipos de variáveis, embora não declaramos ao criar uma.

Mesmo que não usamos os tipos para definir as variáveis, usamos suas regas para validação, efetuar parse e até mesmo somar números, pois a linguagem pode tentar juntar dois números como 1 + 1 retornar 11.

Uma regra muito importante que você deve respeitar e se atentar ao dar nome as variáveis, é não usar caracteres especiais, números no inicio do nome. Você pode usa o _ (underline), como _nome ou nome_completo, mas nunca &nome ou nome+completo.

Para exibir uma alerta na tela, usamos o código mostrado abaixo.

Código 01:

<script>
    alert("Olá, mundo!");
</script>

Já vimos como exibir uma mensagem na tela, agora vamos exibir o valor de uma variável.

Código 02:

<script>
     var nome = "Gunnar";
     alert(nome);
</script>

Observe o código a seguir, ele possui o mesmo nome, diferenciando que a letra N esta em maiúsculo na segunda ocorrência. Note que usamos + “” +, para separar, isto chamamos de concatenação, que nada mais é que dividir pedaços de códigos na qual não podem ser unidos, neste caso concatenamos para exibir um tracinho com espaço em ambos os lados entre os nomes.

Código 03:

<script>
     var nome = "Gunnar";
     var Nome = "Taina";
     alert(nome + " - " + Nome);
</script>

Se utilizarmos o \n em uma impressão de dado na tela, vamos foçar a quebra de uma linha, como exemplo ao invés de “ - ”, troque por “\n”, e verá os nomes em linhas diferentes.

Podemos declarar infinitas variáveis, mas deve tomar cuidado com o exagero, pois elas ficam armazenadas na memória RAM do computador e os acessos desnecessários podem causar a lentidão em sua aplicação, mesmo estando em maquina local.

No exemplo abaixo declaramos varias variáveis com diferentes valores e programamos para exibir seus valores para o usuário.

Código 04:

	<script>
			var nome = "Gunnar";
			var idade = 23;
			var sexo = 'M';
			var salario = 3.554;
			var ativo = true;
			
			alert("Nome: " + nome);
			alert("Idade: " + idade);
			alert("Sexo: " + sexo);
			alert("Salário: " + salario);
			alert("Ativo: " + ativo);
</script>

Para termos certeza que a Tipagem esta correta vamos imprimir no console do navegador  o tipo das variáveis, para isto basta usar typeof em seguida o nome da variável, como mostra o exemplo abaixo.

Código 05:

<script>
			var nome = "Gunnar";
			var idade = 23;
			var sexo = 'M';
			var salario = 3.554;
			var ativo = true;
			
			/*Obter o tipo*/
			console.log(typeof nome);
			console.log(typeof idade);
			console.log(typeof sexo);
			console.log(typeof salario);
			console.log(typeof ativo);
</script>

Para acessar o console, pressione a tecla 12 no Chrome ou botão direito do mouse em seguida Inspecionar elemento, clique em console.

Note que o salário e idade saíram como number, então para forçar um inteiro ou float, devemos fazer o parse, mas isto fica para o artigo de cálculos.

Existe uma função chamada de prompt, que exibe uma caixa de dialogo para inserção de informações na tela, podemos utilizar perguntar o nome de o usuário em seguida exibir na tela. Veja o código abaixo com o exemplo citado em execução.

Código 06:

<html lang="pt-br">
	<head>
		<title>Introdução ao JS</title>
		<meta charset="utf-8" />
		<script>
			var nome = prompt("Informe seu nome");
			alert(nome);
		</script>
	</head>
	<body>

	</body>
</html>

Ficamos por aqui, nos vemos no próximo artigo, e leiam o material dos links abaixo.