1
00:00:00,000 --> 00:00:02,570
[Powered by Google Translate] [Uge 9]

2
00:00:02,570 --> 00:00:04,740
[David J. Malan - Harvard University]

3
00:00:04,740 --> 00:00:07,170
[Dette er CS50. - CS50.TV]

4
00:00:07,170 --> 00:00:12,350
Ok. Velkommen tilbage. Dette er CS50, og dette er begyndelsen af ​​uge 9.

5
00:00:12,350 --> 00:00:16,600
I dag har vi især fokusere på design, ikke længere i forbindelse med C

6
00:00:16,600 --> 00:00:20,010
men i forbindelse med PHP og lidt af SQL og lidt af JavaScript,

7
00:00:20,010 --> 00:00:23,730
især mod en ende af både Pset 7 og også dit afgangsprojekt.

8
00:00:23,730 --> 00:00:26,310
I virkeligheden, hvis du er på det punkt i din endelige projekt

9
00:00:26,310 --> 00:00:30,100
hvor formodentlig som af en time eller så siden du i det mindste begyndt at give nogle tanker

10
00:00:30,100 --> 00:00:33,730
til din endelige projekt, og du tænker du gerne vil samarbejde med 1 eller 2 klassekammerater,

11
00:00:33,730 --> 00:00:36,150
hvis du har problemer med at forbinde med de nævnte klassekammerater,

12
00:00:36,150 --> 00:00:40,570
velkommen til at udfylde formularen på cs50.net/partners/form.

13
00:00:40,570 --> 00:00:42,880
Det bare spørger dig, hvem du er, hvad slags projekt, du tænker på,

14
00:00:42,880 --> 00:00:44,870
hvor du bor bare af logistiske grunde.

15
00:00:44,870 --> 00:00:49,510
Og så hvis du ønsker at holde øje med i løbet af den næste uge eller så regnearket URL der,

16
00:00:49,510 --> 00:00:53,520
du kan derefter se en skrivebeskyttet version af Google doc

17
00:00:53,520 --> 00:00:56,010
hvor vi indsamle disse oplysninger.

18
00:00:56,010 --> 00:00:58,930
Så hvis du ønsker at arbejde med nogen, med alle midler velkommen til at nå ud til folk

19
00:00:58,930 --> 00:01:00,480
via denne mekanisme.

20
00:01:00,480 --> 00:01:02,690
Men flertallet af folk gøre arbejdet solo. Det er helt fint.

21
00:01:02,690 --> 00:01:06,120
Så du skal ikke føle, at dette på nogen måde er obligatorisk.

22
00:01:06,120 --> 00:01:09,680
På fredag ​​var det bare mig og et par af holdet herinde,

23
00:01:09,680 --> 00:01:11,100
tom teater for det meste.

24
00:01:11,100 --> 00:01:14,600
Der var 3 turister sidder deroppe, så det var en smule akavet.

25
00:01:14,600 --> 00:01:18,970
Hvad vi talte om var databaser og vi talte om Pset 7 en lille smule.

26
00:01:18,970 --> 00:01:22,200
Og hvis du ikke tilfældigvis til at fange det på video endnu, det er fint.

27
00:01:22,200 --> 00:01:26,770
Jeg vil prøve at definere eventuelle vilkår, som vi ellers ville tage for givet

28
00:01:26,770 --> 00:01:28,840
baseret på fredagens foredrag.

29
00:01:28,840 --> 00:01:32,550
>> Men i dag vil vi forsøge at få dig til det punkt,

30
00:01:32,550 --> 00:01:34,990
af ikke bare at være i stand til at gøre noget lignende Pset 7

31
00:01:34,990 --> 00:01:37,360
men virkelig at forstå, hvad der foregår under kølerhjelmen,

32
00:01:37,360 --> 00:01:41,910
især nogle af de abstraktioner, som vi kommer på plads i functions.php filen

33
00:01:41,910 --> 00:01:45,780
til at gøre jeres liv en smule nemmere, men så du i sidste ende forstå

34
00:01:45,780 --> 00:01:48,760
så når støttehjul kommer ud i et par uger, kan du stadig overleve

35
00:01:48,760 --> 00:01:53,750
i den virkelige verden og gøre det her uden nogen CS50 rammer under dig.

36
00:01:53,750 --> 00:01:57,500
Denne $ _SESSION, for dem af jer der kender

37
00:01:57,500 --> 00:02:01,960
eller som allerede fanget den video på fredag, hvad SESSION lad os gøre

38
00:02:01,960 --> 00:02:04,330
i et PHP-baseret web-applikation?

39
00:02:04,330 --> 00:02:09,650
Dette er en superglobal variabel, hvilket betyder, at det er samme ånd at GET og POST

40
00:02:09,650 --> 00:02:13,970
og et par andre, men hvad er det her nyttigt for?

41
00:02:13,970 --> 00:02:18,320
>> Hvad er SESSION til? Yeah. [Studerende] Logger ind

42
00:02:18,320 --> 00:02:21,040
Undskyld? [Studerende] Logger ind Logger ind Indeed.

43
00:02:21,040 --> 00:02:25,100
I Pset 7 vi bruger denne SESSION superglobal at lette logge ind

44
00:02:25,100 --> 00:02:28,600
Og hvad er rart om denne superglobal er, at det er et associativt array.

45
00:02:28,600 --> 00:02:33,190
Et associativt array, husker, er blot et array, men hvis indekser ikke længere behøver at være tal

46
00:02:33,190 --> 00:02:37,670
ligesom 012. De kan være tal eller de kan være selv strenge.

47
00:02:37,670 --> 00:02:44,890
Og så hvis du har dykket ned Pset 7 endnu, kan du huske, at vi opbevarer en nøgle kaldet ID

48
00:02:44,890 --> 00:02:50,330
indersiden af ​​dette associative array, hvis værdi er noget i retning af 123 -

49
00:02:50,330 --> 00:02:53,780
uanset den aktuelt indloggede bruger id er.

50
00:02:53,780 --> 00:02:59,470
Motivationen til dette er, at selv efter at brugeren har besøgt localhost

51
00:02:59,470 --> 00:03:02,720
eller min hjemmeside mere generelt og derefter de har logget ind,

52
00:03:02,720 --> 00:03:07,320
selv om de ikke klikke på et link eller vende tilbage til min hjemmeside i 5 minutter

53
00:03:07,320 --> 00:03:10,730
eller endda en time eller endda en dag, men de forlader deres browser vinduet åbent,

54
00:03:10,730 --> 00:03:14,370
via denne superglobal kan jeg huske, at de er logget ind

55
00:03:14,370 --> 00:03:21,140
>> Med andre ord giver det mig at gemme lidt længere sigt hvad jeg vil om en bruger.

56
00:03:21,140 --> 00:03:24,390
Og du kan tænke på det virkelig som inkarnationen af ​​en indkøbsvogn.

57
00:03:24,390 --> 00:03:27,740
Steder som Amazon naturligvis lade dig sætte tingene i en indkøbsvogn,

58
00:03:27,740 --> 00:03:32,230
men HTTP, protokollen, der driver nettet, er statsløs

59
00:03:32,230 --> 00:03:34,230
i den forstand, at når du besøger en hjemmeside,

60
00:03:34,230 --> 00:03:37,290
for det meste, du ikke har nogle konstant netværksforbindelse

61
00:03:37,290 --> 00:03:39,270
mellem din browser og serveren.

62
00:03:39,270 --> 00:03:42,190
Så snart du har downloadet HTML og JPEG og GIF og alt det,

63
00:03:42,190 --> 00:03:48,200
forbindelsen går væk og du bare har en kopi af HTML og whatnot fra serveren.

64
00:03:48,200 --> 00:03:53,000
Men hvis serveren ønsker at huske noget om dig,

65
00:03:53,000 --> 00:03:57,580
byrden er på serveren til rent faktisk at registrere disse oplysninger.

66
00:03:57,580 --> 00:04:00,130
Og så du den programmør, der har kontrol over serveren

67
00:04:00,130 --> 00:04:04,400
kan sætte de fleste noget, du ønsker inde i denne superglobal associative array

68
00:04:04,400 --> 00:04:06,850
og det vil være der næste gang brugeren kommer tilbage,

69
00:04:06,850 --> 00:04:12,070
uanset om det er minutter eller endda dage senere, medmindre de lukker deres browser vindue,

70
00:04:12,070 --> 00:04:14,360
på hvilket tidspunkt SESSION forsvinder.

71
00:04:14,360 --> 00:04:17,779
Så det er flygtig lagring, det er ikke-vedvarende, og det er meningen at gå væk

72
00:04:17,779 --> 00:04:22,360
så snart brugeren lukker deres browser - ikke bare, at fanen, ofte hele browseren,

73
00:04:22,360 --> 00:04:24,930
derved effektivt at logge brugeren ud.

74
00:04:24,930 --> 00:04:28,000
Så hvordan er denne ting faktisk gennemføres?

75
00:04:28,000 --> 00:04:31,360
Lad os tage et hurtigt kig på et simpelt eksempel så vi på fredag.

76
00:04:31,360 --> 00:04:33,340
For dem bekendt, var det så simpelt som dette.

77
00:04:33,340 --> 00:04:35,910
Dette er en webside, hvis eneste formål i livet er at fortælle mig

78
00:04:35,910 --> 00:04:38,000
hvor mange gange jeg har besøgt denne side.

79
00:04:38,000 --> 00:04:41,670
Det er første gang her i mandags, at jeg besøgte det, så det siger 0 gange.

80
00:04:41,670 --> 00:04:46,940
>> Men hvis jeg begynder at genindlæse denne side, det siger 1 gang, 2, 3, 4, 5,

81
00:04:46,940 --> 00:04:49,800
og det vil i sidste ende bare holde på at tælle op, op, op, op, op

82
00:04:49,800 --> 00:04:53,130
for hver gang jeg faktisk Klik på genindlæs på det.

83
00:04:53,130 --> 00:04:58,830
Så hvordan er dette arbejde? Lad mig gå inde i denne fil kaldet counter.php.

84
00:04:58,830 --> 00:05:02,490
Den øverste del af det er alle blå kommentarer, men den interessante del er her.

85
00:05:02,490 --> 00:05:06,670
På linje 13 kalder vi denne funktion session_start,

86
00:05:06,670 --> 00:05:09,600
og det er bogstaveligt talt alt hvad du behøver at gøre, hvis du ønsker at have adgang

87
00:05:09,600 --> 00:05:13,610
til denne særlige superglobal kaldet $ _SESSION.

88
00:05:13,610 --> 00:05:17,430
Det gør det hele muligt, og vi vil se om et øjeblik, hvordan det er alt muligt.

89
00:05:17,430 --> 00:05:20,350
I linie 16 varsel hvad jeg gør.

90
00:05:20,350 --> 00:05:25,960
Hvis nøglen, kaldet counter - med andre ord indeksværdien - "tæller"

91
00:05:25,960 --> 00:05:32,310
eksisterer inde i dette array kaldet SESSION, så hvad gør jeg med det i linjen nedenfor?

92
00:05:32,310 --> 00:05:36,650
Hvad er linie 18 laver?

93
00:05:36,650 --> 00:05:40,360
>> [Uhørlig student svar] Hvad er det? [Studerende] Lagring værdien. Godt.

94
00:05:40,360 --> 00:05:45,800
Det er lagring af værdi, der er i SESSION lige nu i en ny lokal midlertidig variabel,

95
00:05:45,800 --> 00:05:48,250
$ Tæller i alle små bogstaver.

96
00:05:48,250 --> 00:05:50,770
Bemærk, at PHP allerede er ved at blive lidt doven her.

97
00:05:50,770 --> 00:05:55,550
Bemærk vi har ikke nogen omtale af int eller float eller snor eller noget i den retning

98
00:05:55,550 --> 00:06:00,480
fordi PHP svagt er skrevet, hvor du ikke behøver at angive, hvilken type af en variabel,

99
00:06:00,480 --> 00:06:03,310
og i dette tilfælde her har jeg ikke engang erklærede det endnu.

100
00:06:03,310 --> 00:06:08,980
Jeg erklærer det indersiden af ​​disse krøllede parenteser og i modsætning til C, er det faktisk okay.

101
00:06:08,980 --> 00:06:13,800
Ligegyldigt hvor dybt indlejret en variabel erklæring er i PHP -

102
00:06:13,800 --> 00:06:16,650
indersiden af ​​klammeparentes, inde i klammeparentes og lignende -

103
00:06:16,650 --> 00:06:21,230
Det vil på dette tidspunkt eksisterer for resten af ​​programmet,

104
00:06:21,230 --> 00:06:22,680
for bedre eller værre.

105
00:06:22,680 --> 00:06:26,930
Så det bliver straks global, så snart du definere det som vi laver her.

106
00:06:26,930 --> 00:06:31,620
>> Ellers, hvis jeg ikke finder, at der er noget i SESSION superglobal,

107
00:06:31,620 --> 00:06:34,680
Jeg er åbenbart initialiserer denne variabel tæller til 0,

108
00:06:34,680 --> 00:06:37,580
derved blot antager, at brugeren har aldrig været her før.

109
00:06:37,580 --> 00:06:40,030
Og så dette naturligvis er inkrementere tælleren hvordan?

110
00:06:40,030 --> 00:06:44,480
Jeg opdatere den værdi, der er inde i denne associative array

111
00:06:44,480 --> 00:06:49,530
ved at sætte det lig med, hvad tæller i øjeblikket er + 1.

112
00:06:49,530 --> 00:06:53,520
Hvis jeg rulle ned her til HTML på siden, det er faktisk ret simpelt.

113
00:06:53,520 --> 00:06:58,920
Alt, hvad jeg har i kroppen på denne side er: "Du har besøgt denne hjemmeside, så-og-så gange."

114
00:06:58,920 --> 00:07:00,350
Og det er en PHP konstruktion.

115
00:07:00,350 --> 00:07:06,080
Hvis du gør <? =, Svarer det faktisk til, hvad funktion?

116
00:07:07,920 --> 00:07:12,600
Det er virkelig svarer til noget i retning af printf, som vi har set mange gange i C,

117
00:07:12,600 --> 00:07:15,940
selvom som du måske allerede kender fra spec i Pset 7,

118
00:07:15,940 --> 00:07:20,160
print er også en funktion, der bare udskriver noget ud, betyder det faktisk ikke bruge format koder,

119
00:07:20,160 --> 00:07:23,270
og du kan faktisk sige ekko så godt.

120
00:07:23,270 --> 00:07:27,460
De er alle nogensinde så lidt anderledes, selvom nettoeffekten er i sidste ende det samme.

121
00:07:27,460 --> 00:07:31,270
Så denne brug af lighedstegnet er lige slags en elegant måde at gøre det

122
00:07:31,270 --> 00:07:34,910
mere kortfattet end du ellers ville være i stand til.

123
00:07:34,910 --> 00:07:38,370
Så det er alt dette site gør. Det udskriver værdien af ​​tælleren.

124
00:07:38,370 --> 00:07:40,550
Hvordan alt dette faktisk sker?

125
00:07:40,550 --> 00:07:43,250
Du husker måske en uges tid siden vi begyndte at kigge under kølerhjelmen

126
00:07:43,250 --> 00:07:47,910
på, hvordan en webside fungerer ved hjælp af denne Inspector fane.

127
00:07:47,910 --> 00:07:51,900
>> Chrome har denne både i Mac-version, Windows-versionen, og selv Linux version,

128
00:07:51,900 --> 00:07:59,510
og Firefox og IE har lignende mekanismer, hvorved du har denne indbyggede debugger

129
00:07:59,510 --> 00:08:01,400
indersiden af ​​browseren.

130
00:08:01,400 --> 00:08:03,040
Lad os tage et kig på følgende.

131
00:08:03,040 --> 00:08:06,960
Vi har en hel bunke af faner her, og minde om, at den længst til venstre er Elements,

132
00:08:06,960 --> 00:08:10,700
og uanset hvor godawful HTML og JavaScript er i en side,

133
00:08:10,700 --> 00:08:15,710
minde om, at med den Elements fanebladet kan du faktisk navigere HTML hierarkisk

134
00:08:15,710 --> 00:08:17,050
og nice og pænt.

135
00:08:17,050 --> 00:08:19,370
Så hvis du forsøger at lære fra en hjemmeside som Google eller Facebook

136
00:08:19,370 --> 00:08:22,370
eller virkelig ethvert websted, indse, at du sandsynligvis bedre stillet

137
00:08:22,370 --> 00:08:26,360
ser på kildekoden på denne måde i modsætning til at se den rå kilde,

138
00:08:26,360 --> 00:08:29,580
som kan være en rod, som vi har set specielt på Googles hjemmeside.

139
00:08:29,580 --> 00:08:32,220
Så hvis jeg i stedet klikke på fanen Netværk her,

140
00:08:32,220 --> 00:08:34,830
lad os se hvad der sker, når jeg besøger denne side.

141
00:08:34,830 --> 00:08:38,669
Først lad mig rydde cachen.

142
00:08:38,669 --> 00:08:43,570
Jeg har tænkt mig at gå ind i Indstillinger i Chrome og derefter gå til History

143
00:08:43,570 --> 00:08:46,420
og derefter Ryd alle browserdata.

144
00:08:46,420 --> 00:08:48,170
Du kan blive brugt til at gøre dette til andre formål, [latter]

145
00:08:48,170 --> 00:08:51,990
men når det kommer til at udvikle hjemmesider, det er faktisk nyttigt -

146
00:08:51,990 --> 00:08:55,980
hvis du griner du kender. [Latter]

147
00:08:55,980 --> 00:08:59,310
Det er faktisk rigtig nyttig, når de udvikler hjemmesider, fordi virkeligheden er

148
00:08:59,310 --> 00:09:04,100
ting som cookies og ting som cachelagrede HTML-filer, cachelagrede JavaScript-filer

149
00:09:04,100 --> 00:09:06,390
kan faktisk blive en stor hovedpine, fordi hvis en eller anden grund

150
00:09:06,390 --> 00:09:11,500
browseren beslutter at cache nogle fil og endnu du har foretaget ændringer i denne fil på serveren

151
00:09:11,500 --> 00:09:14,670
men browseren har ikke rigtig indset, at denne fil er ændret

152
00:09:14,670 --> 00:09:19,060
og derfor ikke reelt downloade den igen, selv når du klikker på knappen Genindlæs,

153
00:09:19,060 --> 00:09:23,210
en af ​​de mest surefire måder at bare sørg fejlen er ikke med din kode,

154
00:09:23,210 --> 00:09:26,480
Det er med opførslen af ​​browseren, er at gå i her i din browser

155
00:09:26,480 --> 00:09:29,950
og bare rydde hele historie, så der er ingen forvirring.

156
00:09:29,950 --> 00:09:33,210
>> Og så hvis du virkelig ønsker at være paranoid, lukke browseren, skal du genstarte den,

157
00:09:33,210 --> 00:09:35,660
og derefter sørge for alt fungerer som forventet.

158
00:09:35,660 --> 00:09:38,820
Så kort sagt, er clearing cache god, når du laver udvikling.

159
00:09:38,820 --> 00:09:40,690
Så her har vi fanen Netværk.

160
00:09:40,690 --> 00:09:46,020
Jeg havde tidligere besøgt webstedet 9 gange, men lad mig gå videre nu, og klik Reload.

161
00:09:46,020 --> 00:09:47,500
Og jeg er tilbage ned til 0.

162
00:09:47,500 --> 00:09:52,100
Lad os faktisk se, hvordan det er, at denne session superglobal bliver gennemført.

163
00:09:52,100 --> 00:09:55,990
Jeg har tænkt mig at klikke på 1 HTTP-anmodning, der blev gjort,

164
00:09:55,990 --> 00:09:58,810
og denne debugging vindue lader mig se ind i det.

165
00:09:58,810 --> 00:10:01,970
Her ser jeg bare svar fra serveren, hvilket ikke er interessant.

166
00:10:01,970 --> 00:10:04,030
Jeg har set det i en række forskellige måder.

167
00:10:04,030 --> 00:10:06,350
Men hvad er teknisk interessant, er overskrifterne.

168
00:10:06,350 --> 00:10:11,770
Hvis jeg rulle ned her og fokusere på de overskrifter i anmodninger og klik på Vis kilde,

169
00:10:11,770 --> 00:10:14,400
hvad jeg har tænkt mig at se er bogstaveligt talt den HTTP-anmodning

170
00:10:14,400 --> 00:10:17,250
der bare gik fra min browser til serveren,

171
00:10:17,250 --> 00:10:21,400
GET være den udløsende ord og derefter / counter.php er filnavnet,

172
00:10:21,400 --> 00:10:25,670
HTTP/1.1 bare at være den version af HTTP, at min browser bruger.

173
00:10:25,670 --> 00:10:31,070
Denne linje her er der en lille påmindelse fra browser til server, hvad navnet på serveren er

174
00:10:31,070 --> 00:10:33,020
at det ønsker at tale med.

175
00:10:33,020 --> 00:10:38,200
Og derefter resten af ​​dette er til tider interessant, men ikke relevant lige nu.

176
00:10:38,200 --> 00:10:40,090
>> Dette er blot lidt af en nysgerrighed.

177
00:10:40,090 --> 00:10:43,530
Cryptic selvom denne streng er, når som helst din browser besøger et websted

178
00:10:43,530 --> 00:10:47,110
det er at informere serveren hvilken browser du bruger

179
00:10:47,110 --> 00:10:50,040
og hvilket operativsystem du bruger, og hvilken version deraf.

180
00:10:50,040 --> 00:10:52,650
Så hvis du nogensinde har spekuleret over, hvordan websites som CNN og whatnot

181
00:10:52,650 --> 00:10:56,860
vide, hvad de procenter er af Mac-brugere på nettet, pc-brugere,

182
00:10:56,860 --> 00:11:00,820
IE-brugere, Chrome-brugere og lignende, er det fordi alle vores browsere

183
00:11:00,820 --> 00:11:04,300
fortæller hver enkelt hjemmeside derude, hvad vi er.

184
00:11:04,300 --> 00:11:07,410
Det behøver ikke nødvendigvis indeholde personligt identificerbare oplysninger,

185
00:11:07,410 --> 00:11:13,060
men det gør fortælle serveren, hvad din IP-adresse er, og hvad browser og operativsystem du bruger.

186
00:11:13,060 --> 00:11:14,720
Så det er, hvor disse oplysninger er.

187
00:11:14,720 --> 00:11:19,960
Men hvad er mere interessant nu, når det kommer til disse møder er svaret header.

188
00:11:19,960 --> 00:11:22,530
Lad mig klikke på Vis kilde ved siden af ​​svar.

189
00:11:22,530 --> 00:11:24,590
Hvad er interessant her er et par ting.

190
00:11:24,590 --> 00:11:27,580
1, vi fik tilbage en status kode 200.

191
00:11:27,580 --> 00:11:29,840
Vi ser aldrig denne status kode, fordi det betyder, alt er godt.

192
00:11:29,840 --> 00:11:32,920
Det betyder bogstaveligt okay i modsætning til noget andet.

193
00:11:32,920 --> 00:11:36,380
Hvad er et tal, vi sommetider se det er skidt? [Studerende] 404.

194
00:11:36,380 --> 00:11:39,860
404, filen blev ikke fundet, kan 403 du humpe allerede,

195
00:11:39,860 --> 00:11:43,660
som er forbudt, hvilket betyder, at du har glemt at chmod noget, mest sandsynlige.

196
00:11:43,660 --> 00:11:45,190
Og der er en masse andre.

197
00:11:45,190 --> 00:11:47,760
>> Hernede, dette er en lidt skør.

198
00:11:47,760 --> 00:11:52,340
Jeg virkelig bare skrev denne fil for få minutter siden ved at indsætte det i gedit.

199
00:11:52,340 --> 00:11:57,100
Hvorfor denne side udløbe i 1981, før der virkelig var en Web?

200
00:11:58,010 --> 00:12:00,730
Hvad sker der?

201
00:12:00,730 --> 00:12:04,390
>> [Uhørlig student svar] The tidsstempel. Men hvorfor?

202
00:12:06,110 --> 00:12:09,120
Det er noget vilkårlig, men det er faktisk nyttigt.

203
00:12:09,120 --> 00:12:15,500
Hvad dette siger til min browser er denne PHP fil, du lige har anmodet om, er allerede udløbet.

204
00:12:15,500 --> 00:12:18,580
Faktisk udløbet det for 30 år siden.

205
00:12:18,580 --> 00:12:20,260
Men hvad betyder det egentlig?

206
00:12:20,260 --> 00:12:22,500
Det betyder bare, at det næste gang brugeren besøger denne side,

207
00:12:22,500 --> 00:12:25,540
enten ved at genindlæse eller skrive URL i adresselinjen,

208
00:12:25,540 --> 00:12:28,010
Sørg for du gå og hente en ny kopi af det.

209
00:12:28,010 --> 00:12:30,840
Det er en slags et eksempel på cache sprænge,

210
00:12:30,840 --> 00:12:33,790
en dum ord, der betyder bare forsøger at afskrække browsere

211
00:12:33,790 --> 00:12:37,260
fra faktisk caching HTML, der er blevet sendt fra en server

212
00:12:37,260 --> 00:12:41,490
så du ikke ved et uheld ramte reload og derefter se den samme version af filen.

213
00:12:41,490 --> 00:12:43,730
Du faktisk ønsker, at serveren til at sende en ny kopi.

214
00:12:43,730 --> 00:12:47,440
Så det faktum, at det er 1981 betyder blot, at det er, hvad apparatet er at vælge

215
00:12:47,440 --> 00:12:50,280
som en vilkårlig dato i fortiden.

216
00:12:50,280 --> 00:12:53,380
Men den virkelige saftigt linje er nu denne ene.

217
00:12:53,380 --> 00:12:57,550
Allerede inden 50 er du sikkert vagt bekendt med cookies.

218
00:12:57,550 --> 00:13:01,820
Som for lige nu, især blandt de mindre behagelige eller i mellem,

219
00:13:01,820 --> 00:13:04,120
hvad er en cookie i din forståelse lige nu

220
00:13:04,120 --> 00:13:06,980
selv om vi er ved at gøre din forståelse mere teknisk?

221
00:13:08,150 --> 00:13:10,070
Hvad er en cookie? Yeah.

222
00:13:10,070 --> 00:13:13,890
[Studerende] Information om brugeren, ligesom hvis de har skrevet deres brugernavn eller noget.

223
00:13:13,890 --> 00:13:17,370
>> Godt. Det er disse oplysninger om brugeren, uanset om de har indtastet i deres brugernavn allerede.

224
00:13:17,370 --> 00:13:21,190
Cookies er en måde, hvorved servere kan huske noget om en bruger.

225
00:13:21,190 --> 00:13:25,810
Og hvad en cookie er virkelig er en tekstfil eller en sekvens af bytes

226
00:13:25,810 --> 00:13:28,340
der er plantet af serveren indersiden af ​​din browser,

227
00:13:28,340 --> 00:13:31,960
og inde i denne fil eller blandt de bytes er en slags identifikator.

228
00:13:31,960 --> 00:13:35,640
Måske er det bogstaveligt talt dit brugernavn, men oftere er det noget mere kryptiske udseende

229
00:13:35,640 --> 00:13:43,700
som denne ting her - bo8dal3ct og så videre - dette virkelig store alfanumerisk streng

230
00:13:43,700 --> 00:13:47,050
der er virkelig bare ment som et entydigt id for dig.

231
00:13:47,050 --> 00:13:49,790
Eller du kan tænke på det som en slags virtuel hånd stempel.

232
00:13:49,790 --> 00:13:53,020
Hvis du går til nogle klub eller en forlystelsespark, at huske, at du rent faktisk har betalt

233
00:13:53,020 --> 00:13:55,850
og gået i, de sætter en lille rød mærkat på din hånd af en slags,

234
00:13:55,850 --> 00:13:59,270
og det minder folk på tælleren, du allerede har betalt

235
00:13:59,270 --> 00:14:01,340
og du kan komme og gå som du venligst.

236
00:14:01,340 --> 00:14:04,250
Cookies er en lille ligner i ånden til det.

237
00:14:04,250 --> 00:14:08,070
Første gang jeg besøgte denne hjemmeside, som jeg gjorde lige når du har ryddet min cache,

238
00:14:08,070 --> 00:14:11,620
webserveren, apparatet i dette tilfælde sætte et stempel på min hånd

239
00:14:11,620 --> 00:14:15,030
hvis navn er PHPSESSID, session-id,

240
00:14:15,030 --> 00:14:18,260
hvis værdi er dette virkelig lang alfanumerisk streng.

241
00:14:18,260 --> 00:14:22,470
>> Så det er nu slags emblazoned på min hånd, så næste gang jeg ramte genindlæse

242
00:14:22,470 --> 00:14:25,230
eller manuelt besøge denne URL i en browser,

243
00:14:25,230 --> 00:14:29,230
min browser ved definition af HTTP vil præsentere hånd stempel

244
00:14:29,230 --> 00:14:31,940
igen og igen og igen.

245
00:14:31,940 --> 00:14:34,550
Så selvom serveren ikke nødvendigvis ved, hvem jeg er,

246
00:14:34,550 --> 00:14:39,610
de i det mindste vide, at jeg er den samme bruger eller i det mindste mere specifikt den samme browser.

247
00:14:39,610 --> 00:14:45,660
Og så dette er i sidste ende, hvordan SESSION superglobal gennemføres.

248
00:14:45,660 --> 00:14:51,200
Serveren har ingen idé om, hvem du er, når du besøger en hjemmeside for anden eller tredje gang

249
00:14:51,200 --> 00:14:53,410
medmindre du præsenterer denne hånd stempel.

250
00:14:53,410 --> 00:14:55,530
Og så snart du præsenterer denne hånd stempel,

251
00:14:55,530 --> 00:14:59,370
webserveren det væsentlige går ind i en lille database for sig

252
00:14:59,370 --> 00:15:06,040
og checks, okay, jeg har lige set hånd stempel brugerens bo8dal3ct og så videre.

253
00:15:06,040 --> 00:15:09,850
Lad mig se, hvilke oplysninger programmøren har gemt

254
00:15:09,850 --> 00:15:12,380
indersiden af ​​superglobal om denne bruger,

255
00:15:12,380 --> 00:15:17,000
og så lad mig sørge for, at disse data er igen inde i SESSION superglobal

256
00:15:17,000 --> 00:15:19,830
således at programmøren kan re-adgang til disse data

257
00:15:19,830 --> 00:15:23,360
selv om det blev sat nogle minutter eller timer siden.

258
00:15:23,360 --> 00:15:26,150
Så med andre ord, cookies, som fik en dårlig rap i nogen tid

259
00:15:26,150 --> 00:15:29,990
på grund af usikkerhed i browsere og de kan virkelig overtræder vores privatliv og alt dette,

260
00:15:29,990 --> 00:15:31,900
de faktisk har stor nytte, fordi uden dem

261
00:15:31,900 --> 00:15:36,110
De ville hele tiden være at logge ind på hver Facebook-side, du besøger

262
00:15:36,110 --> 00:15:40,680
eller hver Gmail e-mail, du læser hvis browseren ikke havde nogen måde at huske

263
00:15:40,680 --> 00:15:43,320
som du allerede har godkendt.

264
00:15:43,320 --> 00:15:46,640
>> Så på denne måde cookies sendes frem og tilbage over tråden.

265
00:15:46,640 --> 00:15:52,470
En anden nysgerrighed om cookies, især her, er, at dette er helt i klartekst.

266
00:15:52,470 --> 00:15:54,930
Der er ingen kryptering foregår her overhovedet,

267
00:15:54,930 --> 00:15:57,240
og faktisk jeg bruger HTTP i øjeblikket.

268
00:15:57,240 --> 00:16:00,890
En af vores favoritter øjeblikke i CS50, som nu er 2 år siden,

269
00:16:00,890 --> 00:16:04,750
blev omkring det tidspunkt et værktøj kaldet Firesheep kom ud.

270
00:16:04,750 --> 00:16:08,320
Dette var en gratis stykke software, der blev foretaget af en sikkerhedsekspert

271
00:16:08,320 --> 00:16:13,250
som et wake-up call for samfundet at sige, hvor afskyeligt implementeret

272
00:16:13,250 --> 00:16:17,900
visse autentificeringsmekanismer på internettet var.

273
00:16:17,900 --> 00:16:22,880
Så for et stykke tid, var Facebook næsten udelukkende via HTTP, ingen HTTPS.

274
00:16:22,880 --> 00:16:25,640
Og selv hvis du har ingen idé om, hvordan den krypto virker, S er sikker

275
00:16:25,640 --> 00:16:27,950
så det betyder, at der er i det mindste nogle kryptering involveret.

276
00:16:27,950 --> 00:16:30,610
Facebook har brugt til at kryptere brugernavne og adgangskoder,

277
00:16:30,610 --> 00:16:33,560
men så snart du kigget på din stikker eller dine beskeder eller din news feed,

278
00:16:33,560 --> 00:16:35,360
alt dette er ukrypteret.

279
00:16:35,360 --> 00:16:37,870
Så var Gmail indtil bare et år eller 2 siden.

280
00:16:37,870 --> 00:16:41,100
Hver gang du loggede på, ja, de brugte sikker kryptering,

281
00:16:41,100 --> 00:16:44,300
men derefter gjorde de ikke. Og hvorfor er det?

282
00:16:44,300 --> 00:16:49,210
Hvorfor ikke bare bruge kryptografi hele tiden i use cases som denne?

283
00:16:49,210 --> 00:16:53,700
Hvad er det? Jeg tror, ​​jeg har hørt noget. [Studerende] Speed.

284
00:16:53,700 --> 00:16:56,250
Hastighed, right? Der er måder omkring dette.

285
00:16:56,250 --> 00:16:59,610
Men hvis du bare slags tænker over det logisk, hvis du krypterer noget,

286
00:16:59,610 --> 00:17:01,820
du er nødt til at gøre mindst en lidt mere arbejde.

287
00:17:01,820 --> 00:17:05,460
I Pset 2, når du implementeret Cæsar eller Vigenere eller endda Knæk,

288
00:17:05,460 --> 00:17:07,760
bare udskriver en streng er forholdsvis let.

289
00:17:07,760 --> 00:17:12,040
Kryptering og derefter udskrive en streng minimalt kræver lidt mere arbejde.

290
00:17:12,040 --> 00:17:14,520
>>  For super populære hjemmesider som Google og Facebook,

291
00:17:14,520 --> 00:17:18,839
hvis du er nødt til at gøre mere arbejde for hver bruger for hver enkelt webside, de besøger,

292
00:17:18,839 --> 00:17:20,520
der bare tager mere CPU-tid.

293
00:17:20,520 --> 00:17:22,920
Og hvis du har brug for mere CPU-tid, skal du måske flere servere,

294
00:17:22,920 --> 00:17:24,270
hvilket betyder, at du måske brug for flere penge.

295
00:17:24,270 --> 00:17:27,579
Og så i mange år dette bare virkelig var ikke den bedste praksis.

296
00:17:27,579 --> 00:17:31,440
Folk ville bruge SSL-kryptering, når de havde brug for.

297
00:17:31,440 --> 00:17:34,960
Men det viste sig, og da denne fyr med Firesheep gjorde super klar,

298
00:17:34,960 --> 00:17:37,920
når du fyre, der er i øjeblikket på Facebook lige nu -

299
00:17:37,920 --> 00:17:39,880
Ud af nysgerrighed, lad os se om du vil Fess op.

300
00:17:39,880 --> 00:17:42,620
Hvis du er på Facebook lige nu i nogle fane, selvom det ikke er i forgrunden,

301
00:17:42,620 --> 00:17:46,610
er din URL HTTP eller HTTPS?

302
00:17:46,610 --> 00:17:50,560
[Flere studerende] S. S? [Latter]

303
00:17:50,560 --> 00:17:55,510
Okay. Enhver HTTP? Bare 1? Okay.

304
00:17:55,510 --> 00:17:58,940
Så vi alle kan hacke den fyrs Facebook-konto lige nu.

305
00:17:58,940 --> 00:18:04,100
For det meste er dette blevet slået til som standard, i det mindste i nogle hjemmesider.

306
00:18:04,100 --> 00:18:08,120
Og lang historie kort, hvis din webtrafik ikke er krypteret,

307
00:18:08,120 --> 00:18:12,960
ikke alene HTML gå frem og tilbage over de WiFis ukrypterede,

308
00:18:12,960 --> 00:18:16,760
så du skal ting som cookies gå frem og tilbage i hele luften

309
00:18:16,760 --> 00:18:18,940
uden nogen form for kryptering.

310
00:18:18,940 --> 00:18:23,540
Så hvis du har bare en smule af programmeringen kyndige eller en smule Googling færdigheder

311
00:18:23,540 --> 00:18:27,410
at finde gratis software, der gør dette, er alt du skal gøre sidde i Starbucks

312
00:18:27,410 --> 00:18:30,680
eller sidde i en lufthavn, hvor der er generelt ukrypteret WiFi

313
00:18:30,680 --> 00:18:36,070
og bare holde øje med søgeord som Set-Cookie: eller PHPSESSID

314
00:18:36,070 --> 00:18:39,300
fordi hvis du har den tekniske kyndige bare for at se den WiFi

315
00:18:39,300 --> 00:18:43,010
for alle de bits, der flyder igennem luften for dette mønster,

316
00:18:43,010 --> 00:18:50,840
du kan da sige, at fyrens PHPSESSID sker for at være bo8dal og så videre.

317
00:18:50,840 --> 00:18:53,890
Og så igen, hvis du er tilstrækkeligt teknisk kyndige eller har det rigtige værktøj,

318
00:18:53,890 --> 00:18:58,890
du kan derefter bare omkonfigurere din egen browser for at begynde at fremsætte denne hånd stempel

319
00:18:58,890 --> 00:19:05,030
til Facebook.com, og Facebook er lige til at antage, at du er den fyr

320
00:19:05,030 --> 00:19:09,880
fordi alle de ved ikke er, hvem du er, men at du har denne unikke identifikator.

321
00:19:09,880 --> 00:19:14,650
Så hvis du stjæler den unikke identifikator og præsentere det til webserveren som din egen,

322
00:19:14,650 --> 00:19:16,860
de er lige til at vise dig denne persons news feed

323
00:19:16,860 --> 00:19:18,980
eller denne persons beskeder eller pokes.

324
00:19:18,980 --> 00:19:23,190
>> Og jeg vil Google nu, hvordan du aktiverer HTTPS for Facebook måske.

325
00:19:23,190 --> 00:19:25,150
Men det er virkelig så simpelt er det.

326
00:19:25,150 --> 00:19:27,660
Og så Facebook og Google og lignende har fået rigtig god til dette,

327
00:19:27,660 --> 00:19:31,870
men hold øje desto mere for eventuelle websteder, du besøger, der ikke bruger HTTP

328
00:19:31,870 --> 00:19:35,020
og har en form for følsomme oplysninger om dem,

329
00:19:35,020 --> 00:19:37,490
uanset om det er økonomisk eller personlig eller lignende.

330
00:19:37,490 --> 00:19:43,180
Hvis de ikke bruger dette, kan muligvis cookies som dette være meget nemt stjålet

331
00:19:43,180 --> 00:19:46,270
og derefter forfalsket, og det er præcis, hvad Firesheep gjorde.

332
00:19:46,270 --> 00:19:48,250
Du behøvede ikke at være programmør.

333
00:19:48,250 --> 00:19:51,680
Alt du havde at gøre, var har en internetforbindelse, skal du hente det gratis værktøj,

334
00:19:51,680 --> 00:19:56,490
og hvad det ville gøre, er at du logger ind og så ville det vise dig de Facebook-navne

335
00:19:56,490 --> 00:20:00,170
af alle i Sanders, i dette særlige demonstration, omkring dig

336
00:20:00,170 --> 00:20:03,260
og alt hvad du havde at gøre var at klikke på deres navn og den software, automatiseret proces

337
00:20:03,260 --> 00:20:05,970
af sniffing denne cookie, forelægger det for Facebook som din egen,

338
00:20:05,970 --> 00:20:07,990
og voila, du er logget ind

339
00:20:07,990 --> 00:20:11,190
Så dette er en anden af ​​dem "ikke gøre det" officielt.

340
00:20:11,190 --> 00:20:14,660
Hvis du har dit eget hjemmenetværk, og du ønsker at pille, med alle midler,

341
00:20:14,660 --> 00:20:17,530
men indse dette gør passere linjen på et universitet miljø.

342
00:20:17,530 --> 00:20:20,030
>> Men målet her er virkelig at understrege ikke hvordan du gør dette

343
00:20:20,030 --> 00:20:22,320
men hvordan man forsvare sig mod den slags ting.

344
00:20:22,320 --> 00:20:26,180
Og den trivielle løsning her, selvom det i sig selv er fejlbehæftet,

345
00:20:26,180 --> 00:20:31,360
er virkelig reducere brugen af ​​alle websteder, der ikke bruger HTTPS konstant.

346
00:20:31,360 --> 00:20:34,520
Så sites som Facebook og Google i stigende grad har afkrydsningsfelter

347
00:20:34,520 --> 00:20:36,200
hvor man kan tilvælge denne slags ting,

348
00:20:36,200 --> 00:20:40,000
og bankerne har haft dette i årevis af lignende grunde.

349
00:20:40,000 --> 00:20:43,580
Så bare en lille smule af en frygt faktor, hvis vi kan. Men det er det i en nøddeskal.

350
00:20:43,580 --> 00:20:46,420
Det er sådan en server husker hvem du er.

351
00:20:46,420 --> 00:20:50,760
Og så snart de kan huske hvem du er, kan de huske noget om dig

352
00:20:50,760 --> 00:20:56,140
at programmøren har gemt inde i denne særlige superglobal kaldet $ _SESSION.

353
00:20:56,140 --> 00:20:59,750
Og for Pset 7 vi bruger det trivielt bare at huske en int,

354
00:20:59,750 --> 00:21:02,260
nemlig den unikke ID for den bruger, der er logget ind,

355
00:21:02,260 --> 00:21:05,880
så vi ved, at de har været der før.

356
00:21:05,880 --> 00:21:12,450
Eventuelle spørgsmål derefter på sessioner eller cookies eller lignende?

357
00:21:12,450 --> 00:21:15,130
Firesheep virker ikke så godt mere,

358
00:21:15,130 --> 00:21:18,310
og du er nødt til at sætte din computer i en speciel flane mode

359
00:21:18,310 --> 00:21:20,700
så du faktisk lytter til trafik end dig selv.

360
00:21:20,700 --> 00:21:23,940
Så hvis du i øjeblikket er ved at hente Firesheep, indser det er ikke helt så let

361
00:21:23,940 --> 00:21:26,850
som det engang var at demonstrere.

362
00:21:26,850 --> 00:21:29,070
Ok. Og gør det ikke i Sanders. Gør det derhjemme.

363
00:21:29,070 --> 00:21:30,890
Databaser.

364
00:21:30,890 --> 00:21:33,580
En af de ting, vi gjorde i Pset 7 meget bevidst

365
00:21:33,580 --> 00:21:37,780
blev vi giver dig en eksempeldatabase tabel for brugere, der har nogle bruger-id'er,

366
00:21:37,780 --> 00:21:41,020
nogle brugernavne, og nogle krypterede passwords deri.

367
00:21:41,020 --> 00:21:44,520
Og som du kan se, hvis du ikke allerede har, er du nødt til at ændre bordets en lille smule.

368
00:21:44,520 --> 00:21:47,710
Du er nødt til at tilføje nogle cache til hver af brugerne i denne tabel,

369
00:21:47,710 --> 00:21:51,130
og du bliver nødt til at tilføje en anden historie bord, en porteføljer bord,

370
00:21:51,130 --> 00:21:53,310
eller måske kalde det noget andet.

371
00:21:53,310 --> 00:21:56,740
Men i forhold til at tænke over, hvordan du gør dette, lad os åbne dette værktøj

372
00:21:56,740 --> 00:22:00,570
som vi brugte på fredag, men hvis uvant, apparatet kommer med et værktøj

373
00:22:00,570 --> 00:22:04,680
kaldet phpMyAdmin der tilfældigvis skrevet i PHP,

374
00:22:04,680 --> 00:22:07,950
men dens formål i livet, efter jeg logger ind her som jharvard med purpur,

375
00:22:07,950 --> 00:22:15,160
er at give mig en brugervenlig måde at se og ændre min database.

376
00:22:15,160 --> 00:22:18,040
>> Databasen som jeg kører på apparatet hedder MySQL.

377
00:22:18,040 --> 00:22:23,420
Dette er meget populært, og det er et gratis open source-database, der er dejligt nemt at bruge,

378
00:22:23,420 --> 00:22:25,620
især med frontends som denne.

379
00:22:25,620 --> 00:22:29,350
Hvad dette værktøj tillader mig at gøre, for eksempel, er poke omkring borde.

380
00:22:29,350 --> 00:22:30,890
Lad mig gå videre og gøre det.

381
00:22:30,890 --> 00:22:36,580
På fredag ​​har vi oprettet en tabel kaldet studerende, der var super simpelt.

382
00:22:36,580 --> 00:22:41,680
Det havde 3 kolonner - ID, navn og e-mail - og jeg manuelt indsat et par rækker

383
00:22:41,680 --> 00:22:44,420
ligesom David og Mike i dette særlige eksempel.

384
00:22:44,420 --> 00:22:47,290
Lad os tage dette lidt videre, og lad os antage, at vi ønsker at huske mere

385
00:22:47,290 --> 00:22:49,660
end blot navn og e-mail om en bruger.

386
00:22:49,660 --> 00:22:53,090
Lad mig klik Struktur heroppe på toppen.

387
00:22:53,090 --> 00:22:55,440
Og igen, det Pset fører dig gennem de nødvendige skridt her,

388
00:22:55,440 --> 00:22:58,150
så du skal ikke bekymre dig, hvis nogle af disse er lidt hurtig.

389
00:22:58,150 --> 00:22:59,690
Så jeg har tænkt mig at klikke på her.

390
00:22:59,690 --> 00:23:02,270
Jeg har tænkt mig at tilføje nogle flere kolonner efter e-mail

391
00:23:02,270 --> 00:23:04,130
fordi jeg ønsker at tilføje noget lignende hus.

392
00:23:04,130 --> 00:23:06,640
Jeg glemte at optage en elev hus.

393
00:23:06,640 --> 00:23:11,400
Lad mig klikker på Start, og nu har vi denne form, som desværre er lidt bred fra venstre mod højre,

394
00:23:11,400 --> 00:23:13,710
men jeg har tænkt mig at kalde navnet på dette felt hus,

395
00:23:13,710 --> 00:23:16,050
og derefter den type jeg nu nødt til at vælge.

396
00:23:16,050 --> 00:23:18,870
Så lad os få en kort snak om de forskellige typer i MySQL

397
00:23:18,870 --> 00:23:24,590
fordi hvorimod PHP svagt der skrives, og den slags spiller kispus med typer,

398
00:23:24,590 --> 00:23:29,430
i en database især det er super vigtigt at rent faktisk at bruge skrive til din fordel

399
00:23:29,430 --> 00:23:33,260
fordi en af ​​de ting, MySQL og andre database motorer kan gøre for dig

400
00:23:33,260 --> 00:23:37,910
er at sikre, at du ikke sætter falske data ind i din database.

401
00:23:37,910 --> 00:23:41,850
Det er en slags gratis fejlkontrol til rådighed for dig.

402
00:23:41,850 --> 00:23:46,250
>> For hus vi naturligvis ikke ønsker at være en int, som er en 32-bit værdi i MySQL.

403
00:23:46,250 --> 00:23:49,810
Vi gjorde tale kort på fredag ​​om varchar, som står for variabel længde char.

404
00:23:49,810 --> 00:23:54,720
Hvad er det? Dette giver dig mulighed for at angive, at du ønsker, at dette skal være en streng af en slags.

405
00:23:54,720 --> 00:23:56,840
Du behøver ikke virkelig vide på forhånd, hvor lang tid det er,

406
00:23:56,840 --> 00:24:00,100
så vi vilkårligt sige et hus navn kan være 255 tegn,

407
00:24:00,100 --> 00:24:04,190
men du kunne gå med 32, 64 - helst antal virkelig.

408
00:24:04,190 --> 00:24:10,700
Men fordelen ved at anvende en varchar over et område kaldet char er hvad?

409
00:24:10,700 --> 00:24:15,110
Bare intuitivt hvis jeg rulle ned her, bemærker, at der er char, og der er varchar.

410
00:24:15,110 --> 00:24:19,520
Varchar er variabel længde char, char er en fast længde char.

411
00:24:19,520 --> 00:24:24,730
Så kun er baseret på denne definition, hvad er fordel eller ulempe af hver af disse?

412
00:24:24,730 --> 00:24:30,490
Med andre ord, hvem bekymrer sig om den sondring, eller hvorfor skulle du pleje?

413
00:24:31,660 --> 00:24:35,750
>> Yeah. [Studerende] Varchar har mere fleksibilitet, men fylder meget i hukommelsen.

414
00:24:35,750 --> 00:24:40,730
Godt. Varchar fylder mere - Lad os se. Jeg er ikke sikker på, om jeg hørte denne ret.

415
00:24:40,730 --> 00:24:42,360
Kan du sige det igen?

416
00:24:42,360 --> 00:24:45,850
[Studerende] Jeg sagde varchar sandsynligvis har mere fleksibilitet, men det fylder meget i hukommelsen.

417
00:24:45,850 --> 00:24:51,170
Interessant. Okay. Varchar sandsynligvis giver dig mere fleksibilitet, men fylder meget i hukommelsen.

418
00:24:51,170 --> 00:24:53,220
Sidstnævnte er ikke nødvendigvis sandt.

419
00:24:53,220 --> 00:24:56,290
Det afhænger af konteksten, men lad os komme tilbage til det.

420
00:24:56,290 --> 00:25:03,230
>> [Uhørlig student svar] Præcis.

421
00:25:03,230 --> 00:25:06,900
Det er faktisk sådan, at char typisk vil bruge mere hukommelse

422
00:25:06,900 --> 00:25:10,950
fordi en char, som i C, er som en streng, det er en vifte af tegn.

423
00:25:10,950 --> 00:25:13,690
Så hvis du siger en char felt af længde 255,

424
00:25:13,690 --> 00:25:16,910
databasen er bogstaveligt talt vil give dig 255 karakterer.

425
00:25:16,910 --> 00:25:22,290
Og hvis huset ender med at blive Mather og 6 tegn i alt,

426
00:25:22,290 --> 00:25:25,090
du spilder mere end 200 tegn.

427
00:25:25,090 --> 00:25:29,640
>> Så en varchar effektivt kun bruger så mange tegn som det er nødvendigt

428
00:25:29,640 --> 00:25:31,590
op til et maksimalt beløb.

429
00:25:31,590 --> 00:25:35,470
Men den pris, du betaler, er faktisk performance, potentielt.

430
00:25:35,470 --> 00:25:39,740
Hvis du på forhånd ved, at alle dine strenge vil være 8 tegn -

431
00:25:39,740 --> 00:25:43,090
for eksempel antage, at du har brug for passwords af længde 8 -

432
00:25:43,090 --> 00:25:47,350
opadrettede for at bruge en char felt på lejlighed, men ikke ofte,

433
00:25:47,350 --> 00:25:51,100
er at specificere en fast længde for noget som en adgangskode

434
00:25:51,100 --> 00:25:53,300
fordi nu databasen kan være endnu smartere.

435
00:25:53,300 --> 00:25:58,160
Hvis den ved, at hver char felt, hver streng i en søjle har samme længde,

436
00:25:58,160 --> 00:26:00,780
du får tilbage funktionen af ​​random access.

437
00:26:00,780 --> 00:26:05,110
Du kan springe rundt mellem de forskellige char felter i din database tabel

438
00:26:05,110 --> 00:26:07,940
fordi tænke på en database, som rækker og søjler.

439
00:26:07,940 --> 00:26:11,670
Så hvis hver af strengene har samme længde,

440
00:26:11,670 --> 00:26:17,820
du ved, at den første er i byte 0, det næste er ved byte 8

441
00:26:17,820 --> 00:26:20,240
og derefter 16 og derefter 24 og så videre.

442
00:26:20,240 --> 00:26:24,500
Så hvis alle strengene er af samme længde, kan du springe rundt langt mere effektivt.

443
00:26:24,500 --> 00:26:26,710
Så det kan være en fordel i form af funktionsdygtighed,

444
00:26:26,710 --> 00:26:29,420
men typisk du ikke har den luksus at vide på forhånd,

445
00:26:29,420 --> 00:26:32,170
så en varchar er vejen at gå.

446
00:26:32,170 --> 00:26:36,030
Her er en anden detalje, at selv Facebook løb ind i sidste ende.

447
00:26:36,030 --> 00:26:39,670
Ints er stor, og vi slags bruger dem som standard helst vi ønsker et nummer,

448
00:26:39,670 --> 00:26:41,750
men det er kun 32 bit.

449
00:26:41,750 --> 00:26:46,210
>> Og selv om Facebook ikke helt har 4 milliarder brugere nu,

450
00:26:46,210 --> 00:26:48,680
Der er helt sikkert nogle mennesker derude med flere konti

451
00:26:48,680 --> 00:26:50,960
eller konti, der er blevet åbnet og lukket,

452
00:26:50,960 --> 00:26:55,130
og så Facebook selv jeg tror et par år siden havde overgang fra int

453
00:26:55,130 --> 00:27:00,010
til, som er rammende kaldes, bigint, som ligger kun 64 bits i stedet.

454
00:27:00,010 --> 00:27:02,230
Så dette er også et design beslutning.

455
00:27:02,230 --> 00:27:06,570
Du ville være utrolig heldig, hvis din endelige projekt bliver opstart,

456
00:27:06,570 --> 00:27:10,010
har 4 mia.kr., og 1 brugere, give eller tage,

457
00:27:10,010 --> 00:27:13,200
i hvilket tilfælde bruger int'er kan være lidt kortsigtet.

458
00:27:13,200 --> 00:27:16,230
Men i virkeligheden er dine brugere tabellen sandsynligvis fint med int'er.

459
00:27:16,230 --> 00:27:19,340
Men for noget som Pset 7, ligesom din historie bord

460
00:27:19,340 --> 00:27:23,700
du har måske tusinder, millioner af brugere, hvis du udvikle sig til etrade.com.

461
00:27:23,700 --> 00:27:26,020
Så mens du måske ikke har mere end 4 milliarder brugere,

462
00:27:26,020 --> 00:27:30,070
disse brugere du har måske mere end 4 milliarder transaktioner over tid -

463
00:27:30,070 --> 00:27:33,200
køber og sælger, og ting i deres historie.

464
00:27:33,200 --> 00:27:38,090
Så hvis du forventer - igen, disse er gode problemer at have, hvis du har så mange data -

465
00:27:38,090 --> 00:27:40,920
hvis du forventer data der er større end en int,

466
00:27:40,920 --> 00:27:47,740
gå med noget som bigint er en retning, der ikke ofte nok vedtaget af designere

467
00:27:47,740 --> 00:27:49,710
fordi folk tal, der kommer ikke til at være et problem,

468
00:27:49,710 --> 00:27:51,930
men det er så nemt at vælge noget større end det.

469
00:27:51,930 --> 00:27:55,380
Decimal vi bruger i Pset 7, som specificerer fast præcision

470
00:27:55,380 --> 00:27:59,840
så du kan undgå de problemer, der involverer flåd og doubler og Reals og lignende.

471
00:27:59,840 --> 00:28:02,440
>> Og så er der nogle andre områder her. Vi vil bølge vores hænder på dem i nogen grad.

472
00:28:02,440 --> 00:28:07,270
Men datoer, tidspunkter har alle et foreskrevet format i MySQL,

473
00:28:07,270 --> 00:28:10,830
og fordelen ved lagring datoer som datoer og ikke varchars

474
00:28:10,830 --> 00:28:15,730
betyder, at databasen faktisk kan omformatere dem i forskellige formater,

475
00:28:15,730 --> 00:28:18,800
hvorvidt en amerikansk format eller europæisk format eller lignende - men du vil have det -

476
00:28:18,800 --> 00:28:22,700
langt mere effektivt, end hvis det var blot nogle generiske varchar.

477
00:28:22,700 --> 00:28:25,150
Og så er der nogle andre binær, varbinary, klatter.

478
00:28:25,150 --> 00:28:28,580
Disse er binære store genstande, og du kan også gemme binære data

479
00:28:28,580 --> 00:28:30,750
såvel som geometriske data i en database.

480
00:28:30,750 --> 00:28:34,350
Men for os vil vi typisk bekymre sig om int'er og varchars og lignende.

481
00:28:34,350 --> 00:28:36,230
Lad os slutte op dette eksempel med hus.

482
00:28:36,230 --> 00:28:40,030
Hus vil jeg vilkårligt sige vil være 255 tegn.

483
00:28:40,030 --> 00:28:42,850
Så standardværdi vi kunne gøre dette.

484
00:28:42,850 --> 00:28:47,440
Vi kunne som standard sætte alle i Mather House, for eksempel.

485
00:28:47,440 --> 00:28:49,710
Det er, hvordan vi kunne præcisere, at databasen

486
00:28:49,710 --> 00:28:52,460
bør sikre, at en person altid har en værdi. Men jeg vil overlade det være.

487
00:28:52,460 --> 00:28:55,270
I virkeligheden, for folk, der bor uden for campus og ikke i et hus

488
00:28:55,270 --> 00:28:59,590
måske jeg rent faktisk ønsker at præcisere, at standardværdien for huset er NULL,

489
00:28:59,590 --> 00:29:04,890
og så jeg har brug for at markere dette felt og fortælle den database, det er okay, hvis brugerens hus er NULL.

490
00:29:04,890 --> 00:29:07,270
>> Igen, det er en anden forsvarsmekanisme du kan sætte på plads

491
00:29:07,270 --> 00:29:10,590
så du behøver ikke engang at sætte det i din PHP-kode nødvendigvis.

492
00:29:10,590 --> 00:29:14,630
Databasen vil sikre, at tingene er eller ikke er NULL.

493
00:29:14,630 --> 00:29:17,310
Og så endelig Attributter.

494
00:29:17,310 --> 00:29:18,920
Ingen af ​​disse er meget relevant.

495
00:29:18,920 --> 00:29:22,880
Binary, usigneret - ingen af ​​dem er relevante for en varchar.

496
00:29:22,880 --> 00:29:24,220
Index.

497
00:29:24,220 --> 00:29:27,320
Er der nogen kender eller huske eller har et gæt på, hvad et indeks er

498
00:29:27,320 --> 00:29:29,510
for noget som hus?

499
00:29:29,510 --> 00:29:35,240
Også dette er faktisk en vigtig og relativt let design beslutning.

500
00:29:35,240 --> 00:29:39,200
For dem, der endnu ikke har set det, vi på fredag ​​talte kort om primære nøgler.

501
00:29:39,200 --> 00:29:43,240
I en database tabel, er en primær nøgle feltet eller kolonne

502
00:29:43,240 --> 00:29:46,270
der entydigt identificerer rækker i tabellen.

503
00:29:46,270 --> 00:29:49,150
Så i den aktuelle tabel vi har id'er, har vi navne og e-mails.

504
00:29:49,150 --> 00:29:52,050
Hvilken af ​​disse er den bedste kandidat til at være en primær nøgle,

505
00:29:52,050 --> 00:29:55,810
hvis rolle er at entydigt at identificere rækker?

506
00:29:55,810 --> 00:29:57,530
Sandsynligvis ID.

507
00:29:57,530 --> 00:29:59,930
Velsagtens, kunne vi også bruge det selv?

508
00:29:59,930 --> 00:30:02,860
Måske du kunne bruge e-mail, fordi der i teorien er det unikt

509
00:30:02,860 --> 00:30:05,380
medmindre folk deler e-mail konti.

510
00:30:05,380 --> 00:30:09,980
Men virkeligheden er, at hvis du bruger en numerisk ID ligesom 1234,

511
00:30:09,980 --> 00:30:14,170
det er kun 32 bit, mens en e-mail-adresse kan være så mange byte eller så mange bytes.

512
00:30:14,170 --> 00:30:16,610
Så med hensyn til effektivitet for entydige identifikatorer,

513
00:30:16,610 --> 00:30:19,270
det plejer at være god praksis blot at bruge en int

514
00:30:19,270 --> 00:30:23,090
selvom du har nogle streng kandidat, som du velsagtens kunne bruge.

515
00:30:23,090 --> 00:30:26,760
>> For noget lignende hus, bør dette ikke være en primær nøgle

516
00:30:26,760 --> 00:30:30,770
fordi så kun 1 person kunne leve i Mather og 1 person i Currier og lignende.

517
00:30:30,770 --> 00:30:32,790
Ligeledes bør det ikke være unik.

518
00:30:32,790 --> 00:30:37,830
Forskellen mellem primære og unikke er, at i tilfælde af vores nuværende tabel,

519
00:30:37,830 --> 00:30:42,620
ID ville være primær, men e-mail er ikke primært af den grund, vi lige har nævnt -

520
00:30:42,620 --> 00:30:44,740
ydeevne - men det bør stadig være unik.

521
00:30:44,740 --> 00:30:47,200
Så du kan stadig håndhæve unikke uden at gøre krav

522
00:30:47,200 --> 00:30:49,520
at det er en super vigtig primære felt.

523
00:30:49,520 --> 00:30:52,610
Men dette er ganske nyttigt: Index.

524
00:30:52,610 --> 00:30:56,180
Hvis du kender på forhånd for din endelige projekt, for Pset 7 eller i almindelighed,

525
00:30:56,180 --> 00:30:59,480
at dette felt hus vil være noget du søge på en masse

526
00:30:59,480 --> 00:31:01,910
ved hjælp af select søgeord eller noget andet,

527
00:31:01,910 --> 00:31:05,180
så kan du preemptively fortælle databasen til at arbejde sin magi

528
00:31:05,180 --> 00:31:10,510
og sørg for, at det skaber i hukommelsen nogen dekorativ datastrukturer nødvendige

529
00:31:10,510 --> 00:31:13,770
at fremskynde søgninger baseret på huset.

530
00:31:13,770 --> 00:31:17,860
Måske det vil bruge en hash tabel, måske den vil bruge en sammenkædet liste.

531
00:31:17,860 --> 00:31:21,260
I virkeligheden tendens til at anvende et træ, ofte en struktur, der kaldes en B-træ -

532
00:31:21,260 --> 00:31:24,090
ikke et binært træ, men en B-træ - hvilket er et meget bredt træ

533
00:31:24,090 --> 00:31:27,370
at du kan se i en klasse som CS124, de data strukturer klasse.

534
00:31:27,370 --> 00:31:31,800
Men kort sagt, behøver du ikke at bekymre dig om at når du bruger intelligent database-software.

535
00:31:31,800 --> 00:31:35,890
Du kan bare sige det, "Indeks dette område, så jeg kan søge på det mere effektivt."

536
00:31:35,890 --> 00:31:40,250
>> Hvis du forlader denne slukket, og du forsøger at søge efter alle i databasen, der bor i Mather,

537
00:31:40,250 --> 00:31:42,710
det vil udvikle sig til lineær søgning.

538
00:31:42,710 --> 00:31:45,360
Og hvis du har 6.000 undergrads alle lever i nogle hus,

539
00:31:45,360 --> 00:31:47,900
du kommer til at søge i hele tabellen for at finde de Matherites,

540
00:31:47,900 --> 00:31:52,190
hvorimod hvis du siger Index, forhåbentlig vil det være noget nær en logaritmisk søgning

541
00:31:52,190 --> 00:31:54,510
at finde den slags studerende.

542
00:31:54,510 --> 00:31:56,750
Dette er blot en gratis funktion til at tænde,

543
00:31:56,750 --> 00:31:59,530
selv om det kommer til en pris af en vis mængde af plads.

544
00:31:59,530 --> 00:32:02,690
Endelig auto-tilvækst, dette AI felt,

545
00:32:02,690 --> 00:32:05,830
hvilket blot betyder, at hvis det er en int, og du ikke ønsker at pleje at forøge det selv

546
00:32:05,830 --> 00:32:07,570
hver gang der er en ny bruger, skal du kontrollere, at

547
00:32:07,570 --> 00:32:11,910
og hver bruger, der bliver indsat vil automatisk få en ny ID.

548
00:32:11,910 --> 00:32:15,620
Lad os klikke på Gem og lad os nu finde fejl med dette design.

549
00:32:15,620 --> 00:32:20,200
Hvis jeg går ind i Gennemse, meddelelse om, at både Mike og mit hus er NULL.

550
00:32:20,200 --> 00:32:22,420
Jeg kan bruge phpMyAdmin til at redigere det manuelt.

551
00:32:22,420 --> 00:32:25,110
Jeg kan gå ind her og skriv Mather og derefter trykke på Enter,

552
00:32:25,110 --> 00:32:27,740
og nu bemærke tabellen er anderledes.

553
00:32:27,740 --> 00:32:29,270
Men bemærk jeg kunne gøre noget andet også.

554
00:32:29,270 --> 00:32:33,530
Davids id er 1, så phpMyAdmin igen er bare et administrativt værktøj;

555
00:32:33,530 --> 00:32:35,970
dette er ikke noget dine brugere nogensinde kommer til at se.

556
00:32:35,970 --> 00:32:38,810
Så hvis jeg i stedet klikke på SQL fanen up top -

557
00:32:38,810 --> 00:32:41,450
og igen, vil Pset 7 introducere dig til flere af disse spørgsmål -

558
00:32:41,450 --> 00:32:45,260
Jeg kan manuelt udføre SQL Structured Query Language kommando

559
00:32:45,260 --> 00:32:56,410
UPDATE brugere SET hus = 'Pfoho' WHERE id = 1.

560
00:32:56,410 --> 00:33:00,830
Disse SQL-forespørgsler er pænt nok, temmelig læses fra venstre mod højre.

561
00:33:00,830 --> 00:33:04,350
Opdater brugere tabellen, skal du indstille feltet kaldet hus til Pfoho

562
00:33:04,350 --> 00:33:06,830
hvor brugerens ID er 1.

563
00:33:06,830 --> 00:33:11,480
Eller jeg kunne endda gøre, hvor email = 'malan@harvard.edu «.

564
00:33:11,480 --> 00:33:14,860
Så længe, ​​der entydigt identificerer mig, ville der fungerer så godt.

565
00:33:14,860 --> 00:33:18,810
Men ID tendens til at være højere ydelse, så lad os gøre det.

566
00:33:18,810 --> 00:33:22,950
Lad os klikke på Gå. Okay, er lecture.users ikke eksisterer. Hvad er min fejl?

567
00:33:22,950 --> 00:33:26,220
Hvad er tabellen faktisk kaldt her?

568
00:33:26,220 --> 00:33:28,770
Det hedder studerende, bare fordi det er, hvad vi gjorde op her øverst til venstre.

569
00:33:28,770 --> 00:33:31,860
Det hedder studerende, ikke brugerne. Så klik på Gå nu.

570
00:33:31,860 --> 00:33:34,330
1 række berørt. Query tog 0,01 sekunder.

571
00:33:34,330 --> 00:33:38,010
Hvis jeg klikker på Gennemse nu, nu Malan liv i Pfoho.

572
00:33:38,010 --> 00:33:42,070
Så det er en anden smag af SQL, men det Pset vil lede dig gennem en smule mere af det.

573
00:33:42,070 --> 00:33:44,710
>> Der er en dum beslutning, jeg har allerede lavet her.

574
00:33:44,710 --> 00:33:47,820
Jeg vil hævde, at denne database design er ineffektiv

575
00:33:47,820 --> 00:33:51,650
fordi jo flere mennesker jeg føjer til studerende bordet,

576
00:33:51,650 --> 00:33:54,730
jo flere af os jeg begynde at tilføje, at flere af de TF'er jeg begynde at tilføje,

577
00:33:54,730 --> 00:33:58,320
vil vi begynde at se, hvad afskedigelser i denne tabel?

578
00:34:00,840 --> 00:34:06,020
>> Yeah. [Studerende] Se, at det er i de studerende, bruger vi den samme [uhørlig]

579
00:34:06,020 --> 00:34:07,360
Det samme - Højre, præcis.

580
00:34:07,360 --> 00:34:10,400
Så hvis 400 mennesker bor i Mather, give eller tage,

581
00:34:10,400 --> 00:34:15,000
i sidste ende denne tabel vil have 400 rækker, der siger "Mather", "Mather,"

582
00:34:15,000 --> 00:34:16,590
"Mather", "Mather", "Mather."

583
00:34:16,590 --> 00:34:19,820
Vi spilder alle disse bytes, og der er et par grillbarer der.

584
00:34:19,820 --> 00:34:23,080
1, der er den skøre hjørne tilfælde, hvor hvis nogen betaler en masse penge

585
00:34:23,080 --> 00:34:25,949
og omdøber Mather, vi nu nødt til at ændre hele vores database tabel.

586
00:34:25,949 --> 00:34:29,730
Det kommer ikke til at ske ofte, selvom Pfoho engang blev kaldt North House 15 år siden,

587
00:34:29,730 --> 00:34:32,310
så sker det. Men det er ikke alt, overbevisende.

588
00:34:32,310 --> 00:34:36,000
Mere overbevisende end et hjørne sag som den om at skulle opdatere dataene i løs vægt

589
00:34:36,000 --> 00:34:41,150
for en database hvorfor er du gemme MATHER igen og igen og igen og igen?

590
00:34:41,150 --> 00:34:43,020
Det er en masse chars, 6 tegn.

591
00:34:43,020 --> 00:34:45,500
Kan vi ikke gøre det endnu bedre end det, især for Pforzheimer?

592
00:34:45,500 --> 00:34:48,320
Vi må da kunne gøre det bedre end at mange tegn.

593
00:34:48,320 --> 00:34:51,790
Hvorfor ikke bare knytte en entydig identifikator med hvert hus

594
00:34:51,790 --> 00:34:55,020
og butik, der for hver bruger? Så lad os prøve dette.

595
00:34:55,020 --> 00:35:00,610
Snarere end blot bruge studerende tabellen, lad mig gå op til mit foredrag database op her øverst til venstre.

596
00:35:00,610 --> 00:35:02,600
Bemærk her det siger Opret en tabel.

597
00:35:02,600 --> 00:35:04,550
Lad mig oprette en ny tabel kaldet huse.

598
00:35:04,550 --> 00:35:08,880
Antallet af kolonner vil være 2. Enter.

599
00:35:08,880 --> 00:35:11,200
Nu har jeg 2 felter.

600
00:35:11,200 --> 00:35:14,600
Jeg har tænkt mig at kalde dette navn, og det vil være en varchar af længde 255,

601
00:35:14,600 --> 00:35:18,770
>> men det er temmelig vilkårlig. Lad mig sige dette hernede ved konvention.

602
00:35:18,770 --> 00:35:22,840
Så læg et ID op her. Lad os give hvert hus en entydig identifikator.

603
00:35:22,840 --> 00:35:25,360
Lad os give hvert hus et navn.

604
00:35:25,360 --> 00:35:30,980
Lad os præcisere, at identifikator vil være usigneret lige efter sædvane kun bruge positive tal.

605
00:35:30,980 --> 00:35:35,020
Lad os gå videre og give dette en auto-tilvækst felt for nu.

606
00:35:35,020 --> 00:35:38,160
Og har vi brug for noget andet?

607
00:35:38,160 --> 00:35:41,010
Lad os gå videre og klik på Gem.

608
00:35:41,010 --> 00:35:42,480
Nu har jeg en anden tabel.

609
00:35:42,480 --> 00:35:45,860
Meddelelse som en sidebemærkning er det lidt kryptiske SQL-kommando

610
00:35:45,860 --> 00:35:50,280
at du ville have haft for at skrive manuelt hvis du ikke bruger en administrativ værktøj som phpMyAdmin.

611
00:35:50,280 --> 00:35:51,990
Så en anden grund vi bruger det.

612
00:35:51,990 --> 00:35:55,480
Det er vidunderligt nyttigt slags pædagogisk fordi du kan klikke rundt

613
00:35:55,480 --> 00:36:01,050
og regne ud, hvordan tingene fungerer ved blot kopiere og indsætte hvad phpMyAdmin gjorde.

614
00:36:01,050 --> 00:36:04,150
Men CREATE TABLE kommandoen er, hvad var lige henrettet, og her er mit bord.

615
00:36:04,150 --> 00:36:11,370
Lad mig gå videre nu, og bruge rå SQL i stedet forsimple ved at klikke på fanen Indsæt.

616
00:36:11,370 --> 00:36:15,040
Lad mig gøre INSERT INTO huse,

617
00:36:15,040 --> 00:36:22,230
og jeg har tænkt mig at sige navnet på huset kommer til at have en værdi af 'Mather «.

618
00:36:22,230 --> 00:36:24,790
Det er det. Denne syntaks er lidt mere kryptisk.

619
00:36:24,790 --> 00:36:26,660
Dette er navnet på de felter, vi ønsker at indsætte.

620
00:36:26,660 --> 00:36:30,390
Det er de værdier, vi ønsker at indsætte i disse felter. Lad mig klik på Gå.

621
00:36:30,390 --> 00:36:34,410
1 indsat række tog 0,02 sekunder. Lad mig klikke på Gennemse nu.

622
00:36:34,410 --> 00:36:42,020
>> Varsel, hvis jeg klikker på Gennemse, der er Mather, hvis ID er ved automatisering nummer 1.

623
00:36:42,020 --> 00:36:45,000
Lad mig gøre en anden. Lad mig gå ind i SQL fanen.

624
00:36:45,000 --> 00:36:52,950
INSERT INTO huse. Navnet på huset vil have en værdi på Pfoho og så videre.

625
00:36:52,950 --> 00:36:56,350
Go. Og jeg kan holde gør det igen og igen og igen.

626
00:36:56,350 --> 00:36:59,470
Eller hvis du keder bruge phpMyAdmin, kan du bare bruge fanen Indsæt

627
00:36:59,470 --> 00:37:01,000
og ikke behøver at skrive den rå SQL.

628
00:37:01,000 --> 00:37:04,690
Du kan bare bang det ud hurtigere ved at skrive, for eksempel Currier, Enter,

629
00:37:04,690 --> 00:37:07,610
og nu, hvis vi klikker på Gennemse, er der Currier med en ID på 3.

630
00:37:07,610 --> 00:37:09,920
Så dette er hvad vi mener med auto-tilvækst.

631
00:37:09,920 --> 00:37:12,280
Men nu er vi nødt til at ordne noget i de studerende.

632
00:37:12,280 --> 00:37:16,240
I de studerende hvad skal datatypen af ​​huset feltet nu være?

633
00:37:16,240 --> 00:37:19,450
Det bør være en int, right?

634
00:37:19,450 --> 00:37:23,950
Så målet her er at faktor ud, også kendt som normalisere, tabellerne

635
00:37:23,950 --> 00:37:27,940
så vi ikke gemmer oplysninger redundant i nogen af ​​mine tabeller.

636
00:37:27,940 --> 00:37:31,130
Og igen, er den vej, vi var på her vil sige Mather, Mather,

637
00:37:31,130 --> 00:37:34,220
Mather, Mather, Pfoho, Pfoho, Pfoho, Pfoho, som er meget redundant

638
00:37:34,220 --> 00:37:36,240
med hensyn til spild af tegn.

639
00:37:36,240 --> 00:37:40,820
Så lad mig gå videre og ændre dette ved at klikke på Struktur,

640
00:37:40,820 --> 00:37:44,620
og lad mig gå videre og tjekke ud i huset, skal du klikke på Skift,

641
00:37:44,620 --> 00:37:46,990
og nu jeg har tænkt mig at ændre dette for at være en int.

642
00:37:46,990 --> 00:37:49,490
255 er ikke længere relevant.

643
00:37:49,490 --> 00:37:54,010
Lad mig gå videre og sige, det er fint, hvis det stadig er NULL. Gem.

644
00:37:54,010 --> 00:37:55,870
Nu tabel studerende er blevet ændret med succes,

645
00:37:55,870 --> 00:37:59,090
og bemærk igen hus er en int.

646
00:37:59,090 --> 00:38:02,220
Som en sidebemærkning, ignorere tallet i parentes, når det kommer til int'er.

647
00:38:02,220 --> 00:38:03,770
>> Dette er til ældre årsager.

648
00:38:03,770 --> 00:38:06,920
Tilbage i dag, hvor du ikke har GUI, du i stedet havde en kommandolinje miljø,

649
00:38:06,920 --> 00:38:11,580
de 10 og 11 angivet, hvor mange tegn du skal vise

650
00:38:11,580 --> 00:38:13,950
i terminalvinduet til rent faktisk at vise felter.

651
00:38:13,950 --> 00:38:19,150
Det har intet at gøre med bit længden af ​​den faktiske felt, så vi vil bare ignorere det for nu.

652
00:38:19,150 --> 00:38:20,990
Nu har jeg nødt til at gå ind i denne tabel.

653
00:38:20,990 --> 00:38:24,610
Og hvis David bor i Mather, bør hus ikke være 0,

654
00:38:24,610 --> 00:38:27,350
hvilket er en standard int værdi tættest på NULL.

655
00:38:27,350 --> 00:38:29,810
Han skulle bo i hus 1.

656
00:38:29,810 --> 00:38:36,870
Lad os vilkårligt sige, at Mike bor i Pfoho, så husnummer 2.

657
00:38:36,870 --> 00:38:40,160
Nu mit bord ser lidt mere kryptisk.

658
00:38:40,160 --> 00:38:41,960
Men overveje effektiviteten.

659
00:38:41,960 --> 00:38:44,860
Jeg bruger nu kun 32 bit til at identificere huset,

660
00:38:44,860 --> 00:38:49,530
hvilket betyder, at der er kun 1 kanoniske definition af mit hus Mather og Pfoho

661
00:38:49,530 --> 00:38:52,090
og det er i husene tabellen.

662
00:38:52,090 --> 00:38:55,880
Så hvis jeg ønsker at nu genindtræde disse tabeller, så tænk på det på denne måde.

663
00:38:55,880 --> 00:39:01,980
Her har jeg mine elever bord, og på den højre side er der disse tal, 1 og 2.

664
00:39:01,980 --> 00:39:04,180
1 er Mather, 2 er Pfoho.

665
00:39:04,180 --> 00:39:08,580
Vi har de samme numre i denne anden tabel, der kaldes huse,

666
00:39:08,580 --> 00:39:11,020
1 og 2 og 3 for de tre huse.

667
00:39:11,020 --> 00:39:14,990
Hvad vi nu ønsker at gøre, er at have evnen i kode, PHP og SQL,

668
00:39:14,990 --> 00:39:18,800
at sortere i genindtræde disse tabeller, hvor hvis det er de studerende og det er disse huse,

669
00:39:18,800 --> 00:39:22,050
vi ønsker at en eller anden måde kombinere dem, så 1 linjer op med 1,

670
00:39:22,050 --> 00:39:25,670
2 linjer op med 2, og således at vi kan regne ud, hvor David

671
00:39:25,670 --> 00:39:28,000
og hvor Mike og hvor alle andre bor.

672
00:39:28,000 --> 00:39:31,850
For at gøre dette kan vi udføre en SQL-forespørgsel som følgende.

673
00:39:31,850 --> 00:39:40,470
SELECT * FROM studerende JOIN huse ON -

674
00:39:40,470 --> 00:39:43,000
Og nu hvilke felter vi ønsker at deltage på?

675
00:39:43,000 --> 00:39:49,520
Så students.house = houses.id.

676
00:39:49,520 --> 00:39:54,150
>> Lidt kryptisk, men denne del forstås bogstaveligt oprette en ny midlertidig tabel

677
00:39:54,150 --> 00:39:56,690
Det er resultatet af sammenføjning studerende og huse.

678
00:39:56,690 --> 00:40:00,340
Og hvordan vil du kombinere spidserne af mine fingre her?

679
00:40:00,340 --> 00:40:05,280
Indstil de studerendes hus felt svarende til husenes ID.

680
00:40:05,280 --> 00:40:10,220
Og hvis jeg nu klikker på Start, jeg kommer tilbage, hvad jeg håbede på.

681
00:40:10,220 --> 00:40:15,890
David er i Mather, Mike er i Pfoho, og jeg kan også se de unikke identifikatorer.

682
00:40:15,890 --> 00:40:18,640
Men pointen er nu har jeg et komplet bord.

683
00:40:18,640 --> 00:40:23,020
Og så takeaway her for Pset 7 eller virkelig for det endelige projekt:

684
00:40:23,020 --> 00:40:25,830
Hvis du opdager, at du ønsker at indkode enhver oplysning redundant,

685
00:40:25,830 --> 00:40:28,850
uanset om det er et hus, måske er det en by, stat og postnummer

686
00:40:28,850 --> 00:40:32,050
hvor ZIP kan sædvanligvis, men ikke altid anvendes som en unik identifikator,

687
00:40:32,050 --> 00:40:35,810
går gennem udøvelse mentalt og derefter med noget lignende phpMyAdmin

688
00:40:35,810 --> 00:40:40,660
af factoring ud, at de fælles data, fordi især da din hjemmeside bliver mere godt bruges

689
00:40:40,660 --> 00:40:45,440
og mere populære, dette er, hvordan du sørge for, at alt er super hurtig,

690
00:40:45,440 --> 00:40:51,930
ved at give databasen så mange vink om, unikke som muligt.

691
00:40:51,930 --> 00:40:53,860
Det var en masse.

692
00:40:53,860 --> 00:40:59,010
Eventuelle spørgsmål? Ok. Lad os tage en 5-minutters pause der og omgruppere.

693
00:41:01,600 --> 00:41:03,540
Ok.

694
00:41:03,540 --> 00:41:08,680
Det følgende er et eksempel, der blev brugt for nogle år siden, da jeg tog CS161,

695
00:41:08,680 --> 00:41:10,960
som er den operativsystemer klasse på skolen

696
00:41:10,960 --> 00:41:15,160
som er kendt for at være fantastisk, men en vanvittig mængde arbejde,

697
00:41:15,160 --> 00:41:19,810
og det fokuserer virkelig på nogle af de lavt niveau problemer, der opstår i operativsystemer

698
00:41:19,810 --> 00:41:22,700
og også selv i en verden af ​​databaser.

699
00:41:22,700 --> 00:41:27,040
>> Den historie, der blev fortalt af min professor, Margo Seltzer, det år var som følger.

700
00:41:27,040 --> 00:41:30,990
Antag at du har en lille dorm køleskab for dig og din roommate

701
00:41:30,990 --> 00:41:34,030
og begge du virkelig gerne mælk.

702
00:41:34,030 --> 00:41:36,360
Så du kommer hjem fra klassen en dag, din værelseskammerat er endnu ikke der,

703
00:41:36,360 --> 00:41:39,650
du åbner køleskabet, og du indser, "Oh damn, vi er ude af mælk."

704
00:41:39,650 --> 00:41:42,070
Så du lukker køleskabet, du gå på tværs af gaden til CVS

705
00:41:42,070 --> 00:41:45,830
og komme i de stadig mere lange linjer til at købe nogle mælk på CVS.

706
00:41:45,830 --> 00:41:48,470
I mellemtiden din værelseskammerat kommer hjem fra hans eller hendes klasse,

707
00:41:48,470 --> 00:41:51,690
kommer ind i lokalet, åbner køleskabet virkelig ønsker nogle mælk,

708
00:41:51,690 --> 00:41:54,130
åbner køleskabet, og "Damn, ingen mælk."

709
00:41:54,130 --> 00:41:57,890
Så han eller hun lukker køleskabet, går ud af døren, og går til ABP

710
00:41:57,890 --> 00:42:00,910
eller et andet sted end CVS, hvor du ikke kommer til at støde ind i hinanden

711
00:42:00,910 --> 00:42:02,790
at gå få nogle mælk.

712
00:42:02,790 --> 00:42:04,820
Selvfølgelig et par minutter senere, både af jer kommer hjem

713
00:42:04,820 --> 00:42:07,740
og nu har du dobbelt så meget mælk som du rent faktisk ønskede.

714
00:42:07,740 --> 00:42:10,670
Og bliver mælk, nu er det kommer til at gå dårligt, fordi du kan lide mælk

715
00:42:10,670 --> 00:42:14,200
men du kan ikke rigtig lide mælk, så nu du har for meget mælk, så det kommer til sur.

716
00:42:14,200 --> 00:42:16,830
Dette er en forfærdelig, forfærdelig situation.

717
00:42:16,830 --> 00:42:22,920
Hvad kunne have løst dette dilemma, hvis du var den første roommate hjem? Ja.

718
00:42:22,920 --> 00:42:25,970
[Studerende] Du skulle have efterladt en note. [Latter]

719
00:42:25,970 --> 00:42:28,090
Godt. Du skulle have efterladt en note.

720
00:42:28,090 --> 00:42:32,320
Du skulle have sat en Post-it note eller som at sige, "Gone for mælk,"

721
00:42:32,320 --> 00:42:36,830
og så vil din roommate konceptuelt ville være blevet låst ude af faktisk at gøre det.

722
00:42:36,830 --> 00:42:38,010
Eller du kan gå 1 skridt videre.

723
00:42:38,010 --> 00:42:41,060
Du kan bogstavelig talt låse køleskabet med en slags hængelås,

724
00:42:41,060 --> 00:42:44,870
og nu din roommate vil bogstaveligt blive låst ud af køleskabet.

725
00:42:44,870 --> 00:42:48,520
Hvis vi generaliserer tilbage til programmering,

726
00:42:48,520 --> 00:42:51,610
du kan næsten tænke på køleskabet som en slags variabel eller en struct,

727
00:42:51,610 --> 00:42:53,500
eller anden form for beholder til information.

728
00:42:53,500 --> 00:42:58,290
Problemet fundamentalt her er, at begge du fik lov til at inspicere

729
00:42:58,290 --> 00:43:02,370
eller læs tilstand denne datastruktur,

730
00:43:02,370 --> 00:43:08,050
men du har set det på forskellige tidspunkter og alligevel jer begge taget en beslutning

731
00:43:08,050 --> 00:43:11,920
baseret på verdens tilstand på disse forskellige tidspunkter.

732
00:43:11,920 --> 00:43:15,570
Så havde du låst køleskabet, ville du have mindst undgået din værelseskammerat

733
00:43:15,570 --> 00:43:19,070
fra at have været i stand til at inspicere verden,

734
00:43:19,070 --> 00:43:22,530
så han eller hun ikke kunne have gjort det samme afgørelse.

735
00:43:22,530 --> 00:43:25,780
Så databaser, som det viser sig har dette problem konstant.

736
00:43:25,780 --> 00:43:31,050
>> Lad os se om vi kan konstruere et scenario.

737
00:43:31,050 --> 00:43:34,310
Antag, at du er en slags dårlig fyr, og du går til Bank of America

738
00:43:34,310 --> 00:43:37,950
eller et af de andre steder i kvadrat, der har et par pengeautomater side om side,

739
00:43:37,950 --> 00:43:41,200
og på en måde du regnet ud, hvordan at kopiere en ATM-kort - ikke så svært.

740
00:43:41,200 --> 00:43:42,730
Det er bare en magnetstribe.

741
00:43:42,730 --> 00:43:45,180
Og så hvad du ønsker at prøve at gøre er at spille dette spil

742
00:43:45,180 --> 00:43:49,060
hvorved du lægger 1 kort i 1 maskine, et andet kort i den anden maskine,

743
00:43:49,060 --> 00:43:51,980
og du hovedsagelig vil forsøge at hæve penge samtidig,

744
00:43:51,980 --> 00:43:54,930
fordi forestille mig, at historien går som følger.

745
00:43:54,930 --> 00:43:57,350
Maskinen til venstre tager dit kort og din pinkode,

746
00:43:57,350 --> 00:44:00,240
og så siger du: "Giv mig 100 dollars."

747
00:44:00,240 --> 00:44:04,790
ATM er programmeret til først at gøre en udvalgt på sin database eller tilsvarende -

748
00:44:04,790 --> 00:44:10,780
uanset database det er ved hjælp - at se er denne bruger har mindst $ 100 i hans eller hendes konto?

749
00:44:10,780 --> 00:44:16,180
Hvis ja, spytter så ud $ 100 og trække $ 100 fra deres balance.

750
00:44:16,180 --> 00:44:20,470
Men selvfølgelig, hvis der er flere maskiner her eller flere måder at inspicere

751
00:44:20,470 --> 00:44:23,560
den tilstand af denne verden, bankboks, for at se hvor mange penge du har,

752
00:44:23,560 --> 00:44:26,780
antage, at bare tilfældigt maskinen på venstre og højre

753
00:44:26,780 --> 00:44:30,140
begge stille dette spørgsmål på nogenlunde samme tidspunkt.

754
00:44:30,140 --> 00:44:34,160
>> Og det kan helt sikkert ske. Pengeautomater er computere i disse dage.

755
00:44:34,160 --> 00:44:37,670
Så hvis maskinen til venstre siger: "Ja, du har mindst $ 100,"

756
00:44:37,670 --> 00:44:42,150
mellemtiden maskinen på højre siger, "Ja, du har mindst $ 100,"

757
00:44:42,150 --> 00:44:47,420
så de begge videre til slut deres programmer og faktisk spytte ud $ 100

758
00:44:47,420 --> 00:44:50,820
og sige, "Tidligere du havde 200 dollars."

759
00:44:50,820 --> 00:44:54,890
"Lad mig opdatere variablen til nu være $ 100 tilbage på kontoen."

760
00:44:54,890 --> 00:44:58,780
Men hvis de begge har tjekket din konto saldo og fandt, at det er $ 200

761
00:44:58,780 --> 00:45:02,000
og begge af dem så gøre det math og sige 200 - 100,

762
00:45:02,000 --> 00:45:06,990
maskinerne har potentielt spytte ud to $ 100 regninger i hver maskine,

763
00:45:06,990 --> 00:45:11,360
men de har kun opdateret din sum kontosaldo til at være 100 dollars.

764
00:45:11,360 --> 00:45:15,130
Med andre ord, du har taget ud $ 200, men fordi de inspicerede verdens tilstand

765
00:45:15,130 --> 00:45:18,840
samtidigt og derefter foretaget en beslutning baseret på denne værdi,

766
00:45:18,840 --> 00:45:21,930
de måske ikke gøre det math i sidste ende rigtigt.

767
00:45:21,930 --> 00:45:25,520
Så i en bank situation, for du virkelig ønsker at have en form for lockout

768
00:45:25,520 --> 00:45:28,450
således at så snart du har tjekket status for nogle variable

769
00:45:28,450 --> 00:45:31,220
det er virkelig vigtigt, ligesom saldoen på din konto,

770
00:45:31,220 --> 00:45:36,070
lad ikke nogen anden træffe beslutninger baseret på, at indtil du er færdig med at gøre dine ting,

771
00:45:36,070 --> 00:45:38,920
hvor i dette tilfælde er du ATM til venstre.

772
00:45:38,920 --> 00:45:41,160
Lås alle andre ud.

773
00:45:41,160 --> 00:45:44,650
Du kan faktisk opnå denne effekt i et par forskellige måder.

774
00:45:44,650 --> 00:45:48,660
>> Den enkleste måde i MySQL er en linje af SQL, som vi gav dig

775
00:45:48,660 --> 00:45:52,030
i det problem indstillede specifikation, der ser ud præcis som dette.

776
00:45:52,030 --> 00:45:57,420
Indsæt i tabellen - hvad det nu hedder - et id, et symbol, og en aktie, et antal aktier,

777
00:45:57,420 --> 00:45:59,660
følgende værdier, f.eks.

778
00:45:59,660 --> 00:46:03,370
Hvis du ikke har læst spec endnu, dette er et eksempel involverer hvordan kan du gå om

779
00:46:03,370 --> 00:46:07,340
køb af 10 aktier i dette penny bestand for præsident Skroob,

780
00:46:07,340 --> 00:46:10,340
hvis bruger-id sker for at være nummer 7?

781
00:46:10,340 --> 00:46:14,070
Det siger INSERT INTO tabel følgende id, symbol, og antallet af aktier

782
00:46:14,070 --> 00:46:18,200
af 7,. 'DVN.V «, og 10

783
00:46:18,200 --> 00:46:21,510
Men - men, men, men - den anden linje er den vigtigste.

784
00:46:21,510 --> 00:46:26,310
ON duplikeret nøgle UPDATE aktier = aksjer + VALUES (aktier).

785
00:46:26,310 --> 00:46:28,350
Så helt kryptisk-ser ved første øjekast.

786
00:46:28,350 --> 00:46:31,990
Men det faktum, at denne SQL-forespørgsel, selvom det ombrydes på 2 linjer,

787
00:46:31,990 --> 00:46:35,920
er 1 lang forespørgsel, betyder det, at det er atomar

788
00:46:35,920 --> 00:46:41,000
i den forstand, at denne forespørgsel enten vil blive udført alle sammen eller slet ikke.

789
00:46:41,000 --> 00:46:45,100
Og ved definition af MySQL, er, at hvordan de implementeres denne forespørgsel.

790
00:46:45,100 --> 00:46:51,010
Det er per definition i manualen garanteret at udføre alle på en gang eller slet ikke.

791
00:46:51,010 --> 00:46:54,020
Motivationen for dette er som følger.

792
00:46:54,020 --> 00:46:58,540
Hvis der i dette tilfælde, du forsøger at købe 10 aktier i bestanden,

793
00:46:58,540 --> 00:47:02,260
det er lidt af den samme historie som mælken, det er lidt af den samme historie som ATM.

794
00:47:02,260 --> 00:47:04,970
>> Hvis du laver den fejl ikke at bruge denne syntaks

795
00:47:04,970 --> 00:47:09,610
men i stedet vælge fra databasen for at se, hvor mange aktier i dette penny stock

796
00:47:09,610 --> 00:47:13,750
siger præsident Skroob har, og antager, at han har 10 aktier,

797
00:47:13,750 --> 00:47:19,330
og derefter nogle splitsekund senere du så gøre en UPDATE-sætning,

798
00:47:19,330 --> 00:47:24,810
som er en anden erklæring i SQL, der siger gå videre og tilføje 10 flere aktier

799
00:47:24,810 --> 00:47:28,700
til sin nuværende 10, så ideelt set det samlede tal er 20,

800
00:47:28,700 --> 00:47:33,490
Problemet er da i dagens databasesystemer og fordi nutidens computere

801
00:47:33,490 --> 00:47:35,990
du har flere processorer, flere kerner -

802
00:47:35,990 --> 00:47:38,920
med andre ord, kan computere bogstaveligt gøre flere ting på én gang -

803
00:47:38,920 --> 00:47:44,270
der er ingen garanti for, at din SELECT og din UPDATE i dette tilfælde

804
00:47:44,270 --> 00:47:46,150
kommer til at ske ryg mod ryg.

805
00:47:46,150 --> 00:47:49,140
Så en dårlig scenario ville være du gøre det SELECT

806
00:47:49,140 --> 00:47:51,670
at se, hvor mange aktier i dette penny stock har Skroob har,

807
00:47:51,670 --> 00:47:54,710
og så bare tilfældigt anden database forespørgslen udføres -

808
00:47:54,710 --> 00:47:57,740
måske dens Skroob i et andet browservindue forsøger at købe 10 aksjer

809
00:47:57,740 --> 00:48:00,700
i et andet vindue helt, ligesom ATM -

810
00:48:00,700 --> 00:48:05,410
og antage, at en anden forespørgsel kommer ind mellem SELECT og UPDATE.

811
00:48:05,410 --> 00:48:10,210
Det kunne være tilfældet, at Skroob nu mister nogle antal aktier

812
00:48:10,210 --> 00:48:14,340
fordi en anden proces inspicere tilstanden af ​​hans verden,

813
00:48:14,340 --> 00:48:17,800
eller han får flere aktier, end han burde have.

814
00:48:17,800 --> 00:48:23,250
Vi vil ikke gå ind i de nærmere oplysninger om, hvad disse særlige historie linjer ville være,

815
00:48:23,250 --> 00:48:28,380
men pointen er, hvis du nødt til at tjekke en variable værdi og derefter træffe en beslutning,

816
00:48:28,380 --> 00:48:32,500
hvis der er en risiko for, at en anden gør noget i mellem de 2 udsagn,

817
00:48:32,500 --> 00:48:36,220
som kan ske i multiprocessorsystemer, i systemer med flere kerner,

818
00:48:36,220 --> 00:48:41,220
computere med evnen til at gøre flere ting på én gang, kan dårlige ting ske

819
00:48:41,220 --> 00:48:44,530
ligesom bankkonti bliver debiteret forkert, at købe dobbelt så meget mælk,

820
00:48:44,530 --> 00:48:46,730
eller i dette tilfælde et forkert antal aktier.

821
00:48:46,730 --> 00:48:48,370
Men der er en lettere måde at tænke over dette.

822
00:48:48,370 --> 00:48:53,290
>> Det viser sig, at SQL understøtter også, hvis du konfigurerer din tabel korrekt,

823
00:48:53,290 --> 00:48:56,920
noget, der hedder transaktioner, som jeg vil hævde er faktisk endnu nemmere at forstå

824
00:48:56,920 --> 00:49:00,650
end dette, men det er ikke en 1-liner, så det er faktisk en smule mere involveret.

825
00:49:00,650 --> 00:49:04,960
Der er bogstaveligt talt en erklæring i SQL kaldet START TRANSAKTION.

826
00:49:04,960 --> 00:49:08,300
Ligesom der er SELECT, UPDATE, INSERT, DELETE, og JOIN og en flok andre,

827
00:49:08,300 --> 00:49:10,970
Der er søgeord som START TRANSAKTION.

828
00:49:10,970 --> 00:49:13,560
Og hvad du så gøre i forbindelse med Pset 7 -

829
00:49:13,560 --> 00:49:17,270
du behøver ikke at gøre dette for Pset 7, det er udtrykkeligt fraskrives som ikke er nødvendigt,

830
00:49:17,270 --> 00:49:18,830
men for de endelige projekter kan det være nyttigt -

831
00:49:18,830 --> 00:49:22,820
hvis du kalder en forespørgsel på START TRANSAKTION, og derefter en anden forespørgsel

832
00:49:22,820 --> 00:49:25,620
og derefter en anden forespørgsel og derefter en anden, en anden, og en anden,

833
00:49:25,620 --> 00:49:31,860
disse forespørgsler vil faktisk ikke blive udført, indtil du kalder SQL-sætning COMMIT,

834
00:49:31,860 --> 00:49:37,220
på hvilket tidspunkt, uanset om det er 2 udsagn eller 20 erklæringer vil de alle blive henrettet på en gang,

835
00:49:37,220 --> 00:49:42,770
hvilket betyder, at ingen andre kan ved et uheld købe for meget mælk eller betalingskort for mange penge

836
00:49:42,770 --> 00:49:46,340
eller købe for mange aktier, idet alle dine forespørgsler vil udføre

837
00:49:46,340 --> 00:49:48,410
tilbage til tilbage til back to back.

838
00:49:48,410 --> 00:49:51,580
Og det er super vigtigt, især når du laver noget som dette.

839
00:49:51,580 --> 00:49:54,900
Dette er et vilkårligt eksempel, der siger lad os opdatere bankkonto

840
00:49:54,900 --> 00:50:00,200
ved at finde en balance svarende til balance - $ 1000 hvor kontonummeret er 2.

841
00:50:00,200 --> 00:50:04,260
Og så den anden erklæring er nu lad os deponere at $ 1000

842
00:50:04,260 --> 00:50:07,310
i en andens bankkonto, hvis kontonummer er 1.

843
00:50:07,310 --> 00:50:10,400
>> Med andre ord er dette et perfekt eksempel på, hvor du vil være sikker

844
00:50:10,400 --> 00:50:13,590
at begge disse udsagn ske eller slet ikke

845
00:50:13,590 --> 00:50:15,450
fordi ellers kunden kommer til at få skruet

846
00:50:15,450 --> 00:50:17,670
og du kommer til at tage deres penge og ikke deponere den et andet sted,

847
00:50:17,670 --> 00:50:20,470
eller banken vil få skruet hvor du vil deponere penge

848
00:50:20,470 --> 00:50:23,140
men faktisk ikke trække det fra brugerens konto.

849
00:50:23,140 --> 00:50:25,810
Så du vil have dem begge til at gennemfører et projekt sammen.

850
00:50:25,810 --> 00:50:29,140
Således indgår verdens transaktioner.

851
00:50:29,140 --> 00:50:31,360
Så det er noget at holde på bagsiden af ​​dit sind,

852
00:50:31,360 --> 00:50:34,710
ikke så meget med henblik på bare et afsluttende projekt,

853
00:50:34,710 --> 00:50:36,700
men hvis du ønsker at tage din endelige projekt et eller andet sted,

854
00:50:36,700 --> 00:50:39,040
hvis du ønsker at starte op nogle selskab omkring det,

855
00:50:39,040 --> 00:50:41,270
hvis du ønsker at løse nogle studerende gruppes problem på campus

856
00:50:41,270 --> 00:50:45,210
og faktisk har en levende, aktiv hjemmeside, disse er den slags subtile fejl, der kan opstå

857
00:50:45,210 --> 00:50:49,480
hvis du ikke helt tænke igennem, hvad der kan ske, hvis 2 personer

858
00:50:49,480 --> 00:50:54,190
forsøger at få adgang til din hjemmeside på bogstaveligt talt samme tidspunkt,

859
00:50:54,190 --> 00:50:56,890
hvorved deres forespørgsler ellers bliver sammenvævet.

860
00:50:58,840 --> 00:51:01,420
>> Klar til nogle JavaScript, en teaser deraf?

861
00:51:01,420 --> 00:51:04,320
Dette er vores sidste sprog for semester. Ok.

862
00:51:04,320 --> 00:51:09,940
Heldigvis JavaScript ser meget, meget, meget lig de 2 sprog, C og PHP,

863
00:51:09,940 --> 00:51:11,140
vi har gjort hidtil.

864
00:51:11,140 --> 00:51:14,340
Der er ingen JavaScript i Pset 7, men det er et utroligt nyttigt redskab

865
00:51:14,340 --> 00:51:18,840
når det kommer til at gøre web-baserede afgangsprojekter eller egentlig bare webprogrammering mere generelt.

866
00:51:18,840 --> 00:51:20,950
Så et hurtigt overblik over noget, der hedder DOM.

867
00:51:20,950 --> 00:51:23,600
Her er en super simpel webside, der virkelig bare siger hej, verden

868
00:51:23,600 --> 00:51:25,970
både i titlen og i kroppen.

869
00:51:25,970 --> 00:51:29,270
Da fordybningen er tyder i nogen tid,

870
00:51:29,270 --> 00:51:31,380
Der er faktisk et hierarki til websider.

871
00:51:31,380 --> 00:51:34,220
Jeg kunne trække den samme stump HTML som et træ,

872
00:51:34,220 --> 00:51:37,470
tænker tilbage på vores drøftelser af datastrukturer i C, som følger.

873
00:51:37,470 --> 00:51:40,710
Jeg har nogle særlige rodnoden kaldet dokument node,

874
00:51:40,710 --> 00:51:43,650
og vi vil se den analoge af dette i JavaScript på bare et øjeblik.

875
00:51:43,650 --> 00:51:48,330
Det første barn og eneste barn af at i dette tilfælde er det HTML-tag.

876
00:51:48,330 --> 00:51:49,880
Der er ingen direkte kortlægning af doctype.

877
00:51:49,880 --> 00:51:53,170
Det er en speciel ting, så skulle vi bare ignorere det, når det kommer til denne DOM,

878
00:51:53,170 --> 00:51:55,810
dette Document Object Model træ.

879
00:51:55,810 --> 00:51:59,530
Bemærk, at HTML-tag, som jeg har skildret arbitrært som et rektangel,

880
00:51:59,530 --> 00:52:02,890
har 2 børn: hoved og krop.

881
00:52:02,890 --> 00:52:04,840
>> Dem, er ligeledes tegnet som rektangler.

882
00:52:04,840 --> 00:52:08,970
Det er meningsfuldt billedligt at hovedet er til venstre for kroppen.

883
00:52:08,970 --> 00:52:11,960
Konsekvensen er, at hovedet kommer først i træet.

884
00:52:11,960 --> 00:52:14,910
Så der er faktisk en bestilling til et træ, når du tegner det på denne måde,

885
00:52:14,910 --> 00:52:17,460
selv om figurerne og whatnot er vilkårlige.

886
00:52:17,460 --> 00:52:20,360
Hoved i mellemtiden har et enkelt barn kaldet titel,

887
00:52:20,360 --> 00:52:25,170
og titel faktisk har sit eget barn, som er "Hello, World",

888
00:52:25,170 --> 00:52:32,210
som jeg bevidst tegnede som en oval her for at gøre det lettere forskelligt fra det rektangel.

889
00:52:32,210 --> 00:52:37,420
Disse rektangler er elementer, hvorimod hej, verden er virkelig en tekst node.

890
00:52:37,420 --> 00:52:39,850
Så det er en knude i træet, men det er en anden type node

891
00:52:39,850 --> 00:52:41,730
så jeg trak det vilkårligt anderledes.

892
00:52:41,730 --> 00:52:45,000
Tilsvarende har krop have et barn kaldet hej, verden så godt,

893
00:52:45,000 --> 00:52:47,910
så forskellige node selvom det er tilfældigvis den samme tekst,

894
00:52:47,910 --> 00:52:52,100
men jeg har tegnet det med den samme form. Så hvem bekymrer sig?

895
00:52:52,100 --> 00:52:56,820
Nå, hvad er rart om HTML er, at det har denne hierarkiske natur.

896
00:52:56,820 --> 00:53:01,010
Og hvad er rart om JavaScript og især biblioteker, der er frit tilgængelige

897
00:53:01,010 --> 00:53:07,120
og populær som jQuery, kan du navigere træstrukturen så forbavsende nemt.

898
00:53:07,120 --> 00:53:11,790
Enhver af de ting, vi gjorde i C med pointere og gennemkører træer og rekursiv på noder

899
00:53:11,790 --> 00:53:15,300
venstre barn til højre barn, pludselig kan vi sortere i tager for givet

900
00:53:15,300 --> 00:53:19,450
som værende utrolig oplysende, hvis ikke en smule frustrerende

901
00:53:19,450 --> 00:53:22,470
men ikke nær en effektiv måde at gå om programmering.

902
00:53:22,470 --> 00:53:24,470
Og så med disse højere niveau sprog som JavaScript

903
00:53:24,470 --> 00:53:28,340
vi vil være i stand til at navigere dette træ langt mere intuitivt.

904
00:53:28,340 --> 00:53:30,430
>> Og faktisk syntaksen vil være helt fortrolig.

905
00:53:30,430 --> 00:53:32,950
Hvis du aldrig har set JavaScript før, er dette en virkelig rart henvisning

906
00:53:32,950 --> 00:53:35,910
fra Mozilla folk, hvem de mennesker gør Firefox,

907
00:53:35,910 --> 00:53:38,370
så du er velkommen til at gennemse det på din bekvemmelighed.

908
00:53:38,370 --> 00:53:41,590
Hvad du vil finde - og disse dias er identiske med, hvad vi brugte den anden dag -

909
00:53:41,590 --> 00:53:44,030
Tilsvarende er main væk.

910
00:53:44,030 --> 00:53:47,010
Så når du skriver et program i JavaScript, er der ingen hovedfunktion.

911
00:53:47,010 --> 00:53:48,690
Du skal bare begynde at skrive kode.

912
00:53:48,690 --> 00:53:51,660
Men en vigtig skelnen mellem JavaScript og C og PHP

913
00:53:51,660 --> 00:53:55,890
er, at mens C og PHP hidtil er blevet henrettet server side

914
00:53:55,890 --> 00:53:59,180
af apparatet i denne sag eller mere generelt af en server,

915
00:53:59,180 --> 00:54:04,270
JavaScript ved design er normalt udføres af en browser.

916
00:54:04,270 --> 00:54:08,440
Med andre ord, kan du skrive JavaScript-kode, som vi er ved at,

917
00:54:08,440 --> 00:54:13,080
på en server i apparatet, men du medtage det blandt din HTML, blandt din CSS,

918
00:54:13,080 --> 00:54:16,100
blandt dine GIF'er og dine PNG og dine JPEG

919
00:54:16,100 --> 00:54:19,170
således at når brugeren besøger din webside, hvis du bruger JavaScript,

920
00:54:19,170 --> 00:54:21,770
, at JavaScript-kode kommer fra server til browser,

921
00:54:21,770 --> 00:54:24,540
og det er den browser, der rent faktisk udfører det.

922
00:54:24,540 --> 00:54:27,960
Så det har meningsfulde konsekvenser for selv intellektuel ejendomsret.

923
00:54:27,960 --> 00:54:32,600
Det er slags fjollet at selv tænke om at beskytte din IP, når det kommer til JavaScript-kode

924
00:54:32,600 --> 00:54:37,560
grund af arten af ​​det sprog, den bliver henrettet sædvanligvis browser side.

925
00:54:37,560 --> 00:54:40,360
>> Du kan sløre det, hvilket betyder at du kan gøre det ser vanvittigt og grim

926
00:54:40,360 --> 00:54:45,400
med ingen mellemrum, forfærdelige variabelnavne, for at gøre det sværere for folk at stjæle din IP

927
00:54:45,400 --> 00:54:48,120
men nøglen er at den udføres browser side.

928
00:54:48,120 --> 00:54:51,790
Selvom som en sidebemærkning JavaScript kan bruges server side,

929
00:54:51,790 --> 00:54:54,480
den mest almindelige brug sag lige nu er stadig på browseren.

930
00:54:54,480 --> 00:54:59,800
Og her er hvad det ligner. Her er en if-else if-else konstruere ligesom C, ligesom PHP.

931
00:54:59,800 --> 00:55:02,420
Her er en boolesk udtryk, når du "eller" 2 ting sammen.

932
00:55:02,420 --> 00:55:04,330
Her er, når du "og" 2 ting sammen.

933
00:55:04,330 --> 00:55:08,300
Her er en switch-statement, som svarer til PHP

934
00:55:08,300 --> 00:55:10,810
i, at du kan skifte på forskellige typer af værdier.

935
00:55:10,810 --> 00:55:15,180
Loops ligeledes har efter sløjfer her, som er opbygget på samme måde, hvad vi har set før.

936
00:55:15,180 --> 00:55:18,110
Mens loops, vi har gøre, mens sløjfer.

937
00:55:18,110 --> 00:55:20,290
Variabler, nogensinde så lidt anderledes.

938
00:55:20,290 --> 00:55:24,560
Du erklærer variabler som du gør i PHP og C,

939
00:55:24,560 --> 00:55:27,860
men ligeledes er JavaScript svagt skrives.

940
00:55:27,860 --> 00:55:32,730
Du behøver ikke angive int eller float eller snor eller noget lignende, der normalt.

941
00:55:32,730 --> 00:55:34,240
Du kan angive var.

942
00:55:34,240 --> 00:55:38,040
Du behøver ikke at angive var, men det har konsekvenser, hvis man ikke gør det.

943
00:55:38,040 --> 00:55:42,000
Normalt hvis du udelader var, du ved et uheld oprette en global variabel i stedet for lokale.

944
00:55:42,000 --> 00:55:46,420
Så lad mig foreslå, at du næsten altid bare sige var, og derefter navnet på variablen.

945
00:55:46,420 --> 00:55:48,740
Det er ikke en type, det er bare var for variabel.

946
00:55:48,740 --> 00:55:52,930
Det ville være et eksempel, uanset om det er 123 eller "hej, verden".

947
00:55:52,930 --> 00:55:58,910
Arrays er til stede og syntaktisk ligner PHP.

948
00:55:58,910 --> 00:56:03,690
Jeg vil sige was numre og derefter jeg bruge kantede parenteser igen at erklære en variabel

949
00:56:03,690 --> 00:56:08,870
hvis type er array, der har disse særlige tal i det adskilt af kommaer.

950
00:56:08,870 --> 00:56:11,740
Og så endelig, dette er den eneste, der virkelig ser anderledes ud.

951
00:56:11,740 --> 00:56:16,700
Husk på, at i PHP ville vi have gennemført et associativt array for en studerende

952
00:56:16,700 --> 00:56:20,220
ligesom Zamyla at kunne se sådan ud, hvor variablen kaldes elev.

953
00:56:20,220 --> 00:56:23,370
De kantede parenteser betyder her kommer et array.

954
00:56:23,370 --> 00:56:28,500
>> Det faktum, at jeg ikke bruger numeriske indeks, men bånd - id, hus, og navn -

955
00:56:28,500 --> 00:56:30,990
betyder, at dette er et associativt array,

956
00:56:30,990 --> 00:56:34,490
og disse pile med lighedstegnet og den vinklede beslag

957
00:56:34,490 --> 00:56:37,310
betyder, at nøglen er "id", værdien er 1;

958
00:56:37,310 --> 00:56:39,310
nøglen er "hus", er værdien Winthrop House;

959
00:56:39,310 --> 00:56:41,800
nøglen er "navn", er værdien Zamyla Chan.

960
00:56:41,800 --> 00:56:47,110
Så der er 3 nøgler inde i denne associative array, som hver har sin egen værdi.

961
00:56:47,110 --> 00:56:52,880
Vi har set, at i Pset 7, eller du snart vil i JavaScript samme idé,

962
00:56:52,880 --> 00:56:55,220
men det kommer til at se sådan ud.

963
00:56:55,220 --> 00:57:00,070
Så var elev - ingen dollartegn og ingen omtale af type stadig, men var -

964
00:57:00,070 --> 00:57:05,860
lig og derefter åbne krøllede parenteser, fordi i JavaScript, når du har vigtige værdi par,

965
00:57:05,860 --> 00:57:08,900
du rent faktisk bruger noget, der hedder et objekt.

966
00:57:08,900 --> 00:57:13,490
Og dem af jer der tog APCS eller lignende husker muligvis genstande fra Java

967
00:57:13,490 --> 00:57:15,140
eller lignende sprog.

968
00:57:15,140 --> 00:57:17,880
JavaScript er ikke Java, først og fremmest.

969
00:57:17,880 --> 00:57:21,600
Det var et bevidst design beslutning år siden for at banke off noget andet, der var populær,

970
00:57:21,600 --> 00:57:25,640
navn, selv om det ikke har nogen grundlæggende relation til Java selv.

971
00:57:25,640 --> 00:57:31,490
JavaScript har objekter, og du opretter dem ved hjælp af klammeparentes notation.

972
00:57:31,490 --> 00:57:36,710
Objekter i JavaScript er stort set svarer til associative arrays i PHP

973
00:57:36,710 --> 00:57:40,030
når det drejer sig om lagring af data inde i dem.

974
00:57:40,030 --> 00:57:44,100
>> Men endnu mere magtfuldt i JavaScript kan du knytte meget nemt funktioner

975
00:57:44,100 --> 00:57:48,040
indersiden af ​​et objekt, og selvom du kan gøre dette på andre sprog,

976
00:57:48,040 --> 00:57:50,040
det er en ganske almindelig paradigme, som vi vil se.

977
00:57:50,040 --> 00:57:54,380
Kort sagt, repræsenterer dette objekt en studerende, der er særligt Zamyla,

978
00:57:54,380 --> 00:58:00,380
og det ligner begrebsmæssigt, bare syntaktisk forskellig fra denne.

979
00:58:00,380 --> 00:58:03,840
Lad os faktisk bruge JavaScript i en fil.

980
00:58:03,840 --> 00:58:05,570
Det viser sig, at der er et script-tag.

981
00:58:05,570 --> 00:58:08,180
Vi har set en stil tag og vi har set andre HTML-tags.

982
00:58:08,180 --> 00:58:11,510
Scriptet tag rent faktisk vil indeholde nogle JavaScript-kode.

983
00:58:11,510 --> 00:58:15,500
Lad mig gå ind i apparatet, hvor vi har nogle kildekoden pre-made.

984
00:58:15,500 --> 00:58:18,700
Jeg har ikke lagt det endnu på hjemmesiden, men jeg vil gøre det efter klasse.

985
00:58:18,700 --> 00:58:21,770
Lad os åbne op denne ene, blink.html.

986
00:58:21,770 --> 00:58:27,560
Tilbage i 1990'erne, var der bogstaveligt talt en HTML-tag kaldet blink tag,

987
00:58:27,560 --> 00:58:30,340
og dette var en af ​​de mest vidunderligt overused mærker på Internettet

988
00:58:30,340 --> 00:58:36,140
hvorved du ville besøge nogle 1990'erne stil webside og begynde at se tekst blinker dig sådan her,

989
00:58:36,140 --> 00:58:39,810
resultaterne af marquis tag, havde som tekst går sådan her.

990
00:58:39,810 --> 00:58:45,070
En af de få gange, hvor verden har faktisk aftalt på en web-standard,

991
00:58:45,070 --> 00:58:48,250
alle over hele linjen dræbte blink tag nogle år siden.

992
00:58:48,250 --> 00:58:52,860
Men vi kan genoplive det med JavaScript som en demonstration af magt, du har

993
00:58:52,860 --> 00:58:56,660
når du kan skrive et program inde i en webside.

994
00:58:56,660 --> 00:59:00,240
Først lad os springe over de nye ting og kun fokusere på den gamle.

995
00:59:00,240 --> 00:59:01,780
>> Her er den gamle ting i dette eksempel.

996
00:59:01,780 --> 00:59:06,350
Jeg har en HTML-tag, et hoved-tag, og en titel tag.

997
00:59:06,350 --> 00:59:11,210
Så jeg har en krop tag her med en div, som husker er bare en rektangulær division af siden

998
00:59:11,210 --> 00:59:14,720
at jeg har givet et unikt id vilkårligt af "hilsen" til,

999
00:59:14,720 --> 00:59:18,320
bare så jeg har en måde entydigt at henvise til det, som har nogle meget enkle tekst:

1000
00:59:18,320 --> 00:59:20,220
hej, verden.

1001
00:59:20,220 --> 00:59:23,940
Lad mig nu rulle op til toppen af ​​denne fil og se, hvad der er nyt.

1002
00:59:23,940 --> 00:59:27,710
Den første ting, der er ny op toppen er script-tag,

1003
00:59:27,710 --> 00:59:31,280
og indersiden af ​​script-tag varsel jeg har erklæret en funktion.

1004
00:59:31,280 --> 00:59:34,610
At erklære en funktion i JavaScript, temmelig ligner PHP,

1005
00:59:34,610 --> 00:59:37,930
du bogstaveligt skrive funktion og derefter navnet på den funktion, parenteser

1006
00:59:37,930 --> 00:59:40,400
og måske nogle argumenter, hvis det tager nogen.

1007
00:59:40,400 --> 00:59:43,510
Så jeg har fået mit klammeparentes som sædvanlig, og nu har vi nogle lidt ny kode,

1008
00:59:43,510 --> 00:59:45,230
men lad os se hvad det betyder.

1009
00:59:45,230 --> 00:59:48,670
Så var div, bare det betyder at give mig en variabel kaldet div.

1010
00:59:48,670 --> 00:59:50,530
Jeg kunne have kaldt det foo, men jeg ville have det til at blive kaldt div

1011
00:59:50,530 --> 00:59:52,620
af årsager, der vil blive tydelig i en anden.

1012
00:59:52,620 --> 00:59:57,480
Så viser det sig i JavaScript - og det er JavaScript-kode indlejret i min webside -

1013
00:59:57,480 --> 01:00:01,760
der er et særligt global variabel slags kaldes dokument.

1014
01:00:01,760 --> 01:00:04,780
JavaScript er faktisk et objekt-orienteret sprog.

1015
01:00:04,780 --> 01:00:07,230
Vi vil ikke gå i detaljer i 50, hvad det betyder,

1016
01:00:07,230 --> 01:00:11,180
men for nu vide, at et objekt er temmelig meget ligesom en struct.

1017
01:00:11,180 --> 01:00:14,740
Ligesom vi så helt tilbage når i en af ​​de tidligste problem sætter

1018
01:00:14,740 --> 01:00:17,150
hvor vi sætter en masse oplysninger i en struct,

1019
01:00:17,150 --> 01:00:21,330
ligeledes er dokumentere en særlig struct, der kommer med browseren,

1020
01:00:21,330 --> 01:00:24,810
kommer med enhver webside. Det er ikke noget, jeg har oprettet.

1021
01:00:24,810 --> 01:00:28,210
Inde i dette dokument struktur, selvom du har ikke kun data

1022
01:00:28,210 --> 01:00:30,010
men du har også funktioner.

1023
01:00:30,010 --> 01:00:34,090
>> Og når som helst du har en funktion inde i en struktur, inde i et objekt,

1024
01:00:34,090 --> 01:00:36,490
det kaldes en metode. Men det er det samme.

1025
01:00:36,490 --> 01:00:40,110
En metode er en funktion, der bare så sker for at være inde i noget andet.

1026
01:00:40,110 --> 01:00:42,990
Så det betyder, at denne særlige globale variabel kaldet dokument

1027
01:00:42,990 --> 01:00:47,690
har en funktion kaldet getElementById, der bogstaveligt talt gør det.

1028
01:00:47,690 --> 01:00:52,460
Det vil få dig et element fra DOM, Document Object Model træ,

1029
01:00:52,460 --> 01:00:55,520
hvis ID er i dette tilfælde hilsen.

1030
01:00:55,520 --> 01:00:59,200
Med andre ord kommer al den tid vi har brugt på datastrukturer i spil her.

1031
01:00:59,200 --> 01:01:01,400
Dette billede af en DOM, at vi havde et øjeblik siden,

1032
01:01:01,400 --> 01:01:06,100
selvom siden er lidt anderledes, hvis jeg havde en div i dette billede,

1033
01:01:06,100 --> 01:01:11,180
hvad document.getElementById ville vende tilbage til mig, ville faktisk være en pegepind

1034
01:01:11,180 --> 01:01:15,440
til rektanglet i træet, en henvisning til rektanglet i træet.

1035
01:01:15,440 --> 01:01:18,410
Så det er hvad det betyder rent faktisk at kalde en af ​​disse funktioner.

1036
01:01:18,410 --> 01:01:21,960
I dette tilfælde er igen det er en div. Det er ikke et organ eller en titel.

1037
01:01:21,960 --> 01:01:26,480
Så lad os se, hvad jeg så gøre med denne div nu, at jeg har det inde i denne variabel kaldet div.

1038
01:01:26,480 --> 01:01:32,580
Det viser sig med JavaScript du har evnen til at nappe CSS på din side dynamisk.

1039
01:01:32,580 --> 01:01:39,060
Indtil nu er alle de CSS, vi har gjort, omend begrænset, i stil-attributter,

1040
01:01:39,060 --> 01:01:41,730
eller hvor ellers har vi lagt CSS?

1041
01:01:42,730 --> 01:01:45,810
Jeg slags fordærvet, at én. I den stil-kode i toppen af ​​filen.

1042
01:01:45,810 --> 01:01:49,180
Eller tredje sted har været i?

1043
01:01:50,710 --> 01:01:54,590
>> En ekstern fil, noget. Css.

1044
01:01:54,590 --> 01:01:56,730
Så det er de 3 steder, vi har gjort CSS hidtil,

1045
01:01:56,730 --> 01:01:59,310
men fangsten er vi har hårdt kodet det hele.

1046
01:01:59,310 --> 01:02:04,060
Du besluttede som du dykkede ind i Pset 7, besluttede vi før belære hvad vores CSS ville være.

1047
01:02:04,060 --> 01:02:07,380
Men hvis du ønsker at ændre din CSS, kan du faktisk gøre det

1048
01:02:07,380 --> 01:02:09,370
når du har et virkeligt programmeringssprog.

1049
01:02:09,370 --> 01:02:13,910
CSS, HTML - ikke programmeringssprog. JavaScript er.

1050
01:02:13,910 --> 01:02:18,200
Så viser det sig, at så snart du har en af ​​disse rektangler fra træet

1051
01:02:18,200 --> 01:02:23,050
kaldet DOM, har den selv nogle data i den.

1052
01:02:23,050 --> 01:02:27,820
Så div at jeg greb blot fra træet har, hvad vi vil kalde en ejendom inde i det

1053
01:02:27,820 --> 01:02:34,390
kaldes stil, og den stil Ejendommen har selv en ejendom kaldet synlighed.

1054
01:02:34,390 --> 01:02:37,330
Jeg ville vide det kun ved at kigge op en CSS brugervejledning.

1055
01:02:37,330 --> 01:02:41,160
Det viser sig, at der er en synlig CSS ejendom, der gør hvad det siger.

1056
01:02:41,160 --> 01:02:44,530
Det gør noget synligt eller ej, er synlig eller ej.

1057
01:02:44,530 --> 01:02:46,810
Og hvordan du gør det er det.

1058
01:02:46,810 --> 01:02:50,510
Jeg spørger programmering, hvis synligheden af ​​denne div er skjult,

1059
01:02:50,510 --> 01:02:53,390
hvad skal jeg ændre det til? Synlig.

1060
01:02:53,390 --> 01:02:58,840
Else hvis synligheden af ​​denne side ikke er skjult, logisk jeg gør det skjult.

1061
01:02:58,840 --> 01:03:04,070
Jeg har ingen idé om, hvorfor det er synligt og skjult og ikke synlige og usynlige.

1062
01:03:04,070 --> 01:03:06,000
Det var en dårlig design beslutning undervejs.

1063
01:03:06,000 --> 01:03:09,530
Men de er faktisk modsætninger i CSS: synlig og skjult.

1064
01:03:09,530 --> 01:03:15,520
Alt dette gør, er det betyder at ændre CSS fra min fil til og fra, til og fra

1065
01:03:15,520 --> 01:03:16,870
for den pågældende div.

1066
01:03:16,870 --> 01:03:20,630
Men igen, dette er en funktion kaldet blink. Hvornår er blink-funktionen hedder?

1067
01:03:20,630 --> 01:03:24,080
Det viser sig, at der er en anden speciel global variabel kaldet vindue,

1068
01:03:24,080 --> 01:03:28,220
samme ånd til dokumentet, men henviser til, at dokumentet refererer til din webside,

1069
01:03:28,220 --> 01:03:31,700
ligesom DOM-træet, sendte HTML dig fra serveren,

1070
01:03:31,700 --> 01:03:35,250
vindue refererer til krom omkring det, adresselinjen, titellinjen,

1071
01:03:35,250 --> 01:03:37,880
og alle de ting omkring din webside.

1072
01:03:37,880 --> 01:03:42,800
>> Og det viser sig, at vinduet objekt har en speciel funktion inde i det der kaldes setInterval

1073
01:03:42,800 --> 01:03:44,360
det er hvad det siger.

1074
01:03:44,360 --> 01:03:48,600
Det vil angive et interval - i dette tilfælde for hver 500 millisekunder -

1075
01:03:48,600 --> 01:03:52,270
og tage et gæt, hvad det kommer til at gøre hver 500 millisekunder?

1076
01:03:52,270 --> 01:03:55,240
Det kommer til at udføre denne funktion blinker.

1077
01:03:55,240 --> 01:03:58,560
Og hvad er rart her er, at vi kunne have gjort dette i C, selvom vi aldrig gjorde.

1078
01:03:58,560 --> 01:04:01,580
C har dog noget, der hedder funktionspointere hvor du kan passere funktioner omkring

1079
01:04:01,580 --> 01:04:03,140
som argumenter.

1080
01:04:03,140 --> 01:04:07,620
Ligeledes i JavaScript kan du passerer navnet på en funktion til en anden funktion.

1081
01:04:07,620 --> 01:04:10,630
Og mærke til, hvad jeg laver. Jeg laver ikke det her.

1082
01:04:10,630 --> 01:04:14,380
Hvis jeg sætter parentes efter blink, ville det betyde kalde blink funktion.

1083
01:04:14,380 --> 01:04:17,430
Hvis jeg udelader dem, betyder det her er blink-funktion

1084
01:04:17,430 --> 01:04:21,330
således at setInterval kan kalde det hver 500 millisekunder.

1085
01:04:21,330 --> 01:04:28,200
Så det endelige resultat, grusomme selv om det er, er, at hvis jeg går ind i localhost og gå til blink.html,

1086
01:04:28,200 --> 01:04:32,120
Jeg har nu det sker igen og igen.

1087
01:04:32,120 --> 01:04:34,950
Og hvis jeg faktisk Inspect Element, lad os se om vi kan se det.

1088
01:04:34,950 --> 01:04:38,550
Lad mig Inspect Element, lad mig rulle ned bare en lille smule,

1089
01:04:38,550 --> 01:04:44,320
lad mig vælge Elements herovre, og bemærk DOM indersiden af ​​Chromes inspektør.

1090
01:04:44,320 --> 01:04:48,840
Det er bogstaveligt talt skiftende frem og tilbage hver 500 millisekunder.

1091
01:04:48,840 --> 01:04:55,660
Hvis vi går til vores ven Nate,

1092
01:04:55,660 --> 01:05:00,020
hvis du nogensinde spekuleret over, hvordan det fungerer, lignende ide med et interval,

1093
01:05:00,020 --> 01:05:04,810
men Nate er faktisk gør meget effektiv brug af farver i dette særlige tilfælde her.

1094
01:05:04,810 --> 01:05:07,350
Så hvad mere kan vi faktisk gøre med dette?

1095
01:05:07,350 --> 01:05:09,990
Lad os åbne op et andet eksempel og prøve noget

1096
01:05:09,990 --> 01:05:12,940
det er programmatisk endnu mere nyttigt end at gøre tingene blinker.

1097
01:05:12,940 --> 01:05:17,990
Lad mig gå ind i vores formularer bibliotek i dag og gå ind form0.

1098
01:05:17,990 --> 01:05:20,820
Dette var den grimmeste mulige form, at jeg kunne komme op med,

1099
01:05:20,820 --> 01:05:23,290
og lad mig bare vise dig, hvad det ser ud i en browser.

1100
01:05:23,290 --> 01:05:28,960
>> Lad mig gå ind i localhost / former, og det er form0.

1101
01:05:28,960 --> 01:05:33,400
Dette er en super grim HTML-formular, der har et par felter til e-mail, for password,

1102
01:05:33,400 --> 01:05:37,190
adgangskode, og derefter en lille afkrydsningsfelt til at acceptere nogle betingelser og vilkår.

1103
01:05:37,190 --> 01:05:41,350
Fangsten er, hvis jeg besøger denne form, og jeg ønsker ikke at give dig min e-mail-adresse,

1104
01:05:41,350 --> 01:05:44,730
Jeg ønsker ikke at acceptere de vilkår og betingelser måske kan jeg klikke på Registrer

1105
01:05:44,730 --> 01:05:46,920
og den lader mig igennem alligevel.

1106
01:05:46,920 --> 01:05:50,800
Dette sker for at underkaste sig en dum PHP fil kaldet dump.php.

1107
01:05:50,800 --> 01:05:58,420
Alt det gør, er udskrive indholdet af $ _GET bare til diagnostiske formål.

1108
01:05:58,420 --> 01:06:01,580
Det var, hvad der blev fremlagt af brugeren lige nu.

1109
01:06:01,580 --> 01:06:05,010
Men formoder, at vi rent faktisk ønsker at validere brugerens formularafsendelse.

1110
01:06:05,010 --> 01:06:06,530
Lad mig gå ind i version 1.

1111
01:06:06,530 --> 01:06:11,420
Dette er form1.html. Det ser æstetisk lige så slemt, men bemærk, hvordan fancy det er.

1112
01:06:11,420 --> 01:06:15,450
Hvis jeg klikker på Tilmeld uden samarbejde, får jeg råbte på.

1113
01:06:15,450 --> 01:06:17,320
"Du skal oplyse din email-adresse."

1114
01:06:17,320 --> 01:06:21,670
Ok. Så lad mig prøve det. Så malan@harvard.edu. Jeg har ikke brug for en adgangskode.

1115
01:06:21,670 --> 01:06:25,100
Register. "Du skal angive et kodeord." Ok.

1116
01:06:25,100 --> 01:06:28,470
Så jeg vil give en adgangskode blodrød. Register.

1117
01:06:28,470 --> 01:06:32,300
"Adgangskoderne stemmer ikke overens." Jeg er nødt til nu skrive i højrød her.

1118
01:06:32,300 --> 01:06:35,710
Jeg ved et uheld tjekket det. Register.

1119
01:06:35,710 --> 01:06:39,860
"Du skal acceptere de vilkår og betingelser." Ok. Enig der. Register.

1120
01:06:39,860 --> 01:06:43,700
Og nu viser mig den diagnostiske output derovre.

1121
01:06:43,700 --> 01:06:45,630
>> Så hvad der lige er sket?

1122
01:06:45,630 --> 01:06:48,330
Vi har haft denne evne til at validere formularer.

1123
01:06:48,330 --> 01:06:51,420
Faktisk, hvis du gjorde dykke ind i Pset 7 der er en undskylder funktion

1124
01:06:51,420 --> 01:06:54,620
der gør det temmelig nemt at råbe på brugeren med en meddelelse på skærmen.

1125
01:06:54,620 --> 01:06:57,580
Jeg bruger en lidt anderledes mekanisme, alarm funktion,

1126
01:06:57,580 --> 01:07:03,690
der er ikke en funktion, der er smilet fordi det gør meget grimme brugermeddelelser.

1127
01:07:03,690 --> 01:07:05,710
Men lad os se, hvad jeg laver her.

1128
01:07:05,710 --> 01:07:09,620
Det er form1.html, og læg mærke til, at jeg har nogle temmelig bekendt syntaks:

1129
01:07:09,620 --> 01:07:12,920
kroppen tag, form tag, action attribut, metode attribut.

1130
01:07:12,920 --> 01:07:17,050
Men bemærk Jeg har givet min form et unikt id for nemheds skyld.

1131
01:07:17,050 --> 01:07:19,190
Så jeg har fået en e-mail felt, hvis type er tekst,

1132
01:07:19,190 --> 01:07:23,780
et password felt, hvis type er password, bekræftelse felt, hvis type er password,

1133
01:07:23,780 --> 01:07:28,070
og derefter et afkrydsningsfelt, hvis navn er enighed herovre, type er afkrydsningsfelt.

1134
01:07:28,070 --> 01:07:30,380
Og så har jeg fået en submit knap.

1135
01:07:30,380 --> 01:07:33,050
Men bemærk øverst hvad mere jeg har.

1136
01:07:33,050 --> 01:07:35,810
Først og fremmest er der en anden brug af script-tag.

1137
01:07:35,810 --> 01:07:40,520
Hvis du har nogle JavaScript-kode i en anden fil, ligesom med CSS kan du medtage det.

1138
01:07:40,520 --> 01:07:44,530
Og du gør det med script kilde, og derefter mærke jeg connecting tilsyneladende

1139
01:07:44,530 --> 01:07:50,349
at googleapis.com til en meget lang vej, men hvis filnavnet slutter i jquery.min

1140
01:07:50,349 --> 01:07:52,420
for minimum. js.

1141
01:07:52,420 --> 01:07:55,969
jQuery er en super populær bibliotek for JavaScript, der bare gør JavaScript

1142
01:07:55,969 --> 01:07:58,230
desto mere brugervenlig at bruge.

1143
01:07:58,230 --> 01:08:00,610
Det er faktisk blevet en de facto standard.

1144
01:08:00,610 --> 01:08:04,090
Så selvom hvad du er ved at se, er ikke ren JavaScript per se,

1145
01:08:04,090 --> 01:08:09,340
Det er et bibliotek på toppen af ​​JavaScript ligesom den CS50 biblioteket er et lag

1146
01:08:09,340 --> 01:08:13,670
oven på lav-niveau C-kode, virkeligheden er næsten alle på internettet bruger det.

1147
01:08:13,670 --> 01:08:18,030
Så dette er ikke støttehjul. Dette er bare bedst øve disse dage.

1148
01:08:18,030 --> 01:08:22,830
Læg nu mærke nedenfor, er mit eget script tag, og læg mærke til hvad jeg har gjort her.

1149
01:08:22,830 --> 01:08:27,450
Det viser sig, at jQuery gør noget lidt fancy.

1150
01:08:27,450 --> 01:08:29,660
JavaScript har dollartegn, men de er meningsløse.

1151
01:08:29,660 --> 01:08:32,870
>> De er som bogstavet A eller B eller C.

1152
01:08:32,870 --> 01:08:36,670
jQuery har simpelthen vedtaget konventionen eller slags gjort krav på, at

1153
01:08:36,670 --> 01:08:40,280
at $ vil være deres specielle symbol.

1154
01:08:40,280 --> 01:08:44,950
Så så snart du lægger denne globale JavaScript-fil op her med script-tag,

1155
01:08:44,950 --> 01:08:49,080
du har adgang til en særlig global variabel der hedder $.

1156
01:08:49,080 --> 01:08:53,009
Det er mere korrekt kaldes jQuery, men det ser ikke nær så sexet som $.

1157
01:08:53,009 --> 01:08:56,250
Men $ har ingen speciel betydning. I PHP havde speciel betydning.

1158
01:08:56,250 --> 01:08:58,440
Du skulle have det foran en variabel.

1159
01:08:58,440 --> 01:09:01,670
Dette er blot en sexet ting, de tog på.

1160
01:09:01,670 --> 01:09:03,389
Hvad sker der her?

1161
01:09:03,389 --> 01:09:08,830
Bemærk jeg passerer den jQuery funktion min globale variabel dokument

1162
01:09:08,830 --> 01:09:10,860
og så jeg ringer. klar.

1163
01:09:10,860 --> 01:09:15,480
Hvad jQuery væsentlige gør, er det giver dig mulighed for at tage nogle vanille JavaScript ting

1164
01:09:15,480 --> 01:09:17,889
ligesom dokumentet objekt, vinduet objekt

1165
01:09:17,889 --> 01:09:20,790
og hvis du passerer det i den jQuery funktion -

1166
01:09:20,790 --> 01:09:24,429
og igen, for at være klar, dette er en funktion kaldet jQuery -

1167
01:09:24,429 --> 01:09:28,240
hvad det gør, er det tilbage til dig en speciel version af dokument

1168
01:09:28,240 --> 01:09:30,700
der har mere funktionalitet tilknyttet.

1169
01:09:30,700 --> 01:09:34,760
Så i rå JavaScript er der ingen klar funktion,

1170
01:09:34,760 --> 01:09:37,810
men hvis du passerer dokument til den jQuery funktion først,

1171
01:09:37,810 --> 01:09:40,960
den vender tilbage til dig en speciel version af dokumentet objekt

1172
01:09:40,960 --> 01:09:43,030
der har flere smarte funktioner.

1173
01:09:43,030 --> 01:09:48,230
Og det er derfor, folk kan lide det. Det bare gør tingene lettere at gøre, da vi er ved at se.

1174
01:09:48,230 --> 01:09:49,820
Så hvad betyder denne linje kode betyder?

1175
01:09:49,820 --> 01:09:52,690
Denne linje kode her betyder, når dokumentet er klar -

1176
01:09:52,690 --> 01:09:56,830
med andre ord browseren gang er færdig med at læse denne fil top til bund -

1177
01:09:56,830 --> 01:09:59,200
gå videre og udføre følgende funktion.

1178
01:09:59,200 --> 01:10:03,540
Hvad er virkelig interessant i JavaScript - og PHP har det så godt -

1179
01:10:03,540 --> 01:10:05,450
er anonyme funktioner.

1180
01:10:05,450 --> 01:10:10,560
I JavaScript kan du erklære funktioner, der har noget navn, men de har en krop.

1181
01:10:10,560 --> 01:10:12,570
Læg mærke til hvad der sker her.

1182
01:10:12,570 --> 01:10:16,220
>> Dette er en funktion kaldet klar, og det betyder blot gøre følgende

1183
01:10:16,220 --> 01:10:20,220
når hele webside er klar, når det hele er blevet læst ind fra serveren.

1184
01:10:20,220 --> 01:10:23,090
Hvad vil du gøre? Jeg ønsker at udføre et stykke kode.

1185
01:10:23,090 --> 01:10:27,120
Bemærk, at vi ikke ønsker at udføre denne kode med det samme.

1186
01:10:27,120 --> 01:10:34,350
Hvis jeg udeladt dette, ville det betyde straks begynde gennemførelsen af ​​disse linjer kode.

1187
01:10:34,350 --> 01:10:39,040
Men det faktum, at jeg siger nej, nej, nej, wrap dette i en anonym funktion som denne

1188
01:10:39,040 --> 01:10:43,000
betyder ikke udføre det endnu, kalder det i sidste ende.

1189
01:10:43,000 --> 01:10:45,430
Vi så for et øjeblik siden i vores tidligere form eksempel.

1190
01:10:45,430 --> 01:10:49,990
Hvilken funktion har vi kalde til sidst, 500 millisekunder senere? Blink.

1191
01:10:49,990 --> 01:10:51,480
Så den samme idé.

1192
01:10:51,480 --> 01:10:53,950
Igen, selvom det ser lidt mærkeligt, bare tage for nu om tro

1193
01:10:53,950 --> 01:10:57,060
at erklære en anonym funktion, der hedder til sidst,

1194
01:10:57,060 --> 01:11:01,720
du blot skrive function () {

1195
01:11:01,720 --> 01:11:05,380
Så hvad kode skal vi eksekvere sidst? Følgende.

1196
01:11:05,380 --> 01:11:10,460
Også dette ser lidt nyt, men det betyder her er den jQuery funktion,

1197
01:11:10,460 --> 01:11:13,430
og dette nu er en genvej.

1198
01:11:13,430 --> 01:11:18,830
Denne stump HTML nederst på skærmen naturligvis har nogle træ repræsentation.

1199
01:11:18,830 --> 01:11:21,730
Det er ikke det. Denne side er mere interessant end denne hello, world eksempel.

1200
01:11:21,730 --> 01:11:25,210
Men der er nogle træ, der svarer til denne HTML.

1201
01:11:25,210 --> 01:11:28,910
Det ville være en smerte i nakken for at skulle gennemføre en form for rekursiv funktion

1202
01:11:28,910 --> 01:11:34,380
til at starte ved roden node og derefter finde den node, hvis ID er registreret.

1203
01:11:34,380 --> 01:11:38,340
Så hvad jQuery gør super nemt for os er bogstavelig talt det.

1204
01:11:38,340 --> 01:11:43,000
Gå videre og få mig hvad div eller anden form, uanset HTML-element

1205
01:11:43,000 --> 01:11:45,820
har et id for registrering.

1206
01:11:45,820 --> 01:11:52,440
Dette svarer til document.getElementById ("registreringen").

1207
01:11:52,440 --> 01:11:54,170
>> Hvorfor gør folk som jQuery?

1208
01:11:54,170 --> 01:12:00,110
Fordi det er kortere at skrive. Men det er alt det er. Det er den samme idé.

1209
01:12:00,110 --> 01:12:02,630
Hent mig tag hvis ID er registreret.

1210
01:12:02,630 --> 01:12:06,300
Og når det tag, der sker for at være en form, der er indgivet,

1211
01:12:06,300 --> 01:12:08,300
gå videre og udføre denne kode.

1212
01:12:08,300 --> 01:12:11,320
Så lad os tage et kig nu på, hvordan vi laver form validering.

1213
01:12:11,320 --> 01:12:15,950
Syntaksen er ganske vist kryptisk i starten, men hvad sker der?

1214
01:12:15,950 --> 01:12:21,050
Hvis denne linje kode er sandt, vil jeg råbe på brugeren om at give hans eller hendes e-mail-adresse.

1215
01:12:21,050 --> 01:12:22,970
Så hvad er denne linje kode?

1216
01:12:22,970 --> 01:12:25,560
$ Betyder jQuery. Nu bemærke dette.

1217
01:12:25,560 --> 01:12:27,920
Det er lidt ligesom CSS.

1218
01:12:27,920 --> 01:12:33,370
Hvis du har dykket ned CSS endnu, vil du vide, at dette betyder, at elementet hvis ID er registreret.

1219
01:12:33,370 --> 01:12:39,840
Rummet betyder finde et barn eller en efterkommer af registreringen, hvis navn er input.

1220
01:12:39,840 --> 01:12:42,970
Og så denne ting i firkantede parenteser er en lille filter.

1221
01:12:42,970 --> 01:12:47,010
Og selv hvis dette virker kryptisk, dette betyder blot gå til form, hvis ID er registrering,

1222
01:12:47,010 --> 01:12:51,230
gå til indgangen element inde i det, hvis navn er e-mail,

1223
01:12:51,230 --> 01:12:55,440
og derefter få sin værdi, uanset dens værdi sker for at være -

1224
01:12:55,440 --> 01:12:59,670
asdf hvis det er alt jeg har skrevet eller malan@harvard.edu hvis det er det jeg har skrevet.

1225
01:12:59,670 --> 01:13:05,250
Så hvis værdien af ​​formen e-mail felt == ingenting, råbe på brugeren.

1226
01:13:05,250 --> 01:13:09,700
Else, hvis værdien af ​​password feltet == ingenting, råbe på brugeren.

1227
01:13:09,700 --> 01:13:19,520
>> Else, hvis værdien af ​​feltet til adgangskode ikke modsvare værdien af ​​bekræftelsesfeltet

1228
01:13:19,520 --> 01:13:22,850
som var den anden form element, råbe på brugeren.

1229
01:13:22,850 --> 01:13:25,680
Og så endelig - og det ene også har nogle nye syntaks af sine egne,

1230
01:13:25,680 --> 01:13:29,270
men når du har set det, det er i det mindste lidt mere fornuftigt -

1231
01:13:29,270 --> 01:13:34,060
ellers hvis den form, hvis ID er registreringen har en indgang element, hvis navn er enighed

1232
01:13:34,060 --> 01:13:39,720
og det kontrolleres, gå videre og råbe på brugeren.

1233
01:13:39,720 --> 01:13:42,520
Så jeg er helt indrømme det er helt overvældende ved første øjekast.

1234
01:13:42,520 --> 01:13:46,530
Det er en masse ny syntaks. Men alle jQuery følger den slags mønstre.

1235
01:13:46,530 --> 01:13:49,880
Og ærligt, jeg ikke engang kender dette eksisterede indtil for et par minutter siden.

1236
01:13:49,880 --> 01:13:53,640
Jeg googlede, "Hvordan kan du kontrollere, om en checkboks er markeret i jQuery?"

1237
01:13:53,640 --> 01:13:55,680
og dette er den syntaks, fordi der er forskellige måder at gøre det

1238
01:13:55,680 --> 01:13:58,010
med den faktiske rå JavaScript-kode.

1239
01:13:58,010 --> 01:14:01,030
Så som den allerførste side af Problem sæt 7 understreger,

1240
01:14:01,030 --> 01:14:04,500
Pset 7 er i høj grad en øvelse i bootstrapping selv

1241
01:14:04,500 --> 01:14:08,650
hvor vi har forhåbentlig en begrebsramme med til at tackle Pset.

1242
01:14:08,650 --> 01:14:12,280
>> Men som det ofte er tilfældet med web-design, er det op til dig virkelig at stikke rundt,

1243
01:14:12,280 --> 01:14:16,680
inkorporere kodedele og eksempler fra nettet, så længe du citerer dem

1244
01:14:16,680 --> 01:14:17,960
I henhold til vilkårene på det første ark,

1245
01:14:17,960 --> 01:14:21,460
og indse, at lære HTML, CSS, JavaScript og endda SQL

1246
01:14:21,460 --> 01:14:26,020
der egentlig menes at være denne at-home øvelse, når vi begynder at tage disse støttehjul off.

1247
01:14:26,020 --> 01:14:29,150
Og indser også der er så mange flere ting, du kan gøre med en browser.

1248
01:14:29,150 --> 01:14:33,790
Inde i de fleste af disse elementer der er andre ting der kaldes hændelseshandlere.

1249
01:14:33,790 --> 01:14:37,140
Og selvom vi kiggede bare på dem, kaldet onSubmit og onready,

1250
01:14:37,140 --> 01:14:40,310
du kan gøre ting som onkeydown, onkeyup,

1251
01:14:40,310 --> 01:14:43,410
gerne, når brugeren rører en tast, kan du lytte til det og nøgle op.

1252
01:14:43,410 --> 01:14:45,940
Gmail har tastaturgenveje.

1253
01:14:45,940 --> 01:14:49,490
Hvordan Google gennemfører tastaturgenveje som C for komponere?

1254
01:14:49,490 --> 01:14:54,120
De lytter til arrangementer, som de kaldes, ligesom onkeypress eller onkeyup og onkeydown.

1255
01:14:54,120 --> 01:14:56,360
Hvis du nogensinde har svævede musen over nogle menupunkt

1256
01:14:56,360 --> 01:15:00,180
og lige pludselig, voila, vises en menu eller den grafiske skifter farve,

1257
01:15:00,180 --> 01:15:01,920
hvordan gør de det?

1258
01:15:01,920 --> 01:15:06,940
Snarere end at lytte til onready eller ved afsendelse, du lytter til onmouseover eller onMouseOut.

1259
01:15:06,940 --> 01:15:10,920
>> Så kort sagt, med disse meget enkle grundlæggende, at vi er begyndt at ridse overfladen af ​​i dag

1260
01:15:10,920 --> 01:15:13,940
og vi vil dykke i yderligere til på onsdag, du har, i stigende grad,

1261
01:15:13,940 --> 01:15:17,530
magt til at gennemføre den slags ting, som du allerede kender.

1262
01:15:17,530 --> 01:15:21,620
Så lad os slutte der, og vi vil fortsætte med dette på onsdag.

1263
01:15:22,690 --> 01:15:24,320
>> [CS50.TV]