Le langage

JAVASCRIPT

 

 

I Introduction

 

Vous vous dites encore un langage alors quíil y en a déjà un nombre non négligeable. En effet un de plus, mais à chaque langage son utilisation et sa particularité. Javascript propose un certain nombre díavantages que ce tutorial va síefforcer de démontrer.

 

I.1 Historique

 

         Le javascript est un langage normalisé par líorganisme du nom díECMA (European Computer Manufactures Associations) sous le numéro 262 (3ème édition 1999).

Vous retrouvez aussi cette norme sous le standard ISO (International Standard Organization) sous le nom ISO-16262.

La spécification est récupérable à líadresse suivante : http://www.ecma.ch/ecma1/STAND/ecma-262.htm

 

Ce langage de script est apparu en 1996 grâce à Brendan Fich. Connu sous le nom de javascript, ce langage va être inclus dans la version 2.0 du navigateur Netscape puis dans la version 3.0 du navigateur Internet Explorer.

Il est normalisé pour la première fois en Juin 1997 par líECMA puis en Avril 1998 par líISO.

La version actuelle de javascript est 1.3.

 

Attention

Beaucoup de personnes confondent le langage JAVA et le langage JAVASCRIPT. A part les 4 premières lettres ces deux langages níont rien à voir. Le premier à été créé par SUN et est un vrai langage Objets pour le développement.

 

I.2 Particularités du langage

 

         Tout díabord cíest un langage de scripts. Cíest-à-dire un langage de programmation qui permet díautomatiser des taches, de manipuler et améliorer le fonctionnement des systèmes.

Cíest un langage orienté objet. Líajout du mot orienté est important. En effet javascript utilise des outils des langages objets, mais il níen est pas complètement un. Il ne propose pas exactement la même philosophie díutilisation et de développement des objets notamment au niveau de líhéritage.

 

Définition

Un langage objet est un langage de programmation qui propose un ensemble de méthodes (fonctions) et de propriétés (caractéristiques) généralistes qui peuvent síappliquer aux différents objets définis dans le langage. Il existe des classes díobjets, qui hiérarchisent les objets qui la constituent. Chaque objet hérite des propriétés et méthodes de líobjet parent.

 

Cette notion de classe en javascript níest pas aussi pointue et bien définie. Cíest pour cela que le javascript est un langage orienté objet ou basé objet selon le terme employé mais pas objet tout cours.

Les objets en javascript sont des entités qui décrivent les éléments contenus dans une page HTML (frame, formulaires, image Ö) ainsi que les éléments qui structures cette page (navigateur Ö).

 

On retrouve ces éléments caractéristiques díun langage objets dans díautres langages objets comme ADA, C++, PYTHON ou JAVA.

Le javascript est un langage pour le web qui permet de dynamiser les pages HTML en interceptant les actions réalisées par líinternaute (clic droit Ö).

A la différence de langages comme PHP, le traitement des parties du document chargé par líinternaute réalisées en javascript, ne sont pas interprétées par le serveur web (celui qui distribue les pages sur líinternet), mais par le client (navigateur). Le navigateur (netscape, mozilla, Internet Explorer Ö) possède donc un interpréteur de javascript. Le traitement du langage HTML est identique, líinterprétation est réalisée côté client et non côté serveur.

 

Attention

Un effet pervers de cette interprétation côté client est díavoir des réactions différentes selon le navigateur utilisé et notamment avec Internet Explorer de Microsoft qui propose une version de javascript différente de ce que préconise la norme. Microsoft a créé son ´ propre ª javascript : Jscript qui se démarque de la norme ECMA-262. Ce phénomène se retrouve aussi avec le HTML.

 

Le javascript est donc un complément du HTLM. Il permet de produire du HTML dynamique (DHTML). Cíest-à-dire un résultat différent selon les interactions que fait líinternaute ou son environnement. Le javascript va créer du HTML ou se mettre au service de la page HTML pour proposer ce dynamisme. Il permet aussi díaccentuer, díaméliorer et díenrichir la partie graphique de votre page HTML (image rollover, menu déroulant graphique, changement de couleurs Ö). Cette dernière partie est très importante et à permis líessor du javascript qui a permis de combler un vide du langage HTML.

 

Remarque

Le fait que ce soit le client qui interprète le code javascript entraîne que votre code est visible par le client. Donc níincluez rien de ´ secret ª dans vos codes javascript.

 

I.3 Les bases du langage javascript

 

         Comme pour tous les langages, il existe des règles de construction et díutilisation.

 

a. Inclusion du code javascript

 

Vous avez deux possibilités pour insérer du code javascript dans vos sites Web et dans les pages HTML. Vous pouvez aussi utiliser les deux méthodes simultanément.

 

Ø    Dans un fichier externe

 

Ce fichier doit posséder líextension .js et il doit être accessible par le web. Ce fichier va contenir les fonctions, définitions et tous les éléments javascript nécessaires au fichier HTML auquel ce fichier est rattaché. Il faut alors inclure le fichier .js dans líentête du fichier HTML de la façon suivante :

 

<HTML>

<HEAD>

<script language="javascript" src="chemin/fichier.js">

</script>

</HEAD>

Ö

 

Vous devez donc indiquer dans líattribut src líendroit où se situe le fichier ayant líextension js ainsi que le nom de ce fichier.

 

Ø    Dans le fichier HTML

 

Vous pouvez aussi inclure le ou les codes javascript directement dans le fichier HTML. Il faut alors indiquer au moment où vous incluez du code javascript que vous faites cette action afin que líinterpréteur du navigateur client ´ traduise ª cette partie de code et effectue les actions demandées.

A chaque endroit (ou presque) où vous incluez du javascript dans votre document HTML, vous devez utiliser la syntaxe suivante :

 

Ö  þ Codes HTML

<script language="javascript">  þ Début du code javascript

Codes javascript                     þ Codes javascript

</script>                                    þ Fin du code javascript

Ö  þ Codes HTML

 

Ce schéma peut être répété autant de fois que nécessaire.

 

Remarque

Parfois en plus du mot clé javascript, la version de ce dernier est indiquée (javascript 1.2).

A contrario, il est aussi possible díomettre la partie qui suit le mot clé script et se contenter de la syntaxe <script>Ö</script>, líinterpréteur du navigateur client le comprend.

 

Dans le deuxième cas, les déclarations de méthodes (fonctions) se fait dans líentête du document entre les balises <HEAD> et </HEAD>. Mais malgré tout rien níempêche de le faire dans le document même entre les balises <BODY> et </BODY>.

Par contre, dans les deux méthodes díinclusion du code, les éléments visibles dans la page HTML se situent dans la partie BODY où sont chargés en même temps que la page en líindiquant à líintérieur de la balise BODY.

 

b. Les commentaires

 

Comme dans tous les langages de programmations mais aussi comme dans tous les documents, il est impératif de commenter les lignes de ses programmes pour une meilleure lisibilité et pour une meilleure compréhension pour vous-même mais aussi pour celles et ceux qui devront reprendre ces pages de codes si besoin est.

Pour inclure un commentaire vous avez deux possibilités qui sont tirées du C et du C++.

 

1. Les commentaires

 

Ø   //

Ce type de commentaires permet díinsérer un commentaire sur une

seule ligne.

 

Ø   /* Ö */

Ce type de commentaires permet díinsérer un commentaire sur plusieurs lignes.

 

Attention

Níimbriquez pas les commentaires.

La syntaxe suivante níest pas valide :

/* Ö /* Ö */ Ö */

 

2. Particularités

 

Ø    < !-- Ö // -->

 

Il existe un cas particulier díutilisation des commentaires. Tous les navigateurs ne supportent pas le javascript. De plus, líutilisateur peut lui-même de son propre chef désactiver cette option (Mozilla -> Edit -> Preferences -> Advanced -> décochez la case ´ enable javascript for navigator ª).

 

 

Dans ce cas, vos codes en javascript risquent de polluer líaffichage de la page HTML.

Vous pouvez alors encadrer votre code javascript par le commentaire utilisé en HTML :

 

Ö  þ Codes HTML

<script language="javascript"> þ Début du code javascript

<!--  

Codes javascript                    þ Codes javascript

// Fin du code javascript -->

</script>                                   þ Fin du code javascript

Ö  þ Codes HTML

 

Ainsi, ce qui se trouve à líintérieur de ce commentaire HTML, ne sera pas montré dans le cas où líinterpréteur HTML est seul activé. Par contre dans le cas où líinterpréteur javascript est activé, il prendra en compte les codes javascript, les commentaires HTML sont alors ignorés.

 

Ø    <noscript> Ö </noscript>

 

La balise noscript est une balise HTML et non javascript. Elle permet, dans le cas où le navigateur ne supporte pas le javascript où si il est désactiver díafficher un message dans la page HTML chargée par líutilisateur. Ce message doit être situé entre le début et la fin de la balise noscript.

 

 

c. Aide à la programmation Javascript : le débugger

 

Il est toujours intéressant, surtout au début de líapprentissage díun nouveau langage, de connaître les différents outils et les astuces qui peuvent aider à la création de vos codes.

Un des éléments importants est souvent de trouver díoù provient une erreur.

Les navigateurs web (Mozilla, Netscape) mettent à votre disposition un débogueur intégré. Ce débogueur va vous informer des éventuelles erreurs qui ont eu lieu lors du chargement et líinterprétation díune page contenant du javascript.

Pour obtenir ce débogueur appelé aussi Console Javascript :

Ø    tapez comme URL javascript: après une erreur par exemple. Une fenêtre síouvre en indiquant le type et la raison de ou des erreurs.

 

 

Ø    Vous pouvez aussi obtenir cette console Javascript au niveau du menu des navigateurs.

 

 

Ø    Autres possibilités

Vous pouvez aussi installer un débogueur externe.

 

…      Chez Microsoft vous pouvez le télécharger à líadresse suivante : http://www.microsoft.com/scripting/debugger

…      Mozilla et Netscape proposent aussi un certain nombre díoutils de déboguage aux adresses suivantes :

http://www.mozilla.org/projects/venkman

http://developper.netscape.com/software/jsdebug.html

 

d. Syntaxes

 

         Voici quelques règles simples à respecter pour éviter certaines surprises.

 

Ø    A la fin díune ligne, il níest pas nécessaire de mettre un point virgule (;). Si vous líoubliez, líinterpréteur líajoute si besoin est.

Ø    Les lignes vides ne comptent pas en Javascript.

Ø    Evitez, comme toujours, les caractères accentués dans la construction des éléments de vos programmes notamment au niveau des variables. Par contre au niveau de tout ce qui est message díaffichage pas de restriction.

Ø     La casse des éléments (variables, constantes, objets Ö) est importante. Numero et numero ne représenta pas le même élément.

Ø    La virgule dans un nombre est symbolisée par le caractère . (point).