Cours et tutoriels pour apprendre le JavaScript avec les astuces – Cours et formation gratuit

(1)

INTRODUCTION... 3

JAVASCRIPT EST-IL NORMALISÉ ?... 3

QU'Y A T-IL SOUS LE CAPOT ? ... 3

JAVASCRIPT CÔTÉ CLIENT ET CÔTÉ SERVEUR... 3

JAVASCRIPT ET HTML... 3

Balise Script ... 4

VARIABLES ET DONNÉES... 4

DÉCLARATION DE VARIABLES (VAR)... 4

TYPES PRIMITIFS... 4

Booléen (Boolean)... 4

Nombre (Number) ... 4

Chaîne (String)... 5

Tableaux... 5

Date... 5

Conversion de types ... 6

OPÉRATEURS... 6

Opérateurs arithmétiques... 6

Opérateurs relationnels... 7

Opérateurs logiques ... 7

Opérateurs bit à bit ... 7

Opérateurs unaires spéciaux... 7

Opérateurs d'affectation... 7

Autres opérateurs ... 8

CONTRÔLE DE FLUX... 8

If Else ... 8

while ... 8

for ... 8

LES FONCTIONS ... 9

LES OBJETS... 9

INTRODUCTION... 9

LES MÉTHODES DES OBJETS... 9

PROTOTYPES ET CONSTRUCTEURS... 10

EXEMPLES D'OBJETS DU NAVIGATEUR... 11

MODÈLE OBJET DU NAVIGATEUR ... 12

OBJET DOCUMENT... 12

HTML ET JAVASCRIPT ... 13

FORMULAIRES... 13

Événements intrinsèques ... 13

Objets formulaires... 14

Accès aux objets FORMS ... 14

Cas du contrôle SELECT... 15

Evènement focus... 16

GESTION DES IMAGES... 16

Objet Image... 17

Déclaration d'une image... 17

Relation avec les balises IMG... 17

DYNAMIC HTML... 17

UTILISATION DES BALISES <DIV> ET <LAYER> ... 18

Manipuler une balise DIV avec Netscape ... 18

Manipuler une balise DIV avec Internet Explorer ... 18

LES COOKIES ... 18

(2)

INTRODUCTION

/H-DYDVFULSWHVWXQODQJDJHLQWHUSUpWpHWRULHQWpREMHWTXLVH[pFXWHF{WpFOLHQWRXF{WpVHUYHXU,O HVW SDUWLFXOLqUHPHQWDGDSWpDX :RUOG :LGH :HE SXLVTXLOIRQFWLRQQHDYHF OH +70/ +\SHU 7H[W 0DUNXS/DQJDJH&HODQJDJHSUHQGXQHSODFHSUpSRQGpUDQWHGDQVOHQYLURQQHPHQW,QWHUQHW&HVW JUkFHjOXLTXHOHVSDJHV:HEVHQULFKLWDYHFXQFRQWHQXLQWHUDFWLIHW DQLPp /HV SRVVLELOLWpV GH +70/pWDQWOLPLWpHV-DYDVFULSWVLPSRVHFRPPHXQFRPSOpPHQWLQGLVSHQVDEOH

Javascript est-il normalisé ?

2XL HW QRQ (Q IDLW -DYDVFULSW HVW Qp FKH] OD VRFLpWp 1HWVFDSH HW SRUWDLW OH QRP GH /LYH 6FULSW 'HYDQWOHVXFFqVHWOHSKpQRPqQH GHPRGH GX ODQJDJH -$9$ /LYH 6FULSW HVW GHYHQX -DYDVFULSW /RUVTXH0LFURVRIWVHVWUHQGXFRPSWHGHOLPSDFWGHFHQRXYHDXODQJDJHLODFUpH-VFULSW/HVGHX[

pGLWHXUV RQW LPSOpPHQWpV GHV IRQFWLRQQDOLWpV SURSUHV HW FHOD SRVH FHUWDLQV SUREOqPHV GH FRPSDWLELOLWpHQWUHOHVYHUVLRQVGHQDYLJDWHXUVLQWHUQHW

+HXUHXVHPHQWORUJDQLVPHGHQRUPDOLVDWLRQ(&0$DFUpH(&0$6FULSW&HVWDQGDUGSHUPHWGHIL[HU FHUWDLQHVIRQFWLRQQDOLWpVGXODQJDJH'HFHSRLQWGHYXHOHV-DYDVFULSWHW-VFULSWGH1HWVFDSHHW 0LFURVRIWVRQWFRPSDWLEOHVDYHFODQRUPH(&0$6FULSW&HSHQGDQW(&0$6FULSWQHVDUUrWHSDVVXU ODVSHFWLQWHUIDFHFHVRLQpWDQWODLVVpDX[pGLWHXUVGHORJLFLHOVTXLULYDOLVHQWjFRXSVGHQRXYHOOHV WHFKQRORJLHVLQFRPSDWLEOHVOHVXQHVDYHFOHVDXWUHV

(Q FRQFOXVLRQ RQ SHXW GLUH TXH OD WHQGDQFH HVW j OD QRUPDOLVDWLRQ PDLV LO GHPHXUH TXHOTXHV SUREOqPHVGLQFRPSDWLELOLWpHQWUHOHVYHUVLRQVHWOHVpGLWHXUV

Qu'y a t-il sous le capot ?

/HVSULQFLSDOHVFDUDFWpULVWLTXHVGXODQJDJH

9 2ULHQWpREMHW2QPDQLSXOHGHVREMHWVWHOVTXHGHVIHQrWUHVGHVERXWRQVGHVLPDJHV«

9 ,QWHUSUpWp$OLQYHUVHGX-DYD-DYDVFULSWHVWFRPSLOpDXPRPHQWGHOH[pFXWLRQGXSURJUDPPH

9 'pULYpGX&/HVIRQFWLRQVOHVRSpUDWHXUVVRQWOHVPrPHVPDLVVLPSOLILpVHWSOXVWROpUDQWV

9 3RUWDEOH,QGpSHQGDQWGXPDWpULHOLOSHXWrWUHH[pFXWpSDUWRXWGqVTXHOHV\VWqPHHVWSRXUYXGXQ LQWHUSUpWHXU-DYDVFULSW

9 ,QVpUpGDQVGHVDSSOLFDWLRQK{WHV1DYLJDWHXUDSSOLVSURSULpWDLUHV

Javascript côté client et côté serveur

-DYDVFULSWSHXWVH[pFXWHUF{WpVHUYHXUHWF{WpFOLHQW/HF{WpFOLHQWHVWXWLOLVpSRXUDJUpPHQWHUGHV SDJHV +70/ GXQ FRQWHQX SOXV G\QDPLTXH HW LQWHUDFWLI /H F{Wp VHUYHXU HVW UpVHUYp j GHV DSSOLFDWLRQVHQUHODWLRQDYHF-$9$RXODWHFKQRORJLH$63GH0LFURVRIW,OHVWSRVVLEOH GHQWUHU HQ UHODWLRQDYHFGHVEDVHVGHGRQQpHVHWOHVODQJDJHVGHVFULSWWHOVTXH-DYDVFULSWVRQWOHVDFWHXUV SULYLOpJLpVGHFHWWHFRPPXQLFDWLRQ

Javascript et HTML

8QVFULSWSHXWVHWURXYHUDXVHLQGXQHSDJH+70/JUkFHjODSUpVHQFHGHODEDOLVH6&5,37!/H FRUSV GX VFULSW VHUD VRLW GLUHFWHPHQW GDQV OD SDJH +70/ RX j OH[WpULHXU 'DQV FH FDV XQ OLHQ H[WpULHXUYHUVOHILFKLHUFRQWHQDQWOHSURJUDPPHVHUDLQVpUpGDQVODSDJH+70/

(3)

Balise Script

&HWWHEDOLVHPDUTXHOHGpEXWGXQVFULSWGDQVODSDJH+70/(OOHSHXWVLQVpUHUDXWDQWGHIRLVTXH QpFHVVDLUHGDQVOHVEDOLVHV+($'RX%2'<(OOHFRQWLHQWSOXVLHXUVDWWULEXWV

$WWULEXW$WWULEXW 6LJQ6LJQLLILFDWLRQILFDWLRQ

W\SHW\SH 6SpFLILHOHODQJDJHGHVFULSWXWLOLVp&HWDWWULEXWGRLWrWUHXQ W\SH0,0(,QWHUQHW

ODQODQJJDDJJHH 6SpFLILHpJDOHPHQWOHODQJDJHPDLVVRXVIRUPHGXQ LGHQWLILFDWHXUWH[WHVLPSOHHWQRQVWDQGDUG VUFVUF ,QGLTXHODORFDOLVDWLRQGXVFULSWORUVTXLOHVWVpSDUpGX

GRFXPHQW Attributs de la balise SCRIPT ^HU([HPSOHGXWLOLVDWLRQGHODEDOLVH6&5,37

<SCRIPT langage="Javascript">

… Contenu du script

</SCRIPT>

2X

<SCRIPT type="text/javascript">

… Contenu du script

</SCRIPT>

/DGHUQLqUHPpWKRGHQHVWFRPSDWLEOHTXDYHFOHVYHUVLRQVGHVQDYLJDWHXUV(OOHXWLOLVHOHIRUPDW 0,0(

^qPH([HPSOHGXWLOLVDWLRQGHODEDOLVH6&5,37DYHFUpIpUHQFHjXQILFKLHUH[WHUQH

<SCRIPT langage="Javascript" src="myScript.js"> </SCRIPT>

Variables et Données

Déclaration de variables (var)

/DGpFODUDWLRQGXQHYDULDEOHVHIDLWDYDQWVRQXWLOLVDWLRQJUkFHDXPRWFOpYDUYDU var toto ;

,OHVWSRVVLEOHGHGpFODUHUWRXWW\SHGHYDULDEOHVDQVHQVSpFLILHUOHW\SH&HWWHVRXSOHVVHHVWGXHj ODJUDQGHSHUPLVVLYLWpGX-DYDVFULSW

Types primitifs

Booléen (Boolean)

/HW\SHERROpHQQHSHXUSUHQGUHTXHYDOHXUV7UXHHW)DOVH titi = true;

tutu = false;

Nombre (Number)

,OQ\DSDVGHGLVWLQFWLRQHQWUHOHVUpHOVOHVHQWLHUVRXOHVRFWHWV8QQRPEUHSHXWrWUHFRGpGH

(4)

nombre1 = 10.25;

nombre2 = 17;

nombre3 = 1.05e+14

nombre4 = 0xFF52 // Nombre hexadécimal

/HQRPEUHHVWOLPLWpDX[YDOHXUVLQIpULHXUHVjHQYLURQ Chaîne (String)

,OQH[LVWHSDVGHW\SHSRXUUHSUpVHQWHUXQVHXOFDUDFWqUH/H VHXOPR\HQ SRXU \ SDUYHQLU HVW GH FUpHUXQHFKDvQHDYHFXQVHXOFDUDFWqUH/DFKDvQHGRLWrWUHGpOLPLWpHSDUGHVJXLOOHPHWVVLPSOHV RXGRXEOHV2QXWLOLVHOHVJXLOOHPHWVVLPSOHVGDQVOHFDVRXQHLQVWUXFWLRQ-DYDVFULSWHVWH[pFXWpH DXVHLQGXQHSURSULpWpGXQHEDOLVH+70/$SSHOjXQHIRQFWLRQSDUH[HPSOH

chaine = "Salut";

RX

<A HREF="http://www.diderot.org" onClick="alert('Vous allez vers le site Diderot')">Diderot </A>

/H[HPSOHSUpFpGHQWVLQVqUHGDQVOHFRUSVGXQHSDJH+70/,OFUpHXQOLHQYHUVOHVLWH'LGHURWHW DSSHOOHODIRQFWLRQ-DYDVFULSWDOHUWTXLDIILFKHXQHERvWHGHGLDORJXHFRQWHQDQWODFKDvQHWUDQVPLVH jODIRQFWLRQ2QUHPDUTXHUDODSUpVHQFHGHVJXLOOHPHWVVLPSOHVSRXUOHSDVVDJHGHODFKDvQHGDQV ODIRQFWLRQYLVDQWjQHSDVSHUWXUEHUOHFRGH+70/

Tableaux

8Q WDEOHDX VXWLOLVH SRXU VWRFNHU GHV GRQQpHV GLIIpUHQWHV GDQV XQH VHXOH YDULDEOH GRQW OLQGLFH YDULH3RXUGpFODUHUXQWDEOHDXRQXWLOLVHODV\QWD[HQHZQHZ

var jours= new Array(7);

jour[0] = "Lundi";

jour[1] = "Mardi";

jour[2] = "Mercredi";

… RXHQFRUH

var jours= new Array("Lundi", "Mardi", "Mercredi" … );

/HVpOpPHQWVGXQWDEOHDXQHVRQWSDVIRUFpPHQWGHPrPHW\SH8QWDEOHDXSHXWWUqVELHQFRQWHQLU GHVFKDvQHVHWGHVQRPEUHV

3RXUFUpHUGHVWDEOHDX[jSOXVLHXUVGLPHQVLRQVLOVXIILWGHFUpHUGHVWDEOHDX[GHWDEOHDX[

var matrice = new Array(2);

matrice[0] = new Array(2);

matrice[1] = new Array(2);

matrice[0][0] = 1;

matrice[1][0] = 2;

matrice[0][1] = 3;

matrice[1][1] = 4;

Date

,OVDJLWGXQW\SHGREMHWSHUPHWWDQWGHWUDLWHUOHVGDWHVHWOHVKHXUHV&HVREMHWVRQWGHVPpWKRGHV TXLDXWRULVHQWXQSURJUDPPHMDYDVFULSWjFRQQDvWUHOKHXUHV\VWqPHGHORUGLQDWHXUFOLHQW

$XGpSDUWXQREMHWGDWHQHFRQWLHQWULHQ,OGLVSRVHGHSOXVLHXUVPpWKRGHVYLVDQWjWUDLWHUOHVGDWHV VRXVWRXWHVOHXUVIRUPHV

9RLFLXQHYXHGHQVHPEOHQRQH[KDXVWLYHVGHVPpWKRGHVGHVREMHWVGHW\SHGDWH

(5)

$WWULEXW

$WWULEXW 6LJQ6LJQLLILFDWLRQILFDWLRQ JHW'DWH

JHW'DWH 5HWRXUQHOHMRXUGXPRLVHQXWLOLVDQWOKHXUHORFDOH JHW'D\

JHW'D\ 5HWRXUQHOHMRXUGHODVHPDLQHHQXWLOLVDQWOKHXUH ORFDOHSRXUGLPDQFKH«

JHW+RXUVJHW+RXUV 5HWRXUQHXQHQWLHUFRUUHVSRQGDQWjOKHXUHGXMRXUHQ XWLOLVDQWOKHXUHORFDOHj

JHW0LQXWHV

JHW0LQXWHV 5HWRXUQHXQHQWLHUFRUUHVSRQGDQWjODPLQXWHGH OKHXUHHQXWLOLVDQWOKHXUHORFDOHj JHW6HFRQGV

JHW6HFRQGV 5HWRXUQHXQHQWLHUFRUUHVSRQGDQWjODVHFRQGHHQ XWLOLVDQWOKHXUHORFDOHj

JHW7L

JHW7LPPHH 5HWRXUQHXQHQWLHUFRUUHVSRQGDQWDXQRPEUHGH PLOOLVHFRQGHVpFRXOpHVGHSXLVOH^HU-DQYLHU VHW7LPH

VHW7LPH VHW'DWH

VHW'DWH«« 0pWKRGHVSHUPHWWDQWGHIL[HUODGDWHRXOKHXUHSRXU OHVREMHWVFRQFHUQpV

3RXU SOXV GH UHQVHLJQHPHQWV FRQVXOWH] OD GRFXPHQWDWLRQ pOHFWURQLTXH 0LFURVRIW -6&ULSW Y GRFXPHQWDWLRQIRXUQLHORUVGXVWDJH9RXV\WURXYHUH]WRXWHVOHVPpWKRGHVSRXYDQWrWUHDSSHOpHV DYHFGHVREMHWV'DWH

9RLFLXQH[HPSOHTXLFUpHXQREMHWGDWHHWOXLDIIHFWHOKHXUHFRXUDQWHHWDIILFKHOHQRPEUHGHMRXUV GHSXLVOH^HU-DQYLHUGDQVXQHERvWHGHGLDORJXH

var myDate = new Date;

myDate.setTime ( myDate.getTime() );

alert ("Nombre dejours depuis 01/01/70 :" + ( myDate.getTime() * 1000 * 3600 * 24 ) );

Conversion de types

,OH[LVWHGHVIRQFWLRQVGHFRQYHUVLRQGHW\SHTXLSHUPHWWHQWGHVSpFLILHUH[SOLFLWHPHQWODFRQYHUVLRQ jHIIHFWXHU9RLFLGHVH[HPSOHVGHFRQYHUVLRQH[SOLFLWHVRXLPSOLFLWHV

var a = String(21.34) // Donne a = "21.34"

var b = Number ("12.56") // b = 12.56 var c = + ("0xFE99"); // c = 65177

var d = "14.1" – 5 ; // Conversion implicite de "14.1" en nombre : d = 9.1

Opérateurs

/HV RSpUDWHXUV DULWKPpWLTXHV UHODWLRQQHOV ORJLTXHV ELW j ELW RX VSpFLDX[ REpLVVHQW DX[ UqJOHV UHQFRQWUpHVHQODQJDJH&/HVRSpUDWHXUVVRQWXWLOLVpVSRXUHIIHFWXHUGHVWHVWVRXPDQLSXOHUGHV GRQQpHV,OHVWSRVVLEOHGHFRPELQHUSOXVLHXUVRSpUDWLRQVHQXQHVHXOH9RLFLXQUpFDSLWXODWLIGHV SULQFLSDX[RSpUDWHXUV

Opérateurs arithmétiques

/HVRSpUDWHXUV0RGXORVXWLOLVHQWFRPPHFLGHVVRXV z = 1 + 5 ; y = 4 * 5 ; x = 14 / 2 ; w = 9 – 5 ; e = 4 % 3;

(6)

L

-VFULSWWURQTXHOHVYDOHXUVUpHOOHVHQHQWLHUVDYDQWGHOHXUDSSOLTXHUORSpUDWHXU$LQVL DXUDSRXUUpVXOWDW

Opérateurs relationnels

8WLOLVpVSRXUOHVFRPSDUDLVRQVOHVRSpUDWHXUVUHODWLRQQHOVVRQWWRXVELQDLUHV'DQVXQHFODXVHGH W\SHLIODFRQGLWLRQSRXUOH[pFXWHUHVWTXHFHWWHFRQGLWLRQVRLWYUDLHpJDOHj

if ( variable == 2 )

alert( 'variable est bien egale a 2');

'DQVOH[HPSOHFLGHVVXVORSpUDWHXU HVWXWLOLVpSRXUFRPSDUHUYDULDEOHDXQRPEUH

2SpUDWHXU

2SpUDWHXU 6LJQ6LJQLLILFDWLRQILFDWLRQ

!HW

!HW VXSpULHXUjHWLQIpULHXUj

! HW

! HW VXSpULHXURXpJDOjHWLQIpULHXURXpJDOj HW HW pJDOjHWGLIIpUHQWGH

Opérateurs logiques

3HUPHW GHIIHFWXHU GHV RSpUDWLRQVORJLTXHV HQWUH GHV YDULDEOHV __ 2Q QRWHUD TXH OHV VLJQHVVRQWGRXEOpVSRXUQHSDVFRQIRQGUHDYHFOHVRSpUDWHXUVELWjELW

if ( (variable1 == 2) && (variable2==3 )

alert( 'variable1 est bien egale a 2 et variable2 est bien egale a 3');

Opérateurs bit à bit

&HVRSpUDWHXUVWUDLWHQW OHV QRPEUHV FRPPHVLO VDJLVVDLW GH FKDvQHV GH ELWV /HV RSpUDWHXUV 127 $1' 25 ;25 GpFDODJH YHUV OD JDXFKH OD GURLWH VLJQp HW QRQ VLJQp VXWLOLVHQW JUkFH j OD V\QWD[HVXLYDQWH

9 127a

9 $1'

9 25_

9 ;25A

9 'pFDODJHjJDXFKH

9 'pFDODJHjGURLWH!!

9 'pFDODJHjGURLWHQRQVLJQp!!!

Opérateurs unaires spéciaux

,OVDJLWGRSpUDWHXUGLQFUpPHQWDWLRQRXGHGpFUpPHQWDWLRQGHYDULDEOHV&HVRSpUDWLRQVVRQWVRLW SRVWIL[pV([pFXWpVDSUqVRXVRLWSUHIL[pV([pFXWpVDYDQW

b = a + (d++ );

GQHVHUDLQFUpPHQWpTXDSUqVDYRLUHIIHFWXpORSpUDWLRQDGDQFLHQQHYDOHXUGHG,OVDJLWGXQH SRVWGpFUpPHQWDWLRQ/HVH[SUHVVLRQVFLGHVVRXVVRQWpTXLYDOHQWHV

b = a + ( --d );

b = a + (d – 1 );

Opérateurs d'affectation

/HVLJQHpJDOHVWORSpUDWHXUGDIIHFWDWLRQSULQFLSDO,OHVWSRVVLEOHGXWLOLVHUXQHIRUPHFRQWUDFWpH SRXUpYLWHUGHOpFULWXUH

a += 3 ; a = a + 3;

(7)

/HVH[SUHVVLRQVFLGHVVXVVRQWpTXLYDOHQWHV Autres opérateurs

,OH[LVWHXQRSpUDWHXUWHUQDLUHGDIIHFWDWLRQFRQGLWLRQQHOOH&HWRSpUDWHXUHVWXQPR\HQUDSLGHGH GRQQHUjXQHYDULDEOHXQHYDOHXUFKRLVLHHQWUHGHX[&HVWXQUDFFRXUFLSRXUpFULUHGHVLQVWUXFWLRQV LIVLPSOHV9RLUSDUDJUDSKHVXLYDQW

/HVH[SUHVVLRQVVXLYDQWHVVRQWpTXLYDOHQWHV

x = ( a > b ) ? c : d ; // Si a > b alors x prend la valeur c sinon x prend la valeur d if ( a > b ) x = c else x = d ;

&HJHQUHGRSpUDWHXUHVWjPDQLHUDYHFSUpFDXWLRQFDULOGLPLQXHODOLVLELOLWpGHVSURJUDPPHVHWLO HVWVRXUFHGHUUHXUGHSURJUDPPDWLRQ

Contrôle de flux

+pULWpHVGXODQJDJH&OHVPpFDQLVPHVGHFRQWU{OHGHIOX[GRQQHQWDXSURJUDPPHXUODSRVVLELOLWp GHIIHFWXHUGHVERXFOHVRXGHVFODXVHVLIHOVH

If Else

if ( condition )

instruction ou bloc // ou

if ( condition )

instruction ou bloc else

instruction ou bloc 3DUH[HPSOH

if ( x < 5 )

alert(' x est strictement inférieur à 5');

else

alert(" x est supérieur ou égal à 5");

while

3HUPHWGHIIHFWXHUXQHERXFOHVRXVFHUWDLQHVFRQGLWLRQV while ( condition )

instruction ou bloc

9RLFLXQSURJUDPPHSHUPHWWDQWGLQFUpPHQWHU[MXVTXjFHTXLOVRLWpJDOj while ( x != 5)

x = x + 1;

for

3HUPHWGHIIHFWXHUGHVERXFOHVDYHFXQQRPEUHGLWpUDWLRQGpWHUPLQp for ( initialisation ; condition, modification)

instruction ou bloc

9RLFLXQH[HPSOHSHUPHWWDQWGpFULUHOHVSUHPLHUVFKLIIUHVGDQVXQHSDJH+70/

for ( compte = 1 ; compte <= 10 ; compte++) document.write ("Chiffre ", compte );

(8)

Les fonctions

/HV IRQFWLRQV SHUPHWWHQW GH VXEGLYLVHU OHV WkFKHV j HIIHFWXHU HQ SHWLWV VRXVSURJUDPPHV &HV IRQFWLRQVSHXYHQWSUHQGUHGHVSDUDPqWUHVHWUHQYR\HUWRXWW\SHGHGRQQpHV

function nom ( paramètres ) {

instructions et éventuellement return pour renvoyer une données }

9RLFLXQHIRQFWLRQUHQYR\DQWXQHFKDvQHGpSHQGDQWGXQRPSDVVpHQSDUDPqWUHV function bonjour ( nom )

{

return ( " Bonjour " + nom);

}

/DIRQFWLRQSRXUUDrWUHDSSHOpSDUDLOOHXUVFRPPHFHFLHWFKDLQHUHFHYUD%RQMRXU'LGLHU chaine = bonjour ( "Didier");

Les objets

Introduction

8Q REMHW FRPSRUWH FHUWDLQHV VLPLOLWXGHV DYHF OHV VWUXFWXUHV GX ODQJDJH & 8Q REMHW HVW XQ UHJURXSHPHQWGHYDULDEOHVHWGHIRQFWLRQVTXLSHXYHQWrWUHUpXWLOLVpHVDXWDQWTXHQpFHVVDLUH

var contact = new Object;

contact.nom = "VALET";

contact.prenom = "Génaël';

contact.tel = "0146511521"

/H[HPSOHFLGHVVXVFUpHXQREMHWGRQWOHVYDULDEOHVQRPSUHQRPHWWHOVRQWDVVRFLpV5LHQQHQRXV HPSrFKHGHFUpHUXQWDEOHDX GREMHWVTXL FRPSRVHUDLW XQ UpSHUWRLUH WpOpSKRQLTXH /HV YDULDEOHV DVVRFLpHVjOREMHWVRQWGHVSURSULpWpV

3RXUOLEpUHUODSODFHTXXQREMHWRFFXSHHQPpPRLUHLOVXIILWGDSSHOHUODIRQFWLRQGHOHWH delete contact;

Les méthodes des objets

/HVREMHWVSHXYHQWpJDOHPHQWSRVVpGHUGHVPpWKRGHVTXLVHURQWH[pFXWpHVORUVTXRQIDLWDSSHOj HOHV&HVPpWKRGHVDSSDUWLHQQHQWjOREMHWHWVRQOLpVjOXL

/H[HPSOHGREMHWFRQWDFWSHXWrWUHDJUpPHQWpGXQPpWKRGHGDIILFKDJHGpILQLHDYDQW

(9)

function afficher() {

document.write(" Le nom est : " + this.nom);

document.write(" Le prénom est : " + this.prenom);

document.write(" Le tél est : " + this.tel );

}

var contact = new Object;

contact.nom = "DUPOND";

contact.prenom = "Lajoie";

contact.tel = "0144441122";

contact.afficher_contact = afficher();

// Pour afficher l'objet, il suffira de contact.afficher_contact();

(QUpVXPpXQHPpWKRGHHVWXQHIRQFWLRQFRQWHQXHGDQVOREMHW2QUHPDUTXHUDOXWLOLVDWLRQGHOD YDULDEOH WKLV TXL IDLW UpIpUHQFH j OREMHW TXL D LQYRTXp OD PpWKRGH HW TXL SHUPHW GDFFpGHU GLUHFWHPHQWDX[YDULDEOHVGHOREMHWDSSHODQW

Prototypes et constructeurs

'DQV OH[HPSOH SUpFpGHQW QRXV DYRQV pWp REOLJp GH GpILQLU XQ REMHW FRQWDFW HW GH GpILQLU VHV SURSULpWpVDLQVLTXHVDPpWKRGH3RXUFUpHUXQQRXYHDXFRQWDFWLOIDXGUDLWVDLVLUOHPrPHFRGH 'DQVOHFDVGHQUHJLVWUHPHQWVPXOWLSOHVOHFRGHjVDLVLUSHXWGHYHQLUWURSFRSLHX[+HXUHXVHPHQW LOH[LVWHODSURSULpWpSURWRW\SHTXL DVVRFLpH DX[ IRQFWLRQV VSpFLDOHV FRQVWUXFWHXU SHUPHWWHQW GH UHPpGLHUjFHSUREOqPH

9RLFLQRWUHH[HPSOHGLOOXVWUDWLRQGHVIRQFWLRQVVSpFLDOHVFRQVWUXFWHXUTXLVLQVSLUHGHQRWUHREMHW FRQWDFW

}

function creer_contact(nom , prenom, tel) {

this.nom = nom;

this.prenom = prenom;

this.tel = tel;

}

// Vient alors la déclaration

var personne1 = new creer_contact ("DURANT", "Emile", "0223234545");

personne1.afficher_contact = afficher;

personne1.afficher_contact();

/REMHWVHUDDORUVDXWRPDWLTXHPHQWFUpHDYHFVHVSURSULpWpVSDUOLQVWUXFWLRQQHZTXL VRFFXSHUD GDSSHOHUODIRQFWLRQFRQVWUXFWHXUFUpHUBFRQWDFW

,OUHVWHDDXWRPDWLVHUODVVRFLDWLRQGHODIRQFWLRQDIILFKHUFRPPHPpWKRGHGHOREMHW&HVWOHU{OHGH SURWRW\SH

(10)

}

function creer_contact(nom , prenom, tel) {

this.nom = nom;

this.prenom = prenom;

this.tel = tel;

}

créer_contact.prototype.afficher_contact = afficher();

// Vient alors la déclaration

var personne1 = new creer_contact ("DURANT", "Emile", "0223234545");

var personne2 = new créer_contact("DUPONT","Lajoie","0145451212");

'DQV OH[HPSOH FLGHVVXV SHUVRQQH HW SHUVRQQH DXURQW WRXV OHV GHX[ XQH PpWKRGH DIILFKHUBFRQWDFWGLVSRQLEOH

Exemples d'objets du navigateur

/HV REMHWV UHSUpVHQWHQW OH SULQFLSDO LQWpUrW GH -DYDVFULSW /HXUV PpWKRGHV RX OHXUV SURSULpWpV SHUPHWWHQWGHOHVPDQLSXOHUjORLVLU7RXWOHSUREOqPHFRQVLVWHjFRQQDvWUHOHXUH[LVWHQFH3UHQRQV OH[HPSOHGXQSURJUDPPH-DYDVFULSWTXLVH[pFXWHGDQVXQHSDJH:HEHWGRQFGDQVXQQDYLJDWHXU

/REMHWGRFXPHQWUHSUpVHQWHODSDJH+70/DFWXHOOHPHQWDIILFKpHGDQVOHQDYLJDWHXU2QSHXWGRQF DFFpGHUIDFLOHPHQWjO85/SHUPHWWDQWGHODWWHLQGUH

alert( document.location );

/H[HPSOHFLGHVVXVDIILFKHUDXQHERvWHGHGLDORJXHGDQVODTXHOOHVDIILFKHUDODGUHVVHLQWHUQHWGX GRFXPHQWHQFRXUV

5LHQQHQRXVHPSrFKHGDLOOHXUVGHPRGLILHUFHWWH85/

document.location = "http://www.diderot.org/sommaire.htm";

&HWWHLQVWUXFWLRQSHUPHWDXQDYLJDWHXUGHFKDUJHUODSDJHVRPPDLUHKWPGXO\FpH'LGHURW

8QDXWUHH[HPSOHFRQVLVWHHQXQSURJUDPPHTXLSHUPHWWUDLWGHVDYRLUTXHOQDYLJDWHXUOXWLOLVDWHXU XWLOLVHSRXUQDYLJXHU

alert ( " Vous utilisez le navigateur " + navigator.appName);

8QHERvWHGHGLDORJXHVDIILFKHHQSUpFLVDQWODYHUVLRQGXQDYLJDWHXUXWLOLVp

(11)

Modèle objet du navigateur

/H PRGqOH REMHW GXQ QDYLJDWHXU UHSUpVHQWH OD KLpUDUFKLH GHV REMHWV TXH ORQ SHXW XWLOLVHU TXL DSSDUWLHQQHQW j ODSSOLFDWLRQ K{WH /H QDYLJDWHXU /HV H[HPSOHV GX SDUDJUDSKH SUpFpGHQW LOOXVWUHQWFHWWHQRWLRQ

&HSHQGDQW OH PRGqOH REMHW YDULH GXQ QDYLJDWHXU j ODXWUH 1RXV DOORQV HVVD\HU GH UHFHQVHU TXHOTXHVREMHWVLPSRUWDQWVHWGHVSpFLILHUSRXUTXHOOHVYHUVLRQVGHQDYLJDWHXULOVVRQWXWLOLVDEOHV /DOLVWHQHVHUDDEVROXPHQWSDVH[KDXVWLYHFDUFKDTXHpGLWHXUGHORJLFLHO0LFURVRIW1HWVFDSH GpYHORSSHVHVSURSUHVREMHWV

Objet Document

/REMHW'RFXPHQWHVWOHSOXVLQWpUHVVDQWGHVREMHWVIRXUQLVSDU OH QDYLJDWHXU /D OLVWH GHV REMHWV FRQWHQXVGDQVGRFXPHQWGpSHQGGXQDYLJDWHXUXWLOLVp/HVGLIIpUHQFHVHQWUH1HWVFDSHHW,QWHUQHW ([SORUHUVRQWPXOWLSOHVHWLOYDXWPLHX[VHUpIpUHUDX[GRFXPHQWVGHUpIpUHQFHGHFKDTXHpGLWHXU

&OLHQW5HIHUHQFH-DYDVFULSW1&6SGISRXU1HWVFDSHHWOHILFKLHUGDLGH0LFURVRIW:LQGRZV6FULSW /HOLYUH/HJXLGHGXSURJUDPPHXU-DYD6FULSWFKH](\UROOHVUpIpUHQFHpJDOHPHQWOHVGLIIpUHQFHV PDLVLOFRPPHQFHjGDWHU

Objet Navigator

/REMHW 1DYLJDWRU FRQWLHQW TXHOTXHV PpWKRGHV HW SURSULpWpV XWLOHV SRXU FRQQDvWUH WRXWHV OHV LQIRUPDWLRQVVXUOHQDYLJDWHXUXWLOLVp9RLFLXQUpFDSLWXODWLIGHVPpWKRGHVHWGHVSURSULpWpVOHVSOXV XWLOLVpHV

3URSULpWpV3URSULpWpV 'HVFULSWLRQ'HVFULSWLRQ

DSS&RGHDSS&RGH1D1DPHPH 1RPGHFRGHGXQDYLJDWHXU DS

DSSS11DDPHPH 1RPGXSURGXLW DSS9HUVLRQ

DSS9HUVLRQ 1XPpURGHYHUVLRQ

FRRNLH(

FRRNLH(QQDEOHGDEOHG 5HQYRLHWUXHVLOHVFRRNLHVVRQWDXWRULVpV SODWIR

SODWIRUUPP 1RPGHSODWHIRUPH XVHU$JHQW

XVHU$JHQW 1RPGXQDYLJDWHXULQGLTXpGDQVOHQWrWHGHV UHTXrWHV+773DGUHVVpHVDXVHUYHXUSDUOHFOLHQW

Propriétés de l'objet Navigator 0pWKRGHV

0pWKRGHV 'HVFULSWLRQ'HVFULSWLRQ

MDYMDYDD(QD(QDEEOHGOHG 5HQYRLHWUXHVLODPDFKLQHYLUWXHOOHMDYDHVW SUpVHQWHVXUOHV\VWqPHHWIDOVHGDQVOHFDV

FRQWUDLUH Méthodes de l'objet Navigator

9RLFLFHTXHGRQQHODIILFKDJHGHWHOOHSURSULpWpVDYHF,(VRXV:LQGRZV17 appCodeName : Mozilla

appName : Microsoft Internet Explorer

appVersion : 4.0 (compatible; MSIE 5.0; Windows NT) userAgent : Mozilla/4.0 (compatible; MSIE 5.0; Windows NT) cookieEnabled : true

Language : undefined

mimeTypes ( Netcape 4 et + seulement ) : platform : Win32

plugins ( Netcape 4 et + seulement ) :

9RLFLODPrPHFKRVHDYHF1HWVFDSHYHUVLRQVRXV17

(12)

appCodeName : Mozilla appName : Netscape

appVersion : 4.7 [fr] (WinNT; I) userAgent : Mozilla/4.7 [fr] (WinNT; I) cookieEnabled : undefined

Language : fr

mimeTypes ( Netcape 4 et + seulement ) :[object MimeTypeArray]

platform : Win32

/HSURJUDPPH-DYDVFULSWSHUPHWWDQWGREWHQLUFHUpVXOWDWVHQRPPHYHUVLRQMVHWODSDJH+70/

FRUUHVSRQGDQWHHVWYHUVLRQKWPO

HTML et Javascript

/LQWpUrWGH-DYDVFULSWF{WpFOLHQWHVWGHSRXYRLUIDLUHIRQFWLRQQHUGHVSURJUDPPHVHQUHODWLRQDYHF OH +70/ /D EDOLVH 6FULSW GpFULWH GDQV OD qUH SDUWLH GH FH GRFXPHQW SHUPHW GLQVpUHU GX FRGH -DYDVFULSWGDQVXQHSDJH+70/

&HFRGHSHXWLQWHUYHQLUjSOXVLHXUVHQGURLWVGXQSDJH+70/

9 'DQVXQHEDOLVHVFULSW

9 &RPPHYDOHXUGXQDWWULEXWGHJHVWLRQGpYpQHPHQWGXQHEDOLVH%2'<,0*$«

3RXUSOXVGHSUpFLVLRQVVXUOH+70/YHXLOOH]YRXVUHSRUWHUDXGRFXPHQW/DQJDJH+70/GRQQpHQ GpEXWGHIRUPDWLRQ

Formulaires

,OHVWSRVVLEOHGHJpUHUFHUWDLQHVDFWLRQVRXpYpQHPHQWDYHFGHVIRUPXODLUHVSDU-DYDVFULSW7RXV OHVFRQWU{OHVGXQIRUPXODLUHSRVVqGHGHVDWWULEXWVR-DYDVFULSWSHXWLQWHUYHQLU9RLFLXQHOLVWHGHV FRQWU{OHVSRVVLEOHV

9 ,1387,1387&RQWU{OHGHVDLVLH

9 WH[WWH[WFKDPSWH[WH

9 SDVVZRUGSDVVZRUGFKDPSPRWGHSDVVH

9 FKHFNER[FKHFNER[FKDPSFDVHjFRFKHU

9 UDGLRUDGLRFKDPSERXWRQUDGLR

9 VXEPLWVXEPLWERXWRQVRXPHWWUHIRUPXODLUH

9 UHVHWUHVHWERXWRQSRXUUHPHWWUHj]pURWRXVOHVFKDPSVGXIRUPXODLUH

9 ILOHILOH GHPDQGH j OXWLOLVDWHXU GH GpVLJQHU XQ ILFKLHU /RUVTXH OH IRUPXODLUH HVW VRXPLV OH FRQWHQX GH FH ILFKLHU VHUD WUDQVPLV DX VHUYHXU FRPPH XQH YDOHXU GH QLPSRUWH TXHO DXWUH FRQWU{OH

9 KLGGHQKLGGHQFKDPSQHGHYDQWSDVDSSDUDvWUHGDQVOHIRUPXODLUH

9 LLPPDJHDJHERXWRQJUDSKLTXH

9 EXWWRQEXWWRQFKDPSGHW\SHERXWRQ

9 %87721%87721%RXWRQGDFWLRQ

9 6(/(&7HW237,216(/(&7HW237,21/LVWHVGpURXODQWHV

9 7(;7$5($7(;7$5($=RQHGHVDLVLHGHWH[WHPXOWLOLJQHVHWPXOWLFRORQQHV

Événements intrinsèques

&HVRQWGHVDFWLRQVSURYRTXpHVSDUXQpYpQHPHQWSDUWLFXOLHU&HVRQWGHVSRLQWVGHQWUpHSRXUXQ VFULSW &HOD VLJQLILH TXXQ VFULSW SDUWLFXOLHU SHXWrWUH H[pFXWp FKDTXH IRLV TXH OpYpQHPHQW VH SURGXLW

9RLFLXQHOLVWHQRQH[KDXVWLYHGHVpYpQHPHQWVSRVVLEOHV

$WWULEXW6LJQLIL$WWULEXW6LJQLILFFDWLRQDWLRQ RQ/RDGRQ/RDG

survient lorsque le navigateur vient de finir le chargement de la fenêtre, ou de tous les cadres. Cet attribut peut être utilisé dans des éléments BODY et FRAMESET ( Voir PErreur! Signet non défini.et PErreur! Signet non défini. )

(13)

RQ8QORDG RQ8QORDG

VXUYLHQWORUVTXHOHQDYLJDWHXUODIHQrWUHRXXQFDGUH&HWDWWULEXWSHXWrWUHXWLOLVpGDQVGHV pOpPHQWV%2'<HW)5$0(6(79RLU3(UUHXU(UUHXU66LJQHWQRQLJQHWQRQGGppILILQQLLHW3(UUHXU6LJQHWQRQ(UUHXU6LJQHWQRQGGppIILLQLQL

RQ&OLFNRQ&OLFNRQ'EOFOLFNRQ'EOFOLFN

VXUYLHQWORUVGXFOLFRXGRXEOHFOLFGHVRXULVVXUXQOREMHWFRQFHUQp RQ0RXVH2YHU

RQ0RXVH2YHU

VXUYLHQWORUVTXHODVRXULVSDVVHDXGHVVXVGHOREMHWFRQFHUQp RQ0RXVH'RZQ

RQ0RXVH'RZQ

VXUYLHQWORUVTXHOHERXWRQGHODVRXULVHVWHQIRQFpPDLVSDVUHOkFKp RQ0RXVH8S

RQ0RXVH8S

VXUYLHQWORUVTXHOHERXWRQGHODVRXULVHVWUHOkFKp2QVXSSRVHTXLODYDLWpWpHQIRQFp RQ0RXVH2XW

RQ0RXVH2XW

VXUYLHQWORUVTXHOHSRLQWHXUGHODVRXULVVRUWGHOREMHW RQ0RXVH0RYHRQ0RXVH0RYH

VXUYLHQWORUVTXHOHSRLQWHXUGHVRXULVHVWGpSODFpVXUOREMHWFRQFHUQp

9RLFLXQH[HPSOHSHUPHWWDQWGH[pFXWHUXQHIRQFWLRQ-DYDVFULSWORUVTXHORQFOLTXHVXUXQERXWRQ GHIRUPXODLUH/DIRQFWLRQRXYUHXQHERvWHGHGLDORJXHGpOLYUDQWXQPHVVDJH

<html>

<head>

<title>Gestion d'évènement dans un formulaire</title>

</head>

<input type="submit" name="Submit" value="Submit" onClick="alert('Vous avez cliqué sur le bouton submit')">

</form>

</body>

</html>

Objets formulaires

,O HVW SRVVLEOH GDFFpGHU DX[ FRQWU{OHV GXQ IRUPXODLUH HQ -DYDVFULSW SDU OLQWHUPpGLDLUH GHV PpWKRGHVHWGHVSURSULpWpVLQKpUHQWHVDXODQJDJHRULHQWpREMHWGXODQJDJH

Accès aux objets FORMS

3RXUDFFpGHURQPDQLSXOHOREMHWGRFXPHQWIRUPVGXQDYLJDWHXU

(14)

o p tio n s [0] o p tio n s [1 ] o p tio ns

E le m e nts [0 ] E le m e nts [1 ]

F o rm s [0 ] F o rm s [1] F o rm s [2 ] D o c u m e nt

,OH[LVWHPpWKRGHVSRXUDFFpGHUSDUSURJUDPPHDX[IRUPXODLUHV/DqUHFRQVLVWHjFRQVLGpUHU OHVREMHWVSDUOHXUQXPpURV'DQVFHFDVYRLFLFRPPHQWRQDFFqGHUDLDXHUpOpPHQWGXHU IRUPXODLUH

variable = document.forms[0].elements[0].value

/DqPHPpWKRGHSOXVSURSUHHVWGHGRQQHUXQQRPjFKDTXHFRQWU{OHDLQVLTXDXIRUPXODLUH 'HFHWWHPDQLqUHFKDTXHYDOHXUGDWWULEXWHVWDFFHVVLEOHSDU-DYDVFULSW9RLFLXQH[HPSOHGHSDJH +70/FRQWHQDQWXQIRUPXODLUHDYHFXQFKDPSGHVDLVLHGHWH[WHDLQVLTXXQERXWRQGHYDOLGDWLRQ

<html>

<head>

<title>Gestion d'évènement dans un formulaire</title>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

</head>

<body bgcolor="#FFFFFF" >

<form name="MyForm" method="post" action="">

Nom : <input type="text" name="nom" value="Saisie du nom">

</form>

</body>

</html>

FHTXLGRQQHjSHXSUqVFHFL

2QDFFqGHjODYDOHXUGXFKDPSWH[WH'DQVOH[HPSOHVXLYDQWXQHERvWH message = "Vous avez tapé le nom :" + document.MyForm.nom.value alert( message );

9RXVWURXYHUH]FHWH[HPSOHGDQVOHILFKLHUIRUPKWP Cas du contrôle SELECT

'DQVOHFDVGXQFRQWU{OHOLVWHGpURXODQWH%DOLVH6(/(&7OHFRGH+70/VHSUpVHQWHGHODPDQLqUH VXLYDQWH

(15)

<html>

<head>

<title>Gestion d'évènement dans un formulaire</title>

</head>

<script language="JavaScript">

function click_choix() {

MonLien = document.MyForm.liens.selectedIndex;

Message = "Vous voulez la page : ";

alert (Message + document.MyForm.liens.options[MonLien].value);

}

</script>

<form name="MyForm" method="post" action="">

Liens :

<select name="liens" onChange="click_choix();" >

<option >CLiquez sur une option</option>

<option value="page1.htm">Option 1</option>

</select>

</form>

</body>

</html>

2QUHPDUTXHUDTXHODWWULEXW2Q&KDQJHGHODEDOLVH6(/(&7IDLWDSSHOjODIRQFWLRQFOLFNBFKRL[TXL DIILFKHUDXQHERvWHGHGLDORJXHGpOLYUDQWXQPHVVDJHGHFHVW\OHVLORSWLRQHVWFKRLVLH

Evènement focus

,OHVWSRVVLEOHGHGRQQHUODPDLQjXQXWLOLVDWHXUJUkFHjODPpWKRGHIRFXVHQUHQGDQWXQFRQWU{OH GH IRUPXODLUH SUrW j OD VDLVLH &HWWH PpWKRGH VDSSOLTXH DX[ FRQWU{OHV GH IRUPXODLUH HW SHXW VDSSHOHUGHODIDoRQVXLYDQWH

document.MyForm.texte1.focus();

'DQVFHWH[HPSOHOHFRQWU{OHWH[WHGXIRUPXODLUH0\)RUPYHUUDVRQIRFXVrWUHDFWLYp &HVW XQ PR\HQXWLOHGDLGHjODVDLVLHGHIRUPXODLUH

Gestion des images

,OHVWSRVVLEOHGHJpUHUOHVLPDJHVG\QDPLTXHPHQWSDUOHVpYpQHPHQWVLQWULQVqTXHVYXVSRXUOHV IRUPXODLUHV,OIDXWVDYRLUQpDQPRLQVTXHFHWWHJHVWLRQQHVWSRVVLEOHTXDYHFOHVYHUVLRQVHW

(16)

1pDQPRLQV ORUVTXH OLPDJH HVW LQWpJUpH j XQH EDOLVH $! OHV pYqQHPHQWV 2Q0RXVH2YHU 2Q0RXVH2XWHW2Q&OLFNVRQWGLVSRQLEOHVGqVODYHUVLRQGH1HWVFDSHHW,QWHUQHW([SORUHU

Objet Image

/REMHW ,PDJH SRVVqGH GHV SURSULpWpV HW GHV PpWKRGHV SHUPHWWDQW GH OH PDQLSXOHU 2Q SHXW pJDOHPHQWDVVRFLHUXQREMHW,PDJHjXQHEDOLVH+70/,0*SUpVHQWHGDQV OD SDJH /HV DWWULEXWV GXQHEDOLVH,0*VHSUpVHQWHQWDLQVL

s rc h e ig ht w id th c o m ple te n am e b ord er lo w s rc

Im a g e s [0] im ag es [1]

D o c um e nt

VUF85/GHOLPDJH

KHLJKWZLGWK+DXWHXUHW/DUJHXU

FRPSOHWHYDXW758(ORUVTXHOHQDYLJDWHXUDILQLOHFKDUJHPHQWGHOLPDJH QDPH1RPGHOLPDJH

ERUGHU7DLOOHGHODERUGXUHGHOLPDJH

ORZVUF85/GXQHLPDJHEDVVHUpVROXWLRQGHUHPSODFHPHQW

Déclaration d'une image

/DIRQFWLRQQHZGpFODUHXQREMHWGHW\SH,PDJH2QSHXWHQVXLWHDFFpGHUDX[SURSULpWpVGHOLPDJH HQVXLYDQWOHPRGqOHLQGLTXpSOXVKDXW

MonImage = new Image;

MonImage.src = "http://www.diderot.org/images/oiseau.gif";

MonImage.height = 154;

/H[HPSOHFLGHVVXVFUpHXQHLPDJHVSpFLILpVRQ85/HWIL[HVDWDLOOH

Í

/HIDLWGHGpFODUHUXQHLPDJHHWGHOXLDIIHFWHUVRQDWWULEXWVUFREOLJHOHQDYLJDWHXUjFKDUJHUOLPDJHYHUV ODPpPRLUHORFDOH

Relation avec les balises IMG

3RXUHIIHFWXHUXQHUHODWLRQHQWUHXQREMHWLPDJHHWXQHEDOLVH,0*LOVXIILWGDIIHFWHUOHVSURSULpWpV G\QDPLTXHPHQW

document.Image5.src = MonImage.src

/H[HPSOHFLGHVVXVUHPSODFHOLPDJHLPDJHSDUODYDOHXUVUFGHOREMHW0RQ,PDJH

Dynamic HTML

,OVDJLWGXQHWHFKQRORJLHSHUPHWWDQWGHIDLUHpYROXHUOHVQDYLJDWHXUVHWUHQGUHOHVSDJHVZHESOXV LQWHUDFWLYHV (Q IDLW FKDTXH QDYLJDWHXU SRVVqGH XQ PRGqOH REMHW 'RFXPHQW 2EMHFW 0RGHO RX FKDTXHREMHWSHXWVHPDQLSXOHUjYRORQWp/HEXWGHFHFRXUVQHVWSDVGHIDLUHXQFRXUVVXU'+70/

(17)

/H'+70/HVWFRPSRVpGHWHFKQRORJLHVTXLpWXGLpHVXQHjXQHGpSDVVHQWOREMHFWLIGHFHVWDJH

9 -DYDVFULSW

9 /HVVW\OHV&66&DVFDGLQJ6W\OH6KHHW

9 +70/

9 OH'20'RFXPHQW2EMHFW0RGHO

9RXVWURXYHUH]HQDQQH[HHWGDQVOHVUHVVRXUFHVIRXUQLHVORUVGXVWDJHWRXVOHVPR\HQVGREWHQLU GHVLQIRUPDWLRQVSOXVSUpFLVHVVXUFKDTXHWHFKQRORJLH

Utilisation des balises <DIV> et <LAYER>

/HPRGqOHREMHWGHVQDYLJDWHXUV1HWVFDSHHW,(QHFRQVLGqUHQWSDVGHODPrPHIDoRQFHVEDOLVHV +70//DEDOLVH/$<(5!QHVWSULVHHQFKDUJHTXHSDU1HWVFDSHHWWHQGjGLVSDUDvWUH/DEDOLVH ',9!HVWODSOXVSRSXODLUHHWODSOXVXWLOLVpH

3RXUSOXVGHSUpFLVLRQVXUOHPSORLGHODEDOLVH',9VHUHSRUWHUDXGRFXPHQW/DQJDJH+70/IRXUQL HQGpEXWGHVWDJH

Manipuler une balise DIV avec Netscape

/HPRGqOHREMHWGXQDYLJDWHXU1HWVFDSHGpILQLOHVEDOLVHV',9HW/$<(5 FRPPH XQ REMHW /$<(5 DSSDUWHQDQWjOREMHW'2&80(173RXUDFFpGHUjXQWHOREMHWLOIDXGUDLWFRGHUFRPPHVXLW

document.layers[0]

RXHQFRUHHQGpVLJQDQWODEDOLVHSDUVRQQRP$WWULEXW,' document.MyDIV

3RXUpFULUHHQ+70/GDQVXQHEDOLVH',9SDUOLQWHUPpGLDLUHGH-DYDVFULSWRQ XWLOLVHOD PpWKRGH ZULWH FRPPH GDQV XQ GRFXPHQW QRUPDO (Q IDLW OD EDOLVH ',9 HVW FRQVLGpUpH FRPPH XQ REMHW GRFXPHQWjSDUWHQWLqUH

document.MyDIV.document.write ( " <A href='http://www.diderot.org' > Diderot </A> ");

/H[HPSOHFLGHVVXVLQVqUHXQOLHQGDQVODEDOLVH',9 Manipuler une balise DIV avec Internet Explorer

,( FRQWLHQW XQ PRGqOH REMHW SOXV GpYHORSSp HQ FH TXL FRQFHUQH OHV EDOLVHV (Q HIIHW OREMHW DOO FRQWLHQWWRXWHVOHVEDOLVHVH[FHSWpHV+($'HW%2'<

2QDFFqGHGRQFjFHVEDOLVHVGHODPDQLqUHVXLYDQWH document.all.MyDIV

3RXUpFULUHGHGDQVLOH[LVWHSOXVLHXUVPpWKRGHVGRQFODSOXVFRXUDQWHHVW,QQHU+70/TXLSHUPHW GpFULUH GLUHFWHPHQW GX FRGH +70/ (OOH VRSSRVH j ,QQHU7H[W TXL HOOH QpFULW TXH GX WH[WH HW FRQFHUQH OLQWpULHXU GH OD EDOLVH HQ TXHVWLRQ 3RXU SOXV GH UHQVHLJQHPHQWV VH UHSRUWHU DX 0DF)DUODQH

document.all.MyDIV.InnerHTML = "< A href='http://www.diderot.org' > Diderot </A> ");

/H[HPSOHFLGHVVXVLQVqUHXQOLHQGDQVOHEORF',9QRPPp0\',9

Les Cookies

&{WpFOLHQWOHFRRNLHHVWILFKLHUWH[WHILFKLHUWH[WHJpUpSDUOHQDYLJDWHXU /HVLQIRUPDWLRQV TXLOFRQWLHQW VRQW GLVSRQLEOHV SRXU -DYDVFULSW TXL HVW OLEUH GH OHV PDQLSXOHU /HV FRRNLHV UHSUpVHQWHQW XQ GDQJHU

(18)

FOLHQWSRXUGpWHUPLQHUOHVVLWHVTXHOXWLOLVDWHXUDYLVLWp

(QIDLWLOH[LVWHDXWDQWGHILFKLHUVTXHG85/GLIIpUHQWHV6LXQXWLOLVDWHXUFRQVXOWHSOXVLHXUVVLWHVHW TXHWRXVFHVVLWHVJqUHQWOHVFRRNLHVDORUVLO\DXUDDXWDQWGHILFKLHUVFRRNLHVTXHGHVLWHVYLVLWpV 8QFRRNLHHVWFRQVWLWXpGH

9 8QQRP8QQRP,OVDJLWGXQHFKDvQHGHFDUDFWqUHVGpVLJQDQWOHQRPGXFRRNLH

9 8QHYDOHXU8QHYDOHXU&KDvQHGHFDUDFWqUHXQLFRGH9RLUPpWKRGHVHVFDSHHWXQHVFDSH

9 8QGR8QGRPPDLQHDLQH1RPGHGRPDLQHSHUPHWWDQWGHOLPLWHUODYLVLELOLWpjXQGRPDLQHVSpFLILTXH&HVWOD JDUDQWLHTXXQDXWUHVLWHQHSRXUUDSDVFRQVXOWHUYRVFRRNLHV

9 8QFKHPLQG8QFKHPLQGDFFqVDFFqV3HUPHWGHOLPLWHUOHFRRNLHjXQHSDUWLHGXGRPDLQHVSpFLILpFLGHVVXV

9 8QGpODLG8QGpODLGHH[SLUDWLRQ[SLUDWLRQ)L[HOHGpODLGHQHWWR\DJHGHVFRRNLHVSDUOHQDYLJDWHXU6DQVFHOXLFLOH QRPEUHGHVFRRNLHVSRXUUDLWDXJPHQWHUHWSRVHUGHVSUREOqPHVGHSODFH6LFHGpODLQHVWSDV IL[pOHFRRNLHVHUDHIIDFpGqVTXHOHQDYLJDWHXUHVWIHUPp

9 8QGUDSHDXGH8QGUDSHDXGHVpFXULWpVpFXULWp$WWULEXWYDODQW758(RX)$/6(TXLIRUFHOHQDYLJDWHXUjIDLUHXQHUHTXrWH +773VpFXULVpH7\SH66/VLLODODYDOHXU758(

/HVQDYLJDWHXUVSRVVqGHQWGHVREMHWVFRRNLHTXHORQSHXWFRQVXOWHU,OQHIDXWSDVRXEOLHUTXHOHV FRRNLHV GpSHQGHQW GH OHXU 85/ 8Q VLWH TXHOFRQTXH QH SHXW WKpRULTXHPHQW SDV FRQVXOWHU OHV FRRNLHVGHVDXWUHVVLWHV

Cookies Pourquoi faire ?

/HVFRRNLHVVRQWXWLOHVSRXUGHVDSSOLFDWLRQ:HEGHPDQGDQWXQQLYHDXGHVpFXULWpPR\HQ,OVVRQW HPSOR\pVGDQVOHVFDVVXLYDQWV

9 3RXUGHVDXWKHQWLILFDWLRQVVXUGHVVLWHVGRQWFHUWDLQHVSDJHVVRQWUpVHUYpHVDX[PHPEUHV

9 3RXUGHVDXWKHQWLILFDWLRQVVXUGHVVLWHVEDQFDLUHVSRXUFRQVXOWHUGHVLQIRUPDWLRQVFRQILGHQWLHOOHV

$SSXLVXSSOpPHQWDLUHGHODWHFKQRORJLH66/

9 3RXUGHVVLWHVGpVLUHX[GHODLVVHUGHVWUDFHVGHSDVVDJHjGHVILQVFRPPHUFLDOHV

9 3RXUGHVVLWHVHIIHFWXDQWGHVVWDWLVWLTXHVVXUOHQRPEUHGHYLVLWHV

9 %LHQGDXWUHVFDVHQFRUH

Créer un cookie

/DFUpDWLRQGXQFRRNLHUHTXLHUWXQHERQQHFRQQDLVVDQFHGHODPDQLqUHGRQWOHQDYLJDWHXUIL[HOHV FRRNLHV /D SUHPLqUH FKRVH j UHWHQLU HVW TXH XQ FRRNLH QHVW VDXYHJDUGp TXH VL VRQ GpODL GH[SLUDWLRQHVWIL[p'DQVOHFDVFRQWUDLUHLOHVWHIIDFpSDUOHQDYLJDWHXUGqVTXHFHOXLFLHVWIHUPp 9RLFLXQH[HPSOHGHIRQFWLRQSHUPHWWDQWODFUpDWLRQGHFRRNLH

// nom : Chaîne de caractère valeur : valeur du cookie

// expiration : exprimée en milliseconde chemin : du style /root/sdir1/sdir2 // domaine : nom de domaine auquel se limite le cookie

// securise : TRUE ou FALSE

function SetCookie( nom , valeur , expiration , chemin , domaine , securise ) {

var expir = "expires=" + expir.

document.cookie = name + "=" + escape (value) + }

/H[HPSOH SUpFpGHQW XWLOLVH OREMHW FRRNLH GH OREMHW GRFXPHQW /D FKDvQH GH FDUDFWqUHV FRQWLHQW WRXVOHVFRRNLHVSRXUO85/FRXUDQWHVpSDUpVSDUGHVSRLQWYLUJXOHV,OIDXWSUpYRLUXQSURJUDPPH SHUPHWWDQWGHGpFRGHUOHVFRRNLHV

+HXUHXVHPHQW FH WUDYDLO D GpMj pWp IDLW HW OH ILFKLHU FRRNLHVMV FRQWLHQW WRXWHV OHV IRQFWLRQV SHUPHWWDQWGHOHVWUDLWHU*HW&RRNLH6HW&RRNLH«

(19)

Javascript et Java

-$9$GLIIqUHGH-$9$6&5,37SRXUODVLPSOHUDLVRQTXHOXQHVWXQODQJDJHFRPSLOpHWTXHODXWUH HVWXQODQJDJHLQWHUSUpWp,OVQHFRUUHVSRQGHQWSDVDX[PrPHVEHVRLQ-$9$HVWLGpDOORUVTXHOHV EHVRLQVHQVpFXULWpVRQWLPSRUWDQWHVHW-$9$6&5,37HVWSDUIDLWSRXUGHSHWLWHVDSSOLFDWLRQV:(%

LQWHUDFWLYHV/HEXWGHFHWWHSDUWLHQpWDQWSDVGHSKLORVRSKHUVXUOHVDYDQWDJHVHWLQFRQYpQLHQWV GHVODQJDJHVPDLVSOXW{WGHGpFULUHODIDoRQGHOHVIDLUHFRPPXQLTXHU

Points de connexion

'DQVOHPRGqOHREMHWGXQDYLJDWHXUOHVREMHWV-$9$SRVVqGHQWOHXUVPpWKRGHVHWSURSULpWpVTXH ORQSHXWH[SORLWHUHQ-$9$6&5,37

a p p le ts [0]

a p p le ts [1]

d o cu m e nt

W in do ws

/HV$33/(7VVRQW GLVSRQLEOHVSDU OLQWHUPpGLDLUH GHOREMHW GRFXPHQW GX PRGqOH REMHW ,O HVW SRVVLEOH GH SDVVHU GHV SDUDPqWUHVGRQWOHW\SHVXELUDTXHOTXHVFRQYHUVLRQV /H SULQFLSH GH FRQYHUVLRQ GpSHQG GX W\SH GH SDUDPqWUH SDVVpSDUH[HPSOHORUVTXH-$9$6&5,37HQYRLHXQHYDULDEOH GHW\SH1XPEHU-$9$FRQYHUWLWFHWWHYDOHXUHQXQ)/2$7 )DLUHFRPPXQLTXHU-$9$6&5,37HW-$9$SDUOLQWHUPpGLDLUH GHVEDOLVHVSHUPHWGDFFpGHUDX[SDUDPqWUHVGHV$SSOHWVHW GH OHV FKDQJHU G\QDPLTXHPHQW /D FRPPXQLFDWLRQ QH VDUUrWHSDVOjSXLVTXLOHVWSRVVLEOHGDFFpGHUDX[YDULDEOHV LQWHUQHVHW

DX[PpWKRGHVHWSURSULpWpVGHODSSOHW

3RXUSHXTXHOHVGRQQpHVWUDQVPLVHVVRLHQWFRPSDWLEOHVOHSURJUDPPH-DYDVFULSWSRXUUDH[HFXWHU FHVSURSULpWpVHWPpWKRGHVVDQVVRXFLV

9RLFLXQH[HPSOH

document.MyApplet.dire_bonjour();

</SCRIPT>

</HEAD>

<BODY>

</BODY>

</HTML>

'DQVFHWH[HPSOHOHVFULSWIDLWDSSHOjODPpWKRGHGHODSSOHW-$9$GLUHBERQMRXU

JAVA, un langage exigeant

/RUVTXRQIDLWDSSHOjXQHPpWKRGHGXQREMHWGXQHDSSOHW-$9$ODPDFKLQHYLUWXHOOHHIIHFWXHOHV FRQYHUVLRQV QpFHVVDLUHV GHV GRQQpHV -$9$6&5,37 HQYR\pHV HQ GRQQpHV W\SpHV XWLOLVDEOHV SDU -$9$ 7DQW TXH OD FRQYHUVLRQ HVW SRVVLEOH WRXW VH SDVVH SRXU OH PLHX[ 0DLV GqV OH QRPEUH GDUJXPHQWVSDVVpVHVWLQFRUUHFWRXTXHODFRQYHUVLRQQHVWSDVSRVVLEOHOHQDYLJDWHXUUHQYRLHXQH HUUHXUHWODSSOHWQHSHXWVH[HFXWHU

9RLFLXQUpFDSLWXODWLIGHVSRVVLELOLWpVGHFRQYHUVLRQGHGRQQpHV

(20)

8QGHILQHG ,PSRVVLEOHjFRQYHUWLU

1XOO 6WULQJRX2EMHFW

%RROHDQ %RROHDQ

1XPEHU )ORDW

6WULQJ 6WULQJ

Conversion de type de JAVASCRIPT vers JAVA

Références

9RLFLTXHOTXHVUpIpUHQFHVjFRQVXOWHUSRXUHQVDYRLUSOXV

9 /HJXLGHGXSURJUDPPHXUHQ-DYDVFULSW(\UROOHV²0DF)DUODQH

9 1RUPH(&0$6FULSW²)LFKLHU(FPD6FULSWGRF

9 'RFXPHQW2EMHFW0RGHO²)LFKLHU'20SGI

9 '\QDPLF+70/DYHF1HWVFDSH²)LFKLHUG\QDPLF+70/B1&SGI

9 5pIpUHQFH-DYDVFULSW1HWVFDSH&OLHQW5HIHUHQFH-DYDVFULSW1&6SGI

9 6LWHVZHEjFRQVXOWHU²5pSHUWRLUHVVLWHVZHEGX&'

9 /DQJDJH+70/²/HODQJDJH+70/GRF

9 1RUPH:&VXU+70/²KWPOIU]LS

(21)

A

alert ...11

appCodeName ...12

Applet JAVA...20

appName ...12

appVersion...12

B Boolean ...4, 21 button - input ...13

C C++ ...3

checkbox - input ...13

Constructeurs ...10

Conversion de Types...6

cookieEnabled...12

Cookies...19

CSS...18

D Date ...5

Delete ...9

DIV ...18

document...20

Document ...12

Dynamic HTML...17

E ECMA Script...3

Else...8

F file - input...13

focus ...16

for...8

Forms ...14

Formulaires ...13

function ...9

G GetCookie... 20

getDate... 6

getDay... 6

getHours ... 6

getMinutes ... 6

getSeconds ... 6

getTime ... 6

H hidden - input... 13

HTML... 3

I If 8 Image ... 17

image - input ... 13

InnerHTML ... 18

J JAVA... 20, 21 javaEnabled ... 12

L langage - attribut ... 4, 6, 7, 12 LAYER ... 18

location ... 11

N Navigator ... 12

Null... 21

Number... 4, 21 O Object ... 9

Onclick - attribut ... 14

OnDblclick - attribut ... 14

onload - attribut... 13

OnMousedown - attribut .... 14

OnMousemove - attribut... 14

OnMouseout ...14

OnMouseover - attribut...14

OnMouseup - attribut...14

onunload - attribut...14

Opérateurs...6

P password - input...13

platform ...12

Prototypes ...10

R radio - input ...13

reset - input...13

S SCRIPT...3

SELECT...15

SetCookie ...20

setDate...6

setTime...6

src - attribut...4, 6 SSL...19

String...5, 21 submit - input ...13

T Tableau ...5

text - input...13

type - attribut ... 4, 6, 7, 12, 21 U userAgent...12

V var ...4

W while...8

write ...10