5 maneiras de exibir dados com Javascript

JavaScript pode "exibir" dados de 5 maneiras diferentes. Esta "exibição" chamamos de Output (Do inglês: saída), onde temos literalmente a conversão de alguma informação em dados de formato texto. Para estes resultados, podemos usar até 5 propriedades:

• Escrevendo dentro do HTML com a propriedade innerHTML
• Escrevendo dentro do HTML com a saída do document.write()
• Exibindo uma caixa de alerta (alert box) com window.alert()
• Escrevendo dentro do console do browser com console.log()
• Enviando os dados da página para sua impressora

window.alert()

Você pode usar .alert() para exibir uma caixa de alerta com os seus dados.

<h1>BlackBeltJS</h1>
<p>Aprendendo Javascript</p>

<script>
  window.alert(5 + 6);
</script>

Você pode não usar o objeto window que também funciona. Em JavaScript, window é um objeto de escopo global, o que significa que variáveis, propriedades e métodos por padrão pertencem ao objeto de janela. Especificar a palavra-chave window é opcional.

console.log()

O método console.log() é utilizado para fins de depuração.
Os dados sempre serão exibidos no console do navegador.

<h1>BlackBeltJS</h1>
<p>Aprendendo Javascript</p>

<script>
  console.log (5 + 6);
</script>

ACESSANDO O CONSOLE
Para acessar o console, dentro da tela do navegador, clique com o botão direito do mouse e depois em INSPECIONAR > CONSOLE.

ATALHOS
Geral: Pressione a tecla F12
Microsoft: Ctrl + Shift + J
MacOS: Command + Option + J

document.write()

Esta é a maneira mais comum para fins de testes.
É conveniente usar o método document.write() para "imprimir" dados em um documento ou testar uma função apenas, pois ao usar document.write() após o carregamento de um arquivo HTML excluirá todo o conteúdo existente.

<h1>BlackBeltJS</h1>
<p>O parágrafo e o heading serão excluídos</p>

<script>
  document.write (5 + 6);
</script>

innerHTML

Para acessar um elemento HTML você pode usar o método document.getElementById("id") onde o atributo id define o elemento HTML a ser localizado e a propriedade .innerHTML define o conteúdo HTML que deve ser inserido dentro da tag especificada.

<p id="resultado"></p>

<script>
  document.getElementById("resultado").innerHTML = 5 + 6;
</script>

Acessar o DOM usando a propriedade .innerHTML ** para modificar um elemento é uma maneira comum de exibir ou imprimir (saída de dados) informações. Neste caso, o parágrafo com identificador "soma" receberá o resultado da soma de "5+6**" dentro do parágrafo que terá o resultado desta operação.

window.print()

Este método é usado para imprimir (literalmente) o conteúdo da janela do seu navegador. Você pode utilizar este método para enviar para sua impressora os dados do seu site ou salvar o resultado da tela em PDF, por exemplo.

<h1>BlackBeltJS</h1>
<p>Método window.print()</p>

<p>Clique no botão para imprimir o conteúdo da página.</p>

<button onclick="window.print()"> Imprimir </button>

ESSE CONTEÚDO FOI ÚTIL?
Retribua e siga no Instagram: https://www.instagram.com/blackbeltjs/