Tutoriel sur JS natif, Vue.js, jQuery.js & Node.js

JavaScript : quelques astuces de programmation

Au travers de ce chapitre je vais vous présenter différents scripts montrant toutes les possibilités programmatiques de JavaScript.

Thèmes abordés dans ce chapitre :
• générer un entier de façon aléatoire
• supprimer l'élément courant ; emploi du mot "this"
• afficher l'instant présent (date et heure)
• produire un diaporama
• afficher le contenu d'un champ 'password'
• déplier un texte
• réaliser un menu "hamburger"
• créer un "effet fondu" sans recourir à jQuery
• simuler le tirage de N cartes sans risque de doublons (emploi objet de type set)
• exécution asynchrone des lignes de code avec setTimeout()
• Nouveaux outils de JS : eventPreventDefault(), window.requestAnimationFrame()
• etc.

Génération aléatoire d'un entier

Il faut combiner plusieurs méthodes de l'objet Math :
• la méthode random pour générer un flottant compris entre 0 et 1 (exclu)
• les méthodes round ou ceil ou encore floor pour convertir un flottant en entier

Génération d'un entier compris entre 0 et 9

A saisir dans la console : > flottant = Math.random() 0.7108295069183412 > entier = Math.floor(flottant*10) 7

Il faut utiliser la méthode floor() afin que l'entier généré soit compris entre 0 et 9.
En effet floor() arrondit à l'entier inférieur.

Simulation d'un lancer de dé

L'entier généré de façon aléatoire doit être compris entre 1 et 6. flottant = Math.random() 0.5338635313763636 de = Math.ceil(flottant * 6) 4

Il faut utiliser la méthode ceil() afin que l'entier généré soit compris entre 1 et 6.
En effet ceil() arrondit à l'entier supérieur.

Effacer l'élément courant

Le code de la page

Comme l'effacement porte sur l'élément HTML courant (celui qui porte l'évènement) on peut employer le raccourci "this". Sinon il faudrait écrire pour la première image : document.querySelectorAll(img)[0]

Pour effacer les différentes images j'ai utilisé 4 techniques différentes.
La différence majeure entre display:none et visibility:hidden est que le premier supprime entièrement un élément de la mise en page tandis que le second cache l'élément mais réserve la place qu'il occupait.
width=0 a le même effet que display:none tandis que opacity =0 a le même impact que visibility : hidden.

Le rendu

Supprimez les images de la première rangée ; le trait HR remonte.
Effacer les images de la deuxième rangée ; le trait HR ne bouge pas.

Afficher l'heure et date courantes

Le code HTML de la page

Le script

Le constructeur new Date() sans argument retourne l'instant présent.

J'ai associé à l'instant présent les méthodes "get" suivantes pour extraire les différentes composantes :
• getFullYear() : retourne le millésime sur 4 chiffres
• getMonth() : retourne le rang du mois sous forme d'un entier compris entre 0 et 11
• getDate() : retourne le rang du jour dans le mois sous forme d'un entier compris entre 1 et 31
• getDay() : retourne le jour de la semaine sous forme d'un entier compris entre 0 et 6 (avec 0 pour dimanche)
• getHours() : retourne l'heure
• getMinutes() : retourne le nombre de minutes

J'ai utilisé un tableau pour associer à 0 la chaine "dimanche", à 1 la chaine "lundi", etc.

La fonction "horloge()" est appelée toutes les 1000 millisecondes (chaque seconde) via à la méthode setInterval(). La fonction "horloge" affiche l'instant présent dans une boite DIV.

Le rendu de ce code :

Pour arrêter le minuteur créé par la méthode setInterval() il suffit de programmer l'instruction clearInterval(fin).
En effet la méthode setInterval() retourne un entier (récupéré ici dans la variable "fin").

Réaliser un "slideshow" ou diaporama

Plusieurs images apparaissent sous forme de miniatures. Mais si clic sur une miniature, celle-ci est alors affichée en grand dans une boite avec la légende appropriée.

Le code CSS & HTML correspondant de la page

Notez l'emploi dans la feuille de style de la propriété background-size : contain. Ainsi l'image agrandie dans le DIV n'est pas rognée mais la zone d'affichage de l'image agrandie est plus ou moins haute pour éviter toute déformation.

Dans le tuto CSS 3 (dans le même site) il y a tout un chapitre sur les propriétés préfixées "background-" Raccourci 'background' : une propriété très enrichie

Pour chaque image appel de la fonction "afficher" argumentée avec "this" ; raccourci qui désigne l'élément HTML courant donc l'image objet du clic.

Le script

A chaque fois que l'on clique sur une miniature il faut que :
• la valeur de l'attribut src de la miniature devienne la valeur de la propriété background-image de DIV (contenant la grande image).
• la valeur de l'attribut alt de la miniature devienne le contenu de la balise H4 (légende de la grande image)

On crée deux variables boite et legende qui référencent respectivement la balise DIV identifiée "grand" et la balise H4 identifié "titre".

Dans la fonction afficher la variable image représente l'image courante.
Avec la méthode getAttribute on récupère les valeurs des attributs src et alt de l'image courante.
Dans la variable source on construit la nouvelle valeur de la propriété de style backgroundImage.
Dans la variable texte on construit la nouvelle valeur de la propriété textContent.

Le rendu de ce code :

Adaptation du code

Si vous voulez un diaporama avec 6 images, il suffit d'ajouter un élément IMG dans le code HTML. Mais il n'y aura rien à modifier dans le script !

Réaliser un menu "hamburger"

Ces trois barres horizontales sont omniprésentes : jeux vidéo, applications, sites internet, logiciel, etc.
Lorsque vous les voyez, vous savez immédiatement qu’il s’agit d’un bouton vous donnant accès à un menu.
Sur un petit écran les pixels sont précieux. le menu "hamburger" est une bonne solution pour ce type de terminal.

Donc par défaut un menu 'hamburger' est masqué.
Si clic sur l'icône 'hamburger' alors le menu s'affiche.
Nouveau clic sur l'image 'hamburger' et alors le menu disparait.

Exemple

Le code HTML

J'ai récupéré l'image 'hamburger_icone.png' sur la 'toile'. Il suffit de taper 'hamburger' dans le moteur de recherche puis de cliquer sur l'onglet 'images'. J'ai ensuite redimensionné l'image avec PAINT car elle était trop lourde.

Notez dans la balise IMG l'attribut "onclick" qui permet d'appeler une fonction JS.
L'icône est stylé via la classe 'hamburger' : voir feuille de style ci-dessous.

Le script

Il consiste en une fonction nommée "mafonction". function mafonction() { var menu = document.querySelector('nav'); if (menu.style.display == "block") {menu.style.display = "none"; } else {menu.style.display = "block"; } }

Explications
Si la boite NAV est affichée alors la fonction masque NAV.
Si la boite NAV est masquée alors la fonction affiche NAV.

Le code CSS

La boite NAV a une valeur pour la propriété z-index inférieure à celle affectée à l'icône ; ainsi ce dernier est toujours en premier plan.
Par défaut la boite NAV est masquée.
Les liens contenus dans NAV sont de type block, couleur de la légende : skyblue, pas de soulignement, etc.
L'cône est positionné en haut à droite de l'écran.
Sur survol d'un lien les couleurs de fonds et de texte sont inversées.

Test du code

Le rendu de ce code :

Vous cliquerez sur le "hamburger" pour afficher le menu.
Vous cliquerez de nouveau sur cet icône pour le masquer.

Déplier un texte

Thématique : dans une page une partie de l'article rédactionnel est masqué par défaut, seul le premier paragraphe ("l'accroche") apparait. Mais en cliquant sur un lien la partie masquée s'affiche !
Je présente successivement le code HTML, CSS et JavaScript pour atteindre cet objectif.

Le code HTML

La boite DIV est identifiée "suite".

Si clic sur la balise A provoque l'exécution de la fonction JS "afficher_suite".

Le code CSS

div#suite{display : none; }

Par défaut la boite identifiée "suite" est masquée.

Le script

La fonction démasque l'élément identifié "suite".

Le rendu de ce code :

J'ai donc déplié un texte sans utiliser une méthode "slide" de jQuery.

Afficher le contenu d'un champ 'password'

Désormais sur beaucoup de sites et dans le cadre du formulaire de connexion, les caractères que vous saisissez dans un champ "mot de passe" peuvent être affichés. Il suffit qu'un script transforme le type de ce champ : de type "password" il passe à type "text".

Le code HTML

Remarque : le code du formulaire est incomplet : pas de bouton de connexion. <form name ="f"> <label>Tapez votre identifiant : </label> <input type = "email" name ="identifiant" required> <label>Saisissez le mot de passe :</label> <input type = "password" required name ='motdepasse'> <img src ="../images/oeil.png" style ="height : 50px; width : auto;" title ="afficher le mot de passe" onclick ="f_oeil()"> </form>

Une image représentant un oeil (facile à trouver sur la toile) est affichée à côté du champ de type "password".
Une légende est associée à l'image.
Si clic sur cette image : appel d'une fonction.

Le script

Il est d'un simplicité déroutante: function f_oeil() { if (f.motdepasse.getAttribute('type')=='password') {f.motdepasse.setAttribute('type','text'); } else {f.motdepasse.setAttribute('type','password'); } }

Si le champ "motdepasse" est de type "password" alors il devient de type "text". Sinon c'est l'inverse.

Le rendu de ce code :

C'est donc un exemple de modification du DOM et plus précisement des attributs de balise.

Effet fondu en JS pur

Vanilla.js

Quand vous télécharger ce framework vous récupérez un fichier qui pèse 0 octet ... Donc Vanilla.js c'est une plaisanterie ; c'est un faux framework JS. Cette blague est orchestrée par les tenants d'un emploi systématique du JS natif ; sans utilisation d'un framework JS.
Les auteurs de cette blague reprochent aux frameworks JS, tel jQuery, un ralentissement certain dans l'interprétation du code.
Il font à juste titre remarquer que le JS natif a fortement progressé et surtout s'il est combiné avec CSS version 3.

Effet fondu sans jQuery

Un “fondu” est une disparition OU apparition progressive d’un élément. C’est donc un effet de transition d’un état à un autre.
Jquery propose des méthodes pour faire apparaitre / disparaitre progressivement une collection d'éléments : fadeIn,() fadeOut(), fadeToggle().

Mais si vous combinez des nouveautés proposées par la dernière version de JavaScript et celles proposées par CSS version 3, vous pouvez éviter l'emploi de jQuery.

Le code de la page (extrait

CSS : je définis une classe "effacer" qui définit une transition sur deux propriétés : width & opacity.
Script : parcours de toute la collection d'images de la page et à chaque élément application de la méthode classList.toggle(nomClasse)
J'ai donc bien combiné du JS natif & du CSS3.

Le rendu :

Recliquez sur le bouton les images réapparaissent (mais sans transition). C'est logique car j'ai utilisé la commande "toggle".
Testez une variante pour la classe "effacer" : ....transition : opacity 5s, width 7s;

Simuler le tirage de 5 cartes dans un jeu de 32 cartes

Le code de la page

Le code est très succinct grâce à l'emploi d'une nouvelle structure de données proposée par la version 6 de JS : les ensembles ou "sets". JS s'est donc inspiré de Python. ... <button onclick ="tirer5()">Tirez 5 cartes</button> <script> let couleurs = ["pique", "trèfle", "coeur", "carreau"]; let valeurs = ["As", "Roi", "Dame", "Valet", "10", "9" , "8", "7"]; function tirer5() { let ma_main = new Set(); for (; ; ) { couleur = Math.floor(Math.random() * 4); // génération entier compris entre 0 et 3 valeur = Math.floor(Math.random() * 8); // génération entier compris entre 0 et 7 carte = valeurs[valeur] + " de " + couleurs[couleur]; // carte tirée ma_main = ma_main.add(carte); // ajout éventuel carte tirée à la main nbre_cartes = ma_main.size; // nombre de cartes de la main if (nbre_cartes ==5) break; } // fin boucle infinie for (let item of ma_main) {document.write(item + "<br>"); } } // fin fonction ...

Outils utilisés :
• génération aléatoire d'un réel
• arrondir à l'entier inférieur
• créer un tableau de type "set" (qui interdit les doublons)
• créer une boucle infinie : boucle for() sans passage d'arguments
• sortie conditionnelle de cette boucle infinie : if (condition) break

Si vous avez des difficultés pour comprendre le script : les tableaux JS : objets array, map & set

Le rendu

A la place du boucle infinie, j'aurais pu utiliser la structure do ... while (condition) dont la condition se réalise après un premier passage dans le bloc.

Exécution asynchrone grâce à setTimeout()

JavaScript est "monothread" c'est-à-dire que le moteur d'exécution du code ne peut effectuer qu'une seule opération à la fois (contre plusieurs en parallèle s'il était "multithread"). Donc tant qu'une instruction JavaScript n'est pas achevée l'interface Web reste bloquée. On parle de traitement synchrone.
Cette situation peut être très génante si le temps d'exécution d'une ligne de code est très longue ...
Pour contourner ce problème il est possible de réaliser un appel différé d'une instruction grâce à la fonction setTimeout() donc de créer un traitement asynchrone.

Premier exemple

Le script : ... setTimeout(function(){document.write("<b>Au revoir</b>")},5000); document.write('<b>Bonjour</b>' + "<br>"); document.write("<b>Comment allez vous ? </b>" + "<br>"); ...

Le rendu :
Actualisez la page avant !

Il y a affichage de "Bonjour" puis "Comment allez vous" et seulement 5 secondes plus tard affichage de "Au revoir".
Donc le traitement est asynchrone ce qui veut dire que les instructions ne sont pas exécutées conformément à leur ordre physique dans le script.

Différer l'exécution d'une instruction via setTimeout() peut s'avéver intéressante si celle-ci prend beaucoup de temps OU si elle a pour effet d'effacer tout le contenu de la page ne laissant pas le temps au visiteur de la lire.

Syntaxe de setTimeout() : setTimeout(fonction, délai)
Dans cet exemple, le premier argument est une fonction anonyme : function(){document.write("Au revoir")}
Dans l'exemple 2 (ci-dessous), le premier argument sera l'appel d'une fonction nommée.

Exemple 2

Selon la loi des grands nombres, la probabilité d'obtenir le chiffre 1 est de 1/6, même chose pour le chiffre 2 ..., le chiffre 6.
1/6 ième donne en pourcentage de 16.67 %.
Vérifions si la génération aléatoire d'entiers en JavaScript donne les résultats attendus par cette loi mathématique.

Le code de la page (extrait)

Vous savez que l'exécution d'une instruction basée sur "document.write" efface le contenu d'une page.
Aussi le traitement sera ici asynchrone ; l'exécution automatique de la fonction "calcul" sera différée de 5 secondes ; le temps nécessaire pour que le visiteur lise tranquillement le texte affiché ; texte ensuite effacé à cause des instructions "document.write". ... <body> <h3>Simulation de 10 000 lancers de dé </h3> <p>Selon la théorie des grands nombres, ... <script> setTimeout("calcul()",5000); // appel différé de la fonction au bout de 5 secondes function calcul() { let c1 =0, c2=0, c3=0, c4=0, c5=0, c6=0; document.write("<h3>Simulation de 10 000 lancers de dé</h3> " + "<br>"); for (i = 0 ; i<10000 ; i++) { let flottant = Math.random() let de = Math.ceil(flottant * 6) switch(de) { case 1 : c1++ ; break ; case 2 : c2 ++ ; break ; case 3 : c3 ++ ; break ; case 4 : c4 ++ ; break ; case 5 : c5 ++ ; break ; case 6 : c6 ++ ; break ; } // fin de switch } // fin de for let tab =["", c1,c2,c3,c4,c5,c6]; let somme = 0; for (let indice =1 ; indice < tab.length ; indice++) { document.write("nombe de " + indice + " tirés " + tab[indice]+ " ou " + tab[indice] / 100 + " % " + "<br>"); somme = somme + tab[indice]; } // fin for document.write("total lancers : " + somme ); } // fin fonction ...

Analyse du script

Plusieurs remarques concernant le code de cette fonction (bonne révision sur les boucles et les tableaux indicés) :
• déclaration et initialisation de six variables en une seule instruction ...
• une bouche FOR exécutée 1000 fois (de 0 à 999)
• dans cette boucle : emploi de la structure SWITCH pour incrémenter à chaque fois l'un des six compteurs
• un tableau indicé est construit à partir des 6 compteurs
• une bouche FOR pour afficher les six compteurs (parcours à partir de l'élément d'indice 1)

Le rendu :
Actualisez la page avant !

On est pas loin de 1/6 pour chaque face.
Modifiez le code pour simuler 50 000 lancers et observez ...

Annuler le comportement par défaut du navigateur

Par défaut lorsque vous cliquez sur un bouton de type "submit" d'un formulaire vous adressez les données saisies vers le fichier précisé dans l'attribut "action".
Naturellement cette soumission n'est envisageable que si tous les champs obligatoires sont remplis.
La méthode preventDefault() (qui est appliqué à un objet de type 'event') permet d'annuler le comportement par défaut du navigateur.
Donc dans le cadre d'un formulaire cette méthode permet d'interdire le soumission en cas de saisie incorrecte.
Il s'agit donc d'un contrôle de saisie efficace qui évite d'utiliser le gestionnaire d'évènements HTML sur la balise FORM et donc la célèbre syntaxe : <form ... onsubmit ='return nomfonction >

Exemple

Rendu d'un formulaire dans un Iframe :

Tant que les deux champs n'ont pas été renseignés la soumission est bloquée.

Le code correspondant

Si l'un des champs est vide :
• soumission annulée
• affichage d'un message indiquant d'une erreur de saisie

La méthode preventDefault(), rattachée à l'interface Event neutralise l'action par défaut (envoi du formulaire).

La méthode window.requestAnimationFrame()

Pour appeler régulièrement et automatiquement une fonction vous pensez à setInterval(). Sachez qu'il existe désormais une nouvelle méthode : window.requestAnimationFrame().
Sachez aussi que ce nouvel outil est très utilisé dans le cadre d'animations Canvas (Canvas : API HTML5 écrite en JS qui permet de produire des dessins statiques ou animés dans un page web).

Reprenons la thématique "affichage de l'instant présent"

Nous pouvons désormais écrire le script de la façon suivante (extrait): ... var boite = document.querySelector('#heure'); // référence le DIV dans le script function horloge() { var heure =new Date(); var heureGMT = heure.toGMTString(); boite.textContent = "Il est : " + heure.getHours()+" heures "+ heure.getMinutes() +" minutes "+ heure.getSeconds() + " secondes"; window.requestAnimationFrame(horloge); } window.requestAnimationFrame(horloge);

Le début du script est inchangé par rapport à la solution traditionnelle.
Il faut deux instructions window.requestAnimationFrame(horloge); : une en dehors de la fonction (premier appel) et une autre dans la fonction (récursivité). Cette nouvelle méthode appelle la fonction 60 fois par seconde donc rend les animations très fluides.

Le rendu