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

2
00:00:01,390 --> 00:00:04,890
>> [MUSIK SPELA]

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

4
00:00:10,955 --> 00:00:12,580
DAVID J MALAN: Okej, välkommen tillbaka.

5
00:00:12,580 --> 00:00:13,600
Detta är CS50.

6
00:00:13,600 --> 00:00:15,540
Detta är slutet av veckan sju.

7
00:00:15,540 --> 00:00:18,180
Och det är i slutet av denna renhållare
jakt från problemet satt fyra

8
00:00:18,180 --> 00:00:19,220
att du kanske kommer ihåg.

9
00:00:19,220 --> 00:00:21,650
Efter återvinna alla
dessa JPEG anställda,

10
00:00:21,650 --> 00:00:24,820
du utmanades, om du vill,
att fotografera dig själv med så många

11
00:00:24,820 --> 00:00:25,981
av dessa folk som du kan.

12
00:00:25,981 --> 00:00:28,480
Vi fick en massa inlagor
under de senaste veckorna,

13
00:00:28,480 --> 00:00:32,980
ja, en hel del precis innan middagstid
idag, av vilka några är de här,

14
00:00:32,980 --> 00:00:37,670
fångas här in-- ser like-- Annenberg
Hall på kontorstid, en här

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

16
00:00:39,530 --> 00:00:41,750
Här är Ramon fångas på telefonen.

17
00:00:41,750 --> 00:00:43,870
Detta var vid en CS50 lunch.

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

19
00:00:46,840 --> 00:00:48,280
som ringde honom på detta sätt.

20
00:00:48,280 --> 00:00:49,690
Vi vet inte vad det var.

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

22
00:00:51,940 --> 00:00:54,570
>> DAVID J MALAN: Men
som är värt en gigabyte.

23
00:00:54,570 --> 00:00:56,960
Här är Chang, som
bokstavligen sprang av scenen

24
00:00:56,960 --> 00:01:00,480
att undvika att bli fotograferade en
dag, men så småningom fångas.

25
00:01:00,480 --> 00:01:02,050
Här är Nick.

26
00:01:02,050 --> 00:01:03,480
Här är Nick.

27
00:01:03,480 --> 00:01:04,080
Här är Nick.

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

29
00:01:05,090 --> 00:01:07,670
Och här är Alison ned av fälten.

30
00:01:07,670 --> 00:01:11,840
Och Zamyla även hittades
vid balsal konkurrens.

31
00:01:11,840 --> 00:01:14,100
Så vi kommer att gå igenom
dessa bilder, räkna ut

32
00:01:14,100 --> 00:01:16,690
som lämnat det mest
tidigast, och belöning

33
00:01:16,690 --> 00:01:20,662
en fantastisk pris, som
lovade i spec.

34
00:01:20,662 --> 00:01:23,120
Och vi kommer också att följa upp om
det utrymme som var inblandad.

35
00:01:23,120 --> 00:01:26,860
>> Ett par announcements-- så lunch
är, återigen, denna fredag ​​klockan 13:15.

36
00:01:26,860 --> 00:01:30,420
Om du vill ansluta sig till oss,
OSA på webbadressen här.

37
00:01:30,420 --> 00:01:33,730
Jason visas igen här från en
av sektionerna ett par år

38
00:01:33,730 --> 00:01:35,510
tillbaka, vilket hände
att falla på Halloween.

39
00:01:35,510 --> 00:01:38,950
Och faktiskt, klädde han som
pumpa det året.

40
00:01:38,950 --> 00:01:42,700
Om du tittar på det här avsnittet
av hans från 2011 avsnitt

41
00:01:42,700 --> 00:01:46,480
åtta, om du är nyfiken,
vid CS50.tv, tror jag

42
00:01:46,480 --> 00:01:49,730
Detta var det år då
hans luftpump arbetade.

43
00:01:49,730 --> 00:01:52,490
>> Om du sedan titta på
liknande avdelning under 2012,

44
00:01:52,490 --> 00:01:55,620
du ser den här Jason mycket tömd,
eftersom dräkten fungerade inte längre,

45
00:01:55,620 --> 00:01:58,060
vilket bara är att säga
denna fredag, om du skulle

46
00:01:58,060 --> 00:02:02,720
gillar att trampa upp en pumpa med Daven
och Gabe och andra, OSA till cheferna

47
00:02:02,720 --> 00:02:04,480
vid cs50.harvard.edu adress.

48
00:02:04,480 --> 00:02:06,200
Det ser ut att bli väldigt roligt.

49
00:02:06,200 --> 00:02:08,660
Daven, vi vill höra, har ristat
pumpor hela sitt liv.

50
00:02:08,660 --> 00:02:11,930
Gabriel från Brasilien har aldrig
ristade en pumpa för Halloween.

51
00:02:11,930 --> 00:02:14,700
Så var det med dem som han lär.

52
00:02:14,700 --> 00:02:16,830
>> Seminarier, meanwhile--
så du lär dig snart

53
00:02:16,830 --> 00:02:20,650
om vad våra förväntningar är för
lärdomsprovet, som i huvudsak

54
00:02:20,650 --> 00:02:23,150
kommer att koka ner till
utforma och genomföra

55
00:02:23,150 --> 00:02:26,440
de flesta något projekt av intresse för
dig, om än med förbehåll för godkännande

56
00:02:26,440 --> 00:02:28,490
och vägledning från din undervisning karl.

57
00:02:28,490 --> 00:02:32,110
Mot slutet av den
termin, introducerar vi ett antal

58
00:02:32,110 --> 00:02:35,610
av seminarier, som är valfria klasser
som leds av undervisnings stipendiater och Harvard

59
00:02:35,610 --> 00:02:38,570
personal, vänner av kursen över
campus, om olika ämnen som

60
00:02:38,570 --> 00:02:41,470
är tangentiellt till
Naturligtvis underliggande kursplan

61
00:02:41,470 --> 00:02:45,590
men icke desto mindre är tillämpligt, roligt och
olika för potentiella slutliga projekt.

62
00:02:45,590 --> 00:02:49,530
>> Till exempel, först, om du vill
att registrera, bege dig till den webbadressen där.

63
00:02:49,530 --> 00:02:53,010
Och detta är lineupen för
Enbart årets seminarier.

64
00:02:53,010 --> 00:02:56,060
Men inser att vi har massor av
seminarier från tidigare år, som alla

65
00:02:56,060 --> 00:02:59,774
är kopplade i seminarier menyn
val på kursens hemsida.

66
00:02:59,774 --> 00:03:02,190
Så om du funderar
går utöver din komfortzon

67
00:03:02,190 --> 00:03:05,060
eller plocka upp några nya färdigheter,
exempelvis programmering iPhone

68
00:03:05,060 --> 00:03:08,100
appar med Swift, ett nytt språk
från Apple eller Objective-C

69
00:03:08,100 --> 00:03:11,230
eller Android apps eller programmering [? cue?]
glödlampor, eller något av de ämnen

70
00:03:11,230 --> 00:03:15,490
upp här och mer på grund av kontroll
i registreringssidan.

71
00:03:15,490 --> 00:03:19,730
>> Så vi började och avslutades den
Måndag med att titta på HTTP.

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

73
00:03:22,675 --> 00:03:24,045
Men vad betyder det egentligen?

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

75
00:03:26,805 --> 00:03:27,930
Vad innebär det egentligen?

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

77
00:03:30,665 --> 00:03:31,290
Är det en hand?

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

79
00:03:33,074 --> 00:03:34,740
Jag vet att du bara skrapa huvudet.

80
00:03:34,740 --> 00:03:36,400
Men du vill föreslå vad HTTP är?

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

82
00:03:37,792 --> 00:03:40,576
>> Publik: Hur datorer
kommunicera med [OHÖRBAR].

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

84
00:03:41,517 --> 00:03:43,100
DAVID J MALAN: Jag missade den sista delen.

85
00:03:43,100 --> 00:03:45,774
Hur datorer kommunicerar with--

86
00:03:45,774 --> 00:03:47,325
>> PUBLIK: Internetservrar.

87
00:03:47,325 --> 00:03:50,450
DAVID J MALAN: Good-- med internet
servrar och specifikt, webbservrar.

88
00:03:50,450 --> 00:03:53,533
Eftersom minns, det finns ett gäng
tjänster på Internet, av vilka

89
00:03:53,533 --> 00:03:57,349
Du använder troligtvis dagligen mellan chatten
och budskap, chatt och webb och e-post,

90
00:03:57,349 --> 00:03:57,890
och liknande.

91
00:03:57,890 --> 00:04:00,900
Och HTTP är bara
protokoll som webbläsare

92
00:04:00,900 --> 00:04:03,750
tala vid kommunikation med
webbservrar, och vice versa.

93
00:04:03,750 --> 00:04:05,580
Och den analoga i
mänskliga världen kan vara,

94
00:04:05,580 --> 00:04:08,730
Jag sträcker min hand för att skaka lite
andra mänskliga talet och han eller hon

95
00:04:08,730 --> 00:04:11,970
erkänner genom att utvidga
hans eller hennes hand också.

96
00:04:11,970 --> 00:04:13,970
Så det är bara ett protokoll,
en uppsättning konventioner.

97
00:04:13,970 --> 00:04:15,630
>> Och vad faktiskt är dessa konventioner?

98
00:04:15,630 --> 00:04:18,640
Tja, bara kokar det ner till
skicka meddelanden fram och tillbaka,

99
00:04:18,640 --> 00:04:19,770
som vi avbildas här.

100
00:04:19,770 --> 00:04:22,520
Och det finns ett par olika sätt i
som du kan skicka dessa meddelanden.

101
00:04:22,520 --> 00:04:24,360
Och kanske den mest
gemensamt kallas get.

102
00:04:24,360 --> 00:04:26,510
Och vi får se en kontrast
till detta inom kort.

103
00:04:26,510 --> 00:04:30,010
>> Men en get begäran från en webbläsare
till servern precis ser ut så här.

104
00:04:30,010 --> 00:04:32,960
Det är en massa text att det sätter
insidan av ett virtuellt hölje.

105
00:04:32,960 --> 00:04:35,854
På utsidan av detta hölje
gå ett par bitar av information.

106
00:04:35,854 --> 00:04:37,770
Vad behöver gå på
kuvert, så att säga,

107
00:04:37,770 --> 00:04:41,820
för att få en begäran som
detta från mig till en webbserver?

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

109
00:04:42,320 --> 00:04:43,270
>> PUBLIK: Din IP-adress.

110
00:04:43,270 --> 00:04:45,890
>> DAVID J MALAN: Min IP-adress
i fältet Från, så att säga,

111
00:04:45,890 --> 00:04:49,490
och, naturligtvis, den
mottagarens IP-adress.

112
00:04:49,490 --> 00:04:52,710
Men i fallet med en webbpaket,
Vi behöver lite mer i detalj

113
00:04:52,710 --> 00:04:55,254
Det är inte tillräckligt att bara
skicka ett kuvert till en server,

114
00:04:55,254 --> 00:04:57,670
eftersom den servern kan vara
lyssna för olika typer

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

116
00:04:59,180 --> 00:05:01,370
Så vad mer behöver vi
förutom mottagarens 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
>> PUBLIK: Är 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
>> PUBLIK: Adress.

123
00:05:07,340 --> 00:05:09,340
>> DAVID J MALAN: Adress,
eller hamn, som det kallas.

124
00:05:09,340 --> 00:05:11,010
Nära, men ett TCP-portnummer.

125
00:05:11,010 --> 00:05:12,220
Och det finns ett gäng av dessa.

126
00:05:12,220 --> 00:05:14,310
Men säkerligen den mest
bekant bör så småningom

127
00:05:14,310 --> 00:05:17,590
vara 80, vilket är standard
som används för webbtrafik.

128
00:05:17,590 --> 00:05:20,040
Och en annan bekant
en snart kommer att vara 443,

129
00:05:20,040 --> 00:05:24,280
som används för säker webb
trafik, webbadresser som börjar med https.

130
00:05:24,280 --> 00:05:26,650
>> Så det här är vad som händer
insidan av detta hölje.

131
00:05:26,650 --> 00:05:29,780
Och få / bara sätt ge
mig standard webbsida.

132
00:05:29,780 --> 00:05:32,700
Ge mig roten av det hårda
köra på den webbserver.

133
00:05:32,700 --> 00:05:36,050
Och förhoppningsvis, på webben
server kommer att svara med, OK

134
00:05:36,050 --> 00:05:39,630
och antalet 200, vilket är precis
en konvention som säger, ja, alla

135
00:05:39,630 --> 00:05:40,470
verkligen är OK.

136
00:05:40,470 --> 00:05:41,680
Här är sidan.

137
00:05:41,680 --> 00:05:45,510
Den typ av webbsidan kommer att
vara text, men mer specifikt, HTML,

138
00:05:45,510 --> 00:05:47,010
som vi håller på att dyka tillbaka in.

139
00:05:47,010 --> 00:05:49,877
Och dot dot dot bara
sätt, här är HTML.

140
00:05:49,877 --> 00:05:51,710
Och det är där vi
plocka upp historien idag,

141
00:05:51,710 --> 00:05:55,740
faktiskt skriva HTML,
Hypertext Markup Language, vilket

142
00:05:55,740 --> 00:05:57,727
är det språk som
webbsidor är skrivna.

143
00:05:57,727 --> 00:05:59,060
Det är inte ett programmeringsspråk.

144
00:05:59,060 --> 00:06:01,270
Det finns inga funktioner
eller öglor eller villkor.

145
00:06:01,270 --> 00:06:03,800
Det är ett märkspråk,
samt återigen ser idag,

146
00:06:03,800 --> 00:06:07,240
som gör att du kan ange
hur man kan strukturera och stilisera

147
00:06:07,240 --> 00:06:09,300
estetiskt en webbsida.

148
00:06:09,300 --> 00:06:11,470
>> Så det var det
och enda sida vi verkligen

149
00:06:11,470 --> 00:06:13,930
tittade på, om det kortfattat, på måndagen.

150
00:06:13,930 --> 00:06:16,250
Och märker några
framträdande egenskaper.

151
00:06:16,250 --> 00:06:20,170
Det finns en hel del öppna vinklade
konsol och nära vinklad konsol.

152
00:06:20,170 --> 00:06:23,160
Mellan de vinklade
parentes är ord.

153
00:06:23,160 --> 00:06:25,660
Och vi kommer att starta
kallar dessa ord taggar.

154
00:06:25,660 --> 00:06:28,800
Så öppna fäste huvud
och sluten fäste huvud

155
00:06:28,800 --> 00:06:33,620
är de öppna och slutna taggar,
eller start- och sluttaggar

156
00:06:33,620 --> 00:06:37,660
respektive av ett HTML-element,
som vi kallar det, kallas huvudet.

157
00:06:37,660 --> 00:06:41,760
Och samma jargong gäller
till kroppen i HTML och så vidare.

158
00:06:41,760 --> 00:06:43,970
>> Och vad är trevligt är
HTML-- och faktiskt, vi ska

159
00:06:43,970 --> 00:06:47,187
bringar oerhört mycket tid på det,
eftersom du oftast bara räkna ut

160
00:06:47,187 --> 00:06:49,770
vilka funktioner den har när du
faktiskt har ett konkret problem

161
00:06:49,770 --> 00:06:52,820
att solve-- du kommer att upptäcka att
en webbläsare är ganska dum.

162
00:06:52,820 --> 00:06:56,450
Det kommer bara att do-- inte olikt
a computer-- det du ber den om.

163
00:06:56,450 --> 00:06:59,279
Och så när du har öppnat
fäste HTML högst upp

164
00:06:59,279 --> 00:07:01,320
där, som i huvudsak
betyder bara, hey, webbläsare,

165
00:07:01,320 --> 00:07:04,090
här kommer en webbsida skriven i HTML.

166
00:07:04,090 --> 00:07:06,130
>> När det ser öppet fäste
huvud, som bara innebär,

167
00:07:06,130 --> 00:07:10,350
hey, webbläsare, här kommer huvudet, eller
den översta delen av min hemsida.

168
00:07:10,350 --> 00:07:14,192
När den ser en stängd konsol
huvud, som bara betyder, hej,

169
00:07:14,192 --> 00:07:15,150
det är det för huvudet.

170
00:07:15,150 --> 00:07:16,420
Standby för något annat.

171
00:07:16,420 --> 00:07:18,878
Och att något annat är
tydligen kommer att bli kroppen.

172
00:07:18,878 --> 00:07:22,630
Och när du inte har en tagg, som
du behöver bara hej, kommatecken, värld,

173
00:07:22,630 --> 00:07:26,610
det kommer bara att vara rå text som
slutligen visas på skärmen.

174
00:07:26,610 --> 00:07:29,220
>> Nu kommer du att märka också
inbuktningen här.

175
00:07:29,220 --> 00:07:32,160
Du kan förmodligen sluta
hur vi stylizing det.

176
00:07:32,160 --> 00:07:34,850
Varje gång jag öppnar en tagg,
så att säga, jag dra in.

177
00:07:34,850 --> 00:07:38,540
Och varje gång jag stänger
ett tag, jag un-strecksatsen

178
00:07:38,540 --> 00:07:40,690
i samma anda som klammerparenteser.

179
00:07:40,690 --> 00:07:43,470
Och utöver det, jag är snäll
av att använda min rätt.

180
00:07:43,470 --> 00:07:48,380
Observera att jag inte brydde sig att slå
Ange insidan av denna titel taggen.

181
00:07:48,380 --> 00:07:48,990
Varför?

182
00:07:48,990 --> 00:07:51,920
Nåväl, jag bestämde bara att det såg
lite renare för mig, det mänskliga,

183
00:07:51,920 --> 00:07:53,181
att bara inte bry göra det.

184
00:07:53,181 --> 00:07:54,930
Så återigen, det finns en del
dom kallar bara

185
00:07:54,930 --> 00:07:57,670
som det finns i C eller något annat språk.

186
00:07:57,670 --> 00:08:04,110
>> Men märker också att denna utbuktning
lämpar sig för en mental modell,

187
00:08:04,110 --> 00:08:05,670
inte över komplicera det.

188
00:08:05,670 --> 00:08:07,020
Men ett träd, eller hur?

189
00:08:07,020 --> 00:08:09,290
Om du tänker på en bana
sidan, tydligen skrivit

190
00:08:09,290 --> 00:08:12,050
så här, som
snyggt indragen på det sättet,

191
00:08:12,050 --> 00:08:17,390
du kan nästan tänka på det öppna fästet
HTML stängt fäste taggen avgränsning

192
00:08:17,390 --> 00:08:21,380
roten av en nod, ett släktträd
stil nod i stil med träden

193
00:08:21,380 --> 00:08:22,900
vi tittade på i fredags.

194
00:08:22,900 --> 00:08:27,630
>> Och faktiskt, vi har till höger här
vad vi ska kalla en DOM, D-O-M, dokument

195
00:08:27,630 --> 00:08:31,680
objektmodell, ett finare sätt att säga
ett träd som representerar denna HTML.

196
00:08:31,680 --> 00:08:36,140
Och märker att HTML har, ska vi säga,
som ett släktträd, två barn.

197
00:08:36,140 --> 00:08:37,659
Till vänster är huvudet.

198
00:08:37,659 --> 00:08:39,179
Till höger är kroppen.

199
00:08:39,179 --> 00:08:44,220
>> Och precis som en själlös tanke övning,
huvud, naturligtvis, har hur många barn

200
00:08:44,220 --> 00:08:46,070
enligt denna struktur?

201
00:08:46,070 --> 00:08:48,200
Så bara en, title--
och det är därför vi har

202
00:08:48,200 --> 00:08:50,580
pilen som går från topp till titeln.

203
00:08:50,580 --> 00:08:55,110
Så det är som om den personen i
släktträd hade bara en avkomma.

204
00:08:55,110 --> 00:08:58,230
Och sedan titeln i sig kan
sägas ha ett barn också.

205
00:08:58,230 --> 00:09:01,780
>> Minns att HTML hade
Hej, kommatecken, värld under den.

206
00:09:01,780 --> 00:09:06,090
Och jag har bara dragit den inom en
oval i stället för en rektangel bara

207
00:09:06,090 --> 00:09:10,559
att förmedla semantiskt att även om
det är en nod i trädet, så att säga,

208
00:09:10,559 --> 00:09:12,100
det är typ av fundamentalt olika.

209
00:09:12,100 --> 00:09:12,800
Det är inte en tagg.

210
00:09:12,800 --> 00:09:14,780
Eller rättare, det är inte ett element.

211
00:09:14,780 --> 00:09:16,590
Det är bara en text nod, om ni så vill.

212
00:09:16,590 --> 00:09:18,990
Men dessa är helt
godtyckliga mänskliga konventioner.

213
00:09:18,990 --> 00:09:23,180
Detta är bara nu mitt sätt
representerar vad jag ska som ett aggregat

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

215
00:09:24,340 --> 00:09:27,750
>> Och som en sidoreplik, saken på
super övre vänstra hörnet,

216
00:09:27,750 --> 00:09:32,080
öppen fäste utropstecken doc
typ HTML, det här ser ut som en tagg,

217
00:09:32,080 --> 00:09:35,560
men det är det dumma hörnet fall
det är bara det, kopieras och klistras

218
00:09:35,560 --> 00:09:38,460
att ange webbläsare
Detta är HTML version 5.

219
00:09:38,460 --> 00:09:41,540
Världens håller förändras vad
första kodrad i en sida ska vara.

220
00:09:41,540 --> 00:09:43,820
Det betyder bara version 5.

221
00:09:43,820 --> 00:09:45,950
Så det gör inte riktigt
ser ut som de andra.

222
00:09:45,950 --> 00:09:48,120
>> Okej, så med det
sa, kommer du nu att uppskatta

223
00:09:48,120 --> 00:09:50,767
denna ganska denna dumma
tattoo någon fick.

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

225
00:09:51,990 --> 00:09:54,210
>> DAVID J MALAN: Okej,
och nu ska vi faktiskt dyka

226
00:09:54,210 --> 00:09:55,710
att göra något med detta.

227
00:09:55,710 --> 00:09:58,610
Du kommer ihåg att förra gången
Jag öppnade upp CS50 Appliance

228
00:09:58,610 --> 00:10:01,650
och jag gjorde något som
enkelt som att öppna gedit.

229
00:10:01,650 --> 00:10:05,190
Och jag sparade filen även på
min desktop-- stans special--

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å låt mig göra det
igen-- hello.html Enter.

233
00:10:10,984 --> 00:10:13,900
Och nu i den här filen, jag ska
gå vidare och replikera vad vi just

234
00:10:13,900 --> 00:10:18,850
saw-- doc typ html Sen kommer jag att
gör öppen fäste html stängd fäste.

235
00:10:18,850 --> 00:10:21,890
Och då kommer jag att i förebyggande syfte
öppna och stänga taggen.

236
00:10:21,890 --> 00:10:22,390
Varför?

237
00:10:22,390 --> 00:10:23,598
Bara så jag inte glömmer senare.

238
00:10:23,598 --> 00:10:26,850
Det är bara bra metoder, som att öppna
klammerparenteser på en gång.

239
00:10:26,850 --> 00:10:28,900
>> Och vad kom nästa?

240
00:10:28,900 --> 00:10:30,582
Du kan tänka på tatueringen.

241
00:10:30,582 --> 00:10:31,450
>> Publik: Huvudet.

242
00:10:31,450 --> 00:10:32,500
>> David J MALAN: Huvudet.

243
00:10:32,500 --> 00:10:36,020
Och sedan i här, jag
hade titeln, tror jag.

244
00:10:36,020 --> 00:10:39,886
Och titeln var godtyckligt,
Hej, världen nära titel.

245
00:10:39,886 --> 00:10:42,760
Och sedan här nere, kropp, av
course-- stäng sedan vi body-taggen.

246
00:10:42,760 --> 00:10:45,660
Och sedan bara något redundant,
Jag hade samma sak här nere.

247
00:10:45,660 --> 00:10:47,150
>> Så jag menar att detta är en webbsida.

248
00:10:47,150 --> 00:10:49,050
Detta är något som
kunde nu leva på webben,

249
00:10:49,050 --> 00:10:51,925
även om naturligtvis, det är bokstavligt talat
lever på mitt skrivbord just nu.

250
00:10:51,925 --> 00:10:55,837
Men sannerligen, om jag minimerar gedit,
Jag ser på mitt skrivbord dess ikon.

251
00:10:55,837 --> 00:10:58,420
Även om detta är den apparat,
du kunde göra det på Mac OS

252
00:10:58,420 --> 00:11:01,580
utan Textredigerare eller
Fönster med Anteckningar ännu.

253
00:11:01,580 --> 00:11:06,115
>> Och om jag går vidare och dubbelklicka
att till och med, och select-- väl, låt oss

254
00:11:06,115 --> 00:11:07,990
inte välja att eftersom
Chrome är inte öppna.

255
00:11:07,990 --> 00:11:09,281
Låt oss gå vidare och öppna Chrome.

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

257
00:11:10,160 --> 00:11:14,040
Och gör sedan Kommando-O för öppen
Och gå till mitt skrivbord

258
00:11:14,040 --> 00:11:15,320
och öppna den filen.

259
00:11:15,320 --> 00:11:20,120
Det är så en webbläsare tolkar
HTML, uppifrån och ned, från vänster till höger.

260
00:11:20,120 --> 00:11:21,314
Hej, här är browser HTML.

261
00:11:21,314 --> 00:11:21,980
Här är huvudet.

262
00:11:21,980 --> 00:11:23,250
Här är titeln.

263
00:11:23,250 --> 00:11:24,090
Här är kroppen.

264
00:11:24,090 --> 00:11:26,620
Och faktiskt är det så
det gör den webbsidan.

265
00:11:26,620 --> 00:11:27,800
>> Men märker webbadressen.

266
00:11:27,800 --> 00:11:32,430
Ingen av er skulle kunna dra upp detta specifika
sida på din bärbara datorer just nu,

267
00:11:32,430 --> 00:11:34,910
även insidan av din
apparat via webbadressen,

268
00:11:34,910 --> 00:11:40,130
eftersom file: // betyder det faktiskt
på mitt filsystem, min hårddisk,

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

270
00:11:40,990 --> 00:11:42,440
Så det här är inte så användbart.

271
00:11:42,440 --> 00:11:44,940
>> Låt oss nu gå mot
med hjälp av en verklig webbserver.

272
00:11:44,940 --> 00:11:48,309
Och det visar sig att CS50 Appliance
är mer än bara en miljö där

273
00:11:48,309 --> 00:11:51,100
Du kan skriva C-kod och kompilera
och kör det som om du har gjort.

274
00:11:51,100 --> 00:11:55,500
Det också har konfigurerats av den
personal för att representera en typisk webb

275
00:11:55,500 --> 00:11:58,290
server som är på internet,
en som du kan betala för

276
00:11:58,290 --> 00:12:00,210
eller en som är i den så kallade molnet.

277
00:12:00,210 --> 00:12:02,600
>> Och det är igång
standard fri öppen källkod

278
00:12:02,600 --> 00:12:06,160
programvara, till exempel, något
heter Apache, som kanske är

279
00:12:06,160 --> 00:12:08,700
fortfarande den mest populära webb
serverprogramvaran i världen

280
00:12:08,700 --> 00:12:11,030
att tusentals webbplatser använder idag.

281
00:12:11,030 --> 00:12:13,420
Och det är också ens har
program som MySQL,

282
00:12:13,420 --> 00:12:16,240
som är en databas-server
att vi så småningom kommer till,

283
00:12:16,240 --> 00:12:18,330
vilket bara är att säga
Jag kan börja behandla

284
00:12:18,330 --> 00:12:22,040
min apparat som ett fullfjädrat server
att jag inte betalar för någon annanstans.

285
00:12:22,040 --> 00:12:25,980
Den lever bara på min egen laptop för
utveckling och bekvämlighetsskäl.

286
00:12:25,980 --> 00:12:27,870
>> Så låt oss gå vidare och
dra fördel av detta.

287
00:12:27,870 --> 00:12:30,120
Jag kommer att gå vidare och
öppna upp ett terminalfönster.

288
00:12:30,120 --> 00:12:33,030
Och jag kommer att gå vidare och
move-- faktiskt, först är jag

289
00:12:33,030 --> 00:12:34,860
kommer att gå till mitt skrivbord.

290
00:12:34,860 --> 00:12:36,400
Om jag gör ls, det finns hello.html.

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

292
00:12:37,022 --> 00:12:38,730
Och jag kommer att gå
framåt och börja använda

293
00:12:38,730 --> 00:12:40,800
en ny katalog vi har
inte använt tidigare idag.

294
00:12:40,800 --> 00:12:46,840
>> hello.html-- Jag ska flytta
till ../vhosts för virtuella hosts--

295
00:12:46,840 --> 00:12:50,940
Mer om detta i future-- sedan
i en katalog som heter localhost,

296
00:12:50,940 --> 00:12:54,420
vilket är smeknamnet på nästan
alla datorer, oavsett om det är en Mac, PC,

297
00:12:54,420 --> 00:12:57,560
eller Linux-dator, och sedan
speciellt i en katalog som vi,

298
00:12:57,560 --> 00:13:01,260
personalen som redan skapats för dig när
du hämtat apparaten kallas

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

300
00:13:01,760 --> 00:13:04,551
Och som namnet antyder, något
Jag lägger i denna mapp, i teorin,

301
00:13:04,551 --> 00:13:07,790
kommer att nu bli
offentliga, åtminstone för människor

302
00:13:07,790 --> 00:13:10,030
som har en direkt
anslutning till min dator.

303
00:13:10,030 --> 00:13:13,160
>> Så nu vill jag gå vidare och
göra cd till samma katalog

304
00:13:13,160 --> 00:13:15,490
så jag kan se vad som är
pågår och typ ls.

305
00:13:15,490 --> 00:13:17,630
Och faktiskt, det är
enda där.

306
00:13:17,630 --> 00:13:23,250
Jag hävdar nu att eftersom jag har lagt det här
fil hello.html insidan av en katalog

307
00:13:23,250 --> 00:13:26,940
kallas allmänt inne i en katalog
kallad lokalvärd insidan av en katalog

308
00:13:26,940 --> 00:13:29,810
kallade vhosts, vilka
tack vare CS50 personal

309
00:13:29,810 --> 00:13:34,390
har förkonfigurerad för att vara
roten på din webbserver,

310
00:13:34,390 --> 00:13:36,900
Jag kan nu förhoppningsvis göra detta.

311
00:13:36,900 --> 00:13:38,390
>> Jag kommer att öppna upp en ny flik.

312
00:13:38,390 --> 00:13:40,090
Och jag ska gå inte till fil: //.

313
00:13:40,090 --> 00:13:44,520
Jag kommer att använda faktiska
http / lokalvärd, vilket

314
00:13:44,520 --> 00:13:47,470
återigen, är smeknamnet
för min egen server.

315
00:13:47,470 --> 00:13:51,085
Och sen ska jag åka till vad
filnamn, bara för att vara tydlig?

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

317
00:13:52,680 --> 00:13:54,320
Var finns den här historien förmodligen 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 andra ord, vill jag nu här
är min egen dator, min egen apparat,

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

323
00:14:05,660 --> 00:14:07,490
Dess smeknamn är localhost.

324
00:14:07,490 --> 00:14:10,210
Men tänk på localhost som likadana
Facebook.com google.com, oavsett.

325
00:14:10,210 --> 00:14:11,600
Det är bara min lokala namn.

326
00:14:11,600 --> 00:14:14,810
Och sedan det sista jag vill är i
roten på hårddisken, så att säga,

327
00:14:14,810 --> 00:14:17,729
eller roten till webbservern,
ergo snedstreck och sedan

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

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

330
00:14:19,880 --> 00:14:21,930
>> Låt mig zooma ut och tryck på Retur.

331
00:14:21,930 --> 00:14:24,266
Och faktiskt, det är nu min hemsida.

332
00:14:24,266 --> 00:14:25,390
Så det är lite annorlunda.

333
00:14:25,390 --> 00:14:26,880
Och det är precis som underwhelming.

334
00:14:26,880 --> 00:14:27,904
Detta är den gamla versionen.

335
00:14:27,904 --> 00:14:29,070
Låt mig krympa typsnittet tillbaka.

336
00:14:29,070 --> 00:14:29,745
Detta är den gamla.

337
00:14:29,745 --> 00:14:30,890
Detta är den nya.

338
00:14:30,890 --> 00:14:35,430
Men vad som i grunden händer
nu är att HTTP används.

339
00:14:35,430 --> 00:14:39,344
>> Låt oss göra detta lite mer klar eller,
om du vill, lite mer komplicerat.

340
00:14:39,344 --> 00:14:41,760
Låt mig gå längst ned till höger
hörnet av min apparat.

341
00:14:41,760 --> 00:14:44,000
Och märker att allt detta
tid, det har varit ett nummer.

342
00:14:44,000 --> 00:14:47,330
Det är den unika adressen
din CS50 Appliance.

343
00:14:47,330 --> 00:14:50,800
Det är en privat adress,
som impliceras av 172,16,

344
00:14:50,800 --> 00:14:53,860
vilket bara betyder bara att du fysiskt
åtkomst till denna webbserver.

345
00:14:53,860 --> 00:14:56,340
Allt är brandvägg och
snyggt skyddad från resten

346
00:14:56,340 --> 00:14:58,130
av världen på grund av detta adressering.

347
00:14:58,130 --> 00:15:01,920
>> Och nu märker men om jag går till
den här adressen, inte i min apparat,

348
00:15:01,920 --> 00:15:04,340
men i Mac OS-- jag ska
att gå tillbaka hit.

349
00:15:04,340 --> 00:15:05,930
Detta är min Mac nu.

350
00:15:05,930 --> 00:15:08,460
Och nu ska jag öppna upp
denna version av Chrome här.

351
00:15:08,460 --> 00:15:17,370
Och jag kommer att gå till http: //172.16.25
/ Och jag glömmer rest-- 133.

352
00:15:17,370 --> 00:15:25,210
>> Så jag kommer att besöka från min Mac
den IP-adressen /hello.html Enter.

353
00:15:25,210 --> 00:15:29,850
Och nu ser jag från min Mac
att min CS50 Appliance, som är

354
00:15:29,850 --> 00:15:32,600
IP-adressen är att
nummer är faktiskt beter

355
00:15:32,600 --> 00:15:34,320
som en webbserver på Internet.

356
00:15:34,320 --> 00:15:36,944
Det har inte en trevlig lätt
ihåg namn som Facebook.com,

357
00:15:36,944 --> 00:15:40,370
men det är med hjälp av HTTP
tydligen, fastän Krom

358
00:15:40,370 --> 00:15:43,560
är typ att förenkla världen
för oss men inte visar oss HTTP.

359
00:15:43,560 --> 00:15:46,210
Men detta är verkligen just detta.

360
00:15:46,210 --> 00:15:48,470
Chrome är bara spara lite
tangenter i dessa dagar.

361
00:15:48,470 --> 00:15:50,530
Och det är vad vi nu ser.

362
00:15:50,530 --> 00:15:51,890
>> Så det är alla fina och bra.

363
00:15:51,890 --> 00:15:53,740
Men det är en ganska underwhelming sida.

364
00:15:53,740 --> 00:15:56,230
Låt mig gå in och göra något
lite annorlunda nu.

365
00:15:56,230 --> 00:15:57,910
Så låt mig gå tillbaka till gedit.

366
00:15:57,910 --> 00:16:00,580
Och istället för hej,
värld, låt oss sätta en bild.

367
00:16:00,580 --> 00:16:05,880
Och jag hävdade från before-- låta mig gå
i min offentliga localhost katalogen.

368
00:16:05,880 --> 00:16:10,580
Och låt mig gå vidare och kopiera en
massa filer från idag

369
00:16:10,580 --> 00:16:15,633
från min Dropbox mapp till här.

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

371
00:16:19,470 --> 00:16:21,680
>> Nu om jag skriver ls, titta
på alla dessa filer

372
00:16:21,680 --> 00:16:24,940
att jag har distribueras av
kursens hemsida före dagens,

373
00:16:24,940 --> 00:16:26,830
varav en är fortfarande hello.html.

374
00:16:26,830 --> 00:16:27,830
Så det finns att en.

375
00:16:27,830 --> 00:16:30,730
Och minns denna fåniga ett
från förra time-- cat.jpg.

376
00:16:30,730 --> 00:16:34,550
Så låt mig försöka bädda
cat.jpg insidan av min hemsida.

377
00:16:34,550 --> 00:16:37,690
>> Jag kommer att gå vidare
och gör cat.jpg, spara.

378
00:16:37,690 --> 00:16:38,950
Låt mig gå tillbaka till Chrome.

379
00:16:38,950 --> 00:16:41,140
Och låt mig zooma in
typsnitt och nu ladda om.

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

381
00:16:43,090 --> 00:16:45,030
Oj, där jag lagt detta?

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

383
00:16:48,210 --> 00:16:51,520
Standby-- jag har fortfarande den gamla
versionen från min stationära öppen.

384
00:16:51,520 --> 00:16:56,020
Så låt mig gå in i min vhost, min
localhost, min offentliga och hello.html.

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

386
00:16:57,320 --> 00:17:00,670
Så nu vill jag gå vidare och
say cat.jpg insidan av kroppen

387
00:17:00,670 --> 00:17:02,830
där jag vill att det ska vara
visas och ladda om.

388
00:17:02,830 --> 00:17:04,560
Naturligtvis är detta inte korrekt.

389
00:17:04,560 --> 00:17:08,050
>> Så jag måste berätta webbläsaren lite
mer medvetet vad jag vill att den ska göra.

390
00:17:08,050 --> 00:17:10,210
Helt enkelt skriva namnet är
uppenbarligen inte tillräckliga.

391
00:17:10,210 --> 00:17:15,134
Så minns att det fanns en annan
tagg, bild, img för korta.

392
00:17:15,134 --> 00:17:17,550
Det är bara för att människor
tycker inte om typ hela ord.

393
00:17:17,550 --> 00:17:19,050
Och då kan vi göra source = "cat.jpg".

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

395
00:17:21,470 --> 00:17:23,550
>> Och nu ska jag göra
en sak annorlunda här.

396
00:17:23,550 --> 00:17:25,390
Även om alla
våra taggar hittills har

397
00:17:25,390 --> 00:17:28,086
hade denna föreställning om en
start tagg och en sluttagg,

398
00:17:28,086 --> 00:17:30,210
som egentligen inte gör
meningsfullt för en bild, eller hur?

399
00:17:30,210 --> 00:17:32,430
En bild är antingen där eller inte där.

400
00:17:32,430 --> 00:17:36,650
Och så människorna har kommit
upp med ett enklare konvention.

401
00:17:36,650 --> 00:17:40,310
När du har en tagg som kan både
starta och sluta vid samma time--

402
00:17:40,310 --> 00:17:43,790
Det kan vara tom, så att speak-- bara
sätta snedstreck inuti taggen

403
00:17:43,790 --> 00:17:44,710
i slutet.

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

405
00:17:45,776 --> 00:17:47,150
Låt mig gå tillbaka till min webbläsare.

406
00:17:47,150 --> 00:17:50,377
Hit Reload Fan, är fel någonting.

407
00:17:50,377 --> 00:17:52,460
Du har säkert sett det här
ibland på webben,

408
00:17:52,460 --> 00:17:53,600
även om det inte har varit ditt fel.

409
00:17:53,600 --> 00:17:54,766
Det är webbservern fel.

410
00:17:54,766 --> 00:17:56,240
Vilka dioder detta tyder på?

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

412
00:17:57,450 --> 00:17:58,009
Den är trasig.

413
00:17:58,009 --> 00:17:59,300
Det är där bilden tillhör.

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

415
00:17:59,700 --> 00:18:01,560
>> PUBLIK: Men det gör det inte
har tillgång till bilden.

416
00:18:01,560 --> 00:18:03,070
>> DAVID J MALAN: Det inte
har tillgång till bilden.

417
00:18:03,070 --> 00:18:05,230
Det, eller ännu värre, kanske
det inte ens existerar.

418
00:18:05,230 --> 00:18:06,729
Låt oss se om vi inte kan diagnostisera det.

419
00:18:06,729 --> 00:18:09,390
Minns från förra gången att om
i Chrome, i apparaten,

420
00:18:09,390 --> 00:18:11,870
eller även på din Mac eller PC,
du går till utvecklarmenyn

421
00:18:11,870 --> 00:18:14,650
och gå till Developer Tools
alternativet, vilket förmodligen du har

422
00:18:14,650 --> 00:18:16,850
används inte mycket eller någonsin.

423
00:18:16,850 --> 00:18:20,780
Och om jag går till nätverk
och ladda om sidan,

424
00:18:20,780 --> 00:18:24,110
låt oss faktiskt titta på HTTP
förfrågningar som görs.

425
00:18:24,110 --> 00:18:28,400
>> Det ser ut som hello.html är
faktiskt OK, därav 200.

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

427
00:18:30,630 --> 00:18:31,650
Så det är inte en 404.

428
00:18:31,650 --> 00:18:33,490
Filen finns förmodligen.

429
00:18:33,490 --> 00:18:35,250
403 betyder förbjuden.

430
00:18:35,250 --> 00:18:37,790
Så det här är lite förvirrande.

431
00:18:37,790 --> 00:18:42,340
Jag kommer att gå tillbaka
till min terminalfönster.

432
00:18:42,340 --> 00:18:43,700
Låt mig zooma in här uppe.

433
00:18:43,700 --> 00:18:44,750
Och låt mig göra en ls.

434
00:18:44,750 --> 00:18:46,430
Det finns samma filer.

435
00:18:46,430 --> 00:18:49,410
>> Låt mig göra en ls-l,
som du har förmodligen

436
00:18:49,410 --> 00:18:53,350
använts tidigare för att titta på fil
storlekar kanske eller tidsstämplar.

437
00:18:53,350 --> 00:18:55,590
Och vi ser en massa
överväldigande informationen.

438
00:18:55,590 --> 00:18:57,040
Men märker några detaljer.

439
00:18:57,040 --> 00:19:01,660
Här är hello.html i denna
ro här och här är cat.jpg.

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

441
00:19:02,934 --> 00:19:05,850
Och det är bara apparaten är
användarvänligt genom att markera JPEG s

442
00:19:05,850 --> 00:19:07,380
i lila så här.

443
00:19:07,380 --> 00:19:11,470
Men vad annat är annorlunda bredvid
filstorlek och filnamnet?

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

445
00:19:13,438 --> 00:19:14,754
>> PUBLIK: [OHÖRBAR].

446
00:19:14,754 --> 00:19:16,920
DAVID J MALAN: Ja, det finns
ytterligare två R hit.

447
00:19:16,920 --> 00:19:20,170
Lägg märke till vad hello.html har på gång.

448
00:19:20,170 --> 00:19:24,050
Så visar det sig att namnet på
den allmänna abonnent är viktigt.

449
00:19:24,050 --> 00:19:26,400
Allt i den här katalogen
är tänkt att vara offentliga.

450
00:19:26,400 --> 00:19:28,790
Men det är inte tillräckligt
bara för att släppa filer där.

451
00:19:28,790 --> 00:19:31,480
Du måste också ändra
läge för filerna,

452
00:19:31,480 --> 00:19:35,180
ändra tillstånd för
filen till proaktivt inte

453
00:19:35,180 --> 00:19:37,650
vara standardinställning,
nämligen att bara jag kan läsa

454
00:19:37,650 --> 00:19:39,220
och skriva det, jag är ägaren.

455
00:19:39,220 --> 00:19:43,540
Jag vill att hela världen alla att
kunna läsa min fil, så att säga.

456
00:19:43,540 --> 00:19:44,950
Läs betyder bara visa det.

457
00:19:44,950 --> 00:19:49,780
>> Och faktiskt, som du ser i problem
sätta sju, det är vad dessa R medelvärde.

458
00:19:49,780 --> 00:19:53,160
Dessa två R: s medelvärde låta alla
annanstans i världen också läsa den,

459
00:19:53,160 --> 00:19:55,300
särskilt nu när
det är i den här katalogen.

460
00:19:55,300 --> 00:19:59,620
Så det enklaste sättet att åtgärda detta är att
gå till min snabb och gör chmod för förändring

461
00:19:59,620 --> 00:20:05,580
läge och sedan gör en + r, helt och hållet,
alla, allt, plus r för läsning,

462
00:20:05,580 --> 00:20:07,944
och sedan cat.jpg Enter.

463
00:20:07,944 --> 00:20:10,360
Ingenting verkar hända, vilket
betyder oftast en bra sak.

464
00:20:10,360 --> 00:20:13,850
Så ls-l igen-- nu
låt oss titta på cat.jpg.

465
00:20:13,850 --> 00:20:15,750
Och detta tillstånd
verkar ha ändrats.

466
00:20:15,750 --> 00:20:18,670
Som en sidoreplik, om du gör en
misstag och du, till exempel,

467
00:20:18,670 --> 00:20:23,210
just gjort your-- jag inte veta-- uppsats
tillgängliga för allmänheten genom olycka,

468
00:20:23,210 --> 00:20:25,480
Du kan göra det motsatta, chmod a-r.

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

470
00:20:25,909 --> 00:20:28,200
Men ärligt talat, det borde inte
vara i den offentliga katalogen

471
00:20:28,200 --> 00:20:29,760
i alla fall om det är oro.

472
00:20:29,760 --> 00:20:32,475
>> Så nu ska vi gå tillbaka till
min webbläsare och ladda om.

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

474
00:20:32,904 --> 00:20:34,820
Och jag ska klicka
den lilla Ghostbusters

475
00:20:34,820 --> 00:20:38,030
symbol för att rensa den del av
skärmen så att vi kan se nya förfrågningar.

476
00:20:38,030 --> 00:20:40,630
Och faktiskt, här är
Grump katt sedan tidigare.

477
00:20:40,630 --> 00:20:43,010
Men ännu viktigare,
Tekniskt sett finns det

478
00:20:43,010 --> 00:20:45,565
antalet 200, vilket
innebär att vi fick det OK.

479
00:20:45,565 --> 00:20:47,190
Okej, så det är allt bra och gott.

480
00:20:47,190 --> 00:20:48,940
Men vi gör inte
det bästa av webbplatser,

481
00:20:48,940 --> 00:20:51,967
inte heller kommer vi att försöka för hårt för att
gör den häftigaste av webbplatser idag.

482
00:20:51,967 --> 00:20:54,550
Men låt oss åtminstone göra något
super förtrogen innan skramlande

483
00:20:54,550 --> 00:20:56,030
utanför några andra taggar.

484
00:20:56,030 --> 00:20:58,470
Så antar att jag inte bara vill ha en katt här.

485
00:20:58,470 --> 00:21:02,530
Anta att jag vill verkligen det här
katt att länka till någonting.

486
00:21:02,530 --> 00:21:07,210
>> Jag kan, till exempel
göra något liknande.

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

488
00:21:08,580 --> 00:21:12,890
a för ankar href för
hyper referens equals--

489
00:21:12,890 --> 00:21:17,440
och låt oss bara göra något
liknande www.google.com nära

490
00:21:17,440 --> 00:21:19,540
citera nära fästet.

491
00:21:19,540 --> 00:21:22,000
Och nu söka efter katter.

492
00:21:22,000 --> 00:21:23,520
Nära ankartaggen.

493
00:21:23,520 --> 00:21:26,760
Så det här har bara en sorts
av grunden ny detalj.

494
00:21:26,760 --> 00:21:28,190
Taggen är naturligtvis annorlunda.

495
00:21:28,190 --> 00:21:31,770
Det är namnet a för ankare
href eller hyper referens.

496
00:21:31,770 --> 00:21:35,269
>> Men ännu viktigare, det finns
denna syntaktiska funktion här.

497
00:21:35,269 --> 00:21:37,810
Detta är vad vi ska börja ringa
inte ett tag, men ett attribut.

498
00:21:37,810 --> 00:21:40,830
Och ett attribut är något som
modifierar uppförandet av en tagg.

499
00:21:40,830 --> 00:21:45,400
Och detta attribut, href, medel
ändra beteende för detta ankare

500
00:21:45,400 --> 00:21:48,430
så att när den är tryckt,
Det går till denna URL här.

501
00:21:48,430 --> 00:21:50,330
Och naturligtvis, är att URL Google.

502
00:21:50,330 --> 00:21:53,951
>> Samtidigt, vad är detta
text här kommer att bli?

503
00:21:53,951 --> 00:21:55,950
Jo, det kommer att bli
vad människan egentligen

504
00:21:55,950 --> 00:21:58,470
ser som den understrukna
länk, så enkelt är det.

505
00:21:58,470 --> 00:21:59,220
Så låt oss prova detta.

506
00:21:59,220 --> 00:21:59,980
Låt mig spara den.

507
00:21:59,980 --> 00:22:01,650
Jag är fortfarande i hello.html.

508
00:22:01,650 --> 00:22:05,360
Men i de versioner på nätet, kommer du att se
själva filnamnen vi pre-förberedda.

509
00:22:05,360 --> 00:22:06,805
Låt mig gå vidare och ladda om.

510
00:22:06,805 --> 00:22:08,680
Och nu är det en mycket
underwhelming sida fortfarande.

511
00:22:08,680 --> 00:22:10,910
Men om jag hovrar över there--
och det är lite små,

512
00:22:10,910 --> 00:22:13,576
men-- du kan se i botten
vänstra hörnet av skärmen,

513
00:22:13,576 --> 00:22:15,242
det faktiskt går till google.com.

514
00:22:15,242 --> 00:22:19,280
Och om jag klickar på den, kommer det
vispa mig sätt att den färdiga skrevs.

515
00:22:19,280 --> 00:22:22,610
>> Men märker här en möjlighet för
exploatering, precis som en parentes.

516
00:22:22,610 --> 00:22:25,150
Och vi ska återkomma till andra
frågor om säkerhet inom kort.

517
00:22:25,150 --> 00:22:29,290
Eftersom det är denna dikotomi
mellan var du går och vad du säger,

518
00:22:29,290 --> 00:22:34,722
du kunde göra något liknande
this-- http://www.google.com.

519
00:22:34,722 --> 00:22:37,134
OK, och nu om jag laddar
efter att ha sparat den sidan,

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

521
00:22:38,800 --> 00:22:40,966
Men det finns ingen anledning som jag
måste gå till Google, eller hur?

522
00:22:40,966 --> 00:22:47,460
Jag kunde faktiskt gå till något i stil med
badguy.com, ladda om sidan här.

523
00:22:47,460 --> 00:22:49,750
Och varsel, fortfarande ser ut som Google.

524
00:22:49,750 --> 00:22:52,020
Och bara om jag är skarp
tillräckligt för att sväva över hit

525
00:22:52,020 --> 00:22:54,770
ser jag det även kommer att
gå till en annan plats.

526
00:22:54,770 --> 00:22:57,400
>> Så om du någonsin har fått
ett e-postmeddelande, särskilt

527
00:22:57,400 --> 00:22:59,610
en från Paypal, eller
synes från Paypal

528
00:22:59,610 --> 00:23:01,830
ber dig att logga in
till ditt konto, detta

529
00:23:01,830 --> 00:23:06,380
Därför ska du aldrig
någonsin klicka på länkar i e-postmeddelanden,

530
00:23:06,380 --> 00:23:07,930
ärligt talat, alla länkar i e-postmeddelanden.

531
00:23:07,930 --> 00:23:10,380
Om du vet att du har faktiska
pengar i Paypal eller Bank

532
00:23:10,380 --> 00:23:14,250
Amerikas eller Fidelity eller något
hemsida, manuellt skriva in det.

533
00:23:14,250 --> 00:23:17,530
Eftersom ser hur lätt det är att
lura någon till att presentera vad

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

535
00:23:18,526 --> 00:23:20,400
Men det kunde faktiskt
gå absolut någonstans.

536
00:23:20,400 --> 00:23:23,301
>> Och det finns mycket större
hot än detta.

537
00:23:23,301 --> 00:23:25,300
I själva verket är detta en bit
av en tangent nu, men en

538
00:23:25,300 --> 00:23:28,430
av de bästa jag någonsin sett
som sedan har stängts,

539
00:23:28,430 --> 00:23:34,060
är någon ledde folk
att-- så detta kan säga,

540
00:23:34,060 --> 00:23:37,660
Klicka här för att logga in på ditt
konto, ett bankkonto.

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

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

543
00:23:43,030 --> 00:23:44,250
>> Så någon köpte detta.

544
00:23:44,250 --> 00:23:47,090
Och det är lite lättare att se
det i en mono avstånd typsnitt zoomas

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

546
00:23:49,190 --> 00:23:51,720
Men när det är små tecken på en
e-post som du får,

547
00:23:51,720 --> 00:23:54,690
detta ser ut bankofthewest.com,
inte bankofthevvest.com,

548
00:23:54,690 --> 00:23:58,230
som någon hade betalat $ 10 för att köpa.

549
00:23:58,230 --> 00:24:00,840
Och då detta ledde dem till
motsvarande del dåliga webbplats.

550
00:24:00,840 --> 00:24:05,540
>> Och du ser too-- faktiskt kan vi göra
this-- om jag går till själva hemsidan,

551
00:24:05,540 --> 00:24:10,335
bankofthewest.com, återigen,
minns från förra gången

552
00:24:10,335 --> 00:24:13,210
att om detta är deras webbsida och
du är nyfiken på hur det fungerar,

553
00:24:13,210 --> 00:24:15,610
du kan säkert gå till
Chrome utvecklingsverktyg.

554
00:24:15,610 --> 00:24:18,890
Och du kan se alla
HTML vackert formaterad där.

555
00:24:18,890 --> 00:24:20,890
>> Men mer till den punkt,
du cam-- låt oss stänga

556
00:24:20,890 --> 00:24:24,760
this-- du kan gå till Visa
Utvecklare Visa källa.

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

558
00:24:25,770 --> 00:24:28,350
Varför får jag inte kopiera bara
allt detta Och sen

559
00:24:28,350 --> 00:24:31,630
kan gå in i min lilla gedit fönster
här och göra min egen webbsida.

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

561
00:24:33,210 --> 00:24:36,770
Och förmodligen detta kommer att bryta,
eftersom det inte är så enkelt oftast.

562
00:24:36,770 --> 00:24:41,590
Men nu när jag ladda min egen sida på
min egen CS50 Appliance och trycka reload,

563
00:24:41,590 --> 00:24:42,990
OK, bröt lite grejer.

564
00:24:42,990 --> 00:24:45,750
Men jag är ganska nära att ha
min egen bank webbplats, eller hur?

565
00:24:45,750 --> 00:24:46,570
Allt detta HTML--

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

567
00:24:47,370 --> 00:24:49,210
>> David J MALAN: --Jag
inte actually-- och ni

568
00:24:49,210 --> 00:24:52,210
vet att det finns någon där ute som
skulle faktiskt klickar dessa länkar också.

569
00:24:52,210 --> 00:24:54,864
Så klart, bröt lite grejer.

570
00:24:54,864 --> 00:24:56,780
Men det kommer att leda
oss in i en diskussion,

571
00:24:56,780 --> 00:25:00,810
onödigt just nu, vad
CSS, Cascading Style Sheets, är,

572
00:25:00,810 --> 00:25:03,410
och hur man faktiskt
hämta de andra HTML-filer

573
00:25:03,410 --> 00:25:06,140
och JPEG-filer GIF-filer som
hemsidan kanske använder.

574
00:25:06,140 --> 00:25:07,960
Men allt detta är accomplishable.

575
00:25:07,960 --> 00:25:11,110
Men det är verkligen kokar ner till
dessa mycket enkla heuristik.

576
00:25:11,110 --> 00:25:14,450
>> Så nu ska vi bara skumma igenom en
par andra exempel på HTML

577
00:25:14,450 --> 00:25:16,680
bara för att ge dig en känsla
om vad mer du kan göra.

578
00:25:16,680 --> 00:25:18,670
Till exempel är denna list.html.

579
00:25:18,670 --> 00:25:23,240
Anta att jag ville göra en webbsida
med en lista över hus i quad.

580
00:25:23,240 --> 00:25:28,960
Jag skulle kunna använda ul-taggen för oordnad
listan och sedan listobjektet barnet

581
00:25:28,960 --> 00:25:33,760
och sedan iterera over-- eller lista,
rather-- husen i fråga.

582
00:25:33,760 --> 00:25:36,080
>> Och om jag öppnar upp detta, låt oss göra detta.

583
00:25:36,080 --> 00:25:40,670
Låt oss gå inte hello.html,
men att list.html.

584
00:25:40,670 --> 00:25:42,160
Fan också.

585
00:25:42,160 --> 00:25:43,000
Hur åtgärdar jag detta?

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

587
00:25:45,679 --> 00:25:47,220
Det är samma problem som tidigare, eller hur?

588
00:25:47,220 --> 00:25:52,510
Så låt mig göra chmod-- oops--
chmod a + r från list.html.

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

590
00:25:54,610 --> 00:25:59,610
Och nu om jag går tillbaka till min webbläsare
och klicka på Uppdatera, där är den.

591
00:25:59,610 --> 00:26:02,360
Så om du någonsin velat göra
en punktlista, kan du göra det.

592
00:26:02,360 --> 00:26:06,210
Om du vill vara super snygga och göra
en ordnad lista, inte en oordnad lista,

593
00:26:06,210 --> 00:26:10,170
ändra dem till ol, ladda om sidan, och
Nu kommer webbläsaren att numrera det åt dig.

594
00:26:10,170 --> 00:26:11,241
>> Vad mer kan vi göra?

595
00:26:11,241 --> 00:26:13,990
Tja, ett par mot andra, om
du har långa stycken av text--

596
00:26:13,990 --> 00:26:15,698
till exempel, en del
Latinska texten som this--

597
00:26:15,698 --> 00:26:20,730
och du vill ha det i separata stycken,
öppen p, nära p för punkt taggen.

598
00:26:20,730 --> 00:26:22,010
Och gör det igen och igen.

599
00:26:22,010 --> 00:26:26,600
Och om jag nu öppnar den här filen,
paragraphs.html, ja, det här

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

601
00:26:27,570 --> 00:26:34,320
Så nu ska vi bara gå tillbaka till min
snabb, chmod a + r r stjärna .html--

602
00:26:34,320 --> 00:26:36,099
en trevlig liten wild card så att säga.

603
00:26:36,099 --> 00:26:37,890
Det borde fixa alla
dessa problem för mig.

604
00:26:37,890 --> 00:26:38,990
Låt oss ladda om.

605
00:26:38,990 --> 00:26:40,500
Det finns tre stycken.

606
00:26:40,500 --> 00:26:42,930
>> Och nu ska vi gå vidare
och öppna upp en annan.

607
00:26:42,930 --> 00:26:44,310
Vad sägs om bord?

608
00:26:44,310 --> 00:26:46,440
Du kommer att märka bord ser ut
lite mer komplex.

609
00:26:46,440 --> 00:26:49,110
Men det är samma idea--
öppen tag, öppna tag,

610
00:26:49,110 --> 00:26:51,360
öppna, öppna, öppna, stänga taggen, öppen tag.

611
00:26:51,360 --> 00:26:54,410
Och dessa råkar stå för
bord, vars gräns är tydligen

612
00:26:54,410 --> 00:26:58,500
kommer att bli en tjocklek 1-- oavsett
att means-- tabellrad, bord

613
00:26:58,500 --> 00:27:00,320
data, vilket innebär en cell.

614
00:27:00,320 --> 00:27:03,840
Och om jag går tillbaka till min webbläsare
här och gå till table.html,

615
00:27:03,840 --> 00:27:05,840
Du kan se något
så här, ohyggliga.

616
00:27:05,840 --> 00:27:07,840
Men vi ska komma till saken
där vi kan faktiskt

617
00:27:07,840 --> 00:27:09,260
göra det sötare än så.

618
00:27:09,260 --> 00:27:10,530
>> Så låt mig stipulerar för nu.

619
00:27:10,530 --> 00:27:11,870
Det finns klasar av fler taggar.

620
00:27:11,870 --> 00:27:15,225
Och HTML är underbart att plocka upp
eftersom, uppriktigt sagt, allt du behöver göra

621
00:27:15,225 --> 00:27:17,600
är att titta på befintliga webbsidor
som du känner.

622
00:27:17,600 --> 00:27:20,340
Och du är som, åh, det är hur
de gjorde detta estetiskt.

623
00:27:20,340 --> 00:27:23,159
>> Eller så kan du leta upp någon online
resurs för hur HTML fungerar,

624
00:27:23,159 --> 00:27:25,700
och du kommer att se att det finns en
Hela vokabulär andra taggar.

625
00:27:25,700 --> 00:27:30,110
Men med den enkla mental modell
Enbart att nästan varje etikett du öppnar

626
00:27:30,110 --> 00:27:33,620
har att vara stängd, det är verkligen
är tillräckligt för att lära sig

627
00:27:33,620 --> 00:27:36,950
HTML efter förstå
dessa grundläggande idéer taggar

628
00:27:36,950 --> 00:27:40,520
och attribut och välutformning
att vi har pratat om,

629
00:27:40,520 --> 00:27:44,697
stängnings något som vi kan öppna
så att vi inte blandar ihop en webbläsare.

630
00:27:44,697 --> 00:27:46,780
Så låt oss nu ta detta till
en mer intressant nivå

631
00:27:46,780 --> 00:27:48,100
genom att gå till själva.

632
00:27:48,100 --> 00:27:51,095
Och låt oss gå till min Mac
Här, till google.com.

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

634
00:27:52,280 --> 00:27:54,020
Och nu notice-- låt oss göra detta.

635
00:27:54,020 --> 00:27:57,280
Jag gong att gå till
Inställningar Sök inställningar.

636
00:27:57,280 --> 00:28:01,070
Jag vill stänga av den här irriterande ögonblick
resultat sak där den omedelbart

637
00:28:01,070 --> 00:28:02,450
börjar svara på ditt skrivande.

638
00:28:02,450 --> 00:28:05,300
Låt oss göra detta äldre skolan så
vi faktiskt ser vad som händer.

639
00:28:05,300 --> 00:28:08,260
>> Så jag kommer att rädda min
Googles inställningar här.

640
00:28:08,260 --> 00:28:11,160
Och nu notice-- jag ska
söka efter något som katter.

641
00:28:11,160 --> 00:28:14,500
Och det är fortfarande gör auto
komplett här, men baserat på saker

642
00:28:14,500 --> 00:28:15,970
folk har skrivit tidigare.

643
00:28:15,970 --> 00:28:17,490
Men lägg märke till vad som kommer att hända.

644
00:28:17,490 --> 00:28:20,272
>> I URL för tillfället
är detta, bara google.com.

645
00:28:20,272 --> 00:28:22,650
Och tekniskt är det snedstreck.

646
00:28:22,650 --> 00:28:25,910
Google är bara sparar en karaktär
och inte visar oss det.

647
00:28:25,910 --> 00:28:30,400
De visar oss https, bara
att vara super lugnande att vi är

648
00:28:30,400 --> 00:28:32,850
på en säker eller krypterad sida.

649
00:28:32,850 --> 00:28:35,690
>> Så låt mig gå vidare och söka efter katter.

650
00:28:35,690 --> 00:28:37,670
Nu fick verkligen
överväldigande snabbt.

651
00:28:37,670 --> 00:28:39,470
Titta på längden på den här webbadressen.

652
00:28:39,470 --> 00:28:43,070
Men det visar sig att det mesta av det här
i webbadressen är faktiskt ganska värdelös.

653
00:28:43,070 --> 00:28:45,320
Jag ska börja att ta bort
saker som jag inte förstår.

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

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

656
00:28:47,360 --> 00:28:48,470
Jag förstår katter.

657
00:28:48,470 --> 00:28:50,380
Jag vet inte varför katter är där igen.

658
00:28:50,380 --> 00:28:52,620
Jag vet faktiskt inte
vad detta nonsens är.

659
00:28:52,620 --> 00:28:56,030
Så jag ska bara hålla
lyfta fram och ta bort saker

660
00:28:56,030 --> 00:28:59,905
att jag inte förstår,
destillering URL till just detta.

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

662
00:29:00,920 --> 00:29:02,270
>> Låt mig få komma in igen.

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

664
00:29:03,814 --> 00:29:06,980
Så av någon anledning, de lägger till en
massa saker till deras webbadresser som standard.

665
00:29:06,980 --> 00:29:09,000
Men det är inte absolut nödvändigt.

666
00:29:09,000 --> 00:29:10,340
Så vad är trevligt om det här?

667
00:29:10,340 --> 00:29:13,630
Nåväl, låt mig gå vidare och
öppna Chrome Inspector.

668
00:29:13,630 --> 00:29:15,960
Det finns en liten mus genväg för det.

669
00:29:15,960 --> 00:29:17,360
>> Gå till fliken Nätverk.

670
00:29:17,360 --> 00:29:19,340
Och nu vill jag ladda om
denna sida en gång.

671
00:29:19,340 --> 00:29:20,280
Och jag håller Shift.

672
00:29:20,280 --> 00:29:22,520
Som en sidoreplik webbläsare
tenderar att cacha eller spara

673
00:29:22,520 --> 00:29:24,697
uppgifter bara för effektivitet skull.

674
00:29:24,697 --> 00:29:27,280
Men oftast, hålla Skift och
omlastning kommer att tvinga allt

675
00:29:27,280 --> 00:29:28,994
att börja om från början.

676
00:29:28,994 --> 00:29:30,410
Och det är vad jag vill göra här.

677
00:29:30,410 --> 00:29:33,550
>> Och märker alla dessa
rader som bara dök upp.

678
00:29:33,550 --> 00:29:37,920
Det visar sig att i en viss bana
sida kan det finnas bara en fil

679
00:29:37,920 --> 00:29:43,500
involved-- hello.html-- eller där
kan vara 52, som i detta fall.

680
00:29:43,500 --> 00:29:45,820
När jag besöker google.com,
tydligen, min webbläsare

681
00:29:45,820 --> 00:29:49,650
sparkar av 52 separata HTTP-förfrågningar.

682
00:29:49,650 --> 00:29:50,520
Varför är det så?

683
00:29:50,520 --> 00:29:53,380
>> Tja, titta på vad som finns inuti
på denna webbsida uppe.

684
00:29:53,380 --> 00:29:55,620
Det finns inte bara text,
men det finns faktiska bilder

685
00:29:55,620 --> 00:29:57,130
av katter över till höger.

686
00:29:57,130 --> 00:29:59,110
Det finns en färgglad logotyp här uppe till vänster.

687
00:29:59,110 --> 00:30:01,750
Det finns alla dessa ikoner
för en mikrofon och så vidare.

688
00:30:01,750 --> 00:30:05,130
Det finns en massa bitar, bygga
block, skrap bitar, om ni så vill,

689
00:30:05,130 --> 00:30:06,250
på denna webbsida.

690
00:30:06,250 --> 00:30:10,310
Och vad webbläsaren gör på
få den allra första filen, som

691
00:30:10,310 --> 00:30:16,180
är denna rad här, är det i huvudsak
iteration över HTML top

692
00:30:16,180 --> 00:30:19,880
till botten, från vänster till höger, söker
saker som bildtaggar eller andra taggar

693
00:30:19,880 --> 00:30:23,160
som nämner andra filer och
när den ser dem, går och hämtar dem

694
00:30:23,160 --> 00:30:26,050
via HTTP, livskraftig helhet
kuvert metafor,

695
00:30:26,050 --> 00:30:29,670
och sedan visar dem i
lämplig plats på webbsidan.

696
00:30:29,670 --> 00:30:33,370
>> Men märker här om jag fokuserar på
de första kast, sök katter,

697
00:30:33,370 --> 00:30:37,090
märka det, ja det är med hjälp av HTTP 1.1.

698
00:30:37,090 --> 00:30:41,690
Och tyvärr, Google
Chrome just nu i version 39

699
00:30:41,690 --> 00:30:45,110
är typ av fördumma ner saker och
inte visar oss den verkliga rubriker.

700
00:30:45,110 --> 00:30:49,680
Men det som verkligen skickades en förfrågan
för att inte slash, men / search? q = katter.

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

702
00:30:52,830 --> 00:30:54,340
>> Nu, varför är det viktigt?

703
00:30:54,340 --> 00:30:57,110
Tja, jag ska sluta
från det att om du Google

704
00:30:57,110 --> 00:31:01,520
stöder frågor av denna form, varför
kan jag inte genomföra min egen sökning

705
00:31:01,520 --> 00:31:06,420
motor för CS50, men bara på framsidan
slut, bara det grafiska användargränssnittet.

706
00:31:06,420 --> 00:31:09,610
Och vi ska lägga ut den bakre änden,
själva sökresultaten på Google.

707
00:31:09,610 --> 00:31:10,510
>> Så hur kan jag göra detta?

708
00:31:10,510 --> 00:31:13,820
Nåväl, låt mig gå in i gedit hit.

709
00:31:13,820 --> 00:31:19,180
Och låt mig gå vidare och öppna
upp, låt oss säga, en ny fil.

710
00:31:19,180 --> 00:31:22,280
Och jag kommer att spara den här
tillfälligt som sök-0.html.

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

712
00:31:25,111 --> 00:31:27,860
Och så småningom, vi ska snabbt
fram till den jag pre-prepared.

713
00:31:27,860 --> 00:31:30,190
>> Och jag ska
snabbt piska upp doc typ

714
00:31:30,190 --> 00:31:33,840
html öppen bygel html
nära fästet html.

715
00:31:33,840 --> 00:31:38,390
Sen kommer jag att göra huvudet
nära huvudet öppen titel CS50

716
00:31:38,390 --> 00:31:40,150
Sök istället för Google-sökning.

717
00:31:40,150 --> 00:31:43,480
Här nere kommer jag att ha
kroppen, här nere nära kroppen.

718
00:31:43,480 --> 00:31:45,835
Och nu behöver jag CS50 sökning.

719
00:31:45,835 --> 00:31:47,710
Och faktiskt, låt oss
bygga detta stegvis.

720
00:31:47,710 --> 00:31:51,043
Jag kommer att gå vidare och avsluta detta och
faktiskt lägga den i min offentliga register.

721
00:31:51,043 --> 00:31:52,730
Så ge mig bara ett ögonblick.

722
00:31:52,730 --> 00:31:55,390
sök-0.html-- jag ska
tidsmässigt kalla det search.html.

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

724
00:31:56,600 --> 00:31:59,750
Jag ska chmod det ett + r search.html.

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

726
00:32:01,072 --> 00:32:02,280
Och nu ska jag öppna det.

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

728
00:32:03,224 --> 00:32:04,390
Okej, så det var snabbt.

729
00:32:04,390 --> 00:32:06,800
Men målet helt enkelt var
att få oss till punkten

730
00:32:06,800 --> 00:32:09,630
av att ha denna text
fil kallas search.html.

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

732
00:32:10,940 --> 00:32:12,790
Så inte mycket att titta på än.

733
00:32:12,790 --> 00:32:16,970
Faktum är att om jag går till min webbläsare, och
gå till search.html, det är allt det är.

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

735
00:32:17,720 --> 00:32:19,000
Jag kan vara lite snyggare.

736
00:32:19,000 --> 00:32:22,710
Jag läste i en bok att det finns
en rubrik tagg som heter h1.

737
00:32:22,710 --> 00:32:26,100
Och jag kommer att gå vidare och
använda den öppna h1 och nära h1.

738
00:32:26,100 --> 00:32:27,220
Uppdatera sidan.

739
00:32:27,220 --> 00:32:29,600
Och nu är det större och djärvare,
inte så intressant,

740
00:32:29,600 --> 00:32:32,399
men åtminstone det strukturellt
mer intressant.

741
00:32:32,399 --> 00:32:33,940
Men nu låt mig presentera en annan tagg.

742
00:32:33,940 --> 00:32:36,500
Det visar sig att det finns ett formulär tagg.

743
00:32:36,500 --> 00:32:38,400
Och låt mig avsluta den taggen.

744
00:32:38,400 --> 00:32:40,830
Och det visar sig att det finns
en ingångs tagg som

745
00:32:40,830 --> 00:32:44,600
har ett attribut som heter typ, som
är datatyp fältet,

746
00:32:44,600 --> 00:32:45,200
om du kommer.

747
00:32:45,200 --> 00:32:47,050
Och kommer att vara av typen text.

748
00:32:47,050 --> 00:32:52,200
Och dess värde går
vara CS50 Search.

749
00:32:52,200 --> 00:32:53,850
Stäng taggen.

750
00:32:53,850 --> 00:32:57,100
Och det kommer att bli någon föreställning om
öppna och stänga med åtskilja taggar.

751
00:32:57,100 --> 00:33:00,300
>> Låt mig gå tillbaka hit och
se vad som händer, ladda om.

752
00:33:00,300 --> 00:33:01,380
Att få intressant.

753
00:33:01,380 --> 00:33:02,950
Det ser ut som det är ett textfält.

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

755
00:33:04,080 --> 00:33:06,999
Och faktiskt, jag ville inte
att sätta ett värde där ännu.

756
00:33:06,999 --> 00:33:10,040
Låt mig gå tillbaka hit och faktiskt få
bli av med detta värde för att hålla det enkelt.

757
00:33:10,040 --> 00:33:12,939
I stället för ett värde, vad jag ville
att ge denna sak var ett namn.

758
00:33:12,939 --> 00:33:15,230
Och jag vet inte vad det är,
så jag ska återkomma till detta.

759
00:33:15,230 --> 00:33:18,270
>> Men under det, jag vill ha
att göra input type = lämna.

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

761
00:33:19,840 --> 00:33:22,120
Och detta värde blir CS50 sökning.

762
00:33:22,120 --> 00:33:24,850
Och vi får se varför jag
flyttade värdet till detta.

763
00:33:24,850 --> 00:33:28,900
När jag laddar, jag verkar nu ha
början av min egen sökning

764
00:33:28,900 --> 00:33:30,820
motor, super avskyvärda,
men ärligt talat, det är

765
00:33:30,820 --> 00:33:34,260
inte ett långt kast från det
Googles standardsida ser ut.

766
00:33:34,260 --> 00:33:37,950
>> Om jag går här nu, kan jag skriva in
katter och förhoppningsvis på Sök.

767
00:33:37,950 --> 00:33:40,380
Men jag är inte riktigt klar än,
eftersom jag inte har genomförts,

768
00:33:40,380 --> 00:33:41,045
uppenbarligen, en databas.

769
00:33:41,045 --> 00:33:42,940
Jag har inte sökt igenom den
webben för sökresultaten.

770
00:33:42,940 --> 00:33:44,840
Så jag måste lägga ut det till Google.

771
00:33:44,840 --> 00:33:46,290
Så hur gör jag detta?

772
00:33:46,290 --> 00:33:49,170
>> Tja, först och främst vill jag
behöver lägga till och handling

773
00:33:49,170 --> 00:33:58,460
skriva min blankett tagg som
är http://www.google.com/search.

774
00:33:58,460 --> 00:34:01,180
Och jag vet att det bara från att ha
härledas genom att titta noga

775
00:34:01,180 --> 00:34:02,505
på deras webbadresser.

776
00:34:02,505 --> 00:34:03,380
Och nu tar en gissning.

777
00:34:03,380 --> 00:34:09,090
Vad ska det här textfältet förmodligen
kallas, beroende på var vi kom

778
00:34:09,090 --> 00:34:09,754
från tidigare?

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

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

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

782
00:34:14,370 --> 00:34:17,800
Och vi egentligen inte behöver fråga
markera det visar sig, men q är verkligen det,

783
00:34:17,800 --> 00:34:20,489
q för frågan sannolikt genom
standard, bara för att det är

784
00:34:20,489 --> 00:34:23,060
vad Larry och Sergey
kom med år sedan.

785
00:34:23,060 --> 00:34:24,739
Så nu vill jag ladda om sidan.

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

787
00:34:26,409 --> 00:34:28,120
Men nu se vad som händer.

788
00:34:28,120 --> 00:34:32,360
>> Om jag skriver in katter och klick
CS50 Sök och släppa taget,

789
00:34:32,360 --> 00:34:35,770
märker jag får forslas
bort till själva Google.

790
00:34:35,770 --> 00:34:38,150
Nu är Google vara lite
irriterande eftersom de är

791
00:34:38,150 --> 00:34:41,877
att bifoga en ytterligare parameter,
om man så vill, till URL.

792
00:34:41,877 --> 00:34:43,960
Det är allt händer
automatiskt på Google sida.

793
00:34:43,960 --> 00:34:48,730
>> Det viktiga är att jag verkar
ha genererat denna begäran här.

794
00:34:48,730 --> 00:34:50,179
Och faktiskt, det är vad som händer.

795
00:34:50,179 --> 00:34:53,040
När du har HTML som
ser ut så här, det här

796
00:34:53,040 --> 00:34:57,620
är en slags webbutvecklare notation
för att säga, gå vidare och skapa ett formulär

797
00:34:57,620 --> 00:34:59,990
att när det är in,
det kommer att gå till denna URL.

798
00:34:59,990 --> 00:35:03,430
Och när webbadressen har gett
värden för saker som q,

799
00:35:03,430 --> 00:35:05,440
inte bara gå till denna URL.

800
00:35:05,440 --> 00:35:08,210
Egentligen gå till fråga
märket och sedan q = katter.

801
00:35:08,210 --> 00:35:09,590

802
00:35:09,590 --> 00:35:13,060
Bifoga parametern, den
HTTP parameter som.

803
00:35:13,060 --> 00:35:15,590
>> Och bara för att vara super exakt,
vad som framgår här--

804
00:35:15,590 --> 00:35:18,130
men jag ska vara mer explicit-- är
att metoden jag vill använda

805
00:35:18,130 --> 00:35:22,270
är få, i stället för något som
post, som vi så småningom får se.

806
00:35:22,270 --> 00:35:27,710
Så kort sagt, helt enkelt genom att förstå
HTML och med hjälp av några ganska enkla taggar,

807
00:35:27,710 --> 00:35:30,610
Vi kan nu börja skapa
vår egen främre slutanvändaren

808
00:35:30,610 --> 00:35:32,850
gränssnitt med en sökning
motor bakom den.

809
00:35:32,850 --> 00:35:34,800
>> Men detta är naturligtvis ganska otäckt.

810
00:35:34,800 --> 00:35:37,259
Så låt mig faktiskt öppna upp
en något bättre version.

811
00:35:37,259 --> 00:35:39,800
Detta är den jag upprättats i
framåt som har några kommentarer.

812
00:35:39,800 --> 00:35:41,900
Men du kommer att se att jag
ganska mycket skapas den.

813
00:35:41,900 --> 00:35:44,150
Så det här är redan tillgängliga online.

814
00:35:44,150 --> 00:35:48,050
Och jag råkar preemptively
gå till https bara för att hålla det enkelt.

815
00:35:48,050 --> 00:35:50,610
>> Och nu ska vi öppna upp en
nästa iteration av detta.

816
00:35:50,610 --> 00:35:52,510
Är version 1 i stället för 0.

817
00:35:52,510 --> 00:35:55,315
Vad hoppar ut på dig som något
annorlunda i detta exempel?

818
00:35:55,315 --> 00:35:59,480

819
00:35:59,480 --> 00:36:00,440
>> PUBLIK: [OHÖRBAR].

820
00:36:00,440 --> 00:36:03,020
>> Ja, det finns denna text align center.

821
00:36:03,020 --> 00:36:04,590
Detta är lite konstigt här uppe.

822
00:36:04,590 --> 00:36:06,150
Men detta är verkligen ny.

823
00:36:06,150 --> 00:36:07,800
Och kanske gissa vad som kommer att hända.

824
00:36:07,800 --> 00:36:11,730
Om jag går till min webbläsare nu
och besök sök-1.html,

825
00:36:11,730 --> 00:36:13,090
det är nästan samma sak.

826
00:36:13,090 --> 00:36:15,705
Men det är ett steg närmare
vara lite mer söt.

827
00:36:15,705 --> 00:36:19,150
Det är fortfarande fult, men sötare i det
åtminstone allt är nu centrerad.

828
00:36:19,150 --> 00:36:23,470
>> Så visar det sig att det som jag använder
är ett annat språk helt och hållet kallas

829
00:36:23,470 --> 00:36:25,680
CSS, CSS.

830
00:36:25,680 --> 00:36:28,310
Och CSS, ärligt talat, är snäll
av, enligt min personliga uppfattning,

831
00:36:28,310 --> 00:36:29,775
en atrociously utformad språk.

832
00:36:29,775 --> 00:36:33,110
Det är mycket irriterande att komma ihåg
alla olika detaljer.

833
00:36:33,110 --> 00:36:38,479
Men det är vad stylizes den
Hela webben idag.

834
00:36:38,479 --> 00:36:39,270
Jag förolämpade någon.

835
00:36:39,270 --> 00:36:39,769
Okej.

836
00:36:39,769 --> 00:36:43,180
Så låt oss gå tillbaka hit och se
hur vi faktiskt använder det.

837
00:36:43,180 --> 00:36:45,940
Och det visar sig, åtminstone är det
faktiskt en ganska enkelt språk.

838
00:36:45,940 --> 00:36:49,470
Det är bara nyckelpar värde, fastigheter
och värderingar, egenskaper och värderingar.

839
00:36:49,470 --> 00:36:52,080
Ja, här är man
sådan egendom och värde.

840
00:36:52,080 --> 00:36:55,890
>> Helt enkelt genom att använda stilen
attribut på min kropp tagg

841
00:36:55,890 --> 00:37:00,360
och ge den ett värde på en
Ordet kolon och annat ord,

842
00:37:00,360 --> 00:37:03,730
eller en fastighet och ett värde,
Jag kan påverka det estetiska

843
00:37:03,730 --> 00:37:06,210
av webbsidan, inte
nödvändigtvis strukturen ännu,

844
00:37:06,210 --> 00:37:07,550
men estetik det.

845
00:37:07,550 --> 00:37:10,960
Och bara genom att googla runt, inser jag
att CSS, Cascading Style Sheets,

846
00:37:10,960 --> 00:37:14,170
uppbär en egenskap som kallas
text-align, vars värde kan

847
00:37:14,170 --> 00:37:16,980
vara vänster, höger eller center, till exempel.

848
00:37:16,980 --> 00:37:19,990
>> Så nu när jag laddar
denna sida, vad jag fick

849
00:37:19,990 --> 00:37:22,730
var ett centrerat sida,
men fortfarande ganska ful.

850
00:37:22,730 --> 00:37:25,770
Låt oss gå vidare och öppna
upp version 2 av Search.

851
00:37:25,770 --> 00:37:28,570
Och nu märker jag gjort lite mer.

852
00:37:28,570 --> 00:37:33,760
Lägg märke till att här uppe insidan av huvudet
etikett, kan det finnas mer än titeln.

853
00:37:33,760 --> 00:37:35,400
I själva verket finns det en stil tagg.

854
00:37:35,400 --> 00:37:38,630
Och det är här det blir bara en
lite rörigt seeing CSS ibland.

855
00:37:38,630 --> 00:37:41,971
>> Observera att jag verkar ha något
som strukturellt ser mycket annorlunda ut.

856
00:37:41,971 --> 00:37:44,095
Men här är namnet på
taggen jag vill stiliserad.

857
00:37:44,095 --> 00:37:47,570
Här är våra gamla vänner lockigt
hängslen och sluten klammerparentes.

858
00:37:47,570 --> 00:37:50,290
Och så här är att
egendom och dess värde.

859
00:37:50,290 --> 00:37:56,300
>> Om jag ladda denna fil, search2.html,
slutresultatet är identiska.

860
00:37:56,300 --> 00:37:59,300
Men det är ett steg mot bättre design.

861
00:37:59,300 --> 00:38:04,560
Genom facto ut denna CSS, jag har
inte sammanblandas det med min HTML.

862
00:38:04,560 --> 00:38:07,560
Och faktiskt, när vi får se, jag kunde
återanvända dessa egenskaper och värderingar.

863
00:38:07,560 --> 00:38:10,420
Om jag ville göra klasar av
delar av min hemsida centrerad,

864
00:38:10,420 --> 00:38:13,630
Jag behöver inte skriva style = text-align
centrum överallt.

865
00:38:13,630 --> 00:38:16,580
Jag kan sätta på ett ställe
kanske, gillar upp på toppen.

866
00:38:16,580 --> 00:38:18,210
>> Men även detta är inte den bästa designen.

867
00:38:18,210 --> 00:38:21,720
Faktum är att en av de saker du kommer att lära dig
när du spenderar mer och mer tid med

868
00:38:21,720 --> 00:38:25,730
webbprogrammering är att ju mer du kan
modularisera saker och faktor saker

869
00:38:25,730 --> 00:38:30,610
som .h filer låt oss faktor grejer,
gillar helpers.c låt oss faktor saker

870
00:38:30,610 --> 00:38:31,880
några psets sedan.

871
00:38:31,880 --> 00:38:34,200
På samma sätt kanske vi
vill uppnå detta.

872
00:38:34,200 --> 00:38:37,920
>> Så varsel version
tre av search.html jag har

873
00:38:37,920 --> 00:38:40,610
rensas upp huvudet av
sidan och bara sätta

874
00:38:40,610 --> 00:38:43,320
i detta, en länk tagg, som
motsats till namnet,

875
00:38:43,320 --> 00:38:44,700
inte ger dig en hyperlänk.

876
00:38:44,700 --> 00:38:49,150
Den länkar till en annan fil genom
ett href vars värde i det här fallet,

877
00:38:49,150 --> 00:38:51,586
är sök-3.css

878
00:38:51,586 --> 00:38:52,960
Så jag inser att vi kommer snabbt.

879
00:38:52,960 --> 00:38:54,600
Men allt jag gör är snäll
att flytta runt saker.

880
00:38:54,600 --> 00:38:55,760
Låt mig fritext-3.css.

881
00:38:55,760 --> 00:38:57,114

882
00:38:57,114 --> 00:38:58,530
Där är det, inget verkligen till det.

883
00:38:58,530 --> 00:39:02,270
Jag bara kopieras och klistras in den i ett nytt
fil, ungefär som vi räknade grejer ut

884
00:39:02,270 --> 00:39:03,509
till andra filer innan.

885
00:39:03,509 --> 00:39:05,300
Och result--
helt underwhelming--

886
00:39:05,300 --> 00:39:06,730
kommer att vara exakt samma.

887
00:39:06,730 --> 00:39:10,490
Men vi ska flytta toward-- nej, det är inte.

888
00:39:10,490 --> 00:39:11,930
Åh, jag vet varför.

889
00:39:11,930 --> 00:39:13,790
>> Så det verkar vara en bugg.

890
00:39:13,790 --> 00:39:15,010
Och det är i någon mening.

891
00:39:15,010 --> 00:39:17,730
Men låt mig öppna min fliken Nätverk.

892
00:39:17,730 --> 00:39:19,660
Låt mig ladda om sidan.

893
00:39:19,660 --> 00:39:23,315
Ah, varför är CSS inte tillämpas?

894
00:39:23,315 --> 00:39:26,920
Tja, den CSS-fil, på samma sätt, har
att vara läsbara, så att säga.

895
00:39:26,920 --> 00:39:28,440
Och det är för närvarande förbjuden.

896
00:39:28,440 --> 00:39:33,760
Så låt mig göra en chmod a + r
av stjärnan dot CSS-- whoops--

897
00:39:33,760 --> 00:39:37,067
vi är dot CSS är bara
filnamnstillägg för CSS-filer.

898
00:39:37,067 --> 00:39:38,900
Låt mig gå tillbaka till
min webbläsare och ladda om.

899
00:39:38,900 --> 00:39:40,910
OK, lite bättre.

900
00:39:40,910 --> 00:39:42,282
>> Låt mig göra en sista sak.

901
00:39:42,282 --> 00:39:42,990
På jakt-4.html.

902
00:39:42,990 --> 00:39:44,550

903
00:39:44,550 --> 00:39:48,220
Jag har en version som jag tänkte
var långt kylaren, om än mycket mer

904
00:39:48,220 --> 00:39:48,980
komplicerat.

905
00:39:48,980 --> 00:39:50,690
Låt oss titta på resultatet först.

906
00:39:50,690 --> 00:39:52,290
Stäng det här för att ge oss mer utrymme.

907
00:39:52,290 --> 00:39:54,275
Ändra detta för att söka-4, Enter.

908
00:39:54,275 --> 00:39:55,430

909
00:39:55,430 --> 00:39:57,200
>> Och nu en massa saker är trasiga.

910
00:39:57,200 --> 00:39:59,910
Jag kommer att gå tillbaka
in i min katalog här.

911
00:39:59,910 --> 00:40:04,190
Och nu ska jag bara ska göra
en chmod a + r på en file--

912
00:40:04,190 --> 00:40:07,450
eftersom jag vet att det exists-- heter
logo.gif, som är en bild.

913
00:40:07,450 --> 00:40:08,590
Och nu ladda om.

914
00:40:08,590 --> 00:40:11,040
Och wow-- så nu är jag
ganska nära, ärligt talat,

915
00:40:11,040 --> 00:40:15,860
gilla 1999 års version av Google, och
ärligt talat, 2014-versionen av Google,

916
00:40:15,860 --> 00:40:16,360
rätt?

917
00:40:16,360 --> 00:40:21,920
>> Så det är nu går till deras hemsida,
i slutändan, om jag söker efter katter.

918
00:40:21,920 --> 00:40:23,900
Och faktiskt är det.

919
00:40:23,900 --> 00:40:26,410
Men vad har jag gjort annorlunda
i denna version 4?

920
00:40:26,410 --> 00:40:28,020
Så vi kommer inte att uppehålla mig för mycket på det här.

921
00:40:28,020 --> 00:40:30,100
Du kommer att se detta i problem
ställa sju småningom.

922
00:40:30,100 --> 00:40:31,350
Men märker jag gjorde ett par saker.

923
00:40:31,350 --> 00:40:33,690
>> Jag presenterade en div
taggen, som är division,

924
00:40:33,690 --> 00:40:35,450
i samma anda som ett stycke tagg.

925
00:40:35,450 --> 00:40:38,220
Men en division är precis som, här är
en rektangulär osynlig region

926
00:40:38,220 --> 00:40:39,150
av skärmen.

927
00:40:39,150 --> 00:40:41,680
Låt oss ge det en unik
identifierare, en sidfot, precis

928
00:40:41,680 --> 00:40:44,700
så att vi kan tala om
den i vår HTML annat håll.

929
00:40:44,700 --> 00:40:47,952
Här är en annan div av sidan
vars ID kommer att vara nöjd.

930
00:40:47,952 --> 00:40:49,160
Det är innehållet på sidan.

931
00:40:49,160 --> 00:40:51,090
Och här uppe är rubriken på sidan.

932
00:40:51,090 --> 00:40:54,960
>> Med andra ord, jag har
huvudsakligen i HTML am mentalt

933
00:40:54,960 --> 00:40:57,700
tittar på det här webbsidan som
tre komponenter, en header

934
00:40:57,700 --> 00:41:01,200
här uppe med denna osynliga rektangel,
innehållet i mitten, och sedan

935
00:41:01,200 --> 00:41:04,800
sidfoten ner nedan, även
även om vi inte ser dessa saker.

936
00:41:04,800 --> 00:41:09,940
Eftersom jag vill i mitt huvud för
sida här, eller i en .css fil,

937
00:41:09,940 --> 00:41:11,460
Jag kan använda den här syntaxen.

938
00:41:11,460 --> 00:41:13,070
>> Nick är inte en tagg.

939
00:41:13,070 --> 00:41:17,060
Det är ett ID så det vänder
ut att genom att göra #header,

940
00:41:17,060 --> 00:41:20,840
Jag kan nu tillämpa en eller flera
egenskaper till header.

941
00:41:20,840 --> 00:41:24,130
Jag kan göra samma innehåll,
samma för innehåll här.

942
00:41:24,130 --> 00:41:27,230
>> Så till exempel, i sidfoten, meddelande
alla dessa egenskaper jag lägga.

943
00:41:27,230 --> 00:41:30,660
Och jag vet att de existerar bara genom att läsa
upp dokumentationen för CSS.

944
00:41:30,660 --> 00:41:33,450
Teckenstorlek kommer att bli smaller--
så några relativa teckenstorlek.

945
00:41:33,450 --> 00:41:34,741
Vikten kommer att bli fet.

946
00:41:34,741 --> 00:41:37,340
Margin-- hur många pixlar
runt det-- är 20 pixlar.

947
00:41:37,340 --> 00:41:38,590
Och det kommer att vara centrerad.

948
00:41:38,590 --> 00:41:40,256
>> Men just nu, sidan ser ut så här.

949
00:41:40,256 --> 00:41:42,840
Om jag inte är nöjd med
mitt exemplar just där,

950
00:41:42,840 --> 00:41:46,560
Jag skulle kunna göra något liknande färg röd.

951
00:41:46,560 --> 00:41:50,570
Och då kan jag spara detta, ladda om,
och nu har jag stiliserad sidfoten.

952
00:41:50,570 --> 00:41:54,130
Så det här är bara antyder makten
av vad du kan göra i en webbsida

953
00:41:54,130 --> 00:41:55,510
att ändra runt saker.

954
00:41:55,510 --> 00:41:59,080
>> Och ännu kallare än så här, om du vill
att rota runt med verkliga webbplatser,

955
00:41:59,080 --> 00:42:00,810
du kan inte permanent ändra dem.

956
00:42:00,810 --> 00:42:03,640
Men om jag öppnar upp
Chromes Inspector igen

957
00:42:03,640 --> 00:42:07,610
och jag går inte till vänster
Här, som visar Facebooks HTML,

958
00:42:07,610 --> 00:42:11,380
men visar på höger
sidan alla dess CSS,

959
00:42:11,380 --> 00:42:13,789
kan du antingen och
ändra saker i farten.

960
00:42:13,789 --> 00:42:15,080
Så låt mig gå vidare och göra det.

961
00:42:15,080 --> 00:42:18,670
>> Låt mig gå vidare och kontroll
klicka på denna slumpmässiga ord här,

962
00:42:18,670 --> 00:42:21,230
underteckna, och klicka Inspektera Element.

963
00:42:21,230 --> 00:42:25,130
Chrome hoppar mycket bekvämt till
h1 tagg som Facebook använder.

964
00:42:25,130 --> 00:42:27,290
Och märker här Facebook
har slags slött

965
00:42:27,290 --> 00:42:29,960
hårdkodad teckenstorlek som en egenskap här.

966
00:42:29,960 --> 00:42:33,530
>> Så cool sak är dock
att om jag faktiskt gå in här

967
00:42:33,530 --> 00:42:39,560
och säger, åh, Facebook, jag tycker inte om det
64 pixlar, kan vi nu ändra Facebook.

968
00:42:39,560 --> 00:42:42,590
Visst, vi bara ändra det
för mig personligen just nu.

969
00:42:42,590 --> 00:42:45,150
Men detta är bara ännu en
verktyg i vår verktygslåda

970
00:42:45,150 --> 00:42:48,360
det kommer att ge oss möjlighet att justera
och räkna ut och även diagnostisera

971
00:42:48,360 --> 00:42:49,729
frågor i våra egna webbsidor.

972
00:42:49,729 --> 00:42:52,270
Och vi kunde likaledes gå över
här, vilket är samma sak.

973
00:42:52,270 --> 00:42:55,830
Om du verkligen vill få lust, jag
menar, nu kan du verkligen mutera sidan

974
00:42:55,830 --> 00:42:57,380
och göra galna saker.

975
00:42:57,380 --> 00:42:59,870
>> Så varför är det allt bra?

976
00:42:59,870 --> 00:43:02,330
Tja, i slutändan är vi
kommer att vilja vara

977
00:43:02,330 --> 00:43:07,110
kunna skapa webbsidor som
drivs av vår egen rygg ändar,

978
00:43:07,110 --> 00:43:10,520
inte genom att bara Google och
outsourcing bakändan där.

979
00:43:10,520 --> 00:43:13,510
Vi vill faktiskt
värde, till exempel,

980
00:43:13,510 --> 00:43:18,830
av vår sökmotor agerande
skriva gå inte till någon annan,

981
00:43:18,830 --> 00:43:24,270
men till något liknande search.php,
där search.php ligger på vår egen server,

982
00:43:24,270 --> 00:43:25,670
inte på någon annans.

983
00:43:25,670 --> 00:43:30,316
>> Och så för att komma dit, vi faktiskt
behovet av att införa ett nytt språk.

984
00:43:30,316 --> 00:43:33,190
Så vi har redan tittat på en ny
språket här, eller två egentligen, HTML

985
00:43:33,190 --> 00:43:33,700
och CSS.

986
00:43:33,700 --> 00:43:36,330
Men de är egentligen bara
strukturella och estetiska språken.

987
00:43:36,330 --> 00:43:38,360
De är inte programmering
språk per se.

988
00:43:38,360 --> 00:43:41,160
Och det är ungefär lika mycket formella
tid som vi tillbringar på dem.

989
00:43:41,160 --> 00:43:44,910
Eftersom vi ska börja nu
att övergå till PHP.

990
00:43:44,910 --> 00:43:48,160
>> Så PHP är en faktisk
programmeringsspråk.

991
00:43:48,160 --> 00:43:50,750
Det är ett skriptspråk
i den meningen att det är

992
00:43:50,750 --> 00:43:52,855
tänkt att vara lättare vikt
än något som C.

993
00:43:52,855 --> 00:43:56,082
Och det är ett tolkat språk,
vilket innebär att det inte är sammanställt.

994
00:43:56,082 --> 00:43:58,790
Så i ett nötskal, vad gjorde detta
när vi använde ett språk som C

995
00:43:58,790 --> 00:44:00,290
och vi var tvungna att sammanställa den?

996
00:44:00,290 --> 00:44:02,120
Vad innebär det att
kompilera C källkod?

997
00:44:02,120 --> 00:44:03,864

998
00:44:03,864 --> 00:44:04,780
PUBLIK: [OHÖRBAR].

999
00:44:04,780 --> 00:44:06,184
DAVID J MALAN: Säg det igen?

1000
00:44:06,184 --> 00:44:07,100
PUBLIK: [OHÖRBAR].

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 visar den till binär.

1004
00:44:10,180 --> 00:44:14,200
Det visar den till ettor och nollor
från faktiska engelskliknande källkod.

1005
00:44:14,200 --> 00:44:16,424
Och då kan vi faktiskt
köra dessa nollor och ettor

1006
00:44:16,424 --> 00:44:18,840
genom att passera dem genom
CPU genom att dubbelklicka på en ikon

1007
00:44:18,840 --> 00:44:19,980
eller kör ett kommando.

1008
00:44:19,980 --> 00:44:23,770
>> PHP och Python och Ruby
och Perl och JavaScript

1009
00:44:23,770 --> 00:44:26,250
och klasar av andra
språk tolkas

1010
00:44:26,250 --> 00:44:29,290
språk, det vill säga
du behöver inte kompilera dem.

1011
00:44:29,290 --> 00:44:34,220
Snarare matar du dem som indata till
ett program som heter tolk.

1012
00:44:34,220 --> 00:44:36,640
Och det tolk,
som någon annan skrev,

1013
00:44:36,640 --> 00:44:40,930
läser din källkod topp till botten,
vänster till höger och bara tolkar

1014
00:44:40,930 --> 00:44:43,000
dessa linjer och gör vad du säger.

1015
00:44:43,000 --> 00:44:45,360
>> Så om du får
raden där det står print,

1016
00:44:45,360 --> 00:44:48,660
det behöver inte nödvändigtvis konvertera print
till motsvarande nollor och ettor.

1017
00:44:48,660 --> 00:44:51,910
Det har bara denna tolk som
ett stort om tillstånd som säger:

1018
00:44:51,910 --> 00:44:56,110
Om programmerarens instruktion är
print, gör sedan följande.

1019
00:44:56,110 --> 00:44:58,170
Så det tolkar det bara
med typ av resonemang

1020
00:44:58,170 --> 00:44:59,800
genom vad du säger den att göra.

1021
00:44:59,800 --> 00:45:01,320
>> Och PHP är ett av dessa språk.

1022
00:45:01,320 --> 00:45:05,310
Och PHP år sedan utformades
just för webbprogrammering.

1023
00:45:05,310 --> 00:45:08,160
Och det var från början en
mycket slarviga rörigt språk.

1024
00:45:08,160 --> 00:45:10,940
Och faktiskt, det finns en enorm
Mängden dåliga PHP-kod där ute.

1025
00:45:10,940 --> 00:45:13,520
Men själva språket
har mognat under åren,

1026
00:45:13,520 --> 00:45:16,200
så mycket så att nu är det
faktiskt en underbar nästa steg

1027
00:45:16,200 --> 00:45:19,970
pedagogiskt från C eftersom det är
så förbaskat bekant för allt

1028
00:45:19,970 --> 00:45:22,380
du just har sett under de senaste veckorna.

1029
00:45:22,380 --> 00:45:25,724
>> Den ena ursprungliga skillnaden vi får se
finns det finns ingen huvudfunktion längre.

1030
00:45:25,724 --> 00:45:28,890
När du börjar skriva kod, det är bara
kommer att få verkställas oavsett vad,

1031
00:45:28,890 --> 00:45:30,220
som vi ser i ett ögonblick.

1032
00:45:30,220 --> 00:45:33,320
Under tiden, här är vad en
variabel ser ut i PHP.

1033
00:45:33,320 --> 00:45:35,840
Det är lite annorlunda,
men bara knappt.

1034
00:45:35,840 --> 00:45:39,380
>> I PHP finns det inte stark typning.

1035
00:45:39,380 --> 00:45:41,430
Det finns vecka att skriva,
vilket bara innebär att det

1036
00:45:41,430 --> 00:45:44,030
är datatyper som strängar
och siffror och andra saker.

1037
00:45:44,030 --> 00:45:47,030
Men du behöver inte bry specificera
vad de är längre.

1038
00:45:47,030 --> 00:45:48,980
PHP siffror ut det åt dig.

1039
00:45:48,980 --> 00:45:52,030
Dollartecknet är bara ett beslut
att PHP människor gjort år

1040
00:45:52,030 --> 00:45:54,890
sedan så att varje variabel i PHP
bara börjar med ett dollartecken.

1041
00:45:54,890 --> 00:45:58,130
Det är faktiskt ganska användbart i det
den hoppar ut på dig lite mer.

1042
00:45:58,130 --> 00:46:01,315
>> Men efter det här
är ett tillstånd i PHP.

1043
00:46:01,315 --> 00:46:03,140

1044
00:46:03,140 --> 00:46:04,730
Vad är annorlunda jämfört med C?

1045
00:46:04,730 --> 00:46:07,180

1046
00:46:07,180 --> 00:46:09,600
Lura question-- ingenting,
som är faktiskt riktigt trevligt.

1047
00:46:09,600 --> 00:46:12,140
Booleska uttryck i PHP-- detsamma.

1048
00:46:12,140 --> 00:46:19,354
Booleska uttryck med och kontra
eller, switchar, slingor, slingor, loops-- OK,

1049
00:46:19,354 --> 00:46:20,270
den här är annorlunda.

1050
00:46:20,270 --> 00:46:22,660
>> Så visar det sig att det finns en
par andra funktioner i PHP.

1051
00:46:22,660 --> 00:46:25,243
En av dem är faktiskt denna,
vilket är fantastiskt bekvämt.

1052
00:46:25,243 --> 00:46:29,250
Om $ tal är en array som du har
förklarats tidigare i ett program,

1053
00:46:29,250 --> 00:46:33,350
du har denna fantasi för varje konstruktion
som istället för att göra allt detta

1054
00:46:33,350 --> 00:46:37,020
irriterande jag är lika med 0, I är
mindre än detta, [? I ++?]

1055
00:46:37,020 --> 00:46:40,320
för varje nummer som nummer, där varje
av dessa dollarteckenvärden är bara

1056
00:46:40,320 --> 00:46:42,790
en variabel, och den senare
du kan tänka på som I.

1057
00:46:42,790 --> 00:46:44,290
Du kan kalla det vad du vill.

1058
00:46:44,290 --> 00:46:45,770
Jag kallade det nummer.

1059
00:46:45,770 --> 00:46:48,825
Detta kommer att iterera över
arrayen kallas nummer.

1060
00:46:48,825 --> 00:46:51,200
Och på varje iteration, det
kommer att automatiskt uppdatera

1061
00:46:51,200 --> 00:46:54,340
för dig dollartecken nummer
variabel så att du hela tiden

1062
00:46:54,340 --> 00:46:58,210
ha tillgång till den variabel som du vill
utan att behöva göra något hakparentes

1063
00:46:58,210 --> 00:47:00,980
notation eller indexering i en array.

1064
00:47:00,980 --> 00:47:04,950
>> Utöver detta har vi även saker som
matriser, som ser nästan samma,

1065
00:47:04,950 --> 00:47:08,210
förutom att det är väldigt vanligt, eftersom vi ska
se, både i PHP och Javascript

1066
00:47:08,210 --> 00:47:10,750
till pre initiera en array
med hjälp av hakparenteser.

1067
00:47:10,750 --> 00:47:12,040
C använder klammerparenteser.

1068
00:47:12,040 --> 00:47:15,330
Så det är lite annorlunda, även om
vi verkligen använder inte det tricket mycket.

1069
00:47:15,330 --> 00:47:20,090
>> Men ännu mer kraftfullt,
PHP har associativa arrayer,

1070
00:47:20,090 --> 00:47:23,100
vilket är ett finare sätt
att säga hashtabeller.

1071
00:47:23,100 --> 00:47:31,610
Faktum är att om du vill deklarera en hash
bord i PHP, till skillnad från i C-- hur många

1072
00:47:31,610 --> 00:47:34,775
kodrader tog det att
faktiskt genomföra en hashtabell i C?

1073
00:47:34,775 --> 00:47:38,310
Eller hur många rader kod är det
tar att genomföra en hashtabell i C?

1074
00:47:38,310 --> 00:47:39,820
Så det är nog en hel del, eller hur?

1075
00:47:39,820 --> 00:47:41,680
Det är några dussin, kanske 100 eller 200.

1076
00:47:41,680 --> 00:47:42,980
Det är triviala.

1077
00:47:42,980 --> 00:47:45,420
Eller det är på väg att bli, eftersom
Du kommer snart att se, icke-trivial

1078
00:47:45,420 --> 00:47:48,080
att genomföra en hashtabell
[OHÖRBAR] och även ett försök.

1079
00:47:48,080 --> 00:47:50,580
Men i PHP-- och ärligt talat, jag
förmodligen inte berätta detta

1080
00:47:50,580 --> 00:47:53,630
tills Monday-- i PHP, om
du vill ha ett bord, gjort.

1081
00:47:53,630 --> 00:47:56,431
Det är en hash table-- så
med en rad kod.

1082
00:47:56,431 --> 00:47:56,930
Och

1083
00:47:56,930 --> 00:47:58,810
>> Många språk gör det.

1084
00:47:58,810 --> 00:48:00,190
Ha kul med pset fem.

1085
00:48:00,190 --> 00:48:01,980
Så många språk gör detta.

1086
00:48:01,980 --> 00:48:03,050

1087
00:48:03,050 --> 00:48:06,140
De ger dig dessa abstraktioner
att andra människor, andra programmerare,

1088
00:48:06,140 --> 00:48:09,870
har skapat för dig så att
du kan stå på sina axlar

1089
00:48:09,870 --> 00:48:13,290
och börja använda idéer som är super
övertygande, som hashtabeller och träd

1090
00:48:13,290 --> 00:48:14,140
och försöker.

1091
00:48:14,140 --> 00:48:17,790
Men du behöver inte nödvändigtvis
genomföra dessa saker själv.

1092
00:48:17,790 --> 00:48:20,850
>> Och så i slutändan, vad
vi kommer att använda PHP för

1093
00:48:20,850 --> 00:48:23,580
är potentiellt skriva program
av den s.k. kommandorad.

1094
00:48:23,580 --> 00:48:26,600
Vi kan återskapa alla program
Vi har skrivit den här terminen så här långt,

1095
00:48:26,600 --> 00:48:30,410
utom kanske Breakout som använder SPL,
som är specifik för C vid tillfället.

1096
00:48:30,410 --> 00:48:33,100
Men alla andra problem inställt,
säkert Mario och Cesar

1097
00:48:33,100 --> 00:48:35,300
och Vigenère och
[? Crack?] Och framåt, vi

1098
00:48:35,300 --> 00:48:39,520
kunde åter genomföra i PHP, och
nog lite lättare.

1099
00:48:39,520 --> 00:48:43,050
>> Men vad vi i slutändan kommer
att använda PHP för är webbprogrammering.

1100
00:48:43,050 --> 00:48:46,420
Och vi kommer att presentera nästa
vecka en mental modell, ett paradigm som kallas

1101
00:48:46,420 --> 00:48:49,610
MVC, Model View Controller,
som om du har gjort programmering

1102
00:48:49,610 --> 00:48:51,610
tidigare i Python eller
Ruby eller någon annanstans, du

1103
00:48:51,610 --> 00:48:54,112
kanske vet av denna lag med
Skenor och Django och liknande.

1104
00:48:54,112 --> 00:48:55,820
Men om du är ny på
detta också, kommer du att se

1105
00:48:55,820 --> 00:48:59,652
att detta faktiskt är en mycket naturlig
förlängning av faktorisering

1106
00:48:59,652 --> 00:49:01,360
och den typ av konstruktion
kod som vi har

1107
00:49:01,360 --> 00:49:04,670
gjort i C. Vi ska nu
tillämpa vissa av dessa lektioner till PHP

1108
00:49:04,670 --> 00:49:07,190
så att i slutändan är vi
genomföra våra egna webbplatser.

1109
00:49:07,190 --> 00:49:09,080
Och om du är typ av
hypnotiserade eller förvånad

1110
00:49:09,080 --> 00:49:10,954
att vi kommer att göra
alla av så snabbt,

1111
00:49:10,954 --> 00:49:13,410
inser att nästan varje
termin, nästan 90%

1112
00:49:13,410 --> 00:49:16,560
av studenter CS50, inklusive sådana
som aldrig har programmerat förut,

1113
00:49:16,560 --> 00:49:20,329
sluta göra examensarbeten som
är baserade på webbprogrammering.

1114
00:49:20,329 --> 00:49:23,120
Och så kommer du att se att avkastningen
är höga i de kommande veckorna.

1115
00:49:23,120 --> 00:49:24,965
Så vi kommer att se dig sedan i måndags.

1116
00:49:24,965 --> 00:49:27,260

1117
00:49:27,260 --> 00:49:30,120
>> TALARE 1: Och nu, Djup
Tankar från Daven Farnham.

1118
00:49:30,120 --> 00:49:34,055

1119
00:49:34,055 --> 00:49:34,780
Hashtabeller.

1120
00:49:34,780 --> 00:49:37,180

1121
00:49:37,180 --> 00:49:38,402
>> [LAUGHTER]

1122
00:49:38,402 --> 00:49:38,902