JavaScript - quelques astuces de programmation
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 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
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
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
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) ;
- Nous avons associé à un objet Date les méthodes "get" suivantes pour extraire une partie de cette date :
- 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 CSS & HTML correspondant
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 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 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
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 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
Cliquez sur le "hamburger" pour afficher le menu.
Cliquez de nouveau sur cet icône pour le masquer.
Afficher le 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
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
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.
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.