Traduction
Tutoriel sur Javascript, Vue.js, jQuery.js & Node.js
Recherche dans ce tuto
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. Un objet est obtenu grâce à un constructeur.
JavaScript est riche en objets prédéfinis (ou natifs) que je vais présenter dans ce chapitre.
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.
Le constructeur Date() sans argument retourne l'instant présent.
Sinon il faut argumenter dans l'ordre : année, mois, jour, [heure, minute seconde]) ;
les arguments entre crochets sont facultatifs.
Attention le rang du mois doit être un entier compris entre 0 et 11. Donc si le mois est "janvier" il faut saisir 0
et 11 pour "décembre !
L'argument de Date() peut être aussi un TimeStamp : nombre de millisecondes depuis le 1er janvier 1970 à 0 heure.
Le constructeur Date() produit toujours une date réaliste : voir rendu du script.
Pour la dernière date, il n'y a pas affichage du "30 février 2019" (date qui n'exite pas) mais du "2 mars 2019".
Testez dans la console cette série d'instructions JS :
var jour4 = Date(); console.log(jour4); console.log(typeof jour4); console.log(jour4.getFullYear());
J'ai oublié le mot clé "new" devant "Date()".
La variable "jour4" est considérée comme de type string et la dernière instruction "plante" .
Donc n'oubliez pas le mot clé "new" !
JavaScript propose une multitude de méthodes pour interroger une date.
Utilisons la console pour nous familiariser avec la syntaxe relative à cet objet.
Console utilisée le samedi 4 juin 2022.
> cejour = new Date() Sat Jun 04 2022 13:21:28 GMT+0200 (heure d’été d’Europe centrale) > cejour.getFullYear() 2022 > cejour.getDay() 6 > cejour.getMonth() 5 > cejour.getDate() 4 > cejour.getTime() 1654341688159 > cejour.getYear() 122 > cejour.getHours() 13 > cejour.getMinutes() 21 > cejour.getSeconds() 28
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 les méthodes "setter" . Vous avez entre autres : setFullYear(), setMonth(), setDate(), setHours(), etc.
Console du navigateur utilisée le dimanche 16 avril 2023 vers 22 heures :
>cejour = new Date() Sun Apr 16 2023 22:09:28 GMT+0200 (heure d’été d’Europe centrale) >cejour.toLocaleDateString() '16/04/2023' >cejour.toDateString() 'Sun Apr 16 2023' >cejour.toLocaleTimeString() '22:09:28'
Les méthodes toLocaleDateString() & toLocaleTimeString() sont particulièrment intéressantes pour afficher une date ou une heure dans un format compréhensibles pour un francophone.
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.
var mois = new Array("janvier", "février", "mars", "avril","mai",
"juin", "juillet", "aout","septembre", "octobre", "novembre", "décembre");
var jours = new Array("dimanche","lundi", "mardi", "mercredi",
"jeudi", "vendredi", "samedi");
var aujourdhui = new Date();
var annee = aujourdhui.getFullYear();
var rang_mois =aujourdhui.getMonth();
var nom_mois = mois[rang_mois];
var jour = aujourdhui.getDate();
var type_jour =aujourdhui.getDay();
var nom_jour = jours[type_jour];
document.write('nous sommes le : ' + nom_jour + " " + jour + " " + nom_mois + " " + annee);
var heure = aujourdhui.getHours();
var minutes = aujourdhui.getMinutes();
document.write('et il est très exactement : ' + heure + ' heures et ' + minutes + ' mn') ;
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".
La nature du jour et le mois apparaissent sous forme textuelle grâce à l'emploi de tableaux indicés.
EMACScript16 propose désormais le constructeur Intl.DateTimeFormat pour formater proprement et rapidement des dates.
Donc le recours aux "array" comme ci-dessus devient inutile.
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".
Constatez que l'instant présent apparait sous un format très clair pour un francophone.
Le mois et le type de jour apparaissent sous forme textuelle car j'ai utilisé la valeur "long" pour les propriétés month & weekday
Pour actualiser la date & heure régulièrement il suffirait d'intégrer le code JS dans une fonction et ladite
fonction appelée régulièrement grâce à une instruction basée sur setInterval(nomFonction, fréquence d'appel).
var ladate = new Date(annee, mois+6,30, heure+1,0,0) ; : cette instruction construit une nouvelle date à partir de la date du jour ; 6 mois plus tard, le 30 du mois et une heure plus tard.
La différence entre deux instances de Date donne le nombre de millisecondes entre ces deux instants.
Je suis né le 19 février 1953 donc : new Date(1953,1,19) ; le mois de février à l'indice 1.
Pour calculer l'âge en années et mois, c'est un peu plus compliqué ...
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/const nomVariable ="suite de caractères alphanumériques"
Une chaine est délimitée obligatoirement par des guillemets simples ou doubles. Il faut utiliser le même délimiteur en début et
fin de chaine.
Si la chaine contient une apostrophe il faut délimiter celle-ci par des guillemets doubles à moins d'échapper l'apostrophe.
Exemples de chaines correctes :
let voyelles ='aeiouy'
let consonnes = "bcdfghjklmnpqrstvwxz"
let surnom = "l'emmerdeur"
let pseudo = 'l\'emmerdeur'
var message = new String("bonjour");
Tous les objets string ont été créés de façon littérale sauf le dernier (créé avec le constructeur String).
Il est possible d'écrire une chaine sur plusieurs lignes à condition qu'elle soit délimitée par des
accents graves ("backquotes" en anglais).
Pour produire un "backquote" composez altgr + 7
Si la chaine multilignes contient un accent grave, il faudra 'échapper" celui-ci.
Observez bien les accents graves utilisés pour délimiter la chaine multilignes.
Notez bien que le terme `salut` est encadré par accents graves échappés.
Pour vous familiariser avec les propriétés et méthodes applicables à une chaine, utilisez la console !
> chaine =" **aBcDeFgH** "
' **aBcDeFgH** '
> chaine.toLowerCase()
' **abcdefgh** '
> chaine.toUpperCase()
' **ABCDEFGH** '
> chaine.length
< 17
> chaine.trim()
'**aBcDeFgH**'
> chaine.indexOf('*')
2
> chaine.lastIndexOf('*')
13
> chaine_propre = chaine.toLowerCase().trim()
'**abcdefgh**'
> chaine
' **aBcDeFgH** '
> chaine_propre.charAt(0)
'*'
> chaine_propre.length
12
> chaine_propre.charAt(10)
'*'
>chaine_propre.charCodeAt(2)
97
> chaine_propre.charCodeAt(10)
42
>chaine.includes('P')
false
>chaine.includes('B')
true
> chaine = chaine.toUpperCase().trim()
'**ABCDEFGH**'
La chaine contenue dans la variable "chaine" a une longueur de 17 donc les caractères ont pour valeur d'indice de 0 à 16.
Cette chaine contient des espaces.
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 ; exemple : chaine.toUpperCase().trim()
Attention,length n'est pas une méthode mais une propriété ; donc pas de parenthèses finales !
Les méthodes .trim(), .toUpperCase(), .toLowerCase() ne modifient pas la chaine d'origine à moins de récrérer
la variable : voir la dernière commande exécutée dans la console.
Une adresse mail valide comporte obligatoirement le caractère @ suivi d'un point.
On peut imaginer trois solutions pour vérifier une adresse mail.
Emploi de la méthode indexOf().
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).
Le rendu :
Emploi des méthodes indexOf() & include().
Le script devient alors :
...
mail.onblur = function()
{
var contenu = mail.value;
var rang = contenu.indexOf('@') ; // position de @
if (rang >=0 && contenu.includes('.' ,rang)) message = 'adresse mail correcte' ;
else message = 'adresse mail incorrecte';
document.getElementById('message').innerHTML = message ;
}
...
La méthode includes() retourne un booléen et admet en deuxième argument le rang de départ de la recherche.
Le rendu :
Vous pouvez aussi utiliser "l'artillerie lourde" : comparer la saisie à un objet de type RegExp.
Je n'en dis pas plus et vous renvoye au chapitre ad hoc.
Les expressions régulières OU objets de type RegExp
Je vous montre que dans une chaine délimitée par des accents graves il est possible
d'intégrer des variables avec la syntaxe ${variable}. Cette technique est intitulée "template strings" OU "template literals".
On peut traduire par "modèle de chaine".
Ce nouvel outil évite les concaténations fastidieuses.
Pour en savoir plus sur les templates strings
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 j'explique comment convertir un tableau indicé en chaine avec la méthode toString().
Il est en effet plus facile d'afficher une chaine qu'un tableau indicé ...
La méthode fromCharCode() appliquée directement au constructeur String et argumentée avec un entier (compris entre 0 et 255) retourne le caractère ASCII correspondant à cet entier.
Notez l'emploi d'un "template string".
Remarquez l'astuce JS pour produire le contenu de la boite DIV identifiée "contenu" : chaque passage dans la boucle
crée une ligne de ce futur contenu dans une variable du même nom.
C'est une solution plus élégante que l'emploi de la méthode document.write(expression)
Par contre l'emploi du gestionnaire d'évènement HTML est désormais déconseillé : mélange de HTML et JS dans une
même instruction.
Solution : emploi du gestionnaire d'événement JS et d'une fonction anonyme :
Le programme ci-dessous affiche les majuscules accentuées.
Celles-ci ont été stockées dans un tableau indicé. Puis ce dernier a été itéré.
Essayez de reconstituer le code !
Pour parcourir le tableau utilisez la structure "for ... of ..."
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 :
> Math.abs(-20) 20 > Math.floor(4.5) 4 > Math.ceil(4.5) 5 > Math.round(4.55) 5 > Math.sqrt(9) 3 > Math.pow(10,5) 100000 >Math.max(10,11,12,9) 12 >Math.min(10,11,12,9) 9 > Math.sign(-10) -1 > Math.sign(10) 1 > Math.random() 0.9048546055566105 > Math.random() 0.7660744744941468
À saisir dans la console :
> Math.PI 3.141592653589793 > Math.E 2.718281828459045 > angle_degres = 180 180 > angle_gradiants = angle_degres * Math.PI / 180 3.141592653589793
Surtout respectez la casse : PI en majuscule, E en majuscule !
180° vaut Π radians.
var compteur = 0 ;
while (compteur < 6)
{
var lancer = Math.random() // génère un réel entre 0 et 1 exclu
var lancer = Math.ceil(lancer * 6) ; // génération d'un entier compris entre 1 et 6
document.write('résultat du lancer de dé : ' + lancer);
compteur = compteur + 1 ;
}
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 ...
On peut argumenter les méthodes max() & min() de l 'objet Math avec un tableau indicé.
Attention le nom de la variable faisant référence à un tableau doit être précédé de trois points : opérateur de décomposition.
JavaScript propose désormais le constructeur Intl.NumberFormat pour formater proprement et rapidement des nombres.
Il n'est donc plus nécessaire d'utiliser une bibliothèque de formatage telle Numeral.js.
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. En effet le deuxième argument de cette fonction est facultatif.
Le rendu dans un Iframe :
J'ai déjà consacré tout un chapitre aux tableaux au sens large dans un chapitre précédent donc je n'y reviens pas.
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 ; 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 sous 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.
Il s'agit donc d'une solution à éviter ...
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 "HTML5" qui traite entre autres de l'API geolocation :
API implémentées par les navigateurs