Partie Facultative
Informatique et Sciences du Numérique 2012
Partie Facultative - ANNEXE
Liste déroulante:
Taper le texte ci-dessous avec le Bloc-Notes et visualiser la page dans l'Internet Explorer
<HTML>
<HEAD>
<TITLE>- Liste deroulante -</TITLE>
<HEAD>
<BODY bgcolor=''white''>
<B>Liste des verbes.</B>
<BR>
<form name="liste">
<select name="verbes" size=1>
<option value="chanter">chanter
<option value="parler">parler
<option value = "manger">manger
<option value="nager">nager
</select>
<input type=button value="Valider"
onClick= "alert(window.document.liste.verbes.options[window.document.liste.verbes.selectedIndex].value)">
</form>
</BODY>
</HTML>
Remarques:
Ce texte ne contient, à proprement parler, pas de Javascript mais uniquement du langage HTML.
La partie en italique permet de "créer" l'objet "liste déroulante" avec un bouton de validation.
Dans la partie en gras, alert( ) permet l'ouverture d'une boîte de dialogue permettant d'afficher l'élément de la liste
déroulante qui a été sélectionnée.
Cet élément est désigné ainsi:
window.document.liste.verbes.options[0].value représente le premier élément des options de la liste soit "chanter".
Noter les crochets- identiques à ceux qui- permettent d'accéder à un élément d'un tableau en Python.
Le premier élément du tableau porte le numéro 0 ( index ).
Que représente: window.document.liste.verbes.options[2].value?
Comment accéder à "nager"?
window.document.liste.verbes.selectedIndex est l'index de l'option sélectionnée, c'est à dire celle qui apparaît dans la
fenêtre après choix d'une option.
Quelle est la valeur de window.document.liste.verbes.selectedIndex lorsque la sélection porte sur
"manger"? sur "chanter"?
Zone de texte:
Taper le texte ci-dessous avec le Bloc-Notes et visualiser la page dans l'Internet Explorer
Informatique et Sciences du Numérique 2012
<HTML>
<HEAD>
<TITLE>- Liste deroulante et zone texte -</TITLE>
<script language="javascript">
<!--
function affiche()
{
window.document.fenetre.sortie.value=window.document.liste.verbes.options[window.document.liste.verbes.selectedIndex].value
}
//-->
</script>
</HEAD>
<BODY bgcolor="white">
<table>
<td width=150 bgcolor=tan valign=top>
<B>Liste des verbes</B>
<BR>
<form name="liste">
<select name="verbes" size=1>
<option value="chanter">chanter
<option value=''parler''>parler
<option value="manger">manger
<option value="nager">nager
</select>
<input type=button value="Valider" onClick="affiche()">
</form>
</td>
<td width=150 bgcolor=darkseagreen >
<form name="fenetre">
<textarea name="sortie" rows=7 cols=15></textarea>
</form>
</td>
</table>
</BODY>
</HTML>
Remarques:
Le tableau <table></table> sert seulement à la mise en page et permet de juxtaposer liste déroulante et fenêtre
de sortie.
La partie en italique permet de "créer" ( ou instancier) la zone de texte de 7 lignes et 15 colonnes.
L'appel à alert() a disparu. C'est la méthode affiche( ) qui le remplace et permet d'afficher l'élément sélectionné
dans la fenêtre de sortie.
instancier, méthode sont des mots du vocabulaire des langages objet.
Informatique et Sciences du Numérique 2012
Application Conjugaison au futur :
<HTML>
<HEAD>
<TITLE>- Futur -</TITLE>
<script language="javascript">
<!--
function futur()
{
verbe=window.document.liste.verbes.options[window.document.liste.verbes.selectedIndex].value //verbe est une variable
window.document.fenetre.sortie.value="je "+verbe+"ai"+ "\n" +
"tu "+verbe+"as"+"\n"+
"il "+verbe+"a"+"\n" +
"nous "+verbe+"ons"+"\n"+
"vous "+verbe+"ez"+"\n"+
"ils "+verbe+"ont"
}
//-->
</script>
</HEAD>
<BODY bgcolor="white">
<table>
<td width=150 bgcolor=tan valign=top>
<B>Liste des verbes</B>
<BR>
<form name="liste">
<select name="verbes" size=1>
<option value="chanter">chanter
<option value="parler">parler
<option value="manger">manger
<option value="nager">nager
</select>
<input type=button value="Valider" onClick="futur()">
</form>
</td>
<td width=150 bgcolor=darkseagreen >
<form name="fenetre">
<textarea name="sortie" rows=7 cols=15></textarea>
</form>
</td>
</BODY>
</HTML>
Remarques: .
Les modifications sont en gras.
// permettent de placer un commentaire (à la suite, la fin de la ligne est ignorée) C'est l'équivalent en Python de #.
"\n" permet de passer à la ligne suivante dans la fenêtre de sortie.
1
/
3
100%
