Fundamentos de JavaScript: Variáveis, Tipos de Dados, Operadores e Estruturas de Controle

Introdução ao JavaScript

JavaScript é uma linguagem de programação interpretada, amplamente utilizada para renderização dinâmica de páginas web nos navegadores. Diferente de linguagens como Python, sua sintaxe é mais flexível e menos rigorosa em termos de tipagem.

Sintaxe Básica

Comentários

// Comentário de uma única linha

/*
  Comentário de múltiplas linhas
  semelhante ao CSS
*/

Inclusão de Scripts na Página

// 1. Dentro da tag <head> usando <script>
<script>
  console.log("Olá, mundo!");
</script>

// 2. Link externo no <head>
<script src="app.js"></script>

// 3. Link externo no final do <body> (recomendado)
<script src="app.js"></script>

Como o carregamento da página ocorre de cima para baixo, scripts que manipulam elementos HTML devem ser incluídos após os mesmos serem renderizados.

Terminação de Instruções

Em JavaScript, recomenda-se o uso do ponto e vírgula (;) para finalizar declarações.

Variáveis e Constantes

Declaração de Variáveis

Utilizam-se as palavras-chave var ou let (esta última introduzida no ES6). A diferença principal está no escopo:

var: escopo global ou de função, permitindo redeclaração
let: escopo de bloco, evitando vazamento para o escopo externo

var contador = 10;
let nomeUsuario = "Maria";

Constantes

Valores imutáveis são definidos com const:

const PI = 3.14159;

Tipos de Dados

Verificação de Tipo

let valor = 42;
console.log(typeof valor); // "number"

Number

Ambos inteiros e decimais pertencem ao tipo Number. O valor especial NaN (Not a Number) também é deste tipo.

String

Podem ser definidas com aspas simples, duplas ou crases (template literals):

let frase = 'Olá';
let outra = "Mundo";
let multi = `Linha 1
Linha 2`;

Métodos de String

let texto = "  Programação Web  ";

texto.length;                    // 18
texto.trim();                    // "Programação Web"
texto.charAt(3);                 // "o"
texto.indexOf("Web");            // 15
texto.substring(2, 7);           // "Progr"
texto.slice(-5, -1);             // " Web"
texto.toUpperCase();             // "  PROGRAMAÇÃO WEB  "
texto.toLowerCase();             // "  programação web  "
texto.split(" ");                // ["", "", "Programação", "Web", "", ""]

Boolean

Valores booleanos são true ou false (minúsculos). Valores como 0, "", null, undefined e NaN são considerados falsos.

null e undefined

null: representa ausência intencional de valor
undefined: indica que uma variável foi declarada mas não inicializada

Estruturas de Dados

Arrays

let lista = [10, 20, 30, 40];

lista.push(50);          // [10, 20, 30, 40, 50]
lista.pop();             // remove 50
lista.unshift(5);        // [5, 10, 20, 30, 40]
lista.shift();           // remove 5
lista.slice(1, 3);       // [20, 30]
lista.reverse();         // [40, 30, 20, 10]
lista.join("-");         // "40-30-20-10"
lista.concat([50, 60]);  // [40, 30, 20, 10, 50, 60]
lista.sort((a, b) => a - b); // ordenação numérica

let dobrados = lista.map(n => n * 2);
lista.forEach((item, index) => {
  console.log(`${index}: ${item}`);
});

Objetos

let pessoa = {
  nome: "Carlos",
  idade: 30,
  profissao: "Dev"
};

pessoa.nome;           // "Carlos"
pessoa["idade"];       // 30
pessoa.email = "c@x.com"; // adicionar propriedade

Operadores

Operadores Aritméticos

let a = 10, b = 3;

a + b;   // 13
a - b;   // 7
a * b;   // 30
a / b;   // 3.333...
a % b;   // 1

let x = 5;
let y = x++;  // y=5, x=6 (pós-incremento)
let z = ++x;  // x=7, z=7 (pré-incremento)

Operadores de Comparação

// Comparação fraca (com coerção)
"5" == 5;    // true
"5" != 5;    // false

// Comparação estrita (sem coerção)
"5" === 5;   // false
"5" !== 5;   // true

Operadores Lógicos

true && false;  // false
true || false;  // true
!true;          // false

Estruturas de Controle

let nota = 7;

if (nota >= 7) {
  console.log("Aprovado");
} else if (nota >= 5) {
  console.log("Recuperação");
} else {
  console.log("Reprovado");
}

let dia = "seg";
switch (dia) {
  case "seg":
    console.log("Início da semana");
    break;
  case "sex":
    console.log("Sextou!");
    break;
  default:
    console.log("Dia comum");
}

// Operador ternário
let status = nota >= 7 ? "Aprovado" : "Reprovado";

Laços de Repetição

for (let i = 0; i < 5; i++) {
  console.log(`Iteração ${i}`);
}

let frutas = ["maçã", "uva", "pera"];
for (let item of frutas) {
  console.log(item);
}

let usuario = { nome: "Ana", idade: 25 };
for (let chave in usuario) {
  console.log(chave, usuario[chave]);
}

let contador = 0;
while (contador < 3) {
  console.log(contador);
  contador++;
}

Funções

Função Declarativa

function somar(a, b) {
  return a + b;
}

Expressão de Função

const multiplicar = function(a, b) {
  return a * b;
};

Arrow Functions

const cubo = n => n ** 3;

const saudar = () => "Bem-vindo!";

const calcular = (x, y, op) => {
  return op(x, y);
};

Em JavaScript, parâmetros não precisam corresponder exatamente aos argumentos. O objeto arguments captura todos os argumentos passados, e valores ausentes resultam em undefined.

Objetos Nativos

Date

let agora = new Date();

agora.getFullYear();   // ano atual
agora.getMonth();      // 0-11
agora.getDate();       // dia do mês
agora.getHours();      // 0-23
agora.getMinutes();    // 0-59
agora.getTime();       // timestamp desde 1970

JSON

let dados = { usuario: "joao", pontos: 100 };

let jsonStr = JSON.stringify(dados);  // objeto -> string
let obj = JSON.parse(jsonStr);        // string -> objeto

RegExp

let padrao1 = new RegExp("^[a-z]{3,8}$");
let padrao2 = /^[a-z]{3,8}$/;

padrao2.test("abc");  // true
padrao2.test("123");  // false

Tags: javascript ES6 DOM Arrays objetos

Publicado em 7-15 07:39

Doido Dev