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

2
00:00:07,440 --> 00:00:08,180
>> TOMAS Reimers: Hi, almal.

3
00:00:08,180 --> 00:00:09,250
My naam is Tomas Reimers.

4
00:00:09,250 --> 00:00:10,500
>> MIKE RIZZO: En ek is Mike Rizzo.

5
00:00:10,500 --> 00:00:12,990
>> TOMAS Reimers: Ons is twee van CS50s TS.

6
00:00:12,990 --> 00:00:18,910
En vandag is ons die leiding van die seminaar oor
JavaScript en CSS vir die web programme.

7
00:00:18,910 --> 00:00:22,140
As jy wil volg saam, die
skakel is reg daar.

8
00:00:22,140 --> 00:00:25,190
En jy wil om dit te sit
op die rekenaar kortliks?

9
00:00:25,190 --> 00:00:27,460
>> Daar is die skakel.

10
00:00:27,460 --> 00:00:30,390
Dit is 'n klein werf, wat het skakels na
al die hulpbronne wat ons gaan wees

11
00:00:30,390 --> 00:00:36,490
wys jou vandag en het ook 'n baie
nuttige inligting wat geskryf is deur ons te

12
00:00:36,490 --> 00:00:39,680
Lees meer in diepte wanneer jy terug te gaan,
en jy probeer om te onthou wat

13
00:00:39,680 --> 00:00:42,166
presies het ons sê, wat jy was
praat, ensovoorts.

14
00:00:42,166 --> 00:00:43,870
>> MIKE RIZZO: Alle reg.

15
00:00:43,870 --> 00:00:44,890
So laat ons begin.

16
00:00:44,890 --> 00:00:45,700
>> TOMAS Reimers: So jy wil om te begin?

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

18
00:00:45,970 --> 00:00:47,170
>> MIKE RIZZO: Ja.

19
00:00:47,170 --> 00:00:51,730
So het ons eerste wou begin met 'n breë
oorsig oor die internet en

20
00:00:51,730 --> 00:00:54,240
lêer tipes by die ontwerp van webtuistes.

21
00:00:54,240 --> 00:00:57,550
Terwyl hierdie aanbieding ons wil
kry in 'n baie in JavaScript veel

22
00:00:57,550 --> 00:01:00,320
Later, ons wou begin met
net, soort van soos 'n Voëlvlug

23
00:01:00,320 --> 00:01:03,270
van wat 'n webwerf is en hoe
na te dink oor die ontwerp van 'n

24
00:01:03,270 --> 00:01:04,800
webwerf vir die begin.

25
00:01:04,800 --> 00:01:08,370
>> So julle ouens, op hierdie punt - met dit
synde Vrydagaand - moet

26
00:01:08,370 --> 00:01:11,000
jou CS50 finansies voorgelê
probleem sit.

27
00:01:11,000 --> 00:01:15,260
Hopelik, dit was 'n goeie smaak
van wat web ontwikkeling kan wees.

28
00:01:15,260 --> 00:01:18,261
Maar hier wil ons, soort, gee
jy 'n ander smaak, as well.

29
00:01:18,261 --> 00:01:23,190
>> TOMAS Reimers: So net om te vat wat
gebeur, wanneer jy tik in jou URL te

30
00:01:23,190 --> 00:01:26,650
jou webblaaier, wat URL kry
opgekyk in die rekenaar.

31
00:01:26,650 --> 00:01:28,590
En jou rekenaar se verbind
na 'n ander rekenaar,

32
00:01:28,590 --> 00:01:29,890
wat as gasheer van die webwerf.

33
00:01:29,890 --> 00:01:33,150
OK, so as jy gaan na google.com, is jy
gekoppel aan een van Google se

34
00:01:33,150 --> 00:01:36,496
rekenaars, wat die
lêers vir google.com.

35
00:01:36,496 --> 00:01:38,750
>> Dit vra dan vir 'n spesifieke lêer.

36
00:01:38,750 --> 00:01:40,020
So as jy gaan na -

37
00:01:40,020 --> 00:01:41,550
Ek weet nie -

38
00:01:41,550 --> 00:01:48,170
example.com / index.html / of test.html,
jy gaan om te vra vir

39
00:01:48,170 --> 00:01:49,340
daardie spesifieke lêer.

40
00:01:49,340 --> 00:01:52,780
En die web bediener se gaan
om terug te keer na jou toe.

41
00:01:52,780 --> 00:01:54,910
>> Dan, wanneer jy deur die lêer -

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

43
00:01:57,750 --> 00:01:59,950
sodra jy die rekenaar kry wat
lêer - dit gaan om te begin

44
00:01:59,950 --> 00:02:00,820
'n webblad te bou.

45
00:02:00,820 --> 00:02:03,020
So is dit nou die HTML-lêer,
wat is 'n soort van soos die

46
00:02:03,020 --> 00:02:05,170
struktuur van die webblad.

47
00:02:05,170 --> 00:02:08,620
Die HTML-lêer kan ook verwys
CSS lêers, wat definieer die

48
00:02:08,620 --> 00:02:09,889
styl van die webblad.

49
00:02:09,889 --> 00:02:12,970
>> JavaScript-lêers, wat definieer
interaksie met die webblad.

50
00:02:12,970 --> 00:02:15,200
Beeld-lêers, wat net beelde.

51
00:02:15,200 --> 00:02:19,450
En moontlik verwys na ander HTML-lêers,
wat jy kan dan besoek.

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

53
00:02:22,656 --> 00:02:24,380
>> MIKE RIZZO: OK, groot.

54
00:02:24,380 --> 00:02:28,980
So julle ouens het al, miskien,
moeite opstel van jou plaaslike gasheer

55
00:02:28,980 --> 00:02:30,810
op jou virtuele masjien.

56
00:02:30,810 --> 00:02:35,650
En dat net, soort, is die plaaslike
domein wat jou rekenaar net die gasheer

57
00:02:35,650 --> 00:02:38,760
vir jou op jou eie IP adres.

58
00:02:38,760 --> 00:02:43,300
>> So in daardie, dan kan jy voeg
dit jou eie web bladsye.

59
00:02:43,300 --> 00:02:47,655
Ek bedoel, in CS50 Finansies, moet jy
bygevoeg 'n paar HTML bladsye, wat is,

60
00:02:47,655 --> 00:02:49,410
soort, toegedraai in die PHP wikkel.

61
00:02:49,410 --> 00:02:54,690
Maar uiteindelik, wat jou PHP bladsye
was uitdruk was HTML.

62
00:02:54,690 --> 00:02:58,210
>> Maar dink terug na die begin
van die PSET, het ons te stel

63
00:02:58,210 --> 00:03:00,890
die regte vir alles, reg?

64
00:03:00,890 --> 00:03:07,270
So dit is net basies laat ons weet
wat kan lees, skryf, en moontlik

65
00:03:07,270 --> 00:03:08,730
voer elk van die lêers.

66
00:03:08,730 --> 00:03:11,870
So ons gaan 'n vinnige om te doen - hm?

67
00:03:11,870 --> 00:03:15,660
>> TOMAS Reimers: So ons gaan
'n vinnige demo te doen.

68
00:03:15,660 --> 00:03:19,560
So net om jou te herinner, wanneer jy
toegang tot Google se rekenaar -

69
00:03:19,560 --> 00:03:20,690
wie -

70
00:03:20,690 --> 00:03:24,060
en vra vir 'n lêer, die rekenaar eerste
nodig om seker te maak jy gemagtig

71
00:03:24,060 --> 00:03:28,790
om werklik te sien dat 'n lêer of lees dat
dien, want jy kan nie net vra

72
00:03:28,790 --> 00:03:30,430
vir 'n lêer op die rekenaar, reg?

73
00:03:30,430 --> 00:03:32,260
Dit sou 'n sekuriteit inhou.

74
00:03:32,260 --> 00:03:37,020
>> So lêers op die stelsels wat ons gebruik, soos
hierdie CS50 toestel, het drie

75
00:03:37,020 --> 00:03:39,200
algemene mense wat kan
regte na iets.

76
00:03:39,200 --> 00:03:41,610
Die eerste is die werklike
eienaar van die genoemde lêer.

77
00:03:41,610 --> 00:03:43,820
Die tweede is die groep wat
die lêer behoort.

78
00:03:43,820 --> 00:03:46,090
Ons gaan nie om te fokus
te veel op nie.

79
00:03:46,090 --> 00:03:50,010
En die laaste ding is, soort van, soos die
wêreld of soos almal wie se

80
00:03:50,010 --> 00:03:54,130
nie spesifiek na die lêer en nie
enige eiendomsreg daaroor.

81
00:03:54,130 --> 00:04:05,650
>> So as ons het die eienaar, groep,
en dan die wêreld.

82
00:04:05,650 --> 00:04:10,510
En dan, vir elk van hierdie groepe, het jy
een van drie regte kan hê,

83
00:04:10,510 --> 00:04:13,010
OK, of verskeie van hulle.

84
00:04:13,010 --> 00:04:15,070
Jy kan gelees regte.

85
00:04:15,070 --> 00:04:16,560
Jy kan regte nie.

86
00:04:16,560 --> 00:04:18,880
En jy kan voer regte.

87
00:04:18,880 --> 00:04:22,060
>> Dus, in terme van die werklike lêer tipes, lees
toestemming is soos eintlik lees

88
00:04:22,060 --> 00:04:23,250
die inhoud van die lêer.

89
00:04:23,250 --> 00:04:24,730
'N Reg toestemming skriftelik
te sê lêer.

90
00:04:24,730 --> 00:04:28,370
'N voer toestemming loop die
liasseer soos jy doen wanneer jy een van

91
00:04:28,370 --> 00:04:29,620
jou CS50 projekte.

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

93
00:04:32,190 --> 00:04:38,820
>> So wanneer ons dink oor lêers
soos wanneer ons moet 'HTML te lees

94
00:04:38,820 --> 00:04:41,790
lêer, wat moet die wêreld te wees
leesbare, reg?

95
00:04:41,790 --> 00:04:44,420
Vermoedelik, ook die eienaar wil
in staat wees om die lêer te wysig.

96
00:04:44,420 --> 00:04:46,610
So het die eienaar se gaan nodig
lees en skryf regte.

97
00:04:46,610 --> 00:04:48,710
Hulle het nie regtig nodig uitvoer.

98
00:04:48,710 --> 00:04:50,950
>> Groep, ons gaan behandel
dieselfde as die wêreld vir nou.

99
00:04:50,950 --> 00:04:54,610
Sodat hulle nodig leesregte.

100
00:04:54,610 --> 00:04:57,310
Maar hulle skryf nie nodig
of uit te voer regte.

101
00:04:57,310 --> 00:05:01,920
En nou, as ons terug dink aan die voormalige
PSETs, wat ons besef, is hierdie soort

102
00:05:01,920 --> 00:05:03,360
van lyk soos binêre, reg?

103
00:05:03,360 --> 00:05:04,210
1 staan ​​vir ja.

104
00:05:04,210 --> 00:05:05,040
0 vir geen.

105
00:05:05,040 --> 00:05:06,870
En ons kan eintlik vertaal
hierdie binêre.

106
00:05:06,870 --> 00:05:10,478
>> So 110 in binêre sou wees 6.

107
00:05:10,478 --> 00:05:13,270
100 sou wees 4.

108
00:05:13,270 --> 00:05:14,690
Dieselfde met die wêreld.

109
00:05:14,690 --> 00:05:20,846
So het die nommer wat jy sou kry vir die
regte vir hierdie sou wees 644.

110
00:05:20,846 --> 00:05:24,400
>> MIKE RIZZO: En as jy terugdink
wanneer jy iets chmoded, ek glo

111
00:05:24,400 --> 00:05:28,980
hulle het in die probleem het die
voorbeeld van waar jy kan doen

112
00:05:28,980 --> 00:05:36,470
iets soos chmod 644
en dan 'n lêer naam.

113
00:05:36,470 --> 00:05:39,980
Die 644 dan kan jy nou sien wat direk
waar wat kom uit.

114
00:05:39,980 --> 00:05:42,840
So hopelik wat maak dat
'n bietjie meer duidelik.

115
00:05:42,840 --> 00:05:45,600
>> En dan vir jou man se duidelikheid -

116
00:05:45,600 --> 00:05:48,200
O ja, hier is dit weer.

117
00:05:48,200 --> 00:05:53,260
So 600 dan net sou wees om die voorbeeld
Ons het hier waar die eienaar het

118
00:05:53,260 --> 00:05:56,360
lees en nodige regte, terwyl die groep
en die wêreld nie enige regte het nie

119
00:05:56,360 --> 00:05:58,145
die lêer om toegang te verkry.

120
00:05:58,145 --> 00:06:01,500
>> TOMAS Reimers: En dan het ons 'n vinnige
lys van algemene regte.

121
00:06:01,500 --> 00:06:05,250
So dopgehou, wat jy wil
om werklik chmod 711.

122
00:06:05,250 --> 00:06:08,930
Vinnige eenkant - vir 'n gids te hê
uitvoerbare toestemming beteken om in staat wees om

123
00:06:08,930 --> 00:06:11,680
die gids oop te maak.

124
00:06:11,680 --> 00:06:15,280
Beelde, CSS, JavaScript, HTML behoeftes
644, want basies, die wêreld

125
00:06:15,280 --> 00:06:16,400
behoeftes en regte.

126
00:06:16,400 --> 00:06:20,960
>> En PHP, wat julle gesien het
alhoewel ons nie praat oor dit

127
00:06:20,960 --> 00:06:24,880
streng is tipies chmoded met
toestemming 600, want dit is hardloop met

128
00:06:24,880 --> 00:06:26,540
die regte van die eienaar.

129
00:06:26,540 --> 00:06:27,790
Ten minste op die toestel.

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

131
00:06:30,200 --> 00:06:36,870
>> MIKE RIZZO: So as jy dit nie doen nie spesifiek
spesifiseer watter tipe lêer

132
00:06:36,870 --> 00:06:39,480
jy wil in eintlik die opstel
hierdie aanbieding -

133
00:06:39,480 --> 00:06:43,490
ons het 'n probleem met hierdie, want
alles is nie korrek chmoded -

134
00:06:43,490 --> 00:06:47,550
jy gaan, soort van 'n te kry
verbied fout wat die webwerf

135
00:06:47,550 --> 00:06:49,700
eintlik nie toestemming het
om toegang te verkry watter lêer

136
00:06:49,700 --> 00:06:51,370
jy wil om dit te bekom.

137
00:06:51,370 --> 00:06:54,780
En natuurlik, wat kan vasgestel word -
soos in die probleem gestel - deur die verandering

138
00:06:54,780 --> 00:06:56,405
regte gepas.

139
00:06:56,405 --> 00:06:59,620
>> TOMAS Reimers en die laaste kommentaar
vinnig plaaslike ontwikkeling is - ons

140
00:06:59,620 --> 00:07:02,000
het hierdie, maar ons wou net
om dit te bring weer -

141
00:07:02,000 --> 00:07:06,230
As jy vra vir 'n bediener - sodat plaaslike gasheer,
byvoorbeeld com of wat ook al. -

142
00:07:06,230 --> 00:07:09,170
en jy hoef nie 'n spesifieke lêer spesifiseer nie,
die lêer wat jou rekenaar gaan

143
00:07:09,170 --> 00:07:11,540
te vra, is index.html genoem.

144
00:07:11,540 --> 00:07:12,790
Of as dit nie bestaan ​​nie, jeug.

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
So dit is net 'n herhaling van alles,
hopelik, dat ons gedek het in

148
00:07:19,560 --> 00:07:22,800
artikel, en lesing,
en tot dusver in CS50.

149
00:07:22,800 --> 00:07:26,110
En nou gaan ons begin praat
oor spesifiek biblioteke.

150
00:07:26,110 --> 00:07:30,270
JavaScript en CSS biblioteke
vir die web programme.

151
00:07:30,270 --> 00:07:36,350
>> So 'n vinnige rede hoekom ons
biblioteke is om die programmering -

152
00:07:36,350 --> 00:07:39,000
daar is 'n baie probleme in
ontwikkeling, wat hou knal

153
00:07:39,000 --> 00:07:40,570
weer en weer en weer.

154
00:07:40,570 --> 00:07:43,870
Jy mag opmerk dat baie van die webwerwe
moet die vermoë druppel af het

155
00:07:43,870 --> 00:07:49,100
spyskaarte, byvoorbeeld, of moet die vermoë
'n baie standaard knoppie te hê

156
00:07:49,100 --> 00:07:51,400
styl, wat nie mag wees
die maklikste ding.

157
00:07:51,400 --> 00:07:54,670
Nou dat jy begin om te kry in HTML, jy
besef dat knoppies kan eintlik

158
00:07:54,670 --> 00:07:57,720
lyk regtig lelik as jy
Moenie iets doen.

159
00:07:57,720 --> 00:08:00,830
>> So 'n klomp mense het geskryf
genoem biblioteke.

160
00:08:00,830 --> 00:08:02,990
En in hierdie konteks, hulle is
ook raamwerke genoem.

161
00:08:02,990 --> 00:08:04,790
Ons gaan om te gebruik om die
twee verwissel.

162
00:08:04,790 --> 00:08:07,360
En wat hulle is, is hulle basies
gemaakte stukke van die kode -

163
00:08:07,360 --> 00:08:09,130
óf CSS of JavaScript -

164
00:08:09,130 --> 00:08:13,240
wat weg te neem 'n baie van die
Team jy het in die kodering.

165
00:08:13,240 --> 00:08:17,290
>> Sodat hulle die pre-definieer 'n klomp van die klasse of
pre-definieer 'n klomp van die funksies vir

166
00:08:17,290 --> 00:08:20,110
JavaScript se geval, wat
kan jy later bel.

167
00:08:20,110 --> 00:08:22,690
En dan kan jy, soort van, kry
toegang tot hierdie kode sonder

168
00:08:22,690 --> 00:08:23,710
om iets te doen.

169
00:08:23,710 --> 00:08:27,750
'N Voorbeeld van die biblioteek was CS50.H.
Dit was 'n biblioteek wat ons jou gegee het terug

170
00:08:27,750 --> 00:08:32,090
in week een, wat toegelaat het om te doen
dinge soos wat getint en GetString

171
00:08:32,090 --> 00:08:35,237
sonder om te skryf
'n kode self.

172
00:08:35,237 --> 00:08:36,179
>> MIKE RIZZO: Alle reg.

173
00:08:36,179 --> 00:08:40,299
So hier, net soos ons moes sluit
in ons c lêers van die verskillende

174
00:08:40,299 --> 00:08:46,570
biblioteke, het ons ook moet insluit in
ons HTML-lêers verskillende biblioteke.

175
00:08:46,570 --> 00:08:50,310
Byvoorbeeld, as ons wou in te sluit
'n spesifieke JavaScript-biblioteek hier,

176
00:08:50,310 --> 00:08:52,850
miskien, een wat ons geskryf
onsself as dit plaaslik bedryf

177
00:08:52,850 --> 00:08:56,000
genoem script.js, het ons net
gebruik van hierdie simbole.

178
00:08:56,000 --> 00:08:59,500
>> So het ons 'n script tipe gelykes
JavaScript bron gelykes

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

180
00:09:01,260 --> 00:09:05,190
En as jy terug dink aan jou CS50
Finansies probleem gestel, as jy kyk in

181
00:09:05,190 --> 00:09:09,190
Header.php in die templates gids,
jy moet gesien het

182
00:09:09,190 --> 00:09:10,970
sommige van hierdie ingesluit.

183
00:09:10,970 --> 00:09:13,250
So die eerste een - die skrifte -

184
00:09:13,250 --> 00:09:16,080
is, insluitend 'n JavaScript-biblioteek.

185
00:09:16,080 --> 00:09:18,760
Insluitende 'n CSS biblioteek is
'n bietjie anders.

186
00:09:18,760 --> 00:09:21,430
>> Hier, in plaas van die script
Label jy die skakel tag.

187
00:09:21,430 --> 00:09:27,110
En dan, die teks CSS tipe
is 'n bietjie anders.

188
00:09:27,110 --> 00:09:29,270
Jy hoef nie altyd te sluit
rel styl blad.

189
00:09:29,270 --> 00:09:30,970
Maar ek dink dit is in die algemeen,
goeie praktyk.

190
00:09:30,970 --> 00:09:35,810
>> En dan uiteindelik, die HREF, wat jy
waarskynlik sien in jou ATAGs vir die koppeling

191
00:09:35,810 --> 00:09:39,440
in verskillende skakels net spesifiseer
die skakel van waar om dit te vind nie.

192
00:09:39,440 --> 00:09:42,250
Byvoorbeeld, as ons wou 'n skakel
verskillende biblioteek - laat ons net sê -

193
00:09:42,250 --> 00:09:49,330
wat geleef het by styles.css.

194
00:09:49,330 --> 00:09:54,030
En ons wou dit om te skakel in dit is
bedryf op die web, sou ons kopieer dit.

195
00:09:54,030 --> 00:09:58,834
En dan plak dit in alles wat
Ons het hier plaas.

196
00:09:58,834 --> 00:10:01,340
>> TOMAS Reimers: OK, Hopelik sal jy
ouens is reeds bekend

197
00:10:01,340 --> 00:10:02,410
met hoe CSS te skakel.

198
00:10:02,410 --> 00:10:04,000
Jy moes dat op te doen
jou laaste bruin stel.

199
00:10:04,000 --> 00:10:07,110
JavaScript, sommige van julle dalk
het 'n paar ervaring met.

200
00:10:07,110 --> 00:10:07,980
Sommige van julle mag nie.

201
00:10:07,980 --> 00:10:12,190
>> So vir nou, weet dat 'n JavaScript-lêer
is baie soos 'n CSS lêer in

202
00:10:12,190 --> 00:10:15,640
die sin dat jy kan skakel om dit of
dat jy dit kan sluit intern.

203
00:10:15,640 --> 00:10:17,360
En dit kan jy script dinge.

204
00:10:17,360 --> 00:10:21,820
En ons gaan jou te loop deur 'n
bietjie JavaScript later.

205
00:10:21,820 --> 00:10:23,560
>> So gebruik 'n biblioteek -

206
00:10:23,560 --> 00:10:26,150
sodra jy ingesluit het, is dit as
eenvoudig as letterlik die roeping van die

207
00:10:26,150 --> 00:10:29,640
funksies of die toevoeging van die
klas name om dit te.

208
00:10:29,640 --> 00:10:32,220
Die laaste ding wat ons wil hê om te praat
oor in terme van die biblioteek -

209
00:10:32,220 --> 00:10:34,180
en dit is meer van 'n tegniese kennis -

210
00:10:34,180 --> 00:10:35,860
is open source lisensie.

211
00:10:35,860 --> 00:10:41,550
So wanneer jy hierdie eintlike biblioteke,
jy mag dink van

212
00:10:41,550 --> 00:10:47,630
vrae soos is dit OK dat ek net
iemand anders se kode, veral

213
00:10:47,630 --> 00:10:51,970
want dit is iets wat ons baie
het jy dit nie doen nie in hierdie kursus.

214
00:10:51,970 --> 00:10:55,790
>> So in die geval van 'n oop bron lisensiëring,
'n baie van die ontwikkelaars -

215
00:10:55,790 --> 00:10:57,540
As hulle eers 'n biblioteek geskryf,
wat hulle dink kan wees

216
00:10:57,540 --> 00:10:59,450
nuttig vir ander mense -

217
00:10:59,450 --> 00:11:02,420
sal dit publiseer op die web
en gee dit 'n lisensie.

218
00:11:02,420 --> 00:11:06,620
En 'n lisensie sê basies ek hiermee
toestemming verleen om ander

219
00:11:06,620 --> 00:11:11,250
mense hierdie stuk sagteware te gebruik
met die volgende soort

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

221
00:11:13,230 --> 00:11:16,100
>> Ons het ingesluit 'n skakel na 'n goeie site om te
help om die lisensies in te verstaan

222
00:11:16,100 --> 00:11:17,720
Indien jy loop in hulle.

223
00:11:17,720 --> 00:11:21,680
Algemene bepalings is dinge soos
jy is welkom om my biblioteek te gebruik sodat

224
00:11:21,680 --> 00:11:23,000
Solank as wat jy gee my krediet.

225
00:11:23,000 --> 00:11:25,670
Jy is welkom om my biblioteek te gebruik
so lank as wat wanneer dit breek

226
00:11:25,670 --> 00:11:26,790
jy my blameer nie.

227
00:11:26,790 --> 00:11:30,310
Jy is welkom om my biblioteek so lank om te gebruik
as jy dit nie gebruik nie om geld te maak

228
00:11:30,310 --> 00:11:31,910
vir jouself.

229
00:11:31,910 --> 00:11:34,130
Hierdie is vorme van gemeenskaplike
bepalings.

230
00:11:34,130 --> 00:11:37,780
>> Vir hierdie CS50 finale projek, het hulle
moet nie super relevant omdat

231
00:11:37,780 --> 00:11:41,440
die projekte wat jy ouens gebruik is
waarskynlik eerder, soort van, bekend.

232
00:11:41,440 --> 00:11:44,170
Maar wanneer jy eintlik gaan uit in die
wêreld en begin met behulp van biblioteke, wat

233
00:11:44,170 --> 00:11:48,100
mag of mag nie so goed geïmplementeer word as
sommige van die meer populêre ons

234
00:11:48,100 --> 00:11:49,780
gaan word deur gaan.

235
00:11:49,780 --> 00:11:53,310
Dit is goed om in staat wees om te verstaan
hierdie lisensies en te

236
00:11:53,310 --> 00:11:54,560
verstaan ​​wat hulle beteken.

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

238
00:11:58,120 --> 00:11:58,586
En gaan terug.

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

240
00:12:00,960 --> 00:12:04,850
So nou beweeg op voorbeelde
van die werklike CSS.

241
00:12:04,850 --> 00:12:07,770
Op hierdie punt so ver, kan jy
nie teëgekom het nie.

242
00:12:07,770 --> 00:12:10,300
Maar jy kan teëgekom het dit in
jou alledaagse lewe waar iets

243
00:12:10,300 --> 00:12:13,160
wat lyk een manier op 'n leser
dalk nie dieselfde lyk

244
00:12:13,160 --> 00:12:14,880
manier in 'n ander leser.

245
00:12:14,880 --> 00:12:17,400
>> Dit is die leser leser genoem
verenigbaarheid.

246
00:12:17,400 --> 00:12:20,780
En steeds is dit meer en steeds
meer van 'n probleem, veral as

247
00:12:20,780 --> 00:12:25,260
implementeer om meer en meer vryhede
dinge te implementeer as hulle wil.

248
00:12:25,260 --> 00:12:28,440
So wat oorkom, is daar eintlik
'n groot biblioteek genoem Normalize.CSS.

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

250
00:12:32,236 --> 00:12:33,770
>> TOMAS Reimers: Ons het die skakel.

251
00:12:33,770 --> 00:12:36,210
Op hierdie punt, dit is nuttig as
jy het jou laptop daar

252
00:12:36,210 --> 00:12:38,740
op soek na die site.

253
00:12:38,740 --> 00:12:42,580
En ons is aan jou gee hierdie reg
nou bloot omdat die CS50 finale

254
00:12:42,580 --> 00:12:44,370
projek is eintlik gaan
vra om dit te implementeer

255
00:12:44,370 --> 00:12:45,860
Net so en deur blaaiers.

256
00:12:45,860 --> 00:12:49,250
>> Dus net in die agterkant van jou te hou
kop, dit is 'n wonderlike biblioteek

257
00:12:49,250 --> 00:12:51,170
want dit sal, soort van,
standardiseer dinge.

258
00:12:51,170 --> 00:12:54,230
In Firefox, dalk iets wys
as een pixel aan die linkerkant.

259
00:12:54,230 --> 00:12:58,390
En dan kan Chrome eintlik besluit dat
wat jy bedoel was 10 pixels

260
00:12:58,390 --> 00:12:59,380
aan die linkerkant.

261
00:12:59,380 --> 00:13:01,030
En jy wil dit te standaardiseer.

262
00:13:01,030 --> 00:13:05,360
Normaliseer sal eintlik 'n baie goeie
werk om seker te maak dat jou site

263
00:13:05,360 --> 00:13:08,070
lyk dieselfde oor blaaiers.

264
00:13:08,070 --> 00:13:10,660
>> MIKE RIZZO: So as ons wou net
Klik op die skakel regtig vinnig en show

265
00:13:10,660 --> 00:13:13,140
jy wat dit lyk, jy
kan dit aflaai die gebruik van die

266
00:13:13,140 --> 00:13:14,670
reuse aflaai knoppie.

267
00:13:14,670 --> 00:13:18,520
Of ek u aanmoedig om meer te lees oor dit
deur te kliek op hierdie skakel in die laer

268
00:13:18,520 --> 00:13:19,310
regterkantste hoek.

269
00:13:19,310 --> 00:13:22,420
>> TOMAS Reimers: En as jy eintlik
Klik Lees meer reg daar -

270
00:13:22,420 --> 00:13:24,340
Klik op die bron op GitHub -

271
00:13:24,340 --> 00:13:31,720
jy eintlik sien die open source
lisensie LICENSE.md reg daar.

272
00:13:31,720 --> 00:13:35,740
En wat jy hier sien, is die
baie gewild MIT-lisensie.

273
00:13:35,740 --> 00:13:38,940
Weereens, as jy deur die teks lees,
jy sal in staat wees om dit te vind op die webwerf

274
00:13:38,940 --> 00:13:42,550
verwys ons na voor en in staat wees om te
verstaan ​​dit sonder om te lees

275
00:13:42,550 --> 00:13:45,920
deur die reg jargon.

276
00:13:45,920 --> 00:13:46,850
>> MIKE RIZZO: OK, groot.

277
00:13:46,850 --> 00:13:47,940
So dit is normaliseer.

278
00:13:47,940 --> 00:13:49,190
Ons wou jou te gee
wat regtig vinnig.

279
00:13:49,190 --> 00:13:50,030
O ja, het jy 'n vraag?

280
00:13:50,030 --> 00:13:53,013
>> Publiek: So wanneer jy dit aflaai, jy
volg net die kode wat hulle

281
00:13:53,013 --> 00:13:54,098
onder die knoppie aflaai?

282
00:13:54,098 --> 00:13:55,860
>> TOMAS Reimers: Ja, so
wanneer jy laai -

283
00:13:55,860 --> 00:13:58,130
>> MIKE RIZZO: O, dit is 'n groot punt.

284
00:13:58,130 --> 00:14:00,700
So die vraag is hoe doen
ons eintlik dit aflaai?

285
00:14:00,700 --> 00:14:03,260
So as ons op die skakel, sien ons
dat dit eintlik verskyn

286
00:14:03,260 --> 00:14:05,030
by die bron-kode.

287
00:14:05,030 --> 00:14:08,550
So om dit te doen, wat ons kon
nie net kliek Save As.

288
00:14:08,550 --> 00:14:10,830
Save As en dat indien
bring 'n lêer.

289
00:14:10,830 --> 00:14:14,160
En dan kan ons kies om te red
dit as normalize.CSS.

290
00:14:14,160 --> 00:14:15,810
En dan sal jy dit in te skakel -

291
00:14:15,810 --> 00:14:18,660
>> TOMAS Reimers: Die dieselfde manier waarop jy
skakel in enige ander lêer.

292
00:14:18,660 --> 00:14:22,250
En as jy 'n skakel dit in, wat is 'n groot
oor normaliseer, is dit eintlik

293
00:14:22,250 --> 00:14:25,920
sorg vir al die harde
werk deur die self.

294
00:14:25,920 --> 00:14:27,730
Dit beteken dat jy nie het nie
enige klasse by te voeg.

295
00:14:27,730 --> 00:14:29,690
>> Jy hoef nie iets vreemd om te doen.

296
00:14:29,690 --> 00:14:34,590
Dit sal normaliseer sonder jou
om iets te doen verder.

297
00:14:34,590 --> 00:14:36,083
Ja, jy het dit in te sluit.

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

299
00:14:38,990 --> 00:14:40,240
Google Chrome is nie reageer.

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

301
00:14:43,270 --> 00:14:44,860
>> Net 'n vinnige eenkant -

302
00:14:44,860 --> 00:14:46,800
Ek het opgemerk ons ​​gespring in hierdie.

303
00:14:46,800 --> 00:14:49,010
Die res van hierdie aanbieding is
gaan 'n vinnige oorsig te wees.

304
00:14:49,010 --> 00:14:50,380
'N Opname van biblioteke.

305
00:14:50,380 --> 00:14:52,710
>> Basies, wat hulle is.

306
00:14:52,710 --> 00:14:53,350
Wat hulle doen.

307
00:14:53,350 --> 00:14:54,060
Hoe is hulle nuttig.

308
00:14:54,060 --> 00:14:56,540
Hoe jy dit kan implementeer.

309
00:14:56,540 --> 00:14:59,730
As jy wil om te begin soek na hulle,
volgende saam, en deur die lees

310
00:14:59,730 --> 00:15:01,990
hulle het, sou ek hoogs aan te moedig nie.

311
00:15:01,990 --> 00:15:07,620
>> Alternatiewelik, is jy welkom om ook te
begin om hulle af te laai en met

312
00:15:07,620 --> 00:15:11,400
hulle in 'n gesig net wat hulle te sien
lyk of wat hulle doen as jy '

313
00:15:11,400 --> 00:15:12,270
jou laptop in die voorkant van jou.

314
00:15:12,270 --> 00:15:14,650
Indien nie, is jy welkom om te hou
luister na ons praat.

315
00:15:14,650 --> 00:15:15,500
Ons gaan om te hou praat.

316
00:15:15,500 --> 00:15:18,680
En ons het tyd aan die einde, hopelik
ons sal eintlik kry in wat jy

317
00:15:18,680 --> 00:15:20,946
wat sommige van hierdie biblioteke
lyk.

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

319
00:15:22,320 --> 00:15:25,466
Alle reg, so nou kom ons praat
oor Font awesome.

320
00:15:25,466 --> 00:15:30,480
>> TOMAS Reimers: so Font awesome is 'n
baie netjiese terrein, veral vir diegene

321
00:15:30,480 --> 00:15:32,450
van ons wat minder artisties
talentvolle.

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

323
00:15:36,330 --> 00:15:38,880
Ignoreer die naam Font awesome, dit gee
jy 'n klomp van die ikone wat

324
00:15:38,880 --> 00:15:41,050
baie nuttig.

325
00:15:41,050 --> 00:15:45,950
So 'n baie keer sal jy implementeer 'n
ikoon wat jy wil dalk soos 'n mooi x so

326
00:15:45,950 --> 00:15:47,170
dat jy iets kan sluit.

327
00:15:47,170 --> 00:15:49,910
>> Of wil jy dalk 'n soort van knoppie wysig
met 'n potlood tekening soos

328
00:15:49,910 --> 00:15:50,940
almal het.

329
00:15:50,940 --> 00:15:53,850
En dit is wanneer jy leer dat
teken die ikone kan wees

330
00:15:53,850 --> 00:15:55,510
baie geduld en moeilik.

331
00:15:55,510 --> 00:15:59,160
Font awesome - as jy eintlik
gaan na die webwerf -

332
00:15:59,160 --> 00:16:02,892
gee jou 'n baie ikone onder
die ikone aan die bokant.

333
00:16:02,892 --> 00:16:06,980
Ja, net die top.

334
00:16:06,980 --> 00:16:09,030
Dit gee jou 'n baie
ikone gratis.

335
00:16:09,030 --> 00:16:15,210
>> So hier het jy sien ons het dinge soos 'n
asterisk, bars, 'n weerligstraal, 'n

336
00:16:15,210 --> 00:16:19,750
kalender, 'n fout, 'n boek, ensovoorts.

337
00:16:19,750 --> 00:16:21,110
Dit kan baie nuttig wees.

338
00:16:21,110 --> 00:16:24,290
Die manier waarop jy sluit dit jy is, sluit
letterlik die CSS-lêer.

339
00:16:24,290 --> 00:16:29,760
En nadat jy het die CSS-lêer,
wat jy kan doen, is jy 'n

340
00:16:29,760 --> 00:16:33,430
tag genoem I. Dit satands vir
ikoon met die klas FA

341
00:16:33,430 --> 00:16:34,460
staan ​​vir Font awesome.

342
00:16:34,460 --> 00:16:36,330
En dan, wat ook al die klas wat jy wil.

343
00:16:36,330 --> 00:16:41,220
>> So as ek wou 'n ikoon van hierdie plus
vierkante reg hier, sou ek dit gee

344
00:16:41,220 --> 00:16:43,290
dit die klas FA.

345
00:16:43,290 --> 00:16:46,230
En dan FA koppelteken plus koppelteken vierkante.

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

347
00:16:50,325 --> 00:16:53,710
>> MIKE RIZZO: Cool, OK.

348
00:16:53,710 --> 00:16:56,980
>> TOMAS Reimers: En dan, die laaste CSS
Biblioteek ons ​​wil te kry deur ons

349
00:16:56,980 --> 00:16:59,950
probeer om dit te hou op 'n minimale CSS
biblioteke omdat ons nie besef dat die

350
00:16:59,950 --> 00:17:03,660
titel van hierdie aanbieding
is JavaScript biblioteke.

351
00:17:03,660 --> 00:17:07,089
Maar ons het gedink dat ons kan net sowel
bekend te stel aan die ander biblioteke

352
00:17:07,089 --> 00:17:09,569
terwyl ons praat oor biblioteke.

353
00:17:09,569 --> 00:17:11,400
>> Dit is Google Web Fonts.

354
00:17:11,400 --> 00:17:17,040
En wat Google Web Fonts jy kan
te doen, is fonts op jou webwerf,

355
00:17:17,040 --> 00:17:22,079
wat is 'n baie maklike manier om dit te maak
mooi en jou stel om te onderskei

356
00:17:22,079 --> 00:17:24,460
van almal anders se is as dit
'n mooi font of as dit 'n mooi

357
00:17:24,460 --> 00:17:27,790
versameling van fonts.

358
00:17:27,790 --> 00:17:31,410
Google Web Fonts is lekker in teenstelling met ander
biblioteke in die sin dat dit 'n

359
00:17:31,410 --> 00:17:33,490
werklik gelei installasie.

360
00:17:33,490 --> 00:17:38,680
>> So as jy volg die skakel, dit is
google.com / fonts, ek glo nie.

361
00:17:38,680 --> 00:17:41,100
As jy volg dat jy
kan jou font kies.

362
00:17:41,100 --> 00:17:44,410
Jy kan kies aan die linkerkant van
dik, inslag, ensovoorts.

363
00:17:44,410 --> 00:17:48,970
En dan, wanneer jy gekies het een,
kan jy 'n vinnige gebruik klik.

364
00:17:48,970 --> 00:17:49,820
Reg daar.

365
00:17:49,820 --> 00:17:51,590
Onderkant regs van die boks.

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

367
00:17:54,380 --> 00:17:56,700
>> En dan, blaai af.

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

369
00:17:59,600 --> 00:18:02,650
Eerste van alles, hulle gee jou die CSS dat
wat jy nodig het om werklik te skakel om dit te.

370
00:18:02,650 --> 00:18:03,330
Dit is reg daar.

371
00:18:03,330 --> 00:18:05,170
Jy kan net kopieer en plak dat in

372
00:18:05,170 --> 00:18:07,250
En die lekker ding van hierdie een is
jy eintlik nie eens nodig om te

373
00:18:07,250 --> 00:18:08,340
aflaai van die lêer.

374
00:18:08,340 --> 00:18:11,170
>> Wat is dit gaan doen, is dit gaan
om te skakel na Google se weergawe van dit.

375
00:18:11,170 --> 00:18:14,130
So terug na wat dit beteken nie dat.

376
00:18:14,130 --> 00:18:18,270
Dit beteken dat wanneer 'n gebruiker
laai jou lêer -

377
00:18:18,270 --> 00:18:22,300
laai jou HTML bladsy - HTML
bladsy gaan hierdie lêer te verwys.

378
00:18:22,300 --> 00:18:26,790
>> So dan, is jou rekenaar gaan om te sien,
O, dit is die gasheer op google.com eerder

379
00:18:26,790 --> 00:18:28,170
as op theirsite.com.

380
00:18:28,170 --> 00:18:30,370
Laat my gaan vra Google vir die lêer.

381
00:18:30,370 --> 00:18:32,800
En dan, gaan dit in te sluit
dit amper asof dit 'n

382
00:18:32,800 --> 00:18:35,584
deel van jou eie webwerf.

383
00:18:35,584 --> 00:18:36,540
>> TOMAS Reimers: Cool.

384
00:18:36,540 --> 00:18:40,980
En as jy sluit, dan te
sluit dit in jou CSS, dit gee jou

385
00:18:40,980 --> 00:18:41,830
die werklike lyn.

386
00:18:41,830 --> 00:18:45,188
So jy het die eiendom font familie
gelykstaande aan die naam van die skrif.

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
Dus het ons net klaar met CSS.

390
00:18:52,220 --> 00:18:57,230
En sommige van julle kan dink, goed,
Ons het 'n paar CSS op CS50 Finansies.

391
00:18:57,230 --> 00:19:00,390
Maar CSS biblioteek was bootstrap.

392
00:19:00,390 --> 00:19:05,190
Ons het eintlik sluit Skoenlus 'n bietjie
later onder JavaScript want met

393
00:19:05,190 --> 00:19:09,660
die Skoenlus CSS biblioteek kom ook
met 'n baie JavaScript dat

394
00:19:09,660 --> 00:19:12,060
Skoenlus of Twitter -
wat Skoenlus gemaak -

395
00:19:12,060 --> 00:19:15,426
gebruik al hul CSS te bestuur.

396
00:19:15,426 --> 00:19:19,592
>> TOMAS Reimers: Is daar iemand enige
vrae so ver oor CSS in die algemeen?

397
00:19:19,592 --> 00:19:20,723
Ons is goed?

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

399
00:19:21,216 --> 00:19:22,495
>> MIKE RIZZO: awesome.

400
00:19:22,495 --> 00:19:25,136
>> TOMAS Reimers: So beweeg
op JavaScript.

401
00:19:25,136 --> 00:19:27,900
>> MIKE RIZZO: So ons wou praat
oor jQuery om mee te begin.

402
00:19:27,900 --> 00:19:30,780
Het iemand al gehoor van jQuery
voor of dit gebruik?

403
00:19:30,780 --> 00:19:32,180
Ja, 'n paar?

404
00:19:32,180 --> 00:19:36,000
So as jy net werk met inheemse
JavaScript, sal jy jouself vind

405
00:19:36,000 --> 00:19:41,000
tik 'n baie lang keurders 'n baie.

406
00:19:41,000 --> 00:19:44,400
So, wat jQuery doen, is dit '
'n lekker wikkel vir die JavaScript

407
00:19:44,400 --> 00:19:48,180
taal wat kan jy maklik kies
en manipuleer verskillende elemente

408
00:19:48,180 --> 00:19:52,470
binne die dokument voorwerp model van die
webblad of die DOM, wat ek dink

409
00:19:52,470 --> 00:19:54,290
julle het gehoor van in
lesings op hierdie punt.

410
00:19:54,290 --> 00:19:57,550
>> TOMAS Reimers: As jy nog nie gehoor van
of as jy dit nog nie gesien lesing

411
00:19:57,550 --> 00:20:01,870
Tog, die Document Object Model is
basies hoe dinge verteenwoordig.

412
00:20:01,870 --> 00:20:05,290
So HTML soort lyk soos 'n boom
wanneer jy eintlik trek dit uit.

413
00:20:05,290 --> 00:20:06,850
Jy het die HTML element bo-op.

414
00:20:06,850 --> 00:20:07,560
Jy het die kop en liggaam.

415
00:20:07,560 --> 00:20:09,500
>> En dan, binne wat jy
alles anders.

416
00:20:09,500 --> 00:20:10,660
Dit is waarna verwys word as die DOM -

417
00:20:10,660 --> 00:20:12,120
Document Object Model.

418
00:20:12,120 --> 00:20:16,090
So 'n model wat voorwerpe verteenwoordig in
die dokument is 'n maklike manier om te dink

419
00:20:16,090 --> 00:20:18,560
oor dat.

420
00:20:18,560 --> 00:20:22,520
En een van die groot ding oor jQuery
is dit regtig Dwarsbalke

421
00:20:22,520 --> 00:20:26,460
dat en manipuleer elemente binne
wat ongelooflik eenvoudig.

422
00:20:26,460 --> 00:20:30,300
>> So eenvoudig, in die feit dat die meerderheid van die
JavaScript biblioteke of indien nie die

423
00:20:30,300 --> 00:20:34,200
meerderheid, die groot meerderheid van die mense
sien jy eintlik nodig het jQuery so

424
00:20:34,200 --> 00:20:37,530
dat hulle hulself net kan hardloop
want as jy het nie jQuery, jy

425
00:20:37,530 --> 00:20:40,540
sou 'n baie tyd mors probeer
uit te vind hoe om te kies sekere

426
00:20:40,540 --> 00:20:43,660
elemente en hoe ander dinge te doen.

427
00:20:43,660 --> 00:20:47,950
En die ander groot ding oor jQuery
is dat dit kruis leser versoenbaar is.

428
00:20:47,950 --> 00:20:51,550
>> So onthou toe ons gesê dat
nie alle blaaiers te implementeer

429
00:20:51,550 --> 00:20:53,100
dinge op dieselfde manier?

430
00:20:53,100 --> 00:20:55,120
Dit is waar, selfs in JavaScript.

431
00:20:55,120 --> 00:20:58,220
En een van die groot dinge oor jQuery
is dat dit sal ontdek die

432
00:20:58,220 --> 00:21:00,300
leser en op te spoor die
geskikte metode.

433
00:21:00,300 --> 00:21:03,420
>> So as jy 'n element te kies,
Internet Explorer kan sê jy

434
00:21:03,420 --> 00:21:05,770
veronderstel hierdie manier te doen.

435
00:21:05,770 --> 00:21:08,300
Firefox kan sê die korrekte
manier is om op hierdie manier.

436
00:21:08,300 --> 00:21:09,710
jQuery nie omgee nie.

437
00:21:09,710 --> 00:21:12,550
Wanneer jy vertel jQuery 'n te kies
element sal dit uit te vind hoe dit is

438
00:21:12,550 --> 00:21:16,290
veronderstel om dit te doen binne die leser die
gebruikers is tans in, en dan doen

439
00:21:16,290 --> 00:21:18,584
dit so.

440
00:21:18,584 --> 00:21:22,650
>> MIKE RIZZO: So laat ons nie oor praat
die gebruik van jQuery 'n bietjie.

441
00:21:22,650 --> 00:21:27,670
Net soos PHP, jQuery het 'n besondere
voorliefde vir die dollar-teken.

442
00:21:27,670 --> 00:21:30,880
So sal jy vind dat enige jQuery -

443
00:21:30,880 --> 00:21:32,060
Wel, nie almal nie.

444
00:21:32,060 --> 00:21:35,210
Jy kan soms vervang die dollar
teken met die woord jQuery.

445
00:21:35,210 --> 00:21:38,980
Maar oor die algemeen, net omdat dit
korter, wanneer jy sien dat jQuery

446
00:21:38,980 --> 00:21:41,420
gebruik dit sal met 'n dollar teken wees.

447
00:21:41,420 --> 00:21:47,030
>> So hier het ons net wat 'n begin
selector vir 'n element in die DOM.

448
00:21:47,030 --> 00:21:52,850
Hier het ons die dollar-teken gevolg
deur oop hakies en dan aanhalingstekens.

449
00:21:52,850 --> 00:21:56,130
En binne die aanhalings gaan ons keurders
vir die verskillende elemente.

450
00:21:56,130 --> 00:21:59,810
Net soos in CSS, ons nodig het om die keurders te
in staat wees om die verskillende elemente te stileer

451
00:21:59,810 --> 00:22:00,840
binne die bladsy.

452
00:22:00,840 --> 00:22:06,555
Diegene verskillende keurders vertaal
presies in jQuery en JavaScript,

453
00:22:06,555 --> 00:22:07,820
vir die grootste deel.

454
00:22:07,820 --> 00:22:10,120
>> So hier het ons 'n dot cat.

455
00:22:10,120 --> 00:22:14,780
So as jy onthou van lesing
die dot beteken net die klas.

456
00:22:14,780 --> 00:22:18,850
So ons kies element
met die klas cat.

457
00:22:18,850 --> 00:22:22,670
So as ek gaan voort en maak ons
JavaScript konsole hier regtig vinnig

458
00:22:22,670 --> 00:22:26,830
net demonstreer, as ek tik net die
dollar-teken, sien ons dat dit is 'n paar

459
00:22:26,830 --> 00:22:28,090
funksie wat kom.

460
00:22:28,090 --> 00:22:29,420
En dit is net gedefinieer deur jQuery.

461
00:22:29,420 --> 00:22:32,120
>> TOMAS Reimers: Vir dié van julle
onbekende, die konsole is 'n instrument

462
00:22:32,120 --> 00:22:35,430
binne Chrome, wat dit moontlik maak om jou te,
basies, loop JavaScript op die

463
00:22:35,430 --> 00:22:36,450
huidige bladsy.

464
00:22:36,450 --> 00:22:39,420
Dit sal jy baie nuttig vind wanneer
jy eintlik die opsporing en jy

465
00:22:39,420 --> 00:22:42,400
nodig het om te wees, wat is die huidige
waarde van 'n globale veranderlike of wat

466
00:22:42,400 --> 00:22:43,910
is iets anders?

467
00:22:43,910 --> 00:22:47,620
Dit is soort van soos GDB met die uitsondering
wat jy kan eintlik

468
00:22:47,620 --> 00:22:51,600
elemente op die bladsy te manipuleer met
dit in 'n baie makliker manier.

469
00:22:51,600 --> 00:22:55,080
En ook dit maak nie, basies, maak seker
met julle voordat dit doen iets nie.

470
00:22:55,080 --> 00:22:58,660
>> So, terwyl, kan GDB wees, is jy
seker dat jy die volgende stap om te loop?

471
00:22:58,660 --> 00:22:59,830
Die konsole is in werklikheid is.

472
00:22:59,830 --> 00:23:03,690
So as die webblad is die lewering en
doen wat dit doen, die

473
00:23:03,690 --> 00:23:05,720
raad se loop ook saam met dit.

474
00:23:05,720 --> 00:23:08,330
En jy kan toereken kode sit in
dat konsole, wat sal

475
00:23:08,330 --> 00:23:09,260
word uitgevoer op die bladsy.

476
00:23:09,260 --> 00:23:12,190
>> MIKE RIZZO: So het die konsole te tree,
Ek dink ek moet kortliks

477
00:23:12,190 --> 00:23:13,750
praat van hoe om dit te doen.

478
00:23:13,750 --> 00:23:17,850
In die laaste probleme wat jy mag hê
gebruik Chrome se inspekteer element

479
00:23:17,850 --> 00:23:20,440
funksies of view bladsy bron -

480
00:23:20,440 --> 00:23:23,870
en dit is toeganklik net deur die regte
kliek op die bladsy of 'n spesifieke

481
00:23:23,870 --> 00:23:28,430
element en doen óf inspekteer
element of view bladsy bron.

482
00:23:28,430 --> 00:23:31,190
Ons kan ook toegang verkry tot die JavaScript
konsole direk deur

483
00:23:31,190 --> 00:23:33,630
kies inspekteer element.

484
00:23:33,630 --> 00:23:37,930
So dan is jy net getref konsole
op die ver regterkant.

485
00:23:37,930 --> 00:23:41,900
>> Alternatiewelik kan jy ook weg
na die boonste regterkantste hoek,

486
00:23:41,900 --> 00:23:46,820
wat afgesny is op die skerm waar
dit het die drie horisontale bars.

487
00:23:46,820 --> 00:23:52,010
En jy gaan af na gereedskap en
dan JavaScript konsole

488
00:23:52,010 --> 00:23:53,240
hier waar kan sien -

489
00:23:53,240 --> 00:23:54,370
ten minste op Windows -

490
00:23:54,370 --> 00:23:59,680
die kortpad is beheer Shift J. So dan
As ons wou 'n element te kies

491
00:23:59,680 --> 00:24:06,060
binne hierdie bladsy, net soos ek gewys
voor, doen ons dollar-teken oop parens

492
00:24:06,060 --> 00:24:08,180
en haal dan.

493
00:24:08,180 --> 00:24:11,750
>> 'N interessante ding is, oor die algemeen,
enkele aanhalings en dubbel aanhalings is

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

495
00:24:12,370 --> 00:24:16,050
So 'n klomp mense gebruik net enkele
aanhalings, want hulle is vinniger te tik

496
00:24:16,050 --> 00:24:19,780
as dubbel aanhalingstekens omdat jy nie
het om af te hou die Shift.

497
00:24:19,780 --> 00:24:21,770
So ek sal net doen nou.

498
00:24:21,770 --> 00:24:24,510
>> So ek wil om iets te kies
met die klas.

499
00:24:24,510 --> 00:24:27,200
Houer, net omdat ek weet dis
iets wat op ons

500
00:24:27,200 --> 00:24:28,740
webblad nou.

501
00:24:28,740 --> 00:24:29,520
En ek druk Enter.

502
00:24:29,520 --> 00:24:31,670
En ons kan sien dat dit dit gekies het.

503
00:24:31,670 --> 00:24:34,990
So is dit toon dat dit
teruggekeer daardie voorwerp.

504
00:24:34,990 --> 00:24:36,620
So dit is 'n basiese keuse.

505
00:24:36,620 --> 00:24:40,080
As ons wou eintlik manipuleer,
jy wil hê om iets te noem

506
00:24:40,080 --> 00:24:43,925
op daardie seleksie, wat
ons sal kry in later.

507
00:24:43,925 --> 00:24:49,030
>> TOMAS Reimers: So net om te kyk na wat
meer in diepte, is dit nie anders

508
00:24:49,030 --> 00:24:52,245
as die funksie oproepe wat ons in C.
Die naam van die funksie hier is 'n

509
00:24:52,245 --> 00:24:52,580
bietjie vreemd.

510
00:24:52,580 --> 00:24:55,640
Dit is dollar-teken.

511
00:24:55,640 --> 00:24:57,010
Dit is net 'n naam van 'n funksie.

512
00:24:57,010 --> 00:24:58,810
Daar is niks spesiaal nie.

513
00:24:58,810 --> 00:25:00,450
>> Ons het oop hakies.

514
00:25:00,450 --> 00:25:03,880
Dan, ons het ons een argument wat
in hierdie geval gebeur met 'n string te wees,

515
00:25:03,880 --> 00:25:05,680
wat is 'n opsie vir dit.

516
00:25:05,680 --> 00:25:08,130
En dan, ons het ons
geslote hakies.

517
00:25:08,130 --> 00:25:09,960
Dit is dit.

518
00:25:09,960 --> 00:25:11,500
>> Dit is nie dat baie verskillend.

519
00:25:11,500 --> 00:25:12,900
Alhoewel, dit lyk baie vreemd.

520
00:25:12,900 --> 00:25:17,220
En dit kan, soort van, 'n knelpunt wees
wys vir 'n klomp mense.

521
00:25:17,220 --> 00:25:21,460
>> MIKE RIZZO: So Net so, as ons wou
'n element wat 'n ID te kies,

522
00:25:21,460 --> 00:25:23,470
Nou wil ons kies deur
ID in plaas van die klas.

523
00:25:23,470 --> 00:25:28,080
Dit sou 'n soortgelyke ding wees waar ons
net nie die skerp teken vir ID.

524
00:25:28,080 --> 00:25:33,576
So ons is hier kies alle
elemente wat ID bar.

525
00:25:33,576 --> 00:25:35,400
>> TOMAS Reimers: En dit strek.

526
00:25:35,400 --> 00:25:36,450
Dit CSS strek.

527
00:25:36,450 --> 00:25:42,260
Net soos in CSS, kan jy al kies
skakels, wat die klas cat.

528
00:25:42,260 --> 00:25:43,420
Hier is dit dieselfde ding.

529
00:25:43,420 --> 00:25:52,750
>> Jy kan a.foo doen, wat sou kies
al die skakels met die klas cat.

530
00:25:52,750 --> 00:25:58,860
Jy kan 'n skerp bar te doen, wat sou
Kies die skakel met die ID bar en so

531
00:25:58,860 --> 00:25:59,770
aan en so voort.

532
00:25:59,770 --> 00:26:02,120
Enige CSS selector is 'n geldige
jQuery selector.

533
00:26:02,120 --> 00:26:03,370
>> MIKE RIZZO: Ja.

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

535
00:26:07,996 --> 00:26:11,460
OK, so nou kom ons kry in 'n bietjie
van manipulasie wat ons kan doen met

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

537
00:26:12,870 --> 00:26:19,280
So jQuery het 'n spesifieke tipe
notasie waar ons net gebruik

538
00:26:19,280 --> 00:26:20,170
'n kol aan die einde.

539
00:26:20,170 --> 00:26:23,340
En jy kan dink dit soos in
C hoe ons het verskillende structs.

540
00:26:23,340 --> 00:26:27,110
En om te gaan in dié structs, sou jy
gebruik 'n punt te kry in hulle.

541
00:26:27,110 --> 00:26:28,480
>> Dit is soort van 'n soortgelyke ding.

542
00:26:28,480 --> 00:26:33,570
Net nou het ons 'n funksie binne hierdie
selector dat ons kan 'n beroep op dit.

543
00:26:33,570 --> 00:26:38,640
So hier is die heel eerste voorbeeld
jy kan sien is 'n CSS selector.

544
00:26:38,640 --> 00:26:45,290
En basies, wat dit doen, is dit
pas die eerste element CSS van hierdie

545
00:26:45,290 --> 00:26:46,230
ding wat jy gekies -

546
00:26:46,230 --> 00:26:47,720
hierdie element wat jy gekies -

547
00:26:47,720 --> 00:26:49,290
met die waarde wat.

548
00:26:49,290 --> 00:26:55,390
>> TOMAS Reimers: So 'n maklike vertaling van
wat sou wees as jQuery, basies,

549
00:26:55,390 --> 00:26:57,790
het net cat.

550
00:26:57,790 --> 00:27:05,480
En dan in CSS gesê,
kleur rooi en sluit.

551
00:27:05,480 --> 00:27:06,670
Dit is dieselfde idee.

552
00:27:06,670 --> 00:27:08,800
Wat dit gedoen het, is dit gekies
al cat elemente.

553
00:27:08,800 --> 00:27:10,170
En dan is dit toegepas word.

554
00:27:10,170 --> 00:27:15,884
Soort van, die eiendom van kleur
is gelyk aan rooi.

555
00:27:15,884 --> 00:27:21,070
>> MIKE RIZZO: Net so kan ons ook verander
die werklike inhoud van wat

556
00:27:21,070 --> 00:27:24,870
wys op die HTML van die bladsy, wat
is werklik 'n koel, want dit beteken dat jou

557
00:27:24,870 --> 00:27:28,095
web bladsye kan nou heeltemal dinamiese
en het nie om staties te wees

558
00:27:28,095 --> 00:27:31,660
dat jy die druk van die gebruik van PHP
aan die begin van

559
00:27:31,660 --> 00:27:33,320
die bladsy gelaai word.

560
00:27:33,320 --> 00:27:36,810
So hier, as ons wou verander om die
werklike HTML van die bladsy, sou ons nou

561
00:27:36,810 --> 00:27:43,550
noem die HTML-funksie, wat dan net
inserts wat ons spesifiseer in

562
00:27:43,550 --> 00:27:45,390
daardie element dat ons gekies.

563
00:27:45,390 --> 00:27:49,810
So hier is ons kies element met
klas cat en dan sê dit is HTML

564
00:27:49,810 --> 00:27:52,200
dit is nou hallo wêreld.

565
00:27:52,200 --> 00:27:55,600
>> TOMAS Reimers: En as jy dink oor
wat nuttige toepassings van

566
00:27:55,600 --> 00:28:00,800
hierdie, hierdie CSS een, die eerste ding wat
jy kan begin om te dink oor is

567
00:28:00,800 --> 00:28:03,070
in terme van selfs drop down menus.

568
00:28:03,070 --> 00:28:08,350
Jy kan begin dinge soos om te doen wanneer
'n gebruiker oor die boonste gedeelte hang

569
00:28:08,350 --> 00:28:11,970
van 'n drop down, wat jy wil maak
die onderste deel sigbaar is.

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

571
00:28:12,540 --> 00:28:15,610
>> So in CSS, ons het eienskappe
iets sigbaar te maak.

572
00:28:15,610 --> 00:28:19,330
Dinge soos vertoon kolon geen
sou dit onsigbare.

573
00:28:19,330 --> 00:28:21,190
Wys blok sou maak dit sigbaar.

574
00:28:21,190 --> 00:28:25,860
Of selfs as jy wil eenvoudiger om te gaan, moet jy
het dinge soos sigbaarheid gelykes

575
00:28:25,860 --> 00:28:27,520
sigbaar, en die sigbaarheid gelyk versteek.

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

577
00:28:30,330 --> 00:28:34,780
>> En jy kan begin om dinge te implementeer
soos drop down menu regs

578
00:28:34,780 --> 00:28:38,410
nadat jy deur die idee van hoe
kan jy uitvind wanneer dit oopmaak,

579
00:28:38,410 --> 00:28:39,850
wat ons kry deur middel van baie kort.

580
00:28:39,850 --> 00:28:42,160
Maar ons kan begin om te sien
aansoeke van hierdie.

581
00:28:42,160 --> 00:28:45,540
In 'n soortgelyke sin, as jy was om te probeer
en te implementeer, kom ons sê, 'n chat

582
00:28:45,540 --> 00:28:48,620
enjin en jy wil 'n bietjie te maak
spraakborrel kom wanneer jy het

583
00:28:48,620 --> 00:28:52,880
het 'n nuwe boodskap, as jy een van die
Nuwe boodskap, kan jy 'n bietjie te maak

584
00:28:52,880 --> 00:28:55,890
spraakborrel kom deur die wysiging
die HTML van die bladsy, reg?

585
00:28:55,890 --> 00:29:00,540
Deur die toevoeging van ekstra toespraak borrel
met die ekstra teks in daar.

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

587
00:29:01,140 --> 00:29:07,750
>> Publiek: So jy sou dit binne insluit
die HTML-kode in soort van soos 'n

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

589
00:29:10,534 --> 00:29:12,940
>> MIKE RIZZO: Right.

590
00:29:12,940 --> 00:29:16,190
Ja, ons sal kry om daardie
in 'n bietjie.

591
00:29:16,190 --> 00:29:18,810
Ja, dit is 'n soortgelyke
bietjie te PHP.

592
00:29:18,810 --> 00:29:21,240
Nie presies dieselfde is.

593
00:29:21,240 --> 00:29:24,730
>> 'N Goeie onderskeid te maak is wat hierdie
is eintlik die wysiging wanneer ons wysig

594
00:29:24,730 --> 00:29:28,480
die bladsy, want dit gaan nie te wees
die wysiging van die werklike lêer wat tans

595
00:29:28,480 --> 00:29:31,380
gehou op die bediener omdat die wêreld
moet nie toestemming

596
00:29:31,380 --> 00:29:32,610
jou lêers te wysig.

597
00:29:32,610 --> 00:29:36,080
Dit is net die redigering wat op die bladsy
en wat daar binne vertoon

598
00:29:36,080 --> 00:29:36,950
die leser.

599
00:29:36,950 --> 00:29:40,340
So as jy die bladsy te herlaai na,
sê, iets wat die verwydering soos ons

600
00:29:40,340 --> 00:29:44,730
sien wat ons kan doen met die verwyder oproep,
dat die ding sal dan weer verskyn.

601
00:29:44,730 --> 00:29:48,590
>> TOMAS Reimers: So een manier om te dink oor
dit is as ek jou rekenaar en

602
00:29:48,590 --> 00:29:50,170
Mike is, soort van die bediener.

603
00:29:50,170 --> 00:29:53,850
Wat gaan gebeur is ek gaan
vra Mike, hey, kan ek 'n afskrif van die

604
00:29:53,850 --> 00:29:54,630
Hierdie webblad?

605
00:29:54,630 --> 00:29:56,190
En hy sal vir my 'n afskrif van dit.

606
00:29:56,190 --> 00:29:57,430
>> Nee, dit is nie die oorspronklike ding.

607
00:29:57,430 --> 00:29:58,620
Dit is net 'n kopie.

608
00:29:58,620 --> 00:30:00,450
En dan sal dit wees soos, ag,
daar is JavaScript hier.

609
00:30:00,450 --> 00:30:02,450
Dit is duidelik dat, moet ek verander die
bladsy te wees soos hierdie.

610
00:30:02,450 --> 00:30:04,250
En ek is die wysiging van jou kopie.

611
00:30:04,250 --> 00:30:05,920
>> Maar dit is nie die bewerkstelliging
die werklike kopie.

612
00:30:05,920 --> 00:30:08,480
En as ek hom weer vra
verfris die bladsy -

613
00:30:08,480 --> 00:30:10,060
hey, kan ek nog 'n skoon kopie -

614
00:30:10,060 --> 00:30:11,440
Hy gaan my te gee
'n skoon kopie.

615
00:30:11,440 --> 00:30:14,240
En dan, ek gaan dieselfde ding om te doen
soos: Ag, hierdie JS hier wat sê

616
00:30:14,240 --> 00:30:14,866
om dit te wysig.

617
00:30:14,866 --> 00:30:17,460
En ek gaan om te hou om dit te doen.

618
00:30:17,460 --> 00:30:20,930
>> MIKE RIZZO: So 'n baie cool ding
wat jy kan doen met jQuery is

619
00:30:20,930 --> 00:30:24,350
eintlik verskillende tipes voeg
van die animasie aan jou bladsy.

620
00:30:24,350 --> 00:30:27,440
Ek weet nie of jy al ooit gesien het, waar
jy probeer om 'n 'n vorm invul

621
00:30:27,440 --> 00:30:31,250
aanlyn en jy nie invul
die dinge reg.

622
00:30:31,250 --> 00:30:33,440
So 'n klein ding afgly
aan die bokant en sê jy

623
00:30:33,440 --> 00:30:34,820
nie korrek gedoen.

624
00:30:34,820 --> 00:30:36,260
Probeer asseblief weer.

625
00:30:36,260 --> 00:30:37,890
En dan, kan dit selfs net skuif.

626
00:30:37,890 --> 00:30:40,710
>> Blyk jQuery het in funksies gebou
wat al van daardie

627
00:30:40,710 --> 00:30:44,180
animasie baie, baie maklik.

628
00:30:44,180 --> 00:30:46,750
So is daar eers die vervaag
out funksie, wat

629
00:30:46,750 --> 00:30:47,710
jy kan 'n beroep op iets.

630
00:30:47,710 --> 00:30:55,650
En dit is 'n manier om die CSS van te verander
dat element in 'n geanimeerde manier.

631
00:30:55,650 --> 00:30:58,480
So dit neem net element
jy noem dit vervaag op.

632
00:30:58,480 --> 00:31:03,990
En dan, dit is ondeursigtigheid verander stadig
totdat dit gaan heeltemal deursigtig.

633
00:31:03,990 --> 00:31:07,330
>> TOMAS Reimers: Die ander gewilde een
is om af te skuif, wat sal maak

634
00:31:07,330 --> 00:31:08,800
iets vertoon deur in te skuif dit af.

635
00:31:08,800 --> 00:31:12,840
So in die geval van die drop down menu,
Weereens, wanneer ons geleer hoe om op te spoor

636
00:31:12,840 --> 00:31:15,310
Wanneer dit is hovered oor,
jy kan net vertel dat dit onder

637
00:31:15,310 --> 00:31:16,910
deel gly nou.

638
00:31:16,910 --> 00:31:19,270
En dan, wil dit voorkom
deur gly.

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

640
00:31:22,042 --> 00:31:26,590
>> MIKE RIZZO: En dan, as jy net
'n soort van animasie in gedagte dat

641
00:31:26,590 --> 00:31:29,080
jQuery nie noodwendig verskaf.

642
00:31:29,080 --> 00:31:32,690
Byvoorbeeld, kom ons sê jQuery
het jy met 'n skyfie

643
00:31:32,690 --> 00:31:33,750
af en skuif op.

644
00:31:33,750 --> 00:31:36,740
Wel, kom ons sê jy wil gly
iets in die linker-of vanaf

645
00:31:36,740 --> 00:31:39,880
die regte soort van soos die CS50
Hoofblad doen wanneer

646
00:31:39,880 --> 00:31:42,080
gaan jy na 'n nuwe paneel.

647
00:31:42,080 --> 00:31:45,030
Jy sal dan waarskynlik moet
dit self implementeer die gebruik van die

648
00:31:45,030 --> 00:31:49,310
lewendig funksie binne jQuery.

649
00:31:49,310 --> 00:31:51,350
>> So insgelyks, jy moet net lewendig.

650
00:31:51,350 --> 00:31:55,850
En dan, binne dit wat dit neem om 'n
Woordeboek van die verskillende waardes

651
00:31:55,850 --> 00:31:57,340
dat jy veronderstel is om te slaag.

652
00:31:57,340 --> 00:32:06,960
So hier, as ons wou animeer die
element cat sodanig dat sy breedte óf

653
00:32:06,960 --> 00:32:10,880
uitsit of kontrakte tot 80 pixels,
afhangende van wat dit tans is.

654
00:32:10,880 --> 00:32:14,100
Ons wil net gebeur dat as
die argument binne is.

655
00:32:14,100 --> 00:32:18,060
>> Animeer ook 'n paar ander argumente
dat jy dit kan slaag, byvoorbeeld,

656
00:32:18,060 --> 00:32:21,150
die spoed van die animasie
wat jy wil om dit te gee.

657
00:32:21,150 --> 00:32:26,220
En om dit te doen, sou ek net sê
vinnig Google jQuery lewendig.

658
00:32:26,220 --> 00:32:31,710
En dan, die opvoeding van hierdie bladsy, jy kan
sien dit is 'n klomp van die verskillende

659
00:32:31,710 --> 00:32:33,560
eienskappe wat jy dit kan slaag.

660
00:32:33,560 --> 00:32:35,990
>> En ek u aanmoedig om - wanneer jy kom
oor iets wat jy nie doen nie

661
00:32:35,990 --> 00:32:40,390
weet of wil net meer oor 'n leer
spesifieke metode wat jy kan bel

662
00:32:40,390 --> 00:32:41,270
oor iets -

663
00:32:41,270 --> 00:32:44,440
net vir Google dit. jQuery is uiters
goed gedokumenteer.

664
00:32:44,440 --> 00:32:49,140
En dikwels is daar 'n baie
voorbeelde dat hulle voorsiening te maak vir jou.

665
00:32:49,140 --> 00:32:52,470
As ons rol af -

666
00:32:52,470 --> 00:32:53,720
pad af -

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

668
00:32:57,660 --> 00:32:59,190
wat ons kan gebruik, as well.

669
00:32:59,190 --> 00:33:02,480
>> Weereens, wanneer 'n ontwikkelaar eintlik gaan
deur die moeite skryf van 'n

670
00:33:02,480 --> 00:33:05,810
biblioteek, hulle gewoonlik wil
iemand om dit te gebruik.

671
00:33:05,810 --> 00:33:09,400
So saam gaan
'n dokumentasie.

672
00:33:09,400 --> 00:33:12,270
En dat dokumentasie kan gewoonlik
gevind op die projek bladsy, wat

673
00:33:12,270 --> 00:33:14,970
Hoekom het ons julle dit dat die oorspronklike werf in
die begin, wat links jy na die

674
00:33:14,970 --> 00:33:18,080
projek bladsye sodat jy kan
sien dat dokumentasie.

675
00:33:18,080 --> 00:33:22,670
>> Tipies, die projek bladsy in die geval
van [onhoorbaar], is dit vir julle gesê het die

676
00:33:22,670 --> 00:33:23,940
name van die klasse.

677
00:33:23,940 --> 00:33:27,250
In die geval van JavaScript, dit gee
jy die naam van die funksies.

678
00:33:27,250 --> 00:33:35,310
By the way, as ons blaai na die top,
'n vinnige kant nota op funksies is

679
00:33:35,310 --> 00:33:39,080
wanneer jy sien 'n funksie geïmplementeer
soos hierdie met die harde

680
00:33:39,080 --> 00:33:43,800
tussen hakies in die middel, wat beteken dat
dat eiendom is opsioneel.

681
00:33:43,800 --> 00:33:44,750
Net 'n kop.

682
00:33:44,750 --> 00:33:47,350
Ek het gesien hoe 'n baie vrae
oor dat.

683
00:33:47,350 --> 00:33:50,370
>> So hier kan ons sien dat die
animate neem eiendomme

684
00:33:50,370 --> 00:33:51,800
as 'n noodsaaklike argument.

685
00:33:51,800 --> 00:33:54,870
En alles is opsioneel.

686
00:33:54,870 --> 00:33:56,136
Kant nota -

687
00:33:56,136 --> 00:33:58,090
jy kan dink van hierdie, sorteer
van, soos man bladsye.

688
00:33:58,090 --> 00:34:04,275
Man bladsye dokumentasie vir C en
vir 'n baie ander dinge, as well.

689
00:34:04,275 --> 00:34:11,020
>> MIKE RIZZO: So het ons geleer hoe om te
verander verskillende CSS op die bladsy,

690
00:34:11,020 --> 00:34:14,040
lewendig, en verwyder voeg HTML.

691
00:34:14,040 --> 00:34:16,889
Maar een van die werklik mees kragtige
dinge oor JavaScript

692
00:34:16,889 --> 00:34:18,270
en veral jQuery -

693
00:34:18,270 --> 00:34:22,570
wat dit kan jy doen, is om te reageer op
verskillende elemente wat gebeur.

694
00:34:22,570 --> 00:34:25,380
Byvoorbeeld, ons het hier
'n gebeurtenis hanteerder.

695
00:34:25,380 --> 00:34:28,210
En dit beteken dat net wanneer hierdie
gebeurtenis, ons hanteer dit in 'n

696
00:34:28,210 --> 00:34:29,280
sekere manier.

697
00:34:29,280 --> 00:34:35,159
>> So hier is die generiese jQuery gebeurtenis
hanteerder is die dot op.

698
00:34:35,159 --> 00:34:42,949
En dan, die eerste ding wat jy verskaf
is wat geval dit moet

699
00:34:42,949 --> 00:34:43,810
word luister na.

700
00:34:43,810 --> 00:34:45,610
So hier is, is dit die kliek wat
ons wag vir.

701
00:34:45,610 --> 00:34:49,250
>> TOMAS Reimers: Alternatiewelik, jy het
op hover, wat is 'n baie gewilde een.

702
00:34:49,250 --> 00:34:52,000
So terug na my drop down menu idee.

703
00:34:52,000 --> 00:34:54,239
Jy sal die boonste een op hover.

704
00:34:54,239 --> 00:34:56,096
En dan kan jy dit verander.

705
00:34:56,096 --> 00:34:56,830
>> MIKE RIZZO: Right.

706
00:34:56,830 --> 00:35:01,680
En dan, wanneer dit gebeur, is dit net
voer die funksie wat ons dit gee

707
00:35:01,680 --> 00:35:05,080
as 'n argument en dat
dit waarskuwings hallo of hi.

708
00:35:05,080 --> 00:35:08,900
>> TOMAS Reimers: So in die geval van
JavaScript, dit is 'n plek wat ons nodig het om te

709
00:35:08,900 --> 00:35:12,970
verwyder ons van C. Ons kan eintlik
neem funksies as argumente.

710
00:35:12,970 --> 00:35:15,940
En daar is 'n baie baie
komplekse maniere om dit te doen.

711
00:35:15,940 --> 00:35:17,940
Ons gaan een manier te bevorder,
wat jy kan definieer die

712
00:35:17,940 --> 00:35:19,270
funksioneer reg daar.

713
00:35:19,270 --> 00:35:22,540
>> So wanneer jy vra vir 'n funksie as
'n parameter, jy basies is net

714
00:35:22,540 --> 00:35:24,500
gaan om die funksie te definieer
op die plek.

715
00:35:24,500 --> 00:35:27,090
En die manier waarop jy 'n funksie definieer
in JavaScript is jy

716
00:35:27,090 --> 00:35:28,820
letterlik sê funksie.

717
00:35:28,820 --> 00:35:30,130
Dan, gewoonlik, die naam
van die funksie.

718
00:35:30,130 --> 00:35:32,510
Maar ons gaan nooit te verwys
hierdie funksie weer.

719
00:35:32,510 --> 00:35:34,040
So laat ons dit naamloos.

720
00:35:34,040 --> 00:35:40,440
>> Toe het die hakies, dan is die krullerige
draadjies, en dan die kode binne daardie.

721
00:35:40,440 --> 00:35:42,540
So ons dit verstaan ​​kan
'n bietjie verwarrend.

722
00:35:42,540 --> 00:35:45,180
So ons gee jou die algemene vorm van
Wat 'n event handler lyk

723
00:35:45,180 --> 00:35:47,790
hieronder, wat is op die gebeure.

724
00:35:47,790 --> 00:35:50,598
En dan, jou kode binne-in daardie.

725
00:35:50,598 --> 00:35:52,478
>> MIKE RIZZO: Is daar enige
vrae oor hierdie?

726
00:35:52,478 --> 00:35:54,818
Dit kan 'n bietjie verwarrend
die eerste keer wat jy dit sien.

727
00:35:54,818 --> 00:35:57,550
>> TOMAS Reimers: jy eintlik wil
open 'n lêer en wys vir hulle

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

729
00:35:58,155 --> 00:35:59,853
>> MIKE RIZZO: Ja, laat ons dit doen.

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

731
00:36:00,256 --> 00:36:02,490
>> TOMAS Reimers: So nou is ons
in die toestel.

732
00:36:02,490 --> 00:36:07,730
En wat ons gedoen het, is ons geneem het om die
vryheid van die skep van beide 'n index.html

733
00:36:07,730 --> 00:36:10,100
lêer, wat skakel na
'n JavaScript-lêer.

734
00:36:10,100 --> 00:36:12,880
En ons kan oopmaak om die -

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

736
00:36:15,170 --> 00:36:16,630
Wel, dit doen twee dinge.

737
00:36:16,630 --> 00:36:18,350
>> Die eerste is om dit te koppel
die JavaScript-lêer.

738
00:36:18,350 --> 00:36:21,250
En ons sal sien dat hier.

739
00:36:21,250 --> 00:36:25,340
Ons sien dat in die hoof van die
HTML-dokument, veral.

740
00:36:25,340 --> 00:36:28,260
So jy sal daar sien dat
Ons, basies, sê SRC,

741
00:36:28,260 --> 00:36:29,590
wat staan ​​vir bron.

742
00:36:29,590 --> 00:36:30,630
En dit is die URL.

743
00:36:30,630 --> 00:36:32,700
>> So hier kan jy sê ons het
ingesluit jQuery.

744
00:36:32,700 --> 00:36:34,290
En ons het ook ingesluit skrifte.

745
00:36:34,290 --> 00:36:40,630
Die ander manier JavaScript in te sluit is
dat jy kan 'n geïntegreerde script sluit

746
00:36:40,630 --> 00:36:44,600
tag as ons het aan die onderkant waar dit
sê script tipe is teks JavaScript.

747
00:36:44,600 --> 00:36:46,960
>> So ons sê, luister, ons is
oor 'n script te sluit.

748
00:36:46,960 --> 00:36:51,890
En die tipe van die script is
JavaScript, wat 'n tipe van die teks.

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

750
00:36:52,550 --> 00:36:56,490
>> MIKE RIZZO: So dit, soort van, kry om te
jou vraag oor hoe ons sluit

751
00:36:56,490 --> 00:37:02,340
JavaScript in ons lêers want as ons
het PHP, ons doen iets soos hierdie.

752
00:37:02,340 --> 00:37:07,570
En dan, het ons PHP funksies -
Kom ons sê aandele doen

753
00:37:07,570 --> 00:37:09,150
iets wat -

754
00:37:09,150 --> 00:37:10,490
gaan daar in.

755
00:37:10,490 --> 00:37:13,860
Maar nou het ons die script tags
dat ons dit gee, wat eintlik

756
00:37:13,860 --> 00:37:19,470
deel van die HTML self, want dit is nie
vervalsen om 'n HTML-lêer soos dit

757
00:37:19,470 --> 00:37:25,070
is in PHP, want as jy eintlik gaan in
en kyk na die bron van die bladsy

758
00:37:25,070 --> 00:37:28,430
sien jy die script tags daar
met die JavaScript verband hou met

759
00:37:28,430 --> 00:37:29,800
hulle in daardie.

760
00:37:29,800 --> 00:37:31,760
>> So dan, as ons wou
skryf sommige JavaScript -

761
00:37:31,760 --> 00:37:37,110
Laat ons net sê ons wou liggaam te verander
want nou het ek nie

762
00:37:37,110 --> 00:37:40,020
enige ander etikette wat ek kan regtig
wysig buiten liggaam.

763
00:37:40,020 --> 00:37:42,450
Laat ons net sê ek wou
verander die CSS van daardie.

764
00:37:42,450 --> 00:37:46,190
So ons sal voortgaan en verandering
die kleur van om dit te red.

765
00:37:46,190 --> 00:37:47,380
>> So ek spaar die lêer.

766
00:37:47,380 --> 00:37:52,700
Kom ons gaan terug na ons webblad te gaan, verfris,
en dit doen dit outomaties

767
00:37:52,700 --> 00:37:55,920
omdat dit nie lyk soos dit het gewag
op alle want ons was nie luister

768
00:37:55,920 --> 00:37:59,450
vir 'n gebeurtenis of iets soos dit.

769
00:37:59,450 --> 00:38:02,800
>> TOMAS Reimers: So as ons gaan terug na daardie
lêer in die besonder - die HTML

770
00:38:02,800 --> 00:38:04,710
File - wat jy gaan
te sien is ons het -

771
00:38:04,710 --> 00:38:06,810
onthou dat dit gelaai is,
soort, chronologies.

772
00:38:06,810 --> 00:38:09,910
So het ons die eerste keer die kop.
dit laai die twee lêers.

773
00:38:09,910 --> 00:38:10,800
Dan gaan ons na die liggaam.

774
00:38:10,800 --> 00:38:11,640
En ons sien hallo wêreld.

775
00:38:11,640 --> 00:38:13,030
So het ons lewer hallo wêreld.

776
00:38:13,030 --> 00:38:15,240
>> En dan is die laaste ding wat ons het
is ons die script tag.

777
00:38:15,240 --> 00:38:20,880
So loop die script tag, want dit is
nie vertel dit om te wag vir iets.

778
00:38:20,880 --> 00:38:24,700
En dit is die mees basiese
manier JavaScript om te hardloop.

779
00:38:24,700 --> 00:38:29,200
>> Met wat gesê het, kan jy die script
merk in die kop net

780
00:38:29,200 --> 00:38:31,240
hierdie punt te wys?

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

782
00:38:34,450 --> 00:38:35,700
En uit te voer.

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

784
00:38:38,880 --> 00:38:41,070
Ons gaan om te sien dat dit
het nie die kleur verander.

785
00:38:41,070 --> 00:38:44,210
En dit is een van die probleme van
JavaScript is dat dinge is gelaai

786
00:38:44,210 --> 00:38:45,930
in 'n chronologiese volgorde.

787
00:38:45,930 --> 00:38:49,750
>> So teen die tyd dat die kode
hardloop, het ons gekies -

788
00:38:49,750 --> 00:38:52,530
gaan terug -

789
00:38:52,530 --> 00:38:53,670
die liggaam tag.

790
00:38:53,670 --> 00:38:57,560
Die liggaam tag nog nie bestaan ​​nie, want
JavaScript is in lyn met HTML.

791
00:38:57,560 --> 00:39:01,790
So het die leser is soos kies liggaam.

792
00:39:01,790 --> 00:39:02,760
Daar is nie so iets nie.

793
00:39:02,760 --> 00:39:03,600
Sodat ons kan ignoreer nie.

794
00:39:03,600 --> 00:39:05,330
En ons hou gaan.

795
00:39:05,330 --> 00:39:07,200
>> En dan definieer ons 'n liggaam tag.

796
00:39:07,200 --> 00:39:09,670
Maar wat nooit opgedateer.

797
00:39:09,670 --> 00:39:12,560
So wanneer jy die uitvoering script
tags, maak seker dat jy plaas

798
00:39:12,560 --> 00:39:15,502
na die liggaam tag.

799
00:39:15,502 --> 00:39:16,820
Volgende skuif.

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

801
00:39:17,830 --> 00:39:19,330
So het ons iets verander.

802
00:39:19,330 --> 00:39:21,910
Maar dit het nie lyk soos dit het gereageer op
ons by al omdat dit net soort van

803
00:39:21,910 --> 00:39:24,150
het dit so gou as wat dit laai die bladsy.

804
00:39:24,150 --> 00:39:27,700
So nou, in plaas van om dit te doen, waarom
ons nie voeg 'n gebeurtenis hanteerder.

805
00:39:27,700 --> 00:39:31,020
>> So laat ons iets doen
na die liggaam weer.

806
00:39:31,020 --> 00:39:33,490
En kom ons sê ons doen dit op -

807
00:39:33,490 --> 00:39:34,500
kliek.

808
00:39:34,500 --> 00:39:35,750
Ons sal 'n funksie voeg.

809
00:39:35,750 --> 00:39:38,270

810
00:39:38,270 --> 00:39:39,690
>> TOMAS Reimers: Kom ons verander
dit is die kleur rooi weer.

811
00:39:39,690 --> 00:39:40,000
Hoekom nie?

812
00:39:40,000 --> 00:39:41,680
>> MIKE RIZZO: Ja, laat se verandering
sy 'n rooi kleur te weer.

813
00:39:41,680 --> 00:39:46,310

814
00:39:46,310 --> 00:39:46,900
Alle regte.

815
00:39:46,900 --> 00:39:48,480
So laat herlaai die bladsy.

816
00:39:48,480 --> 00:39:49,530
OK, sien ons -

817
00:39:49,530 --> 00:39:52,290
as wat verwag is, beteken dit nie rooi draai nie.

818
00:39:52,290 --> 00:39:53,610
Maar dan kan ons voortgaan en klik daarop.

819
00:39:53,610 --> 00:39:54,270
>> TOMAS Reimers: En dit rooi.

820
00:39:54,270 --> 00:39:56,090
>> MIKE RIZZO: En is dit nie
rooi as wat verwag is.

821
00:39:56,090 --> 00:39:59,010
>> TOMAS Reimers: En ons kan sien hoe
ons kan begin baie basies te bou

822
00:39:59,010 --> 00:40:00,170
interaksie.

823
00:40:00,170 --> 00:40:03,850
Ander dinge wat ons dalk wil doen, is,
As ons nie wil hê die liggaam te maak

824
00:40:03,850 --> 00:40:07,230
kleur rooi, kom ons maak die HTML
agtergrond kleur rooi.

825
00:40:07,230 --> 00:40:08,480
Net so is dit dieselfde CSS.

826
00:40:08,480 --> 00:40:19,960

827
00:40:19,960 --> 00:40:23,320
>> En wanneer ons dit verander, kan ons sien dat hierdie
baie dramatiese effek van die verandering van die

828
00:40:23,320 --> 00:40:25,510
hele bladsy.

829
00:40:25,510 --> 00:40:29,100
So weer, as jy die uitvoering van dinge,
jy kan een komponent het

830
00:40:29,100 --> 00:40:30,150
wat bedoel is om gedruk word nie.

831
00:40:30,150 --> 00:40:32,710
Kom ons sê 'n uitgang knoppie en
'n hele ander komponent,

832
00:40:32,710 --> 00:40:33,830
wat bedoel is om te reageer.

833
00:40:33,830 --> 00:40:35,755
So jy sal 'n venster verwyder
wanneer dit gebeur.

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
Net as 'n voorbeeld -

837
00:40:42,200 --> 00:40:44,400
jy het nie hierdie vroeër te sien -

838
00:40:44,400 --> 00:40:47,500
Ek sal net wys hoe dit lyk
soos wanneer ons iets weg te steek.

839
00:40:47,500 --> 00:40:52,220
So ek sal voort te gaan en nie skuif.

840
00:40:52,220 --> 00:40:54,440
>> TOMAS Reimers: Wil om te draai in 'n
paragraaftipe voordat ons dit doen?

841
00:40:54,440 --> 00:40:55,132
>> MIKE RIZZO: OK.

842
00:40:55,132 --> 00:40:59,135
Ja, hoekom nie ons doen dit net so
ons kan dit kies 'n bietjie meer.

843
00:40:59,135 --> 00:41:00,490
>> TOMAS Reimers: En laat ons
gee dit 'n klas.

844
00:41:00,490 --> 00:41:01,740
>> MIKE RIZZO: Ja.

845
00:41:01,740 --> 00:41:06,575

846
00:41:06,575 --> 00:41:09,920
OK, so laat ons sien.

847
00:41:09,920 --> 00:41:14,820
In plaas van die keuse van die werklike liggaam
nou, ek sal net kies om alles met

848
00:41:14,820 --> 00:41:18,780
klas hallo, wat ons hier
net een ding.

849
00:41:18,780 --> 00:41:20,900
Daarom moet ons nie hoef te
bekommerd wees oor wat.

850
00:41:20,900 --> 00:41:23,080
>> So ek sal dit verfris.

851
00:41:23,080 --> 00:41:24,230
Ek sal voort te gaan en kliek om dit.

852
00:41:24,230 --> 00:41:27,890
En dit, soort van, het 'n vreemde skyfie
up ding, wat nie sien dat

853
00:41:27,890 --> 00:41:29,580
aantreklik.

854
00:41:29,580 --> 00:41:31,060
Die algemeen, hulle kyk mooi mooi.

855
00:41:31,060 --> 00:41:32,720
Ek dink hierdie - vir 'n paar
rede - het nie.

856
00:41:32,720 --> 00:41:36,640
Ek sal net nie 'n fade out so
kan jy kyk na dit ook.

857
00:41:36,640 --> 00:41:38,100
Baie lekkerder.

858
00:41:38,100 --> 00:41:41,150
>> En dan, as ek oop die JavaScript
troos weer en ons wil om te sien wat

859
00:41:41,150 --> 00:41:43,900
dit lyk soos wanneer ons dit vervaag in

860
00:41:43,900 --> 00:41:46,920
Nou, ek het net noem vervaag in op.

861
00:41:46,920 --> 00:41:48,830
En dit vervaag terug in

862
00:41:48,830 --> 00:41:56,150
>> Net so is, kan ons eintlik ook slaag
'n argument te vervaag in of vervaag,

863
00:41:56,150 --> 00:41:57,640
wat is, soort van, die spoed van dit.

864
00:41:57,640 --> 00:42:02,220
So laat ons gaan voort en sê wat ons wil
dit om stadig te gaan vervaag in

865
00:42:02,220 --> 00:42:04,250
So ek dink dit nog steeds lyk
redelik vinnig.

866
00:42:04,250 --> 00:42:06,180
Maar dit was stadiger as voorheen.

867
00:42:06,180 --> 00:42:10,340
>> TOMAS Reimers: En as jy wil om uit te vind
meer uit oor hierdie dinge, weer,

868
00:42:10,340 --> 00:42:13,410
gaan net na die jQuery dokumentasie,
wat ons julle gegee het, en lees

869
00:42:13,410 --> 00:42:13,735
deur middel van hierdie.

870
00:42:13,735 --> 00:42:15,790
Hulle dokumenteer hul funksies
ongelooflik goed.

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
So ek dink laat ons terug na hierdie gaan.

874
00:42:21,560 --> 00:42:23,490
En ons kan praat oor ons laaste bladsy.

875
00:42:23,490 --> 00:42:24,690
Wel, ons kan voltooi met Skoenlus.

876
00:42:24,690 --> 00:42:27,140
En dan sal ons dit oopmaak
vir 'n paar vrae.

877
00:42:27,140 --> 00:42:30,180
En as julle enige idees wat
jy wil om te probeer om te gooi en te sien

878
00:42:30,180 --> 00:42:34,150
As ons hulle kan implementeer met
JavaScript vinnig.

879
00:42:34,150 --> 00:42:37,890
>> So regtig vinnig oor Skoenlus, wat
is outomaties ingesluit in

880
00:42:37,890 --> 00:42:41,700
jou laaste probleem wat in die CSS-gids
en eintlik gekoppel aan jou

881
00:42:41,700 --> 00:42:43,190
Header.php.

882
00:42:43,190 --> 00:42:46,740
So jy klasse kon bygevoeg het dat
gedefinieer word binne Skoenlus om dit te.

883
00:42:46,740 --> 00:42:50,490
En dit sal outomaties styl
daardie dinge dienooreenkomstig.

884
00:42:50,490 --> 00:42:54,550
>> TOMAS Reimers: So Skoenlus is 'n baie
magiese ding wat ontwikkel is deur die mense

885
00:42:54,550 --> 00:42:55,340
op Twitter.

886
00:42:55,340 --> 00:42:57,230
En wat dit veronderstel was om te doen, was -

887
00:42:57,230 --> 00:43:00,740
voor webwerwe was regtig moeilik om te maak
kyk mooi, veral wanneer ons moes

888
00:43:00,740 --> 00:43:02,200
'n baie algemene komponente.

889
00:43:02,200 --> 00:43:04,770
So 'n baie knoppies op die
web gekyk dieselfde.

890
00:43:04,770 --> 00:43:08,960
>> Baie van die teks velde kan gerig word aan
lyk baie beter as die standaard teks

891
00:43:08,960 --> 00:43:13,620
gebied jy weet waarskynlik van werklik
ou webtuistes of regtig swak gemaak

892
00:43:13,620 --> 00:43:18,210
webtuistes, wat net lyk soos letterlike
teks bokse sonder enige vorm van teks

893
00:43:18,210 --> 00:43:21,190
skaduwee of enige soort van mooi uiteensetting.

894
00:43:21,190 --> 00:43:24,540
So, wat Skoenlus gedoen het, was dit gesê, goed,
Ons het 'n baie algemene style.

895
00:43:24,540 --> 00:43:28,210
Hoekom dit nie maak ons ​​'n gemeenskaplike stel van CSS
en 'n gemeenskaplike stel JavaScript as

896
00:43:28,210 --> 00:43:32,210
Wel, wat kan dit styl is en wat
kan gee mense dinge soos drop

897
00:43:32,210 --> 00:43:34,610
down menu, kan wat mense gee
dinge soos hulpwerkwoorde.

898
00:43:34,610 --> 00:43:38,580
>> Modale is wat oor die bladsy verskyn
wanneer dit streng gesproke

899
00:43:38,580 --> 00:43:41,090
iets wat verder verhinder
interaksie totdat jy

900
00:43:41,090 --> 00:43:43,110
interaksie met dit.

901
00:43:43,110 --> 00:43:45,820
Iets soos hierdie is, is jy seker
jy wil om hierdie saak te verwyder?

902
00:43:45,820 --> 00:43:49,100
Jy kan nie regtig iets anders doen
totdat jy sê ja of nee.

903
00:43:49,100 --> 00:43:52,720
>> Dit het al hierdie en dit verpak dit
saam en sê: Hier gaan ons.

904
00:43:52,720 --> 00:43:54,630
Mense kan nou gebruik nie.

905
00:43:54,630 --> 00:43:56,830
En jy kan dit oor
by getbootstrap.com.

906
00:43:56,830 --> 00:44:00,480
Dit is outomaties ingesluit binne
jou laaste probleem stel.

907
00:44:00,480 --> 00:44:04,160
En jy is meer as welkom om te
gebruik dit op jou finale projek.

908
00:44:04,160 --> 00:44:06,950
En as jy wil om dit te volg
skakel Skoenlus te kry.

909
00:44:06,950 --> 00:44:10,590

910
00:44:10,590 --> 00:44:15,700
>> Jy sal sien hier is die
Skoenlus CSS site.

911
00:44:15,700 --> 00:44:16,860
Jy sal sien Skoenlus.

912
00:44:16,860 --> 00:44:20,450
En as jy rol af, sal jy sien
hoe om dit te laai, hoe om te

913
00:44:20,450 --> 00:44:21,900
installeer dit, ensovoorts.

914
00:44:21,900 --> 00:44:24,700
>> MIKE RIZZO: en jy kan ook,
Interessant genoeg, pas dit aan

915
00:44:24,700 --> 00:44:27,770
wees watter soort temas
wat jy wil.

916
00:44:27,770 --> 00:44:31,270
Ek weet dit is iets wat ek gedoen het vir my
finale projek toe ek die klas

917
00:44:31,270 --> 00:44:32,050
is pas dit.

918
00:44:32,050 --> 00:44:34,540
'N ander weergawe van Skoenlus wat
het 'n ander kleur skema en

919
00:44:34,540 --> 00:44:36,700
verskillende vorms van 'n paar
verskillende dinge.

920
00:44:36,700 --> 00:44:38,250
So ek u aanmoedig om te speel met dit.

921
00:44:38,250 --> 00:44:39,440
Dit is soort van pret om te doen.

922
00:44:39,440 --> 00:44:43,230
>> TOMAS Reimers: Op soek na oor die top
weer, dit is baie soortgelyk aan die Font

923
00:44:43,230 --> 00:44:44,970
Awesome site.

924
00:44:44,970 --> 00:44:47,810
Baie van die dokumentasie sal begin
lyk soortgelyk wanneer jy

925
00:44:47,810 --> 00:44:48,940
gesien genoeg van dit.

926
00:44:48,940 --> 00:44:51,260
So hier het ons die CSS
komponent van hierdie.

927
00:44:51,260 --> 00:44:53,540
En jy sal sien hoe dit
Styl kan dinge.

928
00:44:53,540 --> 00:44:56,780
So as jy op tafels, byvoorbeeld,
jy kan onmiddellik 'n

929
00:44:56,780 --> 00:45:01,710
tafel mooi deur eenvoudig
die klas tafel om dit te.

930
00:45:01,710 --> 00:45:03,150
>> Dieselfde dinge vir knoppies.

931
00:45:03,150 --> 00:45:12,140
As jy net voeg die klas BTN en AP
standaard of BTN primêre, kan jy

932
00:45:12,140 --> 00:45:16,240
kry een van hierdie knoppies
met hierdie pre-gemaak style.

933
00:45:16,240 --> 00:45:18,570
En dan, as jy op soek is na
iets meer kompleks as net

934
00:45:18,570 --> 00:45:24,100
restyling wat w reeds het, oor op
die blad JavaScript oor die top ons

935
00:45:24,100 --> 00:45:25,120
het 'n klomp van die komponente.

936
00:45:25,120 --> 00:45:30,410
>> So hier het ons oorgange, hulpwerkwoorde,
oortjies eenvormige groottes, oortjies, en tooltips.

937
00:45:30,410 --> 00:45:35,530
'N Nutswenk is wat verskyn onder jou
muis wanneer jy hover oor iets.

938
00:45:35,530 --> 00:45:40,280
Popovers, waarskuwings, knope, opvoubare
accordeons is wat

939
00:45:40,280 --> 00:45:41,190
hulle gewoonlik genoem.

940
00:45:41,190 --> 00:45:43,045
Caroussels, wat flip
deur soos beelde.

941
00:45:43,045 --> 00:45:52,190

942
00:45:52,190 --> 00:45:54,840
>> So dit is die komponente
van Skoenlus.

943
00:45:54,840 --> 00:45:57,620
Ek wil u aanmoedig om
hoogs gaan kyk na hulle.

944
00:45:57,620 --> 00:46:01,780
Daar is 'n JavaScript-komponent
en 'n CSS komponent.

945
00:46:01,780 --> 00:46:03,880
Voel vry om dit te gebruik as jy wil.

946
00:46:03,880 --> 00:46:06,730
Ons gaan nie te veel gaan in hulle
omdat ons voel die dokumentasie

947
00:46:06,730 --> 00:46:09,360
is baie goed gedoen.

948
00:46:09,360 --> 00:46:10,540
En ja.

949
00:46:10,540 --> 00:46:14,500
Het jy enige vrae oor wat?

950
00:46:14,500 --> 00:46:19,430
>> MIKE RIZZO: So as 'n werklik 'n vinnige
kant, die ontwerp van hierdie webblad

951
00:46:19,430 --> 00:46:21,830
ons vinnig saam te stel vir
hierdie aanbieding is

952
00:46:21,830 --> 00:46:24,290
eintlik gedoen met behulp van Skoenlus.

953
00:46:24,290 --> 00:46:27,810
Soos jy kan sien, wanneer ons kliek op hierdie
verskillende oortjies, ons is nooit werklik

954
00:46:27,810 --> 00:46:30,750
verlaat die huidige index.html bladsy.

955
00:46:30,750 --> 00:46:36,400
So wat ons het, is verskillende divs
binne hierdie index.html.

956
00:46:36,400 --> 00:46:39,610
En dan, wanneer ons kliek 'n ander
blad, dit is net die verandering

957
00:46:39,610 --> 00:46:41,590
wat 'n mens se vertoning.

958
00:46:41,590 --> 00:46:47,390
>> So dit dienooreenkomstig posisioneer hulle
verander die HTML van die bladsy sodat

959
00:46:47,390 --> 00:46:52,330
die huidige blad gemerk as aktiewe so
dit anders en lyk verskyn

960
00:46:52,330 --> 00:46:52,820
baie mooi.

961
00:46:52,820 --> 00:46:57,260
>> TOMAS Reimers: So dit was al gedoen
sonder dat ons skryf byna enige CSS.

962
00:46:57,260 --> 00:47:01,440
Ons sien ook 'n kop-aan die bokant,
wat die kleure is deur ons.

963
00:47:01,440 --> 00:47:04,800
Maar die werklike sit dit op die
top van die bladsy en maak

964
00:47:04,800 --> 00:47:06,660
dit boek was Skoenlus.

965
00:47:06,660 --> 00:47:09,720
En dan, selfs vir 'n ander biblioteek - dit
is nie een het ons gepraat oor, maar een

966
00:47:09,720 --> 00:47:11,580
Jy kan Google as jy wil.

967
00:47:11,580 --> 00:47:15,130
Dit is prettify.js genoem.

968
00:47:15,130 --> 00:47:20,650
En dit sal sintaks verlig jou kode
vir jou met behulp van beide CSS en JavaScript.

969
00:47:20,650 --> 00:47:23,480

970
00:47:23,480 --> 00:47:27,070
>> Die laaste ding wat ons wil hê om te praat oor
Voordat ons jou uit in die

971
00:47:27,070 --> 00:47:30,620
wêreld te kyk na biblioteke om uit te vind
hoe om dit te gebruik en om, hopelik,

972
00:47:30,620 --> 00:47:34,640
Lees dokumentasie en kry wat jy
behoefte is hoe biblioteke te vind.

973
00:47:34,640 --> 00:47:37,000
So die eerste is ons is net
gaan Google om te stoot.

974
00:47:37,000 --> 00:47:37,810
Gaan Google.

975
00:47:37,810 --> 00:47:41,150
>> Dit is letterlik wat ons doen wanneer ons
nodig het om iets te doen, is ons Google.

976
00:47:41,150 --> 00:47:44,730
Is daar 'n JavaScript-biblioteek
laat my tyd in 'n te manipuleer

977
00:47:44,730 --> 00:47:45,400
nuttige manier?

978
00:47:45,400 --> 00:47:49,510
So as ek weet dat sommige gebruikers skep
'n rekening hier, en dit is die

979
00:47:49,510 --> 00:47:53,010
huidige tyd, hoe kan ek bereken die
verskil met wat sonder om te

980
00:47:53,010 --> 00:47:55,020
dit self bereken?

981
00:47:55,020 --> 00:47:59,630
So dit is eintlik 'n algemene ding,
JavaScript tyd biblioteek.

982
00:47:59,630 --> 00:48:02,440
En hier is ons Moment.js--
die mees gewilde een.

983
00:48:02,440 --> 00:48:06,530
>> As ons 'n biblioteek te manipuleer
iets soos kleur in staat wees om

984
00:48:06,530 --> 00:48:08,650
genereer 'n klomp van ewekansige kleure -

985
00:48:08,650 --> 00:48:10,660
moontlik, 'n te genereer
styl of iets -

986
00:48:10,660 --> 00:48:13,480
ons kan iets soos Google
JavaScript kleur biblioteek.

987
00:48:13,480 --> 00:48:15,620
En ek is seker ons sal pop-up met
'n duisend en een van hulle.

988
00:48:15,620 --> 00:48:18,290

989
00:48:18,290 --> 00:48:21,410
Jy is welkom om deur hulle te lees.

990
00:48:21,410 --> 00:48:24,610
>> So die meeste dinge - as jy dit vind -
gaan op een van die gasheer

991
00:48:24,610 --> 00:48:25,920
plekke wat gasheer kode.

992
00:48:25,920 --> 00:48:26,960
Hulle is 'n paar gewilde kinders.

993
00:48:26,960 --> 00:48:30,870
Die gewildste, deur
ver, is github.com.

994
00:48:30,870 --> 00:48:35,300
En as jy gaan na GitHub dit is eintlik
waar Norm is aangebied.

995
00:48:35,300 --> 00:48:36,950
So as jy wil om terug te gaan dat 'n mens.

996
00:48:36,950 --> 00:48:38,135
Wys hulle dat.

997
00:48:38,135 --> 00:48:40,516
>> MIKE RIZZO: En dit is eintlik waar
dit is ook die gasheer, as jy opgemerk.

998
00:48:40,516 --> 00:48:41,000
>> TOMAS Reimers: Ja.

999
00:48:41,000 --> 00:48:49,078
So as jy gaan oor te normaliseer
en gaan na die GitHub.

1000
00:48:49,078 --> 00:48:51,936
Was, is dat?

1001
00:48:51,936 --> 00:48:54,620
>> MIKE RIZZO: Daardie klein kat ding
is die GitHub simbool.

1002
00:48:54,620 --> 00:48:56,330
>> TOMAS Reimers: Oh.

1003
00:48:56,330 --> 00:49:02,180
So GitHub gebruik 'n metode genoem
Git te stoor kode.

1004
00:49:02,180 --> 00:49:05,150
Is jy nie weet wat dit is, of
dit bang jy, is dit goed.

1005
00:49:05,150 --> 00:49:16,100
Jy hoef nie te weet wat Git is
omdat GitHub het 'n knoppie Download

1006
00:49:16,100 --> 00:49:17,200
aan die onderkant regs.

1007
00:49:17,200 --> 00:49:21,350
>> Die ander nuttige ding om te weet
oor GitHub is die meeste produkte

1008
00:49:21,350 --> 00:49:23,200
sal 'n lees my.

1009
00:49:23,200 --> 00:49:25,400
En as hulle nie 'n webwerf, die
lees my sal praat oor hoe jy

1010
00:49:25,400 --> 00:49:28,310
installeer dit, hoe jy dit gebruik, wat dit
doen, ensovoorts, ensovoorts, ensovoorts.

1011
00:49:28,310 --> 00:49:31,033
Wat ons het basies al
loop jy deur.

1012
00:49:31,033 --> 00:49:32,326
>> MIKE RIZZO: Internet se beëindig.

1013
00:49:32,326 --> 00:49:34,020
>> TOMAS Reimers: Dit is fyn.

1014
00:49:34,020 --> 00:49:36,980
Die laaste twee dinge wat ons wou
om te praat oor -

1015
00:49:36,980 --> 00:49:38,750
Ons het gepraat oor Git -

1016
00:49:38,750 --> 00:49:40,290
is die oplos van probleme.

1017
00:49:40,290 --> 00:49:43,020
En hierdie een is nie so relevant is vir
die finale produk as dit

1018
00:49:43,020 --> 00:49:44,870
wanneer jy vertrek 50.

1019
00:49:44,870 --> 00:49:48,310
En wanneer jy loop in produkte
implementering van biblioteke of die uitvoering

1020
00:49:48,310 --> 00:49:50,230
jou eie projek, gaan jy
vrae te hê of jy

1021
00:49:50,230 --> 00:49:51,660
gaan om te kyk vir vrae.

1022
00:49:51,660 --> 00:49:53,060
>> Weereens, google dit.

1023
00:49:53,060 --> 00:49:54,630
Dit is letterlik wat ons doen.

1024
00:49:54,630 --> 00:49:56,400
Dit gaan klink dom.

1025
00:49:56,400 --> 00:49:58,310
Maar letterlik, ons google dit.

1026
00:49:58,310 --> 00:50:01,810
En weer, een van die eerste dinge
jy gewoonlik gehardloop het, is

1027
00:50:01,810 --> 00:50:06,550
stackoverflow.com, wat 'n wonderlike
vraag-en-antwoord oë.

1028
00:50:06,550 --> 00:50:10,530
>> Dit is wonderlik om beide want jy kan
plaas die vrae en kyk vir

1029
00:50:10,530 --> 00:50:12,760
antwoorde nie, maar ook omdat
dit het reeds 'n baie

1030
00:50:12,760 --> 00:50:14,590
pre-bevolk inhoud daar.

1031
00:50:14,590 --> 00:50:18,510
So gewoonlik As jy Google 'n ontwikkeling
vraag in die eerste

1032
00:50:18,510 --> 00:50:22,620
paar treffers wat jy kan reeds hardloop
in dit tydens jou probleem stelle.

1033
00:50:22,620 --> 00:50:27,840
>> En dan, die laaste ding wat regtig kort
is JSFIDDLE, wat is - wat ons vandag het

1034
00:50:27,840 --> 00:50:32,110
is besig met 'n baie werk met
JavaScript HTML CSS.

1035
00:50:32,110 --> 00:50:39,820
JSFIDDLE is 'n web artikels, wat basies
kan jy jou HTML te neem, JOU

1036
00:50:39,820 --> 00:50:42,820
JavaScript links onder, en
jou CSS bo regs.

1037
00:50:42,820 --> 00:50:47,840
En dan kan dit 'n vinnige lewer
daarvan om te sien hoe dit in wisselwerking.

1038
00:50:47,840 --> 00:50:50,500
Dit is baie nuttig wanneer mense probeer
'n bewys van die konsep te doen soos

1039
00:50:50,500 --> 00:50:52,910
dit is hoe jy
doen 'n drop down menu.

1040
00:50:52,910 --> 00:50:54,980
Miskien 'n vinnige ontbloot of wat ook al.

1041
00:50:54,980 --> 00:50:56,560
>> MIKE RIZZO: So laat ons gaan
voort en kliek op hierdie.

1042
00:50:56,560 --> 00:50:57,820
'N vinnige nota -

1043
00:50:57,820 --> 00:51:00,430
terwyl, voor ons was
doen op klik.

1044
00:51:00,430 --> 00:51:04,380
Blyk JCorey Korea het ook 'n ingeboude
in kliek event handler dat dit

1045
00:51:04,380 --> 00:51:07,020
gebruik net omdat dit figureer jy
gaan wil baie dinge om te doen

1046
00:51:07,020 --> 00:51:08,410
As jy wil iets om te klik.

1047
00:51:08,410 --> 00:51:09,690
>> Net so is, is dit ook 'n hover.

1048
00:51:09,690 --> 00:51:12,850
Maar die volle omvang van die te kry
diegene, kyk na die jQuery

1049
00:51:12,850 --> 00:51:15,320
dokumentasie en dit doen.

1050
00:51:15,320 --> 00:51:18,760
Ek het iets dom hier.

1051
00:51:18,760 --> 00:51:21,490
>> TOMAS Reimers: So ek het 'n baie vinnige
program hier, wat sê

1052
00:51:21,490 --> 00:51:22,640
knoppie op klik.

1053
00:51:22,640 --> 00:51:23,890
Dan het ons 'n lus vir.

1054
00:51:23,890 --> 00:51:26,810
Want ek is minder as 404.

1055
00:51:26,810 --> 00:51:29,530
Dit is net gaan om te pop-up
hierdie waarskuwing boodskappe.

1056
00:51:29,530 --> 00:51:33,425
>> MIKE RIZZO: En wat was die
kode 404 gestaan ​​in HTML?

1057
00:51:33,425 --> 00:51:34,145
Is daar iemand onthou?

1058
00:51:34,145 --> 00:51:35,450
Nie gevind nie, reg.

1059
00:51:35,450 --> 00:51:38,640

1060
00:51:38,640 --> 00:51:40,885
Chrome het ook bygevoeg hierdie netjiese
ding waar jy kan -

1061
00:51:40,885 --> 00:51:43,430
>> TOMAS Reimers: Omdat mense soos
Mike begin om dit te doen 'n baie en

1062
00:51:43,430 --> 00:51:47,230
irriterende gebruikers, wat dit moontlik maak
jy info te sien.

1063
00:51:47,230 --> 00:51:48,286
>> MIKE RIZZO: Ja.

1064
00:51:48,286 --> 00:51:50,690
>> TOMAS Reimers: Het ons enige vrae
hieroor, oor JavaScript

1065
00:51:50,690 --> 00:51:53,420
biblioteke, die vind van biblioteke, of
wat die web-ontwikkeling lyk

1066
00:51:53,420 --> 00:51:55,400
soos in die werklike wêreld?

1067
00:51:55,400 --> 00:51:56,880
Ons loop teen die tyd.

1068
00:51:56,880 --> 00:52:00,400
So ek is nie seker ons gaan
tyd om te implementeer te hê

1069
00:52:00,400 --> 00:52:02,290
tensy dit is regtig vinnig.

1070
00:52:02,290 --> 00:52:04,580
Is ons goeie?

1071
00:52:04,580 --> 00:52:08,110
>> MIKE RIZZO: Enigiets wat jy ouens wil
regtig vinnig in, soos om te sien twee

1072
00:52:08,110 --> 00:52:09,556
minute of minder?

1073
00:52:09,556 --> 00:52:10,870
>> TOMAS Reimers: Enigiets
ons kan verduidelik?

1074
00:52:10,870 --> 00:52:12,500
Hoe in te skryf -

1075
00:52:12,500 --> 00:52:13,260
>> Publiek: [onhoorbaar]?

1076
00:52:13,260 --> 00:52:16,070
>> MIKE RIZZO: Ja, so that's -

1077
00:52:16,070 --> 00:52:18,065
>> TOMAS Reimers: Jy kan net getref
Control-U op die webwerf.

1078
00:52:18,065 --> 00:52:19,275
>> MIKE RIZZO: O, ek het nie geweet dat.

1079
00:52:19,275 --> 00:52:22,290
>> TOMAS Reimers: Ek dink, ja.

1080
00:52:22,290 --> 00:52:23,300
Control-U. Ja.

1081
00:52:23,300 --> 00:52:25,970
>> MIKE RIZZO: O, so dit is die
kode vir die webwerf.

1082
00:52:25,970 --> 00:52:29,580
Maar as jy eintlik wil laai ons
lêers en alles is, word dit aangebied

1083
00:52:29,580 --> 00:52:32,650
op github.com

1084
00:52:32,650 --> 00:52:34,850
>> TOMAS Reimers: streep my naam -

1085
00:52:34,850 --> 00:52:38,504
Tomas Reimers - streep
CS50 koppelteken seminaar.

1086
00:52:38,504 --> 00:52:40,710
>> MIKE RIZZO: en jy kan
vind alles wat daar.

1087
00:52:40,710 --> 00:52:42,310
>> TOMAS Reimers: Dit is wat GitHub
lyk, deur die manier.

1088
00:52:42,310 --> 00:52:44,910
So weer, wanneer jy sien 'n oop bron
projek, tipies, hulle sal 'n gelees word

1089
00:52:44,910 --> 00:52:45,950
my daar wat jy kan lees.

1090
00:52:45,950 --> 00:52:50,200
En as jy terug gaan, sal jy agterkom dat
jy het die aflaai zip, wat sal

1091
00:52:50,200 --> 00:52:52,130
toelaat dat jy die bron te laai
kode te sluit in die

1092
00:52:52,130 --> 00:52:53,666
produk in jou eie ding.

1093
00:52:53,666 --> 00:52:56,890
>> MIKE RIZZO: Ja, en as ons net kliek
op die index.html regtig vinnig -

1094
00:52:56,890 --> 00:52:59,180
>> TOMAS Reimers: Jy sal hier te sien is die
bron-kode vir die webwerf.

1095
00:52:59,180 --> 00:53:02,016

1096
00:53:02,016 --> 00:53:06,070
>> MIKE RIZZO: Ook, ek het vergeet om reg te stoot
voor met die groot tafel is dit

1097
00:53:06,070 --> 00:53:09,860
ingesluit, maar daar is ook 'n tafel
van chmods dat ons ingesluit

1098
00:53:09,860 --> 00:53:13,210
Net vir jou duidelikheid.

1099
00:53:13,210 --> 00:53:16,940
Maar as ons blaai al die pad af na die
bodem, ons het nie eintlik baie doen

1100
00:53:16,940 --> 00:53:21,160
veel met die JavaScript
dinge glad met hierdie.

1101
00:53:21,160 --> 00:53:26,610
Dit is uitsluitlik van alles
anders wat ons gehad het.

1102
00:53:26,610 --> 00:53:28,730
>> So dankie ouens vir die komende
en luister.

1103
00:53:28,730 --> 00:53:29,830
Ons hoop dat hierdie was regtig nuttig.

1104
00:53:29,830 --> 00:53:33,020
Indien u enige JavaScript verwante
vrae of wil net om te praat oor

1105
00:53:33,020 --> 00:53:36,240
Wat anders soos wat ander cool dinge
wat jy kan doen met JavaScript, wil ons graag

1106
00:53:36,240 --> 00:53:37,186
met jou te praat.

1107
00:53:37,186 --> 00:53:40,010
>> TOMAS Reimers: As jy 'n vraag
oor jou projek of as dit kan wees

1108
00:53:40,010 --> 00:53:42,740
relevant, ons sal waarskynlik rondom stok
'n bietjie na hierdie.

1109
00:53:42,740 --> 00:53:44,640
Maar anders as dit, het
'n goeie naweek.

1110
00:53:44,640 --> 00:53:45,845
>> MIKE RIZZO: Ja, geniet.

1111
00:53:45,845 --> 00:53:46,120
Sien julle ouens.

1112
00:53:46,120 --> 00:53:47,370
>> TOMAS Reimers: Sien ya.

1113
00:53:47,370 --> 00:53:47,926