Carregando...

JavaScript em HTML

Antes, a acessibilidade tornava a página usável com estrutura. JavaScript adiciona comportamento sobre esse HTML: clique, atualizar texto, servidor. Esta lição fica no lado HTML: como a página carrega scripts com <script>, não um curso completo da linguagem.

Por que o carregamento de script importa

Navegadores pintam HTML primeiro. Scripts podem atrasar, falhar em silêncio com caminho errado ou esconder conteúdo que deveria estar na marcação. Saber onde colocar <script>, quando usar src e o que pertence ao HTML mantém a página honesta. Hábitos de acessibilidade continuam valendo.

Resposta direta

1) <script>…</script> para um trecho pequeno ou <script src="app.js"></script> para arquivo externo. 2) Prefira .js externo quando a lógica cresce. 3) Muitos colocam scripts perto do fim do body. 4) Mantenha texto e controles significativos em HTML. 5) Apps modernas podem usar type="module". 6) Este curso só cobre incorporação.

📊 Script wiring beginners use

Choice What it does Beginner tip
Inline script Code sits between script tags Fine for tiny demos; hard to reuse
External src Loads a .js file from a path Prefer as projects grow
End of body Script runs after markup above it Content can paint sooner
Behavior on HTML JS finds elements by id/selectors Elements must exist in the page
Content in HTML Text and controls stay in markup Page still makes sense if JS fails
Modules later type=module for modern apps Skip until you study JS deeply

Script inline com botão real

Página pequena: um <button> real com id, depois um <script> que ouve o clique e muda o texto. A marcação permanece acessível; o script só adiciona comportamento.

Inline button click

html 
<button id="hi" type="button">Say hi</button>
<script>
document.getElementById("hi").addEventListener("click", function () {
document.getElementById("hi").textContent = "Hello!";
});
</script>

Ler o demo inline

  • O botão é HTML real — útil sem JS
  • id dá um gancho estável ao script
  • O bloco script guarda poucas linhas JS inline
  • addEventListener liga comportamento; não substitui o botão
  • Sem script, permanece «Say hi»
  • Lição anterior: estrutura; aqui acoplar comportamento

Script externo com src

A mesma ideia escala melhor como arquivo separado. HTML só declara o caminho; a lógica vive em app.js. Os caminhos devem combinar com sua pasta.

External script src

html 
<button id="hi" type="button">Say hi</button>
<script src="app.js"></script>

Ler o padrão externo

  • src pede buscar e executar o arquivo
  • HTML fica curto; edite em um .js compartilhado
  • Caminho errado = não carrega — verifique Network
  • Coloque o script após o botão ou espere o elemento
  • Prefira isso a blocos enormes inline
  • Seguem lições HTML; JS profundo é outro curso

Como carregar o comportamento

  • Demo minúscula: inline junto ao controle pode bastar
  • Reutilizável ou que cresce: mova para app.js e src
  • Texto ou navegação crítica: HTML primeiro, depois JS
  • Sensação quebrada: verifique o caminho src antes
  • Acessibilidade: mantenha button/a/labels — não divs clicáveis
  • Estudo completo da linguagem: loops e frameworks num curso JS

Prática — HTML carrega o script

  1. Copie o demo inline; clique e confirme.
  2. Mova o listener para app.js, use src e confirme.
  3. Quebre o caminho (wrong.js); o botão continua «Say hi».
  4. Remova o script por completo; o HTML ainda faz sentido.
  5. Segundo botão com novo id e outro listener.
  6. Frase: HTML possui conteúdo e estrutura; script carrega comportamento opcional.
  7. Próxima lição: resumo curto de HTML.

Erros fáceis

  • Frases críticas só dentro de JavaScript
  • Typo ou pasta errada em src
  • Scripts enormes inline difíceis de manter
  • Executar o script antes do elemento existir
  • Substituir botões acessíveis por divs clicáveis
  • Tratar esta lição como currículo completo de JS
  • Esquecer hábitos de acessibilidade

Resumo

  • script carrega JavaScript numa página HTML
  • Inline para demos pequenas; src para .js externos ao crescer
  • Coloque scripts para o conteúdo aparecer e permanecer usável
  • Mantenha conteúdo real e controles acessíveis em HTML
  • Acessibilidade era estrutura; esta lição é ligação de comportamento
  • Seguinte: um resumo curto de HTML do caminho até aqui

🧠 Teste Seu Conhecimento

Pronto para Começar

Teste Seu Conhecimento

Desafie-se com este questionário interativo e veja o quão bem você entende o tópico

❓
5
Perguntas
🎯
70%
Para Passar
♾️
∞
Tempo
🔄
∞
Tentativas

📝 Instruções

  • Leia cada pergunta cuidadosamente
  • Selecione a melhor resposta para cada pergunta
  • Você pode refazer o quiz quantas vezes quiser
  • Seu progresso será mostrado no topo
Tópico 58 de 68
Html Tutorial