25.03.2025

Exibindo Código HTML Apenas Quando o JavaScript Está Ativado

Resposta Rápida

Para lidar com casos em que o JavaScript está ativado, você pode adicionar conteúdo dinamicamente assim:

document.addEventListener('DOMContentLoaded', (event) => {
  document.body.innerHTML += '<strong>O JavaScript está ativado!</strong>';
});

Esse código será executado logo após o DOM ser carregado, adicionando informações de que o JavaScript está funcionando. Este método é altamente eficaz e rápido para demonstrar os resultados da execução de scripts.

Considere a Compatibilidade e Funcionalidade

Implementando Exibição Condicional de Conteúdo

Para gerenciar a visibilidade de elementos quando o JavaScript está ativado, você pode usar CSS:

.jsOff {
  display: none;
}

Você pode atribuir a classe .jsOff a qualquer elemento que precise ocultar e removê-la quando o JavaScript estiver ativado:

document.documentElement.classList.remove('jsOff');

Combinando <noscript> e <style>

Usar as tags style e noscript juntas permite que você forneça estilos alternativos:

<noscript>
  <style>
    .jsOnly {
      display: none;
    }
  </style>
</noscript>

Elementos marcados com a classe .jsOnly serão ocultados quando o JavaScript estiver desativado e exibidos quando ativados, funcionando essencialmente como um 'sim-script'.

Conteúdo Dinâmico: Carregamento Sob Demanda

O modelo de manipulação de eventos do JavaScript permite que você carregue conteúdo sob demanda:

window.onload = function() {
  document.querySelector('.jsOnly-content-placeholder').innerHTML = '<div>Conteúdo interativo carregado</div>';
};

Visualização

Você pode visualizar como o JavaScript funciona usando a analogia de um semáforo 🚦:

Sinal	Quando	Ação
🟢 Verde	Carregando scripts	<script> tags são executadas
🔴 Vermelho	Erro de Script	Conteúdo alternativo <noscript> sem JavaScript

Assim, <script> complementa <noscript>, assim como o verde complementa o vermelho em um semáforo. 🚦

Priorizando Acessibilidade e Estrutura

É importante incluir <noscript> para casos em que o JavaScript não está disponível. Uma estrutura HTML clara ajudará a organizar o conteúdo de forma eficaz.

Melhorando o Desempenho e a Experiência do Usuário

O JavaScript deve pré-carregar o conteúdo necessário para garantir uma interação suave e melhorar a experiência do usuário. As páginas devem carregar rapidamente e sem atrasos.

Evite Métodos Obsoletos

O método document.write() é considerado obsoleto, portanto, é preferível usar métodos como createElement e appendChild para criar uma estrutura confiável e garantir uma melhor escalabilidade.

Recursos Úteis

1. <noscript>: O Elemento Noscript — HTML: Linguagem de Marcação de Hipertexto | MDN — Documentação do MDN sobre <noscript>.
2. <h1>–<h6>: Elementos de Títulos de Seção — HTML: Linguagem de Marcação de Hipertexto | MDN — Informações sobre a estrutura de conteúdo em HTML.
3. A Tag noscript em HTML — W3Schools — Tutorial e exemplos de uso do <noscript>.
4. Padrão HTML — O Elemento script — Especificação oficial do HTML que descreve <script>.
5. Noções Básicas sobre Trabalhar com Scripts no Carregamento | Artigos | web.dev — Técnicas e melhores práticas para o carregamento de scripts.
6. html — Como detectar se o JavaScript está desativado? — Stack Overflow — Discussão sobre métodos para detectar JavaScript desativado.

Video

Navigation