1
00:00:00,000 --> 00:00:07,440

2
00:00:07,440 --> 00:00:08,180
>> Tomas REIMERS: Hi, sa lahat.

3
00:00:08,180 --> 00:00:09,250
Tomas Reimers Aking pangalan ni.

4
00:00:09,250 --> 00:00:10,500
>> Mike RIZZO: At ako Mike Rizzo.

5
00:00:10,500 --> 00:00:12,990
>> Tomas REIMERS: Kami ay dalawa sa CS50s TS.

6
00:00:12,990 --> 00:00:18,910
At ngayon kami ay humahantong ang pantas-aral sa
JavaScript at CSS para sa mga web apps.

7
00:00:18,910 --> 00:00:22,140
Kung nais mong sundin kasama, ang
link ang tama doon.

8
00:00:22,140 --> 00:00:25,190
At huwag nais mong ilagay up ito
sa computer sa madaling sabi?

9
00:00:25,190 --> 00:00:27,460
>> Mayroong ang link.

10
00:00:27,460 --> 00:00:30,390
Ito ay isang maliit na site, na may mga link sa mga
lahat ng mga mapagkukunan kami ng pagpunta sa maging

11
00:00:30,390 --> 00:00:36,490
pagturo mo ngayon at din ay may napakaraming mga
kapaki-pakinabang na impormasyon na nakasulat sa pamamagitan ng sa amin sa

12
00:00:36,490 --> 00:00:39,680
basahin ang mga mas malalalim na kapag kang bumalik,
at sinusubukan mong matandaan kung ano

13
00:00:39,680 --> 00:00:42,166
eksakto ang sasabihin namin, ano ang mga mo
pakikipag-usap tungkol sa, at iba pa.

14
00:00:42,166 --> 00:00:43,870
>> Mike RIZZO: Lahat ng karapatan.

15
00:00:43,870 --> 00:00:44,890
Kaya ni magsimula ipaalam.

16
00:00:44,890 --> 00:00:45,700
>> Tomas REIMERS: Kaya nais mong simulan?

17
00:00:45,700 --> 00:00:45,970
OK.

18
00:00:45,970 --> 00:00:47,170
>> Mike RIZZO: Oo.

19
00:00:47,170 --> 00:00:51,730
Kaya muna namin nais na magsimula sa isang malawak
pangkalahatang-ideya tungkol sa internet at

20
00:00:51,730 --> 00:00:54,240
maghain uri kapag nagdidisenyo ng mga website.

21
00:00:54,240 --> 00:00:57,550
Habang ang pagtatanghal na namin nais na
dumapo sa JavaScript marami magkano

22
00:00:57,550 --> 00:01:00,320
sa paglaon, gusto naming magsimula sa
lamang, uri ng, tulad ng eye view ng isang ibon

23
00:01:00,320 --> 00:01:03,270
ng kung ano ang isang website ay at kung paano
mag-isip tungkol sa pagdisenyo ng isang

24
00:01:03,270 --> 00:01:04,800
website para sa simula.

25
00:01:04,800 --> 00:01:08,370
>> Kaya mo guys, sa puntong ito - na may mga ito
pagiging Biyernes gabi - ay dapat magkaroon

26
00:01:08,370 --> 00:01:11,000
naisumite ang iyong CS50 pananalapi
Nagtatakda problema.

27
00:01:11,000 --> 00:01:15,260
Sana, na noon ay isang mahusay na panlasa
ng kung ano ang web programming ay maaaring maging.

28
00:01:15,260 --> 00:01:18,261
Ngunit dito gusto naming, uri ng, magbigay
ka ng isa pang lasa, pati na rin.

29
00:01:18,261 --> 00:01:23,190
>> Tomas REIMERS: Kaya lang sa pagbabalik-tanaw kung ano
ang mangyayari, kapag nagta-type ka sa iyong URL upang

30
00:01:23,190 --> 00:01:26,650
iyong web browser, nakakakuha ang URL na iyon
tumingala sa computer.

31
00:01:26,650 --> 00:01:28,590
At computer ang iyong mga nakakonektang
sa isa pang computer,

32
00:01:28,590 --> 00:01:29,890
na nagho-host ng website na iyon.

33
00:01:29,890 --> 00:01:33,150
OK, kaya kapag pupunta ka sa google.com, ikaw ay
nakakonekta sa isa sa Google

34
00:01:33,150 --> 00:01:36,496
mga computer, na may
mga file para sa google.com.

35
00:01:36,496 --> 00:01:38,750
>> Pagkatapos ay humihingi ito para sa isang tiyak na file.

36
00:01:38,750 --> 00:01:40,020
Kaya kung kang pumunta sa -

37
00:01:40,020 --> 00:01:41,550
Hindi ko alam kung -

38
00:01:41,550 --> 00:01:48,170
example.com / index.html o / test.html,
ka ng pagpunta sa magtanong para sa

39
00:01:48,170 --> 00:01:49,340
na tiyak na file.

40
00:01:49,340 --> 00:01:52,780
At ang web server ng pagpunta
upang ibalik ito sa iyo.

41
00:01:52,780 --> 00:01:54,910
>> Pagkatapos, sa sandaling pumunta ka sa file na iyon -

42
00:01:54,910 --> 00:01:57,750

43
00:01:57,750 --> 00:01:59,950
sa sandaling ikaw ay nakakakuha computer na iyon
file - ito ay pagpunta sa simulan

44
00:01:59,950 --> 00:02:00,820
na bumuo ng isang web page.

45
00:02:00,820 --> 00:02:03,020
Kaya ngayon mayroon itong mga file na HTML,
na kung saan ay uri ng tulad ng

46
00:02:03,020 --> 00:02:05,170
istraktura ng web page.

47
00:02:05,170 --> 00:02:08,620
Ang file na HTML ay maaaring ring sumangguni sa
CSS file, na tukuyin ang

48
00:02:08,620 --> 00:02:09,889
estilo ng web page.

49
00:02:09,889 --> 00:02:12,970
>> Mga file ng JavaScript, na tumutukoy sa
pakikipag-ugnayan sa mga web pahina.

50
00:02:12,970 --> 00:02:15,200
Mga file ng imahe, na kung saan ay lamang ang mga imahe.

51
00:02:15,200 --> 00:02:19,450
At marahil-link sa iba pang mga file na HTML,
na maaari mong pagkatapos ay bisitahin ang.

52
00:02:19,450 --> 00:02:22,656

53
00:02:22,656 --> 00:02:24,380
>> Mike RIZZO: OK, mahusay.

54
00:02:24,380 --> 00:02:28,980
Kaya mo guys mayroon lahat, siguro,
painstakingly set up ang iyong lokal na host

55
00:02:28,980 --> 00:02:30,810
sa iyong mga virtual machine.

56
00:02:30,810 --> 00:02:35,650
At na lang, uri ng, ay ang lokal na
domain na nagho-host lamang ang iyong computer

57
00:02:35,650 --> 00:02:38,760
para sa iyo sa iyong sariling IP address.

58
00:02:38,760 --> 00:02:43,300
>> Kaya sa loob na, pagkatapos ay maaari kang magdagdag ng
dito ang iyong sariling mga pahina ng web.

59
00:02:43,300 --> 00:02:47,655
Ibig kong sabihin, sa CS50 Finance, dapat kang magkaroon ng
Idinagdag ang ilang mga pahina ng HTML, na kung saan ay,

60
00:02:47,655 --> 00:02:49,410
uri ng, nakabalot sa wrapper PHP.

61
00:02:49,410 --> 00:02:54,690
Ngunit sa huli, kung ano ang iyong mga pahinang PHP
ay outputting ay HTML.

62
00:02:54,690 --> 00:02:58,210
>> Ngunit nag-iisip pabalik sa pinakadulo simula
ng PSET, nagkaroon kami upang i-set

63
00:02:58,210 --> 00:03:00,890
ang mga pahintulot para sa lahat ng bagay, tama?

64
00:03:00,890 --> 00:03:07,270
Kaya ay nagbibigay-daan ito talaga lang alam sa amin
sino ang makakabasa, isulat, at posibleng

65
00:03:07,270 --> 00:03:08,730
isakatuparan ang bawat isa sa mga file.

66
00:03:08,730 --> 00:03:11,870
Kaya kami ay pagpunta sa gawin ang isang mabilis - Hm?

67
00:03:11,870 --> 00:03:15,660
>> Tomas REIMERS: Kaya kami ay pagpunta
na gawin ang isang mabilis na demo.

68
00:03:15,660 --> 00:03:19,560
Kaya lamang ipaalala sa iyo, kapag nag-
kumonekta sa computer ng Google -

69
00:03:19,560 --> 00:03:20,690
kung sinuman -

70
00:03:20,690 --> 00:03:24,060
at humingi ng isang file, ang computer muna
Kailangang tiyakin na iyong awtorisadong

71
00:03:24,060 --> 00:03:28,790
upang aktwal na tingnan ang file na iyon o magbasa na
maghain dahil hindi mo lamang maaaring hilingin

72
00:03:28,790 --> 00:03:30,430
para sa anumang mga file sa computer na iyon, i-right?

73
00:03:30,430 --> 00:03:32,260
Iyon ay magiging isang seguridad ipagsapalaran.

74
00:03:32,260 --> 00:03:37,020
>> Kaya mga file sa mga system na ginagamit namin, tulad ng
ito CS50 appliance, mayroon tatlong

75
00:03:37,020 --> 00:03:39,200
pangkalahatang mga tao na maaaring magkaroon
mga pahintulot sa isang bagay.

76
00:03:39,200 --> 00:03:41,610
Ang una ay ang aktwal na
may-ari ng sinabi file.

77
00:03:41,610 --> 00:03:43,820
Pangalawa ay ang group na iyon
ang file ay kabilang sa.

78
00:03:43,820 --> 00:03:46,090
Hindi namin pagpunta sa tumutok
masyadong marami sa iyon.

79
00:03:46,090 --> 00:03:50,010
At ang huling bagay ay, uri ng, tulad ng
mundo o tulad ang iba kung sino ang

80
00:03:50,010 --> 00:03:54,130
hindi tukoy sa file na iyon at hindi
magkaroon ng anumang mga karapatan sa pagmamay-ari sa ibabaw nito.

81
00:03:54,130 --> 00:04:05,650
>> Kaya kung kami ay may-ari, group,
at pagkatapos mundo.

82
00:04:05,650 --> 00:04:10,510
At pagkatapos ay, para sa bawat isa sa mga pangkat na ito, mo
ay maaaring magkaroon ng isa sa tatlong mga pahintulot,

83
00:04:10,510 --> 00:04:13,010
OK, o maramihang ng mga ito.

84
00:04:13,010 --> 00:04:15,070
Maaari kang magkaroon ng nabasa na mga pahintulot.

85
00:04:15,070 --> 00:04:16,560
Maaari kang magkaroon ng karapatan na pahintulot.

86
00:04:16,560 --> 00:04:18,880
At maaari mong execute pahintulot.

87
00:04:18,880 --> 00:04:22,060
>> Kaya sa mga tuntunin ng aktwal na mga uri ng file, basahin ang
pahintulot ay tulad ng aktwal na pagbabasa

88
00:04:22,060 --> 00:04:23,250
ang mga nilalaman ng file.

89
00:04:23,250 --> 00:04:24,730
Ang isang karapatan pahintulot ay sumusulat
sa sinabi file.

90
00:04:24,730 --> 00:04:28,370
Isang execute pahintulot ay tumatakbo ang
mag-file tulad ng gagawin mo kapag nagpatakbo ka ng isa sa

91
00:04:28,370 --> 00:04:29,620
CS50 iyong proyekto.

92
00:04:29,620 --> 00:04:32,190

93
00:04:32,190 --> 00:04:38,820
>> Kaya kapag kami pinag-iisipan mo tungkol sa mga file
tulad ng kapag kailangan namin upang basahin ang isang HTML

94
00:04:38,820 --> 00:04:41,790
file, na kailangang maging mundo
nababasa, tama?

95
00:04:41,790 --> 00:04:44,420
Siguro, ang may-ari din nais ni
upang magagawang i-edit ang file na iyon.

96
00:04:44,420 --> 00:04:46,610
Kaya ang nangyayari sa may-ari upang kailangan
basahin at isulat ang mga pahintulot.

97
00:04:46,610 --> 00:04:48,710
Sila ay hindi talagang kailangan execute.

98
00:04:48,710 --> 00:04:50,950
>> Group, kami ay pagpunta sa paggamot sa mga
katulad ng mundo sa ngayon.

99
00:04:50,950 --> 00:04:54,610
Kaya kailangan nila nabasa na mga pahintulot.

100
00:04:54,610 --> 00:04:57,310
Ngunit hindi nila kailangang pagpapawalang
o nagsasagawa ng mga pahintulot.

101
00:04:57,310 --> 00:05:01,920
At ngayon, kung sa tingin namin pabalik sa dating
PSETs, ano ang nauunawaan natin ay ang mga uri

102
00:05:01,920 --> 00:05:03,360
ng magmukhang binary, tama?

103
00:05:03,360 --> 00:05:04,210
1 ang ibig sabihin ay oo.

104
00:05:04,210 --> 00:05:05,040
0 para sa walang.

105
00:05:05,040 --> 00:05:06,870
At maaari naming talagang isalin
ito sa binary.

106
00:05:06,870 --> 00:05:10,478
>> Kaya 110 sa binary ay magiging 6.

107
00:05:10,478 --> 00:05:13,270
100 ay magiging 4.

108
00:05:13,270 --> 00:05:14,690
Parehong may mundo.

109
00:05:14,690 --> 00:05:20,846
Kaya ang bilang makakakuha ka ng para sa
mga pahintulot para ito ay magiging 644.

110
00:05:20,846 --> 00:05:24,400
>> Mike RIZZO: At kung sa tingin mo pabalik sa
kapag chmoded ka ng isang bagay, sa tingin ko

111
00:05:24,400 --> 00:05:28,980
sila ay nagbigay sa problema itakda ang
halimbawa ng kung saan maaari mong gawin

112
00:05:28,980 --> 00:05:36,470
isang bagay tulad ng chmod 644
at pagkatapos ay i-file pangalan.

113
00:05:36,470 --> 00:05:39,980
Ang 644 pagkatapos, ikaw ay maaari nang direkta makita
kung saan na nagmumula sa.

114
00:05:39,980 --> 00:05:42,840
Kaya na sana ay ginagawang na
mas malinaw ng kaunti.

115
00:05:42,840 --> 00:05:45,600
>> At pagkatapos ay para sa kalinawan mo lalaki ni -

116
00:05:45,600 --> 00:05:48,200
oh oo, dito ito ay muli.

117
00:05:48,200 --> 00:05:53,260
Kaya 600 pagkatapos ay magiging lamang ang halimbawa
Isinuko namin dito kung saan ang may-ari ay

118
00:05:53,260 --> 00:05:56,360
basahin at kanang mga pahintulot habang pangkat
at mundo ay walang anumang mga pahintulot

119
00:05:56,360 --> 00:05:58,145
upang ma-access ang file.

120
00:05:58,145 --> 00:06:01,500
>> Tomas REIMERS: At pagkatapos ay mayroon kaming isang mabilis
listahan ng mga karaniwang mga pahintulot.

121
00:06:01,500 --> 00:06:05,250
Kaya direktoryo, gusto mo
upang aktwal na chmod 711.

122
00:06:05,250 --> 00:06:08,930
Mabilis na bukod - para sa isang direktoryo na mayroon
executable pahintulot ay nangangahulugan na upang magawang

123
00:06:08,930 --> 00:06:11,680
upang buksan ang direktoryo.

124
00:06:11,680 --> 00:06:15,280
Mga imahe, CSS, JavaScript, mga pangangailangan ng HTML
644 dahil, talaga, ang mundo

125
00:06:15,280 --> 00:06:16,400
pangangailangan basahin ang mga pahintulot.

126
00:06:16,400 --> 00:06:20,960
>> At PHP, kung saan mo guys na nakita
bagaman ay hindi uusapan natin ang tungkol dito

127
00:06:20,960 --> 00:06:24,880
mahigpit ay karaniwang chmoded may
pahintulot 600 dahil na tumakbo kasama ang

128
00:06:24,880 --> 00:06:26,540
ang mga pahintulot ng may-ari.

129
00:06:26,540 --> 00:06:27,790
Hindi bababa sa appliance.

130
00:06:27,790 --> 00:06:30,200

131
00:06:30,200 --> 00:06:36,870
>> Mike RIZZO: Kaya kung hindi mo gusto na partikular na
tukuyin kung anong uri ng file

132
00:06:36,870 --> 00:06:39,480
Gusto mo sa aktwal na pagtatakda
up ang pagtatanghal na ito -

133
00:06:39,480 --> 00:06:43,490
nagkaroon kami ng problema sa ito dahil
ang lahat ng bagay ay hindi tama chmoded -

134
00:06:43,490 --> 00:06:47,550
ka pagpunta upang makakuha ng, uri ng, isang
ipinagbabawal na error na ang website

135
00:06:47,550 --> 00:06:49,700
ay hindi aktwal na may pahintulot
upang ma-access ang kahit anong file

136
00:06:49,700 --> 00:06:51,370
gusto mo ito i-access.

137
00:06:51,370 --> 00:06:54,780
At syempre, na maaaring nakapirming -
bilang sa problema set - sa pamamagitan ng pagbabago

138
00:06:54,780 --> 00:06:56,405
mga pahintulot ng naaangkop.

139
00:06:56,405 --> 00:06:59,620
>> Tomas REIMERS: At ang huling komento para sa
mabilis lokal na pag-unlad ay - namin

140
00:06:59,620 --> 00:07:02,000
nagdala ito up, ngunit gusto naming lamang
upang ilabas itong muli -

141
00:07:02,000 --> 00:07:06,230
kung hihilingin mo para sa isang server - kaya lokal host,
halimbawa, com o kahit ano. -

142
00:07:06,230 --> 00:07:09,170
at hindi mo tukuyin ang isang tiyak na file,
ang file na ang iyong computer ay pagpunta

143
00:07:09,170 --> 00:07:11,540
upang humingi ng ay tinatawag na index.html.

144
00:07:11,540 --> 00:07:12,790
O kung na hindi umiiral, index.PHP.

145
00:07:12,790 --> 00:07:15,560

146
00:07:15,560 --> 00:07:16,350
>> Cool.

147
00:07:16,350 --> 00:07:19,560
Kaya ito lamang ay isang pagbabalik-tanaw ng lahat ng bagay,
sana ay, na namin ang saklaw sa

148
00:07:19,560 --> 00:07:22,800
seksyon, at magbigay ng panayam,
at sa ngayon sa CS50.

149
00:07:22,800 --> 00:07:26,110
At ngayon kami ay pagpunta sa simulan ang pakikipag-usap
tungkol sa partikular na mga aklatan.

150
00:07:26,110 --> 00:07:30,270
JavaScript at CSS aklatan
para sa mga web apps.

151
00:07:30,270 --> 00:07:36,350
>> Kaya isa mabilis dahilan kung bakit mayroon kaming
mga aklatan ay ang mga programa -

152
00:07:36,350 --> 00:07:39,000
mayroong isang pulutong ng mga problema sa
programming, na panatilihin popping up

153
00:07:39,000 --> 00:07:40,570
muli, at muli, at muli.

154
00:07:40,570 --> 00:07:43,870
Maaari mong mapansin na ang isang pulutong ng mga website
Kailangan ng kakayahan upang magkaroon ng drop down

155
00:07:43,870 --> 00:07:49,100
mga menu, halimbawa, o kailangan ng kakayahan
upang magkaroon ng isang napaka-karaniwang mga pindutan

156
00:07:49,100 --> 00:07:51,400
estilo, na kung saan ay maaaring hindi
ang pinakamadaling bagay.

157
00:07:51,400 --> 00:07:54,670
Ngayon na simulan mo upang makakuha ng sa HTML, mo
Napag-alaman na ang mga pindutan maaari talaga

158
00:07:54,670 --> 00:07:57,720
Inaasahan talaga pangit kung ikaw
huwag gumawa ng kahit ano.

159
00:07:57,720 --> 00:08:00,830
>> Kaya ng maraming tao ang nakasulat
na tinatawag na mga aklatan.

160
00:08:00,830 --> 00:08:02,990
At sa kontekstong ito, ang mga ito ay
tinatawag din Framework.

161
00:08:02,990 --> 00:08:04,790
Kami ay pagpunta sa gamitin ang
dalawang salitan.

162
00:08:04,790 --> 00:08:07,360
At ano ang mga ito ay ang mga ito ay isa lamang
premade piraso ng code -

163
00:08:07,360 --> 00:08:09,130
alinman sa CSS o JavaScript -

164
00:08:09,130 --> 00:08:13,240
na tumagal ang layo ng maraming mga
Koponan mayroon ka sa coding.

165
00:08:13,240 --> 00:08:17,290
>> Kaya sila pre-tukuyin ang isang bungkos ng mga klase o
pre-tukuyin ang isang bungkos ng mga pag-andar para sa

166
00:08:17,290 --> 00:08:20,110
Kaso JavaScript, na
Maaari kang tumawag sa susunod.

167
00:08:20,110 --> 00:08:22,690
At pagkatapos mo, uri ng, kumuha ng
pag-access sa ang code na ito nang hindi

168
00:08:22,690 --> 00:08:23,710
na kinakailangang gawin.

169
00:08:23,710 --> 00:08:27,750
Isang halimbawa ng mga library ay CS50.H.
Iyon ay isang library Ibinigay namin sa iyo pabalik

170
00:08:27,750 --> 00:08:32,090
sa linggo isa, na pinapayagan kang gawin
mga bagay tulad na GetInt at GetString

171
00:08:32,090 --> 00:08:35,237
nang hindi na kinakailangang sumulat
iyong sarili ang anumang code.

172
00:08:35,237 --> 00:08:36,179
>> Mike RIZZO: Lahat ng karapatan.

173
00:08:36,179 --> 00:08:40,299
Kaya dito, tulad lamang namin ay may upang isama
sa aming c mga file sa iba't ibang

174
00:08:40,299 --> 00:08:46,570
mga aklatan, kami din ay dapat isama sa
ang aming HTML file iba't ibang mga aklatan.

175
00:08:46,570 --> 00:08:50,310
Halimbawa, kung gusto naming isama
isang tukoy na library JavaScript dito,

176
00:08:50,310 --> 00:08:52,850
marahil, isa na na naisulat namin
ang ating mga sarili bilang lokal na ito ay naka-host

177
00:08:52,850 --> 00:08:56,000
tinatawag script.js, namin lamang
gamitin pagtatanda na ito.

178
00:08:56,000 --> 00:08:59,500
>> Kaya mayroon kaming uri ng script Kapantay
JavaScript pinagmulan Kapantay

179
00:08:59,500 --> 00:09:01,260
JavaScript.js.

180
00:09:01,260 --> 00:09:05,190
At kung sa tingin mo pabalik sa iyong CS50
itakda ang problemang pananalapi, kapag tiningnan mo sa

181
00:09:05,190 --> 00:09:09,190
header.php sa folder ng mga template,
Dapat na nakita mo

182
00:09:09,190 --> 00:09:10,970
ilan sa mga kasama.

183
00:09:10,970 --> 00:09:13,250
Kaya ito muna isa - ang mga script -

184
00:09:13,250 --> 00:09:16,080
ay kabilang ang isang JavaScript library.

185
00:09:16,080 --> 00:09:18,760
Kabilang ang isang CSS library ay
Medyo naiiba.

186
00:09:18,760 --> 00:09:21,430
>> Dito, sa halip na ang script
TAG kailangan mo ng tag na link.

187
00:09:21,430 --> 00:09:27,110
At pagkatapos, ang uri ng teksto CSS
ay isang maliit na naiiba.

188
00:09:27,110 --> 00:09:29,270
Wala ka laging may upang isama
style sheet rel.

189
00:09:29,270 --> 00:09:30,970
Ngunit tingin ko ito ay, sa pangkalahatan,
mahusay na kasanayan.

190
00:09:30,970 --> 00:09:35,810
>> At pagkatapos ay sa wakas, ang HREF, na kung saan mo
marahil nakita sa iyong ATAGs para sa pag-link

191
00:09:35,810 --> 00:09:39,440
sa iba't-ibang mga link lamang Tinutukoy
ang link ng kung saan upang mahanap iyon.

192
00:09:39,440 --> 00:09:42,250
Halimbawa, kung gusto naming i-link ang isang
iba't ibang mga library - sabihin nating lamang -

193
00:09:42,250 --> 00:09:49,330
na nanirahan sa styles.css.

194
00:09:49,330 --> 00:09:54,030
At gusto naming i-link na sa na
naka-host sa web, gusto naming kopyahin iyon.

195
00:09:54,030 --> 00:09:58,834
At pagkatapos ay i-paste ito sa kahit anong
mayroon kaming dito mismo sa halip.

196
00:09:58,834 --> 00:10:01,340
>> Tomas REIMERS: OK, sana sa iyo
guys ay nasa pamilyar

197
00:10:01,340 --> 00:10:02,410
may kung paano i-link ang CSS.

198
00:10:02,410 --> 00:10:04,000
Nagkaroon ka upang gawin iyon sa
ang iyong huling kayumanggi set.

199
00:10:04,000 --> 00:10:07,110
JavaScript, ang ilan sa iyo siguro
may ilang mga karanasan sa.

200
00:10:07,110 --> 00:10:07,980
Hindi Ang ilan sa maaari kang.

201
00:10:07,980 --> 00:10:12,190
>> Kaya para sa ngayon, alam na ang isang JavaScript na file
ay napaka tulad ng isang CSS file sa

202
00:10:12,190 --> 00:10:15,640
ang pakiramdam na maaari mong i-link o
na maaari mong isama ito sa loob.

203
00:10:15,640 --> 00:10:17,360
At nagbibigay-daan sa mo ito sa script na bagay.

204
00:10:17,360 --> 00:10:21,820
At kami ay pagpunta sa dadalhin ka sa pamamagitan ng
kaunting JavaScript sa susunod.

205
00:10:21,820 --> 00:10:23,560
>> Kaya gamit ang isang library -

206
00:10:23,560 --> 00:10:26,150
sa oras na iyong isinama ito, ito ay bilang
simple ng literal na pagtawag sa

207
00:10:26,150 --> 00:10:29,640
mga pag-andar o pagdaragdag ng
mga pangalan ng klase dito.

208
00:10:29,640 --> 00:10:32,220
Ang huling bagay na nais namin na makipag-usap
tungkol sa mga tuntunin ng library -

209
00:10:32,220 --> 00:10:34,180
at ito ay higit pa sa isang teknikal na tala -

210
00:10:34,180 --> 00:10:35,860
ay open source paglilisensya.

211
00:10:35,860 --> 00:10:41,550
Kaya kapag nakita mo ang mga aktwal na mga aklatan,
maaari kang iniisip

212
00:10:41,550 --> 00:10:47,630
i tanong ay ito OK na lang ako
gamit ang code ng ibang tao, lalo na

213
00:10:47,630 --> 00:10:51,970
dahil iyon ang isang bagay na lubhang namin magkano
Sinabi mong hindi ginagawa sa kursong ito.

214
00:10:51,970 --> 00:10:55,790
>> Kaya sa kaso ng open source sa paglilisensya,
ng maraming mga nag-develop -

215
00:10:55,790 --> 00:10:57,540
sa sandaling nakasulat sa isang library,
na sa tingin nila ay maaaring maging

216
00:10:57,540 --> 00:10:59,450
kapaki-pakinabang sa iba pang mga tao -

217
00:10:59,450 --> 00:11:02,420
Ipa-publish nito sa web
at bigyan ito ng isang lisensya.

218
00:11:02,420 --> 00:11:06,620
At isang lisensya talaga sabi ni am ko sa pamamagitan nito
pagbibigay ng pahintulot sa iba pang mga

219
00:11:06,620 --> 00:11:11,250
mga tao upang gamitin ang bahagi ng software
may mga sumusunod na uri ng

220
00:11:11,250 --> 00:11:13,230
takda.

221
00:11:13,230 --> 00:11:16,100
>> Nagsama kami ng isang link sa isang magandang site upang
matulungan kang maunawaan ang mga lisensya sa

222
00:11:16,100 --> 00:11:17,720
case patakbuhin mo sa kanila.

223
00:11:17,720 --> 00:11:21,680
Karaniwang mga takda ay mga bagay tulad ng
ikaw ay malugod na tinatanggap na gamitin ang aking library kaya

224
00:11:21,680 --> 00:11:23,000
hangga't mabigyan ninyo sa akin ang credit.

225
00:11:23,000 --> 00:11:25,670
Maaari kang gamitin ang aking library
kaya hangga't kapag ito Pinaghihiwa

226
00:11:25,670 --> 00:11:26,790
hindi mo masisi sa akin.

227
00:11:26,790 --> 00:11:30,310
Maaari kang gamitin ang aking library kaya mahaba
bilang hindi mo ginagamit ito upang kumita ng pera

228
00:11:30,310 --> 00:11:31,910
para sa iyong sarili.

229
00:11:31,910 --> 00:11:34,130
Ito ang mga uri ng mga karaniwang
takda.

230
00:11:34,130 --> 00:11:37,780
>> Para sa mga ito CS50 panghuling proyekto, ang mga ito
hindi dapat sobrang may-katuturang dahil

231
00:11:37,780 --> 00:11:41,440
ang mga proyekto na gamitin mo guys ay
marahil sa halip, isang uri ng, na kilala.

232
00:11:41,440 --> 00:11:44,170
Ngunit kapag aktwal mong pumunta out papunta sa
mundo at simulang gamitin ang mga library, na

233
00:11:44,170 --> 00:11:48,100
maaari o maaaring hindi pati na rin ipinatupad bilang
ang ilan sa mga mas sikat na mga bago kami

234
00:11:48,100 --> 00:11:49,780
pagpunta sa ay pagpunta sa pamamagitan ng.

235
00:11:49,780 --> 00:11:53,310
Ito ay handa na upang madalumat
ang mga lisensya at sa

236
00:11:53,310 --> 00:11:54,560
maunawaan kung ano ang ibig sabihin ng mga ito.

237
00:11:54,560 --> 00:11:58,120

238
00:11:58,120 --> 00:11:58,586
At balik.

239
00:11:58,586 --> 00:12:00,960
>> Mike RIZZO: OK.

240
00:12:00,960 --> 00:12:04,850
Kaya ngayon ang paglipat patungo sa daloy ng mga halimbawa
ng aktwal na CSS.

241
00:12:04,850 --> 00:12:07,770
Sa puntong ito sa ngayon, maaari mo
Hindi Nakaranas na ito.

242
00:12:07,770 --> 00:12:10,300
Ngunit maaaring nakatagpo mo ito sa
ang iyong araw-araw na buhay na kung saan ang isang bagay

243
00:12:10,300 --> 00:12:13,160
na mukhang isang paraan sa isang browser
Maaaring hindi tumingin sa parehong

244
00:12:13,160 --> 00:12:14,880
paraan sa ibang browser.

245
00:12:14,880 --> 00:12:17,400
>> Ito ay tinatawag na browser browser
compatibility.

246
00:12:17,400 --> 00:12:20,780
At increasingly ito ay nagiging mas at
higit pa sa isang problema, lalo na bilang

247
00:12:20,780 --> 00:12:25,260
mga browser tumagal ng higit pa at higit pa kalayaan
upang ipatupad ang mga bagay na gusto nila.

248
00:12:25,260 --> 00:12:28,440
Kaya sa pagtagumpayan iyon, doon talaga
isang mahusay na library na tinatawag na Normalize.CSS.

249
00:12:28,440 --> 00:12:32,236

250
00:12:32,236 --> 00:12:33,770
>> Tomas REIMERS: Isinama namin ang link.

251
00:12:33,770 --> 00:12:36,210
Sa puntong ito, ito ay kapaki-pakinabang kung
mayroon kang ang iyong laptop sa doon

252
00:12:36,210 --> 00:12:38,740
tumitingin sa site.

253
00:12:38,740 --> 00:12:42,580
At binibigyan ka namin ay ito sa iyo pakanan
dahil ngayon lamang ang CS50 panghuling

254
00:12:42,580 --> 00:12:44,370
proyekto ay aktwal na pagpunta sa
tatanungin ka upang ipatupad ito

255
00:12:44,370 --> 00:12:45,860
katulad at sa pamamagitan ng mga browser.

256
00:12:45,860 --> 00:12:49,250
>> Kaya lamang upang panatilihing sa likod ng iyong
ulo, ito ay isang kahanga-hangang library

257
00:12:49,250 --> 00:12:51,170
dahil habilin ito, uri ng,
ilagay sa pamantayan bagay.

258
00:12:51,170 --> 00:12:54,230
Sa Firefox, isang bagay na maaaring magpakita
bilang isang pixel sa kaliwa.

259
00:12:54,230 --> 00:12:58,390
At pagkatapos ay maaaring magpasya ang Chrome na talaga
ano nilalayong mo ay 10 pixels

260
00:12:58,390 --> 00:12:59,380
sa kaliwa.

261
00:12:59,380 --> 00:13:01,030
At gusto mong ilagay sa pamantayan na ito.

262
00:13:01,030 --> 00:13:05,360
Normalize ang talagang gawin ang isang talagang magandang
trabaho ng pagtiyak na ang iyong site

263
00:13:05,360 --> 00:13:08,070
mukhang ang parehong buong mga browser.

264
00:13:08,070 --> 00:13:10,660
>> Mike RIZZO: Kaya kung gusto naming lamang
i-click ang link talagang mabilis at palabas

265
00:13:10,660 --> 00:13:13,140
sa iyo kung ano na kamukha, mo
Maaari itong i-download gamit ang

266
00:13:13,140 --> 00:13:14,670
pindutan ng higanteng Download.

267
00:13:14,670 --> 00:13:18,520
O kaya naman hinihikayat ka ko na basahin ang higit pa tungkol dito
sa pamamagitan ng pag-click sa link na ito sa ibabang

268
00:13:18,520 --> 00:13:19,310
kanang sulok.

269
00:13:19,310 --> 00:13:22,420
>> Tomas REIMERS: At kung ikaw talaga
i-click ang Read Higit pa doon -

270
00:13:22,420 --> 00:13:24,340
i-click ang pinagmulan sa GitHub -

271
00:13:24,340 --> 00:13:31,720
makikita mo talaga makita ng open source
bigyan ng lisensya sa LICENSE.md doon.

272
00:13:31,720 --> 00:13:35,740
At makikita mo dito ay ang
napaka-tanyag na lisensya MIT.

273
00:13:35,740 --> 00:13:38,940
Muli, kung basahin mo sa pamamagitan ng text,
magagawa mong mahanap ito sa site

274
00:13:38,940 --> 00:13:42,550
namin na-reference bago at ma-
maunawaan ito nang hindi na kinakailangang basahin

275
00:13:42,550 --> 00:13:45,920
sa pamamagitan ng legal na hindi maintindihang pag-uusap.

276
00:13:45,920 --> 00:13:46,850
>> Mike RIZZO: OK, mahusay.

277
00:13:46,850 --> 00:13:47,940
Kaya na-normalize.

278
00:13:47,940 --> 00:13:49,190
Nais naming bigyan ka ng
na talagang mabilis.

279
00:13:49,190 --> 00:13:50,030
Oh, ang mayroon kang isang katanungan?

280
00:13:50,030 --> 00:13:53,013
>> Madla: Kaya kapag nag-download mo ito, mo
sundin lamang ang code na iyon na mayroon sila

281
00:13:53,013 --> 00:13:54,098
sa ilalim ng pindutang I-download?

282
00:13:54,098 --> 00:13:55,860
>> Tomas REIMERS: Oo, kaya
kapag nag-download ka -

283
00:13:55,860 --> 00:13:58,130
>> Mike RIZZO: Oh, iyan ay isang magandang punto.

284
00:13:58,130 --> 00:14:00,700
Kaya ang tanong ay kung paano gawin
talaga naming i-download ito?

285
00:14:00,700 --> 00:14:03,260
Kaya kung click namin sa link, makikita natin
na ito aktwal na nagpa-pop up

286
00:14:03,260 --> 00:14:05,030
sa source code.

287
00:14:05,030 --> 00:14:08,550
Kaya't upang gawin ito, kung ano ang magagawa namin
ako ay i-click lamang ang I-save Bilang.

288
00:14:08,550 --> 00:14:10,830
I-save Bilang at na dapat
ilabas ang isang file.

289
00:14:10,830 --> 00:14:14,160
At pagkatapos ay maaari pinili naming i-save ang
ito bilang normalize.CSS.

290
00:14:14,160 --> 00:14:15,810
At pagkatapos ay ang kailangan mong i-link ito sa -

291
00:14:15,810 --> 00:14:18,660
>> Tomas REIMERS: Ang parehong paraan sa iyo
mag-link sa anumang iba pang mga file.

292
00:14:18,660 --> 00:14:22,250
At sandaling i-link mo ito sa, kung ano ang mahusay na
tungkol sa normalize ay ito ay talagang

293
00:14:22,250 --> 00:14:25,920
mag-ingat ng lahat ng mga mahirap
gumagana sa pamamagitan ng mismo.

294
00:14:25,920 --> 00:14:27,730
Kahulugan na wala kang
magdagdag ng anumang mga klase.

295
00:14:27,730 --> 00:14:29,690
>> Hindi mo na kailangang gumawa ng kahit ano kakaiba.

296
00:14:29,690 --> 00:14:34,590
Ito ay normalize nang hindi mo
paggawa ng kahit ano pa.

297
00:14:34,590 --> 00:14:36,083
Oo, mayroon kang upang maisama ito.

298
00:14:36,083 --> 00:14:38,990

299
00:14:38,990 --> 00:14:40,240
Hindi tumutugon ang Google Chrome.

300
00:14:40,240 --> 00:14:43,270

301
00:14:43,270 --> 00:14:44,860
>> Lamang ng isang mabilis na bukod -

302
00:14:44,860 --> 00:14:46,800
Napansin ko namin jumped sa ito.

303
00:14:46,800 --> 00:14:49,010
Ang natitira sa ang pagtatanghal na ito ay
pagpunta sa maging isang mabilis na pangkalahatang-ideya.

304
00:14:49,010 --> 00:14:50,380
Ang isang survey ng mga aklatan.

305
00:14:50,380 --> 00:14:52,710
>> Talaga, ano ang mga ito.

306
00:14:52,710 --> 00:14:53,350
Ano ang kanilang ginagawa.

307
00:14:53,350 --> 00:14:54,060
Paano ang mga ito ay kapaki-pakinabang.

308
00:14:54,060 --> 00:14:56,540
Paano maaari mong ipatupad ang mga ito.

309
00:14:56,540 --> 00:14:59,730
Kung nais mong simulan ang pagtingin sa mga ito,
sumusunod sa kahabaan, at pagbabasa sa pamamagitan ng

310
00:14:59,730 --> 00:15:01,990
mga ito, lubos Gusto ko hinihikayat na.

311
00:15:01,990 --> 00:15:07,620
>> Bilang kahalili, maaari kang din sa
simulan ang pag-download ng mga ito at kabilang ang

312
00:15:07,620 --> 00:15:11,400
mga ito sa isang paningin lamang upang makita kung ano ang kanilang
mukhang o ano ang kanilang ginagawa kung mayroon kang

313
00:15:11,400 --> 00:15:12,270
ang iyong laptop sa harap ng sa iyo.

314
00:15:12,270 --> 00:15:14,650
Kung hindi, maaari kang panatilihing
nakikinig sa amin makipag-usap.

315
00:15:14,650 --> 00:15:15,500
Kami ay pagpunta sa panatilihin ang pakikipag-usap.

316
00:15:15,500 --> 00:15:18,680
At mayroon kaming oras sa dulo, sana ay
ipapakita namin talagang makakuha sa pagpapakita sa iyo

317
00:15:18,680 --> 00:15:20,946
kung ano ang ilan sa mga aklatan
magmukhang.

318
00:15:20,946 --> 00:15:22,320
>> Mike RIZZO: Cool.

319
00:15:22,320 --> 00:15:25,466
Ang lahat ng mga karapatan, kaya ngayon ay makipag-usap ipaalam
tungkol sa Font Kahanga-hanga.

320
00:15:25,466 --> 00:15:30,480
>> Tomas REIMERS: Kahanga-hanga kaya Font ay isang
talagang malinis at maayos site, lalo na para sa mga

321
00:15:30,480 --> 00:15:32,450
ng sa amin kung sino mas artistically
may ulo.

322
00:15:32,450 --> 00:15:36,330

323
00:15:36,330 --> 00:15:38,880
Pagbalewala ang Font pangalan Kahanga-hanga, nagbibigay ito sa
ka ng grupo ng mga icon, na mga

324
00:15:38,880 --> 00:15:41,050
napaka kapaki-pakinabang.

325
00:15:41,050 --> 00:15:45,950
Kaya ng maraming beses makikita mo ipatupad ang isang
icon baka gusto tulad ng isang maganda x kaya

326
00:15:45,950 --> 00:15:47,170
na maaari mong isara ang isang bagay.

327
00:15:47,170 --> 00:15:49,910
>> O baka gusto ng ilang mga uri I-edit ang pindutan ng
may isang lapis pagguhit tulad ng

328
00:15:49,910 --> 00:15:50,940
lahat ng tao pa ang may.

329
00:15:50,940 --> 00:15:53,850
At na kapag malaman mo na
pagguhit ng mga icon ay maaaring maging

330
00:15:53,850 --> 00:15:55,510
napaka nakakapagod at mahirap.

331
00:15:55,510 --> 00:15:59,160
Font Kahanga-hanga - kung aktwal mong
pumunta sa site -

332
00:15:59,160 --> 00:16:02,892
ay nagbibigay sa iyo ng maraming mga icon sa ilalim
ang mga icon sa itaas.

333
00:16:02,892 --> 00:16:06,980
Oo, lamang ang tuktok.

334
00:16:06,980 --> 00:16:09,030
Ito ay magbibigay sa iyo ng maraming
ng mga icon para sa libre.

335
00:16:09,030 --> 00:16:15,210
>> Kaya dito nakikita mo ay mayroon kaming mga bagay tulad ng isang
asterisk, bar, isang kidlat tornilyo, isang

336
00:16:15,210 --> 00:16:19,750
kalendaryo, isang bug, isang libro, at iba pa.

337
00:16:19,750 --> 00:16:21,110
Maaari itong maging napaka-kapaki-pakinabang.

338
00:16:21,110 --> 00:16:24,290
Ang paraan isama ka na ito ay isinama mo
Literal na CSS file.

339
00:16:24,290 --> 00:16:29,760
At pagkatapos mong kasama ang CSS file,
ano ang maaari mong gawin ay lumikha ka ng isang

340
00:16:29,760 --> 00:16:33,430
tag na tinatawag I. Nag satands para sa
na icon na may klase FA

341
00:16:33,430 --> 00:16:34,460
nakatayo para Font Kahanga-hanga.

342
00:16:34,460 --> 00:16:36,330
At pagkatapos, kahit anong klase gusto mo.

343
00:16:36,330 --> 00:16:41,220
>> Kaya kung gusto ko ang isang icon ng plus
Square dito mismo, nais kong bigyan

344
00:16:41,220 --> 00:16:43,290
ito ang klase FA.

345
00:16:43,290 --> 00:16:46,230
At pagkatapos FA gitling plus gitling square.

346
00:16:46,230 --> 00:16:50,325

347
00:16:50,325 --> 00:16:53,710
>> Mike RIZZO: Mahusay, OK.

348
00:16:53,710 --> 00:16:56,980
>> Tomas REIMERS: At pagkatapos, ang huling CSS
library gusto naming makuha sa pamamagitan tayo

349
00:16:56,980 --> 00:16:59,950
sinusubukan upang panatilihin itong minimal na sa CSS
mga library dahil kami mapagtanto ang

350
00:16:59,950 --> 00:17:03,660
pamagat ng pagtatanghal na ito
ay JavaScript Aklatan.

351
00:17:03,660 --> 00:17:07,089
Ngunit naisip namin na maaaring namin pati na rin
ipakilala sa mga iba pang mga library

352
00:17:07,089 --> 00:17:09,569
habang pinag-uusapan natin ay tungkol sa mga aklatan.

353
00:17:09,569 --> 00:17:11,400
>> Ito'y Google Web Mga Font.

354
00:17:11,400 --> 00:17:17,040
At kung ano Google Web Mga Font ay nagpapahintulot sa iyo
upang gawin ay ang magdagdag ng mga font sa iyong website,

355
00:17:17,040 --> 00:17:22,079
na kung saan ay isang talagang madaling paraan upang gawin itong
medyo at upang makilala ang iyong mga hanay

356
00:17:22,079 --> 00:17:24,460
mula sa lahat ng iba pa ay kung ito ay may
gandang font o kung mayroon itong isang magaling

357
00:17:24,460 --> 00:17:27,790
koleksyon ng mga font.

358
00:17:27,790 --> 00:17:31,410
Google Web Mga Font maganda hindi tulad ng iba pang mga
mga library sa kamalayan na ito ay isang

359
00:17:31,410 --> 00:17:33,490
talagang may gabay sa pag-install.

360
00:17:33,490 --> 00:17:38,680
>> Kaya kung sinusundan mo ang link na ito,
google.com / font, naniniwala ako.

361
00:17:38,680 --> 00:17:41,100
Kung mong sundin iyon, mo
Maaari piliin ang iyong mga font.

362
00:17:41,100 --> 00:17:44,410
Maaari kang pumili sa kaliwa mula sa
kapal, tagilid, at iba pa.

363
00:17:44,410 --> 00:17:48,970
At pagkatapos, sa sandaling pinili mo ang isa,
maaari mong i-click ang mabilis na paggamit.

364
00:17:48,970 --> 00:17:49,820
Mag-right doon.

365
00:17:49,820 --> 00:17:51,590
Ika-kanan ng box.

366
00:17:51,590 --> 00:17:54,380

367
00:17:54,380 --> 00:17:56,700
>> At pagkatapos, mag-scroll pababa.

368
00:17:56,700 --> 00:17:59,600

369
00:17:59,600 --> 00:18:02,650
Una sa lahat, bibigyan ka lang nila ng CSS na
kailangan mo upang aktwal na naka-link dito.

370
00:18:02,650 --> 00:18:03,330
Ito ay mula doon.

371
00:18:03,330 --> 00:18:05,170
Maaari mo lamang kopyahin at i-paste na in

372
00:18:05,170 --> 00:18:07,250
At ang gandang bagay tungkol sa ang isang ito ay
hindi mo talaga kahit na kailangan upang

373
00:18:07,250 --> 00:18:08,340
i-download ang file.

374
00:18:08,340 --> 00:18:11,170
>> Ano ang ito ay pagpunta sa gawin ay itong ibang mapupuntahan
mag-link sa bersyon ng ito ng Google.

375
00:18:11,170 --> 00:18:14,130
Kaya pabalik sa kung ano ang ibig sabihin iyon.

376
00:18:14,130 --> 00:18:18,270
Nangangahulugan iyon na kapag gumagamit ng
Dina-download ang iyong mga file -

377
00:18:18,270 --> 00:18:22,300
Dina-download ang iyong pahina ng HTML - ang iyong HTML
pahina ay pagpunta upang isangguni ang file na ito.

378
00:18:22,300 --> 00:18:26,790
>> Kaya pagkatapos, ang nangyayari sa iyong computer upang makita,
oh, ito ay naka-host sa google.com sa halip

379
00:18:26,790 --> 00:18:28,170
kaysa sa theirsite.com.

380
00:18:28,170 --> 00:18:30,370
Hayaan akong pumunta tanungin ang Google para sa file na iyon.

381
00:18:30,370 --> 00:18:32,800
At pagkatapos, ito ay pagpunta sa isama
ito halos parang ito ay isang

382
00:18:32,800 --> 00:18:35,584
bahagi ng iyong sariling site.

383
00:18:35,584 --> 00:18:36,540
>> Tomas REIMERS: Cool.

384
00:18:36,540 --> 00:18:40,980
At minsan isama mo na, pagkatapos ay sa
isama ito sa iyong CSS, nagbibigay sa iyo ng

385
00:18:40,980 --> 00:18:41,830
ang aktwal na linya.

386
00:18:41,830 --> 00:18:45,188
Kaya itinakda mo ang pamilya ng font ng ari-arian
katumbas ng pangalan ng iyong font.

387
00:18:45,188 --> 00:18:47,936

388
00:18:47,936 --> 00:18:50,440
>> Mike RIZZO: OK.

389
00:18:50,440 --> 00:18:52,220
Kaya lang tapos na kami sa CSS.

390
00:18:52,220 --> 00:18:57,230
At ang ilan sa ikaw ay maaaring iniisip, mahusay,
nagkaroon kami ng ilang mga CSS sa CS50 Finance.

391
00:18:57,230 --> 00:19:00,390
Ngunit CSS library ay bootstrap.

392
00:19:00,390 --> 00:19:05,190
Talaga namin ang Bootstrap ng kaunti
sa ibang pagkakataon sa ilalim ng JavaScript dahil sa

393
00:19:05,190 --> 00:19:09,660
ay dumarating rin sa library ng Bootstrap CSS
na may maraming mga JavaScript na

394
00:19:09,660 --> 00:19:12,060
Bootstrap o Twitter -
sino ginawa Bootstrap -

395
00:19:12,060 --> 00:19:15,426
Ginagamit upang pamahalaan ang lahat ng kanilang mga CSS.

396
00:19:15,426 --> 00:19:19,592
>> Tomas REIMERS: sinuman mayroon ba anumang
mga tanong sa ngayon tungkol sa CSS sa pangkalahatan?

397
00:19:19,592 --> 00:19:20,723
Humihingi kami ng magandang?

398
00:19:20,723 --> 00:19:21,216
Kahanga-hanga.

399
00:19:21,216 --> 00:19:22,495
>> Mike RIZZO: Kahanga-hanga.

400
00:19:22,495 --> 00:19:25,136
>> Tomas REIMERS: Kaya gumagalaw
on sa JavaScript.

401
00:19:25,136 --> 00:19:27,900
>> Mike RIZZO: Kaya gusto naming makipag-usap
tungkol sa jQuery upang magsimula sa.

402
00:19:27,900 --> 00:19:30,780
Ay kahit sino nakarinig ng jQuery
bago o ginamit ito?

403
00:19:30,780 --> 00:19:32,180
Oo, ilang?

404
00:19:32,180 --> 00:19:36,000
Kaya kung nagtatrabaho ka lang sa katutubong
JavaScript, makikita mo ang iyong sarili

405
00:19:36,000 --> 00:19:41,000
pag-type ng maraming mahaba ang tagapili ng maraming.

406
00:19:41,000 --> 00:19:44,400
Kaya kung ano ang ginagawa jQuery ay nagbibigay ito ng
gandang wrapper para sa JavaScript

407
00:19:44,400 --> 00:19:48,180
wika na nagbibigay-daan sa iyo na madaling piliin
at manipulahin ang iba't ibang mga elemento

408
00:19:48,180 --> 00:19:52,470
sa loob ng modelo dokumento sa bagay ng
web page o ang DOM, na sa palagay ko

409
00:19:52,470 --> 00:19:54,290
ka guys narinig ng sa
magbigay ng panayam sa puntong ito.

410
00:19:54,290 --> 00:19:57,550
>> Tomas REIMERS: Kung hindi mo pa naririnig ng
ito o kung hindi mo pa napanood magbigay ng panayam

411
00:19:57,550 --> 00:20:01,870
pa, ang Dokumento Bagay modelo
talaga kung paano ang mga bagay ay kinakatawan.

412
00:20:01,870 --> 00:20:05,290
Kaya uri ng hitsura ng HTML tulad ng isang puno
kapag aktwal mong iguhit ito.

413
00:20:05,290 --> 00:20:06,850
Mayroon kang ang elemento ng HTML sa itaas.

414
00:20:06,850 --> 00:20:07,560
Mayroon kang ang ulo at katawan.

415
00:20:07,560 --> 00:20:09,500
>> At pagkatapos, sa loob ka na
may lahat ng iba pa.

416
00:20:09,500 --> 00:20:10,660
Iyon ay tinutukoy bilang ang DOM -

417
00:20:10,660 --> 00:20:12,120
Dokumento Bagay Model.

418
00:20:12,120 --> 00:20:16,090
Kaya isang modelo na kung saan ay kumakatawan sa mga bagay sa
ang dokumento ay isang madaling paraan upang isipin

419
00:20:16,090 --> 00:20:18,560
tungkol iyon.

420
00:20:18,560 --> 00:20:22,520
At ang isa sa mga dakilang bagay tungkol sa jQuery
ay ito talagang gumagawa ng traversing

421
00:20:22,520 --> 00:20:26,460
na at pagmamanipula ng mga elemento sa loob
na hindi mapaniniwalaan o kapani-paniwala simple.

422
00:20:26,460 --> 00:20:30,300
>> Kaya simple, sa katunayan, na ang karamihan ng
JavaScript library o kung hindi ang

423
00:20:30,300 --> 00:20:34,200
karamihan, sa grand karamihan ng mga bago
makikita mo ang tunay na nangangailangan ng jQuery kaya

424
00:20:34,200 --> 00:20:37,530
na maaaring tumakbo ang kanilang mga sarili lamang
dahil kung hindi ka magkaroon ng jQuery, mo

425
00:20:37,530 --> 00:20:40,540
Gusto aksaya ng maraming oras sinusubukang i-
malaman kung paano pumili ng mga tiyak na

426
00:20:40,540 --> 00:20:43,660
mga elemento at kung paano gawin iba pang mga bagay.

427
00:20:43,660 --> 00:20:47,950
At ang iba pang mahusay na bagay tungkol sa jQuery
ay na ito ay ang cross browser compatible.

428
00:20:47,950 --> 00:20:51,550
>> Kaya tandaan pabalik kapag sinabi namin na
hindi ipatupad ang lahat ng mga browser

429
00:20:51,550 --> 00:20:53,100
bagay sa parehong paraan?

430
00:20:53,100 --> 00:20:55,120
Ito ay totoo kahit sa JavaScript.

431
00:20:55,120 --> 00:20:58,220
At ang isa sa mga dakilang bagay tungkol sa jQuery
ay na ito detect ang

432
00:20:58,220 --> 00:21:00,300
browser at makita ang
naaangkop na pamamaraan.

433
00:21:00,300 --> 00:21:03,420
>> Kaya kung kailangan mong pumili ng isang sangkap,
Maaaring sabihin ng Internet Explorer ikaw ay

434
00:21:03,420 --> 00:21:05,770
dapat gawin ito paraan.

435
00:21:05,770 --> 00:21:08,300
Firefox ay maaaring sabihin ang tamang
paraan ay ganitong paraan.

436
00:21:08,300 --> 00:21:09,710
hindi na mahalaga sa jQuery.

437
00:21:09,710 --> 00:21:12,550
Kapag sabihin mo sa jQuery upang pumili ng isang
elemento ito ay malaman kung paano ito

438
00:21:12,550 --> 00:21:16,290
ipagpalagay na gawin ito sa loob ng browser ang
gumagamit ay sa kasalukuyan, at pagkatapos ay gawin

439
00:21:16,290 --> 00:21:18,584
ito na paraan.

440
00:21:18,584 --> 00:21:22,650
>> Mike RIZZO: Kaya hayaan hindi na makipag-usap tungkol sa
ang paggamit ng jQuery kaunti.

441
00:21:22,650 --> 00:21:27,670
Tulad ng PHP, jQuery ay may isang partikular na
pagkamatuwain para sa dollar sign.

442
00:21:27,670 --> 00:21:30,880
Kaya makikita mo makita na ang anumang jQuery -

443
00:21:30,880 --> 00:21:32,060
well, hindi lahat.

444
00:21:32,060 --> 00:21:35,210
Maaari mong minsan ay palitan ang dollar
mag-sign na may salitang jQuery.

445
00:21:35,210 --> 00:21:38,980
Ngunit sa pangkalahatan, dahil lang sa ito ay
mas maikli, sa tuwing nakikita mo jQuery pagiging

446
00:21:38,980 --> 00:21:41,420
ginamit magkakaroon ito ay may isang dollar sign.

447
00:21:41,420 --> 00:21:47,030
>> Kaya dito kami ay pagpapakita lamang ng isang simula
tagapili para sa isang elemento sa DOM.

448
00:21:47,030 --> 00:21:52,850
Dito, mayroon kaming ang dollar sign sinundan
sa pamamagitan ng bukas na mga panaklong at pagkatapos ay i-quote.

449
00:21:52,850 --> 00:21:56,130
At sa loob ng mga panipi pumunta sa aming tagapili
para sa iba't ibang mga elemento.

450
00:21:56,130 --> 00:21:59,810
Tulad ng sa CSS, kinailangan naming tagapili sa
makakapag-style iba't ibang mga elemento

451
00:21:59,810 --> 00:22:00,840
sa loob ng pahina.

452
00:22:00,840 --> 00:22:06,555
Yaong iba't ibang mga tagapili isalin
eksakto sa jQuery at JavaScript,

453
00:22:06,555 --> 00:22:07,820
para sa pinaka-bahagi.

454
00:22:07,820 --> 00:22:10,120
>> Kaya dito mayroon kaming isang tuldok foo.

455
00:22:10,120 --> 00:22:14,780
Kaya kung isipin mo mula sa panayam,
ang tuldok ay nangangahulugan lamang ng uri.

456
00:22:14,780 --> 00:22:18,850
Kaya ka pagpili namin elemento
may klase foo.

457
00:22:18,850 --> 00:22:22,670
Kaya kung pumunta ako nang mas maaga at buksan up ang aming
JavaScript console dito talagang mabilis

458
00:22:22,670 --> 00:22:26,830
nagpapakita lamang ito, kung lamang nagta-type ako ang
dollar sign, nakita namin na ito ang ilang

459
00:22:26,830 --> 00:22:28,090
function na ay lumalabas.

460
00:22:28,090 --> 00:22:29,420
At lamang ito ay tinukoy sa pamamagitan ng jQuery.

461
00:22:29,420 --> 00:22:32,120
>> Tomas REIMERS: Para sa mga ng sa iyo
hindi marunong, ang console ay isang kasangkapan

462
00:22:32,120 --> 00:22:35,430
sa loob ng Chrome, na nagpapahintulot sa iyo na,
talaga, magpatakbo ng JavaScript sa

463
00:22:35,430 --> 00:22:36,450
kasalukuyang pahina.

464
00:22:36,450 --> 00:22:39,420
Ito makikita mo ang hindi mapaniniwalaan o kapani-paniwala kapaki-pakinabang kapag
aktwal na pag-debug at mo

465
00:22:39,420 --> 00:22:42,400
kailangan na maging tulad ng, kung ano ang kasalukuyang
halaga ng ilang mga global variable o ano

466
00:22:42,400 --> 00:22:43,910
ay iba pang dahilan?

467
00:22:43,910 --> 00:22:47,620
Ito ay uri ng tulad ng GDB na may pagbubukod
na maaari mong talaga

468
00:22:47,620 --> 00:22:51,600
manipulahin elemento sa pahina sa
ito sa isang lubhang mas madaling paraan.

469
00:22:51,600 --> 00:22:55,080
At din ito ay hindi, talaga, suriin
in gamit mo bago ginagawa nito kahit ano.

470
00:22:55,080 --> 00:22:58,660
>> Kaya samantalang, GDB ay maaaring maging tulad ng, ikaw ay
bang gusto mong patakbuhin ang susunod na hakbang?

471
00:22:58,660 --> 00:22:59,830
Ang console ay sa real.

472
00:22:59,830 --> 00:23:03,690
Kaya bilang mga web page ay rendering at
paggawa ng kahit anupamang ito ang ginagawa, ang

473
00:23:03,690 --> 00:23:05,720
konseho ng ring tumatakbo sa tabi nito.

474
00:23:05,720 --> 00:23:08,330
At maaari kang maglagay magbintang code na ito sa
console na, na

475
00:23:08,330 --> 00:23:09,260
na patatakbuhin sa pahina.

476
00:23:09,260 --> 00:23:12,190
>> Mike RIZZO: Kaya na pumasok sa console,
Hulaan ko dapat ako sa madaling sabi

477
00:23:12,190 --> 00:23:13,750
banggitin kung paano gawin iyon.

478
00:23:13,750 --> 00:23:17,850
Sa huling mga problema na maaaring mayroon ka
gamit na Chrome na siyasatin elemento

479
00:23:17,850 --> 00:23:20,440
mga pag-andar o tingnan ang pahina ng source -

480
00:23:20,440 --> 00:23:23,870
at ang mga ay naa-access sa pamamagitan lamang ng karapatan
ng pag-click sa pahina o isang partikular na

481
00:23:23,870 --> 00:23:28,430
elemento at paggawa alinman siyasatin
elemento o tingnan ang pahina ng pinagmulan.

482
00:23:28,430 --> 00:23:31,190
Pwede rin kaming ma-access ang JavaScript
console nang direkta sa pamamagitan ng

483
00:23:31,190 --> 00:23:33,630
pagpili siyasatin elemento.

484
00:23:33,630 --> 00:23:37,930
Kaya pagkatapos ay pindutin mo lamang console
sa malayong kanang bahagi.

485
00:23:37,930 --> 00:23:41,900
>> Bilang kahalili, maaari mo pa ring nawala
sa itaas na kanang sulok,

486
00:23:41,900 --> 00:23:46,820
na kung saan ay cut off sa screen na ito kung saan
mayroon itong tatlong pahalang na mga bar.

487
00:23:46,820 --> 00:23:52,010
At kang pumunta down sa mga tool at
pagkatapos ang JavaScript console

488
00:23:52,010 --> 00:23:53,240
dito kung saan maaaring makita -

489
00:23:53,240 --> 00:23:54,370
hindi bababa sa Windows -

490
00:23:54,370 --> 00:23:59,680
ang shortcut ay Control Shift J. Kaya pagkatapos
kung gusto naming pumili ng isang elemento

491
00:23:59,680 --> 00:24:06,060
sa loob ng pahinang ito, tulad ng ipinakita ko
bago, ginagawa namin dollar sign bukas parens

492
00:24:06,060 --> 00:24:08,180
at pagkatapos ay i-quote.

493
00:24:08,180 --> 00:24:11,750
>> Ang isang kagiliw-giliw na bagay ay, sa pangkalahatan,
single quote at i-double quotes ay

494
00:24:11,750 --> 00:24:12,370
maaaring palitan.

495
00:24:12,370 --> 00:24:16,050
Kaya ng maraming mga tao gamitin na lamang ang nag-iisang
quote dahil hindi nila mas mabilis i-type

496
00:24:16,050 --> 00:24:19,780
kaysa double quote dahil hindi mo gusto
mayroon upang i-hold pababa ang Shift.

497
00:24:19,780 --> 00:24:21,770
Kaya ko makikita lamang gawin iyon ngayon.

498
00:24:21,770 --> 00:24:24,510
>> Kaya gusto kong piliin ang isang bagay
may klase.

499
00:24:24,510 --> 00:24:27,200
Lalagyan, dahil lang alam ko na
isang bagay na sa aming

500
00:24:27,200 --> 00:24:28,740
web page ngayon.

501
00:24:28,740 --> 00:24:29,520
At pindutin ko ang Enter.

502
00:24:29,520 --> 00:24:31,670
At maaari naming makita na ito napiling ito.

503
00:24:31,670 --> 00:24:34,990
Kaya ito ay nagpapakita up na ito
Nagbalik ang bagay na iyon.

504
00:24:34,990 --> 00:24:36,620
Kaya na ang isang pangunahing pagpipilian.

505
00:24:36,620 --> 00:24:40,080
Kung gusto naming talagang manipulahin ito,
Gusto mo kailangang tumawag sa isang bagay

506
00:24:40,080 --> 00:24:43,925
sa pagpili na, na
makikipag-ugnay kami sa ibang pagkakataon.

507
00:24:43,925 --> 00:24:49,030
>> Tomas REIMERS: Kaya lamang upang tumingin sa na
mga mas malalalim na, ito ay hindi naiiba

508
00:24:49,030 --> 00:24:52,245
kaysa sa mga tawag sa function na aming ginawa sa C.
Ang pangalan ng function na dito ay isang

509
00:24:52,245 --> 00:24:52,580
maliit na kakaiba.

510
00:24:52,580 --> 00:24:55,640
Ito ay dollar sign.

511
00:24:55,640 --> 00:24:57,010
Ito ay lamang ng isang pangalan ng isang function.

512
00:24:57,010 --> 00:24:58,810
Mayroong walang espesyal tungkol sa ito ay.

513
00:24:58,810 --> 00:25:00,450
>> Mayroon kaming bukas panaklong.

514
00:25:00,450 --> 00:25:03,880
Pagkatapos, mayroon kaming ang aming isang argument, na
sa kasong ito ang mangyayari sa maging isang string,

515
00:25:03,880 --> 00:25:05,680
na kung saan ay isang tagapili para dito.

516
00:25:05,680 --> 00:25:08,130
At pagkatapos, mayroon kaming ang aming
closed panaklong.

517
00:25:08,130 --> 00:25:09,960
Iyan na ang lahat.

518
00:25:09,960 --> 00:25:11,500
>> Ito ay hindi na malaking-malaki naiiba.

519
00:25:11,500 --> 00:25:12,900
Bagaman, ito ay tumingin napaka-kakaiba.

520
00:25:12,900 --> 00:25:17,220
At iyon ay maaaring maging, uri ng, isang malagkit
ituro para sa maraming mga tao.

521
00:25:17,220 --> 00:25:21,460
>> Mike RIZZO: Kaya katulad, kung gusto naming
upang piliin ang isang elemento na mayroong isang ID,

522
00:25:21,460 --> 00:25:23,470
ngayon gusto naming piliin sa pamamagitan ng
ID sa halip ng klase.

523
00:25:23,470 --> 00:25:28,080
Gusto ito ay isang katulad na bagay kung saan kami
gawin lamang ang matalim pag-sign para sa ID.

524
00:25:28,080 --> 00:25:33,576
Kaya kami ng pagpili dito lahat
elemento na may ID bar.

525
00:25:33,576 --> 00:25:35,400
>> Tomas REIMERS: At ito ay umaabot.

526
00:25:35,400 --> 00:25:36,450
CSS na umaabot.

527
00:25:36,450 --> 00:25:42,260
Tulad ng sa CSS, maaari mong piliin ang lahat ng
mga link, na kung saan ay may klase foo.

528
00:25:42,260 --> 00:25:43,420
Narito, ito ay ang parehong bagay.

529
00:25:43,420 --> 00:25:52,750
>> Maaari mong gawin a.foo, na magiging piliin
lahat ng mga link na may klase foo.

530
00:25:52,750 --> 00:25:58,860
Maaari mong gawin ang isang matalim bar, na gagawin
piliin ang link na may ID bar at sa gayon

531
00:25:58,860 --> 00:25:59,770
sa at iba pa.

532
00:25:59,770 --> 00:26:02,120
Anumang tagapili ng CSS ay hindi isang wastong
jQuery tagapili.

533
00:26:02,120 --> 00:26:03,370
>> Mike RIZZO: Oo.

534
00:26:03,370 --> 00:26:07,996

535
00:26:07,996 --> 00:26:11,460
OK, kaya ngayon sabihin makakuha ng sa ilang sandali
ng pagmamanipula ng maaari naming gawin sa

536
00:26:11,460 --> 00:26:12,870
ang aming jQuery.

537
00:26:12,870 --> 00:26:19,280
Kaya jQuery ay may partikular na uri
ng pagtatanda na kung saan namin gamitin na lamang

538
00:26:19,280 --> 00:26:20,170
ang dot sa dulo.

539
00:26:20,170 --> 00:26:23,340
At maaari mong isipin na ito tulad ng sa
C kung paano namin ay may iba't ibang mga structs.

540
00:26:23,340 --> 00:26:27,110
At upang pumunta sa mga structs, gagawin mo
gumamit ng isang tuldok upang makapunta sa mga ito.

541
00:26:27,110 --> 00:26:28,480
>> Ito ay, uri ng, isang katulad na bagay.

542
00:26:28,480 --> 00:26:33,570
Tanging ngayon mayroon kaming mga pag-andar sa loob ng ito
selector na maaari naming tumawag sa ito.

543
00:26:33,570 --> 00:26:38,640
Kaya dito, ang pinakaunang halimbawa
maaari mong makita ay isang CSS selector.

544
00:26:38,640 --> 00:26:45,290
At talaga, kung ano na ang ginagawa ay ito
Nalalapat ang unang elemento ng CSS upang ito

545
00:26:45,290 --> 00:26:46,230
bagay na iyong pinili -

546
00:26:46,230 --> 00:26:47,720
ang elementong ito na iyong pinili -

547
00:26:47,720 --> 00:26:49,290
ng halagang iyon.

548
00:26:49,290 --> 00:26:55,390
>> Tomas REIMERS: Kaya isang madaling pagsasalin ng
na magiging kung jQuery, talaga,

549
00:26:55,390 --> 00:26:57,790
kinuha lamang foo.

550
00:26:57,790 --> 00:27:05,480
At pagkatapos sa CSS sinabi,
kulayan pula at malapit.

551
00:27:05,480 --> 00:27:06,670
Ito ay ang parehong mga ideya.

552
00:27:06,670 --> 00:27:08,800
Ano tapos na ito ay ito ay pinili
lahat ng elemento ng foo.

553
00:27:08,800 --> 00:27:10,170
At pagkatapos ito ay inilapat.

554
00:27:10,170 --> 00:27:15,884
Pagsunud-sunurin ayon ng, ang kulay ng ari-arian
ay katumbas ng pula.

555
00:27:15,884 --> 00:27:21,070
>> Mike RIZZO: Katulad nito, kami ay maaari ring baguhin
ang aktwal na nilalaman ng kung ano ang

556
00:27:21,070 --> 00:27:24,870
lumilitaw sa HTML ng pahina, na
ay talagang cool na dahil ang ibig sabihin nito ang iyong

557
00:27:24,870 --> 00:27:28,095
web mga pahina ay maaari na ngayong maging ganap na dynamic na
at hindi kailangang maging static

558
00:27:28,095 --> 00:27:31,660
na kang mag-print out gamit ang PHP
sa pinakadulo simula ng

559
00:27:31,660 --> 00:27:33,320
ang pahina na load.

560
00:27:33,320 --> 00:27:36,810
Kaya dito kung gusto naming makapagpabago sa
aktwal na HTML ng pahina, ginagawa namin ngayon

561
00:27:36,810 --> 00:27:43,550
tawagan ang HTML function, kung saan pagkatapos lamang
insert namin ang kahit anong tumukoy sa

562
00:27:43,550 --> 00:27:45,390
na elemento na aming pinili.

563
00:27:45,390 --> 00:27:49,810
Kaya dito kami ay pagpili elemento na may
class na foo at pagkatapos ay sinasabi ito ng HTML

564
00:27:49,810 --> 00:27:52,200
ito ay halo mundo ngayon.

565
00:27:52,200 --> 00:27:55,600
>> Tomas REIMERS: At kapag sa tingin mo tungkol sa
ano ang mga kapaki-pakinabang na mga application ng

566
00:27:55,600 --> 00:28:00,800
ito, ito ang CSS isa, ang unang bagay na
maaari simulan upang isipin ang tungkol ay

567
00:28:00,800 --> 00:28:03,070
sa mga tuntunin ng drop down na menu kahit.

568
00:28:03,070 --> 00:28:08,350
Maaari mong simulan upang gumawa ng mga bagay tulad ng, kapag
isang user hovers sa ibabaw ng tuktok bahagi

569
00:28:08,350 --> 00:28:11,970
ng isang drop down na, Gusto mo bang gumawa
sa ilalim na bahagi makikita.

570
00:28:11,970 --> 00:28:12,540
Mag-right?

571
00:28:12,540 --> 00:28:15,610
>> Kaya sa CSS, mayroon kaming mga pag-aari
upang gumawa ng isang bagay na nakikita.

572
00:28:15,610 --> 00:28:19,330
Mga bagay tulad ng display tutuldok none
gagawing invisible.

573
00:28:19,330 --> 00:28:21,190
Ipakita ang block gagawing nakikita.

574
00:28:21,190 --> 00:28:25,860
O kaya kahit na gusto mong pumunta mas simple, mo
May mga bagay na tulad ay katumbas ng kakayahang makita

575
00:28:25,860 --> 00:28:27,520
nakikita, at kakayahang makita ay katumbas ng nakatagong.

576
00:28:27,520 --> 00:28:30,330

577
00:28:30,330 --> 00:28:34,780
>> At maaari mong simulan upang ipatupad ang mga bagay
tulad ng drop down na menu karapatan

578
00:28:34,780 --> 00:28:38,410
matapos makakuha ka sa pamamagitan ng ideya kung paano
maaari mong malaman kapag nagbukas ito,

579
00:28:38,410 --> 00:28:39,850
na aasikasuhin namin sa pamamagitan ng napaka sa madaling sabi.

580
00:28:39,850 --> 00:28:42,160
Ngunit maaari naming simulan upang makita ang
mga application ng ito.

581
00:28:42,160 --> 00:28:45,540
Sa isang katulad na kahulugan, kung ikaw ay upang subukan
at magpatupad ng, sabihin nating, isang chat

582
00:28:45,540 --> 00:28:48,620
engine at nais mong gumawa ng isang maliit na
makaisip ng speech bubble sa tuwing ikaw ay

583
00:28:48,620 --> 00:28:52,880
Nakakuha ng isang bagong mensahe, sa sandaling makuha mo ang mga
bagong mensahe, maaari kang magsagawa ng kaunti

584
00:28:52,880 --> 00:28:55,890
makaisip ng speech bubble sa pamamagitan ng binabago
sa HTML ng pahina, i-right?

585
00:28:55,890 --> 00:29:00,540
Sa pamamagitan ng pagdaragdag na ang dagdag na speech bubble
may dagdag na teksto sa doon.

586
00:29:00,540 --> 00:29:01,140
Oo?

587
00:29:01,140 --> 00:29:07,750
>> Madla: So gusto mong i-embed ito sa loob ng
ang HTML code sa isang uri ng tulad ng isang

588
00:29:07,750 --> 00:29:10,534
[Hindi marinig]?

589
00:29:10,534 --> 00:29:12,940
>> Mike RIZZO: Mag-right.

590
00:29:12,940 --> 00:29:16,190
Oo, susuriin namin na
sa ilang sandali.

591
00:29:16,190 --> 00:29:18,810
Oo, ito ay katulad ng isang
Medyo sa PHP.

592
00:29:18,810 --> 00:29:21,240
Hindi eksaktong katulad.

593
00:29:21,240 --> 00:29:24,730
>> Ang isang mahusay na pagkakaiba upang gumawa ay kung ano ito
ay aktwal na pag-edit kapag nag-edit namin

594
00:29:24,730 --> 00:29:28,480
ang pahina dahil hindi ito magiging
pag-edit ang aktwal na file na ay pagiging

595
00:29:28,480 --> 00:29:31,380
pinananatiling sa server dahil sa mundo
hindi dapat magkaroon ng pahintulot

596
00:29:31,380 --> 00:29:32,610
i-edit ang iyong mga file.

597
00:29:32,610 --> 00:29:36,080
Ito ay lamang ng pag-edit kung ano ang nasa pahina
at kung ano ang ipinapakita sa loob

598
00:29:36,080 --> 00:29:36,950
ang browser.

599
00:29:36,950 --> 00:29:40,340
Kaya't kung ikaw ay i-reload ang pahina pagkatapos,
sabihin, ang pagtanggal ng isang bagay bilang namin

600
00:29:40,340 --> 00:29:44,730
tingnan ang maaari naming gawin sa pag-alis ng tawag,
bagay na gusto pagkatapos ay muling lilitaw.

601
00:29:44,730 --> 00:29:48,590
>> Tomas REIMERS: Kaya isang paraan upang isipin ang tungkol
ito ay kung ako iyong computer at

602
00:29:48,590 --> 00:29:50,170
Mike ay, uri ng, ang server.

603
00:29:50,170 --> 00:29:53,850
Ano ang mangyayari ay pupuntahan ko
magtanong Mike, hey, maaari akong magkaroon ng isang kopya ng

604
00:29:53,850 --> 00:29:54,630
ang web page na?

605
00:29:54,630 --> 00:29:56,190
At makikita siya ninyo ako ng kopya nito.

606
00:29:56,190 --> 00:29:57,430
>> Hindi, hindi ito ang orihinal na bagay.

607
00:29:57,430 --> 00:29:58,620
Ito ay isang kopya lamang.

608
00:29:58,620 --> 00:30:00,450
At pagkatapos ay magiging tulad ng, oh,
mayroong JavaScript dito.

609
00:30:00,450 --> 00:30:02,450
Malinaw, ang dapat kong i-edit ang
pahina na maging tulad nito.

610
00:30:02,450 --> 00:30:04,250
At ako pag-edit ng iyong kopya.

611
00:30:04,250 --> 00:30:05,920
>> Ngunit na hindi effecting
ang aktwal na kopya.

612
00:30:05,920 --> 00:30:08,480
At kung ako ay upang hilingin sa kanya muli
refresh ang pahina, -

613
00:30:08,480 --> 00:30:10,060
hey, maaari akong magkaroon ng isa pang malinis na kopya -

614
00:30:10,060 --> 00:30:11,440
pupuntahan niya na bigyan ako
isa pang malinis na kopya.

615
00:30:11,440 --> 00:30:14,240
At pagkatapos, pupuntahan ko gawin ang parehong bagay
parang, oh, js ito dito na nagsasabing

616
00:30:14,240 --> 00:30:14,866
upang i-edit ito.

617
00:30:14,866 --> 00:30:17,460
At ako pagpunta sa panatilihin ang paggawa na.

618
00:30:17,460 --> 00:30:20,930
>> Mike RIZZO: Kaya isang talagang cool na bagay
na maaari mong gawin sa jQuery ay

619
00:30:20,930 --> 00:30:24,350
talaga magdagdag ng iba't ibang mga uri ng
ng mga animation sa iyong pahina.

620
00:30:24,350 --> 00:30:27,440
Hindi ko alam kung kailanman na iyong nakita kung saan
sinusubukan mong i-isang fill ang isang form

621
00:30:27,440 --> 00:30:31,250
online at hindi mo punan ang
tama ang mga bagay.

622
00:30:31,250 --> 00:30:33,440
Kaya isang maliit na bagay ang mga slides down na
sa tuktok at sabi mo

623
00:30:33,440 --> 00:30:34,820
hindi pa tapos na ito ng tama.

624
00:30:34,820 --> 00:30:36,260
Mangyaring subukan muli.

625
00:30:36,260 --> 00:30:37,890
At pagkatapos, maaaring ito kahit na pataas ang slide lamang.

626
00:30:37,890 --> 00:30:40,710
>> Ginagawang out jQuery ay itinayo sa mga function
na gawin ang lahat ng na

627
00:30:40,710 --> 00:30:44,180
animation talaga ito, talagang madali.

628
00:30:44,180 --> 00:30:46,750
Kaya doon ay unang mawala ng unti-unti ang
out function, kung saan

629
00:30:46,750 --> 00:30:47,710
Maaari kang tumawag sa isang bagay.

630
00:30:47,710 --> 00:30:55,650
At ito ay isang paraan upang baguhin ang CSS ng
elemento na sa isang animated na paraan.

631
00:30:55,650 --> 00:30:58,480
Kaya ito ay tumatagal ng kahit anong elemento
kang tumawag ito fade out sa.

632
00:30:58,480 --> 00:31:03,990
At pagkatapos, dahan-dahan ay nagbabago dito ni opacity
hanggang sa ito ay tumatakbo nang ganap transparent.

633
00:31:03,990 --> 00:31:07,330
>> Tomas REIMERS: Ang iba pang mga sikat isa
ay slide pababa, na kung saan ay gumawa

634
00:31:07,330 --> 00:31:08,800
isang bagay lilitaw sa pamamagitan ng pag-slide ito pababa.

635
00:31:08,800 --> 00:31:12,840
Kaya sa kaso ng sa drop down na menu,
muli, kapag nalaman namin kung paano i-detect

636
00:31:12,840 --> 00:31:15,310
kapag ito ay nai-hovered sa ibabaw,
maaari mo lamang sabihin ito ibaba

637
00:31:15,310 --> 00:31:16,910
bahagi slide down na ngayon.

638
00:31:16,910 --> 00:31:19,270
At pagkatapos, nais itong lumitaw
sa pamamagitan ng pag-slide pababa.

639
00:31:19,270 --> 00:31:22,042

640
00:31:22,042 --> 00:31:26,590
>> Mike RIZZO: At pagkatapos ay, kung mayroon kang lamang
ang ilang mga uri ng animation sa isip na

641
00:31:26,590 --> 00:31:29,080
jQuery ay hindi kinakailangang magbigay ng.

642
00:31:29,080 --> 00:31:32,690
Halimbawa, sabihin nating jQuery
ang ibinibigay sa iyo ng isang slide

643
00:31:32,690 --> 00:31:33,750
down at up na slide.

644
00:31:33,750 --> 00:31:36,740
Well, sabihin nating na gusto mo sa slide
isang bagay sa mula sa kaliwa o sa mula sa

645
00:31:36,740 --> 00:31:39,880
ang tamang uri ng tulad ng CS50
pangunahing pahina ginagawa tuwing

646
00:31:39,880 --> 00:31:42,080
kang pumunta sa isang bagong panel.

647
00:31:42,080 --> 00:31:45,030
Gusto mo pagkatapos ay marahil na kailangang
ipatupad ito sa iyong sarili gamit ang

648
00:31:45,030 --> 00:31:49,310
bigyang-buhay pag-andar sa loob ng jQuery.

649
00:31:49,310 --> 00:31:51,350
>> Kaya katulad, animate mo lamang.

650
00:31:51,350 --> 00:31:55,850
At pagkatapos, sa loob nito gumugugol ito ng
diksyunaryo ng iba't ibang mga halaga

651
00:31:55,850 --> 00:31:57,340
na kayo ay dapat na pumasa.

652
00:31:57,340 --> 00:32:06,960
Kaya dito, kung gusto naming bigyang-buhay ang
elemento foo tulad na lapad nito alinman sa

653
00:32:06,960 --> 00:32:10,880
expand o mga kontrata sa 80 pixel,
depende sa kung anong kasalukuyang ito ay.

654
00:32:10,880 --> 00:32:14,100
Gusto naming pumasa lamang na bilang
ang argumento sa loob nito.

655
00:32:14,100 --> 00:32:18,060
>> Pagalawin din ng ilang mga iba pang mga argumento
na maaari kang pumasa ito, halimbawa,

656
00:32:18,060 --> 00:32:21,150
ang bilis ng animation
na gusto mong bigyan ito.

657
00:32:21,150 --> 00:32:26,220
At upang gawin iyon, nais kong sabihin lamang
mabilis Google jQuery animate.

658
00:32:26,220 --> 00:32:31,710
At pagkatapos, nagdadala up pahinang ito, maaari mong
makita ito ay nakuha ng grupo ng mga iba't ibang

659
00:32:31,710 --> 00:32:33,560
mga katangian na maaari mo itong ipasa.

660
00:32:33,560 --> 00:32:35,990
>> At hinihikayat kitang - kailanman dumating ka
sa kabuuan ng isang bagay na hindi mo gusto

661
00:32:35,990 --> 00:32:40,390
alam o gusto lamang upang matuto nang higit pa tungkol sa isang
partikular na paraan na maaari mong tawagin

662
00:32:40,390 --> 00:32:41,270
sa isang bagay -

663
00:32:41,270 --> 00:32:44,440
Google lamang ito. jQuery ay lubhang
na rin dokumentado.

664
00:32:44,440 --> 00:32:49,140
At madalas na beses mayroong ng maraming
halimbawa na nila magbigay para sa iyo.

665
00:32:49,140 --> 00:32:52,470
Kung mag-scroll down na namin -

666
00:32:52,470 --> 00:32:53,720
paraan pababa -

667
00:32:53,720 --> 00:32:57,660

668
00:32:57,660 --> 00:32:59,190
na maaari naming gamitin, pati na rin.

669
00:32:59,190 --> 00:33:02,480
>> Muli, kapag ang isang developer aktwal na napupunta
sa pamamagitan ng pag ng pagsulat ng

670
00:33:02,480 --> 00:33:05,810
library, ang mga ito ay karaniwang gusto
isang tao na gamitin ito.

671
00:33:05,810 --> 00:33:09,400
Kaya katabi ay pagpunta sa
maging isang babasahin.

672
00:33:09,400 --> 00:33:12,270
At na dokumentasyon ay maaaring maging karaniwan
na matatagpuan sa pahina ng proyekto, na kung saan ay

673
00:33:12,270 --> 00:33:14,970
bakit Ibinigay namin sa iyo na orihinal na site sa
sa simula, na nagli-link sa iyo sa

674
00:33:14,970 --> 00:33:18,080
mga pahina ng proyekto sa gayon maaari mong
makita na ang papeles.

675
00:33:18,080 --> 00:33:22,670
>> Sa karaniwan, ang pahina ng proyekto sa kaso
ng [hindi marinig], sinabi ito sa iyo ang

676
00:33:22,670 --> 00:33:23,940
mga pangalan ng mga klase.

677
00:33:23,940 --> 00:33:27,250
Sa kaso ng JavaScript, nagbibigay ito sa
mo ang pangalan ng function.

678
00:33:27,250 --> 00:33:35,310
Sa pamamagitan ng ang paraan, kung mag-scroll kami ng hanggang sa tuktok,
isang mabilis side tala sa mga pag-andar ay

679
00:33:35,310 --> 00:33:39,080
tuwing makikita mo ang isang function na ipinatupad
tulad ng ito kasama ang matapang

680
00:33:39,080 --> 00:33:43,800
bracket sa gitna, paraan na
na ari-arian na ay opsyonal.

681
00:33:43,800 --> 00:33:44,750
Lamang sa isang ulo up.

682
00:33:44,750 --> 00:33:47,350
Nakita ko ang isang pulutong ng mga katanungan
tungkol iyon.

683
00:33:47,350 --> 00:33:50,370
>> Kaya dito maaari naming makita na ang
Pagalawin tumatagal ng mga ari-arian

684
00:33:50,370 --> 00:33:51,800
bilang isang kinakailangang argumento.

685
00:33:51,800 --> 00:33:54,870
At lahat ng iba pa ay opsyonal.

686
00:33:54,870 --> 00:33:56,136
Side tala -

687
00:33:56,136 --> 00:33:58,090
maaari mong isipin na ito, uri
ng, tulad ng tao mga pahina.

688
00:33:58,090 --> 00:34:04,275
Mga pahina Man ay dokumentasyon para sa C at
para sa maraming iba pang mga bagay, pati na rin.

689
00:34:04,275 --> 00:34:11,020
>> Mike RIZZO: Kaya't aming natutunan kung paano
baguhin ang iba't ibang mga CSS sa pahina,

690
00:34:11,020 --> 00:34:14,040
animate ito, at alisin magdagdag ng HTML.

691
00:34:14,040 --> 00:34:16,889
Ngunit ang isa sa mga talagang pinaka-makapangyarihang
bagay tungkol sa JavaScript

692
00:34:16,889 --> 00:34:18,270
at lalo na jQuery -

693
00:34:18,270 --> 00:34:22,570
ano ito ay nagbibigay-daan gawin mo ay tumugon sa mga
iba't ibang mga elemento na mangyari.

694
00:34:22,570 --> 00:34:25,380
Halimbawa, narito mayroon kami
isang humahawak ng kaganapan.

695
00:34:25,380 --> 00:34:28,210
At na lamang ay nangangahulugan na sa tuwing ito
kaganapan ang mangyayari, pangasiwaan namin ito sa isang

696
00:34:28,210 --> 00:34:29,280
ilang mga paraan.

697
00:34:29,280 --> 00:34:35,159
>> Kaya dito, ang mga generic na jQuery kaganapan
handler ay ang tuldok sa.

698
00:34:35,159 --> 00:34:42,949
At pagkatapos, ang unang bagay na iyong ibinigay
ay kung ano ang kaganapang dapat ito

699
00:34:42,949 --> 00:34:43,810
ay nakikinig para sa.

700
00:34:43,810 --> 00:34:45,610
Kaya dito, ito ay ang click na iyon
kami ay naghihintay para sa.

701
00:34:45,610 --> 00:34:49,250
>> Tomas REIMERS: Kung hindi man, mayroon kang
sa hover, na kung saan ay isang napaka-tanyag na ng isa.

702
00:34:49,250 --> 00:34:52,000
Kaya pabalik sa aking drop down na menu na ideya.

703
00:34:52,000 --> 00:34:54,239
Gusto mong magkaroon ng isa sa tuktok hover.

704
00:34:54,239 --> 00:34:56,096
At pagkatapos ay maaari mong baguhin iyon.

705
00:34:56,096 --> 00:34:56,830
>> Mike RIZZO: Mag-right.

706
00:34:56,830 --> 00:35:01,680
At pagkatapos ay, kapag nangyari iyon, ito lamang
executes ito function na namin ibinigay ito

707
00:35:01,680 --> 00:35:05,080
bilang isang argumento at na
ito ng mga alerto sa halo o hi.

708
00:35:05,080 --> 00:35:08,900
>> Tomas REIMERS: Kaya sa kaso ng
JavaScript, ito ay isang lugar na kailangan namin upang

709
00:35:08,900 --> 00:35:12,970
alisin ang ating mga sarili mula sa C. makakaya namin talaga
tumagal ng mga pag-andar bilang argumento.

710
00:35:12,970 --> 00:35:15,940
At doon ay marami ng mga talaga
kumplikadong mga paraan upang gawin ito.

711
00:35:15,940 --> 00:35:17,940
Kami ay pagpunta sa i-promote ang isang paraan,
na kung saan ay maaari mong tukuyin ang

712
00:35:17,940 --> 00:35:19,270
gumana doon.

713
00:35:19,270 --> 00:35:22,540
>> Kaya kapag tapos ka na humihiling para sa isang function bilang
isang parameter, ikaw ay isa lamang lamang

714
00:35:22,540 --> 00:35:24,500
pagpunta upang tukuyin ang pag-andar
sa lugar.

715
00:35:24,500 --> 00:35:27,090
At ang paraan ng tumutukoy ka ng isang function
sa JavaScript ay sa iyo

716
00:35:27,090 --> 00:35:28,820
Literal na sabihin function.

717
00:35:28,820 --> 00:35:30,130
Pagkatapos, kadalasan, ang pangalan
ng pag-andar.

718
00:35:30,130 --> 00:35:32,510
Ngunit hindi kailanman kami ay pagpunta upang isangguni
ang pagpapaganang ito muli.

719
00:35:32,510 --> 00:35:34,040
Kaya mag-iwan namin ito hindi mailarawan.

720
00:35:34,040 --> 00:35:40,440
>> Pagkatapos ng panaklong, pagkatapos ang kulot
tirante, at pagkatapos ay ang code sa loob na.

721
00:35:40,440 --> 00:35:42,540
Kaya naiintindihan namin ito lata
maging isang maliit na nakalilito.

722
00:35:42,540 --> 00:35:45,180
Kaya bigyan ka namin ng pangkalahatang paraan ng
kung ano ang hitsura ng isang humahawak ng kaganapan tulad ng

723
00:35:45,180 --> 00:35:47,790
sa ibaba, na kung saan ay sa mga kaganapan.

724
00:35:47,790 --> 00:35:50,598
At pagkatapos, ang iyong code sa loob na.

725
00:35:50,598 --> 00:35:52,478
>> Mike RIZZO: Mayroon bang anumang
mga tanong tungkol dito?

726
00:35:52,478 --> 00:35:54,818
Maaari itong maging isang maliit na nakalilito
ang unang pagkakataon na makita mo ito.

727
00:35:54,818 --> 00:35:57,550
>> Tomas REIMERS: mo talagang nais na
buksan up ng isang file at ipakita sa kanila ang ilan

728
00:35:57,550 --> 00:35:58,155
jQuery ngayon?

729
00:35:58,155 --> 00:35:59,853
>> Mike RIZZO: Oo, ni gawin na ipaalam.

730
00:35:59,853 --> 00:36:00,256
OK.

731
00:36:00,256 --> 00:36:02,490
>> Tomas REIMERS: Kaya ngayon kami ay
sa appliance.

732
00:36:02,490 --> 00:36:07,730
At kung ano ang iyong nagawa namin ay kinuha namin ang
kalayaan ng paglikha ng parehong isang index.html

733
00:36:07,730 --> 00:36:10,100
file, na nagli-link sa
isang JavaScript na file.

734
00:36:10,100 --> 00:36:12,880
At maaaring buksan up namin ang -

735
00:36:12,880 --> 00:36:15,170
oo.

736
00:36:15,170 --> 00:36:16,630
Well, ginagawa nito ang dalawang bagay.

737
00:36:16,630 --> 00:36:18,350
>> Ang una ay ito nagli-link sa
ang JavaScript na file.

738
00:36:18,350 --> 00:36:21,250
At muli naming makita na up dito.

739
00:36:21,250 --> 00:36:25,340
Nakita namin na sa head ng mga
HTML na dokumento, lalo na.

740
00:36:25,340 --> 00:36:28,260
Kaya makikita mo doon na
namin, talaga, sabihin nating SRC,

741
00:36:28,260 --> 00:36:29,590
na ang ibig sabihin ay ang pinagmulan.

742
00:36:29,590 --> 00:36:30,630
At iyon ang URL.

743
00:36:30,630 --> 00:36:32,700
>> Kaya dito maaari mong sabihin hindi namin
Kasama jQuery.

744
00:36:32,700 --> 00:36:34,290
At Kasama rin namin ang mga script.

745
00:36:34,290 --> 00:36:40,630
Ang iba pang mga paraan upang isama ang JavaScript ay
na maaari mong isama ang isang inline script

746
00:36:40,630 --> 00:36:44,600
tag bilang mayroon kami sa ilalim kung saan ito
sabi uri ng script ay teksto sa JavaScript.

747
00:36:44,600 --> 00:36:46,960
>> Kaya sinasabi na namin, makinig, hindi namin
tungkol sa upang isama ang isang script.

748
00:36:46,960 --> 00:36:51,890
At ang uri ng script na ay
JavaScript, na kung saan ay isang uri ng teksto.

749
00:36:51,890 --> 00:36:52,550
Napakasimpleng.

750
00:36:52,550 --> 00:36:56,490
>> Mike RIZZO: Kaya ito, uri ng, sino ang
iyong tanong tungkol sa kung paano namin isama

751
00:36:56,490 --> 00:37:02,340
JavaScript sa aming mga file dahil kapag kami
ay PHP, ang ginagawa namin ng isang bagay na katulad nito.

752
00:37:02,340 --> 00:37:07,570
At pagkatapos, mayroon ang aming mga function na PHP -
sabihin nating stock gawin

753
00:37:07,570 --> 00:37:09,150
isang bagay na may na -

754
00:37:09,150 --> 00:37:10,490
napupunta sa doon.

755
00:37:10,490 --> 00:37:13,860
Gayunpaman, ngayon ay mayroon kaming ang mga script tag
na namin ibinigay ito, na kung saan ay talagang

756
00:37:13,860 --> 00:37:19,470
bahagi ng sarili nito HTML dahil hindi ito
faking pagiging isang HTML file tulad nito

757
00:37:19,470 --> 00:37:25,070
ay nasa PHP dahil kung aktwal mong pumunta sa
at tumingin sa pinagmulan ng pahina,

758
00:37:25,070 --> 00:37:28,430
makikita mo ang mga script tag sa doon
sa JavaScript nauugnay sa

759
00:37:28,430 --> 00:37:29,800
ang mga ito sa na.

760
00:37:29,800 --> 00:37:31,760
>> Kaya pagkatapos, kung gusto naming
sumulat ng ilang JavaScript -

761
00:37:31,760 --> 00:37:37,110
sabihin nating lamang gusto naming baguhin ang katawan
dahil sa ngayon wala akong

762
00:37:37,110 --> 00:37:40,020
anumang iba pang mga tag na maaari ko talaga
i-edit bukod sa katawan.

763
00:37:40,020 --> 00:37:42,450
Sabihin nating lamang Nais kong
baguhin ang CSS ng iyon.

764
00:37:42,450 --> 00:37:46,190
Kaya gagamitin namin sige at pagbabago
ang kulay ng ito sa pula.

765
00:37:46,190 --> 00:37:47,380
>> Kaya i-save ko ang file.

766
00:37:47,380 --> 00:37:52,700
Sabihin bumalik sa aming web pahina, i-refresh,
at ito ito ay awtomatikong ginagawa

767
00:37:52,700 --> 00:37:55,920
dahil hindi ito mukhang katulad ito naghintay
sa lahat dahil tayo ay hindi nakikinig

768
00:37:55,920 --> 00:37:59,450
para sa isang kaganapan o anumang bagay tulad na.

769
00:37:59,450 --> 00:38:02,800
>> Tomas REIMERS: Kaya kung pumunta namin pabalik sa na
maghain sa partikular - ang HTML

770
00:38:02,800 --> 00:38:04,710
mag-file - kung ano ang iyong pagpunta
upang makita ay mayroon kaming -

771
00:38:04,710 --> 00:38:06,810
tandaan na ito ay load,
uri ng, chronologically.

772
00:38:06,810 --> 00:38:09,910
Kaya mayroon kami muna ang ulo.
naglo-load ito ng dalawang mga file na iyon.

773
00:38:09,910 --> 00:38:10,800
Pagkatapos ay pumunta kami sa katawan.

774
00:38:10,800 --> 00:38:11,640
At nakita namin kumusta mundo.

775
00:38:11,640 --> 00:38:13,030
Kaya render namin kumusta mundo.

776
00:38:13,030 --> 00:38:15,240
>> At pagkatapos ay ang huling bagay na mayroon kami
ay mayroon kaming script tag.

777
00:38:15,240 --> 00:38:20,880
Kaya ito ay nagpapatakbo ng script tag dahil ito ay
hindi na nagsasabi ito upang maghintay para sa kahit ano.

778
00:38:20,880 --> 00:38:24,700
At iyon ang pinaka-basic
paraan upang magpatakbo ng JavaScript.

779
00:38:24,700 --> 00:38:29,200
>> Sa sinabi na, maaari mong ilagay ang script
tag up sa header lamang

780
00:38:29,200 --> 00:38:31,240
upang ipakita sa puntong ito?

781
00:38:31,240 --> 00:38:34,450

782
00:38:34,450 --> 00:38:35,700
At tumakbo na.

783
00:38:35,700 --> 00:38:38,880

784
00:38:38,880 --> 00:38:41,070
Kami ay pagpunta sa mapansin na ito
ay hindi palitan ang kulay.

785
00:38:41,070 --> 00:38:44,210
At ito ay isa sa mga problema ng
JavaScript ay na bagay ang na-load

786
00:38:44,210 --> 00:38:45,930
sa isang magkakasunod-sunod.

787
00:38:45,930 --> 00:38:49,750
>> Kaya sa oras na iyon na code
tumatakbo ay, piling namin -

788
00:38:49,750 --> 00:38:52,530
bumalik -

789
00:38:52,530 --> 00:38:53,670
ang katawan ng tag.

790
00:38:53,670 --> 00:38:57,560
Ang katawan ng tag na ay hindi pa umiiral dahil
JavaScript ay nasa linya na may HTML.

791
00:38:57,560 --> 00:39:01,790
Kaya ang browser ay tulad piliin ang katawan.

792
00:39:01,790 --> 00:39:02,760
Walang pa tulad bagay.

793
00:39:02,760 --> 00:39:03,600
Kaya maaari naming huwag pansinin iyon.

794
00:39:03,600 --> 00:39:05,330
At panatilihin namin ang pagpunta.

795
00:39:05,330 --> 00:39:07,200
>> At pagkatapos ay tukuyin kami ng isang katawan ng tag.

796
00:39:07,200 --> 00:39:09,670
Ngunit na hindi kailanman ay makakakuha ng update.

797
00:39:09,670 --> 00:39:12,560
Kaya kapag naka-pagpapatupad ng script
mga tag, tiyakin na inilagay mo sa

798
00:39:12,560 --> 00:39:15,502
pagkatapos ng tag katawan.

799
00:39:15,502 --> 00:39:16,820
Susunod na slide.

800
00:39:16,820 --> 00:39:17,830
>> Mike RIZZO: OK.

801
00:39:17,830 --> 00:39:19,330
Kaya nagbago kami ng isang bagay.

802
00:39:19,330 --> 00:39:21,910
Ngunit hindi ito mukhang ito ay tumugon sa
sa amin sa lahat dahil ito lamang uri ng

803
00:39:21,910 --> 00:39:24,150
ginawa ito sa lalong madaling-load ito sa pahina.

804
00:39:24,150 --> 00:39:27,700
Kaya ngayon, sa halip na ginagawa ito, bakit
huwag magdagdag kami ng isang handler ng kaganapan.

805
00:39:27,700 --> 00:39:31,020
>> Kaya hayaan gawin ng isang bagay
sa katawan muli.

806
00:39:31,020 --> 00:39:33,490
At sabihin nating gawin namin ito sa -

807
00:39:33,490 --> 00:39:34,500
i-click.

808
00:39:34,500 --> 00:39:35,750
Susubukan naming magdagdag ng isang function.

809
00:39:35,750 --> 00:39:38,270

810
00:39:38,270 --> 00:39:39,690
>> Pagbabago Sabihin: Tomas REIMERS
ito ay muli ng kulay sa pula.

811
00:39:39,690 --> 00:39:40,000
Bakit hindi?

812
00:39:40,000 --> 00:39:41,680
>> Mike RIZZO: Oo, sabihin pagbabago
nito 'kulay muli sa pula.

813
00:39:41,680 --> 00:39:46,310

814
00:39:46,310 --> 00:39:46,900
Ayos lang.

815
00:39:46,900 --> 00:39:48,480
Kaya i-reload ang pahina ipaalam.

816
00:39:48,480 --> 00:39:49,530
OK, nakikita natin -

817
00:39:49,530 --> 00:39:52,290
tulad ng inaasahan, ito ay hindi pa maging pula.

818
00:39:52,290 --> 00:39:53,610
Ngunit pagkatapos ay maaari naming magpatuloy at i-click ito.

819
00:39:53,610 --> 00:39:54,270
>> Tomas REIMERS: At ito ay maging pula.

820
00:39:54,270 --> 00:39:56,090
>> Mike RIZZO: At ginagawa nito
maging pula tulad ng inaasahan.

821
00:39:56,090 --> 00:39:59,010
>> Tomas REIMERS: At makikita namin kung paano
maaari naming simulan upang makabuo ng napaka basic

822
00:39:59,010 --> 00:40:00,170
pakikipag-ugnayan.

823
00:40:00,170 --> 00:40:03,850
Iba pang mga bagay na maaari gusto naming gawin ay,
kung hindi namin nais na gumawa ng katawan

824
00:40:03,850 --> 00:40:07,230
kulayan pula, ay gumawa ng HTML ipaalam
kulay pulang background.

825
00:40:07,230 --> 00:40:08,480
Kaya lang nito ay kapareho ng CSS.

826
00:40:08,480 --> 00:40:19,960

827
00:40:19,960 --> 00:40:23,320
>> At kapag baguhin namin ito, maaari naming makita na ito
napaka dramatic na epekto ng pagbabago ng

828
00:40:23,320 --> 00:40:25,510
buong pahina.

829
00:40:25,510 --> 00:40:29,100
Kaya muli, kung ikaw ay pagpapatupad ng mga bagay,
maaari kang magkaroon ng isa sa mga bahagi

830
00:40:29,100 --> 00:40:30,150
na kung saan ay sinadya upang mai-click.

831
00:40:30,150 --> 00:40:32,710
Hayaan ang mga sinasabi ng isang pindutan Lumabas at
isang buong iba pang mga sangkap,

832
00:40:32,710 --> 00:40:33,830
na kung saan ay nilalayong tumugon.

833
00:40:33,830 --> 00:40:35,755
Kaya nais mong alisin ang isang window
kapag nangyari iyon.

834
00:40:35,755 --> 00:40:39,341

835
00:40:39,341 --> 00:40:40,700
>> Mike RIZZO: OK.

836
00:40:40,700 --> 00:40:42,200
Tulad ng isang halimbawa -

837
00:40:42,200 --> 00:40:44,400
hindi mo makakuha upang makita ito nang mas maaga -

838
00:40:44,400 --> 00:40:47,500
Kukunin ko na lang ipakita sa iyo kung ano ang hitsura nito
i kapag itago kami ng isang bagay.

839
00:40:47,500 --> 00:40:52,220
Kaya makikita ba akong magpatuloy at huwag pataas ang slide.

840
00:40:52,220 --> 00:40:54,440
>> Tomas REIMERS: Gustong balutin na sa isang
uri ng talata bago namin gawin iyon?

841
00:40:54,440 --> 00:40:55,132
>> Mike RIZZO: OK.

842
00:40:55,132 --> 00:40:59,135
Oo, bakit hindi namin gawin iyon kaya lang
maaari naming piliin ito ng kaunti pa.

843
00:40:59,135 --> 00:41:00,490
>> Tomas REIMERS: At sabihin
bigyan ito ng isang klase.

844
00:41:00,490 --> 00:41:01,740
>> Mike RIZZO: Oo.

845
00:41:01,740 --> 00:41:06,575

846
00:41:06,575 --> 00:41:09,920
OK, ni makita kaya hayaan.

847
00:41:09,920 --> 00:41:14,820
Sa halip ng pagpili ng aktwal na katawan
ngayon, lamang ang makakakita pipiliin ko ang lahat ng bagay na may

848
00:41:14,820 --> 00:41:18,780
klase kumusta, na kung saan dito namin
mayroon lamang isang bagay.

849
00:41:18,780 --> 00:41:20,900
Kaya hindi namin dapat magkaroon upang
mag-alala tungkol sa na.

850
00:41:20,900 --> 00:41:23,080
>> Kaya ire-refresh ko ito.

851
00:41:23,080 --> 00:41:24,230
Makikita ba akong magpatuloy at i-click ito.

852
00:41:24,230 --> 00:41:27,890
At ito, uri ng, ginawang isang kakatwang mga slide
up bagay, na hindi tumingin na

853
00:41:27,890 --> 00:41:29,580
kaakit-akit.

854
00:41:29,580 --> 00:41:31,060
Sa pangkalahatan, ang mga ito ang hitsura ng medyo maganda.

855
00:41:31,060 --> 00:41:32,720
Ako hulaan, ito - para sa ilang mga
dahilan - ang hindi.

856
00:41:32,720 --> 00:41:36,640
Kukunin ko na lang gawin ang isang fade out kaya
maaari kang tumingin sa na masyadong.

857
00:41:36,640 --> 00:41:38,100
Karamihan nicer.

858
00:41:38,100 --> 00:41:41,150
>> At pagkatapos ay, kung buksan ko up ang JavaScript
Console muli at gusto naming makita kung ano ang

859
00:41:41,150 --> 00:41:43,900
ito mukhang kapag fade namin ito in

860
00:41:43,900 --> 00:41:46,920
Ngayon, tawagan ko lang ang fade in sa ito.

861
00:41:46,920 --> 00:41:48,830
At ito fades bumalik in

862
00:41:48,830 --> 00:41:56,150
>> Katulad nito, talaga namin ma-ring magpasa
isang argumento sa fade in o fade out,

863
00:41:56,150 --> 00:41:57,640
na kung saan ay, uri ng, ang bilis ng ito.

864
00:41:57,640 --> 00:42:02,220
Kaya sabihin sige at sabihin ang gusto namin
ito upang pumunta mabagal fade in

865
00:42:02,220 --> 00:42:04,250
Kaya hulaan ko ito tila pa rin
medyo mabilis.

866
00:42:04,250 --> 00:42:06,180
Ngunit ito ay mas mabagal kaysa sa dati.

867
00:42:06,180 --> 00:42:10,340
>> Tomas REIMERS: At kung gusto mong mahanap ang
ang higit pa tungkol sa mga bagay na ito, muli,

868
00:42:10,340 --> 00:42:13,410
pumunta lamang sa dokumentasyon jQuery,
kung saan binigyan mo kami, at basahin

869
00:42:13,410 --> 00:42:13,735
sa pamamagitan ng mga ito.

870
00:42:13,735 --> 00:42:15,790
Idokumento nila ang kanilang mga pag-andar
hindi mapaniniwalaan o kapani-paniwala na rin.

871
00:42:15,790 --> 00:42:18,622

872
00:42:18,622 --> 00:42:19,570
>> Mike RIZZO: OK.

873
00:42:19,570 --> 00:42:21,560
Kaya hulaan ko sabihin bumalik sa ito.

874
00:42:21,560 --> 00:42:23,490
At maaari kaming makipag-usap tungkol sa aming mga huling pahina.

875
00:42:23,490 --> 00:42:24,690
Well, maaari naming tapusin na may Bootstrap.

876
00:42:24,690 --> 00:42:27,140
At pagkatapos ay gagamitin namin buksan up ito
para sa ilang mga katanungan.

877
00:42:27,140 --> 00:42:30,180
At kung ikaw guys ay may anumang mga ideya na
gusto mo bang subukan upang ihagis up at makita

878
00:42:30,180 --> 00:42:34,150
kung maaari naming ipatupad ang mga ito gamit ang
JavaScript mabilis.

879
00:42:34,150 --> 00:42:37,890
>> Kaya talagang mabilis tungkol sa Bootstrap, na
Awtomatikong kasama sa

880
00:42:37,890 --> 00:42:41,700
ang iyong huling problema itakda sa CSS folder
at talagang naka-link sa sa iyong

881
00:42:41,700 --> 00:42:43,190
header.PHP.

882
00:42:43,190 --> 00:42:46,740
Kaya mo maaaring idinagdag klase na
ay tinukoy sa loob Bootstrap dito.

883
00:42:46,740 --> 00:42:50,490
At sana ay awtomatikong naka-istilong
naaayon ang mga bagay.

884
00:42:50,490 --> 00:42:54,550
>> Tomas REIMERS: Kaya Bootstrap ay isang napaka-
mahiwagang bagay na binuo ng mga tao

885
00:42:54,550 --> 00:42:55,340
sa Twitter.

886
00:42:55,340 --> 00:42:57,230
At kung ano ito ay sinadya upang gawin ay -

887
00:42:57,230 --> 00:43:00,740
bago website ay talagang mahirap upang gawing
Inaasahan maganda, lalo na kapag namin ay may

888
00:43:00,740 --> 00:43:02,200
ng maraming karaniwang mga bahagi.

889
00:43:02,200 --> 00:43:04,770
Kaya ng maraming mga pindutan sa
web ay tumingin sa parehong.

890
00:43:04,770 --> 00:43:08,960
>> Ang isang pulutong ng mga patlang ng teksto ay maaaring gawin sa
magmukhang mas mahusay kaysa sa karaniwang teksto

891
00:43:08,960 --> 00:43:13,620
field mo marahil malaman mula talaga
lumang mga website o talagang hindi maganda ang ginawa

892
00:43:13,620 --> 00:43:18,210
mga website, na tumingin lamang tulad ng literal
teksto ng mga kahon nang walang anumang anyo ng teksto

893
00:43:18,210 --> 00:43:21,190
anino o anumang uri ng magaling na balangkas.

894
00:43:21,190 --> 00:43:24,540
Kaya kung ano Bootstrap ginawa noon ay sinabi ito, mahusay,
mayroon kaming ng maraming karaniwang mga estilo.

895
00:43:24,540 --> 00:43:28,210
Bakit hindi gumawa kami ng isa sa karaniwang mga hanay ng mga CSS
at isang karaniwang hanay ng mga JavaScript bilang

896
00:43:28,210 --> 00:43:32,210
na rin, na maaaring estilo ito bilang ay at kung aling mga
Maaari bigyan ang mga tao ng mga bagay tulad ng drop

897
00:43:32,210 --> 00:43:34,610
down na menu, na maaaring bigyan ang mga tao
mga bagay tulad ng modals.

898
00:43:34,610 --> 00:43:38,580
>> Modal ay kung ano ang nagpa-pop sa ibabaw ng pahina
sa tuwing mahigpit na ito ay nagsasalita

899
00:43:38,580 --> 00:43:41,090
isang bagay, na inhibits pa
pakikipag-ugnayan hanggang sa iyo

900
00:43:41,090 --> 00:43:43,110
makipag-ugnayan sa ito.

901
00:43:43,110 --> 00:43:45,820
Isang bagay na tulad nito ay, sigurado ka ba
gusto mong tanggalin ang bagay na ito?

902
00:43:45,820 --> 00:43:49,100
Hindi mo maaaring talagang gumawa ng kahit ano pa man
hanggang sa ikaw ay sabihin ninyo ang oo o hindi.

903
00:43:49,100 --> 00:43:52,720
>> Kinuha nito ang lahat ng ito at ito package na ito
sama-sama at sinabi, dito pumunta namin.

904
00:43:52,720 --> 00:43:54,630
Maaari na ngayong gamitin ang mga tao.

905
00:43:54,630 --> 00:43:56,830
At maaari mo itong mahanap sa ibabaw
sa getbootstrap.com.

906
00:43:56,830 --> 00:44:00,480
Ito ay awtomatikong maisasama sa loob
itakda ang iyong huling problema.

907
00:44:00,480 --> 00:44:04,160
At ikaw ay higit sa maligayang pagdating sa
gamitin ito sa iyong huling proyekto.

908
00:44:04,160 --> 00:44:06,950
At kung gusto mong sundin na
link upang makakuha ng Bootstrap.

909
00:44:06,950 --> 00:44:10,590

910
00:44:10,590 --> 00:44:15,700
>> Makikita mo dito ay ang
Bootstrap CSS site.

911
00:44:15,700 --> 00:44:16,860
Makikita mo ang Bootstrap.

912
00:44:16,860 --> 00:44:20,450
At kung mag-scroll ka pababa, makikita mo ang
kung paano i-download ito, kung paano

913
00:44:20,450 --> 00:44:21,900
i-install ito, at iba pa.

914
00:44:21,900 --> 00:44:24,700
>> Mike RIZZO: At maaari mo ring,
nang kawili-wili sapat, i-customize ito sa

915
00:44:24,700 --> 00:44:27,770
maging kahit anong uri ng mga tema
na gusto mo.

916
00:44:27,770 --> 00:44:31,270
Alam ko na ang isang bagay na ginawa ko para sa aking
huling proyekto noong kinuha ko ang klase

917
00:44:31,270 --> 00:44:32,050
ay ipasadya ito.

918
00:44:32,050 --> 00:44:34,540
Ang isang iba't ibang mga bersyon ng Bootstrap na
nagkaroon ng ibang color scheme at

919
00:44:34,540 --> 00:44:36,700
ibang mga hugis ng ilang mga
iba't ibang bagay.

920
00:44:36,700 --> 00:44:38,250
Kaya Hinihikayat ko kayo upang i-play na may na.

921
00:44:38,250 --> 00:44:39,440
Ito ay uri ng masaya na gawin.

922
00:44:39,440 --> 00:44:43,230
>> Tomas REIMERS: Naghahanap sa tuktok
muli, ito ay halos kapareho sa Font

923
00:44:43,230 --> 00:44:44,970
Kahanga-hanga site.

924
00:44:44,970 --> 00:44:47,810
Ang isang pulutong ng mga papeles ay magsisimula
sa mukhang katulad kapag ikaw ay

925
00:44:47,810 --> 00:44:48,940
nakita sapat ng ito.

926
00:44:48,940 --> 00:44:51,260
Kaya dito mayroon kaming ang CSS
bahagi ng ito.

927
00:44:51,260 --> 00:44:53,540
At makikita mo kung paano ito
Maaari style bagay.

928
00:44:53,540 --> 00:44:56,780
Kaya kung nag-click ka sa mga talahanayan, halimbawa,
maaari mong agad na magsagawa ng

929
00:44:56,780 --> 00:45:01,710
medyo talahanayan sa pamamagitan ng simpleng pagdagdag
ang klase talahanayan upang ito.

930
00:45:01,710 --> 00:45:03,150
>> Parehong bagay para sa mga pindutan.

931
00:45:03,150 --> 00:45:12,140
Kung nagdagdag ka lang ang klase BTN at BTN
default o BTN pangunahing, maaari mong

932
00:45:12,140 --> 00:45:16,240
kumuha ng anuman sa isa sa mga button na ito
may mga pre-made na mga estilo.

933
00:45:16,240 --> 00:45:18,570
At pagkatapos ay, kung ikaw ay naghahanap para sa
isang bagay na mas kumplikado kaysa lamang

934
00:45:18,570 --> 00:45:24,100
restyling ano w mayroon ka, sa paglipas ng sa
ang tab na JavaScript sa buong tuktok namin

935
00:45:24,100 --> 00:45:25,120
magkaroon ng isang bungkos ng mga bahagi.

936
00:45:25,120 --> 00:45:30,410
>> Kaya dito mayroon kaming mga transition, modals,
dropdowns, mga tab, at tooltip.

937
00:45:30,410 --> 00:45:35,530
Isang tooltip ay kung ano ang nagpa-pop up sa ilalim ng iyong
mouse kapag hover ka sa isang bagay.

938
00:45:35,530 --> 00:45:40,280
Popovers, mga alerto, mga pindutan, collapsible
accordions ay kung ano ang

939
00:45:40,280 --> 00:45:41,190
Karaniwang ang mga ito ay tinatawag na.

940
00:45:41,190 --> 00:45:43,045
Carousels, na pumitik
sa pamamagitan ng tulad ng mga imahe.

941
00:45:43,045 --> 00:45:52,190

942
00:45:52,190 --> 00:45:54,840
>> Kaya mga ang mga bahagi
ng Bootstrap.

943
00:45:54,840 --> 00:45:57,620
Gusto ko hinihikayat ka upang
lubos na pumunta tumingin sa kanila.

944
00:45:57,620 --> 00:46:01,780
Mayroong isang bahagi ng JavaScript
at isang bahagi ng CSS.

945
00:46:01,780 --> 00:46:03,880
Huwag mag-atubiling gamitin ang mga ito bilang habilin mo.

946
00:46:03,880 --> 00:46:06,730
Hindi namin pagpunta sa pumunta ng masyadong maraming sa mga ito
dahil sa tingin namin ang dokumentasyon

947
00:46:06,730 --> 00:46:09,360
talaga magaling.

948
00:46:09,360 --> 00:46:10,540
At oo.

949
00:46:10,540 --> 00:46:14,500
Mayroon ba kayong anumang mga katanungan tungkol sa na?

950
00:46:14,500 --> 00:46:19,430
>> Mike RIZZO: Kaya bilang ay talagang mabilis
gilid, ang disenyo ng web page na ito na

951
00:46:19,430 --> 00:46:21,830
mabilis naming ilagay-sama para sa
ang pagtatanghal na ito ay

952
00:46:21,830 --> 00:46:24,290
talaga tapos mo ng gamitin Bootstrap.

953
00:46:24,290 --> 00:46:27,810
Tulad ng iyong nakikita, kapag nag-click kami sa mga
iba't ibang mga tab, kami ay hindi kailanman talaga

954
00:46:27,810 --> 00:46:30,750
Aalis ito kasalukuyang pahina index.html.

955
00:46:30,750 --> 00:46:36,400
Kaya kung ano ang mayroon kami ay naiiba divs
sa loob ito index.html.

956
00:46:36,400 --> 00:46:39,610
At pagkatapos, sa tuwing i-click kami ng ibang
tab, lamang ito ay ang pagbabago

957
00:46:39,610 --> 00:46:41,590
na nagpapakita ng isang tao.

958
00:46:41,590 --> 00:46:47,390
>> Kaya nang naaayon ito posisyon ang mga ito,
nagbabago ang HTML ng pahina upang ang

959
00:46:47,390 --> 00:46:52,330
ng kasalukuyang tab ay minarkahan bilang aktibong kaya
ito lumilitaw naiiba at hitsura

960
00:46:52,330 --> 00:46:52,820
talagang maganda.

961
00:46:52,820 --> 00:46:57,260
>> Tomas REIMERS: Kaya na ang lahat ng tapos
nang walang amin pagsusulat ng halos anumang CSS.

962
00:46:57,260 --> 00:47:01,440
Kami rin ng isang header sa tuktok,
kung saan ang mga kulay ay sa pamamagitan ng sa amin.

963
00:47:01,440 --> 00:47:04,800
Ngunit ang aktwal na paglalagay ito sa
tuktok ng pahina at sa paggawa ng

964
00:47:04,800 --> 00:47:06,660
ito scroll ay Bootstrap.

965
00:47:06,660 --> 00:47:09,720
At pagkatapos ay kahit na para sa isa pang library - ito
ay hindi isa usapan natin ang tungkol ngunit isa

966
00:47:09,720 --> 00:47:11,580
maaari mong google kung gusto mo.

967
00:47:11,580 --> 00:47:15,130
Ito ay tinatawag na prettify.js.

968
00:47:15,130 --> 00:47:20,650
At ito ay syntax-highlight ang iyong code
para sa iyo gamit ang parehong CSS at JavaScript.

969
00:47:20,650 --> 00:47:23,480

970
00:47:23,480 --> 00:47:27,070
>> Ang huling bagay na nais namin na makipag-usap tungkol sa
bago namin ilabas out mo papunta sa

971
00:47:27,070 --> 00:47:30,620
mundo upang tumingin sa mga aklatan upang malaman kung
paano gamitin ang mga ito at sa, sana,

972
00:47:30,620 --> 00:47:34,640
basahin ang dokumentasyon at makita kung ano ang
pangangailangan ay kung paano hanapin ang mga library.

973
00:47:34,640 --> 00:47:37,000
Kaya ang una ay hindi namin lamang
pagpunta sa itulak Google.

974
00:47:37,000 --> 00:47:37,810
Pumunta sa Google.

975
00:47:37,810 --> 00:47:41,150
>> Iyon ay literal ano ang ginagawa namin kapag kami
kailangan na gawin ang isang bagay ay namin ang Google.

976
00:47:41,150 --> 00:47:44,730
Mayroon bang isang JavaScript library na
ay nagbibigay-daan sa akin upang manipulahin ang oras sa isang

977
00:47:44,730 --> 00:47:45,400
kapaki-pakinabang na paraan?

978
00:47:45,400 --> 00:47:49,510
Kaya kung alam ko na ang ilang mga gumagamit paglikha
ng isang account dito, at ito ay ang

979
00:47:49,510 --> 00:47:53,010
kasalukuyang oras, paano ko makalkula ang
pagkakaiba sa na nang hindi na kinakailangang

980
00:47:53,010 --> 00:47:55,020
kalkulahin ito sa aking sarili?

981
00:47:55,020 --> 00:47:59,630
Kaya talaga ito ay isang pangkaraniwang bagay,
JavaScript oras library.

982
00:47:59,630 --> 00:48:02,440
At dito namin Moment.js--
ang isa pinakasikat.

983
00:48:02,440 --> 00:48:06,530
>> Kung kailangan namin ng isang library upang manipulahin
ang isang bagay tulad ng kulay upang ma-

984
00:48:06,530 --> 00:48:08,650
bumuo ng grupo ng mga random na mga kulay -

985
00:48:08,650 --> 00:48:10,660
marahil, upang bumuo ng isang
estilo o isang bagay -

986
00:48:10,660 --> 00:48:13,480
maaaring namin ang Google ng isang bagay tulad ng
Kulay ng JavaScript library.

987
00:48:13,480 --> 00:48:15,620
At ako bang gusto namin na magpa-pop up sa
isang libo at isa sa mga ito.

988
00:48:15,620 --> 00:48:18,290

989
00:48:18,290 --> 00:48:21,410
Maaari kang basahin sa pamamagitan ng mga ito.

990
00:48:21,410 --> 00:48:24,610
>> Kaya karamihan ng mga bagay - kapag nakita mo ang mga ito -
pupunta-host sa isa sa mga

991
00:48:24,610 --> 00:48:25,920
kung aling mga site host code.

992
00:48:25,920 --> 00:48:26,960
Sila ay handa ang ilang mga popular na mga bago.

993
00:48:26,960 --> 00:48:30,870
Ang pinaka-tanyag, sa pamamagitan ng
malayo, ay github.com.

994
00:48:30,870 --> 00:48:35,300
At kung pumunta ka sa GitHub ito ay talagang
kung saan ay naka-host normalize.

995
00:48:35,300 --> 00:48:36,950
Kaya kung nais mong bumalik sa isa na.

996
00:48:36,950 --> 00:48:38,135
Ipakita sa kanila na.

997
00:48:38,135 --> 00:48:40,516
>> Mike RIZZO: At iyan ay talagang kung saan
ito ay naka-host din, kung napansin mo.

998
00:48:40,516 --> 00:48:41,000
>> Tomas REIMERS: Oo.

999
00:48:41,000 --> 00:48:49,078
Kaya kung kang pumunta sa paglipas ng sa normalize
at pumunta sa GitHub.

1000
00:48:49,078 --> 00:48:51,936
Nagawa ay na?

1001
00:48:51,936 --> 00:48:54,620
>> Mike RIZZO: kaunti Iyon pusa bagay
ay ang simbolo GitHub.

1002
00:48:54,620 --> 00:48:56,330
>> Tomas REIMERS: Oh.

1003
00:48:56,330 --> 00:49:02,180
Kaya GitHub ay gumagamit ng isang pamamaraan na tinatawag na
Git sa code ng tindahan.

1004
00:49:02,180 --> 00:49:05,150
Ay hindi mo alam kung ano na o
ito frightens mo, na fine.

1005
00:49:05,150 --> 00:49:16,100
Hindi mo na kailangang malaman kung ano ang Git ay
dahil may isang pindutang I-download GitHub

1006
00:49:16,100 --> 00:49:17,200
sa kanang ibaba.

1007
00:49:17,200 --> 00:49:21,350
>> Ang iba pang mga kapaki-pakinabang na bagay upang malaman
tungkol sa GitHub ay karamihan ng mga produkto

1008
00:49:21,350 --> 00:49:23,200
ay magkakaroon ng read akin.

1009
00:49:23,200 --> 00:49:25,400
At kung hindi sila magkaroon ng isang website, ang
basahin ay akin makipag-usap tungkol sa kung paano mo

1010
00:49:25,400 --> 00:49:28,310
i-install ito, kung paano mo gamitin ito, ano ito
ginagawa, at iba pa, at iba pa, at iba pa.

1011
00:49:28,310 --> 00:49:31,033
Ano naging kami talaga
naglalakad ka sa pamamagitan ng.

1012
00:49:31,033 --> 00:49:32,326
>> Mike RIZZO: sa pagtigil sa Internet.

1013
00:49:32,326 --> 00:49:34,020
>> Tomas REIMERS: Iyon ay pinong.

1014
00:49:34,020 --> 00:49:36,980
Ang huling dalawang mga bagay na gusto naming
makipag-usap tungkol sa -

1015
00:49:36,980 --> 00:49:38,750
na-usapan natin ang tungkol sa Git -

1016
00:49:38,750 --> 00:49:40,290
ay sa pag-troubleshoot.

1017
00:49:40,290 --> 00:49:43,020
At ang isang ito ay hindi bilang may-katuturan para sa
ang panghuling produkto bilang ito ay

1018
00:49:43,020 --> 00:49:44,870
kapag nag-iwan ka 50.

1019
00:49:44,870 --> 00:49:48,310
At kapag nagpatakbo ka sa mga produkto
pagpapatupad ng mga aklatan o pagpapatupad

1020
00:49:48,310 --> 00:49:50,230
ng iyong sariling mga proyekto, ka ng pagpunta
upang magkaroon ng mga katanungan o ikaw ay

1021
00:49:50,230 --> 00:49:51,660
pagpunta upang tumingin para sa mga tanong.

1022
00:49:51,660 --> 00:49:53,060
>> Muli, ang Google ito.

1023
00:49:53,060 --> 00:49:54,630
Iyon ay literal ano ang ginagawa namin.

1024
00:49:54,630 --> 00:49:56,400
Ito ay pagpunta sa tunog ulok.

1025
00:49:56,400 --> 00:49:58,310
Ngunit nang literal, ang Google namin ito.

1026
00:49:58,310 --> 00:50:01,810
At muli, isa sa mga unang bagay
makikita mo karaniwang tumakbo sa ay

1027
00:50:01,810 --> 00:50:06,550
stackoverflow.com, na kung saan ay isang kahanga-hangang
tanong at sagot paningin.

1028
00:50:06,550 --> 00:50:10,530
>> Ito ay kahanga-hanga ang parehong dahil maaari kang
i-post ang mga katanungan at maghanap para sa

1029
00:50:10,530 --> 00:50:12,760
sagot ngunit din dahil
ito ay mayroon ng maraming

1030
00:50:12,760 --> 00:50:14,590
pre-populated na nilalaman doon.

1031
00:50:14,590 --> 00:50:18,510
Kaya karaniwan kapag ka ng Google ng programming
tanong sa loob ng unang

1032
00:50:18,510 --> 00:50:22,620
ilang mga hit ay maaaring nakalikha ka na tumakbo
sa ito sa panahon ng iyong mga hanay ng problema.

1033
00:50:22,620 --> 00:50:27,840
>> At pagkatapos, ang huling talagang panandaliang bagay
ay JSFIDDLE, na kung saan ay may - na ngayon hindi namin

1034
00:50:27,840 --> 00:50:32,110
nai-paggawa ng maraming trabaho sa
JavaScript HTML CSS.

1035
00:50:32,110 --> 00:50:39,820
JSFIDDLE ay isang web app, na kung saan talaga
nagpapahintulot sa iyo na dalhin ang iyong HTML, IYONG

1036
00:50:39,820 --> 00:50:42,820
JavaScript ilalim kaliwa, at
iyong CSS kanang tuktok.

1037
00:50:42,820 --> 00:50:47,840
At pagkatapos ay maaari itong lumikha ng isang mabilis na render
ng ito at makita kung paano ito nakikipag-ugnayan.

1038
00:50:47,840 --> 00:50:50,500
Ito ay napaka-kapaki-pakinabang kapag ang mga tao ay sinusubukang
na gawin ang isang patunay ng konsepto tulad ng

1039
00:50:50,500 --> 00:50:52,910
ito ay kung paano gagawin mo
gawin ang isang drop down menu.

1040
00:50:52,910 --> 00:50:54,980
Siguro isang mabilis na alisan ng takip o kahit ano.

1041
00:50:54,980 --> 00:50:56,560
>> Mike RIZZO: Kaya't sabihin pumunta
Magpatuloy at i-click ito.

1042
00:50:56,560 --> 00:50:57,820
Isang maikling paalala -

1043
00:50:57,820 --> 00:51:00,430
samantala, bago namin
paggawa sa pag-click.

1044
00:51:00,430 --> 00:51:04,380
Ginagawang out JCorey Korea ay mayroon ding isang built
sa handler ng kaganapan ng pag-click na ito

1045
00:51:04,380 --> 00:51:07,020
Ginagamit ng dahil lang sa figure na ito ikaw ay
pagpunta sa nais na gawin ng maraming mga bagay

1046
00:51:07,020 --> 00:51:08,410
kapag gusto mong i-click ang isang bagay.

1047
00:51:08,410 --> 00:51:09,690
>> Katulad nito, mayroon din itong isang hover.

1048
00:51:09,690 --> 00:51:12,850
Subalit upang makuha ang buong saklaw ng
mga, tingnan sa jQuery

1049
00:51:12,850 --> 00:51:15,320
dokumentasyon at gawin ito.

1050
00:51:15,320 --> 00:51:18,760
Ginawa ko ng isang bagay bobo dito.

1051
00:51:18,760 --> 00:51:21,490
>> Tomas REIMERS: Kaya Mayroon akong isang talagang mabilis
programa dito mismo, na nagsasabing

1052
00:51:21,490 --> 00:51:22,640
na pindutan sa pag-click.

1053
00:51:22,640 --> 00:51:23,890
Pagkatapos kami ay may isang para sa loop.

1054
00:51:23,890 --> 00:51:26,810
Para i Mababa sa 404.

1055
00:51:26,810 --> 00:51:29,530
Lamang Ito ay pagpunta sa pop up
mga mensaheng alerto.

1056
00:51:29,530 --> 00:51:33,425
>> Mike RIZZO: At kung ano ay ang
code 404 nakatayo para sa HTML?

1057
00:51:33,425 --> 00:51:34,145
Matandaan ba?

1058
00:51:34,145 --> 00:51:35,450
Hindi natagpuan, i-right.

1059
00:51:35,450 --> 00:51:38,640

1060
00:51:38,640 --> 00:51:40,885
Chrome nagdagdag din ito kapong baka
bagay kung saan maaari mong -

1061
00:51:40,885 --> 00:51:43,430
>> Tomas REIMERS: Dahil ang mga taong katulad
Sinimulan ni Mike ginagawa ito ng maraming at

1062
00:51:43,430 --> 00:51:47,230
nakakainis na mga gumagamit, na nagpapahintulot sa mga
mong makakita ng impormasyon.

1063
00:51:47,230 --> 00:51:48,286
>> Mike RIZZO: Oo.

1064
00:51:48,286 --> 00:51:50,690
>> Tomas REIMERS: mayroon kaming Huwag anumang mga katanungan
tungkol dito, tungkol sa JavaScript

1065
00:51:50,690 --> 00:51:53,420
mga aklatan, paghahanap ng mga aklatan, o
mga hitsura kung ano ang web development

1066
00:51:53,420 --> 00:51:55,400
tulad ng sa totoong mundo?

1067
00:51:55,400 --> 00:51:56,880
Nagpapatakbo ka up kami laban sa oras.

1068
00:51:56,880 --> 00:52:00,400
Kaya hindi ako sigurado kami ay pagpunta
upang magkaroon ng panahon upang ipatupad

1069
00:52:00,400 --> 00:52:02,290
maliban kung ito ay talagang mabilis.

1070
00:52:02,290 --> 00:52:04,580
Sigurado namin mahusay?

1071
00:52:04,580 --> 00:52:08,110
>> Mike RIZZO: Kahit ano ka guys gusto
upang makita ang talagang mabilis sa, tulad ng, dalawang

1072
00:52:08,110 --> 00:52:09,556
minuto o mas mababa?

1073
00:52:09,556 --> 00:52:10,870
>> Tomas REIMERS: Kahit ano
maaari naming linawin?

1074
00:52:10,870 --> 00:52:12,500
Paano sumulat sa -

1075
00:52:12,500 --> 00:52:13,260
>> Madla: [hindi marinig]?

1076
00:52:13,260 --> 00:52:16,070
>> Mike RIZZO: Oo, kaya that's -

1077
00:52:16,070 --> 00:52:18,065
>> Tomas REIMERS: Maaari mong pindutin lamang
Control-U sa website.

1078
00:52:18,065 --> 00:52:19,275
>> Mike RIZZO: Oh, ako ay hindi alam na.

1079
00:52:19,275 --> 00:52:22,290
>> Tomas REIMERS: Sa tingin ko, oo.

1080
00:52:22,290 --> 00:52:23,300
Control-U. Oo.

1081
00:52:23,300 --> 00:52:25,970
>> Mike RIZZO: Oh, kaya iyon ang
code para sa website.

1082
00:52:25,970 --> 00:52:29,580
Ngunit kung ang iyong aktwal na nais upang i-download ang aming
mga file at ang lahat ng bagay, ito ay naka-host

1083
00:52:29,580 --> 00:52:32,650
sa github.com

1084
00:52:32,650 --> 00:52:34,850
>> Tomas REIMERS: iwa ang aking pangalan -

1085
00:52:34,850 --> 00:52:38,504
Tomas Reimers - slash
CS50 gitling seminar.

1086
00:52:38,504 --> 00:52:40,710
>> Mike RIZZO: At maaari mong
hanapin ang lahat ng bagay doon.

1087
00:52:40,710 --> 00:52:42,310
>> Tomas REIMERS: Ito ay kung ano GitHub
kamukha, sa pamamagitan ng mga paraan.

1088
00:52:42,310 --> 00:52:44,910
Kaya muli, kapag nakita mo ang isang open source
proyekto, karaniwan, ang mga ito ay maging isang read

1089
00:52:44,910 --> 00:52:45,950
ako doon na maaari mong basahin.

1090
00:52:45,950 --> 00:52:50,200
At kung pumunta ka pabalik, mapapansin mo na
mayroon kang ang pag-download zip, na

1091
00:52:50,200 --> 00:52:52,130
daan sa iyo upang i-download ang pinagmulan
code upang isama ang

1092
00:52:52,130 --> 00:52:53,666
ng produkto sa iyong sariling mga bagay.

1093
00:52:53,666 --> 00:52:56,890
>> Mike RIZZO: Oo, at kung mag-click namin lamang
sa index.html talagang mabilis -

1094
00:52:56,890 --> 00:52:59,180
>> Tomas REIMERS: Makikita mo dito ang
source code para sa aming website.

1095
00:52:59,180 --> 00:53:02,016

1096
00:53:02,016 --> 00:53:06,070
>> Mike RIZZO: Gayundin, Nakalimutan ko ang upang itulak karapatan
bago na may malaking talahanayan ito

1097
00:53:06,070 --> 00:53:09,860
kasama, ngunit mayroon ding isang talahanayan
ng chmods na namin kasama

1098
00:53:09,860 --> 00:53:13,210
para lamang sa iyong kaliwanagan.

1099
00:53:13,210 --> 00:53:16,940
Ngunit kung mag-scroll namin ang lahat ng paraan down sa
ibaba, kami ay hindi talagang gawin napaka

1100
00:53:16,940 --> 00:53:21,160
magkano ang JavaScript
bagay-bagay sa lahat na may ito.

1101
00:53:21,160 --> 00:53:26,610
Ito ay eksklusibo mula sa lahat ng bagay
bagay na namin ay may.

1102
00:53:26,610 --> 00:53:28,730
>> Kaya salamat sa iyo guys para sa darating na
at nakikinig.

1103
00:53:28,730 --> 00:53:29,830
Umaasa kami na ito ay talagang kapaki-pakinabang.

1104
00:53:29,830 --> 00:53:33,020
Kung mayroon kang anumang mga kaugnay na JavaScript
mga katanungan o nais lamang na makipag-usap tungkol sa

1105
00:53:33,020 --> 00:53:36,240
ano pa tulad ng kung ano ang iba pang mga cool na bagay
maaari mong gawin sa JavaScript, nais naming pag-ibig

1106
00:53:36,240 --> 00:53:37,186
-usap sa inyo.

1107
00:53:37,186 --> 00:53:40,010
>> Tomas REIMERS: Kung mayroon kang isang katanungan
tungkol sa iyong proyekto o kung maaari itong maging

1108
00:53:40,010 --> 00:53:42,740
katuturan, ipapakita namin marahil manatili sa paligid
Medyo matapos na ito.

1109
00:53:42,740 --> 00:53:44,640
Ngunit bukod sa na, mayroon
isang magandang weekend.

1110
00:53:44,640 --> 00:53:45,845
>> Mike RIZZO: Oo, magsaya.

1111
00:53:45,845 --> 00:53:46,120
Magkita guys.

1112
00:53:46,120 --> 00:53:47,370
>> Tomas REIMERS: Tingnan ang Ya.

1113
00:53:47,370 --> 00:53:47,926