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

2
00:00:04,439 --> 00:00:07,230
DOUG LLOYD: Sa video na ito, gusto naming
upang tawagan ang hiwalay na pansin

3
00:00:07,230 --> 00:00:09,110
sa isang napaka-partikular na
elemento ng JavaScript

4
00:00:09,110 --> 00:00:11,350
na maaring mahanap madaling gamitin
kapag kayo ay nagsisimula

5
00:00:11,350 --> 00:00:15,750
upang gumana sa pagmamanipula ng mga web page at
ang pagpapalit ng mga nilalaman ng iyong web page

6
00:00:15,750 --> 00:00:16,460
sa mabilisang.

7
00:00:16,460 --> 00:00:19,450
At iyan ang paniwala ng
ang Document Object Model.

8
00:00:19,450 --> 00:00:23,030
Kaya tulad ng nakita natin sa ating mga video sa
JavaScript, mga bagay ay lubos na kakayahang umangkop.

9
00:00:23,030 --> 00:00:24,750
>> At maaari nilang naglalaman ng iba't ibang larangan.

10
00:00:24,750 --> 00:00:28,075
At kahit na hindi namin ginawa pumunta sa isang pulutong ng mga
detalye, mga patlang o ari-arian,

11
00:00:28,075 --> 00:00:30,200
na gagawin namin malamang na mas
naaangkop na tawag sa kanila

12
00:00:30,200 --> 00:00:33,915
sa konteksto ng isang bagay, kahit na
mga pag-aari ay maaaring iba pang mga bagay.

13
00:00:33,915 --> 00:00:36,210
At sa loob ng mga bagay
ay maaaring maging iba pang mga bagay.

14
00:00:36,210 --> 00:00:39,630
>> Mayroon kang ito napaka malaking bagay
na may maraming mga iba pang mga bagay

15
00:00:39,630 --> 00:00:43,550
loob ng mga ito, na kung saan ang uri ng mga
lumilikha ng mga ideya na ito ng isang malaking puno.

16
00:00:43,550 --> 00:00:47,540
Ngayon, ang mga dokumento na object ay isang
napaka-espesyal na bagay sa JavaScript

17
00:00:47,540 --> 00:00:52,580
na nag-aayos ng iyong buong web
pahina sa ilalim ng ganitong uri ng mga payong

18
00:00:52,580 --> 00:00:53,470
ng isang bagay.

19
00:00:53,470 --> 00:00:56,770
At kaya sa loob ng mga dokumento
object ay mga bagay ang pagtatanghal

20
00:00:56,770 --> 00:00:59,630
ang ulo at katawan ng iyong web page.

21
00:00:59,630 --> 00:01:03,760
>> Inside ng mga iyon ay iba pang mga
mga bagay, at iba pa, at iba pa,

22
00:01:03,760 --> 00:01:08,411
hanggang ito ay ang iyong buong pahina ng web
ay organisado sa ganitong malaking object.

23
00:01:08,411 --> 00:01:09,660
Ano ang nakabaligtad dito, tama?

24
00:01:09,660 --> 00:01:12,170
Well, alam namin kung paano gumana
may mga bagay sa JavaScript.

25
00:01:12,170 --> 00:01:15,840
>> Kaya kung kami ay may isang bagay na
ay tumutukoy sa aming buong web page, na

26
00:01:15,840 --> 00:01:19,590
ibig sabihin sa pamamagitan ng pagtawag sa tamang
pamamaraan upang manipulahin object na

27
00:01:19,590 --> 00:01:22,360
o pagbabago ng mga tiyak
ng kanyang mga katangian, kami

28
00:01:22,360 --> 00:01:25,500
maaaring baguhin ang mga elemento ng
ang aming pahina ng programming

29
00:01:25,500 --> 00:01:30,210
gamit sa halip ng pagkakaroon ng JavaScript
sa code ng mga bagay-bagay sa, sabihin nating, HTML.

30
00:01:30,210 --> 00:01:33,760
Kaya narito ang isang halimbawa ng isang
napaka-simpleng web page, i-right?

31
00:01:33,760 --> 00:01:35,850
Ito ay nakuha ng HTML tags, isang ulo.

32
00:01:35,850 --> 00:01:37,979
>> Inside ng may isang pamagat, hello mundo.

33
00:01:37,979 --> 00:01:38,770
At mayroon akong isang katawan.

34
00:01:38,770 --> 00:01:40,686
Sa loob ng na, mayroon akong
tatlong iba't-ibang mga bagay-bagay.

35
00:01:40,686 --> 00:01:44,170
Mayroon akong isang h2 header tag,
isang talata, at isang link.

36
00:01:44,170 --> 00:01:45,920
Ito ay isang napaka-simpleng web page.

37
00:01:45,920 --> 00:01:48,590
>> Well, kung ano ang maaaring ang dokumento
bagay na ito para sa hitsura?

38
00:01:48,590 --> 00:01:50,700
Well, ito ay isang maliit
nakakatakot siguro sa unang.

39
00:01:50,700 --> 00:01:52,510
Ngunit ito ay talagang lamang ng isang malaking puno.

40
00:01:52,510 --> 00:01:54,890
At sa pinakadulo ng ugat ng mga ito ay dokumento.

41
00:01:54,890 --> 00:02:00,030
>> Inside ng dokumento ay ang isa pang
object nagre-refer sa HTML ng aking page.

42
00:02:00,030 --> 00:02:02,660
At ang HTML ng aking pahina ay ang lahat ng ito.

43
00:02:02,660 --> 00:02:06,900
At pagkatapos ay sa loob ng HTML
object, mayroon akong isang head object,

44
00:02:06,900 --> 00:02:09,000
na tumutukoy sa lahat ng bagay doon.

45
00:02:09,000 --> 00:02:11,009
>> At sa loob ng doon,
Mayroon akong isang pamagat object.

46
00:02:11,009 --> 00:02:15,620
At sa loob ng doon, mayroon akong ibang
bagay na lang ang hello world.

47
00:02:15,620 --> 00:02:18,020
Maaari akong magkaroon ng aking katawan
kinakatawan tulad nito.

48
00:02:18,020 --> 00:02:22,850
>> Inside ng aking katawan, mayroon akong isang h2
object at isang p object para sa talata

49
00:02:22,850 --> 00:02:25,270
at isang isang bagay para sa isang link.

50
00:02:25,270 --> 00:02:29,660
At kaya ang buong hierarchy
ay kinakatawan bilang isang malaking puno

51
00:02:29,660 --> 00:02:31,990
na may maraming mga mas maliit na maliit
mga bagay-bagay mula sa mga ito.

52
00:02:31,990 --> 00:02:33,740
Ngayon, siyempre, kapag
kami ay mga programa, kami

53
00:02:33,740 --> 00:02:35,560
hindi nag-iisip ng mga bagay na tulad ng isang malaking puno.

54
00:02:35,560 --> 00:02:37,980
Gusto naming makita ang tunay na mga
code na kaugnay na mga bagay.

55
00:02:37,980 --> 00:02:40,790
>> At sa kabutihang-palad, maaari naming
gamitin ang aming mga tool ng developer

56
00:02:40,790 --> 00:02:46,080
sa tunay na gumawa ng isang pagtingin sa
object dokumento website na ito.

57
00:02:46,080 --> 00:02:48,150
At ni gawin na ipaalam.

58
00:02:48,150 --> 00:02:49,580
Kaya ko na binuksan up ng isang tab ng browser.

59
00:02:49,580 --> 00:02:51,540
>> At iyong binuksan up ako Tool ng Developer.

60
00:02:51,540 --> 00:02:54,460
At sa aking video sa JavaScript, ako
nabanggit na ang console ay hindi

61
00:02:54,460 --> 00:02:56,770
isang lugar na naa lamang kung saan
print namin ng impormasyon,

62
00:02:56,770 --> 00:02:59,560
ito ay din ng isang lugar kung saan
Maaari naming input impormasyon.

63
00:02:59,560 --> 00:03:01,380
Sa kontekstong ito, kung ano ang
Pupunta ako sa sabihin ay

64
00:03:01,380 --> 00:03:05,720
Gusto kong makakuha ng bumalik
ang mga bagay na dokumento,

65
00:03:05,720 --> 00:03:07,502
kaya ko simulan upang magkaroon ng isang pagtingin sa mga ito.

66
00:03:07,502 --> 00:03:08,460
Kaya kung paano ang maaari kong gawin ito?

67
00:03:08,460 --> 00:03:10,740
Well, kung gusto kong
maisaayos ang mga ito ay tunay mabuti,

68
00:03:10,740 --> 00:03:16,317
Pupunta ako sa sabihin console.dir, D-I-R.
Ngayon, gagamitin ko console.log sa makatarungan print

69
00:03:16,317 --> 00:03:17,400
ang isang bagay na napaka-simple.

70
00:03:17,400 --> 00:03:20,450
Ngunit kung gusto ko upang ayusin ito
hierarchically tulad ng isang bagay,

71
00:03:20,450 --> 00:03:23,800
Gusto ko ito uri ng mga balangkas
tulad ng isang direktoryo ng istraktura.

72
00:03:23,800 --> 00:03:27,400
>> Kaya gusto kong console.dir dokumento.

73
00:03:27,400 --> 00:03:28,430
Pupunta ako sa pindutin ang Enter.

74
00:03:28,430 --> 00:03:32,350
At karapatan sa ibaba nito ngayon,
at kukunin ko na mag-zoom in dito,

75
00:03:32,350 --> 00:03:36,000
Mayroon akong dokumentong ito tugon
may isang maliit na arrow sa tabi nito.

76
00:03:36,000 --> 00:03:39,470
Ngayon, kapag binuksan ko ang arrow,
may pagpunta sa maging isang pulutong ng mga bagay-bagay.

77
00:03:39,470 --> 00:03:42,560
>> Ngunit kami ay pagpunta upang huwag pansinin ang isang pulutong
ng mga ito at lamang uri ng focus

78
00:03:42,560 --> 00:03:46,250
sa pinaka mahalagang bahagi, kaya kami
ay maaaring magsimula na mag-navigate sa dokumentong ito.

79
00:03:46,250 --> 00:03:50,125
May ng maraming higit pa sa mga DOM sa
parent lang nodes at anak nodes.

80
00:03:50,125 --> 00:03:51,500
May isang pulutong ng mga mababa stuff.

81
00:03:51,500 --> 00:03:52,280
>> Kaya ako pagpunta upang buksan ito up.

82
00:03:52,280 --> 00:03:54,610
At mayroong isang buong maraming
ng mga bagay-bagay na nagpa-pop up.

83
00:03:54,610 --> 00:03:59,000
Ngunit ang lahat ng pag-aalaga ko tungkol sa ay
karapatan dito, ang bata nodes.

84
00:03:59,000 --> 00:04:00,410
Buksan na up Hayaan.

85
00:04:00,410 --> 00:04:03,810
>> Inside ng may nakikita ko
isang bagay na pamilyar, HTML.

86
00:04:03,810 --> 00:04:07,670
Kaya sa loob ng aming mga dokumento
isang level down, HTML.

87
00:04:07,670 --> 00:04:08,550
Bukas ko na up.

88
00:04:08,550 --> 00:04:10,380
Ano ang mga namin umaasa?

89
00:04:10,380 --> 00:04:13,760
>> Kung isipin ang mo mula sa aming mga diagram,
kung ano ang dapat namin mahanap sa loob ng HTML?

90
00:04:13,760 --> 00:04:17,275
Ano ang dalawang nodes ay ibaba ito sa tree?

91
00:04:17,275 --> 00:04:17,899
Alamin natin.

92
00:04:17,899 --> 00:04:18,940
Buksan up namin HTML.

93
00:04:18,940 --> 00:04:22,079
Bumaba kami sa kanyang anak nodes.

94
00:04:22,079 --> 00:04:23,440
>> Pop na bukas.

95
00:04:23,440 --> 00:04:25,990
May ulo at katawan.

96
00:04:25,990 --> 00:04:28,540
At maaari naming buksan ang ulo.

97
00:04:28,540 --> 00:04:30,460
Pumunta sa kanyang anak nodes.

98
00:04:30,460 --> 00:04:31,460
Well, may title.

99
00:04:31,460 --> 00:04:33,293
>> At kami ay maaaring pumunta sa at
sa ganito magpakailanman.

100
00:04:33,293 --> 00:04:34,770
Kami ay maaaring gawin ito gamit ang katawan pati na rin.

101
00:04:34,770 --> 00:04:40,090
Ngunit may isang paraan para sa amin na tingnan ang mga
ang inorganisa bilang isang malaking object dokumento.

102
00:04:40,090 --> 00:04:42,610
At kung tayo ay tumingin sa isang malaking
bagay na mukhang ng maraming

103
00:04:42,610 --> 00:04:47,480
tulad ng code, na nangangahulugan na maaari naming simulan
upang manipulahin ang malaking bagay gamit

104
00:04:47,480 --> 00:04:51,220
code upang baguhin kung ano ang ating
Mukhang website at nararamdaman mo.

105
00:04:51,220 --> 00:04:54,920
>> Kaya na ang isang medyo malakas na tool
kami ay may sa aming pagtatapon ngayon.

106
00:04:54,920 --> 00:04:57,360
Kaya bilang lang namin nakita, ang
bagay mismo dokumento

107
00:04:57,360 --> 00:05:01,392
at ang lahat ng mga bagay sa loob ng mga ito
may mga katangian at mga pamamaraan, lamang

108
00:05:01,392 --> 00:05:04,100
tulad ng anumang iba pang mga bagay na hindi namin
ay nagtatrabaho sa sa JavaScript.

109
00:05:04,100 --> 00:05:08,370
Ngunit maaari naming gamitin ang mga ari-arian at
gamitin ang mga pamamaraan upang ayusin ng mag-drill down

110
00:05:08,370 --> 00:05:10,900
mula sa malaking mga dokumento at makakuha ng
pababa ng pababa at mas mababa,

111
00:05:10,900 --> 00:05:13,360
mas pinong at mas pinong haspe
ng detalye, hanggang sa kami

112
00:05:13,360 --> 00:05:17,510
makapunta sa isang napaka-tukoy na piraso ng aming
web page na gusto naming baguhin.

113
00:05:17,510 --> 00:05:22,700
>> At kapag nag-update kami ng mga ari-arian ng
Document Object o tumawag sa mga pamamaraan,

114
00:05:22,700 --> 00:05:24,450
bagay na maaaring mangyari sa aming web page.

115
00:05:24,450 --> 00:05:28,420
At hindi namin kailangan na gawin ang anumang mga nakakapreskong
upang magkaroon ng mga pagbabago ng bisa.

116
00:05:28,420 --> 00:05:33,160
>> At iyon ay isang medyo cool na kakayahan na
Mayroon kapag kami ay nagtatrabaho sa mga code.

117
00:05:33,160 --> 00:05:37,185
Kaya kung ano ang ilan sa mga pag-aari
na bahagi ng isang bagay na dokumento?

118
00:05:37,185 --> 00:05:40,100
Well, malamang na nakita mo ang isang
pares ng mga ito talagang mabilis

119
00:05:40,100 --> 00:05:42,700
bilang namin ay ang pag-zip
sa pamamagitan ng higanteng dokumento

120
00:05:42,700 --> 00:05:45,150
object lang namin nakita sa web browser.

121
00:05:45,150 --> 00:05:48,420
>> Ngunit ang isang pares ng mga pag-aari
ito ay maaaring maging mga bagay tulad ng panloob na HTML.

122
00:05:48,420 --> 00:05:52,950
At maaari mong kahit na pagpapabalik sa akin
gamit na ito sa video JavaScript

123
00:05:52,950 --> 00:05:54,950
sa dulo kapag ako
ay pakikipag-usap tungkol sa mga kaganapan.

124
00:05:54,950 --> 00:05:56,125
Ano ang mga ito sa loob ng HTML?

125
00:05:56,125 --> 00:05:59,030
Well, ito lang ang kung ano ang
sa pagitan ng mga tag.

126
00:05:59,030 --> 00:06:01,590
>> At upang ang mga panloob na HTML,
halimbawa, ng pamagat

127
00:06:01,590 --> 00:06:05,390
tag, kung kami nag-iingat ay pagpunta sa
na halimbawa ng ilang sandali ang nakalipas,

128
00:06:05,390 --> 00:06:08,020
Gusto ay kumusta mundo.

129
00:06:08,020 --> 00:06:10,140
Iyon ay ang title ng ating page.

130
00:06:10,140 --> 00:06:12,370
Iba pang mga katangian
isama ang pangalan ng node, kung saan

131
00:06:12,370 --> 00:06:15,810
ay ang pangalan ng isang HTML
elemento tulad ng mga pamagat.

132
00:06:15,810 --> 00:06:19,100
ID, kung saan ay ang ID
attribute ng isang elemento ng HTML.

133
00:06:19,100 --> 00:06:23,790
>> Alalahanin na maaari namin ang espesyal na ipahiwatig
tiyak na mga sangkap ng aming HTML

134
00:06:23,790 --> 00:06:27,510
may isang katangian ID, na karaniwang
lumapit sa magaling sa konteksto ng CSS,

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

136
00:06:29,000 --> 00:06:33,217
Parent node, na kung saan ay isang reference sa
kung ano ang up lang itaas ko ang DOM.

137
00:06:33,217 --> 00:06:35,800
At nodes bata, kung saan ay isang
reference sa kung ano ang down sa ibaba ako.

138
00:06:35,800 --> 00:06:37,950
At nakita namin ang isang pulutong ng mga na
lamang ng pagtingin sa pamamagitan.

139
00:06:37,950 --> 00:06:42,970
Nodes ng Bata, na kung paano namin nakuha
pababa ng pababa sa puno.

140
00:06:42,970 --> 00:06:46,590
>> Katangian, na lang ang isang array
ng mga katangian ng mga elemento ng HTML.

141
00:06:46,590 --> 00:06:50,270
Kaya ang isang halimbawa ng mga katangian baka
maging kung mayroon kang isang imahe na tag,

142
00:06:50,270 --> 00:06:54,090
ito ay karaniwang may isang pinagmulan attribute,
marahil ng isang taas at lapad attribute.

143
00:06:54,090 --> 00:06:57,120
At sa gayon ay magiging lamang ng isang array
ng lahat ng mga katangian na kaugnay

144
00:06:57,120 --> 00:06:59,300
sa na elemento ng HTML.

145
00:06:59,300 --> 00:07:04,140
>> Style ay isa pang isa na
ang kinakatawan ng CSS

146
00:07:04,140 --> 00:07:06,050
estilo ng isang partikular na elemento.

147
00:07:06,050 --> 00:07:08,310
At sa susunod na ito sa
video, ipapakita namin partikular

148
00:07:08,310 --> 00:07:14,592
style pagkilos upang gumawa ng isang pares
ng mga pagbabago sa aming website.

149
00:07:14,592 --> 00:07:15,800
Kaya ang mga ay ang ilang mga katangian.

150
00:07:15,800 --> 00:07:17,591
>> At mayroon ding ilang mga
mga pamamaraan na aming makakaya

151
00:07:17,591 --> 00:07:22,450
gamitin upang din na mas mabilis siguro ihiwalay
elemento ng Document Object.

152
00:07:22,450 --> 00:07:26,730
Siguro, ang pinaka-maraming nalalaman
sa mga ito ang pagiging getElementById.

153
00:07:26,730 --> 00:07:31,190
Kaya ako maaaring sabihin ng isang bagay tulad ng, dahil
tandaan na ito ay isang paraan ng Dokumento

154
00:07:31,190 --> 00:07:34,880
Bagay, document.getElementById.

155
00:07:34,880 --> 00:07:39,820
>> At sa loob ng mga panaklong, tukuyin
isang elemento sa isang partikular ID HTML

156
00:07:39,820 --> 00:07:42,330
attribute na ko na dati
itakda, at idedetalye ko agad

157
00:07:42,330 --> 00:07:46,685
pumunta karapatan sa elemento na
ng pangkalahatang website.

158
00:07:46,685 --> 00:07:49,310
Kaya hindi ko na kailangang mag-drill siguro
down sa pamamagitan ng bawat solong layer.

159
00:07:49,310 --> 00:07:52,841
Maaari ko lamang gamitin ang paraan upang mahanap ang mga ito,
uri ng tulad ng isang init na naghahanap ng misayl,

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

161
00:07:53,340 --> 00:07:56,300
Ito lamang ay pumunta at hahanap
eksakto kung ano ang hinahanap mo.

162
00:07:56,300 --> 00:07:59,290
>> GetElementsByTagName ay
halos kapareho sa espiritu.

163
00:07:59,290 --> 00:08:02,500
Marahil ito ay makikita ang lahat ng
bold tag o lahat ng mga p tags

164
00:08:02,500 --> 00:08:05,920
at magbigay sa akin ng isang array ng lahat ng bagay
na maaari kong pagkatapos ay gumagana sa.

165
00:08:05,920 --> 00:08:12,080
nagdadagdag appendChild bagay
isang level down sa tree.

166
00:08:12,080 --> 00:08:16,440
>> Kaya ang maaari kong magdagdag ng isang buong bagong
element na mas mababa ng isang level.

167
00:08:16,440 --> 00:08:19,700
O maaari ko bang tanggalin ang isang elemento na
sa isang antas na mas mababa pati na rin kung gusto ko

168
00:08:19,700 --> 00:08:22,870
upang tanggalin ang isang bagay mula sa aking mga web page.

169
00:08:22,870 --> 00:08:28,480
Ngayon, ang isang mabilis na coding note at isang mabilis
sakit ng ulo sa pag-save ng tala, sana.

170
00:08:28,480 --> 00:08:31,670
>> getElementById-- ang d ay lowercase.

171
00:08:31,670 --> 00:08:36,950
Hindi ko masasabi sa iyo kung gaano karaming beses na ako
ginamit getElementById at capitalized

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

173
00:08:38,336 --> 00:08:39,460
Dahil ito ay tunay pangkaraniwan.

174
00:08:39,460 --> 00:08:42,990
Kung isusulat ang salitang ID, ito ay
karaniwang capital ko capital D.

175
00:08:42,990 --> 00:08:44,240
At ang aking code lamang ay hindi gumagana.

176
00:08:44,240 --> 00:08:45,630
At hindi ko malaman kung bakit.

177
00:08:45,630 --> 00:08:49,490
Ito ay talagang isang, tunay, tunay
karaniwang bug na lahat ng tao ay gumagawa,

178
00:08:49,490 --> 00:08:51,890
kahit na eksperto na mayroon
ay ginagawa ito sa habang panahon.

179
00:08:51,890 --> 00:08:55,410
Kaya lang ay magkaroon ng kamalayan, getElementById,
na d ay lowercase.

180
00:08:55,410 --> 00:09:00,080
At sana, na sine-save ka ng ilang
minuto ng hindi bababa ng matinding lungkot.

181
00:09:00,080 --> 00:09:02,204
>> Kaya kung ano ang lahat ng ito sabihin sa amin?

182
00:09:02,204 --> 00:09:03,120
Mayroon kaming mga pamamaraan.

183
00:09:03,120 --> 00:09:04,161
Mayroon kaming mga properties.

184
00:09:04,161 --> 00:09:06,610
Ngayon, kung simulan namin mula
dokumento, dokumento.

185
00:09:06,610 --> 00:09:10,220
ano man, maaari naming ngayon makapunta sa anumang
isang piraso ng aming mga pahina ng web

186
00:09:10,220 --> 00:09:14,870
na gusto naming paggamit ng JavaScript
sa pamamagitan lamang ng pagtawag sa mga pamamaraan sa

187
00:09:14,870 --> 00:09:19,940
at pagdaragdag ng mga ari-arian
na nakita namin sa iba't-ibang mga lokasyon.

188
00:09:19,940 --> 00:09:24,890
>> Ito ay maaaring makakuha masalita, ito
document.getElementByID,

189
00:09:24,890 --> 00:09:28,560
baka magkaroon ng isang mahabang pangalan ng tag,
siguro mong gawin mas maraming mga tawag sa susunod.

190
00:09:28,560 --> 00:09:31,230
Mga bagay na maaaring makakuha ng isang maliit na piraso masalita.

191
00:09:31,230 --> 00:09:34,480
At bilang mga programmer, pati na sa iyo
marahil makikita sa maraming ng mga video,

192
00:09:34,480 --> 00:09:36,600
hindi kami tulad ng labis sa mga salita ng mga bagay.

193
00:09:36,600 --> 00:09:38,520
>> Gusto naming upang ma-gumawa ng mga bagay na mabilis.

194
00:09:38,520 --> 00:09:42,640
Kaya gusto naming ng isang mas
maigsi na paraan upang sabihin ng isang bagay.

195
00:09:42,640 --> 00:09:46,270
Kaya ito uri ng mga leads sa
kuru-kuro ng isang bagay na tinatawag jQuery.

196
00:09:46,270 --> 00:09:49,170
Ngayon jQuery ay hindi JavaScript.

197
00:09:49,170 --> 00:09:50,350
Ito ay hindi bahagi ng JavaScript.

198
00:09:50,350 --> 00:09:54,790
>> Ito ay isang library na ay isinulat
sa pamamagitan ng ilang mga programmer JavaScript

199
00:09:54,790 --> 00:09:57,060
tungkol sa 10 taon na ang nakakaraan.

200
00:09:57,060 --> 00:10:01,300
At ang kanyang layunin ay upang gawing simple ang kung ano ang
tinatawag na side scripting client, na kung saan

201
00:10:01,300 --> 00:10:04,310
ay talaga kung ano kami ay lamang
pakikipag-usap tungkol sa DOM manipulations.

202
00:10:04,310 --> 00:10:11,090
At kaya kung gusto ko na baguhin ang mga
kulay ng background ng aking web page, marahil

203
00:10:11,090 --> 00:10:11,980
isang tiyak na div.

204
00:10:11,980 --> 00:10:15,325
>> Dito, tila ko nakukuha
ElementById colorDiv.

205
00:10:15,325 --> 00:10:16,950
At gusto ko upang itakda ang kulay ng background nito.

206
00:10:16,950 --> 00:10:20,720
Kung tingin lang ako sa paggamit ng purong JavaScript
gamit ang Document Object Model,

207
00:10:20,720 --> 00:10:23,990
na ang isang pulutong ng mga bagay-bagay, di ba?
document.getElementByID

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

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
Iyon ay isang pulutong na sabihin.

212
00:10:30,110 --> 00:10:31,720
Ito ay isang pulutong na mag-type, masyadong.

213
00:10:31,720 --> 00:10:35,760
At kaya sa jQuery, maaari naming marahil sabihin
ito nang kaunti pa concisely.

214
00:10:35,760 --> 00:10:39,350
Ang trade off sa pagiging ito ay marahil isang maliit na
kaunti pang misteryosong lahat ng isang biglaang,

215
00:10:39,350 --> 00:10:39,850
right?

216
00:10:39,850 --> 00:10:43,580
>> Hindi bababa sa mahabang ay medyo mas
nagpapaliwanag sa kung ano ang ginagawa namin.

217
00:10:43,580 --> 00:10:49,947
Ito dollar sign, panaklong,
single quote, hash, colorDiv, di ba?

218
00:10:49,947 --> 00:10:50,780
Ano ang ibig sabihin nito?

219
00:10:50,780 --> 00:10:53,640
Well, na talaga lang
document.getElementByID colorDiv.

220
00:10:53,640 --> 00:10:58,700
>> Ngunit ito ay ang uri ng mga shorthand
paraan ng paggawa nito gamit jQuery.

221
00:10:58,700 --> 00:11:01,380
Hayaan lang ang dadalhin ng isang hitsura ngayon
sa isang pares ng mga iba't-ibang paraan

222
00:11:01,380 --> 00:11:04,520
na maaaring aktwal na ako
gamitin ang Document Object

223
00:11:04,520 --> 00:11:06,807
Model na manipulahin ng mga piraso ng aking site.

224
00:11:06,807 --> 00:11:09,140
Sa partikular, kami ay pagpunta
na nagtatrabaho sa pagmamanipula

225
00:11:09,140 --> 00:11:14,090
ang kulay ng isang partikular na
Div, colorDiv, sa isang web page.

226
00:11:14,090 --> 00:11:15,299
Kaya sabihin kumuha ng isang pagtingin sa na.

227
00:11:15,299 --> 00:11:15,798
Lahat tama.

228
00:11:15,798 --> 00:11:16,700
Kaya ako sa isang pahina.

229
00:11:16,700 --> 00:11:20,750
Ito ay tinatawag na test.html kapag nag-download ka ng
na ito kung gusto mong manghihinang may ito.

230
00:11:20,750 --> 00:11:24,730
At Nakakuha ako ng isang grupo ng mga
pindutan sa pahinang ito.

231
00:11:24,730 --> 00:11:27,730
At ako sinasabi indibidwal na mga function
para sa kulay ng background, lilang, berde,

232
00:11:27,730 --> 00:11:31,330
orange, pula, asul, isang single function na
para sa kulay ng background, handler ng kaganapan

233
00:11:31,330 --> 00:11:34,360
para sa kulay ng background, at paggamit ng jQuery.

234
00:11:34,360 --> 00:11:38,147
Ano ako ng pakikipag-usap tungkol sa
ako kapag ako ay ginagawa ito?

235
00:11:38,147 --> 00:11:39,230
Kaya nakita namin na ang mga pindutan.

236
00:11:39,230 --> 00:11:41,521
Ngayon, sabihin kumuha ng isang pagtingin sa
ang ilan sa mga source code dito.

237
00:11:41,521 --> 00:11:44,770
Sisimulan naming may test.html.

238
00:11:44,770 --> 00:11:48,100
Kaya indibidwal na mga function para sa background
kulay ay kung ano ang nai-type ko dito.

239
00:11:48,100 --> 00:11:49,350
Hayaan akong mag-scroll nang kaunti.

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

241
00:11:56,170 --> 00:11:58,820
>> At mapapansin mo na ako
natukoy ang mga button na ito

242
00:11:58,820 --> 00:12:03,990
sabihin kapag ang pindutan na ito ay na-click,
tawagan ang function i-purple.

243
00:12:03,990 --> 00:12:06,670
Kapag ang pindutan na ito ay i-click, sa halip,
tawagan ang function maging luntian,

244
00:12:06,670 --> 00:12:08,710
i orange, i-pula, i-asul.

245
00:12:08,710 --> 00:12:11,880
Maaari mong marahil hulaan na ito
ay marahil hindi ang pinakamahusay na disenyo

246
00:12:11,880 --> 00:12:12,460
kahulugan, tama?

247
00:12:12,460 --> 00:12:16,490
>> Mas maganda kung magagawa ko
magkaroon ng isang mas pangkalahatang diskarte.

248
00:12:16,490 --> 00:12:19,570
Well, unang makikita naming tingnan
sa kung ano ang mga limang mga function ay

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

250
00:12:24,400 --> 00:12:27,250
green, orange, red,
at asul, ayon sa pagkakabanggit.

251
00:12:27,250 --> 00:12:30,930
Kaya, hindi partikular na ang pinakamahusay na disenyo.

252
00:12:30,930 --> 00:12:33,390
>> Ang susunod na set ng mga pindutan
Ako ay may na ako ng nakasulat na

253
00:12:33,390 --> 00:12:36,380
isang solong function na tinatawag na
baguhin ang kulay na tila

254
00:12:36,380 --> 00:12:38,960
tumatanggap ng isang string bilang argument nito.

255
00:12:38,960 --> 00:12:40,290
Kaya ito ay mas mahusay na ang isang maliit na bit.

256
00:12:40,290 --> 00:12:43,840
Lila, berde, orange, red,
asul ay isang argument na ngayon.

257
00:12:43,840 --> 00:12:46,230
Kaya ko na nakasulat sa isang mas pangkalahatang
kaso JavaScript function,

258
00:12:46,230 --> 00:12:47,771
kung saan ay maaaring tumingin ng isang bagay tulad nito.

259
00:12:47,771 --> 00:12:48,680
Ako makapasa in.

260
00:12:48,680 --> 00:12:52,090
Ang kulay na ito ang pagbabago function ay
umaasa sa isang argument na tinatawag na kulay.

261
00:12:52,090 --> 00:12:54,970
At ako sinasabi itakda ang
kulay ng background sa kulay.

262
00:12:54,970 --> 00:12:58,390
Kaya dito ay kumakatawan sa kung ano ang mayroon ako dito.

263
00:12:58,390 --> 00:12:59,770
Kaya na ng kaunti mas mahusay.

264
00:12:59,770 --> 00:13:02,740
>> Ngunit maaari ko magagawang upang
gawin mas mahusay kaysa sa na.

265
00:13:02,740 --> 00:13:06,140
Kung pumunta kami pababa upang tingnan
sa sitwasyon handler ng kaganapan,

266
00:13:06,140 --> 00:13:07,860
ngayon ang lahat ng mga tawag na tumingin sa parehong.

267
00:13:07,860 --> 00:13:10,340
Kung isipin ang mo para sa aming
talakayan sa mga humahawak ng kaganapan,

268
00:13:10,340 --> 00:13:15,770
Maaari ba akong makakuha ng impormasyon tungkol sa kung alin sa
mga buttons na ito ay nag-click at gamitin iyon.

269
00:13:15,770 --> 00:13:19,560
>> At kaya sa event.JavaScript, na ako
nakasulat na kaganapan sa pagbabago ng kulay, na kung saan

270
00:13:19,560 --> 00:13:21,110
mga numero kung saan pindutan ay nag-click.

271
00:13:21,110 --> 00:13:23,250
Iyan ang line trigger object.

272
00:13:23,250 --> 00:13:25,240
At pagkatapos dito, ito ay makakakuha ng talagang masalita.

273
00:13:25,240 --> 00:13:27,420
Ngunit ano ang ginagawa ko ay hindi ako
ang pagtatakda ng background

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

275
00:13:30,340 --> 00:13:34,170
Iyan ang teksto sa
sa pagitan ng mga tag na pindutan.

276
00:13:34,170 --> 00:13:36,500
>> At pagkatapos ay ako tila may
upang itakda ito sa maliliit na titik.

277
00:13:36,500 --> 00:13:40,780
At na kung paano ko-convert ng isang buong
string sa lowercase sa JavaScript gamit

278
00:13:40,780 --> 00:13:42,940
Ang pamamaraan na sa lowercase.

279
00:13:42,940 --> 00:13:46,570
Dahil kapag ako magse-set ng isang kulay,
bilang sinusubukan ko na gawin dito,

280
00:13:46,570 --> 00:13:48,260
ang kulay ay dapat na ang lahat ng lowercase.

281
00:13:48,260 --> 00:13:50,920
>> Ngunit ang button na ako ay,
kung kumuha kami ng isa pang anyo,

282
00:13:50,920 --> 00:13:55,890
mapapansin na ang teksto ay
nasulat ng capital P para sa mga lilang.

283
00:13:55,890 --> 00:13:59,140
At pagkatapos ay sa tunay
ibaba dito, ako malas

284
00:13:59,140 --> 00:14:02,630
subukan at gawin ito gamit jQuery rin.

285
00:14:02,630 --> 00:14:06,000
At sa kasong ito, hindi ako talaga
pagtawag ng isang function sa lahat.

286
00:14:06,000 --> 00:14:11,430
Lamang ko na sinabi sa klase na ako
gamit para sa button na ito ay isang button Jq.

287
00:14:11,430 --> 00:14:12,360
Ayan yun.

288
00:14:12,360 --> 00:14:14,950
>> Kaya kung paano gumagana ang kilala jQuery ano ang ginagawa ko?

289
00:14:14,950 --> 00:14:18,740
Well, ito ay isa sa mga pakinabang
slash disadvantages ng jQuery.

290
00:14:18,740 --> 00:14:21,560
Ito ay magpapahintulot sa akin upang gawin ang mga bagay-bagay
napaka concisely, ngunit marahil ay hindi

291
00:14:21,560 --> 00:14:22,570
bilang intuitively.

292
00:14:22,570 --> 00:14:25,570
Siguro ang mga iba pang mga tatlong gumawa ng isang
kaunti pang-unawa kung ano ang ginagawa ko.

293
00:14:25,570 --> 00:14:29,010
Dito, bagaman, kung ano ang nangyari?

294
00:14:29,010 --> 00:14:31,940
>> Tila, ang paglikha
isang hindi nakikilalang function

295
00:14:31,940 --> 00:14:36,790
na naglo-load kapag ang aking mga dokumento
ay handa na, kaya document.ready,

296
00:14:36,790 --> 00:14:38,760
ilang mga function ay pagpunta sa mangyayari.

297
00:14:38,760 --> 00:14:40,490
Talaga, kapag ay handa na ang isang dokumento?

298
00:14:40,490 --> 00:14:42,310
Ito ay kapag na-load sa aking page.

299
00:14:42,310 --> 00:14:46,540
>> Kaya sa lalong madaling aking pahina ay nai-load, ang
mga sumusunod na function ay laging handa.

300
00:14:46,540 --> 00:14:54,310
Sinasabi nito, kung ang isang bagay ng uri jQButton,
o kung klase jQButton ay nag-click,

301
00:14:54,310 --> 00:14:55,570
maipatupad ang function na ito.

302
00:14:55,570 --> 00:14:59,360
Kaya narito ang dalawang anonymous na function,
isa na tinukoy sa loob ng isa.

303
00:14:59,360 --> 00:15:03,930
>> Kaya ang aking buong konteksto
dito sa ngayon ay ang aking pahina

304
00:15:03,930 --> 00:15:06,520
kapag ito ay naglo-load ng mga tawag na ito sa function na ito.

305
00:15:06,520 --> 00:15:09,740
At ang function na ito ay naghihintay
para sa isang pindutan na i-click.

306
00:15:09,740 --> 00:15:14,490
At kapag ang isang pindutan ay nag-click, Jq
button na partikular ay na-click,

307
00:15:14,490 --> 00:15:17,150
ito tawag na ito sa iba pang mga
function, kung saan ay pagpunta

308
00:15:17,150 --> 00:15:21,250
upang itakda ang background
kulay ng colorDiv na maging

309
00:15:21,250 --> 00:15:25,990
kahit anong text ay nasa pagitan ng mga tag.

310
00:15:25,990 --> 00:15:28,050
>> Ito ang paniwala ng
na pindutan ay nag-click.

311
00:15:28,050 --> 00:15:31,230
Ngunit sa kabilang banda, ito ay isang uri ng
kumikilos katulad ng isang kaganapan.

312
00:15:31,230 --> 00:15:34,460
Ito ay lamang ang parehong paraan na ako
ay ipahayag ang mga ito sa jQuery.

313
00:15:34,460 --> 00:15:36,790
Muli, ito ay maaring isang
maraming higit pang pananakot.

314
00:15:36,790 --> 00:15:40,840
Ito ay hindi bilang malinaw na bilang
isang bagay tulad ng event.js,

315
00:15:40,840 --> 00:15:45,080
na kung saan ay marahil isang maliit na kaunti pang
masyadong masalita, ngunit isang maliit na piraso ng mas mababa

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

317
00:15:46,000 --> 00:15:51,460
>> Ngunit kung pop-back namin sa sa aking browser
window, kung sisimulan ko clicking-- rin,

318
00:15:51,460 --> 00:15:52,690
na nagbago na purple.

319
00:15:52,690 --> 00:15:54,450
Ito ang green gamit ang paraan string.

320
00:15:54,450 --> 00:15:56,500
Ito ang orange gamit ang handler ng kaganapan.

321
00:15:56,500 --> 00:15:58,300
>> Ito ang red gamit jQuery, di ba?

322
00:15:58,300 --> 00:16:01,270
Lahat sila ay kumilos nang eksakto ang parehong.

323
00:16:01,270 --> 00:16:06,509
Sila lamang gawin ito gamit ang iba't ibang
pamamaraang sa paglutas ng problema.

324
00:16:06,509 --> 00:16:08,550
May isang pulutong ng higit pa sa
jQuery pagkatapos kami ay tiyak

325
00:16:08,550 --> 00:16:10,050
pagpunta sa makipag-usap tungkol sa video na ito.

326
00:16:10,050 --> 00:16:15,410
Ngunit kung gusto mong matuto nang higit pa, maaari mong
pumunta sa jQuery uri ng babasahin

327
00:16:15,410 --> 00:16:19,710
at matuto ng lubos ng kaunti pa tungkol sa
ito lubos na kakayahang umangkop library, kung saan

328
00:16:19,710 --> 00:16:22,550
ay mahusay para sa paggawa ng client side
scripting tulad ng kung ano ang aming ginagawa

329
00:16:22,550 --> 00:16:26,240
upang manipulahin ang hitsura
at pakiramdam ng aming mga pahina ng web

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

331
00:16:28,750 --> 00:16:29,650
Ako Doug Lloyd.

332
00:16:29,650 --> 00:16:31,930
Ito ay CS50.

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