Clique sobre os tópicos listados abaixo para navegar até o conteúdo desejado.

  1. Uso de Alert
  2. Uso de Log
  3. Uso de innerHTML

A saída de dados em JS pode ser feita utilizando as funções alert, log ou pelo atributo innerHTML de uma tag HTML. A entrada de dados em JavaScript é feito por intermédio do uso de HTML que não será abordado neste tutorial.

Frameworks que utilizam JavaScript como linguagem principal ou de extensão podem ter formas diferentes das apresentada abaixo para saída de dados.

A função alert tem o objetivo de exibir uma mensagem em pop-up contendo uma informação passada como argumento para exibição. O uso dessa função é feita utilizando integração com HTML.

Sintaxe
alert(message);
Onde
message: mensagem ou valor que desejamos exibir
Exemplo 1
<!DOCTYPE html>
  <html> 
  <head>
        <script>
            alert('uma mensagem de alerta qualquer');
        <script>
  <head>
  <body>
    <!-- corpo html -->
  </body>
 </html>
Saída
-

Para a executar o exemplo 1 mostrado acima em compiladores/interpretadores online, os mesmos devem possuir suporte a HTML e javascript como JavaScript Playground.

Com a função log, podemos exibir informações na aba Console da Ferramentas de Desenvolvedor de um navegador Web. Quando usados mais de um valor para exibição, esses valores são separados tabulações.

Sintaxe
console.log(value);

console.log(value1, value2, valueN);
Onde
value1..N: mensagem ou valor que desejamos exibir
Exemplo 2
console.log('uma string qualquer');
Exemplo 3
<html> 
  <head>
        <script>
            console.log('uma string qualquer');
        <script>
  <thead>
  <body>
    <!-- corpo html -->
  </body>
 <html>

Saída
uma string qualquer

O uso da função log será utilizada ao longo do tutorial, porém sem a intergração com HTML para facilitar a comprenssão dos exemplos. Compiladores online também serão utilizados para agilizar o estudo.

Utilizando o atributo innerHTML, que define o conteúdo de um elemento HTML, podemos exibir informações na própria página Web em que um código JS está sendo executado. Tanto HTML quanto DOM não serão vistos neste tutorial.

Sintaxe
document.getElementById(id_elemento).innerHTML = <valor>
Exemplo 4
<html> 
  <head>
  <head>
  <body>
    <p id="mdiv"> </p> <!-- onde o conteudo será inserido -->
  
  <script>
    document.getElementById("mdiv").innerHTML = "uma string qualquer";
  </script>
  <body>
 </html>
Saída
-

Para a executar o exemplo 1 mostrado acima em compiladores/interpretadores online, os mesmos devem possuir suporte a HTML e javascript como JavaScript Playground.

  1. 14/08/2025 - revisão 3 - Ajustes: pontuais, sintaxes e 'Objetivos'
  2. 26/09/2024 - revisão 2 - Ajustes pontuais
  3. 05/10/2023 - revisão 1 - Correção em layout, navegação e erros gramaticais
  4. 31/05/2023 - versão inicial