1
00:00:00,000 --> 00:00:03,840
>> [RIPRODUZIONE DI BRANI MUSICALI]

2
00:00:03,840 --> 00:00:05,770

3
00:00:05,770 --> 00:00:08,690
>> DOUG LLOYD: Quindi ormai siamo vecchi
pro a programmazione web, giusto?

4
00:00:08,690 --> 00:00:12,140
E abbiamo coperto diversi
lingue in singoli video.

5
00:00:12,140 --> 00:00:14,690
Ed ora facciamo un altro, JavaScript.

6
00:00:14,690 --> 00:00:17,370
>> Prima la buona notizia, JavaScript
è una programmazione moderna

7
00:00:17,370 --> 00:00:21,410
linguaggio molto come PHP il cui
sintassi è derivato da C,

8
00:00:21,410 --> 00:00:22,830
così che è un buon punto di partenza.

9
00:00:22,830 --> 00:00:25,880
Si tratta di vecchio come PHP, così,
essendo stato in giro per circa 20 anni.

10
00:00:25,880 --> 00:00:28,600
E 'stato inventato intorno
contemporaneamente PHP.

11
00:00:28,600 --> 00:00:32,240
E JavaScript è in realtà piuttosto
fondamentale per l'esperienza utente

12
00:00:32,240 --> 00:00:32,740
del web.

13
00:00:32,740 --> 00:00:34,448
In realtà, ci sono
tre lingue che

14
00:00:34,448 --> 00:00:38,480
direi sorta di make up del
l'esperienza degli utenti di interagire

15
00:00:38,480 --> 00:00:42,650
con il sito web, html,
CSS e JavaScript.

16
00:00:42,650 --> 00:00:46,030
E così ora parliamo un
po 'di JavaScript.

17
00:00:46,030 --> 00:00:50,301
>> La cattiva notizia, però, con JavaScript è
che fissa un sacco di regole per sé,

18
00:00:50,301 --> 00:00:51,300
e poi li rompe.

19
00:00:51,300 --> 00:00:54,010
E JavaScript può effettivamente essere
tipo di sfida a imparare,

20
00:00:54,010 --> 00:00:57,000
perché è a differenza di C e
PHP, che sono molto strutturati

21
00:00:57,000 --> 00:01:00,270
e hanno regole molto rigide
per come le cose possono funzionare.

22
00:01:00,270 --> 00:01:03,690
JavaScript è tipo
di ottenuto così flessibile

23
00:01:03,690 --> 00:01:06,650
che forse le cose non stanno andando a
lavorare il modo in cui li aspettiamo a,

24
00:01:06,650 --> 00:01:09,830
e forse non possiamo davvero imparare
il nostro primo linguaggio di programmazione

25
00:01:09,830 --> 00:01:10,769
come JavaScript.

26
00:01:10,769 --> 00:01:12,810
Così forse perché non lo fa
porsi tutte le regole,

27
00:01:12,810 --> 00:01:15,754
e in realtà non
far rispettare le buone abitudini di codifica.

28
00:01:15,754 --> 00:01:18,170
Ma ora abbiamo sviluppato si spera
alcune abitudini buone di codifica,

29
00:01:18,170 --> 00:01:21,470
e così possiamo iniziare a incursione
in Javascript un po '.

30
00:01:21,470 --> 00:01:25,750
>> Per scrivere JavaScript, simile ad apertura
un file C con un punto di estensione C

31
00:01:25,750 --> 00:01:29,770
o un file PHP con estensione puntino PHP,
tutto quello che dobbiamo fare è aprire un file

32
00:01:29,770 --> 00:01:31,764
con estensione js il punto.

33
00:01:31,764 --> 00:01:34,430
Non abbiamo bisogno di avere alcuna speciale
delimitatori come abbiamo fatto in PHP.

34
00:01:34,430 --> 00:01:36,750
Quella sorta di angolo
Staffa punto interrogativo PHP

35
00:01:36,750 --> 00:01:40,300
che siamo abituati a questo, il modo in cui
diciamo il nostro browser che quello che abbiamo è

36
00:01:40,300 --> 00:01:43,502
JavaScript è includendo
in un tag HTML,

37
00:01:43,502 --> 00:01:46,210
e vedremo un po 'di
come farlo in un attimo.

38
00:01:46,210 --> 00:01:48,210
>> L'altra cosa che rende
JavaScript diverso,

39
00:01:48,210 --> 00:01:50,580
però, è che funziona lato client.

40
00:01:50,580 --> 00:01:53,430
Così ricordare con PHP che
non avremmo mai potuto vedere veramente

41
00:01:53,430 --> 00:01:57,041
il PHP che ha sottolineato un sito web.

42
00:01:57,041 --> 00:01:59,040
Se mai visto The
sorgente della pagina, abbiamo solo sarebbe

43
00:01:59,040 --> 00:02:02,830
vedere l'html che era
generato da che PHP.

44
00:02:02,830 --> 00:02:04,900
Ma corre JavaScript lato client.

45
00:02:04,900 --> 00:02:06,710
Il tuo JavaScript eseguito sul computer.

46
00:02:06,710 --> 00:02:09,050
Ed è per questo che si può fare
cose come aggiungere bloccanti.

47
00:02:09,050 --> 00:02:09,550
Destra?

48
00:02:09,550 --> 00:02:12,704
Blocco pubblicità è fatta solitamente da
uccidendo tutti i JavaScript

49
00:02:12,704 --> 00:02:14,370
che è in esecuzione su un particolare sito web.

50
00:02:14,370 --> 00:02:19,000
E perché avrebbe dovuto
eseguito sul lato client della macchina,

51
00:02:19,000 --> 00:02:21,910
si può solo fermare il
JavaScript per l'esecuzione di tutto.

52
00:02:21,910 --> 00:02:27,030
Ciò significa anche che quando si utilizza
un sito web che include JavaScript,

53
00:02:27,030 --> 00:02:32,450
è necessario inviare la sorgente JavaScript
codice come parte della vostra risposta HTTP

54
00:02:32,450 --> 00:02:34,159
al client quando ne facciano richiesta.

55
00:02:34,159 --> 00:02:35,950
E così non potrebbe
vuole utilizzare JavaScript

56
00:02:35,950 --> 00:02:38,395
a fare cose veramente sensibili
come le informazioni che passano

57
00:02:38,395 --> 00:02:41,020
sulle password degli utenti e indietro
fuori, perché sono in realtà

58
00:02:41,020 --> 00:02:45,610
andando a ricevere tutto il codice sorgente,
non solo il codice html che viene generato,

59
00:02:45,610 --> 00:02:49,030
come sarebbe il caso con dire PHP.

60
00:02:49,030 --> 00:02:51,620
>> Quindi, come possiamo includere JavaScript
nel nostro html per iniziare?

61
00:02:51,620 --> 00:02:54,520
Ebbene, simile a CSS, in realtà,
è una sorta di come lo facciamo qui.

62
00:02:54,520 --> 00:02:56,190
Con i CSS abbiamo tag di stile.

63
00:02:56,190 --> 00:03:00,760
E dentro di quei tag di stile,
possiamo definire un foglio di stile CSS.

64
00:03:00,760 --> 00:03:03,450
Allo stesso modo con JavaScript
possiamo aprire tag di script,

65
00:03:03,450 --> 00:03:06,660
un altro tag html non abbiamo fatto
parlare nel nostro video html,

66
00:03:06,660 --> 00:03:09,720
e scrivere JavaScript
tra questi tag script.

67
00:03:09,720 --> 00:03:13,960
Anche se, come CSS, abbiamo
potrebbe collegare in esterno file CSS

68
00:03:13,960 --> 00:03:15,900
e tirare nel nostro programma in questo modo.

69
00:03:15,900 --> 00:03:18,280
Con i CSS possiamo anche,
mi scusi, con JavaScript

70
00:03:18,280 --> 00:03:23,240
possiamo anche specificare l'origine
attributo del tag script

71
00:03:23,240 --> 00:03:25,720
di collegare in JavaScript
separatamente, in modo da non fare

72
00:03:25,720 --> 00:03:27,680
sono a scrivere a
tra i tag di script, abbiamo

73
00:03:27,680 --> 00:03:29,600
può collegare in uso
che tag script pure.

74
00:03:29,600 --> 00:03:33,230
E proprio come con il caso in cui con i CSS
abbiamo suggerito che probabilmente era

75
00:03:33,230 --> 00:03:36,090
nel vostro interesse di scrivere
il CSS in un file separato nel caso in cui

76
00:03:36,090 --> 00:03:38,500
avete bisogno di cambiare,
allo stesso modo facciamo noi consigliamo

77
00:03:38,500 --> 00:03:40,720
che si scrive il tuo
JavaScript in file separati

78
00:03:40,720 --> 00:03:45,460
e utilizzare la sorgente tag script
attribuire a legare il vostro JavaScript

79
00:03:45,460 --> 00:03:49,520
nel tuo html, la vostra pagina web.

80
00:03:49,520 --> 00:03:52,610
>> Così variabili JavaScript, faremo
iniziare a parlare la sintassi qui.

81
00:03:52,610 --> 00:03:53,600
E andremo attraverso
questo tipo di rapidamente,

82
00:03:53,600 --> 00:03:56,640
perché abbiamo fatto questo in PHP, in modo da
questo dovrebbe essere abbastanza familiare.

83
00:03:56,640 --> 00:03:59,490
Così variabili in JavaScript sono
molto simile a PHP variabili.

84
00:03:59,490 --> 00:04:03,270
Non c'è indicatore di tipo, e
quando si introduce una variabile,

85
00:04:03,270 --> 00:04:05,070
si prefisso con la parola chiave var.

86
00:04:05,070 --> 00:04:07,750
In PHP faremmo qualcosa
in questo modo, il simbolo del dollaro x.

87
00:04:07,750 --> 00:04:09,950
Ecco come abbiamo indicato
una variabile, ma no,

88
00:04:09,950 --> 00:04:12,060
non parlare del tipo
della variabile affatto.

89
00:04:12,060 --> 00:04:15,124
Vorremmo dire qualcosa di simile
dollaro segno x è uguale a 44 in PHP.

90
00:04:15,124 --> 00:04:17,040
Se stavamo facendo la
stessa cosa in JavaScript,

91
00:04:17,040 --> 00:04:19,589
diremmo var x è uguale a 44.

92
00:04:19,589 --> 00:04:22,780
Così var è una sorta di nostro modo
di introdurre una variabile.

93
00:04:22,780 --> 00:04:26,850
Questo è forse un po 'più intuitivo
che solo variabili simbolo del dollaro.

94
00:04:26,850 --> 00:04:29,080
>> Anche in questo caso, dal momento che non c'è
tipi di dati, potremmo farlo

95
00:04:29,080 --> 00:04:34,490
con qualsiasi tipo di dati, stringhe,
qualsiasi altra cosa sarebbe tutto var.

96
00:04:34,490 --> 00:04:37,260
Condizionali, tutti i nostri
vecchi amici di C e PHP

97
00:04:37,260 --> 00:04:41,640
sono ancora disponibili, quindi abbiamo se,
else if, else, switch e domanda

98
00:04:41,640 --> 00:04:42,240
colon contrassegno.

99
00:04:42,240 --> 00:04:45,890
Interruttore rimanendo flessibile come
era in PHP, ma tutti questi sei

100
00:04:45,890 --> 00:04:46,930
familiarità con ormai.

101
00:04:46,930 --> 00:04:49,900
E allo stesso modo con i loop sono
i favoriti anziani di mentre,

102
00:04:49,900 --> 00:04:52,700
fare mentre, e per ancora a nostra disposizione.

103
00:04:52,700 --> 00:04:55,880
Quindi già sappiamo molto della
base JavaScript sorta di fondamenti

104
00:04:55,880 --> 00:05:01,800
proprio in virtù di avere un bel po '
di conoscenze ora su C e PHP.

105
00:05:01,800 --> 00:05:03,670
>> Che dire funzioni in JavaScript?

106
00:05:03,670 --> 00:05:08,199
Beh, simile a PHP ogni funzione è
introdotta con la parola chiave function.

107
00:05:08,199 --> 00:05:10,740
Tu dici la funzione, e poi si
cominciare a definire la funzione.

108
00:05:10,740 --> 00:05:12,531
Che cosa è un po 'diverso
su JavaScript,

109
00:05:12,531 --> 00:05:15,700
se è la possibilità di avere
quello che chiama una funzione anonima.

110
00:05:15,700 --> 00:05:18,880
Così si può definire funzioni
che non hanno un nome.

111
00:05:18,880 --> 00:05:21,222
Questo è qualcosa che
in realtà non ha visto prima.

112
00:05:21,222 --> 00:05:23,430
Noi faremo davvero usare il concetto
di una funzione anonima

113
00:05:23,430 --> 00:05:27,880
un po 'più avanti in questo
video, perché sarò

114
00:05:27,880 --> 00:05:31,530
rendere un po 'più di senso in un contesto
quando lo vediamo in una situazione particolare

115
00:05:31,530 --> 00:05:33,120
che ho Crafted qui.

116
00:05:33,120 --> 00:05:35,710
Ma facciamo solo un'occhiata
a ciò che un semplice JavaScript

117
00:05:35,710 --> 00:05:37,850
funzione potrebbe essere simile.

118
00:05:37,850 --> 00:05:40,610
>> Così sono andato avanti e
aperto il mio CS50 IDE

119
00:05:40,610 --> 00:05:43,690
e ho già eseguito Apache
per iniziare la mia corsa di server.

120
00:05:43,690 --> 00:05:46,800
E ho questo file
Aprire chiamato home.html.

121
00:05:46,800 --> 00:05:48,330
E io lo zoom in un po 'qui.

122
00:05:48,330 --> 00:05:52,090
E in fondo, si può vedere il
Home.html è solo un mucchio di pulsanti.

123
00:05:52,090 --> 00:05:55,291
E sto sostenendo in alto qui
che questa è la sezione JavaScript

124
00:05:55,291 --> 00:05:55,790
materiali.

125
00:05:55,790 --> 00:05:59,490
Quindi c'è un sacco di pulsanti qui,
ma che cosa questi pulsanti effettivamente fare?

126
00:05:59,490 --> 00:06:03,662
>> Beh, ci dirigeremo verso il mio IED,
e ho home.html aprire qui.

127
00:06:03,662 --> 00:06:05,620
All'inizio,
ecco dove sto collegando

128
00:06:05,620 --> 00:06:07,500
in tutti i miei file sorgente JavaScript.

129
00:06:07,500 --> 00:06:08,000
Destra?

130
00:06:08,000 --> 00:06:12,440
Così ho anonymous.js, clock.js,
Sto utilizzando l'attributo di origine

131
00:06:12,440 --> 00:06:14,440
del tag script per collegare nel file.

132
00:06:14,440 --> 00:06:18,660
Qualsiasi Quindi io non ho scritto
JavaScript direttamente in questo file,

133
00:06:18,660 --> 00:06:21,790
ma ho tirato in tutta la
JavaScript ho scritto separatamente.

134
00:06:21,790 --> 00:06:24,540
E se noi scorriamo qui, questo
dovrebbero tutti guardare un po 'familiare

135
00:06:24,540 --> 00:06:27,090
con un po 'di nuova sintassi.

136
00:06:27,090 --> 00:06:32,655
Abbiamo qui tag di intestazione per
funzioni e poi un pulsante.

137
00:06:32,655 --> 00:06:35,530
Ho un ingresso che è un pulsante di tipo,
ea quanto pare quando lo scatto,

138
00:06:35,530 --> 00:06:38,130
Vado a chiamare qualcuno
funzione di data avviso.

139
00:06:38,130 --> 00:06:41,792
Ed è così che possiamo sorta di mescolare
un po 'di JavaScript e HTML.

140
00:06:41,792 --> 00:06:44,500
Essi in realtà giocano abbastanza bene
insieme, e così apparentemente quando

141
00:06:44,500 --> 00:06:48,730
Clicco su questo pulsante, ho intenzione
per chiamare una data funzione di allarme.

142
00:06:48,730 --> 00:06:53,660
E allo stesso modo ho ho definito i comportamenti
per tutti gli altri pulsanti che

143
00:06:53,660 --> 00:06:56,440
sono su quella pagina home.html,
che ci continuiamo a tornare

144
00:06:56,440 --> 00:06:59,172
a nel corso di questo video.

145
00:06:59,172 --> 00:07:00,880
Ma andiamo indietro
qui e date un'occhiata

146
00:07:00,880 --> 00:07:03,850
a clock.js, che è la
File JavaScript che ho

147
00:07:03,850 --> 00:07:07,370
ha scritto che ha questa prima funzione
stiamo andando a dare un'occhiata a.

148
00:07:07,370 --> 00:07:11,630
Come potete vedere, comincio il mio Javascript
funzionare con la funzione di parola chiave,

149
00:07:11,630 --> 00:07:14,560
e ho dato questo uno un
nome, si chiama data per la segnalazione.

150
00:07:14,560 --> 00:07:18,710
All'interno di lì, mi pare creare un
nuova variabile locale denominata data corrente.

151
00:07:18,710 --> 00:07:21,500
E ho intenzione di assegnare
pari ad una nuova data.

152
00:07:21,500 --> 00:07:24,430
E potremmo entrare in un sacco di
dettagli su ciò che una data è,

153
00:07:24,430 --> 00:07:27,060
e davvero JavaScript è così
grande che non possiamo, eventualmente,

154
00:07:27,060 --> 00:07:28,330
coprire tutto in un video.

155
00:07:28,330 --> 00:07:32,220
Ma è sufficiente dire, questo sta andando
per tornare a me un elemento dati

156
00:07:32,220 --> 00:07:35,470
incapsula la data e l'ora correnti.

157
00:07:35,470 --> 00:07:39,100
Sto memorizzazione che in una variabile che sono
a quanto pare sta per avvisare data corrente.

158
00:07:39,100 --> 00:07:41,300
>> Ebbene, che cosa fa allarme
corrente sguardo data così?

159
00:07:41,300 --> 00:07:46,460
Diamo uno sguardo al file stesso
indietro sopra nella finestra del browser.

160
00:07:46,460 --> 00:07:49,551
Quindi, di nuovo, questo è il tasto che
sono legato a questa funzione chiamata.

161
00:07:49,551 --> 00:07:51,800
E clicco lì e
guardare quello che ha fatto, è avvisato.

162
00:07:51,800 --> 00:07:56,140
E 'spuntato questa sorta di scatola raccontare
me che l'ora attuale è, a quanto pare

163
00:07:56,140 --> 00:07:59,370
è 4 novembre a
10:43:43 del mattino.

164
00:07:59,370 --> 00:08:02,345
E se clicco di nuovo, ora
si tratta di un paio di secondi più tardi, giusto?

165
00:08:02,345 --> 00:08:03,720
Ecco, questo è tutto questa funzione fa.

166
00:08:03,720 --> 00:08:07,670
Quando clicco su questo pulsante, si
si apre un messaggio di avviso a me.

167
00:08:07,670 --> 00:08:13,806

168
00:08:13,806 --> 00:08:15,690
Quindi non c'è davvero
troppo da funzioni

169
00:08:15,690 --> 00:08:19,110
è diverso da PHP,
solo un po 'di nuova sintassi

170
00:08:19,110 --> 00:08:22,500
che viene fornito con il lavoro con JavaScript.

171
00:08:22,500 --> 00:08:24,650
>> Gli array in JavaScript sono
abbastanza semplice.

172
00:08:24,650 --> 00:08:27,200
Per dichiarare una matrice, si utilizza
la sintassi parentesi quadre

173
00:08:27,200 --> 00:08:30,090
che siamo a conoscenza di PHP.

174
00:08:30,090 --> 00:08:33,432
E simile a PHP, abbiamo
anche può mescolare i tipi di dati.

175
00:08:33,432 --> 00:08:35,140
Quindi questa matrice, sia
di queste matrici sarebbe

176
00:08:35,140 --> 00:08:36,960
essere perfettamente legittimo JavaScript.

177
00:08:36,960 --> 00:08:42,500
Uno che è tutti i numeri interi, e uno che
si confondono diversi tipi di dati.

178
00:08:42,500 --> 00:08:45,020
>> Che cosa è qualcosa di molto diverso
in JavaScript, però?

179
00:08:45,020 --> 00:08:47,020
Questa è l'idea di un oggetto.

180
00:08:47,020 --> 00:08:50,240
Così forse avete sentito parlare di
programmazione orientata agli oggetti.

181
00:08:50,240 --> 00:08:53,370
Non facciamo un sacco di esso in CS50,
ma faremo un po 'di esso

182
00:08:53,370 --> 00:08:55,670
qui nel contesto di JavaScript.

183
00:08:55,670 --> 00:08:59,100
Ora JavaScript ha la capacità di
comportarsi come una programmazione orientata agli oggetti

184
00:08:59,100 --> 00:09:02,615
lingua, ma non è di per sé
esclusivamente un oggetto orientato

185
00:09:02,615 --> 00:09:03,490
linguaggio di programmazione.

186
00:09:03,490 --> 00:09:05,281
E questo viene di nuovo
torna sul motivo per cui ho detto,

187
00:09:05,281 --> 00:09:10,610
può essere molto difficile da imparare
JavaScript come la tua prima programmazione

188
00:09:10,610 --> 00:09:13,890
lingua, perché non
davvero adattarsi a un particolare paradigma.

189
00:09:13,890 --> 00:09:16,430
>> C invece è un
linguaggio di programmazione funzionale.

190
00:09:16,430 --> 00:09:22,270
Se vogliamo, le funzioni sono
una sorta di grande uomo padrone, giusto?

191
00:09:22,270 --> 00:09:24,410
Loro impongono quello
succede tutto il resto.

192
00:09:24,410 --> 00:09:26,600
Vogliamo cambiare le variabili,
chiamiamo funzioni.

193
00:09:26,600 --> 00:09:28,220
Facciamo le cose per funzioni.

194
00:09:28,220 --> 00:09:31,250
Oggetti invece, in un
oggetto linguaggio orientato,

195
00:09:31,250 --> 00:09:35,937
oggetti sorta di diventare la star e
funzioni diventano una sorta di secondario.

196
00:09:35,937 --> 00:09:38,270
Ma ciò che è un oggetto, cosa
è questa nozione di un oggetto?

197
00:09:38,270 --> 00:09:40,880
Beh, se ti aiuta, pensare
su di esso in un primo tipo

198
00:09:40,880 --> 00:09:44,540
di come una struttura C o una struct
che abbiamo imparato a conoscere prima.

199
00:09:44,540 --> 00:09:47,430
In C, una struttura contiene
un certo numero di campi,

200
00:09:47,430 --> 00:09:51,174
e forse ora potrebbe iniziare a
chiamare queste proprietà campi.

201
00:09:51,174 --> 00:09:53,590
Ma le proprietà mai
stare da soli, giusto?

202
00:09:53,590 --> 00:09:56,410
Se definisco una struttura per una macchina
in questo modo con i seguenti due

203
00:09:56,410 --> 00:10:00,750
campi o proprietà, uno un
intero per l'anno della vettura

204
00:10:00,750 --> 00:10:04,290
e un altro un carattere 10
stringa per il modello della vettura,

205
00:10:04,290 --> 00:10:07,150
Posso dire una cosa del genere,
Posso dichiarare una nuova variabile

206
00:10:07,150 --> 00:10:10,080
di tipo auto struct herbie.

207
00:10:10,080 --> 00:10:13,730
E poi posso dire qualcosa
come uguale herbie.year 1963,

208
00:10:13,730 --> 00:10:15,850
e herbie.model uguale Maggiolino.

209
00:10:15,850 --> 00:10:17,000
Va bene.

210
00:10:17,000 --> 00:10:19,680
Sto utilizzando i campi nella
contesto della struttura,

211
00:10:19,680 --> 00:10:22,290
ma potrei mai solo
dire qualcosa del genere.

212
00:10:22,290 --> 00:10:22,790
Destra?

213
00:10:22,790 --> 00:10:26,836
Non è possibile utilizzare il nome del campo
indipendente dalla struttura.

214
00:10:26,836 --> 00:10:28,210
E 'una sorta di una cosa fondamentale.

215
00:10:28,210 --> 00:10:32,990
>> Così campi essere
fondamentale per strutture C

216
00:10:32,990 --> 00:10:39,050
sono molto simili alle proprietà essere
fondamentale per oggetti JavaScript.

217
00:10:39,050 --> 00:10:42,080
Ma ciò che li rende
particolarmente interessante

218
00:10:42,080 --> 00:10:46,230
è che gli oggetti possono anche avere quello
sono chiamati metodi, che sono davvero

219
00:10:46,230 --> 00:10:50,730
solo una parola di fantasia per le funzioni che
sono inerenti all'oggetto pure.

220
00:10:50,730 --> 00:10:55,340
Quindi è una funzione che può essere solo
chiamato nel contesto di un oggetto.

221
00:10:55,340 --> 00:10:59,200
Solo un oggetto che ha definito
questa funzione all'interno del suo,

222
00:10:59,200 --> 00:11:02,020
se ci pensate un
struct, la funzione

223
00:11:02,020 --> 00:11:05,720
è definito all'interno di quelle che definiscono
parentesi graffe della struttura.

224
00:11:05,720 --> 00:11:07,980
Quindi vuol dire solo qualcosa
alla struttura.

225
00:11:07,980 --> 00:11:10,960
E questo è una sorta di quello che stiamo facendo
qui con oggetti e metodi.

226
00:11:10,960 --> 00:11:13,580
E 'fondamentalmente come siamo
definire una funzione che

227
00:11:13,580 --> 00:11:16,670
ha senso solo su un
particolare oggetto, e così noi

228
00:11:16,670 --> 00:11:19,440
chiamare che un metodo dell'oggetto.

229
00:11:19,440 --> 00:11:23,180
E non possiamo mai chiamarlo
funzione indipendente dell'oggetto,

230
00:11:23,180 --> 00:11:29,260
proprio come non possiamo dire anno o modello
indipendente dalla struct in C.

231
00:11:29,260 --> 00:11:32,300
>> Programmazione così funzionale
paradigmi sembrano qualcosa di simile.

232
00:11:32,300 --> 00:11:35,450
Funzione e poi quando si passa
nell'oggetto come parametro.

233
00:11:35,450 --> 00:11:38,650
In una programmazione orientata agli oggetti
lingue, questo tipo di ottiene

234
00:11:38,650 --> 00:11:43,464
flipped, e vorremmo pensare
così, object.function.

235
00:11:43,464 --> 00:11:45,380
Quindi una sorta di quel puntino
operatore di nuovo che implica

236
00:11:45,380 --> 00:11:49,540
che si tratta di una sorta di proprietà
o attributo dell'oggetto stesso.

237
00:11:49,540 --> 00:11:53,240
Ma questo è ciò che un oggetto
linguaggio di programmazione orientato

238
00:11:53,240 --> 00:11:57,150
potrebbe fare per rendere una funzione
chiamare un metodo, di nuovo, che

239
00:11:57,150 --> 00:12:00,260
è solo una parola speciale per una funzione
che è inerente ad un oggetto.

240
00:12:00,260 --> 00:12:03,440
Questo è ciò che
sintassi potrebbe essere simile.

241
00:12:03,440 --> 00:12:09,360
E così inizieremo a vedere alcuni dei
ciò nel contesto di JavaScript.

242
00:12:09,360 --> 00:12:12,470
>> Si può anche pensare ad un oggetto
un po 'come un array associativo,

243
00:12:12,470 --> 00:12:14,160
che noi siamo a conoscenza di PHP.

244
00:12:14,160 --> 00:12:17,720
Ricorda un array associativo consente
noi avere coppie di valori chiave, invece

245
00:12:17,720 --> 00:12:23,040
di avere indici 0, uno, due, tre,
e così via, come siamo abituati a da C

246
00:12:23,040 --> 00:12:23,940
array.

247
00:12:23,940 --> 00:12:27,472
Array associativi possono mappare
parole, come nel video PHP,

248
00:12:27,472 --> 00:12:29,180
stavamo parlando
guarnizioni di pizze.

249
00:12:29,180 --> 00:12:31,180
E così abbiamo avuto un array
chiamati pizze, e noi

250
00:12:31,180 --> 00:12:36,670
formaggio aveva era una chiave e $ 8.99 era la
valore, e quindi peperoni è stata una chiave,

251
00:12:36,670 --> 00:12:39,190
$ 9.99 era un valore, e così via.

252
00:12:39,190 --> 00:12:43,300
E così possiamo anche pensare ad un
oggetto sorta di simile a un associativa

253
00:12:43,300 --> 00:12:43,840
array.

254
00:12:43,840 --> 00:12:47,020
E così questa sintassi qui
avrebbe creato un nuovo oggetto

255
00:12:47,020 --> 00:12:50,950
chiamato herbie con due
proprietà al suo interno.

256
00:12:50,950 --> 00:12:57,310
Anno, che è assegnato il valore 1963,
e modello, che viene assegnata la stringa

257
00:12:57,310 --> 00:12:58,140
Maggiolino.

258
00:12:58,140 --> 00:13:01,770
>> E notare qui che sto usando
virgolette singole in JavaScript.

259
00:13:01,770 --> 00:13:05,570
È possibile utilizzare le virgolette singole o doppie
quando si parla di stringhe.

260
00:13:05,570 --> 00:13:07,772
E 'solo convenzionalmente
il caso che la maggior parte delle volte

261
00:13:07,772 --> 00:13:10,230
quando si sta scrivendo JavaScript,
si utilizza solo apici.

262
00:13:10,230 --> 00:13:15,050
Ma potrei usare le virgolette qui, e
che sarebbe perfettamente bene pure.

263
00:13:15,050 --> 00:13:17,470
>> Quindi ricorda come in
PHP abbiamo avuto questa idea

264
00:13:17,470 --> 00:13:22,730
di una per ogni ciclo che ci permetterebbe
per scorrere tutto il valore chiave

265
00:13:22,730 --> 00:13:25,270
coppie di associativo
array, perché noi

266
00:13:25,270 --> 00:13:29,050
non ha avuto questa capacità di iterare
attraverso 0, uno, due, tre, quattro,

267
00:13:29,050 --> 00:13:30,710
Eccetera?

268
00:13:30,710 --> 00:13:35,010
JavaScript ha qualcosa di molto simile,
ma non è chiamato una per ogni ciclo,

269
00:13:35,010 --> 00:13:38,960
si chiama per in loop.

270
00:13:38,960 --> 00:13:42,890
Quindi, se ho detto a me come
questo, per la chiave var in oggetto,

271
00:13:42,890 --> 00:13:48,670
che è una sorta di simile a dire
per ogni cosa come qualcosa.

272
00:13:48,670 --> 00:13:53,850
Ma tutto quello che sto facendo qui è l'iterazione
attraverso tutte le chiavi del mio oggetto.

273
00:13:53,850 --> 00:13:56,070
E all'interno del riccio
bretelle lì, vorrei

274
00:13:56,070 --> 00:14:03,410
usare oggetto chiave parentesi quadre per riferirsi
al valore in quella posizione chiave.

275
00:14:03,410 --> 00:14:05,400
>> In alternativa, c'è
anche un altro approccio.

276
00:14:05,400 --> 00:14:10,880
Se ho appena interessa solo il
I valori, posso dire per la chiave di oggetto,

277
00:14:10,880 --> 00:14:12,360
e basta usare il tasto dentro.

278
00:14:12,360 --> 00:14:17,240
Così per la chiave var in oggetto, ho
per usare le parentesi quadre di oggetti

279
00:14:17,240 --> 00:14:19,340
chiave all'interno del ciclo.

280
00:14:19,340 --> 00:14:24,580
Per chiave var di oggetto, posso
basta utilizzare il tasto all'interno del ciclo,

281
00:14:24,580 --> 00:14:29,040
perché io sono solo specificamente
parlando dei valori lì.

282
00:14:29,040 --> 00:14:32,630
>> Quindi cerchiamo di forse prendere un
guardare la differenza

283
00:14:32,630 --> 00:14:35,670
solo per mostrare velocemente
la differenza tra quattro

284
00:14:35,670 --> 00:14:40,730
in e di un ben preciso
array, che abbiamo qui, settimana array.

285
00:14:40,730 --> 00:14:43,616
Quindi devo trovare un nuovo array
che ho riempito con sette corde,

286
00:14:43,616 --> 00:14:46,240
Lunedì martedì mercoledì,
Giovedi, Venerdì, Sabato, Domenica.

287
00:14:46,240 --> 00:14:50,530
E voglio ora iterare
attraverso questa matrice,

288
00:14:50,530 --> 00:14:53,090
stampare alcune informazioni.

289
00:14:53,090 --> 00:14:58,780
Se io uso una per in loop
per stampare le informazioni,

290
00:14:58,780 --> 00:15:00,710
cosa pensi che io vado a prendere?

291
00:15:00,710 --> 00:15:01,710
Bene, diamo un'occhiata.

292
00:15:01,710 --> 00:15:05,300
E prima di saltare su
alla mia finestra del browser,

293
00:15:05,300 --> 00:15:08,090
è sufficiente sapere che
console.log è una sorta di uno

294
00:15:08,090 --> 00:15:10,630
modo di fare un F stampa in JavaScript.

295
00:15:10,630 --> 00:15:12,040
Ma qual è la console?

296
00:15:12,040 --> 00:15:14,940
Beh, questo è quello che stiamo andando
di andare a dare un'occhiata a questo momento.

297
00:15:14,940 --> 00:15:16,850
>> Ok, siamo di nuovo qui
nella mia finestra del browser,

298
00:15:16,850 --> 00:15:19,410
e ho intenzione di aprire
i miei strumenti di sviluppo.

299
00:15:19,410 --> 00:15:22,290
Ancora una volta, sto solo colpire F12
per aprire strumenti di sviluppo.

300
00:15:22,290 --> 00:15:25,670
E notare che qui al
top Ho scelto console.

301
00:15:25,670 --> 00:15:28,480
Quindi questo è il concetto
di una console sviluppatore,

302
00:15:28,480 --> 00:15:30,500
e ci permetterà di
stampare le informazioni fuori,

303
00:15:30,500 --> 00:15:33,000
un po 'come il terminale, ma
come si vedrà un po 'più tardi,

304
00:15:33,000 --> 00:15:37,720
possiamo anche digitare le informazioni in
di interagire con il nostro sito web.

305
00:15:37,720 --> 00:15:42,320
Io vado per ingrandire un po 'qui,
e sto andando ora cliccare su per in prova.

306
00:15:42,320 --> 00:15:45,230
E quattro in test-- Non ho intenzione di
vi mostrerà il codice per esso in questo momento,

307
00:15:45,230 --> 00:15:47,479
ma si otterrà se si
scaricare il codice sorgente che

308
00:15:47,479 --> 00:15:50,380
è associata a questo video--
è solo che per in loop

309
00:15:50,380 --> 00:15:52,610
che abbiamo visto solo un
secondo fa sulla diapositiva.

310
00:15:52,610 --> 00:15:54,810
>> Così sto andando click che
pulsante, e qui,

311
00:15:54,810 --> 00:15:58,440
ecco cosa ha stampato nel
console, 0, uno, due, tre, quattro, cinque,

312
00:15:58,440 --> 00:15:58,940
sei.

313
00:15:58,940 --> 00:16:02,490
Non ho fatto stampare le informazioni
all'interno di quelle posizioni di array,

314
00:16:02,490 --> 00:16:05,180
perché ho usato una per in loop.

315
00:16:05,180 --> 00:16:10,670
E all'interno del corpo del ciclo, I
appena stampati chiave non chiave obiettare.

316
00:16:10,670 --> 00:16:18,600
Ma se io ora chiaro la mia console, e io
passare per dei test e quattro di prova

317
00:16:18,600 --> 00:16:22,500
Io dico che uso per di ciclo
invece e stampare chiave,

318
00:16:22,500 --> 00:16:28,079
se clicco che, ora sto ricevendo il
elementi reali all'interno del mio oggetto

319
00:16:28,079 --> 00:16:29,120
o la mia matrice in questo caso.

320
00:16:29,120 --> 00:16:31,760
La mia serie di giorni della settimana.

321
00:16:31,760 --> 00:16:33,480
Ho stampato Lunedi,
Martedi mercoledì.

322
00:16:33,480 --> 00:16:36,930
Ecco, questo è la differenza tra
una per in loop, che stampa

323
00:16:36,930 --> 00:16:43,410
solo i tasti se si utilizza solo tasto
all'interno del corpo del ciclo,

324
00:16:43,410 --> 00:16:46,850
e una per di ciclo, che stampa
i valori se si utilizza solo

325
00:16:46,850 --> 00:16:48,870
chiave all'interno del corpo del ciclo.

326
00:16:48,870 --> 00:16:52,380
>> Va bene, come facciamo ora cominciamo a
concatenare le stringhe e forse mischiare

327
00:16:52,380 --> 00:16:57,220
alcune variabili con interpolazione
come se fossimo in grado di fare in PHP?

328
00:16:57,220 --> 00:16:59,410
Beh, siamo abbastanza familiare
con questo da PHP.

329
00:16:59,410 --> 00:17:04,109
Questo è come vorremmo farlo utilizzando il
operatore punto per concatenare le stringhe.

330
00:17:04,109 --> 00:17:06,260
In JavaScript, però,
che usiamo qualcosa

331
00:17:06,260 --> 00:17:09,290
chiamato l'operatore più che
è forse anche un po 'di più

332
00:17:09,290 --> 00:17:10,470
intuitivo, giusto?

333
00:17:10,470 --> 00:17:12,609
Stiamo aggiungendo un gruppo
di stringhe.

334
00:17:12,609 --> 00:17:14,520
Così torniamo
sopra e vedere che cosa questo

335
00:17:14,520 --> 00:17:18,693
stamperà se stiamo cercando di stampare
tutte le informazioni in settimana array.

336
00:17:18,693 --> 00:17:20,859
Va bene, allora sotto qui
sotto concatenazione di stringhe,

337
00:17:20,859 --> 00:17:24,822
Ho due opzioni, costruzione di stringa
V1 e quindi costruzione di stringa V2.

338
00:17:24,822 --> 00:17:26,530
E vedremo perché abbiamo
bisogno di V2 in un secondo.

339
00:17:26,530 --> 00:17:28,610
Ma sarò clicco su
stringa di costruzione V1, che

340
00:17:28,610 --> 00:17:30,360
è il codice che eravamo
basta dare un'occhiata a,

341
00:17:30,360 --> 00:17:32,980
il console.log con tutti i vantaggi.

342
00:17:32,980 --> 00:17:35,910
Vediamo se questa stampa
che cosa ci aspettiamo.

343
00:17:35,910 --> 00:17:39,939
>> Lunedi è giorno numero 01 della settimana,
Martedì è il giorno n 11 della settimana.

344
00:17:39,939 --> 00:17:41,730
Beh, quello che stavo cercando
fare c'era arrivare

345
00:17:41,730 --> 00:17:46,280
per stampare Lunedi è il giorno n
uno, Martedì è il numero di due giorni.

346
00:17:46,280 --> 00:17:50,140
Ma sembra come se fossi
stampa sempre fuori uno.

347
00:17:50,140 --> 00:17:51,260
Beh, perché?

348
00:17:51,260 --> 00:17:55,600
Beh, a quanto pare, prendere un altro sguardo
in questo piccolo frammento di codice qui.

349
00:17:55,600 --> 00:18:00,160
Si noti che stiamo usando la più
operatore in due contesti diversi.

350
00:18:00,160 --> 00:18:03,221
>> E così ecco dove forse le cose
che abbiamo sorta di stati dicendo,

351
00:18:03,221 --> 00:18:03,970
oh, è così grande.

352
00:18:03,970 --> 00:18:05,910
Noi non trattiamo con i tipi di dati più.

353
00:18:05,910 --> 00:18:08,220
Ma qui è dove il fatto
che perdiamo i tipi di dati

354
00:18:08,220 --> 00:18:10,960
può effettivamente essere un po '
di un problema per noi.

355
00:18:10,960 --> 00:18:16,260
Ora che l'operatore più è utilizzato per
concatenare le stringhe e aggiungere i numeri

356
00:18:16,260 --> 00:18:19,550
insieme, JavaScript ha
a fare la sua ipotesi migliore

357
00:18:19,550 --> 00:18:22,030
come a quello che voglio fare per me.

358
00:18:22,030 --> 00:18:23,900
E in questo caso, è indovinato sbagliato.

359
00:18:23,900 --> 00:18:29,340
Si giorno solo concatenati, che sarebbe
0, uno, due, tre, quattro, cinque, o sei,

360
00:18:29,340 --> 00:18:32,060
e poi appena concatenato
che e quindi concatenati uno.

361
00:18:32,060 --> 00:18:35,020
Essa in realtà non aggiungerli insieme.

362
00:18:35,020 --> 00:18:37,320
E così nelle lingue,
PHP e JavaScript,

363
00:18:37,320 --> 00:18:39,196
che astrae
questa nozione di tipi,

364
00:18:39,196 --> 00:18:40,820
non si ha a che fare con esso più.

365
00:18:40,820 --> 00:18:43,600
Hanno ancora i tipi sotto il cofano.

366
00:18:43,600 --> 00:18:46,780
E possiamo, in situazioni
in questo modo, sfruttare questo fatto

367
00:18:46,780 --> 00:18:49,240
dicendo qualcosa
come forse questo, che

368
00:18:49,240 --> 00:18:53,210
sta dicendo JavaScript, dalla
modo, trattare questo come un intero,

369
00:18:53,210 --> 00:18:57,100
non trattarlo come una stringa, anche
se stiamo mescolando insieme stringhe

370
00:18:57,100 --> 00:18:58,940
e interi qui.

371
00:18:58,940 --> 00:19:02,204
>> E 'solo una di quelle cose
che sembra così grande in un contesto

372
00:19:02,204 --> 00:19:04,120
che noi non dobbiamo
gestire tipi più,

373
00:19:04,120 --> 00:19:05,828
ma a volte si
incorrere in una situazione

374
00:19:05,828 --> 00:19:09,110
esattamente come questo, dove il fatto che
non si ha il controllo su tipi

375
00:19:09,110 --> 00:19:11,220
può ritorcersi contro di voi
se non stai attento.

376
00:19:11,220 --> 00:19:18,285
E così, se abbiamo pop ripercorrere a IDE, io sono
andando a cancellare la mia console di nuovo,

377
00:19:18,285 --> 00:19:20,660
e ho intenzione di fare clic su corda
edificio versione due, che

378
00:19:20,660 --> 00:19:23,052
è dove io uso quella funzione di analisi int.

379
00:19:23,052 --> 00:19:25,260
Ora è stampare
informazioni che mi aspetto.

380
00:19:25,260 --> 00:19:29,330
Numero del giorno uno di Lunedi, Martedì
è numero del giorno due, e così via.

381
00:19:29,330 --> 00:19:31,170
>> Quindi parliamo di funzioni di nuovo.

382
00:19:31,170 --> 00:19:34,790
Ho promesso che avremmo parlare anonimo
funzioni e ora il contesto che

383
00:19:34,790 --> 00:19:36,360
è finalmente arrivato.

384
00:19:36,360 --> 00:19:39,980
Quindi, prima lo facciamo, parliamo di nuovo
sugli array per solo un secondo.

385
00:19:39,980 --> 00:19:42,120
Quindi array sono una speciale
caso di un oggetto.

386
00:19:42,120 --> 00:19:45,180
In realtà, tutto in
JavaScript è in realtà un oggetto.

387
00:19:45,180 --> 00:19:47,190
Così funzioni sono
caso speciale di un oggetto,

388
00:19:47,190 --> 00:19:49,770
interi sono una speciale
caso di un oggetto,

389
00:19:49,770 --> 00:19:52,152
ma le matrici specificamente
avere un certo numero di metodi.

390
00:19:52,152 --> 00:19:55,110
Ricorda perché sono oggetti,
possono avere proprietà e metodi.

391
00:19:55,110 --> 00:19:58,600
Hanno un numero di metodi che
può essere applicato a tali oggetti.

392
00:19:58,600 --> 00:20:01,197
C'è un metodo chiamato
dimensioni, array.size,

393
00:20:01,197 --> 00:20:03,030
che restituirà a
voi come ci si potrebbe aspettare

394
00:20:03,030 --> 00:20:05,120
il numero di elementi dell'array.

395
00:20:05,120 --> 00:20:08,480
Array.pop, un po 'come
la nostra nozione di popping off

396
00:20:08,480 --> 00:20:11,110
di una pila, se vi ricordate
dal nostro stack video,

397
00:20:11,110 --> 00:20:13,810
rimuove l'ultimo elemento dall'array.

398
00:20:13,810 --> 00:20:17,110
Array.push aggiunge un nuovo elemento
alla fine di un array.

399
00:20:17,110 --> 00:20:20,910
Array.shift è una sorta di
come DQ, si giunzioni fuori

400
00:20:20,910 --> 00:20:23,610
il primo elemento di un array.

401
00:20:23,610 --> 00:20:27,549
>> Ma c'è anche un altro speciale
metodo di un array chiamato mappa.

402
00:20:27,549 --> 00:20:29,340
E questo è una specie di
concetto interessante.

403
00:20:29,340 --> 00:20:30,930
Allora, qual è l'idea di una mappa?

404
00:20:30,930 --> 00:20:33,880
Ci troveremo a vedere questo
in diverse altre lingue,

405
00:20:33,880 --> 00:20:38,550
e non stiamo parlando di un
sorta di cartografi mappa qui,

406
00:20:38,550 --> 00:20:41,480
stiamo parlando di una funzione di mappatura.

407
00:20:41,480 --> 00:20:44,110
Nel contesto siamo
parlando qui, una mappa

408
00:20:44,110 --> 00:20:47,950
è una operazione speciale che abbiamo
in grado di eseguire su un array

409
00:20:47,950 --> 00:20:51,630
applicare una determinata funzione
ad ogni elemento di tale matrice.

410
00:20:51,630 --> 00:20:55,190
e così si direbbe a
questo caso, forse array.map,

411
00:20:55,190 --> 00:21:00,330
e all'interno di esso, stiamo passando
in mappa è una funzione che vogliamo

412
00:21:00,330 --> 00:21:02,430
da applicare ad ogni singolo elemento.

413
00:21:02,430 --> 00:21:07,299
Quindi è una sorta di analogo all'uso
un ciclo per iterare su ogni elemento

414
00:21:07,299 --> 00:21:09,340
e applicare un particolare
funzione di ogni elemento,

415
00:21:09,340 --> 00:21:14,830
appena JavaScript ha questo costruito in
nozione di mappatura che può essere applicato.

416
00:21:14,830 --> 00:21:19,700
E questo è un grande contesto
parlare di una funzione anonima.

417
00:21:19,700 --> 00:21:22,370
>> Quindi cerchiamo di dire che abbiamo
questo array di interi.

418
00:21:22,370 --> 00:21:25,370
Si chiama nums, ed è ottenuto cinque
cose in esso, uno, due, tre, quattro,

419
00:21:25,370 --> 00:21:26,410
cinque.

420
00:21:26,410 --> 00:21:30,620
Ora voglio mappare alcuni
funzione di questo array.

421
00:21:30,620 --> 00:21:34,337
Voglio avere applicare una funzione
ad ogni elemento della matrice.

422
00:21:34,337 --> 00:21:37,420
Beh, diciamo che quello che voglio
fare è raddoppiare tutti gli elementi.

423
00:21:37,420 --> 00:21:42,520
Cosa potevo fare è utilizzare un ciclo
per var I è uguale a 0, I è meno

424
00:21:42,520 --> 00:21:47,390
o uguale a 4, io più, più, e
poi raddoppiare ogni singolo numero.

425
00:21:47,390 --> 00:21:49,580
Ma posso anche fare una cosa del genere.

426
00:21:49,580 --> 00:21:53,420
Posso dire nums era precedentemente
uno due tre quattro cinque,

427
00:21:53,420 --> 00:21:58,310
Ora, però, vorrei che tu
applicare una mappatura su questo array

428
00:21:58,310 --> 00:22:00,400
dove mi piacerebbe voi
a raddoppiare ogni numero.

429
00:22:00,400 --> 00:22:02,540
E questo è esattamente
cosa sta succedendo qui.

430
00:22:02,540 --> 00:22:06,870
A meno di notare che cosa sto passando
in quanto l'argomento mappa.

431
00:22:06,870 --> 00:22:09,080
Questa è una funzione anonima.

432
00:22:09,080 --> 00:22:11,140
E accorgo io non ho dato
questa funzione un nome,

433
00:22:11,140 --> 00:22:13,290
Ho dato solo una lista di parametri.

434
00:22:13,290 --> 00:22:16,370
E quindi questo è un esempio
di una funzione anonima.

435
00:22:16,370 --> 00:22:21,270
>> In genere avremmo mai chiamare questa
la funzione al di fuori del contesto della mappa.

436
00:22:21,270 --> 00:22:24,110
Stiamo definendo come parametro
per mappare, e quindi non abbiamo davvero fare

437
00:22:24,110 --> 00:22:27,910
devono avere un nome per se la
unica cosa che preoccupa è la mappa

438
00:22:27,910 --> 00:22:30,339
ed è definito giusto
lì dentro di carta.

439
00:22:30,339 --> 00:22:31,880
E quindi questa è una funzione anonima.

440
00:22:31,880 --> 00:22:34,680
Non siamo stati in grado
per fare questo in precedenza.

441
00:22:34,680 --> 00:22:38,400
Mappa qualche funzione che
accetta un parametro, num,

442
00:22:38,400 --> 00:22:41,890
e ciò che la funzione fa
si ritorna num volte 2.

443
00:22:41,890 --> 00:22:45,330
E così dopo questo
mappatura è stata applicata,

444
00:22:45,330 --> 00:22:50,090
questo è ciò che ora Nums sguardi
come, due, quattro, sei, otto, 10.

445
00:22:50,090 --> 00:22:52,090
E noi pop al mio
finestra del browser e solo

446
00:22:52,090 --> 00:22:55,240
guarda questo
molto rapidamente pure.

447
00:22:55,240 --> 00:22:58,000
>> Così ho un altro bottone qui
a casa mia pagina chiamata doppio.

448
00:22:58,000 --> 00:23:03,570
E quando scatto doppio, e si dice
me prima che fosse uno, due, tre, quattro,

449
00:23:03,570 --> 00:23:07,250
cinque dopo due, quattro, sei, otto, 10.

450
00:23:07,250 --> 00:23:11,930
E se vado indietro e fare doppio clic su
di nuovo, due, quattro, sei, otto, 10.

451
00:23:11,930 --> 00:23:17,400
E poi, dopo, quattro,
otto, 12, 16, e quindi 20.

452
00:23:17,400 --> 00:23:20,440
E quello che sto facendo in questa funzione?

453
00:23:20,440 --> 00:23:25,210
Beh, se solo un salto di IDE, e
Mi tiro su la mia funzione anonima, qui

454
00:23:25,210 --> 00:23:28,780
on line sette a 13, io sono
facendo un po 'di lavoro di speciale qui,

455
00:23:28,780 --> 00:23:32,240
ma sto solo stampando
ciò che è attualmente nella matrice.

456
00:23:32,240 --> 00:23:36,580
Poi sulla linea 16, 17,
e 18, c'è la mia mappa.

457
00:23:36,580 --> 00:23:40,930
Questo è dove sto applicando questo raddoppio
funzione di ogni singolo elemento.

458
00:23:40,930 --> 00:23:43,530
E poi un po 'più in basso,
Sto solo facendo la stessa cosa

459
00:23:43,530 --> 00:23:46,640
Che facevo prima, solo che adesso sono
stampare i contenuti della matrice

460
00:23:46,640 --> 00:23:48,167
successivamente.

461
00:23:48,167 --> 00:23:50,500
Ma tutto quello che ho fatto qui è
basta usare una funzione anonima

462
00:23:50,500 --> 00:23:53,640
per mappare in un intero array.

463
00:23:53,640 --> 00:23:58,466
>> Così un altro grande argomento di cui parlare in
JavaScript è l'idea di un evento.

464
00:23:58,466 --> 00:24:01,590
Un evento è qualcosa che accade solo
quando un utente interagisce con il vostro web

465
00:24:01,590 --> 00:24:04,715
Pagina, quindi forse fare clic su qualcosa,
o forse la pagina viene terminato il caricamento,

466
00:24:04,715 --> 00:24:07,200
o forse hanno spostato
il mouse sopra qualcosa,

467
00:24:07,200 --> 00:24:09,290
o hanno digitato qualcosa
in un campo di immissione.

468
00:24:09,290 --> 00:24:14,260
Tutte queste cose sono eventi
che si verificano sulla nostra pagina web.

469
00:24:14,260 --> 00:24:17,460
E ha il Javascript
capacità di supportare qualcosa

470
00:24:17,460 --> 00:24:21,760
chiamato un gestore di eventi, che
è una funzione di callback che

471
00:24:21,760 --> 00:24:23,329
risponde a un evento html.

472
00:24:23,329 --> 00:24:24,620
E che cosa è una funzione di callback?

473
00:24:24,620 --> 00:24:27,328
Beh, è ​​generalmente solo un altro
il nome di una funzione anonima.

474
00:24:27,328 --> 00:24:30,170
E 'una funzione che
risponde a un evento.

475
00:24:30,170 --> 00:24:34,130
Ed è qui che veniamo al
idea di legare determinate funzioni

476
00:24:34,130 --> 00:24:38,060
per un attributo particolare html.

477
00:24:38,060 --> 00:24:41,420
La maggior parte degli elementi HTML hanno
supporto per un attributo

478
00:24:41,420 --> 00:24:45,170
che non abbiamo parlato in html
video per qualcosa di simile al clic

479
00:24:45,170 --> 00:24:50,540
o al passaggio del mouse o del carico,
tutti questi eventi

480
00:24:50,540 --> 00:24:53,120
che è quindi possibile scrivere funzioni
che si occupano di quegli eventi

481
00:24:53,120 --> 00:24:56,090
quando quegli eventi
si verificano sulla tua pagina web.

482
00:24:56,090 --> 00:24:59,170
>> E così forse il tuo html
sembra qualcosa di simile.

483
00:24:59,170 --> 00:25:02,240
E ho due pulsanti qui,
un tasto e il tasto due,

484
00:25:02,240 --> 00:25:04,620
e qui ho attualmente
nulla definito,

485
00:25:04,620 --> 00:25:11,170
ma questo è dove l'attributo su
click è evidentemente parte della mia tag html.

486
00:25:11,170 --> 00:25:15,220
Quindi, apparentemente, quando definisco che cosa è
succedendo all'interno di tale attributo,

487
00:25:15,220 --> 00:25:18,590
che sta per essere qualche JavaScript
funzione che risponde all'evento

488
00:25:18,590 --> 00:25:24,360
presumibilmente di cliccare su
un pulsante o il pulsante due.

489
00:25:24,360 --> 00:25:28,580
>> Cosa c'è di genere di freddo di questo è che abbiamo
in grado di scrivere un gestore di eventi generico.

490
00:25:28,580 --> 00:25:32,370
E questo gestore di eventi sarà
creare un oggetto evento.

491
00:25:32,370 --> 00:25:37,000
E l'oggetto evento ci dirà
quale dei due tasti è stato fatto clic.

492
00:25:37,000 --> 00:25:38,064
Ora, come funziona?

493
00:25:38,064 --> 00:25:39,730
Beh, potrebbe essere simile a questo.

494
00:25:39,730 --> 00:25:44,860
Quindi per prima cosa definire i nostri pulsanti
di avere una risposta al callback

495
00:25:44,860 --> 00:25:47,470
funzione che verrà chiamato
quando si fa clic sul pulsante,

496
00:25:47,470 --> 00:25:49,520
chiameremo evento nome avviso.

497
00:25:49,520 --> 00:25:53,320
E notare in entrambi i casi stiamo
passando in questo parametro evento.

498
00:25:53,320 --> 00:25:55,460
Quindi chiamiamo questa funzione
o quando questa funzione

499
00:25:55,460 --> 00:26:00,330
viene attivato dall'evento accade,
sta andando a creare questo oggetto evento

500
00:26:00,330 --> 00:26:03,300
e passarlo come
parametro per avvisare nome.

501
00:26:03,300 --> 00:26:07,270
E l'oggetto evento è
andando a contenere informazioni

502
00:26:07,270 --> 00:26:09,800
di cui era stato fatto clic.

503
00:26:09,800 --> 00:26:11,580
E come farlo?

504
00:26:11,580 --> 00:26:13,654
Beh, potrebbe essere simile a questo.

505
00:26:13,654 --> 00:26:15,570
Così ora nella mia separata
File JavaScript, potrei

506
00:26:15,570 --> 00:26:17,420
devono trovare questo
Nome funzione di allarme, che

507
00:26:17,420 --> 00:26:19,500
accetta ancora una volta che il parametro evento.

508
00:26:19,500 --> 00:26:24,640
E poi qui è dove sto rilevando
quale pulsante è stato attivato,

509
00:26:24,640 --> 00:26:28,100
grilletto var uguale evento
elemento di origine puntino.

510
00:26:28,100 --> 00:26:33,150
Qual è stata la fonte che ha creato
questo oggetto evento che è stato passato a?

511
00:26:33,150 --> 00:26:36,390
Era un pulsante, o era pulsante due esso?

512
00:26:36,390 --> 00:26:40,710
>> E poi qui tutto quello che sto facendo è
stampare trigger.innerhtml.

513
00:26:40,710 --> 00:26:43,860
Ebbene, in questo caso, in questo
contesto, trigger.innerhtml

514
00:26:43,860 --> 00:26:45,940
è solo ciò che è scritto sul bottone.

515
00:26:45,940 --> 00:26:48,830
E così succede se saltiamo
per un secondo, che sarebbe

516
00:26:48,830 --> 00:26:51,670
essere ciò che è tra questi tag pulsante.

517
00:26:51,670 --> 00:26:54,150
Sarà un pulsante o il pulsante due.

518
00:26:54,150 --> 00:26:57,320
E diamo uno sguardo a
come questo gestore di eventi sarebbe

519
00:26:57,320 --> 00:27:01,080
guardare se abbiamo avuto esecuzione in pratica.

520
00:27:01,080 --> 00:27:03,850
>> Quindi, prima di tutto, hai
aperti events.js,

521
00:27:03,850 --> 00:27:06,517
che è il file JavaScript in cui
Ho definito questa funzione.

522
00:27:06,517 --> 00:27:08,558
E come potete vedere, è
più o meno esattamente quello che

523
00:27:08,558 --> 00:27:10,230
abbiamo appena visto nella diapositiva un secondo fa.

524
00:27:10,230 --> 00:27:14,890
E voglio andare oltre al
home page abbiamo usato.

525
00:27:14,890 --> 00:27:17,660
E ho qui pulsante
uno e due pulsanti.

526
00:27:17,660 --> 00:27:19,820
E io clicco su un pulsante.

527
00:27:19,820 --> 00:27:23,930
Si è scelto il pulsante di uno, se
può vedere proprio qui in allerta.

528
00:27:23,930 --> 00:27:25,810
OK.

529
00:27:25,810 --> 00:27:28,980
Fare clic sul pulsante due,
cliccato su un pulsante a due.

530
00:27:28,980 --> 00:27:32,150
>> Così entrambi i pulsanti hanno la
stessa chiamata di funzione, giusto?

531
00:27:32,150 --> 00:27:35,840
Entrambi erano nome allarme
evento, ma questo oggetto evento

532
00:27:35,840 --> 00:27:41,900
che viene creato quando si clicca su
ci dice che il pulsante è stato fatto clic.

533
00:27:41,900 --> 00:27:44,650
Non abbiamo dovuto scrivere due distinti
funzioni o accordo con avere

534
00:27:44,650 --> 00:27:46,470
per passare eventuali informazioni aggiuntive.

535
00:27:46,470 --> 00:27:48,220
Siamo solo basandosi su
quello che Javascript sarà

536
00:27:48,220 --> 00:27:53,772
fare per noi, che è quello di creare quella
sorta di oggetto evento per nostro conto.

537
00:27:53,772 --> 00:27:56,730
C'è molto di più a JavaScript di
quello che abbiamo visto in questo video,

538
00:27:56,730 --> 00:27:58,521
ma avendo questi
fondamentale dovrebbe farti

539
00:27:58,521 --> 00:28:00,690
un periodo piuttosto lungo modi per
imparare tutto quello che ti

540
00:28:00,690 --> 00:28:04,030
bisogno di sapere su questo
lingua interessante.

541
00:28:04,030 --> 00:28:05,000
Sono Doug Lloyd.

542
00:28:05,000 --> 00:28:07,010
Questo è CS50.

543
00:28:07,010 --> 00:28:09,181