Programmation objet avec JavaScript, le DOM

Notation objet

La notation abrégée utilise une série d'association nom-valeur entre accolades :
{ nom : valeur , nom : valeur , ... }
Le nom peut se passer des guillemets s'il suit la syntaxe des identificateurs 
var mobile={X:10,Y:15,VX:10,VY:20,NOM:'boule'}


var article = {
    nom : "Livre",prix_unitaire : 21.99,quantite : 2,
    resume : function(){
        return this.nom+" x "+this.quantite+" à "+this.prix_unitaire+
           " l'unité coûte(nt) "+( this.quantite*this.prix_unitaire );
    }
};

Création d'un objet utilisateur

// Définition d'une classe Vehicule function Vehicule(marque, modele, numero, km, prix) { this.marque = marque; this.modele = modele; this.numero = numero; this.compteur = km; this.prix = prix; }

Vehicule() est un constructeur.

Prototype

Le prototype permet d'accéder à la classe depuis le constructeur ou depuis un objet.


// Ajout de 2 méthodes à la classe Vehicule:
Vehicule.prototype.afficher = function() {return this.marque + " " + this.modele + " " + this.numero + " (" + this.compteur + " kms) " + this.prix + " €";}
// on rajoute au compteur les kms parcourus
Vehicule.prototype.parcourir = function(km) {this.compteur += km;}

Héritage

function Employee () {
this.name = "";
this.dept = "general";
}

Manager.prototype = new Employee;

function Manager () {
	this.reports = [];
}


paul = new Employee;
mark = new Manager;
mark.name = "Doe, Mark";
mark.dept = "admin";
mark.reports = ["navigator"];
mark.bonus = 3000;
// propriété ajoutée à mark uniquement
Employee.prototype.specialty = "none";
// propriété ajoutée à mark et à paul

Héritage

Camion.prototype = new Vehicule() ;

function Camion(marque, modele, numero, km, prix, poids, PTAC) {
this.parent = Vehicule;
this.parent(marque, modele, numero, km, prix);

this.poids = poids;
this.PTAC = PTAC;
}

Camion.prototype.afficher =function() { return this.marque + " " + this.modele + " " + this.numero + " " + this.km + " kms " + this.prix + " € " + this.PU + " " + this.PTC;}

Le lien d’héritage entre la classe Camion et la classe Vehicule a été créé par Camion.prototype = new Vehicule();. Ainsi que par les 2 premières lignes du constructeur Camion().

La classe Camion a 2 propriétés spécifiques : poids et PTAC. Les autres propriétés (marque, modele, numero, km, prix) sont héritées de la classe Vehicule. On peut donc écrire :

var mon_camion = new Camion("Volvo", "A47", "8888 AKZ 34", 30000, 18000, 15000, 25000);
mon_camion.parcourir(10000);
alert("Nouveau kilométrage = " + mon_camion.compteur);// donnera "Nouveau kilométrage = 40000"

La classe Camion hérite aussi des méthodes afficher() et parcourir() de la classe Vehicule. Mais du fait qu’une méthode afficher() a été redéfinie dans la classe Camion, ce sera cette méthode qui sera appelée, et non la méthode de la classe Vehicule. Par contre, appeler la méthode afficher() de la classe-mère Vehicule n’est plus possible :

mon_camion.parent.afficher()

produira une erreur ("Propriété non supportée par l’objet").

Enrichissement des objets standards

Création d'une méthode qui se comporte comme le substr en PHP

String.prototype.substr2 = function(nombre,longueur) {
if (nombre<0) return this.substr(this.length+nombre,longueur);
else return this.substr(nombre,longueur);
}

var chaine = "abcdefghij";
alert( chaine.substr2(-2) ); // donne "ij"
alert( chaine.substr2(-2,1) ); // donne "i"

Suppression des accents

String.prototype.sans_accents = function() {
var ch = this.replace(/é|è|ê|ë/g, "e");
ch = ch.replace(/à|â|ä/g, "a");
ch = ch.replace(/ç/g, "c");
ch = ch.replace(/î|ï/g, "i");
ch = ch.replace(/ô|ö/g, "o");
ch = ch.replace(/ù|û|ü/g, "u");
ch = ch.replace(/À|Â|Ä|Å/g, "A");
ch = ch.replace(/Ç/g, "C");
ch = ch.replace(/É|È|Ê|Ë/g, "E");
ch = ch.replace(/Ô|Ö/g, "O");
ch = ch.replace(/Ù|Û|Ü/g, "U");
return ch;
}

Conversion en hexadécimal

Number.prototype.hexa = function() {
if (isNaN(this) || this<0) return null;
var ch_hexa = "0123456789ABCDEF";
var result = "";
var nombre = this;
while (nombre) {
result = ch_hexa.charAt(nombre & 15) + result;
nombre >>= 4;
}
return result;
}

nombre=255;
alert(nombre.hexa()); //FF

Affichage d'une date


Date.prototype.formater= function() {
var sepa = "/";
if (arguments.length) sepa = arguments[0];
return this.getDate() + sepa + eval(this.getMonth()+ 1) + sepa + this.getFullYear();
}

madate = new Date(2005, 11, 1); // 1er décembre 2005
alert(madate.formater()); // donnera "1/12/2005"
alert(madate.formater("-")); // donnera "1-12-2005"

Syntaxe JSON

o={titre: "Les Vaudois", prix:8.99, vente:{qte:3,client:'Tom Pouce'}}
alert(o.vente.client)

Equivalent du XML: 

<titre>Les Vaudois</titre><prix>8.99</prix>
<vente>
	<qte>3</qte><client>Tom Pouce</client>
</vente>

Chargement à la volée

function include (url) { var head = document.getElementsByTagName('head')[0]; var script = document.createElement('script'); script.setAttribute('src',url); head.appendChild(script); } // inclusion d'un fichier exemple include("tva.js");

Exemple

Pour charger dynamiquement une feuille de style on utilisera: 

  var feuilleStyle=document.createElement("link")
  feuilleStyle.setAttribute("rel", "stylesheet")
  feuilleStyle.setAttribute("type", "text/css")
  feuilleStyle.setAttribute("href", url)
  head.appendChild(feuilleStyle);

Astuces