Como declarar uma variável em JavaScript – var

July 4, 2014 · Posted in Introdução · Comment 

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 aplicativo ú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.
Esse ponto e vírgula é danado pra gente esquecer.

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;

 

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

July 3, 2014 · Posted in Introdução · 1 Comment 

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 bem de computar, que é contar, e é basiacmente isso que um computador fazer: 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 apagas: 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 anteriar 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.

Erros em JavaScript – Como usar o Console (Tutorial de JavaScript)

June 15, 2014 · Posted in Uncategorized · Comment 

Neste tutorial de nosso Curso de JavaScript, vamos aprender o que é o Console do JS, para que serve, em quê nos vai ser útil e vamos falar sobre os erros e problemas que iremos lidar durante nossas vidas de desenvolvedor web.

 

Erros em programação JavaScript

Não importa o quanto você vá estudar, se já gosta de exatas (sim, Matemática ajuda, e muito, no ramo da computação) ou se já programou em outras linguagens de programação: você irá cometer muitos, muitos erro durante toda sua carreira de programador JavaScript.

Mas não se assuste, é normal. Não é uma coisa simples e fácil, programação JavaScript exige muito estudo e empenho mesmo, e errar vai fazer parte. As vezes iremos passar horas caçando os erros, tentando ver onde erramos, o motivo de nosso aplicativo não estar funcionando da maneira que queríamos, porque algo saiu diferente do esperado e o pior: porque, raios, nosso programa nem sequer roda.

Se você já programou uma linguagem de programação compilada, como C, C++ ou Java, sabe que ao tentar compilar um programa (transformar o seu código em um arquivo executável) e ele tiver algum erro, ele não vai compilar, vai dar erro e mostrar o erro que ocorreu.

Isso no JavaScript, e em linguagens de script de um modo geral, não é bem assim. Não há esse rigor, o que pode ser bom muitas vezes.
Mas geralmente é uma baita dor de cabeça. E o pior, você roda seu aplicativo JS e caso der algum erro, pode ser que não aconteça simplesmente nada.

Agora imagine que você fez um aplicativo JavaScript enorme, com centenas ou milhares de linhas, com vários arquivos .js, muitas funções, coisas complexas e tal, foi rodar e nada. Sim, nada apareceu.
É uma das sita

Pois bem, vamos apresentar uma ferramenta que será uma grande amiga e companheira sua, caso realmente leve a sério seus estudos em JavaScript, que é o console de erros.

 

Abrindo o Console de Comando e Erros do JavaScript

Uma das características mais importantes dos programadores é a capacidade de fuçar e descobrir as coisas sozinhos.
Se quer treinar esse instinto e habilidade, agora é uma boa hora.
Fuce no seu navegador web e encontre o “Console JavaScript”, mexa nos menus, ferramentas, opções, não desista, tente achar.

Caso não consiga ou não tenha paciência (aconselhamos a tentar mais), vamos dizer como abrir o console nos principais navegadores atualmente existentes e usados.

Tutorial de JavaScript - Curso online completo - Console do JS

Console de comando e erro do JavaScript

No Google Chrome, ache o ícone de menu, vá em Ferramentas e depois em “Console JavaScript”, ou simplesmente aperte “Control + Shift + J”, e verá a imagem acima.

Onde colocar o JavaScript em um site

May 31, 2014 · Posted in Introdução · Comment 

Neste tutorial de nosso Curso de JavaScript Online e Gratuito, iremos aprender um pouco mais do funcionamento do JavaScript em nossos navegadores.

Veremos onde e quando os scripts são executados, onde podem ser inseridos, como usar scripts externos ao documento HTML, scripts na tag <head>, <html>, dentre outros detalhes sobre como as coisas funcionam no mundo JavaScript.

 

Como o JavaScript funciona no navegador

Em nosso tutorial de JavaScript sobre a tag <script> passado, colocamos o código do JavaScript dentro da tag script, que por sua vez ficou dentro da tag head, logo no início de nosso documento HTML.
Isso não é regra, nem obrigatório.

Na verdade, como veremos no decorrer de nossa apostila de JavaScript, essa é a maneira mais incomum de se inserir scripts em sites, pois podemos colocar nossos códigos JavaScript em diversas partes de um documento HTML, até mesmo fora (em um arquivo externo, de extensão .js, que vamos aprender a criar ainda neste tutorial).

Mas antes de aprender sobre o posicionamento de nossos códigos em JavaScript, é importante entender como seu navegador vai ler e interpretar eles. Aliás, é importante também entender a ordem que o browser lê aquela enorme quantidade de códigos HTML, JavaScript, as vezes PHP, etc.

A ordem de leitura e interpretação (para renderizar na tela do navegador) é feita na ordem normal.
Se vier uma tag de imagem primeiro, ela será interpretada e exibida.
Se tiver um texto depois dessa tag de imagem, só depois esse texto vai ser exibido.
Sempre na ordem.

Assim, um código de JavaScript só é interpretado e executado quando é encontrado.
Além disso, o navegador só vai prosseguir quando interpretar todo o código JavaScript!
Durante sua carreira de desenvolvedor web, vai acontecer de você programar algo errado no JavaScript, como um looping que nunca acaba, e verá que o restante de sua página não vai ser carregada, pois o navegador ficou preso no script.

 

 JavaScript na tag <head> do HTML

A primeira coisa que um navegador lê e interpreta, é o conteúdo da tag <head> do HTML, pois lá existe contém informações importantes do documento (página) em questão, como título, descrição, língua dentre outras coisas.

Como fizemos no tutorial passado, colocamos nosso código JavaScript dentro da tag <script>, que ficou dentro da <head>.
Ou seja, nosso script foi executado bem no começo, antes mesmo de aparecer o conteúdo do site, pois a tag <head> vem antes da tag <body>.

Colocamos nossos scripts na head sempre que desejamos que ele seja executado antes do restante da página do site.
Por exemplo, um efeito especial no seu site, um script que evite que o usuário clique com o botão direito, um script que evite que o usuário aperte “Ctrol+C” pra copiar seu conteúdo…isso deve ser interpretado e carregado antes do site aparecer.

Na head, podemos colocar nosso script dentro da tag <script>, como já ensinamos no tutorial passado, como podemos passar o endereço do arquivo de extensão .js, externo ao documento HTML (vamos aprender a fazer isso no final deste tutorial).

 

JavaScript na tag <body> do HTML

Muitas vezes não é necessário carregar um script na head, antes do conteúdo da página ser carregada.
Por exemplo, você pode colocar um script que seja rodado apenas quando se clica em um botão. Não há necessidade de colocar ele na head, pois talvez não seja nem preciso que ele rode (talvez o usuário nem clique no botão).

Por isso, podemos colocar nossos scripts dentro da tag <body>, assim podemos ter um controle maior sobre quando o script deve ser interpretado pelo navegador.

O código a seguir exibe a data e hora de seu computador.
Note que ela só roda quando é chamada, no corpo do site.

<body>
	<h2>Curso JavaScript Progressivo - Online e Grátis</h2>
	Data e Hora atual: 
	<div id="data" style= "display:inline"></div>
	<script type="text/javascript">
		document.getElementById("data").innerHTML=Date();
	</script>

</body>

Ou seja, as vezes não é necessário que o script seja rodado antes.
Muitas vezes eles nem rodam, vai depender da interação do usuário, do que ele fizer.

No código acima, o trecho de JavaScript exibe a data no elemento na tag div de nome “data”.
Pode ser que queiramos colocar essa data só no final do site, ou somente quando clicarem em algum botão ou link.

Não saiam colocando scripts JS à toa, coloque somente o necessário, e onde realmente for necessário.
Lembrem-se que o Google leva em conta o tempo de carregamento de um site para rankear melhor em seus resultados de busca, e JavaScript pode deixar o carregamento de seu site bem lento!

 

JavaScript em arquivo externo .js

Os exemplos que demos foram bem simples, bem simples mesmo. Afinal, estamos apenas iniciando nosso curso de JavaScript. Porém, ao passo que você for estudando nossos tutoriais, você será capaz de programar scripts cada vez mais complexos e úteis.

Quando formos criar jogos em JavaScript, efeitos interessantes e aplicativos bem úteis e profissionais, veremos que facilmente o código JavaScript chega a ter dezenas ou centenas de linhas. Alguns sistemas mais complexos possuem milhares de linhas no script.

Agora você imagina o tamanho de um documento HTML, que possui centenas de código HTML e centenas de código JavaScript. Vai ser enorme, gigante e muito bagunçado. Um arquivo assim é difícil de lidar, de estudar, de fazer alguma alteração depois.

Visando organizar nossos códigos JavaScript, nós iremos colocar nosso código em um arquivo externo, um script.
Será um simples arquivo de texto, a única diferença é que ele deve ter a extensão .js
Se tiver estudado CSS, é exatamente a mesma coisa (no caso, usamos arquivo com extensão .css).

Então mãos a obra.
Abra seu editor de textos (como o notepad++, notepad, sublime text etc), e coloque o seguinte código:

alert("Estou aprendendo a programar em JavaScript!");

Salve esse arquivo como o nome “script.js“.
Agora, para nosso site saber da existência desse arquivo de script, vamos colocar o parâmetro “src” em nossa tag <script>, que vai dizer a URL, o endereço onde se localiza esse arquivo de JavaScript.

Coloque este arquivo no mesmo diretório (pasta) que está seu documento .html, sua head deve ficar:

<head>
	<title>Tutorial de JavaScript</title>
	<meta name="description" content="Onde inserir o código JavaScript no HTML">
	<metac harset="utf-8">
	<script type="text/javascript" src="script.js"></script>
</head>

Faça sua body da seguinte maneira:

<body>
	<h2>Curso JavaScript Progressivo - Online e Grátis</h2>
</body>

Agora rode seu arquivo HTML e veja o resultado.
Note que primeiro aparece a janela com o botão OK, mostrando a mensagem “Estou aprendendo a programar em JavaScript”.
E só depois que você clica em OK que aparece o corpo do site.

Como dissemos, primeiro o navegador vai rodar o que está na head.
No caso, existe um arquivo de script lá, indicado pelo endereço src=”script.js”, então esse script é inicialmente interpretado e rodado, por isso você vê primeiro a janela, e só depois que esse script termina de ser executado que o restante do site aparece, como havíamos dito.

 

Exemplo de código em JavaScript

Agora que já aprendemos bem onde posicionar nossos scripts, como o navegador os lê e como criar um arquivo de script externo ao HTML, vamos fazer alguns scripts bacanas!

Vimos que o navegador lê do começo até o fim do documento, e sai interpretando, executando e exibindo o que aparece automaticamente.
Porém, isso não é obrigatório.

Pode ser que o navegador exiba somente uma coisa, caso cliquem em algum botão, pode ser que execute algo diferente, se o usuário assim desejar…ou pode ser que nenhum script seja executado, mesmo que tenha um arquivo gigantesco de JavaScript.

Vamos lá, coloque o seguinte código em seu arquivo script.js:

function mostraData()
{
document.getElementById("data").innerHTML=Date();
}

function mostraMensagem()
{
	alert('Estou aprendendo a programar em JavaScript!');
}

 

Agora, coloque isso em sua tag body:

<body>
	<h2>Curso JavaScript Progressivo - Online e Grátis</h2>
	<p id="data"></p>
	<button type="button" onclick="mostraData()">Exibir data</button>

	<pid="msg"></p>
	<button type="button" onclick="mostraMensagem()">Exibir mensagem</button>
</body>

Rode. Vai aparecer dois botões.
Se clicar no primeiro, o navegador chama a função “mostraData()” e executa somente aquele trecho do script.
Já se você clicar no segundo botão, só vai ser executado o código dentro da função “mostraMensagem()”.

Bacana, não?
Iremos aprender como criar essas funções e diversos efeitos bacanas, no decorrer de nosso curso de JavaScript.

Como criar um script em JavaScript – A tag < script > – Tutorial “Olá Mundo”

February 24, 2014 · Posted in Introdução · 1 Comment 

Agora que já sabemos O Que É e Para Que Serve o JavaScript e já nos preparamos obtendo O Necessário Para Programar em JavaScript, vamos de fato colocar a mão na massa e aprender como criar um script em um site HTML.

Read more

Como programar em JavaScript – O necessário para começar

February 10, 2014 · Posted in Introdução · 1 Comment 

Ok, você já leu a respeito da linguagem de programação e está decidido: quer aprender como programar em JavaScript !

Mas onde vamos programar? Que programar devemos usar? Onde escrever o código, como saber se está certo? Como ver o resultado de meus scripts? Como enviar para meus amigos?

Neste Tutorial de JavaScript iremos responder a todas estas dúvidas iniciais para todos os que desejam começar a programar em JavaScript. Read more

JavaScript – O que é e Para que serve – Tutorial

February 4, 2014 · Posted in Introdução · 2 Comments 
Tutorial e Curso de JavaScript

Logotipo da linguagem JavaScript

Neste primeiro Tutorial de JavaScript de nossa apostila, vamos explicar, em detalhes, o que é o JavaScript, para que ele serve, qual seu propósito, por quê usar JavaScript?

Esta discussão inicial irá-lhe ajudar a ver o real propósito do JavaScript, onde e para quê ele deve ser usado, estudado e alvo de atenção.

Veremos todo o poder, flexibilidade e como a linguagem JavaScript praticamente revolucionou a internet, e esta o mundo.

Se você gostar do que vai ler, não tenha dúvidas, JavaScript foi feito para você.

Read more