Tp Js Serie2

IUT St DIE MMI-1 / IntegWEB 2014-2015

TP JAVASCRIPT IntegWEB – 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. Fichier Trame : Trame_Q1_Serie2.html 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" 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 déterminer l’état d’une case à cocher ou d’un bouton radio: 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. Fichier Trame : Trame_Q2_Serie2.html 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) Ecrivez ensuite une fonction Affiche_Selection() activée sur l’événement onclick 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).

d) Ajoutez à la page HTML une nouvelle liste et une nouvelle balise <span>. Ecrivez une fonction Affiche_Selection_2() activée sur l’événement onclick 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 :


3) Gestion des boites de liste : ajouter un élément

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 utilisées pour renseigner les attributs de chaque option ajoutée avec le bouton [Ajoute une option]. Ajoutez également les fonctions d'affichage de la sélection de la question précédente dans une balise <span>.

b) Ecrivez une fonction JavaScript Ajoute_Option_Liste (Id, IdTexte,IdValeur) qui sera exécutée lors

d’un clic sur le bouton et qui ajoute dans la liste une option avec les paramètres texte et valeur contenus dans les deux champs de saisie.

Définition des paramètres : Id : correspond à l’identifiant de la liste IdTexte : correspond à l’identifiant du champ de saisie du texte de la nouvelle option IdValeur : correspond à l’identifiant du champ de saisie de la valeur de la nouvelle option Code JavaScript pour ajouter un élément dans la liste : var Liste = document.getElementById(Identifiant_Liste) ; // référence liste var NouvelleOption = new Option ( "Texte_Option" , "Valeur_Option" ) ; // création nouvel objet Liste.options.add( NouvelleOption ); // on ajoute l’objet option au tableau options Ecriture plus compact : Liste.options.add ( new Option ( "Texte option", "Valeur option") ;

c) Ajouter à la page HTML précédente deux boutons permettant l’appel de deux fonctions JavaScript assurant l’effacement du contenu d’une liste et l’effacement d’une option sélectionnée.

Effacement de toute la liste : Efface_Liste(id) Méthodes : affecter la valeur 0 à la propriété length de la liste, exemple Liste.length = 0 ; 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. Fichier Trame : Trame_Q4_Serie2.html 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>.


5) Chargement d’une boite de liste avec un tableau On souhaite initialiser une boite de liste avec le contenu d’un tableau. Fichier Trame : Trame_Q5_Serie2.html Exemple de déclarations et d’initialisations de tableaux : Tableau une dimension : Var T1 = [ "Choix 0" , "Choix 1" , "Choix 2" , "Choix 3" ] Tableau à deux dimensions (littéral) 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 l’exemple ci-dessus nous avons 4 choix.

b) Ecrivez le code HTML correspondant à la mise en page présentée ci-dessous, composée d’une boite de liste et d’un bloc <span> ou <p> pour l’affichage des informations d’une sélection d’une option dans la liste.

c) Ajoutez l’appel de la fonction d’initialisation de la liste sur l’événement onload 0.

d) Ajoutez la fonction d’affichage de la sélection en réutilisant la fonction

Retourne_Info_Selection_Liste(IdListe) de l’exercice 2 mais en retournant un tableau à la place d’une chaine de caractère.


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

On souhaite visualiser des images et les choisir à l’aide d’une boite de liste.

a) A partir du code html de l’exercice précédent, construisez la page html ci-dessous. Conseil : utilisez un tableau (balise <TABLE>) pour gérer facilement la mise en page.

b) Modifiez la fonction d’affichage des informations de sélection afin de mettre à jour l’image affichée à chaque nouvelle sélection. Pour modifier l’image, il suffit de modifier l’attribut src de l’objet image.

Tableau à implanter dans votre code permettant d’initialiser 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:'Mésange charbonniére'}, {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

Tp Js Serie2

Documents

Transcript of Tp Js Serie2