<< Retour au sommaire

 

 

JavaScript

Ouverture de pages WEB depuis une zone de liste déroulante et une fonction

 

 

 

Le sommaire :

  1. Le projet Star Wars :

1.1  Introduction,

1.2  Le code de l’index,

1.3  Essayez & téléchargez.

  1. Le projet « Jaquettes » :

2.1  Introduction,

2.2  Le code de l’index,

2.3  Essayez & téléchargez.

 

 

Le projet Star Wars

 

Introduction

 

Dans ce chapitre, je vous propose l’élaboration d’une page WEB qui affichera une zone de liste déroulante dans laquelle seront affichés 15 sujets sous la forme d’item.

 

Chaque « sujet » donnera accès à une nouvelle page dans laquelle sera développé le

« sujet » lui-même.

 

Comme la zone déroulante est un composant du formulaire XHTML, un bouton de type « button » permettra de valider le choix de l’utilisateur, et ce, par l’intermédiaire de l’exécution de la fonction « Javascript » intitulée « DemarrerVoyage ».

Cette exécution sera spécifiée depuis l’attribut « OnClick » qui indiquera le nom de la fonction ; Dans cette indication, le formulaire sera passé en paramètre dans le nom de la fonction…

 

La fonction « DemarrerVoyage » recevra donc le formulaire en paramètre…

Ensuite, dans le code de la fonction, la variable intitulée « NumeroDePage » récupèrera le numéro de la page à ouvrir, et ce, grâce aux identifiants des différents items de la zone de liste déroulante spécifiés dans les attributs « value » des balises « option>.

En effet, les noms donnés aux différents items de la zone de liste déroulante correspondront à la position même de litem dans la liste.

 

Pour le premier item, la donnée récupérée sera « 01 », pour le deuxième item, la donnée récupérée sera « 02 » etc., jusqu’à l’item 15 dont la donnée récupérée sera « 15 ».

 

Du coup, toujours dans la fonction, il ne suffira plus qu’à construire le nom du fichier à ouvrir par l’intermédiaire d’un jeu de concaténation !

 

La méthode « location » fera le reste…

 



Le code de l’index

 

L’index est le principal fichier HTML qui contient l’écriture de la zone de liste déroulante.

 

Selon le choix de l’utilisateur, les pages à ouvrir depuis l’index se nomment :

« page01.html », « page02.html », « page03.html » etc jusqu’à « page15.html ».

Puis dans ces 15 fichiers, histoire de réaliser une boucle dans la navigation, un lien permet de revenir à l’index.

 

Voici le code de l’index :

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >

<head>

<title>Star Wars</title>

<!-- Exécuter un son au démarrage de la page -->

<bgsound src="son1.mp3" loop="infinite" />

<script type="text/javascript">

function DemarrerVoyage(formulaire) {

// Déclaration d'une variable qui contiendra le choix dans la zone de liste déroulante

var NumeroDePage;

// Affectation du choix de la zone déroulante dans la variable

NumeroDePage = document.formulaire.page.value;

// Déclaration de la variable qui contiendra le nom du fichier HTML à ouvrir

var fichier;

// Construction du nom du fichier HTML à ouvrir

// par la concaténation de la chaîne "page" au numéro de page contenu dans la variable NumeroDePage

// et ensuite, à la chaîne ".html"

fichier = "page"+NumeroDePage+".html";

// Ouverture de la page demandée

window.location=fichier; }

</script>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

</head>

<body>

<table border="2">

<caption>

Dark Vador vous invite à une visite de l'univers !

</caption>

<tr><th colspan="2"><font color="green">

Mode d'emploi :<br />

Dans la zone de liste déroulante se trouvant dans la lligne suivante du tableau, veuillez choisir un sujet, puis, validez le bouton "Visiter".

</font></th></tr>

<tr><td>

<form name="formulaire">

<label for="page">

Les sujets :<br />

</label>

<select name="page" id="page">

<option value="01">l'étoile</option>

<option value="02">l'astéroïde</option>

<option value="03">la planète</option>

<option value="04">la météorite</option>

<option value="05">les satellites artificiels</option>

<option value="06">le pulsar</option>

<option value="07">le quasar</option>

<option value="08">le trou noir</option>

<option value="09">la comète</option>

<option value="10">la galaxie</option>

<option value="11">le vent solaire</option>

<option value="12">l'exploration humaine</option>

<option value="13">la voie lactée</option>

<option value="14">la nébuleuse d'Andromède</option>

<option value="15">la vie extraterrestre</option>

</select></td><td>

<input type="button" value="Visitez" OnClick="DemarrerVoyage('formulaire')" />

</tr></td>

</table></form>

</body>

</html>

 

 


Essayez & téléchargez

 

Pour essayer le travail  ?

C’est ici :

 

Afficher l'exemple Start Wars>>

 

Pour télécharger le travail ?

C’est ici :

 

Start Wars, téléchargez l'exemple >>

 

 


Le projet de « Jaquettes »

 

Introduction

 

Bon, après l’élaboration d’une page qui utilise la propriété « value » pour construire le nom du fichier HTML à ouvrir, on se demande si l’on ne pourrait pas faire mieux ! Enfin, plus direct…

 

En effet, dans les balises « <option> », puisque l’on choisit des identifiants qui nous permettent en partie de déterminer le nom du fichier HTML hyper lié, pourquoi ne pas choisir maintenant des identifiants qui soient carrément les chemins et les noms des fichiers dans l’intégralité ?

 

Dans ce cas de figure, il suffirait à la fonction « javascript » d’ouvrir le fichier, en plaçant directement la propriété du « value » en tant que paramètre à la méthode « location »…

 

Ainsi, pas de traitement à réaliser sur la donnée retournée par le formulaire !

 

La fonction que l’on va intitulée « go » n’aura pas grand-chose à faire !

 

1.                 Elle récupère le formulaire en tant que paramètre.

2.                 Elle affecte la donnée de la propriété « value » dans la variable « fichier ».

3.                 Elle exécute l’ouverture de la page désirée en expédiant, en tant que paramètre, la variable « fichier » à la méthode « location ».

 

Le tour est joué…

 

 


Le code de l’index

 

Dans ce fichier principal, la zone de liste déroulante affiche 5 items, ce sont des noms de films.

L’utilisateur doit donc choisir l’un des 5 films et valider le bouton « Afficher la jaquette ».

Aussitôt, la page correspondante est affichée !

Les 5 pages qui affichent les jaquettes sont toutes dans le dossier « HTML ».

 

Du coup, les identifiants choisis pour les propriétés « value » contiennent directement le chemin et les noms des fichiers à ouvrir…

 

Voici le code :

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >

<head>

<title>

Quelques jaquettes

</title>

<bgsound src="sons/son1.mp3" loop="infinite" />

<script type="text/javascript">

function go(formulaire) {

var page;

page = document.formulaire.film.value;

window.location=page; }

</script>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

</head>

<body>

<table border="2">

<caption>

Affichage de jaquettes de films

</caption>

<form name="formulaire">

<tr><td>

<label for="film">

Veuillez choisir un film puis valider le bouton "Afficher la jaquette"

<br />

</label>

<select name="film" id="film">

<option value="HTML/Billy_ELLIOT.html">

Billy ELLIOT

</option>

<option value="HTML/Empire_du_Soleil.html">

Empire du Soleil

</option>

<option value="HTML/FLASH_GORDON.html">

FLASH GORDON

</option>

<option value="HTML/GALACTICA_la_bataille_de_l_espace.html">

GALACTICA la bataille de l'espace

</option>

<option value="HTML/Tintin.html">

Tintin

</option>

</select>

</td><td>

<input type="button" value="Afficher la jaquette" OnClick="go('formulaire')" />

</td></tr>

<tr><th colspan="2">

<a href="../../JavaScript/20_javascript_Ouverture-Pages.htm">

Revenir au manuel

</a></th></tr>

</form></table>

</body>

</html>

 


Essayez & téléchargez

 

Pour essayez l’exercice en ligne ?

C’est ici :

 

Afficher l'exemple "jaquettes" >>

 

Pour télécharger le tout dans un dossier unique ?

C’est ici :

 

"Les jaquettes", téléchargez l'exemple >>

 

Philippe BOULANGER