JDN Développeurs > Client Web > Le développement JavaScript facile avec Prototype

JavaScript facile avec Prototype > 4. Les objets HTML

Précédente Introduction 
Fonctionnement de Insertion

Insertion.Before
<div id="cible">
Insertion.Top
Contenu de l'élément cible
Insertion.Bottom
</div>
Insertion.After

Quelques méthodes de Element et Element.ClassNames
  1. Element.toggle("chat", "connexion", "news");
  2. // modifie la visibilité des éléments cités
  1. Element.update("avis", "<div>Joli lapin !</div>");
  2. //remplace l'élément entier
  3. Element.replace("avis", "Très joli, même !");
  4. //remplace le contenu de l'élément
if (Element.hasClassName("idElement", "uneClasseCSS") ) { ...code... }
  1. var = Element.getDimensions("bloc")
  2. // var contient par exemple { width: 175; height: 22 }
Quelques méthodes de Form
  1. <?php
  2. Form.activate("formulaire");
  3. Form.focusFirstElement("formulaire");
  4. var fe = Form.findFirstElement("monForm");
  5. var fs = Form.serialize("formulaire");
  6. //fs contient par exemple "prenom=Francis&nom=Gruch&age=42"

Les objets HTML
Les nouvelles classes de Prototype ne visent pas qu'à améliorer JavaScript : le framework propose également une poignée de classes dont le but est d'améliorer le traitement du document HTML. En quelque sorte, une extension du DOM.

Nous avons déjà vu l'objet Insertion, qui contient quatre classes permettant de cibler précisément où insérer du HTML : Insertion.Before, Insertion.Top, Insertion.Bottom et Insertion.After.

Element est littérallement une extension du DOM, avec une vingtainte de méthodes nouvelles ou améliorées : addClassName(), cleanWhitespace(), empty(), getDimensions(), getStyle(), hasClassName(), makeClipping(), remove(), removeClassName(), scrollTo(), toggle(), update()... Il définit également la classe Element.ClassNames, permettant de manipuler facilement les noms de classe d'un élement, avec les méthodes add(), remove() et set().

Form offre des méthodes utilitaires pour traiter le contenu d'un formulaire : serialize(), findFirstElement(), getElements(), getInputs(), disable(), enable(), focusFirstElement() et reset(). Cet objet définit également plusieurs objets et classes : Form.Element, pour travailler avec les éléments du formulaire (serialize(), getValue()) ; Form.Element.Serializers, un objet utilisé en interne pour extraire les valeurs des éléments du formulaire ; Form.Observer et Form.Element.Observer, pour surveiller les changements apportées à un formulaire ou ses élements ; Form.EventObserver et Form.Element.EventObserver.

Enfin, l'objet Field offre quelques méthodes destinées aux champs d'un formulaire : select(), active(), focus(), clear()...

Précédente Retour au sommaire Introduction 
Introduction | 1 | 2 | 3 | 4
 
|
Haut de page
Nos autres sites Société | Mentions légales | Contacts | Publicité | PA Emploi | Presse | Recrutement | Tous nos sites | Données personnelles
© Benchmark Group, 69/71 avenue Pierre Grenier. 92517 Boulogne Billancourt Cedex