Aperçu des sections

  • Présentation

    Tout replier Tout déplier

    Cours en cours de réécirture car la POO a grandement évolué en JS ces derniers temps.


    Infos à jours sur le MDN :

    https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Classes

    https://developer.mozilla.org/fr/docs/Learn/JavaScript/Objects/JS_orient%C3%A9-objet


  • Théorie

    Voir le cours générique sur la programmation orientée objet.

  • Exemple réalisé en cours

    Cet exemple reprends toutes les notions de base de la POO vues dans le cours générique.


    <meta charset="UTF-8" />
    <h1>POO VOITURE</h1>
    <script>

        class Vehicule {

            #couleur = ''
            #marque = ''
            #vitesseMax = 0
            #passagers = []
            #limitePassagers = 0
            #quantiteCarburant = 0
            #volumeReservoir = 0

            #type = ''
            klaxon = ''

            static #nombreDeVoiture = 0;

            constructor(c = 'jaune', m = 'Ferrari', v = 100, p = 1, qteCarburant = 0, volReservoir = 35) {
                console.log("Création d'un nouveau véhicule !")
                this.#couleur = c
                this.#marque = m
                this.#vitesseMax = v
                this.#limitePassagers = p
                this.#quantiteCarburant = qteCarburant;
                this.#volumeReservoir = volReservoir;
                Vehicule.#nombreDeVoiture++;
            }


            static get nombreDeVoiture() {
                return Vehicule.#nombreDeVoiture
            }

            get couleur() {
                return this.#couleur;
            }

            set couleur(couleur) {
                if (isNaN(couleur)) {
                    this.#couleur = couleur;
                } else {
                    console.error(`une couleur ne peut pas etre un nombre ${couleur}.`);
                }
            }


            get type() {
                return this.#type;
            }

            set type(type) {
                if (type === 'voiture' || type == 'camion' || type == 'moto') {
                    this.#type = type;
                } else {
                    console.error('un véhicule n epeut etre que une voiture, un camion, ou une moto');
                }
            }

            acceler() {
                console.log('La voiture roule')
                console.log(`Attention, la voiture ne peut pas dépasser les ${this.#vitesseMax}km/h`)
            }

            freiner() {
                console.log('La voiture freine')
            }

            info() {
                console.log(`Type de véhicule : ${this.#type}`)
                console.log(`La couleur de ce véhicule est ${this.#couleur}`)
                console.log(`La marque de ce véhicule est ${this.#marque}`)
                console.log(`La vitesse max de ce véhicule est de ${this.#vitesseMax} km/h`)
                console.log(`Nombre de passagers autorisés :  ${this.#limitePassagers}`)
                console.log(`Réservoir :  ${this.#quantiteCarburant}/${this.#volumeReservoir}`)
                console.log(`Passagers : ${this.nombreDePassager()}/${this.#limitePassagers})`)
                /* console.log(`=> Nombre de véhicules créées : ${Vehicule.#nombreDeVoiture}`); */
            }


            rajouteCarburant(qte = 1) {
                if (qte + this.#quantiteCarburant > this.#volumeReservoir) {
                    console.error(`Impossible de mettre ${qte}L dans le réservoir.`);
                } else {
                    this.#quantiteCarburant += qte;
                }
            }


            faireLePlein() {
                while (this.#quantiteCarburant < this.#volumeReservoir) {
                    this.rajouteCarburant()
                }
            }


            nombreDePassager() {
                return this.#passagers.length
            }


            ajouterUnPassager(prenom) {
                if (this.nombreDePassager() >= this.#limitePassagers) {
                    console.error(`Nombre maximum de passager atteint (${this.nombreDePassager()}/${this.#limitePassagers})`)
                } else {
                    this.#passagers.push(prenom)
                }
            }


            coupDeKlaxon = () => {
                console.log(`Klaxon : ${this.klaxon}`)
            }

        }





        class Voiture extends Vehicule {

            #capaciteCoffre = 0

            constructor(c = 'jaune', m = 'Ferrari', v = 100, p = 1, qteCarburant = 0, volReservoir = 35) {
                super(c, m, v, p, qteCarburant, volReservoir)

                this.type = 'voiture'
                this.#capaciteCoffre = 50
                this.klaxon = 'Tut tut'

                console.log("=> Création d'une nouvelle voiture !")
            }

            info = () => {
                super.info();
                console.log(`La capacité du coffre de ma voiture est de : ${this.#capaciteCoffre}L`)
            }
        }



        class Camion extends Vehicule {

            #remorque = false

            constructor(c = 'jaune', m = 'Ferrari', v = 100, p = 1, qteCarburant = 0, volReservoir = 35) {
                super(c, m, v, p, qteCarburant, volReservoir)
                this.type = 'camion'
                this.klaxon = 'Pouet pouet'
                this.#remorque = true
                console.log("=> Création d'un nouveau camion !")
            }

            info = () => {
                super.info();
                if (this.#remorque === true) {
                    console.log(`Le camion a une remorque`)
                } else {
                    console.log(`Le camion n'a pas de remorque`)
                }
            }
        }






        let vehicules = [];


        let voiture = new Voiture()
        let camion = new Camion('blanc', 'iveco', 90, 8, 0, 150)

        /* let voiture2 = new Voiture('bleu', 'Renault', 130, 3, 10, 40)
        let voiture3 = new Voiture('rose', 'Citroen', 150, 2, 19, 20)
        let voiture4 = new Voiture('jaune', 'Fiat', 130, 3, 10, 20)
     */


        vehicules.push(voiture)
        vehicules.push(camion)
        /* 
        voitures.push(voiture2)

        voitures.push(voiture3)

        
            voiture1.ajouterUnPassager('Julien')
            voiture1.ajouterUnPassager('Patricia')
        
            //On ajoute un passager a la voiture 2
            voiture2.ajouterUnPassager('Fédérique')
            voiture2.ajouterUnPassager('Nadia')
            voiture2.ajouterUnPassager('Bilal')
            voiture2.ajouterUnPassager('Corentin')
        
        
            voiture3.ajouterUnPassager('Nathan')
         */


        console.log('-------')

        vehicules.forEach((vehicule) => {
            vehicule.faireLePlein()
            vehicule.info()
            vehicule.coupDeKlaxon()
            console.log('-------')
        })


        /* console.log(`=> Nombre de voiture créées : ${Voiture.nombreDeVoiture}`); */






    </script>

  • TP