Logo SatellaSoft



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

Aprenda a utilizar variáveis, imprimir seu valor na tela e entenda sua importância.


Ícone homem Gunnar Correa
Ícone data de publicação 10/03/2016
Ícone quantidade de visualização 3,405
Ícone bandeira do Brasil Português

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 Javascript

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.

Tipo

Utilização

Explicação

String

var nome = “”;

Textos

Int

var idade = 6;

Números inteiros

Float, Double

var salario = 3.500

Números quebrados

Char

var sexo = ‘M’;

Apenas um caractere

Bool

var ativo = true; var ativo = false

Verdadeiro ou falso (true or false)

 

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.

Console Google Chome

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.

Typeof - https://developer.mozilla.org/pt-BR/docs/Web/JavaScript/Reference/Operators/typeof

Memória heap e stack - http://pt.stackoverflow.com/questions/3797/o-que-s%C3%A3o-e-onde-est%C3%A3o-o-stack-e-heap

Expressões e operadores - https://developer.mozilla.org/pt-BR/docs/Web/JavaScript/Guide/Expressions_and_Operators

Variáveis - https://msdn.microsoft.com/pt-br/library/67defydd(v=vs.94).aspx

 




Sobre o autor


Gunnar Correa

Nome: Gunnar Correa

Site: http://www.gunnarcorrea.com


Autodidata, graduado em Desenvolvimento Web e especialista em Tecnologias na Educação em uma universidade no interior de São Paulo. Comecei meus estudos na área de programação quando ainda era criança, e atualmente estou estudando desenvolvimento de jogos.

Sou o CEO do portal SatellaSoft, criado em 2009 com o intuito de compartilhar conhecimento de forma gratuita e inédita.


Comentários



É necessário estar autenticado para comentar, clique aqui para se registrar ou aqui para acessar a sua conta!