Programmation Orientée Objet et Ajax avec Javascript

Damien Raude-Morvan - <drazzib@drazzib.com>

Linux-Nantes - http://www.linux-nantes.org/

Javascript, un language complet

Javascript n'est pas uniquement un machin pour valider les formulaires
Javascript n'est pas uniquement un truc pour faire du roll-over sur un menu
Javascript n'est pas uniquement un bidule qui rend votre page non-accessible
Javascript est un langage orienté prototype...

Javascript ou la programmation orientée prototype

Un prototype défini par son code source est vivant
Il est lui-même un objet au même titre que les autres
Il peut être modifié, appelé
Un prototype peut être vu comme un exemplaire modèle d'une famille d'objet
Un objet est un clone d'un prototype ou simplement un objet nommé
L'héritage se situe au niveau de l'objet : le changement de parent est possible

Les différents types d'objets JS

Objets natifs au language : String, Number, Array, Image, Date, Math
Objets fournis par l'hôte (le navigateur) : Window, Document, Form
Objets créés par l'utilisateur : Object et prototype

Modification des objets natifs

Ajout d'une méthode fill à l'objet natif Array :

function fill()
{
	this.color = "blue";
	this.size = 10;
}

Array.prototype.fill = fill;

var myArray = new Array();
myArray.fill();

Nouveaux objets utilisateurs : I - via une fonction

I - Utilisation d'un constructeur :

function Dog(name) {
	// Attributs
	this.name = name;

	// Fonctions
	this.talk = function() {
		alert( this.name + " dit Wouaf !" )
	}
} 

dog1 = new Dog("Medor");
dog1.talk();

dog2 = new Dog("Reglisse");
dog2.talk();

Nouveaux objets utilisateurs : II - via prototype

II - Utilisation du prototype :

[...] code du slide précédent [..]

Dog.prototype.changeName = function(name)
{
	this.name = name;
}

dog1 = new Dog("Felix");
dog1.changeName("Bill");
dog1.talk();

Nouveaux objets utilisateurs : III - via prototype.js

II - Pour nous faciliter la vie, utilisons la bibliothèque Prototype.js :

// Déclaration de la classe
var MySampleClass = Class.create();

// Implémentation de la classe
MySampleClass.prototype = {
	initialize: function(message) {
		this.message = message;
	},
	showMessage: function(ajaxResponse) {
		alert(this.message);
	}
};

// Création d'un instance de la classe
var myTalker = new MySampleClass('Hello World!');
myTalker.showMessage();

Mettre en place un héritage entre objets

Exemple pour MaClasse sous-classe de MonParent :

function MonParent() {
  this.b = function() { return 'parent'; }
  this.e = 3;
}

function MaClasse() {
  this.d = function() { return 'classe'; }
  this.e = 4;
}
MaClasse.prototype = new MonParent();

monObjet = new MaClasse();
monObjet.b();
monObjet.d();
monObjet.e;

Le Document Object Model (DOM)

Chaque document HTML affiché dans votre navigateur = un arbre DOM
La structure est arborescente :
- de la racine (<html>)
- ...aux feuilles (contenu textuel des balises)
L'ensemble des éléments du document HTML sont accessible sous forme d'objets : getElementById()

DOM via JS

Grace aux objets JS du navigateur on peut interagir avec le DOM
- Element oElem = Document.getElementById();
- oElem.remove();

Javascript : Bonnes pratiques

Ce qu'il ne faut pas faire :

Pas d'événements dans le HTML : onclick="function0()"
Ne jamais utiliser le protocole javascript: href="javascript:function1()"
Plus de code Javascript directement inclu dans les pages

Bonnes pratiques :

Votre JS dans des fichiers externes
Evénements uniquement sur des éléments de type liens ou boutons
Assurez-vous que votre site fonctionne sans Javascript
Faites le lien entre les éléments HTML et les fonctions JS sur le "onload" de votre page

Javacript : tout n'est pas résolu

Signets et gestion des boutons précédents / suivants avec Javascript : une possible solution dans le framework Yahoo UI
Beaucoup d'implémentations sont assez dépendantes du navigateur
Les performances ne sont pas toujours au rendez-vous

AJAX, ou Asynchronous JavaScript And XML

Ajax n'est ni un langage, ni une technologie. Ajax est un ensemble de technologies existantes utilisées conjointement :

HTML et CSS pour le contenu des pages et la présentation
le DOM pour la manipulation de la page (ajout d'éléments, modification...)
Javascript et XMLHttpRequest pour les requetes du client vers le serveur
XML+XSLT, JSON ou encore du text pour la réponse du serveur vers le client

Ajax : un peu d'histoire

XMLHttp, objet ActiveX de la bibliothèque MSXML, est présent depuis Internet Explorer 5.0 (septembre 1998)
XMLHttpRequest, objet Javascript natif, est présent dans Mozilla 1.0 (mai 2002)
... puis ajouté à Opéra, Safari et Konqueror
Le terme AJAX a été créer par Jesse James Garrett en février 2005 : un buzz word

Ajax : un peu de code I

Créons un objet XMLHttpRequest :

Pour IE 5.0 à 6.0 :

xhr = new ActiveXObject("Msxml2.XMLHTTP");

Pour les autres navigateurs (IE 7.0 inclu !) :
```
xhr = new XMLHttpRequest();
```

Ajax : un peu de code II

Transmission des données :

var data = "var1=value&var2=data";

xhr.open("POST", "http://gasell.org/ajax.php", true);
req.onreadystatechange = function (evt) {
  if (req.readyState == 4) {
     if(req.status == 200)
      dump(req.responseText);
     else
      dump("Error loading page\n");
  }
};

// GO !
xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
xhr.send(data);

Initiation Linux-Nantes, le 10 avril 2007

Programmation Orientée Objet (POO) et Ajax avec Javascript