JavaScript - astuces

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

le HTML

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

Rappel : la nouvelle 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 : 600px ; 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.

Le code correspondant

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)

Le code CSS

table {width : 100%; }
img {height : 100px ;width : auto ; }
	...
#grand {width : 50% ; height :300px ; margin :auto; border : none; 
		background-image: url(../images/palourde_royale.jpg); background-repeat : no-repeat; 
		background-size : cover;}

Notez l'emploi de la nouvelle propriété CSS background-size : cover afin que les dimensions de l'image de fond s'adaptent à celles du conteneur.

Code HTML

... <div id ="grand"></div> <h4 id ="titre" style ='text-align: center;'>Palourde royale</h4> ... <table> <tr> <td><img src ="../images/palourde_royale.jpg" alt ='Palourde royale' onclick ='afficher(this)'></td> <td><img src ="../images/danseuse_espagnole.jpg" alt ='Danseuse espagnole' onclick ='afficher(this)'></td> ... </tr> </table> ...

Les images miniatures sont disposées dans un tableau d'une seule rangée (une image dans chaque cellule).
Pour chaque balise img il y a non seulement l'attribut src mais aussi l'attribut alt et onclick.
Ainsi si clic sur une image appel de la fonction afficher avec passage d'un paramètre : this (qui cible donc ici l'image courante).

Le script

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 une cellule au tableau HTML contenant la balise img. Mais il n'y aura rien à modifier dans le code JavaScript !

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()" >  <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";  }
}

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 un z-index inférieur à celui affecté à l'icône afin que ce dernier soit 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

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

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.

Tutoriel JavaScript & jQuery - sommaire

JavaScript

jQuery - framework JavaScript

JavaScript - astuces

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

Le code correspondant

Analyse du code

le 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 correspondant

Le code CSS

Code HTML

Le script

Adaptation du code

Réaliser un menu "hamburger"

Exemple

Le code HTML

Le script

Le code CSS

Test du code

Afficher les dimensions de la fenêtre

Le script correspondant