JavaScript : quelques astuces de programmation

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.

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.

Afficher l'heure et 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(); // retourne le millésime
var mois =aujourdhui.getMonth()+1; // date.getMonth retourne un entier entre 0 et 11 donc il faut ajouter 1
var jour = aujourdhui.getDate(); // retourne le jour (1à 31)
var joursemaine = aujourdhui.getDay() ; // retourne un entier compris entre 0 et 6 (0 pour dimanche)
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"
}
setInterval("horloge()", 1000);

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
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).
Cette fonction affiche l'heure courante dans une boite DIV.

Afficher la page qui communique l'instant présent en français

Réaliser un slideshow ou diaporama

Plusieurs images apparaissent sous forme de miniatures.
Un clic sur une miniature affiche celle-ci en grand dans une boite et le titre correspondant est actualisé.

Le code CSS & HTML correspondant de la page

...
.miniature {display : inline-block ; height : 80px ; width : auto ; margin : 5px; }
#grand {width : 360px ; height : 360px ; margin :auto; border : none; 
	background-image: url(../images/palourde_royale.jpg); background-repeat : no-repeat; background-size : cover; }
</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)'>
...

Le script

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)

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.

Afficher le diaporama

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.

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

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

/* 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

Observez le rendu dans un nouvel onglet

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

Afficher un texte masqué

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 doit s'afficher.
Je vous présente successivement le code HTML, CSS et JavaScript pour atteindre cet objectif.

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

Affichez cette page !

Afficher le mot de passe

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" à 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.
Un bel exemple de modification du DOM et plus précisement des attributs.

Testez ce code !

Formulaire avec champs masqués

Le visiteur (du site) qui remplit un formulaire peut adresser à son insu des informations au site.
En effet un formulaire peut comprendre des champs masqués qui sont remplis via un script.

Thématique

En se connectant à son espace le visiteur communique à son insu la largeur et la hauteur de l'écran du terminal qu'il utilise.
Ainsi l'administrateur du site sait s'il a visité avec un ordinateur de bureau ou un PC portable ou une tablette ou un smartphone.

Le code HTML

<form name ="f" action = "destination.php"  method ='post' target ="_blank"
	onsubmit="return fenvoi()" >
	<label>Tapez votre identifiant : </label>	
	<input type = "email"  name ="identifiant" required>
	<label>Saisissez  le mot de passe :</label>
	<input type = "password"  required name ='motdepasse' 
		pattern ='[A-z0-9]{6,8}' placeholder = 'entre 6 et 8 lettres ou chiffres' 
			> 
	<input type ="hidden"  name ="masque1" >
	<input type ="hidden"  name ="masque2" >
	<button type ="submit">Connexion</button>
</form>

Remarquez les champs masqués : type ="hidden"
Les données renseignées sont transmises à la page "destination.php" avec la méthode POST.

Le script

function fenvoi()
{
	// remplissage champs masqués
	f.masque1.value = screen.width; 
	f.masque2.value = screen.height; 
	// instructions provisoires 
	console.log(screen.width);
	console.log(screen.height);
}

La page "destination.php"

...
<body>
<?php
	echo "identifiant est  : " .$_POST['identifiant'].  "<br>";
	echo "mot de passe est  : " .$_POST['motdepasse'].  "<br>";
	echo "largeur écran est  : " .$_POST['masque1'].  "<br>";
	echo "hauteur écran est  : " .$_POST['masque2'].  "<br>";
? >

Tests

Testez ce formulaire
La page vers laquelle sont adressées les données s'affiche dans un autnouvel onglet.
Pour la page du formulaire, affichez la console JS.
Testez à partir d'un PC, d'une tablette, d'un smartphone.

Traduction

Tutoriel JavaScript & jQuery - sommaire

JavaScript

jQuery - célèbre bibliothèque JavaScript

Tutoriel JavaScript & jQuery - recherche

L'auteur : Patrick Darcheville

JavaScript : quelques astuces de programmation

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é

Afficher l'heure et 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

Adaptation du code

Réaliser un menu "hamburger"

Exemple

Le code HTML

Le script

Le code CSS

Test du code

Afficher un texte masqué

Le code HTML

Le code CSS

Le script

Afficher le mot de passe

Le code HTML

Le script

Formulaire avec champs masqués

Thématique

Le code HTML

Le script

La page "destination.php"

Tests