JavaScriptPrototype
La bibliothèque de script JavaScript Prototype
La bibliothèque Prototype (www.prototypejs.org) développé par Sam Stephenson permet de simplifier la rédaction des scripts JavaScript. Les fonctionnalités proposées sont une sorte d'extension aux méthodes JavaScript. Prototype fournit de nombreux raccourcis de codes intéressants et permet, également, de simplifier le traitement des requêtes AJAX.
La bibliothèque prototype est téléchargable gratuitement sur www.prototypejs.org
Cette bibliothèque est constituée d'un seul fichier qu'il est nécessaire d'appeler, lors de chaque utilisation, par la ligne suivante:
<script type="text/javascript" src="mesfonctions/prototype.js"></script>
Exemples d'utilisation de prototype sur des objets :
<head>
<script type="text/javascript" src="mesfonctions/prototype.js"></script>
<style type="text/css">div.toutrouge { background-color:#c0c0c0; }</style>
<script type="text/javascript">
// <![CDATA[
function testprotopype() {
// Exemple 1 : Masque un element
Element.hide('div1');
// Exemple 2 : Affiche un element
Element.show('div1');
// Exemple 3 : Affiche le nom de la classe
alert(Element.classNames('div1'));
// Exemple 4 : Affect une classe de style (la classe toutrouge doit exister)
Element.addClassName('div1', 'toutrouge');
// Exemple 5 : Applique les propriétés CSS à un élément HTML
Element.setStyle('div1','background-color:#00ff00');
}
window.onload = testprotopype;
//]]>
</script>
</head>
<body>
<div id='div1' class="toutvert">Exemple de Javascript par Easy-micro</div>
</body>
<script type="text/javascript" src="mesfonctions/prototype.js"></script>
<style type="text/css">div.toutrouge { background-color:#c0c0c0; }</style>
<script type="text/javascript">
// <![CDATA[
function testprotopype() {
// Exemple 1 : Masque un element
Element.hide('div1');
// Exemple 2 : Affiche un element
Element.show('div1');
// Exemple 3 : Affiche le nom de la classe
alert(Element.classNames('div1'));
// Exemple 4 : Affect une classe de style (la classe toutrouge doit exister)
Element.addClassName('div1', 'toutrouge');
// Exemple 5 : Applique les propriétés CSS à un élément HTML
Element.setStyle('div1','background-color:#00ff00');
}
window.onload = testprotopype;
//]]>
</script>
</head>
<body>
<div id='div1' class="toutvert">Exemple de Javascript par Easy-micro</div>
</body>
Exemples d'utilisation de prototype sur des formulaires :
<head>
<script type="text/javascript" src="mesfonctions/prototype.js"></script>
<script type="text/javascript">
// <![CDATA[
function testprotopype() {
// Exemple 6 : Donne le focus au 1er champ d'un formulaire
Form.focusFirstElement('monform');
// Exemple 7 : Désactive tous les élements d'un formulaire (contraire: Form.enable('monform'))
Form.disable('monform');
// Exemple 8 : Cré une chaîne comportant la valeur de chaques champs séparés par '&'
// Nécessite les attributs 'name' sur les champs du formulaire
var maliste = Form.serialize('monform');
alert(maliste);
}
window.onload = testprotopype;
//]]>
</script>
</head>
<body>
<form id="monform">
Votre nom: <input type="text" id="lenom" name="lenom"/><br />
Votre prénom : <input type="text" id="leprenom" name="leprenom"/>
</form>
</body>
<script type="text/javascript" src="mesfonctions/prototype.js"></script>
<script type="text/javascript">
// <![CDATA[
function testprotopype() {
// Exemple 6 : Donne le focus au 1er champ d'un formulaire
Form.focusFirstElement('monform');
// Exemple 7 : Désactive tous les élements d'un formulaire (contraire: Form.enable('monform'))
Form.disable('monform');
// Exemple 8 : Cré une chaîne comportant la valeur de chaques champs séparés par '&'
// Nécessite les attributs 'name' sur les champs du formulaire
var maliste = Form.serialize('monform');
alert(maliste);
}
window.onload = testprotopype;
//]]>
</script>
</head>
<body>
<form id="monform">
Votre nom: <input type="text" id="lenom" name="lenom"/><br />
Votre prénom : <input type="text" id="leprenom" name="leprenom"/>
</form>
</body>
Scriptaculous
La bibliothèque prototype sert aussi de base à la bibliothèque Scriptaculous (http://script.aculo.us). Cette dernière fournit de nombreuses fonctionnalités intéressante, notamment au niveau graphique. Scriptaculous est disponible en téléchargement gratuit sur http://script.aculo.us/downloadsRico
La bibliothèque prototype sert aussi de base à la bibliothèque Rico ( http://openrico.org/). Rico permet d'exploiter facilement les comportements JavaScript comme son fameux "Drag and drop" (cliquer/ glisser).Pour aller plus loin...
> plus d'infos sur Wikipedia> voir d'autre bibliothèques JavaScript
