1
00:00:00,000 --> 00:00:01,390

2
00:00:01,390 --> 00:00:04,890
>> [MUSIC SPILLE]

3
00:00:04,890 --> 00:00:10,955

4
00:00:10,955 --> 00:00:12,580
DAVID J MALAN: All right, velkommen tilbake.

5
00:00:12,580 --> 00:00:13,600
Dette er CS50.

6
00:00:13,600 --> 00:00:15,540
Dette er slutten av uken syv.

7
00:00:15,540 --> 00:00:18,180
Og det er på slutten av at gatefeier
jakt fra oppgavesettet fire

8
00:00:18,180 --> 00:00:19,220
som du kanskje husker.

9
00:00:19,220 --> 00:00:21,650
Etter å utvinne alle
disse JPEG-bilder av ansatte,

10
00:00:21,650 --> 00:00:24,820
du ble utfordret, hvis du ønsker,
å fotografere deg selv med så mange

11
00:00:24,820 --> 00:00:25,981
av de folkene som du kan.

12
00:00:25,981 --> 00:00:28,480
Vi fikk en hel haug med innleveringer
i løpet av de siste ukene,

13
00:00:28,480 --> 00:00:32,980
ja, ganske mange rett før middag
dag, hvorav noen er de her

14
00:00:32,980 --> 00:00:37,670
fanget her in-- ser like-- Annenberg
Hall i kontortiden, en her

15
00:00:37,670 --> 00:00:39,530
i Lowell Hus med Nick.

16
00:00:39,530 --> 00:00:41,750
Her er Ramon bli fanget på telefonen.

17
00:00:41,750 --> 00:00:43,870
Dette var på et CS50 lunsj.

18
00:00:43,870 --> 00:00:46,840
Dette var Jason Skyping med
en mer kreativ klassekamerat,

19
00:00:46,840 --> 00:00:48,280
som ringte ham på denne måten.

20
00:00:48,280 --> 00:00:49,690
Vi vet ikke hva dette var.

21
00:00:49,690 --> 00:00:51,940
>> [Latter]

22
00:00:51,940 --> 00:00:54,570
>> DAVID J MALAN: Men
som er verdt en gigabyte.

23
00:00:54,570 --> 00:00:56,960
Her er Chang, som
bokstavelig talt gikk av scenen

24
00:00:56,960 --> 00:01:00,480
å unngå å bli fotografert en
dag, men ble til slutt fanget.

25
00:01:00,480 --> 00:01:02,050
Her er Nick.

26
00:01:02,050 --> 00:01:03,480
Her er Nick.

27
00:01:03,480 --> 00:01:04,080
Her er Nick.

28
00:01:04,080 --> 00:01:05,090

29
00:01:05,090 --> 00:01:07,670
Og her er Alison ned av feltene.

30
00:01:07,670 --> 00:01:11,840
Og Zamyla selv ble funnet
på ballsal konkurranse.

31
00:01:11,840 --> 00:01:14,100
Så vi vil gå gjennom
disse bildene, finne ut

32
00:01:14,100 --> 00:01:16,690
som sendte inn mest
tidligst, og belønning

33
00:01:16,690 --> 00:01:20,662
en fabelaktig premie, som
lovet i spec.

34
00:01:20,662 --> 00:01:23,120
Og vi vil også følge opp om
plassen som var involvert.

35
00:01:23,120 --> 00:01:26,860
>> Et par announcements-- så lunsj
er, igjen, denne fredag ​​klokken 13:15.

36
00:01:26,860 --> 00:01:30,420
Hvis du ønsker å bli med oss,
RSVP på at URL her.

37
00:01:30,420 --> 00:01:33,730
Jason vises igjen her fra en
av delene et par år

38
00:01:33,730 --> 00:01:35,510
tilbake, som skjedde
å falle på Halloween.

39
00:01:35,510 --> 00:01:38,950
Og ja, han kledd som en
gresskar det aktuelle året.

40
00:01:38,950 --> 00:01:42,700
Hvis du ser denne delen
av hans fra 2011 seksjon

41
00:01:42,700 --> 00:01:46,480
åtte, hvis du er nysgjerrig,
på CS50.tv, tror jeg

42
00:01:46,480 --> 00:01:49,730
dette var det året
hans luftpumpe var i arbeid.

43
00:01:49,730 --> 00:01:52,490
>> Hvis du deretter se på
lignende seksjon i 2012,

44
00:01:52,490 --> 00:01:55,620
du vil se dette Jason mye deflatert,
siden drakten fungerte ikke lenger,

45
00:01:55,620 --> 00:01:58,060
som bare er å si
denne fredagen, hvis du hadde

46
00:01:58,060 --> 00:02:02,720
liker å skjære et gresskar med Daven
og Gabe og andre, RSVP til lederne

47
00:02:02,720 --> 00:02:04,480
på cs50.harvard.edu adresse.

48
00:02:04,480 --> 00:02:06,200
Det lover å bli mye moro.

49
00:02:06,200 --> 00:02:08,660
Daven, blir vi fortalt, har skåret
Pumpkins hele sitt liv.

50
00:02:08,660 --> 00:02:11,930
Gabriel fra Brasil har aldri
skåret et gresskar til Halloween.

51
00:02:11,930 --> 00:02:14,700
Så vær der sammen med dem som han lærer.

52
00:02:14,700 --> 00:02:16,830
>> Seminarer, meanwhile--
så vil du lære snart

53
00:02:16,830 --> 00:02:20,650
om hva våre forventninger er for
det endelige prosjektet, som i hovedsak

54
00:02:20,650 --> 00:02:23,150
vil koke ned til
utforming og gjennomføring av

55
00:02:23,150 --> 00:02:26,440
mest ethvert prosjekt av interesse for
deg, riktignok med forbehold om godkjenning

56
00:02:26,440 --> 00:02:28,490
og veiledning fra undervisningen stipendiat.

57
00:02:28,490 --> 00:02:32,110
Mot slutten av
semester, introduserer vi en rekke

58
00:02:32,110 --> 00:02:35,610
av seminarer, som er valgfrie klasser
ledet av undervisnings stipendiater og Harvard

59
00:02:35,610 --> 00:02:38,570
ansatte, venner av kurset tvers
campus, om ulike emner som

60
00:02:38,570 --> 00:02:41,470
er tangentielt til
underliggende pensum kursets

61
00:02:41,470 --> 00:02:45,590
men likevel er aktuelt, morsom og
forskjellig for potensielle endelige prosjekter.

62
00:02:45,590 --> 00:02:49,530
>> For eksempel, først, hvis du ønsker
å registrere, leder til at nettadressen der.

63
00:02:49,530 --> 00:02:53,010
Og dette er lineup for
årets seminar alene.

64
00:02:53,010 --> 00:02:56,060
Men skjønner vi har dusinvis av
seminarer fra tidligere år, som alle

65
00:02:56,060 --> 00:02:59,774
er knyttet i Seminarer menyen
muligheten til kursets hjemmeside.

66
00:02:59,774 --> 00:03:02,190
Så hvis du tenker på
gå utenfor din komfortsone

67
00:03:02,190 --> 00:03:05,060
eller plukke opp noen nye ferdigheter,
for eksempel programmering iPhone

68
00:03:05,060 --> 00:03:08,100
apps med Swift, et nytt språk
fra Apple eller Objective-C

69
00:03:08,100 --> 00:03:11,230
eller Android apps eller programmering [? cue?]
lyspærer, eller noen av emnene

70
00:03:11,230 --> 00:03:15,490
opp her og mer, på grunn av sjekk
ut registreringssiden.

71
00:03:15,490 --> 00:03:19,730
>> Så begynte vi og konkluderte på
Mandag med å se på HTTP.

72
00:03:19,730 --> 00:03:22,675
Så rask refresher-- HTTP,
Hypertext Transfer Protocol.

73
00:03:22,675 --> 00:03:24,045
Men hva betyr det egentlig?

74
00:03:24,045 --> 00:03:26,805

75
00:03:26,805 --> 00:03:27,930
Hva betyr det egentlig?

76
00:03:27,930 --> 00:03:30,665

77
00:03:30,665 --> 00:03:31,290
Er det en hånd?

78
00:03:31,290 --> 00:03:33,074

79
00:03:33,074 --> 00:03:34,740
Jeg vet at du bare skrape hodet.

80
00:03:34,740 --> 00:03:36,400
Men du ønsker å foreslå hva HTTP er?

81
00:03:36,400 --> 00:03:37,792

82
00:03:37,792 --> 00:03:40,576
>> Målgruppe: Hvordan datamaskiner
kommunisere med [uhørbart].

83
00:03:40,576 --> 00:03:41,517

84
00:03:41,517 --> 00:03:43,100
DAVID J MALAN: Jeg savnet den siste delen.

85
00:03:43,100 --> 00:03:45,774
Hvordan datamaskiner kommuniserer with--

86
00:03:45,774 --> 00:03:47,325
>> PUBLIKUM: Internett-servere.

87
00:03:47,325 --> 00:03:50,450
DAVID J MALAN: bra-- med internett
servere, og spesielt, webservere.

88
00:03:50,450 --> 00:03:53,533
Fordi tilbakekalling, det er en haug med
tjenester på internett, noen som

89
00:03:53,533 --> 00:03:57,349
du bruker sannsynligvis daglig mellom chat
og melding, chat og web og e-post,

90
00:03:57,349 --> 00:03:57,890
og lignende.

91
00:03:57,890 --> 00:04:00,900
Og HTTP er bare
protokoll som nettlesere

92
00:04:00,900 --> 00:04:03,750
snakke når du kommuniserer med
webservere, og vice versa.

93
00:04:03,750 --> 00:04:05,580
Og den analoge i
menneskelige verden kan være,

94
00:04:05,580 --> 00:04:08,730
Jeg strekker hånden min å riste litt
annet menneske og han eller hun

95
00:04:08,730 --> 00:04:11,970
erkjenner ved å utvide
hans eller hennes hånd i tillegg.

96
00:04:11,970 --> 00:04:13,970
Så det er bare en protokoll,
et sett av konvensjoner.

97
00:04:13,970 --> 00:04:15,630
>> Og hva faktisk er disse konvensjonene?

98
00:04:15,630 --> 00:04:18,640
Vel, det bare koker ned til
sende meldinger frem og tilbake,

99
00:04:18,640 --> 00:04:19,770
som vi avbildet her.

100
00:04:19,770 --> 00:04:22,520
Og det er et par måter
som du kan sende disse meldingene.

101
00:04:22,520 --> 00:04:24,360
Og kanskje den mest
vanlig er kjent som få.

102
00:04:24,360 --> 00:04:26,510
Og vi vil se en kontrast
til dette før lenge.

103
00:04:26,510 --> 00:04:30,010
>> Men en GET-forespørsel fra en nettleser
til serveren bare ser ut som dette.

104
00:04:30,010 --> 00:04:32,960
Det er en haug med tekst at det setter
innsiden av en virtuell konvolutt.

105
00:04:32,960 --> 00:04:35,854
På utsiden av at konvolutten
gå et par stykker av detaljer.

106
00:04:35,854 --> 00:04:37,770
Hva må gå på
konvolutt, så å si,

107
00:04:37,770 --> 00:04:41,820
for å få en forespørsel som
dette fra meg til en web server?

108
00:04:41,820 --> 00:04:42,320
Yeah.

109
00:04:42,320 --> 00:04:43,270
>> PUBLIKUM: Din IP-adresse.

110
00:04:43,270 --> 00:04:45,890
>> DAVID J MALAN: My IP-adresse
i Fra-feltet, så å si,

111
00:04:45,890 --> 00:04:49,490
og selvfølgelig,
mottakers IP-adresse.

112
00:04:49,490 --> 00:04:52,710
Men i tilfelle av en nettpakke,
Vi trenger litt mer detalj

113
00:04:52,710 --> 00:04:55,254
Det er ikke nok bare å
send en konvolutt til en server,

114
00:04:55,254 --> 00:04:57,670
fordi at serveren kan være
lytting etter forskjellige typer

115
00:04:57,670 --> 00:04:59,180
av Internett-trafikken.

116
00:04:59,180 --> 00:05:01,370
Så hva annet trenger vi
foruten mottakerens IP?

117
00:05:01,370 --> 00:05:02,723

118
00:05:02,723 --> 00:05:03,222
Yeah?

119
00:05:03,222 --> 00:05:04,241
>> PUBLIKUM: Er det TCP?

120
00:05:04,241 --> 00:05:05,074
DAVID J MALAN: Good.

121
00:05:05,074 --> 00:05:06,470
TCP--

122
00:05:06,470 --> 00:05:07,340
>> PUBLIKUM: Adresse.

123
00:05:07,340 --> 00:05:09,340
>> DAVID J MALAN: Adresse,
eller port, som det heter.

124
00:05:09,340 --> 00:05:11,010
Close, men en TCP portnummer.

125
00:05:11,010 --> 00:05:12,220
Og det er en haug av disse.

126
00:05:12,220 --> 00:05:14,310
Men sikkert den mest
kjent bør slutt

127
00:05:14,310 --> 00:05:17,590
være 80, som er standard
som brukes for web-trafikk.

128
00:05:17,590 --> 00:05:20,040
Og en annen kjent
en snart vil være 443,

129
00:05:20,040 --> 00:05:24,280
som anvendes for sikker web
trafikk, adresser som starter med https.

130
00:05:24,280 --> 00:05:26,650
>> Så dette er hva som går
innsiden av konvolutten.

131
00:05:26,650 --> 00:05:29,780
Og få / bare betyr, gi
meg standard nettside.

132
00:05:29,780 --> 00:05:32,700
Gi meg roten av hard
kjøre på det web server.

133
00:05:32,700 --> 00:05:36,050
Og forhåpentligvis, web
Serveren vil svare med, OK

134
00:05:36,050 --> 00:05:39,630
og tallet 200, som er bare
en konvensjon som sier, ja, alt

135
00:05:39,630 --> 00:05:40,470
er faktisk OK.

136
00:05:40,470 --> 00:05:41,680
Her er siden.

137
00:05:41,680 --> 00:05:45,510
Typen nettsiden kommer til å
være tekst, men mer spesifikt, HTML,

138
00:05:45,510 --> 00:05:47,010
som vi er i ferd med å dykke tilbake til.

139
00:05:47,010 --> 00:05:49,877
Og dot dot dot bare
betyr, her er HTML.

140
00:05:49,877 --> 00:05:51,710
Og det er der vi
plukke opp historien i dag,

141
00:05:51,710 --> 00:05:55,740
egentlig skrive HTML,
Hypertext Markup Language, som

142
00:05:55,740 --> 00:05:57,727
er det språket som
websider er skrevet.

143
00:05:57,727 --> 00:05:59,060
Det er ikke et programmeringsspråk.

144
00:05:59,060 --> 00:06:01,270
Det er ingen funksjoner
eller sløyfer eller forhold.

145
00:06:01,270 --> 00:06:03,800
Det er et kodespråk,
så vel igjen ser i dag,

146
00:06:03,800 --> 00:06:07,240
som lar deg spesifisere
hvordan å strukturere og stilisere

147
00:06:07,240 --> 00:06:09,300
estetisk en nettside.

148
00:06:09,300 --> 00:06:11,470
>> Så dette var en
og bare siden vi virkelig

149
00:06:11,470 --> 00:06:13,930
sett på, hvis en kort stund, på mandag.

150
00:06:13,930 --> 00:06:16,250
Og legg merke til noen
fremtredende kjennetegn.

151
00:06:16,250 --> 00:06:20,170
Det er mange åpne vinklet
brakett og tett vinklet brakett.

152
00:06:20,170 --> 00:06:23,160
I mellom de vinklet
parentes er ord.

153
00:06:23,160 --> 00:06:25,660
Og vi kommer til å begynne
ringer disse ordene tags.

154
00:06:25,660 --> 00:06:28,800
Så åpen brakett hodet
og lukket brakett hodet

155
00:06:28,800 --> 00:06:33,620
er de åpne og lukkede koder,
eller start- og sluttkoder

156
00:06:33,620 --> 00:06:37,660
henholdsvis, av et HTML-element,
som vi kaller det, kalt hodet.

157
00:06:37,660 --> 00:06:41,760
Og det samme sjargong gjelder
til kroppen i HTML og så videre.

158
00:06:41,760 --> 00:06:43,970
>> Og hva som er fint er
HTML-- og faktisk, vil vi

159
00:06:43,970 --> 00:06:47,187
tilbringer veldig lite tid på det,
fordi du stort sett bare finne ut

160
00:06:47,187 --> 00:06:49,770
hvilke funksjoner det har når du
faktisk har et konkret problem

161
00:06:49,770 --> 00:06:52,820
å solve-- du vil finne at
en nettleser er ganske dum.

162
00:06:52,820 --> 00:06:56,450
Det er bare kommer til å do-- ikke ulikt
en computer-- det du ber den om.

163
00:06:56,450 --> 00:06:59,279
Og så når du har åpent
brakett HTML på toppen

164
00:06:59,279 --> 00:07:01,320
der, som i hovedsak
betyr bare, hei, nettleser,

165
00:07:01,320 --> 00:07:04,090
her kommer en nettside skrevet i HTML.

166
00:07:04,090 --> 00:07:06,130
>> Når den ser åpen brakett
hodet, som bare betyr,

167
00:07:06,130 --> 00:07:10,350
hei, nettleser, her kommer hodet, eller
den øverste delen av min nettside.

168
00:07:10,350 --> 00:07:14,192
Når den ser en lukket brakett
hodet, som bare betyr at, hei,

169
00:07:14,192 --> 00:07:15,150
det er det for hodet.

170
00:07:15,150 --> 00:07:16,420
Standby for noe annet.

171
00:07:16,420 --> 00:07:18,878
Og at noe annet er
tilsynelatende kommer til å være i kroppen.

172
00:07:18,878 --> 00:07:22,630
Og når du ikke har en kode, som
du må bare hallo, komma, verden,

173
00:07:22,630 --> 00:07:26,610
som bare kommer til å være rå tekst som
slutt vises på skjermen.

174
00:07:26,610 --> 00:07:29,220
>> Nå, vil du legge merke til også
innrykk her.

175
00:07:29,220 --> 00:07:32,160
Du kan sikkert antyde
hvordan vi stylizing det.

176
00:07:32,160 --> 00:07:34,850
Hver gang jeg åpner en kode,
så å si, rykke jeg.

177
00:07:34,850 --> 00:07:38,540
Og hver gang jeg lukker
en kode, jeg un-innrykk

178
00:07:38,540 --> 00:07:40,690
tilsvarende i ånden til klammeparentes.

179
00:07:40,690 --> 00:07:43,470
Og utover det, jeg er snill
for å bruke min dom.

180
00:07:43,470 --> 00:07:48,380
Legg merke til at jeg ikke gadd å treffe
Skriv inn innsiden av den tittelen tag.

181
00:07:48,380 --> 00:07:48,990
Hvorfor?

182
00:07:48,990 --> 00:07:51,920
Vel, jeg bare bestemte meg for det så en
litt renere for meg, det menneskelige,

183
00:07:51,920 --> 00:07:53,181
å bare ikke bry gjør det.

184
00:07:53,181 --> 00:07:54,930
Så igjen, det er noen
dom kaller bare

185
00:07:54,930 --> 00:07:57,670
som det er i C eller hvilket som helst språk.

186
00:07:57,670 --> 00:08:04,110
>> Men legg merke til også at denne skrå
gir seg en mental modell,

187
00:08:04,110 --> 00:08:05,670
ikke å over komplisere det.

188
00:08:05,670 --> 00:08:07,020
Men et tre, ikke sant?

189
00:08:07,020 --> 00:08:09,290
Hvis du tenker på en web
side, tilsynelatende skrevet

190
00:08:09,290 --> 00:08:12,050
som dette, som å være
pent innrykket på den måten,

191
00:08:12,050 --> 00:08:17,390
du kan nesten tenke på den åpne braketten
HTML lukket brakett tag er demarcating

192
00:08:17,390 --> 00:08:21,380
roten til en node, et familietre
stil node i stil med trærne

193
00:08:21,380 --> 00:08:22,900
vi så på sist fredag.

194
00:08:22,900 --> 00:08:27,630
>> Og ja, har vi på rett her
hva vi vil kalle en DOM, D-O-M, dokument

195
00:08:27,630 --> 00:08:31,680
objektmodell, en fancy måte å si
et tre som representerer som HTML.

196
00:08:31,680 --> 00:08:36,140
Og legg merke til at HTML har, vil vi si:
som et familietre, to barn.

197
00:08:36,140 --> 00:08:37,659
På venstre er hodet.

198
00:08:37,659 --> 00:08:39,179
På høyre side er legemet.

199
00:08:39,179 --> 00:08:44,220
>> Og akkurat som en mindless tanke øvelse,
hodet, selvfølgelig, har hvor mange barn

200
00:08:44,220 --> 00:08:46,070
i henhold til denne strukturen?

201
00:08:46,070 --> 00:08:48,200
Så bare en, title--
og det er derfor vi har

202
00:08:48,200 --> 00:08:50,580
pilen går fra hodet til tittelen.

203
00:08:50,580 --> 00:08:55,110
Så det er som om den personen i
familietre hadde bare ett avkom.

204
00:08:55,110 --> 00:08:58,230
Og så tittelen i seg selv kan
sies å ha et barn også.

205
00:08:58,230 --> 00:09:01,780
>> Husker at HTML hadde
hallo, komma, verden under den.

206
00:09:01,780 --> 00:09:06,090
Og jeg har rett og slett trukket det innenfor en
ovale i stedet for bare et rektangel

207
00:09:06,090 --> 00:09:10,559
å formidle semantisk at selv om
det er en node i treet, så å si,

208
00:09:10,559 --> 00:09:12,100
det er liksom fundamentalt forskjellig.

209
00:09:12,100 --> 00:09:12,800
Det er ikke et merke.

210
00:09:12,800 --> 00:09:14,780
Eller mer riktig, det er ikke et element.

211
00:09:14,780 --> 00:09:16,590
Det er bare en tekst node, hvis du vil.

212
00:09:16,590 --> 00:09:18,990
Men disse er helt
vilkårlige menneskerettighetskonvensjoner.

213
00:09:18,990 --> 00:09:23,180
Dette er bare nå min måte
som representerer det jeg vil som en samlet

214
00:09:23,180 --> 00:09:24,340
ring dokumentet.

215
00:09:24,340 --> 00:09:27,750
>> Og som en side, den tingen på
super øverst i venstre hjørne,

216
00:09:27,750 --> 00:09:32,080
åpen brakett utropstegn doc
typen HTML, dette ser ut som en kode,

217
00:09:32,080 --> 00:09:35,560
men det er dumt hjørne tilfelle hvor
det er bare det, kopiert og limt

218
00:09:35,560 --> 00:09:38,460
å indikere lesere
dette er HTML versjon 5.

219
00:09:38,460 --> 00:09:41,540
Verdens forandrer hva
Første linje med kode på en side skal være.

220
00:09:41,540 --> 00:09:43,820
Dette betyr bare versjon 5.

221
00:09:43,820 --> 00:09:45,950
Så det gjør ikke helt
ser ut som de andre.

222
00:09:45,950 --> 00:09:48,120
>> All right, så med det
sa du nå sette pris på

223
00:09:48,120 --> 00:09:50,767
denne ganske denne dumme
tatovering noen fikk.

224
00:09:50,767 --> 00:09:51,990
>> [Latter]

225
00:09:51,990 --> 00:09:54,210
>> DAVID J MALAN: All right,
og nå la oss faktisk dykke

226
00:09:54,210 --> 00:09:55,710
til å gjøre noe med dette.

227
00:09:55,710 --> 00:09:58,610
Du vil huske at sist gang
Jeg åpnet opp CS50 Appliance

228
00:09:58,610 --> 00:10:01,650
og jeg gjorde noe så
enkelt som å åpne opp gedit.

229
00:10:01,650 --> 00:10:05,190
Og jeg lagret filen selv på
min desktop-- steds spesiell--

230
00:10:05,190 --> 00:10:05,870
som hello.html.

231
00:10:05,870 --> 00:10:07,100

232
00:10:07,100 --> 00:10:10,984
>> Så la meg gjøre det
igjen-- hello.html Enter.

233
00:10:10,984 --> 00:10:13,900
Og nå i denne filen, kommer jeg til å
gå videre og gjenskape det vi nettopp

234
00:10:13,900 --> 00:10:18,850
saw-- doc typen html Så jeg kommer til å
gjøre åpen brakett html lukket brakett.

235
00:10:18,850 --> 00:10:21,890
Og så kommer jeg til å preemptively
åpne og lukke tag.

236
00:10:21,890 --> 00:10:22,390
Hvorfor?

237
00:10:22,390 --> 00:10:23,598
Bare så jeg ikke glemmer senere.

238
00:10:23,598 --> 00:10:26,850
Det er bare god praksis, som åpning
og lukking klammeparentes alt på en gang.

239
00:10:26,850 --> 00:10:28,900
>> Og så hva som kom neste?

240
00:10:28,900 --> 00:10:30,582
Du kan tenke på tatoveringen.

241
00:10:30,582 --> 00:10:31,450
>> PUBLIKUM: Hodet.

242
00:10:31,450 --> 00:10:32,500
>> DAVID J MALAN: Hodet.

243
00:10:32,500 --> 00:10:36,020
Og så i her, jeg
hadde tittelen, tror jeg.

244
00:10:36,020 --> 00:10:39,886
Og tittelen var vilkårlig,
hallo, verden tett tittel.

245
00:10:39,886 --> 00:10:42,760
Og deretter ned her, kroppen, for
course-- da vi lukker body-koden.

246
00:10:42,760 --> 00:10:45,660
Og så bare litt redundant,
Jeg hadde det samme her nede.

247
00:10:45,660 --> 00:10:47,150
>> Så jeg hevder at dette er en web-side.

248
00:10:47,150 --> 00:10:49,050
Dette er noe som
kunne nå lever på nettet,

249
00:10:49,050 --> 00:10:51,925
selv om selvfølgelig, er det bokstavelig talt
lever på skrivebordet mitt akkurat nå.

250
00:10:51,925 --> 00:10:55,837
Men ja, hvis jeg minimere gedit,
Jeg vil se på skrivebordet mitt ikonet.

251
00:10:55,837 --> 00:10:58,420
Selv om dette er apparatet
du kan gjøre dette på Mac OS

252
00:10:58,420 --> 00:11:01,580
uten TextEdit eller
Vinduer med Notepad selv.

253
00:11:01,580 --> 00:11:06,115
>> Og hvis jeg går videre og dobbeltklikk
at selv, og select-- vel, la oss

254
00:11:06,115 --> 00:11:07,990
Ikke velg det fordi
Chrome er ikke åpning.

255
00:11:07,990 --> 00:11:09,281
La oss gå videre og åpne Chrome.

256
00:11:09,281 --> 00:11:10,160

257
00:11:10,160 --> 00:11:14,040
Og så gjør Kommando-O for open
Og gå til skrivebordet mitt

258
00:11:14,040 --> 00:11:15,320
og åpne denne filen.

259
00:11:15,320 --> 00:11:20,120
Det er hvordan en nettleser tolker
HTML, øverst til nederst, venstre til høyre.

260
00:11:20,120 --> 00:11:21,314
Hei, nettleser her er HTML.

261
00:11:21,314 --> 00:11:21,980
Her er hodet.

262
00:11:21,980 --> 00:11:23,250
Her er tittelen.

263
00:11:23,250 --> 00:11:24,090
Her er kroppen.

264
00:11:24,090 --> 00:11:26,620
Og ja, dette er hvordan
det gjør at web-side.

265
00:11:26,620 --> 00:11:27,800
>> Men legg merke til nettadressen.

266
00:11:27,800 --> 00:11:32,430
Ingen av dere kan trekke opp denne spesifikke
side på din bærbare PC akkurat nå,

267
00:11:32,430 --> 00:11:34,910
selv innsiden av
apparatet via denne nettadressen,

268
00:11:34,910 --> 00:11:40,130
fordi file: // indikerer det er faktisk
på min filsystemet, harddisken min,

269
00:11:40,130 --> 00:11:40,990
ikke din.

270
00:11:40,990 --> 00:11:42,440
Så dette er ikke alle som nyttig.

271
00:11:42,440 --> 00:11:44,940
>> La oss nå bevege seg mot
ved bruk av en faktisk web-server.

272
00:11:44,940 --> 00:11:48,309
Og det viser seg at CS50 Appliance
er mer enn bare et miljø der

273
00:11:48,309 --> 00:11:51,100
du kan skrive C-kode og kompilere
og kjøre det ut som du har gjort.

274
00:11:51,100 --> 00:11:55,500
Det har også blitt konfigurert av
personale til å representere en typisk web

275
00:11:55,500 --> 00:11:58,290
serveren som er på internett,
en som du kan betale for

276
00:11:58,290 --> 00:12:00,210
eller en som er i den såkalte nettskyen.

277
00:12:00,210 --> 00:12:02,600
>> Og det kjører
standard gratis åpen kildekode

278
00:12:02,600 --> 00:12:06,160
programvare, for eksempel, noe
kalt Apache, som er kanskje

279
00:12:06,160 --> 00:12:08,700
fortsatt den mest populære web
serverprogramvaren i verden

280
00:12:08,700 --> 00:12:11,030
at tusenvis av nettsteder bruker i dag.

281
00:12:11,030 --> 00:12:13,420
Og det også selv har
programvare som MySQL,

282
00:12:13,420 --> 00:12:16,240
som er en databaseserver
at vi vil til slutt komme til,

283
00:12:16,240 --> 00:12:18,330
som bare er å si
Jeg kan begynne å behandle

284
00:12:18,330 --> 00:12:22,040
apparatet mitt som en fullverdig server
at jeg ikke betaler for andre steder.

285
00:12:22,040 --> 00:12:25,980
Det bare lever på min egen laptop for
utviklings- og convenience formål.

286
00:12:25,980 --> 00:12:27,870
>> Så la oss gå videre og
dra nytte av dette.

287
00:12:27,870 --> 00:12:30,120
Jeg kommer til å gå videre og
åpne opp et terminalvindu.

288
00:12:30,120 --> 00:12:33,030
Og jeg kommer til å gå videre og
move-- faktisk, først jeg er

289
00:12:33,030 --> 00:12:34,860
kommer til å navigere til skrivebordet mitt.

290
00:12:34,860 --> 00:12:36,400
Hvis jeg gjør ls, det er hello.html.

291
00:12:36,400 --> 00:12:37,022

292
00:12:37,022 --> 00:12:38,730
Og jeg kommer til å gå
videre og begynne å bruke

293
00:12:38,730 --> 00:12:40,800
en ny katalog vi har
ikke brukt før i dag.

294
00:12:40,800 --> 00:12:46,840
>> hello.html-- Jeg kommer til å flytte
til ../vhosts for virtuelle hosts--

295
00:12:46,840 --> 00:12:50,940
mer om det i future-- og deretter
inn i en katalog som heter localhost,

296
00:12:50,940 --> 00:12:54,420
som er kallenavnet gitt til nesten
hvilken som helst datamaskin, enten det er en Mac, PC,

297
00:12:54,420 --> 00:12:57,560
eller Linux-datamaskin, og deretter
spesielt i en katalog som vi,

298
00:12:57,560 --> 00:13:01,260
de ansatte som allerede er opprettet for deg når
du lastet ned apparatet kalt

299
00:13:01,260 --> 00:13:01,760
heten.

300
00:13:01,760 --> 00:13:04,551
Og som navnet antyder, noe
Jeg satt i denne mappen, i teorien,

301
00:13:04,551 --> 00:13:07,790
kommer til å nå bli
heten, i det minste i mennesker

302
00:13:07,790 --> 00:13:10,030
som har en direkte
tilkobling til datamaskinen min.

303
00:13:10,030 --> 00:13:13,160
>> Så nå la meg gå videre og
gjøre cd til den samme katalogen

304
00:13:13,160 --> 00:13:15,490
slik at jeg kan se hva som er
skjer og type ls.

305
00:13:15,490 --> 00:13:17,630
Og ja, det er det
eneste der inne.

306
00:13:17,630 --> 00:13:23,250
Jeg hevder nå at fordi jeg har satt dette
fil hello.html innsiden av en katalog

307
00:13:23,250 --> 00:13:26,940
kalt offentlig innsiden av en katalog
kalt localhost innsiden av en katalog

308
00:13:26,940 --> 00:13:29,810
kalt vhosts, som
takket være CS50 ansatte

309
00:13:29,810 --> 00:13:34,390
er forhåndskonfigurert til å være
roten av web server,

310
00:13:34,390 --> 00:13:36,900
Nå kan jeg forhåpentligvis gjøre dette.

311
00:13:36,900 --> 00:13:38,390
>> Jeg kommer til å åpne opp en ny fane.

312
00:13:38,390 --> 00:13:40,090
Og jeg kommer til å gå for ikke å file: //.

313
00:13:40,090 --> 00:13:44,520
Jeg kommer til å bruke faktiske
http / localhost, som

314
00:13:44,520 --> 00:13:47,470
igjen, er kallenavnet
for min egen server.

315
00:13:47,470 --> 00:13:51,085
Og så kommer jeg til å gå til det
filnavn, bare for å være klar?

316
00:13:51,085 --> 00:13:52,680

317
00:13:52,680 --> 00:13:54,320
Hvor er denne historien trolig kommer?

318
00:13:54,320 --> 00:13:56,066

319
00:13:56,066 --> 00:13:56,565
hello.html.

320
00:13:56,565 --> 00:13:58,350

321
00:13:58,350 --> 00:14:04,270
>> Så med andre ord, jeg ønsker å nå dette
er min egen datamaskin, mitt eget apparat,

322
00:14:04,270 --> 00:14:05,660
som om det er en faktisk server.

323
00:14:05,660 --> 00:14:07,490
Sitt kallenavn er localhost.

324
00:14:07,490 --> 00:14:10,210
Men tenk på localhost som liker
Facebook.com google.com, uansett.

325
00:14:10,210 --> 00:14:11,600
Det er bare min lokale navnet.

326
00:14:11,600 --> 00:14:14,810
Og så den siste jeg ønsker er i
roten av harddisken, så å si,

327
00:14:14,810 --> 00:14:17,729
eller roten av web server,
ergo skråstrek og deretter

328
00:14:17,729 --> 00:14:18,770
filnavnet hello.html.

329
00:14:18,770 --> 00:14:19,880

330
00:14:19,880 --> 00:14:21,930
>> La meg zoome ut og trykk Enter.

331
00:14:21,930 --> 00:14:24,266
Og ja, det er nå min nettside.

332
00:14:24,266 --> 00:14:25,390
Så det er litt annerledes.

333
00:14:25,390 --> 00:14:26,880
Og det er like uimponerende.

334
00:14:26,880 --> 00:14:27,904
Dette er den gamle versjonen.

335
00:14:27,904 --> 00:14:29,070
La meg krympe skriften tilbake.

336
00:14:29,070 --> 00:14:29,745
Dette er den gamle.

337
00:14:29,745 --> 00:14:30,890
Dette er den nye.

338
00:14:30,890 --> 00:14:35,430
Men hva som er fundamentalt skjer
Nå er at HTTP blir brukt.

339
00:14:35,430 --> 00:14:39,344
>> La oss gjøre dette litt mer tydelig, eller,
om du vil, litt mer komplisert.

340
00:14:39,344 --> 00:14:41,760
La meg gå til høyre
hjørne av apparatet mitt.

341
00:14:41,760 --> 00:14:44,000
Og legg merke til at alt dette
tid, har det vært en rekke.

342
00:14:44,000 --> 00:14:47,330
Det er den unike adressen
av CS50 Appliance.

343
00:14:47,330 --> 00:14:50,800
Det er en privat adresse,
som følger av 172.16,

344
00:14:50,800 --> 00:14:53,860
som nettopp betyr bare at du fysisk
får tilgang til denne web server.

345
00:14:53,860 --> 00:14:56,340
Alt er brannmur og
pent beskyttet fra resten

346
00:14:56,340 --> 00:14:58,130
av verden på grunn av denne adressering.

347
00:14:58,130 --> 00:15:01,920
>> Og nå merker selv hvis jeg går til
denne adressen, ikke i min apparatet,

348
00:15:01,920 --> 00:15:04,340
men i Mac OS-- kommer jeg
å gå tilbake over her.

349
00:15:04,340 --> 00:15:05,930
Dette er min Mac nå.

350
00:15:05,930 --> 00:15:08,460
Og nå kommer jeg til å åpne opp
denne versjonen av Chrome her.

351
00:15:08,460 --> 00:15:17,370
Og jeg kommer til å gå til http: //172.16.25
/ Og jeg glemmer rest-- 133.

352
00:15:17,370 --> 00:15:25,210
>> Så jeg kommer til å gå fra min Mac
at IP-adressen /hello.html Enter.

353
00:15:25,210 --> 00:15:29,850
Og nå ser jeg fra min Mac
at min CS50 Appliance, er hvem

354
00:15:29,850 --> 00:15:32,600
IP-adressen er at
nummer, er faktisk oppfører

355
00:15:32,600 --> 00:15:34,320
som en web server på internett.

356
00:15:34,320 --> 00:15:36,944
Det har ikke en fin enkel å
Husk navn som Facebook.com,

357
00:15:36,944 --> 00:15:40,370
men det er ved hjelp av HTTP
tilsynelatende, selv om Chrome

358
00:15:40,370 --> 00:15:43,560
er form for å forenkle verden
for oss, men ikke viser oss HTTP.

359
00:15:43,560 --> 00:15:46,210
Men dette er faktisk akkurat det.

360
00:15:46,210 --> 00:15:48,470
Chrome er bare å spare litt
tastetrykk i disse dager.

361
00:15:48,470 --> 00:15:50,530
Og det er det vi nå ser.

362
00:15:50,530 --> 00:15:51,890
>> Så det er alt fint og bra.

363
00:15:51,890 --> 00:15:53,740
Men det er en ganske uimponerende side.

364
00:15:53,740 --> 00:15:56,230
La meg gå inn og gjøre noe
litt annerledes nå.

365
00:15:56,230 --> 00:15:57,910
Så la meg gå tilbake til gedit.

366
00:15:57,910 --> 00:16:00,580
Og i stedet for hallo,
verden, la oss sette et bilde.

367
00:16:00,580 --> 00:16:05,880
Og jeg hevdet fra before-- la meg gå
inn i min localhost katalogen publikum.

368
00:16:05,880 --> 00:16:10,580
Og la meg gå videre og kopiere en
hel haug med filer fra i dag

369
00:16:10,580 --> 00:16:15,633
fra min Dropbox-mappen inn på her.

370
00:16:15,633 --> 00:16:19,470

371
00:16:19,470 --> 00:16:21,680
>> Nå hvis jeg skriver ls, ser
på alle disse filene

372
00:16:21,680 --> 00:16:24,940
at jeg har distribuert av
Kursets hjemmeside på forhånd i dag

373
00:16:24,940 --> 00:16:26,830
hvorav den ene er fremdeles hello.html.

374
00:16:26,830 --> 00:16:27,830
Så det er den.

375
00:16:27,830 --> 00:16:30,730
Og husker denne dumme én
fra forrige tid-- cat.jpg.

376
00:16:30,730 --> 00:16:34,550
Så la meg prøve å bygge inn
cat.jpg innsiden av nettsiden min.

377
00:16:34,550 --> 00:16:37,690
>> Jeg kommer til å gå videre
og gjøre cat.jpg, lagre.

378
00:16:37,690 --> 00:16:38,950
La meg gå tilbake til Chrome.

379
00:16:38,950 --> 00:16:41,140
Og la meg zoome inn på
font og nå lesse.

380
00:16:41,140 --> 00:16:43,090

381
00:16:43,090 --> 00:16:45,030
Oops, der jeg sette dette?

382
00:16:45,030 --> 00:16:48,210

383
00:16:48,210 --> 00:16:51,520
Standby-- jeg har fortsatt den gamle
versjonen fra min stasjonære åpne.

384
00:16:51,520 --> 00:16:56,020
Så la meg gå inn i min vhost, min
localhost, min offentlige, og hello.html.

385
00:16:56,020 --> 00:16:57,320

386
00:16:57,320 --> 00:17:00,670
Så nå la meg gå videre og
si cat.jpg innsiden av kroppen

387
00:17:00,670 --> 00:17:02,830
der jeg vil den skal være
vises og lesse.

388
00:17:02,830 --> 00:17:04,560
Selvfølgelig, dette er ikke riktig.

389
00:17:04,560 --> 00:17:08,050
>> Så jeg trenger å fortelle leseren litt
mer bevisst hva jeg vil den skal gjøre.

390
00:17:08,050 --> 00:17:10,210
Bare å skrive navnet er
åpenbart ikke tilstrekkelig.

391
00:17:10,210 --> 00:17:15,134
Så husker at det var en annen
tag, image, img for kort.

392
00:17:15,134 --> 00:17:17,550
Det er bare fordi mennesker
liker ikke type fulle ord.

393
00:17:17,550 --> 00:17:19,050
Og så kan vi gjøre source = "cat.jpg".

394
00:17:19,050 --> 00:17:21,470

395
00:17:21,470 --> 00:17:23,550
>> Og nå kommer jeg til å gjøre
en ting annerledes her.

396
00:17:23,550 --> 00:17:25,390
Selv om alle
våre tags hittil har

397
00:17:25,390 --> 00:17:28,086
hadde denne oppfatningen av en
start tag og en slutt tag,

398
00:17:28,086 --> 00:17:30,210
som ikke egentlig gjør
sans for et bilde, ikke sant?

399
00:17:30,210 --> 00:17:32,430
Et bilde er enten det eller ikke der.

400
00:17:32,430 --> 00:17:36,650
Og så mennesker har kommet
opp med en enklere konvensjonen.

401
00:17:36,650 --> 00:17:40,310
Når du har en kode som kan både
starte og slutte på samme tid--

402
00:17:40,310 --> 00:17:43,790
det kan være tomt, så å speak-- bare
sette skråstrek innsiden av tag

403
00:17:43,790 --> 00:17:44,710
helt på slutten.

404
00:17:44,710 --> 00:17:45,776

405
00:17:45,776 --> 00:17:47,150
Nå la meg gå tilbake til nettleseren min.

406
00:17:47,150 --> 00:17:50,377
Hit Reload Damn, er noe galt.

407
00:17:50,377 --> 00:17:52,460
Du har sikkert sett dette
noen ganger på nettet,

408
00:17:52,460 --> 00:17:53,600
selv om det ikke har vært din feil.

409
00:17:53,600 --> 00:17:54,766
Det er webserveren skyld.

410
00:17:54,766 --> 00:17:56,240
Hva oder dette synes å indikere?

411
00:17:56,240 --> 00:17:57,450

412
00:17:57,450 --> 00:17:58,009
Det er brutt.

413
00:17:58,009 --> 00:17:59,300
Det er der bildet tilhører.

414
00:17:59,300 --> 00:17:59,700
Yeah?

415
00:17:59,700 --> 00:18:01,560
>> PUBLIKUM: Men det gjør ikke
har tilgang til bildet.

416
00:18:01,560 --> 00:18:03,070
>> DAVID J MALAN: Det gjør ikke
har tilgang til bildet.

417
00:18:03,070 --> 00:18:05,230
Det, eller enda verre, kanskje
det ikke engang eksisterer.

418
00:18:05,230 --> 00:18:06,729
La oss se om vi ikke kan diagnostisere det.

419
00:18:06,729 --> 00:18:09,390
Husker fra forrige gang at hvis
i Chrome, i apparatet,

420
00:18:09,390 --> 00:18:11,870
eller på din Mac eller PC,
du går til Developer menyen

421
00:18:11,870 --> 00:18:14,650
og gå til utviklerverktøy
alternativet, som trolig du har

422
00:18:14,650 --> 00:18:16,850
ikke brukt mye eller noen gang.

423
00:18:16,850 --> 00:18:20,780
Og hvis jeg går til nettverk
og oppdater siden,

424
00:18:20,780 --> 00:18:24,110
la oss faktisk se på HTTP
forespørsler som blir gjort.

425
00:18:24,110 --> 00:18:28,400
>> Det ser ut som hello.html er
faktisk OK, derav 200.

426
00:18:28,400 --> 00:18:30,630
Men cat.jpg er en 403.

427
00:18:30,630 --> 00:18:31,650
Så det er ikke en 404.

428
00:18:31,650 --> 00:18:33,490
Filen eksisterer sannsynligvis.

429
00:18:33,490 --> 00:18:35,250
403 betyr forbudt.

430
00:18:35,250 --> 00:18:37,790
Så dette er litt forvirrende.

431
00:18:37,790 --> 00:18:42,340
Jeg kommer til å gå tilbake
til min terminal-vinduet.

432
00:18:42,340 --> 00:18:43,700
La meg zoome inn opp her.

433
00:18:43,700 --> 00:18:44,750
Og la meg gjøre en ls.

434
00:18:44,750 --> 00:18:46,430
Det er de samme filene.

435
00:18:46,430 --> 00:18:49,410
>> Nå la meg gjøre en ls-l,
som du har sannsynligvis

436
00:18:49,410 --> 00:18:53,350
brukt før å se på fil
størrelser kanskje eller tidsstempler.

437
00:18:53,350 --> 00:18:55,590
Og vi ser en hel haug med
overveldende informasjon.

438
00:18:55,590 --> 00:18:57,040
Men legg merke til noen detaljer.

439
00:18:57,040 --> 00:19:01,660
Her er hello.html i denne
ro her og her er cat.jpg.

440
00:19:01,660 --> 00:19:02,934

441
00:19:02,934 --> 00:19:05,850
Og det er bare apparatet blir
brukervennlig ved å markere JPEG s

442
00:19:05,850 --> 00:19:07,380
i lilla som dette.

443
00:19:07,380 --> 00:19:11,470
Men hva annet er annerledes ved siden
filstørrelsen og filnavnet?

444
00:19:11,470 --> 00:19:13,438

445
00:19:13,438 --> 00:19:14,754
>> PUBLIKUM: [uhørlig].

446
00:19:14,754 --> 00:19:16,920
DAVID J MALAN: Ja, det er
to mer R'ene over her.

447
00:19:16,920 --> 00:19:20,170
Legg merke til hva hello.html har skjer.

448
00:19:20,170 --> 00:19:24,050
Så det viser seg at navnet på
denne katalogen publikum er viktig.

449
00:19:24,050 --> 00:19:26,400
Noe i denne katalogen
er ment å være offentlig.

450
00:19:26,400 --> 00:19:28,790
Men det er ikke tilstrekkelig
bare for å slippe filer der inne.

451
00:19:28,790 --> 00:19:31,480
Du må også endre
modusen for filene,

452
00:19:31,480 --> 00:19:35,180
endre rettighetene på
filen til proaktivt ikke

453
00:19:35,180 --> 00:19:37,650
være standardinnstillingen,
som er at bare jeg kan lese

454
00:19:37,650 --> 00:19:39,220
og skrive det, jeg er eieren.

455
00:19:39,220 --> 00:19:43,540
Jeg vil at hele verden er vi alle til
være i stand til å lese filen min, så å si.

456
00:19:43,540 --> 00:19:44,950
Les betyr bare vise det.

457
00:19:44,950 --> 00:19:49,780
>> Og ja, som du ser i problemet
satt syv, det er hva disse R'ene gjennomsnittet.

458
00:19:49,780 --> 00:19:53,160
Disse to R middel la alle
ellers i verden også lese den,

459
00:19:53,160 --> 00:19:55,300
spesielt nå som
det er i denne katalogen.

460
00:19:55,300 --> 00:19:59,620
Så den enkleste måten å løse dette på er å
gå til min rask og gjøre chmod for endring

461
00:19:59,620 --> 00:20:05,580
modus og deretter gjøre en + r, til sammen,
alle, alle, pluss r for lesing,

462
00:20:05,580 --> 00:20:07,944
og deretter cat.jpg Enter.

463
00:20:07,944 --> 00:20:10,360
Ingenting ser ut til å skje, noe som
betyr vanligvis en god ting.

464
00:20:10,360 --> 00:20:13,850
Så ls-l igjen-- nå
la oss se på cat.jpg.

465
00:20:13,850 --> 00:20:15,750
Og denne tillatelsen
ser ut til å ha endret seg.

466
00:20:15,750 --> 00:20:18,670
Som en side, hvis du gjør en
feil og du, for eksempel,

467
00:20:18,670 --> 00:20:23,210
bare gjort your-- jeg ikke know-- essay
offentlig tilgjengelig ved et uhell,

468
00:20:23,210 --> 00:20:25,480
du kan gjøre det motsatte, chmod a-r.

469
00:20:25,480 --> 00:20:25,909

470
00:20:25,909 --> 00:20:28,200
Men ærlig, bør det ikke
være i offentlig katalog

471
00:20:28,200 --> 00:20:29,760
uansett om det er bekymring.

472
00:20:29,760 --> 00:20:32,475
>> Så nå la oss gå tilbake til
min nettleser og reload.

473
00:20:32,475 --> 00:20:32,904

474
00:20:32,904 --> 00:20:34,820
Og jeg kommer til å klikke
den lille Ghostbusters

475
00:20:34,820 --> 00:20:38,030
symbol for å fjerne den del av
skjermen så vi kan se nye forespørsler.

476
00:20:38,030 --> 00:20:40,630
Og ja, her er
Fisk? Cat fra før.

477
00:20:40,630 --> 00:20:43,010
Men enda viktigere,
teknisk, er det

478
00:20:43,010 --> 00:20:45,565
nummer 200, som
betyr at vi fikk det OK.

479
00:20:45,565 --> 00:20:47,190
All right, så det er alt fint og bra.

480
00:20:47,190 --> 00:20:48,940
Men vi er ikke å gjøre
det beste av nettsteder,

481
00:20:48,940 --> 00:20:51,967
heller ikke vi kommer til å prøve for hardt å
gjøre stiligste av nettsteder i dag.

482
00:20:51,967 --> 00:20:54,550
Men la oss i det minste gjøre noe
super kjent før rallende

483
00:20:54,550 --> 00:20:56,030
av noen andre koder.

484
00:20:56,030 --> 00:20:58,470
Så antar at jeg ikke bare vil ha en katt her.

485
00:20:58,470 --> 00:21:02,530
Anta at jeg faktisk ønsker dette
katten å koble til noe.

486
00:21:02,530 --> 00:21:07,210
>> Jeg kan, for eksempel
gjøre noe som dette.

487
00:21:07,210 --> 00:21:08,580

488
00:21:08,580 --> 00:21:12,890
en for anker href for
hyper referansen equals--

489
00:21:12,890 --> 00:21:17,440
og la oss bare gjøre noe
som www.google.com nært

490
00:21:17,440 --> 00:21:19,540
sitere tett brakett.

491
00:21:19,540 --> 00:21:22,000
Og nå søke for katter.

492
00:21:22,000 --> 00:21:23,520
Lukk ankerkoden.

493
00:21:23,520 --> 00:21:26,760
Så dette har bare en slags
av fundamentalt ny detalj.

494
00:21:26,760 --> 00:21:28,190
Koden er selvfølgelig annerledes.

495
00:21:28,190 --> 00:21:31,770
Det er navnet en for anker
href eller hyper referanse.

496
00:21:31,770 --> 00:21:35,269
>> Men enda viktigere, er det
Dette syntaktisk funksjon her.

497
00:21:35,269 --> 00:21:37,810
Dette er hva vi vil begynne å ringe
ikke en tag, men et attributt.

498
00:21:37,810 --> 00:21:40,830
Og et attributt er noe som
modifiserer oppførselen til en tag.

499
00:21:40,830 --> 00:21:45,400
Og dette attributtet, href, midler
endre virkemåten for denne anker

500
00:21:45,400 --> 00:21:48,430
slik at når det klikkes,
det går til denne nettadressen her.

501
00:21:48,430 --> 00:21:50,330
Og selvfølgelig, er at nettadressen Google.

502
00:21:50,330 --> 00:21:53,951
>> I mellomtiden, hva er dette
tekst her kommer til å bli?

503
00:21:53,951 --> 00:21:55,950
Vel, det kommer til å bli
hva mennesket faktisk

504
00:21:55,950 --> 00:21:58,470
ser som understreket
link, så enkelt som det.

505
00:21:58,470 --> 00:21:59,220
Så la oss prøve dette.

506
00:21:59,220 --> 00:21:59,980
La meg lagre det.

507
00:21:59,980 --> 00:22:01,650
Jeg er fortsatt i hello.html.

508
00:22:01,650 --> 00:22:05,360
Men i de versjonene på nettet, vil du se
selve filnavnene vi pre-forberedt.

509
00:22:05,360 --> 00:22:06,805
La meg gå videre og laste.

510
00:22:06,805 --> 00:22:08,680
Og nå er det en veldig
uimponerende side fortsatt.

511
00:22:08,680 --> 00:22:10,910
Men hvis jeg sveve over det--
og det er litt lite,

512
00:22:10,910 --> 00:22:13,576
men-- du kan se i bunnen
venstre hjørne av skjermen,

513
00:22:13,576 --> 00:22:15,242
det er faktisk kommer til google.com.

514
00:22:15,242 --> 00:22:19,280
Og hvis jeg klikker det, vil det
visp meg veien til selve Google.

515
00:22:19,280 --> 00:22:22,610
>> Men legg merke til her en mulighet for
utnytting, akkurat som en digresjon.

516
00:22:22,610 --> 00:22:25,150
Og vi vil komme tilbake til andre
spørsmål om sikkerhet før lenge.

517
00:22:25,150 --> 00:22:29,290
Fordi det er denne motsetningen
mellom hvor du går og hva du sier,

518
00:22:29,290 --> 00:22:34,722
du kunne gjøre noe sånt
dette-- http://www.google.com.

519
00:22:34,722 --> 00:22:37,134
OK, og nå hvis jeg reload
etter lagring den siden,

520
00:22:37,134 --> 00:22:38,800
det ser ut som jeg kommer til å gå til Google.

521
00:22:38,800 --> 00:22:40,966
Men det er ingen grunn til at jeg
må gå til Google, ikke sant?

522
00:22:40,966 --> 00:22:47,460
Jeg kunne faktisk gå til noe sånt
badguy.com, oppdater siden over her.

523
00:22:47,460 --> 00:22:49,750
Og legg merke til, likevel ser det ut som Google.

524
00:22:49,750 --> 00:22:52,020
Og bare hvis jeg er skarp
nok til å sveve over her

525
00:22:52,020 --> 00:22:54,770
ser jeg det selv kommer til
gå til et annet sted.

526
00:22:54,770 --> 00:22:57,400
>> Så hvis du noen gang har fått
en e-post, spesielt

527
00:22:57,400 --> 00:22:59,610
en fra Paypal, eller
tilsynelatende fra Paypal

528
00:22:59,610 --> 00:23:01,830
ber deg om å logge inn
til kontoen din, dette

529
00:23:01,830 --> 00:23:06,380
er grunnen til at du bør aldri
noensinne klikk lenker i e-poster,

530
00:23:06,380 --> 00:23:07,930
ærlig, noen linker i e-poster.

531
00:23:07,930 --> 00:23:10,380
Hvis du vet at du har faktiske
penger i Paypal eller Bank

532
00:23:10,380 --> 00:23:14,250
of America eller Fidelity eller noen
nettside, manuelt skrive det i.

533
00:23:14,250 --> 00:23:17,530
Fordi ser hvor enkelt det er å
lure noen til å presentere hva

534
00:23:17,530 --> 00:23:18,526
ser ut som en link.

535
00:23:18,526 --> 00:23:20,400
Men det faktisk kunne
går absolutt overalt.

536
00:23:20,400 --> 00:23:23,301
>> Og det er langt større
trusler enn dette.

537
00:23:23,301 --> 00:23:25,300
Faktisk er dette litt
av en tangent nå, men én

538
00:23:25,300 --> 00:23:28,430
av de beste jeg noensinne har sett
som siden er blitt stengt,

539
00:23:28,430 --> 00:23:34,060
er noens ført folk
to-- så dette kan si,

540
00:23:34,060 --> 00:23:37,660
klikk her for å logge inn
konto, en bankkonto.

541
00:23:37,660 --> 00:23:40,985
Og dette var Bank of the West.

542
00:23:40,985 --> 00:23:43,030

543
00:23:43,030 --> 00:23:44,250
>> Så noen kjøpte dette.

544
00:23:44,250 --> 00:23:47,090
Og det er litt lettere å se
det i en mono linjeavstand font zoomet

545
00:23:47,090 --> 00:23:49,190
i på en 30-fots projektoren.

546
00:23:49,190 --> 00:23:51,720
Men når det er liten skrift i en
e-post som du mottar,

547
00:23:51,720 --> 00:23:54,690
dette ser ut som bankofthewest.com,
ikke bankofthevvest.com,

548
00:23:54,690 --> 00:23:58,230
der noen hadde betalt $ 10 for å kjøpe.

549
00:23:58,230 --> 00:24:00,840
Og så dette førte dem til
tilsvarer noen dårlige nettsider.

550
00:24:00,840 --> 00:24:05,540
>> Og du vil se også-- faktisk kan vi gjøre
dette-- hvis jeg går til selve nettsiden,

551
00:24:05,540 --> 00:24:10,335
bankofthewest.com, igjen,
tilbakekalling fra forrige gang

552
00:24:10,335 --> 00:24:13,210
at hvis dette er deres web-side og
du er nysgjerrig på hvordan det fungerer,

553
00:24:13,210 --> 00:24:15,610
du kan sikkert gå til
Chrome utviklerverktøy.

554
00:24:15,610 --> 00:24:18,890
Og du kan se alle de
HTML pent formatert der.

555
00:24:18,890 --> 00:24:20,890
>> Men mer til poenget,
du cam-- la oss lukke

556
00:24:20,890 --> 00:24:24,760
dette-- du kan gå til Vis
Utvikler View Source.

557
00:24:24,760 --> 00:24:25,770

558
00:24:25,770 --> 00:24:28,350
Hvorfor kan jeg ikke bare kopiere
alt dette og da jeg

559
00:24:28,350 --> 00:24:31,630
kan gå inn i min lille gedit vindu
her og lage min egen nettside.

560
00:24:31,630 --> 00:24:33,210
Lagre dette i hello.html.

561
00:24:33,210 --> 00:24:36,770
Og sannsynligvis dette kommer til å bryte,
fordi det er ikke så enkelt som regel.

562
00:24:36,770 --> 00:24:41,590
Men nå hvis jeg laste min egen side på
min egen CS50 Appliance og traff reload,

563
00:24:41,590 --> 00:24:42,990
OK, brøt noen ting.

564
00:24:42,990 --> 00:24:45,750
Men jeg er ganske nær å ha
min egen bank nettside, ikke sant?

565
00:24:45,750 --> 00:24:46,570
Alt dette HTML--

566
00:24:46,570 --> 00:24:47,370
>> [Latter]

567
00:24:47,370 --> 00:24:49,210
>> DAVID J MALAN: --Jeg
ikke actually-- og du

568
00:24:49,210 --> 00:24:52,210
vet det er noen der ute som
ville faktisk klikker på disse lenkene også.

569
00:24:52,210 --> 00:24:54,864
Så klart, brøt noen ting.

570
00:24:54,864 --> 00:24:56,780
Men det kommer til å lede
oss inn i en diskusjon,

571
00:24:56,780 --> 00:25:00,810
unødvendig akkurat nå, med hensyn til hva
CSS, Cascading Style Sheets, er,

572
00:25:00,810 --> 00:25:03,410
og hvordan du faktisk
laste ned de andre HTML-filer

573
00:25:03,410 --> 00:25:06,140
og JPEG-filer GIF-filer som
nettsiden bruker kanskje.

574
00:25:06,140 --> 00:25:07,960
Men alt dette er accomplishable.

575
00:25:07,960 --> 00:25:11,110
Men det virkelig koker ned til
disse svært enkle heuristikk.

576
00:25:11,110 --> 00:25:14,450
>> Så nå la oss bare skumme gjennom en
par andre eksempler på HTML

577
00:25:14,450 --> 00:25:16,680
bare for å gi deg en følelse
av hva annet du kan gjøre.

578
00:25:16,680 --> 00:25:18,670
For eksempel er dette list.html.

579
00:25:18,670 --> 00:25:23,240
Anta at jeg ønsket å lage en web-side
med en liste over husene i quad.

580
00:25:23,240 --> 00:25:28,960
Jeg kan bruke ul tag for uordnet
listen, og deretter listeelementet barnet

581
00:25:28,960 --> 00:25:33,760
og deretter veksle over-- eller liste,
rather-- husene i spørsmålet.

582
00:25:33,760 --> 00:25:36,080
>> Og hvis jeg åpner dette opp, la oss gjøre dette.

583
00:25:36,080 --> 00:25:40,670
La oss gå til ikke å hello.html,
men å list.html.

584
00:25:40,670 --> 00:25:42,160
Pokker.

585
00:25:42,160 --> 00:25:43,000
Hvordan løser jeg dette?

586
00:25:43,000 --> 00:25:45,679

587
00:25:45,679 --> 00:25:47,220
Det er det samme problemet som før, ikke sant?

588
00:25:47,220 --> 00:25:52,510
Så la meg gjøre chmod-- oops--
chmod a + r av list.html.

589
00:25:52,510 --> 00:25:54,610

590
00:25:54,610 --> 00:25:59,610
Og nå hvis jeg går tilbake til nettleseren min
og klikk Reload, det er det.

591
00:25:59,610 --> 00:26:02,360
Så hvis du noen gang ønsket å lage
en punktliste, kan du gjøre det.

592
00:26:02,360 --> 00:26:06,210
Hvis du ønsker å være super fancy og gjøre
en sortert liste, ikke en uordnet liste,

593
00:26:06,210 --> 00:26:10,170
endre disse til ol, oppdater siden, og
nå nettleseren vil nummerere det for deg.

594
00:26:10,170 --> 00:26:11,241
>> Hva annet kan vi gjøre?

595
00:26:11,241 --> 00:26:13,990
Vel, et par others-- hvis
du har lange avsnitt av text--

596
00:26:13,990 --> 00:26:15,698
for eksempel, noen
Latinske teksten som dette--

597
00:26:15,698 --> 00:26:20,730
og du vil ha den i eget avsnitt,
åpen p, tett p for avsnittet tag.

598
00:26:20,730 --> 00:26:22,010
Og gjøre det igjen og igjen.

599
00:26:22,010 --> 00:26:26,600
Og hvis jeg nå åpner opp denne filen,
paragraphs.html, vel, dette

600
00:26:26,600 --> 00:26:27,570
blir irriterende.

601
00:26:27,570 --> 00:26:34,320
Så nå la oss bare gå tilbake til min
teksten, chmod en + r r stjerne .html--

602
00:26:34,320 --> 00:26:36,099
en fin liten wild card så å si.

603
00:26:36,099 --> 00:26:37,890
Det bør fikse alt
disse problemene for meg.

604
00:26:37,890 --> 00:26:38,990
La oss lesse.

605
00:26:38,990 --> 00:26:40,500
Det er tre avsnitt.

606
00:26:40,500 --> 00:26:42,930
>> Og nå la oss gå videre
og åpne opp en annen.

607
00:26:42,930 --> 00:26:44,310
Hva med bordet?

608
00:26:44,310 --> 00:26:46,440
Du vil merke tabellen utseende
litt mer komplisert.

609
00:26:46,440 --> 00:26:49,110
Men det er den samme idea--
åpen tag, åpen kode,

610
00:26:49,110 --> 00:26:51,360
åpen, åpen, åpen, tett tag, åpen tag.

611
00:26:51,360 --> 00:26:54,410
Og disse skje til å stå for
tabellen, hvis grensen er tilsynelatende

612
00:26:54,410 --> 00:26:58,500
kommer til å bli en tykkelse 1-- uansett
at means-- tabellen rad, bord

613
00:26:58,500 --> 00:27:00,320
data, noe som betyr en celle.

614
00:27:00,320 --> 00:27:03,840
Og hvis jeg går tilbake til nettleseren min
her og gå til table.html,

615
00:27:03,840 --> 00:27:05,840
du kan se noe
som dette, heslig.

616
00:27:05,840 --> 00:27:07,840
Men vi vil komme til poenget
hvor vi faktisk kan

617
00:27:07,840 --> 00:27:09,260
gjøre ting penere enn det.

618
00:27:09,260 --> 00:27:10,530
>> Så la meg fastsette for nå.

619
00:27:10,530 --> 00:27:11,870
Det er bunter av flere tags.

620
00:27:11,870 --> 00:27:15,225
Og HTML er herlig å plukke opp
fordi, ærlig, alt du trenger å gjøre

621
00:27:15,225 --> 00:27:17,600
er å se på eksisterende nettsider
som du er kjent.

622
00:27:17,600 --> 00:27:20,340
Og du er like, oh, det er hvordan
de gjorde dette estetisk.

623
00:27:20,340 --> 00:27:23,159
>> Eller du kan slå opp alle online
ressurs med hensyn til hvordan HTML virker,

624
00:27:23,159 --> 00:27:25,700
og du vil se at det er en
Hele vokabular av andre koder.

625
00:27:25,700 --> 00:27:30,110
Men med enkle mental modell
alene at nesten hvilken som helst kode du åpner

626
00:27:30,110 --> 00:27:33,620
må være lukket, det virkelig
ikke nok til å lære seg

627
00:27:33,620 --> 00:27:36,950
HTML etter forstå
disse grunnleggende ideer om tags

628
00:27:36,950 --> 00:27:40,520
og attributter og godt formedness
at vi har snakket om,

629
00:27:40,520 --> 00:27:44,697
lukking noe som vi kan åpne
slik at vi ikke forvirre en nettleser.

630
00:27:44,697 --> 00:27:46,780
Så la oss nå ta dette til
et mer interessant nivå

631
00:27:46,780 --> 00:27:48,100
ved å gå til selve.

632
00:27:48,100 --> 00:27:51,095
Og la oss gå til min Mac
her, til google.com.

633
00:27:51,095 --> 00:27:52,280

634
00:27:52,280 --> 00:27:54,020
Og nå notice-- la oss gjøre dette.

635
00:27:54,020 --> 00:27:57,280
Jeg gong å gå til
Innstillinger, Innstillinger for søk.

636
00:27:57,280 --> 00:28:01,070
Jeg ønsker å slå av denne irriterende øyeblikk
Resultatene ting der det umiddelbart

637
00:28:01,070 --> 00:28:02,450
begynner å reagere på din skriver.

638
00:28:02,450 --> 00:28:05,300
La oss gjøre dette eldre skolen så
vi faktisk se hva som skjer.

639
00:28:05,300 --> 00:28:08,260
>> Så jeg kommer til å redde min
Google-innstillinger her.

640
00:28:08,260 --> 00:28:11,160
Og nå notice-- jeg kommer til å
søke etter noe som katter.

641
00:28:11,160 --> 00:28:14,500
Og det er fortsatt gjør auto
komplett her, men basert på ting

642
00:28:14,500 --> 00:28:15,970
folk har skrevet i det siste.

643
00:28:15,970 --> 00:28:17,490
Men legg merke til hva som kommer til å skje.

644
00:28:17,490 --> 00:28:20,272
>> I URL i øyeblikket
er dette, bare google.com.

645
00:28:20,272 --> 00:28:22,650
Og teknisk sett er det skråstrek.

646
00:28:22,650 --> 00:28:25,910
Google er bare å lagre en karakter
og ikke viser oss det.

647
00:28:25,910 --> 00:28:30,400
De viser oss https, bare
å være super betryggende at vi er

648
00:28:30,400 --> 00:28:32,850
på en sikker eller kryptert side.

649
00:28:32,850 --> 00:28:35,690
>> Så la meg gå videre og søke etter katter.

650
00:28:35,690 --> 00:28:37,670
Nå fikk virkelig
overveldende raskt.

651
00:28:37,670 --> 00:28:39,470
Se på lengden på denne nettadressen.

652
00:28:39,470 --> 00:28:43,070
Men det viser seg at de fleste av disse tingene
i URL er faktisk ganske ubrukelig.

653
00:28:43,070 --> 00:28:45,320
Jeg kommer til å begynne å slette
ting jeg ikke forstår.

654
00:28:45,320 --> 00:28:46,560

655
00:28:46,560 --> 00:28:47,360
Jeg ser katter.

656
00:28:47,360 --> 00:28:48,470
Jeg forstår katter.

657
00:28:48,470 --> 00:28:50,380
Jeg vet ikke hvorfor katter er der igjen.

658
00:28:50,380 --> 00:28:52,620
Jeg vet virkelig ikke
hva dette tullet er.

659
00:28:52,620 --> 00:28:56,030
Så jeg skal bare holde
utheving og slette ting

660
00:28:56,030 --> 00:28:59,905
at jeg ikke forstår,
destillere URL i nettopp dette.

661
00:28:59,905 --> 00:29:00,920

662
00:29:00,920 --> 00:29:02,270
>> Nå la meg få gå inn igjen.

663
00:29:02,270 --> 00:29:03,814
Det ser ut som Google fortsatt fungerer.

664
00:29:03,814 --> 00:29:06,980
Så en eller annen grunn, de legger til en
masse ting til sin URL-er som standard.

665
00:29:06,980 --> 00:29:09,000
Men det er ikke strengt nødvendig.

666
00:29:09,000 --> 00:29:10,340
Så hva er fint om dette?

667
00:29:10,340 --> 00:29:13,630
Vel, la meg gå videre og
åpne opp Chrome Inspector.

668
00:29:13,630 --> 00:29:15,960
Det er en liten mus snarvei for det.

669
00:29:15,960 --> 00:29:17,360
>> Gå til kategorien Network.

670
00:29:17,360 --> 00:29:19,340
Og nå la meg laste
denne siden en gang til.

671
00:29:19,340 --> 00:29:20,280
Og jeg holder Shift.

672
00:29:20,280 --> 00:29:22,520
Som en side, nettlesere
har en tendens til å cache eller lagre

673
00:29:22,520 --> 00:29:24,697
informasjon bare for effektivitet skyld.

674
00:29:24,697 --> 00:29:27,280
Men vanligvis holder Shift og
omlasting vil tvinge alt

675
00:29:27,280 --> 00:29:28,994
å starte på nytt fra begynnelsen.

676
00:29:28,994 --> 00:29:30,410
Og det er det jeg ønsker å gjøre her.

677
00:29:30,410 --> 00:29:33,550
>> Og legg merke til alle disse
rader som bare dukket opp.

678
00:29:33,550 --> 00:29:37,920
Det viser seg at i en gitt web
side, kan det være bare en fil

679
00:29:37,920 --> 00:29:43,500
involved-- hello.html-- eller det
kan være 52, som i dette tilfellet.

680
00:29:43,500 --> 00:29:45,820
Når jeg besøker google.com,
tilsynelatende, nettleseren min

681
00:29:45,820 --> 00:29:49,650
spark av 52 separate HTTP-forespørsler.

682
00:29:49,650 --> 00:29:50,520
Hvorfor er det?

683
00:29:50,520 --> 00:29:53,380
>> Vel, se på hva som er inni
på denne nettsiden opp toppen.

684
00:29:53,380 --> 00:29:55,620
Det er ikke bare tekst,
men det er faktiske bilder

685
00:29:55,620 --> 00:29:57,130
katter over til høyre.

686
00:29:57,130 --> 00:29:59,110
Det er en fargerik logo her oppe til venstre.

687
00:29:59,110 --> 00:30:01,750
Det er alle disse ikonene
for en mikrofon og så videre.

688
00:30:01,750 --> 00:30:05,130
Det er en masse stykker, bygge
blokker, skrape stykker, om du vil,

689
00:30:05,130 --> 00:30:06,250
til denne nettsiden.

690
00:30:06,250 --> 00:30:10,310
Og hva leseren gjør på
får den aller første filen, som

691
00:30:10,310 --> 00:30:16,180
er denne raden her, er det i hovedsak
itera over HTML toppen

692
00:30:16,180 --> 00:30:19,880
til nederst, venstre til høyre, på jakt etter
ting som bilde-koder eller andre koder

693
00:30:19,880 --> 00:30:23,160
som er å nevne andre filer og
når den ser dem, går og henter dem

694
00:30:23,160 --> 00:30:26,050
via HTTP, levedyktig hele
konvolutt metafor,

695
00:30:26,050 --> 00:30:29,670
og så viser dem i
hensiktsmessig plassering i web siden.

696
00:30:29,670 --> 00:30:33,370
>> Men legg merke til her hvis jeg fokuserer på
de første kast, søke katter,

697
00:30:33,370 --> 00:30:37,090
Legg merke til at, ja det er ved hjelp av HTTP 1.1.

698
00:30:37,090 --> 00:30:41,690
Og dessverre, Google
Chrome akkurat nå i versjon 39

699
00:30:41,690 --> 00:30:45,110
er slags dumbing ting ned og
ikke viser oss den faktiske overskrifter.

700
00:30:45,110 --> 00:30:49,680
Men hva ble faktisk sendt en forespørsel
for ikke å kutte, men / search? q = katter.

701
00:30:49,680 --> 00:30:52,830

702
00:30:52,830 --> 00:30:54,340
>> Nå, hvorfor er det viktig?

703
00:30:54,340 --> 00:30:57,110
Vel, jeg kommer til å slutte
fra dette at hvis du Google

704
00:30:57,110 --> 00:31:01,520
støtter søk av dette skjemaet, hvorfor
jeg ikke gjennomføre min egen søk

705
00:31:01,520 --> 00:31:06,420
motor for CS50, men bare foran
ende, bare det grafiske brukergrensesnittet.

706
00:31:06,420 --> 00:31:09,610
Og vi vil outsource bakenden,
selve søkeresultatene til Google.

707
00:31:09,610 --> 00:31:10,510
>> Så hvordan kan jeg gjøre dette?

708
00:31:10,510 --> 00:31:13,820
Vel, la meg gå inn i gedit over her.

709
00:31:13,820 --> 00:31:19,180
Og la meg gå videre og åpne
opp, la oss si, en ny fil.

710
00:31:19,180 --> 00:31:22,280
Og jeg kommer til å lagre denne
midlertidig som søk-0.html.

711
00:31:22,280 --> 00:31:25,111

712
00:31:25,111 --> 00:31:27,860
Og så til slutt, vil vi fort
frem til den jeg pre-forberedt.

713
00:31:27,860 --> 00:31:30,190
>> Og jeg kommer til å
raskt piske opp doc typen

714
00:31:30,190 --> 00:31:33,840
html åpen brakett html
tett brakett html.

715
00:31:33,840 --> 00:31:38,390
Så jeg kommer til å gjøre hodet
tett hode åpent tittelen CS50

716
00:31:38,390 --> 00:31:40,150
Søk i stedet for Google-søk.

717
00:31:40,150 --> 00:31:43,480
Ned her jeg kommer til å ha
kroppen, her nede nær kroppen.

718
00:31:43,480 --> 00:31:45,835
Og nå trenger jeg CS50 søk.

719
00:31:45,835 --> 00:31:47,710
Og faktisk, la oss
bygge dette trinnvis.

720
00:31:47,710 --> 00:31:51,043
Jeg kommer til å gå videre og lukke denne og
faktisk sette det i min offentlig katalog.

721
00:31:51,043 --> 00:31:52,730
Så gi meg bare et øyeblikk.

722
00:31:52,730 --> 00:31:55,390
search-0.html-- Jeg kommer til å
timelig kaller det search.html.

723
00:31:55,390 --> 00:31:56,600

724
00:31:56,600 --> 00:31:59,750
Jeg kommer til å chmod det en + r search.html.

725
00:31:59,750 --> 00:32:01,072

726
00:32:01,072 --> 00:32:02,280
Og nå kommer jeg til å åpne den.

727
00:32:02,280 --> 00:32:03,224

728
00:32:03,224 --> 00:32:04,390
All right, så det var fort.

729
00:32:04,390 --> 00:32:06,800
Men målet var rett og slett
å få oss til poenget

730
00:32:06,800 --> 00:32:09,630
av å ha denne teksten
fil kalt search.html.

731
00:32:09,630 --> 00:32:10,940

732
00:32:10,940 --> 00:32:12,790
Så ikke mye å se på ennå.

733
00:32:12,790 --> 00:32:16,970
Faktisk, hvis jeg går til nettleseren min, og
gå til search.html, det er alt det er.

734
00:32:16,970 --> 00:32:17,720
Men vet du hva?

735
00:32:17,720 --> 00:32:19,000
Jeg kan være litt mer avansert.

736
00:32:19,000 --> 00:32:22,710
Jeg leste i en bok at det er
en overskrift tag kalt h1.

737
00:32:22,710 --> 00:32:26,100
Og jeg kommer til å gå videre og
bruke det åpne h1 og nær h1.

738
00:32:26,100 --> 00:32:27,220
Oppdater siden.

739
00:32:27,220 --> 00:32:29,600
Og nå er det større og dristigere,
ikke alle som interessant,

740
00:32:29,600 --> 00:32:32,399
men minst det strukturelt
mer interessant.

741
00:32:32,399 --> 00:32:33,940
Men nå la meg presentere et annet tag.

742
00:32:33,940 --> 00:32:36,500
Det viser seg at det er en form tag.

743
00:32:36,500 --> 00:32:38,400
Og la meg avslutte denne koden.

744
00:32:38,400 --> 00:32:40,830
Og det viser seg at det er
en inngang kode som

745
00:32:40,830 --> 00:32:44,600
har en egenskap som kalles type, som
er datatypen for feltet,

746
00:32:44,600 --> 00:32:45,200
hvis du vil.

747
00:32:45,200 --> 00:32:47,050
Og kommer til å være av typen tekst.

748
00:32:47,050 --> 00:32:52,200
Og dens verdi kommer
å være CS50 søk.

749
00:32:52,200 --> 00:32:53,850
Lukk tag.

750
00:32:53,850 --> 00:32:57,100
Og det kommer til å være noen forestilling om
åpne og lukke med skilletegn mellom tagger.

751
00:32:57,100 --> 00:33:00,300
>> La meg gå tilbake hit og
se hva som skjer, lesse.

752
00:33:00,300 --> 00:33:01,380
Komme interessant.

753
00:33:01,380 --> 00:33:02,950
Det ser ut som det er et tekstfelt.

754
00:33:02,950 --> 00:33:04,080

755
00:33:04,080 --> 00:33:06,999
Og faktisk, det gjorde jeg ikke ønsker
å sette en verdi der ennå.

756
00:33:06,999 --> 00:33:10,040
La meg gå tilbake hit og faktisk få
kvitt denne verdien for å holde det enkelt.

757
00:33:10,040 --> 00:33:12,939
I stedet for en verdi, hva jeg ville
å gi denne tingen var et navn.

758
00:33:12,939 --> 00:33:15,230
Og jeg vet ikke hva det er,
så jeg skal komme tilbake til det.

759
00:33:15,230 --> 00:33:18,270
>> Men under det, jeg vil ha
å gjøre input type = send.

760
00:33:18,270 --> 00:33:19,840

761
00:33:19,840 --> 00:33:22,120
Og denne verdien vil være CS50 søk.

762
00:33:22,120 --> 00:33:24,850
Og vi vil se hvorfor jeg
flyttet verdien til dette.

763
00:33:24,850 --> 00:33:28,900
Når jeg laster, synes jeg å nå har
begynnelsen på mitt eget søk

764
00:33:28,900 --> 00:33:30,820
motor, super heslig,
men ærlig talt, det er

765
00:33:30,820 --> 00:33:34,260
ikke et langt innkast fra hva
Googles standardside ser ut.

766
00:33:34,260 --> 00:33:37,950
>> Hvis jeg går her nå, kan jeg skrive inn
katter og forhåpentligvis deretter Søk.

767
00:33:37,950 --> 00:33:40,380
Men jeg er ikke helt ferdig ennå,
fordi jeg ikke har gjennomført,

768
00:33:40,380 --> 00:33:41,045
selvsagt, en database.

769
00:33:41,045 --> 00:33:42,940
Jeg har ikke gjennomsøkt
nettet for søkeresultatene.

770
00:33:42,940 --> 00:33:44,840
Så jeg trenger å outsource det til Google.

771
00:33:44,840 --> 00:33:46,290
Så hvordan gjør jeg dette?

772
00:33:46,290 --> 00:33:49,170
>> Vel, først av alt jeg
må legge til og handling

773
00:33:49,170 --> 00:33:58,460
attributt til formen min kode som
er http://www.google.com/search.

774
00:33:58,460 --> 00:34:01,180
Og jeg vet at det bare fra å ha
utledes ved å se nærmere

775
00:34:01,180 --> 00:34:02,505
på deres nettadresser.

776
00:34:02,505 --> 00:34:03,380
Og nå ta en gjetning.

777
00:34:03,380 --> 00:34:09,090
Hva bør dette tekstfeltet trolig
bli kalt, basert på hvor vi kom

778
00:34:09,090 --> 00:34:09,754
fra før?

779
00:34:09,754 --> 00:34:11,896

780
00:34:11,896 --> 00:34:13,290
>> PUBLIKUM:? Q.

781
00:34:13,290 --> 00:34:14,370
>> DAVID J MALAN:? Q.

782
00:34:14,370 --> 00:34:17,800
Og vi ikke egentlig trenger spørsmålet
markere det viser seg, men q er faktisk det,

783
00:34:17,800 --> 00:34:20,489
q for søk sannsynligvis av
standard, bare fordi det er

784
00:34:20,489 --> 00:34:23,060
hva Larry og Sergey
kom opp med år siden.

785
00:34:23,060 --> 00:34:24,739
Så nå la meg laste denne siden.

786
00:34:24,739 --> 00:34:26,409
Det ser ikke så forskjellig.

787
00:34:26,409 --> 00:34:28,120
Men nå se hva som skjer.

788
00:34:28,120 --> 00:34:32,360
>> Hvis jeg skriver i katter og klikk
CS50 Søk og la gå,

789
00:34:32,360 --> 00:34:35,770
merker jeg blir revet
bort til selve Google.

790
00:34:35,770 --> 00:34:38,150
Nå er Google blir litt
irriterende ved at de er

791
00:34:38,150 --> 00:34:41,877
tilføye en ekstra parameter,
om du vil, til nettadressen.

792
00:34:41,877 --> 00:34:43,960
Det er alt skjer
automatisk på Google side.

793
00:34:43,960 --> 00:34:48,730
>> Den viktigste delen er at jeg synes
å ha generert denne forespørselen her.

794
00:34:48,730 --> 00:34:50,179
Og ja, det er hva som skjer.

795
00:34:50,179 --> 00:34:53,040
Når du har HTML som
ser slik ut, dette

796
00:34:53,040 --> 00:34:57,620
er liksom webutviklere notasjon
for å si, gå videre og lage et skjema

797
00:34:57,620 --> 00:34:59,990
at når den er sendt,
det kommer til å gå til denne nettadressen.

798
00:34:59,990 --> 00:35:03,430
Og når nettadressen har gitt
verdier for ting som q,

799
00:35:03,430 --> 00:35:05,440
ikke gå rett til denne nettadressen.

800
00:35:05,440 --> 00:35:08,210
Egentlig, gå til spørsmål
mark og deretter q = katter.

801
00:35:08,210 --> 00:35:09,590

802
00:35:09,590 --> 00:35:13,060
Tilføye parameter, den
HTTP parameter sånn.

803
00:35:13,060 --> 00:35:15,590
>> Og bare for å være super presis,
hva som blir utledes her--

804
00:35:15,590 --> 00:35:18,130
men jeg vil være mer explicit-- er
at metoden jeg vil bruke

805
00:35:18,130 --> 00:35:22,270
er få, i stedet for noe sånt
post, som vi vil til slutt se.

806
00:35:22,270 --> 00:35:27,710
Så kort sagt, ganske enkelt ved å forstå
HTML og bruke noen ganske enkle koder,

807
00:35:27,710 --> 00:35:30,610
vi kan nå begynne å lage
vår egen front end user

808
00:35:30,610 --> 00:35:32,850
grensesnitt med et søk
Motoren bak det.

809
00:35:32,850 --> 00:35:34,800
>> Men dette er selvfølgelig ganske heslig.

810
00:35:34,800 --> 00:35:37,259
Så la meg faktisk åpne opp
en litt bedre versjon.

811
00:35:37,259 --> 00:35:39,800
Dette er den jeg forberedt på
avansere som har noen kommentarer.

812
00:35:39,800 --> 00:35:41,900
Men du vil se at jeg
ganske mye gjenskapt det.

813
00:35:41,900 --> 00:35:44,150
Så dette er allerede tilgjengelig på nettet.

814
00:35:44,150 --> 00:35:48,050
Og jeg tilfeldigvis preemptively
gå til https bare for å holde det enkelt.

815
00:35:48,050 --> 00:35:50,610
>> Og nå skal vi åpne opp en
neste iterasjon av dette.

816
00:35:50,610 --> 00:35:52,510
Er versjon 1 i stedet for 0.

817
00:35:52,510 --> 00:35:55,315
Hva hopper ut på deg som litt
forskjellige i dette eksempel?

818
00:35:55,315 --> 00:35:59,480

819
00:35:59,480 --> 00:36:00,440
>> PUBLIKUM: [uhørlig].

820
00:36:00,440 --> 00:36:03,020
>> Ja, det er denne teksten justere center.

821
00:36:03,020 --> 00:36:04,590
Dette er litt rart her oppe.

822
00:36:04,590 --> 00:36:06,150
Men dette er faktisk nytt.

823
00:36:06,150 --> 00:36:07,800
Og kanskje gjette hva som kommer til å skje.

824
00:36:07,800 --> 00:36:11,730
Hvis jeg går til nettleseren min nå
og besøke søke-1.html,

825
00:36:11,730 --> 00:36:13,090
det er nesten det samme.

826
00:36:13,090 --> 00:36:15,705
Men det er et skritt nærmere
blir litt mer pen.

827
00:36:15,705 --> 00:36:19,150
Det er fortsatt stygg, men penere i at
minst alt er nå sentrert.

828
00:36:19,150 --> 00:36:23,470
>> Så det viser seg at det som jeg bruker
er et annet språk helt kalt

829
00:36:23,470 --> 00:36:25,680
CSS, Cascading Style Sheets.

830
00:36:25,680 --> 00:36:28,310
Og CSS, ærlig, snill
av, etter min personlige mening,

831
00:36:28,310 --> 00:36:29,775
en atrociously designet språk.

832
00:36:29,775 --> 00:36:33,110
Det er veldig irriterende å huske
alle de ulike detaljene.

833
00:36:33,110 --> 00:36:38,479
Men det er hva stylizes den
Hele verdensomspennende nettet i dag.

834
00:36:38,479 --> 00:36:39,270
Jeg fornærmet noen.

835
00:36:39,270 --> 00:36:39,769
OK.

836
00:36:39,769 --> 00:36:43,180
Så la oss gå tilbake hit og se
hvordan vi faktisk bruker dette.

837
00:36:43,180 --> 00:36:45,940
Og det viser seg, i hvert fall det er
faktisk en ganske enkelt språk.

838
00:36:45,940 --> 00:36:49,470
Det er bare sentrale verdi parene, egenskaper
og verdier, egenskaper og verdier.

839
00:36:49,470 --> 00:36:52,080
Ja, her er ett
slik eiendom og verdi.

840
00:36:52,080 --> 00:36:55,890
>> Bare ved hjelp av stilen
attributt på kroppen min tag

841
00:36:55,890 --> 00:37:00,360
og gi den en verdi på en
ordet kolon og et annet ord,

842
00:37:00,360 --> 00:37:03,730
eller en eiendom og en verdi,
Jeg kan påvirke estetikk

843
00:37:03,730 --> 00:37:06,210
på web-siden, ikke
nødvendigvis strukturen ennå,

844
00:37:06,210 --> 00:37:07,550
men estetikk det.

845
00:37:07,550 --> 00:37:10,960
Og bare ved googling rundt, skjønner jeg
at CSS, Cascading Style Sheets,

846
00:37:10,960 --> 00:37:14,170
støtter en egenskap kalt
text-align, der verdien kan

847
00:37:14,170 --> 00:37:16,980
stå, høyre eller sentrum, for eksempel.

848
00:37:16,980 --> 00:37:19,990
>> Så nå når jeg reload
denne siden, hva jeg fikk

849
00:37:19,990 --> 00:37:22,730
var en sentrert side,
men fortsatt ganske stygg.

850
00:37:22,730 --> 00:37:25,770
La oss gå videre og åpne
opp versjon 2 av Søk.

851
00:37:25,770 --> 00:37:28,570
Og nå merker jeg har gjort litt mer.

852
00:37:28,570 --> 00:37:33,760
Legg merke til at opp her på innsiden av hodet
koden, kan det være mer enn tittelen.

853
00:37:33,760 --> 00:37:35,400
Faktisk, det er en stil tag.

854
00:37:35,400 --> 00:37:38,630
Og det er her det bare blir en
litt rotete seeing CSS noen ganger.

855
00:37:38,630 --> 00:37:41,971
>> Legg merke til at jeg synes å ha noe
som strukturelt ser veldig annerledes ut.

856
00:37:41,971 --> 00:37:44,095
Men her er navnet
koden jeg ønsker å stilisert.

857
00:37:44,095 --> 00:37:47,570
Her er våre gamle venner krøllete
bukseseler og lukket krøllete brace.

858
00:37:47,570 --> 00:37:50,290
Og så her er at
eiendommen og dens verdi.

859
00:37:50,290 --> 00:37:56,300
>> Hvis jeg laste denne filen, search2.html,
sluttresultatet er identiske.

860
00:37:56,300 --> 00:37:59,300
Men det er et skritt mot bedre design.

861
00:37:59,300 --> 00:38:04,560
Ved facto ut denne CSS, har jeg
ikke blandes det med min HTML.

862
00:38:04,560 --> 00:38:07,560
Og faktisk, så vi får se, jeg kunne
gjenbruke disse egenskaper og verdier.

863
00:38:07,560 --> 00:38:10,420
Hvis jeg ønsket å lage bunter av
deler av min nettside sentrert,

864
00:38:10,420 --> 00:38:13,630
Jeg trenger ikke å skrive style = text-align
sentrum over alt.

865
00:38:13,630 --> 00:38:16,580
Jeg kan sette på ett sted
kanskje, liker seg på toppen.

866
00:38:16,580 --> 00:38:18,210
>> Men selv dette er ikke den beste design.

867
00:38:18,210 --> 00:38:21,720
Faktisk en av de tingene du vil lære
som du tilbringer mer og mer tid med

868
00:38:21,720 --> 00:38:25,730
web-programmering er at jo mer du kan
modularize ting og faktor ting ut

869
00:38:25,730 --> 00:38:30,610
som .h filer la oss faktor ting ut,
liker helpers.c la oss faktor ting ut

870
00:38:30,610 --> 00:38:31,880
noen psets siden.

871
00:38:31,880 --> 00:38:34,200
På samme måte kan vi
ønsker å oppnå dette.

872
00:38:34,200 --> 00:38:37,920
>> Så varsel versjon
tre av search.html jeg har

873
00:38:37,920 --> 00:38:40,610
ryddet opp hodet
siden og bare sette

874
00:38:40,610 --> 00:38:43,320
i dette, en link tag, som
I motsetning til navnet,

875
00:38:43,320 --> 00:38:44,700
ikke gir deg en hyperkobling.

876
00:38:44,700 --> 00:38:49,150
Det linker til en annen fil ved hjelp av
en href som har en verdi i dette tilfellet

877
00:38:49,150 --> 00:38:51,586
er search-3.css

878
00:38:51,586 --> 00:38:52,960
Så jeg skjønner vi kommer raskt.

879
00:38:52,960 --> 00:38:54,600
Men alt jeg gjør er snill
med å flytte ting rundt.

880
00:38:54,600 --> 00:38:55,760
La meg åpne søk-3.css.

881
00:38:55,760 --> 00:38:57,114

882
00:38:57,114 --> 00:38:58,530
Det er det, ingenting virkelig til det.

883
00:38:58,530 --> 00:39:02,270
Jeg bare kopiert og limt det inn i en ny
fil, mye som vi priset ting ut

884
00:39:02,270 --> 00:39:03,509
til andre filer før.

885
00:39:03,509 --> 00:39:05,300
Og result--
helt underwhelming--

886
00:39:05,300 --> 00:39:06,730
kommer til å være akkurat det samme.

887
00:39:06,730 --> 00:39:10,490
Men vi flytter toward-- nei, det er ikke det.

888
00:39:10,490 --> 00:39:11,930
Oh, jeg vet hvorfor.

889
00:39:11,930 --> 00:39:13,790
>> Så det ser ut til å være en bug.

890
00:39:13,790 --> 00:39:15,010
Og det er i en viss forstand.

891
00:39:15,010 --> 00:39:17,730
Men la meg åpne opp min kategorien Network.

892
00:39:17,730 --> 00:39:19,660
La meg oppdater siden.

893
00:39:19,660 --> 00:39:23,315
Ah, hvorfor er CSS ikke blir brukt?

894
00:39:23,315 --> 00:39:26,920
Vel, CSS-fil, på samme måte, har
å være lesbare, så å si.

895
00:39:26,920 --> 00:39:28,440
Og det også er i dag forbudt.

896
00:39:28,440 --> 00:39:33,760
Så la meg gjøre en chmod a + r
stjerne dot CSS-- whoops--

897
00:39:33,760 --> 00:39:37,067
vi er prikk CSS er bare
filtype for CSS-filer.

898
00:39:37,067 --> 00:39:38,900
Nå la meg gå tilbake til
min nettleser og reload.

899
00:39:38,900 --> 00:39:40,910
OK, litt bedre.

900
00:39:40,910 --> 00:39:42,282
>> Nå la meg gjøre en siste ting.

901
00:39:42,282 --> 00:39:42,990
I søk-4.html.

902
00:39:42,990 --> 00:39:44,550

903
00:39:44,550 --> 00:39:48,220
Jeg har en versjon som jeg trodde
var mye kulere, om enn langt mer

904
00:39:48,220 --> 00:39:48,980
komplisert.

905
00:39:48,980 --> 00:39:50,690
La oss se på resultatet først.

906
00:39:50,690 --> 00:39:52,290
Lukk dette for å gi oss mer plass.

907
00:39:52,290 --> 00:39:54,275
Endre dette til søke-4, Enter.

908
00:39:54,275 --> 00:39:55,430

909
00:39:55,430 --> 00:39:57,200
>> Og nå er en haug med ting er ødelagt.

910
00:39:57,200 --> 00:39:59,910
Jeg kommer til å gå tilbake
i min katalog her.

911
00:39:59,910 --> 00:40:04,190
Og nå er jeg bare kommer til å gjøre
en chmod av a + r på en file--

912
00:40:04,190 --> 00:40:07,450
fordi jeg vet det exists-- kalt
logo.gif, som er et bilde.

913
00:40:07,450 --> 00:40:08,590
Og nå lesse.

914
00:40:08,590 --> 00:40:11,040
Og wow-- så nå er jeg
ganske nær, ærlig,

915
00:40:11,040 --> 00:40:15,860
å like 1999-versjonen av Google, og
ærlig, 2014-versjonen av Google,

916
00:40:15,860 --> 00:40:16,360
ikke sant?

917
00:40:16,360 --> 00:40:21,920
>> Så det er nå kommer til deres hjemmeside,
til slutt, hvis jeg søker etter katter.

918
00:40:21,920 --> 00:40:23,900
Og faktisk er det.

919
00:40:23,900 --> 00:40:26,410
Men hva gjorde jeg gjøre annerledes
i denne versjon 4?

920
00:40:26,410 --> 00:40:28,020
Så vi vil ikke dvele for mye på det her.

921
00:40:28,020 --> 00:40:30,100
Du vil se dette i problemet
satt syv til slutt.

922
00:40:30,100 --> 00:40:31,350
Men merker jeg gjorde et par ting.

923
00:40:31,350 --> 00:40:33,690
>> Jeg introduserte en div
tag, som er divisjon,

924
00:40:33,690 --> 00:40:35,450
tilsvarende i ånden til et avsnitt tag.

925
00:40:35,450 --> 00:40:38,220
Men en divisjon er akkurat som, her er
en rektangulær usynlig region

926
00:40:38,220 --> 00:40:39,150
av skjermen.

927
00:40:39,150 --> 00:40:41,680
La oss gi den et unikt
identifikator, bunntekst, bare

928
00:40:41,680 --> 00:40:44,700
slik at vi kan snakke om
det i vår HTML andre steder.

929
00:40:44,700 --> 00:40:47,952
Her er en annen div på siden
hvis ID kommer til å være fornøyd.

930
00:40:47,952 --> 00:40:49,160
Det er innholdet på siden.

931
00:40:49,160 --> 00:40:51,090
Og her oppe er overskriften på siden.

932
00:40:51,090 --> 00:40:54,960
>> Med andre ord, har jeg
vesentlig i HTML er mentalt

933
00:40:54,960 --> 00:40:57,700
ser denne nettsiden som
tre komponenter, en header

934
00:40:57,700 --> 00:41:01,200
her opp med denne usynlige rektangel,
innholdet i midten, og deretter

935
00:41:01,200 --> 00:41:04,800
bunnteksten der nede, selv
selv om vi ikke ser disse tingene.

936
00:41:04,800 --> 00:41:09,940
Fordi jeg ønsker å i hodet mitt av
siden her, eller i en CSS-fil,

937
00:41:09,940 --> 00:41:11,460
Jeg kan bruke denne syntaksen.

938
00:41:11,460 --> 00:41:13,070
>> Header er ikke et merke.

939
00:41:13,070 --> 00:41:17,060
Det er en ID så det viser
ut at ved å gjøre #header,

940
00:41:17,060 --> 00:41:20,840
Jeg kan nå søke ett eller flere
egenskaper til overskriften.

941
00:41:20,840 --> 00:41:24,130
Jeg kan gjøre det samme innholdet,
den samme for innhold her.

942
00:41:24,130 --> 00:41:27,230
>> Så for eksempel, i bunnteksten, varsel
alle disse egenskapene jeg legger til.

943
00:41:27,230 --> 00:41:30,660
Og jeg vet at de eksisterer bare ved lesing
opp på dokumentasjonen for CSS.

944
00:41:30,660 --> 00:41:33,450
Skriftstørrelsen skal være smaller--
så noen relativ skriftstørrelse.

945
00:41:33,450 --> 00:41:34,741
Vekten kommer til å bli fet.

946
00:41:34,741 --> 00:41:37,340
Margin-- hvor mange piksler
rundt it er 20 piksler.

947
00:41:37,340 --> 00:41:38,590
Og det kommer til å være sentrert.

948
00:41:38,590 --> 00:41:40,256
>> Men akkurat nå ser den siden som dette.

949
00:41:40,256 --> 00:41:42,840
Hvis jeg ikke er fornøyd med
mitt eksemplar akkurat der,

950
00:41:42,840 --> 00:41:46,560
Jeg kunne gjøre noe sånt som fargen rød.

951
00:41:46,560 --> 00:41:50,570
Og så jeg kan lagre denne, laste,
og nå har jeg stilisert bunnteksten.

952
00:41:50,570 --> 00:41:54,130
Så dette er bare antydet at strøm
av hva du kan gjøre i en web-side

953
00:41:54,130 --> 00:41:55,510
å snu ting rundt.

954
00:41:55,510 --> 00:41:59,080
>> Og enda kulere enn dette, hvis du vil
å rote rundt med faktiske nettsteder,

955
00:41:59,080 --> 00:42:00,810
du kan ikke permanent endre dem.

956
00:42:00,810 --> 00:42:03,640
Men hvis jeg åpner opp
Chrome Inspector igjen

957
00:42:03,640 --> 00:42:07,610
og jeg går ikke til venstre side
her, som viser Facebooks HTML,

958
00:42:07,610 --> 00:42:11,380
men viser til høyre
side all sin CSS,

959
00:42:11,380 --> 00:42:13,789
du kan enten og
forandre ting på sparket.

960
00:42:13,789 --> 00:42:15,080
Så la meg gå videre og gjøre dette.

961
00:42:15,080 --> 00:42:18,670
>> La meg gå videre og kontroll
klikk på denne tilfeldig ord her,

962
00:42:18,670 --> 00:42:21,230
signere, og klikk Inspiser Element.

963
00:42:21,230 --> 00:42:25,130
Chrome svært beleilig hopper til
h1 tag som Facebook bruker.

964
00:42:25,130 --> 00:42:27,290
Og legg merke til her Facebook
har slags dovent

965
00:42:27,290 --> 00:42:29,960
hard kodet skriftstørrelsen som en eiendom her.

966
00:42:29,960 --> 00:42:33,530
>> Så kul ting er skjønt
at hvis jeg faktisk gå inn her

967
00:42:33,530 --> 00:42:39,560
og si, oh, Facebook, jeg liker ikke at
64 piksler, kan vi nå endre Facebook.

968
00:42:39,560 --> 00:42:42,590
Selvfølgelig, vi bare endrer det
for meg personlig i øyeblikket.

969
00:42:42,590 --> 00:42:45,150
Men dette er bare en annen
verktøy i vår verktøysett

970
00:42:45,150 --> 00:42:48,360
som kommer til å tillate oss å finpusse
og finne ut og også diagnostisere

971
00:42:48,360 --> 00:42:49,729
problemer i våre egne nettsider.

972
00:42:49,729 --> 00:42:52,270
Og vi kunne på samme måte gå over
her, som er det samme.

973
00:42:52,270 --> 00:42:55,830
Hvis du virkelig ønsker å få fancy, jeg
mener, nå kan du virkelig mutere siden

974
00:42:55,830 --> 00:42:57,380
og gjøre gale ting.

975
00:42:57,380 --> 00:42:59,870
>> Så hvorfor er dette all nyttig?

976
00:42:59,870 --> 00:43:02,330
Vel, til slutt, vi er
kommer til å ønske å være

977
00:43:02,330 --> 00:43:07,110
i stand til å lage websider som
er drevet av våre egne rygg ender,

978
00:43:07,110 --> 00:43:10,520
ikke ved å bare Google og
outsourcing bakenden der.

979
00:43:10,520 --> 00:43:13,510
Vi har faktisk ønsker den
verdi, for eksempel,

980
00:43:13,510 --> 00:43:18,830
av vår søkemotor handling
attributt til går ikke til noen andre,

981
00:43:18,830 --> 00:43:24,270
men til noe sånt search.php,
hvor search.php er på vår egen server,

982
00:43:24,270 --> 00:43:25,670
ikke på noen andres.

983
00:43:25,670 --> 00:43:30,316
>> Og så for å komme dit, vi faktisk
behov for å innføre et nytt språk.

984
00:43:30,316 --> 00:43:33,190
Så vi har allerede sett på en ny
språket her, eller to egentlig, HTML

985
00:43:33,190 --> 00:43:33,700
og CSS.

986
00:43:33,700 --> 00:43:36,330
Men de virkelig er bare
strukturelle og estetiske språk.

987
00:43:36,330 --> 00:43:38,360
De er ikke programmering
språk per se.

988
00:43:38,360 --> 00:43:41,160
Og det er omtrent like mye formell
tid som vi vil bruke på dem.

989
00:43:41,160 --> 00:43:44,910
Fordi vi vil begynne nå
å gå over til PHP.

990
00:43:44,910 --> 00:43:48,160
>> Så PHP er en faktisk
programmeringsspråk.

991
00:43:48,160 --> 00:43:50,750
Det er et skriptspråk
i den forstand at den er

992
00:43:50,750 --> 00:43:52,855
ment å være lettere vekt
enn noe sånt som C.

993
00:43:52,855 --> 00:43:56,082
Og det er et tolket språk,
noe som betyr at det ikke er utarbeidet.

994
00:43:56,082 --> 00:43:58,790
Så i et nøtteskall, hva gjorde det bety
når vi brukte et språk som c

995
00:43:58,790 --> 00:44:00,290
og vi måtte kompilere den?

996
00:44:00,290 --> 00:44:02,120
Hva betyr det å
kompilere C kildekoden?

997
00:44:02,120 --> 00:44:03,864

998
00:44:03,864 --> 00:44:04,780
PUBLIKUM: [uhørlig].

999
00:44:04,780 --> 00:44:06,184
DAVID J MALAN: Si det igjen?

1000
00:44:06,184 --> 00:44:07,100
PUBLIKUM: [uhørlig].

1001
00:44:07,100 --> 00:44:07,962

1002
00:44:07,962 --> 00:44:08,920
DAVID J MALAN: Perfect.

1003
00:44:08,920 --> 00:44:10,180
Det gjør den til binær.

1004
00:44:10,180 --> 00:44:14,200
Det gjør den til nuller og enere
fra faktisk engelsk-lignende kildekoden.

1005
00:44:14,200 --> 00:44:16,424
Og da kan vi faktisk
kjøre disse nuller og enere

1006
00:44:16,424 --> 00:44:18,840
ved å føre dem gjennom
CPU ved å dobbeltklikke på et ikon

1007
00:44:18,840 --> 00:44:19,980
eller kjører en kommando.

1008
00:44:19,980 --> 00:44:23,770
>> PHP og Python og Ruby
og Perl og Javascript

1009
00:44:23,770 --> 00:44:26,250
og bunter av andre
språk er tolket

1010
00:44:26,250 --> 00:44:29,290
språk, som er å si
du trenger ikke samle dem.

1011
00:44:29,290 --> 00:44:34,220
Snarere mate deg dem som innspill til
et program kalt tolk.

1012
00:44:34,220 --> 00:44:36,640
Og som tolk,
som noen andre skrev,

1013
00:44:36,640 --> 00:44:40,930
leser kildekoden topp til bunn,
venstre til høyre og bare tolker

1014
00:44:40,930 --> 00:44:43,000
disse linjene og gjør hva du sier.

1015
00:44:43,000 --> 00:44:45,360
>> Så hvis du støter på en
linje som sier print,

1016
00:44:45,360 --> 00:44:48,660
det betyr ikke nødvendigvis konvertere print
til tilsvarende nuller og enere.

1017
00:44:48,660 --> 00:44:51,910
Det har nettopp dette tolk som
et stort hvis tilstand som sier:

1018
00:44:51,910 --> 00:44:56,110
hvis programmerer instruksjon er
print, så gjør følgende.

1019
00:44:56,110 --> 00:44:58,170
Så det tolker det bare
av typen argumentasjon

1020
00:44:58,170 --> 00:44:59,800
gjennom det du forteller det til å gjøre.

1021
00:44:59,800 --> 00:45:01,320
>> Og PHP er et av disse språkene.

1022
00:45:01,320 --> 00:45:05,310
Og PHP år siden er designet
nettopp for web-programmering.

1023
00:45:05,310 --> 00:45:08,160
Og det var i utgangspunktet en
veldig slurvete rotete språk.

1024
00:45:08,160 --> 00:45:10,940
Og ja, det er en stor
mengden av dårlig PHP-kode der ute.

1025
00:45:10,940 --> 00:45:13,520
Men språket selv
har modnet med årene,

1026
00:45:13,520 --> 00:45:16,200
så mye at nå er det
faktisk en fantastisk neste trinn

1027
00:45:16,200 --> 00:45:19,970
pedagogisk fra C fordi det er
så darned kjent for alt

1028
00:45:19,970 --> 00:45:22,380
du nettopp har sett i de siste ukene.

1029
00:45:22,380 --> 00:45:25,724
>> Den ene første forskjellen vi får se
er det ingen hovedfunksjon lenger.

1030
00:45:25,724 --> 00:45:28,890
Når du begynner å skrive kode, det er bare
kommer til å bli henrettet uansett hva,

1031
00:45:28,890 --> 00:45:30,220
så vi får se om et øyeblikk.

1032
00:45:30,220 --> 00:45:33,320
I mellomtiden, her er hva en
variable ser ut i PHP.

1033
00:45:33,320 --> 00:45:35,840
Det er litt annerledes,
men bare så vidt.

1034
00:45:35,840 --> 00:45:39,380
>> I PHP, det er ikke sterk typing.

1035
00:45:39,380 --> 00:45:41,430
Det er uke skrive,
som bare betyr at det

1036
00:45:41,430 --> 00:45:44,030
er datatyper som strenger
og tall og andre ting.

1037
00:45:44,030 --> 00:45:47,030
Men du trenger ikke bry spesifisere
hva de er lenger.

1038
00:45:47,030 --> 00:45:48,980
PHP tall det ut for deg.

1039
00:45:48,980 --> 00:45:52,030
Dollartegnet er bare en avgjørelse
at PHP folk gjorde år

1040
00:45:52,030 --> 00:45:54,890
siden slik at enhver variabel i PHP
bare starter med et dollartegn.

1041
00:45:54,890 --> 00:45:58,130
Det er faktisk slags nyttig ved at
den hopper ut på deg litt mer.

1042
00:45:58,130 --> 00:46:01,315
>> Men etter det, dette
er en tilstand i PHP.

1043
00:46:01,315 --> 00:46:03,140

1044
00:46:03,140 --> 00:46:04,730
Hva er annerledes i forhold til C?

1045
00:46:04,730 --> 00:46:07,180

1046
00:46:07,180 --> 00:46:09,600
Trick question-- ingenting,
som er faktisk veldig fin.

1047
00:46:09,600 --> 00:46:12,140
Boolske uttrykk i PHP-- samme.

1048
00:46:12,140 --> 00:46:19,354
Boolske uttrykk med og versus
eller, brytere, sløyfer, sløyfer, loops-- OK,

1049
00:46:19,354 --> 00:46:20,270
dette er annerledes.

1050
00:46:20,270 --> 00:46:22,660
>> Så det viser seg at det er en
par andre funksjoner i PHP.

1051
00:46:22,660 --> 00:46:25,243
En av dem er faktisk dette,
som er fantastisk praktisk.

1052
00:46:25,243 --> 00:46:29,250
Hvis $ tall er en matrise som du har
deklarert som tidligere i et program,

1053
00:46:29,250 --> 00:46:33,350
du har denne fancy for hver konstruksjon
at i stedet for å gjøre alt dette

1054
00:46:33,350 --> 00:46:37,020
irriterende I er lik 0, er jeg
mindre enn dette, [? Jeg ++?]

1055
00:46:37,020 --> 00:46:40,320
for hvert tall som nummer, hvor hvert
av disse dollar sign verdier er bare

1056
00:46:40,320 --> 00:46:42,790
en variabel, og sistnevnte
du kan tenke på som I.

1057
00:46:42,790 --> 00:46:44,290
Du kan kalle det hva du vil.

1058
00:46:44,290 --> 00:46:45,770
Jeg kalte det nummeret.

1059
00:46:45,770 --> 00:46:48,825
Dette kommer til å iterere over
matrisen kalles tall.

1060
00:46:48,825 --> 00:46:51,200
Og på hver iterasjon, er det
kommer til å automatisk oppdatere

1061
00:46:51,200 --> 00:46:54,340
for deg dollartegnet nummer
variabel, slik at du hele tiden

1062
00:46:54,340 --> 00:46:58,210
har tilgang til variabelen du vil
uten å måtte gjøre noe hakeparentes

1063
00:46:58,210 --> 00:47:00,980
notasjon eller indeksering inn i en matrise.

1064
00:47:00,980 --> 00:47:04,950
>> Utover det har vi til ting som
matriser, som ser nesten det samme,

1065
00:47:04,950 --> 00:47:08,210
bortsett fra at det er veldig vanlig, så vi vil
se, både i PHP og Javascript

1066
00:47:08,210 --> 00:47:10,750
til pre initial en matrise
bruker hakeparenteser.

1067
00:47:10,750 --> 00:47:12,040
C bruker klammeparentes.

1068
00:47:12,040 --> 00:47:15,330
Så det er litt annerledes, selv om
Vi gjorde egentlig ikke bruke det trikset mye.

1069
00:47:15,330 --> 00:47:20,090
>> Men enda mer kraftfullt,
PHP har assosiative matriser,

1070
00:47:20,090 --> 00:47:23,100
som er en fancy måte
si hash tabeller.

1071
00:47:23,100 --> 00:47:31,610
Faktisk, hvis du ønsker å erklære en hash
tabellen i PHP, i motsetning til i C-- hvor mange

1072
00:47:31,610 --> 00:47:34,775
linjer med kode tok det å
faktisk gjennomføre en hash table i C?

1073
00:47:34,775 --> 00:47:38,310
Eller hvor mange linjer med kode er det
tar å gjennomføre en hash table i C?

1074
00:47:38,310 --> 00:47:39,820
Så det er nok mye, ikke sant?

1075
00:47:39,820 --> 00:47:41,680
Det er et par dusin, kanskje 100 eller 200.

1076
00:47:41,680 --> 00:47:42,980
Det er triviell.

1077
00:47:42,980 --> 00:47:45,420
Eller det handler om å være, som
du vil snart se, nontrivial

1078
00:47:45,420 --> 00:47:48,080
å gjennomføre en hash table
[Uhørbart] og også en prøve.

1079
00:47:48,080 --> 00:47:50,580
Men i PHP-- og ærlig, jeg
sannsynligvis bør ikke fortelle deg dette

1080
00:47:50,580 --> 00:47:53,630
inntil Monday-- i PHP, hvis
du ønsker et bord, gjort.

1081
00:47:53,630 --> 00:47:56,431
Det er en hash table-- så
med en kodelinje.

1082
00:47:56,431 --> 00:47:56,930
Og

1083
00:47:56,930 --> 00:47:58,810
>> En rekke språk gjør det.

1084
00:47:58,810 --> 00:48:00,190
Ha det gøy med PSet fem.

1085
00:48:00,190 --> 00:48:01,980
Så mye språk gjør dette.

1086
00:48:01,980 --> 00:48:03,050

1087
00:48:03,050 --> 00:48:06,140
De gir deg disse abstraksjoner
at andre mennesker, andre programmerere,

1088
00:48:06,140 --> 00:48:09,870
har skapt for deg, slik at
du kan stå på sine skuldre

1089
00:48:09,870 --> 00:48:13,290
og begynne å bruke ideer som er super
overbevisende, som hash tabeller og trær

1090
00:48:13,290 --> 00:48:14,140
og prøver.

1091
00:48:14,140 --> 00:48:17,790
Men du trenger ikke nødvendigvis å
implementere disse tingene selv.

1092
00:48:17,790 --> 00:48:20,850
>> Og så til slutt, hva
vi kommer til å bruke PHP for

1093
00:48:20,850 --> 00:48:23,580
er potensielt skrive programmer
av den såkalte kommandolinjen.

1094
00:48:23,580 --> 00:48:26,600
Vi kunne gjenskape hvert program
Vi har skrevet dette semesteret så langt,

1095
00:48:26,600 --> 00:48:30,410
bortsett fra kanskje Breakout som bruker SPL,
som er spesifikk for C-i øyeblikket.

1096
00:48:30,410 --> 00:48:33,100
Men alle andre oppgavesettet,
sikkert Mario og Caesar

1097
00:48:33,100 --> 00:48:35,300
og Vigenère og
[? Crack?] Og videre, vi

1098
00:48:35,300 --> 00:48:39,520
kunne re-implementere i PHP, og
trolig litt lettere.

1099
00:48:39,520 --> 00:48:43,050
>> Men hva vi til slutt kommer
å bruke PHP for web-programmering.

1100
00:48:43,050 --> 00:48:46,420
Og vi kommer til å introdusere neste
uke en mental modell, et paradigme kalt

1101
00:48:46,420 --> 00:48:49,610
MVC, modell view controller,
som om du har gjort programmering

1102
00:48:49,610 --> 00:48:51,610
før i Python eller
Ruby eller andre steder, du

1103
00:48:51,610 --> 00:48:54,112
kanskje vet om dette teamet med
Rails og Django og lignende.

1104
00:48:54,112 --> 00:48:55,820
Men hvis du er ny på
dette også, vil du se

1105
00:48:55,820 --> 00:48:59,652
at dette er faktisk en veldig naturlig
forlengelse av faktorisering

1106
00:48:59,652 --> 00:49:01,360
og hva slags utforming
kode som vi har

1107
00:49:01,360 --> 00:49:04,670
gjort i C. Vi skal nå
bruke noen av disse timene til PHP

1108
00:49:04,670 --> 00:49:07,190
slik at til syvende og sist, er vi
implementere våre egne nettsider.

1109
00:49:07,190 --> 00:49:09,080
Og hvis du er liksom
hypnotisert eller overrasket

1110
00:49:09,080 --> 00:49:10,954
at vi kommer til å gjøre
alle de så raskt,

1111
00:49:10,954 --> 00:49:13,410
innse at nesten alle
semester, nesten 90%

1112
00:49:13,410 --> 00:49:16,560
av studenter CS50, inkludert de
som aldri har programmert før,

1113
00:49:16,560 --> 00:49:20,329
ender opp med å gjøre endelige prosjekter som
er basert på web-programmering.

1114
00:49:20,329 --> 00:49:23,120
Og så vil du se at avkastningen
er høy i ukene som kommer.

1115
00:49:23,120 --> 00:49:24,965
Så vi vil se deg da på mandag.

1116
00:49:24,965 --> 00:49:27,260

1117
00:49:27,260 --> 00:49:30,120
>> SPEAKER 1: Og nå, Deep
Tanker ved Daven Farnham.

1118
00:49:30,120 --> 00:49:34,055

1119
00:49:34,055 --> 00:49:34,780
Hash tabeller.

1120
00:49:34,780 --> 00:49:37,180

1121
00:49:37,180 --> 00:49:38,402
>> [Latter]

1122
00:49:38,402 --> 00:49:38,902