5 maneiras de exibir dados com Javascript
Tags: javascript, webdev, beginners, programming
Published: 2022-05-12 13:44:56

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/](https://www.instagram.com/blackbeltjs/)**