Réaliser sa page Web
   Leçon 18 : Un peu de JavaScript

Les concepts fondamentaux

Le javascript est un langage de scripts orienté objet qui permet de développer des petites applications internet. On incorpore les instructions au sein des balises HTML et on pourrait comparer ce langage aux macros d'un traitement de texte.

Ce langage, qui est relativement simple, autorise une interactivité accrue des pages web. Le code javascript se trouve dans la page HTML est sera donc exécuté au chargement de la page ou lorsqu'on effectue une certaine action dans la page.

Il peut, par exemple, permettre d'afficher l'heure, de faire défiler des textes horizontalement, rafraîchir plusieurs frames, gérer les erreurs de saisie dans les formulaires, gérer des menus déroulants. Plus récemment, il permet de gérer le remplacement d'images (par passage de la souris dessus, l'image se modifie, en fait, on peut charger une deuxième image).

En fait, bien plus qu'un simple gadget, le javascript permet des présentations de page web sous la forme de CD-roms sans passer par des plug-ins extérieurs comme Shockwave.

Les versions du langage évoluent rapidement :

  • Netscape 2 : Javascript 1.0
  • Netscape 3 : Javascript 1.1
  • Netscape 4 : Javascript 1.2
  • Netscape 4.06 : Javascript 1.3
  • etc...



Javascript repose sur la notion d'événement

La page HTML se charge, puis lorsque l'utilisateur effectue une action (clic sur un bouton, sélection d'un menu, saisie de texte, etc...), le script se lance et exécute sa tâche.

Mais ces appels de fonctions ne sont pas toujours présents dans le cas de scripts qui n'attendent pas d'action de l'utilisateur (par exemple un script qui afficherait la date, l'heure, ou la version du navigateur utilisé).

La mécanique du script, entourée des balise <SCRIPT LANGUAGE="Javascript"> et </SCRIPT> est généralement placée entre les balises <HEAD> et </HEAD>. Cependant il est possible de placer un script à l'intérieur du corps du fichier HTML.

La notion de déclencheur d'événements fonctionne un peu comme des interrupteurs. Ils ont pour nom Onload(), OnClick(), OnBlur(), OnMouseOver() etc.

La dernière chose à savoir c'est qu'un script comporte souvent au début une petite série d'instructions qui permet de tester la version du navigateur que vous posséder afin de savoir si celui-ci sera capable d'interpréter le script. Par ce test, on empêche l'exécution du script sur un navigateur qui n'est pas capable d'interpréter correctement le script.


Le javascript minimum

Signalons tout d'abord au navigateur par une balise que ce qui suit est un script et que ce script est du javascript.

<SCRIPT LANGUAGE="JavaScript">
... le code ici ...
</SCRIPT>

Certains navigateurs n'interprètent pas la Javascript et ignorent donc la balise <SCRIPT>, et vont donc afficher le texte du script brut dans la page. Pour éviter cet affichage, on utilise les instructions du langage HTML qui permettent d'écrire du commentaire.

<SCRIPT LANGUAGE="JavaScript">
<!-- On cache le script pour les anciens navigateurs
... le code ici ...
// cesser de masquer le script -->
</SCRIPT>

Gérer les différentes versions du langage

Le langage a donc évolué au fil des sorties des différentes versions de navigateurs. Pour utiliser les fonctionnalités les plus récentes, il faut parfois exclure les navigateurs précédents (même si ceux-ci supportent le Javascript, ils ne supportent pas les nouvelles fonctionnalités, et vont donc afficher un message d'erreur).

<SCRIPT LANGUAGE="JavaScript"> : programme pour Netscape 2 (et +) et explorer 3 (et +)
<SCRIPT LANGUAGE="JavaScript1.1"> : programme pour Netscape 3 (et +) et explorer 4 (et +)
<SCRIPT LANGUAGE="JavaScript1.2"> : programme pour Netscape 4 (et +)
<SCRIPT LANGUAGE="JavaScript1.3"> : programme pour Netscape 4.06 (et +) et explorer 5 (et +)



Exemples

DESCRIPTIF TESTER LE SCRIPT
Identifier le navigateur utilisé par différents moyens Javascript 1
Faire afficher un message sous forme machine à écrire Javascript 2
Faire afficher des messages rotatifs Javascript 3
Faire afficher un texte défilant Javascript 4
Vérifier la saisie correcte d'une adresse E-Mail Javascript 5
Afficher un message par passage de souris sur un lien Javascript 6
Convertisseur de chiffres arabes vers chiffres romains Javascript 7
Affichage d'un chronomètre Javascript 8
Affichage d'une horloge Javascript 9
Convertisseur de Miles en Kilomètres Javascript 10
Afficher comme message d'alerte le contenu d'une case de saisie Javascript 11
Sélection du fond d'écran par des boutons Javascript 12
Sélection du fond d'écran dans un menu déroulant Javascript 13
Ouverture d'une nouvelle fenêtre en cliquant sur un bouton Javascript 14
Affichage d'un message après le clic sur un lien Javascript 15
Affichage d'un message en pressant un bouton Javascript 16
Affichage d'une citation aléatoire Javascript 17
Navigation dans l'historique de navigation du navigateur Javascript 18
Affichage d'un message suivant l'heure de la journée Javascript 19
Afficher la date de modification du document en français Javascript 20
Affichage du jour de la semaine Javascript 21
Affichage de la date de modification du document Javascript 22
Affichage d'un menu déroulant de liens Javascript 23
Affichage d'un message sur la sélection d'un bouton Javascript 24


   On résume :
  • Procédez à une détection de la version du navigateur afin de vérifier que le script s'exécutera correctement.
  • Vérifier votre script sur plusieurs navigateurs différents