Introdução

Neste laboratório, você entrará no mundo do desenvolvimento web através dos olhos de Alex, um desenvolvedor web iniciante encarregado de criar um rastreador de finanças pessoais dinâmico. Construir um aplicativo fácil de usar que permita aos usuários inserir e acompanhar suas despesas e receitas diárias. O objetivo é claro: desenvolver uma interface que seja intuitiva e envolvente, garantindo que os usuários possam gerenciar facilmente suas finanças sem complicações. Este projeto não visa apenas simplificar a gestão de finanças pessoais, mas também apresentar os conceitos fundamentais de JavaScript e manipulação de DOM.

Estaremos trabalhando em 5 laboratórios para concluir o projeto EconoMe.

Pontos de conhecimento:

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

JavaScript básico

JavaScript é uma linguagem simples, orientada a objetos e orientada a eventos. Ele é baixado do servidor para o cliente e executado pelo navegador.

Ele pode ser usado com HTML e na Web e, de forma mais ampla, em servidores, PCs, laptops, tablets e smartphones.

Suas características incluem:

• Normalmente usado para escrever scripts do lado do cliente.
• Usado principalmente para adicionar comportamento interativo em páginas HTML.
• É uma linguagem interpretada, executada conforme é 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ódigos JavaScript particularmente curtos.
• Usando a tag
• Usando um arquivo JavaScript externo, escreva o código do script JavaScript em um arquivo com um sufixo .js e inclua-o definindo o atributo src da tag

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 do página.

Agora, vamos adicionar a tag

A seguir, vamos aprender como definir variáveis ​​em JavaScript!

O que são variáveis

Variáveis ​​podem ser vistas como recipientes para armazenar informações. Na programação, usamos variáveis ​​para armazenar valores de dados. JavaScript é uma linguagem de tipo dinâmico, 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 declarar variáveis ​​locais com escopo de bloco.
• const: Também introduzido no ES6, usado para declarar uma constante que não pode ser alterada depois de declarada.

Por exemplo:

var name = "Alice"; // Using var to declare a variable
let age = 30; // Using let to declare a variable
const city = "London"; // Using const to declare a constant

Tipos de variáveis

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

• String: dados de texto, como "Hello, World!".
• Número: inteiros ou números de ponto flutuante, como 42 ou 3,14.
• Booleano: verdadeiro ou falso.
• Objeto: pode armazenar vários valores ou estruturas de dados complexas.
• nulo e indefinido: tipos especiais que representam "sem valor" e "valor não definido", respectivamente.

Usando variáveis

Uma vez declaradas as variáveis, você pode usá-las em seu programa:

console.log(name); // Outputs: Alice
console.log("Age: "   age); // Outputs: Age: 30
console.log(city   " is a beautiful city"); // Outputs: London is a beautiful city

O método estático console.log() envia uma mensagem para o console.

Manipulação de DOM

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ó faz parte do documento, como elementos, atributos e conteúdo de texto.

Acessando Elementos DOM

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

let elementById = document.getElementById("elementId"); // Access element by ID
let elementsByClassName = document.getElementsByClassName("className"); // Access a collection of elements by class name
let elementsByTagName = document.getElementsByTagName("tagName"); // Access a collection of elements by tag name

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 essa finalidade.

Por exemplo, para inserir

Novo conteúdo HTML

Adicionando e Removendo Elementos

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

Por exemplo:

// Create a new element
let newElement = document.createElement("div");
newElement.textContent = "Hello, world!";
document.body.appendChild(newElement); // Add the new element to the document body
document.body.removeChild(newElement); // Remove the element from the document body

• 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 .
• O método document.body.removeChild() remove o elemento do elemento .

Tratamento de eventos

Os ouvintes de eventos permitem que você responda às ações do usuário.

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

como cliques, passar o mouse ou pressionar teclas:

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

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 as folhas de estilo, imagens e subquadros terminem de carregar. Isso o torna um evento importante para a execução de código JavaScript assim que o DOM estiver pronto, garantindo que o script interaja com elementos HTML totalmente analisados.

Este laboratório não exige a visualização do efeito neste momento. Iremos revisá-lo após completar o código nas etapas a seguir.

Resumo

Neste laboratório, você embarcou na jornada de construção de uma parte básica, porém fundamental, de um rastreador de finanças pessoais com Alex. Você preparou o cenário para um aplicativo Web dinâmico 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 a seguir.

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

? Pratique agora: JavaScript básico e DOM

Quer saber mais?

• ? Aprenda as árvores de habilidades JavaScript mais recentes
• ? Leia mais tutoriais de JavaScript
• ? Junte-se ao nosso Discord ou envie um tweet para nós @WeAreLabEx