Js tp4

TP n°4 – Menus en javascript – version 2
Avertissements : Certaines fonctionnalités ne sont pas compatibles avec la version 1.0 de Safari.
Retour à menu1 : les styles sans javascript
Lors du dernier TP, nous avons utilisé des fonctions javascript pour modifier les styles de certaines balises (a, li, ul).
Une autre possibilité (offrant une meilleure compatibilité) est d’inclure ces modifications directement dans le html au
moyen de la balise style, comme nous allons le voir maintenant.
a) Charger menu1.htm dans Dreamweaver et sauvegarder sous menu1_2.htm.

b) Supprimer complètement la fonction change_style et modifier la fonction debut :
function debut()
{
cachemenu();
position("menu1","0px","0px");
position("menu2","100px","0px");
}
On a en fait supprimé l’appel de la fonction change_style.

c) Ajouter la balise style dans l’en-tête (entre les balises <head> </head>):
<style type="text/css">

</style>
Notez que l’on indique le type (ici text/css), comme pour la balise script. Notez également les marques de
commentaires pour éviter les affichages intempestifs dans les navigateurs n’interprétant pas les styles.
d) l’insertion des styles s’effectue en indiquant d’abord l’élément dont on veut modifier l’aspect, puis, entre accolades,
l’attribut à modifier suivi de deux points (:) et enfin la valeur de l’attribut. Un point-virgule termine l’instruction :
balise (ou classe)

{
attribut:valeur;
}
Exemple, pour définir les marges haut et bas de la balise body à 0 pixels :
body{
margin-top: 0px;
margin-bottom: 0px;
}
Notez que les guillemets ne figurent pas dans les instructions de style, et qu’on y indique les unités.
De cette manière, nous allons définir les styles précédemment mis en place dans la fonction change_style.
Ajoutez ces lignes dans le corps de la balise style :
a{
color: black;
text-decoration: none;
}
li{
list-style-type: none;
}
ul{
margin: 0px;
}
Notez les noms des propriétés différents en javascript et en CSS (JS : textDecoration / CSS : text-decoration).
Vous vérifierez le fonctionnement sur différents navigateurs et systèmes d’exploitation.
Erreurs à éviter :
- omission du point-virgule (;)
- insertion du signe égal (=) à la place des deux points (:)
Menu2 : javascript externe et styles dans les balises
Nous allons mettre en place un système de menu différent, dans lequel nous modifierons l’aspect des liens et du fond
lors du survol avec la souris. L’intérêt de ce TP résidera à la fois dans la manière de coder l’application et dans
l’application elle-même. Il s’agira d’un menu à un seul niveau, mais on pourrait généraliser sur plusieurs niveaux en
reprenant les techniques de menu1.
Cahier des charges

Pour ce menu, les demandes du commanditaire sont les suivantes :
- organisation des liens en une colonne
- polices sans sérif taille small
- au survol, changement de la couleur du lien et du fond
- modification simple des éléments du menu (position, liens et couleurs)
Auxquels nous ajouterons :
- suppression des effets standard des liens (soulignement)
Les éléments du menu sont récapitulés dans ce tableau :
Texte URL Cible

Accueil # _self
Page 1 # _self
Page 2 # _self
Page 3 # _self
IUT Troyes http://i-src.iut-troyes.univ-reims.fr/~web/src-index.php _blank
eBay http://www.ebay.fr _blank
Google http://www.google.fr _blank
Organisation générale - choix

Les choix technologiques sont les suivants :
Gestion des graphismes : JS + styles
Gestion des interactivités : JS
Gestion des modifications : fichier script JS externe
Techniquement, nous placerons l’ensemble du code html dans une seule variable (que nous nommerons commande)
que nous écrirons dans la page html avec document.write. Nous concaténerons successivement les différents
éléments html dans la variable commande grâce à l’opérateur d’incrément +=.
Exemple : commande = "<div>";
commande += "<a href=’#’>Un lien</a>";
commande += "</div>";
Après la troisième ligne de code, commande contient <div><a href=’#’>Un lien</a></div>.
Les scripts externes

Jusqu’à présent, nous avons systématiquement placé tout le code javascript dans la page html. Il existe une autre
option consistant à externer tout ou partie du code dans un fichier. L’appel du script dans la page se fera alors de la
manière suivante :
<script language="JavaScript" type="text/javascript" src="menu_def.js"></script>
On insère le lien au fichier externe au moyen de l’attribut src, comme pour une image. Ici, le fichier menu-def.js est
au même niveau que la page dans laquelle le script est invoqué (adressage relatif).
Un fichier javascript (extension .js) ne contient pas de html, seulement du code javascript. Lorsqu’il est invoqué dans
une balise script, son contenu est chargé dans la page html et toutes les variables et fonctions déclarées dans le fichier
deviennent accessibles dans cette page, comme si le code y avait été saisi directement.
Cette méthode présente surtout l’avantage de pouvoir utiliser un même code dans plusieurs pages différentes -
mutualisation du code = maintenance facilitée, mais elle permet aussi de séparer les éléments lorsque cela devient
utile/nécessaire - code long, déclaration de tableaux, etc.
Nous allons utiliser cette technique pour créer un système de menu dont les données principales (texte, liens, cibles et
couleurs) seront stockées dans des tableaux.
Les tableaux en javascript
Les tableaux sont des variables capables d’en contenir d’autres. Ils permettent de manipuler un grand nombre de
données comme un ensemble et, grâce notamment aux boucles, d’en lire, écrire et modifier les éléments.
Déclaration : tableau = new Array;

Pour déclare un tableau en javascript, On utilise la syntaxe new :
textes_menu = new Array;
Cette instruction créé un tableau nommé textes_menu.

Attention, les mêmes règles s’appliquent aux noms des tableaux et aux noms des variables.
Affectez une valeur à un élément : tableau[indice] = valeur;
On accède à un élément dans le tableau par un indice, cet indice commençant à 0.
textes_menu[0] = "Accueil"
Cette instruction affecte la valeur "Accueil" à textes_menu[0].
Le nombre d’éléments d’un tableau : tableau.length
On obtient le nombre d’éléments d’un tableau en utilisant la propriété length :
Nb = textes_menu.length;
Préparation : menu-def.js
a) Dans Dreamweaver, créez et sauvegardez une page sous le nom menu2.htm.

b) Toujours dans Dreamweaver, et de la même manière créez un document javascript que vous sauvegarderez
sous le nom menu-def.js.
c) Nous allons maintenant écrire les éléments des menus, graphismes et liens.
Assurez-vous d’avoir la fenêtre menu-def.js active, car c’est dans ce document que nous écrirons ces éléments.
Vous commencerez par déclarer les variables liées aux graphismes :
var haut="5"; //position menu / haut de la page

var gauche="5"; //position menu / gauche de la page
var couleur_fond = "silver"; //couleur de fond : gris
var couleur_fond_survol = "white"; couleur de fond au survol
var couleur_textes = "navy"; //couleur du texte : noir
var couleur_survol = "blue"; //couleur de texte au survol : bleu foncé
Ensuite, vous déclarez les tableaux pour les liens :
textes_menu = new Array; //textes des liens

liens_menu = new Array; //URL des liens
cibles_menu = new Array; //cibles des liens
Attention à l’orthographe et à la casse des noms de variables !!
Il reste, dans ce script externe, à remplir les trois tableaux en indiquant pour chaque élément les valeurs
conformément au cahier des charges, exemple pour le premier élément :
textes_menu[0]= "Accueil";
liens_menu[0]= "#";
cibles_menu[0]="_self";
Vous compléterez sur ce même modèle les définitions pour les 6 autres éléments, sans oublier de modifier l’indice (de
1 à 6).
Enregistrer votre fichier.
Les styles dans les balises
Cette technique s’ajoute à celles déjà rencontrées pour l’insertion des styles dans une page html. Elle consiste à écrire
les attributs de style directement dans la balise (ouverture), comme on le fait pour l’attribut src de la balise img ou
href de la balise a. La différence est que le style ne s’applique qu’à cette balise en particulier.
On pourra par exemple écrire :
<div style="background-color:green" ></div>
Ce que l’on pourrait traduire par : « pour cette balise div seulement, la couleur de l’arrière-plan sera le vert ».
On peut inclure plusieurs styles dans la même balise en les séparant par des points-virgules. Nous utiliserons cette
technique dans la page menu2.htm, pour les styles modifiés par les survols.
Rédaction du code dans menu2.htm

Revenez à votre document menu2.htm.
a) Mise en place des styles fixes
Les styles fixes sont ceux qui ne seront pas concernés par l’interactivité. Il s’agit des polices de caractères et de la
suppression des soulignements des liens. Pour ces styles nous utiliserons une balise <style> dans l’en-tête.
Vous ajouterez donc les styles suivants dans les balises head :
<style>
body{
font : 10px Arial, Helvetica, sans-serif;
}
a{
text-decoration:none;
}
</style>
b) Ecriture du code html dans la variable commande

Passez maintenant dans le body et insérez les balises script pour y écrire du code javascript.
Nous commencerons par initialiser la variable commande comme chaîne vide :
<script language="javascript" type="text/javascript">
commande="";
Ceci est nécessaire dans la mesure où nous n’utiliserons plus par la suite que l’opérateur d’incrément +=.
Nous créerons d’abord un conteneur pour le menu avec le style permettant de le placer dans la page, il s’agira d’une
balise div, avec gestion des attributs position, top et left :
//ouverture de la div principale avec son style
commande+="<div style='position:absolute;top:"+haut+"px;left:"+gauche+"px'>";
Notez l’intégration des variables (en rouge) issues de menu_def.js dans la ligne de commande. Notez également
l’emploi des guillemets simples et doubles. A l’exécution, commande deviendra :
<div style='position:absolute;top:5px;left:5px'>
Nous ne fermons pas cette balise div tout de suite car nous devons bien sûr y intégrer le contenu, c’est-à-dire les
éléments du menu. Examinons dans un premier temps ce que devront être chacun de ces éléments :
- Un conteneur pour contrôler la couleur du fond dans lequel on placera :
o Un lien qui reprendra les 3 données texte/URL/cible et qui intégrera au survol :
1. Le changement de couleur du texte
2. Le changement de couleur du fond
Nous pouvons écrire le format général de ce code html (pour l’élément 0)
<div id = "id0" style = 'background-color:couleur_fond'>
<a href = 'liens_menu[0]' target='cibles_menu[0]'
style = 'color:couleur_textes'
onmouseover = 'this.style.color = "couleur_survol";
document.getElementById("id0").style.backgroundColor = "couleur_fond_ survol"'
onmouseout = 'this.style.color="couleur_textes";
document.getElementById("id0").style.backgroundColor="couleur_fond"'>
textes_menu[0]</a>
</div>
Remarques :
Les éléments en rouge sont les variables en provenance de menu_def.js. Il s’agit de tableaux ou de variables standard.
Les caractères en bleu (ici 0) constitue l’indice qui devra changer pour chaque élément.
La modification de la couleur du fond rend nécessaire la création d’un Id spécifique pour chaque div, puisqu’on doit la
référencer par getElementById depuis la balise a. On pourrait bien sûr écrire 6 fois ces lignes (pour chacun des 6 éléments)
mais cela serait fastidieux et supposerait que nous connaissons le nobre d’éléments du menu. Une gestion en javascript nous
permet de gagner en longueur de code, et de minimiser le risque d’erreur de saisie, mais aussi de relier, grâce à javascript, les
données html à un fichier externe facile à modifier.
Nous utiliserons pour cela une boucle qui créera autant de nouvelles div que d’éléments de menu. Vous écrirez maintenant le
code en police Courier new :
//Boucle sur le nombre d'éléments du menu
for(i=0;i<textes_menu.length;i++){
Notez ici qu’on pouvait prendre n’importe lequel des trois tableaux puisqu’ils ont tous le même nombre d’éléments.
On écrit ensuite le code qui créé chaque div avec son Id spécifique et son style pour la couleur du fond.
//ouverture des divs avec génération d'un id

commande+="<div id='id"+i+"'";
//Définition de la couleur de fond

commande+= " style='background-color:"+couleur_fond+"'";
//fin d'ouverture de la balise <div>

commande+=">";
Attention, l’espace devant style est obligatoire pour séparer les attributs.
On rédige ensuite le code qui créé la balise a, qui est la plus compliquée, aussi allons-nous la traiter ligne par ligne.
1 - Ouverture et attribut URL et cible.

//URL (tableau liens_menu) et cible
commande+="<a"; //début de la balise <a>commande+= " href='"+liens_menu[i]+"' target='"+cibles_menu[i]+"'";
2 – Insertion du style.
//couleur des textes en remplacement du bleu stabdard des liens
commande+=" style='color:"+couleur_textes+"'";
3 – Gestion du survol avec l’ évènement onmouseover dans la balise a.
//changement de couleurs au survol du pointeur

commande+= " onmouseover='this.style.color=\""+couleur_survol+"\"";
commande+= ";document.getElementById(\"id"+i+"\").style.backgroundColor=\""+couleur_fond_survol+"\"'";
Attention, il s’agit d’une commande javascript qui génère une autre commande javascript, cette imbrication rend nécessaire la
protection de certains guillemets encadrant des données. Ces guillemets protégés ne seront pas être interprétés comme des
débuts ou fins de chaînes, mais comme n’importe quel autre caractère. Cette protection s’effectue en faisant précéder le
caractère d’un \ (antislash ou backslash). On dit que l’on échappe le caractère.
Ainsi, à l’exécution de
Commande = "onmouseover='this.style.color=\""+couleur_survol+"\"'";
commande contiendra, avec couleur_survol valant blue :
onmouseover='this.style.color="blue"'
L’instruction suivante gère l’évènement onmouseout :
//retour couleurs normales en sortie du pointeur

commande+= " onmouseout='this.style.color=\""+couleur_textes+"\"";
commande+= ";document.getElementById(\"id"+i+"\").style.backgroundColor=\""+couleur_fond+"\"'";
On peut maintenant refermer la balise :
commande+=">";//fin de la balise <a>
4 – Affichage du texte du lien.
//Affichage du texte de menu (tableau textes_menu)

commande+=textes_menu[i];
5 – Fermeture des balises.
//fermeture des liens

commande+="</a>";
//fermeture des divs

commande+="</div>";
} //Fin de la boucle
//fermeture de la div principale

commande+="</div>";
6 – Ecriture de la variable commande dans la page html avec document.write().
//Ecriture de 'commande' dans la page html

document.write(commande);
//et fermeture de la balise script

</script>
Aperçu du menu complet avec survol (à droite) dans IE :

Js tp4

Hochgeladen von

Dokumentinformationen

Originaltitel

Copyright

Verfügbare Formate

Dieses Dokument teilen

Dokument teilen oder einbetten

Freigabeoptionen

Stufen Sie dieses Dokument als nützlich ein?

Sind diese Inhalte unangemessen?

Copyright:

Verfügbare Formate

Js tp4

Hochgeladen von

Copyright:

Verfügbare Formate

TP n°4 – Menus en javascript – version 2

Retour à menu1 : les styles sans javascript

a) Charger menu1.htm dans Dreamweaver et sauvegarder sous menu1_2.htm.

On a en fait supprimé l’appel de la fonction change_style.

balise (ou classe)

Ajoutez ces lignes dans le corps de la balise style :

Cahier des charges

Texte URL Cible

Organisation générale - choix

Après la troisième ligne de code, commande contient <div><a href=’#’>Un lien</a></div>.

Les scripts externes

<script language="JavaScript" type="text/javascript" src="menu_def.js"></script>

Déclaration : tableau = new Array;

textes_menu = new Array;

Cette instruction créé un tableau nommé textes_menu.

Affectez une valeur à un élément : tableau[indice] = valeur;

On accède à un élément dans le tableau par un indice, cet indice commençant à 0.

Cette instruction affecte la valeur "Accueil" à textes_menu[0].

Le nombre d’éléments d’un tableau : tableau.length

On obtient le nombre d’éléments d’un tableau en utilisant la propriété length :

a) Dans Dreamweaver, créez et sauvegardez une page sous le nom menu2.htm.

Vous commencerez par déclarer les variables liées aux graphismes :

var haut="5"; //position menu / haut de la page

Ensuite, vous déclarez les tableaux pour les liens :

textes_menu = new Array; //textes des liens

Attention à l’orthographe et à la casse des noms de variables !!

Enregistrer votre fichier.

Les styles dans les balises

<div style="background-color:green" ></div>

Rédaction du code dans menu2.htm

a) Mise en place des styles fixes

b) Ecriture du code html dans la variable commande

Nous commencerons par initialiser la variable commande comme chaîne vide :

<script language="javascript" type="text/javascript">

//ouverture de la div principale avec son style

<div id = "id0" style = 'background-color:couleur_fond'>

<a href = 'liens_menu[0]' target='cibles_menu[0]'

onmouseover = 'this.style.color = "couleur_survol";

document.getElementById("id0").style.backgroundColor = "couleur_fond_ survol"'

//Boucle sur le nombre d'éléments du menu

//ouverture des divs avec génération d'un id

//Définition de la couleur de fond

//fin d'ouverture de la balise <div>

1 - Ouverture et attribut URL et cible.

//changement de couleurs au survol du pointeur

commande contiendra, avec couleur_survol valant blue :

L’instruction suivante gère l’évènement onmouseout :

//retour couleurs normales en sortie du pointeur

On peut maintenant refermer la balise :

commande+=">";//fin de la balise <a>

4 – Affichage du texte du lien.

//Affichage du texte de menu (tableau textes_menu)

//fermeture des liens

//fermeture des divs

//fermeture de la div principale

6 – Ecriture de la variable commande dans la page html avec document.write().

//Ecriture de 'commande' dans la page html

//et fermeture de la balise script

Aperçu du menu complet avec survol (à droite) dans IE :

Das könnte Ihnen auch gefallen