Accueil

Traduction

Tutoriel JavaScript & jQuery - sommaire

Sommaire partiellement masqué - faites défiler !

Tutoriel JavaScript & jQuery - recherche

L'auteur : Patrick Darcheville

Vous pouvez me contacter via Facebook pour questions & suggestions : Page Facebook relative à mon site

JavaScript : quelques astuces de programmation

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

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

A saisir dans la console :

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.

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.

Afficher l'heure et date courantes

Le code HTML de la page

Le script

Le constructeur new Date() sans argument retourne l'instant présent.

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) grâce à la fonction setInterval()
Cette fonction affiche l'heure courante dans une boite DIV.

Le rendu de ce code :

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

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

Le script

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. 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 pour ce type de terminal.

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

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

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

Le rendu de ce 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 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 "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

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

Le rendu de ce code :

J'ai donc déplié un texte sans utiliser une méthode "slide" de jQuery.

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" à type "text".

Le code HTML

Remarque : le code du formulaire est incomplet : pas de bouton de connexion.

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:

Si le champ "motdepasse" est de type "password" alors il devient de type "text". Sinon c'est l'inverse.

Le rendu de ce code :

C'est donc un exemple de modification du DOM et plus précisement des attributs de balise.
C'est impossible à réaliser en CSS ... On ne peut que modifier les valeurs de propriétés via CSS.

Effet fondu en JS pur

Vanilla.js

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 ; c'est un faux framework JS. Cette blague est orchestrée par les tenants d'un emploi systématique du JS pur ; sans utilisation d'un framework JS.
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 standard a fortement progressé et surtout s'il est combiné avec CSS version 3.

Effet fondu sans jQuery

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

CSS : je définis une classe "effacer" qui définit une transition sur deux propriétés : width & opacity.
Script : parcours de toute la collection d'images de la page et à chaque élément application de la méthode classList.toggle("effacer")
J'ai donc bien combiné du JS pur & du CSS 3.

Le rendu :

Recliquez sur le bouton les images réapparaissent (mais sans transition). C'est logique car j'ai utilisé la commande "toggle".
Testez une variante pour la classe "effacer" : ....transition : opacity 5s, width 7s;

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". JS s'est donc inspiré de Python.

Si vous avez des difficultés pour comprendre le script : les tableaux JS : objets array, map & set

Le rendu

Actualisez la page pour afficher de nouveau le bouton de commande.

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 s'exécute l'interface Web reste bloquée. On parle de traitement synchrone.
Cette situation peut être très génante 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 setTimeout() donc de créer un traitement asynchrone.

Premier exemple

Le script :

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 ce qui veut dire que les instructions ne sont pas exécutées conformément à leur ordre dans le script.

Différer l'exécution d'une instruction via setTimeout() peut s'avéver intéressante si celle-ci prend beaucoup de temps OU si elle a pour effet d'effacer tout le contenu de la page ne laissant pas le temps au visiteur de la lire.

Syntaxe de setTimeout() : setTimeout(fonction, délai)
Dans cet exemple, le premier argument est une fonction anonyme : function(){document.write("Au revoir")}
Dans l'exemple 2 (ci-dessous), le premier argument sera l'appel d'une fonction nommée.

Exemple 2

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 basée sur "document.write" efface le contenu d'une 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 le texte affiché ; texte ensuite effacé car la fonction contient plusieurs "document.write".

Analyse du script

Le rendu :
Actualisez la page avant !

On est pas loin de 1/6 pour chaque face.
Modifiez le code pour simuler 50 000 lancers et observez ...