1
00:00:00,000 --> 00:00:11,470

2
00:00:11,470 --> 00:00:12,764
>> LUIDSPREKER 1: Alle, toch welkom terug.

3
00:00:12,764 --> 00:00:14,140
Dit is CS50.

4
00:00:14,140 --> 00:00:16,800
En dit is het begin van de week negen.

5
00:00:16,800 --> 00:00:19,960
Dit is het begin van de rest van
uw tijd in CS50, waarin we

6
00:00:19,960 --> 00:00:23,170
overgang nu tenslotte het web
aspect van de cursus, waar je

7
00:00:23,170 --> 00:00:26,200
vinden dat een groot deel van de fundamenten die
we hebben al exporteren voor weken

8
00:00:26,200 --> 00:00:29,270
nog terug op bezoek komen,
of achtervolgen, ons.

9
00:00:29,270 --> 00:00:33,440
Maar nu, zult u een vinden dat het
orde van grootte beter

10
00:00:33,440 --> 00:00:36,540
volbrengen bepaalde taken en
oplossen van bepaalde problemen -

11
00:00:36,540 --> 00:00:41,050
zozeer dat zelfs als je dacht
bepaald probleem sets waren leuk in hun

12
00:00:41,050 --> 00:00:44,200
eigen manier, ik denk dat je zult vinden
dat p set 7, blz. set 8, en vervolgens,

13
00:00:44,200 --> 00:00:47,990
uiteindelijk zal het definitieve project
des te meer verheugend, want je zult

14
00:00:47,990 --> 00:00:51,830
vinden dat we beginnen te nemen voor lief
nu dingen zoals geheugenbeheer, en

15
00:00:51,830 --> 00:00:54,190
pointers, en wat is er
op onder de motorkap.

16
00:00:54,190 --> 00:00:57,310
En nogmaals, thematisch, al het hele
semester is deze gelaagdheid

17
00:00:57,310 --> 00:00:58,030
en gelaagdheid.

18
00:00:58,030 --> 00:01:00,530
En nu zijn we soort van omhoog
Hier, staande op de

19
00:01:00,530 --> 00:01:01,930
schouders weken verleden.

20
00:01:01,930 --> 00:01:05,360
>> Nu, herinneren van de vorige keer dat we
sprak over hoe het internet werkt.

21
00:01:05,360 --> 00:01:08,120
En dit was misschien een
oversimplificatie, maar vergeet niet dat

22
00:01:08,120 --> 00:01:12,960
elke computer in de wereld heeft een IP-
aan te pakken, maar dat is een beetje een

23
00:01:12,960 --> 00:01:14,570
oversimplificatie nog.

24
00:01:14,570 --> 00:01:18,180
En deze adressen worden gebruikt om unieke
identificeren machines zodat

25
00:01:18,180 --> 00:01:22,010
wanneer u informatie, of pakketten, stuur
zo te zeggen, ze kunnen een oorsprong hebben

26
00:01:22,010 --> 00:01:24,000
adres en een bestemmingsadres.

27
00:01:24,000 --> 00:01:27,830
En die zelfde IP-adressen kunnen gebruikt worden
zowel voor een goede en ook voor het kwaad,

28
00:01:27,830 --> 00:01:29,270
u bijhouden, bijvoorbeeld.

29
00:01:29,270 --> 00:01:32,200
In feite, een ieder van u met een laptop
Open nu, of een telefoon in je

30
00:01:32,200 --> 00:01:35,070
zak, heeft een IP-adres
Op Harvard netwerk.

31
00:01:35,070 --> 00:01:39,120
En het is niet zo moeilijk te
correleren die aan wie en waar je

32
00:01:39,120 --> 00:01:40,180
zijn deze dagen.

33
00:01:40,180 --> 00:01:42,090
Maar daarover misschien
in de toekomst.

34
00:01:42,090 --> 00:01:46,510
>> Nu dacht ik dat ik zou terug te brengen sommige
herinneringen van [? verbeteren?] en geeft u

35
00:01:46,510 --> 00:01:49,360
een andere clip van een show die u
Misschien vindt u vertrouwd.

36
00:01:49,360 --> 00:01:52,710
Als we konden de lichten dimmen
voor slechts een paar seconden.

37
00:01:52,710 --> 00:01:53,960
De show Numb3rs.

38
00:01:53,960 --> 00:01:57,510

39
00:01:57,510 --> 00:02:00,540
>> SPEAKER 2: Het is een 32-bit IPP4 adres.

40
00:02:00,540 --> 00:02:01,610
>> SPEAKER 3: IPP, zoals in internet?

41
00:02:01,610 --> 00:02:02,968
>> SPEAKER 2: Prive-netwerk.

42
00:02:02,968 --> 00:02:04,960
Om privenetwerk Amita's.

43
00:02:04,960 --> 00:02:16,930

44
00:02:16,930 --> 00:02:19,602
Ze is zo geweldig.

45
00:02:19,602 --> 00:02:21,030
>> SPEAKER 3: Kom op, Charlie.

46
00:02:21,030 --> 00:02:21,490
>> SPEAKER 2: Het is.

47
00:02:21,490 --> 00:02:22,470
Een spiegel IP-adres.

48
00:02:22,470 --> 00:02:27,680
Ze laat ons kijken naar wat
ze doet in real time.

49
00:02:27,680 --> 00:02:30,930
>> LUIDSPREKER 1: OK, dus een paar dingen
mis met deze foto.

50
00:02:30,930 --> 00:02:32,920
Dus een, en deze aanvaardbaar is,
dit is eigenlijk

51
00:02:32,920 --> 00:02:34,400
geen geldig IP-adres.

52
00:02:34,400 --> 00:02:38,190
Een geldig IP-adres moet worden getallen
de vorm w.x.y.z, waarbij elk

53
00:02:38,190 --> 00:02:40,000
deze brieven 0 tot 255.

54
00:02:40,000 --> 00:02:42,330
Maar dat is prima want net als de
films waar ze fake telefoonnummers,

55
00:02:42,330 --> 00:02:43,520
ze nep IP-adressen.

56
00:02:43,520 --> 00:02:45,230
Je hoeft niet echt geraakt echte servers.

57
00:02:45,230 --> 00:02:46,760
>> Maar let op, dit is een browser.

58
00:02:46,760 --> 00:02:50,760
En browsers starten niet uitvoeren
computercode als deze.

59
00:02:50,760 --> 00:02:54,230
En als we kijken een beetje dieper, merken
dat de taal die ze zien

60
00:02:54,230 --> 00:02:57,040
op het scherm is een taal genaamd
Objective C, die de taal

61
00:02:57,040 --> 00:02:59,520
welke iPhone-apps zijn geschreven,
vooral degenen met

62
00:02:59,520 --> 00:03:03,540
kleurpotloden, zoals je kunt zien uit
de broncode hier.

63
00:03:03,540 --> 00:03:06,600

64
00:03:06,600 --> 00:03:07,560
>> OK, ik dacht dat dit was grappig.

65
00:03:07,560 --> 00:03:12,240
Dus dit stukje code heeft absoluut
niets te maken met wat deze

66
00:03:12,240 --> 00:03:13,940
bepaalde episode was ongeveer.

67
00:03:13,940 --> 00:03:17,590
Dus de grap is een soort van op de mensen
nemen voor deze verleend.

68
00:03:17,590 --> 00:03:20,220
Maar dit is niet zo moeilijk te krijgen
deze technische gegevens rechts.

69
00:03:20,220 --> 00:03:21,980
En ik wil u aanmoedigen.

70
00:03:21,980 --> 00:03:25,530
En eigenlijk, misschien 50 zeer goed verwennen
veel tv-shows en films of u

71
00:03:25,530 --> 00:03:27,320
want je zult zien dat het gewoon
niet mogelijk wat ze

72
00:03:27,320 --> 00:03:28,630
doet op het scherm.

73
00:03:28,630 --> 00:03:31,750
Maar inderdaad, dit is de code die u
kan het zien in een iPhone-applicatie

74
00:03:31,750 --> 00:03:33,640
of Mac OS-toepassing.

75
00:03:33,640 --> 00:03:35,685
Het heeft helemaal niets
te maken met de beveiliging.

76
00:03:35,685 --> 00:03:38,610
Dus houd een oogje in het zeil voor meer
zulke leuke dingen als dat.

77
00:03:38,610 --> 00:03:42,720
>> Maar vandaag beginnen we te duiken in echt
diep om een ​​hele reeks talen.

78
00:03:42,720 --> 00:03:45,410
Een inderdaad, een van de overkoepelende
afhaalrestaurants van dit gedeelte van de

79
00:03:45,410 --> 00:03:51,815
Natuurlijk is het niet om te leren hoe te programmeren
in PHP, niet om SQL te leren per se, niet

80
00:03:51,815 --> 00:03:58,100
om JavaScript te leren per se, maar eerder
om jezelf te leren hoe om te leren

81
00:03:58,100 --> 00:04:02,030
zelf nieuwe talen want, inderdaad,
beginnen we nu de te nemen

82
00:04:02,030 --> 00:04:06,020
zijwieltjes af zodat na
end cursus, hoef je niet verwachten dat een 20

83
00:04:06,020 --> 00:04:08,890
pagina specificatie om u te vertellen hoe
om een ​​programma te implementeren.

84
00:04:08,890 --> 00:04:12,970
Je hebt genoeg ingrediënten in uw
geest, en genoeg gereedschap in uw gereedschap

85
00:04:12,970 --> 00:04:15,750
kit, waarmee te beginnen met het bouwen van
oplossingen voor problemen die van belang zijn

86
00:04:15,750 --> 00:04:19,130
u voor sommige studenten groep, voor sommige
onderzoeksproject, of echt iets

87
00:04:19,130 --> 00:04:20,140
voor u van belang.

88
00:04:20,140 --> 00:04:24,150
>> Zodat de richting van dat doel, herinneren dat dit
het beeld dat we trok het vorige keer.

89
00:04:24,150 --> 00:04:27,620
En dit is twee computers, opdrachtgever en
verbreken, met elkaar te praten.

90
00:04:27,620 --> 00:04:31,130
En het protocol, de taal, om zo te
spreken, dat deze twee computers gebeuren

91
00:04:31,130 --> 00:04:33,220
te spreken heet HTTP.

92
00:04:33,220 --> 00:04:37,730
En dat is nog maar het protocol dat gebruikt wordt door
computers om informatie over te dragen dan

93
00:04:37,730 --> 00:04:38,710
het world wide web.

94
00:04:38,710 --> 00:04:41,770
Het web, is natuurlijk slechts een dienst
die draait bovenop

95
00:04:41,770 --> 00:04:43,000
zogenaamde internet.

96
00:04:43,000 --> 00:04:48,660
Wat is een andere dienst beschikbaar is op
top van het internet deze dagen?

97
00:04:48,660 --> 00:04:51,600
Enkele andere protocol of - wat is dat?

98
00:04:51,600 --> 00:04:52,300
>> PUBLIEK: FTP.

99
00:04:52,300 --> 00:04:52,790
>> LUIDSPREKER 1: FTP.

100
00:04:52,790 --> 00:04:54,630
Dus File Transfer Protocol is een andere.

101
00:04:54,630 --> 00:04:56,050
De meesten van jullie waarschijnlijk niet hebt gebruikt.

102
00:04:56,050 --> 00:04:58,830
Maar de meeste van jullie waarschijnlijk hebben gebruikt
dingen zoals Gchat, of instant

103
00:04:58,830 --> 00:05:00,970
messaging algemeen,
zeker email.

104
00:05:00,970 --> 00:05:04,470
En die ook zijn diensten die erop draaien
bovenaan internet omdat in de

105
00:05:04,470 --> 00:05:08,180
Uiteindelijk, het internet zelf
eigenlijk alleen maar de gegevens van punt A te krijgen

106
00:05:08,180 --> 00:05:12,480
punt B. En het maakt gebruik van een aantal
deeltjes zelf, een van hen of beide

107
00:05:12,480 --> 00:05:17,340
van hen de meest algemeen genoemd TCP / IP,
dat wil zeggen dat een computer

108
00:05:17,340 --> 00:05:19,960
internet daadwerkelijk kan doen
verschillende dingen, e-mail,

109
00:05:19,960 --> 00:05:20,980
en web, enzovoort.

110
00:05:20,980 --> 00:05:22,220
Google doet veel van deze.

111
00:05:22,220 --> 00:05:26,310
Dus hoe zijn deze diensten uniek
geïdentificeerd, hebben we zeggen, op een computer

112
00:05:26,310 --> 00:05:29,080
dat eigenlijk zou moeten doen
meerdere dingen?

113
00:05:29,080 --> 00:05:29,860
>> Het poortnummer.

114
00:05:29,860 --> 00:05:34,180
En dit zijn slechts willekeurige menselijke
conventies zoals 80 is web, 443 is

115
00:05:34,180 --> 00:05:36,580
versleutelde web, 25 is e-mail.

116
00:05:36,580 --> 00:05:38,230
En er is een trossen van anderen.

117
00:05:38,230 --> 00:05:41,860
En die nummers zijn gewoon opgenomen in
die pakketten van informatie, die

118
00:05:41,860 --> 00:05:46,230
virtual envelope, die eigenlijk
bevatte een verzoek of een antwoord.

119
00:05:46,230 --> 00:05:51,300
>> Dus als je terug een reactie van de
web, meestal, je ziet geen

120
00:05:51,300 --> 00:05:54,780
nummers dan ook in termen van de
statuscode van de reactie.

121
00:05:54,780 --> 00:05:56,770
Je hoeft niet echt te zien van de
innerlijke werking van de

122
00:05:56,770 --> 00:05:58,090
pakketten die terug komen.

123
00:05:58,090 --> 00:05:59,860
Maar 200 inderdaad betekenen OK.

124
00:05:59,860 --> 00:06:01,530
En dat betekent dat alles goed is.

125
00:06:01,530 --> 00:06:02,870
Je zou kunnen hebben gezien een aantal van deze.

126
00:06:02,870 --> 00:06:05,710
Dat is waarschijnlijk de meest voorkomende
je hebt gezien op het web?

127
00:06:05,710 --> 00:06:05,980
>> 404.

128
00:06:05,980 --> 00:06:07,330
Het betekent gewoon dat bestand niet gevonden.

129
00:06:07,330 --> 00:06:08,270
Het betekent dat iemand het verpest.

130
00:06:08,270 --> 00:06:11,450
Je deed door mistyping de URL, of iemand
anders deed door het geven u een

131
00:06:11,450 --> 00:06:15,100
ongeldige URL, of ze verwijderde de
bestand en de URL is nog steeds

132
00:06:15,100 --> 00:06:16,130
wordt gebruikt door mensen.

133
00:06:16,130 --> 00:06:19,670
Dus een aantal redenen kunnen verklaren
waarom een ​​bestand niet is gevonden.

134
00:06:19,670 --> 00:06:22,990
En je zult zien, in de komende weken,
deze andere foutcodes, en je zult

135
00:06:22,990 --> 00:06:24,195
profiteren van een aantal van hen.

136
00:06:24,195 --> 00:06:25,760
Het ergste is 500.

137
00:06:25,760 --> 00:06:29,820
Als je een 500 fout in de code die je hebt
geschreven, denk dat als een soort van de

138
00:06:29,820 --> 00:06:33,290
analoog van seg fouten in de
wereld van het web programmeren.

139
00:06:33,290 --> 00:06:34,560
Het is niet zo nijpend.

140
00:06:34,560 --> 00:06:36,660
Maar het betekent alleen dat, ergens,
je verpest.

141
00:06:36,660 --> 00:06:38,260
Dus kijk uit naar deze.

142
00:06:38,260 --> 00:06:39,910
>> Maar laten we eens kijken of we kunnen
zien deze in context.

143
00:06:39,910 --> 00:06:43,460
Laat me gaan naar een browser hier
en doe het volgende.

144
00:06:43,460 --> 00:06:45,710
Dus dit is Chrome, die toevallig
in het apparaat worden geplaatst.

145
00:06:45,710 --> 00:06:49,410
Maar de meeste elke browser deze dagen heeft
sommige gelijkwaardige functionaliteit.

146
00:06:49,410 --> 00:06:52,610
Ik ga om te gaan upmenu de Chrome's,
en ga naar Extra, en ik ga om te gaan

147
00:06:52,610 --> 00:06:53,990
te Developer Tools.

148
00:06:53,990 --> 00:06:57,040
En je zult zien dat dit kleine paneel
geopend in de bodem van het venster.

149
00:06:57,040 --> 00:07:00,190
Andere snelkoppeling, om eerlijk te zijn, dat ik
meestal zelf gebruik is om Klik met de rechtermuisknop

150
00:07:00,190 --> 00:07:04,370
of control klik ergens op het web
pagina en ga je gewoon naar Element inspecteren.

151
00:07:04,370 --> 00:07:07,440
En dat zal niet alleen open
Deze hebben voor u.

152
00:07:07,440 --> 00:07:10,230
Ook zal openen, specifiek,
Elementen portie op

153
00:07:10,230 --> 00:07:11,430
de linkerkant.

154
00:07:11,430 --> 00:07:12,460
>> Dus we zijn natuurlijk het zien van Google.

155
00:07:12,460 --> 00:07:13,930
Ze veranderden hun logo vandaag.

156
00:07:13,930 --> 00:07:20,200
Maar op als ik scroll naar beneden hier, merken
dat onder Elements, zie je

157
00:07:20,200 --> 00:07:23,460
wat heet HTML, HyperText Markup
Taal, en dit is de taal

158
00:07:23,460 --> 00:07:26,000
dat deze en alle webpagina's,
echt, zijn geschreven inch

159
00:07:26,000 --> 00:07:28,950
Maar het is eigenlijk geformatteerd voor
ons zo veel meer readably

160
00:07:28,950 --> 00:07:29,970
dan normaal.

161
00:07:29,970 --> 00:07:34,810
In feite, als ik uit te zoomen, en ik plaats
gewoon Klik met de rechtermuisknop of bestuur Click

162
00:07:34,810 --> 00:07:39,630
Klik op de pagina, en ga dan naar Beeld
Pagina Bron, dit is letterlijk wat

163
00:07:39,630 --> 00:07:42,150
Google stuurde naar mijn browser.

164
00:07:42,150 --> 00:07:46,480
>> Dus een persoon of personen die schreef
Google.com gebruik van deze broncode.

165
00:07:46,480 --> 00:07:47,790
De meeste van deze is geen HTML.

166
00:07:47,790 --> 00:07:49,340
Het is eigenlijk een taal genaamd
JavaScript die

167
00:07:49,340 --> 00:07:50,880
we komen op woensdag.

168
00:07:50,880 --> 00:07:55,580
Maar wat Chrome, en wat iedere browser
voor ons kan doen, is een soort van zien

169
00:07:55,580 --> 00:07:59,610
langs alle afleidingen van de
gek syntax, en plaats witruimte

170
00:07:59,610 --> 00:08:02,940
voor ons, en zelfs syntax highlight,
of inkleuren dingen voor ons.

171
00:08:02,940 --> 00:08:06,470
Dus je zult zien dat deze zogenaamde
developer tools ingebouwd in browsers

172
00:08:06,470 --> 00:08:10,830
zal uw leven zo, zo veel makkelijker
want je kunt verkennen, via dit menu

173
00:08:10,830 --> 00:08:13,940
-interface, precies wat de onderliggende
broncode is voor

174
00:08:13,940 --> 00:08:15,750
elke pagina op het internet.

175
00:08:15,750 --> 00:08:19,070
En inderdaad, dit is een van de meest
effectieve manieren om te leren hoe dat te doen

176
00:08:19,070 --> 00:08:22,860
iets nieuws, tenminste als de pagina
is niet zo complex als te overweldigen, wordt

177
00:08:22,860 --> 00:08:26,700
om te beginnen rondneuzen het is HTML, kijk
op zijn zogenaamde CSS, waar we komen

178
00:08:26,700 --> 00:08:30,310
om een ​​beetje ook, om een ​​te krijgen
inzicht in hoe die programmeur

179
00:08:30,310 --> 00:08:33,480
geïmplementeerd enkele bijzondere
kenmerk van de pagina.

180
00:08:33,480 --> 00:08:36,530
>> Maar meer technisch interessanter rechts
Nu het gaat om dit te zijn.

181
00:08:36,530 --> 00:08:39,429
Als ik ga naar het tabblad Netwerk,
laten we nu deze wissen.

182
00:08:39,429 --> 00:08:43,429
Ik ga naar de kleine klik
kruis symbool hier, en vervolgens

183
00:08:43,429 --> 00:08:45,630
ga naar een andere website.

184
00:08:45,630 --> 00:08:48,430
En ik ben gewoon gaan typen
in Facebook.com.

185
00:08:48,430 --> 00:08:51,940
Geen HTTP, geen HTTPS, geen WWW.

186
00:08:51,940 --> 00:08:53,850
Laten we eens echt zien wat er hier gebeurt.

187
00:08:53,850 --> 00:08:55,030
>> Enter.

188
00:08:55,030 --> 00:08:58,480
Nu merken een hele hoop dingen gewoon
verscheen in het onderste paneel, in

189
00:08:58,480 --> 00:09:00,285
Naast de webpagina
die in de top.

190
00:09:00,285 --> 00:09:04,890
Ik ga vooruit te bladeren in de
Tabblad Netwerk hier, en ik ga

191
00:09:04,890 --> 00:09:06,080
Klik op de eerste rij.

192
00:09:06,080 --> 00:09:10,580
Wat deze tool gaat aan ons te openbaren
is ieder van de HTTP-verzoeken

193
00:09:10,580 --> 00:09:13,550
die snel ging gewoon terug en
weer tussen mijn browser

194
00:09:13,550 --> 00:09:14,930
en de server van Facebook.

195
00:09:14,930 --> 00:09:17,830
En dus elk van die rijen
staat voor een dergelijk verzoek of

196
00:09:17,830 --> 00:09:20,970
respons, een of meer van
deze virtuele envelop.

197
00:09:20,970 --> 00:09:24,080
Of meer terloops, het is als een persoon
als een persoon een klant in de

198
00:09:24,080 --> 00:09:26,710
restaurant, vragen voor iets
opnieuw, en opnieuw, en opnieuw.

199
00:09:26,710 --> 00:09:29,400
En de ober blijft brengen
terug een voor een.

200
00:09:29,400 --> 00:09:33,850
>> Dus nu, als ik inzoomen op deze, merkt
en dit zal de soort ding te zijn

201
00:09:33,850 --> 00:09:36,600
dat u bent van harte welkom om en aangemoedigd
om te spelen met op uw eigen, want we

202
00:09:36,600 --> 00:09:38,150
zal niet gaan door alles
in groot detail.

203
00:09:38,150 --> 00:09:40,070
Maar merkt dat er een
paar sub tabs hier -

204
00:09:40,070 --> 00:09:43,700
Headers, Voorbeeld, Response,
Koekjes, en timing.

205
00:09:43,700 --> 00:09:48,280
Ik ben gewoon gaan kijken naar headers
voor nu want dit zijn kleine

206
00:09:48,280 --> 00:09:53,600
ingrediënten in de envelop
helpen data naar en van plaatsen.

207
00:09:53,600 --> 00:09:57,590
>> Dus laat me eerst hierop klikt, bekijken
Bron naast Request Headers.

208
00:09:57,590 --> 00:10:01,910
Er is het verzoek dat mijn browser,
Chrome, in dit geval binnenin verstuurd

209
00:10:01,910 --> 00:10:02,910
die virtuele envelop.

210
00:10:02,910 --> 00:10:04,800
Je zult vorige week herinneren I
handmatig getypt terwijl

211
00:10:04,800 --> 00:10:06,380
doen alsof ze een browser zijn.

212
00:10:06,380 --> 00:10:09,980
Dan is de server die het herinnerde
op zoek naar de host genoemd

213
00:10:09,980 --> 00:10:10,835
Facebook.com.

214
00:10:10,835 --> 00:10:13,630
En dan is er nog een beetje meer geheimzinnige
informatie die we zwaaien

215
00:10:13,630 --> 00:10:14,830
onze handen voor nu.

216
00:10:14,830 --> 00:10:18,640
>> Maar als ik begin nu in beneden scrollen
dit venster, laat me naar de

217
00:10:18,640 --> 00:10:19,980
response headers.

218
00:10:19,980 --> 00:10:23,270
Dit was wat er in de virtuele
envelop die terug uit kwam

219
00:10:23,270 --> 00:10:24,095
Facebook.com.

220
00:10:24,095 --> 00:10:27,390
En als ik klik Bron bekijken just
om de ruwe tekst van het zien,

221
00:10:27,390 --> 00:10:28,400
merken een paar dingen.

222
00:10:28,400 --> 00:10:32,130
Een, Facebook spreekt ook dezelfde
protocol, versie 1.1 daarvan.

223
00:10:32,130 --> 00:10:33,390
Dus dat is leuk.

224
00:10:33,390 --> 00:10:36,820
Maar statuscode 301,
die definitief.

225
00:10:36,820 --> 00:10:38,880
>> Nou, waar de heck heb Facebook gaan?

226
00:10:38,880 --> 00:10:40,430
Wat is dit proberen over te brengen aan ons?

227
00:10:40,430 --> 00:10:44,310
Nou, let hier beneden is er nog een
header genaamd Location.

228
00:10:44,310 --> 00:10:51,050
Dus waarom is Facebook me te vertellen dat ze
definitief naar die URL

229
00:10:51,050 --> 00:10:53,580
naast de locatie?

230
00:10:53,580 --> 00:10:54,962
Ik vergat het www.

231
00:10:54,962 --> 00:10:56,250
>> Dus dat was mijn keuze.

232
00:10:56,250 --> 00:11:00,450
In feite zijn de meeste van ons zelden, waarschijnlijk,
Typ www.whatever.com deze dagen.

233
00:11:00,450 --> 00:11:03,390
Maar het blijkt een systeembeheerder,
zoals Facebook's, kan

234
00:11:03,390 --> 00:11:06,800
hun servers te configureren op een zodanige wijze
die ofwel Facebook.com werkt, of

235
00:11:06,800 --> 00:11:12,450
www.Facebook.com werkt, of, eigenlijk,
dergelijke voorvoegsel voor hun

236
00:11:12,450 --> 00:11:13,210
domeinnaam.

237
00:11:13,210 --> 00:11:14,500
Dus hebben ze dat voor ons gedaan.

238
00:11:14,500 --> 00:11:16,910
En ze zijn ons buigen, waarschijnlijk
voor een aantal technische,

239
00:11:16,910 --> 00:11:18,100
sommige marketing redenen.

240
00:11:18,100 --> 00:11:21,570
Ze willen gewoon canonicalize
op www.Facebook.com.

241
00:11:21,570 --> 00:11:24,040
>> Maar dat is niet helemaal het.

242
00:11:24,040 --> 00:11:28,560
Als ik naar beneden scrollen hier, laten we
zien wat er gebeurt.

243
00:11:28,560 --> 00:11:30,810
Dit is me te vertellen dat we
definitief naar

244
00:11:30,810 --> 00:11:33,450
http://www.Facebook.com.

245
00:11:33,450 --> 00:11:36,620
Dus laten we eens kijken naar het tweede verzoek
dat mijn browser stuurt.

246
00:11:36,620 --> 00:11:40,070
Helaas, het lijkt erop dat Facebook
heeft wederom verhuisd omdat de tweede

247
00:11:40,070 --> 00:11:44,420
verzoek, door het selecteren van die URL in plaats daarvan,
zegt dat ook, verhuisde

248
00:11:44,420 --> 00:11:45,010
permanent.

249
00:11:45,010 --> 00:11:48,140
En laat me naar beneden scrollen hier
de antwoordheaders.

250
00:11:48,140 --> 00:11:51,530
Waar heeft Facebook nu verdwenen?

251
00:11:51,530 --> 00:11:52,680
>> Zo HTTPS.

252
00:11:52,680 --> 00:11:56,130
Dus nu Facebook is begonnen,
met name in het licht van de huidige

253
00:11:56,130 --> 00:11:59,750
gebeurtenissen in de afgelopen maanden, in het bijzonder en
Ook in de afgelopen paar jaar

254
00:11:59,750 --> 00:12:03,670
al hun gebruikers te dwingen in een goede
manier, om HTTPS te gebruiken, dat is meer

255
00:12:03,670 --> 00:12:06,210
veilig, hoewel niet geheel veilig.

256
00:12:06,210 --> 00:12:10,000
En dus nu mijn pagina, mijn browser is
gaat deze derde URL aanvragen.

257
00:12:10,000 --> 00:12:14,710
En nu, eindelijk, krijgen we de
anders ongezien 200 OK.

258
00:12:14,710 --> 00:12:18,830
>> Wat in de wereld of alle
deze andere rijen hier beneden.

259
00:12:18,830 --> 00:12:22,630
Ik letterlijk typte een ding, en mijn
browser lijkt te hebben verzocht, zoals

260
00:12:22,630 --> 00:12:23,840
20 een aantal vreemde dingen.

261
00:12:23,840 --> 00:12:24,640
Wat is dat?

262
00:12:24,640 --> 00:12:25,810
>> PUBLIEK: Scripts?

263
00:12:25,810 --> 00:12:28,460
>> LUIDSPREKER 1: Scripts, zodat andere bestanden
geschreven in een taal genaamd

264
00:12:28,460 --> 00:12:30,780
JavaScript, die, nogmaals, we zullen
zie een beetje op woensdag.

265
00:12:30,780 --> 00:12:32,760
Wat anders?

266
00:12:32,760 --> 00:12:33,390
Style sheets.

267
00:12:33,390 --> 00:12:36,350
Dus iets in een taal genaamd
CSS, die we zullen zien in een beetje.

268
00:12:36,350 --> 00:12:40,690
Gifs, en JPEG's, en pngs, en afbeeldingen,
en filmbestanden - wat een webpagina

269
00:12:40,690 --> 00:12:43,280
heeft zeer waarschijnlijk is
de vorm van een bestand.

270
00:12:43,280 --> 00:12:46,750
En dus wat we zien aan de linkerkant
kant is er alle bestanden

271
00:12:46,750 --> 00:12:50,280
dat Chrome moest downloaden,
recursief, als je wil, met het oog op

272
00:12:50,280 --> 00:12:52,430
samen het geheel van de pagina.

273
00:12:52,430 --> 00:12:56,210
>> Dus wat we zagen een moment geleden met Google,
als ik klik op de Elementen

274
00:12:56,210 --> 00:13:00,470
tab, dit, zeker, is de HTML, de
taal die deze pagina componeert.

275
00:13:00,470 --> 00:13:01,890
Maar er is trossen van andere dingen.

276
00:13:01,890 --> 00:13:02,640
Er is een logo.

277
00:13:02,640 --> 00:13:04,680
Er is deze blauw-ish
pictogrammen daar.

278
00:13:04,680 --> 00:13:07,610
En er is andere elementen nog steeds op
de pagina die zelf zou kunnen zijn

279
00:13:07,610 --> 00:13:08,610
aparte bestanden.

280
00:13:08,610 --> 00:13:11,860
>> Dus wat er leuk is aan een browser is dat
het lijkt op de taal die we gaan

281
00:13:11,860 --> 00:13:14,690
te beginnen met het schrijven, of je al hebt
begonnen met schrijven in P set 7, cijfers

282
00:13:14,690 --> 00:13:17,970
waar die bestanden wonen, en
gaat en grijpt ze net zo goed.

283
00:13:17,970 --> 00:13:21,010
En ik kan niet genoeg benadrukken, zelfs
hoewel sommige van deze misschien een beetje kijken

284
00:13:21,010 --> 00:13:24,820
geheimzinnige of overweldigend op het eerste gezicht,
leren hoe te programmeren

285
00:13:24,820 --> 00:13:28,500
toepassingen voor het web, het is
onschatbare waarde om te begrijpen hoe deze

286
00:13:28,500 --> 00:13:29,410
kleine gereedschappen werken.

287
00:13:29,410 --> 00:13:33,830
Dit zijn een soort GDB zoals gereedschappen,
maar veel eenvoudiger, uiteindelijk, te gebruiken -

288
00:13:33,830 --> 00:13:37,690
en geeft je echt ogen in wat
we hebben als vanzelfsprekend voor

289
00:13:37,690 --> 00:13:39,170
geruime tijd nu.

290
00:13:39,170 --> 00:13:42,270
>> Dus wat kunnen we nu doen met
deze informatie?

291
00:13:42,270 --> 00:13:44,875
Nou, laten we eigenlijk een kijkje nemen
de concepten die ten grondslag liggen HTML.

292
00:13:44,875 --> 00:13:49,025
En we zullen uitstellen, zoals we al hebben, te
secties deze week, het probleem

293
00:13:49,025 --> 00:13:53,260
set 7-specificatie, om enkele van de meer
bijzonderheden van deze talen.

294
00:13:53,260 --> 00:13:57,020
Maar laten we eens kijken of we niet kunnen schilderen een
beeld van wat je moet begrijpen

295
00:13:57,020 --> 00:13:57,940
algehele hier.

296
00:13:57,940 --> 00:14:02,280
>> Dus HTML, HyperText Markup Language,
is geen programmeertaal.

297
00:14:02,280 --> 00:14:03,520
Wat betekent dat eigenlijk?

298
00:14:03,520 --> 00:14:05,690
Dus HTML ziet er zo uit.

299
00:14:05,690 --> 00:14:06,810
En sommigen van jullie al weten dit.

300
00:14:06,810 --> 00:14:08,130
Sommigen van jullie hebben gedaan
deze voor bepaalde tijd.

301
00:14:08,130 --> 00:14:10,270
Maar laten we eens kijken of we niet kunnen invullen
in sommige blanks ook.

302
00:14:10,270 --> 00:14:11,760
Dus merken een paar dingen hier.

303
00:14:11,760 --> 00:14:13,030
Een, het is alleen maar tekst.

304
00:14:13,030 --> 00:14:15,960
Dus het is net als broncode in
C, of ​​een andere taal.

305
00:14:15,960 --> 00:14:17,750
>> Merk op dat er sprake lijkt
een patroon hier te zijn.

306
00:14:17,750 --> 00:14:20,870
Er is inspringen, maar technisch
de insprong is gewoon de menselijke

307
00:14:20,870 --> 00:14:21,205
conventie.

308
00:14:21,205 --> 00:14:24,980
Een browsers geeft niet als er nieuwe
lijnen en tabbladen willen we daar zien.

309
00:14:24,980 --> 00:14:27,410
, Maar merkt dat er
symmetrieën hier.

310
00:14:27,410 --> 00:14:31,180
Er is wat ik zal noemen, aan de bovenkant van
dit bestand, de open-tag, of de start

311
00:14:31,180 --> 00:14:33,030
label, genaamd HTML.

312
00:14:33,030 --> 00:14:36,800
En dan, beneden, perfect gevoerd
up, net zoals we doen met accolades,

313
00:14:36,800 --> 00:14:40,910
zien we haakje openen, naar voren
slash, HTML, haakjes sluiten.

314
00:14:40,910 --> 00:14:44,610
Dus dat is de corresponderende dicht
tag, of eind-tag, voor dat ding.

315
00:14:44,610 --> 00:14:47,990
>> Samen alles binnen de
zogenaamde open markering en sluit tag

316
00:14:47,990 --> 00:14:50,440
componeren wat we een element zullen noemen.

317
00:14:50,440 --> 00:14:53,910
En we zullen zien, in slechts een moment, het is
echt als een knooppunt in een bomen.

318
00:14:53,910 --> 00:14:57,470
Want als je denkt over nu de
inspringen die hier impliciet, je

319
00:14:57,470 --> 00:15:00,780
soort hebben, zoals, een grootouder
knooppunt genaamd HTML.

320
00:15:00,780 --> 00:15:06,870
Hoeveel kinderen zou je kunnen zeggen, gebaseerd
Op deze foto, de HTML-element?

321
00:15:06,870 --> 00:15:07,720
>> Dus waarschijnlijk twee.

322
00:15:07,720 --> 00:15:10,240
Een daarvan is het head element, blijkbaar.

323
00:15:10,240 --> 00:15:11,710
En is het lichaamselement.

324
00:15:11,710 --> 00:15:12,555
En waarom twee kinderen?

325
00:15:12,555 --> 00:15:15,840
Nou, ik ben gewoon een soort afgeleid dat, indien
Ik heb een open hoofd-tag en vervolgens een

326
00:15:15,840 --> 00:15:17,820
dicht hoofd-tag, dat is een element.

327
00:15:17,820 --> 00:15:21,200
En dan, als er een andere open lichaam
-tag en een nauwe body-tag, dat is net als

328
00:15:21,200 --> 00:15:22,340
ander element.

329
00:15:22,340 --> 00:15:26,000
Dus in die zin dat als ik soort van rotate
het beeld op zijn kant, het is

330
00:15:26,000 --> 00:15:29,910
als het hebben van een HTML-tag, en daarna een
head-tag, en daarna een body-tag, en

331
00:15:29,910 --> 00:15:34,290
dan wat tekst, hello wereld, bungelend
off van de body-tag zelf.

332
00:15:34,290 --> 00:15:36,620
>> Zo kunnen we een beeld dat te tekenen
kan er zo uitzien.

333
00:15:36,620 --> 00:15:38,020
De vormen zijn willekeurig.

334
00:15:38,020 --> 00:15:40,870
Maar merk dat ik soort van een hebt gebruikt
ellips aan de bovenkant om het te vertegenwoordigen

335
00:15:40,870 --> 00:15:41,860
documenteren zelf.

336
00:15:41,860 --> 00:15:45,980
Het blijkt dat er andere dingen kunnen zijn
binnenkant van een webpagina die ik heb niet

337
00:15:45,980 --> 00:15:46,940
hier getekend.

338
00:15:46,940 --> 00:15:50,800
Dus we gaan zelfs de HTML hangen
knooppunt uit een zogenaamd document node.

339
00:15:50,800 --> 00:15:53,730
En dan hebben we het hoofd en
lichaam en de titel, bericht,

340
00:15:53,730 --> 00:15:55,360
die verder is genest.

341
00:15:55,360 --> 00:15:58,650
Ik stoorde putting extra lijn
pauzes binnenkant van de title-tag.

342
00:15:58,650 --> 00:16:02,710
Het voelde net als het werd steeds
een beetje te breedsprakig.

343
00:16:02,710 --> 00:16:07,000
Dus ik liet het in een lijn daar, met
geopend titel, hello wereld, dicht titel.

344
00:16:07,000 --> 00:16:09,380
En dan hebben we wat tekst
bungelend off van hier.

345
00:16:09,380 --> 00:16:12,200
>> Dus deze foto zal terug komen naar
ons toen we duiken in JavaScript.

346
00:16:12,200 --> 00:16:15,110
En het begrip dat wanneer u
HTML schrijven als dit, wat

347
00:16:15,110 --> 00:16:16,250
is een browser doet?

348
00:16:16,250 --> 00:16:19,290
Nou, we hebben niet te maken over
hoe het is om dit te doen, of met wat

349
00:16:19,290 --> 00:16:23,090
algoritme, maar aan het eind van de dag,
wanneer een browser HTML-achtige ontvangt

350
00:16:23,090 --> 00:16:27,510
dat, vanuit Facebook of Google, verwerkt het
het zogezegd het leest,

351
00:16:27,510 --> 00:16:31,160
met iets als fread, boven naar
beneden en van links naar rechts, en als het

352
00:16:31,160 --> 00:16:36,300
beseft, oh, open markering, en sluit
tag, het begint te malloc, zo te zeggen,

353
00:16:36,300 --> 00:16:37,800
een knoop in een boom.

354
00:16:37,800 --> 00:16:41,130
En wanneer zij tegenkomt, zoals we hebben geïmpliceerd
hier met het inspringen, een

355
00:16:41,130 --> 00:16:45,400
kind knooppunt, het mallocs een knooppunt voor dat
en aangebracht dat naar de boom.

356
00:16:45,400 --> 00:16:49,150
>> Dus de boomstructuren, binaire bomen,
ternair bomen, en grotere bomen, dat

357
00:16:49,150 --> 00:16:53,380
we een blik geworpen op een week of twee geleden, bericht
dat hetzelfde principe is

358
00:16:53,380 --> 00:16:54,220
bij ons terugkomen.

359
00:16:54,220 --> 00:16:57,590
En wie geïmplementeerd, Chrome wat
team deed dat, vermoedelijk had

360
00:16:57,590 --> 00:17:00,800
een soort boomstructuur implementeren
onder de motorkap.

361
00:17:00,800 --> 00:17:05,329
En die zich waarschijnlijk in een
taal zoals C of C + +, of een lagere

362
00:17:05,329 --> 00:17:08,540
level taal die we zullen
nu gebruiken boven op het web.

363
00:17:08,540 --> 00:17:11,200
>> Dus nu, misschien, zal dit
meer zin.

364
00:17:11,200 --> 00:17:15,420
Eigenlijke tattoo van een vent die misschien
betreur het uiteindelijk, soort van.

365
00:17:15,420 --> 00:17:17,359
OK, oke, dus veel web humor.

366
00:17:17,359 --> 00:17:18,599
Het is niet echt
dan zo goed vandaag.

367
00:17:18,599 --> 00:17:19,560
Dus we zullen verder gaan.

368
00:17:19,560 --> 00:17:20,180
Oke.

369
00:17:20,180 --> 00:17:22,760
>> Dus laten we eens een kijkje nemen nu
op een paar voorbeelden.

370
00:17:22,760 --> 00:17:24,660
De eenvoudigste
ding zou kunnen zijn dit.

371
00:17:24,660 --> 00:17:29,170
Ik ga om te gaan en open te stellen in
Gedit een bestand genaamd hello.php.

372
00:17:29,170 --> 00:17:31,730

373
00:17:31,730 --> 00:17:36,330
En de binnenkant van hier, ga ik snel
gewoon doen, printf, citeer

374
00:17:36,330 --> 00:17:38,590
unquote, "hello wereld."

375
00:17:38,590 --> 00:17:42,460
>> Zo bericht, en ik doe mijn backslash n,
Ik heb niet de moeite genomen om de belangrijkste te verklaren.

376
00:17:42,460 --> 00:17:45,310
Het blijkt, in php, en veel
talen, heb je niet een van de belangrijkste nodig

377
00:17:45,310 --> 00:17:46,090
functie per se.

378
00:17:46,090 --> 00:17:47,720
Je kunt gewoon beginnen met schrijven
uw programma.

379
00:17:47,720 --> 00:17:51,210
Nu, als ik dit bestand op te slaan, merk ik ben
gaat te hebben om het volgende te doen.

380
00:17:51,210 --> 00:17:55,360
Ik ben niet van plan om te gebruiken, en ik ben niet
gaat gebruiken clang omdat PHP, in tegenstelling tot

381
00:17:55,360 --> 00:17:57,400
C, is niet een gecompileerde taal.

382
00:17:57,400 --> 00:18:01,400
Het is wat heet een geïnterpreteerde
taal, wat betekent dat je het uit te voeren

383
00:18:01,400 --> 00:18:04,650
als ingang via een ander programma
riep een tolk.

384
00:18:04,650 --> 00:18:08,150
En dat programma leest het, boven naar
beneden en van links naar rechts, en doet

385
00:18:08,150 --> 00:18:09,290
wat je hem vertelt wat te doen.

386
00:18:09,290 --> 00:18:12,920
>> Dus in dit geval hier heb ik
een regel die printf zegt.

387
00:18:12,920 --> 00:18:17,990
Dus toen ik deze bron code uit te voeren,
hello.php, hoewel een programma dat

388
00:18:17,990 --> 00:18:22,830
gebeurt, gunstig, genoemd te worden PHP,
dat programma PHP gaat lezen

389
00:18:22,830 --> 00:18:26,120
dit bestand, boven naar beneden, van links naar rechts,
en het gaat om te doen wat ik

390
00:18:26,120 --> 00:18:30,110
vertel het aan te doen - het uitvoeren van code, en als
het iets niet herkent, net

391
00:18:30,110 --> 00:18:31,320
spugen het uit.

392
00:18:31,320 --> 00:18:34,940
Dus ik ga om verder te gaan en
run PHP van hello.php.

393
00:18:34,940 --> 00:18:37,110
Enter.

394
00:18:37,110 --> 00:18:39,690
>> En dat is niet helemaal wat ik bedoelde.

395
00:18:39,690 --> 00:18:40,530
Nou, waarom is dat?

396
00:18:40,530 --> 00:18:43,910
Nou, PHP is een taal die is eigenlijk
ontworpen om vrij te zijn

397
00:18:43,910 --> 00:18:46,150
verweven met het web.

398
00:18:46,150 --> 00:18:50,460
Bij het maken van webpagina's met deze taal
PHP, zoals we snel zullen zien, we zullen

399
00:18:50,460 --> 00:18:54,560
willen iets zoals print doen
uit te lijnen zoals deze.

400
00:18:54,560 --> 00:18:55,940
>> Dus ik ga dit doen.

401
00:18:55,940 --> 00:19:00,810
Open beugel, vraagteken, PHP, en
Nu ik ga gewoon streepje gewoon blijven

402
00:19:00,810 --> 00:19:01,960
dingen leuk.

403
00:19:01,960 --> 00:19:04,910
En nu ga ik een vraag doen
markeer haakje sluiten.

404
00:19:04,910 --> 00:19:06,270
Dus er is een beetje asymmetrie hier.

405
00:19:06,270 --> 00:19:07,490
Je hoeft dit niet te doen.

406
00:19:07,490 --> 00:19:10,530
En je hoeft niet een slash, dus
PHP is een beetje anders.

407
00:19:10,530 --> 00:19:14,610
>> Maar nu, als ik dit programma opnieuw uitvoeren,
PHP hello.php, nu ik

408
00:19:14,610 --> 00:19:16,090
daadwerkelijk krijgen Hello World.

409
00:19:16,090 --> 00:19:17,750
En we zullen zien waarom dit is waardevol.

410
00:19:17,750 --> 00:19:20,960
Een, het stelt me ​​in staat om aan te geven,
super expliciet is

411
00:19:20,960 --> 00:19:22,480
code, voer je dit.

412
00:19:22,480 --> 00:19:25,480
En dat is inderdaad wat deze
speciale labels impliceren hier.

413
00:19:25,480 --> 00:19:30,330
>> Maar het betekent ook dat als ik gewoon doen
iets als ik doel hier, dat

414
00:19:30,330 --> 00:19:34,000
betekent dat, letterlijk, dat zal alleen maar
zonder te worden afgedrukt

415
00:19:34,000 --> 00:19:36,850
eigenlijk printf bellen, of print,
of een soortgelijke functie.

416
00:19:36,850 --> 00:19:39,445
Dus we terug naar die komen
in slechts een moment.

417
00:19:39,445 --> 00:19:40,470
>> Eerste, laten we dit doen.

418
00:19:40,470 --> 00:19:43,950
Binnenkant van het apparaat, hebben we een
directory genaamd vhosts, voor virtuele

419
00:19:43,950 --> 00:19:47,000
hosts, slash lokale host, slash publiek.

420
00:19:47,000 --> 00:19:50,240
Dus het is een beetje verbose, maar lang verhaal
Kortom, wordt het apparaat niet ontworpen

421
00:19:50,240 --> 00:19:53,770
alleen te ondersteunen C. Het is ook
ontworpen om PHP ondersteunen.

422
00:19:53,770 --> 00:19:57,440
Maar het is ook ontworpen om een ​​web te zijn
server, en een databaseserver.

423
00:19:57,440 --> 00:20:00,230
En het is ontworpen, en echt geconfigureerd,
te denken aan elke

424
00:20:00,230 --> 00:20:04,230
commerciële web hosting bedrijf dat
je zou betalen $ 5 per maand voor,

425
00:20:04,230 --> 00:20:05,040
$ 100 per maand voor.

426
00:20:05,040 --> 00:20:08,200
Wat ook de service is, het is geconfigureerd
te zijn zeer vergelijkbaar met een

427
00:20:08,200 --> 00:20:10,170
echte wereld productieserver.

428
00:20:10,170 --> 00:20:13,485
>> En wat dat betekent is dat draait op
Het apparaat is webserver-software.

429
00:20:13,485 --> 00:20:15,060
Het gebeurt te noemen Apache.

430
00:20:15,060 --> 00:20:17,790
Het is gewoon gratis en open source,
en zeer populair.

431
00:20:17,790 --> 00:20:23,260
En we hebben Apache geconfigureerd om te weten
dat als ik een bezoek aan een bepaalde URL, met

432
00:20:23,260 --> 00:20:28,060
Chroom of een browser in de
apparaat, om te kijken in deze map

433
00:20:28,060 --> 00:20:31,030
voor de bestanden die de
gebruiker vraagt.

434
00:20:31,030 --> 00:20:32,790
>> Met andere woorden, laat me
ga je gang en doe dit.

435
00:20:32,790 --> 00:20:36,890
Binnenkant van mijn openbare map, ga ik
om door te gaan en maak een bestand

436
00:20:36,890 --> 00:20:39,580
genaamd index.html.

437
00:20:39,580 --> 00:20:41,000
Dat geeft me het tabblad hier.

438
00:20:41,000 --> 00:20:44,210
En ik ga heel snel gaan
en ga je gang en bang van

439
00:20:44,210 --> 00:20:45,010
het programma hier.

440
00:20:45,010 --> 00:20:48,410
Doctype HTML, die voor nu, net
neem aan dat je moet typen.

441
00:20:48,410 --> 00:20:53,490
Het is gewoon een geheimzinnige label, dat is niet
echt een HTML-tag, die aangeeft dat

442
00:20:53,490 --> 00:20:55,050
hier komt wat HTML.

443
00:20:55,050 --> 00:20:57,400
>> Ik ga om te gaan en recreëren
wat we zojuist zagen.

444
00:20:57,400 --> 00:20:58,650
Hier is de kop van de pagina.

445
00:20:58,650 --> 00:21:01,170
Binnenkant van het hoofd was het -

446
00:21:01,170 --> 00:21:01,890
zo titel.

447
00:21:01,890 --> 00:21:04,340
Dus we gedag zeggen, wereld.

448
00:21:04,340 --> 00:21:06,570
En dan naar beneden hier was de body-tag.

449
00:21:06,570 --> 00:21:08,580
Laat ik sluit de body-tag.

450
00:21:08,580 --> 00:21:12,280
En dan in hier zal ik ook zeggen,
gewoon voor de duidelijkheid, hello wereld.

451
00:21:12,280 --> 00:21:14,770
>> Dus dit is, misschien wel, de eenvoudigste
mogelijk webpagina die u

452
00:21:14,770 --> 00:21:15,770
kan maken dat geldig is.

453
00:21:15,770 --> 00:21:17,030
Het is syntactisch geldig.

454
00:21:17,030 --> 00:21:18,620
Alles wat geopend is gesloten.

455
00:21:18,620 --> 00:21:20,910
Alles is mooi in
vormgegeven en ingesprongen.

456
00:21:20,910 --> 00:21:23,600
Dus laten we nu zien hoe ik
kan toegang tot dit bestand.

457
00:21:23,600 --> 00:21:25,540
>> Nou, laat me gaan naar Chrome hier.

458
00:21:25,540 --> 00:21:35,050
En laat me gaan naar
http://localhost/index.html.

459
00:21:35,050 --> 00:21:36,200
Dus wat is de lokale host?

460
00:21:36,200 --> 00:21:39,400
Nou, de meeste elke computer in de wereld,
Linux, Mac OS, Windows, heeft een bijnaam

461
00:21:39,400 --> 00:21:40,680
riep lokale host.

462
00:21:40,680 --> 00:21:42,900
Dus als je ooit wilt praten
op uw eigen computer -

463
00:21:42,900 --> 00:21:45,140
zij het, vreemd genoeg reflexively -

464
00:21:45,140 --> 00:21:47,080
je jezelf lokale host noemen.

465
00:21:47,080 --> 00:21:50,390
Maakt niet uit wat uw werkelijke computer is
genoemd, of het nu David's MacBook

466
00:21:50,390 --> 00:21:52,490
Lucht, of iets meer
breedsprakig als dat.

467
00:21:52,490 --> 00:21:57,760
>> Dus deze URL blijkbaar gaat gebruiken
de HTTP naar de lokale host te praten,

468
00:21:57,760 --> 00:22:00,800
dezelfde computer, het apparaat, en
het gaat om vragen, neem dan een

469
00:22:00,800 --> 00:22:02,570
denk, wat bestand?

470
00:22:02,570 --> 00:22:04,460
Index.html.

471
00:22:04,460 --> 00:22:08,650
Dus het apparaat is geconfigureerd in
vooraf te weten dat als ik vraag

472
00:22:08,650 --> 00:22:13,460
voor iets als index.html, op zoek naar
in een map met de naam vhosts, in een

473
00:22:13,460 --> 00:22:17,950
map met de naam localhost, in een map
daarin riep het publiek.

474
00:22:17,950 --> 00:22:20,400
Dat is waar al mijn openbare
bestanden zullen worden.

475
00:22:20,400 --> 00:22:22,610
Dus ik ga nu druk op Enter.

476
00:22:22,610 --> 00:22:27,100
>> En verdomd, er is dat verboden
bericht, ook bekend als 403, de

477
00:22:27,100 --> 00:22:28,490
numerieke code voor het.

478
00:22:28,490 --> 00:22:30,130
Dus wat is hier mis?

479
00:22:30,130 --> 00:22:33,210
Nou, het is niet genoeg om alleen te zetten
het bestand binnenkant van mijn map.

480
00:22:33,210 --> 00:22:35,790
Ik moet eigenlijk het volgende doen.

481
00:22:35,790 --> 00:22:40,210
>> Laat me gaan in mijn vhosts directory, in
localhost, in het openbaar, en laat

482
00:22:40,210 --> 00:22:41,680
ik doe ls dash l.

483
00:22:41,680 --> 00:22:44,510
En er is een paar andere dingen
hier voor de hedendaagse doeleinden.

484
00:22:44,510 --> 00:22:50,540
Maar let op de linkerkant, naast
naar index.html, zien we alleen een RW.

485
00:22:50,540 --> 00:22:53,560
En in het verleden, welke
heeft RW stond?

486
00:22:53,560 --> 00:22:54,240
>> Gewoon lezen of schrijven.

487
00:22:54,240 --> 00:22:58,000
Dat staat rw links
betekent dat ik, de eigenaar van dit bestand, kan

488
00:22:58,000 --> 00:22:59,020
lezen of schrijven.

489
00:22:59,020 --> 00:23:05,010
Maar ik moet laten alle mensen in de
wereld lees dit, hoewel het niet geschreven.

490
00:23:05,010 --> 00:23:09,650
Dus ik ga naar de modus van de verandering
bestand, chmod, allemaal plus r te geven

491
00:23:09,650 --> 00:23:13,910
iedereen gelezen toestemming op het
bestand met de naam index.html.

492
00:23:13,910 --> 00:23:18,040
>> En als ik nu overgetypt ls dash l, bericht
dat, meer dan hier, wat meer

493
00:23:18,040 --> 00:23:19,160
R's zijn opgedoken.

494
00:23:19,160 --> 00:23:21,090
En voor nu, de spec gaat
in meer detail.

495
00:23:21,090 --> 00:23:24,450
Voor P set 7, dat betekent gewoon iedereen
Lees nu dit bestand.

496
00:23:24,450 --> 00:23:27,790
Als ik terug naar mijn browser
nu en herladen, voila.

497
00:23:27,790 --> 00:23:28,750
Hello world.

498
00:23:28,750 --> 00:23:32,260
>> En ik kan zelfs mijn Chrome gereedschap te openen
en zie, net als bij Google en

499
00:23:32,260 --> 00:23:34,590
Facebook, dat daar is mijn HTML,
geformatteerd een beetje

500
00:23:34,590 --> 00:23:35,930
anders en ingekleurd.

501
00:23:35,930 --> 00:23:40,450
Als ik ga naar het tabblad netwerk en herlaad
de pagina, merken dat er de komen

502
00:23:40,450 --> 00:23:42,900
verzoeken dat Chrome verzendt
het apparaat.

503
00:23:42,900 --> 00:23:46,020
Er is de 200 voor die
specifieke bestand.

504
00:23:46,020 --> 00:23:49,340
Dus in het kort, dit is hoe al deze
verschillende stukken komen samen.

505
00:23:49,340 --> 00:23:53,530
Het toeval wil dat de webserver
we nu gebruik is niet afgelegen,

506
00:23:53,530 --> 00:23:54,210
zoals Facebook.

507
00:23:54,210 --> 00:23:58,330
Het is letterlijk op dezelfde computer,
dat is perfect in orde.

508
00:23:58,330 --> 00:24:00,590
>> Dus wat kunnen we doen in een webpagina?

509
00:24:00,590 --> 00:24:03,110
Nou ja, gewoon, laten we wind door
een paar van deze dingen.

510
00:24:03,110 --> 00:24:07,860
Maar laat me gaan en opnieuw te openen
Gedit met index.html.

511
00:24:07,860 --> 00:24:13,980
En laat mij ga je gang en zeg hallo CS50,
sla het bestand, ga terug naar de

512
00:24:13,980 --> 00:24:16,260
browser, echt underwhelming verandering.

513
00:24:16,260 --> 00:24:19,130
>> Maar wat als we willen eigenlijk
link naar nu iets?

514
00:24:19,130 --> 00:24:23,480
Dus het blijkt dat we kunnen hebben van de
koppelingen in HTML, dat zijn gewoon labels

515
00:24:23,480 --> 00:24:24,140
zelf.

516
00:24:24,140 --> 00:24:27,320
Het gebeurt te worden genoemd de
anchor tag. a href gelijk

517
00:24:27,320 --> 00:24:33,190
https://www.cs50.net, www.cs50.net
dicht citaat, haakje sluiten.

518
00:24:33,190 --> 00:24:35,230
En nu laten we zien wat
anders komt daarna.

519
00:24:35,230 --> 00:24:36,500
>> Ik heb de tag geopend.

520
00:24:36,500 --> 00:24:38,990
Ik moet nu om het te geven
een frase als CS50.

521
00:24:38,990 --> 00:24:40,600
Laat ik sluit de tag.

522
00:24:40,600 --> 00:24:42,010
En merken een paar dingen.

523
00:24:42,010 --> 00:24:45,270
Ook al is er deze cryptische ding
Hier, heb ik niet herhaald wanneer u

524
00:24:45,270 --> 00:24:46,010
sluit de tag.

525
00:24:46,010 --> 00:24:48,230
Je sluit gewoon de tag
met zijn naam alleen.

526
00:24:48,230 --> 00:24:50,940
En dit is wat bekend staat als
een attribuut met een waarde.

527
00:24:50,940 --> 00:24:56,070
Attributen alleen wijzigen van het gedrag
van enkele tag binnenkant van een pagina.

528
00:24:56,070 --> 00:24:59,150
>> Dus dit is bepaald dat de hyper
verwijzing, de chique manier om te zeggen de

529
00:24:59,150 --> 00:25:03,660
URL van dit anker, dit
koppeling, moet CS50.net.

530
00:25:03,660 --> 00:25:07,440
En de tekst die we willen het laten zien
gebruiker is niet dat rauwe URL, maar eerder

531
00:25:07,440 --> 00:25:08,730
het woord CS50.

532
00:25:08,730 --> 00:25:13,710
>> Dus als ik nu herladen, laat me inzoomen voor
duidelijkheid, laat ik herlaad de pagina,

533
00:25:13,710 --> 00:25:16,460
merken dat we hebben deze oude school
blauwe onderstreepte link.

534
00:25:16,460 --> 00:25:20,000
En als ik zweven over het, en het gaat
taai zijn om te zien, in de linkerbenedenhoek

535
00:25:20,000 --> 00:25:23,690
bovenhoek van het scherm, merkt
dat zegt de URL waarnaar

536
00:25:23,690 --> 00:25:24,430
Ik ga om te gaan.

537
00:25:24,430 --> 00:25:27,940
En als ik klik er, voila,
nu ben ik het maken van webpagina's.

538
00:25:27,940 --> 00:25:30,140
En we hebben ons geleid
naar de homepage.

539
00:25:30,140 --> 00:25:32,670
>> Maar let op wat potentieel
Dit biedt ons.

540
00:25:32,670 --> 00:25:34,890
Veiligheid is zeer
in de mode deze dagen.

541
00:25:34,890 --> 00:25:41,210
Wat als ik in plaats daarvan zeg iets als
dit, en ik in plaats daarvan naar, zeg, laten we

542
00:25:41,210 --> 00:25:42,460
zie, fakeCS50.net.

543
00:25:42,460 --> 00:25:44,660

544
00:25:44,660 --> 00:25:46,360
Herlaad deze pagina.

545
00:25:46,360 --> 00:25:50,180
>> OK, dus ziet het lijkt nog steeds alsof ik
gaat CS50, tenzij een scherpzinnige oog

546
00:25:50,180 --> 00:25:51,560
zult merken Ik ga nep CS50.

547
00:25:51,560 --> 00:25:54,550
Ik gok dat dit domein wordt niet genomen.

548
00:25:54,550 --> 00:25:55,960
OK, dus het is niet beschikbaar.

549
00:25:55,960 --> 00:25:56,600
Dus dat is goed.

550
00:25:56,600 --> 00:25:57,900
Niemand heeft eigenlijk dat domein.

551
00:25:57,900 --> 00:26:00,380
>> Maar laten we een beetje meer kwaadaardige
want dat is een beetje dom.

552
00:26:00,380 --> 00:26:02,240
Wat als we dit veranderen naar Paypal.

553
00:26:02,240 --> 00:26:09,960
En wat als we dit noemen, zoals,
www.paypal.badguy.com,

554
00:26:09,960 --> 00:26:12,070
ongeacht het domein.

555
00:26:12,070 --> 00:26:13,700
Die waarschijnlijk bestaat.

556
00:26:13,700 --> 00:26:16,260
Dus nu laat ik herlaad de pagina.

557
00:26:16,260 --> 00:26:22,890
En hier hebben we soort van een phishing
aanval, P-H-I-S-H-I-N-G, de

558
00:26:22,890 --> 00:26:26,760
dom woord gegeven voor een aanval die
probeert te vissen informatie, of, beter

559
00:26:26,760 --> 00:26:30,450
nog, geld, uit mensen door tricking
ze in het verstrekken van informatie die

560
00:26:30,450 --> 00:26:31,990
zij anders niet zou doen.

561
00:26:31,990 --> 00:26:33,500
Dit ziet er helemaal legit, toch?

562
00:26:33,500 --> 00:26:34,930
Ik moet hier een link naar Paypal.com.

563
00:26:34,930 --> 00:26:37,700

564
00:26:37,700 --> 00:26:40,430
In alle eerlijkheid, als ik sexed het een vrolijk
graphics, kunnen we het er

565
00:26:40,430 --> 00:26:41,310
meer zoals PayPal.

566
00:26:41,310 --> 00:26:41,510
Rechts?

567
00:26:41,510 --> 00:26:43,815
Want ik kon, als een terzijde,
Ik kon naar Paypal.com.

568
00:26:43,815 --> 00:26:47,110
En we hebben net gezien hoe ik kan
zie al hun HTML.

569
00:26:47,110 --> 00:26:50,560
Ik kon gewoon kopiëren en opnieuw de
esthetiek van Paypal dan in te gaan

570
00:26:50,560 --> 00:26:51,490
oude school hier.

571
00:26:51,490 --> 00:26:55,010
Maar let, natuurlijk, en het is een beetje
kleine nog, alleen in de bodem

572
00:26:55,010 --> 00:26:59,190
linkerhoek, in als een 10 punt
lettertype, zie je wat URL je bent

573
00:26:59,190 --> 00:27:01,310
daadwerkelijk zal worden geleid naar.

574
00:27:01,310 --> 00:27:06,580
>> En dus als je ooit hebt gekregen spam te zeggen
ga je gang, en je bent rekening

575
00:27:06,580 --> 00:27:07,420
is gecompromitteerd.

576
00:27:07,420 --> 00:27:10,615
Klik dan op deze link en laat het ons weten
je wachtwoord dus kunnen we ervoor zorgen dat u bent

577
00:27:10,615 --> 00:27:13,010
u, niet ooit dat doen.

578
00:27:13,010 --> 00:27:14,180
Deze dingen zou vanzelfsprekend moeten zijn.

579
00:27:14,180 --> 00:27:17,670
Maar het is heerlijk amusant, en
tragisch, hoe elk jaar lijkt dit te

580
00:27:17,670 --> 00:27:19,660
gebeuren met een aantal niet-nul
aantal mensen.

581
00:27:19,660 --> 00:27:21,400
>> En dat is het mooie
van phishing-aanvallen.

582
00:27:21,400 --> 00:27:23,160
U kunt het verzenden van een miljoen e-mails.

583
00:27:23,160 --> 00:27:27,720
En zelfs als 0,01% van de mensen daadwerkelijk
Klik op Paypal en geven u uw

584
00:27:27,720 --> 00:27:31,040
wachtwoord, dat is nog steeds een niet-nul getal
van mensen die net hebben geven

585
00:27:31,040 --> 00:27:32,200
je hun geld.

586
00:27:32,200 --> 00:27:36,170
En verzenden e-natuurlijk heel
gemakkelijk en, in wezen, gratis

587
00:27:36,170 --> 00:27:36,970
deze dagen.

588
00:27:36,970 --> 00:27:40,410
>> Dus lang verhaal kort, heerlijk
mooi idee, toch?

589
00:27:40,410 --> 00:27:44,620
Jaren geleden was dit de vroegste
web, waardoor een web van

590
00:27:44,620 --> 00:27:46,330
hyperlinks onder middelen.

591
00:27:46,330 --> 00:27:49,520
Maar zo snel kan het zijn
gebruikt voor zieke doeleinden.

592
00:27:49,520 --> 00:27:54,100
En e-mail, het volstaat te zeggen, deze
dagen, hebben HTML ingebed binnen.

593
00:27:54,100 --> 00:27:55,410
>> Nou, laat ik maar een ander ding.

594
00:27:55,410 --> 00:27:58,640
En we zullen grotendeels uit te stellen om deel te
probleem stelde zeven zodat u

595
00:27:58,640 --> 00:28:00,000
verken de bijzonderheden.

596
00:28:00,000 --> 00:28:01,990
Maar laat me gaan en
doe hier een paar dingen.

597
00:28:01,990 --> 00:28:04,840
Ik ga om in te gaan en te verklaren
wat heet een div, of

598
00:28:04,840 --> 00:28:06,080
divisie, van de pagina.

599
00:28:06,080 --> 00:28:07,770
Laat ik dichtbij dat div-tag.

600
00:28:07,770 --> 00:28:11,460
>> En ik ga zeggen omhoog
hier boven.

601
00:28:11,460 --> 00:28:14,940
En dan onder dit, ga ik doen
iets als een andere div, sluit deze

602
00:28:14,940 --> 00:28:17,800
tag, en doe onderaan pagina.

603
00:28:17,800 --> 00:28:18,840
En laten we redden het.

604
00:28:18,840 --> 00:28:21,040
>> Dus nu laten we terug gaan naar mijn dossier.

605
00:28:21,040 --> 00:28:22,120
Zeer underwhelming.

606
00:28:22,120 --> 00:28:25,520
Maar wat divisie wordt gebruikt,
onder de motorkap, is het eigenlijk

607
00:28:25,520 --> 00:28:26,920
een leuke structureel element.

608
00:28:26,920 --> 00:28:30,300
Het bevat geen esthetiek hebben, voor zover
we kunnen zien, met uitzondering van, blijkbaar,

609
00:28:30,300 --> 00:28:31,890
zetten dingen op nieuwe lijnen.

610
00:28:31,890 --> 00:28:36,290
>> Maar let op, als een terzijde, gewoon te raken
Voer niet knippen in HTML als het

611
00:28:36,290 --> 00:28:39,840
doet in C. Je zou kunnen denken dat dat is
gaan we een aardig grote kloof tussen gezet

612
00:28:39,840 --> 00:28:41,300
de boven-en onderkant van de pagina.

613
00:28:41,300 --> 00:28:43,420
Maar het wordt genegeerd.

614
00:28:43,420 --> 00:28:48,040
Witte ruimte is in wezen genegeerd in
anders dan de eerste webpagina

615
00:28:48,040 --> 00:28:51,530
spatiebalk karakter, of carriage return,
dat je hit op het toetsenbord.

616
00:28:51,530 --> 00:28:55,370
Wilt u meer lijn breekt, je
moeten het zelf opgeven.

617
00:28:55,370 --> 00:28:59,080
>> Dus ik ga een paar dingen doen
hier om te zien wat er gaande is.

618
00:28:59,080 --> 00:29:02,700
Ik ga een attribuut toe te voegen dat
bestaat En nogmaals, de manier waarop je leert

619
00:29:02,700 --> 00:29:07,110
wat attributen bestaan, wat labels bestaan,
echt, is keer gevonden.

620
00:29:07,110 --> 00:29:09,750
HTML is de soort van taal - het is
geen programmeertaal.

621
00:29:09,750 --> 00:29:12,460
Het is een opmaaktaal - dat na een
goed half uur, misschien, een uur met

622
00:29:12,460 --> 00:29:15,930
het, zult u zeker begrijpen, de meeste
waarschijnlijk, het basisidee.

623
00:29:15,930 --> 00:29:20,350
En dan een Google-zoekopdracht weg is alles
de mogelijke tags die je misschien wel

624
00:29:20,350 --> 00:29:21,170
geïnteresseerd

625
00:29:21,170 --> 00:29:24,290
En per de spec, dat is heel
welkom en hier aangemoedigd.

626
00:29:24,290 --> 00:29:26,120
>> Dus laat me nu ga je gang en
doe iets als dit.

627
00:29:26,120 --> 00:29:28,690
Background-color.

628
00:29:28,690 --> 00:29:32,060
En nu, ik ga iets doen
zoals rood, puntkomma.

629
00:29:32,060 --> 00:29:33,970
En u kunt dit doen in
een paar verschillende manieren.

630
00:29:33,970 --> 00:29:36,770
Ik ben gewoon een beetje te typen als super
expliciet mogelijk.

631
00:29:36,770 --> 00:29:41,960
>> Maar het blijkt dat deze waarde hier is
wat heet CSS, Cascading Style

632
00:29:41,960 --> 00:29:43,700
Bladen, dat is een andere
taal helemaal.

633
00:29:43,700 --> 00:29:46,770
CSS heeft niets te maken met
Open tags en dicht tags.

634
00:29:46,770 --> 00:29:48,230
Het heeft te maken met eigenschappen.

635
00:29:48,230 --> 00:29:52,660
>> En eigenschappen zijn simpelweg belangrijke waarde
paren, wat betekent gewoon een woord,

636
00:29:52,660 --> 00:29:54,680
colon, en nog wat ander woord.

637
00:29:54,680 --> 00:29:57,940
En als u meerdere degenen, of gewoon
men hier, kunt u het eindigen met een

638
00:29:57,940 --> 00:29:59,390
puntkomma, gewoon voor de duidelijkheid.

639
00:29:59,390 --> 00:30:01,370
Maar ook dat zal hier werken.

640
00:30:01,370 --> 00:30:02,500
>> Nu wat dit gaat doen?

641
00:30:02,500 --> 00:30:03,610
U kunt waarschijnlijk wel raden.

642
00:30:03,610 --> 00:30:05,930
Laat me ga je gang en laad deze pagina opnieuw.

643
00:30:05,930 --> 00:30:07,300
En nu is het echt mee te gaan.

644
00:30:07,300 --> 00:30:09,150
Dus top van mijn pagina is rood.

645
00:30:09,150 --> 00:30:12,380
Maar wat is sleutel hier is dat, ik noemde
eerder, dat div geeft u

646
00:30:12,380 --> 00:30:13,220
een divisie van de pagina.

647
00:30:13,220 --> 00:30:14,410
En dat is inderdaad wat het doet.

648
00:30:14,410 --> 00:30:17,920
Het verdeelt in wezen de pagina in
een rechthoek die u kunt dan

649
00:30:17,920 --> 00:30:18,720
manipuleren.

650
00:30:18,720 --> 00:30:22,330
>> En dit begrip van rechthoeken is een soort van
dwingend in dat, als je denkt aan

651
00:30:22,330 --> 00:30:26,410
vrijwel elke website, is er waarschijnlijk
wat structuur aan.

652
00:30:26,410 --> 00:30:29,620
De meeste van jullie hebben waarschijnlijk zelden gezien
Facebook's homepage als je ingelogd bent

653
00:30:29,620 --> 00:30:30,440
de hele tijd.

654
00:30:30,440 --> 00:30:33,920
>> Maar op Facebook's home page, is er
een soort van div langs de bovenkant.

655
00:30:33,920 --> 00:30:36,140
En het is misschien niet zo eenvoudig
als een div, maar er is een

656
00:30:36,140 --> 00:30:37,560
rechthoekige gebied daar.

657
00:30:37,560 --> 00:30:40,290
De rest van de pagina is als
een enorme div, als een veel

658
00:30:40,290 --> 00:30:41,910
groter rechthoekig gebied.

659
00:30:41,910 --> 00:30:44,540
Dus lang verhaal kort, gewoon door het hebben
deze kleine bouwstenen, de

660
00:30:44,540 --> 00:30:49,250
vermogen om model dingen rechthoeken,
breed of smal, kunt u ook

661
00:30:49,250 --> 00:30:53,680
maken kolommen potentieel, kunt u
lay-out van pagina's, echt, maar u

662
00:30:53,680 --> 00:30:54,100
zou willen.

663
00:30:54,100 --> 00:30:56,170
We zijn eigenlijk alleen maar krassen
het oppervlak hier.

664
00:30:56,170 --> 00:30:59,820
>> Sterker nog, als ik een ander,
laat me ga je gang en doe stijl,

665
00:30:59,820 --> 00:31:05,410
achtergrond-kleur, zullen we iets doen
zoals blauw, sluit quotes.

666
00:31:05,410 --> 00:31:06,620
Laten we het herladen dit.

667
00:31:06,620 --> 00:31:08,260
Dus nu is het steeds nog lelijker.

668
00:31:08,260 --> 00:31:11,520
Maar nu kan ik soort van pronken
mijn P set vijf vaardigheden, toch?

669
00:31:11,520 --> 00:31:12,690
Red.

670
00:31:12,690 --> 00:31:15,640
Het doet me denken aan RGB, Rood
Groen Blauw triples.

671
00:31:15,640 --> 00:31:19,330
Nou, het blijkt in web programmeren,
of web design, dat is dit, we hebben

672
00:31:19,330 --> 00:31:21,650
nog niets geprogrammeerd
per se, je kan eigenlijk

673
00:31:21,650 --> 00:31:22,880
hebben hexadecimale code.

674
00:31:22,880 --> 00:31:26,480
Dus iets iets, iets
iets, iets iets.

675
00:31:26,480 --> 00:31:30,650
Dus je kunt zes hexadecimale hebben
tekens, of drie, in sommige gevallen,

676
00:31:30,650 --> 00:31:33,480
en elk van deze vraagtekens
moet een hexadecimale cijfers

677
00:31:33,480 --> 00:31:34,985
nul tot f.

678
00:31:34,985 --> 00:31:41,000
>> Als ik wil veel rood hebben, en
geen groen, en geen blauwe, wat is de

679
00:31:41,000 --> 00:31:43,740
tegenovergestelde van nul bij het gebruik van hex?

680
00:31:43,740 --> 00:31:44,480
Het is f.

681
00:31:44,480 --> 00:31:51,130
Dus kan ik ff, nul nul, nul nul, doe
slaan deze, en nu hier te komen.

682
00:31:51,130 --> 00:31:52,700
En ik wil niet een wijziging zien.

683
00:31:52,700 --> 00:31:56,230
Dus citaat unquote "rood" is blijkbaar
synoniem voor alle rode,

684
00:31:56,230 --> 00:31:57,610
geen groen, geen blauw.

685
00:31:57,610 --> 00:31:59,960
Ondertussen laten we bewust veranderen
dit iets te zijn

686
00:31:59,960 --> 00:32:01,210
willekeurig, zoals ABCDF.

687
00:32:01,210 --> 00:32:03,790

688
00:32:03,790 --> 00:32:05,860
>> Laten we eens kijken wat dat is.

689
00:32:05,860 --> 00:32:08,530
Het is een heel mooi blauw,
eigenlijk, baby blauw.

690
00:32:08,530 --> 00:32:11,820
Oke, dus dit zijn slechts nu
enigszins willekeurige combinaties

691
00:32:11,820 --> 00:32:12,210
tekens.

692
00:32:12,210 --> 00:32:13,410
Dus zullen we niet verzanden in hier.

693
00:32:13,410 --> 00:32:15,930
Maar nogmaals, dit spreekt tot de precisie
dat u kunt beginnen met

694
00:32:15,930 --> 00:32:19,090
van toepassing - zelfs als je erg overweldigd
de esthetiek.

695
00:32:19,090 --> 00:32:21,750
In feite, als je echt wilt zijn
indruk, laat me gaan door en verandert

696
00:32:21,750 --> 00:32:23,500
de lettergrootte, bijvoorbeeld.

697
00:32:23,500 --> 00:32:25,960
En let op de puntkomma, die
noodzakelijk zijn.

698
00:32:25,960 --> 00:32:29,570
>> Lettergrootte, kunnen we gewoon belachelijk
Hier, 96 punt.

699
00:32:29,570 --> 00:32:31,280
Behalve dat.

700
00:32:31,280 --> 00:32:33,670
Wow, dat is een groot lettertype.

701
00:32:33,670 --> 00:32:35,490
Oke, dus het is heel gemakkelijk.

702
00:32:35,490 --> 00:32:38,260
En eigenlijk, je bent wezen zien
de allereerste webpagina maakte ik

703
00:32:38,260 --> 00:32:40,060
jaar geleden, toen ik voor het eerst
leerde dit spul.

704
00:32:40,060 --> 00:32:42,190
Het is heel gemakkelijk om heel te maken
afschuwelijke dingen snel.

705
00:32:42,190 --> 00:32:46,115
>> En als je bekend bent met de Wayback bent
Machine op archive.org, je

706
00:32:46,115 --> 00:32:48,210
vindt al mijn afzichtelijke
undergrad webpagina's.

707
00:32:48,210 --> 00:32:50,090
Men had Kermit de Kikker op de voorzijde.

708
00:32:50,090 --> 00:32:53,150
Ik ging door een fase waar ik dacht
het was cool om de achtergrond van de te nemen

709
00:32:53,150 --> 00:32:56,320
een rood gordijn, toen ik leerde hoe je
kan tegel beelden weer, en weer, en

710
00:32:56,320 --> 00:32:59,540
nogmaals, om een ​​pagina te vullen met
een grote kleverige rode gordijn.

711
00:32:59,540 --> 00:33:03,120
En dan, op de top van deze, was een icoon
dat je moest klikken om mijn woning te betreden

712
00:33:03,120 --> 00:33:04,960
pagina want dat was
erg in de mode.

713
00:33:04,960 --> 00:33:08,870
>> En dan is mijn eerste programma dat ik ooit schreef
niet in PHP, maar in een taal

714
00:33:08,870 --> 00:33:12,260
genaamd Pearl, schreef een gastenboek, waarin
is een echt cool ding dat een

715
00:33:12,260 --> 00:33:14,250
Veel mensen verwachten dat je
te hebben op een homepage.

716
00:33:14,250 --> 00:33:17,510
Wanneer je naar de pagina, ze wilt
aan te melden, en zeggen wie je bent,

717
00:33:17,510 --> 00:33:18,720
en waarom je daar bent.

718
00:33:18,720 --> 00:33:21,320
Dit is zeer 1990s style webdesign.

719
00:33:21,320 --> 00:33:24,130
>> Maar deze dagen, zeker, we hebben
komen veel verder.

720
00:33:24,130 --> 00:33:27,560
En je zult zien, in doorsnede, en zelfs
in het probleem stelde zeven, door

721
00:33:27,560 --> 00:33:31,570
gebruik te maken van bibliotheken dezer dagen,
het is zo veel makkelijker om te maken

722
00:33:31,570 --> 00:33:33,400
mooier dingen snel.

723
00:33:33,400 --> 00:33:36,550
Echt hier, zijn we gewoon krabben
de oppervlakte van wat u kunt doen

724
00:33:36,550 --> 00:33:37,400
stilistisch.

725
00:33:37,400 --> 00:33:41,660
>> En in feite, al wil ik benadrukken
dat dit al steeds lelijk, niet

726
00:33:41,660 --> 00:33:46,030
alleen esthetisch, maar in termen
van de stijl van mijn code, of de

727
00:33:46,030 --> 00:33:47,260
ontwerp van mijn code.

728
00:33:47,260 --> 00:33:52,350
Ik heb momenteel comingled HTML, die
is de groenige geopend markeringen daar met

729
00:33:52,350 --> 00:33:55,160
CSS-eigenschappen, die
is totaal legit.

730
00:33:55,160 --> 00:33:57,200
Dit is werkelijk waar de taal
had zijn oorsprong.

731
00:33:57,200 --> 00:34:01,030
>> Maar in het belang van schone ontwerp,
net zoals we begonnen factoring stuff

732
00:34:01,030 --> 00:34:05,370
uit C bestanden in. h-bestanden, laat
me eigenlijk dat soort praktijk

733
00:34:05,370 --> 00:34:07,990
principe en gaan doen
deze plaats.

734
00:34:07,990 --> 00:34:13,280
Laat ik een stijl tag hier, die
bestaat ook in HTML, en laat mij

735
00:34:13,280 --> 00:34:15,330
geef de volgende.

736
00:34:15,330 --> 00:34:16,360
Laat mij dit wilt verwijderen.

737
00:34:16,360 --> 00:34:18,110
Achtergrondkleur gaat rood te zijn.

738
00:34:18,110 --> 00:34:19,800
Ik ga deze geheel te verwijderen.

739
00:34:19,800 --> 00:34:22,580
Ik ga om zich te ontdoen van de stijl
toeschrijven, en ik ga een unieke

740
00:34:22,580 --> 00:34:24,620
identificeren deze div met een woord -

741
00:34:24,620 --> 00:34:28,750
willekeurig, maar redelijk, citaat
unquote "top." En id is een speciale

742
00:34:28,750 --> 00:34:32,530
attribuut dat uniek definieert
een bepaalde HTML-element

743
00:34:32,530 --> 00:34:33,850
zoals het hebben van die id.

744
00:34:33,850 --> 00:34:37,969
>> Als ik wil nu gestileerd het, hier in
het hoofd van mijn pagina, de binnenkant van de

745
00:34:37,969 --> 00:34:41,730
style-tag, merken dat
Ik kan hash top doen.

746
00:34:41,730 --> 00:34:45,300
En dan kan ik een paar krullend zetten
braces, die doet denken aan C, en dan laat

747
00:34:45,300 --> 00:34:47,130
me plakken in die stilering.

748
00:34:47,130 --> 00:34:49,929
En laat me hier ga je gang en anticiperen
waar ik heen ga met dit.

749
00:34:49,929 --> 00:34:53,380
Ik wil ook een maken
de onderste div.

750
00:34:53,380 --> 00:34:58,010
Laat ik grijp deze afschuwelijke code van beneden
Hier, zet het in hier, en ik zal

751
00:34:58,010 --> 00:35:00,770
een beetje meer anale nu en gestileerde het
door gewoon dingen te zetten op hun eigen

752
00:35:00,770 --> 00:35:02,540
lijn, eindigend met puntkomma's.

753
00:35:02,540 --> 00:35:04,430
Laat me te ontdoen van de stijl-tag.

754
00:35:04,430 --> 00:35:05,320
>> Maar ik ben nog niet klaar.

755
00:35:05,320 --> 00:35:07,406
Ik moet nog iets doen.

756
00:35:07,406 --> 00:35:10,070
Ja, id gelijk citaat unquote, "bottom",
of wat id ik wil

757
00:35:10,070 --> 00:35:11,740
geven dat element.

758
00:35:11,740 --> 00:35:13,420
Nu, laat me weer hierheen gaan.

759
00:35:13,420 --> 00:35:14,360
En dit is afschuwelijk.

760
00:35:14,360 --> 00:35:15,805
Ik kan niet omgaan met 96 punt.

761
00:35:15,805 --> 00:35:16,960
Laten we 24 punten.

762
00:35:16,960 --> 00:35:18,320
Of je zou kunnen worden nauwkeuriger.

763
00:35:18,320 --> 00:35:21,800
U kunt daadwerkelijk gebruik maken van pixels, px, dus
dat krijg je echt fijnere korrel

764
00:35:21,800 --> 00:35:23,220
controle over uw pagina.

765
00:35:23,220 --> 00:35:26,860
>> Even terzijde, dat is niet per se
het beste als gebruikers, voor

766
00:35:26,860 --> 00:35:29,650
toegankelijkheid redenen, willen
in staat zijn om de grootte te verhogen.

767
00:35:29,650 --> 00:35:32,650
Dus beseffen dat er manieren om
dingen die niet noodzakelijkerwijs

768
00:35:32,650 --> 00:35:34,230
harde code alles.

769
00:35:34,230 --> 00:35:37,220
>> Oke, dus het is groter, 24 punt,
dan wat de standaard is.

770
00:35:37,220 --> 00:35:38,630
Maar nu is het een beetje schoner.

771
00:35:38,630 --> 00:35:40,230
En laat me dit nog een stap verder.

772
00:35:40,230 --> 00:35:47,220
Net als het idee van de header-bestanden,
merken we een stap dichter bij dat.

773
00:35:47,220 --> 00:35:52,000
Ik heb meegenomen uit, maar nog steeds links,
binnenkant van mijn pagina, die CSS-regels.

774
00:35:52,000 --> 00:35:56,200
Waarom zou ik dit willen een stap
verder, verwijder dit geheel, en

775
00:35:56,200 --> 00:35:59,860
zet het in een apart bestand?

776
00:35:59,860 --> 00:36:01,070
>> Dus ik kan het hergebruiken, toch?

777
00:36:01,070 --> 00:36:03,155
Dit is gewoon een soort van intuïtie
nu.

778
00:36:03,155 --> 00:36:06,340
Voor, ik beweerde dat het was gewoon
krijgen lelijk met de stijl

779
00:36:06,340 --> 00:36:08,480
attributen binnen de
divs zelf.

780
00:36:08,480 --> 00:36:09,750
Maar gewoon een soort van denken dat door.

781
00:36:09,750 --> 00:36:13,560
Als uw pagina wordt langer en langer, indien
je bent hier zetten, en hier, en

782
00:36:13,560 --> 00:36:18,350
Hier en hier al deze verschillende
kleuren en lettergroottes, en andere dergelijke

783
00:36:18,350 --> 00:36:22,550
attributen, uw pagina is zeer snel
gaat onhandelbaar voor u geworden.

784
00:36:22,550 --> 00:36:24,570
>> Als iemand naar je toe komt en
zegt, oh, weet je wat?

785
00:36:24,570 --> 00:36:28,070
Ik zou heel graag de lettergrootte wijzigen
door twee extra punten, u

786
00:36:28,070 --> 00:36:31,275
zou kunnen hebben om te gaan en zoeken en vervangen
een groot aantal regels code.

787
00:36:31,275 --> 00:36:35,170
Het is veel meer dwingend te centraliseren
al deze esthetiek hier.

788
00:36:35,170 --> 00:36:38,850
Maar als je wilt om die opnieuw te gebruiken
esthetiek in meerdere webpagina's, alle

789
00:36:38,850 --> 00:36:41,100
de meer dwingende om, voor
Zo maakt u een bestand

790
00:36:41,100 --> 00:36:45,290
opgeroepen met de inhoud.

791
00:36:45,290 --> 00:36:46,680
>> En laat mij dit doen.

792
00:36:46,680 --> 00:36:51,150

793
00:36:51,150 --> 00:36:51,920
Sla dit bestand.

794
00:36:51,920 --> 00:36:55,580
Ik zeg styles.css, willekeurige,
maar conventioneel.

795
00:36:55,580 --> 00:36:58,770
Ik zal het in John Harvard's home
Nu directory voor eenvoud.

796
00:36:58,770 --> 00:37:03,880
En wat ik kan doen in mijn webpagina is te krijgen
ontdoen van de stijl-tag helemaal,

797
00:37:03,880 --> 00:37:08,270
en enigszins unintuitively, gebruik dan een koppeling
tag, die een schakel in niet geeft u

798
00:37:08,270 --> 00:37:13,140
de hyperlink, klikbare zin, maar
waar ik zeg koppeling, href gelijk

799
00:37:13,140 --> 00:37:15,120
styles.css.

800
00:37:15,120 --> 00:37:20,050
En de relatie die dit element
heeft met de webpagina is te dienen als

801
00:37:20,050 --> 00:37:21,280
haar style sheet.

802
00:37:21,280 --> 00:37:22,670
>> Dus hoe heb ik dat weten?

803
00:37:22,670 --> 00:37:25,950
Een, je gewoon de handleiding te lezen,
of je Google rond, en u

804
00:37:25,950 --> 00:37:27,000
kijken naar verschillende bronnen.

805
00:37:27,000 --> 00:37:30,520
Ik bedoel, dat is echt hoe je pick-up
technieken als dit, en, consistente

806
00:37:30,520 --> 00:37:34,720
met dit idee van het onderwijs zichzelf nieuwe
talen, nogmaals, zult u merken dat

807
00:37:34,720 --> 00:37:38,830
er is maar een eindig aantal dingen
naar elke taal die, zodra je

808
00:37:38,830 --> 00:37:41,310
hen, zult u merken dat het wordt
sneller en sneller te schrijven.

809
00:37:41,310 --> 00:37:44,180
Inderdaad, het leren van een nieuwe programmeertaal
taal zoveel sneller dan een nieuw

810
00:37:44,180 --> 00:37:47,380
gesproken taal, omdat deze dingen
veel kleiner en meer

811
00:37:47,380 --> 00:37:48,820
nauwkeurig omschreven.

812
00:37:48,820 --> 00:37:51,590
>> Maar ik heb een beetje gemarkeerd
van een anomalie hier.

813
00:37:51,590 --> 00:37:57,750
Waarom heb ik dit gewezen
forward slash hier?

814
00:37:57,750 --> 00:37:59,420
Want ik moet de tag te sluiten.

815
00:37:59,420 --> 00:38:00,530
Ik zou de tag te sluiten.

816
00:38:00,530 --> 00:38:02,750
En je zult talloze middelen te vinden
online dat niet doen

817
00:38:02,750 --> 00:38:04,080
se dicht tags.

818
00:38:04,080 --> 00:38:08,770
En realistisch, het is niet strikt
om technische en er

819
00:38:08,770 --> 00:38:11,950
redenen van de werkelijkheid, browsers zijn gewoon
vrij tolerant ten opzichte van fouten in web

820
00:38:11,950 --> 00:38:14,360
pagina's, ten goede of ten kwade,
maar meestal erger.

821
00:38:14,360 --> 00:38:18,830
>> Dus dit hier is gewoon een schonere manier van
zeggen iets stoms als dit,

822
00:38:18,830 --> 00:38:22,330
waar als je wilt om de link tag te openen
maar sluit het, er is echt geen notie

823
00:38:22,330 --> 00:38:23,720
van content voor een link tag.

824
00:38:23,720 --> 00:38:26,000
Het betekent gewoon laad deze
bestand en zet het hier.

825
00:38:26,000 --> 00:38:30,610
Het is net als scherpe include in C. U kunt
openen en sluiten van een tag in een keer

826
00:38:30,610 --> 00:38:31,660
binnen dezelfde tag.

827
00:38:31,660 --> 00:38:33,520
En er zijn andere voorbeelden van.

828
00:38:33,520 --> 00:38:37,280
Dit is niet de manier om dit te doen, maar
de tag br, voor regeleinden, als ik

829
00:38:37,280 --> 00:38:41,780
echt wilde bereiken wat ik was
proberen voordat door het raken van Enter, indien

830
00:38:41,780 --> 00:38:45,380
Ik expliciet zeggen kabelbreuk, kabelbreuk,
kabelbreuk, kabelbreuk, en

831
00:38:45,380 --> 00:38:49,100
herlaad vervolgens deze pagina, nu merk je
dat onderaan de pagina is,

832
00:38:49,100 --> 00:38:51,940
inderdaad, veel verder naar beneden in
de onderkant van de pagina.

833
00:38:51,940 --> 00:38:55,840
Maar zelfs dat kan nog veel meer worden gedaan
netjes met CSS, en met marges,

834
00:38:55,840 --> 00:38:58,120
en andere dergelijke esthetische
technieken.

835
00:38:58,120 --> 00:38:59,940
>> Dus voor nu, de afhaalrestaurants zijn dit.

836
00:38:59,940 --> 00:39:02,320
In HTML, hebben we deze
dingen-tags genoemd.

837
00:39:02,320 --> 00:39:04,830
In CSS, hebben we deze dingen
riep eigenschappen.

838
00:39:04,830 --> 00:39:08,700
We kunnen comingle deze twee talen,
hetzij met behulp van het attribuut stijl,

839
00:39:08,700 --> 00:39:14,240
of de stijl tag, of toch best, factoring
het uit helemaal, zoals wij doen

840
00:39:14,240 --> 00:39:17,270
in probleem set 7.

841
00:39:17,270 --> 00:39:23,820
Vragen, dan, over de
conceptuele basics hier?

842
00:39:23,820 --> 00:39:24,740
>> PUBLIEK: Ik heb een vraag.

843
00:39:24,740 --> 00:39:25,630
>> LUIDSPREKER 1: Oh, sorry.

844
00:39:25,630 --> 00:39:28,880
>> PUBLIEK: Waarom was het niet gekleurd -

845
00:39:28,880 --> 00:39:31,410
>> LUIDSPREKER 1: Oh, in de andere tab?

846
00:39:31,410 --> 00:39:32,232
Dit hier?

847
00:39:32,232 --> 00:39:33,482
>> PUBLIEK: Nee, het is net als de -

848
00:39:33,482 --> 00:39:35,330

849
00:39:35,330 --> 00:39:39,480
>> LUIDSPREKER 1: Oh, dat is omdat
Ik was slordig.

850
00:39:39,480 --> 00:39:41,350
Ik zet het bestand op de verkeerde plaats.

851
00:39:41,350 --> 00:39:47,840
Dus als ik eigenlijk zet het hier, en ik
chmod het, allemaal + r voor styles.css, en

852
00:39:47,840 --> 00:39:52,050
nu herlaad de pagina, nu we
krijgen de stilering terug.

853
00:39:52,050 --> 00:39:54,530
En omdat de lettergroottes zijn
anders, we hebben niet zo veel te zien

854
00:39:54,530 --> 00:39:55,010
witruimte.

855
00:39:55,010 --> 00:39:58,240
We zien in plaats daarvan wat is de
Standaard is in plaats daarvan.

856
00:39:58,240 --> 00:40:00,050
Goede vraag.

857
00:40:00,050 --> 00:40:00,846
Ja?

858
00:40:00,846 --> 00:40:02,630
>> PUBLIEK: Waarom is de link
-tag in de header?

859
00:40:02,630 --> 00:40:06,270
>> LUIDSPREKER 1: Waarom is de links
-tag in de header -

860
00:40:06,270 --> 00:40:07,650
kort antwoord, gewoon omdat.

861
00:40:07,650 --> 00:40:08,930
Dat is wat is besloten.

862
00:40:08,930 --> 00:40:10,720
Dat is waar de link-tags gaan wanneer
je hebt wat een heet

863
00:40:10,720 --> 00:40:13,650
externe style sheet.

864
00:40:13,650 --> 00:40:16,430
Andere vragen?

865
00:40:16,430 --> 00:40:17,770
>> Oke, nou laten we dit doen.

866
00:40:17,770 --> 00:40:20,500
We hebben zo veel plezier voor ons vandaag.

867
00:40:20,500 --> 00:40:22,480
Dat is gewoon krassen
het oppervlak van CSS.

868
00:40:22,480 --> 00:40:23,010
Laten we dit doen.

869
00:40:23,010 --> 00:40:25,980
Laten we eens een vijf minuten pauze hier
omdat, per e-mail mijn, laten we hangen in

870
00:40:25,980 --> 00:40:27,200
daar tot 02:30-ish vandaag.

871
00:40:27,200 --> 00:40:28,540
Maar als je wel naar
vertrekken, dat is prima.

872
00:40:28,540 --> 00:40:30,380
Maar we zullen verder te gaan na
een vijf minuten pauze.

873
00:40:30,380 --> 00:40:35,930
En we zullen een beetje iets te leren
over PHP, MySQL, en meer.

874
00:40:35,930 --> 00:40:44,520
>> Oke, dus laten we proberen, nu, een das
Enkele van deze ideeën samen en maken,

875
00:40:44,520 --> 00:40:46,180
zeggen, onze eigen zoekmachine.

876
00:40:46,180 --> 00:40:48,570
Ik merkte, nogal vreemd,
de volgende.

877
00:40:48,570 --> 00:40:52,610
Als je op Google.com, je bent
typisch bij een URL zoals deze hier

878
00:40:52,610 --> 00:40:54,870
met niets na de dot com.

879
00:40:54,870 --> 00:40:59,760
Maar als ik iets stoms zoals zoeken
katten, en druk op Enter, dan krijgen we - niet

880
00:40:59,760 --> 00:41:01,300
stom, maar je weet.

881
00:41:01,300 --> 00:41:05,410
>> OK, dus opmerken, aan de bovenkant van de pagina,
nu de URL heeft uiteraard veranderd.

882
00:41:05,410 --> 00:41:07,190
En dit is niet iets
nieuwe met een van ons.

883
00:41:07,190 --> 00:41:09,290
U op koppelingen en spullen
gebeurt op het web.

884
00:41:09,290 --> 00:41:11,420
Maar wat is interessant hier
is de volgende.

885
00:41:11,420 --> 00:41:14,500
Er is een hele hoop rommel, maar laat
me weg te gooien dingen die ik doe niet

886
00:41:14,500 --> 00:41:16,600
helemaal begrijpen of niet
echt kijken relevant.

887
00:41:16,600 --> 00:41:18,490
>> Laat me te ontdoen van deze.

888
00:41:18,490 --> 00:41:20,030
Laat me te ontdoen van deze.

889
00:41:20,030 --> 00:41:22,630
En laat me gewoon te ontdoen
dit alles.

890
00:41:22,630 --> 00:41:28,840
En nu merken dat katten is in de URL,
volgde met een q, dan gelijke

891
00:41:28,840 --> 00:41:29,710
teken aan de voorkant ervan.

892
00:41:29,710 --> 00:41:32,110
Dus het blijkt dat dit is hoe de
manier waarop het werkt als het gaat

893
00:41:32,110 --> 00:41:33,360
om input en output.

894
00:41:33,360 --> 00:41:37,510
>> We hebben lang gesproken over
zwarte dozen, toch?

895
00:41:37,510 --> 00:41:41,650
Dus als dit is een functie geïmplementeerd
hier als een black box, het duurt ingang

896
00:41:41,650 --> 00:41:45,290
en produceert output, goed, het betekent
waarmee u input te leveren aan een

897
00:41:45,290 --> 00:41:49,270
website door, vaak zijn URL.

898
00:41:49,270 --> 00:41:52,850
Je zet gewoon een vraagteken
en vervolgens een sleutel is gelijk aan waarde.

899
00:41:52,850 --> 00:41:56,740
En dan misschien een ampersand, en vervolgens
een andere toets is gelijk aan waarde, dan misschien

900
00:41:56,740 --> 00:41:58,810
andere ampersand, key gelijk waarde.

901
00:41:58,810 --> 00:42:03,030
Dat is hoe je voorbij in sleutels en
waarden, paren van ingangen.

902
00:42:03,030 --> 00:42:07,050
>> Dus als ik druk op Enter nu, wat is
interessante informatie over Google is dat alle

903
00:42:07,050 --> 00:42:10,420
die rommel Ik verwijderde niet verschijnt
om strikt noodzakelijk.

904
00:42:10,420 --> 00:42:15,120
Alles wat ik nodig om naar Google te sturen is vraag
mark q gelijk katten te krijgen

905
00:42:15,120 --> 00:42:16,160
back sommige katten.

906
00:42:16,160 --> 00:42:20,160
Nou, de implicatie van dat, dan,
wordt als ik trek gedit, ben ik begonnen

907
00:42:20,160 --> 00:42:24,360
het maken van mijn eigen zoekmachine hier
in een bestand genaamd seach0.html.

908
00:42:24,360 --> 00:42:26,750
>> En laat me gaan en verwijderen
nog een regel dat je

909
00:42:26,750 --> 00:42:27,910
was niet de bedoeling om te zien.

910
00:42:27,910 --> 00:42:31,070
En nu, laat me gaan in mijn eigen browser,
dus niet naar Google, en ga naar

911
00:42:31,070 --> 00:42:34,900
http://localhost.

912
00:42:34,900 --> 00:42:36,220
En dat gaat in de weg te krijgen.

913
00:42:36,220 --> 00:42:43,240
Dus we gaan te hebben om afscheid te nemen
dat voor nu, verplaatst deze dan hier,

914
00:42:43,240 --> 00:42:46,270
oh, nu gaan we naar moeten
afscheid te nemen van dat bestand.

915
00:42:46,270 --> 00:42:51,700
>> Wanneer u een bestand met de naam hebben
index.html of index.php in een

916
00:42:51,700 --> 00:42:54,980
directory, als de webserver is
geconfigureerd op deze manier, wat je zult

917
00:42:54,980 --> 00:42:59,600
zie, bij verstek, is de inhoud van die
bestand in plaats van een bedrijf van de

918
00:42:59,600 --> 00:43:02,330
directory, zoals ik hier wilde.

919
00:43:02,330 --> 00:43:03,750
Meer hierover in het spec.

920
00:43:03,750 --> 00:43:04,610
Je zag dat niet.

921
00:43:04,610 --> 00:43:06,360
>> Dus dit is wat ik eigenlijk wilde.

922
00:43:06,360 --> 00:43:08,810
Maar een moment geleden, was er een
bestand in deze map met de naam

923
00:43:08,810 --> 00:43:11,290
index.html en index.php.

924
00:43:11,290 --> 00:43:13,380
En dus de webserver was
laat me die bestanden.

925
00:43:13,380 --> 00:43:15,900
In plaats daarvan wil ik deze map
opsomming hier.

926
00:43:15,900 --> 00:43:18,340
>> Dus ik ga om te gaan in
CSS en ga naar search0.

927
00:43:18,340 --> 00:43:21,770
En ik beweer dat dit gaat het worden
het begin van mijn eigen concurrentiepositie

928
00:43:21,770 --> 00:43:22,490
zoekmachine.

929
00:43:22,490 --> 00:43:27,630
En om dit te doen, ga ik om te gaan in
Hier, in de CSS, en open met

930
00:43:27,630 --> 00:43:30,190
gedit, search 0.

931
00:43:30,190 --> 00:43:32,280
Maar helaas, er is
niet veel te doen hier.

932
00:43:32,280 --> 00:43:35,690
Alles wat ik deed was gebruik maken van een kop-tag, die
toevallig genoemd h1, die

933
00:43:35,690 --> 00:43:38,180
in wezen betekent groot en
vet, en dat is het.

934
00:43:38,180 --> 00:43:40,810
Maar de manier waarop we kunnen
bieden ingangen zijn via deze

935
00:43:40,810 --> 00:43:42,180
dingen geroepen vormen.

936
00:43:42,180 --> 00:43:46,040
>> Dus laat me gaan en openen en sluiten,
preventief, een form tag daar.

937
00:43:46,040 --> 00:43:48,060
En laat mij ga je gang en doe
zoiets als dit.

938
00:43:48,060 --> 00:43:51,430
Ingang, soort gelijk aan tekst.

939
00:43:51,430 --> 00:43:56,320
En dan laten we sluiten de tag binnen
de beugels zelf.

940
00:43:56,320 --> 00:43:58,800
Ik heb geen behoefte aan een tekstveld starten
en stoppen met een tekstveld.

941
00:43:58,800 --> 00:44:01,080
Het gaat gewoon om daar te zijn of niet.

942
00:44:01,080 --> 00:44:06,210
>> En dan onder dat, laten we het doen
input type gelijk te dienen.

943
00:44:06,210 --> 00:44:06,870
Bewaar deze.

944
00:44:06,870 --> 00:44:08,630
En laten we nu gewoon doen een
snel sanity check.

945
00:44:08,630 --> 00:44:09,820
Laten we het herladen.

946
00:44:09,820 --> 00:44:10,890
>> OK, dus het is niet slecht.

947
00:44:10,890 --> 00:44:13,260
Het is niet Google's stijl,
maar het is vrij dicht.

948
00:44:13,260 --> 00:44:13,920
Er is een tekstveld.

949
00:44:13,920 --> 00:44:17,190
Ik kan een aantal dingen typen in, druk op Enter,
maar er gebeurt nog niets.

950
00:44:17,190 --> 00:44:21,090
En dat komt omdat ik heb niet opgegeven
een actie voor dit formulier, zo te zeggen.

951
00:44:21,090 --> 00:44:23,860
Dus als ik terug naar het formulier element,
het blijkt, en ik weet dat dit alleen

952
00:44:23,860 --> 00:44:27,460
uit het lezen van de documentatie, die
de form tag neemt een attribuut

953
00:44:27,460 --> 00:44:31,880
riep actie dat is de URL
van de website waarnaar u

954
00:44:31,880 --> 00:44:34,790
het formulier wilt sturen.

955
00:44:34,790 --> 00:44:37,610
>> Ik denk niet echt dat we tijd hebben om
de uitvoering van het gehele back-end voor een

956
00:44:37,610 --> 00:44:38,570
zoekmachine vandaag.

957
00:44:38,570 --> 00:44:41,900
Dus we gaan gewoon om te zeggen, eh,
ga naar google.com / search.

958
00:44:41,900 --> 00:44:43,450
En nu laat ik sluit mijn quotes.

959
00:44:43,450 --> 00:44:46,070
En laat me verder te specificeren dat
de methode om gaat

960
00:44:46,070 --> 00:44:47,120
genoemd te worden te krijgen.

961
00:44:47,120 --> 00:44:50,650
>> Lang verhaal kort, er is op twee manieren, ten
Tenminste, dat kunt u informatie indienen

962
00:44:50,650 --> 00:44:51,880
van browser naar server.

963
00:44:51,880 --> 00:44:55,340
Een is te krijgen, en, voor de hedendaagse doeleinden,
dat betekent in de URL.

964
00:44:55,340 --> 00:44:58,730
Je ziet precies de vraagtekens, het
gelijk tekenen, en ampersands dat

965
00:44:58,730 --> 00:44:59,780
we eerder zagen.

966
00:44:59,780 --> 00:45:02,890
Of is er een alternatief genaamd paal.

967
00:45:02,890 --> 00:45:06,490
Voor nu, weten dat bericht vaak wordt gebruikt
wanneer u bestanden wilt uploaden, zoals

968
00:45:06,490 --> 00:45:09,820
afbeeldingen, enzovoort, of wanneer u wilt
submit creditcardgegevens, of

969
00:45:09,820 --> 00:45:13,810
wachtwoorden, iets dat het niet
echt zinvol, conceptueel, of

970
00:45:13,810 --> 00:45:18,020
veiligheid verstandig, om te eindigen in de URL van de
uw browser, waar spionage ouders,

971
00:45:18,020 --> 00:45:21,520
of huisgenoten, of iedereen met toegang
naar uw computer zou kunnen zien.

972
00:45:21,520 --> 00:45:23,110
>> Dus laten we slaan dat hier.

973
00:45:23,110 --> 00:45:24,480
En ik moet nog iets doen.

974
00:45:24,480 --> 00:45:27,250
Het is niet voldoende alleen te
zeggen geef me een tekstveld.

975
00:45:27,250 --> 00:45:29,850
Ik moet dat gebied te geven
de waarde van een naam.

976
00:45:29,850 --> 00:45:34,500
Dus laat ik Google's keuze lenen
namen, q, en geef die tweede

977
00:45:34,500 --> 00:45:38,150
toeschrijven me niet echt zorgen over
de naam van de knop Verzenden.

978
00:45:38,150 --> 00:45:40,890
Alles wat ik zorg over is het indienen
wat de gebruiker typt inch

979
00:45:40,890 --> 00:45:41,940
>> En nu is dit soort lelijke.

980
00:45:41,940 --> 00:45:42,820
Het zegt alleen maar te dienen.

981
00:45:42,820 --> 00:45:46,350
Het blijkt, en ik weet dat dit uit de
documentatie, kan ik eigenlijk zeggen

982
00:45:46,350 --> 00:45:51,710
waarde citaat unquote "CS50 gelijk
seach, "close citaat.

983
00:45:51,710 --> 00:45:53,030
Laten we dan weer herladen.

984
00:45:53,030 --> 00:45:57,020
Dus ik blijf het raken van Command-R, of
Controle-R op mijn toetsenbord om te herladen.

985
00:45:57,020 --> 00:45:58,605
>> Nu hebben we een interessantere
zoekmachine.

986
00:45:58,605 --> 00:46:00,340
Het niet helemaal eruit
Nog google, dat wel.

987
00:46:00,340 --> 00:46:04,100
Dus laten we gaan vooruit in hier en
doe een beetje regeleinde.

988
00:46:04,100 --> 00:46:06,066
>> OK, dus nu hebben we Google.

989
00:46:06,066 --> 00:46:08,260
We eigenlijk bijna hebben Google.

990
00:46:08,260 --> 00:46:10,460
Dus nu wat er gaat gebeuren?

991
00:46:10,460 --> 00:46:12,220
Ik ga typen in iets
zoals Cats.

992
00:46:12,220 --> 00:46:16,570
En de browser gaat ontleden
die vorm die ik gedefinieerd.

993
00:46:16,570 --> 00:46:19,470
En het gaat om sturen
de gebruiker om die URL.

994
00:46:19,470 --> 00:46:23,420
Dus deze keer, voor een aantal nieuwsgierige reden,
Ik heb meer informatie over aandelen

995
00:46:23,420 --> 00:46:24,410
dan over daadwerkelijke katten.

996
00:46:24,410 --> 00:46:30,580
Maar dat is prima want merken we nog steeds
hier belandde, q gelijk aan katten.

997
00:46:30,580 --> 00:46:35,200
>> Dus lang verhaal kort, het lijkt vrij
triviaal om invoer van de gebruiker.

998
00:46:35,200 --> 00:46:38,190
En om eerlijk te zijn, is er trossen
andere soorten formuliervelden.

999
00:46:38,190 --> 00:46:41,510
Er is selectievakjes, en weinig onderling
uitsluitende keuzerondjes, en

1000
00:46:41,510 --> 00:46:42,960
drop-down menu's, en meer.

1001
00:46:42,960 --> 00:46:46,160
Maar al die zijn zo relatief
gemakkelijk geïmplementeerd als

1002
00:46:46,160 --> 00:46:48,040
dit tekstveld was.

1003
00:46:48,040 --> 00:46:52,050
En uiteindelijk hebben we gewoon te maken
zeker iemand luistert op de andere

1004
00:46:52,050 --> 00:46:56,490
het einde van de lijn om te krijgen dat
verwerkte informatie, een of andere manier, en

1005
00:46:56,490 --> 00:46:58,440
geef ons onze katten.

1006
00:46:58,440 --> 00:47:00,840
>> Laten we eens kijken naar een iets
meer betrokken voorbeeld.

1007
00:47:00,840 --> 00:47:06,020
Laat me gaan in directory mijn Vhost's,
in de lokale host, openbare, en waar ik

1008
00:47:06,020 --> 00:47:06,980
zet vandaag de broncode.

1009
00:47:06,980 --> 00:47:09,800
Dit alles zal worden op de cursus
website voor u om te sleutelen.

1010
00:47:09,800 --> 00:47:15,420
En als ik in froshims, laat me open
up dit bestand nu, froshim0.php.

1011
00:47:15,420 --> 00:47:18,460
Deze is een beetje meer verbose, dus
we zullen dit niet schrijven vanuit het niets.

1012
00:47:18,460 --> 00:47:21,970
Maar merk nu een paar enigszins
bekende eigenschappen.

1013
00:47:21,970 --> 00:47:24,550
>> Een, form tag, andere actie.

1014
00:47:24,550 --> 00:47:25,670
Het is niet een volledige URL.

1015
00:47:25,670 --> 00:47:29,930
Nu, het is blijkbaar naar bestand genaamd
register0.php omdat, in een ogenblik,

1016
00:47:29,930 --> 00:47:32,660
Ik ga mezelf leren een beetje
iets over PHP, een programmeertaal

1017
00:47:32,660 --> 00:47:37,360
taal, want PHP kan worden gebruikt
voeren wat Google geïmplementeerd als

1018
00:47:37,360 --> 00:47:39,650
de achterkant van hun zoekmachines.

1019
00:47:39,650 --> 00:47:42,890
>> Google, in werkelijkheid, waarschijnlijk gebruikt
sommige Python, sommige C + +, en

1020
00:47:42,890 --> 00:47:44,230
trossen van andere talen.

1021
00:47:44,230 --> 00:47:48,230
Maar we kunnen zeker implementeren zoekopdracht
resultaten met behulp van PHP als we wilden.

1022
00:47:48,230 --> 00:47:49,610
Maar voor nu, zullen we het simpel houden.

1023
00:47:49,610 --> 00:47:53,320
En dit is eigenlijk denken aan een
van de andere allereerste websites I

1024
00:47:53,320 --> 00:47:54,490
maakte jaren geleden.

1025
00:47:54,490 --> 00:47:58,160
>> Terug in mijn dag, u geregistreerd voor
intramurale sport als eerstejaarsstudent door

1026
00:47:58,160 --> 00:48:00,880
het invullen van een stuk papier, het lopen
over het erf, en laten vallen in

1027
00:48:00,880 --> 00:48:04,890
de mailbox van een Proctor in
Wigglesworth, en dat was hoe je

1028
00:48:04,890 --> 00:48:05,460
geregistreerd.

1029
00:48:05,460 --> 00:48:09,650
En dus mijn project kort na CS50,
was tot we deze, die perfect maakt

1030
00:48:09,650 --> 00:48:13,460
zin, op het web, die niet was
zoals in de mode dan als nu.

1031
00:48:13,460 --> 00:48:17,510
Maar alles wat we moesten doen was,
wezen, een HTML-formulier.

1032
00:48:17,510 --> 00:48:19,640
>> En die vorm zag
ongeveer als volgt.

1033
00:48:19,640 --> 00:48:22,480
Ik had een ingang voor de
naam eerstejaars's.

1034
00:48:22,480 --> 00:48:27,780
Ik had nog een vakje voor het al dan
of ze niet wilden zijn kapitein, wat

1035
00:48:27,780 --> 00:48:30,400
hun geslacht was, en
wat hun slaapzaal was.

1036
00:48:30,400 --> 00:48:33,370
En dan heb ik hard gecodeerd in de dingen
zoals Apley Court, en Canaday,

1037
00:48:33,370 --> 00:48:34,880
Grays, enzovoort.

1038
00:48:34,880 --> 00:48:36,300
>> Dus nogmaals, nieuwe tags.

1039
00:48:36,300 --> 00:48:39,820
Nog niet eerder gezien deze, nieuwe
attributen, maar vrij toegankelijk.

1040
00:48:39,820 --> 00:48:42,360
Zodra u een voorbeeld te zien, kunt u vriendelijk
van lenen dat idee en maak een druppel

1041
00:48:42,360 --> 00:48:43,820
down menu voor de meeste iets.

1042
00:48:43,820 --> 00:48:46,350
Maar wat is belangrijk is dat elk van
deze dingen hebben namen.

1043
00:48:46,350 --> 00:48:49,720
En aan de onderkant van deze vorm, is er
een submit knop waarvan het etiket,

1044
00:48:49,720 --> 00:48:51,510
of de waarde, is register.

1045
00:48:51,510 --> 00:48:52,670
>> Dus laten we gaan naar deze pagina.

1046
00:48:52,670 --> 00:48:55,050
Laat me teruggaan naar de
directory listing.

1047
00:48:55,050 --> 00:48:59,410
Laat me gaan in froshims,
en ga naar froshim0.php.

1048
00:48:59,410 --> 00:49:01,150
Dus het is afschuwelijk, om eerlijk te zijn.

1049
00:49:01,150 --> 00:49:03,950
Dus zou ik zeker dit stileren
met wat CSS, kon ik wat maken

1050
00:49:03,950 --> 00:49:06,890
graphics, misschien voeg wat kleuren,
en maken deze mooier.

1051
00:49:06,890 --> 00:49:10,530
Maar functioneel is, zou ik zeggen dat dit
is eigenlijk behoorlijk compleet.

1052
00:49:10,530 --> 00:49:15,190
>> Helaas, vul ik bij deze uit,
David, Kapitein, Man, zullen we kiezen,

1053
00:49:15,190 --> 00:49:20,510
laten we zeggen Matthews, Register,
alles wat er gebeurt is het volgende.

1054
00:49:20,510 --> 00:49:21,910
Maar merken een paar afhaalrestaurants.

1055
00:49:21,910 --> 00:49:27,130
Een, wat file die kwam terug
resultaten, blijkbaar?

1056
00:49:27,130 --> 00:49:29,470
Zo is het, inderdaad, register0.php.

1057
00:49:29,470 --> 00:49:34,570
Dus het feit dat we die actie zagen
waarde een moment geleden voor register0, dit

1058
00:49:34,570 --> 00:49:37,500
bevestigt dat we inderdaad beëindigd
up op dat bestand.

1059
00:49:37,500 --> 00:49:39,040
>> Nu dit is gewoon lelijk tekst.

1060
00:49:39,040 --> 00:49:42,810
Maar merken dat deze tekst is
afkomstig uit lokale host,

1061
00:49:42,810 --> 00:49:44,170
die uit het apparaat.

1062
00:49:44,170 --> 00:49:46,350
Denk aan het apparaat nu zo gewoon
een webserver die zou kunnen worden in de

1063
00:49:46,350 --> 00:49:46,910
Science Center.

1064
00:49:46,910 --> 00:49:48,060
Het zou kunnen zijn op de daadwerkelijke webpagina.

1065
00:49:48,060 --> 00:49:49,850
Dus het is publiek toegankelijk.

1066
00:49:49,850 --> 00:49:55,480
>> Zo duidelijk, er is een manier van het doorgeven
vormen veld ingangen naar een server

1067
00:49:55,480 --> 00:49:56,840
zodat het kan iets mee te doen.

1068
00:49:56,840 --> 00:49:59,020
Helaas, register0
is nogal dom.

1069
00:49:59,020 --> 00:50:01,870
Alles wat het doet is het uitprinten een array
dat ziet er zo uit.

1070
00:50:01,870 --> 00:50:04,790
En het is niet een array in de
zin dat we het weten.

1071
00:50:04,790 --> 00:50:08,760
Blijkt dat PHP, en veel
talen, hebben niet alleen getalsmatig

1072
00:50:08,760 --> 00:50:12,350
geïndexeerde arrays waarvan de eerste index is
nul, dan een, dan twee, dan punt,

1073
00:50:12,350 --> 00:50:13,780
punt, punt, n minus 1.

1074
00:50:13,780 --> 00:50:16,400
>> Dit is wat een heet
associatieve array.

1075
00:50:16,400 --> 00:50:21,150
Een associatieve array is een waarin
U kunt de belangrijkste waarde-paren op een plaats waar

1076
00:50:21,150 --> 00:50:23,160
de sleutel is niet noodzakelijk een nummer.

1077
00:50:23,160 --> 00:50:25,580
Het kan feitelijk een tekenreeks, een woord.

1078
00:50:25,580 --> 00:50:28,230
En dus dit kan worden uitgevoerd,
onder de motorkap, het blijkt,

1079
00:50:28,230 --> 00:50:31,896
met een gegevensstructuur bekend als een?

1080
00:50:31,896 --> 00:50:33,600
Dacht dat er iets dramatisch
stond te gebeuren -

1081
00:50:33,600 --> 00:50:34,840
hash table.

1082
00:50:34,840 --> 00:50:38,955
>> Dus een hash table, rappel, die van u
die deed het voor P set 6, of zelfs te herinneren

1083
00:50:38,955 --> 00:50:44,110
het, in ieder geval, zelfs als u een poging deed, een
hash tabel in tonen, werd gebruikt

1084
00:50:44,110 --> 00:50:45,090
gewoon opslaan woorden.

1085
00:50:45,090 --> 00:50:47,980
Maar echt, was je het opslaan
sleutels en waarden.

1086
00:50:47,980 --> 00:50:51,940
Als je implementeerde een hash-tabel voor P
set 6 woordenboek, de sleutels waren de

1087
00:50:51,940 --> 00:50:56,890
woorden zelf, en de waarden
waren effectief waar of onwaar.

1088
00:50:56,890 --> 00:51:00,190
Ja, hier, of impliciet,
nee, niet hier.

1089
00:51:00,190 --> 00:51:02,140
>> Nou, we kunnen dat idee generaliseren.

1090
00:51:02,140 --> 00:51:06,230
En we konden een zeer vergelijkbare gegevens te gebruiken
structuur niet tekenreeks opslaan

1091
00:51:06,230 --> 00:51:10,180
zich alleen in je hash table, maar
veronderstellen dat in elk van je hash

1092
00:51:10,180 --> 00:51:11,130
tabel nodes.

1093
00:51:11,130 --> 00:51:14,210
En je kan zelfs dit doen in een try
in plaats van gewoon een bool.

1094
00:51:14,210 --> 00:51:15,350
Je zou iets anders hebben.

1095
00:51:15,350 --> 00:51:19,590
Wat als de sleutel was niet maxwell, voor
Zo, maar citaat unquote "naam", of

1096
00:51:19,590 --> 00:51:22,900
citeer unquote "captain." En de binnenkant van
uw C datastructuur, zet je een

1097
00:51:22,900 --> 00:51:26,170
waarde, niet alleen een Boolean, maar value
als citaat unquote "David," of

1098
00:51:26,170 --> 00:51:28,690
"M" of "Matthews," enzovoort.

1099
00:51:28,690 --> 00:51:33,170
>> Dus diezelfde data structuren die we gebruiken
blijkbaar bestaan ​​in andere talen.

1100
00:51:33,170 --> 00:51:37,650
En ik zou beweren dat ze eigenlijk veel,
veel eenvoudiger om toegang te krijgen hier.

1101
00:51:37,650 --> 00:51:40,300
Laten we in feite een kijkje nemen
nu circa deze syntax.

1102
00:51:40,300 --> 00:51:43,120
>> Ik ga om te gaan in een PHP directory.

1103
00:51:43,120 --> 00:51:48,390
En ik ga naar een betere openstelling van
versie van hello-0 van voor.

1104
00:51:48,390 --> 00:51:50,270
Merk op dat alles wat ik deed was
voeg wat opmerkingen.

1105
00:51:50,270 --> 00:51:52,530
Dus we kunnen ontdoen van die afleiding.

1106
00:51:52,530 --> 00:51:57,610
>> En dit programma inderdaad afgedrukt
hallo omdat ik heb aangegeven tussen

1107
00:51:57,610 --> 00:52:01,420
tags die ik wil dat code uit te voeren.

1108
00:52:01,420 --> 00:52:03,380
Nu, we zullen zien in een moment
waarom dit nuttig is.

1109
00:52:03,380 --> 00:52:05,630
Maar laten we openen een ander voorbeeld.

1110
00:52:05,630 --> 00:52:10,430
Laat me ga je gang en open te zeggen,
gedit van omstandigheden een.

1111
00:52:10,430 --> 00:52:12,970
>> Dit is nu de weg terug in de tijd.

1112
00:52:12,970 --> 00:52:16,320
Maar weken geleden, denk ik, in de week een of
week twee, hadden we een voorbeeld genoemd

1113
00:52:16,320 --> 00:52:18,470
conditions1.c.

1114
00:52:18,470 --> 00:52:22,050
En ik besloot om het re-implementeren in PHP,
gewoon soort benadrukken dat

1115
00:52:22,050 --> 00:52:26,500
PHP, syntactisch, is bijna identiek
naar C. Dit is niet een enorme sprong

1116
00:52:26,500 --> 00:52:27,840
van vorige week op deze.

1117
00:52:27,840 --> 00:52:31,230
>> Let op bij de bovenkant van dit programma, dat
begint, zoals voorheen, met enkele

1118
00:52:31,230 --> 00:52:34,260
reacties, die ik zal ontdoen
als een afleiding.

1119
00:52:34,260 --> 00:52:37,410
Merk op dat ik in PHP
modus in dit bestand.

1120
00:52:37,410 --> 00:52:40,160
Dus deze code, we zullen zien,
krijgt geëxecuteerd.

1121
00:52:40,160 --> 00:52:42,670
Merk op dat er readline,
dat is waarschijnlijk de

1122
00:52:42,670 --> 00:52:46,230
analoge in PHP van getString.

1123
00:52:46,230 --> 00:52:47,390
Merken dat het een beetje anders.

1124
00:52:47,390 --> 00:52:51,410
Je eigenlijk geef een prompt om de
functie genaamd gelezen lijn, en dat is

1125
00:52:51,410 --> 00:52:52,180
wat de gebruiker ziet.

1126
00:52:52,180 --> 00:52:53,520
Zodat je niet printf handmatig hoeft te doen.

1127
00:52:53,520 --> 00:52:54,860
Maar dat is geen big deal.

1128
00:52:54,860 --> 00:52:59,150
Ik ga om te slaan, de binnenkant van $ n, de
retourneren waarde van dit, dus wat de

1129
00:52:59,150 --> 00:53:00,490
types gebruiker in is hun int.

1130
00:53:00,490 --> 00:53:01,660
En hier is nog een nieuwsgierigheid.

1131
00:53:01,660 --> 00:53:05,810
Het blijkt, in PHP, een variabele
gewoon moet worden voorafgegaan

1132
00:53:05,810 --> 00:53:06,970
met een dollar teken.

1133
00:53:06,970 --> 00:53:08,110
Het is een beetje vervelend.

1134
00:53:08,110 --> 00:53:10,870
Maar let op wat ik niet heb gedaan in PHP.

1135
00:53:10,870 --> 00:53:13,980
Wat ontbreekt in de linkerhand
kant van het gelijk-teken?

1136
00:53:13,980 --> 00:53:15,430
>> Geen vermelding van type.

1137
00:53:15,430 --> 00:53:19,400
Dit is zo anders dan C. Voor een betere
of ten kwade, PHP is een losjes

1138
00:53:19,400 --> 00:53:20,550
getypte taal.

1139
00:53:20,550 --> 00:53:22,010
Het heeft wel nummers.

1140
00:53:22,010 --> 00:53:23,240
Het heeft wel strings.

1141
00:53:23,240 --> 00:53:24,015
Het heeft wel Booleans.

1142
00:53:24,015 --> 00:53:26,220
En het heeft wel een paar
andere gegevenstypen.

1143
00:53:26,220 --> 00:53:30,570
Maar u, de programmeur, meestal
geen zorgen te maken over hen.

1144
00:53:30,570 --> 00:53:34,010
De kop van dit is dat het
het een beetje makkelijker te programmeren.

1145
00:53:34,010 --> 00:53:35,380
U kunt denken een beetje minder.

1146
00:53:35,380 --> 00:53:39,840
Het nadeel is het opent ook tot
potentiële bugs als je per ongeluk

1147
00:53:39,840 --> 00:53:43,080
behandelen een aantal als een tekenreeks, een string
als een getal, potentieel, maar ook

1148
00:53:43,080 --> 00:53:46,150
Vervolgens, PHP, en een groot aantal andere talen,
zijn vrij tolerant.

1149
00:53:46,150 --> 00:53:49,050
Zij zullen gebruiken wat heet
impliciete casting.

1150
00:53:49,050 --> 00:53:55,220
En als je probeert te n te gebruiken in het kader
een numerieke situatie, zal

1151
00:53:55,220 --> 00:53:58,040
zetten wat hier gaat om een
snaar, want als typen van de gebruiker

1152
00:53:58,040 --> 00:54:01,570
iets in, en je het resultaat te krijgen,
zoals met readline, of krijgen touwtje,

1153
00:54:01,570 --> 00:54:02,910
dat gaat een string terug.

1154
00:54:02,910 --> 00:54:07,360
>> Maar let op, een paar regels later, I
controleren of n groter is dan nul.

1155
00:54:07,360 --> 00:54:13,370
Dus PHP gaat impliciet werpen mijn
"String" 123, of wat de gebruiker

1156
00:54:13,370 --> 00:54:14,860
types in, in een int.

1157
00:54:14,860 --> 00:54:18,730
Dus in het kort, spul werkt gewoon
veel intuïtiever.

1158
00:54:18,730 --> 00:54:23,410
Zodat we nu beginnen om een ​​paar van de ontspanning
dingen die we hebben gedaan in het verleden.

1159
00:54:23,410 --> 00:54:24,780
>> Een groot deel van dit spul is
hetzelfde, dat wel.

1160
00:54:24,780 --> 00:54:26,340
Nog steeds hebben gelijk gelijk.

1161
00:54:26,340 --> 00:54:30,350
Terzijde PHP heeft ook gelijk gelijk
gelijk, maar meer op dat, misschien, in

1162
00:54:30,350 --> 00:54:30,850
de toekomst.

1163
00:54:30,850 --> 00:54:31,150
Dat was een.

1164
00:54:31,150 --> 00:54:35,660
Typo maar twee is tekenen betekent hetzelfde
ding als voorheen, voor de vergelijking.

1165
00:54:35,660 --> 00:54:37,060
printf betekent hetzelfde als voorheen.

1166
00:54:37,060 --> 00:54:39,160
Backslash n betekent hetzelfde
ding als voorheen.

1167
00:54:39,160 --> 00:54:40,390
>> Dus hoe kan ik dit programma uit te voeren?

1168
00:54:40,390 --> 00:54:44,400
Nou, als voorheen, als ik dat doe PHP,
conditions1.php, en type in

1169
00:54:44,400 --> 00:54:46,560
een getal als 123.

1170
00:54:46,560 --> 00:54:47,720
Dat is een positief getal.

1171
00:54:47,720 --> 00:54:49,510
Als ik typ in 0, ik kies 0.

1172
00:54:49,510 --> 00:54:53,700
En als ik typ in negatieve 123, krijg ik
terug een negatief getal, die alleen is

1173
00:54:53,700 --> 00:54:59,050
te zeggen, syntactisch, PHP
is super, super dergelijke.

1174
00:54:59,050 --> 00:55:03,250
>> Waarom is dit zo nu nuttig
in een web context?

1175
00:55:03,250 --> 00:55:06,710
Nou, laten we teruggaan naar dit froshims
Zo, dat zag,

1176
00:55:06,710 --> 00:55:08,600
weer, zoals deze hier.

1177
00:55:08,600 --> 00:55:11,580
En laten we eigenlijk trek de webpagina
nogmaals, dat zag er zo uit.

1178
00:55:11,580 --> 00:55:14,930
Wat kunnen we doen met de
gegevens die zijn ingediend?

1179
00:55:14,930 --> 00:55:18,770
>> Nou, laat ik open een nieuwere
van deze.

1180
00:55:18,770 --> 00:55:20,920
En je zult zien dat het probleem
sets specificatie loopt u

1181
00:55:20,920 --> 00:55:22,850
door middel van een paar van deze.

1182
00:55:22,850 --> 00:55:29,610
In plaats van te beginnen met nul,
laten we eens kijken naar froshims3,

1183
00:55:29,610 --> 00:55:31,410
die wel een beetje meer.

1184
00:55:31,410 --> 00:55:34,780
>> Merkt eerst, eigenlijk, laten we openen
up wat 0 was, dus je ziet

1185
00:55:34,780 --> 00:55:37,170
wat register 0 was.

1186
00:55:37,170 --> 00:55:40,040
Let op wat register 0 gedaan.

1187
00:55:40,040 --> 00:55:41,730
One, Ik heb commentaar op de top.

1188
00:55:41,730 --> 00:55:43,900
Delete deze en richten ons alleen op dit.

1189
00:55:43,900 --> 00:55:48,730
De meeste van de inhoud van register0.php
zijn, uiteraard, welke taal?

1190
00:55:48,730 --> 00:55:49,980
Gewoon rauw PHP.

1191
00:55:49,980 --> 00:55:53,430
>> Dus mededeling, betekent dit bestand niet starten
met op dit moment open houder,

1192
00:55:53,430 --> 00:55:54,970
vraagteken, PHP.

1193
00:55:54,970 --> 00:55:59,800
PHP doet kun je vermengen
PHP-code met HTML tags.

1194
00:55:59,800 --> 00:56:04,130
Maar ik heb dat hier binnen gedaan
van de pagina hier.

1195
00:56:04,130 --> 00:56:08,180
>> Nu, nogmaals, zou je alleen maar weten dit uit
hebben gezocht naar de handleiding. print_r,

1196
00:56:08,180 --> 00:56:13,410
het blijkt, is print_recursive.
_recursive En dit is slechts een handig

1197
00:56:13,410 --> 00:56:16,780
nutsfunctie die net afgedrukt,
recursief, wat je ook inleveren.

1198
00:56:16,780 --> 00:56:18,760
Als je het overhandigen van een array,
het zal een array afdrukken.

1199
00:56:18,760 --> 00:56:20,180
Als je het overhandigen van een aantal,
het zal een aantal af te drukken.

1200
00:56:20,180 --> 00:56:21,570
Geef het een string, het zal
afdrukken van een string.

1201
00:56:21,570 --> 00:56:24,500
Als je het een hash table de hand, het
drukt een hash table.

1202
00:56:24,500 --> 00:56:26,730
Je hoeft niet alles te schrijven
van die code zelf.

1203
00:56:26,730 --> 00:56:29,490
>> Nu merken dat ik het invoeren
PHP modus dan hier.

1204
00:56:29,490 --> 00:56:32,070
Ik ben het verlaten van PHP mode hierheen.

1205
00:56:32,070 --> 00:56:35,950
Dus toen de webserver leest dit bestand
boven naar beneden en van links naar rechts, omdat

1206
00:56:35,950 --> 00:56:40,750
het eindigt in een bestandsnaam genoemd. php,
wat is niet de binnenkant van PHP tags is

1207
00:56:40,750 --> 00:56:42,820
gewoon om te spit worden
uit, zoals rauwe HTML.

1208
00:56:42,820 --> 00:56:43,630
No big deal.

1209
00:56:43,630 --> 00:56:49,280
Maar zodra de webserver merkt
dit, het gaat om te zeggen, ik zou niet

1210
00:56:49,280 --> 00:56:51,850
uitspugen, letterlijk, print_r van de post.

1211
00:56:51,850 --> 00:56:54,910
Ik zou de volgende uit te voeren
regel code.

1212
00:56:54,910 --> 00:56:59,850
>> Dus de laatste vraag, dan, van dit bestand
is, nou ja, wat is het nou dit?

1213
00:56:59,850 --> 00:57:00,530
Neem een ​​gok.

1214
00:57:00,530 --> 00:57:04,230
Wat is $ _POST, waarschijnlijk?

1215
00:57:04,230 --> 00:57:07,070
>> PUBLIEK: [onverstaanbaar]

1216
00:57:07,070 --> 00:57:08,830
>> LUIDSPREKER 1: Ja, de geboekte gegevens.

1217
00:57:08,830 --> 00:57:11,350
Recall, laten we terugbladeren in
tijd voor slechts een moment.

1218
00:57:11,350 --> 00:57:13,165
froshim0, nogmaals, leek dit.

1219
00:57:13,165 --> 00:57:15,640
Een super meerderheid van deze is gewoon HTML.

1220
00:57:15,640 --> 00:57:18,410
Nogmaals, sommige tags die je hebt niet
nog niet gezien, of waarmee

1221
00:57:18,410 --> 00:57:19,360
u al vertrouwd.

1222
00:57:19,360 --> 00:57:21,990
Maar het interessante was dit.

1223
00:57:21,990 --> 00:57:27,270
Deze lijn is wat echt verbindt
het aan onze register0.php bestand.

1224
00:57:27,270 --> 00:57:29,200
Ik ben het indienen via de methode bericht.

1225
00:57:29,200 --> 00:57:33,130
En dat betekent dat de parameters
typt de gebruiker in zijn niet

1226
00:57:33,130 --> 00:57:35,150
gaat uiteindelijk waar.

1227
00:57:35,150 --> 00:57:36,175
>> Ze gaan niet
zien in de URL.

1228
00:57:36,175 --> 00:57:39,020
Ze zijn nog steeds zullen worden verzonden vanaf de
client, de browser, de

1229
00:57:39,020 --> 00:57:42,080
server, maar gewoon via een andere
mechanisme dat we afstand doen van onze handen

1230
00:57:42,080 --> 00:57:44,330
op voor vandaag, maar het is niet in de URL.

1231
00:57:44,330 --> 00:57:47,630
Maar let op de relatie nu met
post, die, volgens afspraak, is

1232
00:57:47,630 --> 00:57:49,160
kleine letters hier.

1233
00:57:49,160 --> 00:57:54,090
>> Maar als ik open register0.php,
Ik ben blijkbaar drukken dit.

1234
00:57:54,090 --> 00:57:56,450
Dus dit is een soort van raar
naamgeving.

1235
00:57:56,450 --> 00:58:01,430
Maar wat is leuk in PHP is dat wanneer
het gebruik van PHP in een web context, niet op een

1236
00:58:01,430 --> 00:58:04,480
command line zoals ik deed een moment geleden,
wanneer u daadwerkelijk gebruik maakt van het in een web

1237
00:58:04,480 --> 00:58:10,580
pagina, in een Vhost directory als we zijn,
automatisch zal PHP vul deze

1238
00:58:10,580 --> 00:58:15,560
ding, die een associatieve array,
zo te zeggen, een hash table, met

1239
00:58:15,560 --> 00:58:17,290
alles wat de gebruiker intikt:

1240
00:58:17,290 --> 00:58:22,000
>> Kortom, $ _POST in alle caps is een
globale variabele die PHP net

1241
00:58:22,000 --> 00:58:25,050
magische wijze creëert voor u wanneer
het gebruik van PHP in een web context.

1242
00:58:25,050 --> 00:58:29,160
En het zet binnenkant van het allen van de
namen van de parameters in de vorm waarin

1243
00:58:29,160 --> 00:58:33,200
om dit bestand en al werd ingediend
de waarden die de gebruiker intikt:

1244
00:58:33,200 --> 00:58:37,790
Dus het overhandigt aan u wat de gebruiker
getypt in die vorm.

1245
00:58:37,790 --> 00:58:42,210
>> Dus voordat, we kregen echt dom uitgang
van alleen dit zien omdat alles wat ik deed

1246
00:58:42,210 --> 00:58:44,400
werd recursief print deze array.

1247
00:58:44,400 --> 00:58:46,060
De sleutel is de naam, de waarde is David.

1248
00:58:46,060 --> 00:58:46,980
De sleutel is kapitein.

1249
00:58:46,980 --> 00:58:47,970
De waarde is.

1250
00:58:47,970 --> 00:58:52,300
En de dubbele pijl en de hoek
beugel is er, dit is gewoon willekeurig.

1251
00:58:52,300 --> 00:58:53,270
Dit is geen code.

1252
00:58:53,270 --> 00:58:57,690
Dit is gewoon PHP's manier van laten zien
wat de waarde van een aantal belangrijke is.

1253
00:58:57,690 --> 00:59:03,000
>> Maar nu wil ik stellen dat in
froshIMs3, het is bijna identiek

1254
00:59:03,000 --> 00:59:04,950
tenzij hij aan dit bestand.

1255
00:59:04,950 --> 00:59:08,570
En nogmaals, we gaan soort van gewoon
een blik werpen op deze, gewoon om wat te zien

1256
00:59:08,570 --> 00:59:12,040
syntax, maar let op wat
dit bestand doet.

1257
00:59:12,040 --> 00:59:14,930
Neem een ​​gok alleen gebaseerd op de lijnen van
code, die waarschijnlijk uitzien als

1258
00:59:14,930 --> 00:59:17,410
Grieks, tot op zekere hoogte,
blijkbaar doet.

1259
00:59:17,410 --> 00:59:20,580

1260
00:59:20,580 --> 00:59:23,110
>> Dit bestand is een of andere manier gerelateerd
om e-mail, e-mail.

1261
00:59:23,110 --> 00:59:24,770
Dus wat is dit programma doen?

1262
00:59:24,770 --> 00:59:28,740
In deze versie, als ik eigenlijk
vul dit formulier in - en laat me gaan naar

1263
00:59:28,740 --> 00:59:30,760
froshIMs3, niet froshIMs0 -

1264
00:59:30,760 --> 00:59:33,280

1265
00:59:33,280 --> 00:59:34,540
de vorm ziet er hetzelfde uit.

1266
00:59:34,540 --> 00:59:37,980
David, kapitein, man, dorm, Matthews.

1267
00:59:37,980 --> 00:59:42,980
Maar als ik te dienen dit, is dit bestand
ga naar register3.php.

1268
00:59:42,980 --> 00:59:46,330
>> En ik beweer, door te kijken naar het
broncode, het gaat om

1269
00:59:46,330 --> 00:59:47,650
een of andere manier te betrekken email.

1270
00:59:47,650 --> 00:59:49,620
Laat me ga je gang en open deze
in een groter venster, zodat we

1271
00:59:49,620 --> 00:59:51,030
het kan schoner te zien.

1272
00:59:51,030 --> 00:59:57,220
We zijn in vhosts, lokale host,
publiek, froshims.

1273
00:59:57,220 --> 00:59:58,680
Ik ga het openen van een ander
programma, zodat we

1274
00:59:58,680 --> 01:00:00,160
kan meer zien in een keer.

1275
01:00:00,160 --> 01:00:03,100
>> Dus nu hier, merken een paar dingen.

1276
01:00:03,100 --> 01:00:06,530
Bovenaan het bestand open
bracket, vraagteken, PHP.

1277
01:00:06,530 --> 01:00:08,920
Dan is er een heleboel reacties,
die we kunnen negeren, is

1278
01:00:08,920 --> 01:00:10,450
oninteressant voor nu.

1279
01:00:10,450 --> 01:00:11,300
>> Nu is er dit.

1280
01:00:11,300 --> 01:00:14,200
Het blijkt PHP heeft veel
code genoemd vereisen.

1281
01:00:14,200 --> 01:00:19,110
Het is zeer vergelijkbaar in de geest naar C's
omvatten, hash omvatten, die

1282
01:00:19,110 --> 01:00:21,980
grijpt wezen inhoud van een aantal
andere file en gewoon plops ze hier,

1283
01:00:21,980 --> 01:00:22,930
zodat u ze kunt gebruiken.

1284
01:00:22,930 --> 01:00:27,060
In dit geval heeft het apparaat,
voorgeïnstalleerd, een bibliotheek, gratis en

1285
01:00:27,060 --> 01:00:29,900
open source library genaamd PHP
mailer dat iedereen kan

1286
01:00:29,900 --> 01:00:30,770
downloaden van het internet.

1287
01:00:30,770 --> 01:00:32,000
We deden het voor jou.

1288
01:00:32,000 --> 01:00:36,130
En dit betekent dat ik nu e-mail
functionaliteit tot mijn beschikking.

1289
01:00:36,130 --> 01:00:38,170
>> Let nu op een paar dingen.

1290
01:00:38,170 --> 01:00:41,120
Ik ga naar het valideren
aanmeldingsformulier's.

1291
01:00:41,120 --> 01:00:45,980
Turns out PHP, een, heeft uitroepteken
punten voor de niet-operator, net als

1292
01:00:45,980 --> 01:00:49,810
C. Maar PHP heeft ook een functie
riep leeg.

1293
01:00:49,810 --> 01:00:53,920
>> Lege keert alleen waar als de waarde
van het ding dat je het inleveren

1294
01:00:53,920 --> 01:00:57,190
haakjes leeg is, zoals
gebruiker niets type inch

1295
01:00:57,190 --> 01:01:02,680
Dus dit zegt, en let op de
syntax, sterk denken aan C, wanneer de

1296
01:01:02,680 --> 01:01:07,730
naam sleutel, zodat de veldnaam in de vorm,
die via de post werd ingediend, door

1297
01:01:07,730 --> 01:01:13,010
de gebruiker, is niet te legen, en hun
geslacht is niet leeg in de vorm zoals

1298
01:01:13,010 --> 01:01:15,980
goed, en hun studentenhuis is niet leeg -

1299
01:01:15,980 --> 01:01:19,980
maar merk dat ik niet de zorg over Captain,
dan wat gaan we doen?

1300
01:01:19,980 --> 01:01:21,990
>> Ik ga voeren
deze lijn van code.

1301
01:01:21,990 --> 01:01:24,100
En kunt u denken aan dit soort
zoals malloc, maar het is een beetje

1302
01:01:24,100 --> 01:01:24,800
chiquer dan dat.

1303
01:01:24,800 --> 01:01:29,200
Maar voor nu dit geeft me een speciaal
struct van het type PHP mailer.

1304
01:01:29,200 --> 01:01:31,410
Maar negeren de zoekwoord nieuwe voor vandaag.

1305
01:01:31,410 --> 01:01:35,670
>> Nu ga ik een functie genaamd bellen
IsSMTP, die zegt, gebruik van SMTP.

1306
01:01:35,670 --> 01:01:39,380
Dit is poort 25, net als de video
vorige week, toen de zaak werd het gooien

1307
01:01:39,380 --> 01:01:40,710
e-mails in de firewall.

1308
01:01:40,710 --> 01:01:42,440
Poort 25 is SMTP.

1309
01:01:42,440 --> 01:01:44,410
SMTP betekent gebruik maken van de e-mailserver.

1310
01:01:44,410 --> 01:01:46,215
Die men, kunnen we gebruik maken van Harvard's
SMTP.fas.harvard.edu.

1311
01:01:46,215 --> 01:01:48,850

1312
01:01:48,850 --> 01:01:51,590
>> We kunnen stellen van adres
te zijn John Harvard's.

1313
01:01:51,590 --> 01:01:55,090
Als ik verder naar beneden scrollen, kan ik
het adres van de ontvanger, net

1314
01:01:55,090 --> 01:01:56,840
willekeurig, om John
Harvard is ook.

1315
01:01:56,840 --> 01:01:59,210
Dus hij gaat te e-mailen zichzelf.

1316
01:01:59,210 --> 01:02:01,600
>> Nu kan ik het onderwerp ingesteld
te registreren.

1317
01:02:01,600 --> 01:02:03,700
En ik kan het lichaam instellen
van email als volgt.

1318
01:02:03,700 --> 01:02:06,500
Deze lijn ziet er een beetje meer cryptisch,
maar dat is alleen omdat er veel

1319
01:02:06,500 --> 01:02:07,450
van informatie in het.

1320
01:02:07,450 --> 01:02:10,670
Een, er is een punt operator.

1321
01:02:10,670 --> 01:02:14,510
Iemand moet al weten wat
de operator punt doet.

1322
01:02:14,510 --> 01:02:15,436
Het is aaneenschakeling.

1323
01:02:15,436 --> 01:02:19,240
Dus als je wilt om een ​​string in PHP te nemen,
en voeg deze toe, of plaatst u er, om

1324
01:02:19,240 --> 01:02:23,500
andere string in PHP, thank God u
hoeven niet te strcopy en malloc gebruikt,

1325
01:02:23,500 --> 01:02:25,490
en dat allemaal niet meer.

1326
01:02:25,490 --> 01:02:28,765
>> Als u twee tekenreeksen samen te voegen,
who cares over het geheugen.

1327
01:02:28,765 --> 01:02:30,850
Laat PHP cijfer dat voor u.

1328
01:02:30,850 --> 01:02:35,200
Welke PHP zal doen met de puntoperator
Hier is gewoon een grote straf uit

1329
01:02:35,200 --> 01:02:37,900
van deze lijn, deze lijn,
deze lijn, deze lijn.

1330
01:02:37,900 --> 01:02:40,460
En let nu op, het gaat
worden inpluggen in waarden.

1331
01:02:40,460 --> 01:02:43,680
Zodat de e-mail die John Harvard gaat
te ontvangen is letterlijk gaat zeggen

1332
01:02:43,680 --> 01:02:49,450
naam, colon, iets eerder, dan kunnen we
sluit de string en aaneenschakelen op

1333
01:02:49,450 --> 01:02:52,220
wat de gebruiker heeft ingevoerd
in, dan is een nieuwe lijn.

1334
01:02:52,220 --> 01:02:54,570
>> Dan, op de volgende regel van John Harvard's
e-mail, het gaat om te zeggen

1335
01:02:54,570 --> 01:02:55,910
Kapitein, Aan of Nothing.

1336
01:02:55,910 --> 01:02:57,810
Het gaat om mannen en vrouwen te zeggen,
man of vrouw.

1337
01:02:57,810 --> 01:02:59,680
Dorm gaat worden Matthews
in mijn geval.

1338
01:02:59,680 --> 01:03:03,400
En dan merken vertrouwd puntkomma
helemaal aan het eind.

1339
01:03:03,400 --> 01:03:07,830
En dan, hier beneden, mededeling, enigszins
cryptisch nog steeds, maar nogmaals, het volgen van een

1340
01:03:07,830 --> 01:03:12,730
patroon dat meer vertrouwd zullen worden
na P set 7, als het verzenden van de e-mail

1341
01:03:12,730 --> 01:03:16,610
false retourneert, dan ga je gang en sterven.

1342
01:03:16,610 --> 01:03:19,610
>> Dus PHP heeft een functie genaamd sterven,
die, letterlijk, doodt alleen de

1343
01:03:19,610 --> 01:03:22,830
website en gewoon afgedrukt, ongeacht
je vertellen - haar is stervende

1344
01:03:22,830 --> 01:03:24,280
woorden, zo te zeggen.

1345
01:03:24,280 --> 01:03:28,310
En dat, in het geval deze wordt afgedrukt
komen wat de fout informatie is voor

1346
01:03:28,310 --> 01:03:29,860
wat is er gebeurd mis te gaan.

1347
01:03:29,860 --> 01:03:34,490
Zo lang verhaal kort hier, wat we hebben
is een voorbeeld waarbij wanneer de gebruiker

1348
01:03:34,490 --> 01:03:39,150
het formulier indient, froshim0,
froshims3.php, gaat het naar

1349
01:03:39,150 --> 01:03:40,760
register3.php.

1350
01:03:40,760 --> 01:03:45,290
Maar register3.php gaat dan
al deze lijnen voeren.

1351
01:03:45,290 --> 01:03:46,620
>> Dus er is hier een paar afhaalrestaurants.

1352
01:03:46,620 --> 01:03:50,380
Een, het is blijkbaar vrij eenvoudig,
programmatisch, om e-mails te sturen,

1353
01:03:50,380 --> 01:03:50,830
dat is goed.

1354
01:03:50,830 --> 01:03:53,500
Wanneer gebruikers registreren voor uw website, in
casu de inschrijving in de

1355
01:03:53,500 --> 01:03:56,220
sport, kunt u e-mail de eerstejaars
Proctor, of John

1356
01:03:56,220 --> 01:03:57,650
Harvard, in dit geval.

1357
01:03:57,650 --> 01:04:01,630
>> Maar het betekent ook dat je kunt doen wat?

1358
01:04:01,630 --> 01:04:03,970
Stuur e-mails van iedereen voor iedereen.

1359
01:04:03,970 --> 01:04:05,430
En dit is zeer juist.

1360
01:04:05,430 --> 01:04:08,580
Dit is niet zo gemakkelijk gedaan als
je gewend bent aan het gebruik van Gmail.

1361
01:04:08,580 --> 01:04:11,310
Maar als je ooit hebt gebruikt Eudora of
Outlook, kunt u vrij veel vertellen

1362
01:04:11,310 --> 01:04:13,720
mailserver die u bent
wie je maar wilt.

1363
01:04:13,720 --> 01:04:16,450
En dit is waar ik moet zetten op
die hoed en zeggen: doe dit niet.

1364
01:04:16,450 --> 01:04:21,140
Maar dit is een bewijs van hoe makkelijk
het is om phishing-aanvallen uit te voeren, en

1365
01:04:21,140 --> 01:04:24,310
stuur anonieme e-mail, en
spam, meer in het algemeen.

1366
01:04:24,310 --> 01:04:27,330
En het echt neer op de
feit dat alles wat je nodig hebt is wat

1367
01:04:27,330 --> 01:04:28,500
programmatische toegang.

1368
01:04:28,500 --> 01:04:31,940
>> Even terzijde, mijn beste ontmoeting met
de advertentie raad, mijn eigen eerste jaar,

1369
01:04:31,940 --> 01:04:34,320
was toen ik ontdekte deze coole
truc dat, wow, kunt u

1370
01:04:34,320 --> 01:04:36,850
stuur e-mails van iedereen.

1371
01:04:36,850 --> 01:04:39,770
En dus waren we met een aantal domme
argument, letterlijk, in Matthews,

1372
01:04:39,770 --> 01:04:40,790
onder mijn Proctor groep.

1373
01:04:40,790 --> 01:04:42,470
Ik weet niet eens meer
wat het probleem was.

1374
01:04:42,470 --> 01:04:44,970
Maar ik wilde proberen om een ​​zet
einde te maken aan deze domme discussie.

1375
01:04:44,970 --> 01:04:48,580
>> Dus heb ik besloten dat ik zal gewoon stuur een e-mail
naar mijn Proctor groep, doen alsof ze

1376
01:04:48,580 --> 01:04:52,000
de andere man, met wiens mening ik
niet mee eens, en hebben hem berusten op

1377
01:04:52,000 --> 01:04:54,680
wat mijn mening was in
dit specifieke debat.

1378
01:04:54,680 --> 01:04:59,320
En dus heb ik gesmeed deze e-mail met behulp van een
techniek in dezelfde geest bij.

1379
01:04:59,320 --> 01:05:01,256
Maar het was eigenlijk makkelijker
op dat moment.

1380
01:05:01,256 --> 01:05:02,435
Hit sturen.

1381
01:05:02,435 --> 01:05:06,660
Hij was niet blij, noch zou
zijn geweest van de advertentie bord.

1382
01:05:06,660 --> 01:05:10,280
>> En ik was zeer snel gevangen binnen
seconden omdat, zoals u weet, ik teken

1383
01:05:10,280 --> 01:05:11,420
mijn e-mails op een bepaalde manier.

1384
01:05:11,420 --> 01:05:14,200
En hoewel ik doe het handmatig, in grote
deel, 15 jaar later, want ik was

1385
01:05:14,200 --> 01:05:15,080
getraumatiseerd door die.

1386
01:05:15,080 --> 01:05:16,960
Ik heb geen handtekening
op mijn e-mail nu.

1387
01:05:16,960 --> 01:05:20,440
Maar in 1995, ik had net een sig,
een handtekening in mijn e-mail.

1388
01:05:20,440 --> 01:05:24,630
Er was dus dit briefje, Dear
Proctor groep, ik neerleggen mijn mening

1389
01:05:24,630 --> 01:05:31,240
en ben het eens met David, ondertekend en dus
zo, nieuwe lijn, nieuwe lijn, DJM.

1390
01:05:31,240 --> 01:05:36,220
>> Dus doe dat niet of, in het algemeen, neem
voordeel van deze techniek.

1391
01:05:36,220 --> 01:05:39,950
Maar bij het maken van een website, zoals voor
je afstudeerproject, bij het maken van een

1392
01:05:39,950 --> 01:05:43,460
website voor iets ondernemende,
dit is hoe, pragmatisch, kunt u

1393
01:05:43,460 --> 01:05:47,000
leverage andere diensten op het internet
zoals e-mail en vervolgens daadwerkelijk

1394
01:05:47,000 --> 01:05:49,440
stuur dingen met behulp van code.

1395
01:05:49,440 --> 01:05:51,240
>> Dus hoe kunnen we verbeteren op dit?

1396
01:05:51,240 --> 01:05:54,370
Nou, laten we eerst eens een snelle rondleiding door
sommige van de dingen die je zult zien,

1397
01:05:54,370 --> 01:05:56,170
en neem dan een kijkje op
een paar voorbeelden.

1398
01:05:56,170 --> 01:05:59,500
Zo een, om gerust te stellen, omdat
we vliegen door PHP.

1399
01:05:59,500 --> 01:06:02,470
En ik weet, op een bepaald punt, heb je
om daadwerkelijk te beginnen met het schrijven van dit als je

1400
01:06:02,470 --> 01:06:03,460
nog niet hebt.

1401
01:06:03,460 --> 01:06:06,220
Realiseer je dat, een, belangrijkste is vriendelijk
van uit het raam met PHP.

1402
01:06:06,220 --> 01:06:09,420
Als u wilt code die krijgt schrijven
uitgevoerd, je gewoon beginnen met het schrijven ervan in

1403
01:06:09,420 --> 01:06:13,970
een bestand met de naam. php zolang
heb je de open beugel

1404
01:06:13,970 --> 01:06:15,620
vraagteken PHP-tag.

1405
01:06:15,620 --> 01:06:19,730
>> Maar merkt dat zijn
omstandigheden in php.

1406
01:06:19,730 --> 01:06:22,610
Let op, dit is exact dezelfde dia
We hadden in de week een toen we hadden

1407
01:06:22,610 --> 01:06:25,670
voorwaarden C. Omstandigheden
PHP zijn structureel en

1408
01:06:25,670 --> 01:06:27,140
syntactisch hetzelfde.

1409
01:06:27,140 --> 01:06:30,290
Enige echte verschil is als je hebt
variabelen betrokken zijn, moet je die

1410
01:06:30,290 --> 01:06:31,600
dollartekens.

1411
01:06:31,600 --> 01:06:33,970
>> Ondertussen, Booleaanse expressies
er net als dit voor

1412
01:06:33,970 --> 01:06:35,725
of-ing of en-ing samen.

1413
01:06:35,725 --> 01:06:37,780
Schakelaars zien er precies hetzelfde.

1414
01:06:37,780 --> 01:06:42,180
Wat is leuk in PHP, terwijl in C,
schakelaars moeten gevallen op

1415
01:06:42,180 --> 01:06:46,380
primitieven zoals ints of tekens, in PHP
uw zaak verklaringen daadwerkelijk kan worden

1416
01:06:46,380 --> 01:06:48,430
een geheel koorden, die
eigenlijk wel leuk.

1417
01:06:48,430 --> 01:06:49,480
Bespaart u wat tijd.

1418
01:06:49,480 --> 01:06:50,820
Kon dat niet doen in C.

1419
01:06:50,820 --> 01:06:52,880
>> Hier is een lus in PHP.

1420
01:06:52,880 --> 01:06:53,740
Het is identiek.

1421
01:06:53,740 --> 01:06:55,400
Misschien wat dollartekens
voor de variabelen.

1422
01:06:55,400 --> 01:06:57,530
Je hoeft niet te vermelden dat
iets is een int.

1423
01:06:57,530 --> 01:07:00,580
Verklaart u het gewoon met een dollarteken
en de naam van de variabele.

1424
01:07:00,580 --> 01:07:01,430
Maar een lus is hetzelfde.

1425
01:07:01,430 --> 01:07:02,760
Een while lus is hetzelfde.

1426
01:07:02,760 --> 01:07:04,870
Een do while lus is hetzelfde.

1427
01:07:04,870 --> 01:07:06,170
>> Dit is een beetje anders.

1428
01:07:06,170 --> 01:07:12,410
Dus met PHP, met een array, kunt u
statisch verklaren een array, zoals in C,

1429
01:07:12,410 --> 01:07:14,420
maar je gebruikt vierkante haakjes.

1430
01:07:14,420 --> 01:07:17,060
In C, zou u gebruik maken van accolades,
als je zelfs wist dat.

1431
01:07:17,060 --> 01:07:20,910
Maar dit is eigenlijk heel gewoon in PHP
een array verklaren, in casu

1432
01:07:20,910 --> 01:07:23,640
van nummers, en bel de
variabele getallen.

1433
01:07:23,640 --> 01:07:25,300
>> Variabelen zelf uitzien.

1434
01:07:25,300 --> 01:07:28,710
Hier is een string, citeer Unquote "hello
wereld. "Je zou kunnen hebben een backslash n.

1435
01:07:28,710 --> 01:07:30,950
Ik doe gewoon niet in dit geval.

1436
01:07:30,950 --> 01:07:32,640
>> Nu is dit een interessante constructie.

1437
01:07:32,640 --> 01:07:33,700
C heeft deze.

1438
01:07:33,700 --> 01:07:34,700
Maar dit is super behulpzaam.

1439
01:07:34,700 --> 01:07:38,160
En je zult dit zien in P set 7
spec - een voor elk construct.

1440
01:07:38,160 --> 01:07:41,800
Als u wilt herhalen over alle van de
elementen een array, hoeft u niet

1441
01:07:41,800 --> 01:07:45,500
om te gaan met $ i en $ n,
en + +, en dat alles.

1442
01:07:45,500 --> 01:07:47,640
U kunt letterlijk zeggen, in PHP, dit -

1443
01:07:47,640 --> 01:07:51,890
voor elke getallen als getal, dus
Ik ga ervan uit dat $ getallen

1444
01:07:51,890 --> 01:07:53,380
is een array van getallen.

1445
01:07:53,380 --> 01:07:56,460
En als ik zeg voor elke nummers
als nummer, dit gaat

1446
01:07:56,460 --> 01:08:00,505
automatisch, als mijn lus uitvoert,
werken op elke iteratie, de waarde

1447
01:08:00,505 --> 01:08:03,260
binnenkant van het dollarteken nummer -

1448
01:08:03,260 --> 01:08:07,730
opnieuw, en opnieuw, en opnieuw lopen
voor mij dan die array.

1449
01:08:07,730 --> 01:08:08,735
Dus het is alleen bespaart ons code.

1450
01:08:08,735 --> 01:08:12,250
Geen puntkomma, geen + + 's, no i is,
geen n's, is het gewoon leuk.

1451
01:08:12,250 --> 01:08:13,700
>> Maar PHP heeft ook dit.

1452
01:08:13,700 --> 01:08:14,830
En dit is super krachtig.

1453
01:08:14,830 --> 01:08:17,410
En je zult gebruiken dit, handen
op, in P set 7.

1454
01:08:17,410 --> 01:08:21,990
En associatieve array wordt ook verklaard
met vierkante haken.

1455
01:08:21,990 --> 01:08:23,569
Maar let op de syntax nu.

1456
01:08:23,569 --> 01:08:26,880
Het doet denken aan wat we zagen
met print_r een moment geleden.

1457
01:08:26,880 --> 01:08:31,810
Hoeveel sleutels, als een klein sanity check,
wordt deze array lijken te hebben.

1458
01:08:31,810 --> 01:08:32,689
>> Dus het heeft twee.

1459
01:08:32,689 --> 01:08:33,830
En ik noem dit een array.

1460
01:08:33,830 --> 01:08:36,760
Maar als het helpt, kunt u dat
van dit als hash table, of als

1461
01:08:36,760 --> 01:08:37,930
een associatieve array.

1462
01:08:37,930 --> 01:08:39,580
Maar het is gewoon een ander
type array.

1463
01:08:39,580 --> 01:08:41,080
En nogmaals, verschillende talen
heeft deze.

1464
01:08:41,080 --> 01:08:43,810
We zullen iets dergelijks te zien
in JavaScript ook.

1465
01:08:43,810 --> 01:08:44,609
Er zijn twee sleutels.

1466
01:08:44,609 --> 01:08:48,390
Een citaat is unquote, "symbool", een is
citeer unquote "prijs." En die sleutels

1467
01:08:48,390 --> 01:08:49,250
hebben elk een waarde.

1468
01:08:49,250 --> 01:08:54,420
In dit geval waarde symbool is FB, voor
Facebook, en de prijs is de waarde van 49, 26,

1469
01:08:54,420 --> 01:08:56,899
die Facebook's voorraad was
prijs vanaf vanmorgen.

1470
01:08:56,899 --> 01:09:00,170
>> Dus wat nuttig is over
een associatieve array.

1471
01:09:00,170 --> 01:09:02,620
Ik kon een numeriek hebben gehad
geïndexeerde array met slechts

1472
01:09:02,620 --> 01:09:04,120
eenvoudige vierkante haken.

1473
01:09:04,120 --> 01:09:09,380
En ik kon dollarteken hebben gehad
citaat is gelijk aan alleen deze.

1474
01:09:09,380 --> 01:09:10,529
Laat me daadwerkelijk doen.

1475
01:09:10,529 --> 01:09:14,796
Stel dat ik in plaats daarvan alleen verklaard
deze array als dat.

1476
01:09:14,796 --> 01:09:17,590
Dit is volkomen geldig,
syntactisch.

1477
01:09:17,590 --> 01:09:20,569
Er worden geen gegevens niet te verliezen,
per se.

1478
01:09:20,569 --> 01:09:24,760
Ik zie nog steeds dat het symbool is fb,
en dat de prijs 49, 26.

1479
01:09:24,760 --> 01:09:28,939
Dus waarom zijn associatieve
arrays overtuigend?

1480
01:09:28,939 --> 01:09:30,189
>> PUBLIEK: Je hoeft niet te onthouden
waar je spullen.

1481
01:09:30,189 --> 01:09:32,050

1482
01:09:32,050 --> 01:09:34,130
>> LUIDSPREKER 1: Precies, heb je niet
om te onthouden waar je spullen.

1483
01:09:34,130 --> 01:09:37,670
Je hoeft niet te willekeurig onthouden
dat beurssymbool is in beugel nul,

1484
01:09:37,670 --> 01:09:41,479
en de aandelenkoersen in een beugel,
wat vooral gevaarlijk als je

1485
01:09:41,479 --> 01:09:43,220
dingen veranderen, uiteindelijk.

1486
01:09:43,220 --> 01:09:46,399
Het is veel leuker om te associëren
wat wij metadata zullen noemen

1487
01:09:46,399 --> 01:09:48,340
met uw werkelijke gegevens.

1488
01:09:48,340 --> 01:09:52,399
Ik zou zeggen dat wat we echt zorg
hier over is fb en 49, 26.

1489
01:09:52,399 --> 01:09:57,020
Het symbool en de prijs is metadata
dat de gegevens beschrijven we

1490
01:09:57,020 --> 01:09:58,180
eigenlijk schelen.

1491
01:09:58,180 --> 01:10:01,910
Maar dit is gewoon zo veel
gemakkelijker om toegang te krijgen.

1492
01:10:01,910 --> 01:10:04,090
>> Nu, als een terzijde wat is
de prijs die we betalen?

1493
01:10:04,090 --> 01:10:06,600
We doen dit al
in CS50 voor weken.

1494
01:10:06,600 --> 01:10:10,740
Deze functie moet komen op een aantal kosten.

1495
01:10:10,740 --> 01:10:11,350
Geheugen.

1496
01:10:11,350 --> 01:10:13,830
Dus je bent niet alleen het opslaan van een 32-bit
integer, bijvoorbeeld.

1497
01:10:13,830 --> 01:10:17,980
Je het opslaan symbool / 0, waarschijnlijk.

1498
01:10:17,980 --> 01:10:19,160
Dus je gebruikt meer geheugen.

1499
01:10:19,160 --> 01:10:22,540
>> En wat is de prestatie van
zoek iets op in een

1500
01:10:22,540 --> 01:10:24,822
associatieve array, waarschijnlijk?

1501
01:10:24,822 --> 01:10:26,590
Het is waarschijnlijk langzamer.

1502
01:10:26,590 --> 01:10:29,670
Random access is leuk, vooral
als je binary search kunt doen.

1503
01:10:29,670 --> 01:10:33,380
Maar als je eigenlijk nu kijken niet
voor nummers, maar voor strijkers, dit

1504
01:10:33,380 --> 01:10:37,630
echt onder het wordt uitgevoerd
kap, waarschijnlijk als een hash table, waar

1505
01:10:37,630 --> 01:10:42,950
je ofwel een hash tabel gebruiken
met aparte chaining.

1506
01:10:42,950 --> 01:10:46,040
Of je een keer te proberen te gebruiken om daadwerkelijk
opslaan van de waarden.

1507
01:10:46,040 --> 01:10:50,550
Dus misschien kan je constante tijd doen, maar
je nog steeds te kijken naar S-Y-M-B-O-L,

1508
01:10:50,550 --> 01:10:54,510
potentieel, in plaats van alleen 32
bits om iets opzoeken.

1509
01:10:54,510 --> 01:10:58,430
Dus nogmaals, die dezelfde ideeën komen
terug naar terugkeren in deze context.

1510
01:10:58,430 --> 01:11:02,120
>> Maar nogmaals, PHP heeft nu een aantal super
globals dat, zo blijkt, zijn

1511
01:11:02,120 --> 01:11:02,900
associatieve arrays.

1512
01:11:02,900 --> 01:11:05,590
We zagen een een moment geleden, $ _POST.

1513
01:11:05,590 --> 01:11:08,400
En dat super globale
heeft sleutels en waarden.

1514
01:11:08,400 --> 01:11:10,550
Specifiek, de sleutels
line-up met wat?

1515
01:11:10,550 --> 01:11:14,520
Waar komen de sleutels in $ _POST vandaan?

1516
01:11:14,520 --> 01:11:15,380
Gewoon om samen te vatten?

1517
01:11:15,380 --> 01:11:16,480
>> PUBLIEK: Naam.

1518
01:11:16,480 --> 01:11:17,900
>> LUIDSPREKER 1: Name, waar?

1519
01:11:17,900 --> 01:11:19,860
>> PUBLIEK: [onverstaanbaar]

1520
01:11:19,860 --> 01:11:20,750
>> LUIDSPREKER 1: Name is het attribuut.

1521
01:11:20,750 --> 01:11:23,480
Wel waar, waar heeft ze
oorspronkelijk vandaan?

1522
01:11:23,480 --> 01:11:24,120
Het formulier.

1523
01:11:24,120 --> 01:11:30,140
Dus als een HTML-pagina heeft een form tag,
binnenzijde waarvan enkele ingangen, zoals

1524
01:11:30,140 --> 01:11:34,760
selectievakjes, tekstvakken, drop-down
menu's, die elk een naam, die

1525
01:11:34,760 --> 01:11:40,260
namen eindigen als sleutels in $ _POST en,
eerlijk gezegd, wat dat betreft, $ _GET.

1526
01:11:40,260 --> 01:11:42,130
Als de methode is get, hetzelfde idee.

1527
01:11:42,130 --> 01:11:43,830
Het is gewoon op een andere super mondiaal.

1528
01:11:43,830 --> 01:11:47,620
En de waarden uiteraard uit
ongeacht de gebruiker ingetypt op zijn of

1529
01:11:47,620 --> 01:11:48,890
haar browser.

1530
01:11:48,890 --> 01:11:49,830
>> Maar er is nog een paar anderen.

1531
01:11:49,830 --> 01:11:52,140
Er is koekje, die we zullen
terug te komen om uiteindelijk.

1532
01:11:52,140 --> 01:11:56,050
Maar dat zijn de dingen die je kent
het web gebruikt voor een aantal goede of ten kwade.

1533
01:11:56,050 --> 01:11:57,420
Maar we komen terug naar dat.

1534
01:11:57,420 --> 01:12:01,720
Server en de sessie, en die twee
hebben een aantal speciale hulpprogramma.

1535
01:12:01,720 --> 01:12:03,940
>> Maar laten we eens een kijkje op deze.

1536
01:12:03,940 --> 01:12:13,330
Laat me ga je gang en open een voorbeeld
riep mvc0.php Dus MVC

1537
01:12:13,330 --> 01:12:14,900
staat voor de volgende.

1538
01:12:14,900 --> 01:12:19,390
En introduceren wij dit eerder dan is
typisch, echt, om je ontwerpen te krijgen

1539
01:12:19,390 --> 01:12:22,180
Probleem set 7, en ook afstudeeropdrachten,
in soort van een industrie

1540
01:12:22,180 --> 01:12:23,670
standaard manier, en schone manier.

1541
01:12:23,670 --> 01:12:24,820
Het is een goed ontwerp.

1542
01:12:24,820 --> 01:12:29,090
>> Dus je gaat zien, en je zult
ervaring, in P set 7, paradigma, sorteren

1543
01:12:29,090 --> 01:12:32,260
van een programmeertaal mentaliteit, dat ziet
een beetje zoiets als dit.

1544
01:12:32,260 --> 01:12:35,570
M voor Model, C voor de controller,
V voor View.

1545
01:12:35,570 --> 01:12:39,690
Lang verhaal kort, MVC is gewoon een soort
volgens een methode, een manier om

1546
01:12:39,690 --> 01:12:43,360
websites name waarbij u
zet al je, stomme uitdrukking -

1547
01:12:43,360 --> 01:12:44,970
business logica -

1548
01:12:44,970 --> 01:12:49,710
al uw intellectuele eigendom in
wat een controller genaamd, een bestand

1549
01:12:49,710 --> 01:12:54,840
zoals index.php, of we zullen zien,
quote.php of buy.php.

1550
01:12:54,840 --> 01:12:59,570
>> In het kader van Problem set 7, uw
modellen bevatten meestal uw gegevens,

1551
01:12:59,570 --> 01:13:03,860
alles met betrekking tot een databank, zoals we zullen
uiteindelijk zien, en uw uitzicht

1552
01:13:03,860 --> 01:13:07,510
bevatten de esthetiek van uw
terrein, de HTML, CSS.

1553
01:13:07,510 --> 01:13:10,420
Zodat we al in C een beetje zag
bit met. h bestanden.

1554
01:13:10,420 --> 01:13:15,010
We zagen het echt een moment geleden met CSS,
door factoring de CSS stilering

1555
01:13:15,010 --> 01:13:16,520
spullen uit onze HTML.

1556
01:13:16,520 --> 01:13:20,730
>> Dus MVC is echt alleen om het tekenen
lijnen in het zand en zeggen, de

1557
01:13:20,730 --> 01:13:25,400
interessante programmering code voor uw
website behoort in wat we zullen noemen de

1558
01:13:25,400 --> 01:13:26,400
controller.

1559
01:13:26,400 --> 01:13:29,280
Spullen gerelateerd aan database-typisch
eindigt in een model.

1560
01:13:29,280 --> 01:13:33,070
Maar je zult zien, in Probleem set 7, we
samenvoegen C en M om het simpel te houden.

1561
01:13:33,070 --> 01:13:37,630
Maar uitzicht is waar al uw HTML
en esthetiek meestal gaan.

1562
01:13:37,630 --> 01:13:39,160
>> Dus wat betekent dit in reële termen?

1563
01:13:39,160 --> 01:13:45,980
Nou, laat me gaan in onze MVC
directory als volgt.

1564
01:13:45,980 --> 01:13:48,880
En je zult meer van deze te zien
toerde door in de spec.

1565
01:13:48,880 --> 01:13:53,200
Dus in mvc0, ik beweer dat dit, als,
versie 0 van websites CS50's.

1566
01:13:53,200 --> 01:13:56,670
>> Alles wat we hebben is wat HTML, zoals
een grote h1-tag, blijkbaar.

1567
01:13:56,670 --> 01:13:57,800
En dan een lijst met opsommingstekens.

1568
01:13:57,800 --> 01:13:59,860
Ik heb nog nooit een lijst met opsommingstekens gezien
vóór, maar geen big deal.

1569
01:13:59,860 --> 01:14:01,590
Laten we snel kijken naar de broncode.

1570
01:14:01,590 --> 01:14:06,610
Blijkt dat een ongeordende lijst met bullets
open beugel ul met een of

1571
01:14:06,610 --> 01:14:09,065
meer lijstitems, li.

1572
01:14:09,065 --> 01:14:10,650
Dus bericht hier is een anker-tag.

1573
01:14:10,650 --> 01:14:12,130
We zagen dat een moment geleden.

1574
01:14:12,130 --> 01:14:13,810
>> Dus dit is hoe ik geïmplementeerd
deze pagina.

1575
01:14:13,810 --> 01:14:18,460
Ik heb twee koppelingen, twee lijstitems, een
ul voor ongeordende lijst, en het einde

1576
01:14:18,460 --> 01:14:22,700
resultaat, esthetisch, is dit zeer
mooie website, versie 0 hier.

1577
01:14:22,700 --> 01:14:26,840
Maar wat interessant is nu hoe deze
wordt uitgevoerd onder de motorkap.

1578
01:14:26,840 --> 01:14:33,590
>> Laat me gaan in gedit en het openen van deze
allereerste voorbeeld van een beeld te schetsen.

1579
01:14:33,590 --> 01:14:37,070
En we zullen kijken naar wat is gebrekkig,
potentieel, in hier.

1580
01:14:37,070 --> 01:14:43,260
Nu als ik in localhost, openbare,
MVC, merken een paar bestanden.

1581
01:14:43,260 --> 01:14:45,780
Ik ga deze te bellen, voor de
ogenblik, alle controllers.

1582
01:14:45,780 --> 01:14:48,640
Maar dat is een beetje een misbruik omdat
zie je alles is vermengd

1583
01:14:48,640 --> 01:14:49,620
binnenkant van hen.

1584
01:14:49,620 --> 01:14:52,330
>> En laat me naar binnen gaan van index.php.

1585
01:14:52,330 --> 01:14:54,700
En wij zien, letterlijk, dezelfde HTML.

1586
01:14:54,700 --> 01:14:57,970
Dus ook al is dit bestand eindigt in
. Php, betekent het niet dat het om

1587
01:14:57,970 --> 01:14:59,500
hebben geen PHP-code.

1588
01:14:59,500 --> 01:15:02,290
Het kan gewoon rauw HTML, hoewel
dat is een beetje dom.

1589
01:15:02,290 --> 01:15:07,650
Maar merkt dat er geen open beugel PHP
taggen, met uitzondering van deze, die, eerlijk gezegd,

1590
01:15:07,650 --> 01:15:09,160
is er gewoon om te dienen als een reactie.

1591
01:15:09,160 --> 01:15:12,080
Maar dat is praktisch niet
zelfs dat interessant.

1592
01:15:12,080 --> 01:15:12,960
>> Maar merken dit.

1593
01:15:12,960 --> 01:15:15,400
Wat is interessant nu is wat
wijzigingen op deze pagina.

1594
01:15:15,400 --> 01:15:16,650
Laat me klik Lectures.

1595
01:15:16,650 --> 01:15:18,560
En let op de URL is aan het veranderen.

1596
01:15:18,560 --> 01:15:20,930
Nu ben ik op lectures.php.

1597
01:15:20,930 --> 01:15:22,630
Laat me nul klik.

1598
01:15:22,630 --> 01:15:27,200
Nu ben ik op week0.php En nu laat
me deze bestanden te openen in gedit.

1599
01:15:27,200 --> 01:15:30,120
Niet alleen index, maar laten
me openstellen lezingen.

1600
01:15:30,120 --> 01:15:33,900
En laat me te ontdoen van de reacties
alleen te richten op dit deel.

1601
01:15:33,900 --> 01:15:37,680
>> En nu laat ik open gewoon een meer,
week0.php, gooi de reacties,

1602
01:15:37,680 --> 01:15:39,910
alleen maar om deze op te ruimen.

1603
01:15:39,910 --> 01:15:41,720
En nu de volgende mededeling.

1604
01:15:41,720 --> 01:15:47,340
Denken echt soort van goed na over
ontwerp, en laten we het lijn

1605
01:15:47,340 --> 01:15:52,013
het zelfde, wat zou gebeuren
beter hier, denk je?

1606
01:15:52,013 --> 01:15:56,450

1607
01:15:56,450 --> 01:15:57,780
>> Hoe heb ik een week een?

1608
01:15:57,780 --> 01:15:58,480
Hoe zit dit.

1609
01:15:58,480 --> 01:16:00,450
Dus dit is hoe ik maakte een week.

1610
01:16:00,450 --> 01:16:08,290
Ik ging naar File, New, plakken, opslaan,
week1.php, en toen ging ik in hier.

1611
01:16:08,290 --> 01:16:09,875
En ik veranderde een -

1612
01:16:09,875 --> 01:16:11,646
Wat was dit, een tot vrijdag.

1613
01:16:11,646 --> 01:16:14,430

1614
01:16:14,430 --> 01:16:15,810
Ik veranderde de nullen tot een.

1615
01:16:15,810 --> 01:16:17,150
Ik veranderde dit naar een.

1616
01:16:17,150 --> 01:16:20,350
>> OK, dus nu kijk naar mijn bestanden.

1617
01:16:20,350 --> 01:16:22,100
Wat kan er anders?

1618
01:16:22,100 --> 01:16:25,310
Waar is de kans, misschien?

1619
01:16:25,310 --> 01:16:28,330
Dus er is de mogelijkheid om te starten
factoring dit spul uit.

1620
01:16:28,330 --> 01:16:32,950
Laat me open te stellen, als een spoiler, voor
wat zie je in P set 7.

1621
01:16:32,950 --> 01:16:38,750
Als ik open, nu, index.php in versie
vijf van deze, het ziet er zo

1622
01:16:38,750 --> 01:16:40,730
meer cryptisch, toegegeven.

1623
01:16:40,730 --> 01:16:43,710
>> Maar dit, nu, is wat ik noem een
controller die is het beheersen van de

1624
01:16:43,710 --> 01:16:44,770
logica van mijn pagina.

1625
01:16:44,770 --> 01:16:48,510
En je kunt soort reconstrueren,
intuïtief, misschien, wat er gaande is.

1626
01:16:48,510 --> 01:16:50,630
Op de eerste regel, het is
een beetje cryptisch.

1627
01:16:50,630 --> 01:16:54,040
Maar merk ik vereisen, zoals met
scherpe include, een bestand met de naam

1628
01:16:54,040 --> 01:16:55,930
helpers.php.

1629
01:16:55,930 --> 01:16:59,980
En dan ik bel, blijkbaar, een
functie, genaamd render, passeren in

1630
01:16:59,980 --> 01:17:00,850
twee argumenten.

1631
01:17:00,850 --> 01:17:02,440
>> Een citaat is unquote, header.

1632
01:17:02,440 --> 01:17:04,800
En de andere is, welke
datatype is dit, op basis van

1633
01:17:04,800 --> 01:17:07,180
op onze eerdere syntax?

1634
01:17:07,180 --> 01:17:08,160
Het is een geassocieerde array.

1635
01:17:08,160 --> 01:17:11,730
Concreet is het passeren in de titel
met een aantal metadata die doet denken

1636
01:17:11,730 --> 01:17:13,430
me wat het is en zijn waarde.

1637
01:17:13,430 --> 01:17:16,340
Dan zie ik een hard gecodeerd
ul, dus wat rauwe HTML.

1638
01:17:16,340 --> 01:17:20,020
Maar dan ben ik terug in PHP modus
aanroepen van een functie renderen.

1639
01:17:20,020 --> 01:17:24,390
Dus zelfs als je nooit HTML of PHP hebt gebruikt
vóór, en hoewel dit lijkt

1640
01:17:24,390 --> 01:17:27,480
enger, waarom is dit waarschijnlijk
beter ontwerp?

1641
01:17:27,480 --> 01:17:31,310
Wat is er beter over,
basis gevolgtrekking?

1642
01:17:31,310 --> 01:17:32,130
>> PUBLIEK: [onverstaanbaar]

1643
01:17:32,130 --> 01:17:35,750
>> LUIDSPREKER 1: Minder ontslagen bij dat
er is geen meer HTML-tag, niet meer

1644
01:17:35,750 --> 01:17:38,410
hoofden tag, niet meer body-tag
in elke verdomde file.

1645
01:17:38,410 --> 01:17:41,860
In plaats daarvan, ik heb meegenomen uit de
gemeenschappelijkheden en ze vermoedelijk gezet

1646
01:17:41,860 --> 01:17:45,150
in een bestand of andere manier gerelateerd
een header.

1647
01:17:45,150 --> 01:17:48,500
En hetzelfde voor het sluiten lichaam
tag, de nauwe HTML-tag.

1648
01:17:48,500 --> 01:17:52,165
Dat is waarschijnlijk hier van binnen
van de footer ergens.

1649
01:17:52,165 --> 01:17:57,050
En je zult zien, in Probleem set 7,
een kleine rondleiding door dit.

1650
01:17:57,050 --> 01:17:58,070
>> Dus wat ons te wachten?

1651
01:17:58,070 --> 01:18:03,390
Het enige wat we hebben niet de mogelijkheid
nog voor het is om daadwerkelijk gegevens op te slaan.

1652
01:18:03,390 --> 01:18:06,110
En dus wat we beginnen te zien
Woensdag, bijvoorbeeld, dat de

1653
01:18:06,110 --> 01:18:08,450
oude vriend Excel, of getallen,
stelt u in staat om veel te slaan

1654
01:18:08,450 --> 01:18:10,060
gegevens in rijen en kolommen.

1655
01:18:10,060 --> 01:18:12,570
Blijkt dat u kunt dat doen in wat
riep een databank, programmatisch.

1656
01:18:12,570 --> 01:18:16,620
manische En het blijkt, na dat,
zullen we in staat zijn om dingen op te slaan als

1657
01:18:16,620 --> 01:18:20,550
deze, waar je weer te zien in P set
7, een hele hoop van gebruikersnamen en

1658
01:18:20,550 --> 01:18:23,690
wachtwoorden, waarvan de laatste zijn
eigenlijk versleuteld, net zoals ze

1659
01:18:23,690 --> 01:18:25,550
waren in P set 2's hacker editie.

1660
01:18:25,550 --> 01:18:29,600
En uiteindelijk, zult u dit te implementeren,
je eigen eTrade-achtige website die

1661
01:18:29,600 --> 01:18:32,220
implementeert collectief CS50 financiën.

1662
01:18:32,220 --> 01:18:36,000
>> Ten slotte, omdat je hier verbleven zo laat
vandaag de dag, als je terug komen naar dit deel

1663
01:18:36,000 --> 01:18:41,120
van de campus, op 4:00 vandaag, zullen we
geven u niet alleen advies, bij de SCES

1664
01:18:41,120 --> 01:18:44,200
Adviseren Fair, om 4:00 uur in de
Maxwell-Dworkin, geven we u een aantal geven

1665
01:18:44,200 --> 01:18:47,470
Americone Dream, Cherry Garcia,
Chocolate Fudge Brownie, Chocolate

1666
01:18:47,470 --> 01:18:50,840
Chip Cookie Dough, en, als je Google
Chunky Monkey, krijg je dit.

1667
01:18:50,840 --> 01:18:53,620
Dus al die wacht op 4:00
PM in Maxwell-Dworkin.

1668
01:18:53,620 --> 01:18:56,736
Tot ziens op woensdag ook.

1669
01:18:56,736 --> 01:18:59,960
>> SPEAKER 2: Bij de volgende
CS50, RJ slaapt inch

1670
01:18:59,960 --> 01:19:03,656

1671
01:19:03,656 --> 01:19:04,906
>> RJ: Mijn sectie!

1672
01:19:04,906 --> 01:19:07,727

1673
01:19:07,727 --> 01:19:08,977
Ha!

1674
01:19:08,977 --> 01:19:12,056

1675
01:19:12,056 --> 01:19:13,306
Oh,

1676
01:19:13,306 --> 01:19:16,374