Centre

NTE
Nouvelles Technologies et Enseignement

UNIVERSIT DE FRIBOURG - SUISSE UNIVERSITT FREIBURG - SCHWEIZ

Support de cours Javascript 1. Introduction

JavaScript est un langage de programmation qui peut tre inclus dans des pages HTML destines aux navigateurs WWW les plus courants. Grce ce langage, il est possible dcrire des pages interactives. Contrairement lutilisation du CGI, les rponses aux vnements dclenchs par le lecteur de la page se font au niveau du navigateur, sans ncessit dune transmission vers le serveur do provient la page. JavaScript ne doit pas tre confondu avec Java, qui est un langage beaucoup plus complexe permettant de crer des applications autonomes.

2. Les lments du langage

2.1 Variables et assignement
Les variables sont les lieux de mmorisation des chiffres et des caractres. En utilisant lassignement on attribue une valeur une variable. La structure gnrale de lassignement est target = source. Pour assigner une chane de caractres, on la place entre guillemets doubles ("") ou simples (''). Exemples : a=3 b = hello world c = hello from Mars a=b a = 3*4*3+2 Il existe des notations abrges pour certains types dassignements. Par exemple : Notation abrge x += y x -= y x++ x-Signification x = x + y x = x y x = x + 1 x = x - 1

En Javascript, il n'y a pas besoin de dclarer le type de variables que l'on utilise, contrairement des langages volus tels que le langage C ou Java pour lesquels il faut prciser s'il s'agit d'entier (int), de nombre virgule flottante (float), de caractres (char), etc. En fait, Javascript n'autorise la manipulation que de 4 types de donnes : des nombres : entiers ou virgules des chanes de caractres (string) : une suite de caractres

gc / 28.09.2000

Support de cours Javascript

des boolens : des variables deux tats permettant de vrifier une condition : false: lors d'un rsultat faux true: si le rsultat est vrai des variables de type null : un mot caractristique pour indiquer qu'il n'y a pas de donnes.

2.2 Oprations
2.2.1 Les oprateurs arithmtiques Les 4 oprations de base sont disponibles en mode texte : + * / Exemples : somme = somme +1 b=c-d somme = somme ^ 5 resultat = (3 + 5) * (23 / 4) 3 2.2.2 Les oprateurs de comparaison Les oprateurs de comparaison servent exprimer des conditions. Attention ne pas confondre loprateur de comparaison == avec le signe = dassignation. gal diffrent de suprieur suprieur ou gal infrieur ou gal infrieur ou gal 2.2.3 Les oprateurs logiques ET logique OU logique NON logique && || ! == != > >= < <=

2.3 La squence
Pour excuter des instructions en squence, il suffit dcrire chaque instruction suivie dun point-virgule :

gc / 28.09.2000

2 / 18

Support de cours Javascript

<instruction> ; <instruction> ; <instruction> ; ... <instruction> ; Exemple : a = 15; b = 23; c = 2 * a + b;

2.4 Les choix (slecteurs)

2.4.1 choix avec une alternative Formulation gnrale : if (<condition>) { <action>; <action>; } Exemple : if ( j == 5 ) { Somme = Somme +1; } 2.4.2 choix avec deux alternatives Formulation gnrale : if (<condition>) { <action>; <action>; } else { <action> <action> } Exemple : if ( j == 5 ) { Somme = Somme + 1 ; } else { Somme = Somme - 1 ; }
B + B + -

A1

A2

gc / 28.09.2000

3 / 18

Support de cours Javascript

2.4.3 choix avec alternatives relies Formulation gnrale : if ( <cond1> <operateur> <cond2> ) { <action> <action> } Exemples : if ( NP< 4000 && NP >=3900 ) { Canton = Valais; } if ( !(x<5 && y>7) ) { resultat = correct; } 2.4.4 choix avec conditions imbriques Formulation : if (<condition1>) { <action> } else { if (<condition2>) { <action> <action> } else { <action> <action> } } Exemple : if ( reponse ==1 ) { cadeau = cigarettes; } else { if ( reponse==3 ) { cadeau = fleurs ; } else { cadeau = chaussettes ; } }
+ B1 + A1 A2 B2 A3

B1 and B2 + -

A1

A2

2.5 Les boucles

Il est trs utile de disposer d'une instruction permettant d'effectuer de manire rptitive une srie d'oprations. JavaScript propose plusieurs types de boucles itratives. Pour chacune des boucles, la somme des nombres de 1 5 sera calcule.
gc / 28.09.2000

4 / 18

Support de cours Javascript

2.5.1 while Formulation gnrale : while ( <condition> ) { <action>; ... } Signification: Excute les <actions> aussi longtemps que la <condition> est vraie. Si la condition est fausse au dbut, aucune instruction nest excute. Exemple : chiffre = 0 ; somme = 0 ; while ( chiffre < 5 ) { chiffre = chiffre + 1; somme = somme + chiffre; } 2.5.2 do ... while Formulation gnrale : do { <action> ... } while ( <condition> ) Signification: Excute les <actions> aussi longtemps que la <condition> est vraie. Si la condition est fausse au dbut, les instructions seront quand mme excutes une seule fois. Exemple : chiffre = 0 ; somme = 0 ; do { chiffre = chiffre + 1 ; somme = somme + chiffre; } while ( chiffre< 5 ) 2.5.3 for Formulation gnrale : for ( <expression de depart> ; <condition de continuation> ; <incrementation> ) { <action> ... }

gc / 28.09.2000

5 / 18

Support de cours Javascript

Exemple: somme = 0 ; for ( chiffre = 1 ; chiffre <= 5 ; chiffre = chiffre + 1 ) { somme = somme + chiffre ; } Signification : La boucle for se droule de la manire suivante : Tant que la condition de continuation est vraie : en partant de lexpression de dpart (chiffre = 1) on excute le contenu des accolades; la variable (chiffre) est incrmente (chiffre = chiffre + 1) et on excute le contenu des accolades autant de fois que ncessaire; la boucle ne prend fin que lorsque la condition de continuation devient fausse.

2.6 Fonctions et procdures

On appelle fonction un sous-programme qui permet d'effectuer un ensemble d'instruction par simple appel de la fonction dans le corps du programme principal. Cette notion de sousprogramme est gnralement appele fonction dans les langages autres que le Javascript (toutefois leur syntaxe est gnralement diffrente...). Les fonctions et les procdures permettent d'excuter dans plusieurs parties du programme une srie d'instructions, cela permet une simplicit du code et donc une taille de programme minimale. Dans JavaScript, les fonctions et les procdures sont dfinies par le mot cl function. La diffrence entre une fonction et une procdure est que la fonction retourne une valeur (numrique, boolen etc.), ce qui nest pas le cas pour une procdure. Ce retour de valeur se fait par le mot cl return. Avant d'tre utilise, une fonction doit tre dfinie car pour l'appeler dans le corps du programme il faut que le navigateur la connaisse, c'est--dire qu'il connaisse son nom, ses arguments et les instructions qu'elle contient. La dfinition d'une fonction s'appelle "dclaration". La dclaration d'une fonction se fait grce au mot cl function selon la syntaxe suivante:: function nom(parametre1,parametre2,,parametreN) { .... } Exemple : function carre(nombre) { resultat = nombre * nombre ; return(resultat) } Pour excuter une fonction, il suffit de faire appel elle en crivant son nom (en respectant la casse) suivie d'une parenthse ouverte (ventuellement des arguments) puis d'une parenthse ferme.

gc / 28.09.2000

6 / 18

Support de cours Javascript

Exemple : Nom_De_La_Fonction();

2.7 Mthodes
Une mthode est une fonction associe un objet, c'est--dire une action que l'on peut faire excuter un objet. Les mthodes des objets du navigateur sont des fonctions dfinies l'avance par les normes HTML, on ne peut donc pas les modifier, il est toutefois possible de crer une mthode personnelle pour un objet que l'on a cr soi-mme. Prenons par exemple une page HTML, elle est compose d'un objet appel document. L'objet document a par exemple la mthode write() qui lui est associe et qui permet de modifier le contenu de la page HTML en affichant du texte. Une mthode s'appelle un peu comme une proprit, c'est--dire de la manire suivante : window.objet1.objet2.methode() Dans le cas de la mthode write(), l'appel se fait comme suit : window.document.write()

3. JavaScript et HTML
3.1 La balise <SCRIPT>
Pour pouvoir fonctionner, le code JavaScript dune page HTML doit en principe tre plac lintrieur dune balise <SCRIPT>. Une page HTML peut contenir plusieurs balises <SCRIPT>, mais elles ne doivent pas tre imbriques. On peut placer une balise <SCRIPT> soit dans lentte (HEAD), soit dans le corps (BODY) de la page HTML. On placera de prfrence une balise <SCRIPT> contenant les procdures et les fonctions dans lentte, car cela permet quelles soient charges avant le reste de la page. Comme il existe dautres langages utiliss de la mme manire que JavaScript, il est ncessaire dajouter lattribut LANGUAGE="JavaScript" dans la balise <SCRIPT>. <SCRIPT LANGUAGE="JavaScript"> code JavaScript </SCRIPT> Il est aussi possible d'ajouter des scripts une page HTML partir d'un fichier. Dans ce cas, on ajoute la balise <SCRIPT> un paramtre prcisant le nom du fichier contenant les scripts : <SCRIPT LANGUAGE="JavaScript" SRC="Nom_du_fichier.js">

3.2 Affichage et introduction des donnes : alert et prompt

La fonction alert sert afficher une valeur. Voici un exemple: alert (Hello World !);
gc / 28.09.2000

7 / 18

Support de cours Javascript

La fonction prompt sert lire une valeur. Exemple: x = prompt(Introduisez votre nom);

Aprs avoir cliqu sur OK, la variable x contient la chane de caractres qui a t introduite.

3.3 Les objets

Javascript traite les lments qui s'affichent dans votre navigateur comme des objets, c'est-dire des lments classs selon : une hirarchie pour pouvoir les dsigner prcisment auxquels on associe des proprits

Par exemple, pour atteindre un bouton l'intrieur d'un formulaire, la hirarchie est :
Window Document Form Checkbox

gc / 28.09.2000

8 / 18

Support de cours Javascript

La hirarchie des objets est la suivante :

L'accs aux objets se fait par une notation par points. D'autre part, comme il peut y avoir plusieurs formulaires et plusieurs boutons dans chaque formulaire, certains objets sont automatiquement numrots. Ainsi, accder au premier bouton du premier formulaire d'une page web se fait par la notation suivante : window.document.forms[0].checkbox[0] Le [0] reprsente ici le premier lment (le [1], le deuxime, et ainsi de suite). Il est aussi possible d'utiliser le nom de l'objet directement. Ainsi, si le formulaire s'appelle enquete (vitez les accents dans les noms d'objets) et le bouton s'appelle courrier, il sera possible d'y accder de la manire suivante : window.document.enquete.courrier Enfin, il est aussi possible d'utiliser la notation : window.document.form["enqute"].buton["courrier"]

3.4 Les vnements

Les vnements sont des actions de l'utilisateur qui vont pouvoir donner lieu une interactivit. L'vnement par excellence est le clic de souris, car c'est le seul que le HTML gre. Grce au Javascript il est possible d'associer des fonctions, des mthodes des vnements tels que le passage de la souris au-dessus d'une zone, le changement d'une valeur dans un champ, etc.

gc / 28.09.2000

9 / 18

Support de cours Javascript

Ce sont les gestionnaires d'vnements qui permettent d'associer une action un vnement. La syntaxe d'un gestionnaire d'vnement est la suivante : onEvenement="Action_Javascript_ou_Fonction();" Les gestionnaires d'vnements sont associs des objets, et leur code s'insre dans la balise de ceux-ci. Chaque vnement ne peut pas tre associ n'importe quel objet. Ainsi par exemple, l'vnement OnChange ne peut pas s'appliquer un lien hypertexte. Le tableau ci-dessous prsente les vnements par liste alphabtique : Evnement onAbort onBlur onChange onClick onDragDrop onError onFocus onKeyDown onKeyPress onKeyUp onLoad Objets affects Images Fentres et tous les lments de formulaire Description S'excute en cas d'arrt de chargement, par appui sur le boutons stop ou par un clic prmatur sur un lien S'excute quand on quitte la fentre ou un objet de formulaire

Champs texte, zones texte, S'excute quand un lment de formulaire est listes de slection modif Boutons, boutons radio, boutons submit et reset, liens Fentres Images, fentres Fentres et tous les lments de formulaire S'excute quand on clique dans ou sur un lment S'excute quand on pose un lment l'intrieur de la fentre du navigateur l'aide la souris S'excute quand le chargement de l'image ou de la fentre provoque une erreur S'excute quand on slectionne la fentre ou l'objet formulaire

Documents, images, liens, S'excute quand une touche du clavier est presse zones texte Documents, images, liens, S'excute quand on appuie et maintient une zones texte touche du clavier Documents, images, liens, S'excute quand on relche une touche du clavier zones texte Documents S'excute quand le document se charge S'excute quand on clique avec le bouton de la souris S'excute quand on bouge la souris S'excute quand le pointeur de la souris sort d'une zone de slection graphique ou un lien S'excute quand le pointeur de la souris passe sur un lien

onMouseDown Documents, boutons, liens onMouseMove rien par dfaut onMouseOut onMouseOver onMouseUp
gc / 28.09.2000

Cartes, liens liens

Documents, boutons, liens S'excute quand on relche le bouton de la souris 10 / 18

Support de cours Javascript

onMove onReset onResize onSelect onSubmit onUnLoad

Fentres Formulaires Fentres Champs ou zones texte Formulaire Documents

S'excute quand l'utilisateur ou un script bouge une fentre S'excute quand on "resete" un formulaire S'excute quand l'utilisateur ou un script change la taille d'une fentre S'excute quand on slectionne une zone ou un champ texte (clavier ou souris) S'excute au moment de l'envoi d'un formulaire S'excute quand on quitte le document

Le tableau ci-dessous rsume les objets et les vnements associs :

Objet Evnements associables Lien hypertexte onClick, onMouseOver, onMouseOut Page du navigateur onLoad, onUnload Bouton, Case cocher, Bouton radio, Bouton Reset onClick Liste de slection d'un formulaire onBlur, onChange, onFocus Bouton Submit onSubmit Champ de texte et zone de texte onBlur, onChange, onFocus, onSelect

Exemple : <html> <head> <title>Ouverture d'une boite de dialogue lors d'un click</title> </head> <body> <a href="javascript:;" onClick="window.alert('Message d\'alerte a utiliser avec moderation');">Cliquez ici!</a> </body> </html>

gc / 28.09.2000

11 / 18

Support de cours Javascript

Annexe : Proprits des objets

A.1 Objets fentre Object Proprits clear (ferm) closed (ferm) defaultStatus (texte ligne status) document (document) frames (cadres) history (historique) innerHeight (hauteur interne) innerWidth (largeur interne) length (longueur) location (adresse) locationbar (barre d'adresse) menubar (barre de menu) name (nom) opener (source ouverture) outerHeight (hauteur externe) outerWidth (largeur externe) pageXOffset (dcalage horizontal) pageYOffset (dcalage vertical) parent (parent) personalbar (barre adresses personelles) scrollbars (glissres) self (sois-mme) status (tat) statusbar (ligne d'tat) toolbar (barre d'outils) top (haut) window (fentre) Methodes alert (message d'alerte) back (arrire) blur (dselection) captureEvents (vnement) clearInterval (efface compteur) clearTimeout (efface dlai) close (fermeture) confirm (panneau de demande) disableExternalCapture (pas de capture externe) enableExternalCapture (capture externe (souris)) find (cherche) focus (slection) forward (avant) handleEvent (vnement) home (page par dfaut) moveBy (avance ou recule de) moveTo (avance ou recule ) open (ouvre) print (imprime) prompt (paneau de demande) releaseEvents (vnement) resizeBy (change taille de) resizeTo (change taille ) routeEvent (vnement) scroll (fait dfiler) scrollBy (fait dfiler de) scrollTo (fait dfiler ) setInterval (valeur intervalle du compteur) setTimeout (valeur du dlai) stop (stop)

window (fentre)

gc / 28.09.2000

12 / 18

Support de cours Javascript

location (adresse)

hash (rfrence dans page, ex: #ref1) host (machine hte) hostname (nom de la machine hte) href (document) pathname (chemin) port (port utilis, ex: 80, 8000...) protocol (protocole: HTTP, FTP, etc...) search (recherche) current (courant) length (longueur) next (suivant) previous (prcdent) availHeight (Hauteur disponible) availWidth (largeur disponible) colorDepth (nombre de plans couleurs) height (hauteur) pixelDepth (profondeur du point) width (largeur)

reload (relit) replace (remplace)

history (historique)

back (arrire) forward (avant) go (vas )

screen (cran)

gc / 28.09.2000

13 / 18

Support de cours Javascript

A.2

Objets document Object Proprits alinkColor (couleur liens actif

<BODY ALINK="">)

Methodes

anchors (liens <A HREF="">) applets (programmes Java externes

<APPLET>)

bgColor (couleur de fond <BODY

BGCOLOR="">)

cookie (cookies (reconnaissance)) domain (domaine) embeds (programmes externes <EMBED>) fgColor (couleur du texte <BODY TEXT="">) document (document) formName (nom formulaire) forms (formulaires) images (images) lastModified (dernire modification) layers (couches) linkColor (couleur des liens <BODY LINK="">) links (documents lis <LINK="">) plugins (programmes externes) referrer (adresse page prcdente) title (titre) URL (adresse) vlinkColor (couleur liens visits <BODY VLINK="">) hash (rfrence dans page, ex: #ref1) host (machine hte) hostname (nom de la machine hte) href (document attach) pathname (chemin) port (port utilis, ex: 80, 8000...) protocol (protocole: HTTP, FTP, etc...)
gc / 28.09.2000

captureEvents (vnements) close (fermeture) getSelection (texte slectionn) handleEvent (pige vnements) open (ouverture) releaseEvents (arrt pige vnements) routeEvent (vnements) write (crit des caractres) writeln (crit des lignes)

link (attaches)

HandleEvent (vnement)

14 / 18

Support de cours Javascript

search (recherche) target (destination) text (texte) border (bord) complete (chargement fini) clear (efface) height (hauteur) hspace (espace horizontal) lowsrc (?) name (nom) prototype (prototype) src (nom du fichier) vspace (espace vertical) width (largeur) above (dessus) background (image de fond) bgColor (couleur de fond) below (dessous) clip.bottom (coordone du bas pour dcoupe) clip.height (coordone de la hauteur pour dcoupe) clip.left (coordone gauche pour dcoupe) clip.right (coordone droite pour dcoupe) clip.top (coordone du haut pour dcoupe) clip.width (coordone de la largeur pour dcoupe) document (nom du document) name (nom de la couche) pageX (?) pageY (?) parentLayer (couche parent) siblingAbove (?) siblingBelow (?) src (nom de fichier) top (haut)
gc / 28.09.2000

images (images)

HandleEvent (vnement)

captureEvents vnements handleEvent (vnement) load (charge) moveAbove (souris dessus) moveBelow (souris dessous) moveBy (dplace de) moveTo (dplace ) moveToAbsolute (dplace (valeur absolue)) releaseEvents (vnement) resizeBy (change taille de) resizeTo (change taille ) routeEvent (vnement)

layers (couches)

15 / 18

Support de cours Javascript

visibility (affichage) zIndex (?) A.3 Objets formulaire Object Proprits action (action) elements (lments) encoding (codage) length (longueur) method (mthode) name (nom) target (cible) form (formulaire) hidden (champ cach) name (nom) type (type) value (valeur) defaultValue (valeur par dfaut) form (formulaire) name (nom) type (type) value (valeur) defaultValue (valeur par dfaut) form (formulaire) name (nom) type (type) value (valeur) defaultValue (valeur par dfaut) password (mot de passe) form (formulaire) name (nom) type (type) value (valeur) form (formulaire) name (nom) type (type) value (valeur) button
gc / 28.09.2000

Methodes

form (formulaire)

handleEvent (vnement) reset (reset) submit (soumission)

text (champ texte)

blur (dselection) focus (slection) handleEvent (vnement) select (actif) blur (dselection) focus (slection) handleEvent (vnement) select (actif) blur (dselection) focus (slection) handleEvent (vnement) select (actif) blur (dselection) focus (slection) handleEvent (vnement) select (actif) blur (dselection) 16 / 18

textarea (zone texte)

fileupload (champ fichier)

form (formulaire)

Support de cours Javascript

(bouton)

name (nom) type (type) value (valeur) form (formulaire) name (nom) type (type) value (valeur) form (formulaire) name (nom) type (type) value checked (enfonc) defaultChecked (enfonc par dfaut)

click (cliqu) focus (slection) handleEvent (vnement) blur (dselection) click (cliqu) focus (slection) handleEvent (vnement) blur (dselection) click (cliqu) focus (slection) handleEvent (vnement) blur (dselection) click (cliqu) focus (slection) handleEvent (vnement) blur (dselection) click (cliqu) focus (slection) handleEvent (vnement)

submit (Bouton submit)

reset (bouton reset)

radio (bouton radio)

form (formulaire) name (nom) type (type) value (valeur) checked (coch) defaultChecked (coch par dfaut) form (formulaire) name (nom) type (type) value (valeur) form (formulaire) length (longueur) name (nom) options (menus) selectedIndex (menu slectionn) type (type) defaultSelected (menu slectionn par dfaut) selected (menu slectionn) text (texte) value (valeur)

checkbox (bouton cocher)

blur (dselection) focus (slection) handleEvent (vnement)

select (slection)

options (menu)

gc / 28.09.2000

17 / 18

Support de cours Javascript

A.4

Objet navigateur Object Proprits appCodeName (nom de code de l'application) appName (nom de l'application) appVersion (version de l'application) language (langue) mimeTypes (formats connus) platform (machine utilise) plugins (programmes externes) userAgent (nom du navigateur) MimeType (Formats connus) description (description) enabledPlugin (programmes autoriss) suffixes (suffixes) type (type) description (description) Plugin (Programmes externes) filename (nom du programme) length (longueur du programme) name (nom du plugin) Methodes

navigator (navigateur) (browser) (baladeur)

javaEnabled (Java actif) plugins.refresh (relecture des programmes externes) preference (prfrences) taintEnabled (fonction taint active)

gc / 28.09.2000

18 / 18