Juste une cuillerée de JavaScript...
Ca fera pas de mal...
Ca pourrait donner la pêche à votre web...
Attention ! Ne l'avalez pas !
Après cette leçon, vous pourrez :
JavaScript vous offre, vous le concepteur de pages web, un moyen d'améliorer encore le design et les fonctionnalités de vos pages web. Malheureusement, un cours complet sur le JavaScript dépasse le cadre de ce didactictiel (pour cela, consultez quelques-unes des références que nous vous recommandons), mais nous allons vous donner un avant-goût de ce que JavaScript peut faire.
Tout d'abord, faites attention aux énormes différences entre Java, un langage de programmation et JavaScript, un langage de scripts. Les gens les utilisent trop souvent de manière interchangeable. Java a été développé par Sun Microsystems comme langage de programmation indépendant des plateformes logicielles, afin de créer des petites applications, aussi appelées "applets", pouvant être intégrées dans une page web ou rester des programmes de bureau. Les applets Java sont des petits programmes autonomes que vous pouvez utiliser sans savoir ou même être intéressés par ce qui se trouve à l'intérieur (nous verrons, dans une prochaine leçon, comment trouver et utiliser ces applets Java).
L'inconvénient de Java réside dans le fait que, si vous voulez créer vos propres applets, vous devez apprendre un langage de programmation complexe ou essayer d'utiliser un des récents outils logiciels qui rendent le coding moins difficile. L'autre problème est que les applets Java requièrent un temps assez conséquent pour se charger et s'exécuter, "gelant" essentiellement votre page web avant qu'elle se "charge" (à notre avis, attendre pour charger une bannière qui défile n'est pas très éloigné du tag <blink> !).
Appelé à l'origine "LiveScript", JavaScript fut développé par Netscape comme quelque chose de très différent. Il a été renommé à cause de sa structure similaire au langage de programmation Java. Pour créer du JavaScript, vous tapez simplement les commandes dans votre document HTML et le navigateur interprète les commandes au moment de la mise en page web.
Par chance, vous avez maintenant compris qu'au fur et à mesure qu'un navigateur lit le code HTML d'un document, il commence à l'assembler et le mettre en page de haut et bas, de sorte qu'une page peut commencer à s'afficher alors que le navigateur est encore en train de lire la fin du document HTML. Le navigateur lit les codes HTML un par un, puis réagit et met en page sans poser de questions.
Quand le navigateur web rencontre du code JavaScript, il commence à l'interprêter ligne par ligne. Et le JavaScript peut imposer au navigateur différents comportements suivant la situation, ou créer une fonction qui ne sera activée que quand l'utilisateur fera quelque chose de particulier dans la page. JavaScript peut même créer du code HTML à la volée, afin que vous puissiez afficher un message différent suivant le jour de la semaine ou changer l'arrière-plan de façon aléatoire à chaque fois que vous rechargez la page web.
Pensez donc au JavaScript pour ajouter un peu plus d'esprit à votre page web. Etant plus simple à apprendre qu'un langage de programmation comme Java, JavaScript vous permet néanmoins de gravir un échelon dans la complexité de la mise en page HTML.
Dans cette leçon, nous allons voir quelques petits trucs de JavaScript que vous pourrez utiliser tout de suite dans vos pages web. Dans une autre leçon, nous verrons comment l'utiliser pour traiter les formulaires de pages.
La position du code Javascript dépend de ce qu'il doit faire. Comme nous allons le voir, nous placerons quelquefois le code JavaScript entre les tags <HEAD>..</HEAD> de votre fichier HTML. A d'autres moments, il sera dans le corps du document. Et, dans d'autres cas, il est ajouté aux tags HTML pour répondre à des "évènements" initiés par la personne visualisant votre page web.
L'approche de base pour écrire la majorité des "doses" de JavaScript est la suivante :
<SCRIPT LANGUAGE="JavaScript">
<!-- invisible pour les navigateurs ne supportant pas JavaScript
// Ceci est un commentaire JavaScript. Il n'est pas interprêté
Commande JavaScript 1;
Commande JavaScript 2;
Commande JavaScript 3;
// fin de l'invisibilité -->
</SCRIPT>
<NOSCRIPT>
Contenu pour les navigateurs ne supportant pas
JavaScript
</NOSCRIPT>
C'est le moyen le plus sûr pour créer du JavaScript qui marche dans la majorité des environnements. Toutes les fonctions sont décrites dans les "commandes" entre les tags <SCRIPT>...</SCRIPT>. Les lignes écrites en rouge à l'intérieur de ces tags empêchent le code de s'afficher si le navigateur de l'internaute ne supporte pas JavaScript. Souvenez-vous que, si un navigateur ne comprend pas le tag <SCRIPT>, il l'ignorera. Les lignes en rouge :
<!-- invisible pour les navigateurs ne supportant pas JavaScript
:
:
// fin de l'invisibilitÈ -->
englobent les commandes JavaScript dans un tag de commentaire HTML afin qu'elles ne soient pas affichées. Le navigateur continuera, ignorant les tags <NOSCRIPT> et </NOSCRIPT> (ici encore, l'ignorance est sacrée) mais il affichera le contenu entre ce deux derniers tags.
Maintenant, dans le cas où le navigateur supporte JavaScript, il commence à interprêter le code ligne par ligne. En JavaScript, les lignes commençant par <!-- ou par // sont gérées comme des commentaires, donc ignorées. Le navigateur regarde toutes les autres commandes, qui sont des instructions pas à pas, et fait ce qu'on lui dit de faire.
NOTE : Chaque commande JavaScript doit se terminer par un point-virgule (;) indiquant au navigateur qu'il est temps d'exécuter la commande qu'il vient de lire.
La plus simple des commandes JavaScript est probablement celle qui affiche une alerte -- du texte apparaît alors dans une boite de "dialogue" au milieu de l'écran, et en général, l'ordinateur émet un bip et vous oblige à cliquer sur un bouton OK pour retourner à l'endroit où vous étiez. Par exemple, regardez ce qui se passe quand vous cliquez sur le bouton ci-dessous :
La commande pour cela se présente comme suit :
alert('JavaScript présent, patron ! Que puis-je pour vous ?');
Maintenant, si nous avions simplement inséré ceci dans notre fichier HTML :
<SCRIPT LANGUAGE="JavaScript">
<!-- invisible pour les navigateurs ne supportant pas JavaScript
alert('JavaScript présent, patron ! Que puis-je pour vous ?');
// fin de l'invisibilitÈ -->
</SCRIPT>
Le message d'alerte surgira aussitôt que le navigateur lira le code, et ce n'est probablement pas ce que nous voulons. Pour voir ce qui se passe, essayez cette page de test.
Plus exactement, comme pour le bouton ci-dessus, vous voulez que cette commande s'exécute quand elle est déclenchée par un "évènement" comme, par exemple, l'utilisateur cliquant la souris ou même déplaçant sa souris à différents endroits de l'écran. Nous en apprendrons plus sur les évènements un peu plus loin.
Maintenant, nous allons vous submerger de jargon de programmation ! Ne vous crispez pas nerveusement !
JavaScript définit un modèle objet pour l'environnement web. Qu'est-ce que ça veut dire ? Voyez-le comme une structure en arborescence qui, au fur et à mesure que vous la lisez, se déplace de la gauche vers la droite ; plus exactement, cette structure référence les choses en allant des plus globales aux plus spécifiques.
Hein ?
Le premier "parent" est le "navigateur" - il a plusieurs "propriétés" différentes qui décrivent plus ou moins le programme web que vous utilisez, par exemple son type (Netscape, Microsoft, etc) et son numéro de version. En dessous se trouve la "fenêtre", objet qui décrit les propriétés d'une fenêtre web, avec ses attributs spécifiques. Encore en dessous, on trouve l'objet "document", qui définit l'information d'une page web particulière, disons son URL, la date de dernière modification, combien de liens il y a dans la page. Et, à l'intérieur de l'objet document, il existe d'autres objets dont nous allons parler.
Donc, en JavaScript, nous devons souvent référencer les choses suivant leur place dans l'arborescence objet de leur famille, comme :
fenêtre.document.formulaire[3].choix.options[2]
qui pointera vers une propriété de "options" contenue dans quelque chose d'autre appelé "choix", qui fait lui-même partie d'un "formulaire" dans le document d'une fenêtre. Donc, de gauche à droite, ce modèle objet va du plus grand vers le plus petit des objets, chacun d'eux étant séparé par un point. Les choses entre crochets ([x]) représentent des tableaux, ou des collections d'objets semblables : dans l'exemple ci-dessus, le document a au moins 4 formulaires puisque nous nous référons au troisième (ça semble confus parce que JavaScript compte les objets en partant de 0 et non de 1 !).
Nous pouvons parfois utiliser ce type de structure pour "tester" notre environnement web, ou en obtenir une valeur appelée propriété. A d'autres moments, nous utilisons cette structure pour changer ces valeurs ou propriétés.
En avançant dans les leçons, votre tâche devient plus ardue. Certains navigateurs web, particulièrement les plus vieux, ne supportent pas JavaScript, mais nous avons choisi des exemples de code qui devraient marcher dans la plupart des environnements.
De plus, le code JavaScript est très sensible ! Quand vous copiez les exemples de code, il est très important de ne pas inclure de codes de retour chariot à l'intérieur d'une ligne de code JavaScript. Vous comprendrez ce que nous voulons dire dans la prochaine leçon.
Ceci est une introduction, nous n'avons donc apporté aucun changement à notre projet.
Revoyons les grandes lignes de cette leçon :
Essayez d'insérer des alertes JavaScript dans différentes parties de votre document HTML. Que se passe-t-il si vous en placez deux différentes dans deux parties distinctes de votre document ?
Docteur JavaScript vous prescrit votre première dose... les messages d'alerte déclenchés par les clics et les "rollovers" de souris.
Ecrire le HTML : Leçon 27 : Une 'tite Dose de JavaScript
©1994-2003
Maricopa Center for Learning and Instruction (MCLI)
Maricopa Community Colleges
La 'net connection (en anglais) à MCLI est
Alan Levine
Suggestions en Français à Bernard Bensoussan
URL: http://www.mcli.dist.maricopa.edu/tut/tut27.html