Tutoriel JavaScript

JS ACCUEIL Présentation de JS JS Où aller Sortie JS Déclarations JS Syntaxe JS Commentaires JS Variables JS JS Let Const JS Opérateurs JS Arithmétique JS Affectation JS Types de données JS Fonctions JavaScript Objets JS Événements JS Chaînes JS Méthodes de chaîne JS Recherche de chaîne JS Modèles de chaîne JS Numéros JS Méthodes de nombre JS Tableaux JS Méthodes de tableau JS Tri de tableau JS Itération de tableau JS Const tableau JS Dates JS Formats de date JS Méthodes d'obtention de date JS Méthodes de définition de date JS JS Mathématiques JS Aléatoire Booléens JS Comparaisons JS Conditions JS Commutateur JS Boucle JS pour Boucle JS pour dans Boucle JS pour de Boucle JS pendant Pause JS Itérables JS Ensembles JS Cartes JS Type de JS Conversion de type JS JS au niveau du bit JS RegExp Erreurs JS Portée JS JS Levage Mode JS strict JS ce mot clé Fonction flèche JS Cours JS JSJSON Débogage JS Guide de style JS Meilleures pratiques JS Erreurs JS Performances JS Mots réservés JS

Versions JavaScript

Versions JavaScript JS 2009 (ES5) JS 2015 (ES6) JS 2016 JS 2017 JS 2018 JS IE / Edge Historique JS

Objets JS

Définitions d'objet Propriétés de l'objet Méthodes d'objet Affichage d'objet Accesseurs d'objet Constructeurs d'objets Prototypes d'objets Itérables d'objet Ensembles d'objets Cartes d'objets Référence d'objet

Fonctions JavaScript

Définitions des fonctions Paramètres de fonction Appel de fonction Appel de fonction Fonction Appliquer Fermetures de fonction

Cours JS

Introduction de classe Héritage de classe Classe Statique

JS asynchrone

Rappels JS JS asynchrone JS promet JS asynchrone/en attente

JS HTML DOM

Introduction DOM Méthodes DOM Documents DOM Éléments DOM HTML DOM Formulaires DOM DOM CSS Animations DOM Événements DOM Écouteur d'événements DOM Navigation DOM Nœuds DOM Collections DOM Listes de nœuds DOM

Nomenclature du navigateur JS

Fenêtre JS Écran JavaScript Emplacement JS Historique JS Navigateur JS Alerte contextuelle JS Calendrier JS Cookies JavaScript

API Web JS

Présentation de l'API Web API des formulaires Web API d'historique Web API de stockage Web API de travail Web API de récupération Web API de géolocalisation Web

JS AJAX

Introduction à AJAX AJAX XMLHttp Requête AJAX Réponse AJAX Fichier XML AJAX PHP AJAX ASP AJAX Base de données AJAX Applications AJAX Exemples AJAX

JSJSON

Présentation JSON Syntaxe JSON JSON contre XML Types de données JSON Analyse JSON Chaîne JSON Objets JSON Tableaux JSON Serveur JSON JSON PHP HTML JSON JSON JSONP

JS contre jQuery

Sélecteurs jQuery jQuery HTML jQuery CSS jQuery DOM

Graphiques JS

Graphiques JS Canevas JS JS Complot JS Chart.js Graphique Google JS JS D3.js

Exemples JS

Exemples JS JS HTML DOM Entrée HTML JS Objets HTML JS Événements HTML JS Navigateur JS Éditeur JavaScript Exercices JS Questionnaire JS Certificat JS

Références JavaScript

Objets JavaScript Objets DOM HTML


Classes JavaScript

ECMAScript 2015, également connu sous le nom d'ES6, a introduit les classes JavaScript.

Les classes JavaScript sont des modèles pour les objets JavaScript.

Syntaxe de classe JavaScript

Utilisez le mot-clé classpour créer une classe.

Ajoutez toujours une méthode nommée constructor():

Syntaxe

class ClassName {
  constructor() { ... }
}

Exemple

class Car {
  constructor(name, year) {
    this.name = name;
    this.year = year;
  }
}

L'exemple ci-dessus crée une classe nommée "Car".

La classe a deux propriétés initiales : "nom" et "année".

Une classe JavaScript n'est pas un objet.

C'est un modèle pour les objets JavaScript.


Utiliser une classe

Lorsque vous avez une classe, vous pouvez l'utiliser pour créer des objets :

Exemple

let myCar1 = new Car("Ford", 2014);
let myCar2 = new Car("Audi", 2019);

L'exemple ci-dessus utilise la classe Car pour créer deux objets Car .

La méthode constructeur est appelée automatiquement lorsqu'un nouvel objet est créé.


La méthode constructeur

La méthode constructeur est une méthode spéciale :

  • Il doit avoir le nom exact "constructeur"
  • Il est exécuté automatiquement lorsqu'un nouvel objet est créé
  • Il est utilisé pour initialiser les propriétés de l'objet

Si vous ne définissez pas de méthode constructeur, JavaScript ajoutera une méthode constructeur vide.


Méthodes de classe

Les méthodes de classe sont créées avec la même syntaxe que les méthodes d'objet.

Utilisez le mot-clé classpour créer une classe.

Ajoutez toujours une constructor()méthode.

Ajoutez ensuite n'importe quel nombre de méthodes.

Syntaxe

class ClassName {
  constructor() { ... }
  method_1() { ... }
  method_2() { ... }
  method_3() { ... }
}

Créez une méthode Class nommée "age", qui renvoie l'âge de la voiture :

Exemple

class Car {
  constructor(name, year) {
    this.name = name;
    this.year = year;
  }
  age() {
    let date = new Date();
    return date.getFullYear() - this.year;
  }
}

let myCar = new Car("Ford", 2014);
document.getElementById("demo").innerHTML =
"My car is " + myCar.age() + " years old.";

Vous pouvez envoyer des paramètres aux méthodes Class :

Exemple

class Car {
  constructor(name, year) {
    this.name = name;
    this.year = year;
  }
  age(x) {
    return x - this.year;
  }
}

let date = new Date();
let year = date.getFullYear();

let myCar = new Car("Ford", 2014);
document.getElementById("demo").innerHTML=
"My car is " + myCar.age(year) + " years old.";


Prise en charge du navigateur

Le tableau suivant définit la première version du navigateur avec prise en charge complète des classes en JavaScript :

Chrome 49 Edge 12 Firefox 45 Safari 9 Opera 36
Mar, 2016 Jul, 2015 Mar, 2016 Oct, 2015 Mar, 2016


"utiliser strictement"

La syntaxe dans les classes doit être écrite en "mode strict".

Vous obtiendrez une erreur si vous ne suivez pas les règles du "mode strict".

Exemple

En "mode strict" vous obtiendrez une erreur si vous utilisez une variable sans la déclarer :

class Car {
  constructor(name, year) {
    this.name = name;
    this.year = year;
  }
  age() {
    // date = new Date();  // This will not work
    let date = new Date(); // This will work
    return date.getFullYear() - this.year;
  }
}

En savoir plus sur le "mode strict" dans : JS Strict Mode .