&(1&(17 75(' 5('( ()250 )250$ $7,21,1 7,21,1' ',9,' ,9,'8...

22

Upload: others

Post on 18-Oct-2020

1 views

Category:

Documents


0 download

TRANSCRIPT

Page 1: &(1&(17 75(' 5('( ()250 )250$ $7,21,1 7,21,1' ',9,' ,9,'8 ...denis.michaud.free.fr/cd_meteosat/pages_HTML/Electronique/cours... · g.valet >> javascript 3djh introduction /h -dydvfulsw

&(1&(1775(�'5(�'(�(�)250)250$$7,21�,17,21�,1'',9,',9,'88$/,$/,66(�'8�(�'8�**,7$,7$/\FpH�7HFKQLTXH�5pJLRQ/\FpH�7HFKQLTXH�5pJLRQDDO�'LGHURWO�'LGHURW

����UXH�'DYLG�G$����UXH�'DYLG�G$QQJHUV�²JHUV�²�����������3$5,6���3$5,6WpO�������WpO���������������������������������������)������)DD[���[�������������������������������

((PPDLO��DLO���JUHWD�JUHWD��JLWJLWDD##ZZDQDGRRDQDGRR��IUIU

1��6,5(7�������������������²�FRGH�$3(����

&&HH�� FFRRXXUUVV�� --DDYYDDVVFFUULLSSWW�� GGppFFUULLWW�� OOHHVV�� SSUULLQQFFLLSSDDOOHHVV�� IIRRQQFFWWLLRRQQQQDDOOLLWWppVV�� GGXX�� OODDQQJJDDJJHH���� ,,OO�� QQHHVVWW�� QQXXOOOOHHPPHHQQWW�� HH[[KKDDXXVVWWLLII�� HHWW

GGRRLLWW�� rrWWUUHH�� XXWWLLOOLLVVpp�� SSRRXXUU�� GGppFFRRXXYYUULLUU�� OOHH�� OODDQQJJDDJJHH���� ''HHVV�� RRXXYYUUDDJJHHVV�� GGHH�� UUppIIppUUHHQQFFHH�� VVHHUURRQQWW�� LLQQGGLLVVSSHHQQVVDDEEOOHHVV�� SSRRXXUU

DDOOOOHHUU��SSOOXXVV��OORRLLQQ��GGDDQQVV��OODD��SSUURRJJUUDDPPPPDDWWLLRRQQ��--DDYYDDVVFFUULLSSWW

Page 2: &(1&(17 75(' 5('( ()250 )250$ $7,21,1 7,21,1' ',9,' ,9,'8 ...denis.michaud.free.fr/cd_meteosat/pages_HTML/Electronique/cours... · g.valet >> javascript 3djh introduction /h -dydvfulsw

G.VALET >> Javascript

3DJH�����

INTRODUCTION.......................................................................................................................................................3

JAVASCRIPT EST-IL NORMALISÉ ?...............................................................................................................................3QU'Y A T-IL SOUS LE CAPOT ?.....................................................................................................................................3JAVASCRIPT CÔTÉ CLIENT ET CÔTÉ SERVEUR.............................................................................................................3JAVASCRIPT ET HTML...............................................................................................................................................3

Balise Script ..........................................................................................................................................................4

VARIABLES ET DONNÉES.....................................................................................................................................4

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

Booléen (Boolean).................................................................................................................................................4Nombre (Number) .................................................................................................................................................4Chaîne (String)......................................................................................................................................................5Tableaux................................................................................................................................................................5Date.......................................................................................................................................................................5Conversion de types ..............................................................................................................................................6

OPÉRATEURS..............................................................................................................................................................6Opérateurs arithmétiques......................................................................................................................................6Opérateurs relationnels.........................................................................................................................................7Opérateurs logiques ..............................................................................................................................................7Opérateurs bit à bit ...............................................................................................................................................7Opérateurs unaires spéciaux.................................................................................................................................7Opérateurs d'affectation........................................................................................................................................7Autres opérateurs ..................................................................................................................................................8

CONTRÔLE DE FLUX...................................................................................................................................................8If Else ....................................................................................................................................................................8while ......................................................................................................................................................................8for..........................................................................................................................................................................8

LES FONCTIONS ......................................................................................................................................................9

LES OBJETS...............................................................................................................................................................9

INTRODUCTION..........................................................................................................................................................9LES MÉTHODES DES OBJETS........................................................................................................................................9PROTOTYPES ET CONSTRUCTEURS............................................................................................................................10EXEMPLES D'OBJETS DU NAVIGATEUR......................................................................................................................11

MODÈLE OBJET DU NAVIGATEUR..................................................................................................................12

OBJET DOCUMENT...................................................................................................................................................12

HTML ET JAVASCRIPT........................................................................................................................................13

FORMULAIRES..........................................................................................................................................................13Événements intrinsèques .....................................................................................................................................13Objets formulaires...............................................................................................................................................14

Accès aux objets FORMS.............................................................................................................................................. 14Cas du contrôle SELECT............................................................................................................................................... 15

Evènement focus..................................................................................................................................................16GESTION DES IMAGES...............................................................................................................................................16

Objet Image.........................................................................................................................................................17Déclaration d'une image................................................................................................................................................. 17Relation avec les balises IMG........................................................................................................................................ 17

DYNAMIC HTML....................................................................................................................................................17

UTILISATION DES BALISES <DIV> ET <LAYER>....................................................................................................18Manipuler une balise DIV avec Netscape ...........................................................................................................18Manipuler une balise DIV avec Internet Explorer ..............................................................................................18

LES COOKIES .........................................................................................................................................................18

COOKIES POURQUOI FAIRE ? ....................................................................................................................................19CRÉER UN COOKIE....................................................................................................................................................19

Page 3: &(1&(17 75(' 5('( ()250 )250$ $7,21,1 7,21,1' ',9,' ,9,'8 ...denis.michaud.free.fr/cd_meteosat/pages_HTML/Electronique/cours... · g.valet >> javascript 3djh introduction /h -dydvfulsw

G.VALET >> Javascript

3DJH�����

INTRODUCTION

/H�-DYDVFULSW�HVW�XQ�ODQJDJH�LQWHUSUpWp�HW�RULHQWp�REMHW�TXL�VH[pFXWH�F{Wp�FOLHQW�RX�F{Wp�VHUYHXU��,O

HVW� SDUWLFXOLqUHPHQW�DGDSWp�DX�:RUOG�:LGH�:HE� SXLVTXLO� IRQFWLRQQH�DYHF� OH�+�7�0�/� �+\SHU� 7H[W

0DUNXS�/DQJDJH���&H�ODQJDJH�SUHQG�XQH�SODFH�SUpSRQGpUDQWH�GDQV�OHQYLURQQHPHQW�,QWHUQHW��&HVW

JUkFH�j� OXL� TXH� OHV�SDJHV�:HE�VHQULFKLW�DYHF�XQ�FRQWHQX� LQWHUDFWLI� HW� DQLPp�� /HV� SRVVLELOLWpV� GH

+�7�0�/�pWDQW�OLPLWpHV��-DYDVFULSW�VLPSRVH�FRPPH�XQ�FRPSOpPHQW�LQGLVSHQVDEOH�

Javascript est-il normalisé ?

2XL� HW� QRQ�� (Q� IDLW�� -DYDVFULSW� HVW� Qp� FKH]� OD� VRFLpWp� 1HWVFDSH� HW� SRUWDLW� OH� QRP� GH� /LYH� 6FULSW�

'HYDQW� OH� VXFFqV�HW� OH�SKpQRPqQH� GH�PRGH� GX� ODQJDJH� -$9$�� /LYH� 6FULSW� HVW� GHYHQX� -DYDVFULSW�

/RUVTXH�0LFURVRIW�VHVW�UHQGX�FRPSWH�GH�OLPSDFW�GH�FH�QRXYHDX�ODQJDJH��LO�D�FUpH�-VFULSW��/HV�GHX[

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

FRPSDWLELOLWp�HQWUH�OHV�YHUVLRQV�GH�QDYLJDWHXUV�LQWHUQHW�

+HXUHXVHPHQW��ORUJDQLVPH�GH�QRUPDOLVDWLRQ�(&0$�D�FUpH�(&0$�6FULSW��&H�VWDQGDUG�SHUPHW�GH�IL[HU

FHUWDLQHV� IRQFWLRQQDOLWpV�GX� ODQJDJH��'H�FH�SRLQW�GH�YXH�� OHV�-DYDVFULSW�HW� -VFULSW�GH�1HWVFDSH�HW

0LFURVRIW�VRQW�FRPSDWLEOHV�DYHF�OD�QRUPH�(&0$�6FULSW��&HSHQGDQW��(&0$6FULSW�QH�VDUUrWH�SDV�VXU

ODVSHFW�LQWHUIDFH��FH�VRLQ�pWDQW�ODLVVp�DX[�pGLWHXUV�GH�ORJLFLHOV�TXL�ULYDOLVHQW�j�FRXSV�GH�QRXYHOOHV

WHFKQRORJLHV�LQFRPSDWLEOHV�OHV�XQHV�DYHF�OHV�DXWUHV�

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

SUREOqPHV�GLQFRPSDWLELOLWp�HQWUH�OHV�YHUVLRQV�HW�OHV�pGLWHXUV�

Qu'y a t-il sous le capot ?

/HV�SULQFLSDOHV�FDUDFWpULVWLTXHV�GX�ODQJDJH��

9 2ULHQWp�REMHW��2Q�PDQLSXOH�GHV�REMHWV�WHOV�TXH�GHV�IHQrWUHV��GHV�ERXWRQV��GHV�LPDJHV«�

9 ,QWHUSUpWp��$�OLQYHUVH�GX�-DYD��-DYDVFULSW�HVW�FRPSLOp�DX�PRPHQW�GH�OH[pFXWLRQ�GX�SURJUDPPH�

9 'pULYp�GX�&����/HV�IRQFWLRQV��OHV�RSpUDWHXUV�VRQW�OHV�PrPHV�PDLV�VLPSOLILpV�HW�SOXV�WROpUDQWV�

9 3RUWDEOH��,QGpSHQGDQW�GX�PDWpULHO��LO�SHXW�rWUH�H[pFXWp�SDUWRXW�GqV�TXH�OH�V\VWqPH�HVW�SRXUYX�GXQ

LQWHUSUpWHXU�-DYDVFULSW�

9 ,QVpUp�GDQV�GHV�DSSOLFDWLRQ�K{WHV��1DYLJDWHXU��DSSOLV�SURSULpWDLUHV�

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

-DYDVFULSW�SHXW�VH[pFXWHU�F{Wp�VHUYHXU�HW�F{Wp�FOLHQW��/H�F{Wp�FOLHQW�HVW�XWLOLVp�SRXU�DJUpPHQWHU�GHV

SDJHV� +70/� GXQ� FRQWHQX� SOXV� G\QDPLTXH� HW� LQWHUDFWLI�� /H� F{Wp� VHUYHXU�� HVW� UpVHUYp� j� GHV

DSSOLFDWLRQV�HQ� UHODWLRQ�DYHF� -$9$�RX� OD� WHFKQRORJLH�$63�GH�0LFURVRIW�� ,O�HVW�SRVVLEOH� GHQWUHU� HQ

UHODWLRQ�DYHF�GHV�EDVHV�GH�GRQQpHV�HW� OHV�ODQJDJHV�GH�VFULSW�WHOV�TXH�-DYDVFULSW�VRQW� OHV�DFWHXUV

SULYLOpJLpV�GH�FHWWH�FRPPXQLFDWLRQ�

Javascript et HTML

8Q�VFULSW�SHXW�VH�WURXYHU�DX�VHLQ�GXQH�SDJH�+70/�JUkFH�j�OD�SUpVHQFH�GH�OD�EDOLVH��6&5,37!��/H

FRUSV� GX� VFULSW� VHUD� VRLW� GLUHFWHPHQW� GDQV� OD� SDJH� +70/� RX� j� OH[WpULHXU�� 'DQV� FH� FDV� XQ� OLHQ

H[WpULHXU�YHUV�OH�ILFKLHU�FRQWHQDQW�OH�SURJUDPPH�VHUD�LQVpUp�GDQV�OD�SDJH�+70/�

Page 4: &(1&(17 75(' 5('( ()250 )250$ $7,21,1 7,21,1' ',9,' ,9,'8 ...denis.michaud.free.fr/cd_meteosat/pages_HTML/Electronique/cours... · g.valet >> javascript 3djh introduction /h -dydvfulsw

G.VALET >> Javascript

3DJH�����

Balise Script

&HWWH�EDOLVH�PDUTXH�OH�GpEXW�GXQ�VFULSW�GDQV�OD�SDJH�+70/��(OOH�SHXW�VLQVpUHU�DXWDQW�GH�IRLV�TXH

QpFHVVDLUH�GDQV�OHV�EDOLVHV�+($'�RX�%2'<��(OOH�FRQWLHQW�SOXVLHXUV�DWWULEXWV�

$WWULEXW$WWULEXW 6LJQ6LJQLLILFDWLRQILFDWLRQ

W\SHW\SH6SpFLILH�OH�ODQJDJH�GH�VFULSW�XWLOLVp��&HW�DWWULEXW�GRLW�rWUH�XQ

W\SH�0,0(�,QWHUQHW

ODQODQJJDDJJHH6SpFLILH�pJDOHPHQW�OH�ODQJDJH�PDLV�VRXV�IRUPH�GXQ

LGHQWLILFDWHXU�WH[WH�VLPSOH�HW�QRQ�VWDQGDUG

VUFVUF,QGLTXH�OD�ORFDOLVDWLRQ�GX�VFULSW�ORUVTXLO�HVW�VpSDUp�GX

GRFXPHQW

Attributs de la balise SCRIPT

�HU�([HPSOH�GXWLOLVDWLRQ�GH�OD�EDOLVH�6&5,37��

<SCRIPT langage="Javascript">… Contenu du script</SCRIPT>

2X��

<SCRIPT type="text/javascript">… Contenu du script</SCRIPT>

/D�GHUQLqUH�PpWKRGH�QHVW�FRPSDWLEOH�TXDYHF�OHV�YHUVLRQV�����GHV�QDYLJDWHXUV��(OOH�XWLOLVH�OH�IRUPDW

0,0(�

�qPH�([HPSOH�GXWLOLVDWLRQ�GH�OD�EDOLVH�6&5,37�DYHF�UpIpUHQFH�j�XQ�ILFKLHU�H[WHUQH��

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

Variables et Données

Déclaration de variables (var)

/D�GpFODUDWLRQ�GXQH�YDULDEOH�VH�IDLW�DYDQW�VRQ�XWLOLVDWLRQ�JUkFH�DX�PRW�FOp�YDUYDU�

var toto ;

,O�HVW�SRVVLEOH�GH�GpFODUHU�WRXW�W\SH�GH�YDULDEOH�VDQV�HQ�VSpFLILHU�OH�W\SH��&HWWH�VRXSOHVVH�HVW�GXH�j

OD�JUDQGH�SHUPLVVLYLWp�GX�-DYDVFULSW

Types primitifs

Booléen (Boolean)

/H�W\SH�ERROpHQ�QH�SHXU�SUHQGUH�TXH���YDOHXUV��7UXH�HW�)DOVH�

titi = true;tutu = false;

Nombre (Number)

,O� Q\�D�SDV�GH�GLVWLQFWLRQ�HQWUH� OHV� UpHOV�� OHV�HQWLHUV�RX� OHV�RFWHWV��8Q�QRPEUH�SHXW�rWUH� FRGp�GH

GLIIpUHQWHV�PDQLqUHV��

Page 5: &(1&(17 75(' 5('( ()250 )250$ $7,21,1 7,21,1' ',9,' ,9,'8 ...denis.michaud.free.fr/cd_meteosat/pages_HTML/Electronique/cours... · g.valet >> javascript 3djh introduction /h -dydvfulsw

G.VALET >> Javascript

3DJH�����

nombre1 = 10.25;nombre2 = 17;nombre3 = 1.05e+14nombre4 = 0xFF52 // Nombre hexadécimal

/H�QRPEUH�HVW�OLPLWp�DX[�YDOHXUV�LQIpULHXUHV�j�������HQYLURQ�

Chaîne (String)

,O� QH[LVWH�SDV�GH� W\SH�SRXU� UHSUpVHQWHU�XQ� VHXO� FDUDFWqUH�� /H� VHXO�PR\HQ� SRXU� \� SDUYHQLU� HVW� GH

FUpHU�XQH�FKDvQH�DYHF�XQ�VHXO�FDUDFWqUH��/D�FKDvQH�GRLW�rWUH�GpOLPLWpH�SDU�GHV�JXLOOHPHWV�VLPSOHV

RX�GRXEOHV��2Q�XWLOLVH�OHV�JXLOOHPHWV�VLPSOHV�GDQV�OH�FDV�R��XQH�LQVWUXFWLRQ�-DYDVFULSW�HVW�H[pFXWpH

DX�VHLQ�GXQH�SURSULpWp�GXQH�EDOLVH�+70/��$SSHO�j�XQH�IRQFWLRQ�SDU�H[HPSOH�

chaine = "Salut";

RX

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

/H[HPSOH�SUpFpGHQW�VLQVqUH�GDQV�OH�FRUSV�GXQH�SDJH�+70/��,O�FUpH�XQ�OLHQ�YHUV�OH�VLWH�'LGHURW�HW

DSSHOOH�OD�IRQFWLRQ�-DYDVFULSW�DOHUW�TXL�DIILFKH�XQH�ERvWH�GH�GLDORJXH�FRQWHQDQW�OD�FKDvQH�WUDQVPLVH

j�OD�IRQFWLRQ��2Q�UHPDUTXHUD�OD�SUpVHQFH�GHV�JXLOOHPHWV�VLPSOHV�SRXU�OH�SDVVDJH�GH�OD�FKDvQH�GDQV

OD�IRQFWLRQ�YLVDQW�j�QH�SDV�SHUWXUEHU�OH�FRGH�+70/�

Tableaux

8Q� WDEOHDX� VXWLOLVH� SRXU� VWRFNHU� GHV� GRQQpHV� GLIIpUHQWHV� GDQV� XQH� VHXOH� YDULDEOH� GRQW� OLQGLFH

YDULH��3RXU�GpFODUHU�XQ�WDEOHDX��RQ�XWLOLVH�OD�V\QWD[H�QHZQHZ�

var jours= new Array(7);jour[0] = "Lundi";jour[1] = "Mardi";jour[2] = "Mercredi";…

RX�HQFRUH

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

/HV�pOpPHQWV�GXQ�WDEOHDX�QH�VRQW�SDV�IRUFpPHQW�GH�PrPH�W\SH��8Q�WDEOHDX�SHXW�WUqV�ELHQ�FRQWHQLU

GHV�FKDvQHV�HW�GHV�QRPEUHV�

3RXU�FUpHU�GHV�WDEOHDX[�j�SOXVLHXUV�GLPHQVLRQV��LO�VXIILW�GH�FUpHU�GHV�WDEOHDX[�GH�WDEOHDX[��

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

,O�VDJLW�GXQ�W\SH�GREMHW�SHUPHWWDQW�GH�WUDLWHU�OHV�GDWHV�HW�OHV�KHXUHV��&HV�REMHWV�RQW�GHV�PpWKRGHV

TXL�DXWRULVHQW�XQ�SURJUDPPH�MDYDVFULSW�j�FRQQDvWUH�OKHXUH�V\VWqPH�GH�ORUGLQDWHXU�FOLHQW�

$X�GpSDUW��XQ�REMHW�GDWH�QH�FRQWLHQW�ULHQ��,O�GLVSRVH�GH�SOXVLHXUV�PpWKRGHV�YLVDQW�j�WUDLWHU�OHV�GDWHV

VRXV�WRXWHV�OHXUV�IRUPHV�

9RLFL�XQH�YXH�GHQVHPEOH�QRQ�H[KDXVWLYHV�GHV�PpWKRGHV�GHV�REMHWV�GH�W\SH�GDWH��

Page 6: &(1&(17 75(' 5('( ()250 )250$ $7,21,1 7,21,1' ',9,' ,9,'8 ...denis.michaud.free.fr/cd_meteosat/pages_HTML/Electronique/cours... · g.valet >> javascript 3djh introduction /h -dydvfulsw

G.VALET >> Javascript

3DJH�����

$WWULEXW$WWULEXW 6LJQ6LJQLLILFDWLRQILFDWLRQ

JHW'DWHJHW'DWH 5HWRXUQH�OH�MRXU�GX�PRLV�HQ�XWLOLVDQW�OKHXUH�ORFDOH

JHW'D\JHW'D\5HWRXUQH�OH�MRXU�GH�OD�VHPDLQH�HQ�XWLOLVDQW�OKHXUH

ORFDOH�����SRXU�GLPDQFKH�«�

JHW+RXUVJHW+RXUV5HWRXUQH�XQ�HQWLHU�FRUUHVSRQGDQW�j�OKHXUH�GX�MRXU�HQ

XWLOLVDQW�OKHXUH�ORFDOH����j����

JHW0LQXWHVJHW0LQXWHV5HWRXUQH�XQ�HQWLHU�FRUUHVSRQGDQW�j�OD�PLQXWH�GH

OKHXUH�HQ�XWLOLVDQW�OKHXUH�ORFDOH����j����

JHW6HFRQGVJHW6HFRQGV5HWRXUQH�XQ�HQWLHU�FRUUHVSRQGDQW�j�OD�VHFRQGH�HQ

XWLOLVDQW�OKHXUH�ORFDOH����j����

JHW7LJHW7LPPHH5HWRXUQH�XQ�HQWLHU�FRUUHVSRQGDQW�DX�QRPEUH�GH

PLOOLVHFRQGHV�pFRXOpHV�GHSXLV�OH��HU�-DQYLHU������

VHW7LPH�VHW7LPH�

VHW'DWHVHW'DWH�«�«

0pWKRGHV�SHUPHWWDQW�GH�IL[HU�OD�GDWH�RX�OKHXUH�SRXU

OHV�REMHWV�FRQFHUQpV

3RXU� SOXV� GH� UHQVHLJQHPHQWV�� FRQVXOWH]� OD� GRFXPHQWDWLRQ� pOHFWURQLTXH� 0LFURVRIW� � �� -6&ULSW� Y�

GRFXPHQWDWLRQ���IRXUQLH�ORUV�GX�VWDJH��9RXV�\�WURXYHUH]�WRXWHV�OHV�PpWKRGHV�SRXYDQW�rWUH�DSSHOpHV

DYHF�GHV�REMHWV�'DWH�

9RLFL�XQ�H[HPSOH�TXL�FUpH�XQ�REMHW�GDWH�HW�OXL�DIIHFWH�OKHXUH�FRXUDQWH�HW�DIILFKH�OH�QRPEUH�GH�MRXUV

GHSXLV�OH��HU�-DQYLHU�������GDQV�XQH�ERvWH�GH�GLDORJXH��

var myDate = new Date;

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

Conversion de types

,O�H[LVWH�GHV�IRQFWLRQV�GH�FRQYHUVLRQ�GH�W\SH�TXL�SHUPHWWHQW�GH�VSpFLILHU�H[SOLFLWHPHQW�OD�FRQYHUVLRQ

j�HIIHFWXHU��9RLFL�GHV�H[HPSOHV�GH�FRQYHUVLRQ�H[SOLFLWHV�RX�LPSOLFLWHV��

var a = String(21.34) // Donne a = "21.34"var b = Number ("12.56") // b = 12.56var c = + ("0xFE99"); // c = 65177var 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

UHQFRQWUpHV�HQ�ODQJDJH�&��/HV�RSpUDWHXUV�VRQW�XWLOLVpV�SRXU�HIIHFWXHU�GHV� WHVWV�RX�PDQLSXOHU�GHV

GRQQpHV�� ,O�HVW�SRVVLEOH�GH�FRPELQHU�SOXVLHXUV�RSpUDWLRQV�HQ�XQH�VHXOH��9RLFL�XQ� UpFDSLWXODWLI�GHV

SULQFLSDX[�RSpUDWHXUV��

Opérateurs arithmétiques

/HV�RSpUDWHXUV������� ���������0RGXOR��VXWLOLVHQW�FRPPH�FL�GHVVRXV��

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

Page 7: &(1&(17 75(' 5('( ()250 )250$ $7,21,1 7,21,1' ',9,' ,9,'8 ...denis.michaud.free.fr/cd_meteosat/pages_HTML/Electronique/cours... · g.valet >> javascript 3djh introduction /h -dydvfulsw

G.VALET >> Javascript

3DJH�����

L -VFULSW����� WURQTXH� OHV�YDOHXUV� UpHOOHV�HQ�HQWLHUV�DYDQW�GH� OHXU�DSSOLTXHU� ORSpUDWHXU����$LQVL� ���������

DXUD�SRXU�UpVXOWDW��

Opérateurs relationnels

8WLOLVpV�SRXU�OHV�FRPSDUDLVRQV��OHV�RSpUDWHXUV�UHODWLRQQHOV�VRQW�WRXV�ELQDLUHV��'DQV�XQH�FODXVH�GH

W\SH�LI���OD�FRQGLWLRQ�SRXU�OH[pFXWHU�HVW�TXH�FHWWH�FRQGLWLRQ�VRLW�YUDLH���pJDOH�j���

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

'DQV�OH[HPSOH�FL�GHVVXV��ORSpUDWHXU� �HVW�XWLOLVp�SRXU�FRPSDUHU�YDULDEOH�DX�QRPEUH���

2SpUDWHXU2SpUDWHXU 6LJQ6LJQLLILFDWLRQILFDWLRQ

!�HW��!�HW�� VXSpULHXU�j�HW�LQIpULHXU�j

! �HW�� ! �HW�� VXSpULHXU�RX�pJDO�j�HW�LQIpULHXU�RX�pJDO�j

�HW�� �HW�� pJDO�j�HW�GLIIpUHQW�GH

Opérateurs logiques

3HUPHW� GHIIHFWXHU� GHV� RSpUDWLRQV� ORJLTXHV� HQWUH� GHV� YDULDEOHV� ��� __� �� �� �� �� 2Q� QRWHUD� TXH� OHV

VLJQHV�VRQW�GRXEOpV�SRXU�QH�SDV�FRQIRQGUH�DYHF�OHV�RSpUDWHXUV�ELW�j�ELW�

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

Opérateurs bit à bit

&HV�RSpUDWHXUV� WUDLWHQW� OHV� QRPEUHV� FRPPH�VLO� 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[H�VXLYDQWH��

9 127���a

9 $1'���

9 25���_

9 ;25���A

9 'pFDODJH�j�JDXFKH�����

9 'pFDODJH�j�GURLWH���!!

9 'pFDODJH�j�GURLWH�QRQ�VLJQp���!!!

Opérateurs unaires spéciaux,O�VDJLW�GRSpUDWHXU�GLQFUpPHQWDWLRQ�RX�GH�GpFUpPHQWDWLRQ�GH�YDULDEOHV��&HV�RSpUDWLRQV�VRQW�VRLW

SRVWIL[pV��([pFXWpV�DSUqV��RX�VRLW�SUHIL[pV��([pFXWpV�DYDQW��

b = a + (d++ );

G�QH�VHUD�LQFUpPHQWp�TXDSUqV�DYRLU�HIIHFWXp�ORSpUDWLRQ�D�G��DQFLHQQH�YDOHXU�GH�G���,O�VDJLW�GXQH

SRVW�GpFUpPHQWDWLRQ��/HV���H[SUHVVLRQV�FL�GHVVRXV�VRQW�pTXLYDOHQWHV

b = a + ( --d );b = a + (d – 1 );

Opérateurs d'affectation

/H�VLJQH�pJDO�HVW� ORSpUDWHXU�GDIIHFWDWLRQ�SULQFLSDO�� ,O� HVW�SRVVLEOH�GXWLOLVHU�XQH� IRUPH�FRQWUDFWpH

SRXU�pYLWHU�GH�OpFULWXUH��

a += 3 ;a = a + 3;

Page 8: &(1&(17 75(' 5('( ()250 )250$ $7,21,1 7,21,1' ',9,' ,9,'8 ...denis.michaud.free.fr/cd_meteosat/pages_HTML/Electronique/cours... · g.valet >> javascript 3djh introduction /h -dydvfulsw

G.VALET >> Javascript

3DJH�����

/HV���H[SUHVVLRQV�FL�GHVVXV�VRQW�pTXLYDOHQWHV�

Autres opérateurs

,O�H[LVWH�XQ�RSpUDWHXU� WHUQDLUH�GDIIHFWDWLRQ� FRQGLWLRQQHOOH��&HW�RSpUDWHXU�HVW�XQ�PR\HQ� UDSLGH�GH

GRQQHU�j�XQH�YDULDEOH�XQH�YDOHXU�FKRLVLH�HQWUH�GHX[��&HVW�XQ�UDFFRXUFL�SRXU�pFULUH�GHV�LQVWUXFWLRQV

LI�VLPSOHV��9RLU�SDUDJUDSKH�VXLYDQW��

/HV���H[SUHVVLRQV�VXLYDQWHV�VRQW�pTXLYDOHQWHV��

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

&H�JHQUH�GRSpUDWHXU�HVW�j�PDQLHU�DYHF�SUpFDXWLRQ�FDU�LO�GLPLQXH�OD�OLVLELOLWp�GHV�SURJUDPPHV�HW� LO

HVW�VRXUFH�GHUUHXU�GH�SURJUDPPDWLRQ�

Contrôle de flux

+pULWpHV�GX�ODQJDJH�&���OHV�PpFDQLVPHV�GH�FRQWU{OH�GH�IOX[�GRQQHQW�DX�SURJUDPPHXU�OD�SRVVLELOLWp

GHIIHFWXHU�GHV�ERXFOHV�RX�GHV�FODXVHV�LI�HOVH�

If Else

if ( condition )instruction ou bloc

// ouif ( condition )

instruction ou blocelse

instruction ou bloc

3DU�H[HPSOH��

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

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

while

3HUPHW�GHIIHFWXHU�XQH�ERXFOH�VRXV�FHUWDLQHV�FRQGLWLRQV

while ( condition )instruction ou bloc

9RLFL�XQ�SURJUDPPH�SHUPHWWDQW�GLQFUpPHQWHU�[�MXVTXj�FH�TXLO�VRLW�pJDO�j��

while ( x != 5)x = x + 1;

for

3HUPHW�GHIIHFWXHU�GHV�ERXFOHV�DYHF�XQ�QRPEUH�GLWpUDWLRQ�GpWHUPLQp

for ( initialisation ; condition, modification)instruction ou bloc

9RLFL�XQ�H[HPSOH�SHUPHWWDQW�GpFULUH�OHV����SUHPLHUV�FKLIIUHV�GDQV�XQH�SDJH�+70/

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

Page 9: &(1&(17 75(' 5('( ()250 )250$ $7,21,1 7,21,1' ',9,' ,9,'8 ...denis.michaud.free.fr/cd_meteosat/pages_HTML/Electronique/cours... · g.valet >> javascript 3djh introduction /h -dydvfulsw

G.VALET >> Javascript

3DJH�����

Les fonctions/HV� IRQFWLRQV� SHUPHWWHQW� GH� VXEGLYLVHU� OHV� WkFKHV� j� HIIHFWXHU� HQ� SHWLWV� VRXV�SURJUDPPHV�� &HV

IRQFWLRQV�SHXYHQW�SUHQGUH�GHV�SDUDPqWUHV�HW�UHQYR\HU�WRXW�W\SH�GH�GRQQpHV�

function nom ( paramètres ){instructions et éventuellement return pour renvoyer une données}

9RLFL�XQH�IRQFWLRQ�UHQYR\DQW�XQH�FKDvQH�GpSHQGDQW�GX�QRP�SDVVp�HQ�SDUDPqWUHV

function bonjour ( nom ){return ( " Bonjour " + nom);}

/D�IRQFWLRQ�SRXUUD�rWUH�DSSHOp�SDU�DLOOHXUV�FRPPH�FHFL�HW�FKDLQH�UHFHYUD��%RQMRXU�'LGLHU���

chaine = bonjour ( "Didier");

Les objets

Introduction

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

UHJURXSHPHQW�GH�YDULDEOHV�HW�GH�IRQFWLRQV�TXL�SHXYHQW�rWUH�UpXWLOLVpHV�DXWDQW�TXH�QpFHVVDLUH�

var contact = new Object;

contact.nom = "VALET";contact.prenom = "Génaël';contact.tel = "0146511521"

/H[HPSOH�FL�GHVVXV�FUpH�XQ�REMHW�GRQW�OHV�YDULDEOHV�QRP��SUHQRP�HW�WHO�VRQW�DVVRFLpV��5LHQ�QH�QRXV

HPSrFKH�GH�FUpHU�XQ� WDEOHDX� GREMHWV�TXL� FRPSRVHUDLW� XQ� UpSHUWRLUH� WpOpSKRQLTXH�� /HV� YDULDEOHV

DVVRFLpHV�j�OREMHW�VRQW�GHV�SURSULpWpV�

3RXU�OLEpUHU�OD�SODFH�TXXQ�REMHW�RFFXSH�HQ�PpPRLUH��LO�VXIILW�GDSSHOHU�OD�IRQFWLRQ�GHOHWH��

delete contact;

Les méthodes des objets

/HV�REMHWV�SHXYHQW�pJDOHPHQW�SRVVpGHU�GHV�PpWKRGHV�TXL�VHURQW�H[pFXWpHV�ORUVTXRQ�IDLW�DSSHO�j

HOHV��&HV�PpWKRGHV�DSSDUWLHQQHQW�j�OREMHW�HW�VRQ�OLpV�j�OXL�

/H[HPSOH�GREMHW�FRQWDFW�SHXW�rWUH�DJUpPHQWp�GXQ�PpWKRGH�GDIILFKDJH�GpILQLH�DYDQW��

Page 10: &(1&(17 75(' 5('( ()250 )250$ $7,21,1 7,21,1' ',9,' ,9,'8 ...denis.michaud.free.fr/cd_meteosat/pages_HTML/Electronique/cours... · g.valet >> javascript 3djh introduction /h -dydvfulsw

G.VALET >> Javascript

3DJH������

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();

(Q�UpVXPp��XQH�PpWKRGH�HVW�XQH�IRQFWLRQ�FRQWHQXH�GDQV�OREMHW��2Q�UHPDUTXHUD�OXWLOLVDWLRQ�GH�OD

YDULDEOH� WKLV� TXL� IDLW� UpIpUHQFH� j� OREMHW� TXL� D� LQYRTXp� OD� PpWKRGH� HW� TXL� SHUPHW� GDFFpGHU

GLUHFWHPHQW�DX[�YDULDEOHV�GH�OREMHW�DSSHODQW�

Prototypes et constructeurs

'DQV� OH[HPSOH� SUpFpGHQW�� QRXV� DYRQV� pWp� REOLJp� GH� GpILQLU� XQ� REMHW� FRQWDFW� HW� GH� GpILQLU� VHV

SURSULpWpV�DLQVL�TXH�VD�PpWKRGH��3RXU�FUpHU�XQ�QRXYHDX�FRQWDFW�� LO� IDXGUDLW�VDLVLU� OH�PrPH�FRGH�

'DQV�OH�FDV�GHQUHJLVWUHPHQWV�PXOWLSOHV��OH�FRGH�j�VDLVLU�SHXW�GHYHQLU�WURS�FRSLHX[��+HXUHXVHPHQW�

LO� H[LVWH� OD�SURSULpWp�SURWRW\SH�TXL� �� DVVRFLpH� DX[� IRQFWLRQV� VSpFLDOHV� FRQVWUXFWHXU� SHUPHWWHQW� GH

UHPpGLHU�j�FH�SUREOqPH�

9RLFL�QRWUH�H[HPSOH�GLOOXVWUDWLRQ�GHV� IRQFWLRQV�VSpFLDOHV�FRQVWUXFWHXU�TXL� VLQVSLUH�GH�QRWUH�REMHW

FRQWDFW��

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 );}

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();

/REMHW� VHUD�DORUV�DXWRPDWLTXHPHQW� FUpH�DYHF�VHV�SURSULpWpV�SDU� OLQVWUXFWLRQ�QHZ�TXL� VRFFXSHUD

GDSSHOHU�OD�IRQFWLRQ�FRQVWUXFWHXU�FUpHUBFRQWDFW��

,O�UHVWH�D�DXWRPDWLVHU�ODVVRFLDWLRQ�GH�OD�IRQFWLRQ�DIILFKHU�FRPPH�PpWKRGH�GH�OREMHW�&HVW�OH�U{OH�GH

SURWRW\SH

Page 11: &(1&(17 75(' 5('( ()250 )250$ $7,21,1 7,21,1' ',9,' ,9,'8 ...denis.michaud.free.fr/cd_meteosat/pages_HTML/Electronique/cours... · g.valet >> javascript 3djh introduction /h -dydvfulsw

G.VALET >> Javascript

3DJH������

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 );}

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� FL�GHVVXV� �� SHUVRQQH�� HW� SHUVRQQH�� DXURQW� WRXV� OHV� GHX[� XQH� PpWKRGH

DIILFKHUBFRQWDFW���GLVSRQLEOH�

Exemples d'objets du navigateur

/HV� REMHWV� UHSUpVHQWHQW� OH� SULQFLSDO� LQWpUrW� GH� -DYDVFULSW�� /HXUV� PpWKRGHV� RX� OHXUV� SURSULpWpV

SHUPHWWHQW�GH�OHV�PDQLSXOHU�j�ORLVLU��7RXW�OH�SUREOqPH�FRQVLVWH�j�FRQQDvWUH�OHXU�H[LVWHQFH��3UHQRQV

OH[HPSOH�GXQ�SURJUDPPH�-DYDVFULSW�TXL�VH[pFXWH�GDQV�XQH�SDJH�:HE�HW�GRQF�GDQV�XQ�QDYLJDWHXU�

/REMHW�GRFXPHQW�UHSUpVHQWH�OD�SDJH�+70/�DFWXHOOHPHQW�DIILFKpH�GDQV�OH�QDYLJDWHXU��2Q�SHXW�GRQF

DFFpGHU�IDFLOHPHQW�j�O85/�SHUPHWWDQW�GH�ODWWHLQGUH��

alert( document.location );

/H[HPSOH�FL�GHVVXV�DIILFKHUD�XQH�ERvWH�GH�GLDORJXH�GDQV�ODTXHOOH�VDIILFKHUD� ODGUHVVH�LQWHUQHW�GX

GRFXPHQW�HQ�FRXUV�

5LHQ�QH�QRXV�HPSrFKH�GDLOOHXUV�GH�PRGLILHU�FHWWH�85/�

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

&HWWH�LQVWUXFWLRQ�SHUPHW�DX�QDYLJDWHXU�GH�FKDUJHU�OD�SDJH�VRPPDLUH�KWP�GX�O\FpH�'LGHURW�

8Q�DXWUH�H[HPSOH�FRQVLVWH�HQ�XQ�SURJUDPPH�TXL�SHUPHWWUDLW�GH�VDYRLU�TXHO�QDYLJDWHXU�OXWLOLVDWHXU

XWLOLVH�SRXU�QDYLJXHU��

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

8QH�ERvWH�GH�GLDORJXH�VDIILFKH�HQ�SUpFLVDQW�OD�YHUVLRQ�GX�QDYLJDWHXU�XWLOLVp��

Page 12: &(1&(17 75(' 5('( ()250 )250$ $7,21,1 7,21,1' ',9,' ,9,'8 ...denis.michaud.free.fr/cd_meteosat/pages_HTML/Electronique/cours... · g.valet >> javascript 3djh introduction /h -dydvfulsw

G.VALET >> Javascript

3DJH������

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

LOOXVWUHQW�FHWWH�QRWLRQ�

&HSHQGDQW�� OH� PRGqOH� REMHW� YDULH� GXQ� QDYLJDWHXU� j� ODXWUH�� 1RXV� DOORQV� HVVD\HU� GH� UHFHQVHU

TXHOTXHV�REMHWV�LPSRUWDQWV�HW�GH�VSpFLILHU�SRXU�TXHOOHV�YHUVLRQV�GH�QDYLJDWHXU� LOV�VRQW�XWLOLVDEOHV�

/D�OLVWH�QH�VHUD�DEVROXPHQW�SDV�H[KDXVWLYH�FDU�FKDTXH�pGLWHXU�GH�ORJLFLHO� ��0LFURVRIW��1HWVFDSH� �

GpYHORSSH�VHV�SURSUHV�REMHWV�

Objet Document

/REMHW�'RFXPHQW�HVW� OH�SOXV� LQWpUHVVDQW�GHV�REMHWV� IRXUQLV�SDU� OH� QDYLJDWHXU�� /D� OLVWH� GHV� REMHWV

FRQWHQXV�GDQV�GRFXPHQW�GpSHQG�GX�QDYLJDWHXU�XWLOLVp��/HV�GLIIpUHQFHV�HQWUH�1HWVFDSH�HW� ,QWHUQHW

([SORUHU�VRQW�PXOWLSOHV�HW�LO�YDXW�PLHX[�VH�UpIpUHU�DX[�GRFXPHQWV�GH�UpIpUHQFH�GH�FKDTXH�pGLWHXU��

&OLHQW5HIHUHQFH-DYDVFULSW1&6���SGI��SRXU�1HWVFDSH�HW�OH�ILFKLHU�GDLGH�0LFURVRIW�:LQGRZV�6FULSW����

/H� OLYUH� �/H�JXLGH�GX�SURJUDPPHXU� -DYD6FULSW� � FKH]�(\UROOHV� UpIpUHQFH�pJDOHPHQW� OHV�GLIIpUHQFHV

PDLV�LO�FRPPHQFH�j�GDWHU�

Objet Navigator

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

LQIRUPDWLRQV�VXU�OH�QDYLJDWHXU�XWLOLVp��9RLFL�XQ�UpFDSLWXODWLI�GHV�PpWKRGHV�HW�GHV�SURSULpWpV�OHV�SOXV

XWLOLVpHV��

3URSULpWpV3URSULpWpV 'HVFULSWLRQ'HVFULSWLRQ

DSS&RGHDSS&RGH1D1DPHPH 1RP�GH�FRGH�GX�QDYLJDWHXU

DSDSSS11DDPHPH 1RP�GX�SURGXLW

DSS9HUVLRQDSS9HUVLRQ 1XPpUR�GH�YHUVLRQ

FRRNLH(FRRNLH(QQDEOHGDEOHG 5HQYRLH�WUXH�VL�OHV�FRRNLHV�VRQW�DXWRULVpV

SODWIRSODWIRUUPP 1RP�GH�SODWH�IRUPH

XVHU$JHQWXVHU$JHQW1RP�GX�QDYLJDWHXU�LQGLTXp�GDQV�OHQ�WrWH�GHV

UHTXrWHV�+773�DGUHVVpHV�DX�VHUYHXU�SDU�OH�FOLHQW

Propriétés de l'objet Navigator

0pWKRGHV0pWKRGHV 'HVFULSWLRQ'HVFULSWLRQ

MDYMDYDD(QD(QDEEOHG��OHG��

5HQYRLH�WUXH�VL�OD�PDFKLQH�YLUWXHOOH�MDYD�HVW

SUpVHQWH�VXU�OH�V\VWqPH�HW�IDOVH�GDQV�OH�FDV

FRQWUDLUH�

Méthodes de l'objet Navigator

9RLFL�FH�TXH�GRQQH�ODIILFKDJH�GH�WHOOH�SURSULpWpV�DYHF�,(��VRXV�:LQGRZV�17��

appCodeName : MozillaappName : Microsoft Internet ExplorerappVersion : 4.0 (compatible; MSIE 5.0; Windows NT)userAgent : Mozilla/4.0 (compatible; MSIE 5.0; Windows NT)cookieEnabled : trueLanguage : undefinedmimeTypes ( Netcape 4 et + seulement ) :platform : Win32plugins ( Netcape 4 et + seulement ) :

9RLFL�OD�PrPH�FKRVH�DYHF�1HWVFDSH�YHUVLRQ�����VRXV�17��

Page 13: &(1&(17 75(' 5('( ()250 )250$ $7,21,1 7,21,1' ',9,' ,9,'8 ...denis.michaud.free.fr/cd_meteosat/pages_HTML/Electronique/cours... · g.valet >> javascript 3djh introduction /h -dydvfulsw

G.VALET >> Javascript

3DJH������

appCodeName : MozillaappName : NetscapeappVersion : 4.7 [fr] (WinNT; I)userAgent : Mozilla/4.7 [fr] (WinNT; I)cookieEnabled : undefinedLanguage : frmimeTypes ( Netcape 4 et + seulement ) :[object MimeTypeArray]platform : Win32

/H�SURJUDPPH�-DYDVFULSW�SHUPHWWDQW�GREWHQLU�FH�UpVXOWDW�VH�QRPPH�YHUVLRQ�MV�HW�OD�SDJH�+70/

FRUUHVSRQGDQWH�HVW�YHUVLRQ�KWPO

HTML et Javascript/LQWpUrW�GH�-DYDVFULSW�F{Wp�FOLHQW�HVW�GH�SRXYRLU�IDLUH�IRQFWLRQQHU�GHV�SURJUDPPHV�HQ�UHODWLRQ�DYHF

OH�+70/�� /D� EDOLVH� 6FULSW� GpFULWH� GDQV� OD� �qUH� SDUWLH� GH� FH� GRFXPHQW� SHUPHW� GLQVpUHU� GX� FRGH

-DYDVFULSW�GDQV�XQH�SDJH�+70/�

&H�FRGH�SHXW�LQWHUYHQLU�j�SOXVLHXUV�HQGURLWV�GXQ�SDJH�+70/��

9 'DQV�XQH�EDOLVH�VFULSW

9 &RPPH�YDOHXU�GXQ�DWWULEXW�GH�JHVWLRQ�GpYpQHPHQW�GXQH�EDOLVH���%2'<��,0*���$���«�

3RXU�SOXV�GH�SUpFLVLRQV�VXU�OH�+70/��YHXLOOH]�YRXV�UHSRUWHU�DX�GRFXPHQW�/DQJDJH�+70/�GRQQp�HQ

GpEXW�GH�IRUPDWLRQ�

Formulaires

,O�HVW�SRVVLEOH�GH�JpUHU�FHUWDLQHV�DFWLRQV�RX�pYpQHPHQW�DYHF�GHV�IRUPXODLUHV�SDU�-DYDVFULSW��7RXV

OHV�FRQWU{OHV�GXQ�IRUPXODLUH�SRVVqGH�GHV�DWWULEXWV�R��-DYDVFULSW�SHXW�LQWHUYHQLU��9RLFL�XQH�OLVWH�GHV

FRQWU{OHV�SRVVLEOHV��

9 ,1387�,1387���&RQWU{OH�GH�VDLVLH

9 WH[WWH[W���FKDPS�WH[WH

9 SDVVZRUGSDVVZRUG���FKDPS�PRW�GH�SDVVH

9 FKHFNER[FKHFNER[���FKDPS�FDVH�j�FRFKHU

9 UDGLRUDGLR���FKDPS�ERXWRQ�UDGLR

9 VXEPLWVXEPLW���ERXWRQ�VRXPHWWUH�IRUPXODLUH

9 UHVHWUHVHW���ERXWRQ�SRXU�UHPHWWUH�j�]pUR�WRXV�OHV�FKDPSV�GX�IRUPXODLUH

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 KLGGHQ�KLGGHQ���FKDPS�QH�GHYDQW�SDV�DSSDUDvWUH�GDQV�OH�IRUPXODLUH

9 LLPPDJH�DJH���ERXWRQ�JUDSKLTXH

9 EXWWRQEXWWRQ���FKDPS�GH�W\SH�ERXWRQ

9 %87721�%87721���%RXWRQ�GDFWLRQ

9 6(/(&7�HW�237,21�6(/(&7�HW�237,21���/LVWHV�GpURXODQWHV

9 7(;7$5($�7(;7$5($�����=RQH�GH�VDLVLH�GH�WH[WH�PXOWLOLJQHV�HW�PXOWLFRORQQHV

Événements intrinsèques

&H�VRQW�GHV�DFWLRQV�SURYRTXpHV�SDU�XQ�pYpQHPHQW�SDUWLFXOLHU��&H�VRQW�GHV�SRLQWV�GHQWUpH�SRXU�XQ

VFULSW�� &HOD� VLJQLILH� TXXQ� VFULSW� SDUWLFXOLHU� SHXW�rWUH� H[pFXWp� FKDTXH� IRLV� TXH� OpYpQHPHQW� VH

SURGXLW�

9RLFL�XQH�OLVWH�QRQ�H[KDXVWLYH�GHV�pYpQHPHQWV�SRVVLEOHV��

�$WWULEXW���6LJQLIL$WWULEXW���6LJQLILFFDWLRQDWLRQ

RQ/RDGRQ/RDG

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

Page 14: &(1&(17 75(' 5('( ()250 )250$ $7,21,1 7,21,1' ',9,' ,9,'8 ...denis.michaud.free.fr/cd_meteosat/pages_HTML/Electronique/cours... · g.valet >> javascript 3djh introduction /h -dydvfulsw

G.VALET >> Javascript

3DJH������

RQ8QORDGRQ8QORDG

VXUYLHQW�ORUVTXH�OH�QDYLJDWHXU�OD�IHQrWUH�RX�XQ�FDGUH��&HW�DWWULEXW�SHXW�rWUH�XWLOLVp�GDQV�GHV

pOpPHQWV�%2'<�HW�)5$0(6(7���9RLU�3(UUHXU��(UUHXU��66LJQHW�QRQLJQHW�QRQ�G�GppILILQQL�L�HW�3(UUHXU��6LJQHW�QRQ(UUHXU��6LJQHW�QRQ�G�GppIILLQL�QL��

RQ&OLFN���RQ&OLFN���RQ'EOFOLFNRQ'EOFOLFN

VXUYLHQW�ORUV�GX�FOLF�RX�GRXEOH�FOLF�GH�VRXULV�VXU�XQ�OREMHW�FRQFHUQp�

RQ0RXVH2YHURQ0RXVH2YHU

VXUYLHQW�ORUVTXH�OD�VRXULV�SDVVH�DX�GHVVXV�GH�OREMHW�FRQFHUQp

RQ0RXVH'RZQRQ0RXVH'RZQ

VXUYLHQW�ORUVTXH�OH�ERXWRQ�GH�OD�VRXULV�HVW�HQIRQFp�PDLV�SDV�UHOkFKp

RQ0RXVH8SRQ0RXVH8S

VXUYLHQW�ORUVTXH�OH�ERXWRQ�GH�OD�VRXULV�HVW�UHOkFKp��2Q�VXSSRVH�TXLO�DYDLW�pWp�HQIRQFp�

RQ0RXVH2XWRQ0RXVH2XW

VXUYLHQW�ORUVTXH�OH�SRLQWHXU�GH�OD�VRXULV�VRUW�GH�OREMHW

RQ0RXVH0RYHRQ0RXVH0RYH

VXUYLHQW�ORUVTXH�OH�SRLQWHXU�GH�VRXULV�HVW�GpSODFp�VXU�OREMHW�FRQFHUQp

9RLFL�XQ�H[HPSOH�SHUPHWWDQW�GH[pFXWHU�XQH�IRQFWLRQ�-DYDVFULSW�ORUVTXH�ORQ�FOLTXH�VXU�XQ�ERXWRQ

GH�IRUPXODLUH��/D�IRQFWLRQ�RXYUH�XQH�ERvWH�GH�GLDORJXH�GpOLYUDQW�XQ�PHVVDJH���

<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="form1" method="post" action=""> <input type="submit" name="Submit" value="Submit" onClick="alert('Vous avez cliqué sur lebouton submit')"></form>

</body></html>

Objets formulaires

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

PpWKRGHV�HW�GHV�SURSULpWpV�LQKpUHQWHV�DX�ODQJDJH�RULHQWp�REMHW�GX�ODQJDJH�

Accès aux objets FORMS

3RXU�DFFpGHU���RQ�PDQLSXOH�OREMHW�GRFXPHQW�IRUPV�GX�QDYLJDWHXU��

Page 15: &(1&(17 75(' 5('( ()250 )250$ $7,21,1 7,21,1' ',9,' ,9,'8 ...denis.michaud.free.fr/cd_meteosat/pages_HTML/Electronique/cours... · g.valet >> javascript 3djh introduction /h -dydvfulsw

G.VALET >> Javascript

3DJH������

o p tio ns [0] o p tio ns [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 cum e nt

,O�H[LVWH���PpWKRGHV�SRXU�DFFpGHU�SDU�SURJUDPPH�DX[�IRUPXODLUHV��/D��qUH�FRQVLVWH�j�FRQVLGpUHU

OHV�REMHWV�SDU�OHXU�QXPpURV��'DQV�FH�FDV��YRLFL�FRPPHQW�RQ�DFFqGHUDL�DX��HU�pOpPHQW�GX��HU

IRUPXODLUH��

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

/D��qPH�PpWKRGH��SOXV�SURSUH��HVW�GH�GRQQHU�XQ�QRP�j�FKDTXH�FRQWU{OH�DLQVL�TXDX�IRUPXODLUH�

'H�FHWWH�PDQLqUH�FKDTXH�YDOHXU�GDWWULEXW�HVW�DFFHVVLEOH�SDU�-DYDVFULSW��9RLFL�XQ�H[HPSOH�GH�SDJH

+70/�FRQWHQDQW�XQ�IRUPXODLUH�DYHF�XQ�FKDPS�GH�VDLVLH�GH�WH[WH�DLQVL�TXXQ�ERXWRQ�GH�YDOLGDWLRQ��

<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"> <input type="submit" name="Envoyer" value="Submit" ></form>

</body></html>

FH�TXL�GRQQH�j�SHX�SUqV�FHFL��

2Q�DFFqGH�j�OD�YDOHXU�GX�FKDPS�WH[WH��'DQV�OH[HPSOH�VXLYDQW��XQH�ERvWH��

message = "Vous avez tapé le nom :" + document.MyForm.nom.valuealert( message );

9RXV�WURXYHUH]�FHW�H[HPSOH�GDQV�OH�ILFKLHU�IRUP��KWP

Cas du contrôle SELECT

'DQV�OH�FDV�GXQ�FRQWU{OH�OLVWH�GpURXODQWH��%DOLVH�6(/(&7����OH�FRGH�+70/�VH�SUpVHQWH�GH�OD�PDQLqUH

VXLYDQWH��

Page 16: &(1&(17 75(' 5('( ()250 )250$ $7,21,1 7,21,1' ',9,' ,9,'8 ...denis.michaud.free.fr/cd_meteosat/pages_HTML/Electronique/cours... · g.valet >> javascript 3djh introduction /h -dydvfulsw

G.VALET >> Javascript

3DJH������

<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" >

<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> <option value="page2.htm">Option 2</option> <option value="page3.htm">Option 3</option> </select></form></body></html>

2Q�UHPDUTXHUD�TXH�ODWWULEXW�2Q&KDQJH�GH�OD�EDOLVH�6(/(&7�IDLW�DSSHO�j�OD�IRQFWLRQ�FOLFNBFKRL[���TXL

DIILFKHUD�XQH�ERvWH�GH�GLDORJXH�GpOLYUDQW�XQ�PHVVDJH�GH�FH�VW\OH�VL�ORSWLRQ���HVW�FKRLVLH�

Evènement focus

,O�HVW�SRVVLEOH�GH�GRQQHU�OD�PDLQ�j�XQ�XWLOLVDWHXU�JUkFH�j�OD�PpWKRGH�IRFXV���HQ�UHQGDQW�XQ�FRQWU{OH

GH� IRUPXODLUH� SUrW� j� OD� VDLVLH�� &HWWH� PpWKRGH� VDSSOLTXH� DX[� FRQWU{OHV� GH� IRUPXODLUH� HW� SHXW

VDSSHOHU�GH�OD�IDoRQ�VXLYDQWH��

document.MyForm.texte1.focus();

'DQV�FHW�H[HPSOH�� OH� FRQWU{OH� WH[WH�� GX� IRUPXODLUH�0\)RUP� YHUUD� VRQ� IRFXV�rWUH�DFWLYp�� &HVW� XQ

PR\HQ�XWLOH�GDLGH�j�OD�VDLVLH�GH�IRUPXODLUH�

Gestion des images

,O�HVW�SRVVLEOH�GH�JpUHU� OHV� LPDJHV�G\QDPLTXHPHQW�SDU� OHV�pYpQHPHQWV� LQWULQVqTXHV�YXV�SRXU� OHV

IRUPXODLUHV�� ,O� IDXW� VDYRLU� QpDQPRLQV�TXH�FHWWH�JHVWLRQ�QHVW�SRVVLEOH�TXDYHF� OHV� YHUVLRQV�����HW

VXSpULHXUH�GHV�QDYLJDWHXUV��(Q�IDLW��VHXO�,(��VDLW�JpUHU�OHV�LPDJHV�FRPSOqWHPHQW��&H�QHVW�TXDYHF

OHV�YHUVLRQV���[�TXH�1HWVFDSH�D�DGRSWp�HQWLqUHPHQW�FHWWH�WHFKQRORJLH�

Page 17: &(1&(17 75(' 5('( ()250 )250$ $7,21,1 7,21,1' ',9,' ,9,'8 ...denis.michaud.free.fr/cd_meteosat/pages_HTML/Electronique/cours... · g.valet >> javascript 3djh introduction /h -dydvfulsw

G.VALET >> Javascript

3DJH������

1pDQPRLQV�� ORUVTXH� OLPDJH� HVW� LQWpJUpH� j� XQH� EDOLVH� �$!� �� OHV� pYqQHPHQWV� 2Q0RXVH2YHU� �

2Q0RXVH2XW�HW�2Q&OLFN�VRQW�GLVSRQLEOHV�GqV�OD�YHUVLRQ�����GH�1HWVFDSH�HW�,QWHUQHW�([SORUHU���

Objet Image

/REMHW� ,PDJH� SRVVqGH� GHV� SURSULpWpV� HW� GHV� PpWKRGHV� SHUPHWWDQW� GH� OH� PDQLSXOHU�� 2Q� SHXW

pJDOHPHQW�DVVRFLHU�XQ�REMHW� ,PDJH�j�XQH�EDOLVH�+70/� ,0*� SUpVHQWH�GDQV� OD� SDJH�� /HV� DWWULEXWV

GXQH�EDOLVH�,0*�VH�SUpVHQWHQW�DLQVL��

src h e ig ht w id th co m ple te n am e b order lo wsrc

Im ag es [0] im ag es[1]

D o cum e nt

VUF���85/�GH�OLPDJH

KHLJKW���ZLGWK���+DXWHXU�HW�/DUJHXU

FRPSOHWH���YDXW�758(�ORUVTXH�OH�QDYLJDWHXU�D�ILQL�OH�FKDUJHPHQW�GH�OLPDJH

QDPH���1RP�GH�OLPDJH

ERUGHU���7DLOOH�GH�OD�ERUGXUH�GH�OLPDJH

ORZVUF���85/�GXQH�LPDJH�EDVVH�UpVROXWLRQ�GH�UHPSODFHPHQW

Déclaration d'une image

/D�IRQFWLRQ�QHZ�GpFODUH�XQ�REMHW�GH�W\SH�,PDJH���2Q�SHXW�HQVXLWH�DFFpGHU�DX[�SURSULpWpV�GH�OLPDJH

HQ�VXLYDQW�OH�PRGqOH�LQGLTXp�SOXV�KDXW

MonImage = new Image;

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

/H[HPSOH�FL�GHVVXV�FUpH�XQH�LPDJH���VSpFLILp�VRQ�85/�HW�IL[H�VD�WDLOOH�

Í /H�IDLW�GH�GpFODUHU�XQH�LPDJH�HW�GH�OXL�DIIHFWHU�VRQ�DWWULEXW�VUF�REOLJH�OH�QDYLJDWHXU�j�FKDUJHU�OLPDJH�YHUVOD�PpPRLUH�ORFDOH�

Relation avec les balises IMG

3RXU�HIIHFWXHU�XQH�UHODWLRQ�HQWUH�XQ�REMHW�LPDJH�HW�XQH�EDOLVH�,0*��LO�VXIILW�GDIIHFWHU�OHV�SURSULpWpV

G\QDPLTXHPHQW��

document.Image5.src = MonImage.src

/H[HPSOH�FL�GHVVXV�UHPSODFH�OLPDJH�LPDJH��SDU�OD�YDOHXU�VUF�GH�OREMHW�0RQ,PDJH�

Dynamic HTML,O�VDJLW�GXQH�WHFKQRORJLH�SHUPHWWDQW�GH�IDLUH�pYROXHU�OHV�QDYLJDWHXUV�HW�UHQGUH�OHV�SDJHV�ZHE�SOXV

LQWHUDFWLYHV�� (Q� IDLW�� FKDTXH� QDYLJDWHXU� SRVVqGH� XQ� PRGqOH� REMHW� �'RFXPHQW� 2EMHFW� 0RGHO�� RX

FKDTXH�REMHW�SHXW�VH�PDQLSXOHU�j�YRORQWp��/H�EXW�GH�FH�FRXUV�QHVW�SDV�GH�IDLUH�XQ�FRXUV�VXU�'+70/

PDLV�SOXW{W�GH�PDQLSXOHU�GHV�REMHWV�GX�QDYLJDWHXU�SDU�-DYDVFULSW��

Page 18: &(1&(17 75(' 5('( ()250 )250$ $7,21,1 7,21,1' ',9,' ,9,'8 ...denis.michaud.free.fr/cd_meteosat/pages_HTML/Electronique/cours... · g.valet >> javascript 3djh introduction /h -dydvfulsw

G.VALET >> Javascript

3DJH������

/H�'+70/�HVW�FRPSRVp�GH���WHFKQRORJLHV�TXL�pWXGLpHV�XQH�j�XQH�GpSDVVHQW�OREMHFWLI�GH�FH�VWDJH��

9 -DYDVFULSW

9 /HV�VW\OHV���&�6�6���&DVFDGLQJ�6W\OH�6KHHW��

9 +70/

9 OH�'�2�0���'RFXPHQW�2EMHFW�0RGHO

9RXV�WURXYHUH]�HQ�DQQH[H�HW�GDQV�OHV�UHVVRXUFHV�IRXUQLHV�ORUV�GX�VWDJH��WRXV�OHV�PR\HQV�GREWHQLU

GHV�LQIRUPDWLRQV�SOXV�SUpFLVHV�VXU�FKDTXH�WHFKQRORJLH�

Utilisation des balises <DIV> et <LAYER>

/H�PRGqOH�REMHW�GHV�QDYLJDWHXUV�1HWVFDSH�HW�,(�QH�FRQVLGqUHQW�SDV�GH�OD�PrPH�IDoRQ�FHV���EDOLVHV

+70/��/D�EDOLVH��/$<(5!�QHVW�SULVH�HQ�FKDUJH�TXH�SDU�1HWVFDSH�HW�WHQG�j�GLVSDUDvWUH��/D�EDOLVH

�',9!�HVW�OD�SOXV�SRSXODLUH�HW�OD�SOXV�XWLOLVpH�

3RXU�SOXV�GH�SUpFLVLRQ�VXU�OHPSORL�GH�OD�EDOLVH�',9���VH�UHSRUWHU�DX�GRFXPHQW�/DQJDJH�+70/�IRXUQL

HQ�GpEXW�GH�VWDJH�

Manipuler une balise DIV avec Netscape

/H�PRGqOH�REMHW�GX�QDYLJDWHXU�1HWVFDSH�GpILQL� OHV�EDOLVHV�',9� HW�/$<(5� FRPPH�XQ� REMHW�/$<(5

DSSDUWHQDQW�j�OREMHW�'2&80(17��3RXU�DFFpGHU�j�XQ�WHO�REMHW���LO�IDXGUDLW�FRGHU�FRPPH�VXLW��

document.layers[0]

RX�HQFRUH�HQ�GpVLJQDQW�OD�EDOLVH�SDU�VRQ�QRP���$WWULEXW�,'�

document.MyDIV

3RXU�pFULUH�HQ�+70/�GDQV�XQH�EDOLVH�',9� SDU� OLQWHUPpGLDLUH�GH� -DYDVFULSW�� RQ� XWLOLVH� OD�PpWKRGH

ZULWH� FRPPH� GDQV� XQ� GRFXPHQW� QRUPDO�� (Q� IDLW� OD� EDOLVH� ',9� HVW� FRQVLGpUpH� FRPPH� XQ� REMHW

GRFXPHQW�j�SDUW�HQWLqUH�

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

/H[HPSOH�FL�GHVVXV�LQVqUH�XQ�OLHQ�GDQV�OD�EDOLVH�',9�

Manipuler une balise DIV avec Internet Explorer

,(� FRQWLHQW� XQ�PRGqOH� REMHW� SOXV� GpYHORSSp� HQ� FH� TXL� FRQFHUQH� OHV� EDOLVHV�� (Q� HIIHW�� OREMHW� DOO

FRQWLHQW�WRXWHV�OHV�EDOLVHV�H[FHSWpHV�+($'�HW�%2'<�

2Q�DFFqGH�GRQF�j�FHV�EDOLVHV�GH�OD�PDQLqUH�VXLYDQWH��

document.all.MyDIV

3RXU�pFULUH�GHGDQV��LO�H[LVWH�SOXVLHXUV�PpWKRGHV�GRQF�OD�SOXV�FRXUDQWH�HVW�,QQHU+70/���TXL�SHUPHW

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[HPSOH�FL�GHVVXV�LQVqUH�XQ�OLHQ�GDQV�OH�EORF�',9�QRPPp�0\',9�

Les Cookies&{Wp� FOLHQW�� OH� FRRNLH�HVW� ILFKLHU� WH[WHILFKLHU� WH[WH�JpUp�SDU� OH�QDYLJDWHXU�� /HV� LQIRUPDWLRQV� TXLO� FRQWLHQW� VRQW

GLVSRQLEOHV� SRXU� -DYDVFULSW� TXL� HVW� OLEUH� GH� OHV� PDQLSXOHU�� /HV� FRRNLHV� UHSUpVHQWHQW� XQ� GDQJHU

UHODWLI�SXLVTXH�QLPSRUWH�TXHOOH�SDJH�+70/�GXQ�VLWH�ZHE�SHXW�GpSRVHU�VXU�OH�FOLHQW�XQ�FRRNLH��2Q�HQ

GpGXLW�TXXQ�SURJUDPPH�VXIILVDPPHQW�ELHQ�IDLW�DXUDLW�OH�SRXYRLU�GH[DPLQHU�WRXV� OHV�FRRNLHV�GXQ

Page 19: &(1&(17 75(' 5('( ()250 )250$ $7,21,1 7,21,1' ',9,' ,9,'8 ...denis.michaud.free.fr/cd_meteosat/pages_HTML/Electronique/cours... · g.valet >> javascript 3djh introduction /h -dydvfulsw

G.VALET >> Javascript

3DJH������

FOLHQW�SRXU�GpWHUPLQHU�OHV�VLWHV�TXH�OXWLOLVDWHXU�D�YLVLWp�

(Q�IDLW��LO�H[LVWH�DXWDQW�GH�ILFKLHUV�TXH�G85/�GLIIpUHQWHV��6L�XQ�XWLOLVDWHXU�FRQVXOWH�SOXVLHXUV�VLWHV�HW

TXH�WRXV�FHV�VLWHV�JqUHQW�OHV�FRRNLHV��DORUV���LO�\�DXUD�DXWDQW�GH�ILFKLHUV�FRRNLHV�TXH�GH�VLWHV�YLVLWpV�

8Q�FRRNLH�HVW�FRQVWLWXp�GH��

9 8Q�QRP8Q�QRP���,O�VDJLW�GXQH�FKDvQH�GH�FDUDFWqUHV�GpVLJQDQW�OH�QRP�GX�FRRNLH

9 8QH�YDOHXU�8QH�YDOHXU���&KDvQH�GH�FDUDFWqUH�XQLFRGH���9RLU�PpWKRGHV�HVFDSH�HW�XQHVFDSH��

9 8Q�GR8Q�GRPPDLQHDLQH���1RP�GH�GRPDLQH�SHUPHWWDQW�GH�OLPLWHU�OD�YLVLELOLWp�j�XQ�GRPDLQH�VSpFLILTXH��&HVW�OD

JDUDQWLH�TXXQ�DXWUH�VLWH�QH�SRXUUD�SDV�FRQVXOWHU�YRV�FRRNLHV�

9 8Q�FKHPLQ�G8Q�FKHPLQ�GDFFqVDFFqV���3HUPHW�GH�OLPLWHU�OH�FRRNLH�j�XQH�SDUWLH�GX�GRPDLQH�VSpFLILp�FL�GHVVXV�

9 8Q�GpODL�G8Q�GpODL�GHH[SLUDWLRQ�[SLUDWLRQ��� )L[H� OH�GpODL� GH�QHWWR\DJH�GHV� FRRNLHV�SDU� OH�QDYLJDWHXU��6DQV� FHOXL�FL�� OH

QRPEUH�GHV�FRRNLHV�SRXUUDLW�DXJPHQWHU�HW�SRVHU�GHV�SUREOqPHV�GH�SODFH��6L� FH�GpODL� QHVW�SDV

IL[p��OH�FRRNLH�VHUD�HIIDFp�GqV�TXH�OH�QDYLJDWHXU�HVW�IHUPp�

9 8Q�GUDSHDX�GH8Q�GUDSHDX�GH�VpFXULWp�VpFXULWp���$WWULEXW�YDODQW�758(�RX�)$/6(�TXL�IRUFH�OH�QDYLJDWHXU�j�IDLUH�XQH�UHTXrWH

+773�VpFXULVpH���7\SH�66/��VL�LO�D�OD�YDOHXU�758(�

/HV�QDYLJDWHXUV�SRVVqGHQW�GHV�REMHWV�FRRNLH�TXH�ORQ�SHXW�FRQVXOWHU��,O�QH�IDXW�SDV�RXEOLHU�TXH�OHV

FRRNLHV� GpSHQGHQW� GH� OHXU� 85/�� 8Q� VLWH� TXHOFRQTXH� QH� SHXW� WKpRULTXHPHQW� SDV� FRQVXOWHU� OHV

FRRNLHV�GHV�DXWUHV�VLWHV�

Cookies Pourquoi faire ?

/HV�FRRNLHV�VRQW�XWLOHV�SRXU�GHV�DSSOLFDWLRQ�:HE�GHPDQGDQW�XQ�QLYHDX�GH�VpFXULWp�PR\HQ��,OV�VRQW

HPSOR\pV�GDQV�OHV�FDV�VXLYDQWV��

9 3RXU�GHV�DXWKHQWLILFDWLRQV�VXU�GHV�VLWHV�GRQW�FHUWDLQHV�SDJHV�VRQW�UpVHUYpHV�DX[�PHPEUHV

9 3RXU�GHV�DXWKHQWLILFDWLRQV�VXU�GHV�VLWHV�EDQFDLUHV�SRXU�FRQVXOWHU�GHV�LQIRUPDWLRQV�FRQILGHQWLHOOHV

��$SSXL�VXSSOpPHQWDLUH�GH�OD�WHFKQRORJLH�66/�

9 3RXU�GHV�VLWHV�GpVLUHX[�GH�ODLVVHU�GHV�WUDFHV�GH�SDVVDJH�j�GHV�ILQV�FRPPHUFLDOHV

9 3RXU�GHV�VLWHV�HIIHFWXDQW�GHV�VWDWLVWLTXHV�VXU�OH�QRPEUH�GH�YLVLWHV

9 %LHQ�GDXWUHV�FDV�HQFRUH

Créer un cookie

/D�FUpDWLRQ�GXQ�FRRNLH�UHTXLHUW�XQH�ERQQH�FRQQDLVVDQFH�GH�OD�PDQLqUH�GRQW�OH�QDYLJDWHXU�IL[H�OHV

FRRNLHV� �� /D� SUHPLqUH� FKRVH� j� UHWHQLU� HVW� TXH� XQ� FRRNLH� QHVW� VDXYHJDUGp� TXH� VL� VRQ� GpODL

GH[SLUDWLRQ�HVW�IL[p��'DQV�OH�FDV�FRQWUDLUH��LO�HVW�HIIDFp�SDU�OH�QDYLJDWHXU�GqV�TXH�FHOXL�FL�HVW�IHUPp�

9RLFL�XQ�H[HPSOH�GH�IRQFWLRQ�SHUPHWWDQW�OD�FUpDWLRQ�GH�FRRNLH��

// 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

WRXV�OHV�FRRNLHV�SRXU� O85/�FRXUDQWH�VpSDUpV�SDU�GHV�SRLQW�YLUJXOHV�� ,O� IDXW�SUpYRLU�XQ�SURJUDPPH

SHUPHWWDQW�GH�GpFRGHU�OHV�FRRNLHV�

+HXUHXVHPHQW�� FH� WUDYDLO� D� GpMj� pWp� IDLW� HW� OH� ILFKLHU� FRRNLHV�MV� FRQWLHQW� WRXWHV� OHV� IRQFWLRQV

SHUPHWWDQW�GH�OHV�WUDLWHU���*HW&RRNLH�����6HW&RRNLH���«��

Page 20: &(1&(17 75(' 5('( ()250 )250$ $7,21,1 7,21,1' ',9,' ,9,'8 ...denis.michaud.free.fr/cd_meteosat/pages_HTML/Electronique/cours... · g.valet >> javascript 3djh introduction /h -dydvfulsw

G.VALET >> Javascript

3DJH������

Javascript et Java-$9$�GLIIqUH�GH�-$9$6&5,37�SRXU�OD�VLPSOH�UDLVRQ�TXH�OXQ�HVW�XQ�ODQJDJH�FRPSLOp�HW�TXH�ODXWUH

HVW�XQ�ODQJDJH�LQWHUSUpWp�� ,OV�QH�FRUUHVSRQGHQW�SDV�DX[�PrPHV�EHVRLQ��-$9$�HVW� LGpDO� ORUVTXH�OHV

EHVRLQV�HQ�VpFXULWp�VRQW� LPSRUWDQWHV�HW� -$9$6&5,37�HVW�SDUIDLW�SRXU�GH�SHWLWHV�DSSOLFDWLRQV�:(%

LQWHUDFWLYHV��/H�EXW�GH�FHWWH�SDUWLH�QpWDQW�SDV�GH�SKLORVRSKHU�VXU� OHV�DYDQWDJHV�HW� LQFRQYpQLHQWV

GHV���ODQJDJHV�PDLV�SOXW{W�GH�GpFULUH�OD�IDoRQ�GH�OHV�IDLUH�FRPPXQLTXHU�

Points de connexion

'DQV� OH�PRGqOH�REMHW�GX�QDYLJDWHXU�� OHV�REMHWV� -$9$�SRVVqGHQW� OHXUV�PpWKRGHV�HW�SURSULpWpV�TXH

ORQ�SHXW�H[SORLWHU�HQ�-$9$6&5,37�

a pple ts [0]

a pp le ts [1]

d o cum e nt

W in do ws/HV�$33/(7V� VRQW� GLVSRQLEOHV�SDU� OLQWHUPpGLDLUH� GH� OREMHW

GRFXPHQW� GX�PRGqOH� REMHW�� ,O� HVW� SRVVLEOH� GH� SDVVHU� GHV

SDUDPqWUHV�GRQW�OH�W\SH�VXELUD�TXHOTXHV�FRQYHUVLRQV�

/H� SULQFLSH� GH� FRQYHUVLRQ� GpSHQG� GX� W\SH� GH� SDUDPqWUH

SDVVp��SDU�H[HPSOH�ORUVTXH�-$9$6&5,37�HQYRLH�XQH�YDULDEOH

GH�W\SH�1XPEHU���-$9$�FRQYHUWLW�FHWWH�YDOHXU�HQ�XQ�)/2$7�

)DLUH� FRPPXQLTXHU� -$9$6&5,37�HW� -$9$�SDU� OLQWHUPpGLDLUH

GHV�EDOLVHV�SHUPHW�GDFFpGHU�DX[�SDUDPqWUHV�GHV�$SSOHWV�HW

GH� OHV� FKDQJHU� G\QDPLTXHPHQW�� /D� FRPPXQLFDWLRQ� QH

VDUUrWH�SDV�Oj�SXLVTXLO�HVW�SRVVLEOH�GDFFpGHU�DX[�YDULDEOHV

LQWHUQHV�HW

DX[�PpWKRGHV�HW�SURSULpWpV�GH�ODSSOHW�

3RXU�SHX�TXH�OHV�GRQQpHV�WUDQVPLVHV�VRLHQW�FRPSDWLEOHV��OH�SURJUDPPH�-DYDVFULSW�SRXUUD�H[HFXWHU

FHV�SURSULpWpV�HW�PpWKRGHV�VDQV�VRXFLV�

9RLFL�XQ�H[HPSOH��

<HTML> <HEAD><SCRIPT >document.MyApplet.dire_bonjour();</SCRIPT></HEAD>

<BODY><APPLET name="MyApplet" code="bonjour.class" width=200 height=100 > </APPLET></BODY></HTML>

'DQV�FHW�H[HPSOH��OH�VFULSW�IDLW�DSSHO�j�OD�PpWKRGH�GH�ODSSOHW�-$9$�GLUHBERQMRXU���

JAVA, un langage exigeant

/RUVTXRQ�IDLW�DSSHO�j�XQH�PpWKRGH�GXQ�REMHW�GXQH�DSSOHW�-$9$�� OD�PDFKLQH�YLUWXHOOH�HIIHFWXH�OHV

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

GDUJXPHQWV�SDVVpV�HVW�LQFRUUHFW�RX�TXH�OD�FRQYHUVLRQ�QHVW�SDV�SRVVLEOH��OH�QDYLJDWHXU�UHQYRLH�XQH

HUUHXU�HW�ODSSOHW�QH�SHXW�VH[HFXWHU�

9RLFL�XQ�UpFDSLWXODWLI�GHV�SRVVLELOLWpV�GH�FRQYHUVLRQ�GH�GRQQpHV��

-DYD-DYDVVFULSWFULSW -$9$-$9$

7\SHV�SULPL7\SHV�SULPLWWLIVLIV

Page 21: &(1&(17 75(' 5('( ()250 )250$ $7,21,1 7,21,1' ',9,' ,9,'8 ...denis.michaud.free.fr/cd_meteosat/pages_HTML/Electronique/cours... · g.valet >> javascript 3djh introduction /h -dydvfulsw

G.VALET >> Javascript

3DJH������

8QGHILQHG ,PSRVVLEOH�j�FRQYHUWLU

1XOO 6WULQJ�RX�2EMHFW

%RROHDQ %RROHDQ

1XPEHU )ORDW

6WULQJ 6WULQJ

Conversion de type de JAVASCRIPT vers JAVA

Références9RLFL�TXHOTXHV�UpIpUHQFHV�j�FRQVXOWHU�SRXU�HQ�VDYRLU�SOXV��

9 /H�JXLGH�GX�SURJUDPPHXU�HQ�-DYDVFULSW����(\UROOHV�²�0DF)DUODQH

9 1RUPH�(&0$6FULSW�²�)LFKLHU�(FPD�6FULSW����GRF

9 'RFXPHQW�2EMHFW�0RGHO�²�)LFKLHU�'20�SGI

9 '\QDPLF�+70/�DYHF�1HWVFDSH���²�)LFKLHU�G\QDPLF+70/B1&��SGI

9 5pIpUHQFH�-DYDVFULSW�1HWVFDSH���&OLHQW5HIHUHQFH-DYDVFULSW1&6���SGI

9 6LWHV�ZHE�j�FRQVXOWHU�²�5pSHUWRLUHV�VLWHV�ZHE�GX�&'

9 /DQJDJH�+70/���²�/H�ODQJDJH+70/��GRF

9 1RUPH�:�&�VXU�+70/�²�KWPO���IU�]LS

Page 22: &(1&(17 75(' 5('( ()250 )250$ $7,21,1 7,21,1' ',9,' ,9,'8 ...denis.michaud.free.fr/cd_meteosat/pages_HTML/Electronique/cours... · g.valet >> javascript 3djh introduction /h -dydvfulsw

G.VALET >> Javascript

3DJH������

A

alert ........................................11appCodeName......................12Applet JAVA..........................20appName...............................12appVersion............................12

B

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

C

C++ ..........................................3checkbox - input...................13Constructeurs .........................10Conversion de Types................6cookieEnabled.......................12Cookies...................................19CSS.........................................18

D

Date..........................................5Delete .......................................9DIV ........................................18document................................20Document ...............................12Dynamic HTML.....................17

E

ECMA Script............................3Else...........................................8

F

file - input ..............................13focus.......................................16for.............................................8Forms .....................................14Formulaires ............................13function ....................................9

G

GetCookie.............................. 20getDate.................................... 6getDay..................................... 6getHours................................. 6getMinutes.............................. 6getSeconds.............................. 6getTime................................... 6

H

hidden - input....................... 13HTML...................................... 3

I

If 8Image..................................... 17image - input ........................ 13InnerHTML ........................... 18

J

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

L

langage - attribut ..... 4, 6, 7, 12LAYER................................... 18location .................................. 11

N

Navigator ............................... 12Null........................................ 21Number.............................. 4, 21

O

Object ...................................... 9Onclick - attribut ................. 14OnDblclick - attribut ........... 14onload - attribut ................... 13OnMousedown - attribut .... 14OnMousemove - attribut..... 14

OnMouseout.........................14OnMouseover - attribut.......14OnMouseup - attribut ..........14onunload - attribut ...............14Opérateurs................................6

P

password - input...................13platform ................................12Prototypes ..............................10

R

radio - input ..........................13reset - input...........................13

S

SCRIPT....................................3SELECT.................................15SetCookie...............................20setDate.....................................6setTime....................................6src - attribut ........................4, 6SSL.........................................19String..................................5, 21submit - input .......................13

T

Tableau ....................................5text - input.............................13type - attribut .....4, 6, 7, 12, 21

U

userAgent..............................12

V

var ............................................4

W

while.........................................8write .......................................10