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

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

3
00:00:10,030 --> 00:00:11,580
>> DAVID MALAN: Dies ist CS50.

4
00:00:11,580 --> 00:00:12,880
Dies ist der Beginn der Woche neun.

5
00:00:12,880 --> 00:00:15,797
Und das ist, was hätte
war Mr. Boole 200. Geburtstag.

6
00:00:15,797 --> 00:00:17,630
Das ist also die Kerle
an die wir hingewiesen haben

7
00:00:17,630 --> 00:00:21,800
durchaus einige Male über die Verwendung
Booleschen Variablen wahr und falsch,

8
00:00:21,800 --> 00:00:22,910
1 und 0 und solche.

9
00:00:22,910 --> 00:00:25,270
Und das war die Google-
Tribut heute zu ihm.

10
00:00:25,270 --> 00:00:26,489
Er würde 200 eingeschaltet haben.

11
00:00:26,489 --> 00:00:28,280
Also, wenn Sie möchten,
besuchen Sie uns für CS50 Mittagessen

12
00:00:28,280 --> 00:00:30,279
einen Blick auf den Link
auf der Website der natürlich.

13
00:00:30,279 --> 00:00:33,580
Und solche Gesichter und Freunde
Diese erwarten Sie hier in Cambridge.

14
00:00:33,580 --> 00:00:35,360
Gesichter wie diese erwarten Sie in New Haven.

15
00:00:35,360 --> 00:00:37,800
Und in der Tat in Ken
New Haven freundlicherweise

16
00:00:37,800 --> 00:00:41,594
was heißt ein animiertes GIF von Eli
hier bei einer aktuellen lunch-- ein GIF ist noch

17
00:00:41,594 --> 00:00:44,260
weitere graphische Datei-Format,
mit dem Sie familiar--, dass du

18
00:00:44,260 --> 00:00:46,300
sieht ein wenig so etwas wie dieses.

19
00:00:46,300 --> 00:00:48,179
Also nur eine Folge von-- OK.

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

21
00:00:49,720 --> 00:00:51,720
Aber in New Haven, diese
ist wirklich lustig, nicht wahr?

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

23
00:00:52,350 --> 00:00:53,940
>> Also besuchen Sie uns dort.

24
00:00:53,940 --> 00:00:55,900
Hier in Harvard,
Insbesondere an diesem Mittwoch,

25
00:00:55,900 --> 00:00:59,480
wenn Sie ein College-Student bist oder Freshman even--
oder sogar junior-- Denken Herstellung

26
00:00:59,480 --> 00:01:01,563
ein Schalter in den Computer
Wissenschaft, wissen, dass es werde

27
00:01:01,563 --> 00:01:04,440
werden ein CS Beratung Messe in diesem
Mittwoch, kurz nach Klasse

28
00:01:04,440 --> 00:01:08,040
um 4:00 Uhr in der Computer-
Wissenschaftsgebäude Maxwell Dworkin.

29
00:01:08,040 --> 00:01:11,890
Wir werden dies auf dem Golfplatz zu setzen
Website von morgen, wie gut.

30
00:01:11,890 --> 00:01:14,430
Donuts, Mir wurde gesagt, serviert.

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

32
00:01:15,180 --> 00:01:18,790
So lustig story-- ich Stossen
rund im Internet,

33
00:01:18,790 --> 00:01:23,575
und ich fand einige alte Archive
meiner ehemaligen Website.

34
00:01:23,575 --> 00:01:25,950
Und es stellt sich out-- um dieses
Zeit, scheint es sehr aktuell

35
00:01:25,950 --> 00:01:28,910
da ich höre, dass die UC Wahlen
sind dabei, das Getriebe wieder auf.

36
00:01:28,910 --> 00:01:32,230
Also lief ich für UC, verlor kläglich.

37
00:01:32,230 --> 00:01:34,770
Und vielleicht war dies zum Teil, warum.

38
00:01:34,770 --> 00:01:37,600
Das war also meine Website zu der Zeit.

39
00:01:37,600 --> 00:01:40,477
Aus irgendeinem Grund dachte ich, es war
eine gute Idee, vor Leuten sagt,

40
00:01:40,477 --> 00:01:43,310
was meine Plattform war und warum sie
sollte für mich stimmen, dass sie

41
00:01:43,310 --> 00:01:47,770
zu klicken, um in Kraft zu erfahren, dass
Informationen, die in der Rückschau ist

42
00:01:47,770 --> 00:01:48,660
irgendwie gruselig.

43
00:01:48,660 --> 00:01:50,910
Ich weiß wirklich nicht, was das war.

44
00:01:50,910 --> 00:01:53,140
>> Aber es ist sicherlich nicht
helfen, meine Kampagne.

45
00:01:53,140 --> 00:01:56,874
Ich fand auch, dass von Senior
year-- Ich hatte diese Muppet Kalender.

46
00:01:56,874 --> 00:01:58,540
Muppets waren irgendwie in Mode damals.

47
00:01:58,540 --> 00:01:59,456
Oder vielleicht waren sie nicht.

48
00:01:59,456 --> 00:02:01,790
Ich hatte ein Muppet Kalender damals.

49
00:02:01,790 --> 00:02:04,860
Und ich dachte, es wäre cool, Name sein
meinem Computer auf der Harvard-Netzwerk

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

51
00:02:07,460 --> 00:02:10,370
Zu der Zeit hatten wir alle einzigartig
identifizierbaren Hostnamen.

52
00:02:10,370 --> 00:02:13,150
Und man konnte etwas Eitelkeit wählen
Namen statt Ihrem eigenen Namen.

53
00:02:13,150 --> 00:02:15,580
Und ich ging mit Froschmann aus irgendeinem Grund.

54
00:02:15,580 --> 00:02:19,040
>> Und dann started-- I Ich verbrachte viel
Zeit Klicken durch diese Links

55
00:02:19,040 --> 00:02:20,280
heute Morgen.

56
00:02:20,280 --> 00:02:24,690
Und das war mein zu Seite,
die jetzt Art scheint liebenswert.

57
00:02:24,690 --> 00:02:28,210
Aber es zeugt auch von einfach
wie weit Technologie ist gekommen.

58
00:02:28,210 --> 00:02:30,310
Ich meine, wieder in den Tag,
a 486 war etwas.

59
00:02:30,310 --> 00:02:34,090
In diesen Tagen, es ist super, super,
super langsam und gut weniger

60
00:02:34,090 --> 00:02:36,216
als Sie in haben könnte Ihre
eigenen Taschen in diesen Tagen.

61
00:02:36,216 --> 00:02:38,465
Es gibt noch mehr auf, dass es
war noch peinlicher.

62
00:02:38,465 --> 00:02:39,770
Also werde ich es dabei belassen.

63
00:02:39,770 --> 00:02:42,640
Aber das war meine erste
Vorstoß in web-- oh, nein.

64
00:02:42,640 --> 00:02:43,180
Das war nicht.

65
00:02:43,180 --> 00:02:47,000
Mein erster richtiger Ausflug in Web-Programmierung
Hat Ihnen diese Seite, die ich nur vergessen.

66
00:02:47,000 --> 00:02:50,620
Irgendwann habe ich gelernt,
machen sich wiederholende Hintergrundbildern.

67
00:02:50,620 --> 00:02:55,260
Und so fand ich diese Fliesen effektiv,
wie Hockeyspieler, Fußball und Golf

68
00:02:55,260 --> 00:02:58,040
Ball, oder was auch immer das ist
für die Frosh IMs Website.

69
00:02:58,040 --> 00:03:01,390
Und das war eigentlich wirklich die
erste webbasierte Projekt nahm ich an--

70
00:03:01,390 --> 00:03:03,880
Ich denke, vielleicht im zweiten Jahr
Jahr junior year--

71
00:03:03,880 --> 00:03:07,622
nach der Einnahme von CS50 und CS51, einer
der gemeinsamen Folgeklassen.

72
00:03:07,622 --> 00:03:09,330
Ich in der Suche aufgefallen,
durch die Archive

73
00:03:09,330 --> 00:03:12,150
dass einer meiner Nachfolger und
Freunde, Lee, Art verändert

74
00:03:12,150 --> 00:03:13,480
der Urheberrechts zu sich selbst.

75
00:03:13,480 --> 00:03:17,520
Aber das war in der Tat etwas, das
Ich sollte die Verlegenheit zu besitzen.

76
00:03:17,520 --> 00:03:19,370
Aber zu der Zeit, diese
war die erste Website,

77
00:03:19,370 --> 00:03:22,220
wie ich schon sagte vor ein paar Wochen,
durch welche Neuling könnte

78
00:03:22,220 --> 00:03:24,350
registrieren Universitätssportarten hier.

79
00:03:24,350 --> 00:03:27,950
Und so stellt sich heraus,
dass die Hintergrundbilder

80
00:03:27,950 --> 00:03:29,530
wie diese sind nicht so eine gute Idee.

81
00:03:29,530 --> 00:03:31,840
Aber das Web war neu, und
wir waren alle zu experimentieren.

82
00:03:31,840 --> 00:03:34,310
Und das ist, was ich
anscheinend zu der Zeit.

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

84
00:03:34,810 --> 00:03:38,020
So ohne weiteres, schalten wir
Räder heute, um Ihnen, wirklich,

85
00:03:38,020 --> 00:03:42,250
das letzte Stück, die Sie vielleicht finden
besonders nützlich für Abschlussarbeiten

86
00:03:42,250 --> 00:03:44,780
sondern auch, dass wird zu starten
machen das ganze World Wide Web

87
00:03:44,780 --> 00:03:46,680
fühlen sich ein bisschen mehr verständlich.

88
00:03:46,680 --> 00:03:49,460
In der Tat werden wir einführen
eine weitere Programmiersprache

89
00:03:49,460 --> 00:03:52,474
genannt JavaScript, die ähnlich ist
und auf unterschiedliche Weise verschiedene

90
00:03:52,474 --> 00:03:54,140
von Sprachen haben wir bei bisher sah.

91
00:03:54,140 --> 00:03:55,807
>> So C, Rückruf, ist dies kompilierte Sprache.

92
00:03:55,807 --> 00:03:57,473
Man muss es durch einen Compiler laufen.

93
00:03:57,473 --> 00:03:59,810
Sie erhalten Quellcode zum Objekt
Code oder Nullen und Einsen.

94
00:03:59,810 --> 00:04:03,000
Und das sind Nullen und Einsen, dass
Ihre CPU, Central Processing Unit,

95
00:04:03,000 --> 00:04:04,360
wirklich verstehen.

96
00:04:04,360 --> 00:04:06,610
PHP ist dagegen nicht
eine kompilierte Sprache.

97
00:04:06,610 --> 00:04:08,772
Es ist ein, was?

98
00:04:08,772 --> 00:04:09,980
Es ist eine interpretierte Sprache.

99
00:04:09,980 --> 00:04:11,750
So gibt es einige Programm
genannt, dass ein Dolmetscher

100
00:04:11,750 --> 00:04:13,708
muss es-- oben zu lesen
unten, links, um right--

101
00:04:13,708 --> 00:04:16,519
und herauszufinden, was alle
Ihre Syntax tut und bedeutet,

102
00:04:16,519 --> 00:04:20,200
ob es eine Schleife oder ein Zustand,
oder jede andere Anzahl von Programmier

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

104
00:04:20,740 --> 00:04:22,210
Also das ist eine interpretierte Sprache.

105
00:04:22,210 --> 00:04:23,910
>> Dann haben wir HTML.

106
00:04:23,910 --> 00:04:26,440
Und HTML ist nicht einmal ein
Programmiersprache.

107
00:04:26,440 --> 00:04:28,110
Wir würden es, was anruft?

108
00:04:28,110 --> 00:04:31,650
Eine Auszeichnungssprache, die gerade ist
eine Art andere Art zu sagen es

109
00:04:31,650 --> 00:04:35,820
keine Programmierkonstrukte wie
wir sahen sogar wieder in den Tag von Scratch.

110
00:04:35,820 --> 00:04:36,720
Es sind keine Schleifen.

111
00:04:36,720 --> 00:04:37,920
Es gibt keine Voraussetzungen.

112
00:04:37,920 --> 00:04:40,820
Es ist wirklich eine Sprache
über Kennzeichnung Ihrer Daten

113
00:04:40,820 --> 00:04:43,620
und Formatieren oder
Strukturieren es in irgendeiner Weise.

114
00:04:43,620 --> 00:04:46,147
>> CSS dessen ähnlich
keine Programmiersprache.

115
00:04:46,147 --> 00:04:47,730
Es ist noch mehr ästhetisch orientiert.

116
00:04:47,730 --> 00:04:50,470
Und es erlaubt Ihnen, der Feinabstimmung zu sortieren
Dinge wie Schriftgröße und Farben

117
00:04:50,470 --> 00:04:51,850
und die Platzierung und das alles.

118
00:04:51,850 --> 00:04:52,370
Dann hatten wir

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

120
00:04:53,160 --> 00:04:56,010
So SQL ist in der Tat ein Programmier
Sprache, in gewissem Sinne,

121
00:04:56,010 --> 00:04:59,330
wenn auch zugeschnitten
speziell auf Datenbanken.

122
00:04:59,330 --> 00:05:03,347
Aber auch wenn wir nur stellen Ihnen
auswählen und einfügen und löschen und aktualisieren

123
00:05:03,347 --> 00:05:05,430
und ein paar andere,
stellt sich heraus, man kann tatsächlich

124
00:05:05,430 --> 00:05:07,380
Schreibfunktionen oder
Verfahren, wie sie sind

125
00:05:07,380 --> 00:05:11,270
genannt wird, in SQL, die aussehen und handeln
ganz wie PHP und C-Funktionen.

126
00:05:11,270 --> 00:05:12,390
So wissen, dass diejenigen existieren.

127
00:05:12,390 --> 00:05:15,348
Aber wir wissen nicht einmal mit ihnen die Mühe
wie wir gerade an der Oberfläche kratzen hier.

128
00:05:15,348 --> 00:05:18,600
Und dann JavaScript, der letzte
unsere Sprachen offiziell vorgestellt.

129
00:05:18,600 --> 00:05:21,029
So JavaScript ist auch
eine interpretierte Sprache.

130
00:05:21,029 --> 00:05:23,070
Und diejenigen, vertraut machen
Sie, um es zu unterscheiden wollen

131
00:05:23,070 --> 00:05:26,960
mit einigen charakteristischen
sowohl von C und PHP?

132
00:05:26,960 --> 00:05:28,300
Was macht es anders?

133
00:05:28,300 --> 00:05:29,650
>> ZIELGRUPPE: Es ist nicht kompiliert.

134
00:05:29,650 --> 00:05:29,930
>> DAVID MALAN: Sagen Sie wieder?

135
00:05:29,930 --> 00:05:31,200
>> ZIELGRUPPE: Es ist nicht kompiliert.

136
00:05:31,200 --> 00:05:31,930
>> DAVID MALAN: Es ist nicht kompiliert.

137
00:05:31,930 --> 00:05:33,450
So ist es auch interpretiert wird.

138
00:05:33,450 --> 00:05:34,760
Also ist es nicht kompiliert.

139
00:05:34,760 --> 00:05:37,210
Aber das macht es ein wenig wie PHP.

140
00:05:37,210 --> 00:05:39,545
Aber es ist immer noch anders
PHP in einigen markante Art und Weise,

141
00:05:39,545 --> 00:05:40,920
zumindest in der Art und Weise werden wir es nutzen.

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

143
00:05:41,205 --> 00:05:41,940
>> Publikum: Es läuft clientseitige.

144
00:05:41,940 --> 00:05:44,000
>> DAVID MALAN: Es läuft
Client-Seite, in der Regel.

145
00:05:44,000 --> 00:05:47,190
Das ist in der Tat das Unterscheidungs
charakteristisch für uns jetzt.

146
00:05:47,190 --> 00:05:51,170
C war server-Seite im Lese
dass wir alles in CS50 IDE.

147
00:05:51,170 --> 00:05:53,630
PHP war bisher
serverseitige insoweit

148
00:05:53,630 --> 00:05:56,550
wie es auch bekommt interpreted--
nicht kompiliert, aber interpreted--

149
00:05:56,550 --> 00:06:00,690
Innen CS50 IDE, was natürlich
nur eine oder die Server in der Cloud.

150
00:06:00,690 --> 00:06:03,070
>> Aber JavaScript, auch
wenn Sie Sie gehen

151
00:06:03,070 --> 00:06:07,000
es für, sagen wir, pset schriftlich zu starten
acht und vielleicht endgültige projects-- Sie

152
00:06:07,000 --> 00:06:09,620
werde es in der rechten
CS50 IDE und speichern Sie es

153
00:06:09,620 --> 00:06:14,760
in Dateien innerhalb CS50 IDE, CS50 IDE
und im Gegenzug, die Cloud-Server

154
00:06:14,760 --> 00:06:19,160
auf dem es Gastgeber, werden nicht
zu interpretieren oder Ihren Code auszuführen.

155
00:06:19,160 --> 00:06:23,880
Vielmehr, es wird in gesendet werden
unveränderter Form bis in den Browser.

156
00:06:23,880 --> 00:06:26,990
Und es ist dann werde IE sein
oder Chrome oder Firefox oder Safari

157
00:06:26,990 --> 00:06:30,697
oder was auch immer, dass tatsächlich interpretiert
es, von oben nach unten, von links nach rechts.

158
00:06:30,697 --> 00:06:32,780
So ist der Schlüssel Scheidungs
charakteristisch für heute

159
00:06:32,780 --> 00:06:36,110
ist, dass JavaScript ist clientseitige
und PHP, zum Beispiel,

160
00:06:36,110 --> 00:06:37,690
hat gewesen serverseitige.

161
00:06:37,690 --> 00:06:40,920
Nun hat dieses interessante Implikationen
für die, wie, geistiges Eigentum

162
00:06:40,920 --> 00:06:42,660
und wer tatsächlich sehen, können Sie Ihren Code.

163
00:06:42,660 --> 00:06:44,860
Und in der Tat, können Sie gehen
im Web und sehen die meisten

164
00:06:44,860 --> 00:06:47,530
jeder Code, dass jemand
in JavaScript geschrieben.

165
00:06:47,530 --> 00:06:50,230
Manchmal ist es lesbar,
Manchmal ist es verschleiert.

166
00:06:50,230 --> 00:06:52,550
Aber mehr dazu rechtzeitig.

167
00:06:52,550 --> 00:06:57,530
>> So JavaScript, schön genug,
Super-ähnlichen, syntaktisch, um C.

168
00:06:57,530 --> 00:06:59,364
Und ähnlich wie PHP,
es gibt keine Hauptfunktion.

169
00:06:59,364 --> 00:07:02,113
Wenn Sie mit dem Schreiben beginnen möchten
JavaScript-Code, wie Sie heute sehen werden,

170
00:07:02,113 --> 00:07:03,270
Sie gerade anfangen zu schreiben.

171
00:07:03,270 --> 00:07:06,910
Aber es ist, du wirst sehen, vor allem
nützlich im Zusammenhang mit Web-Browsern.

172
00:07:06,910 --> 00:07:09,820
Aber mein kleiner
disclaimer-- Regel earlier--

173
00:07:09,820 --> 00:07:13,790
war zu sagen, dass man zunehmend
verwenden heute JavaScript serverseitige

174
00:07:13,790 --> 00:07:17,655
mit einem ausgefallenen Rahmen genannt Node.js
dass einige der CS50 eigene Anwendungen

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

176
00:07:18,280 --> 00:07:20,640
Prüfen 50 tatsächlich verwendet Node.js.

177
00:07:20,640 --> 00:07:24,140
Aber wir werden den Schwerpunkt auf
JavaScript clientseitige hier an heraus.

178
00:07:24,140 --> 00:07:26,750
>> So, hier ist eine Reihe von Bedingungen in PHP.

179
00:07:26,750 --> 00:07:29,350
Sorry, in-- eigentlich, dass
Aussage auch korrekt ist.

180
00:07:29,350 --> 00:07:32,200
Hier ist auch eine Reihe von
Bedingungen in JavaScript.

181
00:07:32,200 --> 00:07:35,560
Syntaktisch ist es
identisch mit C und PHP.

182
00:07:35,560 --> 00:07:39,040
Mr. Boole'schen Ausdrücke sind,
Ähnlich syntaktisch

183
00:07:39,040 --> 00:07:41,190
identisch mit sowohl C und PHP.

184
00:07:41,190 --> 00:07:44,100
Wir haben auch Schalter
JavaScript, die identisch aussehen.

185
00:07:44,100 --> 00:07:46,350
Wir haben für die Schleifen, die sind
identisch aufgebaut,

186
00:07:46,350 --> 00:07:48,140
While-Schleifen, do while-Schleifen.

187
00:07:48,140 --> 00:07:49,980
>> Das hier ist ein wenig anders.

188
00:07:49,980 --> 00:07:53,120
PHP hatte der für jedes Konstrukt
dass Sie vielleicht mit

189
00:07:53,120 --> 00:07:55,320
oder wird in pset sieben verwenden, vielleicht.

190
00:07:55,320 --> 00:07:59,460
JavaScript muss diese spezielle Version
für, wo Sie buchstäblich etwas sagen

191
00:07:59,460 --> 00:08:03,864
wie für die Variable Schlüssel-Objekt, das
ist eine sehr prägnante Art zu sagen,

192
00:08:03,864 --> 00:08:06,780
wenn ich eine object-- bekam und wir schicken
reden über diese in einem moment-- wieder

193
00:08:06,780 --> 00:08:10,370
und ich will über alle zu durchlaufen
der Schlüsselwertpaare im Inneren,

194
00:08:10,370 --> 00:08:13,620
Ich habe nicht herausfinden, wie man
numerisch Index sie mit null, eins,

195
00:08:13,620 --> 00:08:14,580
zwei drei.

196
00:08:14,580 --> 00:08:15,900
>> Ich kann buchstäblich sagen.

197
00:08:15,900 --> 00:08:20,740
Und bei jeder Iteration, JavaScript
für mich wird die Variable Schlüssel aktualisieren

198
00:08:20,740 --> 00:08:24,810
der erste Schlüssel, dann wird der nächste Schlüssel,
dann die nächste Taste, dann die nächste Taste,

199
00:08:24,810 --> 00:08:25,510
und so weiter.

200
00:08:25,510 --> 00:08:30,000
Und ich kann an seinem Wert nach der Behandlung erhalten
ein Objekt in JavaScript, wie wir sehen werden,

201
00:08:30,000 --> 00:08:32,584
als ob es sich um eine
assoziativen Array in PHP.

202
00:08:32,584 --> 00:08:35,750
In der Tat, wenn Sie endlich Ihre gewickelt
dagegen um, was ein assoziatives Array ist

203
00:08:35,750 --> 00:08:40,140
in PHP, die Sie von ihm für jetzt als denken können
identisch zu einem Objekt in JavaScript.

204
00:08:40,140 --> 00:08:42,030
Aber das ist ein bisschen wie
eine zu starke Vereinfachung.

205
00:08:42,030 --> 00:08:47,230
>> Arrays aussehen, schön genug, identisch
außer für ein Zeichen PHP.

206
00:08:47,230 --> 00:08:51,425
Es gibt eine Sache fehlt hier
dass wir sahen in der vergangenen Woche mit PHP.

207
00:08:51,425 --> 00:08:52,050
Was ist weggelassen?

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

209
00:08:53,310 --> 00:08:54,090
Kein Dollarzeichen.

210
00:08:54,090 --> 00:08:56,240
Also sind wir zurück auf ein
mehr normale Welt,

211
00:08:56,240 --> 00:08:58,050
Variablen haben keine Dollarzeichen.

212
00:08:58,050 --> 00:09:00,810
Aber Sie voran ihnen zu tun
mit var, in der Regel.

213
00:09:00,810 --> 00:09:02,230
Und var bedeutet variabel.

214
00:09:02,230 --> 00:09:06,440
Und ähnlich wie PHP ist lose
typed-- wobei es Typen,

215
00:09:06,440 --> 00:09:10,120
gibt es Zahlen und Strings
und schwimmt und so forth--

216
00:09:10,120 --> 00:09:11,570
JavaScript muss in ähnlicher Typen.

217
00:09:11,570 --> 00:09:15,470
Aber es ist lose in das typisierte wir die
Programmierer nicht haben, um sie festzulegen.

218
00:09:15,470 --> 00:09:18,980
Wir müssen nur bewusst sein,
dass unterschiedliche Arten existieren.

219
00:09:18,980 --> 00:09:21,690
>> Variablen, hier ist, wie meanwhile--
wir könnten erklären, "Hallo, Welt"

220
00:09:21,690 --> 00:09:22,230
als String zurück.

221
00:09:22,230 --> 00:09:24,890
Beachten Sie, es ist identisch mit
PHP aber keine Dollarzeichen.

222
00:09:24,890 --> 00:09:27,120
Und das ist etwas, das wir
starten Sie sehen heute mehr,

223
00:09:27,120 --> 00:09:30,990
wobei man ein Objekt haben
mit Schlüssel und Werte.

224
00:09:30,990 --> 00:09:32,990
Und wenn Sie wollen versuchen
um von den letzten week-- schließen

225
00:09:32,990 --> 00:09:34,730
die Syntax ist ein wenig anders.

226
00:09:34,730 --> 00:09:39,740
Aber ein wenig Vernunft check--, wie viele
Schlüssel hat diese Aufgabe zu haben scheinen?

227
00:09:39,740 --> 00:09:40,850
So sehe ich vier.

228
00:09:40,850 --> 00:09:43,560
Ich sehe zwei.

229
00:09:43,560 --> 00:09:44,680
>> So ist es eigentlich zwei.

230
00:09:44,680 --> 00:09:47,260
Das ist also eine Sammlung
zwei Schlüssel-Wert-Paaren.

231
00:09:47,260 --> 00:09:49,820
Der Schlüssel ist, Symbol, dessen Wert FB.

232
00:09:49,820 --> 00:09:52,620
Der Schlüssel ist der Preis, dessen Wert 101,53.

233
00:09:52,620 --> 00:09:54,230
Das sind also zwei Schlüssel-Wert-Paaren.

234
00:09:54,230 --> 00:09:58,120
Und denken Sie daran, PHP-- und dies ist wieder
gerade Art von syntaktischen Unterschied.

235
00:09:58,120 --> 00:10:00,170
Es ist nicht alles,
intellektuell interessant.

236
00:10:00,170 --> 00:10:04,610
PHP könnte diese gleiche geschrieben haben
etwas wie follows-- Quote entspricht.

237
00:10:04,610 --> 00:10:06,730
Und ich diese ändern, um eckige Klammern.

238
00:10:06,730 --> 00:10:11,240
Und dann habe ich dies zu ändern
a zitierten Wort "Preis."

239
00:10:11,240 --> 00:10:12,500
Und dann kann ich nicht mit einem Doppelpunkt.

240
00:10:12,500 --> 00:10:15,060
Was habe ich letzte Woche?

241
00:10:15,060 --> 00:10:18,290
Ja, das Gleichheitszeichen
arrow flippige Notation.

242
00:10:18,290 --> 00:10:21,470
>> Und dann habe ich die gleiche Sache hier.

243
00:10:21,470 --> 00:10:23,580
Die gleiche Sache hier.

244
00:10:23,580 --> 00:10:24,240
Und das ist alles.

245
00:10:24,240 --> 00:10:27,752
So ist es in Ordnung, wenn dies noch nicht
wirklich in den Speicher versenkt gerade

246
00:10:27,752 --> 00:10:29,960
noch, weil es wirklich
intellektuell uninteressant.

247
00:10:29,960 --> 00:10:31,660
Es ist nur syntaktische Unterschiede.

248
00:10:31,660 --> 00:10:33,230
Aber die Ideen sind genau die gleichen.

249
00:10:33,230 --> 00:10:35,910
Innerhalb dieses variablen
Zitat in JavaScript

250
00:10:35,910 --> 00:10:39,020
ist eine Sammlung von Schlüsselwert-Paaren,
einer davon ist ein Symbol, von denen

251
00:10:39,020 --> 00:10:39,690
ist der Preis.

252
00:10:39,690 --> 00:10:42,340
Und ich kann auf diese Werte zu erhalten
mit der folgenden Syntax.

253
00:10:42,340 --> 00:10:46,280
Genau wie in PHP, konnte ich
tun Sie etwas like-- lassen

254
00:10:46,280 --> 00:10:48,590
mir machen diese Box ein wenig größer.

255
00:10:48,590 --> 00:10:52,750
Genau wie in PHP, konnte ich
machen this-- oh, verdammt.

256
00:10:52,750 --> 00:10:53,250
Komm schon.

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

258
00:10:56,350 --> 00:11:00,800
>> Genau wie in PHP-- OK, wir
benutzen Sie einfach die Moderatornotizen.

259
00:11:00,800 --> 00:11:06,010
Genau wie in PHP, kann ich
DO $ Zitat $ Zitat ["symbol"],

260
00:11:06,010 --> 00:11:08,860
und das wird mir
der Wert von "symbol".

261
00:11:08,860 --> 00:11:12,800
In JavaScript, es geht zu sein
identisch, wobei ich nur tun.

262
00:11:12,800 --> 00:11:14,850
Das einzige, was ist
fehlt, ist der Dollar-Zeichen.

263
00:11:14,850 --> 00:11:17,470
>> So schön genug ist, dann gibt es
gar nicht so viel neue Syntax.

264
00:11:17,470 --> 00:11:21,025
Also, was heute konzentrieren wir uns auf, wirklich,
einige der Ideen und der Anwendungen.

265
00:11:21,025 --> 00:11:22,900
Und die erste derartige
Anwendung, die Sie

266
00:11:22,900 --> 00:11:26,090
haben gesehen, wenn Sie pset getaucht
sieben bereits ist diese Syntax.

267
00:11:26,090 --> 00:11:28,980
So in pset sieben, wenn Sie schon
gesehen oder es noch nicht gesehen,

268
00:11:28,980 --> 00:11:33,570
wissen, dass es eine Datei, die wir geben
Sie config.json-- JavaScript genannt

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

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

271
00:11:35,160 --> 00:11:39,540
Wir wollten in der Lage, Ihnen zur Verfügung zu stellen
eine Vorlage mit einigen Schlüssel-Wert-Paaren.

272
00:11:39,540 --> 00:11:44,290
Wir wollten in der Lage Ihnen eine Liste zu geben
des Wirtes, der Name des Servers.

273
00:11:44,290 --> 00:11:46,710
Wir wollten Sie ein zu geben
Platzhalter für Ihren Benutzernamen

274
00:11:46,710 --> 00:11:48,210
und ein Platzhalter für Ihr Passwort ein.

275
00:11:48,210 --> 00:11:49,410
Wenn Sie nicht sehen,
dies doch keine Sorgen machen.

276
00:11:49,410 --> 00:11:51,340
Mehr dazu in pset sieben
[? spec. ?] Und dann,

277
00:11:51,340 --> 00:11:53,173
offensichtlich, möchten wir Sie
in der To-Dos zu füllen

278
00:11:53,173 --> 00:11:55,310
denn wenn man sich anmelden
CS50 IDE, jeder von euch

279
00:11:55,310 --> 00:11:57,630
Ihren eigenen Benutzernamen und Passwort.

280
00:11:57,630 --> 00:12:00,910
>> So konnten wir ein halbes Dutzend benutzt habe
oder mehrere verschiedene Dateiformate.

281
00:12:00,910 --> 00:12:02,940
Wir könnten eine .txt-Datei verwendet haben.

282
00:12:02,940 --> 00:12:04,570
Wir könnten verwendet eine CSV-Datei.

283
00:12:04,570 --> 00:12:06,745
Wir könnten verwendet habe, ein
INI-Datei, eine XML-Datei,

284
00:12:06,745 --> 00:12:09,370
eine ganze Reihe mehr Akronyme,
Sie je gehört haben könnte.

285
00:12:09,370 --> 00:12:11,244
Es ist eine Art willkürlicher
am Ende des Tages.

286
00:12:11,244 --> 00:12:16,030
Aber super beliebt in diesen Tagen ist eine Text
Format namens JSON-- JavaScript Object

287
00:12:16,030 --> 00:12:18,460
Notation--, dass wie folgt aussieht.

288
00:12:18,460 --> 00:12:20,890
Es ist ein wenig kryptisch,
aber beachten Sie die Muster.

289
00:12:20,890 --> 00:12:24,180
Sie beginnen mit einer öffnenden geschweiften
Klammer, und Sie am Ende mit dem gleichen.

290
00:12:24,180 --> 00:12:26,550
Innenseite das ist etwas.

291
00:12:26,550 --> 00:12:27,920
Es ist ein Schlüssel-Wert-Paar.

292
00:12:27,920 --> 00:12:30,580
Das ist also ein Objekt, das bin ich
Blick auf auf dem Bildschirm hier

293
00:12:30,580 --> 00:12:33,690
das hat eine Taste, die einen Wert hat.

294
00:12:33,690 --> 00:12:37,610
Und basierend auf den Folgern
vorherige Muster, was ist der Schlüssel hier?

295
00:12:37,610 --> 00:12:39,790
Database, dem, was zu
die links vom Doppelpunkt.

296
00:12:39,790 --> 00:12:43,500
>> Nun geschieht Wert ist
ein mehrere Zeilen dieser Zeit.

297
00:12:43,500 --> 00:12:46,760
Aber der Wert mit einem lockiges beginnt
Klammer und endet mit einer geschweiften Klammer.

298
00:12:46,760 --> 00:12:49,480
Also, was würden Sie vorschlagen, ist die
Typ des Wertes der Datenbank?

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

300
00:12:52,160 --> 00:12:54,670
Ein Wörterbuch oder, nur mehr
kurz und bündig, ein Objekt.

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

302
00:12:55,170 --> 00:13:00,010
Dies ist eine Art eine Datenstruktur,
können andere Strukturen in sich zu nutzen.

303
00:13:00,010 --> 00:13:02,750
Also, wenn diese ganze Sache wir sind
Aufruf eines object-- und ein Objekt

304
00:13:02,750 --> 00:13:07,101
ist nur ein Haufen von Schlüssel-Wert-pairs-- die
Wert der Datenbank selbst ist ein Objekt.

305
00:13:07,101 --> 00:13:10,350
Der Wert der Datenbank verfügt über eine ganze Reihe
der Schlüsselwertpaare, von denen die erste

306
00:13:10,350 --> 00:13:13,130
ist Gastgeber, dann nennen, dann
Benutzernamen und dann vergessen,

307
00:13:13,130 --> 00:13:17,550
enthält, deren jeweilige Werte dessen ist es
nur eine langweilige Zeichenkette in Anführungszeichen.

308
00:13:17,550 --> 00:13:19,770
>> Also selbst wenn das nicht
Super Clear nur noch,

309
00:13:19,770 --> 00:13:22,740
wissen, dass dies nur ein
Standard, ziemlich langweiligen Weg

310
00:13:22,740 --> 00:13:25,190
Speichern von Daten in einem Standardformat.

311
00:13:25,190 --> 00:13:27,700
Aber die häufigsten Fehler, die Sie
vielleicht machen, auch in pset sieben,

312
00:13:27,700 --> 00:13:32,120
sind kleine dumme Dinge, wie wenn Sie
das Komma es versehentlich auslassen.

313
00:13:32,120 --> 00:13:34,900
Das wird in der Datei führen
nicht lesbar.

314
00:13:34,900 --> 00:13:38,191
Wenn Sie versehentlich Dinge wie das weglassen
Zitate, wird es nicht lesbar zu sein.

315
00:13:38,191 --> 00:13:41,654
So ist es ein ziemlich pingelig Dateiformat,
aber es ist eine, die Super gemeinsame ist.

316
00:13:41,654 --> 00:13:44,820
Und wir passieren, es zu benutzen, auch wenn
Sie verwenden keine JavaScript andernfalls

317
00:13:44,820 --> 00:13:46,330
in pset sieben.

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

319
00:13:46,860 --> 00:13:48,110
Also dieses Bild erinnern.

320
00:13:48,110 --> 00:13:51,657
Wir haben darüber gesprochen, in HTML, dass
Der Code könnte wie folgt aussehen.

321
00:13:51,657 --> 00:13:54,740
Dies ist der Hypertext Markup Language
[Unverständlich] für nur "Hallo, Welt."

322
00:13:54,740 --> 00:13:57,570
Aber dann haben wir vorgeschlagen, ein
Weile zurück, dass, wenn es hilft,

323
00:13:57,570 --> 00:14:00,210
möchten Sie vielleicht anfangen,
über dieses bereits als Baum.

324
00:14:00,210 --> 00:14:03,730
In der Tat, die Vertiefung, die wir
verwenden nur zur besseren Lesbarkeit willen

325
00:14:03,730 --> 00:14:05,610
oder für Stil willen auf
die linke Art kann

326
00:14:05,610 --> 00:14:10,040
in diesem Baum, wo Sie übersetzt werden
haben einige spezielle Wurzelknoten, dass wir

327
00:14:10,040 --> 00:14:16,860
allgemein als Dokument, unter dem
ist die Wurzel HTML-Element oder Tag, HTML,

328
00:14:16,860 --> 00:14:19,980
die dann über zwei
Kinder, Kopf und Körper.

329
00:14:19,980 --> 00:14:21,750
>> Und dann wiederum hat den Kopf eines Titels.

330
00:14:21,750 --> 00:14:23,440
Und Titel hat eine Textwert.

331
00:14:23,440 --> 00:14:26,130
Und Körper in ähnlicher Weise einen Textwert.

332
00:14:26,130 --> 00:14:29,220
Also, wenn Sie bequem sind Sprichwort
dass ja, man könnte diesen HTML nehmen

333
00:14:29,220 --> 00:14:32,080
und zeichnen Sie ein Bild wie
Dazu ist die rechte Seite

334
00:14:32,080 --> 00:14:35,910
ist eine schöne mentales Modell, denn jetzt
dass wir JavaScript ein Programmier

335
00:14:35,910 --> 00:14:39,960
Sprache, Browser können
auszuführen und zu interpretieren, für Sie,

336
00:14:39,960 --> 00:14:42,690
es stellt sich heraus, dass das, was
Wir sind dabei, im Code zu tun

337
00:14:42,690 --> 00:14:45,320
wird beginnen, diese zu manipulieren
Baumstruktur im Speicher.

338
00:14:45,320 --> 00:14:47,070
Wir haben nicht zu bauen
der Baum im Speicher.

339
00:14:47,070 --> 00:14:49,880
Wir haben nicht eine Art zu tun
pset-five-style-Datenstruktur

340
00:14:49,880 --> 00:14:50,650
Komplexität.

341
00:14:50,650 --> 00:14:54,610
Der Browser, schön genug, auf
Interpretieren HTML oben nach unten,

342
00:14:54,610 --> 00:14:58,600
links oder rechts, ist buchstäblich werde
Hand uns das Äquivalent eines Zeigers

343
00:14:58,600 --> 00:15:00,840
in diesem gesamten Baum kostenlos.

344
00:15:00,840 --> 00:15:02,150
Er tut all die harte Arbeit.

345
00:15:02,150 --> 00:15:05,520
Das ist, was Mozilla und Apple
und andere haben für uns getan.

346
00:15:05,520 --> 00:15:09,400
>> Und JavaScript werden wir
in der Lage, zu kontrollieren und zu ändern und zu tun

347
00:15:09,400 --> 00:15:12,910
interessante Dinge zu
dieser Baum, sonst bekannten

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

349
00:15:15,880 --> 00:15:17,110
Welche Arten von Dingen?

350
00:15:17,110 --> 00:15:19,030
Nun stellt sich heraus, dass
in JavaScript gibt es

351
00:15:19,030 --> 00:15:22,800
Diese kurze Liste der
Ereignisse, die stattfinden kann.

352
00:15:22,800 --> 00:15:26,330
Und wir haben nicht wirklich benutzt
Wort der Woche, da Null und pset

353
00:15:26,330 --> 00:15:28,240
Null, wenn wir sprachen über Scratch.

354
00:15:28,240 --> 00:15:31,390
Die meisten von euch wahrscheinlich nicht genutzt haben
ein Ereignis in Ihrem Scratch-Projekt.

355
00:15:31,390 --> 00:15:33,850
Aber Sie sich vielleicht erinnern
der einfache Marco Polo

356
00:15:33,850 --> 00:15:36,760
beispielsweise, wo wir zwei hatten
Sprites, von denen sagte Marco.

357
00:15:36,760 --> 00:15:40,180
Die andere, von denen dann auf Zuhören
und zu hören, dass die Veranstaltung, sagte, Polo.

358
00:15:40,180 --> 00:15:42,080
Wenn nicht, fühlen sich frei,
Blick zurück, dass weit zurück.

359
00:15:42,080 --> 00:15:44,450
>> Aber das ist nur um
sagen, und Sie können Art

360
00:15:44,450 --> 00:15:47,730
folgern aus den Namen von diesen
Dinge, JavaScript, es stellt sich heraus,

361
00:15:47,730 --> 00:15:53,200
wird uns einen Weg, um zu hören geben
für die Maus nach unten gehen oder Maus hinauf

362
00:15:53,200 --> 00:15:57,920
oder Schlüssel hinunter oder Schlüssel
nach oben oder onsubmit onselect

363
00:15:57,920 --> 00:15:59,740
oder onresizing etwas.

364
00:15:59,740 --> 00:16:03,060
Mit anderen Worten, jede physikalische Einwirkung
dass ein Mensch mit einem Browser zu nehmen

365
00:16:03,060 --> 00:16:08,210
dass Sie jeden Tag tun, können Sie schreiben
Code für das hört für diese Ereignisse

366
00:16:08,210 --> 00:16:10,220
und tut dann etwas Passendes.

367
00:16:10,220 --> 00:16:14,130
>> Zum Beispiel, wenn Sie Google Maps,
was passiert, wenn Sie klicken und bewegen

368
00:16:14,130 --> 00:16:16,250
die Maus, in der Regel?

369
00:16:16,250 --> 00:16:17,758
Wenn Sie klicken und ziehen?

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
Genau.

373
00:16:22,200 --> 00:16:23,159
Über die Karte zu bewegen beginnt.

374
00:16:23,159 --> 00:16:25,616
So können Sie eine Art sehen, was
hier, was ist da drüben.

375
00:16:25,616 --> 00:16:27,130
Und wie funktioniert Google zu implementieren, dass?

376
00:16:27,130 --> 00:16:29,421
Nun, vermutlich sind sie
mit ein paar dieser Veranstaltung

377
00:16:29,421 --> 00:16:31,720
Zuhörer, eine,
sagt, hören Sie auf der Maus

378
00:16:31,720 --> 00:16:35,410
down-- so, wenn der Benutzer physikalisch
drückt seine Trackpads oder dessen Maus

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

380
00:16:36,010 --> 00:16:38,350
Und dann werden wir suchen
so etwas wie Bewegung

381
00:16:38,350 --> 00:16:41,145
oder ein anderer Fall, dass
ermöglicht es uns, ziehen Sie zu erfassen.

382
00:16:41,145 --> 00:16:45,910
Und in der Tat ist in ähnlicher Weise in dieses Schlepp
Punkt Punkt Punkt Liste der möglichen Optionen.

383
00:16:45,910 --> 00:16:49,140
>> Also das sein wird, ein leistungsfähiges
Möglichkeit zum Starten der Reaktion auf den Benutzer

384
00:16:49,140 --> 00:16:52,824
noch bevor er oder sie tatsächlich Klicks
etwas expliziter wie vorzulegen.

385
00:16:52,824 --> 00:16:55,240
Aber wir werden die Einführung
ein paar Themen, um dorthin zu gelangen.

386
00:16:55,240 --> 00:16:58,570
Aber zunächst wollen wir Übergangs
bis zu einem gewissen eigentlichen Code.

387
00:16:58,570 --> 00:17:01,450
Also werde ich gehen
vor und eröffnen dom-0,

388
00:17:01,450 --> 00:17:05,869
Das ist ein sehr einfaches Beispiel
hier, dass, wenn ich Bilder in einfach

389
00:17:05,869 --> 00:17:08,500
hat diese Eingabe hier für mich.

390
00:17:08,500 --> 00:17:12,410
Und ich werde weitermachen und geben Sie
"David" für meinen Namen, und klicken Sie auf Absenden.

391
00:17:12,410 --> 00:17:17,940
>> Und dann, wenn auch Art von billig, I
haben diese Aufforderung, das erscheint, die besagt,

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

393
00:17:19,244 --> 00:17:21,740
So ist diese Art von
wie unser "Hallo Welt"

394
00:17:21,740 --> 00:17:25,150
dass wir eine Weile zurück in C hat und
auch in PHP, weil ich dynamisch

395
00:17:25,150 --> 00:17:26,310
ausgegeben meinen Namen.

396
00:17:26,310 --> 00:17:28,230
Ich kann den Namen jemand anderes tun.

397
00:17:28,230 --> 00:17:31,240
Ich konnte einfach, dies zu ändern,
wie, Hannah, klicken Sie auf Senden.

398
00:17:31,240 --> 00:17:33,780
Und in der Tat, die kleinen Pop-up-Änderungen.

399
00:17:33,780 --> 00:17:36,650
>> Jetzt sind Pop-ups eine der
am meisten missbrauchte Merkmale des Web.

400
00:17:36,650 --> 00:17:38,520
Und in der Tat zurück in
die Tag Popup-Blocker

401
00:17:38,520 --> 00:17:40,820
in Mode kam, weil Sie
würde zu einem gewissen website-- gehen

402
00:17:40,820 --> 00:17:43,604
vielleicht eine fragwürdige place--
das wäre dann plötzlich

403
00:17:43,604 --> 00:17:46,020
starten peppering Bildschirm
mit einem ganzen Bündel von Pop-ups.

404
00:17:46,020 --> 00:17:49,700
Und so diese Fähigkeit, Pop-up-
Fenster vor dem Benutzer

405
00:17:49,700 --> 00:17:52,372
ist nicht besonders gewesen
von der Menschheit gut aufgenommen.

406
00:17:52,372 --> 00:17:54,080
Also das ist, warum Sie zu sehen
dies zu verhindern, was,

407
00:17:54,080 --> 00:17:55,706
das nur macht die ganze Sache hässlich.

408
00:17:55,706 --> 00:17:57,996
So werden wir einen Bedarf
bessere Möglichkeit, den Benutzer aufzufordern.

409
00:17:57,996 --> 00:17:59,350
Aber jetzt scheint es, dass, um zu arbeiten.

410
00:17:59,350 --> 00:18:03,320
Also einfach intuitiv, was
scheint hier geschehen?

411
00:18:03,320 --> 00:18:07,870
Ich gehen Sie vor und klicken Sie auf Senden, und
dann ist etwas passiert, klar.

412
00:18:07,870 --> 00:18:12,870
Aber was ist nicht passiert, dass geschah
letzte Woche jedes Mal wenn ich geklickt verfassen?

413
00:18:12,870 --> 00:18:15,940
Was nicht auf dem Bildschirm passieren?

414
00:18:15,940 --> 00:18:17,170
Es tut uns leid?

415
00:18:17,170 --> 00:18:18,010
Seite neu laden.

416
00:18:18,010 --> 00:18:19,720
Die URL überhaupt nicht ändern.

417
00:18:19,720 --> 00:18:22,250
Ich sagte, dies sei dom-0,
und ich bin immer noch im Dom-0.

418
00:18:22,250 --> 00:18:26,890
Normalerweise würden wir zu einem anderen umzuziehen
URL wie register.php oder dergleichen.

419
00:18:26,890 --> 00:18:29,560
>> Aber selbst, wenn ich entlassen
dieses Ding, indem Sie auf OK,

420
00:18:29,560 --> 00:18:32,310
feststellen, dass der URL
bleibt komplett gestellt.

421
00:18:32,310 --> 00:18:35,350
Und in der Tat, wenn ich ein wenig
skeptisch, lassen Sie mich eröffnen Chrome.

422
00:18:35,350 --> 00:18:36,860
Lassen Sie mich öffnen die Registerkarte Netzwerk.

423
00:18:36,860 --> 00:18:38,360
Und beachten Sie, es ist leer im Moment.

424
00:18:38,360 --> 00:18:40,700
Lassen Sie mich gehen Sie vor und erneut Maria.

425
00:18:40,700 --> 00:18:42,810
Es gibt keinen Netzwerkverkehr immer.

426
00:18:42,810 --> 00:18:44,320
Es gibt also keine HTTP.

427
00:18:44,320 --> 00:18:47,620
>> Also ja, wenn ich mir den Quelltext
für this-- lassen Sie mich dieses Fenster zu schließen

428
00:18:47,620 --> 00:18:49,480
und gehen Sie auf Quelle anzeigen.

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

430
00:18:50,400 --> 00:18:53,520
Es sieht aus wie es einige
Neue Etiketten, darunter Skript.

431
00:18:53,520 --> 00:18:57,490
Werfen wir also einen Blick in CS50
IDE genau, was ich geschickt an den Benutzer.

432
00:18:57,490 --> 00:19:00,690
>> So, hier ist ist-- lassen
konzentrieren sich auf nur die HTML.

433
00:19:00,690 --> 00:19:03,500
Hier ist die untere Hälfte der dom-0.html.

434
00:19:03,500 --> 00:19:07,830
Und beachten Sie, dass es einen Titel hat,
ein Kopf-Tag, ein Body-Tag, ein Formular-Tag.

435
00:19:07,830 --> 00:19:11,257
Aber was springt für Sie als
anders, vor allem wenn Sie noch nie habe

436
00:19:11,257 --> 00:19:12,590
geschrieben beliebige JavaScript-sich.

437
00:19:12,590 --> 00:19:14,920
Lassen Sie mich ein wenig blättern
nach rechts hier.

438
00:19:14,920 --> 00:19:18,330
Ich habe einen Eingang hat,
ein weiterer Eingang für vorzulegen.

439
00:19:18,330 --> 00:19:21,410
Ich habe eine ID, welche Art von neuen ist bekam.

440
00:19:21,410 --> 00:19:22,790
Aber wir konnten sehen dies mit CSS.

441
00:19:22,790 --> 00:19:24,480
Was ist auf jeden Fall neu?

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
Nett.

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

446
00:19:32,760 --> 00:19:35,630
Also, wo onsubmit sagt, dass es,
bemerken, was scheint zu folgen.

447
00:19:35,630 --> 00:19:38,740
Dies ist ein Attribut
in HTML-Nomenklatur.

448
00:19:38,740 --> 00:19:40,944
Sein Wert ist diese Zeichenfolge in Anführungszeichen hier.

449
00:19:40,944 --> 00:19:42,860
Und das sieht ein wenig
seltsam auf den ersten Blick.

450
00:19:42,860 --> 00:19:44,050
Es ist nicht HTML.

451
00:19:44,050 --> 00:19:45,240
Es ist nicht CSS.

452
00:19:45,240 --> 00:19:47,580
Dies ist, wie Sie sich vorstellen können, JavaScript.

453
00:19:47,580 --> 00:19:51,850
So scheint es, dass in diesem gebaut
Web-Seite ist eine Funktion mit dem Namen zu begrüßen.

454
00:19:51,850 --> 00:19:54,250
Und ich, die nur folgern
denn es ist ein Wort, zu begrüßen.

455
00:19:54,250 --> 00:19:55,880
Es hat eine offene paren,
close paren, Semikolon.

456
00:19:55,880 --> 00:19:58,095
Sieht aus wie ein C-Funktion,
sieht aus wie eine PHP-Funktion.

457
00:19:58,095 --> 00:20:00,370
>> Und in der Tat, es ist zu gehen
ist eine JavaScript-Funktion.

458
00:20:00,370 --> 00:20:01,440
Dann bin ich der Rückkehr false.

459
00:20:01,440 --> 00:20:03,440
Wir kommen wieder zu kommen
dass in nur einem Augenblick.

460
00:20:03,440 --> 00:20:05,320
Aber wo ist diese Funktion definiert?

461
00:20:05,320 --> 00:20:07,950
Nun lassen Sie mich nach oben
an den Anfang der Datei.

462
00:20:07,950 --> 00:20:11,710
Und auch wenn es eine lange Schlange,
es ist relativ einfach.

463
00:20:11,710 --> 00:20:15,000
Lassen Sie mich hier und herauszoomen
konzentrieren sich auf diese vier Linien.

464
00:20:15,000 --> 00:20:17,137
>> So in JavaScript, so
wie PHP, die Sie gerade

465
00:20:17,137 --> 00:20:19,720
sagen wir, buchstäblich das Wort "Funktion"
der Name der Funktion,

466
00:20:19,720 --> 00:20:22,700
und dann Klammern mit irgend
arguments-- keine Argumente in diesem Fall.

467
00:20:22,700 --> 00:20:25,290
Und es gibt keinen Rückgabetyp
in JavaScript, genau wie PHP.

468
00:20:25,290 --> 00:20:29,470
So ist es ein wenig lockerer als C.
Öffnen Sie geschweifte Klammer, in der Nähe geschweifte Klammer.

469
00:20:29,470 --> 00:20:33,270
In JavaScript Erbaut ist ein function--
keine empfohlene function--

470
00:20:33,270 --> 00:20:35,730
sondern eine Funktion namens alert
deren einziger Zweck im Leben

471
00:20:35,730 --> 00:20:38,620
ist, dass ziemlich hässlich, um nach oben ziehen
auffordern, dass wir vor einem Moment sah.

472
00:20:38,620 --> 00:20:40,950
>> Nun, das ist eine Art, einen Schluck.

473
00:20:40,950 --> 00:20:42,560
Was ist denn hier los?

474
00:20:42,560 --> 00:20:45,840
Lassen Sie uns also beginnen,
Markieren Sie hier alles.

475
00:20:45,840 --> 00:20:48,540
Das ist das gleiche Argument, um zu alarmieren.

476
00:20:48,540 --> 00:20:49,530
Und was ist denn los?

477
00:20:49,530 --> 00:20:51,200
Dies sieht aus wie eine Saite.

478
00:20:51,200 --> 00:20:59,180
Und es zeigt sich, anders als PHP und Gegensatz
C, spielt es keine Rolle, in JavaScript

479
00:20:59,180 --> 00:21:01,090
wenn Sie einzelne oder doppelte Anführungszeichen.

480
00:21:01,090 --> 00:21:02,060
Sie werden gleichwertig sein.

481
00:21:02,060 --> 00:21:03,769
Und ehrlich gesagt, es ist nur,
beliebt in diesen Tagen

482
00:21:03,769 --> 00:21:06,726
für JavaScript-Programmierer immer
einfache Anführungszeichen aus irgendeinem Grund.

483
00:21:06,726 --> 00:21:07,840
Es ist nur die Sache zu tun.

484
00:21:07,840 --> 00:21:09,710
Aber wir doppelte Anführungszeichen verwenden, wie gut.

485
00:21:09,710 --> 00:21:11,540
>> So plus ist ein neues Zeichen.

486
00:21:11,540 --> 00:21:14,512
Aber diejenigen, die getan haben,
dies vor, was bedeutet zzgl das?

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

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

489
00:21:17,120 --> 00:21:18,570
So sahen wir dies in PHP.

490
00:21:18,570 --> 00:21:20,315
Es ist nur der Punkt
Operator in PHP, dass

491
00:21:20,315 --> 00:21:22,000
werden zwei Strings miteinander zu verketten.

492
00:21:22,000 --> 00:21:24,000
C war ein Schmerz im Nacken, dies zu tun.

493
00:21:24,000 --> 00:21:27,310
Rückruf von pset sechs, das war
ein besonderer Schmerz im Nacken,

494
00:21:27,310 --> 00:21:29,470
müssten Sie verwenden
so etwas wie strcat

495
00:21:29,470 --> 00:21:31,660
Nach Zuweisung von Speicher
auf dem Stack oder dem Heap.

496
00:21:31,660 --> 00:21:34,243
Sie musste durch Reifen springen
um nur zwei Strings verketten.

497
00:21:34,243 --> 00:21:36,040
In JavaScript, es ist super einfach.

498
00:21:36,040 --> 00:21:38,030
Verwenden Sie einfach die Plus-Operator zwischen ihnen.

499
00:21:38,030 --> 00:21:41,420
>> So ist die komplexe schau
Sache, scheint dies zu sein,

500
00:21:41,420 --> 00:21:43,490
da am Ende
Diese ganze Reihe, ich habe gerade

501
00:21:43,490 --> 00:21:45,797
verketten auf einem Ausrufezeichen.

502
00:21:45,797 --> 00:21:48,380
Also, wenn, was auftauchen wurde
"Hallo, David", "hallo, Hannah,"

503
00:21:48,380 --> 00:21:52,740
"Hallo, Maria," und so weiter, klar
dass Mittelding zwischen den beiden

504
00:21:52,740 --> 00:21:55,215
Pluspunkte müssen mir den Zugang zu dem, was geben?

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

506
00:21:58,855 --> 00:22:01,991
Was ist da drin sicher?

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

508
00:22:02,490 --> 00:22:05,090
Also werde ich hier die vorgibt
antworten ihren Namen, nicht wahr?

509
00:22:05,090 --> 00:22:10,380
So ihr Name tauchte in der letzten
Ergebnis. Also, was bedeutet das?

510
00:22:10,380 --> 00:22:15,080
Nun, dass ich bereits vorgeschlagen
Bild, das die sogenannte DOM

511
00:22:15,080 --> 00:22:18,580
hat diese spezielle Wurzelelement
Weg bis oben genannte Dokument.

512
00:22:18,580 --> 00:22:21,660
Und nun stellt sich heraus, das wird
um eine spezielle globale Variable sein

513
00:22:21,660 --> 00:22:25,250
in JavaScript, in die eine ist gebaut
ganze Reihe von nützlichen Funktionen.

514
00:22:25,250 --> 00:22:31,770
Unter den nützlichen Funktionalität ist die
Fähigkeit, zu jeder Nachfahre-Knoten zu erhalten.

515
00:22:31,770 --> 00:22:37,760
Diese Quadrate oder Rechtecke oder Ellipsen
sind nur die Knoten in einem Baum, so zu sprechen.

516
00:22:37,760 --> 00:22:41,850
>> So stellt sich heraus, dass in gebaut
JavaScript ist Dokumentobjekt

517
00:22:41,850 --> 00:22:47,300
ist eine Funktion, die auch als eine bekannte
Verfahren, das nennt man getElementById.

518
00:22:47,300 --> 00:22:50,410
Die Syntax für den Aufruf
eine Funktion in JavaScript

519
00:22:50,410 --> 00:22:55,220
Sie, die innerhalb eines Objekts oder
Variable ist nur mit der Punktnotation.

520
00:22:55,220 --> 00:22:57,950
Und wir in C sah dies
was die Struktur Syntax.

521
00:22:57,950 --> 00:23:03,530
Sie sehen dies in pset sieben, Art,
Art, wenn Sie sehen, CS50 :: Abfrage.

522
00:23:03,530 --> 00:23:08,070
Der Doppelpunkt Doppelpunkt in PHP ist eine weitere
Art der Aufruf einer Funktion, die ist

523
00:23:08,070 --> 00:23:09,260
innerhalb eines Objekts.

524
00:23:09,260 --> 00:23:11,960
>> Aber jetzt in JavaScript,
es ist nur ein Punkt.

525
00:23:11,960 --> 00:23:14,170
Und so diese Funktion,
schön genug, Art der

526
00:23:14,170 --> 00:23:16,810
sagt, was es does-- Element ID zu bekommen.

527
00:23:16,810 --> 00:23:20,280
Ein Element ist nur ein anderer Name
für einen Tag oder Knoten im DOM.

528
00:23:20,280 --> 00:23:26,900
Und so bekommen Element ID "name"
bedeutet this-- hier ist mein HTML.

529
00:23:26,900 --> 00:23:31,910
Und auf der Grundlage dieser HTML, was
Knoten oder welche HTML-Tag bin ich

530
00:23:31,910 --> 00:23:35,097
werde programmübergeben werden
durch den Aufruf document.getElementById?

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

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

533
00:23:38,500 --> 00:23:42,670
Ich werde die Eingabe erhalten
Element dort mit der ID "name".

534
00:23:42,670 --> 00:23:45,140
So Insbesondere können Sie
denken Sie an dieser Funktion,

535
00:23:45,140 --> 00:23:49,560
GetElementByID, als eine Möglichkeit zu geben
sichern einen Zeiger auf diesen bestimmten Knoten

536
00:23:49,560 --> 00:23:50,060
im Baum.

537
00:23:50,060 --> 00:23:51,980
Wir haben noch nicht gezogen
Baum, aber es ist ein Weg

538
00:23:51,980 --> 00:23:54,900
des Erhaltens Zugriff darauf
Rechteck oder das Rechteck

539
00:23:54,900 --> 00:23:58,090
durch eindeutig identifiziert sie über ihre ID.

540
00:23:58,090 --> 00:23:59,760
>> Nun, warum ist das sinnvoll?

541
00:23:59,760 --> 00:24:01,510
Nun stellt sich heraus,
dass, sobald Sie bekommen haben

542
00:24:01,510 --> 00:24:07,220
dass der Knoten, die sich aus dem Rechteck
Bild, dass der Knoten in der es,

543
00:24:07,220 --> 00:24:10,660
wiederum hat eine ganze Reihe von
properties-- Schlüsselwertpaare

544
00:24:10,660 --> 00:24:13,480
oder Daten, von denen die eine genannte Wert.

545
00:24:13,480 --> 00:24:16,500
So wörtlich, es ist ein bisschen eine
Mund voll, die ganze Sache zu erklären.

546
00:24:16,500 --> 00:24:19,370
Aber am Ende des Tages,
all dies tut, ist Ihnen

547
00:24:19,370 --> 00:24:23,070
eine Zeichenfolge, die der Benutzer eingegeben
in dieser hierarchisch.

548
00:24:23,070 --> 00:24:24,820
Aber ich weiß nicht wie ein
Einige dieser Dinge.

549
00:24:24,820 --> 00:24:27,590
Oder besser gesagt, es gibt einige Neugier noch.

550
00:24:27,590 --> 00:24:28,870
Das alles schien zu funktionieren.

551
00:24:28,870 --> 00:24:33,420
Warum denken Sie, ich zurück
Falsch nach dem Aufruf zu begrüßen?

552
00:24:33,420 --> 00:24:35,910
Dies sieht ein wenig hässlich, dass
Ich habe zwei Erklärungen gibt

553
00:24:35,910 --> 00:24:38,730
durch Semikolon getrennt.

554
00:24:38,730 --> 00:24:39,310
Raten Sie mal.

555
00:24:39,310 --> 00:24:44,390
Wenn ich entfernt return false, was
passieren könnte, nur instinktiv?

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

557
00:24:46,990 --> 00:24:49,460
Sorry, noch einmal sagen?

558
00:24:49,460 --> 00:24:50,530
>> Öffnen Sie eine Reihe von Windows.

559
00:24:50,530 --> 00:24:52,780
So möglicherweise vielleicht etwas
wie das passieren würde.

560
00:24:52,780 --> 00:24:54,422
Was sonst?

561
00:24:54,422 --> 00:24:55,630
Könnte eine Anforderung, wo verfassen?

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

563
00:24:59,109 --> 00:25:00,510
Auf der gleichen Seite.

564
00:25:00,510 --> 00:25:03,110
So, in der Tat, dass diese
die hier näher zu beantworten,

565
00:25:03,110 --> 00:25:05,890
obwohl, anders
in der Vergangenheit, ich habe nicht

566
00:25:05,890 --> 00:25:09,300
spezifiziert das Attribut action,
die normalerweise wir tun müssen.

567
00:25:09,300 --> 00:25:11,780
Stellt sich heraus, es gibt einen Standardwert.
Wenn Sie keine Aktion angeben,

568
00:25:11,780 --> 00:25:15,370
Es ist wie gesagt Zitat, Zitat Ende
oder den Namen der Datei selbst,

569
00:25:15,370 --> 00:25:17,850
die in diesem Fall würde
sein wie dom-0.html.

570
00:25:17,850 --> 00:25:20,420
Es ist nur irgendwie abgeleitet,
oder vielmehr stillschweigend.

571
00:25:20,420 --> 00:25:22,420
>> Und so, wenn ich nicht das tun, wollen wir bemerken.

572
00:25:22,420 --> 00:25:23,230
Lassen Sie mich dies zu speichern.

573
00:25:23,230 --> 00:25:25,270
Und ich habe return false entfernt.

574
00:25:25,270 --> 00:25:27,759
Lassen Sie mich wieder in dieses
Beispiel und Kraft wieder einlegen.

575
00:25:27,759 --> 00:25:30,800
Und Sie vielleicht gesehen haben mir vorschlagen
Diese auf CS50 Diskutieren ein paar Mal.

576
00:25:30,800 --> 00:25:34,560
Wenn überhaupt jemals handeln funky und die
Browser ist nicht so verhält, wie Sie erwarten,

577
00:25:34,560 --> 00:25:37,410
oft werden Sie halten möchten
Umschalttaste und klicken Sie auf Neu laden.

578
00:25:37,410 --> 00:25:41,480
Das wird jede Datei zu zwingen, neu zu laden
und nicht mit lokalen Cache Ihres Browsers

579
00:25:41,480 --> 00:25:47,032
oder kopieren, so dass jetzt, lass mich gehen Sie vor und
öffne meine Inspektor die Registerkarte Netzwerk.

580
00:25:47,032 --> 00:25:48,740
Ich werde Sie auf
Preserve Log, weil ich

581
00:25:48,740 --> 00:25:51,660
will es nicht, um die Zeilen zu löschen
wenn ich einmal weg anderswo entführt.

582
00:25:51,660 --> 00:25:54,650
>> Lassen Sie mich vor hier zu gehen und
Typ in Andi, klicken Sie auf Senden.

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

584
00:25:55,150 --> 00:25:56,480
Das scheint wie erwartet.

585
00:25:56,480 --> 00:25:57,440
Er sagt, "hallo, Andi."

586
00:25:57,440 --> 00:25:59,420
Lassen Sie mich Sie auf OK.

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

588
00:26:00,610 --> 00:26:05,100
Beachten Sie, dass die Seite gewechselt,
wenn auch in der Originalseite.

589
00:26:05,100 --> 00:26:06,770
Beachten Sie die URL Art verändert.

590
00:26:06,770 --> 00:26:09,430
Er fügte hinzu, ein Fragezeichen,
die in der Regel ein Indikator

591
00:26:09,430 --> 00:26:11,260
dass wir versucht, etwas vorzulegen.

592
00:26:11,260 --> 00:26:13,570
Und dann an der Unterseite,
noch deutlicher,

593
00:26:13,570 --> 00:26:17,570
hier ist die eigentliche HTTP-Anforderung,
die eine Antwort von 200 Got That

594
00:26:17,570 --> 00:26:18,490
brachte mich wieder hier.

595
00:26:18,490 --> 00:26:20,250
>> Das ist also nicht das, was
wir wollen, das Richtige zu tun?

596
00:26:20,250 --> 00:26:22,166
Weil ich nicht möchte
laden Sie die ganze Seite.

597
00:26:22,166 --> 00:26:24,970
Ich wollte, anstatt zur Rückkehr
falsch, um Kurzschluss

598
00:26:24,970 --> 00:26:28,840
Standardverhalten des Browsers, die
war natürlich, um die Seite zu stellen.

599
00:26:28,840 --> 00:26:31,700
>> Werfen wir also einen Blick auf ein
marginal besseres Beispiel.

600
00:26:31,700 --> 00:26:33,920
Dies ist dom Version eins.

601
00:26:33,920 --> 00:26:36,680
Und beachten Sie die folgenden.

602
00:26:36,680 --> 00:26:39,150
Es ist in Ordnung, wenn Sie nicht wissen grok
alle Codezeilen.

603
00:26:39,150 --> 00:26:41,750
Aber was grundlegend anders ist
über diese Umsetzung?

604
00:26:41,750 --> 00:26:44,690
Ich werde vor, es verhält sich der
gleichen, macht das Gleiche.

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

606
00:26:49,320 --> 00:26:51,570
Was habe ich natürlich anders gemacht?

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

608
00:26:52,266 --> 00:26:53,182
>> ZIELGRUPPE: [unverständlich].

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
So die Funktion definiert differently--
mit anderen Worten, fehlen in der Form,

612
00:27:08,620 --> 00:27:13,180
dort oben auf der Linie 7-- oder
vielmehr Linie 8-- nicht mehr

613
00:27:13,180 --> 00:27:15,070
habe ich die onsubmit Attribut.

614
00:27:15,070 --> 00:27:16,750
Im vorherigen Beispiel, hatte ich dies.

615
00:27:16,750 --> 00:27:18,530
Und dann habe ich wörtlich schrieb mein Code hier.

616
00:27:18,530 --> 00:27:20,210
Und dann sagte ich wieder falsch.

617
00:27:20,210 --> 00:27:22,180
Und wenn es nicht reiben
Sie verkehrt noch,

618
00:27:22,180 --> 00:27:26,140
sollte es zu starten, sofern
so, wie in HTML,

619
00:27:26,140 --> 00:27:29,530
als wir begannen, zusammen zu mischen es
mit CSS in Stilattribute,

620
00:27:29,530 --> 00:27:32,890
es gerade erst begonnen, um ein wenig zu bekommen
chaotisch oder fühlen sich ein wenig falsch.

621
00:27:32,890 --> 00:27:35,020
>> Ebenso hier, wenn
Sie nehmen HTML-Startseite,

622
00:27:35,020 --> 00:27:37,419
und dann werden Sie automatisch
plop JavaScript-Code

623
00:27:37,419 --> 00:27:40,460
in der Mitte einer Zeichenfolge in Anführungszeichen, es ist
nicht zu sehr wartbar.

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

625
00:27:40,630 --> 00:27:43,690
Es ist nicht auf den ersten noch auf der Hand
Ort, wo das JavaScript-Code ist.

626
00:27:43,690 --> 00:27:46,590
So wäre es wirklich schön, wie
ein Grundsatz der besseren Design,

627
00:27:46,590 --> 00:27:50,500
Halten wir die HTML komplett
getrennt von unseren JavaScript.

628
00:27:50,500 --> 00:27:53,150
>> So, das zu tun, was wir
hier ist der following-- getan

629
00:27:53,150 --> 00:27:56,790
wir einfach nur HTML-Markup.

630
00:27:56,790 --> 00:28:00,730
Und so in der Version eines dieser, alle
Ich habe eine Form mit einer eindeutigen ID.

631
00:28:00,730 --> 00:28:04,630
Und dann hier unten, ich bin unter Ausnutzung
einer Besonderheit JavaScript

632
00:28:04,630 --> 00:28:08,480
wobei ich haben kann, was ist
rief eine anonyme Funktion.

633
00:28:08,480 --> 00:28:14,150
So stellt sich heraus, dass, wenn ich rufe
document.getElementById der "Demo"

634
00:28:14,150 --> 00:28:18,890
das ist, wie er mir einen Zeiger auf
dieser Knoten in meinem Baum, der Formularelement,

635
00:28:18,890 --> 00:28:20,100
sozusagen.

636
00:28:20,100 --> 00:28:22,220
>> Nun, ich weiß nur, von
zu wissen, ein wenig HTML

637
00:28:22,220 --> 00:28:26,330
jetzt sind wir mit etwas online zu lesen
Referenz, dass ein Formularelement unterstützt

638
00:28:26,330 --> 00:28:29,950
eine ganze Reihe von Event listeners-- in
Mit anderen Worten, die Wäsche Liste der Ereignis

639
00:28:29,950 --> 00:28:31,700
Zuhörer, die wir vorhin gesehen haben.

640
00:28:31,700 --> 00:28:35,950
Ich weiß, dass das Lesen der Dokumentation
dass onsubmit ist ein gültiges Ereignis

641
00:28:35,950 --> 00:28:38,520
Listener für ein Formularelement.

642
00:28:38,520 --> 00:28:41,480
>> Also, wenn ich weiß, dass,
es ist sicher für mich zu tun

643
00:28:41,480 --> 00:28:45,390
die following-- diesen Knoten erhalten
von dem Baum, dem Formularelement,

644
00:28:45,390 --> 00:28:48,070
und um in die so genannte
onsubmit Eigentum.

645
00:28:48,070 --> 00:28:49,880
Also der Punkt bedeutet nur,
Dies ist eine Eigenschaft,

646
00:28:49,880 --> 00:28:52,180
wie ein spezieller Wert darin.

647
00:28:52,180 --> 00:28:55,590
Und was für Datentyp bin ich
Zuweisen, offenbar,

648
00:28:55,590 --> 00:28:58,900
um onsubmit, das ist,
effektiv eine Variable innerhalb

649
00:28:58,900 --> 00:29:01,010
dieser Knoten im Baum?

650
00:29:01,010 --> 00:29:04,100
Es ist ein Feld innerhalb dieser Struktur.

651
00:29:04,100 --> 00:29:05,810
Was ist in der Datentyp?

652
00:29:05,810 --> 00:29:07,030
>> Eine Funktion, yeah.

653
00:29:07,030 --> 00:29:08,607
So stellt sich heraus, dass PHP hat diese.

654
00:29:08,607 --> 00:29:10,440
Und auch wenn wir
nicht darüber sagen,

655
00:29:10,440 --> 00:29:16,240
C hat auch Funktionszeiger, die
Fähigkeit zu übergeben, und weisen Funktionen

656
00:29:16,240 --> 00:29:18,330
als Werte Variablen 'selbst.

657
00:29:18,330 --> 00:29:20,280
Und wir werden nicht
zurück zu C. zurückbilden

658
00:29:20,280 --> 00:29:23,250
Aber jetzt stellt sich heraus, dass
auf der rechten Seite Hier

659
00:29:23,250 --> 00:29:26,260
obwohl es ein wenig sieht
flippig, dieses Mittel, hey-Browser,

660
00:29:26,260 --> 00:29:27,550
geben Sie mir eine Funktion.

661
00:29:27,550 --> 00:29:30,560
Ich werde nicht einmal die Mühe geben
ihm einen Namen, weil ich buchstäblich

662
00:29:30,560 --> 00:29:34,450
gehen zu ordnen nennen wir es
die Adresse dieses Funktions

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

664
00:29:35,994 --> 00:29:39,160
Mit anderen Worten, Browser, brauchen Sie nicht
zu wissen, was diese Funktion nennt.

665
00:29:39,160 --> 00:29:41,890
Sie müssen nur wissen,
wo es im Speicher.

666
00:29:41,890 --> 00:29:44,210
Und so reicht es aus, nur um
haben ein Gleichheitszeichen gibt

667
00:29:44,210 --> 00:29:48,240
und nicht zu stören Benennung dieses, wie
foo oder zu grüßen oder ein anderer Begriff.

668
00:29:48,240 --> 00:29:50,150
Und jetzt ist dies nur eine stilistische Sache.

669
00:29:50,150 --> 00:29:53,100
Ich konnte dieses geschweifte Klammer zu bewegen
auf the-- sorry-- nächsten Zeile

670
00:29:53,100 --> 00:29:54,750
wie wir normalerweise tun CS50.

671
00:29:54,750 --> 00:29:57,550
Aber in JavaScript, es ist
tatsächlich stilistisch gemeinsamen

672
00:29:57,550 --> 00:30:00,450
nur halten die geschweifte Klammer, die
erste, an diesem ersten Zeile.

673
00:30:00,450 --> 00:30:02,620
>> Aber später, gibt es
nichts Interessantes.

674
00:30:02,620 --> 00:30:05,830
Zu öffnende geschweifte Klammer gerade
abgrenzt Beginn meiner Funktion.

675
00:30:05,830 --> 00:30:09,320
Die Funktion ist jetzt
identisch, außer ich habe

676
00:30:09,320 --> 00:30:11,452
enthalten die return false
innerhalb dieser Funktion.

677
00:30:11,452 --> 00:30:13,160
Denn es stellt sich out--
und Sie würden nur

678
00:30:13,160 --> 00:30:14,980
weiß das aus Lese
die documentation--

679
00:30:14,980 --> 00:30:19,740
dass, wenn die Funktion, die Sie zuweisen
um die onsubmit Handler false zurückgibt,

680
00:30:19,740 --> 00:30:23,420
der Browser nur kennt und akzeptiert
nicht, um das Formular an einen Server übermitteln.

681
00:30:23,420 --> 00:30:27,210
Wenn es gibt true zurück, wird sie unterwerfen
es auf einen Server aus Gründen, werden wir sehen,

682
00:30:27,210 --> 00:30:28,700
sind nützlich, in nur einem Augenblick.

683
00:30:28,700 --> 00:30:31,000
>> Und dann das Semikolon nach
die geschweifte Klammer dort gerade

684
00:30:31,000 --> 00:30:32,541
bedeutet, ich bin fertig Definition der Funktion.

685
00:30:32,541 --> 00:30:36,600
Sie wissen, was, so bald anrufen
wie Sie eine Vorlage zu hören.

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

687
00:30:37,100 --> 00:30:40,650
Dies ist immer noch diskutierbar Art von hässlich.

688
00:30:40,650 --> 00:30:42,190
Also, was können wir noch tun?

689
00:30:42,190 --> 00:30:45,000
>> Nun stellt sich heraus, dann
Version zwei, die der last-- ist

690
00:30:45,000 --> 00:30:46,780
und wir nur einen Blick auf diese.

691
00:30:46,780 --> 00:30:49,850
Auf die Gefahr hin machen
es hässlicher, stellt sich heraus,

692
00:30:49,850 --> 00:30:52,160
dass es eine Bibliothek in
die Welt genannt jQuery.

693
00:30:52,160 --> 00:30:54,900
Und jQuery ist ein Super-
beliebten JavaScript-Bibliothek

694
00:30:54,900 --> 00:30:57,930
das ist so beliebt, dass die meisten
beliebige JavaScript-- es nicht

695
00:30:57,930 --> 00:31:00,540
ungewöhnlich, dass Menschen zu verwirren
jQuery JavaScript.

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

697
00:31:01,070 --> 00:31:04,990
JavaScript selbst hat sehr
verbose Weisen des Tuns things--

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

699
00:31:07,820 --> 00:31:10,510
Sie am Ende mit sehr
lange Zeilen Code.

700
00:31:10,510 --> 00:31:15,550
>> So ein Kerl namens John Resid,
, die tatsächlich funktioniert für ein Startup

701
00:31:15,550 --> 00:31:18,630
up in diesen Tagen, kam heraus
mit dieser Bibliothek Jahre

702
00:31:18,630 --> 00:31:22,070
vor, dass viele Menschen haben dazu beigetragen,
jQuery genannt, dass Änderungen

703
00:31:22,070 --> 00:31:23,449
Die Syntax in der folgenden Weise.

704
00:31:23,449 --> 00:31:25,740
Und damit Sie diese gesehen habe,
weil man sonst immer

705
00:31:25,740 --> 00:31:28,140
sehen dies, wenn dadurch ein
Web-basierte Abschlussprojekt,

706
00:31:28,140 --> 00:31:33,270
Dies wäre das Äquivalent haft sein
Umsetzung dieses gleiche Funktion mit

707
00:31:33,270 --> 00:31:34,630
Diese Spezialbibliothek.

708
00:31:34,630 --> 00:31:36,680
>> Nun, anstatt tease
es auseinander in seiner Gesamtheit,

709
00:31:36,680 --> 00:31:38,520
lassen Sie uns einfach an einigen Mustern zu suchen.

710
00:31:38,520 --> 00:31:44,850
Diese Syntax zu haben scheint
wie viele anonyme Funktionen

711
00:31:44,850 --> 00:31:49,584
oder namenlose Funktionen
oder Alias ​​Lambda-Funktionen?

712
00:31:49,584 --> 00:31:50,190
Zwei, nicht wahr?

713
00:31:50,190 --> 00:31:52,690
Und Sie wissen, dass, auch wenn
du bist nicht super bequem mit diesem,

714
00:31:52,690 --> 00:31:55,780
nur durch die Tatsache, daß es
sagt, function () zweimal.

715
00:31:55,780 --> 00:31:58,172
>> Und es stellt sich heraus, dass
was dieser Code ist doing--

716
00:31:58,172 --> 00:32:01,255
und wir werden eine Online-Referenzen verweisen,
schließlich für etwas Hilfe mit diesem.

717
00:32:01,255 --> 00:32:04,480
Dies bedeutet nur, dass, wenn
das Dokument fertig ist,

718
00:32:04,480 --> 00:32:07,490
gehen Sie vor und registrieren
die folgende Funktion

719
00:32:07,490 --> 00:32:12,064
als einzureichen Handler für das HTML-
Element, dessen einzigartige Idee ist Demo.

720
00:32:12,064 --> 00:32:14,480
Und dann, wenn das geschieht,
rufen Sie diese beiden Zeilen Code.

721
00:32:14,480 --> 00:32:18,677
Und das ist tragisch, eine
verbose Art zu sagen, return false.

722
00:32:18,677 --> 00:32:21,510
Und wir erwähnte dies nur, weil
Sie Code wie diesem Online zu sehen.

723
00:32:21,510 --> 00:32:23,140
Und es ist nichts zu eingeschüchtert werden.

724
00:32:23,140 --> 00:32:26,057
Sondern vielmehr, bedenken Sie, dass was ist
gehen, um gemeinsam sein in JavaScript

725
00:32:26,057 --> 00:32:26,765
ist dieses Paradigma.

726
00:32:26,765 --> 00:32:29,510
Und so, deshalb zeigen wir es für heute.

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

728
00:32:30,010 --> 00:32:32,730
Also ohne Wohnung zu
viel auf dieser Syntax,

729
00:32:32,730 --> 00:32:37,800
sind es Fragen auf
diese Beispiele oder Ideen bisher?

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

731
00:32:38,300 --> 00:32:40,220
So verwenden wir diese für etwas Nützliches.

732
00:32:40,220 --> 00:32:47,070
Erstellen einer Web-Seite, die einfach sagt hallo,
so und so ist gar nicht so interessant,

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

734
00:32:47,830 --> 00:32:51,038
Dieser wird nicht schön sein,
sondern es geht um etwas Sinnvolles zu tun.

735
00:32:51,038 --> 00:32:56,350
Lassen Sie mich wieder zu meiner Auswahl
hier und eröffnen, sagen, form 0.html.

736
00:32:56,350 --> 00:32:59,320
>> Also vermute, dies ist der Neuling
Universitätssportarten Registrierungsseite

737
00:32:59,320 --> 00:33:01,780
ohne CSS oder einem Sinn für Design.

738
00:33:01,780 --> 00:33:05,404
Und ich möchte weitermachen und
melden Sie sich hier mit einem Passwort.

739
00:33:05,404 --> 00:33:08,320
Und ich werde mit den Bedingungen einverstanden
Bedingungen und klicken Sie auf Registrieren.

740
00:33:08,320 --> 00:33:11,700
Und jetzt die Website sagt: "Sie sind
Angemeldet! (Nicht wirklich.)"

741
00:33:11,700 --> 00:33:15,070
Das scheint wie es funktionierte, aber
lassen Sie mich gehen Sie vor und zwingen reload.

742
00:33:15,070 --> 00:33:18,720
>> Und lassen Sie mich sagen, nein, Sie nicht tun
brauche meine eigentliche Email-Adresse.

743
00:33:18,720 --> 00:33:21,820
Oder vielleicht werden wir nur sagen mail drin.

744
00:33:21,820 --> 00:33:25,080
Kennwort werden, wie, 12345.

745
00:33:25,080 --> 00:33:28,810
Und dann, nur weil ich
ein Idiot, jetzt ist es 123.456.789.

746
00:33:28,810 --> 00:33:31,150
Und ich bin nicht dabei, Ihre Box zu überprüfen.

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

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

749
00:33:32,350 --> 00:33:34,920
Es gibt also mehrere Möglichkeiten
Verbesserungs hier.

750
00:33:34,920 --> 00:33:39,070
Und Sie wissen, oder werden in pset sehen
sieben, dass Sie zu schreiben code--

751
00:33:39,070 --> 00:33:41,890
und Sie haben zu schreiben, werde
Code in PHP-- zu verteidigen

752
00:33:41,890 --> 00:33:45,780
gegen diese Art von Benutzer
Fehler, da der Benutzer eindeutig

753
00:33:45,780 --> 00:33:46,790
nicht zusammengearbeitet.

754
00:33:46,790 --> 00:33:49,680
Und er oder sie dir nicht gegeben alle
Werte, die Sie auch im Format wollte oder

755
00:33:49,680 --> 00:33:50,630
dass Sie sie wollte.

756
00:33:50,630 --> 00:33:53,250
So werden Sie in pset sieben sehen, dass
wir könnten sicherlich einige

757
00:33:53,250 --> 00:33:55,680
wenn die Bedingungen, die sagen,
Wenn die E-Mail-Adresse

758
00:33:55,680 --> 00:33:59,450
ist kein username@something.edu,
Wir konnten einfach

759
00:33:59,450 --> 00:34:02,575
entschuldigen und entschuldigen uns für den Benutzer
viel, wie Sie vielleicht in pset sieben sein.

760
00:34:02,575 --> 00:34:05,700
Oder, wenn sie nicht überprüft, dass das Feld,
stellt sich heraus, in PHP können Sie erkennen, dass,

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

762
00:34:06,200 --> 00:34:09,389
Und sicher, wenn die Passwörter
nicht wie in register.php entsprechen

763
00:34:09,389 --> 00:34:11,521
für pset sieben, können Sie erkennen, dass.

764
00:34:11,521 --> 00:34:13,770
Aber das ist ein Schmerz in der
Hals, dass sie jetzt anfordern

765
00:34:13,770 --> 00:34:15,510
uns den ganzen Weg zu gehen, um den Server.

766
00:34:15,510 --> 00:34:17,053
Wird der Benutzer über den Fehler informiert.

767
00:34:17,053 --> 00:34:19,219
Und zumindest sei denn, Sie verwenden
einige Züchter Techniken,

768
00:34:19,219 --> 00:34:20,929
Jetzt müssen sie den Zurück-Pfeil klicken.

769
00:34:20,929 --> 00:34:23,300
Wäre es nicht schön sein, wie
eine Vielzahl von Websites heute,

770
00:34:23,300 --> 00:34:26,190
wenn Sie mehr unmittelbare hatten
Feedback, sofort?

771
00:34:26,190 --> 00:34:31,389
>> Mit anderen Worten, lassen Sie mich auf die Version gehen
eine, die gehen, zu sein keine hübscher.

772
00:34:31,389 --> 00:34:33,469
Aber es hat diese Funktion.

773
00:34:33,469 --> 00:34:39,590
Malan, 12345, 123456789, nicht
gehen, um das Kontrollkästchen, Register.

774
00:34:39,590 --> 00:34:41,330
Passwörter stimmen nicht überein.

775
00:34:41,330 --> 00:34:44,459
Also auch wenn dieses Fenster ist ugly--
können wir dies schließlich ersetzen

776
00:34:44,459 --> 00:34:47,000
mit so etwas wie Bootstrap,
wo es in pset sieben zu sehen

777
00:34:47,000 --> 00:34:50,239
ist ein sehr beliebtes library-- ich
zu erkennen, dass die Passwörter nicht übereinstimmen.

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

779
00:34:50,739 --> 00:34:52,530
Nun, lassen Sie mich zu beheben, dass, da der User.

780
00:34:52,530 --> 00:34:55,460
Lassen Sie mich gehen Sie vor und sagen, 12345, 12345.

781
00:34:55,460 --> 00:34:57,780
Immer noch nicht die Überprüfung der Vereinbarung.

782
00:34:57,780 --> 00:35:00,210
Sie müssen mit dem einverstanden
Geschäftsbedingungen.

783
00:35:00,210 --> 00:35:01,760
Warum also?

784
00:35:01,760 --> 00:35:04,100
>> Wenn wir bereits gesetzt haben
, dass es einen Weg gibt,

785
00:35:04,100 --> 00:35:07,260
und wir werden Sie in benötigt habe
pset sieben auf Fehler zu erkennen

786
00:35:07,260 --> 00:35:09,780
Bedingungen wie diese
serverseitige, warum sollte ich

787
00:35:09,780 --> 00:35:13,940
Mühe auch tun dies in JavaScript?

788
00:35:13,940 --> 00:35:15,850
Was ist ein Argument
für das Hinzufügen, was

789
00:35:15,850 --> 00:35:18,760
Sie als some-- zu sehen sind
gibt es zusätzliche Komplexität.

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

791
00:35:23,610 --> 00:35:25,930
>> Vielleicht gibt es keine auf den Kopf.

792
00:35:25,930 --> 00:35:26,924
Was könnte es sein?

793
00:35:26,924 --> 00:35:27,840
ZIELGRUPPE: [unverständlich].

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
Potenzielle Exploits.

797
00:35:33,530 --> 00:35:37,540
So sicher, wenn Sie nicht der Handhabung
fehlerhaften Benutzereingaben so toll,

798
00:35:37,540 --> 00:35:40,170
vielleicht ist es umso besser, wenn es
nicht einmal zu erreichen Ihrem Server.

799
00:35:40,170 --> 00:35:42,160
Ich würde es zurückzudrängen und
sagen wir, sollten Sie wahrscheinlich

800
00:35:42,160 --> 00:35:43,284
beheben diese beiden Probleme.

801
00:35:43,284 --> 00:35:44,140
Aber das ist fair.

802
00:35:44,140 --> 00:35:44,710
Was sonst?

803
00:35:44,710 --> 00:35:45,626
>> ZIELGRUPPE: [unverständlich].

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
Dieser Code, wie gesagt, ist
Auf der Client-Seite interpretiert.

807
00:35:51,680 --> 00:35:53,846
Es muss nicht auf den Server zu kümmern,
das heißt, es nicht tut

808
00:35:53,846 --> 00:35:55,930
Stoßbelastung oder die Kapazität des Servers.

809
00:35:55,930 --> 00:35:59,840
Und nun, für meine Wenigkeit,
Dies hat keine bedeutsame Wirkung

810
00:35:59,840 --> 00:36:01,970
denn ich habe einen Benutzer jetzt.

811
00:36:01,970 --> 00:36:04,010
>> Aber, wenn Sie eine sind
Website der anständige Größe,

812
00:36:04,010 --> 00:36:07,400
insbesondere die größten, wie Facebook,
desto mehr können die Menschen zu halten

813
00:36:07,400 --> 00:36:09,927
Ihres Servers, desto besser
weil einem Server, natürlich,

814
00:36:09,927 --> 00:36:12,510
nur eine endliche Menge an RAM,
eine endliche Anzahl von Gigahertz

815
00:36:12,510 --> 00:36:16,340
eine endliche Anzahl von Dingen
es pro Zeiteinheit zu tun.

816
00:36:16,340 --> 00:36:19,170
So dass, wenn es mehr Menschen in
die Welt schlagen Sie Ihren Server,

817
00:36:19,170 --> 00:36:21,750
versehentlich Anmeldung
falsch, genauso gut, wenn Sie

818
00:36:21,750 --> 00:36:23,254
kann diese Last von Ihren Server zu halten.

819
00:36:23,254 --> 00:36:25,420
Plus, vor allem auf einem beweglichen
device-- wenn Sie jemals haben

820
00:36:25,420 --> 00:36:29,190
loggen Sie sich in my.harvard oder
Yale netid oder dergleichen,

821
00:36:29,190 --> 00:36:32,330
Es ist dies die Latenz mit einer Menge von
Webseiten wie das, wodurch es dauert,

822
00:36:32,330 --> 00:36:34,110
wie eine verdammte Sekunde oder zwei mal.

823
00:36:34,110 --> 00:36:37,979
Und dann, mein Gott, wenn Sie falsch eingeben,
dann muss man zurückschlagen und wiederholen es.

824
00:36:37,979 --> 00:36:40,520
Es gibt also Latenz, insbesondere
auf langsameren Netzwerkverbindungen.

825
00:36:40,520 --> 00:36:43,030
Aber JavaScript, denn
es auf dem Client ausgeführt wird

826
00:36:43,030 --> 00:36:46,720
und muss nicht hin und her gehen
über eine potentiell langsame Internet-

827
00:36:46,720 --> 00:36:49,780
Verbindung, die Sie bekommen können
nahezu sofortige Rückmeldung.

828
00:36:49,780 --> 00:36:50,760
>> Also schauen wir uns das an.

829
00:36:50,760 --> 00:36:54,280
Lassen Sie mich zu öffnen form 0 und
sehen Sie die HTML hier.

830
00:36:54,280 --> 00:36:56,040
Und lassen Sie uns sehen, was los ist.

831
00:36:56,040 --> 00:36:59,460
Dies ist eine Form, deren
Aktion register.php.

832
00:36:59,460 --> 00:37:01,530
Ich bin gerade mit zu bekommen, so
dass ich die URL zu sehen.

833
00:37:01,530 --> 00:37:05,030
Aber für Passwörter, die wir sicherlich wollen würde
um dies zu ändern, in der Realität zu stellen.

834
00:37:05,030 --> 00:37:06,910
Hier ist ein Eingabefeld vom Typ Text.

835
00:37:06,910 --> 00:37:09,050
Hier ist eine andere Eingangs
Feld des Typs Passwort.

836
00:37:09,050 --> 00:37:13,150
Hier ist, wenn Sie noch nie gesehen haben,
ein Eingang vom Typ Checkbox.

837
00:37:13,150 --> 00:37:15,250
>> Aber es gibt kein JavaScript
hier auch immer.

838
00:37:15,250 --> 00:37:18,170
Dies ist nur HTML-Code,
geht an register.php.

839
00:37:18,170 --> 00:37:21,020
Aber in Version eins, wo ich
begonnen, diese Pop-ups zu bekommen,

840
00:37:21,020 --> 00:37:23,010
mal sehen, was tatsächlich passiert hier.

841
00:37:23,010 --> 00:37:26,757
In Version eins, was
Ich werde see-- I

842
00:37:26,757 --> 00:37:29,340
dachte ich könnte genug Stall
mit genügend Worte, aber ich lief aus.

843
00:37:29,340 --> 00:37:35,180

844
00:37:35,180 --> 00:37:38,590
>> In Version one-- da wir gehen.

845
00:37:38,590 --> 00:37:43,180
In Version eins, bemerken die following--
und ist nicht die beste Implementierung

846
00:37:43,180 --> 00:37:44,420
aber es ist meine erste.

847
00:37:44,420 --> 00:37:47,680
Beachten Sie, dass unterhalb der
Form, ich habe ein Script-Tag.

848
00:37:47,680 --> 00:37:49,430
Und ein Script-Tag bedeutet,
hey, Browser, hier

849
00:37:49,430 --> 00:37:52,340
kommt etwas Code in,
Typischerweise JavaScript.

850
00:37:52,340 --> 00:37:54,420
Und nun, bemerken, was ich tue.

851
00:37:54,420 --> 00:37:59,070
Auf line-- kann ich kaum
Lesen es-- Leitung 32, heißt es,

852
00:37:59,070 --> 00:38:01,420
var form-- mich so geben
eine Variable namens Form.

853
00:38:01,420 --> 00:38:05,049
Und dann bekommen document.getElementId
der "Registrierung".

854
00:38:05,049 --> 00:38:05,590
Was ist das?

855
00:38:05,590 --> 00:38:07,290
Nun, lassen Sie mich zurückspulen hier oben.

856
00:38:07,290 --> 00:38:11,510
Und beachtet, ah, gab ich das Formularelement
eine willkürliche, sondern beschreibend Idee

857
00:38:11,510 --> 00:38:13,050
der Registrierung.

858
00:38:13,050 --> 00:38:16,820
So gibt mir eine Variable,
ermöglicht es mir, dass der Knoten zu greifen,

859
00:38:16,820 --> 00:38:19,580
dieses Rechteck in der Baumform genannt.

860
00:38:19,580 --> 00:38:24,460
form.onsubmit Mittel, hey-Browser,
registrieren einen Ereignis-Listener

861
00:38:24,460 --> 00:38:25,470
auf diesem Formular.

862
00:38:25,470 --> 00:38:28,890
In anderen Worten, wenn diese Form
vorgelegt, führen Sie den folgenden Code ein.

863
00:38:28,890 --> 00:38:30,810
Es hat keinen Namen, da brauchen
Warum brauchen Sie, um die Namen?

864
00:38:30,810 --> 00:38:32,880
Sie müssen nur wissen,
was Sie ausführen, ergo

865
00:38:32,880 --> 00:38:35,610
es ist ein anonymer oder Lambda-Funktion.

866
00:38:35,610 --> 00:38:37,632
Und das Funktion
alle diese Zeilen hier.

867
00:38:37,632 --> 00:38:40,840
Und nun, um ehrlich zu sein, auch wenn Sie
nie geschrieben haben könnte JavaScript

868
00:38:40,840 --> 00:38:44,200
vor, es ist nur C und PHP-Logik.

869
00:38:44,200 --> 00:38:51,720
Also, wenn form.email.value == "" -
so dass, wenn die E-Mail-Feld leer ist,

870
00:38:51,720 --> 00:38:54,980
schreien der Benutzer mit "Du must
Ihre E-Mail-Adresse. "

871
00:38:54,980 --> 00:38:58,980
Else if form.password.value
leer Schrei beim Anwender,

872
00:38:58,980 --> 00:39:00,400
"Sie müssen Ihr Kennwort zu bieten."

873
00:39:00,400 --> 00:39:04,240
>> Noch interessanter ist logisch,
wenn form.password.value nicht

874
00:39:04,240 --> 00:39:08,630
gleich form.confirmation.value--
wo hast Bestätigung her?

875
00:39:08,630 --> 00:39:09,470
Lassen Sie mich zurückzuspulen.

876
00:39:09,470 --> 00:39:12,870
Nun, ich rief dieser Eingang
Feld hier Ihr Passwort ein.

877
00:39:12,870 --> 00:39:15,180
Und ich nannte diese hier Bestätigung.

878
00:39:15,180 --> 00:39:17,850
Ich konnte es genannt haben
Kennwort zwei oder irgendetwas anderes.

879
00:39:17,850 --> 00:39:20,560
Ich bin einfach nur logisch prüfen
dass diese beiden dieselben sind.

880
00:39:20,560 --> 00:39:25,760
Else-- es stellt sich heraus das ist Mr. Boole
again-- einen Boolean-Wert, das Kontrollkästchen.

881
00:39:25,760 --> 00:39:29,810
Also, wenn ich sage, Ausrufe point--
wenn nicht form.agreement.checked,

882
00:39:29,810 --> 00:39:31,820
schreien den Benutzer als auch.

883
00:39:31,820 --> 00:39:34,470
>> Also diese Syntax du wirst sehen ist
sehr häufig in JavaScript,

884
00:39:34,470 --> 00:39:35,970
wo Sie diese gepunkteter Schreibweise.

885
00:39:35,970 --> 00:39:37,460
Sie beginnen mit einem Objekt hier.

886
00:39:37,460 --> 00:39:41,430
Sie tauchen ein in tiefer ein, um
eine Eigenschaft, wie vergessen.

887
00:39:41,430 --> 00:39:43,280
Und dann haben Sie an ihrem tatsächlichen Wert zu erhalten.

888
00:39:43,280 --> 00:39:45,830
Und wieder, hier ist der Eingang.

889
00:39:45,830 --> 00:39:47,310
Hier ist das Passwort.

890
00:39:47,310 --> 00:39:50,860
Und sein Wert ist unabhängig von der
Menschen tatsächlich eingetippt.

891
00:39:50,860 --> 00:39:53,610
>> Also in all diesen
Fällen, kehrte ich falsch.

892
00:39:53,610 --> 00:39:55,800
Aber wenn nicht, komme ich wahr.

893
00:39:55,800 --> 00:39:58,030
Und jetzt sehen wir eine
zwingenden Verwendung, wenn

894
00:39:58,030 --> 00:40:00,620
Sie false zurück, um
zu stoppen, was der Benutzer tut

895
00:40:00,620 --> 00:40:03,200
und stellen Sie ihn oder sie wählen,
wieder oder geben Sie es erneut.

896
00:40:03,200 --> 00:40:05,870
Sonst kehren wir wahr.

897
00:40:05,870 --> 00:40:08,585
>> Und lassen Sie mich eine Einführung
andere Variante dieses gerade

898
00:40:08,585 --> 00:40:13,140
ein gewisses Verständnis davon Samen.

899
00:40:13,140 --> 00:40:16,850
Nun, in der Version 2 dieses, form 2--
Ich werde es mit einer Welle von einer Hand zu tun.

900
00:40:16,850 --> 00:40:19,920
Dies ist für diejenigen, neugierig,
die jQuery-Version,

901
00:40:19,920 --> 00:40:23,330
diejenigen von Ihnen, um möchten Sie vielleicht
plantschen in der jeweiligen Bibliothek.

902
00:40:23,330 --> 00:40:25,145
Aber lassen Sie uns start-- und irgendwelche Fragen?

903
00:40:25,145 --> 00:40:29,230
Lassen Sie mich zum Moment, weil pausieren
das war schnell und viel.

904
00:40:29,230 --> 00:40:32,610
>> Aber das Schöne daran ist, dass alle
der Code ist so ziemlich das gleiche.

905
00:40:32,610 --> 00:40:33,985
Das neue Zeug ist, was ist der Dom?

906
00:40:33,985 --> 00:40:35,115
Was sind diese Rechtecke?

907
00:40:35,115 --> 00:40:35,990
Was sind diese Knoten?

908
00:40:35,990 --> 00:40:37,540
Was ist eine anonyme Funktion?

909
00:40:37,540 --> 00:40:38,830
Was ist ein Event-Handler?

910
00:40:38,830 --> 00:40:43,480
Aber zum Glück, die meisten, dass nur
Vollkreis von, sagen wir, der Woche Null.

911
00:40:43,480 --> 00:40:43,980
Gut.

912
00:40:43,980 --> 00:40:46,070
So etwas, etwas mehr interessant?

913
00:40:46,070 --> 00:40:49,340
Nun, zunächst einmal, lass mich gehen
voran und erschließen Google Maps.

914
00:40:49,340 --> 00:40:53,360
Und Sie werden feststellen, dass für ein
Moment, auf den Bruchteil einer Sekunde,

915
00:40:53,360 --> 00:40:55,930
merken was passiert, wenn
Ich klicke schnell genug.

916
00:40:55,930 --> 00:40:59,720
Und diese Verbindung an der Harvard ist so
schnell, dass Sie nicht wirklich bemerken.

917
00:40:59,720 --> 00:41:04,469
Aber was tun Sie Art von Art zu sehen
wenn ich klicken und ziehen Sie wirklich schnell?

918
00:41:04,469 --> 00:41:07,010
Diejenigen von Ihnen, das Ansehen von Online,
wenn Sie dies zu 0,5x Geschwindigkeit verlangsamen,

919
00:41:07,010 --> 00:41:09,640
Sie diese besser sehen kann.

920
00:41:09,640 --> 00:41:13,550
>> Was war nur passiert
bevor ich angeklickt und gezogen?

921
00:41:13,550 --> 00:41:15,900
Lassen Sie mich versuchen hier-- lass mich tun
etwas anderes, wie 90210.

922
00:41:15,900 --> 00:41:17,550
Gehen wir weit entfernt.

923
00:41:17,550 --> 00:41:19,000
Das war wirklich schnell, zu.

924
00:41:19,000 --> 00:41:22,460
Wie wäre es mit Disney World?

925
00:41:22,460 --> 00:41:23,190
Da gehen wir.

926
00:41:23,190 --> 00:41:23,690
OK.

927
00:41:23,690 --> 00:41:26,030
Was hast du für einen Sekundenbruchteil zu sehen?

928
00:41:26,030 --> 00:41:27,200
Gerade, wie, Quadrate, oder?

929
00:41:27,200 --> 00:41:28,930
Platzhalter für Fliesen?

930
00:41:28,930 --> 00:41:30,270
>> Nun, was ist denn hier los?

931
00:41:30,270 --> 00:41:35,410
Google Maps ist ein schönes Beispiel dafür,
Diese Technologie, die aufgerufen Ajax.

932
00:41:35,410 --> 00:41:38,510
Und das ist, wo wir beginnen
verwenden Sie das JavaScript in besonders

933
00:41:38,510 --> 00:41:39,277
verführerische Art und Weise.

934
00:41:39,277 --> 00:41:41,610
Zurück in den Tag, gab es
Diese Website namens MapQuest.

935
00:41:41,610 --> 00:41:44,120
Und ich sollte genommen haben ein
Screenshot von dieser aus den 1990er Jahren,

936
00:41:44,120 --> 00:41:45,820
wo, wenn man wollte
schauen Sie hier auf der Karte,

937
00:41:45,820 --> 00:41:48,590
Sie würde buchstäblich klicken Sie einen Pfeil
an der Spitze, welches Ihnen

938
00:41:48,590 --> 00:41:49,870
ein anderer Platz von der Karte.

939
00:41:49,870 --> 00:41:51,790
Wenn Sie nach links zu bewegen, du wolltest
klickte ein Pfeil, die Sie zeigte,

940
00:41:51,790 --> 00:41:53,210
ein anderer Platz von der Karte.

941
00:41:53,210 --> 00:41:54,840
Und einige Websites immer noch tun dies heute.

942
00:41:54,840 --> 00:41:57,820
Aber auch MapQuest bekommen hat
besser, wie Google Maps.

943
00:41:57,820 --> 00:42:01,880
>> Statt dessen, was ist besser, diese
Tage Websites, die AJAX verwenden.

944
00:42:01,880 --> 00:42:04,510
AJAX-- sonst bekannt
Asynchronous JavaScript and XML,

945
00:42:04,510 --> 00:42:08,370
Das ist nur eine andere Art zu sagen
eine Technologie oder Technik,

946
00:42:08,370 --> 00:42:14,200
ermöglicht einen Browser mit JavaScript
zusätzliche HTTP-Anfragen stellen

947
00:42:14,200 --> 00:42:16,390
nachdem die Seite geladen wurde.

948
00:42:16,390 --> 00:42:17,479
Also, was bedeutet das?

949
00:42:17,479 --> 00:42:19,270
Nun, wäre es freundlich sein
von lästigen in Google Mail

950
00:42:19,270 --> 00:42:21,103
wenn jedes Mal, wenn Sie wollte
auf Ihre E-Mails abrufen,

951
00:42:21,103 --> 00:42:24,940
Sie buchstäblich getroffen hatte Strg-R oder
Befehlstaste-R oder klicken Sie auf die Schaltfläche Neu laden

952
00:42:24,940 --> 00:42:26,580
und die ganze verflixte Seite wäre neu zu laden.

953
00:42:26,580 --> 00:42:26,800
Recht?

954
00:42:26,800 --> 00:42:28,460
Es würde blinken weiß
wahrscheinlich für die zweite.

955
00:42:28,460 --> 00:42:30,043
Sie würden die dumme Fortschrittsbalken zu sehen.

956
00:42:30,043 --> 00:42:33,170
Und nur um zu sehen, wenn Sie neu sind
Mail, die gesamte Web-Seite und der URL

957
00:42:33,170 --> 00:42:34,580
Sie befinden sich auf müsste neu zu laden.

958
00:42:34,580 --> 00:42:35,960
>> Aber das ist nicht das, was in Gmail passiert.

959
00:42:35,960 --> 00:42:36,459
Recht?

960
00:42:36,459 --> 00:42:40,300
Wenn Sie eine neue E-Mail in erhalten
Gmail, was passiert auf dem Bildschirm?

961
00:42:40,300 --> 00:42:41,480
Es zeigt nur, oder?

962
00:42:41,480 --> 00:42:44,280
Es ist einfach magisch erscheint
als eine neue Zeile in der Tabelle.

963
00:42:44,280 --> 00:42:47,030
Dass tatsächlich beinhaltet eine
anständige Menge an Komplexität.

964
00:42:47,030 --> 00:42:51,892
In der Tat, wenn Sie diesen Baum zu denken,
welche, obwohl ist einfach hier

965
00:42:51,892 --> 00:42:54,100
Gmail-- und ich muss schauen
auf den Code sure-- zu sein

966
00:42:54,100 --> 00:42:58,710
wahrscheinlich hat eine HTML-Tabelle oder vielleicht
eine ungeordnete Liste, die es macht

967
00:42:58,710 --> 00:43:01,060
jede Ihrer Posteingänge E-Mails als.

968
00:43:01,060 --> 00:43:04,050
>> Und so, wenn Sie es sich vorstellen, diese
ist ein Baum im Speicher, wenn Sie

969
00:43:04,050 --> 00:43:09,050
Verwendung von Google Mail, die Art sieht Art
wie diese, wenn Google erkennt, ooh,

970
00:43:09,050 --> 00:43:12,770
Sie eine neue E-Mail haben, ist es nicht
wollen den ganzen Baum wieder aufzubauen.

971
00:43:12,770 --> 00:43:16,430
Vielmehr, um den Knoten in finden will es
der Baum, der Ihrem Posteingang darstellt

972
00:43:16,430 --> 00:43:18,580
und legen Sie einfach einen neuen Knoten.

973
00:43:18,580 --> 00:43:24,640
>> So sehr ähnlich PSET fünf, in dem Sie
musste Knoten in einer Hash-Tabelle einfügen,

974
00:43:24,640 --> 00:43:28,410
in ähnlicher Weise werden von Google über
JavaScript-Code, der es geschrieben hat,

975
00:43:28,410 --> 00:43:31,890
Traverse diesem Baum, herauszufinden, wo
ist, dass Posteingang Teil des Fensters,

976
00:43:31,890 --> 00:43:33,440
und fügen Sie eine neue Zeile.

977
00:43:33,440 --> 00:43:37,460
Und eine neue Zeile bedeutet eine gerade
oder mehrere neue Knoten in einem Baum.

978
00:43:37,460 --> 00:43:41,340
>> Usw. AJAX ist diese Technik
dass ermöglicht genau das.

979
00:43:41,340 --> 00:43:44,440
Sobald Sie eine URL besucht haben,
aber verrückt lang es ist,

980
00:43:44,440 --> 00:43:46,472
und sobald die Seite
geladen wurden, können Sie immer noch

981
00:43:46,472 --> 00:43:48,430
greifen mehr Daten aus der
internet-- ob

982
00:43:48,430 --> 00:43:52,460
E-Mail oder eine Kachel eines map--
packen es hinter den Kulissen

983
00:43:52,460 --> 00:43:55,290
und setzen Sie sie in die Seite
so dass der menschliche nicht wirklich

984
00:43:55,290 --> 00:43:56,910
dafür zu warten.

985
00:43:56,910 --> 00:43:58,980
>> Facebook Messenger funktioniert auf die gleiche Art und Weise.

986
00:43:58,980 --> 00:44:01,562
Eine beliebige Anzahl anderer websites--
oh, tatsächlich, auch diese.

987
00:44:01,562 --> 00:44:04,270
Ich meine, das ist, ehrlich gesagt, Art
eine lästige verfügen in diesen Tagen.

988
00:44:04,270 --> 00:44:07,500
Wenn ich starten die Suche nach diesen cats--
ist eine Art schreckliche Benutzererfahrung.

989
00:44:07,500 --> 00:44:08,990
Es nur beginnt mit der Suche für mich.

990
00:44:08,990 --> 00:44:10,050
Gut was tut sie?

991
00:44:10,050 --> 00:44:12,920
Die URL hat sich nicht wirklich verändert
seit ich angefangen habe zu schreiben.

992
00:44:12,920 --> 00:44:17,330
Aber was über das Gehen
wire-- OK, hmm interessant.

993
00:44:17,330 --> 00:44:20,470
Was ist für das Gehen
Draht hier wird immer seltsamer.

994
00:44:20,470 --> 00:44:21,090
>> OK.

995
00:44:21,090 --> 00:44:24,670
Also lassen Sie mich gehen Sie vor und überprüfen
Element und gehen Sie zur Registerkarte Netzwerk

996
00:44:24,670 --> 00:44:27,040
und zu versuchen, dies zu machen,
technische und weniger über Katzen.

997
00:44:27,040 --> 00:44:32,595
Wie ich schreibe, wörtlich, Katzen
und--, was passiert

998
00:44:32,595 --> 00:44:37,710
per-- Ich bin nicht dabei, daß klicken.

999
00:44:37,710 --> 00:44:38,210
Gut.

1000
00:44:38,210 --> 00:44:44,280
Also hier unten, ist das, was jeder geschieht
Zeit, die ich geben Sie einen Charakter, scheinbar?

1001
00:44:44,280 --> 00:44:45,000
Wie, niedrigen Niveau?

1002
00:44:45,000 --> 00:44:47,860
Was ist mit jedem von denen geschieht
Zeichen Ich schreibe an meiner Tastatur?

1003
00:44:47,860 --> 00:44:48,359
Ja?

1004
00:44:48,359 --> 00:44:50,950
ZIELGRUPPE: [unverständlich].

1005
00:44:50,950 --> 00:44:52,340
>> DAVID MALAN: Genau.

1006
00:44:52,340 --> 00:44:55,600
Jede dieser Figuren ist
gehen zu Google, ein zu einer Zeit.

1007
00:44:55,600 --> 00:44:58,490
Sie werden den Aufbau einer Zeichenfolge
auf ihrem Server, stellt

1008
00:44:58,490 --> 00:44:59,936
alles, was ich in bisher eingegeben haben.

1009
00:44:59,936 --> 00:45:01,810
Und jedesmal, wenn ich schreibe
ein anderer Charakter, sie

1010
00:45:01,810 --> 00:45:04,530
nutzen ihre geheime Zutat von a
Suchalgorithmus und herauszufinden,

1011
00:45:04,530 --> 00:45:07,370
meint er diese Katze Seite
oder diese Katze Seite oder dergleichen?

1012
00:45:07,370 --> 00:45:10,620
Also in gewisser Weise bietet sie mich mit ein
bessere Erfahrung, dass ich gar nicht

1013
00:45:10,620 --> 00:45:11,860
brauche, um meine Gedanken zu vervollständigen.

1014
00:45:11,860 --> 00:45:14,440
Und in der Tat, es ist eine nützliche
Sache, Autovervollständigen im Allgemeinen.

1015
00:45:14,440 --> 00:45:17,690
Wenn ihre Algorithmen sind gut genug,
und wenn meine Recherchen sind offensichtlich genug,

1016
00:45:17,690 --> 00:45:19,300
Ich habe nicht das ganze Wort eingeben.

1017
00:45:19,300 --> 00:45:22,110
Sie gehen, um mir zu sagen, was es
ist Ich bin eigentlich auf der Suche nach.

1018
00:45:22,110 --> 00:45:25,940
So was nennt Google Instant
Suche Nur mit AJAX,

1019
00:45:25,940 --> 00:45:30,820
Verwendung von Code, die sie zu anzufordern
zusätzliche Inhalte über einen Webbrowser

1020
00:45:30,820 --> 00:45:34,026
hinter den Kulissen mit diesem
neue Sprache, JavaScript.

1021
00:45:34,026 --> 00:45:35,400
So haben wir ein paar Minuten.

1022
00:45:35,400 --> 00:45:37,710
Und lassen Sie mich rufen Sie mein Kumpel
Colton auf die Bühne,

1023
00:45:37,710 --> 00:45:40,090
da es schien,
Besonders Spaß letzte Mal

1024
00:45:40,090 --> 00:45:42,290
, eine Technologie einzuführen
dass einige von euch

1025
00:45:42,290 --> 00:45:44,769
haben ihr Interesse zum Ausdruck gebracht
in für Abschlussarbeiten.

1026
00:45:44,769 --> 00:45:47,310
Wir dachten, es würde Spaß machen, zu bringen
up Freiwilliger, obwohl, heute

1027
00:45:47,310 --> 00:45:50,074
Ihnen zeigen, einen Zusatz zu
diese, die Sie-- ermöglicht ja,

1028
00:45:50,074 --> 00:45:50,990
Ich sah zuerst diese Hand.

1029
00:45:50,990 --> 00:45:52,900
Komm auf.

1030
00:45:52,900 --> 00:45:53,560
Sehr gut gemacht.

1031
00:45:53,560 --> 00:45:55,035
Gut gemacht.

1032
00:45:55,035 --> 00:45:57,410
Ich werde dieses Projekt
der Bildschirm in nur einem Augenblick.

1033
00:45:57,410 --> 00:45:58,150
Wie ist dein Name für alle?

1034
00:45:58,150 --> 00:45:59,180
>> EFA: Ich bin 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: Schön, Sie zu sehen.

1040
00:46:01,250 --> 00:46:01,600
Gut.

1041
00:46:01,600 --> 00:46:02,590
Lassen Sie mich diese bereit.

1042
00:46:02,590 --> 00:46:04,423
Kommen Sie vorbei, um die
Mitte mit Colton hier.

1043
00:46:04,423 --> 00:46:07,050
Welche Colton hat in seinen Händen
ist heute eine Fernbedienung.

1044
00:46:07,050 --> 00:46:10,440
So und nicht nur dort stehen in einem
dreidimensionale Welt schaut sich um

1045
00:46:10,440 --> 00:46:14,080
als Colton tat, jetzt EFA kann
tatsächlich herumlaufen, indem Sie auf,

1046
00:46:14,080 --> 00:46:16,689
unten, links und rechts, wie ein
Nintendo oder Xbox-Controller.

1047
00:46:16,689 --> 00:46:18,230
EFA: Ich werde auf die Bühne fallen ab.

1048
00:46:18,230 --> 00:46:20,500
DAVID MALAN: Ich will
stehen rund hier.

1049
00:46:20,500 --> 00:46:21,991
Aber das ist ein Risiko.

1050
00:46:21,991 --> 00:46:22,490
OK.

1051
00:46:22,490 --> 00:46:25,690
Also zögern Sie nicht und setzen Sie die auf.

1052
00:46:25,690 --> 00:46:29,315
Lassen Sie mich gehen Sie vor und
wechseln Sie zu dem Bildschirm hier.

1053
00:46:29,315 --> 00:46:30,670
Lassen Sie mich die Beleuchtung dimmen.

1054
00:46:30,670 --> 00:46:32,780
Und Colton, lassen Sie mich
kommen Ständer neben dir.

1055
00:46:32,780 --> 00:46:35,520
>> Wissen Sie, hier zu erklären möchten
mit dem Mikrofon, was wir tun?

1056
00:46:35,520 --> 00:46:36,380
Bitte schön.

1057
00:46:36,380 --> 00:46:37,280
>> COLTON: Sicher.

1058
00:46:37,280 --> 00:46:39,980
So jetzt sind wir
Laden Sie den Oculus,

1059
00:46:39,980 --> 00:46:43,070
Ich denke, operating-- nicht in Betrieb
System, aber das Hauptprogramm, wobei

1060
00:46:43,070 --> 00:46:46,630
Sie alle Spiele zugreifen und
Anwendungen, die in der Bibliothek sind.

1061
00:46:46,630 --> 00:46:50,060
So jetzt ist zu sagen,
Tippen Sie das Touchpad, um zu beginnen.

1062
00:46:50,060 --> 00:46:53,430
Touchpad geht auf das sein,
rechte Seite des Headsets.

1063
00:46:53,430 --> 00:46:54,569
So voran gehen und tap--

1064
00:46:54,569 --> 00:46:55,110
EFA: Oh, Mann.

1065
00:46:55,110 --> 00:46:56,443
DAVID MALAN: Ja, dort gehen Sie.

1066
00:46:56,443 --> 00:47:00,340

1067
00:47:00,340 --> 00:47:02,460
Die Qualität Efa ist zu sehen
ist viel höher Qualität.

1068
00:47:02,460 --> 00:47:03,831
Dies ist nur die Wi-Fi hier.

1069
00:47:03,831 --> 00:47:05,580
COLTON: Also, was du bist
tun zu wollen,

1070
00:47:05,580 --> 00:47:08,350
wird nach oben schauen
rechten Seite des Bildschirms.

1071
00:47:08,350 --> 00:47:10,420
Yep, das Spiel auf der ganz oben rechts.

1072
00:47:10,420 --> 00:47:14,780
Und dann, wenn Sie mit der Auswahl sind
es, tippen Sie auf das Touchpad wieder.

1073
00:47:14,780 --> 00:47:17,010
Ich denke, seine Dreadhalls.

1074
00:47:17,010 --> 00:47:20,820
Und dann ist hier hier a-- lassen
mich halten Ihre Brille für Sie.

1075
00:47:20,820 --> 00:47:24,420

1076
00:47:24,420 --> 00:47:25,790
>> Also gab ich ihm nur einen Controller.

1077
00:47:25,790 --> 00:47:28,886
So, jetzt kann er das Spiel zu kontrollieren.

1078
00:47:28,886 --> 00:47:30,510
Er kann in der Umgebung und solche Sachen zu bewegen.

1079
00:47:30,510 --> 00:47:31,968
Also zögern Sie nicht und schauen nach oben.

1080
00:47:31,968 --> 00:47:33,640
Sie sollten sehen, Neues Spiel.

1081
00:47:33,640 --> 00:47:36,310
Also zögern Sie nicht und Sie können das tun.

1082
00:47:36,310 --> 00:47:39,320
Jetzt sollten Sie in der Lage, zu kontrollieren
sich mit der Steuerung,

1083
00:47:39,320 --> 00:47:43,860
wie auch, so schnell wie
Das Spiel lädt hier oben.

1084
00:47:43,860 --> 00:47:46,356
Dies könnte ein wenig beängstigend.

1085
00:47:46,356 --> 00:47:47,300
>> EFA: Jetzt sagen Sie mir.

1086
00:47:47,300 --> 00:47:50,132
OK.

1087
00:47:50,132 --> 00:47:51,080
>> COLTON: Alles klar.

1088
00:47:51,080 --> 00:47:52,650
So bestätigen Sie, dass Sie sich bewegen können.

1089
00:47:52,650 --> 00:47:52,750
OK.

1090
00:47:52,750 --> 00:47:53,583
Sie können sich bewegen.

1091
00:47:53,583 --> 00:47:54,300
Perfekt.

1092
00:47:54,300 --> 00:47:56,470
Also, wenn Sie nach unten schauen, haben Sie eine Karte.

1093
00:47:56,470 --> 00:47:58,170
Karte zeigt Ihnen, wo Sie sind.

1094
00:47:58,170 --> 00:47:59,720
Sie können durch den Raum zu suchen.

1095
00:47:59,720 --> 00:48:01,440
Sie können sich ganz umdrehen.

1096
00:48:01,440 --> 00:48:02,128
Ja genau.

1097
00:48:02,128 --> 00:48:02,627
Dreh dich um.

1098
00:48:02,627 --> 00:48:05,370

1099
00:48:05,370 --> 00:48:07,125
>> So sucht auf der linken Seite.

1100
00:48:07,125 --> 00:48:09,875
Ich denke, es ist etwas, das man
Abholung auf einem Fass in den Raum.

1101
00:48:09,875 --> 00:48:11,709
>> EFA: Wie bekomme ich die
Karte aus dem Weg?

1102
00:48:11,709 --> 00:48:12,375
COLTON: Schauen Sie oben.

1103
00:48:12,375 --> 00:48:12,980
Schauen Sie oben.

1104
00:48:12,980 --> 00:48:13,480
Gut.

1105
00:48:13,480 --> 00:48:13,765
Dort gehen Sie.

1106
00:48:13,765 --> 00:48:15,181
Nun gehen Sie vor und einfach umzudrehen.

1107
00:48:15,181 --> 00:48:21,460

1108
00:48:21,460 --> 00:48:24,620
Also schauen weiter auf der linken Seite.

1109
00:48:24,620 --> 00:48:25,530
In Bewegung bleiben gelassen.

1110
00:48:25,530 --> 00:48:26,960
Halten Sie suchen nach links.

1111
00:48:26,960 --> 00:48:27,541
Mach weiter.

1112
00:48:27,541 --> 00:48:28,040
Ja.

1113
00:48:28,040 --> 00:48:28,720
>> EFA: Oh, auf diese Weise.

1114
00:48:28,720 --> 00:48:29,261
>> COLTON: Ja.

1115
00:48:29,261 --> 00:48:30,999
Gehen Sie in Richtung es mit dem Controller.

1116
00:48:30,999 --> 00:48:31,540
Dort gehen Sie.

1117
00:48:31,540 --> 00:48:32,790
Nun sollte es sagen, es abholen.

1118
00:48:32,790 --> 00:48:33,360
Dort gehen Sie.

1119
00:48:33,360 --> 00:48:34,290
Heb es auf.

1120
00:48:34,290 --> 00:48:35,550
Gut.

1121
00:48:35,550 --> 00:48:38,286
Jetzt wollen wir aus diesem Raum zu bekommen.

1122
00:48:38,286 --> 00:48:42,209
Gehen Sie voran und gehen Sie zu dieser Tür.

1123
00:48:42,209 --> 00:48:45,000
So wirst du hold-- es sagt gerade
halten Sie die Taste, um sie gewaltsam zu öffnen.

1124
00:48:45,000 --> 00:48:46,333
Also zögern Sie nicht und halten Sie die Taste.

1125
00:48:46,333 --> 00:48:48,250
Yep, zwingt sie zu öffnen.

1126
00:48:48,250 --> 00:48:48,750
Gut.

1127
00:48:48,750 --> 00:48:49,410
Gut gemacht.

1128
00:48:49,410 --> 00:48:50,826
Jetzt sind wir aus dem Zimmer gehen.

1129
00:48:50,826 --> 00:48:56,970

1130
00:48:56,970 --> 00:49:01,366
Also werde ich den Rest überlassen
um Sie und sehen, was Sie herausfinden.

1131
00:49:01,366 --> 00:49:02,865
EFA: Ich werde nicht in der Dunkelkammer.

1132
00:49:02,865 --> 00:49:07,315

1133
00:49:07,315 --> 00:49:07,815
Oh, Moment.

1134
00:49:07,815 --> 00:49:09,314
Jetzt muss ich den dunklen Flur hinuntergehen?

1135
00:49:09,314 --> 00:49:10,785
OK, ich bin wieder los [unverständlich].

1136
00:49:10,785 --> 00:49:15,520

1137
00:49:15,520 --> 00:49:16,270
COLTON: Alles klar.

1138
00:49:16,270 --> 00:49:17,560
Weitere Artikel zu holen.

1139
00:49:17,560 --> 00:49:19,370
Sieht aus wie ein paar Münzen.

1140
00:49:19,370 --> 00:49:22,242
Das ist ein Schloss zu knacken.

1141
00:49:22,242 --> 00:49:24,200
So eine gesperrt, wenn Sie feststellen,
Tür, können Sie diese verwenden.

1142
00:49:24,200 --> 00:49:27,755

1143
00:49:27,755 --> 00:49:28,380
Hast Du Angst?

1144
00:49:28,380 --> 00:49:29,371
>> EFA: Noch nicht.

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
Einfach so tun, du bist
tatsächlich dort stehen.

1149
00:49:37,330 --> 00:49:39,580
Und wenn Sie drehen herum--
du musst sich daran zu gewöhnen.

1150
00:49:39,580 --> 00:49:40,752
Aber es macht Sinn.

1151
00:49:40,752 --> 00:49:43,960
DAVID MALAN: Und während Efa weiter
spielen, da wir den ganzen Tag zu tun,

1152
00:49:43,960 --> 00:49:45,381
wir alle Zehen hier.

1153
00:49:45,381 --> 00:49:48,130
Aber wir haben zwei andere Paare,
wenn Sie möchten, zu kommen und zu spielen.

1154
00:49:48,130 --> 00:49:49,980
Andernfalls werden wir sehen,
Sie als nächstes am Mittwoch.

1155
00:49:49,980 --> 00:49:51,354
Wir danken Ihnen, unseren Freiwilligen heute.

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
>> [MUSIC - "Seinfeld THEMA"]

1159
00:49:57,392 --> 00:49:58,222

1160
00:49:58,222 --> 00:50:00,180
Sprecher 1: Nun, ich bin
Putting ein neues PL Mount auf.

1161
00:50:00,180 --> 00:50:01,800
Ich habe gerade die OLPF--

1162
00:50:01,800 --> 00:50:03,980
>> Sprecher 2: Also, was
genau machst du da?

1163
00:50:03,980 --> 00:50:07,063
>> Sprecher 1: Nun, jeder von these--
Hier zeige ich Ihnen, diese in hier.

1164
00:50:07,063 --> 00:50:08,690
Sie können es hier zu sehen.

1165
00:50:08,690 --> 00:50:09,510
>> SPEAKER 3: Ich glaube, ich bin gut mit diesen.

1166
00:50:09,510 --> 00:50:09,933
Sie wollen noch mehr?

1167
00:50:09,933 --> 00:50:11,325
>> SPEAKER 4: Nein, ich bin gut. [Unverständlich].

1168
00:50:11,325 --> 00:50:12,200
>> SPEAKER 3: Nein, [unverständlich].

1169
00:50:12,200 --> 00:50:12,700
Einige haben.

1170
00:50:12,700 --> 00:50:21,165

1171
00:50:21,165 --> 00:50:22,290
Sprecher 1: Unterschiedliche Farbe.

1172
00:50:22,290 --> 00:50:22,890
Sprecher 2: OK.

1173
00:50:22,890 --> 00:50:26,690
Sprecher 1: Also letztendlich, was es
tut, ist es die Farbe passt von--