Un petit tuteur JavaScript
Table des matières
2. Eléments du langage de JavaScript
3. Programmation classique en JavaScript
1. Présentation de JavaScript
JavaScript est un petit langage de programmation pour le Web qui s'exécute en local chez le client (et non pas sur le serveur Web). Il ne doit en aucun cas être confondu avec Java qui est un "gros" langage de programmation général (qui fonctionne dans ou à l'extérieur du Web). JavaScript permet de gérer des pages HTML dynamiques et en particulier de soulager le serveur Web de certaines petites tâches (alertes, vérifications de positivité etc). Sans être totalement objet, JavaScript utilise de nombreux concepts objets définis par prototype et non pas par classe, comme en java ou php. C'est un langage interprété, exécuté dynamiquement au fur et à mesure du chargement de la page Web qui permet d'effectuer des traitements asynchrone (technologie AJA et AJAX).
JavaScript est intégré à Firefox, Opera, Internet Explorer... mais le "moteur d'interprétation" n'est pas le même suivant le logiciel d'où quelques petites incompatibilités et spécificités. On verra un plus plus loin comment tester si le browser supporte JavaScript (ou si l'option d'activation de JavaScript est invalidée...). Pour utiliser JavaScript, on peut
soit insérer des parties SCRIPT dans les fichiers HTML.
soit utiliser des URL étendues comme <a href="Javascript: ...">
soit utiliser des balises spéciales comme onMouseover ...Chaque partie script commence par le marqueur <script> et se termine par le marqueur </script>. Il est à noter que dés le premier appel à JavaScript, le serveur Web gère une "session" JavaScript qui garde en mémoire un certain nombre d'informations, dont notamment les variables JavaScript.
Il y plusieurs attributs possibles pour la balise <script>. On peut ainsi écrire
<script>
<script language="javascript">
<script type="text/javascript">
<script type="text/javascript" language="javascript">
<script type="text/javascript" language="javascript src="prog.js" />
On notera que pour XHTML seul l'attribut type="texte/javascript" est obligatoire mais un script "online" doit certainement s'écrire avec du CDATA pour être bien propre et bien lisible. C'est pourquoi il vaut mieux externaliser le javascript dans des fichiers externes et les charger par :
<script type="text/javascript" src="demoJs08.js">Par exemple le fichier suivant, nommé xmpjs01.htm
<html> <head> <title> (gH) : un premier exemple en JavaScript</title> </head> <body> Bonjour <script language="javascript">window.document.write("tout le monde ") </script> </body> </html>est une page Web qui utilise le mode normal pour afficher "Bonjour" et qui fait appel à JavaScript pour afficher " tout le monde ".
Attention ! l'imbrication des marqueurs Web classiques et ceux de JavaScript n'a pas besoin d'être "équilibrée" tant que cela donne un page correcte. Par exemple, le fichier xmpjs02.htm qui contient
<html> <head> <title> (gH) : deuxième exemple en JavaScript</title> </head> <body> <ul> <li> Un <script language="javascript"> window.document.write("<li>Deux ") window.document.write("</ul>") </script> </body> </html>est correct, alors que le marqueur <script> commence avant que le marqueur </ul> termine la liste (ce qui est normal, ici, puisque c'est JavaScript qui termine la liste).
On peut ouvrir et fermer JavaScript plusieurs fois dans une même page, comme on pourra s'en rendre compte en affichant le "source" des pages Web mais attention ! JavaScript n'est pas conseillé en terme de sécurité car ce n'est pas le serveur qui exécute la page mais le "browser" local.
2. Eléments du langage de JavaScript
Un commentaire suit le symbole double //. L'affectation de variables se fait avec =. Par exemple n = 0 met la valeur 0 dans la variable n mais comme JavaScript est sensible à la "chasse", la variable N, différente de n n'est pas affectée. Avec Netscape, il est possible de faire apparaitre une "console" javascript en tapant l'URL javascript:. On peut alors tester en interactif les commandes, ou y lire le dernier message d'erreur Les sous-programmes commencent par le mot function et renvoient éventuellement une valeur avec le mot return. Les structures de flot classiques comme if, while, for ont une syntaxe traditionnelle, comme on pourra s'en rendre compte à la lecture du code-source des différents exemples.
La programmation orientée objets est surtout prévue en mode utilisation de classes prédéfinies plutot qu'en mode définition de nouvelles classes. La syntaxe de l'appel de la méthode MTH avec les paramètres PRM pour l'objet OBJ est simplement OBJ.MTH(PRM). De nombreuses classes standard permettent toute l'interaction avec l'utilisateur. Ainsi la classe navigator permet de savoir de quel browser il s'agit, la classe window donne accès aux documents. Par exemple on crée la fenetre F par F = window.open(...) et on l'ouvre par F.open(). On peut alors y écrire par F.document.write(...). De même, pour revenir en arrière, il suffit d'écrire window.history.back() pour un document normal et window.top.history.back() pour une "frame".
Javascript sait gérer les expression régulières, les fonctions mathématiques classiques, et dispose de constructeurs dynamiques, de fonctions pour différer l'exécution (comme setTimeout). Il n'est pas toujours évident de maitriser au début ce qui est exécuté à la lecture de la pge et ce que Javascript exécute dynamiquement. Ainsi, pour éviter le déclenchement d'une URL au chargement de la page, on utilise la construction
<a href="javascript:void(0) onClick=action()">message</a> 3. Programmation classique en JavaScript
Programmes élémentaires en JavaScript
demoJs01.htm affichage de la date source demoJs02.htm affichage du jour de la semaine source demoJs03.htm jour de la semaine par fonction et formulaire source
Programmes classiques en JavaScript
demoJs04.htm bonjour avec alerte source demoJs05.htm bonjour avec nouveau browser source fichier inclus : demoJs05s.htm source demoJs06.htm table de multiplication aléatoire source demoJs07.htm table de multiplication par sous-programme source demoJs08.htm table de multiplication avec fichier inclus source fichier inclus : demoJs08.js source 4. Exemples spécifiques en JavaScript
demoJs09.htm gestion du browser source demoJs10.htm gestion de fenêtres source demoJs11.htm informations sur le document, le browser etc. source 5. Quelques exemples plus récents
tarifs formulaire multi-volets pdb appels paramétrés d'URL avec son programme chapitres masquables dynamiquement bleues des boules bleues doute pour IE seulement... (aussi !) avec son programme