Este artigo tem por objetivo apresentar os aspectos básicos do JavaScript, de modo a permitir que o leitor possa desenvolver scripts simples e poder entender códigos mais complexos disponíveis na rede, aumentando assim o seu conhecimento na linguagem.

O que é o JavaScript ?

JavaScript é uma linguagem de programação interpretada e leve projetada para a criação de aplicações voltadas para um ambiente de rede, de forma complementar e integrada com Java e HTML, além de ser aberta e multi-plataforma.

Sintaxe do JavaScript:

Um código JavaScript consiste de sentenças JavaScript que são colocadas dentro de tags <script>…</script> em uma página web.

Você pode colocar a tag <script> que contém seu código JavaScript em qualquer local de sua página web, mas o local ideal é dentro das tags <head>.

A tag <script> alerta o navegador para começar a interpretar todo o texto que está entre essas tags como um script. Assim, uma sintaxe simples de um programa JavaScript seria:

<script ...>
  JavaScript code
</script>

A tag <script> precisa de dois atributos importantes:

language: Esse atributo especifica que linguagem de script você estará usando. Tipicamente, o valor desse atributo será javascript, embora as versões recentes do HTML (e do XHTM, seu sucessor) terem eliminado o uso desse atributo.
type: Esse atributo é o recomendado atualmente para indicar a linguagem de script em uso e o seu valor deve ser “text/javascript”.

Dessa forma, o seu segmento JavaScript deve ficar dessa forma:

<script language="javascript" type="text/javascript">
  JavaScript code
</script>

Seu primeiro script JavaScript:

Vamos escrever uma classe de exemplo para imprimir na tela o texto “Hello World”.

<html>
<body>
<script language="javascript" type="text/javascript">
<!--
   document.write("Hello World!")
//-->
</script>
</body>
</html>

O código acima exibirá o seguinte resultado:

Hello World!

Espaços em branco e quebras de linha:

O JavaScript ignora espaços, TABs e quebra de linhas que apareçam em programas JavaScript.

Por causa disso, você pode usar espaços, TABs e quebras de linhas livremente em seu programa de forma que você fica livre para organizar o seu programa de uma forma elegante e consistente para tornar o código mais fácil de ler e ser entendido.

Ponto-e-virgulas são opcionais:

Sentenças simples em JavaScript são geralmente seguidas por um ponto-e-virgula, como é feito em C, C++ e Java. O JavaScript, porém, permite que você omita esse caractere se suas sentenças estiverem cada uma em uma linha separada. Por exemplo, o código a seguir pode ser escrito sem ponto-e-virgulas:

<script language="javascript" type="text/javascript">
<!--
  var1 = 10
  var2 = 20
//-->
</script>

Mas quando formatado em uma única linha, como o código a seguir, os ponto-e-virgulas são necessários:

<script language="javascript" type="text/javascript">
<!--
  var1 = 10; var2 = 20;
//-->
</script>

Note que é uma boa prática de programação usar o ponto-e-virgulas.

Sensibilidade a maiúsculas/minusculas:

O JavaScript é uma linguagem sensível à caixa. Isso significa que palavras-chaves, variáveis, nomes de funções e outros identificadores da linguagem devem ser digitados com uma capitalização consistente das letras.

Assim, identificadores como Time, TIme e TIME terão significados diferentes no JavaScript.

OBS.: Cuidados devem ser tomados ao escrever os nomes das variáveis e das funções em JavaScript.

Comentários no JavaScript:

O JavaScript suporta tanto o estilo de comentários de C quanto de C++. Assim:

Qualquer texto entre um // e o final da linha é tratado como um comentário e é ignorado pelo JavaScript.
Qualquer texto entre os caracteres /* e */ é tratado como um comentário. Isso pode se espalhar por múltiplas linhas.
O JavaScript também reconhece a sequência de abertura de comentário de comentário do HTML: <!–. O JavaScript trata isso como um comentário de uma única linha, assim como um comentário iniciado com //.
A sequência de fechamento de comentário do HTML –> não é reconhecida pelo JavaScript; dessa forma, deve ser escrita como //–>.

Localização do código JavaScript no arquivo HTML:

Existe bastante flexibilidade para incluir código JavaScript em um documento HTML. Mas existem maneiras preferíveis de incluir JavaScript no arquivo HTML.

Script na seção <head>…</head>.
Script na seção <body>…</body>.
Script nas seções <body>…</body> e <head>…</head>.
Script em um arquivo externo e então incluído na seção <head>…</head>.

Tipos de dados no JavaScript:

O JavaScript permite que você trabalhe com três tipos de dados primitivos:

Números. ex.: 123, 120.50 etc.
Strings de texto. ex.: “This text string” etc.
Valores Booleanos. ex.: true ou false.

O JavaScript também define tipos de dados triviais, null e undefined, cada um dos quais define apenas um único valor.

Variáveis no JavaScript:

Como muitas outras linguagens de programação, o JavaScript possui variáveis. As variáveis podem ser imaginadas como uma contêiner. Você pode colocar dados nesses contêineres e depois fazer referência a esses dados apenas pelo nome do contêiner.

Antes de usar uma variável no JavaScript, você precisa declara-la. As variáveis são declaradas com a palavra-chave var, da seguinte forma:

<script type="text/javascript">
<!--
var money;
var name;
//-->
</script>

Escopo de variáveis no JavaScript:

O escopo de uma variável é a região de seu programa na qual ela foi definida. A variável do JavaScript terá apenas dois escopos:

Variáveis globais: Uma variável global possui escopo global, o que significa que ela está definida em qualquer lugar do código JavaScript.
Variáveis locais: Uma variável local será visível apenas dentro da função onde foi definida. Parâmetros de funções são sempre variáveis locais dessa função.

Nomes de variáveis no JavaScript:

Ao nomear suas variáveis no JavaScript, tenha as seguintes regras em mente:

Você não pode usar nenhuma das palavras chaves reservadas do JavaScript como nome de variável. Essas palavras chaves são mencionadas na próxima seção. Por exemplo, break ou boolean não são nomes válidos para variáveis.
Nomes de variáveis em JavaScript não podem começar com um número (0-9). Elas precisam ser iniciadas com uma letra ou caractere sub-linha. Por exemplo, 123test é um nome inválido, mas _123test é válido.
Nomes de variáveis JavaScript são sensíveis à caixa. Por exemplo, Name e name são duas variáveis diferentes.

Palavras reservadas do JavaScript:

As palavras a seguir são palavras reservadas do JavaScript. Elas não podem ser usadas como nome de variáveis, funções, métodos, etiquetas de loops, ou nome de objetos.

abstract
boolean
break
byte
case
catch
char
class
const
continue
debugger
default
delete
do
double

else
enum
export
extends
false
final
finally
float
for
function
goto
if
implements
import
in

instanceof
int
interface
long
native
new
null
package
private
protected
public
return
short
static
super

switch
synchronized
this
throw
throws
transient
true
try
typeof
var
void
volatile
while
with

Os operadores aritméticos:

Os seguinte operadores aritméticos são suportados pela linguagem JavaScript:

Assuma que a variável A guarda o valor 10 e a variável B o valor 20.

Operador	Descrição	Exemplo
+	Adiciona dois operadores	A + B = 30
–	Suntrai o segundo operador do primeiro	A – B = -10
*	Multiplica os operadores	A * B = 200
/	Divide o numerador pelo denominador	B / A = 2
%	Operador de módulo e resto de divisão	B % A = 0
++	Operador de incremento, incrementa o valor inteiro em 1 unidade	A++ = 11
—	Operador de diminuição, diminui o valor inteiro em 1 unidade	A– = 9

Os operadores de comparação:

Os seguintes operados de comparação são suportados pelo JavaScript:

Assuma que a variável A guarda o valor 10 e a variável B o valor 20.

Operador	Descrição	Exemplo
==	Verifica se o valor de dois operandos é igual ou não, se sim a condição torna-se verdadeira.	(A == B) is not true.
!=	Verifica se o valor de dois operandos é igual ou não, se os valores não form iguais então a condição torna-se verdadeira.	(A != B) is true.
>	Verifica se o valor do operando à esquerda é maior do que o operando à direita, se sim a condição torna-se verdadeira.	(A > B) is not true.
<	Verifica se o valor do operando à esquerda é menor do que o operando à direita, se sim a condição torna-se verdadeira.	(A < B) is true.
>=	Verifica se o valor do operando à esquerda é maior ou igual do que o operando à direita, se sim a condição torna-se verdadeira.	(A >= B) is not true.
<=	Verifica se o valor do operando à esquerda é menor ou igual do que o operando à direita, se sim a condição torna-se verdadeira.	(A <= B) is true.

Operadores lógicos:

Os seguintes operadores lógicos são suportados pela linguagem JavaScript.

Assuma que a variável A guarda o valor 10 e a variável B o valor 20.

Operador	Descrição	Exemplo
&&	Chamado de operador E lógico. Se os dois operadores não forem zero então a condição torna-se verdadeira.	(A && B) is true.
\|\|	Chamado de operador OU lógico. Se qualquer um dos dois operandos não for zero então a condição torna-se verdadeira.	(A \|\| B) is true.
!	Chamado de operador NÃO lógico. Usado para reverter o estado lógico de seu operando. Se a condição for verdadeira então o operador NÃO torna-lo-á falsa.	!(A && B) is false.

Os operadores bit a bit:

Os seguintes operadores bit-a-bit são suportados pelo JavaScript.

Assuma que a variável A guarda o valor 2 e a variável B o valor 3.

Operador	Descrição	Exemplo
&	Called Bitwise AND operator. It performs a Boolean AND operation on each bit of its integer arguments.	(A & B) is 2 .
\|	Called Bitwise OR Operator. It performs a Boolean OR operation on each bit of its integer arguments.	(A \| B) is 3.
^	Called Bitwise XOR Operator. It performs a Boolean exclusive OR operation on each bit of its integer arguments. Exclusive OR means that either operand one is true or operand two is true, but not both.	(A ^ B) is 1.
~	Called Bitwise NOT Operator. It is a is a unary operator and operates by reversing all bits in the operand.	(~B) is -4 .
<<	Called Bitwise Shift Left Operator. It moves all bits in its first operand to the left by the number of places specified in the second operand. New bits are filled with zeros. Shifting a value left by one position is equivalent to multiplying by 2, shifting two positions is equivalent to multiplying by 4, etc.	(A << 1) is 4.
>>	Called Bitwise Shift Right with Sign Operator. It moves all bits in its first operand to the right by the number of places specified in the second operand. The bits filled in on the left depend on the sign bit of the original operand, in order to preserve the sign of the result. If the first operand is positive, the result has zeros placed in the high bits; if the first operand is negative, the result has ones placed in the high bits. Shifting a value right one place is equivalent to dividing by 2 (discarding the remainder), shifting right two places is equivalent to integer division by 4, and so on.	(A >> 1) is 1.
>>>	Called Bitwise Shift Right with Zero Operator. This operator is just like the >> operator, except that the bits shifted in on the left are always zero,	(A >>> 1) is 1.

Operadores de atribuição:

Os seguintes operadores de atribuição são suportados pela linguagem JavaScript:

Operador	Descrição	Exemplo
=	Simple assignment operator, Assigns values from right side operands to left side operand	C = A + B will assigne value of A + B into C
+=	Add AND assignment operator, It adds right operand to the left operand and assign the result to left operand	C += A is equivalent to C = C + A
-=	Subtract AND assignment operator, It subtracts right operand from the left operand and assign the result to left operand	C -= A is equivalent to C = C – A
*=	Multiply AND assignment operator, It multiplies right operand with the left operand and assign the result to left operand	C = A is equivalent to C = C A
/=	Divide AND assignment operator, It divides left operand with the right operand and assign the result to left operand	C /= A is equivalent to C = C / A
%=	Modulus AND assignment operator, It takes modulus using two operands and assign the result to left operand	C %= A is equivalent to C = C % A

Outros operadores:

O operador condicional (? 🙂

Existe um operador chamado de operador condicional. Esse operador primeiro calcula uma expressão para um valor verdadeira ou falso e então executa uma das duas sentenças fornecidas, dependendo do resultado do cálculo. O operador condicional possui a seguinte sintaxe:

Operador	Descrição	Exemplo
? :	Expressão condicional	Se a condição é verdadeira então ? O valor é X : Senão o valor é Y

O operador typeof

O operador typeof é um operador unário que é colocado antes de seu operando único, que pode ser de qualquer tipo. Seu valor é uma String que indica o tipo de dado do operando.

O operador typeof pode retornas os valores “number”, “string” ou “boolean” dependendo de seu operando e retorna true ou false baseado nesse cálculo.

sentença if:

A sentença if é a sentença fundamente de controle que permite que o JavaScript tome decisões e execute sentenças de forma condicional.

Sintaxe:

if (expression){
   Statement(s) to be executed if expression is true
}

sentença if…else:

A sentença if…else é a próxima forma de sentença de controle que permite que o JavaScript execute sentenças de forma controlada.

Sintaxe:

if (expression){
   Statement(s) to be executed if expression is true
}else{
   Statement(s) to be executed if expression is false
}

sentença if…else if…:

A sentença if…else if é uma sentença de controle que está um nível avançada e permite que o JavaScript tome a decisão correta dentre várias condições.

Sintaxe:

if (expression 1){
   Statement(s) to be executed if expression 1 is true
}else if (expression 2){
   Statement(s) to be executed if expression 2 is true
}else if (expression 3){
   Statement(s) to be executed if expression 3 is true
}else{
   Statement(s) to be executed if no expression is true
}

sentença switch:

A sintaxe básica da sentença switch é ter uma expressão a ser calculada e diferentes sentenças a serem executas dependendo do valor da expressão. O interpretador verifica cada caso com o valor da expressão até que uma coincidência ser encontrada. Se nenhum dos valores coincidir, uma condição padrão será executada.

switch (expression)
{
  case condition 1: statement(s)
                    break;
  case condition 2: statement(s)
                    break;
   ...
  case condition n: statement(s)
                    break;
  default: statement(s)
}

O laço while:

O loop mais básico do JavaScript é o loop while que será discutido nesse tutorial.

Sintaxe:

while (expression){
   Statement(s) to be executed if expression is true
}

O laço do…while:

O loop do…while é similar ao loop while exceto que a checagem da condição acontece no final do loop. Isso significa que o loop sempre será executado ao menos uma vez, mesmo se a condição seja falsa.

Sintaxe:

do{
   Statement(s) to be executed;
} while (expression);

O laço for:

O loop for é a forma mais compacta de loop e inclui três partes importantes:

A inicialização do loop, onde inicializamos nosso contador com uma valor inicial. A sentença de inicialização é executada antes do loop começar.
A sentença de teste, que irá testar se a condição dada é verdadeira ou não. Se a condição for verdadeira, então o código que está dentro do loop será executado, caso contrário o loop será encerrado.
A sentença de iteração, onde você pode incrementar ou subtrair o seu contador.

Você pode por todas essas três parte em uma única linha separas por um ponto-e-virgula.

Sintaxe:

for (initialization; test condition; iteration statement){
     Statement(s) to be executed if test condition is true
}

O laço for…in:

for (variablename in object){
  statement or block to execute
}

Em cada iteração uma propriedade do objeto é associada à variablename e esse loop continua até que todas as propriedade do objeto sejam processadas.

A sentença break:

A sentença break, que foi introduzida brevemente com a sentença switch, é usada para sair de um loop mais cedo, interrompendo a iteração.

A sentença continue:

A sentença continue diz ao interpretador para iniciar imediatamente a próxima iteração do loop e pular o bloco de código restante.

Quando uma sentença continue é encontrada, o fluxo do programa será movido para a expressão de verificação do loop imediatamente e se a condição ainda for verdadeira, a iteração seguinte será iniciada, senão o controle sai do loop.

Definição de função:

Antes de usar uma função, precisamos defini-la. A forma mais comum de fazer isso no JavaScript é usando a palavra chave funtion seguida pelo nome único da função, uma lista de parâmetros (que pode ser vazia) e um bloco de sentenças cercado por chaves. A sintaxe básico é mostrada a seguir:

<script type="text/javascript">
<!--
function functionname(parameter-list)
{
  statements
}
//-->
</script>

Chamando uma função:

Para invocar a função em algum lugar do script, você simplesmente precisa escrever o nome dessa função, da seguinte forma:

<script type="text/javascript">
<!--
sayHello();
//-->
</script>

Exceções

Exceções podem ser tratadas com a estrutura try/catch/finally comum.

<script type="text/javascript">
<!--
try {
   statementsToTry
} catch ( e ) {
      catchStatements
} finally {
      finallyStatements
}
//-->
</script>

O bloco try precisa ser seguido ou por um bloco catch exato ou por um bloco finally (ou ambos). Quando uma exceção ocorre no bloco catch, a exceção é posicionada em e e o bloco catch é executado. O bloco finally é executada incondicionalmente após os blocos try/catch.

Caixa de diálogo de alertas:

Uma caixa de diálogo de alerta é mais usada para dar algum aviso ao usuário. Como no caso de um campo de entrada de texto precisa que o algum texto seja informado e o usuário não informa nenhum dado nele, então como parte da validação você pode usar essa caixa de diálogo para enviar a mensagem, da seguinte forma:

<head>
<script type="text/javascript">
<!--
   alert("Warning Message");
//-->
</script>
</head>

Caixa de diálogo de confirmação:

Uma caixa de diálogo de confirmação é mais usada para pedir o consentimento do usuário sobre algo. Ela exibe uma caixa de dialogo com dois botões: Ok e Cancelar.

Você pode usar essa caixa de diálogo da seguinte forma:

<head>
<script type="text/javascript">
<!--
   var retVal = confirm("Do you want to continue ?");
   if( retVal == true ){
      alert("User wants to continue!");
          return true;
   }else{
      alert("User does not want to continue!");
          return false;
   }
//-->
</script>
</head>

Caixa de diálogo de pergunta:

Você pode usar essa caixa de diálogo da seguinte forma:

<head>
<script type="text/javascript">
<!--
   var retVal = prompt("Enter your name : ", "your name here");
   alert("You have entered : " +  retVal );
//-->
</script>
</head>

Redirecionamento de página:

É bastante simples criar um redirecionamento de página usando JavaScript no lado cliente. Para redirecionar os visitante de seu site para uma nova página, apenas adicione a linha a seguir na seção head:

<head>
<script type="text/javascript">
<!--
   window.location="http://www.newlocation.com";
//-->
</script>
</head>

A palavra-chave void:

A palavra chave void é importante no JavaScript pois pode ser usada como um operador unário que aparece antes de um único operando, que pode ser de qualquer tipo.

Esse operador especifica um expressão que será calculada mas não retornará um valor. Sua sintaxe pode ser a seguinte:

<head>
<script type="text/javascript">
<!--
void func()
javascript:void func()
or:
void(func())
javascript:void(func())
//-->
</script>
</head>

A impressão de página:

O JavaScript ajuda você a implementar essa funcionalidade usando a função print do obekto window.

A função window.print() do JavaScript irá imprimir a página web atual ao ser executada. Você pode chamar essa função diretamente usando o evento onclick da seguinte forma:

<head>
<script type="text/javascript">
<!--
//-->
</script>
</head>
<body>
<form>
<input type="button" value="Print" onclick="window.print()" />
</form>
</body>

Armazenando Cookies:

A maneira mais simples de criar um cookie é associar um valor String a um objeto document.cookie, da seguinte forma:

Sintaxe:

document.cookie = "key1=value1;key2=value2;expires=date";

Lendo Cookies:

Ler um cookie é tão simples quanto escreve-lo, porque o valor do objeto document.cookie é o próprio cookie. Dessa forma, você pode usar essa String onde for preciso acessar o cookie.

The document.cookie string will keep a list of name=value pairs separated by semicolons, where name is the name of a cookie and value is its string value.

A String document.cookie manterá uma de pares name/value separados por ponto-e-virgulas, onde name é o nome do cookie e value é o valor String

Traduzido de tutorialspoint.com