Interno externo JavaRoteiro: Aprenda com o Exemplo

Por: James Hartmann James Hartmann
Hours Atualização do

⚡ Resumo Inteligente

Interno e externo JavaEste artigo descreve as duas opções de posicionamento suportadas para código de script dentro de um projeto web. Ele compara ambas as abordagens, apresenta exemplos práticos, explica a vinculação correta com async e defer e indica quando cada opção oferece melhor manutenção e desempenho.

  • 📄 Colocação interna: Code Fica localizado entre tags de script dentro do documento HTML e é carregado com a página que o contém.
  • 🗂️ Colocação externa: Code reside em um arquivo .js separado, referenciado através do atributo src, de modo que várias páginas compartilham uma única fonte.
  • 🔗 Regra de vinculação: Uma tag de script externa deve sempre ser fechada, e o caminho src é resolvido em relação ao documento HTML, a menos que um caminho completo seja fornecido.
  • ⚙️ Controle de carregamento: O atributo `defer` executa o arquivo após a conclusão da análise do HTML, enquanto o atributo `async` o executa assim que o download termina.
  • 🚀 Benefícios do armazenamento em cache: Os arquivos externos são armazenados em cache pelo navegador uma única vez e reutilizados em todas as páginas que os referenciam.
  • 🧭 Critério de seleção: Mantenha a lógica específica de cada página internamente e mova a lógica compartilhada ou extensa para um arquivo externo para facilitar a depuração.
  • 🚫 Manipuladores embutidos: Os manipuladores baseados em atributos, como o onclick, misturam marcação com comportamento e devem ser substituídos por addEventListener.
Saiba Mais

Interno e externo JavaScript

O que são internos e externos? JavaRoteiro?

Você pode usar JavaCrie scripts de código de duas maneiras.

  1. Você pode incluir o JavaCódigo de script internamente em seu documento HTML si.
  2. Você pode manter o JavaCódigo de script em um arquivo externo separado e aponte para esse arquivo no seu documento HTML.

Ambas as implementações executam exatamente a mesma linguagem e produzem o mesmo resultado no navegador. A diferença reside em onde o código-fonte é armazenado, como o navegador o baixa e na facilidade com que o código pode ser reutilizado e mantido em todo o site.

O que é interno JavaRoteiro?

Interno JavaUm script é um código escrito diretamente dentro de um par de tags <script> no arquivo HTML. O navegador lê a marcação de cima para baixo e, quando encontra a tag <script>, executa as instruções imediatamente, sem nenhuma solicitação de rede adicional.

Temos usado JS interno até agora. Aqui está uma amostra –

<html>
<head>
  <title>My First JavaScript code!!!</title>
  <script type="text/javascript">
    // Create a Date Object
    var day = new Date();
    // Use getDay function to obtain todays Day.
    // getDay() method returns the day of the week as a number like 0 for Sunday, 1 for Monday,….., 5
    // This value is stored in today variable
    var today = day.getDay();
    // To get the name of the day as Sunday, Monday or Saturday, we have created an array named weekday and stored the values
    var weekday = new Array(7);
    weekday[0]="Sunday";
    weekday[1]="Monday";
    weekday[2]="Tuesday";
    weekday[3]="Wednesday";
    weekday[4]="Thursday";
    weekday[5]="Friday";
    weekday[6]="Saturday";
    // weekday[today] will return the day of the week as we want
    document.write("Today is " + weekday[today] + ".");
  </script>
</head>
<body>
</body>
</html>

Saída:

Today is Wednesday.

O dia impresso muda de acordo com o relógio do sistema do visitante, porque getDay retorna um número de 0 para domingo até 6 para sábado, e esse número é usado como um índice na matriz de dias da semana.

O que é externo JavaRoteiro?

Você planeja exibir a data e a hora atuais em todas as suas páginas da web. Suponha que você escreveu o código e o copiou para todas as suas páginas (digamos, 100). Mas, posteriormente, você deseja alterar o formato em que a data ou a hora são exibidas. Nesse caso, você terá que fazer alterações em todas as 100 páginas. Essa será uma tarefa muito demorada e difícil.

Então, salve o JavaScript código em um novo arquivo com a extensão .js. Em seguida, adicione uma linha de código em todas as suas páginas da web para apontar para o seu arquivo .js assim:

<script type="text/javascript" src="currentdetails.js"></script>

ObservaçãoPresume-se que o arquivo .js e todas as suas páginas web estejam na mesma pasta. Se o arquivo external.js estiver em uma pasta diferente, você precisa especificar o caminho completo para o arquivo no atributo src. </script> A tag é obrigatória mesmo que o elemento não tenha conteúdo, porque uma tag de script de fechamento automático não é HTML válida e o restante da página seria engolido pelo elemento não finalizado.

Este é o código que você deve inserir dentro do arquivo currentdetails.js:

var currentDate = new Date();
var day = currentDate.getDate();
var month = currentDate.getMonth() + 1;
var monthName;

var hours = currentDate.getHours();
var mins = currentDate.getMinutes();
var secs = currentDate.getSeconds();
var strToAppend;
if (hours >12 )
{
	hours1 = "0" + (hours - 12);
strToAppend = "PM";
}
else if (hours <12)
{
	hours1 = "0" + hours;
	strToAppend = "AM";
}
else
{
	hours1 = hours;
	strToAppend = "PM";
}

if(mins<10)
mins = "0" + mins;
if (secs<10)
	secs = "0" + secs;

switch (month)
{
	case 1:
		monthName = "January";
		break;
	case 2:
		monthName = "February";
		break;
	case 3:
		monthName = "March";
		break;
	case 4:
		monthName = "April";
		break;
	case 5:
		monthName = "May";
		break;
	case 6:
		monthName = "June";
		break;
	case 7:
		monthName = "July";
		break;
	case 8:
		monthName = "August";
		break;
	case 9:
		monthName = "September";
		break;
	case 10:
		monthName = "October";
		break;
	case 11:
		monthName = "November";
		break;
	case 12:
		monthName = "December";
		break;
}

var year = currentDate.getFullYear();
var myString;
myString = "Today is " + day +  " - " + monthName + " - " + year + ".<br />Current time is " + hours1 + ":" + mins + ":" + secs + " " + strToAppend + ".";
document.write(myString);

Este é o seu arquivo currentdetails.js. Não se preocupe com as longas linhas de código. Você aprenderá a programar em breve. Faça alterações no seu documento HTML da seguinte forma:

<html>
	<head>
	   <title>My External JavaScript Code!!!</title>
	   <script type="text/javascript" src="currentdetails.js">
	   </script>
	</head>
	<body>
	</body>
</html>

⚠️ Aviso: O script legado acima adiciona um zero ao início de cada hora, portanto, 11 da manhã é exibido como 011. Ele também atribui hours1 Sem declará-la, cria-se uma variável global implícita e ocorre um erro no modo estrito. A versão corrigida abaixo resolve ambos os problemas.

Uma reescrita moderna do mesmo arquivo é mais curta, declara todas as variáveis ​​e preenche os valores corretamente:

// currentdetails.js - corrected modern version
const now = new Date();

const months = ["January", "February", "March", "April", "May", "June",
                "July", "August", "September", "October", "November", "December"];

const hours24 = now.getHours();
const suffix  = hours24 >= 12 ? "PM" : "AM";
const hours12 = String(hours24 % 12 || 12).padStart(2, "0");
const mins    = String(now.getMinutes()).padStart(2, "0");
const secs    = String(now.getSeconds()).padStart(2, "0");

const message = "Today is " + now.getDate() + " - " + months[now.getMonth()] +
                " - " + now.getFullYear() + ". Current time is " +
                hours12 + ":" + mins + ":" + secs + " " + suffix + ".";

document.getElementById("stamp").textContent = message;

Exemplo de saída:

Today is 29 - July - 2026. Current time is 09:05:07 AM.

ARTIGOS RELACIONADOS

Como vincular um recurso externo JavaArquivo de script corretamente

Três detalhes determinam se um arquivo externo será carregado: o caminho escrito no atributo src, a posição da tag script no documento e o atributo loading aplicado a ela.

Os caminhos são resolvidos em relação ao documento HTML, a menos que uma barra inicial ou um endereço completo seja fornecido.

Valor de origem Significado Resolve-se a
currentdetails.js Mesma pasta que a página HTML /pages/currentdetails.js
js/currentdetails.js Subpasta da pasta atual /pages/js/currentdetails.js
../currentdetails.js Uma pasta acima da atual. /currentdetails.js
/assets/js/currentdetails.js Caminho absoluto a partir da raiz do site /assets/js/currentdetails.js

O atributo `loading` controla quando o navegador para de analisar o HTML para executar o arquivo. A tabela abaixo resume os três comportamentos disponíveis.

Atributo Baixar Momento da Execução Ordem preservada
nenhum Blocos de análise HTML Imediatamente após o download Sim
adiar Paralelo com a análise sintática Após o documento ser analisado Sim
async Paralelo com a análise sintática Assim que o download terminar Não 
<!-- Recommended for scripts that read the DOM -->
<script src="js/currentdetails.js" defer></script>

<!-- Recommended for independent third party scripts -->
<script src="js/analytics.js" async></script>

<!-- Modern module syntax, deferred by default -->
<script type="module" src="js/app.js"></script>

💡 Dica: O type="text/javascript" O atributo é opcional em HTML5 e pode ser omitido. Mantenha-o apenas ao dar suporte a navegadores muito antigos ou substitua-o por type="module" ao usar instruções de importação e exportação.

Interno vs. Externo JavaRoteiro: Principais Diferenças

A comparação abaixo coloca ambas as colocações lado a lado, considerando os fatores que normalmente influenciam a escolha.

Fator Interno JavaScript Externo JavaScript
Local de armazenamento Dentro do arquivo HTML Arquivo separado com extensão .js
Reutilize em várias páginas. Requer copiar para todas as páginas. Um arquivo referenciado por cada página
Cache do navegador Baixado novamente a cada página Armazenado em cache uma vez e reutilizado.
Esforço de manutenção Alto quando o código é compartilhado. Baixo, um arquivo para editar
Requisição HTTP adicional Não Sim, um por arquivo.
depuração Mais difícil em um arquivo HTML longo Fica mais fácil com nomes de arquivo e números de linha claros.
Mais adequado para Lógica curta específica da página Bibliotecas compartilhadas e scripts longos

Quando usar interno e externo JavaScript Code?

Se você tiver apenas algumas linhas de código específicas para uma página da web específica, é melhor manter seu JavaCódigo de script internamente no seu documento HTML.

Por outro lado, se o seu JavaO código de script é usado em muitas páginas da web, então você deve considerar mantê-lo.ping Mantenha seu código em um arquivo separado. Nesse caso, se você quiser fazer alguma alteração no seu código, basta modificar um único arquivo, o que facilita a manutenção. Se o seu código for muito extenso, também é melhor mantê-lo em um arquivo separado. Isso facilita a depuração.

Uma regra prática para iniciantes é um limite de aproximadamente dez linhas. Qualquer coisa mais curta e específica da página pode permanecer interna, enquanto qualquer coisa mais longa ou compartilhada deve ser armazenada em um arquivo externo.

Na linha JavaRoteiro e por que ele deve ser evitado

Uma terceira forma de execução ocorre em páginas mais antigas, onde o código é escrito diretamente dentro de um atributo HTML. Embora ainda funcione, ele mistura estrutura com comportamento e não pode ser armazenado em cache, reutilizado ou coberto por uma política de segurança de conteúdo rigorosa.

<!-- Inline handler: works, but avoid it -->
<button onclick="alert('Clicked')">Click me</button>

<!-- Preferred: behaviour attached from a script -->
<button id="greet">Click me</button>

<script>
  document.getElementById("greet").addEventListener("click", () => {
      alert("Clicked");
  });
</script>

Assim que você se sentir à vontade para inserir scripts, continue com JavaMétodos de matriz de script, estude loops em JavaScripte trabalhe através do prático JavaExemplos de código de scriptOs arquivos externos também facilitam muito o gerenciamento da lógica de armazenamento do navegador, como por exemplo: cookies em JavaScript.

Perguntas Frequentes

Coloque-o logo antes da tag de fechamento do corpo (</body>) ou no cabeçalho (</head>) com o atributo `defer`. Ambas as opções permitem que o HTML seja renderizado primeiro, garantindo que os elementos existam quando o código for executado.

Sim. Adicione uma tag `<script>` por arquivo. Sem o uso de `async`, o navegador os executa na ordem em que aparecem, portanto, coloque os arquivos que definem funções compartilhadas antes dos arquivos que as chamam.

As causas mais comuns são um caminho de origem incorreto, a ausência da tag de fechamento do script ou um nome de arquivo com capitalização diferente. Abra o painel de rede do navegador e procure por uma resposta 404.

Apenas na primeira visita, quando é feita uma requisição extra. Depois disso, o arquivo é servido a partir do cache do navegador, o que geralmente é mais rápido do que repetir o mesmo código em todas as páginas.

A maioria dos assistentes retorna um único arquivo HTML com tags de script internas, pois isso significa que ele funciona sem configuração. Solicite explicitamente um arquivo .js separado quando precisar de uma estrutura pronta para produção.

Arquivos externos com o atributo async são adequados para widgets de IA de terceiros, como chatbots, porque são carregados independentemente e nunca bloqueiam a renderização da página circundante.

Resuma esta postagem com: