Curso de JavaScript — Parte 3/3
Introdução de JavaScript — O Código
Clique aqui para ir para a parte 1!
Clique aqui para ir para a parte 2!
Comentários
Assim como HTML e CSS, é possível escrever comentários dentro do seu código JavaScript que serão ignorados pelo navegador, e existirão simplesmente para prover instruções aos seus colegas desenvolvedores sobre como o código funciona (e pra você, se você tiver que voltar ao seu código depois de 6 meses e não se lembrar do que fez). Comentários são muito úteis, e você deveria usá-los frequentemente, principalmente quando seus códigos forem muito grandes. Há dois tipos:
- Comentário de uma linha, é escrito depois de duas barras;
// Eu sou um comentário- Comentário de múltiplas linhas é escrito entre os caracteres /** e */;
/**
* Eu também sou
* um comentário
*/Variáveis
Uma variável é um container para um valor, como um número que podemos usar em uma operação de adição, ou uma sequência de texto que possamos usar como parte de uma oração. Mas uma coisa especial a respeito das variáveis é que seu conteúdo pode mudar.
let test = 0;
test = 2;
console.log(test);A diferença entre var, let e const
Agora você pode estar pensando "por que precisamos de tantas palavras-chave para definir variáveis? Porque var e let? e onde usar o const?".
As razões são um tanto históricas. Quando o JavaScript foi criado, havia apenas var. Isso funciona basicamente bem na maioria dos casos, mas tem alguns problemas na maneira como funciona — seu design pode ser confuso ou totalmente irritante. Portanto, let foi criada nas versões modernas de JavaScript, uma nova palavra-chave para criar variáveis que funcionam de maneira um pouco diferente para var, corrigindo seus problemas no processo.
Constants em JavaScript
Muitas linguagens de programação têm o conceito de constant — um valor que uma vez declarado não pode ser alterado. Há muitas razões pelas quais você deseja fazer isso, desde segurança (se um script de terceiros alterou esses valores, poderia causar problemas) até a depuração e a compreensão do código (é mais difícil alterar acidentalmente valores que não devem ser alterados e bagunçar as coisas).
Nos primeiros dias do JavaScript, não existiam constants. No JavaScript moderno, temos a palavra-chave const, que nos permite armazenar valores que nunca podem ser alterados, const funciona exatamente da mesma maneira que let, exceto que você não pode atribuir um novo valor a const. No exemplo a seguir, a segunda linha geraria um erro:
const weekDays = 7;
weekDays = 8;Tipos de variáveis
Existem alguns diferentes tipos de dados que podemos armazenar em variáveis.
Números
Você pode armazenar números em variáveis, tanto números inteiros, como por exemplo 30 (também chamados de integers) como números decimais, por exemplo 2.456 (também chamados de floats ou floating point numbers). Você não precisa declarar tipos de variáveis no JavaScript, diferentemente de outras linguagens de programação. Quando você atribui a uma variável o valor em número, você não inclui as aspas:
let myAge = 17;Strings (cadeias de texto)
Strings são sequências de texto. Quando você dá a uma variável um valor em texto (string), você precisa envolver o texto em aspas simples ou duplas; caso contrário, o JavaScript vai tentar interpretá-lo como sendo outro nome de variável.
let byShark = 'See you!';Booleans (boleanos)
Booleans são valores verdadeiro/falso (true/false) — eles podem ter dois valores, true (verdadeiro) ou false (falso). São geralmente usados para verificar uma condição, que em seguida o código é executado apopriadamente. Por exemplo, um caso simples seria:
let alive = true;Enquanto na realidade seria utilizado mais da seguinte forma:
let test = 6 < 3;Esse exemplo está usando o operador "menor que" (<) para testar se 6 é menor que 3. Como você pode esperar, irá retornar false (falso), porque 6 não é menor que 3!.
Arrays
Um array é um único objeto que contém valores múltiplos inseridos entre colchetes e separados por vírgulas. Tente inserir as seguintes linhas de código no seu console:
let myName = ['Chris', 'Bob', 'Jim'];
let myNumber = [10,15,40];Uma vez que esses arrays estejam definidos, você pode acessar cada um de seus valores através de sua localização dentro do array. Tente essas linhas:
myName[0]; // deve retornar 'Chris'
myNumber[2]; // deve retornar 40Os colchetes especificam um valor do índice correspondente à posição do valor que você deseja retornado. Você talvez tenha notado que os arrays em JavaScript são indexados a partir do zero: o primeiro elemento está na posição 0 do índice.
Objetos
Em programação, um objeto é uma estrutura de código que representa um objeto da vida real. Você pode ter um simples objeto que representa um estacionamento de carro contendo informações sobre sobre sua largura e comprimento, ou você poderia ter um objeto que representa uma pessoa, e contém dados sobre seu nome, altura, peso, que idioma ela fala, como dizer olá a ela, e mais.
let dog = { name : 'Totó', age : 5 };Para obter a informação armazenada no objeto, você pode usar a seguinte sintaxe:
dog.nameOperadores
Existem vários operadores no javascript, abaixo veremos como usá-los.
┌──────────┬───────────────────┬──────────────────────────┐
│ Operador │ Descrição │ Exemplo │
├──────────┼───────────────────┼──────────────────────────┤
│ + │ Adição │ 6 + 9 │
│ - │ Subtração │ 20 - 15 │
│ * │ Multiplicação │ 3 * 7 │
│ / │ Divisão │ 10 / 5 │
│ % │ Resto ou módulo │ 10 % 2 │
│ === │ Igualdade estrita │ 5 === 2 + 4 │
│ !== │ Não-igualdade │ 'Chris' !== 'Ch' + 'ris' │
│ < │ Menor que │ 10 < 6 │
│ > │ Maior que │ 10 > 20 │
└──────────┴───────────────────┴──────────────────────────┘Operadores de incremento e decremento
Às vezes você deseja adicionar ou subtrair, repetidamente, um valor de uma variável numérica. Convenientemente isto pode ser feito usando os operadores incremento ++ e decremento --.
count++;Condições — IF — ELSE
O comando IF serve para alterar o fluxo de execução de um programa baseado no valor, verdadeiro ou falso, de uma expressão lógica.
A condição else serve como um caminho alternativo do if. Ou seja, o else vai ser executado se a condição sendo verificada no if for falsa.
Exemplo:
let test = 0;
if(test > 0) {
test--;
} else {
test++;
}Funções
As funções (functions), também conhecidas como sub-rotinas, são muito utilizadas em programação. Um dos grandes benefícios é não precisar copiar o código todas as vezes que precisar executar aquela operação, além de deixar a leitura do código mais intuitiva.
function somar(a, b) {
return a+b;
}
somar(2, 3);
somar(23, 435);LOOP — FOR
Em programação, LOOP é uma instrução para o programa repetir tarefas, Lembrando que loop em tecnologia da informação também é conhecido como um laço.
for (let index = 0; index < 10; index++) {
console.count(‘loop’);
}Existem outras formas de fazer um laço como forEach, for-in, for-of, while e etc, mas por enquanto o for básico é o suficiente.
Eventos
Eventos são ações ou ocorrências que acontecem no sistema que estamos desenvolvendo, no qual este te alerta sobre essas ações para que você possa responder de alguma forma, se desejado. Por exemplo, se o usuário clica em um botão numa pagina web, você pode querer responder a esta ação mostrando na tela uma caixa de informações.
Exemplo:
btn.addEventListener(‘click’, bgChange);Lista de eventos:
┌──────────────────┬─────────────────────────────────────────────┐
│ Evento │ Descrição │
├──────────────────┼─────────────────────────────────────────────┤
│ click │ É disparado quando é pressionado e liberado │
│ │ o botão primário do mouse, trackpad, etc. │
│ mousemove │ É disparado sempre que o cursor do │
│ │ mouse se move. │
│ mouseover │ É disparado quando o cursor do mouse é │
│ │ movido para sobre algum elemento. │
│ mouseout │ É disparado quando o cursor do mouse se │
│ │ move para fora dos limites de um elemento. │
│ dblclick │ É disparado quando acontece um clique │
│ │ duplo com o mouse, trackpad, etc. │
│ DOMContentLoaded │ É disparado quando o DOM do documento está │
│ │ totalmente carregado (mais sobre isso num │
│ │ tutorial futuro). │
│ load │ É disparado quando todo o documento (DOM e │
│ │ recursos externos como imagens, scripts, │
│ │ etc) está totalmente carregado. │
│ keydown │ É disparado quando uma tecla no teclado é │
│ │ pressionada. │
│ keyup │ É disparado quando uma tecla no teclado é │
│ │ liberada (depois de pressionada). │
│ scroll │ É disparado quando há scroll num elemento. │
└──────────────────┴─────────────────────────────────────────────┘
Para uma lista mais completa de todos os eventos que são suportados, dê uma olhada na seção Event Types do documento Document Object Model (DOM) Level 3 Events Specification do W3C – e uma tabela de compatibilidade de eventos também pode ser bastante útil.String Literal
Uma string literal são zero ou mais caracteres dispostos em aspas duplas (") ou aspas simples ('). Uma sequência de caracteres deve ser delimitada por aspas do mesmo tipo; ou seja, as duas aspas simples ou ambas aspas duplas. A seguir um exemplo de strings literais.
Tabela: Caracteres especiais no JavaScript
┌──────────┬──────────────────────────────┐
│ Caracter │ Descrição │
├──────────┼──────────────────────────────┤
│ \0 │ Byte nulo │
│ \b │ Backspace │
│ \f │ Alimentador de formulário │
│ \n │ Nova linha │
│ \r │ Retorno do carro │
│ \t │ Tabulação │
│ \v │ Tabulação vertical │
│ \' │ Apóstrofo ou aspas simples │
│ \" │ Aspas dupla │
│ \\ │ Caractere de barra invertida │
└──────────┴──────────────────────────────┘Template strings
Template Strings são strings que permitem expressões embutidas. Você pode utilizar string multi-linhas e interpolação de string com elas.
let a = 5;
let b = 10;console.log(`Quinze é ${a + b} e
não ${2 * a + b}.`);
Strict mode
O strict mode do ECMAScript é uma forma de optar por uma variante restrita do JavaScript. O strict mode faz várias mudanças nas semânticas normais do JavaScript. Primeiro, o strict mode elimina alguns erros silenciosos do JavaScript fazendo-os lançar exceções. Segundo, o strict mode evita equívocos que dificultam que motores JavaScript realizem otimizações: código strict mode pode às vezes ser feito para executar mais rápido que código idêntico não-strict mode. Terceiro, strict mode proíbe algumas sintaxes que provavelmente serão definidas em versões futuras do ECMAScript.
Strict mode para scripts
Para invocar strict mode para um script inteiro, coloque exatamente a declaração “use strict”; (ou ‘use strict’;) antes de qualquer outra declaração.
Validador
Caso tenha um arquivo JS muito grande é sempre bom verificar se tudo está realmente ok.
Padrão de Codificação
Documentação
Toda Linguagem tem documentação e o JavaScript não seria diferente, uma ferramenta que gosto bastante para ler documentação é o DevDocs.
caso precise de alguma dica de forma mais rápida use o devhints
Obrigado por ler!
Se você tiver alguma dúvida, reclamação ou dica, pode deixar aqui nos comentários. Vou ter o maior prazer em responder!
😊😊Até mais! 😊😊
