Change language
Python.Engineering Wiki Console Javascript

Console Javascript

__del__ | __main__ Python module | ast Python module | cmd Python module | code Python module | COM PHP module | dis Python module | DOM PHP module | Ev PHP module | html Python module | http Python module | imp Python module | inspect Python module | io Python module | JavaScript | logging Python module | Lua PHP module | os Python module | PS PHP module | Python Development | Python functions | re Python module | select Python module | site Python module | SPL PHP module | StackOverflow | stat Python module | struct Python module | time Python module | tty Python module | UI PHP module | uu Python module | warnings Python module
Michael Zippo Michael Zippo

A programação, embora divertida, também pode ser muito chata.

Há dias em que você começa a codificar, percebe que algo está errado e fica muito frustrado. É ainda mais irritante quando seu código está em execução, mas você não consegue descobrir por que não está funcionando corretamente; quando há algo em seu código que você precisa corrigir.

Aqui é onde o console JavaScript pode ser útil. O console permite que você acompanhe o que está acontecendo em seu código. Isso facilita a compreensão do que há de errado com seu código.

Neste guia, veremos como usar o console JavaScript. Também forneceremos um aplicativo de exemplo usando o console para que você possa dominar rapidamente o console JavaScript.

O console JavaScript

Desenvolvedor, conheça o console. Você passará muito tempo no console durante seu tempo como desenvolvedor, então isso é algo com o qual você precisa se familiarizar.

O console é um lugar onde você pode visualizar mensagens enquanto seu aplicativo está em execução e onde você pode manipular o conteúdo de uma página da web.

Você pode dizer ao seu código para registrar mensagens no console e elas serão exibidas quando apontadas para elas. Você também pode usar o console para modificar variáveis, valores e inspecionar valores ‚Äã‚Äãarmazenados em uma variável.

Para exibir seu console, você precisa abrir as ferramentas do desenvolvedor. No Chrome, você pode fazer isso usando Ctrl + Shift + I no Windows ou Cmd + Alt + I no Mac. No Firefox, você pode abrir as Ferramentas do desenvolvedor usando Command + Option + K.

Quando você fizer isso, uma janela como esta aberto:

TLj9KUG2pZw3HEqt1Kd SIV W S3Q7V6c ENnQRQE3n6NLVfYCr8zKt87A6nme3UmpfmSQTH23pRMpqIpTae3nm6ynDMkbHfBJnd5ukbHBxsW8edoMJJGT4iwEZDZ6nNrXDsIlk> Todos os modernos os navegadores têm seu próprio número de console de ferramentas . top margin: 0em; margin-bottom: 0.5em ; . u6ff3233254f965cfe7e30aab4cading: 0 ; preenchimento: 0; topo: 1 em ! Importante ; fundo de preenchimento: 1 em ! Importante ; largura: 100%; exibição: bloco ; peso da fonte: 700 ; cor de fundo: #FFF ; borda: 0! Importante ; border -left: herança sólida de 4px! Importante ; decoração de texto: nenhum} .u6ff3233254f965cfe7e30aab4ca92b86: ativo, .u6ff3233254f965cfe7e30aab4ca92b86: hover {opacity: 1 ; transição: opacidade 250 ms ; transição do webkit: 250 ms ; opacidade 250 ms; webkit 30 72ms ; transição: opacidade 250 ms .u6ff3233254f965cfe7e30aab4ca92b86 .ctaText} {peso da fonte: 700 ; cor: # 000 ; decoração de texto: nenhuma; tamanho da fonte: 16px} .u6ff3233254f30965cfe72 86 ; # 3Title9595 -decoration: underline> importante}

Apresentando o console

Começaremos exibindo uma mensagem no console. pode fazer isso mesmo sem ter uma página da Web aberta. Basta abrir o console do navegador e escrever as instruções JavaScript que deseja executar.

Existem três métodos principais que você usará no console:

  • console .log (): exibe uma mensagem no console .
  • console.warn (): exibe um aviso no console.
  • console.error(): exibe um erro no console.

Antes de continuar, você não deve colar nada no console sem antes saber para que serve o código. Muitos sites modernos avisam você sobre isso porque existem golpes que usam o console para obter acesso a informações confidenciais do usuário.

Dito isso, vamos lá ! Para exibir uma mensagem no console, você pode usar este código:

Assim que você executar este comando, o seguinte será retornado.

Você também pode visualizar os erros e avisos no console A diferença entre erros e avisos e uma declaração tradicional log() é que os erros e avisos são exibidos em laranja e vermelho, respectivamente:

nosso código retorna: ITALY

GXz6eGAaJ96el M5cfzcRpa196fdNovCUxjUJQ2PhfTS6qzu40XrYivl5mtxBeUZGiTWoAe PIwF4SarOiG4St KfpQwMepeoqJTBjs0T52cxigKuo1Kuo1RE / figureReq2 <coJh2GK2 </ coJsquo2 aplicação <coJuc5> </ figureRij64> coJuc5> </ figureRij64> coJuc5 criar um aplicativo no modelo do seletor de cookies para exibir a ação consola objeto. Este aplicativo irá exibe um contador que mostra quantas vezes a imagem de uma xícara de chá foi clicada. Registraremos cada clique no console para que possamos acompanhar quando eles acontecem.</p><h3>Front-end development </h3> <p>Nosso primeiro passo é desenvolver o front-end do nosso aplicativo. Crie um arquivo chamado

Este código mostra quatro elementos em nossa página web : um título, uma descrição do jogo, uma imagem de uma xícara de chá e uma mensagem informando ao usuário quantas vezes ele clicou na xícara de chá.

Também adicionamos alguns estilos ao nosso código para torná-lo atraente. Crie um arquivo chamado "styles.css" e cole-o code:

Esses estilos criam uma caixa para nosso jogo de clicker de chá, defina o clique counter color para amarelo e criar cantos arredondados para nossa imagem. É assim que nossa página da web se parece agora:

t5 hj zcpmbx8o cmhbj CxX1CE76C2XWBL4o1 Lo0U FaQ2ahJ VFrLo hf8UuMQdJUgMu1lg A1njeVWMndLb88CHdD7VFZSCUNFrYnZ9d GXD8y1XQQ6EYTBoUpqsH1Gfe3unA

Quando você clica na xícara de chá, nada acontece. Isso ocorre porque não adicionamos nosso código JavaScript. Vamos escrever o código JavaScript para nosso aplicativo.

Adicionando funcionalidade usando JavaScript

Quando o usuário clica na xícara de chá, o contador deve aumentar de um. Antes de podermos incrementar nosso contador, precisamos selecionar os elementos DOM com os quais vamos trabalhar: a imagem e o contador. Elementos DOM, ou Document Object Model, são tags em nossa página Web.

Também definiremos uma variável que acompanha o número de cliques na xícara de chá:

Nosso próximo passo é criar uma função que registre quando nosso botão é clicado e incrementa nosso contador em um. Podemos fazer isso usando o seguinte código:

A primeira linha imprimirá a mensagem do console "O botão foi clicado" no console. Em seguida, vamos adicionar 1 ao nosso contador de "cliques". Em seguida, alteramos o conteúdo do texto em nossa tag para refletir o número de cliques atualizados usando o método innerText.

Vamos dar uma olhada em nossa página e clicar na imagem da xícara:

EIKDPoZ9JdR7K2z9gO1tF3EgmA SiXEKFGhG1IX2582CL9fAqROhwvP5GUrKZ2hJRxU O5PDdjUonsg6FUhmM7xwziHS1teOdzM8LqZV Sofm0 NnTl2mJPEDot4bvH64ElzOQm3

é que, quando você clica no copo de chá contra os nossos incrementos - 1. além disso, a mensagem que especificamos em nosso código é impressa no console. Isso nos ajuda a entender quando o usuário clica na xícara de chá.

Embora esta seja uma implementação básica de console.log(), em um aplicativo maior você pode veja que o registro de íons é amplamente utilizado. Na maioria das vezes, os logs são mantidos apenas nas versões de desenvolvimento dos aplicativos. Isso ocorre porque os usuários não precisam ver o que está acontecendo nos bastidores. Dito isso, o registro continua sendo uma ferramenta extremamente valiosa para desenvolvedores.

Conclusão

O console é uma ferramenta que você pode usar para aprender como seu código funciona. Você pode usá-lo para exibir mensagens de depuração enquanto o código está em execução ou para rastrear avisos e erros.

Você só deve usar as instruções de registro se estiver desenvolvendo seu próprio aplicativo ou quiser criar mensagens de erro personalizadas para seu código que você pode usar para depuração. Você não deve manter muitos logs em um aplicativo da web que esteja disponível online.