Pratiquons les class

Voir la vidéo

JavaScript côté navigateur

Description Sommaire

Dans ce chapitre nous allons pratiquer un peu les classes avec quelques exercices.

Géométrie

Notre code JavaScript va être utilisé dans un outil de dessin et on a besoin de class pour représenter nos formes géométriques. On se concentrera sur la création de rectangle et de carré.

Le rectangle sera construit à l'aide de 2 informations (la largeur et la hauteur). Le carré lui sera construit qu'avec une seule dimension et sera l'extension du rectangle.

Voici le code qu'il vous faudra faire fonctionner :

const r = new Rectangle(10, 20);
console.log(r.perimeter) // 60
console.log(r.isValid) // true
const r2 = new Rectangle(-10, 20);
console.log(r2.isValid) // false
const c = new Square(10); 
console.log(c.perimeter) // 40
console.log(r.isBiggerThan(c)) // true
class Rectangle {

    constructor (width, height) {
        this.width = width
        this.height = height
    }

    get perimeter () {
        return (this.width + this.height) * 2
    }

    get isValid () {
        return this.width > 0 && this.height > 0
    }

    isBiggerThan (shape) {
        return this.perimeter > shape.perimeter
    }

}

class Square extends Rectangle {
    constructor(width) {
        super(width, width)
    }
}

Bibliothécaire

07:12 - Dans cet exercice on cherche à gérer une bibliothèque de livres. On commencera par créer une class qui permettra de représenter un livre (on construira l'objet avec un titre et un nombre de page). On aura ensuite plusieurs propriétés / méthodes utiles

  • page, renverra la page courante du livre (1 par défaut)
  • nextPage(), permet de tourner la page et incrémentera la page courante
  • close(), permet de fermer un livre (revenir à la 1ère page)

Ensuite on créera une class Library pour organiser nos livres.

  • addBook(), permet de rajouter un livre à la bibliothèque
  • addBooks([]), permet de rajouter plusieurs livres d'un coup (on lui passera un tableau)
  • findBooksByLetter('s'), permet de lister tous les livres qui ont un titre qui commence par la lettre indiquée
const b = new Book('Seigneur des anneaux', 200);
console.log(b.page)
b.nextPage()
console.log(b.page)
b.close()
console.log(b.page)

const l = new Library()
l.addBook(b)
l.addBooks([
    new Book('Ready player one', 100),
    new Book('Oui-oui', 10),
    new Book('Sillage', 50),
])
console.log(l.findBooksByLetter('S'))
class Book {

    #page = 1

    constructor (title, pages) {
        this.title = title
        this.pages = pages
    }

    get page () {
        return this.#page
    }

    nextPage () {
        if (this.#page < this.pages) {
            this.#page++
        }
    }

    close () {
        this.#page = 1
    }
}

class Library {

    #books = []

    addBook(book) {
        this.#books.push(book)
    }

    addBooks(books) {
        books.forEach(this.addBook, this)
    }

    findBooksByLetter(letter) {
        return this.#books.filter((book) => book.title[0].toLowerCase() === letter.toLowerCase())
    }

}
Publié
Technologies utilisées
Auteur :
Grafikart
Partager