Dominando JavaScript e Manipulação do DOM

Introdução

Neste Lab, você entrará no mundo do desenvolvimento web através dos olhos de Alex, um desenvolvedor web em ascensão encarregado de criar um rastreador dinâmico de finanças pessoais. O objetivo é construir uma aplicação amigável que permita aos usuários inserir e acompanhar suas despesas e rendimentos diários. A meta é clara - desenvolver uma interface que seja intuitiva e envolvente, garantindo que os usuários possam gerenciar facilmente suas finanças sem qualquer dificuldade. Este projeto não apenas visa simplificar o gerenciamento de finanças pessoais, mas também apresentar a você os conceitos fundamentais de JavaScript e manipulação do DOM.

Trabalharemos em 5 labs para completar o projeto EconoMe.

Pontos de Conhecimento:

Declarações de variáveis (let, const)
Noções básicas de manipulação do DOM (obter elementos, modificar o conteúdo dos elementos)
Escuta de eventos (addEventListener)

Este é um Lab Guiado, que fornece instruções passo a passo para ajudá-lo a aprender e praticar. Siga as instruções cuidadosamente para completar cada etapa e ganhar experiência prática. Dados históricos mostram que este é um laboratório de nível intermediário com uma taxa de conclusão de 65%. Recebeu uma taxa de avaliações positivas de 97% dos estudantes.

JavaScript Básico

JavaScript é uma linguagem simples, orientada a objetos e orientada a eventos. Ela é baixada do servidor para o cliente e executada pelo navegador.

Pode ser usada com HTML e a Web, e mais amplamente em servidores, PCs, laptops, tablets e smartphones.

Suas características incluem:

Tipicamente usada para escrever scripts do lado do cliente.
Principalmente usada para adicionar comportamento interativo em páginas HTML.
É uma linguagem interpretada, executada à medida que é interpretada.

Então, como incluímos JavaScript em HTML?

O método de inclusão é semelhante ao CSS e pode ser feito de três maneiras:

Diretamente nas tags HTML, para código JavaScript particularmente curto.
Usando a tag <script>, o código JavaScript pode ser embutido no <head> e <body> do documento HTML.
Usando um arquivo JavaScript externo, escreva o código do script JavaScript em um arquivo com o sufixo .js e inclua-o definindo o atributo src da tag <script>.

Por exemplo, se pressionarmos F12, podemos ver que muitos arquivos JavaScript externos estão incluídos nesta página e, clicando em Event Listeners, podemos observar que existem muitos tipos de eventos dentro da página.

Agora, vamos adicionar a tag <script> a ~/project/index.html para incluir o arquivo script.js.

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>EconoMe</title>
    <link rel="stylesheet" href="./style.css" />
    <!-- Add the script tag to index.html -->
    <script src="./script.js"></script>
  </head>
  <body></body>
</html>

Em seguida, vamos aprender como definir variáveis em JavaScript!

✨ Verificar Solução e Praticar

O que são Variáveis

Variáveis podem ser vistas como contêineres para armazenar informações. Em programação, usamos variáveis para armazenar valores de dados. JavaScript é uma linguagem de tipagem dinâmica, o que significa que você não precisa declarar o tipo de uma variável. O tipo será determinado automaticamente durante a execução do programa.

Declarando Variáveis

Em JavaScript, você pode usar as palavras-chave var, let ou const para declarar variáveis:

var: Antes do ES6, var era a principal forma de declarar variáveis, e tem escopo de função.
let: Introduzido no ES6, let permite que você declare variáveis locais com escopo de bloco.
const: Também introduzido no ES6, usado para declarar uma constante que não pode ser alterada após ser declarada.

Por exemplo:

var name = "Alice"; // Usando var para declarar uma variável
let age = 30; // Usando let para declarar uma variável
const city = "London"; // Usando const para declarar uma constante

Tipos de Variáveis

Em JavaScript, existem vários tipos de dados diferentes:

String: Dados de texto, como "Olá, Mundo!".
Number: Inteiros ou números de ponto flutuante, como 42 ou 3.14.
Boolean: true ou false.
Object: Pode armazenar múltiplos valores ou estruturas de dados complexas.
null e undefined: Tipos especiais que representam "nenhum valor" e "valor não definido", respectivamente.

Usando Variáveis

Depois que as variáveis são declaradas, você pode usá-las em seu programa:

console.log(name); // Saída: Alice
console.log("Age: " + age); // Saída: Age: 30
console.log(city + " is a beautiful city"); // Saída: London is a beautiful city

O método estático console.log() exibe uma mensagem no console.

Exemplo de declaração de variável JavaScript

✨ Verificar Solução e Praticar

Manipulação do DOM

O DOM (Document Object Model) é uma interface multiplataforma e independente de linguagem que trata documentos HTML e XML como uma estrutura de árvore, onde cada nó é uma parte do documento, como elementos, atributos e conteúdo de texto.

Acessando Elementos do DOM

Para manipular o conteúdo de uma página da web, você primeiro precisa acessar os elementos na árvore DOM. Você pode usar vários métodos para acessar elementos, como por seu ID, nome da classe ou nome da tag:

let elementById = document.getElementById("elementId"); // Acessar elemento por ID
let elementsByClassName = document.getElementsByClassName("className"); // Acessar uma coleção de elementos por nome da classe
let elementsByTagName = document.getElementsByTagName("tagName"); // Acessar uma coleção de elementos por nome da tag

Adicione o seguinte código ao arquivo ~/project/script.js do projeto EconoMe:

const form = document.getElementById("record-form");
const recordsList = document.getElementById("records-list");
const totalIncomeEl = document.getElementById("total-income");
const totalExpenseEl = document.getElementById("total-expense");
const balanceEl = document.getElementById("balance");

Modificando o Conteúdo do Elemento

Depois de ter uma referência a um elemento, você pode modificar seu conteúdo. As propriedades innerHTML e textContent são comumente usadas para esse fim.

Por exemplo, para inserir <p>New HTML content</p> em um elemento div com id=content e substituir "Hello" por "New text content" em um elemento span com id=info, você usaria o seguinte código JavaScript:

Adicionando e Removendo Elementos

Você pode adicionar ou remover elementos dinamicamente na página usando JavaScript.

Por exemplo:

// Criar um novo elemento
let newElement = document.createElement("div");
newElement.textContent = "Hello, world!";
document.body.appendChild(newElement); // Adicionar o novo elemento ao corpo do documento
document.body.removeChild(newElement); // Remover o elemento do corpo do documento

Em um documento HTML, o método document.createElement() cria o elemento HTML.
O método document.body.appendChild() adiciona o novo elemento ao final do elemento <body>.
O método document.body.removeChild() remove o elemento do elemento <body>.

✨ Verificar Solução e Praticar

Manipulação de Eventos

Listeners de eventos permitem que você responda a ações do usuário.

addEventListener("event", function () {});

como cliques, passar o mouse ou pressionamentos de teclas:

elementById.addEventListener("click", function () {
  console.log("Element was clicked!");
});

Demonstração de tratamento de eventos gif

Depois de aprender as operações básicas do DOM, você pode adicionar o seguinte código ao arquivo ~/project/script.js do projeto EconoMe:

document.addEventListener("DOMContentLoaded", function () {
  const form = document.getElementById("record-form");
  const recordsList = document.getElementById("records-list");
  const totalIncomeEl = document.getElementById("total-income");
  const totalExpenseEl = document.getElementById("total-expense");
  const balanceEl = document.getElementById("balance");
  let draggedIndex = null; // Index of the dragged item
});

O evento DOMContentLoaded em JavaScript é acionado quando o documento HTML inicial foi completamente carregado e analisado, sem esperar que folhas de estilo, imagens e subframes terminem de carregar. Isso o torna um evento importante para executar o código JavaScript assim que o DOM estiver pronto, garantindo que o script interaja com elementos HTML totalmente analisados.

Este laboratório não requer a visualização do efeito neste momento. Vamos revisá-lo após concluir o código nas etapas seguintes.

✨ Verificar Solução e Praticar

Resumo

Neste laboratório, você embarcou na jornada de construção de uma parte básica, mas fundamental, de um rastreador de finanças pessoais com Alex. Você preparou o terreno para uma aplicação web dinâmica, configurando o ambiente do projeto e usando JavaScript para manipular o DOM, mostrando os estados financeiros iniciais. A principal lição é entender como o JavaScript interage com os elementos HTML para alterar dinamicamente o conteúdo de uma página da web, estabelecendo as bases para recursos mais interativos nas etapas seguintes.

Essa abordagem prática não apenas solidifica sua compreensão de JavaScript e manipulação do DOM, mas também simula cenários reais de desenvolvimento web, preparando você para projetos mais complexos no futuro.

JavaScript e DOM Básicos

Introdução

JavaScript Básico

O que são Variáveis

Declarando Variáveis

Tipos de Variáveis

Usando Variáveis

Manipulação do DOM

Acessando Elementos do DOM

Modificando o Conteúdo do Elemento

Adicionando e Removendo Elementos

Manipulação de Eventos

Resumo