Prototype (JavaScript)
Cet article ne cite pas suffisamment ses sources ().
Si vous disposez d'ouvrages ou d'articles de référence ou si vous connaissez des sites web de qualité traitant du thème abordé ici, merci de compléter l'article en donnant les références utiles à sa vérifiabilité et en les liant à la section « Notes et références ».
En pratique : Quelles sources sont attendues ? Comment ajouter mes sources ?
Pour les articles homonymes, voir Prototype (homonymie).
Cet article est une ébauche concernant un logiciel libre et l’informatique.
Vous pouvez partager vos connaissances en l’améliorant (comment ?) selon les recommandations des projets correspondants.
| Développé par | Prototype Core Team |
|---|---|
| Première version | |
| Dernière version | 1.7.3 () |
| Dépôt | github.com/sstephenson/prototype |
| É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 comme un des éléments de base pour le support 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 populaires 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 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 fonction
[modifier | modifier le code]
- La fonction
$
La fonction dollar $ est utilisée comme raccourci de la méthode du DOM getElementById, permettant d'atteindre tous les éléments .
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 bibliothèque 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 en paramètre 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.
script.aculo.us
[modifier | modifier le code]
script.aculo.us est une bibliothèque JavaScript basée sur le framework JavaScript prototype offrant des effets visuels et des éléments de l'interface utilisateur par l'intermédiaire du DOM[2],[3].
Il est connu pour être intégré à Ruby on rails et Seaside mais peut être distribué en version standalone[2],[3].
script.aculo.us a été créé par Thomas Fuchs[2],[3]. Il a été extrait de son travail sur Fluxiom, un gestionnaire de ressources numériques de la société wollzelle[2]. La première version grand public est arrivée en [3].
Les effets visuels natifs de script.aculo.us sont au nombre de cinq : opacité, échelle, déplacement, surlignement et parallélisme[2],[3]. Ces effets peuvent se combiner pour fournir 16 effets additionnels[2],[3]. Les développeurs peuvent également créer leurs propres effets en se basant sur cet ensemble de fonctionnalités[3]. L'activation d'un effet est le fait de l'association d'une fonction et d'un Id du DOM, par exemple :
new Effect.Fade('message-box');
Les contrôles de l'interface utilisateur incluent le glisser-déplacer (Drag and Drop), l'autocompletion, l'édition sur place[3].
Le Framework permet également de créer des éléments du DOM dynamiquement[2],[3].
Notes et références
[modifier | modifier le code]Notes
[modifier | modifier le code]- (en) Cet article est partiellement ou en totalité issu de l’article de Wikipédia en anglais intitulé « Prototype JavaScript Framework » (voir la liste des auteurs).
- Cet article est partiellement ou en totalité issu de l'article intitulé « Script.aculo.us » (voir la liste des auteurs).
- (en) Cet article est partiellement ou en totalité issu de l’article de Wikipédia en anglais intitulé « script.aculo.us » (voir la liste des auteurs).
Références
[modifier | modifier le code]- (en) « Usage of JavaScript libraries for websites », sur w3techs.com (consulté le ).
- (de) Uwe Klappert, chap. 1.5 « Script.aculo.us », dans Web 2.0 mit ASP.NET und Ajax: Praxiseinstieg in die Erstellung interaktiver Webseiten ; [inklusive CD-ROM], mitp Verlags GmbH & Co. KG, (lire en ligne).
- (en) Dana Moore, Raymond Budd et Edward Benson, « Script.aculo.us », dans Professional Rich Internet Applications: AJAX and Beyond, John Wiley & Sons, (lire en ligne).
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, , 1re éd., 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]- Site officiel de Prototype
- Documentation de la bibliothèque, Developpez.com
- Mais qu'est-il arrivé à Prototype, histoire de Prototype par un des auteurs.
- site officiel de script.aculo.us.
