Objetivos
    
    
    
        
Saída de Dados
    
    
        
            
                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. 
            
         
     
    
        Histórico de atualizações
        
     
    
        
            
                - 14/08/2025 - revisão 3 - Ajustes: pontuais, sintaxes e 'Objetivos'
 
                - 26/09/2024 - revisão 2 - Ajustes pontuais
 
                - 05/10/2023 - revisão 1 - Correção em layout, navegação e erros gramaticais
 
                - 31/05/2023 - versão inicial
 
            
         
     
    
            
            
                
                    
                    Os cursos oferecidos nesta página são cursos fornecidos por parceiros. Ao comprar um curso clicando
                em seu banner, você está ajudando a manter o projeto TutorialDev vivo. Os sites dos cursos parceiros utilizam cookies.