Traduction
Tutoriel sur JS natif, Vue.js, jQuery.js & Node.js
Tutoriel JavaScript - recherche
L'auteur : Patrick Darcheville
Vous pouvez me contacter via Facebook pour questions & suggestions :
Page Facebook relative à mon site
Vous pouvez me contacter via Facebook pour questions & suggestions :
Page Facebook relative à mon site
Au travers de ce chapitre je vais vous présenter différents scripts montrant toutes les possibilités programmatiques de JavaScript.
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.
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.
Comme l'effacement porte sur l'élément HTML courant (celui qui porte l'évènement) on peut employer le raccourci "this".
Pour effacer les différentes images j'ai utilisé 4 techniques différentes.
La différence majeure entre display:none et visibility:hidden est que le premier supprime entièrement un élément de la mise en page
tandis que le second cache l'élément mais réserve la place qu'il occupait.
width=0 a le même effet que display:none tandis que opacity =0 a le même impact que visibility : hidden.
Supprimez les images de la première rangée ; notez que le trait (balise HR) remonte.
Effacer les images de la deuxième rangée ; remarquez que le trait ne bouge pas.
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) via à la méthode setInterval(). La fonction "horloge" affiche l'instant présent dans une boite DIV.
Observez bien l'instruction var fin = setInterval("horloge()", 1000).
Ce qui signifie que la fonction "horloge" est appelée chaque seconde (1000 millisecondes).
Pour mettre fin à cet appel régulier il suffirait d'ajouter un bouton de commande lié à l'instruction
clearInterval(fin). En effet la fonction setInterval() renvoie un identifiant (ici "fin").
Donc "clearInterval(fin)" met fin à la minuterie ("timer").
Le rendu de ce code :
Plusieurs images apparaissent sous forme de miniatures. Mais si clic sur une miniature, celle-ci est alors affichée en grand dans une boite avec la légende appropriée.
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
Pour chaque image appel de la fonction "afficher" argumentée avec "this" ; raccourci qui désigne l'élément HTML courant donc l'image objet du clic.
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.
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 !
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.
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 ensuite 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.
Il consiste en une fonction nommée "mafonction".
La variable "menu" référence l'élément NAV.
Si la boite NAV est affichée alors la fonction masque NAV.
Si la boite NAV est masquée alors la fonction affiche NAV.
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.
Vous cliquerez sur le "hamburger" pour afficher le menu.
Vous cliquerez de nouveau sur cet icône pour le masquer.
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 s'affiche !
je ne veux pas utiliser la méthode slide() de jQuery mais du JS natif et du CSS.
La boite DIV est identifiée "suite".
Si clic sur la balise A provoque l'exécution de la fonction JS "afficher_suite".
div#suite{display : none; }
Par défaut la boite identifiée "suite" est masquée.
La fonction démasque l'élément identifié "suite".
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" il passe à type "text" et vice-versa.
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.
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.
C'est donc un exemple de modification du DOM et plus précisement des attributs d'un élément du DOM.
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 ; utiliser "vanilla" signifie programmer en JS natif (sans une couche de framework).
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 natif a tellement progressé que le recours aux frameworks JS est souvent inutile.
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.
CSS : je définis une classe "effacer" qui définit une transition sur deux propriétés : width & opacity.
Script : je parcours toute les images de la page et à chaque image j'applique la commande toggle
de classList.
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
A la place du boucle infinie, j'aurais pu utiliser la structure do ... while (condition) dont la condition se réalise après un premier passage dans le bloc.
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 n'est pas achevée 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.
Via deux exemples je vais vous montrer un traitement asynchrone.
Le premier argument de setTimeout() est une fonction anonyme.
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 selon leur ordre physique 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.
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.
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 tranquillement le texte affiché ; texte ensuite effacé à cause des instructions "document.write".
Actualisez la page pour relancer le script !
On est pas loin de 1/6 pour chaque face.
Modifiez le code pour simuler 50 000 lancers et observez ...
Par défaut lorsque vous cliquez sur un bouton de type "submit" d'un formulaire vous adressez les données saisies vers le fichier précisé
(dans l'attribut "action" de la balise form).
Naturellement cette soumission n'est envisageable que si tous les champs obligatoires sont remplis.
La méthode preventDefault() (qui est appliqué à un objet de type 'event') permet d'annuler le comportement par défaut du navigateur.
Donc dans le cadre d'un formulaire cette méthode permet d'interdire le soumission en cas de saisie incorrecte.
Il s'agit donc d'un contrôle de saisie efficace qui évite d'utiliser le gestionnaire d'évènements HTML sur la balise FORM et donc
la célèbre syntaxe : ... form ... onsubmit ='return nomfonction ...
Tant que les deux champs n'ont pas été renseignés la soumission est bloquée.
La méthode preventDefault(), rattachée à l'interface Event neutralise l'action par défaut (envoi du formulaire).
Pour appeler régulièrement et automatiquement une fonction vous pensez à setInterval().
Sachez qu'il existe désormais une nouvelle méthode : window.requestAnimationFrame().
Nous pouvons désormais écrire le script de la façon suivante (extrait):
Le début du script est inchangé par rapport à la solution traditionnelle.
Attention, il faut deux instructions window.requestAnimationFrame(horloge); : une en dehors de la fonction (premier appel)
et une autre dans la fonction (récursivité).
Cette nouvelle méthode appelle la fonction 60 fois par seconde donc rend les animations très fluides.