1
00:00:00,000 --> 00:00:02,862
>> [MUSIK SPELA]

2
00:00:02,862 --> 00:00:10,030

3
00:00:10,030 --> 00:00:11,580
>> DAVID MALAN: Detta är CS50.

4
00:00:11,580 --> 00:00:12,880
Detta är början på veckan nio.

5
00:00:12,880 --> 00:00:15,797
Och detta är vad som skulle ha
varit Mr. Boole 200-årsdag.

6
00:00:15,797 --> 00:00:17,630
Så det här är stipendiaterna
som vi har nämnt

7
00:00:17,630 --> 00:00:21,800
ganska ibland om hur du använder
Boolean variabler sant och falskt,

8
00:00:21,800 --> 00:00:22,910
1 och 0 och sådant.

9
00:00:22,910 --> 00:00:25,270
Och detta var Googles
Hyllning till honom idag.

10
00:00:25,270 --> 00:00:26,489
Han skulle ha fyllt 200.

11
00:00:26,489 --> 00:00:28,280
Så om du vill
ansluta sig till oss för CS50 lunch,

12
00:00:28,280 --> 00:00:30,279
ta en titt på länken
på kursens hemsida.

13
00:00:30,279 --> 00:00:33,580
Och sådana ansikten och vänner som
dessa väntar dig här i Cambridge.

14
00:00:33,580 --> 00:00:35,360
Ansikten som dessa väntar dig i New Haven.

15
00:00:35,360 --> 00:00:37,800
Och, faktiskt, Ken i
New Haven vänligt gjort

16
00:00:37,800 --> 00:00:41,594
vad som kallas en animerad GIF Eli
här på en nyligen lunch-- en GIF ännu

17
00:00:41,594 --> 00:00:44,260
annan grafiskt filformat,
som du är familiar-- att

18
00:00:44,260 --> 00:00:46,300
ser lite ut ungefär så här.

19
00:00:46,300 --> 00:00:48,179
Så bara en sekvens of-- OK.

20
00:00:48,179 --> 00:00:49,720
Ingen här i Cambridge skrattar.

21
00:00:49,720 --> 00:00:51,720
Men i New Haven, detta
är verkligen roligt, eller hur?

22
00:00:51,720 --> 00:00:52,350
Okej.

23
00:00:52,350 --> 00:00:53,940
>> Så gör med oss ​​där.

24
00:00:53,940 --> 00:00:55,900
Här på Harvard,
specifikt, onsdag,

25
00:00:55,900 --> 00:00:59,480
om du är en sophomore eller nybörjare even--
eller ens junior-- funderar på att göra

26
00:00:59,480 --> 00:01:01,563
en omkopplare i dator
vetenskap, vet att det blir

27
00:01:01,563 --> 00:01:04,440
vara en CS rådgivning rättvis detta
Onsdag, strax efter klass

28
00:01:04,440 --> 00:01:08,040
vid 04:00 i datorn
vetenskap byggnad Maxwell Dworkin.

29
00:01:08,040 --> 00:01:11,890
Vi kommer att sätta detta på kursens
webbplats i morgon, liksom.

30
00:01:11,890 --> 00:01:14,430
Munkar, jag har fått veta, kommer att serveras.

31
00:01:14,430 --> 00:01:15,180
>> Okej.

32
00:01:15,180 --> 00:01:18,790
Så roligt story-- jag peta
runt på internet,

33
00:01:18,790 --> 00:01:23,575
och jag hittade några gamla arkiv
av min tidigare hemsida.

34
00:01:23,575 --> 00:01:25,950
Och det visar out-- runt detta
tid, verkar det mycket lägligt

35
00:01:25,950 --> 00:01:28,910
eftersom jag har förstått att valet UC
är på väg att växla upp igen.

36
00:01:28,910 --> 00:01:32,230
Så jag körde för UC, förlorade kapitalt.

37
00:01:32,230 --> 00:01:34,770
Och kanske det var delvis varför.

38
00:01:34,770 --> 00:01:37,600
Så det här var min hemsida på den tiden.

39
00:01:37,600 --> 00:01:40,477
Av någon anledning, jag trodde det var
en bra idé, innan tala om för folk

40
00:01:40,477 --> 00:01:43,310
vad min plattform var och varför de
bör rösta på mig, att de har

41
00:01:43,310 --> 00:01:47,770
klicka på för att komma in för att ta reda på att
information vilken i efterhand är

42
00:01:47,770 --> 00:01:48,660
typ av obehagligt.

43
00:01:48,660 --> 00:01:50,910
Jag vet inte riktigt vad det var.

44
00:01:50,910 --> 00:01:53,140
>> Men det gjorde verkligen inte
hjälpa min kampanj.

45
00:01:53,140 --> 00:01:56,874
Jag fann också att genom högre
year-- Jag hade Muppet kalendern.

46
00:01:56,874 --> 00:01:58,540
Muppets var typ av på modet då.

47
00:01:58,540 --> 00:01:59,456
Eller kanske de inte.

48
00:01:59,456 --> 00:02:01,790
Jag hade en Muppet kalender då.

49
00:02:01,790 --> 00:02:04,860
Och jag trodde det skulle vara coolt att namn
min dator på Harvards nätverk

50
00:02:04,860 --> 00:02:07,460
frogman.student.harvard.edu.

51
00:02:07,460 --> 00:02:10,370
Vid den tiden hade vi alla unikt
identifierbara värdnamn.

52
00:02:10,370 --> 00:02:13,150
Och du kan välja några fåfänga
namn i stället för ditt eget namn.

53
00:02:13,150 --> 00:02:15,580
Och jag gick med frogman av någon anledning.

54
00:02:15,580 --> 00:02:19,040
>> Och då jag started-- jag tillbringade en hel del
tid klicka dig vidare dessa länkar

55
00:02:19,040 --> 00:02:20,280
den här morgonen.

56
00:02:20,280 --> 00:02:24,690
Och detta var mitt om sidan,
som nu slags verkar bedårande.

57
00:02:24,690 --> 00:02:28,210
Men det vittnar också bara
hur långt tekniken har kommit.

58
00:02:28,210 --> 00:02:30,310
Jag menar, tillbaka i dag,
en 486 var något.

59
00:02:30,310 --> 00:02:34,090
Dessa dagar, är det super, super,
super långsamt och väl mindre

60
00:02:34,090 --> 00:02:36,216
än du kan ha i din
egna fickor dessa dagar.

61
00:02:36,216 --> 00:02:38,465
Det finns mer där som
var ännu mer pinsamt.

62
00:02:38,465 --> 00:02:39,770
Så jag lämnar den på det.

63
00:02:39,770 --> 00:02:42,640
Men det var min första
razzia i web-- oh, nej.

64
00:02:42,640 --> 00:02:43,180
Det var inte.

65
00:02:43,180 --> 00:02:47,000
Min första riktiga razzia i webbprogrammering
var denna webbplats, som jag bara glömt.

66
00:02:47,000 --> 00:02:50,620
Vid något tillfälle har jag lärt mig hur man
göra repetitiva bakgrundsbilder.

67
00:02:50,620 --> 00:02:55,260
Och så jag tyckte att det här upprepas effektiv,
som hockeyspelare, fotboll och golf

68
00:02:55,260 --> 00:02:58,040
boll, eller vad det nu är
för Frosh IM webbplats.

69
00:02:58,040 --> 00:03:01,390
Och det var faktiskt verkligen den
första webbaserade projekt jag tog on--

70
00:03:01,390 --> 00:03:03,880
Jag tror kanske sophomore
år, junior year--

71
00:03:03,880 --> 00:03:07,622
efter att ha tagit CS50 och CS51, en
av de vanliga följd på klasser.

72
00:03:07,622 --> 00:03:09,330
Jag märkte att titta
igenom arkiven

73
00:03:09,330 --> 00:03:12,150
att en av mina efterträdare och
vänner, Lee, typ av ändrade

74
00:03:12,150 --> 00:03:13,480
upphovsrätten till sig själv.

75
00:03:13,480 --> 00:03:17,520
Men det var verkligen något som
Jag ska äga förlägenhet till.

76
00:03:17,520 --> 00:03:19,370
Men på den tiden, detta
var det första hemsida,

77
00:03:19,370 --> 00:03:22,220
som jag sade för några veckor sedan,
genom vilken recentior kunde

78
00:03:22,220 --> 00:03:24,350
registrera för intramural sport här.

79
00:03:24,350 --> 00:03:27,950
Och så visar det sig
att bakgrundsbilder

80
00:03:27,950 --> 00:03:29,530
som som inte är en så bra idé.

81
00:03:29,530 --> 00:03:31,840
Men banan var ny, och
Vi var alla experimentera.

82
00:03:31,840 --> 00:03:34,310
Och detta är vad jag
tydligen gjorde vid den tidpunkten.

83
00:03:34,310 --> 00:03:34,810
Okej.

84
00:03:34,810 --> 00:03:38,020
Så utan vidare, vi byter
kugghjulen i dag för att ge dig, verkligen,

85
00:03:38,020 --> 00:03:42,250
den sista pusselbiten som du kan hitta
speciellt användbar för examensarbeten

86
00:03:42,250 --> 00:03:44,780
men också som kommer att börja
göra hela webben

87
00:03:44,780 --> 00:03:46,680
känna lite mer begriplig.

88
00:03:46,680 --> 00:03:49,460
I själva verket, vi kommer att införa
en mer programmeringsspråk

89
00:03:49,460 --> 00:03:52,474
kallas JavaScript som liknar
och olika på olika sätt

90
00:03:52,474 --> 00:03:54,140
från språk vi har tittat på hittills.

91
00:03:54,140 --> 00:03:55,807
>> Så C, minns, detta är sammanställt språk.

92
00:03:55,807 --> 00:03:57,473
You got att köra det genom en kompilator.

93
00:03:57,473 --> 00:03:59,810
Du får källkoden att invända
kod eller nollor och ettor.

94
00:03:59,810 --> 00:04:03,000
Och de är nollor och ettor som
din CPU, Central Processing Unit,

95
00:04:03,000 --> 00:04:04,360
faktiskt förstår.

96
00:04:04,360 --> 00:04:06,610
PHP, däremot, är inte
en kompilerad språk.

97
00:04:06,610 --> 00:04:08,772
Det är en vad?

98
00:04:08,772 --> 00:04:09,980
Det är ett tolkat språk.

99
00:04:09,980 --> 00:04:11,750
Så det finns något program
kallas en tolk som

100
00:04:11,750 --> 00:04:13,708
måste läsa det-- topp till
botten, vänster för att right--

101
00:04:13,708 --> 00:04:16,519
och räkna ut vad alla
din syntax gör och innebär

102
00:04:16,519 --> 00:04:20,200
oavsett om det är en loop eller ett tillstånd
eller något annat antal programmering

103
00:04:20,200 --> 00:04:20,740
konstruktioner.

104
00:04:20,740 --> 00:04:22,210
Så det är ett tolkat språk.

105
00:04:22,210 --> 00:04:23,910
>> Sedan införde vi HTML.

106
00:04:23,910 --> 00:04:26,440
Och HTML är inte ens en
programmeringsspråk.

107
00:04:26,440 --> 00:04:28,110
Vi skulle kalla det vad?

108
00:04:28,110 --> 00:04:31,650
En märkspråk, vilket är bara
ett slags finare sätt att säga det

109
00:04:31,650 --> 00:04:35,820
inte har programmering konstruktioner som
Vi såg även tillbaka i dag av Scratch.

110
00:04:35,820 --> 00:04:36,720
Det finns inga slingor.

111
00:04:36,720 --> 00:04:37,920
Det finns inga villkor.

112
00:04:37,920 --> 00:04:40,820
Det är verkligen ett språk
om märkning upp dina data

113
00:04:40,820 --> 00:04:43,620
och formatera det eller
strukturera den på något sätt.

114
00:04:43,620 --> 00:04:46,147
>> CSS, under tiden, på liknande sätt
inte ett programmeringsspråk.

115
00:04:46,147 --> 00:04:47,730
Det är ännu mer estetiskt orienterad.

116
00:04:47,730 --> 00:04:50,470
Och det gör att du kan sortera av finjustera
saker som teckenstorlek och färger

117
00:04:50,470 --> 00:04:51,850
och placering och allt detta.

118
00:04:51,850 --> 00:04:52,370
Sedan hade vi

119
00:04:52,370 --> 00:04:53,160
>> SQL.

120
00:04:53,160 --> 00:04:56,010
Så SQL är verkligen en programmering
språk i någon mening,

121
00:04:56,010 --> 00:04:59,330
om än skräddarsydda
specifikt till databaser.

122
00:04:59,330 --> 00:05:03,347
Men även om vi bara introducera dig till
välja och infoga och ta bort och uppdatera

123
00:05:03,347 --> 00:05:05,430
och ett par andra,
visar sig att du faktiskt kan

124
00:05:05,430 --> 00:05:07,380
skrivfunktioner eller
förfaranden, eftersom de är

125
00:05:07,380 --> 00:05:11,270
heter, i SQL som ser och agerar
riktigt gillar PHP och C-funktioner.

126
00:05:11,270 --> 00:05:12,390
Så vet att de existerar.

127
00:05:12,390 --> 00:05:15,348
Men vi behöver inte ens bry sig om dem
som vi skrapar bara på ytan här.

128
00:05:15,348 --> 00:05:18,600
Och sedan JavaScript, den sista av
våra språk formellt infördes.

129
00:05:18,600 --> 00:05:21,029
Så JavaScript, är också
ett tolkat språk.

130
00:05:21,029 --> 00:05:23,070
Och de känner, gör
du vill skilja den

131
00:05:23,070 --> 00:05:26,960
med några karakteristiska
från både C och PHP?

132
00:05:26,960 --> 00:05:28,300
Vad gör det annorlunda?

133
00:05:28,300 --> 00:05:29,650
>> PUBLIK: Det är inte sammanställt.

134
00:05:29,650 --> 00:05:29,930
>> DAVID MALAN: Säg igen?

135
00:05:29,930 --> 00:05:31,200
>> PUBLIK: Det är inte sammanställt.

136
00:05:31,200 --> 00:05:31,930
>> DAVID MALAN: Det är inte sammanställt.

137
00:05:31,930 --> 00:05:33,450
Så det också tolkas.

138
00:05:33,450 --> 00:05:34,760
Så det är inte sammanställt.

139
00:05:34,760 --> 00:05:37,210
Men det gör det lite som PHP.

140
00:05:37,210 --> 00:05:39,545
Men det är fortfarande skiljer sig från
PHP på något slående sätt,

141
00:05:39,545 --> 00:05:40,920
åtminstone på det sätt som vi kommer att använda det.

142
00:05:40,920 --> 00:05:41,205
Yeah?

143
00:05:41,205 --> 00:05:41,940
>> PUBLIK: Det går klientsidan.

144
00:05:41,940 --> 00:05:44,000
>> DAVID MALAN: Det går
klientsidan, oftast.

145
00:05:44,000 --> 00:05:47,190
Det är verkligen utmärkande
kännetecknande för oss just nu.

146
00:05:47,190 --> 00:05:51,170
C var på serversidan i den meningen
att vi gjorde allt i CS50 IDE.

147
00:05:51,170 --> 00:05:53,630
PHP har hittills varit
serversidan i den mån

148
00:05:53,630 --> 00:05:56,550
som det också blir interpreted--
inte sammanställt, men interpreted--

149
00:05:56,550 --> 00:06:00,690
inne CS50 IDE, vilket naturligtvis är
bara en server eller servrar i molnet.

150
00:06:00,690 --> 00:06:03,070
>> Men JavaScript, även
om du att du kommer

151
00:06:03,070 --> 00:06:07,000
att börja skriva den för, säg, pset
åtta och kanske final projects-- du

152
00:06:07,000 --> 00:06:09,620
kommer till höger det i
CS50 IDE och spara den

153
00:06:09,620 --> 00:06:14,760
i filer inom CS50 IDE, CS50 IDE
och i sin tur, molnet servrar

154
00:06:14,760 --> 00:06:19,160
som den är värd, kommer inte
att tolka eller köra din kod.

155
00:06:19,160 --> 00:06:23,880
Snarare kommer det att sändas i
oförändrad form ned till webbläsaren.

156
00:06:23,880 --> 00:06:26,990
Och det är då kommer att bli IE
eller Chrome eller Firefox eller Safari

157
00:06:26,990 --> 00:06:30,697
eller vad som faktiskt tolkar
det, uppifrån och ned, från vänster till höger.

158
00:06:30,697 --> 00:06:32,780
Så nyckeln särskiljande
kännetecknande för idag

159
00:06:32,780 --> 00:06:36,110
är att JavaScript är klientsidan
och PHP, till exempel,

160
00:06:36,110 --> 00:06:37,690
har varit på serversidan.

161
00:06:37,690 --> 00:06:40,920
Nu har denna intressanta implikationer
för, som, immaterialrätt

162
00:06:40,920 --> 00:06:42,660
och vem kan faktiskt se din kod.

163
00:06:42,660 --> 00:06:44,860
Och faktiskt, kan du gå
på webben och se de flesta

164
00:06:44,860 --> 00:06:47,530
någon kod att någon har
skriven i JavaScript.

165
00:06:47,530 --> 00:06:50,230
Ibland är det läsbar,
ibland är det förvrängd.

166
00:06:50,230 --> 00:06:52,550
Men mer om detta i god tid.

167
00:06:52,550 --> 00:06:57,530
>> Så JavaScript, snyggt nog, är
super liknande, syntaktiskt, till C.

168
00:06:57,530 --> 00:06:59,364
Och mycket som PHP,
det finns ingen huvudfunktion.

169
00:06:59,364 --> 00:07:02,113
Om du vill börja skriva
JavaScript-kod, som du ser i dag,

170
00:07:02,113 --> 00:07:03,270
du bara börja skriva det.

171
00:07:03,270 --> 00:07:06,910
Men det är, du ser, i synnerhet
användbara i samband med webbläsare.

172
00:07:06,910 --> 00:07:09,820
Men min lilla
disclaimer-- vanligtvis earlier--

173
00:07:09,820 --> 00:07:13,790
var att säga att du kan allt
idag använder JavaScript på serversidan

174
00:07:13,790 --> 00:07:17,655
med hjälp av en fin ram kallas Node.js
att en del av CS50: s egna program

175
00:07:17,655 --> 00:07:18,280
skrivs in.

176
00:07:18,280 --> 00:07:20,640
Kontrollera 50 faktiskt använder Node.js.

177
00:07:20,640 --> 00:07:24,140
Men vi kommer att fokusera på
JavaScript på klientsidan här på ut.

178
00:07:24,140 --> 00:07:26,750
>> Så här är en uppsättning villkor i PHP.

179
00:07:26,750 --> 00:07:29,350
Tyvärr, in-- faktiskt, att
uttalande, är alltför korrekt.

180
00:07:29,350 --> 00:07:32,200
Här finns också en uppsättning av
förhållandena i JavaScript.

181
00:07:32,200 --> 00:07:35,560
Syntaktiskt, är det
identisk med C och PHP.

182
00:07:35,560 --> 00:07:39,040
Mr Boole s uttryck är,
på liknande sätt, syntaktiskt

183
00:07:39,040 --> 00:07:41,190
identisk med både C och PHP.

184
00:07:41,190 --> 00:07:44,100
Vi har även växlar i
JavaScript som ser identiska.

185
00:07:44,100 --> 00:07:46,350
Vi har för slingor som är
strukturerad identiskt,

186
00:07:46,350 --> 00:07:48,140
medan loopar, göra medan slingor.

187
00:07:48,140 --> 00:07:49,980
>> Den här är lite annorlunda.

188
00:07:49,980 --> 00:07:53,120
PHP hade för varje konstruktion
att du kan vara att använda

189
00:07:53,120 --> 00:07:55,320
eller kommer att använda i pset sju, kanske.

190
00:07:55,320 --> 00:07:59,460
JavaScript har denna specialversion av
för där du bokstavligen säga något

191
00:07:59,460 --> 00:08:03,864
som för rörlig nyckeln i objektet, vilket
är en mycket kortfattad sätt att säga,

192
00:08:03,864 --> 00:08:06,780
om jag har en object-- och vi ska
prata om de här igen i en moment--

193
00:08:06,780 --> 00:08:10,370
och jag vill iterera över alla
av de viktigaste värdeparen inuti,

194
00:08:10,370 --> 00:08:13,620
Jag behöver inte räkna ut hur man
numeriskt index dem med noll, ett,

195
00:08:13,620 --> 00:08:14,580
två, tre.

196
00:08:14,580 --> 00:08:15,900
>> Jag kan bokstavligen säga detta.

197
00:08:15,900 --> 00:08:20,740
Och på varje iteration, JavaScript
för mig kommer att uppdatera variabeltangent

198
00:08:20,740 --> 00:08:24,810
att vara den första nyckeln, sedan nästa tangent,
sedan nästa tangent, sedan nästa tangent,

199
00:08:24,810 --> 00:08:25,510
och så vidare.

200
00:08:25,510 --> 00:08:30,000
Och jag kan komma åt sitt värde genom att behandla
ett objekt i JavaScript, som vi får se,

201
00:08:30,000 --> 00:08:32,584
som om det är en
associativ array i PHP.

202
00:08:32,584 --> 00:08:35,750
Faktum är att om du slutligen insvept din
sinne kring vad en associativ array är

203
00:08:35,750 --> 00:08:40,140
i PHP, kan du tänka på det nu som
identisk med ett objekt i JavaScript.

204
00:08:40,140 --> 00:08:42,030
Men det är en bit av
en förenkling.

205
00:08:42,030 --> 00:08:47,230
>> Arrayer ser, snyggt nog identiska
till PHP utom för ett tecken.

206
00:08:47,230 --> 00:08:51,425
Det finns en sak som saknas här
att vi såg förra veckan med PHP.

207
00:08:51,425 --> 00:08:52,050
Vad utelämnats?

208
00:08:52,050 --> 00:08:53,310
Yeah?

209
00:08:53,310 --> 00:08:54,090
Ingen dollartecken.

210
00:08:54,090 --> 00:08:56,240
Så vi är tillbaka till en
mer normal värld där

211
00:08:56,240 --> 00:08:58,050
variabler har inte dollartecken.

212
00:08:58,050 --> 00:09:00,810
Men du prefix dem
med var typiskt.

213
00:09:00,810 --> 00:09:02,230
Och var betyder variabel.

214
00:09:02,230 --> 00:09:06,440
Och mycket som PHP är löst
typed-- varvid det finns typer,

215
00:09:06,440 --> 00:09:10,120
Det finns siffror och strängar
och flottar och så forth--

216
00:09:10,120 --> 00:09:11,570
JavaScript har liknande typer.

217
00:09:11,570 --> 00:09:15,470
Men det är löst skrivit att vi
programmerare behöver inte ange dem.

218
00:09:15,470 --> 00:09:18,980
Vi måste bara vara medvetna om
att olika typer förekommer.

219
00:09:18,980 --> 00:09:21,690
>> Variabler är meanwhile-- här hur
vi kan förklara "hello, world"

220
00:09:21,690 --> 00:09:22,230
som en sträng.

221
00:09:22,230 --> 00:09:24,890
Lägg märke till att det är identiskt med
PHP men ingen dollartecken.

222
00:09:24,890 --> 00:09:27,120
Och detta är något som vi kommer
börjar se mer idag,

223
00:09:27,120 --> 00:09:30,990
där du har ett objekt
med nycklar och värden.

224
00:09:30,990 --> 00:09:32,990
Och om du vill prova
att dra slutsatsen från förra week--

225
00:09:32,990 --> 00:09:34,730
syntaxen är lite annorlunda.

226
00:09:34,730 --> 00:09:39,740
Men en liten sanity check-- hur många
nycklar gör detta objekt verkar ha?

227
00:09:39,740 --> 00:09:40,850
Så jag ser fyra.

228
00:09:40,850 --> 00:09:43,560
Jag ser två.

229
00:09:43,560 --> 00:09:44,680
>> Så det är egentligen två.

230
00:09:44,680 --> 00:09:47,260
Så det här är en samling
av två nyckel-värdepar.

231
00:09:47,260 --> 00:09:49,820
Nyckeln är symbol vars värde är FB.

232
00:09:49,820 --> 00:09:52,620
Nyckeln är priset vars värde är 101,53.

233
00:09:52,620 --> 00:09:54,230
Så de är två nyckel-värdepar.

234
00:09:54,230 --> 00:09:58,120
Och kom ihåg, PHP-- och detta är återigen
bara typ av syntaktisk skillnad.

235
00:09:58,120 --> 00:10:00,170
Det är inte alla som
intellektuellt intressant.

236
00:10:00,170 --> 00:10:04,610
PHP kan ha skrivit samma
sak som follows-- citationstecken, lika.

237
00:10:04,610 --> 00:10:06,730
Och jag ändra dessa till hakparenteser.

238
00:10:06,730 --> 00:10:11,240
Och sedan jag ändra detta till
ett noterat ordet "pris."

239
00:10:11,240 --> 00:10:12,500
Och då jag inte använder ett kolon.

240
00:10:12,500 --> 00:10:15,060
Vad jag använder i förra veckan?

241
00:10:15,060 --> 00:10:18,290
Ja, likhetstecknet
pil funky notation.

242
00:10:18,290 --> 00:10:21,470
>> Och sedan jag gjorde samma sak här.

243
00:10:21,470 --> 00:10:23,580
Samma sak här.

244
00:10:23,580 --> 00:10:24,240
Och det är allt.

245
00:10:24,240 --> 00:10:27,752
Så det är bra om det här har inte
verkligen sjunkit in i minnet bara

246
00:10:27,752 --> 00:10:29,960
men eftersom det är verkligen
intellektuellt ointressant.

247
00:10:29,960 --> 00:10:31,660
Det är bara syntaktiska skillnader.

248
00:10:31,660 --> 00:10:33,230
Men idéerna är exakt densamma.

249
00:10:33,230 --> 00:10:35,910
Insidan av denna variabel
citat i JavaScript

250
00:10:35,910 --> 00:10:39,020
är en samling av nyckel-värde-par,
en av vilka är symbol, en av vilka

251
00:10:39,020 --> 00:10:39,690
är priset.

252
00:10:39,690 --> 00:10:42,340
Och jag kan komma åt dessa värden
med följande syntax.

253
00:10:42,340 --> 00:10:46,280
Precis som i PHP, jag kunde
göra något like-- låta

254
00:10:46,280 --> 00:10:48,590
mig göra den här rutan lite större.

255
00:10:48,590 --> 00:10:52,750
Precis som i PHP, jag kunde
gör this-- oh, dammit.

256
00:10:52,750 --> 00:10:53,250
Kom igen.

257
00:10:53,250 --> 00:10:56,350

258
00:10:56,350 --> 00:11:00,800
>> Precis som i PHP-- OK, vi ska
bara använda presentatörsanteckningar.

259
00:11:00,800 --> 00:11:06,010
Precis som i PHP, jag kan
gör $ citat $ citat ["symbol"]

260
00:11:06,010 --> 00:11:08,860
och detta kommer att få mig
värdet på "symbol."

261
00:11:08,860 --> 00:11:12,800
I JavaScript, det kommer att bli
identiska, där jag kan bara göra detta.

262
00:11:12,800 --> 00:11:14,850
Det enda som är
saknas är dollartecken.

263
00:11:14,850 --> 00:11:17,470
>> Så fint nog, så finns det
inte så mycket nytt syntax.

264
00:11:17,470 --> 00:11:21,025
Så vad vi idag fokuserar på, egentligen, är
några av de idéer och program.

265
00:11:21,025 --> 00:11:22,900
Och den första
program som du kanske

266
00:11:22,900 --> 00:11:26,090
har sett om du dök i pset
sju redan är syntax.

267
00:11:26,090 --> 00:11:28,980
Så i pset sju, om du har
sett eller inte sett det ännu,

268
00:11:28,980 --> 00:11:33,570
vet att det finns en fil som vi ger
du ringde config.json-- JavaScript

269
00:11:33,570 --> 00:11:34,661
Object Notation.

270
00:11:34,661 --> 00:11:35,160
Varför?

271
00:11:35,160 --> 00:11:39,540
Vi ville att kunna förse dig med
en mall med några nyckel-värdepar.

272
00:11:39,540 --> 00:11:44,290
Vi ville att kunna ge dig en lista
av värden, namnet på servern.

273
00:11:44,290 --> 00:11:46,710
Vi ville ge dig en
platshållare för ditt användarnamn

274
00:11:46,710 --> 00:11:48,210
och en platshållare för ditt lösenord.

275
00:11:48,210 --> 00:11:49,410
Om du inte ser
detta ännu, inte oroa dig.

276
00:11:49,410 --> 00:11:51,340
Mer om detta i pset sju
[? spec. ?] Och då,

277
00:11:51,340 --> 00:11:53,173
självklart vill vi att du
att fylla i till-DOS

278
00:11:53,173 --> 00:11:55,310
eftersom när du loggar in
CS50 IDE, var och en av er

279
00:11:55,310 --> 00:11:57,630
har ditt eget användarnamn och lösenord.

280
00:11:57,630 --> 00:12:00,910
>> Så vi kunde har använt ett halvt dussin
eller flera olika filformat.

281
00:12:00,910 --> 00:12:02,940
Vi kunde ha använt en .txt-fil.

282
00:12:02,940 --> 00:12:04,570
Vi kunde använt en CSV-fil.

283
00:12:04,570 --> 00:12:06,745
Vi kunde ha använt en
INI-fil, en XML-fil,

284
00:12:06,745 --> 00:12:09,370
en hel massa fler förkortningar som
du kanske aldrig har hört.

285
00:12:09,370 --> 00:12:11,244
Det är typ av godtycklig
Vid slutet av dagen.

286
00:12:11,244 --> 00:12:16,030
Men super populär i dessa dagar är en text
format som kallas JSON-- JavaScript Object

287
00:12:16,030 --> 00:12:18,460
Notation-- som ser ut så här.

288
00:12:18,460 --> 00:12:20,890
Det är lite kryptiskt,
men märker mönstren.

289
00:12:20,890 --> 00:12:24,180
Du börjar med en öppen lockigt
stag, och du sluta med samma.

290
00:12:24,180 --> 00:12:26,550
Inuti det är något.

291
00:12:26,550 --> 00:12:27,920
Det är en nyckel-värde-par.

292
00:12:27,920 --> 00:12:30,580
Så det här är ett objekt som jag
tittar på på skärmen här

293
00:12:30,580 --> 00:12:33,690
som har en nyckel, vilken har ett värde.

294
00:12:33,690 --> 00:12:37,610
Och bara dra slutsatsen baseras på
tidigare mönster, vad är nyckeln här?

295
00:12:37,610 --> 00:12:39,790
Databas, sak att
vänster i tjocktarmen.

296
00:12:39,790 --> 00:12:43,500
>> Nu händer värdet vara
en flera rader denna gång.

297
00:12:43,500 --> 00:12:46,760
Men värdet börjar med en lockig
stag och slutar med en lockig stag.

298
00:12:46,760 --> 00:12:49,480
Så vad skulle du föreslå är
typ av värdet av databasen?

299
00:12:49,480 --> 00:12:52,160

300
00:12:52,160 --> 00:12:54,670
En ordbok eller bara mer
fattat, ett objekt.

301
00:12:54,670 --> 00:12:55,170
Höger?

302
00:12:55,170 --> 00:13:00,010
Detta är lite av en datastruktur som
kan använda andra strukturer inom sig.

303
00:13:00,010 --> 00:13:02,750
Så om allt det här vi är
ringer en object-- och ett objekt

304
00:13:02,750 --> 00:13:07,101
är bara en massa nyckel värde pairs-- den
värdet av själva databasen är ett objekt.

305
00:13:07,101 --> 00:13:10,350
Värdet av databasen har en hel drös
av nyckelparen värde, av vilka den första

306
00:13:10,350 --> 00:13:13,130
är värd, sedan namn, sedan
användarnamn, då lösenord,

307
00:13:13,130 --> 00:13:17,550
var och en av vars värderingar, under tiden, är det
bara en tråkig strängen skrivas inom citationstecken.

308
00:13:17,550 --> 00:13:19,770
>> Så även om det inte är
Super Clear ännu,

309
00:13:19,770 --> 00:13:22,740
vet att detta är bara en
standard, ganska tråkigt sätt

310
00:13:22,740 --> 00:13:25,190
att lagra data i ett standardformat.

311
00:13:25,190 --> 00:13:27,700
Men de vanligaste misstagen du
kan göra, även i pset sju,

312
00:13:27,700 --> 00:13:32,120
är lite dumma saker, som om du
oavsiktligt utelämna komma dit.

313
00:13:32,120 --> 00:13:34,900
Det kommer att resultera i filen
inte nödvändigtvis vara läsbar.

314
00:13:34,900 --> 00:13:38,191
Om du av misstag hoppa över saker som
citationstecken, det kommer inte att vara läsbar.

315
00:13:38,191 --> 00:13:41,654
Så det är en ganska nitpicky filformat
men det är ett som är super vanligt.

316
00:13:41,654 --> 00:13:44,820
Och vi råkar använda det, även om
du inte använder någon JavaScript annars

317
00:13:44,820 --> 00:13:46,330
i pset sju.

318
00:13:46,330 --> 00:13:46,860
>> Okej.

319
00:13:46,860 --> 00:13:48,110
Så kom ihåg den här bilden.

320
00:13:48,110 --> 00:13:51,657
Vi pratade om, i HTML, som
koden kan se ut så här.

321
00:13:51,657 --> 00:13:54,740
Detta är Hypertext Markup Language
[OHÖRBAR] för bara "hello, world."

322
00:13:54,740 --> 00:13:57,570
Men sedan vi föreslagit en
tag sedan att om det hjälper,

323
00:13:57,570 --> 00:14:00,210
kanske du vill börja tänka
om detta redan som ett träd.

324
00:14:00,210 --> 00:14:03,730
I själva verket, fördjupningen som vi
Använd bara för läsbarhet skull

325
00:14:03,730 --> 00:14:05,610
eller för stil skull på
vänster kan typ av

326
00:14:05,610 --> 00:14:10,040
översättas till detta träd, där du
har några speciella rotnoden att vi ska

327
00:14:10,040 --> 00:14:16,860
allmänt kallad dokument, under vilken
är roten HTML element eller tagg, HTML,

328
00:14:16,860 --> 00:14:19,980
som då har två
barn, huvud och kropp.

329
00:14:19,980 --> 00:14:21,750
>> Och sedan i sin tur, har huvudet en titel.

330
00:14:21,750 --> 00:14:23,440
Och titel har ett textvärde.

331
00:14:23,440 --> 00:14:26,130
Och kroppen har på liknande sätt ett textvärde.

332
00:14:26,130 --> 00:14:29,220
Så om du är bekväm tale
att ja, kan du ta den här HTML

333
00:14:29,220 --> 00:14:32,080
och rita en bild som
detta, den högra sidan

334
00:14:32,080 --> 00:14:35,910
är en trevlig mental modell för nu
att vi har JavaScript, en programmerings

335
00:14:35,910 --> 00:14:39,960
språk som webbläsare kan
verkställa och tolka för dig,

336
00:14:39,960 --> 00:14:42,690
det visar sig att det
vi håller på att göra i kod

337
00:14:42,690 --> 00:14:45,320
är att börja manipulera denna
trädstruktur i minnet.

338
00:14:45,320 --> 00:14:47,070
Vi behöver inte bygga
trädet i minnet.

339
00:14:47,070 --> 00:14:49,880
Vi behöver inte göra sorts
pset-five-stil datastruktur

340
00:14:49,880 --> 00:14:50,650
komplexitet.

341
00:14:50,650 --> 00:14:54,610
Webbläsaren, snyggt nog, på
tolka HTML toppen till botten,

342
00:14:54,610 --> 00:14:58,600
vänster eller höger, bokstavligen gå till
lämna oss motsvarande en pekare

343
00:14:58,600 --> 00:15:00,840
till att hela trädet gratis.

344
00:15:00,840 --> 00:15:02,150
Det gör allt det hårda arbetet.

345
00:15:02,150 --> 00:15:05,520
Det är vad Mozilla och Apple
och andra har gjort för oss.

346
00:15:05,520 --> 00:15:09,400
>> Och med JavaScript ska vi
kunna styra och förändra och göra

347
00:15:09,400 --> 00:15:12,910
intressanta saker till
trädet, annars känd

348
00:15:12,910 --> 00:15:15,880
som ett DOM eller Document Object Model.

349
00:15:15,880 --> 00:15:17,110
Vilka saker?

350
00:15:17,110 --> 00:15:19,030
Tja, visar det sig att
i JavaScript, det finns

351
00:15:19,030 --> 00:15:22,800
denna lista av
händelser som kan äga rum.

352
00:15:22,800 --> 00:15:26,330
Och vi har inte riktigt använt den
ord sedan vecka noll och pset

353
00:15:26,330 --> 00:15:28,240
noll när vi pratade om Scratch.

354
00:15:28,240 --> 00:15:31,390
De flesta av er förmodligen inte använder
en händelse i ditt Scratch projektet.

355
00:15:31,390 --> 00:15:33,850
Men du kanske kommer ihåg
den enkla Marco Polo

356
00:15:33,850 --> 00:15:36,760
exempel, där vi hade två
sprites, varav sade Marco.

357
00:15:36,760 --> 00:15:40,180
Den andra av dem då, vid lyssnande
och höra så fall, sade Polo.

358
00:15:40,180 --> 00:15:42,080
Om inte, är du välkommen att
ser tillbaka så långt tillbaka.

359
00:15:42,080 --> 00:15:44,450
>> Men det är bara att
säger, och du kan typ av

360
00:15:44,450 --> 00:15:47,730
sluta sig namnen på dessa
saker, JavaScript, visar det sig,

361
00:15:47,730 --> 00:15:53,200
kommer att ge oss ett sätt att lyssna
för mus går ner eller mus går upp

362
00:15:53,200 --> 00:15:57,920
eller nyckel går ner eller nyckel
går upp eller onSubmit onselect

363
00:15:57,920 --> 00:15:59,740
eller onresizing något.

364
00:15:59,740 --> 00:16:03,060
Med andra ord, någon fysisk handling
att en människa kan ta med en webbläsare

365
00:16:03,060 --> 00:16:08,210
att du gör varje dag, kan du skriva
kod för det lyssnar efter dessa händelser

366
00:16:08,210 --> 00:16:10,220
och sedan gör något lämpligt.

367
00:16:10,220 --> 00:16:14,130
>> Till exempel, om du använder Google Maps,
vad händer om du klickar på och flytta

368
00:16:14,130 --> 00:16:16,250
musen, typiskt?

369
00:16:16,250 --> 00:16:17,758
Om du klickar och drar?

370
00:16:17,758 --> 00:16:18,258
Yeah?

371
00:16:18,258 --> 00:16:21,701

372
00:16:21,701 --> 00:16:22,200
Exakt.

373
00:16:22,200 --> 00:16:23,159
Kartan börjar röra sig.

374
00:16:23,159 --> 00:16:25,616
Så du kan sorts se vad som är
hit, vad är borta.

375
00:16:25,616 --> 00:16:27,130
Och hur Google genomföra det?

376
00:16:27,130 --> 00:16:29,421
Tja, förmodligen, de är
med hjälp av ett par av dessa fall

377
00:16:29,421 --> 00:16:31,720
lyssnare, en som
säger, lyssna efter på mus

378
00:16:31,720 --> 00:16:35,410
down-- så när användaren fysiskt
skjuter sin styrplattan eller dennes mus

379
00:16:35,410 --> 00:16:36,010
ner.

380
00:16:36,010 --> 00:16:38,350
Och då vi letar efter
något liknande rörelse

381
00:16:38,350 --> 00:16:41,145
eller någon annan händelse som
ger oss möjlighet att fånga upp drag.

382
00:16:41,145 --> 00:16:45,910
Och i själva verket är att dra på samma sätt i detta
dot dot dot lista över möjliga alternativ.

383
00:16:45,910 --> 00:16:49,140
>> Så det här kommer att bli ett kraftfullt
sätt att börja reagera för användaren

384
00:16:49,140 --> 00:16:52,824
redan innan han eller hon faktiskt klickar
något uttryck liknande klicka.

385
00:16:52,824 --> 00:16:55,240
Men vi kommer att införa
ett par ämnen att komma dit.

386
00:16:55,240 --> 00:16:58,570
Men först, låt oss övergång
till viss faktiska koden.

387
00:16:58,570 --> 00:17:01,450
Så jag kommer att gå
framåt och öppna upp dom-0,

388
00:17:01,450 --> 00:17:05,869
vilket är ett mycket enkelt exempel
här att om jag zooma in bara

389
00:17:05,869 --> 00:17:08,500
har denna ingång här för mig.

390
00:17:08,500 --> 00:17:12,410
Och jag kommer att gå vidare och skriva in
"David" för mitt namn och klicka på Skicka.

391
00:17:12,410 --> 00:17:17,940
>> Och sedan, om än sorts billigt, jag
har denna prompt som dyker upp som säger,

392
00:17:17,940 --> 00:17:19,244
"Hej, David!"

393
00:17:19,244 --> 00:17:21,740
Så det här är en typ av
som vår "hello, world"

394
00:17:21,740 --> 00:17:25,150
att vi gjorde en stund tillbaka i C och
även i PHP eftersom jag har dynamiskt

395
00:17:25,150 --> 00:17:26,310
matas mitt namn.

396
00:17:26,310 --> 00:17:28,230
Jag kan göra någon annans namn här.

397
00:17:28,230 --> 00:17:31,240
Jag kunde helt enkelt ändra detta till
liknande, Hannah, klicka på Skicka.

398
00:17:31,240 --> 00:17:33,780
Och faktiskt, de små pop-up förändringar.

399
00:17:33,780 --> 00:17:36,650
>> Nu, pop-ups är en av de
mest missbrukade särdrag hos banan.

400
00:17:36,650 --> 00:17:38,520
Och faktiskt, igen
dagen popup-blockerare

401
00:17:38,520 --> 00:17:40,820
kom på modet eftersom du
skulle gå till vissa website--

402
00:17:40,820 --> 00:17:43,604
kanske en tvivelaktig plats--
som skulle då plötsligt

403
00:17:43,604 --> 00:17:46,020
börja peppe skärmen
med en hel massa popup-fönster.

404
00:17:46,020 --> 00:17:49,700
Och så denna förmåga att dyka upp
fönster i framför användaren

405
00:17:49,700 --> 00:17:52,372
har inte varit särskilt
väl emot av mänskligheten.

406
00:17:52,372 --> 00:17:54,080
Så det är därför du ser
detta hindra sak,

407
00:17:54,080 --> 00:17:55,706
som bara gör det hela fula.

408
00:17:55,706 --> 00:17:57,996
Så vi kommer att behöva en
bättre sätt att uppmana användaren.

409
00:17:57,996 --> 00:17:59,350
Men för tillfället verkar det som att arbeta.

410
00:17:59,350 --> 00:18:03,320
Så bara intuitivt, vad
verkar vara fallet här?

411
00:18:03,320 --> 00:18:07,870
Jag går vidare och klicka på Skicka, och
då något händer, tydligt.

412
00:18:07,870 --> 00:18:12,870
Men vad som inte händer som skedde
förra veckan som helst jag klickade på Skicka?

413
00:18:12,870 --> 00:18:15,940
Vad hände inte på skärmen?

414
00:18:15,940 --> 00:18:17,170
Förlåt?

415
00:18:17,170 --> 00:18:18,010
Ladda.

416
00:18:18,010 --> 00:18:19,720
Webbadressen förändrades inte alls.

417
00:18:19,720 --> 00:18:22,250
Jag sade att detta var dom-0,
och jag är fortfarande på dom-0.

418
00:18:22,250 --> 00:18:26,890
Normalt skulle vi få förändrats till någon annan
URL, liksom register.php eller liknande.

419
00:18:26,890 --> 00:18:29,560
>> Men även när jag avfärda
denna sak genom att klicka på OK,

420
00:18:29,560 --> 00:18:32,310
märker att webbadressen
förblir helt lägga.

421
00:18:32,310 --> 00:18:35,350
Och, faktiskt, om jag är lite
skeptisk, låt mig att öppna upp Chrome.

422
00:18:35,350 --> 00:18:36,860
Låt mig att öppna upp på fliken Nätverk.

423
00:18:36,860 --> 00:18:38,360
Och märker att det är tomt just nu.

424
00:18:38,360 --> 00:18:40,700
Låt mig gå vidare och skicka Maria.

425
00:18:40,700 --> 00:18:42,810
Det finns ingen nätverkstrafik som helst.

426
00:18:42,810 --> 00:18:44,320
Så det finns ingen HTTP.

427
00:18:44,320 --> 00:18:47,620
>> Så ja, om jag tittar på källkoden
för this-- låt mig stäng fönstret

428
00:18:47,620 --> 00:18:49,480
och gå till Visa källa.

429
00:18:49,480 --> 00:18:50,400
Intressant.

430
00:18:50,400 --> 00:18:53,520
Det ser ut som om det finns några
nya tillägg, bland dem manus.

431
00:18:53,520 --> 00:18:57,490
Så låt oss ta en titt i CS50
IDE exakt vad jag skickas till användaren.

432
00:18:57,490 --> 00:19:00,690
>> Så här är-- låt oss
fokusera på enbart HTML.

433
00:19:00,690 --> 00:19:03,500
Här är den nedre halvan av dom-0.html.

434
00:19:03,500 --> 00:19:07,830
Och märker att det har fått en titel,
ett huvud tag, en body-taggen, en form tagg.

435
00:19:07,830 --> 00:19:11,257
Men vad hoppar ut till dig som
annorlunda, speciellt om du har aldrig

436
00:19:11,257 --> 00:19:12,590
skrivit själv någon JavaScript.

437
00:19:12,590 --> 00:19:14,920
Låt mig rulla lite
till höger här.

438
00:19:14,920 --> 00:19:18,330
Jag har en ingång,
en annan ingång för skicka.

439
00:19:18,330 --> 00:19:21,410
Jag har ett ID, som är typ av ny.

440
00:19:21,410 --> 00:19:22,790
Men vi såg detta med CSS.

441
00:19:22,790 --> 00:19:24,480
Vad är definitivt nytt?

442
00:19:24,480 --> 00:19:24,980
Yeah?

443
00:19:24,980 --> 00:19:30,580

444
00:19:30,580 --> 00:19:32,140
Fin.

445
00:19:32,140 --> 00:19:32,760
>> Okej.

446
00:19:32,760 --> 00:19:35,630
Så där det står onSubmit,
märker vad som verkar följa.

447
00:19:35,630 --> 00:19:38,740
Detta är ett attribut
i HTML-nomenklaturen.

448
00:19:38,740 --> 00:19:40,944
Dess värde är noterade sträng här.

449
00:19:40,944 --> 00:19:42,860
Och detta ser lite
konstigt vid första anblicken.

450
00:19:42,860 --> 00:19:44,050
Det är inte HTML.

451
00:19:44,050 --> 00:19:45,240
Det är inte CSS.

452
00:19:45,240 --> 00:19:47,580
Detta är, som ni kan gissa, JavaScript.

453
00:19:47,580 --> 00:19:51,850
Så det verkar som inbyggd i detta
webbsida är en funktion som kallas hälsar.

454
00:19:51,850 --> 00:19:54,250
Och jag dra slutsatsen att just
eftersom det är ett ord, hälsar.

455
00:19:54,250 --> 00:19:55,880
Det har fått en öppen Paren,
nära Paren, semikolon.

456
00:19:55,880 --> 00:19:58,095
Ser ut som en C-funktion,
ser ut som en PHP-funktionen.

457
00:19:58,095 --> 00:20:00,370
>> Och faktiskt, det kommer att
vara en JavaScript-funktion.

458
00:20:00,370 --> 00:20:01,440
Då jag återvänder falskt.

459
00:20:01,440 --> 00:20:03,440
Vi ska återkomma till
som på bara ett ögonblick.

460
00:20:03,440 --> 00:20:05,320
Men var är den här funktionen definieras?

461
00:20:05,320 --> 00:20:07,950
Bra låt mig rulla uppåt
till början av filen.

462
00:20:07,950 --> 00:20:11,710
Och även om det är en lång rad,
Det är relativt enkelt.

463
00:20:11,710 --> 00:20:15,000
Låt mig zooma ut här och
fokusera på dessa fyra linjer.

464
00:20:15,000 --> 00:20:17,137
>> Så i JavaScript, bara
som PHP, du bara

465
00:20:17,137 --> 00:20:19,720
säg, bokstavligen, ordet "funktionen"
namnet på funktionen,

466
00:20:19,720 --> 00:20:22,700
och sedan parenteser med någon
arguments-- inga argument i detta fall.

467
00:20:22,700 --> 00:20:25,290
Och det finns ingen returtyp
i JavaScript, precis som PHP.

468
00:20:25,290 --> 00:20:29,470
Så det är en lite lösare än C.
Öppna klammerparentes, nära klammerparentes.

469
00:20:29,470 --> 00:20:33,270
Inbyggt i JavaScript är ett function--
inte en rekommenderad function--

470
00:20:33,270 --> 00:20:35,730
men en funktion som kallas alert
vars enda syfte i livet

471
00:20:35,730 --> 00:20:38,620
är att dra upp det ganska ful
be att vi såg för en stund sedan.

472
00:20:38,620 --> 00:20:40,950
>> Nu är lite av en munsbit.

473
00:20:40,950 --> 00:20:42,560
Vad händer här?

474
00:20:42,560 --> 00:20:45,840
Så låt oss börja
markera allt här.

475
00:20:45,840 --> 00:20:48,540
Det är samma argument för att varna.

476
00:20:48,540 --> 00:20:49,530
Och vad är det som händer?

477
00:20:49,530 --> 00:20:51,200
Detta ser ut precis som en sträng.

478
00:20:51,200 --> 00:20:59,180
Och det visar sig, till skillnad från PHP och till skillnad från
C, det spelar ingen roll i JavaScript

479
00:20:59,180 --> 00:21:01,090
om du apostrof eller dubbla citattecken.

480
00:21:01,090 --> 00:21:02,060
De kommer att vara likvärdiga.

481
00:21:02,060 --> 00:21:03,769
Och ärligt talat, det är bara
populär i dessa dagar

482
00:21:03,769 --> 00:21:06,726
för JavaScript programmerare alltid
Använd apostrof av någon anledning.

483
00:21:06,726 --> 00:21:07,840
Det är just den sak att göra.

484
00:21:07,840 --> 00:21:09,710
Men vi skulle kunna använda citationstecken, liksom.

485
00:21:09,710 --> 00:21:11,540
>> Så plus är en ny karaktär.

486
00:21:11,540 --> 00:21:14,512
Men de av er som har gjort
det här förut, vad betyder plus detta?

487
00:21:14,512 --> 00:21:16,440
Yeah.

488
00:21:16,440 --> 00:21:17,120
Concatenate.

489
00:21:17,120 --> 00:21:18,570
Så vi såg detta i PHP.

490
00:21:18,570 --> 00:21:20,315
Det finns bara pricken
operatör i PHP som

491
00:21:20,315 --> 00:21:22,000
kommer sammanfoga två strängar tillsammans.

492
00:21:22,000 --> 00:21:24,000
C var en smärta i nacken för att göra detta.

493
00:21:24,000 --> 00:21:27,310
Minns från pset sex, som var
en särskild smärta i nacken,

494
00:21:27,310 --> 00:21:29,470
du skulle behöva använda
något liknande strcat

495
00:21:29,470 --> 00:21:31,660
efter allokering av minne
på stacken eller högen.

496
00:21:31,660 --> 00:21:34,243
Du var tvungen att hoppa genom hoops
bara för att sammanfoga två strängar.

497
00:21:34,243 --> 00:21:36,040
I JavaScript, det är super enkelt.

498
00:21:36,040 --> 00:21:38,030
Använd bara plus operatören mellan dem.

499
00:21:38,030 --> 00:21:41,420
>> Så den komplexa utseende
sak verkar vara här

500
00:21:41,420 --> 00:21:43,490
eftersom i slutet av
Hela denna sträng, jag bara

501
00:21:43,490 --> 00:21:45,797
concatenate på ett utropstecken.

502
00:21:45,797 --> 00:21:48,380
Så om det var poppar upp var
"Hej, David", "Hej, Hannah,"

503
00:21:48,380 --> 00:21:52,740
"Hej, Maria," och så vidare, klart
som mellan sak mellan de två

504
00:21:52,740 --> 00:21:55,215
plus måste ge mig tillgång till vad?

505
00:21:55,215 --> 00:21:58,855

506
00:21:58,855 --> 00:22:01,991
Vad finns där säkert?

507
00:22:01,991 --> 00:22:02,490
Yeah.

508
00:22:02,490 --> 00:22:05,090
Så jag ska låtsas här
besvara deras namn, eller hur?

509
00:22:05,090 --> 00:22:10,380
Så deras namn dök upp i finalen
resultat. Så vad betyder det?

510
00:22:10,380 --> 00:22:15,080
Tja, föreslog jag tidigare i det
bild som den så kallade DOM

511
00:22:15,080 --> 00:22:18,580
har denna speciella rotelement
långt uppe kallas dokument.

512
00:22:18,580 --> 00:22:21,660
Och nu visar det sig, det kommer
utgöra en särskild global variabel

513
00:22:21,660 --> 00:22:25,250
i JavaScript, inbyggd i vilken är en
massa användbara funktioner.

514
00:22:25,250 --> 00:22:31,770
Bland de användbara funktioner är
förmåga att få på någon ättling nod.

515
00:22:31,770 --> 00:22:37,760
Dessa kvadrater eller rektanglar eller ellipser
är bara noder i ett träd, så att säga.

516
00:22:37,760 --> 00:22:41,850
>> Så visar det sig att byggas in
JavaScript dokumentobjekt

517
00:22:41,850 --> 00:22:47,300
är en funktion, annars känd som en
metod, som kallas getElementById.

518
00:22:47,300 --> 00:22:50,410
Syntaxen för att ringa
en funktion i JavaScript

519
00:22:50,410 --> 00:22:55,220
som är inne i ett objekt eller en
variabel är bara med punktnotation.

520
00:22:55,220 --> 00:22:57,950
Och vi såg detta i C
vad struct syntax.

521
00:22:57,950 --> 00:23:03,530
Du ser detta i pset sju, typ av,
slags, när du ser CS50 :: fråga.

522
00:23:03,530 --> 00:23:08,070
Kolon kolon i PHP är en annan
sätt att anropa en funktion som är

523
00:23:08,070 --> 00:23:09,260
insidan av något föremål.

524
00:23:09,260 --> 00:23:11,960
>> Men nu i JavaScript,
det är bara en prick.

525
00:23:11,960 --> 00:23:14,170
Och så den här funktionen,
fint nog, typ av

526
00:23:14,170 --> 00:23:16,810
säger vad det does-- få inslag av ID.

527
00:23:16,810 --> 00:23:20,280
Ett element är bara ett annat namn
för en tagg eller nod i DOM.

528
00:23:20,280 --> 00:23:26,900
Och så får del av ID "namn"
innebär this-- här är min HTML.

529
00:23:26,900 --> 00:23:31,910
Och baserat på denna HTML, vad
nod eller vilken HTML-tagg är jag

530
00:23:31,910 --> 00:23:35,097
kommer att programmatiskt lämnas
genom att ringa document.getElementById?

531
00:23:35,097 --> 00:23:37,650

532
00:23:37,650 --> 00:23:38,500
>> Ja, exakt.

533
00:23:38,500 --> 00:23:42,670
Jag kommer att få input
elementet finns vars ID är "namn."

534
00:23:42,670 --> 00:23:45,140
Så specifikt, kan du
tänka på den här funktionen,

535
00:23:45,140 --> 00:23:49,560
getElementById, som ett sätt att ge
tillbaka en pekare till den specifika nod

536
00:23:49,560 --> 00:23:50,060
i trädet.

537
00:23:50,060 --> 00:23:51,980
Vi har inte dragit denna
träd, men det är ett sätt

538
00:23:51,980 --> 00:23:54,900
för att få tillgång till den
rektangel eller att rektangel

539
00:23:54,900 --> 00:23:58,090
genom unikt identifierar den via sin ID.

540
00:23:58,090 --> 00:23:59,760
>> Nu, varför är detta bra?

541
00:23:59,760 --> 00:24:01,510
Tja, visar det sig
att när du har fått

542
00:24:01,510 --> 00:24:07,220
denna nod, som rektangel från
bild, noden inne i det,

543
00:24:07,220 --> 00:24:10,660
i sin tur, har en hel del
properties-- par nyckel-värde

544
00:24:10,660 --> 00:24:13,480
eller data, ett av vilka kallas värde.

545
00:24:13,480 --> 00:24:16,500
Så bokstavligt, det är lite av en
munsbit för att förklara det hela.

546
00:24:16,500 --> 00:24:19,370
Men i slutet av dagen,
allt detta gör är att ge dig

547
00:24:19,370 --> 00:24:23,070
en sträng som användaren har skrivit in
i detta hierarkiskt sätt.

548
00:24:23,070 --> 00:24:24,820
Men jag gillar inte en
par av dessa saker.

549
00:24:24,820 --> 00:24:27,590
Eller snarare, det finns en viss nyfikenhet fortfarande.

550
00:24:27,590 --> 00:24:28,870
Allt detta verkade fungera.

551
00:24:28,870 --> 00:24:33,420
Varför tror du att jag återvände
false efter ringer hälsar?

552
00:24:33,420 --> 00:24:35,910
Detta ser lite ful, att
Jag har två uttalanden där

553
00:24:35,910 --> 00:24:38,730
separerade med semikolon.

554
00:24:38,730 --> 00:24:39,310
Ta en gissning.

555
00:24:39,310 --> 00:24:44,390
Om jag bort returnera false, vad
kan hända, bara instinktivt?

556
00:24:44,390 --> 00:24:46,990

557
00:24:46,990 --> 00:24:49,460
Tyvärr, säger det igen?

558
00:24:49,460 --> 00:24:50,530
>> Öppna ett gäng Windows.

559
00:24:50,530 --> 00:24:52,780
Så potentiellt kanske något
sånt skulle hända.

560
00:24:52,780 --> 00:24:54,422
Vad annars?

561
00:24:54,422 --> 00:24:55,630
Kan lämna in en ansökan där?

562
00:24:55,630 --> 00:24:59,109

563
00:24:59,109 --> 00:25:00,510
Till samma sida.

564
00:25:00,510 --> 00:25:03,110
Så i själva verket är att det
närmare svara här,

565
00:25:03,110 --> 00:25:05,890
även om, till skillnad från
i det förflutna, jag har inte

566
00:25:05,890 --> 00:25:09,300
specificerad åtgärds attribut,
som normalt vi måste göra.

567
00:25:09,300 --> 00:25:11,780
Det visade sig att det finns en standard.
Om du inte anger åtgärder,

568
00:25:11,780 --> 00:25:15,370
Det är som att säga citat, unquote
eller namnet på själva filen,

569
00:25:15,370 --> 00:25:17,850
som i detta fall skulle
vara som dom-0.html.

570
00:25:17,850 --> 00:25:20,420
Det är bara typ av slutsatsen,
eller snarare underförstådda.

571
00:25:20,420 --> 00:25:22,420
>> Och så om jag inte gör det, låt oss märka.

572
00:25:22,420 --> 00:25:23,230
Låt mig spara denna.

573
00:25:23,230 --> 00:25:25,270
Och jag har tagit bort return false.

574
00:25:25,270 --> 00:25:27,759
Låt mig gå tillbaka till
exempel och kraft i det igen.

575
00:25:27,759 --> 00:25:30,800
Och du kanske har sett mig föreslå
detta på CS50 Diskutera ett gäng gånger.

576
00:25:30,800 --> 00:25:34,560
Om något någonsin agerar funky och
webbläsare är inte beter sig som du förväntar dig,

577
00:25:34,560 --> 00:25:37,410
Ofta du vill hålla
Skift och sedan klicka på Uppdatera.

578
00:25:37,410 --> 00:25:41,480
Det kommer att tvinga alla filer att ladda
och inte använda webbläsarens lokal cache

579
00:25:41,480 --> 00:25:47,032
eller kopiera så att nu, låt mig gå vidare och
öppna upp min inspektör, på fliken Nätverk.

580
00:25:47,032 --> 00:25:48,740
Jag kommer att klicka
Bevara Logga eftersom jag

581
00:25:48,740 --> 00:25:51,660
inte vill att det ska ta bort raderna
när jag får forslas bort på annat håll.

582
00:25:51,660 --> 00:25:54,650
>> Låt mig gå vidare här och
typ i Andi, klicka på Skicka.

583
00:25:54,650 --> 00:25:55,150
Okej.

584
00:25:55,150 --> 00:25:56,480
Det verkar som förväntat.

585
00:25:56,480 --> 00:25:57,440
Det säger "Hej, Andi."

586
00:25:57,440 --> 00:25:59,420
Låt mig klicka på OK.

587
00:25:59,420 --> 00:26:00,610
Intressant.

588
00:26:00,610 --> 00:26:05,100
Lägg märke till att sidan ändras,
om än till den ursprungliga sidan.

589
00:26:05,100 --> 00:26:06,770
Lägg märke till URL typ av förändrad.

590
00:26:06,770 --> 00:26:09,430
Den tillade ett frågetecken,
som vanligtvis är en indikator

591
00:26:09,430 --> 00:26:11,260
att vi försökte lämna något.

592
00:26:11,260 --> 00:26:13,570
Och sedan vid botten,
ännu tydligare,

593
00:26:13,570 --> 00:26:17,570
här är den verkliga HTTP-begäran,
som fick ett svar av 200 som

594
00:26:17,570 --> 00:26:18,490
förde mig tillbaka hit.

595
00:26:18,490 --> 00:26:20,250
>> Så det här är inte vad
vi vill göra, eller hur?

596
00:26:20,250 --> 00:26:22,166
För att jag inte vill
ladda om hela sidan.

597
00:26:22,166 --> 00:26:24,970
Jag ville i stället att återvända
falsk, så att kortslutning

598
00:26:24,970 --> 00:26:28,840
webbläsarens standardbeteendet, som
var, naturligtvis, för att lämna sidan.

599
00:26:28,840 --> 00:26:31,700
>> Så låt oss ta en titt på en
marginellt bättre exempel.

600
00:26:31,700 --> 00:26:33,920
Detta är dom version en.

601
00:26:33,920 --> 00:26:36,680
Och lägg märke till följande.

602
00:26:36,680 --> 00:26:39,150
Det är OK om du inte grok
alla de rader kod.

603
00:26:39,150 --> 00:26:41,750
Men vad är fundamentalt annorlunda
om detta genomförande?

604
00:26:41,750 --> 00:26:44,690
Jag ska föreskriva att det beter sig
samma, gör samma sak.

605
00:26:44,690 --> 00:26:49,320

606
00:26:49,320 --> 00:26:51,570
Vad har jag självklart gjort annorlunda?

607
00:26:51,570 --> 00:26:52,266
Yeah?

608
00:26:52,266 --> 00:26:53,182
>> PUBLIK: [OHÖRBAR].

609
00:26:53,182 --> 00:27:03,421

610
00:27:03,421 --> 00:27:04,170
DAVID MALAN: Ja.

611
00:27:04,170 --> 00:27:08,620
Så funktionen definieras differently--
med andra ord, ute ur formen,

612
00:27:08,620 --> 00:27:13,180
uppe på linjen 7-- eller
snarare, rad 8-- inte längre

613
00:27:13,180 --> 00:27:15,070
jag har onSubmit attribut.

614
00:27:15,070 --> 00:27:16,750
I föregående exempel hade jag redan.

615
00:27:16,750 --> 00:27:18,530
Och då jag bokstavligen skrev min kod här.

616
00:27:18,530 --> 00:27:20,210
Och då sa jag returnera false.

617
00:27:20,210 --> 00:27:22,180
Och om det inte gnugga
du på fel sätt ännu,

618
00:27:22,180 --> 00:27:26,140
Det ska börja i den mån
som, precis som i HTML,

619
00:27:26,140 --> 00:27:29,530
när vi började att blandas det
med CSS i formatattribut,

620
00:27:29,530 --> 00:27:32,890
det bara börjat få lite
stökigt eller känner sig lite fel.

621
00:27:32,890 --> 00:27:35,020
>> På samma sätt här, om
du börjar ta HTML,

622
00:27:35,020 --> 00:27:37,419
och sedan automatiskt
plopp några JavaScript-kod

623
00:27:37,419 --> 00:27:40,460
i mitten av ett noterat sträng, det är
inte kommer att vara mycket att underhålla.

624
00:27:40,460 --> 00:27:40,630
Höger?

625
00:27:40,630 --> 00:27:43,690
Det är inte ens självklart först
ort där JavaScript-kod är.

626
00:27:43,690 --> 00:27:46,590
Så det skulle vara riktigt nice
en princip om bättre design,

627
00:27:46,590 --> 00:27:50,500
Låt oss hålla vår HTML helt
skild från vår JavaScript.

628
00:27:50,500 --> 00:27:53,150
>> Så för att göra det, vad vi har
gjort här är following--

629
00:27:53,150 --> 00:27:56,790
vi helt enkelt använda HTML för endast uppmärkning.

630
00:27:56,790 --> 00:28:00,730
Och så i version ett av denna, alla
Jag har är en form med ett unikt ID.

631
00:28:00,730 --> 00:28:04,630
Och sedan ner här, jag tar fördel
av en speciell egenskap hos JavaScript

632
00:28:04,630 --> 00:28:08,480
där jag kan ha vad som är
kallas en anonym funktion.

633
00:28:08,480 --> 00:28:14,150
Så det visar sig att om jag kallar
document.getElementById av "demo"

634
00:28:14,150 --> 00:28:18,890
det är som att ge mig en pekare till
denna nod i mitt träd, formelement,

635
00:28:18,890 --> 00:28:20,100
så att säga.

636
00:28:20,100 --> 00:28:22,220
>> Nu, jag vet bara från
veta lite HTML

637
00:28:22,220 --> 00:28:26,330
nu är vi att ha läst några online-
referens, att ett formulärelement stöder

638
00:28:26,330 --> 00:28:29,950
en hel massa evenemang listeners-- i
andra ord, den lista av händelse

639
00:28:29,950 --> 00:28:31,700
lyssnare som vi såg för en stund sedan.

640
00:28:31,700 --> 00:28:35,950
Jag vet från att läsa dokumentationen
att onSubmit är en giltig händelse

641
00:28:35,950 --> 00:28:38,520
avlyssnare för en formulärelement.

642
00:28:38,520 --> 00:28:41,480
>> Så när jag vet det,
det är säkert för mig att göra

643
00:28:41,480 --> 00:28:45,390
den following-- få den noden
från trädet, formulärelement,

644
00:28:45,390 --> 00:28:48,070
och komma åt så kallade
onSubmit egenskap.

645
00:28:48,070 --> 00:28:49,880
Så punkten betyder bara
Detta är en egenskap,

646
00:28:49,880 --> 00:28:52,180
som ett särskilt värde i den.

647
00:28:52,180 --> 00:28:55,590
Och vad datatyp jag
tilldela, tydligen,

648
00:28:55,590 --> 00:28:58,900
att onSubmit, vilket är
i själva verket en variabel inuti

649
00:28:58,900 --> 00:29:01,010
av den noden i trädet?

650
00:29:01,010 --> 00:29:04,100
Det är ett område inne i den struct.

651
00:29:04,100 --> 00:29:05,810
Vad är datatypen?

652
00:29:05,810 --> 00:29:07,030
>> En funktion, ja.

653
00:29:07,030 --> 00:29:08,607
Så visar det sig att PHP har detta.

654
00:29:08,607 --> 00:29:10,440
Och även om vi
inte berätta om det,

655
00:29:10,440 --> 00:29:16,240
C har även funktionspekare, de
förmåga att passera och tilldela funktioner

656
00:29:16,240 --> 00:29:18,330
som variabler värderingar själva.

657
00:29:18,330 --> 00:29:20,280
Och vi kommer inte
att regrediera tillbaka till C.

658
00:29:20,280 --> 00:29:23,250
Men nu visar det sig att
på den högra sidan här,

659
00:29:23,250 --> 00:29:26,260
även om det ser lite
skraj, detta medel, hej webbläsare,

660
00:29:26,260 --> 00:29:27,550
ge mig en funktion.

661
00:29:27,550 --> 00:29:30,560
Jag tänker inte ens bry ge
den ett namn eftersom jag bokstavligen

662
00:29:30,560 --> 00:29:34,450
kommer att tilldela låt oss kalla det
adressen till denna funktion

663
00:29:34,450 --> 00:29:35,994
omedelbart att onSubmit.

664
00:29:35,994 --> 00:29:39,160
Med andra ord, webbläsare, behöver du inte
att veta vad den här funktionen kallas.

665
00:29:39,160 --> 00:29:41,890
Du behöver bara veta
där den är i minnet.

666
00:29:41,890 --> 00:29:44,210
Och så räcker det bara
har ett likhetstecken där

667
00:29:44,210 --> 00:29:48,240
och inte bry namnge detta, liksom
foo eller hälsar eller något annat ord.

668
00:29:48,240 --> 00:29:50,150
Och nu detta är bara en stilistisk sak.

669
00:29:50,150 --> 00:29:53,100
Jag kunde röra denna klammerparentes
på the-- sorry-- nästa rad

670
00:29:53,100 --> 00:29:54,750
som vi brukar göra CS50.

671
00:29:54,750 --> 00:29:57,550
Men i JavaScript, det är
faktiskt stilist gemensamma

672
00:29:57,550 --> 00:30:00,450
att bara hålla klammerparentes, den
först en, på den första raden.

673
00:30:00,450 --> 00:30:02,620
>> Men hädanefter, det finns
inget intressant.

674
00:30:02,620 --> 00:30:05,830
Det öppna klammerparentes bara
avgränsar början av min funktion.

675
00:30:05,830 --> 00:30:09,320
Funktionen är nu
identiska, förutom att jag har

676
00:30:09,320 --> 00:30:11,452
inkluderade returnera false
insidan av denna funktion.

677
00:30:11,452 --> 00:30:13,160
Eftersom det visar out--
och du skulle bara

678
00:30:13,160 --> 00:30:14,980
vet detta från läsning
den documentation--

679
00:30:14,980 --> 00:30:19,740
att om den funktion som du tilldelar
till onSubmit handler returnerar false,

680
00:30:19,740 --> 00:30:23,420
webbläsaren bara vet och samtycker
inte att skicka formuläret till en server.

681
00:30:23,420 --> 00:30:27,210
Om det returnerar true, kommer det fram
den till en server av skäl som vi kommer att se

682
00:30:27,210 --> 00:30:28,700
är användbara på bara ett ögonblick.

683
00:30:28,700 --> 00:30:31,000
>> Och sedan semikolon efter
den lockiga stag där bara

684
00:30:31,000 --> 00:30:32,541
betyder att jag klar att definiera funktionen.

685
00:30:32,541 --> 00:30:36,600
Du vet vad man ska kalla så snart
när du hör en inlaga.

686
00:30:36,600 --> 00:30:37,100
Okej.

687
00:30:37,100 --> 00:30:40,650
Detta är fortfarande utan tvekan slags ful.

688
00:30:40,650 --> 00:30:42,190
Så vad mer kan vi göra?

689
00:30:42,190 --> 00:30:45,000
>> Tja, visar det sig då i
version två, som är den last--

690
00:30:45,000 --> 00:30:46,780
och vi ska bara blick på detta.

691
00:30:46,780 --> 00:30:49,850
Med risk för att göra
det fulare, visar det sig

692
00:30:49,850 --> 00:30:52,160
att det finns ett bibliotek i
världen som kallas jQuery.

693
00:30:52,160 --> 00:30:54,900
Och jQuery är en super
populära JavaScript-bibliotek

694
00:30:54,900 --> 00:30:57,930
det är så populär att de flesta
någon JavaScript-- det inte

695
00:30:57,930 --> 00:31:00,540
ovanligt att människor förvirra
jQuery med JavaScript.

696
00:31:00,540 --> 00:31:01,070
Varför?

697
00:31:01,070 --> 00:31:04,990
JavaScript själv har mycket
verbose sätt att göra saker--

698
00:31:04,990 --> 00:31:07,820
document.getElementById, dadadadadada.

699
00:31:07,820 --> 00:31:10,510
Du sluta med mycket
långa rader av kod.

700
00:31:10,510 --> 00:31:15,550
>> Så en man vid namn John Resid,
som faktiskt fungerar för en start

701
00:31:15,550 --> 00:31:18,630
upp dessa dagar, kom ut
med detta bibliotek år

702
00:31:18,630 --> 00:31:22,070
sedan att många människor har bidragit
att kallas jQuery att förändringar

703
00:31:22,070 --> 00:31:23,449
syntaxen på följande sätt.

704
00:31:23,449 --> 00:31:25,740
Och bara så du har sett denna,
eftersom du kommer alltid

705
00:31:25,740 --> 00:31:28,140
se detta om att göra en
webbaserat slutprojekt,

706
00:31:28,140 --> 00:31:33,270
detta skulle vara den motsvarande sätt att
genomföra samma funktion genom att använda

707
00:31:33,270 --> 00:31:34,630
denna specialbibliotek.

708
00:31:34,630 --> 00:31:36,680
>> Nu, i stället för retas
isär i sin helhet,

709
00:31:36,680 --> 00:31:38,520
låt oss titta bara på vissa mönster.

710
00:31:38,520 --> 00:31:44,850
Denna syntax verkar ha
hur många anonyma funktioner

711
00:31:44,850 --> 00:31:49,584
eller namnlösa funktioner
eller AKA lambda funktioner?

712
00:31:49,584 --> 00:31:50,190
Två, eller hur?

713
00:31:50,190 --> 00:31:52,690
Och du vet att även om
du inte super comfy med detta,

714
00:31:52,690 --> 00:31:55,780
bara genom det faktum att det
säger function () två gånger.

715
00:31:55,780 --> 00:31:58,172
>> Och det visar sig att
vad denna kod är doing--

716
00:31:58,172 --> 00:32:01,255
och vi kommer att hänvisa till online referenser,
i slutändan, om hjälp med detta.

717
00:32:01,255 --> 00:32:04,480
Det betyder bara att när
dokumentet är färdigt,

718
00:32:04,480 --> 00:32:07,490
gå vidare och registrera
följande funktion

719
00:32:07,490 --> 00:32:12,064
som lämna hanteraren för HTML
element vars unik idé är demo.

720
00:32:12,064 --> 00:32:14,480
Och sedan, när det händer,
kalla dessa två rader kod.

721
00:32:14,480 --> 00:32:18,677
Och det är tragiskt, en mer
utförlig sätt att säga return false.

722
00:32:18,677 --> 00:32:21,510
Och vi nämnde detta bara för att
ser du koden så här på nätet.

723
00:32:21,510 --> 00:32:23,140
Och det är inget att avskräcks av.

724
00:32:23,140 --> 00:32:26,057
Men i stället, tänk på att det är
kommer att bli vanliga i JavaScript

725
00:32:26,057 --> 00:32:26,765
är detta paradigm.

726
00:32:26,765 --> 00:32:29,510
Och så det är därför vi visa det för nu.

727
00:32:29,510 --> 00:32:30,010
Okej.

728
00:32:30,010 --> 00:32:32,730
Så utan bostad för
mycket på den syntax,

729
00:32:32,730 --> 00:32:37,800
finns det finns några frågor om
dessa exempel eller idéer hittills?

730
00:32:37,800 --> 00:32:38,300
Okej.

731
00:32:38,300 --> 00:32:40,220
Så låt oss använda detta för något nyttigt.

732
00:32:40,220 --> 00:32:47,070
Att göra en webbsida som bara säger hej,
så och så är inte så intressant,

733
00:32:47,070 --> 00:32:47,830
att inte underwhelm.

734
00:32:47,830 --> 00:32:51,038
Detta kommer inte att vara vacker,
men det kommer att göra något nyttigt.

735
00:32:51,038 --> 00:32:56,350
Låt mig gå tillbaka till min katalog
här och öppna upp, säger, form 0.html.

736
00:32:56,350 --> 00:32:59,320
>> Så antar att detta är nybörjare
registrering intramural sportsida

737
00:32:59,320 --> 00:33:01,780
utan CSS eller känsla för design.

738
00:33:01,780 --> 00:33:05,404
Och jag vill gå vidare och
registrera dig här med ett lösenord.

739
00:33:05,404 --> 00:33:08,320
Och jag kommer att gå med på villkoren
och villkor och klicka på Registrera.

740
00:33:08,320 --> 00:33:11,700
Och nu webbplatsen säger, "Du är
registrerad! (Tja, inte riktigt.) "

741
00:33:11,700 --> 00:33:15,070
Det verkar som om det fungerade, men
Låt mig gå vidare och tvinga reload.

742
00:33:15,070 --> 00:33:18,720
>> Och låt mig säga, nej, det gör du inte
behöver min riktiga e-postadress.

743
00:33:18,720 --> 00:33:21,820
Eller kanske vi ska bara säga e-post där.

744
00:33:21,820 --> 00:33:25,080
Lösenord kommer att, liksom, 12345.

745
00:33:25,080 --> 00:33:28,810
Och sedan, bara för att jag är
en idiot, det är nu 123.456.789.

746
00:33:28,810 --> 00:33:31,150
Och jag tänker inte att kontrollera din box.

747
00:33:31,150 --> 00:33:31,850
>> Hmm.

748
00:33:31,850 --> 00:33:32,350
Okej.

749
00:33:32,350 --> 00:33:34,920
Så det finns flera möjligheter
för förbättringar här.

750
00:33:34,920 --> 00:33:39,070
Och du vet, eller kommer att se i pset
sju, som du kan skriva code--

751
00:33:39,070 --> 00:33:41,890
och du måste skriva
kod i PHP-- att försvara

752
00:33:41,890 --> 00:33:45,780
mot dessa typer av användare
fel eftersom användaren klart

753
00:33:45,780 --> 00:33:46,790
har inte samarbetat.

754
00:33:46,790 --> 00:33:49,680
Och han eller hon inte har gett dig alla
värderar du ville eller ens i formatet

755
00:33:49,680 --> 00:33:50,630
att du ville ha dem.

756
00:33:50,630 --> 00:33:53,250
Så du ser i pset sju som
Vi skulle säkert ha lite

757
00:33:53,250 --> 00:33:55,680
om villkor som säger
Om e-postadressen

758
00:33:55,680 --> 00:33:59,450
är inte en username@something.edu,
vi kunde bara

759
00:33:59,450 --> 00:34:02,575
säga förlåt och be om ursäkt till användaren
mycket, som du kan vara i pset sju.

760
00:34:02,575 --> 00:34:05,700
Eller om de inte har kontrollerat detta fält,
visar sig i PHP, kan du upptäcka det,

761
00:34:05,700 --> 00:34:06,200
också.

762
00:34:06,200 --> 00:34:09,389
Och visst, om lösenorden
matchar inte som i register.php

763
00:34:09,389 --> 00:34:11,521
för pset sju, kan du upptäcka det.

764
00:34:11,521 --> 00:34:13,770
Men det är en smärta i
hals i det nu begära de

765
00:34:13,770 --> 00:34:15,510
oss att gå hela vägen till servern.

766
00:34:15,510 --> 00:34:17,053
Användaren informeras om felet.

767
00:34:17,053 --> 00:34:19,219
Och åtminstone om du inte använder
vissa snyggare tekniker,

768
00:34:19,219 --> 00:34:20,929
Nu måste de klicka på bakåtpilen.

769
00:34:20,929 --> 00:34:23,300
Skulle det inte vara trevligt, liksom
många webbplatser idag,

770
00:34:23,300 --> 00:34:26,190
om du hade mer omedelbar
feedback, omedelbart?

771
00:34:26,190 --> 00:34:31,389
>> Med andra ord, låt mig gå till version
en, som kommer att finnas någon vackrare.

772
00:34:31,389 --> 00:34:33,469
Men det har den här funktionen.

773
00:34:33,469 --> 00:34:39,590
Malan, 12345, 123456789, inte
kommer att markera rutan, registret.

774
00:34:39,590 --> 00:34:41,330
Lösenorden matchar inte.

775
00:34:41,330 --> 00:34:44,459
Så även om detta pop-up är ugly--
Vi kan ersätta denna så småningom

776
00:34:44,459 --> 00:34:47,000
med något som Bootstrap,
som du ser i pset sju

777
00:34:47,000 --> 00:34:50,239
är en mycket populär library-- jag gjorde
detektera att lösenorden inte stämmer överens.

778
00:34:50,239 --> 00:34:50,739
Okej.

779
00:34:50,739 --> 00:34:52,530
Nåväl, låt mig fixa det som användaren.

780
00:34:52,530 --> 00:34:55,460
Låt mig gå vidare och säga 12345, 12345.

781
00:34:55,460 --> 00:34:57,780
Fortfarande inte kontrollera avtalet.

782
00:34:57,780 --> 00:35:00,210
Du måste godkänna de
villkor.

783
00:35:00,210 --> 00:35:01,760
Så varför?

784
00:35:01,760 --> 00:35:04,100
>> Om vi ​​redan har belägen
att det finns ett sätt,

785
00:35:04,100 --> 00:35:07,260
och vi har krävt att du i
pset sju för att upptäcka fel

786
00:35:07,260 --> 00:35:09,780
tillstånd som detta
serversidan, varför skulle jag

787
00:35:09,780 --> 00:35:13,940
bry också göra detta i JavaScript?

788
00:35:13,940 --> 00:35:15,850
Vad är ett argument
förmån för tillsats vad

789
00:35:15,850 --> 00:35:18,760
du är på väg att se som some--
det finns ytterligare komplexitet.

790
00:35:18,760 --> 00:35:23,610

791
00:35:23,610 --> 00:35:25,930
>> Kanske finns det ingen upp.

792
00:35:25,930 --> 00:35:26,924
Vad kan det vara?

793
00:35:26,924 --> 00:35:27,840
PUBLIK: [OHÖRBAR].

794
00:35:27,840 --> 00:35:31,132

795
00:35:31,132 --> 00:35:32,340
DAVID MALAN: Åh, intressant.

796
00:35:32,340 --> 00:35:33,530
Potentiella bedrifter.

797
00:35:33,530 --> 00:35:37,540
Så säker, om du inte hanterar
felaktiga indata från användaren så bra,

798
00:35:37,540 --> 00:35:40,170
kanske det är desto bättre om det
inte ens nå din server.

799
00:35:40,170 --> 00:35:42,160
Jag skulle driva tillbaka dit och
säga, bör du antagligen

800
00:35:42,160 --> 00:35:43,284
fixa båda dessa problem.

801
00:35:43,284 --> 00:35:44,140
Men det är rättvist.

802
00:35:44,140 --> 00:35:44,710
Vad annars?

803
00:35:44,710 --> 00:35:45,626
>> PUBLIK: [OHÖRBAR].

804
00:35:45,626 --> 00:35:47,970

805
00:35:47,970 --> 00:35:49,014
>> DAVID MALAN: Ja.

806
00:35:49,014 --> 00:35:51,680
Denna kod, som vi sagt tidigare, är
tolkas på klientsidan.

807
00:35:51,680 --> 00:35:53,846
Det bryr sig inte servern,
vilket betyder att det inte

808
00:35:53,846 --> 00:35:55,930
påverka serverns belastning eller kapacitet.

809
00:35:55,930 --> 00:35:59,840
Och nu, för lite gamla mig,
Detta har ingen betydelsefull effekt

810
00:35:59,840 --> 00:36:01,970
eftersom jag har en användare just nu.

811
00:36:01,970 --> 00:36:04,010
>> Men om du är någon
webbplats anständigt storlek,

812
00:36:04,010 --> 00:36:07,400
särskilt de största, som Facebook,
ju mer du kan hålla folk utanför

813
00:36:07,400 --> 00:36:09,927
av din server desto bättre
eftersom en server, naturligtvis,

814
00:36:09,927 --> 00:36:12,510
endast har en ändlig mängd RAM,
ett begränsat antal gigahertz,

815
00:36:12,510 --> 00:36:16,340
ett ändligt antal saker
den kan göra per tidsenhet.

816
00:36:16,340 --> 00:36:19,170
Så om det finns fler människor i
världen träffa din server,

817
00:36:19,170 --> 00:36:21,750
oavsiktligt loggning
felaktigt, lika bra om du

818
00:36:21,750 --> 00:36:23,254
kan hålla det avlastar servern.

819
00:36:23,254 --> 00:36:25,420
Plus, särskilt på en mobil
device-- om du har någonsin

820
00:36:25,420 --> 00:36:29,190
logga in my.harvard eller
Yales nätid eller liknande,

821
00:36:29,190 --> 00:36:32,330
Det är det här latensen med en hel del
webbplatser som att där det tar,

822
00:36:32,330 --> 00:36:34,110
som en jävla sekund eller två ibland.

823
00:36:34,110 --> 00:36:37,979
Och sedan, min Gud, om du skriver fel,
då måste man slå tillbaka och göra om den.

824
00:36:37,979 --> 00:36:40,520
Så det finns latens, särskilt
på långsammare nätverksanslutningar.

825
00:36:40,520 --> 00:36:43,030
Men JavaScript, eftersom
det körs på klienten

826
00:36:43,030 --> 00:36:46,720
och behöver inte gå fram och tillbaka
över en potentiellt långsam internet

827
00:36:46,720 --> 00:36:49,780
anslutning kan du få
nästan ögonblicklig respons.

828
00:36:49,780 --> 00:36:50,760
>> Så låt oss titta på det här.

829
00:36:50,760 --> 00:36:54,280
Låt mig öppna upp form 0 och
titta på HTML här.

830
00:36:54,280 --> 00:36:56,040
Och låt oss bara se vad som händer.

831
00:36:56,040 --> 00:36:59,460
Detta är en form vars
åtgärd är register.php.

832
00:36:59,460 --> 00:37:01,530
Jag bara använda får så
att jag kunde se webbadressen.

833
00:37:01,530 --> 00:37:05,030
Men för lösenord, skulle vi säkert vill
att ändra på detta för att skriva i verkligheten.

834
00:37:05,030 --> 00:37:06,910
Här är en inmatningsfält av typen text.

835
00:37:06,910 --> 00:37:09,050
Här är en annan ingång
fält av typen lösenord.

836
00:37:09,050 --> 00:37:13,150
Här är, om du aldrig har sett,
en ingång av typen kryssrutan.

837
00:37:13,150 --> 00:37:15,250
>> Men det finns ingen JavaScript
här som helst.

838
00:37:15,250 --> 00:37:18,170
Detta är bara HTML som
går till register.php.

839
00:37:18,170 --> 00:37:21,020
Men i version ett, där jag
började att få dessa pop-ups,

840
00:37:21,020 --> 00:37:23,010
låt oss se vad som faktiskt händer här.

841
00:37:23,010 --> 00:37:26,757
I version ett, vad
Jag kommer att see-- I

842
00:37:26,757 --> 00:37:29,340
trodde att jag kunde stanna tillräckligt
med tillräckligt många ord, men jag sprang ut.

843
00:37:29,340 --> 00:37:35,180

844
00:37:35,180 --> 00:37:38,590
>> I version en-- där vi går.

845
00:37:38,590 --> 00:37:43,180
I version en, märker following--
och är inte den bästa genomförande,

846
00:37:43,180 --> 00:37:44,420
men det är min första.

847
00:37:44,420 --> 00:37:47,680
Lägg märke till att under den
formulär, jag har en script-tagg.

848
00:37:47,680 --> 00:37:49,430
Och en script-tagg innebär
hey, webbläsare, här

849
00:37:49,430 --> 00:37:52,340
kommer en del kod i,
typiskt, JavaScript.

850
00:37:52,340 --> 00:37:54,420
Och nu märke till vad jag gör.

851
00:37:54,420 --> 00:37:59,070
På line-- Jag kan knappt
Läs det-- linje 32, den säger,

852
00:37:59,070 --> 00:38:01,420
var form-- så ge mig
en variabel som heter form.

853
00:38:01,420 --> 00:38:05,049
Och sedan få document.getElementId
av "registrering."

854
00:38:05,049 --> 00:38:05,590
Vad är detta?

855
00:38:05,590 --> 00:38:07,290
Nåväl, låt mig spola tillbaka upp här.

856
00:38:07,290 --> 00:38:11,510
Och varsel, ah, gav jag formulärelement
en godtycklig men beskrivande idé

857
00:38:11,510 --> 00:38:13,050
för registreringen.

858
00:38:13,050 --> 00:38:16,820
Så det här ger mig en variabel som
tillåter mig att ta den nod,

859
00:38:16,820 --> 00:38:19,580
att rektangel i trädet kallas form.

860
00:38:19,580 --> 00:38:24,460
form.onsubmit medel, hej webbläsare,
registrera en händelseavlyssnare

861
00:38:24,460 --> 00:38:25,470
i detta formulär.

862
00:38:25,470 --> 00:38:28,890
Med andra ord, när denna form är
lämnats köra följande kod.

863
00:38:28,890 --> 00:38:30,810
Det behöver inte ett namn eftersom
varför behöver du veta namnet?

864
00:38:30,810 --> 00:38:32,880
Du behöver bara veta
vad man ska köra, ergo

865
00:38:32,880 --> 00:38:35,610
det är en anonym eller lambda funktion.

866
00:38:35,610 --> 00:38:37,632
Och att funktionen är
alla dessa linjer här.

867
00:38:37,632 --> 00:38:40,840
Och nu, för att vara ärlig, även om du
kanske inte har någonsin skrivit JavaScript

868
00:38:40,840 --> 00:38:44,200
innan, det är bara C och PHP logik.

869
00:38:44,200 --> 00:38:51,720
Så om form.email.value == "" -
så om e-fältet är tomt,

870
00:38:51,720 --> 00:38:54,980
skrika på användaren med "Du får
din e-postadress. "

871
00:38:54,980 --> 00:38:58,980
Annars om form.password.value
är tom skrika åt användaren,

872
00:38:58,980 --> 00:39:00,400
"Du måste ange ditt lösenord."

873
00:39:00,400 --> 00:39:04,240
>> Mer intressant logiskt,
om form.password.value inte

874
00:39:04,240 --> 00:39:08,630
lika form.confirmation.value--
där fick bekräftelse ifrån?

875
00:39:08,630 --> 00:39:09,470
Låt mig bakåt.

876
00:39:09,470 --> 00:39:12,870
Tja, jag ringde denna ingång
fältet här lösenord.

877
00:39:12,870 --> 00:39:15,180
Och jag kallade detta en här bekräftelse.

878
00:39:15,180 --> 00:39:17,850
Jag kunde ha kallat det
lösenord två eller något annat.

879
00:39:17,850 --> 00:39:20,560
Jag är bara logiskt kontroll
att dessa två är desamma.

880
00:39:20,560 --> 00:39:25,760
Else-- det visar sig detta är Mr Boole
igen-- ett booleskt värde, kryssrutan.

881
00:39:25,760 --> 00:39:29,810
Så om jag säger, utrop point--
om inte form.agreement.checked,

882
00:39:29,810 --> 00:39:31,820
skrika på användaren också.

883
00:39:31,820 --> 00:39:34,470
>> Så här syntaxen du ser är
mycket vanliga i JavaScript,

884
00:39:34,470 --> 00:39:35,970
där du har denna avdelad.

885
00:39:35,970 --> 00:39:37,460
Du börjar med ett föremål här.

886
00:39:37,460 --> 00:39:41,430
Du dyka djupare till en till
en egenskap som lösenord.

887
00:39:41,430 --> 00:39:43,280
Och sedan får du till verkligt värde.

888
00:39:43,280 --> 00:39:45,830
Och återigen, här är ingången.

889
00:39:45,830 --> 00:39:47,310
Här är namnet lösenord.

890
00:39:47,310 --> 00:39:50,860
Och dess värde är oberoende av
människa har faktiskt skrivits in.

891
00:39:50,860 --> 00:39:53,610
>> Så i alla dessa
fall, återvände jag falskt.

892
00:39:53,610 --> 00:39:55,800
Men om inte, återvänder jag sant.

893
00:39:55,800 --> 00:39:58,030
Och så nu ser vi en
övertygande användning av när

894
00:39:58,030 --> 00:40:00,620
du skulle returnera false till
stoppa vad användarens göra

895
00:40:00,620 --> 00:40:03,200
och göra honom eller henne välja
igen eller skriv igen.

896
00:40:03,200 --> 00:40:05,870
Annars återvänder vi sant.

897
00:40:05,870 --> 00:40:08,585
>> Och låt mig presentera en
andra variant av detta bara

898
00:40:08,585 --> 00:40:13,140
att ympa en viss förståelse därav.

899
00:40:13,140 --> 00:40:16,850
Tja, i version 2 av detta form 2--
Jag gör det med en våg av en hand.

900
00:40:16,850 --> 00:40:19,920
Detta är, för alla som är nyfikna,
jQuery versionen,

901
00:40:19,920 --> 00:40:23,330
de av er som kanske vill
plaska i just den biblioteket.

902
00:40:23,330 --> 00:40:25,145
Men låt oss start-- och några frågor?

903
00:40:25,145 --> 00:40:29,230
Låt mig stanna upp stund eftersom
Det var snabbt och mycket.

904
00:40:29,230 --> 00:40:32,610
>> Men det fina är att alla
av koden är ganska mycket samma.

905
00:40:32,610 --> 00:40:33,985
Den nya saker är vad är dom?

906
00:40:33,985 --> 00:40:35,115
Vilka är dessa rektanglar?

907
00:40:35,115 --> 00:40:35,990
Vilka är dessa noder?

908
00:40:35,990 --> 00:40:37,540
Vad är en anonym funktion?

909
00:40:37,540 --> 00:40:38,830
Vad är en händelsehanterare?

910
00:40:38,830 --> 00:40:43,480
Men tack och lov, de flesta av som bara
full cirkel från, säg, vecka noll.

911
00:40:43,480 --> 00:40:43,980
Okej.

912
00:40:43,980 --> 00:40:46,070
Så något lite mer intressant?

913
00:40:46,070 --> 00:40:49,340
Jo, först och främst, låt mig gå
vidare och öppna upp Google Maps.

914
00:40:49,340 --> 00:40:53,360
Och du kommer att märka att för ett
ögonblick, på bråkdels sekund,

915
00:40:53,360 --> 00:40:55,930
märker vad som händer när
Jag klickar tillräckligt snabbt.

916
00:40:55,930 --> 00:40:59,720
Och detta sammanhang vid Harvard är så
snabbt att du inte riktigt märker det.

917
00:40:59,720 --> 00:41:04,469
Men vad gör du slags slags se
om jag klickar och drar riktigt snabbt?

918
00:41:04,469 --> 00:41:07,010
De av er att titta på nätet,
Om du sakta detta till 0,5x hastighet,

919
00:41:07,010 --> 00:41:09,640
Du kan se detta bättre.

920
00:41:09,640 --> 00:41:13,550
>> Vad som hände bara
innan jag klickade och drog?

921
00:41:13,550 --> 00:41:15,900
Låt mig försöka här-- låta mig göra
något annat, som 90210-.

922
00:41:15,900 --> 00:41:17,550
Låt oss gå långt borta.

923
00:41:17,550 --> 00:41:19,000
Det var verkligen snabb, alltför.

924
00:41:19,000 --> 00:41:22,460
Vad sägs om Disney World?

925
00:41:22,460 --> 00:41:23,190
Det går vi.

926
00:41:23,190 --> 00:41:23,690
OK.

927
00:41:23,690 --> 00:41:26,030
Vad såg du för en sekund?

928
00:41:26,030 --> 00:41:27,200
Precis, som, torg, eller hur?

929
00:41:27,200 --> 00:41:28,930
Platshållare för plattor?

930
00:41:28,930 --> 00:41:30,270
>> Tja, vad händer här?

931
00:41:30,270 --> 00:41:35,410
Google Maps är ett bra exempel på
denna teknik som kallas AJAX.

932
00:41:35,410 --> 00:41:38,510
Och det är där vi ska börja
använda JavaScript på ett särskilt

933
00:41:38,510 --> 00:41:39,277
lockande sätt.

934
00:41:39,277 --> 00:41:41,610
Tillbaka i dag, var det
denna hemsida som heter MapQuest.

935
00:41:41,610 --> 00:41:44,120
Och jag borde ha tagit en
skärmdump av detta från 1990-talet,

936
00:41:44,120 --> 00:41:45,820
där om du ville
leta upp här på kartan

937
00:41:45,820 --> 00:41:48,590
du skulle bokstavligen klicka en pil
upp på toppen som visade dig

938
00:41:48,590 --> 00:41:49,870
en annan fyrkant på kartan.

939
00:41:49,870 --> 00:41:51,790
Om du vill flytta vänster, du
klickade en pil som visade dig

940
00:41:51,790 --> 00:41:53,210
en annan fyrkant på kartan.

941
00:41:53,210 --> 00:41:54,840
Och vissa webbplatser fortfarande gör detta i dag.

942
00:41:54,840 --> 00:41:57,820
Men även MapQuest har fått
bättre, som Google Maps.

943
00:41:57,820 --> 00:42:01,880
>> Istället, vad är bättre dessa
dagar är webbplatser som använder AJAX.

944
00:42:01,880 --> 00:42:04,510
AJAX-- annars känd som
Asynchronous JavaScript and XML,

945
00:42:04,510 --> 00:42:08,370
som ligger bara ett fint sätt att säga
en teknik eller teknik som

946
00:42:08,370 --> 00:42:14,200
tillåter en webbläsare med JavaScript
att göra ytterligare HTTP-förfrågningar

947
00:42:14,200 --> 00:42:16,390
efter sidan har laddats.

948
00:42:16,390 --> 00:42:17,479
Så vad betyder det?

949
00:42:17,479 --> 00:42:19,270
Tja, skulle det vara snäll
av irriterande i Gmail

950
00:42:19,270 --> 00:42:21,103
Om varje gång du ville
att kontrollera din e-post,

951
00:42:21,103 --> 00:42:24,940
du hade bokstavligen slå Ctrl-R eller
Kommando-R eller klicka på Ladda-knappen

952
00:42:24,940 --> 00:42:26,580
och hela jäkla sidan skulle ladda om.

953
00:42:26,580 --> 00:42:26,800
Höger?

954
00:42:26,800 --> 00:42:28,460
Det skulle blinka vitt
antagligen för andra.

955
00:42:28,460 --> 00:42:30,043
Du skulle se dum förloppsindikator.

956
00:42:30,043 --> 00:42:33,170
Och bara för att se om du har ny
hela webbsidan och URL-post,

957
00:42:33,170 --> 00:42:34,580
du är på måste ladda om.

958
00:42:34,580 --> 00:42:35,960
>> Men det är inte vad som händer i Gmail.

959
00:42:35,960 --> 00:42:36,459
Höger?

960
00:42:36,459 --> 00:42:40,300
När du får ett nytt e-postmeddelande i
Gmail, vad som händer på skärmen?

961
00:42:40,300 --> 00:42:41,480
Det visar bara upp, eller hur?

962
00:42:41,480 --> 00:42:44,280
Det bara magiskt visas
som en ny rad i tabellen.

963
00:42:44,280 --> 00:42:47,030
Som faktiskt innebär en
anständig mängd komplexitet.

964
00:42:47,030 --> 00:42:51,892
I själva verket, om du tycker om det här trädet,
som trots är enkel här,

965
00:42:51,892 --> 00:42:54,100
Gmail-- och jag skulle behöva se
på koden att vara sure--

966
00:42:54,100 --> 00:42:58,710
förmodligen har en HTML-tabell eller kanske
en oordnad lista som den gör

967
00:42:58,710 --> 00:43:01,060
alla dina inkorgar e-post som.

968
00:43:01,060 --> 00:43:04,050
>> Och så om ni föreställa er detta finns
är ett träd i minnet när du är

969
00:43:04,050 --> 00:43:09,050
använder Gmail som ser typ av sorts
så här, när Google inser, ooh,

970
00:43:09,050 --> 00:43:12,770
du har en ny e-post, det gör det inte
vill bygga om hela trädet.

971
00:43:12,770 --> 00:43:16,430
Snarare vill man att hitta noden i
trädet som representerar din inkorg

972
00:43:16,430 --> 00:43:18,580
och bara sätta in en ny nod.

973
00:43:18,580 --> 00:43:24,640
>> Så mycket lik PSET fem, där du
var tvungen att sätta noder i en hashtabell,

974
00:43:24,640 --> 00:43:28,410
liknande gör Google, via
JavaScript-kod som den har skrivit,

975
00:43:28,410 --> 00:43:31,890
travers detta träd, räkna ut var
är att inkorgen delen av fönstret,

976
00:43:31,890 --> 00:43:33,440
och sedan sätta in en ny rad.

977
00:43:33,440 --> 00:43:37,460
Och en ny rad betyder bara en
eller fler nya noder i ett träd.

978
00:43:37,460 --> 00:43:41,340
>> Och så AJAX är denna teknik
som möjliggör just detta.

979
00:43:41,340 --> 00:43:44,440
När du har besökt en webbadress
men galet lång tid det är,

980
00:43:44,440 --> 00:43:46,472
och när sidan har
laddats, kan du fortfarande

981
00:43:46,472 --> 00:43:48,430
ta mer data från den
internet-- oavsett om det är

982
00:43:48,430 --> 00:43:52,460
e-post eller en platta av en map--
greppa den bakom kulisserna

983
00:43:52,460 --> 00:43:55,290
och sedan in den i sidan
så att den mänskliga egentligen inte

984
00:43:55,290 --> 00:43:56,910
måste vänta på det.

985
00:43:56,910 --> 00:43:58,980
>> Facebook Messenger fungerar på samma sätt.

986
00:43:58,980 --> 00:44:01,562
Valfritt antal andra websites--
åh, faktiskt, även detta.

987
00:44:01,562 --> 00:44:04,270
Jag menar, detta är, ärligt talat, typ av
en irriterande har dessa dagar.

988
00:44:04,270 --> 00:44:07,500
Om jag börjar söka efter cats-- detta
är lite av en hemsk användarupplevelse.

989
00:44:07,500 --> 00:44:08,990
Det bara börjar söka efter mig.

990
00:44:08,990 --> 00:44:10,050
Väl vad gör det?

991
00:44:10,050 --> 00:44:12,920
Webbadressen har verkligen inte förändrats
sedan jag började skriva.

992
00:44:12,920 --> 00:44:17,330
Men vad som händer över
wire-- OK, hmm intressant.

993
00:44:17,330 --> 00:44:20,470
Vad händer över
tråd här blir bara konstigare.

994
00:44:20,470 --> 00:44:21,090
>> OK.

995
00:44:21,090 --> 00:44:24,670
Så låt mig gå vidare och inspektera
elementet och gå till fliken Nätverk

996
00:44:24,670 --> 00:44:27,040
och försöka göra detta
teknisk och mindre om katter.

997
00:44:27,040 --> 00:44:32,595
Som jag skriver, bokstavligen, katter
och-- vad som händer

998
00:44:32,595 --> 00:44:37,710
per-- Jag tänker inte klicka på den.

999
00:44:37,710 --> 00:44:38,210
Okej.

1000
00:44:38,210 --> 00:44:44,280
Så här nere, vad som händer varje
gång jag skriver ett tecken, tydligen?

1001
00:44:44,280 --> 00:44:45,000
Liksom, låg nivå?

1002
00:44:45,000 --> 00:44:47,860
Vad händer med var och en av dem
tecken jag skriver på mitt tangentbord?

1003
00:44:47,860 --> 00:44:48,359
Yeah?

1004
00:44:48,359 --> 00:44:50,950
PUBLIK: [OHÖRBAR].

1005
00:44:50,950 --> 00:44:52,340
>> DAVID MALAN: Exakt.

1006
00:44:52,340 --> 00:44:55,600
Var och en av dessa tecken är
gå till Google, en i taget.

1007
00:44:55,600 --> 00:44:58,490
De bygger upp en sträng
på deras server som representerar

1008
00:44:58,490 --> 00:44:59,936
allt jag har skrivit i hittills.

1009
00:44:59,936 --> 00:45:01,810
Och varje gång jag skriver
en annan karaktär, de

1010
00:45:01,810 --> 00:45:04,530
använda sin hemliga sås av en
sökalgoritm och räkna ut,

1011
00:45:04,530 --> 00:45:07,370
menar han denna katt sidan
eller denna katt sida eller liknande?

1012
00:45:07,370 --> 00:45:10,620
Så i någon mening, det ger mig en
bättre upplevelse eftersom jag inte ens

1013
00:45:10,620 --> 00:45:11,860
behöver för att slutföra min tanke.

1014
00:45:11,860 --> 00:45:14,440
Och faktiskt, det är en bra
sak, automatisk komplettering i allmänhet.

1015
00:45:14,440 --> 00:45:17,690
Om deras algoritmer är bra nog
och om mina sökningar är uppenbara nog,

1016
00:45:17,690 --> 00:45:19,300
Jag behöver inte skriva in hela ord.

1017
00:45:19,300 --> 00:45:22,110
De kommer att tala om för mig vad det
är jag faktiskt söker efter.

1018
00:45:22,110 --> 00:45:25,940
Så vad Google kallar snabb
sökning bara använder AJAX,

1019
00:45:25,940 --> 00:45:30,820
med hjälp av kod som gör det möjligt för dem att begära
ytterligare innehåll via en webbläsare

1020
00:45:30,820 --> 00:45:34,026
bakom kulisserna med hjälp av detta
nytt språk, JavaScript.

1021
00:45:34,026 --> 00:45:35,400
Så vi har ett par minuter kvar.

1022
00:45:35,400 --> 00:45:37,710
Och låt mig kalla upp min kompis
Colton upp på scenen,

1023
00:45:37,710 --> 00:45:40,090
eftersom det verkade
särskilt roligt förra gången

1024
00:45:40,090 --> 00:45:42,290
att införa en teknik
att några av er

1025
00:45:42,290 --> 00:45:44,769
har uttryckt intresse
i för examensarbeten.

1026
00:45:44,769 --> 00:45:47,310
Vi trodde att det skulle vara kul att få
en volontär, men idag

1027
00:45:47,310 --> 00:45:50,074
visa ett tillägg till
detta som gör du-- yeah,

1028
00:45:50,074 --> 00:45:50,990
Jag såg denna hand först.

1029
00:45:50,990 --> 00:45:52,900
Kom upp.

1030
00:45:52,900 --> 00:45:53,560
Väldigt bra gjort.

1031
00:45:53,560 --> 00:45:55,035
Bra jobbat.

1032
00:45:55,035 --> 00:45:57,410
Jag kommer att projicera detta på
skärmen på bara ett ögonblick.

1033
00:45:57,410 --> 00:45:58,150
Vad heter du för alla?

1034
00:45:58,150 --> 00:45:59,180
>> EFA: Jag är EFA.

1035
00:45:59,180 --> 00:45:59,410
>> DAVID MALAN: Etha?

1036
00:45:59,410 --> 00:45:59,785
>> EFA: Efa.

1037
00:45:59,785 --> 00:46:00,160
>> DAVID MALAN: Efa?

1038
00:46:00,160 --> 00:46:00,730
>> EFA: Ja.

1039
00:46:00,730 --> 00:46:01,250
>> DAVID MALAN: Trevligt att se dig.

1040
00:46:01,250 --> 00:46:01,600
Okej.

1041
00:46:01,600 --> 00:46:02,590
Låt mig få detta klart.

1042
00:46:02,590 --> 00:46:04,423
Kom över till
mitten med Colton här.

1043
00:46:04,423 --> 00:46:07,050
Vad Colton har i sina händer
idag är en fjärrkontroll.

1044
00:46:07,050 --> 00:46:10,440
Så istället för att bara stå där i en
tredimensionell värld titta runt

1045
00:46:10,440 --> 00:46:14,080
som Colton gjorde, nu Efa kan
faktiskt gå runt genom att gå upp,

1046
00:46:14,080 --> 00:46:16,689
nedåt, åt vänster och höger som en
Nintendo eller Xbox-handkontrollen.

1047
00:46:16,689 --> 00:46:18,230
EFA: Jag kommer att ramla av scenen.

1048
00:46:18,230 --> 00:46:20,500
DAVID MALAN: Jag kommer
stå ungefär hit.

1049
00:46:20,500 --> 00:46:21,991
Men det finns en risk.

1050
00:46:21,991 --> 00:46:22,490
OK.

1051
00:46:22,490 --> 00:46:25,690
Så gå vidare och lägga dem på.

1052
00:46:25,690 --> 00:46:29,315
Låt mig gå vidare och
växla till skärmen här.

1053
00:46:29,315 --> 00:46:30,670
Låt mig dämpa belysningen.

1054
00:46:30,670 --> 00:46:32,780
Och Colton, låt mig
kommer stå bredvid dig.

1055
00:46:32,780 --> 00:46:35,520
>> Vill du förklara här
med mikrofonen vad vi gör?

1056
00:46:35,520 --> 00:46:36,380
Här får du.

1057
00:46:36,380 --> 00:46:37,280
>> COLTON: Visst.

1058
00:46:37,280 --> 00:46:39,980
Så just nu är vi
laddar upp Oculus,

1059
00:46:39,980 --> 00:46:43,070
Jag antar att operating-- fungerar inte
systemet, men huvudprogrammet, där

1060
00:46:43,070 --> 00:46:46,630
du kan komma åt alla spel och
appar som finns i biblioteket.

1061
00:46:46,630 --> 00:46:50,060
Så just nu, bör det stå
knacka på pekplattan för att börja.

1062
00:46:50,060 --> 00:46:53,430
Pekplatta kommer att vara på
höger sida av headsetet.

1063
00:46:53,430 --> 00:46:54,569
Så gå vidare och tap--

1064
00:46:54,569 --> 00:46:55,110
EFA: Åh, man.

1065
00:46:55,110 --> 00:46:56,443
DAVID MALAN: Ja, det du går.

1066
00:46:56,443 --> 00:47:00,340

1067
00:47:00,340 --> 00:47:02,460
Kvaliteten Efa är att se
är mycket högre kvalitet.

1068
00:47:02,460 --> 00:47:03,831
Detta är bara Wi-Fi här.

1069
00:47:03,831 --> 00:47:05,580
COLTON: Så vad du är
kommer att vilja göra

1070
00:47:05,580 --> 00:47:08,350
är att titta mot toppen
till höger på skärmen.

1071
00:47:08,350 --> 00:47:10,420
Japp, det spelet på den mycket längst upp till höger.

1072
00:47:10,420 --> 00:47:14,780
Och sedan när du väljer
det, peka på pekplattan igen.

1073
00:47:14,780 --> 00:47:17,010
Jag tror att dess Dreadhalls.

1074
00:47:17,010 --> 00:47:20,820
Och så här är A-- här, låt
mig hålla dina glasögon för dig.

1075
00:47:20,820 --> 00:47:24,420

1076
00:47:24,420 --> 00:47:25,790
>> Så jag gav honom bara en styrenhet.

1077
00:47:25,790 --> 00:47:28,886
Så nu kan han styra spelet.

1078
00:47:28,886 --> 00:47:30,510
Han kan flytta runt och sånt.

1079
00:47:30,510 --> 00:47:31,968
Så gå vidare och ser upp till toppen.

1080
00:47:31,968 --> 00:47:33,640
Du bör se New Game.

1081
00:47:33,640 --> 00:47:36,310
Så sätt igång och du kan göra det.

1082
00:47:36,310 --> 00:47:39,320
Nu ska du kunna styra
själv med den registeransvarige,

1083
00:47:39,320 --> 00:47:43,860
samt, så snart som
spelet laddar upp här.

1084
00:47:43,860 --> 00:47:46,356
Det kan vara lite skrämmande.

1085
00:47:46,356 --> 00:47:47,300
>> EFA: Nu kan du berätta för mig.

1086
00:47:47,300 --> 00:47:50,132
OK.

1087
00:47:50,132 --> 00:47:51,080
>> COLTON: Okej.

1088
00:47:51,080 --> 00:47:52,650
Så bekräfta att du kan flytta runt.

1089
00:47:52,650 --> 00:47:52,750
OK.

1090
00:47:52,750 --> 00:47:53,583
Du kan flytta runt.

1091
00:47:53,583 --> 00:47:54,300
Perfekt.

1092
00:47:54,300 --> 00:47:56,470
Så om du tittar ner, har en karta.

1093
00:47:56,470 --> 00:47:58,170
Karta visar var du är.

1094
00:47:58,170 --> 00:47:59,720
Du kan titta runt i rummet.

1095
00:47:59,720 --> 00:48:01,440
Du kan helt vända.

1096
00:48:01,440 --> 00:48:02,128
Ja, exakt.

1097
00:48:02,128 --> 00:48:02,627
Vänd dig om.

1098
00:48:02,627 --> 00:48:05,370

1099
00:48:05,370 --> 00:48:07,125
>> Så se till vänster.

1100
00:48:07,125 --> 00:48:09,875
Jag tror att det är något du kan
plocka upp på ett fat i rummet.

1101
00:48:09,875 --> 00:48:11,709
>> EFA: Hur får jag
staka ut vägen?

1102
00:48:11,709 --> 00:48:12,375
COLTON: Slå upp.

1103
00:48:12,375 --> 00:48:12,980
Titta bara upp.

1104
00:48:12,980 --> 00:48:13,480
Okej.

1105
00:48:13,480 --> 00:48:13,765
Här har du.

1106
00:48:13,765 --> 00:48:15,181
Nu gå vidare och bara vända.

1107
00:48:15,181 --> 00:48:21,460

1108
00:48:21,460 --> 00:48:24,620
Så ser längre till vänster.

1109
00:48:24,620 --> 00:48:25,530
Hålla sig i rörelse åt vänster.

1110
00:48:25,530 --> 00:48:26,960
Hålla ser vänster.

1111
00:48:26,960 --> 00:48:27,541
Fortsätt.

1112
00:48:27,541 --> 00:48:28,040
Yeah.

1113
00:48:28,040 --> 00:48:28,720
>> EFA: Åh, så att.

1114
00:48:28,720 --> 00:48:29,261
>> COLTON: Ja.

1115
00:48:29,261 --> 00:48:30,999
Gå mot den med regulatorn.

1116
00:48:30,999 --> 00:48:31,540
Här har du.

1117
00:48:31,540 --> 00:48:32,790
Nu bör det säga plocka upp den.

1118
00:48:32,790 --> 00:48:33,360
Här har du.

1119
00:48:33,360 --> 00:48:34,290
Plocka upp den.

1120
00:48:34,290 --> 00:48:35,550
Okej.

1121
00:48:35,550 --> 00:48:38,286
Nu ska vi komma ut ur detta rum.

1122
00:48:38,286 --> 00:48:42,209
Gå vidare och gå till dörren.

1123
00:48:42,209 --> 00:48:45,000
Så du kommer att hold-- det står
håll knappen för att tvinga den öppna.

1124
00:48:45,000 --> 00:48:46,333
Så sätt igång och håll nere.

1125
00:48:46,333 --> 00:48:48,250
Japp, tvingar den öppnas.

1126
00:48:48,250 --> 00:48:48,750
Okej.

1127
00:48:48,750 --> 00:48:49,410
Bra jobbat.

1128
00:48:49,410 --> 00:48:50,826
Nu ska vi gå ut ur rummet.

1129
00:48:50,826 --> 00:48:56,970

1130
00:48:56,970 --> 00:49:01,366
Så jag ska lämna resten upp
till dig och se vad du hittar ut.

1131
00:49:01,366 --> 00:49:02,865
EFA: Jag tänker inte i det mörka rummet.

1132
00:49:02,865 --> 00:49:07,315

1133
00:49:07,315 --> 00:49:07,815
Oh vänta.

1134
00:49:07,815 --> 00:49:09,314
Nu måste jag gå ner den mörka korridoren?

1135
00:49:09,314 --> 00:49:10,785
OK, jag kommer tillbaka [OHÖRBAR].

1136
00:49:10,785 --> 00:49:15,520

1137
00:49:15,520 --> 00:49:16,270
COLTON: Okej.

1138
00:49:16,270 --> 00:49:17,560
Några fler objekt att plocka upp.

1139
00:49:17,560 --> 00:49:19,370
Ser ut som några mynt.

1140
00:49:19,370 --> 00:49:22,242
Det är ett lås plockning.

1141
00:49:22,242 --> 00:49:24,200
Så om du hittar en låst
dörr, kan du använda det.

1142
00:49:24,200 --> 00:49:27,755

1143
00:49:27,755 --> 00:49:28,380
Är du rädd?

1144
00:49:28,380 --> 00:49:29,371
>> EFA: Inte ännu.

1145
00:49:29,371 --> 00:49:29,871
COLTON: OK.

1146
00:49:29,871 --> 00:49:34,850

1147
00:49:34,850 --> 00:49:35,497
>> Pretend-- ja.

1148
00:49:35,497 --> 00:49:37,330
Bara låtsas du är
faktiskt står där.

1149
00:49:37,330 --> 00:49:39,580
Och om du slår around--
du har att vänja sig.

1150
00:49:39,580 --> 00:49:40,752
Men det är vettigt.

1151
00:49:40,752 --> 00:49:43,960
DAVID MALAN: Och medan Efa fortsätter att
spela, eftersom vi kunde göra detta hela dagen,

1152
00:49:43,960 --> 00:49:45,381
Vi kan alla tå härute.

1153
00:49:45,381 --> 00:49:48,130
Men vi har två andra par,
Om du vill komma upp och spela.

1154
00:49:48,130 --> 00:49:49,980
Annars kommer vi att se
nästa på onsdag.

1155
00:49:49,980 --> 00:49:51,354
Tack till vår volontär i dag.

1156
00:49:51,354 --> 00:49:52,101
[Applåder]

1157
00:49:52,101 --> 00:49:54,506

1158
00:49:54,506 --> 00:49:57,392
>> [MUSIK - "Seinfeld TEMA"]

1159
00:49:57,392 --> 00:49:58,222

1160
00:49:58,222 --> 00:50:00,180
TALARE 1: Tja, jag är
sätta en ny PL montera på.

1161
00:50:00,180 --> 00:50:01,800
Jag ändrade bara OLPF--

1162
00:50:01,800 --> 00:50:03,980
>> TALARE 2: Så vad
exakt gör du?

1163
00:50:03,980 --> 00:50:07,063
>> TALARE 1: Tja, var och en av these--
här, ska jag visa dig den här här.

1164
00:50:07,063 --> 00:50:08,690
Du kan se det här.

1165
00:50:08,690 --> 00:50:09,510
>> TALARE 3: Jag tror att jag är bra med dessa.

1166
00:50:09,510 --> 00:50:09,933
Vill du ha mer?

1167
00:50:09,933 --> 00:50:11,325
>> TALARE 4: Nej, jag är bra. [OHÖRBAR].

1168
00:50:11,325 --> 00:50:12,200
>> TALARE 3: Nej, [OHÖRBAR].

1169
00:50:12,200 --> 00:50:12,700
Ha några.

1170
00:50:12,700 --> 00:50:21,165

1171
00:50:21,165 --> 00:50:22,290
TALARE 1: Olika färger.

1172
00:50:22,290 --> 00:50:22,890
TALARE 2: OK.

1173
00:50:22,890 --> 00:50:26,690
TALARE 1: Så i slutändan vad det
gör det justerar färgen of--