Tutoriel sur Javascript, Vue.js, jQuery.js & Node.js

JavaScript : quelques routines intéressantes

L'emploi d'un script dans une page peut apporter un plus-value à celle-ci.

Dans ce chapitre je vais vous présenter quelques routines JS utiles :
• générer un entier de façon aléatoire
• supprimer l'élément courant
• afficher l'instant présent (date et heure courantes)
• produire un diaporama
• afficher le contenu d'un champ de type 'password'
• déplier un texte
• réaliser un menu "hamburger"
• créer un "effet fondu"
• simuler le tirage de N cartes sans risque de doublons
• exécution asynchrone de lignes de code
• nouveaux outils de JS : eventPreventDefault(), window.requestAnimationFrame()
• comment empécher le plagiat du contenu de votre site ?

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 (extrait)

Notez qu'il n'y a pas de script ; le code JS est mélangé dans le code HTML dans la partie BODY. On dit que l'on utilise le gestionnaire d'événements HTML.
Ici cette solution est acceptable car il n'est associé à chaque élément qu'une instruction JS.

Comme l'effacement porte sur l'élément HTML courant (celui qui porte l'évènement) on peut employer le raccourci "this".

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 ; notez que le trait (balise HR) remonte.
Effacer les images de la deuxième rangée ; remarquez que le trait ne bouge pas.

Afficher l'heure et la date courantes

Le code HTML de la page

Le script

// instant présent
var aujourdhui = new Date(); 
// affichage date courante
var annee = aujourdhui.getFullYear(); 
var mois =aujourdhui.getMonth()+1; 
var jour = aujourdhui.getDate();
var joursemaine = aujourdhui.getDay() ;
var tab_jour = 
	new Array("Dimanche", "Lundi", "Mardi", "Mercredi", "Jeudi", "Vendredi", "Samedi");
document.write('Nous sommes le : ' +  tab_jour[joursemaine] 
+ ' ' + jour + '/' + mois + '/' + annee) ; 
	
// affichage de l'heure courante avec actualisation chaque seconde
var boite = document.querySelector('#heure'); // référence le DIV dans le script
function horloge() 
{
	var heure =new Date();
	boite.textContent =
		"il est : " + heure.getHours()+" heures "+ heure.getMinutes() 
			+" minutes  "+ heure.getSeconds() + " secondes"
}
var fin = setInterval("horloge()", 1000); 
// la méthode setInterval() retourne un entier qui ici est récupéré dans la variable "fin". 

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 ; aussi dans le script je rajoute 1 pour affichage d'un entier compris entre 1 et 12
• 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.

Observez bien l'instruction var fin = setInterval("horloge()", 1000).
Ce qui signifie que la fonction "horloge" est appelée chaque seconde (1000 millisecondes).
Pour mettre fin à cet appel régulier il suffirait d'ajouter un bouton de commande lié à l'instruction clearInterval(fin). En effet la fonction setInterval() renvoie un identifiant (ici "fin"). Donc "clearInterval(fin)" met fin à la minuterie ("timer").

Le rendu de ce code :

Réaliser un "slideshow" ou diaporama

Plusieurs images apparaissent sous forme de miniatures. Mais si clic sur une des miniatures, 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 du 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)

var boite = document.querySelector('#grand'); 
var legende =document.querySelector('#titre');
		
function afficher(image) 
{ 
	var source = image.getAttribute('src'); 
	source = "url(" + source +")" ;
	boite.style.backgroundImage =source ; 
	var texte = image.getAttribute('alt');
	legende.textContent = texte; 
}

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.

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 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.

Le code de la page

Partie 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";  }
}

La variable "menu" référence l'élément NAV.
Si la boite NAV est affichée alors la fonction masque NAV.
Si la boite NAV est masquée alors la fonction affiche NAV.

Partie CSS

/* Styler le menu de navigation */
nav {background : navy ;  position: relative; z-index :1;}

/* Masquer le menu de navigation */
nav {display: none;}

/* Styler les liens du menu */
nav a {display: block; color: skyblue;  height : 50px ; 
	line-height : 50px ; padding-left : 40px;  
	text-decoration: none;  font-size: 15px; }

/* Styler l'icone hamburger */
img.hamburger {position : absolute ; right: 0px ; 
	top : 0px; width : 40px; z-index : 9; }

/* Styler le lien survolé */
nav a:hover { background-color: skyblue ;  color: navy; }

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

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 ne veux pas utiliser la méthode slide() de jQuery mais du JS natif et du CSS.

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

function afficherSuite()
{
	document.getElementById('suite').style.display ='block';
}

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

Le rendu de ce code

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" et vice-versa.

Le code HTML

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" et vice-versa.

Le rendu

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

Effet fondu avec le framework "vanilla"

Vanilla.js, c'est quoi ?

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 ; utiliser "vanilla" signifie en fait : programmer en JS natif (sans une couche de framework).
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 tellement progressé que le recours aux frameworks JS est souvent inutile.

Effet fondu en JS natif

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 : je parcours toute les images de la page et à chaque image j'applique la commande toggle de classList.

Le rendu

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". ... <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

Pour en savoir plus sur les objets set : les tableaux JS : objets array, map & set

Le rendu

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.
C'est ce qui se produit, par exemple avec une instruction basée sur alert() ; tant que le visiteur n'a pas cliqué sur le OK de la boite de dialogue le script est en attente ...

Un traitement synchrone peut être très pénalisant 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 de rappel setTimeout().

Dans les deux exemples qui suivent le traitement est asynchrone.

Premier exemple

Le script

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 c'est à dire que les instructions ne sont pas exécutées selon leur ordre physique dans le script.

Exemple 2

Différer l'exécution d'une instruction via setTimeout() peut s'avérer intéressante si celle-ci prend beaucoup de temps.

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 JS "document.write()" efface le contenu précédent de la 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é par l'exécution du document.write suivant. ... 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 sur cette fonction :
• 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 pour relancer le script !

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" de la balise form).
Naturellement cette soumission n'est envisageable que si tous les champs obligatoires sont remplis.
La méthode preventDefault() (qui est appliquée à 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 l'étrange syntaxe : < form ... onsubmit ='return nomfonction' action = ... method = ...

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

Admettez que c'est beaucoup plus élégant ; le code du formulaire contient plus que du HTML !

Si l'un des champs du formulaire 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().

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 un DIV identifié "heure"
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);

Attention, 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

Gestion des erreurs de saisie

Il ne faut pas qu'un script "plante" à la moindre erreur de saisie de l'utilisateur.
JavaScript propose désormais une structure très interéssante : try ... catch ...
Je n'en dis pas plus ; suivez le lien : la gestion des exceptions

Empécher le plagiat de votre site ?

Vous avez sans doute remarqué en surfant sur Internet que de plus en plus de sites Web bloquent le clic droit, interdisent la sélection du texte et des images ainsi que la fonction copier du clavier "Ctrl + C".
Ceci afin d'éviter le plagiat du contenu du site.

Première solution

Ci-dessous une document HTML dans lequel il est impossible de sélectionner du texte pour le copier.
Par contre on peut encore "enregistrer l'image sous ... " car le clic droit est toujours possible ; donc on peut afficher le menu contextuel. Donc le texte est protégé mais pas les images ...

Le code correspondant

Le dispositif anti copier-coller du contenu est effectué en CSS. ... <style> body {user-select : none; } </style></head> <body style ="width : 600px ; margin : 10px auto;"> <h3 id ="titre">Histoire de Rome</h3> <p><img src ="../images/forum.jpg" class = 'logo3' > In his tractibus navigerum nusquam visitur flumen sed in locis plurimis ... ... <p><a href = "#titre">Retour début</a> </body> ...

Notez la règle de style : body {user-select : none; }
Vous pouvez remplacer le sélecteur body par * ou main.

Cette solution CSS offre un gros avantage par rapport à une solution JS ; elle fonctionne même si le visiteur averti a bloqué l'exécution du JavaScript.

Deuxième solution : JS à l'ancienne

Ci-dessous une document HTML dans lequel le copier-coller du texte est rendu impossible et on ne peut plus via un clic droit accéder au menu contextuel donc "enregistrer l'image sous ... ".
Donc on protège du plagiat non seulement le texte mais aussi les images.

Le clic droit sur un élément n'a aucun impact : le menu contextuel n'apparait pas.
Il est impossible de sélectionner du texte.
Il est impossible de produire un CTRL + C
Heureusement le clic gauche est toujours possible ; donc le visiteur peut toujours naviguer dans votre site (en cliquant sur les liens hypertextes).

Le code correspondant (extraits)

Observez bien le code de la balise BODY.
J'utilise le gestionnaire d'événements HTML pour interdire le comportement par défaut du navigateur sur trois événements..

Analyse de ces trois instructions JS

oncontextmenu='return false' : en cas de clic droit, le menu contextuel n'apparait plus.

onkeydown='return false' : ce code interdit le raccourci CTRL + C.

onmousedown='return false' : ce code interdit la sélection de texte par la souris donc le "coller" qui suit.

Remarque

Hélas cette protection contre le plagiat est efficace vis à vis d'un visiteur ignorant la programmation web.
Par contre un visiteur averti va interdire l'usage de JavaScript pour votre site OU va supprimer le code JS en ligne via les outils de développement ...

Troisième solution : JS moderne

L'utilisation du gestionnaire d'événements HTML est une technique obsolète ; ce mélange de HTML et de JS est génant ; la dispersion du code JS complexifie sa maintenance.
La syntaxe onEvent ="return false" est aussi dépassée ; il faut mieux utiliser la méthode nouvelle : preventDefault().
J'ai déjà évoqué cette méthode dans ce chapitre : empécher la soumission du formulaire en cas de saisies incorrectes.

Le code correspondant

Utilisation de event.preventDefault() : ... <body style ="width : 600px ; margin : 10px auto;"> <h3 id ="titre">Histoire de Rome</h3> <p><img src ="../images/forum.jpg" class = 'logo3' > In his tractibus navigerum nusquam visitur flumen sed in ... </body> <script> var contenu = document.querySelector('body'); contenu.oncontextmenu = function(event) {event.preventDefault();} contenu.onkeydown = function(event) {event.preventDefault();} contenu.onmousedown =function(event) {event.preventDefault();} </script> </html>

J'annule le comportement par défaut du navigateur pour trois événements (clic droit, raccourci clavier, appui sur un bouton de la souris) avec la méthode nouvelle event.preventDefault()
Maintenant c'est toujours du JS dont l'exécution peut être bloquée par le navigateur ...

Le rendu

Je n'affiche pas le document HTML car le rendu est strictement identique à la solution 2.

La bonne solution ?

Créez la règle de style basée sur la propriété user-select mais cachez cette règle dans une feuille de style externe.
Stockez la routine JS dans un fichier de scripts (extension .js).
Concernant les images l'ajout d'un filigrane est très dissuasif. Pour rajouter un filigrane à vos photos, je vous conseille un logiciel de retouche de photos gratuit : paint.net.