Archives des JavaScript - Pierre Giraud

Tri JavaScript dynamique d’un tableau HTML ou d’une liste

Pierre GIRAUD — Wed, 27 Nov 2019 09:00:23 +0000

Dans ce nouveau tutoriel, je vous propose de créer un script JavaScript qui va nous permettre de trier une liste d’éléments ou les cellules d’un tableau HTML.

Nous allons pouvoir trier par ordre alphabétique et par valeur numérique, dans l’ordre ascendant (croissant) ou descendant (décroissant).

Créer un tri dynamique en JavaScript – Partie HTML et ressources utilisées

Commençons par créer un tableau structuré en HTML :




    
    
    
    Tri JavaScript
    
    


    
        
            
                Prénom
                Age
                Abonné
            
        
        
            
                Pierre
                29
                oui
            
            
                Mathilde
                027
                false
            
            
                3Ric
                
                ??
            
            
                Florian
                trente
                01

Prénom	Age	Abonné
Pierre	29	oui
Mathilde	027	false
3Ric		??
Florian	trente	01

Notre tableau contient ici une ligne d’en-tête en 5 lignes de données. Nous allons vouloir pouvoir trier les cellules de chaque colonne en cliquant simplement sur la cellule d’en-tête correspondante. Bien évidemment, on va également vouloir que lors du tri le reste des lignes suive les cellules de la colonne triée.

En JavaScript, la meilleure façon de faire actuellement de être de :

Récupérer les valeurs du tableau dynamiquement ;
Comparer les cellules de la colonne triée deux à deux et les ordonner comme cela les unes après les autres ;
Réinjecter les résultats dans la page en créant un nouveau tableau qui viendra remplacé le précédent.

Pour cela, nous allons utiliser les méthodes suivantes :

Les méthodes querySelector() et querySelectorAll() qui nous permettent de récupérer des éléments spécifiques dans le DOM ;
La méthode AddEventListener() qui permet d’accrocher un gestionnaire d’événements à un élément ;
La fonction isNaN() qui indique si une valeur est un nombre (true) ou pas (false) ;
La méthode toString() qui renvoie une chaine de caractères à partir d’un objet ;
La méthode localeCompare() qui renvoie un nombre indiquant si la chaîne de caractères courante se situe avant (nb négatif), après (nb positif) ou est la même que la chaîne passée en paramètre (0), selon l’ordre lexicographique.
La méthode forEach() qui permet d’exécuter une fonction donnée sur chaque élément du tableau ;
La méthode Array.from() qui permet de créer une nouvelle instance d’Array (une copie superficielle) à partir d’un objet itérable ou semblable à un tableau.
La méthode sort() qui trie les éléments d’un tableau, dans ce même tableau, et renvoie le tableau ;
La méthode indexOf() qui renvoie le premier indice pour lequel on trouve un élément donné dans un tableau ou -1.

On va également avoir besoin des propriétés suivantes :

La propriété children (lecture seule) qui renvoie une HTMLCollection contenant tous les enfants Element du noeud sur lequel elle a été appelée ;
La propriété textContent qui représente le contenu textuel d’un nœud et de ses descendants.

Créer un tri dynamique en JavaScript – Script JavaScript

Comme l’exercice est relativement complexe, on va procéder par itération en créant d’abord un grand schéma de ce qu’on souhaite obtenir et en complétant au fur et à mesure.

Création d’une première ébauche de tri

On sait qu’il va falloir qu’on classes les différentes lignes de notre tableau en fonction de la valeur des cellules d’une colonne donnée. On va donc déjà commencer par accéder à nos éléments tbody, th et tr. Pour cela, on peut écrire :

const tbody = document.querySelector('tbody');
const thx = document.querySelectorAll('th');
const trxb = tbody.querySelectorAll('tr');

La méthode querySelectorAll() renvoie une NodeList d’éléments correspondant au sélecteur passés contenus dans le document ou qui sont des descendants de l’élément sur lequel la méthode a été appelée. tbody.querySelectorAll('tr') renvoie donc une liste des noeuds éléments tr contenus dans tbody par exemple.

Notez déjà qu’il est possible d’itérer sur (de parcourir) une NodeList avec forEach() et qu’on peut également convertir une NodeList en tableau avec la méthode Array.from().

En plus de cela, les éléments de notre NodeList contiennent des propriétés cells et children qui peuvent nous permettre d’accéder à une HTMLCollection des éléments qu’ils contiennent.

Ensuite, on veux que le tableau soit trié dans l’ordre croissant ou décroissant des valeurs en fonction d’une colonne dès qu’un utilisateur clique sur la cellule d’en-tête de cette colonne. On va donc utiliser un évènement de type click et utiliser une fonction de retour qui va devoir faire le travail.

Commençons déjà par accrocher un gestionnaire d’évènement click à chacun de nos th. On peut écrire quelque chose comme ça :

thx.forEach(th => th.addEventListener('click', () =>{
   /*Code à créer*/
}));

Notez bien ici que les th du code ci-dessus ne sont que des variables : je pourrais leur donner n’importe quel nom. L’idée est que forEach() va exécuter un code pour chaque élément de l’Array / la NodeList sur lequel on l’appelle. thx est composé des th de notre tableau; forEach() va donc ici accrocher des gestionnaires d’évènements à chaque élément th.

Le code au dessus utilise des fonctions fléchées qui sont une notation récente du JavaScript. L’équivalent avec des fonctions anonymes serait :

thx.forEach(function(th) { 
    th.addEventListener('click', function() {
       /*Code à créer*/
    });
});

Lorsqu’un utilisateur clique sur une cellule d’en-tête, il va falloir qu’on classe / ordonne les différentes lignes du tableau et qu’on remplace le tableau de base par le nouveau tableau ordonné.

Pour classer les lignes du tableau, on va utiliser la méthode sort(). Par défaut, cette méthode va trier les valeurs en les convertissant en chaines de caractères et en comparant ces chaines selon l’ordre des points de code Unicode. Cette méthode ne nous convient pas puisqu’elle n’est efficace que pour trier des chaines qui ont des formes semblables (tout en minuscule ou tout en majuscule).

Heureusement, sort() peut prendre en argument facultatif une fonction de comparaison qui va décrire la façon dont les éléments vont être comparés, ce qui va nous être très utile ici. Cette fonction de comparaison va toujours devoir renvoyer un nombre en valeur de retour qui va décider de l’ordre de tri.

Par exemple, si v1 et v2 sont deux valeurs à comparer, alors :

Si fonctionDeComparaison(v1, v2) renvoie une valeur strictement inférieure à 0, v1 sera classé avant v2 ;
Si fonctionDeComparaison(v1, v2) renvoie une valeur strictement supérieure à 0, v2 sera classé avant v1 ;
Si fonctionDeComparaison(v1, v2) renvoie 0, on laisse v1 et v2 inchangés l’un par rapport à l’autre, mais triés par rapport à tous les autres éléments.

Pour réinjecter le résultat, on va utiliser forEach() et appendChild().

Notre gestionnaire d’évènements va donc ressembler à cela :

thx.forEach(th => th.addEventListener('click', () =>{
    let classe = Array.from(trxb).sort(compare(a,b));
    classe.forEach(tr => tbody.appendChild(tr));
}));

La méthode sort() a besoin d’un Array (ou d’un array-like) pour fonctionner. On utilise donc Array.from(trbx) pour créer un Array à partir de notre NodeList.

Ensuite, pour chaque élément du tableau classé, on utilise appendChild qui va insérer les tr les unes à la suite des autres.

Voilà tout pour le squelette. La vraie difficulté va maintenant être de savoir ce qu’on va mettre dans notre fonction compare().

Création de la fonction de tri avec critères personnalisés

Pour le moment, on passe un Array complexe composé d’objets à sort(). En effet, Array.from(trxb) crée un Array composé des différents tr de notre tbody et ces tr sont des objets (noeuds) eux mêmes composés de (noeuds) td eux mêmes composés de (noeuds) texte.

La méthode sort() transmet ainsi ici automatiquement les différents éléments de Array.from(trxb) (c’est-à-dire les différents tr) à la fonction compare() passée en argument.

Or, comparer des lignes de tableau deux à deux n’a pas de sens : on veut comparer les valeurs textuelles des td d’une colonne donnée entre les différentes lignes du tableau pour ensuite pouvoir ordonner les lignes entières dans un sens ou dans un autre.

On va donc ici vouloir passer explicitement l’indice du th lié à la colonne actuellement cliqué afin de définir la colonne de référence utilisée pour le tri ainsi qu’un booléen qui va nous permettre d’inverser le tri (croissant / décroissant) à chaque fois qu’un élément d’en-tête sera cliqué (note : par simplicité, les éléments d’en-tête agissent comme un groupe ici et non pas indépendamment).

On va faire tout cela de la façon suivante :

thx.forEach(th => th.addEventListener('click', () =>{
    let classe = Array.from(trxb).sort(compare(Array.from(thx).indexOf(th), this.asc = !this.asc));
    classe.forEach(tr => tbody.appendChild(tr));
}));

La partie Array.from(thx).indexOf(th) nous permet de récupérer l’indice du th couramment cliqué. On va se servir ensuite de cet indice pour savoir quelles valeurs comparer dans chaque tr.

La partie this.asc = !this.asc permet de définir un booléen dont la valeur logique va être inversée à chaque clic sur un élément d’en-tête. Avant le premier clic, this.asc n’est pas défini (et vaut donc false). Lors du premier clic, sa valeur s’inverse et il vaut donc true et etc. Cela va nous permettre ensuite de choisir l’ordre de tri.

Passons maintenant à notre fonction de comparaison en soi. Notre fonction compare() va devoir retourner une fonction qui va recevoir en arguments valeurs passées par sort() (c’est-à-dire nos lignes de tableau) et retourner un nombre positif, négatif ou égal à 0 afin d’indiquer à sort() comment les lignes doivent être triées. L’architecture de notre fonction va donc ressembler à :

const compare = (ids, asc) => (row1, row2) => /*Un nombre*/

L’équivalent avec des notations plus traditionnelles est :

const compare = function(ids, asc){
    return function(row1, row2){
       return /*Un nombre*/;
    }
}

L’idée principale de notre fonction de comparaison est la suivante : on va vouloir obtenir le contenu textuel des cellules de la colonne utilisée pour le tri pour les deux lignes passées par sort() et on va vouloir comparer ces deux valeurs textuelles puis renvoyer un nombre à l’issue de cette comparaison pour indiquer à sort() l’ordre de tri.

Notre fonction de comparaison va déjà devoir comparer les valeurs textuelles des td d’une colonne pour deux lignes différentes pour ensuite pouvoir ordonner les lignes. Il va donc falloir accéder à ces valeurs textuelles. On va pour cela créer une autre fonction qui va prendre une ligne et un numéro de colonne en entrée et qui va extraire le contenu textuel de la cellule de tableau relative à l’id passé dans cette ligne.

const compare = (ids, asc) => (row1, row2) => {
    const tdValue = (row, ids) => row.children[ids].textContent;
   /*Un nombre*/

L’équivalent en fonctions non fléchées est :

const compare = function(ids, asc){
    return function(row1, row2){
       const tdValue = function(row, ids){
           return row.children[ids].textContent;
       }
       return /*Un nombre*/
    }
}

Maintenant qu’on possède une fonction nous permettant de récupérer le contenu textuel des td, il ne nous reste plus qu’à créer une comparaison qui va comparer ces deux valeurs textuelles. On peut faire cela en utilisant des ternaires :

const compare = (ids, asc) => (row1, row2) => {
    const tdValue = (row, ids) => row.children[ids].textContent;
    const tri = (v1, v2) => v1 !== '' && v2 !== '' && !isNaN(v1) && !isNaN(v2) ? v1 - v2 : v1.localeCompare(v2);
    /*Un nombre*/
};

L’équivalent de cette notation condensée avec des boucles classiques et des fonctions non fléchées est :

const compare = function(ids, asc){
    return function(row1, row2){
       const tdValue = function(row, ids){
           return row.children[ids].textContent;
       }
       const tri = function(v1, v2){
           if (v1 !== '' && v2 !== '' && !isNaN(v1) && !isNaN(v2)){
              return v1 - v2;
           }
           else {
              return v1.toString().localeCompare(v2);
           }
           return v1 !== '' && v2 !== '' && !isNaN(v1) && !isNaN(v2) ? v1 - v2 : v1.localeCompare(v2);
       };
       return /*Un nombre*/
   }
}

Ici, v1 et v2 représentent le contenu textuel des cellules des deux lignes pour une colonne donnée. On veut d’abord traiter deux cas : le cas où les cellules contiennent des nombres et le cas où elles contiennent autre chose que des nombres.

Dans le cas où nos deux valeurs sont bien des nombres, on se contente de retourner la différence entre les deux valeurs.

Il faut savoir ici que lorsqu’on passe un argument qui n’est pas du type Number à isNan(), cet argument est d’abord converti de force en une valeur de type Number et c’est la valeur résultante qui est utilisée pour déterminer si l’argument est NaN ou pas.

isNan() va notamment renvoyer true pour les valeurs booléennes true et false et pour la chaine de caractères vide. On va donc isoler le cas “chaine de caractères vide”. Comme les valeurs récupérées dans le tableau seront transformées en chaine, on n’a pas besoin d’isoler les cas true et false.

Pour tous les cas qui ne rentrent pas dans notre if, on va comparer les deux valeurs avec la méthode localeCompare(). Si la valeur v2 est considérée comme se situant après dans l’ordre lexicographique par rapport à v1 par localeCompare(), cette méthode renverra un nombre négatif. Dans le cas contraire, un nombre positif sera renvoyé.

En résumé, dans notre if comme dans notre else, si v2 est “plus grand” que v1 , une valeur négative est retournée. Dans le cas contraire, une valeur positive est retournée. Si les deux valeurs sont égales, 0 est retourné.

Il ne nous reste plus alors qu’à passer des valeurs textuelles effectives à notre fonction tri() en tenant compte de l’ordre de tri choisi (croissant ou décroissant). On peut écrire :

const compare = (ids, asc) => (row1, row2) => {
    const tdValue = (row, ids) => row.children[ids].textContent;
    const tri = (v1, v2) => v1 !== '' && v2 !== '' && !isNaN(v1) && !isNaN(v2) ? v1 - v2 : v1.toString().localeCompare(v2);
    return tri(tdValue(asc ? row1 : row2, ids), tdValue(asc ? row2 : row1, ids));
};

Ou l’équivalent en “version longue” :

const compare = function(ids, asc){
    return function(row1, row2){
        const tdValue = function(row, ids){
            return row.children[ids].textContent;
        }
        const tri = function(v1, v2){
            if (v1 !== '' && v2 !== '' && !isNaN(v1) && !isNaN(v2)){
               return v1 - v2;
            }
            else {
               return v1.toString().localeCompare(v2);
            }
            return v1 !== '' && v2 !== '' && !isNaN(v1) && !isNaN(v2) ? v1 - v2 : v1.toString().localeCompare(v2);
        };
        return tri(tdValue(asc ? row1 : row2, ids), tdValue(asc ? row2 : row1, ids));
    }
};

Décortiquons cette dernière ligne de code ensemble. Cette ligne est relativement condensée et contient deux ternaires. La partie tdValue(asc ? row1 : row2, ids), tdValue(asc ? row2 : row1, ids) permet de récupérer le contenu textuel d’une cellule de la première ligne puis le contenu textuel d’une cellule de la deuxième ligne ou inversement selon que asc soit évalué à true ou pas.

Grosso modo, on va exécuter tdValue(row1, ids) et tdValue(row2, ids) si asc vaut true ou tdValue(row2, ids) et tdValue(row1, ids) si asc vaut false.

Les deux résultats renvoyés par tdValue() (les valeurs textuelles des deux cellules donc) sont ensuite immédiatement passées comme arguments à tri() qui va les comparer et renvoyer un nombre. En fonction de si le nombre est positif, négatif ou égal à 0 la méthode sort() va finalement ordonner les lignes dans un sens ou dans un autre.

Ici, notre ternaire nous permet finalement de choisir quelle valeur textuelle va être utilisée en v1 et quelle autre va être utilisée en v2, ce qui va influer sur le résultat final.

Si asc vaut true, la valeur textuelle de la première colonne sera utilisée comme v1 et la valeur textuelle de la deuxième colonne sera utilisée comme v2.

Or, on a dit plus haut que si v2 est “plus grand” que v1 , une valeur négative est retournée par tri(). Notre fonction compare() renvoie donc dans ce cas une fonction function(row1, row2) qui renvoie elle même une valeur négative.

La ligne Array.from(trxb).sort(compare(Array.from(thx).indexOf(th), this.asc = !this.asc) va donc devenir Array.from(trxb).sort(function(row1, row2){return /*Une valeur négative*/} et dans ce scénario sort() va classer row1 avant row2.

On a donc finalement réalisé un tri fonctionnel en JavaScript, qui permet de comparer et de classer différents types de valeurs !

Voici le code complet en version longue :

See the Pen
Tuto – Trier un tableau HTML en JavaScript [développé] by Pierre (@pierregiraud)
on CodePen.

Et le voici en version factorisé :

See the Pen
Tuto – Trier un tableau HTML en JavaScript [condensé] by Pierre (@pierregiraud)
on CodePen.

L’article Tri JavaScript dynamique d’un tableau HTML ou d’une liste est apparu en premier sur Pierre Giraud.

Afficher / cacher ou masquer un div ou du texte en JavaScript

Pierre GIRAUD — Wed, 06 Nov 2019 09:00:53 +0000

Dans ce nouveau tutoriel, je vous propose de voir comment afficher ou cacher un div ou n’importe quel autre texte ou élément HTML en utilisant du JavaScript et sans utiliser la librairie jQuery.

L’idée ne va être simplement de masquer un élément mais de laisser l’opportunité aux visiteurs de cacher ou d’afficher les div en cliquant sur certains éléments ou en passant leur souris à certains endroits.

Pour faire cela, nous allons jouer sur l’état de la propriété CSS display de l’élément HTML qu’on souhaite afficher ou masquer.

Afficher ou cacher un div, un texte, ou n’importe quel élément HTML en CSS

Il existe principalement deux méthodes pour cacher un élément HTML visible en CSS : on peut soit régler la valeur de la propriété visibility de l’élément sur visibility: hidden, soit régler son type d’affichage sur display: none.

Il existe cependant une différence de taille entre ces deux méthodes : appliquer un visibility: hidden sur un élément comme un div par exemple va simplement cacher cet élément mais ne va pas le retirer du flux de la page ce qui signifie que l’espace qu’il occupait lorsqu’il était visible va être conservé tandis qu’appliquer un display: none va non seulement masquer l’élément en question mais va en plus permettre aux autres éléments d’occuper l’espace de l’élément caché.

N’hésitez pas à aller lire mon article sur les différences entre visibility: hidden et display: none pour bien les comprendre.

Afficher ou cacher un div lors d’un clic

On veut que nos utilisateurs puissent cacher notre div lorsqu’il est affiché ou au contraire l’afficher lorsqu’il est caché en cliquant simplement sur un bouton.

Pour faire cela, on va utiliser l’évènement JavaScript click. Lors du clic sur le bouton, on va récupérer la valeur de la propriété display du div et la modifier : si la valeur est display: none, on la change en display: block et inversement.

Pour répondre à l’évènement click en JavaScript, on peut soit utiliser la méthode addEventListener() qui permet d’enregistrer une fonction qui sera appelée lors du déclenchement d’un évènement choisi, soit simplement utiliser la propriété onclick qui représente le gestionnaire d’évènement pour l’évènement click de l’élément courant.

Illustrons cela immédiatement avec un exemple concret. Pour cela, on va déjà créer une page HTML avec deux boutons et deux éléments div :

See the Pen
Tuto – Afficher / cacher div HTML en JavaScript #1 by Pierre (@pierregiraud)
on CodePen.

On peut également appliquer ne couleur de fond à nos deux div en CSS :

See the Pen
Tuto – Afficher / cacher div HTML en JavaScript #1 by Pierre (@pierregiraud)
on CodePen.

Il ne nous reste plus alors qu’à créer notre JavaScript :

See the Pen
Tuto – Afficher / cacher div HTML en JavaScript #1 by Pierre (@pierregiraud)
on CodePen.

Je présente ici les deux méthodes citées précédemment (afficher et cacher un div en utilisant addEventListener() et onclick).

On commence ici de manière classique par accéder à nos différents éléments HTML en JavaScript en utilisant document.getElementById() et on stocke les différentes références dans des variables.

On attache ensuite un gestionnaire d’évènement click à notre bouton togg1 avec addEventListener(). On va passer deux arguments à cette méthode : le nom d’un évènement qu’on souhaite prendre en charge ainsi que le code à exécuter (qui prendra souvent la forme d’une fonction) en cas de déclenchement de cet évènement.

J’utilise ici une fonction fléchée qui est une notation récente en JavaScript. La partie ()=>{} est équivalente à function(){}. La fonction fléchée est la fonction qui va s’exécuter lors du clic sur #togg1.

Le code de cette fonction commence par récupérer la valeur calculée (valeur courante) de la propriété display du div id="d1" avec getComputedStyle(d1).display et la compare à la valeur none en différence.

Si la valeur récupérée est bien différente de none (c’est-à-dire si le div est visible), on rentre dans le if qui modifie cette valeur afin qu’elle soit égale à none (ce qui cache le div).

Si la valeur récupérée est égale à none, c’est que le div est déjà caché. On rentre alors dans le else et on modifie cette valeur en display: block pour afficher le div.

La deuxième partie de mon code JavaScript produit également le même résultat (avec le bouton #togg2 et le div #d2 mais utilise cette fois-ci un attribut onclick et une fonction nommée classique plutôt que addEventListener() et une fonction fléchée.

Voici le résultat obtenu finalement :

See the Pen
Tuto – Afficher / cacher div HTML en JavaScript #1 by Pierre (@pierregiraud)
on CodePen.

Afficher ou cacher un div lors du survol

On va de la même façon pouvoir afficher / cacher des div ou n’importe quel élément en utilisant différents autres évènements JavaScript comme lors du survol de la souris sur un élément par exemple.

Pour faire cela, on peut par exemple utiliser les évènements mouseover et mouseout ou mouseenter et mouseleave en fonction de la situation et du résultat qu’on souhaite obtenir.

On peut illustrer cela en modifiant légèrement notre exemple précédent de la manière suivante :

Code HTML :

See the Pen
Tuto – Afficher / cacher div HTML en JavaScript #2 by Pierre (@pierregiraud)
on CodePen.

Code CSS :

See the Pen
Tuto – Afficher / cacher div HTML en JavaScript #2 by Pierre (@pierregiraud)
on CodePen.

Code JavaScript :

See the Pen
Tuto – Afficher / cacher div HTML en JavaScript #2 by Pierre (@pierregiraud)
on CodePen.

Résultat :

See the Pen
Tuto – Afficher / cacher div HTML en JavaScript #2 by Pierre (@pierregiraud)
on CodePen.

Cette fois-ci, on veut cacher et ou afficher des éléments selon que l’on passe la souris sur certains autres éléments ou qu’on retire la souris de ces éléments.

Dans notre cas, ce sont les paragraphe #p1 et la liste #l1 contenus dans nos div qui vont être masqués / affichés.

On cache ces éléments par défaut en leur appliquant un display : none. On va ensuite vouloir qu’ils s’affichent lorsque l’utilisateur place sa souris dans le div parent relatif à chaque élément, puis qu’ils soient cachés à nouveau lorsque l’utilisateur retire sa souris du div.

Pour cela, on va se servir ici des évènements mouseover (la souris rentre) et mouseout (la souris sortt) et on va à nouveau pouvoir utiliser soit la méthode addEventListener(), soit un attribut d’évènements pour répondre à ces évènements.

L’article Afficher / cacher ou masquer un div ou du texte en JavaScript est apparu en premier sur Pierre Giraud.

Installation et découverte de npm, le gestionnaire de paquets de Node.js

Pierre GIRAUD — Wed, 04 Sep 2019 10:00:47 +0000

Qu’est-ce que npm (Node Package Manager) ?

npm (Node Package Manager) est le gestionnaire de paquets officiel de Node.js. Il permet de télécharger et d’installer des paquets (encore appelés modules) pour pouvoir les utiliser pour un projet ou au contraire de partager des paquets pour que d’autres utilisateurs puissent les utiliser.

Un “package” ou “paquet” ou encore “module” est un bloc de code cohérent composé de différentes fonctions qui permet d’effectuer une tâche. Utiliser des paquets permet de ne pas avoir à réinventer la roue et de ne pas tout coder nous même : si d’autres développeurs ont déjà développé une fonctionnalité qui nous intéresse, pourquoi ne pas la réutiliser ?

A la base, npm devait uniquement servir de package manager pour Node. Cependant, ce gestionnaire de paquet étant Open Source et ayant été très rapidement adopté par une large communauté de développeurs, il a évolué pour devenir un package manager beaucoup plus global pour l’ensemble du JavaScript et de son environnement et dépassant ainsi le cadre de Node.

Npm est aujourd’hui le plus grand registre de paquets au monde avec plus d’un million de paquets disponibles.

En tant que développeurs, nous allons donc très souvent utiliser npm pour installer des paquets qui nous intéressent comme React, Express, Moment, Request, Lodash, Async, Chalk, Sass ou encore Debug.

Comment télécharger et installer npm ?

La façon la plus simple d’installer npm est d’installer Node.js puisque npm est livré avec. Pour cela, rendez-vous sur le site nodejs.org et téléchargez la dernière version stable (LTS) de Node.

Pour vérifier que l’installation s’est bien passée, vous pouvez ouvrir votre Terminal ou Invite de commande et taper node -v qui devrait vous renvoyer la version de Node.js installée et npm -v qui devrait vous renvoyer la version de npm installée.

Pour vérifier que vous avez bien la dernière version de npm installée, vous pouvez taper la commande npm install npm -g.

Comment installer un nouveau paquet ?

Une fois npm installé, vous pouvez installer n’importe quel package disponible dans le registre ! Il existe deux façons d’installer un paquet avec npm : soit localement, soit globalement.

Pour installer un paquet localement, commencez par cd vers le répertoire de votre projet puis utilisez la commande npm install nom_du_paquet en remplaçant évidemment “nom_du_paquet” par le nom du paquet que vous souhaitez installer.

Si votre projet est important ou is vous travaillez à plusieurs sur un projet, vous voudrez certainement créer un fichier package.json. Ce fichier va détailler les différents paquets installés pour un projet. Il suffira ensuite de taper npm install pour installer toutes les dépendances (paquets) listés dans ce fichier.

Pour créer ce fichier package.json, nous pouvons utiliser la commande npm init. Un assistant s’ouvre pour nous aider à créer notre fichier. Nous allons devoir indiquer :

“Name » : Le nom du projet. Laisser vide pour utiliser le nom par défaut correspondant au nom du répertoire du projet.
« Version » : La numéro de version du projet. 1.0.0 par défaut.
« Description » : Description de votre projet qui sera utilisée dans la moteur de recherche de npm si vous partagez le projet.

Pour ajouter ensuite des paquets au fichier package.json, il suffit d’utiliser la commande npm install nom_du_paquet --save.

Pour installer un paquet globalement, il suffit d’utiliser la commande npm install avec l’option -g. Pour installer Sass globalement, par exemple, nous taperons npm install -g sass.

Comment savoir si un paquet est à jour, mettre à jour un paquet ou le supprimer ?

Pour obtenir la liste des paquets installés qui ne sont pas à jour (paquets qui disposent d’une version plus récente que celle installée), nous pouvons taper la commande npm outdated pour les paquets locaux ou npm outdated -g pour les paquets globaux.

Cette commande renvoie la liste complète des dépendances non à jour, y compris les dépendances de dépendances (cas où vos paquets utilisent eux mêmes d’autres paquets). Si souhaitez uniquement obtenir la liste des paquets non à jour que vous avez installés, vous pouvez ajouter un paramètre —depth=0 à la commande.

Pour mettre à jour les paquets non à jour, nous allons utiliser la commande npm update pour les paquets installés localement ou npm update -g pour les paquets installés globalement.

Enfin, pour supprimer un paquet, nous pouvons utiliser la commande npm uninstall nom_du_paquet.

Note : Le site npmjs.com (site officiel de npm) permet également de découvrir des packages, configurer des profils et gérer d’autres aspects de votre expérience npm.

L’article Installation et découverte de npm, le gestionnaire de paquets de Node.js est apparu en premier sur Pierre Giraud.

Créer un convertisseur d’unités en HTML et JavaScript

Pierre GIRAUD — Sat, 06 Jul 2019 10:00:35 +0000

Le JavaScript est un langage dit dynamique : il va nous permettre d’adapter nos pages en fonction de certaines actions des utilisateurs.

On va notamment pouvoir utiliser du JavaScript avec des éléments de formulaire HTML input pour créer en quelques lignes de codes des convertisseurs de toutes sortes comme :

Des convertisseurs de poids (g en kg en livres, etc.) ;
Des convertisseurs de distance (m en km en pouce en pied, etc.) ;
Des convertisseurs de vitesse ;
Des convertisseurs de monnaie ;
Des convertisseurs de température ;
Etc.

Quelque soit le convertisseur qu’on souhaite créer en JavaScript, le principe de base sera toujours la même. Dans ce tutoriel, nous allons nous concentrer sur la création d’un convertisseur de poids. N’hésitez pas ensuite à créer d’autres convertisseurs avec d’autres types d’unités, ça vous fera un bon entrainement !

L’élément HTML input : base du convertisseur

L’élément HTML input (élément de type champ de formulaire) est un élément HTML qui permet aux visiteurs de rentrer et de nous envoyer des données. C’est l’élément généralement privilégié et utilisé lorsqu’on souhaite dynamiser notre site et “dialoguer” avec les utilisateurs.

Nous allons créer trois champs de données input type="number" pour notre convertisseur dans lesquels l’utilisateur pourra saisir une quantité exprimée en grammes, en kilogrammes ou en livres.

On va donc avoir un fichier qui ressemble à cela :

La mise en forme CSS va être minimale :

L’idée va maintenant être de récupérer les données entrées dans un champ en Javascript et de mettre automatiquement et immédiatement à jour la valeur dans les autres champs.

En effet, si les éléments de formulaires HTML nous permettent de récolter des données utilisateurs, le HTML n’est pas un langage qui permet de manipuler ces données : nous utiliserons un autres langage comme le JavaScript ou le PHP pour cela.

Création du convertisseur en JavaScript

Pour créer notre convertisseur en JavaScript, il suffit de bien réfléchir à ce qu’on souhaite obtenir. Ici, on veut récupérer les données entrées dans l’un des 3 champs en JavaScript (sans savoir au préalable lequel sera rempli), convertir ces données et remplir les autres champs avec les données converties.

Pour récupérer les données d’un champ input en JavaScript, on va utiliser la méthode gestionnaire d’évènements addEventListener() pour réagir à un événement input. L’événement input se déclenche dès que le texte d’un élément input change.

On va ensuite également passer une traditionnelle fonction de rappel anonyme en deuxième argument de addEventListener(). Cette fonction anonyme va elle même appeler notre fonction de conversion.

Lorsque le texte ou la valeur d’un élément input change, on va vouloir récupérer cette valeur, effectuer les conversions et remplir les autres champs. Pour cela, il va déjà falloir qu’on sache quel champ a été rempli. On va pour cela utiliser nos id et la propriété JavaScript id qu’on va passer en premier argument de notre fonction de conversion.

Pour récupérer la valeur d’un champ dès qu’elle est entrée, on va utiliser la propriété value et la syntaxe this.value qu’on va passer en second argument de notre fonction de conversion.

Il ne nous reste plus qu’à créer notre fonction de conversion. Dans celle-ci, on va déjà déterminer quel champ a été rempli grâce à la valeur de id et, selon le champ rempli, on va effectuer différentes opérations de conversion et remplir les autres champs en direct.

Le code complet de notre convertisseur est donc le suivant :

See the Pen
Convertisseur HTML et JavaScript by Pierre (@pierregiraud)
on CodePen.

L’article Créer un convertisseur d’unités en HTML et JavaScript est apparu en premier sur Pierre Giraud.