Saida de Dados

O JavaScript pode apresentar dados de diferentes maneiras:

  • Escrevendo em um elemento com a propriedade innerHTML.
  • Escrevendo na saída Html com document.write().
  • Escrevendo em uma caixa de alerta com window.alert().
  • Escrevendo no console do navegador com console.log().

Propriedade innerHTML

A propriedade innerHTML do elemento encontrado com document.getElementById() atribui e altera o seu conteúdo.

<html>
   <body>
      <h1>Minha Primeira Página Web</h1>
      <p>Meu Primeiro Parágrafo</p>
      <p id="demo"></p>
      <script>
         document.getElementById("demo").innerHTML = 5 + 6;
      </script>
   </body>
</html>

É uma maneira bastante comum de exibir dados em html, pois aceita scripts-html, que são interpretados e tornados elementos.

<html>
   <body>
      <h1>Minha Primeira Página Web</h1>
      <p>Meu Primeiro Parágrafo</p>
      <p id="demo"></p>
      <script>
         document.getElementById("demo").innerHTML =
            "<div><p></p><p></p></div>";
      </script>
   </body>
</html>

Método document.write()

O método document.write() é usualmente utilizado para testes, pois limpa todo conteúdo existente ao ser invocado pela primeira vez no código.

<html>
   <body>
      <h1>Minha Primeira Página Web</h1>
      <p>Meu Primeiro Parágrafo</p>
      <script>
          document.write(5 + 6);
      </script>
   </body>
</html>

No exemplo a seguir tem cabeçalho, parágrafo e botão. Ao ser clicado o botão o evento onclick é disparado e todo o conteúdo é apagado antes de ser incluído o novo.

<html>
   <body>
      <h1>Minha Primeira Página Web</h1>
      <p>Meu Primeiro Parágrafo</p>
      <button type="button" onclick="document.write(5 + 6)">Clique-me</button>
   </body>
</html>

Método window.alert ()

Você pode usar uma caixa de alerta para exibir dados.

<html>
   <body>
      <h1>Minha Primeira Página Web</h1>
      <p>Meu Primeiro Parágrafo</p>
      <script>
         window.alert(5 + 6);
      </script>
   </body>
</html>

Método console.log ()

Para fins de depuração, você pode usar o método log()  do objeto-global console para exibir dados.

Futuramente apresentaremos mais sobre depuração.

<html>
   <body>
      <h1>Minha Primeira Página Web</h1>
      <p>Meu Primeiro Parágrafo</p>
      <script>
         console.log(5 + 6);
      </script>
   </body>
</html>