Javascript ES5
ECMAScript 2009, également connu sous le nom d’ES5, a été la première révision majeure de JavaScript.
Ce chapitre décrit les fonctionnalités les plus importantes de ES5.
Fonctionnalités ES5
Prise en charge du navigateur
ES5 est entièrement pris en charge dans tous les navigateurs modernes :
| Chrome | C’EST À DIRE | Bord | Firefox | Safari | Opéra |
| Oui | 9.0 | Oui | Oui | Oui | Oui |
La directive « usage strict »
"use strict" définit que le code JavaScript doit être exécuté en « mode strict ».
Avec le mode strict, vous pouvez, par exemple, ne pas utiliser de variables non déclarées.
Vous pouvez utiliser le mode strict dans tous vos programmes. Cela vous aide à écrire du code plus propre, comme vous empêcher d’utiliser des variables non déclarées.
"use strict" est juste une expression de chaîne. Les anciens navigateurs ne lanceront pas d’erreur s’ils ne le comprennent pas.
En savoir plus dans Mode JS strict.
Accès aux propriétés sur les chaînes
Le charAt() renvoie le caractère à un index (position) spécifié dans une chaîne :
ES5 autorise l’accès aux propriétés sur les chaînes :
Exemple
var str = « BONJOUR LE MONDE » ;
chaîne[0]; // renvoie H
Essayez-le vous-même »
L’accès à la propriété sur la chaîne peut être un peu imprévisible.
En savoir plus dans les méthodes de chaîne JS.
Chaînes sur plusieurs lignes
ES5 autorise les littéraux de chaîne sur plusieurs lignes s’ils sont échappés avec une barre oblique inverse :
La méthode peut ne pas avoir de support universel.
Les navigateurs plus anciens peuvent traiter différemment les espaces autour de la barre oblique inverse.
Certains navigateurs plus anciens n’autorisent pas les espaces derrière le caractère .
Un moyen plus sûr de décomposer un littéral de chaîne consiste à utiliser l’ajout de chaîne :
Mots réservés comme noms de propriété
ES5 autorise les mots réservés comme noms de propriété :
Couper la chaîne()
Le trim() La méthode supprime les espaces des deux côtés d’une chaîne.
En savoir plus dans les méthodes de chaîne JS.
Tableau.estArray()
Le isArray() La méthode vérifie si un objet est un tableau.
Exemple
function maFonction() {
var fruits = [« Banana », « Orange », « Apple », « Mango »];
var x = document.getElementById(« démo »);
x.innerHTML = Array.isArray(fruits);
}
En savoir plus sur les tableaux JS.
Tableau pour chaque()
Le forEach() La méthode appelle une fonction une fois pour chaque élément du tableau.
Exemple
var txt = « » ;
var nombres = [45, 4, 9, 16, 25];
nombres.forEach(myFunction);
function maFonction(valeur) {
txt = txt + valeur + «
» ;
}
En savoir plus dans les méthodes d’itération de tableau JS.
Carte de tableau()
Cet exemple multiplie chaque valeur de tableau par 2 :
Exemple
var nombres1 = [45, 4, 9, 16, 25];
var nombres2 = nombres1.map(maFonction);
function maFonction(valeur) {
valeur de retour * 2 ;
}
En savoir plus dans les méthodes d’itération de tableau JS.
Filtre de tableau()
Cet exemple crée un nouveau tableau à partir d’éléments dont la valeur est supérieure à 18 :
Exemple
var nombres = [45, 4, 9, 16, 25];
var over18 = nombres.filter(myFunction);
function maFonction(valeur) {
valeur de retour > 18 ;
}
En savoir plus dans les méthodes d’itération de tableau JS.
Réduire le tableau()
Cet exemple trouve la somme de tous les nombres dans un tableau :
Exemple
var nombres1 = [45, 4, 9, 16, 25];
var somme = nombres1.reduce(myFunction);
function maFonction(total, valeur) {
renvoie total + valeur ;
}
En savoir plus dans les méthodes d’itération de tableau JS.
Tableau réduireRight()
Cet exemple trouve également la somme de tous les nombres d’un tableau :
Exemple
var nombres1 = [45, 4, 9, 16, 25];
var somme = nombres1.reduceRight(myFunction);
function maFonction(total, valeur) {
renvoie total + valeur ;
}
En savoir plus dans les méthodes d’itération de tableau JS.
Tableau chaque()
Cet exemple vérifie si toutes les valeurs sont supérieures à 18 :
Exemple
var nombres = [45, 4, 9, 16, 25];
var allOver18 = nombres.toutes(maFonction);
function maFonction(valeur) {
valeur de retour > 18 ;
}
En savoir plus dans les méthodes d’itération de tableau JS.
Tableau certains()
Cet exemple vérifie si certaines valeurs sont supérieures à 18 :
Exemple
var nombres = [45, 4, 9, 16, 25];
var allOver18 = nombres.quelques(maFonction);
function maFonction(valeur) {
valeur de retour > 18 ;
}
En savoir plus dans les méthodes d’itération de tableau JS.
Tableau indexOf()
Recherche dans un tableau une valeur d’élément et renvoie sa position.
Exemple
var fruits = [« Banana », « Orange », « Apple », « Mango »];
var a = fruits.indexOf(« Pomme »);
En savoir plus dans les méthodes d’itération de tableau JS.
Tableau lastIndexOf()
lastIndexOf() est le même que indexOf()mais recherche à partir de la fin du tableau.
Exemple
var fruits = [« Banana », « Orange », « Apple », « Mango »];
var a = fruits.lastIndexOf(« Pomme »);
En savoir plus dans les méthodes d’itération de tableau JS.
JSON.parse()
Une utilisation courante de JSON consiste à recevoir des données d’un serveur Web.
Imaginez que vous receviez cette chaîne de texte d’un serveur Web :
‘{« name »: »Jean », « âge »:30, « ville »: »New York »}’
La fonction JavaScript JSON.parse() est utilisé pour convertir le texte en objet JavaScript :
En savoir plus dans notre Tutoriel JSON.
JSON.stringify()
Une utilisation courante de JSON consiste à envoyer des données à un serveur Web.
Lors de l’envoi de données à un serveur Web, les données doivent être une chaîne.
Imaginez que nous ayons cet objet en JavaScript :
var obj = {name: »John », age:30, city: »New York »} ;
Utiliser la fonction JavaScript JSON.stringify() pour le convertir en chaîne.
var monJSON = JSON.stringify(obj);
Le résultat sera une chaîne suivant la notation JSON.
myJSON est maintenant une chaîne, et prêt à être envoyé à un serveur :
Exemple
var obj = {name: »John », age:30, city: »New York »} ;
var monJSON = JSON.stringify(obj);
document.getElementById(« démo »).innerHTML = monJSON ;
Pour en savoir plus, consultez notre didacticiel JSON.
Date.maintenant()
Date.now() renvoie le nombre de millisecondes depuis la date zéro (1er janvier 1970 00:00:00 UTC).
Date.now() renvoie la même chose que getTime() effectué sur un Date objet.
En savoir plus dans Dates JS.
Date àISOString()
Le toISOString() convertit un objet Date en chaîne, en utilisant le format standard ISO :
Exemple
const d = nouvelle Date();
document.getElementById(« demo »).innerHTML = d.toISOString();
Date àJSON()
toJSON() convertit un objet Date en une chaîne, formatée comme une date JSON.
Les dates JSON ont le même format que la norme ISO-8601 : AAAA-MM-JJTHH:mm:ss.sssZ :
Exemple
d = nouvelle Date();
document.getElementById(« demo »).innerHTML = d.toJSON();
Getters et setters de propriété
ES5 vous permet de définir des méthodes d’objet avec une syntaxe qui ressemble à l’obtention ou à la définition d’une propriété.
Cet exemple crée un getter pour une propriété appelée fullName :
Exemple
// Crée un objet :
var personne = {
prénom : « John »,
nom : « Biche »,
obtenir nomcomplet() {
retourne this.firstName + » » + this.lastName ;
}
} ;
// Affiche les données de l’objet à l’aide d’un getter :
document.getElementById(« demo »).innerHTML = person.fullName;
Cet exemple crée un setter et un getter pour la propriété de langue :
Exemple
var personne = {
prénom : « John »,
nom : « Biche »,
langue : « NON »,
obtenir lang() {
retourne cette.langue ;
},
set lang(valeur) {
this.language = valeur;
}
} ;
// Définit une propriété d’objet à l’aide d’un setter :
personne.lang = « fr »;
// Affiche les données de l’objet à l’aide d’un getter :
document.getElementById(« démo »).innerHTML = personne.lang;
Essayez-le vous-même »
Cet exemple utilise un setter pour sécuriser les mises à jour en majuscules de la langue :
Exemple
var personne = {
prénom : « John »,
nom : « Biche »,
langue : « NON »,
set lang(valeur) {
this.language = value.toUpperCase();
}
} ;
// Définit une propriété d’objet à l’aide d’un setter :
personne.lang = « fr »;
// Affiche les données de l’objet :
document.getElementById(« démo »).innerHTML = personne.langue;
Essayez-le vous-même »
En savoir plus sur les Gettes et les Setters dans les accesseurs d’objets JS
Objet.defineProperty()
Object.defineProperty() est une nouvelle méthode Object dans ES5.
Il vous permet de définir une propriété d’objet et/ou de modifier la valeur et/ou les métadonnées d’une propriété.
Exemple
// Créer un objet :
var personne = {
prénom : « John »,
nom : « Biche »,
langue : « NON »,
} ;
// Modifier une propriété :
Object.definePropertyObject.defineProperty(personne, « langue », {
valeur : « EN »,
inscriptible : vrai,
énumérable : true,
paramétrable : vrai
});
// Enumérer les propriétés
var txt = « » ;
pour (var x en personne) {
txt += personne[x] + «
» ;
}
document.getElementById(« démo »).innerHTML = txt;
L’exemple suivant est le même code, sauf qu’il masque la propriété language de l’énumération :
Exemple
// Créer un objet :
var personne = {
prénom : « John »,
nom : « Biche »,
langue : « NON »,
} ;
// Modifier une propriété :
Object.definePropertyObject.defineProperty(personne, « langue », {
valeur : « EN »,
inscriptible : vrai,
énumérable : false,
paramétrable : vrai
});
// Enumérer les propriétés
var txt = « » ;
pour (var x en personne) {
txt += personne[x] + «
» ;
}
document.getElementById(« démo »).innerHTML = txt;
Essayez-le vous-même »
Cet exemple crée un setter et un getter pour sécuriser les mises à jour en majuscules de la langue :
Exemple
/// Créer un objet :
var personne = {
prénom : « John »,
nom : « Biche »,
langue : « NON »
} ;
// Modifier une propriété :
Object.definePropertyObject.defineProperty(personne, « langue », {
get : fonction() { langue de retour },
set : function(value) { language = value.toUpperCase()}
});
// Changer de langue
personne.langue = « fr »;
// Langue d’affichage
document.getElementById(« démo »).innerHTML = personne.langue;
Essayez-le vous-même »
Méthodes d’objet E5
ES5 a ajouté de nombreuses nouvelles méthodes d’objet à JavaScript :
Gestion des objets
// Créer un objet avec un objet existant comme prototype
Object.create(parent, donateur)
// Ajout ou modification d’une propriété d’objet
Object.defineProperty(objet, propriété, descripteur)
// Ajout ou modification des propriétés d’un objet
Object.defineProperties(objet, descripteurs)
// Accéder aux propriétés
Object.getOwnPropertyDescriptor(objet, propriété)
// Renvoie toutes les propriétés sous forme de tableau
Object.getOwnPropertyNames(objet)
// Accéder au prototype
Objet.getPrototypeOf(objet)
// Retourne les propriétés énumérables sous forme de tableau
Objet.keys(objet)
Protéger des objets
// Empêche l’ajout de propriétés à un objet
Object.preventExtensions(objet)
// Renvoie true si des propriétés peuvent être ajoutées à un objet
Object.isExtensible(objet)
// Empêche les modifications des propriétés de l’objet (pas des valeurs)
Objet.sceau (objet)
// Renvoie true si l’objet est scellé
Object.isSealed(objet)
// Empêche toute modification d’un objet
Objet.freeze(objet)
// Renvoie true si l’objet est gelé
Object.isFrozen (objet)
En savoir plus dans Objet ECMAScript5.
Fonction Lier()
Avec le bind() méthode, un objet peut emprunter une méthode à un autre objet.
Cet exemple crée 2 objets (personne et membre).
L’objet membre emprunte la méthode fullname à l’objet person :
Exemple
const personne = {
prénom: »John »,
nom: « Biche »,
nomcomplet : fonction () {
retourne this.firstName + » » + this.lastName ;
}
}
membre constant = {
Prénom: »Hege »,
nom : « Nilsen »,
}
let fullName = person.fullName.bind(member);
En savoir plus dans Fonction bind().
Virgules de fin
ES5 autorise les virgules de fin dans les définitions d’objets et de tableaux :
Exemple d’objet
personne = {
prénom : « John »,
nom: » Biche »,
âge : 46 ans,
}
Exemple de tableau
points = [
1,
5,
10,
25,
40,
100,
];
AVERTISSEMENT !!!
JSON n’autorise pas les virgules de fin.
Objets JSON :
// Autorisé:
var person = ‘{« firstName »: »John », « lastName »: »Doe », « age »:46}’
JSON.parse(personne)
// Interdit:
var person = ‘{« firstName »: »John », « lastName »: »Doe », « age »:46,}’
JSON.parse(personne)
Tableaux JSON :
// Autorisé:
points = [40, 100, 1, 5, 25, 10]
// Interdit:
points =
[40, 100, 1, 5, 25, 10,]
#Javascript #ES5