Prototype (Javascript)

Un article de Wikipédia, l'encyclopédie libre.
Aller à : navigation, rechercher
Page d'aide sur l'homonymie Pour les articles homonymes, voir Prototype (homonymie).
Prototype
Développeur Prototype Core Team
Première version Février 2005
Dernière version 1.7.1 (5 juin 2012)
État du projet Actif
Écrit en Javascript
Type Framework
Licence MIT License
Site web http://prototypejs.org

Prototype est un framework javascript créé par Sam Stephenson en février 2005 comme un des éléments de base pour le support d'Ajax de Ruby on Rails.

Format[modifier | modifier le code]

Prototype est distribué seul, mais peut être partie intégrante de plus larges projets comme Ruby on Rails, script.aculo.us et Rico. Prototype est utilisée par 2,7 % des sites web, ce qui en fait l'une des plus populaire bibliothèques Javascript[1].

Fonctionnalités[modifier | modifier le code]

Prototype fournit diverses fonctions pour le développement d'applications. L'étendue des fonctionnalités vont des raccourcis aux fonctions utilisant XMLHttpRequest (Ajax).

Il fournit également des bibliothèques de fonctions permettant de gérer la programmation objet, ce que le Javascript classique ne peut faire. En Javascript natif, la création de fonction possède une propriété prototype. Le framework prototype ne doit pas être confondu avec cet élément.

Exemples de fonctions[modifier | modifier le code]

La fonction $()

La fonction dollar est utilisée comme raccourci de la fonction javascript classique getElementById, permettant d'atteindre tous les éléments du DOM.

Exemple d'utilisation :

document.getElementById("id_of_element").style.color = "#ffffff";

Réduction du code après utilisation de la fonction :

$("id_of_element").setStyle({color: '#ffffff'});
La fonction $F()

S'appuie sur la fonction $(). Elle renvoie la valeur de l'élément de formulaire demandée. Pour une entrée 'text', la fonction retourne les données contenues dans l'élément. Pour un élément d'entrée 'select', la fonction retourne la valeur actuellement sélectionnée.

$F("id_of_input_element")
Objet Ajax

Deux méthodes : Ajax.Request (renvoie la sortie XML brut d'un appel AJAX) et Ajax.Updater (injecte le retour à l'intérieur d'un objet DOM spécifié)

Exemple d'utilisation : Le Ajax.Request ci-dessous trouve les valeurs actuelles des deux éléments d'entrée de formulaire HTML, émet une requête HTTP POST au serveur avec les valeurs de l'élément, et exécute une fonction personnalisée (appelé showResponse ci-dessous), lorsque la réponse HTTP est reçue par le serveur :

new Ajax.Request("http://localhost/server_script", {
    parameters: {
        value1: $F("form_element_id_1"),
        value2: $F("form_element_id_2")
    },
    onSuccess: showResponse,
    onFailure: showError
});

Programmation orientée objet[modifier | modifier le code]

La librairie fournit les éléments permettant la programmation orientée objet. La méthode Class.create () est utilisée pour créer une nouvelle classe. À une classe est alors attribué un prototype qui agit comme un modèle pour les instances de la classe.

var FirstClass = Class.create( {
    // La méthode initialize sert de [[Syntaxe_JavaScript#Constructeur|constructeur]]
    initialize: function () {
        this.data = "Bonjour";
    }
});

Extension d'une autre classe :

Ajax.Request = Class.create( Ajax.Base, { 
    // Remplace la méthode d'initialisation
    initialize: function(url, options) { 
        this.transport = Ajax.getTransport(); 
        this.setOptions(options); 
        this.request(url); 
    }, 
    // ...
});

La fonction Object.extend (dest, src) prend deux objets comme paramètres et copie les propriétés du second objet (notion d'héritage). L'objet combiné est retourné comme résultat de la fonction. Comme dans l'exemple ci-dessus, le premier paramètre crée généralement l'objet de base, tandis que le second est un objet anonyme utilisé uniquement pour définir des propriétés supplémentaires. L'ensemble de la déclaration de la sous-classe se passe dans les parenthèses de l'appel de la fonction.

Notes et références[modifier | modifier le code]

Bibliographie[modifier | modifier le code]

  • (en) Leslie M. Orchard, Ara Pehlivanian, Scott Koon et Harley Jones, Professional JavaScript Frameworks: Prototype,YUI, ExtJS, Dojo and MooTools, Wrox Press,‎ 31 août 2009, 888 p. (ISBN 978-0-470-38459-6, lire en ligne)

Voir aussi[modifier | modifier le code]

Articles connexes[modifier | modifier le code]

Liens externes[modifier | modifier le code]