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

2
00:00:04,439 --> 00:00:07,230
Даг Ллоид: У овом видеу, желели смо
звати од посебну пажњу

3
00:00:07,230 --> 00:00:09,110
на врло посебан
елемент ЈаваСцрипт

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
Дакле, као што смо видели у нашој видео на
Јавасцрипт, објекти су веома флексибилни.

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
Сада, објекат документ је
веома посебан објекат у ЈаваСцрипт

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
Па, знамо како се ради
са објектима у ЈаваСцрипт.

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
користећи ЈаваСцрипт умјесто
да кодира ствари са, рецимо, ХТМЛ.

30
00:01:30,210 --> 00:01:33,760
Дакле, овде је пример
врло једноставна веб страница, зар не?

31
00:01:33,760 --> 00:01:35,850
Има ХТМЛ ознаке, а главу.

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
Имам Х2 заглавља ознаку,
одломак, и линк.

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
>> Унутар овог документа је још један
објекат који се односи на ХТМЛ моје стране.

42
00:02:00,030 --> 00:02:02,660
А ХТМЛ моје стране је све ово.

43
00:02:02,660 --> 00:02:06,900
А онда унутар ХТМЛ
објекат, имам главу објекат,

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
>> Унутар мог тела, имам Х2
објекат и п објекат за став

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
И у мом видео он ЈаваСцрипт, ја
споменуо да је конзола није

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
Ја ћу рећи цонсоле.дир, Д-И-Р.
Сада, ја користим цонсоле.лог да само штампање

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
>> Дакле, желим да цонсоле.дир документ.

73
00:03:27,400 --> 00:03:28,430
Ја ћу да ударим Ентер.

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
Има много више него ДОМ
само родитељ чворови и дете чворови.

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
>> Унутар ту видим
нешто познато, ХТМЛ.

86
00:04:03,810 --> 00:04:07,670
Дакле, унутар нашег документа
један ниво доле ХТМЛ.

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
>> Ако се сећате из нашег дијаграма,
шта треба да нађемо унутар ХТМЛ?

90
00:04:13,760 --> 00:04:17,275
Који два чворови су испод њега у дрвету?

91
00:04:17,275 --> 00:04:17,899
Hajde da otkrijemo.

92
00:04:17,899 --> 00:04:18,940
Ми отвори ХТМЛ.

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
као и сваки други предмет који смо
ради са ЈаваСцрипт у.

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
>> Али пар ових особина
можда ствари као што су унутрашњи ХТМЛ.

122
00:05:48,420 --> 00:05:52,950
А можда чак ми се сетим
користећи то у ЈаваСцрипт видео

123
00:05:52,950 --> 00:05:54,950
на самом крају, када сам
је говорио о догађајима.

124
00:05:54,950 --> 00:05:56,125
Шта је то унутрашња ХТМЛ?

125
00:05:56,125 --> 00:05:59,030
Па, то је управо оно што је
између тагова.

126
00:05:59,030 --> 00:06:01,590
>> И тако је унутрашња ХТМЛ
на пример, наслова

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
је име једне ХТМЛ
елеменат као што наслов.

132
00:06:15,810 --> 00:06:19,100
ИД, што је ИД
атрибут ХТМЛ елемента.

133
00:06:19,100 --> 00:06:23,790
>> Подсетимо се да смо посебно може да указује
специфични елементи нашег ХТМЛ

134
00:06:23,790 --> 00:06:27,510
са атрибутом ИД, који обично
долази у руци у контексту ЦСС,

135
00:06:27,510 --> 00:06:29,000
конкретно.

136
00:06:29,000 --> 00:06:33,217
Надређен чвор, што је референца на
шта је горе изнад мене у Дому.

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
>> Атрибути, то је само низ
од атрибута ХТМЛ елемента.

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
са тим ХТМЛ елемент.

145
00:06:59,300 --> 00:07:04,140
>> Стил је још један да
не представљају ЦСС

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
Можда највише свестран
од ових бића гетЕлементБиИд.

153
00:07:26,730 --> 00:07:31,190
Тако да могу рећи нешто слично, јер
сетите се да је метода Документа

154
00:07:31,190 --> 00:07:34,880
Објецт, доцумент.гетЕлементБиИд.

155
00:07:34,880 --> 00:07:39,820
>> И унутар тих заграда, наведите
ХТМЛ елемент са одређеном ИД

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
jel tako?

161
00:07:53,340 --> 00:07:56,300
То само иде и проналази
управо оно што траже.

162
00:07:56,300 --> 00:07:59,290
>> ГетЕлементсБиТагНаме је
веома сличан по духу.

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
аппендЦхилд додаје нешто
један ниво доле у ​​дрвету.

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
>> гетЕлементБиИд-- Д је мала слова.

171
00:08:31,670 --> 00:08:36,950
Не могу вам рећи колико пута сам
Половни гетЕлементБиИд и капитализован

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
Ако пишемо реч ИД, то је
Обично капитал И капитал Д

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
Дакле, само будите свесни, гетЕлементБиИд,
да д је мала слова.

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
да желимо да користе ЈаваСцрипт
само позивањем ових метода

187
00:09:14,870 --> 00:09:19,940
и усклађивање својства
да нађемо на различитим локацијама.

188
00:09:19,940 --> 00:09:24,890
>> Ово може да Ворди, ово
доцумент.гетЕлементБиИд,

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
Дакле, ова врста доводи до
појам нечега што се зове јКуери.

196
00:09:46,270 --> 00:09:49,170
Сада јКуери није ЈаваСкрипт.

197
00:09:49,170 --> 00:09:50,350
То није део ЈаваСцрипт.

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
је у основи оно што смо управо били
разговарали са ДОМ манипулације.

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
>> Ево, ја очигледно се
ЕлементБиИд цолорДив.

205
00:10:15,325 --> 00:10:16,950
И желим да поставите боју позадине.

206
00:10:16,950 --> 00:10:20,720
Ако Ја само користим чист ЈаваСцрипт
помоћу Објецт Модел документа,

207
00:10:20,720 --> 00:10:23,990
То је много ствари, зар не?
доцумент.гетЕлементБиИд

208
00:10:23,990 --> 00:10:25,531
цолорДив.стиле.бацкгроундЦолор = зелено.

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
И тако у јКуери, мозда би могли да кажу
ово мало више концизно.

214
00:10:35,760 --> 00:10:39,350
Трговина са што је то можда мало
мало више загонетан одједном,

215
00:10:39,350 --> 00:10:39,850
jel tako?

216
00:10:39,850 --> 00:10:43,580
>> Најмање дуго је мало више
Објашњење о томе шта радимо.

217
00:10:43,580 --> 00:10:49,947
Овај знак доллара, заграде,
апостроф, хасх, цолорДив, зар не?

218
00:10:49,947 --> 00:10:50,780
Шта то значи?

219
00:10:50,780 --> 00:10:53,640
Па, то је у основи само
доцумент.гетЕлементБиИд цолорДив.

220
00:10:53,640 --> 00:10:58,700
>> Али то је ова врста стенографије
начин да се то користећи јКуери.

221
00:10:58,700 --> 00:11:01,380
Хајде да погледамо сада
при неколико различитих начина

222
00:11:01,380 --> 00:11:04,520
да сам заправо могао
користите ову Доцумент Објецт

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
боја одређена
Див, цолорДив, на веб страници.

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
То се зове тест.хтмл када преузимате
ово ако желите да петљам са овим.

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
за боју позадине, и користећи јКуери.

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
Почећемо са тест.хтмл.

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
доцумент.гетЕлементБиИд
цолорДив.стиле.бацкгроунд = љубичаста,

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
Тако сам написао општији
Случај ЈаваСцрипт функција,

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
>> И тако у евент.ЈаваСцрипт, ја сам
писани промена боје догађај, који

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
боја за триггерОбјецт иннер.ХТМЛ.

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
И тако ја могу претворити читав
стринг у мала слова у ЈаваСцрипт користећи

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
покушати да уради ово користећи јКуери као добро.

285
00:14:02,630 --> 00:14:06,000
И у овом случају, нисам стварно
позивање функција уопште.

286
00:14:06,000 --> 00:14:11,430
Управо сам рекао класу да сам
користи за овог дугмета је дугме јК.

287
00:14:11,430 --> 00:14:12,360
То је то.

288
00:14:12,360 --> 00:14:14,950
>> Па како јКуери знам шта да радим?

289
00:14:14,950 --> 00:14:18,740
Па, ово је једна од предности
сласх недостатке јКуери.

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
који учитава кад год мој документ
је спремна, тако доцумент.реади,

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
Каже, ако је објекат типа јКБуттон,
или ако класа јКБуттон је кликнуо,

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
И када се кликне дугме, јК
Тастер посебно се кликне,

307
00:15:14,490 --> 00:15:17,150
она позива ова друга
функција, која се одвија

308
00:15:17,150 --> 00:15:21,250
да подесите позадину
боја цолорДив да буде

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
То је само на исти начин сам
изразили ово јКуери.

313
00:15:34,460 --> 00:15:36,790
Опет, то је вероватно
много више застрашујуће.

314
00:15:36,790 --> 00:15:40,840
Није јасно као
нешто као евент.јс,

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
>> Али ако свратим у моју бровсер
прозор, ако почнем цлицкинг-- добро,

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
>> Ово је црвена користећи јКуери, зар не?

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
Има много више
јКуери онда свакако смо

325
00:16:08,550 --> 00:16:10,050
ће говорити о у овом видеу.

326
00:16:10,050 --> 00:16:15,410
Али, ако желите да сазнате више, можете
идите на јКуери врсте документације

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
Ово је ЦС50.

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