Utilisation des propriétés

Dans cette page, nous allons nous concentrer sur les propriétés des boutons (question de simplicité)

Propriétés de base

Comme nous avons pu le voir, nous pouvons faire appel a des propriétés existantes, telles que NAME ou TYPE. Revoici un exemple : Nous créons 2 boutons : Le premier à un NAME = "BDCBoutonDeTest" (il va servir de cobaye). Le 2ème bouton est un bouton destiné juste à ce qu'on lui clique dessus. Quand on le clique, il va appeler la fonction Truc() qui va renvoyer sous forme de message le NAME et ensuite le TYPE du bouton cobaye BDCBoutonDeTest

<SCRIPT LANGUAGE = "JavaScript">
  function Truc ()
    {
    alert (BDCBoutonDeTest.name) // BDCBoutonDeTest
    alert (BDCBoutonDeTest.type) // button
    }
</SCRIPT>

Récupération par JavaScript de propriétés plus avancées

Mais on peut également attribuer à ces boutons, tout comme à n'importe quel contrôle, des propriétés plus étendues (qui ne sont pas reconnues dans toutes les versions de tous les navigateurs), comme par exemple la propriété accessKey, qui permet de récupérer le focus sur ce bouton en tapant Alt-LaLettrePrévue (Alt-A dans notre exemple). J'ai laissé la propriété NAME sur le bouton, car sinon, je ne sairais pas comment y faire référence dans mon code JavaScript tout simplement.

ATTENTION à la casse : Les minuscules et les majuscules doivent être respectées lors de la récupération des propriétés par JavaScript : accesskey n'est PAS la même propriété que ACCESSKEY dans le cadre de JavaScript !Parce que dans le code HTML, la casse n'est pas importante. Résultat : Qu'AcCeSSKey soit écrit en minuscule ou en majuscule ne change rien dans le code HTML : La propriété sera toujours valide (le raccourci Alt-A fonctionnera dans tous les cas), mais c'est seulement la récupération dans JavaScript qui est délicate. Pour éviter les confusions, on pourrais prendre comme règle d'écrire toutes les balises et paramètres HTML en majuscule par exemple...

<SCRIPT LANGUAGE = "JavaScript">
  function Truc ()
    {
    alert (BDCBoutonDeTest.ACCESSKEY) // a
    alert (BDCBoutonDeTest.accesskey) // undefined : Il FAUT respecter la casse
    }
</SCRIPT>

<HTML>
  <HEAD></HEAD>
  <BODY>
    <INPUT TYPE = "button" NAME = "BDCBoutonDeTest" ACCESSKEY = a>
    <INPUT TYPE = "button" ONCLICK = "JavaScript:Truc()">
  </BODY>
</HTML>

Utilisation de propriétés plus complexes

Certaines propriétés des contrôles sont regroupées sous la même appellation. Une de ces propriétés divisée en sous-groupes est STYLE : Cette propriété regroupe plusieurs sous-propriétés de genre esthétique (ce qui expliquerait le regroupement au sein d'une méta-propriété STYLE) : La longueur du contrôle, sa hauteur, et sa couleur de fond, par exemple, sont 3 propriétés comprises au sein de STYLE. Pour le fun, j'ai ajouté un texte sur le bouton : "Bonjour !"

<INPUT TYPE = "button" NAME = "BDCBoutonDeTest" STYLE="WIDTH: 72px; HEIGHT: 34px; BACKGROUND-COLOR: yellow" value="Bonjour !">

Que nous pourrions écrire de manière plus lisible sans poser de prolème au navigateur :

Pour accéder à ces sous-propriétés de STYLE, on ne peut pas simplement, dans JavaScript écrire alert(BDCBoutonDeTest.STYLE) : Ca ne donnerait pas une erreur, mais il afficherait : "objet". Il faut, et c'est très bien comme ça, accéder à chacune des propriétés de BDCBoutonDeTest par BDCBoutonDeTest.STYLE.HEIGHT par exemple :

<SCRIPT LANGUAGE = "JavaScript">
  function Truc ()
    {
    alert (BDCBoutonDeTest.style.height) // 34px
    alert (BDCBoutonDeTest.style.HEIGHT) // undefined (a cause des majuscules... Bien que dans le code HTML c'est écrit en majuscule. Je sais c'est dur...)
    alert (BDCBoutonDeTest.STYLE.height) // On a carrément une erreur d'exécution cette fois !
    alert (BDCBoutonDeTest.style) // [object]
    alert (BDCBoutonDeTest) // [object] aussi...
    alert (BDCBoutonDeTest.accessKey) // rien (la propriété n'es pas définie)
    alert (BDCBoutonDeTest.ACCESSKEY) // undefined : La propriété n'est pas définie, soit, mais en plus elle est écrite en majuscule
    alert (BDCBoutonDeTest.value) // Bonjour !
    alert (BDCBoutonDeTest.VALUE) // undefined : ah ces majuscules !
    }
</SCRIPT>

</HTML>

Champs cachés

Voci comment insérer un champ invisible :

Une application de ce hidden se trouve ici (PHP)

Utilisation de propriétés inventées de toutes pièces

On peut utiliser des propriétés complètement inventées. Imaginons que notre bouton a un salaire de 3000 francs :

<SCRIPT LANGUAGE = "JavaScript">
  function Truc ()
    {
    alert (BDCBoutonDeTest.SALAIRE) // 3000
    alert (BDCBoutonDeTest.Salaire) // undefined (Toujours à cause des majuscules, mais cette fois c'est plus simple : Comme c'est une propriété qui a été créée de toutes pièces directement dans le INPUT, on doit reprendre la casse telle qu'ele est)
    }
</SCRIPT>