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).
Exemple
:
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 :
Exemple
:
var entier;
var i = 0;
valeur = i;
entier = "0123";
i = entier + valeur;
//
déclaration explicite, type undefined
// déclaration explicite, type numérique
// déclaration implicite, type numérique
// typage chaîne de caractères
// 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 (tel 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.
Exemple
:
var entier = "0123";
i = entier + "456";
entier=i*1;
var i=entier/2; ;
//
déclaration explicite, type chaîne de caractères
// déclaration implicite, type chaîne de caractères,i
prend la valeur "0123456"
// transtypage chaîne de caractères -> nombre, entier
prend la valeur numérique 123456
// 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, puisque 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
typage 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. A 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.
2 - Les diverses formes de JavaScript.
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 figures 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 alternatives 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 :
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 debogage intégré. Il ne vous reste que la possibilité
de télécharger un programme permettant de diagnostiquer les
erreurs à l'adresse :
Face aux problèmes que nous venons d'évoquer,
l'utilisateur est en droit d'espérer une normalisation de ce langage
de plus en plus utilisé, afin que sa tâche soit enfin simplifiée
en n'ayant plus l'obligation de tripler ou quadrupler la plupart de ses programmes.
Soyez satisfaits, un standard existe !!!! En l'état actuel des choses il a pour nom ECMA-262 (European
Computer Manufactures Association). Cette norme
dans sa troisième version date de 1999 ! Depuis, une nouvelle
norme ECMA-327 a été proposée en juin 2001. Une
autre standardisation ISO (International Organization of Standardization)
ayant pour code ISO/IEC-16262 a été définie. Mais
ne vous réjouissez pas trop vite... Ces standards définissaient,
il y a encore peu, un langage correspondant approximativement à
JavaScript 1.1, alors que nous en sommes aujourd'hui à la version
1.4. Toutefois, il convient de noter qu'une nouvelle
version de la norme ISO/IEC-16262 a été proposée
en 2002.
En fait ces standards ne voulant avantager ni Netscape,
ni Internet Explorer ont choisi d'adopter un niveau très bas (en gros,
l'intersection des fonctionnalités offertes par les deux navigateurs),
ce qui leur confère un intérêt de portabilité,
mais passablement douteux sur le plan des fonctionnalités (C'est
pourquoi, la plupart du temps les créateurs préfèrent
adapter leurs pages aux deux navigateurs les plus utilisés en prévoyant
les particularités de chacun). Conscients de cette évidence,
Netscape et Microsoft ont d'ores et déjà proposé une
mise à jour du standard. Mais la procédure n'en est qu'à
ses débuts et vous aurez le temps d'aligner de nombreuses lignes de
programmes avant que le nouveau standard soit adopté. Il y a fort
à parier qu'il sera d'ailleurs devenu obsolète lorsqu'il entrera
en vigueur ;-)
Dans la suite de ce cours, chaque fois qu'une nouvelle fonctionnalité
sera introduite, la version et l'appartenance au standard seront précisées.
4 - Que fait-on avec JavaScript
?
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 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 documents dépendant de facteurs variables ne peuvent
donc pas être écrits "en dur" dans le code HTML
(le simple fait que HTML n'autorise pas de tests permet de comprendre cela).
A 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 ,
mais une fois celle-ci chargée, lorsque l'utilisateur va interagir
avec elle au moyen des différents objets qu'elle contient (liens,
boutons, champs de texte,...), mais aussi par des actions sur l'environnement
(déplacement de la fenêtre, activation d'une autre fenêtre,
déplacement de la souris, frappe au clavier,...). Les moindres faits
sont épiés, traqués et peuvent donner lieu à
des réactions du script. Ces réactions
seront donc provoquées par des événements qui
se seront produits après la fin de chargement de la page. La fonction
de ces scripts n'est donc pas de générer dynamiquement du
code HTML et de toute manière cela serait impossible puisque une
fois la page chargée, on ne peut plus modifier son contenu texte
!!!! La place de ces scripts ne s'impose donc pas dans le corps du document.
On a plutôt tendance à les positionner en tête du document
(entre les balises <head> et
</head>) .
5 - Comment
JavaScript est-il invoqué ?
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 à présent vous
le dire :\n la page est chargé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 ... onload="alert('Je peux à présent vous
le dire :\n la page est chargé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.
A 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). Vous pouvez essayer ce mode d'utilisation de JavaScript
en cliquant directement ICI.
Ce type d'utilisation est plutôt réservé
pour la mise au point de portions de programme.
A noter que sous Netscape, si vous tapez uniquement javascript:
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 "é". 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, c'est 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 toutes façons, 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 :
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 ;
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 ;
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.
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>.
Exemple
:<script src="../../Sources_JS/Sces_Chap1.js"></script>
ATTENTION
:
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 :
Exemple
:<script archive="../../Archives_JS/CoursJS.jar"
src="Sces_Chap1.js"></script>
6 - La place des
scripts dans le document a-t-elle une importance ?
Nous avons déjà un 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 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 dit au § I.5.3 : tous les éléments
JavaSript 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....