Gilbert1.png

JavaScript, le langage des animations

Pour ajouter vous-même quelques animations à votre site web

Vous n'avez besoin d'aucun logiciel payant pour animer votre site
Dans ces pages vous apprendrez à manier le code JavaScript, le langage des animations de votre site web, disponible gratuitement...

Mon site web étape par étape

Du JavaScript pour animer mon site

BoutonPrecedent BoutonSommaire BoutonSuite Cette page s'affiche mal ? - cliquez ici   

Dans ces pages vous apprendrez à manier le code JavaScript, le langage des animations de votre site web, disponible gratuitement...

Si des erreurs se sont glissées dans le texte n'hésitez pas à me contacter...
Les liens ci-dessous vous renverront au chapitre correspondant.


ÉTAPE 9 : Animer mon site avec du JavaScript

9.1 Introduction au JavaScript

      9.1.1 Outils de développement
      9.1.2 Le bloc Javascript et la balise <script>
      9.1.3 Détecter la désactivation du Javascript balise <noscript>
      9.1.4 JavaScript avant ou après l'affichage de la page HTML
      9.1.5 Du Javascript en fichier externe

9.2 Les bases du JavaScript

      9.2.1 Variables (var)
      9.2.2 Type d’une variable
      9.2.3 Opérateurs
      9.2.4 Fonctions (ou méthodes)
      9.2.5 Objets (ou modules)
      9.2.6 Classes (ou familles) d’objets
      9.2.7 Tests if…else
      9.2.8 Switch et Cas possibles
      9.2.9 Boucles

9.3 Les objets prédéfinis (ou intégrés) de javascript

      9.3.1 Chaînes de caractères : l’objet (ou classe) String
      9.3.2 Tableaux : l’objet (ou classe) Array
      9.3.3 Chercher, remplacer : l’objet RegExp (Regular Expression)
      9.3.4 Nombres : l’objet Number
      9.3.5 Fonctions mathématiques : l’objet Math
      9.3.6 Date et heure : l’objet (ou classe) Date

9.4 Les évènements

      9.4.1 Déclencher du Javascript sur le clic d'un lien hypertexte
      9.4.2 Exécuter du Javascript sur le clic d'un bouton (onClick)
      9.4.3 Les événements double-clic (ondblclick), change (onMouseDown/Up)
      9.4.4 Prise de focus (onFocus) et perte de focus (onBlur)
      9.4.5 Déplacement de souris "rollover"
      9.4.6 Evènements de page (onLoad, onUnLoad)
      9.4.7 Tableau des événements qui peuvent exécuter du JavaScript
      9.4.8 Ecouteur d’évènement (objet event)

9.5 Créer du code avec du Javascript

      9.5.1 Créer du code HTML avec du Javascript
      9.5.2 Créer du code Javascript avec ... du Javascript !

9.6 Les fenêtres popup

      9.6.1 La méthode (ou fonction) open
      9.6.2 Fermer une fenêtre popup
      9.6.3 Afficher une image quand on clique dessus
      9.6.4 Ouvrir et fermer une fenêtre sur une autre page HTML

9.7 Couches et calques

      9.7.1 Calques et css
      9.7.2 Manipuler des calques
      9.7.3 Cacher et montrer un calque texte
      9.7.4 Agrandir et réduire une image
      9.7.5 Déplacer un calque (texte ou image)
      9.7.6 Images en couches

9.8 Zoom sur image

      9.8.1 Effet de zoom sur une image au passage de la souris
      9.8.2 Effet de zoom sur plusieurs images au passage de la souris
      9.8.3 Album Photo - Générateur de Script
      9.8.4 Visionneuse d'Album Photo

9.9 Du Javascript dans les formulaires

9.10 AJAX – Charger des données depuis le serveur du site

9.11 Menu déroulant au passage de la souris

      9.11.1 Menu avec contenu déroulant dans un array
      9.11.2 Menu avec une boîte de recherche ou un double menu déroulant
      9.11.3 Contenu déroulant défini dans un fichier externe (Ajax)

9.12 Diaporama d'images

      9.12.1 Visionneuse d'images, manuelle
      9.12.2 Visionneuse d'images, automatique

9.13 Cadres clignotants et texte qui défile

9.14 Intercepter les erreurs

9.15 Glossaire – syntaxe et instructions JavaScript - Sources sur internet



ÉTAPE 9 : Animer mon site avec du JavaScript

9.1 Introduction au JavaScript


Initialement créé par Netscape en 1995 sous le nom de LiveScript, le Javascript est un langage de développement utilisé en complément des pages HTML. Il permet de créer des animations graphiques, de faire des calculs, de traiter des chaînes de caractères, d’améliorer les formulaires, et bien d’autres choses encore.

Il permet de manipuler les éléments des pages HTML, un peu comme le PHP, mais il est interprété et exécuté dans la mémoire du navigateur et pas au niveau du serveur. Il n’accède pas au disque dur local mais il peut accéder au serveur du site (le même domaine d’où vient la page) pour y récupérer des informations, au moyen d’une connexion de type AJAX(*). Contrairement au vbscript, il ne peut pas générer de virus.

(*) AJAX (Asynchrone JAvascript et Xml) est une technologie Javascript qui permet de charger des données qui se trouvent sur le serveur au format Xml, texte, Html ou autres.


       9.1.1 Outils de développement


Pour développer en JavaScript vous avez besoin :

- des sources internet mentionnés en référence à la fin de ce document (§ Sources sur internet) où vous trouverez du code tout fait pour différentes animations, mais attention, le plus souvent ce code fonctionne probablement sur le navigateur de l’auteur mais pas forcément sur tous les navigateurs…

- de plusieurs navigateurs pour vos tests : FireFox, MS-Internet Explorer, Netscape, Opera, Safari (de Mac), etc. En effet il y en a environ 300 autres pour lesquels votre code ne sera pas forcément compatible. Mais en fait, en gros il y a deux cas, Internet Explorer et les autres. IE est le seul à ne pas respecter la norme internationale.

- de FireBug : c’est un module pour FireFox que vous pouvez récupérer comme ceci : Ouvrir FireFox, Chercher FireBug dans la fenêtre Google. Cliquez sur installer, redémarrer FireFox et activez FireBug (décochez disable FireBug) puis dans FireFox :
Outils / FireBug / Open FireBug
Outils / Console d’erreurs
...vous donne les onglets : Console, HTML, CSS, Script (où vous pouvez mettre des points d’arrêt), DOM, Net.

- d’un outil de composition tel que KompoZer (un logiciel open source de la communauté Mozilla) ou comme DreamWeaver de Adobe, etc.

- de Notepad++, un petit éditeur bien pratique car il reconnaît à peu près tous les langages et colorie automatiquement le XHTML et le CSS ;

- de La Boîte à couleurs : un logiciel gratuit écrit pour Windows par Benjamin Chartier bien utile pour travailler sur les couleurs en CSS. Ce "gratuiciel" simple d'emploi vous permet d'obtenir et de modifier très simplement les codes d'une couleur.

BoutonHautDePage

       9.1.2 Le bloc Javascript et la balise <script>


La manière la plus simple et la plus directe pour intégrer du Javascript au code source d'une page HTML est d'utiliser la balise <script>. Il s’insère souvent entre les balises <body> et </body>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Document sans nom</title>
</head>
<body>
	<script language="javascript" type="text/javascript">
	<!--
	Votre code Javascript ici
	//-->
	</script>
</body>
</html>


Jusqu'au HTML 4.0, la balise <script> prend comme attribut
language="javascript".
      <script language="javascript">

A partir du HTML 4.0 l'attribut language="javascript" est remplacé par l'attribut
type="text/javascript". Maintenant, seul l'attribut type="text/javascript" est nécessaire.
      <script type="text/javascript">

C'est pourquoi on voit souvent les deux, c'est à dire
      <script language="javascript" type="text/javascript">

Les commentaires sur plusieurs lignes ( /* */ )
Les commentaires sur plusieurs lignes commencent par /* et s'achévent par */. Tout ce qui est placé entre ces deux élements est ignoré :
      /* commentaire ligne 1
      commentaire ligne 2
      commentaire ligne 3 */


Les commentaires sur une ligne ( // )
Les commentaires sur une ligne sont souvent utilisés pour écrire des annotations en fin de ligne. Ils commencent par //. Tout ce qui suit ce double slash sera ignoré :
      // Ceci est un commentaire et je peux écrire ce que je veux
      alert('Bonjour');// Ceci est un message d'alerte qui dit bonjour

Chaque instruction javascript se termine par un “;” (un point-virgule) c’est le séparateur d’instructions. JavaScript est "case sensitive", c'est à dire sensible aux minuscules et aux majuscules.

Protéger le code Javascript
Les balises <!-- et //--> :
En HTML les balises <!-- et --> marquent le début et la fin d’un commentaire. Si certains anciens navigateurs ne reconnaissent pas le Javascript, ces balises leur indiquent que rien dans le contenu du bloc ne correspond à des balises HTML.
La balise de fin s’écrit //-->. Elle ne gêne pas le Javascript car // identifie un commentaire.

En mode XHTML (Xml + Html) ou si on fait de l’AJAX, on a intérêt à protéger systématiquement le code javascript en l’encadrant par des balises <![CDATA[ ... et ... ]]>.
Cette notation est une syntaxe XML. Elle indique au programme qui analyse le fichier XML de ne pas analyser ce qu'il y a entre le <![CDATA[ et le ]]>. Attention : cela ne veut pas dire que le programme doit ignorer le contenu de la section. L'analyseur de syntaxe va seulement le récupérer, sans chercher à repérer des balises, des entités ou toute autre syntaxe spécifique au XML.

Finalement si on fait de l’AJAX, voici le code complet avec un petit bloc Javascript :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Document sans nom</title>
</head>
<body>
	<script language="javascript" type="text/javascript">
	<!--//--><![CDATA[//> <!--
	document.write("Je fais du Javascript");
	//--><!]]>
	</script>
</body>
</html>


Ce code écrit (write) "Je fais du Javascript" dans la page Html (document).

BoutonHautDePage

       9.1.3 Détecter la désactivation du Javascript - balise <noscript>


Si l'utilisateur a décidé de désactiver l'exécution du Javascript dans les préférences de son navigateur internet, aucune des balises <script> présentes dans le code source de la page HTML ne seront interprétées.

Il est possible de détecter la désactivation du Javascript avec la balise <noscript>.

<noscript>Votre navigateur ne lit pas le Javascript, veuillez l'activer pour une utilisation optimale du site</noscript>


       9.1.4 JavaScript avant ou après l'affichage de la page HTML


Si du code Javascript est inséré dans la section <head> d'une page HTML, il sera exécuté avant l'affichage de la page HTML :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title> Exécuter du code JavaScript avant l'affichage de la page HTML</title>
	<script language="javascript" type="text/javascript">
	<!--
	alert("J'apparais avant l'affichage de la page HTML"); // ceci est la ligne 8
	//-->
	</script>
</head>
<body>
<h1>Titre de la page</h1>
<p>Un texte dans la page.</p>
	<script language="javascript" type="text/javascript">
	<!--
	alert("J'apparais après l'affichage de la page HTML");
	//-->
	</script>
</body>
</html> 

Ce code envoie une boîte-message (alert) "J'apparais avant l'affichage de la page HTML" avant l’ouverture de la page Html puis un deuxième message (alert) "J'apparais après l'affichage de la page HTML" dès que la page est chargée.

Attention toutefois, un code Javascript placé dans la section <head> d'une page HTML ne peut pas manipuler des éléments HTML qui ne sont pas encore affichés :

Par exemple, si dans la section <body> du document se trouve la balise <img> suivante (image's SouRCe (src)) :
<img name="image1" src="img.gif" width="100" height="100" border="0" />
... et si le code Javascript suivant est placé dans la section <head> :
      alert(document.images["image1"].width);

... une erreur Javascript apparaît, avant l'affichage de la page, signalant que document.images["image1"] n'est pas un objet.
      Error: document.images.image1 has no properties
      Source File: http://localhost/test.html
      Line: 8


Cette erreur vient du fait que lorsque le code Javascript est exécuté, l'image qui porte le nom image1 n'est pas encore affichée. Pour que le code fonctionne correctement, il aurait fallu l'insérer après la balise <img> qui comporte l'attribut name="image1".

BoutonHautDePage

       9.1.5 Partager du Javascript en fichier externe


L'attribut src (SouRCe) vous permet d'inclure dans une page HTML du code Javascript se trouvant dans un fichier texte externe ayant l'extension *.js. Ceci permet de partager du code Javascript entre plusieurs pages HTML en se référant à ce même fichier *.js.

Par exemple, si le fichier alerte.js contient :
      alert(document.images["image1"].width);

Je peux l'inclure dans une page HTML de la manière suivante :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title> Inclure du code Javascript qui se trouve dans un fichier externe</title>
</head>
<body>
<h1>Titre de la page</h1>
<p>Un texte dans la page.</p>
<p>Une image : <img name="image1" src="img.gif" width="100" height="100" border="0" /></p>
	<script language="javascript" type="text/javascript" src="alerte.js"></script>
</body>
</html> 

BoutonHautDePage


9.2 Les bases du JavaScript

       9.2.1 Variables (var)


• Elles sont au format entier (45), réel (3.1416), chaînes de caractères entre guillemets (”Alain”) ou booléen (true, false). Une variable se déclare avec var suivi de son nom et de sa valeur comme ceci :
      var name; // déclaration de la variable name
      name=”Alain”; // affectation de la valeur ”Alain” à la variable name
      var age=45; // déclaration de la variable age et affectation de la valeur 45 dans la foulée
      age=age + 1;
      document.write(name + " Vous avez " + age + " ans");


Ce code (document.write) écrit dans la page Html "Alain Vous avez 46 ans".


• Suivant leur emplacement, les variables sont …
- soit globales, déclarées après la balise <script>, à l'extérieur des fonctions, elles sont accessibles à toutes les fonctions d'un script ;
- soit locales, déclarées dans un bloc délimité par des accolades, à l'intérieur de la fonction qui l’utilise.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Variables</title>
</head>
<body>
<h1>Titre de la page</h1>
<p>Variables globales et locales</p>
	<script language="javascript" type="text/javascript">
	<!--
	var v1=3 + 2 ; 
	// ceci est une variable globale, elle peut être utilisée par toutes les fonctions de ce code
	document.write("v1=" + v1+ "<br/>");
	function ecrire() // ceci est une fonction, nous en reparlerons plus loin
	{
	var f1=3.14 + 5.75 ; 
	// ceci est une variable locale, elle ne peut être utilisée que par la fonction ecrire
	document.write("f1=" + f1+ "<br/>");
	var ch1="Oiseau-" + "Lyre"; // ceci est aussi une variable locale
	document.write("ch1=" + ch1+ "<br/>");
	}
	//-->
	</script>
</body>
</html> 
BoutonHautDePage

       9.2.2 Type d’une variable
Exemples Nom du type Description
  var mavariable;   undefined   Variable indéfinie
  var mavariable=true;
  var mavariable2=false;
  boolean   Variable logique. 2 états possibles true ou false
  var variable=666;   number   Variable numérique
  var variable="Alain Roux";   string   Variable chaîne de caractères
  var variable=function(){};   function   Fonction
  var variable={};   object   Objet


On peut aussi "forcer" le typage d’une variable en utilisant l’écriture générale ci-dessous :

Exemples Nom classe Description
  var x=new Number(46);   Number   On rattache x à la classe Number
  var nom=new String("Roux");   String   On rattache nom à la classe String
  var hier=new Date();   Date   On rattache hier à la classe Date
  var voiture=new Object();   Object   On crée voiture qui est un Objet
  var tableau1=new Array();   Array   On crée tableau1 qui est un Array


Ceci permet de créer des classes au fil de l’eau. Les classes qui commencent par une majuscule sont des classes système de Javascript.



L’opérateur typeof renvoie une chaîne de caractères contenant le type de la variable. Par exemple, si l’on définit :


	var varboolean=true;
	var x=666;
	var nom="Alain";
	var varfunction=function(){};
	var voiture={};

typeof renvoie le type de la variable :
document.write("<b>varboolean</b> est du type " + typeof varboolean); document.write("<b>x</b> est du type " + typeof x); document.write("<b>varstring</b> est du type " + typeof varstring); document.write("<b>varfunction</b> est du type " + typeof varfunction); document.write("<b>voiture</b> est du type " + typeof voiture);
BoutonHautDePage

       9.2.3 Opérateurs


Opérateurs arithmétiques

Opérateur Exemple Résultat Fonction
+   document.write(5 + 5);   10   Addition
-   document.write(25 - 10);   15   Soustraction
*   document.write(5 * 5);   25   Multiplication
/   document.write(63 / 7);   9   Division
%   document.write(20 % 3);   2   Modulo (reste d'une division)
Opérateur Exemple Equivalent à Fonction
=   a = b;   a = b;   assignation
+=   a += b;   a = a + b;   assignation
-=   a -= b;   a = a - b;   assignation
*=   a *= b;   a = a * b;   assignation
/=   a /= b;   a = a / b;   assignation
%=   a %= b;   a = a % b;   assignation
++   x++;   x = x + 1;
  x += 1;
  post-incrémentation
--   x--;   x = x - 1;
  x -= 1;
  post-décrémentation


Exemple de pré- ou de post-incrémentation :


	var a=5;
	var b=5;
	/*  a et b ont tout les deux pour valeur 5  */
	document.writeln("<pre>");
	document.writeln("a++ = " + a++); // Sortie -> a++ = 5
	document.writeln("++b = " + ++b); // Sortie -> ++b = 6
	document.writeln("</pre>");


Dans le 1er cas, la variable est incrémentée après avoir renvoyé sa valeur ;
Dans le 2ème, la variable est incrémentée avant d'avoir renvoyé sa valeur.


Opérateurs relationnels

Ils permettent de comparer des nombres, des chaînes de caractères ou des types de variables :

Opérateur Exemple Résultat Fonction
= =   var a=25;
  var b="25";
  document.write(a==b);
  true   Egalité
= = =   var a=25;
  var b="25";
  document.write(a===b);
  false   Identité
!=   var a=120;
  var b=350;
  document.write(a != b);
  true   Inégalité
!= =   var a=25;
  var a="25";
  document.write(a !== b);
  true   Non-identité
<   var a=10;
  var b=100;
  document.write(a < b);
  true   Inférieur
<=   var a=100;
  var b=100;
  document.write(a <= b);
  true   Inférieur ou égal
>   var a=100;
  var b=10;
  document.write(a > b);
  true   Supérieur
>=   var a=100;
  var b=100;
  document.write(a >= b);
  true   Supérieur ou égal


Opérateurs logiques

Les opérateurs logiques s’utilisent surtout avec les variables booléennes. Une variable booléenne ne peut prendre que 2 états : true (allumé) ou false (éteint), true est l'inverse de false.

Il existe 3 opérateurs logiques : le non ‘!’, le et ‘&&’ et le ou ‘||’.

Opérateur Exemple Résultat Fonction
!   var variable=true;
  document.write(!variable);
  false   Le ‘non’ effectue une inversion
||   document.write(false || false);   false   Le ‘ou’ logique
||   document.write(false || true);   true   Le ‘ou’ logique
||   document.write(true || true);   true   Le ‘ou’ logique
&&   document.write(false && false);   false   Le ‘et’ logique
&&   document.write(false && true);   false   Le ‘et’ logique
&&   document.write(true && true);   true   Le ‘et’ logique


Opérateurs binaires

Ils permettent de travailler sur les bits d’un nombre.

Opérateur Exemple Résultat Fonction
~   var nombre=3;
  nombre = ~ nombre;
  document.write(nombre);
  -4   Le non ~ effectue le complément à
  deux d'un nombre
|   var a=2;// 2 = 10 en binaire
  var b=1;// 1 = 01 en binaire
  var resultat=a | b;
  document.write(resultat);
  resultat=a | b;
  1 | 0 = 1
  0 | 1 = 1
  resultat = 11
  Sortie = 3
  Le ou | effectue un ou (!) entre
  chaque bit des deux opérandes
&   var a=255;
  // 255 = 11111111
  var b=170;
  // 170 = 10101010
  var resultat=a & b;
  // resultat = 10101010 = 170
  document.write(resultat);
  //1 & 1 = 1
  //1 & 0 = 0
  //1 & 1 = 1
  //1 & 0 = 0
  //1 & 1 = 1
  //1 & 0 = 0
  //1 & 1 = 1
  //1 & 0 = 0
  Sortie = 170
  Le et & effectue un et entre chaque
  bit des deux opérandes
^   var a=255;
  // 255 -> 11111111
  var resultat = a ^ a;
  // resultat = 00000000 = 0
  document.write(resultat);
  //1 ^ 1 = 0
  //1 ^ 1 = 0
  //1 ^ 1 = 0
  //1 ^ 1 = 0
  //1 ^ 1 = 0
  //1 ^ 1 = 0
  //1 ^ 1 = 0
  //1 ^ 1 = 0
  Sortie = 0
  Le ou exclusif ^ effectue un ou
  exclusif entre les bits des deux
  opérandes
<<   var a=3; // 3 = 11 en binaire
  a = a << 4;
  // 11 - > 110000 = 48
  document.write(a);
  On décale a
  de 4 bits vers
  la gauche
  Sortie = 48
  décaler les bits vers la gauche
>>   a = a >> 8;
  // 110000 -> 0
  document.write(a);
  On décale a
  de 8 bits vers
  la droite
  Sortie = 0
  décaler les bits vers la droite


À noter que comme pour les opérateurs d'affectation énoncés ci-dessus, ces deux opérateurs peuvent dans certains cas être résumés ainsi :

Opérateur Exemple Résultat Fonction
<<=   var a=3;
  a <<= 4;
  document.write(a);
  a = a
  << 4;
  décaler les bits vers la gauche
>>=   a >>= 8;
  document.write(a);
  a = a
  >> 8;
  décaler les bits vers la droite
BoutonHautDePage

       9.2.4 Fonctions (ou méthodes)


Déclaration et appel d’une fonction


	function bonjour(argument1, argument2) // Déclaration de la fonction ‘bonjour’
	{
	// [Une ou plusieurs actions];
	}
	bonjour(argument1, argument2); // Appel de la fonction ‘bonjour’ par son nom


Appel d’une fonction dans un lien HTML

<a href=" javascript:bonjour() "> appel </a>

Nous nous en servirons beaucoup pour gérer les évènements.


Fonction sans arguments

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Fonctions</title>
</head>
<body>
<h1>fonction sans arguments</h1>
	<script language="javascript" type="text/javascript">
	<!--
	function bonjour()
	{
	document.write("Bonjour à vous!<br>");
	document.write("Comment allez-vous aujourd'hui ?<br>");
	}
	//-->
	</script>
</body>
</html> 


Fonction avec arguments

<body>
<h1>fonction avec arguments</h1>
	<script language="javascript" type="text/javascript">
	<!--
	function bonjour(nom, temps)
	{
	document.write("Bonjour " + nom + "!<br>");
	document.write("Voici le temps : " + temps  + "<br>");
	}

	bonjour("Alain", "Beau soleil");
	bonjour("Pierre", "Maussade");}
	//-->
	</script>
</body>


Nombre dynamique d’arguments

Les fonctions ont accès à un tableau nommé ‘arguments’, où sont répertoriés tous les arguments qui lui sont passés.

<body>
<h1>fonction avec arguments dynamiques</h1>
	<script language="javascript" type="text/javascript">
	<!--
	function dynarguments() // On ne précise pas d'arguments ici...
	{
	// on scrute le tableau des arguments passés à la fonction
	for(var i=0; i < arguments.length; i++) 
	{
	document.write("Argument N°" + i + " " + arguments[i] + "<br>");
	// arguments[i] contient tous les arguments passés à la fonction 
	}
	}
	// On précise tous les arguments ici à postériori
	dynarguments("Un argument", "2 arguments", "3 arguments");
	//-->
	</script>
</body>


Retour d’une valeur calculée par la fonction (return)

Une fonction peut effectuer un calcul et retourner une valeur résultat. L’instruction return suivie de la valeur à retourner se place à la fin de la fonction (car dès qu’il l’a rencontré, l'interpréteur quitte la fonction).

Exemple :

<body>
<h1>Retour d’une valeur calculée par la fonction</h1>
	<script language="javascript" type="text/javascript">
	<!--
	function volume(longueur, largeur, hauteur)
	{
	return longueur * largeur * hauteur;
	}
	document.write("Le volume d'une boite de 10x15x20 est de " + volume(10, 15, 20));
	//-->
	</script>
</body>


Placer le résultat d’une fonction dans une variable

Exemple :

<body>
<h1>Placer le résultat d’une fonction dans une variable</h1>
	<script language="javascript" type="text/javascript">
	<!--
	function volume(longueur, largeur, hauteur)
	{
	return longueur * largeur * hauteur;
	}
	var MonVolume = volume;
	document.write("Le volume d'une boite de 10x15x20 est de " + MonVolume(10, 15, 20));
	//-->
	</script>
</body>


Construire une variable à l’aide d’une fonction

Exemple :

<body>
<h1>Construire une variable avec une fonction</h1>
	<script language="javascript" type="text/javascript">
	<!--
	var doubleligne=function()
	{
	document.write("Re-bonjour, les amis!<br>");
	document.write("Je construis une variable avec une fonction ");
	}
	doubleligne();
	//-->
	</script>
</body>


Le constructeur Function

Une dernière possibilité est d'utiliser l’objet constructeur Function (avec un F majuscule). Après Function, entre parenthèses, on place d’abord les arguments séparés par des virgules. Puis en dernier, on met les instructions à exécuter.

Exemple :

<body>
<h1>Construire une variable avec l’objet constructeur Function</h1>
	<script language="javascript" type="text/javascript">
	<!--
	var Bonjour=new Function("nom", "document.write('Hello, ' + nom + '! Tu vas bien ?')");
	Bonjour("Paul");
	//-->
	</script>
</body>


Ici on passe en argument nom="Paul", puis on exécute l’instruction document.write('Hello, ' + nom + '! Tu vas bien ?')
qui écrit dans la page HTML ‘Hello, Paul ! Tu vas bien ?

BoutonHautDePage

       9.2.5 Objets (ou modules)


En programmation dite classique, on passe les données (variables) à des fonctions (ou procédures) qui vont les traiter. En programmation orientée objet, il est toujours possible de faire de la programmation classique, c'est à dire en passant des variables à des fonctions. Mais on crée aussi des objets, c’est à dire des modèles informatiques ou modules qui ont leur identité propre.

Un objet (modèle ou module) contient des attributs (ou données) qui caractérisent son état (rouge, bleu, etc.) et des méthodes (ou fonctions) qui caractérisent ses réactions (ou messages).

En réalité les objets Javascript sont des tableaux associatifs qui associent des valeurs à des propriétés.



Déclaration d’un objet

      var indentificateur = new constructeur(argument1, argument2, ...);

L'identificateur pour être valide, suit les mêmes règles que les noms de variables. Le constructeur doit être une fonction ou ‘constructeur’ valide. Viennent ensuite les arguments s’il y en a.

Exemple :

<body>
<h1>L’objet javascript</h1>
	<script language="javascript" type="text/javascript">
	<!--
	var car=new Object(); 
	// Object avec un O majuscule est un ‘constructeur’ javascript valide
	car.model("Austin");
	//-->
	</script>
</body>


Conteneurs - Hiérarchie des objets

Object() est très utilisé pour créer un conteneur évolutif selon le programme. Un conteneur est un objet qui en contient d’autres : exemple, les tableaux, les listes, etc.

Pour accéder au document et modifier son apparence, JavaScript utilise deux objets, imbriqués les uns dans les autres comme ceci :

      • window (la fenêtre)
      • document (le document :-)

L'objet window est l'objet le plus à l'exterieur de la page Web. C'est la "coquille".
Comme tout objet, il contient plusieurs méthodes (ou fonctions), propriétés et objets (c’est un conteneur). Par exemple, la méthode alert(), bien connue des débutants. alert() affiche une boite de dialogue avec un texte paramétrable.

Pour accéder aux propriétés d'un objet, on écrit le nom de l’objet, suvi d'un point, puis le nom de cette propriété. Pour utiliser la méthode alert(), nous écrivons donc :

<body>
<h1>L’objet window</h1>
	<script language="javascript" type="text/javascript">
	<!--
	window.alert("Hello! J'apprends le JavaScript!");
	//-->
	</script>
</body>


Une méthode peut avoir des arguments (ou des paramètres). Ici, l'agument en question est la chaîne de caractères "Hello! J'apprends le JavaScript!".
La méthode alert() affiche cette chaîne de caractères dans la boite de dialogue.

Comme l'objet window se trouve au sommet de la hierarchie, il est implicite. On peut donc se dispenser de préciser "window." pour invoquer ses méthodes.

<body>
<h1>L’objet window</h1>
	<script language="javascript" type="text/javascript">
	<!--
	alert("Hello! J'apprends le JavaScript!");
	//-->
	</script>
</body>


L'objet document appartient à l'objet window (on dit alors que window est le parent de document et que document est l'enfant de window). On peut y accéder de cette façon :

      window.document

ou tout simplement :

      document

puisque window est implicite.

La méthode (ou fonction) write() de l'objet document, document.write() est très commune. Cette méthode permet d'écrire du texte dans le document c’est à dire dans la fenêtre du navigateur.

<body>
<h1>L’objet document</h1>
	<script language="javascript" type="text/javascript">
	<!--
	document.write("<h2 align=center>Ceci est un titre écrit grace à un Script</h2>");
	//-->
	</script>
</body>


Ce script écrit un titre de niveau 2 (<h2>) dans le document.

BoutonHautDePage

       9.2.6 Classes (ou familles) d’objets


Une classe est une sorte de famille à laquelle sont reliés des objets ayant la même structure et le même comportement. Elle contient des attributs (ou données) qui décrivent la structure des objets qui lui appartiennent, et des méthodes (ou fonctions) qui décrivent leur comportement. Une classe peut être considérée comme une fonction constructrice ("constructeur").

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Classes d’objets</title>
	<script language="javascript" type="text/javascript">
	<!--
	function car (model, year) 
	// car est une classe, une classe se définit comme une fonction 
	// on l’appelle souvent fonction "constructrice"
	{
	this.model=model; 
	// this indique que model est une variable liée à la classe car
	this.year= year; 
	}
	/* ensuite, après l’accolade, on peut définir autant d’objets voitures que l’on veut lier à la classe car. 
	Elles auront toutes un modèle et une année */
	car1=new car(“Austin”,1960)
	car2=new car(“Ariane”,1957)
	// etc.
	//-->
	</script>
</head>
<body>
</body>
</html> 


Héritage (prototype)

Pour lier une propriété (ou objet) à une classe on utilise l’instruction prototype. Chaque classe ou "constructeur" possède au moins un objet (ou propriété) prototype. Toutes les propriétés définies sur prototype sont transmises en héritage aux objets créés avec la fonction constructrice. Ceci permet de mettre des méthodes (ou fonctions) à la disposition des objets d’une classe.

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Classes d’objets - Héritage</title>
	<script language="javascript" type="text/javascript">
	<!--
	function car (model, year) // la classe car (ou fonction "constructrice")
	{
	this.model=model; // this => model est une variable liée à la classe car
	this.year= year; // this => year est une variable liée à la classe car
	}
	car1=new car(“Austin”,1960) // objet car1 lié à la classe car
	car2=new car(“Ariane”,1957) // objet car2 lié à la classe car
	car.prototype.deplacer=function() 
	{
	// et ici on associe la fonction deplacer à la classe car
	}
	//-->
	</script>
</head>
<body>
</body>


Classe dynamique

On peut aussi créer la classe car dynamiquement de la façon suivante :

<body>
	<script language="javascript" type="text/javascript">
	<!--
	var car=new Object(); // la classe car (ou fonction "constructrice")
	car.model="Austin"; // model est une variable liée à la classe car
	car.deplacer=function() {…} // deplacer est une fonction liée à la classe car
	//-->
	</script>
</body>


Notes :
1- Objet, instance, occurrence sont des synonymes.
2- On peut cacher le fonctionnement interne d’un objet ou son contenu pour le protéger : on dit alors qu’il est encapsulé.
3- Il existe des objets prédéfinis dans Javascript

Exemples, l’objet Date() ou l’objet Object() sont des objets ‘constructeurs’ javascript prédéfinis. Ils commencent toujours par une majuscule :

      var date_jour=new Date();
      var car=new Object();

BoutonHautDePage

       9.2.7 Tests if…else


Ecriture générale

	<script language="javascript" type="text/javascript">
	<!--
	var age=18;
	if(age>=18)
	{
	// bloc d’instructions exécutées si la condition est vraie
	document.writeln('Vous êtes majeur');
	document.write ('Vous avez le droit de vote');
	}
	else
	{
	// bloc d’instructions exécutées si la condition est fausse
	document.writeln('Vous n\’êtes pas majeur');
	document.write ('Vous n\’avez pas le droit de vote');
	}
	//-->
	</script>


Ecriture simplifiée

	<script language="javascript" type="text/javascript">
	<!--
	var age=18;
	if(age >= 18)document.write('Vous êtes majeur');
	//-->
	</script>


Opérateur conditionnel ‘?’

	<script language="javascript" type="text/javascript">
	<!--
	var nombre=5;
	var etat = (nombre % 2 == 0 ? "pair" : "impair");
	//                 CONDITION      ? SI VRAI : SI FAUX
	document.write("Le nombre " + nombre + " un est nombre " + etat);
	//-->
	</script>
BoutonHautDePage

       9.2.8 Switch et Cas possibles


Si la structure conditionnelle en if...else n'est pas assez pratique, JavaScript offre une autre structure de contrôle, switch qui teste la valeur d'une variable et execute les instructions qui correspondent à ce cas. Les cas possibles sont repérés par le mot-clé case, suivi de la valeur de variable à comparer, puis les doubles points ‘:’.
Si la valeur de la variable testée correspond à cette valeur, on exécute les instructions qui suivent.

	var variable=[une certaine valeur];
	switch(variable)
	{ // début du switch
	case 0 : // Si variable == 0
	[instruction(s)];
	break; // On sort du switch
	case 1 : // Si variable == 1
	[instruction(s)];
	break; // On sort du switch
	default : // Sinon...
	[instruction(s)];
	break;
	} // fin du switch


Exemple :

	<script language="javascript" type="text/javascript">
	<!--
	var combien=5; // Assignez le nombre que vous voulez

	switch(combien){
	case 0 : // Si combien == 0
	document.write("Vous connaissez la sortie...");
	break; // On sort du switch

	case 1 : // Si combien == 1
	document.write("Une table pour une personne, une !");
	break; // On sort du switch

	case 2 : // Si combien == 2
	document.write("Haha! Un dîner en tête à tête ?");
	break; // On sort du switch

	case 7 : // Si combien == 7
	// Pas de break on ne sort pas du switch
	case 13 : // ou Si conbien == 13
	document.write("Désolé, ici on est superstitieux");
	document.write("et on ne dresse pas ce nombre de couverts");
	break; // On sort du switch

	default : // Sinon...
	// On teste avec des if...else
	// pour trouver le cas approprié
	if(combien > 2 && combien < 13)
	{
	document.write("C'est un repas en famille ?");
	}
	else if(combien > 12)
	{
	document.write("Mais vous êtes une armée !");
	}
	else
	{
	document.write("Très drôle");
	}
	break;
	}
	//-->
	</script>


Ici, après avoir donné la valeur 5 à la variable combien, on entre dans une structure switch qui précise la variable à tester (entre parenthèses) et qui délimite un bloc d’instructions entre accolades {…}.

Le premier cas est le cas 0 (case 0 :). Si la variable combien vaut 0, les instructions qui suivent jusqu’au mot break sont executées.

break permet de sortir d'un bloc d'instruction. Dans notre exemple, vu que le cas zéro a été traité, on sort donc du switch.

S’il n’y a pas de break, toutes les instructions qui suivent sont executées : Dans les cas [case 7 :] et [case 13 :] qui doivent déclencher des instructions identiques, ceci permet de ne pas les répéter.

Le cas default permet d’exécuter quelque-chose si aucun des cas 0, 1, 2, 7, 13 ne correspond.

BoutonHautDePage

       9.2.9 Boucles


Boucle while (tant que...)

Le traitement (instruction ou bloc d'instructions) est répété TANT QUE la condition reste vraie (true).

	while(condition) // TANT QUE la condition est vraie, on exécute ce qui suit :
	{ 
	[instruction(s)];
	}


Exemple :

	<script language="javascript" type="text/javascript">
	<!--
	var i=0;
	document.writeln("<pre>");
	document.writeln("Apprenons la table de 8");
	while(i < 10) // TANT QUE i < 10, on exécute ce qui suit :
	{
	document.writeln(i + " fois 8 = " + i * 8);
	i++;
	}
	document.writeln("</pre>");
	//-->
	</script>


On peut également executer une seule instruction :

	<script language="javascript" type="text/javascript">
	<!--
	var i=0;
	document.write("Au début, i vaut " + i + "<br>"); // affiche "Au début, i vaut 0"
	while(i < 5)i++;
	document.write("A la fin, i vaut " + i); // affiche "A la fin, i vaut 5"
	//-->
	</script>


Boucle do…while (faire une fois puis tester) Avec do…while la condition est testée en fin de boucle. Les instructions sont executées au moins une fois. Puis le traitement est répété TANT QUE la condition reste vraie (true).

	do // on exécute d’abord une fois ce qui suit :
	{ 
	[instruction(s)];
	}
	while(condition) // puis, TANT QUE la condition est vraie, on répète ce qui précède.


Exemple :

	<script language="javascript" type="text/javascript">
	<!--
	var i=0;
	do 
	{
	document.write("The number is " + i);
	document.write("<br/>");
	i++;
	}
	while(i<0);
	//-->
	</script>


Boucle for (itérative : de… à…)

On exécute le traitement (instruction ou bloc d'instructions) un certain nombre de fois.

	for(initialisation; condition; incrémentation)
	{
	[instruction(s)];
	}


Exemple :

	<script language="javascript" type="text/javascript">
	<!--
	document.writeln("<pre>");
	document.writeln("Apprenons la table de 8");
	// notez que (initialisation; condition; incrémentation) sont séparés par des points-virgules
	// ici on a mis deux incréments (on a le droit) mais eux sont séparés par des virgules
	for(var i=0, j=10; i < 10; i++, j--)
	{
	document.write(i + " fois 8 = " + i * 8 + "\t");
	document.writeln(j + " fois 8 = " + j * 8);
	}
	document.writeln("</pre>");
	//-->
	</script>


Ignorer la fin de boucle (continue)

L’instruction continue permet d’ignorer la fin de boucle (après un if) et de revenir en début de boucle pour continuer le traitement.

Exemple :

	<script language="javascript" type="text/javascript">
	<!--
	document.writeln("<pre>");
	document.writeln("Apprenons la table de 8");
	for(var i=0; i < 10; i++)
	{
	if(i==5)continue; // on repart au début de la boucle si i == 5
	document.writeln(i + " fois 8 = " + i * 8);
	}
	document.writeln("</pre>");
	//-->
	</script>


Ce code affiche tous les produits, sauf 5 fois 8



Sortir de la boucle (break)

L’instruction break permet de sortir de la boucle, en général après un if.

Exemple :

	<script language="javascript" type="text/javascript">
	<!--
	document.writeln("<pre>");
	document.writeln("Apprenons la table de 8");
	for(var i=0; i < 10; i++){
	if(i==5)break; // on sort de la boucle si i == 5
	document.writeln(i + " fois 8 = " + i * 8);
	}
	document.writeln("</pre>");
	//-->
	</script>


Ce code affiche tous les produits jusqu’à 4 fois 8



Identifieur de boucle

Dans le cas de boucles imbriquées, il peut être utile d’identifier les boucles.

Exemple :

	<script language="javascript" type="text/javascript">
	<!--
	document.writeln("<pre>");
	id_loop1 :
	for(var j=0; j < 10; j++)
	{
	id_loop2 :
	for(var i=0; i < 10; i++)
	{
	if(j>=8) continue id_loop1; // retour à la première boucle
	if(i==5) break id_loop2; // on sort de la deuxième boucle
	document.writeln(i + " fois " + j + " = " + i * j);
	}
	document.writeln();
	}
	document.writeln("</pre>");
	//-->
	</script>


Ce code affiche toutes les tables de multiplication de la table de zéro à la table de 7 mais pour chaque table ne traite que de zéro à 4.



Boucle for…in (scrute les propriétés d’un objet)

Cette boucle permet de passer en revue toutes les propriétés d'un objet.

	for(variable in objet)
	{
	[instruction(s)];
	}


La boucle for...in n'a pas de condition. Elle s'arrête lorsque les propriétés de l’objet sont toutes passées en revue. On peut aussi connaître la valeur d'une propriété en utilisant l'objet examiné comme un tableau associatif.

Exemple : si l’on veut savoir si les propriétés de l’objet document sont différentes dans Netscape navigator et dans Microsoft Internet Explorer il suffit de lancer le script ci-dessous dans chacun de ces navigateurs.

	<script language="javascript" type="text/javascript">
	<!--
	for(var i in document)
	{
	document.write(i + ' = ' + document[i] + '<br>'); 
	// document[i] donne la valeur de la propriété i de l’objet document
	}
	//-->
	</script>
BoutonHautDePage


9.3 Les objets prédéfinis (ou intégrés) de javascript

       9.3.1 Chaînes de caractères – l’objet (ou classe) String


Déclaration d’une chaîne de caractères

Elle se déclare comme ceci :

	var prenom=new String("Alain"); 
	// prenom est un objet de la classe String, dedans on met "Alain"


Une chaîne de caractères est un objet avec des propriétés et des méthodes. String (avec un S majuscule) est un objet prédéfini de javascript. En fait c'est une classe. La chaîne de caractères se trouve en argument entre parenthèses et entre guillemets. (ici Alain).

Ecriture simplifiée,
       var prenom="Alain";

Exemple :

<body>
<h1>L’objet String</h1>
	<script language="javascript" type="text/javascript">
	<!--
	var prenom=new String("Alain"); // prenom est un objet de la classe String
	var nom=‘ Monsieur "Roux" ’; // nom est une variable chaîne
	document.write(typeof prenom); // Sortie => object
	document.write(typeof nom); // Sortie => string
	// mais en réalité les deux donneront une chaîne
	document.write("Bonjour " + nom + " " + prenom); // concaténation avec +
	//-->
	</script>
</body>


Guillemets et apostrophes

Une chaîne de caractères peut se mettre indifféremment entre guillemets (") ou entre apostrophes (') comme ceci :

	document.write("Bonjour!"); // Entre guillemets
	document.write('Bonjour!'); // Entre apostrophes


Ce choix entre les guillemets ou les apostrophes est indispensable si l’on veut, par exemple, placer des balises HTML dans une chaîne de caractères :

       document.write('<h3 align="center">Un titre au centre</h3>');



•       Le back slash veut dire : "le caractère qui suit est spécial".
Ici on aurait pu se servir quand-même de guillemets, mais alors il aurait fallu mettre une barre oblique arrière ou back-slash (\) pour introduire les guillemets internes :

	document.write("<h3 align=\"center\">Un titre au centre</h3>");
	// Sortie : <h3 align="center">Un titre au centre</h3>


On introduit de même les apostrophes internes :

	document.write('C\’est joli !');
	// Sortie : C’est joli !


Il est possible aussi d’introduire un back-slash dans le texte document, il faut le doubler :

	document.write("c:\\localhost\\myweb\\index.php");
	// Sortie : c:\localhost\myweb\index.php




•       Autres utilités du back-slash

\n Avec un n comme New line. Il impose un saut de ligne.

       document.write("On saute quatre lignes\n\n\n\net on continue !");

Remarque : writeln() fait la même chose que write(), mais il ajoute en plus un caractère \n à la fin de la chaîne.



\t Avec un t comme Tabulation. Il impose un retrait de la ligne...

       document.write("\tUn retrait, c'est mieux!");



Utile dans les boîtes de dialogue :

       alert("Et un retour à la ligne\nUn !\n\tEt un retrait de ligne!");

Utile au sein d'une balise <pre> :

<pre>
	<SCRIPT language=JavaScript>
	document.write("Liste pour le repas\n");
	document.write("\t1. Pain\n");
	document.write("\t2. Saucisson\n");
	document.write("\t3. et vin rouge\n");
	</script>
</pre>


Autrement le \n et le \t sont totalement ignorés dans un document HTML.



Propriété de l’objet String() : length

String possède une seule propriété, length qui renvoie le nombre de caractères de la chaîne.

	var Chaine=new String("Ceci est une chaîne de caractères");
	document.write("Chaine est composée de " + Chaine.length + " caractères.");
BoutonHautDePage



Méthodes (ou fonctions) de l’objet String()

•       blink()
Retourne la chaîne de caractères encadrée des balises <blink> et </blink> (Clignotant).

	var Chaine="Clignotant";
	document.write(Chaine.blink()); // écrit <blink>Clignotant</blink>


•       bold()
Retourne la chaîne de caractères encadrée des balises <b> et </b> (Gras).

	var Chaine="Gras";
	document.write(Chaine.bold()); // écrit <b>Gras</b>


•       charAt(Index)
Retourne le caractère positionné à l'index spécifié par l'argument.

	var Chaine="http://www.google.fr/";
	document.write(Chaine.charAt(11)); // Sortie => g car l’index commence à 0


•       charCodeAt(Index)
Retourne le code ASCII du caractère à la position précisée par l'argument.

	var Chaine="http://www.google.fr/";
	document.write(Chaine.charCodeAt(11)); // Sortie => 103


•       concat(chaine1, chaine2)
Retourne la concaténation de la chaîne de caractères initiale avec les chaînes de caractères transmises en arguments.

	var Chaine="http://www.cybwarrior.com/";
	document.write(Chaine.concat("langages/", "javascript/", "chap14.php");
	// Sortie => http://www.cybwarrior.com/langages/javascript/chap14.php

Rappel : à la place, on aurait pu aussi utiliser le signe ‘+’ comme ceci :

	document.write(Chaine + "langages/" + "javascript/" + "chap14.php");
	// ce qui aurait donné exactement la même sortie...


•       fixed()
Retourne la chaîne de caractères encadrée des balises <tt> et </tt>.

	var Chaine="Telex";
	document.write(Chaine.fixed()); // écrit <tt>Telex</tt>


•       fontcolor(couleur)
Retourne la chaîne de caractères encadrée des balises <font color="couleur"> et </font>, où couleur est l'argument transmis à la méthode. Exemple :

	var Chaine="La couleur";
	document.write(Chaine.fontcolor("red")); // <font color=red>La couleur</font>
	document.write(Chaine.fontcolor("#00FF00"));


•       fontsize(taille)
Retourne la chaîne de caractères encadrée des balises <font size="taille"> et </font>, où taille est l'argument transmis à la méthode. Exemple :

	var Chaine="Taille";
	document.write(Chaine.fontsize(6)); // <font size=6>Taille</font>
	document.write(Chaine.fontsize("-1")); // <font size=-1>Taille</font>


•       indexOf(chaine, Index)
Recherche dans l'objet la position de la chaîne à partir du caractère de rang Index (si Index est spécifié, sinon à partir du début de la chaîne).
En cas de succès, la méthode renvoie la position de la chaîne dans l'objet, sinon elle retourne la valeur -1 :

	var Chaine="Joyeux Noël";
	document.write(Chaine.indexOf("Noël")); // Sortie => 7
	document.write(Chaine.indexOf("Anniversaire")); // Sortie => -1


•       italics()
Retroune la chaîne de caractères encadrée des balises <i> et </i>.

	var Chaine="Italique";
	document.write(Chaine.italics()); // écrit <i>Italique</i>


•       lastIndexOf(chaine, Index)
Recherche la chaîne dans l'objet jusqu'au caractère de rang Index (si Index est spécifié, sinon jusqu'à la fin).
En cas de succès, la méthode renvoie la position de la chaîne dans l'objet, sinon elle retourne la valeur -1 :

	var Chaine="Joyeux Noël";
	document.write(Chaine.lastIndexOf("Noël")); // Sortie => 7
	document.write(Chaine.lastIndexOf("Noël", 6)); // Sortie => -1


•       link(URL)
Retourne la chaîne de caractères encadrée des balises <a href="URL"> et </a>, où url est l'argument transmis à la méthode.

	var Chaine="Google";
	document.write(Chaine.link("http://www.google.fr/"));
	// écrit <a href=http://www.google.fr/>Google</a>


•       match(RegExp)
Recherche l'expression régulière RegExp dans la chaîne de caractères et retoure toutes les occurences trouvées dans un tableau, ou bien null en cas d'echec :

	var Chaine="/langages/javascript/chap.14";
	var Tableau=Chaine.match(/.*?\//g);
	for(var i=0; i < Tableau.length; i++)document.write(Tableau[i] + "<br>");

(Voir aussi plus loin l’objet RegExp de javascript ou Expressions Régulières)


•       replace(RegExp, Remplacement)
Remplace toutes les occurences de l'expression régulière RegExp dans la chaîne de caractères par la chaîne Remplacement.

	var Chaine="Ta da da ta ga da ta ga da";
	document.write(Chaine.replace(/da/gi, "DA"));
	// Sortie => Ta DA DA ta ga DA ta ga DA

(Voir aussi plus loin l’objet RegExp de javascript ou Expressions Régulières)


•       search(RegExp)
Recherche l'expression régulière RegExp dans la chaîne de caractères et retourne la position de la première occurence ou -1 en cas d'echec.

	var Chaine="aaaabbbbcccc";
	document.write(Chaine.search(/b/)); // Sortie => 4

(Voir aussi plus loin l’objet RegExp de javascript ou Expressions Régulières)


•       slice(deb, fin)
Retourne la chaîne de carctères située entre le caractère deb et le caractère fin. Si fin est omis, slice renvoie les caractères jusqu'à la fin de la chaîne.

	var Chaine="Sad Hill";
	document.write(Chaine.slice(4, 8)); // Sortie => Hill


•       split(RegExp)
Découpe une chaîne de caractères en fonction de l'expression régulière RegExp et livre le résultat dans un tableau.

	var Chaine="Nom=Roux;Prenom=Alain";
	var Tableau=Chaine.split(";"); // Séparateur le point virgule
	for(var i=0; i < Tableau.length; i++){
	Tableau[i]=Tableau[i].split("="); // Séparateur le signe =
	for(var j=0; j < Tableau[i].length; j++)
	document.write(Tableau[i][j] + "<br/>");
	}


(Voir aussi plus loin l’objet RegExp de javascript ou Expressions Régulières)


•       strike()
Retroune la chaîne de caractères encadrée des balises <strike> et </strike>.

	var Chaine="Barré";
	document.write(Chaine.strike()); // écrit <strike>Barré</strike>


•       sub()
Retroune la chaîne de caractères encadrée des balises <sub> et </sub>.

	var Chaine="Indice";
	document.write(Chaine.sub()); // écrit <sub>Indice</sub>


•       substr(Index, len)
Retourne la chaîne de caractère située au caractère de rang Index et de longueur len. Si len est omis, substr renvoie les caractères jusqu'à la fin de la chaîne.

	var Chaine="Sad Hill";
	document.write(Chaine.substr(4, 4)); // Sortie => Hill


•       sup()
Retroune la chaîne de caractères encadrée des balises <sup> et </sup>.

	var Chaine="Exposant";
	document.write(Chaine.sup()); // écrit <sup>Exposant</sup>


•       toLowerCase()
Retourne la chaîne de caractères avec tous les caractères transformés en minuscules.

	var Chaine="Hello";
	document.write(Chaine.toLowerCase()); // Sortie => hello (tout en minuscules)


•       toUpperCase()
Retourne la chaîne de caractères avec tous les caractères transformés en majuscules.

	var Chaine="Hello";
	document.write(Chaine.toUpperCase()); // Sortie => HELLO (tout en majuscules)


BoutonHautDePage

       9.3.2 Tableaux : l’objet (ou classe) Array


Une variable ne peut contenir qu'une seule et unique valeur. Un tableau peut en contenir un grand nombre, d’où son utilité.

Déclaration d’un tableau

On le déclare comme ceci :

	var table=new Array(); // ne pas oublier les parenthèses vides
	// table est un objet de la classe Array, dedans on mettra les éléments du tableau


Un tableau est un objet avec des propriétés et des méthodes. Array (avec un A majuscule) est un objet prédéfini de javascript, un ‘constructeur’. Entre parenthèses on peut trouver des arguments (ici il n’y en a pas). Les éléments du tableau sont numérotés de 0 à n entre crochets : table[0] est l’émément numéro 1. Le tableau est dimensionné automatiquement par javascript.

Ecriture simplifiée,

	var table=["Le rouge et le noir", "La bête humaine", "Les misérables"];


Exemple :

<body>
<h1>L’objet Array</h1>
	<script language="javascript" type="text/javascript">
	<!--
	var livres=new Array(); // ici, pas d’arguments entre parenthèses
	livres[0]="Le rouge et le noir"; // 1er élément du tableau, index [0]
	livres[1]="La bête humaine"; // 2e élément du tableau, index [1]
	livres[2]="Les misérables"; // 3e élément du tableau, index [2]
	// on peut ensuite écrire dans la page HTML toute la liste des livres
	document.write("1<sup>er</sup> livre : " + livres[0] + "<br/>"); // Le rouge et le noir
	document.write("2<sup>e</sup> livre : " + livres[1] + "<br/>"); // La bête humaine
	document.write("3<sup>e</sup> livre : " + livres[2] + "<br/>"); // Les misérables
	//-->
	</script>
</body>


•       Passer les éléments du tableau en arguments

Plus simplement, on peut aussi passer les éléments du tableau en arguments au moment de sa création.

Exemple :

<body>
<h1>Arguments de l’objet Array</h1>
	<script language="javascript" type="text/javascript">
	<!--
	var livres=new Array("Le rouge et le noir", "La bête humaine", "Les misérables");
	// ici le tableau sera automatiquement dimensionné à 3 éléments
	//-->
	</script>
</body>


•       Passer les éléments du tableau dans une variable

On peut aussi passer les éléments du tableau entre crochets dans une variable

Exemple :

<body>
<h1>Eléments du tableau dans une variable</h1>
	<script language="javascript" type="text/javascript">
	<!--
	var livres=["Le rouge et le noir", "La bête humaine", "Les misérables"];
	// On peut aussi passer les éléments du tableau entre crochets dans une variable
	//-->
	</script>
</body>
BoutonHautDePage


Propriété de l’objet Array() : length

Array possède une seule propriété, length qui renvoie le nombre d'éléments du tableau.

•       Taille d’un tableau

Exemple :

<body>
<h1>Taille d’un tableau</h1>
	<script language="javascript" type="text/javascript">
	<!--
	var livres=new Array("Le rouge et le noir", "La bête humaine", "Les misérables");
	document.write(livres.length); // Sortie => 3
	//-->
	</script>
</body>


•       Passer la taille du tableau en argument

Exemple :

<body>
<h1>Passer la taille du tableau en argument</h1>
	<script language="javascript" type="text/javascript">
	<!--
	var tableau=new Array(10); // 10 élements
	document.write(tableau.length); // Sortie => 10
	//-->
	</script>
</body>


•       Parcourir un tableau dans une boucle

La propriété length est utile pour parcourir un tableau à l'aide d'une boucle :

<body>
<h1>Parcourir un tableau dans une boucle</h1>
	<script language="javascript" type="text/javascript">
	<!--
	var livres=new Array("Le rouge et le noir", "La bête humaine", "Les misérables");
	for(var i=0; i < livres.length; i++)
	document.write("Livre N°" + i + " : " + livres[i] + "<br/>");
	//-->
	</script>
</body>



Méthodes (ou fonctions) de l’objet Array()

•       concat()

Permet de concaténer deux tableaux. On passe le tableau à ajouter en argument :

	var MesLivres=new Array("Le rouge et le noir", "La bête humaine", "Les misérables");
	var TesLivres=new Array("Sissi", "Angélique, marquise des anges");
	MesLivres.concat(TesLivres); // On ajoute le tableau TesLivres


•       join()

Convertit un tableau en chaîne de caractères.

Exemple :

	var livres=new Array("Le rouge et le noir", "La bête humaine", "Les misérables");
	var Texte=livres.join("<br/>");
	document.write(Texte);


•       reverse()

Inverse l'ordre des élements du tableau.

	var livres=new Array("Le rouge et le noir", "La bête humaine", "Les misérables");
	livres.reverse();
	for(var i=0; i < livres.length; i++)
	document.write(livres[i] + "<br/>");


•       slice()

Renvoie une ‘tranche’ de tableau (une partie du tableau). Le 1er argument correspond à l'index de départ. Le 2ème argument est optionnel. Il correspond à l'index de fin. S'il est omis, tous les index jusqu'à la fin du tableau seront renvoyés.

	var liste=new Array("un", "deux", "trois", "quatre", "cinq");
	var maliste=liste.slice(1, 4);
	for(var i=0; i < maliste.length; i++)
	document.write(maliste[i] + "<br/>");


•       sort()

Permet de trier un tableau par ordre croissant de ses élements. Si aucun argument n'est transmis, le tableau est trié par ordre alphabétique.

	var liste=new Array("un", "deux", "trois", "quatre", "cinq");
	liste.sort();
	for(var i=0; i < liste.length; i++)
	document.write(liste[i] + "<br/>");
BoutonHautDePage


Trier un tableau

L'argument possible de sort() est une fonction de tri qui doit recevoir 2 arguments et livrer en retour une valeur négative si le 1er argument doit être placé avant le 2ème, ou positive pour l'inverse.

Exemple :

<body>
<h1>Comment trier  un tableau</h1>
	<script language="javascript" type="text/javascript">
	<!--
	function montri(a, b) // fonction de tri qui reçoit 2 arguments
	{
	return a – b 
	// la fonction montri retourne une valeur < 0 si le 1er argument doit être déplacé avant le 2e 
	// la fonction montri retourne une valeur > 0 si le 1er argument doit être déplacé après le 2e
	}
	var liste=new Array(4);
	liste[0]="1"
	liste[1]="5"
	liste[2]="4"
	liste[3]="2"
	document.write(liste + "<br/>");
	document.write(liste.sort(montri)); // retourne un tableau trié
	//-->
	</script>
</body>


Tableaux multi-dimensionnels

Pour créer un tableau à plusieurs dimensions, il suffit de créer un objet Array pour chaque rangée de ce tableau :

<body>
<h1>Tableau à plusieurs dimensions</h1>
	<script language="javascript" type="text/javascript">
	<!--
	var tableau=new Array(10);
	for(var i=0; i < tableau.length; i++)
	tableau[i]=new Array(10);
	// On accède ainsi aux éléments de ce tableau à deux dimensions :
	tableau[5][5]="Je suis presque au milieu de ce tableau";
	//-->
	</script>
</body>


Partant de ce principe, on peut utiliser autant de dimensions que l'on veut.

BoutonHautDePage


Tableaux associatifs

La différence entre un tableau associatif et un tableau classique, c'est qu'un tableau associatif indexe ses élements avec des chaînes et non plus avec des nombres.

Dans un tableau associatif, on accède à un élément comme ceci :

	var MonTableau = new Array();
	MonTableau["nom"] = "Goldorak"; // On accède à l'élément "nom"
	document.write(MonTableau["nom"]); // Sortie => Goldorak


•       Tableau associatif indexé avec des chaînes de caractères

Pour parcourir un tableau de ce type, on utilise la boucle for...in :

<body>
<h1>Tableau associatif</h1>
	<script language="javascript" type="text/javascript">
	<!--
	var Vainqueurs = new Array();
	// Critérium du Dauphiné 4-11 juin 2000
	Vainqueurs["Grenoble - La Bastille (prologue)"]="Alberto Lopez de Munain";
	Vainqueurs["Grenoble - Lyon"]="Frédéric Guesdon";
	Vainqueurs["Châtillon sur Chalaronne - Saint Etienne"]="Fabrice Gougot";
	Vainqueurs["Saint Etienne - Saint Etienne (contre la montre)"]="Lance Armstrong";
	Vainqueurs["Romans - Le mont Ventoux"]="Tyler Hamilton";
	Vainqueurs["Beaumes de Venise - Dignes les Bains"]="Tyler Hamilton";
	Vainqueurs["Digne les Bains - Briançon"]="Inigo Cuesta";
	Vainqueurs["Saint Jean de Maurienne - Salanches"]="Laurent Jalabet";
	// Boucle for...in :
	for(Etape in Vainqueurs) 
	{
	document.write(Etape + " : " + Vainqueurs[Etape] + "<br/>");
	}
	//-->
	</script>
</body>


•       Tableau associatif indexé avec les jours de la semaine

<body>
<h1>Tableau associatif indexé avec les jours de la semaine</h1>
	<script language="javascript" type="text/javascript">
	<!--
	var weekdays=new Array();
	weekdays[Samedi]="samedi";
	weekdays[Dimanche]="dimanche";
	weekdays[Lundi]="lundi";
	weekdays[Mardi]="mardi";
	weekdays[Mercredi]="mercredi";
	weekdays[Jeudi]="jeudi";
	weekdays[Vendredi]="vendredi";
	// la boucle ci-dessous écrit samedi-dimanche-lundi-mardi-mercredi-jeudi-vendredi-
	for (day in weekdays) document.write (weekdays[day]+"-");
	//-->
	</script>
</body>


•       Tableau de chaînes

<body>
<h1>Tableau des jours de la semaine</h1>
	<script language="javascript" type="text/javascript">
	<!--
	var weekdays=new Array("samedi","dimanche","lundi","mardi","mercredi","jeudi","vendredi");
	// la boucle ci-dessous écrit samedi-dimanche-lundi-mardi-mercredi-jeudi-vendredi-
	for (day in weekdays) document.write (weekdays[day]+"-");
	// join ci-dessous écrit samedi,dimanche,lundi,mardi,mercredi,jeudi,vendredi
	document.write("<br/>"+weekdays.join(","));
	// split ci-dessous sépare les bouts de chaînes séparés par des virgules
	var s="samedi,dimanche,lundi,mardi,mercredi,jeudi,vendredi";
	t=s.split(",");
	console.log(t) // écrit sur la console les jours de la semaine séparément
	//-->
	</script>
</body>


BoutonHautDePage

       9.3.3 Chercher, remplacer : l’objet RegExp (Regular Expression)


L’expression régulière est un objet javascript, RegExp(), très utile pour rechercher ou remplacer des fragments de chaînes de caractères dans un texte. C’est ce qu’on fait par exemple quand on vérifie les données saisies dans un formulaire avant de l’envoyer.

Déclaration d’une expression régulière

Une expression régulière se déclare comme ceci :

       var marecherche=new RegExp("az", "g");

L’objet RegExp est une expression régulière qui permet de définir un masque de recherche dans un texte, c’est à dire ce qu’on va rechercher dans le texte, ici les caractères az ; g est une option (recherche globale). Bien sûr on peut rechercher un seul ou plusieurs caractères.

Ecriture simplifiée,

       var marecherche=/az/g;

Les options :

• Avec g (global) on fera une recherche globale, c'est-à-dire qu’on continue à chercher la chaîne ‘az’ dans tout le texte (si ‘az’ apparaît plusieurs fois), sinon, sans g, on s’arrête de chercher dès qu’on a trouvé la première.
• Avec i (ignoreCase) on ignorera la casse (minuscules-majuscules).

Exemple :

<body>
<h1>Recherche et remplacement d’une chaîne de caractères</h1>
	<script language="javascript" type="text/javascript">
	<!--
	var marecherche=/aze/gi; // chercher tous les ‘aze’ majuscule ou minuscule
	var chaine="azertyaZerty"; // chaîne où l’on va chercher
	chaine=chaine.replace(marecherche, "AZE"); // remplacer par AZE
	document.write(chaine); // Sortie => AZErtyAZErty
	//-->
	</script>
</body>


Nous avons déjà vu comment utiliser RegExp avec certaines méthodes (ou fonctions) de l’objet String : match, replace, search, split.

•       match(RegExp)

Recherche l'expression régulière RegExp dans la chaîne de caractères et retoure toutes les occurences trouvées dans un tableau, ou bien null en cas d'echec :

	var Chaine="/langages/javascript/chap.14";
	var Tableau=Chaine.match(/.*?\//g);
	for(var i=0; i < Tableau.length; i++)document.write(Tableau[i] + "<br>");


•       replace(RegExp, Remplacement)

Remplace toutes les occurences de l'expression régulière RegExp dans la chaîne de caractères par la chaîne Remplacement.

	var Chaine="Ta da da ta ga da ta ga da";
	document.write(Chaine.replace(/da/gi, "DA"));
	// Sortie => Ta DA DA ta ga DA ta ga DA


•       search(RegExp)

Recherche l'expression régulière RegExp dans la chaîne de caractères et retourne la position de la première occurence ou -1 en cas d'echec.

	var Chaine="aaaabbbbcccc";
	document.write(Chaine.search(/b/)); // Sortie => 4


•       split(RegExp)

Découpe une chaîne de caractères en fonction de l'expression régulière RegExp et place le résultat dans un tableau.

	var Chaine="Nom=Roux;Prenom=Alain";
	var Tableau=Chaine.split(";"); // Séparateur le point virgule
	for(var i=0; i < Tableau.length; i++){
	Tableau[i]=Tableau[i].split("="); // Séparateur le signe =
	for(var j=0; j < Tableau[i].length; j++)
	document.write(Tableau[i][j] + "<br/>");
	}


Propriétés de l’objet RegExp()

global Propriété booléenne indiquant si la recherche est globale (true) (g présent) ou non (false).
ignoreCase Propriété booléenne indiquant si la recherche est sensible à la casse (true) ou non (false).
input Indique la chaîne d'entrée sur laquelle la recherche est réalisée.
lastIndex Indique la position du caractère à laquelle la recherche suivante va se faire.
lastMatch Contient la dernière occurence trouvée.
lastParen Contient la dernière occurence correspondant à un motif entre parenthèses.
leftContext Contient la chaîne située à gauche de l'occurence trouvée.
multiline Propriété booléenne indiquant si la recherche porte sur plusieurs lignes (true) ou non (false).
rightContext Contient la chaîne située à droite de l'occurence trouvée.
source Contient le motif de l'expression régulière.

BoutonHautDePage


Méthodes (ou fonctions) de l’objet RegExp()

•       Expression.compile("chaine", options);

Permet de redéfinir une nouvelle expression régulière en utilisant chaine comme nouveau modèle et options comme nouveaux attributs.

•       Expression.exec("chaine");

Cherche la chaîne de caractère passée en argument avec l'expression régulière. Si elle ne s’y trouve pas, exec retourne null, si elle s’y trouve, exec retourne un tableau contenant les occurences trouvées.

Ce tableau possède aussi 2 propriétés :
- index qui correspond à l'index du caractère de la chaîne où l'expression a été trouvée.
- input qui est un lien sur la chaîne de caractère.

•       Expression.test("chaine");

Teste une chaîne de caractère avec l'expression régulière. Cette méthode retourne true si l'expression régulière est contenue dans chaine, false sinon.



Exemples

•       Entre crochets [tm] : alternative entre 2 caractères

<body>
<h1>Recherche des mots commençant par t ou m</h1>
	<script language="javascript" type="text/javascript">
	<!--
	var marecherche=/[tm]oi/i; // chercher tous les mots qui commencent par t ou m
	with(document){
	writeln(marecherche.test("moi")); // true
	writeln(marecherche.test("toi")); // true
	writeln(marecherche.test("roi")); // false
	}
	//-->
	</script>
</body>


•       Le tiret [a-g] : intervalle de a à g

<body>
<h1>Recherche des mots commençant par a à g</h1>
	<script language="javascript" type="text/javascript">
	<!--
	var marecherche=/[a-g]ou/i; // chercher tous les mots qui commencent par a à g
	with(document){
	writeln(marecherche.test("cou")); // true
	writeln(marecherche.test("pou")); // false
	}
	//-->
	</script>
</body>


•       Le caractère pipe | : rechercher aol ou wanadoo :

<body>
<h1>Recherche de l’un ou de l’autre</h1>
	<script language="javascript" type="text/javascript">
	<!--
	var marecherche=/aol|wanadoo/; // chercher aol ou wanadoo
	with(document){
	writeln(marecherche.test("robert@aol.com")); // true
	writeln(marecherche.test("webmaster@cybwarrior.com")); // false
	writeln(marecherche.test("marcel@wanadoo.fr")); // true
	}
	//-->
	</script>
</body>


•       L’étoile * : le caractère qui la précède intervient 0 ou plusieurs fois :

<body>
<h1>Recherche de a, 0 ou plusieurs fois</h1>
	<script language="javascript" type="text/javascript">
	<!--
	var marecherche=/a*tchoum/; // le a peut se trouver zero ou plusieurs fois
	var chaine1="aaaaaaaaaaaaatchoum!";
	var chaine2="tchoum";
	chaine1=chaine1.replace(marecherche, "atchoum");
	chaine2=chaine2.replace(marecherche, "atchoum");
	document.write(chaine1); // Sortie => atchoum!
	document.write(chaine2); // Sortie => atchoum
	//-->
	</script>
</body>


•       Le signe plus + : le caractère qui précède intervient au moins une fois :

<body>
<h1>Recherche de a, au moins une fois</h1>
	<script language="javascript" type="text/javascript">
	<!--
	var marecherche=/a+tchoum/; // le a doit se trouver au moins une fois
	var chaine1="aaaaaaaaaaaaatchoum!";
	var chaine2="tchoum";
	chaine1=chaine1.replace(marecherche, "atchoum");
	chaine2=chaine2.replace(marecherche, "atchoum");
	document.write(chaine1); // Sortie => atchoum!
	document.write(chaine2); // Sortie => tchoum (rien n’est modifié)
	//-->
	</script>
</body>


•       Le point d'interogation ? : le caractère précédent est optionel :

<body>
<h1>Le caractère ‘e’ est optionnel</h1>
	<script language="javascript" type="text/javascript">
	<!--
	var marecherche=/bienvenue?/; // Avec ou sans e ?
	with(document){
	writeln(marecherche.test("bienvenue")); // true
	writeln(marecherche.test("bienvenu")); // true
	}
	//-->
	</script>
</body>


•       Le point d'interogation (mot)? : le mot précédent est optionel :

<body>
<h1>Le mot ‘ael’ est optionnel</h1>
	<script language="javascript" type="text/javascript">
	<!--
	var marecherche=/Raph(ael)?/; // Avec ou sans ‘ael’ ?
	document.write(marecherche.test("Raphael")); // true
	document.write(marecherche.test("Raph")); // true
	//-->
	</script>
</body>


•       Entre accolades {3} : le caractère intervient 3 fois

<body>
<h1>Le caractère intervient {x} fois</h1>
	<script language="javascript" type="text/javascript">
	<!--
	var marecherche=/[0-9]{3}-[0-9]{3}-[0-9]{2}.[0-9]{2}/; 
	// détecte des codes de la forme XXX-XXX-XX.XX
	with(document){
	writeln(marecherche.test("123-456-78.90")); // true
	writeln(marecherche.test("4567-76-322.1")); // false
	}
	//-->
	</script>
</body>


•       {min, max} : le caractère intervient au moins min fois et au plus max fois

Variante du cas précédent

BoutonHautDePage

       9.3.4 Nombres : l’objet Number


Déclaration d’un nombre

Il se déclare comme ceci :

	var nombre=new Number(25);
	document.write(typeof nombre); // Sortie => object
	// nombre est un objet de la classe Number, dedans on met 25


Un nombre est un objet avec des propriétés et des méthodes. Number (avec un N majuscule) est un objet prédéfini de javascript. En fait c'est une classe. Le nombre se trouve en argument entre parenthèses. (ici 25).

Ecriture simplifiée,

	var nombre=25;
	document.write(typeof nombre); // Sortie => number


Conversion à l’aide de l’objet Number

<body>
<h1>L’objet Number</h1>
	<script language="javascript" type="text/javascript">
	<!--
	var mavariable="12"; // mavariable est une chaîne composée de deux caractères
	mavariable += 10; // on ajoute 10 à la chaîne ‘12’
	// ce qui donne la concaténation ‘1012’ et non pas la somme 22
	document.writeln("<pre>");
	document.writeln(mavariable); // Sortie => 1012
	document.writeln(typeof mavariable); // Sortie => string
	document.writeln("</pre>");
	// Utilisons maintenant l’objet constructeur Number
	mavariable=(new Number(mavariable)) + 10; 
	// Convertit la chaîne ‘1012’ en nombre et y ajoute 10
	document.writeln("<pre>");
	document.writeln(mavariable); // Sortie => 1022
	document.writeln(typeof mavariable); // Sortie => number
	document.writeln("</pre>");
	//-->
	</script>
</body>


Conversions avec parseInt, parseFloat, isNaN, toString

parseInt, parseFloat et isNaN sont des méthodes (fonctions) de l'objet window ;
toString est une méthode (fonction) de l'objet number

<body>
<h1>Conversion avec parseInt, parseFloat, isNaN et toString</h1>
	<script language="javascript" type="text/javascript">
	<!--
	var pi="3.1415926535"; // pi est une chaîne de chiffres (mais pas un nombre)
	// conversion d’une chaîne en nombre entier
	var i=parseInt(pi); // donne i=3 la partie entière du nombre 3.1415926535
	document.write("<b>i</b> est du type " + typeof i); // écrit "i est du type number"
	// conversion d’une chaîne en nombre décimal
	var f=parseFloat(pi); // donne f=3.1415926535 (un nombre décimal)
	document.write("<b>f</b> est du type " + typeof f); // écrit "i est du type number"
	// conversion d’un nombre décimal en nombre entier
	var i=int(i); // donne i=3 la partie entière du nombre 3.1415926535
	// conversion d’un nombre en chaîne
	var u=10; // u est le nombre 10
	var a=u.toString(); // a est la chaîne de caractères "10"
	document.write("<b>a</b> est du type " + typeof a); // écrit "a est du type string"
	// isNaN (is not a Number) renvoie true si la variable est une chaîne
	var chaine=new String("Hello");
	document.write(isNaN(chaine)); // Sortie => true
	//-->
	</script>
</body>
BoutonHautDePage


Propriétés de l’objet Number()

MAX_VALUE Renvoie la plus grande valeur utilisable :

	document.write(Number.MAX_VALUE); // Sortie => 1.7976931348623157e+308


MIN_VALUE Renvoie la plus petite valeur utilisable :

	document.write(Number.MIN_VALUE); // Sortie => 5e-324


NaN Renvoie la chaîne de caractères ‘NaN’ (Not a Number) par exemple en cas de division de zéro par zéro :

	document.writeln("<pre>");
	document.writeln(0 / 0); // Sortie => NaN
	document.writeln(Number.NaN); // Sortie => NaN
	document.writeln("<./pre>");


NEGATIVE_INFINITY Renvoie la chaîne de caractères ‘-Infinity’ (moins l’infini) par exemple en cas de division d’un nombre négatif par zéro :

	document.writeln("<pre>");
	document.writeln(-1 / 0); // Sortie => -Infinity
	document.writeln(Number.NEGATIVE_INFINITY); // Sortie => -Infinity
	document.writeln("</pre>");


POSITIVE_INFINITY Renvoie la chaîne de caractères Infinity (plus l’infini) par exemple en cas de division d’un nombre positif par zéro :

	document.writeln("<pre>");
	document.writeln(1 / 0); // Sortie => Infinity
	document.writeln(Number.POSITIVE_INFINITY); // Sortie => Infinity
	document.writeln("</pre>"); 


Méthode (ou fonction) de l’objet Number : toString

L'objet Number ne possede qu'une seule méthode, toString() qui convertit un nombre en objet de type String. De plus, le nombre est converti dans la base de l’argument transmis (si on en transmet un).

Exemple :

	var nombre=255;
	document.writeln("<pre>");
	document.writeln(nombre + " en binaire : " + nombre.toString(2));
	document.writeln(nombre + " en octal : " + nombre.toString(8));
	document.writeln(nombre + " en hexadecimal : " + nombre.toString(16));
	document.writeln("</pre>");


JavaScript distingue les bases décimal (base 10), octal (base 8) et hexadécimal (base 16) de la façon suivante. Pour écrire une valeur en octal, il faut faire précéder le nombre de 0 (zéro). En hexadécimal, de 0x ou 0X (zéro x) :

	var decimal = 10;
	var octal = 012;
	var hexadecimal = 0xA;
	document.writeln("<pre>");
	document.writeln(decimal); // Sortie => 10
	document.writeln(octal); // Sortie => 10
	document.writeln(hexadecimal); // Sortie => 10
	document.writeln("</pre>");


BoutonHautDePage

       9.3.5 Fonctions mathématiques : l’objet Math


On ne peut pas déclarer un objet Math, il n’est pas instanciable. Par contre on peut s’y référer.

	var mesmaths=new Math(); // Est interdit !

	var refmath=Math; // Est permis : on se réfère à l’objet Math


Exemple :

Affichage d’une image au hasard dans la case d’un tableau

L’objet Math contient absolument tous les outils pour faire des mathématiques.

Math.random()
<body>
<table>
<tr>
<td>
	<script language="javascript" type="text/javascript">
	<!--
	document.write('<img src=image' + parseInt(Math.random() * 10) + '.gif>'); 
	// Affiche dans la case d'un tableau image's SouRCe (src)
	// une image au hasard parmi 10 à chaque chargement de la page 
	//-->
	</script>
</td>
</tr>
</table>
</body>


Propriétés de l'objet Math

E constante d'Euler (e)
       document.write(Math.E); // Sortie => 2.718281828459045

LN10 = logarithme naturel de 10
       document.write(Math.LN10); // Sortie => 2.302585092994046

LN2 = logarithme naturel de 2
       document.write(Math.LN2); // Sortie => 0.6931471805599453

LOG10E = logarithme en base 10 de e
       document.write(Math.LOG10E); // Sortie => 1.4426950408889633

LOG2E = logarithme en base 2 de e
       document.write(Math.LOG2E); // Sortie => 0.4342944819032518

PI = la constante PI
       document.write(Math.PI); // Sortie => 3.141592653589793

SQRT1_2 = l'inverse de la racine carré de 2 (puissance 1/2)
       document.write(Math.SQRT1_2); // Sortie => 0.7071067811865476

SQRT2 = la racine carrée de 2
       document.write(Math.SQRT2); // Sortie => 1.4142135623730951


Méthodes de l'objet Math

abs() = valeur absolue de l'argument
       document.write(Math.abs(-5)); // Sortie => 5

acos() = arc cosinus de l'argument en radians
       document.write(Math.acos(Math.SQRT1_2)); // Sortie => PI/4 = 0.7853...

asin() = arc sinus de l'argument
       document.write(Math.Math.asin(Math.SQRT1_2)); // Sortie => PI/4 = 0.7853...

atan() = arc tangente de l'argument
       document.write(Math.atan(1)); // Sortie => PI/4 = 0.7853...

ceil() = arrondit l'argument à l'entier supérieur
       document.write(Math.ceil(-Math.PI)); // Sortie => -3

cos() = cosinus de l'argument en radians
       document.write(Math.cos(0)); // Sortie => 1

exp() = exponentielle de l’argument
       document.write(Math.exp(1)); // Sortie => e = 2.7182...

floor() = arrondit l'argument à l'entier inférieur
       document.write(Math.floor(-Math.PI)); // Sortie => -4

log() = logarithme naturel de l’argument
       document.write(Math.log(Math.E)); // Sortie => 1

max() = la plus grande valeur entre tous les arguments
       document.write(Math.max(Math.PI, -Math.PI)); // Sortie => PI = 3.1415...

min() = la plus petite valeur entre tous les arguments
       document.write(Math.min(1, 2, 3, 4, 5)); // Sortie => 1

pow() = premier argument élevé à la puissance du second
       document.write(Math.pow(Math.SQRT2, 2)); // Sortie => 2

random() = Renvoie une valeur aléatoire entre 0 et 1
       document.write(Math.random() * 10); // Sortie => ? < 10

round() = arrondit l'argument à l'entier le plus proche
       document.write(Math.round(1.4)); // Sortie => 1

sin() = sinus de l'argument en radians
       document.write(Math.sin(Math.PI / 2)); // Sortie => 1

sqrt() = racine carrée de l’argument
       document.write(Math.sqrt(36)); // Sortie => 6

tan() = tangente de l’argument
       document.write(Math.tan(0)); // Sortie => 0

BoutonHautDePage

       9.3.6 Date et heure : l’objet (ou classe) Date


L'objet Date est un objet constructeur prédéfini de javascript qui permet de manipuler les dates et les heures.

Déclaration d’une date

On peut déclarer une date au sens large (date et heure) comme ceci :

       var maintenant=new Date(); // la date et l'heure actuelle



•       Date(chaine)

L’argument est une chaîne de caractères en anglais representant la date au format :

                              Day Mth d hh:mm:ss UTC+off YYYY

Avec :
Day = Mon, Tue, Wed, Thu, Fri, Sat ou Sun.
Mth = Jan, Feb, Mar, Apr, May, Jun, Jul, Aug, Sep, Oct, Nov ou Dec.
d = le jour du mois.
hh = les heures,
mm = les minutes et
ss = les secondes.
+off = "l'offset" par rapport au fuseau horaire de Greenwich.
yyyy = l'année

Exemple :

       var Jeu5Nov1982 = new Date("Fri Nov 5 12:00:00 UTC+1 1982"); // 5-11-82 en France



•       Date(annee, mois, jour, heures, minutes, secondes, millisecondes)

Tous ces arguments sont des nombres séparés par des virgules.

Exemple :

       var madate=new Date(1999, 9, 9); // 9/9/1999

Seuls les deux premiers arguments (annee et mois) sont obligatoires, les autres sont facultatifs et valent zéro s’ils sont omis.

Méthodes (ou fonctions) de la classe Date

•       Tous les get

getDate() = le numéro du jour du mois (1 à 31)
getDay() = le numéro du jour de la semaine (0 à 7)
getFullYear() = les 4 chiffres de l'année
getHours() = le nombre d'heures (0 à 23)
getMilliseconds() = le nombre de millisecondes
getMinutes() = le nombre de minutes (0 à 59)
getMonth() = le numéro du mois (0 à 11)
getSeconds() = le nombre de secondes (0 à 59)
getTime() = le nombre de millisecondes écoulées depuis 1970 (horodateur)
getTimeZoneOffset() = l'offset entre le fuseau horaire de la date et le fuseau horaire de Greenwich
getYear() = les deux derniers chiffres de la date si celle-ci est comprise entre en 1900 et 1999, sinon les 4 chiffres (bug avec Netscape 4.x dans ce dernier cas)

•       Tous les set

setDate() = Fixe le jour du mois (0 à 31) de la date.
setFullYear() = Fixe l'année de la date.
setHours() = Fixe les heures.
setMilliseconds() = Fixe les millisecondes.
setMinutes() = Fixe les minutes.
setMonth() = Fixe le mois (0 à 11) de la date.
setSeconds() = Fixe les secondes.
setTime() = Modifie la date en fonction de l'horodateur passé en argument.
setYear() = Fixe l'année de la date, sur 2 chiffres de 0 à 99 (c'est à dire de 1900 à 1999).

•       Les to

toGMTString() = la chaîne date sous la forme Day Mth d hh:mm:ss UTC+off YYYY avec pour origine le fuseau horaire de Greenwich.
toLocalString() = une chaîne date convertie en heure locale.
toString() = une chaîne date sous la forme Day Mth d hh:mm:ss UTC+off YYYY.
valueOf() = Renvoie l'horodateur (même effet que getTime()).

Fonction horloge (date et heure du jour)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Afficher la date et l'heure actuelles</title>
	<script language="javascript" type="text/javascript">
	<!--
	function dateHeure() { 
	// Classe Date (prédéfinie dans javascript)
	var jour=new Date(); // variable de type tableau
	var jourStr=new Array("dimanche","lundi","mardi","mercredi","jeudi","vendredi","samedi");
	var strdd=jourStr[jour.getDay()]; // nom du jour
	var d=jour.getDate(); // No du jour
	if (d<10) d="0"+d; //passage au format 'dd' pour les no de jours de 1 à 9
	var m=jour.getMonth()+1; // le no du mois
	if (m<10) m="0"+m; //passage au format 'mm' pour les no de mois de 1 à 9
	var y=jour.getFullYear(); // année
	var h=jour.getHours(); // les heures
	if (h<10) h="0"+h; //passage au format 'hh' pour les heures de 1 à 9
	var mn=jour.getMinutes(); // les minutes
	if (mn<10) mn="0"+mn; //passage au format 'mn' pour les minutes de 1 à 9
	var ss=jour.getSeconds(); // les secondes
	if (ss<10) ss="0"+ss; //passage au format 'ss' pour les secondes de 1 à 9
	strclock=strdd+" - "+d+"/"+m+"/"+y+" - "+h+":"+mn+":"+ss;
	// affichage 'ChaîneJour - dd/mm/yyyy - hh:mn:ss'
	dhms.innerHTML=strclock; 
	setTimeout("dateHeure()", 1000); 
	} 
	-->
	</script> 
</head>
<body onload="dateHeure()">
<!-- cette fonction est déclenchée au chargement de la page -->
<span id ="dhms"></span>
<!-- et l’horloge s’affiche à l’emplacement du span -->
</body>
</html>


Fonction minuterie

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Minuterie de Nicolas</title>
	<script language="javascript" type="text/javascript">
	<!--
	// auteur : Nicolas - http://www.javascript-page.com

	var timerID = 0;
	var tStart  = null;

	function UpdateTimer() {
	  if(timerID) {
		clearTimeout(timerID);
		clockID  = 0;
	  }
	  if(!tStart)
		tStart   = new Date();
	  var   tDate = new Date();
	  var   tDiff = tDate.getTime() - tStart.getTime();
	  tDate.setTime(tDiff);
	  document.theTimer.theTime.value = "" 
									+ tDate.getMinutes() + ":" 
									+ tDate.getSeconds();
	  timerID = setTimeout("UpdateTimer()", 1000);
	}

	function Start() {
	  tStart   = new Date();
	  document.theTimer.theTime.value = "00:00";
	  timerID  = setTimeout("UpdateTimer()", 1000);
	}

	function Stop() {
	  if(timerID) {
	    clearTimeout(timerID);
		timerID  = 0;
	  }
	  tStart = null;
	}

	function Reset() {
	  tStart = null;
	  document.theTimer.theTime.value = "00:00";
	}
	//-->

	</script>
</head>
<<body onload="Reset()" onunload="Stop()">
<center><form name="theTimer"><table>
   <tr>
      <td colspan=3 align=center>
         <input type=text name="theTime" size=5>
      </td>
   </tr>
   <tr><td></td></tr>
   <tr>
      <td>
         <input type=button name="start" value="Start" onclick="Start()">
      </td>
      <td>
         <input type=button name="stop" value="Stop" onclick="Stop()">
      </td>
      <td>
         <input type=button name="reset" value="Reset" onclick="Reset()">
      </td>
   </tr>
</table></form></center>
</body>
</html>
BoutonHautDePage


9.4 Les évènements

       9.4.1 Déclencher du Javascript sur le clic d'un lien hypertexte


Il est possible de déclencher du code Javascript sur le clic d'un lien hypertexte en utilisant le pseudo-protocole "javascript:" comme ceci :

<a href="javascript:alert('Hisse et oh - et un cruchon d'rhum !')">Mon lien hypertexte</a>

Autre possibilité, déclaration puis appel d’une fonction dans un lien hypertexte :

	function bonjour() // Déclaration de la fonction ‘bonjour’
	{
	// [Une ou plusieurs actions];
	alert(‘Bonjour !’);
	}


Appel de la fonction dans le lien hypertexte :

<a href="javascript:bonjour()">appel</a>

Nous nous en servirons beaucoup pour gérer les évènements.



       9.4.2 Exécuter du Javascript sur le clic d'un bouton (onClick)


Tout ce qui peut se passer sur les contrôles peut déclencher une fonction JavaScript. Chaque élément de formulaire (Bouton, zone de texte, case à cocher, ...) est susceptible de déclencher du code JavaScript lorsqu'il se passe quelque chose avec cet élément (quand on clique dessus, quand on le met à jour, quand on double-clique, ...)

Donner un nom à un bouton

L'attribut name permet de donner un nom à ce bouton :

<INPUT type="button" value="Cliquez sur moi" name="LeBouton">

Exécuter le JavaScript en pressant le bouton (onClick)

Ici nous ouvrons simplement une boîte de dialogue alert dès qu'on clique (onClick) : Notez les apostrophes à la place des guillemets autour de 'Vous venez de cliquer', puisque l'appel à javascript est lui-même encadré par des guillemets :

<INPUT type="button" onClick="javascript:alert('Vous venez de cliquer')">

Mais le mieux c’est d'appeler une fonction JavaScript placée en en-tête de fichier HTML.
Fonction à placer avant le code html :

	<script language="javascript" type="text/javascript">
	<!--
	  function test()
	  {
	  alert("Vous venez de cliquer")
	  alert("Et voilà...")
	  }
	//-->
	</script>


Suivi du code html :

<html>
  <head>  </head>
  <body>
    <INPUT type="button" onClick="javascript:test()">
  </body>
</html>


•       Exemple simple : Sur le clic d'un bouton

Voici un bouton qui affiche simplement Merci quand on clique dessus :

<INPUT type="button" value ="Cliquez-moi" onClick="JavaScript:alert('Merci')">

On a encadré Merci par des apostrophes ' et pas par des guillemets " simplement parce que le paramètre de onClick doit lui-même être entre guillemets.

Appeler une fonction JavaScript sur le clic d’un bouton

Cet exemple fait strictement la même chose, mais en appelant une fonction cette fois-ci :

	<script language="javascript" type="text/javascript">
	<!--
	  function traitement()
	  {
	  alert ("Merci")
	  }
	//-->
	</script>

<html>
  <head>  </head>
  <body>
    <INPUT type="button" value ="Cliquez-moi" onClick="JavaScript:traitement()">
  </body>
</html>
BoutonHautDePage

       9.4.3 Les événements double-clic (ondblclick), change (onMouseDown/Up)


Appel d’une fonction JavaScript sur un double clic (ondblclick)

Si j'avais voulu appeler la fonction Traitement lors d'un double clic (ondblclick), j'aurais écrit :

<INPUT type="button" value ="Cliquez-moi" ondblclick="JavaScript:traitement()">

Attention à certaines incompatibilités : Il n'est pas possible de faire cohabiter sur un même bouton un onClick et un ondblclick: C'est le onClick qui serait systématiquement appelé, même en cas de double-clic :

<INPUT type="button" value ="Cliquez-moi" onClick="JavaScript:T2()" ondblclick="JavaScript:T1()">

Bouton qui s’enfonce sous un clic (onMouseDown/Up)

BoutonUp BoutonDown Ce bouton va « s’enfoncer » sous la pression de la souris
<head>
	<script language="javascript" type="text/javascript">
	<!--
	// pré-charger d’abord les images pour que l’effet soit instantané
	img1=new Image()
	img1.src="up.gif"
	img2=new Image()
	img2.src="down.gif"
	//-->
	</script>
</head>

<body>
<a href="page1.html" onMousedown="document.images['example'].src=img2.src" 
onMouseup="document.images['example'].src=img1.src">
<img src="up.gif" name="example" border=0></a>
</body>
BoutonHautDePage

       9.4.4 Prise de focus (onFocus) et perte de focus (onBlur)


On dit qu'un contrôle fenêtré a le focus lorsque l'utilisateur a sélectionné ce contrôle ou que la prochaine saisie clavier va influencer sur le comportement de ce contrôle fenêtré.

Quelques exemples:
♦   Une zone de texte (textbox, edit) a le focus lorsque l'utilisateur peut y saisir des informations. Le focus y est signalé par un curseur (caret) clignotant.
♦   Un bouton a le focus lorsque l'utilisateur peut simuler un clic dessus lorsqu'il appuie sur la touche Entrée. Le focus y est signalé par des petits carrés qui l’entourent.
♦   Une zone de liste (listbox) a le focus lorsqu’un élément y est sélectionné.



•       Prise de focus (onFocus)

Cet exemple remplit la zone de nom par "Votre nom" quand on clique dessus (onFocus) et qu'elle est encore vide :

	<script language="javascript" type="text/javascript">
	<!--
	function prisefocus()
	{
	if (EDINom.value == "")
	  {
	  EDINom.value = "Votre nom"
	  }
	}
	//-->
	</script>

<html>
  <head>  </head>
  <body>
    Nom : <INPUT type="text" name="EDINom" onFocus="JavaScript:prisefocus()"><br>
    Prénom : <INPUT type="text">
  </body>
</html>


•       Perte de focus (onBlur)

On peut déclencher du JavaScript quand on perd le focus (onBlur). On pourrait imaginer par exemple de corriger des données saisies invalides dans un champ lors de la perte de son focus. L'exemple idiot qui suit refuse que votre nom soit Martin (Respectez la casse). Si c'est ce que vous faites malgré tout, il affiche "Non non non" et vous impose d'écrire Drucker à la place :

	<script language="javascript" type="text/javascript">
	<!--
	function pertefocus()
	{
	if (EDINom.value == "Martin")
	  {
	  alert("Non non non !")
	  EDINom.value = "Drucker"
	  }
	}
	//-->
	</script>

<html>
  <head>  </head>
  <body>
    Nom : <INPUT type="text" name="EDINom" onBlur="JavaScript:pertefocus()"> <br>
    Prénom : <INPUT type="text">
  </body>
</html>
BoutonHautDePage

       9.4.5 Déplacement de souris "rollover"


Déplacement de souris sur un élément (onMouseOver)

L'exemple suivant fait la même chose que l'exemple précédent, sauf que cette fois, il n'y a même plus besoin de cliquer dans la zone : Le simple fait de passer la souris par dessus suffit à remplir le champ :

	<script language="javascript" type="text/javascript">
	<!--
	function sourisvient()
	{
	if (EDINom.value == "")
	  {
	  EDINom.value = "Votre nom"
	  }
	}
	//-->
	</script>

<html>
<head>  </head>
<body>
    Nom : <input type="text" name="EDINom" onMouseOver="JavaScript:sourisvient()"><br>
    Prénom : <input type="text">
</body>
</html>


Bulle d’aide sur un texte en gras (onMouseMove)

Il n'est pas indispensable d'avoir un élément de formulaire pour déclencher une fonction JavaScript quand on passe par dessus : L'exemple suivant affiche dans une page HTML : "C'est quoi le web ?", et quand on passe sur le mot web qui est en gras, on déclenche la fonction sourisbouge, car la balise <strong> permet d'inclure le paramètre onMouseMove, comme la plupart des balises de mise en forme d'ailleurs.

	<script language="javascript" type="text/javascript">
	<!--
	function sourisbouge() {
	  alert("C'est l'ensemble des pages HTML") }
	//-->
	</script>

<html>
  <head>  </head>
  <body>
    C'est quoi le <strong onMouseMove="JavaScript:sourisbouge()">web</strong> ???
  </body>
</html>
BoutonHautDePage


Animation sur une image (onMouseOver - onMouseOut)

Dans l'exemple suivant, pour toutes les images repérées par le nom switchimage, on montre l’image a au repos et l’image b quand la souris vient dessus, et de nouveau l’image a quand la souris repart :

<html>
<head>  
	<script language="javascript" type="text/javascript">
	<!--
	function sourisvient() {
	  document.switchimage.src="imagea.gif" }
	function sourispart() {
	  document.switchimage.src="imageb.gif" }
	//-->
	</script>
</head>
<body>
<a href="#" onMouseOver="sourisvient()"onMouseOut="sourispart()"><br>
<img name="switchimage" src="imagea.gif" border="0"></a>
</body>
</html>


Le mieux c’est encore de repérer l’image par un id (getElementById), comme ceci :

<html>
<head>  
	<script language="javascript" type="text/javascript">
	<!--
	function sourisvient() {
	  document.getElementById("switch1")="imagea.gif" }
	function sourispart() {
	  document.getElementById("switch1")="imageb.gif" }
	//-->
	</script>
</head>
<body>
<a href="#" onMouseOver="sourisvient()"onMouseOut="sourispart()"><br>
<img id="switch1" name="Nom" src="imagea.gif" border="0"></a>
</body>
</html>


Un évènement ⇔ une action

Dans l'exemple suivant, nous roulons sur une image A, et cela modifie l'image B. Ici les images sont repérées par le nom imageRollone :

<html>
<head>  
	<script language="javascript" type="text/javascript">
	<!--
	// création d'une fonction nommée "RouleImage" 
	// celle-ci est appelée en cas de "Mouseover" ou de "mouseout" 
	// avec l'argument "0" ou l'argument "1" selon le cas
	function rollimage(a) {
	if (a==1) {document.imageRollone.src=imroll1.src;}  
	else {document.imageRollone.src=imroll2.src;}
	}
	// déclaration des images
	imroll1=new Image();
	imroll2=new Image();
	// indication de la localisation des images
	// (ce qui a pour effet automatique de les précharger en mémoire)
	imroll1.src="abc/roulez2.gif";
	imroll2.src="abc/roulez3.gif";
	//-->
	</script>
</head>
<body>
<a href="javascript:void(0)" onMouseOver="rollimage(2)"   onMouseOut="rollimage(1)">
  <img src="abc/roulez1.gif" border="0"></a>
  <img src="abc/roulez2.gif" name="imageRollone">
</body>
</html>
BoutonHautDePage


Un évènement ⇔ plusieurs actions (ImageMap ou zones sensibles)

Dans cet exemple, l'image de gauche (quatre cercles orangés) possède une "carte" (image map) qui lui attribue trois zones sensibles différentes. ZonesSensibles

A chacune d'entre-elles correspondent deux actions en cas de survol par la souris :
- Modification de l'Image survolée
- Modification de l'image de droite (présente sur la page dès le début, mais invisible car de même couleur). Ici les images sont repérées par l’argument de la fonction modifie :

<html>
<head>  
	<script language="javascript" type="text/javascript">
	<!--
	// création d'une fonction nommée "modifie" 
	// celle-ci est appelée en cas de "Mouseover" sur une zone de
	// l'image nommée "ImageDeDroite"
	function modifie(n) {
	  document.imageDeDroite.src=eval("imrollA_"+n);
	  document.imageDeGauche.src=eval("imrollB_"+n);
	}
	// déclaration des images ; nous utiliserons en tout 8 images
	// correspondant aux quatre états possibles, qui consistent en :
	// survol de la zone 1, survol de la zone 2, survol de la zone 3, pas de survol
	// Le fait de déclarer un objet de la classe "Image( )" et de donner son adresse
	// a pour effet immédiat de le précharger en mémoire.
	imrollB_0=new Image();   imrollB_0.src="gauche1.gif";
	imrollB_1=new Image();   imrollB_1.src="gauche2.gif";
	imrollB_2=new Image();   imrollB_2.src="gauche3.gif";
	imrollB_3=new Image();   imrollB_3.src="gauche4.gif";
	imrollA_0=new Image();   imrollA_0.src="droite1.gif";
	imrollA_1=new Image();   imrollA_1.src="droite2.gif";
	imrollA_2=new Image();   imrollA_2.src="droite3.gif";
	imrollA_3=new Image();   imrollA_3.src="droite4.gif"";  // déclaration des images
	//-->
	</script>
</head>
<body>
<map name="carte">
    <!-- définition d'une liste de zones de liens.
    chaque lien ne pointe vers rien ("javascript:void(0)") mais   
    pourrait tout à fait déclencher l'ouverture d'une page  //-->
   <area shape="rect" coords="0,0,43,40" 
     href="javascript:void(0)" onmouseover="modifie('1')">
   <area shape="rect" coords="0,51,36,95" 
     href="javascript:void(0)" onmouseover="modifie('2')">
   <area shape="rect" coords="42,81,85,120"
     href="javascript:void(0)" onmouseover="modifie('3')">
   <area shape="default" 
     href="javascript:void(0)"  onmouseover="modifie('0')">
</map>
    <img src="gauche1.gif" border="0" usemap="#carte" name="imageDeDroite">
    <img src="droite1.gif" name="ImageDeGauche">
</body>
</html>


Changer le contenu d'une balise (InnerHTML)

InnerHTML permet de modifier le texte contenu dans une balise DIV au survol d'un lien (ou de n'importe quel autre élément).

Introduite par Internet Explorer et donc propriétaire, elle a depuis été adoptée par les principaux navigateurs modernes (Mozilla, Opera, Safari).

Exemple : Ce script donne des indications sur un lien quand le curseur de la souris le survole, comme par exemple décrire à votre visiteur ce qu'il trouvera dans la page liée, au passage de la souris...

<html>
<head>
<style type='text/css'>
#textDiv { position:absolute; top:8; right:8; border-style:solid; border-width:thin; background:lightgrey;}
</style>  
	<script language="javascript" type="text/javascript">
	<!--
	function afficheDescURL(toThis) 
	{
	if (document.getElementById)
	  {
	  document.getElementById("textDiv").innerHTML=toThis;
	  }
	  else if (document.all) 
	  {
	  document.all["textDiv"].innerHTML=toThis;
	  }
	}
	base = " Vous êtes sur la page d'accueil ";
	afficheDescURL(base); 
	//-->
	</script>
</head>
<body>
<a href="#" onMouseOver="afficheDescURL(' Nos coordonnées postale et Internet ')" 
	onMouseOut="afficheDescURL(base)">Contact</a><br>
<a href="#" onMouseOver="afficheDescURL(' Une réponse claire à la plupart de vos questions ')" 
	onMouseOut="afficheDescURL(base)">F.A.Q.</a><br>
<a href="#" onMouseOver="afficheDescURL(' Contient mon C.V., entre autres [moimeme.fr] ')" 
	onMouseOut="afficheDescURL(base)">Mon site pro</a><br>
<div id="textDiv"></div>
</body>
</html>
BoutonHautDePage

       9.4.6 Evènements de page (onLoad, onUnLoad)


Cet exemple illustre le chargement et déchargement (onLoad, onUnLoad). Il affiche simplement "Je charge la page" dès qu'on ouvre la page HTML en question, et "Je quitte la page" dès qu'on quitte la page (ou qu'on la ferme).

<html>
<head>
	<script language="javascript" type="text/javascript">
	<!--
	function jecharge()
	{
	alert("Je charge la page")
	}

	function jedecharge()
	{
	alert("Je quitte la page")
	} 
	//-->
	</script>

</head>
  <body onLoad="JavaScript:jecharge()" onUnLoad="JavaScript:jedecharge()">
    Je suis dans la page
  </body>
</html>
BoutonHautDePage

       9.4.7 Tableau des événements qui peuvent exécuter du JavaScript

Evénement Explication S’applique particulièrement à
  onabort   .   .
  onafterupdate   .   .
  onbeforeunload   .   .
  onbeforeupdate   .   .
  onblur   Quand on perd le focus   .
  onbounce   .   .
  onchange   .   .
  onclick   Quand on clique   N'importe quel objet de formulaire, mais ce sont
  les boutons qui sont le plus appropriés
  ondataavailable   .   .
  ondatasetchanged   .   .
  ondatasetcomplete   .   .
  ondblclick   Quand on double-clique   N'importe quel objet de formulaire, mais les
  boutons prennent plutôt le ONCLICK
  ondragstart   .   .
  onerror   .   .
  onerrorupdate   .   .
  onfilterchange   .   .
  onfinish   .   .
  onfocus   Quand on prend le focus   N'importe quel objet de formulaire, mais les
  zones d'édition sont bien adaptées
  onhelp   .   .
  onkeydown   .   .
  onkeypress   .   .
  onkeyup   .   .
  onload   Quand la page s'ouvre   BODY
  onmousedown   .   .
  onmousemove   Quand on déplace simplement la
  souris par dessus
  N'importe quel objet de formulaire
  onmouseout   .   .
  onmouseover   .   .
  onmouseup   .   .
  onreadystatechange   .   .
  onreset   .   .
  onresize   .   .
  onrowenter   .   .
  onrowexit   .   .
  onscroll   .   .
  onselect   .   .
  onselectstart   .   .
  onstart   .   .
  onsubmit   .   .
  onunload   .   .
BoutonHautDePage

       9.4.8 Ecouteur d’évènement (objet event)


Ref 12-96 à 101

Travaux
BoutonHautDePage

9.5 Créer du code avec du Javascript


(Imbrication HTML et Javascript)

       9.5.1 Créer du code HTML avec du Javascript


La méthode (fonction) document.write() permet d'écrire aussi bien du texte simple que du HTML. Il suffit d'insérer des balises HTML dans la chaîne passée en paramètre de la fonction.

       document.write("<p>Hisse et oh - et un cruchon d'rhum !</p>");

Il faut cependant faire attention à l'utilisation des guillemets nécessaires à certains attributs des balises HTML. Ces guillemets devront être précédés du caractère \ (antislash) afin de ne pas provoquer l'interruption de la chaîne à afficher.

	<script language="javascript" type="text/javascript">
	<!--
	document.write("<p><span style=\"color: red;\">Du code HTML généré par du Javascript</span></p>");
	//-->
	</script>


Ou alors il est également possible de remplacer les guillemets par des apostrophes, mais attention aux apostrophes dans le texte html ;) Si il y en a il faut également les précéder du caractère \ (antislash).

	<script language="javascript" type="text/javascript">
	<!--
	document.write('<p><span style="color: red;">Hisse et oh - et un cruchon d\'rhum !</span></p>');
	//-->
	</script>

       9.5.2 Créer du code Javascript avec ... du Javascript !


La méthode (fonction) eval() vous permet d'exécuter une chaîne de caractères comme s'il s'agissait de la ligne d'un code Javascript.

	<script language="javascript" type="text/javascript">
	<!--
	var gs_code = "document.write(\"<p><span style=\\\"color: red;\\\">Du code HTML qui est créé 
	par du Javascript, lui-même généré par du ... Javascript !</span></p>\")";
	eval(gs_code);
	//-->
	</script>


Mais attention, il faut tripler les antislashes à l'intérieur de notre Javascript du Javascript

BoutonHautDePage


9.6 Les fenêtres popup


Comment ouvrir une fenêtre en javascript ? - Décrivons ceci pour mémoire, mais à éviter, car la plupart des navigateurs bloquent aujourd'hui les fenêtres pop_up, et les internautes débutants ne savent pas toujours les débloquer !... En effet les fenêtres pop_up étaient et sont encore trop utilisées pour afficher des publicités intempestives qui gênent la navigation.


       9.6.1 La méthode (ou fonction) open


Pour ouvrir une fenêtre en javascript, on utilise la méthode (fonction) open() de l'objet window.

       window.open( [url] [,nom] [,propriétés])

La méthode open() possède donc 3 paramètres :

Paramètre Description
  url   Adresse de la page à ouvrir dans la fenêtre.
  nom   Nom de la fenêtre, qui pourra être utilisé en temps que "target" depuis les autres pages html.
  propriétés   Propriétés de la fenêtre (hauteur, largeur, etc..).


Propriétés de la fenêtre

Les caractéristiques de la fenêtre sont définies à l'aide de différentes propriétés :

Propriété Description Valeurs
  directories   Afficher la barre des liens.   yes, no
  height   Hauteur de la fenêtre.   taille en pixels
  location   Afficher la barre d'adresse.   yes, no
  menubar   Afficher la barre de menu.   yes, no
  resizable   Possibilité de redimentionner la fenêtre.   yes, no
  scrollbars   Afficher les barres de défilement.   yes, no
  status   Afficher la barre de status.   yes, no
  toolbar   Afficher la barre d'outils.   yes, no
  width   Largeur de la fenêtre.   taille en pixels

       9.6.2 Fermer une fenêtre popup


Pour fermer une fenêtre popup, on utilise la méthode (fonction) close().

       window.close()

BoutonHautDePage

       9.6.3 Afficher une image quand on clique dessus


Insérez le code ci-dessous dans votre page entre les balises d'entête (<head> ..... </head>)

<head> ..... 

<script language="javascript" type="text/javascript">
<!--
// Fonction ouvre image d'un clic dans une fenêtre popup adaptée à la taille de l'image 
// et qui se ferme d'un clic
// fonction twPopupImage(chemin_image, titre_popup, texte_alternatif)
function twPopupImage(chemin_image, titre_popup, texte_alternatif) { 
  // Compatible IE5+ / NN6+ / Mozilla
  oFenetre = window.open('','Image','width=400,height=400,toolbar=no,scrollbars=no,resizable=yes');
  oFenetre.document.write("<html><head><title>"+titre_popup+"</title></head>"); 
  oFenetre.document.write("<script type=\"text/javascript\">function twAjustePopUp() {");
  oFenetre.document.write(" if (document.images[0].complete) { ");
  oFenetre.document.write("window.resizeTo(document.images[0].width+29,document.images[0].height+63);");
  oFenetre.document.write(" window.focus();} else { setTimeout('twAjustePopUp()',1000) } }</"+"script>");
  oFenetre.document.write("<body onload='twAjustePopUp()' onblur='window.close()' onclick='window.close()'"); 
  oFenetre.document.write(" leftMargin=0 topMargin=0 marginwidth=0 marginheight=0>");
  oFenetre.document.write("<table width='100%' border='0' cellspacing='0' cellpadding='0' height='100%'>"); 
  oFenetre.document.write("<tr><td valign='middle' align='center'>");
  oFenetre.document.write("<img src='"+chemin_image+"' border='0' alt='"+texte_alternatif+"' title='"+titre_popup+"'>");
  oFenetre.document.write("</td></tr></table></body></html>"); 
  oFenetre.document.close(); 
} 
//-->
</script>
</head>


Puis insérez le code ci-dessous à l'endroit des Images dans le corps de texte (<body> ..... </body>)

<body> ..... 

<!-- §§§§§§§§§§ Affichage d'une image quand on clique dessus §§§§§§§§§§§ //-->
<td height="88" align="center" valign="middle" bgcolor="#5E0000"> 
<!-- 'onClick' exécute pour cela la fonction twPopupImage(chemin_image, titre_popup, texte_alternatif)  //-->
<img 
onClick="twPopupImage(
'pict/080102_SD14_CapteurFoveonX3_5.gif', 
'CapteurFoveonX3',
'080102_SD14_CapteurFoveonX3_5.gif')"
class="ImageCentre"
alt="080102_SD14_CapteurFoveonX3_5.gif" 
src="pict/080102_SD14_CapteurFoveonX3_5.gif"
style="cursor:pointer"
width="50" 
height="50" 
title="Agrandir" 
> 
<!-- title="Agrandir" Affiche une bulle 'Agrandir' quand la souris passe au-dessus de la vignette //-->
</td>
<!-- §§§§§§§§§§§§§§§§§§§§§§§§§§§§§ //-->
</body>
BoutonHautDePage

       9.6.4 Ouvrir et fermer une fenêtre sur une autre page HTML


L'exemple ci-dessous permet, à partir d'un fichier de base, d'ouvrir et de fermer une fenêtre dans une 2e page HTML (avec un soupçon de PHP dans le fichier fenêtre).

• Fichier de base, index.php :

<html>
<head>
	<script language="javascript" type="text/javascript">
	function OuvrirFenetre(url,nom,details) {
	window.open(url,nom,details)
	}
	</script>
</head>
<body>
<p>
<a href="javascript:OuvrirFenetre('popup.php?refer=index.php','popup','width=300,height=250')">ouvrir popup</a>
</p><p>
<a href="index2.php">page suivante</a>
</p>
</body>
</html> 


• Fichier fenêtre, popup.php :

<html>
<body onload="window.focus();">
<p><b>refer :</b> <?php echo $_GET['refer']; ?></p>
<p><a href="javascript:window.close();">Fermer la fenetre</a></p>
</body>
</html> 


• Deuxième page, index2.php :

<html>
<head>
	<script language="javascript" type="text/javascript">
	function OuvrirFenetre(url,nom,details) {
	window.open(url,nom,details)
	}
	</script>
</head>
<body>
<p>
<a href="javascript:OuvrirFenetre('popup.php?refer=index2.php','popup','width=300,height=250')">ouvrir popup</a>
</p>
<p><a href="index.php">page précédente</a></p>
</body>
</html> 
BoutonHautDePage

9.7 Couches et calques


Les calques sont des balises HTML permettant d’afficher des données en arrière plan. Ces données peuvent se déplacer sur l’écran, c'est-à-dire glisser sur le calque 1 de base. Ils sont une alternative permettant d’éviter d’ouvrir des fenêtres pop-up.

Les calques (ou layers ou boîtes flottantes) sont des zones de la page délimitées par les balises : <div></div> ou <span></span>

Important: <layer></layer> ou <ilayer></ilayer> L’objet layers se situait juste sous l'objet document dans la hiérarchie objet JavaScript. L'objet layers n'est plus soutenu par Netscape à partir de la version 6.0. Ici nous utiliserons seulement les balises <span> ou <div>

       9.7.1 Calques et css


Les propriétés des calques sont définies dans des feuilles de styles CSS (intraligne, ou classe de feuille de style). Les exemples qui suivent sont en principe compatibles IE et NN, PC ou Mac. Sauf un bug interne à NN 4.x qui gère mal les calques quand on redimensionne la fenêtre du navigateur.

Les attributs classiques de la balise <div>:
       - id : le nom du calque (obligatoire pour pouvoir manipuler le calque avec du javascript, pour NN 4.x éviter les “_” dans le nom du calque)
       - class : nom de la classe donnée à la feuille de style
       - style : feuille de style intraligne

La feuille de style

♦ Avec une feuille de style intraligne
(à éviter avec Netscape 4.x qui n’acceptera que 2 calques et ignorera les autres)

<div id=”mon_calque” style=”background-color:#ffcc00; layer-background-color:#ffcc00; position:absolute; top:10px; left:10px; width:100px; height:100px; visibility:visible”></div>

♦ Avec l’appel d’une classe définie dans l’entête

<head> :
<style type="text/css">
<!--
.attributs {background-color:#ffcc00; layer-background-color:#ffcc00; position:absolute; top:10px; left:10px; 
width:100px; height:100px; visibility:visible}
//-->
</style>
</head> :


♦ et dans le <body> ...

<body>
<div id="mon_calque" class="attributs">[contenu]</div>
</body>


Note : Le contenu du calque doit être non vide pour NN 4.x, sinon il n’affiche rien. Netscape adapte la largeur du calque à celle du texte ou de l’image contenue ainsi que la couleur de fond. Si le calque fait 150px*150px mais que le texte ne le remplit pas entièrement et couvre une zone de 50px*50px, par exemple avec une couleur de fond, le calque apparaîtra comme s’il était définit en 50px de largeur et 150px de hauteur.

Pour contourner ce problème on peut insérer dans le calque une images transparente de 1px de haut et l’étirer sur la longueur pour obtenir la taille du calque désirée. On peut aussi mettre le contenu du calque dans un tableau aux mesures souhaitées. Enfin, pour tous les navigateurs, si le contenu du calque dépasse la taille du calque, le calque sera automatiquement ajusté à la taille de son contenu si l’on n’a pas précisé de propriété overflow.


Styles des calques

Ils sont (entre autres) apportées par les feuilles de style possibles :

position: la méthode de positionnement : position:relative ou position:absolue
top: la distance au dessus du calque : top:50px
left: la largeur à gauche du calque : left:100px
width: la largeur : width:75px
height: la hauteur : height:75px
visibility: la visibilité : visibility:visible ou visibility:hidden ou visibility:default ou visibility:inherit
(auquel cas le calque hérite de l’attribut de son calque parent, pour les calques imbriqués dans d’autres éléments)
z-index: la profondeur (1°, 2°plan...) : z-index:1 (ou le chiffre le + élevé sera au 1er plan)
background-color: la couleur de fond : background-color:#ffcc00 ou layer-background-color:#ffcc00
(préféré par NN, le mieux étant d’indiquer les 2 !!)
background-image: l’image de fond : background-image:url(img/mon_image.gif) ou
layer-background-image:url(img/mon_image.gif) (préféré par NN, le mieux étant encore d’indiquer les 2 !!)
overflow: La façon dont les éléments dépassant du calque sont traités : overflow:hidden ou overflow:visible ou overflow:auto ou overflow:scroll (ce qui créera des barres de défilement), ne marchera convenablement dans NN 4.x que lorsque le calque sera imbriqué dans un autre élément (calque ou tableau par exemple) pour le hidden alors que le scroll n’est pas possible avec NN 4.x

BoutonHautDePage

       9.7.2 Manipuler des calques


Syntaxe de la gestion des calques en fonction du navigateur

Chaque navigateur gère les calques à sa façon, y compris Netscape 4.x qui est tout à fait particulier. Voici comment accéder au calque suivant le type de navigateur :

♦ Ecriture pour les navigateurs récents ( > IE 4 et > NN 6 )

       document.getElementById(”nomducalque”) // Cas > IE 4 et > NN6

♦ Pour IE 4/5/6 (syntaxe non reconnue par NN) :

       document.all[”nomducalque”] // Cas IE 4/5/6

♦ Sous NN 4.x, la syntaxe est différente :

       document.Layers["nomducalque"]

♦ Ensuite on précise comment on modifie la feuille de style et quel est l'attribut :

       document.getElementById(”nomducalque”).style.visibilty // Cas > IE 4 et > NN6
       document.all[”nomducalque”].style.left // Cas IE 4/5/6
       document.layers[”nomducalque”].visibility // Cas NN 4.x
       document.layers["nomducalque"].left // Cas NN 4.x

Dans les cas où les calques sont imbriqués, là encore il faut une syntaxe spécifique à NN 4.x, alors que pour les autres navigateurs, la syntaxe est la même que pour un calque simple.

♦ Calques imbriqués, syntaxe NN 4.x :

       document.layers["nom_calque_parent"].layers["nom_calque_enfant"].visibility



Afficher un calque avec son nom en paramètre

Pour réaliser des fonctions complètes, il faut donc à chaque fois donner les instructions NN 4.x, IE 4 et les versions plus récentes.

	<script language="javascript" type="text/javascript">
	<!--
	function affiche(calque) {
	if (document.getElementById) // si l’instruction getElementById est valide cas > IE 4 et > NN6
	  document.getElementById(calque).style.visibility="visible";
	if (document.all && !document.getElementById) // Cas IE 4/5/6
	  document.all[calque].style.visibility="visible";
	if (document.layers) // Cas NN 4.x
	  document.layers[calque].visibility="visible";
	}
	//-->
	</script>


Attention aux guillemets et aux apostrophes lorsqu’on appelle la fonction affiche

       onmouseover=“affiche(‘moncalque’)”

BoutonHautDePage

       9.7.3 Cacher et montrer un calque texte


Faire apparaître et disparaître des couches (ou layers) : exemple d’un formulaire où le clic au sein d'un champ texte active l'affichage d'un conseil ou d'une aide à propos de l'élément en cours. Une fois l'élément quitté, le conseil disparaît.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Montrer et cacher un calque</title>
<script language="javascript" type="text/javascript">
<!--
function montre(object) {
  if (document.layers && document.layers[object]) { 
    document.layers[object].visibility = 'visible'; } 
  else if (document.all) {
    document.all[object].style.visibility = 'visible';
    document.all[object].style.zIndex = 100; }
  else if (document.getElementById) {
    document.getElementById(object).style.visibility = 'visible';
    document.getElementById(object).style.zIndex = 100; } 
  }

function cache(object) {
  if (document.layers && document.layers[object])
    { document.layers[object].visibility = 'hidden'; } 
  else if (document.all)
    { document.all[object].style.visibility = 'hidden'; }
  else if (document.getElementById) 
    { document.getElementById(object).style.visibility = 'hidden'; } 
  }
//-->
</script>
</head>
<body>
<form> <input onfocus="montre('txtNom')" onblur="cache('txtNom')" type="text"/>
<span id="txtNom" style="visibility: hidden;">
Indiquez votre nom</span><br/>
<input onfocus="montre('txtPrenom')" onblur="cache('txtPrenom')" type="text"/>
<span id="txtPrenom" style="visibility: hidden;">
Indiquez votre prénom</span><br/>
<input onfocus="montre('txtAge')" onblur="cache('txtAge')" type="text"/>
<span id="txtAge" style="visibility: hidden;">
Indiquez votre âge</span><br/>
</form>
</body>
</html>
BoutonHautDePage

       9.7.4 Agrandir et réduire une image


Faire apparaître et disparaître une image agrandie en cliquant sur son icone.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>cache-montre image dans un div</title>
<!-- on peut entrer le javascript qui suit dans un fichier jscr externe "jscr/fonctions.js" -->

<script language=javascript type='text/javascript'> 
<!--
function hidediv() { 
if (document.getElementById) { // DOM3 = IE5, NS6 
//document.getElementById('hideshow').style.visibility = 'hidden'; 
document.getElementById('hideshow').style.display = 'none'; 
document.getElementById('showhide').style.display = 'block'; 
} 
} 

function showdiv() { 
if (document.getElementById) { // DOM3 = IE5, NS6 
//document.getElementById('hideshow').style.visibility = 'visible'; 
document.getElementById('hideshow').style.display = 'block'; 
document.getElementById('showhide').style.display = 'none'; 
} 
} 
//-->
</script> 

</head>
<body onload="javascript:hidediv()">
<strong>Cache et montre une image dans le div d'un tableau</strong><br/><br/>
<!-- @@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@ //-->
<table style="width: 98%; text-align: left; margin-left: 0; margin-right: 0;" 
border="0" cellpadding="2" cellspacing="2">
<tbody>
<tr>
<td>

<div id="showhide">
<a href="javascript:showdiv()">
<img src="pict/imagc.jpg" class="ImageGauche" width="30" height="30" alt="" border="0" title="agrandir"></a>
</div>

<div id="hideshow">
<a href="javascript:hidediv()"> 
<img SRC="pict/imagc.jpg" class="ImageGauche" width="120" height="120" border="0" alt="" title="fermer"></a> 
</div>
</td>

<!—Partie contenant un texte quelconque //-->
<td align="undefined" valign="undefined">
Phasellus sed nisl. Integer rhoncus risus vitae arcu. Praesent
sed diam non justo sagittis vulputate. Etiam faucibus posuere tortor.
Cum sociis natoque penatibus et magnis dis parturient montes, nascetur
ridiculus mus. Aliquam porta. Vestibulum lectus ante, laoreet a,
condimentum sit amet, dictum ac, sapien. Ut et tortor. Aliquam vitae
lacus. Vestibulum non pede eget ante elementum elementum. Quisque
accumsan wisi id quam. Integer tortor justo, cursus volutpat, vehicula
ut, pellentesque ultrices, neque. Aenean eu tortor vitae dui pretium
molestie. Sed dui nibh, rhoncus ut, egestas quis, commodo id, magna.
Morbi gravida tellus id diam. Nunc nonummy leo nec velit. Curabitur id
lacus a ipsum lacinia accumsan.
<!-- @@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@ //-->
</td>
</tr>
</tbody>
</table>
<!-- @@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@ //-->

<p>Nunc ullamcorper imperdiet lorem. Aliquam convallis, sapiensit amet
malesuada dignissim, sem tortor interdum risus, vel
scelerisque sapien est ac justo. Sed varius nisl lacinia libero
accumsan luctus. Nam luctus leo. In hac habitasse platea dictumst.
Donec eget massa. Vivamus arcu ante, condimentum eu, imperdiet et,
pulvinar vel, neque. Morbi auctor. Sed ac ligula. Pellentesque
adipiscing orci id ipsum. Fusce ipsum. Cras eget neque. Nulla at sapien
ornare augue tempor viverra. Praesent vulputate. Mauris mi. Quisque
quam. Cras fermentum orci non risus. Phasellus quis augue vitae felis
tincidunt dignissim. Vestibulum ut nulla at eros sagittis ullamcorper.</p>

</body>
</html>
BoutonHautDePage

       9.7.5 Déplacer un calque (texte ou image)


Cette opération s’appelle « drag and drop ». Elle permet de déplacer une image ou un texte dans la page HTML.

<html>
<head>
<title>Drag & Drop</title>
</head>

<body>
<script language="javascript" type="text/javascript">
<!--
var IE=document.all ? true : false;
var NS=document.layers ? true : false;
var Mouse=new Object;
var Drag={OffX:0, OffY:0, Layer:false};
var Layers=new Array();

/******************************* Modifier simplement ici **********************/
// Pour créer un nouvel objet Drag & Drop enable, il suffit de faire ceci :
//	var Mavariable = new Layer("<tag1 html><tag2 html>");

var Smile1=new Layer("<img src=smile1.gif>");
var Smile2=new Layer("<img src=smile2.gif>");
var Smile3=new Layer("<img src=smile3.gif>");
var Smile4=new Layer("<img src=smile4.gif>");
var Smile5=new Layer("<img src=smile5.gif>");
var Smile6=new Layer("<img src=smile6.gif>");
var Smile7=new Layer("<img src=smile7.gif>");
var Smile8=new Layer("<img src=smile8.gif>");
var DuTexte=new Layer("Ceci est un <b>texte</b> que l'on peut déplacer<br>
Vous pouvez aussi déplacer les <i>smileys</i>");

/******************************** Fin des modifications ************************/

if(NS)document.captureEvents(Event.MOUSEMOVE);
document.onmousemove=function(NSEvent){
	if(IE){
		Mouse.X=event.x + document.body.scrollLeft;
		Mouse.Y=event.y + document.body.scrollTop;
	}
	else if(NS){
		Mouse.X=NSEvent.pageX;
		Mouse.Y=NSEvent.pageY;
	}
	if(Drag.Layer)Drag.Layer.Move(Mouse.X - Drag.OffX, Mouse.Y - Drag.OffY);
}

function Layer(tag){
	this.Index=Layers.length;
	this.Move=function(left, top){
		eval('Layers[' + this.Index + '].Object' + this.Style + '.left=' + left);
		eval('Layers[' + this.Index + '].Object' + this.Style + '.top=' + top);
	}
	if(IE){
		document.write('<div id=lay' + this.Index + ' style="position:absolute;">' + tag + '</div>');
		this.Object=document.all['lay' + this.Index];
		this.Style='.style';
		this.Object.Index=this.Index;
	}
	else if(NS){
		document.write('<layer id=lay' + this.Index + '>' + tag + '</layer>');
		this.Object=document.layers['lay'+ this.Index];
		this.Style='';
		this.Object.Index=this.Index;
		this.Object.captureEvents(Event.MOUSEDOWN|Event.MOUSEUP);
	}
	this.Object.onmousedown=function(NSEvent){
		if(IE){
			Drag.OffX=event.offsetX;
			Drag.OffY=event.offsetY;
		}
		else if(NS){
			Drag.OffX=NSEvent.x;
			Drag.OffY=NSEvent.y;
		}
		Drag.Layer=Layers[this.Index];
		return false;
	}
	this.Object.onmousemove=function(){return false;}
	this.Object.onmouseup=function(){Drag.Layer=false;}
	Layers[this.Index]=this;
}
//-->
</script>
<h2 align=center>Drag & Drop</h2>
<div align=center>
On appelle Drag & Drop le fait de pouvoir déplacer un objet en cliquant dessus avec la souris.<br>
C'est très simple à faire :
<blockquote><pre>
var UneVariable = new Layer("<tag>Ceci est du texte dans l'objet</tag>");
</pre></blockquote>Ainsi, vous pouvez déplacer les objets créés avec cette méthode qui sont situés pour l'instant 
dans le coin supérieur gauche : le petit paragraphe de texte ainsi que les smileys superposés.<br>
</div>
</body>
</html>.
BoutonHautDePage

       9.7.6 Images en couches


Une méthode intéressante pour visualiser des images. Dans ce script vous pouvez préciser les coordonnées de l’image, et après avoir cliqué sur son icône l’image apparaîtra à l’emplacement défini en coordonnées.

<html>
<head>  
<script language="javascript" type="text/javascript">
<!--
// Pour le moment il n’y a aucune couche définie
var trigger=0
// Il n’y a pas de couche activée
var vis=0

function initthumb()
	{
		document.onmousemove = sniff
		document.onmouseup = sniff
		document.onmousedown = sniff
		// déclencher le test souris Netscape
		if (document.layers){document.captureEvents(Event.MOUSEDOWN | Event.MOUSEMOVE | Event.MOUSEUP)}
		// appel de dummy pour aider IE à récupérer largeur + hauteur
		if (document.all)dopic('dummy','',1,1,1,1)
	}

function sniff(e){
		// récupérer la position souris
		if (document.layers) {var mousex=e.pageX; var mousey=e.pageY;fx=mousex;fy=mousey;}
		else if (document.all) {var mousex=event.x; var mousey=event.y+document.body.scrollTop;fx=mousex;fy=mousey}
				}		

function dopic(name,auto,picx,picy)
{
	if (vis == 0) // Pas de couche active, car une double couche planterait :(
		{
			// Coordonnées et offsets par défaut
			var oldpicx=100;
			var oldpicy=100;
			// Couleur bordure
			var rahmen='silver'
			// texte alternatif
			var alttext="Click to close the picture"

				// S’il n’y a pas de couche...
					if (trigger!=1)
						{
						trigger=1 // Il y a une couche à présent!
						// Création d’une couche cachée (Netscape)
							if(document.layers){
								//Piclayer
								document.layers['picarea'] = new Layer(1);
								document.layers['picarea'].left = oldpicx;
								document.layers['picarea'].top = oldpicy;
								document.layers['picarea'].height = 20;
								document.layers['picarea'].visibility = "hidden";
							}
// Création d’une couche cachée dans Internet Explorer
							else if (document.all){
								document.body.insertAdjacentHTML("BeforeEnd",'<DIV ID="picarea" 
								STYLE="z-index:200;position:absolute;left:"+picx+";top:"+picy></DIV>');
							}
						}

				// S’il y a une couche, cachons-la!
					if (trigger != 0){
						if (document.layers){document.layers['picarea'].visibility="hide"} //Netscape
						if (document.all){picarea.style.visibility="hidden"}
					}
			// Définition du contenu de la couche
			content="<a href=\"javascript:clearpic()\" style=\"color:"+rahmen+"\"><img src=\"";
			content=content+name+"\" name=\"pic\" alt=\""+alttext+"\" border=1";
			content=content+"></A>";
			// Ecrire le contenu dans la couche et le montrer (Netscape)
				if (document.layers) {
					sprite=document.layers['picarea'].document;
  					sprite.open();
					sprite.write(content);
					sprite.close();
					// S’il n’y a pas d’auto set, placer la couche à picx et picy
					if (picx != null && auto == ''){ 
						document.layers['picarea'].left = picx;
						document.layers['picarea'].top = picy;
					}
					// Si auto est ‘set’:
					if (auto != "")
						{ 
						// Récupérer largeur/hauteur de l’image
						xw=document.layers['picarea'].document.images['pic'].width 
						yw=document.layers['picarea'].document.images['pic'].height
						// Centrer l’image à la position souris
						newpicx = fx - (xw/2)
					    newpicy = fy - (yw/2)
							// S’il y a des offsets, définissons-les
							if (picx) {newpicx=newpicx + picx}
							if (picy) {newpicy=newpicy + picy} 
						// Positionner la couche
						document.layers['picarea'].left = newpicx;
						document.layers['picarea'].top = newpicy;
						}
					// Montrer la couche
					document.layers['picarea'].visibility="show";
					// Rendre la couche visible
					vis=1
				 }

			// Ecrire le contenu dans la couche et le montrer (Internet Explorer)
				if (document.all) {
					document.all['picarea'].innerHTML = content;
					// S’il n’y a pas d’auto set, placer la couche à picx et picy
					if (picx != null && auto == ''){
						picarea.style.top=picy
						picarea.style.left=picx;
					}
					// Si auto est ‘set’:
					if (auto != "")	{ 
						// Récupérer largeur/hauteur de l’image
						xw=document.all['pic'].width
						yw=document.all['pic'].height
						// Centrer l’image à la position souris
				      newpicx = fx - (xw/2)
				      newpicy = fy - (yw/2)
							// S’il y a des offsets, définissons-les
							if (picx) {newpicx=newpicx + picx}
							if (picy) {newpicy=newpicy + picy} 
						// Positionner la couche
						picarea.style.top=newpicy;
						picarea.style.left=newpicx;
					}
					// Montrer la couche
					// name n’est pas dummy 		
						if (name != "dummy") {
							picarea.style.visibility="visible";
					// Rendre la couche visible (activer le décleucheur)
							vis=1
						}
	}
	// Pour les navigateurs javascript plus anciens, montrer pic
	else if (document.layers == null && document.all == null) {self.location=name};
	}
}
// Cacher les couches sur un clic
function clearpic()	{
	// Désactiver le déclencheur ‘visible’ 
	vis=0
		if (document.layers){document.layers['picarea'].visibility="hide"};
		if (document.all){picarea.style.visibility="hidden"};
}
//-->
</script>

</head>
<body>
<font face="arial" size=2>
<br/><br/>
<b>Images en couches</b>

<br/><br/>dopic('01257.jpg',1,0,200)<br/>
<a href="javascript:dopic('01257.jpg',0, 0,300)">
<img src="tn_01257.jpg" width=96 height=72 alt="" border="0"></a>

<br/><br/>dopic('01260.jpg',1,200,100)<br/>
<a href="javascript:dopic('01260.jpg',0, 400, 100)">
< img src="tn_01260.jpg" width=96 height=72 alt="" border="0"></a>

<br/><br/>dopic('01260.jpg',0,20,10)<br/>
<a href="javascript:dopic('01260.jpg',0,20,10)">
<img src="tn_01260.jpg" width=96 height=72 alt="" border="0"></a>
</font>
</center>
</html>
BoutonHautDePage


9.8 Zoom sur image


       9.8.1 Effet de zoom sur une image au passage de la souris


Source: http://www.jejavascript.net/imag_zoom.php

Evitez de mettre une petite image pour l'agrandir ensuite, vous risquez de perdre en qualité. Il est préférable que la taille maximale soit la taille réelle.

Insérez le code ci-dessous dans votre page entre les balises d'entête :

<head> ..... </head>

	<script language="javascript" type="text/javascript">
	<!--
	//PLF-http://www.jejavascript.net/
	var coeff=4;//Coefficient de reduction
	var larg=400;//largeur maxi de l'image
	var haut=388;//hauteur maxi de l'image
	var coeffinit=coeff;
	function changer() {
	if (document.image.width < larg) {
	coeff = coeff-0.2;
	document.image.width = Math.round(larg/coeff);
	document.image.height = Math.round(haut/coeff);
	chang=window.setTimeout('changer();',60);//vitesse de l'effet
	}
	else {window.clearTimeout(chang);}
	}
	function initial() {
	if (document.image.width > larg/coeffinit) {
	window.clearTimeout(chang);
	coeff = coeff+0.2;
	document.image.width = Math.round(larg/coeff);
	document.image.height = Math.round(haut/coeff);

	initi=window.setTimeout('initial();',60);//vitesse de l'effet
	}
	else {window.clearTimeout(initi);}
	}
	//-->
	</script>


Corrigez comme suit :
• Vous pouvez changer le coefficient de réduction.
• Indiquez la taille de votre image agrandie.
• Vous pouvez changer la vitesse de l'effet.

Puis insérez le code ci-dessous à l'emplacement de l'image :

<div align="center">
<a name="img"></a>
<a href="#img" onMouseOut="initial()" onMouseOver="changer()">
<img src="im/imaga.gif" border="0" name="image"></a></div>
	<script language="javascript" type="text/javascript">
	<!--
	//PLF-http://www.jejavascript.net/ 
	document.image.width = Math.round(larg/coeff);
	document.image.height = Math.round(haut/coeff);
	//-->
	</script>


Corrigez comme suit :
• chemin/nom_image.(gif,jpg,...)
• Vous pouvez aussi insérer un lien en cliquant sur l'image

BoutonHautDePage

       9.8.2 Effet de zoom sur plusieurs images au passage de la souris


Vous avez plusieurs Images…

Evitez de mettre une petite image pour l'agrandir ensuite, vous risquez de perdre en qualité. Il est préférable que la taille maximale soit la taille réelle.

Insérez le code ci-dessous dans votre page entre les balises d'entête :

<head> ..... </head>

	<script language="javascript" type="text/javascript">
	<!--
	var coeff=4;//Coefficient de reduction
	var larg=200;//largeur maxi de l'image
	var haut=194;//hauteur maxi de l'image
	var coeffinit=coeff;
	function changer(sel) { 
	switch(sel){
	case 1 : //image 1
	if (document.image1.width < larg) {
	coeff = coeff-0.2;
	document.image1.width = Math.round(larg/coeff);
	document.image1.height = Math.round(haut/coeff);
	chang=window.setTimeout('changer(1);',60);//vitesse de l'effet
	}
	break;
	case 2 : //image 2
	if (document.image2.width < larg) {
	coeff = coeff-0.2;
	document.image2.width = Math.round(larg/coeff);
	document.image2.height = Math.round(haut/coeff);
	chang=window.setTimeout('changer(2);',60);//vitesse de l'effet
	}
	break;
	case 3 : //image 3
	if (document.image3.width < larg) {
	coeff = coeff-0.2;
	document.image3.width = Math.round(larg/coeff);
	document.image3.height = Math.round(haut/coeff);
	chang=window.setTimeout('changer(3);',60);//vitesse de l'effet
	}
	break; 
	//images suivantes ...
	}
	if (document.image2.width >= larg) window.clearTimeout(chang);
	} 
	function initial(sel) {
	switch(sel){
	case 1 : //image 1
	if (document.image1.width > larg/coeffinit) {
	window.clearTimeout(chang);
	coeff = coeff+0.2;
	document.image1.width = Math.round(larg/coeff);
	document.image1.height = Math.round(haut/coeff);
	initi=window.setTimeout('initial(1);',60);//vitesse de l'effet
	}
	break;
	case 2 : //image 2
	if (document.image2.width > larg/coeffinit) {
	window.clearTimeout(chang);
	coeff = coeff+0.2;
	document.image2.width = Math.round(larg/coeff);
	document.image2.height = Math.round(haut/coeff);
	initi=window.setTimeout('initial(2);',60);//vitesse de l'effet
	}
	break;
	case 3 : //image 3
	if (document.image3.width > larg/coeffinit) {
	window.clearTimeout(chang);
	coeff = coeff+0.2;
	document.image3.width = Math.round(larg/coeff);
	document.image3.height = Math.round(haut/coeff);
	initi=window.setTimeout('initial(3);',60);//vitesse de l'effet
	}
	break;
	//images suivantes ...
	}
	if (document.image1.width < larg/4) window.clearTimeout(initi);
	}
	//-->
	</script>


Corrigez comme suit :
• Vous pouvez changer le coefficient de réduction.
• Indiquez la taille de votre image agrandie.
• (Si vous souhaitez des images et des coefficients de tailles différentes pour chaque image. Définissez d'autres variables. ex: coeff1, coeffinit1, haut1, larg1, coeff2, coeffinit2, haut2, larg2, ...
• Pensez à changer les variables dans chaque formule Math.round(larg/coeff); et cela dans les 2 scripts.
• Vous pouvez changer la vitesse de l'effet.

Puis insérez le code ci-dessous à l'emplacement des Images :

<p align="center"> 
<a href="#" onMouseOut="initial(1)" onMouseOver="changer(1)" >
<img src="im/imaga.gif" name="image1" border="0"></a>
</p>
	<script language="javascript" type="text/javascript">
	<!--
	document.image1.width = Math.round(larg/coeff);
	document.image1.height = Math.round(haut/coeff);
	//-->
	</script>
<p align="center">
<a href="#" onMouseOut="initial(2)" onMouseOver="changer(2)" >
<img src="im/imagb.gif" name="image2" border="0"></a>
</p>
	<script language="javascript" type="text/javascript">
	<!--
	document.image2.width = Math.round(larg/coeff);
	document.image2.height = Math.round(haut/coeff);
	//-->
	</script>
<p align="center">
<a href="#" onMouseOut="initial(3)" onMouseOver="changer(3)" >
<img src="im/imagc.gif" name="image3" border="0"></a>
</p>
	<script language="javascript" type="text/javascript">
	<!--
	document.image3.width = Math.round(larg/coeff);
	document.image3.height = Math.round(haut/coeff);
	//-->
	</script> 


Corrigez comme suit :
• chemin/nom_image.(gif,jpg,...)
• N° de l'image

Lignes à écrire pour insérer une image :

<p align="center"> 
<a href="#" onMouseOut="initial(1)" onMouseOver="changer(1)" >
<img src="im/imaga.gif" name="image1" border="0"></a>
</p>
	<script language="javascript" type="text/javascript">
	<!--
	//PLF-http://www.jejavascript.net/ 
	document.image1.width = Math.round(larg/coeff);
	document.image1.height = Math.round(haut/coeff);
	//-->
	</script> 


Les images peuvent être placées séparément.

En fait pour chaque image il faut écrire le code suivant en modifiant le N° de l'image. Vous pouvez le placer n'importe où dans votre page.

<a href="#" onMouseOut="initial(1)" onMouseOver="changer(1)" >
<img src="im/imaga.gif" name="image1" border="0"></a>
	<script language="javascript" type="text/javascript">
	<!--
	//PLF-http://www.jejavascript.net/ 
	document.image1.width = Math.round(larg/coeff);
	document.image1.height = Math.round(haut/coeff);
	//-->
	</script>


Pour des images horizontales, mettez-les dans un tableau :

<table width="100%" border="0">
<tr align="center">
<td>
<a href="#" onMouseOut="initial(1)" onMouseOver="changer(1)" >
<img src="im/imaga.gif" name="image1" border="0"></a>
	<script language="javascript" type="text/javascript">
	<!--
	document.image1.width = Math.round(larg/coeff);
	document.image1.height = Math.round(haut/coeff);
	//-->
	</script>
</td><td>
< a href="#" onMouseOut="initial(2)" onMouseOver="changer(2)" >
<img src="im/imagc.gif" name="image2" border="0"></a>
	<script language="javascript" type="text/javascript">
	<!--
	document.image2.width = Math.round(larg/coeff);
	document.image2.height = Math.round(haut/coeff);
	//-->
	</script>
</td><td>
< a href="#" onMouseOut="initial(3)" onMouseOver="changer(3)" >
<img src="im/imagb.gif" name="image3" border="0"></a>
	<script language="javascript" type="text/javascript">
	<!--
	document.image3.width = Math.round(larg/coeff);
	document.image3.height = Math.round(haut/coeff);
	//-->
	</script>
</td>
</tr>
</table> 
BoutonHautDePage

       9.8.3 Album Photo - Générateur de Script


Sur le site http://javascript.internet.com/miscellaneous/photo-album-script-generator.html vous trouverez un générateur de script pour créer automatiquement le code HTML d'une galerie de photos personnalisable.

Ce générateur de script servira aux développeurs HTML qui manquent de temps pour écrire le code ou simplement à tous ceux qui veulent utiliser une galerie de photos simple et personnalisable.

Pour Microsoft Internet Explorer 5+, Netscape Navigator 6+, Opera 6+ et Mozilla 1.2+.

Voici comment se présente le tableau de commande du générateur de script (il est en anglais) :

fj9.8.3

•       Voici par exemple le code généré par le Générateur de Script :

<!-- DOCTYPE HTML PUBLIC '-//W3C//DTD HTML 4.01 Transitional//EN' -->

<html>
<head>
<title>Ma Galerie Photo</title>

<meta http-equiv='pragma' content='no-cache'>
<meta http-equiv='content-type' content='text/html; charset=iso-8859-1'>
<meta name='generator' content='Photo Album Script Generator'>

<!-- Veuillez donner les informations nécessaires ci-dessous -->
<meta name='reply-to' content='Entrez votre adresse email ici.'>
<meta name='author' content='Entrez votre nom ici.'>
<meta name='copyright' content='Entrez le nom de votre société ici.'>
<meta name='description' content='Entrez la description de votre page ici.'>
<meta name='keywords' content='Entrez vos mots-clés ici.'>

<link rel=stylesheet type='text/css' href='./styles/style1.css'>

</head>
<body><div id=EchoTopic>

<table cellpadding=8 cellspacing=8 border=0 align=center width=70%>
<tr valign=top align=center>
<td class=extra colspan=3>
Ma Galerie Photo</td>
</tr>

<tr valign=top align=center>

<td><a href='images/pic.jpg' target='_new' title='Click to enlarge'>
<img src='pic.jpg' width=80 height=80 border=0></a>
<br>Photo1</td>

<td><a href='images/pic.jpg' target='_new' title='Click to enlarge'>
<img src='pic.jpg' width=80 height=80 border=0></a>
<br>Photo2</td>

<td><a href='images/pic.jpg' target='_new' title='Click to enlarge'>
<img src='pic.jpg' width=80 height=80 border=0></a>
<br>Photo3</td>

</tr>

<tr valign=top align=center>

<td><a href='images/pic.jpg' target='_new' title='Click to enlarge'>
<img src='pic.jpg' width=80 height=80 border=0></a>
<br>Photo4</td>

<td><a href='images/pic.jpg' target='_new' title='Click to enlarge'>
<img src='pic.jpg' width=80 height=80 border=0></a>
<br>Photo5</td>

<td><a href='images/pic.jpg' target='_new' title='Click to enlarge'>
<img src='pic.jpg' width=80 height=80 border=0></a>
<br>Photo6</td>

</tr>

<tr valign=top align=center>

<td><a href='images/pic.jpg' target='_new' title='Click to enlarge'>
<img src='pic.jpg' width=80 height=80 border=0></a>
<br>Photo7</td>

<td><a href='images/pic.jpg' target='_new' title='Click to enlarge'>
<img src='pic.jpg' width=80 height=80 border=0></a>
<br>Photo8</td>

<td><a href='images/pic.jpg' target='_new' title='Click to enlarge'>
<img src='pic.jpg' width=80 height=80 border=0></a>
<br>Photo9</td>

</tr>

<tr valign=top align=center>

<td><a href='images/pic.jpg' target='_new' title='Click to enlarge'>
<img src='pic.jpg' width=80 height=80 border=0></a>
<br>Photo10</td>

<td><a href='images/pic.jpg' target='_new' title='Click to enlarge'>
<img src='pic.jpg' width=80 height=80 border=0></a>
<br>Photo11</td>

<td><a href='images/pic.jpg' target='_new' title='Click to enlarge'>
<img src='pic.jpg' width=80 height=80 border=0></a>
<br>Photo12</td>

</tr>

<tr valign=top align=center>

<td><a href='images/pic.jpg' target='_new' title='Click to enlarge'>
<img src='pic.jpg' width=80 height=80 border=0></a>
<br>Photo13</td>

<td><a href='images/pic.jpg' target='_new' title='Click to enlarge'>
<img src='pic.jpg' width=80 height=80 border=0></a>
<br>Photo14</td>

<td><a href='images/pic.jpg' target='_new' title='Click to enlarge'>
<img src='pic.jpg' width=80 height=80 border=0></a>
<br>Photo15</td>

</tr>

<tr valign=top align=center>

<td><a href='images/pic.jpg' target='_new' title='Click to enlarge'>
<img src='pic.jpg' width=80 height=80 border=0></a>
<br>Photo16</td>

<td><a href='images/pic.jpg' target='_new' title='Click to enlarge'>
<img src='pic.jpg' width=80 height=80 border=0></a>
<br>Photo17</td>

<td><a href='images/pic.jpg' target='_new' title='Click to enlarge'>
<img src='pic.jpg' width=80 height=80 border=0></a>
<br>Photo18</td>

</tr>

<tr valign=top align=center>
<td class=extra colspan=3>
<a href='#' title='Previous Page'><< Back</a> | 
<a href='#' title='Next Page'>Next >></a></td>
<tr>
</table>

<!-- You are not authorized to remove the code below -->
<p align=right><font size=1>
<a href='http://www.shuvorim.tk' target='_new' title='Click here to visit us!'>©ShuvoRim Pvt. Ltd.</a>
</font></p>
<!-- You are not authorized to remove the code above -->

</div></body>
</html>


•       Pour générer le code ci-dessus :

<!-- DEUX ETAPES POUR INSTALLER PHOTO ALBUM SCRIPT GENERATOR:
  1.  Copiez le code dans la section HEAD de votre document HTML
  2.  Ajoutez la seconde partie de code dans la section BODY de votre document HTML  -->

<!-- ETAPE 1: Collez ce code dans la section HEAD de votre document HTML  -->
<HEAD>
<!-- Ce script et bien d'autres sont disponibles gratuitement en ligne à -->
<!-- The JavaScript Source!! http://javascript.internet.com -->
<!-- Créateur:  ShuvoRim  (shuvorim@hotmail.com) -->
<!-- Site Web:  http://www.shuvorim.tk -->

<link href="pas_gen.css" rel=stylesheet type="text/css">
<script type="text/javascript" src="pas_gen.js" language=javascript></script>
</HEAD>

<!-- ETAPE 2: Collez ce code dans la section BODY de votre document HTML  -->
<BODY>
<!-- Ce script et bien d'autres sont disponibles gratuitement en ligne à -->
<!-- The JavaScript Source!! http://javascript.internet.com -->
<!-- Créateur:  ShuvoRim  (shuvorim@hotmail.com) -->
<!-- Site Web:  http://www.shuvorim.tk -->

<form name="form1">
<table border=0 cellpadding=6 cellspacing=4 align=center width=70% class=normal>
<tr valign=top><td class=extra colspan=2>
Photo Album Script Generator</td></tr>
<tr valign=top><td class=simple>Page title:</td>
<td class=simple><input type=text size=25 name="page_title" value="My Photo Gallery"></td></tr>
<tr valign=top><td class=simple>Photo gallery title:</td>
<td class=simple><input type=text size=25 name="pht_gal" value="My Photo Gallery"></td></tr>
<tr valign=top><td class=simple>How many rows:</td>
<td class=simple><input type=text size=3 name="pht_page" value=4></td></tr>
<tr valign=top><td class=simple>Photo in each row:</td>
<td class=simple><input type=text size=3 name="pht_row" value=4></td></tr>
<tr valign=top><td class=simple>Thumb width:</td>
<td class=simple><input type=text size=3 name="thm_width" value=100></td></tr>
<tr valign=top><td class=simple>Thumb height:</td>
<td class=simple><input type=text size=3 name="thm_height" value=75></td></tr>
<tr valign=top><td class=simple>Photo title/description:</td>
<td class=simple><select name="pht_title">
<option value=y SELECTED>Yes
<option value=n>No
</select></td></tr>
<tr valign=top><td class=simple>Select a style sheet:</td>
<td class=simple><select name="def_style">
<option value="1" SELECTED>Style1
<option value="2">Style2
<option value="3">Style3
</select></td></tr>
<tr valign=top><td colspan=2 class=simple>
<input type=button value="Generate" name="done" class=btn onClick=showCode()>
<input type=reset value=" Reset " name="rest" class=btn>
<input type=button value="Preview" name="prev" class=btn onClick=showPrev()></td></tr>
</table>
</form>

<CENTER>
<A HREF="javascript:self.close();">
<IMG SRC="exit.gif" BORDER=0 WIDTH=20 HEIGHT=20 ALT="Close"></A>
</CENTER>

<p><center>
<font face="arial, helvetica" size"-2">Free JavaScripts provided<br>
by <a href="http://javascriptsource.com">The JavaScript Source</a></font>
</center><p>
<!-- Script Size:  3.35 KB -->
BoutonHautDePage

       9.8.4 Visionneuse d'Album Photo


La Visionneuse d'Album Photo s'installe en trois étapes :

<!-- La Visionneuse d'Album Photo s'installe en trois étapes
  1.  Collez ce code dans la section HEAD de votre document HTML
  2.  Ajoutez le conteneur d'évènement onLoad dans la balise BODY
  3.  Mettez la seconde partie de code dans la section BODY de votre document HTML -->

<!-- ETAPE 1: Collez ce code dans la section HEAD de votre document HTML  -->

<HEAD>
<!-- Ce script et bien d'autres sont disponibles gratuitement en ligne à -->
<!-- The JavaScript Source!! http://javascript.internet.com -->
	<SCRIPT LANGUAGE="JavaScript">
	<!-- Begin
	function changeImage()
	{
	mainimage.src = list.options[list.selectedIndex].value;
	}

	function prevImage()
	{
	if(list.selectedIndex == 0)
	{
	list.selectedIndex = list.options.length-1;
	}
	else
	{
	list.selectedIndex--;
	}
	changeImage();
	}

	function nextImage()
	{
	if(list.selectedIndex == list.options.length-1)
	{
	list.selectedIndex = 0;
	}
	else
	{
	list.selectedIndex++;
	}
	changeImage();
	}
	//  End -->
	</script>

</HEAD>



<!-- ETAPE 2: Ajoutez le conteneur d'évènement onLoad dans la balise BODY -->
<BODY onLoad="javascript:changeImage()">



<!-- ETAPE 3: Mettez ce code dans la section BODY de votre document HTML -->
<div align="center">
<img name="mainimage" border="1">
<br>
<input type="button" value="Back" onclick="javascript:prevImage()">
	<select id="list" onchange="javascript:changeImage()">
		<option value="image1.jpg">First Image</option>
		<option value="image2.jpg">Second Image</option>
		<option value="image3.jpg">Third Image</option>
		<option value="image4.jpg">Fourth Image</option>
	</select>
<input type="button" value="Next" onclick="javascript:nextImage()">
</div>
<p><center>
<font face="arial, helvetica" size"-2">Free JavaScripts provided<br>
by <a href="http://javascriptsource.com">The JavaScript Source</a></font>
</center><p>
<!-- Script Size:  1.80 KB -->
BoutonHautDePage

9.9 Du Javascript dans les formulaires


Générer des champs automatiquement dans un formulaire

<html>
<head>
<title>Upload Photos Méthode Post</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link title="stylesphoxf" media="all" rel="stylesheet" href="css/stylesPhoxf.css" type="text/css" />

	<script language="javascript" type="text/javascript">
	// La fonction AjoutChamps génére un champ automatiquement à chaque fois qu'on en a utilisé un.
	// On pourra ainsi envoyer plusieurs fichiers à la fois.
	// Note: demandez à votre visiteur d'autoriser le JavaScript et les pop-up pour ce site

	var Nb=1; // Cette variable compte le nombre de champs affichés

	function AjoutChamps(LeParam){

	Nb++; // On incrémente la variable nombre de champs
   
	// On crée une copie du champ de fichiers à l'aide de la fonction ClondeNode et on la renomme
	LeFile=document.getElementById("Champ"+(Nb-1)).cloneNode(true);
	LeFile.name="Champ"+Nb;
	LeFile.id="Champ"+Nb;
   
	// On ajoute un nouveau champ au formulaire
	document.getElementById("LesChamps").appendChild(LeFile);
   
	// On crée un retour à la ligne (retour chariot) à l’aide d’un élément <br>
	LeRetourChariot=document.createElement("br");
	document.getElementById("LesChamps").appendChild(LeRetourChariot);
   
	// On supprime la méthode onChange de l’avant dernier champ pour qu'il ne crée
	// pas de nouveaux champs lorsqu’on le modifie (seul le dernier champ doit pouvoir en créer un nouveau)
	document.getElementById("Champ"+(Nb-1)).onchange="";
   
	if(Nb==10)
		{ // Ici on limite le visiteur à 10 champs maxi (soient 10 photos)
		// Donc, si la variable Nb est à 10, on supprime la méthode onChange pour ne plus pouvoir
		// créer de champs supplémentaires
		document.getElementById("Champ"+(Nb)).onchange="";
		}
	}

	// GESTION DE L'OUVERTURE D'UNE PHOTO
	// Fonction twPopupImage qui ouvre les photos quand on clique dessus
	// Compatible IE5+ / NN6+ / Mozilla
	// Ce script affiche une fenêtre popup adaptée à la taille de l'image. Cette fenêtre se ferme lors d'un clic
	function twPopupImage(img, titre, auteur)
	{ 
		oFenetre = window.open('','Image','width=400,height=400,toolbar=no,scrollbars=yes,resizable=yes');
		oFenetre.document.write("<html><head><title>"+titre+"</title></head>"); 
		oFenetre.document.write("<script type=\"text/javascript\">function twAjustePopUp() {");
		oFenetre.document.write(" if (document.images[0].complete) { ");
		oFenetre.document.write("window.resizeTo(document.images[0].width+29,document.images[0].height+63);");
		oFenetre.document.write(" window.focus();} else { setTimeout('twAjustePopUp()',1000) } }</"+"script>");
		oFenetre.document.write("<body onload='twAjustePopUp()' onblur='window.close()' onclick='window.close()'"); 
		oFenetre.document.write(" leftMargin=0 topMargin=0 marginwidth=0 marginheight=0>");
		oFenetre.document.write("<table width='100%' border='0' cellspacing='0' cellpadding='0' height='100%'>"); 
		oFenetre.document.write("<tr><td valign='middle' align='center'>");
		oFenetre.document.write("<img src='"+img+"' border='0' alt='"+auteur+"' title='"+auteur+"'>");
		oFenetre.document.write("</td></tr></table></body></html>"); 
		oFenetre.document.close(); 
	} 
	</script>
</head>

<body>
<!-- ############################################### -->
<!-- la balise <noscript>...</noscript> permet de vérifier si le JavaScript est actif chez l'utilisateur -->
<noscript>
<b>Votre navigateur n'accepte pas le JavaScript, veuillez l'activer pour que cette page fonctionne bien</b>
<br></noscript>
<!-- ############################################### -->
<h3>Votre album photo</h3>
<h4>Envoyez vos brochures sur ce serveur</h4><br>
<!-- ############################################### -->

<!-- PRE-TRAITEMENT = FORMULAIRE D'ENVOI -->
<div align="center">
  <table width="772" border="0" cellpadding="0" cellspacing="0">
    <tr>
      <td valign="top" bgcolor="#FFFFFF">
         <div align="center">
            <p><b>Album photo </b></p>

          <!-- Tableau pour afficher les photos -->
         <table border="0">

            <?php
            // GESTION DE L'AFFICHAGE DES PHOTOS
            // Pour cela nous testons l'existence des fichiers dans une boucle.
            // A chaque fois qu'un fichier est trouvé, on affiche sa miniature. 
            $i=1;
            while(file_exists($RepDistant.$i.'.jpg')){ // Tant que la photo $i.jpg existe...
            ?>
               <tr>

                  <!-- Affichage de la photo quand on clique dessus: évènement 'onClick' ... -->
                  <!-- ... on utilise pour cela la fonction twPopupImage -->
                  <td height="88" align="center" valign="middle" bgcolor="#5E0000"> 
                  <img style="cursor:pointer;"
                  onClick="twPopupImage('<?php echo $RepDistant.$i; ?>.jpg', 
				  'Photo n. <?php echo $i; ?>','Photo n. <?php echo $i; ?>')"
                  src="<?php echo $RepDistant.$i; ?>.jpg"
                  width="100" height="75" align="middle"> 
                  </td>

                  <!-- Lien à côté de chaque miniature pour supprimer une photo -->
                  <td align="center" valign="middle"> <a href="album.php?suppr=<?php echo $i; ?>">
                     Supprimer </a>
                </td>
               </tr>
            <?php
            $i++;
            }
            ?>
         </table>

         <!-- Création du formulaire d'envoi -->
         <form action="album.php" enctype="multipart/form-data" method="post" name="LeForm" id="LeForm">
         <p><b>Ajouter des photos</b></p>
         
         <!-- la taille maxi autorisée (en octets) d'un fichier à envoyer est écrite dans un champ "hidden" -->
         <input type="hidden" name="MAX_FILE_SIZE" value="9000000">
         <div id="LesChamps">
         <input NAME="Champ1" TYPE="file" id="Champ1" onChange="AjoutChamps(this.Nb);" size="60">
         </div>
         <p>
         <input type="submit" name="Submit" value="Envoyer">
         </p>
         </form>
        
        </div>
     </td>
    </tr>
  </table>
</div>
</body>
</html>


Une suite est prévue

(en construction) - Ref 12-62 à 83

Travaux
BoutonHautDePage

9.10 AJAX – Charger des données depuis le serveur du site


AJAX (Asynchrone JAvascript et Xml) est une technologie Javascript qui permet de charger des données qui se trouvent sur le serveur au format Xml, texte, Html ou autres.
Une suite est prévue

(en construction) - Ref 31-32

Travaux
BoutonHautDePage

9.11 Menu déroulant au passage de la souris


1) Exemple avec contenu déroulant dans un array
2) Avec une boîte de recherche ou un double menu déroulant
3) Contenu déroulant défini dans un fichier externe (Ajax)

Voir aussi : http://javascript.internet.com/

       9.11.1 Menu avec contenu déroulant dans un array


Ce script permet de réaliser un menu qui se déroule au passage de la souris en recouvrant une portion de la page. Source : Marc Deleume (CGGVeritas).

Le code source correspondant doit se placer à deux endroits dans la page ;

•       Code à insérer dans la partie <HEAD> </HEAD>

<head>
<meta content="text/html; charset=ISO-8859-1" http-equiv="content-type">
<title>Menu déroulant</title>
<!-- on peut bien sûr entrer le CSS qui suit dans un fichier css externe "styles.css" -->
<style type="text/css">
#dropmenudiv{
  position:absolute;
  font-family: Arial,Helvetica,sans-serif;
  text-decoration:none;
  text-align:left;
  line-height:24px;
  display:block;
  width:8em; 
  padding-top:0.2em;
  padding-right:0.2em;
  padding-left:0.1em;
  padding-bottom:0;
  margin:0.3em auto;
  border:2px solid #ffffff;
}
#barredoutils {
  border: 1px solid white;
  background-image: url(../pict/BarreOutils.jpg);
  background-repeat: no-repeat;
  background-color: black;
  margin-right: auto;
  margin-left: auto;
  text-align: left;
  background-position: left center;
}
li{
  width:150px; // largeur du texte à l'intérieur du panneau déroulant : ne pas oublier!
  display:inline-block;
  list-style:none;
  height:24px;
  overflow:hidden;
}
.mdb {
  list-style-type: square;
  color: #ffffff;
  border-bottom:1px solid #ffffff;
}
</style>

<!-- link title="stylesphoxf" media="all" rel="stylesheet" href="css/styles.css" type="text/css" -->
<script language="javascript" type="text/javascript" src="jscr/DropDownMenu.js">
</script>
</head>


•       Le code qui précède se réfère au fichier JavaScript externe DropDownMenu.js

/***********************************************
Menu déroulant au survol de la souris en Javascript
Nom du fichier externe: DropDownMenu.js qui se trouve dans le répertoire jscr
***********************************************/

/***********************************************
* AnyLink Drop Down Menu- © Dynamic Drive (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit http://www.dynamicdrive.com/ for full source code
***********************************************/

//Contenu du menu 1 (7 ancres)
var menu1=new Array()
menu1[0]='<li class="mdb"><a href="page1.html#§_1">page 1 §_1</a><br>'
menu1[1]='<li class="mdb"><a href="page1.html#§_2">page 1 §_2</a><br>'
menu1[2]='<li class="mdb"><a href="page1.html#§_3">page 1 §_3</a><br>'
menu1[3]='<li class="mdb"><a href="page1.html#§_4">page 1 §_4</a><br>'
menu1[4]='<li class="mdb"><a href="page1.html#§_5">page 1 §_5</a><br>'
menu1[5]='<li class="mdb"><a href="page1.html#§_6">page 1 §_6</a><br>'
menu1[6]='<li class="mdb"><a href="page1.html#§_7">page 1 §_7</a><br>'

//Contenu du menu 2 (3 ancres)
var menu2=new Array()
menu2[0]='<li class="mdb"><a href="page2.html#§_1">page 2 §_1</a><br>'
menu2[1]='<li class="mdb"><a href="page2.html#§_2">page 2 §_2</a><br>'
menu2[2]='<li class="mdb"><a href="page2.html#§_3">page 2 §_3</a><br>'

//Contenu du menu 3 (3 ancres)
var menu3=new Array()
menu3[0]='<li class="mdb"><a href="page3.html#§_1">page 3 §_1</a><br>'
menu3[1]='<li class="mdb"><a href="page3.html#§_2">page 3 §_2</a><br>'
menu3[2]='<li class="mdb"><a href="page3.html#§_3">page 3 §_3</a><br>'
		
//Contenu du menu 4 (3 ancres)
var menu4=new Array()
menu4[0]='<li class="mdb"><a href="page4.html#§_1">page 4 §_1</a><br>'
menu4[1]='<li class="mdb"><a href="page4.html#§_2">page 4 §_2</a><br>'
menu4[2]='<li class="mdb"><a href="page4.html#§_3">page 4 §_3</a><br>'

//Contenu du menu 5 (3 ancres)
var menu5=new Array()
menu5[0]='<li class="mdb"><a href="page5.html#§_1">page 5 §_1</a><br>'
menu5[1]='<li class="mdb"><a href="page5.html#§_2">page 5 §_2</a><br>'
menu5[2]='<li class="mdb"><a href="page5.html#§_3">page 5 §_3</a><br>'

/******************************************************************************************/
var menuwidth='108px' //largeur par défaut du menu
var menubgcolor='#a7a7a7'  //couleur de fond du menu
var disappeardelay=250  //vitesse de disparition du menu onMouseout (en milisecondes)
var hidemenu_onclick="yes" //cacher  le menu quand on clique dedans?
/******************************************************************************************/

var ie4=document.all
var ns6=document.getElementById&&!document.all

if (ie4||ns6)
document.write('<div id="dropmenudiv" style="visibility:hidden;width:'+menuwidth+';background-color:'+menubgcolor+'" onMouseover="clearhidemenu()" onMouseout="dynamichide(event)"></div>')

function getposOffset(what, offsettype){
var totaloffset=(offsettype=="left")? what.offsetLeft : what.offsetTop;
var parentEl=what.offsetParent;
while (parentEl!=null){
totaloffset=(offsettype=="left")? totaloffset+parentEl.offsetLeft : totaloffset+parentEl.offsetTop;
parentEl=parentEl.offsetParent;
}
return totaloffset;
}

function showhide(obj, e, visible, hidden, menuwidth){
if (ie4||ns6)
dropmenuobj.style.left=dropmenuobj.style.top=-500
if (menuwidth!=""){
dropmenuobj.widthobj=dropmenuobj.style
dropmenuobj.widthobj.width=menuwidth
}
if (e.type=="click" && obj.visibility==hidden || e.type=="mouseover")
obj.visibility=visible
else if (e.type=="click")
obj.visibility=hidden
}

function iecompattest(){
return (document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body
}

function clearbrowseredge(obj, whichedge){
var edgeoffset=0
if (whichedge=="rightedge"){
var windowedge=ie4 && !window.opera? iecompattest().scrollLeft+iecompattest().clientWidth-15 : window.pageXOffset+window.innerWidth-15
dropmenuobj.contentmeasure=dropmenuobj.offsetWidth
if (windowedge-dropmenuobj.x < dropmenuobj.contentmeasure)
edgeoffset=dropmenuobj.contentmeasure-obj.offsetWidth
}
else{
var windowedge=ie4 && !window.opera? iecompattest().scrollTop+iecompattest().clientHeight-15 : window.pageYOffset+window.innerHeight-18
dropmenuobj.contentmeasure=dropmenuobj.offsetHeight
if (windowedge-dropmenuobj.y < dropmenuobj.contentmeasure)
edgeoffset=dropmenuobj.contentmeasure+obj.offsetHeight
}
return edgeoffset
}

function populatemenu(what){
if (ie4||ns6)
dropmenuobj.innerHTML=what.join("")
}

function dropdownmenu(obj, e, menucontents, menuwidth){
if (window.event) event.cancelBubble=true
else if (e.stopPropagation) e.stopPropagation()
clearhidemenu()
dropmenuobj=document.getElementById? document.getElementById("dropmenudiv") : dropmenudiv
populatemenu(menucontents)

if (ie4||ns6){
showhide(dropmenuobj.style, e, "visible", "hidden", menuwidth)
dropmenuobj.x=getposOffset(obj, "left")
dropmenuobj.y=getposOffset(obj, "top")
dropmenuobj.style.left=dropmenuobj.x-clearbrowseredge(obj, "rightedge")+"px"
dropmenuobj.style.top=dropmenuobj.y-clearbrowseredge(obj, "bottomedge")+obj.offsetHeight+"px"
}

return clickreturnvalue()
}

function clickreturnvalue(){
if (ie4||ns6) return false
else return true
}

function contains_ns6(a, b) {
while (b.parentNode)
if ((b = b.parentNode) == a)
return true;
return false;
}

function dynamichide(e){
if (ie4&&!dropmenuobj.contains(e.toElement))
delayhidemenu()
else if (ns6&&e.currentTarget!= e.relatedTarget&& !contains_ns6(e.currentTarget, e.relatedTarget))
delayhidemenu()
}

function hidemenu(e){
if (typeof dropmenuobj!="undefined"){
if (ie4||ns6)
dropmenuobj.style.visibility="hidden"
}
}

function delayhidemenu(){
if (ie4||ns6)
delayhide=setTimeout("hidemenu()",disappeardelay)
}

function clearhidemenu(){
if (typeof delayhide!="undefined")
clearTimeout(delayhide)

if (hidemenu_onclick=="yes")
document.onclick=hidemenu
}
// Note : je ne sais pas s'il faut mettre cette dernière accolade ici ou juste après clearTimeout(delayhide)


•       Code HTML à insérer dans la partie <BODY> </BODY> de votre page

<body>
<div id="barredoutils">
<table style="text-align: center; width: 1029px; height: 33px;" 
border="0" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td style="text-align: center; height: 31px; width: 103px;">
<a href="index.html" title="Retour à la page d'accueil">
Accueil</a>
</td>
<td style="text-align: center; height: 31px; width: 112px;">
<a href="page1.html" onClick="return clickreturnvalue()" 
onMouseover="dropdownmenu(this, event, menu1, '112px')" onMouseout="delayhidemenu()">
Menu 1</a>
</td>
<td style="text-align: center; height: 31px; width: 108px;">
<a href="page2.html" onClick="return clickreturnvalue()" 
onMouseover="dropdownmenu(this, event, menu2, '108px')" onMouseout="delayhidemenu()">
Menu 2</a>
</td>
<td style="text-align: center; height: 31px; width: 107px;">
<a href="page3.html" onClick="return clickreturnvalue()" 
onMouseover="dropdownmenu(this, event, menu3, '107px')" onMouseout="delayhidemenu()">
Menu 3</a>
</td>
<td style="text-align: center; height: 31px; width: 107px;">
<a href="page4.html" onClick="return clickreturnvalue()" 
onMouseover="dropdownmenu(this, event, menu4, '107px')" onMouseout="delayhidemenu()">
Menu 4</a>
</td>
<td style="text-align: center; height: 31px; width: 107px;">
<a href="page5.html" onClick="return clickreturnvalue()" 
onMouseover="dropdownmenu(this, event, menu5, '107px')" onMouseout="delayhidemenu()">
Menu 5</a>
</td>
<td style="text-align: center; height: 31px; width: 107px;">
<a href="formulaire.php" title="Formulaire">
Formulaire</a>
</td>
<td style="text-align: center; height: 31px; width: 110px;">
<a target="_blank" href="http://www.phox.fr/book.aspx" title="Catalogue interactif">
Catalogue</a>
</td>
<td style="text-align: center; height: 31px; width: 127px;">
<a href="mailto:gilbert.pernot@aliceadsl.fr" title="Envoyez-moi un email">
Contactez-nous</a>
</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
BoutonHautDePage

       9.11.2 Menu avec une boîte de recherche ou un double menu déroulant


Ce script permet de réaliser un menu qui se déroule au passage de la souris en recouvrant une portion de la page. Source: http://www.dynamicdrive.com/dynamicindex5/overlapcontent.htm Auteur: Dynamic Drive
Mise à jour déc. 2007 : ajout de la possibilité de tirer le contenu déroulant d'un fichier externe (Ajax).

Description: Si vous manquez de place dans votre page, ce script vous permet d’afficher un menu en le déroulant lorsque la souris passe au-dessus d’un élément ancre. Le contenu vient se superposer provisoirement au dessus de la portion de page qu’il y avait dessous. Très utile si vous voulez économiser de l’espace dans votre page. Il est bien pratique si vous voulez afficher des boîtes de recherche ou des liens supplémentaires dans un espace étroit comme la marge de votre page. Le contenu à afficher ou cacher se trouve simplement dans un bloc DIV arbitraire de la page facilement paramétrable.

Ce script supporte quatre différentes positions ou orientations : "left-bottom", "right-bottom", "left-top", et "right-top" pour le contenu déroulant. Vous pouvez aussi paramétrer la vitesse du déroulement.

•       Ajoutez d’abord le code suivant dans la partie <head> de votre page

<script language="javascript" type="text/javascript" src="dropdowncontent.js">
/***********************************************
* Drop Down/ Overlapping Content- © Dynamic Drive (www.dynamicdrive.com)
* This notice must stay intact for legal use.
* Visit http://www.dynamicdrive.com/ for full source code
***********************************************/

</script>


•       Le code qui précède se réfère au fichier JavaScript externe 'dropdowncontent.js' ci-dessous :

//Drop Down/ Overlapping Content: http://www.dynamicdrive.com
//Mis à jour le: 19/12/07: remplir dynamiquement un contenu déroulant à l’aide d’un fichier externe (de type Ajax)

var dropdowncontent={
 delaybeforehide: 200, 
 // délai en millisecondes avant que la boîte déroulante disparaisse lorsque la souris s’en va [onMouseout] (1000=1 sec)
	disableanchorlink: true, 
	//quand on clique sur le lien ancre, doit-on le désactiver ?
	ajaxloadingmsg: "Chargement en cours, veuillez patienter...", 
	//Message HTML qui s’affiche pendant qu’on charge la page externe Ajax
	ajaxbustcache: true, 
	//écraser (Bust) la mémoire-cache quand on va chercher les pages?

	getposOffset:function(what, offsettype){
		return (what.offsetParent)? what[offsettype]+this.getposOffset(what.offsetParent, offsettype) : what[offsettype]
	},

	isContained:function(m, e){
		var e=window.event || e
		var c=e.relatedTarget || ((e.type=="mouseover")? e.fromElement : e.toElement)
		while (c && c!=m)try {c=c.parentNode} catch(e){c=m}
		if (c==m)
			return true
		else
			return false
	},

	show:function(anchorobj, subobj, e){
		if (!this.isContained(anchorobj, e)){
			var horizontaloffset=(subobj.dropposition[0]=="left")? -(subobj.offsetWidth-anchorobj.offsetWidth) : 0 
			//calcule l’offset horizontal ajouté par l’utilisateur
			var verticaloffset=(subobj.dropposition[1]=="top")? -subobj.offsetHeight : anchorobj.offsetHeight 
			//calcule l’offset vertical ajouté par l’utilisateur
			subobj.style.left=this.getposOffset(anchorobj, "offsetLeft") + horizontaloffset + "px"
			subobj.style.top=this.getposOffset(anchorobj, "offsetTop")+verticaloffset+"px"
			subobj.style.clip=(subobj.dropposition[1]=="top")? "rect(auto auto auto 0)" : "rect(0 auto 0 0)" 
			//cacher la boîte déroulante au départ en cliquant dessus
			subobj.style.visibility="visible"
			subobj.startTime=new Date().getTime()
			subobj.contentheight=parseInt(subobj.offsetHeight)
			if (typeof window["hidetimer_"+subobj.id]!="undefined") 
			//veut-on réinitialiser la temporisation pour cacher la boîte déroulante?
				clearTimeout(window["hidetimer_"+subobj.id])
			this.slideengine(subobj, (subobj.dropposition[1]=="top")? "up" : "down")
		}
	},

	curveincrement:function(percent){
		return (1-Math.cos(percent*Math.PI)) / 2 
		//retourne une valeur cosinusoïdale si l’on entre un pourcentage
	},

	slideengine:function(obj, direction){
		var elapsed=new Date().getTime()-obj.startTime 
		//l’animation get time est passée
		if (elapsed<obj.glidetime){ 
		//si le temps écoulé est moins que le temps spécifié
			var distancepercent=(direction=="down")? this.curveincrement(elapsed/obj.glidetime) : 
			1-this.curveincrement(elapsed/obj.glidetime)
			var currentclip=(distancepercent*obj.contentheight)+"px"
			obj.style.clip=(direction=="down")? "rect(0 auto "+currentclip+" 0)" : "rect("+currentclip+" auto auto 0)"
			window["glidetimer_"+obj.id]=setTimeout(function(){dropdowncontent.slideengine(obj, direction)}, 10)
		}
		else{ //si l’animation est terminée
			obj.style.clip="rect(0 auto auto 0)"
		}
	},

	hide:function(activeobj, subobj, e){
		if (!dropdowncontent.isContained(activeobj, e)){
			window["hidetimer_"+subobj.id]=setTimeout(function(){
				subobj.style.visibility="hidden"
				subobj.style.left=subobj.style.top=0
				clearTimeout(window["glidetimer_"+subobj.id])
			}, dropdowncontent.delaybeforehide)
		}
	},

	ajaxconnect:function(pageurl, divId){
		var page_request = false
		var bustcacheparameter=""
		if (window.XMLHttpRequest) // Dans le cas de Mozilla, IE7, Safari etc.
			page_request = new XMLHttpRequest()
		else if (window.ActiveXObject){ // Dans le cas d’IE6 ou plus ancien
			try {
			page_request = new ActiveXObject("Msxml2.XMLHTTP")
			} 
			catch (e){
				try{
				page_request = new ActiveXObject("Microsoft.XMLHTTP")
				}
				catch (e){}
			}
		}
		else
			return false
		document.getElementById(divId).innerHTML=this.ajaxloadingmsg 
		//Afficher le message "chargement de page "
		page_request.onreadystatechange=function(){dropdowncontent.loadpage(page_request, divId)}
		if (this.ajaxbustcache) 
		//si on écrase la mémoire-cache de la page externe
			bustcacheparameter=(pageurl.indexOf("?")!=-1)? "&"+new Date().getTime() : "?"+new Date().getTime()
		page_request.open('GET', pageurl+bustcacheparameter, true)
		page_request.send(null)
	},

	loadpage:function(page_request, divId){
		if (page_request.readyState == 4 && (page_request.status==200 || window.location.href.indexOf("http")==-1)){
			document.getElementById(divId).innerHTML=page_request.responseText
		}
	},

 init:function(anchorid, pos, glidetime){
		var anchorobj=document.getElementById(anchorid)
		var subobj=document.getElementById(anchorobj.getAttribute("rel"))
		var subobjsource=anchorobj.getAttribute("rev")
		if (subobjsource!=null && subobjsource!="")
			this.ajaxconnect(subobjsource, anchorobj.getAttribute("rel"))
		subobj.dropposition=pos.split("-")
		subobj.glidetime=glidetime || 1000
		subobj.style.left=subobj.style.top=0
		anchorobj.onmouseover=function(e){dropdowncontent.show(this, subobj, e)}
		anchorobj.onmouseout=function(e){dropdowncontent.hide(subobj, subobj, e)}
		if (this.disableanchorlink) anchorobj.onclick=function(){return false}
		subobj.onmouseout=function(e){dropdowncontent.hide(this, subobj, e)}
	}
}


•       Ensuite insérez un des exemples de code HTML ci-dessous dans la partie <body> de votre page

Exemple 1 : Avec une boîte de recherche

<!-- Exemple 1 avec une boîte de recherche -->
<!-- Consultez http://www.freefind.com/ -->

<p>Demo #1: <a href="http://www.dynamicdrive.com/forums/" id="searchlink" rel="subcontent">Search DD</a></p>

<div id="subcontent" style="position:absolute; visibility: hidden; border: 9px solid orange; background-color: white; 
width: 300px; padding: 8px;">

<p><b>Search Dynamic Drive:</b></p>
<form method="get" action="http://search.freefind.com/find.html" id="topform">
<input name="query" maxlength="255" style="width: 150px" id="topsearchbox" alt="Search" /> 
<input value="Search" class="topformbutton" type="submit" />
</form>

<div align="right"><a href="http://www.dynamicdrive.com">Dynamic Drive</a></div>

</div>


Exemple 2 : Double menu déroulant activé par 2 liens arbitraires

<!-- Exemple 2 double menu déroulant activé par 2 liens arbitraires -->

<p align="right" style="margin-top: 400px">Demo #2: 
<a href="http://www.dynamicdrive.com/resources/" id="contentlink" rel="subcontent2">Additional Resources</a> </p>

<div id="subcontent2" style="position:absolute; visibility: hidden; border: 9px solid black; background-color: lightyellow; 
width: 350px; height: 120px; padding: 4px;">

<div style="width: 49%; float: left">
<ul>
<li><a href="http://www.dynamicdrive.com">Dynamic Drive</li>
<li><a href="http://www.javascriptkit.com">JavaScript Kit</li>
<li><a href="http://www.cssdrive.com">CSS Drive</li>
<li><a href="http://www.codingforums.com">Coding Forums</li>
</ul>
</div>

<div style="width: 49%; float: left">
<ul>
<li><a href="http://www.cnn.com">CNN</li>
<li><a href="http://www.msnbc.com">MSNBC</li>
<li><a href="http://www.news.bbc.co.uk">BBC News</li>
<li><a href="http://www.slashdot.org">Slashdot</li>
</ul>
</div>

</div>

	<script language="javascript" type="text/javascript">
	// Appel du script dropdowncontent.init(IdAncre, PositionTexte, Temporisation) en fin de page:
	dropdowncontent.init("searchlink", "right-bottom", 500)
	dropdowncontent.init("contentlink", "left-top", 1000)
	</script>


•       Quelques précisions
Le code qui précède respecte les conventions de mise en place d’un menu déroulant dans votre page.
Il y en a trois :

• L’élément ancre, un élément arbitraire qui va montrer le contenu déroulant au survol de la souris (onMouseover).
• L’élément contenu déroulant.
• L’appel du script d’initialisation tout à fait à la fin pour lier les choses entre elles.

<!-- l’élément ancre -->
<b><a href="search.htm" id="searchlink" rel="subcontent">Search DD</a></b><br />

<!-- l’élément contenu déroulant -->
<div id="subcontent" style="position:absolute; visibility: hidden; border: 9px solid orange; background-color: white; width: 300px; padding: 8px;">

<p><b>Search Dynamic Drive:</b></p>
<form method="get" action="http://search.freefind.com/find.html" id="topform">
<input name="query" maxlength="255" style="width: 150px" id="topsearchbox" alt="Search" /> 
<input value="Search" type="submit" /
</form>

<div align="right"><a href="http://www.dynamicdrive.com">Dynamic Drive</a></div>

</div>

	<script language="javascript" type="text/javascript">
	// Appel du script dropdowncontent.init(IdAncre, PositionTexte, Temporisation) en fin de page:
	dropdowncontent.init("searchlink", "right-bottom", 500)
	</script>


Les parties en rouge sont importantes. Tout d’abord, donnez à l’élément ancre un attribut Id unique, plus un attribut rel qui correspond à l’attribut Id du contenu déroulant div qu’on veut afficher. Le contenu déroulant devrait être simplement un div qui enveloppe le contenu que l’on veut révéler, et qui correspond à un attribut Id unique. Vous pouvez bien sûr donner à ce div le style que vous voulez, mais au strict minimum, il doit contenir les règles CSS "position:absolute; visibility: hidden;" pour qu’il puisse se dérouler. Finalement, à la suite des deux parties HTML ci-dessus (c'est-à-dire tout à fait à la fin de la page), appelez la fonction ci-dessous pour initialiser le script:

       dropdowncontent.init("searchlink", "right-bottom", 500)

Si vous avez plusieurs contenus déroulants dans la page, apelez cette fonction autant de fois qu’il y a de menus déroulants. Le premier paramètre est l’Id de l’élément ancre, le second est la position du déroulage ("left-bottom", "right-bottom", "left-top", et "right-top"), et enfin le troisième est la durée de l’animation en millisecondes (par exemple: 500= 1/2 seconde).

BoutonHautDePage

       9.11.3 Contenu déroulant défini dans un fichier externe (Ajax)


Plutôt que de le définir en dur dans la page, un contenu déroulant peut être rempli dynamiquement avec du contenu provenant d’un fichier externe qui se trouve dans le même domaine. Dans votre page, il vous faut toujours définir le code HTML du conteneur déroulant, toutefois ce sera simplement un DIV vide. Ensuite, utilisez l’attribut optionnel "rev" à l’intérieur du lien ancre, pour spécifier le chemin d’accès vers la page externe que vous souhaitez charger quand vous cliquez sur le menu déroulant. Voici un exemple, avec en rouge le code qui diffère de l’exemple précédent:

<!-- élément ancre avec contenu déroulant rempli dynamiquement avec Ajax-->
<b><a href="search.htm" id="searchlink" rel="subcontent" rev="external.html">Search DD</a></b><br/>

<!-- l’élément contenu déroulant -->
<div id="subcontent" style="position:absolute; visibility: hidden; border: 9px solid orange; background-color: white; 
width: 300px; padding: 8px;">

<!-- UN DIV VIDE!! -->

</div>

	<script language="javascript" type="text/javascript">
	// Appel du script dropdowncontent.init(IdAncre, PositionTexte, Temporisation) en fin de page:
	dropdowncontent.init("searchlink", "right-bottom", 500)
	</script>


Vérifiez bien que "rev" pointe vers un fichier externe de votre domaine, car pour des raisons de sécurité les domaines hors de votre site ne sont pas autorisés.

•       Paramètres supplémentaires
Vers le début du fichier dropdowncontent.js, il y a quatre paramètres globaux que vous pouvez affiner, ce sont :

delaybeforehide: 200, //fixe le délai en millisecondes avant que la boîte déroulante disparaisse lorsque la souris s’en va [onMouseout] (1000=1 sec)
disableanchorlink: true, //quand on clique sur le lien ancre, doit-il être désactivé?
ajaxloadingmsg: "Chargement en cours. Veuillez patienter...", //Message HTML qui s’affiche pendant qu’on charge la page externe Ajax
ajaxbustcache: true, //écraser (Bust) la mémoire-cache quand on va chercher les pages?

BoutonHautDePage


9.12 Diaporama d'images


Il existe sur le net de nombreuses solutions pour faire des diaporamas d'images en javascript. Voici celles que nous avons testé ainsi que leur provenance.


       9.12.1 Visionneuse d'images manuelle


Cette solution permet de faire défiler les images une à une ou automatiquement, en cliquant sur des boutons : "Précédente", "Suivante", "Lecture Automatique". Source : http://www.jejavascript.net/visionn.php

Voici l'exemple tiré de jejavascript (fig. jejavascript.net)

fj9.12.1

•       Insérez le code ci-dessous dans votre page entre les balises <head> </head>
(Juste avant </head>)

	<script language="javascript" type="text/javascript">
	<!--
	//Source : http://www.jejavascript.net/visionn.php
	var bauto = 0;
	var dossier="pict/"; // pict = Répertoire où se trouvent les images
	var numero = 1;
	function objet() {
	this.length = objet.arguments.length
	for (var i = 0; i < this.length; i++) this[i+1] = objet.arguments[i]
	}
	var nom = new objet ("imaga.jpg", "imagb.jpg", "imagc.jpg"); 
	// imaga[b, c].jpg  = Nom des images à ajouter dans le répertoire pict
	function suivante() {
	numero += 1;
	if (numero == nom.length + 1) numero = 1;
	document.image.src = dossier+nom[numero];
	}
	function precedente() {
	numero -= 1;
	if (numero == 0) numero = nom.length;
	document.image.src = dossier+nom[numero];
	}
	function changer() {
	numero += 1;
	if (numero == nom.length + 1) numero = 1;
	document.image.src = dossier+nom[numero];
	roll=setTimeout("changer()", 1500); // 1500 = temps de pose sur chaque image en millisecondes
	}
	function initial() {
	window.clearTimeout(roll);
	document.image.src = dossier+nom[numero];
	}
	function auto() {
	if (bauto == 0) {
	bauto =1; changer();
	document.vision.automat.value=" Lect/Stop ";
	}
	else {
	bauto =0; initial();
	document.vision.automat.value=" Lect/Auto ";
	}
	}
	//-->
	</script>
</head>


•       Corrigez comme suit
Nom des images - Chemin/ où trouver les images

•       Puis insérez le code ci-dessous à l'endroit où les images vont défiler

<form name="vision">
<div align="center">
<input type="button" name="precedent" value="< Précédente" onClick="precedente();">
&nbsp;&nbsp;&nbsp;
<input type="button" name="suivant" value="Suivante >" onClick="suivante();">
&nbsp;&nbsp;&nbsp;
<input type="button" name="automat" value="Lect/Auto >>"onClick="auto();">
</div>
</form>
<!-- src="pict/imaga.jpg" = chemin/nom_de_1ère_image.(gif,jpg,...)
width="200" height="194" = largeur / hauteur 1ère_image en pixels -->
<!-- Si vous ne spécifiez pas la taille des images, elles s'affichent avec leur taille originale -->
<div align="center"> <img src="pict/imaga.jpg" width="200" height="194" name="image"></div>


•       Corrigez comme suit
chemin/nom_de_1ère_image.(gif,jpg,...) / largeur / hauteur en pixels
Si vous ne spécifiez pas la taille (width="200" height="194") les images s'affichent sous leur taille originale (pratique pour des images de tailles différentes).

BoutonHautDePage

       9.12.2 Visionneuse d'images automatique


Cette solution permet de faire défiler automatiquement les images dans votre page. Il est basé sur le précédent script de la visionneuse. Source : http://www.jejavascript.net/visionn.php

•       Insérez le code ci-dessous dans votre page entre les balises <head> </head>
(Juste avant </head>)

	<script language="javascript" type="text/javascript">
	<!--
	//Source : http://www.jejavascript.net/rollauto.php

	function objet() {
	this.length = objet.arguments.length
	for (var i = 0; i < this.length; i++) this[i+1] = objet.arguments[i]
	}
	var nom = new objet ("imaga.jpg", "imagb.jpg", "imagc.jpg"); 
	// imaga[b, c].jpg  = Nom des images : à ajouter dans le répertoire pict
	var numero = 1;
	function changer() {
	document.image.src = "pict/"+nom[numero]; // pict = Répertoire où se trouvent les images
	numero += 1;
	if (numero == nom.length + 1) numero = 1;
	setTimeout("changer()", 1000); // 1000 = temps en millisecondes
	}
	//-->
	</script>
	
</head>


•       Corrigez comme suit
Nom des images - temps en millisecondes - Répertoire où se trouvent les images

•       Ensuite insérez le code ci-dessous dans la balise <body>

       onLoad="changer()"

Exemple :
<body bgcolor="#FFFFFF" background="pict/fond.jpg" onLoad="changer()">

OU (s'il y a déjà une fonction ou autre préchargée) :
<body bgcolor="#FFFFFF" background="pict/fond.jpg" onLoad="changer();prechargimg('pict/imagc.jpg','pict/imagb.jpg')">

•       Puis insérez le code ci-dessous à l'endroit où les images doivent défiler

<!-- src="pict/imaga.gif" = chemin/nom_de_1ère_image.(gif,jpg,...)
width="200" height="194" = largeur / hauteur 1ère_image en pixels
Si vous ne spécifiez pas la taille des images, elles s'affichent avec leur taille originale -->

<img src="pict/imaga.jpg" width="200" height="194" name="image">

BoutonHautDePage


9.13 Cadres clignotants et texte qui défile


Voici une fonction qui permet de faire clignoter un cadre et de faire défiler une image et du texte. Cette fonction est compatible Firefox et IE.
Source : http://www.jejavascript.net/

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<!-- fonction permettant de faire clignoter un cadre et défiler une image et du texte -->
<!-- Compatible Firefox et IE -->
<!-- Source - http://www.jejavascript.net/ //-->
<head>
<meta content="text/html; charset=ISO-8859-1" http-equiv="content-type">
<title>Cadres clignotants et texte qui défile</title>
<style type="text/css">
.txt_defil {font-size:11px;font-family:Verdana;color:#000000;text-decoration:none}
.txt_defil:link {font-size:11px;font-family:Verdana;color:#FFFFFF;text-decoration:none}
.txt_defil:visited {font-size:11px;font-family:Verdana;color:#FFFFFF;text-decoration:none}
.txt_defil:hover {font-size:11px;font-family:Verdana;color:#FFCCFF;text-decoration:underline}
</style>
<!-- Autrement on peut mettre les styles dans un fichier messtyles.css en dé-commentant la ligne ci-dessous -->
<!-- link title="messtyles" media="all" rel="stylesheet" href="css/messtyles.css" type="text/css" -->

<!-- DEBUT DU SCRIPT Cadre clignotant : 
entre les balises <head> et </head> -->
	<script language="javascript" type="text/javascript">
	<!--
	function flashit(){
	if (!document.all)
	return
	if (myexample.style.borderColor=="yellow")
	myexample.style.borderColor="lime"
	else
	myexample.style.borderColor="yellow"
	}
	setInterval("flashit()", 500)
	//-->
	</script>
<!-- FIN DU SCRIPT  Cadre clignotant -->
</head>


<body>
<!-- DEBUT DU SCRIPT  Cadre clignotant : 
entre les balises <body> et </body> -->
<p>
<br/>
<span id="myexample" 
style="
border-top: yellow 3px solid; border-left: yellow 3px solid;
border-bottom: yellow 6px solid; border-right: yellow 6px solid;
padding-top: 1%; padding-left: 1%; 
padding-bottom: 1%; padding-right: 1%;">
<strong>Cadres clignotants et texte qui défile.</strong>
</span>
</p>
<!-- FIN DU SCRIPT  Cadre clignotant -->
<br/>

<p>
<!-- DEBUT DU SCRIPT  texte et images qui défilent
entre les balises <body> et </body> -->
	<script language="javascript" type="text/javascript">
	<!--
	var txt_defil_width = 1800; //largeur de la fenêtre
	var txt_defil_height = 100; //hauteur de la fenêtre
	var txt_defil_bgcolor = '#FFCCFF'; //couleur de fond
	var txt_defil_background = "pict/Banniere.gif"; //image de fond
	var txt_defil_pause = 5000; //Temps en milliemes de secondes
	var txt_defil_info = new Array;

	// "page2.html" = page appelée si on clique sur le lien
	// STYLE="color:red;" = couleur des caractères du titre
	txt_defil_info[0]='<a href="page2.html" class=txt_defil>'+
	'<div style="color:red;" align="center">'+
	'<b>Ici,_un_titre_en_un_seul_mot,_servant_de_lien_vers_Page2.</b>'+
	'</div><br>'+
	'<div align="left">'+
	'<table width="800" border="0" class=txt_defil>'+
	'<tr>'+
	'<td>'+
	'<img src="pict/Banniere.gif" width="635"'+
	'height="130" border="0" align="middle">'+
	'</td>'+
	'<td>Placez un texte ici, à droite de l\'image, disposé comme dans le cas présent.</td>'+
	'</tr>'+
	'</table>'+
	'</div>'+
	'</a>';
	//-->
	</script>

<!-- Référence au fichier JavaScript externe jscr/textdefil_ho2.js //-->
<script language="JavaScript" src="jscr/textdefil_ho2.js"></script>
</p>

</body>
<!-- FIN DU SCRIPT  texte et image qui défilent -->
</html>
BoutonHautDePage


9.14 Interception des erreurs (gestion des exceptions)


Ref 12-106 à 108

Travaux
BoutonHautDePage


9.15 Glossaire – syntaxe et instructions JavaScript - Sources sur internet



Glossaire – syntaxe et instructions JavaScript

•       Syntaxe

  <!--//--><![CDATA[//>
  <!-- code Javascript //-->
  <!]]>
  Encadre un bloc Javascript entre les balises
  <script> et </script>
  // Commentaire   Commentaire sur une ligne
  /*
  Début du commentaire
  Suite du commentaire
  */
  Commentaires sur plusieurs lignes
  instruction ;   Chaque instruction finit par un point-virgule séparateur
  {…instructions…}   Groupe d’instructions sur plusieurs lignes entre
  {accolades}
  var nom=”Alain”;
  var age=45;
  Déclaration de variable (entier, réel, chaîne, booléen)
  parseInt(i);   Convertit i en entier
  parseFloat(f);   Convertit f en décimal
  u.toString();   Convertit u en chaîne



•       Actions sur des fenêtres (window)

  window.open();   Ouvre une fenêtre pop-up
  window.close();   Ferme une fenêtre pop-up



•       Actions dans la page (document)

  window.document.write("Bonjour"); // ou
  document.write("Bonjour");
  Ecrit Bonjour dans la page
  document.writeln("Bonjour"); // ln = ‘\n’
  document.write("Alain");
  Ecrit Bonjour suivi d’un saut de ligne [\n]
  puis Alain sur la deuxième ligne



•       Boites de dialogue (alert, confirm, prompt)

  window.alert("Bonjour !");
  alert("Bonjour !");
  Message ‘Bonjour’ avec bouton OK
  confirm("Acceptez-vous ?");   Boîte de dialogue Oui / Non
  prompt("Entrez la date");   Retourne la chaîne saisie



•       Classe (fonction "constructeur")

  function car (model, year);   Classe car
  this.model=model;   Propriété d’une classe
  car.prototype.deplacer=function()   Associe la méthode (fonction) deplacer à la classe car



Sources sur internet

Quelques excellents cours sur :
http://www.cybwarrior.com/FR/JavaScript-Introduction-au-JavaScript.html
http://www.commentcamarche.net/javascript/
http://www.allwebdesignresources.com/webdesigntutorials/programmingcoding-tutorials/javascriptingtutorials/javascriptimagespictures.html
http://www.phpfrance.com/tutoriaux/index.php/2005/03/10/21-initiation-au-javascript-benjamin
http://www.allhtml.com/articles/categorie/Javascript
http://www.cybwarrior.com/FR/JavaScript-Les-variables.html
yui de Yahoo
openrico.org animations
spry de Adobe nombreuses bibliothèques
script.aculo.us

BoutonPrecedent BoutonSommaire BoutonSuite Cette page s'affiche mal ? - cliquez ici
Architecture Web : Gilbert Pernot