Techniques de Programmation pour Internet

Année Spéciale Informatique

ENSIMAG 2006 - 2007

James L. Crowley et Jean-Marie Vallet

Séance 4

12 février 2007

JavaScript et CSS

Plan :

Java Script Remarks : Pour plus d'information voir les W3C tutoriaux sur web :
        http://www.w3schools.com/js/
et     http://www.w3schools.com/css/

JavaScript

Qu'est que Java Script

JavaScript est un langage de scripte interprété par les navigateurs modernes. JavaScript utilise la syntaxe de Java (inventé par SUN). 

Attention : JavaScript n'est pas Java! 

JavaScript est encastré dans le code "html". Un scripte est facilement inclue dans un page html.

Le "wrapper" classique pour JavaScript est : 

<script type="text/javascript">
<!-- // -->
</SCRIPT>
JavaScript est un langage à objet, faiblement typé.
Les classes d'objet prédéfinis sont  Navigator et Screen.

La classe Navigator a les attributs Navigator.appName et Navigator.appVersion.
La classe Screen a les attributs Screen.width, Screen.height, Screen.colorDepth, Screen.pixelDepth

Les classes JavaScript posedes les méthodes (procedures).
Par exemple, l'objet "window" inclut :
window.alert(),window.open(),window.close(),window.prompt() et bien d'autre

Exemple S4.1.html Un Petit Script

<!-- Execute this script -->

<HTML>
<HEAD>
<TITLE>Un Petit Script</TITLE>
</HEAD
<BODY BGCOLOR=WHITE>
<H1>
<SCRIPT 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="S4.11.html">S4.11.html</A>
</BODY>
</HTML>

Les Scripts peuvent être placé entre <HEAD> et </HEAD>
ou bien entre <BODY> et </BODY>.
Ils sont placés dans une zone <SCRIPT> ... </SCRIPT>
<SCRIPT> peuvent prendre les attributs LANGUAGE et TYPE

Les commentaires en Java Script commencent par "//" sur un ligne
ou bien entre /*  et */ pour les lignes multiples.

On doit 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 boite 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 S4.2.html

</TITLE>
</HEAD>
<BODY BGCOLOR=WHITE>
<SCRIPT 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>
<A HREF="S4.2.html">S4.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 S4.3.html


<HTML>
<HEAD>
<TITLE>Exemple d'un fonction</TITLE>
 
<SCRIPT TYPE="TEXT/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="S4.11.html">S4.11.html</A>
</BODY>
</HTML>



Ouverture d'un fenêtre

Exemple S4.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 TYPE="TEXT/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>


Verification d'un mot de passe

JavaScript peut être utilisé pour le calcul ou la vérification d'information pendant la saisie avec une formulaire.

Exemple S4.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

En lieu d'exiger que l'utilisateur tape "submit", on peut permettre la dépacement par menu.

Exemple S4.11.html


</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="S4.1.html"
>S4.1.html
<OPTION VALUE="S4.2.html"
>S4.2.html
<OPTION VALUE="S4.3.html"
>S4.3.html
<OPTION VALUE="S4.4.html"
>S4.4.html
<OPTION VALUE="S4.5.html"
>S4.5.html
<OPTION VALUE="S4.6.html"
>S4.6.html
<OPTION VALUE="S4.7.html"
>S4.7.html
<OPTION VALUE="S4.8.html"
>S4.8.html
<OPTION VALUE="S4.9.html"
>S4.9.html
<OPTION VALUE="S4.10.html"
>S4.10.html
</SELECT>
</FORM>
</BODY>
</HTML>