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

2
00:00:07,440 --> 00:00:08,180
>> TOMAS Reimers: Hei, alle sammen.

3
00:00:08,180 --> 00:00:09,250
Jeg heter Tomas Reimers.

4
00:00:09,250 --> 00:00:10,500
>> MIKE RIZZO: Og jeg er Mike Rizzo.

5
00:00:10,500 --> 00:00:12,990
>> TOMAS Reimers: Vi er to av CS50s TS.

6
00:00:12,990 --> 00:00:18,910
Og i dag er vi ledende seminaret på
Javascript og CSS for web apps.

7
00:00:18,910 --> 00:00:22,140
Hvis du ønsker å følge med, det
koblingen er rett der borte.

8
00:00:22,140 --> 00:00:25,190
Og har du lyst til å sette den opp
kort på datamaskinen?

9
00:00:25,190 --> 00:00:27,460
>> Det er linken.

10
00:00:27,460 --> 00:00:30,390
Det er et lite område, som har koblinger til
alle de ressursene vi skal være

11
00:00:30,390 --> 00:00:36,490
peke deg i dag og har også en rekke
nyttig informasjon som er skrevet av oss til

12
00:00:36,490 --> 00:00:39,680
Les mer i dybden når du går tilbake,
og du prøver å huske hva

13
00:00:39,680 --> 00:00:42,166
akkurat gjorde vi si, hva var du
snakker om, et cetera.

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

15
00:00:43,870 --> 00:00:44,890
Så la oss begynne.

16
00:00:44,890 --> 00:00:45,700
>> TOMAS Reimers: Så du ønsker å starte?

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

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

19
00:00:47,170 --> 00:00:51,730
Så vi først ønsket å starte med en bred
oversikt om internett og

20
00:00:51,730 --> 00:00:54,240
filtyper ved utformingen av nettsteder.

21
00:00:54,240 --> 00:00:57,550
Mens denne presentasjonen ønsker vi å
komme inn i Java mye mye

22
00:00:57,550 --> 00:01:00,320
senere, ønsket vi å starte med
bare, på en måte, som et fugleperspektiv

23
00:01:00,320 --> 00:01:03,270
av hva en nettside er, og hvordan
å tenke på å designe en

24
00:01:03,270 --> 00:01:04,800
Nettside for starten.

25
00:01:04,800 --> 00:01:08,370
>> Så dere, på dette punktet - med det
å være fredag ​​kveld - bør ha

26
00:01:08,370 --> 00:01:11,000
sendt inn CS50 finans
oppgavesett.

27
00:01:11,000 --> 00:01:15,260
Forhåpentligvis, som var en god smak
av hva web-programmering kan være.

28
00:01:15,260 --> 00:01:18,261
Men her vi ønsker å, på en måte, gi
dere en annen smak, samt.

29
00:01:18,261 --> 00:01:23,190
>> TOMAS Reimers: Så bare for å oppsummere hva
skjer, når du skriver inn nettadressen til

30
00:01:23,190 --> 00:01:26,650
nettleseren, får denne nettadressen
så opp i datamaskinen.

31
00:01:26,650 --> 00:01:28,590
Og datamaskinen er koblet
til en annen datamaskin,

32
00:01:28,590 --> 00:01:29,890
som er vert for det nettstedet.

33
00:01:29,890 --> 00:01:33,150
OK, så når du går til google.com, er du
koblet til en av Googles

34
00:01:33,150 --> 00:01:36,496
datamaskiner, som har den
filer for google.com.

35
00:01:36,496 --> 00:01:38,750
>> Det spør da etter en bestemt fil.

36
00:01:38,750 --> 00:01:40,020
Så hvis du går til -

37
00:01:40,020 --> 00:01:41,550
Jeg vet ikke -

38
00:01:41,550 --> 00:01:48,170
example.com / index.html eller / test.html,
du kommer til å be om

39
00:01:48,170 --> 00:01:49,340
den bestemte filen.

40
00:01:49,340 --> 00:01:52,780
Og webserver kommer
å returnere den til deg.

41
00:01:52,780 --> 00:01:54,910
>> Deretter, når du går gjennom denne filen -

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

43
00:01:57,750 --> 00:01:59,950
når du er datamaskinen blir at
fil - det kommer til å starte

44
00:01:59,950 --> 00:02:00,820
å bygge en web-side.

45
00:02:00,820 --> 00:02:03,020
Så nå har det HTML-filen,
som er liksom som

46
00:02:03,020 --> 00:02:05,170
struktur av websiden.

47
00:02:05,170 --> 00:02:08,620
HTML-filen kan også referere
CSS-filer, som definerer

48
00:02:08,620 --> 00:02:09,889
stil av websiden.

49
00:02:09,889 --> 00:02:12,970
>> Javascript-filer, som definerer
interaksjon med nettsiden.

50
00:02:12,970 --> 00:02:15,200
Bildefiler, som er bare bilder.

51
00:02:15,200 --> 00:02:19,450
Og muligens lenke til andre HTML-filer,
som du kan deretter gå til.

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

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

54
00:02:24,380 --> 00:02:28,980
Så dere har alt, kanskje,
møysommelig satt opp din lokale verten

55
00:02:28,980 --> 00:02:30,810
på den virtuelle maskinen.

56
00:02:30,810 --> 00:02:35,650
Og det bare, type, er den lokale
domene maskinen din er vert for bare

57
00:02:35,650 --> 00:02:38,760
for deg på din egen IP-adresse.

58
00:02:38,760 --> 00:02:43,300
>> Så i løpet av det, så kan du legge
til det dine egne websider.

59
00:02:43,300 --> 00:02:47,655
Jeg mener, i CS50 finans, bør du ha
lagt noen HTML-sider, som er,

60
00:02:47,655 --> 00:02:49,410
liksom, innpakket i PHP wrapper.

61
00:02:49,410 --> 00:02:54,690
Men til slutt, hva dine PHP-sider
ble gi ut var HTML.

62
00:02:54,690 --> 00:02:58,210
>> Men tenker tilbake til begynnelsen
av PSett, måtte vi sette

63
00:02:58,210 --> 00:03:00,890
tillatelsene for alt, ikke sant?

64
00:03:00,890 --> 00:03:07,270
Så dette er bare utgangspunktet lar oss få vite
som kan lese, skrive, og muligens

65
00:03:07,270 --> 00:03:08,730
utføre hver av filene.

66
00:03:08,730 --> 00:03:11,870
Så vi kommer til å gjøre en rask - hm?

67
00:03:11,870 --> 00:03:15,660
>> TOMAS Reimers: Så vi skal
å gjøre en rask demo.

68
00:03:15,660 --> 00:03:19,560
Så bare for å minne deg, når du
koble til Googles datamaskin -

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

70
00:03:20,690 --> 00:03:24,060
og be om en fil, datamaskinen først
behov for å sørge for at du er autorisert

71
00:03:24,060 --> 00:03:28,790
å faktisk vise at filen eller lese at
filen fordi du ikke kan bare spør

72
00:03:28,790 --> 00:03:30,430
for hvilken som helst fil på datamaskinen, ikke sant?

73
00:03:30,430 --> 00:03:32,260
Det ville være en sikkerhetsfare.

74
00:03:32,260 --> 00:03:37,020
>> Så filer på de systemene vi bruker, som
dette CS50 apparatet, har tre

75
00:03:37,020 --> 00:03:39,200
generelt folk som kan ha
tillatelser til noe.

76
00:03:39,200 --> 00:03:41,610
Den første er den faktiske
eier av nevnte fil.

77
00:03:41,610 --> 00:03:43,820
Den andre er den gruppen som
fila tilhører.

78
00:03:43,820 --> 00:03:46,090
Vi kommer ikke til å fokusere
for mye på det.

79
00:03:46,090 --> 00:03:50,010
Og det siste er, liksom, som
verden eller som alle andre som er

80
00:03:50,010 --> 00:03:54,130
ikke spesielt for denne filen og ikke
har noen eierrettigheter enn det.

81
00:03:54,130 --> 00:04:05,650
>> Så hvis vi har eier, gruppe,
og deretter verden.

82
00:04:05,650 --> 00:04:10,510
Og så, for hver av disse gruppene, du
kan ha en av tre tillatelser,

83
00:04:10,510 --> 00:04:13,010
OK, eller flere av disse.

84
00:04:13,010 --> 00:04:15,070
Du kan ha leserettigheter.

85
00:04:15,070 --> 00:04:16,560
Du kan ha rett tillatelser.

86
00:04:16,560 --> 00:04:18,880
Og du kan ha kjøretillatelser.

87
00:04:18,880 --> 00:04:22,060
>> Så når det gjelder selve filtyper, kan du lese
tillatelse er som faktisk leser

88
00:04:22,060 --> 00:04:23,250
innholdet i filen.

89
00:04:23,250 --> 00:04:24,730
En riktig tillatelse skriver
til nevnte fil.

90
00:04:24,730 --> 00:04:28,370
En utføre tillatelse kjører
fil som du gjør når du kjører en av

91
00:04:28,370 --> 00:04:29,620
dine CS50 prosjekter.

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

93
00:04:32,190 --> 00:04:38,820
>> Så når vi tenker om filer
som når vi trenger å lese en HTML

94
00:04:38,820 --> 00:04:41,790
file, som må være i verden
lesbar, ikke sant?

95
00:04:41,790 --> 00:04:44,420
Antagelig også eieren ønsker
å være i stand til å endre den filen.

96
00:04:44,420 --> 00:04:46,610
Slik at eieren kommer til å trenge
lese og skrive rettigheter.

97
00:04:46,610 --> 00:04:48,710
De trenger egentlig ikke utføre.

98
00:04:48,710 --> 00:04:50,950
>> Gruppe, vi kommer til å behandle
samme som i verden for nå.

99
00:04:50,950 --> 00:04:54,610
Så de trenger leserettigheter.

100
00:04:54,610 --> 00:04:57,310
Men de trenger ikke skrive
eller kjøretillatelser.

101
00:04:57,310 --> 00:05:01,920
Og nå, hvis vi tenker tilbake til tidligere
PSETs, hva vi vet er disse slag

102
00:05:01,920 --> 00:05:03,360
av å se ut som binære, ikke sant?

103
00:05:03,360 --> 00:05:04,210
1 står for ja.

104
00:05:04,210 --> 00:05:05,040
0 for nei.

105
00:05:05,040 --> 00:05:06,870
Og vi kan faktisk sette
dette til binær.

106
00:05:06,870 --> 00:05:10,478
>> Så 110 i binær ville være seks.

107
00:05:10,478 --> 00:05:13,270
100 ville være fire.

108
00:05:13,270 --> 00:05:14,690
Samme med verden.

109
00:05:14,690 --> 00:05:20,846
Så nummer du vil få for
tillatelser for dette ville være 644.

110
00:05:20,846 --> 00:05:24,400
>> MIKE RIZZO: Og hvis du tenker tilbake til
når du CHMODet noe, tror jeg

111
00:05:24,400 --> 00:05:28,980
de ga i oppgavesettet på
eksempel på hvor du kan gjøre

112
00:05:28,980 --> 00:05:36,470
noe som chmod 644
og deretter filnavn.

113
00:05:36,470 --> 00:05:39,980
Den 644 da, kan du nå se direkte
hvor det kommer fra.

114
00:05:39,980 --> 00:05:42,840
Så forhåpentligvis som gjør at
litt mer tydelig.

115
00:05:42,840 --> 00:05:45,600
>> Og så for du fyren klarhet -

116
00:05:45,600 --> 00:05:48,200
oh yeah, her dette er igjen.

117
00:05:48,200 --> 00:05:53,260
Så 600 så ville bare være et eksempel
vi ga opp her hvor eieren har

118
00:05:53,260 --> 00:05:56,360
lese og høyre tillatelser mens gruppen
og verden ikke har noen rettigheter

119
00:05:56,360 --> 00:05:58,145
å få tilgang til filen.

120
00:05:58,145 --> 00:06:01,500
>> TOMAS Reimers: Og så har vi en rask
listen over vanlige tillatelser.

121
00:06:01,500 --> 00:06:05,250
Så kataloger, vil du
å faktisk chmod 711.

122
00:06:05,250 --> 00:06:08,930
Hurtig til side - for en katalog å ha
kjørbar tillatelse betyr å være i stand

123
00:06:08,930 --> 00:06:11,680
å åpne katalogen.

124
00:06:11,680 --> 00:06:15,280
Bilder, CSS, Javascript, HTML behov
644 fordi, i utgangspunktet, verden

125
00:06:15,280 --> 00:06:16,400
behov leserettigheter.

126
00:06:16,400 --> 00:06:20,960
>> Og PHP, som dere har sett
vi vil ikke snakke om det selv

127
00:06:20,960 --> 00:06:24,880
strengt er typisk CHMODet med
tillatelse 600 fordi det kjøres med

128
00:06:24,880 --> 00:06:26,540
tillatelsene for eieren.

129
00:06:26,540 --> 00:06:27,790
Minst på apparatet.

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

131
00:06:30,200 --> 00:06:36,870
>> MIKE RIZZO: Så hvis du ikke spesifikt
spesifisere hva slags fil

132
00:06:36,870 --> 00:06:39,480
du ønsker i faktisk å sette
opp denne presentasjonen -

133
00:06:39,480 --> 00:06:43,490
Vi hadde et problem med dette fordi
alt var ikke CHMODet riktig -

134
00:06:43,490 --> 00:06:47,550
du kommer til å få, type, en
forbudt feil at nettstedet

135
00:06:47,550 --> 00:06:49,700
den trenger ikke å ha tillatelse
å få tilgang uansett fil

136
00:06:49,700 --> 00:06:51,370
du vil at den skal få tilgang.

137
00:06:51,370 --> 00:06:54,780
Og selvfølgelig, kan det fikses -
som i oppgavesettet - ved å endre

138
00:06:54,780 --> 00:06:56,405
tillatelser hensiktsmessig.

139
00:06:56,405 --> 00:06:59,620
>> TOMAS Reimers: Og den siste kommentaren til
raskt lokal utvikling er - vi

140
00:06:59,620 --> 00:07:02,000
tok dette opp, men vi ville bare
å ta det opp igjen -

141
00:07:02,000 --> 00:07:06,230
hvis du ber om en server - så lokale verten,
for eksempel, com eller hva. -

142
00:07:06,230 --> 00:07:09,170
og du ikke angir en bestemt fil,
filen som datamaskinen skal

143
00:07:09,170 --> 00:07:11,540
å be om heter index.html.

144
00:07:11,540 --> 00:07:12,790
Eller hvis det ikke finnes, 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
Så det er bare en oppsummering av alt,
forhåpentligvis, som vi har dekket i

148
00:07:19,560 --> 00:07:22,800
delen, og foredrag,
og så langt i CS50.

149
00:07:22,800 --> 00:07:26,110
Og nå skal vi begynne å snakke
om spesielt biblioteker.

150
00:07:26,110 --> 00:07:30,270
Javascript og CSS-biblioteker
for web apps.

151
00:07:30,270 --> 00:07:36,350
>> Så en rask grunnen til at vi har
bibliotekene er programmering -

152
00:07:36,350 --> 00:07:39,000
det er en masse problemer i
programmering, som holder spratt opp

153
00:07:39,000 --> 00:07:40,570
igjen og igjen, og nytt.

154
00:07:40,570 --> 00:07:43,870
Du kan legge merke til at en rekke nettsteder
trenger muligheten til å ha drop down

155
00:07:43,870 --> 00:07:49,100
menyer, for eksempel, eller trenger evnen
å ha en veldig standard knapp

156
00:07:49,100 --> 00:07:51,400
stil, som kanskje ikke er
den enkleste ting.

157
00:07:51,400 --> 00:07:54,670
Nå som du begynner å komme inn i HTML, du
innse at knappene kan faktisk

158
00:07:54,670 --> 00:07:57,720
ser virkelig stygt hvis du
ikke gjør noe.

159
00:07:57,720 --> 00:08:00,830
>> Så mange mennesker har skrevet
kalt bibliotekene.

160
00:08:00,830 --> 00:08:02,990
Og i denne sammenheng, er de
også kalt rammer.

161
00:08:02,990 --> 00:08:04,790
Vi kommer til å bruke den
to om hverandre.

162
00:08:04,790 --> 00:08:07,360
Og hva de er er at de er i utgangspunktet
forhåndslagde deler av koden -

163
00:08:07,360 --> 00:08:09,130
enten CSS eller Java -

164
00:08:09,130 --> 00:08:13,240
som tar bort mye av den
teamet har du i koding.

165
00:08:13,240 --> 00:08:17,290
>> Så de forhåndsdefinere en haug med klasser eller
pre-definere en haug med funksjoner for

166
00:08:17,290 --> 00:08:20,110
Java sak, som
du kan ringe senere.

167
00:08:20,110 --> 00:08:22,690
Og så kan du, liksom, få
tilgang til denne koden uten

168
00:08:22,690 --> 00:08:23,710
å måtte gjøre noe.

169
00:08:23,710 --> 00:08:27,750
Et eksempel på biblioteket var CS50.H.
Det var et bibliotek vi ga deg tilbake

170
00:08:27,750 --> 00:08:32,090
i uke én, som tillater deg å gjøre
ting som det GetInt og GetString

171
00:08:32,090 --> 00:08:35,237
uten å måtte skrive
noen kode selv.

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

173
00:08:36,179 --> 00:08:40,299
Så her, akkurat som vi hadde til å omfatte
i vår c-filer på forskjellige

174
00:08:40,299 --> 00:08:46,570
bibliotekene, vi også bør ta med i
vår HTML-filer forskjellige bibliotekene.

175
00:08:46,570 --> 00:08:50,310
For eksempel, hvis vi ønsket å inkludere
en spesifikk Javascript-bibliotek her,

176
00:08:50,310 --> 00:08:52,850
kanskje, en som vi har skrevet
oss selv som det er lokalt vertskap

177
00:08:52,850 --> 00:08:56,000
kalt script.js, vi bare
Denne notasjonen.

178
00:08:56,000 --> 00:08:59,500
>> Så vi har script type er lik
Java kilde equals

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

180
00:09:01,260 --> 00:09:05,190
Og hvis du tenker tilbake til din CS50
finans oppgavesettet, hvis du har sett på

181
00:09:05,190 --> 00:09:09,190
header.php i maler-mappen,
du burde ha sett

182
00:09:09,190 --> 00:09:10,970
noen av disse er inkludert.

183
00:09:10,970 --> 00:09:13,250
Så dette første - skriptene -

184
00:09:13,250 --> 00:09:16,080
er inkludert et Javascript-bibliotek.

185
00:09:16,080 --> 00:09:18,760
Inkludert en CSS-biblioteket er
litt annerledes.

186
00:09:18,760 --> 00:09:21,430
>> Her, i stedet for skriptet
Tag du trenger link tag.

187
00:09:21,430 --> 00:09:27,110
Og så, teksten CSS typen
er litt annerledes.

188
00:09:27,110 --> 00:09:29,270
Du trenger ikke alltid å inkludere
rel stilark.

189
00:09:29,270 --> 00:09:30,970
Men jeg tror det er, generelt,
god praksis.

190
00:09:30,970 --> 00:09:35,810
>> Og så til slutt, HREF, som du
sannsynligvis så i dine ATAGs for å knytte

191
00:09:35,810 --> 00:09:39,440
i forskjellige linker bare spesifiserer
koblingen av hvor du skal finne det.

192
00:09:39,440 --> 00:09:42,250
For eksempel, hvis vi ønsket å knytte en
annet bibliotek - la oss bare si -

193
00:09:42,250 --> 00:09:49,330
som levde på styles.css.

194
00:09:49,330 --> 00:09:54,030
Og vi ønsket å knytte det i det er
ligger på Internett, vil vi kopiere det.

195
00:09:54,030 --> 00:09:58,834
Og deretter lime den inn i hva
vi har rett her i stedet.

196
00:09:58,834 --> 00:10:01,340
>> TOMAS Reimers: OK, forhåpentligvis du
Gutta er allerede kjent

197
00:10:01,340 --> 00:10:02,410
med hvordan vi kobler CSS.

198
00:10:02,410 --> 00:10:04,000
Du måtte gjøre det på
din siste brune settet.

199
00:10:04,000 --> 00:10:07,110
Java, noen av dere kanskje
har litt erfaring med.

200
00:10:07,110 --> 00:10:07,980
Noen av dere kanskje ikke.

201
00:10:07,980 --> 00:10:12,190
>> Så for nå, vet at en Javascript-fil
er veldig mye som en CSS-fil i

202
00:10:12,190 --> 00:10:15,640
den forstand at du kan koble til det eller
at du kan ta den internt.

203
00:10:15,640 --> 00:10:17,360
Og det tillater deg å skript ting.

204
00:10:17,360 --> 00:10:21,820
Og vi kommer til å gå gjennom en
litt av Java senere.

205
00:10:21,820 --> 00:10:23,560
>> Så å bruke et bibliotek -

206
00:10:23,560 --> 00:10:26,150
når du har tatt det, er det som
enkelt som bokstavelig talt ringe

207
00:10:26,150 --> 00:10:29,640
funksjoner eller legge til
klasse navn til den.

208
00:10:29,640 --> 00:10:32,220
Det siste vi ønsker å snakke
om når det gjelder bibliotek -

209
00:10:32,220 --> 00:10:34,180
og dette er mer av en teknisk notat -

210
00:10:34,180 --> 00:10:35,860
er åpen kildekodelisens.

211
00:10:35,860 --> 00:10:41,550
Så når du finner disse faktiske bibliotekene,
du kan tenke på

212
00:10:41,550 --> 00:10:47,630
spørsmål som er det OK at jeg bare
bruker andres kode, spesielt

213
00:10:47,630 --> 00:10:51,970
fordi det er noe vi veldig mye
fortalte deg å ikke gjøre i dette kurset.

214
00:10:51,970 --> 00:10:55,790
>> Så i tilfelle av åpen kildekode lisensiering,
mange utviklere -

215
00:10:55,790 --> 00:10:57,540
når de har skrevet et bibliotek,
som de tror kan være

216
00:10:57,540 --> 00:10:59,450
nyttig for andre mennesker -

217
00:10:59,450 --> 00:11:02,420
vil publisere den på nettet
og gi det en lisens.

218
00:11:02,420 --> 00:11:06,620
Og en lisens i utgangspunktet sier jeg herved
gi tillatelse til andre

219
00:11:06,620 --> 00:11:11,250
folk til å bruke denne stykke programvare
med følgende slags

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

221
00:11:13,230 --> 00:11:16,100
>> Vi har tatt med en link til et godt nettsted til
hjelpe deg å forstå lisenser i

222
00:11:16,100 --> 00:11:17,720
tilfelle du får dem.

223
00:11:17,720 --> 00:11:21,680
Vanlige bestemmelser er ting som
du er velkommen til å bruke biblioteket mitt så

224
00:11:21,680 --> 00:11:23,000
lenge du gir meg kreditt.

225
00:11:23,000 --> 00:11:25,670
Du er velkommen til å bruke biblioteket mitt
så lenge som når det bryter

226
00:11:25,670 --> 00:11:26,790
du ikke klandre meg.

227
00:11:26,790 --> 00:11:30,310
Du er velkommen til å bruke biblioteket mitt så lenge
som du ikke bruker den til å tjene penger

228
00:11:30,310 --> 00:11:31,910
for deg selv.

229
00:11:31,910 --> 00:11:34,130
Dette er typer av felles
bestemmelser.

230
00:11:34,130 --> 00:11:37,780
>> For denne CS50 endelige prosjektet, de
bør ikke være super relevant fordi

231
00:11:37,780 --> 00:11:41,440
de prosjektene som dere bruker er
trolig heller, liksom, kjent.

232
00:11:41,440 --> 00:11:44,170
Men når du faktisk gå ut i
verden og begynne å bruke bibliotekene, som

233
00:11:44,170 --> 00:11:48,100
kan eller ikke kan være så godt gjennomført som
noen av de mer populære de vi er

234
00:11:48,100 --> 00:11:49,780
kommer til å gå gjennom.

235
00:11:49,780 --> 00:11:53,310
Det er godt å være i stand til å forstå
disse lisensene og til

236
00:11:53,310 --> 00:11:54,560
forstå hva de betyr.

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

238
00:11:58,120 --> 00:11:58,586
Og kommer tilbake.

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

240
00:12:00,960 --> 00:12:04,850
Så nå flytter til eksempler
av faktiske CSS.

241
00:12:04,850 --> 00:12:07,770
På dette punktet så langt, kan du
ikke har støtt på dette.

242
00:12:07,770 --> 00:12:10,300
Men du har kanskje møtt det i
hverdagen der noe

243
00:12:10,300 --> 00:12:13,160
som ser én vei på én nettleser
kanskje ikke ser det samme

244
00:12:13,160 --> 00:12:14,880
måte i en annen nettleser.

245
00:12:14,880 --> 00:12:17,400
>> Dette kalles nettleser nettleser
kompatibilitet.

246
00:12:17,400 --> 00:12:20,780
Og stadig er det blitt mer og
mer av et problem, særlig ettersom

247
00:12:20,780 --> 00:12:25,260
lesere ta flere og flere friheter
å gjennomføre ting som de ønsker.

248
00:12:25,260 --> 00:12:28,440
Så for å overvinne det, det faktisk er
et stort bibliotek som heter Normalize.CSS.

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

250
00:12:32,236 --> 00:12:33,770
>> TOMAS Reimers: Vi følger linken.

251
00:12:33,770 --> 00:12:36,210
På dette punktet, er det nyttig hvis
du har den bærbare datamaskinen i det

252
00:12:36,210 --> 00:12:38,740
ser på nettstedet.

253
00:12:38,740 --> 00:12:42,580
Og vi gir dette til deg
nå rett og slett fordi den CS50 finalen

254
00:12:42,580 --> 00:12:44,370
Prosjektet er faktisk kommer til
be deg om å implementere det

255
00:12:44,370 --> 00:12:45,860
på samme måte og gjennom nettlesere.

256
00:12:45,860 --> 00:12:49,250
>> Så bare for å holde på baksiden av din
hode, er dette et flott bibliotek

257
00:12:49,250 --> 00:12:51,170
fordi det vil, liksom,
standardisere ting.

258
00:12:51,170 --> 00:12:54,230
I Firefox, kan noe vise
som en pixel til venstre.

259
00:12:54,230 --> 00:12:58,390
Og så Chrome kan bestemme at faktisk
hva du mente var 10 piksler

260
00:12:58,390 --> 00:12:59,380
til venstre.

261
00:12:59,380 --> 00:13:01,030
Og du ønsker å standardisere dette.

262
00:13:01,030 --> 00:13:05,360
Normal faktisk vil gjøre en virkelig god
jobb med å sørge for at nettstedet ditt

263
00:13:05,360 --> 00:13:08,070
ser det samme på tvers av nettlesere.

264
00:13:08,070 --> 00:13:10,660
>> MIKE RIZZO: Så hvis vi ønsket å bare
Klikk på lenken veldig raskt, og showet

265
00:13:10,660 --> 00:13:13,140
deg hva som ser ut som, du
kan laste den ned ved å bruke

266
00:13:13,140 --> 00:13:14,670
giganten Last ned-knappen.

267
00:13:14,670 --> 00:13:18,520
Eller jeg oppfordrer deg til å lese mer om det
ved å klikke på denne linken i nedre

268
00:13:18,520 --> 00:13:19,310
høyre hjørne.

269
00:13:19,310 --> 00:13:22,420
>> TOMAS Reimers: Og hvis du faktisk
Klikk Les mer rett der -

270
00:13:22,420 --> 00:13:24,340
klikk kilden på GitHub -

271
00:13:24,340 --> 00:13:31,720
vil du faktisk se åpen kildekode
lisens på LICENSE.md rett der.

272
00:13:31,720 --> 00:13:35,740
Og du vil se her er den
svært populær MIT lisens.

273
00:13:35,740 --> 00:13:38,940
Igjen, hvis du leser gjennom teksten,
vil du være i stand til å finne det på nettstedet

274
00:13:38,940 --> 00:13:42,550
vi referert før og kunne
forstå det uten å måtte lese

275
00:13:42,550 --> 00:13:45,920
gjennom den juridiske sjargong.

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

277
00:13:46,850 --> 00:13:47,940
Så det er Normaliser.

278
00:13:47,940 --> 00:13:49,190
Vi ønsket å gi deg
som virkelig raskt.

279
00:13:49,190 --> 00:13:50,030
Oh, har du et spørsmål?

280
00:13:50,030 --> 00:13:53,013
>> PUBLIKUM: Så når du laster den ned, du
bare følg den koden som de har

281
00:13:53,013 --> 00:13:54,098
under Last ned-knappen?

282
00:13:54,098 --> 00:13:55,860
>> TOMAS Reimers: Ja, så
når du laster ned -

283
00:13:55,860 --> 00:13:58,130
>> MIKE RIZZO: Å, det er et stort poeng.

284
00:13:58,130 --> 00:14:00,700
Så spørsmålet var hvordan gjøre
vi faktisk laste den ned?

285
00:14:00,700 --> 00:14:03,260
Så hvis vi klikker på lenken, ser vi
at det faktisk dukker opp

286
00:14:03,260 --> 00:14:05,030
på kildekoden.

287
00:14:05,030 --> 00:14:08,550
Så for å gjøre dette, hva vi kunne
gjør er å klikke rett på Lagre som.

288
00:14:08,550 --> 00:14:10,830
Lagre som og som bør
få opp en fil.

289
00:14:10,830 --> 00:14:14,160
Og så kan vi velge å lagre
det som normalize.CSS.

290
00:14:14,160 --> 00:14:15,810
Og så du må koble den i -

291
00:14:15,810 --> 00:14:18,660
>> TOMAS Reimers: Den samme måte som du
kobling i en annen fil.

292
00:14:18,660 --> 00:14:22,250
Og når du kobler den inn, hva er flott
om Normal er det faktisk vil

293
00:14:22,250 --> 00:14:25,920
ta vare på all den harde
arbeide av seg selv.

294
00:14:25,920 --> 00:14:27,730
Noe som betyr at du ikke trenger
å legge til noen klasser.

295
00:14:27,730 --> 00:14:29,690
>> Du trenger ikke å gjøre noe rart.

296
00:14:29,690 --> 00:14:34,590
Det vil normalisere uten deg
gjør noe videre.

297
00:14:34,590 --> 00:14:36,083
Ja, du må ta den med.

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

299
00:14:38,990 --> 00:14:40,240
Google Chrome svarer ikke.

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

301
00:14:43,270 --> 00:14:44,860
>> Bare en rask til side -

302
00:14:44,860 --> 00:14:46,800
Jeg la merke til vi hoppet inn i dette.

303
00:14:46,800 --> 00:14:49,010
Resten av denne presentasjonen
kommer til å bli en rask oversikt.

304
00:14:49,010 --> 00:14:50,380
En undersøkelse av bibliotekene.

305
00:14:50,380 --> 00:14:52,710
>> Innerst inne, hva de er.

306
00:14:52,710 --> 00:14:53,350
Hva de gjør.

307
00:14:53,350 --> 00:14:54,060
Hvordan de er nyttige.

308
00:14:54,060 --> 00:14:56,540
Hvordan du kan gjennomføre dem.

309
00:14:56,540 --> 00:14:59,730
Hvis du ønsker å begynne å se på dem,
følgende sammen, og lese gjennom

310
00:14:59,730 --> 00:15:01,990
dem, jeg vil sterkt oppfordre det.

311
00:15:01,990 --> 00:15:07,620
>> Alternativt, er du velkommen også til
begynne å laste dem ned og med

312
00:15:07,620 --> 00:15:11,400
dem i et syn bare for å se hva de
ser ut eller hva de skal gjøre hvis du har

313
00:15:11,400 --> 00:15:12,270
den bærbare datamaskinen foran deg.

314
00:15:12,270 --> 00:15:14,650
Hvis ikke, er du velkommen til å holde
lytte til oss snakke.

315
00:15:14,650 --> 00:15:15,500
Vi kommer til å fortsette å snakke.

316
00:15:15,500 --> 00:15:18,680
Og vi har tid på slutten, forhåpentligvis
Vi vil faktisk komme inn å vise deg

317
00:15:18,680 --> 00:15:20,946
hva noen av disse bibliotekene
se ut.

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

319
00:15:22,320 --> 00:15:25,466
Ok, så nå la oss snakke
om Font Awesome.

320
00:15:25,466 --> 00:15:30,480
>> TOMAS Reimers: så Font Awesome er en
veldig ryddig nettsted, spesielt for de

321
00:15:30,480 --> 00:15:32,450
av oss som er mindre kunstnerisk
talentfull.

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

323
00:15:36,330 --> 00:15:38,880
Ignorerer navnet Font Awesome, det gir
du en haug med ikoner, som er

324
00:15:38,880 --> 00:15:41,050
veldig nyttig.

325
00:15:41,050 --> 00:15:45,950
Så mange ganger du vil implementere en
ikonet vil du kanskje liker en fin x så

326
00:15:45,950 --> 00:15:47,170
at du kan lukke noe.

327
00:15:47,170 --> 00:15:49,910
>> Eller ønsker du kanskje en slags Rediger-knappen
med en blyanttegning som

328
00:15:49,910 --> 00:15:50,940
alle andre har.

329
00:15:50,940 --> 00:15:53,850
Og det er da du lærer at
tegne disse ikonene kan være

330
00:15:53,850 --> 00:15:55,510
veldig kjedelig og vanskelig.

331
00:15:55,510 --> 00:15:59,160
Font Awesome - hvis du faktisk
gå til nettstedet -

332
00:15:59,160 --> 00:16:02,892
gir deg en masse ikoner etter
ikonene øverst.

333
00:16:02,892 --> 00:16:06,980
Ja, bare toppen.

334
00:16:06,980 --> 00:16:09,030
Det vil gi deg mye
av ikoner for gratis.

335
00:16:09,030 --> 00:16:15,210
>> Så her ser du vi har ting som en
stjerne, barer, et lyn, en

336
00:16:15,210 --> 00:16:19,750
kalender, en bug, en bok, et cetera.

337
00:16:19,750 --> 00:16:21,110
Dette kan være meget nyttig.

338
00:16:21,110 --> 00:16:24,290
Måten du tar med dette er at du inkluderer
bokstavelig CSS-filen.

339
00:16:24,290 --> 00:16:29,760
Og etter at du har tatt med CSS-filen,
hva du kan gjøre er å opprette en

340
00:16:29,760 --> 00:16:33,430
tag kalt I. Det satands for
ikonet med klassen FA

341
00:16:33,430 --> 00:16:34,460
står for Font Awesome.

342
00:16:34,460 --> 00:16:36,330
Og så, uansett klasse du ønsker.

343
00:16:36,330 --> 00:16:41,220
>> Så hvis jeg ville ha et ikon av dette pluss
firkantet rett her, ville jeg gi

344
00:16:41,220 --> 00:16:43,290
det klassen FA.

345
00:16:43,290 --> 00:16:46,230
Og da FA bindestrek pluss bindestrek torget.

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: Og så, den siste CSS
bibliotek vi ønsker å komme gjennom vi er

349
00:16:56,980 --> 00:16:59,950
prøver å holde det minimalt på CSS
bibliotekene fordi vi innser

350
00:16:59,950 --> 00:17:03,660
Tittelen på denne presentasjonen
er Javascript biblioteker.

351
00:17:03,660 --> 00:17:07,089
Men vi tenkte at vi kan like godt
introdusere deg til de andre bibliotekene

352
00:17:07,089 --> 00:17:09,569
mens vi snakket om bibliotekene.

353
00:17:09,569 --> 00:17:11,400
>> Det er Google Web Fonts.

354
00:17:11,400 --> 00:17:17,040
Og hva Google Web Fonts lar deg
å gjøre er å legge fonter til nettstedet ditt,

355
00:17:17,040 --> 00:17:22,079
som er en veldig enkel måte å gjøre det
pen og å skille apparatet

356
00:17:22,079 --> 00:17:24,460
fra alle andres er hvis den har
en fin skrift eller hvis den har en fin

357
00:17:24,460 --> 00:17:27,790
samling av skrifter.

358
00:17:27,790 --> 00:17:31,410
Google Web Fonts er fint i motsetning til andre
bibliotekene i den forstand at det er en

359
00:17:31,410 --> 00:17:33,490
virkelig guidet installasjon.

360
00:17:33,490 --> 00:17:38,680
>> Så hvis du følger linken, er det
google.com / skrifter, tror jeg.

361
00:17:38,680 --> 00:17:41,100
Hvis du følger det, du
kan plukke skriften.

362
00:17:41,100 --> 00:17:44,410
Du kan velge på venstre fra
tykkelse, skrå, et cetera.

363
00:17:44,410 --> 00:17:48,970
Og så, når du har valgt en,
du kan klikke rask bruk.

364
00:17:48,970 --> 00:17:49,820
Akkurat der.

365
00:17:49,820 --> 00:17:51,590
Nederst til høyre på boksen.

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

367
00:17:54,380 --> 00:17:56,700
>> Og så, bla nedover.

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

369
00:17:59,600 --> 00:18:02,650
Først av alt, de gir deg CSS som
må du faktisk koble til det.

370
00:18:02,650 --> 00:18:03,330
Det er rett der.

371
00:18:03,330 --> 00:18:05,170
Du kan bare kopiere og lime det inn

372
00:18:05,170 --> 00:18:07,250
Og det fine med dette er
du trenger faktisk ikke engang trenger å

373
00:18:07,250 --> 00:18:08,340
laste ned filen.

374
00:18:08,340 --> 00:18:11,170
>> Hva det kommer til å gjøre er det som skjer
å knytte til Googles versjon av den.

375
00:18:11,170 --> 00:18:14,130
Så tilbake til hva betyr det.

376
00:18:14,130 --> 00:18:18,270
Det betyr at når en bruker
laster ned filen -

377
00:18:18,270 --> 00:18:22,300
laster ned HTML-siden - HTML
siden kommer til å referere til denne filen.

378
00:18:22,300 --> 00:18:26,790
>> Så da har datamaskinen kommer til å se,
Åh, det er vert på google.com heller

379
00:18:26,790 --> 00:18:28,170
enn på theirsite.com.

380
00:18:28,170 --> 00:18:30,370
La meg gå spør Google for denne filen.

381
00:18:30,370 --> 00:18:32,800
Og så kommer det til å omfatte
det nesten som om det var en

382
00:18:32,800 --> 00:18:35,584
en del av ditt eget nettsted.

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

384
00:18:36,540 --> 00:18:40,980
Og når du har det, så til
inkludere den i CSS, det gir deg

385
00:18:40,980 --> 00:18:41,830
selve linjen.

386
00:18:41,830 --> 00:18:45,188
Så du sette eiendommen font familien
lik navnet på skriften.

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
Så vi nettopp ferdig med CSS.

390
00:18:52,220 --> 00:18:57,230
Og noen av dere kanskje tenker, vel,
vi hadde noen CSS på CS50 Finance.

391
00:18:57,230 --> 00:19:00,390
Men CSS biblioteket var bootstrap.

392
00:19:00,390 --> 00:19:05,190
Vi har faktisk inkluderer Bootstrap litt
senere i henhold Java fordi med

393
00:19:05,190 --> 00:19:09,660
Bootstrap CSS Biblioteket kommer også
med mye Javascript som

394
00:19:09,660 --> 00:19:12,060
Bootstrap eller Twitter -
som gjorde Bootstrap -

395
00:19:12,060 --> 00:19:15,426
bruker til å administrere alle sine CSS.

396
00:19:15,426 --> 00:19:19,592
>> TOMAS Reimers: Er det noen som har noen
spørsmål så langt om CSS generelt?

397
00:19:19,592 --> 00:19:20,723
Vi er gode?

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: Så flytter
på å Javascript.

401
00:19:25,136 --> 00:19:27,900
>> MIKE RIZZO: Så vi ønsket å snakke
om jQuery til å begynne med.

402
00:19:27,900 --> 00:19:30,780
Har noen hørt om jQuery
før eller brukt det?

403
00:19:30,780 --> 00:19:32,180
Ja, et par?

404
00:19:32,180 --> 00:19:36,000
Så hvis du bare jobber med innfødte
Javascript, vil du finne deg selv

405
00:19:36,000 --> 00:19:41,000
skrive mange lange velgere mye.

406
00:19:41,000 --> 00:19:44,400
Så hva jQuery gjør er det gir
en fin wrapper for Java

407
00:19:44,400 --> 00:19:48,180
språk som lar deg enkelt velge
og manipulere ulike elementer

408
00:19:48,180 --> 00:19:52,470
i dokumentet objektmodell av
nettside eller DOM, som jeg tror

409
00:19:52,470 --> 00:19:54,290
dere har hørt om i
forelese på dette punktet.

410
00:19:54,290 --> 00:19:57,550
>> TOMAS Reimers: Hvis du ikke har hørt om
det, eller hvis du ikke har sett foredrag

411
00:19:57,550 --> 00:20:01,870
ennå, er det Document Object Model
utgangspunktet hvordan ting er representert.

412
00:20:01,870 --> 00:20:05,290
Så HTML slags ser ut som et tre
når du faktisk trekke det ut.

413
00:20:05,290 --> 00:20:06,850
Du har HTML-element på toppen.

414
00:20:06,850 --> 00:20:07,560
Du har hodet og kroppen.

415
00:20:07,560 --> 00:20:09,500
>> Og så, i løpet av det du
har alt annet.

416
00:20:09,500 --> 00:20:10,660
Som er referert til som DOM -

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

418
00:20:12,120 --> 00:20:16,090
Så en modell som representerer objekter i
dokumentet er en enkel måte å tenke

419
00:20:16,090 --> 00:20:18,560
om det.

420
00:20:18,560 --> 00:20:22,520
Og en av de store ting om jQuery
er det virkelig gjør traversering

421
00:20:22,520 --> 00:20:26,460
det og manipulere elementer innenfor
som utrolig enkel.

422
00:20:26,460 --> 00:20:30,300
>> Så enkelt, faktisk, at størstedelen av
Javascript-biblioteker eller hvis ikke den

423
00:20:30,300 --> 00:20:34,200
Flertallet, den store majoriteten av de
ser du faktisk trenger jQuery så

424
00:20:34,200 --> 00:20:37,530
at de kan kjøre seg bare
fordi hvis du ikke har jQuery, du

425
00:20:37,530 --> 00:20:40,540
ville kaste bort en masse tid på å prøve å
finne ut hvordan å velge visse

426
00:20:40,540 --> 00:20:43,660
elementer og hvordan du gjør andre ting.

427
00:20:43,660 --> 00:20:47,950
Og den andre store ting om jQuery
er at det er korset nettleseren kompatibel.

428
00:20:47,950 --> 00:20:51,550
>> Så husker tilbake når vi sa at
Ikke alle nettlesere implementere

429
00:20:51,550 --> 00:20:53,100
ting på samme måte?

430
00:20:53,100 --> 00:20:55,120
Dette gjelder selv i Javascript.

431
00:20:55,120 --> 00:20:58,220
Og en av de store tingene om jQuery
er at det vil oppdage

432
00:20:58,220 --> 00:21:00,300
nettleser og oppdage
hensiktsmessig måte.

433
00:21:00,300 --> 00:21:03,420
>> Så hvis du trenger for å velge et element,
Internet Explorer kan si du er

434
00:21:03,420 --> 00:21:05,770
ment å gjøre denne måten.

435
00:21:05,770 --> 00:21:08,300
Firefox kan si riktig
måten er på denne måten.

436
00:21:08,300 --> 00:21:09,710
jQuery bryr seg ikke.

437
00:21:09,710 --> 00:21:12,550
Når du forteller jQuery for å velge en
element det vil finne ut hvordan det er

438
00:21:12,550 --> 00:21:16,290
ment å gjøre det i nettleseren på
brukeren er i, og deretter gjøre

439
00:21:16,290 --> 00:21:18,584
det på den måten.

440
00:21:18,584 --> 00:21:22,650
>> MIKE RIZZO: Så la oss ikke snakke om
bruken av jQuery litt.

441
00:21:22,650 --> 00:21:27,670
Akkurat som PHP, har jQuery en bestemt
forkjærlighet for dollartegnet.

442
00:21:27,670 --> 00:21:30,880
Så du vil finne at noen jQuery -

443
00:21:30,880 --> 00:21:32,060
godt, ikke alle.

444
00:21:32,060 --> 00:21:35,210
Du kan noen ganger erstatte dollaren
signere med ordet jQuery.

445
00:21:35,210 --> 00:21:38,980
Men generelt, bare fordi det er
kortere, når du ser jQuery være

446
00:21:38,980 --> 00:21:41,420
brukte det vil være med et dollartegn.

447
00:21:41,420 --> 00:21:47,030
>> Så her er vi bare viser en begynnelse
VELGER for et element i DOM.

448
00:21:47,030 --> 00:21:52,850
Her har vi den dollartegn etterfulgt
av åpne parenteser og deretter sitater.

449
00:21:52,850 --> 00:21:56,130
Og i løpet av de sitatene gå våre velgere
for de forskjellige elementer.

450
00:21:56,130 --> 00:21:59,810
Akkurat som i CSS, vi trengte velgere til
kunne style forskjellige elementer

451
00:21:59,810 --> 00:22:00,840
innenfor siden.

452
00:22:00,840 --> 00:22:06,555
De ulike velgere sette
nøyaktig inn jQuery og Javascript,

453
00:22:06,555 --> 00:22:07,820
for det meste.

454
00:22:07,820 --> 00:22:10,120
>> Så her har vi en prikk foo.

455
00:22:10,120 --> 00:22:14,780
Så hvis du husker fra forelesning,
prikken betyr bare klassen.

456
00:22:14,780 --> 00:22:18,850
Så vi har valgt element
med klassen foo.

457
00:22:18,850 --> 00:22:22,670
Så hvis jeg går videre og åpne opp vår
Java konsollen her veldig raskt

458
00:22:22,670 --> 00:22:26,830
bare demonstrere det, hvis jeg bare skriver
dollartegn, ser vi at det er noen

459
00:22:26,830 --> 00:22:28,090
funksjon som kommer opp.

460
00:22:28,090 --> 00:22:29,420
Og det er bare definert av jQuery.

461
00:22:29,420 --> 00:22:32,120
>> TOMAS Reimers: For de av dere
ukjente, er konsollen et verktøy

462
00:22:32,120 --> 00:22:35,430
innenfor Chrome, som lar deg,
utgangspunktet, kjøre Javascript på

463
00:22:35,430 --> 00:22:36,450
gjeldende siden.

464
00:22:36,450 --> 00:22:39,420
Dette vil du finne utrolig nyttig når
du faktisk debugging og du

465
00:22:39,420 --> 00:22:42,400
trenger å være som, hva er den nåværende
Verdien av noen global variabel eller hva

466
00:22:42,400 --> 00:22:43,910
er noe annet?

467
00:22:43,910 --> 00:22:47,620
Det er typen som GDB med unntak
som kan du faktisk

468
00:22:47,620 --> 00:22:51,600
manipulere elementer på siden med
det på en mye enklere måte.

469
00:22:51,600 --> 00:22:55,080
Og også det ikke, i utgangspunktet, sjekk
på med deg før den gjør noe.

470
00:22:55,080 --> 00:22:58,660
>> Så mens, kan GDB være like, er du
sikker på at du ønsker å kjøre neste trinn?

471
00:22:58,660 --> 00:22:59,830
Konsollen er i virkeligheten.

472
00:22:59,830 --> 00:23:03,690
Så som web-siden er rendering og
gjør hva det gjør, det

473
00:23:03,690 --> 00:23:05,720
rådets også kjøres sammen med det.

474
00:23:05,720 --> 00:23:08,330
Og du kan sette impute koden på
at konsoll som vil

475
00:23:08,330 --> 00:23:09,260
kjøres på siden.

476
00:23:09,260 --> 00:23:12,190
>> MIKE RIZZO: Så for å gå inn i konsollen,
Jeg tror jeg skal kort

477
00:23:12,190 --> 00:23:13,750
nevne hvordan du gjør det.

478
00:23:13,750 --> 00:23:17,850
I de siste problemene du måtte ha
brukte Chrome inspisere element

479
00:23:17,850 --> 00:23:20,440
funksjoner eller view page source -

480
00:23:20,440 --> 00:23:23,870
og de som er tilgjengelige bare ved å høyre
klikke på siden eller et bestemt

481
00:23:23,870 --> 00:23:28,430
element og gjør enten inspisere
element eller vise siden kilden.

482
00:23:28,430 --> 00:23:31,190
Vi kan også få tilgang til Java
konsollen direkte av

483
00:23:31,190 --> 00:23:33,630
velger inspisere element.

484
00:23:33,630 --> 00:23:37,930
Så da du bare trykke konsoll
på høyre side.

485
00:23:37,930 --> 00:23:41,900
>> Alternativt kan du også har gått
til øvre høyre hjørne,

486
00:23:41,900 --> 00:23:46,820
som er klippet av på denne skjermen hvor
det har de tre vannrette streker.

487
00:23:46,820 --> 00:23:52,010
Og du går ned til verktøy og
deretter Javascript-konsoll

488
00:23:52,010 --> 00:23:53,240
her hvor kan se -

489
00:23:53,240 --> 00:23:54,370
i alle fall på Windows -

490
00:23:54,370 --> 00:23:59,680
snarveien er Kontroll Shift J. Så da
hvis vi ønsket å velge et element

491
00:23:59,680 --> 00:24:06,060
innenfor denne side, akkurat som jeg viste
før, gjør vi dollar sign åpne parentesar

492
00:24:06,060 --> 00:24:08,180
og deretter siterer.

493
00:24:08,180 --> 00:24:11,750
>> En interessant ting er, generelt,
apostrof og anførselstegn er

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

495
00:24:12,370 --> 00:24:16,050
Så mange mennesker bare bruke én
anførselstegn fordi de er raskere å skrive

496
00:24:16,050 --> 00:24:19,780
enn doble anførselstegn, fordi du ikke gjør det
må holde nede Shift.

497
00:24:19,780 --> 00:24:21,770
Så jeg vil bare gjøre det akkurat nå.

498
00:24:21,770 --> 00:24:24,510
>> Så jeg ønsker å velge noe
med klassen.

499
00:24:24,510 --> 00:24:27,200
Container, bare fordi jeg vet det er
noe som er på vår

500
00:24:27,200 --> 00:24:28,740
web side akkurat nå.

501
00:24:28,740 --> 00:24:29,520
Og jeg traff på Enter.

502
00:24:29,520 --> 00:24:31,670
Og vi kan se at det har valgt det.

503
00:24:31,670 --> 00:24:34,990
Så det viser seg at det
returnert dette objektet.

504
00:24:34,990 --> 00:24:36,620
Så det er et grunnleggende valg.

505
00:24:36,620 --> 00:24:40,080
Hvis vi ønsket å faktisk manipulere det,
du ville ha til å kalle noe

506
00:24:40,080 --> 00:24:43,925
på at utvalget, som
vi vil komme inn senere.

507
00:24:43,925 --> 00:24:49,030
>> TOMAS Reimers: Så bare for å se på det
mer i dybden, er dette ikke annerledes

508
00:24:49,030 --> 00:24:52,245
enn de funksjonskall vi gjort i C.
Navnet på funksjonen her er en

509
00:24:52,245 --> 00:24:52,580
litt rart.

510
00:24:52,580 --> 00:24:55,640
Det er dollartegn.

511
00:24:55,640 --> 00:24:57,010
Det er bare et navn på en funksjon.

512
00:24:57,010 --> 00:24:58,810
Det er ikke noe spesielt om det.

513
00:24:58,810 --> 00:25:00,450
>> Vi har åpne parentes.

514
00:25:00,450 --> 00:25:03,880
Da har vi vår ett argument, som
i dette tilfellet skjer for å være en streng,

515
00:25:03,880 --> 00:25:05,680
som er en velger for den.

516
00:25:05,680 --> 00:25:08,130
Og så har vi vår
lukket parentes.

517
00:25:08,130 --> 00:25:09,960
Det var det.

518
00:25:09,960 --> 00:25:11,500
>> Det er ikke så vesentlig forskjellig.

519
00:25:11,500 --> 00:25:12,900
Selv om det ikke ser veldig merkelig.

520
00:25:12,900 --> 00:25:17,220
Og det kan være, liksom, en stikker
peke for mange mennesker.

521
00:25:17,220 --> 00:25:21,460
>> MIKE RIZZO: Så på samme måte, hvis vi ønsket
for å velge et element som har en ID,

522
00:25:21,460 --> 00:25:23,470
Nå ønsker vi å velge ved
ID i stedet for klassen.

523
00:25:23,470 --> 00:25:28,080
Det ville være en lignende ting hvor vi
bare gjøre det skarpt tegnet for ID.

524
00:25:28,080 --> 00:25:33,576
Så vi velger her hele
elementer som har ID bar.

525
00:25:33,576 --> 00:25:35,400
>> TOMAS Reimers: Og dette strekker.

526
00:25:35,400 --> 00:25:36,450
At CSS strekker.

527
00:25:36,450 --> 00:25:42,260
Akkurat som i CSS, kan du velge alle
koblinger, som har klassen foo.

528
00:25:42,260 --> 00:25:43,420
Her er det det samme.

529
00:25:43,420 --> 00:25:52,750
>> Du kan gjøre a.foo, som ville velge
alle linkene med klassen foo.

530
00:25:52,750 --> 00:25:58,860
Du kan gjøre en skarp bar, noe som ville
Velg koblingen med ID bar og så

531
00:25:58,860 --> 00:25:59,770
videre og så videre.

532
00:25:59,770 --> 00:26:02,120
Enhver CSS velgeren er en gyldig
jQuery velgeren.

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

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

535
00:26:07,996 --> 00:26:11,460
OK, så nå la oss komme inn i en litt
av manipulasjon at vi kan gjøre med

536
00:26:11,460 --> 00:26:12,870
vår jQuery.

537
00:26:12,870 --> 00:26:19,280
Så jQuery har en bestemt type
notasjon der vi bare bruke

538
00:26:19,280 --> 00:26:20,170
et punkt ved enden.

539
00:26:20,170 --> 00:26:23,340
Og du kan tenke på dette som i
C hvor vi hadde ulike structs.

540
00:26:23,340 --> 00:26:27,110
Og for å gå inn i disse structs, ville du
bruke en prikk for å komme inn i dem.

541
00:26:27,110 --> 00:26:28,480
>> Dette er, på en måte, en lignende ting.

542
00:26:28,480 --> 00:26:33,570
Først nå har vi funksjoner innenfor dette
VELGER at vi kan kalle på den.

543
00:26:33,570 --> 00:26:38,640
Så her, den aller første eksempelet
du kan se er en CSS velgeren.

544
00:26:38,640 --> 00:26:45,290
Og i utgangspunktet, hva det gjør er det
gjelder det første elementet CSS til denne

545
00:26:45,290 --> 00:26:46,230
ting som du har valgt -

546
00:26:46,230 --> 00:26:47,720
dette elementet som du har valgt -

547
00:26:47,720 --> 00:26:49,290
med den verdi som.

548
00:26:49,290 --> 00:26:55,390
>> TOMAS Reimers: Så en enkel oversettelse av
det ville være hvis jQuery, i utgangspunktet,

549
00:26:55,390 --> 00:26:57,790
bare tok foo.

550
00:26:57,790 --> 00:27:05,480
Og så i CSS sa,
fargen rød og nær.

551
00:27:05,480 --> 00:27:06,670
Det er den samme ideen.

552
00:27:06,670 --> 00:27:08,800
Hva det er gjort er det valgt
alle foo elementer.

553
00:27:08,800 --> 00:27:10,170
Og så er det anvendt.

554
00:27:10,170 --> 00:27:15,884
Sortering av, eiendommen farge
er lik red.

555
00:27:15,884 --> 00:27:21,070
>> MIKE RIZZO: På samme måte kan vi også endre
det faktiske innholdet i det som er

556
00:27:21,070 --> 00:27:24,870
viser på HTML på siden, noe som
er virkelig kult fordi det betyr at

557
00:27:24,870 --> 00:27:28,095
nettsider kan nå være helt dynamisk
og trenger ikke å være statisk

558
00:27:28,095 --> 00:27:31,660
at du skriver ut ved hjelp av PHP
helt i begynnelsen av

559
00:27:31,660 --> 00:27:33,320
at siden lastes.

560
00:27:33,320 --> 00:27:36,810
Så her, hvis vi ønsket å endre
selve HTML på siden, ville vi nå

561
00:27:36,810 --> 00:27:43,550
ring HTML-funksjonen, som deretter bare
inserts hva vi spesifiserer inn

562
00:27:43,550 --> 00:27:45,390
det elementet som vi har valgt.

563
00:27:45,390 --> 00:27:49,810
Så her er vi velge element med
class foo og deretter sier det er HTML

564
00:27:49,810 --> 00:27:52,200
det er nå hello world.

565
00:27:52,200 --> 00:27:55,600
>> TOMAS Reimers: Og når du tenker på
hva er nyttige anvendelser av

566
00:27:55,600 --> 00:28:00,800
dette, dette CSS ett, er det første som
du kan begynne å tenke på er

567
00:28:00,800 --> 00:28:03,070
i form av enda drop down menyer.

568
00:28:03,070 --> 00:28:08,350
Du kan begynne å gjøre ting som, når
en bruker svever over den øverste delen

569
00:28:08,350 --> 00:28:11,970
av en rullgardin, ønsker du å gjøre
den nederste del er synlig.

570
00:28:11,970 --> 00:28:12,540
Høyre?

571
00:28:12,540 --> 00:28:15,610
>> Så i CSS, har vi eiendommer
å gjøre noe synlig.

572
00:28:15,610 --> 00:28:19,330
Ting som skjerm kolon none
ville gjøre den usynlige.

573
00:28:19,330 --> 00:28:21,190
Visnings blokk ville gjøre det synlig.

574
00:28:21,190 --> 00:28:25,860
Eller selv om du ønsker å gå enklere, du
har ting som sikt gir

575
00:28:25,860 --> 00:28:27,520
synlig, og sikten er lik skjult.

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

577
00:28:30,330 --> 00:28:34,780
>> Og du kan begynne å implementere ting
som drop down menyer riktig

578
00:28:34,780 --> 00:28:38,410
etter at du får gjennom ideen om hvordan
kan du finne ut når denne åpnes,

579
00:28:38,410 --> 00:28:39,850
som vi skal komme gjennom veldig kort.

580
00:28:39,850 --> 00:28:42,160
Men vi kan begynne å se
anvendelser av denne.

581
00:28:42,160 --> 00:28:45,540
På en lignende måte, hvis du skulle prøve
og implementere, la oss si, en chat

582
00:28:45,540 --> 00:28:48,620
motor, og du ønsker å gjøre litt
snakkeboblen kommer opp når du har

583
00:28:48,620 --> 00:28:52,880
fikk en ny melding, når du får den
ny melding, kan du lage en liten

584
00:28:52,880 --> 00:28:55,890
snakkeboblen kommer opp ved å endre
HTML på siden, ikke sant?

585
00:28:55,890 --> 00:29:00,540
Ved å legge til at ekstra snakkeboble
med ekstra tekst i det.

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

587
00:29:01,140 --> 00:29:07,750
>> PUBLIKUM: Så du ville legge denne i
HTML-kode i liksom som en

588
00:29:07,750 --> 00:29:10,534
[Uhørbart]?

589
00:29:10,534 --> 00:29:12,940
>> MIKE RIZZO: Høyre.

590
00:29:12,940 --> 00:29:16,190
Ja, vi får til det
i en liten bit.

591
00:29:16,190 --> 00:29:18,810
Ja, det ligner en
litt til PHP.

592
00:29:18,810 --> 00:29:21,240
Ikke akkurat lik.

593
00:29:21,240 --> 00:29:24,730
>> En god skille å gjøre er hva dette
er faktisk redigerer når vi redigerer

594
00:29:24,730 --> 00:29:28,480
siden fordi det ikke kommer til å bli
redigerer selve filen som blir

595
00:29:28,480 --> 00:29:31,380
holdt på tjeneren fordi verden
bør ikke ha tillatelse

596
00:29:31,380 --> 00:29:32,610
å redigere filene dine.

597
00:29:32,610 --> 00:29:36,080
Dette er bare å redigere hva som skjer på siden
og hva som blir vist i

598
00:29:36,080 --> 00:29:36,950
nettleseren.

599
00:29:36,950 --> 00:29:40,340
Så hvis du var å laste siden på nytt etter,
si, slette noe som vi

600
00:29:40,340 --> 00:29:44,730
ser vi kan gjøre med remove samtale,
at ting vil da dukke opp igjen.

601
00:29:44,730 --> 00:29:48,590
>> TOMAS Reimers: Så en måte å tenke på
dette er hvis jeg er datamaskinen og

602
00:29:48,590 --> 00:29:50,170
Mike er, liksom, serveren.

603
00:29:50,170 --> 00:29:53,850
Hva kommer til å skje er at jeg kommer til å
spør Mike, hei, kan jeg få en kopi av

604
00:29:53,850 --> 00:29:54,630
denne nettsiden?

605
00:29:54,630 --> 00:29:56,190
Og han vil gi meg en kopi av den.

606
00:29:56,190 --> 00:29:57,430
>> Nei, det er ikke den opprinnelige tingen.

607
00:29:57,430 --> 00:29:58,620
Det er bare en kopi.

608
00:29:58,620 --> 00:30:00,450
Og da ville det være som, oh,
det er Java her.

609
00:30:00,450 --> 00:30:02,450
Åpenbart bør jeg redigere
side å være som dette.

610
00:30:02,450 --> 00:30:04,250
Og jeg redigerer din kopi.

611
00:30:04,250 --> 00:30:05,920
>> Men det er ikke å utføring
selve kopien.

612
00:30:05,920 --> 00:30:08,480
Og hvis jeg skulle spørre ham igjen
oppdaterer siden, -

613
00:30:08,480 --> 00:30:10,060
hei, kan jeg ha en annen ren kopi -

614
00:30:10,060 --> 00:30:11,440
han kommer til å gi meg
annen ren kopi.

615
00:30:11,440 --> 00:30:14,240
Og så, jeg kommer til å gjøre det samme
liker, oh, JS dette her som sier

616
00:30:14,240 --> 00:30:14,866
å redigere dette.

617
00:30:14,866 --> 00:30:17,460
Og jeg kommer til å fortsette med det.

618
00:30:17,460 --> 00:30:20,930
>> MIKE RIZZO: Så en veldig kul ting
at du kan gjøre med jQuery er

619
00:30:20,930 --> 00:30:24,350
faktisk legge til ulike typer
av animasjoner til siden din.

620
00:30:24,350 --> 00:30:27,440
Jeg vet ikke om du noensinne har sett hvor
du prøver å fyll ut et skjema

621
00:30:27,440 --> 00:30:31,250
online, og du trenger ikke fylle ut
tingene riktig.

622
00:30:31,250 --> 00:30:33,440
Så en liten ting glir ned
på toppen og sier at du

623
00:30:33,440 --> 00:30:34,820
har ikke gjort dette riktig.

624
00:30:34,820 --> 00:30:36,260
Vennligst prøv igjen.

625
00:30:36,260 --> 00:30:37,890
Og så, det kan også bare gli opp.

626
00:30:37,890 --> 00:30:40,710
>> Slår ut jQuery har innebygde funksjoner
som gjør alt dette

627
00:30:40,710 --> 00:30:44,180
animasjon virkelig, virkelig enkelt.

628
00:30:44,180 --> 00:30:46,750
Så det er første fade
ut-funksjon, som

629
00:30:46,750 --> 00:30:47,710
du kan ringe på noe.

630
00:30:47,710 --> 00:30:55,650
Og det er en måte å endre CSS av
som element i et animert måte.

631
00:30:55,650 --> 00:30:58,480
Så det tar uansett element
du kaller det fade ut på.

632
00:30:58,480 --> 00:31:03,990
Og så endrer det opacity sakte
før det går helt gjennomsiktig.

633
00:31:03,990 --> 00:31:07,330
>> TOMAS Reimers: Den andre kjente
er skli ned, noe som vil gjøre

634
00:31:07,330 --> 00:31:08,800
noe ut ved å skyve den ned.

635
00:31:08,800 --> 00:31:12,840
Så i tilfelle av rullegardinmenyen,
igjen, når vi lærte å gjenkjenne

636
00:31:12,840 --> 00:31:15,310
når dette har blitt svevde over,
du kan bare fortelle dette bunnen

637
00:31:15,310 --> 00:31:16,910
del skli ned nå.

638
00:31:16,910 --> 00:31:19,270
Og så ser det ut til
ved å skyve ned.

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

640
00:31:22,042 --> 00:31:26,590
>> MIKE RIZZO: Og så, hvis du bare har
noen form for animasjon i bakhodet at

641
00:31:26,590 --> 00:31:29,080
jQuery gir ikke nødvendigvis.

642
00:31:29,080 --> 00:31:32,690
For eksempel, la oss si jQuery
ikke gi deg et lysbilde

643
00:31:32,690 --> 00:31:33,750
ned og skyv opp.

644
00:31:33,750 --> 00:31:36,740
Vel, la oss si at du ønsket å skyve
noe inn fra venstre eller fra

645
00:31:36,740 --> 00:31:39,880
den rette typen som CS50
hovedsiden gjør når

646
00:31:39,880 --> 00:31:42,080
du går til et nytt panel.

647
00:31:42,080 --> 00:31:45,030
Du vil da sannsynligvis måtte
implementere det selv ved hjelp av den

648
00:31:45,030 --> 00:31:49,310
animere funksjon innenfor jQuery.

649
00:31:49,310 --> 00:31:51,350
>> Så på samme måte, du bare animere.

650
00:31:51,350 --> 00:31:55,850
Og så, i det det tar en
ordbok av de ulike verdier

651
00:31:55,850 --> 00:31:57,340
at du skal passere.

652
00:31:57,340 --> 00:32:06,960
Så her, hvis vi ønsket å animere
element foo slik at dens bredde enten

653
00:32:06,960 --> 00:32:10,880
utvider eller kontrakter til 80 piksler,
avhengig av hva det er i dag.

654
00:32:10,880 --> 00:32:14,100
Vi ville bare passere det som
argumentet i den.

655
00:32:14,100 --> 00:32:18,060
>> Animere også har noen andre argumenter
at du kan gi det, for eksempel,

656
00:32:18,060 --> 00:32:21,150
hastigheten på animasjonen
at du ønsker å gi det.

657
00:32:21,150 --> 00:32:26,220
Og for å gjøre det, jeg ville bare si
raskt Google jQuery animere.

658
00:32:26,220 --> 00:32:31,710
Og så, bringe opp denne siden, kan du
se det har en haug med forskjellig

659
00:32:31,710 --> 00:32:33,560
egenskaper som du kan passere den.

660
00:32:33,560 --> 00:32:35,990
>> Og jeg oppfordrer deg - når du kommer
over noe som du ikke

661
00:32:35,990 --> 00:32:40,390
vet eller bare ønsker å lære mer om en
bestemt metode som du kan ringe

662
00:32:40,390 --> 00:32:41,270
på noe -

663
00:32:41,270 --> 00:32:44,440
bare google det. jQuery er ekstremt
godt dokumentert.

664
00:32:44,440 --> 00:32:49,140
Og ofte er det mange av
eksempler på at de gir for deg.

665
00:32:49,140 --> 00:32:52,470
Hvis vi bla nedover -

666
00:32:52,470 --> 00:32:53,720
helt ned -

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

668
00:32:57,660 --> 00:32:59,190
at vi kan bruke, så vel.

669
00:32:59,190 --> 00:33:02,480
>> Igjen, når en utvikler faktisk går
gjennom bryet med å skrive en

670
00:33:02,480 --> 00:33:05,810
bibliotek, de vanligvis vil
noen til å bruke den.

671
00:33:05,810 --> 00:33:09,400
Så i tillegg kommer til å
være en dokumentasjon.

672
00:33:09,400 --> 00:33:12,270
Og at dokumentasjonen kan vanligvis være
finnes på prosjektets side, noe som er

673
00:33:12,270 --> 00:33:14,970
hvorfor vi ga deg det opprinnelige området i
begynnelsen, som knytter deg til

674
00:33:14,970 --> 00:33:18,080
prosjektsider, slik at du kan
se at dokumentasjon.

675
00:33:18,080 --> 00:33:22,670
>> Vanligvis prosjektet siden i saken
av [uhørbart], det fortalte du det

676
00:33:22,670 --> 00:33:23,940
Navnene på de klasser.

677
00:33:23,940 --> 00:33:27,250
I tilfelle av Javascript, det gir
du navnet på funksjonene.

678
00:33:27,250 --> 00:33:35,310
Forresten, hvis vi bla opp til toppen,
en rask side note på funksjoner er

679
00:33:35,310 --> 00:33:39,080
når du ser en funksjon implementert
som dette med den harde

680
00:33:39,080 --> 00:33:43,800
parentes i midten, det betyr
at denne egenskapen er valgfri.

681
00:33:43,800 --> 00:33:44,750
Bare en heads up.

682
00:33:44,750 --> 00:33:47,350
Jeg har sett en rekke spørsmål
om det.

683
00:33:47,350 --> 00:33:50,370
>> Så her kan vi se at
besjelede tar eiendommer

684
00:33:50,370 --> 00:33:51,800
som et nødvendig argument.

685
00:33:51,800 --> 00:33:54,870
Og alt annet er valgfritt.

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

687
00:33:56,136 --> 00:33:58,090
du kan tenke på dette, liksom
av, som man-sidene.

688
00:33:58,090 --> 00:34:04,275
Man sider er dokumentasjon for C og
for en rekke andre ting, så vel.

689
00:34:04,275 --> 00:34:11,020
>> MIKE RIZZO: Så vi har lært å
bytte til et annet CSS på siden,

690
00:34:11,020 --> 00:34:14,040
animere det, og fjerne legge til HTML.

691
00:34:14,040 --> 00:34:16,889
Men en av de virkelig mektigste
ting om Java

692
00:34:16,889 --> 00:34:18,270
og spesielt jQuery -

693
00:34:18,270 --> 00:34:22,570
hva det lar deg gjøre er å svare på
forskjellige elementer som skjer.

694
00:34:22,570 --> 00:34:25,380
For eksempel har vi her
en hendelseshåndterer.

695
00:34:25,380 --> 00:34:28,210
Og det betyr bare når dette
hendelse skjer, vi håndtere det på en

696
00:34:28,210 --> 00:34:29,280
bestemt måte.

697
00:34:29,280 --> 00:34:35,159
>> Så her, det generiske jQuery hendelsen
behandleren er prikken på.

698
00:34:35,159 --> 00:34:42,949
Og så, den første tingen du oppga
er hvilket arrangement det skal

699
00:34:42,949 --> 00:34:43,810
lytte til.

700
00:34:43,810 --> 00:34:45,610
Så her er det et klikk som
vi venter på.

701
00:34:45,610 --> 00:34:49,250
>> TOMAS Reimers: Alternativt har du
på hover, som er en svært populær en.

702
00:34:49,250 --> 00:34:52,000
Så tilbake til min nedtrekksmenyen idé.

703
00:34:52,000 --> 00:34:54,239
Du vil ha den øverste på hover.

704
00:34:54,239 --> 00:34:56,096
Og så kan du endre det.

705
00:34:56,096 --> 00:34:56,830
>> MIKE RIZZO: Høyre.

706
00:34:56,830 --> 00:35:01,680
Og så, når det skjer, det bare
utfører denne funksjonen at vi gir den

707
00:35:01,680 --> 00:35:05,080
som et argument, og at
det varsler hei eller hi.

708
00:35:05,080 --> 00:35:08,900
>> TOMAS Reimers: Så i tilfelle av
Javascript, er dette et sted vi trenger å

709
00:35:08,900 --> 00:35:12,970
fjerne oss fra C. Vi kan faktisk
ta funksjoner som argumenter.

710
00:35:12,970 --> 00:35:15,940
Og det finnes en rekke virkelig
komplekse måter å gjøre dette.

711
00:35:15,940 --> 00:35:17,940
Vi kommer til å fremme en måte,
som er at du kan definere

712
00:35:17,940 --> 00:35:19,270
fungere akkurat der.

713
00:35:19,270 --> 00:35:22,540
>> Så når du spør etter en funksjon som
en parameter, er du i utgangspunktet bare

714
00:35:22,540 --> 00:35:24,500
kommer til å definere funksjonen
på stedet.

715
00:35:24,500 --> 00:35:27,090
Og måten du definerer en funksjon
i Javascript er du

716
00:35:27,090 --> 00:35:28,820
bokstavelig talt si funksjon.

717
00:35:28,820 --> 00:35:30,130
Deretter, som regel, i navnet
av funksjonen.

718
00:35:30,130 --> 00:35:32,510
Men vi kommer aldri til å referere
denne funksjonen igjen.

719
00:35:32,510 --> 00:35:34,040
Så vi lar det navnløse.

720
00:35:34,040 --> 00:35:40,440
>> Deretter parentes, så krøllete
bukseseler, og deretter koden i det.

721
00:35:40,440 --> 00:35:42,540
Så vi forstår dette kan
være litt forvirrende.

722
00:35:42,540 --> 00:35:45,180
Så vi gi deg den generelle formen for
hva en hendelseshåndterer ser ut som

723
00:35:45,180 --> 00:35:47,790
nedenfor, som er på arrangementer.

724
00:35:47,790 --> 00:35:50,598
Og så, en kode på innsiden som.

725
00:35:50,598 --> 00:35:52,478
>> MIKE RIZZO: Er det noen
spørsmål om dette?

726
00:35:52,478 --> 00:35:54,818
Dette kan være litt forvirrende
første gang du ser den.

727
00:35:54,818 --> 00:35:57,550
>> TOMAS Reimers: Du faktisk ønsker å
åpne opp en fil og vise dem noen

728
00:35:57,550 --> 00:35:58,155
jQuery akkurat nå?

729
00:35:58,155 --> 00:35:59,853
>> MIKE RIZZO: Ja, la oss gjøre det.

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

731
00:36:00,256 --> 00:36:02,490
>> TOMAS Reimers: Så nå er vi
i apparatet.

732
00:36:02,490 --> 00:36:07,730
Og det vi har gjort er at vi har tatt
frihet til å skape både en index.html

733
00:36:07,730 --> 00:36:10,100
fil, som linker til
en Javascript-fil.

734
00:36:10,100 --> 00:36:12,880
Og kan vi åpne opp -

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

736
00:36:15,170 --> 00:36:16,630
Vel, det gjør to ting.

737
00:36:16,630 --> 00:36:18,350
>> Den første er det linker til
Javascript-filen.

738
00:36:18,350 --> 00:36:21,250
Og vi vil se at her oppe.

739
00:36:21,250 --> 00:36:25,340
Vi ser at i hodet av
HTML-dokument, spesielt.

740
00:36:25,340 --> 00:36:28,260
Så du får se det som
vi, i utgangspunktet, sier SRC,

741
00:36:28,260 --> 00:36:29,590
som står for kilde.

742
00:36:29,590 --> 00:36:30,630
Og det er nettadressen.

743
00:36:30,630 --> 00:36:32,700
>> Så her kan du si vi har
inkludert jQuery.

744
00:36:32,700 --> 00:36:34,290
Og vi har også inkludert skript.

745
00:36:34,290 --> 00:36:40,630
Den andre måten å inkludere Java er
at du kan inkludere et inline script

746
00:36:40,630 --> 00:36:44,600
tag som vi har på bunnen hvor det
sier script type er tekst Javascript.

747
00:36:44,600 --> 00:36:46,960
>> Så vi sier, lytte, vi er
om å inkludere et skript.

748
00:36:46,960 --> 00:36:51,890
Og den typen som skriptet er
Javascript, som er en type av tekst.

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

750
00:36:52,550 --> 00:36:56,490
>> MIKE RIZZO: Så dette, type, får
spørsmålet om hvordan vi inkluderer

751
00:36:56,490 --> 00:37:02,340
Java våre filer fordi når vi
hadde PHP, gjør vi noe sånt som dette.

752
00:37:02,340 --> 00:37:07,570
Og så, har våre PHP funksjoner -
la oss si bestandene gjøre

753
00:37:07,570 --> 00:37:09,150
noe med det -

754
00:37:09,150 --> 00:37:10,490
går inn der.

755
00:37:10,490 --> 00:37:13,860
Men nå har vi de skriptkodene
at vi gir det, som faktisk er

756
00:37:13,860 --> 00:37:19,470
en del av HTML seg selv fordi det ikke er
falsk å være en HTML-fil som det

757
00:37:19,470 --> 00:37:25,070
er i PHP fordi hvis du faktisk gå i
og se på kilden til siden,

758
00:37:25,070 --> 00:37:28,430
du vil se disse skriptkodene i det
med Java forbundet med

759
00:37:28,430 --> 00:37:29,800
dem i det.

760
00:37:29,800 --> 00:37:31,760
>> Så da, hvis vi ønsket å
skrive noen Java -

761
00:37:31,760 --> 00:37:37,110
la oss bare si at vi ønsket å endre kroppen
fordi akkurat nå er jeg ikke har

762
00:37:37,110 --> 00:37:40,020
eventuelle andre koder som jeg virkelig kan
redigere foruten kroppen.

763
00:37:40,020 --> 00:37:42,450
La oss bare si at jeg ønsket å
endre CSS av det.

764
00:37:42,450 --> 00:37:46,190
Så får vi gå videre og endring
fargen på det til rødt.

765
00:37:46,190 --> 00:37:47,380
>> Så jeg lagre filen.

766
00:37:47,380 --> 00:37:52,700
La oss gå tilbake til vår web-side, refresh,
og det gjør det automatisk

767
00:37:52,700 --> 00:37:55,920
fordi det ikke ser ut som det ventet
i det hele tatt fordi vi ikke lyttet

768
00:37:55,920 --> 00:37:59,450
for en hendelse eller noe sånt.

769
00:37:59,450 --> 00:38:02,800
>> TOMAS Reimers: Så hvis vi går tilbake til det
fil i særdeleshet - HTML

770
00:38:02,800 --> 00:38:04,710
fil - hva du skal
å se er at vi har -

771
00:38:04,710 --> 00:38:06,810
husk at dette er lastet,
liksom, kronologisk.

772
00:38:06,810 --> 00:38:09,910
Så vi har først hodet.
den laster disse to filene.

773
00:38:09,910 --> 00:38:10,800
Så går vi til kroppen.

774
00:38:10,800 --> 00:38:11,640
Og vi ser hello world.

775
00:38:11,640 --> 00:38:13,030
Så vi gjengi hello world.

776
00:38:13,030 --> 00:38:15,240
>> Og så det siste vi har
er vi har skriptmerket.

777
00:38:15,240 --> 00:38:20,880
Så det kjører skriptmerket fordi det er
ikke fortelle det å vente på noe.

778
00:38:20,880 --> 00:38:24,700
Og det er den mest grunnleggende
måte å kjøre Javascript.

779
00:38:24,700 --> 00:38:29,200
>> Med det sagt, kan du sette skriptet
tagge opp i overskriften bare

780
00:38:29,200 --> 00:38:31,240
å vise dette punktet?

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

782
00:38:34,450 --> 00:38:35,700
Og kjøre den.

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

784
00:38:38,880 --> 00:38:41,070
Vi kommer til å legge merke til at det
ikke endre fargen.

785
00:38:41,070 --> 00:38:44,210
Og dette er et av problemene med
Javascript er at ting er lastet

786
00:38:44,210 --> 00:38:45,930
i en kronologisk rekkefølge.

787
00:38:45,930 --> 00:38:49,750
>> Så på den tiden at den koden
var i gang, vi valgte -

788
00:38:49,750 --> 00:38:52,530
gå tilbake -

789
00:38:52,530 --> 00:38:53,670
body-koden.

790
00:38:53,670 --> 00:38:57,560
Body-koden ikke finnes ennå fordi
Javascript er i tråd med HTML.

791
00:38:57,560 --> 00:39:01,790
Så leseren er som velger kroppen.

792
00:39:01,790 --> 00:39:02,760
Det finnes ikke noe slikt ennå.

793
00:39:02,760 --> 00:39:03,600
Så vi kan se bort fra det.

794
00:39:03,600 --> 00:39:05,330
Og vi holde det gående.

795
00:39:05,330 --> 00:39:07,200
>> Og da vi definere en body-koden.

796
00:39:07,200 --> 00:39:09,670
Men som aldri blir oppdatert.

797
00:39:09,670 --> 00:39:12,560
Så når du implementere script
tags, sørg for at du plasserer

798
00:39:12,560 --> 00:39:15,502
etter body-koden.

799
00:39:15,502 --> 00:39:16,820
Neste lysbilde.

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

801
00:39:17,830 --> 00:39:19,330
Så vi endret noe.

802
00:39:19,330 --> 00:39:21,910
Men det så ikke ut som det svarte til
oss i det hele tatt fordi det bare slags

803
00:39:21,910 --> 00:39:24,150
gjorde det så snart det lastet siden.

804
00:39:24,150 --> 00:39:27,700
Så nå, i stedet for å gjøre dette, hvorfor
trenger vi ikke legge en hendelseshåndterer.

805
00:39:27,700 --> 00:39:31,020
>> Så la oss gjøre noe
til kroppen på nytt.

806
00:39:31,020 --> 00:39:33,490
Og la oss si at vi gjør det på -

807
00:39:33,490 --> 00:39:34,500
klikk.

808
00:39:34,500 --> 00:39:35,750
Vi vil legge til en funksjon.

809
00:39:35,750 --> 00:39:38,270

810
00:39:38,270 --> 00:39:39,690
>> TOMAS Reimers: La oss endre
det er farge til rødt igjen.

811
00:39:39,690 --> 00:39:40,000
Hvorfor ikke?

812
00:39:40,000 --> 00:39:41,680
>> MIKE RIZZO: Ja, la oss skifte
sin "farge til rødt igjen.

813
00:39:41,680 --> 00:39:46,310

814
00:39:46,310 --> 00:39:46,900
OK.

815
00:39:46,900 --> 00:39:48,480
Så la oss oppdater siden.

816
00:39:48,480 --> 00:39:49,530
OK, ser vi -

817
00:39:49,530 --> 00:39:52,290
som forventet, vil det ikke slå rødt ennå.

818
00:39:52,290 --> 00:39:53,610
Men da kan vi gå videre og klikk på den.

819
00:39:53,610 --> 00:39:54,270
>> TOMAS Reimers: Og det blir røde.

820
00:39:54,270 --> 00:39:56,090
>> MIKE RIZZO: Og det gjør
blir røde som forventet.

821
00:39:56,090 --> 00:39:59,010
>> TOMAS Reimers: Og vi kan se hvordan
vi kan begynne å bygge helt grunnleggende

822
00:39:59,010 --> 00:40:00,170
interaksjon.

823
00:40:00,170 --> 00:40:03,850
Andre ting vi kanskje vil gjøre er,
hvis vi ikke ønsker å gjøre kroppen

824
00:40:03,850 --> 00:40:07,230
farge rød, la oss gjøre HTML
bakgrunnsfargen rød.

825
00:40:07,230 --> 00:40:08,480
Bare så det er den samme CSS.

826
00:40:08,480 --> 00:40:19,960

827
00:40:19,960 --> 00:40:23,320
>> Og når vi endre det, kan vi se dette
meget dramatiske effekten av å endre

828
00:40:23,320 --> 00:40:25,510
hele siden.

829
00:40:25,510 --> 00:40:29,100
Så igjen, hvis du implementere ting,
du kan ha en komponent

830
00:40:29,100 --> 00:40:30,150
som er ment å bli klikket på.

831
00:40:30,150 --> 00:40:32,710
La oss si en Exit-knappen og
en hel annen komponent,

832
00:40:32,710 --> 00:40:33,830
som er ment til å reagere.

833
00:40:33,830 --> 00:40:35,755
Så du ville fjerne et vindu
når det skjer.

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
Bare som et eksempel -

837
00:40:42,200 --> 00:40:44,400
du ikke fikk se dette tidligere -

838
00:40:44,400 --> 00:40:47,500
Jeg skal bare vise deg hvordan det ser
liker når vi skjuler noe.

839
00:40:47,500 --> 00:40:52,220
Så jeg skal gå videre og ikke gli opp.

840
00:40:52,220 --> 00:40:54,440
>> TOMAS Reimers: Lyst å pakke det i en
avsnitt type før vi gjør det?

841
00:40:54,440 --> 00:40:55,132
>> MIKE RIZZO: OK.

842
00:40:55,132 --> 00:40:59,135
Ja, hvorfor kan ikke vi gjøre det bare så
vi kan velge det litt mer.

843
00:40:59,135 --> 00:41:00,490
>> TOMAS Reimers: Og la oss
gi den en klasse.

844
00:41:00,490 --> 00:41:01,740
>> MIKE RIZZO: Yeah.

845
00:41:01,740 --> 00:41:06,575

846
00:41:06,575 --> 00:41:09,920
OK, så la oss se.

847
00:41:09,920 --> 00:41:14,820
I stedet for å velge den faktiske kropps
nå, vil jeg bare velge alt med

848
00:41:14,820 --> 00:41:18,780
klasse hallo, som her vi
bare har én ting.

849
00:41:18,780 --> 00:41:20,900
Så vi bør ikke ha for å
bekymre deg for det.

850
00:41:20,900 --> 00:41:23,080
>> Så jeg skal oppdatere den.

851
00:41:23,080 --> 00:41:24,230
Jeg skal gå videre og klikk på den.

852
00:41:24,230 --> 00:41:27,890
Og det, liksom, gjorde en merkelig lysbilde
opp ting, som ikke ser at

853
00:41:27,890 --> 00:41:29,580
attraktiv.

854
00:41:29,580 --> 00:41:31,060
Vanligvis gjør de ser ganske fin.

855
00:41:31,060 --> 00:41:32,720
Jeg antar dette - for noen
grunn - ikke gjorde det.

856
00:41:32,720 --> 00:41:36,640
Jeg vil bare gjøre en fade ut så
du kan se på det også.

857
00:41:36,640 --> 00:41:38,100
Mye hyggeligere.

858
00:41:38,100 --> 00:41:41,150
>> Og så, hvis jeg åpner opp Java
konsollen igjen, og vi ønsker å se hva

859
00:41:41,150 --> 00:41:43,900
det ser ut når vi visne det i.

860
00:41:43,900 --> 00:41:46,920
Nå, jeg bare ringe visne med på det.

861
00:41:46,920 --> 00:41:48,830
Og det forsvinner tilbake igjen

862
00:41:48,830 --> 00:41:56,150
>> Tilsvarende kunne vi faktisk også passere
et argument for å fade inn eller ut,

863
00:41:56,150 --> 00:41:57,640
som er, på en måte, hastigheten av den.

864
00:41:57,640 --> 00:42:02,220
Så la oss gå videre og si at vi ønsker
det å gå sakte visne i.

865
00:42:02,220 --> 00:42:04,250
Så jeg antar det fortsatt virket
ganske raskt.

866
00:42:04,250 --> 00:42:06,180
Men det var tregere enn før.

867
00:42:06,180 --> 00:42:10,340
>> TOMAS Reimers: Og hvis du ønsker å finne
ut mer om disse tingene, igjen,

868
00:42:10,340 --> 00:42:13,410
bare gå til dokumentasjons jQuery,
som vi har gitt deg, og lese

869
00:42:13,410 --> 00:42:13,735
gjennom disse.

870
00:42:13,735 --> 00:42:15,790
De dokumenterer deres funksjoner
utrolig godt.

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
Så jeg antar la oss gå tilbake til dette.

874
00:42:21,560 --> 00:42:23,490
Og vi kan snakke om vår siste side.

875
00:42:23,490 --> 00:42:24,690
Vel, kan vi avslutte med Bootstrap.

876
00:42:24,690 --> 00:42:27,140
Og så skal vi åpne den opp
for noen spørsmål.

877
00:42:27,140 --> 00:42:30,180
Og hvis dere har noen ideer som
du har lyst til å prøve å kaste opp og se

878
00:42:30,180 --> 00:42:34,150
hvis vi kan gjennomføre dem med
Java raskt.

879
00:42:34,150 --> 00:42:37,890
>> Så veldig raskt om Bootstrap, som
ble automatisk inkludert i

880
00:42:37,890 --> 00:42:41,700
din siste problemet satt i CSS-mappen
og faktisk koblet til i din

881
00:42:41,700 --> 00:42:43,190
header.php.

882
00:42:43,190 --> 00:42:46,740
Så du kunne ha lagt til klasser som
er definert innenfor Bootstrap til det.

883
00:42:46,740 --> 00:42:50,490
Og det ville ha automatisk stylet
disse ting deretter.

884
00:42:50,490 --> 00:42:54,550
>> TOMAS Reimers: Så Bootstrap er et veldig
magisk ting utviklet av folket

885
00:42:54,550 --> 00:42:55,340
på Twitter.

886
00:42:55,340 --> 00:42:57,230
Og hva det var ment å gjøre var -

887
00:42:57,230 --> 00:43:00,740
før nettsteder var virkelig vanskelig å gjøre
se fint ut, spesielt når vi hadde

888
00:43:00,740 --> 00:43:02,200
en rekke vanlige komponenter.

889
00:43:02,200 --> 00:43:04,770
Så mye av knappene på
web sett det samme.

890
00:43:04,770 --> 00:43:08,960
>> Mange av tekstfelter kan gjøres til
ser bedre ut enn standard tekst

891
00:43:08,960 --> 00:43:13,620
feltet du sikkert vet fra virkelig
gamle nettsider eller virkelig dårlig gjort

892
00:43:13,620 --> 00:43:18,210
nettsteder, som bare ser ut som bokstavelig
tekstbokser uten noen form for tekst

893
00:43:18,210 --> 00:43:21,190
skygge eller noen form for fin disposisjon.

894
00:43:21,190 --> 00:43:24,540
Så hva Bootstrap gjorde var det sagt, vel,
Vi har mye felles stiler.

895
00:43:24,540 --> 00:43:28,210
Hvorfor kan ikke vi gjøre ett felles sett av CSS
og et felles sett av Javascript som

896
00:43:28,210 --> 00:43:32,210
vel, noe som kan style det som er og som
kan gi folk ting som dråpe

897
00:43:32,210 --> 00:43:34,610
down menyer, kan som gi folk
ting som modals.

898
00:43:34,610 --> 00:43:38,580
>> Modal er hva som dukker over siden
når det er strengt tatt

899
00:43:38,580 --> 00:43:41,090
noe, som hemmer videre
interaksjon til du

900
00:43:41,090 --> 00:43:43,110
samhandle med det.

901
00:43:43,110 --> 00:43:45,820
Noe sånt som dette er, er du sikker
du ønsker å slette denne tingen?

902
00:43:45,820 --> 00:43:49,100
Du kan egentlig ikke gjøre noe annet
før du sier ja eller nei.

903
00:43:49,100 --> 00:43:52,720
>> Det tok alt dette, og det pakket det
sammen og sa, her vi går.

904
00:43:52,720 --> 00:43:54,630
Folk kan nå bruke dette.

905
00:43:54,630 --> 00:43:56,830
Og du kan finne det over
på getbootstrap.com.

906
00:43:56,830 --> 00:44:00,480
Det ble automatisk inkludert i
din siste oppgavesettet.

907
00:44:00,480 --> 00:44:04,160
Og du er mer enn velkommen til
bruke det på det endelige prosjektet.

908
00:44:04,160 --> 00:44:06,950
Og hvis du ønsker å følge det
lenke for å få Bootstrap.

909
00:44:06,950 --> 00:44:10,590

910
00:44:10,590 --> 00:44:15,700
>> Du vil se her er den
Bootstrap CSS området.

911
00:44:15,700 --> 00:44:16,860
Du vil se Bootstrap.

912
00:44:16,860 --> 00:44:20,450
Og hvis du blar nedover, vil du se
hvordan du laster ned den, hvordan du

913
00:44:20,450 --> 00:44:21,900
installere det, et cetera.

914
00:44:21,900 --> 00:44:24,700
>> MIKE RIZZO: Og du kan også,
interessant nok, tilpasse den til

915
00:44:24,700 --> 00:44:27,770
være hva slags temaer
som du ønsker.

916
00:44:27,770 --> 00:44:31,270
Jeg vet det er noe jeg gjorde for min
siste prosjektet da jeg tok klassen

917
00:44:31,270 --> 00:44:32,050
ble tilpasse den.

918
00:44:32,050 --> 00:44:34,540
En annen versjon av Bootstrap at
hadde et annet fargevalg og

919
00:44:34,540 --> 00:44:36,700
ulike former av noen
forskjellige ting.

920
00:44:36,700 --> 00:44:38,250
Så jeg oppfordrer deg til å leke med det.

921
00:44:38,250 --> 00:44:39,440
Det er litt morsomt å gjøre.

922
00:44:39,440 --> 00:44:43,230
>> TOMAS Reimers: Ser over toppen
igjen, det er veldig likt til Font

923
00:44:43,230 --> 00:44:44,970
Awesome nettstedet.

924
00:44:44,970 --> 00:44:47,810
Mye av dokumentasjonen vil starte
å virke lignende når du har

925
00:44:47,810 --> 00:44:48,940
sett nok av det.

926
00:44:48,940 --> 00:44:51,260
Så her har vi CSS
komponent av dette.

927
00:44:51,260 --> 00:44:53,540
Og du får se hvordan det
kan style ting.

928
00:44:53,540 --> 00:44:56,780
Så hvis du klikker på tabeller, for eksempel,
du kan raskt få et

929
00:44:56,780 --> 00:45:01,710
Tabellen ganske ved å legge
klassen bordet til den.

930
00:45:01,710 --> 00:45:03,150
>> Samme tingene for knapper.

931
00:45:03,150 --> 00:45:12,140
Hvis du bare legge klassen BTN og BTN
Standard eller BTN primære, kan du

932
00:45:12,140 --> 00:45:16,240
få en av disse knapper
med disse ferdiglagde stiler.

933
00:45:16,240 --> 00:45:18,570
Og så, hvis du leter etter
noe mer komplisert enn bare

934
00:45:18,570 --> 00:45:24,100
restyling hva w allerede har, over på
fanen Java øverst vi

935
00:45:24,100 --> 00:45:25,120
har en haug med komponenter.

936
00:45:25,120 --> 00:45:30,410
>> Så her har vi overganger, modals,
innføyning faner og verktøytips.

937
00:45:30,410 --> 00:45:35,530
Et verktøytips er hva som dukker opp under
musen når du holder på noe.

938
00:45:35,530 --> 00:45:40,280
Popovers, varsler, knapper, sammenleggbart
trekkspill er hva

939
00:45:40,280 --> 00:45:41,190
de er vanligvis kalles.

940
00:45:41,190 --> 00:45:43,045
Karuseller, som flip
gjennom for eksempel bilder.

941
00:45:43,045 --> 00:45:52,190

942
00:45:52,190 --> 00:45:54,840
>> Så de er de komponentene
av Bootstrap.

943
00:45:54,840 --> 00:45:57,620
Jeg vil oppfordre deg til
sterkt gå se på dem.

944
00:45:57,620 --> 00:46:01,780
Det er en Javascript-komponent
og en CSS-komponent.

945
00:46:01,780 --> 00:46:03,880
Føl deg fri til å bruke dem som du vil.

946
00:46:03,880 --> 00:46:06,730
Vi kommer ikke til å gå for mye inn i dem
fordi vi føler dokumentasjonen

947
00:46:06,730 --> 00:46:09,360
er veldig bra gjort.

948
00:46:09,360 --> 00:46:10,540
Og ja.

949
00:46:10,540 --> 00:46:14,500
Har du noen spørsmål om det?

950
00:46:14,500 --> 00:46:19,430
>> MIKE RIZZO: Så som en er veldig rask
side, utformingen av denne web siden som

951
00:46:19,430 --> 00:46:21,830
vi raskt satt sammen for
denne presentasjonen er

952
00:46:21,830 --> 00:46:24,290
faktisk gjort ved hjelp av Bootstrap.

953
00:46:24,290 --> 00:46:27,810
Som du ser, når vi klikker på disse
ulike kategoriene, er vi faktisk aldri

954
00:46:27,810 --> 00:46:30,750
forlater denne aktuelle index.html side.

955
00:46:30,750 --> 00:46:36,400
Så det vi har er forskjellige divs
innenfor denne index.html.

956
00:46:36,400 --> 00:46:39,610
Og så, når vi klikker på en annen
kategorien, er det bare å endre

957
00:46:39,610 --> 00:46:41,590
som ens viser.

958
00:46:41,590 --> 00:46:47,390
>> Så det posisjonerer dem tilsvarende,
endrer HTML på siden, slik at

959
00:46:47,390 --> 00:46:52,330
den aktive fanen er merket som aktiv så
det ser annerledes og utseende

960
00:46:52,330 --> 00:46:52,820
veldig fint.

961
00:46:52,820 --> 00:46:57,260
>> TOMAS Reimers: Så det var gjort
uten oss å skrive nesten alle CSS.

962
00:46:57,260 --> 00:47:01,440
Vi ser også en header øverst,
der fargene er av oss.

963
00:47:01,440 --> 00:47:04,800
Men selve å sette den på
toppen og gjør

964
00:47:04,800 --> 00:47:06,660
det bla var Bootstrap.

965
00:47:06,660 --> 00:47:09,720
Og så selv for et annet bibliotek - dette
er ikke en vi snakket om, men en

966
00:47:09,720 --> 00:47:11,580
du kan Google hvis du vil.

967
00:47:11,580 --> 00:47:15,130
Dette kalles prettify.js.

968
00:47:15,130 --> 00:47:20,650
Og det vil syntaks høydepunkt koden
for deg med både CSS og Javascript.

969
00:47:20,650 --> 00:47:23,480

970
00:47:23,480 --> 00:47:27,070
>> Det siste vi ønsker å snakke om
før vi slipper deg ut i den

971
00:47:27,070 --> 00:47:30,620
verden for å se på biblioteker for å finne ut
hvordan du bruker dem og til, forhåpentligvis,

972
00:47:30,620 --> 00:47:34,640
lese dokumentasjon og finne det du
Behovet er hvordan man skal finne biblioteker.

973
00:47:34,640 --> 00:47:37,000
Så det første er vi bare
kommer til å presse Google.

974
00:47:37,000 --> 00:47:37,810
Gå Google.

975
00:47:37,810 --> 00:47:41,150
>> Det er bokstavelig talt det vi gjør når vi
trenger å gjøre noe er vi Google.

976
00:47:41,150 --> 00:47:44,730
Er det et Javascript-bibliotek som
tillater meg å manipulere tid i en

977
00:47:44,730 --> 00:47:45,400
nyttig måte?

978
00:47:45,400 --> 00:47:49,510
Så hvis jeg vet at noen bruker å skape
en konto her, og dette er

979
00:47:49,510 --> 00:47:53,010
gjeldende tid, hvordan kan jeg beregne
forskjell at uten å måtte

980
00:47:53,010 --> 00:47:55,020
beregne det selv?

981
00:47:55,020 --> 00:47:59,630
Så dette er faktisk en vanlig ting,
Java time bibliotek.

982
00:47:59,630 --> 00:48:02,440
Og her er vi Moment.js--
den mest populære.

983
00:48:02,440 --> 00:48:06,530
>> Hvis vi trenger et bibliotek å manipulere
noe sånt som farge for å kunne

984
00:48:06,530 --> 00:48:08,650
generere en haug av tilfeldige farger -

985
00:48:08,650 --> 00:48:10,660
eventuelt, for å generere en
stil eller noe -

986
00:48:10,660 --> 00:48:13,480
vi kunne google noe sånt
Javafargebiblioteket.

987
00:48:13,480 --> 00:48:15,620
Og jeg er sikker på at vi ville komme opp med
tusen og en av dem.

988
00:48:15,620 --> 00:48:18,290

989
00:48:18,290 --> 00:48:21,410
Du er velkommen til å lese gjennom dem.

990
00:48:21,410 --> 00:48:24,610
>> Så de fleste ting - når du finner dem -
skal være vert på en av de

991
00:48:24,610 --> 00:48:25,920
nettsteder som vert kode.

992
00:48:25,920 --> 00:48:26,960
De er er noen populære.

993
00:48:26,960 --> 00:48:30,870
Den mest populære, ved
langt, er github.com.

994
00:48:30,870 --> 00:48:35,300
Og hvis du går til GitHub det er faktisk
hvor Normal ble arrangert.

995
00:48:35,300 --> 00:48:36,950
Så hvis du ønsker å gå tilbake til den.

996
00:48:36,950 --> 00:48:38,135
Vis dem at.

997
00:48:38,135 --> 00:48:40,516
>> MIKE RIZZO: Og det er faktisk der
dette er vert for, hvis du lagt merke til.

998
00:48:40,516 --> 00:48:41,000
>> TOMAS Reimers: Yeah.

999
00:48:41,000 --> 00:48:49,078
Så hvis du går over til å normal
og gå til GitHub.

1000
00:48:49,078 --> 00:48:51,936
Var er det?

1001
00:48:51,936 --> 00:48:54,620
>> MIKE RIZZO: Den lille katten ting
er GitHub symbol.

1002
00:48:54,620 --> 00:48:56,330
>> TOMAS Reimers: Oh.

1003
00:48:56,330 --> 00:49:02,180
Så GitHub bruker en metode som kalles
Git til butikken kode.

1004
00:49:02,180 --> 00:49:05,150
Er du ikke vet hva det er eller
det skremmer deg, er det helt greit.

1005
00:49:05,150 --> 00:49:16,100
Du trenger ikke å vite hva Git er
fordi GitHub har en Last ned-knappen

1006
00:49:16,100 --> 00:49:17,200
nederst til høyre.

1007
00:49:17,200 --> 00:49:21,350
>> Den andre nyttige ting å vite
om GitHub er de fleste produkter

1008
00:49:21,350 --> 00:49:23,200
vil ha en lese meg.

1009
00:49:23,200 --> 00:49:25,400
Og hvis de ikke har et nettsted,
lese meg vil snakke om hvordan du

1010
00:49:25,400 --> 00:49:28,310
installere det, hvordan du bruker det, hva det
gjør, et cetera, et cetera, et cetera.

1011
00:49:28,310 --> 00:49:31,033
Hva vi har i utgangspunktet vært
vandre gjennom.

1012
00:49:31,033 --> 00:49:32,326
>> MIKE RIZZO: Internetts slutte.

1013
00:49:32,326 --> 00:49:34,020
>> TOMAS Reimers: Det er greit.

1014
00:49:34,020 --> 00:49:36,980
De to siste tingene vi ønsket
å snakke om -

1015
00:49:36,980 --> 00:49:38,750
vi har snakket om Git -

1016
00:49:38,750 --> 00:49:40,290
er feilsøking.

1017
00:49:40,290 --> 00:49:43,020
Og dette er ikke så relevant for
i sluttproduktet når det er

1018
00:49:43,020 --> 00:49:44,870
når du forlater 50.

1019
00:49:44,870 --> 00:49:48,310
Og når du kjører inn i produkter
implementere biblioteker eller gjennomføring

1020
00:49:48,310 --> 00:49:50,230
ditt eget prosjekt, du kommer
å har spørsmål eller du er

1021
00:49:50,230 --> 00:49:51,660
kommer til å se etter spørsmål.

1022
00:49:51,660 --> 00:49:53,060
>> Igjen, Google det.

1023
00:49:53,060 --> 00:49:54,630
Det er bokstavelig talt det vi gjør.

1024
00:49:54,630 --> 00:49:56,400
Dette kommer til å høres dumt.

1025
00:49:56,400 --> 00:49:58,310
Men bokstavelig talt, vi Google det.

1026
00:49:58,310 --> 00:50:01,810
Og videre en av de første ting
vil du vanligvis kjøre inn er

1027
00:50:01,810 --> 00:50:06,550
stackoverflow.com, som er en fantastisk
spørsmål og svar skue.

1028
00:50:06,550 --> 00:50:10,530
>> Det er fantastisk både fordi du kan
legge inn spørsmål og se etter

1029
00:50:10,530 --> 00:50:12,760
svar, men også fordi
det allerede har mye av

1030
00:50:12,760 --> 00:50:14,590
forhåndsutfylt innhold der.

1031
00:50:14,590 --> 00:50:18,510
Så vanligvis når du Google en programmerings
Spørsmålet i første

1032
00:50:18,510 --> 00:50:22,620
par treffer du kanskje allerede har kjørt
inn i den i løpet av problem settene.

1033
00:50:22,620 --> 00:50:27,840
>> Og så, den siste virkelig kort tingen
er JSFIDDLE, som er - i dag har vi

1034
00:50:27,840 --> 00:50:32,110
gjort mye arbeid med
Java HTML CSS.

1035
00:50:32,110 --> 00:50:39,820
JSFIDDLE er en web-app, som i utgangspunktet
gjør at du kan ta din HTML, DIN

1036
00:50:39,820 --> 00:50:42,820
Java nederst til venstre, og
CSS øverst til høyre.

1037
00:50:42,820 --> 00:50:47,840
Og så kan det skape en rask render
av det og se hvordan den samhandler.

1038
00:50:47,840 --> 00:50:50,500
Det er veldig nyttig når folk prøver
å gjøre en proof of concept som

1039
00:50:50,500 --> 00:50:52,910
Dette er hvordan du ville
gjøre en rullegardinmeny.

1040
00:50:52,910 --> 00:50:54,980
Kanskje en rask avdekke eller hva.

1041
00:50:54,980 --> 00:50:56,560
>> MIKE RIZZO: Så la oss gå
videre og klikk på denne.

1042
00:50:56,560 --> 00:50:57,820
En rask kommentar -

1043
00:50:57,820 --> 00:51:00,430
mens, før vi var
gjør på klikk.

1044
00:51:00,430 --> 00:51:04,380
Slår ut JCorey Korea har også en innebygd
i klikkhendelsesbehandling at det

1045
00:51:04,380 --> 00:51:07,020
bruker bare fordi det tall du er
kommer til å ønske å gjøre en masse ting

1046
00:51:07,020 --> 00:51:08,410
når du ønsker å klikke noe.

1047
00:51:08,410 --> 00:51:09,690
>> Tilsvarende har det også en hover.

1048
00:51:09,690 --> 00:51:12,850
Men for å få det fulle omfanget av
de, se på jQuery

1049
00:51:12,850 --> 00:51:15,320
dokumentasjon og gjøre det.

1050
00:51:15,320 --> 00:51:18,760
Jeg gjorde noe dumt her.

1051
00:51:18,760 --> 00:51:21,490
>> TOMAS Reimers: Så jeg har en veldig rask
program her, som sier

1052
00:51:21,490 --> 00:51:22,640
knappen på klikk.

1053
00:51:22,640 --> 00:51:23,890
Da har vi en for-løkke.

1054
00:51:23,890 --> 00:51:26,810
For i er mindre enn 404.

1055
00:51:26,810 --> 00:51:29,530
Det er bare kommer til å dukke opp
disse varselmeldinger.

1056
00:51:29,530 --> 00:51:33,425
>> MIKE RIZZO: Og hva var det
kode 404 sto for i HTML?

1057
00:51:33,425 --> 00:51:34,145
Husker noen?

1058
00:51:34,145 --> 00:51:35,450
Ikke funnet, ikke sant.

1059
00:51:35,450 --> 00:51:38,640

1060
00:51:38,640 --> 00:51:40,885
Chrome også lagt dette ryddig
ting der du kan -

1061
00:51:40,885 --> 00:51:43,430
>> TOMAS Reimers: Fordi folk som
Mike begynte å gjøre dette mye og

1062
00:51:43,430 --> 00:51:47,230
irriterende brukere, som tillater
du å se info.

1063
00:51:47,230 --> 00:51:48,286
>> MIKE RIZZO: Yeah.

1064
00:51:48,286 --> 00:51:50,690
>> TOMAS Reimers: Har vi noen spørsmål
om dette, om Java

1065
00:51:50,690 --> 00:51:53,420
biblioteker, finne biblioteker eller
hva webutvikling utseende

1066
00:51:53,420 --> 00:51:55,400
som i den virkelige verden?

1067
00:51:55,400 --> 00:51:56,880
Vi kjører opp mot tiden.

1068
00:51:56,880 --> 00:52:00,400
Så jeg er ikke sikker på at vi skal
til å ha tid til å gjennomføre

1069
00:52:00,400 --> 00:52:02,290
med mindre det er virkelig rask.

1070
00:52:02,290 --> 00:52:04,580
Er vi gode?

1071
00:52:04,580 --> 00:52:08,110
>> MIKE RIZZO: Anything dere ønsker
å se virkelig rask i, som, to

1072
00:52:08,110 --> 00:52:09,556
minutter eller mindre?

1073
00:52:09,556 --> 00:52:10,870
>> TOMAS Reimers: Anything
vi kan avklare?

1074
00:52:10,870 --> 00:52:12,500
Hvordan skrive på -

1075
00:52:12,500 --> 00:52:13,260
>> PUBLIKUM: [uhørbart]?

1076
00:52:13,260 --> 00:52:16,070
>> MIKE RIZZO: Ja, så that -

1077
00:52:16,070 --> 00:52:18,065
>> TOMAS Reimers: Du kan bare trykke
Kontroll-U på nettstedet.

1078
00:52:18,065 --> 00:52:19,275
>> MIKE RIZZO: Åh, jeg visste ikke det.

1079
00:52:19,275 --> 00:52:22,290
>> TOMAS Reimers: Jeg tror, ​​ja.

1080
00:52:22,290 --> 00:52:23,300
Kontroll-U. Yeah.

1081
00:52:23,300 --> 00:52:25,970
>> MIKE RIZZO: Åh, så det er
koden for nettstedet.

1082
00:52:25,970 --> 00:52:29,580
Men hvis du faktisk ønsker å laste ned vår
filer og alt, er det vert

1083
00:52:29,580 --> 00:52:32,650
på github.com

1084
00:52:32,650 --> 00:52:34,850
>> TOMAS Reimers: slash mitt navn -

1085
00:52:34,850 --> 00:52:38,504
Tomas Reimers - slash
CS50 bindestrek seminar.

1086
00:52:38,504 --> 00:52:40,710
>> MIKE RIZZO: Og du kan
finne alt der.

1087
00:52:40,710 --> 00:52:42,310
>> TOMAS Reimers: Dette er hva GitHub
ser ut, for øvrig.

1088
00:52:42,310 --> 00:52:44,910
Så igjen, når du ser en åpen kildekode
prosjekt, vanligvis, vil de være en lese

1089
00:52:44,910 --> 00:52:45,950
meg der som du kan lese.

1090
00:52:45,950 --> 00:52:50,200
Og hvis du går tilbake, vil du legge merke til at
du har nedlastings zip, noe som vil

1091
00:52:50,200 --> 00:52:52,130
tillate deg å laste ned kilde
kode for å inkludere

1092
00:52:52,130 --> 00:52:53,666
produktet i din egen greie.

1093
00:52:53,666 --> 00:52:56,890
>> MIKE RIZZO: Ja, og hvis vi bare klikk
på index.html veldig raskt -

1094
00:52:56,890 --> 00:52:59,180
>> TOMAS Reimers: Du får se her er den
kildekoden for nettsiden vår.

1095
00:52:59,180 --> 00:53:02,016

1096
00:53:02,016 --> 00:53:06,070
>> MIKE RIZZO: Også glemte jeg å presse høyre
før med det store bordet det

1097
00:53:06,070 --> 00:53:09,860
inkludert, men det er også en tabell
av chmods at vi inkluderte

1098
00:53:09,860 --> 00:53:13,210
bare for din klarhet.

1099
00:53:13,210 --> 00:53:16,940
Men hvis vi bla helt ned til
bunnen, gjorde vi faktisk ikke gjøre veldig

1100
00:53:16,940 --> 00:53:21,160
mye med Javascript
ting i det hele tatt med dette.

1101
00:53:21,160 --> 00:53:26,610
Det er utelukkende fra alt
annet som vi hadde.

1102
00:53:26,610 --> 00:53:28,730
>> Så takk til dere for å komme
og lytter.

1103
00:53:28,730 --> 00:53:29,830
Vi håper dette var virkelig nyttig.

1104
00:53:29,830 --> 00:53:33,020
Hvis du har noen Java relatert
spørsmål eller bare ønsker å snakke om

1105
00:53:33,020 --> 00:53:36,240
hva annet som hva andre kule ting
du kan gjøre med Javascript, vil vi gjerne

1106
00:53:36,240 --> 00:53:37,186
å snakke med deg.

1107
00:53:37,186 --> 00:53:40,010
>> TOMAS Reimers: Hvis du har et spørsmål
om prosjektet eller om dette kan være

1108
00:53:40,010 --> 00:53:42,740
relevant, vil vi trolig holde seg i nærheten
litt etter dette.

1109
00:53:42,740 --> 00:53:44,640
Men annet enn det, har
en god helg.

1110
00:53:44,640 --> 00:53:45,845
>> MIKE RIZZO: Yeah, nyte.

1111
00:53:45,845 --> 00:53:46,120
Se dere.

1112
00:53:46,120 --> 00:53:47,370
>> TOMAS Reimers: See ya.

1113
00:53:47,370 --> 00:53:47,926