INCORPORER DU JAVASCIRPT


Javascript est un langage de scripts, qui, incorporé aux balises Html, permet d'agrémenter la présentation et l'interactivité des pages Web.
 

Javascript est donc une extension du code Html des pages Web. Les scripts, qui s'ajoutent ici aux balises Html, peuvent en quelque sorte être comparés aux macros d'un traitement de texte.
 

Ces scripts vont être gérés et exécutés par le browser lui même sans devoir faire appel aux ressources du serveur. Ces instructions seront donc traitées en direct et surtout sans retard par le navigateur.
 

Il est important de savoir que Javascript est totalement différent de Java. Bien que les deux soient utilisés pour créer des pages Web évoluées, bien que les deux reprennent le terme Java, nous avons là deux outils informatiques bien différents.


La programmation en Javascript.

Nous n'allons pas étudier en détail le Javascript, nous incorporerons simplement quelques petits programmes qui permettront de modifier l'apparence d'un bouton lorsque le pointeur de la souris passera dessus ou d'afficher un message dans la barre d'état ou encore d'accéder à une autre page grâce à un mot de passe.

Le programme suivant est visible dans la fenêtre Menu. Il alterne mes boutons quand vous passez votre souris dessus.


Animer des boutons.
 
Dans le menu Affichage, sélectionner l'option HTML Dans le menu Tools, sélectionnerl'option Show HTML
Instruction Descriptif
<SCRIPT language="Javascript"> 
Premier = new Image(30,30); 
Premier.src = "java.GIF"; 
Deuxieme = new Image(30,30); 
Deuxieme.src ="java2.GIF";</SCRIPT> 
<A HREF="Admi.html" ONMOUSEOVER="Bouton.src=Deuxieme.src" ONMOUSEOUT="Bouton.src=Premier.src"> 
<IMG SRC="java.GIF" WIDTH="30" HEIGHT="30" NAME="Bouton"></A> 
Indication d'un prog Jscript 
Déclaration bouton 
Indique l'image 1 
Déclaration bouton 2 
Indique l'image 2 

Lien hypertexte 
Si la souris passe sur bouton afficher le 2 et si la souris quitte le bouton afficher le 1 
Affiche image d'origine avec sa taille et donne un nom au bouton affiché 

Dans le menu Insérer sélectionner Etiquette HTML, puis saisir 
<script language="Javascript"> 

Saisir le programme suivant dans la page 
un = new Image (30,30);un.src = "web.gif";deux = new Image(30,30);deux.src = "web2.gif"; 

Dans le menu Insérer sélectionner Etiquette HTML, puis saisir 
<A href="aaaa.htm" onmouseover="Bouton.src =deux.src" onmouseout= "Bouton.src=un.src"> 

Sélectionner l'image comportant le lien, puis cliquer sur Lien, cliquer sur l'onglet Image, puis sur HTML supplémentaire saisir name="Bouton", puis OK 

Dans le menu Insérer sélectionner Etiquette HTML, puis saisir </A>


Afficher un commentaire dans la barre d'état.

La barre d'état est située tout en bas de l'écran. Quand le pointeur de la souris passe sur un lien hypertexte, la barre d'état affiche un commentaire, généralement l'adresse du lien. Vous pouvez remplacer l'affichage du lien par du texte afin d'expliquer plus clairement, au visiteur, le contenu de ce lien.

<SCRIPT language="Javascript"> </SCRIPT>
<A HREF="pageweb.htm" OnMouserOver="self.status='Mon message';return true">

Remarque :
Il faut utiliser deux sortes de guillemets afin que le browser ne nous retourne pas un message d'erreur. Le texte à afficher devra se situer entre '', tandis que la syntaxe Javascript se situera entre les "".


Utiliser une zone de liste avec renvoi automatique vers une ancre/une page du site.

Vous pouvez insérer une zone de liste dans votre page web, afin de demander au visiteur de choisir une option dans votre site. Une fois que cette option est choisie l'affichage se fait automatiquement. Prenons un exemple concret. Le menu du haut de la page vous permet d'accéder directement au programme JavaScript qui vous intéresse, cela vous évite de faire défiler l'écran. Un positionnement d'ancre permet ce résultat. Le visiteur est dirigé dans la même page ; mais une liste peut également vous envoyez vers une autre page du site, il suffit pour cela de remplacer l'ancre par l'URL de la page.

<FORM>
<CENTER>
<TABLE BORDER CELLSPACING=0 >
<TR>
<TD COLSPAN="2" BGCOLOR="#FFFFFF"><BR>
<SELECT name="chooseFile" size="1" onchange="sendIt(this.options[selectedIndex].value)">
<OPTION selected value>Menu
<OPTION value="#a">Programmation
<OPTION value="#a2">Animer un bouton
<OPTION value="#a3">Texte barre d'état
<OPTION value="#a4">Zone de liste menu
<OPTION value="#a5">Mot de passe
</SELECT>
<SCRIPT language="JavaScript"><!--function sendIt(fileName)
{
//If the selected file name isn't blank, send it to reader.
if (fileName != "")
{
location.href=fileName
}
}
// --></SCRIPT>
</TD>
</TR>
</TABLE>
</CENTER>
</FORM>


Accéder à une autre page par un mot de passe.

Attention il est bon de savoir que la méthode utilisée n'est pas inviolable. En effet une expérience du net peut permettre à certains de passer outre le mot de passe.

Pour povoir réaliser cela il va falloir créer trois fichiers.
Le premier fichier sera tout simplement la page contenant la zone de saisie du mot de passe. Pour cela il faut utiliser la technique du formulaire.
Le second fichier sera la page qui sera affichée uniquement si le mot de passe est valide.
Le troisième est un fichier contenant le programme en JavaScirpt qui va tester le mot de passe saisie et voir si il est valide ou non et donnera donc l'accès.
Afin de vous faciliter le travail, télécharger l'exemple. Vous avez ainsi tout sous la main. Pour pourvoir le lire il faut le décompresser avec Winzip. Si vous ne l'avez pas no panique Winzip est téléchargeable gratuitement dans mon site (voir partie téléchargement).
Voir l'exemple
Télécharger l'exemple. ici en cas d'échec