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

2
00:00:04,439 --> 00:00:07,230
ДАГ Lloyd: У цьому відео ми хотіли
щоб викликати окремої уваги

3
00:00:07,230 --> 00:00:09,110
зокрема, дуже
елемент JavaScript

4
00:00:09,110 --> 00:00:11,350
що ви могли б знайти під рукою
коли ви починаєте

5
00:00:11,350 --> 00:00:15,750
працювати на маніпулюванні веб-сторінок і
зміни змісту веб-сторінки

6
00:00:15,750 --> 00:00:16,460
на льоту.

7
00:00:16,460 --> 00:00:19,450
І це поняття
Об'єктна модель документа.

8
00:00:19,450 --> 00:00:23,030
Отже, як ми бачили в нашому відео на
JavaScript, є дуже гнучкими.

9
00:00:23,030 --> 00:00:24,750
>> І вони можуть містити різні поля.

10
00:00:24,750 --> 00:00:28,075
І хоча ми не пішли на багато
докладно, ці поля або властивості,

11
00:00:28,075 --> 00:00:30,200
що ми, ймовірно, більш
відповідно називати їх

12
00:00:30,200 --> 00:00:33,915
в контексті об'єкта, навіть
Ці властивості можна інші об'єкти.

13
00:00:33,915 --> 00:00:36,210
А всередині цих об'єктів
можуть бути й інші об'єкти.

14
00:00:36,210 --> 00:00:39,630
>> Ви повинні це дуже великий об'єкт
з великою кількістю інших об'єктів

15
00:00:39,630 --> 00:00:43,550
всередині нього, щось
створює цю ідею великого дерева.

16
00:00:43,550 --> 00:00:47,540
Тепер, об'єкт документа є
дуже спеціальний об'єкт в JavaScript

17
00:00:47,540 --> 00:00:52,580
який організовує всю вашу мережу
сторінка під такого роду парасолькою

18
00:00:52,580 --> 00:00:53,470
об'єкта.

19
00:00:53,470 --> 00:00:56,770
І так всередині документа
об'єкт об'єкти, що представляють є

20
00:00:56,770 --> 00:00:59,630
голова і тіло вашої веб-сторінці.

21
00:00:59,630 --> 00:01:03,760
>> Усередині ті одного
об'єкти, і так далі, і так далі,

22
00:01:03,760 --> 00:01:08,411
до вся ваша веб-сторінка не має
був організований в цьому великому об'єкті.

23
00:01:08,411 --> 00:01:09,660
Що вгору тут, вірно?

24
00:01:09,660 --> 00:01:12,170
Ну, ми знаємо, як працювати
з об'єктами в JavaScript.

25
00:01:12,170 --> 00:01:15,840
>> Так що, якщо у нас є об'єкт, який
відноситься до всієї нашої веб-сторінці, що

26
00:01:15,840 --> 00:01:19,590
означає, зателефонувавши правильно
методи, щоб маніпулювати, що об'єкт

27
00:01:19,590 --> 00:01:22,360
або зміни напевно
його властивостей, ми

28
00:01:22,360 --> 00:01:25,500
може змінювати елементи
наша сторінка програмно

29
00:01:25,500 --> 00:01:30,210
за допомогою JavaScript, замість того,
кодувати речі, скажімо, HTML.

30
00:01:30,210 --> 00:01:33,760
Так ось приклад
дуже простий веб-сторінки, чи не так?

31
00:01:33,760 --> 00:01:35,850
Він отримав HTML-теги, голову.

32
00:01:35,850 --> 00:01:37,979
>> Усередині є назва, привіт світ.

33
00:01:37,979 --> 00:01:38,770
Тоді у мене є тіло.

34
00:01:38,770 --> 00:01:40,686
Всередині, що в мене є
трьох різні речі.

35
00:01:40,686 --> 00:01:44,170
У мене є тег заголовка h2,
абзац, а також посилання.

36
00:01:44,170 --> 00:01:45,920
Це дуже простий веб-сторінки.

37
00:01:45,920 --> 00:01:48,590
>> Ну, те, що документ може
об'єкт для цього виглядати?

38
00:01:48,590 --> 00:01:50,700
Ну, це трохи
страшно, може бути, в першу чергу.

39
00:01:50,700 --> 00:01:52,510
Але це насправді просто велике дерево.

40
00:01:52,510 --> 00:01:54,890
І в самому корені ній документ.

41
00:01:54,890 --> 00:02:00,030
>> Усередині документ є ще одним
Об'єкт з посиланням на HTML моїй сторінці.

42
00:02:00,030 --> 00:02:02,660
І HTML моїй сторінці все це.

43
00:02:02,660 --> 00:02:06,900
І тоді всередині HTML
об'єкт, у мене є об'єкт голову,

44
00:02:06,900 --> 00:02:09,000
який відноситься до всього там.

45
00:02:09,000 --> 00:02:11,009
>> А всередині там,
У мене є об'єкт назву.

46
00:02:11,009 --> 00:02:15,620
А всередині там, у мене є ще один
заперечити, що просто привіт світ.

47
00:02:15,620 --> 00:02:18,020
Я міг би моє тіло
представлені, як це.

48
00:02:18,020 --> 00:02:22,850
>> Усередині мого тіла, у мене є h2
об'єкт і об'єкт р по пункту

49
00:02:22,850 --> 00:02:25,270
і об'єкт для посилання.

50
00:02:25,270 --> 00:02:29,660
І так вся ця ієрархія
може бути представлена ​​у вигляді великого дерева

51
00:02:29,660 --> 00:02:31,990
з великим меншого Літтл
речі виходять з нього.

52
00:02:31,990 --> 00:02:33,740
Тепер, звичайно, коли
ми програм, ми

53
00:02:33,740 --> 00:02:35,560
Не думаю, що таких речей, як велике дерево.

54
00:02:35,560 --> 00:02:37,980
Ми хочемо, щоб поточна
код, пов'язані речі.

55
00:02:37,980 --> 00:02:40,790
>> І, на щастя, ми можемо
використовувати наші інструменти для розробників

56
00:02:40,790 --> 00:02:46,080
насправді поглянути на
Об'єкт документа цього веб-сайту.

57
00:02:46,080 --> 00:02:48,150
І давайте зробимо це.

58
00:02:48,150 --> 00:02:49,580
Так що я відкрив вкладку браузера.

59
00:02:49,580 --> 00:02:51,540
>> І я відкрив Developer Tools.

60
00:02:51,540 --> 00:02:54,460
І в моєму відео на JavaScript, я
зазначив, що консоль НЕ

61
00:02:54,460 --> 00:02:56,770
тільки десь, де
ми друкуємо інформацію,

62
00:02:56,770 --> 00:02:59,560
це також місце, де
ми можемо вхідну інформацію.

63
00:02:59,560 --> 00:03:01,380
У цьому контексті, що
Я збираюся сказати,

64
00:03:01,380 --> 00:03:05,720
Я хотів би повернутися
об'єкти документів,

65
00:03:05,720 --> 00:03:07,502
так що я можу почати, щоб поглянути на нього.

66
00:03:07,502 --> 00:03:08,460
Так як я міг це зробити?

67
00:03:08,460 --> 00:03:10,740
Ну, якщо я хочу
організувати дуже красиво,

68
00:03:10,740 --> 00:03:16,317
Я хочу сказати, console.dir, D-I-R.
Тепер, я використовую console.log просто роздрукувати

69
00:03:16,317 --> 00:03:17,400
щось дуже просте.

70
00:03:17,400 --> 00:03:20,450
Але якщо я хочу, щоб організувати це
ієрархічно як об'єкт,

71
00:03:20,450 --> 00:03:23,800
Я хочу це свого роду структурований
як структури каталогів.

72
00:03:23,800 --> 00:03:27,400
>> Тому я хочу, щоб console.dir документ.

73
00:03:27,400 --> 00:03:28,430
Я вдарю Enter.

74
00:03:28,430 --> 00:03:32,350
І прямо під ним зараз,
і я буду наближати тут,

75
00:03:32,350 --> 00:03:36,000
Я отримав цей документ реагування
з невеликою стрілкою поруч з ним.

76
00:03:36,000 --> 00:03:39,470
Тепер, коли я відкриваю цю стрілку,
там буде багато речей.

77
00:03:39,470 --> 00:03:42,560
>> Але ми збираємося ігнорувати багато
з нього і тільки частково у фокусі

78
00:03:42,560 --> 00:03:46,250
на найважливішій частині, таким чином, ми
може почати переміщатися цей документ.

79
00:03:46,250 --> 00:03:50,125
Там набагато більше до DOM, ніж
просто батько вузли і дочірні вузли.

80
00:03:50,125 --> 00:03:51,500
Там дуже багато допоміжного матеріалу.

81
00:03:51,500 --> 00:03:52,280
>> Так що я збираюся відкрити це.

82
00:03:52,280 --> 00:03:54,610
І є багато
речі, які спливає.

83
00:03:54,610 --> 00:03:59,000
Але все, що я дбаю про те
прямо тут, дочірні вузли.

84
00:03:59,000 --> 00:04:00,410
Давайте відкриємо, що до.

85
00:04:00,410 --> 00:04:03,810
>> Всередині є я бачу
щось знайоме, HTML.

86
00:04:03,810 --> 00:04:07,670
Так всередині нашого документа
один рівень вниз, HTML.

87
00:04:07,670 --> 00:04:08,550
Я відкриваю, що до.

88
00:04:08,550 --> 00:04:10,380
Що ми очікуємо?

89
00:04:10,380 --> 00:04:13,760
>> Якщо ви пам'ятаєте з нашої діаграмі,
що ми маємо знайти всередині HTML?

90
00:04:13,760 --> 00:04:17,275
Які два вузли під ним в дереві?

91
00:04:17,275 --> 00:04:17,899
Давай дізнаємось.

92
00:04:17,899 --> 00:04:18,940
Ми відкриваємо HTML.

93
00:04:18,940 --> 00:04:22,079
Ми спускаємося в його дочірніх вузлів.

94
00:04:22,079 --> 00:04:23,440
>> Поп, які відкриваються.

95
00:04:23,440 --> 00:04:25,990
Там голова і тіло.

96
00:04:25,990 --> 00:04:28,540
І ми можемо відкрити голівку.

97
00:04:28,540 --> 00:04:30,460
Перейти до його дочірніх вузлів.

98
00:04:30,460 --> 00:04:31,460
Ну, є назва.

99
00:04:31,460 --> 00:04:33,293
>> І ми могли б піти далі і
на, як це назавжди.

100
00:04:33,293 --> 00:04:34,770
Ми могли б зробити це з тілом, а також.

101
00:04:34,770 --> 00:04:40,090
Але є спосіб для нас, щоб дивитися на
документ організований як великий об'єкт.

102
00:04:40,090 --> 00:04:42,610
І якщо ми подивимося на великій
об'єкт, який виглядає багато

103
00:04:42,610 --> 00:04:47,480
як код, це означає, що ми можемо почати
маніпулювати цією великий об'єкт за допомогою

104
00:04:47,480 --> 00:04:51,220
Код змінити те, що наші
сайт виглядає і відчуває, як.

105
00:04:51,220 --> 00:04:54,920
>> Так що це досить потужний інструмент
ми маємо в нашому розпорядженні в даний час.

106
00:04:54,920 --> 00:04:57,360
Так як ми тільки що бачили,
Сам документ об'єкт

107
00:04:57,360 --> 00:05:01,392
і всі об'єкти всередині нього
мають властивості і методи, просто

108
00:05:01,392 --> 00:05:04,100
як і будь-який інший об'єкт, який ми
працює з в JavaScript.

109
00:05:04,100 --> 00:05:08,370
Але ми можемо використовувати ці властивості і
використовувати ці методи, щоб свого роду розгорнути

110
00:05:08,370 --> 00:05:10,900
з великою документа і отримати
все нижче і нижче, і нижче,

111
00:05:10,900 --> 00:05:13,360
тонше і тонше зерна
НЕ деталізації, поки ми

112
00:05:13,360 --> 00:05:17,510
потрапити в дуже певної частини нашого
веб-сторінки, які ми хочемо змінити.

113
00:05:17,510 --> 00:05:22,700
>> І коли ми оновлюємо властивості
Документ об'єкт або зателефонуйте ті методи,

114
00:05:22,700 --> 00:05:24,450
Можуть відбутися на нашій веб-сторінці.

115
00:05:24,450 --> 00:05:28,420
І ми не повинні робити нічого освіжаючий
щоб ці зміни вступили в силу.

116
00:05:28,420 --> 00:05:33,160
>> І це дуже здорово здатність
Тобто, коли ми працюємо з кодом.

117
00:05:33,160 --> 00:05:37,185
Так що деякі з цих властивостей
які є частиною об'єкта документа?

118
00:05:37,185 --> 00:05:40,100
Ну, ви, ймовірно, бачив
пара з них дійсно швидко

119
00:05:40,100 --> 00:05:42,700
як ми були стиснути
через гігантський документа

120
00:05:42,700 --> 00:05:45,150
Об'єкт ми тільки що бачили в веб-браузері.

121
00:05:45,150 --> 00:05:48,420
>> Але пару з цих властивостей
може бути щось на зразок внутрішньої HTML.

122
00:05:48,420 --> 00:05:52,950
І ви, можливо, навіть згадати мене
використовуючи це у відео JavaScript

123
00:05:52,950 --> 00:05:54,950
в самому кінці, коли я
говорив про події.

124
00:05:54,950 --> 00:05:56,125
Що це внутрішня HTML?

125
00:05:56,125 --> 00:05:59,030
Ну, це просто те, що
між тегами.

126
00:05:59,030 --> 00:06:01,590
>> І так внутрішній HTML,
Наприклад, назви

127
00:06:01,590 --> 00:06:05,390
тег, якби ми продовжували йти в
що, наприклад, хвилину тому,

128
00:06:05,390 --> 00:06:08,020
було б привіт світ.

129
00:06:08,020 --> 00:06:10,140
Це була назва нашої сторінки.

130
00:06:10,140 --> 00:06:12,370
Інші властивості
включають в себе ім'я вузла, який

131
00:06:12,370 --> 00:06:15,810
це ім'я з HTML
елемент, такий як назва.

132
00:06:15,810 --> 00:06:19,100
ID, який є ідентифікатором
атрибут HTML елемента.

133
00:06:19,100 --> 00:06:23,790
>> Нагадаємо, що ми можемо спеціально вказати
конкретні елементи нашого HTML

134
00:06:23,790 --> 00:06:27,510
з ID атрибуту, який зазвичай
прігождается в контексті CSS,

135
00:06:27,510 --> 00:06:29,000
спеціально.

136
00:06:29,000 --> 00:06:33,217
Батьківський вузол, який є посиланням на
що тільки нагорі мене в DOM.

137
00:06:33,217 --> 00:06:35,800
І дочірні вузли, що є
посилання на те, що внизу мене.

138
00:06:35,800 --> 00:06:37,950
І ми побачили, що багато
просто переглядаючи.

139
00:06:37,950 --> 00:06:42,970
Дочірні вузли, які, як ми отримали
все нижче і нижче в дереві.

140
00:06:42,970 --> 00:06:46,590
>> Атрибути, це просто масив
з атрибути HTML елемент.

141
00:06:46,590 --> 00:06:50,270
Так приклад атрибутів може
якби у вас є тег зображення,

142
00:06:50,270 --> 00:06:54,090
він зазвичай має атрибут вихідного,
може бути, висота і ширина атрибут.

143
00:06:54,090 --> 00:06:57,120
І так, що б просто бути масивом
з усіх атрибутів, пов'язаних

144
00:06:57,120 --> 00:06:59,300
з цією HTML елемента.

145
00:06:59,300 --> 00:07:04,140
>> Стиль ще один, який
зовсім представляють CSS

146
00:07:04,140 --> 00:07:06,050
укладка конкретного елемента.

147
00:07:06,050 --> 00:07:08,310
А потім у цьому
відео, ми будемо спеціально

148
00:07:08,310 --> 00:07:14,592
важелі стиль зробити пару
зміни на нашому сайті.

149
00:07:14,592 --> 00:07:15,800
Так що ті, деякі властивості.

150
00:07:15,800 --> 00:07:17,591
>> І є також деякі
Методи, які ми можемо

151
00:07:17,591 --> 00:07:22,450
використовувати також більш швидко, може бути, ізолювати
елементи об'єкта документа.

152
00:07:22,450 --> 00:07:26,730
Може бути, самий універсальний
з них є getElementById.

153
00:07:26,730 --> 00:07:31,190
Так що я міг би сказати щось на зразок, бо
пам'ятайте, що це метод Документа

154
00:07:31,190 --> 00:07:34,880
Об'єкт, document.getElementById.

155
00:07:34,880 --> 00:07:39,820
>> А всередині цих дужок, вкажіть
HTML-елемент з певною ID

156
00:07:39,820 --> 00:07:42,330
атрибутів, що я раніше
встановлений, і я відразу ж буду

157
00:07:42,330 --> 00:07:46,685
йти прямо до цього елементу
від загального веб-сайту.

158
00:07:46,685 --> 00:07:49,310
Так що я не повинен, може бути, свердлити
вниз через кожен шар.

159
00:07:49,310 --> 00:07:52,841
Я можу просто використовувати цей метод, щоб знайти його,
ніби як тепло шукає ракети,

160
00:07:52,841 --> 00:07:53,340
вірно?

161
00:07:53,340 --> 00:07:56,300
Це просто йде і знаходить
саме те, що він шукає.

162
00:07:56,300 --> 00:07:59,290
>> GetElementsByTagName є
дуже схожі по духу.

163
00:07:59,290 --> 00:08:02,500
Може бути, це буде знайти всі з
сміливі теги і всі р тегів

164
00:08:02,500 --> 00:08:05,920
і дати мені масив все
що я міг би працювати.

165
00:08:05,920 --> 00:08:12,080
AppendChild додає щось
один рівень вниз в дереві.

166
00:08:12,080 --> 00:08:16,440
>> Так що я можу додати весь новий
елемент на один рівень нижче.

167
00:08:16,440 --> 00:08:19,700
Або я можу видалити елемент, що це
один рівень нижче, а якщо я хочу

168
00:08:19,700 --> 00:08:22,870
видалити щось з моєї веб-сторінці.

169
00:08:22,870 --> 00:08:28,480
Тепер, швидке примітка кодування і швидко
головний біль економії відома, сподіваюся.

170
00:08:28,480 --> 00:08:31,670
>> getElementById-- Д в нижньому регістрі.

171
00:08:31,670 --> 00:08:36,950
Я не можу сказати вам, скільки разів я повинен
б getElementById і капіталізуються

172
00:08:36,950 --> 00:08:38,336
Д є.

173
00:08:38,336 --> 00:08:39,460
Тому що це дійсно спільне.

174
00:08:39,460 --> 00:08:42,990
Якщо ми пишемо слово ID, це
як правило, капітал Капітал I Д.

175
00:08:42,990 --> 00:08:44,240
І мій код просто не працює.

176
00:08:44,240 --> 00:08:45,630
І я не можу зрозуміти, чому.

177
00:08:45,630 --> 00:08:49,490
Це дійсно, дійсно, дійсно
загальна помилка, що кожен робить,

178
00:08:49,490 --> 00:08:51,890
навіть експерти, які мають
робив це назавжди.

179
00:08:51,890 --> 00:08:55,410
Так просто бути в курсі, getElementById,
що г в нижньому регістрі.

180
00:08:55,410 --> 00:09:00,080
І можна сподіватися, що економить кілька
хвилин, принаймні душевного болю.

181
00:09:00,080 --> 00:09:02,204
>> Отже, що ж все це нам говорить?

182
00:09:02,204 --> 00:09:03,120
У нас є ці методи.

183
00:09:03,120 --> 00:09:04,161
У нас є ці властивості.

184
00:09:04,161 --> 00:09:06,610
Тепер, якщо ми виходимо з
документ, документ.

185
00:09:06,610 --> 00:09:10,220
все, тепер ми можемо отримати будь
один шматок нашій веб-сторінці

186
00:09:10,220 --> 00:09:14,870
що ми хочемо, щоб за допомогою JavaScript
просто називати ці методи

187
00:09:14,870 --> 00:09:19,940
і використовуючи властивості
що ми знаходимо в різних місцях.

188
00:09:19,940 --> 00:09:24,890
>> Це може стати багатослівним, це
document.getElementById,

189
00:09:24,890 --> 00:09:28,560
може бути, є довгий ім'я тега,
Може бути, ви більше дзвінків пізніше.

190
00:09:28,560 --> 00:09:31,230
Речі можуть отримати трохи багатослівні.

191
00:09:31,230 --> 00:09:34,480
І як програмісти, як ви,
напевно, бачили в багатьох з цих відео,

192
00:09:34,480 --> 00:09:36,600
нам не подобається багатослівні речі.

193
00:09:36,600 --> 00:09:38,520
>> Ми хотіли б бути в змозі зробити речі швидко.

194
00:09:38,520 --> 00:09:42,640
Таким чином, ми хотіли б більш
коротким спосіб сказати щось.

195
00:09:42,640 --> 00:09:46,270
Так що це свого роду призводить до
Поняття, що називається JQuery.

196
00:09:46,270 --> 00:09:49,170
Тепер JQuery НЕ JavaScript.

197
00:09:49,170 --> 00:09:50,350
Це не частина JavaScript.

198
00:09:50,350 --> 00:09:54,790
>> Це бібліотека, яка була написана
деякі програмісти JavaScript

199
00:09:54,790 --> 00:09:57,060
близько 10 років тому.

200
00:09:57,060 --> 00:10:01,300
І його метою є, щоб спростити це те, що
називається стороні клієнта сценаріїв, які

201
00:10:01,300 --> 00:10:04,310
в основному те, що ми були просто
говорити про з DOM маніпуляцій.

202
00:10:04,310 --> 00:10:11,090
І тому, якщо я хотів, щоб модифікувати
Колір фону моєї веб-сторінці, може бути,

203
00:10:11,090 --> 00:10:11,980
специфічний Дів.

204
00:10:11,980 --> 00:10:15,325
>> Ось я, очевидно, отримувати
ElementById colorDiv.

205
00:10:15,325 --> 00:10:16,950
І я хочу, щоб встановити його колір фону.

206
00:10:16,950 --> 00:10:20,720
Якщо я тільки за допомогою чистого JavaScript
з використанням Document Object Model,

207
00:10:20,720 --> 00:10:23,990
це багато речей, чи не так?
document.getElementById

208
00:10:23,990 --> 00:10:25,531
colorDiv.style.backgroundColor = зелений.

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

210
00:10:27,260 --> 00:10:28,050
>> Ось так.

211
00:10:28,050 --> 00:10:30,110
Це було багато, щоб сказати.

212
00:10:30,110 --> 00:10:31,720
Це багато, щоб ввести, теж.

213
00:10:31,720 --> 00:10:35,760
І так в JQuery, ми можемо сказати, може бути,
це трохи більш коротко.

214
00:10:35,760 --> 00:10:39,350
Компроміс бути це, можливо, трохи
трохи більше загадкове раптом,

215
00:10:39,350 --> 00:10:39,850
вірно?

216
00:10:39,850 --> 00:10:43,580
>> Принаймні, довго ще трохи
пояснюючими, як те, що ми робимо.

217
00:10:43,580 --> 00:10:49,947
Цей знак долара, круглі дужки,
апостроф, хеш, colorDiv, вірно?

218
00:10:49,947 --> 00:10:50,780
Що це означає?

219
00:10:50,780 --> 00:10:53,640
Ну, це в основному тільки
document.getElementById colorDiv.

220
00:10:53,640 --> 00:10:58,700
>> Але це такого роду стенографії
спосіб зробити це за допомогою JQuery.

221
00:10:58,700 --> 00:11:01,380
Давайте просто подивіться зараз
на кілька різних способів

222
00:11:01,380 --> 00:11:04,520
що я насправді може
Використовуйте цей об'єкт Document

223
00:11:04,520 --> 00:11:06,807
Модель маніпулювати частини мого сайту.

224
00:11:06,807 --> 00:11:09,140
Зокрема, ми збираємося
працювати на маніпулюванні

225
00:11:09,140 --> 00:11:14,090
колір конкретний
Дів, colorDiv, на веб-сторінці.

226
00:11:14,090 --> 00:11:15,299
Отже, давайте поглянемо на це.

227
00:11:15,299 --> 00:11:15,798
Добре.

228
00:11:15,798 --> 00:11:16,700
Так що я на сторінці.

229
00:11:16,700 --> 00:11:20,750
Це називається test.html, коли ви завантажуєте
це, якщо ви хочете, щоб возитися з цим.

230
00:11:20,750 --> 00:11:24,730
І я отримав купу
Кнопки на цій сторінці.

231
00:11:24,730 --> 00:11:27,730
І я кажу окремі функції
для колір фону, фіолетовий, зелений,

232
00:11:27,730 --> 00:11:31,330
оранжевий, червоний, синій, одна функція
для кольору фону, обробник події

233
00:11:31,330 --> 00:11:34,360
для кольору фону, і за допомогою JQuery.

234
00:11:34,360 --> 00:11:38,147
Що я кажу про
коли я роблю це?

235
00:11:38,147 --> 00:11:39,230
Таким чином, ми бачили кнопки.

236
00:11:39,230 --> 00:11:41,521
Тепер, давайте поглянемо на
деякі з вихідного коду тут.

237
00:11:41,521 --> 00:11:44,770
Ми почнемо з test.html.

238
00:11:44,770 --> 00:11:48,100
Так окремі функції для фону
колір, що я набрав тут.

239
00:11:48,100 --> 00:11:49,350
Дозвольте мені прокрутити небагато.

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

241
00:11:56,170 --> 00:11:58,820
>> І ви помітите, що я
визначили ці кнопки

242
00:11:58,820 --> 00:12:03,990
сказати, коли ця кнопка натиснута,
викликати функцію включити фіолетовий.

243
00:12:03,990 --> 00:12:06,670
Коли ця кнопка миші, а,
викликати функцію зеленіти,

244
00:12:06,670 --> 00:12:08,710
помаранчевим, червоним, синім.

245
00:12:08,710 --> 00:12:11,880
Ви, напевно, можете здогадатися, що це
Можливо, це не найкращий дизайн

246
00:12:11,880 --> 00:12:12,460
сенс, вірно?

247
00:12:12,460 --> 00:12:16,490
>> Було б непогано, якби я міг
мають більш загальний підхід.

248
00:12:16,490 --> 00:12:19,570
Ну, по-перше, ми будемо дивитися
на те, що ці п'ять функцій

249
00:12:19,570 --> 00:12:24,400
document.getElementById
colorDiv.style.background = фіолетовий,

250
00:12:24,400 --> 00:12:27,250
зелений, оранжевий, червоний,
і синій, відповідно.

251
00:12:27,250 --> 00:12:30,930
Так, зокрема, не кращий дизайн.

252
00:12:30,930 --> 00:12:33,390
>> Наступний набір кнопок
Я це я написав

253
00:12:33,390 --> 00:12:36,380
одна функція називається
змінити колір, що, мабуть

254
00:12:36,380 --> 00:12:38,960
сприймає рядок в якості аргументу.

255
00:12:38,960 --> 00:12:40,290
Так що це трохи краще.

256
00:12:40,290 --> 00:12:43,840
Фіолетовий, зелений, помаранчевий, червоний,
синій тепер аргумент.

257
00:12:43,840 --> 00:12:46,230
Так що я написав більш загальний
Справа функція JavaScript,

258
00:12:46,230 --> 00:12:47,771
які могли б виглядати наступним чином.

259
00:12:47,771 --> 00:12:48,680
Я передаю в.

260
00:12:48,680 --> 00:12:52,090
Це зміна кольору функція
чекаючи аргумент з ім'ям кольору.

261
00:12:52,090 --> 00:12:54,970
І я кажу встановити
колір фону колір.

262
00:12:54,970 --> 00:12:58,390
Так тут представляє те, що я потрапив сюди.

263
00:12:58,390 --> 00:12:59,770
Так що це трохи краще.

264
00:12:59,770 --> 00:13:02,740
>> Але я міг би бути в змозі
краще, ніж це.

265
00:13:02,740 --> 00:13:06,140
Якщо ми йдемо вниз, щоб поглянути
в ситуації обробника подій,

266
00:13:06,140 --> 00:13:07,860
Тепер всі ці виклики виглядають однаково.

267
00:13:07,860 --> 00:13:10,340
Якщо згадати для нашого
обговорення обробників подій,

268
00:13:10,340 --> 00:13:15,770
Я можу отримати інформацію про те, які з
ці кнопки натиснули і використовувати.

269
00:13:15,770 --> 00:13:19,560
>> І так в event.JavaScript, у мене
написано зміна кольору подія, яка

270
00:13:19,560 --> 00:13:21,110
з'ясовує, яка кнопка була натиснута.

271
00:13:21,110 --> 00:13:23,250
Це об'єкт тригера лінії.

272
00:13:23,250 --> 00:13:25,240
І тоді тут, це стає дійсно багатослівним.

273
00:13:25,240 --> 00:13:27,420
Але те, що я роблю, я
установка фон

274
00:13:27,420 --> 00:13:30,340
колір triggerObject inner.HTML.

275
00:13:30,340 --> 00:13:34,170
Ось текст
між тегами кнопки.

276
00:13:34,170 --> 00:13:36,500
>> І тоді я, очевидно, мають
щоб встановити його в нижній регістр.

277
00:13:36,500 --> 00:13:40,780
І це, як я можу перетворити все
рядок в нижній регістр в JavaScript за допомогою

278
00:13:40,780 --> 00:13:42,940
що метод в нижній регістр.

279
00:13:42,940 --> 00:13:46,570
Тому що, коли я поставив колір,
як я намагаюся зробити тут,

280
00:13:46,570 --> 00:13:48,260
колір повинен бути в нижньому регістрі.

281
00:13:48,260 --> 00:13:50,920
>> Але кнопка, яка у мене була,
якщо ми ще раз поглянути,

282
00:13:50,920 --> 00:13:55,890
зауважити, що текст є
написано з великої літери для фіолетовий.

283
00:13:55,890 --> 00:13:59,140
І тоді, по крайней
Нижня тут, я, здається,

284
00:13:59,140 --> 00:14:02,630
спробувати зробити це, використовуючи JQuery, а також.

285
00:14:02,630 --> 00:14:06,000
І в цьому випадку, я насправді не
виклик функції взагалі.

286
00:14:06,000 --> 00:14:11,430
Я тільки що сказав, що клас Я
використовуючи для цього є кнопка JQ.

287
00:14:11,430 --> 00:14:12,360
Це воно.

288
00:14:12,360 --> 00:14:14,950
>> Так як же JQuery знаю, що я роблю?

289
00:14:14,950 --> 00:14:18,740
Ну, це одна з переваг
скоротити недоліки JQuery.

290
00:14:18,740 --> 00:14:21,560
Це може дозволити мені робити те,
дуже лаконічно, але, можливо, не

291
00:14:21,560 --> 00:14:22,570
а інтуїтивно.

292
00:14:22,570 --> 00:14:25,570
Може, ті, інші три зробити
трохи більше відчувати, що я роблю.

293
00:14:25,570 --> 00:14:29,010
Тут, однак, те, що відбувається?

294
00:14:29,010 --> 00:14:31,940
>> Судячи з усього, створення
анонімна функція

295
00:14:31,940 --> 00:14:36,790
що всякий раз, коли мій вантажі документ
готовий, так document.ready,

296
00:14:36,790 --> 00:14:38,760
деякі функції станеться.

297
00:14:38,760 --> 00:14:40,490
В основному, коли документ готовий?

298
00:14:40,490 --> 00:14:42,310
Це коли моя сторінка завантажиться.

299
00:14:42,310 --> 00:14:46,540
>> Тому, як тільки моя сторінка завантажена,
Наступна функція завжди готовий.

300
00:14:46,540 --> 00:14:54,310
Це говорить, якщо об'єкт типу jQButton,
або якщо клас jQButton була натиснута,

301
00:14:54,310 --> 00:14:55,570
виконати цю функцію.

302
00:14:55,570 --> 00:14:59,360
Так ось два анонімних функцій,
яка визначена усередині іншої.

303
00:14:59,360 --> 00:15:03,930
>> Так всю мою контексті
тут досі моя сторінка

304
00:15:03,930 --> 00:15:06,520
при завантаженні він викликає цю функцію.

305
00:15:06,520 --> 00:15:09,740
І ця функція чекає
Для кнопок буде натиснута.

306
00:15:09,740 --> 00:15:14,490
А коли натиснута кнопка, JQ
Кнопка спеціально клацанні

307
00:15:14,490 --> 00:15:17,150
він викликає цей інший
функція, яка буде

308
00:15:17,150 --> 00:15:21,250
щоб встановити фон
Колір colorDiv бути

309
00:15:21,250 --> 00:15:25,990
будь-який текст, в між тегами.

310
00:15:25,990 --> 00:15:28,050
>> Це поняття
кнопка, яка була натиснута.

311
00:15:28,050 --> 00:15:31,230
Але в іншому випадку, це свого роду
себе схоже на події.

312
00:15:31,230 --> 00:15:34,460
Це точно так само, як я
висловить це в JQuery.

313
00:15:34,460 --> 00:15:36,790
Знову ж таки, це, ймовірно,
набагато більше залякати.

314
00:15:36,790 --> 00:15:40,840
Це не ясно, як
щось на зразок event.js,

315
00:15:40,840 --> 00:15:45,080
що, може бути, трохи більше
багатослівний, але трохи менше

316
00:15:45,080 --> 00:15:46,000
лякає.

317
00:15:46,000 --> 00:15:51,460
>> Але якщо ми поп-назад до браузері
вікна, якщо я почну clicking-- добре,

318
00:15:51,460 --> 00:15:52,690
що змінилося в фіолетовий.

319
00:15:52,690 --> 00:15:54,450
Це зелений з використанням методу рядок.

320
00:15:54,450 --> 00:15:56,500
Це оранжевий, використовуючи обробник подій.

321
00:15:56,500 --> 00:15:58,300
>> Це червоний, використовуючи JQuery, вірно?

322
00:15:58,300 --> 00:16:01,270
Всі вони поводяться точно так само.

323
00:16:01,270 --> 00:16:06,509
Вони просто роблять це з використанням різних
підходи до вирішення проблеми.

324
00:16:06,509 --> 00:16:08,550
Там дуже багато більше, щоб
JQuery то ми, звичайно,

325
00:16:08,550 --> 00:16:10,050
поговоримо про в цьому відео.

326
00:16:10,050 --> 00:16:15,410
Але якщо ви хочете дізнатися більше, ви можете
перейти до JQuery роду документації

327
00:16:15,410 --> 00:16:19,710
і дізнатися трохи більше про
це дуже гнучка бібліотека, яка

328
00:16:19,710 --> 00:16:22,550
є великим для цього на стороні клієнта
сценаріїв, таких як те, що ми робили

329
00:16:22,550 --> 00:16:26,240
маніпулювати вид
і відчувати нашій веб-сторінці

330
00:16:26,240 --> 00:16:28,750
з об'єктної моделі документа.

331
00:16:28,750 --> 00:16:29,650
Я Дуг Ллойд.

332
00:16:29,650 --> 00:16:31,930
Це CS50.

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