1
00:00:00,000 --> 00:00:02,570
[Powered by Google Translate] [Vecka 9]

2
00:00:02,570 --> 00:00:04,740
[David J. Malan - Harvard University]

3
00:00:04,740 --> 00:00:07,170
[Detta är CS50. - CS50.TV]

4
00:00:07,170 --> 00:00:12,350
Okej. Välkommen tillbaka. Detta är CS50, och detta är början av vecka 9.

5
00:00:12,350 --> 00:00:16,600
Idag fokuserar vi särskilt på design, inte längre i samband med C-

6
00:00:16,600 --> 00:00:20,010
men i samband med PHP och lite av SQL och lite JavaScript,

7
00:00:20,010 --> 00:00:23,730
särskilt mot en ände av både pset 7 och även din sista projekt.

8
00:00:23,730 --> 00:00:26,310
Faktum är att om du är vid den punkten i ditt slutgiltiga projekt

9
00:00:26,310 --> 00:00:30,100
där förmodligen som en timme eller så sedan du åtminstone börjat fundera

10
00:00:30,100 --> 00:00:33,730
till din slutliga projektet och du tänker du vill samarbeta med 1 eller 2 klasskamrater,

11
00:00:33,730 --> 00:00:36,150
om du har problem med att ansluta med nämnda klasskamrater,

12
00:00:36,150 --> 00:00:40,570
gärna fylla i formuläret på cs50.net/partners/form.

13
00:00:40,570 --> 00:00:42,880
Man ställer bara du vem du är, vilken typ av projekt du funderar,

14
00:00:42,880 --> 00:00:44,870
där du bor bara av logistiska skäl.

15
00:00:44,870 --> 00:00:49,510
Och sedan om du vill hålla ett öga på under nästa vecka eller så kalkylbladet URL där,

16
00:00:49,510 --> 00:00:53,520
Du kan då se en skrivskyddad version av Google doc

17
00:00:53,520 --> 00:00:56,010
där vi samlar denna information.

18
00:00:56,010 --> 00:00:58,930
Så om du vill arbeta med någon, med alla medel gärna nå ut till människor

19
00:00:58,930 --> 00:01:00,480
genom denna mekanism.

20
00:01:00,480 --> 00:01:02,690
Men majoriteten av folk utföra arbete solo. Det är helt bra.

21
00:01:02,690 --> 00:01:06,120
Så tycker inte att det är på något sätt obligatoriskt.

22
00:01:06,120 --> 00:01:09,680
På fredag ​​var det bara jag och några i teamet här,

23
00:01:09,680 --> 00:01:11,100
tom teater för det mesta.

24
00:01:11,100 --> 00:01:14,600
Det fanns 3 turister sitter där, så det var lite pinsamt.

25
00:01:14,600 --> 00:01:18,970
Vad vi pratade om var databaser och vi pratade om pset 7 lite.

26
00:01:18,970 --> 00:01:22,200
Och om du inte råkar fånga det på video ännu, det är bra.

27
00:01:22,200 --> 00:01:26,770
Jag ska försöka definiera några termer som vi annars skulle ta för givet

28
00:01:26,770 --> 00:01:28,840
baserat på fredagens föreläsning.

29
00:01:28,840 --> 00:01:32,550
>> Men idag ska vi försöka få dig till den punkt

30
00:01:32,550 --> 00:01:34,990
att inte bara kunna göra något liknande pset 7

31
00:01:34,990 --> 00:01:37,360
men egentligen förstå vad som händer under huven,

32
00:01:37,360 --> 00:01:41,910
särskilt några av de abstraktioner som vi infört i functions.php filen

33
00:01:41,910 --> 00:01:45,780
att göra era liv lite lättare, men så att du i slutändan förstår

34
00:01:45,780 --> 00:01:48,760
så att när stödhjul lossna om några veckor kan du fortfarande överleva

35
00:01:48,760 --> 00:01:53,750
i den verkliga världen och göra det här utan att någon CS50 ram under dig.

36
00:01:53,750 --> 00:01:57,500
Detta $ _SESSION, för dem av er som är bekanta

37
00:01:57,500 --> 00:02:01,960
eller som redan fångat videon på fredag, vad SESSION låt oss göra

38
00:02:01,960 --> 00:02:04,330
i en PHP-baserad webbapplikation?

39
00:02:04,330 --> 00:02:09,650
Detta är en superglobal variabel, vilket betyder att det är likadana i andemening som GET och POST

40
00:02:09,650 --> 00:02:13,970
och några andra, men vad är det här bra för?

41
00:02:13,970 --> 00:02:18,320
>> Vad är SESSION för? Ja. [Elev] Logga in

42
00:02:18,320 --> 00:02:21,040
Ursäkta? [Elev] Loggar in Logga in faktiskt.

43
00:02:21,040 --> 00:02:25,100
I pset 7 vi använder den här sessionen superglobal att underlätta logga in

44
00:02:25,100 --> 00:02:28,600
Och vad är trevligt om denna superglobal är att det är en associativ array.

45
00:02:28,600 --> 00:02:33,190
En associativ array, minns, är bara en array men vars index inte längre vara tal

46
00:02:33,190 --> 00:02:37,670
som 012. De kan vara tal eller de kan vara ännu strängar.

47
00:02:37,670 --> 00:02:44,890
Och så om du har dykt in pset 7 ännu, kanske ni minns att vi lagrar en nyckel som heter ID

48
00:02:44,890 --> 00:02:50,330
insidan av denna associativ array vars värde är något som 123 -

49
00:02:50,330 --> 00:02:53,780
oavsett inloggad användarens ID är.

50
00:02:53,780 --> 00:02:59,470
Motiveringen till detta är att även efter det att användaren har besökt localhost

51
00:02:59,470 --> 00:03:02,720
eller min hemsida mer generellt och sedan har loggat in,

52
00:03:02,720 --> 00:03:07,320
även om de inte klickar på en länk eller återgå till min hemsida i 5 minuter

53
00:03:07,320 --> 00:03:10,730
eller ens en timme eller ens en dag, men de lämnar sina fönster öppna,

54
00:03:10,730 --> 00:03:14,370
via denna superglobal kan jag komma ihåg att de loggat in

55
00:03:14,370 --> 00:03:21,140
>> Med andra ord, gör det mig att lagra något långsiktigt något jag vill om en användare.

56
00:03:21,140 --> 00:03:24,390
Och du kan tänka på det verkligen som en inkarnation av en kundvagn.

57
00:03:24,390 --> 00:03:27,740
Platser som Amazon låter självklart du sätter saker i en kundvagn,

58
00:03:27,740 --> 00:03:32,230
men HTTP protokollet som driver webben, är statslös

59
00:03:32,230 --> 00:03:34,230
i den meningen att när du besöker en webbplats,

60
00:03:34,230 --> 00:03:37,290
för det mesta du inte har någon konstant nätverksanslutning

61
00:03:37,290 --> 00:03:39,270
mellan din webbläsare och servern.

62
00:03:39,270 --> 00:03:42,190
Så snart du har hämtat HTML och JPEG och GIF och allt det där,

63
00:03:42,190 --> 00:03:48,200
anslutningen går bort och du behöver bara en kopia av HTML och allt från servern.

64
00:03:48,200 --> 00:03:53,000
Men om servern vill minnas något om dig,

65
00:03:53,000 --> 00:03:57,580
bördan är på servern att faktiskt registrera denna information.

66
00:03:57,580 --> 00:04:00,130
Och så programmeraren som har kontroll över servern

67
00:04:00,130 --> 00:04:04,400
kan sätta de flesta vad du vill inne i denna superglobal associativ array

68
00:04:04,400 --> 00:04:06,850
och det kommer att vara där nästa gång användaren kommer tillbaka,

69
00:04:06,850 --> 00:04:12,070
oavsett om det är minuter eller till och med dagar senare, om de inte stänger sina fönster,

70
00:04:12,070 --> 00:04:14,360
vid vilken punkt SESSION försvinner.

71
00:04:14,360 --> 00:04:17,779
Så det är flyktig lagring, är det icke-ihållande, och det är tänkt att försvinna

72
00:04:17,779 --> 00:04:22,360
så snart användaren stänger sin webbläsare - inte bara den fliken, ofta hela webbläsaren,

73
00:04:22,360 --> 00:04:24,930
därigenom effektivt logga användaren ut.

74
00:04:24,930 --> 00:04:28,000
Så hur är det här genomförs egentligen?

75
00:04:28,000 --> 00:04:31,360
Låt oss ta en snabb titt på ett enkelt exempel vi tittat på på fredag.

76
00:04:31,360 --> 00:04:33,340
För de som känner var det så enkelt som det.

77
00:04:33,340 --> 00:04:35,910
Detta är en webbsida vars enda syfte i livet är att berätta

78
00:04:35,910 --> 00:04:38,000
hur många gånger jag har besökt den här sidan.

79
00:04:38,000 --> 00:04:41,670
Detta är första gången här på måndag som jag besökte det, så det säger 0 gånger.

80
00:04:41,670 --> 00:04:46,940
>> Men om jag börjar ladda om den här sidan står det 1 gång, 2, 3, 4, 5,

81
00:04:46,940 --> 00:04:49,800
och detta kommer så småningom bara hålla på att räkna upp, upp, upp, upp, upp

82
00:04:49,800 --> 00:04:53,130
för varje gång jag faktiskt på Ladda om den.

83
00:04:53,130 --> 00:04:58,830
Så hur är det arbete? Låt mig gå in i denna fil som heter counter.php.

84
00:04:58,830 --> 00:05:02,490
Den övre delen av det är alla blå kommentarer, men den intressanta delen är här.

85
00:05:02,490 --> 00:05:06,670
På rad 13 vi kallar denna funktion session_start,

86
00:05:06,670 --> 00:05:09,600
och det är bokstavligen allt du behöver göra om du vill ha tillgång

87
00:05:09,600 --> 00:05:13,610
denna speciella superglobal kallas $ _SESSION.

88
00:05:13,610 --> 00:05:17,430
Det gör det möjligt, och vi kommer att se i ett ögonblick hur det är allt möjligt.

89
00:05:17,430 --> 00:05:20,350
I linje 16 meddelande vad jag gör.

90
00:05:20,350 --> 00:05:25,960
Om nyckeln, kallad mot - med andra ord, indexvärdet - "räknare"

91
00:05:25,960 --> 00:05:32,310
finns inuti denna array kallas sessionscookies, vad gör jag med den i raden nedan?

92
00:05:32,310 --> 00:05:36,650
Vad är linje 18 med?

93
00:05:36,650 --> 00:05:40,360
>> [Ohörbart elev svar] Vad är det? [Elev] Lagra värdet. Bra.

94
00:05:40,360 --> 00:05:45,800
Det lagrar det värde som finns i SESSION just nu i en ny lokal temporär variabel,

95
00:05:45,800 --> 00:05:48,250
$ Räknare i gemener.

96
00:05:48,250 --> 00:05:50,770
Lägg märke till att PHP redan är lite lat här.

97
00:05:50,770 --> 00:05:55,550
Märker vi inte har någon omnämnande av int eller float eller string eller något liknande

98
00:05:55,550 --> 00:06:00,480
eftersom PHP är svagt skrivit, där du inte behöver ange vilken typ av en variabel,

99
00:06:00,480 --> 00:06:03,310
och i detta fall här jag inte har ens förklarade det ännu.

100
00:06:03,310 --> 00:06:08,980
Jag förklarar det inne dessa klammerparenteser och till skillnad från C, är detta faktiskt okej.

101
00:06:08,980 --> 00:06:13,800
Oavsett hur djupt kapslade en variabel deklaration är i PHP -

102
00:06:13,800 --> 00:06:16,650
inne i klammerparentes, inuti klammerparentes och liknande -

103
00:06:16,650 --> 00:06:21,230
Det kommer vid denna tidpunkt finns för återstoden av programmet,

104
00:06:21,230 --> 00:06:22,680
på gott och ont.

105
00:06:22,680 --> 00:06:26,930
Så det blir omedelbart globala så snart du definiera det som vi gör här.

106
00:06:26,930 --> 00:06:31,620
>> Annars, om jag inte hittar att det finns något i SESSION superglobal,

107
00:06:31,620 --> 00:06:34,680
Jag tydligen initierar den här variabeln mot 0,

108
00:06:34,680 --> 00:06:37,580
vilket bara förutsatt att användaren aldrig har varit här förut.

109
00:06:37,580 --> 00:06:40,030
Och så detta är naturligtvis att inkrementera räknaren hur?

110
00:06:40,030 --> 00:06:44,480
Jag uppdaterar det värde som finns inuti denna associativ array

111
00:06:44,480 --> 00:06:49,530
genom att ställa det lika oavsett motströms är + 1.

112
00:06:49,530 --> 00:06:53,520
Om jag rulla ner hit till HTML av sidan, det är faktiskt ganska enkelt.

113
00:06:53,520 --> 00:06:58,920
Allt jag har i kroppen denna sida är: "Du har besökt denna webbplats så-och-så gånger."

114
00:06:58,920 --> 00:07:00,350
Och detta är en PHP konstruktion.

115
00:07:00,350 --> 00:07:06,080
Om du gör <? = Motsvarar detta effektivt vilken funktion?

116
00:07:07,920 --> 00:07:12,600
Det är verkligen motsvarar ungefär printf, som vi har sett många gånger i C,

117
00:07:12,600 --> 00:07:15,940
men som ni kanske redan vet från spec i pset 7,

118
00:07:15,940 --> 00:07:20,160
tryck är också en funktion som bara skriver ut något, inte faktiskt använda formatkoder,

119
00:07:20,160 --> 00:07:23,270
och du kan faktiskt säga eko också.

120
00:07:23,270 --> 00:07:27,460
De är alla någonsin så något annorlunda även om nettoeffekten är ytterst densamma.

121
00:07:27,460 --> 00:07:31,270
Så denna användning av likhetstecknet är bara sorts ett elegant sätt att göra det

122
00:07:31,270 --> 00:07:34,910
mer koncist än du annars kunna.

123
00:07:34,910 --> 00:07:38,370
Så det är allt detta platsen gör. Den skriver ut värdet av disken.

124
00:07:38,370 --> 00:07:40,550
Hur allt detta faktiskt händer?

125
00:07:40,550 --> 00:07:43,250
Du kan hämta en vecka sedan vi började titta under huven

126
00:07:43,250 --> 00:07:47,910
på hur en webbsida fungerar genom att använda denna Inspector fliken.

127
00:07:47,910 --> 00:07:51,900
>> Chrome har detta både i Mac-version, Windows-versionen, och även Linux-version,

128
00:07:51,900 --> 00:07:59,510
och Firefox och IE har liknande mekanismer där du har detta inbyggt debugger

129
00:07:59,510 --> 00:08:01,400
insidan av webbläsaren.

130
00:08:01,400 --> 00:08:03,040
Låt oss ta en titt på följande.

131
00:08:03,040 --> 00:08:06,960
Vi har en hel massa flikar här och minns att den vänstra en är Elements,

132
00:08:06,960 --> 00:08:10,700
och oavsett hur godawful HTML och JavaScript i en sida,

133
00:08:10,700 --> 00:08:15,710
ihåg att med elementen fliken du faktiskt kan navigera HTML hierarkiskt

134
00:08:15,710 --> 00:08:17,050
och trevlig och prydligt.

135
00:08:17,050 --> 00:08:19,370
Så om du försöker lära från en webbplats som Google eller Facebook

136
00:08:19,370 --> 00:08:22,370
eller egentligen någon hemsida, inse att du är förmodligen bättre

137
00:08:22,370 --> 00:08:26,360
tittar på källkoden på detta sätt i stället för att visa den råa källa,

138
00:08:26,360 --> 00:08:29,580
som kan vara en enda röra, som vi har sett, särskilt på Googles webbplats.

139
00:08:29,580 --> 00:08:32,220
Så om jag klickar istället på fliken Nätverk här,

140
00:08:32,220 --> 00:08:34,830
låt oss se vad som händer när jag besöker den här sidan.

141
00:08:34,830 --> 00:08:38,669
Låt mig först rensa cacheminnet.

142
00:08:38,669 --> 00:08:43,570
Jag ska gå in på Inställningar i Chrome och sedan gå till historien

143
00:08:43,570 --> 00:08:46,420
och avmarkera alla webbinformation.

144
00:08:46,420 --> 00:08:48,170
Du kan användas för att göra detta för andra ändamål, [skratt]

145
00:08:48,170 --> 00:08:51,990
men när det gäller att utveckla webbplatser, det är faktiskt bra -

146
00:08:51,990 --> 00:08:55,980
om du skrattar du vet. [Skratt]

147
00:08:55,980 --> 00:08:59,310
Det är faktiskt riktigt bra när man utvecklar webbplatser, eftersom verkligheten är

148
00:08:59,310 --> 00:09:04,100
saker som kakor och saker som cachelagrade HTML-filer, cachade JavaScript-filer

149
00:09:04,100 --> 00:09:06,390
kan faktiskt bli en stor huvudvärk, för om någon anledning

150
00:09:06,390 --> 00:09:11,500
webbläsaren beslutar att cacha lite fil och ändå du har gjort ändringar i den filen på servern

151
00:09:11,500 --> 00:09:14,670
men webbläsaren inte riktigt insett att filen har ändrats

152
00:09:14,670 --> 00:09:19,060
och därför egentligen inte ladda ned den även när du klickar på Ladda-knappen,

153
00:09:19,060 --> 00:09:23,210
en av de mest bombsäkert sätt att bara se till att felet inte är med din kod,

154
00:09:23,210 --> 00:09:26,480
Det är med beteendet i webbläsaren, är att gå in här i din webbläsare

155
00:09:26,480 --> 00:09:29,950
och bara rensa hela historien, så att det finns ingen förvirring.

156
00:09:29,950 --> 00:09:33,210
>> Och sedan om du verkligen vill vara paranoid, avslutar webbläsaren, starta om den,

157
00:09:33,210 --> 00:09:35,660
och sedan se till att alla fungerar som förväntat.

158
00:09:35,660 --> 00:09:38,820
Så kort sagt, är clearing cache bra när man gör utvecklingen.

159
00:09:38,820 --> 00:09:40,690
Så här har vi fliken Nätverk.

160
00:09:40,690 --> 00:09:46,020
Jag hade tidigare besökt webbplatsen 9 gånger, men låt mig gå vidare nu och klicka på Uppdatera.

161
00:09:46,020 --> 00:09:47,500
Och jag är tillbaka till 0.

162
00:09:47,500 --> 00:09:52,100
Låt oss faktiskt se hur det är att denna session superglobal genomförs.

163
00:09:52,100 --> 00:09:55,990
Jag ska klicka på 1 HTTP-begäran som gjordes,

164
00:09:55,990 --> 00:09:58,810
och detta felsökning fönstret låter mig titta in i den.

165
00:09:58,810 --> 00:10:01,970
Här ser jag bara svar från servern, vilket inte är intressant.

166
00:10:01,970 --> 00:10:04,030
Jag har sett detta i ett antal olika sätt.

167
00:10:04,030 --> 00:10:06,350
Men vad är tekniskt intressant är rubrikerna.

168
00:10:06,350 --> 00:10:11,770
Om jag bläddra ner här och fokusera på begäran rubriker och klicka på Visa källa,

169
00:10:11,770 --> 00:10:14,400
vad jag kommer att se är bokstavligen HTTP-begäran

170
00:10:14,400 --> 00:10:17,250
som gick bara från min webbläsare till servern,

171
00:10:17,250 --> 00:10:21,400
GET är den avgörande ordet och sedan / counter.php är filnamnet,

172
00:10:21,400 --> 00:10:25,670
HTTP/1.1 är bara den version av HTTP som min webbläsare använder.

173
00:10:25,670 --> 00:10:31,070
Denna linje här är en liten påminnelse från webbläsaren till servern vad namnet på servern är

174
00:10:31,070 --> 00:10:33,020
att man vill prata med.

175
00:10:33,020 --> 00:10:38,200
Och sedan resten av detta är ibland intressant men inte relevant just nu.

176
00:10:38,200 --> 00:10:40,090
>> Detta är bara lite av en nyfikenhet.

177
00:10:40,090 --> 00:10:43,530
Cryptic om denna sträng är, när som helst webbläsaren besöker en webbplats

178
00:10:43,530 --> 00:10:47,110
det informera servern vilken webbläsare du använder

179
00:10:47,110 --> 00:10:50,040
och vilket operativsystem du använder och vilken version av dessa.

180
00:10:50,040 --> 00:10:52,650
Så om du någonsin undrat hur webbplatser som CNN och allt

181
00:10:52,650 --> 00:10:56,860
vet vad de procentsatser är av Mac-användare på nätet, PC-användare,

182
00:10:56,860 --> 00:11:00,820
IE-användare, användare krom och liknande, är det för att alla våra webbläsare

183
00:11:00,820 --> 00:11:04,300
säger varenda webbsida där ute vad vi är.

184
00:11:04,300 --> 00:11:07,410
Det behöver inte nödvändigtvis innehåller personlig information,

185
00:11:07,410 --> 00:11:13,060
men det talar servern vad din IP-adress är och vilken webbläsare och operativsystem du använder.

186
00:11:13,060 --> 00:11:14,720
Så det är där denna information är.

187
00:11:14,720 --> 00:11:19,960
Men vad är mer intressant nu när det gäller dessa sessioner är svarshuvudet.

188
00:11:19,960 --> 00:11:22,530
Låt mig klicka på Visa källa bredvid svar.

189
00:11:22,530 --> 00:11:24,590
Det intressanta här är några saker.

190
00:11:24,590 --> 00:11:27,580
1, vi fick tillbaka en statuskod på 200.

191
00:11:27,580 --> 00:11:29,840
Vi ser aldrig denna statuskod eftersom det betyder allt är bra.

192
00:11:29,840 --> 00:11:32,920
Det betyder bokstavligen okej i motsats till något annat.

193
00:11:32,920 --> 00:11:36,380
Vad är ett nummer vi ibland ser att det är dåligt? [Elev] 404.

194
00:11:36,380 --> 00:11:39,860
404, filen inte hittas, kanske 403 du snavar på redan,

195
00:11:39,860 --> 00:11:43,660
vilket är förbjudet, vilket innebär att du glömde att chmod något, troligen.

196
00:11:43,660 --> 00:11:45,190
Och det finns en massa andra.

197
00:11:45,190 --> 00:11:47,760
>> Här nere är det lite galen.

198
00:11:47,760 --> 00:11:52,340
Jag verkligen bara skrev den här filen för några minuter sedan genom att klistra in den i gedit.

199
00:11:52,340 --> 00:11:57,100
Varför har den här sidan löper ut 1981 innan det verkligen var en webbsida?

200
00:11:58,010 --> 00:12:00,730
Vad händer där?

201
00:12:00,730 --> 00:12:04,390
>> [Ohörbart elev respons] Den tidsstämpel. Men varför?

202
00:12:06,110 --> 00:12:09,120
Det är något godtyckligt, men det är faktiskt bra.

203
00:12:09,120 --> 00:12:15,500
Vad detta säger till min webbläsare är PHP-filen du just begärt redan löpt ut.

204
00:12:15,500 --> 00:12:18,580
I själva verket ut det 30 år sedan.

205
00:12:18,580 --> 00:12:20,260
Men vad betyder det egentligen?

206
00:12:20,260 --> 00:12:22,500
Det betyder bara nästa gång användaren besöker sidan,

207
00:12:22,500 --> 00:12:25,540
antingen genom omlastning eller skriva adressen i adressfältet,

208
00:12:25,540 --> 00:12:28,010
se till att du gå och hämta en ny kopia av den.

209
00:12:28,010 --> 00:12:30,840
Detta är typ av ett exempel på cache busting,

210
00:12:30,840 --> 00:12:33,790
en dum ord som bara innebär att försöka avskräcka webbläsare

211
00:12:33,790 --> 00:12:37,260
från att faktiskt caching HTML som har skickats från en server

212
00:12:37,260 --> 00:12:41,490
så att du inte av misstag slår reload och sedan se samma version av filen.

213
00:12:41,490 --> 00:12:43,730
Du vill verkligen att servern skicka en ny kopia.

214
00:12:43,730 --> 00:12:47,440
Så det faktum att det är 1981 betyder bara att det är vad apparaten är att välja

215
00:12:47,440 --> 00:12:50,280
som en godtycklig tidpunkt i det förflutna.

216
00:12:50,280 --> 00:12:53,380
Men den verkliga saftiga linjen är nu här.

217
00:12:53,380 --> 00:12:57,550
Redan innan 50 du förmodligen vagt bekant med kakor.

218
00:12:57,550 --> 00:13:01,820
Från och med nu, särskilt bland de mindre bekväm eller mittemellan,

219
00:13:01,820 --> 00:13:04,120
Vad är en cookie i din förståelse just nu

220
00:13:04,120 --> 00:13:06,980
även om vi är på väg att göra din förståelse mer teknisk?

221
00:13:08,150 --> 00:13:10,070
Vad är en cookie? Ja.

222
00:13:10,070 --> 00:13:13,890
[Eleven] Information om användaren, som om de har skrivit sitt användarnamn eller något.

223
00:13:13,890 --> 00:13:17,370
>> Bra. Det är information om användaren, oavsett om de har skrivit i sitt användarnamn redan.

224
00:13:17,370 --> 00:13:21,190
Cookies är ett sätt där servrar kan minnas något om en användare.

225
00:13:21,190 --> 00:13:25,810
Och vad en cookie egentligen är en textfil eller någon sekvens av bytes

226
00:13:25,810 --> 00:13:28,340
som är planterad av servern inne i din webbläsare,

227
00:13:28,340 --> 00:13:31,960
och insidan av filen eller bland de byte är någon form av identifierare.

228
00:13:31,960 --> 00:13:35,640
Kanske är det bokstavligen ditt användarnamn, men oftare är det något mer kryptiska utseende

229
00:13:35,640 --> 00:13:43,700
som denna sak här - bo8dal3ct och så vidare - det riktigt stora alfanumerisk sträng

230
00:13:43,700 --> 00:13:47,050
som verkligen är bara tänkt att vara en unik identifierare för dig.

231
00:13:47,050 --> 00:13:49,790
Eller så kan du se det som en slags virtuell handen stämpel.

232
00:13:49,790 --> 00:13:53,020
Om du går till en viss klubb eller en nöjespark, att komma ihåg att du faktiskt har betalat

233
00:13:53,020 --> 00:13:55,850
och gått in, sätter de en liten röd klistermärke på din hand av något slag,

234
00:13:55,850 --> 00:13:59,270
och som påminner människorna vid disken som du redan har betalat

235
00:13:59,270 --> 00:14:01,340
och du kan komma och gå som du vill.

236
00:14:01,340 --> 00:14:04,250
Cookies är lite liknande anda som.

237
00:14:04,250 --> 00:14:08,070
Första gången jag besökte denna webbplats, eftersom jag bara gjorde efter rensa min cache,

238
00:14:08,070 --> 00:14:11,620
webbservern, apparaten i detta fall sätta en stämpel på handen

239
00:14:11,620 --> 00:14:15,030
vars namn PHPSESSID, sessions-ID,

240
00:14:15,030 --> 00:14:18,260
vars värde är detta verkligen lång alfanumerisk sträng.

241
00:14:18,260 --> 00:14:22,470
>> Så det är nu sortens tryckt på min hand, så att nästa gång jag slog ladda

242
00:14:22,470 --> 00:14:25,230
eller manuellt besöka denna URL i en webbläsare,

243
00:14:25,230 --> 00:14:29,230
min webbläsare per definition av HTTP kommer att presentera handen stämpeln

244
00:14:29,230 --> 00:14:31,940
igen och igen och igen.

245
00:14:31,940 --> 00:14:34,550
Så även om servern inte vet nödvändigtvis vem jag är,

246
00:14:34,550 --> 00:14:39,610
de åtminstone veta att jag är samma användare, eller åtminstone närmare bestämt samma webbläsare.

247
00:14:39,610 --> 00:14:45,660
Och så detta är ytterst hur SESSION superglobal genomförs.

248
00:14:45,660 --> 00:14:51,200
Servern har ingen aning om vem du är när du besöker en webbplats för andra eller tredje gången

249
00:14:51,200 --> 00:14:53,410
om du presenterar denna hand stämpel.

250
00:14:53,410 --> 00:14:55,530
Och så fort du presenterar den handen stämpel,

251
00:14:55,530 --> 00:14:59,370
webbservern går i huvudsak till en liten databas över sin egen

252
00:14:59,370 --> 00:15:06,040
och kontroller, okej, jag har sett bara hand stämpel användarens bo8dal3ct och så vidare.

253
00:15:06,040 --> 00:15:09,850
Låt mig se vilken information programmeraren har lagrat

254
00:15:09,850 --> 00:15:12,380
insidan av superglobal om den här användaren,

255
00:15:12,380 --> 00:15:17,000
och låt mig se till att dessa uppgifter är återigen inne i SESSION superglobal

256
00:15:17,000 --> 00:15:19,830
så att programmerare kan åter komma åt dessa data

257
00:15:19,830 --> 00:15:23,360
även om den var inställd några minuter eller timmar sedan.

258
00:15:23,360 --> 00:15:26,150
Så med andra ord, cookies, vilket fick en dålig rap under en tid

259
00:15:26,150 --> 00:15:29,990
på grund av osäkerhet i webbläsare och de kan verkligen kränka vår integritet och allt detta,

260
00:15:29,990 --> 00:15:31,900
de faktiskt har stor nytta för utan dem

261
00:15:31,900 --> 00:15:36,110
skulle du ständigt att logga in på alla Facebook-sida du besöker

262
00:15:36,110 --> 00:15:40,680
eller varje Gmail e-post du läser om webbläsaren inte har något sätt att komma ihåg

263
00:15:40,680 --> 00:15:43,320
att du redan har verifierats.

264
00:15:43,320 --> 00:15:46,640
>> Så på detta sätt cookies skickas fram och tillbaka tvärs över viran.

265
00:15:46,640 --> 00:15:52,470
En annan kuriositet om cookies, speciellt här är att det är helt i klartext.

266
00:15:52,470 --> 00:15:54,930
Det finns ingen kryptering pågår här som helst,

267
00:15:54,930 --> 00:15:57,240
och faktiskt jag använder HTTP för tillfället.

268
00:15:57,240 --> 00:16:00,890
En av våra favoriter ögonblick i CS50, som nu 2 år sedan,

269
00:16:00,890 --> 00:16:04,750
var runt tiden ett verktyg som heter Firesheep kom ut.

270
00:16:04,750 --> 00:16:08,320
Detta var en fri mjukvara som gjordes av en säkerhet forskare

271
00:16:08,320 --> 00:16:13,250
som väckarklocka för samhället att säga hur vedervärdigt genomförts

272
00:16:13,250 --> 00:16:17,900
vissa autentiseringsmekanismer på webben var.

273
00:16:17,900 --> 00:16:22,880
Så för en tid, var Facebook nästan helt över HTTP, ingen HTTPS.

274
00:16:22,880 --> 00:16:25,640
Och även om du har ingen aning om hur krypto fungerar, S säkert

275
00:16:25,640 --> 00:16:27,950
så det betyder att det finns åtminstone någon kryptering.

276
00:16:27,950 --> 00:16:30,610
Facebook har används för att kryptera användarnamn och lösenord,

277
00:16:30,610 --> 00:16:33,560
men så snart du tittat på din petar eller dina meddelanden eller ditt nyhetsflöde,

278
00:16:33,560 --> 00:16:35,360
allt som var okrypterat.

279
00:16:35,360 --> 00:16:37,870
Så var Gmail tills bara ett år eller 2 sedan.

280
00:16:37,870 --> 00:16:41,100
Varje gång du inloggad, ja, de använde säker kryptering

281
00:16:41,100 --> 00:16:44,300
men därefter gjorde de inte. Och varför skulle det vara?

282
00:16:44,300 --> 00:16:49,210
Varför inte bara använda kryptografi hela tiden i användningsfall som detta?

283
00:16:49,210 --> 00:16:53,700
Vad är det? Jag tror att jag hörde något. [Elev] Hastighet.

284
00:16:53,700 --> 00:16:56,250
Hastighet, eller hur? Det finns vägar runt detta.

285
00:16:56,250 --> 00:16:59,610
Men om du bara typ av tänka på det logiskt, om du krypterar något,

286
00:16:59,610 --> 00:17:01,820
du måste göra åtminstone lite mer arbete.

287
00:17:01,820 --> 00:17:05,460
I pset 2 när du genomfört Caesar eller Vigenère eller ens knäcka,

288
00:17:05,460 --> 00:17:07,760
bara skriva ut en sträng är relativt lätt.

289
00:17:07,760 --> 00:17:12,040
Kryptera och sedan skriva ut en sträng minimalt kräver lite mer arbete.

290
00:17:12,040 --> 00:17:14,520
>>  För super populära webbplatser som Google och Facebook,

291
00:17:14,520 --> 00:17:18,839
Om du måste göra mer arbete för varje användare för varje enskild webbsida de besöker,

292
00:17:18,839 --> 00:17:20,520
som tar bara mer CPU-tid.

293
00:17:20,520 --> 00:17:22,920
Och om du behöver mer CPU-tid, kanske du behöver fler servrar,

294
00:17:22,920 --> 00:17:24,270
vilket innebär att du kanske behöver mer pengar.

295
00:17:24,270 --> 00:17:27,579
Och så i många år detta bara verkligen inte de bästa metoderna.

296
00:17:27,579 --> 00:17:31,440
Folk skulle använda SSL-kryptering endast när de behövde.

297
00:17:31,440 --> 00:17:34,960
Men det visade sig, och som den här mannen med Firesheep gjorde Super Clear,

298
00:17:34,960 --> 00:17:37,920
när ni som för närvarande på Facebook just nu -

299
00:17:37,920 --> 00:17:39,880
Av nyfikenhet, låt oss se om du fess upp.

300
00:17:39,880 --> 00:17:42,620
Om du är på Facebook just nu i någon flik, även om det inte är förgrunden,

301
00:17:42,620 --> 00:17:46,610
är din webbadress HTTP eller HTTPS?

302
00:17:46,610 --> 00:17:50,560
[Flera studenter] S. S? [Skratt]

303
00:17:50,560 --> 00:17:55,510
Okej. Någon HTTP? Bara 1? Okej.

304
00:17:55,510 --> 00:17:58,940
Så vi alla kan hacka den killen Facebook-konto just nu.

305
00:17:58,940 --> 00:18:04,100
För det mesta har detta blivit aktiverad som standard, åtminstone i vissa webbplatser.

306
00:18:04,100 --> 00:18:08,120
Och lång historia kort, om din webbtrafik är inte krypterad,

307
00:18:08,120 --> 00:18:12,960
inte bara går HTML fram och tillbaka över WiFis okrypterade,

308
00:18:12,960 --> 00:18:16,760
så gå saker som kakor och tillbaka hela luften

309
00:18:16,760 --> 00:18:18,940
utan någon form av kryptering.

310
00:18:18,940 --> 00:18:23,540
Så om du har bara lite programmering kunniga eller lite googla kunskaper

311
00:18:23,540 --> 00:18:27,410
att hitta gratis programvara som gör detta, är att sitta allt du behöver göra i Starbucks

312
00:18:27,410 --> 00:18:30,680
eller sitta på en flygplats där det finns generellt okrypterade WiFi

313
00:18:30,680 --> 00:18:36,070
och bara titta på för sökord som Set-Cookie: eller PHPSESSID

314
00:18:36,070 --> 00:18:39,300
för om du har den tekniska kunniga att bara titta på WiFi

315
00:18:39,300 --> 00:18:43,010
för alla de bitar som flödet genom luften för detta mönster,

316
00:18:43,010 --> 00:18:50,840
Du kan då säga att killen PHPSESSID råkar vara bo8dal och så vidare.

317
00:18:50,840 --> 00:18:53,890
Och sedan igen om du är tillräckligt tekniskt kunniga eller har rätt verktyg,

318
00:18:53,890 --> 00:18:58,890
Du kan sedan bara konfigurera din egen webbläsare för att börja presentera den handen stämpel

319
00:18:58,890 --> 00:19:05,030
att Facebook.com och Facebook är bara kommer att anta att du är den där killen

320
00:19:05,030 --> 00:19:09,880
eftersom alla de vet inte vem du är, men att du har denna unika identifierare.

321
00:19:09,880 --> 00:19:14,650
Så om du stjäl den unika identifieraren och presentera den till webbservern som din egen,

322
00:19:14,650 --> 00:19:16,860
de bara kommer att visa dig den personens nyhetsflöde

323
00:19:16,860 --> 00:19:18,980
eller den personens meddelanden eller petar.

324
00:19:18,980 --> 00:19:23,190
>> Och jag skulle Google nu hur man aktiverar HTTPS för Facebook kanske.

325
00:19:23,190 --> 00:19:25,150
Men det är verkligen så enkelt är det.

326
00:19:25,150 --> 00:19:27,660
Och så Facebook och Google och liknande har fått riktigt bra på detta,

327
00:19:27,660 --> 00:19:31,870
men håll utkik allt mer för alla webbplatser du besöker som inte använder HTTP

328
00:19:31,870 --> 00:19:35,020
och har någon form av känslig information på dem,

329
00:19:35,020 --> 00:19:37,490
oavsett om det är ekonomiska eller personliga eller liknande.

330
00:19:37,490 --> 00:19:43,180
Om de inte använder detta, kan mycket möjligt cookies som denna är mycket lätt stulna

331
00:19:43,180 --> 00:19:46,270
och sedan smidda, och det är precis vad Firesheep gjorde.

332
00:19:46,270 --> 00:19:48,250
Du behövde inte vara en programmerare.

333
00:19:48,250 --> 00:19:51,680
Allt du behövde göra var att ha en Internet-anslutning, ladda ner denna gratis verktyg,

334
00:19:51,680 --> 00:19:56,490
och vad det skulle göra är att du loggar in och sedan skulle visa dig Facebook namnen

335
00:19:56,490 --> 00:20:00,170
av alla i Sanders, i detta demonstration omkring dig

336
00:20:00,170 --> 00:20:03,260
och allt du hade att göra var klicka på deras namn och mjukvaran automatiserat processen

337
00:20:03,260 --> 00:20:05,970
av sniffning som cookie presentera det på Facebook som din egen,

338
00:20:05,970 --> 00:20:07,990
och voila, du loggat in

339
00:20:07,990 --> 00:20:11,190
Så det här är en annan av de "gör inte detta" officiellt.

340
00:20:11,190 --> 00:20:14,660
Om du har en egen hemnätverk och du vill att mixtra, med alla medel,

341
00:20:14,660 --> 00:20:17,530
men inser att detta inte passera linjen på en universitetsmiljö.

342
00:20:17,530 --> 00:20:20,030
>> Men målet här är verkligen betona inte hur man gör detta

343
00:20:20,030 --> 00:20:22,320
men hur det ska skydda mot dessa typer av saker.

344
00:20:22,320 --> 00:20:26,180
Och den triviala lösningen här, även om det i sig är bristfällig,

345
00:20:26,180 --> 00:20:31,360
är att verkligen minska användningen av webbplatser som inte använder HTTPS ständigt.

346
00:20:31,360 --> 00:20:34,520
Så som Facebook och Google har allt kryssrutor

347
00:20:34,520 --> 00:20:36,200
där du kan välja att den här sortens saker,

348
00:20:36,200 --> 00:20:40,000
och bankerna har haft detta i flera år av liknande skäl.

349
00:20:40,000 --> 00:20:43,580
Så bara en liten bit av en rädsla faktor om vi kan. Men det är det i ett nötskal.

350
00:20:43,580 --> 00:20:46,420
Det är så en server minns vem du är.

351
00:20:46,420 --> 00:20:50,760
Och så snart de kan komma ihåg vem du är, kan de komma ihåg någonting om dig

352
00:20:50,760 --> 00:20:56,140
att programmeraren har lagrat inuti denna speciella superglobal kallas $ _SESSION.

353
00:20:56,140 --> 00:20:59,750
Och för pset 7 vi använder det trivialt bara komma ihåg en int,

354
00:20:59,750 --> 00:21:02,260
nämligen ett unikt ID för den användare som har loggat in,

355
00:21:02,260 --> 00:21:05,880
så att vi vet att de har varit där förut.

356
00:21:05,880 --> 00:21:12,450
Har du frågor så om sessioner eller cookies eller liknande?

357
00:21:12,450 --> 00:21:15,130
Firesheep fungerar inte lika bra längre,

358
00:21:15,130 --> 00:21:18,310
och du måste sätta din dator till en speciell promiskuöst läge

359
00:21:18,310 --> 00:21:20,700
så att du faktiskt lyssnar efter trafik förutom själva.

360
00:21:20,700 --> 00:21:23,940
Så om du nu ladda ner Firesheep, inser att det är inte riktigt så enkelt

361
00:21:23,940 --> 00:21:26,850
som det en gång var att visa.

362
00:21:26,850 --> 00:21:29,070
Okej. Och gör det inte i Sanders. Gör det hemma.

363
00:21:29,070 --> 00:21:30,890
Databaser.

364
00:21:30,890 --> 00:21:33,580
En av de saker som vi gjorde i pset 7 mycket medvetet

365
00:21:33,580 --> 00:21:37,780
var vi ge dig en tabell exempeldatabas för användare som har vissa användarnamn,

366
00:21:37,780 --> 00:21:41,020
Vissa användarnamn och vissa krypterade lösenord däri.

367
00:21:41,020 --> 00:21:44,520
Och som du ser, om du inte redan har, du kommer att behöva ändra tabellen lite.

368
00:21:44,520 --> 00:21:47,710
Du kommer att behöva lägga till några cache för varje användare i den tabellen,

369
00:21:47,710 --> 00:21:51,130
och du kommer att behöva lägga en annan historia bord, en portföljer bord,

370
00:21:51,130 --> 00:21:53,310
eller kanske kalla det något annat.

371
00:21:53,310 --> 00:21:56,740
Men när det gäller att tänka på hur man gör detta, låt oss öppna detta verktyg

372
00:21:56,740 --> 00:22:00,570
som vi på fredag, men om främmande kommer apparaten med ett verktyg

373
00:22:00,570 --> 00:22:04,680
kallas phpMyAdmin som tillfälligtvis är skriven i PHP,

374
00:22:04,680 --> 00:22:07,950
men dess syfte i livet, när jag loggar in här som jharvard med crimson,

375
00:22:07,950 --> 00:22:15,160
är att ge mig ett användarvänligt sätt att se och ändra min databas.

376
00:22:15,160 --> 00:22:18,040
>> Den databas som jag kör på apparaten heter MySQL.

377
00:22:18,040 --> 00:22:23,420
Detta är mycket populär, och det är ett gratis open source databas som är underbart lätt att använda,

378
00:22:23,420 --> 00:22:25,620
särskilt med främre ändar så här.

379
00:22:25,620 --> 00:22:29,350
Vad detta verktyg tillåter mig att göra, till exempel, är säcken runt borden.

380
00:22:29,350 --> 00:22:30,890
Låt mig gå vidare och göra det.

381
00:22:30,890 --> 00:22:36,580
På fredag ​​har vi skapat en tabell som heter studenter som var super enkelt.

382
00:22:36,580 --> 00:22:41,680
Det hade 3 kolumner - ID, namn och e-post - och jag manuellt in ett par rader

383
00:22:41,680 --> 00:22:44,420
som David och Mike i detta speciella exempel.

384
00:22:44,420 --> 00:22:47,290
Låt oss ta detta lite längre, och låt oss anta att vi vill minnas mer

385
00:22:47,290 --> 00:22:49,660
än bara namn och e-post om en användare.

386
00:22:49,660 --> 00:22:53,090
Låt mig klicka Struktur upp här på toppen.

387
00:22:53,090 --> 00:22:55,440
Och återigen, promenader pset dig genom de nödvändiga stegen här,

388
00:22:55,440 --> 00:22:58,150
så oroa dig inte om en del av detta är lite snabbt.

389
00:22:58,150 --> 00:22:59,690
Sen ska jag klicka här.

390
00:22:59,690 --> 00:23:02,270
Jag ska lägga till några antal kolumner efter e-post

391
00:23:02,270 --> 00:23:04,130
eftersom jag vill lägga till något i stil med huset.

392
00:23:04,130 --> 00:23:06,640
Jag glömde att spela in en student hus.

393
00:23:06,640 --> 00:23:11,400
Låt mig klicka på Go, och nu har vi denna form som tyvärr är lite bred från vänster till höger,

394
00:23:11,400 --> 00:23:13,710
men jag ska ringa namnet på detta fält hus,

395
00:23:13,710 --> 00:23:16,050
och sedan typ jag har nu att välja.

396
00:23:16,050 --> 00:23:18,870
Så låt oss ta en kort pratstund om de olika typerna i MySQL

397
00:23:18,870 --> 00:23:24,590
eftersom medan PHP är svagt skrivit och det slags spelar snabbt och lös med typer,

398
00:23:24,590 --> 00:23:29,430
i en databas, särskilt det är super viktigt att faktiskt använda skriva till din fördel

399
00:23:29,430 --> 00:23:33,260
eftersom en av de saker som MySQL och andra motorer databas kan göra för dig

400
00:23:33,260 --> 00:23:37,910
är att se till att du inte lägger falska data i din databas.

401
00:23:37,910 --> 00:23:41,850
Detta är en slags fri felkontroll tillgängliga för dig.

402
00:23:41,850 --> 00:23:46,250
>> För hus vi självklart inte vill att det ska vara en int som är en 32-bitars värde i MySQL.

403
00:23:46,250 --> 00:23:49,810
Vi talade kort på fredag ​​om varchar, som står för variabel längd röding.

404
00:23:49,810 --> 00:23:54,720
Vad är det här? Detta gör att du kan ange att du vill att detta ska vara en sträng av något slag.

405
00:23:54,720 --> 00:23:56,840
Du vet inte riktigt i förväg hur lång tid det är,

406
00:23:56,840 --> 00:24:00,100
så vi godtyckligt säga ett hus namn kan vara 255 tecken,

407
00:24:00,100 --> 00:24:04,190
men du kan gå med 32, 64 - valfritt antal verkligen.

408
00:24:04,190 --> 00:24:10,700
Men fördelen med att använda en varchar över ett fält som heter röding är vad?

409
00:24:10,700 --> 00:24:15,110
Bara intuitivt om jag bläddra ner hit, märker att det finns röding och det finns varchar.

410
00:24:15,110 --> 00:24:19,520
Varchar är variabel längd char, char är en fast längd röding.

411
00:24:19,520 --> 00:24:24,730
Så baseras enbart på den definitionen, är vad fördel eller nackdel för vart och ett av dessa?

412
00:24:24,730 --> 00:24:30,490
Med andra ord, vem bryr sig om skillnaden, eller varför ska du bry dig?

413
00:24:31,660 --> 00:24:35,750
>> Ja. [Elev] Varchar har mer flexibilitet men tar upp mer minne.

414
00:24:35,750 --> 00:24:40,730
Bra. Varchar tar upp mer - Låt oss se. Jag är inte säker på om jag hörde det rätt.

415
00:24:40,730 --> 00:24:42,360
Kan du säga det en gång till?

416
00:24:42,360 --> 00:24:45,850
[Elev] Jag sa varchar förmodligen har mer flexibilitet, men det tar upp mer minne.

417
00:24:45,850 --> 00:24:51,170
Intressant. Okej. Varchar ger förmodligen dig mer flexibilitet, men tar upp mer minne.

418
00:24:51,170 --> 00:24:53,220
Det senare är inte nödvändigtvis sant.

419
00:24:53,220 --> 00:24:56,290
Det beror på sammanhanget, men låt oss återkomma till detta.

420
00:24:56,290 --> 00:25:03,230
>> [Ohörbart elev svar] Exakt.

421
00:25:03,230 --> 00:25:06,900
Det är faktiskt så att röding normalt kommer att använda mer minne

422
00:25:06,900 --> 00:25:10,950
eftersom en röding, som i C, är som en sträng, det är en rad tecken.

423
00:25:10,950 --> 00:25:13,690
Så om du säger en röding fält av längd 255,

424
00:25:13,690 --> 00:25:16,910
databasen bokstavligen kommer att ge dig 255 tecken.

425
00:25:16,910 --> 00:25:22,290
Och om huset hamnar är Mather och 6 tecken totalt,

426
00:25:22,290 --> 00:25:25,090
du slösar över 200 tecken.

427
00:25:25,090 --> 00:25:29,640
>> Så en varchar effektivt använder endast så många tecken som behövs

428
00:25:29,640 --> 00:25:31,590
upp till ett maximalt belopp.

429
00:25:31,590 --> 00:25:35,470
Men priset du betalar är faktiskt prestanda, potentiellt.

430
00:25:35,470 --> 00:25:39,740
Om du vet i förväg att alla dina strängar kommer att vara 8 tecken -

431
00:25:39,740 --> 00:25:43,090
till exempel, anta att du behöver lösenord av längd 8 -

432
00:25:43,090 --> 00:25:47,350
Fördelen med att använda en röding fält ibland, men inte ofta,

433
00:25:47,350 --> 00:25:51,100
är att ange en fast längd för något som ett lösenord

434
00:25:51,100 --> 00:25:53,300
för nu databasen kan vara ännu smartare.

435
00:25:53,300 --> 00:25:58,160
Om den vet att varje röding fält, är varje sträng i en kolonn på samma längd,

436
00:25:58,160 --> 00:26:00,780
du får tillbaka funktionen av random access.

437
00:26:00,780 --> 00:26:05,110
Du kan hoppa runt mellan de olika röding fält i databasen tabellen

438
00:26:05,110 --> 00:26:07,940
eftersom tänka på en databas som rader och kolumner.

439
00:26:07,940 --> 00:26:11,670
Så om var och en av strängarna har samma längd,

440
00:26:11,670 --> 00:26:17,820
du vet att den första är vid byte 0, är ​​nästa en vid byte 8

441
00:26:17,820 --> 00:26:20,240
och därefter 16 och därefter 24 och så vidare.

442
00:26:20,240 --> 00:26:24,500
Så om alla strängarna är av samma längd, kan du hoppa runt mycket mer effektivt.

443
00:26:24,500 --> 00:26:26,710
Så det kan vara en fördel när det gäller prestanda,

444
00:26:26,710 --> 00:26:29,420
men oftast behöver du inte lyxen att veta i förväg,

445
00:26:29,420 --> 00:26:32,170
så en varchar är vägen att gå.

446
00:26:32,170 --> 00:26:36,030
Här är en annan detalj som även Facebook sprang in så småningom.

447
00:26:36,030 --> 00:26:39,670
Ints är stor, och vi typ av använda dem som standard varje gång vi vill ha ett nummer,

448
00:26:39,670 --> 00:26:41,750
men det är bara 32 bitar.

449
00:26:41,750 --> 00:26:46,210
>> Och även om Facebook inte riktigt har 4 miljarder användare nu,

450
00:26:46,210 --> 00:26:48,680
Det finns definitivt en del människor där ute med flera konton

451
00:26:48,680 --> 00:26:50,960
eller konton som öppnats och sedan stängts,

452
00:26:50,960 --> 00:26:55,130
och så Facebook själv tror jag för några år sedan hade övergången från int

453
00:26:55,130 --> 00:27:00,010
att, som träffande kallas, bigint, som ligger bara 64 bitar i stället.

454
00:27:00,010 --> 00:27:02,230
Så detta är för en design beslut.

455
00:27:02,230 --> 00:27:06,570
Du skulle vara otroligt lycklig om din slutliga projektet blir start,

456
00:27:06,570 --> 00:27:10,010
har ger 4 miljarder och 1 användare, eller ta,

457
00:27:10,010 --> 00:27:13,200
i vilket fall med Ints kan vara lite kortsiktigt.

458
00:27:13,200 --> 00:27:16,230
Men i verkligheten är dina användare tabellen förmodligen bra med Ints.

459
00:27:16,230 --> 00:27:19,340
Men för något som pset 7, liksom din historia tabellen,

460
00:27:19,340 --> 00:27:23,700
du kan ha tusentals, miljontals användare om du utvecklas till etrade.com.

461
00:27:23,700 --> 00:27:26,020
Så medan du kanske inte har mer än 4 miljarder användare,

462
00:27:26,020 --> 00:27:30,070
de användare du har kan ha mer än 4 miljarder transaktioner över tiden -

463
00:27:30,070 --> 00:27:33,200
köper och säljer och saker i deras historia.

464
00:27:33,200 --> 00:27:38,090
Så om du räknar med - igen, det är bra problem att ha om du har så mycket information -

465
00:27:38,090 --> 00:27:40,920
om du räknar data som överstiger storleken på en int,

466
00:27:40,920 --> 00:27:47,740
gå med något som bigint är en riktning som inte tillräckligt ofta antagits av formgivare

467
00:27:47,740 --> 00:27:49,710
eftersom människor siffra som inte kommer att vara ett problem,

468
00:27:49,710 --> 00:27:51,930
men det är det lätt att välja något större än så.

469
00:27:51,930 --> 00:27:55,380
Decimal vi använder i pset 7, som anger fasta precision

470
00:27:55,380 --> 00:27:59,840
så att du kan undvika de problem som rör flöten och dubblar och reals och liknande.

471
00:27:59,840 --> 00:28:02,440
>> Och sedan finns en del andra områden här. Vi ska vifta våra händer på dem i viss utsträckning.

472
00:28:02,440 --> 00:28:07,270
Men datum, tider har alla en föreskriven form i MySQL,

473
00:28:07,270 --> 00:28:10,830
och fördelen med att lagra datum som datum och inte varchars

474
00:28:10,830 --> 00:28:15,730
innebär att databasen kan faktiskt formatera dem i olika format,

475
00:28:15,730 --> 00:28:18,800
om en amerikansk format eller europeiskt format eller liknande - men du vill ha den -

476
00:28:18,800 --> 00:28:22,700
mycket mer effektivt än om det var bara några generiska varchar.

477
00:28:22,700 --> 00:28:25,150
Och sedan finns någon annan binär, varbinary, blobbar.

478
00:28:25,150 --> 00:28:28,580
Dessa är binära stora objekt, och du kan även lagra binära data

479
00:28:28,580 --> 00:28:30,750
liksom geometriska data i en databas.

480
00:28:30,750 --> 00:28:34,350
Men för oss kommer vi vanligtvis bryr oss om Ints och varchars och liknande.

481
00:28:34,350 --> 00:28:36,230
Låt oss avsluta det här exemplet med huset.

482
00:28:36,230 --> 00:28:40,030
Hus ska jag godtyckligt säga att vara 255 tecken.

483
00:28:40,030 --> 00:28:42,850
Sedan standardvärde vi kunde göra detta.

484
00:28:42,850 --> 00:28:47,440
Vi kunde som standard sätta alla i Mather House, till exempel.

485
00:28:47,440 --> 00:28:49,710
Det är så vi kan ange att databasen

486
00:28:49,710 --> 00:28:52,460
bör se till att någon alltid har ett värde. Men jag lämnar det vara.

487
00:28:52,460 --> 00:28:55,270
Faktum är att för människor som lever utanför campus och inte i ett hus,

488
00:28:55,270 --> 00:28:59,590
kanske jag vill verkligen att specificera att standardvärdet för huset är NULL,

489
00:28:59,590 --> 00:29:04,890
och då måste jag markera rutan och berätta databasen är det okej om användarens huset är NULL.

490
00:29:04,890 --> 00:29:07,270
>> Återigen, detta är en annan försvarsmekanism kan införa

491
00:29:07,270 --> 00:29:10,590
så du behöver inte ens lägga den i din PHP-kod nödvändigtvis.

492
00:29:10,590 --> 00:29:14,630
Databasen kommer att se till att saker och ting är eller inte är NULL.

493
00:29:14,630 --> 00:29:17,310
Och sedan slutligen attribut.

494
00:29:17,310 --> 00:29:18,920
Ingen av dessa är riktigt relevanta.

495
00:29:18,920 --> 00:29:22,880
Binary, osignerad - ingen av dem är relevanta för en varchar.

496
00:29:22,880 --> 00:29:24,220
Index.

497
00:29:24,220 --> 00:29:27,320
Vet någon eller komma ihåg eller har en gissning om vad ett index är

498
00:29:27,320 --> 00:29:29,510
för något som huset?

499
00:29:29,510 --> 00:29:35,240
Detta är också faktiskt en viktig och relativt lätt konstruktion beslut.

500
00:29:35,240 --> 00:29:39,200
För dem som ännu inte sett den, på fredag ​​vi pratade kort om primärnycklar.

501
00:29:39,200 --> 00:29:43,240
I en databastabell, är en primärnyckel fältet eller kolumnen

502
00:29:43,240 --> 00:29:46,270
som identifierar rader i tabellen.

503
00:29:46,270 --> 00:29:49,150
Så i den aktuella tabellen har vi ID, vi har namn och e-post.

504
00:29:49,150 --> 00:29:52,050
Vilken av dessa är den bästa kandidaten för att vara en primärnyckel,

505
00:29:52,050 --> 00:29:55,810
vars uppgift är att identifiera rader?

506
00:29:55,810 --> 00:29:57,530
Förmodligen ID.

507
00:29:57,530 --> 00:29:59,930
Förmodligen skulle vi kunna använda också vad då?

508
00:29:59,930 --> 00:30:02,860
Kanske kan du använda e-post på grund i teorin är det unikt

509
00:30:02,860 --> 00:30:05,380
såvida personer delar e-postkonton.

510
00:30:05,380 --> 00:30:09,980
Men verkligheten är att om du använder ett numeriskt ID som 1234,

511
00:30:09,980 --> 00:30:14,170
det är bara 32 bitar, medan en e-postadress kan vara så många byte eller här många byte.

512
00:30:14,170 --> 00:30:16,610
Så när det gäller effektivitet för unika identifierare,

513
00:30:16,610 --> 00:30:19,270
det brukar vara god praxis att bara använda en int

514
00:30:19,270 --> 00:30:23,090
även om du har någon sträng kandidat som du kan hävdas använda.

515
00:30:23,090 --> 00:30:26,760
>> För något som huset bör detta inte vara en primärnyckel

516
00:30:26,760 --> 00:30:30,770
för då bara 1 person kunde leva i Mather och 1 person i Currier och liknande.

517
00:30:30,770 --> 00:30:32,790
På samma sätt bör det inte vara unik.

518
00:30:32,790 --> 00:30:37,830
Skillnaden mellan primär och unikt är att i fallet med vår nuvarande bord,

519
00:30:37,830 --> 00:30:42,620
ID skulle vara primär men e-post är inte primärt av den anledningen som vi just nämnde -

520
00:30:42,620 --> 00:30:44,740
prestanda - men det bör ändå vara unikt.

521
00:30:44,740 --> 00:30:47,200
Så du kan fortfarande upprätthålla unika utan att göra anspråk

522
00:30:47,200 --> 00:30:49,520
att det är en super betydelsefullt område.

523
00:30:49,520 --> 00:30:52,610
Men den här är ganska bra: Index.

524
00:30:52,610 --> 00:30:56,180
Om du vet på förhand för din sista projekt, pset 7, eller i allmänhet,

525
00:30:56,180 --> 00:30:59,480
att detta fält huset kommer att vara något du söker på en hel

526
00:30:59,480 --> 00:31:01,910
med SELECT sökord eller något annat,

527
00:31:01,910 --> 00:31:05,180
då kan du förebyggande syfte tala om databasen för att arbeta sin magi

528
00:31:05,180 --> 00:31:10,510
och se till att det skapar i minnet någon fancy datastrukturer behövs

529
00:31:10,510 --> 00:31:13,770
att påskynda sökningar baserade på huset.

530
00:31:13,770 --> 00:31:17,860
Kanske kommer det att använda en hash-tabell, kanske det kommer att använda en länkad lista.

531
00:31:17,860 --> 00:31:21,260
I verkligheten, det tenderar att använda ett träd, som kallas ofta en struktur en B-träd -

532
00:31:21,260 --> 00:31:24,090
inte ett binärt träd, men en B-träd - som är ett mycket brett träd

533
00:31:24,090 --> 00:31:27,370
som du kan se i en klass som CS124, data strukturer klassen.

534
00:31:27,370 --> 00:31:31,800
Men kort sagt, behöver du inte oroa dig för att när du använder smarta databasprogram.

535
00:31:31,800 --> 00:31:35,890
Du kan bara säga det, "Index detta fält så att jag kan söka på det mer effektivt."

536
00:31:35,890 --> 00:31:40,250
>> Om du lämnar ut och du försöker söka efter alla i databasen som bor i Mather,

537
00:31:40,250 --> 00:31:42,710
kommer det att överlåta till en linjär sökning.

538
00:31:42,710 --> 00:31:45,360
Och om du har 6.000 undergrads alla lever i vissa hus,

539
00:31:45,360 --> 00:31:47,900
du kommer att söka igenom hela tabellen för att hitta Matherites,

540
00:31:47,900 --> 00:31:52,190
medan om du säger Index, förhoppningsvis blir det något som liknar en logaritmisk sökning

541
00:31:52,190 --> 00:31:54,510
att hitta dessa typer av studenter.

542
00:31:54,510 --> 00:31:56,750
Detta är bara en fri funktion för att aktivera,

543
00:31:56,750 --> 00:31:59,530
även om det kommer till ett pris av en viss mängd utrymme.

544
00:31:59,530 --> 00:32:02,690
Slutligen automatisk ökning, detta AI område,

545
00:32:02,690 --> 00:32:05,830
vilket betyder bara om det är en int och du inte vill bry att öka det själv

546
00:32:05,830 --> 00:32:07,570
varje gång det finns en ny användare, kontrollera att,

547
00:32:07,570 --> 00:32:11,910
och varje användare som får in kommer automatiskt att få ett nytt ID.

548
00:32:11,910 --> 00:32:15,620
Låt oss klicka på Spara och nu ska vi hitta fel med denna design.

549
00:32:15,620 --> 00:32:20,200
Om jag går in Bläddra, att bägge Mike och mitt hus är NULL.

550
00:32:20,200 --> 00:32:22,420
Jag kan använda phpMyAdmin för att redigera det manuellt.

551
00:32:22,420 --> 00:32:25,110
Jag kan gå in här och skriv in Mather och sedan trycka Enter,

552
00:32:25,110 --> 00:32:27,740
och nu märker bordet är olika.

553
00:32:27,740 --> 00:32:29,270
Men märker jag kunde göra något annat också.

554
00:32:29,270 --> 00:32:33,530
Davids ID är 1, så phpMyAdmin igen är bara ett administrativt verktyg;

555
00:32:33,530 --> 00:32:35,970
detta är inte något dina användare någonsin kommer att se.

556
00:32:35,970 --> 00:32:38,810
Så om jag klickar i stället SQL fliken uppe -

557
00:32:38,810 --> 00:32:41,450
och igen, kommer pset 7 introducera dig till flera av dessa frågor -

558
00:32:41,450 --> 00:32:45,260
Jag kan manuellt köra SQL strukturerade kommandot Query Language

559
00:32:45,260 --> 00:32:56,410
UPPDATERING användare SET hus = 'Pfoho' där id = 1.

560
00:32:56,410 --> 00:33:00,830
Dessa SQL-frågor är fint nog, ganska läsbar från vänster till höger.

561
00:33:00,830 --> 00:33:04,350
Uppdatera användare tabellen, ställ in område som kallas huset till Pfoho

562
00:33:04,350 --> 00:33:06,830
där användarens ID är 1.

563
00:33:06,830 --> 00:33:11,480
Eller jag kan även göra där e = 'malan@harvard.edu ".

564
00:33:11,480 --> 00:33:14,860
Så länge som identifierar mig, skulle det fungera lika bra.

565
00:33:14,860 --> 00:33:18,810
Men id tenderar att vara högre prestanda, så låt oss göra det.

566
00:33:18,810 --> 00:33:22,950
Låt oss klicka på Gå. Okej, existerar lecture.users inte. Vad är mitt fel?

567
00:33:22,950 --> 00:33:26,220
Vad är bordet egentligen kallas här?

568
00:33:26,220 --> 00:33:28,770
Det kallas studenter bara för att det är vad vi gjorde upp här uppe till vänster.

569
00:33:28,770 --> 00:33:31,860
Det kallas studenter, inte användare. Så på Gå nu.

570
00:33:31,860 --> 00:33:34,330
1 rad påverkas. Fråga tog 0,01 sekunder.

571
00:33:34,330 --> 00:33:38,010
Om jag klickar på Bläddra nu, nu Malan liv i Pfoho.

572
00:33:38,010 --> 00:33:42,070
Så det är en annan smak av SQL, men pset kommer att gå igenom lite mer av det.

573
00:33:42,070 --> 00:33:44,710
>> Det finns en dum beslut jag har redan gjort här.

574
00:33:44,710 --> 00:33:47,820
Jag skulle vilja påstå att denna databas design är ineffektiv

575
00:33:47,820 --> 00:33:51,650
eftersom ju fler människor jag lägger till studenter tabellen,

576
00:33:51,650 --> 00:33:54,730
ju fler vi börjar jag lägga till, desto mer av TF jag börjar lägga,

577
00:33:54,730 --> 00:33:58,320
vi kommer att börja se vad Uppsägningar i tabellen?

578
00:34:00,840 --> 00:34:06,020
>> Ja. [Elev] Ser att det är i studenter, vi använder samma [ohörbart]

579
00:34:06,020 --> 00:34:07,360
Samma - Just det, precis.

580
00:34:07,360 --> 00:34:10,400
Så om 400 personer bor i Mather, ge eller ta,

581
00:34:10,400 --> 00:34:15,000
småningom denna tabell kommer att få 400 rader som säger "Mather", "Mather,"

582
00:34:15,000 --> 00:34:16,590
"Mather", "Mather", "Mather."

583
00:34:16,590 --> 00:34:19,820
Vi slösar alla dessa bytes, och det finns ett par takeaways där.

584
00:34:19,820 --> 00:34:23,080
1, finns det galna hörnet fall om någon betalar en massa pengar

585
00:34:23,080 --> 00:34:25,949
och döper Mather, har vi nu ändra hela vår databastabell.

586
00:34:25,949 --> 00:34:29,730
Det kommer inte att hända ofta, men Pfoho kallades en gång North House 15 år sedan,

587
00:34:29,730 --> 00:34:32,310
så händer. Men det är inte alla som övertygande.

588
00:34:32,310 --> 00:34:36,000
Mer övertygande än en hörna fall likt att behöva uppdatera data i bulk

589
00:34:36,000 --> 00:34:41,150
för en databas varför du lagrar Mather igen och igen och igen och igen?

590
00:34:41,150 --> 00:34:43,020
Det är en hel del tecken, 6 tecken.

591
00:34:43,020 --> 00:34:45,500
Kan vi inte göra ännu bättre än så, speciellt för Pforzheimer?

592
00:34:45,500 --> 00:34:48,320
Visst kan vi göra bättre än så många tecken.

593
00:34:48,320 --> 00:34:51,790
Varför inte bara associera en unik identifierare för varje hus

594
00:34:51,790 --> 00:34:55,020
och butik som för varje användare? Så låt oss prova det här.

595
00:34:55,020 --> 00:35:00,610
Snarare än att bara använda studenter tabellen, låt mig gå upp till min föreläsning databas upp här uppe till vänster.

596
00:35:00,610 --> 00:35:02,600
Observera Här står Skapa tabell.

597
00:35:02,600 --> 00:35:04,550
Låt mig skapa en ny tabell som heter hus.

598
00:35:04,550 --> 00:35:08,880
Antalet kolumner kommer att bli 2. Enter.

599
00:35:08,880 --> 00:35:11,200
Nu har jag 2 fält.

600
00:35:11,200 --> 00:35:14,600
Jag ska kalla detta namn, och det kommer att bli en varchar av längd 255,

601
00:35:14,600 --> 00:35:18,770
>> men det är ganska godtycklig. Låt mig sätta detta här nere i konventionen.

602
00:35:18,770 --> 00:35:22,840
Så satte ett ID här. Låt oss ge varje hus en unik identifierare.

603
00:35:22,840 --> 00:35:25,360
Låt oss ge varje hus ett namn.

604
00:35:25,360 --> 00:35:30,980
Låt oss klargöra att identifieraren ska osignerad bara genom konventionen att endast använda positiva tal.

605
00:35:30,980 --> 00:35:35,020
Låt oss gå vidare och ge det en auto-steg fältet för nu.

606
00:35:35,020 --> 00:35:38,160
Och behöver vi något annat?

607
00:35:38,160 --> 00:35:41,010
Låt oss gå vidare och klicka på Spara.

608
00:35:41,010 --> 00:35:42,480
Nu har jag en andra tabellen.

609
00:35:42,480 --> 00:35:45,860
Kallelse som bortsett detta är något kryptiska SQL-kommando

610
00:35:45,860 --> 00:35:50,280
som du skulle ha haft att skriva in manuellt om du inte använder ett administrativt verktyg som phpMyAdmin.

611
00:35:50,280 --> 00:35:51,990
Så en annan anledning som vi använder den.

612
00:35:51,990 --> 00:35:55,480
Det är underbart bra sorts pedagogiskt eftersom du kan klicka runt

613
00:35:55,480 --> 00:36:01,050
och räkna ut hur saker och ting fungerar genom att bara kopiera och klistra in vad phpMyAdmin gjorde.

614
00:36:01,050 --> 00:36:04,150
Men CREATE TABLE kommandot vad som just avrättades, och här är mitt bord.

615
00:36:04,150 --> 00:36:11,370
Låt mig gå vidare nu och använda rå SQL istället förenklingarna genom att klicka på fliken Infoga.

616
00:36:11,370 --> 00:36:15,040
Låt mig inte in i hus,

617
00:36:15,040 --> 00:36:22,230
och jag ska säga namnet på huset kommer att ha ett värde på "Mather".

618
00:36:22,230 --> 00:36:24,790
Det var allt. Den här syntaxen är lite mer kryptisk.

619
00:36:24,790 --> 00:36:26,660
Detta är namnet på de fält som vi vill infoga.

620
00:36:26,660 --> 00:36:30,390
Dessa är de värden vi vill infoga i dessa områden. Låt mig klicka på Gå.

621
00:36:30,390 --> 00:36:34,410
1 rad infogas tog 0,02 sekunder. Låt mig klicka på Bläddra nu.

622
00:36:34,410 --> 00:36:42,020
>> Märka om jag klickar på Bläddra, det finns Mather, vars ID är genom automatisering numret 1.

623
00:36:42,020 --> 00:36:45,000
Låt mig göra en annan. Låt mig gå in i SQL-fliken.

624
00:36:45,000 --> 00:36:52,950
INSERT INTO hus. Namnet på huset kommer att ha ett värde av Pfoho och så vidare.

625
00:36:52,950 --> 00:36:56,350
Go. Och jag kan fortsätta att göra det igen och igen och igen.

626
00:36:56,350 --> 00:36:59,470
Eller om du får uttråkad med phpMyAdmin kan du bara fliken Infoga

627
00:36:59,470 --> 00:37:01,000
och inte behöva skriva den råa SQL.

628
00:37:01,000 --> 00:37:04,690
Du kan bara bang ut snabbare genom att skriva till exempel Currier, Enter,

629
00:37:04,690 --> 00:37:07,610
och nu när vi klickar på Bläddra, det finns Currier med ID 3.

630
00:37:07,610 --> 00:37:09,920
Så detta är vad vi menar med automatisk ökning.

631
00:37:09,920 --> 00:37:12,280
Men nu måste vi fixa något i studenter.

632
00:37:12,280 --> 00:37:16,240
I studenter vad ska datatypen i huset fältet vara nu?

633
00:37:16,240 --> 00:37:19,450
Det bör vara en int, eller hur?

634
00:37:19,450 --> 00:37:23,950
Så målet här är att faktor ut, annars känd som normalisera, tabellerna

635
00:37:23,950 --> 00:37:27,940
så att vi lagrar inte uppgifter redundant i någon av mina tabeller.

636
00:37:27,940 --> 00:37:31,130
Och återigen är den väg vi var på här kommer att säga Mather, Mather,

637
00:37:31,130 --> 00:37:34,220
Mather, Mather, Pfoho, Pfoho, Pfoho, Pfoho, som är mycket överflödig

638
00:37:34,220 --> 00:37:36,240
i termer av slöseri av tecken.

639
00:37:36,240 --> 00:37:40,820
Så låt mig gå vidare och ändra detta genom att klicka på Struktur,

640
00:37:40,820 --> 00:37:44,620
och låt mig gå vidare och kolla upp huset fältet klickar du på Ändra,

641
00:37:44,620 --> 00:37:46,990
och nu ska jag ändra detta för att vara en int.

642
00:37:46,990 --> 00:37:49,490
255 är inte längre relevant.

643
00:37:49,490 --> 00:37:54,010
Låt mig gå vidare och säga att det är bra om det fortfarande NULL. Spara.

644
00:37:54,010 --> 00:37:55,870
Nu tabell studenter har förändrats framgångsrikt,

645
00:37:55,870 --> 00:37:59,090
och märker igen huset är en int.

646
00:37:59,090 --> 00:38:02,220
Som en parentes, ignorera siffran inom parentes när det gäller vare sin.

647
00:38:02,220 --> 00:38:03,770
>> Detta är för äldre skäl.

648
00:38:03,770 --> 00:38:06,920
Tillbaka i dag när du inte har GUI, hade du istället en miljö kommandorad,

649
00:38:06,920 --> 00:38:11,580
de 10 respektive 11 specificerade hur många tecken du bör visa

650
00:38:11,580 --> 00:38:13,950
i terminalfönstret att faktiskt visa fält.

651
00:38:13,950 --> 00:38:19,150
Det har ingenting att göra med bitlängden av den faktiska fältet, så vi bara ignorera det för nu.

652
00:38:19,150 --> 00:38:20,990
Nu måste jag gå in i denna tabell.

653
00:38:20,990 --> 00:38:24,610
Och om David bor i Mather, bör huset vara 0,

654
00:38:24,610 --> 00:38:27,350
vilket är en standard int värdet närmast NULL.

655
00:38:27,350 --> 00:38:29,810
Han ska bo i huset 1.

656
00:38:29,810 --> 00:38:36,870
Låt oss säga godtyckligt att Mike bor i Pfoho, så hus nummer 2.

657
00:38:36,870 --> 00:38:40,160
Nu mitt bord ser lite mer kryptisk.

658
00:38:40,160 --> 00:38:41,960
Men anser effektiviteten.

659
00:38:41,960 --> 00:38:44,860
Jag använder nu bara 32 bitar för att identifiera huset,

660
00:38:44,860 --> 00:38:49,530
vilket innebär att det bara finns 1 kanoniska definition av mitt hus Mather och Pfoho

661
00:38:49,530 --> 00:38:52,090
och det är i husen tabellen.

662
00:38:52,090 --> 00:38:55,880
Så om jag vill nu återförenas dessa tabeller, tänk på det här sättet.

663
00:38:55,880 --> 00:39:01,980
Här har jag mina elever bord, och på den högra sidan finns dessa nummer, 1 och 2.

664
00:39:01,980 --> 00:39:04,180
1 är Mather, är 2 Pfoho.

665
00:39:04,180 --> 00:39:08,580
Vi har samma nummer i denna andra tabellen, som kallas hus,

666
00:39:08,580 --> 00:39:11,020
1 och 2 och 3 för de 3 hus.

667
00:39:11,020 --> 00:39:14,990
Vad vi nu vill göra är att ha sådan förmåga i koden, PHP och SQL,

668
00:39:14,990 --> 00:39:18,800
att sortera om återförenas dessa tabeller där om dessa är studenter och dessa är husen,

669
00:39:18,800 --> 00:39:22,050
Vi vill på något sätt kombinera dem så att 1 rader med 1,

670
00:39:22,050 --> 00:39:25,670
2 rader upp med 2, och så att vi kan räkna ut var David

671
00:39:25,670 --> 00:39:28,000
och där Mike och där alla andra lever.

672
00:39:28,000 --> 00:39:31,850
För att göra detta kan vi köra en SQL-fråga som följande.

673
00:39:31,850 --> 00:39:40,470
SELECT * FROM studenter JOIN hus på -

674
00:39:40,470 --> 00:39:43,000
Och nu vilka områden vi vill gå på?

675
00:39:43,000 --> 00:39:49,520
Så students.house = houses.id.

676
00:39:49,520 --> 00:39:54,150
>> Lite kryptisk, men denna del innebär att skapa bokstavligen en ny temporär tabell

677
00:39:54,150 --> 00:39:56,690
Det är resultatet av att gå studenter och hus.

678
00:39:56,690 --> 00:40:00,340
Och hur du vill kombinera tips av mina fingrar här?

679
00:40:00,340 --> 00:40:05,280
Ställ studenternas hus fältet motsvarar husen "ID-fältet.

680
00:40:05,280 --> 00:40:10,220
Och om jag nu klicka på Go, får jag tillbaka exakt vad jag hoppades.

681
00:40:10,220 --> 00:40:15,890
David är i Mather, Mike i Pfoho, och jag ser också de unika identifierare.

682
00:40:15,890 --> 00:40:18,640
Men poängen är nu har jag en komplett tabell.

683
00:40:18,640 --> 00:40:23,020
Och så takeaway här pset 7 eller verkligen för den slutliga projektet:

684
00:40:23,020 --> 00:40:25,830
Om du upptäcker att du lagrar all upplysning redundant,

685
00:40:25,830 --> 00:40:28,850
oavsett om det är ett hus, kanske det är en stad, stat, och ZIP

686
00:40:28,850 --> 00:40:32,050
där ZIP kan oftast men inte alltid användas som en unik identifierare,

687
00:40:32,050 --> 00:40:35,810
går igenom övningen mentalt och sedan med något liknande phpMyAdmin

688
00:40:35,810 --> 00:40:40,660
av factoring påpekar att gemensamma data eftersom särskilt som din webbplats får mer väl används

689
00:40:40,660 --> 00:40:45,440
och mer populära, det är hur du ser till att allt är supersnabb,

690
00:40:45,440 --> 00:40:51,930
genom att ge databasen så många tips om unika som möjligt.

691
00:40:51,930 --> 00:40:53,860
Det var en hel del.

692
00:40:53,860 --> 00:40:59,010
Några frågor? Okej. Låt oss ta en 5-minuters paus där och omgruppera.

693
00:41:01,600 --> 00:41:03,540
Okej.

694
00:41:03,540 --> 00:41:08,680
Följande är ett exempel som användes för några år sedan när jag tog CS161,

695
00:41:08,680 --> 00:41:10,960
som är den operativsystem klassen på skolan

696
00:41:10,960 --> 00:41:15,160
som är känd för att vara fantastisk men en galen mängd arbete,

697
00:41:15,160 --> 00:41:19,810
och fokuserar verkligen på några av de låg nivå problem som uppstår i operativsystem

698
00:41:19,810 --> 00:41:22,700
och även med i en värld av databaser.

699
00:41:22,700 --> 00:41:27,040
>> Den historia som berättades av min professor, Margo Seltzer, det året var följande.

700
00:41:27,040 --> 00:41:30,990
Anta att du har en liten sovsal kylskåp för dig och din rumskompis

701
00:41:30,990 --> 00:41:34,030
och ni båda gillar verkligen mjölk.

702
00:41:34,030 --> 00:41:36,360
Så du kommer hem från klass en dag, är din rumskompis som ännu inte finns,

703
00:41:36,360 --> 00:41:39,650
du öppnar kylskåpet, och du inser, "Åh fan, vi är ur mjölk."

704
00:41:39,650 --> 00:41:42,070
Så du stänger kylskåpet, går du över gatan till CVS

705
00:41:42,070 --> 00:41:45,830
och få i de allt långa rader för att köpa lite mjölk i CVS.

706
00:41:45,830 --> 00:41:48,470
Samtidigt kommer din rumskompis hem från sin klass,

707
00:41:48,470 --> 00:41:51,690
kommer in i rummet, öppnar kylskåpet verkligen vilja lite mjölk,

708
00:41:51,690 --> 00:41:54,130
öppnar kylskåpet och, "Fan, ingen mjölk."

709
00:41:54,130 --> 00:41:57,890
Så att han eller hon stänger kylskåpet, går ut genom dörren, och går till Abp

710
00:41:57,890 --> 00:42:00,910
eller någon annanstans än CVS där du inte kommer att stöta på varandra

711
00:42:00,910 --> 00:42:02,790
att hämta lite mjölk.

712
00:42:02,790 --> 00:42:04,820
Naturligtvis några minuter senare, ni båda kommer hem

713
00:42:04,820 --> 00:42:07,740
och nu har du dubbelt så mycket mjölk som du egentligen ville.

714
00:42:07,740 --> 00:42:10,670
Och att vara mjölk, nu det kommer att gå illa för att du gillar mjölk

715
00:42:10,670 --> 00:42:14,200
men du inte gillar mjölk, så nu har du för mycket mjölk, så det kommer att sura.

716
00:42:14,200 --> 00:42:16,830
Detta är en fruktansvärt, fruktansvärt läge.

717
00:42:16,830 --> 00:42:22,920
Vad kunde ha löst detta predikament om du var den första rumskompis hem? Ja.

718
00:42:22,920 --> 00:42:25,970
[Eleven] Du bör ha lämnat en anteckning. [Skratt]

719
00:42:25,970 --> 00:42:28,090
Bra. Du borde ha lämnat en anteckning.

720
00:42:28,090 --> 00:42:32,320
Du borde ha satt en post it-lapp eller liknande att säga: "Gått för mjölk,"

721
00:42:32,320 --> 00:42:36,830
och sedan din rumskompis begreppsmässigt skulle ha utelåst från att faktiskt göra det.

722
00:42:36,830 --> 00:42:38,010
Eller så kan du gå 1 steg längre.

723
00:42:38,010 --> 00:42:41,060
Du kan bokstavligen låsa kylskåpet med någon form av hänglås,

724
00:42:41,060 --> 00:42:44,870
och nu din rumskompis kommer bokstavligen att utelåst från kylskåpet.

725
00:42:44,870 --> 00:42:48,520
Om vi ​​generaliserar tillbaka till programmering,

726
00:42:48,520 --> 00:42:51,610
Du kan nästan tänka kylskåpet som någon slags variabel eller en struct,

727
00:42:51,610 --> 00:42:53,500
någon form av behållare för information.

728
00:42:53,500 --> 00:42:58,290
Problemet i grunden här är att ni båda fick inspektera

729
00:42:58,290 --> 00:43:02,370
eller läsa tillståndet hos denna datastruktur,

730
00:43:02,370 --> 00:43:08,050
men du såg det vid olika tillfällen och ändå ni båda fattat ett beslut

731
00:43:08,050 --> 00:43:11,920
baserat på tillståndet i världen vid de olika tidpunkter.

732
00:43:11,920 --> 00:43:15,570
Så hade du låst kylskåpet, skulle du ha minst undvikit din rumskompis

733
00:43:15,570 --> 00:43:19,070
från att ha kunnat inspektera tillståndet i världen,

734
00:43:19,070 --> 00:43:22,530
så att han eller hon inte kunde ha gjort samma beslut.

735
00:43:22,530 --> 00:43:25,780
Så databaser, som det visar sig, har detta problem hela tiden.

736
00:43:25,780 --> 00:43:31,050
>> Låt oss se om vi kan bygga ett scenario.

737
00:43:31,050 --> 00:43:34,310
Anta att du är typ av en dålig kille och du går till Bank of America

738
00:43:34,310 --> 00:43:37,950
eller en av de andra platserna på torget som har ett par uttagsautomater sida vid sida,

739
00:43:37,950 --> 00:43:41,200
och på något sätt du listat ut hur man duplicera en ATM-kort - inte så svårt.

740
00:43:41,200 --> 00:43:42,730
Det är bara en magnetremsa.

741
00:43:42,730 --> 00:43:45,180
Och så vad du vill försöka göra är att spela det här spelet

742
00:43:45,180 --> 00:43:49,060
där du sätter 1 kort i 1 maskin, ett annat kort i den andra maskinen,

743
00:43:49,060 --> 00:43:51,980
och du vill i huvudsak att försöka ta ut pengar samtidigt,

744
00:43:51,980 --> 00:43:54,930
eftersom föreställa sig historien är som följer.

745
00:43:54,930 --> 00:43:57,350
Maskinen till vänster tar ditt kort och din PIN-kod,

746
00:43:57,350 --> 00:44:00,240
och då säger du: "Ge mig $ 100."

747
00:44:00,240 --> 00:44:04,790
ATM är programmerad att först göra en utvald sin databas eller motsvarande -

748
00:44:04,790 --> 00:44:10,780
vilken databas det med - att se har den här användaren minst $ 100 i hans eller hennes konto?

749
00:44:10,780 --> 00:44:16,180
Om så är fallet, sedan spotta ut $ 100 och subtrahera $ 100 från sin balans.

750
00:44:16,180 --> 00:44:20,470
Men naturligtvis om det finns flera maskiner här eller flera sätt för kontroll av

751
00:44:20,470 --> 00:44:23,560
tillstånd att världen, bankvalv, för att se hur mycket pengar du har,

752
00:44:23,560 --> 00:44:26,780
anta att bara av en slump maskinen på vänster och höger

753
00:44:26,780 --> 00:44:30,140
båda frågar den frågan vid ungefär samma tidpunkt.

754
00:44:30,140 --> 00:44:34,160
>> Och detta kan säkert hända. Uttagsautomater finns datorer i dessa dagar.

755
00:44:34,160 --> 00:44:37,670
Så om maskinen till vänster säger: "Ja, du har minst $ 100,"

756
00:44:37,670 --> 00:44:42,150
under tiden maskinen på rätt säger: "Ja, du har minst $ 100,"

757
00:44:42,150 --> 00:44:47,420
då båda går att avsluta sina program och faktiskt spotta ut $ 100

758
00:44:47,420 --> 00:44:50,820
och säga: "Tidigare du hade $ 200."

759
00:44:50,820 --> 00:44:54,890
"Låt mig uppdatera variabeln nu $ 100 kvar på kontot."

760
00:44:54,890 --> 00:44:58,780
Men om båda har kontrollerat ditt konto och funnit att det är $ 200

761
00:44:58,780 --> 00:45:02,000
och båda gör då matten och säga 200 till 100,

762
00:45:02,000 --> 00:45:06,990
maskinerna har spotta potentiellt ut två $ 100 räkningar i varje maskin,

763
00:45:06,990 --> 00:45:11,360
men de har bara uppdaterat ditt saldo summa konto för att $ 100.

764
00:45:11,360 --> 00:45:15,130
Med andra ord har du tagit ut $ 200, men eftersom de inspekterade tillståndet i världen

765
00:45:15,130 --> 00:45:18,840
samtidigt och sedan gjort ett beslut baserat på detta värde,

766
00:45:18,840 --> 00:45:21,930
de kanske inte göra matten slutändan korrekt.

767
00:45:21,930 --> 00:45:25,520
Så i en bank situation också du verkligen vill ha någon form av lockout

768
00:45:25,520 --> 00:45:28,450
så att så fort du har markerat tillstånd viss variabel

769
00:45:28,450 --> 00:45:31,220
Det är verkligen viktigt, liksom ditt kontosaldo,

770
00:45:31,220 --> 00:45:36,070
inte låta någon annan fatta beslut baserat på det tills du är klar gör din grej,

771
00:45:36,070 --> 00:45:38,920
där i det här fallet är du ATM till vänster.

772
00:45:38,920 --> 00:45:41,160
Lås alla andra ute.

773
00:45:41,160 --> 00:45:44,650
Du kan faktiskt uppnå denna effekt i ett par olika sätt.

774
00:45:44,650 --> 00:45:48,660
>> Det enklaste sättet i MySQL är en linje av SQL som vi gav dig

775
00:45:48,660 --> 00:45:52,030
i problemet inställda specifikationen som ser exakt ut så här.

776
00:45:52,030 --> 00:45:57,420
Infoga i tabellen - vad det heter - ett id, en symbol, och en andel, ett antal aktier,

777
00:45:57,420 --> 00:45:59,660
följande värden, till exempel.

778
00:45:59,660 --> 00:46:03,370
Om du inte har läst spec ännu, är detta ett exempel där hur du går om

779
00:46:03,370 --> 00:46:07,340
köpa 10 aktier i denna öre lager för president Skroob,

780
00:46:07,340 --> 00:46:10,340
vars användar-ID råkar vara nummer 7?

781
00:46:10,340 --> 00:46:14,070
Detta säger INSERT INTO tabell följande id, symbol och antal aktier

782
00:46:14,070 --> 00:46:18,200
av 7, "DVN.V" och 10.

783
00:46:18,200 --> 00:46:21,510
Men - men, men, men - den andra raden är den viktigaste.

784
00:46:21,510 --> 00:46:26,310
PÅ dubbla nyckel UPDATE aktier = aktier + VÄRDEN (aktier).

785
00:46:26,310 --> 00:46:28,350
Så totalt kryptiska-looking vid första anblicken.

786
00:46:28,350 --> 00:46:31,990
Men det faktum att denna SQL-fråga, även om det sveper in 2 rader,

787
00:46:31,990 --> 00:46:35,920
är 1 lång fråga, betyder det att det är atomär

788
00:46:35,920 --> 00:46:41,000
i den meningen att denna fråga antingen köras tillsammans eller inte alls.

789
00:46:41,000 --> 00:46:45,100
Och per definition av MySQL, det är hur de genomfört denna fråga.

790
00:46:45,100 --> 00:46:51,010
Det är genom definition i handboken garanterade att utföra alla på en gång eller inte alls.

791
00:46:51,010 --> 00:46:54,020
Motiveringen för detta är som följer.

792
00:46:54,020 --> 00:46:58,540
Om i detta fall försöker köpa 10 aktier i lager,

793
00:46:58,540 --> 00:47:02,260
det är typ av samma historia som mjölken, det är lite av samma historia som ATM.

794
00:47:02,260 --> 00:47:04,970
>> Om du gör misstaget att använda inte denna syntax

795
00:47:04,970 --> 00:47:09,610
utan väljer från databasen för att se hur många aktier av detta öre lager

796
00:47:09,610 --> 00:47:13,750
har president Skroob och antar att han har 10 aktier,

797
00:47:13,750 --> 00:47:19,330
och lite bråkdels sekund senare du då en UPDATE uttalande,

798
00:47:19,330 --> 00:47:24,810
vilket är ett annat uttalande i SQL som säger gå vidare och lägga 10 fler aktier

799
00:47:24,810 --> 00:47:28,700
till sin nuvarande 10 så att idealt den sammanlagda summan är 20,

800
00:47:28,700 --> 00:47:33,490
problemet är att i dagens databassystem och eftersom dagens datorer

801
00:47:33,490 --> 00:47:35,990
du har flera processorer, flera kärnor -

802
00:47:35,990 --> 00:47:38,920
Med andra ord kan datorer bokstavligen göra flera saker samtidigt -

803
00:47:38,920 --> 00:47:44,270
det finns ingen garanti för att din SELECT och din uppdatering i det här fallet

804
00:47:44,270 --> 00:47:46,150
kommer att hända rygg mot rygg.

805
00:47:46,150 --> 00:47:49,140
Så en dålig scenario skulle vara du göra SELECT

806
00:47:49,140 --> 00:47:51,670
för att se hur många aktier av detta öre lager behöver Skroob har,

807
00:47:51,670 --> 00:47:54,710
och sedan bara av en slump en annan databas fråga utförs -

808
00:47:54,710 --> 00:47:57,740
kanske dess Skroob i ett annat webbläsarfönster försöker köpa 10 aktier

809
00:47:57,740 --> 00:48:00,700
i ett annat fönster helt, ungefär som ATM -

810
00:48:00,700 --> 00:48:05,410
och antar att en annan fråga får i mellan SELECT och UPDATE.

811
00:48:05,410 --> 00:48:10,210
Det kan vara så att Skroob nu förlorar ett visst antal aktier

812
00:48:10,210 --> 00:48:14,340
eftersom en annan process inspektera tillståndet i hans värld,

813
00:48:14,340 --> 00:48:17,800
eller han får fler aktier än han borde ha.

814
00:48:17,800 --> 00:48:23,250
Vi kommer inte att gå in uppgifter om exakt vad dessa särskilda repliker skulle vara,

815
00:48:23,250 --> 00:48:28,380
men poängen är om du måste kontrollera en variablerna värde och sedan fatta ett beslut,

816
00:48:28,380 --> 00:48:32,500
om det finns en risk för att någon annan gör något i mellan dessa 2 påståenden,

817
00:48:32,500 --> 00:48:36,220
som kan hända i multiprocessorsystem i flerkärniga system,

818
00:48:36,220 --> 00:48:41,220
datorer med möjlighet att göra flera saker samtidigt, kan dåliga saker hända

819
00:48:41,220 --> 00:48:44,530
som bankkonton som debiteras felaktigt köpa dubbelt så mycket mjölk,

820
00:48:44,530 --> 00:48:46,730
eller i detta fall fel antal aktier.

821
00:48:46,730 --> 00:48:48,370
Men det finns ett enklare sätt att tänka på detta.

822
00:48:48,370 --> 00:48:53,290
>> Det visar sig att SQL stöder också, om du konfigurerar din tabell rätt,

823
00:48:53,290 --> 00:48:56,920
något som kallas transaktioner, som jag skulle vilja påstå är faktiskt ännu enklare att förstå

824
00:48:56,920 --> 00:49:00,650
än detta, men det är inte en 1-liner, så det är faktiskt lite mer delaktiga.

825
00:49:00,650 --> 00:49:04,960
Det är bokstavligen ett uttalande i SQL heter START TRANSAKTION.

826
00:49:04,960 --> 00:49:08,300
Precis som det finns SELECT, UPDATE, INSERT, DELETE och JOIN och ett gäng andra,

827
00:49:08,300 --> 00:49:10,970
Det finns sökord som START TRANSAKTION.

828
00:49:10,970 --> 00:49:13,560
Och vad du gör då i samband med pset 7 -

829
00:49:13,560 --> 00:49:17,270
du behöver inte göra det för pset 7, det är uttryckligen disclaimed som inte är nödvändigt,

830
00:49:17,270 --> 00:49:18,830
men för slutliga projekt kan det vara användbart -

831
00:49:18,830 --> 00:49:22,820
om du ringer en fråga av START TRANSAKTION och sedan en annan fråga

832
00:49:22,820 --> 00:49:25,620
och sedan en annan fråga och sedan en annan, en annan, och en annan,

833
00:49:25,620 --> 00:49:31,860
dessa frågor kommer faktiskt inte att utföras förrän du kallar SQL COMMIT,

834
00:49:31,860 --> 00:49:37,220
vid vilken punkt, oavsett om det är 2 uttalanden eller 20 uttalanden, kommer de alla att utföras på en gång,

835
00:49:37,220 --> 00:49:42,770
vilket innebär att ingen annan av misstag kan köpa för mycket mjölk eller betalkort för mycket pengar

836
00:49:42,770 --> 00:49:46,340
eller köpa för många aktier eftersom alla dina frågor kommer att utföra

837
00:49:46,340 --> 00:49:48,410
rygg mot rygg mot rygg mot rygg.

838
00:49:48,410 --> 00:49:51,580
Och detta är super viktigt, speciellt när du gör något sånt här.

839
00:49:51,580 --> 00:49:54,900
Detta är en godtycklig exempel som säger låt oss uppdatera bankkonto

840
00:49:54,900 --> 00:50:00,200
genom att sätta en balans motsvarande saldo - $ 1000 där kontonumret är 2.

841
00:50:00,200 --> 00:50:04,260
Och sedan den andra satsen Låt oss nu göra motsvarande $ 1000

842
00:50:04,260 --> 00:50:07,310
i någon annans bankkonto vars kontonummer är 1.

843
00:50:07,310 --> 00:50:10,400
>> Med andra ord är detta ett perfekt exempel på där du vill vara säker på

844
00:50:10,400 --> 00:50:13,590
att båda dessa påståenden hända eller inte alls

845
00:50:13,590 --> 00:50:15,450
annars att kunden kommer att få skruvas

846
00:50:15,450 --> 00:50:17,670
och du kommer att ta deras pengar och inte sätta den någon annanstans,

847
00:50:17,670 --> 00:50:20,470
eller banken kommer att få skruvas där du kommer att sätta in pengar

848
00:50:20,470 --> 00:50:23,140
men faktiskt inte subtrahera det från användarens konto.

849
00:50:23,140 --> 00:50:25,810
Så du vill båda att utföra tillsammans.

850
00:50:25,810 --> 00:50:29,140
Således ingår världen transaktioner.

851
00:50:29,140 --> 00:50:31,360
Så det är något att hålla i bakhuvudet,

852
00:50:31,360 --> 00:50:34,710
inte så mycket för att bara en sista projekt,

853
00:50:34,710 --> 00:50:36,700
men om du vill ta din sista projekt någonstans,

854
00:50:36,700 --> 00:50:39,040
om du vill starta något företag runt det,

855
00:50:39,040 --> 00:50:41,270
om du vill lösa några studenter gruppens problem på campus

856
00:50:41,270 --> 00:50:45,210
och faktiskt har en levande, aktiv hemsida, det är den typ av subtila buggar som kan uppstå

857
00:50:45,210 --> 00:50:49,480
om du inte riktigt tänka igenom vad som kan hända om 2 personer

858
00:50:49,480 --> 00:50:54,190
försöker komma åt din webbplats bokstavligen samma tidpunkt,

859
00:50:54,190 --> 00:50:56,890
varigenom sina frågor annars blir sammanvävda.

860
00:50:58,840 --> 00:51:01,420
>> Redo för JavaScript, en teaser detta?

861
00:51:01,420 --> 00:51:04,320
Detta är vår sista språk för terminen. Okej.

862
00:51:04,320 --> 00:51:09,940
Tack och lov ser JavaScript mycket, mycket, mycket likt de 2 språken, C och PHP,

863
00:51:09,940 --> 00:51:11,140
vi har gjort hittills.

864
00:51:11,140 --> 00:51:14,340
Det finns ingen JavaScript pset 7, men det är ett otroligt användbart verktyg

865
00:51:14,340 --> 00:51:18,840
när det gäller att göra webbaserade slutliga projekt eller egentligen bara webbprogrammering mer allmänt.

866
00:51:18,840 --> 00:51:20,950
Så en snabb överblick över något som kallas DOM.

867
00:51:20,950 --> 00:51:23,600
Här är en super enkel webbsida som egentligen bara säger hej, värld

868
00:51:23,600 --> 00:51:25,970
både i titeln och i kroppen.

869
00:51:25,970 --> 00:51:29,270
Eftersom fördjupningen har tyder på en viss tid,

870
00:51:29,270 --> 00:51:31,380
Det är verkligen en hierarki på webbsidor.

871
00:51:31,380 --> 00:51:34,220
Jag kunde dra samma sträng med HTML som ett träd,

872
00:51:34,220 --> 00:51:37,470
tänker tillbaka till våra diskussioner om datastrukturer i C, enligt följande.

873
00:51:37,470 --> 00:51:40,710
Jag har några speciella rotnod kallas dokumentet noden,

874
00:51:40,710 --> 00:51:43,650
och vi får se den analoga detta i JavaScript på bara ett ögonblick.

875
00:51:43,650 --> 00:51:48,330
Det första barnet och enda barn som i detta fall är den HTML-taggen.

876
00:51:48,330 --> 00:51:49,880
Det finns ingen direkt kartläggning av doctype.

877
00:51:49,880 --> 00:51:53,170
Det är en speciell sak, så vi bara ska ignorera det när det kommer till detta DOM,

878
00:51:53,170 --> 00:51:55,810
denna Document Object Model träd.

879
00:51:55,810 --> 00:51:59,530
Observera att HTML-taggen, som jag har visat godtyckligt som en rektangel,

880
00:51:59,530 --> 00:52:02,890
har 2 barn: huvud och kropp.

881
00:52:02,890 --> 00:52:04,840
>> De är på liknande sätt dras som rektanglar.

882
00:52:04,840 --> 00:52:08,970
Det är meningsfullt bildmässigt att huvudet är till vänster om kroppen.

883
00:52:08,970 --> 00:52:11,960
Slutsatsen är att huvudet kommer först i trädet.

884
00:52:11,960 --> 00:52:14,910
Så det finns faktiskt en beställning till ett träd när du ritar det så här,

885
00:52:14,910 --> 00:52:17,460
även om formerna och allt är godtyckliga.

886
00:52:17,460 --> 00:52:20,360
Huvud har tiden ett enda barn som heter titel,

887
00:52:20,360 --> 00:52:25,170
och titel har faktiskt ett eget barn, som är "Hello, world",

888
00:52:25,170 --> 00:52:32,210
vilket jag medvetet drog som en oval här för att göra det lite annorlunda från rektangeln.

889
00:52:32,210 --> 00:52:37,420
Dessa rektanglar är grundämnen, medan hej, är världen verkligen en text nod.

890
00:52:37,420 --> 00:52:39,850
Så det är en nod i trädet, men det är en annan typ av nod

891
00:52:39,850 --> 00:52:41,730
så jag drog det godtyckligt annorlunda.

892
00:52:41,730 --> 00:52:45,000
Likaså har kroppen ett barn som heter hej, världen också,

893
00:52:45,000 --> 00:52:47,910
så olika nod även om de är slump samma text,

894
00:52:47,910 --> 00:52:52,100
men jag har ritat den med samma form. Så vem bryr sig?

895
00:52:52,100 --> 00:52:56,820
Tja, vad är trevligt om HTML är att den har denna hierarkiska karaktär.

896
00:52:56,820 --> 00:53:01,010
Och vad är trevligt om JavaScript och särskilt bibliotek som är fritt tillgängliga

897
00:53:01,010 --> 00:53:07,120
och populär som jQuery, kan du navigera trädstrukturen så himla lätt.

898
00:53:07,120 --> 00:53:11,790
Någon av de saker vi gjorde i C med pekare och träd som trafikerar och recursing på noder

899
00:53:11,790 --> 00:53:15,300
vänster barn till höger barnet plötsligt att vi kan sortera om ta för givet

900
00:53:15,300 --> 00:53:19,450
som otroligt upplysande om inte lite frustrerande

901
00:53:19,450 --> 00:53:22,470
men inte alls ett effektivt sätt att gå om programmering.

902
00:53:22,470 --> 00:53:24,470
Och så med dessa högre nivå språk som JavaScript

903
00:53:24,470 --> 00:53:28,340
Vi kommer att kunna navigera detta träd mycket mer intuitivt.

904
00:53:28,340 --> 00:53:30,430
>> Och faktiskt syntaxen kommer att bli ganska bekant.

905
00:53:30,430 --> 00:53:32,950
Om du aldrig har sett JavaScript tidigare, är detta en riktigt trevlig referens

906
00:53:32,950 --> 00:53:35,910
från Mozilla folk, de människor som gör Firefox,

907
00:53:35,910 --> 00:53:38,370
så gör gärna bläddra det när det passar dig.

908
00:53:38,370 --> 00:53:41,590
Vad du hittar - och dessa bilder är identiska med vad vi använde häromdagen -

909
00:53:41,590 --> 00:53:44,030
samma sätt är främsta borta.

910
00:53:44,030 --> 00:53:47,010
Så när du skriver ett program i JavaScript, finns det ingen huvudfunktion.

911
00:53:47,010 --> 00:53:48,690
Du startar bara skriva kod.

912
00:53:48,690 --> 00:53:51,660
Men en viktig skillnad mellan JavaScript och C och PHP

913
00:53:51,660 --> 00:53:55,890
är att medan C och PHP hittills har genomförts serversidan

914
00:53:55,890 --> 00:53:59,180
av apparaten i detta fall eller mer generellt av en server,

915
00:53:59,180 --> 00:54:04,270
JavaScript genom design brukar utföras av en webbläsare.

916
00:54:04,270 --> 00:54:08,440
Med andra ord kan du skriva JavaScript-kod, som vi håller på att,

917
00:54:08,440 --> 00:54:13,080
på en server i apparaten, men du inkludera det bland HTML, bland din CSS,

918
00:54:13,080 --> 00:54:16,100
bland dina GIF och dina PNG och dina JPEG

919
00:54:16,100 --> 00:54:19,170
så att när användaren besöker din webbsida, om du använder JavaScript,

920
00:54:19,170 --> 00:54:21,770
att JavaScript-kod kommer från servern till webbläsaren,

921
00:54:21,770 --> 00:54:24,540
och det är webbläsaren som faktiskt utför det.

922
00:54:24,540 --> 00:54:27,960
Så detta är meningsfulla konsekvenser för ens immateriella rättigheter.

923
00:54:27,960 --> 00:54:32,600
Det finns en slags dumt att ens tänka på att skydda din IP när det kommer till JavaScript-kod

924
00:54:32,600 --> 00:54:37,560
grund av naturen av språket det blir utförs vanligtvis webbläsare sida.

925
00:54:37,560 --> 00:54:40,360
>> Du kan fördunkla den, vilket innebär att du kan få det att se galen och ful

926
00:54:40,360 --> 00:54:45,400
utan blanksteg, hemsk variabelnamn, för att göra det svårare för människor att stjäla din IP,

927
00:54:45,400 --> 00:54:48,120
men det viktigaste är att det körs i webbläsaren sida.

928
00:54:48,120 --> 00:54:51,790
Även om som en sidoreplik JavaScript kan användas serversidan,

929
00:54:51,790 --> 00:54:54,480
den vanligaste användningen fallet just nu är fortfarande på webbläsaren.

930
00:54:54,480 --> 00:54:59,800
Och här är vad det ser ut. Här är en om-annars om-annars konstruera precis som C, precis som PHP.

931
00:54:59,800 --> 00:55:02,420
Här är ett booleskt uttryck när du "eller" 2 saker tillsammans.

932
00:55:02,420 --> 00:55:04,330
Här är när du "och" 2 saker tillsammans.

933
00:55:04,330 --> 00:55:08,300
Här är en switch-sats som liknar PHP

934
00:55:08,300 --> 00:55:10,810
i att du kan slå på olika typer av värden.

935
00:55:10,810 --> 00:55:15,180
Loopar har på samma sätt för slingor här, som är strukturerade identiskt med vad vi har sett tidigare.

936
00:55:15,180 --> 00:55:18,110
Medan loopar, vi har göra medan slingor.

937
00:55:18,110 --> 00:55:20,290
Variabler, någonsin så något annorlunda.

938
00:55:20,290 --> 00:55:24,560
Du deklarerar variabler som du gör i PHP och C,

939
00:55:24,560 --> 00:55:27,860
men liknande är JavaScript svagt skrivs.

940
00:55:27,860 --> 00:55:32,730
Du inte anger int eller float eller string eller något liknande brukar.

941
00:55:32,730 --> 00:55:34,240
Du kan ange var.

942
00:55:34,240 --> 00:55:38,040
Du behöver inte ange var, men det har konsekvenser om man inte gör det.

943
00:55:38,040 --> 00:55:42,000
Vanligtvis om du utelämnar var skapar du av misstag en global variabel i stället för lokala.

944
00:55:42,000 --> 00:55:46,420
Så låt mig föreslå att du nästan alltid bara säga var och sedan namnet på variabeln.

945
00:55:46,420 --> 00:55:48,740
Det är inte en typ, det är bara var för variabel.

946
00:55:48,740 --> 00:55:52,930
Detta skulle vara ett exempel, oavsett om det är 123 eller "hej, världen".

947
00:55:52,930 --> 00:55:58,910
Arrayer är närvarande och syntaktiskt liknar PHP.

948
00:55:58,910 --> 00:56:03,690
Jag ska säga VAR siffror och sedan använder jag hakparenteser igen att deklarera en variabel

949
00:56:03,690 --> 00:56:08,870
vars typ är array som har just dessa nummer i den separerade med kommatecken.

950
00:56:08,870 --> 00:56:11,740
Och då slutligen, är detta det enda som verkligen ser annorlunda ut.

951
00:56:11,740 --> 00:56:16,700
Minns att i PHP vi skulle ha genomfört en associativ array för en student

952
00:56:16,700 --> 00:56:20,220
Liksom Zamyla som kan se ut så här, där variabeln kallas elev.

953
00:56:20,220 --> 00:56:23,370
Hakparenteserna betyder här kommer en matris.

954
00:56:23,370 --> 00:56:28,500
>> Det faktum att jag inte använder numeriska index, men strängar - id, hus och namn -

955
00:56:28,500 --> 00:56:30,990
innebär att detta är en associativ array,

956
00:56:30,990 --> 00:56:34,490
och dessa pilar med likhetstecknet och den vinklade fästet

957
00:56:34,490 --> 00:56:37,310
innebär att nyckeln är "id", är värdet 1;

958
00:56:37,310 --> 00:56:39,310
nyckeln är "hus", är värdet Winthrop House;

959
00:56:39,310 --> 00:56:41,800
nyckeln är "namn", är värdet Zamyla Chan.

960
00:56:41,800 --> 00:56:47,110
Så det finns 3 nycklar inne i denna associativ array, som alla har sitt eget värde.

961
00:56:47,110 --> 00:56:52,880
Vi har sett att i pset 7, eller du snart kommer i JavaScript samma idé,

962
00:56:52,880 --> 00:56:55,220
men det kommer att se ut så här.

963
00:56:55,220 --> 00:57:00,070
Så var student - ingen dollartecken och ingenting av typ fortfarande men var -

964
00:57:00,070 --> 00:57:05,860
jämlikar och öppna sedan klammerparenteser eftersom JavaScript när du har viktiga värdepar,

965
00:57:05,860 --> 00:57:08,900
du faktiskt något som kallas ett objekt.

966
00:57:08,900 --> 00:57:13,490
Och de av er som tog APC eller liknande kanske kommer ihåg föremål från Java

967
00:57:13,490 --> 00:57:15,140
eller liknande språk.

968
00:57:15,140 --> 00:57:17,880
JavaScript är inte Java, först av alla.

969
00:57:17,880 --> 00:57:21,600
Det var ett medvetet design beslut år sedan att slå ut något annat som var populärt,

970
00:57:21,600 --> 00:57:25,640
sitt namn, trots att den inte har någon grundläggande relation till JAVA själv.

971
00:57:25,640 --> 00:57:31,490
JavaScript har objekt och du skapar dem med hjälp av klammerparentes notation.

972
00:57:31,490 --> 00:57:36,710
Objekt i Javascript är ganska likvärdiga med associativa arrayer i PHP

973
00:57:36,710 --> 00:57:40,030
när det gäller lagring av data inuti dem.

974
00:57:40,030 --> 00:57:44,100
>> Men även mer kraftfullt i JavaScript kan du koppla enkelt fungerar

975
00:57:44,100 --> 00:57:48,040
inuti ett objekt, och även om du kan göra detta på andra språk,

976
00:57:48,040 --> 00:57:50,040
Det är ganska vanligt paradigm, som vi får se.

977
00:57:50,040 --> 00:57:54,380
Kort sagt, är detta objekt en student, som är särskilt Zamyla,

978
00:57:54,380 --> 00:58:00,380
och det är lika begreppsmässigt, bara syntaktiskt annorlunda här.

979
00:58:00,380 --> 00:58:03,840
Låt oss verkligen använda JavaScript i en fil.

980
00:58:03,840 --> 00:58:05,570
Det visar sig att det finns ett skript tagg.

981
00:58:05,570 --> 00:58:08,180
Vi har sett en stil tag och vi har sett andra HTML-taggar.

982
00:58:08,180 --> 00:58:11,510
Manuset taggen faktiskt innehåller några JavaScript-kod.

983
00:58:11,510 --> 00:58:15,500
Låt mig gå in i apparaten, där vi har några källkod pre-made.

984
00:58:15,500 --> 00:58:18,700
Jag har inte skrivit det ännu på webbplatsen, men jag ska göra det efter lektionen.

985
00:58:18,700 --> 00:58:21,770
Vi öppnar upp här, blink.html.

986
00:58:21,770 --> 00:58:27,560
Tillbaka på 1990-talet, det var bokstavligen en HTML-tagg som kallas blink-taggen,

987
00:58:27,560 --> 00:58:30,340
och detta var en av de mest underbart overused taggar på Internet

988
00:58:30,340 --> 00:58:36,140
där du skulle besöka några 1990 sidformatmallen webb och börja se text blinkar dig så här,

989
00:58:36,140 --> 00:58:39,810
resultatet av markis taggen, som hade att gå på det här sättet.

990
00:58:39,810 --> 00:58:45,070
En av de få gånger där världen har faktiskt enats om en webb standard,

991
00:58:45,070 --> 00:58:48,250
alla över hela linjen dödade blink-taggen för några år sedan.

992
00:58:48,250 --> 00:58:52,860
Men vi kan återuppliva den med JavaScript som en demonstration av makt du har

993
00:58:52,860 --> 00:58:56,660
när du kan skriva ett program inne i en webbsida.

994
00:58:56,660 --> 00:59:00,240
Låt oss först hoppa över den nya grejer och bara fokusera på de gamla.

995
00:59:00,240 --> 00:59:01,780
>> Här är den gamla saker i detta exempel.

996
00:59:01,780 --> 00:59:06,350
Jag har en HTML-tagg, ett huvud tag och en titel tagg.

997
00:59:06,350 --> 00:59:11,210
Sen har jag en kropp tagg här med en div, vilket minns bara en rektangulär fördelning av sidan

998
00:59:11,210 --> 00:59:14,720
att jag har gett ett unikt ID godtyckligt av "hälsning" till,

999
00:59:14,720 --> 00:59:18,320
bara så jag har ett sätt att unikt hänvisa till det, som har några mycket enkel text:

1000
00:59:18,320 --> 00:59:20,220
hej, världen.

1001
00:59:20,220 --> 00:59:23,940
Låt mig rulla upp till toppen av denna fil och se vad som är nytt.

1002
00:59:23,940 --> 00:59:27,710
Det första som är nytt uppe är script-taggen,

1003
00:59:27,710 --> 00:59:31,280
och insidan av skripttagg märker jag har förklarat en funktion.

1004
00:59:31,280 --> 00:59:34,610
Att deklarera en funktion i JavaScript, ganska lik PHP,

1005
00:59:34,610 --> 00:59:37,930
du skriver bokstavligen fungerar sedan namnet på funktionen, parenteser,

1006
00:59:37,930 --> 00:59:40,400
och kanske några argument om det tar några.

1007
00:59:40,400 --> 00:59:43,510
Sen har min klammerparentes som vanligt, och nu har vi några lite ny kod,

1008
00:59:43,510 --> 00:59:45,230
men låt oss se vad detta innebär.

1009
00:59:45,230 --> 00:59:48,670
Så var div innebär detta bara ge mig en variabel kallad div.

1010
00:59:48,670 --> 00:59:50,530
Jag kunde ha kallat det foo, men jag ville att den skulle kallas div

1011
00:59:50,530 --> 00:59:52,620
av skäl som kommer att framgå i en sekund.

1012
00:59:52,620 --> 00:59:57,480
Då visar det sig i JavaScript - och detta är JavaScript-kod inbäddad i min hemsida -

1013
00:59:57,480 --> 01:00:01,760
det finns en speciell global variabel slags handling som kallas.

1014
01:00:01,760 --> 01:00:04,780
JavaScript är faktiskt ett objektorienterat språk.

1015
01:00:04,780 --> 01:00:07,230
Vi kommer inte att gå in i detalj i 50 vad det betyder,

1016
01:00:07,230 --> 01:00:11,180
men nu vet att ett föremål är ganska mycket som en struct.

1017
01:00:11,180 --> 01:00:14,740
Som vi såg vägen tillbaka när en av de tidigaste problemet sätter

1018
01:00:14,740 --> 01:00:17,150
där vi lägger en hel del information i en struktur,

1019
01:00:17,150 --> 01:00:21,330
liknande är dokumentera en speciell struktur som kommer med webbläsaren,

1020
01:00:21,330 --> 01:00:24,810
kommer med en webbsida. Det är inte något jag skapat.

1021
01:00:24,810 --> 01:00:28,210
Inuti detta dokument struktur, men har du inte bara data

1022
01:00:28,210 --> 01:00:30,010
men du har också funktioner.

1023
01:00:30,010 --> 01:00:34,090
>> Och varje gång du har en funktion inne i en struktur, inuti ett objekt,

1024
01:00:34,090 --> 01:00:36,490
det kallas en metod. Men det är samma sak.

1025
01:00:36,490 --> 01:00:40,110
En metod är en funktion som bara så råkar vara inne i något annat.

1026
01:00:40,110 --> 01:00:42,990
Så detta betyder att denna speciella global variabel som heter dokument

1027
01:00:42,990 --> 01:00:47,690
har en funktion som kallas getElementById som bokstavligen gör det.

1028
01:00:47,690 --> 01:00:52,460
Det får du ett element från DOM, Document Object Model träd,

1029
01:00:52,460 --> 01:00:55,520
vars ID är i detta fall hälsning.

1030
01:00:55,520 --> 01:00:59,200
Med andra ord, kommer hela tiden vi tillbringade på datastrukturer i spel här.

1031
01:00:59,200 --> 01:01:01,400
Denna bild av en DOM att vi hade för en stund sedan,

1032
01:01:01,400 --> 01:01:06,100
även om sidan är lite annorlunda, om jag hade en div på bilden,

1033
01:01:06,100 --> 01:01:11,180
vilken document.getElementById skulle återvända till mig skulle effektivt vara en pekare

1034
01:01:11,180 --> 01:01:15,440
den rektangel i trädet, en hänvisning till rektangeln i trädet.

1035
01:01:15,440 --> 01:01:18,410
Så det är vad det innebär att faktiskt ringa en av dessa funktioner.

1036
01:01:18,410 --> 01:01:21,960
I det här fallet igen är det en div. Det är inte ett organ eller en titel.

1037
01:01:21,960 --> 01:01:26,480
Så låt oss se vad jag då göra med den här div nu när jag har det inuti detta kallas variabel div.

1038
01:01:26,480 --> 01:01:32,580
Det visar sig med JavaScript har du möjlighet att justera CSS på din sida dynamiskt.

1039
01:01:32,580 --> 01:01:39,060
Hittills är allt CSS vi har gjort, om än begränsade, i stil attribut,

1040
01:01:39,060 --> 01:01:41,730
eller där annars har satt vi CSS?

1041
01:01:42,730 --> 01:01:45,810
Jag slags bortskämd som en. I stil taggen längst upp i filen.

1042
01:01:45,810 --> 01:01:49,180
Eller tredje plats har varit i?

1043
01:01:50,710 --> 01:01:54,590
>> En extern fil, något. Css.

1044
01:01:54,590 --> 01:01:56,730
Så de är de 3 platser vi har gjort CSS hittills,

1045
01:01:56,730 --> 01:01:59,310
men kruxet är vi hårt har kodat allt.

1046
01:01:59,310 --> 01:02:04,060
Du bestämde som ni dök in pset 7, beslutade vi innan föreläsa vad vår CSS skulle vara.

1047
01:02:04,060 --> 01:02:07,380
Men om du vill ändra din CSS, kan du faktiskt göra 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 - inte programmeringsspråk. Javascript är.

1050
01:02:13,910 --> 01:02:18,200
Så det visar sig att så fort du har en av dessa rektanglar från trädet

1051
01:02:18,200 --> 01:02:23,050
kallas DOM har det själv några data i den.

1052
01:02:23,050 --> 01:02:27,820
Så div som jag bara tog från trädet har vad vi kallar en egenskap insidan av det

1053
01:02:27,820 --> 01:02:34,390
heter stil och stil egenskapen själv en fastighet som kallas synlighet.

1054
01:02:34,390 --> 01:02:37,330
Jag skulle veta detta endast genom att slå upp en CSS bruksanvisning.

1055
01:02:37,330 --> 01:02:41,160
Det visar sig att det finns en synlig CSS-egenskapen som gör vad den säger.

1056
01:02:41,160 --> 01:02:44,530
Det gör något synligt eller ej, syns eller inte.

1057
01:02:44,530 --> 01:02:46,810
Och hur du gör det är det.

1058
01:02:46,810 --> 01:02:50,510
Jag frågar programmatiskt om synligheten för denna div döljs,

1059
01:02:50,510 --> 01:02:53,390
vad jag ändra det till? Synliga.

1060
01:02:53,390 --> 01:02:58,840
Else if synligheten på denna sida inte är dolt, logiskt jag gör det dolda.

1061
01:02:58,840 --> 01:03:04,070
Jag har ingen aning varför det är synligt och dolt och inte synliga och osynliga.

1062
01:03:04,070 --> 01:03:06,000
Detta var en dålig design beslut längs vägen.

1063
01:03:06,000 --> 01:03:09,530
Men de är verkligen motsatser i CSS: synliga och dolda.

1064
01:03:09,530 --> 01:03:15,520
Allt detta gör det betyder att ändra CSS för min fil på och av, på och av

1065
01:03:15,520 --> 01:03:16,870
för just div.

1066
01:03:16,870 --> 01:03:20,630
Men återigen, detta är en funktion som kallas blinkar. När är blink funktion som kallas?

1067
01:03:20,630 --> 01:03:24,080
Det visar sig att det finns en annan speciell global variabel som heter fönster,

1068
01:03:24,080 --> 01:03:28,220
likadana i andemening som dokument, men medan det i dokumentet hänvisas till din webbsida,

1069
01:03:28,220 --> 01:03:31,700
som DOM-trädet, skickade HTML dig från servern,

1070
01:03:31,700 --> 01:03:35,250
Fönstret avser krom runt det, adressfältet, namnlisten,

1071
01:03:35,250 --> 01:03:37,880
och allt det där runt din webbsida.

1072
01:03:37,880 --> 01:03:42,800
>> Och det visar sig att fönstret objektet har en speciell funktion inuti det kallas setInterval

1073
01:03:42,800 --> 01:03:44,360
som gör vad den säger.

1074
01:03:44,360 --> 01:03:48,600
Det kommer att vara ett intervall - i detta fall var 500 millisekund -

1075
01:03:48,600 --> 01:03:52,270
och ta en gissning, är vad det kommer att göra varje 500 millisekunder?

1076
01:03:52,270 --> 01:03:55,240
Det kommer att utföra denna funktion blinkar.

1077
01:03:55,240 --> 01:03:58,560
Och vad är trevligt här är att vi kunde ha gjort detta i C även om vi aldrig gjorde.

1078
01:03:58,560 --> 01:04:01,580
C har något som kallas funktionspekare där du kan skicka funktioner runt

1079
01:04:01,580 --> 01:04:03,140
som argument.

1080
01:04:03,140 --> 01:04:07,620
Likaså i JavaScript kan du skicka namnet på en funktion i en annan funktion.

1081
01:04:07,620 --> 01:04:10,630
Och märker vad jag gör. Jag gör inte det här.

1082
01:04:10,630 --> 01:04:14,380
Om jag sätter parenteser efter blinkning, skulle det innebära ringa blinkfunktion.

1083
01:04:14,380 --> 01:04:17,430
Om jag utelämnar dem betyder att här är blinkfunktion

1084
01:04:17,430 --> 01:04:21,330
så att setInterval kan kalla det var 500 millisekunder.

1085
01:04:21,330 --> 01:04:28,200
Så slutresultatet, avskyvärda men det är, är att om jag går in localhost och gå till blink.html,

1086
01:04:28,200 --> 01:04:32,120
Jag har nu detta händer om och om igen.

1087
01:04:32,120 --> 01:04:34,950
Och om jag verkligen Inspektera Element, låt oss se om vi kan se detta.

1088
01:04:34,950 --> 01:04:38,550
Låt mig Inspektera element, låt mig scrolla ner bara lite,

1089
01:04:38,550 --> 01:04:44,320
låt mig välja element här, och märker DOM insidan av Chrome inspektör.

1090
01:04:44,320 --> 01:04:48,840
Det är bokstavligen förändras fram och tillbaka var 500 millisekunder.

1091
01:04:48,840 --> 01:04:55,660
Om vi ​​går till vår vän Nate,

1092
01:04:55,660 --> 01:05:00,020
Om du någonsin undrat hur det fungerar, liknande idé med ett intervall,

1093
01:05:00,020 --> 01:05:04,810
men Nate är faktiskt att mycket effektiv användning av färg i detta fall här.

1094
01:05:04,810 --> 01:05:07,350
Så vad mer kan vi göra egentligen med detta?

1095
01:05:07,350 --> 01:05:09,990
Vi öppnar upp ett annat exempel och prova något

1096
01:05:09,990 --> 01:05:12,940
Det är programmatiskt ännu mer användbar än att göra saker blinkar.

1097
01:05:12,940 --> 01:05:17,990
Låt mig gå in i vårt formulär katalog idag och gå in form0.

1098
01:05:17,990 --> 01:05:20,820
Detta var den fulaste möjliga form som jag kunde komma på,

1099
01:05:20,820 --> 01:05:23,290
och låt mig bara visa dig hur det ser ut i en webbläsare.

1100
01:05:23,290 --> 01:05:28,960
>> Låt mig gå in localhost / former, och det här är form0.

1101
01:05:28,960 --> 01:05:33,400
Detta är en super ful HTML-formulär som har några fält för e-post, för lösenord,

1102
01:05:33,400 --> 01:05:37,190
lösenord och sedan lite kryssruta för att godkänna vissa villkor.

1103
01:05:37,190 --> 01:05:41,350
Fångsten är om jag besöker detta formulär, och jag vill inte ge er min e-postadress,

1104
01:05:41,350 --> 01:05:44,730
Jag vill inte gå med på villkoren kanske kan jag klicka på Registrera

1105
01:05:44,730 --> 01:05:46,920
och det låter mig igenom ändå.

1106
01:05:46,920 --> 01:05:50,800
Det händer att underkasta sig en dum PHP fil som heter dump.php.

1107
01:05:50,800 --> 01:05:58,420
Allt det gör är att skriva ut innehållet i $ _GET bara för diagnostiska ändamål.

1108
01:05:58,420 --> 01:06:01,580
Det var vad som lämnats in av användaren just nu.

1109
01:06:01,580 --> 01:06:05,010
Men antag att vi faktiskt vill validera användarens formulär.

1110
01:06:05,010 --> 01:06:06,530
Låt mig gå in version 1.

1111
01:06:06,530 --> 01:06:11,420
Detta är form1.html. Det ser estetiskt lika illa, men märker hur fint det är.

1112
01:06:11,420 --> 01:06:15,450
Om jag klickar på Registrera utan att samarbeta, får jag skrek åt.

1113
01:06:15,450 --> 01:06:17,320
"Du måste ange din e-postadress."

1114
01:06:17,320 --> 01:06:21,670
Okej. Så låt mig prova det. Så malan@harvard.edu. Jag behöver inte ett lösenord.

1115
01:06:21,670 --> 01:06:25,100
Registrera. "Du måste ange ett lösenord." Okej.

1116
01:06:25,100 --> 01:06:28,470
Så jag kommer att ge ett lösenord crimson. Registrera.

1117
01:06:28,470 --> 01:06:32,300
"Lösenorden stämmer inte överens." Jag måste nu skriva in crimson här.

1118
01:06:32,300 --> 01:06:35,710
Jag kollade misstag det. Registrera.

1119
01:06:35,710 --> 01:06:39,860
"Du måste godkänna villkoren." Okej. Överens där. Registrera.

1120
01:06:39,860 --> 01:06:43,700
Och nu visar mig den diagnostiska effekt där.

1121
01:06:43,700 --> 01:06:45,630
>> Så vad hände?

1122
01:06:45,630 --> 01:06:48,330
Vi har haft denna förmåga att validera formulär inlagor.

1123
01:06:48,330 --> 01:06:51,420
Faktum är att om du gjorde dyka in pset 7, det finns en ursäkt funktion

1124
01:06:51,420 --> 01:06:54,620
som gör det ganska lätt att skrika på användaren med ett meddelande på skärmen.

1125
01:06:54,620 --> 01:06:57,580
Jag använder en något annorlunda mekanism, larm funktion,

1126
01:06:57,580 --> 01:07:03,690
som inte är en funktion som är log mot eftersom det gör väldigt ful användarmeddelanden.

1127
01:07:03,690 --> 01:07:05,710
Men låt oss se vad jag gör här.

1128
01:07:05,710 --> 01:07:09,620
Detta är form1.html, och märker att jag har några ganska bekant syntax:

1129
01:07:09,620 --> 01:07:12,920
body-taggen, formulär tag, handling attribut, metod attribut.

1130
01:07:12,920 --> 01:07:17,050
Men märker jag har gett min form ett unikt ID för bekvämlighet.

1131
01:07:17,050 --> 01:07:19,190
Sen har jag en e-fält vars typ är text,

1132
01:07:19,190 --> 01:07:23,780
ett fält för lösenord vars typ är lösenord, bekräfta fält vars typ är lösenord,

1133
01:07:23,780 --> 01:07:28,070
och sedan en kryssruta som heter överenskommelse om här, typ kryssrutan.

1134
01:07:28,070 --> 01:07:30,380
Och då har jag en submit-knapp.

1135
01:07:30,380 --> 01:07:33,050
Men märker upptill vad mer jag har.

1136
01:07:33,050 --> 01:07:35,810
Först av allt, det finns en annan användning av skripttagg.

1137
01:07:35,810 --> 01:07:40,520
Om du har några JavaScript-kod i en annan fil, precis som med CSS kan du inkludera det.

1138
01:07:40,520 --> 01:07:44,530
Och du gör det med manus källa, och sedan märker jag ansluta tydligen

1139
01:07:44,530 --> 01:07:50,349
att googleapis.com till en mycket lång väg men vars filnamn slutar med jquery.min

1140
01:07:50,349 --> 01:07:52,420
för minimal. js.

1141
01:07:52,420 --> 01:07:55,969
jQuery är en super populär bibliotek för Javascript som bara gör JavaScript

1142
01:07:55,969 --> 01:07:58,230
allt mer användarvänliga att använda.

1143
01:07:58,230 --> 01:08:00,610
Det har faktiskt blivit en de facto-standard.

1144
01:08:00,610 --> 01:08:04,090
Så även om det du ska se är inte ren JavaScript sig,

1145
01:08:04,090 --> 01:08:09,340
Det är ett bibliotek på toppen av JavaScript likt CS50 biblioteket är ett skikt

1146
01:08:09,340 --> 01:08:13,670
ovanpå låg nivå C-kod, verkligheten är nästan alla på Internet använder det.

1147
01:08:13,670 --> 01:08:18,030
Så dessa är inte stödhjul. Detta är bara bäst öva i dessa dagar.

1148
01:08:18,030 --> 01:08:22,830
Nu märker nedan som är min egen script-taggen, och lägg märke till vad jag har gjort här.

1149
01:08:22,830 --> 01:08:27,450
Det visar sig att jQuery gör något lite fantasi.

1150
01:08:27,450 --> 01:08:29,660
JavaScript har dollartecken, men de är meningslösa.

1151
01:08:29,660 --> 01:08:32,870
>> De är som bokstaven A eller B eller C.

1152
01:08:32,870 --> 01:08:36,670
jQuery har helt enkelt antagit konventionen eller typ av anspråk på att

1153
01:08:36,670 --> 01:08:40,280
att $ blir deras speciell symbol.

1154
01:08:40,280 --> 01:08:44,950
Så snart som du laddar denna globala JavaScript-fil här uppe med script-taggen,

1155
01:08:44,950 --> 01:08:49,080
du har tillgång till en speciell global variabel som heter $.

1156
01:08:49,080 --> 01:08:53,009
Det är mer korrekt kallas jQuery, men som inte ser alls lika sexig som $.

1157
01:08:53,009 --> 01:08:56,250
Men $ har ingen speciell betydelse. I PHP hade speciell betydelse.

1158
01:08:56,250 --> 01:08:58,440
Du var tvungen att ha det framför en variabel.

1159
01:08:58,440 --> 01:09:01,670
Detta är bara en sexig sak som de tog den.

1160
01:09:01,670 --> 01:09:03,389
Vad händer här?

1161
01:09:03,389 --> 01:09:08,830
Notera att jag går till jQuery funktion min globala variabel dokument

1162
01:09:08,830 --> 01:09:10,860
och då jag ringer. redo.

1163
01:09:10,860 --> 01:09:15,480
Vilken jQuery huvudsak gör det kan du ta del vanilj JavaScript saker

1164
01:09:15,480 --> 01:09:17,889
som dokumentet objektet fönstret objektet,

1165
01:09:17,889 --> 01:09:20,790
och om du skickar den till jQuery funktion -

1166
01:09:20,790 --> 01:09:24,429
och igen, att vara tydlig, detta är en funktion som kallas jQuery -

1167
01:09:24,429 --> 01:09:28,240
vad den gör är det återgår till en speciell version av dokumentet

1168
01:09:28,240 --> 01:09:30,700
som har mer funktioner i anslutning till den.

1169
01:09:30,700 --> 01:09:34,760
Så i rå JavaScript finns det ingen klar funktion,

1170
01:09:34,760 --> 01:09:37,810
men om du klarar dokument till jQuery funktion först,

1171
01:09:37,810 --> 01:09:40,960
återgår den till dig en speciell version av dokumentet objektet

1172
01:09:40,960 --> 01:09:43,030
som har fler fina egenskaper.

1173
01:09:43,030 --> 01:09:48,230
Och det är därför folk gillar det. Det gör bara saker enklare att göra, eftersom vi är på väg att se.

1174
01:09:48,230 --> 01:09:49,820
Så vad betyder den här kodraden?

1175
01:09:49,820 --> 01:09:52,690
Denna kodrad menas här när dokumentet är klart -

1176
01:09:52,690 --> 01:09:56,830
med andra ord, när webbläsaren görs läser denna fil topp till botten -

1177
01:09:56,830 --> 01:09:59,200
gå vidare och utföra följande funktion.

1178
01:09:59,200 --> 01:10:03,540
Vad är riktigt intressant i JavaScript - och PHP har detta också -

1179
01:10:03,540 --> 01:10:05,450
är anonyma funktioner.

1180
01:10:05,450 --> 01:10:10,560
I JavaScript kan du deklarera funktioner som inte har något namn, men de har en kropp.

1181
01:10:10,560 --> 01:10:12,570
Lägg märke till vad som händer här.

1182
01:10:12,570 --> 01:10:16,220
>> Detta är en funktion som kallas redo, och det betyder bara göra följande

1183
01:10:16,220 --> 01:10:20,220
när hela webbsidan är klar, när allt är lästs in från servern.

1184
01:10:20,220 --> 01:10:23,090
Vad vill du göra? Jag vill köra en bit av kod.

1185
01:10:23,090 --> 01:10:27,120
Observera att vi inte vill köra denna kod direkt.

1186
01:10:27,120 --> 01:10:34,350
Om jag utelämnas detta, skulle detta innebära omedelbart börja köra dessa rader kod.

1187
01:10:34,350 --> 01:10:39,040
Men det faktum att jag säger nej, nej, nej, linda detta i en anonym funktion som denna

1188
01:10:39,040 --> 01:10:43,000
medel kör inte det ännu, kalla det så småningom.

1189
01:10:43,000 --> 01:10:45,430
Vi såg detta nyss i vårt tidigare form exempel.

1190
01:10:45,430 --> 01:10:49,990
Vilken funktion har vi kallar småningom 500 millisekunder senare? Blink.

1191
01:10:49,990 --> 01:10:51,480
Så samma idé.

1192
01:10:51,480 --> 01:10:53,950
Igen, även om det ser lite konstigt, bara ta för nu tro

1193
01:10:53,950 --> 01:10:57,060
att förklara en anonym funktion som heter så småningom,

1194
01:10:57,060 --> 01:11:01,720
Du skriver helt enkelt function () {

1195
01:11:01,720 --> 01:11:05,380
Så vad koden ska vi köra så småningom? Följande.

1196
01:11:05,380 --> 01:11:10,460
Detta ser alltför lite nytt, men detta innebär här är jQuery funktion,

1197
01:11:10,460 --> 01:11:13,430
och detta är nu en genväg.

1198
01:11:13,430 --> 01:11:18,830
Denna sträng HTML längst ned på skärmen naturligtvis har några träd representation.

1199
01:11:18,830 --> 01:11:21,730
Det är inte det här. Denna sida är mer intressant än detta hej, värld exempel.

1200
01:11:21,730 --> 01:11:25,210
Men det finns en del träd som motsvarar denna HTML.

1201
01:11:25,210 --> 01:11:28,910
Det skulle vara en smärta i nacken att genomföra någon form av rekursiv funktion

1202
01:11:28,910 --> 01:11:34,380
att börja på rotnoden och sedan hitta noden vars ID är registrering.

1203
01:11:34,380 --> 01:11:38,340
Så vad jQuery gör super lätt för oss är bokstavligen detta.

1204
01:11:38,340 --> 01:11:43,000
Gå vidare och få mig vad div eller någon form, oavsett HTML-element

1205
01:11:43,000 --> 01:11:45,820
har ett ID för registrering.

1206
01:11:45,820 --> 01:11:52,440
Detta motsvarar document.getElementById ('registrering').

1207
01:11:52,440 --> 01:11:54,170
>> Varför människor som jQuery?

1208
01:11:54,170 --> 01:12:00,110
Eftersom det är kortare att skriva. Men det är allt det är. Det är samma idé.

1209
01:12:00,110 --> 01:12:02,630
Ge mig taggen vars ID är registrering.

1210
01:12:02,630 --> 01:12:06,300
Och när den taggen, som råkar vara en form, in,

1211
01:12:06,300 --> 01:12:08,300
gå vidare och köra denna kod.

1212
01:12:08,300 --> 01:12:11,320
Så låt oss ta en titta nu på hur vi gör formulär validering.

1213
01:12:11,320 --> 01:12:15,950
Syntaxen är visserligen kryptiskt först, men vad händer?

1214
01:12:15,950 --> 01:12:21,050
Om den här kodraden är sant, jag ska skrika på användaren att tillhandahålla hans eller hennes e-postadress.

1215
01:12:21,050 --> 01:12:22,970
Så vad är denna kodrad?

1216
01:12:22,970 --> 01:12:25,560
$ Betyder jQuery. Nu märker detta.

1217
01:12:25,560 --> 01:12:27,920
Detta är ungefär som CSS.

1218
01:12:27,920 --> 01:12:33,370
Om du har dök in CSS ännu vet du att detta betyder att elementet vars ID är registrering.

1219
01:12:33,370 --> 01:12:39,840
Utrymmet innebär att hitta ett barn eller en ättling till registrering vars namn matas in.

1220
01:12:39,840 --> 01:12:42,970
Och då denna sak inom hakparentes är lite filter.

1221
01:12:42,970 --> 01:12:47,010
Och även om det ser kryptisk, innebär detta bara att gå till formuläret vars ID är registrering,

1222
01:12:47,010 --> 01:12:51,230
gå till ingångselementet insidan av den vars namn är e-post,

1223
01:12:51,230 --> 01:12:55,440
och sedan få dess värde, oavsett dess värde råkar vara -

1224
01:12:55,440 --> 01:12:59,670
asdf om det är allt jag skrivit eller malan@harvard.edu om det är vad jag skrev.

1225
01:12:59,670 --> 01:13:05,250
Så om värdet av formen e fält == ingenting, skrika på användaren.

1226
01:13:05,250 --> 01:13:09,700
Annars om värdet lösenordsfältet == ingenting, skrika på användaren.

1227
01:13:09,700 --> 01:13:19,520
>> Annars om värdet av lösenordet fältet inte lika med värdet av bekräftelsen fältet,

1228
01:13:19,520 --> 01:13:22,850
som var den andra formelement, skrika på användaren.

1229
01:13:22,850 --> 01:13:25,680
Och sedan slutligen - och här har även några nya syntaxen för sin egen,

1230
01:13:25,680 --> 01:13:29,270
men när du har sett det, det är åtminstone lite mer rimligt -

1231
01:13:29,270 --> 01:13:34,060
else if formen vars ID är registreringen har en ingång element vars namn är överens

1232
01:13:34,060 --> 01:13:39,720
och det kontrolleras, gå vidare och skrika på användaren.

1233
01:13:39,720 --> 01:13:42,520
Så jag erkänner helt detta är helt överväldigande vid första anblicken.

1234
01:13:42,520 --> 01:13:46,530
Det är en hel del ny syntax. Men alla jQuery följer dessa typer av mönster.

1235
01:13:46,530 --> 01:13:49,880
Och ärligt talat, jag vet inte ens det existerade tills för några minuter sedan.

1236
01:13:49,880 --> 01:13:53,640
Jag googlade, "Hur kan du kontrollera om en kryssruta är markerad i jQuery?"

1237
01:13:53,640 --> 01:13:55,680
och detta är syntaxen, eftersom det finns olika sätt att göra det

1238
01:13:55,680 --> 01:13:58,010
med den faktiska rå JavaScript-kod.

1239
01:13:58,010 --> 01:14:01,030
Så som den allra första sidan i problembild 7 betonar

1240
01:14:01,030 --> 01:14:04,500
pset 7 är mycket en övning i bootstrapping själv

1241
01:14:04,500 --> 01:14:08,650
där vi har gett, förhoppningsvis, en tankeram som man kan ta itu med pset.

1242
01:14:08,650 --> 01:14:12,280
>> Men som ofta är fallet med webbdesign, är det upp till dig verkligen att rota,

1243
01:14:12,280 --> 01:14:16,680
införliva kodavsnitt och exempel från webben så länge du citerar dem

1244
01:14:16,680 --> 01:14:17,960
Enligt villkoren på den första plåten,

1245
01:14:17,960 --> 01:14:21,460
och inse att lära HTML, CSS, Javascript och även SQL

1246
01:14:21,460 --> 01:14:26,020
är verkligen tänkt att vara det at-home motion som vi börjar ta dessa stödhjul av.

1247
01:14:26,020 --> 01:14:29,150
Och inser också att det finns så många fler saker du kan göra med en webbläsare.

1248
01:14:29,150 --> 01:14:33,790
Inuti de flesta av dessa element finns det andra saker som kallas händelsehanterare.

1249
01:14:33,790 --> 01:14:37,140
Och även om vi bara tittat på dem som kallas onSubmit och onready,

1250
01:14:37,140 --> 01:14:40,310
Du kan göra saker som onKeyDown, onKeyUp,

1251
01:14:40,310 --> 01:14:43,410
som när användaren rör en nyckel, kan du lyssna på det och uppåt.

1252
01:14:43,410 --> 01:14:45,940
Gmail har kortkommandon.

1253
01:14:45,940 --> 01:14:49,490
Hur genomför Google kortkommandon som C komponera?

1254
01:14:49,490 --> 01:14:54,120
De lyssnar efter händelser, som de kallas, som onkeypress eller onKeyUp och onKeyDown.

1255
01:14:54,120 --> 01:14:56,360
Om du någonsin svävade musen över vissa menyalternativ

1256
01:14:56,360 --> 01:15:00,180
och helt plötsligt, voila, visas en meny eller grafiken ändrar färg,

1257
01:15:00,180 --> 01:15:01,920
Hur gör de det?

1258
01:15:01,920 --> 01:15:06,940
Hellre än att lyssna efter onready eller onSubmit, lyssnar du onMouseOver och onMouseOut.

1259
01:15:06,940 --> 01:15:10,920
>> Så kort sagt, med dessa mycket enkla grunderna som vi har börjat skrapa på ytan av dagens

1260
01:15:10,920 --> 01:15:13,940
och vi dyka i ytterligare onsdagen du har, allt,

1261
01:15:13,940 --> 01:15:17,530
befogenhet att genomföra den typen av saker som du redan är bekant med.

1262
01:15:17,530 --> 01:15:21,620
Så låt oss sluta där, och vi kommer att fortsätta med detta på onsdag.

1263
01:15:22,690 --> 01:15:24,320
>> [CS50.TV]