One place for hosting & domains

      Comment créer des éléments par glisser-déposer avec Vanilla JavaScript et HTML


      Introduction

      Le glisser-déposer est une interaction utilisateur courante que vous pouvez trouver dans de nombreuses interfaces graphiques.

      Il existe des bibliothèques JavaScript préexistantes permettant d’ajouter une fonction de glisser-déposer à votre application. Toutefois, il peut arriver qu’une bibliothèque ne soit pas disponible ou qu’elle introduise une surcharge ou une dépendance dont votre projet n’a pas besoin. Dans de telles situations, la connaissance des API dont vous disposez dans les navigateurs web modernes peut vous offrir des solutions alternatives.

      L’API HTML Drag and Drop s’appuie sur le modèle d’événement de DOM pour obtenir des informations sur ce qui est glissé ou déposé et pour mettre à jour cet élément par glisser-déposer. Grâce aux gestionnaires d’événements JavaScript, vous pouvez transformer n’importe quel élément en un élément pouvant être glissé ou déposé.

      Dans ce tutoriel, nous allons construire un exemple de glisser-déposer en utilisant l’API HTML Drag and Drop avec Vanilla JavaScript pour utiliser les gestionnaires d’événements.

      Conditions préalables

      Pour suivre ce tutoriel, vous aurez besoin de :

      • Un navigateur web moderne qui supporte l’API Drag and Drop (Chrome 4+, Firefox 3.5+, Safari 3.1+, Edge 18+).

      Étape 1 – Création du projet et balisage initial

      Notre projet consistera en un conteneur avec deux types d’éléments enfant :

      • Des éléments enfant que vous pouvez faire glisser
      • Des éléments enfant dans lesquels il est possible de déposer des éléments

      Tout d’abord, ouvrez la fenêtre de votre terminal et créez un nouveau répertoire de projets :

      • mkdir drag-and-drop-example

      Ensuite, naviguez vers ce répertoire :

      Puis créez un fichier index.html dans ce répertoire :

      Ajoutez maintenant du code passe-partout pour une page web HTML :

      index.html

      <!DOCTYPE html>
      <html>
        <head>
          <title>My Drag-and-Drop Example</title>
          <link rel="stylesheet" href="https://www.digitalocean.com/community/tutorials/style.css" />
        </head>
        <body>
        </body>
      </html>
      

      Et entre les balises <body> ajoutez votre élément draggable et votre dropzone (cible de largage) :

      index.html

      <div class="example-parent">
        <div class="example-origin">
          <div
            id="draggable-1"
            class="example-draggable"
          >
            draggable
          </div>
        </div>
      
        <div
          class="example-dropzone"
        >
          dropzone
        </div>
      </div>
      

      Enregistrez et fermez le fichier. Ensuite, créez un fichier style.css :

      Puis, ajoutez des styles pour les éléments de notre fichier index.html :

      style.css

      .example-parent {
        border: 2px solid #DFA612;
        color: black;
        display: flex;
        font-family: sans-serif;
        font-weight: bold;
      }
      
      .example-origin {
        flex-basis: 100%;
        flex-grow: 1;
        padding: 10px;
      }
      
      .example-draggable {
        background-color: #4AAE9B;
        font-weight: normal;
        margin-bottom: 10px;
        margin-top: 10px;
        padding: 10px;
      }
      
      .example-dropzone {
        background-color: #6DB65B;
        flex-basis: 100%;
        flex-grow: 1;
        padding: 10px;
      }
      

      Cela permettra d'ajouter un certain formatage à l'application. Vous pouvez maintenant visualiser index.html dans le navigateur et observer que cela produit un dragable <div> et un dropzone <div>.

      Capture d'écran des div draggable et dropzone

      Ensuite, nous rendrons explicitement le premier <div> glissant en ajoutant l'attribut draggable :

      index.html

      <div class="example-parent">
        <div class="example-origin">
          <div
            id="draggable-1"
            class="example-draggable"
            draggable="true"
          >
            draggable
          </div>
        </div>
      
        <div
          class="example-dropzone"
        >
          dropzone
        </div>
      </div>
      

      Enregistrez et fermez le fichier.

      Enfin, regardez à nouveau index.html dans le navigateur. Si nous cliquons sur le draggable <div> et le faisons glisser sur l'écran, il doit y avoir une indication visuelle de son déplacement.

      La valeur par défaut de l'attribut draggable est auto. Cela signifie que la possibilité de faire glisser l'élément sera déterminée par le comportement par défaut de votre navigateur. En général, cela signifie que les sélections de texte, les images et les liens peuvent être glissés sans qu'il soit nécessaire de spécifier draggable=" true".

      Vous avez maintenant un fichier HTML avec un élément glissant. Nous passerons à l'ajout de gestionnaires onevents.

      Étape 2 - Gestion des événements par glisser-déposer avec JavaScript

      Actuellement, si nous relâchons la souris tout en faisant glisser l'élément déplaçable, il ne se passe rien. Pour déclencher une action sur les éléments du DOM par glisser-déposer, nous devons utiliser l'API Drag and Drop :

      • ondragstart : ce gestionnaire d'événement sera attaché à notre élément draggable et se déclenchera lorsqu'un événement dragstart se produira.
      • ondragover : ce gestionnaire d'événements sera attaché à notre élément dropzone et se déclenchera lorsqu'un événement dragover se produira.
      • ondrop : ce gestionnaire d'événements sera également attaché à notre élément dropzone et se déclenchera lorsqu'un événement drop se produira.

      Remarque : il y a huit gestionnaires d'événements au total : ondrag, ondragend, ondragenter, ondragexit, ondragleave, ondragover, ondragstart et ondrop. Dans le cadre de notre exemple, nous n'aurons pas besoin de tous.

      Tout d'abord, référençons un nouveau fichier script.js dans notre index.html :

      index.html

      <body>
        ...
        <script src="https://www.digitalocean.com/community/tutorials/script.js"></script>
      </body>
      

      Ensuite, nous allons créer un nouveau fichier script.js :

      L'objet DataTransfer conservera les informations relatives à la traînée actuelle. Pour mettre à jour notre élément par glisser-déposer, nous devons accéder directement à l'objet DataTransfer. Pour ce faire, nous pouvons sélectionner la propriété dataTransfer de l'élément DOM DragEvent.

      Remarque : l'objet DataTransfer peut techniquement suivre les informations de plusieurs éléments glissés en même temps. Dans le cadre de notre exemple, nous nous concentrerons sur le glissement d'un élément.

      La méthode setData de l'objet dataTransfer peut être utilisée afin de définir les informations d'état de glissement pour votre élément actuellement glissé. Il faut deux paramètres :

      • une chaîne qui déclare le format du deuxième paramètre
      • les données réelles transférées

      Notre objectif est de déplacer notre élément draggable vers un nouvel élément parent. Nous devons pouvoir sélectionner notre élément draggable avec un identifiant unique. Nous pouvons définir l’identifiant de l'élément glissé avec la méthode setData pour qu'il puisse être utilisé plus tard.

      Revisitons notre fichier script.js et créons une nouvelle fonction pour utiliser setData :

      script.js

      function onDragStart(event) {
        event
          .dataTransfer
          .setData('text/plain', event.target.id);
      }
      

      Remarque : Internet Explorer 9 à 11 aurait des problèmes avec l'utilisation de "text/plain". Le format doit être 'text' pour ce navigateur.

      Pour mettre à jour le style CSS de l'élément glissé, nous pouvons accéder à ses styles en utilisant à nouveau l'événement DOM et en définissant les styles que nous voulons pour la currentTarget.

      Ajoutons-les à notre fonction et changeons la backgroundColor en yellow :

      script.js

      function onDragStart(event) {
        event
          .dataTransfer
          .setData('text/plain', event.target.id);
      
        event
          .currentTarget
          .style
          .backgroundColor="yellow";
      }
      

      Remarque : tous les styles que vous modifiez devront être à nouveau mis à jour manuellement sur drop si vous souhaitez des styles par glisser-déposer. Si vous changez quelque chose quand il commence à glisser, l'élément glissé conservera ce nouveau style à moins que vous ne le changiez à nouveau.

      Maintenant, nous avons notre fonction JavaScript pour le démarrage du glissement.

      Nous pouvons ajouter ondragstart à l'élément draggable dans index.html :

      index.html

      <div class="example-parent">
        <div class="example-origin">
          <div
            id="draggable-1"
            class="example-draggable"
            draggable="true"
            ondragstart="onDragStart(event);"
          >
            draggable
          </div>
        </div>
      
        <div class="example-dropzone">
          dropzone
        </div>
      </div>
      

      Consultez index.html dans votre navigateur. Si vous essayez de faire glisser votre objet maintenant, le style déclaré dans notre fonction sera appliqué :

      Gif animé représentant un élément se faisant glisser mais ne pouvant pas être déposer

      Cependant, rien ne se passera lorsque vous relâcherez votre clic.

      Le prochain gestionnaire d'événements déclenché dans cette séquence est ondragover.

      Le comportement par défaut de certains éléments DOM comme <div> dans les navigateurs n'accepte généralement pas d'être déposé. Ce comportement interceptera le comportement que nous essayons de mettre en œuvre. Pour nous assurer que nous obtenons le comportement drop souhaité, nous appliquerons preventDefault.

      Revisitons notre fichier script.js et créons une nouvelle fonction pour utiliser preventDefault. Ajoutez ce code à la fin du fichier :

      script.js

      function onDragOver(event) {
        event.preventDefault();
      }
      

      Maintenant, nous pouvons ajouter ondragover à notre élément dropzone dans index.html :

      index.html

      <div class="example-parent">
        <div class="example-origin">
          <div
            id="draggable-1"
            class="example-draggable"
            draggable="true"
            ondragstart="onDragStart(event);"
          >
            draggable
          </div>
        </div>
      
        <div
          class="example-dropzone"
          ondragover="onDragOver(event);"
        >
          dropzone
        </div>
      </div>
      

      À ce stade, nous n'avons toujours pas de code écrit pour gérer le dépôt réel. Le dernier gestionnaire d'événements déclenché dans cette séquence est ondrop.

      Revoyons notre fichier script.js et créons une nouvelle fonction.

      Nous pouvons référencer les données que nous avons enregistrées précédemment avec la méthode setData de l'objet dataTransfer. Nous utiliserons la méthode getData de l'objet dataTransfer. Les données que nous avons établies étaient l’id, c'est donc ce qui nous sera renvoyé :

      script.js

      function onDrop(event) {
        const id = event
          .dataTransfer
          .getData('text');
      }
      

      Sélectionnons notre élément draggable avec l’id que nous avons récupéré :

      script.js

      function onDrop(event) {
        // ...
      
        const draggableElement = document.getElementById(id);
      }
      

      Sélectionnons notre élément dropzone :

      script.js

      function onDrop(event) {
        // ...
      
        const dropzone = event.target;
      }
      

      Ajoutons notre élément draggable à la dropzone :

      script.js

      function onDrop(event) {
        // ...
      
        dropzone.appendChild(draggableElement);
      }
      

      Réinitialisons notre objet DataTransfer :

      script.js

      function onDrop(event) {
        // ...
      
        event
          .dataTransfer
          .clearData();
      }
      

      Maintenant, nous pouvons ajouter ondrop à notre élément dropzone dans index.html :

      index.html

      <div class="example-parent">
        <div class="example-origin">
          <div
            id="draggable-1"
            class="example-draggable"
            draggable="true"
            ondragstart="onDragStart(event);"
          >
            draggable
          </div>
        </div>
      
        <div
          class="example-dropzone"
          ondragover="onDragOver(event);"
          ondrop="onDrop(event);"
        >
          dropzone
        </div>
      </div>
      

      Une fois que cela est fait, nous avons une fonction de glisser-déposer fonctionnelle. Affichez index.html dans votre navigateur et faites glisser l'élément draggable sur la dropzone.

      Gif animé représentant un élément glissé et déposé dans une cible de largage

      Notre exemple porte sur le scénario d'un seul objet pouvant être déplacé et d'une seule cible de largage. Vous pouvez avoir plusieurs objets à faire glisser, plusieurs cibles où les déposer, et personnaliser tout cela avec tous les autres gestionnaires d'événements de l'API Drag and Drop.

      Étape 3 - Construction d'un exemple complexe avec plusieurs éléments glissants

      Voici un autre exemple de la manière dont vous pourriez utiliser cette API : une liste de tâches avec des tâches glissantes que vous pouvez déplacer d'une colonne "To-do" à une colonne "Done".

      Gif animé représentant plusieurs tâches glissées et déposées dans une colonne Done

      Pour créer votre propre liste de tâches, ajoutez à index.html d'autres éléments à faire glisser avec des ids uniques :

      index.html

      <div class="example-parent">
        <h1>To-do list</h1>
        <div class="example-origin">
          To-do
          <div
            id="draggable-1"
            class="example-draggable"
            draggable="true"
            ondragstart="onDragStart(event);"
          >
            thing 1
          </div>
          <div
            id="draggable-2"
            class="example-draggable"
            draggable="true"
            ondragstart="onDragStart(event);"
          >
            thing 2
          </div>
          <div
            id="draggable-3"
            class="example-draggable"
            draggable="true"
            ondragstart="onDragStart(event);"
          >
            thing 3
          </div>
          <div
            id="draggable-4"
            class="example-draggable"
            draggable="true"
            ondragstart="onDragStart(event);"
          >
            thing 4
          </div>
        </div>
      
        <div
          class="example-dropzone"
          ondragover="onDragOver(event);"
          ondrop="onDrop(event);"
        >
          Done
        </div>
      </div>
      

      Affichez index.html dans votre navigateur et faites glisser les éléments de la colonne To-do vers la colonne Done. Vous avez créé une application to-do et testé la fonctionnalité.

      Conclusion

      Dans cet article, vous avez créé une application to-do pour explorer la fonctionnalité de glisser-déposer qui est disponible pour les navigateurs web modernes.

      L'API Drag and Drop offre de multiples options pour personnaliser vos actions au-delà du simple glisser-déposer. Par exemple, vous pouvez mettre à jour le style CSS de vos éléments glissés. Vous pouvez également, au lieu de déplacer l'élément, choisir de copier votre élément déplaçable afin qu'il soit reproduit lors du dépôt.

      Gardez à l'esprit que si de nombreux navigateurs web prennent en charge cette technologie, vous ne pourrez peut-être pas vous y fier si votre public se compose d’appareils qui ne prennent pas en charge cette fonctionnalité.

      Pour en savoir plus sur tout ce que vous pouvez déposer avec l'API Drag and Drop, consultez les documents du MDN à ce sujet.



      Source link

      Comprendre les paramètres par défaut dans JavaScript


      L’auteur a choisi le COVID-19 Relief Fund pour recevoir un don dans le cadre du programme Write for DOnations.

      Introduction

      Dans ECMAScript 2015, les paramètres de fonction par défaut ont été introduits au langage JavaScript. Celles-ci permettent aux développeurs d’initialiser une fonction avec des valeurs par défaut si les arguments ne sont pas fournis à l’appel de fonction. Initialiser les paramètres de fonction de cette manière rendra vos fonctions plus faciles à lire et moins sujettes aux erreurs, et fournira un comportement par défaut pour vos fonctions. Cela vous aidera à éviter les erreurs dues au passage d’arguments undefined et à la déstructuration d’objets qui n’existent pas.

      Dans cet article, vous examinerez la différence entre paramètres et arguments, vous apprendrez comment utiliser les paramètres par défaut dans les fonctions, vous verrez d’autres façons de prendre en charge les paramètres par défaut et vous apprendrez quels types de valeurs et d’expressions peuvent être utilisés comme paramètres par défaut. Vous passerez également en revue des exemples qui montrent comment les paramètres par défaut fonctionnent en JavaScript.

      Arguments et paramètres

      Avant d’expliquer les paramètres de fonction par défaut, il est important de savoir ce que sont les paramètres par défaut. Pour cette raison, nous allons d’abord examiner la différence entre les arguments et les paramètres d’une fonction.  Si vous souhaitez en savoir plus sur cette distinction, consultez notre article précédent de la série JavaScript, Comment définir les fonctions en JavaScript.

      Dans le bloc de code suivant, vous allez créer une fonction qui renvoie le cube d’un numéro donné, défini comme x :

      // Define a function to cube a number
      function cube(x) {
        return x * x * x
      }
      

      La variable x dans cet exemple est un paramètre — une variable nommée passée dans une fonction. Un paramètre doit toujours être contenu dans une variable et ne doit jamais avoir de valeur directe.

      Regardez maintenant ce prochain bloc de code, qui appelle la fonction cube que vous venez de créer :

      // Invoke cube function
      cube(10)
      

      Cela donnera le résultat suivant :

      Output

      1000

      Dans ce cas, 10 est un argument – une valeur transmise à une fonction lorsqu’elle est invoquée. Souvent, la valeur sera également contenue dans une variable comme dans cet exemple :

      // Assign a number to a variable
      const number = 10
      
      // Invoke cube function
      cube(number)
      

      Cela donnera le même résultat :

      Output

      1000

      Si vous ne passez pas un argument à une fonction qui en attend un, la fonction utilisera implicitement undefined en tant que valeur :

      // Invoke the cube function without passing an argument
      cube()
      

      Cela retournera :

      Output

      NaN

      Dans ce cas, cube() essaie de calculer la valeur de undefined * undefined * undefined, ce qui donne NaN, ou “not a number”. Pour en savoir plus, consultez la section sur les nombres de la rubrique “Comprendre les types de données en JavaScript”.

      Ce comportement automatique peut parfois poser problème. Dans certains cas, vous pouvez souhaiter que le paramètre ait une valeur même si aucun argument n’a été transmis à la fonction. C’est là que la fonction de paramètres par défaut est pratique, un sujet que vous aborderez dans la section suivante.

      Syntaxe des paramètres par défaut

      Avec l’ajout de paramètres par défaut dans ES2015, vous pouvez maintenant attribuer une valeur par défaut à n’importe quel paramètre, que la fonction utilisera au lieu d’undefined lorsqu’elle est appelée sans argument. Cette section vous montrera d’abord comment le faire manuellement, puis vous guidera dans la définition des paramètres par défaut.

      Sans paramètres par défaut, vous devriez explicitement rechercher des valeurs undefined afin de définir des valeurs par défaut, comme le montre cet exemple :

      // Check for undefined manually
      function cube(x) {
        if (typeof x === 'undefined') {
          x = 5
        }
      
        return x * x * x
      }
      
      cube()
      

      Cela utilise une instruction conditionnelle pour vérifier si la valeur a été automatiquement fournie comme undefined puis fixe la valeur de x à 5. Cela donnera la sortie suivante :

      Output

      125

      En revanche, l’utilisation de paramètres par défaut atteint le même but avec beaucoup moins de code. Vous pouvez définir une valeur par défaut pour le paramètre en cube en l’assignant avec l’opérateur d’assignation d’égalité (=), comme souligné ici :

      // Define a cube function with a default value
      function cube(x = 5) {
        return x * x * x
      }
      

      Maintenant, lorsque la fonction cube est invoquée sans argument, elle affectera 5 à x et retournera le calcul au lieu de NaN :

      // Invoke cube function without an argument
      cube()
      

      Output

      125

      Elle fonctionnera toujours comme prévu lorsqu’un argument est passé, en ignorant la valeur par défaut :

      // Invoke cube function with an argument
      cube(2)
      

      Output

      8

      Cependant, une mise en garde importante à noter est que la valeur par défaut du paramètre remplacera également une valeur explicite undefined passée comme argument à une fonction, comme démontré ici :

      // Invoke cube function with undefined
      cube(undefined)
      

      Cela donnera le calcul avec x égal à 5 :

      Output

      125

      Dans ce cas, les valeurs des paramètres par défaut ont été calculées, et une valeur undefined explicite ne les a pas remplacées.

      Maintenant que vous avez une idée de la syntaxe de base des paramètres par défaut, la section suivante indiquera comment les paramètres par défaut fonctionnent avec différents types de données.

      Types de données des paramètres par défaut

      Toute valeur ou objet primitif peut être utilisé comme valeur de paramètre par défaut.  Dans cette section, vous verrez comment cette flexibilité augmente les possibilités d’utilisation des paramètres par défaut.

      Tout d’abord, définissez des paramètres en utilisant un numéro, une chaîne, un booléen, un objet, un tableau et une valeur nulle comme valeur par défaut. Cet exemple utilisera la syntaxe des fonctions fléchées :

      // Create functions with a default value for each data type
      const defaultNumber = (number = 42) => console.log(number)
      const defaultString = (string = 'Shark') => console.log(string)
      const defaultBoolean = (boolean = true) => console.log(boolean)
      const defaultObject = (object = { id: 7 }) => console.log(object)
      const defaultArray = (array = [1, 2, 3]) => console.log(array)
      const defaultNull = (nullValue = null) => console.log(nullValue)
      

      Lorsque ces fonctions sont invoquées sans paramètres, elles utiliseront toutes les valeurs par défaut :

      // Invoke each function
      defaultNumber()
      defaultString()
      defaultBoolean()
      defaultObject()
      defaultArray()
      defaultNull()
      

      Output

      42 "Shark" true {id: 7} (3) [1, 2, 3] null

      Notez que tout objet créé dans un paramètre par défaut sera créé chaque fois que la fonction sera appelée. Un des cas d’utilisation courantes des paramètres par défaut est d’utiliser ce comportement pour obtenir des valeurs d’un objet. Si vous essayez de déstructurer ou d’accéder à une valeur à partir d’un objet qui n’existe pas, cela lancera une erreur. Cependant, si le paramètre par défaut est un objet vide, cela donnera simplement des valeurs undefined au lieu de lancer une erreur :

      // Define a settings function with a default object
      function settings(options = {}) {
        const { theme, debug } = options
      
        // Do something with settings
      }
      

      Cela permet d’éviter l’erreur causée par la déstructuration d’objets qui n’existent pas.

      Maintenant que vous avez vu comment les paramètres par défaut fonctionnent avec différents types de données, la section suivante indiquera comment plusieurs paramètres par défaut peuvent fonctionner ensemble.

      Utilisation de plusieurs paramètres par défaut

      Vous pouvez utiliser autant de paramètres par défaut que vous voulez dans une fonction. Cette section vous montrera comment procéder et comment l’utiliser pour manipuler le DOM dans un exemple concret.

      Tout d’abord, déclarez une fonction sum() avec plusieurs paramètres par défaut :

      // Define a function to add two values
      function sum(a = 1, b = 2) {
        return a + b
      }
      
      sum()
      

      Il en résultera le calcul par défaut suivant :

      Output

      3

      De plus, la valeur utilisée dans un paramètre peut être utilisée dans n’importe quel paramètre par défaut ultérieur, de gauche à droite. Par exemple, cette fonction createUser crée un objet userObj comme troisième paramètre, et tout ce que la fonction elle-même fait est de retourner userObj avec les deux premiers paramètres :

      // Define a function to create a user object using parameters
      function createUser(name, rank, userObj = { name, rank }) {
        return userObj
      }
      
      // Create user
      const user = createUser('Jean-Luc Picard', 'Captain')
      

      Si vous appelez user ici, vous obtiendrez ce qui suit :

      Output

      {name: "Jean-Luc Picard", rank: "Captain"}

      Il est généralement recommandé de placer tous les paramètres par défaut à la fin d’une liste de paramètres, afin de pouvoir facilement laisser de côté les valeurs facultatives. Si vous utilisez d’abord un paramètre par défaut, vous devrez explicitement passer undefined pour utiliser la valeur par défaut.

      Voici un exemple avec le paramètre par défaut au début de la liste :

      // Define a function with a default parameter at the start of the list
      function defaultFirst(a = 1, b) {
        return a + b
      }
      

      Lorsque vous appelez cette fonction, vous devriez appeler defaultFirst() avec deux arguments :

      defaultFirst(undefined, 2)
      

      Cela donnerait ce qui suit :

      Output

      3

      Voici un exemple avec le paramètre par défaut à la fin de la liste :

      // Define a function with a default parameter at the end of the list
      function defaultLast(a, b = 1) {
        return a + b
      }
      
      defaultLast(2)
      

      Cela donnerait la même valeur :

      Output

      3

      Les deux fonctions ont le même résultat, mais celle dont la valeur par défaut est la dernière permet un appel de fonction beaucoup plus propre.

      Pour un exemple concret, voici une fonction qui va créer un élément DOM, et ajouter un label texte et des classes, si elles existent.

      // Define function to create an element
      function createNewElement(tag, text, classNames = []) {
        const el = document.createElement(tag)
        el.textContent = text
      
        classNames.forEach(className => {
          el.classList.add(className)
        })
      
        return el
      }
      

      Vous pouvez appeler la fonction avec certaines classes dans un tableau :

      const greeting = createNewElement('p', 'Hello!', ['greeting', 'active'])
      

      L’appel de greeting donnera la valeur suivante :

      Output

      <p class="greeting active">Hello!</p>

      Cependant, si vous quittez le tableau de classNames hors de l’appel de fonction, cela fonctionne toujours.

      const greeting2 = createNewElement('p', 'Hello!')
      

      greatt2 a maintenant la valeur suivante :

      Output

      <p>Hello!</p>

      Dans cet exemple, forEach() peut être utilisé sur un tableau vide sans problème. Si ce tableau vide n’était pas défini dans le paramètre par défaut, vous obtiendriez l’erreur suivante :

      Output

      VM2673:5 Uncaught TypeError: Cannot read property 'forEach' of undefined at createNewElement (<anonymous>:5:14) at <anonymous>:12:18

      Maintenant que vous avez vu comment plusieurs paramètres par défaut peuvent interagir, vous pouvez passer à la section suivante pour voir comment les appels de fonction opèrent en tant que paramètres par défaut.

      Appels de fonction comme paramètres par défaut

      En plus des primitives et des objets, le résultat de l’appel d’une fonction peut être utilisé comme paramètre par défaut.

      Dans ce bloc de code, vous créerez une fonction pour renvoyer un nombre aléatoire, puis vous utiliserez le résultat comme valeur de paramètre par défaut dans une fonction cube :

      // Define a function to return a random number from 1 to 10
      function getRandomNumber() {
        return Math.floor(Math.random() * 10)
      }
      
      // Use the random number function as a default parameter for the cube function
      function cube(x = getRandomNumber()) {
        return x * x * x
      }
      

      Maintenant, l’invocation de la fonction cube sans paramètre aura des résultats potentiellement différents chaque fois que vous l’appelez :

      // Invoke cube function twice for two potentially different results
      cube()
      cube()
      

      Le résultat de ces appels de fonction variera :

      Output

      512 64

      Vous pouvez même utiliser des méthodes intégrées, comme celles de l’objet Math, et utiliser la valeur renvoyée dans un appel de fonction comme paramètre dans une autre fonction.

      Dans l’exemple suivant, un nombre aléatoire est attribué à x, qui est utilisé comme paramètre dans la fonction cube que vous avez créée.  Le paramètre y calculera alors la racine cubique du nombre et vérifiera si x et y sont égaux :

      // Assign a random number to x
      // Assign the cube root of the result of the cube function and x to y
      function doesXEqualY(x = getRandomNumber(), y = Math.cbrt(cube(x))) {
        return x === y
      }
      
      doesXEqualY()
      

      Cela donnera le résultat :

      Output

      true

      Un paramètre par défaut peut même être une définition de fonction, comme on le voit dans cet exemple, qui définit un paramètre comme la fonction inner et renvoie l’appel de fonction du paramètre :

      // Define a function with a default parameter that is an anonymous function
      function outer(
        parameter = function inner() {
          return 100
        }
      ) {
        return parameter()
      }
      
      // Invoke outer function
      outer()
      

      Output

      100

      Cette fonction inner sera créée à partir de zéro chaque fois que la fonction outer est invoquée.

      Conclusion

      Dans cet article, vous avez appris ce que sont les paramètres de fonction par défaut et comment les utiliser. Vous pouvez maintenant utiliser les paramètres par défaut pour vous aider à garder vos fonctions propres et faciles à lire. Vous pouvez également assigner des objets et des tableaux vides aux paramètres par défaut afin de réduire à la fois la complexité et les lignes de code lorsque vous traitez des situations telles que la récupération de valeurs d’un objet ou le bouclage dans un tableau.

      Si vous souhaitez en savoir plus sur JavaScript, consultez la page d’accueil de notre série Comment coder en JavaScript, ou parcourez notre série Comment coder en Node.js pour lire des articles sur le développement back-end.



      Source link