1
00:00:00,000 --> 00:00:02,862
>> [RIPRODUZIONE DI BRANI MUSICALI]

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

3
00:00:10,030 --> 00:00:11,580
>> DAVID MALAN: Questo è CS50.

4
00:00:11,580 --> 00:00:12,880
Questo è l'inizio di settimana nove.

5
00:00:12,880 --> 00:00:15,797
E questo è ciò che avrebbe
stato 200 ° compleanno del signor Boole.

6
00:00:15,797 --> 00:00:17,630
Quindi questo è borsisti
a cui abbiamo accennato noi

7
00:00:17,630 --> 00:00:21,800
piuttosto alcune volte sull'utilizzo
Variabili booleane vero e falso,

8
00:00:21,800 --> 00:00:22,910
1 e 0 e tale.

9
00:00:22,910 --> 00:00:25,270
E questo è stato Google
Omaggio a lui oggi.

10
00:00:25,270 --> 00:00:26,489
Egli avrebbe compiuto 200.

11
00:00:26,489 --> 00:00:28,280
Quindi, se si desidera
unirsi a noi per CS50 pranzo,

12
00:00:28,280 --> 00:00:30,279
date un'occhiata al link
sul sito web del corso.

13
00:00:30,279 --> 00:00:33,580
E tali volti e amici come
questi vi aspettano qui a Cambridge.

14
00:00:33,580 --> 00:00:35,360
Volti come questi vi attendono a New Haven.

15
00:00:35,360 --> 00:00:37,800
E, infatti, in Ken
New Haven ha fatto gentilmente

16
00:00:37,800 --> 00:00:41,594
quello che è chiamato una GIF animata di Eli
qui in una recente lunch-- un GIF è ancora

17
00:00:41,594 --> 00:00:44,260
un altro formato di file grafico,
con la quale si è familiar-- che

18
00:00:44,260 --> 00:00:46,300
sembra un po 'qualcosa di simile.

19
00:00:46,300 --> 00:00:48,179
Quindi, solo una sequenza di-- OK.

20
00:00:48,179 --> 00:00:49,720
Nessuno qui a Cambridge sta ridendo.

21
00:00:49,720 --> 00:00:51,720
Ma a New Haven, questo
è davvero divertente, giusto?

22
00:00:51,720 --> 00:00:52,350
Tutto ok.

23
00:00:52,350 --> 00:00:53,940
>> Quindi noi unirsi lì.

24
00:00:53,940 --> 00:00:55,900
Qui ad Harvard,
in particolare, questo Mercoledì,

25
00:00:55,900 --> 00:00:59,480
se sei un sophomore o matricola even--
o anche pensiero junior-- del processo

26
00:00:59,480 --> 00:01:01,563
un interruttore nel calcolatore
scienza, sapere che ci sarò

27
00:01:01,563 --> 00:01:04,440
essere un CS raccomandando giusto questo
Mercoledì, poco dopo le lezioni

28
00:01:04,440 --> 00:01:08,040
alle 04:00 nel computer
edificio scienza Maxwell Dworkin.

29
00:01:08,040 --> 00:01:11,890
Metteremo questo sul corso del
sito web entro domani, pure.

30
00:01:11,890 --> 00:01:14,430
Donuts, mi è stato detto, sarà servito.

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

32
00:01:15,180 --> 00:01:18,790
Così divertente tutta-- stavo colpendo
in giro su internet,

33
00:01:18,790 --> 00:01:23,575
e ho trovato alcuni vecchi archivi
di mio ex sito web.

34
00:01:23,575 --> 00:01:25,950
E si scopre fuori-- intorno a questo
tempo, sembra di grande attualità

35
00:01:25,950 --> 00:01:28,910
da quando ho capito che le elezioni UC
stanno per attrezzarsi di nuovo.

36
00:01:28,910 --> 00:01:32,230
Così mi sono imbattuto per UC, perso miseramente.

37
00:01:32,230 --> 00:01:34,770
E forse questo è stato in parte perché.

38
00:01:34,770 --> 00:01:37,600
Quindi questo è stato il mio sito al momento.

39
00:01:37,600 --> 00:01:40,477
Per qualche ragione, ho pensato che fosse
una buona idea, prima di dire alla gente

40
00:01:40,477 --> 00:01:43,310
quello che la mia piattaforma era e perché
dovrebbe votare per me, che hanno

41
00:01:43,310 --> 00:01:47,770
di fare clic per entrare per scoprire che
informazioni, che a posteriori è

42
00:01:47,770 --> 00:01:48,660
tipo di raccapricciante.

43
00:01:48,660 --> 00:01:50,910
Io non so davvero cosa fosse.

44
00:01:50,910 --> 00:01:53,140
>> Ma di certo non ha fatto
aiutare la mia campagna.

45
00:01:53,140 --> 00:01:56,874
Ho anche scoperto che dal senior
anno di successo che ho avuto questo calendario Muppet.

46
00:01:56,874 --> 00:01:58,540
Muppets erano sorta di in voga allora.

47
00:01:58,540 --> 00:01:59,456
O forse non lo erano.

48
00:01:59,456 --> 00:02:01,790
Ho avuto un calendario Muppet allora.

49
00:02:01,790 --> 00:02:04,860
E ho pensato che sarebbe stato bello nome
il mio computer sulla rete di Harvard

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

51
00:02:07,460 --> 00:02:10,370
Al momento, tutti abbiamo avuto modo univoco
nomi host identificabili.

52
00:02:10,370 --> 00:02:13,150
E si può scegliere qualche vanità
il nome al posto del tuo nome.

53
00:02:13,150 --> 00:02:15,580
E sono andato con sommozzatore per qualche motivo.

54
00:02:15,580 --> 00:02:19,040
>> E poi ho started-- ho speso un sacco
di tempo facendo clic attraverso questi link

55
00:02:19,040 --> 00:02:20,280
questa mattina.

56
00:02:20,280 --> 00:02:24,690
E questa è stata la mia pagina su,
che ora tipo di sembra adorabile.

57
00:02:24,690 --> 00:02:28,210
Ma testimonia anche solo
quanto la tecnologia è arrivata.

58
00:02:28,210 --> 00:02:30,310
Voglio dire, di nuovo nel corso della giornata,
una 486 era qualcosa.

59
00:02:30,310 --> 00:02:34,090
In questi giorni, è super, super,
super lento e ben meno

60
00:02:34,090 --> 00:02:36,216
quanto si possa avere nel vostro
tasche proprie in questi giorni.

61
00:02:36,216 --> 00:02:38,465
C'è molto di più in là che
era ancora più imbarazzante.

62
00:02:38,465 --> 00:02:39,770
Quindi lascio a questo.

63
00:02:39,770 --> 00:02:42,640
Ma che è stato il mio primo
incursione nel web-- oh, no.

64
00:02:42,640 --> 00:02:43,180
Che non era.

65
00:02:43,180 --> 00:02:47,000
La mia prima incursione reale in programmazione web
Era questo sito, che ho solo dimenticato.

66
00:02:47,000 --> 00:02:50,620
Ad un certo punto, ho imparato a
fare immagini di sfondo ripetitive.

67
00:02:50,620 --> 00:02:55,260
E così ho trovato questo piastrelle efficace,
come giocatore di hockey, calcio e golf

68
00:02:55,260 --> 00:02:58,040
palla, o qualunque cosa sia
per il sito Frosh IM.

69
00:02:58,040 --> 00:03:01,390
E questo era in realtà, sinceramente il
primo progetto basato sul web ho preso on--

70
00:03:01,390 --> 00:03:03,880
Penso che forse studente del secondo anno
anno, junior anno di successo

71
00:03:03,880 --> 00:03:07,622
dopo aver preso CS50 e CS51, uno
delle classi di follow-on comuni.

72
00:03:07,622 --> 00:03:09,330
Ho notato nel guardare
attraverso gli archivi

73
00:03:09,330 --> 00:03:12,150
che uno dei miei successori e
amici, Lee, tipo di cambiata

74
00:03:12,150 --> 00:03:13,480
i diritti d'autore di se stesso.

75
00:03:13,480 --> 00:03:17,520
Ma questo era davvero qualcosa che
Dovrei proprio l'imbarazzo di.

76
00:03:17,520 --> 00:03:19,370
Ma, al momento, questo
è stato il primo sito,

77
00:03:19,370 --> 00:03:22,220
come ho detto un paio di settimane fa,
con la quale matricola potrebbe

78
00:03:22,220 --> 00:03:24,350
registrarsi per gli sport intramurale qui.

79
00:03:24,350 --> 00:03:27,950
E così si scopre
che le immagini di sfondo

80
00:03:27,950 --> 00:03:29,530
del genere non sono una buona idea.

81
00:03:29,530 --> 00:03:31,840
Ma il web era nuovo, e
eravamo tutti sperimentando.

82
00:03:31,840 --> 00:03:34,310
E questo è quello che
a quanto pare ha fatto in quel momento.

83
00:03:34,310 --> 00:03:34,810
Tutto ok.

84
00:03:34,810 --> 00:03:38,020
Quindi, senza ulteriori indugi, passiamo
ingranaggi oggi per dare a voi, davvero,

85
00:03:38,020 --> 00:03:42,250
il pezzo finale che si potrebbe trovare
particolarmente utile per i progetti finali

86
00:03:42,250 --> 00:03:44,780
ma anche che inizierà a
rendere wide web mondo intero

87
00:03:44,780 --> 00:03:46,680
sentire un po 'più comprensibile.

88
00:03:46,680 --> 00:03:49,460
In effetti, stiamo andando a presentare
un altro linguaggio di programmazione

89
00:03:49,460 --> 00:03:52,474
chiamato JavaScript che è simile
e diverso in modi diversi

90
00:03:52,474 --> 00:03:54,140
dalle lingue abbiamo esaminato finora.

91
00:03:54,140 --> 00:03:55,807
>> Così C, ricordo, è questo linguaggio compilato.

92
00:03:55,807 --> 00:03:57,473
Hai avuto modo di correre attraverso un compilatore.

93
00:03:57,473 --> 00:03:59,810
Si arriva il codice sorgente di opporsi
codice, o zero e uno.

94
00:03:59,810 --> 00:04:03,000
E quelli sono zero e uno che
la CPU, Central Processing Unit,

95
00:04:03,000 --> 00:04:04,360
realmente capire.

96
00:04:04,360 --> 00:04:06,610
PHP, al contrario, non è
un linguaggio compilato.

97
00:04:06,610 --> 00:04:08,772
E 'una cosa?

98
00:04:08,772 --> 00:04:09,980
E 'un linguaggio interpretato.

99
00:04:09,980 --> 00:04:11,750
Quindi c'è qualche programma
chiamato un interprete che

100
00:04:11,750 --> 00:04:13,708
deve leggere it-- superiore a
in basso, da sinistra a destra- sopra

101
00:04:13,708 --> 00:04:16,519
e capire quello che tutti
la sintassi fa e mezzi,

102
00:04:16,519 --> 00:04:20,200
che si tratti di un ciclo o di una condizione
o qualsiasi altro numero di programmazione

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

104
00:04:20,740 --> 00:04:22,210
Quindi questo è un linguaggio interpretato.

105
00:04:22,210 --> 00:04:23,910
>> Poi abbiamo introdotto HTML.

106
00:04:23,910 --> 00:04:26,440
E HTML non è nemmeno un
linguaggio di programmazione.

107
00:04:26,440 --> 00:04:28,110
Ci piacerebbe chiamiamo cosa?

108
00:04:28,110 --> 00:04:31,650
Un linguaggio di markup, che è solo
una sorta di modo elegante per dire che

109
00:04:31,650 --> 00:04:35,820
non ha costrutti di programmazione come
abbiamo visto anche nel giorno di Scratch.

110
00:04:35,820 --> 00:04:36,720
Non esistono cicli.

111
00:04:36,720 --> 00:04:37,920
Non ci sono le condizioni.

112
00:04:37,920 --> 00:04:40,820
E 'davvero una lingua
sulla selezione dei vostri dati

113
00:04:40,820 --> 00:04:43,620
e la formattazione o
strutturazione in qualche modo.

114
00:04:43,620 --> 00:04:46,147
>> CSS, nel frattempo, allo stesso modo
non un linguaggio di programmazione.

115
00:04:46,147 --> 00:04:47,730
E 'ancora più esteticamente orientato.

116
00:04:47,730 --> 00:04:50,470
E permette di ordinare di mettere a punto
cose come la dimensione dei caratteri e colori

117
00:04:50,470 --> 00:04:51,850
e posizionamento e tutto questo.

118
00:04:51,850 --> 00:04:52,370
Poi abbiamo avuto

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

120
00:04:53,160 --> 00:04:56,010
Quindi SQL è davvero una programmazione
lingua in un certo senso,

121
00:04:56,010 --> 00:04:59,330
anche se su misura
specificamente per i database.

122
00:04:59,330 --> 00:05:03,347
Ma anche se abbiamo solo vi presentiamo
selezionare e inserire ed eliminare e aggiornare

123
00:05:03,347 --> 00:05:05,430
e un paio di altri,
scopre si può effettivamente

124
00:05:05,430 --> 00:05:07,380
scrivere funzioni o
procedure, in quanto sono

125
00:05:07,380 --> 00:05:11,270
chiamato, in SQL che sembrano e agiscono
abbastanza come funzioni PHP e C.

126
00:05:11,270 --> 00:05:12,390
Così sappiamo che quelle esistono.

127
00:05:12,390 --> 00:05:15,348
Ma noi non si preoccupano neppure con loro
come abbiamo appena graffiare la superficie qui.

128
00:05:15,348 --> 00:05:18,600
E poi Javascript, l'ultimo di
le nostre lingue formalmente introdotto.

129
00:05:18,600 --> 00:05:21,029
Così JavaScript, troppo, è
un linguaggio interpretato.

130
00:05:21,029 --> 00:05:23,070
E chi ha familiarità, do
vuoi distinguerlo

131
00:05:23,070 --> 00:05:26,960
con qualche caratteristica
sia da C e PHP?

132
00:05:26,960 --> 00:05:28,300
Che cosa lo rende diverso?

133
00:05:28,300 --> 00:05:29,650
>> PUBBLICO: Non è stato compilato.

134
00:05:29,650 --> 00:05:29,930
>> DAVID MALAN: Dire di nuovo?

135
00:05:29,930 --> 00:05:31,200
>> PUBBLICO: Non è stato compilato.

136
00:05:31,200 --> 00:05:31,930
>> DAVID MALAN: Non è stato compilato.

137
00:05:31,930 --> 00:05:33,450
Così, anche, viene interpretato.

138
00:05:33,450 --> 00:05:34,760
Quindi non è compilato.

139
00:05:34,760 --> 00:05:37,210
Ma che lo rende un po 'come PHP.

140
00:05:37,210 --> 00:05:39,545
Ma è ancora diverso da
PHP in qualche modo sorprendente,

141
00:05:39,545 --> 00:05:40,920
almeno nel modo in cui lo useremo.

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

143
00:05:41,205 --> 00:05:41,940
>> PUBBLICO: Si corre sul lato client.

144
00:05:41,940 --> 00:05:44,000
>> DAVID MALAN: Funziona
sul lato client, di solito.

145
00:05:44,000 --> 00:05:47,190
Questo è infatti il ​​distintivo
caratteristico per noi in questo momento.

146
00:05:47,190 --> 00:05:51,170
C era sul lato server nel senso
che abbiamo fatto tutto in CS50 IDE.

147
00:05:51,170 --> 00:05:53,630
PHP finora è stato
sul lato server, nella misura

148
00:05:53,630 --> 00:05:56,550
come, anche, ottiene interpreted--
non compilato, ma interpreted--

149
00:05:56,550 --> 00:06:00,690
all'interno CS50 IDE, che naturalmente è
solo uno o più server in the cloud.

150
00:06:00,690 --> 00:06:03,070
>> Ma JavaScript, anche
se si si sta andando

151
00:06:03,070 --> 00:06:07,000
per iniziare a scrivere per, diciamo, pset
otto e forse finale progetti-- sei

152
00:06:07,000 --> 00:06:09,620
andando a destra in
CS50 IDE e salvarlo

153
00:06:09,620 --> 00:06:14,760
in file all'interno CS50 IDE, CS50 IDE
e, a loro volta, i server cloud

154
00:06:14,760 --> 00:06:19,160
su cui è ospitato, non stanno andando
di interpretare o eseguire il codice.

155
00:06:19,160 --> 00:06:23,880
Piuttosto, sta per essere inviato
forma inalterata fino al browser.

156
00:06:23,880 --> 00:06:26,990
Ed è allora sarà IE
o Chrome o Firefox o Safari

157
00:06:26,990 --> 00:06:30,697
o qualsiasi altra cosa che in realtà interpreta
esso, dall'alto in basso, da sinistra a destra.

158
00:06:30,697 --> 00:06:32,780
Quindi la chiave distintiva
caratteristico per oggi

159
00:06:32,780 --> 00:06:36,110
è che JavaScript è sul lato client
e PHP, per esempio,

160
00:06:36,110 --> 00:06:37,690
è stato sul lato server.

161
00:06:37,690 --> 00:06:40,920
Ora, questo ha implicazioni interessanti
per, come, la proprietà intellettuale

162
00:06:40,920 --> 00:06:42,660
e chi può effettivamente vedere il vostro codice.

163
00:06:42,660 --> 00:06:44,860
E in effetti, si può andare
sul web e vedere più

164
00:06:44,860 --> 00:06:47,530
qualsiasi codice che qualcuno ha
scritto in JavaScript.

165
00:06:47,530 --> 00:06:50,230
A volte è leggibile,
a volte è offuscato.

166
00:06:50,230 --> 00:06:52,550
Ma più su quello a tempo debito.

167
00:06:52,550 --> 00:06:57,530
>> Così JavaScript, abbastanza bene, è
super-simile, sintatticamente, a C.

168
00:06:57,530 --> 00:06:59,364
E molto come PHP,
non c'è nessuna funzione principale.

169
00:06:59,364 --> 00:07:02,113
Se si vuole iniziare a scrivere
Codice JavaScript, come si vedrà oggi,

170
00:07:02,113 --> 00:07:03,270
basta iniziare a scrivere esso.

171
00:07:03,270 --> 00:07:06,910
Ma è, si vedrà, in particolare
utile nel contesto dei browser web.

172
00:07:06,910 --> 00:07:09,820
Tuttavia, la mia piccola
disclaimer-- solito earlier--

173
00:07:09,820 --> 00:07:13,790
è stato quello di dire che si può sempre
uso oggi server-side JavaScript

174
00:07:13,790 --> 00:07:17,655
secondo un quadro di fantasia chiamato Node.js
che alcune delle proprie applicazioni di CS50

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

176
00:07:18,280 --> 00:07:20,640
Controllare 50 utilizza effettivamente Node.js.

177
00:07:20,640 --> 00:07:24,140
Ma stiamo andando a concentrarsi su
JavaScript lato client qui in avanti.

178
00:07:24,140 --> 00:07:26,750
>> Così qui è una serie di condizioni in PHP.

179
00:07:26,750 --> 00:07:29,350
Siamo spiacenti, dentro-- in realtà, che
affermazione, è anche corretto.

180
00:07:29,350 --> 00:07:32,200
Qui si trova anche una serie di
condizioni in JavaScript.

181
00:07:32,200 --> 00:07:35,560
Sintatticamente, è
identico a C e PHP.

182
00:07:35,560 --> 00:07:39,040
Espressioni del signor Boole sono,
allo stesso modo, sintatticamente

183
00:07:39,040 --> 00:07:41,190
identico a entrambi C e PHP.

184
00:07:41,190 --> 00:07:44,100
Abbiamo anche gli interruttori a
JavaScript che sembrano identici.

185
00:07:44,100 --> 00:07:46,350
Abbiamo per cicli che sono
strutturato in modo identico,

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

187
00:07:48,140 --> 00:07:49,980
>> Questo è un po 'diverso.

188
00:07:49,980 --> 00:07:53,120
PHP ha avuto la per ogni costrutto
che si può essere utilizzando

189
00:07:53,120 --> 00:07:55,320
o utilizzerà in pset sette, forse.

190
00:07:55,320 --> 00:07:59,460
JavaScript ha questa versione speciale di
per cui è letteralmente dire qualcosa

191
00:07:59,460 --> 00:08:03,864
come per la chiave variabile oggetto, che
è un modo molto succinto di dire,

192
00:08:03,864 --> 00:08:06,780
se ho un object-- e faremo
parlare di questi di nuovo in un moment--

193
00:08:06,780 --> 00:08:10,370
e io voglio iterare su tutto
delle coppie di valori chiave all'interno,

194
00:08:10,370 --> 00:08:13,620
Io non devo capire come
numericamente loro indice con zero, uno,

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

196
00:08:14,580 --> 00:08:15,900
>> Posso dire letteralmente questo.

197
00:08:15,900 --> 00:08:20,740
E ad ogni iterazione, JavaScript
per me sarà aggiornare la chiave variabile

198
00:08:20,740 --> 00:08:24,810
essere il primo tasto, quindi il tasto successivo,
poi il tasto successivo, quindi il tasto successivo,

199
00:08:24,810 --> 00:08:25,510
e così via.

200
00:08:25,510 --> 00:08:30,000
E posso ottenere al suo valore trattando
un oggetto in JavaScript, come vedremo,

201
00:08:30,000 --> 00:08:32,584
come se fosse un
array associativi in ​​PHP.

202
00:08:32,584 --> 00:08:35,750
In effetti, se finalmente avvolto il tuo
mente intorno a quello che è un array associativo

203
00:08:35,750 --> 00:08:40,140
in PHP, si può pensare di esso per ora come
identico a un oggetto in JavaScript.

204
00:08:40,140 --> 00:08:42,030
Ma questo è un po 'di
una semplificazione eccessiva.

205
00:08:42,030 --> 00:08:47,230
>> Array sguardo, abbastanza bene, identici
a PHP ad eccezione di un carattere.

206
00:08:47,230 --> 00:08:51,425
C'è una cosa che manca qui
che ci ha fatto vedere la scorsa settimana con PHP.

207
00:08:51,425 --> 00:08:52,050
Che cosa è omesso?

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

209
00:08:53,310 --> 00:08:54,090
Nessun segno di dollaro.

210
00:08:54,090 --> 00:08:56,240
Quindi siamo di nuovo ad un
altro mondo normale in cui

211
00:08:56,240 --> 00:08:58,050
le variabili non hanno segni di dollaro.

212
00:08:58,050 --> 00:09:00,810
Ma che fai li prefisso
con var, in genere.

213
00:09:00,810 --> 00:09:02,230
E var significa variabile.

214
00:09:02,230 --> 00:09:06,440
E molto come PHP è liberamente
typed-- per cui ci sono tipi,

215
00:09:06,440 --> 00:09:10,120
ci sono numeri e stringhe
e galleggianti e così forth--

216
00:09:10,120 --> 00:09:11,570
JavaScript ha similmente tipi.

217
00:09:11,570 --> 00:09:15,470
Ma è liberamente digitato che la
i programmatori non hanno specificarli.

218
00:09:15,470 --> 00:09:18,980
Dobbiamo solo essere consapevoli
che esistono diversi tipi.

219
00:09:18,980 --> 00:09:21,690
>> Variabili, meanwhile-- ecco come
potremmo dichiarare "ciao, mondo"

220
00:09:21,690 --> 00:09:22,230
come una stringa.

221
00:09:22,230 --> 00:09:24,890
Notate che sia identico a
PHP, ma nessun segno di dollaro.

222
00:09:24,890 --> 00:09:27,120
E questo è qualcosa che sarà
cominciare a vedere più oggi,

223
00:09:27,120 --> 00:09:30,990
per cui si dispone di un oggetto
con chiavi e valori.

224
00:09:30,990 --> 00:09:32,990
E se volete provare
dedurre da ultimo week--

225
00:09:32,990 --> 00:09:34,730
la sintassi è un po 'diverso.

226
00:09:34,730 --> 00:09:39,740
Ma un po 'buon senso check-- quanti
chiavi fa questo oggetto sembra avere?

227
00:09:39,740 --> 00:09:40,850
Così vedo quattro.

228
00:09:40,850 --> 00:09:43,560
Vedo due.

229
00:09:43,560 --> 00:09:44,680
>> Quindi è in realtà due.

230
00:09:44,680 --> 00:09:47,260
Quindi questa è una raccolta
di due coppie chiave-valore.

231
00:09:47,260 --> 00:09:49,820
La chiave è simbolo il cui valore è FB.

232
00:09:49,820 --> 00:09:52,620
La chiave è il prezzo il cui valore è 101.53.

233
00:09:52,620 --> 00:09:54,230
Quindi questi sono due coppie chiave-valore.

234
00:09:54,230 --> 00:09:58,120
E ricordate, PHP-- e questo è di nuovo
appena sorta di differenza sintattica.

235
00:09:58,120 --> 00:10:00,170
Non è tutto ciò che
intellettualmente interessante.

236
00:10:00,170 --> 00:10:04,610
PHP potrebbe aver scritto questo stesso
cosa come citazione follows--, uguale.

237
00:10:04,610 --> 00:10:06,730
E a cambiare questi per le parentesi quadre.

238
00:10:06,730 --> 00:10:11,240
E poi ho cambiato questo a
una parola citato, "prezzo".

239
00:10:11,240 --> 00:10:12,500
E poi io non uso i due punti.

240
00:10:12,500 --> 00:10:15,060
Quello che ho usato la scorsa settimana?

241
00:10:15,060 --> 00:10:18,290
Sì, il segno di uguale
freccia notazione funky.

242
00:10:18,290 --> 00:10:21,470
>> E poi ho fatto la stessa cosa qui.

243
00:10:21,470 --> 00:10:23,580
Stessa cosa qui.

244
00:10:23,580 --> 00:10:24,240
E questo è tutto.

245
00:10:24,240 --> 00:10:27,752
Quindi è bene se questo non ha
davvero affondato in memoria solo

246
00:10:27,752 --> 00:10:29,960
ma perché è davvero
intellettualmente interessante.

247
00:10:29,960 --> 00:10:31,660
E 'solo le differenze sintattiche.

248
00:10:31,660 --> 00:10:33,230
Ma le idee sono esattamente gli stessi.

249
00:10:33,230 --> 00:10:35,910
All'interno di questa variabile
citazione in JavaScript

250
00:10:35,910 --> 00:10:39,020
è un insieme di coppie chiave-valore,
uno dei quali è il simbolo, una delle quali

251
00:10:39,020 --> 00:10:39,690
è il prezzo.

252
00:10:39,690 --> 00:10:42,340
E posso arrivare a quei valori
con la seguente sintassi.

253
00:10:42,340 --> 00:10:46,280
Proprio come in PHP, ho potuto
fare qualcosa like-- lasciare

254
00:10:46,280 --> 00:10:48,590
me fare questo box un po 'più grande.

255
00:10:48,590 --> 00:10:52,750
Proprio come in PHP, ho potuto
fare questo-- oh, dannazione.

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

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

258
00:10:56,350 --> 00:11:00,800
>> Proprio come in PHP-- Ok, faremo
basta usare le note del presentatore.

259
00:11:00,800 --> 00:11:06,010
Proprio come in PHP, posso
fare $ citazione ["simbolo"] citazione $,

260
00:11:06,010 --> 00:11:08,860
e questo otterrà me
il valore di "simbolo".

261
00:11:08,860 --> 00:11:12,800
In JavaScript, che sta per essere
identiche, per cui posso solo fare questo.

262
00:11:12,800 --> 00:11:14,850
L'unica cosa che è
manca è il simbolo del dollaro.

263
00:11:14,850 --> 00:11:17,470
>> Così abbastanza bene, poi, c'è
Non più di tanto nuova sintassi.

264
00:11:17,470 --> 00:11:21,025
Quindi quello che oggi ci concentriamo su, in realtà, è
alcune delle idee e delle applicazioni.

265
00:11:21,025 --> 00:11:22,900
E il primo tale
applicazione che si potrebbe

266
00:11:22,900 --> 00:11:26,090
hanno visto se si tuffò in pset
sette è già questa sintassi.

267
00:11:26,090 --> 00:11:28,980
Quindi, in pset sette, se hai
visto o non ancora visto,

268
00:11:28,980 --> 00:11:33,570
sanno che c'è un file che diamo
hai chiamato config.json-- Javascript

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

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

271
00:11:35,160 --> 00:11:39,540
Abbiamo voluto essere in grado di fornire con
un modello con alcune coppie chiave-valore.

272
00:11:39,540 --> 00:11:44,290
Volevamo essere in grado di darvi una lista
dell'ospite, il nome del server.

273
00:11:44,290 --> 00:11:46,710
Abbiamo voluto dare un
segnaposto per il nome utente

274
00:11:46,710 --> 00:11:48,210
e un segnaposto per la password.

275
00:11:48,210 --> 00:11:49,410
Se non riesci a vedere
questo ancora, di non preoccuparsi.

276
00:11:49,410 --> 00:11:51,340
Maggiori informazioni su questo in pset sette
[? spec. ?] E poi,

277
00:11:51,340 --> 00:11:53,173
ovviamente, vogliamo che tu
per riempire le cose da fare

278
00:11:53,173 --> 00:11:55,310
perché quando si accede
CS50 IDE, ognuno di voi

279
00:11:55,310 --> 00:11:57,630
avere il proprio username e password.

280
00:11:57,630 --> 00:12:00,910
>> Così abbiamo potuto abbiamo utilizzato una mezza dozzina
o formati più diversi di file.

281
00:12:00,910 --> 00:12:02,940
Avremmo potuto usare un file .txt.

282
00:12:02,940 --> 00:12:04,570
Potremmo utilizzare un file CSV.

283
00:12:04,570 --> 00:12:06,745
Avremmo potuto utilizzare un
Il file INI, un file XML,

284
00:12:06,745 --> 00:12:09,370
un sacco di più sigle che
si potrebbe non avere mai sentito parlare.

285
00:12:09,370 --> 00:12:11,244
E 'una specie di arbitrario
alla fine del giorno.

286
00:12:11,244 --> 00:12:16,030
Ma super popolare in questi giorni è un testo
formato chiamato JSON-- JavaScript Object

287
00:12:16,030 --> 00:12:18,460
Notation-- che assomiglia a questo.

288
00:12:18,460 --> 00:12:20,890
E 'un po' criptico,
a meno di notare i modelli.

289
00:12:20,890 --> 00:12:24,180
Si inizia con un riccio aperto
brace, e si finisce con lo stesso.

290
00:12:24,180 --> 00:12:26,550
All'interno di questo è qualcosa.

291
00:12:26,550 --> 00:12:27,920
Si tratta di una coppia chiave-valore.

292
00:12:27,920 --> 00:12:30,580
Quindi questo è un oggetto che io sono
guardando sullo schermo qui

293
00:12:30,580 --> 00:12:33,690
che ha una chiave, che ha un valore.

294
00:12:33,690 --> 00:12:37,610
E proprio dedurre basato sulla
modello precedente, qual è la chiave qui?

295
00:12:37,610 --> 00:12:39,790
Database, la cosa da
sinistra del colon.

296
00:12:39,790 --> 00:12:43,500
>> Ora, il valore sembra essere
un più righe questa volta.

297
00:12:43,500 --> 00:12:46,760
Ma il valore inizia con un riccio
brace e termina con una parentesi graffa.

298
00:12:46,760 --> 00:12:49,480
Allora, cosa proporrebbe è la
tipo del valore di database?

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

300
00:12:52,160 --> 00:12:54,670
Un dizionario o, solo più
succintamente, un oggetto.

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

302
00:12:55,170 --> 00:13:00,010
Ciò è genere di una struttura di dati che
è possibile utilizzare altre strutture in sé.

303
00:13:00,010 --> 00:13:02,750
Quindi, se tutta questa faccenda siamo
chiamando un object-- e un oggetto

304
00:13:02,750 --> 00:13:07,101
è solo un mucchio di valore-chiave pairs-- il
valore del database stesso è un oggetto.

305
00:13:07,101 --> 00:13:10,350
Il valore di database ha un sacco
di coppie di valori chiave, il primo dei quali

306
00:13:10,350 --> 00:13:13,130
è ospite, poi il nome, poi
nome utente, la password poi,

307
00:13:13,130 --> 00:13:17,550
ciascuno dei cui valori, nel frattempo, si è
solo una stringa noioso tra doppi apici.

308
00:13:17,550 --> 00:13:19,770
>> Quindi, anche se questo non è
Super Clear appena ancora,

309
00:13:19,770 --> 00:13:22,740
sappiate che questo è solo un
di serie, abbastanza noioso modo

310
00:13:22,740 --> 00:13:25,190
di memorizzare i dati in un formato standard.

311
00:13:25,190 --> 00:13:27,700
Ma gli errori più comuni voi
potrebbe fare, anche in pset sette,

312
00:13:27,700 --> 00:13:32,120
Sono piccole cose stupide, come se si
omettere accidentalmente la virgola lì.

313
00:13:32,120 --> 00:13:34,900
Che sta per tradursi in file
non necessariamente essere leggibile.

314
00:13:34,900 --> 00:13:38,191
Se accidentalmente si omette cose come il
le citazioni, non sta andando essere leggibile.

315
00:13:38,191 --> 00:13:41,654
Quindi è un formato di file piuttosto nitpicky,
ma è uno che è super comune.

316
00:13:41,654 --> 00:13:44,820
E ci capita di usarlo, anche se
non si utilizza alcun JavaScript altrimenti,

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

318
00:13:46,330 --> 00:13:46,860
>> Tutto ok.

319
00:13:46,860 --> 00:13:48,110
Quindi ricorda questa immagine.

320
00:13:48,110 --> 00:13:51,657
Abbiamo parlato, in HTML, che
il codice potrebbe apparire così.

321
00:13:51,657 --> 00:13:54,740
Questo è il HyperText Markup Language
[Incomprensibile] solo "ciao, mondo".

322
00:13:54,740 --> 00:13:57,570
Ma poi abbiamo proposto un
tempo fa che se aiuta,

323
00:13:57,570 --> 00:14:00,210
si potrebbe desiderare di iniziare a pensare
su questo già come un albero.

324
00:14:00,210 --> 00:14:03,730
Infatti, il rientro che
utilizzare solo per amor di leggibilità

325
00:14:03,730 --> 00:14:05,610
o per l'amor di stile su
la sinistra può tipo di

326
00:14:05,610 --> 00:14:10,040
essere tradotto in questo albero, dove si
avere qualche nodo principale speciale che faremo

327
00:14:10,040 --> 00:14:16,860
genericamente chiamato documento, sotto la quale
è l'elemento HTML principale o tag, HTML,

328
00:14:16,860 --> 00:14:19,980
che poi ha due
bambini, testa e corpo.

329
00:14:19,980 --> 00:14:21,750
>> E poi, a sua volta, la testa ha un titolo.

330
00:14:21,750 --> 00:14:23,440
E il titolo ha un valore di testo.

331
00:14:23,440 --> 00:14:26,130
E allo stesso modo corpo ha un valore di testo.

332
00:14:26,130 --> 00:14:29,220
Quindi, se sei a tuo agio detto
che sì, si potrebbe prendere questo HTML

333
00:14:29,220 --> 00:14:32,080
e disegnare un quadro del genere
questo, il lato destro

334
00:14:32,080 --> 00:14:35,910
è un bel modello mentale perché ora
che abbiamo JavaScript, una programmazione

335
00:14:35,910 --> 00:14:39,960
lingua che i browser possono
eseguire e interpretare per te,

336
00:14:39,960 --> 00:14:42,690
si scopre che ciò
stiamo per fare in codice

337
00:14:42,690 --> 00:14:45,320
è iniziare a manipolare questo
struttura ad albero in memoria.

338
00:14:45,320 --> 00:14:47,070
Non abbiamo per costruire
l'albero in memoria.

339
00:14:47,070 --> 00:14:49,880
Noi non dobbiamo fare una sorta di
struttura di dati pset-cinque-style

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

341
00:14:50,650 --> 00:14:54,610
Il browser, abbastanza bene, su
interpretando HTML cima a fondo,

342
00:14:54,610 --> 00:14:58,600
a sinistra oa destra, sta letteralmente andando a
noi mano l'equivalente di un puntatore

343
00:14:58,600 --> 00:15:00,840
a che tutto l'albero per libero.

344
00:15:00,840 --> 00:15:02,150
Si fa tutto il lavoro duro.

345
00:15:02,150 --> 00:15:05,520
Questo è quello che Mozilla e Apple
e altri hanno fatto per noi.

346
00:15:05,520 --> 00:15:09,400
>> E con JavaScript stiamo andando
essere in grado di controllare e modificare e fare

347
00:15:09,400 --> 00:15:12,910
cose interessanti da
quell'albero, altrimenti noto

348
00:15:12,910 --> 00:15:15,880
come un DOM o Document Object Model.

349
00:15:15,880 --> 00:15:17,110
Che genere di cose?

350
00:15:17,110 --> 00:15:19,030
Beh, si scopre che
in JavaScript, non c'è

351
00:15:19,030 --> 00:15:22,800
questa lunga lista di
eventi che possono aver luogo.

352
00:15:22,800 --> 00:15:26,330
E non abbiamo davvero usato che
parola da quando settimana zero e pset

353
00:15:26,330 --> 00:15:28,240
zero quando abbiamo parlato Scratch.

354
00:15:28,240 --> 00:15:31,390
La maggior parte di voi probabilmente non hanno utilizzato
un evento nel progetto Scratch.

355
00:15:31,390 --> 00:15:33,850
Ma si potrebbe ricordare
il semplice Marco Polo

356
00:15:33,850 --> 00:15:36,760
ad esempio, dove abbiamo avuto due
sprite, uno dei quali ha detto, Marco.

357
00:15:36,760 --> 00:15:40,180
L'altro di cui poi, al momento di ascolto
e sentendo che evento, ha detto, Polo.

358
00:15:40,180 --> 00:15:42,080
In caso contrario, non esitate a
guardare indietro così indietro.

359
00:15:42,080 --> 00:15:44,450
>> Ma questo è solo per
dire, e si può tipo di

360
00:15:44,450 --> 00:15:47,730
dedurre dai nomi di questi
cose, JavaScript, si scopre,

361
00:15:47,730 --> 00:15:53,200
sta per darci un modo per ascoltare
per il mouse va giù o il mouse salendo

362
00:15:53,200 --> 00:15:57,920
o il tasto scendendo o il tasto
salendo o onselect onsubmit

363
00:15:57,920 --> 00:15:59,740
o onresizing qualcosa.

364
00:15:59,740 --> 00:16:03,060
In altre parole, qualsiasi azione fisica
che un essere umano può prendere con un browser

365
00:16:03,060 --> 00:16:08,210
che si fa ogni giorno, è possibile scrivere
codice che ascolta per quegli eventi

366
00:16:08,210 --> 00:16:10,220
e poi fa qualcosa di appropriato.

367
00:16:10,220 --> 00:16:14,130
>> Ad esempio, se si utilizza Google Maps,
cosa succede se si fa clic e muoversi

368
00:16:14,130 --> 00:16:16,250
il mouse, tipicamente?

369
00:16:16,250 --> 00:16:17,758
Se si fa clic e si trascina?

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

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

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

373
00:16:22,200 --> 00:16:23,159
La mappa inizia a muoversi.

374
00:16:23,159 --> 00:16:25,616
Così si può sorta di vedere cosa c'è
qui, cosa c'è laggiù.

375
00:16:25,616 --> 00:16:27,130
E come fa Google implementa questo?

376
00:16:27,130 --> 00:16:29,421
Beh, presumibilmente, sono
utilizzando un paio di questi eventi

377
00:16:29,421 --> 00:16:31,720
ascoltatori, uno che
dice, ascoltare sul mouse

378
00:16:31,720 --> 00:16:35,410
down-- così quando l'utente fisicamente
spinge la sua trackpad o il suo topo

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

380
00:16:36,010 --> 00:16:38,350
E poi stiamo cercando
qualcosa come movimento

381
00:16:38,350 --> 00:16:41,145
o qualche altro evento che
ci permette di catturare la resistenza.

382
00:16:41,145 --> 00:16:45,910
E in effetti, la resistenza è altrettanto in questo
dot dot dot lista delle possibili opzioni.

383
00:16:45,910 --> 00:16:49,140
>> Quindi questo sarà un potente
modo per iniziare rispondere all'utente

384
00:16:49,140 --> 00:16:52,824
ancor prima che lui o lei in realtà clic
qualcosa di esplicito come presentare.

385
00:16:52,824 --> 00:16:55,240
Ma stiamo andando a presentare
un paio di argomenti per arrivarci.

386
00:16:55,240 --> 00:16:58,570
Transizione Ma prima, andiamo
a qualche codice vero e proprio.

387
00:16:58,570 --> 00:17:01,450
Quindi ho intenzione di andare
avanti e di aprire dom-0,

388
00:17:01,450 --> 00:17:05,869
che è un esempio molto semplice
qui che se io lo zoom in semplicemente

389
00:17:05,869 --> 00:17:08,500
ha questo ingresso qui per me.

390
00:17:08,500 --> 00:17:12,410
E ho intenzione di andare avanti e digitare
"David" per il mio nome e fare clic su Invia.

391
00:17:12,410 --> 00:17:17,940
>> E poi, anche se una sorta di buon mercato, io
avere questo prompt che si apre che dice:

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

393
00:17:19,244 --> 00:17:21,740
Quindi questo è una specie di
come il nostro "ciao, mondo"

394
00:17:21,740 --> 00:17:25,150
che abbiamo fatto un po 'indietro in C e
anche in PHP perché ho dinamicamente

395
00:17:25,150 --> 00:17:26,310
in uscita il mio nome.

396
00:17:26,310 --> 00:17:28,230
Posso fare il nome di qualcun altro qui.

397
00:17:28,230 --> 00:17:31,240
Potrei semplicemente cambiare questo,
come, Hannah, fare clic su Invia.

398
00:17:31,240 --> 00:17:33,780
E infatti, i piccoli cambiamenti pop-up.

399
00:17:33,780 --> 00:17:36,650
>> Ora, pop-up sono uno dei
maggior parte delle caratteristiche abusato del web.

400
00:17:36,650 --> 00:17:38,520
Ed infatti, nel
i giorni pop-up bloccanti

401
00:17:38,520 --> 00:17:40,820
entrato in voga perché
sarebbe andato in qualche website--

402
00:17:40,820 --> 00:17:43,604
forse un posto-- discutibile
che avrebbe poi improvvisamente

403
00:17:43,604 --> 00:17:46,020
iniziare infarcendo il vostro schermo
con un sacco di finestre pop-up.

404
00:17:46,020 --> 00:17:49,700
E così questa capacità di pop up
finestre di fronte all'utente

405
00:17:49,700 --> 00:17:52,372
Non è stato particolarmente
ben accolto da parte dell'umanità.

406
00:17:52,372 --> 00:17:54,080
Ecco, questo è il motivo per cui si vede
questo impedisce cosa,

407
00:17:54,080 --> 00:17:55,706
che fa solo questa cosa brutta.

408
00:17:55,706 --> 00:17:57,996
Quindi stiamo andando ad avere bisogno di un
modo migliore per richiedere all'utente.

409
00:17:57,996 --> 00:17:59,350
Ma per ora, che sembra funzionare.

410
00:17:59,350 --> 00:18:03,320
Quindi, solo intuitivamente, cosa
sembra accadere qui?

411
00:18:03,320 --> 00:18:07,870
Io vado avanti e fare clic su Submit, e
allora qualcosa sta succedendo, in modo chiaro.

412
00:18:07,870 --> 00:18:12,870
Ma ciò che non sta accadendo che è accaduto
la settimana scorsa in qualsiasi momento ho cliccato Submit?

413
00:18:12,870 --> 00:18:15,940
Quello che non è successo sullo schermo?

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

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

416
00:18:18,010 --> 00:18:19,720
L'URL non è cambiata affatto.

417
00:18:19,720 --> 00:18:22,250
Ho detto che questo era dom-0,
e sono ancora a dom-0.

418
00:18:22,250 --> 00:18:26,890
Normalmente, ci piacerebbe avere cambiato in qualche altro
URL, come register.php o simili.

419
00:18:26,890 --> 00:18:29,560
>> Ma anche quando mi licenzio
questa cosa facendo clic su OK,

420
00:18:29,560 --> 00:18:32,310
notare che l'URL
rimane completamente messo.

421
00:18:32,310 --> 00:18:35,350
E, infatti, se sono un po '
scettico, mi permetta di aprire su Chrome.

422
00:18:35,350 --> 00:18:36,860
Permettetemi di aprire la scheda Rete.

423
00:18:36,860 --> 00:18:38,360
E notare è vuoto al momento.

424
00:18:38,360 --> 00:18:40,700
Lasciami andare avanti e reinviare Maria.

425
00:18:40,700 --> 00:18:42,810
Non c'è il traffico di rete di sorta.

426
00:18:42,810 --> 00:18:44,320
Così non ci è HTTP.

427
00:18:44,320 --> 00:18:47,620
>> Quindi in effetti, se guardo il codice sorgente
per questo-- lasciatemi chiudere questa finestra

428
00:18:47,620 --> 00:18:49,480
e scegliere Visualizza Sorgente.

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

430
00:18:50,400 --> 00:18:53,520
Sembra che ci sia un po '
nuove etichette, tra cui script.

431
00:18:53,520 --> 00:18:57,490
Quindi, diamo uno sguardo all'interno CS50
IDE esattamente quello che inviato all'utente.

432
00:18:57,490 --> 00:19:00,690
>> Così qui è-- cerchiamo di
concentrarsi solo sul codice HTML.

433
00:19:00,690 --> 00:19:03,500
Ecco la metà inferiore di dom-0.html.

434
00:19:03,500 --> 00:19:07,830
E notare che esso ha un titolo,
un tag head, un tag body, un tag form.

435
00:19:07,830 --> 00:19:11,257
Ma quello che salta fuori a voi
diverso, soprattutto se non hai mai

436
00:19:11,257 --> 00:19:12,590
scritto qualsiasi JavaScript te stesso.

437
00:19:12,590 --> 00:19:14,920
Mi permetta di scorrere un po '
a destra qui.

438
00:19:14,920 --> 00:19:18,330
Ho un ingresso,
un altro ingresso per presentare.

439
00:19:18,330 --> 00:19:21,410
Ho un ID, che è una specie di nuovo.

440
00:19:21,410 --> 00:19:22,790
Ma abbiamo visto questo con i CSS.

441
00:19:22,790 --> 00:19:24,480
Che altro è sicuramente di nuovo?

442
00:19:24,480 --> 00:19:24,980
Sì?

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

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

445
00:19:32,140 --> 00:19:32,760
>> Tutto ok.

446
00:19:32,760 --> 00:19:35,630
Allora, dove si dice onsubmit,
notare ciò che sembra seguire.

447
00:19:35,630 --> 00:19:38,740
Questo è un attributo
di nomenclatura HTML.

448
00:19:38,740 --> 00:19:40,944
Il suo valore è questa stringa tra virgolette qui.

449
00:19:40,944 --> 00:19:42,860
E questo sembra un po '
strano a prima vista.

450
00:19:42,860 --> 00:19:44,050
Non è HTML.

451
00:19:44,050 --> 00:19:45,240
Non è CSS.

452
00:19:45,240 --> 00:19:47,580
Si tratta, come si può immaginare, JavaScript.

453
00:19:47,580 --> 00:19:51,850
Così sembra che ha costruito in questo
pagina web è una funzione chiamata saluto.

454
00:19:51,850 --> 00:19:54,250
E sto dedurre che solo
perché è una parola, saluto.

455
00:19:54,250 --> 00:19:55,880
E 'ottenuto una parentesi tonda aperta,
chiudere paren, punto e virgola.

456
00:19:55,880 --> 00:19:58,095
Sembra una funzione C,
si presenta come una funzione PHP.

457
00:19:58,095 --> 00:20:00,370
>> E in effetti, sta andando a
essere una funzione JavaScript.

458
00:20:00,370 --> 00:20:01,440
Poi sto tornando falso.

459
00:20:01,440 --> 00:20:03,440
Torneremo a
che in un momento.

460
00:20:03,440 --> 00:20:05,320
Ma da dove viene questa funzione definita?

461
00:20:05,320 --> 00:20:07,950
Ebbene vorrei scorrere verso l'alto
all'inizio del file.

462
00:20:07,950 --> 00:20:11,710
E anche se si tratta di una lunga serie,
è relativamente semplice.

463
00:20:11,710 --> 00:20:15,000
Permettetemi di Zoom Out qui e
concentrarsi su queste quattro linee.

464
00:20:15,000 --> 00:20:17,137
>> Così in JavaScript, appena
come PHP, basta

465
00:20:17,137 --> 00:20:19,720
per esempio, letteralmente, la parola "funzione",
il nome della funzione,

466
00:20:19,720 --> 00:20:22,700
e poi parentesi con qualsiasi
arguments-- argomenti in questo caso.

467
00:20:22,700 --> 00:20:25,290
E non c'è nessun tipo di ritorno
in JavaScript, proprio come il PHP.

468
00:20:25,290 --> 00:20:29,470
Quindi è un po 'più ampia di C.
Aperto parentesi graffa, vicino parentesi graffa.

469
00:20:29,470 --> 00:20:33,270
Costruito in JavaScript è un function--
Non un function-- consigliato

470
00:20:33,270 --> 00:20:35,730
ma una funzione chiamata di allarme
il cui unico scopo nella vita

471
00:20:35,730 --> 00:20:38,620
è quello di tirare su quel piuttosto brutto
Prompt che abbiamo visto poco fa.

472
00:20:38,620 --> 00:20:40,950
>> Ora, questo è una specie di un boccone.

473
00:20:40,950 --> 00:20:42,560
Cosa sta succedendo qui?

474
00:20:42,560 --> 00:20:45,840
Quindi partiamo per
evidenziare tutto qui.

475
00:20:45,840 --> 00:20:48,540
Questo è lo stesso argomento per avvisare.

476
00:20:48,540 --> 00:20:49,530
E cosa sta succedendo?

477
00:20:49,530 --> 00:20:51,200
Questa sembra proprio una stringa.

478
00:20:51,200 --> 00:20:59,180
E si scopre, a differenza di PHP e differenza
C, non importa in JavaScript

479
00:20:59,180 --> 00:21:01,090
se si apici singoli o doppi apici.

480
00:21:01,090 --> 00:21:02,060
Saranno equivalente.

481
00:21:02,060 --> 00:21:03,769
E, francamente, è solo
popolare in questi giorni

482
00:21:03,769 --> 00:21:06,726
per i programmatori JavaScript per sempre
utilizzare le virgolette singole per qualche motivo.

483
00:21:06,726 --> 00:21:07,840
E 'la cosa giusta da fare.

484
00:21:07,840 --> 00:21:09,710
Ma potremmo usare le virgolette, pure.

485
00:21:09,710 --> 00:21:11,540
>> Quindi più è un nuovo personaggio.

486
00:21:11,540 --> 00:21:14,512
Ma quelli di voi che avete fatto
questo prima, cosa più significa?

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

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

489
00:21:17,120 --> 00:21:18,570
Così abbiamo visto questo in PHP.

490
00:21:18,570 --> 00:21:20,315
C'è solo il punto
operatore in PHP che

491
00:21:20,315 --> 00:21:22,000
sarà concatenare due stringhe insieme.

492
00:21:22,000 --> 00:21:24,000
C era un dolore al collo per fare questo.

493
00:21:24,000 --> 00:21:27,310
Ricordiamo dal pset sei, che era
un dolore particolare al collo,

494
00:21:27,310 --> 00:21:29,470
si dovrebbe utilizzare
qualcosa come strcat

495
00:21:29,470 --> 00:21:31,660
dopo l'allocazione della memoria
sullo stack e heap.

496
00:21:31,660 --> 00:21:34,243
Si doveva fare i salti mortali
solo per concatenare due stringhe.

497
00:21:34,243 --> 00:21:36,040
In JavaScript, è super semplice.

498
00:21:36,040 --> 00:21:38,030
Basta usare l'operatore più tra di loro.

499
00:21:38,030 --> 00:21:41,420
>> Così il complesso dall'aspetto
cosa sembra essere questo

500
00:21:41,420 --> 00:21:43,490
perché alla fine
tutta questa corda, ho solo

501
00:21:43,490 --> 00:21:45,797
concatenare su un punto esclamativo.

502
00:21:45,797 --> 00:21:48,380
Quindi, se ciò che è stato popping up è stato
"Ciao, David", "ciao, Hannah,"

503
00:21:48,380 --> 00:21:52,740
"ciao, Maria," e così via, in modo chiaro
che cosa di mezzo tra i due

504
00:21:52,740 --> 00:21:55,215
vantaggi mi deve dare accesso a che cosa?

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

506
00:21:58,855 --> 00:22:01,991
Cosa c'è dentro di sicuro?

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

508
00:22:02,490 --> 00:22:05,090
Quindi mi fingere qui il
rispondere a loro nome, giusto?

509
00:22:05,090 --> 00:22:10,380
Così il loro nome spuntato in finale
risultato. Che cosa significa questo?

510
00:22:10,380 --> 00:22:15,080
Beh, ho proposto in precedenza in quel
quadro che il cosiddetto DOM

511
00:22:15,080 --> 00:22:18,580
ha questo elemento radice speciale
salita superiore chiamato documento.

512
00:22:18,580 --> 00:22:21,660
E ora, si scopre, che sta andando
essere una speciale variabile globale

513
00:22:21,660 --> 00:22:25,250
in JavaScript, incorporato in che è un
tutta una serie di funzionalità utili.

514
00:22:25,250 --> 00:22:31,770
Tra la funzionalità utile è il
capacità di ottenere in qualsiasi nodo discendente.

515
00:22:31,770 --> 00:22:37,760
Quei quadrati o rettangoli o ellissi
sono solo nodi di un albero, per così dire.

516
00:22:37,760 --> 00:22:41,850
>> Così si scopre che ha costruito in
Oggetto di documento di JavaScript

517
00:22:41,850 --> 00:22:47,300
è una funzione, altrimenti noto come
metodo, che si chiama getElementById.

518
00:22:47,300 --> 00:22:50,410
La sintassi per la chiamata
una funzione in JavaScript

519
00:22:50,410 --> 00:22:55,220
cioè all'interno di un oggetto o di un
variabile è solo con la notazione punto.

520
00:22:55,220 --> 00:22:57,950
E abbiamo visto questo in C
ciò che la sintassi struct.

521
00:22:57,950 --> 00:23:03,530
Vedete questo nel pset sette, tipo di,
una sorta di, quando si vede CS50 :: query.

522
00:23:03,530 --> 00:23:08,070
Il colon colon in PHP è un altro
modo di chiamare una funzione che è

523
00:23:08,070 --> 00:23:09,260
all'interno di un oggetto.

524
00:23:09,260 --> 00:23:11,960
>> Ma per ora in JavaScript,
è solo un punto.

525
00:23:11,960 --> 00:23:14,170
E così questa funzione,
abbastanza bene, tipo di

526
00:23:14,170 --> 00:23:16,810
dice quello che does-- ottenere elemento per ID.

527
00:23:16,810 --> 00:23:20,280
Un elemento è solo un altro nome
per un tag o un nodo nel DOM.

528
00:23:20,280 --> 00:23:26,900
E così ottenere elemento da ID "nome"
significa questo-- ecco il mio codice HTML.

529
00:23:26,900 --> 00:23:31,910
E sulla base di questo HTML, cosa
nodo o cosa tag HTML sono io

530
00:23:31,910 --> 00:23:35,097
sta per essere consegnato a livello di programmazione
chiamando document.getElementById?

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

532
00:23:37,650 --> 00:23:38,500
>> Si Esattamente.

533
00:23:38,500 --> 00:23:42,670
Ho intenzione di ottenere l'ingresso
elemento c'è il cui ID è "nome".

534
00:23:42,670 --> 00:23:45,140
Quindi in particolare, è possibile
pensare a questa funzione,

535
00:23:45,140 --> 00:23:49,560
getElementById, come un modo di dare
eseguire un puntatore a tale nodo specifico

536
00:23:49,560 --> 00:23:50,060
nell'albero.

537
00:23:50,060 --> 00:23:51,980
Non abbiamo tratto questa
albero, ma è un modo

538
00:23:51,980 --> 00:23:54,900
di ottenere l'accesso a tale
rettangolo o quel rettangolo

539
00:23:54,900 --> 00:23:58,090
identificando univocamente tramite il suo ID.

540
00:23:58,090 --> 00:23:59,760
>> Ora, perché è utile?

541
00:23:59,760 --> 00:24:01,510
Beh, si scopre
che una volta che hai ottenuto

542
00:24:01,510 --> 00:24:07,220
tale nodo, quel rettangolo dal
picture, tale nodo all'interno di esso,

543
00:24:07,220 --> 00:24:10,660
a sua volta, ha un sacco di
properties-- coppie chiave-valore

544
00:24:10,660 --> 00:24:13,480
o dati, uno dei quali è chiamato valore.

545
00:24:13,480 --> 00:24:16,500
Così letteralmente, è una specie di un
boccone per spiegare tutta la faccenda.

546
00:24:16,500 --> 00:24:19,370
Ma alla fine della giornata,
tutto questo non fa altro che dare a

547
00:24:19,370 --> 00:24:23,070
una stringa che l'utente ha digitato
in questo modo gerarchico.

548
00:24:23,070 --> 00:24:24,820
Ma non mi piace un
paio di queste cose.

549
00:24:24,820 --> 00:24:27,590
O meglio, c'è ancora una certa curiosità.

550
00:24:27,590 --> 00:24:28,870
Tutto questo sembrava funzionare.

551
00:24:28,870 --> 00:24:33,420
Perché pensi che sono tornato
falso dopo aver chiamato salutare?

552
00:24:33,420 --> 00:24:35,910
Questo sembra un po 'brutto, che
Ho due affermazioni ci

553
00:24:35,910 --> 00:24:38,730
separati da virgola.

554
00:24:38,730 --> 00:24:39,310
Prendere una supposizione.

555
00:24:39,310 --> 00:24:44,390
Se ho rimosso restituire false, cosa
potrebbe accadere, proprio istinto?

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

557
00:24:46,990 --> 00:24:49,460
Siamo spiacenti, dire ancora?

558
00:24:49,460 --> 00:24:50,530
>> Aprire un mazzo di di Windows.

559
00:24:50,530 --> 00:24:52,780
Quindi potenzialmente forse qualcosa
come che sarebbe successo.

560
00:24:52,780 --> 00:24:54,422
Cos'altro?

561
00:24:54,422 --> 00:24:55,630
Potrebbe presentare una richiesta in cui?

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

563
00:24:59,109 --> 00:25:00,510
Alla stessa pagina.

564
00:25:00,510 --> 00:25:03,110
Quindi, in effetti, è che
il più vicino rispondere qui,

565
00:25:03,110 --> 00:25:05,890
anche se, a differenza di
in passato, non ho

566
00:25:05,890 --> 00:25:09,300
specifica l'attributo action,
che normalmente si hanno a che fare.

567
00:25:09,300 --> 00:25:11,780
Si scopre che c'è un difetto.
Se non si specifica azione,

568
00:25:11,780 --> 00:25:15,370
è come dire preventivo, unquote
o il nome del file stesso,

569
00:25:15,370 --> 00:25:17,850
che in questo caso sarebbe
essere come dom-0.html.

570
00:25:17,850 --> 00:25:20,420
E 'solo tipo di dedurre,
o meglio implicita.

571
00:25:20,420 --> 00:25:22,420
>> E così, se non faccio questo, cerchiamo di notare.

572
00:25:22,420 --> 00:25:23,230
Permettetemi di salvare questo.

573
00:25:23,230 --> 00:25:25,270
E ho tolto ritorno falso.

574
00:25:25,270 --> 00:25:27,759
Permettetemi di tornare in questo
esempio e la forza ricaricarlo.

575
00:25:27,759 --> 00:25:30,800
E si potrebbe avere visto me suggerire
questo su CS50 discutere un mucchio di volte.

576
00:25:30,800 --> 00:25:34,560
Se qualcosa è mai agire funky e la
Browser non è comportarsi come ci si aspetta,

577
00:25:34,560 --> 00:25:37,410
spesso si vorrà tenere
Maiusc e quindi fare clic su Ricarica.

578
00:25:37,410 --> 00:25:41,480
Che costringerà tutti i file a ricaricare
e non utilizzare la cache locale del browser

579
00:25:41,480 --> 00:25:47,032
o copia in modo che ora, lasciami andare avanti e
aprire il mio ispettore, la scheda di rete.

580
00:25:47,032 --> 00:25:48,740
Io vado a fare clic su
Preservare Log perché io

581
00:25:48,740 --> 00:25:51,660
non lo vogliono eliminare le righe
Una volta che ho sbattuto via altrove.

582
00:25:51,660 --> 00:25:54,650
>> Lasciami andare avanti qui e
tipo di Andi, fare clic su Invia.

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

584
00:25:55,150 --> 00:25:56,480
Sembra come previsto.

585
00:25:56,480 --> 00:25:57,440
Si dice "ciao, Andi."

586
00:25:57,440 --> 00:25:59,420
Permettetemi di fare clic su OK.

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

588
00:26:00,610 --> 00:26:05,100
Si noti che la pagina è cambiato,
anche se alla pagina originale.

589
00:26:05,100 --> 00:26:06,770
Si noti il ​​tipo di URL modificato.

590
00:26:06,770 --> 00:26:09,430
Ha aggiunto un punto interrogativo,
che è di solito un indicatore

591
00:26:09,430 --> 00:26:11,260
che abbiamo cercato di presentare qualcosa.

592
00:26:11,260 --> 00:26:13,570
E quindi nella parte inferiore,
ancora più esplicitamente,

593
00:26:13,570 --> 00:26:17,570
qui è la richiesta effettiva HTTP,
che ha ottenuto una risposta di 200 che

594
00:26:17,570 --> 00:26:18,490
mi ha portato qui.

595
00:26:18,490 --> 00:26:20,250
>> Quindi questo non è quello che è
che vogliamo fare, giusto?

596
00:26:20,250 --> 00:26:22,166
Perché non voglio
ricaricare l'intera pagina.

597
00:26:22,166 --> 00:26:24,970
Io invece volevo tornare
falso in modo da corto circuito

598
00:26:24,970 --> 00:26:28,840
comportamento di default del browser, che
era, ovviamente, di sottoporre la pagina.

599
00:26:28,840 --> 00:26:31,700
>> Quindi, diamo un'occhiata a un
marginalmente migliore esempio.

600
00:26:31,700 --> 00:26:33,920
Questa è la versione dom uno.

601
00:26:33,920 --> 00:26:36,680
E notare quanto segue.

602
00:26:36,680 --> 00:26:39,150
Va bene se non Grok
tutte le linee di codice.

603
00:26:39,150 --> 00:26:41,750
Ma ciò che è fondamentalmente diversa
su questa implementazione?

604
00:26:41,750 --> 00:26:44,690
Io stipula le si comporta il
stesso, fa la stessa cosa.

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

606
00:26:49,320 --> 00:26:51,570
Che cosa ho ovviamente fatto in modo diverso?

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

608
00:26:52,266 --> 00:26:53,182
>> PUBBLICO: [incomprensibile].

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

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

611
00:27:04,170 --> 00:27:08,620
Quindi la funzione è definita differently--
in altre parole, assenti dalla forma,

612
00:27:08,620 --> 00:27:13,180
lassù on line o 7--
piuttosto, la linea non è più 8--

613
00:27:13,180 --> 00:27:15,070
devo onsubmit.

614
00:27:15,070 --> 00:27:16,750
Nell'esempio precedente, ho avuto questa.

615
00:27:16,750 --> 00:27:18,530
E poi ho letteralmente scritto il mio codice qui.

616
00:27:18,530 --> 00:27:20,210
E poi ho detto return false.

617
00:27:20,210 --> 00:27:22,180
E se non strofinare
il modo sbagliato ancora,

618
00:27:22,180 --> 00:27:26,140
si dovrebbe iniziare a misura
come, proprio come in HTML,

619
00:27:26,140 --> 00:27:29,530
quando abbiamo iniziato a co-mescolarsi esso
con i CSS in attributi di stile,

620
00:27:29,530 --> 00:27:32,890
è appena iniziato ad avere un po
disordinato o sentire un po 'sbagliato.

621
00:27:32,890 --> 00:27:35,020
>> Allo stesso modo qui, se
iniziare a prendere HTML,

622
00:27:35,020 --> 00:27:37,419
e poi automaticamente
plop un codice JavaScript

623
00:27:37,419 --> 00:27:40,460
nel bel mezzo di una stringa tra virgolette, è
Non sarà molto gestibile.

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

625
00:27:40,630 --> 00:27:43,690
Non è nemmeno evidente a prima
luogo in cui il codice JavaScript è.

626
00:27:43,690 --> 00:27:46,590
Quindi sarebbe davvero bello come
un principio di migliore progettazione,

627
00:27:46,590 --> 00:27:50,500
teniamo completamente il nostro HTML
separata dalla nostra JavaScript.

628
00:27:50,500 --> 00:27:53,150
>> Quindi, per fare questo, quello che abbiamo
fatto qui è il following--

629
00:27:53,150 --> 00:27:56,790
usiamo semplicemente HTML solo markup.

630
00:27:56,790 --> 00:28:00,730
E così in versione uno di questo, tutte
Che ho è un modulo con un ID univoco.

631
00:28:00,730 --> 00:28:04,630
E poi qui, sto approfittando
di una caratteristica speciale di JavaScript

632
00:28:04,630 --> 00:28:08,480
per cui posso avere ciò che è
chiamato una funzione anonima.

633
00:28:08,480 --> 00:28:14,150
Così si scopre che, se io chiamo
document.getElementById di 'demo'

634
00:28:14,150 --> 00:28:18,890
che è come dare me un puntatore
questo nodo nel mio albero, l'elemento del modulo,

635
00:28:18,890 --> 00:28:20,100
per così dire.

636
00:28:20,100 --> 00:28:22,220
>> Ora, so solo da
conoscere un po 'di HTML

637
00:28:22,220 --> 00:28:26,330
ora stiamo avendo letto qualche linea
di riferimento, che un elemento del modulo supporta

638
00:28:26,330 --> 00:28:29,950
un sacco di eventi in listeners--
altre parole, la lunga lista di eventi

639
00:28:29,950 --> 00:28:31,700
ascoltatori che abbiamo visto poco fa.

640
00:28:31,700 --> 00:28:35,950
So che dalla lettura della documentazione
che onSubmit è un evento valida

641
00:28:35,950 --> 00:28:38,520
listener per un elemento del modulo.

642
00:28:38,520 --> 00:28:41,480
>> Quindi, una volta che so che,
è sicuro per me fare

643
00:28:41,480 --> 00:28:45,390
il following-- ottenere quel nodo
dall'albero, l'elemento del modulo,

644
00:28:45,390 --> 00:28:48,070
e accedere al suo cosiddetto
immobili onsubmit.

645
00:28:48,070 --> 00:28:49,880
Così il punto significa solo
questa è una proprietà,

646
00:28:49,880 --> 00:28:52,180
come un valore speciale all'interno di esso.

647
00:28:52,180 --> 00:28:55,590
E che tipo di dati sono io
l'assegnazione, a quanto pare,

648
00:28:55,590 --> 00:28:58,900
a onSubmit, che è
effettivamente una variabile all'interno

649
00:28:58,900 --> 00:29:01,010
di tale nodo nell'albero?

650
00:29:01,010 --> 00:29:04,100
E 'un campo all'interno di quella struct.

651
00:29:04,100 --> 00:29:05,810
Qual è il tipo di dati?

652
00:29:05,810 --> 00:29:07,030
>> Una funzione, sì.

653
00:29:07,030 --> 00:29:08,607
Così si scopre che PHP ha questo.

654
00:29:08,607 --> 00:29:10,440
E anche se siamo
Non hai detto a questo proposito,

655
00:29:10,440 --> 00:29:16,240
C ha anche puntatori a funzione, i
capacità di passare e assegnare le funzioni

656
00:29:16,240 --> 00:29:18,330
come stessi valori variabili.

657
00:29:18,330 --> 00:29:20,280
E non stiamo andando
a regredire torna a C.

658
00:29:20,280 --> 00:29:23,250
Ma per ora, si scopre che
sul lato destro qui,

659
00:29:23,250 --> 00:29:26,260
anche se sembra un po '
funky, questo significa, hey del browser,

660
00:29:26,260 --> 00:29:27,550
dammi una funzione.

661
00:29:27,550 --> 00:29:30,560
Io non ho intenzione di preoccuparsi anche dando
un nome perché sono letteralmente

662
00:29:30,560 --> 00:29:34,450
andare per assegnare chiamiamolo
l'indirizzo di questa funzione

663
00:29:34,450 --> 00:29:35,994
immediatamente a onSubmit.

664
00:29:35,994 --> 00:29:39,160
In altre parole, il browser, non è necessario
di sapere che cosa chiama questa funzione.

665
00:29:39,160 --> 00:29:41,890
Hai solo bisogno di sapere
dove è in memoria.

666
00:29:41,890 --> 00:29:44,210
E così è sufficiente solo per
avere un segno di uguale lì

667
00:29:44,210 --> 00:29:48,240
e di non preoccuparsi di nominare questo, come
foo o salutare o di qualsiasi altra parola.

668
00:29:48,240 --> 00:29:50,150
E ora questo è solo una cosa stilistica.

669
00:29:50,150 --> 00:29:53,100
Potrei spostare questa parentesi graffa
sulla the-- sorry-- riga successiva

670
00:29:53,100 --> 00:29:54,750
come facciamo di solito CS50.

671
00:29:54,750 --> 00:29:57,550
Ma in JavaScript, è
in realtà stilisticamente comune

672
00:29:57,550 --> 00:30:00,450
per mantenere solo la parentesi graffa, il
prima, su quella prima riga.

673
00:30:00,450 --> 00:30:02,620
>> Ma d'ora in poi, non c'è
niente di interessante.

674
00:30:02,620 --> 00:30:05,830
Quella parentesi graffa aperta solo
delimita l'inizio della mia funzione.

675
00:30:05,830 --> 00:30:09,320
La funzione è ora
identiche, tranne che ho

676
00:30:09,320 --> 00:30:11,452
incluso il falso ritorno
all'interno di questa funzione.

677
00:30:11,452 --> 00:30:13,160
Perché si scopre fuori--
e solamente sarebbe

678
00:30:13,160 --> 00:30:14,980
lo sanno da lettura
il documentation--

679
00:30:14,980 --> 00:30:19,740
che se la funzione assegnare
al gestore onsubmit restituisce false,

680
00:30:19,740 --> 00:30:23,420
il browser conosce appena e concorda
di non inviare il modulo a un server.

681
00:30:23,420 --> 00:30:27,210
Se restituisce vero, presenterà
a un server, per motivi che vedremo

682
00:30:27,210 --> 00:30:28,700
sono utili in un attimo.

683
00:30:28,700 --> 00:30:31,000
>> E poi il punto e virgola dopo
la parentesi graffa lì solo

684
00:30:31,000 --> 00:30:32,541
significa che sono fatto definisce la funzione.

685
00:30:32,541 --> 00:30:36,600
Sai cosa chiamare al più presto
come si sente una sottomissione.

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

687
00:30:37,100 --> 00:30:40,650
Questo è ancora probabilmente sorta di brutto.

688
00:30:40,650 --> 00:30:42,190
Allora, cosa altro possiamo fare?

689
00:30:42,190 --> 00:30:45,000
>> Beh, si scopre poi a
versione a due, che è il last--

690
00:30:45,000 --> 00:30:46,780
e dobbiamo solo un'occhiata a questo.

691
00:30:46,780 --> 00:30:49,850
A rischio di fare
esso più brutta, si scopre

692
00:30:49,850 --> 00:30:52,160
che c'è una biblioteca
il mondo ha chiamato jQuery.

693
00:30:52,160 --> 00:30:54,900
E jQuery è un super
popolare libreria JavaScript

694
00:30:54,900 --> 00:30:57,930
è così popolare che la maggior parte
qualsiasi Javascript-- non è

695
00:30:57,930 --> 00:31:00,540
raro per le persone a confondere
jQuery con JavaScript.

696
00:31:00,540 --> 00:31:01,070
Come mai?

697
00:31:01,070 --> 00:31:04,990
JavaScript stessa ha molto
verbose modi di fare things--

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

699
00:31:07,820 --> 00:31:10,510
Si finisce per avere molto
lunghe righe di codice.

700
00:31:10,510 --> 00:31:15,550
>> Quindi, un tizio di nome John Resid,
che lavora in realtà per una startup

701
00:31:15,550 --> 00:31:18,630
in questi giorni, è uscito
con questi anni di biblioteca

702
00:31:18,630 --> 00:31:22,070
fa che molte persone hanno contribuito
a chiamata jQuery che cambia

703
00:31:22,070 --> 00:31:23,449
la sintassi nel modo seguente.

704
00:31:23,449 --> 00:31:25,740
E solo così hai visto questo,
perché avrete sempre

705
00:31:25,740 --> 00:31:28,140
vedere questo se facendo un
progetto finale web-based,

706
00:31:28,140 --> 00:31:33,270
Questo sarebbe il modo equivalente
attuazione di quella stessa funzione utilizzando

707
00:31:33,270 --> 00:31:34,630
questa biblioteca speciale.

708
00:31:34,630 --> 00:31:36,680
>> Ora, invece di prendere in giro
lo distingue nella sua interezza,

709
00:31:36,680 --> 00:31:38,520
facciamo solo un'occhiata ad alcuni modelli.

710
00:31:38,520 --> 00:31:44,850
Questa sintassi sembra avere
quante funzioni anonime

711
00:31:44,850 --> 00:31:49,584
o funzioni senza nome
o funzioni lambda AKA?

712
00:31:49,584 --> 00:31:50,190
Due, giusto?

713
00:31:50,190 --> 00:31:52,690
E si sa che, anche se
non sei super comodi con questo,

714
00:31:52,690 --> 00:31:55,780
solo per il fatto che
dice la funzione () due volte.

715
00:31:55,780 --> 00:31:58,172
>> E si scopre che
ciò che questo codice è doing--

716
00:31:58,172 --> 00:32:01,255
e ci riferiamo a riferimenti online,
in ultima analisi, per un aiuto con questo.

717
00:32:01,255 --> 00:32:04,480
Questo significa solo che quando
il documento è pronto,

718
00:32:04,480 --> 00:32:07,490
andare avanti e registrare
la seguente funzione

719
00:32:07,490 --> 00:32:12,064
come gestore per presentare il codice HTML
elemento la cui unica idea è demo.

720
00:32:12,064 --> 00:32:14,480
E poi, quando ciò accade,
chiamare queste due righe di codice.

721
00:32:14,480 --> 00:32:18,677
E questo è, tragicamente, un altro
modo prolisso per dire return false.

722
00:32:18,677 --> 00:32:21,510
E lo abbiamo detto solo perché
vedrete il codice come questo in linea.

723
00:32:21,510 --> 00:32:23,140
Ed è niente da scoraggiare da.

724
00:32:23,140 --> 00:32:26,057
Ma piuttosto, tenete a mente che ciò che è
andando ad essere comune in JavaScript

725
00:32:26,057 --> 00:32:26,765
è questo paradigma.

726
00:32:26,765 --> 00:32:29,510
Ed è per questo che mostriamo per ora.

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

728
00:32:30,010 --> 00:32:32,730
Così, senza soffermarsi troppo
tanto su questa sintassi,

729
00:32:32,730 --> 00:32:37,800
sono ci sono delle domande su
questi esempi o idee finora?

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

731
00:32:38,300 --> 00:32:40,220
Quindi usiamo questo per qualcosa di utile.

732
00:32:40,220 --> 00:32:47,070
Fare una pagina web che dice solo ciao,
così e così non è poi così interessante,

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

734
00:32:47,830 --> 00:32:51,038
Questo non sarà bello,
ma che sta per fare qualcosa di utile.

735
00:32:51,038 --> 00:32:56,350
Lasciatemi tornare al mio elenco
qui e di aprire, dire, la forma-0.html.

736
00:32:56,350 --> 00:32:59,320
>> Quindi supponiamo che questa è la matricola
pagina di registrazione sport intramurale

737
00:32:59,320 --> 00:33:01,780
senza CSS o qualsiasi senso del design.

738
00:33:01,780 --> 00:33:05,404
E voglio andare avanti e
registrati qui con una password.

739
00:33:05,404 --> 00:33:08,320
E ho intenzione di accettare i termini
e le condizioni e fare clic su Registra.

740
00:33:08,320 --> 00:33:11,700
E ora il sito dice: "Tu sei
registrati! (Beh, non proprio.)"

741
00:33:11,700 --> 00:33:15,070
Che sembra come ha funzionato, ma
lasciatemi andare avanti e forzo ricarica.

742
00:33:15,070 --> 00:33:18,720
>> E lasciatemi dire, no, non è necessario
bisogno del mio indirizzo di posta elettronica reale.

743
00:33:18,720 --> 00:33:21,820
O forse ci limiteremo a dire posta in là.

744
00:33:21,820 --> 00:33:25,080
Password sarà, come, 12345.

745
00:33:25,080 --> 00:33:28,810
E poi, solo perché sono
un idiota, ora è 123456789.

746
00:33:28,810 --> 00:33:31,150
E non ho intenzione di controllare la vostra casella.

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

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

749
00:33:32,350 --> 00:33:34,920
Quindi c'è diverse opportunità
per migliorare qui.

750
00:33:34,920 --> 00:33:39,070
E si sa, o vedrete nel pset
sette, che è possibile scrivere code--

751
00:33:39,070 --> 00:33:41,890
e dovrete scrivere
codice PHP-- per difendere

752
00:33:41,890 --> 00:33:45,780
contro questi tipi di utenti
errori perché l'utente in modo chiaro

753
00:33:45,780 --> 00:33:46,790
non ha collaborato.

754
00:33:46,790 --> 00:33:49,680
E lui o lei non vi ha dato tutto il
valori che voleva o addirittura nel formato

755
00:33:49,680 --> 00:33:50,630
che li voleva.

756
00:33:50,630 --> 00:33:53,250
Così vedrete in pset sette che
potremmo certamente avere qualche

757
00:33:53,250 --> 00:33:55,680
se le condizioni che dicono
se l'indirizzo di posta elettronica

758
00:33:55,680 --> 00:33:59,450
Non è un username@something.edu,
potremmo solo

759
00:33:59,450 --> 00:34:02,575
dire che mi dispiace e ci scusiamo per l'utente
molto, come si potrebbe essere in pset sette.

760
00:34:02,575 --> 00:34:05,700
Oppure, se non hanno verificato che scatola,
risulta in PHP, è possibile rilevare che,

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

762
00:34:06,200 --> 00:34:09,389
E certamente se le password
non corrispondono come in register.php

763
00:34:09,389 --> 00:34:11,521
per pset sette, è possibile rilevare che.

764
00:34:11,521 --> 00:34:13,770
Ma questo è un dolore nel
collo che ora chiedono

765
00:34:13,770 --> 00:34:15,510
noi di andare fino in fondo al server.

766
00:34:15,510 --> 00:34:17,053
L'utente è informato dell'errore.

767
00:34:17,053 --> 00:34:19,219
E almeno se non si utilizza
alcune tecniche di amatore,

768
00:34:19,219 --> 00:34:20,929
ora devono fare clic sulla freccia indietro.

769
00:34:20,929 --> 00:34:23,300
Non sarebbe bello, come
un sacco di siti web di oggi,

770
00:34:23,300 --> 00:34:26,190
se tu avessi più immediata
feedback, istantaneamente?

771
00:34:26,190 --> 00:34:31,389
>> In altre parole, lasciami andare alla versione
uno, che sta per essere più bella.

772
00:34:31,389 --> 00:34:33,469
Ma ha questa caratteristica.

773
00:34:33,469 --> 00:34:39,590
Malan, 12345, 123456789, non
andando a controllare la casella, Registro.

774
00:34:39,590 --> 00:34:41,330
Le password non corrispondono.

775
00:34:41,330 --> 00:34:44,459
Così, anche se questo pop-up è ugly--
possiamo sostituire questo alla fine

776
00:34:44,459 --> 00:34:47,000
con qualcosa come Bootstrap,
che si vedrà in pset sette

777
00:34:47,000 --> 00:34:50,239
è un library-- molto popolare che ho fatto
rilevano che le password non corrispondono.

778
00:34:50,239 --> 00:34:50,739
Tutto ok.

779
00:34:50,739 --> 00:34:52,530
Beh, mi permetta di risolvere che come utente.

780
00:34:52,530 --> 00:34:55,460
Lasciami andare avanti e dire 12345, 12345.

781
00:34:55,460 --> 00:34:57,780
Ancora non controllare l'accordo.

782
00:34:57,780 --> 00:35:00,210
Devi accettare il
termini e condizioni.

783
00:35:00,210 --> 00:35:01,760
Allora perchè?

784
00:35:01,760 --> 00:35:04,100
>> Se abbiamo già ponemo
che c'è un modo,

785
00:35:04,100 --> 00:35:07,260
e ti abbiamo richiesto in
pset sette di rilevare errori

786
00:35:07,260 --> 00:35:09,780
condizioni come questo
sul lato server, perché dovrei

787
00:35:09,780 --> 00:35:13,940
preoccuparsi di fare questo anche in JavaScript?

788
00:35:13,940 --> 00:35:15,850
Che cosa è un argomento a
favore di aggiungere ciò che

789
00:35:15,850 --> 00:35:18,760
che state per vedere come some--
c'è complessità.

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

791
00:35:23,610 --> 00:35:25,930
>> Forse non c'è rialzo.

792
00:35:25,930 --> 00:35:26,924
Cosa potrebbe essere?

793
00:35:26,924 --> 00:35:27,840
PUBBLICO: [incomprensibile].

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

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

796
00:35:32,340 --> 00:35:33,530
Potenziali attacchi.

797
00:35:33,530 --> 00:35:37,540
Così sicuro, se non stai movimentazione
input dell'utente erronea quella grande,

798
00:35:37,540 --> 00:35:40,170
forse è meglio se si
non ha nemmeno raggiungere il vostro server.

799
00:35:40,170 --> 00:35:42,160
Vorrei spingere indietro lì e
per esempio, si dovrebbe probabilmente

800
00:35:42,160 --> 00:35:43,284
risolvere entrambi questi problemi.

801
00:35:43,284 --> 00:35:44,140
Ma questo è giusto.

802
00:35:44,140 --> 00:35:44,710
Cos'altro?

803
00:35:44,710 --> 00:35:45,626
>> PUBBLICO: [incomprensibile].

804
00:35:45,626 --> 00:35:47,970

805
00:35:47,970 --> 00:35:49,014
>> DAVID MALAN: Sì.

806
00:35:49,014 --> 00:35:51,680
Questo codice, come abbiamo detto prima, è
interpretato sul client-side.

807
00:35:51,680 --> 00:35:53,846
Essa non si preoccupa il server,
il che significa che non è così

808
00:35:53,846 --> 00:35:55,930
impatto del carico o la capacità del server.

809
00:35:55,930 --> 00:35:59,840
E ora, per me po 'vecchio,
questo non ha alcun effetto significativo

810
00:35:59,840 --> 00:36:01,970
perché ho un utente al momento.

811
00:36:01,970 --> 00:36:04,010
>> Ma se siete qualsiasi
sito web di dimensioni adeguate,

812
00:36:04,010 --> 00:36:07,400
soprattutto il più grande, come Facebook,
più si può tenere la gente fuori

813
00:36:07,400 --> 00:36:09,927
del server del meglio
perché un server, naturalmente,

814
00:36:09,927 --> 00:36:12,510
ha solo una quantità limitata di RAM,
un numero finito di gigahertz,

815
00:36:12,510 --> 00:36:16,340
un numero finito di cose
può fare per unità di tempo.

816
00:36:16,340 --> 00:36:19,170
Quindi, se ci sono più persone in
il mondo di colpire il vostro server,

817
00:36:19,170 --> 00:36:21,750
registrazione accidentalmente
in modo non corretto, altrettanto bene se si

818
00:36:21,750 --> 00:36:23,254
può tenere quel carico fuori il vostro server.

819
00:36:23,254 --> 00:36:25,420
Inoltre, in particolare su un cellulare
device-- se hai mai

820
00:36:25,420 --> 00:36:29,190
accedere my.harvard o
Netid di Yale o simili,

821
00:36:29,190 --> 00:36:32,330
c'è questa la latenza con un sacco di
siti web come quello per cui ci vuole,

822
00:36:32,330 --> 00:36:34,110
come, un maledetto secondo o due volte.

823
00:36:34,110 --> 00:36:37,979
E poi, il mio Dio, se si digitano,
allora dovete colpire indietro e rifare.

824
00:36:37,979 --> 00:36:40,520
Quindi c'è la latenza, in particolare
su connessioni di rete più lente.

825
00:36:40,520 --> 00:36:43,030
Ma JavaScript, perché
viene eseguito sul client

826
00:36:43,030 --> 00:36:46,720
e non ha bisogno di andare avanti e indietro
attraverso un internet potenzialmente lento

827
00:36:46,720 --> 00:36:49,780
collegamento, è possibile ottenere
un feedback quasi istantaneo.

828
00:36:49,780 --> 00:36:50,760
>> Quindi diamo un'occhiata a questo.

829
00:36:50,760 --> 00:36:54,280
Lasciatemi apro forma-0 e
guardare il codice HTML qui.

830
00:36:54,280 --> 00:36:56,040
E facciamo solo vedere cosa sta succedendo.

831
00:36:56,040 --> 00:36:59,460
Questa è una forma il cui
azione è register.php.

832
00:36:59,460 --> 00:37:01,530
Sto usando solo ottenere così
che ho potuto vedere l'URL.

833
00:37:01,530 --> 00:37:05,030
Ma per le password, avremmo sicuramente vogliamo
per cambiare questo per postare nella realtà.

834
00:37:05,030 --> 00:37:06,910
Ecco un campo di input di tipo text.

835
00:37:06,910 --> 00:37:09,050
Ecco un altro ingresso
campo di tipo password.

836
00:37:09,050 --> 00:37:13,150
Ecco, se non hai mai visto,
un ingresso di tipo casella.

837
00:37:13,150 --> 00:37:15,250
>> Ma non c'è JavaScript
qui di sorta.

838
00:37:15,250 --> 00:37:18,170
Questo è solo HTML
va a register.php.

839
00:37:18,170 --> 00:37:21,020
Ma in versione uno, dove
ha iniziato a ottenere quei pop-up,

840
00:37:21,020 --> 00:37:23,010
vediamo cosa effettivamente accade qui.

841
00:37:23,010 --> 00:37:26,757
Nella versione uno, cosa
Io vado a see-- I

842
00:37:26,757 --> 00:37:29,340
Pensavo di poter stallo abbastanza
con abbastanza parole, ma ho finito.

843
00:37:29,340 --> 00:37:35,180

844
00:37:35,180 --> 00:37:38,590
>> Nella versione tra-- ci andiamo.

845
00:37:38,590 --> 00:37:43,180
Nella versione uno, notare la following--
e non è la migliore realizzazione,

846
00:37:43,180 --> 00:37:44,420
ma è la mia prima.

847
00:37:44,420 --> 00:37:47,680
Si noti che il sotto
forma, ho un tag script.

848
00:37:47,680 --> 00:37:49,430
E un tag script significa,
ehi, browser qui

849
00:37:49,430 --> 00:37:52,340
arriva un po 'di codice in,
tipicamente, JavaScript.

850
00:37:52,340 --> 00:37:54,420
E ora, noto quello che sto facendo.

851
00:37:54,420 --> 00:37:59,070
Su line-- Riesco a malapena
leggere it-- linea 32, si dice,

852
00:37:59,070 --> 00:38:01,420
var form-- così mi danno
una variabile denominata modulo.

853
00:38:01,420 --> 00:38:05,049
E quindi ottenere document.getElementId
di "registrazione".

854
00:38:05,049 --> 00:38:05,590
Cos'è questo?

855
00:38:05,590 --> 00:38:07,290
Beh, mi permetta di riavvolgere qui.

856
00:38:07,290 --> 00:38:11,510
E notate, ah, ho dato l'elemento del modulo
un'idea arbitraria ma descrittivo

857
00:38:11,510 --> 00:38:13,050
di registrazione.

858
00:38:13,050 --> 00:38:16,820
Quindi, questo mi dà una variabile che
mi permette di afferrare quel nodo,

859
00:38:16,820 --> 00:38:19,580
quel rettangolo nella struttura denominata modulo.

860
00:38:19,580 --> 00:38:24,460
mezzi form.onsubmit, ehi del browser,
registrare un listener di eventi

861
00:38:24,460 --> 00:38:25,470
in questo modulo.

862
00:38:25,470 --> 00:38:28,890
In altre parole, quando il modulo è
presentato, eseguire il codice seguente.

863
00:38:28,890 --> 00:38:30,810
Non ha bisogno di un nome perché
perché avete bisogno di sapere il nome?

864
00:38:30,810 --> 00:38:32,880
Hai solo bisogno di sapere
cosa da eseguire, ergo

865
00:38:32,880 --> 00:38:35,610
si tratta di una funzione anonima o lambda.

866
00:38:35,610 --> 00:38:37,632
E che la funzione è
tutte queste linee qui.

867
00:38:37,632 --> 00:38:40,840
E ora, a dire il vero, anche se si
Non avrebbe potuto mai scritto Javascript

868
00:38:40,840 --> 00:38:44,200
prima, è solo logica C e PHP.

869
00:38:44,200 --> 00:38:51,720
Quindi, se form.email.value == "" -
quindi se il campo posta elettronica è vuoto,

870
00:38:51,720 --> 00:38:54,980
urlare presso l'utente con "È necessario
fornire il proprio indirizzo e-mail. "

871
00:38:54,980 --> 00:38:58,980
Altrimenti se form.password.value
è urlo vuoto presso l'utente,

872
00:38:58,980 --> 00:39:00,400
"È necessario fornire la password."

873
00:39:00,400 --> 00:39:04,240
>> Più interessante logicamente,
se non lo fa form.password.value

874
00:39:04,240 --> 00:39:08,630
pari form.confirmation.value--
da dove conferma viene?

875
00:39:08,630 --> 00:39:09,470
Permettetemi di riavvolgimento.

876
00:39:09,470 --> 00:39:12,870
Beh, ho chiamato questo ingresso
campo qui la password.

877
00:39:12,870 --> 00:39:15,180
E ho chiamato questa qui conferma.

878
00:39:15,180 --> 00:39:17,850
Avrei potuto chiamato
Password due o qualsiasi altra cosa.

879
00:39:17,850 --> 00:39:20,560
Sto solo controllando logicamente
che questi due sono gli stessi.

880
00:39:20,560 --> 00:39:25,760
Else-- si scopre questo è il signor Boole
again-- un valore booleano, la casella di controllo.

881
00:39:25,760 --> 00:39:29,810
Quindi, se io dico, esclamazione Point--
se non form.agreement.checked,

882
00:39:29,810 --> 00:39:31,820
urlare presso l'utente pure.

883
00:39:31,820 --> 00:39:34,470
>> Quindi questa sintassi che vedrete è
molto comune in JavaScript,

884
00:39:34,470 --> 00:39:35,970
dove si ha questa notazione a punti.

885
00:39:35,970 --> 00:39:37,460
Si inizia con un oggetto qui.

886
00:39:37,460 --> 00:39:41,430
Si immerge in un più profondo per a
una proprietà come password.

887
00:39:41,430 --> 00:39:43,280
E poi si arriva al suo valore effettivo.

888
00:39:43,280 --> 00:39:45,830
E ancora, ecco l'ingresso.

889
00:39:45,830 --> 00:39:47,310
Ecco la password nome.

890
00:39:47,310 --> 00:39:50,860
E il suo valore è tutto ciò che il
umano ha effettivamente digitato.

891
00:39:50,860 --> 00:39:53,610
>> Quindi, in tutti questi
casi, sono tornato falso.

892
00:39:53,610 --> 00:39:55,800
Ma se non, torno vero.

893
00:39:55,800 --> 00:39:58,030
E così ora vediamo un
uso irresistibile di quando

894
00:39:58,030 --> 00:40:00,620
si dovrebbe restituire false per
fermare ciò che l'utente sta facendo

895
00:40:00,620 --> 00:40:03,200
e fare di lui o lei sceglie
di nuovo o digitare di nuovo.

896
00:40:03,200 --> 00:40:05,870
In caso contrario, si ritorna vero.

897
00:40:05,870 --> 00:40:08,585
>> E mi permetta di introdurre una
altra variante di questo giusto

898
00:40:08,585 --> 00:40:13,140
per seminare un po 'di comprensione della stessa.

899
00:40:13,140 --> 00:40:16,850
Beh, in versione 2 di questo, la forma-2--
Lo farò con un gesto della mano.

900
00:40:16,850 --> 00:40:19,920
Questo è, per i curiosi,
la versione jQuery,

901
00:40:19,920 --> 00:40:23,330
quelli di voi che potrebbero desiderare di
dilettarsi in quel particolare libreria.

902
00:40:23,330 --> 00:40:25,145
Ma andiamo start-- e delle domande?

903
00:40:25,145 --> 00:40:29,230
Mi permetta di mettere in pausa per momento perché
che è stato veloce e molto.

904
00:40:29,230 --> 00:40:32,610
>> Ma la cosa bella è che tutto
del codice è praticamente la stessa.

905
00:40:32,610 --> 00:40:33,985
Il nuovo materiale è ciò che è il DOM?

906
00:40:33,985 --> 00:40:35,115
Quali sono questi rettangoli?

907
00:40:35,115 --> 00:40:35,990
Che cosa sono questi nodi?

908
00:40:35,990 --> 00:40:37,540
Che cosa è una funzione anonima?

909
00:40:37,540 --> 00:40:38,830
Che cosa è un gestore di eventi?

910
00:40:38,830 --> 00:40:43,480
Ma per fortuna, la maggior parte di questo è solo
il cerchio da, diciamo, la settimana a zero.

911
00:40:43,480 --> 00:40:43,980
Tutto ok.

912
00:40:43,980 --> 00:40:46,070
Quindi, qualcosa un po 'più interessante?

913
00:40:46,070 --> 00:40:49,340
Beh, prima di tutto, lasciatemi andare
avanti e di aprire Google Maps.

914
00:40:49,340 --> 00:40:53,360
E noterete che per un
momento, sulla frazione di secondo,

915
00:40:53,360 --> 00:40:55,930
notare cosa succede quando
Clicco abbastanza veloce.

916
00:40:55,930 --> 00:40:59,720
E questa connessione ad Harvard è così
veloce che in realtà non notare.

917
00:40:59,720 --> 00:41:04,469
Ma che cosa tipo di tipo di vedere
se clicco e trascino veramente veloce?

918
00:41:04,469 --> 00:41:07,010
Quelli di voi a guardare in linea,
se si rallenta questo a velocità 0,5x,

919
00:41:07,010 --> 00:41:09,640
si può vedere meglio.

920
00:41:09,640 --> 00:41:13,550
>> Quello che stava accadendo solo
prima ho cliccato e trascinato?

921
00:41:13,550 --> 00:41:15,900
Fammi provare qui-- lasciami fare
qualcos'altro, come 90210.

922
00:41:15,900 --> 00:41:17,550
Andiamo lontano.

923
00:41:17,550 --> 00:41:19,000
E 'stato veramente veloce, anche.

924
00:41:19,000 --> 00:41:22,460
Che ne dite di Disney World?

925
00:41:22,460 --> 00:41:23,190
Ci siamo.

926
00:41:23,190 --> 00:41:23,690
OK.

927
00:41:23,690 --> 00:41:26,030
Che cosa hai visto per una frazione di secondo?

928
00:41:26,030 --> 00:41:27,200
Proprio come, piazze, giusto?

929
00:41:27,200 --> 00:41:28,930
Segnaposto per piastrelle?

930
00:41:28,930 --> 00:41:30,270
>> Ebbene, che cosa sta succedendo qui?

931
00:41:30,270 --> 00:41:35,410
Google Maps è un bell'esempio di
questa tecnologia che si chiama AJAX.

932
00:41:35,410 --> 00:41:38,510
Ed è qui che inizieremo a
utilizzare il JavaScript particolarmente

933
00:41:38,510 --> 00:41:39,277
modo seducente.

934
00:41:39,277 --> 00:41:41,610
Indietro nel giorno, vi era
questo sito web chiamato MapQuest.

935
00:41:41,610 --> 00:41:44,120
E ho dovuto prendere una
screenshot questo dal 1990,

936
00:41:44,120 --> 00:41:45,820
dove se si voleva
cercare qui sulla mappa,

937
00:41:45,820 --> 00:41:48,590
si potrebbe letteralmente fare clic sulla freccia
nella parte superiore che ha mostrato

938
00:41:48,590 --> 00:41:49,870
una piazza diversa della mappa.

939
00:41:49,870 --> 00:41:51,790
Se si voleva spostare a sinistra, è
cliccato una freccia che vi ha mostrato

940
00:41:51,790 --> 00:41:53,210
una piazza diversa della mappa.

941
00:41:53,210 --> 00:41:54,840
E alcuni siti web ancora farlo oggi.

942
00:41:54,840 --> 00:41:57,820
Ma anche MapQuest ha ottenuto
meglio, come Google Maps.

943
00:41:57,820 --> 00:42:01,880
>> Invece, cosa c'è di meglio questi
giorni è siti web che utilizzano AJAX.

944
00:42:01,880 --> 00:42:04,510
AJAX-- altrimenti noto come
Asynchronous JavaScript and XML,

945
00:42:04,510 --> 00:42:08,370
che è solo un modo elegante per dire
una tecnologia o tecnica che

946
00:42:08,370 --> 00:42:14,200
permette un browser con JavaScript
per effettuare richieste HTTP aggiuntivi

947
00:42:14,200 --> 00:42:16,390
dopo che la pagina è stata eseguita.

948
00:42:16,390 --> 00:42:17,479
Che cosa significa questo?

949
00:42:17,479 --> 00:42:19,270
Beh, sarebbe sorta
di fastidioso in Gmail

950
00:42:19,270 --> 00:42:21,103
se ogni volta che si voleva
per controllare la posta,

951
00:42:21,103 --> 00:42:24,940
si era letteralmente premere Control-R o
Comando-R oppure fare clic sul pulsante Ricarica

952
00:42:24,940 --> 00:42:26,580
e l'intera pagina dannato sarebbe ricaricare.

953
00:42:26,580 --> 00:42:26,800
Destra?

954
00:42:26,800 --> 00:42:28,460
Sarebbe lampeggiare bianco
probabilmente per il secondo.

955
00:42:28,460 --> 00:42:30,043
Si dovrebbe vedere la barra di avanzamento stupido.

956
00:42:30,043 --> 00:42:33,170
E proprio per vedere se si dispone di nuovi
posta elettronica, l'intera pagina web e l'URL

957
00:42:33,170 --> 00:42:34,580
sei al avrebbe dovuto ricaricare.

958
00:42:34,580 --> 00:42:35,960
>> Ma questo non è ciò che accade in Gmail.

959
00:42:35,960 --> 00:42:36,459
Destra?

960
00:42:36,459 --> 00:42:40,300
Quando si riceve una nuova e-mail a
Gmail, ciò che accade sullo schermo?

961
00:42:40,300 --> 00:42:41,480
Ciò dimostra solo, giusto?

962
00:42:41,480 --> 00:42:44,280
E 'appena appare magicamente
come nuova riga nella tabella.

963
00:42:44,280 --> 00:42:47,030
Che in realtà comporta una
discreta quantità di complessità.

964
00:42:47,030 --> 00:42:51,892
In effetti, se pensi di questo albero,
che anche se è un semplice qui,

965
00:42:51,892 --> 00:42:54,100
Gmail-- e avrei dovuto guardare
il codice di essere sure--

966
00:42:54,100 --> 00:42:58,710
probabilmente ha una tabella HTML o forse
una lista non ordinata che rende

967
00:42:58,710 --> 00:43:01,060
ciascuna delle vostre caselle di posta e-mail come.

968
00:43:01,060 --> 00:43:04,050
>> E così, se si immagina questo c'è
è un albero in memoria quando si è

969
00:43:04,050 --> 00:43:09,050
utilizzando Gmail che sembra un po 'una sorta di
in questo modo, quando si rende conto di Google, ooh,

970
00:43:09,050 --> 00:43:12,770
si dispone di una nuova email, non è così
voler ricostruire tutto l'albero.

971
00:43:12,770 --> 00:43:16,430
Piuttosto, vuole trovare il nodo
l'albero che rappresenta tua casella di posta

972
00:43:16,430 --> 00:43:18,580
e basta inserire un nuovo nodo.

973
00:43:18,580 --> 00:43:24,640
>> Quindi, molto simile al pset cinque, dove si
dovuto inserire nodi in una tabella hash,

974
00:43:24,640 --> 00:43:28,410
allo stesso modo lo fa Google, via
Codice JavaScript che ha scritto,

975
00:43:28,410 --> 00:43:31,890
traverse questo albero, capire dove
è quella parte posta in arrivo della finestra,

976
00:43:31,890 --> 00:43:33,440
e poi inserire una nuova riga.

977
00:43:33,440 --> 00:43:37,460
E una nuova riga significa solo uno
o più nuovi nodi di un albero.

978
00:43:37,460 --> 00:43:41,340
>> E così AJAX è questa tecnica
che permette esattamente questo.

979
00:43:41,340 --> 00:43:44,440
Una volta che hai visitato un URL,
tuttavia pazzo tempo è,

980
00:43:44,440 --> 00:43:46,472
e una volta che la pagina ha
stato caricato, è ancora possibile

981
00:43:46,472 --> 00:43:48,430
afferrare più dati dal
internet-- che si tratti di

982
00:43:48,430 --> 00:43:52,460
una e-mail o di una tessera di un map--
afferrarlo dietro le quinte

983
00:43:52,460 --> 00:43:55,290
e poi inserirla nella pagina
in modo che l'umano non realmente

984
00:43:55,290 --> 00:43:56,910
aspettare per esso.

985
00:43:56,910 --> 00:43:58,980
>> Facebook Messenger funziona allo stesso modo.

986
00:43:58,980 --> 00:44:01,562
Qualsiasi numero di altri websites--
oh, in realtà, anche questo.

987
00:44:01,562 --> 00:44:04,270
Voglio dire, questo è, francamente, un po '
un fastidioso dispongono di questi giorni.

988
00:44:04,270 --> 00:44:07,500
Se mi metto alla ricerca di questo cats--
è una specie di un'esperienza utente orribile.

989
00:44:07,500 --> 00:44:08,990
E 'appena inizia la ricerca per me.

990
00:44:08,990 --> 00:44:10,050
Beh, che cosa sta facendo?

991
00:44:10,050 --> 00:44:12,920
L'URL non è cambiata
da quando ho iniziato a scrivere.

992
00:44:12,920 --> 00:44:17,330
Ma cosa sta succedendo in tutto il
wire-- OK, hmm interessante.

993
00:44:17,330 --> 00:44:20,470
Cosa sta succedendo in tutto il
filo qui ottiene solo più strano.

994
00:44:20,470 --> 00:44:21,090
>> OK.

995
00:44:21,090 --> 00:44:24,670
Così mi permetta di andare avanti e ispezionare
elemento e andare alla scheda di rete

996
00:44:24,670 --> 00:44:27,040
e cercare di fare questo
tecnico e meno sui gatti.

997
00:44:27,040 --> 00:44:32,595
Mentre scrivo, letteralmente, i gatti
e- cosa sta succedendo

998
00:44:32,595 --> 00:44:37,710
per-- Io non ho intenzione di fare clic su tale.

999
00:44:37,710 --> 00:44:38,210
Tutto ok.

1000
00:44:38,210 --> 00:44:44,280
Così qui, cosa sta succedendo ogni
tempo digito un personaggio, a quanto pare?

1001
00:44:44,280 --> 00:44:45,000
Come, di basso livello?

1002
00:44:45,000 --> 00:44:47,860
Che cosa sta succedendo con ciascuno di quelli
personaggi sto scrivendo la mia tastiera?

1003
00:44:47,860 --> 00:44:48,359
Sì?

1004
00:44:48,359 --> 00:44:50,950
PUBBLICO: [incomprensibile].

1005
00:44:50,950 --> 00:44:52,340
>> DAVID MALAN: Esattamente.

1006
00:44:52,340 --> 00:44:55,600
Ciascuno di questi caratteri è
andare a Google, uno alla volta.

1007
00:44:55,600 --> 00:44:58,490
Stanno costruendo una stringa
sul loro server che rappresenta

1008
00:44:58,490 --> 00:44:59,936
tutto quello che ho digitato finora.

1009
00:44:59,936 --> 00:45:01,810
E ogni volta che digitate
un altro personaggio, che

1010
00:45:01,810 --> 00:45:04,530
usare la loro salsa segreta di un
cercare algoritmo e capire,

1011
00:45:04,530 --> 00:45:07,370
vuol dire questa pagina gatto
o questa pagina gatto o simili?

1012
00:45:07,370 --> 00:45:10,620
Quindi, in un certo senso, mi fornisce con un
migliore esperienza in quel non so nemmeno

1013
00:45:10,620 --> 00:45:11,860
necessario per completare il mio pensiero.

1014
00:45:11,860 --> 00:45:14,440
E in effetti, si tratta di un utile
cosa, completamento automatico in generale.

1015
00:45:14,440 --> 00:45:17,690
Se i loro algoritmi sono abbastanza buoni
e se le mie ricerche sono abbastanza evidenti,

1016
00:45:17,690 --> 00:45:19,300
Io non devo digitare la parola intera.

1017
00:45:19,300 --> 00:45:22,110
Stanno andando a dirmi cosa
è realtà sto cercando.

1018
00:45:22,110 --> 00:45:25,940
Quindi, quello che Google chiama instant
Ricerca è solo con AJAX,

1019
00:45:25,940 --> 00:45:30,820
utilizzando il codice che permette loro di richiedere
contenuti aggiuntivi attraverso un browser web

1020
00:45:30,820 --> 00:45:34,026
dietro le quinte con questo
nuovo linguaggio, JavaScript.

1021
00:45:34,026 --> 00:45:35,400
Così abbiamo un paio di minuti dalla fine.

1022
00:45:35,400 --> 00:45:37,710
E fammi chiamare il mio compagno
Colton sul palco,

1023
00:45:37,710 --> 00:45:40,090
dato che sembrava
particolarmente divertente l'ultima volta

1024
00:45:40,090 --> 00:45:42,290
introdurre una tecnologia
che alcuni di voi

1025
00:45:42,290 --> 00:45:44,769
hanno espresso interesse
a progetti finali.

1026
00:45:44,769 --> 00:45:47,310
Abbiamo pensato che sarebbe stato divertente per portare
un volontario, anche se, oggi

1027
00:45:47,310 --> 00:45:50,074
per mostrarvi un'aggiunta
questo che you-- permette sì,

1028
00:45:50,074 --> 00:45:50,990
Ho visto questa mano prima.

1029
00:45:50,990 --> 00:45:52,900
Vieni su.

1030
00:45:52,900 --> 00:45:53,560
Molto ben fatto.

1031
00:45:53,560 --> 00:45:55,035
Buon lavoro.

1032
00:45:55,035 --> 00:45:57,410
Ho intenzione di proiettare questo su
lo schermo in un attimo.

1033
00:45:57,410 --> 00:45:58,150
Qual è il tuo nome per tutti?

1034
00:45:58,150 --> 00:45:59,180
>> EFA: Sono 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: Sì.

1039
00:46:00,730 --> 00:46:01,250
>> DAVID MALAN: Piacere di vederti.

1040
00:46:01,250 --> 00:46:01,600
Tutto ok.

1041
00:46:01,600 --> 00:46:02,590
Fammi capire pronto.

1042
00:46:02,590 --> 00:46:04,423
Vieni su oltre al
centrale con Colton qui.

1043
00:46:04,423 --> 00:46:07,050
Cosa Colton ha nelle sue mani
oggi è un telecomando.

1044
00:46:07,050 --> 00:46:10,440
Quindi, piuttosto che solo stare lì in un
mondo tridimensionale a guardarsi intorno

1045
00:46:10,440 --> 00:46:14,080
come ha fatto Colton, ora può Efa
in realtà camminare risalendo,

1046
00:46:14,080 --> 00:46:16,689
giù, sinistra, destra e come un
Controller del Nintendo o Xbox.

1047
00:46:16,689 --> 00:46:18,230
EFA: Ho intenzione di cadere giù dal palco.

1048
00:46:18,230 --> 00:46:20,500
DAVID MALAN: lo farò
stare più o meno qui.

1049
00:46:20,500 --> 00:46:21,991
Ma questo è un rischio.

1050
00:46:21,991 --> 00:46:22,490
OK.

1051
00:46:22,490 --> 00:46:25,690
Quindi, andare avanti e mettere quelli.

1052
00:46:25,690 --> 00:46:29,315
Lasciami andare avanti e
passare alla schermata qui.

1053
00:46:29,315 --> 00:46:30,670
Mi permetta di abbassare le luci.

1054
00:46:30,670 --> 00:46:32,780
E Colton, lasciatemi
venire stare accanto a voi.

1055
00:46:32,780 --> 00:46:35,520
>> Vuoi spiegare qui
con il microfono quello che stiamo facendo?

1056
00:46:35,520 --> 00:46:36,380
Ecco qui.

1057
00:46:36,380 --> 00:46:37,280
>> COLTON: Certo.

1058
00:46:37,280 --> 00:46:39,980
Così adesso siamo
caricando il Oculus,

1059
00:46:39,980 --> 00:46:43,070
Immagino operating-- non funziona
sistema, ma il programma principale, dove

1060
00:46:43,070 --> 00:46:46,630
è possibile accedere a tutti i giochi e
applicazioni che sono presenti nella libreria.

1061
00:46:46,630 --> 00:46:50,060
Così adesso, si dovrebbe dire
toccare il touchpad per iniziare.

1062
00:46:50,060 --> 00:46:53,430
Touchpad sarà il
lato destro della cuffia.

1063
00:46:53,430 --> 00:46:54,569
Quindi, andare avanti e tap--

1064
00:46:54,569 --> 00:46:55,110
EFA: Oh, uomo.

1065
00:46:55,110 --> 00:46:56,443
DAVID MALAN: Sì, ci si va.

1066
00:46:56,443 --> 00:47:00,340

1067
00:47:00,340 --> 00:47:02,460
La qualità Efa è vedere
è molto più elevata qualità.

1068
00:47:02,460 --> 00:47:03,831
Questo è solo il Wi-Fi qui.

1069
00:47:03,831 --> 00:47:05,580
COLTON: Che cosa sei
andando a voler fare

1070
00:47:05,580 --> 00:47:08,350
è guardare verso l'alto
destra dello schermo.

1071
00:47:08,350 --> 00:47:10,420
Sì, quel gioco a destra cima.

1072
00:47:10,420 --> 00:47:14,780
E poi quando si sta selezionando
, toccare di nuovo il touchpad.

1073
00:47:14,780 --> 00:47:17,010
Credo che le sue Dreadhalls.

1074
00:47:17,010 --> 00:47:20,820
E poi qui è A-- qui, lasciare
mi tengo gli occhiali per te.

1075
00:47:20,820 --> 00:47:24,420

1076
00:47:24,420 --> 00:47:25,790
>> Così ho appena dato un controllore.

1077
00:47:25,790 --> 00:47:28,886
Così ora si può controllare il gioco.

1078
00:47:28,886 --> 00:47:30,510
Egli può muoversi e cose del genere.

1079
00:47:30,510 --> 00:47:31,968
Quindi, andare avanti e guardare fino alla cima.

1080
00:47:31,968 --> 00:47:33,640
Dovreste vedere New Game.

1081
00:47:33,640 --> 00:47:36,310
Quindi, andare avanti e si può fare.

1082
00:47:36,310 --> 00:47:39,320
Ora, si dovrebbe essere in grado di controllare
voi stessi con il controller,

1083
00:47:39,320 --> 00:47:43,860
così, non appena
il gioco carica qui.

1084
00:47:43,860 --> 00:47:46,356
Questo potrebbe essere un po 'paura.

1085
00:47:46,356 --> 00:47:47,300
>> EFA: Ora dimmi.

1086
00:47:47,300 --> 00:47:50,132
OK.

1087
00:47:50,132 --> 00:47:51,080
>> COLTON: Va bene.

1088
00:47:51,080 --> 00:47:52,650
Quindi, verificare che sia possibile muoversi.

1089
00:47:52,650 --> 00:47:52,750
OK.

1090
00:47:52,750 --> 00:47:53,583
È possibile muoversi.

1091
00:47:53,583 --> 00:47:54,300
Perfetto.

1092
00:47:54,300 --> 00:47:56,470
Quindi, se si guarda verso il basso, si dispone di una mappa.

1093
00:47:56,470 --> 00:47:58,170
Mappa mostra dove ti trovi.

1094
00:47:58,170 --> 00:47:59,720
Si può guardare intorno alla stanza.

1095
00:47:59,720 --> 00:48:01,440
È completamente può girare intorno.

1096
00:48:01,440 --> 00:48:02,128
Si Esattamente.

1097
00:48:02,128 --> 00:48:02,627
Girati.

1098
00:48:02,627 --> 00:48:05,370

1099
00:48:05,370 --> 00:48:07,125
>> Così guardare alla vostra sinistra.

1100
00:48:07,125 --> 00:48:09,875
Penso che c'è qualcosa che si può
salire su una botte in camera.

1101
00:48:09,875 --> 00:48:11,709
>> EFA: Come faccio ad avere il
mappare fuori strada?

1102
00:48:11,709 --> 00:48:12,375
COLTON: guardare in alto.

1103
00:48:12,375 --> 00:48:12,980
Basta guardare in alto.

1104
00:48:12,980 --> 00:48:13,480
Tutto ok.

1105
00:48:13,480 --> 00:48:13,765
Ci si va.

1106
00:48:13,765 --> 00:48:15,181
Ora andare avanti e basta girare intorno.

1107
00:48:15,181 --> 00:48:21,460

1108
00:48:21,460 --> 00:48:24,620
Così guardare più a sinistra.

1109
00:48:24,620 --> 00:48:25,530
Continuate a muovervi a sinistra.

1110
00:48:25,530 --> 00:48:26,960
Continua a cercare di sinistra.

1111
00:48:26,960 --> 00:48:27,541
Andare avanti.

1112
00:48:27,541 --> 00:48:28,040
Già.

1113
00:48:28,040 --> 00:48:28,720
>> EFA: Oh, in questo modo.

1114
00:48:28,720 --> 00:48:29,261
>> COLTON: Sì.

1115
00:48:29,261 --> 00:48:30,999
Camminare verso con il controllore.

1116
00:48:30,999 --> 00:48:31,540
Ci si va.

1117
00:48:31,540 --> 00:48:32,790
Ora si dovrebbe dire raccoglierlo.

1118
00:48:32,790 --> 00:48:33,360
Ci si va.

1119
00:48:33,360 --> 00:48:34,290
Prendilo.

1120
00:48:34,290 --> 00:48:35,550
Tutto ok.

1121
00:48:35,550 --> 00:48:38,286
Ora, andiamo fuori da questa stanza.

1122
00:48:38,286 --> 00:48:42,209
Vai avanti e raggiungere a piedi quella porta.

1123
00:48:42,209 --> 00:48:45,000
Quindi hai intenzione di hold-- si dice
tenere premuto il tasto per forzarlo aperto.

1124
00:48:45,000 --> 00:48:46,333
Quindi, andare avanti e tenere premuto il pulsante.

1125
00:48:46,333 --> 00:48:48,250
Sì, costringendolo aperto.

1126
00:48:48,250 --> 00:48:48,750
Tutto ok.

1127
00:48:48,750 --> 00:48:49,410
Buon lavoro.

1128
00:48:49,410 --> 00:48:50,826
Ora stiamo uscendo dalla stanza.

1129
00:48:50,826 --> 00:48:56,970

1130
00:48:56,970 --> 00:49:01,366
Quindi ho intenzione di lasciare il resto fino
a voi e vedere cosa si trova fuori.

1131
00:49:01,366 --> 00:49:02,865
EFA: Non ho intenzione in camera oscura.

1132
00:49:02,865 --> 00:49:07,315

1133
00:49:07,315 --> 00:49:07,815
Oh, aspetta.

1134
00:49:07,815 --> 00:49:09,314
Ora devo andare in fondo al corridoio buio?

1135
00:49:09,314 --> 00:49:10,785
OK, io torno [incomprensibile].

1136
00:49:10,785 --> 00:49:15,520

1137
00:49:15,520 --> 00:49:16,270
COLTON: Va bene.

1138
00:49:16,270 --> 00:49:17,560
Alcuni più elementi da raccogliere.

1139
00:49:17,560 --> 00:49:19,370
Sembra alcune monete.

1140
00:49:19,370 --> 00:49:22,242
Questo è un grimaldello.

1141
00:49:22,242 --> 00:49:24,200
Quindi, se si trova un bloccato
porta, è possibile utilizzare quello.

1142
00:49:24,200 --> 00:49:27,755

1143
00:49:27,755 --> 00:49:28,380
Hai paura?

1144
00:49:28,380 --> 00:49:29,371
>> EFA: Non ancora.

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-- sì.

1148
00:49:35,497 --> 00:49:37,330
Basta far finta di essere
in realtà lì.

1149
00:49:37,330 --> 00:49:39,580
E se si accende around--
hai avuto modo di abituarsi ad esso.

1150
00:49:39,580 --> 00:49:40,752
Ma ha senso.

1151
00:49:40,752 --> 00:49:43,960
DAVID MALAN: E mentre continua a Efa
giocare, dato che abbiamo potuto fare tutto il giorno,

1152
00:49:43,960 --> 00:49:45,381
tutti noi possiamo punta di piedi qui fuori.

1153
00:49:45,381 --> 00:49:48,130
Ma abbiamo altre due coppie,
se volete venire e giocare.

1154
00:49:48,130 --> 00:49:49,980
In caso contrario, vedremo
prossimo il Mercoledì.

1155
00:49:49,980 --> 00:49:51,354
Grazie al nostro volontario oggi.

1156
00:49:51,354 --> 00:49:52,101
[Applausi]

1157
00:49:52,101 --> 00:49:54,506

1158
00:49:54,506 --> 00:49:57,392
>> [MUSICA - "SEINFELD TEMA"]

1159
00:49:57,392 --> 00:49:58,222

1160
00:49:58,222 --> 00:50:00,180
SPEAKER 1: Beh, io sono
mettendo un nuovo PL montare su.

1161
00:50:00,180 --> 00:50:01,800
Ho appena cambiato il OLPF--

1162
00:50:01,800 --> 00:50:03,980
>> SPEAKER 2: Che cosa
cosa stai facendo?

1163
00:50:03,980 --> 00:50:07,063
>> SPEAKER 1: Beh, ognuno di these--
qui, ti faccio vedere questa qui.

1164
00:50:07,063 --> 00:50:08,690
Potete vederlo qui.

1165
00:50:08,690 --> 00:50:09,510
>> SPEAKER 3: penso di essere bravo con questi.

1166
00:50:09,510 --> 00:50:09,933
Ne vuoi ancora un po?

1167
00:50:09,933 --> 00:50:11,325
>> SPEAKER 4: No, sto bene. [Incomprensibile].

1168
00:50:11,325 --> 00:50:12,200
>> SPEAKER 3: No, [incomprensibile].

1169
00:50:12,200 --> 00:50:12,700
Avere qualche.

1170
00:50:12,700 --> 00:50:21,165

1171
00:50:21,165 --> 00:50:22,290
SPEAKER 1: Il colore differente.

1172
00:50:22,290 --> 00:50:22,890
SPEAKER 2: OK.

1173
00:50:22,890 --> 00:50:26,690
SPEAKER 1: Quindi in definitiva ciò che
fa è regola il colore di--