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 04.11.2021

Le codage, bien qu’amusant, peut aussi devenir assez ennuyeux.

Il y a des jours o√π vous commencez à coder, vous vous rendez compte que quelque chose ne va pas et vous devenez très frustré. C’est encore plus ennuyeux lorsque votre code s’exécute, mais vous ne pouvez pas comprendre pourquoi il ne fonctionne pas correctement ; quand il y a quelque chose dans votre code que vous devez corriger.

Voici o√π la console JavaScript peut être utile. La console vous permet de garder une trace de ce qui se passe dans votre code. Cela permet de comprendre facilement ce qui ne va pas avec votre code.

Dans ce guide, nous verrons comment utiliser la console JavaScript. Nous fournirons également un exemple d’application utilisant la console afin que vous puissiez maaîtriser rapidement la console JavaScript.

La console JavaScript

Développeur, rencontrez la console. Vous passerez beaucoup de temps dans la console pendant votre temps en tant que développeur, c’est donc quelque chose avec lequel vous devrez vous familiariser.

La console est un endroit o√π vous pouvez afficher les messages pendant que votre l’application est en cours d’exécution et o√π vous pouvez manipuler le contenu d’une page Web.

Vous pouvez dire à votre code de consigner les messages dans la console et ils seront affichés lorsque vous les pointez dessus. Vous pouvez également utiliser la console pour modifier des variables, des valeurs et inspecter les valeurs stockées dans une variable.

Pour afficher votre console, vous devez ouvrir les outils de développement. Dans Chrome, vous pouvez le faire en utilisant Ctrl + Shift + I sur Windows ou Cmd + Alt + I sur Mac. Dans Firefox, vous pouvez ouvrir les outils de développement en utilisant Command + Option + K.

Lorsque vous le faites, un fenêtre comme ceci ouvrira:

TLj9KUG2pZw3HEqt1Kd SIV W S3Q7V6c ENnQRQE3n6NLVfYCr8zKt87A6nme3UmpfmSQTH23pRMpqIpTae3nm6ynDMkbHfBJnd5ukbHBxsW8edoMJJGT4iwEZDZ6nNrXDsIlk> Tous les navigateurs modernes ont leur propre nombre d’outils de console. marge supérieure: 0em ; margin-bottom: 0.5em ;

Présentation de la console

Nous allons commencer par afficher un message dans la console. Nous pouvons le faire sans même avoir une page web ouverte. Il suffit d’ouvrir la console du navigateur et d’écrire les instructions JavaScript que vous souhaitez exécuter.

Il existe trois méthodes principales que vous utiliserez dans la console:

Avant de continuer, vous ne devez rien coller dans votre console sans savoir d’abord à quoi sert le code. De nombreux sites modernes vous en avertissent car il existe des escroqueries qui utilisent la console pour accéder à des informations utilisateur sensibles.

Cela dit, c’est parti ! Pour afficher un message sur la console, on peut n utiliser ce code:

Dès que vous exécutez cette commande, ce qui suit seront retournés.

Vous pouvez également afficher les erreurs et les avertissements sur la console La La différence entre les erreurs et les avertissements et une instruction log () traditionnelle est que les erreurs et les avertissements sont affichés respectivement en orange et en rouge:

notre code retourne: ITALIE

GXz6eGAaJ96el M5cfzcRpa196fdNovCUxjUJQ2PhfTS6qzu40XrYivl5mtxBeUZGiTWoAe PIwF4SarOiG4St KfpQwMepeoqJTBjs0T52cxigKuo1Kuo1RE / figureReq2 <coJh2GK2 </ coJsquo2 application <coJuc5> </ figureRij64> coJuc5> </ figureRij64> coJuc5 créer une application sur le modèle du sélecteur de cookies pour afficher l’objet console en action. Cette application affichera un compteur qui nous montre combien de fois l’image d’une tasse de thé a été cliquée. Nous enregistrerons chaque clic sur la console afin que nous puissions garder une trace de quand ils se produisent.</p> <h3> Développement front-end </h3> <p>Notre première étape consiste à développer le front-end de notre application . Créez un fichier nommé

Ce code montre quatre éléments sur notre page web: un titre, une description du jeu , une image d’une tasse de thé et un message informant l’utilisateur combien de fois il a cliqué sur la tasse de thé.

Nous ajoutons également quelques styles à notre code pour le rendre attrayant. Créez un fichier appelé "styles.css" et collez ce code:

Ces styles créent une boaîte pour notre jeu de clicker sur le thé, définissent la couleur du compteur de clics sur jaune et créent des coins arrondis pour notre image. Voici à quoi ressemble notre page Web maintenant:

T5 Hj ZcpMbx8o CMhBJCxX1CE76C2XWBL4o1 Lo0U FaQ2ahJ VFrLo hf8UuMQdJUgMu1lg A1njeVWMndLb88CHdD7VFZSCUNFrYnZ9d GXD8y1XQQ6EYTBoUpqsH1Gfe3unA

Lorsque vous cliquez sur la tasse de thé, rien ne se passe. C’est parce que nous n’avons pas encore ajouté notre code JavaScript. √âcrivons le code JavaScript de notre application.

Ajout de fonctionnalités à l’aide de JavaScript

Lorsque l’utilisateur clique sur la tasse de thé, le compteur devrait augmenter de un. Avant de pouvoir incrémenter notre compteur, nous devons sélectionner les éléments DOM avec lesquels nous allons travailler: l’image et le compteur. Les éléments DOM, ou Document Object Model, sont des balises sur notre page Web.

Nous allons également définir une variable qui garde une trace du nombre de clics sur la tasse de thé:

Notre prochaine étape consiste à créer une fonction qui enregistre lorsque notre bouton est été cliqué et incrémente notre compteur par un. Nous pouvons le faire en utilisant le code suivant:

La première ligne imprimera le message de la console " Le bouton a été cliqué " sur la console. Ajoutons ensuite 1 à notre compteur de " clics " . Nous modifions ensuite le contenu du texte dans notre balise pour refléter le nombre de clics mis à jour à l’aide de la méthode innerText.

< / div>

Regardons notre page web et cliquons sur l’image de la tasse de thé:

EIKDPoZ9JdR7K2z9gO1tF3EgmA SiXEKFGhG1IX2582CL9fAqROhwvP5GUrKZ2hJRxU O5PDdjUonsg6FUhmM7xwziHS1teOdzM8LqZV Sofm0 NnTl2mJPEDot4bvH64ElzOQm3

il se trouve que , lorsque vous cliquez dans la tasse de thé incrémente notre contre - un. en outre, le message que nous avons spécifié dans notre code est imprimé sur la console. Cela nous aide à comprendre quand l’utilisateur clique sur la tasse de thé.

Bien qu’il s’agisse d’une implémentation de base du console.log (), dans une application plus grande, vous pouvez voir que la journalisation ion est largement utilisé. Pour la plupart, les journaux ne sont conservés que dans les versions de développement des applications. C’est parce que les utilisateurs n’ont pas besoin de voir ce qui se passe dans les coulisses. Cela dit, la journalisation reste un outil extrêmement précieux pour les développeurs.

Conclusion

La console est un outil que vous pouvez utiliser pour apprendre comment fonctionne votre code. Vous pouvez l’utiliser pour afficher des messages de débogage pendant l’exécution du code ou pour suivre les avertissements et les erreurs.

Vous ne devez utiliser les instructions d’enregistrement que si vous développez votre propre application ou souhaitez créer des messages d’erreur personnalisés messages pour votre code que vous pouvez utiliser pour le débogage. Vous ne devriez pas conserver trop de journaux dans une application Web disponible en ligne.