Saída de JavaScript

Possibilidades de exibição de JavaScript

JavaScript pode "exibir" dados de maneiras diferentes:

Escrevendo em 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 id atributo 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>

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

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

    </body>
    </html>

Veja o resultado:

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>

Veja o resultado:

O uso de document.write () após o carregamento de um documento HTML excluirá todos os HTML existentes:

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>

Veja o resultado clicando no botão:

O método document.write() deve ser usado apenas para tete.

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>

Se abriu uma janela de alerta axibindo a soma entre 5+6 com o resultado igual à 11, então oscript foi executado com sucesso!

Você pode pular a window palavra - chave.

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 window palavra-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 os dados.

Você aprenderá mais sobre depuração no capítulo posteior.

Exemplo:


    <!DOCTYPE html>
    <html>
    <body>

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

    </body>
    </html>

Se abrir o console do navegador verá o resultado da soma entre 5+6

Impressão JavaScript

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

Você não pode acessar dispositivos de saída de 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>

Fonte: w3schools