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