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

2
00:00:04,439 --> 00:00:07,230
Doug LLOYD: Bu videoda, biz istedik
Ayrı dikkat seslenmesini

3
00:00:07,230 --> 00:00:09,110
çok özel için
JavaScript elemanı

4
00:00:09,110 --> 00:00:11,350
kullanışlı bulabileceğiniz
ne zaman başlıyoruz

5
00:00:11,350 --> 00:00:15,750
web sayfalarını manipüle çalışmak ve
Web sayfasının içeriğini değiştirerek

6
00:00:15,750 --> 00:00:16,460
anında.

7
00:00:16,460 --> 00:00:19,450
Ve bu kavramı var
Document Object Model.

8
00:00:19,450 --> 00:00:23,030
Yani biz, bizim videoda gördüm
JavaScript, nesneler çok esnektir.

9
00:00:23,030 --> 00:00:24,750
>> Ve onlar çeşitli alanları içerebilir.

10
00:00:24,750 --> 00:00:28,075
Ve biz bir sürü gitmedi gerçi
detay, bu alanlar ya da özellikleri,

11
00:00:28,075 --> 00:00:30,200
biz muhtemelen daha olur
uygun onları arayın

12
00:00:30,200 --> 00:00:33,915
Hatta, bir nesnenin bağlamında,
bu özellikler diğer nesneleri olabilir.

13
00:00:33,915 --> 00:00:36,210
Ve bu nesnelerin içinde
diğer amaçları olabilir.

14
00:00:36,210 --> 00:00:39,630
>> Bu çok büyük bir nesne var
diğer nesnelerin bir sürü

15
00:00:39,630 --> 00:00:43,550
ve bunun içinde, hangi tür
Büyük bir ağacın bu fikri oluşturur.

16
00:00:43,550 --> 00:00:47,540
Şimdi, belge nesnesi olan bir
JavaScript çok özel nesne

17
00:00:47,540 --> 00:00:52,580
Bu tüm web organize
şemsiye bu tür altındaki sayfa

18
00:00:52,580 --> 00:00:53,470
Bir nesnenin.

19
00:00:53,470 --> 00:00:56,770
Ve böylece, belgenin içinde
Nesne sunan nesnelerdir

20
00:00:56,770 --> 00:00:59,630
Web sayfasının baş ve gövde.

21
00:00:59,630 --> 00:01:03,760
>> Bunların İçinde diğer vardır
nesneler, vesaire, vesaire,

22
00:01:03,760 --> 00:01:08,411
tüm web sayfası vardır kadar
bu büyük nesne düzenlenmiştir.

23
00:01:08,411 --> 00:01:09,660
Baş sağa, burada ne var?

24
00:01:09,660 --> 00:01:12,170
Peki, biz nasıl çalıştığını biliyorum
JavaScript nesnelerle.

25
00:01:12,170 --> 00:01:15,840
>> Biz bir nesne varsa, böylece
Bu, bizim tüm web sayfası anlamına gelir

26
00:01:15,840 --> 00:01:19,590
Doğru arayarak demektir
yöntemleri o nesneyi işlemek için

27
00:01:19,590 --> 00:01:22,360
veya bazı modifiye
özelliklerinin biz

28
00:01:22,360 --> 00:01:25,500
unsurlarını değiştirebilir
Bizim sayfa programlı

29
00:01:25,500 --> 00:01:30,210
JavaScript kullanarak yerine sahip
HTML, diyelim ki, şeyleri kod.

30
00:01:30,210 --> 00:01:33,760
Yani burada bir örnek
web sayfası çok basit, değil mi?

31
00:01:33,760 --> 00:01:35,850
Bu HTML etiketleri, kafa var.

32
00:01:35,850 --> 00:01:37,979
>> Içinde bir başlık, merhaba dünya var.

33
00:01:37,979 --> 00:01:38,770
Sonra bir vücuda sahip.

34
00:01:38,770 --> 00:01:40,686
Bunun içinde, ben
Üç farklı şeyler.

35
00:01:40,686 --> 00:01:44,170
Ben, bir h2 başlık etiketine sahip
Bir paragraf, bir bağlantı.

36
00:01:44,170 --> 00:01:45,920
Bu çok basit bir web sayfası.

37
00:01:45,920 --> 00:01:48,590
>> Peki, olabilir belge
gibi bu görünüm için itiraz?

38
00:01:48,590 --> 00:01:50,700
Eh, biraz var
Belki ilk başta korkutucu.

39
00:01:50,700 --> 00:01:52,510
Ama bu gerçekten sadece bir büyük ağaç var.

40
00:01:52,510 --> 00:01:54,890
Ve bunun çok kökünde belgedir.

41
00:01:54,890 --> 00:02:00,030
>> Belge başka bir şeydir Inside
Benim sayfanın HTML atıfta nesnesi.

42
00:02:00,030 --> 00:02:02,660
Ve benim sayfa HTML tüm bu olduğunu.

43
00:02:02,660 --> 00:02:06,900
Ve sonra HTML içine
Nesne, bir kafa nesnesi var,

44
00:02:06,900 --> 00:02:09,000
orada hangi şeyi ifade eder.

45
00:02:09,000 --> 00:02:11,009
>> Ve orada iç,
Ben bir başlık nesnesi var.

46
00:02:11,009 --> 00:02:15,620
Ve orada iç, ben başka var
bu sadece merhaba dünya nesne.

47
00:02:15,620 --> 00:02:18,020
Benim bir vücuda sahip olabilir
Böyle temsil etti.

48
00:02:18,020 --> 00:02:22,850
>> Vücudumun içinde ben h2 var
Nesne ve paragraf için p nesnesi

49
00:02:22,850 --> 00:02:25,270
ve bir bağlantı için bir bir nesne.

50
00:02:25,270 --> 00:02:29,660
Ve böylece tüm bu hiyerarşi
Büyük bir ağaç olarak temsil edilebilir

51
00:02:29,660 --> 00:02:31,990
Daha küçük Little sürü
şeyler o dışarı çıkıyor.

52
00:02:31,990 --> 00:02:33,740
Şimdi, tabii ki, ne zaman
Biz biz, programlama ediyoruz

53
00:02:33,740 --> 00:02:35,560
Büyük bir ağaç gibi şeyler düşünmüyorum.

54
00:02:35,560 --> 00:02:37,980
Biz gerçek görmek istiyorum
Kod ile ilgili şeyler.

55
00:02:37,980 --> 00:02:40,790
>> Ve neyse ki, biz
Bizim geliştirici araçları kullanmak

56
00:02:40,790 --> 00:02:46,080
aslında bakmak için
Bu web sitesinin belge nesnesi.

57
00:02:46,080 --> 00:02:48,150
Ve en yapalım.

58
00:02:48,150 --> 00:02:49,580
Bu yüzden bir tarayıcı sekmesi açtık.

59
00:02:49,580 --> 00:02:51,540
>> Ve ben Geliştirici Araçları açtık.

60
00:02:51,540 --> 00:02:54,460
Ve JavaScript benim video, ben
Konsol olmadığı belirtilen

61
00:02:54,460 --> 00:02:56,770
Sadece bir yerde nerede
Biz bilgiyi yazdırmak,

62
00:02:56,770 --> 00:02:59,560
o da bir yerde nerede
Biz giriş bilgilerinizi yapabilirsiniz.

63
00:02:59,560 --> 00:03:01,380
Bu bağlamda, ya
Ben söylemek için gidiyorum

64
00:03:01,380 --> 00:03:05,720
Ben geri almak istiyorum
Belge nesneler,

65
00:03:05,720 --> 00:03:07,502
bu yüzden ona bir göz başlayabilirsiniz.

66
00:03:07,502 --> 00:03:08,460
Peki bunu nasıl yapabilirim?

67
00:03:08,460 --> 00:03:10,740
Eh, ben istiyorum
gerçekten güzel organize,

68
00:03:10,740 --> 00:03:16,317
Ben console.dir, D-I-R söylemek için gidiyorum.
Şimdi, ben sadece baskı console.log kullanın

69
00:03:16,317 --> 00:03:17,400
dışında bir şey çok basit.

70
00:03:17,400 --> 00:03:20,450
Ama bu organize etmek istiyorsanız
hiyerarşik bir nesne gibi,

71
00:03:20,450 --> 00:03:23,800
Ben bu tür yapısal istiyorum
Bir dizin yapısı gibi.

72
00:03:23,800 --> 00:03:27,400
>> Yani belgeyi console.dir istiyorum.

73
00:03:27,400 --> 00:03:28,430
Ben Enter tuşuna gidiyorum.

74
00:03:28,430 --> 00:03:32,350
Ve hemen altında şimdi,
ve ben, burada yakınlaştırmak olacak

75
00:03:32,350 --> 00:03:36,000
Ben bu yanıtı belgesini var
Bunun yanında küçük bir ok ile.

76
00:03:36,000 --> 00:03:39,470
Şimdi, bu oku açtığınızda,
bir sürü şey orada oluyor.

77
00:03:39,470 --> 00:03:42,560
>> Ama biz çok göz ardı etmek gidiyoruz
o ve odak sadece tür

78
00:03:42,560 --> 00:03:46,250
En önemli kısmı, biz o kadar
Bu belgeyi gezinmek için başlayabilirsiniz.

79
00:03:46,250 --> 00:03:50,125
DOM daha çok şey var
düğümleri ve alt düğümleri sadece ebeveyn.

80
00:03:50,125 --> 00:03:51,500
Yardımcı bir sürü var.

81
00:03:51,500 --> 00:03:52,280
>> Yani bu kadar açacağım.

82
00:03:52,280 --> 00:03:54,610
Ve bir sürü var
şeyler olduğunu açılır.

83
00:03:54,610 --> 00:03:59,000
Ama umurumda hepsi
Burada, çocuk düğümleri.

84
00:03:59,000 --> 00:04:00,410
En bu açalım.

85
00:04:00,410 --> 00:04:03,810
>> Orada Inside görüyorum
Tanıdık bir şey, HTML.

86
00:04:03,810 --> 00:04:07,670
Bizim belgenin içinde çok
Bir seviye aşağı HTML.

87
00:04:07,670 --> 00:04:08,550
Bunu açmak.

88
00:04:08,550 --> 00:04:10,380
Ne bekliyoruz?

89
00:04:10,380 --> 00:04:13,760
>> Bizim diyagramı hatırlayacak olursak,
Biz HTML içinde ne bulmak gerekir?

90
00:04:13,760 --> 00:04:17,275
Ağaç altında hangi iki düğüm vardır?

91
00:04:17,275 --> 00:04:17,899
Hadi bulalım.

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

93
00:04:18,940 --> 00:04:22,079
Biz onun alt düğümleri inmek.

94
00:04:22,079 --> 00:04:23,440
>> Bu açık Pop.

95
00:04:23,440 --> 00:04:25,990
Baş ve vücut var.

96
00:04:25,990 --> 00:04:28,540
Ve biz başını açabilirsiniz.

97
00:04:28,540 --> 00:04:30,460
Onun alt düğümleri gidin.

98
00:04:30,460 --> 00:04:31,460
Peki, başlık var.

99
00:04:31,460 --> 00:04:33,293
>> Ve biz gidebiliriz ve
bu şekilde sonsuza dek.

100
00:04:33,293 --> 00:04:34,770
Biz de beden ile bu yapabilirdi.

101
00:04:34,770 --> 00:04:40,090
Ama bize bakmak için bir yol var
Büyük bir nesne olarak düzenlenen belge.

102
00:04:40,090 --> 00:04:42,610
Biz bakarsanız bir büyük
Bir çok benziyor nesne

103
00:04:42,610 --> 00:04:47,480
kodu gibi, biz başlayabiliriz demektir
kullanarak bu büyük nesneyi işlemek için

104
00:04:47,480 --> 00:04:51,220
Kod ne değiştirmek için bizim
Web sitesi görünüyor ve hissediyor.

105
00:04:51,220 --> 00:04:54,920
>> Yani oldukça güçlü bir araç var
Şimdi bizim emrinde.

106
00:04:54,920 --> 00:04:57,360
Biz sadece gördüğümüz gibi Yani,
Belge nesnesi

107
00:04:57,360 --> 00:05:01,392
ve bunun içinde tüm nesneleri
Sadece, özellikler ve yöntemler var

108
00:05:01,392 --> 00:05:04,100
biz ettik başka bir nesne gibi
JavaScript ile çalışmaktadır.

109
00:05:04,100 --> 00:05:08,370
Ama biz bu özellikleri kullanabilir ve
tür detaya bu yöntemleri kullanın

110
00:05:08,370 --> 00:05:10,900
ve büyük belgeden almak
alt ve alt ve alt

111
00:05:10,900 --> 00:05:13,360
ince ve ince taneler
detay, biz gelene kadar

112
00:05:13,360 --> 00:05:17,510
Bir çok özel bir parça olsun bizim
Biz değiştirmek istediğiniz web sayfası.

113
00:05:17,510 --> 00:05:22,700
>> Ve biz özelliklerini güncellemek zaman
Nesne Belge ya da bu yöntemleri çağırmak,

114
00:05:22,700 --> 00:05:24,450
şeyler bizim web sayfasında ortaya çıkabilir.

115
00:05:24,450 --> 00:05:28,420
Ve biz herhangi bir serinletici yapmanız gerekmez
Bu değişikliklerin etkili olması için.

116
00:05:28,420 --> 00:05:33,160
>> Ve bu oldukça serin yetenek var
Biz koduyla çalışırken var.

117
00:05:33,160 --> 00:05:37,185
Peki bu özelliklerin bazıları nelerdir
Bir belge nesnesi parçası olduğunu nelerdir?

118
00:05:37,185 --> 00:05:40,100
Eh, muhtemelen gördüm
Bunların çift gerçekten hızlı

119
00:05:40,100 --> 00:05:42,700
Biz sıkıştırma gibi
Dev Belgede

120
00:05:42,700 --> 00:05:45,150
Nesne biz sadece web tarayıcısında gördüm.

121
00:05:45,150 --> 00:05:48,420
>> Fakat bu özelliklerin bir çift
İç HTML gibi şeyler olabilir.

122
00:05:48,420 --> 00:05:52,950
Ve hatta bana çağırmak olabilir
JavaScript video istimal bu

123
00:05:52,950 --> 00:05:54,950
en sonunda ben
olaylar hakkında konuşuyordu.

124
00:05:54,950 --> 00:05:56,125
Bu iç HTML neydi?

125
00:05:56,125 --> 00:05:59,030
Eh, bu sadece ne
etiketleri arasında.

126
00:05:59,030 --> 00:06:01,590
>> Ve böylece iç HTML,
Örneğin, başlığın

127
00:06:01,590 --> 00:06:05,390
biz tutmuş eğer etiket, gidiş
Bir an önce bu örnekte

128
00:06:05,390 --> 00:06:08,020
merhaba dünya olurdu.

129
00:06:08,020 --> 00:06:10,140
Bu bizim sayfanın başlığı oldu.

130
00:06:10,140 --> 00:06:12,370
Diğer özellikler
düğüm adını, dahil olduğu

131
00:06:12,370 --> 00:06:15,810
Bir HTML adıdır
başlığı gibi eleman.

132
00:06:15,810 --> 00:06:19,100
Kimliği Kimliği,
Bir HTML elemanı bağlıyorlar.

133
00:06:19,100 --> 00:06:23,790
>> Biz özel işaret olduğunu hatırlayın
Bizim HTML özgü unsurlar

134
00:06:23,790 --> 00:06:27,510
genellikle kimlik özniteliği ile
CSS bağlamında kullanışlı geliyor,

135
00:06:27,510 --> 00:06:29,000
Özellikle.

136
00:06:29,000 --> 00:06:33,217
Bir referans olan üst düğüm,
sadece yukarı yukarıda beni DOM ne.

137
00:06:33,217 --> 00:06:35,800
Ve çocuk düğümleri, hangi bir
aşağı bana aşağıda ne referans.

138
00:06:35,800 --> 00:06:37,950
Ve biz bu bir sürü gördüm
Sadece bakarak.

139
00:06:37,950 --> 00:06:42,970
Elimizdeki nasıl Çocuk düğümleri, işte
ağaca alt ve alt.

140
00:06:42,970 --> 00:06:46,590
>> , Nitelikleri bu sadece bir dizi var
HTML elemanının bağlıyor.

141
00:06:46,590 --> 00:06:50,270
Yani niteliklerin bir örnek olabilir
Bir resim etiketi varsa olabilir,

142
00:06:50,270 --> 00:06:54,090
genellikle bir kaynak niteliği vardır,
belki yükseklik ve genişlik nitelik.

143
00:06:54,090 --> 00:06:57,120
Ve böylece sadece bir dizi olurdu
ilişkili niteliklerin tüm

144
00:06:57,120 --> 00:06:59,300
HTML elemanı ile.

145
00:06:59,300 --> 00:07:04,140
>> Stil başka biri olduğunu
CSS temsil ediyor

146
00:07:04,140 --> 00:07:06,050
Belirli bir elemanın stil.

147
00:07:06,050 --> 00:07:08,310
Ve daha sonra bu
Video, spesifik olarak olacak

148
00:07:08,310 --> 00:07:14,592
kaldıraç tarzı bir çift yapmak
sitemize değişiklikleri.

149
00:07:14,592 --> 00:07:15,800
Yani o bazı özellikler vardır.

150
00:07:15,800 --> 00:07:17,591
>> Ve ayrıca bazı vardır
biz can yöntemleri

151
00:07:17,591 --> 00:07:22,450
Ayrıca daha hızlı belki yalıtmak için kullanabileceğiniz
Belge Nesne elemanları.

152
00:07:22,450 --> 00:07:26,730
Belki de çok yönlü
Bu varlık getElementById evi.

153
00:07:26,730 --> 00:07:31,190
Yani, çünkü böyle bir şey diyebilirsiniz
o Belgenin bir yöntem olduğunu hatırlıyorum

154
00:07:31,190 --> 00:07:34,880
, Document.getElementById Nesne.

155
00:07:34,880 --> 00:07:39,820
>> Ve bu parantez içinde belirtmek
Belirli kimliğine sahip bir HTML elemanı

156
00:07:39,820 --> 00:07:42,330
Daha önce var olduğunu nitelik
ayarlamak, ve ben hemen olacak

157
00:07:42,330 --> 00:07:46,685
Bu elemanın doğru gitmek
Genel web sitesi.

158
00:07:46,685 --> 00:07:49,310
Yani belki delmek zorunda değilsiniz
Her tek kat aşağı.

159
00:07:49,310 --> 00:07:52,841
Ben sadece bunu bulmak için bu yöntemi kullanabilirsiniz,
tür bir ısı arayan füze gibi

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

161
00:07:53,340 --> 00:07:56,300
Bu sadece gider ve bulur
tam olarak aradığını.

162
00:07:56,300 --> 00:07:59,290
>> GetElementsByTagName olduğunu
ruhu çok benzer.

163
00:07:59,290 --> 00:08:02,500
Belki tüm bu bulacağını
cesur etiketleri veya p etiketlerinin tüm

164
00:08:02,500 --> 00:08:05,920
ve bana her şeyi bir dizi vermek
Ben daha sonra işe yarayabilir.

165
00:08:05,920 --> 00:08:12,080
appendChild şey ekler
aşağı ağacında bir düzey.

166
00:08:12,080 --> 00:08:16,440
>> Yani tamamen yeni bir ekleyebilirsiniz
eleman bir seviye daha düşük.

167
00:08:16,440 --> 00:08:19,700
Yoksa bu bir öğe kaldırabilirsiniz
hem de ben istiyorum bir seviye düşük

168
00:08:19,700 --> 00:08:22,870
Benim web sayfasından şey silmek için.

169
00:08:22,870 --> 00:08:28,480
Şimdi hızlı bir kodlama notu ve hızlı
baş ağrısı, umarım not kaydetme.

170
00:08:28,480 --> 00:08:31,670
>> getElementById-- d küçük olduğunu.

171
00:08:31,670 --> 00:08:36,950
Ben kaç kere söyleyemem
Kullanılmış getElementById ve büyük harfle

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

173
00:08:38,336 --> 00:08:39,460
Gerçekten yaygın çünkü.

174
00:08:39,460 --> 00:08:42,990
Biz kelime kimliği yazarsanız, bu kadar
Genellikle sermaye I başkenti D.

175
00:08:42,990 --> 00:08:44,240
Ve benim kod sadece çalışmaz.

176
00:08:44,240 --> 00:08:45,630
Ve ben neden anlamaya olamaz.

177
00:08:45,630 --> 00:08:49,490
Bu gerçekten, gerçekten, gerçekten bir
Herkes yapar ortak hata,

178
00:08:49,490 --> 00:08:51,890
bile uzmanlar
Sonsuza dek bu işi yapıyorsun.

179
00:08:51,890 --> 00:08:55,410
Yani sadece, getElementById farkında olmak,
O d küçük olduğunu.

180
00:08:55,410 --> 00:09:00,080
Ve umarım ki birkaç kaydeder
kalp ağrısı en azından dakika.

181
00:09:00,080 --> 00:09:02,204
>> Peki tüm bu bize ne anlatıyor?

182
00:09:02,204 --> 00:09:03,120
Biz bu yöntemleri var.

183
00:09:03,120 --> 00:09:04,161
Biz, bu özelliklere sahiptir.

184
00:09:04,161 --> 00:09:06,610
Şimdi, biz başlamak eğer
Belge, belge.

185
00:09:06,610 --> 00:09:10,220
ne olursa olsun, biz şimdi herhangi bir alabilirsiniz
Web sayfamızın tek parça

186
00:09:10,220 --> 00:09:14,870
Biz JavaScript kullanarak istediğiniz
Sadece bu yöntemleri arayarak

187
00:09:14,870 --> 00:09:19,940
ve özellikleri yararlanarak
Biz çeşitli yerlerde bulmak.

188
00:09:19,940 --> 00:09:24,890
>> Bu, bu söz alabilirsiniz
document.getElementById,

189
00:09:24,890 --> 00:09:28,560
Belki uzun bir etiket adı var,
belki daha sonra daha fazla çağrı yapın.

190
00:09:28,560 --> 00:09:31,230
Things biraz wordy alabilirsiniz.

191
00:09:31,230 --> 00:09:34,480
Ve programcılar, sen ettik olarak
Muhtemelen bu videoların çoğunda görülen,

192
00:09:34,480 --> 00:09:36,600
Biz wordy şeyleri sevmiyorum.

193
00:09:36,600 --> 00:09:38,520
>> Biz hızlı bir şeyler yapabilmek için istiyorum.

194
00:09:38,520 --> 00:09:42,640
Yani biz daha istiyoruz
özlü yol şey söylemek.

195
00:09:42,640 --> 00:09:46,270
Yani için potansiyel bu tür
bir şeyin kavramı jQuery denir.

196
00:09:46,270 --> 00:09:49,170
Şimdi jQuery JavaScript değildir.

197
00:09:49,170 --> 00:09:50,350
Bu JavaScript parçası değil.

198
00:09:50,350 --> 00:09:54,790
>> O yazılmıştır bir kütüphane
bazı JavaScript programcılar tarafından

199
00:09:54,790 --> 00:09:57,060
Yaklaşık 10 yıl önce.

200
00:09:57,060 --> 00:10:01,300
Ve hedefine bu ne basitleştirmek için
denilen bir istemci tarafı komut dosyası, hangi

201
00:10:01,300 --> 00:10:04,310
biz sadece temelde ne
DOM manipülasyonlar ile bahsediyoruz.

202
00:10:04,310 --> 00:10:11,090
Eğer öyleyse ben değiştirmek istedim
benim web sayfasının arka plan rengini, belki

203
00:10:11,090 --> 00:10:11,980
Belirli bir Div.

204
00:10:11,980 --> 00:10:15,325
>> Burada, ben görünüşe alıyorum
ElementById colorDiv.

205
00:10:15,325 --> 00:10:16,950
Ve ben onun arka plan rengini ayarlamak istiyorum.

206
00:10:16,950 --> 00:10:20,720
Ben sadece saf JavaScript kullanarak ediyorsam
Document Object Model kullanılarak,

207
00:10:20,720 --> 00:10:23,990
Doğru, bir sürü şey var?
document.getElementById

208
00:10:23,990 --> 00:10:25,531
colorDiv.style.backgroundColor yeşil =.

209
00:10:25,531 --> 00:10:27,260

210
00:10:27,260 --> 00:10:28,050
>> Yaşasın.

211
00:10:28,050 --> 00:10:30,110
Yani çok oldu.

212
00:10:30,110 --> 00:10:31,720
O da, yazın bir çok şey.

213
00:10:31,720 --> 00:10:35,760
Ve böylece jQuery, belki söyleyebiliriz
Bu biraz daha özlü.

214
00:10:35,760 --> 00:10:39,350
Bunu olmanın kapalı ticaret belki biraz var
bit aniden daha şifreli,

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

216
00:10:39,850 --> 00:10:43,580
>> En azından uzun biraz daha olduğunu
biz ne yapıyoruz olarak açıklayıcı.

217
00:10:43,580 --> 00:10:49,947
Bu dolar işareti, parantez,
tek tırnak, karma, colorDiv, değil mi?

218
00:10:49,947 --> 00:10:50,780
Bu ne anlama gelir?

219
00:10:50,780 --> 00:10:53,640
Peki, bu sadece temelde
document.getElementById colorDiv.

220
00:10:53,640 --> 00:10:58,700
>> Ama kestirme bu tür var
jQuery kullanarak bunu yapmanın yolu.

221
00:10:58,700 --> 00:11:01,380
Sadece şimdi bir göz atalım
farklı şekillerde bir çift

222
00:11:01,380 --> 00:11:04,520
Aslında belki o
Bu Belge Nesne kullanmak

223
00:11:04,520 --> 00:11:06,807
Model Sitemde parçalarını işlemek için.

224
00:11:06,807 --> 00:11:09,140
Özellikle, gidiyoruz
manipüle üzerinde çalışıyor

225
00:11:09,140 --> 00:11:14,090
Belirli bir renk
Bir web sayfasında Div, colorDiv.

226
00:11:14,090 --> 00:11:15,299
Yani bu bir göz atalım.

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

228
00:11:15,798 --> 00:11:16,700
Yani bir sayfada değilim.

229
00:11:16,700 --> 00:11:20,750
Indirmek zaman test.html denir
Bu, bu tamircilik istiyorum.

230
00:11:20,750 --> 00:11:24,730
Ve ben bir sürü var
Bu sayfadaki düğmeler.

231
00:11:24,730 --> 00:11:27,730
Ve ben tek tek işlevleri söylüyorum
arka plan rengi, yeşil, mor için,

232
00:11:27,730 --> 00:11:31,330
turuncu, kırmızı, mavi, tek fonksiyon
arka plan rengi için, olay işleyicisi

233
00:11:31,330 --> 00:11:34,360
arka plan rengi ve jQuery kullanarak için.

234
00:11:34,360 --> 00:11:38,147
Ne bahsediyorum
ben yapıyorum?

235
00:11:38,147 --> 00:11:39,230
Bu yüzden düğmeleri gördüm.

236
00:11:39,230 --> 00:11:41,521
Şimdi, bir göz atalım
Burada kaynak kodunun bazılarıdır.

237
00:11:41,521 --> 00:11:44,770
Biz test.html ile başlayacağız.

238
00:11:44,770 --> 00:11:48,100
Arka plan için ayrı ayrı fonksiyonlar Yani
rengi Burada yazdığınız budur.

239
00:11:48,100 --> 00:11:49,350
Bana biraz kaydırma edelim.

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

241
00:11:56,170 --> 00:11:58,820
>> Ve o ben fark edeceksiniz
Bu düğmeleri tanımladığınız

242
00:11:58,820 --> 00:12:03,990
Bu düğmeye tıklandığında demek,
mor açmak işlevini çağırın.

243
00:12:03,990 --> 00:12:06,670
Bu düğmeye tıklayarak olduğunda, daha doğrusu,
Fonksiyon yeşile çağrı,

244
00:12:06,670 --> 00:12:08,710
kırmızı renge, turuncu, mavi açın.

245
00:12:08,710 --> 00:12:11,880
Muhtemelen bu olduğunu tahmin edebilirsiniz
En iyi tasarım, belki değil

246
00:12:11,880 --> 00:12:12,460
anlamda, değil mi?

247
00:12:12,460 --> 00:12:16,490
>> Elimde olsa güzel olurdu
Daha genel bir yaklaşım var.

248
00:12:16,490 --> 00:12:19,570
Peki, ilk biz bir göz atacağız
Bu beş fonksiyonları ne

249
00:12:19,570 --> 00:12:24,400
document.getElementById
mor colorDiv.style.background =

250
00:12:24,400 --> 00:12:27,250
kırmızı, yeşil, turuncu
sırasıyla ve mavi.

251
00:12:27,250 --> 00:12:30,930
Yani, özellikle iyi tasarım.

252
00:12:30,930 --> 00:12:33,390
>> Bir sonraki düğmeler kümesi
Ben yazdım olduğunu var

253
00:12:33,390 --> 00:12:36,380
denilen tek bir işlev
görünüşte rengini değiştirmek

254
00:12:36,380 --> 00:12:38,960
Argüman olarak bir dize kabul eder.

255
00:12:38,960 --> 00:12:40,290
Yani bu biraz daha iyidir.

256
00:12:40,290 --> 00:12:43,840
Kırmızı, mor, yeşil, turuncu,
mavi artık bir argümandır.

257
00:12:43,840 --> 00:12:46,230
Bu yüzden bir daha genel yazdım
dava JavaScript işlevi,

258
00:12:46,230 --> 00:12:47,771
hangi böyle bir şey görünebilir.

259
00:12:47,771 --> 00:12:48,680
Ben geçiyorum.

260
00:12:48,680 --> 00:12:52,090
Bu işlev değişikliği renk
renk olarak adlandırılan bir argüman bekliyor.

261
00:12:52,090 --> 00:12:54,970
Ve ben set diyorum
renk arka plan rengi.

262
00:12:54,970 --> 00:12:58,390
Yani burada ben burada ne var temsil eder.

263
00:12:58,390 --> 00:12:59,770
Yani biraz daha iyi.

264
00:12:59,770 --> 00:13:02,740
>> Ama mümkün olabilir
Bundan daha iyisini.

265
00:13:02,740 --> 00:13:06,140
Biz bakmak için aşağı giderseniz
Olay işleyicisi duruma,

266
00:13:06,140 --> 00:13:07,860
Şimdi tüm bu çağrılar aynı görünüyor.

267
00:13:07,860 --> 00:13:10,340
Eğer hatırlayacak olursak bizim için
olay işleyicileri tartışma,

268
00:13:10,340 --> 00:13:15,770
Ben hakkında bilgi alabilirsiniz
Bu düğmeler tıklandığında ve kullanan oldu.

269
00:13:15,770 --> 00:13:19,560
>> Ve böylece event.JavaScript içinde, ben oldum
Yazılı değişim renk olayı, hangi

270
00:13:19,560 --> 00:13:21,110
tıklandığında hangi düğme rakamlar.

271
00:13:21,110 --> 00:13:23,250
Bu tetikleyici nesne hattı.

272
00:13:23,250 --> 00:13:25,240
Ve sonra burada, gerçekten söz alır.

273
00:13:25,240 --> 00:13:27,420
Ama ne yapıyorum ben ise
arka plan ayarlama

274
00:13:27,420 --> 00:13:30,340
triggerObject inner.HTML renk.

275
00:13:30,340 --> 00:13:34,170
Bu metin var
düğme etiketleri arasında.

276
00:13:34,170 --> 00:13:36,500
>> Ve sonra ben görünüşe sahip
küçük harfe ayarlamak için.

277
00:13:36,500 --> 00:13:40,780
Ve ben bir bütününü dönüştürebilirsiniz nasıl
Dize kullanarak JavaScript küçük harfe

278
00:13:40,780 --> 00:13:42,940
bu yöntem küçük harfe.

279
00:13:42,940 --> 00:13:46,570
Ben bir renk ayarladığınızda Çünkü,
Burada yapmaya çalışıyorum olarak,

280
00:13:46,570 --> 00:13:48,260
Renk tüm küçük olmalıdır.

281
00:13:48,260 --> 00:13:50,920
>> Ama ben vardı düğmesi,
Biz başka bir göz atın eğer,

282
00:13:50,920 --> 00:13:55,890
metin olduğunu fark
mor bir sermaye P yazılı.

283
00:13:55,890 --> 00:13:59,140
Ve sonra çok
Burada alt görünüşte

284
00:13:59,140 --> 00:14:02,630
denemek ve aynı zamanda bu kullanarak jQuery yok.

285
00:14:02,630 --> 00:14:06,000
Ve bu durumda, aslında değilim
tüm bir işlevinin çağrılması.

286
00:14:06,000 --> 00:14:11,430
Ben sadece sınıf olduğumu söyledim
Bu düğme için kullanan bir jQ düğmesi bulunur.

287
00:14:11,430 --> 00:14:12,360
Bu kadar.

288
00:14:12,360 --> 00:14:14,950
>> Peki nasıl jQuery Ben ne yapıyorum biliyor mu?

289
00:14:14,950 --> 00:14:18,740
Peki, bu avantajlarından biridir
jQuery dezavantajlarını çizgi.

290
00:14:18,740 --> 00:14:21,560
Bana bir şeyler yapmak için izin verebilirsiniz
çok özlü, ama belki değil

291
00:14:21,560 --> 00:14:22,570
olarak sezgisel.

292
00:14:22,570 --> 00:14:25,570
Belki bu diğer üç yapmak bir
biraz daha ben ne yapıyorum seziyorum.

293
00:14:25,570 --> 00:14:29,010
Burada olsa ne oluyor?

294
00:14:29,010 --> 00:14:31,940
>> Görünüşe göre, yaratma
Bir anonim işlev

295
00:14:31,940 --> 00:14:36,790
Bu yükler zaman benim belge
böylece document.ready, hazır

296
00:14:36,790 --> 00:14:38,760
bazı fonksiyon ne olacak.

297
00:14:38,760 --> 00:14:40,490
Temelde, ne zaman bir belge hazır mı?

298
00:14:40,490 --> 00:14:42,310
Benim sayfa yüklendiğinde bu.

299
00:14:42,310 --> 00:14:46,540
>> Yani en kısa sürede benim sayfa yüklendiğinde gibi,
fonksiyonu aşağıdaki her zaman hazır olduğunu.

300
00:14:46,540 --> 00:14:54,310
O diyor ki, eğer tip jQButton bir nesne,
ya da sınıf jQButton tıklandığında ise,

301
00:14:54,310 --> 00:14:55,570
Bu işlevi gerçekleştirmek.

302
00:14:55,570 --> 00:14:59,360
Yani burada iki anonim fonksiyonlar var,
bir başka içinde tanımlanmış.

303
00:14:59,360 --> 00:15:03,930
>> Benim bütün bağlamda Yani
Burada şimdiye kadar benim sayfası

304
00:15:03,930 --> 00:15:06,520
o yüklediğinde, bu işlevini çağırır.

305
00:15:06,520 --> 00:15:09,740
Ve bu fonksiyon bekliyor
Bir düğme için tıklanma.

306
00:15:09,740 --> 00:15:14,490
Ve bir düğmeye tıklandığında, jQ
düğmesi özellikle tıklandığında,

307
00:15:14,490 --> 00:15:17,150
Bu diğer aramalar
fonksiyonu, gidiyor

308
00:15:17,150 --> 00:15:21,250
arka plan ayarlamak için
colorDiv rengi olması

309
00:15:21,250 --> 00:15:25,990
herhangi bir metni etiketleri arasında yer almaktadır.

310
00:15:25,990 --> 00:15:28,050
>> Bu kavramıdır
hangi düğme tıklandığında edildi.

311
00:15:28,050 --> 00:15:31,230
Ama aksi takdirde, bu tür bir
Bir olaya benzer davranıyor.

312
00:15:31,230 --> 00:15:34,460
Sadece aynı yolu ben
jQuery bu ifade ediyorum.

313
00:15:34,460 --> 00:15:36,790
Yine, bu muhtemelen bir
çok daha korkutucu.

314
00:15:36,790 --> 00:15:40,840
Bu kadar net değil
event.js gibi bir şey,

315
00:15:40,840 --> 00:15:45,080
hangi belki biraz daha
ayrıntılı, ama biraz daha az

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

317
00:15:46,000 --> 00:15:51,460
>> Ama benim tarayıcı üzerinde geri pop eğer
Pencere, ben de clicking-- başlarsanız,

318
00:15:51,460 --> 00:15:52,690
o mor olarak değiştirildi.

319
00:15:52,690 --> 00:15:54,450
Bu dize yöntemi kullanılarak yeşil.

320
00:15:54,450 --> 00:15:56,500
Bu olay işleyicisi kullanarak turuncu.

321
00:15:56,500 --> 00:15:58,300
>> Bu hak, jQuery kullanarak kırmızı?

322
00:15:58,300 --> 00:16:01,270
Hepsi aynı davranır.

323
00:16:01,270 --> 00:16:06,509
Onlar sadece farklı kullanarak bunu
Sorunu çözmek için yaklaşımlar.

324
00:16:06,509 --> 00:16:08,550
Çok daha fazla var
jQuery sonra biz kesinlikle konum

325
00:16:08,550 --> 00:16:10,050
Bu video hakkında konuşacağım.

326
00:16:10,050 --> 00:16:15,410
Daha fazla bilgi edinmek istiyorsanız, bunu yapabilirsiniz
belgelerin jQuery tür gitmek

327
00:16:15,410 --> 00:16:19,710
ve yaklaşık biraz daha fazla bilgi
Bu çok esnek bir kütüphane, burada

328
00:16:19,710 --> 00:16:22,550
istemci tarafında yapmak için harika
Böyle ne yaptığımızı olarak scripting

329
00:16:22,550 --> 00:16:26,240
göz işlemek için
ve web sayfasının hissediyorum

330
00:16:26,240 --> 00:16:28,750
Belge Nesnesi Modeli ile.

331
00:16:28,750 --> 00:16:29,650
Ben Doug Lloyd değilim.

332
00:16:29,650 --> 00:16:31,930
Bu CS50 olduğunu.

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