Cours de JavaScript

JavaScript est,comme son nom l'indique,un langage de scripts . De ce point de vue, il est d'un apprentissage simple et rapide et permet à des programmeurs débutants de réaliser leurs premières pages web sous une forme particulièrement attrayante et fonctionnelle.

Mais, JavaScript est aussi un langage de programmation à part entière , permettant de réaliser des applications complexes dès que l'on a acquis une connaissance suffisante du langage et de ses diverses possibilités. Deux restrictions qu'il convient toutefois de souligner :

• JavaScript ne dispose d'aucune fonctionnalité graphique ;
• pour des raisons bien compréhensibles de sécurité, JavaScript ne peut ni lire ni écrire un fichier.

JavaScript est un langage non typé (« loose typing »). Cela signifie qu'il n'est pas forcément utile de déclarer les variables qui vont être utilisées et encore moins d'indiquer leur type.

En fait, une variable est implicitement déclarée dès son apparition et typée par son contexte d'utilisation (affectation).

var entier;
var i = 0;
valeur = i;

Dans l'exemple ci-dessus, chacune des variables a été déclarée ; les deux premières de façon explicite alors que la troisième l'a été de façon implicite. Concernant le typage, à chaque instant, le type d'une variable est celui qui a été induit par le contexte d'utilisation le plus récent. Si, bien que déclarée, une variable n'a pas été affectée, elle possède néanmoins un type : undefined.
Ici, les variables i et valeur sont de type numérique, la première par son initialisation (affectation lors de la déclaration), l'autre par affectation d'une variable elle-même de type numérique. Quant à la variable entier, son type est pour l'heure « undefined ». Pour bien comprendre ce mécanisme, reprenons le précédent exemple :

var entier;                // déclaration explicite, type undefined
var i = 0;                // déclaration explicite, type numérique
valeur = i;                // déclaration implicite, type numérique
entier = "0123";        // typage chaîne de caractères
i = entier + valeur;     // i devient la chaîne de caractères "01230". L'affectation a nécessité la conversion de valeur en "0" pour la concaténation.

Finalement, parler de langage non typé peut prêter à confusion, voire à incompréhension. En effet, le typage est omniprésent, il y a des fonctions propres au type chaîne de caractères, d'autres spécifiques aux variables numériques, mais nous verrons que bien souvent par des mécanismes automatiques de conversion (tels que nous venons de le voir), nous pourrons employer des variables dans un contexte qui ne leur est pas naturel. Cette facilité sévèrement jugée par certains puristes est un des facteurs de puissance de ce langage. En fait, plutôt que non-typage, il vaudrait mieux parler de transtypage.

Un autre aspect de ce transtypage est qu'une variable déjà définie et typée comme nous venons de le voir, peut être redéfinie et/ou retypée à tout moment.

var entier = "0123";    // déclaration explicite, type chaîne de caractères
i = entier + "456";        // déclaration implicite, type chaîne de caractères,i prend la valeur "0123456"    
entier=i*1;                // transtypage chaîne de caractères -> nombre, entier prend la valeur numérique 123456
var i=entier/2;         // redéfinition explicite & transtypage chaîne de caractères -> nombre, i prend la valeur numérique 61728.

Sans nous étendre d'excès sur ce point que nous développerons en détail dans le prochain chapitre, le survol de ce premier paragraphe serait néanmoins incomplet si l'on ne précisait pas que JavaScript est un langage orienté objet. Pour le lecteur qui ne connaît que les langages orientés action (type Pascal ou C), dans lesquels les données avaient un rôle secondaire par rapport au rôle primordial concédé à l'aspect essentiellement algorithmique, il va lui falloir reconsidérer sa démarche de programmation. Dans ces langages orientés objets tels que C++, Java ou JavaScript, tout est pensé en fonction des données, les objets, à leur structure (les propriétés), aux manières grâce auxquelles on va y accéder (les méthodes), aux manières de les créer qui sont des méthodes particulières (les constructeurs). Cette façon de programmer est très bien adaptée à un souci de sécurité, particulièrement crucial dans le domaine d'internet, puisqu'on ne peut pas faire n'importe quoi sur n'importe quoi ! Cette façon de voir est caricaturale, mais pour une introduction qui se veut concise, elle conviendra…

Malgré ses faux airs de ressemblance dont, en particulier, son nom, JavaScript n'a absolument rien à voir avec Java. Alors que JavaScript, nous l'avons vu, est un langage interprété, « non typé », qui ne possède aucune possibilité graphique, ne peut manipuler des fichiers, Java, au contraire, est compilé, a une panoplie de typages particulièrement riche, autorise la mise en œuvre de dessins et même, le plus souvent, d'animations et dispose de nombreuses fonctionnalités d'exploitation de fichiers. À l'inverse, Java ne peut en aucune manière contrôler le fonctionnement d'un navigateur ou avoir accès aux objets contenus dans un document HTML, chose que fait à merveille JavaScript y compris pour contrôler les applettes Java !!!

Ce sont donc deux compères qui se complètent à merveille dans l'univers des nouveaux médias de communication, mais il ne faut voir aucun lien direct ou indirect dans la consonance de leur nom, si ce n'est de basses considérations commerciales qui sont venues substituer au nom de « LiveScript » prévu à l'origine celui de « JavaScript », peut être plus porteur dans le début des années 90 du fait de l'impact grandissant du produit de Sun Microsystems.

JavaScript est à la programmation sur Internet ce que Frigidaire est aux réfrigérateurs ;-)
En effet, c'est une marque déposée par Netscape. Dans la firme Microsoft, on ne connaît pas JavaScript !!! (Surtout depuis le procès retentissant qui a opposé Netscape à Microsoft, l'issue n'ayant pas été à l'avantage de ce dernier…) Non, chez Microsoft, on ne connaît que JScript !!!

Sur la base de ces considérations, on voit poindre le spectre de l'incompatibilité qui va obliger le « programmeur de scripts » à tester le type de navigateur utilisé par le client, sa version, la plate-forme qui le supporte (Windows 16 ou 32, MacPPC, Unix…) et bien d'autres choses encore, afin d'adapter le script qu'il développe à tous les cas de figure envisageables s'il veut que son document puisse être accessible le plus largement possible.

Un script dont l'idée de base se veut simple peut donc devenir « une usine à gaz » si l'on doit tenter de prendre en compte toutes les solutions possibles. Dans ces conditions, le premier besoin du programmeur est de tester l'ensemble de son script dans les différentes situations. Là encore, les méthodes diffèrent :

• sous Netscape, rien de plus simple. Après chargement du document contenant le script à tester, il suffit, en local, d'entrer dans la ligne URL de la fenêtre du navigateur la commande « javascript: ». Une fenêtre s'ouvre vous indiquant, pour chaque erreur rencontrée, l'endroit où elle a été détectée, son type et la raison probable de son origine. Vous pouvez aussi récupérer par réseau un analyseur à l'adresse :

http://developer.netscape.com/software/jsdebug.html ;

• sous Microsoft Internet Explorer, malgré l'éventail beaucoup plus modeste des fonctionnalités offertes par cet interpréteur, on ne peut espérer bénéficier d'aucune possibilité de débogage intégré. Il ne vous reste que la possibilité de télécharger un programme permettant de diagnostiquer les erreurs à l'adresse :

http://msdn.microsoft.com/scripting/debugger .

Un programme JavaScript s'intègre directement dans votre page HTML entre deux balises <script> et </script>. De plus, afin de solliciter l'interpréteur JavaScript, on précise dans la balise ouvrante : <script langage="JavaScript">.

JavaScript peut intervenir dans un document HTML essentiellement de deux façons :

• la première que je qualifierai de synchrone s'exécute au chargement de la page. Le programme JavaScript a pour objet d'écrire dans le document du code HTML pouvant s'adapter dynamiquement à plusieurs facteurs tels que le type de configuration matérielle et/ou logicielle du client (navigateur, plugins…), le contenu éventuel de certains cookies, la date, l'heure du moment présent, etc.
  Les parties du document dépendant de facteurs variables ne peuvent donc pas être écrites « en dur » dans le code HTML (le simple fait que HTML n'autorise pas de tests permet de comprendre cela). À chaque endroit où le contenu du document devra s'adapter à ces facteurs extérieurs, un script sera placé et exécuté au moment du chargement.
  

  Ces scripts prendront naturellement leur place dans le corps du document (entre <body> et </body>) ;

• la seconde, par opposition, aura un fonctionnement asynchrone. Il s'agira de scripts qui s'exécuteront non pas au moment du chargement de la page.

Comme nous l'avons dit précédemment, la façon la plus simple d'invoquer une séquence JavaScript consiste à inclure dans le corps du code HTML un script dont le résultat apparaîtra exactement à l'endroit où il s'exerce. C'est le fonctionnement que nous avons appelé synchrone et dont nous avons vu un exemple avec l'affichage de la date courante.
Dans le cas du fonctionnement asynchrone, nous avons vu qu'il intervenait à la suite d'un événement sur un des composants de la fenêtre active. Dans ce cas deux nouvelles possibilités peuvent être envisagées :

les actions (instructions) JavaScript que l'on désire associer à un type d'événement particulier sont indiquées en totalité dans la liste des caractéristiques de l'objet sur lequel l'événement s'est produit ;
Nous avons vu une utilisation de cette méthode dans l'apparition de la fenêtre d'alerte indiquant la fin du chargement de la page

Cela était obtenu par :

<body ... 
onload="alert('Je peux &agrave; pr&eacute;sent vous le dire :\n la page est charg&eacute;e !!!')"...

où onload indique l'événement survenant sur la page (document) et auquel est associée l'instruction JavaScript qui suit.

Dans cette même liste des caractéristiques de l'objet apparaît une référence vers les instructions JavaScript que l'on désire associer à l'événement pris en compte sur ledit objet. Dans ce cas, la référence est en fait un nom de fonction (objet que nous introduirons plus tard) dont la définition contient donc les instructions (cette fonction sera, bien entendu, définie à l'intérieur de balises <script>).
Dans l'exemple précédent, nous avions en fait :

<body &#8230; 
onload="alert('Je peux &agrave; pr&eacute;sent vous le dire :\n la page est charg&eacute;e !!!')"
onUnload="Fermer()">

L'événement de « déchargement » (correspondant à la fermeture) est traité dans une fonction, que l'on a choisi d'appeler Fermer, qui avant de fermer la fenêtre courante, ferme celle qui a permis de l'ouvrir elle-même. Cette fonction Fermer et éventuellement d'autres, seront définies à l'intérieur de balises de script. Ces balises de script (i.e. les scripts) avec celles que nous avons vues en 1 peuvent être en nombre quelconque dans une page. En fait ils constituent les parties d'un seul et même programme JavaScript. À ce titre, les variables ou fonctions de l'un seront disponibles et utilisables dans n'importe quel autre.

Sous votre navigateur, vous pouvez aussi exécuter du JavaScript en tapant directement des instructions dans la ligne URL du navigateur à la suite du préfixe "javascript:" (attention, n'oubliez pas les deux points).
Ce type d'utilisation est plutôt réservé pour la mise au point de portions de programme.
À noter que sous Netscape, si vous tapez uniquementjavascript: dans la ligne URL, une fenêtre console s'ouvre, vous permettant de tester des instructions entrées dans la zone de saisie.

Une entité HTML est une séquence de caractères débutant par &. Par exemple, un « é » dans une page HTML, sera en fait la traduction de « &eacute; ». Netscape, depuis sa version 3 autorise dans le code HTML, des entités JavaScript. Leur syntaxe est simple :

&{ liste d'instructions JavaScript };

Une seule restriction, ces entités JavaScript ne peuvent être utilisées que dans les valeurs d'objets HTML. Par exemple, dans le champ de texte ci-dessous, seuls ceux utilisant Netscape pourront voir le résultat de l'appel à une fonction nommée « Bidon » ; les autres ne verront que l'appel de celle-ci sous la forme décrite précédemment :

Que les autres (ceux qui ne voient que le nom de la procédure appelée) se consolent, ce n'était pas bien important… De toute façon, dans les versions récentes des navigateurs de la famille Mozilla (Netscape, Mozilla, Camino, Safari…), cette fonctionnalité n'existe plus.

Cette liste, non exhaustive, s'arrêtera sur la possibilité qu'offre Netscape 4x d'inclure dans votre page HTML des commentaires conditionnels. Nous reviendrons dans le chapitre suivant sur ces types de commentaires. Précisons seulement ici qu'entre des balises habituelles de commentaires HTML : <!-- et -->, on trouve en premier lieu une expression booléenne JavaScript. Ce test est suivi de code HTML ou, pour ce qui nous intéresse ici, d'un script. Dans le cas où le résultat du test est false ou que le test n'est pas évalué, car le navigateur ne supporte pas cette fonctionnalité, l'ensemble conserve le caractère de commentaire. Dans le cas contraire, le script est exécuté.

Là encore, cette fonctionnalité peu utilisée a disparu sur les navigateurs de nouvelle génération.

Nous venons de montrer diverses façons par lesquelles JavaScript peut être invoqué. Cela nous a permis de découvrir une partie des différents modes d'insertion de JavaScript dans une page. Avant d'en terminer, il est nécessaire d'ajouter qu'au lieu de mettre les instructions JavaScript utilisées par une page en totalité dans celle-ci, on peut avoir recours à l'utilisation de fichiers contenant tout ou partie des divers éléments utilisés.

L'utilité d'un tel système est multiple :

1. Lorsque plusieurs pages d'un site utilisent des variables ou fonctions identiques, au lieu de dupliquer celles-ci dans chacun des documents HTML, il sera plus judicieux de regrouper toutes les parties communes dans un seul fichier et de préciser dans chacun des documents HTML, seulement le nom du fichier dont il s'agit. Cela réduit l'espace disque serveur nécessaire pour stocker les fichiers HTML et rend toute modification plus simple et plus sûre ;
2. Si l'ensemble des parties communes est important, le fait d'en soulager chacune des pages qui les référencent rendra plus rapide le chargement de celles-ci ;
3. Pour ce qui est du temps de chargement des parties communes, il n'interviendra que lors de la première utilisation puisqu'à partir de cet instant, l'ensemble sera dans le cache ;
4. Le mode d'accès au fichier par URL est tel que l'on peut tout à fait considérer que ce fichier est local au site serveur (cas le plus courant), mais peut aussi concerner n'importe quel serveur sur le web.

Les fichiers peuvent être de deux types. Le premier type concerne des fichiers qui contiennent du source JavaScript pur (sans HTML). Le fichier sera postfixé par l'extension .js et chaque page le référençant le fera par : <script src="path/nom de fichier.js"></script>.

<script src="../../Sources_JS/Sces_Chap1.js"></script>

Pour cela votre serveur devra être configuré afin d'exporter ces fichiers avec le type MIME application/x-javascript.

Le second type de fichier concerne les fichiers-archives ayant une extension .jar (Java archive) et contenant plusieurs fichiers du type de ceux que l'on vient de voir, mais compressés (Netscape propose un outil gratuit réalisant ces archives). La référence à ces fichiers se fera d'une façon proche de la précédente :

<script archive="../../Archives_JS/CoursJS.jar" src="Sces_Chap1.js"></script>

Nous avons déjà abordé ce problème au sujet de l'utilité de placer un script entre <head> et </head> afin de pouvoir le rendre activable avant le chargement complet de la page. Ce qui nous intéresse ici c'est de savoir s'il est possible d'utiliser un identificateur (par exemple une fonction ou une variable indiquant le type de navigateur utilisé par le client) à un endroit de la page HTML alors qu'il est défini dans un script placé plus loin dans la page.

La réponse est OUI !!! En fait, au moment du chargement, tout le code JavaScript est analysé quel que soit son emplacement dans la page. Si bien qu'en n'importe quel lieu de la page, on peut référencer toute variable pourvu qu'elle soit définie au plus haut niveau et donc qu'elle soit visible.

En conséquence, hormis les considérations que nous avons évoquées au sujet de la réaction précoce aux événements (avant le chargement complet de la page §4) et hormis les cas d'utilisation synchrone, les scripts peuvent être placés n'importe où dans la page HTML. Les références en avant seront bien traitées.

Au surplus, pour venir confirmer cela, rappelons ce que nous avons ditComment-JavaScript-est-il-invoqué-?: tous les éléments JavaScript d'une page constituent les parties d'un seul et même programme JavaScript !!!

Ce premier chapitre visant à introduire les généralités de JavaScript trouve ici son épilogue qui n'est probablement que temporaire, car il y aura sûrement d'autres points à développer…