O que é JavaScript

Prévia do material em texto

1. O que é JavaScript?
JavaScript é uma linguagem de programação utilizada principalmente para criar páginas web dinâmicas. Uma página web dinâmica é aquela que incorpora efeitos como textos que aparecem e desaparecem, animações, ações que são ativadas ao clicar em botões e janelas com mensagens de aviso ao usuário.
2. Programação básica
Antes de começar a desenvolver páginas e funcionalidades com JavaScript, você deve conhecer os elementos básicos com os quais se constroem as aplicações.
Se você nunca programou antes, explicaremos os conhecimentos básicos detalhadamente, começando do zero para que depois você possa entender a programação avançada a ser utilizada na criação de aplicações reais.
2.1. Variáveis
Para se ter uma ideia do que é e como funciona uma variável, imagine uma caixa na qual você pode armazenar diferentes valores: palavras, números e até mesmo conjuntos. As variáveis funcionam como estas caixas: têm identificadores, que são seus nomes, e servem para guardar valores.
Nas linguagens de programação, as variáveis seguem uma lógica similar à de outras áreas, como a matemática. Graças às variáveis, é possível criar "programas genéricos", isto é, programas que funcionam sempre, independentemente dos valores que de fato serão utilizados.
Se não houvesse variáveis na matemática, não poderiam existir as equações e fórmulas. Da maneira análoga, não poderíamos fazer programas realmente úteis sem as variáveis.
Por exemplo, se não existissem as variáveis, um programa que soma dois números poderia ser escrito como:
resultado = 3 + 1
O programa anterior é tão específico que só serve para o caso em que o resultado da adição é 4, como por exemplo a soma de 1 com 3 e 0 com 4. Caso contrário, o resultado do programa estará errado.
2. O programa anterior pode ser reescrito como a seguir, utilizando variáveis para armazenar e fazer referência a cada número:
numero1 = 3
numero2 = 1
resultado = numero1 + numero2
Os elementos numero1 e numero2 são variáveis que armazenam os valores utilizados pelo programa. O resultado é calculado sempre em função de valores armazenados pelas variáveis, fazendo com que este programa funcione corretamente para qualquer par de números fornecido. Se os valores das variáveis numero1 e numero2 forem alterados, o programa continuará funcionando corretamente.
3. 
As variáveis em JavaScript são criadas através da palavra reservada var.
4. Desta forma, o exemplo anterior pode ser executado em JavaScript como se segue:
var numero1 = 3;
var numero2 = 1;
var resultado = numero1 + numero2;
A palavra reservada var só deve ser utilizada ao definir uma variável pela primeira vez, o que chamamos de declarar uma variável. Ao utilizar a variável no restante das instruções do script, basta escrever seu nome, sem repetir var. Em outras palavras, seria um erro escrever o código seguinte no lugar do exemplo anterior:
var numero1 = 3;
var numero2 = 1;
var resultado = var numero1 + var numero2;
Uma vez declarada uma variável, o passo seguinte é inicializá-la.
Dizemos inicializar uma variável ao atribuir um valor a ela através do sinal “=”. Nas próximas linhas, primeiro declaramos uma variável chamada numeroPrimo e logo a inicializamos, atribuindo-lhe um valor numérico:
var numeroPrimo;
numeroPrimo = 5;
Também é possível declarar e inicializar uma variável em apenas uma linha de código. Com relação ao exemplo anterior, o código ficaria assim:
var numeroPrimo = 5;
O nome de uma variável também é conhecido como identificador e deve respeitar as seguintes regras:
1. Só pode ser formado por letras, números e os símbolos “$” (dólar) e “_” (sublinhado, underscore, ou ainda underline);
2. O primeiro caractere não pode ser um número.
Portanto, os nomes das seguintes variáveis são corretos:
var $numero1;
var _$letra;
var $$$outroNumero;
var $_a__$4;
De maneira oposta, as seguintes variáveis têm identificadores incorretos:
var 1numero;
// Este exemplo contém um erro porque começa com um número.
var numero;1_123;
// Este exemplo está errado por conter o caractere ";"
Dicas importantes
- Ao final de cada linha de código, sempre colocamos “;” (exceto se ela terminar com "{" ou "}").
- Muitas vezes, os erros de código estão nos pequenos detalhes de como ele é escrito. Esteja sempre atenta às letras e números utilizados, bem como os símbolos e pontuações de cada linha.
2.2 Tipos de variáveis
Embora todas as variáveis em JavaScript sejam criadas da mesma maneira (usando a palavra reservada var), a forma de atribuir um valor depende do tipo que queremos armazenar (números, texto, etc).
2.2.1. Numéricas
Variáveis numéricas são utilizadas para armazenar valores numéricos inteiros (chamados integer em inglês) ou decimais (float). Neste caso, o valor é atribuído colocando diretamente o número inteiro ou decimal. Os números decimais usam o caracter “.” (ponto) ao invés de “,” (vírgula) para separar a parte inteira da decimal.
var icms = 16; // variável do tipo inteiro
var total = 234.65; // variável do tipo decimal
2.2.2. Cadeias de caracteres
O tipo cadeia de caracteres é usado para armazenar caracteres, palavras e frases de texto. Este tipo de variável é também chamado pelo seu nome em inglês string. Para atribuir um valor à variável, colocamos o valor entre aspas duplas ou simples para marcar seu início e fim:
var mensagem = "Bem-vindo a nosso site web";
var nomeProduto = 'Produto ABC';
var letraSelecionada = 'c';
2.2.3. Arrays
Algumas vezes, arrays são chamados de vetores, matrizes e também arranjos. Contudo, o termo array é o mais utilizado e é uma palavra bem aceita no mundo da programação.
Um array é uma coleção de variáveis. Sua utilidade pode ser melhor compreendida através de um exemplo simples: se uma aplicação precisa manipular os dias da semana, uma das possibilidades é criar sete variáveis do tipo texto:
var dia1 = "domingo";
var dia2 = "segunda";
...
var dia7 = "sábado";
Embora o código acima não esteja errado, ele é pouco eficiente e complica demasiadamente a programação. Se no lugar dos dias da semana tivéssemos que guardar os nomes dos meses do ano, o nome de todos os países do mundo ou medições diárias de temperatura dos últimos 100 anos, teríamos que criar dezenas ou centenas de variáveis.
Nestes casos, você pode agrupar todas as variáveis relacionadas em uma coleção de variáveis, ou array. O exemplo acima pode ser reescrito da seguinte forma:
var dias = ["domingo", "segunda", "terça", "quarta", "quinta", "sexta", "sábado"];
Agora, uma única variável chamada dias armazena todos os valores relacionados que, neste caso, são os dias da semana. Para definir um array, utilizamos os caracteres "[" e "]" para delimitar o seu começo e fim, e usamos o caractere "," (vírgula) para separar seus elementos:
var nomeArray = [valor1, valor2, ..., valorN];
Uma vez definido um array, é muito fácil acessar cada um de seus elementos. Cada elemento é acessado indicando sua posição dentro do array. A única complicação, responsável por muitos erros quando você começa a programar, é que devemos contar as posições dos elementos a partir do 0, e não do 1.
No exemplo do array com os dias da semana, a posição de cada elemento é:
var dias = ["domingo", "segunda", "terça", "quarta", "quinta", "sexta", "sábado"];
dias[0] é "domingo"
dias[1] é "segunda"
dias[2] é "terça"
dias[3] é "quarta"
dias[4] é "quinta"
dias[5] é "sexta"
dias[6] é "sábado"
No exemplo anterior, a primeira instrução deseja obter o primeiro elemento do array. Para isso, colocamos o nome do vetor e, entre colchetes, a posição de seu elemento. Como já comentamos, começamos a contar as posições a partir do 0, de modo que o primeiro elemento ocupa a posição 0 e é acessado por dias[0].
O valor dias[5] refere-se ao elemento que ocupa a sexta posição no vetor de dias. Como as posições começam a partir do 0, a posição 5 refere-se ao sexto elemento, neste caso, sexta.
2.2.4. Booleanas
As variáveis do tipo boolean, ou booleanas, também são conhecidas como variáveis de tipo lógico. Ainda que seja necessário estudar programaçãoavançada para realmente entender sua utilidade, seu funcionamento é muito simples.
Uma variável do tipo boolean armazena um tipo especial de dado que somente pode assumir dois valores: true (verdadeiro) ou false (falso). Não podemos utilizá-la para armazenar números e tampouco cadeias de caracteres.
Os únicos valores que estas variáveis podem armazenar são true e false, razão pela qual não podemos utilizar os valores “verdadeiro” e “falso”. Seguimos mostrando um par de variáveis do tipo boolean:
var clienteRegistrado = false;
var icmsIncluido = true;
2.3. Operadores
Variáveis, ​​por si só, possuem pouca utilidade. Até agora, vimos apenas como criar variáveis ​​de diferentes tipos. Para tornar os programas realmente úteis, são necessários outros tipos de ferramentas.
Os operadores permitem manipular o valor das variáveis, realizar operações matemáticas com seus valores e comparar diferentes variáveis. Desta forma, os operadores permitem que os programas executem cálculos complexos e tomem decisões lógicas de acordo com comparações e outros tipos de condições.
2.3.1. Atribuição
O operador de atribuição é o mais utilizado e também o mais simples. Este operador é usado para armazenar um valor específico em uma variável. O símbolo usado é “=”:
var numero1 = 3;
À esquerda do operador, sempre devemos indicar o nome de uma variável. À sua direita, podemos indicar variáveis, valores, condições lógicas, etc:
var numero1 = 3;
var numero2 = 4;
numero1 = 5;
// Agora, a variável numero1 vale 5
numero1 = numero2;
// Agora, a variável numero1 vale 4
A atribuição sempre é feita a uma variável, motivo pelo qual não podemos colocar um número à esquerda do símbolo. Por conta disso, o código a seguir está errado:
5 = numero1;
2.3.2. Incremento e decremento
Estes dois operadores são válidos somente para variáveis ​​numéricas e são utilizados para aumentar ou diminuir o valor de uma variável em uma unidade.
Exemplo:
var numero = 5;
numero++;
// O valor final de numero é 6
A operação de incremento é indicada pelo sufixo ++ no nome da variável. Como resultado, o valor dessa variável é aumentado em uma unidade. Portanto, o exemplo anterior é equivalente a:
var numero = 5;
numero = numero + 1;
// O valor final de numero é 6
Analogamente, a operação de decremento, indicada pelo sufixo -- no nome da variável, é usada para diminuir o valor da variável:
var numero = 5;
numero--;
// O valor final de numero é 4
O exemplo anterior é equivalente a:
var numero = 5;
numero = numero - 1;
// O valor final de numero é 4
2.3.3. Lógicos
Os operadores lógicos são imprescindíveis para aplicações complexas, já que são usados para tomar decisões sobre as instruções que o programa deverá executar dependendo de certas condições.
O resultado de qualquer operação que utiliza operadores lógicos é sempre um valor lógico, ou booleano.
2.3.3.1. Negação
Um dos operadores lógicos mais utilizados é o de negação. Ele é usado para obter o valor oposto ao da variável:
var visivel = true;
var oculto = !visivel;
No exemplo exibido, a variável visivel possui um valor verdadeiro. Dado isto, na segunda linha do código é apresentada uma segunda variável chamada oculto, que é a negação da variável visivel. Como visivel tinha o valor true (verdadeiro), seu valor oposto é false (falso). Assim, o valor da variável oculto é false.
A negação lógica é obtida ao prefixar o identificador da variável pelo símbolo “!”. O funcionamento deste operador se resume na seguinte tabela:
Se a variável original é do tipo boolean, é trivial obter sua negação.
No entanto, o que acontece quando a variável é um número ou uma cadeia de caracteres? Para obter a negação nestes tipos de variáveis, primeiro as convertemos em um valor booleano:
- Se a variável contém um número, seu valor boolean é false se vale 0 (inteiro ou decimal como em 0.0), e true para qualquer outro número (positivo ou negativo, decimal ou inteiro).
- Se a variável contém uma cadeia de caracteres, seu valor booleano é false se a cadeia é vazia ("") ou true em qualquer outro caso.
Exemplos:
var quantidade = 0;
var vazio = !quantidade;
// Ao final do exemplo, o valor de vazio é true. Isso acontece porque quantidade é o valor numérico 0, interpretado como false. A negação de quantidade, portanto, é true e esse valor é atribuído à variável vazio.
var quantidade = 2;
var vazio = !quantidade;
// Neste segundo exemplo, o valor de vazio é false. No início, o valor numérico 2 é atribuído à variável quantidade. Como seu valor booleano é true, seu valor oposto, false, é atribuído à variável vazio.
var mensagem = "";
var mensagemVazia = !mensagem;
// Neste código, o valor de mensagemVazia é true. Isto acontece porque mensagem é uma string vazia que é interpretada como false. A negação de mensagem, por sua vez, é true, valor atribuído a mensagemVazia.
var mensagem = "Bem-vinda";
var mensagemVazia = !mensagem;
// Já neste exemplo, mensagem não é vazia e, portanto, possui valor booleano true. Assim, mensagemVazia tem o valor oposto, false.
2.3.3.2. AND
A operação lógica AND obtém seu resultado combinando dois valores booleanos. O operador é indicado através do símbolo && e seu resultado somente é true (verdadeiro) se os dois operandos são true.
var valor1 = true;
var valor2 = false;
var resultado = valor1 && valor2;
// Acima, os operandos valor1 e valor2 são true e false. Portanto, o valor final da variável “resultado” é false nesta operação.
valor1 = true;
valor2 = true;
resultado = valor1 && valor2;
// Já nesse caso, ambos os operandos valor1 e valor2 são true. Por isso, o valor final da variável “resultado” é true.
2.3.3.3. OR
A operação lógica OR também combina dois valores booleanos. O operador é indicado pelo símbolo || e seu resultado é true se ao menos um dos dois operandos é true:
var valor1 = true;
var valor2 = false;
var resultado = valor1 || valor2;
// Neste exemplo, pelo menos um dos operandos tem o valor true: valor1. Portanto, o valor final da variável “resultado” é true.
valor1 = false;
valor2 = false;
resultado = valor1 || valor2;
// Nenhuma das variáveis valor1 e valor2 tem o valor true no exemplo acima. Portanto, o valor final da variável “resultado” é false nesta operação.
2.3.4. Matemáticos
O JavaScript permite que você execute operações matemáticas sobre o valor de variáveis ​​numéricas. Os operadores definidos são: adição (+), subtração (-), multiplicação (*) e divisão (/).
Exemplo:
var numero1 = 10;
var numero2 = 5;
var resultado = numero1 / numero2; // resultado = 2
resultado = 3 + numero1; // resultado = 13
resultado = numero2 - 4; // resultado = 1
resultado = numero1 * numero 2; // resultado = 50
Além dos quatro operadores básicos, o JavaScript define outro operador matemático que não é fácil de entender quando você estuda pela primeira vez, mas que é muito útil em alguns casos.
Trata-se do operador “módulo” que calcula o resto da divisão inteira de dois números. Se dividirmos 10 por 5, por exemplo, a divisão inteira é exata: 2. O resto dessa divisão é 0 e, assim, 10 módulo 5 é igual a 0.
Por outro lado, se dividirmos 9 por 5, a divisão inteira não é exata: o resultado é 1 e o resto, 4. Dessa forma, 9 módulo 5 é 4.
Indicamos o operador módulo em JavaScript através do símbolo % (não confunda com o cálculo de percentagem):
var numero1 = 10;
var numero2 = 5;
var resultado = numero1 % numero2; // resultado = 0
numero1 = 9;
numero2 = 5;
resultado = numero1 % numero2; // resultado = 4
2.3.5. Relacionais
Os operadores relacionais foram definidos pelo JavaScript de forma idêntica à matemática: maior que, menor que, maior ou igual e menor ou igual.
var numero1 = 9;
var numero2 = 5;
resultado = numero1 > numero2; // resultado = true
resultado = numero1 <= numero2; // resultado = false
resultado = numero1 == numero2; // resultado = false
resultado = numero1 != numero2; // resultado = true
Devemos tomar muito cuidado com o operador de igualdade (==), uma vez que é a origem da maioria dos erros de programação, até mesmo para usuários com uma certa experiência no desenvolvimentode scripts. O operador == é usado para comparar o valor de duas variáveis, o que é muito diferente do operador =, usado para atribuir um valor a uma variável.
No exemplo a seguir, o operador = atribui valores (sempre atribuímos o valor que está à direita do sinal à variável à esquerda):
var numero1 = 5;
var resultado = numero1 = 3;
Depois de atribuirmos o valor numérico 5 à variável número1, o valor 3 é atribuído na segunda linha. Ao mesmo tempo, atribuímos o valor de número1 a resultado, de modo que o valor final de resultado também é 3.
No próximo exemplo, o operador "==" compara variáveis.
var numero1 = 5;
var resultado = numero1 == 3;
Na primeira linha, atribuímos o valor numérico 5 à variável numero1. Já na segunda, atribuímos a resultado o valor resultante da comparação entre numero1 e o valor numérico 3. Como o valor de numero1 é 5 e 5 não é igual a 3, resultado tem o valor false ao final do código.
Os operadores relacionais também podem ser utilizados com variáveis do tipo string:
var texto1 = "olá";
var texto2 = "olá";
var texto3 = "tchau";
var resultado = texto1 == texto3;
// O valor de resultado é false, porque estamos comparando se o texto1 é igual ao texto3, o que é falso.
resultado = texto1 != texto2;
// O valor final de resultado é false pois comparamos se o texto1 é diferente do texto2, o que não é verdade.
Quando utilizamos cadeias de caracteres, os operadores "maior que" (>) e "menor que" (<) seguem um raciocínio que não é intuitivo: compara-se letra a letra a partir da esquerda até encontrar uma diferença entre as cadeias. Para determinar se uma letra é maior ou menor do que outra, as maiúsculas são consideradas menores que as minúsculas e as primeiras letras do alfabeto são menores que as últimas (“a” é menor que “b”, “b” é menor que “c”, “A” é menor que “a”, etc).
2.4. Estruturas de controle de fluxo
Os programas que podem ser feitos apenas com o uso de variáveis e operadores são simples sequências lineares de instruções básicas.
No entanto, podemos fazer programas que sigam um conjunto de instruções somente em casos predeterminados, ou programas que repitam de forma eficiente uma mesma função, como por exemplo somar um dado valor a todos os elementos de um vetor.
Para escrever programas desse tipo, são necessárias estruturas de controle de fluxo, como por exemplo instruções do tipo “se essa condição for satisfeita, faça isso, caso contrário, aquilo." Também há instruções do tipo: "repita isto enquanto esta condição for satisfeita”.
Ao utilizar estruturas de controle de fluxo, os programas deixam de ser uma sequência linear de instruções e tornam-se programas inteligentes capazes de tomar decisões com base no valor de suas variáveis.
2.4.1 Estrutura if
A estrutura mais utilizada em JavaScript e na maioria das linguagens de programação é o if. Ele é usado para tomar decisões com base em uma condição. Sua definição formal é:
if (condição) {
...
}
Se a condição for satisfeita (isto é, se seu valor for true), todas as instruções dentro das chaves serão executadas. Se a condição não for satisfeita (isto é, se seu valor for false) nenhuma delas será executada e o programa continuará executando o restante das instruções do script.
Exemplo:
var verMensagem = true;
if (verMensagem) {
var mensagem = "Olá Mundo";
}
No exemplo anterior, a variável mensagem é criada, pois o valor verdadeiro de verMensagem faz com que o código de dentro do bloco if seja executado.
O exemplo também poderia ser escrito da seguinte maneira:
var verMensagem = true;
if (verMensagem == true) {
var mensagem = "Olá Mundo";
}
Neste caso, a condição é uma comparação entre o valor da variável verMensagem e o valor true. Como ambos têm o mesmo valor, a igualdade é uma verdade e a condição, satisfeita. Dessa forma, as instruções de dentro do bloco if são executadas.
A comparação do exemplo anterior costuma ser a origem de muitos erros de programação, confundindo os operadores == e =. As comparações são sempre feitas com o operador ==, já que o operador = somente atribui valores:
var mostrarMensagem = true;
// Na próxima linha, os dois valores serão comparados
if (mostrarMensagem == false) {
...
}
// Errado - o valor false é atribuído à variável
if (mostrarMensagem = false) {
...
}
A condição que controla o if, entre parênteses, pode combinar os diferentes operadores lógicos e relacionais mostrados anteriormente:
var exibida = false;
if (!exibida) {
alert( "Esta é a primeira vez que a mensagem é exibida.");
}
Os operadores AND e OR permitem encadear várias condições simples para construir condições complexas:
var exibido = false;
var usuarioPermiteMensagens = true;
if (!exibido && usuarioPermiteMensagens) {
var mensagem = "Esta mensagem existe, sim!";
}
A condição anterior é formada por uma operação AND sobre duas variáveis. Por sua vez, aplicamos o operador de negação à primeira variável antes de executar a operação AND. Dessa forma, como o valor exibido é falso, o valor !exibido é verdadeiro. Como a variável usuarioPermiteMensagens tem valor verdadeiro, o resultado de !exibido && usuarioPermiteMensagens é igual a true && true, fazendo com que o resultado final da condição do if seja verdadeiro e, assim, as instruções de dentro do bloco if são executadas.
2.4.2. Estrutura if...else
Às vezes, as decisões que devem ser feitas não são do tipo "se a condição for satisfeita, faça isso; caso contrário, não faça nada". Geralmente, as condições são do tipo "se a condição for satisfeita, faça isso; caso contrário, faça aquilo".
Para este segundo tipo de decisão, existe uma variante da estrutura if chamada if...else. Sua definição formal é a seguinte:
if (condição) {
...
} else {
...
}
Se a condição for atendida (isto é, se seu valor for verdadeiro), todas as instruções encontradas dentro do if são executadas. Se a condição não for atendida (ou seja, se seu valor for falso), todas as instruções contidas no else são executadas.
Exemplo:
var idade = 18;
if (idade >= 18) {
var mensagem1 = "Você é maior de idade.";
} else {
var mensagem2 = "Você ainda é menor de idade.";
}
Se o valor da variável idade é maior ou igual ao valor numérico 18, a condição do if é atendida e, portanto, suas instruções são executadas e a mensagem "Você é maior de idade." é exibida. Porém, quando o valor da variável idade não é igual nem maior do que 18, a condição do if não é satisfeita, fazendo com que todas as instruções do bloco else sejam executadas automaticamente. Neste último caso, a mensagem "Você ainda é menor de idade." é escolhida.
O exemplo a seguir compara variáveis com textos:
var nome = "";
if (nome == "") {
alert( "Você ainda não nos disse seu nome.");
} else {
alert( "Gravamos seu nome.");
}
A condição do if anterior é construída pelo operador ==, usado para comparar dois valores (não confundir com o operador = usado para atribuição). No exemplo anterior, se o texto armazenado na variável nome é vazio (ou seja, igual a ""), exibimos a mensagem definida no if. Caso contrário, mostramos a outra mensagem definida no bloco else.
Podemos encadear a estrutura if...else para executar várias checagens seguidas:
if (idade < 12) {
var mensagem1 = "Você ainda é muito pequena.";
} else if (idade < 19) {
var mensagem2 = "Você é uma adolescente.";
} else if (idade < 35) {
var mensagem3 = "Você ainda é jovem.";
} else {
var mensagem4 = "Pense em se cuidar um pouco mais.";
}
Não é obrigatório que a combinação de estruturas if...else termine com a instrução else, pois você também pode terminá-las com uma instrução do tipo else if ().