JavaScript : quelques astuces de programmation

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

Math

la méthode random pour générer un réel compris entre 0 et 1 (exclu)
la méthode round ou ceil ou encore floor pour arrondir ce réel en un entier

Cliquez sur le bouton ci-dessous pour générer un réel puis l'entier correspondant.
Le réel généré de façon aléatoire est multiplié par 10 puis arrondi à l'entier inférieur ; donc on obtient un entier compris entre 0 et 9 !

Le code correspondant

	...
<body>
<h1>Génération aléatoire d'un entier avec JavaScript</h1>
	...
<button onclick = "generation_entier()">Générer un entier </button>
	...
<script>
function generation_entier()
{
	var reel = Math.random() ;
	alert("réel généré :" + reel);
	var entier = Math.floor(reel*10) ; 
	alert("entier correspondant :" + entier); 
}
</script>
	...

Analyse du code

HTML

Un élément de type "button" appelle une fonction.

Rappel : la balise BUTTON peut être utilisée en dehors d'un formulaire. C'est très pratique pour appeler une fonction JavaScript.

Le script

La fonction "generation_entier" génère d'abord un réel inférieur à 1 puis ce réel est multiplié par 10.
Ensuite ce résultat est arrondi à l'entier inférieur avec la méthode floor()
Si nous avions utilisé la méthode ceil() on aurait obtenu un entier compris entre 1 et 10 puisque cette méthode arrondit à l'entier supérieur.
Il existe aussi la méthode round() qui arrondit à l'entier le plus proche. Cette dernière méthode est en général utilisée pour arrondir un réel à N décimales avec par exemple la syntaxe suivante (si arrondi à deux décimales) :
var decimal = (Math.round(reel * 100)) / 100

Le réel est multiplié par 100 puis est arrondi à l'entier le plus proche et ensuite divisé par 100.

Afficher l'heure et date courantes

Affichage de l'heure courante

Affichage de l'heure courante dans la boite grisée avec actualisation chaque seconde !

Le code correspondant

	...
<p>Rafraîchissement de l'affichage à chaque seconde !</p>
<div  id ="heure" style = "width : 30% ; height : 50px ; background : grey ; color: white ; 
			text-align : center;line-height :50px; "></div>
	...
<script>
var boite = document.querySelector('#heure'); // variable objet
function horloge() 
{
 var heure =new Date();
var heureGMT = heure.toGMTString();
	boite.textContent = "il est : " + heure.getHours()+":"+ heure.getMinutes()+":"+ heure.getSeconds() 
	  + " mais en GMT il est : " + heureGMT;
}
setInterval("horloge()", 1000);
</script>
...

Code CSS pour l'élément identifié "heure" : l'heure affichée est centrée verticalement dans cette boite car la ligne unique a la même hauteur que la boite (50px).

JavaScript : La fonction horloge est appelée toutes les 1000 millisecondes c'est à dire à chaque seconde grâce à la fonction setInterval.
La fonction setInterval a obligatoirement deux arguments : fonction appelée , fréquence d'appel en millisecondes.

Analysons maintenant la fonction horloge !
Dans la variable heure on récupère l'instant présent. Faut-il rappeler que le constructeur New Date() sans paramètre permet de créer une "instance de l'objet Date" correspondant à l'instant présent.
Les méthodes getHours, getMinutes, getSeconds appliquées à un objet Date retournent respectivement l'heure, minutes et les secondes de cet instant.
Grâce à la méthode toGMTString() l'instant présent s'affiche à l'heure GMT (heure universelle).
La propriété textContent appliquée à un élément HTML permet de modifier le contenu de ce "noeud".

Affichage de la date courante

Vous savez désormais afficher l'heure courante. Voyons maintenant l'affichage de la date courante.
Il faut appliquer à l'instant présent d'autres méthodes "get".
La date du jour sera affichée sous la forme : jour_semaine en français rang du jour/rang du mois / année sur 4 chiffres

Affichez le rendu

Le script correspondant

var aujourdhui = new Date(); 
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) ;

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

Nous avons utilisé un tableau de valeurs pour associer à 0 la chaine "dimanche", à 1 la chaine "lundi", etc.
Seriez vous capable d'améliorer le script afin que le mois apparaisse en toutes lettres (janvier, février, mars ,etc.) ???

Réaliser un slideshow ou diaporama

Palourde royale

Cliquez sur l'une des miniatures ci-dessous et l'image s'affichera en grand dans la boîte au dessus avec en légende le nom de l'espèce.
Palourde royale Danseuse espagnole Ormeau Nautile Seiche

Le code CSS & HTML correspondant

...
.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; }
...
<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 boite2 = document.querySelector('#grand'); 
var legende =document.querySelector('#titre');
		
function afficher(image) 
{ 
	var source = image.getAttribute('src'); 
	source = "url(" + source +")" ;
	boite2.style.backgroundImage =source ; 
	var texte = image.getAttribute('alt');
	legende.textContent = texte; 
}
...

On crée deux variables objets boite et legende qui référencent respectivement la balise DIV et la balise H4.

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.

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 = "afficherComplet()">Lire la suite de l'article </a>

<div id ="complet">
<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 "complet".

Si clic sur la balise A : appel d'une fonction JS.

Le code CSS

div#complet{display : none; }

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

Le script

function afficherComplet()
{
	document.getElementById('complet').style.display ='block';
}

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

Le rendu

Testez le code !

Afficher les dimensions de la fenêtre

Les "media queries" de CSS permettent de faire la mise en page en fonction de la largeur de l'écran mais n'informent pas l'utilisateur de ces dimensions.
Par contre via l'objet screen un script peut communiquer ces données au visiteur.

Exécutez le code

J'ai testé avec mon PC portable (1540 par 860) puis ma tablette (800 par 1280) et enfin mon smartphone (360 par 780).

Le script correspondant

function f()
{
	alert("largeur : " + screen.width); 
	alert("hauteur: "  + screen.height); 
}

Cette fonction est appelée par un bouton de commande sur clic.

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

Le code correspondant

Analyse du code

HTML

Le script

Afficher l'heure et date courantes

Affichage de l'heure courante

Le code correspondant

Affichage de la date courante

Le script correspondant

Réaliser un slideshow ou diaporama

Palourde royale

Le code CSS & HTML correspondant

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

Le rendu

Afficher les dimensions de la fenêtre

Le script correspondant