Apprenez à programmer avec JavaScript

Jusqu’à présent, nous avons créé la page web de notre application Azertype, et nous l’avons rendue interactive grâce à la gestion des événements.

Dans cette dernière partie du cours, notre but sera de gérer les boutons radio de notre application pour permettre à l’utilisateur de choisir entre les deux types de textes proposés : des mots ou des phrases.

Voici un aperçu de ce que cela devrait donner :

Découvrez les différents types de champs de formulaire

À ce stade du projet, notre objectif est de répondre aux questions suivantes :

• Comment permettre aux utilisateurs de saisir des informations sur notre page web ?

• Comment leur permettre d’interagir avec le contenu ?

Exactement ! Mais il existe une grande variété de champs en programmation, en fonction du type de données utilisé (nombres, texte, e-mail, dates…). Concrètement, dans votre code, cela ressemble à l’exemple ci-dessous :

<form>
    <label for="name">Nom</label>
    <input type="text" id="name" name="name" placeholder="Votre nom" required>
    <label for="email">Email</label>
    <input type="email" id="email" name="email" placeholder="Votre email" required>
    <label for="message">Message</label>
    <textarea id="message" name="message" placeholder="Votre message" required></textarea>
    <input type="submit" value="Envoyer">
</form>

Un formulaire est composé d’une balise form qui englobe une série d’autres balises qui composent le formulaire : labels, input, texterea et select.

Revenons en détail sur chacune d’entre elles… 😉

Les balises labels

Les balises labels servent à indiquer un texte, lié au champ que l’utilisateur va devoir remplir. 

Les balises input

Les balises input (“entrée”, en français) forment le cœur des formulaires. Elles permettent à l’utilisateur de saisir des données. D’ailleurs, nous en avons déjà utilisé une dans notre projet. Eh oui, rappelez-vous, c’est grâce à cela que le joueur peut maintenant saisir le mot qu’il doit recopier.

<input type="text" id="inputEcriture" name="inputEcriture">

Les balises textarea

La balise input de type texte ne comporte qu’une seule ligne. Elle n’est donc pas indiquée pour saisir une grande portion de texte, comme un commentaire. Dans ce cas, la meilleure solution est d’utiliser une balise textarea, dans laquelle il sera plus pratique d’écrire des paragraphes :

<textarea name="textarea" id="textarea"></textarea>

Les balises select

La balise select permet de créer une liste déroulante où l'utilisateur peut sélectionner une option à partir d'une liste prédéfinie d'options. La liste d'options est définie à l'aide de balises option imbriquées à l'intérieur de la balise select.

Voici un exemple de champ select :

<select id="films" name="films">
    <option value="batman">Batman</option>
    <option value="seigneur-des-anneaux">Le seigneur des anneaux</option>
    <option value="titanic">Titanic</option>
</select>

Récupérez la valeur d’un champ

Maintenant que nous savons à quoi ressemble un formulaire, il est temps de récupérer, dans notre code JavaScript, le contenu de chacun de ces champs. Pour y parvenir, nous utiliserons différentes méthodes, en fonction du type de champ.

Récupérez les valeurs avec la propriété “value”

La plupart du temps, il est assez simple de récupérer la valeur d’un champ. Il suffit d’utiliser la propriété value.

Voici un exemple avec un champ appelé name :

<input type="text" id="nom" name="nom">

Pour récupérer sa valeur en JavaScript, nous écrirons :

let baliseNom = document.getElementById("nom")
let nom = baliseNom.value
console.log(nom); // affiche ce qui est contenu dans la balise name

Récupérez les valeurs des cases à cocher

Voici un exemple :

<input type="checkbox" id="accepter" name="accepter">

let baliseAccepter = document.getElementById("accepter")
let accepter = baliseAccepter.checked
console.log(accepter); // affiche true ou false

Récupérez les valeurs des boutons radio

Les boutons radio partagent le même“name”. De cette manière, lorsqu’un utilisateur clique sur un des boutons pour le sélectionner, les autres sont automatiquement désélectionnés. Ici aussi, il s’agit d’un cas particulier.

Regardons comment sont déclarés les boutons radio grâce à l’exemple ci-dessous :

<label>Préférence de couleur :</label>
<input type="radio" id="red" name="couleur" value="red" checked>
<label for="red">Rouge</label>
<input type="radio" id="blue" name="couleur" value="blue">
<label for="blue">Bleu</label>
<input type="radio" id="green" name="couleur" value="green">
<label for="green">Vert</label>

let baliseCouleur = document.querySelectorAll('input[name="couleur"]')
let couleur = ""
for (let i = 0; i < baliseCouleur.length; i++) {
    if (baliseCouleur[i].checked) {
        couleur = baliseCouleur[i].value
        break
    }
}
console.log(couleur) // affiche la valeur du radio coché

Dans le code ci-dessus :

• j’ai d'abord récupéré tous les inputs avec le name qui vaut “couleur”, en utilisant querySelectorAll ;

• j’ai ensuite parcouru l’ensemble des balises jusqu’à trouver une balise qui est cochée ;

• j’ai enfin stocké la couleur dans la variable couleur et j’ai écrit break, pour stopper la boucle et arriver directement au console.log après celle-ci. 

Récapitulons en vidéo

Je vous propose de revoir ces opérations dans la vidéo ci-dessous :

À vous de jouer !

Pour l’instant, dans notre application : 

• l’utilisateur doit recopier du texte qui provient systématiquement du tableau listeMots ;

• il y a deux boutons radio pour que l’utilisateur puisse choisir entre “Mots” ou “Phrases”, mais ils ne fonctionnent pas. 

L’objectif de cet exercice est de gérer ces boutons radio pour les rendre fonctionnels. Ainsi, à l’issue de l’exercice, lorsque l’utilisateur cliquera sur “Phrases”, il devra recopier une phrase. Inversement, lorsqu’il cliquera sur “Mots”, il devra recopier un mot.

Pour y parvenir :

• Écoutez l’événement “change” sur les boutons radio.

• Lorsque cet événement se déclenche, modifiez le texte proposé pour le remplacer par une phrase si l’utilisateur a cliqué sur “Phrases”, ou un mot si l’utilisateur a cliqué sur “Mots”. Pour cela : 

  • déclarez une nouvelle variable listeProposition initialisée par défaut à listeMots ;

  • utilisez cette nouvelle variable pour votre traitement à la place de listeMots ;

  • lorsque le joueur clique sur Phrases, modifiez la valeur de listeProposition pour qu’elle corresponde au tableau des phrases. Quand le joueur clique sur Mots, faites de même ;

  • mettez à jour l’affichage.

Corrigé

Vous pouvez vérifier votre travail en consultant le corrigé et la vidéo ci-dessous : 

En résumé

• Utilisez les formulaires pour permettre à l'utilisateur de saisir des informations. 

• Vous pouvez utiliser différent types de champs pour saisir ces informations :

  • input de différents types (texte, numérique, radio, case à cocher…) ;

  • textarea ;

  • select.

• Pour récupérer la valeur d’un champ, utilisez différentes options en fonction de votre contexte : 

  • pour la plupart des champs : utilisez la propriété value ;

  • pour les cases à cocher : utilisez la propriété checked ;

  • pour récupérer la valeur des boutons radio, parcourez-les jusqu’à trouver celui qui est coché, puis utilisez la propriété value sur ce bouton.

Vous savez désormais comment récupérer la valeur d’un champ ! Suivez-moi dans le prochain chapitre pour soumettre votre formulaire. 🚀