LOGO

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)

le JavaScript est un langage orienté objet.

Le JavaScript met à notre disposition des objets natifs,
c'est-à-dire des objets directement utilisables.
Number: l'objet qui gère les nombres ;
Boolean: l'objet qui gère les booléens ;
String: l'objet qui gère les chaînes de caractères.
Outre les objets natifs, le JavaScript nous permet de
fabriquer nos propres objets.

43
 Introduction aux objets (2/2)

Les objets en JavaScript vont contenir des propriétés et

méthodes.
 Une propriété est une variable contenue dans l'objet,
elle contient des informations nécessaires au
fonctionnement de l'objet.
 Une méthode est une fonction contenue dans l'objet, et
qui permet de réaliser des opérations sur le contenu de
l'objet.

44
 L’objet: tableau

Un tableau, ou plutôt un array en anglais, est une

variable qui contient plusieurs valeurs, appelées items.
Chaque item est accessible au moyen d'un indice (index
en anglais) et dont la numérotation commence à partir
de 0.

45
 Déclaration d'un tableau

Première méthode:

un tableau peut accueillir des éléments de types

différents.
new signifie que l'on veut créer un nouveau objet.

46
 Deuxième méthode:

Ici l'initialisation des indexes est faite en une seule instruction.

Deux crochets renferment les trois valeurs. La première valeur
est implicitement indexée par 0, la deuxième par 1 et la
troisième par 2.
47
 Troisième méthode:

Dans ce cas, nous avons déclaré une seule instruction qui

permet de créer l'objet tableau et l'initialiser par les valeurs
passées entre les parenthèses. Là encore, les indexes sont
implicites. Ils commencent de 0 et s'incrémentent à chaque
nouvel élément déclaré.

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 :

modifier le contenu d'un item du tableau :

49
 Tableau à plusieurs dimensions
Il est possible de créer un tableau à plusieurs dimensions.

ou

ou

50
 Tableau à plusieurs dimensions

Pour appeler la première colonne de la première ligne

(la valeur "Entreprise A") on fait appel à tab[0][0]. Le
premier crochet contient l'indice de la ligne et le
deuxième l'indice de la colonne.
51
Parcourir un tableau avec for

52
 Parcourir un tableau avec for

Propriété « length » qui désigne le nombres d’éléments du tableau

53
 Parcourir un tableau avec for

le bloc de condition, s’exécute à chaque itération.

ça veut dire que myArray.length est recalculé à chaque
itération, ce qui, va ralentir la boucle.

54
 Les méthodes des tableaux: sort()

sort() : Cette méthode retourne le tableau dont les

éléments sont triés dans l'ordre alphanumérique
croissant.

55
 Les méthodes des tableaux: reverse()

reverse() : inverse l’ordre des éléments sans les trier.

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

push(element1,…) : ajoute l(es) élément(s) passé(s) en

paramètres à la fin du tableau.

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:

pop() : La méthode pop() supprime le dernier élément

d'un tableau et retourne cet élément.

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:

splice(début, nombre, éléments): supprime les éléments à

partir de la position début et sur nombre de position. les
éléments sont remplacés par ceux fournies en paramètres (
facultatif)

63
 Tableaux associatifs

Dans nombre d’autres langages informatique (dont le

PhP, par exemple), on peut créer des tableaux en
choisissant d’attribuer une clef textuelle à chaque
nouvelle valeur.
On appelle ces tableaux des tableaux associatifs.
En JavaScript, ce type de tableau n’existe pas.

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

La méthode substring() retourne une sous-chaîne de la

chaîne courante, entre un [indice de début, un indice de
fin[.

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

 Document Object Model: Représentation du document HTML à base

d’objets.
 C’est une API de programmation (c.-à-d. est un ensemble de classes,
de méthodes ou de fonctions qui sert de façade par laquelle un logiciel
offre des services à d'autres logiciels.)
 Le DOM est une interface que l’on peut utiliser pour manipuler le code
HTML dynamiquement en utilisant Javascript, php ou autre.
 Accéder aux éléments HTML (à leurs propriétés, leurs contenus,…).
 Modifier les différentes parties d’un document HTML (supprimer
des éléments existants, ajouter de nouveaux éléments,…).

75
 DOM

 Le Document Object Model d’une page web est créé

automatiquement par le navigateur lors du chargement de la
page.
 Le DOM HTML considère les éléments HTML comme des
objets. Ainsi, nos éléments HTML vont posséder des propriétés
et des méthodes.
 L’objet prédéfini document représente tout le document HTML

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!

Lorsque le navigateur charge la page, il lit le code HTML et

génère les objets DOM à partir de celui-ci.
Pour les éléments, la plupart des attributs HTML standard
deviennent automatiquement les propriétés des objets DOM.
Par exemple, si la balise est <body id = "page">, l'objet DOM
a alors body.id = "page".
 Mais le mappage propriété-attribut n'est pas un-à-un!

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

This is the end.

114