1
00:00:00,000 --> 00:00:39,630

2
00:00:39,630 --> 00:00:41,880
DAVID J. MALAN: All right,
so dass dies hier ist die Myo Arm

3
00:00:41,880 --> 00:00:44,450
Band, ein paar der wir
haben für CS50 Abschlussarbeiten.

4
00:00:44,450 --> 00:00:47,533
Und das war eine Demonstration wir in der Warteschlange
Sie im Voraus, wo im wesentlichen

5
00:00:47,533 --> 00:00:51,120
dies ziemlich eng Arm Band hier oben
hört zu Ihren Muskelbewegungen

6
00:00:51,120 --> 00:00:54,280
die dann in Software abgebildet werden
Colton Laptop hier die

7
00:00:54,280 --> 00:00:57,230
hatte iTunes und dass
Song bereits in der Warteschlange auf.

8
00:00:57,230 --> 00:01:00,270
Anstatt mich Demonstrieren dies,
Colton ist im Labor gewesen

9
00:01:00,270 --> 00:01:04,129
klar die ganze Woche immer eine Demonstration
bereit für einen tapferen Freiwilligen.

10
00:01:04,129 --> 00:01:07,430
Wenn jemand möchte kommen
auf up-- sah erste Hand.

11
00:01:07,430 --> 00:01:09,540
Komm auf.

12
00:01:09,540 --> 00:01:12,530
>> In Ordnung.

13
00:01:12,530 --> 00:01:13,886
Und was ist Ihr Name?

14
00:01:13,886 --> 00:01:14,800
>> PUBLIKUM: Äh, Maria.

15
00:01:14,800 --> 00:01:16,550
>> DAVID J. MALAN: Maria, schön dich zu sehen.

16
00:01:16,550 --> 00:01:17,310
Komm hier.

17
00:01:17,310 --> 00:01:19,550
Lassen Sie mich Ihnen Colton einzuführen.

18
00:01:19,550 --> 00:01:21,290
Colton ist diese Maria.

19
00:01:21,290 --> 00:01:23,050
>> COLTON: Hallo, schön dich zu treffen.

20
00:01:23,050 --> 00:01:24,330
>> DAVID J. MALAN: Alle
rechts, so Schritt eins, wir sind

21
00:01:24,330 --> 00:01:26,204
gehen zu müssen, Sie setzen
dies an Ihrem Unterarm

22
00:01:26,204 --> 00:01:29,280
so dass es ziemlich
dicht bis in der Nähe Ihres Ellenbogens.

23
00:01:29,280 --> 00:01:31,940
Und in der Zwischenzeit lassen Sie uns
haben auf unseren Google Glass

24
00:01:31,940 --> 00:01:33,720
und wir werden Technologien heute mischen.

25
00:01:33,720 --> 00:01:36,340
>> COLTON: Erstens werden wir zu haben,
Haken Sie diese in die Dinge.

26
00:01:36,340 --> 00:01:37,170
>> DAVID J. MALAN: OK.

27
00:01:37,170 --> 00:01:39,795
Eigentlich lassen wir Ihren Arm als
Nähe dieses Kabel wie möglich

28
00:01:39,795 --> 00:01:41,160
so dass wir zuerst zu synchronisieren es.

29
00:01:41,160 --> 00:01:42,740
>> COLTON: Lassen Sie uns dies tun.

30
00:01:42,740 --> 00:01:46,500
>> DAVID J. MALAN: Und inzwischen, so
dass jeder einen genaueren Blick zu bekommen,

31
00:01:46,500 --> 00:01:50,290
wir Andrews Kamera werfen
auf dem Bildschirm gibt.

32
00:01:50,290 --> 00:01:54,460
Also haben wir ein USB-Kabel, das ist
sie in Maria Binde gesteckt.

33
00:01:54,460 --> 00:02:00,230
Und lassen Sie mich Bildschirm Coltons werfen
oben auf dem Projektor nächsten.

34
00:02:00,230 --> 00:02:06,000
>> So Colton ist das Registrieren des Geräts
jetzt als ein Myo verbunden an dieses Kabel.

35
00:02:06,000 --> 00:02:08,060
Und nun, was Marias
werde momentan tun

36
00:02:08,060 --> 00:02:10,120
ist eigentlich durch Fuß
Die Kalibrierungsschritte

37
00:02:10,120 --> 00:02:12,830
und lehren die Software
wie ihre Muskeln reagieren

38
00:02:12,830 --> 00:02:16,070
als sie machen bestimmte vordefinierte
Gesten, die die Software versteht.

39
00:02:16,070 --> 00:02:17,910
Wenn Sie möchten, zu gehen
vor dem Bildschirm.

40
00:02:17,910 --> 00:02:26,840

41
00:02:26,840 --> 00:02:30,090
OK, immer wieder versuchen.

42
00:02:30,090 --> 00:02:31,860
>> COLTON: Gehen Sie wie folgt.

43
00:02:31,860 --> 00:02:32,970
Und so.

44
00:02:32,970 --> 00:02:34,563
Und den ganzen Weg nach rechts.

45
00:02:34,563 --> 00:02:35,922
Geh zurück.

46
00:02:35,922 --> 00:02:37,740
>> DAVID J. MALAN: OK.

47
00:02:37,740 --> 00:02:38,960
Anderen Perspektive.

48
00:02:38,960 --> 00:02:39,620
Es ist nicht wahr.

49
00:02:39,620 --> 00:02:40,350
Es ist uns.

50
00:02:40,350 --> 00:02:41,749
>> MARIA: OK.

51
00:02:41,749 --> 00:02:42,540
DAVID J. MALAN: No.

52
00:02:42,540 --> 00:02:46,720

53
00:02:46,720 --> 00:02:51,540
Gehen wir es höher, so ist es
näher an den Ellbogen, oder sogar fester.

54
00:02:51,540 --> 00:02:52,680
In Ordnung.

55
00:02:52,680 --> 00:02:53,270
>> Auf geht's.

56
00:02:53,270 --> 00:02:56,780
Dies wäre ein guter Zeitpunkt für CS52X sein.

57
00:02:56,780 --> 00:02:57,670
Dort gehen wir.

58
00:02:57,670 --> 00:02:58,760
>> Sehr schön.

59
00:02:58,760 --> 00:03:01,170
Ok.

60
00:03:01,170 --> 00:03:02,790
Thumb Pinky.

61
00:03:02,790 --> 00:03:03,380
>> Sehr schön.

62
00:03:03,380 --> 00:03:05,140
Spreizen Sie die Finger.

63
00:03:05,140 --> 00:03:06,240
Gut.

64
00:03:06,240 --> 00:03:06,910
Welle rechts.

65
00:03:06,910 --> 00:03:15,052

66
00:03:15,052 --> 00:03:17,010
Es ist merkwürdig, welche
Sie mit der linken hand--

67
00:03:17,010 --> 00:03:19,665
>> COLTON: Ja, das ist seltsam.

68
00:03:19,665 --> 00:03:21,790
DAVID J. MALAN: Welle zu
der rechte und sich zu bewegen.

69
00:03:21,790 --> 00:03:22,998
Schneller Vorlauf zu überspringen oder nächsten.

70
00:03:22,998 --> 00:03:25,020
Das ist OK Wave-Recht.

71
00:03:25,020 --> 00:03:26,650
>> MARIA: Ich don't-- warten.

72
00:03:26,650 --> 00:03:28,430
>> DAVID J. MALAN: Brauchen Sie Hilfe?

73
00:03:28,430 --> 00:03:30,027
>> COLTON: Sie sind also so gehen.

74
00:03:30,027 --> 00:03:31,860
MARIA: Es dreht das
andere Sache, wenn.

75
00:03:31,860 --> 00:03:32,390
COLTON: Es ist.

76
00:03:32,390 --> 00:03:34,250
DAVID J. MALAN: Ja, ich weiß nicht,
warum es zeigt Ihnen einen leftie.

77
00:03:34,250 --> 00:03:36,458
COLTON: Warum gehst du nicht try--
nur versuchen werde wie diese.

78
00:03:36,458 --> 00:03:38,910

79
00:03:38,910 --> 00:03:40,090
>> DAVID J. MALAN: Nein?

80
00:03:40,090 --> 00:03:42,580
Vielleicht erreichen Sie den Arm
ein wenig gerader

81
00:03:42,580 --> 00:03:46,070
und machen es abrupt wie diese.

82
00:03:46,070 --> 00:03:48,176
Ja, OK, komm schon.

83
00:03:48,176 --> 00:03:49,670
>> MARIA: Ich bin traurig.

84
00:03:49,670 --> 00:03:51,170
DAVID J. MALAN: Es ist nicht deine Schuld.

85
00:03:51,170 --> 00:03:53,018
COLTON: Es ist gut.

86
00:03:53,018 --> 00:03:55,430
DAVID J. MALAN: All Right.

87
00:03:55,430 --> 00:03:56,220
Well--

88
00:03:56,220 --> 00:03:57,620
>> MARIA: Sollten wir überspringen diese dann?

89
00:03:57,620 --> 00:03:59,620
DAVID J. MALAN: Ja, lassen Sie uns
können Sie aus dem Schneider.

90
00:03:59,620 --> 00:04:03,130
Also, wenn jemand möchte eine do
Abschlussprojekt mit diesen Schneidkante

91
00:04:03,130 --> 00:04:07,707
Hardware, erkennen es könnte nur
nehmen Sie ein wenig gewöhnungsbedürftig.

92
00:04:07,707 --> 00:04:10,290
Und this-- die Realität ist dies
ist eigentlich sehr bleeding edge.

93
00:04:10,290 --> 00:04:12,040
>> Dies ist, was heißt
der Entwickler-Kit, das

94
00:04:12,040 --> 00:04:14,956
soll im Wesentlichen ein Pre-Release sein
so dass die Menschen genau das tun,

95
00:04:14,956 --> 00:04:18,690
this-- mit ihm zu kämpfen, Figur
herauszufinden, wie die Körper der Menschen zu arbeiten

96
00:04:18,690 --> 00:04:19,980
mit der Technologie.

97
00:04:19,980 --> 00:04:21,750
Also, wenn Sie wollen,
danach nach Vortrag

98
00:04:21,750 --> 00:04:23,750
wir können Sie kommen zu lassen und
Nehmen wir ein anderes Stich an sie.

99
00:04:23,750 --> 00:04:26,970
Aber sonst, ein Applaus, wenn
wir konnten, für Maria für ihr Kommen etwas.

100
00:04:26,970 --> 00:04:28,770
>> MARIA: Danke.

101
00:04:28,770 --> 00:04:30,390
>> DAVID J. MALAN: Danke.

102
00:04:30,390 --> 00:04:34,945
Wir hängen an diesem, aber wir geben
Sie-- wie wärs mit einem Stress-Ball hier?

103
00:04:34,945 --> 00:04:38,620
Oh, und-- if-- Ja, danke.

104
00:04:38,620 --> 00:04:39,715
In Ordnung.

105
00:04:39,715 --> 00:04:45,750
Also für die Neugierigen, wenn Sie waren
nicht mit dem Klang Wahl

106
00:04:45,750 --> 00:04:47,670
dass wir es gemacht
zuvor, eine erstaunliche TV

107
00:04:47,670 --> 00:04:50,210
zeigen, dass Sie sollten unbedingt
sein Binge-Watching auf Netflix

108
00:04:50,210 --> 00:04:51,110
ist diese hier.

109
00:04:51,110 --> 00:04:54,472
>> Sprecher 1: Meine Damen und Herren,
ein Zauberer namens Josh.

110
00:04:54,472 --> 00:05:04,710

111
00:05:04,710 --> 00:05:08,050
>> DAVID J. MALAN: Und anscheinend ist es
eine Sache für mich während der Vorlesungs Text jetzt.

112
00:05:08,050 --> 00:05:11,190
Ich werde gesagt, dass Maria
hatte Geburtstag gestern.

113
00:05:11,190 --> 00:05:14,095
Also alles Gute zum Geburtstag von
CS50 an Maria als gut.

114
00:05:14,095 --> 00:05:18,720

115
00:05:18,720 --> 00:05:22,090
>> So können Sie sich in den letzten Monaten gelesen haben
dass diese Herren hier, Steve

116
00:05:22,090 --> 00:05:25,260
Ballmer, der eigentlich war
Klasse von 1977 an der Hochschule,

117
00:05:25,260 --> 00:05:27,170
kürzlich für Microsoft zurückgezogen.

118
00:05:27,170 --> 00:05:29,620
Er war ein Student hier,
dann ein paar Jahre später

119
00:05:29,620 --> 00:05:31,910
fand sich bei
Stanford Business School

120
00:05:31,910 --> 00:05:34,160
als er einen Telefon
Anruf von einem Freund von ihm,

121
00:05:34,160 --> 00:05:36,516
hatte den Flur lebte
von ihm hier in Harvard.

122
00:05:36,516 --> 00:05:38,640
Name, der Freund war Bill
Gates, und zu der Zeit,

123
00:05:38,640 --> 00:05:42,700
er versuchte, Steve rekrutieren zu sein
der erste Unternehmer, wirklich,

124
00:05:42,700 --> 00:05:45,720
bei einer kleinen Unternehmensnamen Microsoft.

125
00:05:45,720 --> 00:05:48,960
>> Eine lange Geschichte kurz, Steve
wurde schließlich gewonnen,

126
00:05:48,960 --> 00:05:52,130
trat Microsoft, wenn sie
hatte gerade 30 Mitarbeiter.

127
00:05:52,130 --> 00:05:54,300
Und von der Zeit er
vor kurzem im Ruhestand,

128
00:05:54,300 --> 00:05:58,100
hatte das Unternehmen 100.000 Mitarbeiter
in den vergangenen Jahren.

129
00:05:58,100 --> 00:06:01,171
Und so eine Webseite bekannt als The Verge
hergestellt diesen Tribut auf Video

130
00:06:01,171 --> 00:06:02,920
dass wir dachten, wir würden
geteilt, die Ihnen

131
00:06:02,920 --> 00:06:08,380
ein Gefühl dafür, wie viel Energie Steve
bringt jede Präsentation gibt er.

132
00:06:08,380 --> 00:06:11,884

133
00:06:11,884 --> 00:06:12,550
[VIDEO PLAYBACK]

134
00:06:12,550 --> 00:06:16,220
-Microsoft Ist wie ein viertes Kind.

135
00:06:16,220 --> 00:06:18,260
Kinder tun das Haus verlassen.

136
00:06:18,260 --> 00:06:21,875
In diesem Fall, denke ich,
Ich verlasse das Haus.

137
00:06:21,875 --> 00:06:23,270
Hey Bill, whazzap?

138
00:06:23,270 --> 00:06:24,200
>> -Wazzap?

139
00:06:24,200 --> 00:06:25,320
>> -Hey, Wazzap?

140
00:06:25,320 --> 00:06:28,590
Wir haben gegeben worden ein
enorme Chance.

141
00:06:28,590 --> 00:06:30,210
Und Bill gab uns die Möglichkeit dazu.

142
00:06:30,210 --> 00:06:35,520

143
00:06:35,520 --> 00:06:36,770
Ich möchte Bill dafür danken.

144
00:06:36,770 --> 00:06:39,630
Ich möchte Sie auch.

145
00:06:39,630 --> 00:06:42,500
Das Innovationstempo
ist nicht zu bremsen.

146
00:06:42,500 --> 00:06:45,140
>> Es wird schneller und schneller.

147
00:06:45,140 --> 00:06:50,165
Es könnte ein paar Konkurrenten
die leider beseitigt werden!

148
00:06:50,165 --> 00:06:54,337

149
00:06:54,337 --> 00:06:59,564
>> Ich liebe diese Firma.

150
00:06:59,564 --> 00:07:00,064
Ja!

151
00:07:00,064 --> 00:07:03,452

152
00:07:03,452 --> 00:07:08,250
Ich bin ein PC, und ich liebe diese Firma!

153
00:07:08,250 --> 00:07:13,090
>> Entwickler, Entwickler, Entwickler,
Entwickler, Entwickler, Entwickler,

154
00:07:13,090 --> 00:07:14,560
Entwickler, Entwickler.

155
00:07:14,560 --> 00:07:17,500

156
00:07:17,500 --> 00:07:18,970
Ja!

157
00:07:18,970 --> 00:07:19,950
Web-Entwickler!

158
00:07:19,950 --> 00:07:21,420
>> Web-Entwickler!

159
00:07:21,420 --> 00:07:22,890
Web-Entwickler!

160
00:07:22,890 --> 00:07:25,830

161
00:07:25,830 --> 00:07:28,770
Hören Sie, was Sie sonst noch
bekommen ohne Aufpreis!

162
00:07:28,770 --> 00:07:31,960
>> Die MS-DOS-Exekutive, ein Termin
Kalander, ein Kartenstapel, ein Notizblock,

163
00:07:31,960 --> 00:07:33,750
eine Uhr, ein Bedienfeld.

164
00:07:33,750 --> 00:07:35,461
Und Sie können es glauben?

165
00:07:35,461 --> 00:07:35,960
Reversie!

166
00:07:35,960 --> 00:07:37,270
>> Brennen sie auf CD!

167
00:07:37,270 --> 00:07:38,660
Kannst du sie in MSN!

168
00:07:38,660 --> 00:07:40,422
Sie sie E-Mail an Freunde!

169
00:07:40,422 --> 00:07:41,790
>> Alles mit einem Klick!

170
00:07:41,790 --> 00:07:48,670
One Microsoft, eine Strategie, ein team--
konzentriert, diszipliniert, professionell,

171
00:07:48,670 --> 00:07:50,610
und Experte für alles, was wir tun.

172
00:07:50,610 --> 00:07:52,670
Lassen Sie mich eine Linie von einem alten Film.

173
00:07:52,670 --> 00:07:54,810
>> Beziehungen sind wie Haie.

174
00:07:54,810 --> 00:07:57,480
Sie vorwärts zu bewegen oder sie sterben.

175
00:07:57,480 --> 00:08:01,470
Ich glaube tatsächlich, Tech
Unternehmen sind gleich.

176
00:08:01,470 --> 00:08:04,801
>> [END VIDEO PLAYBACK]

177
00:08:04,801 --> 00:08:08,050
DAVID J. MALAN: Also so froh, wir sind
bekannt, dass Steve beitreten werden uns

178
00:08:08,050 --> 00:08:13,320
hier in CS50 nächsten Mittwoch um
der übliche Ort und Zeit hier.

179
00:08:13,320 --> 00:08:14,750
Raum wird wahrscheinlich begrenzt sein.

180
00:08:14,750 --> 00:08:19,650
Und so uns persönlich kommen, wenden Sie sich bitte an
Kopf heute oder kurz danach

181
00:08:19,650 --> 00:08:22,600
um cs50.harvard.edu/register.

182
00:08:22,600 --> 00:08:25,780
>> Und wir werden um bis zu folgen
Dienstag bestätigt Flecken.

183
00:08:25,780 --> 00:08:29,900
Freuen Sie sich auf das nächste
Mittwoch während Vortrag in CS50.

184
00:08:29,900 --> 00:08:33,706
Jetzt, in other news, war ich zufällig
stoßen diese in The Crimson gerade

185
00:08:33,706 --> 00:08:34,289
den anderen Tag.

186
00:08:34,289 --> 00:08:37,370
>> Es stellt sich heraus, dass einer der Mitarbeiter des CS50
und mindestens eines von CS50 Studenten

187
00:08:37,370 --> 00:08:40,299
ist derzeit für UC läuft
Präsident und Vizepräsident,

188
00:08:40,299 --> 00:08:42,950
was mich zurückgebracht
zu meiner eigenen Tagen zurück

189
00:08:42,950 --> 00:08:45,920
wenn ich verlor den UC Wahl kläglich.

190
00:08:45,920 --> 00:08:48,210
Aber der Silberstreif am Horizont
dadurch ist ich immer

191
00:08:48,210 --> 00:08:50,604
Erzählen Sie die Geschichte ist, dass
einer der ich bin sicher,

192
00:08:50,604 --> 00:08:52,770
viele Gründe, warum ich verlor die
Wahl war ein völliger Mangel

193
00:08:52,770 --> 00:08:54,103
ein Talent für den öffentlichen Raum.

194
00:08:54,103 --> 00:08:56,950
Und so ganz ehrlich, es
mir fuhr, dass die Erfahrung

195
00:08:56,950 --> 00:09:02,235
Ich glaube, mein Junior-Jahr, um tatsächlich zu unterzeichnen
für Harvard Computer Society, die

196
00:09:02,235 --> 00:09:04,610
ist die Gruppe auf dem Campus, dass
hält verschiedene Fachgespräche

197
00:09:04,610 --> 00:09:05,318
und andere Dinge.

198
00:09:05,318 --> 00:09:08,117
Und ich übernahm den Unterricht
Seminare und daher

199
00:09:08,117 --> 00:09:09,950
hatten die Möglichkeit, ein
wunderbare Gelegenheit,

200
00:09:09,950 --> 00:09:12,620
zu Beginn der Arbeit an genau diesen.

201
00:09:12,620 --> 00:09:15,000
Aber auch, hatte ich Gelegenheit,
während dieser Erfahrung

202
00:09:15,000 --> 00:09:16,930
mich umso mehr HTML beibringen.

203
00:09:16,930 --> 00:09:21,080
Und so habe ich letzte Nacht aufgeschoben durch
Blick durch das HTML-basierte Website

204
00:09:21,080 --> 00:09:28,066
Ich machte in wie 1997 '98, für meine
Kampagne, die wie diese hier aussieht.

205
00:09:28,066 --> 00:09:29,920
Ich weiß.

206
00:09:29,920 --> 00:09:33,340
>> Because-- und natürlich Ankündigung
Diese erstaunliche Design-Entscheidung im Jahr 1998

207
00:09:33,340 --> 00:09:33,850
oder Dingsbums.

208
00:09:33,850 --> 00:09:36,475
Das erste, was Sie möchten, dass Benutzer
um beim Besuch Ihrer Website zu tun

209
00:09:36,475 --> 00:09:39,860
ist zu haben, um einen anderen Link klicken Sie einfach
auf Ihre Website mit dem Mönch hier eingeben

210
00:09:39,860 --> 00:09:43,940
hinter wie ein Vorhang verhüllt, wo
anscheinend war meine Kampagne Plattform.

211
00:09:43,940 --> 00:09:46,330
Und das ist alles, was Sie bekommen
heute ist nur ein Screenshot.

212
00:09:46,330 --> 00:09:49,500
Aber ich war durch, wie das Lesen,
meine Wahlplakate der letzten Nacht

213
00:09:49,500 --> 00:09:50,490
und meine Plattform.

214
00:09:50,490 --> 00:09:52,960
>> Und ich war so wütend auf die Zeit.

215
00:09:52,960 --> 00:09:55,380
Meine Plattform was-- es war interessant.

216
00:09:55,380 --> 00:09:57,730
Also habe ich nach unten, da dann beruhigt.

217
00:09:57,730 --> 00:10:03,550
Aber eines Tages werde ich wieder laufen und
hoffentlich besser dieser Zeit.

218
00:10:03,550 --> 00:10:07,265
>> Also HTML, die Sprache, in der ich gemacht
dass in-- Sie bald viel mehr schreiben--

219
00:10:07,265 --> 00:10:09,140
ist etwas, was wir schon seit
reden über spät

220
00:10:09,140 --> 00:10:12,460
und weitgehend Mitnahmen für jetzt gewährt
dass wir auf anderen Sprachen bewegt.

221
00:10:12,460 --> 00:10:15,650
Aber lassen Sie uns Pause für einen Moment und
setzen einige dieser Dinge im Kontext.

222
00:10:15,650 --> 00:10:18,040
Also in einem Satz, was ist HTML?

223
00:10:18,040 --> 00:10:19,370
>> Oder was verwendet?

224
00:10:19,370 --> 00:10:20,208
Anyone?

225
00:10:20,208 --> 00:10:20,708
Ja.

226
00:10:20,708 --> 00:10:22,002
>> PUBLIKUM: Markup für Websites.

227
00:10:22,002 --> 00:10:23,460
DAVID J. MALAN: Markup für die Website.

228
00:10:23,460 --> 00:10:27,100
So ist es eine Markup-Sprache ist das
können Sie eine Web-Seite zu strukturieren.

229
00:10:27,100 --> 00:10:30,040
Header geht nach oben hier, Titel
Hier steht, geht Körper hier.

230
00:10:30,040 --> 00:10:33,280
Das ist fett, das ist
italics-- diese Art von Detail.

231
00:10:33,280 --> 00:10:33,830
>> OK, gut.

232
00:10:33,830 --> 00:10:37,620
Also CSS lässt Sie-- und ich
nahm einige Freiheiten gibt

233
00:10:37,620 --> 00:10:40,990
mit dem kühnen Leiste und kursiv, weil
Das ist besser mit diesem umgesetzt.

234
00:10:40,990 --> 00:10:42,096
CSS ist-- was?

235
00:10:42,096 --> 00:10:42,845
Sprich in einem Satz.

236
00:10:42,845 --> 00:10:46,000

237
00:10:46,000 --> 00:10:46,720
Wer überhaupt nicht.

238
00:10:46,720 --> 00:10:46,870
Ja.

239
00:10:46,870 --> 00:10:49,286
>> PUBLIKUM: Verzierungen und
Sachen, wie, wie, sie zu gestalten.

240
00:10:49,286 --> 00:10:51,769

241
00:10:51,769 --> 00:10:52,810
DAVID J. MALAN: OK, gut.

242
00:10:52,810 --> 00:10:55,420
Verzierungen, die Sie erlauben
sie zu gestalten oder zu stilisieren es

243
00:10:55,420 --> 00:10:59,540
mit Dingen wie fett und
kursiv und Farben und auch feinere

244
00:10:59,540 --> 00:11:01,330
körniger Positionierung von Elementen.

245
00:11:01,330 --> 00:11:04,520
Es Art können Sie die Dinge, die zu nehmen
letzte Meile so dass, wenn, zum Beispiel,

246
00:11:04,520 --> 00:11:08,130
in Pset7, könnten Sie auf bemerkt haben Ihre
Portfolio-Seite, wenn Sie an dieser Stelle sind

247
00:11:08,130 --> 00:11:12,270
bereits, dass eine Standard-Tabelle, die Sie
machen, um Aktienbesitz des Benutzers zeigen

248
00:11:12,270 --> 00:11:15,740
und Cash sieht wahrscheinlich ziemlich scheußlichen
standardmäßig ohne Leerzeichen.

249
00:11:15,740 --> 00:11:18,420
Alles ist irgendwie vollgestopft
miteinander in Zeilen und Spalten.

250
00:11:18,420 --> 00:11:20,662
>> Nun, mit ein bisschen
CSS, wie Sie vielleicht zu realisieren,

251
00:11:20,662 --> 00:11:23,870
man kann tatsächlich zwicken, und machen es
etwas viel vertrauter und viel

252
00:11:23,870 --> 00:11:24,870
hübscher anzuschauen.

253
00:11:24,870 --> 00:11:27,730
Also CSS ist etwa die
Stilisierung von Websites.

254
00:11:27,730 --> 00:11:31,970
Aber dann noch einen weiteren haben wir
Sprache, PHP, die uns tun, was können?

255
00:11:31,970 --> 00:11:36,400

256
00:11:36,400 --> 00:11:37,590
>> Lassen Sie uns einfach, was?

257
00:11:37,590 --> 00:11:38,177
Jeder.

258
00:11:38,177 --> 00:11:40,010
Got to jenseits wagen
die ersten paar Zeilen.

259
00:11:40,010 --> 00:11:40,260
Ja.

260
00:11:40,260 --> 00:11:41,719
>> PUBLIKUM: Generieren dynamischer Inhalte.

261
00:11:41,719 --> 00:11:42,718
DAVID J. MALAN: Perfect.

262
00:11:42,718 --> 00:11:43,850
Generieren dynamischer Inhalte.

263
00:11:43,850 --> 00:11:45,808
Und Sie können dies in tun
jede Anzahl von Sprachen.

264
00:11:45,808 --> 00:11:50,120
Wir passieren PHP zu verwenden, da es
teil so ähnlich C-Syntax.

265
00:11:50,120 --> 00:11:52,000
>> Aber PHP tut genau das.

266
00:11:52,000 --> 00:11:54,620
Es lässt Sie generieren dynamisch ausgegeben.

267
00:11:54,620 --> 00:11:57,890
Und einige von diesen Ausgang könnte
HTML, wie wir in der Regel getan.

268
00:11:57,890 --> 00:12:00,160
Und es ist auch, weil es
eine Programmiersprache ist

269
00:12:00,160 --> 00:12:03,240
der Mechanismus, über den
können wir auf Datenbanken zu sprechen.

270
00:12:03,240 --> 00:12:05,730
>> Und wir können Abfragen zu machen
andere Server wie Yahoos

271
00:12:05,730 --> 00:12:08,660
und programmatisch nichts tun
wirklich, dass man sich sonst

272
00:12:08,660 --> 00:12:10,400
will einen Computer dazu zu zwingen, zu tun.

273
00:12:10,400 --> 00:12:13,580
Also PHP lässt uns starten
dynamisch Ausgeben Gehalt.

274
00:12:13,580 --> 00:12:16,900
Also von dieser Logik, hatte ich nicht
eine dynamische Website im Jahr 1998.

275
00:12:16,900 --> 00:12:18,460
>> Es war nur eine statische Webseite.

276
00:12:18,460 --> 00:12:22,250
Meine Inhalte mussten geändert werden, indem
manuell mit gedit oder einem Äquivalent.

277
00:12:22,250 --> 00:12:25,290
Aber PHP ist, was wir früher oder
könnte verwendet werden, haben vielmehr

278
00:12:25,290 --> 00:12:27,260
für so etwas wie die
Frosh IMs Website, die

279
00:12:27,260 --> 00:12:31,160
sollte Registrierungen zu nehmen und
Verwalten einer Liste users-- Dinge,

280
00:12:31,160 --> 00:12:33,550
tatsächlich Umschalten
Zeit, obwohl wir passieren

281
00:12:33,550 --> 00:12:35,990
Perl, einen anderen verwenden
Sprache zu der Zeit.

282
00:12:35,990 --> 00:12:40,350
>> Und dann schließlich führten wir
SQL-- Structured Query Language.

283
00:12:40,350 --> 00:12:43,845
Also noch eine weitere Sprache
das ist für das, was genutzt?

284
00:12:43,845 --> 00:12:46,660

285
00:12:46,660 --> 00:12:47,639
Für das, was genutzt?

286
00:12:47,639 --> 00:12:49,430
Können wir slight-- wagen
OK, wir werden nicht

287
00:12:49,430 --> 00:12:51,263
viel weiter zu bekommen
als das Orchester hier.

288
00:12:51,263 --> 00:12:53,432
PUBLIKUM: Es ist ein Protokoll
verwendet werden, um auf Datenbanken zu sprechen.

289
00:12:53,432 --> 00:12:55,640
DAVID J. MALAN: Ein Protokoll
verwendet werden, um auf Datenbanken zu sprechen.

290
00:12:55,640 --> 00:12:56,181
Lassen Sie mich zu zwicken.

291
00:12:56,181 --> 00:12:59,280
Es ist eine natürliche Sprache verwendet
auf databases-- wählt sprechen

292
00:12:59,280 --> 00:13:01,280
und Einfügungen und Löschungen
Updates und tatsächlich

293
00:13:01,280 --> 00:13:03,840
auch weitere Features,
wir haben nicht einmal tauchte

294
00:13:03,840 --> 00:13:07,920
in, sondern möchten Sie vielleicht explore-- haben
für, sagen wir zu erkunden, eine endgültige Projekt.

295
00:13:07,920 --> 00:13:09,560
So gibt es diese verschiedenen Stücke.

296
00:13:09,560 --> 00:13:13,100
>> Und hoffentlich Pset7, obwohl
seine Spezifikation ist ziemlich lang,

297
00:13:13,100 --> 00:13:15,990
es ist absichtlich lange man zu Fuß
durch, wie diese Dinge alle

298
00:13:15,990 --> 00:13:17,210
zusammen eingegeben werden.

299
00:13:17,210 --> 00:13:20,300
Jetzt, am Montag, wir
unsere letzte Sprache eingeführt

300
00:13:20,300 --> 00:13:23,430
dass wir offiziell einführen
die course--, dh JavaScript.

301
00:13:23,430 --> 00:13:25,720
Diese, wie PHP, ist ein
interpretierte Sprache.

302
00:13:25,720 --> 00:13:28,110
>> Aber ein wesentlicher Unterschied
Ich am Montag vorgeschlagen

303
00:13:28,110 --> 00:13:32,730
ist, dass, während PHP ausgeführt wird oder
wobei auf dem Server interpretiert die

304
00:13:32,730 --> 00:13:35,990
in diesem Fall ist das Gerät CS50,
oder vielleicht einige kommerzielle Bahn sein

305
00:13:35,990 --> 00:13:39,370
Server auf dem Internet,
JavaScript allgemein

306
00:13:39,370 --> 00:13:43,650
ist eine Sprache, die Client-Seite läuft
keine Server side-- so im Browser.

307
00:13:43,650 --> 00:13:46,970
Welches ist zu sagen, genau wie wenn ich geöffnet
up Facebook-Quellcode und fand alle

308
00:13:46,970 --> 00:13:51,510
dieser JS-Dateien, war die Implikation
dass, wenn Sie Facebook oder besuchen Sie die meisten

309
00:13:51,510 --> 00:13:54,810
Websites in diesen Tagen, erhalten Sie
nicht nur HTML-, nicht nur CSS,

310
00:13:54,810 --> 00:13:59,370
aber eine ganze Reihe von JavaScript
Code oft in Form von JS-Dateien.

311
00:13:59,370 --> 00:14:03,970
Und dann ist es die browser-- Ihren eigenen
Mac oder PC--, die diesen Code ausführt.

312
00:14:03,970 --> 00:14:05,990
>> Aber Ihr Browser führt sie aus.

313
00:14:05,990 --> 00:14:08,070
Sie können in eine Art Sandbox denken.

314
00:14:08,070 --> 00:14:12,420
So, dass JavaScript-Code sollte nicht sein
in der Lage, Dateien auf Ihrem Computer zu löschen.

315
00:14:12,420 --> 00:14:14,730
Es sollte nicht in der Lage zu sein,
E-Mails versenden in Ihrem Namen.

316
00:14:14,730 --> 00:14:17,760
Ihr Browser Art schränkt
was man damit tun kann.

317
00:14:17,760 --> 00:14:20,630
>> Also in diesem Sinne, es ist ein wenig
weniger mächtig, vielleicht, als C.

318
00:14:20,630 --> 00:14:24,030
Aber JavaScript kann, wie ein
Abgesehen von dem Server verwendet werden,

319
00:14:24,030 --> 00:14:27,740
wenn wir dazu neigen, nicht zu sprechen
darüber in diesem Zusammenhang.

320
00:14:27,740 --> 00:14:29,740
So, jetzt lass uns binden diese zusammen.

321
00:14:29,740 --> 00:14:34,000
Eine Woche plus vor, präsentierten wir einige HTML
auf der left-- Super langweilig Webseite.

322
00:14:34,000 --> 00:14:35,000
>> Nur sagt hallo Welt.

323
00:14:35,000 --> 00:14:38,110
Und dann auf die vorgeschlagene I
Recht können wir Art stehlen Ideen

324
00:14:38,110 --> 00:14:41,470
aus unserer Diskussion
Datenstrukturen in C

325
00:14:41,470 --> 00:14:45,270
und darüber, wie diese hierarchischen denken
Auszeichnungssprache auf der linken

326
00:14:45,270 --> 00:14:49,720
könnte gezogen oder im Speicher durchgeführt werden
als Ist-Baumstruktur mit Knoten

327
00:14:49,720 --> 00:14:51,400
und Zeiger und diese Art von Details.

328
00:14:51,400 --> 00:14:53,820
Auf der rechten Seite, wir nennen
dass eine DOM-- Document

329
00:14:53,820 --> 00:14:56,800
Object Model-- welches nur
eine andere Art zu sagen Baum.

330
00:14:56,800 --> 00:14:59,520
>> Nun, warum ist dies sinnvoll,
denken Sie an es auf diese Weise?

331
00:14:59,520 --> 00:15:01,680
Denn jetzt mit
JavaScript, denn wir haben

332
00:15:01,680 --> 00:15:05,810
Code, der in diesem Spiel bekommt
Umwelt, der eigentliche HTML-Code, ist

333
00:15:05,810 --> 00:15:08,360
an den Browser gesendet worden
bereits und hat bereits

334
00:15:08,360 --> 00:15:12,690
wurde durch die in den Speicher geladen
Browser in einen Baum in Ihrem Computer

335
00:15:12,690 --> 00:15:18,270
RAM wie diese, können wir JavaScript verwenden
um tatsächlich zu durchqueren oder zu Fuß oder Such

336
00:15:18,270 --> 00:15:21,800
oder ändern, dass DOM-Baum jedoch wir wollen.

337
00:15:21,800 --> 00:15:24,040
Also in der Tat, wenn Sie denken,
über facebook.com,

338
00:15:24,040 --> 00:15:27,660
wenn Sie die Chat-Funktion nutzen, wenn Sie
Verwendung von Google Mail und die GChat Funktion

339
00:15:27,660 --> 00:15:30,540
nichts, wo man
Nachrichten immer wieder kommen

340
00:15:30,540 --> 00:15:35,880
und wieder sind diese Nachrichten wahrscheinlich,
wie, LI-Tag, List Item-Tags, vielleicht.

341
00:15:35,880 --> 00:15:37,940
>> Oder vielleicht haben sie gerade sind
divs, die erscheinen, halten

342
00:15:37,940 --> 00:15:39,770
jedes Mal, wenn Sie eine Sofortnachricht.

343
00:15:39,770 --> 00:15:42,960
Und so das bedeutet nur, was
Facebook oder Google tut

344
00:15:42,960 --> 00:15:45,200
ist zu jeder Zeit erhalten Sie einen
Nachricht vom Server,

345
00:15:45,200 --> 00:15:48,740
sind sie wahrscheinlich mit Hilfe von JavaScript
fügen Sie einfach einen weiteren Knoten

346
00:15:48,740 --> 00:15:52,700
dies tree-- anderen Knoten diese
Baum, der dann visuell sieht einfach

347
00:15:52,700 --> 00:15:54,570
wie eine neue Textzeile auf dem Bildschirm.

348
00:15:54,570 --> 00:15:57,100
Aber sie Einsetzen
in dieser Datenstruktur.

349
00:15:57,100 --> 00:15:59,742
>> So in Klassen wie
Cs124 und andere, werden Sie

350
00:15:59,742 --> 00:16:02,200
tatsächlich mehr Code gegen schreiben
Datenstrukturen wie diese.

351
00:16:02,200 --> 00:16:04,310
Aber jetzt in JavaScript
wir einfach davon ausgehen, werde

352
00:16:04,310 --> 00:16:07,920
wir all diese Funktionen erhalten
kostenlos von der Sprache selbst.

353
00:16:07,920 --> 00:16:09,210
Also schauen wir uns ein Beispiel an.

354
00:16:09,210 --> 00:16:13,120
>> Lassen Sie mich öffnen, eine Datei form.html genannt.

355
00:16:13,120 --> 00:16:14,601
Es ist super einfach.

356
00:16:14,601 --> 00:16:15,600
Es sieht nur so aus.

357
00:16:15,600 --> 00:16:17,860
>> Kein CSS, kein Gedanke an Ästhetik.

358
00:16:17,860 --> 00:16:19,810
Es ist rein funktional
und anscheinend bin ich

359
00:16:19,810 --> 00:16:24,000
Bitte um eine E-Mail, ein Passwort,
Kennwort erneut ein und dann wird eine Überprüfung

360
00:16:24,000 --> 00:16:26,150
auf einige Bedingungen einverstanden.

361
00:16:26,150 --> 00:16:28,740
Was der Quellcode für diese
aussieht, ist wahrscheinlich etwas

362
00:16:28,740 --> 00:16:31,030
Sie könnten mit einer erraten
wenig Gedanken jetzt.

363
00:16:31,030 --> 00:16:32,840
Ich habe ein Formular-Tag hier.

364
00:16:32,840 --> 00:16:36,190
>> Eine Aktion wird offenbar werde
gehen Sie zu einem Datei register.php genannt.

365
00:16:36,190 --> 00:16:37,870
Das Verfahren werde ich verwenden ist zu bekommen.

366
00:16:37,870 --> 00:16:40,880
Und dann habe ich ein Liedtext
Feld, dessen Name ist E-Mail.

367
00:16:40,880 --> 00:16:43,340
>> Ich habe ein Passwortfeld bekam
dessen Name Passwort.

368
00:16:43,340 --> 00:16:45,420
Ich habe eine andere bekam
Passwortfeld, dessen Name

369
00:16:45,420 --> 00:16:47,342
ist etwas willkürlich Bestätigung.

370
00:16:47,342 --> 00:16:49,690
Es ist nur ein weiterer HTTP-Parameter.

371
00:16:49,690 --> 00:16:54,430
>> Und dann haben wir uns diese nicht benutzt habe, außer
da die Frosh IMs Demo in class--

372
00:16:54,430 --> 00:16:56,692
ein Kontrollkästchen, das ist
Einfach lostippen gleich überprüfen.

373
00:16:56,692 --> 00:16:57,900
Und ich werde diese Vereinbarung nennen.

374
00:16:57,900 --> 00:17:00,700
Also habe ich Art von willkürlich, sondern
diese Felder bequem benannt.

375
00:17:00,700 --> 00:17:03,450
So dass jetzt, wenn diese Form erhält
eingereicht, mal sehen, was passiert.

376
00:17:03,450 --> 00:17:07,290
Wenn ich das tue malan@harvard.edu,
Ich werde ein Passwort von Crimson zu tun.

377
00:17:07,290 --> 00:17:09,530
Ich werde ein Passwort nichts zu tun.

378
00:17:09,530 --> 00:17:10,910
Lassen Sie uns nicht zusammenarbeiten.

379
00:17:10,910 --> 00:17:12,280
>> Und ich werde nicht das Kontrollkästchen.

380
00:17:12,280 --> 00:17:13,940
Lassen Sie mich auf Registrieren.

381
00:17:13,940 --> 00:17:15,420
Und er sagt, hm, Du angemeldet bist.

382
00:17:15,420 --> 00:17:16,069
Nicht wirklich.

383
00:17:16,069 --> 00:17:17,450
>> Aber die URL geändert.

384
00:17:17,450 --> 00:17:22,280
So wurde diese Form eindeutig erlaubt
auf register.php einreichen.

385
00:17:22,280 --> 00:17:25,160
Aber vermutlich sollte ich sein
fangen einige dieser Fehler.

386
00:17:25,160 --> 00:17:27,569
Jetzt, in Pset7 und einige
unserer Vortrags Beispielen

387
00:17:27,569 --> 00:17:30,130
wir in der Regel zu drucken würde
eine große rote Fehlermeldung hier

388
00:17:30,130 --> 00:17:33,760
sagen, fehlende Namen,
oder fehlende Passwort.

389
00:17:33,760 --> 00:17:37,680
Wir haben das getan, bevor und wir haben
done Serverseite Fehlererkennung.

390
00:17:37,680 --> 00:17:41,580
>> Aber viele Websites in diesen Tagen
tun Client-Seite Fehlererkennung

391
00:17:41,580 --> 00:17:42,810
wobei die URL ändert sich nicht.

392
00:17:42,810 --> 00:17:44,101
Die ganze Seite wird nicht aktualisiert.

393
00:17:44,101 --> 00:17:46,940
Sie erhalten eine sofortige Rückmeldung
vom Browser.

394
00:17:46,940 --> 00:17:48,070
Vielleicht etwas rot.

395
00:17:48,070 --> 00:17:49,190
>> Vielleicht erhalten Sie ein Pop-up.

396
00:17:49,190 --> 00:17:53,240
Aber Sie verschwenden keine Zeit Senden an
der Server Daten, die unvollständig ist.

397
00:17:53,240 --> 00:17:56,050
Also mal sehen, wie wir
erreichen diese Funktion auch.

398
00:17:56,050 --> 00:17:59,660
>> Lassen Sie mich gehen, um form1.html,
was gleich aussieht.

399
00:17:59,660 --> 00:18:03,530
Aber wenn ich dieses Mal tun
malan@harvard.edu und ich geben hochrot

400
00:18:03,530 --> 00:18:07,350
und ich weiß nicht weiter zusammenarbeiten
sondern klicken Sie auf Registrieren, bemerken jetzt.

401
00:18:07,350 --> 00:18:08,940
Es ist nicht die sexiest Lösung.

402
00:18:08,940 --> 00:18:10,900
Ich habe zumindest fing diesen Fehler.

403
00:18:10,900 --> 00:18:12,900
Und ich habe den Alarm verwendet
Funktion in JavaScript--

404
00:18:12,900 --> 00:18:14,090
denen wir nur mit in der Klasse.

405
00:18:14,090 --> 00:18:16,430
In der Regel sollten Sie nicht verwenden
denn es kann sehr schnell raus

406
00:18:16,430 --> 00:18:17,160
Kontrolle.

407
00:18:17,160 --> 00:18:19,180
Aber Passwörter stimmen nicht überein ist der Fehler.

408
00:18:19,180 --> 00:18:21,120
>> Lassen Sie mich gehen Sie vor und klicken Sie auf OK.

409
00:18:21,120 --> 00:18:25,040
Aber was der Schlüssel zum Mitnehmen hier
ist, dass die URL nicht ändern.

410
00:18:25,040 --> 00:18:27,960
Also ich habe nicht die Mühe verschwenden
Zeit des Servers fragen sie

411
00:18:27,960 --> 00:18:30,750
eine Frage, die ich haben könnte
herausgefunden, die Antwort auf mich selbst.

412
00:18:30,750 --> 00:18:33,210
>> Und der Benutzer, obwohl
wurde darüber reden

413
00:18:33,210 --> 00:18:35,264
länger als der Benutzer
gehen, um darüber nachzudenken,

414
00:18:35,264 --> 00:18:36,680
wird sich ein sofortiges Feedback haben.

415
00:18:36,680 --> 00:18:39,044
Es gibt keine Wartezeit mit
die Netzwerkkonnektivität.

416
00:18:39,044 --> 00:18:40,460
Also schauen wir uns an diesem Quellcode.

417
00:18:40,460 --> 00:18:45,600
>> Form1.html Looks
strukturell ähnlichen hier oben.

418
00:18:45,600 --> 00:18:46,810
Die Form ist in der Tat die gleiche.

419
00:18:46,810 --> 00:18:48,330
Aber mal sehen, was ich hier tat nach unten.

420
00:18:48,330 --> 00:18:49,913
Und es gibt verschiedene Möglichkeiten, dies zu tun.

421
00:18:49,913 --> 00:18:53,690
Und ich habe das Beste gerade getan
follower aber nicht eleganteste Weg noch.

422
00:18:53,690 --> 00:18:54,869
Ich habe ein Skript-Tag.

423
00:18:54,869 --> 00:18:57,035
Ich habe dann rufen
document.getElementById ("Registrierung").

424
00:18:57,035 --> 00:19:00,090

425
00:19:00,090 --> 00:19:04,420
Und ich speichern diesen Wert
in der Form, eine Variable.

426
00:19:04,420 --> 00:19:05,520
>> Also, was habe ich getan?

427
00:19:05,520 --> 00:19:08,960
Sie können sich vorstellen
document.getElementById als

428
00:19:08,960 --> 00:19:11,200
eine Sonderfunktion,
JavaScript gibt Ihnen

429
00:19:11,200 --> 00:19:14,400
dass buchstäblich Hände Sie einen
Zeiger auf einen der Knoten

430
00:19:14,400 --> 00:19:16,520
oder Rechtecke in diesem Baum.

431
00:19:16,520 --> 00:19:21,470
Also jetzt, dass ist es, was unser Formular variable
in JavaScript ist eigentlich deutete auf.

432
00:19:21,470 --> 00:19:25,120
>> So, jetzt die Syntax ist anders
C. Aber wir tun hier ein paar Dinge.

433
00:19:25,120 --> 00:19:30,360
Einer, ein wenig seltsam ist dies eine
suchen, sicherlich im Vergleich zu C

434
00:19:30,360 --> 00:19:32,180
Aber schauen Sie in Zeile 35.

435
00:19:32,180 --> 00:19:35,130
So auf der linken form.onsubmit.

436
00:19:35,130 --> 00:19:38,060
Daran erinnern, dass Onsubmit ist
wie ein Feld in einer Struktur.

437
00:19:38,060 --> 00:19:41,480
Wenn Sie von der Form variable denken
ist einfach nur eine C-Struktur,

438
00:19:41,480 --> 00:19:42,600
es könnte einige Felder.

439
00:19:42,600 --> 00:19:46,410
>> Zurück in den Tag, wir hatten Studenten Namen,
IDs, Häuser, jene Art von Feldern.

440
00:19:46,410 --> 00:19:48,520
Man denke nur an Onsubmit als ein anderes Feld.

441
00:19:48,520 --> 00:19:53,380
Aber es ist ein Spezialgebiet, weil die
Browser ist so vorprogrammiert, erwarten

442
00:19:53,380 --> 00:19:57,530
.onsubmit nicht ein Wert sein
wie eine Zahl oder ein String,

443
00:19:57,530 --> 00:20:01,180
aber tatsächlich eine Funktion sein
oder die Adresse einer Funktion,

444
00:20:01,180 --> 00:20:02,570
in den Speicher des Computers.

445
00:20:02,570 --> 00:20:04,740
>> Und in der Tat, das ist was
Dieser Begriff hier tut.

446
00:20:04,740 --> 00:20:06,710
Dieser sagt, gib mir eine neue Funktion.

447
00:20:06,710 --> 00:20:09,390
Aber was ist sein Name
sein wird, offensichtlich?

448
00:20:09,390 --> 00:20:10,800
>> Denken wir zurück an Montag.

449
00:20:10,800 --> 00:20:13,430

450
00:20:13,430 --> 00:20:17,170
Was ist der Name dieser
Funktion auf der Basis dieser Syntax?

451
00:20:17,170 --> 00:20:19,784
Nein, ich meine, es gibt deutlich
kein Name associated-- sicherlich

452
00:20:19,784 --> 00:20:21,200
nicht, was ich hier hervorgehoben.

453
00:20:21,200 --> 00:20:22,560
>> Aber das ist eigentlich OK.

454
00:20:22,560 --> 00:20:25,840
Dies ist eine anonyme Funktion oder eine
Lambda-Funktion wie manche es nennen.

455
00:20:25,840 --> 00:20:27,589
Und das bedeutet nur,
es ist immer noch eine Funktion.

456
00:20:27,589 --> 00:20:29,400
Es ist nur so, kann man nicht nennen kann sie mit Namen.

457
00:20:29,400 --> 00:20:30,057
Aber das ist OK.

458
00:20:30,057 --> 00:20:33,140
Denn einmal hat der Browser bereits
von Unternehmen wie Google vorprogrammiert

459
00:20:33,140 --> 00:20:38,540
oder Microsoft oder Mozilla oder andere zu
weiß nur, dass, wenn der .onsubmit Feld

460
00:20:38,540 --> 00:20:43,400
innerhalb eines Formularelements hat der
Wert, behandeln es als ein function--

461
00:20:43,400 --> 00:20:44,750
Ein Funktionszeiger, wenn man so will.

462
00:20:44,750 --> 00:20:46,910
Und nennen Sie es, wenn das Formular abgeschickt wird.

463
00:20:46,910 --> 00:20:50,350
>> Also, welche Code ausgeführt werden soll
wenn das Formular abgeschickt wird?

464
00:20:50,350 --> 00:20:52,526
Offenbar alles
Innenseite der geschweiften Klammer.

465
00:20:52,526 --> 00:20:53,650
Und das ist nur stilistische.

466
00:20:53,650 --> 00:20:55,626
>> Sie könnten dies tun, wie
Wir neigen dazu, in CS50 tun.

467
00:20:55,626 --> 00:20:58,250
Aber in JavaScript, die meisten Menschen
neigen dazu, es auf der gleichen Linie zu halten

468
00:20:58,250 --> 00:21:01,960
gerade weil es deutlicher ist
mit diesem Stichwort-Funktion verbunden.

469
00:21:01,960 --> 00:21:03,240
So jetzt, was mache ich?

470
00:21:03,240 --> 00:21:08,616
>> Wenn form.email.value gleich equals
die leere Zeichenkette oder nichts, hier ist

471
00:21:08,616 --> 00:21:11,490
eine Warnung, wo ich sagen werde,
Sie müssen Ihre E-Mail-Adresse,

472
00:21:11,490 --> 00:21:12,690
und dann wieder falsch.

473
00:21:12,690 --> 00:21:15,720
Und es ist, dass die Rückkehr falsch, dass
verhindert, dass das Formular von ihrer Einreichung.

474
00:21:15,720 --> 00:21:19,480
Inzwischen, wenn die Passwortwert ist
blank, ich werde an der Benutzer yell

475
00:21:19,480 --> 00:21:21,150
und sagen, müssen Sie ein Kennwort angeben.

476
00:21:21,150 --> 00:21:23,700
>> Inzwischen Sachen erhalten
ein wenig schicker hier.

477
00:21:23,700 --> 00:21:29,160
Wenn form.password.value nicht
gleich form.confirmation.value,

478
00:21:29,160 --> 00:21:31,680
Das andere Feld, schreien
der Benutzer, dass die Passwörter

479
00:21:31,680 --> 00:21:33,860
nicht, wie sie passen
nicht vor einem Augenblick.

480
00:21:33,860 --> 00:21:35,780
Und dann das hier ist ein
wenig sexier, weil ich

481
00:21:35,780 --> 00:21:40,470
weiß, dass ich wusste, dass konzeptionell
überprüft ist der Name eines Checkbox.

482
00:21:40,470 --> 00:21:45,680
>> So kann ich nur ein Ausrufezeichen verwenden
Punkt zu sagen, wenn die Prüfung nicht

483
00:21:45,680 --> 00:21:48,040
checked-- es ist die Boolesche
Wert, wahr oder false--

484
00:21:48,040 --> 00:21:49,700
Ich werde an der Benutzer aus diesem Grund schreien.

485
00:21:49,700 --> 00:21:52,300
Ansonsten, wenn wir durchkommen
alle diese Bedingungen,

486
00:21:52,300 --> 00:21:53,270
lasst uns einfach true zurückgeben.

487
00:21:53,270 --> 00:21:54,700
Lassen Sie das Formular eingereicht werden.

488
00:21:54,700 --> 00:21:56,560
Und das wird dann passieren.

489
00:21:56,560 --> 00:21:57,740
>> Lassen Sie uns geben hochrot.

490
00:21:57,740 --> 00:22:00,230
Lassen überprüfen Sie die Box, klicken Sie auf Registrieren.

491
00:22:00,230 --> 00:22:01,979
Und jetzt habe ich bis zum Ziel zu gehen.

492
00:22:01,979 --> 00:22:03,270
Nun, es gibt da keine Datenbank.

493
00:22:03,270 --> 00:22:05,370
Es gibt nichts interessantes
in register.php.

494
00:22:05,370 --> 00:22:07,980
Ich habe gerade etwas brauchten
um tatsächlich zu reden.

495
00:22:07,980 --> 00:22:09,140
Also lassen Sie mich unterbrechen, hier.

496
00:22:09,140 --> 00:22:16,270
Haben Sie Fragen, was wir gerade getan haben
oder, was einige dieser neuen Syntax ist?

497
00:22:16,270 --> 00:22:17,640
OK, yeah?

498
00:22:17,640 --> 00:22:20,025
>> PUBLIKUM: Also jede Checkbox
ist automatisch ein Boolean.

499
00:22:20,025 --> 00:22:21,650
Sie müssen nicht, es so zu erklären.

500
00:22:21,650 --> 00:22:22,649
>> DAVID J. MALAN: Richtig.

501
00:22:22,649 --> 00:22:29,340
Alle Kontrollkästchen, die an Sie versandt hat
ein HTML-Formular, um Ihren JavaScript-Code

502
00:22:29,340 --> 00:22:31,760
behandelt werden, ja, wie ein
Boolean value-- wahr oder falsch.

503
00:22:31,760 --> 00:22:32,635
Es ist eine gute Frage.

504
00:22:32,635 --> 00:22:36,080
Wohingegen die anderen Werte, der
Natürlich haben Text, AKA Saiten gewesen.

505
00:22:36,080 --> 00:22:38,500
>> Alles klar, also lassen Sie mich
zurückspulen ein bisschen weiter.

506
00:22:38,500 --> 00:22:39,900
Was war der springende Punkt bei dieser?

507
00:22:39,900 --> 00:22:41,400
Nur um klar zu sein.

508
00:22:41,400 --> 00:22:44,940
Wie wir bereits wissen, auch aus Pset7
und sogar aus der vergangenen Woche Vorlesung

509
00:22:44,940 --> 00:22:51,120
Beispiele, dass wir offensichtlich überprüfen
$ _GET $ _POST, Ob der Benutzer geben uns

510
00:22:51,120 --> 00:22:52,200
ein leerer Wert.

511
00:22:52,200 --> 00:22:54,400
Denken Sie an die leere Funktion in PHP.

512
00:22:54,400 --> 00:22:58,040
>> Also nur klar zu sein, was ist
ein Grund, warum wir vielleicht auch

513
00:22:58,040 --> 00:23:00,535
wollen diese Fehlerüberprüfung zu tun
Innere des Browsers?

514
00:23:00,535 --> 00:23:03,350

515
00:23:03,350 --> 00:23:06,080
Was ist die Motivation hier?

516
00:23:06,080 --> 00:23:06,580
Ja.

517
00:23:06,580 --> 00:23:09,735
>> PUBLIKUM: Schneller, und du nicht
senden nutzlose Daten auf den Server.

518
00:23:09,735 --> 00:23:10,610
DAVID J. MALAN: Gut.

519
00:23:10,610 --> 00:23:11,170
Es ist schneller.

520
00:23:11,170 --> 00:23:12,920
Sie senden nicht nutzlos
Daten an den Server.

521
00:23:12,920 --> 00:23:14,670
>> So können Sie wieder eine
sofortige Reaktion.

522
00:23:14,670 --> 00:23:16,560
Und insgesamt der Benutzer
Erfahrung ist besser.

523
00:23:16,560 --> 00:23:17,900
Denken Sie über die Alternative.

524
00:23:17,900 --> 00:23:21,160
>> Wenn für Gmail-- und war
Vor vielen Jahren der Fall war.

525
00:23:21,160 --> 00:23:24,160
Angenommen, Sie haben eine neue E-Ihrem Google Mail bekam
Konto, aber der einzige Weg, durch

526
00:23:24,160 --> 00:23:26,510
zu sehen, dass ist es, wie,
laden Sie die ganze Seite.

527
00:23:26,510 --> 00:23:29,030
Oder nehmen Sie anklicken
Ein Link zu einer E-Mail zu lesen.

528
00:23:29,030 --> 00:23:31,600
>> Alles muss so neu zu laden
dass Sie die E-Mail zu sehen.

529
00:23:31,600 --> 00:23:33,380
Oder Facebook-- erhalten Sie eine Chat-Nachricht.

530
00:23:33,380 --> 00:23:36,000
Sie sehen es nicht, bis Sie neu zu laden
die Seite oder klicken Sie einige Link.

531
00:23:36,000 --> 00:23:38,380
>> Wie, das wäre furchtbar sein ein
lästige Benutzererfahrung.

532
00:23:38,380 --> 00:23:41,300
Und dies ist, wie es war,
klar, als ich lief für UC

533
00:23:41,300 --> 00:23:44,760
und die Bahn war viel weniger dynamischen
und JavaScript war nicht so populär

534
00:23:44,760 --> 00:23:45,601
wie es jetzt ist.

535
00:23:45,601 --> 00:23:47,850
Und es wird immer viel
dynamischer und viel mehr

536
00:23:47,850 --> 00:23:49,900
Client-Seite in diesem Sinne.

537
00:23:49,900 --> 00:23:54,370
>> Aber es gibt einen Haken hier, und
Dies ist eine Art eine lästige Gotcha.

538
00:23:54,370 --> 00:23:58,720
Nur weil Sie Client-Seite hinzufügen
Erkennung wie dies bedeutet nicht,

539
00:23:58,720 --> 00:24:01,430
Sie oder sollten verzichten können
Server-Seite-Erkennung.

540
00:24:01,430 --> 00:24:04,080
Sie wollen im Wesentlichen auf Ihre setzen
Fehlerprüfung in beiden Orten.

541
00:24:04,080 --> 00:24:05,830
Denn was war einer
der Lektion gelernt

542
00:24:05,830 --> 00:24:10,270
aus dem Artikel, den ich las einige Auszüge
aus mit diesem dummen CMS system--

543
00:24:10,270 --> 00:24:14,410
Content Management System-- das war
Umsetzung seiner Authentifizierungssystem,

544
00:24:14,410 --> 00:24:16,790
ihre Anmeldung über welchen Mechanismus?

545
00:24:16,790 --> 00:24:19,515

546
00:24:19,515 --> 00:24:20,469
JavaScript.

547
00:24:20,469 --> 00:24:21,499
>> PUBLIKUM: JavaScript.

548
00:24:21,499 --> 00:24:23,290
DAVID J. MALAN:
JavaScript genau, richtig?

549
00:24:23,290 --> 00:24:24,610
Es wurde mit Hilfe von JavaScript.

550
00:24:24,610 --> 00:24:27,120
Und wörtlich, haben Sie Jungs
spielte wohl ein wenig

551
00:24:27,120 --> 00:24:28,700
mit Chrome Inspector.

552
00:24:28,700 --> 00:24:30,890
Und wenn ich es finden kann, inspizieren Element.

553
00:24:30,890 --> 00:24:33,670
>> Lassen Sie mich gehen über zu tun
alle Chrome-Optionen.

554
00:24:33,670 --> 00:24:37,080
Und dies ist, wie einfach es ist,
deaktivieren JavaScript im Browser.

555
00:24:37,080 --> 00:24:38,950
Überprüfen Sie, nicht mehr JavaScript.

556
00:24:38,950 --> 00:24:41,070
>> So in Fairness, eine Menge
der Bahn in diesen Tagen

557
00:24:41,070 --> 00:24:43,430
ist gerade dabei, da brechen
Gmail und andere sites--

558
00:24:43,430 --> 00:24:46,140
Facebook-- davon aus, dass
JavaScript ist aktiviert.

559
00:24:46,140 --> 00:24:50,180
Aber wenn Sie etwas Dummes tun
wie nur die Validierung Nutzer Eingangs

560
00:24:50,180 --> 00:24:52,520
und Überprüfung es für
Fehler auf der Client-Seite,

561
00:24:52,520 --> 00:24:54,940
ein Gegner könnte leicht tun.

562
00:24:54,940 --> 00:24:57,180
Und dann noch klüger
Gegner wie euch

563
00:24:57,180 --> 00:25:01,120
jetzt konnte Telnet oder Locken verwenden
oder einfach nur Kommandozeilenbefehle

564
00:25:01,120 --> 00:25:05,300
und tatsächlich Nachrichten an den Server zu senden
dass ähnlich werden nicht überprüft Fehler.

565
00:25:05,300 --> 00:25:08,380
>> Das ist also eher ein
Benutzeroberfläche Entscheidung

566
00:25:08,380 --> 00:25:13,060
als es eine tatsächliche technische
improvement-- Umsetzung

567
00:25:13,060 --> 00:25:14,410
etwas Client-Seite wie diese.

568
00:25:14,410 --> 00:25:16,800
So, jetzt ein kurzer Blick, aber dann
Ich werde in der Online-Spaziergang zu verschieben

569
00:25:16,800 --> 00:25:17,674
durch für diese ein.

570
00:25:17,674 --> 00:25:21,480
In Form zwei, wir eigentlich durchgemacht
und den Code zu reinigen ein wenig.

571
00:25:21,480 --> 00:25:23,650
Aber lassen Sie mich zu einem aufschieben
der Videos wir wahrscheinlich

572
00:25:23,650 --> 00:25:27,970
embed in Pset8, die nur zeigt Ihnen ein
ähnliche Syntax mit einer Bibliothek namens

573
00:25:27,970 --> 00:25:32,320
jQuery, was ein super, super ist
Volksbibliothek in JavaScript

574
00:25:32,320 --> 00:25:34,510
dass ehrlich gesagt die meisten Menschen
benutzen Sie einfach diesen Tagen

575
00:25:34,510 --> 00:25:37,070
und sogar als verwirren
Sein JavaScript selbst.

576
00:25:37,070 --> 00:25:38,950
>> Und es neigt dazu beinhalten
einige Dollar-Zeichen

577
00:25:38,950 --> 00:25:41,350
und Schlüsselwörter wie Dokument
in Klammern hier.

578
00:25:41,350 --> 00:25:44,480
Aber noch einmal, lassen Sie mich zu verschieben
einige langsamer Tutorials online

579
00:25:44,480 --> 00:25:46,750
anstatt in nur Syntax gebunden zu werden.

580
00:25:46,750 --> 00:25:48,630
Gehen wir weiter zu
etwas ein wenig kühler

581
00:25:48,630 --> 00:25:50,520
im Hinblick auf die Anwendungen dafür.

582
00:25:50,520 --> 00:25:57,730
>> Also insbesondere, lass mich gehen
vor und eröffnen das hier.

583
00:25:57,730 --> 00:25:58,340
Komm schon.

584
00:25:58,340 --> 00:25:59,380
Dort gehen wir.

585
00:25:59,380 --> 00:26:01,500
>> Lassen Sie mich hier eröffnen dieses Bild.

586
00:26:01,500 --> 00:26:03,450
Unnötig kompliziert
suchen, aber es

587
00:26:03,450 --> 00:26:07,880
beschreibt eine Technik, die als AJAX--
Asynchronous JavaScript and XML, wo

588
00:26:07,880 --> 00:26:10,530
das X für XML ist eigentlich
nicht mehr wirklich genutzt.

589
00:26:10,530 --> 00:26:13,430
Es neigt dazu, etwas zu verwenden
sonst genannt JSON.

590
00:26:13,430 --> 00:26:16,560
>> Aber hier ist, wie so etwas
Google Maps oder Google Earth funktioniert.

591
00:26:16,560 --> 00:26:18,060
Lassen Sie uns versuchen, diese im laufenden Betrieb, eigentlich.

592
00:26:18,060 --> 00:26:21,590
Lassen Sie mich gehen Sie vor und öffnen
Chrome auf meinem Browser.

593
00:26:21,590 --> 00:26:26,236
>> Und lassen Sie mich in zu gehen,
sagen, maps.google.com.

594
00:26:26,236 --> 00:26:29,260

595
00:26:29,260 --> 00:26:31,930
Und tatsächlich, wenn du alt bist
genug zu erinnern, was,

596
00:26:31,930 --> 00:26:35,600
wie war MapQuest wie zurück in den Tag,
und vielleicht haben sie noch so arbeiten.

597
00:26:35,600 --> 00:26:38,870
Wenn Sie verwendet werden, um für something-- suchen
33 Oxford Street, Cambridge, Mass,

598
00:26:38,870 --> 00:26:40,650
lass es uns tun this-- Sie
wäre eigentlich, wenn Sie

599
00:26:40,650 --> 00:26:43,000
wollte nach oben zu schwenken und
unten, links und rechts,

600
00:26:43,000 --> 00:26:44,920
Sie möchten einen Blick
großen Pfeil an der Spitze, und es

601
00:26:44,920 --> 00:26:46,921
würden Sie zeigen eine andere
Rahmen der Karte hier oben.

602
00:26:46,921 --> 00:26:49,753
Oder würden Sie links Klick und Sie
würde hier zu gehen, oder ein weiterer Klick

603
00:26:49,753 --> 00:26:51,000
und Sie würden hier zu gehen.

604
00:26:51,000 --> 00:26:53,000
Aber anstatt diese
Tage, die wir natürlich nur

605
00:26:53,000 --> 00:26:55,970
für selbstverständlich, dass wir gehen können
der Umgebung von Cambridge ziemlich schnell

606
00:26:55,970 --> 00:26:57,550
nur durch Klicken und Ziehen.

607
00:26:57,550 --> 00:26:59,130
Aber beachten Sie, es gibt einige Pannen.

608
00:26:59,130 --> 00:27:02,160
>> Wenn ich dies tun schnell genug,
was passiert zu sein scheint

609
00:27:02,160 --> 00:27:05,960
wie ich ziehen ein wenig zu schnell
für den Computer zu halten?

610
00:27:05,960 --> 00:27:07,160
Was sehen Sie?

611
00:27:07,160 --> 00:27:07,660
Ja.

612
00:27:07,660 --> 00:27:09,232
>> PUBLIKUM: Die Pixel nicht aktualisieren.

613
00:27:09,232 --> 00:27:10,940
DAVID J. MALAN: Der
Pixel nicht aktualisieren.

614
00:27:10,940 --> 00:27:12,870
Es gibt actually-- und Sie
könnte dies zu sehen, tatsächlich,

615
00:27:12,870 --> 00:27:15,360
wenn Sie online und Pause gerade anschauen
dieser oder tatsächlich Dinge verlangsamt

616
00:27:15,360 --> 00:27:18,600
für once-- du wirst sehen, dass es
Fliesen, Quadrate oder Rechtecke,

617
00:27:18,600 --> 00:27:22,040
werden aus der Karte fehlen, bis
Bruchteil einer Sekunde später, mehr Daten,

618
00:27:22,040 --> 00:27:24,390
Mehr Bilder tatsächlich
Auf dem Bildschirm erscheinen.

619
00:27:24,390 --> 00:27:29,810
Und in der Tat, wenn wir dies tun, indem Sie
bis Chrome's-- sagen, Chrome-- lassen

620
00:27:29,810 --> 00:27:30,310
mal sehen.

621
00:27:30,310 --> 00:27:31,090
Wir können das nicht tun.

622
00:27:31,090 --> 00:27:31,860
>> Oh, hoppla.

623
00:27:31,860 --> 00:27:34,761
Lassen Sie uns eröffnen maps.google.com.

624
00:27:34,761 --> 00:27:36,660
Lassen Sie mich das Fenster größer erneut.

625
00:27:36,660 --> 00:27:38,836
>> Gehen Sie zurück auf 33 Oxford Street.

626
00:27:38,836 --> 00:27:42,010

627
00:27:42,010 --> 00:27:43,760
Was war die Website war ich auf vor kurzem?

628
00:27:43,760 --> 00:27:46,440
Ich hatte dieses, wie, Privat rant zu
mir, dass ich dann Instant Message würde

629
00:27:46,440 --> 00:27:48,470
Jeder Freund Wer war online
, der es hören wollte.

630
00:27:48,470 --> 00:27:49,345
Es gibt einige Website.

631
00:27:49,345 --> 00:27:52,680
Ich denke, es ist so Comcast--
ein sehr großer amerikanischer ISP.

632
00:27:52,680 --> 00:27:56,355
Sie können, wenn Sie sich für neue Kabel
Modemdienst oder Kabel-TV-Service,

633
00:27:56,355 --> 00:27:59,230
sie eine Form haben sehr preis
wo sie Sie fragen Sie nach Ihrer Adresse.

634
00:27:59,230 --> 00:28:01,450
Und haben diese erstaunliche
Feature namens Auto-Vervollständigen,

635
00:28:01,450 --> 00:28:04,600
Google, das beginnt zu füllen
in der Antwort auf Ihre Frage.

636
00:28:04,600 --> 00:28:08,090
>> Das Problem ist, sie Auto-Vervollständigen tun
auf der ersten Dinge, die Sie eingeben.

637
00:28:08,090 --> 00:28:12,890
Also, wenn Sie mit der Eingabe in 33 starten,
Sie werden buchstäblich zeigen jedes Haus

638
00:28:12,890 --> 00:28:15,790
in Amerika, die beginnt
mit der Zahl 33

639
00:28:15,790 --> 00:28:17,920
bevor Sie fortfahren, um
erwarten, dass Sie mehr geben.

640
00:28:17,920 --> 00:28:20,660
Also, wenn Sie Oxford Typ 33,
dann zeigt es Ihnen jede Straße

641
00:28:20,660 --> 00:28:24,726
in Amerika, 33 Oxford hat
seinen Namen, unabhängig von der Stadt

642
00:28:24,726 --> 00:28:25,350
dass Sie in.

643
00:28:25,350 --> 00:28:26,320
>> Und dann haben Sie die Eingabe fortsetzen.

644
00:28:26,320 --> 00:28:28,930
Und schließlich, erkennt es, daß sie es nicht tun
bieten Service zu Ihnen nach Hause in Cambridge

645
00:28:28,930 --> 00:28:29,920
oder so ähnlich.

646
00:28:29,920 --> 00:28:33,410
Aber der Punkt ist, ist dies die
asinine Umsetzung von Auto

647
00:28:33,410 --> 00:28:34,140
Ergänzen je.

648
00:28:34,140 --> 00:28:36,400
>> Und ich werde einfach ausschalten
auf dieser Tangente wieder.

649
00:28:36,400 --> 00:28:39,040
Aber es gibt gute Möglichkeiten, um
verwenden JavaScript und schlechte Wege.

650
00:28:39,040 --> 00:28:40,750
Und das ist nicht unbedingt die beste.

651
00:28:40,750 --> 00:28:46,360
>> Aber der Punkt ist hier, bevor diese
Tirade war, hier zu eröffnen Tools unten

652
00:28:46,360 --> 00:28:49,480
und eröffnen Entwickler-Tools,
Wie wir bereits aufgefordert,

653
00:28:49,480 --> 00:28:52,840
und mit dem Netzwerk zu sehen
Registerkarte als ich auf wirklich schnell.

654
00:28:52,840 --> 00:28:55,400
Und bemerken eine ganze Reihe
von GET-Anfragen passiert.

655
00:28:55,400 --> 00:28:57,310
All dies geschah, da ich gezogen.

656
00:28:57,310 --> 00:29:00,170
>> Und wahrscheinlich, ja
viele dieser Reihen

657
00:29:00,170 --> 00:29:04,060
Jetzt sind Bildstrich JPEG
MIME-Typen oder Inhaltstypen.

658
00:29:04,060 --> 00:29:07,750
Das liegt daran, welchen Chrom tut
jedesmal, wenn ich klicken und ziehen, klicken Sie auf

659
00:29:07,750 --> 00:29:11,650
und ziehen, ist es zu realisieren, oh, ich
gehen müssen fragen Google für die Kachel

660
00:29:11,650 --> 00:29:15,080
Auf der Karte, die über hier ist,
schnell herunterladen zu können via HTTP,

661
00:29:15,080 --> 00:29:19,550
und dann auf den so genannten DOM fügen Sie es
zu den Web-Browser im Speicher Baum

662
00:29:19,550 --> 00:29:24,430
Darstellung so dass der Benutzer,
mich sieht, dass aktualisierte Fliese.

663
00:29:24,430 --> 00:29:26,795
Und dies ist wegen der
eine Technik namens AJAX.

664
00:29:26,795 --> 00:29:28,920
Zurück in den Tag, es ist wirklich
war der Fall, wenn Sie

665
00:29:28,920 --> 00:29:33,050
ändern wollte, was auf dem Bildschirm,
müssten Sie klicken oben, unten, links,

666
00:29:33,050 --> 00:29:33,550
rechts.

667
00:29:33,550 --> 00:29:34,740
Und dann eine neue Seite öffnen würde.

668
00:29:34,740 --> 00:29:36,531
Aber in diesen Tagen, alles
ist dynamischer.

669
00:29:36,531 --> 00:29:40,490
Es geschieht in der Art, wie wir Menschen würden
hoffe, es wäre eigentlich interaktiv.

670
00:29:40,490 --> 00:29:43,210
Und erreicht dies durch
über eine Technik, die als

671
00:29:43,210 --> 00:29:46,170
AJAX, was vielleicht am besten ist
durch ein Beispiel erläutert.

672
00:29:46,170 --> 00:29:49,730
Lassen Sie mich zunächst vorangehen
und öffnen Sie eine Datei

673
00:29:49,730 --> 00:29:53,540
quote.php gerufen
heutigen Verteilungscode.

674
00:29:53,540 --> 00:29:56,200
>> Und dann lass mich tun symbol-- hoppla.

675
00:29:56,200 --> 00:30:02,399
Lassen Sie mich Symbol do = GOOG
für nur einige Lager.

676
00:30:02,399 --> 00:30:04,440
Oder eigentlich, machen wir das
ein von FREE der Pset.

677
00:30:04,440 --> 00:30:05,270
Enter.

678
00:30:05,270 --> 00:30:06,580
>> Und jetzt merken, was ich zurückkomme.

679
00:30:06,580 --> 00:30:09,210
Das ist also ein wirklich
kurze PHP-Datei, die ich

680
00:30:09,210 --> 00:30:13,210
schrieb, dass einfach leiht Code
von Lookup-Funktion Pset7 der

681
00:30:13,210 --> 00:30:17,830
und spuckt mit diesen geschweiften Klammer und
Zitate und Doppelpunkt-Notation, offenbar,

682
00:30:17,830 --> 00:30:22,747
Preis der aktuelle Bestand für die
Unternehmen, die Sie via GET übergeben in.

683
00:30:22,747 --> 00:30:24,580
So ist das anders
von den meisten von dem, was wir haben

684
00:30:24,580 --> 00:30:26,496
in dieser Bekanntmachung ich fertig bin
buchstäblich spuckt

685
00:30:26,496 --> 00:30:27,870
was aussieht wie JavaScript-Code.

686
00:30:27,870 --> 00:30:30,020
>> In der Tat ist dies ein JavaScript-Objekt.

687
00:30:30,020 --> 00:30:34,130
In der Tat, nur um mehr klar sein,
JavaScript Object Notation-- JSON--

688
00:30:34,130 --> 00:30:38,330
ist nur eine andere Art zu sagen, dass Sie
können Daten in JavaScript viel vertreten

689
00:30:38,330 --> 00:30:41,660
wie möglich in PHP
Verwendung von Schlüsselwertpaare.

690
00:30:41,660 --> 00:30:44,270
Also, wenn ich wollte, zu erklären,
eine Variable in JavaScript

691
00:30:44,270 --> 00:30:47,872
um darstellt Zamyla, für
instance-- eine Struktur für Zamyla--

692
00:30:47,872 --> 00:30:49,580
und wir nennen es
Student, diese Variable.

693
00:30:49,580 --> 00:30:53,060
Ihre ID ist einer, Das Haus ist
Winthrop, und der Name ist Zamyla.

694
00:30:53,060 --> 00:30:55,490
>> Aber ich kann auch ein Array von Objekten.

695
00:30:55,490 --> 00:30:58,710
Also, wenn ich eigentlich haben wollte
ein Array in JavaScript enthalten

696
00:30:58,710 --> 00:31:01,740
mehrere solche Objekte, diese
Zeit, die das Personal,

697
00:31:01,740 --> 00:31:04,910
Ich könnte diese drei haben
Stücke von Code zurück

698
00:31:04,910 --> 00:31:08,560
nach hinten, um für diese zurück
drei ehemalige Mitarbeiter.

699
00:31:08,560 --> 00:31:12,201
So ist die Syntax, hübsch
ähnlich wie PHP both--.

700
00:31:12,201 --> 00:31:13,700
Aber dies ist besonders JavaScript.

701
00:31:13,700 --> 00:31:15,940
Es ist Object Notation.

702
00:31:15,940 --> 00:31:17,240
Was also ist das geeignet?

703
00:31:17,240 --> 00:31:21,580
>> Wenn ich Code schreiben, ausspuckt JSON--
JavaScript Object Notation-- Sachen,

704
00:31:21,580 --> 00:31:24,670
sieht so aus oder Sachen,
sieht aus wie Zamyla Der Aufbau,

705
00:31:24,670 --> 00:31:27,730
Ich kann tatsächlich nutzen diese
in Programme, die ich zu schreiben.

706
00:31:27,730 --> 00:31:30,660
Lassen Sie mich gehen, um ajax0.html.

707
00:31:30,660 --> 00:31:33,310
Und dies too-- nicht viel
gedacht, um Ästhetik gegeben.

708
00:31:33,310 --> 00:31:34,660
Aber schau, was passiert.

709
00:31:34,660 --> 00:31:37,050
>> Lassen Sie mich gehen Sie vor und geben Sie hier kostenlos.

710
00:31:37,050 --> 00:31:38,490
Klicken Sie bekommen Zitat.

711
00:31:38,490 --> 00:31:41,060
Und beachten Sie die URL nicht geändert hat.

712
00:31:41,060 --> 00:31:47,250
Aber ich bekam ein Pop-up mit scheinbar
heutigen Penny Aktienkurs von 0,15 $.

713
00:31:47,250 --> 00:31:49,062
Also gar nicht so schlecht.

714
00:31:49,062 --> 00:31:52,020
Aber der Unterschied ist, dass irgendwie,
Diese Daten kam zurück, um mich direkt an.

715
00:31:52,020 --> 00:31:54,250
Aber lassen Sie uns einen Schritt in Richtung
etwas besser vertraut.

716
00:31:54,250 --> 00:31:58,900
In der Version eines dieser, lassen Sie mich
geben wieder frei, klicken Sie auf Get Quote

717
00:31:58,900 --> 00:32:01,146
und now-- oh, das war
eigentlich die jQuery-Version.

718
00:32:01,146 --> 00:32:03,270
Also lassen Sie mich- ich nicht
Schnellvorlauf ziemlich weit genug.

719
00:32:03,270 --> 00:32:05,830
Lassen Sie mich auf die Version zwei zu gehen,
Das ist, wo ich wollte.

720
00:32:05,830 --> 00:32:07,260
Beachten Sie, was ich hier getan.

721
00:32:07,260 --> 00:32:10,370
Ich habe eine Web page-- ein super
einfache Version einer beliebigen Webseite

722
00:32:10,370 --> 00:32:14,260
Sie heute mit einem Textfeld verwenden können
Jetzt kostenlos anmelden und dann anscheinend gerade

723
00:32:14,260 --> 00:32:14,880
Text.

724
00:32:14,880 --> 00:32:16,860
>> Dies ist nicht eine Form hier, anscheinend.

725
00:32:16,860 --> 00:32:19,360
Aber wenn ich auf zu bekommen
zitat, bemerken meiner Web-Seite

726
00:32:19,360 --> 00:32:22,760
ist im Begriff, als ob ich ändern
gerade eine neue Sofortnachricht bekam

727
00:32:22,760 --> 00:32:25,360
oder als ob ich gerade umgezogen die
Karte und benötigt, um mehr Daten zu bekommen

728
00:32:25,360 --> 00:32:29,220
dynamisch an die Web-Seite hinzugefügt
ohne die URL Wechsel und dem Nutzer

729
00:32:29,220 --> 00:32:30,980
Erfahrung immer unterbrochen.

730
00:32:30,980 --> 00:32:35,750
Tatsächlich, ich bin immer noch auf der
exakt gleichen place-- ajax2.html.

731
00:32:35,750 --> 00:32:39,080
>> Also schauen wir uns nur an diesem Beispiel
und sehen, wie dies geschieht.

732
00:32:39,080 --> 00:32:42,490
Lassen Sie mich in ajax2.html gehen.

733
00:32:42,490 --> 00:32:44,770
Und bemerken zunächst das Formular aus.

734
00:32:44,770 --> 00:32:47,092
>> Hier unten, ich bin aus
Aus Auto komplett.

735
00:32:47,092 --> 00:32:48,800
Manchmal wird es
ärgerlich, wenn der Browser

736
00:32:48,800 --> 00:32:50,508
versucht, Ihnen zu zeigen,
Ihre ganze Geschichte.

737
00:32:50,508 --> 00:32:53,450
So können Sie es in HTML tun, indem
nur sagen, Auto Complete ab.

738
00:32:53,450 --> 00:32:57,290
>> Ich habe dieses Textfeld ein bestimmter
symbol-- vielmehr ein ID des Symbols.

739
00:32:57,290 --> 00:32:58,977
Und nun, ist dies ein interessantes Feature.

740
00:32:58,977 --> 00:33:01,310
Wir haben noch nicht über Spanne gesprochen,
aber man kann darüber nachdenken

741
00:33:01,310 --> 00:33:03,177
wie ein Absatz-Tag oder div-Tag.

742
00:33:03,177 --> 00:33:05,010
Es ist, was ein genannt
Inline-Element, das

743
00:33:05,010 --> 00:33:07,415
bedeutet, dass Sie einen Absatz nicht bekommen
brechen oben und unten.

744
00:33:07,415 --> 00:33:11,530
Es ist gerade dabei, in-line bleiben, ohne
Schlagen der Äquivalent eingeben.

745
00:33:11,530 --> 00:33:17,980
Also habe ich dieses Stück HTML gegeben
um eine eindeutige Kennung bestimmt werden

746
00:33:17,980 --> 00:33:20,130
dass ich willkürlich genannt Preis.

747
00:33:20,130 --> 00:33:21,560
Und ich habe einen Submit-Button.

748
00:33:21,560 --> 00:33:25,420
>> Weil nun hier-- und dies ist
tatsächlich Super erstaunlich, wie wenig Code

749
00:33:25,420 --> 00:33:27,660
Sie schreiben zu tun
relativ ordentlich things--

750
00:33:27,660 --> 00:33:31,800
bemerken, was ich hier oben, wenn ich getan
Bildlauf nach oben zum Kopf dieser Seite.

751
00:33:31,800 --> 00:33:34,970
Ich habe zuerst in enthalten
meinen Kopf ein Script-Tag

752
00:33:34,970 --> 00:33:37,410
dass tatsächlich referenziert ein
JavaScript-Datei an anderer Stelle.

753
00:33:37,410 --> 00:33:39,702
Dies ist aus der Organisation
dass schreibt jQuery,

754
00:33:39,702 --> 00:33:42,660
Und das ist nur die Ihnen die neuesten
Version ihrer jQuery-Bibliothek.

755
00:33:42,660 --> 00:33:46,305
>> Also das ist eine Art, wie scharf
gehören in C oder erfordern in PHP.

756
00:33:46,305 --> 00:33:48,900
Sie verwenden das Skript-Tag
mit einem Quellattribut.

757
00:33:48,900 --> 00:33:52,030
Aber jetzt meine eigenen Code ist
sein wird direkt hier.

758
00:33:52,030 --> 00:33:54,170
>> Hinweis Ich habe eine Funktion namens Quotes.

759
00:33:54,170 --> 00:33:56,180
Und es sieht ein wenig
kryptisch auf den ersten Blick.

760
00:33:56,180 --> 00:33:57,305
Aber lassen Sie uns zu necken diese auseinander.

761
00:33:57,305 --> 00:33:59,090
Geben Sie mir eine Variable namens URL.

762
00:33:59,090 --> 00:34:01,390
Weisen Sie es wörtlich diese Zeichenfolge.

763
00:34:01,390 --> 00:34:04,530
Also, einfache Anführungszeichen, doppelte Anführungszeichen in
JavaScript gibt mir nur einen String.

764
00:34:04,530 --> 00:34:06,900
Was bedeutet das Plus zu tun?

765
00:34:06,900 --> 00:34:08,199
Verkettung.

766
00:34:08,199 --> 00:34:12,610
>> Also das ist jetzt die jQuery-Syntax
das dauert ein wenig gewöhnungsbedürftig.

767
00:34:12,610 --> 00:34:18,310
Aber das bedeutet nur, holen Sie mir den DOM
Knoten, dessen eindeutige Kennung ist Symbol.

768
00:34:18,310 --> 00:34:21,929
Der Hashtag es bedeutet
eindeutige Kennung Symbol.

769
00:34:21,929 --> 00:34:24,929
>> Das Dollarzeichen in die
Klammern nur bedeuten, wickeln diese

770
00:34:24,929 --> 00:34:28,510
in jQuery eine Art Geheimrezept so
Sie erhalten zusätzliche Funktionen.

771
00:34:28,510 --> 00:34:31,880
Und dann ist .val offenbar
eine Funktion, oder wie wir heute sagen,

772
00:34:31,880 --> 00:34:35,219
eine Methode innerhalb dieses Knotens
dass nur gibt Ihnen den Wert.

773
00:34:35,219 --> 00:34:38,896
Also kurz gesagt, hässlich und verwirrend
da dies sieht auf den ersten Blick,

774
00:34:38,896 --> 00:34:42,020
Dies bedeutet nur, sich mit dem Benutzer eingegeben
in, legte es am Ende des Strings

775
00:34:42,020 --> 00:34:42,880
durch Verkettung es.

776
00:34:42,880 --> 00:34:43,739
Das ist alles.

777
00:34:43,739 --> 00:34:46,070
>> So, jetzt, letzten drei Zeilen.

778
00:34:46,070 --> 00:34:48,690
Sie können eine Menge von Squeeze
Funktionalität von drei Zeilen.

779
00:34:48,690 --> 00:34:52,199
Diese Dollar-Zeichen, als ein
beiseite lässt, ist nur ein Spitzname

780
00:34:52,199 --> 00:34:55,800
für einen speziellen globalen Variablen
wörtlich genannt jQuery.

781
00:34:55,800 --> 00:34:57,060
>> Dollarzeichen sieht einfach cool.

782
00:34:57,060 --> 00:35:00,080
Also die jQuery-Community nur irgendwie
der es als ihre besondere Symbol.

783
00:35:00,080 --> 00:35:02,470
Es bedeutet nicht, was es bedeutet, in PHP.

784
00:35:02,470 --> 00:35:06,356
In JavaScript ist Dollarzeichen
wie ein Buchstabe des Alphabets

785
00:35:06,356 --> 00:35:07,480
oder eine Zahl für eine Variable.

786
00:35:07,480 --> 00:35:09,000
>> Sie können einfach nur er als Name.

787
00:35:09,000 --> 00:35:09,770
Sieht einfach cool.

788
00:35:09,770 --> 00:35:11,890
Also der Community
es als Spitznamen angenommen

789
00:35:11,890 --> 00:35:13,390
für ihre eigene Bibliothek namens jQuery.

790
00:35:13,390 --> 00:35:15,060
>> Und es ist super beliebt.

791
00:35:15,060 --> 00:35:17,620
So erhalten JSON ist genau das.

792
00:35:17,620 --> 00:35:19,920
Es ist eine Funktion, die die
Leute bei jQuery geschrieben

793
00:35:19,920 --> 00:35:23,340
dass bekommt JSON von einer server--
JavaScript Object Notation.

794
00:35:23,340 --> 00:35:25,680
Aus welcher URL wird es
um diese Informationen zu bekommen?

795
00:35:25,680 --> 00:35:27,790
Offenbar aus dieser URL hier.

796
00:35:27,790 --> 00:35:31,180
>> Und was sollte der Browser als tun
sobald es wieder bekommt diese Antwort?

797
00:35:31,180 --> 00:35:36,500
Und das ist die Magie von AJAX, so zu
speak-- Asynchronous JavaScript in XML.

798
00:35:36,500 --> 00:35:41,320
Es ist schwer, mit einem solchen zu sehen
einfaches Beispiel, wie wir hier hatten.

799
00:35:41,320 --> 00:35:44,730
>> Aber dies war asynchron
das Gefühl, dass mein Code, wenn

800
00:35:44,730 --> 00:35:48,530
ausgeführt, um die eine Nachricht geschickt
Server zu holen mir etwas JSON.

801
00:35:48,530 --> 00:35:51,340
Und es geschah, super schnell
dass ich eine Antwort.

802
00:35:51,340 --> 00:35:55,130
Aber was interessant ist, dass diese
Codezeile nicht hängen meinem Computer.

803
00:35:55,130 --> 00:35:56,550
>> Ich sah nicht ein sich drehendes Symbol.

804
00:35:56,550 --> 00:35:59,200
Ich habe nicht zu verlieren die
Fähigkeit, meine Maus bewegen.

805
00:35:59,200 --> 00:36:01,340
Mein Browser war eigentlich völlig in Ordnung.

806
00:36:01,340 --> 00:36:06,290
>> Weil der Weg JavaScript nimmt die
Antwort von dem Server ist wie folgt.

807
00:36:06,290 --> 00:36:09,740
Sie registrieren, was Sie nennen würde
eine Callback-Funktion, die

808
00:36:09,740 --> 00:36:12,830
bedeutet nur, hey, JavaScript.

809
00:36:12,830 --> 00:36:16,100
Sobald der Server
antwortet mit JSON,

810
00:36:16,100 --> 00:36:18,750
rufen Sie bitte diese anonyme Funktion.

811
00:36:18,750 --> 00:36:23,910
>> Und bitte in diese Funktion übergeben
was auch immer String der Server ausspucken

812
00:36:23,910 --> 00:36:26,080
als Argument genannt Daten.

813
00:36:26,080 --> 00:36:28,360
Also mit anderen, Worten, wenn
Ich bin dynamisch Montage

814
00:36:28,360 --> 00:36:33,370
eine URL quote.php vorbei in diese
Symbol wie kostenlose oder GOOG oder Dingsbums,

815
00:36:33,370 --> 00:36:36,830
Ich bin dann erzählen
JavaScript holen diese URL.

816
00:36:36,830 --> 00:36:39,080
Beachten Sie, dass der Browser
wird etwas zurückgeben

817
00:36:39,080 --> 00:36:42,680
das sieht aus wie wir sahen earlier-- dies.

818
00:36:42,680 --> 00:36:45,940
>> Und was das zweite Argument
hier zu bekommen JSON sagt

819
00:36:45,940 --> 00:36:48,450
wird diese Funktion aufrufen
wenn der Server wieder da

820
00:36:48,450 --> 00:36:52,440
ob 10 Millisekunden
ab sofort oder 10 Sekunden ab jetzt.

821
00:36:52,440 --> 00:36:55,840
Und sobald Sie das tun,
fügen Sie den Preis auf die Seite.

822
00:36:55,840 --> 00:36:58,030
Diese Syntax hier nur
Mittel holen den Knoten

823
00:36:58,030 --> 00:37:01,940
aus dem Baum, dessen eindeutige Kennung
ist Preis-- dieser Spanne wir bereits gesehen.

824
00:37:01,940 --> 00:37:04,320
>> Diese Methode namens HTML
sagt nur, gehen Sie zu ersetzen

825
00:37:04,320 --> 00:37:08,770
der HTML-Code, gibt es mit data.price.

826
00:37:08,770 --> 00:37:10,200
Was ist data.price?

827
00:37:10,200 --> 00:37:12,850
Nun, der Browser, erinnern,
zeigte mir diese zurückkommen.

828
00:37:12,850 --> 00:37:14,540
Das ist also Daten.

829
00:37:14,540 --> 00:37:18,100
>> Und so ist es ein wenig kryptisch
um die Kommas hier sehen.

830
00:37:18,100 --> 00:37:19,350
Aber in der Tat, lassen Sie mich dies zu tun.

831
00:37:19,350 --> 00:37:22,890
Lassen Sie mich nur fügen Sie diesen
ganz schnell in gedit

832
00:37:22,890 --> 00:37:27,240
und zeigen dies, wie wir zeigten,
Struktur Zamyla früheren.

833
00:37:27,240 --> 00:37:31,610
>> Was der Server zurückschicken ist ein
kleine Objekt, das wie folgt aussieht.

834
00:37:31,610 --> 00:37:37,140
Und so data.price ist
nur geben mir 0,1515.

835
00:37:37,140 --> 00:37:39,310
So viel bewegen
Teile hier alle auf einmal.

836
00:37:39,310 --> 00:37:41,860
>> Aber die Schlüssel zum Mitnehmen ist
dass wir diese Fähigkeit

837
00:37:41,860 --> 00:37:44,600
zusätzliche HTTP machen
Anfragen mit Hilfe von JavaScript

838
00:37:44,600 --> 00:37:46,090
ohne dass die Seite neu zu laden.

839
00:37:46,090 --> 00:37:49,580
Und dann können wir tatsächlich
ändern Sie die Web-Seite auf der Fliege.

840
00:37:49,580 --> 00:37:51,850
Und es stellt sich heraus, dass
JavaScript und andere Sprachen

841
00:37:51,850 --> 00:37:54,510
kann nun verwendet werden, nicht nur
um Webseiten zu mutieren,

842
00:37:54,510 --> 00:37:57,960
aber tatsächlich Software zu schreiben
in einer tatsächlichen Computer,

843
00:37:57,960 --> 00:38:00,240
nicht nur auf Chrome oder dergleichen beschränkt.

844
00:38:00,240 --> 00:38:03,530
>> In der Tat, if-- Colton, würden Sie
mag uns hier wieder verbinden

845
00:38:03,530 --> 00:38:06,100
mit Ihrem Labor-Code, und Chang als auch?

846
00:38:06,100 --> 00:38:09,140
Lassen Sie uns weitermachen, nachdem gesprochen
anonyme Funktionen und Callbacks

847
00:38:09,140 --> 00:38:13,090
und wirklich Schicksal hier locken
mit einer Live-Demo mit Blutungen

848
00:38:13,090 --> 00:38:16,480
Spitzentechnologie, einer der
Diese Elite Bewegungsgeräten.

849
00:38:16,480 --> 00:38:18,940
Nun, dieses Gerät, Rückruf,
ist ein kleines USB-Gerät

850
00:38:18,940 --> 00:38:25,620
sowie dass-- das ist beautiful--
dass die Stecker in den USB-Anschlüsse.

851
00:38:25,620 --> 00:38:29,120
>> Und dann stellt sie Eingangs
in Form von menschlichen Gesten

852
00:38:29,120 --> 00:38:32,560
durch Erfassen mit Infrarotstrahlen,
wesentlichen Bewegungen von Ihrem Arm.

853
00:38:32,560 --> 00:38:35,150
Während also das, was Maria versuchte
auf vorher war muskulös,

854
00:38:35,150 --> 00:38:39,000
tatsächlich das Gefühl, was sich ändert
Ihren Arm, das ist Infrarot basiert.

855
00:38:39,000 --> 00:38:44,390
So ist es für Bewegungen innerhalb der Suche
die Art von der Sphäre der Fuß oder so

856
00:38:44,390 --> 00:38:46,190
der Vorrichtung selbst.

857
00:38:46,190 --> 00:38:48,950
>> Also, warum nicht ich nehme
ein Stich an dieser ersten?

858
00:38:48,950 --> 00:38:53,100
Und lassen Sie uns fortfahren und werfen
Sie auf dem Overhead hier.

859
00:38:53,100 --> 00:38:56,250
Also lassen wir Coltons Laptop hier oben.

860
00:38:56,250 --> 00:38:58,360
Wir haben Andrew auf dem TV bekam.

861
00:38:58,360 --> 00:39:00,160
Und was würden Sie, dass ich als erstes tun?

862
00:39:00,160 --> 00:39:02,409
>> COLTON: voran und gehen Sie einfach
legen Sie Ihre Hände auf diesem Kerl

863
00:39:02,409 --> 00:39:04,430
und du wirst einige fabelhafte glitter sehen.

864
00:39:04,430 --> 00:39:07,230
>> DAVID J. MALAN: Very nice.

865
00:39:07,230 --> 00:39:11,110
Dies alles geschieht in Echtzeit.

866
00:39:11,110 --> 00:39:11,889
Ok.

867
00:39:11,889 --> 00:39:12,680
Alles klar, und yep.

868
00:39:12,680 --> 00:39:14,119
So schön.

869
00:39:14,119 --> 00:39:15,410
Na gut, was können wir tun?

870
00:39:15,410 --> 00:39:17,900
>> COLTON: zum nächsten Bildschirm gehen und zu sehen.

871
00:39:17,900 --> 00:39:19,136
>> DAVID J. MALAN: Alles klar.

872
00:39:19,136 --> 00:39:21,780
>> COLTON: Ein lustiges kleines Spiel
wo Sie zu Robotern zu machen.

873
00:39:21,780 --> 00:39:24,738
>> DAVID J. MALAN: Alles klar, so dass diese
ist fake Hände zeigen mir, was zu tun ist.

874
00:39:24,738 --> 00:39:27,920
COLTON: Ja Also los
und greifen einen der Blöcke

875
00:39:27,920 --> 00:39:30,637
und legte sie oben auf, dass Roboterkörper.

876
00:39:30,637 --> 00:39:32,137
DAVID J. MALAN: Oh, da ist meine Hand.

877
00:39:32,137 --> 00:39:34,000
Oh.

878
00:39:34,000 --> 00:39:34,780
OK, entzückend.

879
00:39:34,780 --> 00:39:37,500

880
00:39:37,500 --> 00:39:38,650
Warten Sie eine Minute, OK.

881
00:39:38,650 --> 00:39:41,320
Dort gehen wir.

882
00:39:41,320 --> 00:39:43,590
>> COLTON: Ich ein Unfall gemacht.

883
00:39:43,590 --> 00:39:45,423
>> DAVID J. MALAN: OK, ich werde diesen Kerl zu bekommen.

884
00:39:45,423 --> 00:39:45,923
Verdammt!

885
00:39:45,923 --> 00:39:48,467

886
00:39:48,467 --> 00:39:51,550
Als wir üben diese letzte
Nacht, wissen Sie, was das übertragen in?

887
00:39:51,550 --> 00:39:54,285
>> So was.

888
00:39:54,285 --> 00:39:55,490
Ok.

889
00:39:55,490 --> 00:39:55,990
Nächste?

890
00:39:55,990 --> 00:39:56,860
>> COLTON: Sicher.

891
00:39:56,860 --> 00:39:58,818
>> DAVID J. MALAN: All right,
und es gibt eine dritte.

892
00:39:58,818 --> 00:40:01,130

893
00:40:01,130 --> 00:40:01,674
In Ordnung.

894
00:40:01,674 --> 00:40:03,215
COLTON: Und in diesem einen, erhalten Sie zu--

895
00:40:03,215 --> 00:40:04,923
DAVID J. MALAN: Oh,
dieses irgendjemandes schön.

896
00:40:04,923 --> 00:40:06,650
COLTON: --yeah, auseinander nehmen diese Blume.

897
00:40:06,650 --> 00:40:07,441
DAVID J. MALAN: OK.

898
00:40:07,441 --> 00:40:11,170

899
00:40:11,170 --> 00:40:11,670
Nein?

900
00:40:11,670 --> 00:40:14,515
Verpasste.

901
00:40:14,515 --> 00:40:15,570
>> COLTON: Oh, dort gehen Sie.

902
00:40:15,570 --> 00:40:18,680
>> DAVID J. MALAN: Ah, Schau dir das an.

903
00:40:18,680 --> 00:40:19,830
Sehr schön.

904
00:40:19,830 --> 00:40:22,470
Nun, warum nicht 'wir nehmen
heraus ein Freiwilliger hier

905
00:40:22,470 --> 00:40:24,180
die gerne auf bis zu kommen.

906
00:40:24,180 --> 00:40:27,500
Wie wäre es genau dort
Im Grünen, ist es?

907
00:40:27,500 --> 00:40:30,540
>> Na gut, und lassen Sie uns have--
anstatt das zu tun, dass einige von euch

908
00:40:30,540 --> 00:40:34,590
könnte dieses Spiel wissen hier--
schnitt das Seil, vielleicht?

909
00:40:34,590 --> 00:40:35,100
Mal sehen.

910
00:40:35,100 --> 00:40:37,320
Wir haben unsere Gläser auf hier?

911
00:40:37,320 --> 00:40:38,625
>> Ok.

912
00:40:38,625 --> 00:40:39,270
Danke.

913
00:40:39,270 --> 00:40:39,380
Wie heißen Sie?

914
00:40:39,380 --> 00:40:40,350
>> PUBLIKUM: Laura.

915
00:40:40,350 --> 00:40:41,266
>> DAVID J. MALAN: Laura?

916
00:40:41,266 --> 00:40:42,120
Schön zu sehen.

917
00:40:42,120 --> 00:40:45,600
Wenn Sie nichts dagegen haben, setzen
Google Glass über Ihre Brille.

918
00:40:45,600 --> 00:40:46,970
Dies ist Colton.

919
00:40:46,970 --> 00:40:47,650
>> COLTON: Hallo.

920
00:40:47,650 --> 00:40:48,140
Freut mich, dich kennenzulernen.

921
00:40:48,140 --> 00:40:49,600
>> DAVID J. MALAN: OK, komm herum.

922
00:40:49,600 --> 00:40:52,516
Alles klar, so was Sie zu gehen
hier machen, nachdem diese spielte vor,

923
00:40:52,516 --> 00:40:55,650
wird über Ihre Hand
die Leap Motion hier.

924
00:40:55,650 --> 00:40:57,210
Und jetzt Ihre Pfeil bewegen sollte.

925
00:40:57,210 --> 00:40:57,710
Oh, nein.

926
00:40:57,710 --> 00:40:58,066
>> PUBLIKUM: No.

927
00:40:58,066 --> 00:40:58,780
>> DAVID J. MALAN: Wir
will noch nicht zu beenden.

928
00:40:58,780 --> 00:40:59,280
OK, warten.

929
00:40:59,280 --> 00:41:01,200
Hier drüben.

930
00:41:01,200 --> 00:41:03,530
So bemerken, wie Sie halten Ihre
Finger über etwas,

931
00:41:03,530 --> 00:41:06,750
die Maus beginnt zu gehen Grün,
Das ist, wie Sie klicken.

932
00:41:06,750 --> 00:41:08,980
>> So schweben über abspielen.

933
00:41:08,980 --> 00:41:10,970
Und nur einem Finger ist in Ordnung.

934
00:41:10,970 --> 00:41:13,869
Und jetzt klicken Sie auf den kleinen
grüne Kerl auf der linken Seite.

935
00:41:13,869 --> 00:41:15,410
Und nun halten, bis es füllt sich grün.

936
00:41:15,410 --> 00:41:15,640
Gut.

937
00:41:15,640 --> 00:41:16,990
Nun, wie, Stufe eins bis oben.

938
00:41:16,990 --> 00:41:20,190
>> PUBLIKUM: Ja, wir wollen ein Niveau, hier.

939
00:41:20,190 --> 00:41:21,660
>> DAVID J. MALAN: Gut.

940
00:41:21,660 --> 00:41:25,500
OK, also alles, was Sie haben
zu tun ist, das Seil geschnitten.

941
00:41:25,500 --> 00:41:28,240
Der Cursor ist das weiße da unten.

942
00:41:28,240 --> 00:41:28,880
>> Sehr schön.

943
00:41:28,880 --> 00:41:31,290

944
00:41:31,290 --> 00:41:32,790
Alles klar, es geht um schwieriger zu bekommen.

945
00:41:32,790 --> 00:41:34,800
So halten Sie den Finger für die nächsten jetzt.

946
00:41:34,800 --> 00:41:37,370

947
00:41:37,370 --> 00:41:39,030
Gut.

948
00:41:39,030 --> 00:41:39,999
Das hier ist hart.

949
00:41:39,999 --> 00:41:40,966
>> PUBLIKUM: Oh Mist.

950
00:41:40,966 --> 00:41:41,466
Ok.

951
00:41:41,466 --> 00:41:42,466
Sie will diesen Weg zu gehen.

952
00:41:42,466 --> 00:41:44,890
Oh Mist, dass--

953
00:41:44,890 --> 00:41:47,120
>> DAVID J. MALAN: Yeah.

954
00:41:47,120 --> 00:41:50,700
Sekundärziel ist es, alle Sterne zu bekommen.

955
00:41:50,700 --> 00:41:53,920
Na gut, nächste.

956
00:41:53,920 --> 00:41:57,504
>> Mal sehen, ob man diesen dritten eins zu bekommen.

957
00:41:57,504 --> 00:41:58,004
Gut.

958
00:41:58,004 --> 00:42:05,980

959
00:42:05,980 --> 00:42:06,840
OK, gehen Sie dort drüben.

960
00:42:06,840 --> 00:42:08,850
>> Sicher.

961
00:42:08,850 --> 00:42:11,230
Oh, sehr schön.

962
00:42:11,230 --> 00:42:11,930
In Ordnung.

963
00:42:11,930 --> 00:42:13,534
>> Also, warum nicht wir vertagen heute hier?

964
00:42:13,534 --> 00:42:15,200
Lassen Sie jedermann auf kommen, die spielen will.

965
00:42:15,200 --> 00:42:16,880
Vielen Dank an Laura unserer Freiwilligen.

966
00:42:16,880 --> 00:42:18,730
Und wir werden uns am Montag sehen.

967
00:42:18,730 --> 00:42:21,190
>> PUBLIKUM: Sie wollen wahrscheinlich diese zurück.

968
00:42:21,190 --> 00:42:23,640
>> Sprecher 2: An der nächsten CS50--

969
00:42:23,640 --> 00:42:35,222