Traduction
Tutoriel JavaScript & jQuery - sommaire
Tutoriel JavaScript & jQuery - 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
JavaScript est un langage orienté objet c'est à dire que ce langage dispose d'objets.
Un objet est une entité qui possède des propriétés et peut être manipulée avec des méthodes ;
une méthode est une fonction spécifique à un objet.
JavaScript est riche en objets prédéfinis (ou natifs).
Utilisons la console pour nous familiariser avec la syntaxe relative à cet objet.
Console JS utilisée le samedi 4 juin 2022.
On utilise le "constructeur" Date avec le mot réservé new pour créer une nouvelle "instance de
la "classe Date". On peut dire plus simplement "créer un objet de type date" Ou encore "créer une date & heure".
N'oubliez pas le "D" majuscule à "Date" pour bien préciser qu'il s'agit d'un constructeur.
Ici on n'a pas passé d'argument au "constructeur" Date donc la variable cejour récupère par défaut l'instant
présent (date et heure de l'appel sur le terminal de l'utilisateur).
Nous avons donc utilisé des méthodes "getter" c'est à dire des méthodes pour récupérer des infos sur une instance de l'objet Date.
Il existe aussi des méthodes "setter" ...
Console JS utilisée le dimanche 16 avril 2023 vers 22 heures :
Les méthodes toLocaleDateString() & toLocaleTimeString() sont particulièrment intéressantes puisque utilisées avec l'instant présent elles indiquent la date et l'heure dans des formats compréhensibles pour un francophone.
Dans le script ci-dessous nous utilisons les méthodes "getter" : getFullYear(), getMonth, getDate, ...
Le rendu dans un cadre :
Il serait préférable d'afficher le mois en toutes lettres et le nom du jour (dimanche, lundi, ...).
C'est possible en combinant des méthodes "getter" avec des tableaux indicés.
Le rang du mois et le type de jour (sous forme d'indices) sont convertis en chaines grâce aux tableaux indicés.
Si "rang_mois" vaut 4 alors "nom_mois" retourne "mai".
Si "type_jour" vaut 0 alors "nom_jour" retourne "dimanche".
Le rendu dans un Iframe :
Dans l'exemple ci-dessous une nouvelle date en 2025 est produite à partir de l'instant présent.
Grâce aux méthodes setFullYear(), setMonth() & setDate() une nouvelle date est produite à partir de la date courante.
Nouvelle date : 30 du mois, 9 mois plus tard.
La date du jour et la nouvelle date sont affichées dans un format francophone avec la méthode toLocalDateString.
Le rendu du script :
Vous constatez que la date produite est une date réaliste (changement de millesime assuré) et non pas : "30/13/2023"
JavaScript propose désormais le constructeur Intl.DateTimeFormat pour formater proprement et rapidement des dates.
A partir de cet objet paramétré la méthode format() retourne la date au format défini.
Le script :
hour12 vaut false / true pour afficher l'heure sur 24 heures (ou 12 heures).
les propriétés weekday, year, month, day, hour, minute, second peuvent avoir comme valeur : "numeric", "long", "short" ou "2-digit".
Le rendu dans un iframe :
Pour créer un objet String (une chaine) vous pouvez utiliser le constructeur String mais en général on préfère créer une variable de
type string avec la syntaxe : let var ="suite de caractères alphanumériques"
Une chaine est délimitée obligatoirement par des guillemets simples ou doubles.
Exemples :
let voyelles ='aeiouy'
let consonnes = "bcdfghjklmnpqrstvwxz"
let surnom = "l'emmerdeur"
let pseudo = 'l\'emmerdeur'
Une chaine délimitée par des guillemets simples peut contenir l'apostrophe si ce caractère est échappé.
Maintenant c'est plus simple de délimiter alors par des guillemets doubles.
Nouveauté : depuis ECMAScript 6 il est possible d'écrire une chaine sur plusieurs lignes à condition qu'elle soit délimitée par le séparateur `.
Oui ce séparateur quasi invisible et appelé "guillemet inversé" est obtenu en appuyant simultanément sur les touches 7 et altgr.
Le script :
Observez bien le symbole ` pour délimiter la chaine multilignes.
Notez qu'une chaine délimitée par des `peut contenir des guillements simples et doubles.
Le rendu dans un iframe :
Pour vous familiariser avec les propriétés et méthodes applicables à une chaine de caractère utilisez la console !
La chaine contenue dans "chaine" a une longueur de 17 donc les caractères ont pour valeur d'indice de 0 à 16.
La chaine contenue dans "chaine_propre" a une longueur de 12 caractères donc les * finales ont pour position 10 et 11.
Notez que l'on peut chainer les méthodes : élément. méthode().méthode() ...
Attention,length n'est pas une méthode mais une propriété ; donc pas de parenthèses finales !
Le code de la page (extraits) :
Testez ce formulaire :
Cette page montre qu'il est possible de contrôler la validité d'une adresse mail grâce à la méthode indexOf.
Une adresse mail valide comporte obligatoirement le caractère @ et un point après l'arobase.
La méthode indexOf() possède un deuxième argument (facultatif) qui précise à partir de quelle position doit commencer la recherche de
la sous chaîne passée en premier argument.
Je vous rappelle que la méthode indexOf() retourne -1 si elle n'a pas trouvé la sous chaîne dans la chaîne.
Donc si la chaîne saisie comprend un arobase et un point après l'arobase alors les variables rang_arobase et rang_point
contiennent un entier supérieur à -1 (supérieur ou égal à zéro).
La variable "concat2" récupère une chaine produite avec la nouvelle technique pour intégrer des variables dans une chaine : "template literal" qu'on
peut traduire par "gabarit de texte".
Attention la chaine utilisant cette technique doit alors être délimitée par des guillemets inversés : ` (7 + altgr).
Je montre aussi comment extraire une sous-chaine d'une chaine ; il faut utiliser la méthode slice(indice début, indice fin). Cette méthode retourne les caractères compris entre indice début inclus et indice fin exclu.
Enfin je montre enfin comment convertir un tableau indicé en chaine avec la méthode toString().
Remarque : cette même méthode permet aussi de convertir un 'number' en 'string'.
Rendu du script :
Les méthodes de l'objet Math (avec un M majuscule car c'est un constructeur) permettent d'effectuer des calculs.
Commandes à saisir dans la console :
Il existe aussi des fonctions trigonométriques ...
A saisir dans la console :
Surtout respectez la casse : PI en majuscule, E en majuscule !
Actualisez la page pour simuler un nouveau lancer.
Nous avons une boucle qui est exécutée 6 fois et génère 6 entiers compris entre 1 et 6
La méthode random() génère de façon aléatoire un réel compris entre 0 et 1 exclu (maximum : 0.9999....)
En multipliant par 6 ce réel on obtient donc un autre réel compris entre 0 et 6 exclu
En appliquant la méthode ceil() à ce réel on obtient un entier compris entre 1 et 6 et c'est bien ce que nous voulons.
Attention si on avait appliqué la méthode floor() on aurait obtenu un entier compris entre 0 et 5 ce qui ne correspond pas vraiment aux faces d'un dé ...
On peut argumenter les méthodes max() & min() de l 'objet Math avec une variable identifiant un tableau indicé (objet Array).
Attention le nom de la variable faisant référence à un tableau doit être précédée de trois points : opérateur de décomposition.
JavaScript propose désormais le constructeur Intl.NumberFormat pour formater proprement et rapidement des nombres.
A partir de cet objet paramétré, la méthode format() retourne le nombre au format défini.
Ce nouvel outil est très intéressant pour afficher les sommes dans un format francophone : utilisation de l'espace et de la virgule.
Dans le script ci-dessous je rappelle aussi des méthodes anciennes : toFixed(), toLocaleString().
Le script :
La première méthode arrondit à l'affichage en fonction de n (nombre de décimales).
La deuxième méthode utilise la virgule en guise de séparateur décimal (et non pas le point) et l'espace en guise de séparateur de milliers.
Ces deux méthodes n'étaient guère satisfaisantes car partielles.
Imaginons que "1000000.524" soit un montant en euros et en France, il faut afficher : 1 000 000,52 €.
Et s'il s'agit d'un montant en dollars aux USA : il faut afficher : $ 1,000,000.52
En format français le séparateur de milliers est l'espace et le séparateur décimal est la virgule
alors qu'en format US le séparateur de milliers est la virgule et le séparateur décimal est le point.
S'il s'agit d'un montant monétaire la propriété "style" doit avoir pour valeur "currency".
La propriété "currency" précise l'unité monétaire : 'EUR', 'USD', ...
Le rendu dans un Iframe :
JS interprète correctement des nombres exprimés en notation scientique.
Pour exprimer 1 000 000 en notation scientifique il faut écrire 10e6.
Exemple :
Je crée un format francophone pour afficher les sommes importantes avec le constructeur Intl.NumberFormat(). Il suffit de préciser en argument du constructeur "fr-FR" pour que le séparateur de milliers soit l'espace et le séparateur décimal soit la virgule.
Le rendu dans un Iframe :
J'ai déjà consacré tout un chapitre aux tableaux dans un chapitre précédent (liste simple, liste à plusieurs dimensions, liste clé-valeur, liste sans doublons).
Donc je vous renvoie à ce chapitre :
les tableaux - objets array, map & set
Window est l'objet JavaScript de plus haut niveau dans la hiérarchie des objets.
Il comporte un grand nombre de méthodes dont certaines que vous connaissez déjà : alert(), prompt(), confirm()
Il est le seul objet à autoriser une écriture simplifiée. En effet dans le cadre de la notation pointée il n'est pas obligatoire de préciser window.
Ainsi au lieu d'écrire window.alert() on se contente d'écrire alert()
Le principal sous objet de l'objet window est l'objet document qui comprend à son tour des objets ...
L'objet document est à la base de l'interface DOM.
Grâce à cette méthode vous pouvez écrire dans la page web.
Attention l'exécution d'une première instruction basée sur document.write provoque l'effacement de la page déjà chargée.
Vous voulez qu'un script affiche la table de multiplication par n (n : entier saisi par l'utilisateur).
Il suffit d'utiliser comme instructions basées sur document.write avec en arguments des balises HTML.
Le script :
Le rendu de ce code dans un nouvel onglet
C'est grâce à des méthodes de l'objet document que l'on peut cibler dans un script des éléments de la page.
L'argument est toujours un sélecteur CSS !
Exemple de routine : pour affecter la couleur de fond vert à chaque balise H3 il suffira d'écrire :
Il s'agit d'un sous-objet de document qui cible toutes les images de la page.
Exemple : un clic sur un bouton de commande permet d'agrandir toutes les images de la page.
Le code de la page:
Vous manipulez la collection d'images tel un tableau avec la structure for ... in !
Le rendu dans un cadre :
Il s'agit également d'un sous objet de l'objet window.
Il comprend neuf propriétés informant sur les dimensions de l'écran de l'internaute.
Exemple : connaitre toutes les propriétés et méthodes de l'objet screen.
Le script :
Le rendu dans un cadre :
Inutile d'écrire window.scren puisque window est implicite !
Testez cette page avec un ordinateur portable puis avec votre tablette.
Les.propriétés de l'objet screen sont très utilisées pour tester le type de terminal utilisé par le visiteur.
Si la largeur de l'écran est inférieure à 900 pixels il s'agit d'un mobile (tablette ou smartphone).
L'objet navigator va donner des infos sur le navigateur utilisé.
Dans l'exemple toutes les propriétés et méthodes de l'objet navigator sont affichées.
Le script : Testez ce script dans un nouvel onglet
La liste des propriétés est impressionnante.
L'objet navigateur contient un sous objet : geolocation.
Voir le tutoriel "HTML" qui traite entre autres de l'API geolocation :
API implémentées par les navigateurs