JavaScript - O Guia Fundamental para Desenvolvedores Front-End

JavaScript: O Guia Fundamental para

Desenvolvedores Front-End

Do Básico à Manipulação do DOM

Autoria (Autoria Discente)

Este material foi produzido como parte integrante da Atividade de Extensão do Curso Superior de Tecnologia em Análise e Desenvolvimento de Sistemas da UNIP.

Autores :

● GUILHERME BORGES (G03IHI3)

● IGOR VIEIRA MAGALHÃES (G0610I3)

● KELWIN ALEXANDRE ASSENCIO MANGINI (G9936J5)

● LEONARDO MONTEIRO MARQUES (R1885B9)

● MIGUEL DOS SANTOS GALVÃO (R110IF1)

● RAFAEL ARLES SOUZA DANTAS (R0796I0)

● YGOR MOREIRA RIBAS (G9048H0)

● DIEGO YUGI UEHARA(G9936G0)

Prefácio do Projeto de Extensão

1. Justificativa e Motivação

Este e-book justifica-se pela posição dominante e insubstituível do JavaScript no mercado de tecnologia. Em um cenário onde a digitalização permeia todas as indústrias, a demanda por aplicações web interativas e responsivas nunca foi tão alta. Aprender JavaScript não é mais uma opção para desenvolvedores web, mas uma necessidade fundamental. Pesquisas globais, como a do Stack Overflow, confirmam ano após ano que o JavaScript é a linguagem de programação mais utilizada por desenvolvedores profissionais no mundo. Essa popularidade se traduz em oportunidades de carreira tangíveis no Brasil, com salários de entrada competitivos para desenvolvedores júnior.

Além disso, todo o ecossistema de desenvolvimento front-end moderno é construído sobre os alicerces do JavaScript. Frameworks essenciais como React, Angular e Vue.js são, em essência, abstrações do JavaScript. Portanto, dominar os fundamentos — o foco deste e-book — é um pré-requisito indispensável para qualquer profissional que deseje se manter relevante.

2. Objetivos do Projeto

● Objetivo Geral: Capacitar a comunidade nos fundamentos essenciais do JavaScript, fornecendo um recurso educacional (e-book) gratuito, completo e de alta qualidade, para fomentar a autonomia no aprendizado e aumentar a qualificação profissional.

● Objetivos Específicos:

○ Sintetizar o conhecimento acadêmico sobre JavaScript em um formato acessível.

○ Estruturar pedagogicamente o conteúdo, progredindo da lógica de programação

básica até a manipulação de páginas web.

○ Disponibilizar publicamente este e-book como uma ferramenta de consulta para a comunidade externa.

3. Público-Alvo

Este e-book destina-se a qualquer membro da comunidade externa à universidade interessado em ingressar na área de tecnologia, com foco em:

● Indivíduos em transição de carreira que estão estudando desenvolvimento web por conta própria.

● Estudantes de escolas públicas ou de cursos técnicos que buscam um material de apoio estruturado.

● Membros da comunidade local que desejam adquirir novas habilidades digitais para aumentar sua empregabilidade.

● Iniciantes em programação que se sentem "perdidos" e precisam de um "norte" para estruturar seu aprendizado.

Sumário

● Capítulo 1: Introdução ao JavaScript

● Capítulo 2: Variáveis e Tipos de Dados

● Capítulo 3: Operadores

● Capítulo 4: Funções

● Capítulo 5: Estruturas Condicionais

● Capítulo 6: Arrays: Listas de Dados

● Capítulo 7: Loops: Repetindo Ações

● Capítulo 8: Objetos: Estruturas Complexas

● Capítulo 9: O DOM: Conectando JavaScript e HTML

● Capítulo 10: Eventos: Respondendo ao Usuário

● Capítulo 11: Projeto Final (Aplicando os Conceitos)

● Capítulo 12: Glossário e Próximos Passos

Capítulo 1: Introdução ao JavaScript

O que é JavaScript?

Bem-vindo ao mundo do JavaScript! JavaScript (ou JS) é uma linguagem de programação que permite implementar funcionalidades complexas em páginas web. Pense no HTML como o esqueleto de uma página e no CSS como a pele e as roupas. O JavaScript é o cérebro e os músculos, permitindo que a página interaja com o usuário, mude dinamicamente e muito mais.

Originalmente criado para rodar apenas nos navegadores, hoje o JavaScript também pode ser usado em servidores (com Node.js), em aplicativos mobile e até em desktops. É uma das linguagens mais versáteis e demandadas do mercado.

Como adicionar JavaScript a uma página?

Existem duas maneiras principais de incluir JavaScript em um arquivo HTML: 1. Script Interno: Escrever o código diretamente dentro da tag <script> no seu arquivo HTML, geralmente antes de fechar a tag </body>.

2. Script Externo: Colocar seu código em um arquivo separado com a extensão .js (ex: script.js) e vinculá-lo ao seu HTML usando a tag <script> com o atributo src. A abordagem de script externo é geralmente preferível, pois mantém seu código organizado (separação de interesses) e reutilizável.

Exemplo: Script Interno <!DOCTYPE html>

<html>

<head><title>Minha Página</title></head> <body>

<h1>Olá, Mundo!</h1>

<script>

// Este é um comentário em JavaScript console.log('JavaScript está funcionando!'); alert('Bem-vindo à minha página!');

</script> </body> </html>

Exemplo: Script Externo <script src="meu_script.js"></script>

// Em seu arquivo meu_script.js console.log('Este código vem de um arquivo externo!');

Pratique!

Questão: Crie um arquivo HTML que, ao ser aberto, exiba um alerta (alert) com a mensagem "Eu amo JavaScript!". Resposta: <script> alert('Eu amo JavaScript!'); </script>

Questão: O que a função console.log() faz? Onde você pode ver sua saída? Resposta: A função console.log() exibe informações no console de desenvolvedor do navegador. Você pode abrir o console geralmente pressionando F12 ou Ctrl+Shift+I.

Capítulo 2: Variáveis e Tipos de Dados

Para trabalhar com informações em JavaScript, precisamos de um lugar para armazená-las. É aí que entram as variáveis.

Declarando Variáveis

Uma variável é como uma caixa com uma etiqueta. Você dá um nome à caixa (o nome da variável) e coloca algo dentro dela (o valor). Em JavaScript moderno, usamos principalmente as palavras-chave let e const.

● let: Use para variáveis cujo valor pode mudar. Ex: um contador de pontos.

● const: Use para variáveis cujo valor não mudará (constante). Ex: o valor de PI. É uma boa prática usar const sempre que possível.

● var: Uma forma mais antiga de declarar variáveis. É recomendado evitar var em código moderno para prevenir comportamentos inesperados.

Tipos de Dados Primitivos

JavaScript tem vários tipos de dados básicos:

● String: Texto, sempre entre aspas. Ex: "Olá, mundo".

● Number: Números, inteiros ou com casas decimais. Ex: 10, 3.14.

● Boolean: Representa verdadeiro (true) ou falso (false).

● Undefined: Uma variável que foi declarada, mas ainda não tem um valor.

● Null: Representa a ausência intencional de um valor.

Exemplo: Usando let e const // Usando let para uma variável que vai mudar let pontuacao = 0; console.log('Pontuação inicial:', pontuacao); // 0 pontuacao = 10; console.log('Nova pontuação:', pontuacao); // 10

// Usando const para um valor que não muda const nomeJogador = "Alice"; console.log('Nome do jogador:', nomeJogador); // "Alice"

// Tentar mudar uma const resultará em erro! // nomeJogador = "Bob"; // -> TypeError

Exemplo: Tipos de Dados const frase = "JavaScript é divertido"; // String const ano = 2024; // Number const ehMaiorDeIdade = true; // Boolean let corFavorita; // Undefined let carro = null; // Null

console.log(typeof frase); // "string" console.log(typeof ano); // "number"

Pratique!

Questão: Declare uma variável const chamada cidade e atribua a ela o nome da sua cidade. Em seguida, exiba-a no console. Resposta: const cidade = "São Paulo"; console.log(cidade);

Questão: Declare uma variável let chamada idade com sua idade. Depois, crie uma nova variável let chamada idadeDaqui5Anos que armazena sua idade mais 5. Exiba o resultado. Resposta: let idade = 30; let idadeDaqui5Anos = idade + 5; console.log(idadeDaqui5Anos); // 35

Capítulo 3: Operadores

Operadores são os símbolos que usamos para realizar operações em variáveis e valores. Eles são as ferramentas que nos permitem criar lógica e tomar decisões no nosso código.

Operadores Aritméticos

São usados para realizar cálculos matemáticos:

● + (Adição)

● - (Subtração)

● * (Multiplicação)

● / (Divisão)

● % (Módulo - resto da divisão)

● ** (Exponenciação)

Operadores de Comparação

Comparam dois valores e retornam um booleano (true ou false).

● == (Igual a): Compara apenas o valor, tentando converter os tipos. Evite usar.

● === (Estritamente igual a): Compara valor E tipo. Use este sempre.

● != (Diferente de)

● !== (Estritamente diferente de): Use este sempre.

● > (Maior que)

● < (Menor que)

● >= (Maior ou igual a)

● <= (Menor ou igual a)

Exemplo: Comparação Estrita vs. Solta

console.log(5 == '5'); // true (compara solta, converte string para número)

console.log(5 === '5'); // false (compara estrita, number não é string)

Operadores Lógicos

Usados para combinar expressões booleanas:

● && (E lógico): true se ambos os lados forem true.

● || (OU lógico): true se pelo menos um lado for true.

● ! (NÃO lógico): Inverte o valor booleano.

Exemplo: Operadores Lógicos const temSol = true; const estaDeFolga = false;

console.log('Vou à praia?', temSol && estaDeFolga); // false console.log('Posso descansar?', temSol |

| estaDeFolga); // true console.log('Não estou de folga?',!estaDeFolga); // true

Pratique!

Questão: Crie uma variável nota1 com valor 8 e nota2 com valor 6. Calcule a média das notas e armazene em uma variável media. Exiba a média no console. Resposta: const nota1 = 8; const nota2 = 6; const media = (nota1 + nota2) / 2; console.log('A média é:', media); // 7

Questão: Verifique se a media calculada no exercício anterior é maior ou igual a 7. Exiba true ou false no console. Resposta: const media = 7; // Do exercício anterior const foiAprovado = media >= 7; console.log('Foi aprovado?', foiAprovado); // true

Capítulo 4: Funções

Funções são blocos de código reutilizáveis que realizam uma tarefa específica. Elas são um dos pilares da programação, permitindo organizar o código, evitar repetição e torná-lo mais legível e fácil de manter.

Anatomia de uma Função

Uma função é definida com a palavra-chave function, seguida por um nome, uma lista de parâmetros (variáveis que a função recebe) entre parênteses (), e o bloco de código entre chaves {}. O comando return especifica o valor que a função "devolve" após sua execução.

Exemplo: Função Tradicional // Definindo a função (parâmetros: a, b) function somar(a, b) { const resultado = a + b; return resultado; }

// Chamando a função (argumentos: 5, 10) const total = somar(5, 10); console.log('O total é:', total); // 15

Arrow Functions

O ES6 (JavaScript moderno) introduziu uma sintaxe mais curta para escrever funções, chamada "Arrow Function". Elas são muito populares em código moderno.

Exemplo: Arrow Function // Função tradicional function multiplicar(x, y) { return x * y;

// Sintaxe da Arrow Function

const multiplicarArrow = (x, y) => { return x * y; };

// Se a função tem apenas uma linha de retorno, pode ser simplificada: const dividir = (x, y) => x / y; // Retorno implícito

console.log(multiplicar(4, 5)); // 20

console.log(multiplicarArrow(4, 5)); // 20

console.log(dividir(10, 2)); // 5

Pratique!

Questão: Crie uma função chamada calcularAreaRetangulo que aceite largura e altura como parâmetros e retorne a área do retângulo (largura * altura). Resposta: function calcularAreaRetangulo(largura, altura) { return largura * altura; }

const area = calcularAreaRetangulo(10, 5); console.log(area); // 50

Questão: Converta a função do exercício anterior para uma Arrow Function (na sua forma mais curta). Resposta: const calcularAreaRetangulo = (largura, altura) => largura * altura; const area = calcularAreaRetangulo(10, 5); console.log(area); // 50

Capítulo 5: Estruturas Condicionais

Na programação, raramente queremos que o código execute da mesma forma todas as vezes. As estruturas condicionais nos permitem tomar decisões e executar diferentes blocos de código com base em certas condições.

O Bloco if...else

A estrutura mais comum é o if. Ele executa um bloco de código se uma condição for verdadeira. O else é opcional e executa um bloco de código se a condição do if for falsa. Para múltiplas condições, podemos encadear com else if.

O Operador Ternário

É uma forma compacta de escrever um if...else em uma única linha, ideal para atribuições condicionais.

A Estrutura switch

Quando você precisa comparar uma variável com múltiplos valores possíveis, a estrutura switch pode ser mais limpa e legível do que vários if...else if.

Exemplo: if, else if, else const hora = 14;

if (hora < 12) { console.log("Bom dia!"); } else if (hora < 18) { console.log("Boa tarde!"); // Esta condição é verdadeira } else { console.log("Boa noite!"); }

Exemplo: Operador Ternário const idade = 20; const status = idade >= 18? "Adulto" : "Menor de idade"; console.log(status); // "Adulto"

Exemplo: switch const diaDaSemana = 3; // 1 = Domingo, 2 = Segunda, 3 = Terça let nomeDoDia;

switch (diaDaSemana) { case 1: nomeDoDia = "Domingo"; break; // O 'break' é importante para sair do switch case 2: nomeDoDia = "Segunda"; break; case 3: nomeDoDia = "Terça"; break; default: // 'default' é como o 'else' nomeDoDia = "Dia inválido"; } console.log("Hoje é:", nomeDoDia); // Hoje é: Terça

Pratique!

Questão: Crie uma variável nota com um valor numérico. Use if...else para exibir "Aprovado" se a nota for maior ou igual a 7, e "Reprovado" caso contrário. Resposta: const nota = 8.5; if (nota >= 7) { console.log("Aprovado"); } else {

console.log("Reprovado"); }

Questão: Crie uma variável permissao (ex: "admin", "usuario", "guest"). Use um switch para exibir uma mensagem diferente para cada tipo de permissão. Resposta: const permissao = "admin"; switch (permissao) { case "admin": console.log("Acesso total concedido."); break; case "usuario": console.log("Acesso padrão concedido."); break; case "guest": console.log("Acesso de convidado, algumas áreas são restritas."); break; default: console.log("Permissão desconhecida."); }

Capítulo 6: Arrays: Listas de Dados

Muitas vezes, precisamos trabalhar com uma coleção de itens, como uma lista de compras ou uma lista de nomes. Arrays são a estrutura de dados perfeita para isso em JavaScript.

O que é um Array?

Um array é uma variável especial que pode conter mais de um valor por vez. Os valores em um array são chamados de "elementos" e são organizados em uma lista ordenada.

Acessando Elementos

Cada elemento em um array tem uma posição, chamada de "índice" (index). A contagem dos índices sempre começa em 0. Para acessar um elemento, usamos o nome do array seguido do índice entre colchetes ``.

Propriedades e Métodos Úteis

Arrays vêm com funcionalidades prontas para nos ajudar a manipulá-los:

● .length: Retorna o número de elementos no array.

● .push(elemento): Adiciona um novo elemento ao final do array.

● .pop(): Remove o último elemento do array.

● .indexOf(elemento): Retorna o índice da primeira ocorrência de um elemento (-1 se não encontrar).

Exemplo: Criando e Acessando um Array // Criando um array de frutas const frutas =;

console.log(frutas); // "Maçã" (primeiro elemento) console.log(frutas[1]); // "Banana" (segundo elemento) console.log(frutas.length); // 3 (tamanho do array)

// Modificando um elemento frutas[1] = "Uva"; console.log(frutas); // ["Maçã", "Uva", "Laranja"]

Exemplo: Adicionando e Removendo Itens const tarefas =; // Adiciona um item no final tarefas.push("Lavar o carro"); console.log(tarefas); //

// Remove o último item const tarefaRemovida = tarefas.pop(); console.log(tarefaRemovida); // "Lavar o carro" console.log(tarefas); //

Pratique!

Questão: Crie um array chamado numeros com os números de 1 a 5. Em seguida, exiba o terceiro elemento do array no console. Resposta: const numeros = [1, 3, 4, 5, 6]; console.log(numeros[3]); // 3

Questão: Crie um array vazio chamado paises. Adicione três países de sua escolha ao array usando o método .push() e depois exiba o array completo no console. Resposta: const paises =; paises.push("Brasil"); paises.push("Japão"); paises.push("Itália"); console.log(paises); //

Capítulo 7: Loops: Repetindo Ações

Loops são uma das ferramentas mais poderosas da programação. Eles nos permitem executar um bloco de código várias vezes, o que é ideal para trabalhar com arrays ou realizar tarefas repetitivas sem ter que escrever o mesmo código de novo e de novo.

O Loop for

O loop for é o mais comum. Ele é composto por três partes: a inicialização (onde o loop começa), a condição (que mantém o loop rodando) e o incremento (o que acontece após cada repetição). É perfeito para quando você sabe exatamente quantas vezes quer que o loop seja executado, como ao percorrer todos os itens de um array.

O Loop while

O loop while (enquanto) continua executando um bloco de código enquanto uma condição especificada for verdadeira. É útil quando você não sabe de antemão quantas iterações serão necessárias.

Exemplo: Loop for para contar // Loop que conta de 1 a 5 for (let i = 1; i <= 5; i++) { // i++ é o mesmo que i = i + 1 console.log("Contagem:", i); }

Exemplo: Usando for para percorrer um array const cores = ["Vermelho", "Verde", "Azul"]; for (let i = 0; i < cores.length; i++) { console.log("Cor:", cores[i]); }

Exemplo: Loop while let contador = 0; while (contador < 3) { console.log("O contador é " + contador); contador++; // Cuidado: é preciso incrementar manualmente! }

Pratique!

Questão: Use um loop for para exibir os números pares de 2 a 10 no console. Resposta: for (let i = 2; i <= 10; i += 2) { console.log(i); }

Questão: Dado o array const nomes =;, use um loop for para exibir uma saudação para cada nome, como "Olá, Ana!", "Olá, Bruno!", etc. Resposta: const nomes =; for (let i = 0; i < nomes.length; i++) { console.log("Olá, " + nomes[i] + "!"); }

Capítulo 8: Objetos: Estruturas Complexas

Enquanto arrays são ótimos para listas, os Objetos nos permitem representar entidades mais complexas, com múltiplas características. Pense em um objeto como uma coleção de propriedades, onde cada propriedade é uma dupla de chave-valor

Criando Objetos

A forma mais comum de criar um objeto é usando a sintaxe de objeto literal, com chaves {}. Dentro das chaves, definimos as propriedades.

Acessando Propriedades

Podemos acessar os valores de um objeto de duas maneiras:

1. Notação de Ponto (Dot Notation): objeto.propriedade. É a mais comum e legível. 2. Notação de Colchetes (Bracket Notation): objeto["propriedade"]. É útil quando o nome da propriedade é dinâmico (vem de uma variável).

Métodos em Objetos

Quando o valor de uma propriedade é uma função, chamamos isso de "método". Métodos definem ações que o objeto pode realizar.

Exemplo: Criando um Objeto Literal const pessoa = { nome: "Carlos", sobrenome: "Silva", idade: 30, temCnh: true, interesses: ["programação", "música", "esportes"] };

Exemplo: Acessando e Modificando Propriedades const carro = { marca: "Ford", modelo: "Ka", ano: 2020 };

// Acessando com dot notation console.log("A marca do carro é:", carro.marca); // Ford

// Modificando uma propriedade carro.ano = 2021; console.log("Ano atualizado:", carro.ano); // 2021

// Adicionando uma nova propriedade carro.cor = "Branco"; console.log(carro);

Exemplo: Objeto com um Método const retangulo = { largura: 10, altura: 5, calcularArea: function() { // 'this' se refere ao próprio objeto return this.largura * this.altura; }

console.log("A área é:", retangulo.calcularArea()); // A área é: 50

Pratique!

Questão: Crie um objeto chamado livro com as seguintes propriedades: titulo (string), autor (string) e paginas (number). Preencha com dados de um livro que você gosta. Resposta: const livro = {

titulo: "O Guia do Mochileiro das Galáxias", autor: "Douglas Adams", paginas: 208 };

Questão: Acesse e exiba no console a propriedade autor do objeto livro que você criou. Resposta: console.log(livro.autor);

Capítulo 9: O DOM: Conectando JavaScript e HTML

Até agora, nosso JavaScript rodou principalmente no console. O verdadeiro poder do JS na web vem de sua capacidade de interagir com o conteúdo da página. Isso é possível através do DOM (Document Object Model)

O que é o DOM?

Quando um navegador carrega uma página HTML, ele cria uma representação em memória da página, chamada DOM. O DOM é uma estrutura em "árvore" onde cada elemento HTML, atributo e texto se torna um "nó" (node) que o JavaScript pode acessar e manipular. Com o DOM, podemos fazer coisas como: encontrar um elemento na página, alterar seu conteúdo, mudar seu estilo, adicionar ou remover elementos, e muito mais.

Selecionando Elementos

Para manipular um elemento, primeiro precisamos selecioná-lo. Existem vários métodos para isso:

● document.getElementById("id-do-elemento"): Seleciona um elemento pelo seu atributo id. É o mais rápido e específico.

● document.querySelector("seletor-css"): Seleciona o primeiro elemento que corresponde a um seletor CSS (ex: .minha-classe, p, #meu-id).

● document.querySelectorAll("seletor-css"): Seleciona todos os elementos que correspondem a um seletor e retorna uma lista (NodeList).

Manipulando Elementos

Uma vez que um elemento é selecionado e armazenado em uma variável, podemos alterar suas propriedades:

● .textContent: Altera o conteúdo de texto de um elemento.

● .innerHTML: Altera o conteúdo HTML dentro de um elemento (cuidado com segurança!).

● .style: Permite alterar as propriedades CSS de um elemento (ex: elemento.style.color = "red").

● .classList: Permite adicionar (.add()) ou remover (.remove()) classes CSS. HTML para os Exemplos: <h1 id="titulo-principal">Título Original</h1> <p class="paragrafo">Este é um parágrafo.</p> <div id="container"></div>

Exemplo: Selecionando e Alterando Conteúdo // JS em um arquivo separado ou tag <script> // Seleciona o h1 pelo ID const titulo = document.getElementById('titulo-principal'); // Altera o texto do h1 titulo.textContent = 'Novo Título com JavaScript!';

// Seleciona o primeiro parágrafo pela classe const paragrafo = document.querySelector('.paragrafo'); paragrafo.textContent = 'Conteúdo do parágrafo alterado.';

Exemplo: Alterando Estilos e Criando Elementos // Continuação do script... const titulo = document.getElementById('titulo-principal');

// Altera a cor do texto para azul titulo.style.color = 'blue';

// Cria um novo elemento <p>

const novoParagrafo = document.createElement('p'); novoParagrafo.textContent = 'Este parágrafo foi criado com JS.';

// Adiciona o novo parágrafo dentro da div com id "container" const container = document.getElementById('container'); container.appendChild(novoParagrafo);

Pratique!

Questão: Em uma página HTML com <p id="saudacao"></p>, escreva o JS para selecionar este parágrafo e inserir o texto "Olá, DOM!" dentro dele. Resposta: const pSaudacao = document.getElementById('saudacao'); pSaudacao.textContent = 'Olá, DOM!';

Questão: Em uma página HTML com um <h1>, selecione-o usando querySelector e mude a cor do seu fundo (background) para amarelo ('yellow'). Resposta: const titulo = document.querySelector('h1'); titulo.style.backgroundColor = 'yellow';

Capítulo 10: Eventos: Respondendo ao Usuário

Páginas web dinâmicas não apenas mudam sozinhas; elas reagem às ações do usuário. Clicar em um botão, passar o mouse sobre uma imagem, digitar em um formulário - tudo isso são "eventos". JavaScript nos permite "ouvir" esses eventos e executar código em resposta.

O que são Eventos?

Eventos são ações que acontecem na página, geralmente iniciadas pelo usuário. O JavaScript pode ser configurado para observar (ou "escutar") um elemento específico, esperando que um determinado evento ocorra.

Adicionando um "Event Listener"

A maneira moderna e recomendada de lidar com eventos é usando o método .addEventListener(). Ele recebe dois argumentos principais:

1. O tipo de evento (uma string, como "click", "mouseover", "keydown").

2. Uma função (chamada de "callback function" ou "handler") que será executada quando o evento ocorrer.

Eventos Comuns

● click: O usuário clica em um elemento.

● mouseover / mouseout: O cursor do mouse entra ou sai de um elemento.

● keydown / keyup: Uma tecla do teclado é pressionada ou solta.

● submit: Um formulário é enviado.

HTML para os Exemplos: <button id="meu-botao">Clique em mim!</button> <div id="caixa" style="width: 100px; height: 100px; background-color: lightgray; margin-top: 10px;"></div> <p id="mensagem"></p>

Exemplo: Evento de Clique

// 1. Seleciona o botão const botao = document.getElementById('meu-botao');

// 2. Define a função que será executada no clique function aoClicar() { alert('Botão clicado!'); document.getElementById('mensagem').textContent = 'Você clicou no botão!'; }

// 3. Adiciona o event listener ao botão botao.addEventListener('click', aoClicar);

Exemplo: Eventos de Mouse

// Continuação do script... const caixa = document.getElementById('caixa');

// Muda a cor quando o mouse entra na div caixa.addEventListener('mouseover', function() { caixa.style.backgroundColor = 'lightblue'; });

// Volta à cor original quando o mouse sai caixa.addEventListener('mouseout', function() { caixa.style.backgroundColor = 'lightgray'; });

Pratique!

Questão: Crie um botão em HTML. Usando JavaScript, faça com que, ao ser clicado, o texto de um parágrafo na página mude para "O botão mágico foi acionado!". Resposta: // HTML: <button id="btn-magico">Ativar</button> <p id="textomagico"></p>

const btn = document.getElementById('btn-magico'); const texto = document.getElementById('texto-magico');

btn.addEventListener('click', function() { texto.textContent = "O botão mágico foi acionado!"; });

Questão: Crie uma div quadrada na sua página. Faça com que, ao clicar duas vezes nela (evento dblclick), a cor de fundo da div mude para coral. Resposta: // HTML: <div id="quadrado" style="width: 50px; height:50px; border:1px solid black;"></div>

const quadrado = document.getElementById('quadrado');

quadrado.addEventListener('dblclick', function() { quadrado.style.backgroundColor = 'coral'; });

Capítulo 11: Projeto Final (Aplicando os Conceitos)

Vamos unir tudo o que aprendemos (DOM, Eventos, Arrays e Funções) para construir o projeto mais clássico para iniciantes em JavaScript: uma Lista de Tarefas (To-Do List)

1. O HTML (A Estrutura)

Primeiro, precisamos do nosso HTML. Ele terá um título, um campo de entrada (input) para digitar a tarefa, um botão (button) para adicionar e uma lista não ordenada (ul) onde as tarefas aparecerão.

<!DOCTYPE html> <html lang="pt-BR"> <head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initialscale=1.0">

<title>Minha Lista de Tarefas</title> </head>

<body>

<h1>Minha Lista de Tarefas</h1>

<div>

<input type="text" id="input-tarefa" placeholder="Digite uma nova tarefa">

<button id="btn-adicionar">Adicionar</button> </div>

<ul id="lista-tarefas"> </ul>

<script src="script.js"></script> </body> </html>

2. O JavaScript (A Lógica)

Agora, vamos criar nosso script.js para adicionar a interatividade. // PASSO 1: SELECIONAR OS ELEMENTOS DO DOM // (Cap. 9: Selecionando Elementos) const inputTarefa = document.getElementById('input-tarefa'); const btnAdicionar = document.getElementById('btn-adicionar'); const listaTarefas = document.getElementById('lista-tarefas');

// PASSO 2: ADICIONAR O EVENT LISTENER

// (Cap. 10: Eventos) // Vamos ouvir o evento 'click' no botão btnAdicionar.addEventListener('click', adicionarTarefa);

// PASSO 3: CRIAR A FUNÇÃO DE CALLBACK

// (Cap. 4: Funções) function adicionarTarefa() { // 3.1. Pegar o valor digitado no input const textoTarefa = inputTarefa.value;

// 3.2. Validar se o campo não está vazio // (Cap. 5: Condicionais) if (textoTarefa === "") { alert("Você precisa digitar uma tarefa!"); return; // Para a função aqui }

// 3.3. Criar o novo item da lista (<li>) // (Cap. 9: Manipulando Elementos) const novaTarefa = document.createElement('li'); novaTarefa.textContent = textoTarefa;

// 3.4. Adicionar o novo <li> à <ul> // (Cap. 9: Manipulando Elementos) listaTarefas.appendChild(novaTarefa);

// 3.5. Limpar o campo de input inputTarefa.value = ""; inputTarefa.focus(); // Devolve o foco ao input }

Com este código, você combinou todos os conceitos principais: selecionou elementos do DOM, ouviu um evento de clique, criou uma função para lidar com esse evento, usou uma condicional para validação e, finalmente, manipulou o DOM para adicionar um novo elemento à página.

Capítulo 12: Glossário e Próximos Passos

Glossário de Termos

● Array: Uma coleção ou lista ordenada de valores, acessados por um índice numérico (começando em 0).

● Boolean: Um tipo de dado primitivo que só pode ser true ou false.

● const: Palavra-chave para declarar uma variável cujo valor não pode ser reatribuído (constante).

● DOM (Document Object Model): A representação em árvore do seu arquivo HTML, que o JavaScript pode ler e manipular.

● Evento: Uma ação do usuário (como click ou keydown) que o JavaScript pode "ouvir" e à qual pode reagir.

● Função: Um bloco de código nomeado e reutilizável, projetado para executar uma tarefa específica.

● Loop (for, while): Estruturas que permitem executar um bloco de código repetidamente.

● Método: Uma função que pertence a um objeto (ex: array.push()).

● Objeto: Uma estrutura de dados que armazena coleções de pares chave-valor.

● Operador: Símbolos (+, ===, &&) que executam operações em valores.

● String: Um tipo de dado primitivo usado para representar texto.

● Variável: Um "contêiner" nomeado (let) para armazenar dados que podem mudar.

Próximos Passos

O que você aprendeu neste e-book são os fundamentos. O JavaScript é uma linguagem vasta, e este é o ponto de partida para todo o desenvolvimento web moderno. Seu próximo passo lógico é explorar:

1. JavaScript Assíncrono (Async/Await e Fetch): Aprenda como o JS lida com tarefas demoradas (como buscar dados de um servidor) sem travar o navegador. Isso é essencial para consumir APIs (Interfaces de Programação de Aplicações) e obter dados do mundo real.

2. Frameworks/Bibliotecas Front-End: Ferramentas como React, Angular e Vue.js são usadas para construir interfaces de usuário complexas (Single Page Applications, ou SPAs) de forma eficiente. Elas são construídas sobre os conceitos do DOM, eventos e gerenciamento de dados que vimos.

3. JavaScript no Back-End (Node.js): Se você gostou da lógica do JavaScript, pode usála para construir o lado do servidor de uma aplicação usando o Node.js. Isso permite que você se torne um desenvolvedor full-stack, cuidando tanto do front-end quanto do backend.

O caminho do desenvolvedor é de aprendizado contínuo. Mas com a base sólida que você adquiriu, você está mais do que preparado para enfrentar os próximos desafios. Continue praticando!