Académique Documents
Professionnel Documents
Culture Documents
Chapitre04: JavaScript
1
Introduction
2
Introduction
3
Introduction
4
Introduction
5
Introduction
6
Introduction
7
Introduction
8
Introduction
9
Introduction
10
Introduction
11
Introduction
12
Introduction
13
Introduction
14
Introduction
15
Introduction
16
Généralités
17
Généralités
18
Généralités
19
Généralités
20
Généralités
21
Généralités
22
Généralités
23
Généralités
24
Généralités
25
Généralités
26
Généralités
27
Généralités
28
Généralités
29
Généralités
30
Généralités
31
Les Fonctions
32
Les Fonctions
33
Les Fonctions
34
Les Fonctions
35
Les Fonctions
36
Les Fonctions
37
Les Fonctions
38
Les Fonctions
39
Les Fonctions
40
Les Fonctions
41
LOGO
Les objets
42
Introduction aux objets (1/2)
43
Introduction aux objets (2/2)
44
L’objet: tableau
45
Déclaration d'un tableau
Première méthode:
46
Deuxième méthode:
48
Récupérer et modifier des valeurs
pour récupérer la valeur de l'index x d’un tableau, il suffit de
spécifier l'index voulu, entre crochets, comme ceci :
49
Tableau à plusieurs dimensions
Il est possible de créer un tableau à plusieurs dimensions.
ou
ou
50
Tableau à plusieurs dimensions
52
Parcourir un tableau avec for
53
Parcourir un tableau avec for
54
Les méthodes des tableaux: sort()
55
Les méthodes des tableaux: reverse()
56
Les méthodes des tableaux: join()
Syntaxe : tableau.méthode();
Join(séparateur) : regroupe tous les éléments du tableau en
une seule chaine. Les élément sont séparés par le
séparateur.
57
Les méthodes des tableaux: push()
58
Les méthodes des tableaux:
unshift(element1,…) : ajoute l(es) élément(s) passé(s) en
paramètres à au début du tableau.
59
Les méthodes des tableaux:
shift() : Permet de retirer le premier élément d'un tableau et de
renvoyer cet élément. Cette méthode modifie la longueur du
tableau.
60
Les méthodes des tableaux:
61
Les méthodes des tableaux:
slice(début, fin) : renvoie les éléments contenus entre la
position supérieure ou égale au début et inferieur à fin ( fin est
exclus).
62
Les méthodes des tableaux:
63
Tableaux associatifs
64
un objet littéral
Pour créer quelque chose qui ressemble à un tableau associatif, nous utilisons ce qu’on
appelle un objet littéral en JavaScript.
Cette déclaration va créer un objet analogue à un tableau, excepté le fait que chaque
item sera accessible au moyen d'un identifiant, ce qui donne schématiquement ceci :
65
un objet littéral
Pour créer un array vide on écris: var myArray = [];
Pour créer un objet vide on écris: var myObject = {};
pour récupérer la valeur d’un champ on peut utiliser:
family.sister; ou family['sister'];
Ajouter des items:
family['uncle'] = 'Didier'; ou family.uncle = 'Didier';
Parcourir un objet, on utilise for in
66
L’objet String
L’objet String est l’objet qui gère les chaînes de caractères.
Déclaration:
str="Bonjour";
67
L’objet String: La propriété length
length: Cet propriété retourne le nombre de caractères
contenus dans la chaîne.
68
L’objet String: La méthode charAt()
La méthode charAt(x) (avec A majuscule) permet de retourner le
caractères qui se trouve à la position x passé en paramètre.
Le paramètre est un entier entre 0 et la longueur de la chaîne -1.
La valeur 0 indexe le premier caractère de la chaîne.
69
L’objet String: La méthode indexOf():
La méthode indexOf() renvoie l'indice de la première occurrence de la
valeur cherchée au sein de la chaîne courante.
La méthode indexOf() peut accueillir un deuxième paramètre qui est un
entier qui indique à partir de quel position de la chaîne on commencera
la recherche du caractère passé en premier paramètre.
Elle renvoie -1 si la valeur cherchée n'est pas trouvée.
70
L’objet String: La méthode substring():
71
L’objet String: La méthode split()
La méthode split(occurence) permet de retourner un tableau
à partir des fractions de la chaîne de caractères obtenues en
divisant celle-ci au niveau de l'occurence.
72
L’objet String: La méthode toLowerCase()
La méthode toLowerCase() permet de retourner la chaîne de
caractère entièrement en minuscules.
La méthode toUpperCase() permet de retourner la chaîne de
caractère entièrement en majuscules.
73
LOGO
DOM
74
DOM
75
DOM
76
Accès aux éléments
document.getElementById()
77
Accès aux éléments
document.getElementById()
78
Accès aux éléments
document.getElementById()
79
Accès aux éléments
document.getElementById()
80
Remarque Importante!
81
82
83
84
getElementByName(): exemple3
85
getElementByName(): exemple3
86
getElementByName(): exemple3
87
getElementByName(): exemple4
88
getElementByName(): exemple4
89
Document.write()
write(): La méthode write() permet d'écrire la chaîne de
caractères passée en paramètre directement dans le document.
writeln(): La méthode writeln() permet d'écrire dans le
document en ajoutant un retour à la ligne.
Note : Appeler document.write sur un document fermé
(chargé) efface le document.
s'exécute là où il est rencontré: elle ne peut pas injecter
du contenu.
De plus en plus, considérée comme une mauvaise pratique.
90
Document.write()
91
Document.write()
92
innerHTML: exemple5
93
innerHTML: exemple5
94
innerHTML: exemple6
95
innerHTML: exemple6
96
innerHTML: exemple7
97
innerHTML: exemple7
98
innerHTML: exemple7
99
innerHTML: exemple7
100
innerHTML: exemple7
101
innerHTML: exemple7
102
.createElement()
103
appendChild
104
appendChild()
105
.appendChild()
106
.appendChild()
107
.appendChild()
108
.appendChild()
109
.appendChild()
110
.appendChild()
111
.appendChild()
112
.appendChild()
113
LOGO
114