Programmation des Sites Web

Transcription

ENSIMAG 2
Conception des Site Web
Programmation des Sites Web
Deuxième Année ENSIMAG
ENSIMAG 2000 - 2001
James L. Crowley
Séance 3
20 octobre 2000
Plan :
JavaScript ...................................................2
Qu'est que Java Script.........................................................2
Messages de Alert...............................................................4
Fonctions...........................................................................5
Ouverture d'un fenêtre........................................................7
Communication entre fenêtres..............................................8
Panneau de Contrôle...........................................................10
Verification d'un mot de passe.............................................12
Navigation par menu...........................................................13
CGI : Common Gateway Interface.....................14
Formulaires HTML ............................................................15
Exemple d'un Script pour un html dynamique.......................16
Execution d'un script par une ficher HTML..........................17
PERL................................................................................18
Organisation :
Les notes et les exemples sont disponibles surs :
http://www-prima.imag.fr/Prima/Homepages/jlc/Courses/2000/ENSI2.IHM2000
2-1
ENSIMAG 2
JavaScript
Qu'est que Java Script
JavaScript est une language "embedded" de script interprété par les
navigateurs moderne. JavaScript a fut inventé par Netscape, mais il est également
supporté par MS Explorer. JavaScript utilise le syntaxe du Java (inventé par SUN).
Attention : JavaScript n'est pas Java!
JavaScript est encastré dans le code "html".
Un script est facilement inclus dans un page html.
Le "wrapper" classique pour JavaScript est :
<SCRIPT LANGUAGE=JAVASCRIPT>

</SCRIPT>
Java est un langage a objet, mais faiblement typé.
Dont les objets pre-définit sont :
"Navigator" a les attributs Navigator.appName et Navigator.appVersion.
Screen avec les attributs Screen.width, Screen.height, Screen.colorDepth,
Screen.pixelDepth
Les objet Java ont également les méthodes (procedures).
Par exemple, l'objet "window" inclut :
window.alert(),window.open(),window.close(),window.prompt()
et bien d'autre
2-2
ENSIMAG 2
Exemple S3.1.html
<HTML>
<HEAD>
<TITLE>Un Petit Script</TITLE>
</HEAD
<BODY BGCOLOR=WHITE>
<H1>
<SCRIPT LANGUAGE=JAVASCRIPT TYPE="TEXT/JAVASCRIPT">

</SCRIPT>
</H1>
<NOSCRIPT>
<H2>Cet page exige JavaScript</H2>
<A HREF="http://home.netscape.com">Netscape</A> Home
</NOSCRIPT>
</BODY>
</HTML>
Les Scripts peuvent être placé entre <HEAD> et </HEAD>
ou bien entre <BODY> et </BODY>.
Il sont placé dans une zone <SCRIPT> ... </SCRIPT>
<SCRIPT> peuvent prendre les attributs LANGUAGE et TYPE
Les commentaire en Java Script commence par "//" sur un ligne
ou bien entre /* et */ pour les ligne multiples.
On doit protéger les navigateurs non-equipé de Java Script avec un
balise de commentaire 
Un balise <NOSCRIPT> permet d'afficher un message d'erreur si
le Browser n'est pas équipé de JavaScript.
2-3
ENSIMAG 2
Messages de Alert
On peut créer un boit avec un message d'alerte avec "alert".
Java Permet les if () else; du style "C".
On peut rediriger l'utilisateur a une autre script avec
l'attribut "location" de l'objet "window" : window.location
Exemple S3.2.html
<HTML>
<HEAD>
<TITLE>Exemple d'un ALERT</TITLE>
</HEAD>
//Navigator indique le Navigateur courant.
if(navigator.appName == "Netscape")
{
alert("Netscape Detected. Tres Bien!")
// window est le fenetre courant
// window.location est son address.
window.location = "bienvenue.html"
}
else
{
alert("Vous n'est pas sur Netscape!")
}
</SCRIPT>
<H1> Alert</H1>
<NOSCRIPT>
<H2>Cet page exige JavaScript</H2>
<A HREF="http://home.netscape.com">Netscape</A>
</NOSCRIPT>
</BODY>
</HTML>
2-4
ENSIMAG 2
avec le script bienvenu.html
<HTML>
<HEAD>
<TITLE>Bienvenu avec Netscape</TITLE>
</HEAD>
<H1> Netscape est bienvenu ici</H2>
document.write("<img src='skier.mov.GIF'>")
</SCRIPT>
<A HREF="S3.2.html">S3.2.html</A>
</BODY>
Fonctions
On peut définir les fonctions JavaScript qui sont déclenché par les evenements.
Par exemple un fonction de changer le couleur du fond est
fonction setColor(colorstr)
{
document.bgColor = colorstr;
}
2-5
ENSIMAG 2
Exemple S3.3.html
<HTML>
<HEAD>
<TITLE>Exemple d'un fonction</TITLE>

</SCRIPT>
</HEAD>
<H2>
Changer le couleur du fond
</H2>
<HR>
<FORM>
<INPUT TYPE="button" VALUE="blanc"
onClick="setColor('#ffffff')">
<INPUT TYPE="button" VALUE="gris"
onClick="setColor('#c0c0c0')">
<INPUT TYPE="button" VALUE="bleu ciel"
onClick="setColor('#64bae2')">
<INPUT TYPE="button" VALUE="citron"
onClick="setColor('#fff8b9')">
<INPUT TYPE="button" VALUE="mauve"
onClick="setColor('#c0c0f0')">
<INPUT TYPE="button" VALUE="peche"
onClick="setColor('#ffcb9f')">
<INPUT TYPE="button" VALUE="rouge"
onClick="setColor('#ff000')">
<INPUT TYPE="button" VALUE="vert"
onClick="setColor('#00ff00')">
<INPUT TYPE="button" VALUE="bleu"
onClick="setColor('#0000ff')">
</FORM>
</BODY>
</HTML>
2-6
ENSIMAG 2
Ouverture d'un fenêtre
Exemple S3.4.html
On peut ouvrir un fenêtre avec la méthode window.open() de la classe window.
<HTML>
<HEAD>
<TITLE>Window Test</TITLE>

</SCRIPT>
</HEAD>
<CENTER><H1>Skiing in Grenoble</H1>
<H3>Its time for Spring Skiing</H3>
<A HREF="javascript:newWindow()">Click here</A> to see why.
</CENTER></BODY>
</HTML>
2-7
ENSIMAG 2
Communication entre fenêtres
Une fenetre fillle peut communiquer avec une fenetre mere par
"UpdateParent".
Exemple S3.5.html et S3.6.html
<HTML>
<HEAD>
<TITLE>Page Pere</TITLE>
</HEAD>
<!-newWindow = window.open('S3.6.html', 'newWin')
// -->
</SCRIPT>
<CENTER><H1>Page Mere</H1>
<FORM NAME=outputForm>
<INPUT TYPE=TEXT SIZE=20 NAME=msgLine VALUE="">
</FORM></CENTER></BODY>
</HTML>
avec le script S3.6.html
<HTML>
<HEAD>
<TITLE>Page fils </TITLE>
<!-function updateParent(textField)
{
opener.document.outputForm.msgLine.value = "Bonjour " +
textField.value + "!";
window.close()
}
// -->
</SCRIPT>
</HEAD>
<H1>Quel est votre nom?</H1>
<FORM>
<INPUT TYPE=TEXT ONBLUR="updateParent(this)" SIZE=20>
2-8
ENSIMAG 2
</FORM>
</BODY>
</HTML>
Exemple S3.7.html
<HTML>
<HEAD>
<TITLE>Main Window</TITLE>
</HEAD>
<CENTER><H1>Ceci est le Pere</H1>
<!-newWindow = window.open('', 'newWin',
'toolbar=no,location=yes,scrollbars=yes,resizable=yes,width=
400,height=300')
newWindow.document.write("<HTML><HEAD><TITLE>Generated
Window</TITLE></HEAD><BODY BGCOLOR=WHITE><H2>Ceci est
nouveau fenetre</H2>")
newWindow.document.writeln("<BR>Ceci est un test<BR>")
newWindow.document.write("</BODY></HTML>")
newWindow.document.close()
// -->
</SCRIPT>
</BODY>
</HTML>
2-9
ENSIMAG 2
Panneau de Contrôle
Exemple S3.8.html
<HTML>
<HEAD>
<TITLE>Creation d'un panneau de controle</TITLE>
<!-newWindow = window.open('S3.9.html', 'newWin',
'width=300,height=300,left=600,top=0')
// -->
</SCRIPT>
</HEAD>
<CENTER><H1>Jim Crowley's Web Page</H1>
<H2></H2>
<IMG SRC="jim.GIF">
</CENTER></BODY>
</HTML>
avec le Panneau de Controle S3.9.html
<HTML>
<HEAD>
<TITLE>Panneau de Controle</TITLE>
<!-function updateParent(newURL)
{
opener.document.location = newURL
}
// -->
</SCRIPT>
</HEAD>
<CENTER><H1>Control Panel</H1>
<ul>
<H3><A HREF="javascript:updateParent('jlc.html')">Jim
Crowley</A><BR>
<A
HREF="javascript:updateParent('jlc.html#ResearchActivities')
">Research Activities</A>
2-10
ENSIMAG 2
<A
HREF="javascript:updateParent('jlc.html#Diplomas')">Diplomas
</A>
<A
HREF="javascript:updateParent('jlc.html#ProfessionalActiviti
es')">Professional Activities</A>
<A
HREF="javascript:updateParent('jlc.html#Publications')">Publ
ications</A>
<A
HREF="javascript:updateParent('http://volmontagne.decollage.
org/english/')">Mountain Flying</A>
</ul>
</CENTER></BODY>
</HTML>
2-11
ENSIMAG 2
Verification d'un mot de passe
JavaScript peut être très util pour la verification des information venant d'une
formulaire.
Exemple S3.10.html
<HTML>
<HEAD>
<TITLE>Exemple d'une Forme</TITLE>
<!-function validForm(passForm)
{
if (passForm.passwd1.value == "")
{
alert("You must enter a password")
passForm.passwd1.focus()
return false
}
if (passForm.passwd1.value != passForm.passwd2.value)
{
alert("Passwords do not matched. Please try again.")
passForm.passwd1.focus()
passForm.passwd1.select()
return false
}
return true;
}
// -->
</SCRIPT>
</HEAD>
<H2>Create a Password</H2>
<HR>
<FORM onSubmit="return validForm(this)"
action="thanks.html">
<P>Your Name: <INPUT TYPE=TEXT size=30">
<P>Choose a Password: <INPUT TYPE=PASSWORD NAME="passwd1">
<P>Retype Password: <INPUT TYPE=PASSWORD NAME="passwd2">
<P><INPUT TYPE=SUBMIT Value="Submit"> <input
TYPE=RESET>
</FORM>
</BODY>
</HTML>
2-12
ENSIMAG 2
Navigation par menu
En lieu d'exiger que l'utilisateur tape "submit",
on peut permettre la dépacement par menu.
Exemple S3.11.html
<HTML>
<HEAD>
<TITLE>Navitation par menu</TITLE>
<!-function jumpPage(newLoc)
{
newPage = newLoc.options[newLoc.selectedIndex].value
if (newPage != "")
{
window.location.href = newPage
}
}
// -->
</SCRIPT>
</HEAD>
<H2>Choix des Exemples</H2>
<HR>
<FORM ACTION="thanks.html" METHOD=GET>
<SELECT NAME="newLocation"
onChange="jumpPage(this.form.newLocation)">
<OPTION VALUE="" SELECTED>Select a topic
<OPTION VALUE="S3.1.html" >S3.1.html
</SELECT>
</FORM>
</BODY>
</HTML>
2-13
ENSIMAG 2
CGI : Common Gateway Interface
Common : Utilisable dans tous les systèmes d'exploitation et avec tous les langages
de programmation.
Gateway : CGI dans accès aux services
Interface : CGI est un protocole formellement spécifié.
Le "Common Gateway Interface" est un protocole qui permet au page html
d'exécuter les programmes. Ceci autorise les possibilités illimitées aux pages html.
Serveur
(Apache)
Script
(ccgi-bin/..)
Form.html
Submit
Serveur
Reponse
Call CGI
CGI Script
Reponse
2-14
ENSIMAG 2
Formulaires HTML
On peut exécuter un script à partir d'un page html via l'usage d'un formulaire.
Syntaxe de la balise FORM : <FORM ACTION ="script.cgi" METHOD="get">
script.cgi identifie le programme utilisé pour traiter le formulaire.
méthode définit la méthode à employer pour transmettre au serveur l'information
recueillie dans les champs du formulaire.
Les scripts cgi sont installés dans un répertoire cgi-bin du serveur.
..[serveur]/cgi-bin/script.cgi
L'ENSIMAG a fait un lien "soft" dans le cgi-bin vers chaque membre du cours :
cgi-bin/jlc
->
~jlc/cgi-bin
Il faut que les programmes en cgi-bin soient executable par tout le monde!
Fait le commande :
cd cgi-bin
chmod a+x *
//
//
aller au repertoire
all have access executable
Exemple d'une communication d'un client vers un serveur :
GET /cgi-bin/script.cgi HTTP/1.0
Accept: www/source
Accept: text/html
Accept: image/gif
User-Agent: Lynx/2.4 libwww/2.14
From: [email protected]
Une réponse de cgi pourrait être
HTTP/1.0 200 OK
Date: Thursday, 24 February 2000
Server: Apache 1.24
Mime-version: 1.0
content-type: text/html
content-length: 200
16:24:00
GMT
2-15
ENSIMAG 2
Exemple d'un Script pour un html dynamique.
Un script peux créer une page dynamique .
Considère le page HTML:
<HTML>
<TITLE>HTML Dynamique</TITLE>
<BODY
BGCOLOR=#FFFFFF >
<FORM ACTION ="/cgi-bin/s3.2.cgi">
<H1>Genere du html dynamic:</H1>
<INPUT TYPE=SUBMIT Value="Do it">
</FORM>
</BODY>
</HTML>
Soit le script s2.1.cgi installé en cgi-bin.
#!/usr/local/bin/perl
# script name : s3.2.cgi
print "Content-type: text/html", "\n\n";
print "<HTML>" , "\n";
print "<TITLE>Exemple d'une html dynamique</TITLE>" , "\n";
print "<BODY>" , "\n";
print "<H1>Merci!</H1>" , "\n";
print "</BODY>" , "\n";
print "</HTML>" , "\n";
exit(0);
2-16
ENSIMAG 2
Execution d'un script par une ficher HTML
Script
(ccgi-bin/..)
Serveur
Form.html
Call CGI
Submit
CGI Script
Reponse
Serveur
Reponse
Requete
de la Formulaire
Retour du formulaire
Remplissage
de la formulaire
Renvoie
au CGI
Renvoie au
Utilisateur
Client
Serveur
Script
CGI
2-17

Programmation des Sites Web

Transcription

Documents pareils

Paramètres (arguments)

Html 05 - HTML facile - Pagesperso

Tutoriel : Javascript | Catégorie : Divers | Ecrit par Mathieusub le 16

Programmation de scripts pour la simulation de scénarios

Erreurs JavaScript (bogues) :

TD TD –– Javascript

Programme de formation Flash Action Script 3 perfectionnement

Jeu de devinette Consignes du TP Consignes du jeu

Techniques de Programmation Internet JavaScript et CSS

Lista Script Etiketten.indd