Interactivité javascript avec un haiku aléatoire

Temps de lecture : 2 minutes

JavaScript est le moteur qui alimente l’interactivité sur le web. Il permet de transformer des pages statiques en expériences dynamiques et engageantes. Dans l’exemple que nous avons choisi, JavaScript est utilisé pour créer une page web interactive qui affiche un haïku aléatoire à chaque clic sur un bouton.

Comment JavaScript Améliore l’UX ?

1. Interactivité Immédiate : Dès que la page se charge, JavaScript entre en action. Un haïku aléatoire est affiché, capturant l’attention de l’utilisateur. Cette réactivité instantanée est un élément clé d’une bonne expérience utilisateur.
   
2. Réponse aux Actions de l’Utilisateur : Le bouton sur la page n’est pas seulement un élément décoratif. Grâce à JavaScript, il devient un outil interactif. Lorsque l’utilisateur clique dessus, un nouveau haïku est généré et affiché. Cette interaction directe entre l’utilisateur et la page web crée une expérience plus immersive et engageante.
   
3. Simplicité et Efficacité : L’exemple démontre que même un petit script JavaScript peut avoir un impact significatif sur l’expérience utilisateur. Le code est simple, mais l’effet est puissant. Cela montre que l’efficacité en design UX ne dépend pas de la complexité, mais de la pertinence de l’interaction.
   
4. Manipulation du DOM : JavaScript interagit directement avec le Document Object Model (DOM), permettant de modifier le contenu et la structure de la page en temps réel. Cette capacité à modifier dynamiquement les éléments de la page est fondamentale dans la création d’interfaces utilisateurs interactives et réactives.

Code concret pour débutants

See the Pen Javascript interactivity 00 by Jerome Mercier (@jmercier) on CodePen.0

Le code commenté par l’IA

Le HTML définit la structure de la page. Ici, vous avez un <div> contenant un <h1> et un <button>. Le <h1> servira à afficher un haïku, tandis que le bouton permettra de générer un nouveau haïku aléatoire. Les id sur ces éléments ("h1" et "click") sont importants car ils permettent au JavaScript de cibler ces éléments spécifiques.

CSS

Le CSS gère l’apparence de la page. Vous avez utilisé des polices de Google Fonts, ce qui montre comment intégrer des ressources externes. Les styles sont appliqués pour créer une présentation attrayante, en utilisant des couleurs, des bordures, des marges, et des effets de survol sur le bouton. Cela montre comment le CSS peut améliorer l’expérience utilisateur (UX) en rendant l’interface plus engageante et intuitive.

JavaScript

Le cœur de l’interactivité se trouve dans le JavaScript. Voici les éléments clés :

• Array de Haïkus : Un tableau frenchHaikus contient une liste de haïkus. Cela illustre comment stocker des données dans un format facilement accessible.
• Sélection d’éléments : document.getElementById est utilisé pour sélectionner les éléments HTML que le script doit manipuler.
• Écouteurs d’événements : click.addEventListener attache un gestionnaire d’événements au bouton. Lorsque le bouton est cliqué, la fonction randomSentence est appelée. Il y a aussi un écouteur sur l’événement DOMContentLoaded, qui exécute randomSentence une fois que le contenu de la page est chargé. Cela montre comment réagir à des actions de l’utilisateur et à des événements du navigateur.
• Génération aléatoire : La fonction randomSentence sélectionne un haïku au hasard du tableau et met à jour le contenu de <h1> avec ce haïku. Cela démontre la manipulation du DOM (Document Object Model) et l’utilisation de fonctions aléatoires.

Ressources