Débuter avec JavaScript

Utilisation de console.log()

Introduction

Tous les navigateurs Web modernes, NodeJ ainsi que presque tous les autres environnements JavaScript prennent en charge l’écriture de messages sur une console à l’aide d’une suite de méthodes de journalisation. La plus courante de ces méthodes est console.log().

Dans un environnement de navigateur, la fonction console.log() est principalement utilisée à des fins de débogage.


Commencer

Ouvrez la console JavaScript dans votre navigateur, saisissez ce qui suit et appuyez sur Entrée  :

console.log("Hello, World!");

Cela enregistrera les éléments suivants dans la console :

[![Sortie du journal de la console dans Google Chrome][1]][1]

Dans l’exemple ci-dessus, la fonction console.log() affiche Hello, World! sur la console et renvoie undefined (illustré ci-dessus dans la fenêtre de sortie de la console). C’est parce que console.log() n’a pas de valeur de retour explicite.


# Variables de journalisation

console.log() peut être utilisé pour enregistrer des variables de n’importe quel type ; pas seulement des cordes. Passez simplement la variable que vous souhaitez afficher dans la console, par exemple :

var foo = "bar";
console.log(foo);

Cela enregistrera les éléments suivants dans la console :

[![console.log() peut être utilisé avec des variables][2]][2]

Si vous souhaitez enregistrer deux valeurs ou plus, séparez-les simplement par des virgules. Des espaces seront automatiquement ajoutés entre chaque argument lors de la concaténation :

var thisVar = 'first value';
var thatVar = 'second value';
console.log("thisVar:", thisVar, "and thatVar:", thatVar);

Cela enregistrera les éléments suivants dans la console :

[![Console Concat][3]][3]


Espaces réservés

Vous pouvez utiliser console.log() en combinaison avec des espaces réservés :

var greet = "Hello", who = "World";
console.log("%s, %s!", greet, who);

Cela enregistrera les éléments suivants dans la console :

[![entrez la description de l’image ici][4]][4]


Objets de journalisation

Ci-dessous, nous voyons le résultat de la journalisation d’un objet. Ceci est souvent utile pour consigner les réponses JSON des appels d’API.

console.log({
    'Email': '', 
    'Groups': {},
    'Id': 33,
    'IsHiddenInUI': false,
    'IsSiteAdmin': false,
    'LoginName': 'i:0#.w|virtualdomain\\user2',
    'PrincipalType': 1,
    'Title': 'user2'
});

Cela enregistrera les éléments suivants dans la console :

[![Objet enregistré dans la console][5]][5]


Journalisation des éléments HTML

Vous avez la possibilité de consigner n’importe quel élément qui existe dans le [DOM][6]. Dans ce cas, nous enregistrons l’élément body :

console.log(document.body);

Cela enregistrera les éléments suivants dans la console :

[![entrez la description de l’image ici][7]][8]


Note de fin

Pour plus d’informations sur les fonctionnalités de la console, consultez la rubrique Console.

[1] : http://i.stack.imgur.com/Io1Iv.png [2] : https://i.stack.imgur.com/oSX2F.png [3] : https://i.stack.imgur.com/LuMaA.png [4] : https://i.stack.imgur.com/KfHut.png [5] : https://i.stack.imgur.com/Zxd6g.png [6] : https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model/Introduction [7] : https://i.stack.imgur.com/qovjR.png [8] : https://i.stack.imgur.com/Xw1n2.png

Utilisation de l’API DOM

DOM signifie Document Object Model. Il s’agit d’une représentation orientée objet de documents structurés comme XML et HTML.

La définition de la propriété textContent d’un Element est un moyen de générer du texte sur une page Web.

Par exemple, considérez la balise HTML suivante :

<p id="paragraph"></p>

Pour modifier sa propriété textContent, nous pouvons exécuter le JavaScript suivant :

document.getElementById("paragraph").textContent = "Hello, World";

Cela sélectionnera l’élément avec l’id paragraph et définira son contenu textuel sur “Hello, World”:

<p id="paragraph">Hello, World</p>

[(Voir aussi cette démo)][1]


Vous pouvez également utiliser JavaScript pour créer un nouvel élément HTML par programmation. Par exemple, considérez un document HTML avec le corps suivant :

<body>
   <h1>Adding an element</h1>
</body> 

Dans notre JavaScript, nous créons une nouvelle balise <p> avec une propriété textContent et l’ajoutons à la fin du corps html :

var element = document.createElement('p');
element.textContent = "Hello, World";
document.body.appendChild(element); //add the newly created element to the DOM

Cela changera votre corps HTML comme suit :

<body>
   <h1>Adding an element</h1>
   <p>Hello, World</p>
</body>

Notez que pour manipuler des éléments dans le DOM à l’aide de JavaScript, le code JavaScript doit être exécuté après que l’élément concerné a été créé dans le document. Ceci peut être réalisé en plaçant les balises JavaScript <script> après tous vos autres contenus <body>. Alternativement, vous pouvez également utiliser [un écouteur d’événement][2] pour écouter par ex. [Événement window’s onload][3], l’ajout de votre code à cet écouteur d’événement retardera l’exécution de votre code jusqu’à ce que tout le contenu de votre page ait été chargé.

Une troisième façon de s’assurer que tout votre DOM a été chargé est [d’envelopper le code de manipulation du DOM avec une fonction de temporisation de 0 ms][4]. De cette façon, ce code JavaScript est remis en file d’attente à la fin de la file d’attente d’exécution, ce qui donne au navigateur une chance de finir de faire certaines choses non-JavaScript qui attendaient de se terminer avant de s’occuper de ce nouveau morceau de JavaScript.

[1] : http://jsbin.com/fuzijox/edit?html,js,console,sortie [2] : https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener [3] : https://developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers/onload [4] : https://stackoverflow.com/questions/779379/why-is-settimeoutfn-0-sometimes-useful

Utilisation de window.alert()

La méthode alert affiche une boîte d’alerte visuelle à l’écran. Le paramètre de méthode d’alerte est affiché à l’utilisateur en texte ** brut ** :

window.alert(message);

Étant donné que window est l’objet global, vous pouvez également utiliser le raccourci suivant :

alert(message);

Alors, que fait window.alert() ? Bon, prenons l’exemple suivant :

alert('hello, world');

Dans Chrome, cela produirait une fenêtre contextuelle comme celle-ci : [![alerte][1]][1]

Remarques

La méthode alert est techniquement une propriété de l’objet window, mais puisque toutes les propriétés window sont automatiquement des variables globales, nous pouvons utiliser alert comme variable globale au lieu de comme propriété de window - ce qui signifie que vous peut directement utiliser alert() au lieu de window.alert().

Contrairement à l’utilisation de console.log, alert agit comme une invite modale, ce qui signifie que le code appelant alert s’arrêtera jusqu’à ce que l’invite reçoive une réponse. Traditionnellement, cela signifie qu’aucun autre code JavaScript ne s’exécutera jusqu’à ce que l’alerte soit ignorée :

alert('Pause!');
console.log('Alert was dismissed');

Cependant, la spécification permet en fait à d’autres codes déclenchés par des événements de continuer à s’exécuter même si une boîte de dialogue modale est toujours affichée. Dans de telles implémentations, il est possible qu’un autre code s’exécute pendant que la boîte de dialogue modale est affichée.

Plus d’informations sur [l’utilisation de la méthode alert](https://www.wikiod.com/fr/javascript/modaux—invites#Utilisation d’alerte()) peuvent être trouvées dans les [invites modales](http ://stackoverflow.com/documentation/javascript/3196/modals-prompts).

L’utilisation d’alertes est généralement déconseillée au profit d’autres méthodes qui n’empêchent pas les utilisateurs d’interagir avec la page - afin de créer une meilleure expérience utilisateur. Néanmoins, cela peut être utile pour le débogage.

À partir de Chrome 46.0, window.alert() est bloqué à l’intérieur d’un <iframe> [sauf si son attribut sandbox a la valeur allow-modal][2].

[1] : https://i.stack.imgur.com/Ayw9Y.png [2] : https://developer.mozilla.org/en-US/docs/Web/API/Window/alert

Utilisation de window.prompt()

Un moyen simple d’obtenir une entrée d’un utilisateur consiste à utiliser la méthode prompt().

Syntaxe

prompt(text, [default]);
  • texte : Le texte affiché dans la boîte de dialogue.
  • default : une valeur par défaut pour le champ de saisie (optionnel).

Exemples

var age = prompt("How old are you?");
console.log(age); // Prints the value inserted by the user

[![Boîte d’invite][1]][1]

Si l’utilisateur clique sur le bouton OK, la valeur d’entrée est renvoyée. Sinon, la méthode renvoie null.

La valeur de retour de prompt est toujours une chaîne, sauf si l’utilisateur clique sur Annuler, auquel cas il renvoie null. Safari est une exception dans la mesure où lorsque l’utilisateur clique sur Annuler, la fonction renvoie une chaîne vide. À partir de là, vous pouvez convertir la valeur de retour en un autre type, tel qu’un [entier][2].

Remarques

  • Lorsque la boîte de dialogue est affichée, l’utilisateur ne peut accéder à d’autres parties de la page, car les boîtes de dialogue sont des fenêtres modales.
  • À partir de Chrome 46.0, cette méthode est bloquée dans un <iframe> sauf si son attribut sandbox a la valeur allow-modal.

[1] : https://i.stack.imgur.com/6WFjI.png [2] : https://www.wikiod.com/fr/javascript/coercitionconversion-variable

Utilisation de window.confirm()

La méthode window.confirm() affiche une boîte de dialogue modale avec un message facultatif et deux boutons, OK et Annuler.

Maintenant, prenons l’exemple suivant :

result = window.confirm(message);

Ici, message est la chaîne facultative à afficher dans la boîte de dialogue et résultat est une valeur booléenne indiquant si OK ou Annuler a été sélectionné (true signifie OK).

window.confirm() est généralement utilisé pour demander la confirmation de l’utilisateur avant d’effectuer une opération dangereuse comme la suppression d’un élément dans un panneau de configuration :

if(window.confirm("Are you sure you want to delete this?")) {
    deleteItem(itemId);
}

La sortie de ce code ressemblerait à ceci dans le navigateur :

[![La boîte de dialogue de confirmation est très simple : Message, OK, Annuler][1]][1]

Si vous en avez besoin pour une utilisation ultérieure, vous pouvez simplement stocker le résultat de l’interaction de l’utilisateur dans une variable :

var deleteConfirm = window.confirm("Are you sure you want to delete this?");

Remarques

  • L’argument est facultatif et n’est pas requis par la spécification.
  • Les boîtes de dialogue sont des fenêtres modales - elles empêchent l’utilisateur d’accéder au reste de l’interface du programme tant que la boîte de dialogue n’est pas fermée. Pour cette raison, vous ne devez pas abuser des fonctions qui créent une boîte de dialogue (ou une fenêtre modale). Et quoi qu’il en soit, il existe de très bonnes raisons d’éviter d’utiliser des boîtes de dialogue pour la confirmation.
  • À partir de Chrome 46.0, cette méthode est bloquée dans un <iframe> sauf si son attribut sandbox a la valeur allow-modal.
  • Il est communément accepté d’appeler la méthode confirm avec la notation window supprimée car l’objet window est toujours implicite. Cependant, il est recommandé de définir explicitement l’objet window car le comportement attendu peut changer en raison de l’implémentation à un niveau de portée inférieur avec des méthodes portant le même nom.

[1] : https://i.stack.imgur.com/lmzTy.png

Utilisation de l’API DOM (avec texte graphique : canevas, SVG ou fichier image)

Utilisation d’éléments de canevas

HTML fournit l’élément canvas pour créer des images raster.

Construisez d’abord un canevas pour contenir les informations sur les pixels de l’image.

var canvas = document.createElement('canvas');
canvas.width = 500;
canvas.height = 250;

Sélectionnez ensuite un contexte pour le canevas, dans ce cas en deux dimensions :

var ctx = canvas.getContext('2d');

Définissez ensuite les propriétés liées au texte :

ctx.font = '30px Cursive';
ctx.fillText("Hello world!", 50, 50);

Insérez ensuite l’élément canvas dans la page pour qu’il prenne effet :

document.body.appendChild(canvas);

En utilisant SVG

SVG permet de créer des graphiques vectoriels évolutifs et peut être utilisé dans HTML.

Créez d’abord un conteneur d’éléments SVG avec des dimensions :

var svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
svg.width = 500;
svg.height = 50;

Créez ensuite un élément text avec le positionnement et les caractéristiques de police souhaités :

var text = document.createElementNS('http://www.w3.org/2000/svg', 'text');
text.setAttribute('x', '0');
text.setAttribute('y', '50');
text.style.fontFamily = 'Times New Roman';
text.style.fontSize = '50';

Ajoutez ensuite le texte réel à afficher à l’élément text :

text.textContent = 'Hello world!';

Enfin, ajoutez l’élément text à notre conteneur svg et ajoutez l’élément conteneur svg au document HTML :

svg.appendChild(text);
document.body.appendChild(svg);

Fichier d’image

Si vous disposez déjà d’un fichier image contenant le texte souhaité et que vous l’avez placé sur un serveur, vous pouvez ajouter l’URL de l’image, puis ajouter l’image au document comme suit :

var img = new Image();
img.src = 'https://i.ytimg.com/vi/zecueq-mo4M/maxresdefault.jpg';
document.body.appendChild(img);