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
>> Во внатрешноста на овие и други
објекти, и така натаму, и така натаму,

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

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, Д-јас-Р.
Сега, јас го користам за да се само печати 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
Има многу повеќе да се од ДОМ
само родител јазли и дете јазли.

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
како што бевме zipping
низ гигант документот

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, која е ID
атрибут на HTML елемент.

133
00:06:19,100 --> 00:06:23,790
>> Потсетиме дека посебно ќе ја посочиме
специфични елементи на нашата HTML

134
00:06:23,790 --> 00:06:27,510
со ид атрибут, кој обично
доаѓа во рака во контекст на CSS,

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

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-- на d е со мали букви.

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

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

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-
користење на документ 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
>> Whew.

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

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

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
Тоа е само на ист начин го
ќе го изразат тоа во 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
со документ 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