Le Langage JavaScript A. Les scripts - unidentified

Transcription

T-GSI
STAGE RENOVATION
- HTML.Chapitre 5 -
Le Langage JavaScript
Sources du document :
•
•
•
•
•
Livre d’Eric Crepin Conception de site Internet Intranet ;
Le consortium W3C (texte de référence HTML 4.01 du 18 décembre 1997) ;
Le site ALL WEB ;
Le site ALL HTML ;
Magazine Compétence Micro n° 9 et 16.
Autres sources données à titre de bibliographie :
•
•
•
•
Le site de Didier cabuzel ;
Le site devparadise ;
Le site WebDeveloper;
Magazine Linux Pratique HS juin-juillet 2005, Développement Web.
Olivier Mondet
http://unidentified-one.net
A. Les scripts
Il est possible d’augmenter les performances de XHTML, en ajoutant des fonctionnalités de
présentation, et d’interactivité. Ceci en utilisant directement au sein des documents XHTML des
langages spécifiques tels que JavaScript (JS), ou VBScript (VBS).
A.1. Description des scripts
L’utilisation d’un script dans un fichier XHTML est de la forme :

<script type="text/javascript">
<![CDATA[
... contenu du script ...
]]>
</script>
NB : La déclaration sera text/vbscript pour du VBScript.
Ces scripts se placent généralement dans l’en-tête du document : <head> </head>
La normalisation XHTML impose l’insertion de scripts externes placés dans un fichier à part (portant
l’extension .js) et déclaré dans l’en-tête par la ligne :
<script type="text/javascript" src="script/script.js"></script>
Ch.5 - Le Langage JavaScript.doc
page 1 / 37
om (2001-2006)
A.2. Premier exemple
Affichage de texte par le biais de JavaScript :
<?xml version="1.0" encoding="UTF-8"?>
<!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″ lang=″fr″>
<head>
<title>(X)HTML avec Javascript</title>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<script type="text/javascript" src="js/script.js"></script>
</head>
<body>
<p>Ici c’est le contenu de la page sans JavaScript !</p>
</body>
</html>

L’intérêt de cette manipulation peut sembler obscur, et même décevant. Mais on vient de prouver
qu’un programme écrit en JavaScript peut interférer dans une page Web. Or, les pages HTML ne sont
pas des programmes, il n’y a pas de réactivité à des événements autres que ceux inscrits entre les
balises. L’ajout de commandes va donc permettre de connaître beaucoup plus de possibilités
(déclaration de variables, structures conditionnelles, structures de contrôle…).
A.3. Entrées / sorties, utilisation de variables
A.3.1. Affectation
<!DOCTYPE html
<head>
</head>
<body>
<p>Coucou !!</p>
</body>
</html>
page 2 / 37
om (2001-2006)
var nom;
nom=prompt("Veuillez entrer votre nom","");
alert("Heureux de faire votre connaissance, " + nom + " !");
// Fin du script-->
A.3.2. Calculs
Bien évidement le JavaScript donne toutes les possibilités d’un langage :
Opérateur
Signification
Exemple
+
Addition
a=10+c;
Soustraction
c=b-1;
*
Multiplication
u=10*3
/
Division
t=x/y
++
Incrément
-Décrément
Exemple de calculs :
<!DOCTYPE html
<head>
</head>
<body>
</body>
</html>
page 3 / 37
om (2001-2006)
var a, b, resultat;
a=prompt("Veuillez entrer un premier nombre","0");
b=prompt("Veuillez entrer un second nombre","0");
resultat=a*b;
document.write("Le résultat de l’opération est le suivant : " + resultat + " !");
// Fin du script-->
Vous noterez au passage que l’on a mis une valeur 0 par défaut dans la saisie. Cette valeur apparaîtra
en surbrillance bleue et sera effacée dès que l’on saisira un nombre.
page 4 / 37
om (2001-2006)
A.3.3. Exemples de scripts simples (formes algorithmiques usuelles)
Mot de passe (si l’utilisateur entre le bon mot de passe il peut accéder à la page d’accueil) :
<!DOCTYPE html
<head>
</head>
<body>
</body>
</html>
var a, b, c , motdepasse;
a="tra";
b="la";
c="lere";
motdepasse=prompt("Veuillez saisir le mot de passe","");
if (motdepasse==a+b+b+c)
{
location.href="pageaccueil.html";
}
else
{
alert("Accès refusé ! Access denied");
}
On aura reconnu la forme conditionnelle SI – ALORS – SINON - FINSI :
page 5 / 37
om (2001-2006)
Changement de couleur de l’écran (avec la commande switch) :
<!DOCTYPE html
<head>
</head>
<body>
</body>
</html>
var couleur;
couleur=prompt("Choisissez parmis ces couleurs : jaune, gris rouge","jaune");
switch(couleur)
{
case "rouge" :
document.bgColor="red";
break;
case "jaune" :
document.bgColor="yellow";
break;
case "gris" :
document.bgColor="gray";
break;
default :
alert("Cette couleur n’existe pas !!");
}
On aura reconnu la forme conditionnelle SELONQUE FAIRE – CAS )… - FINSELONQUE :
page 6 / 37
om (2001-2006)
Déviation vers des pages spécifiques :
<!DOCTYPE html
<head>
</head>
<body>
</body>
</html>
var couleur;
couleur=prompt("Quel est votre nom d’utilisateur ?","");
switch(couleur)
{
case "pierre" :
location.href="pagepierre.html";
break;
case "marc" :
location.href="pagemarc.html";
break;
case "evelyne" :
location.href="pageevelyne.html";
break;
case "angelique" :
location.href="pageangelique.html";
break;
default :
alert("Cette utilisateur n’existe pas vous ne pouvez pas accéder aux sites!!");
location.href="pageaccueil.html";
}
Bien évidement on retrouve les structures itératives traditionnelles d’algorithmique :
• for(initialisation ;condition d’arrêt ;incrément/décrément) {…}
• while(condition) {…}
Mot de passe version 2 (avec nombre limité d’accès) :
<!DOCTYPE html
<head>
</head>
<body>
</body>
</html>
page 7 / 37
om (2001-2006)
var secret, motdepasse, i=0;
secret="tralalalere";
while(motdepasse != secret && i<3)
{
motdepasse=prompt("Veuillez saisir le mot de passe","");
i++ ;
}
if (motdepasse==secret)
{
location.href="page.html";
}
else
{
alert("Le mot de passe est incorrect !");
}
NB : i++ correspond à i=i+1.
On aura reconnu la forme itérative TANTQUE FAIRE – FINTANTQUE :
A.4. Utilisation de fonctions JavaScript et gestionnaires d’événements
A.4.1. Gestion des événements
Les fonctions de JavaScript permettent de lancer des actions spécifiques (plusieurs fois de suite ou
plusieurs fonctions différentes) dans une même page. Pour ce faire on les associe souvent à des
gestionnaires d’événements.
Evénement
onAbort
onBlur
onClick
onDblclick
onChange
onError
onFocus
onLoad
onMouseOut
onMouseOver
onReset
onSelect
onSubmit
onUnload
Se produit quand …
Le chargement d'une image a été interrompu.
La souris quitte une zone formulaire.
On clique sur un objet d’un formulaire ou un lien.
On double-clique sur un objet.
On change une zone texte ou une sélection
d'élément.
Il y a une erreur de script.
La souris entre dans une zone formulaire.
On charge la page dans le navigateur ou un objet
graphique.
La souris sort d'une zone imagemap, d’un objet
La souris passe au-dessus d'un lien ou d'un
formulaire, d’un objet graphique.
On vide le contenu d’un formulaire.
On sélectionne un élément dans un formulaire.
On envoie un formulaire.
On sort de la page (de la fenêtre).
page 8 / 37
om (2001-2006)
Balises associées aux événements :
Balise
<A>
<AREA>
<BODY>
<FORM>
<IMG>
<INPUT> avec TYPE="button" ou "checkbox" ou
"radio"
<INPUT> avec TYPE="text" ou <TEXTAREA>
<INPUT> avec TYPE="SELECT"
Evénement
onClick
onMouseOver
onMouseOut
onMouseOver
onMouseOut
onBlur
onFocus
onLoad
onUnload
onReset
onSubmit
onAbort
onLoad
onError
onClick
onBlur
onChange
onFocus
onSelect
onBlur
onChange
onClick
onFocus
A.4.2. Insertion d’un bouton d’action et fonction JavaScript
Exemple changement de couleur de la page :
<!DOCTYPE html
<head>
<title>HTML et JavaScript</title>
</head>
<body>
<h1>Page avec fonction de couleur</h1>
<form>
<input type="BUTTON" VALUE="Gris clair" onClick="silver()" />
</form>
</body>
</html>
function silver()
{
document.bgColor="silver";
}
page 9 / 37
om (2001-2006)
On aura reconnu la déclaration d’une fonction FONCTION – FIN :
A.4.3. Gestion des événements avec l’ouverture/fermeture de fenêtre
Déclenchement d’une fonction au démarrage ou à la fermeture du document (la page devient grise dès
que la page est lancée) :
<!DOCTYPE html
<head>
</head>
<body onLoad="silver()">
<h1>Page avec fonction de couleur</h1>
</body>
</html>
function silver()
{
document.bgColor="silver";
}
page 10 / 37
om (2001-2006)
Un message d’adieu se lance dès que l’on ferme la fenêtre :
<!DOCTYPE html
<head>
</head>
<body onUnLoad="byebye()">
<h1>Page avec fonction</h1>
</body>
</html>
function byebye()
{
alert("Salut ! A la prochaine !!");
}
A.4.4. Lancement des fonctions
On peut également démarrer une fonction via un lien hypertexte :
<!DOCTYPE html
<head>
</head>
<body">
<p>
Si vous voulez lancer le message d’adieu cliquez <a href="javascript:byebye()">ici</a>
</p>
</body>
</html>
function byebye()
{
alert("Salut ! A la prochaine !!");
}
Egalement via le passage sur un objet :
<!DOCTYPE html
<head>
<link rel="stylesheet" href="votre_style.css" type="text/css">
</head>
<body">
page 11 / 37
om (2001-2006)
<p>
<img src="images/titileft.gif" onMouseover="bonjour()" alt="cuicui">
</p>
</body>
</html>
function bonjour()
{
alert("Salut ! Vous êtes passé sur moi !");
}
img {
border: 0px;
}
A.5. Fonctions avec passage de paramètre
Par exemple le changement d’arrière plan peut se faire de la façon suivante :
<!DOCTYPE html
<head>
</head>
<body>
<h1> Page avec fonction choix de couleur :</h1>
<form>
<input type="BUTTON" value="rouge" onClick="arriereplan('red')" />
<input type="BUTTON" value="jaune" onClick="arriereplan('yellow')" />
<input type="BUTTON" value="gris calir" onClick="arriereplan('silver')" />
</form>
</body>
</html>
function arriereplan(couleur)
{
document.bgColor=couleur;
}
page 12 / 37
om (2001-2006)
Commandes JavaScript “inline” (lancement de commandes JavaScript simples sans balises de script) :
<!DOCTYPE html
<head>
</head>
<body>
<h1>Page avec instructions inline :</h1>
<form>
<input type="BUTTON" value="Microsoft" onClick="location.href='http://www.msn.fr'" />
<input type="BUTTON" value="Yahoo" onClick="location.href='http://fr.yahoo.com'" />
</form
</body>
</html>
On aurait pu ouvrir le lien dans une nouvelle fenêtre de cette façon avec :
⇒ <input type="BUTTON" value="Yahoo" onClick="window.open('http://fr.yahoo.com')" />
L’objet history permet au visiteur de revenir à la page précédente (comme dans le navigateur) ou
d’aller à la suivante :
⇒ <input type="BUTTON" value="Précédent" onClick="javascript:history.back()" />
⇒ <input type="BUTTON" value="Suivant" onClick="javascript:history.forward()" />
page 13 / 37
om (2001-2006)
B. Programmation des objets fenêtres avec JavaScript
B.1. Les fenêtres pop-up
On voit souvent de petites fenêtres (souvent publicitaires) qui se lancent lorsque l’on visite certaines
pages :
<!DOCTYPE html
<head>
</head>
<body>
<h1>Page de lancement de fenêtres</h1>
<p><a href="javascript:fenetre1()">Pub pour un super nouveau site</A></p>
<p><a href="javascript:fenetre2()">Baratin en anglais</A></p>
</body>
</html>
function fenetre1()
{
var win;
win=window.open("images/titileft.gif", "Titi", "height=210, width=165, left=120,
top=200");
}
function fenetre2()
{
var win;
win=window.open("fichiers/texte.html", "Blablabla", "height=100, width=250, left=300,
top=150, resizable=yes");
win.setTimeout("window.close()",20000);
}
page 14 / 37
om (2001-2006)
On peut prévoir dans la fenêtre qui est affichée sa fermeture automatique au bout d’un délai (à l’aide
de setTimeout) ou avec un lien, ou avec un bouton.
Soit par exemple la « fenêtre » suivante :
<!DOCTYPE html
<head>
</head>
<body>
<h4>Texte en anglais</h4>
This program is produced by a member of the Association of Shareware Professionals
(ASP). ASP wants to make sure that the shareware principle works for you. If you are
unable to resolve a shareware-related problem with an ASP member by contacting the
member directly, ASP may be able to help. The ASP Ombudsman can help you resolve a
dispute or problem with an ASP member, but does not provide technical support for
members' products. Please write to the ASP Ombudsman at 545 Grover Road, Muskegon, MI
49442 or send a CompuServe message via CompuServe Mail to ASP Ombudsman 70007,3536.<BR>
<a href="javascript:window.close()">Fermer la fenêtre</a>
</body>
</html>
Soit la page qui va la lancer :
<!DOCTYPE html
<head>
</head>
<body>
<h1>Page de lancement de fenêtres</h1>
<p><a href="javascript:fenetre()">Lire le baratin en anglais</a></p>
</body>
</html>
Soit le script qui générera la fenêtre :
function fenetre()
{
var win;
win=window.open("fichiers/texte2.html", "Blablabla", "height=200, width=250, left=300,
top=150, resizable=yes");
}
page 15 / 37
om (2001-2006)
L’instruction avec un lien : <a HREF="javascript:window.close()">Fermer la fenêtre</a> aurait
pu être remplacée par un bouton :
<form>
<input type="BUTTON" VALUE="Fermer" onClick="window.close()" />
</form>
On peut également imaginer un menu qui s’ouvre dans une fenêtre à part et qui permet de manipuler à
distance d’autres fenêtres :
La première fenêtre va lancer ce menu :
<!DOCTYPE html
<head>
</head>
<body>
<h1>Page A</h1>
</body>
</html>
page 16 / 37
om (2001-2006)
<!DOCTYPE html
<head>
</head>
<body>
<h3>Choisissez votre page</h3>
<a href="javascript:renvoi('exemple85.html')" />Page A</a><br />
<a href ="javascript:renvoi('pageb.html')" />Page B</a><br />
<a href ="javascript:renvoi('pagec.html')" />Page C</a><br />
</body>
</html>

var win;
win=window.open("fichiers/menu.html", "menu_navigation", "height=160, width=220,
left=200, top=50");

var destination;
function renvoi(destination)
{
window.opener.location.href=destination;
}
page 17 / 37
om (2001-2006)
B.2. Créer une fenêtre à la volée
Il est également possible de créer une fenêtre XHTML avec JavaScript sans que celle-ci n’ait d’existence
propre dans un fichier source (cf. la fenêtre avec titi qui est également dans ce cas).
Exemple : une fenêtre est créée à la volée, elle est programmée pour se fermer au bout de 20000
millisecondes mais on y a tout de même ajouté un bouton pour fermer.
<!DOCTYPE html
<head>
</head>
<body>
<h3>Nous avons une autre fenêtre</h3>
</body>
</html>
var win;
win=window.open("", "Nom", "height=200, width=300, left=0, top=0");
win.document.write("<?xml version='1.0' encoding='UTF-8'?>");
win.document.write("<!DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Strict//EN'");
win.document.write("'http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd'");>
win.document.write("<html xmlns='http://www.w3.org/1999/xhtml' xml:lang='fr' lang='fr'>");
win.document.write("<head><title>Fenêtre Flash</title>");
win.document.write("<meta http-equiv='Content-Type' content='text/html; charset=ISO8859-1' />");
win.document.write("</head><body>><h3>Texte de la fenêtre créée à la volée</h3>");
win.document.write("<form><input type='BUTTON' value='Fermer' onClick='window.close()'
/>");
win.document.write("</form></body></html>");
win.setTimeout("window.close()",20000);
On remarquera que la fenêtre contient bien toutes les balises pour déclarer un document XHTML. Les
multiples win.document.write() servent à construire le document avec un aisance plus grande que si
l’on saisissait toute la structure en une seule ligne.
Autre point remarquable : les guillemets contenus dans les win.document.write() sont transformés en
simple quottes ‘. Cela s’explique du fait que l’instruction ouvre des guillemets pour attendre le contenu
à inscrire dans le document. S’il y avait d’autres guillemets cela signifierait une rupture dans la chaîne
de caractère pour ajouter, par exemple, le contenu d’une variable comme vu précédemment.
page 18 / 37
om (2001-2006)
C. Fonctions évoluées
C.1. Déviations de pages
Grâce à JavaScript on peut également opérer les mêmes déviations que les balises meta (en cas de
déménagement par exemple).
Déviation simple :
<!DOCTYPE html
<head>
<title>Déviation</title>
</head>
<body>
<h1>Nous avons déménagé</h1>
</body>
</html>
location.href="autrepageweb.html";
page 19 / 37
om (2001-2006)
Déviation différée (pour laisser le temps de lire l’annonce) :
<!DOCTYPE html
<head>
<title>Déviation</title>
</head>
<body>
<h1>Nous avons déménagé</h1>
</body>
</html>
setTimeout("location.href=’autrepageweb.html’",5000);
C.2. Afficher les paramètres liés au navigateur
Par exemple la détection du navigateur permet d’orienter le visiteur vers des pages adaptées :
<!DOCTYPE html
<head>
<title>Détection du navigateur</title>
</head>
<body>
<h1>Détection du navigateur</h1>
</body>
</html>
var navigateur;
navigateur=navigator.appName;
switch(navigateur) {
case "Microsoft Internet Explorer":
location.href="pageie.htm";
break;
case "Netscape":
location.href="pagenet.htm";
break;
default:
alert("Vous ne possédez malheureusement pas le navigateur adapté à nos pages !");
}
page 20 / 37
om (2001-2006)
Pareillement on peut détecter les paramètres d’affichage et les afficher :
<!DOCTYPE html
<head>
<title>Détection du navigateur</title>
</head>
<body>
<form>
<input type=″BUTTON″ value="Informations sur votre système" onclick="info()" />
</form>
</body>
</html>
function info()
{
var hauteur, largeur, couleurs, os, nom, navigateur, langue, showwin;
hauteur = screen.height;
largeur = screen.width;
couleurs = screen.colorDepth;
os = navigator.platform;
nom = navigator.appName;
navigateur = navigator.userAgent;
langue = navigator.language ;
showwin=window.open("","showwin","width=520,height=300");
showwin.document.write("<?xml version='1.0' encoding='UTF-8'?>");
showwin.document.write("<!DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Strict//EN'");
showwin.document.write("'http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd'");>
showwin.document.write("<html xmlns='http://www.w3.org/1999/xhtml' xml:lang='fr'
lang='fr'>");
showwin.document.write("<head><title>Infos</title>");
showwin.document.write("<meta http-equiv='Content-Type' content='text/html;
charset=ISO-8859-1' />");
showwin.document.write("</head><body><table border='1'>");
showwin.document.write("<tr><td>Hauteur de l’écran</td><td>" + hauteur + "
pixels</td></tr>");
showwin.document.write("<tr><td>Largeur de l’écran</td><td>" + largeur + "
pixels</td></tr>");
showwin.document.write("<tr><td>Profondeur des couleurs</td><td>" + couleurs + "
bits</td></tr>");
showwin.document.write("<tr><td>Système d’exploitation</td><td>" + os +
"</td></tr>");
showwin.document.write("<tr><td>Navigateur</td><td>" + nom +"</td></tr>");
showwin.document.write("<tr><td>Dénomination exacte</td><td>" + navigateur
+"</td></tr>");
showwin.document.write("<tr><td>Langue (Netscape seulement)</td><td>" + langue
+"</td></tr></table>");
showwin.document.write("<p><a href='javascript:window.close()'>Fermer la
fenêtre</a></p>");
showwin.document.write("</body></html>");
showwin.document.close();
}
page 21 / 37
om (2001-2006)
Affichage dynamique de la date de la machine cliente :
<!DOCTYPE html
<head>
<title>Exemple Javascript</title>
</head>
<body onLoad="debuteDate(10000)" onUnload="clearTimeout(dd)">
<form name="Temps2" id="Temps2">
La date du jour est : <input type="text" name="date" id="date" size="18" /><br />
</form>
</body>
</html>
function debuteDate(delai1)
{
var adate, date, amois;
delai = delai1;
adate = new Date();
date = adate.getDate();
amois = adate.getMonth()+1;
if (amois == 1) date += " janvier";
else if (amois == 2) date += " février";
else if (amois == 3) date += " mars";
else if (amois == 4) date += " avril";
else if (amois == 5) date += " mai";
else if (amois == 6) date += " juin";
else if (amois == 7) date += " juillet";
else if (amois == 8) date += " août";
else if (amois == 9) date += " septembre";
else if (amois == 10) date += " octobre";
else if (amois == 11) date += " novembre";
else if (amois == 12) date += " décembre";
date += " " + adate.getYear();
date = " " + date;
document.Temps2.date.value = date ;
dd = setTimeout("debuteDate(delai)",delai1) ;
}
page 22 / 37
om (2001-2006)
On remarquera de quelle manière on interagit avec un formulaire (ici pour afficher la date).
document.Temps2.date.value = date ;
Le formulaire
Le document actif
L’é
l ém
en
t<
inp
u t…
/>
<form name="Temps2" id="Temps2">
La date du jour est : <input type="text" name="date" id="date" size="18" /><br />
</form>
C.3. Affichages de textes dynamiques
Utilisation d’une Bannière de texte :
HTML fournit bien un balisage permettant la gestion des bannières déroulantes :
<marquee> ... </marquee>
<!DOCTYPE html
<head>
<title>Exemple Javascript</title>
</head>
<body onLoad=" Msg='Texte déroulant dans une Bannière ... (à suivre)'; banniere(100);"
onUnload="clearTimeout(ban)">
<form name="formban" id="formban">
<input type="text" name="Fbanniere" id="Fbanniere" size="40" /><br />
</form>
</body>
</html>
page 23 / 37
om (2001-2006)
var position=0, ban, delai, Msg;
function banniere(delai1)
{
delai = delai1;
if (position >= Msg.length)
position = 0;
else if (position == 0)
{
Msg = '
' + Msg;
while (Msg.length < 128)
Msg += '
' + Msg;
}
document.formban.Fbanniere.value = Msg.substring(position,position+Msg.length);
position++;
ban = setTimeout("banniere(delai) ",delai1);
}
Afficher un texte changeant :
<!DOCTYPE html
<head>
<title>Texte changeant</title>
</head>
<body onLoad="textechangeant()">
<h1>Des livres qui vous changeront la vie !</h1>
<form name="form1" id="form1">
<input type="text" name="champtexte" id="champtexte" size="50" />
</form>
</body>
</html>
var i, message;
i=0;
message=new Array();
message[0]="Nouveau : Livre sur Windows 3012";
message[1]="Réédition : Les secrets du BTS IG";
message[2]="Offre spéciale : Séminaire Simon & Garfunkel ";
message[3]="Best-seller : Formation rapide à Mondet 2002";
function textechangeant()
{
document.form1.champtexte.value=message[i]
if (i<message.length-1)
{
i++;
}
else
{
i=0;
}
setTimeout("textechangeant()",5000);
}
page 24 / 37
om (2001-2006)
Texte changeant dans la barre d’état :
<!DOCTYPE html
<head>
<title>Texte changeant</title>
</head>
<body onLoad="textechangeant()">
<h1>Des livres qui vous changeront la vie !</h1>
</body>
</html>
var i, message;
i=0;
message=new Array();
message[0]="Nouveau : Livre sur Windows 3012";
message[1]="Réédition : Les secrets du BTS IG";
message[2]="Offre spéciale : Séminaire Simon & Garfunkel";
message[3]="Best-seller : Formation rapide à Mondet 2002";
function textechangeant()
{
window.status=message[i]
if (i<message.length-1)
{
i++;
}
else
{
i=0;
}
setTimeout("textechangeant()",5000);
}
page 25 / 37
om (2001-2006)
D. Navigation dans les menus grâce à JavaScript
Il est également possible de lancer l’exécution de plusieurs fonctions ou de lancer plusieurs pages avec
les menus déroulants (cf. les chapitres précédents pour plus de détails sur les formulaires).
D.1. Menus, effets
Ici un menu déroulant avec un bouton GO :
<!DOCTYPE html
<head>
<title>Bouton Go!</title>
</head>
<body>
<h1>Menu déroulant avec un bouton Go</h1>
<form name="liste1" id="liste1">
<select size="1" name="choix" id="choix">
<option value="rien" SELECTED>Veuillez effectuer votre choix !</option>
<option value ="fichiers/pagea.html">page A</option>
<option value ="fichiers/pageb.html">page B</option>
<option value ="fichiers/pagec.html">page C</option>
<option value ="rien">------ligne de séparation-----</option>
<option value ="fichiers/paged.html">page D</option>
</select>
<input type="BUTTON" value="Go !" onClick="changer()" />
</form>
</body>
</html>
function changer()
{
var selection, page;
selection=document.liste1.choix.selectedIndex;
page=document.liste1.choix.options[selection].value;
if (page=="rien")
{
document.liste1.reset();
return false;
}
else
{
location.href=page;
}
}
Note :
On récupère l’indice du choix effectué (ici de 0 à 5) avec l’instruction :
• selection=document.liste1.choix.selectedIndex
puis on récupère le contenu du choix opéré (qui est assigné avec <option value="…") avec
l’instruction :
• page=document.liste1.choix.options[selection].value
page 26 / 37
om (2001-2006)
D.2. Gestion des frames
A partir de l’exemple précédent on peut facilement imaginer les possibilités offertes par une telle
interactivité avec le visiteur. On peut aussi éviter d’utiliser le bouton Go et rendre actif les choix dans le
menu directement avec onChange. Par exemple un menu placé en frame :
Le fichier frameset nommé exemple951.html (cf. le chapitre précédant pour plus de détails sur les
formulaires) :
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
<head>
<title>Mon super site</title>
</head>
<frameset rows="120,*" border="0">
<frame src="exemple952.html" name="navi" id="navi" resizable="NO" />
<frame src="fichiers/pagea.html" name="main" id="main" />
</frameset>
</html>
Le fichier suivant est le fichier exemple952.html utilisé dans la barre de navigation :
<!DOCTYPE html
<head>
<title>Navigation</title>
</head>
<body>
<h1>Les pages de Georges</h1>
<form name="liste1" id="liste1">
<select size="1" name="choix" id="choix" onChange="changer()">
<option value="rien" selected="selected">Veuillez effectuer votre choix !</option>
<option value="fichiers/pagea.html">page A</option>
<option value="fichiers/pageb.html">page B</option>
<option value="fichiers/pagec.html">page C</option>
page 27 / 37
om (2001-2006)
<option value="rien">------ligne de séparation-----</option>
<option value="fichiers/paged.html">page D</option>
</select>
</form>
</body>
</html>
function changer()
{
var selection, page;
selection=document.liste1.choix.selectedIndex;
page=document.liste1.choix.options[selection].value;
if (page=="rien")
{
document.liste1.reset();
return false;
}
else
{
parent.main.location.href=page;
}
}
body {
background: sylver;
}
page 28 / 37
om (2001-2006)
On peut également imaginer un frameset avec lignes et colonnes (la colonne de gauche servant à la
navigation, la colonne de droite divisée en deux lignes : en haut le titre, en bas les pages
sélectionnées).
Le fichier frameset nommé exemple961.html :
<!DOCTYPE html
<head>
<title>Mon super site</title>
</head>
<frameset cols="120,*" border="0">
<frame src="exemple962.html" name="navi" id="navi" scrolling="NO" resizable="NO" />
<frameset rows="110,*" border="0">
<frame src="fichiers/titresite.html" name="titre" id="titre" scrolling="NO"
resizable="NO" />
<frame src="fichiers/pagea.html" name="main" id="main" />
</frameset>
</frameset>
</html>
Le fichier titresite.html comprend juste le titre du site situé en permanence dans la frame nommée
titre :
<!DOCTYPE html
<head>
<title>Titre du site</title>
</head>
<body>
<center>
<h1>Les pages de Georges</h1>
</center>
</body>
</html>
body {
background: sylver;
}
<!DOCTYPE html
<head>
<title>Navigation</title>
</head>
<body>
<center>
<img src="Images/titileft.gif"><br />
<h3>Choisissez</h3><br />
</center>
page 29 / 37
om (2001-2006)
<a href="javascript:pageselect('pagea.html')">Page
<a href="javascript:pageselect('pageb.html')">Page
<a href="javascript:pageselect('pagec.html')">Page
<a href="javascript:pageselect('paged.html')">Page
</body>
</html>
A</a><br
B</a><br
C</a><br
D</a><br
/>
/>
/>
/>
var selection;
function pageselect(selection)
{
parent.main.location.href="fichiers/"+selection;
}
body {
background: pink;
}
⇒ Chacune des pages utilisées dans la section frame ont la structure suivante :
Par exemple Pagea.html :
<!DOCTYPE html
<head>
<title>Page A</title>
</head>
<body>
<h1>Page A</h1>
</body>
</html>
page 30 / 37
om (2001-2006)
if (parent.location.href==location.href)
{
parent.location.href="../exemple961.html";
}
Le script permet d’avoir le contrôle de la présentation des pages dans leur frameset d’origine (ici
exemple961.html). En effet on pourrait très bien ouvrir la page pagea.html - par exemple - en dehors
du frameset qui la contient. Pour éviter cela on force la page à détecter elle-même si la page parente
est elle-même : if (parent.location.href==location.href) dans ce cas cela veut dire qu’on l’a ouvert
directement alors on rétabli l’ordre des choses en forçant le chargement du frameset comme page
parente : parent.location.href="../exemple961.html".
Parfois les pages accessibles d’un autre site sont incluses dans leur propre frameset. Cela peut paraître
pratique certaines fois mais on empêche de cette manière de pouvoir prendre le lien vers cette page. Il
est donc possible de rajouter du code JavaScript qui permet de se sortir d’un frameset et occuper la
fenêtre de façon autonome.
if (parent.location.href!=location.href)
{
parent.location.href=location.href ;
}
D.3. Les commandes liées aux iFrames
On peut désigner les iFrames en JavaScript tout comme on s’adresse à la page courante ou aux
frames :
window.frames[Nom_iframe]
window.frames[Nom_iframe.document]
Voici un exemple de déclaration d’une fonction pour charger une iFrame (en pleine page) :
<!DOCTYPE html
<head>
<title>Page Avec iFrame</title>
</head>
<body>
<h1>Page Avec iFrame</h1>
<a href="Exemple393.htm" onclick="return chargIframe('ifrm', this.href)">iframe</a>
</body>
</html>
Var iframeName, url
function chargIframe(iframeName, url)
{
if (window.frames[iframeName])
{
window.frames[iframeName].location=url;
return false;
}
else return true;
}
L’ajout de return false permet uniquement de décrire une fonction qui ne retourne pas de valeur.
page 31 / 37
om (2001-2006)
D.4. Les images sensitives
Il est possible de changer l’aspect d’un lien, d’un graphique lorsque l’on passe dessus avec la souris. En
effet on peut respecter la codification actuelle des couleurs indiquant les liens mais également recourir
à des images pour changer l’aspect des liens ou changer leur système d’apparence.
Exemple d’une image sensitive. Nous avons construit deux images qui formeront un lien vers une page
web. Nous avons décidé qu’au moment où l’on positionnera la souris sur notre image celle-ci changera
d’aspect :
AVANT (bout1.gif)
APRES (bout2.gif)
<!DOCTYPE html
<head>
<title>Images sensitives</title>
</head>
<body>
<h1>Le menu dynamique</h1>
<a href="fichiers/pagea.html" onMouseover="document.lien1.src=menu2.src"
onMouseout="document.lien1.src=menu1.src"><img src="bout1.gif" name="lien1" id="lien1"
/></a>
</body>
</html>
var menu1 = new Image();
var menu2= new Image();
menu1.src="images/bout1.gif";
menu2.src="images/bout2.gif";
body {
background: darkcyan;
}
img {
width: 50px;
height: 25px;
border: 0px;
}
page 32 / 37
om (2001-2006)
Autre approche avec le code situé dans la balise img :
<!DOCTYPE html
<head>
<title>Images sensitives</title>
</head>
<body>
<h1>Le menu dynamique</h1>
<a href="fichiers/pagea.html" onMouseover="document.lien1.src='images/bout1.gif'"
onMouseout="document.lien1.src='images/bout2.gif'"><img src="bout1.gif" name="lien1"
id="lien1" /></a>
</body>
</html>
body {
background: darkcyan;
}
img {
width: 50px;
height: 25px;
border: 0px;
}
E. Les formulaires
Les formulaires permettent surtout de gérer des données en provenance des visiteurs.
Soit le formulaire qui permet à un client de choisir un produit :
<!DOCTYPE html
<head>
<title>Commande</title>
</head>
<body>
<h1>Commandez un produit !</h1>
<form
action="mailto:[email protected]?subject=commandeproduit"
method="post"
name="question" id="question" enctype="text/plain" onReset="return securite('vider')"
onSubmit="return securite('expédier maintenant')">
Le produit coûte 300 EUR et les frais de port s’élèvent à 45 EUR.
<hr />
Je commande exactement <input type="text" size="2" maxlength="2" name="nombre"
id="nombre" value="1"> unités du produit
<br />
<input type="checkbox" name="express" id="express" value="oui"> Livraison express (70
EUR de supplément)
<BR>
Je le voudrais en
<input type="radio" name="sorte" id="sorte" value="noir" checked>Noir
<input type="radio" name="sorte" id="sorte" value="argent">Argent
<input type="radio" name="sorte" id="sorte" value="or">Or
<hr />
page 33 / 37
om (2001-2006)
<br />Titre :
<select name="titre" id="titre" size="1">
<option value="M.">M.</option>
<option value="Mme">Mme</option>
</select>
<br />Prénom : <input type="text" name="prenom" id="prenom" />
<br />Nom : <input type ="text" name="nom" id="nom" />
<br />Numéro client : <input type ="text" name="nrclient" id="nrclient" maxlength="8"
/>
<br />Adresse E-mail : <input type ="text" name="email" id="email" />
<p><input type ="button" value="Vérifier la saisie et calculer le montant"
onClick="formtest()"/> </p>
<p><input type ="reset" value="Vider le formulaire" />
<input type ="submit" value="Envoyer les données" /></p>
</form>
</body>
</html>
function securite(question)
{
var reponse;
reponse=confirm("Etes-vous sûrs de vouloir " + question + " le document ?");
return reponse;
}
function formtest()
{
var prenom, nom, nrclient, email, arobase, point, i, resultat;
prenom=document.question.prenom.value;
nom=document.question.nom.value;
nrclient=document.question.nrclient.value;
email=document.question.email.value;
if (nom=="" || prenom=="" || nrclient=="" || email=="")
{
alert("Remplissez s'il vous plait tous les champs !")
return false;
}
arobase=0;
point=0;
for (i=0; i<email.length; i++)
{
if (email.charAt(i)=="@")
{
arobase=1;
}
if (email.charAt(i)==".")
{
point=1;
}
}
if (arobase!=1 || point!=1 || email.length<7)
{
alert("Ce n'est pas une adresse E-mail valide !");
document.question.email.focus();
document.question.email.select();
return false;
}
resultat=document.question.nombre.value*75
resultat=resultat+12
if (document.question.express.checked)
{
resultat=resultat+20
}
alert("Bonjour, " + prenom + " " + nom + ",\nVous devez payer "+ resultat +" EUR
!");
}
page 34 / 37
om (2001-2006)
body {
background: lightcyan;
}
Hr {
width: 420;
float: left;
}
D’une part une fonction de confirmation a été créée function securite(question) et affiche un
message adapté suivant la question que l’on veut poser (paramètre : question) ; d’autre part la
vérification du contenu du formulaire (champs non vides) est effectuée par la fonction function
formtest(). L’instruction return permet de retourner la valeur de la réponse (true/false) à la question
de la fonction securite(question) et de retourner le paramètre de validité du formulaire dans la fonction
formtest(). Lorsque le return false est rencontré la fonction s’arrête et le reste du code n’est pas
exécuté.
La fonction securite(question) retourne son résultat dans l’invocation faire dans les paramètres de
FORM : onReset="return securite('vider')" veut dire que lorsque l’on a choisi de vider le
formulaire(input type="reset") alors onReset sera exécuté si la réponse à la question est positive (Ok)
et recevra alors le paramètre true.
Le fait de vouloir envoyer les données (input type="submit") après confirmation (onSubmit="return
securite('expédier maintenant') l’attribut ACTION de la commande FORM entrera en service et lancera
un mail avec le contenu de la commande. Le chapitre suivant abordera de façon plus approfondie les
envois de données vers les serveurs avec les pages dynamiques.
Olivier Mondet
page 35 / 37
om (2001-2006)
Annexe 1 : Instructions JavaSscript :
Instruction
array()
charAt(x)
confirm()
date()
document.bgColor="couleur"
document.form1.champtexte.value
document.liste1.choix.options[num_
choix].value
document.liste1.choix.selectedIndex
document.cookie="nom_cookie=vale
ur_cookie;
expires=date_au_format_GMT"
document.liste1.reset()
document.nom.src
Document.write("Texte")
getDate()
getDay()
getFullYear()
getHours()
getMinutes()
getMonth()
getSeconds()
getYear()
Image()
Utilisation
Tableau déclaré : montableau = new Array(n) avec n la longeur
du tableau et montableau[0] le premier élément de ce tableau.
Il est également possible de déclarer un tableau en lui affectant
des valeurs montab = new Array(« cerise », « tomate »,
« stylo ») ici un tableau de dimension 3.
Livre le caractère à la x-ième position de la chaîne de
caractères (le premier caractère est à la position 0).
Longueur=phrase.charAt(x).
Boite de dialogue de confirmation qui renvoi la valeur true si Ok
est pressé, false si annuler est pressé.
Objet date déclaré : madate = new Date()
Permet de changer la couleur de fond d’écran
Assigne (ou récupère) le contenu du champ nommé champtexte
du
formulaire
nommé
form1.
Par
exemple
document.form1.champtexte.value= »Je suis le plus booo » ou
variable=document.form1.champtexte.value
Permet de récupérer le contenu (la valeur déclarée dans
VALUE) de l’option options[numéro] du menu choix dans le
formulaire
liste1 :
contenu=document.liste1.choix.options[selection].value
Permet de récupérer l’indice de l’élément choisi dans le menu
déroulant nommé choix du formulaire nommé liste1 :
num_choix=document.liste1.choix.selectedIndex
Place (ou lit) un cookie. Il faut lui donner une date d’expiration
si l’on veut qu’il perdure un certain temps sur l’ordinateur
distant :
document.cookie="Nomsurfeur="+nom+";expires="+date.toG
MTString();
document.cookie="Hobby="+hobby+";expires="+date.toGMTS
tring();
Pour lire un cookie :
Si celui est plein document.cookie!="" alors on prend le contenu
avec séparation des éléments (split) avec le ; par exemple :
contenu=document.cookie.split("; ");
Permet de réinitialiser le formulaire nommé liste1.
Permet de fixer l’url de la source (src) d’un élément (nommé ici
nom) de la page courante.
Permet d’écrire dans la page web.
Renseigne sur me jour du mois sous la forme d’un nombre
compris entre 1 et 31 :
Var date;
madate= new Date() ;
date=madate.getDate();
Renseigne sur le jour de la semaine sous la forme d’un nombre
compris entre 0 et 6 (0=dimanche).
Renseigne sur l’année sous forme d’un nombre à quatre
chiffres.
Informe sur les heures.
Informe sur les minutes.
Renseigne sur le mois sous la forme d’un nombre compris entre
0 et 11 (0=janvier).
Informe sur les secondes
Renseigne sur l’année.
Objet Image déclaré de la façon suivante :
Monimage = new Image();
page 36 / 37
om (2001-2006)
lenght
location.href="adresse url"
math.random()
math.round
navigator.appName
navigator.langage
navigator.platform
navigator.userAgent
parent.nom_frame.location.href="url
"
parent.location.href="url"
screen.availheight
screen.availwidth
screen.colorDepth
Screen.height
screen.width
setTimeout("Action", millisecondes)
split("; ")
src
substring(position1, position2)
toGMTString()
toLowerCase()
toUpperCase()
Var variable ;
variable=prompt("texte","valeur par
défaut")
Window.close()
window.open("adresse url")
window.frames[Nom_iframe]
Window.open("contenu",
"nom",
"height=Pixel,
width=Pixel,
left=Pixel, top=Pixel")
Window.opener.location.href="url"
window.status
Détermine la longueur d’une chaîne de caractères (ou d’un
tableau). longueur=phrase.length.
Envoi vers une adresse
Génère des nombres pseudo aléatoires : math.random()*(ba)+a (b le plus grand nombre désiré, a le plus petit nombre
désiré).
Arrondi un nombre : math.round(1.5) est égal à 2.
Nom du navigateur
Langue (uniquement pour Netscape)
Système d’exploitation
Désignation précise du navigateur
Assigne une page désigné dans la location nommée nom_frame
de la page parente (normalement la page frameset).
Assigne (ou Donne) l’adresse de l’url parente.
Hauteur visible de l’écran en pixels
Largeur visible de l’écran en pixels
Profondeur en couleurs (8, 16, 32 bits)
Auteur de l’écran en pixels
Largeur de l’écran en pixels
Permet d’exécuter une action avec retardement
Cette méthode convertit une chaîne de caractères en un
tableau. Le ; est le séparateur choisi ici entre les différents
éléments du tableau.
Spécifie l’url de la source d’un objet comme par exemple un
objet image dont on veut fixer la source :
monimage=new image();
monimage.src="image.gif";
Affiche les caractères entre deux positions d’une phrase.
La date est transformée en une chaîne de caractères
correspondant à la norme IETF. Le 23 février 2002 deviendra :
Sat, 23 feb 2002 12 :24 :23 UTC.
Convertit une chaîne de caractères en minuscules.
Convertit une chaîne de caractères en majuscules.
Déclaration d’une variable
Permet d’ouvrir une boite de dialogue d’entrée dont la valeur
sera affectée à variable.
Fermeture d’une fenêtre.
Permet d’ouvrir une nouvelle fenêtre.
Permet de s’adresser à un iframe.
Permet d’ouvrir
précisément.
une
nouvelle
fenêtre
en
la
formatant
Cela permet de manipuler la fenêtre qui a créé (ouvert) la
fenêtre appelée.
Texte de la ligne d’état d’une fenêtre Windows.
Olivier Mondet
page 37 / 37
om (2001-2006)

Le Langage JavaScript A. Les scripts - unidentified

Transcription

Documents pareils

Fiche5TechnoWeb xml dtd xsl

DUT SRC - Webchronique

Techniques de Programmation Internet JavaScript et CSS

écriture WMK - La Maternelle De Wendy

Lotus Notes Domino v7/v8, JavaScript

VENDS RAQUETTES HEAD

Utilisation du navigateur Internet Explorer 6

Programmation des Sites Web Frames et JavaScript

Appeler un fichier

Initiation à Javascript