Saída JavaScript
Possibilidades de exibição de JavaScript
JavaScript pode "exibir" dados de diferentes maneiras:
- Escrevendo em um elemento HTML, usando
innerHTML. - Escrevendo na saída HTML usando
document.write(). - Escrevendo em uma caixa de alerta, usando
window.alert(). - Escrevendo no console do navegador, usando
console.log().
Usando innerHTML
Para acessar um elemento HTML, JavaScript pode usar o document.getElementById(id)método.
O idatributo define o elemento HTML. A 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>
Alterar a propriedade innerHTML de um elemento HTML é uma maneira comum de exibir dados em HTML.
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>
O uso de document.write() após o carregamento de um documento HTML excluirá todo o HTML existente :
Exemplo
<!DOCTYPE html>
<html>
<body>
<h1>My First Web Page</h1>
<p>My first paragraph.</p>
<button type="button" onclick="document.write(5 + 6)">Try it</button>
</body>
</html>
O método document.write() deve ser usado apenas para teste.
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>
Você pode pular a palavra- windowchave.
Em JavaScript, o objeto de janela é o objeto de escopo global, o que significa que variáveis, propriedades e métodos por padrão pertencem ao objeto de janela. Isso também significa que especificar a windowpalavra-chave é opcional:
Exemplo
<!DOCTYPE html>
<html>
<body>
<h1>My First Web Page</h1>
<p>My first paragraph.</p>
<script>
alert(5 + 6);
</script>
</body>
</html>
Usando console.log()
Para fins de depuração, você pode chamar o console.log()método no navegador para exibir dados.
Você aprenderá mais sobre depuração em um capítulo posterior.
Exemplo
<!DOCTYPE html>
<html>
<body>
<script>
console.log(5 + 6);
</script>
</body>
</html>
Impressão JavaScript
JavaScript não tem nenhum objeto de impressão ou métodos de impressão.
Você não pode acessar dispositivos de saída do JavaScript.
A única exceção é que você pode chamar o window.print()método no navegador para imprimir o conteúdo da janela atual.
Exemplo
<!DOCTYPE html>
<html>
<body>
<button onclick="window.print()">Print this page</button>
</body>
</html>