Desenvolvedor de Software e Especialista em Tecnologia da Informação

Como Organizar um Projeto JavaScript (Separando HTML, lib.js e main.js)

Quando começamos a aprender JavaScript é comum escrever todo o código dentro do arquivo HTML. No início isso funciona, mas conforme o projeto cresce, essa prática rapidamente se torna um problema. Neste guia completo, você aprenderá como organizar um projeto JavaScript, separando responsabilidades entre arquivos diferentes e deixando seu código muito mais limpo, organizado e fácil de manter. Uma habilidade essencial para qualquer programador que deseja escrever código profissional.

Como Organizar um Projeto JavaScript (Separando HTML, lib.js e main.js)

Embora hoje existam módulos ES6, import/export e ferramentas modernas de build, compreender primeiro essa organização tradicional é extremamente importante para entender como o navegador carrega scripts.

Organização JavaScript JavaScript Programação JavaScript para Iniciantes Estrutura de Projetos lib.js Boas Práticas Clean Code Curso JavaScript RogerioPontesTI

"Até então temos escrito todo o nosso código dentro de um único arquivo HTML. Vamos separar esse código porque imagina só, já pensou se você tiver aqui 10 funções, o arquivo vai ficar muito carregado. O que a gente pode fazer é estruturar esses arquivos de forma externa."

🚀 O que você vai aprender neste artigo

  1. Organização de projetos JavaScript
  2. Arquivos externos JavaScript
  3. script src — como importar arquivos
  4. lib.js — biblioteca de funções
  5. main.js — regras de negócio
  6. Reutilização de código
  7. Boas práticas de organização
  8. Estrutura de projetos profissionais

📌 Conceitos abordados

  • Organização de código
  • Separação de responsabilidades
  • Arquivos externos — .js
  • script src — carregando JavaScript
  • Bibliotecas — lib.js
  • Regras de negócio — main.js
  • Ordem de carregamento — dependências entre arquivos
  • Manutenção de código

❌ O problema do código em um único arquivo

Quando estamos começando a programar, é comum escrever todo o código dentro de um único arquivo HTML. Veja o exemplo abaixo:

CÓDIGO DESORGANIZADO 

<!DOCTYPE html>
<html lang="pt-BR">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Meu Projeto</title>
        <script type="text/javascript">
            // Função 1
            function somarDoisNumeros(numero1, numero2) {
                return numero1 + numero2;
            }

            // Função 2
            function dividirDoisNumeros(numero1, numero2) {
                return numero1 / numero2;
            }

            // Função 3
            function calcularMedia(nota1, nota2, nota3) {
                return (nota1 + nota2 + nota3) / 3;
            }

            // ... mais 10 funções
            // O arquivo fica enorme e difícil de manter
        </script>
    </head>
    <body>
        <h1>Meu Projeto</h1>
    </body>
</html>
📖 Problemas dessa abordagem
  • Arquivo carregado — difícil de navegar
  • Manutenção difícil — encontrar e corrigir erros é complicado
  • Reutilização — não é possível usar as funções em outros projetos
  • Trabalho em equipe — conflitos frequentes no código
  • Escalabilidade — não cresce bem com o projeto

✅ A solução: Arquivos externos e organização

A solução é separar o código em arquivos externos, cada um com sua responsabilidade específica.

📁 Estrutura recomendada
meu-projeto/
├── index.html
├── lib.js      // Funções reutilizáveis (biblioteca)
└── main.js     // Regras de negócio (lógica principal)
CÓDIGO ORGANIZADO 

<!DOCTYPE html>
<html lang="pt-BR">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Meu Projeto</title>

        <!-- Biblioteca com funções reutilizáveis -->
        <script type="text/javascript" src="./lib.js"></script>

        <!-- Regras de negócio -->
        <script type="text/javascript" src="./main.js"></script>
    </head>
    <body>
        <h1>Meu Projeto</h1>
    </body>
</html>

📚 lib.js — A biblioteca de funções

O arquivo lib.js contém funções reutilizáveis que podem ser usadas em diferentes partes do projeto.

LIB.JS 

// lib.js - Funções reutilizáveis

function somarDoisNumeros(numero1, numero2) {
    let calculo = numero1 + numero2;
    return calculo;
}

function dividirDoisNumeros(numero1, numero2) {
    return numero1 / numero2;
}

function calcularMedia(nota1, nota2, nota3) {
    return (nota1 + nota2 + nota3) / 3;
}
📖 O que colocar no lib.js
  • Funções reutilizáveis
  • Funções de utilidade (validações, cálculos, formatações)
  • Código que pode ser usado em vários projetos
  • Funções que não dependem do contexto específico do projeto

⚙️ main.js — As regras de negócio

O arquivo main.js contém a lógica principal da aplicação, utilizando as funções da biblioteca.

MAIN.JS 

// main.js - Regras de negócio
console.log("Dentro do arquivo main.js");

// Usando funções da biblioteca
console.log("A soma de dois números é " + somarDoisNumeros(10, 10));
console.log("A divisão de dois números é " + dividirDoisNumeros(10, 10));

// Validações
if (somarDoisNumeros(10, 10) === 20) {
    console.log("A função somarDoisNumeros retorna 20.");
}
📖 O que colocar no main.js
  • Lógica específica do projeto
  • Regras de negócio
  • Validações específicas
  • Manipulação do DOM
  • Eventos e interações com o usuário

📥 Como importar arquivos JavaScript com script src

Para carregar um arquivo JavaScript externo, usamos a tag <script> com o atributo src.

IMPORTANDO SCRIPTS 

<!-- Carregando arquivos JavaScript -->

<!-- 1. Bibliotecas primeiro -->
<script type="text/javascript" src="./lib.js"></script>

<!-- 2. Arquivos que dependem das bibliotecas -->
<script type="text/javascript" src="./main.js"></script>

<!-- 3. Scripts que precisam de tudo carregado -->
<script type="text/javascript" src="./app.js"></script>
📖 A ordem dos scripts importa!
  • Bibliotecas devem ser carregadas antes dos arquivos que dependem delas
  • O navegador executa os scripts na ordem em que aparecem
  • Se o main.js usar uma função do lib.js, o lib.js deve ser carregado primeiro

🎯 Vantagens da organização em arquivos

📖 Código mais limpo

Cada arquivo tem uma responsabilidade clara, facilitando a leitura e manutenção.

♻️ Reutilização

As funções em lib.js podem ser usadas em vários projetos.

🔧 Manutenção fácil

Alterar uma função no lib.js atualiza todos os arquivos que a usam.

👥 Trabalho em equipe

Cada programador pode trabalhar em um arquivo diferente sem conflitos.

⏱️ Capítulos do vídeo

  • 00:00 — Como organizar um projeto JavaScript
  • 00:24 — Como importar arquivos JavaScript com script src
  • 00:36 — Criando o arquivo lib.js
  • 00:51 — Movendo funções para uma biblioteca JavaScript
  • 01:10 — Criando o arquivo main.js
  • 01:33 — Limpando o HTML e organizando o projeto
  • 01:54 — Chamando funções entre arquivos JavaScript
  • 02:20 — Testando o projeto no console
  • 02:29 — Conclusão

🎯 Conclusão

Organizar um projeto JavaScript em arquivos externos é uma prática essencial para qualquer programador que deseja escrever código profissional e escalável.

Neste artigo, você aprendeu:

  • ✅ Por que organizar código em arquivos externos
  • ✅ Como usar script src para carregar arquivos
  • ✅ O que é lib.js e main.js
  • ✅ Como reutilizar funções entre arquivos
  • ✅ A importância da ordem de carregamento dos scripts
  • ✅ Boas práticas de organização de projetos

💡 Lembre-se: Um código bem organizado é um código que pode crescer, ser mantido e compartilhado. A organização é o que separa um programador iniciante de um profissional.

🤔 O que você achou?

💬 Quer aprender JavaScript do ZERO? Comece agora a escrever seu primeiro código e seus fundamentos!

❓ FAQ: Perguntas Frequentes sobre Organização de Projetos JavaScript

Para deixar o projeto organizado e facilitar a manutenção do código.

É um arquivo onde normalmente ficam funções reutilizáveis.

É o arquivo responsável pela regra principal da aplicação.

Utilizando a tag <script src="arquivo.js">.

Sim. Você pode criar quantos arquivos forem necessários para organizar seu projeto.

Sim. Bibliotecas devem ser carregadas antes dos arquivos que dependem delas.

Sim, respeitando a ordem em que aparecem no HTML.

Sim, principalmente para entender os fundamentos antes de aprender módulos ES6.

Os módulos ES6 tornam a organização ainda mais robusta, mas seguem a mesma ideia de separar responsabilidades.

Com certeza. Ela ajuda a entender como JavaScript funciona por baixo dos frameworks.

São uma forma mais moderna de organizar código usando import e export.

Sim, mas é importante entender a diferença entre scripts tradicionais e módulos.

🎬 Assista ao Vídeos completo sobre Refatoração

O vídeo foi feito em Javascript mais o conceito pode ser utilizado em qualquer outra linguagem de programação..

🔗 Conecte-se Comigo

YouTube Site LinkedIn GitHub Instagram

💬 Você costuma escrever tudo no HTML ou já separa seus arquivos JavaScript? Escreva aqui nos comentários! 👇

#JavaScript #VanillaJS #CursoJavaScript #Programação #DesenvolvimentoWeb #FrontEnd #Programador #JavaScriptParaIniciantes #CleanCode #OrganizaçãoDeCódigo #BoasPráticas #MainJS #LibJS #Coding #RogerioPontesTI