Notions générales

Avant-propos

Auparavant, la majorité des traitements effectués dans les documents HTML étaient réalisés par l'action du serveur et le poste client était très passif, puisque celui-ci se bornait quasiment à afficher les résultats des requêtes que lui soumettait le dit serveur ! En effet, un programme ou un script CGI (Common Gateway Interface) était exécuté par le serveur qui transmettait le résultat au poste client, celui-ci interprétait l'envoi HTML et l'affichait par le navigateur. Cette situation surchargeait énormément les serveurs et le réseau...

Aujourd'hui, grâce au Javascript (introduit par Netscape 2.0), et encore plus récemment avec le Dynamic HTML, cette situation a complètement changé et le navigateur est maintenant capable "d'intelligence" puisqu'il est à même de traiter des scripts, de manière indépendante au serveur (réseau non utilisé), par un traitement local.

Il est vrai que le langage JAVA en aussi capable et même plus que le Javascript, mais celui-ci est réservé à des spécialistes. Il permet beaucoup plus mais est beaucoup plus lourd, car il nécessite une bonne connaissance de la programmation (Objet), un compilateur (il est compilé à l'inverse du Javascript), un débogueur etc.

Le couple HTML-Javascript est très souple, accessible à la plupart des Webmasters et sa popularité ne cesse de grandir car il permet un réelle autonomie au poste client, d'autant plus depuis qu'il peut agir sur le modèle Objet DHTML.

TutorJS ne peut vous donner une approche complète du langage Javascript (un livre entier serait nécessaire) mais a pour but de vous aider à en découvrir les notions de bases, pour ensuite les appliquer de manière très pratique puisqu'il vous expliquera les divers javascripts proposés en standard par WebExpert 5, pour votre propre usage (c'est leur but), mais également pour vous permettre d'en créer d'autres...

HTML - JAVASCRIPT

Pour qu'un document HTML puisse exécuter des traitements par le biais du Javascript, il faut en premier lieu que celui-ci comprenne les scripts écrits dans ce langage. En effet, le Javascript est un langage de scripts et le navigateur interprète ceux-ci lors du chargement de la page HTML : on peut d'ailleurs préciser à quel moment le code doit intervenir (lors du chargement de la page, en la quittant...).

Nous allons le voir, deux manières peuvent être employées pour l'insertion d'un script Javascript dans un document HTML (pour la suite de TutorJS, quand on parlera de script, on fera exclusivement référence à un script Javascript et de même, l'abréviation JS sera employée pour définir le mot "Javascript").

Insertion entre des balises spécifiques

La première manière, pour insérer un script JS, se fait à l'aide d'une balise spécifique <SCRIPT> qui doit être insérée dans le document HTML lui-même :

Structure de la codification

Ceci doit être complété, pour raison de compatibilité avec les navigateurs de version inférieure, par l'adjonction des balises de commentaires HTML, qui permettront ainsi aux navigateurs plus anciens d'ignorer le contenu du script. Cet ajout n'est pas obligatoire pour l'exécution du script, c'est pourquoi il est mentionné en excursus. Cependant, il est recommandé de l'employer, lui-même agrémenté éventuellement par les mots (Debut du script et Fin de script) si vous voulez rendre la lecture du code très lisible.

Insertion dans la balise d'un élément

On peut également insérer un code javascript par l'ajout d'un code spécifique dans la balise de l'élément qui sera traité ou lancera le traitement par un script (qui lui, sera inséré dans les balises spécifiques <SCRIPT>). Il est possible d'employer une fonction intégrée du Javascript par le seul ajout de ce code dans la balise de l'élément mais cela restera très limité. Dans la majeure partie des cas, ce code servira à lancer une fonction définie dans un script "conventionnel" c'est-à-dire, inséré (ou lié) par les balises conventionnelles (<script>).

Voici un exemple concret :

Ce code provoque l'apparition d'une fenêtre (alerte) par le clic (l'événement "onclick") sur l'image... Cette fenêtre spéciale, "alerte", est une fenêtre de dialogue (modale) dans laquelle une chaîne de caractères (message) est affichée. C'est une méthode de l'objet window et il y deux autres fenêtres de ce type (confirm et prompt). Pour cet exemple, il n'est donc pas nécessaire d'insérer un script dans le document, même si en général, c'est ce qui sera employé, notamment pour appeler une fonction qui devra elle être définie dans un script.

Même exemple mais avec l'appel d'une fonction crée dans un script :

<SCRIPT LANGUAGE="JavaScript"> <!-- function message { alert('Voici l\'image en question...') } //--> </SCRIPT>

<IMG SRC="b2c.jpg" BORDER=0 WIDTH=30 HEIGHT=27 onclick = "message()">

Cliquez sur l'image...

Vous avez remarqué un caractère "\" (barre oblique inverse), appelé caractère d'échappement, placé avant l'apostrophe placé devant le mot "image" ! En fait, l'apostrophe est un caractère qui fait partie de la syntaxe du code Javascript (comme les guillemets) et pour indiquer que cet apostrophe particulier ne doit pas être interprété comme tel, il faut placer ce caractère ("\") avant l'apostrophe (ou les guillemets). Ainsi, le navigateur sait qu'il ne doit pas considérer cet apostrophe comme une commande (ou partie de commande) proprement dite...

Vous pouvez visionner toutes les propriétés, objets et méthodes de javascript par le bouton "Commandes Javascript en bref" de l'onglet "Javascript". Cela vous sera expliqué dans la section qui lui est consacrée.

Balise spécifique : <NOSCRIPT>

Si l'utilisateur qui visionne vos documents HTML, comprenant des scripts JS, n'a pas activé l'option appropriée, il est possible de lui donner un message particulier. En effet, tout texte inséré avec la balise spécifique <NOSCRIPT> verra celui-ci affiché tandis que le navigateur de ceux pour qui l'option est activée ignorera le texte...

Variables

Pour représenter, manipuler, stocker ou modifier des valeurs, fournies dans un code Javascript, comme dans tout langage de programmation, il faut utiliser des variables.
En javascript, la déclaration des variables est très simple car très peu différenciée. Javascript emprunte la plupart de ses définitions des langages de programmation C et C++..

Il n'est pas obligatoire, mais recommandé, de déclarer des variables par le mot clé "var". L'identificateur de variable doit, pour être correct, être une chaîne de caractères qui commence par une lettre de l'alphabet ou le caractère de soulignement ("_"). Le reste de la chaîne peut comporter des chiffres.

var adresse = "Rue Dupont"
var numero = 12
var _ex
var y

Dans ces exemples, il y a deux variables (adresse et numero) auxquelles ont été attribuées directement des valeurs, et deux autres (_ex et y) sans valeur initiale. On entoure une chaîne par des guillemets (ou apostrophes).

On parle de variable locale et globale lorsque la variable a été déclarée dans une fonction (locale) ou en dehors (globale) : la portée de ces variables étant différente, localement ou globalement. On peut donner le même nom à une variable globale et locale mais il est recommandé de ne pas donner les mêmes noms aux variables... !

Dans cet exemple, il est pris expressément le même nom pour les variables globale et locale (adresse) pour bien vous montrer la différence entre les deux affectations. La valeur de la première variable (globale) est "Rue Dupont", tandis que celle de la seconde (locale) est "Paris". Dans l'usage courant, et pour éviter les confusions, il est recommandé de ne pas donner les mêmes noms aux variables...

Vous pouvez découvrir ici la méthode "write()" de la propriété "document" de l'objet window, qui peut afficher à l'écran des valeurs littérales (même des instructions Javascript) et l'opérateur de concaténation de chaînes de caractères ("+").

Types de variables

En JS, il y a différents types de variables : les Chaînes de caractère ("Rue Dupont"), les Nombres, les Booléens, les Objets (pour les données qui sont structurées), les Fonctions et le type à valeur unique null.

Les chaînes de caractères (STRING)

Comme la plupart des langages, JS détermine par des apostrophes ( ' ) ou des guillemets ( " ) le début et la fin de la Chaîne de caractères (on ne peut mélanger les deux symboles).

Il existe des caractères spéciaux, qui peuvent être placés dans les constantes de chaîne de caractères (caractères entourés d'apostrophes ou de guillemets mais sans mélange) et qui permettent d'insérer :

Voici le code de cet exemple :

Pour rappel, il y a également deux caractères spéciaux :
le caractère d'échappement ( \ ) et celui de concaténation ( + ).

Les Nombres

Pas de différence en JS entre les nombres entiers et réels !

• Les nombres de base 8 (octale) doivent commencer par un 0 {035137 : représentation octale du nombre décimal 14943 = (((3*8 + 5)*8 + 1)*8 + 3)*8 + 7};

• Les nombres de base 16 (hexadécimale) commencent par 0x {0x3A5F : représentation hexadécimale du nombre décimal 14943 = ((3[3]*16+10[A])*16+5[5])*16+15[F]};

• Les autres nombres de base 10 (décimale) : 14943 : (((1*10 + 4)*10 + 9)*10 + 4)*10 + 3

Les booléens

Ceux-ci ne prennent que deux valeurs possibles : true et false.

Les Fonctions

Celles-ci vont seront expliquées en détail dans la section "Définition d'un script".

Les Objets

Si JS n'est pas véritablement un langage orienté Objet, celui-ci possède beaucoup de caractéristiques et une syntaxe qui s'inspire de la programmation Objet.

Classe

Un ensemble d'Objets qui possède une structure et un comportement commun forme une classe.

Chaque caractéristique d'un Objet est appelée une propriété.

Méthode

Les outils qui s'appliquent aux Objets d'une classe sont appelés Méthodes : celles-ci sont très semblables aux fonctions.

Objets prédéfinis et classes prédéfinies

On trouve deux types d'objet :

• Les Objets du navigateur (définis au moyen des balises HTML)

• Les Objets caractéristiques au JS (classes prédéfinies)

Il n'est pas possible de donner ici une description complète des différents Objets mais cependant, en voici une description sommaire :

Objets du navigateur

De manière générale, on distingue trois classes différentes :

• window

• navigator

• screen

Classe window

• Propriété history (contenant les informations sur les URL visitées)

• Propriété document (informations en rapport avec le document en cours)

• Propriété location (contenant les propriétés de l'adresse URL du document)

Des exemples pratiques vous seront donnés plus loin.

Différentes Méthodes dont alert() que nous avons déjà employé plus haut : open, blur, prompt, confirm...

Vous pouvez consulter et insérer toutes ces méthodes par le bouton de l'onglet Javascript de WebExpert 5.

Classe navigator

Différentes propriétés, que nous emploierons plus loin, comme : AppName, AppVersion etc. qui nous permettront de créer un script de détection du navigateur employé par l'utilisateur.

Classe screen

Différentes propriétés également comme height and width que nous emploierons dans un exemple de script qui vous permettra de détecter la résolution de l'écran (640x480 ou plus...).

Les Classes prédéfinies

JS possèdent des Objets prédéfinis :

• Les Chaînes de caractères (STRING)

• Les constantes mathématiques et les fonctions mathématiques

• Les dates et leurs méthodes

Voici en bref :

String

De nombreuses méthodes existent pour leur manipulation : charAt, indexOf, lastIndexOf, substring etc.
Lorsque nous en rencontrerons dans les javascripts proposés par WebExpert 5 ou pour des scripts supplémentaires, nous en donnerons la description précise.

Math

L'Objet Math possède des propriétés et méthodes qui sont associées aux constantes et fonctions mathématiques : Math.cos (x) par exemple.

Date

Il n'y a pas de variables de type Date en JS mais avec l'objet Date, on peut manipuler des données représentant des dates par les nombreuses méthodes associées.
Pour créer un objet de type Date : varName = new Date(paramètres)
Ainsi, pour créer un objet Date qui contient la date du jour (système bien sûr) : jour = new Date()

Les tableaux

Un tableau est un ensemble de données, qui sont ordonnées et accessibles par le nom du tableau et un indice (index). JS n'a pas de variables prédéfinies de type "tableau", il faut donc créer un constructeur. En effet, on peut compléter l'ensemble des objets prédéfinis de JS par de nouveaux objets, que l'on crée. Cette création se fait en deux étapes : définir en premier lieu le type d'objet (par une fonction) et ensuite, une instance de l'objet à l'aide du mot-clé "new" (comme nous venons de voir pour l'objet Date).

Voici un constructeur d'un tableau linéaire (à une seule dimension) :

Ce constructeur initialise chaque élément par une incrémentation de 1 (i++) et attribue la valeur (this[i]=i++). On peut créer un constructeur qui attribue 0 à tous les éléments (this[i]=0).

Nous avons donc maintenant le moyen de créer un tableau, par exemple :

Ce tableau contient donc 10 éléments (1 à 10). Vous pouvez donner ensuite une autre valeur que les nombres qui ont été crées par le constructeur (1 à 10) par sa référence, par exemple pour l'élément 2 (indice 2) :

Voici un petite script qui donne les valeurs des éléments du tableau actuel :

Vous avez constaté que le premier élément [tab.length] contient l'index du tableau (le nombre d'éléments) et l'élément 11 n'existant pas, il n'a pu être affiché (undefined).

Il est très important d'avoir bien compris la construction d'un tableau, car plusieurs javascrits vont l'employer dans leur script.

Événements et nouveaux attributs des balises HTML

En JS, on peut déterminer la réaction du navigateur face aux actions de l'utilisateur. Ces événements (clic de souris, passage de souris, changement du contenu d'une zone de saisie...) peuvent être gérés par un code : on parle de "programmation événementielle".

Il faut souligner que suivant le navigateur utilisé, la liste des événements qui peuvent être gérés par script, dans leur contexte, est différente ! Ainsi, par exemple, Netscape ne gère pas le "onclick" en dehors des ancres (Anchors), c'est pourquoi, pour raison de compatibilité, il faudra créer une "pseudo-ancre" pour employer cet événement. Vous en avez vu un exemple concret, plus haut, quand vous avez cliqué sur l'image (clic qui provoquait l'apparition d'un message d'alerte : "Voici l'image en question").

Voici quelques exemples : onClick, onMouseOver, onLoad, onChange,onMouseUp, onKeyDown, onKeyPress etc.

Tous ces événements ne peuvent être gérés par tous les éléments ! Les éléments <A> ou <AREA> par exemple gèrent : onClick, onDblClick, onMouseout, onMouseOver, onMouseDow, onMouseUp.

Quelques opérateurs

Il n'est pas pour but ici de vous donner une description complète de tous les opérateurs qui existent dans le Javascript, mais voici les incontournables :

Opérateurs arithmétiques

l'addition (+)
la multiplication (*)
la soustraction(-)
la division (/)
le modulo (%) : le reste de la division entière d'un entier par un autre (14%3) =2 [2 = le reste de (14/4), car 14 = (4x3) + 2]

Opérateurs d'affectation

Le placement des opérateurs avant la variable (++a, --a) réalise une affectation antérieure à l'opération en cours. Le placement après réalise l'affectation après l'opération en cours. Par exemple :

Opérateurs de relation

En fonction du résultat du test de comparaison des opérandes, les opérateurs de relation donnent la valeur true ou false :

Les opérateurs binaires

Exemple :

Notez que !0 [NOT 0] peut valoir n'importe quel nombre non nul, souvent -1 ou 1 selon les interpréteurs. FALSE est équivalent à 0, et TRUE à un nombre non nul. Ainsi si a = 122 par exemple, le message d'alerte suivant va s'afficher :

if (a) alert("A n'est pas nul !");

Si a =0, le message suivant va aussi s'afficher :

if (!a) alert("A est nul !!!");

NULL n'est pas équivalent à un nombre nul (zéro), mais à "non-affecté" ou vide, par exemple :

Attention, le signe égal d'affectation est différent du signe == de comparaison.

Si vous visualisez cet exemple sous Netscape, celui-ci vous affichera un message d'alerte, vis à vis de la possible confusion entre les signes "=" et "==" mais exécutera le script néanmoins.

Opérateurs logiques

Cela donne :

Une expression est terminée par le signe ";" ou par un retour de ligne. On peut associer plusieurs expressions en les plaçant entre accolades { expression1; expression2; expression3; }

Expression conditionnelle

Cette expression vous rendra de grands services :

(condition) ? expression1 : expression2

Si la condition est vraie, dans ce cas, l'expression1 est réalisée, dans le cas inverse, c'est l'expression2 qui est réalisée.

Par exemple, pour une fonction(script) que Netscape n'interprète pas, si c'est Internet Explorer qui est détecté (variable ie4), dans ce cas, lancer la fonction montre(), sinon ignorer la commande (null)

ie4 ? montre() : null

On pourrait bien sûr exécuter une instruction pour Netscape : dans ce cas, on remplace null par l'instruction le concernant...

Instructions conditionnelles

Pour rester dans le même ordre d'idée, voici les deux formes d'instructions de langage conditionnelles :

ou si c'est seulement le test de la condition qui détermine l'action du code :

Pour l'exemple donné pour l'expression conditionnelle, cela donnerait :

De même ici, on peut ajouter else (comme décrit plus haut) et placer le code concernant Netscape. De plus, on peut imbriquer plusieurs conditions If...

Instruction for...

Pour exemple, voici une petite application visuelle (vous pourrez trouver la page "for.html" qui réalise cet exemple dans l'Annexe)

<script LANGUAGE="JavaScript">
function deplace(from) {

    for(var cpt = 50 ; cpt <=300 ; cpt += 50)    
    {
        pos.left = (from - cpt);
    alert("Retrait de " + cpt + " px " + " \rNouvelle position = " + pos.left)
    }
}
</script>

Instruction while...

Prenons l'exemple visuel précédent et remplaçons l'instruction for par while (page while.html en Annexe), cela donne :

Nous pouvons maintenant commencer à analyser les différents javascripts que WebExpert 5 met à notre disposition...

Avant ce parcours, voici la structure qui sera généralement employée pour les javascripts décrits :

Cliquez sur le bouton du script pour visionner son explication...