Fundamentos JS

Tipos de dados

  • String:

    - dados de texto

  • Number:

    - dados de numeros. ex: 2, 2.5

  • Boolean

    - dados de valor logico. ex: verdadeiro, falso

  • Undefined:

    - valor de variavel declara.

  • Null:

    - valor vazio intencionalmente pelo Dev

  • Symbol

    - ES6 - dado unico e imutavel

  • BigInt

    - Numeros maiores que o Number consegue suportar acrescentando "n" no final

  • Dados não-primitivos

    - Os tipos de dados não-primitivos, ao contrário dos primitivos, não armazenam o valor diretamente. Em vez disso, eles armazenam uma referência (um endereço de memória) para o local onde o valor real está armazenado. Isso significa que, quando você atribui um objeto a uma variável, a variável não contém o objeto em si, mas sim um ponteiro para ele.

    - Objetos Literais let n = {}: Coleções de pares chave-valor.

    - Arrays []: Listas ordenadas de valores.

    - Funções (){}

Variáveis

  • var:

    forma mais antiga, define o valor da variavel

  • let:

    criada em 2015 no ecmascript6, escopo de bloco, se gerada dentro de uma função so tera importancia dentro de mesma

  • const:

    tambem criada no ecmascript6, escopo de bloco,maior diferencial é sua imutabilidade.

Hoisting

Hoisting (que pode ser traduzido como "içamento") é um comportamento do JavaScript em que as declarações de variáveis e funções são "movidas" para o topo do seu escopo antes da execução do código. No entanto, é crucial entender que apenas a declaração é içada, não a inicialização.

Hoisting de Funções: As declarações de função (function declarations) são completamente içadas, tanto a declaração quanto a sua implementação. Isso permite que você chame uma função antes de sua declaração no código.

Operadores

Operadores Aritméticos

Operadores de Atribuição

Operadores de Comparação(Relacionais)

Operadores Logicos

Operador Ternario

sintaxe: condição ? valor1(caso True) : valor2(caso False)

                    let idade = 20;
                    let status = (idade >= 18) ? "Adulto" : "Menor de idade";
                    console.log(status); // Saída: "Adulto"

Operadores de tipo

typeof: Retorna uma string indicando o tipo do operando.

                    let n1 = 10;
                    console.log(typeof(n1))
                    result: Number

instanceof: Retorna true se um objeto é uma instância de um tipo de objeto.

                    let data = new Date(); 
                    data instanceof Date; // true

Operador Bittwise(Bit a Bit)

Tratam seus operandos como uma sequência de 32 bits (zeros e uns) e realizam operações em nível de bit. São menos comuns em programação web diária, mas úteis em cenários de baixo nível.

Spread

( ... ) : Usado para "espalhar" elementos de um array/objeto ou para agrupar o "resto" dos argumentos de uma função.

Estruturas de controle

Essencialmente, elas se dividem em duas categorias principais: Estruturas Condicionais (para tomar decisões) e Estruturas de Repetição (para executar tarefas repetitivas).

Estruturas Condicionais

Permitem que seu programa execute diferentes blocos de código com base em se uma condição é verdadeira (true) ou falsa (false).

if

É a estruturas condicional mais basico, executa uma linha de codigos caso a condição seja verdadeira.

                    let n1 = 10;
                    if(n1 > 0){
                        alert(n1 + " é um número positvo")
                    }

if else

if else é utilizado quando caso a primeira afirmativa for falsa o else executa o segundo bloco de codigo

                    let n2 = 20;
                    if(n2 <= 10){
                        console.log(n2 + " maior ou igual a 10")
                    }else{
                        console.log(n2 + " menor que 10")
                    }

obs: o if pode ser usado ao lado do else com um espaçamento caso queira dar uma nova condição para o bloco de codigo alternativo.

Switch Case

Uma alternativa ao if...else if...else para comparar uma variável com múltiplos valores possíveis. É ótimo para legibilidade quando há muitas condições.

                    let permissao = "gerente";

                    switch (permissao) {
                        case "comum":
                            console.log("Acesso Comum")
                            break;
                        case "gerente":
                            console.log("Acesso exclusivo")
                            break;
                        case "admin";
                            console.log("Acesso total");
                            break
                        default:
                            console.log("Acesso Negado")
                    }

Estruturas de Repetição(Loops)

Permitem executar um bloco de código repetidamente enquanto uma condição for verdadeira.

for

O loop mais comum, ideal quando você sabe de antemão quantas vezes quer que o bloco de código seja executado.

                sintaxe:
                    for(inicializacao; condicao; incremento){
                    }
                ex:
                    for (let i = 0; i < 5; i++){
                        console.log("O numero e: " + i)
                    }

While(enquanto)

Executa um bloco de código enquanto a condição especificada for verdadeira. É ideal quando você não sabe quantas iterações serão necessárias.

                sintaxe: enquanto for true continua
                    while(condição){
                        bloco de condigo
                    }
                ex:
                    let moedas = 10;
                    let tentativas = 0
                    while(moedas > 0){
                        moedas --;
                        tentativas++;
                        console.log("Gastou uma moeda. Restam: " + moedas)
                    }
                    console.log("acabou as moedas")

do...while

Similar ao while, mas com uma diferença crucial: o bloco de código é executado pelo menos uma vez, pois a condição é verificada após a primeira execução.

                    sintaxe:
                        do{
                            bloco de codigo
                        }while(condição);
                    ex: 
                        let senha;
                        do{
                            senha = prompt("Digite sua senha(deve ter mais de 4 caracteres)")
                        }

For...in

for...in: Itera sobre as chaves (propriedades) de um objeto.

                    sintaxe:
                        const carro = {marca: "Ford", modelo: "Ka", ano: 2015};
                        for (let chave in carro) {
                        console.log(chave + ": " + carro[chave]); // marca: Ford, modelo: Ka, ano: 2015
                        }

For...of

for...of: Itera sobre os valores de um objeto iterável (como Arrays, Strings, etc.). É a forma moderna e preferida para percorrer arrays.

                    sintaxe: 
                        const cores = ["vermelho", "verde", "azul"];
                        for (let cor of cores) {
                        console.log(cor); // vermelho, verde, azul
                        }

Controle dentro de Loops:

break e continue

break: Interrompe e sai completamente do loop.

continue: Pula a iteração atual e vai para a próxima.

Funções

O que é uma função

Pense em uma função como uma "máquina" ou uma "receita de bolo" que você cria para realizar uma tarefa específica. Você a define uma vez: escreve o código com as instruções dentro dela. Você a executa quantas vezes quiser: "chama" a função pelo nome para que ela execute as instruções.

Declarando Funções

Esta é a forma mais clássica de criar uma função. Ela usa a palavra-chave function, seguida pelo nome da função, uma lista de parâmetros entre parênteses e o bloco de código a ser executado entre chaves. Característica Principal: Sofre hoisting (içamento). Isso significa que você pode chamar a função no seu código antes mesmo de ela ter sido declarada, pois o JavaScript a "move" para o topo do escopo.

sintaxe:

                    function nomeDaFuncao(parametro1, parametro2) {
                    // código a ser executado
                    return resultado;
                    }

Expressão de Função:

Nesta abordagem, você cria uma função (geralmente anônima, ou seja, sem nome) e a atribui a uma variável. A função se torna o valor daquela variável. Característica Principal: Não sofre hoisting. A variável (const ou let) é içada, mas sua atribuição (a função em si) não é. Portanto, você só pode chamar a função depois da linha em que ela foi definida. 

                    const nomeDaVariavel = function(parametro1, parametro2) {
                    // código a ser executado
                    return resultado;
                    }; // Note o ponto e vírgula opcional aqui, pois é uma atribuição

                    ex: 
                    const despedida = function(nome) {
                    console.log("Até mais, " + nome + "!");
                    };
                    despedida("Carlos"); // Saída: "Até mais, Carlos!"

Arrow Function

Introduzidas no ES6, as arrow functions oferecem uma sintaxe mais curta e concisa, além de terem um comportamento diferente com a palavra-chave this (elas não têm seu próprio this, herdam do escopo ao redor).

caracteristicas:

  • Sintaxe curta.
  • Retorno implícito se não houver chaves {}.
  • Sempre anônimas, precisam ser atribuídas a uma variável.
  • Não sofrem hoisting
                    // Sintaxe completa
                    const somar = (a, b) => {
                    return a + b;
                    };

                    // Se houver apenas uma linha de retorno, pode omitir {} e 'return'
                    const subtrair = (a, b) => a - b;

                    // Se houver apenas um parâmetro, pode omitir os parênteses ()
                    const dobrar = numero => numero * 2;

                    // Sem parâmetros
                    const darOi = () => "Oi!";

                    ex: 
                    const calcularArea = (largura, altura) => largura * altura;

                    let area = calcularArea(10, 5);
                    console.log(area); // Saída: 50

Parâmetros e Argumentos

  • Parâmetros: São as "variáveis" listadas na definição da função. Funcionam como placeholders para os valores que a função espera receber.
  • Argumentos: São os valores reais que você passa para a função quando a chama.
                    // 'a' e 'b' são PARÂMETROS
                    function multiplicar(a, b) {
                    return a * b;
                    }

                    // 10 e 5 são ARGUMENTOS
                    let resultado = multiplicar(10, 5);

Recursos Modernos para Parâmetros (ES6+):

Parâmetros Padrão (Default Parameters): Você pode definir um valor padrão para um parâmetro, caso nenhum argumento seja fornecido para ele. 

                    function registrarUsuario(nome, plano = "Básico") {
                    console.log(`${nome} registrado no plano ${plano}.`);
                    }

                    registrarUsuario("Bia"); // Saída: Bia registrado no plano Básico.
                    registrarUsuario("Leo", "Premium"); // Saída: Leo registrado no plano Premium.

Parâmetros Rest (Rest Parameters): Permite que uma função aceite um número indefinido de argumentos como um array. 

                    function somarTodos(...numeros) {
                    let total = 0;
                    for (let num of numeros) {
                        total += num;
                    }
                    return total;
                    }
                    console.log(somarTodos(1, 2, 3));      // Saída: 6
                    console.log(somarTodos(10, 20, 30, 40)); // Saída: 100

Return em Funções

  • a função pode ter apenas um return.
  • Qualquer código após o return dentro da função não será executado.
  • Se uma função não tiver uma instrução return, ela retornará undefined por padrão.
                    function isMaiorDeIdade(idade) {
                    if (idade >= 18) {
                        return true; // A função para aqui e retorna true
                    }
                    // Esta linha só é alcançada se a condição do if for falsa
                    return false; 
                    }

                    let podeDirigir = isMaiorDeIdade(25); // podeDirigir agora tem o valor 'true'

                    if (podeDirigir) {
                    console.log("Pode tirar a carteira de motorista!");
                    }

Arrays e Objetos

Tanto Objetos quanto Arrays são usados para armazenar uma coleção de dados. A grande diferença está em como eles organizam e como você acessa esses dados.

  • Arrays: Pense em uma lista ordenada, como uma lista de compras ou uma fila de pessoas. A ordem dos itens importa e você os acessa pela sua posição (índice).
  • Objetos: Pense em uma ficha de cadastro ou um dicionário. Você tem um conjunto de propriedades (ou "rótulos") e cada um tem um valor associado. A ordem geralmente não importa, e você acessa os valores através dos seus nomes (chaves).

O Poder da Combinação: O Mais Comum na Prática

No mundo real, a maioria das estruturas de dados complexas (como as que vêm de uma API) são uma combinação de arrays e objetos.
Por exemplo, você pode ter uma lista (array) de usuários, onde cada usuário é um objeto com suas próprias propriedades. 

                    let usuarios = [
                    { // Objeto no índice 0
                        id: 1,
                        nome: "Ana Silva",
                        email: "ana@email.com",
                        ativo: true
                    },
                    { // Objeto no índice 1
                        id: 2,
                        nome: "Bruno Costa",
                        email: "bruno@email.com",
                        ativo: false
                    },
                    { // Objeto no índice 2
                        id: 3,
                        nome: "Carlos Souza",
                        email: "carlos@email.com",
                        ativo: true
                    }
                    ];

                    // Como acessar o e-mail do segundo usuário?
                    // 1. Acesse o elemento de índice 1 do array: usuarios[1]
                    // 2. Desse objeto retornado, acesse a propriedade 'email': .email
                    console.log(usuarios[1].email); // Saída: "bruno@email.com"

                    // Como encontrar todos os usuários ativos? (usando o método .filter de array)
                    let usuariosAtivos = usuarios.filter(function(usuario) {
                    return usuario.ativo === true;
                    });

                    console.log(usuariosAtivos); // Retorna um novo array com os objetos de Ana e Carlos

O que é o DOM?

Pense no seu arquivo HTML como uma planta arquitetônica de uma casa. Quando o navegador lê essa planta, ele constrói a casa de verdade. O DOM (Document Object Model) é essa "casa construída" na memória do navegador.
É uma representação do seu HTML em formato de objetos, organizados em uma estrutura de árvore. Cada tag (h1, p, div, button) se torna um "nó" ou um objeto nessa árvore.

O JavaScript pode interagir com essa árvore. Ele pode:

  • Ler a árvore (encontrar qualquer elemento).
  • Modificar a árvore (mudar textos, estilos, atributos).
  • Ouvir o que acontece na árvore (eventos como cliques, digitação, etc.).

Qualquer mudança que o JavaScript faz no DOM é refletida instantaneamente na página que o usuário vê

querySelector

Antes de manipular um elemento, você precisa encontrá-lo e "pegá-lo". O querySelector é a ferramenta moderna e mais poderosa para isso.

document.querySelector(seletor): Retorna o primeiro elemento da página que corresponde ao seletor CSS fornecido. Se nenhum for encontrado, retorna null. 

                    // Selecionar um elemento pelo seu ID (#)
                    const tituloPrincipal = document.querySelector('#titulo-principal');

                    // Selecionar um elemento pela sua classe (.)
                    const primeiroParagrafo = document.querySelector('.paragrafo');

                    // Selecionar um elemento pelo nome da tag
                    const cabecalho = document.querySelector('header');

                    // Selecionar um botão que está desabilitado (seletor de atributo)
                    const botaoInativo = document.querySelector('button[disabled]');

                    // Selecionar um link com a classe 'ativo' dentro do menu principal
                    const linkAtivo = document.querySelector('nav .link-ativo');

querySelectorAll

document.querySelectorAll(seletor): Retorna uma NodeList (que é muito parecida com um array) com todos os elementos que correspondem ao seletor. 

                    / Pega todos os parágrafos com a classe 'item'
                    const todosOsItens = document.querySelectorAll('.item');

                    // Como é uma lista, podemos usar .forEach para percorrer cada um
                    todosOsItens.forEach(function(item) {
                    console.log(item.textContent); // Imprime o texto de cada item
                    });

Eventos

Eventos são "sinais" que o navegador emite para avisar que algo aconteceu na página. O JavaScript pode "ouvir" esses sinais para disparar uma ação.
Alguns dos eventos mais comuns são:

  • click: Quando um elemento é clicado com o mouse.
  • mouseover: Quando o ponteiro do mouse passa por cima de um elemento.
  • mouseout: Quando o ponteiro do mouse sai de um elemento.
  • keydown: Quando uma tecla do teclado é pressionada.
  • keyup: Quando uma tecla do teclado é solta.
  • submit: Quando um formulário (form) é enviado.
  • focus: Quando um elemento de formulário (como um input) recebe o foco.
  • blur: Quando um elemento de formulário perde o foco.
  • load: Quando a página ou um recurso (como uma imagem) termina de carregar.

addEventListener

Esta é a "cola" que une tudo. O método addEventListener "anexa um ouvinte de evento" a um elemento que você selecionou. 

                    sintaxe:
                    elemento.addEventListener('tipoDoEvento', funcaoCallback);
  • elemento: A variável que contém o elemento selecionado com querySelector.
  • 'tipoDoEvento': Uma string com o nome do evento que queremos ouvir (ex: 'click').
  • funcaoCallback: A função que será executada automaticamente quando o evento ocorrer naquele elemento. "Callback" significa que é uma função que você passa para ser "chamada de volta" mais tarde.

fluxo de trabalho

  • SELECIONAR o(s) elemento(s) que você quer manipular (querySelector).
  • ESPERAR por uma ação do usuário (addEventListener).
  • REAGIR à ação, executando uma função que modifica o DOM (alterando texto, estilo, classes, etc.).