JavaScript : quelques routines intéressantes

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

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()
etc.

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

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)

...
<style>
	img {width : 20%; height : auto; margin : 1%; vertical-align : top;}
</style>
<body>
<img src ="../images/jolie_fille.jpg" onclick="this.style.display='none' " />
<img src ="../images/bikini.jpg" onclick ="this.style.width = 0  ">
<hr>
<br><img src ="../images/trikini.jpg"  onclick="this.style.opacity = 0 " >
<img src ="../images/bikini7.jpg" onclick="this.style.visibility ='hidden' ">
<hr>
</body>
...

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

<h1>Affichage de l'instant présent : date et heure</h1>
<div  id ="heure" style = "width : 50% ; height : 50px ; background : lavender ;
			text-align : center; line-height :50px; ">
</div>

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.

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

...
.miniature {display : inline-block ; height : 80px ; width : auto ; margin : 5px; }
#grand {width : 500px ; height : 400px ; margin : 10px auto; border : none; 
		background-image: url(../images/palourde_royale.jpg); 
		background-size : contain; 
		background-color : white; 
		background-repeat : no-repeat;}
</style></head>
<body>
<div id ="grand"></div>
<h4  id ="titre" style ='text-align: center;'>Palourde royale</h4>
	...
<img src ="../img_bio/palourde_royale.jpg" alt ='Palourde royale' class ="miniature" 
	onclick ='afficher(this)'>
<img src ="../img_bio/danseuse_espagnole.jpg" alt ='Danseuse espagnole' class ="miniature" 
	onclick ='afficher(this)'>
<img src ="../img_bio/ormeau.jpg" alt ='Ormeau' class ="miniature" 
	onclick ='afficher(this)' >
<img src ="../img_bio/nautile.jpg" alt ='Nautile' class ="miniature" 
	onclick ='afficher(this)'>
<img src ="../img_bio/seiche.jpg" alt ='Seiche' class ="miniature" 
	onclick ='afficher(this)'>
...

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

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

...
<body>
<img src ="../images/hamburger_icone.png" class ="hamburger"  
	onclick ="mafonction()" >
<!--zone de navigation -->
<nav>
    <a href="#">lien 1</a>
    <a href="#">lien 2</a>
    <a href="#">lien 3</a>
</nav>
...

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

...
<body>
<h4>Plus de 1500 emplois pour les batteries de Renault à Douai bientôt annoncés, déception à Dunkerque</h4>
<p id ="debut">"C'est très bien avancé et l’annonce devrait intervenir prochainement", indique une source proche du dossier, 
...
<p><a href ="#" onclick = "afficherSuite()">Lire la suite de l'article </a>

<div id ="suite">
<h5>2 000 à 1 500 emplois</h5>
<p>Selon le quotidien national "Deux mille emplois y seront créés d’ici à 2025, lorsque le site aura atteint toutes ses capacités. 
L’État, la région et l’agglomération 
...
</div>
...

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

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

...
<style>
	img {width : 18%; vertical-align : top ;}
	.effacer{opacity : 0; width : 0% ; transition : all 5s; }
</style>
...
<img src ="../images/burkini.jpg" />
<img src ="../images/bikini.jpg" />
...

<button>Disparition lente/Apparition des images</button>
<script>
document.querySelector("button").onclick = function()
{
	for (var i in document.images) 
		{
			document.images[i].classList.toggle("effacer");
		}
} // fin fonction
...

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

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

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

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

...
<form name ="f" action ="destination.php" method ="get">
    <label>Nom :</label>  <input name="nom" type="text">
    <br><label>Prénom :  </label>  <input name="prenom" type="text">
    <br><label></label><input id="soumission" type="submit">
</form>
<p></p>
<script>
document.querySelector('form').onsubmit = function(event) 
{
  if (f.nom.value == '' || f.prenom.value == '') 
  {
    event.preventDefault();
    document.querySelector('p').textContent =
		'Il faut renseigner les deux champs !';
  }
  
} // fin fonction anonyme
...

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

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.

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

Traduction

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

JavaScript natif

Framework jQuery.js

Framework Vue.js

Node.js

Tutoriel JavaScript - recherche

L'auteur : Patrick Darcheville

JavaScript : quelques routines intéressantes

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

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

Simulation d'un lancer de dé

Effacer l'élément courant

Le code de la page (extrait)

Le rendu

Afficher l'heure et la date courantes

Le code HTML de la page

Le script

Réaliser un "slideshow" ou diaporama

Le code CSS & HTML correspondant de la page

Le script

Le rendu de ce code

Adaptation du code

Réaliser un menu "hamburger"

Le code de la page

Partie HTML

Le script

Partie CSS

Test du code

Déplier un texte

Le code HTML

Le code CSS

Le script

Le rendu de ce code

Afficher le contenu d'un champ 'password'

Le code HTML

Le script

Le rendu

Effet fondu avec le framework "vanilla"

Vanilla.js, c'est quoi ?

Effet fondu en JS natif

Le code de la page (extrait

Le rendu

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

Le code de la page

Le rendu

Exécution asynchrone grâce à setTimeout()

Premier exemple

Le script

Le rendu

Exemple 2

Le code de la page (extrait)

Analyse du script

Le rendu

Annuler le comportement par défaut du navigateur

Rendu d'un formulaire dans un Iframe

Le code correspondant

La méthode window.requestAnimationFrame()

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

Gestion des erreurs de saisie

Le rendu