tp javascript - Sesamebox.fr

TP JAVASCRIPT
Série N°2
CONTROLES :
- CASES A COCHER
- BOUTONS RADIO
- BOITES DE LISTE
1) Lecture de l’état de cases à cocher et de boutons radios
Construisez une page HTML avec deux groupes d’option, l’un avec des cases à cocher et l’autre avec des
boutons radio.
Ajoutez une balise <span> ou <p> pour afficher le contenu de la sélection. Implantez les gestionnaires
d’événements nécessaires aux appels des fonctions JavaScript assurant l’affichage des sélections. Sur chaque
action de l’opérateur, les fonctions seront déclenchées.
Exemple de mise en page :
Pour mémoire :
Code HTML :
Les cases à cocher
<input type="checkbox" id="C1" value="1" />A
<input type="checkbox" id="C2" value=“2" />B
<input type="checkbox" id="C3" value=“3" />C
Les boutons radios
<input type=“radio" name =“choix1" id="R1" value="Gauche"/>A
<input type=“radio" name =“choix1" id="R2" value=“Centre"/ >B
<input type=“radio" name =“choix1" id="R3" value=“Droite" />C
Code JavaScript pour déterminer l’état d’une case à cocher ou d’un bouton radio:
IUT St DIE
ProgOE
2016/2017
1
var Case = document.getElementByid("C1");
// référence sur la case
if ( Case.checked == true)
// test si case cochée
{chaine = " Case C1 : valeur= " + Case.value;} // affichage de la valeur de la case
2) Gestion des boites de liste : affichage de la sélection
Construisez une page HTML contenant une boite de liste de 5 lignes affichant les valeurs : un, deux, trois, quatre,
cinq. Ajouter une balise <span> pour gérer l’affichage.
Un clic sur un élément de la liste déclenche l’affichage des informations suivantes : index (le numéro de ligne),
les attributs text et value de l’option sélectionnée.
Pour mémoire :
Code HTML d’une boite de liste avec 5 lignes visibles avec trois valeurs dans la liste :
<select size = "5" id="liste1">
<option value="Choix 1" >Texte choix 1</ option >
< option value="Choix 2" >Texte choix 2</ option >
< option value="Choix 3" >Texte choix 3</ option >
</select>
Code HTML d’une boite de liste déroulante (1 seule ligne):
< select size = "1" id="liste1">
< option value="Choix 1" >Texte choix 1</ option >
< option value="Choix 2" >Texte choix 2</ option >
< option value="Choix 3" >Texte choix 3</ option >
</ select >
Lecture de l’index de la ligne sélectionnée :
var liste = document.getElementById( id liste ) ;
var index = Liste.selectedIndex ;
Lecture de l’attribut text :
var LeTexte = Liste.options[index].text ;
Lecture de l’attribut value :
Var LaValeur = Liste.options[index].value ;
a) Ecrivez une fonction Chaine_Info_Selection_id( Idliste) qui reçoit l’identifiant de la liste et retourne
une chaine contenant les informations : index, text, value.
Exemple de format de la chaine : [ Index = 2, Texte = le texte, Valeur = 5].
b) Déclarez ensuite une variable Affiche_Selection pointant sur une fonction anonyme et associé à
l’événement click de la liste. Elle assure l’appel de la fonction Chaine_Info_Selection_id() et affiche le
résultat dans la balise <span>.
c) Ecrivez une nouvelle fonction Chaine_Info_Selection_Objet( Objet ) qui reçoit maintenant l’objet liste
et retourne la même chaine que dans la question a).
IUT St DIE
ProgOE
2016/2017
2
d) Ajoutez à la page HTML une nouvelle liste et une nouvelle balise <span>. Déclarez une variable
Affiche_Selection_Objet pointant sur une fonction activée sur l’événement click de la nouvelle liste en
lui passant en paramètre la référence de la liste avec l’instruction this et l’identifiant de la zone
d’affichage.
Exemple de présentation :
IUT St DIE
ProgOE
2016/2017
3
3) Gestioon des boiites de listte : ajouteer un élém
ment
a) Construuisez une pagge HTML coontenant unee boite de lisste (hauteur = 5), deux cchamps texte et un boutton.
Utiliser le code de l'exercice
l
2 en
e supprimaant la second
de liste maiss en conservaant tous le code
c
qui assuure
l'affichaage de la seleection..
Les infoormations saaisies dans les
l champs « le texte » et
e « la valeurr » seront uttilisées pourr renseigner les
attributss de chaque option ajouttée avec le bouton
b
[Ajou
ute une optioon].
b) Ecrivez une fonctioon JavaScrippt Ajoute_O
Option_Listte (Id, IdTeexte, IdValleur) qui seera exécutée lors
d’un cliic sur le bouuton et qui ajoute
a
dans la
l liste une option
o
avec les paramèttres texte et valeur conttenus
dans less deux cham
mps de saisie..
Défi
finition des paramètres
p
:
Id : corrrespond à l’iidentifiant de
d la liste
IdTextee : corresponnd à l’identiffiant du cham
mp de saisiee du texte dee la nouvellee option
IdValeu
ur : correspoond à l’identtifiant du chhamp de saissie de la valeeur de la nouuvelle option
n
c) Ajoutezz également une balise <span> ouu <p> pour l’affichage des inform
mations lors d’une sélecction
d’une opption dans laa liste. Utilisez les foncttions de la question
q
préccédente.
Codde JavaScrip
ipt pour ajoouter un éléément dans la liste :
var Liste = doccument.getE
ElementByIdd(Identifiannt_Liste) ;
// réféérence liste
var NouvelleOpption = new
w Option ( "Texte_Opption" , "Valleur_Optionn" ) ; // créaation nouvel objet
Listte.options.addd( NouvelleOption );
//
/ on ajoute l’objet optioon au tableaau options
Ecrriture plus compact
c
:
Listte.options.addd ( new Opption ( "Texxte option", "Valeur op
ption")) ;
d) Ajouterr à la page HTML
H
précéédente deuxx boutons peermettant l’’appel de deeux fonction
ns JavaScrippt
assurannt l’effacemeent du conteenu d’une liiste et l’effaacement d’uune option ssélectionnéee.
Effaacement de toute la listte : Efface__Liste(id)
Métthodes : affeecter la valeeur 0 à la prropriété lenggth de la liste, exemplee Liste.lengtth = 0 ;
IUT St DIE
ProggOE
2016/2
2017
4
Effacement de la sélection : Efface_Selection_Liste (id)
Méthode : affecter la valeur null à l’option à supprimer, Liste.options[ Indice ] = null;
4) Sélection d’une date avec des boites de liste
On souhaite saisir une date en utilisant 3 boites de liste qui facilitent la saisie de la date et limitent les erreurs
de saisie.
Exemple de mise en page
a) Ecrivez une fonction Initialise_Liste_Numerique( Idliste, Min, Max) qui reçoit l’identifiant d’une
liste et les valeurs min et max définissant les valeurs à insérer dans la liste.
b) Construisez une page HTML avec trois listes permettant la sélection d’une date. Les listes seront
initialisées sur l’événement onload de la page à l’aide de la fonction Initialise_Liste_Numerique(
IdListe, Min, Max).
Soit : Initialise_Liste_Numerique( "ListeJour", 1, 31) ;
Initialise_Liste_Numerique( "ListeMois", 1, 12) ;
Initialise_Liste_Numerique( "ListeAnnee", 1950, 2013) ;
c) Ecrivez ensuite une fonction Valeur_Selection( IdListe ) qui reçoit en paramètre une liste et qui
retourne le contenu de l’attribut valeur de la sélection.
d) Affectez à chaque liste sur l’événement onchange une fonction Affiche_Date() qui assure la mise à
jour de l’affichage de la date au format JJ/MM/AAAA dans une balise <span> ou <p>.
Cette fonction assure la lecture de la valeur de sélection sur les trois listes et construit avec ces
valeurs la date. La chaine obtenue est alors affectée au bloc <span> ou <p>.
IUT St DIE
ProgOE
2016/2017
5