Curso De Javascript Para Iniciantes Grátis

Cansado de sonhar em criar seus próprios sites e aplicativos, mas se sente perdido com tanta informação e termos técnicos? A boa notícia é que você chegou ao lugar certo! Este guia completo sobre curso de JavaScript para iniciantes grátis é a chave para transformar seu sonho em realidade. Se você está começando do zero, ou já deu os primeiros passos no mundo da programação, mas sente que precisa de uma direção, aqui você encontrará tudo o que precisa para dominar essa linguagem poderosa e abrir portas para um universo de oportunidades.

Desvendando o JavaScript: O Que é e Por Que Aprender?

O que é JavaScript? Uma Introdução Amigável

JavaScript é a linguagem de programação que dá vida à internet. Sabe aqueles sites que você acessa e consegue interagir, clicar em botões, ver animações e formulários que respondem às suas ações? Pois é, a maior parte dessa magia acontece graças ao JavaScript. Ela é a linguagem principal do lado do cliente (front-end), ou seja, o que o usuário vê e interage no navegador. Mas ela também pode ser usada no lado do servidor (back-end) com o Node.js, abrindo um leque ainda maior de possibilidades.

Pense no JavaScript como o “cérebro” de um site. O HTML (a estrutura) e o CSS (a aparência) são importantes, mas o JavaScript é quem dá a inteligência, a interatividade e a dinamismo. Sem ele, a web seria estática e chata. Com ele, você pode criar jogos, aplicativos web, sites responsivos que se adaptam a diferentes dispositivos, e muito mais. É como ter uma varinha mágica para transformar ideias em realidade digital. E a melhor parte? Aprender JavaScript é mais fácil do que você imagina! Com os recursos certos e um pouco de dedicação, você estará construindo seus próprios projetos em pouco tempo. Então, prepare-se para mergulhar nesse mundo fascinante e descobrir o poder do JavaScript!

Por Que Escolher um Curso de JavaScript para Iniciantes?

Escolher um curso de JavaScript para iniciantes é um dos melhores investimentos que você pode fazer para o seu futuro. A demanda por desenvolvedores JavaScript está em alta, e o mercado de trabalho oferece ótimas oportunidades, tanto no Brasil quanto no mundo. Além disso, aprender JavaScript é uma habilidade transferível, ou seja, você pode usá-la em diversas áreas e projetos, desde a criação de sites pessoais até o desenvolvimento de aplicativos complexos.

Um curso de JavaScript para iniciantes te dá a base sólida que você precisa para começar. Você aprenderá os conceitos fundamentais, como variáveis, tipos de dados, estruturas de controle, funções, objetos e muito mais. Com essa base, você poderá entender e trabalhar com frameworks e bibliotecas populares, como React, Angular e Vue.js, que são ferramentas essenciais para desenvolvedores front-end modernos. Além disso, um curso bem estruturado te ajuda a evitar os erros mais comuns, a desenvolver um bom estilo de programação e a otimizar o seu tempo de aprendizado. E o melhor de tudo, muitos cursos de qualidade são oferecidos gratuitamente! Então, não perca tempo e comece agora mesmo a investir no seu futuro.

JavaScript vs. Outras Linguagens: Qual a Diferença?

No vasto universo da programação, existem diversas linguagens, cada uma com suas características e aplicações específicas. Comparar JavaScript com outras linguagens é essencial para entender seu papel e suas vantagens.

• JavaScript vs. HTML e CSS: HTML é a linguagem de marcação que define a estrutura do conteúdo de uma página web (textos, imagens, vídeos, etc.). CSS é a linguagem de estilo que define a aparência (cores, fontes, layout, etc.). JavaScript, por outro lado, é a linguagem de programação que adiciona interatividade e dinamismo. Juntos, eles formam a base da criação de websites. HTML e CSS são como os alicerces de uma casa, enquanto JavaScript é a parte que permite que as pessoas se movam e interajam dentro dela.
• JavaScript vs. Python: Python é uma linguagem de programação de propósito geral, popular em áreas como ciência de dados, machine learning e desenvolvimento back-end. JavaScript é principalmente usada para desenvolvimento front-end, mas também pode ser utilizada no back-end com Node.js. Python é conhecida por sua sintaxe clara e legibilidade, enquanto JavaScript é mais flexível e orientada a eventos. A escolha entre elas depende do projeto e das suas preferências.
• JavaScript vs. Java: Java é uma linguagem de programação mais antiga e robusta, utilizada principalmente para desenvolvimento de aplicativos corporativos, Android e sistemas de larga escala. JavaScript é mais leve e focada em aplicações web front-end. Java exige um ambiente de desenvolvimento (JVM), enquanto JavaScript roda diretamente no navegador.
• JavaScript vs. C#: C# (C Sharp) é uma linguagem da Microsoft, amplamente utilizada para desenvolvimento de aplicativos .NET, jogos (Unity) e desenvolvimento de software para Windows. JavaScript é mais versátil em termos de plataformas (web, mobile, desktop), mas C# tende a ser mais performática em alguns contextos.

Em resumo, cada linguagem tem sua especialidade. JavaScript se destaca na web, proporcionando interatividade e dinamismo aos sites e aplicativos.

Começando com JavaScript: Primeiros Passos e Ferramentas Essenciais

Ambiente de Desenvolvimento: Onde Você Vai Escrever e Testar Seu Código

Para começar a programar em JavaScript, você precisa de um ambiente de desenvolvimento. Felizmente, não é preciso gastar dinheiro ou instalar programas complexos! Basicamente, você precisa de um editor de código e um navegador web.

• Editor de Código: Um editor de código é como o seu “caderno” de programação. É onde você vai escrever, editar e salvar o seu código JavaScript. Existem muitas opções gratuitas e de alta qualidade disponíveis, como:
• Visual Studio Code (VS Code): É um dos editores mais populares e completos, com uma vasta gama de extensões para facilitar o desenvolvimento, como autocompletar, formatação de código e debug.
• Sublime Text: Outro editor muito popular, conhecido por sua velocidade e leveza. É ótimo para quem busca um editor simples e eficiente.
• Atom: Um editor de código open source, personalizável e com uma comunidade ativa de desenvolvedores.
• Notepad++: Um editor leve e simples, ideal para iniciantes que procuram algo básico e fácil de usar no Windows.
• Navegador Web: O navegador web é onde você vai testar o seu código JavaScript. Ele é o “motor” que interpreta o código e o executa, mostrando os resultados na tela. Todos os navegadores modernos (Chrome, Firefox, Safari, Edge) vêm com ferramentas de desenvolvedor integradas, que te permitem inspecionar o código, depurar erros e entender como o JavaScript está funcionando.

Dica: Comece com o VS Code, pois ele oferece uma experiência de desenvolvimento mais completa e intuitiva, especialmente para iniciantes.

Como Incluir JavaScript em uma Página HTML

Existem duas maneiras principais de incluir código JavaScript em uma página HTML:

1. Interno (Inline): Você pode escrever o código JavaScript diretamente dentro do arquivo HTML, usando a tag <script>.

<!DOCTYPE html>
<html>
<head>
    <title>Meu Primeiro JavaScript</title>
</head>
<body>
    <h1>Olá, Mundo!</h1>
    <script>
        alert("Olá, Mundo!"); // Exibe uma mensagem na tela
    </script>
</body>
</html>

Neste exemplo, o código JavaScript está entre as tags <script>. A função alert() exibe uma caixa de diálogo com a mensagem “Olá, Mundo!”.

2. Externo: Você pode criar um arquivo separado com o código JavaScript (com a extensão .js) e incluí-lo no arquivo HTML, usando a tag <script> com o atributo src.

<!-- Arquivo meu-script.js -->
alert("Olá, Mundo! (do arquivo externo)");

<!-- Arquivo index.html -->
<!DOCTYPE html>
<html>
<head>
    <title>Meu Primeiro JavaScript (Externo)</title>
</head>
<body>
    <h1>Olá, Mundo!</h1>
    <script src="meu-script.js"></script>
</body>
</html>

Neste exemplo, o arquivo meu-script.js contém o código JavaScript, e o atributo src na tag <script> especifica o caminho para esse arquivo. Essa é a forma mais recomendada de incluir JavaScript, pois mantém o código HTML e JavaScript separados, tornando o código mais organizado e fácil de manter.

Entendendo os Conceitos Básicos: Variáveis, Tipos de Dados e Operadores

Dominar os conceitos básicos é fundamental para qualquer programador. Vamos começar com os pilares do JavaScript:

• Variáveis: Uma variável é um “espaço” na memória do computador onde você pode armazenar um valor. Em JavaScript, você declara variáveis usando as palavras-chave var, let ou const.

var nome = "João"; // Declara uma variável 'nome' e atribui o valor "João"
let idade = 30; // Declara uma variável 'idade' e atribui o valor 30
const PI = 3.14; // Declara uma constante 'PI' (seu valor não pode ser alterado)

• Tipos de Dados: JavaScript tem vários tipos de dados, que definem o tipo de valor que uma variável pode armazenar. Os tipos de dados mais comuns são:

• String: Textos (ex: “Olá, Mundo!”).
• Number: Números (ex: 10, 3.14).
• Boolean: Valores lógicos (true ou false).
• Array: Listas de valores (ex: [1, 2, 3]).
• Object: Coleções de propriedades e valores (ex: {nome: “João”, idade: 30}).
• Undefined: Variável que foi declarada, mas não recebeu um valor.
• Null: Representa a ausência intencional de um valor.

• Operadores: Operadores são símbolos que realizam operações em valores. Os operadores mais comuns são:

• Operadores Aritméticos: + (adição), – (subtração), * (multiplicação), / (divisão), % (módulo – resto da divisão).
• Operadores de Atribuição: = (atribuição), += (adição e atribuição), -= (subtração e atribuição), etc.
• Operadores de Comparação: == (igual a), != (diferente de), === (igual a – estrito, compara valor e tipo), !== (diferente de – estrito), > (maior que), < (menor que), >= (maior ou igual a), <= (menor ou igual a).
• Operadores Lógicos: && (E), || (OU), ! (NÃO).

Esses são os blocos fundamentais. Dominá-los é o primeiro passo para construir qualquer programa em JavaScript.

Debugging: Como Encontrar e Corrigir Erros no Seu Código

Todo programador, em algum momento, se depara com erros em seu código. A boa notícia é que saber como “debugar” (encontrar e corrigir erros) é uma habilidade essencial e aprendível.

• Ferramentas de Debugging:

• Console do Navegador: A ferramenta mais básica e útil. No Chrome, Firefox e outros navegadores, você pode abrir o “Console” (geralmente acessível com a tecla F12 ou clicando com o botão direito na página e selecionando “Inspecionar”). No console, você pode:

• Exibir mensagens usando console.log(), console.warn(), console.error().
• Verificar valores de variáveis.
• Encontrar erros (o console mostra mensagens de erro com informações sobre onde o erro ocorreu).

• Debugger do Navegador: Permite que você execute o código passo a passo, definindo “breakpoints” (pontos de parada) para inspecionar as variáveis e entender o fluxo de execução do código.
• Extensões do Editor de Código: Muitos editores, como o VS Code, oferecem extensões de debug que tornam o processo mais fácil e visual.

• Tipos de Erros Comuns:

• Erros de Sintaxe: Erros na forma como você escreve o código (ex: esquecer um ponto e vírgula, errar a grafia de uma palavra-chave). O console do navegador geralmente te diz a linha e a coluna onde o erro está.
• Erros de Lógica: Erros na lógica do seu programa (ex: uma condição if que não faz o que você espera, um cálculo errado). Esses erros são mais difíceis de encontrar, pois o código pode rodar sem erros de sintaxe, mas produzir resultados incorretos.
• Erros de Tempo de Execução: Erros que ocorrem durante a execução do programa (ex: tentar acessar uma propriedade de um objeto que não existe).

• Dicas para Debugging:

• Leia as Mensagens de Erro: As mensagens de erro do console são a sua melhor amiga. Elas te dão pistas sobre o que está errado e onde procurar.
• Use console.log(): Imprima os valores das variáveis em diferentes pontos do seu código para ver o que está acontecendo.
• Simplifique o Código: Se o erro for complexo, tente simplificar o código para isolar o problema.
• Divida para Conquistar: Se você tiver um bloco de código grande, divida-o em partes menores e teste cada parte separadamente.
• Peça Ajuda: Se você estiver travado, não hesite em pedir ajuda em fóruns, grupos de discussão ou para amigos programadores.

Com o tempo e a prática, você se tornará um mestre em debugging e não se assustará mais com os erros!

JavaScript para Iniciantes: Explorando as Estruturas de Controle

Condicionais: Tomando Decisões no Seu Código

Condicionais são estruturas que permitem que seu código tome decisões, baseadas em determinadas condições. São como “se” e “então” do mundo da programação.

• if: Executa um bloco de código se uma condição for verdadeira.

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

• else: Executa um bloco de código se a condição do if for falsa.

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

• else if: Permite testar várias condições em sequência.

let nota = 75;
if (nota >= 90) {
    console.log("Aprovado com A!");
} else if (nota >= 70) {
    console.log("Aprovado com B!");
} else if (nota >= 60) {
    console.log("Aprovado com C!");
} else {
    console.log("Reprovado.");
}

• Operador Ternário: Uma forma concisa de escrever condicionais simples.

let idade = 20;
let mensagem = (idade >= 18) ? "Maior de idade" : "Menor de idade";
console.log(mensagem);

Loops: Repetindo Ações no Seu Código

Loops são estruturas que permitem que você execute um bloco de código várias vezes, até que uma condição seja satisfeita. São essenciais para automatizar tarefas e processar dados de forma eficiente.

• for: O loop for é usado quando você sabe quantas vezes quer repetir o código.

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

Neste exemplo, o loop for executa o código 5 vezes. A variável i (contador) começa em 0, e a cada iteração, o valor de i é incrementado até 4.

• while: O loop while executa o código enquanto uma condição for verdadeira.

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

Neste exemplo, o loop while executa o código enquanto o contador for menor que 3.

• do…while: Similar ao while, mas garante que o código seja executado pelo menos uma vez, mesmo que a condição seja falsa de início.

let contador = 5;
do {
    console.log("Contador: " + contador);
    contador++;
} while (contador < 3);

Neste exemplo, o código será executado uma vez, mesmo que a condição contador < 3 seja falsa.

• for…of (para arrays): Permite iterar sobre os elementos de um array de forma simples.

const frutas = ["maçã", "banana", "laranja"];
for (const fruta of frutas) {
    console.log("Fruta: " + fruta);
}

• for…in (para objetos): Permite iterar sobre as propriedades de um objeto.

const pessoa = {
    nome: "João",
    idade: 30,
    profissao: "Desenvolvedor"
};
for (const propriedade in pessoa) {
    console.log(propriedade + ": " + pessoa[propriedade]);
}

Dominar condicionais e loops é fundamental para criar programas dinâmicos e eficientes.

Funções: Organizando e Reutilizando Seu Código

Funções são blocos de código que realizam uma tarefa específica. Elas são como mini-programas dentro do seu programa principal. Usar funções traz muitos benefícios:

• Organização: Tornam o código mais fácil de ler e entender.
• Reutilização: Permitem que você execute o mesmo código várias vezes, sem precisar escrevê-lo novamente.
• Manutenção: Facilitam a correção de erros e a atualização do código.

Como Criar uma Função:

function saudacao(nome) {
    console.log("Olá, " + nome + "!");
}

• function: Palavra-chave que indica que você está definindo uma função.
• saudacao: Nome da função.
• (nome): Parâmetros da função (valores que você passa para a função quando a chama).
• { … }: Bloco de código que a função executa.
• console.log(“Olá, ” + nome + “!”);: O que a função faz (exibe uma saudação no console).

Como Chamar uma Função:

saudacao("João"); // Chamando a função com o nome "João"
saudacao("Maria"); // Chamando a função com o nome "Maria"

Ao chamar a função, você passa os argumentos (valores) para os parâmetros.

Funções com Retorno: Funções podem retornar um valor usando a palavra-chave return.

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

let resultado = somar(5, 3);
console.log(resultado); // Imprime 8

Tipos de Funções:

• Funções Declarativas: São as funções que definimos como no primeiro exemplo.
• Funções Expressas: São funções que são atribuídas a uma variável.

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

• Arrow Functions (Funções de Seta): Uma forma mais concisa de escrever funções, especialmente útil para funções pequenas.

const somar = (a, b) => a + b; // Equivalente a: function somar(a, b) { return a + b; }

Dominar funções é essencial para escrever código limpo, organizado e reutilizável.

Manipulando o DOM: Interagindo com a Página Web

O que é o DOM?

DOM é a sigla para Document Object Model (Modelo de Objeto de Documento). É uma representação da estrutura da sua página web como uma árvore de objetos. O navegador usa o DOM para entender e renderizar o HTML, CSS e JavaScript.

Pense em uma árvore:

• O documento HTML é a raiz da árvore.
• Cada tag HTML (como <div>, <p>, <h1>, etc.) é um nó da árvore.
• Os nós podem ter filhos (outras tags dentro deles) e atributos (como id, class, src).

O DOM permite:

• Acessar e manipular os elementos da página (alterar textos, estilos, atributos, etc.).
• Adicionar, remover e modificar elementos.
• Responder a eventos do usuário (cliques, movimentos do mouse, digitação, etc.).

Selecionando Elementos no DOM

Para manipular elementos, você precisa primeiro selecioná-los. JavaScript oferece várias formas de fazer isso:

• document.getElementById(): Seleciona um elemento pelo seu atributo id. É a forma mais rápida e direta de selecionar um elemento único.

<p id="meuParagrafo">Este é um parágrafo.</p>
<script>
    const paragrafo = document.getElementById("meuParagrafo");
    console.log(paragrafo); // Exibe o elemento <p> no console
</script>

• document.getElementsByClassName(): Seleciona todos os elementos com uma determinada classe (retorna uma coleção HTML, que se comporta como um array).

<p class="meuParagrafo">Este é um parágrafo 1.</p>
<p class="meuParagrafo">Este é um parágrafo 2.</p>
<script>
    const paragrafos = document.getElementsByClassName("meuParagrafo");
    console.log(paragrafos); // Exibe uma coleção HTML com os dois parágrafos
    // Para acessar um parágrafo específico:
    console.log(paragrafos[0]); // Primeiro parágrafo
</script>

• document.getElementsByTagName(): Seleciona todos os elementos com uma determinada tag (retorna uma coleção HTML).

<h1>Título</h1>
<p>Este é um parágrafo.</p>
<script>
    const paragrafos = document.getElementsByTagName("p");
    console.log(paragrafos); // Exibe uma coleção HTML com o parágrafo
</script>

• document.querySelector(): Seleciona o primeiro elemento que corresponder a um seletor CSS (ex: #meuId, .minhaClasse, p > span). Mais flexível e moderna.

<p id="meuParagrafo">Este é um parágrafo.</p>
<script>
    const paragrafo = document.querySelector("#meuParagrafo");
    console.log(paragrafo); // Exibe o elemento <p> no console
</script>

• document.querySelectorAll(): Seleciona todos os elementos que corresponderem a um seletor CSS (retorna um NodeList, que se comporta como um array).

<p class="meuParagrafo">Este é um parágrafo 1.</p>
<p class="meuParagrafo">Este é um parágrafo 2.</p>
<script>
    const paragrafos = document.querySelectorAll(".meuParagrafo");
    console.log(paragrafos); // Exibe um NodeList com os dois parágrafos
    // Para acessar um parágrafo específico:
    console.log(paragrafos[0]); // Primeiro parágrafo
</script>

Manipulando o Conteúdo e os Atributos dos Elementos

Depois de selecionar um elemento, você pode manipular seu conteúdo e seus atributos:

• textContent: Define ou obtém o texto de um elemento.

const paragrafo = document.getElementById("meuParagrafo");
paragrafo.textContent = "Novo texto para o parágrafo."; // Altera o texto
console.log(paragrafo.textContent); // Exibe o texto atual

• innerHTML: Define ou obtém o conteúdo HTML de um elemento (incluindo tags HTML).

const paragrafo = document.getElementById("meuParagrafo");
paragrafo.innerHTML = "<strong>Texto em negrito</strong>"; // Adiciona um texto em negrito

Cuidado: Use innerHTML com cautela, pois pode ser menos seguro se você estiver manipulando dados inseridos pelo usuário.

• setAttribute(): Define o valor de um atributo.

const imagem = document.querySelector("img");
imagem.setAttribute("src", "minha-imagem.jpg"); // Define o atributo src da imagem
imagem.setAttribute("alt", "Descrição da imagem"); // Define o atributo alt da imagem

• getAttribute(): Obtém o valor de um atributo.

const imagem = document.querySelector("img");
const src = imagem.getAttribute("src");
console.log(src); // Exibe o valor do atributo src

• removeAttribute(): Remove um atributo.

const imagem = document.querySelector("img");
imagem.removeAttribute("alt"); // Remove o atributo alt

Alterando o Estilo dos Elementos com JavaScript

Você pode alterar o estilo dos elementos diretamente com JavaScript, usando a propriedade style:

const paragrafo = document.getElementById("meuParagrafo");
paragrafo.style.color = "blue"; // Define a cor do texto
paragrafo.style.fontSize = "20px"; // Define o tamanho da fonte
paragrafo.style.backgroundColor = "lightgray"; // Define a cor de fundo

Observações:

• As propriedades CSS com hífens (ex: font-size) precisam ser convertidas para camelCase (ex: fontSize) ao usar style em JavaScript.
• É melhor usar classes CSS para estilos complexos e dinâmicos, e manipular as classes com JavaScript (ver abaixo).

Manipulando Classes CSS com JavaScript

A forma mais eficiente e organizada de alterar o estilo de um elemento é manipular suas classes CSS:

• classList.add(): Adiciona uma classe CSS.

const paragrafo = document.getElementById("meuParagrafo");
paragrafo.classList.add("destaque"); // Adiciona a classe "destaque"

Você precisa ter uma classe CSS definida no seu arquivo CSS:

.destaque {
    font-weight: bold;
    color: red;
}

• classList.remove(): Remove uma classe CSS.

paragrafo.classList.remove("destaque"); // Remove a classe "destaque"

• classList.toggle(): Alterna entre adicionar e remover uma classe (se a classe existir, remove; se não existir, adiciona).

paragrafo.classList.toggle("destaque"); // Alterna a classe "destaque"

• classList.contains(): Verifica se um elemento possui uma determinada classe (retorna true ou false).

if (paragrafo.classList.contains("destaque")) {
    console.log("O parágrafo tem a classe 'destaque'.");
}

Usar classes CSS torna seu código mais limpo, mais fácil de manter e mais eficiente, pois o navegador pode otimizar o carregamento e a renderização dos estilos.

Criando e Removendo Elementos

Você pode criar e remover elementos no DOM dinamicamente com JavaScript:

• document.createElement(): Cria um novo elemento HTML.

const novoParagrafo = document.createElement("p"); // Cria um novo parágrafo

• textContent ou innerHTML (para o novo elemento): Define o conteúdo do novo elemento.

novoParagrafo.textContent = "Este é um novo parágrafo criado com JavaScript.";

• appendChild(): Adiciona o novo elemento como filho de outro elemento.

const pai = document.getElementById("meuDiv"); // Seleciona o elemento pai
pai.appendChild(novoParagrafo); // Adiciona o parágrafo ao div

• removeChild(): Remove um elemento filho.

const pai = document.getElementById("meuDiv");
pai.removeChild(novoParagrafo); // Remove o parágrafo do div

• insertBefore(): Insere um elemento antes de outro elemento existente.

const referencia = document.getElementById("meuParagrafoExistente");
pai.insertBefore(novoParagrafo, referencia); // Insere o novo parágrafo antes do parágrafo existente

Dominar a manipulação do DOM é essencial para criar sites e aplicativos web dinâmicos e interativos.

Eventos em JavaScript: Tornando Seu Site Interativo

O Que São Eventos?

Eventos são ações ou ocorrências que acontecem na página web, como um clique do mouse, a digitação de uma tecla, o carregamento de uma página, o envio de um formulário, etc. JavaScript permite que você “escute” esses eventos e execute um código em resposta a eles, tornando seu site interativo e responsivo.

Exemplos de Eventos Comuns:

• click: Quando o usuário clica em um elemento.
• mouseover: Quando o mouse passa por cima de um elemento.
• mouseout: Quando o mouse sai de um elemento.
• keydown: Quando uma tecla é pressionada.
• keyup: Quando uma tecla é liberada.
• submit: Quando um formulário é enviado.
• load: Quando a página termina de carregar.
• scroll: Quando o usuário rola a página.
• input: Quando o valor de um campo de entrada (input) é alterado.
• change: Quando o valor de um elemento de formulário é alterado (e o usuário “sai” do campo).

Adicionando Eventos aos Elementos (Event Listeners)

Para responder a um evento, você precisa “adicionar um evento” (event listener) a um elemento. Existem duas formas principais de fazer isso:

1. Através de Propriedades de Evento: Você pode atribuir uma função a uma propriedade do elemento que corresponde ao evento.

<button id="meuBotao">Clique aqui</button>
<script>
    const botao = document.getElementById("meuBotao");
    botao.onclick = function() {
        alert("Você clicou no botão!");
    };
</script>

Neste exemplo, a propriedade onclick do botão recebe uma função que será executada quando o botão for clicado.

Desvantagem: Você só pode ter um evento atribuído a uma propriedade. Se você tentar adicionar outro onclick, o anterior será substituído.

2. Usando addEventListener() (Recomendado): addEventListener() é o método mais flexível e recomendado para adicionar eventos. Ele permite que você adicione múltiplos eventos ao mesmo elemento.

<button id="meuBotao">Clique aqui</button>
<script>
    const botao = document.getElementById("meuBotao");
    botao.addEventListener("click", function() {
        alert("Você clicou no botão!");
    });
    botao.addEventListener("mouseover", function() {
        botao.style.backgroundColor = "lightgray";
    });
</script>

O primeiro argumento de addEventListener() é o nome do evento (ex: “click”, “mouseover”). O segundo argumento é a função que será executada quando o evento ocorrer (chamada de “handler” ou “listener”). Você pode adicionar quantos addEventListener() quiser ao mesmo elemento.

O Objeto event

Dentro da função handler (a função que é executada quando o evento ocorre), você pode acessar um objeto chamado event. Esse objeto contém informações sobre o evento que ocorreu, como:

• event.target: O elemento que disparou o evento (o elemento em que o usuário clicou, passou o mouse, etc.).
• event.type: O tipo do evento (ex: “click”, “mouseover”).
• event.clientX, event.clientY: As coordenadas do mouse em relação à janela do navegador.
• event.keyCode, event.key: Informações sobre a tecla pressionada (apenas para eventos keydown e keyup).