JavaScript : « objets »...

Plusieurs pensent que JavaScript est un langage orienté objet; c'est un peu vrai (surtout depuis quelques années), un peu faux (surtout dans une acception traditionnaliste du terme « orienté objet; »), mais reste que pour profiter pleinement de JavaScript, mieux vaut le voir comme un langage fonctionnel, avec une touche d'orientation objet...

Exemple 00 – Créer un dragon

Appuyez sur « Créer Zak » pour créer puis afficher les détails de Zak, un petit dragon.

function Bete(nom, espece, poids) {
  this.nom = nom;
  this.espece = espece;
  this.poids = poids;
}
function creerDragon(nom, couleur, poids) {
  return new Bete(
    nom, "Dragon " + couleur, poids
  );
}
function surpriseZak () {
  var Zak = creerDragon("Zak", "rouge", 3000);
  alert(Zak.nom + " est un " + Zak.espece +
        " de " + Zak.poids + " Kg.");
}

Exemple 01 – Créer un dragon (récit triste)

Appuyez sur « Créer Zik » pour créer puis afficher les détails de Zik, un petit dragon. Avertissement : il s'agit d'une histoire triste...

function Bete(nom, espece, poids) {
  this.nom = nom;
  this.espece = espece;
  this.poids = poids;
}
function creerDragon(nom, couleur, poids) {
  return new Bete(
    nom, "Dragon " + couleur, poids
  );
}
function surpriseZik(couleur, poids) {
  var Zik = creerDragon("Zik", couleur, poids);
  alert(Zik.nom + " est un " + Zik.espece + " de " + Zik.poids + " Kg.");
  envol(Zik);
  ajouterAiles(Zik, 'grandes');
  envol(Zik);
  couperAiles(Zik);
  envol(Zik);
}
function creerZik() {
   var couleur = document.getElementById("couleurZik").value;
   var poids = document.getElementById("poidsZik").value;
   return surpriseZik(couleur, poids);
}
function ajouterAiles(bete, valeur) {
  bete.ailes = valeur;
}
function couperAiles(bete) {
  if (bete.ailes != null) {
    delete bete.ailes;
  }
}
function envol(bete) {
  if (bete.ailes != null) {
    alert(bete.nom + " peut voler");
  } else {
    alert(bete.nom + " n'a pas d'ailes!");
  }
}

Exemple 02 – Créer une Personne

Appuyez sur « Créer personne » pour créer puis afficher les détails d'une instance de Personne

function Personne(nom) {
   this.getNom = function() {
      return nom;
   }
}
function afficherPersonne() {
   var nom = document.getElementById("nomPersonne").value;
   var p = new Personne(nom);
   alert("Personne creee : " + p.getNom());
   alert(p.presenter());
}
Personne.prototype.presenter = function () {
   return "Je suis " + this.getNom();
}

Exemple 03 – Créer un Point

Appuyez sur « Créer point » pour créer puis afficher les détails d'une instance de Point

function afficherPoint() {
   var x = document.getElementById("val_x").value;
   var y = document.getElementById("val_y").value;
   var p = new Point(x, y);
   alert(p.getX() + "," + p.getY());
}
function Point (x, y) {
   return {
      getX : function() {
         return x;
      },
      getY : function() {
         return y;
      }
   }
}