|
|
Mystick Javascript |
|
|
Champs de saisie Le langage HTML permet de créer des formulaires pour recueillir de l'information de la part des usagers. JavaScript lui, permet de modifier les formulaires pour les faire réagir à certaines situations. Les champs de saisie en HTML sont créés avec la balise <input type="text">, cette balise peut aussi comprendre les attributs name, size et value. Pour référer en JavaScript à un champ de saisie, il faut indiquer le nom du formulaire puis le nom du champ. En faisant par exemple : document.Formulaire1.Champ1.value on obtiendrait la valeur du champ nommé Champ1 dans le formulaire nommé Formulaire1. Exemple :
On peut faire référence à ce champ de saisie de deux
manières :
On n'est pas obligé de mettre une valeur pour le champ dans le input, si on l'omet, le champ sera vide. La méthode select() permet de faire sélectionner automatiquement le contenu du champ. La différence entre value et defaultValue réside dans le fait que value peut être modifié par l'usager. Mais defaultValue est toujours gardé en mémoire et pourrait être réutilisé par exemple pour faire un bouton pour réinitialiser le formulaire. Champs de saisie de type mot de passe Le champ de saisie de type mot de passe ou password est identique à un champ normal sauf que les caractères tapés apparaissent à l'écran tous sous forme d'astérisques (*). Cette protection est souvent utilisée pour éviter que des gens aperçoivent le mot de passe d'une autre personne simplement en jetant un coup d'oeil sur son écran alors qu'il l'entre. Pour ce faire, dans la balise input mettre le type à password. Exemple :
Attention! Il ne faut pas faire afficher à l'écran par la suite la valeur de ce champ de mot de passe car lorsqu'on l'afficher ailleurs que dans sa boîte, il apparaît clairement et non sous forme d'astérisques. Habituellement, lorsqu'un mot de passe est entré, le traitement vers le serveur se fait automatiquement sans avoir à l'afficher nulle part. Les éléments cachés sont semblables à des commentaires qui prennent des valeurs. Ce sont des éléments qui ne sont pas affichés dans un formulaire. Pour ce faire, il suffit de mettre la balise input au typehidden. Ces éléments cachés sont utilisables pour passer des valeurs au script qui traite le formulaire. Cependant, il faut garder en mémoire qu'ils peuvent être vus par n'importe quel usager qui demande à voir le code source de la page. Les zones de texte peuvent être considérés comme des champs de saisie multi lignes. Elles sont créées avec la balise <textarea>. Vous pouvez déclarer la taille d'une zone de texte grâce à des attributs rows (lignes) et cols (colonnes). Cols définit la largeur en nombre de caractères. Exemple :
Lorsqu'on écrit dans une zone de texte ou dans un <pre> tag, il faut utiliser le \n pour faire un saut de ligne. On peut utiliser les propriétés des zones grâce aux méthodes.. comme par exemple, écrire une question dans une zone de texte puis faire apparaître sa réponse lorsqu'elle a le focus. Les listes de sélection sont très utiles afin de permettre un choix restreint de réponses à un visiteur. La liste se crée à partir de la balise <select> et chaque élément qui la compose est précédé de la balise <option>. À l'intérieur de la balise <select>, l'élément size permet de choisir l'apparence de la liste, chaque nombre indique le nombre de choix visible sans avoir à naviguer dans la liste. L'évènement onchange détecte un changement de sélection de la part de l'utilisateur. onchange peut aussi être utilisé afin de détecter tout changement dans le texte des balises <input/> et <textarea>. Utile pour vérifier si tous les champs obligatoires d'un formulaire ont été remplis. Exemple :
Il peut être étrange de voir que pour une liste, bien sûr la form possède un nom, mais rien ne différencit les options de la liste. C'est qu'il faut savoir que JavaScript vous permet d'utiliser et règler les options puisqu'elles sont mises dans un vecteur nommé options[]. Alors si on désire changer un choix dans la liste, supposons le deuxième, on peut le faire en modifiant son texte directement dans le vecteur. Exemple :
En plus de la propriété des options, select a une propriété nommée selectedIndex . Quand une option dans un select a été choisie, selectedIndex contient son indice dans le vecteur. Si aucun choix n'a été fait, selectedIndex contient l'indice -1, ceci est pratique pour vérifier dans un formulaire si tous les champs ont été complétés. Exemple :
Il est possible, vous l'aurez deviner, d'utiliser
cette méthode pour mettre un choix par défaut et ainsi le sélectionner.
Il suffirait de faire quelque chose comme : window.document.materiaux.liste.selectedIndex=
0; La propriété selectedIndex identifie l'élément d'une liste actuellement sélectionné, la propriété selected est une valeur booléenne qui indique si l'élément demandé est sélectionné et la propriété defaultSelected retourne l'index de l'élément de liste sélectionné par défaut. Les listes de sélection peuvent être réglées de manière à accepter les sélections multiples (sélection de plusieurs éléments). Pour ce faire, il ne faut qu'ajouter l'attribut multiple dans la balise <select>. Le reste de la syntaxe de la liste ne diffère pas d'une liste ordinaire. Dans le cas d'une liste à sélection multiples, la propriété selectedIndex retourne le plus petit index de la sélection. Il ne faut pas oublier que les index sont en fait un vecteur, ce qui signifie que le premier élément de la liste a un index de 0. La propriété selectedIndex est pratique lorsqu'on a qu'une liste. Mais lorsqu'une dépend d'une autre, c'est plus compliqué. Comme nous l'avons vu, les listes de sélection possède comme tous les autres éléments, un handler onchange. Il est appelé chaque fois qu'il y a un changement dans la sélection. Réaliser une liste qui change selon le choix de la première requière l'écriture d'un mini-programme en JavaScript. On va tenter l'expérience ici pour réviser les notions précédentes et comprendre les listes de sélections. L'exemple et les explications qui l'accompagnent se trouvent sur cette page . Les cases à cocher sont de petits carrés qu'il est possible de cocher ou de désactiver (décochée). Habituellement, on s'en sert pour demander à la personne si elle est en accord ou non avec une déclaration. Si la personne approuve, elle coche la case. Pour créer une case à cocher, on se sert de la balise <input/> où on inscrit checkbox comme attribut type. Les propriétés de l'objet checkbox sont checked, defaultChecked, enabled , form, name, type et value. checked est une valeur booléenne qui vaut true lorsque la case est cochée. Les méthodes sont click() et focus(). Exemple : On peut vérifier si la case est cochée,
ou la cocher par défaut, en faisant : window.document.nomCase.nomContenu.checked
, puis un test avec true ou false. Les boutons radio ne sont utilisés qu'en groupe où un seul choix est effectué. Tous les boutons d'un même groupe partagent le même nom. Ils sont indexés selon leur ordre d'apparition dans le groupe. Comme tous les index (vecteur), le premier élément porte l'index 0. Ses propriétés sont celles de la balise <input/>, soit checked, defaultChecked , enabled, form, name, value et length qui donne le nombre de boutons du groupe. En plus, il y a les méthodes click() et focus(). Les boutons radio ressemblent beaucoup aux cases à cocher, à l'exception cependant que les boutons radio sont sélectionnés tant et aussi longtemps qu'un autre n'est pas choisi. Pour désélectionner un bouton radio on doit obligatoirement en choisir un autre. Exemple :
Il est important de donner le même noms aux éléments d'un même ensemble, ici le nom donné était GroupeFleurs. Puis la ligne de code du premier bouton se termine par checked pour qu'il soit coché par défaut au départ. Le value est la variable associée au choix. Dans le cas d'un formulaire, on ferait un test pour savoir lequel est coché puis on enverrait la valeur de celui-là. Les balises <br> permettent de sauter une ligne entre les choix. eval est intéressant, essentiel mais un peu compliqué à saisir. Il est utilisé dans tous les scripts d'une complexité singulière et c'est pourquoi il est essentiel pour vous de le comprendre pour être capable d'écrire des scripts de plus haut niveau. eval prend une string et l'évalue.
On se sert de eval pour convertir les variables. Exemple :
eval évalue l'utilisation que vous voulez faire de la variable et comprend que ce nom correspond à un vecteur, et que le contenu de la variable nomVecteur sera une copie du vecteur. Il n'y aurait pas d'autre moyen de se servir d'une string venant par exemple d'un choix entré par l'usager et ainsi appeler le vecteur de cette string. eval peut calculer une expression arithmétique mise dans une string. Si vous demandez à un usager d'entrer la valeur d'une variable nommée "x", puis que vous l'ajoutez à un calcul mis en string : "2 + x * 5"... eval pourra donner le resultat de l'expression. Si le paramètre donné n'est pas une string, eval retourne l'élément inchangé. Il est parfois difficile de référer à un élément dans un document JavaScript; mais l'avoir nommé aide beaucoup. Cependant on ne peut habituellement pas se servir de son nom pour lui accéder, mais cela devient possible avec eval . Ainsi, si on demande le nom de l'image qu'on veut modifier à l'usager et mets se nom dans une string... on peut faire : Exemple :
Comme vous l'aurez deviné, ceci signifie
qu'on peut aussi utiliser les noms d'images comme indice dans le vecteur d'images
du document. Donc le code plus haut, écris pour pouvoir être réutilisé quand l'image demandée en string peut varier, peut être réduit à :
Vous pouvez utiliser ce truc pour référer
à toutes sortes d'objets, comme les boutons, boîtes de textes,
etc. Si vous vous rappeler des manières vu antécédemment
il existe 4 façons d'avoir accès à une valeur d'un objet
et de la modifier. Il n'y a pas de meilleure méthode, il s'agit pour vous de savoir avec laquelle vous êtes le plus à l'aise. Tout élément dans une page Web peut être désactivé si son attribut disabled existe. Un élément désactivé est supprimé de l'ordre de tabulation qui contrôle le focus. Un élément désactivé est affiché en estompé. La propriété disabled retourne une valeur booléenne, si l'élément est désactivé (true) ou activé (false). disabled est disponible pour les éléments : combo, password, button, reset, radio , checkbox, submit, select, text et texaera . Exemple :
Réinitialisation et envoi d'un formulaire L'objet form possède des propriété
et des méthodes qui permettent de réinitialiser et envoyer
les données d'un formulaire vers un serveur.
Les méthodes :
Exemple :
Il est possible, grâce à JavaScript, d'effectuer une validation des données entrées dans un formulaire avant de les envoyer au serveur. Cette action fait en sorte de détecter des erreurs et de permettre à l'usager de les corriger avant de les transmettre. Utiliser JavaScript pour valider l'information épargne de devoir faire plusieurs échanges avec le serveur comme il le faudrait avec l'utilisation de scripts CGI sur serveur. Une bonne manière de valider l'information
est de faire des fonctions de validation qui sont appelées via la
propriété onchange ou via un bouton. Afficher un message
descriptif et clair à l'utilisateur sur ce qu'il doit entrer puis
attribuer le focus sur l'élément fautif.
| |