Les traitements

1. L’évitement des traitements en JavaScript

Une première règle concernant les traitements côté client est de ne pas recoder en JavaScript des comportements ou des effets qui peuvent être produits avec des balises ou des attributs HTML ou des règles CSS.

Dans le chapitre Les formulaires, nous avons par exemple évoqué les attributs required, type, minlength, maxlength, min, max et pattern permettant de vérifier respectivement le remplissage ou non d’un champ, l’adéquation avec un type de données, les tailles minimale et maximale d’un texte saisi, le minimum et le maximum d’une valeur et le respect d’un motif. Cela est à la fois plus efficace et plus écologique que d’effectuer l’équivalent avec du code JavaScript. 

Un autre exemple est l’utilisation de balises <details> et <summary> pour un contenu qui peut être caché ou affiché par l’utilisateur. Avant ces balises HTML5, il était nécessaire d’écrire du code JavaScript ou d’utiliser une solution de contournement à l’aide d’une case à cocher cachée et de règles CSS. L’avantage de cette nouvelle solution est qu’elle est parfaitement accessible : à la fois navigable uniquement au clavier et parfaitement restituée avec un lecteur d’écran.

Exemple

<details> 
  <summary>Menu</summary> 
  <nav> 
    <ul> 
      <li><a href="index.html">Accueil</a></li> 
      <li><a href="contact.html">Contact</a></li> 
      <li><a href="erratum.html">Erratum</a></li> 
      <li><a href="ressources.html">Ressources</a></li> 
    </ul> 
  </nav> 
</details> 

Dans cet exemple, un menu déroulant a été créé à l’aide des balises <details> et <summary>.

Certains traitements ne peuvent...

1. Le chronométrage

Le chronométrage est également possible côté serveur. En PHP, il suffit de faire appel à la fonction microtime().

Exemple

<?php 
$debut = microtime(true); 
$str1 = ''; 
for($i=0; $i<200000; ++$i) { 
    $str1 .= $i; 
} 
$fin = microtime(true); 
echo 'durée : ' . ($fin - $debut) . ' seconde(s)'; 

La valeur true passée en paramètre permet que la valeur de retour de la fonction soit de type float plutôt que de type string.

2. L’optimisation de la charge du serveur

for($i = 0; $i<getNbElements(); ++$i) { 
    ... 
} 

$nb = getNbElements(); 
for($i = 0; $i<$nb; ++$i) { 
    ... ...

1. Le menu burger

Il n’est pas possible de réaliser le menu burger sans JavaScript. Nous n’avons donc pas pu l’éviter. En effet, à notre connaissance, un menu burger créé uniquement avec du code HTML et CSS ne peut être utilisable au clavier.

Le script produit a été vérifié avec JSHint avec succès.

Ce menu qui se cache ou se dévoile correspond au motif de conception Disclosure (Show/Hide). Il faut donc vérifier qu’il respecte le motif. Le déploiement ou la réduction sont contrôlables avec la touche [Entrée] ou [Espace]. Cela fonctionne nativement puisque nous avons choisi d’utiliser une balise <button> pour contrôler le menu. L’élément qui contrôle la visibilité a bien l’attribut role de button et il possède un attribut aria-expended dont la valeur est mise à jour en fonction de l’état du menu. Enfin, de manière optionnelle, il est indiqué que le bouton peut avoir un attribut aria-controls contenant la valeur de l’attribut l’id de l’élément qui est affiché ou caché. Il est donc possible d’ajouter cet attribut :

<button aria-expanded="true" class="hidden-sm hidden-big" 
id="btnMenu" aria-controls="nav"> ...