tutoriais mais recente desenvolvimento web
 

JavaScript Saída


O JavaScript não tem qualquer built-in funções de impressão ou exibição.


Possibilidades de visualização de JavaScript

JavaScript consegue os dados "display" de diferentes maneiras:

  • Escrevendo em uma caixa de alerta, usando window.alert() .
  • Escrevendo para a saída HTML usando document.write() .
  • Escrevendo em um elemento HTML, usando innerHTML .
  • Escrevendo para o console do navegador, usando console.log() .

Usando window.alert()

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

Exemplo

<!DOCTYPE html>
<html>
<body>

<h1>My First Web Page</h1>
<p>My first paragraph.</p>

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

</body>
</html>
Tente você mesmo "

Usando document.write()

Para fins de teste, é conveniente usar document.write() :

Exemplo

<!DOCTYPE html>
<html>
<body>

<h1>My First Web Page</h1>
<p>My first paragraph.</p>

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

</body>
</html>
Tente você mesmo "

Usando document.write() depois de um documento HTML é totalmente carregado, irá apagar todo o HTML existente:

Exemplo

<!DOCTYPE html>
<html>
<body>

<h1>My First Web Page</h1>
<p>My first paragraph.</p>

<button onclick="document.write(5 + 6)">Try it</button>

</body>
</html>
Tente você mesmo "

O document.write() método só deve ser usado para testes.


usando innerHTML

Para acessar um elemento HTML, JavaScript pode usar o document.getElementById(id) método.

O id atributo define o elemento HTML. O innerHTML propriedade define o conteúdo HTML:

Exemplo

<!DOCTYPE html>
<html>
<body>

<h1>My First Web Page</h1>
<p>My First Paragraph</p>

<p id="demo"></p>

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

</body>
</html>
Tente você mesmo "

"Dados de exibição" em HTML, (na maioria dos casos), você irá definir o valor de um innerHTML propriedade.


Usando console.log()

No seu navegador, você pode usar o console.log() método para exibir dados.

Ative o console do navegador com o F12, e selecione "Console" no menu.

Exemplo

<!DOCTYPE html>
<html>
<body>

<h1>My First Web Page</h1>
<p>My first paragraph.</p>

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

</body>
</html>
Tente você mesmo "