Vous êtes sur la page 1sur 7

TP JAVASCRIPT

IntegWEB Srie N2
CONTROLES CASES A COCHER BOUTONS RADIO
BOITES DE LISTE

1) Lecture de ltat de cases cocher et de boutons radios


Construisez une page HTML avec deux groupes doption, lun avec des cases cocher et lautre avec des
boutons radio. Fichier Trame : Trame_Q1_Serie2.html
Ajoutez une balise <span> ou <p> pour afficher le contenu de la slection. Implantez les gestionnaires
dvnements ncessaires aux appels des fonctions JavaScript assurant laffichage des slections. Sur chaque
action de loprateur, les fonctions seront dclenches.
Exemple de mise en page :

Pour mmoire :
Code HTML :
Les cases cocher
<input type="checkbox" id="C1" value="1" onclick=LectureValeur() >A</input>
<input type="checkbox" id="C2" value=2" onclick=LectureValeur() >B</input>
<input type="checkbox" id="C3" value=3" onclick=LectureValeur() >C</input>
Les boutons radios
<input type=radio" name =choix1" id="R1" value="Gauche" onclick=LectureValeu2r() >A</input>
<input type=radio" name =choix1" id="R2" value=Centre" onclick=LectureValeur2() >B</input>
<input type=radio" name =choix1" id="R3" value=Droite" onclick=LectureValeur2() >C</inputT>
Code JavaScript pour dterminer ltat dune case cocher ou dun bouton radio:
var Case = document.getElementByid("C1");
// rfrence sur la case
if ( Case.checked == true)
// test si case coche
{chaine = " Case C1 : valeur= " + Case.value;} // affichage de la valeur de la case
IUT St DIE

MMI-1 / IntegWEB

2014-2015

2) Gestion des boites de liste : affichage de la slection


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 grer laffichage. Fichier Trame : Trame_Q2_Serie2.html
Un clic sur un lment de la liste dclenche laffichage des informations suivantes : index (le numro de ligne),
les attributs text et value de loption slectionne.

Pour mmoire :
Code HTML dune 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 dune boite de liste droulante (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 lindex de la ligne slectionne :
var liste = document.getElementById( id liste ) ;
var index = Liste.selectedIndex ;
Lecture de lattribut text :
var LeTexte = Liste.options[index].text ;
Lecture de lattribut value :
Var LaValeur = Liste.options[index].value ;

a) Ecrivez une fonction Chaine_Info_Selection_id( Idliste) qui reoit lidentifiant 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) Ecrivez ensuite une fonction Affiche_Selection() active sur lvnement onclick de la liste. Elle assure
lappel de la fonction Chaine_Info_Selection_id() et affiche le rsultat dans la balise <span>.
c) Ecrivez une nouvelle fonction Chaine_Info_Selection_Objet( Objet ) qui reoit maintenant lobjet liste
et retourne la mme chaine que dans la question a).
d) Ajoutez la page HTML une nouvelle liste et une nouvelle balise <span>. Ecrivez une fonction
Affiche_Selection_2() active sur lvnement onclick de la nouvelle liste en lui passant en paramtre la
rfrence de la liste avec linstruction this et lidentifiant de la zone daffichage.

IUT St DIE

MMI-1 / IntegWEB

2014-2015

Exemple de prsentation :

IUT St DIE

MMI-1 / IntegWEB

2014-2015

3) Gestion des boites de liste : ajouter un lment


a) Construisez une page HTML contenant une boite de liste (hauteur = 5), deux champs texte et un bouton.
Fichier Trame : Trame_Q3_Serie2.html
Les informations saisies dans les champs le texte et la valeur seront utilises pour renseigner les
attributs de chaque option ajoute avec le bouton [Ajoute une option]. Ajoutez galement les fonctions
d'affichage de la slection de la question prcdente dans une balise <span>.

b) Ecrivez une fonction JavaScript Ajoute_Option_Liste (Id, IdTexte,IdValeur) qui sera excute lors
dun clic sur le bouton et qui ajoute dans la liste une option avec les paramtres texte et valeur contenus
dans les deux champs de saisie.
Dfinition des paramtres :
Id : correspond lidentifiant de la liste
IdTexte : correspond lidentifiant du champ de saisie du texte de la nouvelle option
IdValeur : correspond lidentifiant du champ de saisie de la valeur de la nouvelle option

Code JavaScript pour ajouter un lment dans la liste :


var Liste = document.getElementById(Identifiant_Liste) ;

// rfrence liste

var NouvelleOption = new Option ( "Texte_Option" , "Valeur_Option" ) ; // cration nouvel objet


Liste.options.add( NouvelleOption );

// on ajoute lobjet option au tableau options

Ecriture plus compact :


Liste.options.add ( new Option ( "Texte option", "Valeur option") ;

c) Ajouter la page HTML prcdente deux boutons permettant lappel de deux fonctions JavaScript
assurant leffacement du contenu dune liste et leffacement dune option slectionne.
Effacement de toute la liste : Efface_Liste(id)
Mthodes : affecter la valeur 0 la proprit length de la liste, exemple Liste.length = 0 ;
Effacement de la slection : Efface_Selection_Liste (id)
Mthode : affecter la valeur null loption supprimer, Liste.options[ Indice ] = null;

IUT St DIE

MMI-1 / IntegWEB

2014-2015

4) Slection dune 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. Fichier Trame : Trame_Q4_Serie2.html
Exemple de mise en page

a) Ecrivez une fonction Initialise_Liste_Numerique( Idliste, Min, Max) qui reoit lidentifiant dune
liste et les valeurs min et max dfinissant les valeurs insrer dans la liste.
b) Construisez une page HTML avec trois listes permettant la slection dune date. Les listes seront
initialises sur lvnement onload de la page laide 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 reoit en paramtre une liste et qui
retourne le contenu de lattribut valeur de la slection.
d) Affectez chaque liste sur lvnement onchange une fonction Affiche_Date() qui assure la mise
jour de laffichage de la date au format JJ/MM/AAAA dans une balise <span> ou <p>.
Cette fonction assure la lecture de la valeur de slection sur les trois listes et construit avec ces
valeurs la date. La chaine obtenue est alors affecte au bloc <span> ou <p>.

IUT St DIE

MMI-1 / IntegWEB

2014-2015

5) Chargement dune boite de liste avec un tableau


On souhaite initialiser une boite de liste avec le contenu dun tableau. Fichier Trame : Trame_Q5_Serie2.html
Exemple de dclarations et dinitialisations de tableaux :
Tableau une dimension :
Var T1 = [ "Choix 0" , "Choix 1" , "Choix 2" , "Choix 3" ]
Tableau deux dimensions (littral)
Var T2 = [ {T :"Texte Choix 0", V :"Valeur Choix 0" } , {T :"Texte Choix 1", V :"Valeur Choix 1" },
{T :"Texte Choix 2", V :"Valeur Choix 2" } , {T :"Texte Choix 3", V :"Valeur Choix 3" } ] ;

a) Ecrivez une fonction Initialise_Liste_Tableau ( IdListe, Tableau ) qui charge la boite de liste avec
les valeurs contenues dans un tableau respectant le format du tableau T2 donn en exemple ci-dessus.
Ce tableau donne les valeurs des attributs text et value de chaque option de la boite de liste.
Dans lexemple ci-dessus nous avons 4 choix.
b) Ecrivez le code HTML correspondant la mise en page prsente ci-dessous, compose dune boite
de liste et dun bloc <span> ou <p> pour laffichage des informations dune slection dune option
dans la liste.
c) Ajoutez lappel de la fonction dinitialisation de la liste sur lvnement onload 0.
d) Ajoutez la fonction daffichage de la slection en rutilisant la fonction
Retourne_Info_Selection_Liste(IdListe) de lexercice 2 mais en retournant un tableau la place
dune chaine de caractre.

IUT St DIE

MMI-1 / IntegWEB

2014-2015

6) Modifier le contenu dune image avec une boite de liste :


On souhaite visualiser des images et les choisir laide dune boite de liste.
a) A partir du code html de lexercice prcdent, construisez la page html ci-dessous.
Conseil : utilisez un tableau (balise <TABLE>) pour grer facilement la mise en page.
b) Modifiez la fonction daffichage des informations de slection afin de mettre jour limage affiche
chaque nouvelle slection. Pour modifier limage, il suffit de modifier lattribut src de lobjet
image.

Tableau implanter dans votre code permettant dinitialiser la boite de liste.


var T = [ {V:'images/bruant-jaune.jpg',T:'Bruant jaune'},
{V:'images/chardonneret.jpg',T:'Chardonneret'},
{V:'images/milan.jpg',T:'Milan'},
{V:'images/etourneau.jpg',T:'Etourneau'},
{V:'images/merle.jpg',T:'Merle'},
{V:'images/mesange-charbonniere.jpg',T:'Msange charbonnire'},
{V:'images/moineau.jpg',T:'Moineau'},
{V:'images/verdier.jpg',T:'Verdier'} ];

Les images correspondantes au tableau sont disponibles sur le blog. Fichier Images.zip
IUT St DIE

MMI-1 / IntegWEB

2014-2015

Vous aimerez peut-être aussi