Domine o JavaScript: Do Básico ao Avançado

Curso personalizado de Javascript criado com IA - Nível avancado

O JavaScript é uma das linguagens de programação mais populares e essenciais para o desenvolvimento web. Este curso avançado de JavaScript, criado com a ajuda da inteligência artificial, tem como objetivo levar você de um iniciante a um desenvolvedor avançado, cobrindo todos os aspectos fundamentais e avançados da linguagem. Vamos explorar cada tópico para garantir que você tenha uma compreensão sólida e prática.

1. Criando sua Primeira Página HTML

Antes de mergulharmos no JavaScript, é crucial entender como criar uma página HTML, pois o JavaScript é frequentemente usado para interagir com o HTML.

<!DOCTYPE html>
<html lang="pt-BR">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Minha Primeira Página</title>
</head>
<body>
    <h1>Bem-vindo ao JavaScript!</h1>
    <script src="script.js"></script>
</body>
</html>

2. JavaScript Interno e Externo

O JavaScript pode ser inserido diretamente em uma página HTML ou em um arquivo externo. Vamos entender a diferença:

  • Interno: Código JavaScript dentro de <script> tags.
  • Externo: Código em um arquivo .js separado, como mostrado na seção anterior.

3. Tipos de Saída

Aprender a exibir informações é fundamental. Os métodos mais comuns incluem:

  • console.log(): Para depuração.
  • alert(): Para mostrar caixas de alerta.
  • document.write(): Para escrever diretamente no HTML.
console.log("Hello, World!");
alert("Bem-vindo ao JavaScript!");

4. Declarações

As declarações são fundamentais na programação. No JavaScript, você declara variáveis, funções e muito mais. Vamos ver um exemplo de declaração de variável:

let nome = "João";

5. Sintaxe

A sintaxe do JavaScript é simples e clara. É importante seguir as regras de sintaxe para evitar erros. Veja um exemplo:

if (nome === "João") {
    console.log("Olá, João!");
}

6. Comentários

Os comentários são essenciais para documentar o código. No JavaScript, você pode usar:

  • Comentário de linha única: // Este é um comentário
  • Comentário de múltiplas linhas: /* Este é um comentário de múltiplas linhas */

7. Var, Let e Const

A declaração de variáveis em JavaScript pode ser feita com var, let e const. Cada um tem seu escopo e restrições:

  • var: Escopo global ou de função.
  • let: Escopo de bloco.
  • const: Declara uma constante.
var nome = "Maria"; // Pode ser reatribuído
let idade = 25; // Escopo de bloco
const pi = 3.14; // Não pode ser reatribuído

8. Operadores

Os operadores em JavaScript permitem realizar operações em variáveis e valores. Alguns tipos incluem:

  • Aritméticos: +, -, *, /
  • Comparação: ===, !==, <, >

9. Funções

As funções são blocos de código reutilizáveis. Aqui está um exemplo simples:

function saudacao(nome) {
    return `Olá, ${nome}!`;
}
console.log(saudacao("Carlos"));

10. Objetos

Objetos são coleções de propriedades. Um exemplo de objeto em JavaScript:

let carro = {
    marca: "Fusca",
    ano: 1970,
    ligar: function() {
        console.log("O carro está ligado.");
    }
};

11. Eventos

Eventos são ações que ocorrem em uma página. Você pode escutá-los e responder a eles. Um exemplo:

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

12. Array (Matrizes)

Arrays são listas de valores. Aqui está como declarar um:

let frutas = ["maçã", "banana", "laranja"];

13. Métodos para Arrays

Os métodos de array permitem manipular listas de forma eficiente. Exemplos comuns incluem:

  • push(): Adiciona um elemento no final.
  • pop(): Remove o último elemento.
frutas.push("uva");
console.log(frutas);

14. If e Else

Estruturas condicionais permitem executar diferentes blocos de código com base em condições:

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

15. Switch

O switch é uma alternativa ao if que pode ser mais legível em certas situações:

let cor = "vermelho";
switch (cor) {
    case "vermelho":
        console.log("A cor é vermelha");
        break;
    case "azul":
        console.log("A cor é azul");
        break;
    default:
        console.log("Cor desconhecida");
}

16. Laço de Repetição For

Laços de repetição permitem executar um bloco de código várias vezes. O for é um dos mais comuns:

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

17. SetTimeout e SetInterval

Essas funções permitem manipular o tempo. setTimeout executa uma função após um tempo determinado, enquanto setInterval executa repetidamente:

setTimeout(() => {
    console.log("Executado após 2 segundos");
}, 2000);

18. Classes

JavaScript suporta a programação orientada a objetos com classes. Veja um exemplo de classe:

class Pessoa {
    constructor(nome, idade) {
        this.nome = nome;
        this.idade = idade;
    }
    apresentar() {
        return `Olá, meu nome é ${this.nome} e tenho ${this.idade} anos.`;
    }
}

19. Manipulação de Datas

Manipular datas em JavaScript pode ser feito com o objeto Date. Aqui está um exemplo de como obter a data atual:

let dataAtual = new Date();
console.log(dataAtual);

20. JSON

JSON (JavaScript Object Notation) é um formato leve de troca de dados. Você pode converter objetos em JSON e vice-versa:

let objeto = { nome: "Maria", idade: 30 };
let jsonString = JSON.stringify(objeto); // Para JSON
let objetoConvertido = JSON.parse(jsonString); // Para objeto

21. Projeto Lista de Tarefas

Por fim, a aplicação prática é essencial. Um projeto de lista de tarefas pode incluir a manipulação de arrays, eventos e objetos. Aqui está um esboço básico:

let tarefas = [];

function adicionarTarefa(tarefa) {
    tarefas.push(tarefa);
}

function listarTarefas() {
    tarefas.forEach((tarefa, index) => {
        console.log(`${index + 1}: ${tarefa}`);
    });
}

Conclusão

Neste curso avançado de JavaScript, cobrimos uma variedade de tópicos fundamentais para o domínio da linguagem, desde a criação de uma página HTML até conceitos avançados como classes e manipulação de JSON. Aprender JavaScript é um grande passo para se tornar um desenvolvedor web competente e versátil. Continue praticando e explorando para se aprimorar ainda mais!

Voltar ao blog