Liste d'options (SELECT)

Plutôt que onClick, on lui préfère l'événement onChange (ou onFocus ou onBlur). Ici on a mis en place une suite de liens conduisant aux diverses pages du présent document. Lorsqu'activé le lien conduit à la page demandée.

Le code HTML présente ici les diverses pages disponibles dans le document. Remarquez l'absence de titre au premier élément (l'élément 0 ) pour faire en sorte que l'action onChange puisse aussi atteindre la première page située en position 1. En effet l'action onChange n'est déclenchée que lorsqu'il y a changement de valeur dans le composant. Re-sélectionner un même élément ne provoque aucune action.

La fonction getLink utilise le numéro de position de l'élément de la liste, (et non le mot lui-même) qu'il associe ensuite à un des éléments du tableau associatif (ARRAY) des noms de fichiers. Ce nom est assigné ensuite à la variable lnkName (nom_du_lien), puis la fonction document.location = lnkName créé le lien activ qui affiche dans l'explorateur la page demandée.

Pour les curieux, et les esprits observateurs, L'enchaînement de ces noms dans une chaîne de caractère (STRING) suivi de l'utilisation de la méthode split ici réalise une économie de guillemets au moment de l'entrée de éléments dans le tableau.

De plus, le tableau associatif des noms de fichiers ayant été déclaré en dehors de la fonction, devient une variable globale, disponible à toute autre fonction pouvant en avoir besoin.

Le petit exemple suivant illustre la saisie du texte de l'élément sélectionné:

un deux trois quatre

Il est possible de récupérer le mot affiché dans la boite lors d'une sélection en utilisant l'instruction n.options[n.selectedIndex].text. C'est ce que fait l'exemple ci-contre, qu'illustre la fonction à la suite.

intermède musical

Le prochain exemple met en scène diverses opérations dont celle de meubler programmatiquement une liste d'éléments dans le composant. Le choix de la clé dans le sélecteur affiche le nombre d'altérations à la clé. Il est possible de passer en mode mineur en activant la case à cocher correspondante. Techniquement, c'est un jeu de 12 images qui permet l'affichage des variations.

mineur

Dans un premier tem ps voyons l'organisation du code HTML utilisé.

L'étude de ce bout de code révèle

1. l'utilisation du composant image ( encadré vert ) qui sert de récipient pour l'affichage des 12 états différents de la portée (voir ces images)
2. le script chargé d'appeler la fonction de création de la liste des 12 tonalités SetMusOptions. (voir ce script) Dans l'ensemble, cette fonction ne fait que reprendre des procédés utilisés précédemment. Mais l'application en est nouvelle puisqu'elle permet de ne pas écrire les éléments de liste directement dans la page HTML mais plutôt de le faire programmatiquement par la fonction document.write() placée directement entre deux balises script dans l'élément SELECT.
3. finalement, la case à cocher avec son appel de fonction responsable du changement de mode (majeur ou mineur). Puisque seul le nom de la tonalité change (ce sont des relatives qui partagent donc la même armature) la fonction ajoute ou retire une tierce (un écart de 3) à l'index sélectionné dans la liste et le sélectionne (voir cette fonction)

Il nous reste à afficher la fonction déclenchée par la liste à options: getKey. Selon le mode majeur ou mineur demandé, la fonction établira le tableau associatif des images à afficher selon l'une des deux listes.