Saída JavaScript

Índice

    Mostrar índice

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 método document.getElementById(id).

O atributo id define o elemento HTML. A propriedade innerHTML 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>

Experimente você mesmo →

<!DOCTYPE html>
<html>
<body>

<h2>My First Web Page</h2>
<p>My First Paragraph.</p>

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

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

</body>
</html>

Alterando 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>

Experimente você mesmo →

<!DOCTYPE html>
<html>
<body>

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

<p>Never call document.write after the document has finished loading.
It will overwrite the whole document.</p>

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

</body>
</html>

Usar 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>

Experimente você mesmo →

<!DOCTYPE html>
<html>
<body>

<h2>My First Web Page</h2>
<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>

Experimente você mesmo →

<!DOCTYPE html>
<html>
<body>

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

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

</body>
</html>

Você pode pular a palavra-chave window.

Em JavaScript, o objeto window é o objeto de escopo global. Isso significa que variáveis, propriedades e métodos por padrão pertencem ao objeto janela. Isso também significa que especificar a palavra-chave window é opcional:

Exemplo

<!DOCTYPE html>
<html>
<body>

<h1>My First Web Page</h1>
<p>My first paragraph.</p>
 
<script>
alert(5 + 6);
</script>

</body>
</html>

Experimente você mesmo →

<!DOCTYPE html>
<html>
<body>

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

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

</body>
</html>

Usando console.log()

Para fins de depuração, você pode chamar o método console.log() 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>

Experimente você mesmo →

<!DOCTYPE html>
<html>
<body>

<h2>Activate Debugging</h2>

<p>F12 on your keyboard will activate debugging.</p>
<p>Then select "Console" in the debugger menu.</p>
<p>Then click Run again.</p>

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

</body>
</html>

Impressão JavaScript

JavaScript não possui nenhum objeto ou método de impressão.

Você não pode acessar dispositivos de saída em JavaScript.

A única exceção é que você pode chamar o método window.print() em o navegador para imprimir o conteúdo da janela atual.

Exemplo

<!DOCTYPE html>
<html>
<body>

<button onclick="window.print()">Print this page</button>

</body>
</html>

Experimente você mesmo →

<!DOCTYPE html>
<html>
<body>

<h2>The window.print() Method</h2>

<p>Click the button to print the current page.</p>

<button onclick="window.print()">Print this page</button>

</body>
</html>