1
00:00:00,000 --> 00:00:02,570
[Powered by Google Translate] [Uke 9]

2
00:00:02,570 --> 00:00:04,740
[David J. Malan - Harvard University]

3
00:00:04,740 --> 00:00:07,170
[Dette er CS50. - CS50.TV]

4
00:00:07,170 --> 00:00:12,350
OK. Velkommen tilbake. Dette er CS50, og dette er begynnelsen av uke 9.

5
00:00:12,350 --> 00:00:16,600
I dag har vi spesielt fokusere på design, ikke lenger i sammenheng med C

6
00:00:16,600 --> 00:00:20,010
men i sammenheng med PHP og en bit av SQL og litt av JavaScript,

7
00:00:20,010 --> 00:00:23,730
spesielt mot slutten av både pset 7 og også det endelige prosjektet.

8
00:00:23,730 --> 00:00:26,310
Faktisk, hvis du er på det punktet i det endelige prosjektet

9
00:00:26,310 --> 00:00:30,100
hvor antakelig som for en time eller så siden du minst begynte å gi noen trodde

10
00:00:30,100 --> 00:00:33,730
til det endelige prosjektet, og du tenker at du har lyst til å samarbeide med en eller to klassekamerater,

11
00:00:33,730 --> 00:00:36,150
hvis du har problemer med å koble med sa klassekamerater,

12
00:00:36,150 --> 00:00:40,570
gjerne til å fylle ut skjemaet på cs50.net/partners/form.

13
00:00:40,570 --> 00:00:42,880
Det stiller bare deg hvem du er, hva slags prosjekt du tenker,

14
00:00:42,880 --> 00:00:44,870
hvor du bor bare for logistiske årsaker.

15
00:00:44,870 --> 00:00:49,510
Og hvis du ønsker å holde et øye med over neste uke eller så regnearket URL der,

16
00:00:49,510 --> 00:00:53,520
du kan da se en skrivebeskyttet versjon av Google doc

17
00:00:53,520 --> 00:00:56,010
der vi samle denne informasjonen.

18
00:00:56,010 --> 00:00:58,930
Så hvis du ønsker å jobbe med noen, for all del gjerne nå ut til folk

19
00:00:58,930 --> 00:01:00,480
via den mekanismen.

20
00:01:00,480 --> 00:01:02,690
Men flertallet av folk gjør arbeidet solo. Det er helt greit.

21
00:01:02,690 --> 00:01:06,120
Så føler ikke at dette på noen måte er obligatorisk.

22
00:01:06,120 --> 00:01:09,680
På fredag ​​var det bare meg og noen av teamet her,

23
00:01:09,680 --> 00:01:11,100
tom teater for det meste.

24
00:01:11,100 --> 00:01:14,600
Det var 3 turister sitter oppe, så det var litt vanskelig.

25
00:01:14,600 --> 00:01:18,970
Hva vi snakket om var databaser og vi snakket om pset 7 litt.

26
00:01:18,970 --> 00:01:22,200
Og hvis du ikke skje for å fange det på video ennå, er det helt greit.

27
00:01:22,200 --> 00:01:26,770
Jeg skal prøve å definere noen begreper som vi ellers ville ta for gitt

28
00:01:26,770 --> 00:01:28,840
basert på fredagens forelesning.

29
00:01:28,840 --> 00:01:32,550
>> Men i dag skal vi prøve å få deg til det punktet

30
00:01:32,550 --> 00:01:34,990
av ikke bare å være i stand til å gjøre noe sånt pset 7

31
00:01:34,990 --> 00:01:37,360
men virkelig forstå hva som skjer under panseret,

32
00:01:37,360 --> 00:01:41,910
særlig noen av de abstraksjoner som vi satt på plass i functions.php fil

33
00:01:41,910 --> 00:01:45,780
for å gjøre livet litt enklere, men slik at du til slutt forstår

34
00:01:45,780 --> 00:01:48,760
slik at når trening hjul komme seg i et par uker kan du likevel overleve

35
00:01:48,760 --> 00:01:53,750
i den virkelige verden og gjøre slike ting uten CS50 rammeverk under deg.

36
00:01:53,750 --> 00:01:57,500
Denne $ _SESSION, for de av dere som er kjent

37
00:01:57,500 --> 00:02:01,960
eller som allerede fanget video på fredag, hva SESSION la oss gjøre

38
00:02:01,960 --> 00:02:04,330
i en PHP-basert web-applikasjon?

39
00:02:04,330 --> 00:02:09,650
Dette er en superglobal variabel, som betyr at det er lik i ånden til GET og POST

40
00:02:09,650 --> 00:02:13,970
og noen få andre, men hva er dette tingen nyttig for?

41
00:02:13,970 --> 00:02:18,320
>> Hva er SESSION til? Ja. [Student] Logger inn

42
00:02:18,320 --> 00:02:21,040
Beklager? [Student] Logger inn Logger inn Indeed.

43
00:02:21,040 --> 00:02:25,100
I pset 7 bruker vi denne SESSION superglobal å lette logge inn

44
00:02:25,100 --> 00:02:28,600
Og hva er fint om dette superglobal er at det er en assosiativ array.

45
00:02:28,600 --> 00:02:33,190
En assosiativ array, tilbakekalling, er bare en matrise, men hvis indeksene ikke lenger å være tall

46
00:02:33,190 --> 00:02:37,670
som 012. De kan være tall eller de kan være selv strenger.

47
00:02:37,670 --> 00:02:44,890
Og så hvis du har dykket inn pset 7 ennå, kan du huske at vi lagrer en nøkkel kalt ID

48
00:02:44,890 --> 00:02:50,330
innsiden av denne assosiativ array hvis verdi er noe som 123 -

49
00:02:50,330 --> 00:02:53,780
uansett påloggede brukeren ID-er.

50
00:02:53,780 --> 00:02:59,470
Motivasjonen for dette er at selv etter at brukeren har besøkt localhost

51
00:02:59,470 --> 00:03:02,720
eller min hjemmeside mer generelt og de har logget inn,

52
00:03:02,720 --> 00:03:07,320
selv om de ikke klikker på en lenke eller gå tilbake til min hjemmeside i 5 minutter

53
00:03:07,320 --> 00:03:10,730
eller enda en time eller en dag, men de forlater sitt nettleservindu åpent,

54
00:03:10,730 --> 00:03:14,370
via denne superglobal kan jeg huske at de er logget inn

55
00:03:14,370 --> 00:03:21,140
>> Med andre ord, gjør det meg å lagre litt langsiktig hva jeg vil om en bruker.

56
00:03:21,140 --> 00:03:24,390
Og du kan tenke på det egentlig som inkarnasjonen av en handlevogn.

57
00:03:24,390 --> 00:03:27,740
Steder som Amazon åpenbart lar deg sette ting i en handlekurv,

58
00:03:27,740 --> 00:03:32,230
men HTTP, protokollen som driver nettet, er statsløs

59
00:03:32,230 --> 00:03:34,230
i den forstand at når du besøker et nettsted,

60
00:03:34,230 --> 00:03:37,290
for det meste du ikke har noen konstant nettverkstilkobling

61
00:03:37,290 --> 00:03:39,270
mellom nettleseren og serveren.

62
00:03:39,270 --> 00:03:42,190
Så snart du har lastet ned HTML og JPEG og GIF og alt det der,

63
00:03:42,190 --> 00:03:48,200
forbindelsen blir borte og du trenger bare en kopi av HTML og whatnot fra serveren.

64
00:03:48,200 --> 00:03:53,000
Men hvis serveren ønsker å huske noe om deg,

65
00:03:53,000 --> 00:03:57,580
byrden er på serveren til å faktisk spille denne informasjonen.

66
00:03:57,580 --> 00:04:00,130
Og så du programmerer som har kontroll over serveren

67
00:04:00,130 --> 00:04:04,400
kan sette de fleste noe du ønsker innsiden av dette superglobal assosiativ array

68
00:04:04,400 --> 00:04:06,850
og det vil være det neste gang brukeren kommer tilbake,

69
00:04:06,850 --> 00:04:12,070
enten det er minutter eller til og med dager senere, med mindre de stenge sin nettleservinduet,

70
00:04:12,070 --> 00:04:14,360
noe som medførte at SESSION forsvinner.

71
00:04:14,360 --> 00:04:17,779
Så det er flyktig lagring, er det ikke vedvarende, og det er ment å gå bort

72
00:04:17,779 --> 00:04:22,360
så snart brukeren lukker nettleseren - ikke bare den fanen, ofte hele nettleseren,

73
00:04:22,360 --> 00:04:24,930
dermed effektivt logger brukeren ut.

74
00:04:24,930 --> 00:04:28,000
Så hvordan er dette tingen faktisk blir gjennomført?

75
00:04:28,000 --> 00:04:31,360
La oss ta en rask titt på et enkelt eksempel vi så på fredag.

76
00:04:31,360 --> 00:04:33,340
For de som ikke kjenner, var det så enkelt som dette.

77
00:04:33,340 --> 00:04:35,910
Dette er en nettside der det eneste mål i livet er å fortelle meg

78
00:04:35,910 --> 00:04:38,000
hvor mange ganger jeg har besøkt denne siden.

79
00:04:38,000 --> 00:04:41,670
Dette er første gang her på mandag at jeg besøkte den, så det sier 0 ganger.

80
00:04:41,670 --> 00:04:46,940
>> Men hvis jeg begynner omlasting denne siden, sier det en gang, 2, 3, 4, 5,

81
00:04:46,940 --> 00:04:49,800
og dette vil til slutt bare holde på å telle opp, opp, opp, opp, opp

82
00:04:49,800 --> 00:04:53,130
for hver gang jeg faktisk klikker Last på den.

83
00:04:53,130 --> 00:04:58,830
Så hvordan er dette arbeidet? La meg gå inn i denne filen som heter counter.php.

84
00:04:58,830 --> 00:05:02,490
Den øverste delen av det er alle blå kommentarer, men interessante er her.

85
00:05:02,490 --> 00:05:06,670
På linje 13 kaller vi denne funksjonen session_start,

86
00:05:06,670 --> 00:05:09,600
og det er bokstavelig talt alt du trenger å gjøre hvis du ønsker å ha tilgang

87
00:05:09,600 --> 00:05:13,610
til denne spesielle superglobal kalt $ _SESSION.

88
00:05:13,610 --> 00:05:17,430
Det gjør det hele mulig, og vi vil se i et øyeblikk hvor det er alt mulig.

89
00:05:17,430 --> 00:05:20,350
I linje 16 varsel hva jeg gjør.

90
00:05:20,350 --> 00:05:25,960
Hvis nøkkelen, kalt teller - med andre ord, indeksverdien - "counter"

91
00:05:25,960 --> 00:05:32,310
Det finnes inne i denne array kalt SESSION, så hva gjør jeg med det i linjen under?

92
00:05:32,310 --> 00:05:36,650
Hva er linje 18 gjør?

93
00:05:36,650 --> 00:05:40,360
>> [Uhørlig student respons] Hva er det? [Student] Lagre verdien. Bra.

94
00:05:40,360 --> 00:05:45,800
Det er lagring av verdien som er i SESSION akkurat nå i en ny lokal midlertidig variabel,

95
00:05:45,800 --> 00:05:48,250
$ Teller i alle små bokstaver.

96
00:05:48,250 --> 00:05:50,770
Legg merke til at PHP er allerede å være litt lat her.

97
00:05:50,770 --> 00:05:55,550
Legg merke til at vi ikke har noen omtale av int eller flyte eller hyssing eller noe sånt

98
00:05:55,550 --> 00:06:00,480
fordi PHP er svakt skrevet, hvor du ikke trenger å spesifisere hvilken type en variabel,

99
00:06:00,480 --> 00:06:03,310
og i dette tilfellet her ikke jeg har selv erklært det ennå.

100
00:06:03,310 --> 00:06:08,980
Jeg erklærer det innsiden av disse klammeparentes og i motsetning til C, dette er faktisk greit.

101
00:06:08,980 --> 00:06:13,800
Uansett hvor dypt nestet en variabel erklæring er i PHP -

102
00:06:13,800 --> 00:06:16,650
innsiden av krøllete spenne, innsiden av krøllete seler og lignende -

103
00:06:16,650 --> 00:06:21,230
det vil i det øyeblikk i tid finnes for resten av programmet,

104
00:06:21,230 --> 00:06:22,680
for bedre eller verre.

105
00:06:22,680 --> 00:06:26,930
Så det blir umiddelbart global så snart du definerer det som vi gjør her.

106
00:06:26,930 --> 00:06:31,620
>> Ellers, hvis jeg ikke finner at det er noe i SESSION superglobal,

107
00:06:31,620 --> 00:06:34,680
Jeg tydeligvis initialisering denne variabelen teller til 0,

108
00:06:34,680 --> 00:06:37,580
dermed bare forutsatt at brukeren har aldri vært her før.

109
00:06:37,580 --> 00:06:40,030
Og så dette selvfølgelig er inkrementering telleren hvordan?

110
00:06:40,030 --> 00:06:44,480
Jeg oppdaterer verdien som er inne i dette assosiativ array

111
00:06:44,480 --> 00:06:49,530
ved å sette den lik uansett teller i dag er + 1.

112
00:06:49,530 --> 00:06:53,520
Hvis jeg ruller nedover hit til HTML på siden, det er faktisk ganske enkelt.

113
00:06:53,520 --> 00:06:58,920
Alt jeg har i kroppen av denne siden er: "Du har besøkt dette området så-og-så ganger."

114
00:06:58,920 --> 00:07:00,350
Og dette er en PHP konstruksjon.

115
00:07:00,350 --> 00:07:06,080
Hvis du gjør <? = Tilsvarer dette effektivt til hvilken funksjon?

116
00:07:07,920 --> 00:07:12,600
Det er virkelig tilsvarer noe sånt som printf, som vi har sett mange ganger i C,

117
00:07:12,600 --> 00:07:15,940
men som du kanskje vet allerede fra spec i pset 7,

118
00:07:15,940 --> 00:07:20,160
Utskriften er også en funksjon som bare skriver noe ut, betyr det ikke faktisk bruker formatkoder,

119
00:07:20,160 --> 00:07:23,270
og du kan faktisk si ekko også.

120
00:07:23,270 --> 00:07:27,460
De er alle aldri så litt annerledes selv om nettoeffekten er slutt den samme.

121
00:07:27,460 --> 00:07:31,270
Så denne bruken av likhetstegnet er bare en slags en elegant måte å gjøre det

122
00:07:31,270 --> 00:07:34,910
mer konsist enn du ellers ville være i stand til.

123
00:07:34,910 --> 00:07:38,370
Så det er alt dette nettstedet gjør. Det skrives ut verdien av telleren.

124
00:07:38,370 --> 00:07:40,550
Hvordan er dette alt faktisk skjer?

125
00:07:40,550 --> 00:07:43,250
Du husker kanskje en uke eller så siden vi begynte å se under panseret

126
00:07:43,250 --> 00:07:47,910
på hvordan en nettside fungerer ved hjelp av denne Inspector kategorien.

127
00:07:47,910 --> 00:07:51,900
>> Chrome har dette både i Mac-versjonen, Windows-versjonen, og selv Linux-versjonen,

128
00:07:51,900 --> 00:07:59,510
og Firefox og IE har lignende mekanismer der du har dette innebygd debugger

129
00:07:59,510 --> 00:08:01,400
innsiden av nettleseren.

130
00:08:01,400 --> 00:08:03,040
La oss ta en titt på følgende.

131
00:08:03,040 --> 00:08:06,960
Vi har fått en hel haug med faner her, og husker at venstre en er Elements,

132
00:08:06,960 --> 00:08:10,700
og uansett hvor godawful HTML og JavaScript er på en side,

133
00:08:10,700 --> 00:08:15,710
husker at med Elements fanen kan du faktisk navigere HTML hierarkisk

134
00:08:15,710 --> 00:08:17,050
og hyggelig og pent.

135
00:08:17,050 --> 00:08:19,370
Så hvis du prøver å lære fra en nettside som Google eller Facebook

136
00:08:19,370 --> 00:08:22,370
eller egentlig hvilken som helst nettside, skjønner at du er sannsynligvis bedre

137
00:08:22,370 --> 00:08:26,360
ser på kildekoden denne måten som motsetning til å se den rå kilde,

138
00:08:26,360 --> 00:08:29,580
som kan være et rot, som vi har sett spesielt på Googles nettsted.

139
00:08:29,580 --> 00:08:32,220
Så hvis jeg i stedet klikke på kategorien Nettverk her,

140
00:08:32,220 --> 00:08:34,830
la oss se hva som skjer når jeg besøker denne siden.

141
00:08:34,830 --> 00:08:38,669
Først la meg tømme hurtigbufferen.

142
00:08:38,669 --> 00:08:43,570
Jeg kommer til å gå inn i innstillinger i Chrome og deretter gå til Historie

143
00:08:43,570 --> 00:08:46,420
og deretter Fjern alle nettleserdata.

144
00:08:46,420 --> 00:08:48,170
Du kan bli vant til å gjøre dette for andre formål, [latter]

145
00:08:48,170 --> 00:08:51,990
men når det gjelder å utvikle nettsteder, er det faktisk nyttig -

146
00:08:51,990 --> 00:08:55,980
hvis du ler du vet. [Latter]

147
00:08:55,980 --> 00:08:59,310
Det er faktisk veldig nyttig når utvikle nettsteder fordi virkeligheten er

148
00:08:59,310 --> 00:09:04,100
ting som cookies og ting som hurtigbufrede HTML-filer, bufrede JavaScript-filer

149
00:09:04,100 --> 00:09:06,390
kan faktisk bli en stor hodepine, fordi hvis uansett grunn

150
00:09:06,390 --> 00:09:11,500
leseren bestemmer seg for å bufre noen fil og ennå du har gjort endringer i denne filen på serveren

151
00:09:11,500 --> 00:09:14,670
men leseren ikke har virkelig innsett at filen er endret

152
00:09:14,670 --> 00:09:19,060
og derfor ikke faktisk re-laste den ned selv når du klikker Oppdater-knappen,

153
00:09:19,060 --> 00:09:23,210
en av de mest surefire måter å bare sørge for at feilen ikke er med koden din,

154
00:09:23,210 --> 00:09:26,480
det er med oppførselen til nettleseren, er å gå her i nettleseren din

155
00:09:26,480 --> 00:09:29,950
og bare slette hele historien slik at det er ingen forvirring.

156
00:09:29,950 --> 00:09:33,210
>> Og hvis du virkelig ønsker å være paranoid, avslutter nettleseren, starte den,

157
00:09:33,210 --> 00:09:35,660
og deretter sørge for at alt fungerer som forventet.

158
00:09:35,660 --> 00:09:38,820
Så kort sagt, er clearing cache god når du gjør utvikling.

159
00:09:38,820 --> 00:09:40,690
Så her har vi kategorien Nettverk.

160
00:09:40,690 --> 00:09:46,020
Jeg hadde tidligere besøkt området 9 ganger, men la meg gå videre nå og klikk Reload.

161
00:09:46,020 --> 00:09:47,500
Og jeg er tilbake ned til 0.

162
00:09:47,500 --> 00:09:52,100
La oss faktisk se hvordan det er at dette SESSION superglobal blir gjennomført.

163
00:09:52,100 --> 00:09:55,990
Jeg kommer til å klikke på en HTTP-forespørsel som ble gjort,

164
00:09:55,990 --> 00:09:58,810
og denne debugging vindu lar meg se innsiden av det.

165
00:09:58,810 --> 00:10:01,970
Her ser jeg bare svar fra serveren, som ikke er interessant.

166
00:10:01,970 --> 00:10:04,030
Jeg har sett dette i en rekke måter.

167
00:10:04,030 --> 00:10:06,350
Men hva er teknisk interessant er overskriftene.

168
00:10:06,350 --> 00:10:11,770
Hvis jeg ruller nedover her og fokusere på forespørselstopptekster og klikk vis kilde,

169
00:10:11,770 --> 00:10:14,400
hva jeg kommer til å se er bokstavelig talt HTTP-forespørsel

170
00:10:14,400 --> 00:10:17,250
som bare gikk fra nettleseren min til serveren,

171
00:10:17,250 --> 00:10:21,400
GET blir det operative ordet og deretter / counter.php blir filnavnet,

172
00:10:21,400 --> 00:10:25,670
HTTP/1.1 bare å være den versjonen av HTTP som min nettleser bruker.

173
00:10:25,670 --> 00:10:31,070
Denne linjen her er en liten påminnelse fra nettleseren til serveren hva navnet på serveren er

174
00:10:31,070 --> 00:10:33,020
at den ønsker å snakke med.

175
00:10:33,020 --> 00:10:38,200
Og deretter resten av dette er noen ganger interessant, men ikke relevant akkurat nå.

176
00:10:38,200 --> 00:10:40,090
>> Dette er bare en slags nysgjerrighet.

177
00:10:40,090 --> 00:10:43,530
Kryptisk om denne strengen er, helst nettleseren besøker en nettside

178
00:10:43,530 --> 00:10:47,110
det er å informere serveren hvilken nettleser du bruker

179
00:10:47,110 --> 00:10:50,040
og hvilket operativsystem du bruker og hvilken versjon av dette.

180
00:10:50,040 --> 00:10:52,650
Så hvis du noen gang har lurt på hvordan nettsteder som CNN og whatnot

181
00:10:52,650 --> 00:10:56,860
vet hva de prosenter er av Mac-brukere på nettet, PC-brukere,

182
00:10:56,860 --> 00:11:00,820
IE-brukere, Chrome-brukere og lignende, er det fordi alle våre lesere

183
00:11:00,820 --> 00:11:04,300
forteller hver eneste nettstedet ut det hva vi er.

184
00:11:04,300 --> 00:11:07,410
Det betyr ikke nødvendigvis inneholde personlig identifiserbar informasjon,

185
00:11:07,410 --> 00:11:13,060
men det gjør fortelle serveren hva din IP-adresse er og hvilken nettleser og operativsystem du bruker.

186
00:11:13,060 --> 00:11:14,720
Så det er der denne informasjonen er.

187
00:11:14,720 --> 00:11:19,960
Men hva er mer interessant nå når det kommer til disse øktene er svaroverskrift.

188
00:11:19,960 --> 00:11:22,530
La meg Klikk Vis kilde ved respons.

189
00:11:22,530 --> 00:11:24,590
Hva er interessant her er et par ting.

190
00:11:24,590 --> 00:11:27,580
1, fikk vi tilbake en status på 200..

191
00:11:27,580 --> 00:11:29,840
Vi aldri se denne statusen kode fordi det betyr at alt er bra.

192
00:11:29,840 --> 00:11:32,920
Det betyr bokstavelig talt greit i motsetning til noe annet.

193
00:11:32,920 --> 00:11:36,380
Hva er et tall vi noen ganger ser det er ille? [Student] 404.

194
00:11:36,380 --> 00:11:39,860
404, finner ikke filen, kan 403 du snubler over alt,

195
00:11:39,860 --> 00:11:43,660
som er forbudt, noe som betyr at du glemte å chmod noe, mest sannsynlig.

196
00:11:43,660 --> 00:11:45,190
Og det er en haug med andre.

197
00:11:45,190 --> 00:11:47,760
>> Her nede, er dette en litt gal.

198
00:11:47,760 --> 00:11:52,340
Jeg bare skrev denne filen for noen minutter siden ved å lime det inn i gedit.

199
00:11:52,340 --> 00:11:57,100
Hvorfor gjorde denne siden utløper i 1981 før det virkelig var en web?

200
00:11:58,010 --> 00:12:00,730
Hva skjer der?

201
00:12:00,730 --> 00:12:04,390
>> [Uhørlig student respons] tidsangivelsen. Men hvorfor?

202
00:12:06,110 --> 00:12:09,120
Det er noe vilkårlig, men det er faktisk nyttig.

203
00:12:09,120 --> 00:12:15,500
Hva dette sier til nettleseren min er dette PHP-filen du nettopp har bedt om er allerede utløpt.

204
00:12:15,500 --> 00:12:18,580
Faktisk utløpt det 30 år siden.

205
00:12:18,580 --> 00:12:20,260
Men hva betyr det egentlig?

206
00:12:20,260 --> 00:12:22,500
Det betyr bare at neste gang brukeren besøker denne siden,

207
00:12:22,500 --> 00:12:25,540
enten ved omlasting eller skrive inn URL i adresselinjen,

208
00:12:25,540 --> 00:12:28,010
sørg for at du gå og hente en ny kopi av den.

209
00:12:28,010 --> 00:12:30,840
Dette er liksom et eksempel på cache busting,

210
00:12:30,840 --> 00:12:33,790
en dum ord som bare betyr å prøve å motvirke nettlesere

211
00:12:33,790 --> 00:12:37,260
fra faktisk caching HTML som er blitt sendt fra en server

212
00:12:37,260 --> 00:12:41,490
slik at du ikke tilfeldigvis treffer reload og deretter se den samme versjonen av filen.

213
00:12:41,490 --> 00:12:43,730
Du faktisk vil at serveren skal sende en ny kopi.

214
00:12:43,730 --> 00:12:47,440
Så det faktum at det er 1981 betyr bare at det er det apparatet er å velge

215
00:12:47,440 --> 00:12:50,280
som en vilkårlig dato i fortiden.

216
00:12:50,280 --> 00:12:53,380
Men den virkelige saftig linjen er nå denne.

217
00:12:53,380 --> 00:12:57,550
Selv før 50 er du sannsynligvis litt kjent med informasjonskapsler.

218
00:12:57,550 --> 00:13:01,820
Per akkurat nå, spesielt blant de mindre komfortable eller i mellom,

219
00:13:01,820 --> 00:13:04,120
Hva er en informasjonskapsel i din forståelse akkurat nå

220
00:13:04,120 --> 00:13:06,980
selv om vi er i ferd med å gjøre din forståelse mer teknisk?

221
00:13:08,150 --> 00:13:10,070
Hva er en cookie? Ja.

222
00:13:10,070 --> 00:13:13,890
[Student] Informasjon om brukeren, som om de har skrevet brukernavn eller noe.

223
00:13:13,890 --> 00:13:17,370
>> Bra. Det er informasjon om brukeren, enten de har skrevet i deres brukernavn allerede.

224
00:13:17,370 --> 00:13:21,190
Cookies er en måte der serverne kan huske noe om en bruker.

225
00:13:21,190 --> 00:13:25,810
Og hva en cookie egentlig er er en tekstfil eller noen sekvens av bytes

226
00:13:25,810 --> 00:13:28,340
som er plantet av serveren inne i nettleseren,

227
00:13:28,340 --> 00:13:31,960
og innsiden av filen eller blant de byte er en slags identifikator.

228
00:13:31,960 --> 00:13:35,640
Kanskje det er bokstavelig talt ditt brukernavn, men oftere er det noe mer kryptisk utseende

229
00:13:35,640 --> 00:13:43,700
som dette tingen her - bo8dal3ct og så videre - dette virkelig stor alfanumerisk streng

230
00:13:43,700 --> 00:13:47,050
det er egentlig bare ment å være en unik identifikator for deg.

231
00:13:47,050 --> 00:13:49,790
Eller du kan tenke på det som en slags virtuell hånd-stempel.

232
00:13:49,790 --> 00:13:53,020
Hvis du går til noen klubb eller en fornøyelsespark, å huske at du faktisk har betalt

233
00:13:53,020 --> 00:13:55,850
og gått inn, satte de en liten rød klistremerke på hånden av noe slag,

234
00:13:55,850 --> 00:13:59,270
og som minner folk på telleren som du allerede har betalt

235
00:13:59,270 --> 00:14:01,340
og du kan komme og gå som du vil.

236
00:14:01,340 --> 00:14:04,250
Cookies er litt lik i ånden til det.

237
00:14:04,250 --> 00:14:08,070
Første gang jeg besøkte dette nettstedet, som jeg bare gjorde etter å fjerne min cache,

238
00:14:08,070 --> 00:14:11,620
webserveren, apparatet i dette tilfellet, sette et stempel på hånden min

239
00:14:11,620 --> 00:14:15,030
hvis navn er PHPSESSID, økt-ID,

240
00:14:15,030 --> 00:14:18,260
hvis verdi er dette veldig lang alfanumerisk streng.

241
00:14:18,260 --> 00:14:22,470
>> Så det er nå liksom emblazoned på hånden min slik at neste gang jeg traff laste

242
00:14:22,470 --> 00:14:25,230
eller manuelt besøke denne nettadressen i nettleseren,

243
00:14:25,230 --> 00:14:29,230
nettleseren min ved definisjon av HTTP kommer til å presentere hånden stempel

244
00:14:29,230 --> 00:14:31,940
igjen og igjen og igjen.

245
00:14:31,940 --> 00:14:34,550
Så selv om serveren ikke nødvendigvis vet hvem jeg er,

246
00:14:34,550 --> 00:14:39,610
de minst vet at jeg er den samme brukeren eller i det minste, mer spesifikt, samme nettleser.

247
00:14:39,610 --> 00:14:45,660
Og så dette er til syvende og sist hvordan SESSION superglobal er implementert.

248
00:14:45,660 --> 00:14:51,200
Serveren har ingen anelse om hvem du er når du besøker en nettside for andre eller tredje gang

249
00:14:51,200 --> 00:14:53,410
med mindre du leverer hånd-stempel.

250
00:14:53,410 --> 00:14:55,530
Og så snart du presenterer den hånden stempel,

251
00:14:55,530 --> 00:14:59,370
webserveren går i hovedsak inn i en liten database av sine egne

252
00:14:59,370 --> 00:15:06,040
og sjekker, ok, jeg har nettopp sett hånd-stempel av bruker bo8dal3ct og så videre.

253
00:15:06,040 --> 00:15:09,850
La meg se hva slags informasjon programmereren har lagret

254
00:15:09,850 --> 00:15:12,380
innsiden av superglobal om denne brukeren,

255
00:15:12,380 --> 00:15:17,000
og så la meg forsikre deg om at dataene er igjen inne i SESSION superglobal

256
00:15:17,000 --> 00:15:19,830
slik at programmereren kan re-tilgang til data

257
00:15:19,830 --> 00:15:23,360
selv om det ble satt noen minutter eller timer siden.

258
00:15:23,360 --> 00:15:26,150
Så med andre ord, cookies, som fikk en dårlig rap for noen tid

259
00:15:26,150 --> 00:15:29,990
på grunn av usikkerhet i nettlesere, og de kan virkelig krenke vårt personvern og alt dette,

260
00:15:29,990 --> 00:15:31,900
de faktisk har stor nytte fordi uten dem

261
00:15:31,900 --> 00:15:36,110
du ville stadig være å logge inn på hver Facebook-side du besøker

262
00:15:36,110 --> 00:15:40,680
eller hver Gmail e-posten du lese hvis leseren ikke har noen måte å huske

263
00:15:40,680 --> 00:15:43,320
at du allerede har godkjent.

264
00:15:43,320 --> 00:15:46,640
>> Så på denne måten cookies blir sendt frem og tilbake over ledningen.

265
00:15:46,640 --> 00:15:52,470
En annen kuriositet om cookies, spesielt her, er at dette er helt i klartekst.

266
00:15:52,470 --> 00:15:54,930
Det er ingen kryptering skjer her overhodet,

267
00:15:54,930 --> 00:15:57,240
og faktisk jeg bruker HTTP for øyeblikket.

268
00:15:57,240 --> 00:16:00,890
En av våre favoritter øyeblikk i CS50, som nå er 2 år siden,

269
00:16:00,890 --> 00:16:04,750
var rundt den tiden et verktøy kalt Firesheep kom ut.

270
00:16:04,750 --> 00:16:08,320
Dette var en gratis stykke programvare som ble gjort av en sikkerhetsforsker

271
00:16:08,320 --> 00:16:13,250
som en wake-up call for samfunnet å si hvor atrociously implementert

272
00:16:13,250 --> 00:16:17,900
visse autentiseringsmekanismer på nettet var.

273
00:16:17,900 --> 00:16:22,880
Så for noen tid, var Facebook nesten helt over HTTP, ingen HTTPS.

274
00:16:22,880 --> 00:16:25,640
Og selv om du ikke har noen anelse om hvordan krypto fungerer, er S sikker

275
00:16:25,640 --> 00:16:27,950
så det betyr at det er minst noen kryptering involvert.

276
00:16:27,950 --> 00:16:30,610
Facebook gjorde brukt til å kryptere brukernavn og passord,

277
00:16:30,610 --> 00:16:33,560
men så snart du har sett på din kakker eller meldinger eller din nyhetsfeed,

278
00:16:33,560 --> 00:16:35,360
alle som ble ukryptert.

279
00:16:35,360 --> 00:16:37,870
Så var Gmail til bare et år eller to siden.

280
00:16:37,870 --> 00:16:41,100
Hver gang du logget inn, ja, de brukte sikker kryptering

281
00:16:41,100 --> 00:16:44,300
men etterpå gjorde de ikke. Og hvorfor kan det være?

282
00:16:44,300 --> 00:16:49,210
Hvorfor ikke bare bruke kryptografi hele tiden i bruk tilfeller som dette?

283
00:16:49,210 --> 00:16:53,700
Hva er det? Jeg tror jeg hørte noe. [Student] Speed.

284
00:16:53,700 --> 00:16:56,250
Hastighet, ikke sant? Det finnes måter rundt dette.

285
00:16:56,250 --> 00:16:59,610
Men hvis du bare slags tenker på det logisk, hvis du krypterer noe,

286
00:16:59,610 --> 00:17:01,820
du trenger å gjøre minst litt mer arbeid.

287
00:17:01,820 --> 00:17:05,460
I pset 2 når du implementert keiseren eller Vigenere eller Crack,

288
00:17:05,460 --> 00:17:07,760
bare skrive ut en streng er relativt enkelt.

289
00:17:07,760 --> 00:17:12,040
Kryptering og deretter skrive en streng minimal krever litt mer arbeid.

290
00:17:12,040 --> 00:17:14,520
>>  For super populære nettsteder som Google og Facebook,

291
00:17:14,520 --> 00:17:18,839
Hvis du trenger å gjøre mer arbeid for hver bruker for hver enkelt nettside de besøker,

292
00:17:18,839 --> 00:17:20,520
som tar bare mer CPU tid.

293
00:17:20,520 --> 00:17:22,920
Og hvis du trenger mer CPU tid, må du kanskje flere servere,

294
00:17:22,920 --> 00:17:24,270
som betyr at du kanskje trenger mer penger.

295
00:17:24,270 --> 00:17:27,579
Og det i mange år dette bare var egentlig ikke beste praksis.

296
00:17:27,579 --> 00:17:31,440
Folk ville bruke SSL-kryptering bare når de måtte.

297
00:17:31,440 --> 00:17:34,960
Men det viste seg, og som denne karen med Firesheep gjort super klar,

298
00:17:34,960 --> 00:17:37,920
når dere som er for tiden på Facebook akkurat nå -

299
00:17:37,920 --> 00:17:39,880
Ut av nysgjerrighet, la oss se om du vil fess opp.

300
00:17:39,880 --> 00:17:42,620
Hvis du er på Facebook akkurat nå i noen kategori, selv om det ikke er foregrounded,

301
00:17:42,620 --> 00:17:46,610
er nettadressen HTTP eller HTTPS?

302
00:17:46,610 --> 00:17:50,560
[Flere studenter] S. S? [Latter]

303
00:17:50,560 --> 00:17:55,510
Okay. Noen HTTP? Bare 1? Okay.

304
00:17:55,510 --> 00:17:58,940
Så alle av oss kan hacke den fyren Facebook-konto akkurat nå.

305
00:17:58,940 --> 00:18:04,100
For det meste er dette blitt slått på som standard, i hvert fall i enkelte nettsteder.

306
00:18:04,100 --> 00:18:08,120
Og lang historie kort, hvis din web-trafikk er ikke kryptert,

307
00:18:08,120 --> 00:18:12,960
ikke bare går HTML frem og tilbake over de wifis ukrypterte,

308
00:18:12,960 --> 00:18:16,760
så går ting som cookies og tilbake gjennom luften

309
00:18:16,760 --> 00:18:18,940
uten noen form for kryptering.

310
00:18:18,940 --> 00:18:23,540
Så hvis du har bare en bit av programmering kunnskapsrike eller en bit av googlingen ferdigheter

311
00:18:23,540 --> 00:18:27,410
å finne gratis programvare som gjør dette, er å sitte alt du trenger å gjøre i Starbucks

312
00:18:27,410 --> 00:18:30,680
eller sitte på en flyplass der det er generelt ukryptert WiFi

313
00:18:30,680 --> 00:18:36,070
og bare se etter nøkkelord som Set-Cookie: eller PHPSESSID

314
00:18:36,070 --> 00:18:39,300
fordi hvis du har teknisk kyndige å bare se på WiFi

315
00:18:39,300 --> 00:18:43,010
for alle de biter som flyt gjennom luften for dette mønster,

316
00:18:43,010 --> 00:18:50,840
du kan si at fyren er PHPSESSID skjer for å være bo8dal og så videre.

317
00:18:50,840 --> 00:18:53,890
Og så igjen hvis du er tilstrekkelig teknisk kunnskapsrike eller har det riktige verktøyet,

318
00:18:53,890 --> 00:18:58,890
du kan da bare rekonfigurere sin egen nettleser for å begynne å presentere den hånden stempel

319
00:18:58,890 --> 00:19:05,030
å Facebook.com, og Facebook er bare kommer til å anta at du er den fyren

320
00:19:05,030 --> 00:19:09,880
fordi alt de vet er ikke hvem du er, men at du har denne unik identifikator.

321
00:19:09,880 --> 00:19:14,650
Så hvis du stjele den unik identifikator og presentere den til webserveren som din egen,

322
00:19:14,650 --> 00:19:16,860
de er bare kommer til å vise deg at personen nyhetsfeed

323
00:19:16,860 --> 00:19:18,980
eller vedkommendes meldinger eller kakker.

324
00:19:18,980 --> 00:19:23,190
>> Og jeg vil Google nå hvordan du aktiverer HTTPS for Facebook kanskje.

325
00:19:23,190 --> 00:19:25,150
Men det er egentlig så enkelt som det.

326
00:19:25,150 --> 00:19:27,660
Og så Facebook og Google og lignende har fått virkelig gode på dette,

327
00:19:27,660 --> 00:19:31,870
men holde et øye ut alle mer for noen nettsteder du besøker som ikke bruker HTTP

328
00:19:31,870 --> 00:19:35,020
og har noen form for sensitiv informasjon på dem,

329
00:19:35,020 --> 00:19:37,490
enten det er økonomisk eller personlig eller lignende.

330
00:19:37,490 --> 00:19:43,180
Hvis de ikke bruker dette, kan ganske muligens cookies som dette være svært lett stjålet

331
00:19:43,180 --> 00:19:46,270
og deretter forfalsket, og det er akkurat hva Firesheep gjorde.

332
00:19:46,270 --> 00:19:48,250
Du trengte ikke å være en programmerer.

333
00:19:48,250 --> 00:19:51,680
Alt du måtte gjøre var har en Internett-forbindelse, laste ned denne gratis verktøy,

334
00:19:51,680 --> 00:19:56,490
og hva det ville gjøre er du logge inn og så det ville vise deg de Facebook navn

335
00:19:56,490 --> 00:20:00,170
av alle i Sanders, i denne spesielle demonstrasjonen, rundt deg

336
00:20:00,170 --> 00:20:03,260
og alt du måtte gjøre var klikke på navnet sitt og programvaren automatisert prosess

337
00:20:03,260 --> 00:20:05,970
av sniffing som cookie, presentere det for Facebook som din egen,

338
00:20:05,970 --> 00:20:07,990
og voila, du logget inn

339
00:20:07,990 --> 00:20:11,190
Så dette er en av de "ikke gjør dette" offisielt.

340
00:20:11,190 --> 00:20:14,660
Hvis du har ditt eget hjemmenettverk og du ønsker å tinker, for all del,

341
00:20:14,660 --> 00:20:17,530
men innser dette gjør krysse linjen på et universitet miljø.

342
00:20:17,530 --> 00:20:20,030
>> Men målet her er virkelig å understreke ikke hvordan du gjør dette

343
00:20:20,030 --> 00:20:22,320
men hvordan å forsvare seg mot slike ting.

344
00:20:22,320 --> 00:20:26,180
Og trivielle løsningen her, selv om det i seg selv er feil,

345
00:20:26,180 --> 00:20:31,360
er å virkelig redusere bruk av nettsteder som ikke bruker HTTPS hele tiden.

346
00:20:31,360 --> 00:20:34,520
Så nettsteder som Facebook og Google har fått stadig avkrysningsbokser

347
00:20:34,520 --> 00:20:36,200
hvor du kan velge denne typen ting,

348
00:20:36,200 --> 00:20:40,000
og bankene har hatt dette i mange år for liknende grunner.

349
00:20:40,000 --> 00:20:43,580
Så bare en liten bit av en frykt faktor hvis vi kan. Men det er det i et nøtteskall.

350
00:20:43,580 --> 00:20:46,420
Det er hvordan en server husker hvem du er.

351
00:20:46,420 --> 00:20:50,760
Og så snart de kan huske hvem du er, kan de huske noe om deg

352
00:20:50,760 --> 00:20:56,140
at programmereren har lagret inne i denne spesielle superglobal kalt $ _SESSION.

353
00:20:56,140 --> 00:20:59,750
Og for pset 7 bruker vi det trivially bare å huske en int,

354
00:20:59,750 --> 00:21:02,260
nemlig den unike ID til brukeren som har logget inn,

355
00:21:02,260 --> 00:21:05,880
slik at vi vet at de har vært der før.

356
00:21:05,880 --> 00:21:12,450
Eventuelle spørsmål da på økter eller informasjonskapsler eller lignende?

357
00:21:12,450 --> 00:21:15,130
Firesheep fungerer ikke så godt lenger,

358
00:21:15,130 --> 00:21:18,310
og du må sette maskinen i en spesiell promiskuøse modus

359
00:21:18,310 --> 00:21:20,700
så du faktisk lytter etter trafikk foruten dere.

360
00:21:20,700 --> 00:21:23,940
Så hvis du laster ned Firesheep, skjønner at det ikke fullt så enkelt

361
00:21:23,940 --> 00:21:26,850
som det en gang var å demonstrere.

362
00:21:26,850 --> 00:21:29,070
OK. Og ikke gjør det i Sanders. Gjøre det hjemme.

363
00:21:29,070 --> 00:21:30,890
Databaser.

364
00:21:30,890 --> 00:21:33,580
En av de tingene vi gjorde i pset 7 meget bevisst

365
00:21:33,580 --> 00:21:37,780
ble vi gi deg et eksemplar database tabell for brukere som har noen bruker-IDer,

366
00:21:37,780 --> 00:21:41,020
noen brukernavn, og noen krypterte passord deri.

367
00:21:41,020 --> 00:21:44,520
Og som du ser, hvis du ikke allerede har gjort, er du nødt til å endre tabellen litt.

368
00:21:44,520 --> 00:21:47,710
Du kommer til å måtte legge til noen cache til hver av brukerne i denne tabellen,

369
00:21:47,710 --> 00:21:51,130
og du er nødt til å legge til en annen historie bord, en porteføljer bord,

370
00:21:51,130 --> 00:21:53,310
eller kanskje kalle det noe annet.

371
00:21:53,310 --> 00:21:56,740
Men i form av å tenke på hvordan du gjør dette, la oss åpne opp dette verktøyet

372
00:21:56,740 --> 00:22:00,570
som vi brukte på fredag, men hvis uvant, kommer maskinen med et verktøy

373
00:22:00,570 --> 00:22:04,680
kalt phpMyAdmin som tilfeldigvis skrevet i PHP,

374
00:22:04,680 --> 00:22:07,950
men dens formål i livet, etter at jeg logger inn her som jharvard med skarlagen,

375
00:22:07,950 --> 00:22:15,160
er å gi meg en brukervennlig måte å vise og endre min database.

376
00:22:15,160 --> 00:22:18,040
>> Databasen som jeg kjører på maskinen kalles MySQL.

377
00:22:18,040 --> 00:22:23,420
Dette er veldig populært, og det er en gratis åpen kildekode-databasen som er fantastisk enkelt å bruke,

378
00:22:23,420 --> 00:22:25,620
spesielt med grensesnittene som dette.

379
00:22:25,620 --> 00:22:29,350
Hva dette verktøyet tillater meg å gjøre, for eksempel, er rote rundt bordene.

380
00:22:29,350 --> 00:22:30,890
La meg gå videre og gjøre dette.

381
00:22:30,890 --> 00:22:36,580
På fredag ​​har vi opprettet en tabell som kalles elever som var super enkelt.

382
00:22:36,580 --> 00:22:41,680
Det hadde 3 kolonner - ID, navn og e-post - og jeg manuelt satt et par rader

383
00:22:41,680 --> 00:22:44,420
som David og Mike i dette eksempelet.

384
00:22:44,420 --> 00:22:47,290
La oss ta dette litt videre, og la oss anta at vi ønsker å huske mer

385
00:22:47,290 --> 00:22:49,660
enn bare navn og e-post om en bruker.

386
00:22:49,660 --> 00:22:53,090
La meg Klikk Struktur opp her på toppen.

387
00:22:53,090 --> 00:22:55,440
Og igjen, går det pset deg gjennom de nødvendige skritt her,

388
00:22:55,440 --> 00:22:58,150
så ikke bekymre deg hvis noe av dette er litt rask.

389
00:22:58,150 --> 00:22:59,690
Så jeg kommer til å klikke på her.

390
00:22:59,690 --> 00:23:02,270
Jeg kommer til å legge til noen flere kolonner etter e-post

391
00:23:02,270 --> 00:23:04,130
fordi jeg ønsker å legge til noe som hus.

392
00:23:04,130 --> 00:23:06,640
Jeg glemte å ta opp en student hus.

393
00:23:06,640 --> 00:23:11,400
La meg klikker Start, og nå har vi denne formen som dessverre er litt bredt fra venstre til høyre,

394
00:23:11,400 --> 00:23:13,710
men jeg kommer til å ringe navnet på dette feltet huset,

395
00:23:13,710 --> 00:23:16,050
og deretter den typen jeg har nå til å velge.

396
00:23:16,050 --> 00:23:18,870
Så la oss ta en kort prat om de ulike typene i MySQL

397
00:23:18,870 --> 00:23:24,590
fordi mens PHP er svakt skrevet og den slags spiller rask og løs med typer,

398
00:23:24,590 --> 00:23:29,430
i en database spesielt det er super viktig å faktisk bruke skrive til din fordel

399
00:23:29,430 --> 00:23:33,260
fordi en av de tingene MySQL og andre databasemotorer kan gjøre for deg

400
00:23:33,260 --> 00:23:37,910
er at du ikke legger falske data inn i databasen.

401
00:23:37,910 --> 00:23:41,850
Dette er liksom fritt feilkontroll tilgjengelig for deg.

402
00:23:41,850 --> 00:23:46,250
>> For huset selvsagt vi ikke ønsker at det skal være en int, som er en 32-bits verdi i MySQL.

403
00:23:46,250 --> 00:23:49,810
Vi snakker kort på fredag ​​om varchar, som står for variabel lengde røye.

404
00:23:49,810 --> 00:23:54,720
Hva er dette? Dette gjør at du kan angi at du vil at dette skal være en streng av noe slag.

405
00:23:54,720 --> 00:23:56,840
Du trenger egentlig ikke vite på forhånd hvor lang tid det er,

406
00:23:56,840 --> 00:24:00,100
så vi vil vilkårlig si et hus navn kan være 255 tegn,

407
00:24:00,100 --> 00:24:04,190
men du kan gå med 32, 64 - en rekke virkelig.

408
00:24:04,190 --> 00:24:10,700
Men fordelen med å bruke en varchar over et felt som heter røye er hva?

409
00:24:10,700 --> 00:24:15,110
Bare intuitivt hvis jeg ruller nedover her, merker det er røye og det er varchar.

410
00:24:15,110 --> 00:24:19,520
Varchar er variabel lengde røye, sjørøye er en fast lengde røye.

411
00:24:19,520 --> 00:24:24,730
Så kun basert på denne definisjonen, er det en fordel eller ulempe av hver av disse?

412
00:24:24,730 --> 00:24:30,490
Med andre ord, hvem bryr seg om skillet, eller hvorfor skulle du bry deg?

413
00:24:31,660 --> 00:24:35,750
>> Ja. [Student] VARCHAR har mer fleksibilitet, men tar opp mer plass i minnet.

414
00:24:35,750 --> 00:24:40,730
Bra. Varchar tar opp mer - La oss se. Jeg er ikke sikker på om jeg hørte det riktig.

415
00:24:40,730 --> 00:24:42,360
Kan du si det en gang til?

416
00:24:42,360 --> 00:24:45,850
[Student] Jeg sa varchar sannsynligvis har mer fleksibilitet, men det tar opp mer plass i minnet.

417
00:24:45,850 --> 00:24:51,170
Interessant. Okay. Varchar trolig gir deg mer fleksibilitet, men tar opp mer plass i minnet.

418
00:24:51,170 --> 00:24:53,220
Sistnevnte er ikke nødvendigvis sant.

419
00:24:53,220 --> 00:24:56,290
Det avhenger av konteksten, men la oss komme tilbake til det.

420
00:24:56,290 --> 00:25:03,230
>> [Uhørlig student respons] Nettopp.

421
00:25:03,230 --> 00:25:06,900
Det er faktisk slik at røye vil vanligvis bruker mer minne

422
00:25:06,900 --> 00:25:10,950
fordi en røye, som i C, er som en streng, er det en rekke tegn.

423
00:25:10,950 --> 00:25:13,690
Så hvis du sier en char felt av lengde 255,

424
00:25:13,690 --> 00:25:16,910
databasen er bokstavelig talt kommer til å gi deg 255 tegn.

425
00:25:16,910 --> 00:25:22,290
Og hvis huset ender opp som Mather og 6 tegn totalt,

426
00:25:22,290 --> 00:25:25,090
du kaster bort over 200 tegn.

427
00:25:25,090 --> 00:25:29,640
>> Så en varchar effektivt bruker bare så mange tegn som er nødvendig

428
00:25:29,640 --> 00:25:31,590
opp til en maksimal mengde.

429
00:25:31,590 --> 00:25:35,470
Men prisen du betaler er faktisk ytelse, potensielt.

430
00:25:35,470 --> 00:25:39,740
Hvis du vet på forhånd at alle dine strenger kommer til å være 8 tegn -

431
00:25:39,740 --> 00:25:43,090
for eksempel anta at du trenger passord av lengde 8 -

432
00:25:43,090 --> 00:25:47,350
oppsiden for å bruke en char felt på anledningen, men ikke ofte,

433
00:25:47,350 --> 00:25:51,100
er å bestemme en fast lengde for noe sånt som en passord

434
00:25:51,100 --> 00:25:53,300
fordi nå databasen kan bli enda smartere.

435
00:25:53,300 --> 00:25:58,160
Om den vet at hver char felt, hver streng i en kolonne med samme lengde,

436
00:25:58,160 --> 00:26:00,780
du får tilbake funksjonen av random access.

437
00:26:00,780 --> 00:26:05,110
Du kan hoppe rundt blant de ulike røye felt i databasen tabellen

438
00:26:05,110 --> 00:26:07,940
fordi tenke på en database som rader og kolonner.

439
00:26:07,940 --> 00:26:11,670
Så hvis hver og en av strengene er like lange,

440
00:26:11,670 --> 00:26:17,820
du vet at den første er på byte 0, er den neste på byte 8

441
00:26:17,820 --> 00:26:20,240
og deretter 16 og deretter 24 og så videre.

442
00:26:20,240 --> 00:26:24,500
Så hvis alle strenger er av samme lengde, kan du hoppe rundt mye mer effektivt.

443
00:26:24,500 --> 00:26:26,710
Så det kan være en fordel med tanke på ytelse,

444
00:26:26,710 --> 00:26:29,420
men vanligvis du ikke har den luksus av å vite på forhånd,

445
00:26:29,420 --> 00:26:32,170
så en varchar er veien å gå.

446
00:26:32,170 --> 00:26:36,030
Her er en annen detalj at selv Facebook kjørte inn til slutt.

447
00:26:36,030 --> 00:26:39,670
Ints er stor, og vi liksom bruke dem som standard hver gang vi ønsker et nummer,

448
00:26:39,670 --> 00:26:41,750
men det er bare 32 bits.

449
00:26:41,750 --> 00:26:46,210
>> Og selv om Facebook ikke har helt 4000000000 brukere nå,

450
00:26:46,210 --> 00:26:48,680
Det er definitivt noen mennesker der ute med flere kontoer

451
00:26:48,680 --> 00:26:50,960
eller kontoer som har blitt åpnet og deretter lukket,

452
00:26:50,960 --> 00:26:55,130
og så Facebook selv jeg tror et par år siden måtte overgangen fra int

453
00:26:55,130 --> 00:27:00,010
til, som er treffende kalt, bigint, som ligger bare 64 bits i stedet.

454
00:27:00,010 --> 00:27:02,230
Så dette er også en design beslutning.

455
00:27:02,230 --> 00:27:06,570
Du ville være utrolig heldig hvis det endelige prosjektet blir oppstart,

456
00:27:06,570 --> 00:27:10,010
har gi 4 milliarder og 1 brukere, eller ta,

457
00:27:10,010 --> 00:27:13,200
I så fall bruker ints kan være litt nærsynt.

458
00:27:13,200 --> 00:27:16,230
Men i virkeligheten er brukerne tabellen nok greit med ints.

459
00:27:16,230 --> 00:27:19,340
Men for noe sånt pset 7, som din historie tabellen,

460
00:27:19,340 --> 00:27:23,700
du kan ha tusenvis, millioner av brukere hvis du utvikle seg til etrade.com.

461
00:27:23,700 --> 00:27:26,020
Så mens du kanskje ikke har mer enn 4 milliard brukere,

462
00:27:26,020 --> 00:27:30,070
disse brukerne du har kan ha mer enn 4 milliarder transaksjoner over tid -

463
00:27:30,070 --> 00:27:33,200
kjøper og selger og ting i deres historie.

464
00:27:33,200 --> 00:27:38,090
Så hvis du gjør forutse - igjen, disse er gode problemer å ha hvis du har så mye data -

465
00:27:38,090 --> 00:27:40,920
hvis du gjør forutse data over størrelsen på en int,

466
00:27:40,920 --> 00:27:47,740
kommer med noe sånt bigint er en retning ikke ofte nok vedtatt av designere

467
00:27:47,740 --> 00:27:49,710
fordi folk figur som ikke kommer til å være et problem,

468
00:27:49,710 --> 00:27:51,930
men det er enkelt å velge noe større enn det.

469
00:27:51,930 --> 00:27:55,380
Desimal vi bruker i 7 pset, som angir faste presisjon

470
00:27:55,380 --> 00:27:59,840
slik at du kan unngå problemer som involverer flyter og dobbeltrom og Reals og lignende.

471
00:27:59,840 --> 00:28:02,440
>> Og så er det noen andre felt her. Vi vil bølge våre hender på dem til en viss grad.

472
00:28:02,440 --> 00:28:07,270
Men datoer, klokkeslett alle har en foreskrevet format i MySQL,

473
00:28:07,270 --> 00:28:10,830
og fordelen av å lagre datoer som datoer og ikke varchars

474
00:28:10,830 --> 00:28:15,730
betyr at databasen kan faktisk formatere dem i forskjellige formater,

475
00:28:15,730 --> 00:28:18,800
om en amerikansk format eller europeisk format eller lignende - men du ønsker det -

476
00:28:18,800 --> 00:28:22,700
mye mer effektivt enn hvis det var bare noen generiske varchar.

477
00:28:22,700 --> 00:28:25,150
Og så er det noen andre binær, VARBINARY, blobs.

478
00:28:25,150 --> 00:28:28,580
Dette er binære store objekter, og du kan også lagre binære data

479
00:28:28,580 --> 00:28:30,750
samt geometriske data i en database.

480
00:28:30,750 --> 00:28:34,350
Men for oss vil vi vanligvis bryr seg om ints og varchars og lignende.

481
00:28:34,350 --> 00:28:36,230
La oss avslutte dette eksemplet med huset.

482
00:28:36,230 --> 00:28:40,030
Huset skal jeg vilkårlig si vil være 255 tegn.

483
00:28:40,030 --> 00:28:42,850
Så standardverdi vi kunne gjøre dette.

484
00:28:42,850 --> 00:28:47,440
Vi kunne som standard satt alle i Mather House, for eksempel.

485
00:28:47,440 --> 00:28:49,710
Det er hvordan vi kan angi at databasen

486
00:28:49,710 --> 00:28:52,460
sørge for at noen alltid har en verdi. Men jeg skal la det være.

487
00:28:52,460 --> 00:28:55,270
Faktisk, for folk som bor utenfor campus, og ikke i et hus,

488
00:28:55,270 --> 00:28:59,590
kanskje jeg faktisk ønsker å presisere at standardverdien for huset er NULL,

489
00:28:59,590 --> 00:29:04,890
og da trenger jeg å sjekke denne boksen og fortelle databasen det er greit hvis brukerens huset er NULL.

490
00:29:04,890 --> 00:29:07,270
>> Igjen, dette er en annen forsvarsmekanisme du kan sette på plass

491
00:29:07,270 --> 00:29:10,590
så du trenger ikke engang å sette den i PHP-koden nødvendigvis.

492
00:29:10,590 --> 00:29:14,630
Databasen vil sikre at ting er eller ikke er NULL.

493
00:29:14,630 --> 00:29:17,310
Og så til slutt, attributter.

494
00:29:17,310 --> 00:29:18,920
Ingen av disse er virkelig relevant.

495
00:29:18,920 --> 00:29:22,880
Binary, usignert - ingen av disse er relevante for en varchar.

496
00:29:22,880 --> 00:29:24,220
Indeks.

497
00:29:24,220 --> 00:29:27,320
Vet noen eller huske eller har en gjette på hva en indeks er

498
00:29:27,320 --> 00:29:29,510
for noe som huset?

499
00:29:29,510 --> 00:29:35,240
Dette er også faktisk en viktig og relativt enkel design beslutning.

500
00:29:35,240 --> 00:29:39,200
For de som ennå ikke har sett det, på fredag ​​snakket vi kort om primærnøkler.

501
00:29:39,200 --> 00:29:43,240
I en database tabell, er en primærnøkkel feltet eller kolonnen

502
00:29:43,240 --> 00:29:46,270
som identifiserer entydig rader i tabellen.

503
00:29:46,270 --> 00:29:49,150
Så i den gjeldende tabellen har vi IDer, har vi navn og e-poster.

504
00:29:49,150 --> 00:29:52,050
Hvilken av disse er den beste kandidaten til å være en primærnøkkel,

505
00:29:52,050 --> 00:29:55,810
hvis rolle er å identifisere rader?

506
00:29:55,810 --> 00:29:57,530
Sannsynligvis ID.

507
00:29:57,530 --> 00:29:59,930
Uten tvil, kan vi også bruke det selv?

508
00:29:59,930 --> 00:30:02,860
Kanskje du kan bruke e-post fordi i teorien er det unike

509
00:30:02,860 --> 00:30:05,380
med mindre folk deler e-postkontoer.

510
00:30:05,380 --> 00:30:09,980
Men realiteten er at hvis du bruker en numerisk ID som 1234,

511
00:30:09,980 --> 00:30:14,170
det er bare 32 bits, mens en e-postadresse kan være så mange byte eller så mange byte.

512
00:30:14,170 --> 00:30:16,610
Så i form av effektivitet for unike identifikatorer,

513
00:30:16,610 --> 00:30:19,270
det pleier å være god praksis bare å bruke en int

514
00:30:19,270 --> 00:30:23,090
selv om du har noen streng kandidat som du kan kanskje bruke.

515
00:30:23,090 --> 00:30:26,760
>> For noe sånt hus, bør dette ikke være en primærnøkkel

516
00:30:26,760 --> 00:30:30,770
fordi da bare en person kunne leve i Mather og en person i Currier og lignende.

517
00:30:30,770 --> 00:30:32,790
Likeledes bør dette ikke være unik.

518
00:30:32,790 --> 00:30:37,830
Forskjellen mellom primær og unikt er at i tilfelle av vårt gjeldende tabell,

519
00:30:37,830 --> 00:30:42,620
ID ville være primær, men e-post er ikke primært for årsaken til at vi nettopp nevnte -

520
00:30:42,620 --> 00:30:44,740
ytelse - men det bør likevel være unikt.

521
00:30:44,740 --> 00:30:47,200
Så du kan fortsatt håndheve unikhet uten å gjøre kravet

522
00:30:47,200 --> 00:30:49,520
at det er en super viktig primære feltet.

523
00:30:49,520 --> 00:30:52,610
Men dette er ganske nyttig: Index.

524
00:30:52,610 --> 00:30:56,180
Hvis du vet på forhånd for det endelige prosjektet, for pset 7, eller generelt,

525
00:30:56,180 --> 00:30:59,480
at dette feltet huset kommer til å være noe du søke på mye

526
00:30:59,480 --> 00:31:01,910
bruker velger søkeord eller noe annet,

527
00:31:01,910 --> 00:31:05,180
så kan du preemptively fortelle databasen til å arbeide sin magi

528
00:31:05,180 --> 00:31:10,510
og sørg for at det skaper i minnet noen fancy datastrukturer nødvendig

529
00:31:10,510 --> 00:31:13,770
å ekspedere søk basert på huset.

530
00:31:13,770 --> 00:31:17,860
Kanskje vil den bruke en hash table, kanskje det vil bruke en lenket liste.

531
00:31:17,860 --> 00:31:21,260
I virkeligheten, det har en tendens til å bruke et tre, kalles ofte en struktur en B-tree -

532
00:31:21,260 --> 00:31:24,090
ikke et binært tre, men et B-treet - som er et svært bredt treet

533
00:31:24,090 --> 00:31:27,370
som du kan se i en klasse som CS124, data strukturer klassen.

534
00:31:27,370 --> 00:31:31,800
Men kort sagt, trenger du ikke å bekymre deg for at når du bruker smart database programvare.

535
00:31:31,800 --> 00:31:35,890
Du kan bare fortelle det, "Indeks dette feltet slik at jeg kan søke på det mer effektivt."

536
00:31:35,890 --> 00:31:40,250
>> Hvis du lar dette seg og du prøver å søke etter alle i databasen som bor i Mather,

537
00:31:40,250 --> 00:31:42,710
det tilfaller til lineær søk.

538
00:31:42,710 --> 00:31:45,360
Og hvis du har 6000 undergrads alle som bor i noen hus,

539
00:31:45,360 --> 00:31:47,900
du kommer til å søke i hele tabellen for å finne Matherites,

540
00:31:47,900 --> 00:31:52,190
mens hvis du sier Index, forhåpentligvis vil det være noe nær en logaritmisk søk

541
00:31:52,190 --> 00:31:54,510
å finne slike studenter.

542
00:31:54,510 --> 00:31:56,750
Dette er bare en gratis funksjon for å slå på,

543
00:31:56,750 --> 00:31:59,530
selv om det kommer til en pris på en viss mengde plass.

544
00:31:59,530 --> 00:32:02,690
Til slutt, auto-tilvekst, dette AI-feltet,

545
00:32:02,690 --> 00:32:05,830
noe som betyr at bare hvis det er en int og du ikke ønsker å bry seg å øke det selv

546
00:32:05,830 --> 00:32:07,570
hver gang det er en ny bruker, sjekk at

547
00:32:07,570 --> 00:32:11,910
og hver bruker som blir satt inn vil automatisk få en ny ID.

548
00:32:11,910 --> 00:32:15,620
La oss klikke Lagre, og la oss nå finne feil med dette motivet.

549
00:32:15,620 --> 00:32:20,200
Hvis jeg går inn i Browse, legg merke til at både Mike og mitt hus er NULL.

550
00:32:20,200 --> 00:32:22,420
Jeg kan bruke phpMyAdmin til å redigere denne manuelt.

551
00:32:22,420 --> 00:32:25,110
Jeg kan gå inn her og skriv inn Mather og trykk Enter,

552
00:32:25,110 --> 00:32:27,740
og nå merke tabellen er forskjellig.

553
00:32:27,740 --> 00:32:29,270
Men merker jeg kunne gjøre noe annet også.

554
00:32:29,270 --> 00:32:33,530
Davids ID er 1, så phpMyAdmin igjen er bare et administrativt verktøy;

555
00:32:33,530 --> 00:32:35,970
dette er ikke noe brukerne noensinne kommer til å se.

556
00:32:35,970 --> 00:32:38,810
Så hvis jeg i stedet klikke SQL-kategorien opp toppen -

557
00:32:38,810 --> 00:32:41,450
og igjen, vil pset 7 introdusere deg til flere av disse søkene -

558
00:32:41,450 --> 00:32:45,260
Jeg kan manuelt utføre SQL Structured Query Language kommandoen

559
00:32:45,260 --> 00:32:56,410
UPDATE brukere SET hus = 'Pfoho' WHERE id = 1.

560
00:32:56,410 --> 00:33:00,830
Disse SQL-spørringer er, pent nok, ganske lesbar fra venstre til høyre.

561
00:33:00,830 --> 00:33:04,350
Oppdater brukere tabellen, sette feltet som heter huset til Pfoho

562
00:33:04,350 --> 00:33:06,830
der brukerens ID er 1.

563
00:33:06,830 --> 00:33:11,480
Eller jeg kan selv gjøre der email = 'malan@harvard.edu'.

564
00:33:11,480 --> 00:33:14,860
Så lenge som identifiserer meg, ville det fungerer like godt.

565
00:33:14,860 --> 00:33:18,810
Men ID tendens til å være høyere ytelse, så la oss gjøre det.

566
00:33:18,810 --> 00:33:22,950
La oss klikke Start. Ok, ikke lecture.users ikke eksisterer. Hva er min feil?

567
00:33:22,950 --> 00:33:26,220
Hva er tabellen faktisk kalt her?

568
00:33:26,220 --> 00:33:28,770
Det kalles studenter bare fordi det er hva vi gjorde her oppe øverst til venstre.

569
00:33:28,770 --> 00:33:31,860
Det kalles studenter, ikke brukere. Så klikker Gå nå.

570
00:33:31,860 --> 00:33:34,330
1 rad påvirket. Query tok 0,01 sekunder.

571
00:33:34,330 --> 00:33:38,010
Hvis jeg klikker Bla nå, nå Malan liv i Pfoho.

572
00:33:38,010 --> 00:33:42,070
Så det er en annen smak av SQL, men pset vil gå gjennom en litt mer av det.

573
00:33:42,070 --> 00:33:44,710
>> Det er en dum avgjørelse jeg har allerede gjort her.

574
00:33:44,710 --> 00:33:47,820
Jeg vil hevde at denne databasen design er ineffektiv

575
00:33:47,820 --> 00:33:51,650
fordi flere folk jeg legger til studenter tabellen,

576
00:33:51,650 --> 00:33:54,730
det flere av oss begynner jeg å legge til, jo mer av TFS jeg begynner å legge til,

577
00:33:54,730 --> 00:33:58,320
vi kommer til å begynne å se hva oppsigelser i denne tabellen?

578
00:34:00,840 --> 00:34:06,020
>> Ja. [Student] Ser at det er i studenter, bruker vi den samme [hørbar]

579
00:34:06,020 --> 00:34:07,360
Det samme - Høyre, akkurat.

580
00:34:07,360 --> 00:34:10,400
Så hvis 400 mennesker bor i Mather, gi eller ta,

581
00:34:10,400 --> 00:34:15,000
slutt denne tabellen kommer til å ha 400 rader som sier "Mather," "Mather,"

582
00:34:15,000 --> 00:34:16,590
"Mather," "Mather," "Mather."

583
00:34:16,590 --> 00:34:19,820
Vi kaster bort alle disse byte, og det er et par takeaways der.

584
00:34:19,820 --> 00:34:23,080
1, er det den gale hjørnet tilfelle der hvis noen betaler en masse penger

585
00:34:23,080 --> 00:34:25,949
og endrer navn Mather, har vi nå nødt til å endre hele vår database tabellen.

586
00:34:25,949 --> 00:34:29,730
Som ikke kommer til å skje ofte, men Pfoho ble en gang kalt North House 15 år siden,

587
00:34:29,730 --> 00:34:32,310
så skjer det. Men det er ikke alle som overbevisende.

588
00:34:32,310 --> 00:34:36,000
Mer overbevisende enn et hjørne sak som det av som ønsker å oppdatere data i bulk

589
00:34:36,000 --> 00:34:41,150
for en database hvorfor er du lagre MATHER igjen og igjen og igjen og igjen?

590
00:34:41,150 --> 00:34:43,020
Det er mye tegn, 6 tegn.

591
00:34:43,020 --> 00:34:45,500
Kan ikke vi gjøre det enda bedre enn det, spesielt for Pforzheimer?

592
00:34:45,500 --> 00:34:48,320
Sikkert vi kan gjøre bedre enn at mange tegn.

593
00:34:48,320 --> 00:34:51,790
Hvorfor ikke bare knytte en unik identifikator med hvert hus

594
00:34:51,790 --> 00:34:55,020
og butikk som for hver bruker? Så la oss prøve dette.

595
00:34:55,020 --> 00:35:00,610
Snarere enn å bare bruke studenter tabellen, la meg gå opp til min forelesning database opp her øverst til venstre.

596
00:35:00,610 --> 00:35:02,600
Legge merke til her står det Lag tabell.

597
00:35:02,600 --> 00:35:04,550
La meg lage en ny tabell kalt hus.

598
00:35:04,550 --> 00:35:08,880
Antall kolonner skal være 2. Enter.

599
00:35:08,880 --> 00:35:11,200
Nå har jeg to felt.

600
00:35:11,200 --> 00:35:14,600
Jeg kommer til å kalle dette navnet, og det kommer til å bli en varchar av lengde 255,

601
00:35:14,600 --> 00:35:18,770
>> men det er ganske vilkårlig. La meg sette dette her nede ved konvensjonen.

602
00:35:18,770 --> 00:35:22,840
Så sette en ID her oppe. La oss gi hvert hus en unik identifikator.

603
00:35:22,840 --> 00:35:25,360
La oss gi hvert hus et navn.

604
00:35:25,360 --> 00:35:30,980
La oss presisere at identifikatoren skal være usignert bare ved konvensjonen å bare bruke positive tall.

605
00:35:30,980 --> 00:35:35,020
La oss gå videre og gi dette en auto-økning feltet for nå.

606
00:35:35,020 --> 00:35:38,160
Og trenger vi noe annet?

607
00:35:38,160 --> 00:35:41,010
La oss gå videre og klikk på Lagre.

608
00:35:41,010 --> 00:35:42,480
Nå har jeg en ny tabell.

609
00:35:42,480 --> 00:35:45,860
Legg merke som en side er dette litt kryptisk SQL kommando

610
00:35:45,860 --> 00:35:50,280
at du ville ha hatt å skrive inn manuelt hvis du ikke bruker et administrativt verktøy som phpMyAdmin.

611
00:35:50,280 --> 00:35:51,990
Så en annen grunn til at vi bruker den.

612
00:35:51,990 --> 00:35:55,480
Det er fantastisk nyttig slags pedagogisk fordi du kan klikke rundt

613
00:35:55,480 --> 00:36:01,050
og finne ut hvordan ting fungerer ved å bare kopiere og lime hva phpMyAdmin gjorde.

614
00:36:01,050 --> 00:36:04,150
Men Opprett tabellen kommandoen er det nettopp ble henrettet, og her er mitt bord.

615
00:36:04,150 --> 00:36:11,370
La meg gå videre nå og bruke rå SQL stedet oversimplify ved å klikke kategorien Sett inn.

616
00:36:11,370 --> 00:36:15,040
La meg gjøre INSERT INTO hus,

617
00:36:15,040 --> 00:36:22,230
og jeg kommer til å si navnet på huset kommer til å ha en verdi av 'Mather'.

618
00:36:22,230 --> 00:36:24,790
Det var det. Denne syntaksen er litt mer kryptisk.

619
00:36:24,790 --> 00:36:26,660
Dette er navnet på de feltene vi ønsker å sette inn.

620
00:36:26,660 --> 00:36:30,390
Dette er de verdiene vi ønsker å sette inn i disse feltene. La meg deretter Go.

621
00:36:30,390 --> 00:36:34,410
1 rad satt tok 0,02 sekunder. La meg klikker Bla nå.

622
00:36:34,410 --> 00:36:42,020
>> Legg merke til om jeg klikker Bla gjennom, er det Mather, som ID er ved automatisering nummer 1.

623
00:36:42,020 --> 00:36:45,000
La meg gjøre en annen. La meg gå inn i SQL-kategorien.

624
00:36:45,000 --> 00:36:52,950
INSERT INTO hus. Navnet på huset kommer til å ha en verdi på Pfoho og så videre.

625
00:36:52,950 --> 00:36:56,350
Go. Og jeg kan fortsette å gjøre dette igjen og igjen og igjen.

626
00:36:56,350 --> 00:36:59,470
Eller hvis du blir lei med phpMyAdmin, kan du bare bruke kategorien Sett

627
00:36:59,470 --> 00:37:01,000
og ikke trenger å skrive den rå SQL.

628
00:37:01,000 --> 00:37:04,690
Du kan bare banke den ut raskere ved å skrive, for eksempel, Currier, Enter,

629
00:37:04,690 --> 00:37:07,610
og nå om vi klikker Bla gjennom, er det Currier med en ID på 3.

630
00:37:07,610 --> 00:37:09,920
Så dette er hva vi mener med auto-økning.

631
00:37:09,920 --> 00:37:12,280
Men nå må vi fikse noe i studenter.

632
00:37:12,280 --> 00:37:16,240
I elevene hva bør datatypen av huset feltet nå?

633
00:37:16,240 --> 00:37:19,450
Det bør være en int, ikke sant?

634
00:37:19,450 --> 00:37:23,950
Så målet her er å faktor ut, ellers kjent som normalisere, tabellene

635
00:37:23,950 --> 00:37:27,940
slik at vi ikke lagrer informasjon redundant i noen av mine tabeller.

636
00:37:27,940 --> 00:37:31,130
Og igjen, den veien vi var på her kommer til å si Mather, Mather,

637
00:37:31,130 --> 00:37:34,220
Mather, Mather, Pfoho, Pfoho, Pfoho, Pfoho, som er svært overflødig

638
00:37:34,220 --> 00:37:36,240
i form av wastefulness av tegn.

639
00:37:36,240 --> 00:37:40,820
Så la meg gå videre og endre dette ved å klikke struktur,

640
00:37:40,820 --> 00:37:44,620
og la meg gå videre og sjekke ut huset feltet, klikker du Endre,

641
00:37:44,620 --> 00:37:46,990
og nå skal jeg endre dette for å være en int.

642
00:37:46,990 --> 00:37:49,490
255 er ikke lenger relevant.

643
00:37:49,490 --> 00:37:54,010
La meg gå videre og si det er greit hvis det er fortsatt NULL. Lagre.

644
00:37:54,010 --> 00:37:55,870
Nå tabellen studenter har blitt endret vellykket,

645
00:37:55,870 --> 00:37:59,090
og legge merke igjen huset er en int.

646
00:37:59,090 --> 00:38:02,220
Som en side, ignorere Tallet i parentes når det kommer til ints.

647
00:38:02,220 --> 00:38:03,770
>> Dette er for eldre grunner.

648
00:38:03,770 --> 00:38:06,920
Tilbake i dag når du ikke har GUI, du i stedet hadde en kommandolinje miljø,

649
00:38:06,920 --> 00:38:11,580
de 10 og 11 henholdsvis spesifisert hvor mange tegn du bør vise

650
00:38:11,580 --> 00:38:13,950
i terminalvinduet å faktisk vise felt.

651
00:38:13,950 --> 00:38:19,150
Det har ingenting å gjøre med litt lengde av selve feltet, så vi får bare ignorere det for nå.

652
00:38:19,150 --> 00:38:20,990
Nå må jeg gå inn i dette bordet.

653
00:38:20,990 --> 00:38:24,610
Og hvis David bor i Mather, bør huset ikke være 0,

654
00:38:24,610 --> 00:38:27,350
som er en standard int verdi nærmest NULL.

655
00:38:27,350 --> 00:38:29,810
Han skal leve i huset en.

656
00:38:29,810 --> 00:38:36,870
La oss vilkårlig si at Mike bor i Pfoho, så husnummer 2.

657
00:38:36,870 --> 00:38:40,160
Nå mitt bord ser litt mer kryptisk.

658
00:38:40,160 --> 00:38:41,960
Men vurdere effektiviteten.

659
00:38:41,960 --> 00:38:44,860
Jeg bruker nå bare 32 bits for å identifisere huset,

660
00:38:44,860 --> 00:38:49,530
noe som betyr at det er bare 1 kanoniske definisjonen av huset mitt Mather og Pfoho

661
00:38:49,530 --> 00:38:52,090
og det er i hus tabellen.

662
00:38:52,090 --> 00:38:55,880
Så hvis jeg vil nå vende disse tabellene, tenk på det på denne måten.

663
00:38:55,880 --> 00:39:01,980
Her har jeg mine studenter bord, og på høyre side er det disse tallene, 1 og 2.

664
00:39:01,980 --> 00:39:04,180
1 er Mather, er to Pfoho.

665
00:39:04,180 --> 00:39:08,580
Vi har de samme tallene i denne andre tabellen, som kalles hus,

666
00:39:08,580 --> 00:39:11,020
1 og 2 og 3 for de tre hus.

667
00:39:11,020 --> 00:39:14,990
Det vi nå ønsker å gjøre er å ha evnen i koden, PHP og SQL,

668
00:39:14,990 --> 00:39:18,800
å sortere av vende disse tabellene, der hvis disse er studenter og disse er husene,

669
00:39:18,800 --> 00:39:22,050
vi ønsker å liksom kombinere dem slik at en linje med 1,

670
00:39:22,050 --> 00:39:25,670
2 linjer opp med to, og slik at vi kan finne ut hvor David

671
00:39:25,670 --> 00:39:28,000
og hvor Mike og hvor alle andre bor.

672
00:39:28,000 --> 00:39:31,850
For å gjøre dette kan vi utføre en SQL-spørring som følgende.

673
00:39:31,850 --> 00:39:40,470
SELECT * FROM studenter BLI hus ON -

674
00:39:40,470 --> 00:39:43,000
Og nå hvilke felt vi ønsker å delta på?

675
00:39:43,000 --> 00:39:49,520
Så students.house = houses.id.

676
00:39:49,520 --> 00:39:54,150
>> Litt kryptisk, men denne delen betyr bokstavelig opprette en ny midlertidig tabell

677
00:39:54,150 --> 00:39:56,690
det er resultatet av å bli studenter og hus.

678
00:39:56,690 --> 00:40:00,340
Og hvordan vil du kombinere tips av fingrene her?

679
00:40:00,340 --> 00:40:05,280
Still studentenes hus feltet lik husene 'ID-feltet.

680
00:40:05,280 --> 00:40:10,220
Og hvis jeg nå klikker Start, får jeg tilbake akkurat det jeg håpet på.

681
00:40:10,220 --> 00:40:15,890
David er i Mather, er Mike i Pfoho, og jeg ser også de unike identifikatorer.

682
00:40:15,890 --> 00:40:18,640
Men poenget er nå har jeg en komplett tabell.

683
00:40:18,640 --> 00:40:23,020
Og så takeaway her for pset 7 eller egentlig for det endelige prosjektet:

684
00:40:23,020 --> 00:40:25,830
Hvis du finner ut at du lagrer alt av informasjon redundant,

685
00:40:25,830 --> 00:40:28,850
enten det er et hus, kanskje det er en by, stat og ZIP

686
00:40:28,850 --> 00:40:32,050
hvor ZIP kan vanligvis, men ikke alltid brukes som en unik identifikator,

687
00:40:32,050 --> 00:40:35,810
går gjennom øvelsen mentalt og deretter med noe sånt som phpMyAdmin

688
00:40:35,810 --> 00:40:40,660
av factoring ut at felles data fordi spesielt som ditt nettsted får mer godt brukt

689
00:40:40,660 --> 00:40:45,440
og mer populært, dette er hvordan du sørger for at alt er super rask,

690
00:40:45,440 --> 00:40:51,930
ved å gi databasen så mange hint til unikhet som mulig.

691
00:40:51,930 --> 00:40:53,860
Det var mye.

692
00:40:53,860 --> 00:40:59,010
Eventuelle spørsmål? OK. La oss ta en 5-minutters pause der og omgruppere.

693
00:41:01,600 --> 00:41:03,540
OK.

694
00:41:03,540 --> 00:41:08,680
Det følgende er et eksempel som ble brukt for noen år siden da jeg tok CS161,

695
00:41:08,680 --> 00:41:10,960
som er den operativsystemer klasse på college

696
00:41:10,960 --> 00:41:15,160
som er kjent for å være fantastisk, men en gal mengde arbeid,

697
00:41:15,160 --> 00:41:19,810
og den fokuserer veldig på noen av de lavnivå problemer som oppstår i operativsystemer

698
00:41:19,810 --> 00:41:22,700
og også selv i en verden av databaser.

699
00:41:22,700 --> 00:41:27,040
>> Historien som ble fortalt av min professor, Margo Seltzer, det året var som følger.

700
00:41:27,040 --> 00:41:30,990
Anta at du har en liten dorm kjøleskap for deg og din samboer

701
00:41:30,990 --> 00:41:34,030
og dere begge virkelig liker melk.

702
00:41:34,030 --> 00:41:36,360
Så du kommer hjem fra klassen en dag, er romkameraten din ikke der,

703
00:41:36,360 --> 00:41:39,650
du åpner kjøleskapet, og du skjønner, "Oh damn, vi er ute av melk."

704
00:41:39,650 --> 00:41:42,070
Så du lukker kjøleskapet, du gå over gaten til CVS

705
00:41:42,070 --> 00:41:45,830
og få i stadig lange køer for å kjøpe melk på CVS.

706
00:41:45,830 --> 00:41:48,470
I mellomtiden kommer romkameraten din hjem fra hans eller hennes klasse,

707
00:41:48,470 --> 00:41:51,690
kommer inn i rommet, åpner kjøleskapet virkelig ønsker litt melk,

708
00:41:51,690 --> 00:41:54,130
åpner kjøleskapet og "Damn, ingen melk."

709
00:41:54,130 --> 00:41:57,890
Slik at han eller hun lukker kjøleskapet, går ut døren, og går til Abp

710
00:41:57,890 --> 00:42:00,910
eller et annet sted enn CVS der du ikke kommer til å støte på hverandre

711
00:42:00,910 --> 00:42:02,790
å gå få litt melk.

712
00:42:02,790 --> 00:42:04,820
Selvfølgelig noen minutter senere, begge kommer hjem

713
00:42:04,820 --> 00:42:07,740
og nå har du dobbelt så mye melk som du faktisk ønsket.

714
00:42:07,740 --> 00:42:10,670
Og å være melk, nå det kommer til å gå dårlig fordi du liker melk

715
00:42:10,670 --> 00:42:14,200
men du ikke liker melk, så nå har du for mye melk, så det kommer til å surne.

716
00:42:14,200 --> 00:42:16,830
Dette er en forferdelig, forferdelig situasjon.

717
00:42:16,830 --> 00:42:22,920
Hva kunne ha løst denne situasjon hvis du var den første romkamerat hjemme? Ja.

718
00:42:22,920 --> 00:42:25,970
[Student] Du bør ha forlatt et notat. [Latter]

719
00:42:25,970 --> 00:42:28,090
Bra. Du bør ha forlatt et notat.

720
00:42:28,090 --> 00:42:32,320
Du bør ha satt en Post-it lapp eller som å si, "Gone for melk,"

721
00:42:32,320 --> 00:42:36,830
og deretter din romkamerat konseptuelt ville ha blitt låst ute av faktisk gjøre det.

722
00:42:36,830 --> 00:42:38,010
Eller du kan gå en skritt videre.

723
00:42:38,010 --> 00:42:41,060
Du kan bokstavelig talt låse kjøleskapet med en slags hengelås,

724
00:42:41,060 --> 00:42:44,870
og nå romkameraten din vil bokstavelig talt bli låst ut av kjøleskapet.

725
00:42:44,870 --> 00:42:48,520
Hvis vi generalisere tilbake til programmering,

726
00:42:48,520 --> 00:42:51,610
du kan nesten tenke på kjøleskapet som en slags variabel eller en struct,

727
00:42:51,610 --> 00:42:53,500
en slags beholder for informasjon.

728
00:42:53,500 --> 00:42:58,290
Problemet fundamentalt her er at dere begge fikk lov til å inspisere

729
00:42:58,290 --> 00:43:02,370
eller lese tilstanden til dette datastruktur,

730
00:43:02,370 --> 00:43:08,050
men du så den til forskjellige tider og ennå begge har gjort en beslutning

731
00:43:08,050 --> 00:43:11,920
basert på tilstanden i verden på de forskjellige øyeblikk i tid.

732
00:43:11,920 --> 00:43:15,570
Så hadde du låst kjøleskapet, ville du ha minst unngått romkameraten din

733
00:43:15,570 --> 00:43:19,070
fra å ha vært i stand til å inspisere tilstanden i verden,

734
00:43:19,070 --> 00:43:22,530
slik at han eller hun ikke kunne ha gjort det samme vedtaket.

735
00:43:22,530 --> 00:43:25,780
Så databaser, som det viser seg, har dette problemet hele tiden.

736
00:43:25,780 --> 00:43:31,050
>> La oss se om vi kan konstruere et scenario.

737
00:43:31,050 --> 00:43:34,310
Anta at du er liksom en dårlig fyr og du går til Bank of America

738
00:43:34,310 --> 00:43:37,950
eller en av de andre steder i plassen som har et par minibanker side ved side,

739
00:43:37,950 --> 00:43:41,200
og noe du har funnet ut hvordan du kan kopiere en minibank kort - ikke så vanskelig.

740
00:43:41,200 --> 00:43:42,730
Det er bare en magnetstripe.

741
00:43:42,730 --> 00:43:45,180
Og så hva du ønsker å prøve å gjøre er å spille dette spillet

742
00:43:45,180 --> 00:43:49,060
hvor du setter en kort inn en maskin, et annet kort i den andre maskinen,

743
00:43:49,060 --> 00:43:51,980
og du egentlig ønsker å prøve å ta ut penger samtidig,

744
00:43:51,980 --> 00:43:54,930
fordi forestille seg at historien går som følger.

745
00:43:54,930 --> 00:43:57,350
Maskinen til venstre tar kortet og PIN-koden,

746
00:43:57,350 --> 00:44:00,240
og du sier: "Gi meg 100 kr."

747
00:44:00,240 --> 00:44:04,790
ATM er programmert til først gjøre en utvalgt på sin database eller tilsvarende -

748
00:44:04,790 --> 00:44:10,780
uansett database den bruker - for å se har denne brukeren minst $ 100 i hans eller hennes konto?

749
00:44:10,780 --> 00:44:16,180
Hvis ja, så spytte ut $ 100 og trekke $ 100 fra sin balanse.

750
00:44:16,180 --> 00:44:20,470
Men selvfølgelig hvis det er flere maskiner her eller flere måter å inspisere

751
00:44:20,470 --> 00:44:23,560
staten som verden, bankhvelv, for å se hvor mye penger du har,

752
00:44:23,560 --> 00:44:26,780
anta at bare ved en tilfeldighet maskinen på venstre og høyre

753
00:44:26,780 --> 00:44:30,140
både ber om at spørsmålet på omtrent samme tidspunkt.

754
00:44:30,140 --> 00:44:34,160
>> Og dette kan sikkert skje. Minibanker er datamaskiner i disse dager.

755
00:44:34,160 --> 00:44:37,670
Så hvis maskinen til venstre sier, "Ja, du har minst $ 100,"

756
00:44:37,670 --> 00:44:42,150
mellomtiden maskinen på høyre sier: "Ja, du har minst $ 100,"

757
00:44:42,150 --> 00:44:47,420
da begge med å avslutte sine programmer og faktisk spytte ut $ 100

758
00:44:47,420 --> 00:44:50,820
og si: "Tidligere du hadde 200 dollar."

759
00:44:50,820 --> 00:44:54,890
"La meg oppdatere variabelen til nå være $ 100 igjen på kontoen."

760
00:44:54,890 --> 00:44:58,780
Men hvis begge har sjekket saldoen og funnet ut at det er $ 200

761
00:44:58,780 --> 00:45:02,000
og begge så gjøre regnestykket og si 200-100,

762
00:45:02,000 --> 00:45:06,990
maskinene har potensielt spytte ut to $ 100 regninger i hver maskin,

763
00:45:06,990 --> 00:45:11,360
men de har bare oppdatert sum saldo å være 100 kr.

764
00:45:11,360 --> 00:45:15,130
Med andre ord, har du tatt ut $ 200, men fordi de inspiserte tilstanden i verden

765
00:45:15,130 --> 00:45:18,840
samtidig og deretter gjort en beslutning basert på denne verdien,

766
00:45:18,840 --> 00:45:21,930
de kan ikke gjøre regnestykket til slutt riktig.

767
00:45:21,930 --> 00:45:25,520
Så i en bank situasjonen også du virkelig ønsker å ha noen form for lockout

768
00:45:25,520 --> 00:45:28,450
slik at så snart du har sjekket tilstanden noen variable

769
00:45:28,450 --> 00:45:31,220
det er veldig viktig, som saldoen,

770
00:45:31,220 --> 00:45:36,070
ikke la noen andre ta avgjørelser basert på det før du er ferdig gjør din greie,

771
00:45:36,070 --> 00:45:38,920
hvor i dette tilfellet er du ATM på venstre side.

772
00:45:38,920 --> 00:45:41,160
Låse alle andre ut.

773
00:45:41,160 --> 00:45:44,650
Du kan faktisk oppnå denne effekten i et par forskjellige måter.

774
00:45:44,650 --> 00:45:48,660
>> Den enkleste måten MySQL er en linje av SQL som vi ga deg

775
00:45:48,660 --> 00:45:52,030
i oppgavesettet spesifikasjonen som ser akkurat slik ut.

776
00:45:52,030 --> 00:45:57,420
Sett inn i tabellen - hva det heter - en id, et symbol, og en aksje, et antall aksjer,

777
00:45:57,420 --> 00:45:59,660
følgende verdier, for eksempel.

778
00:45:59,660 --> 00:46:03,370
Hvis du ikke har lest spec ennå, er dette et eksempel som involverer hvordan du går om

779
00:46:03,370 --> 00:46:07,340
kjøpe 10 aksjer i denne penny stock for president Skroob,

780
00:46:07,340 --> 00:46:10,340
hvis bruker-ID skjer for å være nummer 7?

781
00:46:10,340 --> 00:46:14,070
Dette sier INSERT INTO tabellen følgende id, symbol, og antall aksjer

782
00:46:14,070 --> 00:46:18,200
av 7, 'DVN.V' og 10.

783
00:46:18,200 --> 00:46:21,510
Men - men, men, men - den andre linjen er viktig.

784
00:46:21,510 --> 00:46:26,310
PÅ duplikatnøkkel UPDATE aksjer = aksjer + VALUES (aksjer).

785
00:46:26,310 --> 00:46:28,350
Så helt kryptisk-ser ved første øyekast.

786
00:46:28,350 --> 00:46:31,990
Men det faktum at denne SQL-spørringen, selv om det brytes ned to linjer,

787
00:46:31,990 --> 00:46:35,920
er en lang søk, betyr det at det er atomic

788
00:46:35,920 --> 00:46:41,000
i den forstand at denne spørringen vil enten bli utført alle sammen eller ikke i det hele tatt.

789
00:46:41,000 --> 00:46:45,100
Og per definisjon av MySQL, det er hvordan de implementeres dette søket.

790
00:46:45,100 --> 00:46:51,010
Det er ved definisjon i håndboken garantert å utføre på en gang eller ikke i det hele tatt.

791
00:46:51,010 --> 00:46:54,020
Motivasjonen for dette er som følger.

792
00:46:54,020 --> 00:46:58,540
Hvis det i dette tilfellet er det du prøver å kjøpe 10 aksjer på lager,

793
00:46:58,540 --> 00:47:02,260
det er slags av den samme historien som melk, det er slags av den samme historien som ATM.

794
00:47:02,260 --> 00:47:04,970
>> Hvis du gjør den feilen å ikke bruke denne syntaksen

795
00:47:04,970 --> 00:47:09,610
men i stedet velge fra databasen for å se hvor mange aksjer i dette penny stock

796
00:47:09,610 --> 00:47:13,750
har president Skroob, og antar at han har 10 aksjer,

797
00:47:13,750 --> 00:47:19,330
og deretter noen brøkdels sekund senere så gjør en UPDATE-setning,

798
00:47:19,330 --> 00:47:24,810
som er en annen uttalelse i SQL som sier gå videre og legge til 10 flere aksjer

799
00:47:24,810 --> 00:47:28,700
sin nåværende 10 slik at ideelt totalt er 20,

800
00:47:28,700 --> 00:47:33,490
problemet er at i dagens databasesystemer og fordi dagens datamaskiner

801
00:47:33,490 --> 00:47:35,990
du har flere prosessorer, flere kjerner -

802
00:47:35,990 --> 00:47:38,920
med andre ord, kan datamaskiner bokstavelig talt være å gjøre flere ting på en gang -

803
00:47:38,920 --> 00:47:44,270
det er ingen garanti for at din SELECT og UPDATE i dette tilfellet

804
00:47:44,270 --> 00:47:46,150
kommer til å skje rygg mot rygg.

805
00:47:46,150 --> 00:47:49,140
Så en dårlig scenario ville være du gjøre SELECT

806
00:47:49,140 --> 00:47:51,670
å se hvor mange aksjer i dette penny stock har Skroob,

807
00:47:51,670 --> 00:47:54,710
og så bare ved en tilfeldighet en annen database spørringen utføres -

808
00:47:54,710 --> 00:47:57,740
kanskje sin Skroob i et annet vindu prøver å kjøpe 10 aksjer

809
00:47:57,740 --> 00:48:00,700
i et annet vindu helt, mye som ATM -

810
00:48:00,700 --> 00:48:05,410
og anta at en annen spørring blir i mellom SELECT og UPDATE.

811
00:48:05,410 --> 00:48:10,210
Det kan være tilfelle at Skroob nå mister noe antall aksjer

812
00:48:10,210 --> 00:48:14,340
fordi en annen prosess inspiserer staten hans verden,

813
00:48:14,340 --> 00:48:17,800
eller han får flere aksjer enn han burde ha.

814
00:48:17,800 --> 00:48:23,250
Vi vil ikke gå inn i opplysninger om nøyaktig hva disse spesielle historien linjer ville være,

815
00:48:23,250 --> 00:48:28,380
men poenget er at hvis du må sjekke en variabler verdi og deretter ta en beslutning,

816
00:48:28,380 --> 00:48:32,500
hvis det er en risiko for at noen andre gjør noe i mellom disse to utsagnene,

817
00:48:32,500 --> 00:48:36,220
som kan skje i flerprosessorsystemer, i flerkjernede systemer,

818
00:48:36,220 --> 00:48:41,220
datamaskiner med evnen til å gjøre flere ting på en gang, kan dårlige ting skje

819
00:48:41,220 --> 00:48:44,530
som bankkontoer blir belastet feil, kjøpe dobbelt så mye melk,

820
00:48:44,530 --> 00:48:46,730
eller i dette tilfellet feil antall aksjer.

821
00:48:46,730 --> 00:48:48,370
Men det finnes en enklere måte å tenke på dette.

822
00:48:48,370 --> 00:48:53,290
>> Det viser seg at SQL støtter også, hvis du konfigurere tabellen riktig,

823
00:48:53,290 --> 00:48:56,920
noe som kalles transaksjoner, som jeg vil hevde er faktisk enda lettere å forstå

824
00:48:56,920 --> 00:49:00,650
enn dette, men det er ikke en 1-liner, så det er faktisk litt mer involvert.

825
00:49:00,650 --> 00:49:04,960
Det er bokstavelig talt en uttalelse i SQL kalt START transaksjonen.

826
00:49:04,960 --> 00:49:08,300
Akkurat som det er SELECT, UPDATE, INSERT, DELETE, og bli med og en haug med andre,

827
00:49:08,300 --> 00:49:10,970
Det er søkeord som START transaksjonen.

828
00:49:10,970 --> 00:49:13,560
Og hva du gjør deretter i forbindelse med pset 7 -

829
00:49:13,560 --> 00:49:17,270
du trenger ikke å gjøre dette for pset 7, det er eksplisitt fraskrevet som ikke er nødvendig,

830
00:49:17,270 --> 00:49:18,830
men for endelig prosjekter kan det være nyttig -

831
00:49:18,830 --> 00:49:22,820
Hvis du kaller en spørring av START transaksjonen og deretter en annen spørring

832
00:49:22,820 --> 00:49:25,620
og deretter en annen spørring og deretter en annen, en annen, og en annen,

833
00:49:25,620 --> 00:49:31,860
disse søkene vil faktisk ikke bli henrettet før du ringer SQL-setningen COMMIT,

834
00:49:31,860 --> 00:49:37,220
på hvilket tidspunkt, enten det er to utsagn eller 20 uttalelser, vil de alle bli henrettet på en gang,

835
00:49:37,220 --> 00:49:42,770
noe som betyr at ingen andre kan uhell kjøpe for mye melk eller debetkort for mye penger

836
00:49:42,770 --> 00:49:46,340
eller kjøpe for mange aksjer fordi alle dine spørsmål vil utføre

837
00:49:46,340 --> 00:49:48,410
rygg mot rygg til rygg mot rygg.

838
00:49:48,410 --> 00:49:51,580
Og dette er super viktig, spesielt når du gjør noe som dette.

839
00:49:51,580 --> 00:49:54,900
Dette er et vilkårlig eksempel som sier la oss oppdatere bankkonto

840
00:49:54,900 --> 00:50:00,200
ved å sette en balanse lik balanse - $ 1000 der kontonummeret er to.

841
00:50:00,200 --> 00:50:04,260
Og så den andre setningen er la nå er innskudd at $ 1000

842
00:50:04,260 --> 00:50:07,310
i en annens bankkonto som kontonummer er en.

843
00:50:07,310 --> 00:50:10,400
>> Med andre ord, dette er et perfekt eksempel på hvor du ønsker å være sikker

844
00:50:10,400 --> 00:50:13,590
at begge disse utsagnene skje eller ikke i det hele tatt

845
00:50:13,590 --> 00:50:15,450
fordi ellers kunden kommer til å bli skrudd

846
00:50:15,450 --> 00:50:17,670
og du kommer til å ta pengene sine og ikke sette den et annet sted,

847
00:50:17,670 --> 00:50:20,470
eller banken kommer til å bli skrudd der du kommer til å sette pengene

848
00:50:20,470 --> 00:50:23,140
men faktisk ikke trekke det fra brukerens konto.

849
00:50:23,140 --> 00:50:25,810
Så du vil ha både av dem for å utføre sammen.

850
00:50:25,810 --> 00:50:29,140
Dermed inngår verden transaksjoner.

851
00:50:29,140 --> 00:50:31,360
Så det er noe å holde i bakhodet,

852
00:50:31,360 --> 00:50:34,710
ikke så mye i forbindelse med bare et avsluttende prosjekt,

853
00:50:34,710 --> 00:50:36,700
men hvis du ønsker å ta det endelige prosjektet et sted,

854
00:50:36,700 --> 00:50:39,040
Hvis du ønsker å starte opp litt selskap rundt den,

855
00:50:39,040 --> 00:50:41,270
Hvis du ønsker å løse noen student gruppens problem på campus

856
00:50:41,270 --> 00:50:45,210
og faktisk har en levende, aktivt nettsted, disse er den slags subtile feil som kan oppstå

857
00:50:45,210 --> 00:50:49,480
Hvis du ikke helt tenke gjennom hva som kan skje hvis to personer

858
00:50:49,480 --> 00:50:54,190
prøver å få tilgang til nettstedet på bokstavelig talt i samme øyeblikk i tid,

859
00:50:54,190 --> 00:50:56,890
der sine forespørsler ellers blir vevd sammen.

860
00:50:58,840 --> 00:51:01,420
>> Klar for noen JavaScript, en teaser derav?

861
00:51:01,420 --> 00:51:04,320
Dette er vår siste språk for semesteret. OK.

862
00:51:04,320 --> 00:51:09,940
Heldigvis ser JavaScript veldig, veldig, veldig lik de to språkene, C og PHP,

863
00:51:09,940 --> 00:51:11,140
vi har gjort så langt.

864
00:51:11,140 --> 00:51:14,340
Det er ingen JavaScript pset 7, men det er et utrolig nyttig verktøy

865
00:51:14,340 --> 00:51:18,840
når det gjelder å gjøre web-baserte endelige prosjekter eller egentlig bare webprogrammering mer generelt.

866
00:51:18,840 --> 00:51:20,950
Så en rask oversikt over noe som kalles DOM.

867
00:51:20,950 --> 00:51:23,600
Her er en super enkel nettside som egentlig bare sier hei, verden

868
00:51:23,600 --> 00:51:25,970
både i tittelen og i kroppen.

869
00:51:25,970 --> 00:51:29,270
Som innsnittet har vært foreslå for noen tid,

870
00:51:29,270 --> 00:51:31,380
det er faktisk et hierarki til nettsider.

871
00:51:31,380 --> 00:51:34,220
Jeg kunne trekke den samme bit med HTML som et tre,

872
00:51:34,220 --> 00:51:37,470
tenker tilbake til våre diskusjoner datastrukturer i C, som følger.

873
00:51:37,470 --> 00:51:40,710
Jeg har noen spesiell rotnoden kalt dokumentet node,

874
00:51:40,710 --> 00:51:43,650
og vi vil se analog av dette i JavaScript bare et øyeblikk.

875
00:51:43,650 --> 00:51:48,330
Den første barn og eneste barn av at i dette tilfellet er HTML-koden.

876
00:51:48,330 --> 00:51:49,880
Det er ingen direkte kartlegging av DOCTYPE.

877
00:51:49,880 --> 00:51:53,170
Det er en spesiell ting, så vi skal bare ignorere det når det kommer til dette DOM,

878
00:51:53,170 --> 00:51:55,810
Dette Document Object Model treet.

879
00:51:55,810 --> 00:51:59,530
Legg merke til at HTML-koden, som jeg har avbildet vilkårlig som et rektangel,

880
00:51:59,530 --> 00:52:02,890
har 2 barn: hode og kropp.

881
00:52:02,890 --> 00:52:04,840
>> De er på samme måte tegnet som rektangler.

882
00:52:04,840 --> 00:52:08,970
Det er meningsfullt billedlig at hodet er til venstre for kroppen.

883
00:52:08,970 --> 00:52:11,960
Implikasjonen er at hodet kommer først i treet.

884
00:52:11,960 --> 00:52:14,910
Så det er faktisk en bestilling til et tre når du tegner det slik,

885
00:52:14,910 --> 00:52:17,460
selv om figurene og whatnot er vilkårlig.

886
00:52:17,460 --> 00:52:20,360
Hodet har i mellomtiden en enkelt barn kalt tittel,

887
00:52:20,360 --> 00:52:25,170
og tittelen har faktisk sin egen barn, som er "Hello, World",

888
00:52:25,170 --> 00:52:32,210
som jeg bevisst trakk som en oval her for å gjøre det litt forskjellig fra rektangelet.

889
00:52:32,210 --> 00:52:37,420
Disse rektangler er elementer, mens Hallo, er verden virkelig en tekst node.

890
00:52:37,420 --> 00:52:39,850
Så det er en node i treet, men det er en annen type node

891
00:52:39,850 --> 00:52:41,730
så jeg trakk det vilkårlig annerledes.

892
00:52:41,730 --> 00:52:45,000
Tilsvarende har kroppen et barn som heter Hallo, verden også,

893
00:52:45,000 --> 00:52:47,910
så forskjellig node selv om de er tilfeldigvis den samme teksten,

894
00:52:47,910 --> 00:52:52,100
men jeg har trukket den med samme form. Så hvem bryr seg?

895
00:52:52,100 --> 00:52:56,820
Vel, hva er fint om HTML er at det har denne hierarkiske natur.

896
00:52:56,820 --> 00:53:01,010
Og hva er fint om JavaScript og spesielt bibliotekene som er fritt tilgjengelig

897
00:53:01,010 --> 00:53:07,120
og populære som jQuery, kan du navigere trestrukturen så utrolig lett.

898
00:53:07,120 --> 00:53:11,790
Noen av tingene vi gjorde i C med pekere og traversering trær og recursing på noder

899
00:53:11,790 --> 00:53:15,300
venstre barn til høyre barn, plutselig kan vi liksom ta for gitt

900
00:53:15,300 --> 00:53:19,450
som utrolig opplysende om ikke litt frustrerende

901
00:53:19,450 --> 00:53:22,470
men ikke på langt nær en effektiv måte å gå om programmering.

902
00:53:22,470 --> 00:53:24,470
Og så med disse høyere nivå språk som JavaScript

903
00:53:24,470 --> 00:53:28,340
vi vil være i stand til å navigere dette treet mye mer intuitivt.

904
00:53:28,340 --> 00:53:30,430
>> Og faktisk syntaksen kommer til å være ganske godt kjent.

905
00:53:30,430 --> 00:53:32,950
Hvis du aldri har sett JavaScript før, er dette en veldig fin referanse

906
00:53:32,950 --> 00:53:35,910
fra Mozilla folk, folk som gjør Firefox,

907
00:53:35,910 --> 00:53:38,370
så gjerne bla at det passer deg.

908
00:53:38,370 --> 00:53:41,590
Hva du finner - og disse lysbildene er identisk med hva vi brukte den andre dagen -

909
00:53:41,590 --> 00:53:44,030
Tilsvarende er viktigste borte.

910
00:53:44,030 --> 00:53:47,010
Så når du skriver et program i JavaScript, er det ingen hovedfunksjon.

911
00:53:47,010 --> 00:53:48,690
Du bare begynne å skrive kode.

912
00:53:48,690 --> 00:53:51,660
Men en viktig forskjell mellom JavaScript og C og PHP

913
00:53:51,660 --> 00:53:55,890
er at mens C og PHP så langt har blitt henrettet server side

914
00:53:55,890 --> 00:53:59,180
ved apparatet i dette tilfelle eller mer generelt av en server,

915
00:53:59,180 --> 00:54:04,270
JavaScript ved design er vanligvis utført av en nettleser.

916
00:54:04,270 --> 00:54:08,440
Med andre ord, kan du skrive JavaScript-kode, som vi er i ferd med å,

917
00:54:08,440 --> 00:54:13,080
på en server i apparatet, men du inkludere det blant HTML-koden, blant CSS din,

918
00:54:13,080 --> 00:54:16,100
blant dine GIFs og dine PNG og JPEG bilder

919
00:54:16,100 --> 00:54:19,170
slik at når brukeren besøker nettsiden din, hvis du bruker JavaScript,

920
00:54:19,170 --> 00:54:21,770
at JavaScript-koden kommer fra serveren til nettleseren,

921
00:54:21,770 --> 00:54:24,540
og det er nettleseren som faktisk utfører det.

922
00:54:24,540 --> 00:54:27,960
Så dette har meningsfulle konsekvenser for enda åndsverk.

923
00:54:27,960 --> 00:54:32,600
Det er litt dumt å begynne å tenke på å beskytte din IP når det kommer til JavaScript-kode

924
00:54:32,600 --> 00:54:37,560
fordi av natur av språket det blir utført regel nettleser side.

925
00:54:37,560 --> 00:54:40,360
>> Du kan obfuscate det, som betyr at du kan gjøre det ser gal og stygg

926
00:54:40,360 --> 00:54:45,400
uten mellomrom, fryktelig variabelnavn, for å gjøre det vanskeligere for folk å stjele din IP,

927
00:54:45,400 --> 00:54:48,120
men de viktigste er at den utføres webleser side.

928
00:54:48,120 --> 00:54:51,790
Selv om som en side JavaScript kan brukes server side,

929
00:54:51,790 --> 00:54:54,480
den vanligste måten å bruke akkurat nå er fortsatt på nettleseren.

930
00:54:54,480 --> 00:54:59,800
Og her er hva det ser ut som. Her er en if-else if-else konstruere akkurat som C, akkurat som PHP.

931
00:54:59,800 --> 00:55:02,420
Her er en boolsk uttrykk når du "eller" 2 ting sammen.

932
00:55:02,420 --> 00:55:04,330
Her er når du "og" 2 ting sammen.

933
00:55:04,330 --> 00:55:08,300
Her er en bryter uttalelse, som ligner på PHP

934
00:55:08,300 --> 00:55:10,810
ved at du kan slå på ulike typer verdier.

935
00:55:10,810 --> 00:55:15,180
Looper samme har for løkker her, som er strukturert identisk til hva vi har sett før.

936
00:55:15,180 --> 00:55:18,110
Mens looper, vi har fått gjøre mens sløyfer.

937
00:55:18,110 --> 00:55:20,290
Variabler, aldri så litt annerledes.

938
00:55:20,290 --> 00:55:24,560
Du trenger erklærer variabler som du gjør i PHP og C,

939
00:55:24,560 --> 00:55:27,860
men på samme måte er JavaScript svakt skrevet.

940
00:55:27,860 --> 00:55:32,730
Du trenger ikke oppgi int eller flyte eller hyssing eller noe sånt vanligvis.

941
00:55:32,730 --> 00:55:34,240
Du kan angi var.

942
00:55:34,240 --> 00:55:38,040
Du trenger ikke å angi var, men det har implikasjoner hvis du ikke gjør det.

943
00:55:38,040 --> 00:55:42,000
Vanligvis hvis du utelater var, du tilfeldigvis opprette en global variabel i stedet for lokale.

944
00:55:42,000 --> 00:55:46,420
Så la meg foreslå at du nesten alltid bare si var og så navnet på variabelen.

945
00:55:46,420 --> 00:55:48,740
Det er ikke en type, det er bare VaR for variabel.

946
00:55:48,740 --> 00:55:52,930
Dette ville være et eksempel, enten det er 123 eller "hallo, verden".

947
00:55:52,930 --> 00:55:58,910
Arrays er til stede og syntaktisk lik PHP.

948
00:55:58,910 --> 00:56:03,690
Jeg vil si VAR tall og deretter bruker jeg hakeparenteser igjen for å erklære en variabel

949
00:56:03,690 --> 00:56:08,870
hvis typen er array som har disse spesielle numre i det adskilt med komma.

950
00:56:08,870 --> 00:56:11,740
Og så til slutt, er dette den eneste som virkelig ser annerledes ut.

951
00:56:11,740 --> 00:56:16,700
Husk at i PHP ville vi ha gjennomført en assosiativ array for en student

952
00:56:16,700 --> 00:56:20,220
som Zamyla som kan se slik ut, hvor variabelen kalles student.

953
00:56:20,220 --> 00:56:23,370
Klammeparentesene mener her kommer en matrise.

954
00:56:23,370 --> 00:56:28,500
>> Det faktum at jeg ikke bruker numeriske indekser, men strenger - id, house, og navn -

955
00:56:28,500 --> 00:56:30,990
betyr at dette er en assosiativ array,

956
00:56:30,990 --> 00:56:34,490
og disse pilene med likhetstegnet og vinklet brakett

957
00:56:34,490 --> 00:56:37,310
betyr at nøkkelen er "ID", verdien 1;

958
00:56:37,310 --> 00:56:39,310
nøkkelen er "hus", er verdien Winthrop House;

959
00:56:39,310 --> 00:56:41,800
nøkkelen er "navn", er verdien Zamyla Chan.

960
00:56:41,800 --> 00:56:47,110
Så det er 3 nøkler inne i denne assosiativ array, som hver har sin egen verdi.

961
00:56:47,110 --> 00:56:52,880
Vi har sett at i 7 pset, eller du snart vil i JavaScript samme idé,

962
00:56:52,880 --> 00:56:55,220
men det kommer til å se slik ut.

963
00:56:55,220 --> 00:57:00,070
Så Var student - ingen dollartegn og ingen omtale av typen fortsatt, men Var -

964
00:57:00,070 --> 00:57:05,860
likeverdige og deretter åpne klammeparentes fordi i JavaScript når du har viktige verdi-par,

965
00:57:05,860 --> 00:57:08,900
du faktisk bruker noe som kalles et objekt.

966
00:57:08,900 --> 00:57:13,490
Og de av dere som tok APCS eller lignende kanskje husker objekter fra Java

967
00:57:13,490 --> 00:57:15,140
eller lignende språk.

968
00:57:15,140 --> 00:57:17,880
JavaScript er ikke Java, først av alt.

969
00:57:17,880 --> 00:57:21,600
Det var et bevisst valg år siden for å kutte ut noe annet som var populært,

970
00:57:21,600 --> 00:57:25,640
sitt navn, selv om det ikke har noen relasjon til fundamental JAVA selv.

971
00:57:25,640 --> 00:57:31,490
JavaScript har objekter, og du oppretter dem ved hjelp av krøllete brace notasjon.

972
00:57:31,490 --> 00:57:36,710
Objekter i JavaScript er ganske mye tilsvarer assosiative arrayer i PHP

973
00:57:36,710 --> 00:57:40,030
når det gjelder å lagre data innsiden av dem.

974
00:57:40,030 --> 00:57:44,100
>> Men enda mer kraftfullt i JavaScript kan du knytte veldig enkelt funksjoner

975
00:57:44,100 --> 00:57:48,040
innsiden av et objekt, og selv om du kan gjøre dette på andre språk,

976
00:57:48,040 --> 00:57:50,040
det er ganske vanlig paradigme, som vi skal se.

977
00:57:50,040 --> 00:57:54,380
Kort sagt, representerer dette objektet en student, som er spesielt Zamyla,

978
00:57:54,380 --> 00:58:00,380
og det er like konseptuelt, bare syntaktisk forskjellig fra dette.

979
00:58:00,380 --> 00:58:03,840
La oss faktisk bruker JavaScript i en fil.

980
00:58:03,840 --> 00:58:05,570
Det viser seg at det er en skriptmerket.

981
00:58:05,570 --> 00:58:08,180
Vi har sett en stil tag, og vi har sett andre HTML-koder.

982
00:58:08,180 --> 00:58:11,510
Skriptmerket faktisk vil inneholde noen JavaScript-kode.

983
00:58:11,510 --> 00:58:15,500
La meg gå inn i apparatet der vi har noen kildekoden pre-laget.

984
00:58:15,500 --> 00:58:18,700
Jeg har ikke lagt det ennå på nettsiden, men jeg vil gjøre det etter klassen.

985
00:58:18,700 --> 00:58:21,770
La oss åpne opp dette, blink.html.

986
00:58:21,770 --> 00:58:27,560
Tilbake på 1990-tallet, var det bokstavelig talt en HTML-kode som kalles blinking tag,

987
00:58:27,560 --> 00:58:30,340
og dette var en av de mest fantastiske overused koder på Internett

988
00:58:30,340 --> 00:58:36,140
hvor du vil besøke noen 1990 style nettside og begynne å se tekst blinker du dette,

989
00:58:36,140 --> 00:58:39,810
resultatene av marquis tag, som hadde teksten går slik.

990
00:58:39,810 --> 00:58:45,070
En av de få gangene hvor verden har faktisk blitt enige om en web standard,

991
00:58:45,070 --> 00:58:48,250
alle over hele linja drepte blinke tag noen år siden.

992
00:58:48,250 --> 00:58:52,860
Men vi kan gjenopplive den med JavaScript som en demonstrasjon av kraften du har

993
00:58:52,860 --> 00:58:56,660
når du kan skrive et program inne i en nettside.

994
00:58:56,660 --> 00:59:00,240
Først la oss hoppe over nye ting og fokusere bare på den gamle.

995
00:59:00,240 --> 00:59:01,780
>> Her er den gamle ting i dette eksemplet.

996
00:59:01,780 --> 00:59:06,350
Jeg har en HTML-kode, et hode tag, og en tittel tag.

997
00:59:06,350 --> 00:59:11,210
Så jeg har en kropp tag her med en div, som er tilbakekalling bare en rektangulær inndeling av siden

998
00:59:11,210 --> 00:59:14,720
at jeg har gitt en unik ID vilkårlig av "hilsen" til,

999
00:59:14,720 --> 00:59:18,320
så jeg har en måte å unikt henvise til det, har det noen veldig enkle tekst:

1000
00:59:18,320 --> 00:59:20,220
Hei, verden.

1001
00:59:20,220 --> 00:59:23,940
Nå la meg bla opp til toppen av denne filen og se hva som er nytt.

1002
00:59:23,940 --> 00:59:27,710
Det første som er nytt opp toppen er skriptmerket,

1003
00:59:27,710 --> 00:59:31,280
og innsiden av skriptmerket varsel har jeg erklært en funksjon.

1004
00:59:31,280 --> 00:59:34,610
Å erklære en funksjon i JavaScript, ganske lik PHP,

1005
00:59:34,610 --> 00:59:37,930
du bokstavelig talt skrive funksjonen og navnet på funksjonen, parentes,

1006
00:59:37,930 --> 00:59:40,400
og kanskje noen argumenter hvis det tar noen.

1007
00:59:40,400 --> 00:59:43,510
Da har jeg fått min krøllete brace som vanlig, og nå har vi noen litt ny kode,

1008
00:59:43,510 --> 00:59:45,230
men la oss se hva dette betyr.

1009
00:59:45,230 --> 00:59:48,670
Så Var div, betyr dette bare gi meg en variabel kalt div.

1010
00:59:48,670 --> 00:59:50,530
Jeg kunne ha kalt det foo, men jeg ønsket å bli kalt div

1011
00:59:50,530 --> 00:59:52,620
grunner som vil være klart i et sekund.

1012
00:59:52,620 --> 00:59:57,480
Så viser det seg i JavaScript - og dette er JavaScript-kode innebygd i min nettside -

1013
00:59:57,480 --> 01:00:01,760
det er en spesiell global variabel slags kalles dokument.

1014
01:00:01,760 --> 01:00:04,780
JavaScript er faktisk et objekt-orientert språk.

1015
01:00:04,780 --> 01:00:07,230
Vi vil ikke gå i detalj i 50 med hensyn til hva det betyr,

1016
01:00:07,230 --> 01:00:11,180
men for nå vet at et objekt er ganske mye som en struct.

1017
01:00:11,180 --> 01:00:14,740
Som vi så langt tilbake når du er i en av de tidligste problemet setter

1018
01:00:14,740 --> 01:00:17,150
hvor vi legger mye informasjon i en struct,

1019
01:00:17,150 --> 01:00:21,330
Tilsvarende er dokumenteres et spesielt struct som følger med nettleseren,

1020
01:00:21,330 --> 01:00:24,810
kommer med en nettside. Det er ikke noe jeg har laget.

1021
01:00:24,810 --> 01:00:28,210
Inne i dette dokumentet struktur, men har du ikke bare data

1022
01:00:28,210 --> 01:00:30,010
men du har også funksjoner.

1023
01:00:30,010 --> 01:00:34,090
>> Og når du har en funksjon inne i en struktur, på innsiden av et objekt,

1024
01:00:34,090 --> 01:00:36,490
det kalles en metode. Men det er det samme.

1025
01:00:36,490 --> 01:00:40,110
En metode er en funksjon som bare så skjer for å være inne på noe annet.

1026
01:00:40,110 --> 01:00:42,990
Så dette betyr at denne spesielle global variabel kalt dokument

1027
01:00:42,990 --> 01:00:47,690
har en funksjon som heter getElementById som bokstavelig talt gjør det.

1028
01:00:47,690 --> 01:00:52,460
Det vil få deg et element fra DOM, Document Object Model treet,

1029
01:00:52,460 --> 01:00:55,520
hvis ID er i dette tilfellet hilsen.

1030
01:00:55,520 --> 01:00:59,200
Med andre ord, kommer all den tiden vi brukte på datastrukturer spiller inn her.

1031
01:00:59,200 --> 01:01:01,400
Dette bildet av en DOM at vi hadde et øyeblikk siden,

1032
01:01:01,400 --> 01:01:06,100
selv om siden er litt annerledes, hvis jeg hadde en div i dette bildet,

1033
01:01:06,100 --> 01:01:11,180
hva document.getElementById ville gå tilbake til meg ville faktisk være en peker

1034
01:01:11,180 --> 01:01:15,440
til rektangelet i treet, en referanse til rektangelet i treet.

1035
01:01:15,440 --> 01:01:18,410
Så det er hva det betyr å faktisk ringe en av disse funksjonene.

1036
01:01:18,410 --> 01:01:21,960
I dette tilfellet igjen er det en div. Det er ikke et organ eller en tittel.

1037
01:01:21,960 --> 01:01:26,480
Så la oss se hva jeg så gjøre med dette div nå som jeg har det inne i denne variabelen kalt div.

1038
01:01:26,480 --> 01:01:32,580
Det viser seg med JavaScript du har muligheten til å finjustere CSS på siden din dynamisk.

1039
01:01:32,580 --> 01:01:39,060
Frem til nå, er alt av CSS vi har gjort, om enn begrenset, i stil attributter,

1040
01:01:39,060 --> 01:01:41,730
eller hvor ellers sette vi har CSS?

1041
01:01:42,730 --> 01:01:45,810
Jeg slags bortskjemt som en. I stil koden øverst av filen.

1042
01:01:45,810 --> 01:01:49,180
Eller tredje plass har vært i?

1043
01:01:50,710 --> 01:01:54,590
>> En ekstern fil, noe. Css.

1044
01:01:54,590 --> 01:01:56,730
Så de er tre steder vi har gjort CSS så langt,

1045
01:01:56,730 --> 01:01:59,310
men fangsten er vi hardkodet det hele.

1046
01:01:59,310 --> 01:02:04,060
Du bestemte deg som du due i pset 7, besluttet vi før forelesning hva vår CSS ville være.

1047
01:02:04,060 --> 01:02:07,380
Men hvis du ønsker å endre CSS, kan du faktisk gjøre det

1048
01:02:07,380 --> 01:02:09,370
når du har en faktisk programmeringsspråk.

1049
01:02:09,370 --> 01:02:13,910
CSS, HTML - ikke programmeringsspråk. JavaScript er.

1050
01:02:13,910 --> 01:02:18,200
Så det viser seg at så snart du har en av disse rektangler fra treet

1051
01:02:18,200 --> 01:02:23,050
kalt DOM, har det selv noen data inne i den.

1052
01:02:23,050 --> 01:02:27,820
Så div som jeg bare tok fra treet har det vi kaller en eiendom innsiden av det

1053
01:02:27,820 --> 01:02:34,390
kalt stil, og stilen hotellet har selv en egenskap kalt synlighet.

1054
01:02:34,390 --> 01:02:37,330
Jeg ville vite dette bare ved å se opp en CSS brukermanual.

1055
01:02:37,330 --> 01:02:41,160
Det viser seg at det er en synlighet CSS eiendom som gjør hva den sier.

1056
01:02:41,160 --> 01:02:44,530
Det gjør noe synlig eller ikke, synlig eller ikke.

1057
01:02:44,530 --> 01:02:46,810
Og hvordan du gjør det er dette.

1058
01:02:46,810 --> 01:02:50,510
Jeg spør programmatisk om synligheten av denne div er skjult,

1059
01:02:50,510 --> 01:02:53,390
hva kan jeg endre det til? Synlig.

1060
01:02:53,390 --> 01:02:58,840
Annet hvis synligheten av denne siden ikke er skjult, logisk jeg gjør det skjult.

1061
01:02:58,840 --> 01:03:04,070
Jeg har ingen anelse om hvorfor det er synlig og skjult og ikke synlig og usynlig.

1062
01:03:04,070 --> 01:03:06,000
Dette var en dårlig design beslutning underveis.

1063
01:03:06,000 --> 01:03:09,530
Men de er faktisk motsetninger i CSS: synlig og skjult.

1064
01:03:09,530 --> 01:03:15,520
Alt dette gjør er det betyr endre CSS av filen min på og av, på og av

1065
01:03:15,520 --> 01:03:16,870
for den aktuelle div.

1066
01:03:16,870 --> 01:03:20,630
Men igjen, dette er en funksjon som heter blinke. Når er blink funksjon kalt?

1067
01:03:20,630 --> 01:03:24,080
Det viser seg at det er en annen spesiell global variabel kalt vinduet,

1068
01:03:24,080 --> 01:03:28,220
lignende i ånden til dokumentet, men mens dokumentet refererer til nettsiden din,

1069
01:03:28,220 --> 01:03:31,700
som DOM treet, sendte HTML du fra serveren,

1070
01:03:31,700 --> 01:03:35,250
vindu refererer til krom rundt det, på adresselinjen, tittellinjen,

1071
01:03:35,250 --> 01:03:37,880
og alle de greiene rundt nettsiden din.

1072
01:03:37,880 --> 01:03:42,800
>> Og det viser seg at vinduet objektet har en spesiell funksjon innsiden av det som kalles setInterval

1073
01:03:42,800 --> 01:03:44,360
som gjør hva den sier.

1074
01:03:44,360 --> 01:03:48,600
Det vil sette et intervall - i dette tilfellet hver 500 millisekunder -

1075
01:03:48,600 --> 01:03:52,270
og ta en gjetning, hva det kommer til å gjøre hver 500 millisekunder?

1076
01:03:52,270 --> 01:03:55,240
Det kommer til å utføre denne funksjonen blinker.

1077
01:03:55,240 --> 01:03:58,560
Og hva er fint her er at vi kunne ha gjort dette i C selv om vi aldri gjorde.

1078
01:03:58,560 --> 01:04:01,580
C har noe som heter funksjonspekere hvor du kan passere funksjoner rundt

1079
01:04:01,580 --> 01:04:03,140
som argumenter.

1080
01:04:03,140 --> 01:04:07,620
Tilsvarende i JavaScript kan du passere navnet på en funksjon i en annen funksjon.

1081
01:04:07,620 --> 01:04:10,630
Og legg merke til hva jeg gjør. Jeg gjør ikke dette.

1082
01:04:10,630 --> 01:04:14,380
Hvis jeg legger parentes etter blink, ville det bety kalle blink funksjon.

1083
01:04:14,380 --> 01:04:17,430
Hvis jeg utelater dem, betyr at her er blink funksjon

1084
01:04:17,430 --> 01:04:21,330
slik at setInterval kan kalle det hver 500 millisekunder.

1085
01:04:21,330 --> 01:04:28,200
Så sluttresultatet, fryktelig om det er, er at hvis jeg går inn localhost og gå til blink.html,

1086
01:04:28,200 --> 01:04:32,120
Jeg har nå dette skjer igjen og igjen.

1087
01:04:32,120 --> 01:04:34,950
Og hvis jeg faktisk Inspiser Element, la oss se om vi kan se dette.

1088
01:04:34,950 --> 01:04:38,550
La meg Inspiser Element, la meg bla ned bare litt,

1089
01:04:38,550 --> 01:04:44,320
la meg velge Elements over her, og merker DOM innsiden av Chrome inspektør.

1090
01:04:44,320 --> 01:04:48,840
Det er bokstavelig talt å endre frem og tilbake hver 500 millisekunder.

1091
01:04:48,840 --> 01:04:55,660
Hvis vi går til vår venn Nate,

1092
01:04:55,660 --> 01:05:00,020
Hvis du noen gang lurt på hvordan dette fungerer, tilsvarende idé med et intervall,

1093
01:05:00,020 --> 01:05:04,810
men Nate er faktisk gjør veldig effektiv bruk av farger i dette tilfellet her.

1094
01:05:04,810 --> 01:05:07,350
Så hva mer kan vi egentlig gjøre med dette?

1095
01:05:07,350 --> 01:05:09,990
La oss åpne opp et annet eksempel og prøve noe

1096
01:05:09,990 --> 01:05:12,940
det er programmatisk enda mer nyttig enn å gjøre ting blinker.

1097
01:05:12,940 --> 01:05:17,990
La meg gå inn i våre skjemaer katalogen i dag og gå inn form0.

1098
01:05:17,990 --> 01:05:20,820
Dette var den styggeste mulig form at jeg kunne komme opp med,

1099
01:05:20,820 --> 01:05:23,290
og la meg bare vise deg hvordan det ser ut i en nettleser.

1100
01:05:23,290 --> 01:05:28,960
>> La meg gå inn localhost / former, og dette er form0.

1101
01:05:28,960 --> 01:05:33,400
Dette er en super stygg HTML-skjema som har noen felt for e-post, for passordet,

1102
01:05:33,400 --> 01:05:37,190
passord, og deretter en liten avmerkingsboksen for å godta noen vilkår og betingelser.

1103
01:05:37,190 --> 01:05:41,350
Fangsten er hvis jeg besøker dette skjemaet, og jeg ønsker ikke å gi deg min e-postadresse,

1104
01:05:41,350 --> 01:05:44,730
Jeg ønsker ikke å godta vilkårene og betingelsene kanskje, kan jeg klikke Registrer

1105
01:05:44,730 --> 01:05:46,920
og det lar meg gjennom uansett.

1106
01:05:46,920 --> 01:05:50,800
Dette skjer for å sende til en dum PHP fil som heter dump.php.

1107
01:05:50,800 --> 01:05:58,420
Alt den gjør er skrive ut innholdet i $ _GET bare for diagnostiske formål.

1108
01:05:58,420 --> 01:06:01,580
Det var det som var innsendt av brukeren akkurat nå.

1109
01:06:01,580 --> 01:06:05,010
Men anta at vi faktisk ønsker å validere brukerens innsending av skjemaer.

1110
01:06:05,010 --> 01:06:06,530
La meg gå inn versjon 1.

1111
01:06:06,530 --> 01:06:11,420
Dette er form1.html. Det ser estetisk like ille, men merker hvor lyst det er.

1112
01:06:11,420 --> 01:06:15,450
Hvis jeg klikker Registrer uten samarbeid, får jeg skreket til.

1113
01:06:15,450 --> 01:06:17,320
"Du må oppgi din e-postadresse."

1114
01:06:17,320 --> 01:06:21,670
OK. Så la meg prøve det. Så malan@harvard.edu. Jeg trenger ikke et passord.

1115
01:06:21,670 --> 01:06:25,100
Registrer deg. "Du må oppgi et passord." OK.

1116
01:06:25,100 --> 01:06:28,470
Så jeg vil gi et passord for rød. Registrer deg.

1117
01:06:28,470 --> 01:06:32,300
"Passord ikke stemmer." Jeg må nå skrive inn crimson her.

1118
01:06:32,300 --> 01:06:35,710
Jeg tilfeldigvis sjekket det. Registrer deg.

1119
01:06:35,710 --> 01:06:39,860
"Du må godta vilkårene." OK. Enig der. Registrer deg.

1120
01:06:39,860 --> 01:06:43,700
Og nå viser det meg den diagnostiske produksjon over det.

1121
01:06:43,700 --> 01:06:45,630
>> Så hva skjedde?

1122
01:06:45,630 --> 01:06:48,330
Vi har hatt denne muligheten til å validere skjemaene.

1123
01:06:48,330 --> 01:06:51,420
Faktisk, hvis du gjorde dykke inn pset 7, er det en si unnskyld funksjon

1124
01:06:51,420 --> 01:06:54,620
som gjør det ganske enkelt å kjefte på brukeren med en melding på skjermen.

1125
01:06:54,620 --> 01:06:57,580
Jeg bruker en litt annen mekanisme, varsling,

1126
01:06:57,580 --> 01:07:03,690
som ikke er en funksjon som er smilt siden det gjør veldig stygge brukermeldinger.

1127
01:07:03,690 --> 01:07:05,710
Men la oss se hva jeg gjør her.

1128
01:07:05,710 --> 01:07:09,620
Dette er form1.html, og merker at jeg har noen ganske kjent syntaks:

1129
01:07:09,620 --> 01:07:12,920
body-koden, form tag, handling egenskap, metode attributt.

1130
01:07:12,920 --> 01:07:17,050
Men merker jeg har gitt min form en unik ID for bekvemmelighet.

1131
01:07:17,050 --> 01:07:19,190
Da har jeg en e-post felt som type er tekst,

1132
01:07:19,190 --> 01:07:23,780
et passordfelt som type er passord, bekreftelse feltet som type er passord,

1133
01:07:23,780 --> 01:07:28,070
og deretter en avmerkingsboks som heter avtale over her, er type boksen.

1134
01:07:28,070 --> 01:07:30,380
Og så har jeg fått en send-knappen.

1135
01:07:30,380 --> 01:07:33,050
Men merker på toppen hva mer jeg har.

1136
01:07:33,050 --> 01:07:35,810
Først av alt, det er en annen bruk av skriptmerket.

1137
01:07:35,810 --> 01:07:40,520
Hvis du har noen JavaScript-kode i en annen fil, akkurat som med CSS kan du ta den med.

1138
01:07:40,520 --> 01:07:44,530
Og du gjør det med script kilde, og deretter merke Jeg kobler tilsynelatende

1139
01:07:44,530 --> 01:07:50,349
å googleapis.com til en svært lang vei, men med et filnavn som ender i jquery.min

1140
01:07:50,349 --> 01:07:52,420
for minimum. js.

1141
01:07:52,420 --> 01:07:55,969
jQuery er en super populær bibliotek for JavaScript som bare gjør JavaScript

1142
01:07:55,969 --> 01:07:58,230
alle mer brukervennlig å bruke.

1143
01:07:58,230 --> 01:08:00,610
Det er effektivt blitt en de facto standard.

1144
01:08:00,610 --> 01:08:04,090
Så selv om hva du er i ferd med å se er ikke ren JavaScript per se,

1145
01:08:04,090 --> 01:08:09,340
Det er et bibliotek på toppen av JavaScript mye som CS50 biblioteket er et lag

1146
01:08:09,340 --> 01:08:13,670
på toppen av lavt nivå C-kode, realiteten er nesten alle på Internett bruker det.

1147
01:08:13,670 --> 01:08:18,030
Så disse er ikke trening hjul. Dette er bare beste praksis i disse dager.

1148
01:08:18,030 --> 01:08:22,830
Nå merker under som er mitt eget script tag, og legge merke til hva jeg har gjort her.

1149
01:08:22,830 --> 01:08:27,450
Det viser seg at jQuery gjør noe litt fancy.

1150
01:08:27,450 --> 01:08:29,660
JavaScript har dollartegn, men de er meningsløse.

1151
01:08:29,660 --> 01:08:32,870
>> De er som bokstaven A eller B eller C.

1152
01:08:32,870 --> 01:08:36,670
jQuery har bare vedtatt konvensjonen eller slags lagt beslag på det faktum

1153
01:08:36,670 --> 01:08:40,280
at $ vil være deres spesielle symbol.

1154
01:08:40,280 --> 01:08:44,950
Så så snart du laste denne globale JavaScript-fil her oppe med skriptmerket,

1155
01:08:44,950 --> 01:08:49,080
du har tilgang til en spesiell global variabel som heter $.

1156
01:08:49,080 --> 01:08:53,009
Det er mer riktig kalles jQuery, men som ikke ser nesten like sexy som $.

1157
01:08:53,009 --> 01:08:56,250
Men $ har ingen spesiell betydning. I PHP hadde det spesiell betydning.

1158
01:08:56,250 --> 01:08:58,440
Du måtte ha den foran en variabel.

1159
01:08:58,440 --> 01:09:01,670
Dette er bare en sexy ting som de tok på.

1160
01:09:01,670 --> 01:09:03,389
Hva er det som skjer her?

1161
01:09:03,389 --> 01:09:08,830
Merker jeg har bestått til jQuery funksjon min global variabel dokument

1162
01:09:08,830 --> 01:09:10,860
og da jeg ringer. klar.

1163
01:09:10,860 --> 01:09:15,480
Hva jQuery hovedsak gjør er det tillater deg å ta noen vanilje JavaScript ting

1164
01:09:15,480 --> 01:09:17,889
som dokumentobjekt, vinduet objekt,

1165
01:09:17,889 --> 01:09:20,790
og hvis du sender den inn til jQuery funksjon -

1166
01:09:20,790 --> 01:09:24,429
og igjen, for å være klar, er dette en funksjon som heter jQuery -

1167
01:09:24,429 --> 01:09:28,240
hva den gjør er det tilbake til deg en spesiell versjon av dokumentet

1168
01:09:28,240 --> 01:09:30,700
som har mer funksjonalitet knyttet til den.

1169
01:09:30,700 --> 01:09:34,760
Så i rå JavaScript det ingen klar funksjon,

1170
01:09:34,760 --> 01:09:37,810
men hvis du passerer dokument til jQuery funksjon først,

1171
01:09:37,810 --> 01:09:40,960
den returnerer til deg en spesiell versjon av dokumentet objektet

1172
01:09:40,960 --> 01:09:43,030
som har flere fancy funksjoner.

1173
01:09:43,030 --> 01:09:48,230
Og det er grunnen til at folk liker det. Det gjør bare ting enklere å gjøre, som vi er i ferd med å se.

1174
01:09:48,230 --> 01:09:49,820
Så hva betyr denne linjen med kode?

1175
01:09:49,820 --> 01:09:52,690
Denne linjen med kode betyr her når dokumentet er ferdig -

1176
01:09:52,690 --> 01:09:56,830
med andre ord, når leseren er ferdig med å lese denne filen topp til bunn -

1177
01:09:56,830 --> 01:09:59,200
gå videre og utføre følgende funksjon.

1178
01:09:59,200 --> 01:10:03,540
Hva er virkelig interessant i JavaScript - og PHP har dette også -

1179
01:10:03,540 --> 01:10:05,450
er anonyme funksjoner.

1180
01:10:05,450 --> 01:10:10,560
I JavaScript kan du erklære funksjoner som ikke har noen navn, men de har en kropp.

1181
01:10:10,560 --> 01:10:12,570
Legg merke til hva som skjer her.

1182
01:10:12,570 --> 01:10:16,220
>> Dette er en funksjon som heter klar, og det betyr bare gjøre følgende

1183
01:10:16,220 --> 01:10:20,220
når hele nettsiden er klar, når det er blitt lest inn fra serveren.

1184
01:10:20,220 --> 01:10:23,090
Hva vil du gjøre? Jeg ønsker å kjøre en del av koden.

1185
01:10:23,090 --> 01:10:27,120
Legg merke til at vi ikke ønsker å kjøre denne koden med en gang.

1186
01:10:27,120 --> 01:10:34,350
Hvis jeg utelatt dette, ville dette bety umiddelbart begynne å utføre disse linjer med kode.

1187
01:10:34,350 --> 01:10:39,040
Men det faktum at jeg sier nei, nei, nei, pakk dette i en anonym funksjon som dette

1188
01:10:39,040 --> 01:10:43,000
betyr ikke utføre den ennå, kaller det slutt.

1189
01:10:43,000 --> 01:10:45,430
Vi så dette for et øyeblikk siden i vår forrige skjema eksempel.

1190
01:10:45,430 --> 01:10:49,990
Hvilken funksjon vi kaller slutt, 500 millisekunder senere? Blink.

1191
01:10:49,990 --> 01:10:51,480
Så den samme ideen.

1192
01:10:51,480 --> 01:10:53,950
Igjen, selv om dette ser litt rart, bare ta for nå på tro

1193
01:10:53,950 --> 01:10:57,060
at å erklære en anonym funksjon som kalles slutt,

1194
01:10:57,060 --> 01:11:01,720
du bare skrive function () {

1195
01:11:01,720 --> 01:11:05,380
Så hva koden skal vi kjøre til slutt? Følgende.

1196
01:11:05,380 --> 01:11:10,460
Dette ser også litt nytt, men dette betyr her er jQuery funksjon,

1197
01:11:10,460 --> 01:11:13,430
og dette er nå en snarvei.

1198
01:11:13,430 --> 01:11:18,830
Denne bit med HTML nederst på skjermen selvfølgelig har noen trær representasjon.

1199
01:11:18,830 --> 01:11:21,730
Det er ikke dette. Denne siden er mer interessant enn dette hallo, verden eksempel.

1200
01:11:21,730 --> 01:11:25,210
Men det er noen trær som tilsvarer denne HTML.

1201
01:11:25,210 --> 01:11:28,910
Det ville være en smerte i nakken til å gjennomføre noen form for rekursiv funksjon

1202
01:11:28,910 --> 01:11:34,380
å starte på rotnoden og deretter finne noden som ID er registrering.

1203
01:11:34,380 --> 01:11:38,340
Så hva jQuery gjør super lett for oss er bokstavelig talt dette.

1204
01:11:38,340 --> 01:11:43,000
Gå videre og få meg hva div eller uansett form, uansett HTML element

1205
01:11:43,000 --> 01:11:45,820
har en ID for registrering.

1206
01:11:45,820 --> 01:11:52,440
Dette tilsvarer document.getElementById ('registrering').

1207
01:11:52,440 --> 01:11:54,170
>> Hvorfor folk liker jQuery?

1208
01:11:54,170 --> 01:12:00,110
Fordi det er kortere å skrive. Men det er alt det er. Det er den samme ideen.

1209
01:12:00,110 --> 01:12:02,630
Få meg koden som ID er registrering.

1210
01:12:02,630 --> 01:12:06,300
Og når den tag, som skjer for å være en form, er sendt,

1211
01:12:06,300 --> 01:12:08,300
gå videre og gjennomføre denne koden.

1212
01:12:08,300 --> 01:12:11,320
Så la oss ta en titt nå på hvordan vi gjør skjema validering.

1213
01:12:11,320 --> 01:12:15,950
Syntaksen er riktignok kryptisk i starten, men hva skjer?

1214
01:12:15,950 --> 01:12:21,050
Hvis denne linjen med kode er sant, jeg kommer til å kjefte på brukeren å gi hans eller hennes e-postadresse.

1215
01:12:21,050 --> 01:12:22,970
Så hva er denne linjen med kode?

1216
01:12:22,970 --> 01:12:25,560
$ Betyr jQuery. Nå merke dette.

1217
01:12:25,560 --> 01:12:27,920
Dette er typen som CSS.

1218
01:12:27,920 --> 01:12:33,370
Hvis du har dykket inn i CSS ennå, vet du at dette betyr at elementet med ID er registrering.

1219
01:12:33,370 --> 01:12:39,840
Plassen betyr finne et barn eller en etterkommer av registrering hvis navn skrives inn.

1220
01:12:39,840 --> 01:12:42,970
Og så denne tingen i hakeparenteser er litt filter.

1221
01:12:42,970 --> 01:12:47,010
Og selv om dette ser kryptisk, betyr dette bare gå til skjemaet som ID er registrering,

1222
01:12:47,010 --> 01:12:51,230
gå til inngangen element innsiden av det som heter e-post,

1223
01:12:51,230 --> 01:12:55,440
og deretter få sin verdi, uansett verdi skjer for å være -

1224
01:12:55,440 --> 01:12:59,670
asdf hvis det er alt jeg skrev, eller malan@harvard.edu hvis det er det jeg skrev.

1225
01:12:59,670 --> 01:13:05,250
Så hvis verdien av skjemaets e felt == ingenting, kjefte på brukeren.

1226
01:13:05,250 --> 01:13:09,700
Annet hvis verdien av passord-feltet == ingenting, kjefte på brukeren.

1227
01:13:09,700 --> 01:13:19,520
>> Annet hvis verdien av passord feltet ikke være lik verdien av bekreftelsesfeltet

1228
01:13:19,520 --> 01:13:22,850
som var et annet element, kjefte på brukeren.

1229
01:13:22,850 --> 01:13:25,680
Og så til slutt - og dette har også noen nye syntaks av sine egne,

1230
01:13:25,680 --> 01:13:29,270
men når du har sett det, er det i alle fall litt mer fornuftig -

1231
01:13:29,270 --> 01:13:34,060
else if form som ID er registrering har en inngang element som heter avtale

1232
01:13:34,060 --> 01:13:39,720
og det er merket av, gå videre og kjefte på brukeren.

1233
01:13:39,720 --> 01:13:42,520
Så jeg helt innrømme dette er helt overveldende ved første øyekast.

1234
01:13:42,520 --> 01:13:46,530
Det er mye nytt syntaks. Men alle jQuery følger disse typer mønstre.

1235
01:13:46,530 --> 01:13:49,880
Og ærlig, jeg visste ikke engang at dette eksisterte før for noen minutter siden.

1236
01:13:49,880 --> 01:13:53,640
Jeg googlet "Hvordan sjekker du om en er merket i jQuery?"

1237
01:13:53,640 --> 01:13:55,680
og dette er syntaksen, fordi det er forskjellige måter å gjøre det

1238
01:13:55,680 --> 01:13:58,010
med faktiske rå JavaScript-kode.

1239
01:13:58,010 --> 01:14:01,030
Så som den aller første siden av oppgavesettet 7 understreker,

1240
01:14:01,030 --> 01:14:04,500
pset 7 er svært mye en øvelse i bootstrapping selv

1241
01:14:04,500 --> 01:14:08,650
hvor vi har gitt, forhåpentligvis, et konseptuelt rammeverk som å takle pset.

1242
01:14:08,650 --> 01:14:12,280
>> Men som ofte er tilfellet med webdesign, er det opp til deg virkelig å rote rundt,

1243
01:14:12,280 --> 01:14:16,680
innlemme kodebiter og eksempler fra nettet så lenge du sitere dem

1244
01:14:16,680 --> 01:14:17,960
I henhold til vilkårene på den første arket,

1245
01:14:17,960 --> 01:14:21,460
og innse at det å lære HTML, CSS, JavaScript og selv SQL

1246
01:14:21,460 --> 01:14:26,020
er egentlig ment å være dette at-home trening som vi begynner å ta disse trening hjul av.

1247
01:14:26,020 --> 01:14:29,150
Og innser for det er så mange flere ting du kan gjøre med en nettleser.

1248
01:14:29,150 --> 01:14:33,790
Innsiden av de fleste av disse elementene er det andre ting som kalles hendelseshåndterere.

1249
01:14:33,790 --> 01:14:37,140
Og selv om vi bare så på de kalt onsubmit og onready,

1250
01:14:37,140 --> 01:14:40,310
du kan gjøre ting som onkeydown, onkeyup,

1251
01:14:40,310 --> 01:14:43,410
liker når brukeren berører en tast, kan du lytte til det og oppover.

1252
01:14:43,410 --> 01:14:45,940
Gmail har hurtigtaster.

1253
01:14:45,940 --> 01:14:49,490
Hvordan implementere Google hurtigtaster som C for komponere?

1254
01:14:49,490 --> 01:14:54,120
De lytter til arrangementer, som de kalles, som onkeypress eller onkeyup og onkeydown.

1255
01:14:54,120 --> 01:14:56,360
Hvis du noen gang har ligget musen over noen menyvalg

1256
01:14:56,360 --> 01:15:00,180
og plutselig, voila, vises en meny eller grafikken skifter farge,

1257
01:15:00,180 --> 01:15:01,920
hvordan gjør de det?

1258
01:15:01,920 --> 01:15:06,940
Snarere enn å lytte til onready eller onsubmit, du lytter til onmouseover eller onmouseout.

1259
01:15:06,940 --> 01:15:10,920
>> Så kort sagt, med disse svært enkle grunnleggende at vi har begynt å skrape i overflaten i dag

1260
01:15:10,920 --> 01:15:13,940
og vi vil dykke i ytterligere til onsdag, du har i økende grad

1261
01:15:13,940 --> 01:15:17,530
makt til å gjennomføre den slags ting som du allerede er kjent med.

1262
01:15:17,530 --> 01:15:21,620
Så la oss avslutte det, og vi vil fortsette dette på onsdag.

1263
01:15:22,690 --> 01:15:24,320
>> [CS50.TV]