Programmation des Sites Web

Deuxième Année ENSIMAG

James L. Crowley

Séance 3

20 octobre 2000

Java Script

Plan :

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 :

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

Exemple S3.1.html Un Petit Script

<!-- Execute this script -->

<HTML>
<HEAD>
<TITLE>Un Petit Script</TITLE>
</HEAD
<BODY BGCOLOR=WHITE>
<H1>
<SCRIPT LANGUAGE=JAVASCRIPT TYPE="TEXT/JAVASCRIPT">
<!-- Projection des navigateurs avant Netscape 3.0


// Fin du zone protege -->
</SCRIPT>
</H1>
<NOSCRIPT>
<H2>Cet page exige JavaScript</H2>
<A HREF="http://home.netscape.com">Netscape</A>
</NOSCRIPT>
<A HREF="S3.11.html">S3.11.html</A>
</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 our bien entre /* et */ pour les ligne multiples.

On peut protéger les navigateurs non-equipé de Java Script avec un balise de commentaire <!--- fermé par -->

Un balise <NOSCRIPT> permet d'afficher un message d'erreur si le Browser n'est pas équipé de JavaScript.

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 d'un ALERT

Exemple s3.2.html

</TITLE>
</HEAD>
<BODY BGCOLOR=WHITE>
<SCRIPT LANGUAGE=JAVASCRIPT TYPE="TEXT/JAVASCRIPT">
<!-- Projection des navigateurs avant Netscape 3.0
//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!")
}
// Fin du zone protege -->
</SCRIPT>
<H1> Alert</H1>
<NOSCRIPT>
<H2>Cet page exige JavaScript</H2>
<A HREF="http://home.netscape.com">Netscape</A>
</NOSCRIPT>
</BODY>
</HTML>

avec le script bienvenu.html

Bienvenu avec Netscape</TITLE> </HEAD>
<BODY BGCOLOR=WHITE>
<H1> Netscape est bienvenu ici</H2>
<SCRIPT LANGUAGE=JAVASCRIPT TYPE="TEXT/JAVASCRIPT">
<!-- Projection des navigateurs avant Netscape 3.0

document.write("<img src='skier.mov.GIF'>")

// Fin du zone protege -->
</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

Exemple S3.3.html




<HTML>
<HEAD>
<TITLE>Exemple d'un fonction</TITLE>
 
<SCRIPT LANGUAGE=JAVASCRIPT>
<!-- Hide script from older browsers
function setColor(colorstr)
{
document.bgColor = colorstr;
}
// End hiding script from older browsers
-->
 
</SCRIPT>
</HEAD>
 
<BODY BGCOLOR=WHITE>
<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>
<A HREF="S8.11.html">S8.11.html</A>
</BODY>
</HTML>



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 LANGUAGE=JAVASCRIPT>
<!-- Hide script from older
browsers
function newWindow()
{
imgWindow = window.open('Skier.mov.gif',
'imgWin', 'width=175,height=150')
}
// End hiding script from old
browsers -->
</SCRIPT>
</HEAD>
<BODY BGCOLOR=WHITE>
<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>

Communication entre fenêtres

Exemple S3.5.html et S3.6.html



<HTML>
<HEAD>
<TITLE>Page Pere</TITLE>
</HEAD>
<BODY BGCOLOR=WHITE>
<SCRIPT LANGUAGE=JAVASCRIPT>
<!--
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
Page fils </TITLE>
<SCRIPT LANGUAGE=JAVASCRIPT>
<!--

function updateParent(textField)

{
opener.document.outputForm.msgLine.value
= "Bonjour " + textField.value + "!";
window.close()
}
// -->

</SCRIPT>
</HEAD>
<BODY BGCOLOR=WHITE>
<H1>Quel est votre nom?</H1>
<FORM>
<INPUT TYPE=TEXT ONBLUR="updateParent(this)" SIZE=20>
</FORM>
</BODY>
</HTML>

Exemple S3.7.html <HTML>
<HEAD>
<TITLE>Main Window</TITLE>
</HEAD>
<BODY BGCOLOR=WHITE>
<CENTER><H1>Ceci est le Pere</H1>
<SCRIPT LANGUAGE=JAVASCRIPT>
<!-- 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>

Panneau de Contrôle

Creation d'un panneau de controle

Exemple S3.8.html
<HTML>
<HEAD>
<TITLE>Panneau de Controle</TITLE>
<SCRIPT LANGUAGE=JAVASCRIPT>
<!--
newWindow = window.open('S3.9.html', 'newWin', 'width=300,height=300,left=600,top=0')
// -->
</SCRIPT>
</HEAD>
<BODY BGCOLOR=WHITE>
<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>
<SCRIPT LANGUAGE=JAVASCRIPT>
<!--
function updateParent(newURL)
{
opener.document.location = newURL
}
// -->
</SCRIPT>
</HEAD>
<BODY BGCOLOR=WHITE>
<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>
<A HREF="javascript:updateParent('jlc.html#Diplomas')">Diplomas</A>
<A HREF="javascript:updateParent('jlc.html#ProfessionalActivities')">Professional Activities</A>
<A HREF="javascript:updateParent('jlc.html#Publications')">Publications</A>
<A HREF="javascript:updateParent('http://volmontagne.decollage.org/english/')">Mountain Flying</A>
</ul>
</CENTER></BODY>
</HTML>

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
</TITLE>
<SCRIPT LANGUAGE=JAVASCRIPT>
<!--
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>
<BODY BGCOLOR=WHITE>
<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">&nbsp;<input TYPE=RESET>
</FORM>
</BODY>
</HTML>

Navigation par menu

Exemple S3.11.html

En lieu d'exiger que l'utilisateur tape "submit", on peut permettre la dépacement par menu.
Exemple S3.11.html Navitation par menu
</TITLE>
<SCRIPT LANGUAGE=JAVASCRIPT>
<!--
function jumpPage(newLoc)
{
newPage = newLoc.options[newLoc.selectedIndex].value

if (newPage != "")
{

window.location.href = newPage }
} // -->
</SCRIPT>
</HEAD>
<BODY BGCOLOR=WHITE>
<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
<OPTION VALUE="S3.2.html"
>S3.2.html
<OPTION VALUE="S3.3.html"
>S3.3.html
<OPTION VALUE="S3.4.html"
>S3.4.html
<OPTION VALUE="S3.5.html"
>S3.5.html
<OPTION VALUE="S3.6.html"
>S3.6.html
<OPTION VALUE="S3.7.html"
>S3.7.html
<OPTION VALUE="S3.8.html"
>S3.8.html
<OPTION VALUE="S3.9.html"
>S3.9.html
<OPTION VALUE="S3.10.html"
>S3.10.html
</SELECT>
</FORM>
</BODY>
</HTML>