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

2
00:00:04,439 --> 00:00:07,230
DOUG LLOYD: Bu video, biz istəyirdik
ayrı-ayrı diqqət səslənirəm

3
00:00:07,230 --> 00:00:09,110
bir çox xüsusi etmək
JavaScript element

4
00:00:09,110 --> 00:00:11,350
lazımlı ola bilər ki,
zaman başlanğıc edirik

5
00:00:11,350 --> 00:00:15,750
web pages manipulyasiya işləmək və
web page məzmununu dəyişən

6
00:00:15,750 --> 00:00:16,460
Tez.

7
00:00:16,460 --> 00:00:19,450
Və anlayışı var
Document Object Model.

8
00:00:19,450 --> 00:00:23,030
Kimi Beləliklə, biz bizim video gördüm
JavaScript, obyektlərin çox çevik edir.

9
00:00:23,030 --> 00:00:24,750
>> Onlar müxtəlif sahələri ola bilər.

10
00:00:24,750 --> 00:00:28,075
Və biz bir çox daxil etməyib, baxmayaraq
ətraflı, həmin sahələrdə və ya xassələri,

11
00:00:28,075 --> 00:00:30,200
ki, biz yəqin ki, daha olardı
müvafiq onlara zəng

12
00:00:30,200 --> 00:00:33,915
hətta bir obyekt kontekstində
o xassələri digər obyektlərin ola bilər.

13
00:00:33,915 --> 00:00:36,210
Və həmin obyektlərin daxili
digər obyektlərin ola bilər.

14
00:00:36,210 --> 00:00:39,630
>> Bu çox böyük obyekt var
digər obyektlərin bir çox

15
00:00:39,630 --> 00:00:43,550
bunun içərisində olan sort
böyük bir ağac bu fikri yaradır.

16
00:00:43,550 --> 00:00:47,540
İndi sənəd obyekt bir
JavaScript çox xüsusi obyekt

17
00:00:47,540 --> 00:00:52,580
ki, bütün web təşkil
çətir bu cür altında səhifə

18
00:00:52,580 --> 00:00:53,470
bir obyekt.

19
00:00:53,470 --> 00:00:56,770
Və belə sənədin daxili
object təqdim obyektləri

20
00:00:56,770 --> 00:00:59,630
Sizin web page baş və bədən.

21
00:00:59,630 --> 00:01:03,760
>> O Inside digər var
obyektləri, Et Cetera, Et Cetera,

22
00:01:03,760 --> 00:01:08,411
bütün web page var qədər
bu böyük obyekt təşkil olunub.

23
00:01:08,411 --> 00:01:09,660
Alt-üst sağ, burada nə var?

24
00:01:09,660 --> 00:01:12,170
Bəli, biz işləmək üçün necə
JavaScript obyektləri ilə.

25
00:01:12,170 --> 00:01:15,840
>> Biz bir obyekt varsa Belə ki,
ki, bizim bütün web page aiddir

26
00:01:15,840 --> 00:01:19,590
düzgün axtararaq deməkdir
üsulları obyekt manipulyasiya

27
00:01:19,590 --> 00:01:22,360
və ya müəyyən değiştirmeyle
onun xassələri, biz

28
00:01:22,360 --> 00:01:25,500
elementləri dəyişə bilərsiniz
Bizim səhifə program

29
00:01:25,500 --> 00:01:30,210
JavaScript istifadə əvəzinə olan
HTML, demək, hər şeyi kod.

30
00:01:30,210 --> 00:01:33,760
Belə ki, burada bir misal var
web page çox sadə, sağ?

31
00:01:33,760 --> 00:01:35,850
Bu HTML tags, baş var.

32
00:01:35,850 --> 00:01:37,979
>> Daxilində bir adı, salam dünya var.

33
00:01:37,979 --> 00:01:38,770
Sonra bir orqan var.

34
00:01:38,770 --> 00:01:40,686
Ki, Inside, mən
üç müxtəlif şeylər.

35
00:01:40,686 --> 00:01:44,170
Mən bir h2 header tag var
paraqraf, və bir link.

36
00:01:44,170 --> 00:01:45,920
Bu, çox sadə web page edir.

37
00:01:45,920 --> 00:01:48,590
>> Yaxşı, nə güc sənəd
kimi bu baxmaq üçün etiraz?

38
00:01:48,590 --> 00:01:50,700
Bəli, bu bir az
bəlkə ilk scary.

39
00:01:50,700 --> 00:01:52,510
Lakin bu, həqiqətən, yalnız bir böyük ağac var.

40
00:01:52,510 --> 00:01:54,890
Və çox kök sənəddir.

41
00:01:54,890 --> 00:02:00,030
>> Sənəd başqa Inside
mənim səhifə HTML istinad obyekt.

42
00:02:00,030 --> 00:02:02,660
Və mənim səhifə HTML bütün bu var.

43
00:02:02,660 --> 00:02:06,900
Və sonra HTML daxilində
obyekt, mən baş obyekt var,

44
00:02:06,900 --> 00:02:09,000
orada hər şey aiddir.

45
00:02:09,000 --> 00:02:11,009
>> Və daxilində,
Mən bir mövzu obyekt var.

46
00:02:11,009 --> 00:02:15,620
Və daxilində, başqa bir var
yalnız salam dünya var etiraz.

47
00:02:15,620 --> 00:02:18,020
Mən bədən ola bilər
Bu kimi təmsil edib.

48
00:02:18,020 --> 00:02:22,850
>> Mənim bədən daxilində, Mən H2 var
obyekt və paraqraf üçün bir p obyekt

49
00:02:22,850 --> 00:02:25,270
və keçid üçün bir bir obyekt.

50
00:02:25,270 --> 00:02:29,660
Və bu bütün iyerarxiya
böyük ağac kimi təmsil oluna bilər

51
00:02:29,660 --> 00:02:31,990
kiçik Little çox
hər şeyi həyata gəlir.

52
00:02:31,990 --> 00:02:33,740
İndi, əlbəttə, zaman
biz biz, proqramlaşdırma edirik

53
00:02:33,740 --> 00:02:35,560
böyük bir ağac kimi şeylər düşünmürəm.

54
00:02:35,560 --> 00:02:37,980
Biz faktiki görmək istəyirik
kodu aid şeylər.

55
00:02:37,980 --> 00:02:40,790
>> Və xoşbəxtlikdən, biz
Geliştirici vasitələrdən istifadə

56
00:02:40,790 --> 00:02:46,080
həqiqətən bir nəzər
Bu veb sənəd obyekt.

57
00:02:46,080 --> 00:02:48,150
Və bunu edək.

58
00:02:48,150 --> 00:02:49,580
Mən bir browser nişanı açdı etdik.

59
00:02:49,580 --> 00:02:51,540
>> Mən Developer Tools açdı etdik.

60
00:02:51,540 --> 00:02:54,460
Və JavaScript mənim video, I
konsol deyil ki, qeyd

61
00:02:54,460 --> 00:02:56,770
yalnız yerde harada
biz məlumat çap,

62
00:02:56,770 --> 00:02:59,560
bu da bir yerdə var
biz giriş məlumat bilərsiniz.

63
00:02:59,560 --> 00:03:01,380
Bu çərçivədə, nə
Mən demək gedirəm

64
00:03:01,380 --> 00:03:05,720
Mən geri almaq istəyirəm
sənəd obyektləri,

65
00:03:05,720 --> 00:03:07,502
mən ona nəzər başlaya bilərsiniz.

66
00:03:07,502 --> 00:03:08,460
Mən bu necə ola bilər?

67
00:03:08,460 --> 00:03:10,740
Bəli, mən istəyirsinizsə
həqiqətən gözəl təşkil,

68
00:03:10,740 --> 00:03:16,317
Mən console.dir, D-I-R demək gedirəm.
İndi yalnız çap console.log istifadə

69
00:03:16,317 --> 00:03:17,400
həyata bir şey çox sadə.

70
00:03:17,400 --> 00:03:20,450
Amma bu təşkil etmək istəyirsinizsə,
hiyerarşik bir obyekt kimi,

71
00:03:20,450 --> 00:03:23,800
Mən bu cür strukturlaşdırılmış istəyirəm
bir kataloq strukturu kimi.

72
00:03:23,800 --> 00:03:27,400
>> Belə ki, sənəd console.dir istəyirəm.

73
00:03:27,400 --> 00:03:28,430
Mən Enter düyməsini basın gedirəm.

74
00:03:28,430 --> 00:03:32,350
Və sağ aşağıdakı indi,
və mən burada zoom lazımdır

75
00:03:32,350 --> 00:03:36,000
Bu cavab sənədi var
onun yanında bir az ox ilə.

76
00:03:36,000 --> 00:03:39,470
İndi bu arrow açmaq zaman,
heyəti bir çox var olacaq.

77
00:03:39,470 --> 00:03:42,560
>> Amma biz çox ignore olacaq
Bu və diqqət yalnız cür

78
00:03:42,560 --> 00:03:46,250
ən mühüm hissəsi, biz belə
bu sənədi naviqasiya başlaya bilərsiniz.

79
00:03:46,250 --> 00:03:50,125
DOM daha bir çox daha çox var
qovşaqlarının və uşaq qovşaqlarının yalnız ana.

80
00:03:50,125 --> 00:03:51,500
Əlavə məhsulları bir çox var.

81
00:03:51,500 --> 00:03:52,280
>> Mən bu açmaq üçün gedirəm.

82
00:03:52,280 --> 00:03:54,610
Və bütövlükdə çox var
stuff ki pops.

83
00:03:54,610 --> 00:03:59,000
Amma qayğı bütün
burada, uşaq qovşaqlarının.

84
00:03:59,000 --> 00:04:00,410
Ki açmaq edək.

85
00:04:00,410 --> 00:04:03,810
>> Orada Inside görürəm
tanış bir şey, HTML.

86
00:04:03,810 --> 00:04:07,670
Bizim sənədin daxilində So
bir səviyyədə aşağı, HTML.

87
00:04:07,670 --> 00:04:08,550
Hesab edirəm ki, açmaq.

88
00:04:08,550 --> 00:04:10,380
Biz nə gözləyirik?

89
00:04:10,380 --> 00:04:13,760
>> Siz bizim diaqram geri əgər,
biz HTML daxilində nə tapmaq lazımdır?

90
00:04:13,760 --> 00:04:17,275
Ağac aşağıdakı hansı iki qovşaqlarının var?

91
00:04:17,275 --> 00:04:17,899
Tapmaq edək.

92
00:04:17,899 --> 00:04:18,940
Biz HTML açmaq.

93
00:04:18,940 --> 00:04:22,079
Biz uşaq qovşaqlarının enmək.

94
00:04:22,079 --> 00:04:23,440
>> Açıq Pop.

95
00:04:23,440 --> 00:04:25,990
Baş və bədən var.

96
00:04:25,990 --> 00:04:28,540
Və biz baş aça bilər.

97
00:04:28,540 --> 00:04:30,460
Onun uşaq qovşaqlarının gedin.

98
00:04:30,460 --> 00:04:31,460
Yaxşı, adı var.

99
00:04:31,460 --> 00:04:33,293
>> Və biz davam edə bilər və
Bu kimi əbədi.

100
00:04:33,293 --> 00:04:34,770
Biz həmçinin orqanı ilə bunu edə bilər.

101
00:04:34,770 --> 00:04:40,090
Amma baxmaq üçün bir yol var
böyük obyekt kimi təşkil sənəd.

102
00:04:40,090 --> 00:04:42,610
Biz baxsaq və böyük var
bir çox görünür obyekt

103
00:04:42,610 --> 00:04:47,480
kodu kimi, ki, biz başlaya bilərsiniz deməkdir
istifadə edərək, bu böyük obyekt manipulyasiya

104
00:04:47,480 --> 00:04:51,220
code nə dəyişdirmək üçün
veb görünür və kimi hiss edir.

105
00:04:51,220 --> 00:04:54,920
>> Belə ki, bir olduqca güclü alət var
indi bizim sərəncamında var.

106
00:04:54,920 --> 00:04:57,360
Biz yalnız gördüm, belə ki,
sənəd obyekt özü

107
00:04:57,360 --> 00:05:01,392
və onun daxili obyektlərin bütün
yalnız xassələri və üsulları var

108
00:05:01,392 --> 00:05:04,100
biz hər hansı digər obyekt kimi
JavaScript ilə işləyir.

109
00:05:04,100 --> 00:05:08,370
Amma biz bu xüsusiyyətləri istifadə edə bilərsiniz və
sort aşağı qazmaq bu metodlardan istifadə

110
00:05:08,370 --> 00:05:10,900
və böyük sənəd almaq
aşağı və aşağı və aşağı,

111
00:05:10,900 --> 00:05:13,360
finer və finer taxıl
ətraflı, biz qədər

112
00:05:13,360 --> 00:05:17,510
çox xüsusi bir parça almaq bizim
biz dəyişdirmək istədiyiniz web page.

113
00:05:17,510 --> 00:05:22,700
>> Və biz xassələri yeniləmə zaman
Obyekt sənəd və ya bu üsulları zəng,

114
00:05:22,700 --> 00:05:24,450
şeyi bizim web page baş verə bilər.

115
00:05:24,450 --> 00:05:28,420
Və biz hər hansı bir sərinləşdirici etmək lazım deyil
bu dəyişikliklər qüvvəyə var.

116
00:05:28,420 --> 00:05:33,160
>> Və olduqca sərin imkanı var
biz kodu ilə çalışırıq zaman var.

117
00:05:33,160 --> 00:05:37,185
Belə ki, bu xüsusiyyətləri bəzi hansılardır
sənəd obyekt hissəsi var?

118
00:05:37,185 --> 00:05:40,100
Yaxşı, siz yəqin ki, gördüm
Onların bir neçə həqiqətən tez

119
00:05:40,100 --> 00:05:42,700
biz zipping kimi
nəhəng sənəd vasitəsilə

120
00:05:42,700 --> 00:05:45,150
object biz yalnız web browser gördüm.

121
00:05:45,150 --> 00:05:48,420
>> Lakin bu xüsusiyyətləri bir neçə
daxili HTML kimi şeylər ola bilər.

122
00:05:48,420 --> 00:05:52,950
Və hətta məni geri bilər
JavaScript video bu istifadə

123
00:05:52,950 --> 00:05:54,950
çox sonunda mən
hadisələr haqqında danışırdı.

124
00:05:54,950 --> 00:05:56,125
Bu daxili HTML nə idi?

125
00:05:56,125 --> 00:05:59,030
Bəli, bu yalnız nə var
tags arasında.

126
00:05:59,030 --> 00:06:01,590
>> Və belə daxili HTML,
Məsələn, adı

127
00:06:01,590 --> 00:06:05,390
biz sizə əgər tag, gedən
bir an əvvəl, məsələn ki,

128
00:06:05,390 --> 00:06:08,020
salam dünya olardı.

129
00:06:08,020 --> 00:06:10,140
Yəni bizim səhifənin adı idi.

130
00:06:10,140 --> 00:06:12,370
Digər xassələri
node adı, daxil olan

131
00:06:12,370 --> 00:06:15,810
HTML adı
adı kimi element.

132
00:06:15,810 --> 00:06:19,100
ID edir ID,
HTML element bağlayırlar.

133
00:06:19,100 --> 00:06:23,790
>> Biz xüsusi göstərə bilər Xatırladaq ki,
Bizim HTML xüsusi elementləri

134
00:06:23,790 --> 00:06:27,510
adətən ID atributu ilə
CSS kontekstində lazımlı gəlir,

135
00:06:27,510 --> 00:06:29,000
xüsusi.

136
00:06:29,000 --> 00:06:33,217
Istinad edir valideyn node,
Yalnız mənə yuxarıda DOM nə.

137
00:06:33,217 --> 00:06:35,800
Və uşaq qovşaqlarının, olan bir
aşağı mənə aşağıda nə üçün arayış.

138
00:06:35,800 --> 00:06:37,950
Və biz bir çox gördüm
yalnız vasitəsilə axtarır.

139
00:06:37,950 --> 00:06:42,970
Aldıq necə uşaq qovşaqlarının, ki
ağac aşağı və aşağı.

140
00:06:42,970 --> 00:06:46,590
>> Atributları ki, yalnız bir sıra var
HTML element atributları.

141
00:06:46,590 --> 00:06:50,270
Belə ki, atributları nümunə bilər
Bir image tag varsa ola,

142
00:06:50,270 --> 00:06:54,090
adətən mənbə atributu var,
bəlkə bir hündürlüyü və eni atributu.

143
00:06:54,090 --> 00:06:57,120
Və belə ki, yalnız bir sıra olacaq
bağlı atributları bütün

144
00:06:57,120 --> 00:06:59,300
ki, HTML element ilə.

145
00:06:59,300 --> 00:07:04,140
>> Style başqa biridir ki,
CSS təmsil edir

146
00:07:04,140 --> 00:07:06,050
xüsusi element üslubu.

147
00:07:06,050 --> 00:07:08,310
Və sonra bu
video, biz xüsusi lazımdır

148
00:07:08,310 --> 00:07:14,592
leverage stil bir neçə etmək
bizim veb səhifəsinə dəyişikliklər.

149
00:07:14,592 --> 00:07:15,800
Belə ki, o, bəzi xassələri vardır.

150
00:07:15,800 --> 00:07:17,591
>> Həmçinin bəzi var
ki, biz üsulları

151
00:07:17,591 --> 00:07:22,450
də daha tez bəlkə təcrid etmək üçün istifadə
Document Obyekt elementləri.

152
00:07:22,450 --> 00:07:26,730
Yəqin ki, ən çox
Bu olan getElementById edir.

153
00:07:26,730 --> 00:07:31,190
Beləliklə, mən, çünki kimi bir şey deyə bilər
Bu sənəd üsulu var unutmayın

154
00:07:31,190 --> 00:07:34,880
, Document.getElementByID Obyekt.

155
00:07:34,880 --> 00:07:39,820
>> Və bu mötərizə daxilində müəyyən
xüsusi ID ilə bir HTML element

156
00:07:39,820 --> 00:07:42,330
Mən əvvəllər etdik ki atributu
müəyyən və mən dərhal lazımdır

157
00:07:42,330 --> 00:07:46,685
ki, element doğru getmək
ümumi saytının.

158
00:07:46,685 --> 00:07:49,310
Belə ki, bəlkə qazmaq yoxdur
hər bir qat vasitəsilə aşağı.

159
00:07:49,310 --> 00:07:52,841
Mən yalnız onu tapmaq üçün bu metodu istifadə edə bilərsiniz,
sort bir istilik axtaran raket kimi,

160
00:07:52,841 --> 00:07:53,340
sağ?

161
00:07:53,340 --> 00:07:56,300
Bu, yalnız gedir və hesab
dəqiq axtarır nə.

162
00:07:56,300 --> 00:07:59,290
>> GetElementsByTagName deyil
ruhunda çox oxşardır.

163
00:07:59,290 --> 00:08:02,500
Bəlkə bütün bu tapmaq olardı
qalın tags və ya p tags bütün

164
00:08:02,500 --> 00:08:05,920
və mənə hər şeyi bir sıra vermək
Mən sonra işləmək bilər.

165
00:08:05,920 --> 00:08:12,080
appendChild bir şey edər
aşağı ağac bir səviyyədə.

166
00:08:12,080 --> 00:08:16,440
>> Beləliklə, mən bütün yeni əlavə edə bilərsiniz
element bir səviyyədə aşağı.

167
00:08:16,440 --> 00:08:19,700
Və ya ki, bir element aradan qaldırılması
də mən istəyirəm bir səviyyədə aşağı

168
00:08:19,700 --> 00:08:22,870
Mənim web page bir şey silmək üçün.

169
00:08:22,870 --> 00:08:28,480
İndi tez kodlaşdırma qeyd və sürətli
baş ağrısı ümid edirəm ki, qeyd qənaət.

170
00:08:28,480 --> 00:08:31,670
>> getElementById-- d kiçik edir.

171
00:08:31,670 --> 00:08:36,950
Mən neçə dəfə sizə deyə bilməz
istifadə getElementById və kapitallaşdırılmış

172
00:08:36,950 --> 00:08:38,336
orada d.

173
00:08:38,336 --> 00:08:39,460
Bu, həqiqətən, ümumi var, çünki.

174
00:08:39,460 --> 00:08:42,990
Biz sözü ID yazmaq, bu
adətən kapital I kapital D.

175
00:08:42,990 --> 00:08:44,240
Və mənim kodu yalnız iş deyil.

176
00:08:44,240 --> 00:08:45,630
Mən niyə anlamaq bilməz.

177
00:08:45,630 --> 00:08:49,490
Bu, həqiqətən, həqiqətən, həqiqətən, bir var
hamı edir ki, ümumi səhv,

178
00:08:49,490 --> 00:08:51,890
hətta ekspertlər
əbədi bunu.

179
00:08:51,890 --> 00:08:55,410
Belə ki, yalnız, getElementById xəbərdar ola bilər,
ki, d kiçik deyil.

180
00:08:55,410 --> 00:09:00,080
Və ümid edirəm ki, siz bir neçə saxlayır
dert ən azı dəqiqə.

181
00:09:00,080 --> 00:09:02,204
>> Belə ki, nə bu bütün bizə nə deyir?

182
00:09:02,204 --> 00:09:03,120
Biz bu üsulları var.

183
00:09:03,120 --> 00:09:04,161
Biz bu xüsusiyyətləri var.

184
00:09:04,161 --> 00:09:06,610
İndi biz başlamaq əgər
sənəd, sənəd.

185
00:09:06,610 --> 00:09:10,220
nə olursa olsun, biz indi hər hansı bir əldə edə bilərsiniz
bizim web page bir parça

186
00:09:10,220 --> 00:09:14,870
biz JavaScript istifadə etmək istəyirəm ki,
yalnız bu üsulları zəng

187
00:09:14,870 --> 00:09:19,940
və xassələri yararlanarak
biz müxtəlif yerlərdə tapmaq.

188
00:09:19,940 --> 00:09:24,890
>> Bu, wordy əldə edə bilərsiniz
document.getElementByID,

189
00:09:24,890 --> 00:09:28,560
bəlkə uzun tag adı,
bəlkə daha sonra zəng edin.

190
00:09:28,560 --> 00:09:31,230
Things bir az wordy əldə edə bilərsiniz.

191
00:09:31,230 --> 00:09:34,480
Və proqramçılar kimi, var kimi
yəqin ki, bu video çox görülən,

192
00:09:34,480 --> 00:09:36,600
biz wordy şeyi kimi deyil.

193
00:09:36,600 --> 00:09:38,520
>> Biz tez şeyə qadirdir olmaq istəyirəm.

194
00:09:38,520 --> 00:09:42,640
Beləliklə, biz bir daha istəyirəm
qısa yol bir şey demək.

195
00:09:42,640 --> 00:09:46,270
Belə ki, potensial bu cür
bir şey anlayışı jQuery çağırıb.

196
00:09:46,270 --> 00:09:49,170
İndi jQuery JavaScript deyil.

197
00:09:49,170 --> 00:09:50,350
Bu JavaScript hissəsi deyil.

198
00:09:50,350 --> 00:09:54,790
>> Bu yazılmış bir kitabxanadır
bəzi JavaScript proqramçılar tərəfindən

199
00:09:54,790 --> 00:09:57,060
təxminən 10 il əvvəl.

200
00:09:57,060 --> 00:10:01,300
Və onun məqsədi bu nədir asanlaşdırmaq üçün
adlı klient scripting olan

201
00:10:01,300 --> 00:10:04,310
biz yalnız nə əsasən
DOM manipulyasiya ilə söhbət.

202
00:10:04,310 --> 00:10:11,090
Belə ki, Mən dəyişdirmək istədi
Mənim web page fon rəngi, bəlkə

203
00:10:11,090 --> 00:10:11,980
xüsusi Div.

204
00:10:11,980 --> 00:10:15,325
>> Burada yəqin alıram
ElementById colorDiv.

205
00:10:15,325 --> 00:10:16,950
Mən onun fon rəngi təyin etmək istəyirəm.

206
00:10:16,950 --> 00:10:20,720
Mən yalnız təmiz JavaScript istifadə edirəm əgər
Document Object Model istifadə edərək,

207
00:10:20,720 --> 00:10:23,990
ki, sağ məhsulları bir çox var?
document.getElementByID

208
00:10:23,990 --> 00:10:25,531
colorDiv.style.backgroundColor yaşıl =.

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
Yəni bir çox idi.

212
00:10:30,110 --> 00:10:31,720
Bu da yazın bir çox var.

213
00:10:31,720 --> 00:10:35,760
Və belə jQuery, biz bəlkə demək olar
Bu bir az daha yığcam.

214
00:10:35,760 --> 00:10:39,350
onu olmaqla off ticarət bəlkə bir az var
bit qəflətən daha sirli,

215
00:10:39,350 --> 00:10:39,850
sağ?

216
00:10:39,850 --> 00:10:43,580
>> Ən azı uzun bir az daha
biz edirik nə kimi izahlı.

217
00:10:43,580 --> 00:10:49,947
Bu dollar işarəsi, parantez,
bir quote, hash, colorDiv, sağ?

218
00:10:49,947 --> 00:10:50,780
Bunun mənası nədir?

219
00:10:50,780 --> 00:10:53,640
Yaxşı, ki, yalnız əsasən
document.getElementByID colorDiv.

220
00:10:53,640 --> 00:10:58,700
>> Amma bu stenoqrafiya bu sort
jQuery istifadə edərək bunu yol.

221
00:10:58,700 --> 00:11:01,380
Yalnız indi bir nəzər salaq
müxtəlif yollarla bir neçə

222
00:11:01,380 --> 00:11:04,520
Mən, həqiqətən, bilər ki,
bu Document Object istifadə

223
00:11:04,520 --> 00:11:06,807
Model mənim site ədəd manipulyasiya.

224
00:11:06,807 --> 00:11:09,140
Xüsusilə, gedirik
manipulyasiya iş üçün

225
00:11:09,140 --> 00:11:14,090
xüsusi rəng
Bir web page Div, colorDiv.

226
00:11:14,090 --> 00:11:15,299
Belə ki, bir nəzər salaq.

227
00:11:15,299 --> 00:11:15,798
Oldu.

228
00:11:15,798 --> 00:11:16,700
Mən bir səhifə deyiləm.

229
00:11:16,700 --> 00:11:20,750
Siz download zaman test.html deyirlər
bu siz bu ilə misgər istəyirsinizsə.

230
00:11:20,750 --> 00:11:24,730
Mən bir dəstə var
Bu səhifədə düymələri.

231
00:11:24,730 --> 00:11:27,730
Mən fərdi funksiyaları deyirəm
fon rəngi, yaşıl, bənövşəyi üçün,

232
00:11:27,730 --> 00:11:31,330
narıncı, qırmızı, mavi, bir funksiyası
background rəng, hadisə handler

233
00:11:31,330 --> 00:11:34,360
fon rəngi, və jQuery istifadə üçün.

234
00:11:34,360 --> 00:11:38,147
Mən nə söhbət edirəm
mən bunu edirəm?

235
00:11:38,147 --> 00:11:39,230
Beləliklə, biz düymələri gördüm.

236
00:11:39,230 --> 00:11:41,521
İndi bir nəzər salaq
burada mənbə kodu bəzi.

237
00:11:41,521 --> 00:11:44,770
Biz test.html ilə başlamaq lazımdır.

238
00:11:44,770 --> 00:11:48,100
Fon üçün belə fərdi funksiyaları
rəng Burada tipli olduğunuz nə.

239
00:11:48,100 --> 00:11:49,350
Mənə bir az hərəkət edək.

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

241
00:11:56,170 --> 00:11:58,820
>> Və mən görəcəksiniz
Bu düymələri müəyyən etmişik

242
00:11:58,820 --> 00:12:03,990
bu düyməni tıklandığında demək,
bənövşəyi çevirmək funksiyası zəng.

243
00:12:03,990 --> 00:12:06,670
Bu düyməsini basın zaman, daha doğrusu,
funksiyası yaşıl çevirmək zəng

244
00:12:06,670 --> 00:12:08,710
qırmızı, narıncı çevirmək, mavi açın.

245
00:12:08,710 --> 00:12:11,880
Siz yəqin ki, bu ki, tahmin edə bilərsiniz
ən yaxşı dizayn bəlkə deyil

246
00:12:11,880 --> 00:12:12,460
mənada, sağ?

247
00:12:12,460 --> 00:12:16,490
>> Mən əgər gözəl olardı
daha ümumi yanaşma var.

248
00:12:16,490 --> 00:12:19,570
Bəli, ilk biz bir nəzər lazımdır
bu beş funksiyaları nə

249
00:12:19,570 --> 00:12:24,400
document.getElementByID
bənövşəyi colorDiv.style.background =

250
00:12:24,400 --> 00:12:27,250
qırmızı, yaşıl, narıncı
müvafiq olaraq, mavi.

251
00:12:27,250 --> 00:12:30,930
Belə ki, xüsusilə ən yaxşı dizayn.

252
00:12:30,930 --> 00:12:33,390
>> düymələri növbəti set
Mən yazdıq var

253
00:12:33,390 --> 00:12:36,380
adlı bir funksiyası
ki, yəqin rəngini

254
00:12:36,380 --> 00:12:38,960
onun arqument kimi bir simli qəbul edir.

255
00:12:38,960 --> 00:12:40,290
Belə ki, bu bir az daha yaxşıdır.

256
00:12:40,290 --> 00:12:43,840
Qırmızı, bənövşəyi, yaşıl, narıncı,
blue artıq bir dəlildir.

257
00:12:43,840 --> 00:12:46,230
Mən bir daha ümumi yazdıq
hal JavaScript funksiyası,

258
00:12:46,230 --> 00:12:47,771
bu kimi bir şey ola bilər.

259
00:12:47,771 --> 00:12:48,680
Mən keçən alıram.

260
00:12:48,680 --> 00:12:52,090
Bu funksiya dəyişiklik rəng
rəng adlı bir dəlil gözləyirik.

261
00:12:52,090 --> 00:12:54,970
Mən müəyyən deyirəm
rəng fon rəngi.

262
00:12:54,970 --> 00:12:58,390
Belə ki, burada mən burada var nə edir.

263
00:12:58,390 --> 00:12:59,770
Belə ki, bir az daha yaxşıdır.

264
00:12:59,770 --> 00:13:02,740
>> Amma edə bilər
daha yaxşı edə.

265
00:13:02,740 --> 00:13:06,140
Biz nəzər enmək əgər
Tədbirdə handler vəziyyəti,

266
00:13:06,140 --> 00:13:07,860
İndi bütün bu zənglər eyni baxmaq.

267
00:13:07,860 --> 00:13:10,340
Siz geri əgər bizim
Tədbirdə işleyicileri müzakirəsi,

268
00:13:10,340 --> 00:13:15,770
Mən haqqında məlumat əldə edə bilərsiniz
Bu düymələri tıklayan və istifadə edilib.

269
00:13:15,770 --> 00:13:19,560
>> Və belə event.JavaScript, mən var
yazılı dəyişiklik rəng hadisə olan

270
00:13:19,560 --> 00:13:21,110
tıklayan olan düyməsini tutulur.

271
00:13:21,110 --> 00:13:23,250
Ki, trigger obyekt xətt var.

272
00:13:23,250 --> 00:13:25,240
Və sonra burada, bu, həqiqətən wordy olur.

273
00:13:25,240 --> 00:13:27,420
Amma nə edirəm mən var
fon qəbulu

274
00:13:27,420 --> 00:13:30,340
triggerObject inner.HTML rəng.

275
00:13:30,340 --> 00:13:34,170
Bu mətn var
düyməsini tags arasında.

276
00:13:34,170 --> 00:13:36,500
>> Və sonra mən yəqin var
kiçik müəyyən etmək.

277
00:13:36,500 --> 00:13:40,780
Və mən bütün çevirə bilərsiniz necə
string istifadə JavaScript kiçik

278
00:13:40,780 --> 00:13:42,940
ki, üsul kiçik.

279
00:13:42,940 --> 00:13:46,570
Mən bir rəng təyin Çünki,
Mən burada çalışıram kimi,

280
00:13:46,570 --> 00:13:48,260
rəng bütün kiçik olmalıdır.

281
00:13:48,260 --> 00:13:50,920
>> Amma mən düyməsini
biz başqa bir nəzər əgər,

282
00:13:50,920 --> 00:13:55,890
mətn olduğunu qeyd
bənövşəyi üçün kapital P ilə yazılı.

283
00:13:55,890 --> 00:13:59,140
Və sonra çox
Burada alt, mən yəqin

284
00:13:59,140 --> 00:14:02,630
cəhd və həmçinin bu istifadə jQuery yoxdur.

285
00:14:02,630 --> 00:14:06,000
Və bu halda, mən, həqiqətən deyiləm
bütün bir funksiyası zəng.

286
00:14:06,000 --> 00:14:11,430
Mən yalnız mən sinif deyiləm ki, bildirib etdik
Bu düyməsinə istifadə edərək, bir JQ düyməsini edir.

287
00:14:11,430 --> 00:14:12,360
Bu belədir.

288
00:14:12,360 --> 00:14:14,950
>> Belə ki, necə jQuery edirəm nə bilir?

289
00:14:14,950 --> 00:14:18,740
Bəli, bu üstünlüklərindən biridir
jQuery mənfi cəhətləri doğramaq.

290
00:14:18,740 --> 00:14:21,560
Mənə şeyə imkan bilər
çox yığcam, amma bəlkə deyil

291
00:14:21,560 --> 00:14:22,570
kimi daxilən.

292
00:14:22,570 --> 00:14:25,570
Bəlkə o digər üç etmək
az daha edirəm nə hiss.

293
00:14:25,570 --> 00:14:29,010
Burada, baxmayaraq ki, nə olub?

294
00:14:29,010 --> 00:14:31,940
>> Görünür, yaratmaq
anonim funksiyası

295
00:14:31,940 --> 00:14:36,790
ki, yük zaman mənim sənəd
, belə ki, document.ready hazır

296
00:14:36,790 --> 00:14:38,760
bir funksiyası baş verəcək.

297
00:14:38,760 --> 00:14:40,490
Əsasən, bir sənəd hazırdır?

298
00:14:40,490 --> 00:14:42,310
Mənim səhifə yüklənmiş zaman var.

299
00:14:42,310 --> 00:14:46,540
>> Belə ki, tezliklə mənim səhifə yüklənən kimi,
funksiyası aşağıdakı həmişə hazırdır.

300
00:14:46,540 --> 00:14:54,310
Bildirilir ki, əgər növü jQButton obyekti,
və ya sinif jQButton tıklayan əgər,

301
00:14:54,310 --> 00:14:55,570
bu funksiyanı yerinə.

302
00:14:55,570 --> 00:14:59,360
Belə ki, burada iki anonim funksiyaları var,
bir başqa daxilində müəyyən edilmişdir.

303
00:14:59,360 --> 00:15:03,930
>> Mənim bütün kontekstində So
burada indiyə qədər mənim səhifə

304
00:15:03,930 --> 00:15:06,520
Bu yükləyir zaman bu funksiyanı çağırır.

305
00:15:06,520 --> 00:15:09,740
Bu funksiya gözləyir
bir düyməsinə tıklayan.

306
00:15:09,740 --> 00:15:14,490
Və bir düyməsinə tıklandığında, JQ
düyməsini xüsusi tıklandığında,

307
00:15:14,490 --> 00:15:17,150
bu digər çağırır
funksiyası gedir

308
00:15:17,150 --> 00:15:21,250
fon təyin etmək
colorDiv rəng olmaq

309
00:15:21,250 --> 00:15:25,990
hər hansı mətn tags arasında edir.

310
00:15:25,990 --> 00:15:28,050
>> Bu anlayışdır
olan düyməsinə tıklandığında.

311
00:15:28,050 --> 00:15:31,230
Lakin başqa, bu sort edir
bir hadisə bənzər davranır.

312
00:15:31,230 --> 00:15:34,460
Bu, sadəcə eyni şəkildə Mən
jQuery bu ifadə edirəm.

313
00:15:34,460 --> 00:15:36,790
Yenə də, bu, yəqin ki, bir
daha çox qorxuducu.

314
00:15:36,790 --> 00:15:40,840
Bu kimi aydın deyil
event.js kimi bir şey,

315
00:15:40,840 --> 00:15:45,080
olan bəlkə bir az daha
verbose, lakin bir az daha az

316
00:15:45,080 --> 00:15:46,000
qorxuducu.

317
00:15:46,000 --> 00:15:51,460
>> Amma biz mənim brauzerinizin üzərində geri pop əgər
pəncərə, Mən də clicking-- başlamaq əgər,

318
00:15:51,460 --> 00:15:52,690
ki, bənövşəyi dəyişib.

319
00:15:52,690 --> 00:15:54,450
Bu string metodundan istifadə yaşıl rəngdədir.

320
00:15:54,450 --> 00:15:56,500
Bu hadisə handler istifadə narıncı edir.

321
00:15:56,500 --> 00:15:58,300
>> Bu hüquq, jQuery istifadə edərək qırmızı?

322
00:15:58,300 --> 00:16:01,270
Onlar bütün eyni davranırlar.

323
00:16:01,270 --> 00:16:06,509
Onlar yalnız müxtəlif istifadə etmək
problemi həll etmək üçün yaxınlaşır.

324
00:16:06,509 --> 00:16:08,550
Daha çox var
jQuery sonra əlbəttə ki, istəyirik

325
00:16:08,550 --> 00:16:10,050
Bu video haqqında danışmaq olacaq.

326
00:16:10,050 --> 00:16:15,410
Daha çox öyrənmək istəyirsinizsə Lakin, siz
sənədlərin jQuery növ getmək

327
00:16:15,410 --> 00:16:19,710
və haqqında bir az daha ətraflı məlumat
Bu çox çevik kitabxana, olan

328
00:16:19,710 --> 00:16:22,550
klient etmək üçün böyük
Belə biz nə etdiklərinizi kimi scripting

329
00:16:22,550 --> 00:16:26,240
görünüşünü manipulyasiya
və bizim web page hiss

330
00:16:26,240 --> 00:16:28,750
Document Object Model.

331
00:16:28,750 --> 00:16:29,650
Mən Doug Lloyd edirəm.

332
00:16:29,650 --> 00:16:31,930
Bu CS50 edir.

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