Plano de Estudo: JavaScript e Módulos
Capítulo 1: Introdução
Entendendo a aplicação
Introdução aos Módulos em JavaScript
Capítulo 2: Módulos
Trabalhando com mais de um recurso de módulo
Utilizando require em JavaScript
Capítulo 3: Configuração
Arquivo de configuração
Estrutura do projeto: Arquitetura da aplicação
Capítulo 4: Início do Projeto
Ponto de partida
Criação de pastas e arquivos
Capítulo 5: Configuração do Projeto
Arquivo de configuração
Coleção de dados da aplicação
Capítulo 6: Desenvolvimento do Projeto
Funções da aplicação
Parte principal da aplicação
Capítulo 7: Revisão e Exercícios
Revisão dos tópicos aprendidos
Exercícios práticos para consolidar o aprendizado
Capítulo 1: Introdução
Entendendo a aplicação
Objetivo da aplicação: Antes de começar a codificar, é importante entender o que a
aplicação deve fazer. Quais são suas funcionalidades? Quem são os usuários? Quais
problemas a aplicação resolve?
Requisitos da aplicação: Quais são os requisitos técnicos e de negócios da aplicação?
Isso pode incluir coisas como desempenho, segurança, acessibilidade, e compatibilidade
com diferentes navegadores ou dispositivos.
Arquitetura da aplicação: Como a aplicação será estruturada? Quais são os principais
componentes da aplicação e como eles interagem entre si?
Introdução aos Módulos em JavaScript
O que são módulos?: Módulos são partes reutilizáveis de código que podem ser
exportadas de um arquivo e importadas para uso em outro arquivo. Eles ajudam a
organizar e encapsular o código, tornando-o mais legível e manutenível.
Por que usar módulos?: Módulos permitem que você divida seu código em partes
menores e reutilizáveis. Isso pode tornar seu código mais fácil de entender e testar.
Além disso, módulos podem ajudar a evitar conflitos de nomes no seu código.
Como usar módulos em JavaScript: Em JavaScript, você pode criar um módulo usando a
palavra-chave export e pode importar um módulo usando a palavra-chave import.
Entendendo a aplicação
Vamos supor que você está construindo um aplicativo de lista de tarefas. Aqui estão algumas
coisas que você pode considerar:
Objetivo da aplicação: O aplicativo deve permitir que os usuários criem, editem e excluam
tarefas. Os usuários devem ser capazes de marcar tarefas como concluídas e filtrar tarefas por
status (por exemplo, todas, pendentes, concluídas).
Requisitos da aplicação: O aplicativo deve ser responsivo para funcionar em dispositivos móveis
e desktop. Deve ser acessível para usuários com deficiência. Deve ser seguro, ou seja, os dados
do usuário não devem ser expostos a terceiros.
Arquitetura da aplicação: O aplicativo pode ter uma arquitetura de “cliente-servidor”. O
servidor lida com a persistência de dados (por exemplo, salvar tarefas), enquanto o cliente (o
navegador do usuário) lida com a interface do usuário.
Introdução aos Módulos em JavaScript
Aqui está um exemplo simples de como você pode usar módulos em JavaScript:
// [Link]
export function add(a, b) {
return a + b;
}
export function subtract(a, b) {
return a - b;
}
// [Link]
import { add, subtract } from './[Link]';
[Link](add(1, 2)); // 3
[Link](subtract(4, 1)); // 3
Neste exemplo, [Link] é um módulo que exporta duas funções, add e subtract. Em [Link],
essas funções são importadas e usadas. Isso mostra como os módulos podem ajudar a organizar e
reutilizar o código.
Capítulo 2: Módulos
Trabalhando com mais de um recurso de módulo
Módulos em JavaScript não são limitados a exportar e importar apenas uma coisa. Eles podem
exportar ou importar múltiplas funções, objetos, valores primitivos, classes, etc. Isso permite que
você organize seu código de maneira mais modular e reutilizável.
Por exemplo, você pode ter um módulo que lida com operações matemáticas:
// [Link]
export function add(a, b) {
return a + b;
}
export function subtract(a, b) {
return a - b;
}
export function multiply(a, b) {
return a * b;
}
export function divide(a, b) {
if (b === 0) {
throw new Error("Cannot divide by zero");
}
return a / b;
}
E então, em outro arquivo, você pode importar e usar todas essas funções:
// [Link]
import { add, subtract, multiply, divide } from './[Link]';
[Link](add(1, 2)); // 3
[Link](subtract(4, 1)); // 3
[Link](multiply(2, 3)); // 6
[Link](divide(8, 2)); // 4
Utilizando require em JavaScript
O require é uma função em [Link] que é usada para importar módulos. É semelhante à
palavra-chave import em JavaScript moderno, mas tem algumas diferenças.
Aqui está um exemplo de como você pode usar require para importar um módulo:
// [Link]
[Link] = {
add: function(a, b) {
return a + b;
},
subtract: function(a, b) {
return a - b;
},
// ...outras funções...
};
// [Link]
const math = require('./[Link]');
[Link]([Link](1, 2)); // 3
[Link]([Link](4, 1)); // 3
Neste exemplo, [Link] exporta um objeto com duas funções, add e subtract. Em [Link], o
módulo [Link] é importado usando require, e suas funções são usadas.
Aqui estão alguns exercícios práticos com soluções para o Capítulo 2: Módulos.
Exercício 1: Criando e usando módulos
1. Crie um arquivo chamado [Link] e adicione as seguintes funções:
// [Link]
[Link] = {
add: function(a, b) {
return a + b;
},
subtract: function(a, b) {
return a - b;
},
multiply: function(a, b) {
return a * b;
},
divide: function(a, b) {
if (b === 0) {
throw new Error("Cannot divide by zero");
}
return a / b;
}
};
2. Crie um arquivo chamado [Link] e importe o módulo [Link] usando require. Em
seguida, use as funções do módulo para realizar algumas operações matemáticas:
// [Link]
const math = require('./[Link]');
[Link]([Link](1, 2)); // 3
[Link]([Link](4, 1)); // 3
[Link]([Link](2, 3)); // 6
[Link]([Link](8, 2)); // 4
Exercício 2: Trabalhando com vários recursos de módulo
1. Adicione mais funções ao módulo [Link]:
// [Link]
[Link] = {
// ...outras funções...
square: function(a) {
return a * a;
},
cube: function(a) {
return a * a * a;
}
};
2. Atualize o arquivo [Link] para usar as novas funções:
// [Link]
const math = require('./[Link]');
// ...outras operações...
[Link]([Link](3)); // 9
[Link]([Link](2)); // 8
Aqui estão alguns exercícios propostos para o Capítulo 2: Módulos. Esses exercícios são
projetados para refletir problemas reais que você pode encontrar no desenvolvimento de
software.
Exercício 1: Módulo de Cálculos Financeiros Crie um módulo que forneça funções para
cálculos financeiros comuns, como calcular juros compostos, retorno de investimento, etc. Tente
usar este módulo em um programa que simula um portfólio de investimentos.
Aqui estão algumas dicas para resolver o Exercício 1: Módulo de Cálculos Financeiros.
1. Entenda o problema: Antes de começar a codificar, é importante entender o que você
está tentando resolver. Neste caso, você está criando um módulo que pode realizar
cálculos financeiros comuns.
2. Identifique as funções necessárias: Quais cálculos você precisa fazer? Alguns exemplos
podem incluir calcular juros compostos, retorno de investimento, etc. Cada um desses
cálculos pode ser uma função separada em seu módulo.
3. Escreva o código para cada função: Agora que você sabe quais funções precisa, você
pode começar a escrevê-las. Lembre-se de testar cada função para garantir que ela esteja
funcionando corretamente.
4. Exporte as funções: Para que as funções possam ser usadas em outros arquivos, você
precisa exportá-las. Em [Link], você pode fazer isso com [Link].
5. Use o módulo em um programa: Finalmente, você pode usar o módulo em um
programa. Importe o módulo com require e então use as funções para realizar cálculos.
Aqui está um exemplo de como o módulo pode aparecer:
// [Link]
[Link] = {
calcularJurosCompostos: function(capital, taxa, tempo) {
return capital * [Link](1 + taxa, tempo);
},
calcularORetornoSobreInvestimento: function(ganho, custo) {
return (ganho - custo) / custo;
},
// ...outras funções...
};
Exercício 2: Módulo de Manipulação de Datas Crie um módulo que forneça funções para
manipular datas, como adicionar dias a uma data, formatar uma data, calcular a diferença entre
duas datas, etc. Use este módulo em um programa que agenda compromissos.
Claro, aqui estão algumas dicas para resolver o Exercício 2: Módulo de Manipulação de Datas.
1. Entenda o problema: Você precisa criar um módulo que forneça funções para
manipular datas. Isso pode incluir adicionar dias a uma data, formatar uma data, calcular
a diferença entre duas datas, etc.
2. Identifique as funções necessárias: Pense nas funções que você precisa para manipular
datas. Cada uma dessas operações pode ser uma função separada em seu módulo.
3. Escreva o código para cada função: Agora que você sabe quais funções precisa, você
pode começar a escrevê-las. Lembre-se de testar cada função para garantir que ela esteja
funcionando corretamente.
4. Exporte as funções: Para que as funções possam ser usadas em outros arquivos, você
precisa exportá-las. Em [Link], você pode fazer isso com [Link].
5. Use o módulo em um programa: Finalmente, você pode usar o módulo em um
programa. Importe o módulo com require e então use as funções para manipular datas.
Aqui está um exemplo de como o módulo pode parecer:
// [Link]
[Link] = {
adicionarDias: function(data, dias) {
let novaData = new Date(data);
[Link]([Link]() + dias);
return novaData;
},
formatarData: function(data) {
let dia = [Link]();
let mes = [Link]() + 1; // Os meses começam do 0
let ano = [Link]();
return `${dia}/${mes}/${ano}`;
},
calcularDiferenca: function(data1, data2) {
let diferenca = [Link](data1 - data2);
let dias = [Link](diferenca / (1000 * 60 * 60 * 24));
return dias;
},
// ...outras funções...
};
E aqui está um exemplo de como você pode usar o módulo:
// [Link]
const datas = require('./[Link]');
let data = new Date();
[Link]([Link](data)); // "7/4/2024"
[Link]([Link]([Link](data, 5))); // "12/4/2024"
[Link]([Link](data, [Link](data, 5))); //
5
Exercício 3: Módulo de Operações de Banco de Dados Crie um módulo que forneça funções
para operações comuns de banco de dados, como inserir, atualizar, deletar e buscar registros.
Use este módulo em um programa que gerencia um banco de dados de usuários.
Claro, aqui estão algumas dicas para resolver o Exercício 3: Módulo de Operações de Banco de
Dados.
1. Entenda o problema: Você precisa criar um módulo que forneça funções para operações
comuns de banco de dados. Isso pode incluir inserir, atualizar, deletar e buscar registros.
2. Identifique as funções necessárias: Pense nas funções que você precisa para interagir
com um banco de dados. Cada uma dessas operações pode ser uma função separada em
seu módulo.
3. Escreva o código para cada função: Agora que você sabe quais funções precisa, você
pode começar a escrevê-las. Lembre-se de testar cada função para garantir que ela esteja
funcionando corretamente.
4. Exporte as funções: Para que as funções possam ser usadas em outros arquivos, você
precisa exportá-las. Em [Link], você pode fazer isso com [Link].
5. Use o módulo em um programa: Finalmente, você pode usar o módulo em um
programa. Importe o módulo com require e então use as funções para interagir com o
banco de dados.
Aqui está um exemplo de como o módulo pode parecer:
// [Link]
[Link] = {
inserirRegistro: function(tabela, registro) {
// Código para inserir o registro na tabela
},
atualizarRegistro: function(tabela, id, novosDados) {
// Código para atualizar o registro com o id fornecido na tabela com os
novos dados
},
deletarRegistro: function(tabela, id) {
// Código para deletar o registro com o id fornecido da tabela
},
buscarRegistro: function(tabela, id) {
// Código para buscar o registro com o id fornecido na tabela
},
// ...outras funções...
};
E aqui está um exemplo de como você pode usar o módulo:
// [Link]
const bancoDeDados = require('./[Link]');
[Link]('usuarios', { nome: 'João', idade: 25 });
[Link]('usuarios', 1, { idade: 26 });
[Link]('usuarios', 1);
[Link]([Link]('usuarios', 1));
Por favor, note que este é apenas um exemplo e o código real para interagir com um banco de
dados dependerá do banco de dados que você está usando.
Exercício 4: Módulo de Autenticação Crie um módulo que forneça funções para autenticação
de usuários, como criar uma conta, fazer login, fazer logout, verificar se um usuário está logado,
etc. Use este módulo em um programa que requer autenticação de usuários.
Claro, aqui estão algumas dicas para resolver o Exercício 4: Módulo de Autenticação.
1. Entenda o problema: Você precisa criar um módulo que forneça funções para
autenticação de usuários. Isso pode incluir criar uma conta, fazer login, fazer logout,
verificar se um usuário está logado, etc.
2. Identifique as funções necessárias: Pense nas funções que você precisa para autenticar
usuários. Cada uma dessas operações pode ser uma função separada em seu módulo.
3. Escreva o código para cada função: Agora que você sabe quais funções precisa, você
pode começar a escrevê-las. Lembre-se de testar cada função para garantir que ela esteja
funcionando corretamente.
4. Exporte as funções: Para que as funções possam ser usadas em outros arquivos, você
precisa exportá-las. Em [Link], você pode fazer isso com [Link].
5. Use o módulo em um programa: Finalmente, você pode usar o módulo em um
programa. Importe o módulo com require e então use as funções para autenticar
usuários.
Aqui está um exemplo de como o módulo pode parecer:
// [Link]
[Link] = {
criarConta: function(usuario, senha) {
// Código para criar uma conta
},
fazerLogin: function(usuario, senha) {
// Código para fazer login
},
fazerLogout: function(usuario) {
// Código para fazer logout
},
verificarUsuarioLogado: function(usuario) {
// Código para verificar se um usuário está logado
},
// ...outras funções...
};
E aqui está um exemplo de como você pode usar o módulo:
// [Link]
const autenticacao = require('./[Link]');
[Link]('joao', 'senha123');
[Link]('joao', 'senha123');
[Link]([Link]('joao')); // true
[Link]('joao');
[Link]([Link]('joao')); // false
Por favor, note que este é apenas um exemplo e o código real para autenticação de usuários
dependerá do sistema que você está usando.
Exercício 5: Módulo de Validação de Dados Crie um módulo que forneça funções para validar
dados de entrada, como verificar se um e-mail está em um formato válido, se uma senha atende
aos requisitos de complexidade, etc. Use este módulo em um programa que aceita dados de
entrada do usuário.
Claro, aqui estão algumas dicas para resolver o Exercício 5: Módulo de Validação de Dados.
1. Entenda o problema: Você precisa criar um módulo que forneça funções para validar
dados de entrada. Isso pode incluir verificar se um e-mail está em um formato válido, se
uma senha atende aos requisitos de complexidade, etc.
2. Identifique as funções necessárias: Pense nas funções que você precisa para validar
dados. Cada uma dessas operações pode ser uma função separada em seu módulo.
3. Escreva o código para cada função: Agora que você sabe quais funções precisa, você
pode começar a escrevê-las. Lembre-se de testar cada função para garantir que ela esteja
funcionando corretamente.
4. Exporte as funções: Para que as funções possam ser usadas em outros arquivos, você
precisa exportá-las. Em [Link], você pode fazer isso com [Link].
5. Use o módulo em um programa: Finalmente, você pode usar o módulo em um
programa. Importe o módulo com require e então use as funções para validar dados de
entrada.
Aqui está um exemplo de como o módulo pode parecer:
// [Link]
[Link] = {
validarEmail: function(email) {
// Código para validar o formato do e-mail
},
validarSenha: function(senha) {
// Código para validar a complexidade da senha
},
// ...outras funções...
};
E aqui está um exemplo de como você pode usar o módulo:
// [Link]
const validacao = require('./[Link]');
[Link]([Link]('exemplo@[Link]')); // true
[Link]([Link]('senha123')); // false
Por favor, note que este é apenas um exemplo e o código real para validação de dados dependerá
dos requisitos específicos do seu programa.