1
00:00:00,000 --> 00:00:10,632

2
00:00:10,632 --> 00:00:12,340
ALLISON Buchholtz-AU:
Tutti tutti a destra.

3
00:00:12,340 --> 00:00:13,520
Bentornato alla sezione.

4
00:00:13,520 --> 00:00:15,315
E 'la nostra sezione penultima.

5
00:00:15,315 --> 00:00:16,542
E 'così triste.

6
00:00:16,542 --> 00:00:19,500
Non so che cosa ho intenzione di fare
senza vederti ragazzi ogni Lunedi.

7
00:00:19,500 --> 00:00:20,970
Credo che dovremmo solo--
forse potremmo solo

8
00:00:20,970 --> 00:00:22,710
incontrare qui e cenare o qualcosa.

9
00:00:22,710 --> 00:00:23,270
Non lo so.

10
00:00:23,270 --> 00:00:24,370
Porterò invece cibo.

11
00:00:24,370 --> 00:00:26,290
Ci limitiamo a parlare.

12
00:00:26,290 --> 00:00:29,900
Ma sì, la prossima settimana sarà
essere la nostra ultima sezione.

13
00:00:29,900 --> 00:00:32,390
>> In tal senso, si dispone di un quiz la prossima settimana.

14
00:00:32,390 --> 00:00:35,660
So che ho dimenticato di fare il mio, come,
due settimane di preavviso la settimana scorsa,

15
00:00:35,660 --> 00:00:39,140
ma spero che i ragazzi
sapeva stava arrivando.

16
00:00:39,140 --> 00:00:42,880
Speriamo che questo sia uno degli ultimi
midterms per voi ragazzi per il semestre.

17
00:00:42,880 --> 00:00:46,950
Ma è andando a coprire tutte le
materiale che siamo andati oltre.

18
00:00:46,950 --> 00:00:50,811
Quindi non è come si può solo dimenticare
circa quattro loop o variabili.

19
00:00:50,811 --> 00:00:52,560
Perché abbiamo imparato
quelli in principio,

20
00:00:52,560 --> 00:00:55,870
questi sono ovviamente
gioco equo per il quiz.

21
00:00:55,870 --> 00:01:00,150
>> Esso sarà lo stesso formato, stesso
lunghezza, in modo che già sono utilizzati per esso.

22
00:01:00,150 --> 00:01:02,330
Ci sara '
codifica da problemi a mano,

23
00:01:02,330 --> 00:01:06,270
magari un po 'true false,
forse qualche breve risposta.

24
00:01:06,270 --> 00:01:08,090
Così si dovrebbe essere
familiarità con il formato,

25
00:01:08,090 --> 00:01:10,940
soprattutto se si prende
le prove pratiche.

26
00:01:10,940 --> 00:01:13,950
Ma come ho detto qui, è
cumulativo, ma siamo sicuramente

27
00:01:13,950 --> 00:01:17,410
andando a concentrarsi su
cose da sei settimane in poi.

28
00:01:17,410 --> 00:01:24,050
Così, siamo probabilmente non andare
chiederti quanti byte

29
00:01:24,050 --> 00:01:26,180
sono in ciascun tipo o
questo genere di cose,

30
00:01:26,180 --> 00:01:29,730
ma stiamo probabilmente andando a essere
interessati a cose come le liste collegate,

31
00:01:29,730 --> 00:01:32,750
o strutture di dati diversi,
o algoritmi differenti

32
00:01:32,750 --> 00:01:33,960
che abbiamo parlato.

33
00:01:33,960 --> 00:01:38,990
Quindi assicuratevi di sei veramente
up su quelli, e se

34
00:01:38,990 --> 00:01:41,590
bisogno di tutte le risorse,
ecco un sacco di risorse.

35
00:01:41,590 --> 00:01:44,790
Ho appena dato tipo
di un rapido elenco lì.

36
00:01:44,790 --> 00:01:48,330
>> La prossima settimana sarà quiz
rivedere in questo periodo.

37
00:01:48,330 --> 00:01:52,290
Quindi, se avete domande
o argomenti specifici,

38
00:01:52,290 --> 00:01:56,180
cose specifiche sul quiz che
vuoi andare oltre, per favore

39
00:01:56,180 --> 00:02:01,780
inviarli a me in anticipo in modo che posso
tipo di preparare il materiale per questo.

40
00:02:01,780 --> 00:02:06,310
Ed oltre a questo
sezione di revisione, faremo

41
00:02:06,310 --> 00:02:09,616
anche tenendo il corso di livello
Esaminiamo come abbiamo fatto l'ultima volta.

42
00:02:09,616 --> 00:02:11,490
E sarà
fatta dalle stesse persone.

43
00:02:11,490 --> 00:02:13,030
Non so se questo
rende meglio o peggio,

44
00:02:13,030 --> 00:02:15,670
ma che sta per essere me,
Hannah, Davan, e Gabe nuovo.

45
00:02:15,670 --> 00:02:18,630
Quindi, se volete venire a vedere
tutti noi battute con l'altro

46
00:02:18,630 --> 00:02:21,270
e camminare attraverso quiz
revisione, si dovrebbe definitivamente

47
00:02:21,270 --> 00:02:22,600
venire a che il prossimo Lunedi anche.

48
00:02:22,600 --> 00:02:26,210
Quindi non vi resta che un Lunedi jam
ricco di revisione quiz, che è buono

49
00:02:26,210 --> 00:02:29,840
perché allora hai Martedì
per elaborare attraverso tutto ciò.

50
00:02:29,840 --> 00:02:32,230
>> Ma sicuramente fare il check
queste risorse.

51
00:02:32,230 --> 00:02:36,030
Study.csv.net è di gran lunga, I
pensare, uno dei più utili,

52
00:02:36,030 --> 00:02:37,990
soprattutto perché ha
un sacco di codice di esempio,

53
00:02:37,990 --> 00:02:40,490
ha tutti i punti di forza
con tutte le note su di esso,

54
00:02:40,490 --> 00:02:44,510
che sono davvero quello che disegno più
dei miei materiali di sezione da.

55
00:02:44,510 --> 00:02:47,480
Se c'è qualcosa in precedente
sezioni che forse ho inviati

56
00:02:47,480 --> 00:02:49,920
che non si può avere
ottenuto, fammelo sapere.

57
00:02:49,920 --> 00:02:52,520
Come esempio di codice della scorsa settimana,
se qualcuno non ha ottenuto che,

58
00:02:52,520 --> 00:02:55,930
solo a me e-mail o venire a parlare con me,
e farò in modo che si ottiene quella.

59
00:02:55,930 --> 00:03:02,000
>> E con questo, oggi ci accingiamo
a parlare di JavaScript.

60
00:03:02,000 --> 00:03:04,690
Quindi qui si Tommy, chi ero
solo parlare con te la notte scorsa.

61
00:03:04,690 --> 00:03:06,670
Amo Tommy.

62
00:03:06,670 --> 00:03:09,040
JavaScript è il suo preferito
il linguaggio, come dice qui.

63
00:03:09,040 --> 00:03:14,050
Cercheranno e diranno che è
non è la migliore, e saranno sbagliate.

64
00:03:14,050 --> 00:03:16,510
Così Tommy è un maestro JavaScript.

65
00:03:16,510 --> 00:03:19,850
Io non sono del tutto a suo
livello, ma ero come,

66
00:03:19,850 --> 00:03:22,900
"Tommy, come faccio a insegnare
questi ragazzi JavaScript? "

67
00:03:22,900 --> 00:03:26,700
Così ho preso alcuni suggerimenti, in modo
speriamo che lavorano fuori.

68
00:03:26,700 --> 00:03:31,140
>> Quindi un paio di cose da sapere è che
JavaScript è un scripting client-side

69
00:03:31,140 --> 00:03:35,560
lingua, in modo che, PHP è qualcosa
che abbiamo considerato più server-side,

70
00:03:35,560 --> 00:03:39,280
si è caricare sul server,
compilato e lì eseguita.

71
00:03:39,280 --> 00:03:42,871
Questo viene eseguito
sulla vostra macchina.

72
00:03:42,871 --> 00:03:43,370
OK?

73
00:03:43,370 --> 00:03:46,960
Così si carica qualche pagina JavaScript,
e viene eseguito sul computer.

74
00:03:46,960 --> 00:03:49,910
La sintassi è molto simile a C e PHP.

75
00:03:49,910 --> 00:03:52,490
Stiamo per passare attraverso
alcuni esempi di JavaScript,

76
00:03:52,490 --> 00:03:56,740
e si sta andando a vedere che il
modo si parla di variabili, cicli,

77
00:03:56,740 --> 00:03:58,910
e le condizioni sono molto simili.

78
00:03:58,910 --> 00:04:00,500
OK?

79
00:04:00,500 --> 00:04:04,490
Il fatto che essi sono così simili è
probabilmente andando a inciampare qualcuno di voi

80
00:04:04,490 --> 00:04:08,529
up, in alcuni casi, solo perché
ti incorporare un po 'di C

81
00:04:08,529 --> 00:04:09,570
dove non ci dovrebbe essere.

82
00:04:09,570 --> 00:04:14,130
Forse si cerca e digita qualcosa
quando non deve essere digitato.

83
00:04:14,130 --> 00:04:16,540
>> E su questo, una cosa da
sapere è che Javascript

84
00:04:16,540 --> 00:04:19,360
è un tipizzato dinamicamente
il linguaggio, come PHP.

85
00:04:19,360 --> 00:04:21,410
Quindi, se voi ragazzi ricordo
dalla sezione la scorsa settimana,

86
00:04:21,410 --> 00:04:23,680
quando eravamo tipo di fare
il nostro corso intensivo PHP,

87
00:04:23,680 --> 00:04:28,860
abbiamo visto come una stringa poteva essere
trasformato in un int, e così via.

88
00:04:28,860 --> 00:04:31,650

89
00:04:31,650 --> 00:04:34,850
Il tipo delle variabili
sono determinati in fase di esecuzione,

90
00:04:34,850 --> 00:04:38,180
in modo che possano cambiare nel corso
il corso del programma,

91
00:04:38,180 --> 00:04:43,109
e nello stesso modo in cui mai
davvero dichiarare tipi di variabili PHP,

92
00:04:43,109 --> 00:04:45,900
stiamo andando a fare lo stesso
cosa qui, dove non siamo veramente

93
00:04:45,900 --> 00:04:49,740
controllare i tipi di nostre variabili,
per così dire, come facciamo noi in C.

94
00:04:49,740 --> 00:04:52,200
>> E poi una cosa
questo è abbastanza freddo è

95
00:04:52,200 --> 00:04:54,090
che è possibile errore
Controllare tramite la console,

96
00:04:54,090 --> 00:04:57,240
con questa grande funzione
console.log, che

97
00:04:57,240 --> 00:05:00,930
consente di stampare le diverse
variabili o oggetti che saremo

98
00:05:00,930 --> 00:05:01,750
parlare.

99
00:05:01,750 --> 00:05:05,720
Proprio come la scorsa settimana, quando ero
come, "utilizzare questa funzione," con discarica

100
00:05:05,720 --> 00:05:10,490
dal pset questa è una funzione
che si desidera utilizzare, console.log.

101
00:05:10,490 --> 00:05:12,860
Ero così sorpreso quanti
studenti nelle ore di ufficio

102
00:05:12,860 --> 00:05:14,530
non sapeva sulla funzione discarica.

103
00:05:14,530 --> 00:05:19,010
E mi sono detto, "ragazzi, questa volontà
rendere la vita molto più facile. "

104
00:05:19,010 --> 00:05:22,960
>> Va bene, in modo che era un po '
solo una breve cosa, come sempre,

105
00:05:22,960 --> 00:05:24,000
abbiamo esempi.

106
00:05:24,000 --> 00:05:25,600
So che voi ragazzi l'amore quelli.

107
00:05:25,600 --> 00:05:30,930
Quindi, ecco un esempio di un
semplice file JavaScript qui.

108
00:05:30,930 --> 00:05:34,000
Quindi è solo andando a creare
questo pop-up che dice,

109
00:05:34,000 --> 00:05:36,336
"Ciao mondo", quando si
entrare nella pagina, ma cerchiamo di

110
00:05:36,336 --> 00:05:37,960
cercare di camminare attraverso questo un po '.

111
00:05:37,960 --> 00:05:43,440
Così, ovviamente questo è solo
come il vostro index.html normale.

112
00:05:43,440 --> 00:05:50,280
Quindi, solo il nostro modello di normale qui,
e abbiamo HTML, abbiamo la nostra testa,

113
00:05:50,280 --> 00:05:55,580
e proprio come con i CSS, il modo in cui
incluso alcuni file al di fuori, giusto?

114
00:05:55,580 --> 00:05:59,260
Abbiamo alcuni script type
testo che è JavaScript.

115
00:05:59,260 --> 00:06:02,680
E la fonte è hello.js,
che è qui.

116
00:06:02,680 --> 00:06:05,630
Questo è l'intero file di hello.js.

117
00:06:05,630 --> 00:06:09,080
E poi abbiamo un po '
titolo e alcuni HTML corpo

118
00:06:09,080 --> 00:06:11,050
che non abbiamo veramente a cuore.

119
00:06:11,050 --> 00:06:15,970
>> Quello che succede è, quando caricate la pagina,
esegue automaticamente questo script.

120
00:06:15,970 --> 00:06:16,470
OK?

121
00:06:16,470 --> 00:06:18,790
Così JavaScript sarà
eseguito automaticamente.

122
00:06:18,790 --> 00:06:22,860
Così che cosa sta andando a fare, sta andando
andare immediatamente ed eseguire questo.

123
00:06:22,860 --> 00:06:24,110
E sta andando a dire, "alert.

124
00:06:24,110 --> 00:06:25,190
Ciao mondo. "

125
00:06:25,190 --> 00:06:30,840
Quale avviso è la funzione che
in realtà genera questa casella.

126
00:06:30,840 --> 00:06:31,540
OK?

127
00:06:31,540 --> 00:06:33,390
Quindi è una specie di tutto Encompass.

128
00:06:33,390 --> 00:06:36,700
Non c'è niente di più che abbiamo avuto
da fare oltre appena allarme,

129
00:06:36,700 --> 00:06:40,000
e poi quello che volevamo
all'interno della nostra scatola Alert.

130
00:06:40,000 --> 00:06:40,500
OK?

131
00:06:40,500 --> 00:06:45,080
Ecco, questo è solo un super semplice
esempio di ciò che può fare JavaScript.

132
00:06:45,080 --> 00:06:48,110

133
00:06:48,110 --> 00:06:50,070
>> Uno dei davvero cool
cose, come vedremo,

134
00:06:50,070 --> 00:06:55,150
è che Javascript permette
per manipolare le pagine web,

135
00:06:55,150 --> 00:06:57,720
senza dover
ricaricare ogni volta.

136
00:06:57,720 --> 00:07:01,830
Quindi, se si want-- per esempio, se
si sta in bilico su qualcosa,

137
00:07:01,830 --> 00:07:04,300
se voi ragazzi avete mai
visto come le barre di menu,

138
00:07:04,300 --> 00:07:07,360
o quando si passa sopra un po '
argomento, viene visualizzato un menu a discesa,

139
00:07:07,360 --> 00:07:08,670
che è causa di JavaScript.

140
00:07:08,670 --> 00:07:09,170
OK?

141
00:07:09,170 --> 00:07:12,670
Quindi non ricaricare l'intera
pagina per ottenere questo menu per presentarsi,

142
00:07:12,670 --> 00:07:17,240
siete solo in cerca di qualche specifico
azione che l'utente ha preso,

143
00:07:17,240 --> 00:07:21,800
che sono chiamati gli eventi che ci arriveremo
in, e una volta si vede che, si dice,

144
00:07:21,800 --> 00:07:25,960
"OK, modificare qualcosa su questo
pagina e farlo sembrare diverso,

145
00:07:25,960 --> 00:07:28,270
ma solo modificare queste cose specifiche.

146
00:07:28,270 --> 00:07:29,690
Non ricaricare il tutto. "

147
00:07:29,690 --> 00:07:33,110
Quindi in realtà è molto più bello, e
non dovete ricaricare le vostre pagine,

148
00:07:33,110 --> 00:07:34,510
ed è davvero cool.

149
00:07:34,510 --> 00:07:38,270
>> Dichiarazioni così variabile,
in modo da poter in qualche modo vedere,

150
00:07:38,270 --> 00:07:40,530
Ho messo in cima qui, vagamente digitato.

151
00:07:40,530 --> 00:07:42,570
Quindi questo è molto simile a PHP.

152
00:07:42,570 --> 00:07:48,770
Non abbiamo bisogno di dire
JavaScript che tipo siamo

153
00:07:48,770 --> 00:07:50,740
aspettandosi ciascuna di queste variabili per essere.

154
00:07:50,740 --> 00:07:52,560
Possono essere qualunque tipo che vogliamo.

155
00:07:52,560 --> 00:07:57,480
Quindi, si nota in questo caso, si dichiara
loro molto semplice, basta con "var"

156
00:07:57,480 --> 00:08:00,990
e poi tutto ciò che vogliamo
il nostro nome di variabile per essere.

157
00:08:00,990 --> 00:08:05,680
Una cosa da notare è che quando si
mettere var davanti a un nome di variabile,

158
00:08:05,680 --> 00:08:07,520
esso ambiti localmente.

159
00:08:07,520 --> 00:08:09,320
OK?

160
00:08:09,320 --> 00:08:14,025
E 'del tutto ragionevole per voi
completamente solo cancellare il var

161
00:08:14,025 --> 00:08:18,970
e solo s uguale CS50, e
che sarebbe solo una variabile globale.

162
00:08:18,970 --> 00:08:19,580
OK?

163
00:08:19,580 --> 00:08:22,490
Così è possibile inizializzare in entrambi i modi,
Dipende solo da come si desidera.

164
00:08:22,490 --> 00:08:24,448
Quindi, se siete inizializzazione
all'interno di una funzione,

165
00:08:24,448 --> 00:08:28,070
e volete che la variabile
rimanere ambito all'interno di tale funzione,

166
00:08:28,070 --> 00:08:31,620
si sta andando a voler fare
qualcosa come var citarne una variabile,

167
00:08:31,620 --> 00:08:34,270
contro se lo vuoi
limitato l'ambito a livello globale, si

168
00:08:34,270 --> 00:08:36,240
può solo fare il nome di
la variabile e poi

169
00:08:36,240 --> 00:08:38,270
qualunque cosa ti piacerebbe posta uguale a.

170
00:08:38,270 --> 00:08:40,230
OK?

171
00:08:40,230 --> 00:08:45,580
>> Questa è una specie di cosa interessante qui,
perché se notiamo nostra variabile

172
00:08:45,580 --> 00:08:47,590
b inizia come vero.

173
00:08:47,590 --> 00:08:51,280
E ciò che questo può does--
Qualcuno mi dica cosa fa?

174
00:08:51,280 --> 00:08:54,190

175
00:08:54,190 --> 00:08:55,890
Così abbiamo un po 'di allarme.

176
00:08:55,890 --> 00:09:00,156
Che ne sarebbe di tipo b
essere in principio?

177
00:09:00,156 --> 00:09:00,905
AUDIENCE: booleano.

178
00:09:00,905 --> 00:09:01,330
ALLISON Buchholtz-AU: booleano.

179
00:09:01,330 --> 00:09:01,940
Destra.

180
00:09:01,940 --> 00:09:07,260
E poi riassegnare b
a questa stringa, giusto?

181
00:09:07,260 --> 00:09:11,170
Allora qui, che tipo di b essere?

182
00:09:11,170 --> 00:09:12,480
Sarebbe una stringa, giusto?

183
00:09:12,480 --> 00:09:14,900
Così che cosa è importante
avviso è che in C, abbiamo

184
00:09:14,900 --> 00:09:17,330
potrebbe quasi mai fare
qualcosa di simile.

185
00:09:17,330 --> 00:09:22,000
Ci piacerebbe avere una variabile,
lanciarla come qualcos'altro,

186
00:09:22,000 --> 00:09:27,185
magari fare qualche funzione con due
i, vado da una carica di un numero intero.

187
00:09:27,185 --> 00:09:31,063
Ma se notiamo qui, b
molto cambia facilmente tipo.

188
00:09:31,063 --> 00:09:33,760
>> AUDIENCE: Aspetta, quindi si può solo
essere come, "make b un intero?"

189
00:09:33,760 --> 00:09:34,360
>> ALLISON Buchholtz-AU: Sì.

190
00:09:34,360 --> 00:09:36,185
Si può solo riassegnare b ad un numero intero.

191
00:09:36,185 --> 00:09:36,910
>> AUDIENCE: Davvero?

192
00:09:36,910 --> 00:09:38,035
>> ALLISON Buchholtz-AU: Sì.

193
00:09:38,035 --> 00:09:39,810
E allora sarebbe un int.

194
00:09:39,810 --> 00:09:43,820
Così i vostri variabili possono cambiare nel corso del
il corso del programma troppo.

195
00:09:43,820 --> 00:09:46,410
Essi non sono strettamente tipizzati.

196
00:09:46,410 --> 00:09:49,180
E 'molto liberamente digitato.

197
00:09:49,180 --> 00:09:50,820
OK?

198
00:09:50,820 --> 00:09:54,820
Fondamentalmente le variabili possono fare qualsiasi cosa
che vogliono, come abbiamo tipo di visto con PHP.

199
00:09:54,820 --> 00:09:59,430
Possono fare alcune cose folli, così
è importante essere abbastanza attenti.

200
00:09:59,430 --> 00:10:01,200
Nome le variabili bene.

201
00:10:01,200 --> 00:10:03,450
In caso contrario, si fa tutto ad un tratto
si sta andando ad essere come,

202
00:10:03,450 --> 00:10:05,783
"Aspetta, ho pensato che questo era un
corda, e ora è un int,

203
00:10:05,783 --> 00:10:08,170
e io non sono davvero sicuro
quello che sta succedendo qui. "

204
00:10:08,170 --> 00:10:12,410
Quindi questo è solo un semplice esempio di
mostrando come una variabile può facilmente

205
00:10:12,410 --> 00:10:15,890
modificare il tipo di corso
il corso di un programma.

206
00:10:15,890 --> 00:10:16,870
>> OK.

207
00:10:16,870 --> 00:10:19,200
Quindi questo dovrebbe essere
super, super familiare.

208
00:10:19,200 --> 00:10:21,510
Quindi questi sono i nostri cicli di JavaScript.

209
00:10:21,510 --> 00:10:27,780
Essi sono esattamente gli stessi, tranne
invece di quattro int i è uguale a zero,

210
00:10:27,780 --> 00:10:30,470
potremmo dire var i è uguale a zero.

211
00:10:30,470 --> 00:10:34,100
E allora potremmo avere il nostro stesso tipo
dello stato, stesso tipo di aggiornamento,

212
00:10:34,100 --> 00:10:36,090
i plus plus funziona bene.

213
00:10:36,090 --> 00:10:39,800
Così carponi sono gli stessi,
talora sono gli stessi,

214
00:10:39,800 --> 00:10:41,440
e fare talora sono esattamente le stesse.

215
00:10:41,440 --> 00:10:44,070
Stesso tipo di formato generale.

216
00:10:44,070 --> 00:10:48,840
Notiamo, quattro, tra parentesi,
parentesi, è tutto lo stesso.

217
00:10:48,840 --> 00:10:51,470
Inoltre ci sarà un punto e virgola
quando si arriva a esempio di codice.

218
00:10:51,470 --> 00:10:55,250
Vedrai è abbastanza
molto simile a c.

219
00:10:55,250 --> 00:10:59,770
>> Per dichiarazioni di funzione,
nuovo, molto simile.

220
00:10:59,770 --> 00:11:05,100
Abbiamo qualche funzione che solo
dice che è una funzione, e quindi

221
00:11:05,100 --> 00:11:07,660
il nome della nostra
funzione e gli ingressi.

222
00:11:07,660 --> 00:11:11,590
E ancora, se notiamo, abbiamo
non hanno tipi qui di sorta.

223
00:11:11,590 --> 00:11:12,090
Giusto?

224
00:11:12,090 --> 00:11:18,150
Non abbiamo nulla da sé che questi
devono essere interi o doppie, o galleggianti.

225
00:11:18,150 --> 00:11:19,530
Potrebbero essere quello che vogliono.

226
00:11:19,530 --> 00:11:23,560
Ciò che è importante è notare che
abbiamo bisogno di scrivere la funzione in anticipo

227
00:11:23,560 --> 00:11:26,430
per far sapere che Javascript
questo è in realtà una funzione.

228
00:11:26,430 --> 00:11:29,820
>> Quindi questo è solo qualche semplice somma
funzione che restituisce xoy,

229
00:11:29,820 --> 00:11:33,800
e quindi ciò che è anche fresco
è che si può effettivamente

230
00:11:33,800 --> 00:11:35,950
assegnare una funzione a una variabile.

231
00:11:35,950 --> 00:11:41,770
Quindi, in questo caso, è ora la somma
funzione che realmente fa somma.

232
00:11:41,770 --> 00:11:47,740
Quindi, se si nota qui, abbiamo
funzione, il nome della funzione, gli ingressi.

233
00:11:47,740 --> 00:11:48,860
Giusto?

234
00:11:48,860 --> 00:11:52,120
Qui dobbiamo solo funzione e gli ingressi.

235
00:11:52,120 --> 00:11:54,310
Quindi questo è chiamato una funzione anonima.

236
00:11:54,310 --> 00:11:59,265
E questo è qualcosa che dovrebbe essere nuovo
per la maggior parte di voi ragazzi, se non tutti voi.

237
00:11:59,265 --> 00:12:01,140
Quindi, in pratica ciò che
significa è che non lo facciamo

238
00:12:01,140 --> 00:12:03,050
bisogno di nome del nostro
funzione in questo caso.

239
00:12:03,050 --> 00:12:06,260
Possiamo solo dire: "OK, ho intenzione di
avere questa funzione che viene eseguita, qui

240
00:12:06,260 --> 00:12:08,550
sono i suoi ingressi, ed ecco
quello che sta per fare. "

241
00:12:08,550 --> 00:12:12,540
E soprattutto quando si sta assegnando
una funzione di qualche variabile

242
00:12:12,540 --> 00:12:14,950
che si sta andando a manipolare,
Non necessariamente

243
00:12:14,950 --> 00:12:17,116
bisogno di nominarlo perché
si sta andando ad essere riferimento

244
00:12:17,116 --> 00:12:20,990
dal presente variabile
nome, non con qualsiasi

245
00:12:20,990 --> 00:12:22,840
la funzione è stata effettivamente chiamato.

246
00:12:22,840 --> 00:12:23,550
OK?

247
00:12:23,550 --> 00:12:27,810
>> Quindi, se vediamo qui,
avere qualche somma variabile ora

248
00:12:27,810 --> 00:12:30,920
che è uguale alla
somma di tre e cinque.

249
00:12:30,920 --> 00:12:33,070
E vorremmo ottenere questo.

250
00:12:33,070 --> 00:12:36,750
E questo sarebbe solo avere un po 'di allarme,
tre più cinque fa il numero.

251
00:12:36,750 --> 00:12:43,950
Questo, più sarà solo concatenare
qualunque sia la nostra risposta è stata sulla corda.

252
00:12:43,950 --> 00:12:47,420
Inoltre fresco, più in grado di concatenare le stringhe.

253
00:12:47,420 --> 00:12:53,510
>> Per JavaScript, come PHP,
HTML, CSS e come abbiamo detto,

254
00:12:53,510 --> 00:12:56,450
un sacco di esso stiamo tipo di assunzione
le ruote di formazione off qui

255
00:12:56,450 --> 00:13:02,030
e voi ragazzi avete un sacco di know
come capire veramente queste cose.

256
00:13:02,030 --> 00:13:04,280
Sono un po 'diverso,
ma non sono così estranea

257
00:13:04,280 --> 00:13:09,460
e che non è possibile su Google le cose o
cercarne una in linea con le scuole W3.

258
00:13:09,460 --> 00:13:12,755
E noi stiamo davvero aspettando
ragazzi a, tipo di esperimento

259
00:13:12,755 --> 00:13:14,400
e imparare da soli.

260
00:13:14,400 --> 00:13:19,490
Quindi, so che questo potrebbe sembrare un po '
meno approfondita di alcune delle cose c

261
00:13:19,490 --> 00:13:21,936
lo facciamo, ma che in realtà per un motivo.

262
00:13:21,936 --> 00:13:25,060

263
00:13:25,060 --> 00:13:28,470
Ma spero che non sia troppo
differente, e non è esagerata.

264
00:13:28,470 --> 00:13:31,940
>> Così array in JavaScript,
ancora molto, molto simili.

265
00:13:31,940 --> 00:13:32,460
Giusto?

266
00:13:32,460 --> 00:13:36,520
Abbiamo qualche matrice variabile
che è pari a mensole vuote,

267
00:13:36,520 --> 00:13:40,340
e questo è solo un array vuoto.

268
00:13:40,340 --> 00:13:43,420
Questo è spesso chiamato
notazione array letterale.

269
00:13:43,420 --> 00:13:45,280
Questo è solo una cosa che chiamiamo.

270
00:13:45,280 --> 00:13:51,380
Se vediamo matrice due qui, abbiamo un po '
array letterale che ha tre elementi,

271
00:13:51,380 --> 00:13:51,910
giusto?

272
00:13:51,910 --> 00:13:54,640
E poi abbiamo un po '
var terzo elemento che è

273
00:13:54,640 --> 00:13:58,060
qualche variabile che è solo
intenzione di tenere questa stringa, JS.

274
00:13:58,060 --> 00:14:01,760

275
00:14:01,760 --> 00:14:06,170
>> Gli elementi, buoni a notare,
sono separati da virgole,

276
00:14:06,170 --> 00:14:07,740
proprio come ci si aspetterebbe.

277
00:14:07,740 --> 00:14:14,630
E si può anche accedere a questi, come abbiamo fatto noi
in C, con questa notazione indice, giusto?

278
00:14:14,630 --> 00:14:16,950
Così diverso da PHP
Ora, stiamo andando indietro

279
00:14:16,950 --> 00:14:20,180
a solo tipo di riferimento
per le cose di indice.

280
00:14:20,180 --> 00:14:22,189
Proprio come C, è anche indice zero.

281
00:14:22,189 --> 00:14:25,230
Mi sento come se sarebbe davvero crudele
se improvvisamente reso JavaScript uno

282
00:14:25,230 --> 00:14:30,630
l'indice, e si doveva del tutto
ripensare come pensi di array.

283
00:14:30,630 --> 00:14:36,140
>> Una cosa interessante è che invece
di dover fare-- se mai

284
00:14:36,140 --> 00:14:39,240
voluto la lunghezza di un array,
forse si scorrerlo

285
00:14:39,240 --> 00:14:43,430
fino a trovare un fine, o
si sarebbe solo sapere di cosa si tratta.

286
00:14:43,430 --> 00:14:49,310
Poiché JavaScript è molto sciolto in più
modi che solo tipo, come vediamo qui,

287
00:14:49,310 --> 00:14:53,310
possiamo solo fare questo array
più grande perché decidiamo di.

288
00:14:53,310 --> 00:14:56,177
Se notiamo array a tre
ha tre cose per iniziare,

289
00:14:56,177 --> 00:14:58,510
ma poi tutto ad un tratto,
siamo come, "oh, sto scherzando.

290
00:14:58,510 --> 00:15:01,370
Stiamo davvero andando
per renderlo 101 cose. "

291
00:15:01,370 --> 00:15:05,300
Quindi, se vi capitasse di voler conoscere il
lunghezza reale della matrice,

292
00:15:05,300 --> 00:15:06,680
lo si fa in questo modo.

293
00:15:06,680 --> 00:15:10,470
E stiamo andando a vedere un sacco
di questa notazione in esempi,

294
00:15:10,470 --> 00:15:12,730
ma con JavaScript
è in genere qualunque

295
00:15:12,730 --> 00:15:16,410
oggetto che si sta parlando
dot qualunque tipo di funzione

296
00:15:16,410 --> 00:15:17,740
che si desidera applicare ad esso.

297
00:15:17,740 --> 00:15:18,240
OK?

298
00:15:18,240 --> 00:15:20,520
>> Quindi in questo caso, la
oggetto array a due,

299
00:15:20,520 --> 00:15:23,470
e diciamo che vogliamo la
lunghezza della matrice di due.

300
00:15:23,470 --> 00:15:25,716
Quindi questo chiama proprio come la lunghezza su quello.

301
00:15:25,716 --> 00:15:27,090
E che restituirà la lunghezza.

302
00:15:27,090 --> 00:15:32,610

303
00:15:32,610 --> 00:15:36,790
Anche qualcosa di nota è
che se notiamo nostri array,

304
00:15:36,790 --> 00:15:39,830
differenza di C, non hanno
essere tutti dello stesso tipo.

305
00:15:39,830 --> 00:15:41,670
Questo è molto più simile a PHP.

306
00:15:41,670 --> 00:15:45,905
JavaScript è fondamentalmente solo come
questo interessante fusione di C e PHP.

307
00:15:45,905 --> 00:15:50,020

308
00:15:50,020 --> 00:15:52,170
Così ci arriveremo in quello.

309
00:15:52,170 --> 00:15:56,750
Per ora, diciamo solo supporre
che gli array sono fondamentalmente

310
00:15:56,750 --> 00:16:00,640
come gli array C, in quanto
essi sono indicizzati zero.

311
00:16:00,640 --> 00:16:04,120
OK, così che è tutto.

312
00:16:04,120 --> 00:16:08,850
È anche possibile estendere un
matrice a qualsiasi indice che si desidera.

313
00:16:08,850 --> 00:16:14,260
Mentre questo probabilmente Seg
colpa su di voi o darvi qualche errore,

314
00:16:14,260 --> 00:16:15,970
JavaScript è come, "No, va bene.

315
00:16:15,970 --> 00:16:16,620
Ho ottenuto questo.

316
00:16:16,620 --> 00:16:19,460
Dobbiamo solo andare dritto
dove si vuole. "

317
00:16:19,460 --> 00:16:24,310
>> OK, quindi gli oggetti sono molto importanti.

318
00:16:24,310 --> 00:16:29,720
Voi ragazzi useranno un sacco di questi
nel set P, se non ricordo male.

319
00:16:29,720 --> 00:16:34,780
Quindi la cosa che questi sono
simile al C sono strutture.

320
00:16:34,780 --> 00:16:39,290
Così si può pensare quando about--
andiamo a un esempio giusto

321
00:16:39,290 --> 00:16:41,810
dopo questo penso che sarà
rendere molto più sense--

322
00:16:41,810 --> 00:16:45,830
ma abbiamo praticamente utilizziamo oggetti a
organizzare naturalmente informazioni relative.

323
00:16:45,830 --> 00:16:47,780
Quando abbiamo parlato
struct in C, spesso

324
00:16:47,780 --> 00:16:53,405
parlare di uno studente che aveva qualche nome,
ID, casa, sai, la concentrazione.

325
00:16:53,405 --> 00:16:56,030
E questo è il tipo di la stessa cosa
che usiamo per gli oggetti qui.

326
00:16:56,030 --> 00:16:59,300
E 'solo di organizzare
informazioni simili.

327
00:16:59,300 --> 00:17:03,620
>> Si può anche pensare a questi come più
simile a associative array in PHP.

328
00:17:03,620 --> 00:17:10,010
Quindi questo sarebbe genere della cosa
dove abbiamo qualche chiave di un certo valore,

329
00:17:10,010 --> 00:17:12,859
molto simile al PHP.

330
00:17:12,859 --> 00:17:15,780
Così è possibile inizializzare alcuni
oggetto vuoto, come vediamo qui,

331
00:17:15,780 --> 00:17:17,390
solo con le parentesi graffe.

332
00:17:17,390 --> 00:17:19,160
Array Quindi sono parentesi quadre.

333
00:17:19,160 --> 00:17:21,220
Oggetti vuoti sono parentesi graffe.

334
00:17:21,220 --> 00:17:24,020
Buona distinzione di avere.

335
00:17:24,020 --> 00:17:27,319
E questi sono solo due diversi
modi per impostare le proprietà.

336
00:17:27,319 --> 00:17:31,460
Quindi questo è una specie di
più di un modo che

337
00:17:31,460 --> 00:17:35,220
è simile a PHP, con la nostra
array associativi, con la nostra chiave,

338
00:17:35,220 --> 00:17:39,910
e il nostro valore, mentre
questo è-- Avrete

339
00:17:39,910 --> 00:17:41,920
vedere questo molto più in JavaScript.

340
00:17:41,920 --> 00:17:43,550
Questo tende ad essere la convenzione.

341
00:17:43,550 --> 00:17:47,660
E nello stesso modo in cui abbiamo fatto
array a due lunghezza punto, questo sta dicendo,

342
00:17:47,660 --> 00:17:51,580
"OK, me dare
attributo di questo oggetto. "

343
00:17:51,580 --> 00:17:52,110
Giusto?

344
00:17:52,110 --> 00:17:55,660
Così allo stesso modo è stato come, "dammi
la lunghezza attributo della matrice a due, "

345
00:17:55,660 --> 00:17:59,970
questo sta dicendo: "dammi un po '
di proprietà del nostro oggetto vuoto. "

346
00:17:59,970 --> 00:18:02,890
Oppure in questo caso siamo
assegnandolo a un valore qui.

347
00:18:02,890 --> 00:18:06,200
Ma si potrebbe anche accedere in questo modo.

348
00:18:06,200 --> 00:18:09,090
>> E allora ecco questo è solo
mostrando due avvisi diversi.

349
00:18:09,090 --> 00:18:12,320
Quindi questo avrebbe mostrato le segnalazioni
sarebbe la stessa esatta,

350
00:18:12,320 --> 00:18:17,150
è solo due modi diversi
Accedendo l'elemento che vogliamo.

351
00:18:17,150 --> 00:18:19,552
Questo fa senso per tutti?

352
00:18:19,552 --> 00:18:21,510
Mi sento come questo
probabilmente ha più senso,

353
00:18:21,510 --> 00:18:23,270
solo perché stiamo venendo fuori di PHP.

354
00:18:23,270 --> 00:18:26,400
Ma come facciamo altri esempi, questo
è letteralmente esattamente lo stesso.

355
00:18:26,400 --> 00:18:28,170
Un sacco di esso è solo cambiamento nella sintassi.

356
00:18:28,170 --> 00:18:30,710

357
00:18:30,710 --> 00:18:33,030
>> OK, così esempi.

358
00:18:33,030 --> 00:18:34,180
Amo esempi.

359
00:18:34,180 --> 00:18:40,070
Quindi, ecco alcuni CS50
variabile che è un oggetto,

360
00:18:40,070 --> 00:18:42,160
e immagazziniamo tutto questo
informazioni su di esso.

361
00:18:42,160 --> 00:18:46,680
Così abbiamo corso, istruttore,
TFS, pset, e nastro adesivo.

362
00:18:46,680 --> 00:18:51,840
Così notiamo questi sono quasi
tutti diversi tipi.

363
00:18:51,840 --> 00:18:52,340
Giusto?

364
00:18:52,340 --> 00:18:56,230
Così gli oggetti possono memorizzare
attributi di tipi diversi.

365
00:18:56,230 --> 00:19:01,220
Possiamo pensare questo-- è molto
simile al nostro array associativo in PHP.

366
00:19:01,220 --> 00:19:07,470
Così chiave, il valore, la chiave, il valore,
chiave, valore, così via e così via.

367
00:19:07,470 --> 00:19:11,230
Nei interessante nello stesso modo
che possiamo avere array all'interno di array,

368
00:19:11,230 --> 00:19:14,690
possiamo anche avere oggetti all'interno
oggetti o array all'interno di oggetti.

369
00:19:14,690 --> 00:19:18,410
Non si è mai veramente limitati a
solo una sola delle cose.

370
00:19:18,410 --> 00:19:24,220
Possiamo ottenere molto Inceptionesque, basta
proseguire nella tana del coniglio lì.

371
00:19:24,220 --> 00:19:26,080
>> Quindi, se notiamo, abbiamo
avere qualche corso che

372
00:19:26,080 --> 00:19:31,120
è una stringa, istruttore che è una stringa,
e array, un int, e un valore booleano.

373
00:19:31,120 --> 00:19:36,110
Quindi tutte queste cose diverse.

374
00:19:36,110 --> 00:19:39,600
>> Va bene, quindi, abbiamo un altro.

375
00:19:39,600 --> 00:19:42,930
Quindi, in questo caso, abbiamo
un array di oggetti.

376
00:19:42,930 --> 00:19:45,320
Quindi, solo come un oggetto
possono avere un array in esso.

377
00:19:45,320 --> 00:19:47,210
Possiamo anche avere un array di oggetti.

378
00:19:47,210 --> 00:19:51,250
Questo potrebbe essere utile
pensare simile al tipo

379
00:19:51,250 --> 00:19:54,260
di come abbiamo avuto un hash
tavolo, abbiamo avuto un array

380
00:19:54,260 --> 00:19:56,220
di tutti questi diversi
tipi di struct che

381
00:19:56,220 --> 00:19:59,070
erano puntatori a diverse
nodi e quant'altro.

382
00:19:59,070 --> 00:20:01,420
Ma in questo caso,
hanno una serie di oggetti.

383
00:20:01,420 --> 00:20:04,890
Quindi questo è come un array
array di associativi.

384
00:20:04,890 --> 00:20:09,430
Quindi abbiamo qualche primo elemento sarebbe
essere l'oggetto con il nome James

385
00:20:09,430 --> 00:20:11,340
e casa Winthrop.

386
00:20:11,340 --> 00:20:14,780
>> Voi ragazzi potrebbe ricordare
qualcosa di molto simile a questo

387
00:20:14,780 --> 00:20:21,710
con la vostra ultima pset, dove se si
tirato qualcosa dal database,

388
00:20:21,710 --> 00:20:24,480
il primo tipo di
cosa nella propria matrice era

389
00:20:24,480 --> 00:20:27,110
tutte le informazioni relative
il primo utente che ha incontrato esso,

390
00:20:27,110 --> 00:20:30,765
e poi si doveva indice in quella
per ottenere il loro titolo o la cache

391
00:20:30,765 --> 00:20:32,110
o roba del genere.

392
00:20:32,110 --> 00:20:34,620
Quindi questo è molto simile
cosa, solo un piccolo cambiamento

393
00:20:34,620 --> 00:20:39,570
nella sintassi, il cambiamento po 'in
le parole che usiamo per descriverli.

394
00:20:39,570 --> 00:20:45,960
>> Quindi, se volessimo, qualcuno può dire
me ciò che questo avviso farei qui?

395
00:20:45,960 --> 00:20:48,780
O che questo po 'di
codice dovrebbe fare per noi?

396
00:20:48,780 --> 00:20:50,992

397
00:20:50,992 --> 00:20:52,616
AUDIENCE: Vi darà tutti i nomi.

398
00:20:52,616 --> 00:20:54,900
ALLISON Buchholtz-AU: Destra, quindi
sarebbe solo avvisare con tutti i nomi

399
00:20:54,900 --> 00:20:57,960
perché sarebbe passare attraverso
Cottage i, così piacerebbe iniziare a zero.

400
00:20:57,960 --> 00:21:01,330
Così diceva, OK stiamo cercando
in questo primo oggetto, che

401
00:21:01,330 --> 00:21:03,210
è il primo slot nel nostro array.

402
00:21:03,210 --> 00:21:06,900
E dice, "dammi la
attributo, il nome di tale oggetto. "

403
00:21:06,900 --> 00:21:09,030
Così siamo andate qui, avremmo
scan, avremmo potuto trovare nome,

404
00:21:09,030 --> 00:21:11,340
e ci piacerebbe stampiamo
James, Molly, e Carl.

405
00:21:11,340 --> 00:21:14,410

406
00:21:14,410 --> 00:21:15,799
Tutte le domande fino ad ora?

407
00:21:15,799 --> 00:21:17,590
JavaScript purtroppo
si sta andando ad essere

408
00:21:17,590 --> 00:21:20,950
facendo un sacco di guardare sul vostro
proprio, cercando di capire la sintassi,

409
00:21:20,950 --> 00:21:21,910
alle prese con esso.

410
00:21:21,910 --> 00:21:25,870
Ma naturalmente io sono sempre qui,
orari di ufficio sono sempre qui.

411
00:21:25,870 --> 00:21:28,260
Potrei essere il martedì di questa settimana.

412
00:21:28,260 --> 00:21:31,050
Quindi, se ci sei, è possibile
venire a visitare questa settimana.

413
00:21:31,050 --> 00:21:32,470
Sarebbe fantastico.

414
00:21:32,470 --> 00:21:36,260
>> OK, così DOM è Document-Object Model.

415
00:21:36,260 --> 00:21:38,900
Quindi questo è solo un modo
che ci piace pensare

416
00:21:38,900 --> 00:21:45,720
di come il nostro HTML e tutto
al suo interno è organizzato.

417
00:21:45,720 --> 00:21:49,930
Questo è molto qualcosa che
probabilmente venire sul quiz.

418
00:21:49,930 --> 00:21:58,150
So che il mio anno, è stato come qui è
File HTML, compila il DOM per esso.

419
00:21:58,150 --> 00:21:59,770
E basta compilare piccole cose.

420
00:21:59,770 --> 00:22:01,500
Questi dovrebbero essere i punti di facile spera.

421
00:22:01,500 --> 00:22:03,450
Spero che possiate see--

422
00:22:03,450 --> 00:22:04,590
>> AUDIENCE: [incomprensibile]

423
00:22:04,590 --> 00:22:06,660
>> ALLISON Buchholtz-AU: So
vedete questo albero qui?

424
00:22:06,660 --> 00:22:07,200
>> PUBBLICO: Sì.

425
00:22:07,200 --> 00:22:08,949
>> ALLISON Buchholtz-AU:
Così chiederanno uso

426
00:22:08,949 --> 00:22:11,750
compilare ciò va sotto il corpo.

427
00:22:11,750 --> 00:22:15,770
Forse sotto il corpo, abbiamo un po '
div o ci sono alcuni punti,

428
00:22:15,770 --> 00:22:19,160
e ti chiederemo di compilare
un albero molto simile a questo.

429
00:22:19,160 --> 00:22:21,440
Così saremo camminando attraverso di essa.

430
00:22:21,440 --> 00:22:26,120
Così il Document Object-
Modello è solo un modo

431
00:22:26,120 --> 00:22:31,240
strutturare e pensare
circa il nostro HTML graficamente.

432
00:22:31,240 --> 00:22:33,860

433
00:22:33,860 --> 00:22:35,840
E anche quando arriviamo
in più JavaScript,

434
00:22:35,840 --> 00:22:37,640
sta andando essere il
modo che in realtà

435
00:22:37,640 --> 00:22:39,990
manipolare diverso
elementi della pagina.

436
00:22:39,990 --> 00:22:43,980
Abbiamo bisogno di un modo per accedere a ciascun
delle cose nel nostro HTML,

437
00:22:43,980 --> 00:22:48,050
e quindi questo ci dà molto
modo standardizzato concreto

438
00:22:48,050 --> 00:22:51,010
attraverso varie pagine web per farlo.

439
00:22:51,010 --> 00:22:53,440
>> Quindi, se abbiamo appena attraversiamo
questo qui, naturalmente

440
00:22:53,440 --> 00:22:56,790
il nostro documento è come tutto il nostro file.

441
00:22:56,790 --> 00:22:59,350
Ciò ovviamente ha senso
che è la cosa più alta,

442
00:22:59,350 --> 00:23:03,520
e poi abbiamo il nostro attuale HTML,
che corrisponde a questo tag.

443
00:23:03,520 --> 00:23:08,480
Anche se in trattino tag
correttamente, quindi la creazione di questo albero DOM

444
00:23:08,480 --> 00:23:10,530
diventa super semplice.

445
00:23:10,530 --> 00:23:12,400
Così abbiamo qualche testa qui.

446
00:23:12,400 --> 00:23:15,780
Abbiamo un corpo che
vediamo staminali fuori di HTML,

447
00:23:15,780 --> 00:23:18,530
ed è per questo che abbiamo la testa e il corpo.

448
00:23:18,530 --> 00:23:22,880
In testa, abbiamo qualche
tag title, un tag title fine,

449
00:23:22,880 --> 00:23:24,570
così sappiamo che viene dopo la testa.

450
00:23:24,570 --> 00:23:28,040
E all'interno del nostro tag title,
abbiamo ciao, mondo.

451
00:23:28,040 --> 00:23:28,740
OK?

452
00:23:28,740 --> 00:23:31,311
Ecco, questo è tutto questo ramo di sinistra.

453
00:23:31,311 --> 00:23:34,060
E poi per il ramo di destra
qui, vediamo che abbiamo HTML,

454
00:23:34,060 --> 00:23:38,680
OK abbiamo fatto questa parte di testa,
stiamo cercando proprio corpo,

455
00:23:38,680 --> 00:23:40,670
così abbiamo qualche zona del corpo.

456
00:23:40,670 --> 00:23:44,350
E entro tale, l'unico
cosa che abbiamo è ciao, mondo.

457
00:23:44,350 --> 00:23:45,090
OK?

458
00:23:45,090 --> 00:23:54,130
Se avessimo le cose come
qualche staffa p e poi

459
00:23:54,130 --> 00:23:57,500
ciao, mondo, e poi un altro
Staffa p di addio, mondo,

460
00:23:57,500 --> 00:24:00,080
avremmo due bolle
venuta fuori di qui.

461
00:24:00,080 --> 00:24:05,550
Perché sono entrambi sotto il corpo, ma
sono paragrafi separati questo caso.

462
00:24:05,550 --> 00:24:11,520
C'è sicuramente pratica
su che in quiz precedenti,

463
00:24:11,520 --> 00:24:14,570
così come un sacco in linea su di esso.

464
00:24:14,570 --> 00:24:18,260
OK così, questo lascia solo
di vedere tutto bene

465
00:24:18,260 --> 00:24:20,810
e manipolare le cose
molto sistematico.

466
00:24:20,810 --> 00:24:21,340
OK?

467
00:24:21,340 --> 00:24:23,640
Sappiamo esattamente come
attraversare attraverso questo albero,

468
00:24:23,640 --> 00:24:26,910
così sappiamo cosa vogliamo accedere.

469
00:24:26,910 --> 00:24:31,690
>> OK quindi questo è per questo che vogliamo
per avere questo tipo di modello,

470
00:24:31,690 --> 00:24:35,190
in modo da poter usare cose come questa,
e capiamo che cosa significano,

471
00:24:35,190 --> 00:24:38,370
e sono standardizzati
in tutte le cose che facciamo.

472
00:24:38,370 --> 00:24:45,900
Così il titolo del documento punto è solo
il titolo di our-- tutti questi

473
00:24:45,900 --> 00:24:48,960
sono piuttosto auto esplicativo,
Mi piace pensare.

474
00:24:48,960 --> 00:24:51,660
Così i primi tre
esempi sono solo dicendo,

475
00:24:51,660 --> 00:24:54,770
"OK, dammi la
titolo di questa pagina web. "

476
00:24:54,770 --> 00:24:58,030
Così vi darà ciò che
corrisponde al titolo.

477
00:24:58,030 --> 00:25:01,880
>> Corpo Document dot sta per darvi
tutto ciò che è all'interno di questi tag body.

478
00:25:01,880 --> 00:25:03,240
Quindi è possibile modificare tale.

479
00:25:03,240 --> 00:25:07,820
E dot documento corpo dot
inserire HTML è molto fresco,

480
00:25:07,820 --> 00:25:11,660
e forse non è come super-
intuitivo, ma l'HTML interno

481
00:25:11,660 --> 00:25:13,740
corrisponde a questo qui.

482
00:25:13,740 --> 00:25:17,410
Quindi, se mai vuole
manipolare il testo su una pagina,

483
00:25:17,410 --> 00:25:22,700
in genere si sta andando a fare
qualcosa con dot corpo HTML interno.

484
00:25:22,700 --> 00:25:23,820
OK?

485
00:25:23,820 --> 00:25:31,341
Così HTML interno tende a riferirsi a
ciò che è in realtà tra questi tag.

486
00:25:31,341 --> 00:25:31,840
OK?

487
00:25:31,840 --> 00:25:33,020
E poi funzioni utili.

488
00:25:33,020 --> 00:25:40,390
Quindi, se si voleva ottenere
uno di questi, ogni elemento,

489
00:25:40,390 --> 00:25:43,140
abbiamo qualche Id, classe
nome, o il nome di tag.

490
00:25:43,140 --> 00:25:47,100
Questo è molto simile a
cose che abbiamo fatto con i CSS, giusto?

491
00:25:47,100 --> 00:25:51,360
Dove abbiamo alcuni selettori che
conforme a un tag, una classe

492
00:25:51,360 --> 00:25:53,800
che li, o un Id dare.

493
00:25:53,800 --> 00:25:55,310
Questo è molto nello stesso modo.

494
00:25:55,310 --> 00:26:00,720
Se avete qualcosa che
ha qualche classe di cane,

495
00:26:00,720 --> 00:26:05,800
e tu dici ottenere elementi per nome tag,
e si mette il cane in there-- o dispiaciuto,

496
00:26:05,800 --> 00:26:06,610
nome della classe.

497
00:26:06,610 --> 00:26:07,770
Si può mettere punti in là.

498
00:26:07,770 --> 00:26:11,780
E 'intenzione di tornare tutti coloro
elementi a voi che hanno quella classe.

499
00:26:11,780 --> 00:26:13,880
Quindi è possibile modificare solo quelle.

500
00:26:13,880 --> 00:26:18,430
Allo stesso modo, forse semplicemente
voglia di manipolare alcuni di testa, così

501
00:26:18,430 --> 00:26:20,980
alcuni intestazione h1, come abbiamo fatto noi.

502
00:26:20,980 --> 00:26:24,900
Si potrebbe fare ottenere elementi per tag
nome, perché h1 è un nome di tag.

503
00:26:24,900 --> 00:26:29,270
E allo stesso modo, se si desidera ottenere
qualche cosa unica, si può fare tag get.

504
00:26:29,270 --> 00:26:31,100
Ottenere elemento da Id.

505
00:26:31,100 --> 00:26:32,710
E sono in realtà un sacco di questi.

506
00:26:32,710 --> 00:26:36,300
Questi sono solo come tre dei moltissimi.

507
00:26:36,300 --> 00:26:39,600
Quindi, se si va online, come
Ho intenzione di incoraggiare la

508
00:26:39,600 --> 00:26:45,342
di fare, e fare un po '
ricerca sul proprio,

509
00:26:45,342 --> 00:26:48,450
Consiglio vivamente
cercando in tutti quelli.

510
00:26:48,450 --> 00:26:50,880
Potrebbero essere super
utile, specialmente quando

511
00:26:50,880 --> 00:26:57,180
si vuole solo tipo di manipolazione
cose molto specifiche, senza dover

512
00:26:57,180 --> 00:27:00,390
di passare attraverso e provare
per analizzare tutto.

513
00:27:00,390 --> 00:27:03,540
>> OK, quindi l'ultima cosa
è JavaScript eventi.

514
00:27:03,540 --> 00:27:10,730
Così, quando stavo parlando in precedenza
di andare su un sito web,

515
00:27:10,730 --> 00:27:14,340
e quando si passa sopra qualcosa,
o il vostro mouse sopra qualcosa,

516
00:27:14,340 --> 00:27:15,420
qualcosa accade.

517
00:27:15,420 --> 00:27:17,900
Questo è ciò che vorremmo
pensare come un evento.

518
00:27:17,900 --> 00:27:23,970
Così che cosa abbiamo che potrebbe
essere utile qui è onclick.

519
00:27:23,970 --> 00:27:29,140
Quindi il mio era in hover, che, io sono
abbastanza sicuro, è solo al passaggio del mouse.

520
00:27:29,140 --> 00:27:31,300
Anche una tonnellata di questi
che si può cercare.

521
00:27:31,300 --> 00:27:34,340
C'è un intero elenco on-line
delle cose diverse

522
00:27:34,340 --> 00:27:37,130
che si può ascoltare per.

523
00:27:37,130 --> 00:27:41,220
>> Ma gli eventi JavaScript sono
fondamentalmente solo rispondendo alle cose

524
00:27:41,220 --> 00:27:42,430
che l'utente sta facendo.

525
00:27:42,430 --> 00:27:42,930
Giusto?

526
00:27:42,930 --> 00:27:45,220
Così l'utente fa
qualcosa, questo è un evento,

527
00:27:45,220 --> 00:27:48,340
e JavaScript risponderà
tuttavia ti piacerebbe a.

528
00:27:48,340 --> 00:27:49,770
Sarà rispondere di conseguenza.

529
00:27:49,770 --> 00:27:54,630
Quindi, in questo caso, abbiamo
alcuni onload finestra dot.

530
00:27:54,630 --> 00:27:57,170
Quindi che cosa dice questo è, "aspetta
fino caricato della finestra. "

531
00:27:57,170 --> 00:27:57,780
OK?

532
00:27:57,780 --> 00:28:02,102
Così, quando tutto è caricato, onload,
quindi è possibile eseguire questa funzione.

533
00:28:02,102 --> 00:28:03,810
Così, quando tutto è
caricato, si sta andando

534
00:28:03,810 --> 00:28:07,760
avere qualche pulsante di ricerca
che ottiene un elemento da Id,

535
00:28:07,760 --> 00:28:13,740
e stampa qualunque cosa
elemento è come il pulsante Cerca.

536
00:28:13,740 --> 00:28:17,050
E poi abbiamo questa variabile,
diciamo, "OK, onclick."

537
00:28:17,050 --> 00:28:20,390
Così, quando sentiamo un click
sul pulsante di ricerca,

538
00:28:20,390 --> 00:28:23,990
eseguire questa funzione, che è un
avviso, si fa clic sul pulsante Cerca.

539
00:28:23,990 --> 00:28:28,910
>> Che cosa succede è-- questo è un bel
piccola rappresentazione grafica qui.

540
00:28:28,910 --> 00:28:31,480
Così i nostri carichi di documenti,
questo è il nostro onload,

541
00:28:31,480 --> 00:28:34,340
troviamo la nostra Ricerca
pulsante, che è presente.

542
00:28:34,340 --> 00:28:36,570
Stiamo cercando il nostro pulsante Cerca.

543
00:28:36,570 --> 00:28:40,790
E poi, quando il pulsante di ricerca è
cliccato, corrisponde a destra qui.

544
00:28:40,790 --> 00:28:41,980
Onclick.

545
00:28:41,980 --> 00:28:47,300
Poi abbiamo finalmente avvertiamo il nostro utente,
che è questa ultima linea qui.

546
00:28:47,300 --> 00:28:48,250
OK?

547
00:28:48,250 --> 00:28:52,960
Così ciascuno di questi quattro punti appena
corrisponde ai quattro scatole

548
00:28:52,960 --> 00:28:55,031
là giù sul fondo.

549
00:28:55,031 --> 00:28:56,405
Questo fa senso per tutti?

550
00:28:56,405 --> 00:29:01,120

551
00:29:01,120 --> 00:29:05,200
>> E poi una cosa che sto solo andando
parlare molto, molto brevemente, che

552
00:29:05,200 --> 00:29:08,660
vi incoraggio a ragazzi
Andare a cercare più in è

553
00:29:08,660 --> 00:29:13,210
jQuery, che è solo una libreria
che è costruito in cima a JavaScript.

554
00:29:13,210 --> 00:29:16,480
È super utile, come
per molte librerie.

555
00:29:16,480 --> 00:29:18,320
Ci sono un sacco di funzioni.

556
00:29:18,320 --> 00:29:21,930
Quindi, se c'è qualcosa che mai
si vuole fare in JavaScript,

557
00:29:21,930 --> 00:29:24,880
il primo istinto
non dovrebbe essere quello di pensare

558
00:29:24,880 --> 00:29:27,340
di, "quale funzione dovrebbe
I codice? "Dovrebbe essere,

559
00:29:27,340 --> 00:29:29,560
"Fammi vedere di qualcuno
già fatto questo per me. "

560
00:29:29,560 --> 00:29:32,800
Perché nove volte su dieci,
qualcuno avrà già fatto,

561
00:29:32,800 --> 00:29:35,760
e probabilmente hanno fatto meglio.

562
00:29:35,760 --> 00:29:39,990
La gente spende un sacco di tempo a fare queste,
e JavaScript è molto usato,

563
00:29:39,990 --> 00:29:42,810
così le persone sono costantemente
cercando di renderlo migliore.

564
00:29:42,810 --> 00:29:47,110
E jQuery ha un sacco di funzioni
che probabilmente sarà utile a voi

565
00:29:47,110 --> 00:29:50,470
nel progetto finale, se siete
fare qualsiasi cosa con il web design.

566
00:29:50,470 --> 00:29:53,480
Come mi piace dire, "il lavoro
più intelligente, non di più. "

567
00:29:53,480 --> 00:29:57,130
Se voi ragazzi che, sarà fantastico.

568
00:29:57,130 --> 00:30:00,330
Quando siamo al hackathon non lo faccio
voglio che tu sia tutti stressati.

569
00:30:00,330 --> 00:30:03,600
Io voglio che tu sia come, "ho avuto
questo. jQuery di ottenuto la mia schiena.

570
00:30:03,600 --> 00:30:05,790
Non ho bisogno di scrivere queste funzioni. "

571
00:30:05,790 --> 00:30:07,636
>> Quindi, solo due cose a
Ricordo, io vado

572
00:30:07,636 --> 00:30:10,220
per farti sembrare più ragazzi
in jQuery per conto proprio.

573
00:30:10,220 --> 00:30:13,070
Tutto quello che sto per dire è che
fa alcune cose piuttosto impressionante

574
00:30:13,070 --> 00:30:15,220
e può rendere la vostra vita
molto più semplice.

575
00:30:15,220 --> 00:30:17,150
Ma ciò che si vuole
avere è qualunque di file

576
00:30:17,150 --> 00:30:21,020
che si sta andando a utilizzare in,
si sta andando a voler queste due linee.

577
00:30:21,020 --> 00:30:25,630
Stai andando a volere la
sceneggiatura di js jQuery punti js.

578
00:30:25,630 --> 00:30:28,500
E in realtà l'origine
sta per essere un po 'URL.

579
00:30:28,500 --> 00:30:35,870
Se Google jQuery, Google
in realtà ospita tutti i file per voi.

580
00:30:35,870 --> 00:30:38,950
Così si vuole definitivamente a
input URL invece.

581
00:30:38,950 --> 00:30:41,130
Ho appena messo questo qui
per semplicità.

582
00:30:41,130 --> 00:30:45,180
Tutto questo significa dove
trovare la libreria jQuery.

583
00:30:45,180 --> 00:30:48,600
E 'enorme, quindi non si vuole
di ospitare sul proprio computer

584
00:30:48,600 --> 00:30:53,390
se si può evitare, che è per questo che
tendono a mettere solo in URL di Google che

585
00:30:53,390 --> 00:30:55,880
ospita tutti questi file per voi.

586
00:30:55,880 --> 00:30:56,380
OK?

587
00:30:56,380 --> 00:30:58,850
Google, io prometto
sarà lì.

588
00:30:58,850 --> 00:31:01,200
>> E poi qualunque cosa
File JavaScript che sei

589
00:31:01,200 --> 00:31:07,150
usando, quindi questo è solo alcuni esterni
File JavaScript che si sta utilizzando.

590
00:31:07,150 --> 00:31:11,570
Nello stesso modo in cui ci colleghiamo al nostro CSS
file, questa è la stessa cosa.

591
00:31:11,570 --> 00:31:15,480
Questo collega solo al file
dove il vostro JavaScript è.

592
00:31:15,480 --> 00:31:18,970
E ho alcuni esempi
con semplice JavaScript.

593
00:31:18,970 --> 00:31:20,220
Quindi andremo attraverso di essa.

594
00:31:20,220 --> 00:31:27,230
E poi nell'indice JavaScript,
che è il vostro file JavaScript qui,

595
00:31:27,230 --> 00:31:30,900
questo è una specie di involucro
che avete per jQuery.

596
00:31:30,900 --> 00:31:33,860
Siete quasi 99,9
per cento del tempo in corso

597
00:31:33,860 --> 00:31:36,800
per avere questo nel file index.js.

598
00:31:36,800 --> 00:31:40,010
Perché cosa dice questo è,
"Non esegue nulla

599
00:31:40,010 --> 00:31:43,480
fino a quando il documento è in realtà
ready ", che è esattamente quello che vuoi.

600
00:31:43,480 --> 00:31:46,600
Perché se il documento non è pronto,
e jQuery inizia a fare le cose,

601
00:31:46,600 --> 00:31:48,020
è solo un pasticcio.

602
00:31:48,020 --> 00:31:50,480
Così si vuole sempre avere questo wrapper.

603
00:31:50,480 --> 00:31:55,760
E poi per le cose che vanno in là,
restando proprio indagando i vostri ragazzi.

604
00:31:55,760 --> 00:32:04,610
>> OK, quindi non ci sono domande a destra
ora su JavaScript in generale?

605
00:32:04,610 --> 00:32:07,420
Oppure il modello DOM?

606
00:32:07,420 --> 00:32:10,780
In caso contrario, abbiamo un po 'fresco
esempi che possiamo andare attraverso,

607
00:32:10,780 --> 00:32:13,120
che voi mi può aiutare codice.

608
00:32:13,120 --> 00:32:15,877
Ma ho anche intenzione di essere
super bello, e se

609
00:32:15,877 --> 00:32:17,960
non voglio dire nulla
per queste, va bene.

610
00:32:17,960 --> 00:32:20,510
Posso anche solo dare esempi.

611
00:32:20,510 --> 00:32:24,581
Ma nulla sulla
PowerPoint prima di passare?

612
00:32:24,581 --> 00:32:25,080
Freddo.

613
00:32:25,080 --> 00:32:26,990
>> Mi sento come voi ragazzi dovete energia.

614
00:32:26,990 --> 00:32:31,516
Quindi penso che stiamo per avviare
con il mio esempio di partito prima.

615
00:32:31,516 --> 00:32:33,390
Abbiamo tre esempi,
avete la vostra scelta.

616
00:32:33,390 --> 00:32:37,720
Così abbiamo l'orologio, dove stiamo andando
per attuare un orologio effettivo che è

617
00:32:37,720 --> 00:32:41,430
andando ad aggiornare il passare del tempo.

618
00:32:41,430 --> 00:32:43,310
Abbiamo questa grande funzione Twitter.

619
00:32:43,310 --> 00:32:44,560
Questo-- sai cosa, aspetta.

620
00:32:44,560 --> 00:32:47,220
Stiamo andando a fare questo andare via.

621
00:32:47,220 --> 00:32:47,950
Bam.

622
00:32:47,950 --> 00:32:49,060
OK.

623
00:32:49,060 --> 00:32:56,132
>> Abbiamo questa grande funzione Twitter
qui, che-- Lo so, giusto?

624
00:32:56,132 --> 00:32:57,090
Sta andando essere grande.

625
00:32:57,090 --> 00:32:58,350
Sei ragazzi eccitato?

626
00:32:58,350 --> 00:33:01,170
Ciò sta per contare il numero
di personaggi che hai lasciato,

627
00:33:01,170 --> 00:33:04,520
quindi se scrivo in questo momento,
ovviamente si dice ancora 140,

628
00:33:04,520 --> 00:33:06,190
ma sappiamo che non è il caso.

629
00:33:06,190 --> 00:33:08,570
E poi con il nostro ultimo
qui, clicca qui per fare festa.

630
00:33:08,570 --> 00:33:12,150
Che cosa sta per accadere è quando
clicchiamo, lo sfondo del

631
00:33:12,150 --> 00:33:13,340
andando a cambiare i colori.

632
00:33:13,340 --> 00:33:17,060
Così voi ragazzi avete le opzioni di
che quello che si vuole fare prima.

633
00:33:17,060 --> 00:33:19,800
Prometto che prendo molto facile su di voi.

634
00:33:19,800 --> 00:33:22,680
Mi sento come tutti una specie
di appena molto basso chiave oggi.

635
00:33:22,680 --> 00:33:25,540
Quindi io ti passeggiata attraverso come
implementeremo tutti questi.

636
00:33:25,540 --> 00:33:28,520
Se si desidera carillon
in, che è grande, ma io

637
00:33:28,520 --> 00:33:30,020
sentire come tutti sono un po 'stanco.

638
00:33:30,020 --> 00:33:32,970
Quindi mi limiterò a piedi
attraverso questi esempi.

639
00:33:32,970 --> 00:33:35,015
Dobbiamo qualcosa che
vorremmo fare prima?

640
00:33:35,015 --> 00:33:38,140

641
00:33:38,140 --> 00:33:39,475
Chiunque?

642
00:33:39,475 --> 00:33:41,350
Nessuna preferenza?

643
00:33:41,350 --> 00:33:41,867
OK.

644
00:33:41,867 --> 00:33:42,450
Sai cosa?

645
00:33:42,450 --> 00:33:43,290
Siamo sul partito.

646
00:33:43,290 --> 00:33:48,380
Mi sento come voi ragazzi hanno bisogno di un little--
così, faremo quello partito prima.

647
00:33:48,380 --> 00:33:48,880
OK.

648
00:33:48,880 --> 00:33:51,470

649
00:33:51,470 --> 00:33:56,930
>> Quindi quello che abbiamo qui-- che è
non dovrebbe essere lì.

650
00:33:56,930 --> 00:33:57,910
Ora è buono.

651
00:33:57,910 --> 00:33:59,810
OK.

652
00:33:59,810 --> 00:34:03,110
Quindi quello che abbiamo qui è
solo una semplice pagina HTML

653
00:34:03,110 --> 00:34:07,840
che voi ragazzi dovreste essere tutti super-
conoscere dai vostri ultimi due pset.

654
00:34:07,840 --> 00:34:10,212
abbiamo il nostro tipo doc qui.

655
00:34:10,212 --> 00:34:10,920
Tutti possono vedere?

656
00:34:10,920 --> 00:34:11,420
OK.

657
00:34:11,420 --> 00:34:12,560
Freddo.

658
00:34:12,560 --> 00:34:13,900
Abbiamo il nostro HTML, ovviamente.

659
00:34:13,900 --> 00:34:18,360
Abbiamo alcuni intestazione che è
collegato ad un foglio di stile che

660
00:34:18,360 --> 00:34:21,420
appena fatto il mio carattere bella e grande e audace.

661
00:34:21,420 --> 00:34:23,489
Quindi non ti preoccupare di questo.

662
00:34:23,489 --> 00:34:26,437
>> Abbiamo qualche corpo
uno sfondo Id, OK?

663
00:34:26,437 --> 00:34:28,520
Perché stiamo andando a essere
cambiando lo sfondo.

664
00:34:28,520 --> 00:34:31,964
Così, quando stiamo cambiando il
sfondo del nostro corpo,

665
00:34:31,964 --> 00:34:35,965
ricordiamo di due settimane fa
quando abbiamo a che fare con le pagine web.

666
00:34:35,965 --> 00:34:36,840
Così bene avere questo.

667
00:34:36,840 --> 00:34:39,270
E abbiamo qualche Id è uguale a parte.

668
00:34:39,270 --> 00:34:43,909
Questo h pound ref significa semplicemente che
che sta per andare alla stessa pagina.

669
00:34:43,909 --> 00:34:47,120
E clicca qui per fare festa,
che è il motivo per cui, quando si clicca esso,

670
00:34:47,120 --> 00:34:48,940
dovrebbe cambiare i colori, per fortuna.

671
00:34:48,940 --> 00:34:54,322
>> E poi abbiamo alcuni script qui che
è solo legata a questo partito js dot

672
00:34:54,322 --> 00:34:58,100
di file, che è vuoto perchè
non abbiamo ancora fatto nulla.

673
00:34:58,100 --> 00:35:00,450
Ed è così triste.

674
00:35:00,450 --> 00:35:06,100
Ma ben presto, cambierà
colori, e sarà fantastico.

675
00:35:06,100 --> 00:35:10,520
>> Così sto solo andando a camminare voi ragazzi
attraverso il modo potremmo affrontare questo.

676
00:35:10,520 --> 00:35:14,030
Quindi la prima cosa che
si potrebbe desiderare di fare,

677
00:35:14,030 --> 00:35:18,050
se stiamo cambiando il fondo di
il corpo, la prima cosa che potrebbe desiderare

678
00:35:18,050 --> 00:35:22,730
fare è effettivamente afferrare
ciò che il corpo è, giusto?

679
00:35:22,730 --> 00:35:27,690
Quindi vogliamo avere somma, la nostra
fondo, e se si nota,

680
00:35:27,690 --> 00:35:29,567
Ho appena automaticamente appena si digita.

681
00:35:29,567 --> 00:35:32,400
Non c'è niente di speciale che abbiamo
bisogno di fare per i nostri file JavaScript.

682
00:35:32,400 --> 00:35:35,820
Posso iniziare a dichiarare le variabili,
e dichiarando funzioni random.

683
00:35:35,820 --> 00:35:38,110
Ed è forma molto più libera.

684
00:35:38,110 --> 00:35:41,930
E 'come con C, abbiamo dato a tutti voi
queste regole rigide, e sei cresciuto,

685
00:35:41,930 --> 00:35:43,220
così siamo come, "andare avanti.

686
00:35:43,220 --> 00:35:44,000
Sii libero.

687
00:35:44,000 --> 00:35:44,870
Fai quello che vuoi. "

688
00:35:44,870 --> 00:35:46,280
Ed è quello che JavaScript sia.

689
00:35:46,280 --> 00:35:48,390
Così abbiamo alcuni retroscena qui.

690
00:35:48,390 --> 00:35:55,900
Con il nostro modello DOM, sappiamo
può fare documento puntino ottenere elemento,

691
00:35:55,900 --> 00:36:00,290
e se notiamo qui,
il nostro corpo ha un Id.

692
00:36:00,290 --> 00:36:00,930
Giusto?

693
00:36:00,930 --> 00:36:06,310
Così possiamo facciamo arrivare documento
Id, e qui è semplice.

694
00:36:06,310 --> 00:36:08,295
Qual è la nostra identificazione che vogliamo qui?

695
00:36:08,295 --> 00:36:09,170
AUDIENCE: Background.

696
00:36:09,170 --> 00:36:11,280
ALLISON Buchholtz-AU: Background.

697
00:36:11,280 --> 00:36:12,230
Perfetto.

698
00:36:12,230 --> 00:36:14,250
E virgola alla fine.

699
00:36:14,250 --> 00:36:15,610
Che non è ancora andato via.

700
00:36:15,610 --> 00:36:17,330
Hai ancora bisogno i vostri punti e virgola.

701
00:36:17,330 --> 00:36:17,830
OK.

702
00:36:17,830 --> 00:36:19,690
Ecco, questo è il nostro primo.

703
00:36:19,690 --> 00:36:23,880
E quando si clicca qualcosa,
vuole che accada qualcosa, giusto?

704
00:36:23,880 --> 00:36:28,270
Così potremmo desiderare qualche variabile
che è in attesa di un click.

705
00:36:28,270 --> 00:36:32,410
Quello che andremo a fare è che andremo a
rendere il nostro legame più simile a un pulsante.

706
00:36:32,410 --> 00:36:43,140
Quindi stiamo andando ad avere qualche pulsante che
uguale documentare puntino ottenere elemento da Id.

707
00:36:43,140 --> 00:36:48,670
E se sto parlando del
clicca il link o clicca qui per fare festa

708
00:36:48,670 --> 00:36:51,850
Link, che cosa potrebbe mia Id essere qui?

709
00:36:51,850 --> 00:36:52,590
Partito.

710
00:36:52,590 --> 00:36:55,200
Corretto.

711
00:36:55,200 --> 00:36:56,500
OK, non troppo male finora.

712
00:36:56,500 --> 00:36:59,060
Ognuno ottiene quello che stiamo facendo?

713
00:36:59,060 --> 00:37:02,100
>> OK, ora abbiamo la nostra
pulsante, e vogliamo

714
00:37:02,100 --> 00:37:04,140
cose da cambiare quando si clicca su di essa.

715
00:37:04,140 --> 00:37:08,750
Quindi, se ci ricordiamo dalla nostra PowerPoint,
cosa molto semplice che possiamo fare

716
00:37:08,750 --> 00:37:12,140
è solo il pulsante dot onclick, giusto?

717
00:37:12,140 --> 00:37:14,750

718
00:37:14,750 --> 00:37:18,730
E che sta per eguagliare qualche funzione.

719
00:37:18,730 --> 00:37:20,620
Questa è una funzione anonima.

720
00:37:20,620 --> 00:37:24,620
E questo solo as-- realtà sono
andando a rendere questo un po 'più grande.

721
00:37:24,620 --> 00:37:27,330
>> Quindi quello che ho appena fatto
qui è che sto dicendo, OK,

722
00:37:27,330 --> 00:37:31,810
quando si clicca il nostro pulsante, che è
questo link che abbiamo appena fatto riferimento a,

723
00:37:31,810 --> 00:37:34,270
stiamo andando ad eseguire
questa funzione anonima.

724
00:37:34,270 --> 00:37:35,845
Non abbiamo bisogno di alcun input.

725
00:37:35,845 --> 00:37:37,220
Non ci interessa ciò che l'utente dice.

726
00:37:37,220 --> 00:37:38,800
Quando si clicca su di essa, siamo
intenzione di fare quello che vogliamo,

727
00:37:38,800 --> 00:37:40,660
che è cambiare il colore di sfondo.

728
00:37:40,660 --> 00:37:42,640
OK?

729
00:37:42,640 --> 00:37:47,224
Ecco perché non abbiamo alcun ingresso,
non ci resta che questa funzione anonima.

730
00:37:47,224 --> 00:37:49,390
Ed ora stiamo effettivamente andando
per scrivere questa funzione.

731
00:37:49,390 --> 00:37:55,040
>> Quindi c'è un sacco di modi per
potrebbe generare un colore casuale.

732
00:37:55,040 --> 00:37:59,010
Il modo in cui l'ho fatto è stato quello di
generare tre numeri casuali

733
00:37:59,010 --> 00:38:01,910
e convertirli in un triplo RGB.

734
00:38:01,910 --> 00:38:06,130
Quindi questo solo si mostra un po 'freddo
cose che se siete come, "oh,

735
00:38:06,130 --> 00:38:08,464
Ho bisogno di generare un caso
numero. "se Googled esso,

736
00:38:08,464 --> 00:38:09,630
questo è ciò che si dovrebbe trovare.

737
00:38:09,630 --> 00:38:17,580
>> Quindi abbiamo tre diversi
cose, Var, non rosso di nuovo, verde.

738
00:38:17,580 --> 00:38:18,080
Giusto?

739
00:38:18,080 --> 00:38:20,740
Quindi questi sono i tre
cose che compongono un colore.

740
00:38:20,740 --> 00:38:22,220
Blu, rosso, e verde.

741
00:38:22,220 --> 00:38:22,960
Freddo.

742
00:38:22,960 --> 00:38:27,050
E quello che possiamo fare è che sappiamo
che deve essere compresa tra 255,

743
00:38:27,050 --> 00:38:30,140
e se si guardava un po '
generatore di numeri casuali,

744
00:38:30,140 --> 00:38:36,000
si potrebbe ottenere qualcosa di come la matematica
dot casuali, che se si guarda questo in su

745
00:38:36,000 --> 00:38:39,230
torna a qualche numero
tra zero e uno.

746
00:38:39,230 --> 00:38:39,980
OK?

747
00:38:39,980 --> 00:38:44,470
E cosa fare numeri nostro
Triple RGB vanno tra?

748
00:38:44,470 --> 00:38:47,240
Zero e che cosa?

749
00:38:47,240 --> 00:38:49,000
Quello che può arrivare fino a?

750
00:38:49,000 --> 00:38:49,950
255.

751
00:38:49,950 --> 00:38:53,320
Quindi, se la matematica dot casuale
va tra zero e uno,

752
00:38:53,320 --> 00:38:56,365
come si potrebbe desiderare di convertire questo?

753
00:38:56,365 --> 00:38:56,990
AUDIENCE: tempo?

754
00:38:56,990 --> 00:38:57,830
ALLISON Buchholtz-AU: Sì, esattamente.

755
00:38:57,830 --> 00:38:58,677
Così il tempo è 255.

756
00:38:58,677 --> 00:39:00,888
>> AUDIENCE: [incomprensibile]
E 'come [incomprensibile].

757
00:39:00,888 --> 00:39:02,471
ALLISON Buchholtz-AU: Math dot casuale.

758
00:39:02,471 --> 00:39:03,096
AUDIENCE: Cool.

759
00:39:03,096 --> 00:39:04,580
ALLISON Buchholtz-AU: Sì.

760
00:39:04,580 --> 00:39:06,300
JavaScript prende solo cura di te.

761
00:39:06,300 --> 00:39:07,580
OK.

762
00:39:07,580 --> 00:39:09,360
Così possiamo farlo per tutti questi.

763
00:39:09,360 --> 00:39:10,540
Giusto?

764
00:39:10,540 --> 00:39:16,480
Math dot volte casuali 255.

765
00:39:16,480 --> 00:39:17,740
Ricevuto.

766
00:39:17,740 --> 00:39:18,820
Freddo.

767
00:39:18,820 --> 00:39:23,350
Così la cosa è, questo può
Non restituire un numero intero.

768
00:39:23,350 --> 00:39:24,080
Giusto?

769
00:39:24,080 --> 00:39:26,450
Forse abbiamo un po 'numero
tra zero e uno,

770
00:39:26,450 --> 00:39:32,150
e fa sì che sia leggermente
off, e le nostre RGBs non possono essere galleggianti.

771
00:39:32,150 --> 00:39:33,360
Hanno bisogno di essere int.

772
00:39:33,360 --> 00:39:37,610
Quindi, se si è tentato questo, che sarebbe probabilmente
avere qualche comportamento irregolare.

773
00:39:37,610 --> 00:39:38,810
Sarebbe un po 'eccentrico.

774
00:39:38,810 --> 00:39:43,200
Quindi quello che facciamo è che vogliamo fare
Assicurarsi che questi sono arrotondati,

775
00:39:43,200 --> 00:39:45,400
e si potrebbe concludere in entrambi i casi.

776
00:39:45,400 --> 00:39:47,110
Ho arrotondato con pavimento.

777
00:39:47,110 --> 00:39:49,680
Così ho sempre fatto in modo
che arrotondato per difetto.

778
00:39:49,680 --> 00:39:54,440
Ma andare fuori di quanto sia semplice
era quello di ottenere solo un numero casuale,

779
00:39:54,440 --> 00:39:57,920
come pensi che
potrebbe pavimento questo numero?

780
00:39:57,920 --> 00:40:00,720
E 'molto simile.

781
00:40:00,720 --> 00:40:02,810
Qualsiasi idea?

782
00:40:02,810 --> 00:40:06,450
Quindi, se a caso era solo la matematica dot
casuale, quindi pensi che faremmo piano?

783
00:40:06,450 --> 00:40:09,670
Math piano dot.

784
00:40:09,670 --> 00:40:11,340
E si può anche fare matematica dot soffitto.

785
00:40:11,340 --> 00:40:14,030
Rotonda è una specie di ambigua
perché non lo fai

786
00:40:14,030 --> 00:40:16,110
sapere se arrotondare o arrotondare.

787
00:40:16,110 --> 00:40:20,797
Così di solito facciamo sempre la matematica
pavimento dot, soffitto matematica dot.

788
00:40:20,797 --> 00:40:21,380
Ma honestly--

789
00:40:21,380 --> 00:40:22,780
>> AUDIENCE: Fa rotondo piano basso?

790
00:40:22,780 --> 00:40:24,740
>> ALLISON Buchholtz-AU: Piano arrotonda.

791
00:40:24,740 --> 00:40:26,990
E questo è solo una scelta da parte mia.

792
00:40:26,990 --> 00:40:32,370
>> Così ora abbiamo i nostri tre numeri
che sono stati generati casualmente,

793
00:40:32,370 --> 00:40:36,610
e quello che stiamo per fare ora è che siamo
solo andando a cambiare lo sfondo.

794
00:40:36,610 --> 00:40:37,310
OK?

795
00:40:37,310 --> 00:40:41,490
Quindi abbiamo già il nostro
sfondo tipo di immagazzinata

796
00:40:41,490 --> 00:40:43,280
in questo elemento chiamato sfondo.

797
00:40:43,280 --> 00:40:47,300
Allora, cosa che noterete è, se
hai giocato in giro con questo,

798
00:40:47,300 --> 00:40:50,460
vogliamo cambiare lo stile.

799
00:40:50,460 --> 00:40:53,812
E questo è una specie di qualcosa che
si sarebbe Google e capire,

800
00:40:53,812 --> 00:40:55,020
come il modo di cambiare il colore.

801
00:40:55,020 --> 00:40:59,210
>> Ma il modo in cui si accede a questo colore è
sfondo dot dot stile di sfondo.

802
00:40:59,210 --> 00:41:03,490
Quindi questo sta dicendo dato
questo oggetto, fondo,

803
00:41:03,490 --> 00:41:06,920
che si riferisce a tale
elemento Id lassù,

804
00:41:06,920 --> 00:41:10,690
stiamo andando a guardare il
stile all'interno dello stile,

805
00:41:10,690 --> 00:41:13,280
stiamo andando a guardare il fondo.

806
00:41:13,280 --> 00:41:14,270
OK?

807
00:41:14,270 --> 00:41:17,630
E se si va a vedere questo in su,
si potrebbe fare un po 'più di senso,

808
00:41:17,630 --> 00:41:21,930
ma questo è fondamentalmente solo dicendo,
"Dammi questo attributo molto specifico

809
00:41:21,930 --> 00:41:25,770
di ciò che ho definito in precedenza. "

810
00:41:25,770 --> 00:41:32,340
Quindi quello che stiamo cambiando a è
alcuni RGB, perché ha un senso.

811
00:41:32,340 --> 00:41:34,780
Stiamo usando RGB triplica, giusto?

812
00:41:34,780 --> 00:41:41,530
E noi have-- voglio fare in modo che
ottenere il giusto numero di citazioni in qui.

813
00:41:41,530 --> 00:41:43,940
Quindi quello che facciamo è che abbiamo
RGB, e stiamo andando

814
00:41:43,940 --> 00:41:46,800
a-- questo è come
concatenazione, che è rosso.

815
00:41:46,800 --> 00:41:50,030

816
00:41:50,030 --> 00:41:52,610
E poi vogliamo qualche virgola.

817
00:41:52,610 --> 00:41:59,925
E poi vogliamo più verde,
poi alcuni comma, e un po 'blu.

818
00:41:59,925 --> 00:42:10,640

819
00:42:10,640 --> 00:42:14,120
>> Così questi vantaggi solo
significare come concatenazione.

820
00:42:14,120 --> 00:42:19,810
Quindi questo è solo la creazione di questo
stringa che sta succedendo all'interno RGB.

821
00:42:19,810 --> 00:42:20,310
OK?

822
00:42:20,310 --> 00:42:23,200

823
00:42:23,200 --> 00:42:26,684
>> AUDIENCE: [incomprensibile] più allora
il verde plus poi rosso.

824
00:42:26,684 --> 00:42:30,163
>> ALLISON Buchholtz-AU: Sì,
perché ho fatto un casino che fino.

825
00:42:30,163 --> 00:42:30,890
Quella di un bene.

826
00:42:30,890 --> 00:42:32,110
Oh, aspetta.

827
00:42:32,110 --> 00:42:32,610
No.

828
00:42:32,610 --> 00:42:36,770
Perché ho bisogno di assicurarsi
che ho avuto tutti questi destra.

829
00:42:36,770 --> 00:42:39,680

830
00:42:39,680 --> 00:42:43,950
Quindi vi spiegherò in Momento Uno.

831
00:42:43,950 --> 00:42:47,040
Verde, blu, perfetto.

832
00:42:47,040 --> 00:42:47,971
Ora ho finito.

833
00:42:47,971 --> 00:42:48,470
Credo.

834
00:42:48,470 --> 00:42:51,570

835
00:42:51,570 --> 00:42:52,530
>> OK.

836
00:42:52,530 --> 00:42:58,085
Così che cosa si tratta, è che di fondo
sta per essere impostato su una stringa.

837
00:42:58,085 --> 00:42:58,585
Giusto?

838
00:42:58,585 --> 00:42:59,710
Che è quello che abbiamo qui.

839
00:42:59,710 --> 00:43:05,870
Sta andando essere qualche RGB 255 comma
255 comma zero o qualunque numero

840
00:43:05,870 --> 00:43:06,512
avere lì.

841
00:43:06,512 --> 00:43:08,220
Così stiamo facendo qui,
abbiamo qualche stringa.

842
00:43:08,220 --> 00:43:11,910
E quello che vogliamo fare, è che siamo
tipo di creazione dinamica

843
00:43:11,910 --> 00:43:14,010
che quando abbiamo effettivamente eseguire questo programma.

844
00:43:14,010 --> 00:43:16,570
Quindi questa è una stringa.

845
00:43:16,570 --> 00:43:20,290
Inoltre concatena con
il valore che rosso ha,

846
00:43:20,290 --> 00:43:23,320
che concatena con un
virgola, che concatena essa

847
00:43:23,320 --> 00:43:26,090
con ciò che è verde, e
così via, e così via.

848
00:43:26,090 --> 00:43:26,660
OK?

849
00:43:26,660 --> 00:43:32,210
Fino alla fine molto, che è il
chiusura parentesi di questo RGB qui.

850
00:43:32,210 --> 00:43:32,800
OK?

851
00:43:32,800 --> 00:43:37,230
>> Così che cosa questo sta per
generare è un comando davvero

852
00:43:37,230 --> 00:43:42,770
cioè RGB di tre numeri
tale contesto è ora impostato.

853
00:43:42,770 --> 00:43:43,940
OK?

854
00:43:43,940 --> 00:43:46,510
Così vediamo se funziona.

855
00:43:46,510 --> 00:43:49,720
Spero che lo fa, perché se
non, ho intenzione di essere reale triste.

856
00:43:49,720 --> 00:43:50,250
Oh no.

857
00:43:50,250 --> 00:43:52,710
OK, aspetta.

858
00:43:52,710 --> 00:43:56,730
Sicuramente sfondo
dot stile dot sfondo.

859
00:43:56,730 --> 00:43:59,569
Sono sicuramente manca
qualcosa solo piccolo.

860
00:43:59,569 --> 00:44:00,610
Non voi ragazzi che odio?

861
00:44:00,610 --> 00:44:04,020
Quando è solo un piccolo piccolo errore?

862
00:44:04,020 --> 00:44:04,990
Sfondo Onnipotente.

863
00:44:04,990 --> 00:44:08,391

864
00:44:08,391 --> 00:44:08,890
RGB.

865
00:44:08,890 --> 00:44:09,765
>> AUDIENCE: [incomprensibile]

866
00:44:09,765 --> 00:44:11,729

867
00:44:11,729 --> 00:44:12,770
ALLISON Buchholtz-AU: No.

868
00:44:12,770 --> 00:44:14,050
Ho provato questo prima della lezione.

869
00:44:14,050 --> 00:44:16,570
Ho tutto quello che ho fatto prima
Classe in caso ero come,

870
00:44:16,570 --> 00:44:17,970
"Aspetta, che cosa ho fatto di sbagliato?"

871
00:44:17,970 --> 00:44:23,190
Perché io ero come, "Io probabilmente
pasticcio questo fino ad un certo punto. "

872
00:44:23,190 --> 00:44:24,150
Più verde.

873
00:44:24,150 --> 00:44:26,250
Tutto sembra come se fosse
concatenato correttamente.

874
00:44:26,250 --> 00:44:29,620

875
00:44:29,620 --> 00:44:30,520
OK.

876
00:44:30,520 --> 00:44:31,870
>> AUDIENCE: [incomprensibile]

877
00:44:31,870 --> 00:44:33,810
>> ALLISON Buchholtz-AU: Oh, ci si va.

878
00:44:33,810 --> 00:44:35,520
Questo è quello che mi serviva.

879
00:44:35,520 --> 00:44:36,805
Guardate che.

880
00:44:36,805 --> 00:44:40,090
Tiffany per salvare.

881
00:44:40,090 --> 00:44:40,590
Perfetto.

882
00:44:40,590 --> 00:44:41,090
OK.

883
00:44:41,090 --> 00:44:43,834
Ora vediamo se funziona.

884
00:44:43,834 --> 00:44:44,816
Dio mio.

885
00:44:44,816 --> 00:44:45,641
OK.

886
00:44:45,641 --> 00:44:46,140
Resisti.

887
00:44:46,140 --> 00:44:48,280
>> PUBBLICO: Lo spazio dopo il secondo più.

888
00:44:48,280 --> 00:44:50,310
>> ALLISON Buchholtz-AU: Quale?

889
00:44:50,310 --> 00:44:52,910
Oh aspetta, aspetta.

890
00:44:52,910 --> 00:44:54,870
Usura Spazio?

891
00:44:54,870 --> 00:44:57,209
>> AUDIENCE: Second più in
la concatenazione verde.

892
00:44:57,209 --> 00:44:58,250
ALLISON Buchholtz-AU: Oh.

893
00:44:58,250 --> 00:44:59,570
AUDIENCE: Non c'è spazio
dopo il plus, sì.

894
00:44:59,570 --> 00:45:00,790
ALLISON Buchholtz-AU: Lei
non hanno bisogno di questo, ma--

895
00:45:00,790 --> 00:45:01,190
AUDIENCE: Oh, non lo fai?

896
00:45:01,190 --> 00:45:01,910
ALLISON Buchholtz-AU: Sembra piuttosto.

897
00:45:01,910 --> 00:45:02,530
AUDIENCE: OK.

898
00:45:02,530 --> 00:45:03,030
OK.

899
00:45:03,030 --> 00:45:05,170
>> ALLISON Buchholtz AU:
Vediamo se questo funziona.

900
00:45:05,170 --> 00:45:05,670
OK.

901
00:45:05,670 --> 00:45:07,836
Sono ovviamente mancato a
questa demo, che mi ricorda

902
00:45:07,836 --> 00:45:12,810
di una conferenza l'altra settimana,
ma so che questo funzionerà.

903
00:45:12,810 --> 00:45:15,860
So che questo funzionerà.

904
00:45:15,860 --> 00:45:16,580
Così vicino.

905
00:45:16,580 --> 00:45:22,330
Se non sbaglio ho cancellato
il mio script su questo.

906
00:45:22,330 --> 00:45:24,035
No, si tratta di punti di partito js.

907
00:45:24,035 --> 00:45:25,776
OK resistere.

908
00:45:25,776 --> 00:45:28,650
Io vado a copiare questo, e sono anche
solo andando a cancellare tutto,

909
00:45:28,650 --> 00:45:30,108
perché ho avuto questo lavoro prima.

910
00:45:30,108 --> 00:45:32,470

911
00:45:32,470 --> 00:45:33,770
>> Prometto che funziona.

912
00:45:33,770 --> 00:45:36,160
Se no, vi mostrerò che cosa Tommy è.

913
00:45:36,160 --> 00:45:38,890
E lì.

914
00:45:38,890 --> 00:45:42,380
>> AUDIENCE: Stai riferimento partito
dot CSS, e si tratta di un partito dot js.

915
00:45:42,380 --> 00:45:45,940
>> ALLISON Buchholtz-AU: Ah, bene
proprio qui è js dot partito.

916
00:45:45,940 --> 00:45:49,187
OK, che cosa ho fatto di diverso?

917
00:45:49,187 --> 00:45:50,520
OK, vedremo se questo funziona ora.

918
00:45:50,520 --> 00:45:54,180

919
00:45:54,180 --> 00:45:54,980
Bam.

920
00:45:54,980 --> 00:46:02,110
Quindi, non so quello che ho fatto in modo diverso,
ma questo è quello che dovrebbe accadere.

921
00:46:02,110 --> 00:46:03,230
Kinda freddo.

922
00:46:03,230 --> 00:46:06,650
Ho cliccato su questo, come, per sempre.

923
00:46:06,650 --> 00:46:11,185
Ma possiamo provare e vedere quello che ho fatto
diversamente che questa aveva.

924
00:46:11,185 --> 00:46:14,560
Io non so voi ragazzi, ma questo
guarda fondamentalmente quello che ho appena scritto.

925
00:46:14,560 --> 00:46:17,950
C'era probabilmente un mancante
virgola è da qualche parte la mia cosa.

926
00:46:17,950 --> 00:46:22,064
In realtà dopo, penso che mi mancava
un punto e virgola proprio qui in realtà.

927
00:46:22,064 --> 00:46:24,230
Ma non ho potuto vedere perché
era fuori dallo schermo.

928
00:46:24,230 --> 00:46:29,040
>> Ma se notiamo, questo è abbastanza
molto esattamente quello che ho appena scritto.

929
00:46:29,040 --> 00:46:33,010
Penso che probabilmente la parte più difficile
questo è solo un po 'questa cosa giusta

930
00:46:33,010 --> 00:46:36,830
qui, la comprensione
quello che sta facendo lì.

931
00:46:36,830 --> 00:46:42,230
Questi tipi di cose che si imparano
in realtà solo da usare Google e onestamente

932
00:46:42,230 --> 00:46:42,880
solo cercando.

933
00:46:42,880 --> 00:46:46,770
Se pensate che ci sia un po '
attributo, probabilmente lo è.

934
00:46:46,770 --> 00:46:48,382
Quindi provare.

935
00:46:48,382 --> 00:46:49,090
Vedi cosa succede.

936
00:46:49,090 --> 00:46:53,000
Come ho detto, ci sono un sacco di
sperimentazione di JavaScript,

937
00:46:53,000 --> 00:46:56,810
e PHP, e tutto ciò che
roba, e CSS in particolare.

938
00:46:56,810 --> 00:47:00,046
Questo è l'unico vero
modo di capirlo.

939
00:47:00,046 --> 00:47:07,100
>> OK, così dopo che fiasco con il partito
js dot, abbiamo altre due opzioni.

940
00:47:07,100 --> 00:47:10,650
Abbiamo orologio o Twitter.

941
00:47:10,650 --> 00:47:12,190
Sono entrambi interessanti.

942
00:47:12,190 --> 00:47:17,720
Forse non è così divertente come partito,
che ha avuto un po 'di effetto stroboscopico fresco

943
00:47:17,720 --> 00:47:19,595
cosa alla fine.

944
00:47:19,595 --> 00:47:21,714
Voi ragazzi avete qualche preferenza?

945
00:47:21,714 --> 00:47:22,380
AUDIENCE: Clock?

946
00:47:22,380 --> 00:47:22,950
ALLISON Buchholtz-AU: Clock?

947
00:47:22,950 --> 00:47:23,450
OK.

948
00:47:23,450 --> 00:47:25,390
Freddo.

949
00:47:25,390 --> 00:47:30,460
>> Così ancora una volta, abbiamo la nostra
file JavaScript vuoto.

950
00:47:30,460 --> 00:47:35,800
E come vediamo qui,
avere qualche semplice HTML.

951
00:47:35,800 --> 00:47:40,010
Abbiamo il nostro foglio di stile, che proprio
Formati quello che dovrebbe essere simile.

952
00:47:40,010 --> 00:47:42,860
Abbiamo il nostro div con
un ID di orologio, che

953
00:47:42,860 --> 00:47:44,420
dice solo, "questo dovrebbe essere un orologio."

954
00:47:44,420 --> 00:47:47,650
E noi abbiamo il nostro link
al nostro file JavaScript

955
00:47:47,650 --> 00:47:51,400
Che in realtà sta per
generare il nostro orologio per noi.

956
00:47:51,400 --> 00:47:56,060
Perché la cosa interessante, è che si può
set JavaScript per aggiornare automaticamente

957
00:47:56,060 --> 00:47:56,963
stesso.

958
00:47:56,963 --> 00:47:57,810
OK?

959
00:47:57,810 --> 00:48:01,580
Così, invece di aspettare il
utente per colpire Refresh di una pagina

960
00:48:01,580 --> 00:48:03,840
in modo che si può ottenere
tempo aggiornato, JavaScript

961
00:48:03,840 --> 00:48:06,760
può aggiornarlo comunque piace.

962
00:48:06,760 --> 00:48:12,082
>> Così, come con il nostro ultimo, abbiamo voluto
per accedere al nostro fondo, giusto?

963
00:48:12,082 --> 00:48:14,790
Allora, cosa pensi possa essere il
prima cosa che vogliamo fare qui?

964
00:48:14,790 --> 00:48:19,538
Se stiamo tipo di andarsene
questa sorta di paradigma di qui?

965
00:48:19,538 --> 00:48:22,200
Probabilmente vogliamo
accedere al nostro orologio, giusto?

966
00:48:22,200 --> 00:48:24,724
Così, abbiamo alcuni var
orologio, che equals--

967
00:48:24,724 --> 00:48:26,140
cosa pensiamo che sarà?

968
00:48:26,140 --> 00:48:29,290

969
00:48:29,290 --> 00:48:42,670
Documento puntino ottenere elemento per-- Ho anche
amare Sublime-- Id e la nostra Id è l'orologio.

970
00:48:42,670 --> 00:48:43,585
Punto e virgola.

971
00:48:43,585 --> 00:48:45,710
Devo fare in modo di ottenere
quelle virgola questa volta,

972
00:48:45,710 --> 00:48:47,835
perché mi sento così
era il problema ultima volta.

973
00:48:47,835 --> 00:48:55,980
OK così, come ho appena detto con il tentativo
avere JavaScript rinfrescarsi,

974
00:48:55,980 --> 00:48:59,655
c'è questa grande funzione, I
so che è tornato utile dello scorso anno,

975
00:48:59,655 --> 00:49:02,780
Io non sono sicuro che è utile per questo
pset, ma si chiama intervallo impostato.

976
00:49:02,780 --> 00:49:05,640

977
00:49:05,640 --> 00:49:08,200
E questo è in realtà davvero
cool se voi ragazzi fare qualcosa

978
00:49:08,200 --> 00:49:11,460
con il tempo o di ottenere
informazioni aggiornate.

979
00:49:11,460 --> 00:49:13,700
Su un sito web per una finale
progetto, questo è probabilmente

980
00:49:13,700 --> 00:49:16,240
una funzione che si desidera
ottenere super familiarità con.

981
00:49:16,240 --> 00:49:19,730
Così che impostare l'intervallo fa è che
stiamo andando a dare una funzione,

982
00:49:19,730 --> 00:49:21,830
e con quale frequenza dovrebbe
chiamare questa funzione.

983
00:49:21,830 --> 00:49:22,430
OK?

984
00:49:22,430 --> 00:49:26,890
>> Quindi, in questo caso, stiamo solo andando a
creare nuovamente una funzione anonima,

985
00:49:26,890 --> 00:49:31,530
OK, che sta per arrivare
la nostra data, e il nostro tempo,

986
00:49:31,530 --> 00:49:33,780
e quindi aggiornare le cose e visualizzarlo.

987
00:49:33,780 --> 00:49:35,130
Quindi dovremo preoccupare di questo.

988
00:49:35,130 --> 00:49:39,120
Saremo come generare orologio qui.

989
00:49:39,120 --> 00:49:41,750
Ma quello che ci serve è come
spesso per aggiornarlo.

990
00:49:41,750 --> 00:49:43,930
Quindi in questo caso, è solo millisecondi.

991
00:49:43,930 --> 00:49:46,877
Quindi stiamo solo andando a
fare 100 millisecondi.

992
00:49:46,877 --> 00:49:48,210
Ovviamente, tutto arbitraria.

993
00:49:48,210 --> 00:49:50,600
Se si voleva aggiornare
molto più lentamente, si potrebbe.

994
00:49:50,600 --> 00:49:53,300
Possiamo pasticciare
con il conteggio del tempo,

995
00:49:53,300 --> 00:49:57,240
quanto è grande la nostra intervallo è dopo che otteniamo
un orologio che lavora, che spero di

996
00:49:57,240 --> 00:49:59,660
raggiungere.

997
00:49:59,660 --> 00:50:04,110
Quindi questo è solo dicendo, "OK, chiamata
questa funzione ogni 100 millisecondi. "

998
00:50:04,110 --> 00:50:04,805
OK?

999
00:50:04,805 --> 00:50:07,280
Questo è tutto ciò che fa.

1000
00:50:07,280 --> 00:50:12,290
>> Che cosa vogliamo che la nostra funzione di
fare è che vogliamo avere una data

1001
00:50:12,290 --> 00:50:14,200
e un po 'di tempo è quello che
stiamo per avere.

1002
00:50:14,200 --> 00:50:19,740
Così possiamo iniziare con la nostra
Data uguale qualcosa,

1003
00:50:19,740 --> 00:50:22,708
e il nostro tempo è uguale a qualcosa
che noi non sappiamo ancora.

1004
00:50:22,708 --> 00:50:26,070

1005
00:50:26,070 --> 00:50:29,300
O in realtà, abbiamo data solo bisogno, perché
Data sta per includere tutto.

1006
00:50:29,300 --> 00:50:34,310

1007
00:50:34,310 --> 00:50:40,010
Anche se solo Google nulla
ciò che si vuole fare, se si scrive, "OK,

1008
00:50:40,010 --> 00:50:41,980
Voglio ottenere il tempo
via JavaScript, "è

1009
00:50:41,980 --> 00:50:45,890
vi darà questa grande
funzione chiamata Data get.

1010
00:50:45,890 --> 00:50:48,664
Letteralmente, la maggior parte delle cose
che si vuole fare,

1011
00:50:48,664 --> 00:50:50,830
JavaScript sta per avere
è fatto per voi già.

1012
00:50:50,830 --> 00:50:55,770
Quindi è letteralmente come nuovo
ottenere la data, che è creating--

1013
00:50:55,770 --> 00:50:58,600
o nuova data, rather--
che sta generando

1014
00:50:58,600 --> 00:51:03,690
un oggetto che rappresenta una data.

1015
00:51:03,690 --> 00:51:08,200
>> E quello che stiamo andando a fare qui è
questo è-- ho intenzione di scrivere questo,

1016
00:51:08,200 --> 00:51:10,820
e poi spiegare che cosa fa.

1017
00:51:10,820 --> 00:51:12,560
Così mi assicurerò che ho questo diritto.

1018
00:51:12,560 --> 00:51:17,950

1019
00:51:17,950 --> 00:51:23,440
>> OK, così che cosa questa funzione
fa, è siamo solo

1020
00:51:23,440 --> 00:51:30,680
creando il codice HTML che in realtà
per andare all'interno del nostro div id dell'orologio.

1021
00:51:30,680 --> 00:51:34,610
Così che cosa questo sta per essere fare
è solo la generazione di una stringa, OK?

1022
00:51:34,610 --> 00:51:38,510
Che è poi sta per essere
trapiantati nel nostro HTML.

1023
00:51:38,510 --> 00:51:42,130
Fondamentalmente ciò che sta per fare è
qualunque we-- ciò che io vi mostrerò

1024
00:51:42,130 --> 00:51:49,070
è che tutto ciò che diciamo HTML è,
stiamo andando a sostituire il testo qui

1025
00:51:49,070 --> 00:51:51,090
con qualsiasi HTML è.

1026
00:51:51,090 --> 00:51:56,390
Quindi questo sta per consentire
noi per cambiare il nostro punto di clock

1027
00:51:56,390 --> 00:52:00,940
HTML dall'essere solo il testo di questo
dovrebbe essere un orologio, effettivamente mostrando

1028
00:52:00,940 --> 00:52:05,630
i numeri e le cose che ci interessano
circa, e in realtà essere in punto.

1029
00:52:05,630 --> 00:52:09,810
>> Così che cosa stiamo andando a fare è che siamo
intenzione di iniziare a generare questo HTML.

1030
00:52:09,810 --> 00:52:16,520
Così nello stesso modo che abbiamo usato
fare più uguale per gli interi,

1031
00:52:16,520 --> 00:52:20,461
Ora si può fare per le stringhe,
tranne che sta per concatenare le loro.

1032
00:52:20,461 --> 00:52:20,960
Giusto?

1033
00:52:20,960 --> 00:52:26,070
Come abbiamo visto con dot partito js, ​​questo solo
concatena tutte queste cose insieme.

1034
00:52:26,070 --> 00:52:31,970
Così è possibile concatenare diversi bit
HTML dalle variabili, o pezzi di stringhe

1035
00:52:31,970 --> 00:52:33,750
che si scrive
te stesso, e questo solo

1036
00:52:33,750 --> 00:52:38,650
veramente ti permette di dinamicamente
generare codice HTML, che è piuttosto fresco.

1037
00:52:38,650 --> 00:52:42,040
Quindi, se avete qualcosa
molto utente specifico,

1038
00:52:42,040 --> 00:52:44,130
questo può permettere di farlo.

1039
00:52:44,130 --> 00:52:47,550
>> Quindi dobbiamo HTML, a ho intenzione di
cercare di assicurarsi che ho questo diritto.

1040
00:52:47,550 --> 00:52:49,890
Quindi stiamo andando a fare un po 'di intestazione h1.

1041
00:52:49,890 --> 00:52:53,610
Così che cosa è importante rendersi conto qui
è che questo è in realtà solo HTML.

1042
00:52:53,610 --> 00:52:54,460
Giusto?

1043
00:52:54,460 --> 00:52:56,610
Stiamo scrivendo reale
Il codice HTML qui, è

1044
00:52:56,610 --> 00:53:01,090
non solo una stringa nel normale
modo che avremmo pensarci.

1045
00:53:01,090 --> 00:53:02,930
Così abbiamo alcuni HTML.

1046
00:53:02,930 --> 00:53:04,940
Questo è considerato una stringa qui però.

1047
00:53:04,940 --> 00:53:10,380
E facciamo data dot-- noi
vuole ottenere le nostre ore.

1048
00:53:10,380 --> 00:53:12,910
Anche in questo caso, se si dovesse guardare
a nulla di una data,

1049
00:53:12,910 --> 00:53:16,160
sarebbe dirà queste sono tutte
gli attributi che la data ha.

1050
00:53:16,160 --> 00:53:17,670
Ed ecco cosa si può usare su di esso.

1051
00:53:17,670 --> 00:53:20,620
Così ha probabilmente le cose come
ottenere ore, e ottenere minuti,

1052
00:53:20,620 --> 00:53:24,669
e ottenere secondi, e ottenere millisecondi,
e chissà cos'altro che hanno.

1053
00:53:24,669 --> 00:53:27,210
Ma se si guarda nel
la documentazione, sarà tutto lì.

1054
00:53:27,210 --> 00:53:31,980
>> Così abbiamo ottenere ore,
e poi vorremmo

1055
00:53:31,980 --> 00:53:35,614
concatenare che with-- sono
andando a spostare questo qui.

1056
00:53:35,614 --> 00:53:38,780
Quindi, se stiamo generando in questo momento, siamo
in realtà la generazione del tempo, giusto?

1057
00:53:38,780 --> 00:53:43,590
Abbiamo ore, e poi che cosa è
tra ore e minuti?

1058
00:53:43,590 --> 00:53:45,080
Avete un punto e virgola, giusto?

1059
00:53:45,080 --> 00:53:48,010
Così vogliamo fare qualche virgola qui.

1060
00:53:48,010 --> 00:53:51,780
E poi vogliamo ottenere il nostro
minuti, quindi nello stesso modo

1061
00:53:51,780 --> 00:53:56,450
che abbiamo data dot ottenere ore,
come potremmo ottenere i nostri minuti?

1062
00:53:56,450 --> 00:54:01,542
E 'letteralmente Data dot ottenere
minuti, che ho un po 'come.

1063
00:54:01,542 --> 00:54:03,250
E 'come, "oh, come
ottengo i miei minuti? "

1064
00:54:03,250 --> 00:54:05,850
Ho appena ottenere miei minuti.

1065
00:54:05,850 --> 00:54:07,500
>> OK.

1066
00:54:07,500 --> 00:54:10,990
E poi abbiamo un altro colon qui.

1067
00:54:10,990 --> 00:54:16,350
E poi se vogliamo ottenere il nostro
secondi, come potremmo ottenere il nostro secondo?

1068
00:54:16,350 --> 00:54:17,400
Data dot ottenere secondi.

1069
00:54:17,400 --> 00:54:20,390

1070
00:54:20,390 --> 00:54:21,590
Penso che sia abbastanza freddo.

1071
00:54:21,590 --> 00:54:23,589
E ciò che è importante per
realizzare, è che abbiamo anche

1072
00:54:23,589 --> 00:54:31,730
bisogno di chiudere il nostro tag HTML qui, perché
dovrebbe essere ancora valida HTML, così h1.

1073
00:54:31,730 --> 00:54:33,481
Freddo.

1074
00:54:33,481 --> 00:54:43,110
>> Così, dopo che, possiamo fare di clock
dot HTML interno è pari a HTML.

1075
00:54:43,110 --> 00:54:43,930
OK?

1076
00:54:43,930 --> 00:54:46,470
Quindi ricorda come ho detto
HTML interno sostanzialmente

1077
00:54:46,470 --> 00:54:50,610
prende qualunque sia tra la
due tag che abbiamo parlato

1078
00:54:50,610 --> 00:54:54,470
e inserti o manipola
tutto ciò che è in là?

1079
00:54:54,470 --> 00:54:58,290
Quindi cosa fa, se
torniamo al nostro orologio,

1080
00:54:58,290 --> 00:55:04,180
è che l'orologio si riferisce a
tutto all'interno di questo div.

1081
00:55:04,180 --> 00:55:09,770
Questo è l'interno HTML
di questo div orologio Id.

1082
00:55:09,770 --> 00:55:13,930
E così sta andando a cambiare per
il codice HTML che abbiamo appena generato,

1083
00:55:13,930 --> 00:55:16,750
che, che, si spera,
si spera, si spera,

1084
00:55:16,750 --> 00:55:21,026
mostrerà il momento giusto.

1085
00:55:21,026 --> 00:55:23,960
Staremo a vedere.

1086
00:55:23,960 --> 00:55:25,170
Naturalmente.

1087
00:55:25,170 --> 00:55:26,860
Tanti problemi tecnici.

1088
00:55:26,860 --> 00:55:31,480
Solo-- di Allison sono
i miei ragazzi gioco di oggi.

1089
00:55:31,480 --> 00:55:34,136
OK, che funziona.

1090
00:55:34,136 --> 00:55:35,760
dot clock HTML interno.

1091
00:55:35,760 --> 00:55:42,097
Era HTML Davvero?

1092
00:55:42,097 --> 00:55:43,180
Anche questo è ciò che accade.

1093
00:55:43,180 --> 00:55:48,750
Quando non si riesce a vedere qualcosa di te,
basta guardare il codice sorgente.

1094
00:55:48,750 --> 00:55:49,250
OK.

1095
00:55:49,250 --> 00:55:51,912

1096
00:55:51,912 --> 00:55:54,870
Sei vuoi sapere un lavoro fresco intorno
che stiamo andando a fare qui?

1097
00:55:54,870 --> 00:55:55,740
>> PUBBLICO: Si può fare lettere maiuscole?

1098
00:55:55,740 --> 00:55:56,580
Le lettere maiuscole?

1099
00:55:56,580 --> 00:55:58,996
Perché avete ottenere ore,
e quindi ottenere minuti.

1100
00:55:58,996 --> 00:56:02,590
>> ALLISON Buchholtz-AU: E
è ottenere ore e get-- oh.

1101
00:56:02,590 --> 00:56:04,945
Si are-- stella d'oro.

1102
00:56:04,945 --> 00:56:08,114

1103
00:56:08,114 --> 00:56:09,030
E 'tutto un test, ragazzi.

1104
00:56:09,030 --> 00:56:13,630

1105
00:56:13,630 --> 00:56:17,330
Prometto che stava lavorando prima della lezione.

1106
00:56:17,330 --> 00:56:22,590
>> OK, ma qualcosa di fresco da sapere è
che si può also-- se a volte

1107
00:56:22,590 --> 00:56:26,560
i file esterni
ottenere un po 'pazzo,

1108
00:56:26,560 --> 00:56:30,960
si può anche semplicemente metterli dritto
qui, che tende a sistemare le cose.

1109
00:56:30,960 --> 00:56:35,840
Tranne questo è come davvero brutto.

1110
00:56:35,840 --> 00:56:38,050
Naturalmente formattare tutto.

1111
00:56:38,050 --> 00:56:41,425
Assicurarsi che è tutto abbastanza.

1112
00:56:41,425 --> 00:56:41,925
OK.

1113
00:56:41,925 --> 00:56:47,200

1114
00:56:47,200 --> 00:56:50,621
>> Volevo fare tutte le demo fresco,
e sono solo non lavorando.

1115
00:56:50,621 --> 00:56:51,555
OK.

1116
00:56:51,555 --> 00:56:53,890
Script orologio var.

1117
00:56:53,890 --> 00:57:00,350
In ogni modo, ciò che è importante è
che questo è il modo generale

1118
00:57:00,350 --> 00:57:01,870
che si sarebbe formattare JavaScript.

1119
00:57:01,870 --> 00:57:04,490
Come si può vedere, può essere
molto pignolo volte,

1120
00:57:04,490 --> 00:57:08,780
anche quando era letteralmente
di lavoro di due secondi fa.

1121
00:57:08,780 --> 00:57:11,820
O non due secondi fa,
ma molto, molto di recente.

1122
00:57:11,820 --> 00:57:16,070
>> Quindi, per mostrare ciò che dovrebbe essere simile,
e per dimostrare che io non sono pazzo,

1123
00:57:16,070 --> 00:57:19,730
e che tutto è esattamente
stesso, questo è quello che dovrebbe essere simile.

1124
00:57:19,730 --> 00:57:27,410
Stai solo andando a fare questa parte superiore
qui, e se si visualizza sorgente della pagina,

1125
00:57:27,410 --> 00:57:32,160
se si nota, ha fatto un po '
cose folli, ho semplificato esso.

1126
00:57:32,160 --> 00:57:35,710
Inoltre, il credito a Tommy
McWilliam, che in realtà

1127
00:57:35,710 --> 00:57:38,810
mi ha aiutato a creare questi esempi,
è per questo che so che funzionano.

1128
00:57:38,810 --> 00:57:41,560
Perché Tommy è un maestro JavaScript.

1129
00:57:41,560 --> 00:57:43,180
Ma se notiamo, abbiamo qualche set.

1130
00:57:43,180 --> 00:57:45,170
Noi abbiamo la nostra funzione orologio qui.

1131
00:57:45,170 --> 00:57:48,450
Ciò è tanto JavaScript che
abbiamo appena scritto, o parte di esso.

1132
00:57:48,450 --> 00:57:51,470
Abbiamo appena scritto questo qui.

1133
00:57:51,470 --> 00:57:54,260
E ha un extra
funzione che pastiglie appena esso

1134
00:57:54,260 --> 00:57:57,790
mettendo uno zero prima di un
lettera o prima di un numero se è

1135
00:57:57,790 --> 00:57:59,412
solo uno di loro.

1136
00:57:59,412 --> 00:58:02,120
Quindi, se ci fate caso, questo è abbastanza
più o meno esattamente quello che abbiamo appena scritto.

1137
00:58:02,120 --> 00:58:06,230
Hai qualche orologio variabile
ha il nostro elemento, ottenere elemento da ID,

1138
00:58:06,230 --> 00:58:07,252
che è l'orologio.

1139
00:58:07,252 --> 00:58:08,960
Noi abbiamo la nostra intervallo set
funzione, che è

1140
00:58:08,960 --> 00:58:12,670
una funzione anonima
che esegue tutto questo.

1141
00:58:12,670 --> 00:58:16,940
Abbiamo alcuni partenza stringa
Che HTML abbiamo poi dinamicamente

1142
00:58:16,940 --> 00:58:20,750
generare avendo alcuni
intestazione h1, concatenando

1143
00:58:20,750 --> 00:58:23,950
con ottenere le ore, più
il nostro colon, oltre a ottenere

1144
00:58:23,950 --> 00:58:26,860
i minuti, più un altro
colon, oltre che i nostri secondi,

1145
00:58:26,860 --> 00:58:29,330
ed infine l'HTML finale per esso.

1146
00:58:29,330 --> 00:58:34,210
E allora aggiorniamo il nostro orologio
dot HTML interno di HTML,

1147
00:58:34,210 --> 00:58:37,640
e aggiorniamo ogni 100 millisecondi.

1148
00:58:37,640 --> 00:58:39,060
OK?

1149
00:58:39,060 --> 00:58:42,470
>> Vedi io prometto che non sono pazzo.

1150
00:58:42,470 --> 00:58:43,440
Non lo so.

1151
00:58:43,440 --> 00:58:47,160
Non so perché non mi piace.

1152
00:58:47,160 --> 00:58:54,030
Mi sento come sembra la stessa,
ma a quanto pare mi odia.

1153
00:58:54,030 --> 00:58:59,600
>> Così vediamo se round va meglio.

1154
00:58:59,600 --> 00:59:00,970
Stiamo a vedere.

1155
00:59:00,970 --> 00:59:02,910
Io non sono sicuro di come questo sta per andare.

1156
00:59:02,910 --> 00:59:06,700
È a tutti almeno ottenendo il
cons, come solo il tema generale

1157
00:59:06,700 --> 00:59:08,480
di JavaScript, però?

1158
00:59:08,480 --> 00:59:15,660
Spero che sia almeno utile, più
che mostrare che è un po 'schizzinoso.

1159
00:59:15,660 --> 00:59:21,190
Ma il vostro set problema sarà molto divertente.

1160
00:59:21,190 --> 00:59:22,590
Sta andando essere grande.

1161
00:59:22,590 --> 00:59:24,820
Non sarà abbastanza noiosa
come questo, non credo.

1162
00:59:24,820 --> 00:59:28,100
Avrai effettivamente arrivare a
vedere le cose davvero cool.

1163
00:59:28,100 --> 00:59:31,734
>> Quindi, ultimo ma non meno importante,
proveremo il Twitter uno.

1164
00:59:31,734 --> 00:59:32,900
Sono davvero spaventata adesso, ragazzi.

1165
00:59:32,900 --> 00:59:35,762
Non so come questo sta per andare.

1166
00:59:35,762 --> 00:59:39,930
Ma solo per darvi un po '
più gusto, e questo è in realtà

1167
00:59:39,930 --> 00:59:44,190
stringhe e manipolazione
ingressi, quello che abbiamo intenzione di fare

1168
00:59:44,190 --> 00:59:50,960
è, se notiamo qui con HTML--
questo ha un po 'more--

1169
00:59:50,960 --> 00:59:57,200
abbiamo qualche area di testo, che
corrisponde a questa area di testo qui.

1170
00:59:57,200 --> 00:59:58,030
OK?

1171
00:59:58,030 --> 01:00:00,420
E che ha un ID di testo.

1172
01:00:00,420 --> 01:00:04,520
, Rinnovato un po '
con una certa larghezza e altezza

1173
01:00:04,520 --> 01:00:07,310
che abbiamo predeterminato,
e abbiamo h1,

1174
01:00:07,310 --> 01:00:11,260
che solo è il nostro colpo di testa uno che
rappresenta la nostra caratteri.

1175
01:00:11,260 --> 01:00:14,570
Abbiamo dato alcuni Id
caratteri rimanenti,

1176
01:00:14,570 --> 01:00:18,660
e allora abbiamo qualche script
qui, che sono davvero

1177
01:00:18,660 --> 01:00:20,790
sperando terza volta di
il fascino qui, ragazzi.

1178
01:00:20,790 --> 01:00:26,750
>> Quindi quello che vogliamo fare,
nella stessa vena generale

1179
01:00:26,750 --> 01:00:31,480
che abbiamo fatto con js dot clock
e dot partito js come abbiamo notato,

1180
01:00:31,480 --> 01:00:35,980
è che abbiamo iniziato con realtà afferrando
le cose che ci stanno a cuore, giusto?

1181
01:00:35,980 --> 01:00:42,330
Quindi in questo caso, ci sono due
cose che ci stanno a cuore, OK?

1182
01:00:42,330 --> 01:00:47,199
Una cosa che siamo in realtà tipo di
esaminando e attingendo i dati da,

1183
01:00:47,199 --> 01:00:48,990
e una cosa che
stiamo davvero cambiando.

1184
01:00:48,990 --> 01:00:52,110

1185
01:00:52,110 --> 01:00:53,730
Quindi c'è il nostro HTML.

1186
01:00:53,730 --> 01:01:00,370
Se questa è la nostra pagina web qui, che cosa è
i dati che stiamo guardando?

1187
01:01:00,370 --> 01:01:03,860
Sta andando essere qualunque
il testo in nostre scatole, giusto?

1188
01:01:03,860 --> 01:01:05,310
Quindi, qualunque scrivo qui.

1189
01:01:05,310 --> 01:01:08,150
Questo è quello che voglio sapere, o
questo è quello che voglio guardare.

1190
01:01:08,150 --> 01:01:10,690
E quello che sta per essere
cambiando sulla nostra pagina web?

1191
01:01:10,690 --> 01:01:13,550

1192
01:01:13,550 --> 01:01:14,880
I caratteri rimanenti.

1193
01:01:14,880 --> 01:01:19,550
Così allo stesso modo, vogliamo
iniziare l'inizializzazione delle variabili

1194
01:01:19,550 --> 01:01:22,030
che in realtà tenere su questi elementi.

1195
01:01:22,030 --> 01:01:22,890
OK?

1196
01:01:22,890 --> 01:01:29,930
Quindi, se abbiamo qualche var
che è la nostra area di testo,

1197
01:01:29,930 --> 01:01:33,681
e abbiamo qualche var che è rimanente.

1198
01:01:33,681 --> 01:01:34,180
Giusto?

1199
01:01:34,180 --> 01:01:36,190
Così questi stanno per
tenere queste due cose.

1200
01:01:36,190 --> 01:01:42,370
Così la stessa cosa,
documento dot-- OK, io sono

1201
01:01:42,370 --> 01:01:45,920
andare per assicurarsi che questo sia
andare a lavorare questa volta.

1202
01:01:45,920 --> 01:01:49,620
Sono molto irremovibile.

1203
01:01:49,620 --> 01:01:53,310
OK, quindi se vogliamo che la nostra
area di testo, secondo

1204
01:01:53,310 --> 01:01:55,710
al nostro HTML, qual è la nostra identificazione?

1205
01:01:55,710 --> 01:01:56,420
Qual è il nostro Id?

1206
01:01:56,420 --> 01:01:59,500

1207
01:01:59,500 --> 01:02:05,540
E 'solo sarà il testo perché
questo crea la nostra area di testo, OK,

1208
01:02:05,540 --> 01:02:10,320
e la nostra Id è un testo, in modo che
come possiamo prendere quello che c'è dentro.

1209
01:02:10,320 --> 01:02:12,130
OK, punto e virgola.

1210
01:02:12,130 --> 01:02:13,940
Ho intenzione di essere super
precisa su questo,

1211
01:02:13,940 --> 01:02:16,300
perché voglio questo lavoro questa volta.

1212
01:02:16,300 --> 01:02:22,120
OK, fare la stessa cosa,
ottenere elemento da Id.

1213
01:02:22,120 --> 01:02:25,970
Sono davvero chiedendo cosa ha
causato gli altri due a rovinare.

1214
01:02:25,970 --> 01:02:29,750
OK, allora in questo,
cosa vogliamo per accedere?

1215
01:02:29,750 --> 01:02:30,760
Qual è il nostro Id qui?

1216
01:02:30,760 --> 01:02:33,980

1217
01:02:33,980 --> 01:02:36,261
Abbiamo un altro Id in
il nostro HTML, che cos'è?

1218
01:02:36,261 --> 01:02:37,552
AUDIENCE: Caratteri restanti.

1219
01:02:37,552 --> 01:02:39,343
ALLISON Buchholtz-AU:
Caratteri restanti.

1220
01:02:39,343 --> 01:02:43,360

1221
01:02:43,360 --> 01:02:44,330
>> OK.

1222
01:02:44,330 --> 01:02:46,010
Freddo.

1223
01:02:46,010 --> 01:02:49,800
Così sto solo andando a
scrivere questo veramente veloce.

1224
01:02:49,800 --> 01:02:53,706

1225
01:02:53,706 --> 01:02:55,330
Sto solo andando a scrivere questo in seconda.

1226
01:02:55,330 --> 01:02:56,190
Così area di testo.

1227
01:02:56,190 --> 01:02:59,550

1228
01:02:59,550 --> 01:03:06,180
La cosa interessante è B function-- lì
sono un sacco di funzioni che non solo

1229
01:03:06,180 --> 01:03:09,690
corrispondono alla tua
il mouse, ma la tastiera.

1230
01:03:09,690 --> 01:03:10,190
OK?

1231
01:03:10,190 --> 01:03:16,540
Così si può dire quando un tasto è
premuto, si possono fare cose del genere.

1232
01:03:16,540 --> 01:03:20,450
Quindi quello che stiamo usando
è chiamato a chiave up, che

1233
01:03:20,450 --> 01:03:25,320
dice, "se hai premuto un tasto qualsiasi
la tastiera, quando l'utente ha sollevato

1234
01:03:25,320 --> 01:03:28,064
il loro dito quel pulsante,
e la chiave è diventato non pressata,

1235
01:03:28,064 --> 01:03:29,480
allora stiamo andando a fare qualcosa. "

1236
01:03:29,480 --> 01:03:29,980
OK?

1237
01:03:29,980 --> 01:03:31,370
Quindi questo ha senso, giusto?

1238
01:03:31,370 --> 01:03:33,540
Perché ogni personaggio
scriviamo, stiamo andando

1239
01:03:33,540 --> 01:03:36,550
di dover alzare le dita off
di esso, in modo che quando il tasto sale,

1240
01:03:36,550 --> 01:03:40,980
possiamo sapere per diminuire
i nostri caratteri rimanenti.

1241
01:03:40,980 --> 01:03:44,440
>> Così abbiamo un po 'su chiave
up, e allo stesso modo,

1242
01:03:44,440 --> 01:03:47,480
stiamo per dire,
"OK, quando lo facciamo, noi

1243
01:03:47,480 --> 01:03:55,110
stanno andando a creare una funzione che
sta andando a prendere e, "in questo caso,

1244
01:03:55,110 --> 01:03:58,800
e quello che vogliamo fare è
calcolare il numero rimanente.

1245
01:03:58,800 --> 01:04:02,510
OK, quindi facciamo solo cominciamo
creando una variabile.

1246
01:04:02,510 --> 01:04:05,830
Così abbiamo un po 'variabile r,
che sta per rappresentare

1247
01:04:05,830 --> 01:04:07,720
il numero di caratteri che abbiamo lasciato.

1248
01:04:07,720 --> 01:04:08,890
OK?

1249
01:04:08,890 --> 01:04:14,540
Sappiamo che si comincia con
140, e se vogliamo sapere,

1250
01:04:14,540 --> 01:04:18,360
diciamo, la lunghezza di questo
stringa che è stato in ingresso,

1251
01:04:18,360 --> 01:04:20,860
fare voi ragazzi avete qualche idea
come potremmo farlo?

1252
01:04:20,860 --> 01:04:23,900
Proprio in base al largo della ovvio
le cose, come se ci volessero ore,

1253
01:04:23,900 --> 01:04:25,870
abbiamo usato ottenere ore.

1254
01:04:25,870 --> 01:04:28,860
Sappiamo che il nostro obiettivo è
area di testo, ma potrebbe ragazzi

1255
01:04:28,860 --> 01:04:33,050
pensare a quello che potrebbe venire dopo?

1256
01:04:33,050 --> 01:04:35,280
Tutte le idee?

1257
01:04:35,280 --> 01:04:41,730
>> Quindi di questo tipo di meno
intuitivo, ma è valore della lunghezza punto.

1258
01:04:41,730 --> 01:04:44,700
Così appena darmi qualche
attributo value che

1259
01:04:44,700 --> 01:04:46,500
è in realtà la lunghezza di questa stringa.

1260
01:04:46,500 --> 01:04:50,340
Così sta andando a dire, "OK, sto cercando
in questa intera stringa all'interno dell'area di testo,

1261
01:04:50,340 --> 01:04:52,730
e ho intenzione di raccontare
quanto tempo sia. "

1262
01:04:52,730 --> 01:04:55,500
Perché se ci ricordiamo stringhe
sono davvero solo array,

1263
01:04:55,500 --> 01:04:58,110
in modo che possiamo solo prendere la lunghezza di loro.

1264
01:04:58,110 --> 01:05:01,860
Così abbiamo che.

1265
01:05:01,860 --> 01:05:04,058
Freddo.

1266
01:05:04,058 --> 01:05:09,360
>> Allora quello che vogliamo fare è noi
non vuole permettere all'utente

1267
01:05:09,360 --> 01:05:12,340
all'ingresso più
140 caratteri, giusto?

1268
01:05:12,340 --> 01:05:15,610
Perché se si dice come, "oh,
solo hanno questo molto restante, "

1269
01:05:15,610 --> 01:05:20,522
e poi lasciarli fare che
comunque, abbiamo mentito.

1270
01:05:20,522 --> 01:05:22,230
E questo è un altro
cosa che Javascript

1271
01:05:22,230 --> 01:05:24,530
può essere davvero buono
per, è la convalida utente

1272
01:05:24,530 --> 01:05:29,062
e fare in modo che il vostro
utente inserisce all'interno tutte le regole

1273
01:05:29,062 --> 01:05:30,270
che hai fornito a loro.

1274
01:05:30,270 --> 01:05:36,020
Quindi, se volete fare le cose come fare
Assicurarsi di ingresso qualcuno il loro indirizzo di posta elettronica,

1275
01:05:36,020 --> 01:05:40,242
o fare in modo che quando
inserire due password, essi abbinati.

1276
01:05:40,242 --> 01:05:41,200
JavaScript può farlo.

1277
01:05:41,200 --> 01:05:44,010
Si potrebbe fare qualcosa di simile, "quando
il modulo viene inviato, "o come,

1278
01:05:44,010 --> 01:05:48,170
"Quando pulsante Invia modulo è
cliccato, controllare tutte queste cose. "

1279
01:05:48,170 --> 01:05:49,670
E possiamo farlo JavaScript.

1280
01:05:49,670 --> 01:05:52,680
Ecco, questo è proprio quello che
stiamo andando a fare qui.

1281
01:05:52,680 --> 01:05:57,810
>> Così che cosa potrebbe essere un modo per verificare se
sono andati oltre 140 caratteri?

1282
01:05:57,810 --> 01:06:03,310
Che cosa sta per succedere a
il nostro valore di r se cercano?

1283
01:06:03,310 --> 01:06:04,760
E sarà negativo, giusto?

1284
01:06:04,760 --> 01:06:07,380
Oppure sarà meno
o uguale a zero.

1285
01:06:07,380 --> 01:06:13,690
Così possiamo usare un se è
proprio come tutto il resto.

1286
01:06:13,690 --> 01:06:14,270
OK?

1287
01:06:14,270 --> 01:06:20,480
E abbiamo qualche area di testo dot
valore, e quello che stiamo facendo qui

1288
01:06:20,480 --> 01:06:29,940
è stiamo solo cutting-- cosa si tratta?

1289
01:06:29,940 --> 01:06:30,900
Scusi.

1290
01:06:30,900 --> 01:06:32,732
Questo, vogliamo solo tornare falso.

1291
01:06:32,732 --> 01:06:34,030
Mi sono confuso.

1292
01:06:34,030 --> 01:06:36,560
Tutte esausto dalle cose non funzionano.

1293
01:06:36,560 --> 01:06:40,010
OK, vogliamo solo
return false, e quindi abbiamo

1294
01:06:40,010 --> 01:06:44,160
vuole visualizzare il
caratteri rimanenti, giusto?

1295
01:06:44,160 --> 01:06:48,720
Quindi, con l'orologio, abbiamo fatto
qualcosa con HTML interno, giusto?

1296
01:06:48,720 --> 01:06:52,070
Dove abbiamo impostato pari a circa
variabili, così che cosa potremmo fare qui?

1297
01:06:52,070 --> 01:06:54,590

1298
01:06:54,590 --> 01:06:57,750
Quello che stiamo cambiando il codice HTML interno di?

1299
01:06:57,750 --> 01:07:02,843

1300
01:07:02,843 --> 01:07:03,780
>> AUDIENCE: rimanente?

1301
01:07:03,780 --> 01:07:05,738
>> ALLISON Buchholtz-AU:
Stiamo cambiando rimanente.

1302
01:07:05,738 --> 01:07:09,217

1303
01:07:09,217 --> 01:07:11,300
Va bene, e cosa fare noi
desidera impostare uguale a?

1304
01:07:11,300 --> 01:07:14,440

1305
01:07:14,440 --> 01:07:18,437
E sarà r, perché
dovrebbero essere i nostri caratteri rimanenti.

1306
01:07:18,437 --> 01:07:19,600
OK?

1307
01:07:19,600 --> 01:07:26,060
Quindi sono molto nervoso per vedere se
questo funziona, ma staremo a vedere.

1308
01:07:26,060 --> 01:07:28,960

1309
01:07:28,960 --> 01:07:29,460
Lasciare questo.

1310
01:07:29,460 --> 01:07:34,690

1311
01:07:34,690 --> 01:07:37,700
Questo è veramente veloce.

1312
01:07:37,700 --> 01:07:38,970
[Incomprensibile] OK.

1313
01:07:38,970 --> 01:07:44,574

1314
01:07:44,574 --> 01:07:45,990
Ancora una volta, sto solo intenzione di mostrare.

1315
01:07:45,990 --> 01:07:49,430
Per qualsiasi motivo,
il mio non decide di lavorare,

1316
01:07:49,430 --> 01:07:53,354
ma quello che vi mostrerò è che questo
è-- oh avrei dovuto metterlo in.

1317
01:07:53,354 --> 01:07:57,470
OK, notiamo lo stesso tipo di
cosa qui, ottenendo l'area di testo.

1318
01:07:57,470 --> 01:08:01,070
>> Inoltre, se si nota ragazzo, se c'è
mai qualcosa che si desidera fare,

1319
01:08:01,070 --> 01:08:04,080
e non sai come fare
, basta fare clic su Visualizza sorgente pagina,

1320
01:08:04,080 --> 01:08:06,632
e che stanno andando a dire.

1321
01:08:06,632 --> 01:08:07,840
A volte esso saranno criptati.

1322
01:08:07,840 --> 01:08:11,147
Per la vostra pset, crittografiamo tutto,
così sembra proprio come incomprensibili.

1323
01:08:11,147 --> 01:08:13,480
Ma se c'è mai davvero
sito web fresco che ti piace,

1324
01:08:13,480 --> 01:08:17,729
se si fa clic su Visualizza sorgente pagina,
sta andando a dirvi come fare.

1325
01:08:17,729 --> 01:08:20,770
Quindi, di nuovo, lavorare meglio, non di più.

1326
01:08:20,770 --> 01:08:24,250
E come vedete qui, tutti
queste cose sono uguali.

1327
01:08:24,250 --> 01:08:31,930
questo qui vuole solo un po 'di stringa
che, non ricordo esattamente quello che fa.

1328
01:08:31,930 --> 01:08:36,980
Ma ci vuole ovviamente qualche stringa
del valore da zero a dieci,

1329
01:08:36,980 --> 01:08:41,540
e restituisce falso ciò che dovrebbe smettere
l'utente inserendo più,

1330
01:08:41,540 --> 01:08:46,040
e poi, ovviamente, aggiorna
il codice HTML interno lì.

1331
01:08:46,040 --> 01:08:47,410
>> Freddo.

1332
01:08:47,410 --> 01:08:53,000
Così grandi rosticcerie a partire da oggi,
esperimento, guardare il codice sorgente

1333
01:08:53,000 --> 01:08:58,359
perché sta andando per aiutare molto,
e tutti, a volte JavaScript

1334
01:08:58,359 --> 01:09:03,200
può essere difficile da lavorare e non
lavorare sempre il modo in cui ci si aspetta di,

1335
01:09:03,200 --> 01:09:05,700
ma solo continuare a provare
perché vi prometto che farò.

1336
01:09:05,700 --> 01:09:08,376
Prometto tutti questi esempi
lavoravano prima della lezione.

1337
01:09:08,376 --> 01:09:09,750
Non capisco cosa sia successo.

1338
01:09:09,750 --> 01:09:13,069
Ho letteralmente tutto uguale.

1339
01:09:13,069 --> 01:09:17,660
>> Un'altra cosa che voglio solo
mostrare ragazzi che possono essere super utile

1340
01:09:17,660 --> 01:09:21,630
è dentro-- cosa stava lavorando prima?

1341
01:09:21,630 --> 01:09:23,935
Abbiamo avuto parte il lavoro, non abbiamo?

1342
01:09:23,935 --> 01:09:26,569
Credo di si.

1343
01:09:26,569 --> 01:09:27,069
Sì.

1344
01:09:27,069 --> 01:09:27,630
Abbiamo fatto.

1345
01:09:27,630 --> 01:09:28,250
Impressionante.

1346
01:09:28,250 --> 01:09:31,189
OK, così una cosa che
voi ragazzi dovreste sapere

1347
01:09:31,189 --> 01:09:33,340
è il registro console che ho parlato.

1348
01:09:33,340 --> 01:09:37,040
Così consolare log punti di ciao.

1349
01:09:37,040 --> 01:09:40,430
Quindi questo è una specie di
JavaScript equivalente di printf.

1350
01:09:40,430 --> 01:09:42,810
Quindi, se mai vuole
controllare le variabili

1351
01:09:42,810 --> 01:09:49,649
o vedere che cosa sta succedendo lì, cosa
si può fare è, se controlliamo elemento,

1352
01:09:49,649 --> 01:09:51,899
è ciò che si vuole andare
a, e si va a consolare,

1353
01:09:51,899 --> 01:09:53,770
vedrete che stampa ciao.

1354
01:09:53,770 --> 01:09:55,750
>> Così potremmo avere
stampa tutto ciò che volevamo.

1355
01:09:55,750 --> 01:10:04,170
Se volevamo stampare sfondo
stile dot dot sfondo,

1356
01:10:04,170 --> 01:10:08,454
dovremmo essere in grado di vedere il
RGB tripla che viene in su.

1357
01:10:08,454 --> 01:10:11,140
O no.

1358
01:10:11,140 --> 01:10:13,520
Ho dimenticato esattamente come si
stampare una variabile del genere,

1359
01:10:13,520 --> 01:10:17,249
ma si dovrebbe essere in grado di
stampare cose del genere.

1360
01:10:17,249 --> 01:10:19,040
Questo sarà molto utile
per il vostro pset quando

1361
01:10:19,040 --> 01:10:23,330
si sta cercando di manipolare
coordinate o roba del genere.

1362
01:10:23,330 --> 01:10:25,270
Così anche cambiare questo pezzo in classe.

1363
01:10:25,270 --> 01:10:30,750
Questo è diverso da ultimi anni, così
solo essere gentile con le tue TF, o le TF

1364
01:10:30,750 --> 01:10:36,350
in orario di ufficio, piuttosto, perché siamo
tipo di apprendimento insieme a voi ragazzi.

1365
01:10:36,350 --> 01:10:41,230
Ma il registro della console era super, super
utile per JavaScript scorso anno.

1366
01:10:41,230 --> 01:10:42,740
Così l'amore esso.

1367
01:10:42,740 --> 01:10:43,780
Impara come usarlo.

1368
01:10:43,780 --> 01:10:49,026
E 'più facile da usare rispetto GDB, in modo che
dovrebbe essere almeno un punto in più.

1369
01:10:49,026 --> 01:10:50,650
Ma Grazie ragazzi stanno dando con me.

1370
01:10:50,650 --> 01:10:53,400
Mi dispiace che il mio
esempi per qualche motivo

1371
01:10:53,400 --> 01:10:55,410
semplicemente non voleva
collaborare con me, ma io

1372
01:10:55,410 --> 01:11:01,010
speranza che ha aiutato tipo di farti un
poco più in zona di JavaScript.

1373
01:11:01,010 --> 01:11:04,980
E inviarmi tutte le vostre domande per
la prossima settimana in modo da poter essere riparato super,

1374
01:11:04,980 --> 01:11:09,420
e porterò caramelle e anche in più
caramelle perché questo era ridicolo.

1375
01:11:09,420 --> 01:11:14,000
Ma voi ragazzi siete grandi,
e hanno una settimana fantastica.

1376
01:11:14,000 --> 01:11:15,584