Javascript: gerando saídas (output)

Neste artigo, você aprenderá como gerar saída usando JavaScript de maneira simples e clara para iniciantes.

Gerar saída em JavaScript

Em alguns casos, pode ser necessário gerar o código JavaScript. Por exemplo, você pode querer ver o valor de uma variável ou escrever uma mensagem no console do navegador para ajudá-lo a depurar problemas no código JavaScript em execução e assim por diante.

Em JavaScript, existem várias maneiras diferentes de gerar saída, incluindo gravar a saída em uma janela ou console do navegador, exibir a saída em uma caixa de diálogo, gravar a saída em um elemento HTML e muito mais. Festival.

Gravar saída no console do navegador

Você pode facilmente enviar mensagens ou gravar dados no console do navegador usando o método console.log(). Essa é uma maneira simples, mas muito poderosa, de gerar uma saída detalhada. Aqui está um exemplo:

// Imprimindo uma mensagem de texto simples
console.log("Olá Mundo!"); // Imprime: Olá Mundo!
// Imprimindo o valor de uma variável
var x = 10;
var y = 20;
var soma = x + y;
console.log(soma); // Imprime: 30

Dica: Para acessar o console do navegador da Web, primeiro abra as ferramentas do desenvolvedor pressionando a tecla F12 no teclado e, em seguida, clique na guia Console. Parece com a captura de tela aqui.

Mostrar saída na caixa de diálogo de alerta

Então, você também pode usar caixas de diálogo de alerta para exibir mensagens ou dados de saída para o usuário. As caixas de diálogo de alerta são criadas usando o método alert(). Aqui está um exemplo:

// Exibindo uma mensagem de texto simples
alert("Olá Mundo!"); // Saída: Olá Mundo!
// Exibindo o valor de uma variável
var x = 10;
var y = 20;
var soma = x + y;
alert(soma); // Saída: 30

Gravar a saída na janela do navegador

Você pode usar o método document.write() para gravar conteúdo no documento atual somente enquanto o documento está sendo analisado. Aqui está um exemplo:

// Imprimindo uma mensagem de texto simples
document.write("Olá Mundo!"); // Imprime: Olá Mundo!
// Imprimindo o valor de uma variável
var x = 10;
var y = 20;
var soma = x + y;
document.write(soma); // Imprime: 30

Então, se você usar o método document.write() após o carregamento da página, ele substituirá todo o conteúdo existente nesse documento. Confira os exemplos a seguir:

<h1>Este é um título</h1>
<p>Este é um parágrafo de texto.</p>
<button type="button" onclick="document.write('Olá Mundo!')">Clique aqui</button>

Inserir saída no elemento HTML

Portanto, você também pode gravar ou incorporar a saída em um elemento HTML usando a propriedade innerHTML do elemento. No entanto, antes de escrever a saída, primeiro precisamos selecionar o elemento usando um método como getElementById(), conforme mostrado no exemplo a seguir:

<p id="greet"></p>
<p id="result"></p>
<script>
// Escrevendo uma string de texto dentro de um elemento
document.getElementById("greet").innerHTML = "Olá Mundo!";
// Escrevendo o valor de uma variável dentro de um elemento
var x = 10;
var y = 20;
var soma = x + y;
document.getElementById("result").innerHTML = soma;
</script>

Leia também: Javascript: guia sobre variáveis