[PDF] Cour JavaScript introduction complet avec exemples | Cours javascript

(1)

10:31:21

10:31:21 Programmation Web Programmation Web 11

Programmation Web :

DOM / JavaScript

(2)

2 2

10:31:27

10:31:27 Programmation WebProgrammation Web

DOM = Document Object Model



_{API (Application Programming Interface) pour la}

manipulation de HTML / XML



_{Définit la structure logique des documents}



_{Définit la façon d’y accéder, de la manipuler}



_{Créer des documents}



_{Parcourir leur structure}



_{Ajouter, effacer, modifier des éléments}



_{Ajouter, effacer, modifier leur contenu}

(3)

3 3

10:31:31

10:31:31 Programmation webProgrammation web

Qu’est-ce que le DOM ?

<

table

>

<

tbody

>

<

tr

><

td

>

Shady Grove</

Shady Grove

</

td

>

<

td

>

Aeolian</

Aeolian

</

td

>

</

tr

>

<

tr

><

td

>

Over the River, Charlie</

Over the River, Charlie

</

td

>

<

td

>

Dorian</

Dorian

</

td

>

</

tr

>

</

tbody

>

</

table

>

(4)

4 4

10:31:36

10:31:36 Programmation webProgrammation web

Qu’est-ce que le DOM ?



_{Représentation arborescente du document}



_{Modèle objet (structure + méthodes)}



_{Permet la manipulation du document}



_{Une implémentation : JavaScript…}



_…

_{Des implémentations :}



JavaScript IE



JavaScript Mozilla / Firefox



JavaScript Opera

(5)

5 5

10:31:40

10:31:40 Programmation WebProgrammation Web

JavaScript : Principe



_{Langage de script objet}



_{Syntaxe style C / C++ / Java}



_{Sensible à la casse}



_{N’est PAS du Java}



_{Exécuté par le client Web}



_{Peut être désactivé sur le client}



_{Nombreux objets pour la manipulation HTML}



_{Gestion des événements HTML}



_{Rendre les pages dynamiques (HTML+CSS+JS)}



_{Haut niveau d’incompatibilité…}

(6)

6 6

10:31:44

10:31:44 Programmation Web 2012-2013Programmation Web 2012-2013

JavaScript : Balise script

<

script

type

=

"text/javascript"

language

=

"JavaScript"

>

<!--script

script

// -->

</

script

>

<

script

type

=

"text/javascript"

language

=

"JavaScript"

src

=

"URI"

>

</

script

>

Masquer le script aux

navigateurs non compatibles

avec JavaScript

(7)

7 7

10:31:47

JavaScript : Exemple

<

html

>

<

head

>

<

title

>

Ma première page Web

</

title

>

</

head

>

<

body

>

<

script

type

=

"text/javascript"

language

=

"JavaScript"

>

<!--

document.writeln(

document.writeln("Salut !"

"Salut !"

) ;

// -->

</

script

>

</

body

>

</

html

>

(8)

8 8

10:31:51

Variables



_{Déclaration de variables facultative}



_{Variables non typées à la déclaration}

var

nom_variable

;



_{Typage dynamique à l’affectation}



_{Types gérés:}



Nombres (

10, 3.14

)



Booléens (true

Booléens (

true

, false

,

false

)



Chaînes ("Salut !"

Chaînes (

"Salut !"

, 'Salut !'

,

'Salut !'

)



null

(9)

9 9

10:31:55

Structures conditionnelles

if

(

condition

)

{

instructions ;

}

[

[ else

else

{

instructions ;

}

]

(10)

10 10

10:31:59

Structures conditionnelles

switch

(

expression

)

{

case

étiquette

:

instructions ;

break

;

case

étiquette

:

instructions ;

break

;

default

:

instructions ;

}

(11)

11 11

10:32:03

Structures itératives

while

(

condition

)

{

instructions ;

}

do

{

instructions ;

}

while

(12)

12 12

10:32:07

Structures itératives

for

(

instr ;

condition ; instr

)

{

instructions ;

}

for

(

variable

in

objet

)

{

instructions ;

}

(13)

13 13

10:32:11

Commentaires

// Commentaire ligne

**/* Commentaire multi-lignes */**

(14)

14 14

10:32:15

Fonctions



_{Valeur de retour non typée}



_{Arguments non typés}

// Déclaration

function

ma_fonction

(

arguments

)

{

instructions ;

return

quelque_chose;

// ou pas…

}

ma_fonction

(15)

15 15

10:32:19

Objets prédéfinis



_window



alert(

message

)

// Message d’avertissement



confirm(

message

)

// Message de confirmation : retourne

true ou false



prompt(

message

,

valeur_par_défaut

)

// Boîte de saisie : retourne la chaîne

saisie

(16)

16 16

10:32:23

Objets prédéfinis



_document



write(

message

)

// Ecrire dans le document



writeln(

message

)

// Ecrire dans le document (retour à la

ligne)

(17)

17 17

10:32:27

Chaînes : Propriétés & Méthodes



_Propriétés



length



…



_Méthodes



charAt(index

charAt(

index

)



charCodeAt(

index

)



concat(

chaine2

,

chaine3

, …)



fromCharCode(code1

fromCharCode(

code1

,

code2

, …)



indexOf(

aiguille

[,

index

])



lastIndexOf(aiguille

lastIndexOf(

aiguille

[, index

[,

index

])



match(

expr_reg

)

(18)

18 18

10:32:31

Chaînes : Exemples

var

s =

"Bon anniversaire Benjamin"

;

document.write(s.charAt(

2)) ;

2 )) ;



_n

document.write(s.charCodeAt(

2)) ;

2 )) ;



₁₁₀

document.write(s.concat(

" du groupe C12"

)) ;



_{Bon anniversaire Benjamin du groupe C12}

document.write(String.fromCharCode(

65,

65 ,

66, 67)) ;

66, 67

)) ;



_ABC

document.write(s.indexOf(

"Benjamin"

)) ;



₁₇

document.write(s.lastIndexOf(

"a"

)) ;



₂₁

document.write(s.match(

/Benjamin$/

)) ;



(19)

19 19

10:32:36

Chaînes : Méthodes



_Méthodes



replace(expr_reg, nouvelle_chaine

replace(

expr_reg, nouvelle_chaine

)



search(

expr_reg

)



slice(debut

slice(

debut

[,

fin

])



split(

separateur

[,

limite

])



substr(

debut

[,

taille

])



substring(

debut

,

fin

)



toLowerCase()



toUpperCase()



_Opérateurs

(20)

20 20

10:32:41

Chaînes : Exemples

var

s =

"Bon anniversaire Benjamin"

;

document.write(s.replace(

/i/g

,

'I'

)) ;



_{Bon annIversaIre BenjamIn}

document.write(s.search(

/n{2}/i

)) ;



₅

document.write(s.slice(

17)) ;

17 )) ;



_Benjamin

document.write(s.split(

" "

)) ;



_{Bon,anniversaire,Benjamin}

document.write(s.substr(

4,

4 ,

12)) ;

12 )) ;



_anniversaire

document.write(s.substring(

4,

4 ,

16)) ;

16 )) ;



_anniversaire

document.write(s.toUpperCase()+s.toLowerCase()) ;



(21)

21 21

10:32:45

Objet

_Math



_Propriétés



E, LN10, LN2, LOG10E, LOG2E, PI,

SQRT1_2, SQRT2



_Méthodes



abs(

val

)



acos(

val

), cos(

val

), …



exp(

val

), log(

val

)



floor(

val

), round(

val

), ceil(

val)



max(

val1

,

val2

), min(

val1

,

val2

)



pow(

val

,

puiss

), sqrt(val

), sqrt(

val

)

(22)

22 22

10:32:50

Objet

_Math

: Exemples

document.write(

115.

115 .

04+

04 +

15) ;

15 ) ;



_{130.04000000000002}

₍

_{Euh ?...}

₎

document.write(Math.PI) ;



_{3.141592653589793}

document.write(Math.abs(

-12.

-12

.

34)) ;

34 )) ;



_12.34

document.write(Math.floor(

12.

12 .

54)) ;

54 )) ;



₁₂

document.write(Math.round(

document.write(Math.round(12

12. .54

54)) ;

)) ;



₁₃

document.write(Math.ceil(

12.

12 .

54)) ;

54 )) ;



₁₃

document.write(Math.random()) ;



_{0.394555831655689}

(23)

23 23

10:32:54

Propriétés & Fonctions supérieures



_Propriétés



Infinity, NaN, undefined



_Fonctions



eval(

chaine

)



isFinite(

nombre

)



isNaN(

objet

)



parseFloat(

chaine

)



parseInt(

chaine

)



escape(

chaine

)



unescape(

chaine

)

(24)

24 24

10:32:58

document.write(eval(

"Math.pow(3+2, 2)"

)) ;



₂₅

document.write(isFinite(Math.log(

0))) ;

0 ))) ;



_false

document.write(isNaN(

"abcd"

)) ;



_true

document.write(

"12.34"

+

2) ;

2 ) ;



_12.342

document.write(parseFloat(

"12.34"

)+2

)+

2) ;

) ;



_14.34

document.write(escape(

"Bon anniversaire"

)) ;



_{Bon%20anniversaire}

document.write(unescape(

"Bon%20anniversaire"

)) ;



_{Bon anniversaire}

Propriétés & Fonctions supérieures

(25)

25 25

10:33:02

Tableaux



_{Objet Array}



_Déclaration

var

tab1 =

new

Array(

taille) ;

taille

) ;

var

tab2 =

new

Array(

1,

1 ,

"a"

,

9,

9 ,

…) ;

…

) ;

index



_{0 1 2 …}



_Utilisation

window.alert(tab2[

0]) ;

0 ]) ;

// 1

tab2[

2] = 6

2 ] = 6

// 6 remplace 9



_{Accroissement automatique de la taille}

var

tab1 =

new

Array(

2) ;

2 ) ;

tab1[

(26)

26 26

10:33:06

Tableaux



_Parcours

var

tab2 =

new

Array(

1,

1 ,

"a"

,

9) ;

9 ) ;

tab2[

200] =

200 ] =

12 ;

for (i in tab2)

window.alert(

"tab2["

+ i +

"] = "

+ tab2[i]) ;

// tab2[0] = 1

// tab2[1] = a

// tab2[2] = 9

// tab2[200] = 12

(27)

27 27

10:33:10

Tableaux : Propriétés & Méthodes



_Propriétés



length



…



_Méthodes



concat(

tab2

,

tab3

, …)



join(sépar

join(

sépar

)

Transforme un tableau en chaîne de

caractères.



pop()

Retire le dernier élément d'un tableau



push(val1

push(

val1

,

val2

, …)

Ajoute un ou plusieurs

éléments à la fin d'un tableau.



shift():

Retire le premier élément d'un tableau



unshift(

val1

,

val2

, …)

(28)

28 28

10:33:14

Contrôle de formulaires



_{Vérifier la cohérence de la saisie}



_{Contrôles sur le client}



_{Évite les transmissions client / serveur}



_{Contrôles possibles:}



Présence de valeur



Numérique / Chaîne



Expressions régulières



_Événement

_onSubmit

(29)

29 29

10:33:18

Contrôle de formulaires

<

html

><

head

><

title

>

Contrôle

</

title

>

<

script

type

=

"text/javascript"

>

function

verif

() {

if

(document.formu.txt.value !=

''

)

return

window.confirm(

'Envoyer ?'

) ;

return

false ;

}

</

script

></

head

><

body

>

<

form

name

=

"formu"

action

=

"URI"

method

=

"GET"

onSubmit="

return

verif() ;"

>

<

input

type

=

"text"

name

=

"txt"

>

<

input

type

=

"submit"

value

=

"Envoyer"

>

</

(30)

30 30

10:33:22

Formulaires : Propriétés & Méthodes



_Propriétés



action



elements



encoding



length



method



name



target



_Méthodes



reset()



submit()

(31)

31 31

10:33:26

Objets

commandes

de formulaires



_Text



_Textarea



_Hidden



_Password



_CheckBox



_{Radio (/!\ tableau de /!\)}



_{Submit / Reset}



_Select



_Option

(32)

32 32

10:33:30

Formulaires : Exemple

<

form

name

=

'formu'

onSubmit='return verif(

this

);

'

>

<

input

type

=

'text'

name

=

'texte'

><

br

>

<

select

name

=

'sel'

>

<

option

>

?

<

option

value

=

1

1 >

>

Un

<

option

value

=

2

2 >

>

Deux

</

select

><

br

>

<

input

type

=

'radio'

name

=

'rad'

id

=

'rad1'

>

<

label

for

=

'rad1'

>

oui</

oui

</

label

>

<

input

type

=

'radio'

name

=

'rad'

id

=

'rad2'

>

<

label

for

=

'rad2'

>

non</

non

</

label

><

br

>

<

input

type

=

'checkbox'

name

=

'chk'

id

=

'chk1'

>

<

label

for

=

'chk1'

>

OK</

OK

</

label

><

br

>

<

input

type

=

'submit'

value

=

'Envoyer'

>

</

(33)

33 33

10:33:34

Formulaires : accès aux champs

<

form

name

=

'formu'

onSubmit='return verif(

this

);

'

>

<

input

type

=

'text'

name

=

'texte'

> ...

<

script

type

=

"text/javascript"

>

function

verif(f)

{

... f.texte.value ;

}

</

script

>

<

form

name

=

'formu'

onSubmit='return verif();

'

>

<

input

type

=

'text'

name

=

'texte'

> ...

<

script

type

=

"text/javascript"

>

function

verif(f)

{

... document.formu.texte.value ;

... document.forms[0].elements[0].value ;

... document.forms[

"formu"

].elements[

"texte"

].value ;

}

</

script

>

Objet formulaire

Nom du champ



objet champ texte

Index du formulaire dans la page

Index du champ dans le formulaire

Nom du formulaire



objet formulaire

Nom du champ dans le formulaire

Tableau des formulaires de la page

Tableau des champs du formulaire

Nom du formulaire dans la page

Nom du champ dans le formulaire

(34)

34 34

10:33:38

Formulaires : Exemple

<

script

type

=

"text/javascript"

>

function

verif(f)

{

window.alert(f.texte.value) ;

window.alert(f.sel.selectedIndex) ;

window.alert(f.sel[f.sel.selectedIndex].text) ;

window.alert(f.sel[f.sel.selectedIndex].value) ;

window.alert(f.rad[

0].checked) ;

0 ].checked) ;

window.alert(f.chk.checked) ;

return

false

;

}

</

(35)

35 35

10:33:42

Expressions rationnelles



_{Expressions rationnelles / régulières}



/modele/drapeaux (drapeaux: g, i, gi)



new RegExp("modele"[, "drapeaux"])



_Modèles



^

: début de



$

: fin de



*

: 0 à n fois



+

: 1 à n fois



?

: 0 à 1 fois



.

: un caractère sauf retour chariot



|

: ou

(36)

36 36

10:33:46

Expressions rationnelles



_Modèles



(x)

:

x

et mémorise



{n}

:

n

fois



{n,}

: au moins

n

fois



{n,m}

: de

n

à

m

fois



[xyz]

: 1 élément de la liste



[a-z]

: 1 élément de la série



[^xyz]

: 1 élément n'étant pas dans la liste



[^a-z]

: 1 élément n'étant pas dans la série



\b

: frontière de mot

(37)

37 37

10:33:50

Expressions rationnelles



_Modèles



\d = [0-9]

: chiffre



\D = [^0-9]

: non chiffre



\n

: retour à la ligne



\s

: séparateur de mot



\S

: non séparateur de mot



\t

: tabulation



\w =

[A-Za-z0-9_]

: 1 caractère alphanumérique



_Méthodes

(38)

38 38

10:33:53

Expressions rationnelles : Exemples

<

script

type

=

"text/javascript"

>

document.write(

/l/

.test(

'Hello'

)) ;

document.write(

/^l/

.test(

'Hello'

)) ;

document.write(

/^h/

.test(

'Hello'

)) ;

document.write(

/^h/i

.test(

'Hello'

)) ;

document.write(

/^Hel.o/

.test(

'Hello'

)) ;

document.write(

/^Hel+o/

.test(

'Hello'

)) ;

document.write(

/^He+llo/

.test(

'Hello'

)) ;

document.write(

**/^Hea*llo$/**

.test(

'Hello'

)) ;

document.write(

**/^He(l|o)*$/**

.test(

'Hello'

)) ;

document.write(

/^H[leos]+/

.test(

'Hello'

)) ;

document.write(

/^H[^leo]+/

.test(

'Hello'

)) ;

document.write(

/^H[^kyz]+/

.test(

'Hello'

)) ;

document.write(

**/^H[a-z]*/**

.test(

'Hello'

)) ;

document.write(

**/^H[a-z]*$/**

.test(

'Hello'

)) ;

</

script

>

true

false

true

false

true

(39)

Dates : Propriétés & Méthodes



_Méthodes



Constructeur



getDay(), attention de 0 (dimanche) à 6 (samedi)…



getDate() / setDate()



getMonth() / setMonth(), attention de 0 à 11…



getHours()/ setHours()



getMinutes() / setMinutes()



getTime() / setTime()



getYear() / setYear() / getFullYear() / setFullYear()



parse()

39 39

10:33:57

(40)

Dates : Exemples

var

today =

new

Date()

document

.write(today) ;

var

birthday =

new

Date(

"December 17, 1995

03:24:00")

document

.write(birthday) ;

birthday =

new

Date(95

,11,17)

document

.write(birthday) ;

birthday =

new

Date(95

,11,17,3,24,0)

document

.write(birthday) ;

document

.write(birthday.getDay()) ;

document

.write(birthday.getDate()) ;

birthday.setDate(25) ;

document

.write(birthday) ;

40 40

10:34:01

Tue Nov 02 2010 00:11:36 GMT+0100

Sun Dec 17 1995 03:24:00 GMT+0100

Sun Dec 17 1995 00:00:00 GMT+0100

Sun Dec 17 1995 03:24:00 GMT+0100

0

17

17 Mon Dec 25 1995 03:24:00 GMT+0100

Mon Dec 25 1995 03:24:00 GMT+0100

(41)

Dates : Exemples

document

.write(birthday.getMonth()) ;

birthday.setMonth(10) ;

document

.write(birthday) ;

document

.write(birthday.getYear()) ;

birthday.setYear(96) ;

document

.write(birthday) ;

document

.write(birthday.getFullYear()) ;

birthday.setFullYear(2010) ;

document

.write(birthday) ;

document

.write(

Date

.parse(

"Aug 9, 1995"))

;

41 41

10:34:05

11

11 Sat Nov 25 1995 03:24:00 GMT+0100

Sat Nov 25 1995 03:24:00 GMT+0100

95

95 Mon Nov 25 1996 03:24:00 GMT+0100

Mon Nov 25 1996 03:24:00 GMT+0100

1996

Thu Nov 25 2010 03:24:00 GMT+0100

807919200000

(42)

42 42

10:34:10

Images : Propriétés & Méthodes



_Propriétés



complete



width



height



name



src



…



_Méthodes



constructeur



_Image()