Valeur de cette activité : 5 points
Compétence :
20- Javascript - Les boîtes à liste déroulante

A-Module 04 : JAVASCRIPT : 5 points - difficulté : 2

Javascript - Les boîtes à liste déroulante

Présentation

Dans cette activité, nous allons étudier l'utilisation du code javascript afin de manipuler les informations inscrites dans les boîtes à liste déroulante d'un formulaire.

Description

Dans cette activité, vous allez produire un formulaire contenant une boîte à liste déroulante.
Cette boîte contiendra 3 URLs et lors de la sélection d'un URL, une nouvelle fenêtre s'ouvrira en affichant le site sélectionné.
  1. Ajoutez une page à votre portfolio en affichant l'assistant HTML et les assitants FORMULAIRE et JAVASCRIPT ainsi que la directive 15473
  2. Inscrivez dans le champ titre : Javascript - Les boîtes à liste déroulante
  3. Sélectionnez la matière : informatique
  4. Inscrivez dans le champ No de la directive : 15473
  5. Inscrivez dans votre page le titre de niveau 1 : Javascript - Les boîtes à liste déroulante
  6. Insérez à la suite un formulaire (bouton formulaire) nommé f.
  7. Insérez dans ce formulaire un champ de type Boîte à liste déroulante nommé "lien" (bouton Boîte à liste déroulante).
  8. Ajoutez une troisième et une quatrième option au champ lien.
    Vous devriez obtenir le code ci-dessous:<select name="lien"> <option></option> <option></option> <option></option> <option></option> </select>
  9. Ajoutez à vos balises option un paramètre value. <option value=""></option>


  10. Insérer la valeur x dans votre première option contenant le texte "Sélectionnez un lien"
    <option value="x">Sélectionnez un lien</option>
  11. Trouvez et placez temporairement au bas de votre page 3 URL reliés à votre option (sciences, arts ou sports)
  12. Placez dans le paramètre value de chacune des balises option vos URLs.
  13. Placez un titre pour chacun de vos liens avant la balise :Exemple
    <option value="http://pierremorissette.ca">Le site de Pierre</option>
  14. Ajoutez maintenant à votre champ lien un évènement onchange qui lancera la fonction "xlien()"
    <select name="lien" onchange=xlien()>
  15. Ajoutez au début de votre page le code qui identifie la langage javascript (Bouton javascript)
  16. Dans ce code. insérez une fonction nommé xlien() (Bouton fonction)
  17. Dans cette fonction, créez une variable nommée lelien qui contiendra la valeur de l'option sélectionnée dans la boîte à liste déroulante
    var lelien = document.f.lien.options[document.f.lien.selectedIndex].value
  18. Ajoutez ensuite le code de la structure conditionnelle (Bouton SI)
  19. Insérez le code qui vérifiera si la variable lelien contient la valeur x. (lelien =='x')

    Consulte au besoin l'activité 1644 afin de consulter les notes concernant l'utilisation de la structure conditionnelle javascript (si).
  20. Dans ce cas, ne rien faire.
  21. Sinon, insérez le code qui ouvrira une nouvelle fenêtre : window.open() afin d'afficher dans cette fenêtre le site sélectionné.
    window.open(document.f.lien.options[document.f.lien.selectedIndex].value,'','')
  22. Ajoutez à la suite de cette ligne le code qui sélectionnera la valeur 0 de votre champ lien.
    document.f.lien[0].selected=true;
  23. Visualisez votre page et apportez des modifications au besoin.