Javascript Por que o console.log(d) aparece apenas no console do navegador e não na tela?

Eli Almeida · 23 de janeiro

Por que o console.log(d) aparece apenas no console do navegador e não na tela da página HTML?

Estou usando o visual studio code e quando rodo o código abaixo, essa parte aqui console.log(d) não aparece na tela. Ela aparece apenas no console do navegador tem que apertar f12.

Gostaria de saber o motivo e se há algum programa que execute também console.log(d) e que apareça na tela.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
<h1>Iniciando estudos com dom</h1>
    <p>Aqui vai o resultado</p>
    <p> Aprendendo a usar o <strong>DOM</strong> em javascript</p>
    <div id = "msg">  Clique em mim</div>
    <script>
       var corpo = window.document.body
       var p1 = window.document.getElementsByTagName('p')[1]
       var d = window.document.getElementById ('msg')
       d.style.background = 'green'
     d.innerText = 'Olá!'
console.log(d)
     </script>
</body>
</html>

tchagas · 24 de janeiro

Você está usando console.log(d) que vai aparecer somente no navegador, você tem que usar alert() para ai sim aparecer o popup de alerta.

<script>
   var corpo = window.document.body
   var p1 = window.document.getElementsByTagName('p')[1]
   var d = window.document.getElementById('msg')
   d.style.background = 'green'
   d.innerText = 'Olá!'
   
   // Para ver seu texto 
   alert('Texto da div: ' + d.innerText)
</script>

Eli Almeida · 26 de janeiro

@tchagas , gostaria de saber por que usar console.log(d) só aparece no navegador e não na tela.

Estou usando o visual studio code e o corpo do código é :

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
<h1>Iniciando estudos com dom</h1>
    <p>Aqui vai o resultado</p>
    <p> Aprendendo a usar o <strong>DOM</strong> em javascript</p>
    <div id = "msg">  Clique em mim</div>
    <script>
       var corpo = window.document.body
       var p1 = window.document.getElementsByTagName('p')[1]
       var d = window.document.getElementById ('msg')
       d.style.background = 'green'
     d.innerText = 'Olá!'
console.log(d)
     </script>
</body>
</html>

tchagas · 27 de janeiro

console.log é para exibir uma mensagem no console.

Eli Almeida · 27 de janeiro

@tchagas , gostaria de saber por que aparece no console do navegador e não na tela, já que estou usando <script> dentro

do documento html. Agora quando utilizo um testador de javascript online o console.log funciona, quando utilizo o Node js, também, funciona.

Por exemplo, nesse código aqui abaixo, o console.log(n) não imprime na tela somente no console do navegador, gostaria de saber o motivo

dele não aparecer na tela.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
<h1>Iniciando estudos com dom</h1>
    <p>Aqui vai o resultado</p>
    <p> Aprendendo a usar o <strong>DOM</strong> em javascript</p>
    <div id = "msg">  Clique em mim</div>
    <script>
   var n = 10
   console.log (n)
</script>
</body>
</html>

Jão386 · 27 de janeiro

Essas IDEs online tem um console embutido, por isso recebe a mensagem na tela. No caso do navegador, basta acessar o menu e clicar na opção para exibi-lo.

Eli Almeida · 27 de janeiro

@Jão386 , a onde fica esse menu? Não estou entendo por que console.log (n) não imprime nada na tela, sendo que estou usando

Jão386 · 27 de janeiro

agora, Eli Almeida disse:

@Jão386 , a onde fica esse menu? Não estou entendo por que console.log (n) não imprime nada na tela, sendo que estou usando

<script> dentro do documento html.

No Chrome:

Menu do Chrome:

Clique nos três pontos (canto superior direito) > Mais ferramentas > Ferramentas do desenvolvedor.

Mude para a aba Console.

Também pode-se simplesmente pressionar <F12>.

Em outros navegadores, o local é similar.

Eli Almeida · 27 de janeiro

@Jão386 , compreendo, mas qual o motivo de não aparecer na tela do html?

Jão386 · 28 de janeiro

Não aparece porque o console não faz parte da página. É um mecanismo externo. Não é como IDEs online.

Eli Almeida · 28 de janeiro

@Jão386 , em Javascript sempre que quiser no visual studio code exibir um dado tem que fazer por meio do Dom?

Jão386 · 28 de janeiro

Desculpe, agora é que vi que você está falando do Visual Studio . Nunca usei ele, mas parece ter o modo debug para ver o console:

https://code.visualstudio.com/docs/debugtest/debugging

Eli Almeida · 28 de janeiro

@Jão386 , Para usar JavaScript no dia a dia, é recomendado utilizar o DOM?
Por que não consigo entender isso: aprendemos funções, condições e repetições em JavaScript, e assim por diante, mas depois o código só aparece no console do navegador.

Jão386 · 28 de janeiro

Sim, se utiliza o DOM. O console é utilizado para testes ou para gravar erros (exceções) durante a execução. Quando se está estudando, também é útil pela facilidade de uso.

DiF · 29 de janeiro

Basicamente como já disseram, a função console.log() é exclusivamente e unicamente para debug e testes. Você só vai usar isso quando quer saber se uma variável há conteúdo ou qual o conteúdo dele. Nada mais.

Para imprimir em tela, sempre use document.write() ou innerHTML para inserir um dado em algum elemento especifico e alert() para popups de avisos.

O console.log não serve pra exibir dados normalmente e nem deve ser usado, a não ser para testes e debug.