Constructor

via la syntaxe function

On peut déclarer un constructeur de la manière suivante:

function User(name) {
  this.name = name;
  this.isAdmin = false;
}

Pour créer une instance de l'objet user on peut utiliser le mot clé new.

const user = new User("John");

via la syntaxe class

class User {
  #privateName
  constructor(name, firstName, isAdmin) {
    this.#privateName = name;
    this._firstName = firstName
    this._isAdmin = isAdmin;
  }

  getFullName() {
    return `${this.#privateName} ${this._firstName}`
  }

  get firstName() {
    return this._firstName
  }

  set name(v) {
    throw new Error("you're not allowed to do that")
  }
}

const user1 = new User('John', 'Doe', false)
user1.firstName // 'Doe'
user1.name = 'Jack' // 'Error: you're not allowed to do that'
user1.getFullName() // 'John Doe'

on peut aussi déclarer des fonctions ou des getter & setters

Exercice

Student

Créer une classe Student qui aura les proprietés suivantes:

• name
• firstName
• notes => une proprieté privée qui est un tableau de notes

Je dois pouvoir ajouter une note de la manière suivante:

const student = new Student('John', 'Doe')
student.addNote(16)

la note doit être comprise entre 0 et 20 sinon une erreur est affichée.

Je dois pouvoir afficher sa moyenne aussi en faisant:

student.average

TodoApp

Créer 2 classes ayant les structures suivantes:

TodoList:

• rootElement: l'élément sur lequel sera monté la TodoList
• items: un tableau de TodoItem
• addItem: une méthode de la classe TodoList permettant d'ajouter un élément dans le tableau item
• render: une méthode permettant d'afficher la liste des éléments dans rootElement

TodoItem:

• text: le texte de la la todo (string)
• completed: le statut de la la todo (boolean)
• id: l'id de la la todo (string) => voir la méthode crypto.randomUUID
• htmlElement: l'élément HTML qui sera crée en même temps que la classe et qui sera utilisé par TodoList.render
• onToggle: une méthode permettant de passer la todo en done ou en incomplete
• render: une méthode permettant d'afficher l'élément dans htmlElement

Techniquement je dois être capable d'afficher la liste des todos en faisant:

const appDiv = document.getElementById('app');
const todoList = new TodoList(appDiv);
todoList.addItem({ text: 'make a todo app', completed: false });

Créer un formulaire qui permet d'ajouter un élément à la liste.