Mini Curso de JavaScript

Sintaxe e Tipos de Dados

Nesta seção, você aprenderá sobre a sintaxe básica do JavaScript e os tipos de dados.


// Números
let numeroInteiro = 10;
let numeroDecimal = 3.14;

// String
let texto = "Olá, Mundo!";

// Booleano
let booleano = true;

// Undefined
let indefinido;

// Null
let nulo = null;

// Objeto
let pessoa = {
    nome: "João",
    idade: 30,
    casado: false
};

// Array
let frutas = ["Maçã", "Banana", "Laranja"];

// Função
function soma(a, b) {
    return a + b;
}
console.log(soma(5, 3)); // Saída: 8

Variáveis e Operadores

Aqui, você aprenderá sobre declaração de variáveis, operadores aritméticos, de atribuição, de comparação, lógicos e outros.


// Variáveis
let variavelGlobal = "Global";
const PI = 3.14;

// Operadores Aritméticos
let soma = 5 + 3;
let subtracao = 5 - 3;
let multiplicacao = 5 * 3;
let divisao = 5 / 3;
let restoDivisao = 5 % 3;

// Operadores de Atribuição
let x = 10;
x += 5; // x = x + 5;

// Operadores de Comparação
let igual = 5 == "5"; // true
let estritamenteIgual = 5 === "5"; // false

// Operadores Lógicos
let condicao1 = true;
let condicao2 = false;
let resultadoE = condicao1 && condicao2; // false
let resultadoOU = condicao1 || condicao2; // true
let resultadoNao = !condicao1; // false

Estruturas de Controle

Esta seção aborda estruturas condicionais (if, else), estruturas de repetição (for, while) e outras.


// if...else
let idade = 18;
if (idade >= 18) {
    console.log("Você é maior de idade.");
} else {
    console.log("Você é menor de idade.");
}

// for
for (let i = 0; i < 5; i++) {
    console.log(i);
}

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

// switch
let diaSemana = "Segunda";
switch (diaSemana) {
    case "Segunda":
        console.log("Hoje é segunda-feira.");
        break;
    case "Terça":
        console.log("Hoje é terça-feira.");
        break;
    default:
        console.log("Hoje é outro dia.");
}

Funções

Aqui você aprenderá sobre declaração de funções, parâmetros, escopo e retorno de valores.


// Declaração de Função
function saudacao(nome) {
    return `Olá, ${nome}!`;
}
console.log(saudacao("Mundo")); // Saída: Olá, Mundo!

// Parâmetros Padrão
function calcularArea(base, altura = 5) {
    return base * altura;
}
console.log(calcularArea(10)); // Saída: 50

// Funções de Setas
let quadrado = (x) => x * x;
console.log(quadrado(5)); // Saída: 25

Arrays e Objetos

Nesta seção, você aprenderá sobre arrays, objetos, métodos de array e iteração de objetos.


// Arrays
let frutas = ["Maçã", "Banana", "Laranja"];
let pessoa = {
    nome: "João",
    idade: 30,
    casado: false
};
console.log(pessoa.nome); // Saída: João

// Métodos de Array
let numeros = [1, 2, 3, 4, 5];
let dobrados = numeros.map(numero => numero * 2);
console.log(dobrados); // Saída: [2, 4, 6, 8, 10]

// Iteração de Objetos
for (let chave in pessoa) {
    console.log(`${chave}: ${pessoa[chave]}`);
}

// Métodos de Objeto
let carro = {
    marca: "Toyota",
    modelo: "Corolla",
    ano: 2021,
    ligar: function() {
        console.log("O carro está ligado.");
    }
};
carro.ligar();

Manipulação de DOM

Aqui, você aprenderá a interagir com a estrutura da página HTML usando JavaScript.


// Selecionar Elemento por ID
let minhaDiv = document.getElementById("minhaDiv");
minhaDiv.innerText = "Texto alterado!";

// Selecionar Elemento por Classe
let meusParagrafos = document.getElementsByClassName("paragrafo");
for (let paragrafo of meusParagrafos) {
    paragrafo.style.color = "blue";
}

// Criar Novo Elemento
let novoParagrafo = document.createElement("p");
novoParagrafo.innerText = "Novo parágrafo";
document.body.appendChild(novoParagrafo);

// Eventos
let meuBotao = document.getElementById("meuBotao");
meuBotao.addEventListener("click", function() {
    alert("Botão clicado!");
});

Eventos

Aqui, você aprenderá a lidar com eventos do usuário, como clique de botão, movimento do mouse, e outros.


// Evento de Clique
let botao = document.getElementById("meuBotao");
botao.addEventListener("click", function() {
    console.log("Botão clicado!");
});

// Evento de Mouse
let elemento = document.getElementById("meuElemento");
elemento.addEventListener("mouseover", function() {
    console.log("Mouse sobre o elemento!");
});

// Evento de Teclado
document.addEventListener("keydown", function(event) {
    console.log("Tecla pressionada: " + event.key);
});

Promises e Async/Await

Aqui, você aprenderá sobre programação assíncrona em JavaScript usando Promises e async/await.


// Promises
let minhaPromise = new Promise((resolve, reject) => {
    setTimeout(() => {
        resolve("Operação concluída!");
    }, 2000);
});

minhaPromise.then((mensagem) => {
    console.log(mensagem);
}).catch((erro) => {
    console.error(erro);
});

// Async/Await
async function minhaFuncao() {
    try {
        let resultado = await minhaPromise;
        console.log(resultado);
    } catch (erro) {
        console.error(erro);
    }
}

minhaFuncao();

Conclusão

Parabéns! Agora você concluiu o nosso mini curso de JavaScript. Continue praticando e explorando mais sobre esta linguagem incrível!