1
00:00:00,000 --> 00:00:04,439

2
00:00:04,439 --> 00:00:07,230
DOUG LLOYD: Dans cette vidéo, nous avons voulu
d'appeler l'attention séparée

3
00:00:07,230 --> 00:00:09,110
à un très particulière
élément de JavaScript

4
00:00:09,110 --> 00:00:11,350
que vous pourriez trouver à portée de main
quand vous commencez

5
00:00:11,350 --> 00:00:15,750
de travailler sur la manipulation de pages web et de
modifier le contenu de votre page web

6
00:00:15,750 --> 00:00:16,460
à la volée.

7
00:00:16,460 --> 00:00:19,450
Et voilà la notion de
le Document Object Model.

8
00:00:19,450 --> 00:00:23,030
Donc, comme nous l'avons vu dans notre vidéo
JavaScript, les objets sont très flexibles.

9
00:00:23,030 --> 00:00:24,750
>> Et ils peuvent contenir divers domaines.

10
00:00:24,750 --> 00:00:28,075
Et si nous ne sommes pas allés dans un grand nombre de
détail, ces champs ou propriétés,

11
00:00:28,075 --> 00:00:30,200
que nous serions probablement plus
les appeler de manière appropriée

12
00:00:30,200 --> 00:00:33,915
dans le contexte d'un objet, même
ces propriétés peuvent être d'autres objets.

13
00:00:33,915 --> 00:00:36,210
Et à l'intérieur de ces objets
peut-être d'autres objets.

14
00:00:36,210 --> 00:00:39,630
>> Vous avez cette objet très grand
avec beaucoup d'autres objets

15
00:00:39,630 --> 00:00:43,550
à l'intérieur de celui-ci, qui sorte de
crée cette idée d'un grand arbre.

16
00:00:43,550 --> 00:00:47,540
Maintenant, l'objet document est un
objet très spécial en JavaScript

17
00:00:47,540 --> 00:00:52,580
qui organise l'ensemble de votre web
page sous cette sorte de parapluie

18
00:00:52,580 --> 00:00:53,470
d'un objet.

19
00:00:53,470 --> 00:00:56,770
Et si l'intérieur du document
objet sont des objets présentant

20
00:00:56,770 --> 00:00:59,630
la tête et le corps de votre page Web.

21
00:00:59,630 --> 00:01:03,760
>> A l'intérieur de ceux autre sont
objets, et cetera, et cetera,

22
00:01:03,760 --> 00:01:08,411
jusqu'à ce que votre page Web entière a
été organisée dans ce gros objet.

23
00:01:08,411 --> 00:01:09,660
Quelle est la tête ici, non?

24
00:01:09,660 --> 00:01:12,170
Eh bien, nous savons comment travailler
avec des objets en JavaScript.

25
00:01:12,170 --> 00:01:15,840
>> Donc, si nous avons un objet qui
se réfère à notre page Web entière, que

26
00:01:15,840 --> 00:01:19,590
signifie en appelant la bonne
méthodes pour manipuler cet objet

27
00:01:19,590 --> 00:01:22,360
ou de modifier certaines
de ses propriétés, nous

28
00:01:22,360 --> 00:01:25,500
peut changer les éléments de
notre page programmation

29
00:01:25,500 --> 00:01:30,210
l'utilisation de JavaScript au lieu d'avoir
pour coder des choses avec, disons, HTML.

30
00:01:30,210 --> 00:01:33,760
Alors, voici un exemple de
très simple page web, non?

31
00:01:33,760 --> 00:01:35,850
Il est obtenu balises HTML, une tête.

32
00:01:35,850 --> 00:01:37,979
>> À l'intérieur de là est un titre, bonjour monde.

33
00:01:37,979 --> 00:01:38,770
Je dois ensuite un corps.

34
00:01:38,770 --> 00:01:40,686
À l'intérieur de cela, je dois
trois choses différentes.

35
00:01:40,686 --> 00:01:44,170
Je dois une balise d'en-tête h2,
un paragraphe, et un lien.

36
00:01:44,170 --> 00:01:45,920
Ceci est une page web très simple.

37
00:01:45,920 --> 00:01:48,590
>> Eh bien, ce qui pourrait le document
l'objet de cette ressemble?

38
00:01:48,590 --> 00:01:50,700
Eh bien, il est un peu
effrayant peut-être au premier abord.

39
00:01:50,700 --> 00:01:52,510
Mais il est vraiment juste un grand arbre.

40
00:01:52,510 --> 00:01:54,890
Et à la racine même de celui-ci est le document.

41
00:01:54,890 --> 00:02:00,030
>> A l'intérieur du document est un autre
se référant à l'objet de ma page HTML.

42
00:02:00,030 --> 00:02:02,660
Et le code HTML de ma page est tout cela.

43
00:02:02,660 --> 00:02:06,900
Et puis à l'intérieur de l'HTML
objet, je dois un objet de la tête,

44
00:02:06,900 --> 00:02:09,000
qui se réfère à tout ce qu'il ya.

45
00:02:09,000 --> 00:02:11,009
>> Et à l'intérieur de là,
Je dois un objet de titre.

46
00:02:11,009 --> 00:02:15,620
Et à l'intérieur de là, je dois autre
objet qui est juste bonjour monde.

47
00:02:15,620 --> 00:02:18,020
Je pourrais avoir mon corps
représenté comme ça.

48
00:02:18,020 --> 00:02:22,850
>> A l'intérieur de mon corps, je dois un h2
objet et un objet de p pour le paragraphe

49
00:02:22,850 --> 00:02:25,270
et une un objet pour un lien.

50
00:02:25,270 --> 00:02:29,660
Et si toute cette hiérarchie
peut être représenté comme un grand arbre

51
00:02:29,660 --> 00:02:31,990
avec beaucoup de petit peu
des choses sortant de lui.

52
00:02:31,990 --> 00:02:33,740
Maintenant, bien sûr, quand
nous programmation, nous

53
00:02:33,740 --> 00:02:35,560
ne pas penser à des choses comme un grand arbre.

54
00:02:35,560 --> 00:02:37,980
Nous voulons voir réelle
Les codes choses liées.

55
00:02:37,980 --> 00:02:40,790
>> Et heureusement, nous pouvons
utiliser nos outils de développement

56
00:02:40,790 --> 00:02:46,080
de prendre effectivement un oeil à
document de l'objet de ce site.

57
00:02:46,080 --> 00:02:48,150
Et nous allons le faire.

58
00:02:48,150 --> 00:02:49,580
Donc, je l'ai ouvert un onglet de navigateur.

59
00:02:49,580 --> 00:02:51,540
>> Et je ai ouvert Developer Tools.

60
00:02:51,540 --> 00:02:54,460
Et dans ma vidéo sur JavaScript, je
a mentionné que la console est pas

61
00:02:54,460 --> 00:02:56,770
seulement un endroit où
nous imprimons informations,

62
00:02:56,770 --> 00:02:59,560
il est aussi un lieu où
nous pouvons informations d'entrée.

63
00:02:59,560 --> 00:03:01,380
Dans ce contexte, ce que
Je vais dire est

64
00:03:01,380 --> 00:03:05,720
Je voudrais revenir
les objets de document,

65
00:03:05,720 --> 00:03:07,502
afin que je puisse commencer à avoir un regard sur elle.

66
00:03:07,502 --> 00:03:08,460
Alors, comment pourrais-je faire cela?

67
00:03:08,460 --> 00:03:10,740
Eh bien, si je veux
organiser vraiment bien,

68
00:03:10,740 --> 00:03:16,317
Je vais dire console.dir, D-I-R.
Maintenant, je me sers console.log juste impression

69
00:03:16,317 --> 00:03:17,400
quelque chose de très simple.

70
00:03:17,400 --> 00:03:20,450
Mais si je veux organiser cette
hiérarchiquement comme un objet,

71
00:03:20,450 --> 00:03:23,800
Je veux que ce genre de structure
comme une structure de répertoire.

72
00:03:23,800 --> 00:03:27,400
>> Je tiens donc à console.dir document.

73
00:03:27,400 --> 00:03:28,430
Je vais appuyez sur Entrée.

74
00:03:28,430 --> 00:03:32,350
Et juste en dessous de maintenant,
et je zoome ici,

75
00:03:32,350 --> 00:03:36,000
Je dois ce document de réponse
avec une petite flèche à côté de lui.

76
00:03:36,000 --> 00:03:39,470
Maintenant, quand je l'ouvre cette flèche,
il va y avoir beaucoup de choses.

77
00:03:39,470 --> 00:03:42,560
>> Mais nous allons ignorer beaucoup
de celui-ci et juste sorte de mise au point

78
00:03:42,560 --> 00:03:46,250
sur la partie la plus importante, donc nous
peut commencer à naviguer dans ce document.

79
00:03:46,250 --> 00:03:50,125
Il ya beaucoup plus à l'DOM que
nœuds et nœuds enfants tout parent.

80
00:03:50,125 --> 00:03:51,500
Il ya beaucoup de choses accessoire.

81
00:03:51,500 --> 00:03:52,280
>> Donc, je vais ouvrir cette place.

82
00:03:52,280 --> 00:03:54,610
Et il ya tout un tas
de trucs qui surgit.

83
00:03:54,610 --> 00:03:59,000
Mais tout ce que je me soucie est
ici, les nœuds enfants.

84
00:03:59,000 --> 00:04:00,410
Ouvrons cela.

85
00:04:00,410 --> 00:04:03,810
>> À l'intérieur de là je vois
quelque chose de familier, HTML.

86
00:04:03,810 --> 00:04:07,670
Donc, à l'intérieur de notre document
un niveau plus bas, HTML.

87
00:04:07,670 --> 00:04:08,550
Je ouvre cela.

88
00:04:08,550 --> 00:04:10,380
Qu'attendons-nous?

89
00:04:10,380 --> 00:04:13,760
>> Si vous vous souvenez de notre schéma,
que devons-nous trouver à l'intérieur du HTML?

90
00:04:13,760 --> 00:04:17,275
Quelles sont les deux nœuds ci-dessous dans l'arborescence?

91
00:04:17,275 --> 00:04:17,899
Allons le découvrir.

92
00:04:17,899 --> 00:04:18,940
Nous ouvrons HTML.

93
00:04:18,940 --> 00:04:22,079
Nous descendons à ses nœuds enfants.

94
00:04:22,079 --> 00:04:23,440
>> Pop That ouverte.

95
00:04:23,440 --> 00:04:25,990
Il ya la tête et le corps.

96
00:04:25,990 --> 00:04:28,540
Et nous pouvons ouvrir la tête.

97
00:04:28,540 --> 00:04:30,460
Allez à ses nœuds enfants.

98
00:04:30,460 --> 00:04:31,460
Eh bien, il ya le titre.

99
00:04:31,460 --> 00:04:33,293
>> Et nous pourrions continuer
comme ça pour toujours.

100
00:04:33,293 --> 00:04:34,770
Nous pourrions le faire avec le corps ainsi.

101
00:04:34,770 --> 00:04:40,090
Mais il est une façon pour nous de regarder
le document organisé comme un gros objet.

102
00:04:40,090 --> 00:04:42,610
Et si nous regardons est un grand
objet qui ressemble beaucoup

103
00:04:42,610 --> 00:04:47,480
comme le code, ce qui signifie que nous pouvons commencer
pour manipuler ce grand objet en utilisant

104
00:04:47,480 --> 00:04:51,220
code pour changer ce que notre
site ressemble et se sent.

105
00:04:51,220 --> 00:04:54,920
>> Voilà donc un outil très puissant
nous avons à notre disposition aujourd'hui.

106
00:04:54,920 --> 00:04:57,360
Donc, comme nous venons de le voir, la
le document objet lui-même

107
00:04:57,360 --> 00:05:01,392
et tous les objets à l'intérieur de celui-ci
avoir des propriétés et méthodes, juste

108
00:05:01,392 --> 00:05:04,100
comme tout autre objet que nous avons
travaille avec JavaScript.

109
00:05:04,100 --> 00:05:08,370
Mais nous pouvons utiliser ces propriétés et
utiliser ces méthodes pour sorte de forer vers le bas

110
00:05:08,370 --> 00:05:10,900
du gros document et obtenir
inférieur et plus bas,

111
00:05:10,900 --> 00:05:13,360
plus en plus fines grains
de détail, jusqu'à ce que nous

112
00:05:13,360 --> 00:05:17,510
arriver à un morceau très spécifique de notre
page web que nous voulons changer.

113
00:05:17,510 --> 00:05:22,700
>> Et quand nous mettons à jour les propriétés de la
Document Object ou appelez ces méthodes,

114
00:05:22,700 --> 00:05:24,450
les choses pourraient se produire sur notre page web.

115
00:05:24,450 --> 00:05:28,420
Et nous ne devons faire tout rafraîchissante
d'avoir ces modifications prennent effet.

116
00:05:28,420 --> 00:05:33,160
>> Et cela est une possibilité assez cool à
avoir quand nous travaillons avec le code.

117
00:05:33,160 --> 00:05:37,185
Alors, quelles sont certaines de ces propriétés
qui font partie d'un objet de document?

118
00:05:37,185 --> 00:05:40,100
Eh bien, vous avez probablement vu un
deux d'entre eux très rapidement

119
00:05:40,100 --> 00:05:42,700
comme nous étions Zipping
à travers le document géant

120
00:05:42,700 --> 00:05:45,150
objet nous venons de voir dans le navigateur Web.

121
00:05:45,150 --> 00:05:48,420
>> Mais un couple de ces propriétés
pourraient être des choses comme HTML intérieure.

122
00:05:48,420 --> 00:05:52,950
Et vous pourriez même me rappeler
utiliser ce dans la vidéo JavaScript

123
00:05:52,950 --> 00:05:54,950
à la fin quand je
a été de parler des événements.

124
00:05:54,950 --> 00:05:56,125
Quelle était cette HTML intérieure?

125
00:05:56,125 --> 00:05:59,030
Eh bien, il est juste ce qui est
entre les balises.

126
00:05:59,030 --> 00:06:01,590
>> Et si le code HTML intérieure,
par exemple, le titre de

127
00:06:01,590 --> 00:06:05,390
tag, si nous avions continué à aller dans
cet exemple il ya un instant,

128
00:06:05,390 --> 00:06:08,020
aurait été Bonjour tout le monde.

129
00:06:08,020 --> 00:06:10,140
Ce fut le titre de notre page.

130
00:06:10,140 --> 00:06:12,370
Autres propriétés
inclure le nom de noeud, qui

131
00:06:12,370 --> 00:06:15,810
est le nom d'un fichier HTML
élément tel titre.

132
00:06:15,810 --> 00:06:19,100
ID, qui correspond à l'ID
attribut d'un élément HTML.

133
00:06:19,100 --> 00:06:23,790
>> Rappelons que nous pouvons spécialement indiquer
éléments spécifiques de notre HTML

134
00:06:23,790 --> 00:06:27,510
avec un attribut ID, qui habituellement
est très pratique dans le contexte de CSS,

135
00:06:27,510 --> 00:06:29,000
spécifiquement.

136
00:06:29,000 --> 00:06:33,217
Nœud parent, qui est une référence à
ce qui est juste au-dessus de moi dans les DOM.

137
00:06:33,217 --> 00:06:35,800
Et nœuds enfants, qui est un
référence à ce qui est en dessous de moi.

138
00:06:35,800 --> 00:06:37,950
Et nous avons vu beaucoup de cette
juste en regardant à travers.

139
00:06:37,950 --> 00:06:42,970
Les noeuds enfants, voilà comment nous sommes arrivés
plus en plus bas dans l'arbre.

140
00:06:42,970 --> 00:06:46,590
>> Attributs, qui est juste un tableau
des attributs de l'élément HTML.

141
00:06:46,590 --> 00:06:50,270
Donc, un exemple d'attributs pourrait
être si vous avez une balise d'image,

142
00:06:50,270 --> 00:06:54,090
il a généralement un attribut de source,
peut-être d'une hauteur et une largeur attribut.

143
00:06:54,090 --> 00:06:57,120
Et pour que serait juste un tableau
de tous les attributs associés

144
00:06:57,120 --> 00:06:59,300
avec cet élément HTML.

145
00:06:59,300 --> 00:07:04,140
>> Le style est un autre qui
ne représenter le CSS

146
00:07:04,140 --> 00:07:06,050
style d'un élément particulier.

147
00:07:06,050 --> 00:07:08,310
Et plus tard dans ce
vidéo, nous allons spécifiquement

148
00:07:08,310 --> 00:07:14,592
le style de levier pour faire un couple
des modifications de notre site web.

149
00:07:14,592 --> 00:07:15,800
Donc, ce sont certaines propriétés.

150
00:07:15,800 --> 00:07:17,591
>> Et il ya aussi certains
méthodes que nous pouvons

151
00:07:17,591 --> 00:07:22,450
utiliser pour aussi plus rapidement peut-être isoler
éléments de l'objet document.

152
00:07:22,450 --> 00:07:26,730
Peut-être, le plus polyvalent
d'entre eux étant getElementById.

153
00:07:26,730 --> 00:07:31,190
Donc je pourrais dire quelque chose comme, parce
rappelez-vous qu'il est une méthode du Document

154
00:07:31,190 --> 00:07:34,880
Objet, document.getElementById.

155
00:07:34,880 --> 00:07:39,820
>> Et à l'intérieur de ces parenthèses, spécifiez
un élément HTML avec un ID particulier

156
00:07:39,820 --> 00:07:42,330
attribue que je l'ai déjà
fixer, et je vais immédiatement

157
00:07:42,330 --> 00:07:46,685
aller à droite à cet élément
du site Web en général.

158
00:07:46,685 --> 00:07:49,310
Donc, je ne dois peut-être percer
à travers tous les simple couche.

159
00:07:49,310 --> 00:07:52,841
Je peux juste utiliser cette méthode pour trouver,
comme une sorte de recherche de chaleur missiles,

160
00:07:52,841 --> 00:07:53,340
droit?

161
00:07:53,340 --> 00:07:56,300
Il va juste et trouve
exactement ce qu'il cherche.

162
00:07:56,300 --> 00:07:59,290
>> GetElementsByTagName est
très similaire dans l'esprit.

163
00:07:59,290 --> 00:08:02,500
Peut-être que ce serait trouver tous les
les balises gras ou toutes les balises p

164
00:08:02,500 --> 00:08:05,920
et me donner un tableau de tout
que je pouvais ensuite travailler avec.

165
00:08:05,920 --> 00:08:12,080
appendChild ajoute quelque chose
un niveau plus bas dans l'arbre.

166
00:08:12,080 --> 00:08:16,440
>> Donc, je peux ajouter une toute nouvelle
élément inférieur d'un niveau.

167
00:08:16,440 --> 00:08:19,700
Ou je peux supprimer un élément qui est
un niveau inférieur ainsi si je veux

168
00:08:19,700 --> 00:08:22,870
pour supprimer quelque chose de ma page web.

169
00:08:22,870 --> 00:08:28,480
Maintenant, une note de codage rapide et un rapide
maux de tête Sauvegarde de la remarque, je l'espère.

170
00:08:28,480 --> 00:08:31,670
>> getElementById-- D est en minuscules.

171
00:08:31,670 --> 00:08:36,950
Je ne peux pas vous dire combien de fois je dois
utilisé getElementById et capitalisés

172
00:08:36,950 --> 00:08:38,336
la d il.

173
00:08:38,336 --> 00:08:39,460
Parce qu'il est vraiment commun.

174
00:08:39,460 --> 00:08:42,990
Si nous écrivons le mot ID, il est
habituellement I majuscule capitale D.

175
00:08:42,990 --> 00:08:44,240
Et mon code ne fonctionne tout simplement pas.

176
00:08:44,240 --> 00:08:45,630
Et je ne peux pas comprendre pourquoi.

177
00:08:45,630 --> 00:08:49,490
Ceci est vraiment, vraiment, vraiment
bug commun que tout le monde fait,

178
00:08:49,490 --> 00:08:51,890
même les experts qui ont
fait cela pour toujours.

179
00:08:51,890 --> 00:08:55,410
Donc juste être conscient, getElementById,
que d est minuscule.

180
00:08:55,410 --> 00:09:00,080
Et nous espérons, qui vous fait gagner plusieurs
minutes à moins de chagrin.

181
00:09:00,080 --> 00:09:02,204
>> Alors qu'est-ce que tout cela nous dit?

182
00:09:02,204 --> 00:09:03,120
Nous avons ces méthodes.

183
00:09:03,120 --> 00:09:04,161
Nous avons ces propriétés.

184
00:09:04,161 --> 00:09:06,610
Maintenant, si nous partons de
document document.

185
00:09:06,610 --> 00:09:10,220
que ce soit, nous pouvons maintenant obtenir à tout
seule pièce de notre page Web

186
00:09:10,220 --> 00:09:14,870
que nous voulons l'aide de JavaScript
tout en appelant ces méthodes

187
00:09:14,870 --> 00:09:19,940
et en tirant parti des propriétés
que l'on retrouve à divers endroits.

188
00:09:19,940 --> 00:09:24,890
>> Cela peut devenir verbeux, ce
document.getElementById,

189
00:09:24,890 --> 00:09:28,560
peut-être avoir un nom de tag de long,
peut-être vous faire plus d'appels plus tard.

190
00:09:28,560 --> 00:09:31,230
Les choses peuvent devenir un peu verbeux.

191
00:09:31,230 --> 00:09:34,480
Et en tant que programmeurs, comme vous l'avez
probablement vu dans beaucoup de ces vidéos,

192
00:09:34,480 --> 00:09:36,600
nous ne aimons les choses verbeuses.

193
00:09:36,600 --> 00:09:38,520
>> Nous aimons être en mesure de faire les choses rapidement.

194
00:09:38,520 --> 00:09:42,640
Donc, nous aimerions une plus
de manière concise pour dire quelque chose.

195
00:09:42,640 --> 00:09:46,270
Donc, ce genre de conduit à la
notion de quelque chose appelé jQuery.

196
00:09:46,270 --> 00:09:49,170
Maintenant jQuery est pas JavaScript.

197
00:09:49,170 --> 00:09:50,350
Il ne fait pas partie de JavaScript.

198
00:09:50,350 --> 00:09:54,790
>> Il est une bibliothèque qui a été écrit
par certains programmeurs JavaScript

199
00:09:54,790 --> 00:09:57,060
Il ya environ 10 ans.

200
00:09:57,060 --> 00:10:01,300
Et son objectif est de simplifier ce ce qui est
appelé script côté client, qui

201
00:10:01,300 --> 00:10:04,310
est essentiellement ce que nous étions juste
parler avec des manipulations DOM.

202
00:10:04,310 --> 00:10:11,090
Et si je voulais modifier le
couleur de ma page web de fond, peut-être

203
00:10:11,090 --> 00:10:11,980
a Div spécifique.

204
00:10:11,980 --> 00:10:15,325
>> Ici, je suis apparemment obtenir
ElementById colorDiv.

205
00:10:15,325 --> 00:10:16,950
Et je tiens à mettre sa couleur de fond.

206
00:10:16,950 --> 00:10:20,720
Si je suis juste en utilisant JavaScript pur
utilisant le Document Object Model,

207
00:10:20,720 --> 00:10:23,990
ça fait beaucoup de choses, non?
document.getElementById

208
00:10:23,990 --> 00:10:25,531
colorDiv.style.backgroundColor = vert.

209
00:10:25,531 --> 00:10:27,260

210
00:10:27,260 --> 00:10:28,050
>> Ouf.

211
00:10:28,050 --> 00:10:30,110
Ce fut beaucoup à dire.

212
00:10:30,110 --> 00:10:31,720
Il ya beaucoup à saisir, aussi.

213
00:10:31,720 --> 00:10:35,760
Et donc dans jQuery, nous pouvons peut-être dire
ce un peu plus concise.

214
00:10:35,760 --> 00:10:39,350
Le compromis étant il est peut-être un peu
peu plus cryptique tout d'un coup,

215
00:10:39,350 --> 00:10:39,850
droit?

216
00:10:39,850 --> 00:10:43,580
>> Au moins long est un peu plus
explicatifs à ce que nous faisons.

217
00:10:43,580 --> 00:10:49,947
Ce signe de dollar, entre parenthèses,
apostrophe, hachage, colorDiv, non?

218
00:10:49,947 --> 00:10:50,780
Qu'est-ce que cela veut dire?

219
00:10:50,780 --> 00:10:53,640
Eh bien, voilà fondamentalement juste
document.getElementById colorDiv.

220
00:10:53,640 --> 00:10:58,700
>> Mais il est ce genre de raccourci
façon de le faire en utilisant jQuery.

221
00:10:58,700 --> 00:11:01,380
Prenons juste un coup d'oeil maintenant
à un couple de différentes façons

222
00:11:01,380 --> 00:11:04,520
que je pourrait en fait
utiliser ce Document Object

223
00:11:04,520 --> 00:11:06,807
Modèle de manipuler des morceaux de mon site.

224
00:11:06,807 --> 00:11:09,140
En particulier, nous allons
de travailler sur la manipulation

225
00:11:09,140 --> 00:11:14,090
la couleur d'un particulier
Div, colorDiv, sur une page Web.

226
00:11:14,090 --> 00:11:15,299
Donc, nous allons jeter un coup d'oeil.

227
00:11:15,299 --> 00:11:15,798
Bien.

228
00:11:15,798 --> 00:11:16,700
Donc, je suis sur une page.

229
00:11:16,700 --> 00:11:20,750
Il a appelé test.html lorsque vous téléchargez
si vous voulez bricoler avec cela.

230
00:11:20,750 --> 00:11:24,730
Et je ai un tas de
boutons sur cette page.

231
00:11:24,730 --> 00:11:27,730
Et je dis fonctions individuelles
pour la couleur de fond, violet, vert,

232
00:11:27,730 --> 00:11:31,330
orange, rouge, bleu, une seule fonction
pour la couleur de fond, gestionnaire d'événements

233
00:11:31,330 --> 00:11:34,360
pour la couleur de fond, et l'utilisation de jQuery.

234
00:11:34,360 --> 00:11:38,147
Qu'est-ce que je parle
quand je fais cela?

235
00:11:38,147 --> 00:11:39,230
Donc, nous avons vu les boutons.

236
00:11:39,230 --> 00:11:41,521
Maintenant, nous allons jeter un oeil à
une partie du code source ici.

237
00:11:41,521 --> 00:11:44,770
Nous allons commencer avec test.html.

238
00:11:44,770 --> 00:11:48,100
Donc fonctions individuelles pour le fond
la couleur est ce que je l'ai tapé ici.

239
00:11:48,100 --> 00:11:49,350
Permettez-moi de faire défiler un peu.

240
00:11:49,350 --> 00:11:56,170

241
00:11:56,170 --> 00:11:58,820
>> Et vous remarquerez que je
ont défini ces boutons

242
00:11:58,820 --> 00:12:03,990
à-dire lorsque ce bouton est cliqué,
appeler la fonction devient mauve.

243
00:12:03,990 --> 00:12:06,670
Lorsque ce bouton est cliquez plutôt,
appeler la fonction devient vert,

244
00:12:06,670 --> 00:12:08,710
virer à l'orange, au rouge, virer au bleu.

245
00:12:08,710 --> 00:12:11,880
Vous pouvez probablement le deviner que cette
est peut-être pas le meilleur design

246
00:12:11,880 --> 00:12:12,460
logique, non?

247
00:12:12,460 --> 00:12:16,490
>> Ce serait bien si je pouvais
avoir une approche plus générale.

248
00:12:16,490 --> 00:12:19,570
Eh bien, d'abord, nous allons jeter un oeil
à ce que ces cinq fonctions sont

249
00:12:19,570 --> 00:12:24,400
document.getElementById
colorDiv.style.background = violet,

250
00:12:24,400 --> 00:12:27,250
vert, orange, rouge,
et bleu, respectivement.

251
00:12:27,250 --> 00:12:30,930
Donc, pas particulièrement la meilleure conception.

252
00:12:30,930 --> 00:12:33,390
>> La prochaine série de boutons
Je l'ai est que je l'ai écrite

253
00:12:33,390 --> 00:12:36,380
une fonction unique appelée
changer de couleur qui, apparemment,

254
00:12:36,380 --> 00:12:38,960
accepte une chaîne comme argument.

255
00:12:38,960 --> 00:12:40,290
Donc, cela est un peu mieux.

256
00:12:40,290 --> 00:12:43,840
Violet, vert, orange, rouge,
bleu est à présent un argument.

257
00:12:43,840 --> 00:12:46,230
Donc, je l'ai écrit plus générale
cas fonction JavaScript,

258
00:12:46,230 --> 00:12:47,771
ce qui pourrait ressembler à ceci.

259
00:12:47,771 --> 00:12:48,680
Je suis de passage à.

260
00:12:48,680 --> 00:12:52,090
Cette couleur de changement de fonction est
attend un argument appelé couleur.

261
00:12:52,090 --> 00:12:54,970
Et je dis régler la
couleur de fond à la couleur.

262
00:12:54,970 --> 00:12:58,390
Alors, voici ce que je représente ai ici.

263
00:12:58,390 --> 00:12:59,770
Voilà donc un peu mieux.

264
00:12:59,770 --> 00:13:02,740
>> Mais je pourrais être capable de
faire mieux que cela.

265
00:13:02,740 --> 00:13:06,140
Si nous descendons de prendre un coup d'oeil
à la situation de gestionnaire d'événement,

266
00:13:06,140 --> 00:13:07,860
maintenant tous ces appels se ressemblent.

267
00:13:07,860 --> 00:13:10,340
Si vous vous souvenez de notre
discussion sur les gestionnaires d'événements,

268
00:13:10,340 --> 00:13:15,770
Je peux obtenir des informations sur lequel des
ces boutons a été cliqué et l'utiliser.

269
00:13:15,770 --> 00:13:19,560
>> Et donc dans event.JavaScript, je l'ai
écrite événement changement de couleur, qui

270
00:13:19,560 --> 00:13:21,110
devinera quel bouton a été cliqué.

271
00:13:21,110 --> 00:13:23,250
Voilà la ligne d'objet de déclenchement.

272
00:13:23,250 --> 00:13:25,240
Et puis ici, ça devient vraiment verbeuse.

273
00:13:25,240 --> 00:13:27,420
Mais ce que je fais est que je suis
la mise en arrière-plan

274
00:13:27,420 --> 00:13:30,340
couleur à triggerObject inner.HTML.

275
00:13:30,340 --> 00:13:34,170
Voilà le texte
entre les balises de bouton.

276
00:13:34,170 --> 00:13:36,500
>> Et puis je dois apparemment
de mettre en minuscules.

277
00:13:36,500 --> 00:13:40,780
Et voilà comment je peux convertir un ensemble
chaîne en minuscules en utilisant JavaScript

278
00:13:40,780 --> 00:13:42,940
cette méthode en minuscules.

279
00:13:42,940 --> 00:13:46,570
Parce que quand je mets une couleur,
comme je suis en train de faire ici,

280
00:13:46,570 --> 00:13:48,260
la couleur doit être en minuscules.

281
00:13:48,260 --> 00:13:50,920
>> Mais sur le bouton que je devais,
si nous prenons un autre regard,

282
00:13:50,920 --> 00:13:55,890
Notez que le texte il ya
écrit avec un P majuscule pour le pourpre.

283
00:13:55,890 --> 00:13:59,140
Et puis à la très
en bas ici, je apparemment

284
00:13:59,140 --> 00:14:02,630
essayer de le faire en utilisant jQuery ainsi.

285
00:14:02,630 --> 00:14:06,000
Et dans ce cas, je ne suis pas fait
appel d'une fonction à tous.

286
00:14:06,000 --> 00:14:11,430
Je viens de dire la classe que je suis
en utilisant pour ce bouton est un bouton jQ.

287
00:14:11,430 --> 00:14:12,360
C'est tout.

288
00:14:12,360 --> 00:14:14,950
>> Alors, comment ne jQuery sais ce que je fais?

289
00:14:14,950 --> 00:14:18,740
Eh bien, cela est l'un des avantages
réduire les inconvénients de jQuery.

290
00:14:18,740 --> 00:14:21,560
Il peut me permettre de faire les choses
de façon très concise, mais peut-être pas

291
00:14:21,560 --> 00:14:22,570
intuitivement.

292
00:14:22,570 --> 00:14:25,570
Peut-être que ceux des trois autres font une
peu plus de sens ce que je fais.

293
00:14:25,570 --> 00:14:29,010
Ici, cependant, ce qui se passe?

294
00:14:29,010 --> 00:14:31,940
>> Apparemment, créant
une fonction anonyme

295
00:14:31,940 --> 00:14:36,790
chaque fois que les charges mon document
est prête, document.ready,

296
00:14:36,790 --> 00:14:38,760
une fonction qui va se passer.

297
00:14:38,760 --> 00:14:40,490
En gros, quand un document est prêt?

298
00:14:40,490 --> 00:14:42,310
Il est quand ma page est chargée.

299
00:14:42,310 --> 00:14:46,540
>> Donc, dès que ma page est chargé, la
la fonction suivante est toujours prêt.

300
00:14:46,540 --> 00:14:54,310
Il dit, si un objet de type jQButton,
ou si jQButton de classe a été cliqué,

301
00:14:54,310 --> 00:14:55,570
exécuter cette fonction.

302
00:14:55,570 --> 00:14:59,360
Alors, voici deux des fonctions anonymes,
une défini à l'intérieur de l'autre.

303
00:14:59,360 --> 00:15:03,930
>> Donc toute ma contexte
ici est si loin ma page

304
00:15:03,930 --> 00:15:06,520
quand il le charge appelle cette fonction.

305
00:15:06,520 --> 00:15:09,740
Et cette fonction est en attente
pour un bouton à cliquer.

306
00:15:09,740 --> 00:15:14,490
Et quand un bouton est cliqué, jQ
touche spécifiquement est cliqué,

307
00:15:14,490 --> 00:15:17,150
il appelle cette autre
fonction, qui va

308
00:15:17,150 --> 00:15:21,250
pour définir l'arrière-plan
couleur de colorDiv être

309
00:15:21,250 --> 00:15:25,990
quel que soit le texte est entre les balises.

310
00:15:25,990 --> 00:15:28,050
>> Ceci est la notion de
quel bouton a été cliqué.

311
00:15:28,050 --> 00:15:31,230
Mais sinon, ce est une sorte de
comportement semblable à un événement.

312
00:15:31,230 --> 00:15:34,460
Il est juste la même manière que je
exprimerait cela dans jQuery.

313
00:15:34,460 --> 00:15:36,790
Encore une fois, il est probablement une
beaucoup plus intimidant.

314
00:15:36,790 --> 00:15:40,840
Il est pas aussi clair que
quelque chose comme event.js,

315
00:15:40,840 --> 00:15:45,080
ce qui est peut-être un peu plus
bavard, mais un peu moins

316
00:15:45,080 --> 00:15:46,000
intimidant.

317
00:15:46,000 --> 00:15:51,460
>> Mais si nous sautons en arrière sur mon navigateur
fenêtre, si je commence clicking-- bien,

318
00:15:51,460 --> 00:15:52,690
cela a changé au violet.

319
00:15:52,690 --> 00:15:54,450
Ceci est vert en utilisant la méthode de la chaîne.

320
00:15:54,450 --> 00:15:56,500
Ceci est d'orange en utilisant le gestionnaire d'événement.

321
00:15:56,500 --> 00:15:58,300
>> Ceci est rouge en utilisant jQuery, non?

322
00:15:58,300 --> 00:16:01,270
Ils comportent tous exactement la même.

323
00:16:01,270 --> 00:16:06,509
Ils font simplement à l'aide de différents
approches pour résoudre le problème.

324
00:16:06,509 --> 00:16:08,550
Il ya beaucoup plus à
jQuery alors nous sommes certainement

325
00:16:08,550 --> 00:16:10,050
allons parler dans cette vidéo.

326
00:16:10,050 --> 00:16:15,410
Mais si vous voulez en savoir plus, vous pouvez
aller à la sorte de la documentation jQuery

327
00:16:15,410 --> 00:16:19,710
et apprendre un peu plus sur
cette bibliothèque très flexible, ce qui

328
00:16:19,710 --> 00:16:22,550
est idéal pour faire côté client
script tel que ce que nous faisions

329
00:16:22,550 --> 00:16:26,240
pour manipuler le look
et se sentir de notre page Web

330
00:16:26,240 --> 00:16:28,750
avec le Document Object Model.

331
00:16:28,750 --> 00:16:29,650
Je suis Doug Lloyd.

332
00:16:29,650 --> 00:16:31,930
Ceci est CS50.

333
00:16:31,930 --> 00:16:34,022