IONIC Section 4 - 4.12 Utiliser des éléments Ionic comme des éléments HTML "Normaux"

Cliquez içi pour plus de vidéos disponibles sur notre chaine youtube !

Bonjour à tous, maintenant, tout cela est en train de prendre forme, il est maintenant temps d’ajouter une certaine logique, et par logique, je veux dire écrire du code qui fera quelque chose lorsque l’on clique sur l’un de ces boutons. Plus tard, nous allons le faire avec l’aide d’Angular, mais le but est de vous montrer que vous n’avez pas forcément besoin d’Angular, cela fonctionne également avec JavaScript en intégrant quelques components web dans notre application, nous pouvons interagir avec eux comme avec des éléments HTML normaux. C’est bien entendu la raison pour laquelle vous pouvez utiliser pour les versions ultérieures avec Angular, React, Vue, ou le framework de votre choix. Donc on peut ajouter un fichier qui s’appelle « app.js », et on va importer ce fichier à la fin de notre fichier HTML, juste avant la balise fermante de « body »en insérant la balise «script src=« app/js »script». Maintenant, pour avoir accès aux entrées et aux boutons, je vais leur ajouter des identifiants. Pour se faire, vous pouvez ajouter des classes CSS et utiliser les sélecteurs de balise. Cependant, étant donné que nous avons plusieurs « ion-input », utilisant le sélecteur de balise pour y accéder, cela va fonctionner mais de manière délicate. Donc, je vais renseigné un id pour chacun d’eux, donc id=« input-reason » pour les raisons de dépenses, un id=« input-amount » pour le montant de la dépense, et pour les boutons, concernant « effacer », on indique un id=« « btn-cancel », et pour l’autre, id=« btn-confirm ». Avec ces identifiants attribuées, nous allons sur notre fichier « app.js », et stocker les références à ces éléments dans certaines constantes, comme « const reasonInput = document.querySelector» ce qui permet d’accéder en utilisant le sélecteur de requête de document, puis le « # » pour utiliser le sélecteur d’identifiant, ce qui nous donne « const reasonInput = document.querySelector(‘#input-reason’)». Donc le texte saisi entre parenthèses doit correspondre au nom d’identifiant que vous avez attribué. Ensuite, nous aurons accès au montant saisie, donc on duplique la ligne, et on change par (‘#input-amount’). Donc voilà pour ces 2 entrées, maintenant je veux aussi avoir accès à mes boutons, donc on va faire « const cancelBtn = document.querySelector(‘#btn-cancel’)» et « confirmBtn = document.querySelector(‘#btn-confirm’)», nous avons bien stockés tous ces éléments. Dans ce code JavaScript que j’écris à l’instant, je peux ajouter mes auditeurs bouton de confirmation, par exemple. Nous pouvons ajouter mes auditeurs, d’évènement à l'événement « click », puis cette fonction sera exécutée une fois que nous aurons cliquer sur le bouton. Donc on va faire « confirmBtn.addEventListener(‘click’, () => { console.log(‘It works’); });» et si on retourne dans notre application et qu’on inspecte l’élément pour avoir accès à la console de cette page, recharger la page et cliquer sur ajouter les dépenses, et vous devriez voir que cela fonctionne maintenant si vous avez tout saisie correctement. Donc c’est parfait, dans notre prochaine vidéo, assurons-nous de lire les valeurs que nous stockons ici et de pouvoir les valider et les afficher sous notre card.