1
00:00:00,000 --> 00:00:02,862
>> [Muziek]

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

3
00:00:10,030 --> 00:00:11,580
>> DAVID MALAN: Dit is CS50.

4
00:00:11,580 --> 00:00:12,880
Dit is het begin van de week negen.

5
00:00:12,880 --> 00:00:15,797
En dit is wat zou moeten
geweest Mr. Boole's 200ste verjaardag.

6
00:00:15,797 --> 00:00:17,630
Dus dit is de bursalen
aan wie wij hebben gezinspeeld

7
00:00:17,630 --> 00:00:21,800
geruime tijd over het gebruik van
Booleaanse variabelen waar en onwaar,

8
00:00:21,800 --> 00:00:22,910
1 en 0 en dergelijke.

9
00:00:22,910 --> 00:00:25,270
En Google's was
hulde aan hem vandaag.

10
00:00:25,270 --> 00:00:26,489
Hij zou zijn geworden 200.

11
00:00:26,489 --> 00:00:28,280
Dus als je wilt
samen met ons voor CS50 lunch,

12
00:00:28,280 --> 00:00:30,279
een kijkje nemen op de link
op de website van de cursus.

13
00:00:30,279 --> 00:00:33,580
En zulke gezichten en vrienden
deze wachten u hier in Cambridge.

14
00:00:33,580 --> 00:00:35,360
Gezichten zoals deze staan ​​je te wachten in New Haven.

15
00:00:35,360 --> 00:00:37,800
En inderdaad, in Ken
New Haven vriendelijk gemaakt

16
00:00:37,800 --> 00:00:41,594
wat heet een geanimeerde GIF van Eli
hier op een recente lunch-- een GIF is nog

17
00:00:41,594 --> 00:00:44,260
een ander grafisch bestandsformaat,
waarmee je familiar-- dat

18
00:00:44,260 --> 00:00:46,300
ziet er een beetje iets als dit.

19
00:00:46,300 --> 00:00:48,179
Dus gewoon een opeenvolging van-- OK.

20
00:00:48,179 --> 00:00:49,720
Niemand hier in Cambridge is lachen.

21
00:00:49,720 --> 00:00:51,720
Maar in New Haven, dit
is echt grappig, toch?

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

23
00:00:52,350 --> 00:00:53,940
>> Dus wees er bij ons.

24
00:00:53,940 --> 00:00:55,900
Hier bij Harvard,
in het bijzonder, deze woensdag,

25
00:00:55,900 --> 00:00:59,480
als je een tweedejaars of eerstejaars even--
of zelfs junior-- denken van maken

26
00:00:59,480 --> 00:01:01,563
een schakelaar in de computer
wetenschap, weet dat er zult

27
00:01:01,563 --> 00:01:04,440
worden een CS adviseren eerlijke dit
Woensdag, kort na de les

28
00:01:04,440 --> 00:01:08,040
om 04:00 in de computer
wetenschap gebouw Maxwell Dworkin.

29
00:01:08,040 --> 00:01:11,890
We zullen dit op de baan zetten
website morgen, als goed.

30
00:01:11,890 --> 00:01:14,430
Donuts, ik word verteld, zal worden geserveerd.

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

32
00:01:15,180 --> 00:01:18,790
Zo grappig story-- ik porren
rond op het internet,

33
00:01:18,790 --> 00:01:23,575
en ik vond een aantal oude archieven
van mijn oude website.

34
00:01:23,575 --> 00:01:25,950
En het blijkt out-- rond deze
tijd, lijkt het zeer actueel

35
00:01:25,950 --> 00:01:28,910
want ik heb begrepen dat de UC verkiezingen
op het punt om een ​​versnelling hoger schakelen weer.

36
00:01:28,910 --> 00:01:32,230
Dus ik liep voor UC, verloren jammerlijk.

37
00:01:32,230 --> 00:01:34,770
En misschien was dit voor een deel waarom.

38
00:01:34,770 --> 00:01:37,600
Dus dit was mijn website op het moment.

39
00:01:37,600 --> 00:01:40,477
Om een ​​of andere reden, ik dacht dat het was
een goed idee, voordat mensen te vertellen

40
00:01:40,477 --> 00:01:43,310
wat mijn platform was en waarom ze
moeten stemmen voor mij, dat ze

41
00:01:43,310 --> 00:01:47,770
te klikken om in te voeren om te ontdekken dat
informatie die achteraf is

42
00:01:47,770 --> 00:01:48,660
soort griezelig.

43
00:01:48,660 --> 00:01:50,910
Ik weet niet echt wat dat was.

44
00:01:50,910 --> 00:01:53,140
>> Maar het deed zeker niet
help mijn campagne.

45
00:01:53,140 --> 00:01:56,874
Ik vond ook dat door senior
jaar-- Ik had dit Muppet kalender.

46
00:01:56,874 --> 00:01:58,540
Muppets waren soort in zwang toen.

47
00:01:58,540 --> 00:01:59,456
Of misschien waren ze niet.

48
00:01:59,456 --> 00:02:01,790
Ik had een Muppet kalender toen.

49
00:02:01,790 --> 00:02:04,860
En ik dacht dat het zou cool om naam zijn
mijn computer op het netwerk van Harvard

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

51
00:02:07,460 --> 00:02:10,370
Op het moment, dat we allemaal uniek hadden
identificeerbare hostnamen.

52
00:02:10,370 --> 00:02:13,150
En je kon enkele ijdelheid kiezen
naam in plaats van uw eigen naam.

53
00:02:13,150 --> 00:02:15,580
En ik ging met kikvorsman om wat voor reden.

54
00:02:15,580 --> 00:02:19,040
>> En dan started-- Ik bracht ik veel
van de tijd te klikken door middel van deze links

55
00:02:19,040 --> 00:02:20,280
deze morgen.

56
00:02:20,280 --> 00:02:24,690
En dit was mijn over de pagina,
die nu soort lijkt schattig.

57
00:02:24,690 --> 00:02:28,210
Maar het getuigt ook gewoon
hoe ver technologie is gekomen.

58
00:02:28,210 --> 00:02:30,310
Ik bedoel, terug in de dag,
een 486 was iets.

59
00:02:30,310 --> 00:02:34,090
Deze dagen, het is super, super,
super traag en goed minder

60
00:02:34,090 --> 00:02:36,216
dan u zou kunnen hebben in uw
eigen zakken deze dagen.

61
00:02:36,216 --> 00:02:38,465
Er is meer op dat er
was nog meer gênant.

62
00:02:38,465 --> 00:02:39,770
Dus ik zal het bij laten.

63
00:02:39,770 --> 00:02:42,640
Maar dat was mijn eerste
uitstapje in web-- oh, nee.

64
00:02:42,640 --> 00:02:43,180
Dat was het niet.

65
00:02:43,180 --> 00:02:47,000
Mijn eerste echte uitstapje in web programmeren
was deze site, die ik gewoon vergeten.

66
00:02:47,000 --> 00:02:50,620
Op een bepaald punt, heb ik geleerd hoe om te
maken repetitieve achtergrondafbeeldingen.

67
00:02:50,620 --> 00:02:55,260
En dus ik vond deze tegels effectieve,
zoals hockey speler, voetbal en golf

68
00:02:55,260 --> 00:02:58,040
bal, of wat dat ook is
voor de Frosh IM website.

69
00:02:58,040 --> 00:03:01,390
En dit was echt, echt de
eerste web-based project nam ik on--

70
00:03:01,390 --> 00:03:03,880
Ik denk dat misschien tweedejaars
jaar, junior jaar--

71
00:03:03,880 --> 00:03:07,622
na het nemen van CS50 en CS51, één
van de gemeenschappelijke follow-on klassen.

72
00:03:07,622 --> 00:03:09,330
Ik merkte bij het zoeken
door de archieven

73
00:03:09,330 --> 00:03:12,150
dat een van mijn opvolgers en
vrienden, Lee, een soort van veranderd

74
00:03:12,150 --> 00:03:13,480
het auteursrecht op zichzelf.

75
00:03:13,480 --> 00:03:17,520
Maar dit inderdaad iets
Ik moet de verlegenheid te bezitten.

76
00:03:17,520 --> 00:03:19,370
Maar op het moment, dit
was de eerste website,

77
00:03:19,370 --> 00:03:22,220
zoals ik al zei een paar weken geleden,
waarmee eerstejaars kon

78
00:03:22,220 --> 00:03:24,350
registreren voor intramurale sport hier.

79
00:03:24,350 --> 00:03:27,950
En zo blijkt
dat achtergrondafbeeldingen

80
00:03:27,950 --> 00:03:29,530
als dat niet zo'n goed idee.

81
00:03:29,530 --> 00:03:31,840
Maar het web nieuw was, en
we waren allemaal experimenteren.

82
00:03:31,840 --> 00:03:34,310
En dit is wat ik
blijkbaar deed op dat moment.

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

84
00:03:34,810 --> 00:03:38,020
Dus zonder verder oponthoud, schakelen we
versnellingen vandaag om u, echt,

85
00:03:38,020 --> 00:03:42,250
het laatste stuk dat je zou kunnen vinden
vooral handig voor de laatste projecten

86
00:03:42,250 --> 00:03:44,780
maar die beginnen
maken de hele wereld wijde web

87
00:03:44,780 --> 00:03:46,680
voel me een beetje meer begrijpelijk.

88
00:03:46,680 --> 00:03:49,460
Inderdaad, we gaan introduceren
nog een programmeertaal

89
00:03:49,460 --> 00:03:52,474
genaamd JavaScript die vergelijkbaar is
en anders op verschillende manieren

90
00:03:52,474 --> 00:03:54,140
van talen die we hebben gekeken naar tot nu toe.

91
00:03:54,140 --> 00:03:55,807
>> Dus C, herinneren, is dit gecompileerde taal.

92
00:03:55,807 --> 00:03:57,473
Je hebt om het uit te voeren door middel van een compiler.

93
00:03:57,473 --> 00:03:59,810
U krijgt broncode naar object
code, of nullen en enen.

94
00:03:59,810 --> 00:04:03,000
En dat zijn nullen en enen die
je CPU, Central Processing Unit,

95
00:04:03,000 --> 00:04:04,360
echt begrijpen.

96
00:04:04,360 --> 00:04:06,610
PHP, is daarentegen niet
een gecompileerde taal.

97
00:04:06,610 --> 00:04:08,772
Het is een wat?

98
00:04:08,772 --> 00:04:09,980
Het is een geïnterpreteerde taal.

99
00:04:09,980 --> 00:04:11,750
Dus er is een programma
riep een tolk die

100
00:04:11,750 --> 00:04:13,708
moet het-- top lezen
beneden, van links naar right--

101
00:04:13,708 --> 00:04:16,519
en erachter te komen wat er allemaal van
uw syntax doet en betekent,

102
00:04:16,519 --> 00:04:20,200
of het nu een lus of een aandoening
of elk ander aantal programmering

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

104
00:04:20,740 --> 00:04:22,210
Dus dat is een geïnterpreteerde taal.

105
00:04:22,210 --> 00:04:23,910
>> Vervolgens ingebracht we HTML.

106
00:04:23,910 --> 00:04:26,440
En HTML is niet eens een
programmeertaal.

107
00:04:26,440 --> 00:04:28,110
We zouden het wat noemen?

108
00:04:28,110 --> 00:04:31,650
Een opmaaktaal, die net
een soort van mooie manier om te zeggen dat het

109
00:04:31,650 --> 00:04:35,820
niet programmeerconstructies hebben zoals
we zagen zelfs terug in de dag van Scratch.

110
00:04:35,820 --> 00:04:36,720
Er zijn geen lussen.

111
00:04:36,720 --> 00:04:37,920
Er zijn geen voorwaarden.

112
00:04:37,920 --> 00:04:40,820
Het is echt een taal
over het markeren van uw gegevens

113
00:04:40,820 --> 00:04:43,620
en formatteren of
structureren het op een bepaalde manier.

114
00:04:43,620 --> 00:04:46,147
>> CSS, ondertussen, eveneens
geen programmeertaal.

115
00:04:46,147 --> 00:04:47,730
Het is zelfs nog meer esthetisch georiënteerd.

116
00:04:47,730 --> 00:04:50,470
En het laat je om te sorteren van de fine-tunen
dingen zoals grootte en de kleuren het lettertype

117
00:04:50,470 --> 00:04:51,850
en plaatsing en dat alles.

118
00:04:51,850 --> 00:04:52,370
Dan hadden we

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

120
00:04:53,160 --> 00:04:56,010
Dus SQL is inderdaad een programmering
taal in zekere zin,

121
00:04:56,010 --> 00:04:59,330
zij het op maat
specifiek databases.

122
00:04:59,330 --> 00:05:03,347
Maar hoewel we u alleen kennismaken met
selecteren en te voegen en te verwijderen en bij te werken

123
00:05:03,347 --> 00:05:05,430
en een paar anderen,
blijkt dat je kunt eigenlijk

124
00:05:05,430 --> 00:05:07,380
schrijf functies of
gebleken is dat ze

125
00:05:07,380 --> 00:05:11,270
genoemd, in SQL die er uitzien en handelen
helemaal zoals PHP en C-functies.

126
00:05:11,270 --> 00:05:12,390
Dus weet dat deze bestaan.

127
00:05:12,390 --> 00:05:15,348
Maar we hebben niet eens de moeite met hen
we krassen alleen het oppervlak in.

128
00:05:15,348 --> 00:05:18,600
En dan JavaScript, de laatste van
onze talen officieel geïntroduceerd.

129
00:05:18,600 --> 00:05:21,029
Dus JavaScript, ook, is
een geïnterpreteerde taal.

130
00:05:21,029 --> 00:05:23,070
En degenen die bekend zijn, doen
je wilt om het te onderscheiden

131
00:05:23,070 --> 00:05:26,960
enkele kenmerkende
van zowel C en PHP?

132
00:05:26,960 --> 00:05:28,300
Wat maakt het anders?

133
00:05:28,300 --> 00:05:29,650
>> Publiek: Het is niet gecompileerd.

134
00:05:29,650 --> 00:05:29,930
>> DAVID MALAN: weer zeggen?

135
00:05:29,930 --> 00:05:31,200
>> Publiek: Het is niet gecompileerd.

136
00:05:31,200 --> 00:05:31,930
>> DAVID MALAN: Het is niet gecompileerd.

137
00:05:31,930 --> 00:05:33,450
Zo ook wordt geïnterpreteerd.

138
00:05:33,450 --> 00:05:34,760
Dus het is niet gecompileerd.

139
00:05:34,760 --> 00:05:37,210
Maar dat maakt het een beetje zoals PHP.

140
00:05:37,210 --> 00:05:39,545
Maar het is toch anders
PHP in een aantal opvallende manier,

141
00:05:39,545 --> 00:05:40,920
althans in de manier waarop we gebruiken.

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

143
00:05:41,205 --> 00:05:41,940
>> Publiek: Het loopt client-side.

144
00:05:41,940 --> 00:05:44,000
>> DAVID MALAN: Het loopt
client-side, meestal.

145
00:05:44,000 --> 00:05:47,190
Dat is inderdaad de onderscheidende
Kenmerkend voor ons nu.

146
00:05:47,190 --> 00:05:51,170
C was server-side in de zin
dat we hebben alles in CS50 IDE.

147
00:05:51,170 --> 00:05:53,630
PHP tot nu toe is geweest
server-side, voorzover

148
00:05:53,630 --> 00:05:56,550
zoals ook wordt interpreted--
niet gecompileerd, maar interpreted--

149
00:05:56,550 --> 00:06:00,690
binnen CS50 IDE, wat natuurlijk is
slechts een server of servers in de cloud.

150
00:06:00,690 --> 00:06:03,070
>> Maar JavaScript, zelfs
hoewel je je gaat

151
00:06:03,070 --> 00:06:07,000
om te beginnen met het schrijven van het voor, zeg, PSET
acht en misschien laatste projects-- je bent

152
00:06:07,000 --> 00:06:09,620
gaan om het recht
CS50 IDE en opslaan

153
00:06:09,620 --> 00:06:14,760
in bestanden in CS50 IDE, CS50 IDE
en op zijn beurt de wolk servers

154
00:06:14,760 --> 00:06:19,160
waarop het is georganiseerd, zijn niet van plan
interpreteren of uit te voeren code.

155
00:06:19,160 --> 00:06:23,880
Integendeel, het gaat in worden gestuurd
onveranderd tot aan de browser.

156
00:06:23,880 --> 00:06:26,990
En het dan gaat om IE te zijn
of Chrome of Firefox of Safari

157
00:06:26,990 --> 00:06:30,697
of wat dat eigenlijk interpreteert
het, van boven naar beneden, van links naar rechts.

158
00:06:30,697 --> 00:06:32,780
Dus de belangrijkste onderscheidende
kenmerkend voor vandaag

159
00:06:32,780 --> 00:06:36,110
is dat JavaScript is client-side
en PHP, bijvoorbeeld,

160
00:06:36,110 --> 00:06:37,690
heeft zijn server-side.

161
00:06:37,690 --> 00:06:40,920
Nu, dit heeft interessante consequenties
voor, zoals, intellectuele eigendom

162
00:06:40,920 --> 00:06:42,660
en wie kan eigenlijk zien uw code.

163
00:06:42,660 --> 00:06:44,860
En inderdaad, kun je gaan
op het internet en je ziet de meeste

164
00:06:44,860 --> 00:06:47,530
een code dat iemand
geschreven in JavaScript.

165
00:06:47,530 --> 00:06:50,230
Soms is het te lezen,
soms is het versluierd.

166
00:06:50,230 --> 00:06:52,550
Maar meer op die te zijner tijd.

167
00:06:52,550 --> 00:06:57,530
>> Dus JavaScript, mooi genoeg is, is
super soortgelijke, syntactisch, C.

168
00:06:57,530 --> 00:06:59,364
En net als PHP,
er is geen hoofdfunctie.

169
00:06:59,364 --> 00:07:02,113
Als u wilt gaan schrijven
JavaScript-code, zoals u zult zien vandaag,

170
00:07:02,113 --> 00:07:03,270
je gewoon beginnen met het schrijven ervan.

171
00:07:03,270 --> 00:07:06,910
Maar het is, je zult zien, in het bijzonder
bruikbaar in de context van webbrowsers.

172
00:07:06,910 --> 00:07:09,820
Echter, mijn kleine
disclaimer-- meestal earlier--

173
00:07:09,820 --> 00:07:13,790
was om te zeggen dat je kunt steeds
vandaag gebruik JavaScript server-side

174
00:07:13,790 --> 00:07:17,655
met behulp van een fancy kader genaamd Node.js
dat sommige van eigen toepassingen CS50's

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

176
00:07:18,280 --> 00:07:20,640
Controleer 50 daadwerkelijk gebruikt Node.js.

177
00:07:20,640 --> 00:07:24,140
Maar we gaan richten op
JavaScript client-side hier op uit.

178
00:07:24,140 --> 00:07:26,750
>> Dus hier is een reeks voorwaarden in PHP.

179
00:07:26,750 --> 00:07:29,350
Sorry, in-- eigenlijk, dat
statement, is ook correct.

180
00:07:29,350 --> 00:07:32,200
Hier is ook een reeks
omstandigheden in JavaScript.

181
00:07:32,200 --> 00:07:35,560
Syntactisch, het is
identiek C en PHP.

182
00:07:35,560 --> 00:07:39,040
Mr. Boole's uitdrukkingen zijn,
Evenzo syntactisch

183
00:07:39,040 --> 00:07:41,190
identiek aan zowel C en PHP.

184
00:07:41,190 --> 00:07:44,100
We hebben ook schakelaars in
JavaScript die identiek uitzien.

185
00:07:44,100 --> 00:07:46,350
We hebben voor lussen die zijn
identiek gestructureerd

186
00:07:46,350 --> 00:07:48,140
while loops, doen terwijl loops.

187
00:07:48,140 --> 00:07:49,980
>> Deze is een beetje anders.

188
00:07:49,980 --> 00:07:53,120
PHP had voor elke construct
dat je zou kunnen worden met behulp

189
00:07:53,120 --> 00:07:55,320
of zullen gebruiken in PSET zeven, misschien.

190
00:07:55,320 --> 00:07:59,460
JavaScript heeft deze speciale versie van
want waar je letterlijk iets te zeggen

191
00:07:59,460 --> 00:08:03,864
zoals variabele sleutel in voorwerp, waarin
is een zeer beknopte manier om te zeggen,

192
00:08:03,864 --> 00:08:06,780
als ik een object-- heb en we zullen
praten over deze weer in een moment--

193
00:08:06,780 --> 00:08:10,370
en ik wil herhalen over alle
van de sleutelwaarde paren binnen,

194
00:08:10,370 --> 00:08:13,620
Ik hoef niet te achterhalen hoe
numeriek indexeren met nul, één,

195
00:08:13,620 --> 00:08:14,580
twee drie.

196
00:08:14,580 --> 00:08:15,900
>> Ik kan dit letterlijk zeggen.

197
00:08:15,900 --> 00:08:20,740
En op elke iteratie, JavaScript
voor mij zal de variabele sleutel actualiseren

198
00:08:20,740 --> 00:08:24,810
de eerste sleutel, dan is de volgende sleutel,
dan is de volgende toets, dan is de volgende toets,

199
00:08:24,810 --> 00:08:25,510
enzovoorts.

200
00:08:25,510 --> 00:08:30,000
En ik kan op zijn waarde te krijgen door het behandelen
een object in JavaScript, zoals we zullen zien,

201
00:08:30,000 --> 00:08:32,584
alsof het een
associatieve array in PHP.

202
00:08:32,584 --> 00:08:35,750
Sterker nog, als je eindelijk verpakt uw
geest rond wat een associatieve array

203
00:08:35,750 --> 00:08:40,140
in PHP, kunt u denken aan het voor nu als
identiek aan een object in JavaScript.

204
00:08:40,140 --> 00:08:42,030
Maar dat is een beetje
een oversimplificatie.

205
00:08:42,030 --> 00:08:47,230
>> Arrays kijken, mooi genoeg, identieke
PHP behalve één personage.

206
00:08:47,230 --> 00:08:51,425
Er is één ding ontbreekt hier
dat zagen we vorige week met PHP.

207
00:08:51,425 --> 00:08:52,050
Wat is weggelaten?

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

209
00:08:53,310 --> 00:08:54,090
Geen dollarteken.

210
00:08:54,090 --> 00:08:56,240
We zijn dus terug naar een
meer normale wereld waar

211
00:08:56,240 --> 00:08:58,050
variabelen hebben geen dollartekens.

212
00:08:58,050 --> 00:09:00,810
Maar je prefix hen
met een var, typisch.

213
00:09:00,810 --> 00:09:02,230
En var betekent variabel.

214
00:09:02,230 --> 00:09:06,440
En net als PHP is losjes
typed-- waarbij er soorten,

215
00:09:06,440 --> 00:09:10,120
Er zijn nummers en strings
en praalwagens en zo forth--

216
00:09:10,120 --> 00:09:11,570
JavaScript heeft op dezelfde types.

217
00:09:11,570 --> 00:09:15,470
Maar het is losjes getypt in dat we de
programmeurs niet hoeft te geven.

218
00:09:15,470 --> 00:09:18,980
We hoeven alleen maar op de hoogte zijn
dat verschillende types bestaan.

219
00:09:18,980 --> 00:09:21,690
>> Variabelen, meanwhile-- hier is hoe
we kunnen verklaren "hello, world"

220
00:09:21,690 --> 00:09:22,230
als een string.

221
00:09:22,230 --> 00:09:24,890
Merkt het is identiek aan
PHP maar geen dollarteken.

222
00:09:24,890 --> 00:09:27,120
En dit is iets wat we zullen
beginnen vandaag meer zien,

223
00:09:27,120 --> 00:09:30,990
waarbij je een object hebt
met sleutels en waarden.

224
00:09:30,990 --> 00:09:32,990
En als je wilt proberen
af te leiden uit de laatste week--

225
00:09:32,990 --> 00:09:34,730
de syntax is een beetje anders.

226
00:09:34,730 --> 00:09:39,740
Maar een beetje gezond verstand check-- hoeveel
sleutels heeft dit doel lijken te hebben?

227
00:09:39,740 --> 00:09:40,850
Dus ik zie vier.

228
00:09:40,850 --> 00:09:43,560
Ik zie twee.

229
00:09:43,560 --> 00:09:44,680
>> Dus het is eigenlijk twee.

230
00:09:44,680 --> 00:09:47,260
Dus dit is een verzameling
van twee key-waarde paren.

231
00:09:47,260 --> 00:09:49,820
De sleutel is het symbool waarvan de waarde is FB.

232
00:09:49,820 --> 00:09:52,620
De sleutel is de prijs waarvan de waarde is 101,53.

233
00:09:52,620 --> 00:09:54,230
Dus dat zijn twee key-waarde paren.

234
00:09:54,230 --> 00:09:58,120
En vergeet niet, PHP-- en dit is weer
gewoon soort van syntactische verschil.

235
00:09:58,120 --> 00:10:00,170
Het is niet zo
intellectueel interessant.

236
00:10:00,170 --> 00:10:04,610
PHP kan dit hetzelfde hebben geschreven
zoiets als follows-- citaat, evenaart.

237
00:10:04,610 --> 00:10:06,730
En ik deze veranderen in vierkante haken.

238
00:10:06,730 --> 00:10:11,240
En dit dan veranderen ik
genoteerde woord, "prijs."

239
00:10:11,240 --> 00:10:12,500
En dan weet ik niet een dubbele punt te gebruiken.

240
00:10:12,500 --> 00:10:15,060
Wat heb ik vorige week gebruiken?

241
00:10:15,060 --> 00:10:18,290
Ja, het isgelijkteken
arrow funky notatie.

242
00:10:18,290 --> 00:10:21,470
>> En dan heb ik hier hetzelfde.

243
00:10:21,470 --> 00:10:23,580
Hetzelfde hier.

244
00:10:23,580 --> 00:10:24,240
En dat is alles.

245
00:10:24,240 --> 00:10:27,752
Dus het is fijn als dit heeft niet
echt gezonken in het geheugen gewoon

246
00:10:27,752 --> 00:10:29,960
maar omdat het is echt
intellectueel oninteressant.

247
00:10:29,960 --> 00:10:31,660
Het is gewoon syntactische verschillen.

248
00:10:31,660 --> 00:10:33,230
Maar de ideeën zijn precies hetzelfde.

249
00:10:33,230 --> 00:10:35,910
Binnenkant van deze variabele
quote in JavaScript

250
00:10:35,910 --> 00:10:39,020
is een verzameling van key-waarde paren,
waarvan een symbool, waarvan

251
00:10:39,020 --> 00:10:39,690
is de prijs.

252
00:10:39,690 --> 00:10:42,340
En ik kan krijgen op die waarden
de volgende syntax.

253
00:10:42,340 --> 00:10:46,280
Net als in PHP, ik kon
iets doen like-- laten

254
00:10:46,280 --> 00:10:48,590
me dit vak een beetje groter.

255
00:10:48,590 --> 00:10:52,750
Net als in PHP, ik kon
maken dit-- oh, dammit.

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

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

258
00:10:56,350 --> 00:11:00,800
>> Net als in PHP-- OK, we
gewoon gebruik maken van de presentator aantekeningen.

259
00:11:00,800 --> 00:11:06,010
Net als in PHP, kan ik
do $ citaat $ citaat ["symbool"],

260
00:11:06,010 --> 00:11:08,860
en dit zal me
de waarde van "symbool".

261
00:11:08,860 --> 00:11:12,800
In JavaScript, gaat het om
identiek, waardoor ik kan het gewoon doen.

262
00:11:12,800 --> 00:11:14,850
Het enige dat is
ontbreekt, is het dollarteken.

263
00:11:14,850 --> 00:11:17,470
>> Zo mooi genoeg is, dan is er
niet zo heel veel nieuwe syntaxis.

264
00:11:17,470 --> 00:11:21,025
Dus wat we vandaag concentreren op, echt, is
een aantal van de ideeën en de toepassingen.

265
00:11:21,025 --> 00:11:22,900
En het eerste
applicatie die je misschien

266
00:11:22,900 --> 00:11:26,090
hebben gezien als je doken PSET
zeven al is deze syntaxis.

267
00:11:26,090 --> 00:11:28,980
Dus in PSET zeven, als je hebt
gezien of het nog niet gezien,

268
00:11:28,980 --> 00:11:33,570
weten dat er een bestand dat we geven
je config.json-- JavaScript geroepen

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

270
00:11:34,661 --> 00:11:35,160
Waarom?

271
00:11:35,160 --> 00:11:39,540
We wilden in staat zijn om u te voorzien van
een sjabloon met een aantal key-waarde paren.

272
00:11:39,540 --> 00:11:44,290
We wilden in staat zijn om u een lijst
van de gastheer, de naam van de server.

273
00:11:44,290 --> 00:11:46,710
We wilden u een geven
placeholder voor uw gebruikersnaam

274
00:11:46,710 --> 00:11:48,210
en een tijdelijke aanduiding voor uw wachtwoord.

275
00:11:48,210 --> 00:11:49,410
Als je niet ziet
dit nog, geen zorgen te maken.

276
00:11:49,410 --> 00:11:51,340
Meer hierover in PSET zeven
[? spec. ?] En dan,

277
00:11:51,340 --> 00:11:53,173
natuurlijk, willen wij u
in de to-do's in te vullen

278
00:11:53,173 --> 00:11:55,310
want als u zich aanmeldt bij
CS50 IDE, ieder van jullie

279
00:11:55,310 --> 00:11:57,630
heb je je eigen gebruikersnaam en wachtwoord.

280
00:11:57,630 --> 00:12:00,910
>> Dus konden we een half dozijn heb gebruikt
of meer verschillende bestandsformaten.

281
00:12:00,910 --> 00:12:02,940
We konden een txt-bestand gebruikt.

282
00:12:02,940 --> 00:12:04,570
We konden een CSV-bestand gebruikt.

283
00:12:04,570 --> 00:12:06,745
We konden hebben gebruikt een
INI-bestand, een XML-bestand,

284
00:12:06,745 --> 00:12:09,370
een hele hoop meer acroniemen die
u misschien nooit hebben gehoord.

285
00:12:09,370 --> 00:12:11,244
Het is een soort van willekeurige
aan het einde van de dag.

286
00:12:11,244 --> 00:12:16,030
Maar super populair deze dagen is een tekst
formaat genaamd JSON-- JavaScript Object

287
00:12:16,030 --> 00:12:18,460
Notation-- die er zo uitziet.

288
00:12:18,460 --> 00:12:20,890
Het is een beetje cryptisch,
maar let op de patronen.

289
00:12:20,890 --> 00:12:24,180
Je begint met een open krullend
brace, en je eindigt met het zelfde.

290
00:12:24,180 --> 00:12:26,550
Binnenkant van dat is iets.

291
00:12:26,550 --> 00:12:27,920
Het is een sleutel-waarde paar.

292
00:12:27,920 --> 00:12:30,580
Dus dit is een object dat ik
kijken naar het scherm hier

293
00:12:30,580 --> 00:12:33,690
dat één sleutel, welke waarde heeft.

294
00:12:33,690 --> 00:12:37,610
En afgeleid op basis van de
vorige patroon, wat is de sleutel hier?

295
00:12:37,610 --> 00:12:39,790
Databank, het ding om
Links van het colon.

296
00:12:39,790 --> 00:12:43,500
>> Nu de waarde toevallig
een meerdere lijnen deze tijd.

297
00:12:43,500 --> 00:12:46,760
Maar de waarde begint met een krullend
brace en eindigt met een accolade.

298
00:12:46,760 --> 00:12:49,480
Dus wat zou u voorstellen is de
type de waarde van database?

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

300
00:12:52,160 --> 00:12:54,670
Een woordenboek, of gewoon meer
bondig, een object.

301
00:12:54,670 --> 00:12:55,170
Rechts?

302
00:12:55,170 --> 00:13:00,010
Dit is een soort van een datastructuur die
kunnen andere structuren gebruiken in zichzelf.

303
00:13:00,010 --> 00:13:02,750
Dus als dit hele ding zijn we
het bellen van een object-- en een object

304
00:13:02,750 --> 00:13:07,101
is gewoon een stelletje key-waarde pairs-- de
waarde gegevensbank zelf is een object.

305
00:13:07,101 --> 00:13:10,350
De waarde van de database heeft een heleboel
van sleutelwaarde paren, waarvan de eerste

306
00:13:10,350 --> 00:13:13,130
is gastheer, dan noemen, dan
gebruikersnaam, wachtwoord dan,

307
00:13:13,130 --> 00:13:17,550
elk waarvan de waarden, ondertussen, het
gewoon een saaie reeks dubbele aanhalingstekens.

308
00:13:17,550 --> 00:13:19,770
>> Dus zelfs als dat niet
super helder gewoon nog niet,

309
00:13:19,770 --> 00:13:22,740
weet dat dit slechts een
standaard, tamelijk saaie manier

310
00:13:22,740 --> 00:13:25,190
het opslaan van data in een standaardformaat.

311
00:13:25,190 --> 00:13:27,700
Maar de gemeenschappelijke fouten die je
zou, zelfs in PSET zeven,

312
00:13:27,700 --> 00:13:32,120
zijn kleine domme dingen, zoals als je
per ongeluk de komma er weglaten.

313
00:13:32,120 --> 00:13:34,900
Dat zal resulteren in het bestand
niet noodzakelijkerwijs leesbaar.

314
00:13:34,900 --> 00:13:38,191
Als u per ongeluk zaken als het weglaten
citaten, gaat het niet leesbaar zijn.

315
00:13:38,191 --> 00:13:41,654
Dus het is een vrij nitpicky bestandsformaat,
maar het is er een die is super gemeen.

316
00:13:41,654 --> 00:13:44,820
We toevallig te gebruiken, alhoewel
je hoeft elke JavaScript anders niet gebruiken,

317
00:13:44,820 --> 00:13:46,330
in PSET zeven.

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

319
00:13:46,860 --> 00:13:48,110
Dus onthoud dit beeld.

320
00:13:48,110 --> 00:13:51,657
We spraken over, in HTML, dat
de code kan er zo uitzien.

321
00:13:51,657 --> 00:13:54,740
Dit is de HyperText Markup Language
[Onverstaanbaar] voor slechts "hello, wereld."

322
00:13:54,740 --> 00:13:57,570
Maar dan hebben we voorgesteld een
tijdje terug dat als het helpt,

323
00:13:57,570 --> 00:14:00,210
wilt u misschien gaan denken
over dit nu al als een boom.

324
00:14:00,210 --> 00:14:03,730
In feite, de inkeping wij
Gebruik alleen omwille van de leesbaarheid's

325
00:14:03,730 --> 00:14:05,610
of omwille van de stijl van
Links kan soort

326
00:14:05,610 --> 00:14:10,040
worden vertaald in deze boom, waar u
hebben een aantal speciale root node dat we

327
00:14:10,040 --> 00:14:16,860
algemeen genoemd document, waaronder
is de wortel HTML element of tag, HTML,

328
00:14:16,860 --> 00:14:19,980
die moet dan twee
kinderen, hoofd en lichaam.

329
00:14:19,980 --> 00:14:21,750
>> En dan op zijn beurt, het hoofd heeft een titel.

330
00:14:21,750 --> 00:14:23,440
En titel een tekst waarde.

331
00:14:23,440 --> 00:14:26,130
En lichaam heeft evenzo een tekst waarde.

332
00:14:26,130 --> 00:14:29,220
Dus als je comfortabel gezegde
dat ja, kunt u dit HTML nemen

333
00:14:29,220 --> 00:14:32,080
en schetsen een beeld als
dit, de rechterzijde

334
00:14:32,080 --> 00:14:35,910
is een mooi mentaal model, want nu
dat we JavaScript, een programmeertaal

335
00:14:35,910 --> 00:14:39,960
taal die browsers kan
uit te voeren en te interpreteren voor u,

336
00:14:39,960 --> 00:14:42,690
het blijkt dat wat
We staan ​​op het punt om te doen in code

337
00:14:42,690 --> 00:14:45,320
is beginnen om deze te manipuleren
boomstructuur in het geheugen.

338
00:14:45,320 --> 00:14:47,070
We hoeven niet te bouwen
de boom in het geheugen.

339
00:14:47,070 --> 00:14:49,880
We hoeven niet te soort doen
PSET-vijf-stijl datastructuur

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

341
00:14:50,650 --> 00:14:54,610
De browser, mooi genoeg, upon
interpreteren HTML boven naar beneden,

342
00:14:54,610 --> 00:14:58,600
links of rechts, wordt letterlijk gaat
geef ons het equivalent van een pointer

343
00:14:58,600 --> 00:15:00,840
om die hele boom voor gratis.

344
00:15:00,840 --> 00:15:02,150
Het doet al het harde werk.

345
00:15:02,150 --> 00:15:05,520
Dat is wat Mozilla en Apple
en anderen voor ons hebben gedaan.

346
00:15:05,520 --> 00:15:09,400
>> En JavaScript gaan we
in staat zijn te controleren en te veranderen en doen

347
00:15:09,400 --> 00:15:12,910
interessante dingen te
die boom, ook wel bekend

348
00:15:12,910 --> 00:15:15,880
als een DOM of Document Object Model.

349
00:15:15,880 --> 00:15:17,110
Wat voor dingen?

350
00:15:17,110 --> 00:15:19,030
Nou, het blijkt dat
in JavaScript, is er

351
00:15:19,030 --> 00:15:22,800
deze waslijst van
gebeurtenissen die kunnen plaatsvinden.

352
00:15:22,800 --> 00:15:26,330
En we hebben niet echt gebruikt dat
woord sinds week nul en PSET

353
00:15:26,330 --> 00:15:28,240
nul wanneer we spraken over Scratch.

354
00:15:28,240 --> 00:15:31,390
De meesten van jullie waarschijnlijk niet gebruiken
een gebeurtenis in uw Scratch project.

355
00:15:31,390 --> 00:15:33,850
Maar je zou kunnen herinneren
de eenvoudige Marco Polo

356
00:15:33,850 --> 00:15:36,760
bijvoorbeeld, waar we twee
sprites, van wie gezegd, Marco.

357
00:15:36,760 --> 00:15:40,180
De andere waarvan vervolgens, na luisteren
en het horen van dat evenement, zei Polo.

358
00:15:40,180 --> 00:15:42,080
Zo niet, dan voel je vrij om
terugkijken dat ver terug.

359
00:15:42,080 --> 00:15:44,450
>> Maar dit is gewoon om
zeggen, en u kunt soort

360
00:15:44,450 --> 00:15:47,730
afleiden van de namen van deze
dingen, JavaScript, zo blijkt,

361
00:15:47,730 --> 00:15:53,200
gaat ons een manier om te luisteren te geven
voor de muis naar beneden of de muis naar boven

362
00:15:53,200 --> 00:15:57,920
of sleutel naar beneden of sleutel
gaan omhoog of onsubmit onselect

363
00:15:57,920 --> 00:15:59,740
of onresizing iets.

364
00:15:59,740 --> 00:16:03,060
Met andere woorden, elke fysieke actie
dat een mens kan nemen met een browser

365
00:16:03,060 --> 00:16:08,210
die u elke dag doet, kun je schrijven
code voor die luistert naar de gebeurtenissen

366
00:16:08,210 --> 00:16:10,220
en dan doet iets geschikt.

367
00:16:10,220 --> 00:16:14,130
>> Bijvoorbeeld, als u Google Maps gebruikt,
wat gebeurt er als u klikt en bewegen

368
00:16:14,130 --> 00:16:16,250
de muis, typisch?

369
00:16:16,250 --> 00:16:17,758
Als u klikt en sleept?

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

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

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

373
00:16:22,200 --> 00:16:23,159
De kaart begint te bewegen.

374
00:16:23,159 --> 00:16:25,616
Dus je kan soort zien wat er
hier, wat is daar.

375
00:16:25,616 --> 00:16:27,130
En hoe doet Google implementeren dat?

376
00:16:27,130 --> 00:16:29,421
Nou, vermoedelijk, zijn ze
met een paar van deze gebeurtenis

377
00:16:29,421 --> 00:16:31,720
luisteraars, die
zegt, luister op de muis

378
00:16:31,720 --> 00:16:35,410
down-- dus wanneer de gebruiker fysiek
duwt zijn trackpad of zijn of haar muis

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

380
00:16:36,010 --> 00:16:38,350
En dan zijn we op zoek naar
iets als beweging

381
00:16:38,350 --> 00:16:41,145
of een andere gebeurtenis die
stelt ons in staat om de luchtweerstand te vangen.

382
00:16:41,145 --> 00:16:45,910
En in feite, drag is eveneens in deze
dot dot dot lijst van mogelijke opties.

383
00:16:45,910 --> 00:16:49,140
>> Dus dit gaat een krachtig zijn
manier om te beginnen reageren op de gebruiker

384
00:16:49,140 --> 00:16:52,824
nog voordat hij of zij eigenlijk klikt
iets wat expliciet als dienen.

385
00:16:52,824 --> 00:16:55,240
Maar we gaan introduceren
een paar thema's om er te komen.

386
00:16:55,240 --> 00:16:58,570
Maar laten we eerst de overgang
sommige eigenlijke code.

387
00:16:58,570 --> 00:17:01,450
Dus ik ga om te gaan
vooruit en open dom-0,

388
00:17:01,450 --> 00:17:05,869
die een zeer eenvoudig voorbeeld
hier dat als ik in eenvoudig te zoomen

389
00:17:05,869 --> 00:17:08,500
heeft deze ingang hier voor mij.

390
00:17:08,500 --> 00:17:12,410
En ik ga om verder te gaan en typ
"David" voor mijn naam en klik op Verzenden.

391
00:17:12,410 --> 00:17:17,940
>> En dan, zij het soort goedkoop, I
hebben deze prompt die opduikt die zegt,

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

393
00:17:19,244 --> 00:17:21,740
Dus dit is een soort van
zoals onze "hello, world"

394
00:17:21,740 --> 00:17:25,150
dat we hebben een tijdje terug in C en
zelfs in PHP, want ik heb dynamisch

395
00:17:25,150 --> 00:17:26,310
uitgestuurd mijn naam.

396
00:17:26,310 --> 00:17:28,230
Ik kan de naam van iemand anders hier te doen.

397
00:17:28,230 --> 00:17:31,240
Ik kon dit alleen veranderen,
als, Hannah, klik op Verzenden.

398
00:17:31,240 --> 00:17:33,780
En inderdaad, de kleine pop-up veranderingen.

399
00:17:33,780 --> 00:17:36,650
>> Nu, pop-ups zijn een van de
meest misbruikte kenmerken van het web.

400
00:17:36,650 --> 00:17:38,520
En inderdaad, weer
de dag pop-up blockers

401
00:17:38,520 --> 00:17:40,820
in zwang, omdat je
zou gaan om enkele website--

402
00:17:40,820 --> 00:17:43,604
misschien een twijfelachtige plek--
Dat zou dan plotseling

403
00:17:43,604 --> 00:17:46,020
start peppering uw scherm
met een hele hoop van pop-ups.

404
00:17:46,020 --> 00:17:49,700
En dus is deze mogelijkheid om pop-up
ramen voor de gebruiker

405
00:17:49,700 --> 00:17:52,372
is niet bijzonder geweest
goed ontvangen door de mensheid.

406
00:17:52,372 --> 00:17:54,080
Dus dat is de reden waarom je zien
voorkomen dat dit ding,

407
00:17:54,080 --> 00:17:55,706
die net maakt dit hele ding lelijk.

408
00:17:55,706 --> 00:17:57,996
Dus we gaan een behoefte
betere manier om de gebruiker gevraagd.

409
00:17:57,996 --> 00:17:59,350
Maar voor nu, dat lijkt te werken.

410
00:17:59,350 --> 00:18:03,320
Dus gewoon intuïtief, wat
lijkt hier te gebeuren?

411
00:18:03,320 --> 00:18:07,870
Ik ga je gang en klik op Verzenden en
dan is er iets gebeurt, duidelijk.

412
00:18:07,870 --> 00:18:12,870
Maar wat gebeurt niet, dat gebeurde
vorige week wanneer ik klikte versturen?

413
00:18:12,870 --> 00:18:15,940
Wat gebeurde niet op het scherm?

414
00:18:15,940 --> 00:18:17,170
Sorry?

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

416
00:18:18,010 --> 00:18:19,720
De URL niet helemaal veranderen.

417
00:18:19,720 --> 00:18:22,250
Ik zei dat dit dom-0,
en ik ben nog steeds op dom-0.

418
00:18:22,250 --> 00:18:26,890
Normaal gesproken zouden we veranderd naar een andere
URL, zoals register.php of dergelijke.

419
00:18:26,890 --> 00:18:29,560
>> Maar zelfs als ik ontslaan
dit ding door op OK te klikken,

420
00:18:29,560 --> 00:18:32,310
merken dat de URL
blijft volledig zetten.

421
00:18:32,310 --> 00:18:35,350
En, in feite, als ik ben een beetje
sceptisch, laat me open te stellen Chrome.

422
00:18:35,350 --> 00:18:36,860
Laat me openstellen van het tabblad Netwerk.

423
00:18:36,860 --> 00:18:38,360
En merken dat het leeg op het moment.

424
00:18:38,360 --> 00:18:40,700
Laat me gaan en opnieuw indienen Maria.

425
00:18:40,700 --> 00:18:42,810
Er is geen netwerkverkeer dan ook.

426
00:18:42,810 --> 00:18:44,320
Dus er is geen HTTP.

427
00:18:44,320 --> 00:18:47,620
>> Dus inderdaad, als ik kijk naar de broncode
voor dit-- laat me dit venster te sluiten

428
00:18:47,620 --> 00:18:49,480
en ga naar View Source.

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

430
00:18:50,400 --> 00:18:53,520
Het lijkt erop dat er een aantal
nieuwe labels, waaronder script.

431
00:18:53,520 --> 00:18:57,490
Dus laten we eens een kijkje nemen binnen CS50
IDE wat ik naar de gebruiker.

432
00:18:57,490 --> 00:19:00,690
>> Dus hier is-- laten
focus op alleen de HTML.

433
00:19:00,690 --> 00:19:03,500
Hier is de onderste helft van dom-0.html.

434
00:19:03,500 --> 00:19:07,830
En merk op dat het heeft een titel,
een hoofd-tag, een body-tag, een vorm tag.

435
00:19:07,830 --> 00:19:11,257
Maar wat springt uit om u zo
anders, vooral als je nog nooit hebt

436
00:19:11,257 --> 00:19:12,590
geschreven jezelf elke JavaScript.

437
00:19:12,590 --> 00:19:14,920
Laat me schuiven een beetje
naar hier.

438
00:19:14,920 --> 00:19:18,330
Ik heb een input gekregen,
een andere ingang voor te leggen.

439
00:19:18,330 --> 00:19:21,410
Ik heb een ID, dat is een soort van nieuwe.

440
00:19:21,410 --> 00:19:22,790
Maar we zagen dit met CSS.

441
00:19:22,790 --> 00:19:24,480
Wat is zeker nieuw?

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

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

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

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

446
00:19:32,760 --> 00:19:35,630
Dus waar het onsubmit zegt:
merken wat lijkt te volgen.

447
00:19:35,630 --> 00:19:38,740
Dit is een attribuut
in HTML-nomenclatuur.

448
00:19:38,740 --> 00:19:40,944
De waarde ervan is dit geciteerd touwtje hier.

449
00:19:40,944 --> 00:19:42,860
En dit ziet er een beetje
raar op het eerste gezicht.

450
00:19:42,860 --> 00:19:44,050
Het is geen HTML.

451
00:19:44,050 --> 00:19:45,240
Het is niet CSS.

452
00:19:45,240 --> 00:19:47,580
Dit is, zoals je wel kan raden, JavaScript.

453
00:19:47,580 --> 00:19:51,850
Dus het lijkt erop dat ingebouwd in deze
webpagina is een functie genaamd begroeten.

454
00:19:51,850 --> 00:19:54,250
En ik ben afgeleid dat net
want het is een woord, te begroeten.

455
00:19:54,250 --> 00:19:55,880
Het heeft een open paren,
dicht paren, puntkomma.

456
00:19:55,880 --> 00:19:58,095
Ziet eruit als een C-functie,
ziet eruit als een PHP-functie.

457
00:19:58,095 --> 00:20:00,370
>> En inderdaad, het gaat om
is een JavaScript-functie.

458
00:20:00,370 --> 00:20:01,440
Dan ben ik terug vals.

459
00:20:01,440 --> 00:20:03,440
We zullen terug te komen
dat in slechts een moment.

460
00:20:03,440 --> 00:20:05,320
Maar waar is deze functie gedefinieerd?

461
00:20:05,320 --> 00:20:07,950
Nou laat me scrollen
het begin van het bestand.

462
00:20:07,950 --> 00:20:11,710
En ook al is het een lange lijn,
Het is betrekkelijk eenvoudig.

463
00:20:11,710 --> 00:20:15,000
Laat me hier uitzoomen en
richten op deze vier lijnen.

464
00:20:15,000 --> 00:20:17,137
>> Dus in JavaScript, maar
zoals PHP, je gewoon

465
00:20:17,137 --> 00:20:19,720
laten we zeggen, letterlijk, het woord "functie"
de naam van de functie,

466
00:20:19,720 --> 00:20:22,700
en dan haakjes met enige
arguments-- geen argumenten in deze zaak.

467
00:20:22,700 --> 00:20:25,290
En er is geen soort return
in JavaScript, net als PHP.

468
00:20:25,290 --> 00:20:29,470
Dus het is een beetje losser dan C.
Open accolade, dicht accolade.

469
00:20:29,470 --> 00:20:33,270
Ingebouwd in JavaScript is een function--
niet een aanbevolen function--

470
00:20:33,270 --> 00:20:35,730
maar een functie genaamd alert
wiens enige doel in het leven

471
00:20:35,730 --> 00:20:38,620
is op te trekken die vrij lelijk
vraagt ​​dat we een ogenblik geleden zag.

472
00:20:38,620 --> 00:20:40,950
>> Nu is dit soort van een mondvol.

473
00:20:40,950 --> 00:20:42,560
Wat is hier aan de hand?

474
00:20:42,560 --> 00:20:45,840
Dus laten we beginnen aan
markeren hier alles.

475
00:20:45,840 --> 00:20:48,540
Dat is hetzelfde argument te waarschuwen.

476
00:20:48,540 --> 00:20:49,530
En wat is er aan de hand?

477
00:20:49,530 --> 00:20:51,200
Dit ziet er net als een string.

478
00:20:51,200 --> 00:20:59,180
En het blijkt, in tegenstelling tot PHP en in tegenstelling tot
C, het maakt niet uit in JavaScript

479
00:20:59,180 --> 00:21:01,090
Als je enkele aanhalingstekens of dubbele aanhalingstekens.

480
00:21:01,090 --> 00:21:02,060
Ze zullen gelijkwaardig zijn.

481
00:21:02,060 --> 00:21:03,769
En eerlijk gezegd, het is gewoon
populair deze dagen

482
00:21:03,769 --> 00:21:06,726
voor JavaScript programmeurs altijd
Gebruik enkele aanhalingstekens om wat voor reden.

483
00:21:06,726 --> 00:21:07,840
Het is gewoon het ding om te doen.

484
00:21:07,840 --> 00:21:09,710
Maar we konden dubbele aanhalingstekens te gebruiken, als goed.

485
00:21:09,710 --> 00:21:11,540
>> Dus plus is een nieuw karakter.

486
00:21:11,540 --> 00:21:14,512
Maar degenen onder u die gedaan hebt
dit al eerder, wat betekent plus betekenen?

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

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

489
00:21:17,120 --> 00:21:18,570
Zo zagen we dit in PHP.

490
00:21:18,570 --> 00:21:20,315
Er is gewoon de stip
operator in PHP dat

491
00:21:20,315 --> 00:21:22,000
zal twee strings met elkaar samen te voegen.

492
00:21:22,000 --> 00:21:24,000
C was een pijn in de nek om dit te doen.

493
00:21:24,000 --> 00:21:27,310
Recall van PSET zes, dat was
een bijzondere pijn in de nek,

494
00:21:27,310 --> 00:21:29,470
u zou moeten gebruiken
iets als strcat

495
00:21:29,470 --> 00:21:31,660
na de toewijzing van het geheugen
op de stapel of de heap.

496
00:21:31,660 --> 00:21:34,243
Je moest springen door hoepels
gewoon om twee tekenreeksen samen te voegen.

497
00:21:34,243 --> 00:21:36,040
In JavaScript, het is super eenvoudig.

498
00:21:36,040 --> 00:21:38,030
Gebruik gewoon de plus operator tussen hen.

499
00:21:38,030 --> 00:21:41,420
>> Dus het complex ogende
ding lijkt om dit te

500
00:21:41,420 --> 00:21:43,490
omdat eind
deze hele reeks, ik heb net

501
00:21:43,490 --> 00:21:45,797
samenvoegen op een uitroepteken.

502
00:21:45,797 --> 00:21:48,380
Dus als wat was opduiken werd
"hallo, David", "hallo, Hannah,"

503
00:21:48,380 --> 00:21:52,740
"hallo, Maria," enzovoort, duidelijk
dat midden ding tussen de twee

504
00:21:52,740 --> 00:21:55,215
plussen moet me toegang tot wat te geven?

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

506
00:21:58,855 --> 00:22:01,991
Wat is daar voor zorgen?

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

508
00:22:02,490 --> 00:22:05,090
Dus ik zal hier doen alsof
beantwoorden hun naam, toch?

509
00:22:05,090 --> 00:22:10,380
Zodat hun naam dook in de finale
resultaat. Dus wat betekent dit?

510
00:22:10,380 --> 00:22:15,080
Nou, ik eerder in dat de voorgestelde
beeld dat de zogenaamde DOM

511
00:22:15,080 --> 00:22:18,580
heeft deze speciale hoofdelement
weg top genoemd document.

512
00:22:18,580 --> 00:22:21,660
En nu, zo blijkt, dat gaat
een bijzondere globale variabele

513
00:22:21,660 --> 00:22:25,250
in JavaScript, ingebouwd in dat is een
heleboel nuttige functionaliteit.

514
00:22:25,250 --> 00:22:31,770
Onder de bruikbare functionaliteit is
mogelijkheid om op elk afstammeling knooppunt.

515
00:22:31,770 --> 00:22:37,760
Die vierkant of rechthoekig of ellipsen
slechts knooppunten in een boom, zo te zeggen.

516
00:22:37,760 --> 00:22:41,850
>> Dus het blijkt dat ingebouwd in
JavaScript's document object

517
00:22:41,850 --> 00:22:47,300
is een functie, ook wel bekend als
methode, dat heet getElementById.

518
00:22:47,300 --> 00:22:50,410
De syntaxis voor het bellen
een functie in JavaScript

519
00:22:50,410 --> 00:22:55,220
dat is de binnenkant van een object of een
variabele is alleen met de dot-notatie.

520
00:22:55,220 --> 00:22:57,950
En we zagen dit in C
wat struct syntax.

521
00:22:57,950 --> 00:23:03,530
Je ziet dit in PSET zeven, soort,
soort, als je ziet CS50 :: query.

522
00:23:03,530 --> 00:23:08,070
De dikke darm dikke darm in PHP is een ander
manier van bellen een functie die is

523
00:23:08,070 --> 00:23:09,260
binnenzijde van een voorwerp.

524
00:23:09,260 --> 00:23:11,960
>> Maar voor nu in JavaScript,
het is gewoon een punt.

525
00:23:11,960 --> 00:23:14,170
En dus is deze functie,
mooi genoeg, soort

526
00:23:14,170 --> 00:23:16,810
zegt wat het does-- krijgt element door ID.

527
00:23:16,810 --> 00:23:20,280
Een element is gewoon een andere naam
voor een tag of knooppunt in de DOM.

528
00:23:20,280 --> 00:23:26,900
En dus ga element door ID "naam"
betekent dit-- hier is mijn HTML.

529
00:23:26,900 --> 00:23:31,910
En op basis van deze HTML Wat
knoop of wat HTML tag ben ik

530
00:23:31,910 --> 00:23:35,097
gaat programmatisch overhandigd worden
door te bellen naar document.getElementById?

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

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

533
00:23:38,500 --> 00:23:42,670
Ik ga naar de input te krijgen
element er wiens ID is "naam."

534
00:23:42,670 --> 00:23:45,140
Zo speciaal, kunt u
denken van deze functie,

535
00:23:45,140 --> 00:23:49,560
getElementById, als een manier geven
terug een pointer naar die specifieke knooppunt

536
00:23:49,560 --> 00:23:50,060
in de boom.

537
00:23:50,060 --> 00:23:51,980
We hebben dit niet getekend
boom, maar het is een manier

538
00:23:51,980 --> 00:23:54,900
het krijgen van toegang tot die
rechthoek of dat rechthoek

539
00:23:54,900 --> 00:23:58,090
door het uniek identificeren van het via zijn ID.

540
00:23:58,090 --> 00:23:59,760
>> Nu, waarom is dit nuttig?

541
00:23:59,760 --> 00:24:01,510
Nou, het blijkt
dat je ooit hebt gekregen

542
00:24:01,510 --> 00:24:07,220
dat knooppunt, dat de rechthoek van de
beeld, dat knooppunt binnenkant van het,

543
00:24:07,220 --> 00:24:10,660
op zijn beurt, heeft een hele hoop
properties-- key-waarde paren

544
00:24:10,660 --> 00:24:13,480
of gegevens, waarvan één waarde genoemd.

545
00:24:13,480 --> 00:24:16,500
Dus letterlijk, het is een soort van een
mondvol om de hele zaak uit te leggen.

546
00:24:16,500 --> 00:24:19,370
Maar aan het eind van de dag,
dit alles doet is geeft u

547
00:24:19,370 --> 00:24:23,070
een tekenreeks die de gebruiker getypt
in deze hiërarchische manier.

548
00:24:23,070 --> 00:24:24,820
Maar ik hou niet van een
paar van deze dingen.

549
00:24:24,820 --> 00:24:27,590
Of liever gezegd, er is wat nieuwsgierigheid nog steeds.

550
00:24:27,590 --> 00:24:28,870
Dat alles leek te werken.

551
00:24:28,870 --> 00:24:33,420
Waarom denk je dat ik terug
valse na het aanroepen te begroeten?

552
00:24:33,420 --> 00:24:35,910
Dit ziet er een beetje lelijk, dat
Ik heb er twee verklaringen

553
00:24:35,910 --> 00:24:38,730
gescheiden door puntkomma's.

554
00:24:38,730 --> 00:24:39,310
Doe een gok.

555
00:24:39,310 --> 00:24:44,390
Als ik verwijderd return false, wat
zou kunnen gebeuren, maar instinctief?

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

557
00:24:46,990 --> 00:24:49,460
Sorry, zeggen weer?

558
00:24:49,460 --> 00:24:50,530
>> Open een bos van Windows.

559
00:24:50,530 --> 00:24:52,780
Dus potentieel misschien iets
als dat zou gebeuren.

560
00:24:52,780 --> 00:24:54,422
Wat anders?

561
00:24:54,422 --> 00:24:55,630
Kan een verzoek indienen, waar?

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

563
00:24:59,109 --> 00:25:00,510
Naar dezelfde pagina.

564
00:25:00,510 --> 00:25:03,110
Dus, in feite, dat is dat
hoe dichter antwoord hier,

565
00:25:03,110 --> 00:25:05,890
hoewel, in tegenstelling
in het verleden, ik heb niet

566
00:25:05,890 --> 00:25:09,300
gespecificeerd het attribuut actie,
die normaal we moeten doen.

567
00:25:09,300 --> 00:25:11,780
Blijkt dat er een standaard.
Als u geen actie te specificeren,

568
00:25:11,780 --> 00:25:15,370
het is als zeggen citaat, unquote
of de naam van het bestand zelf,

569
00:25:15,370 --> 00:25:17,850
die in dit geval zou
zijn als dom-0.html.

570
00:25:17,850 --> 00:25:20,420
Het is gewoon een soort van afgeleid,
of liever geïmpliceerd.

571
00:25:20,420 --> 00:25:22,420
>> En dus als ik dit niet doen, laten we opmerken.

572
00:25:22,420 --> 00:25:23,230
Laat me dit op te slaan.

573
00:25:23,230 --> 00:25:25,270
En ik heb terugkeer valse verwijderd.

574
00:25:25,270 --> 00:25:27,759
Laat me terug naar deze
voorbeeld en kracht herladen.

575
00:25:27,759 --> 00:25:30,800
En je zou mij hebben zien suggereren
dit op CS50 Bespreek een paar keer.

576
00:25:30,800 --> 00:25:34,560
Als er iets ooit handelen funky en de
browser is niet gedraagt ​​zoals u verwacht,

577
00:25:34,560 --> 00:25:37,410
vaak je wilt houden
Shift en klik op Reload.

578
00:25:37,410 --> 00:25:41,480
Dat zal elk bestand te dwingen om te herladen
en lokale cache van de browser niet te gebruiken

579
00:25:41,480 --> 00:25:47,032
of kopiëren zodat nu, laat me gaan en
open mijn inspecteur, het tabblad Netwerk.

580
00:25:47,032 --> 00:25:48,740
Ik ga om te klikken
Log behouden omdat ik

581
00:25:48,740 --> 00:25:51,660
wil het niet om de rijen te schrappen
zodra ik elders weggevoerd.

582
00:25:51,660 --> 00:25:54,650
>> Laat me hier ga je gang en
type Andi, klik op Verzenden.

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

584
00:25:55,150 --> 00:25:56,480
Dat lijkt zoals verwacht.

585
00:25:56,480 --> 00:25:57,440
Het zegt "hallo, Andi."

586
00:25:57,440 --> 00:25:59,420
Laat me klik op OK.

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

588
00:26:00,610 --> 00:26:05,100
Merk op dat de pagina veranderd,
zij het in de oorspronkelijke pagina.

589
00:26:05,100 --> 00:26:06,770
Let op de URL soort veranderde.

590
00:26:06,770 --> 00:26:09,430
Het voegde een vraagteken,
die meestal een indicator

591
00:26:09,430 --> 00:26:11,260
die we hebben geprobeerd om iets in te dienen.

592
00:26:11,260 --> 00:26:13,570
En vervolgens op de bodem,
nog nadrukkelijker,

593
00:26:13,570 --> 00:26:17,570
Hier is de feitelijke HTTP verzoek
die een respons van 200 gekregen dat

594
00:26:17,570 --> 00:26:18,490
bracht me hier terug.

595
00:26:18,490 --> 00:26:20,250
>> Dus dit is niet wat
we willen, toch doen?

596
00:26:20,250 --> 00:26:22,166
Omdat ik het niet wil
herlaad de hele pagina.

597
00:26:22,166 --> 00:26:24,970
Ik in plaats daarvan wilde terugkeren
vals om zo kortsluiting

598
00:26:24,970 --> 00:26:28,840
standaard gedrag van de browser, die
was, natuurlijk, om de pagina te dienen.

599
00:26:28,840 --> 00:26:31,700
>> Dus laten we een kijkje nemen op een
marginaal beter voorbeeld.

600
00:26:31,700 --> 00:26:33,920
Dit is dom versie one.

601
00:26:33,920 --> 00:26:36,680
En let op de volgende.

602
00:26:36,680 --> 00:26:39,150
Het is OK als je niet Grok
alle regels code.

603
00:26:39,150 --> 00:26:41,750
Maar wat is fundamenteel verschillend
over deze implementatie?

604
00:26:41,750 --> 00:26:44,690
Ik zal bepalen het zich gedraagt ​​de
Hetzelfde, doet hetzelfde.

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

606
00:26:49,320 --> 00:26:51,570
Wat heb ik natuurlijk anders gedaan?

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

608
00:26:52,266 --> 00:26:53,182
>> PUBLIEK: [onverstaanbaar].

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
Zodat de functie wordt gedefinieerd differently--
met andere woorden, afwezig in de vorm

612
00:27:08,620 --> 00:27:13,180
daar op lijn 7-- of
plaats, lijn 8-- niet meer

613
00:27:13,180 --> 00:27:15,070
heb ik de onsubmit attribuut.

614
00:27:15,070 --> 00:27:16,750
In het vorige voorbeeld, had ik dit.

615
00:27:16,750 --> 00:27:18,530
En dan heb ik letterlijk schreef hier mijn code.

616
00:27:18,530 --> 00:27:20,210
En toen zei ik return false.

617
00:27:20,210 --> 00:27:22,180
En als het niet wrijven
je nog de verkeerde manier,

618
00:27:22,180 --> 00:27:26,140
Moet beginnen voorzover
als, net als in HTML,

619
00:27:26,140 --> 00:27:29,530
toen we begonnen om samen te mengen
met CSS in stijl attributen,

620
00:27:29,530 --> 00:27:32,890
is net begonnen om een ​​beetje te krijgen
rommelig of voel me een beetje verkeerd.

621
00:27:32,890 --> 00:27:35,020
>> Evenzo hier als
u start met HTML,

622
00:27:35,020 --> 00:27:37,419
en dan ben je automatisch
plop sommige JavaScript-code

623
00:27:37,419 --> 00:27:40,460
in het midden van de string, het is
niet van plan zeer onderhoudbaar zijn.

624
00:27:40,460 --> 00:27:40,630
Rechts?

625
00:27:40,630 --> 00:27:43,690
Het is zelfs niet duidelijk op het eerste
de plaats waar de JavaScript-code.

626
00:27:43,690 --> 00:27:46,590
Dus het zou heel mooi zijn als
een principe van beter ontwerp,

627
00:27:46,590 --> 00:27:50,500
laten we volledig houden onze HTML
scheiden van onze JavaScript.

628
00:27:50,500 --> 00:27:53,150
>> Dus om dat te doen, wat we hebben
hier gedaan is de following--

629
00:27:53,150 --> 00:27:56,790
we gewoon gebruik maken van HTML voor slechts markup.

630
00:27:56,790 --> 00:28:00,730
Dus in één versie van dit alles
Ik heb een vorm met een unieke ID.

631
00:28:00,730 --> 00:28:04,630
En dan naar beneden hier, ik ben te profiteren
van een speciaal kenmerk van JavaScript

632
00:28:04,630 --> 00:28:08,480
waarbij ik kan hebben wat
riep een anonieme functie.

633
00:28:08,480 --> 00:28:14,150
Dus het blijkt dat als ik bel
document.getElementById van 'demo'

634
00:28:14,150 --> 00:28:18,890
dat is als het geven van me een verwijzing naar
dit knooppunt in mijn boom, de vorm element,

635
00:28:18,890 --> 00:28:20,100
bij wijze van spreken.

636
00:28:20,100 --> 00:28:22,220
>> Nu, ik weet alleen van
wetende een beetje HTML

637
00:28:22,220 --> 00:28:26,330
nu zijn we na het lezen van een aantal online
referentie, dat een vorm element ondersteunt

638
00:28:26,330 --> 00:28:29,950
een hele hoop van het evenement listeners-- in
Met andere woorden, de waslijst van het evenement

639
00:28:29,950 --> 00:28:31,700
luisteraars dat we een ogenblik geleden zag.

640
00:28:31,700 --> 00:28:35,950
Ik weet uit het lezen van de documentatie
dat onsubmit een geldig evenement

641
00:28:35,950 --> 00:28:38,520
luisteraar voor een formulier element.

642
00:28:38,520 --> 00:28:41,480
>> Dus zodra ik weet dat,
het is veilig voor mij om te doen

643
00:28:41,480 --> 00:28:45,390
de following-- dat knooppunt krijgen
van de boom, de vorm element,

644
00:28:45,390 --> 00:28:48,070
Toegang hebben tot de zogenaamde
onsubmit eigendom.

645
00:28:48,070 --> 00:28:49,880
Zodat de stip betekent alleen
Dit is een eigenschap,

646
00:28:49,880 --> 00:28:52,180
als een bijzondere waarde erin.

647
00:28:52,180 --> 00:28:55,590
En welke gegevens het type ben ik
toewijzen blijkbaar

648
00:28:55,590 --> 00:28:58,900
om onSubmit, dat is
effectief een variabele binnen

649
00:28:58,900 --> 00:29:01,010
van dat knooppunt in de boom?

650
00:29:01,010 --> 00:29:04,100
Het is een veld binnenin die struct.

651
00:29:04,100 --> 00:29:05,810
Wat is het type data?

652
00:29:05,810 --> 00:29:07,030
>> Een functie, ja.

653
00:29:07,030 --> 00:29:08,607
Dus het blijkt dat PHP heeft dit.

654
00:29:08,607 --> 00:29:10,440
En hoewel we
heb je niet vertellen,

655
00:29:10,440 --> 00:29:16,240
C heeft ook functieverwijzingen, de
vermogen om te passeren en toe te wijzen functies

656
00:29:16,240 --> 00:29:18,330
als waarden zelf variabelen.

657
00:29:18,330 --> 00:29:20,280
En we gaan niet
weer terugvallen in C.

658
00:29:20,280 --> 00:29:23,250
Maar voor nu, blijkt dat
aan de rechterkant hier

659
00:29:23,250 --> 00:29:26,260
hoewel het ziet er een beetje
funky, dit betekent, he browser,

660
00:29:26,260 --> 00:29:27,550
geef me een functie.

661
00:29:27,550 --> 00:29:30,560
Ik ga niet eens de moeite te geven
het een naam, want ik ben letterlijk

662
00:29:30,560 --> 00:29:34,450
gaan toewijzen laten we noemen het
het adres van deze functie

663
00:29:34,450 --> 00:29:35,994
onmiddellijk onsubmit.

664
00:29:35,994 --> 00:29:39,160
Met andere woorden, browser, hoeft u niet
om te weten wat deze functie heet.

665
00:29:39,160 --> 00:29:41,890
Je moet alleen weten
waar het in het geheugen.

666
00:29:41,890 --> 00:29:44,210
En dus volstaat gewoon om
hebben een isgelijkteken er

667
00:29:44,210 --> 00:29:48,240
en niet te storen benoemen deze, zoals
foo of begroeten of een ander woord.

668
00:29:48,240 --> 00:29:50,150
En nu dit is slechts een stilistische ding.

669
00:29:50,150 --> 00:29:53,100
Ik kon dit accolade verplaatsen
op the-- sorry-- volgende regel

670
00:29:53,100 --> 00:29:54,750
zoals wij gewoonlijk doen CS50.

671
00:29:54,750 --> 00:29:57,550
Maar in JavaScript, is het
eigenlijk stilistisch gemeenschappelijke

672
00:29:57,550 --> 00:30:00,450
gewoon blijven de accolade, de
eerste, op die eerste regel.

673
00:30:00,450 --> 00:30:02,620
>> Maar hierna, er is
niets interessants.

674
00:30:02,620 --> 00:30:05,830
Dat geopend accolade net
markeert het begin van mijn functie.

675
00:30:05,830 --> 00:30:09,320
De functie is nu
identiek, behalve dat ik heb

676
00:30:09,320 --> 00:30:11,452
inclusief de terugkeer valse
in deze functie.

677
00:30:11,452 --> 00:30:13,160
Want het blijkt out--
en je zou alleen

678
00:30:13,160 --> 00:30:14,980
weten dit uit te lezen
de documentation--

679
00:30:14,980 --> 00:30:19,740
dat als de functie die u toewijst
aan de onsubmit handler false retourneert,

680
00:30:19,740 --> 00:30:23,420
de browser gewoon weet en gaat ermee akkoord
het formulier niet te onderwerpen aan een server.

681
00:30:23,420 --> 00:30:27,210
Als het waar terugkeert, zal het indienen
het naar een server om redenen die we zullen zien

682
00:30:27,210 --> 00:30:28,700
zijn nuttig in slechts een moment.

683
00:30:28,700 --> 00:30:31,000
>> En dan de puntkomma na
de accolade er gewoon

684
00:30:31,000 --> 00:30:32,541
betekent dat ik ben klaar met het definiëren van de functie.

685
00:30:32,541 --> 00:30:36,600
Je weet wat je moet zo snel bellen
als je hoort een inzending.

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

687
00:30:37,100 --> 00:30:40,650
Dit is nog steeds aantoonbaar soort lelijk.

688
00:30:40,650 --> 00:30:42,190
Dus wat kunnen we nog meer doen?

689
00:30:42,190 --> 00:30:45,000
>> Nou, het blijkt dan in
tweede versie, die de last--

690
00:30:45,000 --> 00:30:46,780
en we gewoon blik op dit.

691
00:30:46,780 --> 00:30:49,850
Aan het risico dat
Het lelijker, het blijkt

692
00:30:49,850 --> 00:30:52,160
dat er een bibliotheek
de wereld genaamd jQuery.

693
00:30:52,160 --> 00:30:54,900
En jQuery is een super
populaire JavaScript-bibliotheek

694
00:30:54,900 --> 00:30:57,930
dat is zo populair dat de meeste
elke JavaScript-- het is niet

695
00:30:57,930 --> 00:31:00,540
ongewoon voor mensen te verwarren
jQuery JavaScript.

696
00:31:00,540 --> 00:31:01,070
Waarom?

697
00:31:01,070 --> 00:31:04,990
JavaScript zelf heeft zeer
breedsprakig manieren om things--

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

699
00:31:07,820 --> 00:31:10,510
Je uiteindelijk met zeer
lange regels code.

700
00:31:10,510 --> 00:31:15,550
>> Dus een collega genaamd John Resid,
die eigenlijk werkt voor een startup

701
00:31:15,550 --> 00:31:18,630
up van deze dagen, kwam
met deze bibliotheek jaar

702
00:31:18,630 --> 00:31:22,070
geleden dat veel mensen hebben bijgedragen
jQuery geroepen dat verandert

703
00:31:22,070 --> 00:31:23,449
de syntax op de volgende wijze.

704
00:31:23,449 --> 00:31:25,740
En net zo heb je dit gezien,
want je zult altijd

705
00:31:25,740 --> 00:31:28,140
zien dit als een te doen
webgebaseerde afstudeerproject,

706
00:31:28,140 --> 00:31:33,270
Dit zou gelijk manier worden
uitvoering van die dezelfde functie gebruiken

707
00:31:33,270 --> 00:31:34,630
deze bijzondere bibliotheek.

708
00:31:34,630 --> 00:31:36,680
>> Nu, in plaats van plagen
het uit elkaar in zijn geheel,

709
00:31:36,680 --> 00:31:38,520
Laten we eens kijken naar enkele patronen.

710
00:31:38,520 --> 00:31:44,850
Deze syntaxis lijkt te hebben
hoeveel anonieme functies

711
00:31:44,850 --> 00:31:49,584
of naamloze functies
of AKA lambda functies?

712
00:31:49,584 --> 00:31:50,190
Twee, toch?

713
00:31:50,190 --> 00:31:52,690
En u weet dat, zelfs als
je bent niet super comfortabel met deze,

714
00:31:52,690 --> 00:31:55,780
alleen door het feit dat het
zegt function () twee keer.

715
00:31:55,780 --> 00:31:58,172
>> En het blijkt dat
wat deze code is doing--

716
00:31:58,172 --> 00:32:01,255
en we zullen verwijzen naar online referenties,
uiteindelijk, voor de hulp bij deze.

717
00:32:01,255 --> 00:32:04,480
Dit betekent gewoon dat wanneer
het document klaar is,

718
00:32:04,480 --> 00:32:07,490
ga je gang en registreer
de volgende functie

719
00:32:07,490 --> 00:32:12,064
als dienen handler voor HTML
element waarvan uniek idee is demo.

720
00:32:12,064 --> 00:32:14,480
En dan, als dat gebeurt,
noemen deze twee regels code.

721
00:32:14,480 --> 00:32:18,677
En dit is, tragisch, een meer
uitgebreide manier om te zeggen return false.

722
00:32:18,677 --> 00:32:21,510
En we dit alleen maar omdat
je zult zien code zoals deze online.

723
00:32:21,510 --> 00:32:23,140
En het is niets te worden afgeschrikt door.

724
00:32:23,140 --> 00:32:26,057
Maar eerder, in gedachten houden dat wat
gaat vaak om in JavaScript

725
00:32:26,057 --> 00:32:26,765
is dit paradigma.

726
00:32:26,765 --> 00:32:29,510
En dat is dus de reden waarom laten we het voor nu.

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

728
00:32:30,010 --> 00:32:32,730
Dus zonder al te wonen
veel op dat de syntaxis,

729
00:32:32,730 --> 00:32:37,800
zijn er vragen over
deze voorbeelden of ideeën tot nu toe?

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

731
00:32:38,300 --> 00:32:40,220
Dus laten we gebruik dit voor iets nuttigs.

732
00:32:40,220 --> 00:32:47,070
Het maken van een webpagina die gewoon zegt hallo,
zo en zo is niet zo interessant,

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

734
00:32:47,830 --> 00:32:51,038
Dit gaat niet om mooi te zijn,
maar het gaat om iets nuttigs te doen.

735
00:32:51,038 --> 00:32:56,350
Laat me terug naar mijn directory
hier en open te stellen, zeggen, vorm-0.html.

736
00:32:56,350 --> 00:32:59,320
>> Dus veronderstel dat dit is de eerstejaars
intramurale sport registratie pagina

737
00:32:59,320 --> 00:33:01,780
zonder CSS of enig gevoel voor design.

738
00:33:01,780 --> 00:33:05,404
En ik wil om vooruit te gaan en
registreer hier met een wachtwoord.

739
00:33:05,404 --> 00:33:08,320
Ik ga akkoord met de voorwaarden
en de voorwaarden en klik op Registreren.

740
00:33:08,320 --> 00:33:11,700
En nu is de website zegt: "U bent
geregistreerd! (Nou niet echt.)"

741
00:33:11,700 --> 00:33:15,070
Dat lijkt het werkte, maar
laat me gaan en dwingen reload.

742
00:33:15,070 --> 00:33:18,720
>> En laat ik zeggen, nee, je niet
moet mijn echte e-mailadres.

743
00:33:18,720 --> 00:33:21,820
Of misschien zullen we gewoon zeggen mail in.

744
00:33:21,820 --> 00:33:25,080
Wachtwoord zal zijn, zoals, 12345.

745
00:33:25,080 --> 00:33:28,810
En dan, net omdat ik
een idioot, nu is het 123456789.

746
00:33:28,810 --> 00:33:31,150
En ik ben niet van plan om de doos te controleren.

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

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

749
00:33:32,350 --> 00:33:34,920
Dus er is een mooie kans
voor verbetering.

750
00:33:34,920 --> 00:33:39,070
En weet je, of zal in PSET zien
zeven, dat je code-- kan schrijven

751
00:33:39,070 --> 00:33:41,890
en je moet schrijven
code in PHP-- te verdedigen

752
00:33:41,890 --> 00:33:45,780
tegen dit soort gebruiker
fouten omdat de gebruiker duidelijk

753
00:33:45,780 --> 00:33:46,790
niet heeft meegewerkt.

754
00:33:46,790 --> 00:33:49,680
En hij of zij heeft je niet gezien alle
waarden gevonden of in de vorm

755
00:33:49,680 --> 00:33:50,630
dat je ze wilde.

756
00:33:50,630 --> 00:33:53,250
Dus je zult zien in PSET zeven die
we kunnen zeker een aantal

757
00:33:53,250 --> 00:33:55,680
als de omstandigheden die zeggen
Als het e-mailadres

758
00:33:55,680 --> 00:33:59,450
is geen username@something.edu,
we konden gewoon

759
00:33:59,450 --> 00:34:02,575
sorry zeggen en excuses aanbieden aan de gebruiker
veel, zoals je misschien in PSET zeven.

760
00:34:02,575 --> 00:34:05,700
Of als ze niet hebben gecontroleerd of doos,
blijkt in PHP, kunt u detecteren dat,

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

762
00:34:06,200 --> 00:34:09,389
En zeker als de wachtwoorden
niet overeenkomen als in register.php

763
00:34:09,389 --> 00:34:11,521
voor PSET zeven, kunt u detecteren dat.

764
00:34:11,521 --> 00:34:13,770
Maar dat is een pijn in de
hals die nu vragen ze

765
00:34:13,770 --> 00:34:15,510
ons naar de hele weg naar de server.

766
00:34:15,510 --> 00:34:17,053
De gebruiker wordt geïnformeerd over de fout.

767
00:34:17,053 --> 00:34:19,219
En ten minste, tenzij u gebruik maken van
sommige liefhebber technieken,

768
00:34:19,219 --> 00:34:20,929
nu moeten ze op de pijl terug.

769
00:34:20,929 --> 00:34:23,300
Zou het niet mooi zijn, als
veel websites vandaag de dag,

770
00:34:23,300 --> 00:34:26,190
Als u meer directe gehad
feedback, direct?

771
00:34:26,190 --> 00:34:31,389
>> Met andere woorden, laat me gaan naar versie
één, die zal niet mooier zijn.

772
00:34:31,389 --> 00:34:33,469
Maar het heeft wel deze functie.

773
00:34:33,469 --> 00:34:39,590
Malan, 12345, 123456789, niet
gaat de doos te controleren, Register.

774
00:34:39,590 --> 00:34:41,330
Wachtwoorden komen niet overeen.

775
00:34:41,330 --> 00:34:44,459
Dus hoewel deze pop-up is ugly--
we kunnen dit uiteindelijk vervangen

776
00:34:44,459 --> 00:34:47,000
met iets als Bootstrap,
waar je ziet in PSET zeven

777
00:34:47,000 --> 00:34:50,239
is een zeer populaire library-- ik deed
detecteren dat de wachtwoorden komen niet overeen.

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

779
00:34:50,739 --> 00:34:52,530
Nou, laat me dat vast te stellen als de gebruiker.

780
00:34:52,530 --> 00:34:55,460
Laat me gaan en zeggen: 12.345, 12.345.

781
00:34:55,460 --> 00:34:57,780
Nog steeds niet het controleren van de overeenkomst.

782
00:34:57,780 --> 00:35:00,210
U moet akkoord gaan met de
termen en voorwaarden.

783
00:35:00,210 --> 00:35:01,760
Dus waarom?

784
00:35:01,760 --> 00:35:04,100
>> Als we al hebben geponeerd
dat er een manier is,

785
00:35:04,100 --> 00:35:07,260
en we hebben u nodig
PSET zeven tot fouten op te sporen

786
00:35:07,260 --> 00:35:09,780
aandoeningen zoals deze
server-side, waarom zou ik

787
00:35:09,780 --> 00:35:13,940
moeite dit ook doen in JavaScript?

788
00:35:13,940 --> 00:35:15,850
Wat is een argument in
aangenomen waarbij wat

789
00:35:15,850 --> 00:35:18,760
je gaat zien als some-- bent
er is extra complexiteit.

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

791
00:35:23,610 --> 00:35:25,930
>> Misschien is er geen ondersteboven.

792
00:35:25,930 --> 00:35:26,924
Wat zou het zijn?

793
00:35:26,924 --> 00:35:27,840
PUBLIEK: [onverstaanbaar].

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

795
00:35:31,132 --> 00:35:32,340
DAVID MALAN: Oh, interessant.

796
00:35:32,340 --> 00:35:33,530
Potentiële exploits.

797
00:35:33,530 --> 00:35:37,540
Zo zeker van, als je niet omgaan
foutieve invoer van de gebruiker die grote,

798
00:35:37,540 --> 00:35:40,170
misschien is het des te beter als het
zelfs niet de server te bereiken.

799
00:35:40,170 --> 00:35:42,160
Ik zou er terug duwen en
zeg, moet je waarschijnlijk

800
00:35:42,160 --> 00:35:43,284
fix deze beide problemen.

801
00:35:43,284 --> 00:35:44,140
Maar dat is eerlijk.

802
00:35:44,140 --> 00:35:44,710
Wat anders?

803
00:35:44,710 --> 00:35:45,626
>> PUBLIEK: [onverstaanbaar].

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
Deze code, zoals we al eerder zei, is
geïnterpreteerd aan de client-side.

807
00:35:51,680 --> 00:35:53,846
Het heeft geen last van de server,
wat betekent dat niet

808
00:35:53,846 --> 00:35:55,930
invloed belasting of de capaciteit van de server.

809
00:35:55,930 --> 00:35:59,840
En nu, voor kleine oude mij,
dit heeft geen betekenisvolle invloed

810
00:35:59,840 --> 00:36:01,970
want ik heb een gebruiker nu.

811
00:36:01,970 --> 00:36:04,010
>> Maar als je elke
website van behoorlijke omvang,

812
00:36:04,010 --> 00:36:07,400
vooral de grootste, zoals Facebook,
hoe meer je kunt de mensen af ​​te houden

813
00:36:07,400 --> 00:36:09,927
van uw server beter
omdat een server, natuurlijk

814
00:36:09,927 --> 00:36:12,510
slechts een beperkte hoeveelheid RAM,
een eindig aantal gigahertz,

815
00:36:12,510 --> 00:36:16,340
een eindig aantal dingen
het kan doen per tijdseenheid.

816
00:36:16,340 --> 00:36:19,170
Dus als er meer mensen in
de wereld raken van je server,

817
00:36:19,170 --> 00:36:21,750
per ongeluk in te loggen
verkeerd, net zo goed als je

818
00:36:21,750 --> 00:36:23,254
kan die belasting af te houden van uw server.

819
00:36:23,254 --> 00:36:25,420
Plus, vooral op een mobiel
device-- Als je ooit hebt

820
00:36:25,420 --> 00:36:29,190
loggen in my.harvard of
Yale netid of iets dergelijks,

821
00:36:29,190 --> 00:36:32,330
er is dit de latentie met een heleboel
websites als die waarbij het duurt,

822
00:36:32,330 --> 00:36:34,110
zoals, een verdomd seconde of twee soms.

823
00:36:34,110 --> 00:36:37,979
En dan, mijn God, als je verkeerd typt,
dan moet je terug te slaan en opnieuw het.

824
00:36:37,979 --> 00:36:40,520
Dus er is vertraging, vooral
op tragere netwerkverbindingen.

825
00:36:40,520 --> 00:36:43,030
Maar JavaScript, want
het draait op de client

826
00:36:43,030 --> 00:36:46,720
en hoeft niet om heen en weer te gaan
over een mogelijk langzame internet

827
00:36:46,720 --> 00:36:49,780
aansluiting kunt u krijgen
bijna onmiddellijk feedback.

828
00:36:49,780 --> 00:36:50,760
>> Dus laten we eens kijken naar dit.

829
00:36:50,760 --> 00:36:54,280
Laat me openstellen vorm-0 en
kijken naar de HTML hier.

830
00:36:54,280 --> 00:36:56,040
En laten we zien wat er gaande is.

831
00:36:56,040 --> 00:36:59,460
Dit is een vorm waarvan de
actie is register.php.

832
00:36:59,460 --> 00:37:01,530
Ik ben gewoon met behulp van krijgen, zodat
dat ik de URL kon zien.

833
00:37:01,530 --> 00:37:05,030
Maar voor wachtwoorden, zouden we zeker willen
om dit te veranderen om te posten in de werkelijkheid.

834
00:37:05,030 --> 00:37:06,910
Hier is een invoerveld van het type tekst.

835
00:37:06,910 --> 00:37:09,050
Hier is een andere ingang
veld van het type wachtwoord.

836
00:37:09,050 --> 00:37:13,150
Hier is, als je nog nooit hebt gezien,
een ingang van het type checkbox.

837
00:37:13,150 --> 00:37:15,250
>> Maar er is geen JavaScript
hier dan ook.

838
00:37:15,250 --> 00:37:18,170
Dit is gewoon HTML die
gaat register.php.

839
00:37:18,170 --> 00:37:21,020
Maar in één versie, waar ik
begon aan die pop-ups te krijgen,

840
00:37:21,020 --> 00:37:23,010
laten we zien wat er werkelijk gebeurt hier.

841
00:37:23,010 --> 00:37:26,757
In een uitvoering, welke
Ik ga see-- I

842
00:37:26,757 --> 00:37:29,340
dacht dat ik kon genoeg kraam
met genoeg woorden, maar ik liep.

843
00:37:29,340 --> 00:37:35,180

844
00:37:35,180 --> 00:37:38,590
>> In versie een-- daar gaan we.

845
00:37:38,590 --> 00:37:43,180
In versie een, let op de following--
en het is niet de beste uitvoering,

846
00:37:43,180 --> 00:37:44,420
maar het is mijn eerste.

847
00:37:44,420 --> 00:37:47,680
Merk op dat onder de
vorm, ik heb een script tag.

848
00:37:47,680 --> 00:37:49,430
En een script-tag betekent,
hey, browser, hier

849
00:37:49,430 --> 00:37:52,340
komt een code in,
typisch, JavaScript.

850
00:37:52,340 --> 00:37:54,420
En nu, let op wat ik doe.

851
00:37:54,420 --> 00:37:59,070
Op line-- kan ik nauwelijks
lees het-- lijn 32, het zegt,

852
00:37:59,070 --> 00:38:01,420
var form-- dus geef me
een variabele genaamd vorm.

853
00:38:01,420 --> 00:38:05,049
En dan krijg document.getElementId
van "registratie."

854
00:38:05,049 --> 00:38:05,590
Wat is dat?

855
00:38:05,590 --> 00:38:07,290
Nou, laat me terug te spoelen hier.

856
00:38:07,290 --> 00:38:11,510
En let, ah, gaf ik het formulier element
een willekeurige maar beschrijvende idee

857
00:38:11,510 --> 00:38:13,050
van registratie.

858
00:38:13,050 --> 00:38:16,820
Dus dit geeft me een variabele die
kan ik dat knooppunt te grijpen,

859
00:38:16,820 --> 00:38:19,580
die rechthoek in de boom genoemd formulier.

860
00:38:19,580 --> 00:38:24,460
form.onsubmit middelen, hey browser,
registreert een gebeurtenislistener

861
00:38:24,460 --> 00:38:25,470
Op dit formulier.

862
00:38:25,470 --> 00:38:28,890
Met andere woorden, wanneer dit formulier
ingediend, voert u de volgende code.

863
00:38:28,890 --> 00:38:30,810
Het heeft geen naam omdat nodig
waarom heb je nodig om de naam te weten?

864
00:38:30,810 --> 00:38:32,880
Je moet alleen weten
wat uit te voeren, ergo

865
00:38:32,880 --> 00:38:35,610
het is een anonieme of een lambda-functie.

866
00:38:35,610 --> 00:38:37,632
En die functie is
al deze lijnen in.

867
00:38:37,632 --> 00:38:40,840
En nu, om eerlijk te zijn, ook al heb je
misschien niet ooit heb geschreven JavaScript

868
00:38:40,840 --> 00:38:44,200
voor, het is gewoon C en PHP logica.

869
00:38:44,200 --> 00:38:51,720
Als form.email.value == "" -
dus als het e-veld leeg,

870
00:38:51,720 --> 00:38:54,980
schreeuwen tegen de gebruiker met "Je moet
uw e-mailadres. "

871
00:38:54,980 --> 00:38:58,980
Anders als form.password.value
leeg schreeuwen tegen de gebruiker,

872
00:38:58,980 --> 00:39:00,400
"U moet uw wachtwoord op te geven."

873
00:39:00,400 --> 00:39:04,240
>> Interessanter is logisch,
Als form.password.value niet

874
00:39:04,240 --> 00:39:08,630
gelijke form.confirmation.value--
waar komt de bevestiging vandaan?

875
00:39:08,630 --> 00:39:09,470
Laat me terug te spoelen.

876
00:39:09,470 --> 00:39:12,870
Nou, ik noemde deze ingang
veld hier wachtwoord.

877
00:39:12,870 --> 00:39:15,180
En ik noemde dit hier bevestiging.

878
00:39:15,180 --> 00:39:17,850
Ik kon het hebben genoemd
wachtwoord twee of iets anders.

879
00:39:17,850 --> 00:39:20,560
Ik ben gewoon logisch controleren
dat beide hetzelfde zijn.

880
00:39:20,560 --> 00:39:25,760
Else-- blijkt dit is de heer Boole
again-- een Booleaanse waarde, het vakje.

881
00:39:25,760 --> 00:39:29,810
Dus als ik zeg, uitroep point--
zoniet form.agreement.checked,

882
00:39:29,810 --> 00:39:31,820
schreeuwen tegen de gebruiker ook.

883
00:39:31,820 --> 00:39:34,470
>> Zodat deze syntaxis u zult zien is
heel gebruikelijk in JavaScript,

884
00:39:34,470 --> 00:39:35,970
waar je dit gestippelde notatie.

885
00:39:35,970 --> 00:39:37,460
Je begint met een object hier.

886
00:39:37,460 --> 00:39:41,430
Je duikt in diepere naar een aan
een eigenschap als wachtwoord.

887
00:39:41,430 --> 00:39:43,280
En dan krijg je bij de werkelijke waarde.

888
00:39:43,280 --> 00:39:45,830
En nogmaals, hier is de input.

889
00:39:45,830 --> 00:39:47,310
Hier is de naam vergeten.

890
00:39:47,310 --> 00:39:50,860
En de waarde ervan is, ongeacht de
mens eigenlijk is getypt.

891
00:39:50,860 --> 00:39:53,610
>> Dus al deze
gevallen, keerde ik terug vals.

892
00:39:53,610 --> 00:39:55,800
Maar zo niet, ik return true.

893
00:39:55,800 --> 00:39:58,030
En nu zien we een
dwingende gebruik wanneer

894
00:39:58,030 --> 00:40:00,620
zou je valse terugkeren
stoppen met wat de gebruiker doet

895
00:40:00,620 --> 00:40:03,200
en maak hem of haar kiezen
opnieuw en opnieuw typen.

896
00:40:03,200 --> 00:40:05,870
Anders, we return true.

897
00:40:05,870 --> 00:40:08,585
>> En laat me introduceren een
andere variant van dit enkel

898
00:40:08,585 --> 00:40:13,140
enig begrip daarvan zaad.

899
00:40:13,140 --> 00:40:16,850
Nou, in versie 2 van deze, vorm-2--
Ik doe het met een golf van een hand.

900
00:40:16,850 --> 00:40:19,920
Dit is, voor degenen die nieuwsgierig,
de jQuery versie,

901
00:40:19,920 --> 00:40:23,330
degenen onder u die zou willen
ploeteren in die bepaalde bibliotheek.

902
00:40:23,330 --> 00:40:25,145
Maar laten we start-- en vragen?

903
00:40:25,145 --> 00:40:29,230
Laat me pauzeren moment, want
dat was snel en veel.

904
00:40:29,230 --> 00:40:32,610
>> Maar het leuke is dat alle
van de code is vrijwel hetzelfde.

905
00:40:32,610 --> 00:40:33,985
De nieuwe dingen is wat is het dom?

906
00:40:33,985 --> 00:40:35,115
Wat zijn deze rechthoeken?

907
00:40:35,115 --> 00:40:35,990
Wat zijn deze knooppunten?

908
00:40:35,990 --> 00:40:37,540
Wat is een anonieme functie?

909
00:40:37,540 --> 00:40:38,830
Wat is een event handler?

910
00:40:38,830 --> 00:40:43,480
Maar gelukkig, het grootste deel van dat is gewoon
volledige cirkel van, zeg, week nul.

911
00:40:43,480 --> 00:40:43,980
Prima.

912
00:40:43,980 --> 00:40:46,070
Dus iets iets meer interessant?

913
00:40:46,070 --> 00:40:49,340
Nou, in de eerste plaats, laat me gaan
vooruit en open Google Maps.

914
00:40:49,340 --> 00:40:53,360
En je zult merken dat het voor een
moment op de fractie van een seconde,

915
00:40:53,360 --> 00:40:55,930
let op wat er gebeurt als
Ik klik snel genoeg.

916
00:40:55,930 --> 00:40:59,720
En dit verband op Harvard is zo
snel dat je niet echt merken.

917
00:40:59,720 --> 00:41:04,469
Maar wat doe je voor soort soort te zien
als ik klik en sleep echt snel?

918
00:41:04,469 --> 00:41:07,010
Degenen onder u online kijken,
Als u deze vertragen tot 0,5x snelheid,

919
00:41:07,010 --> 00:41:09,640
u kunt dit beter te zien.

920
00:41:09,640 --> 00:41:13,550
>> Wat gebeurde er gewoon
voordat ik klikte en sleepte?

921
00:41:13,550 --> 00:41:15,900
Laat me proberen hier-- laat me doen
iets anders, zoals 90.210.

922
00:41:15,900 --> 00:41:17,550
Laten we gaan ver weg.

923
00:41:17,550 --> 00:41:19,000
Dat was echt snel, ook.

924
00:41:19,000 --> 00:41:22,460
Wat dacht je van Disney World?

925
00:41:22,460 --> 00:41:23,190
Daar gaan we.

926
00:41:23,190 --> 00:41:23,690
OK.

927
00:41:23,690 --> 00:41:26,030
Wat zag je voor een fractie van een seconde?

928
00:41:26,030 --> 00:41:27,200
Enkel, als, pleinen, toch?

929
00:41:27,200 --> 00:41:28,930
Placeholders voor tegels?

930
00:41:28,930 --> 00:41:30,270
>> Nou, wat is hier aan de hand?

931
00:41:30,270 --> 00:41:35,410
Google Maps is een mooi voorbeeld van
Deze technologie heet AJAX.

932
00:41:35,410 --> 00:41:38,510
En dit is waar we beginnen aan
gebruik maken van de JavaScript in een bijzonder

933
00:41:38,510 --> 00:41:39,277
verleidelijke manier.

934
00:41:39,277 --> 00:41:41,610
Terug in de dag, was er
deze website genaamd MapQuest.

935
00:41:41,610 --> 00:41:44,120
En ik zou hebben genomen een
screenshot van deze uit de jaren 1990,

936
00:41:44,120 --> 00:41:45,820
waar als je wilde
kijk hier op de kaart,

937
00:41:45,820 --> 00:41:48,590
zou je letterlijk klikt een pijl
op de top dat je liet zien

938
00:41:48,590 --> 00:41:49,870
een ander plein van de kaart.

939
00:41:49,870 --> 00:41:51,790
Als je wilde om naar links, u
klikte een pijl die je liet zien

940
00:41:51,790 --> 00:41:53,210
een ander plein van de kaart.

941
00:41:53,210 --> 00:41:54,840
En sommige websites nog steeds doen dit vandaag.

942
00:41:54,840 --> 00:41:57,820
Maar zelfs MapQuest heeft gekregen
beter, zoals Google Maps.

943
00:41:57,820 --> 00:42:01,880
>> In plaats daarvan, wat is beter deze
dagen is websites die AJAX gebruiken.

944
00:42:01,880 --> 00:42:04,510
AJAX-- wel bekend als
Asynchronous JavaScript en XML,

945
00:42:04,510 --> 00:42:08,370
dat is gewoon een mooie manier om te zeggen
een technologie of techniek die

946
00:42:08,370 --> 00:42:14,200
kan een browser met behulp van JavaScript
om extra HTTP-verzoeken maken

947
00:42:14,200 --> 00:42:16,390
nadat de pagina is geladen.

948
00:42:16,390 --> 00:42:17,479
Dus wat betekent dit?

949
00:42:17,479 --> 00:42:19,270
Nou, het zou aardig zijn
vervelende in Gmail

950
00:42:19,270 --> 00:42:21,103
Als elke keer dat je wilde
uw e-mail controleren,

951
00:42:21,103 --> 00:42:24,940
je letterlijk had geraakt Controle-R of
Command-R of klik op de knop Reload

952
00:42:24,940 --> 00:42:26,580
en de hele darn pagina zou herladen.

953
00:42:26,580 --> 00:42:26,800
Rechts?

954
00:42:26,800 --> 00:42:28,460
Het zou witte flits
waarschijnlijk voor de tweede.

955
00:42:28,460 --> 00:42:30,043
Je zou het dom voortgangsbalk zien.

956
00:42:30,043 --> 00:42:33,170
En gewoon om te zien als je nieuwe hebt
mail, de hele webpagina en de URL

957
00:42:33,170 --> 00:42:34,580
je op zou moeten herladen.

958
00:42:34,580 --> 00:42:35,960
>> Maar dat is niet wat er gebeurt in Gmail.

959
00:42:35,960 --> 00:42:36,459
Rechts?

960
00:42:36,459 --> 00:42:40,300
Wanneer u een nieuwe e-mail krijgen
Gmail, wat er gebeurt op het scherm?

961
00:42:40,300 --> 00:42:41,480
Het toont gewoon, toch?

962
00:42:41,480 --> 00:42:44,280
Het is gewoon magisch verschijnt
als een nieuwe rij in de tabel.

963
00:42:44,280 --> 00:42:47,030
Dat houdt in feite een
fatsoenlijk bedrag van complexiteit.

964
00:42:47,030 --> 00:42:51,892
In feite, als je van deze boom,
die ook al is eenvoudig hier

965
00:42:51,892 --> 00:42:54,100
Gmail-- en ik zou moeten kijken
bij de code om sure-- zijn

966
00:42:54,100 --> 00:42:58,710
heeft waarschijnlijk een HTML-tabel of misschien
een ongeordende lijst die het maakt

967
00:42:58,710 --> 00:43:01,060
elk van uw postvakken e-mails.

968
00:43:01,060 --> 00:43:04,050
>> En dus als je dit er voorstellen
is een boom in het geheugen als je

969
00:43:04,050 --> 00:43:09,050
het gebruik van Gmail dat lijkt soort soort
als dit, wanneer Google realiseert, ooh,

970
00:43:09,050 --> 00:43:12,770
heb je een nieuwe e-mail, is het niet
willen de hele boom te herbouwen.

971
00:43:12,770 --> 00:43:16,430
Veeleer wil het knooppunt vinden
de boom die uw inbox vertegenwoordigt

972
00:43:16,430 --> 00:43:18,580
en plaatst u gewoon een nieuw knooppunt.

973
00:43:18,580 --> 00:43:24,640
>> Dus zeer vergelijkbaar met PSET vijf, waar u
moest knooppunten invoegen in een hash-tabel,

974
00:43:24,640 --> 00:43:28,410
evenzo doet Google, via
JavaScript-code die het heeft geschreven,

975
00:43:28,410 --> 00:43:31,890
traverse deze boom, uitzoeken waar
is dat inbox deel van het venster,

976
00:43:31,890 --> 00:43:33,440
en plaats een nieuwe rij dan.

977
00:43:33,440 --> 00:43:37,460
En een nieuwe rij betekent gewoon één
of meer nieuwe knooppunten in een boom.

978
00:43:37,460 --> 00:43:41,340
>> En dus AJAX is deze techniek
dat zorgt voor precies dat.

979
00:43:41,340 --> 00:43:44,440
Zodra u een URL hebt bezocht,
hoe gek lang is,

980
00:43:44,440 --> 00:43:46,472
en zodra het heeft
geladen is, kunt u nog steeds

981
00:43:46,472 --> 00:43:48,430
grijpen meer gegevens van de
internet-- of het nu

982
00:43:48,430 --> 00:43:52,460
een e-mail of een tegel van een map--
pak het achter de schermen

983
00:43:52,460 --> 00:43:55,290
en steek deze vervolgens in de pagina
zodat de menselijke niet echt

984
00:43:55,290 --> 00:43:56,910
moeten wachten.

985
00:43:56,910 --> 00:43:58,980
>> Facebook Messenger werkt op dezelfde manier.

986
00:43:58,980 --> 00:44:01,562
Een aantal andere websites--
oh, eigenlijk, zelfs dit.

987
00:44:01,562 --> 00:44:04,270
Ik bedoel, dit is, eerlijk gezegd, een soort van
een vervelende beschikken over deze dagen.

988
00:44:04,270 --> 00:44:07,500
Als ik begin zoek naar deze cats--
is een soort van een afschuwelijke gebruikerservaring.

989
00:44:07,500 --> 00:44:08,990
Het begint gewoon op zoek naar mij.

990
00:44:08,990 --> 00:44:10,050
Tja, wat doet het?

991
00:44:10,050 --> 00:44:12,920
De URL is niet echt veranderd
sinds ik begon te typen.

992
00:44:12,920 --> 00:44:17,330
Maar wat is er over de
wire-- OK, hmm interessant.

993
00:44:17,330 --> 00:44:20,470
Wat is er in de hele
draad hier gewoon krijgt vreemder.

994
00:44:20,470 --> 00:44:21,090
>> OK.

995
00:44:21,090 --> 00:44:24,670
Dus laat me gaan en inspecteren
element en ga naar het tabblad Netwerk

996
00:44:24,670 --> 00:44:27,040
en probeer om dit te maken
technische en minder over katten.

997
00:44:27,040 --> 00:44:32,595
Als ik typ, letterlijk, katten
en-- wat er gebeurt

998
00:44:32,595 --> 00:44:37,710
per-- Ik ben niet van plan om te klikken dat.

999
00:44:37,710 --> 00:44:38,210
Prima.

1000
00:44:38,210 --> 00:44:44,280
Dus hier beneden, wat er gebeurt elke
tijd typ ik een personage, blijkbaar?

1001
00:44:44,280 --> 00:44:45,000
Zoals, lage niveau?

1002
00:44:45,000 --> 00:44:47,860
Wat gebeurt er met elk van deze
karakters ik typ op mijn toetsenbord?

1003
00:44:47,860 --> 00:44:48,359
Ja?

1004
00:44:48,359 --> 00:44:50,950
PUBLIEK: [onverstaanbaar].

1005
00:44:50,950 --> 00:44:52,340
>> DAVID MALAN: Precies.

1006
00:44:52,340 --> 00:44:55,600
Elk van deze tekens
naar Google, één tegelijk.

1007
00:44:55,600 --> 00:44:58,490
Zij bouwen van een string
op hun server die vertegenwoordigt

1008
00:44:58,490 --> 00:44:59,936
alles wat ik heb in tot nu toe hebt getypt.

1009
00:44:59,936 --> 00:45:01,810
En elke keer als ik typ
een ander karakter, ze

1010
00:45:01,810 --> 00:45:04,530
gebruiken hun geheime saus van een
zoekalgoritme en erachter te komen,

1011
00:45:04,530 --> 00:45:07,370
bedoelt hij deze kat pagina
of deze kat pagina of iets dergelijks?

1012
00:45:07,370 --> 00:45:10,620
Dus in zekere zin, het biedt me een
betere ervaring in dat ik niet eens

1013
00:45:10,620 --> 00:45:11,860
nodig om mijn gedachten af ​​te ronden.

1014
00:45:11,860 --> 00:45:14,440
En inderdaad, het is een nuttig
ding, autocomplete in het algemeen.

1015
00:45:14,440 --> 00:45:17,690
Als hun algoritmen goed genoeg
en als mijn zoekopdrachten zijn duidelijk genoeg,

1016
00:45:17,690 --> 00:45:19,300
Ik heb niet om het hele woord te typen.

1017
00:45:19,300 --> 00:45:22,110
Ze gaan me vertellen wat het
is Ik ben eigenlijk op zoek naar.

1018
00:45:22,110 --> 00:45:25,940
Dus wat Google noemt onmiddellijke
search wordt alleen met behulp van AJAX,

1019
00:45:25,940 --> 00:45:30,820
met behulp van code die hen in staat stelt te verzoeken
aanvullende content via een webbrowser

1020
00:45:30,820 --> 00:45:34,026
achter de schermen met deze
nieuwe taal, JavaScript.

1021
00:45:34,026 --> 00:45:35,400
Dus we hebben een paar minuten over.

1022
00:45:35,400 --> 00:45:37,710
En laat me roepen mijn maatje
Colton up op het podium,

1023
00:45:37,710 --> 00:45:40,090
aangezien het leek
bijzonder leuk vorige keer

1024
00:45:40,090 --> 00:45:42,290
een technologie te introduceren
dat sommigen van jullie

1025
00:45:42,290 --> 00:45:44,769
interesse hebben getoond
in voor de laatste projecten.

1026
00:45:44,769 --> 00:45:47,310
We dachten dat het leuk zou zijn om te brengen
een vrijwilliger, maar, vandaag

1027
00:45:47,310 --> 00:45:50,074
om te laten zien een aanvulling op
dit dat u-- toelaat ja,

1028
00:45:50,074 --> 00:45:50,990
Ik zag voor het eerst deze hand.

1029
00:45:50,990 --> 00:45:52,900
Kom op maximaal.

1030
00:45:52,900 --> 00:45:53,560
Heel goed gedaan.

1031
00:45:53,560 --> 00:45:55,035
Goed gedaan.

1032
00:45:55,035 --> 00:45:57,410
Ik ga dit project op
het scherm in slechts een moment.

1033
00:45:57,410 --> 00:45:58,150
Wat is je naam voor iedereen?

1034
00:45:58,150 --> 00:45:59,180
>> EFA: Ik ben 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: Leuk je te zien.

1040
00:46:01,250 --> 00:46:01,600
Prima.

1041
00:46:01,600 --> 00:46:02,590
Laat me dit klaar.

1042
00:46:02,590 --> 00:46:04,423
Kom langs op aan de
midden met Colton hier.

1043
00:46:04,423 --> 00:46:07,050
Wat Colton heeft in zijn handen
Vandaag is een afstandsbediening.

1044
00:46:07,050 --> 00:46:10,440
Dus in plaats van gewoon staan ​​in een
drie-dimensionale wereld rond te kijken

1045
00:46:10,440 --> 00:46:14,080
als Colton deed, nu Efa kan
eigenlijk rond te lopen door te gaan omhoog,

1046
00:46:14,080 --> 00:46:16,689
omlaag, naar links en rechts als een
Nintendo of Xbox controller.

1047
00:46:16,689 --> 00:46:18,230
EFA: Ik ga om te vallen buiten het podium.

1048
00:46:18,230 --> 00:46:20,500
DAVID MALAN: Ik zal
staan ​​ruwweg hier.

1049
00:46:20,500 --> 00:46:21,991
Dat gevaar.

1050
00:46:21,991 --> 00:46:22,490
OK.

1051
00:46:22,490 --> 00:46:25,690
Dus ga je gang en zet die op.

1052
00:46:25,690 --> 00:46:29,315
Laat me gaan en
schakelen naar het scherm hier.

1053
00:46:29,315 --> 00:46:30,670
Laat me de lichten dimmen.

1054
00:46:30,670 --> 00:46:32,780
En Colton, laat me
komen staan ​​naast je.

1055
00:46:32,780 --> 00:46:35,520
>> Wilt u hier uit te leggen
met de microfoon wat we doen?

1056
00:46:35,520 --> 00:46:36,380
Alsjeblieft.

1057
00:46:36,380 --> 00:46:37,280
>> COLTON: Zeker.

1058
00:46:37,280 --> 00:46:39,980
Dus nu zijn we
laden van de Oculus,

1059
00:46:39,980 --> 00:46:43,070
Ik denk operating-- werkt niet
systeem, maar het hoofdprogramma, waarbij

1060
00:46:43,070 --> 00:46:46,630
kunt u toegang tot alle spellen en
apps die in uw bibliotheek.

1061
00:46:46,630 --> 00:46:50,060
Dus nu moet zeggen
tik op de touchpad om te beginnen.

1062
00:46:50,060 --> 00:46:53,430
Touchpad gaat worden op de
rechterkant van de headset.

1063
00:46:53,430 --> 00:46:54,569
Dus ga je gang en tap--

1064
00:46:54,569 --> 00:46:55,110
EFA: Oh, man.

1065
00:46:55,110 --> 00:46:56,443
DAVID MALAN: Ja, daar ga je.

1066
00:46:56,443 --> 00:47:00,340

1067
00:47:00,340 --> 00:47:02,460
De kwaliteit Efa ziet
veel hogere kwaliteit.

1068
00:47:02,460 --> 00:47:03,831
Dit is gewoon de Wi-Fi hier.

1069
00:47:03,831 --> 00:47:05,580
COLTON: Dus wat je bent
gaat te willen doen

1070
00:47:05,580 --> 00:47:08,350
is kijken naar de top
rechterkant van het scherm.

1071
00:47:08,350 --> 00:47:10,420
Yep, dat spel op de top rechts.

1072
00:47:10,420 --> 00:47:14,780
En dan als je het selecteren
het, tik op de touchpad opnieuw.

1073
00:47:14,780 --> 00:47:17,010
Ik denk dat het Dreadhalls.

1074
00:47:17,010 --> 00:47:20,820
En dan is hier hier A--, laat
me je bril te houden voor u.

1075
00:47:20,820 --> 00:47:24,420

1076
00:47:24,420 --> 00:47:25,790
>> Dus ik gaf hem slechts een controller.

1077
00:47:25,790 --> 00:47:28,886
Dus nu kan hij het spel te besturen.

1078
00:47:28,886 --> 00:47:30,510
Hij kan rond en spullen te verplaatsen als dat.

1079
00:47:30,510 --> 00:47:31,968
Dus ga je gang en kijk omhoog naar de top.

1080
00:47:31,968 --> 00:47:33,640
Je moet New Game te zien.

1081
00:47:33,640 --> 00:47:36,310
Dus ga je gang en kun je dat doen.

1082
00:47:36,310 --> 00:47:39,320
Nu moet je in staat om te controleren
jezelf met de controller,

1083
00:47:39,320 --> 00:47:43,860
en zodra
het spel laadt hier boven.

1084
00:47:43,860 --> 00:47:46,356
Dit is misschien een beetje eng.

1085
00:47:46,356 --> 00:47:47,300
>> EFA: me nu vertellen.

1086
00:47:47,300 --> 00:47:50,132
OK.

1087
00:47:50,132 --> 00:47:51,080
>> COLTON: Oké.

1088
00:47:51,080 --> 00:47:52,650
Zo bevestigen dat u kunt verplaatsen.

1089
00:47:52,650 --> 00:47:52,750
OK.

1090
00:47:52,750 --> 00:47:53,583
U kunt verplaatsen.

1091
00:47:53,583 --> 00:47:54,300
Perfect.

1092
00:47:54,300 --> 00:47:56,470
Dus als je naar beneden kijkt, heb je een kaart.

1093
00:47:56,470 --> 00:47:58,170
Kaart laat u zien waar u bent.

1094
00:47:58,170 --> 00:47:59,720
U kunt kijken in de kamer rond.

1095
00:47:59,720 --> 00:48:01,440
U kunt volledig omdraaien.

1096
00:48:01,440 --> 00:48:02,128
Ja, precies.

1097
00:48:02,128 --> 00:48:02,627
Keer om.

1098
00:48:02,627 --> 00:48:05,370

1099
00:48:05,370 --> 00:48:07,125
>> Dus kijk naar links.

1100
00:48:07,125 --> 00:48:09,875
Ik denk dat er iets wat je kunt
pick-up op een vat in de kamer.

1101
00:48:09,875 --> 00:48:11,709
>> EFA: Hoe krijg ik de
kaart uit de weg?

1102
00:48:11,709 --> 00:48:12,375
COLTON: Kijk omhoog.

1103
00:48:12,375 --> 00:48:12,980
Kijk maar op.

1104
00:48:12,980 --> 00:48:13,480
Prima.

1105
00:48:13,480 --> 00:48:13,765
Daar ga je.

1106
00:48:13,765 --> 00:48:15,181
Nu ga je gang en gewoon omdraaien.

1107
00:48:15,181 --> 00:48:21,460

1108
00:48:21,460 --> 00:48:24,620
Dus kijk verder aan uw linkerhand.

1109
00:48:24,620 --> 00:48:25,530
Blijf in beweging vertrokken.

1110
00:48:25,530 --> 00:48:26,960
Blijf zoeken naar links.

1111
00:48:26,960 --> 00:48:27,541
Ga zo door.

1112
00:48:27,541 --> 00:48:28,040
Ja.

1113
00:48:28,040 --> 00:48:28,720
>> EFA: Oh, op die manier.

1114
00:48:28,720 --> 00:48:29,261
>> COLTON: Ja.

1115
00:48:29,261 --> 00:48:30,999
Loop naar het met de controller.

1116
00:48:30,999 --> 00:48:31,540
Daar ga je.

1117
00:48:31,540 --> 00:48:32,790
Nu moet zeggen halen.

1118
00:48:32,790 --> 00:48:33,360
Daar ga je.

1119
00:48:33,360 --> 00:48:34,290
Raap het op.

1120
00:48:34,290 --> 00:48:35,550
Prima.

1121
00:48:35,550 --> 00:48:38,286
Nu, laten we uit deze kamer.

1122
00:48:38,286 --> 00:48:42,209
Ga je gang en loop naar de deur.

1123
00:48:42,209 --> 00:48:45,000
Dus je gaat hold-- het zegt
Houd de knop om het geweld te openen.

1124
00:48:45,000 --> 00:48:46,333
Ga zo door en houd de knop.

1125
00:48:46,333 --> 00:48:48,250
Yep, waardoor het te openen.

1126
00:48:48,250 --> 00:48:48,750
Prima.

1127
00:48:48,750 --> 00:48:49,410
Goed gedaan.

1128
00:48:49,410 --> 00:48:50,826
Nu zijn we lopen uit de kamer.

1129
00:48:50,826 --> 00:48:56,970

1130
00:48:56,970 --> 00:49:01,366
Dus ik ga naar de rest overlaten
voor u en zien wat je te weten komen.

1131
00:49:01,366 --> 00:49:02,865
EFA: Ik ga niet in de donkere kamer.

1132
00:49:02,865 --> 00:49:07,315

1133
00:49:07,315 --> 00:49:07,815
Oh wacht.

1134
00:49:07,815 --> 00:49:09,314
Nu moet ik gaan de donkere zaal?

1135
00:49:09,314 --> 00:49:10,785
OK, ik ga terug [onverstaanbaar].

1136
00:49:10,785 --> 00:49:15,520

1137
00:49:15,520 --> 00:49:16,270
COLTON: Oké.

1138
00:49:16,270 --> 00:49:17,560
Sommige meer punten te halen.

1139
00:49:17,560 --> 00:49:19,370
Lijkt op sommige munten.

1140
00:49:19,370 --> 00:49:22,242
Dat is een lock pick.

1141
00:49:22,242 --> 00:49:24,200
Dus als u een vergrendelde
deur, kunt u die gebruiken.

1142
00:49:24,200 --> 00:49:27,755

1143
00:49:27,755 --> 00:49:28,380
Ben je bang?

1144
00:49:28,380 --> 00:49:29,371
>> EFA: Nog niet.

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
Net doen alsof je bent
eigenlijk staan.

1149
00:49:37,330 --> 00:49:39,580
En als je around-- draaien
je hebt om te wennen aan het.

1150
00:49:39,580 --> 00:49:40,752
Maar is het zinvol.

1151
00:49:40,752 --> 00:49:43,960
DAVID MALAN: En terwijl Efa blijft
spelen, omdat we de hele dag konden doen,

1152
00:49:43,960 --> 00:49:45,381
we kunnen allemaal tip-teen hier.

1153
00:49:45,381 --> 00:49:48,130
Maar we hebben twee andere paren,
als je wilt om te komen en te spelen.

1154
00:49:48,130 --> 00:49:49,980
Anders is, zullen we zien
u de volgende keer op woensdag.

1155
00:49:49,980 --> 00:49:51,354
Dank u vandaag om onze vrijwilligers.

1156
00:49:51,354 --> 00:49:52,101
[Applaus]

1157
00:49:52,101 --> 00:49:54,506

1158
00:49:54,506 --> 00:49:57,392
>> [MUZIEK - "SEINFELD THEMA"]

1159
00:49:57,392 --> 00:49:58,222

1160
00:49:58,222 --> 00:50:00,180
SPEAKER 1: Nou, ik ben
waardoor een nieuwe PL monteren op.

1161
00:50:00,180 --> 00:50:01,800
Ik veranderde de OLPF--

1162
00:50:01,800 --> 00:50:03,980
>> Luidspreker 2: Dus wat
precies doe je?

1163
00:50:03,980 --> 00:50:07,063
>> SPEAKER 1: Nou, ieder van these--
hier, ik zal je laten zien deze hier.

1164
00:50:07,063 --> 00:50:08,690
U kunt het hier zien.

1165
00:50:08,690 --> 00:50:09,510
>> SPEAKER 3: Ik denk dat ik ben goed met deze.

1166
00:50:09,510 --> 00:50:09,933
Wil je wat meer?

1167
00:50:09,933 --> 00:50:11,325
>> SPEAKER 4: Nee, ik ben goed. [Onverstaanbaar].

1168
00:50:11,325 --> 00:50:12,200
>> SPEAKER 3: Nee, [onverstaanbaar].

1169
00:50:12,200 --> 00:50:12,700
Hebben een aantal.

1170
00:50:12,700 --> 00:50:21,165

1171
00:50:21,165 --> 00:50:22,290
SPEAKER 1: De verschillende kleur.

1172
00:50:22,290 --> 00:50:22,890
Luidspreker 2: OK.

1173
00:50:22,890 --> 00:50:26,690
SPEAKER 1: Dus uiteindelijk wat het
doet is het de kleur aanpast van--