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.

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.

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

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.

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

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

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

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

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.

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

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

La page "destination.php"

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.