JavaScript pour les optimiseurs : utilisation des champs de saisie

Vous voulez tester plus que la couleur d'un bouton ? Ensuite, vous devez apprendre JavaScript. J'ai commencé une série couvrant les étapes pratiques de l'utilisation de JavaScript pour mettre en place des expériences gagnantes sur votre site Web.

Chaque article de la série couvre une méthode différente de JavaScript, illustrée par l'application des meilleures pratiques aux sites Web en tant que cas hypothétiques.

Analyse de rentabilisation : optimiser les champs de saisie pour améliorer l'expérience utilisateur

Notre cas hypothétique pour ce chapitre concerne l'utilisation de champs de saisie pour améliorer l'expérience utilisateur .

La recherche a montré que les utilisateurs ont tendance à trouver les formulaires opt-in frustrants. Pour atténuer l'impact, nous identifions les champs de saisie spécifiques que nous souhaitons modifier.

Dans ce scénario hypothétique, nous arrivons à l'hypothèse suivante :

Pour tester cette hypothèse, nous allons appliquer les modifications ci-dessous :

Le code utilisé dans l'expérience

Maintenant pour la partie amusante !

Pour exécuter le changement, nous exécutons le code JavaScript suivant sur la page de test. Essayez-le par vous-même pour le voir en action !

 var testForm = document.querySelector(".testForm");
var firstNameInput = testForm.childNodes[3] ;
var emailInput = testForm.childNodes[8] ;
var maleRadio = document.getElementById("male");
var radiofemelle = document.getElementById("femelle");
var rangeSlider = document.getElementsByClassName("curseur");
var googleSelector = document.getElementById("google");

function addPlaceholder(inputField, placeHolderText) {
  inputField.setAttribute("placeholder", placeHolderText);
}
addPlaceholder(firstNameInput, "Jeroen");
addPlaceholder(emailInput, "[email protected]");

function changeRadioSelection(ancienBouton, nouveauBouton) {
  oldButton.removeAttribute("vérifié");
  newButton.setAttribute("vérifié", "vérifié");
}
changeRadioSelection(maleRadio, femaleRadio);

fonction changeRangeValue(plage, valeur) {
  range[0].setAttribute("valeur", valeur);
}
changeRangeValue(rangeSlider, "50");

function addExtraSelectOption(selectDiv, optionName, optionValue) {
  var nouvelleOption = document.createElement("OPTION");
  var newOptionNode = document.createTextNode(optionName);
  newOption.appendChild(newOptionNode);
  newOption.setAttribute("value", optionValue);
  selectDiv.appendChild(nouvelleOption);
}
addExtraSelectOption(googleSelector, "Google Spreadsheets", "gs");

Répartition du code

1. Nouvelle syntaxe

La ventilation commence par passer en revue toute la nouvelle syntaxe dans l'exemple ci-dessus. Étant donné que cet article fait partie d'une série, assurez-vous de vérifier la documentation complète de la syntaxe dans les articles précédents.

.childNodes[index] est une propriété qui renvoie un tableau de nœuds enfants. Vous pouvez accéder aux nœuds spécifiques du tableau avec un index. Les éléments de nœud dans un tableau commencent au numéro zéro. Pour accéder au premier nœud du tableau, vous devrez mettre un 0 entre les crochets.

Vous pouvez utiliser cette propriété au lieu d'un sélecteur CSS pour sélectionner des nœuds enfants. Un avantage supplémentaire de l'utilisation de cette propriété est la sélection de nœuds de texte.

Voici un exemple:

ChildNodes[0] sélectionne l'élément H1 et collecte ses enfants dans un tableau. Il renvoie le tableau suivant :

 [enfantNode, enfantNode2, enfantNode3]

Le seul enfant dans le H1 est le texte lui-même. Le texte du H1 est à l'index 0. Le nœud de texte est renvoyé par la propriété.

document.getElementById(id) est une méthode qui renvoie un élément qui a un attribut id correspondant. Vous devez transmettre l'identifiant sous forme de chaîne. Cet exemple est la version simple de la méthode querySelector. Vous pouvez utiliser cette méthode pour un seul identifiant.

Vous pourriez vous demander pourquoi cela existe si vous avez la méthode querySelector. Cette méthode existe car le créateur de JavaScript a ajouté la méthode getElementById dans une version antérieure de JavaScript. Les créateurs ont ajouté la méthode querySelector plus tard pour faciliter la sélection des éléments.

Bien que la plupart des navigateurs prennent en charge la méthode querySelector, il peut être utile de vérifier si la plupart des navigateurs les prennent en charge.

Un code non pris en charge peut casser un site Web sur un ancien navigateur. Un excellent site Web pour vérifier les méthodes JavaScript est caniuse.com.

document.getElementsByClassName(class) est une méthode qui renvoie tous les éléments avec une classe spécifique dans l'ensemble du document. Vous devez transmettre la classe sous forme de chaîne. Il renvoie les éléments d'un tableau.

Vous pouvez également remplacer document par un autre élément, de sorte qu'il ne regarde que les éléments enfants de la sélection. Cette méthode peut être très utile car elle est plus efficace. Si vous utilisez l'objet document comme sélection, il doit vérifier l'intégralité du document.

Tout comme la méthode childNodes, elle renverra un tableau avec une seule correspondance.

.removeAttribute(attribute) est une méthode qui supprime un attribut d'un élément. Vous supprimerez les valeurs attachées à l'attribut.

Lorsque l'élément n'a pas l'attribut, il exécutera la méthode sans erreur. Vous devez transmettre l'attribut sous forme de chaîne.

2. Logique

 var testForm = document.querySelector(".testForm");

Dans cette ligne de code, nous attribuons le formulaire à la variable testForm. Pour ce faire, nous sélectionnons la classe testForm avec la méthode querySelector.

 var firstNameInput = testForm.childNodes[3] ;

Ensuite, nous attribuons le champ de saisie du prénom à la variable firstNameInput. Pour ce faire, nous sélectionnons le quatrième nœud enfant avec le sélecteur childNodes . Remarquez comment le troisième index est la quatrième position.

 var emailInput = testForm.childNodes[8] ;

Ici, nous attribuons le champ de saisie mail à la variable emailInput. Le champ d'entrée est le 9e nœud de la variable testForm.

 var maleRadio = document.getElementById("male");

Dans cette ligne, nous attribuons au bouton radio la valeur male. Nous utilisons la méthode getElementById pour le sélectionner par id simplement.

 var radiofemelle = document.getElementById("femelle");

Ensuite, nous attribuons le bouton radio avec la valeur femelle à la variable femelleRadio avec la méthode getElementById.

 var rangeSlider = document.getElementsByClassName("curseur");

Ici, nous attribuons un tableau d'éléments avec la classe slider à la variable rangeSlider. J'ai utilisé cette méthode comme exemple, mais il serait plus facile d'utiliser simplement une méthode querySelector.

 var googleSelector = document.getElementById("google");

Nous terminons nos variables en affectant le champ de saisie select avec la classe google à notre variable googleSelector.

 function addPlaceholder(inputField, placeHolderText) {

Cette fonction ajoute un texte d'espace réservé à un champ de saisie de texte. Vous pouvez transmettre le champ de saisie comme premier argument et le texte de l'espace réservé comme chaîne dans le deuxième argument.

 inputField.setAttribute("placeholder", placeHolderText);

Vous affichez un texte d'espace réservé en ajoutant l'attribut d'espace réservé au champ de texte de saisie. Nous pouvons ajouter cet attribut et cette valeur avec la méthode setAttribute.

 }

L'accolade ferme notre première fonction.

 addPlaceholder(firstNameInput, "Jeroen");

Nous appelons la fonction la première fois pour ajouter un exemple de nom comme espace réservé au champ de saisie du prénom.

 addPlaceholder(emailInput, "[email protected]");

Nous appelons la fonction une deuxième fois pour ajouter un exemple d'adresse e-mail au champ de saisie e-mail.

Les fonctions peuvent être pratiques pour regrouper le code et le rendre compréhensible pour les autres développeurs. Si vous aviez un œil averti, vous avez peut-être remarqué que nous aurions pu ignorer complètement la fonction en utilisant simplement ces deux lignes de code :

 firstNameInput.setAttribute("placeholder", "Jeroen");
emailInput.setAttribute("placeholder", "[email protected]");

En tant que programmeur, il est important de remarquer quand vous devez créer une fonction et n'utiliser qu'une simple ligne. Cet exemple aurait pu me faire économiser trois lignes de code. Moins de code est généralement meilleur pour la vitesse de chargement.

 function changeRadioSelection(ancienBouton, nouveauBouton) {

La deuxième fonction supprime la sélection de l'ancien bouton radio et sélectionne un nouveau bouton radio. De cette façon, nous pouvons changer le bouton qui est coché par défaut lors du chargement de la page.

 oldButton.removeAttribute("vérifié");

L'attribut coché détermine le bouton radio qui est coché. Lorsqu'un élément contient coché = "coché", il apparaîtra coché à l'écran. Nous utilisons la méthode removeAttribute pour supprimer l'état coché. Nous l'appelons sur notre variable oldButton.

 newButton.setAttribute("vérifié", "vérifié");

Ensuite, nous mettons simplement le même attribut et la même valeur à notre variable newButton pour changer la sélection par défaut.

 }

Cette accolade termine notre deuxième fonction.

 changeRadioSelection(maleRadio, femaleRadio);

Nous appelons la fonction une fois pour changer la valeur par défaut de nos boutons radio en femelle.

Ici, nous aurions pu économiser à nouveau 2 lignes de code en écrivant simplement ceci :

 maleRadio.removeAttribute("vérifié");
femaleRadio.setAttribute("vérifié", "vérifié");

J'aime utiliser les fonctions car cela me permet d'étendre rapidement le code à l'avenir. Imaginez faire cela pour 20 boutons avec un tableau, par exemple.

Avec le développement de tests, nous savons que notre code est généralement temporaire, donc la perfection à 100% n'est pas une exigence, à mon avis.

 fonction changeRangeValue(plage, valeur) {

Cette fonction modifie la valeur par défaut d'un curseur de plage. Vous entrez l'élément range comme premier argument. Le deuxième argument doit être une chaîne contenant la valeur souhaitée dans les limites de la plage.

Nous savons que la limite de notre plage est de 50 car elle a l'attribut max=”50″. Il commence à 0 car il a l'attribut min=”0″. Vous seriez en mesure d'augmenter cette limite avec JavaScript en utilisant la méthode setAttribute.

 range[0].setAttribute("valeur", valeur);

Nous avons sélectionné la plage avec la méthode getElementsByClassName, ce qui signifie que nous devons sélectionner un élément spécifique dans le tableau pour y accéder. Nous pouvons accéder au premier élément du tableau en ajoutant [0] après la variable. Cette ligne de code définira l'attribut value de la plage.

 }

Cette accolade termine la troisième fonction.

 changeRangeValue(rangeSlider, "50");

Ensuite, nous appelons notre fonction pour changer la valeur par défaut de la plage à 50.

 function addExtraSelectOption(selectDiv, optionName, optionValue) {

Cette fonction ajoute un élément d'option à notre boîte de sélection déroulante. Dans le premier argument, vous transmettez l'élément select. C'est le parent de tous les éléments d'option.

Le deuxième argument prend le nom de la nouvelle option sous forme de chaîne. Le troisième argument prend la valeur de notre nouvelle option sous forme de chaîne. La valeur est généralement utilisée lors de l'envoi de données au backend, il est donc essentiel d'en faire une valeur simple. Ici, nous pouvons voir comment j'ai ajouté des acronymes à valeur courte à toutes nos options.

 var nouvelleOption = document.createElement("OPTION");

Tout d'abord, nous créons l'élément option avec la méthode createElement et l'affectons à la variable newOption.

 var newOptionNode = document.createTextNode(optionName);

Ensuite, nous créons un nœud de texte avec la variable optionName et l'enregistrons dans la variable newOptionNode.

 newOption.appendChild(newOptionNode);

Nous ajoutons notre nœud de texte newOptionNode à notre variable newOption.

 newOption.setAttribute("value", optionValue);

Ensuite, nous définissons la valeur de notre nouvelle option avec la méthode setAttribute.

 selectDiv.appendChild(nouvelleOption);

Enfin, nous ajoutons notre nouvelle option à la variable selectDiv. Maintenant, il sera visible dans le DOM. Parce que nous l'avons ajouté, l'option sera la dernière dans la liste déroulante.

 }

L'accolade termine notre quatrième fonction.

 addExtraSelectOption(googleSelector, "Google Spreadsheets", "gs");

Nous appelons notre fonction pour ajouter notre nouvel élément d'option à notre liste déroulante.

3. Exercice

La meilleure façon d'apprendre JavaScript est de l'essayer.

Je veux que vous utilisiez le changeRadioSelection pour sélectionner l' autre option. Je souhaite également que vous modifiiez la valeur de la plage à 0 avec la méthode changeRangeValue. Et envoyez-moi un message pour me dire ce que vous en pensez !

Vous n'arrivez pas à comprendre ? Envoyez-moi un message sur LinkedIn et je vous aiderai !