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
И това е идеята за
Документ Object Model.

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
>> Inside от тях са други
обекти и така нататък, и така нататък,

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
>> Inside от там е титла, здравей свят.

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
>> И аз съм отворил инструменти за разработчици.

60
00:02:51,540 --> 00:02:54,460
И в моето видео на JavaScript, I
спомене, че конзолата не е

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
>> Inside от там виждам
нещо познато, 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
>> И когато актуализираме свойства на
Документирайте Object или се обадете на тези методи,

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
>> Style е друг, който
не представлява СГО

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
Object, 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 капитал D.

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
>> Това е библиотека, която е написана
от някои програмисти джава

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
специфичен Div.

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
че може в действителност
използвате тази Object 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
цвета на конкретен
Div, 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
Purple, зелено, оранжево, червено,
синя сега е аргумент.

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
забележите, че текста е налице
написана с главна P за лилаво.

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
Това е просто по същия начин I
ще изрази тази в 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
с Document Object Model на.

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