1
00:00:00,000 --> 00:00:07,440

2
00:00:07,440 --> 00:00:08,180
>> TOMAS REIMERS: Ciao a tutti.

3
00:00:08,180 --> 00:00:09,250
Mi chiamo Tomas Reimers.

4
00:00:09,250 --> 00:00:10,500
>> MIKE RIZZO: E io sono Mike Rizzo.

5
00:00:10,500 --> 00:00:12,990
>> TOMAS REIMERS: Siamo due CS50s TS.

6
00:00:12,990 --> 00:00:18,910
E oggi stiamo portando il seminario
JavaScript e CSS per applicazioni web.

7
00:00:18,910 --> 00:00:22,140
Se si vuole seguire, l'
collegamento è proprio lì.

8
00:00:22,140 --> 00:00:25,190
E vuoi mettere in su
sulla brevemente computer?

9
00:00:25,190 --> 00:00:27,460
>> C'è il link.

10
00:00:27,460 --> 00:00:30,390
E 'un piccolo sito, che offre collegamenti a
tutte le risorse che stiamo andando a essere

11
00:00:30,390 --> 00:00:36,490
che si punta oggi e ha anche un sacco di
informazioni utili scritto da noi

12
00:00:36,490 --> 00:00:39,680
leggere più in profondità quando si torna,
e si sta cercando di ricordare cosa

13
00:00:39,680 --> 00:00:42,166
esattamente abbiamo detto, quello che eri
parlando, et cetera.

14
00:00:42,166 --> 00:00:43,870
>> MIKE RIZZO: Va bene.

15
00:00:43,870 --> 00:00:44,890
Allora cominciamo.

16
00:00:44,890 --> 00:00:45,700
>> TOMAS REIMERS: Così si vuole iniziare?

17
00:00:45,700 --> 00:00:45,970
OK.

18
00:00:45,970 --> 00:00:47,170
>> MIKE RIZZO: Già.

19
00:00:47,170 --> 00:00:51,730
Così abbiamo prima voluto iniziare con un ampio
panoramica su Internet e

20
00:00:51,730 --> 00:00:54,240
tipi di file durante la progettazione di siti web.

21
00:00:54,240 --> 00:00:57,550
Anche se questa presentazione ci si vuole
entrare in JavaScript molto molto

22
00:00:57,550 --> 00:01:00,320
in seguito, abbiamo voluto cominciare con
solo, specie di, come la vista a volo d'uccello

23
00:01:00,320 --> 00:01:03,270
di ciò che un sito web e come
di pensare la progettazione di un

24
00:01:03,270 --> 00:01:04,800
sito web per la partenza.

25
00:01:04,800 --> 00:01:08,370
>> Quindi voi ragazzi, a questo punto - con esso
essendo Venerdì sera - dovrebbe avere

26
00:01:08,370 --> 00:01:11,000
presentato la finanza CS50
problema di imposta.

27
00:01:11,000 --> 00:01:15,260
Speriamo, che era un buon gusto
di ciò programmazione web può essere.

28
00:01:15,260 --> 00:01:18,261
Ma qui vogliamo, un po ', dare
un altro gusto, pure.

29
00:01:18,261 --> 00:01:23,190
>> TOMAS REIMERS: Quindi, solo per ricapitolare quello che
succede, quando si digita l'URL per

30
00:01:23,190 --> 00:01:26,650
il vostro browser web, l'URL viene
guardato nel computer.

31
00:01:26,650 --> 00:01:28,590
E il computer di contatto
a un altro computer,

32
00:01:28,590 --> 00:01:29,890
che ospita quel sito.

33
00:01:29,890 --> 00:01:33,150
OK, in modo che quando si va a google.com, sei
collegato ad una delle Google

34
00:01:33,150 --> 00:01:36,496
computer, che ha la
file per google.com.

35
00:01:36,496 --> 00:01:38,750
>> Si chiede poi per un file specifico.

36
00:01:38,750 --> 00:01:40,020
Quindi, se si va -

37
00:01:40,020 --> 00:01:41,550
Non lo so -

38
00:01:41,550 --> 00:01:48,170
example.com / index.html o / test.html,
si sta andando a chiedere

39
00:01:48,170 --> 00:01:49,340
quel file specifico.

40
00:01:49,340 --> 00:01:52,780
E il server web sta andando
per tornare a voi.

41
00:01:52,780 --> 00:01:54,910
>> Poi, una volta che si passa attraverso quel file -

42
00:01:54,910 --> 00:01:57,750

43
00:01:57,750 --> 00:01:59,950
una volta che sei computer ottiene che
il file - che sta per cominciare

44
00:01:59,950 --> 00:02:00,820
per costruire una pagina web.

45
00:02:00,820 --> 00:02:03,020
Così ora ha il file HTML,
che è un po 'come l'

46
00:02:03,020 --> 00:02:05,170
struttura della pagina web.

47
00:02:05,170 --> 00:02:08,620
Il file HTML potrebbe anche riferimento
File CSS, che definiscono il

48
00:02:08,620 --> 00:02:09,889
lo stile della pagina web.

49
00:02:09,889 --> 00:02:12,970
>> File JavaScript, che definisce
l'interazione con la pagina web.

50
00:02:12,970 --> 00:02:15,200
I file di immagini, che sono solo immagini.

51
00:02:15,200 --> 00:02:19,450
E forse collegarli ad altri file HTML,
che è possibile visitare.

52
00:02:19,450 --> 00:02:22,656

53
00:02:22,656 --> 00:02:24,380
>> MIKE RIZZO: OK, grande.

54
00:02:24,380 --> 00:02:28,980
Quindi voi ragazzi avete tutti, forse,
faticosamente impostare il host locale

55
00:02:28,980 --> 00:02:30,810
sulla vostra macchina virtuale.

56
00:02:30,810 --> 00:02:35,650
E che proprio, tipo di, è il locale
dominio che il computer ospita solo

57
00:02:35,650 --> 00:02:38,760
per voi presso il proprio indirizzo IP.

58
00:02:38,760 --> 00:02:43,300
>> Quindi all'interno di questo, allora si può aggiungere
ad esso proprie pagine web.

59
00:02:43,300 --> 00:02:47,655
Voglio dire, in CS50 Finanza, si dovrebbe avere
aggiunte alcune pagine HTML, che sono,

60
00:02:47,655 --> 00:02:49,410
una sorta di, avvolto nella confezione PHP.

61
00:02:49,410 --> 00:02:54,690
Ma alla fine, ciò che le vostre pagine PHP
sono stati output era HTML.

62
00:02:54,690 --> 00:02:58,210
>> Ma ripensando ai primi inizi
del PSET, abbiamo dovuto impostare

63
00:02:58,210 --> 00:03:00,890
le autorizzazioni per tutto, giusto?

64
00:03:00,890 --> 00:03:07,270
Quindi questo lascia solo fondamentalmente ci conosciamo
chi può leggere, scrivere, e forse

65
00:03:07,270 --> 00:03:08,730
eseguire ognuno dei file.

66
00:03:08,730 --> 00:03:11,870
Quindi stiamo andando a fare una rapida - hm?

67
00:03:11,870 --> 00:03:15,660
>> TOMAS REIMERS: Così stiamo andando
fare una rapida demo.

68
00:03:15,660 --> 00:03:19,560
Quindi, solo per ricordare, quando si
collegarsi al computer di Google -

69
00:03:19,560 --> 00:03:20,690
chi -

70
00:03:20,690 --> 00:03:24,060
e chiedere un file, il computer prima
ha bisogno di assicurarsi che si sta autorizzati

71
00:03:24,060 --> 00:03:28,790
effettivamente visualizzare il file o letto che
il file perché non si può solo chiedere

72
00:03:28,790 --> 00:03:30,430
per qualsiasi file sul computer, giusto?

73
00:03:30,430 --> 00:03:32,260
Questo sarebbe un pericolo per la sicurezza.

74
00:03:32,260 --> 00:03:37,020
>> Quindi i file sui sistemi che usiamo, come
questo apparecchio CS50, hanno tre

75
00:03:37,020 --> 00:03:39,200
generale delle persone che possono avere
autorizzazioni per qualcosa.

76
00:03:39,200 --> 00:03:41,610
Il primo è l'attuale
proprietario di detto file.

77
00:03:41,610 --> 00:03:43,820
Il secondo è il gruppo che
il file appartiene.

78
00:03:43,820 --> 00:03:46,090
Non stiamo andando a fuoco
troppo su questo.

79
00:03:46,090 --> 00:03:50,010
E l'ultima cosa è, una specie di, come il
mondo, o come tutti gli altri chi è

80
00:03:50,010 --> 00:03:54,130
non specifiche per quel file e non
avere alcun diritto di proprietà su di esso.

81
00:03:54,130 --> 00:04:05,650
>> Quindi, se abbiamo proprietario, il gruppo,
e poi mondo.

82
00:04:05,650 --> 00:04:10,510
E poi, per ciascuno di questi gruppi, è
può avere uno dei tre autorizzazioni,

83
00:04:10,510 --> 00:04:13,010
OK, o multipli di essi.

84
00:04:13,010 --> 00:04:15,070
È possibile avere i permessi di lettura.

85
00:04:15,070 --> 00:04:16,560
Si possono avere permessi giusti.

86
00:04:16,560 --> 00:04:18,880
E si può avere i permessi di esecuzione.

87
00:04:18,880 --> 00:04:22,060
>> Quindi, in termini di tipi di file effettivi, leggere
il permesso è come in realtà la lettura

88
00:04:22,060 --> 00:04:23,250
il contenuto del file.

89
00:04:23,250 --> 00:04:24,730
Un'autorizzazione destra sta scrivendo
a detta file.

90
00:04:24,730 --> 00:04:28,370
Un permesso di esecuzione è in esecuzione il
il file come si fa quando si esegue una delle

91
00:04:28,370 --> 00:04:29,620
i vostri progetti CS50.

92
00:04:29,620 --> 00:04:32,190

93
00:04:32,190 --> 00:04:38,820
>> Così, quando stiamo pensando file
come quando abbiamo bisogno di leggere un HTML

94
00:04:38,820 --> 00:04:41,790
file che deve essere mondo
leggibile, giusto?

95
00:04:41,790 --> 00:04:44,420
Presumibilmente, anche il proprietario vuole
per essere in grado di modificare quel file.

96
00:04:44,420 --> 00:04:46,610
Così il proprietario avrà bisogno
leggere e scrivere autorizzazioni.

97
00:04:46,610 --> 00:04:48,710
Non hanno davvero bisogno di eseguire.

98
00:04:48,710 --> 00:04:50,950
>> Gruppo, stiamo andando a trattare la
stesso del mondo per ora.

99
00:04:50,950 --> 00:04:54,610
Quindi hanno bisogno di autorizzazioni di lettura.

100
00:04:54,610 --> 00:04:57,310
Ma non hanno bisogno di scrittura
o permessi di esecuzione.

101
00:04:57,310 --> 00:05:01,920
E ora, se ripensiamo a ex
Pset, ciò che ci rendiamo conto è questo tipo

102
00:05:01,920 --> 00:05:03,360
di assomigliare binario, giusto?

103
00:05:03,360 --> 00:05:04,210
1 è l'acronimo di sì.

104
00:05:04,210 --> 00:05:05,040
0 per nessuna.

105
00:05:05,040 --> 00:05:06,870
E possiamo effettivamente tradurre
questo binario.

106
00:05:06,870 --> 00:05:10,478
>> Quindi 110 in binario sarebbe 6.

107
00:05:10,478 --> 00:05:13,270
100 sarebbero 4.

108
00:05:13,270 --> 00:05:14,690
Stesso con il mondo.

109
00:05:14,690 --> 00:05:20,846
Così il numero che si otterrebbe per il
autorizzazioni per questo sarebbero 644.

110
00:05:20,846 --> 00:05:24,400
>> MIKE RIZZO: E se si pensa di nuovo a
quando si chmoded qualcosa, credo

111
00:05:24,400 --> 00:05:28,980
hanno dato nel problema impostare l'
esempio di dove si poteva fare

112
00:05:28,980 --> 00:05:36,470
qualcosa come chmod 644
e poi il nome del file.

113
00:05:36,470 --> 00:05:39,980
Il 644 allora, è ora possibile visualizzare direttamente
da dove viene.

114
00:05:39,980 --> 00:05:42,840
Così si spera che rende tale
un po 'più chiaro.

115
00:05:42,840 --> 00:05:45,600
>> E poi per chiarezza vi guy -

116
00:05:45,600 --> 00:05:48,200
oh sì, qui è di nuovo.

117
00:05:48,200 --> 00:05:53,260
Quindi 600 allora sarebbe solo l'esempio
abbiamo rinunciato qui dove il proprietario ha

118
00:05:53,260 --> 00:05:56,360
permessi di lettura e di destra mentre il gruppo
e nel mondo non hanno alcuna autorizzazione

119
00:05:56,360 --> 00:05:58,145
per accedere al file.

120
00:05:58,145 --> 00:06:01,500
>> TOMAS REIMERS: E poi abbiamo un breve
elenco delle autorizzazioni comuni.

121
00:06:01,500 --> 00:06:05,250
Quindi directory, si vuole
effettivamente chmod 711.

122
00:06:05,250 --> 00:06:08,930
Rapido da parte - per una directory per avere
permessi di esecuzione significa essere in grado

123
00:06:08,930 --> 00:06:11,680
per aprire la directory.

124
00:06:11,680 --> 00:06:15,280
Immagini, CSS, JavaScript, HTML esigenze
644 perché, in fondo, il mondo

125
00:06:15,280 --> 00:06:16,400
esigenze autorizzazioni di lettura.

126
00:06:16,400 --> 00:06:20,960
>> E PHP, che voi ragazzi avete visto
anche se non saremo parlarne

127
00:06:20,960 --> 00:06:24,880
rigorosamente è tipicamente chmoded con
autorizzazione 600 perché è gestito con

128
00:06:24,880 --> 00:06:26,540
le autorizzazioni del proprietario.

129
00:06:26,540 --> 00:06:27,790
Almeno sull'apparecchio.

130
00:06:27,790 --> 00:06:30,200

131
00:06:30,200 --> 00:06:36,870
>> MIKE RIZZO: Quindi se non lo fai specificamente
specificare quale tipo di file

132
00:06:36,870 --> 00:06:39,480
si vuole in realtà l'impostazione
questa presentazione -

133
00:06:39,480 --> 00:06:43,490
abbiamo avuto un problema con questo perché
tutto ciò non è stato chmoded correttamente -

134
00:06:43,490 --> 00:06:47,550
si sta andando ad ottenere, tipo di, un
Errore proibito che il sito

135
00:06:47,550 --> 00:06:49,700
in realtà non dispone dell'autorizzazione
per accedere a qualsiasi file che

136
00:06:49,700 --> 00:06:51,370
si desidera accedere.

137
00:06:51,370 --> 00:06:54,780
E, naturalmente, che può essere fissato -
come nel problema set - cambiando

138
00:06:54,780 --> 00:06:56,405
le autorizzazioni in modo appropriato.

139
00:06:56,405 --> 00:06:59,620
>> TOMAS REIMERS: E l'ultimo commento di
sviluppo locale è rapidamente - abbiamo

140
00:06:59,620 --> 00:07:02,000
portato questo, ma volevamo solo
per portare di nuovo -

141
00:07:02,000 --> 00:07:06,230
se chiedete un server - host in modo locale,
per esempio, com o qualsiasi altra cosa. -

142
00:07:06,230 --> 00:07:09,170
e non si specifica un file specifico,
il file che il computer sta

143
00:07:09,170 --> 00:07:11,540
chiedere è chiamato index.html.

144
00:07:11,540 --> 00:07:12,790
Oppure, se questo non esiste, index.php.

145
00:07:12,790 --> 00:07:15,560

146
00:07:15,560 --> 00:07:16,350
>> Freddo.

147
00:07:16,350 --> 00:07:19,560
Ecco, questo è solo un riassunto di tutto,
speriamo, che abbiamo trattato in

148
00:07:19,560 --> 00:07:22,800
sezione e lecture,
e finora in CS50.

149
00:07:22,800 --> 00:07:26,110
E ora stiamo per iniziare a parlare
biblioteche merito specifico.

150
00:07:26,110 --> 00:07:30,270
Librerie JavaScript e CSS
per le applicazioni web.

151
00:07:30,270 --> 00:07:36,350
>> Quindi, una ragione pratica per cui abbiamo
biblioteche è la programmazione -

152
00:07:36,350 --> 00:07:39,000
c'è un sacco di problemi nella
programmazione, che mantengono spuntando

153
00:07:39,000 --> 00:07:40,570
ancora, e ancora, e ancora.

154
00:07:40,570 --> 00:07:43,870
Si può notare che un sacco di siti web
hanno bisogno la possibilità di avere a discesa

155
00:07:43,870 --> 00:07:49,100
menu, ad esempio, o devono essere in grado
ad avere un pulsante molto standard

156
00:07:49,100 --> 00:07:51,400
stile, che non può essere
la cosa più facile.

157
00:07:51,400 --> 00:07:54,670
Ora che si inizia a entrare in HTML,
rendersi conto che i pulsanti possono effettivamente

158
00:07:54,670 --> 00:07:57,720
guardare davvero brutto se
non fare nulla.

159
00:07:57,720 --> 00:08:00,830
>> Così un sacco di persone hanno scritto
chiamato librerie.

160
00:08:00,830 --> 00:08:02,990
E in questo contesto, sono
chiamato anche quadri.

161
00:08:02,990 --> 00:08:04,790
Stiamo andando a utilizzare il
due intercambiabile.

162
00:08:04,790 --> 00:08:07,360
E quello che sono è che sono fondamentalmente
pezzi di codice già pronti -

163
00:08:07,360 --> 00:08:09,130
sia CSS o JavaScript -

164
00:08:09,130 --> 00:08:13,240
che portare via un sacco di
squadra che avete in codifica.

165
00:08:13,240 --> 00:08:17,290
>> Così hanno pre-definiscono un gruppo di classi o
pre-definire una serie di funzioni per

166
00:08:17,290 --> 00:08:20,110
Il caso di JavaScript, che
è possibile chiamare più tardi.

167
00:08:20,110 --> 00:08:22,690
E poi si può, una sorta di, avere
accesso al codice senza

168
00:08:22,690 --> 00:08:23,710
dover fare nulla.

169
00:08:23,710 --> 00:08:27,750
Un esempio della biblioteca era CS50.H.
Quella era una biblioteca abbiamo dato a voi indietro

170
00:08:27,750 --> 00:08:32,090
nella prima settimana, che ha permesso di fare
cose del genere GetInt e GetString

171
00:08:32,090 --> 00:08:35,237
senza dover scrivere
qualsiasi codice voi stessi.

172
00:08:35,237 --> 00:08:36,179
>> MIKE RIZZO: Va bene.

173
00:08:36,179 --> 00:08:40,299
Così qui, proprio come abbiamo dovuto includere
nel nostro c file diverso

174
00:08:40,299 --> 00:08:46,570
biblioteche, dovremmo anche includere
file HTML nostra librerie diverse.

175
00:08:46,570 --> 00:08:50,310
Ad esempio, se volessimo includere
una specifica libreria JavaScript qui,

176
00:08:50,310 --> 00:08:52,850
forse, quello che abbiamo scritto
noi stessi come è ospitato localmente

177
00:08:52,850 --> 00:08:56,000
chiamati script.js, dobbiamo solo
utilizzare questa notazione.

178
00:08:56,000 --> 00:08:59,500
>> Così abbiamo tipo di script equals
JavaScript fonte equals

179
00:08:59,500 --> 00:09:01,260
Javascript.js.

180
00:09:01,260 --> 00:09:05,190
E se pensi al tuo CS50
problema della finanza set, se si guardava in

181
00:09:05,190 --> 00:09:09,190
header.php nella cartella dei modelli,
avresti dovuto vedere

182
00:09:09,190 --> 00:09:10,970
alcuni di questi inclusi.

183
00:09:10,970 --> 00:09:13,250
Quindi questa prima - i copioni -

184
00:09:13,250 --> 00:09:16,080
è inclusa una libreria JavaScript.

185
00:09:16,080 --> 00:09:18,760
Tra cui una biblioteca CSS è
un po 'diverso.

186
00:09:18,760 --> 00:09:21,430
>> Qui, invece di script
tag che serve il tag link.

187
00:09:21,430 --> 00:09:27,110
E poi, il tipo di testo CSS
è un po 'diverso.

188
00:09:27,110 --> 00:09:29,270
Non dovete sempre includere
foglio di stile rel.

189
00:09:29,270 --> 00:09:30,970
Ma penso che sia, in generale,
buone pratiche.

190
00:09:30,970 --> 00:09:35,810
>> E poi finalmente, la HREF, che si
Probabilmente ha visto nei tuoi ATAGs per il collegamento

191
00:09:35,810 --> 00:09:39,440
in diversi link a Specifica
il link dove trovare questo.

192
00:09:39,440 --> 00:09:42,250
Ad esempio, se volessimo collegare un
libreria diversa - diciamo solo che -

193
00:09:42,250 --> 00:09:49,330
che vivevano a styles.css.

194
00:09:49,330 --> 00:09:54,030
E abbiamo voluto legare che in questo è
ospitata sul web, vorremmo copiare quello.

195
00:09:54,030 --> 00:09:58,834
E poi incollarlo in qualunque
abbiamo invece proprio qui.

196
00:09:58,834 --> 00:10:01,340
>> TOMAS REIMERS: OK, si spera
ragazzi sono già familiari

197
00:10:01,340 --> 00:10:02,410
con il modo di collegare i CSS.

198
00:10:02,410 --> 00:10:04,000
Si doveva farlo su
il vostro ultimo set marrone.

199
00:10:04,000 --> 00:10:07,110
JavaScript, alcuni di voi forse
avere una certa esperienza con.

200
00:10:07,110 --> 00:10:07,980
Alcuni di voi non può.

201
00:10:07,980 --> 00:10:12,190
>> Quindi per ora, sapere che un file JavaScript
è molto simile a un file CSS in

202
00:10:12,190 --> 00:10:15,640
nel senso che è possibile collegare ad esso o
che è possibile includere internamente.

203
00:10:15,640 --> 00:10:17,360
E ti permette di cose di script.

204
00:10:17,360 --> 00:10:21,820
E stiamo andando a piedi attraverso un
po 'di JavaScript in seguito.

205
00:10:21,820 --> 00:10:23,560
>> Quindi, utilizzando una libreria -

206
00:10:23,560 --> 00:10:26,150
una volta che hai inserito è, è come
semplice come letteralmente chiamando il

207
00:10:26,150 --> 00:10:29,640
funzioni o aggiungendo l'
nomi delle classi ad esso.

208
00:10:29,640 --> 00:10:32,220
L'ultima cosa che vogliamo parlare
circa in termini di biblioteca -

209
00:10:32,220 --> 00:10:34,180
e questo è più di una nota tecnica -

210
00:10:34,180 --> 00:10:35,860
è licenze open source.

211
00:10:35,860 --> 00:10:41,550
Così, quando si trovano queste librerie reali,
si può pensare di

212
00:10:41,550 --> 00:10:47,630
Domande come è OK che io sono solo
utilizzando il codice di qualcun altro, soprattutto

213
00:10:47,630 --> 00:10:51,970
perché è qualcosa che molto
ti ha detto di non fare in questo corso.

214
00:10:51,970 --> 00:10:55,790
>> Quindi, in caso di concessione di licenze open source,
un sacco di sviluppatori -

215
00:10:55,790 --> 00:10:57,540
una volta che hanno scritto una biblioteca,
che pensano che potrebbe essere

216
00:10:57,540 --> 00:10:59,450
utile ad altre persone -

217
00:10:59,450 --> 00:11:02,420
sarà pubblicarlo sul web
e dargli una licenza.

218
00:11:02,420 --> 00:11:06,620
E una licenza dice che in fondo io sono presente
l'autorizzazione alla concessione ad altri

219
00:11:06,620 --> 00:11:11,250
persone di utilizzare questo pezzo di software
con il seguente tipo di

220
00:11:11,250 --> 00:11:13,230
stipulazioni.

221
00:11:13,230 --> 00:11:16,100
>> Abbiamo incluso un link ad un buon sito per
aiutano a capire le licenze in

222
00:11:16,100 --> 00:11:17,720
caso in cui si esegue in loro.

223
00:11:17,720 --> 00:11:21,680
Disposizioni comuni sono cose come
siete invitati a utilizzare la mia biblioteca così

224
00:11:21,680 --> 00:11:23,000
Finché mi dai credito.

225
00:11:23,000 --> 00:11:25,670
Siete invitati a utilizzare la mia libreria
purché quando si rompe

226
00:11:25,670 --> 00:11:26,790
non mi biasimi.

227
00:11:26,790 --> 00:11:30,310
Siete invitati ad utilizzare la mia biblioteca così a lungo
come non si usa per fare soldi

228
00:11:30,310 --> 00:11:31,910
per voi stessi.

229
00:11:31,910 --> 00:11:34,130
Questi sono i tipi di comuni
stipulazioni.

230
00:11:34,130 --> 00:11:37,780
>> Per questo progetto finale CS50, hanno
non dovrebbe essere super rilevante perché

231
00:11:37,780 --> 00:11:41,440
i progetti che voi ragazzi l'uso sono
probabilmente piuttosto, una sorta di, conosciuto.

232
00:11:41,440 --> 00:11:44,170
Ma quando effettivamente andare fuori nel
mondo e iniziare a utilizzare le librerie, che

233
00:11:44,170 --> 00:11:48,100
può o non può essere così implementata come
alcuni di quelli più popolari Siamo

234
00:11:48,100 --> 00:11:49,780
intenzione di passare attraverso.

235
00:11:49,780 --> 00:11:53,310
E 'bello essere in grado di capire
queste licenze e per

236
00:11:53,310 --> 00:11:54,560
capire cosa significano.

237
00:11:54,560 --> 00:11:58,120

238
00:11:58,120 --> 00:11:58,586
E andando indietro.

239
00:11:58,586 --> 00:12:00,960
>> MIKE RIZZO: OK.

240
00:12:00,960 --> 00:12:04,850
Così ora di passare esempi
di effettiva CSS.

241
00:12:04,850 --> 00:12:07,770
A questo punto finora, si potrebbe
non hanno incontrato questo.

242
00:12:07,770 --> 00:12:10,300
Ma si potrebbe avere incontrato in
la vita di tutti i giorni in cui qualcosa

243
00:12:10,300 --> 00:12:13,160
che guarda in un modo su un navigatore
potrebbe non avere lo stesso aspetto

244
00:12:13,160 --> 00:12:14,880
modo in un altro browser.

245
00:12:14,880 --> 00:12:17,400
>> Questo si chiama Browser Browser
compatibilità.

246
00:12:17,400 --> 00:12:20,780
E sempre più sta diventando sempre
più di un problema, in particolare per quanto

247
00:12:20,780 --> 00:12:25,260
browser prendono sempre più libertà
ad attuare le cose come vogliono.

248
00:12:25,260 --> 00:12:28,440
Quindi, per superare quella, vi è in realtà
una grande biblioteca chiamata Normalize.CSS.

249
00:12:28,440 --> 00:12:32,236

250
00:12:32,236 --> 00:12:33,770
>> TOMAS REIMERS: Abbiamo incluso il collegamento.

251
00:12:33,770 --> 00:12:36,210
A questo punto, è utile se
avete il vostro computer portatile in là

252
00:12:36,210 --> 00:12:38,740
guardando il sito.

253
00:12:38,740 --> 00:12:42,580
E stiamo dando questo a voi di destra
ora semplicemente perché la finale CS50

254
00:12:42,580 --> 00:12:44,370
progetto è in realtà andando a
chiedere per la sua attuazione

255
00:12:44,370 --> 00:12:45,860
allo stesso modo e tramite browser.

256
00:12:45,860 --> 00:12:49,250
>> Quindi, solo per mantenere nella parte posteriore della vostra
testa, questa è una meravigliosa biblioteca

257
00:12:49,250 --> 00:12:51,170
perché sarà, una sorta di,
uniformare le cose.

258
00:12:51,170 --> 00:12:54,230
In Firefox, qualcosa potrebbe mostrare
come un pixel a sinistra.

259
00:12:54,230 --> 00:12:58,390
E poi Chrome può decidere che in realtà
cosa volevi dire era di 10 pixel

260
00:12:58,390 --> 00:12:59,380
a fianco.

261
00:12:59,380 --> 00:13:01,030
E si vuole standardizzare questo.

262
00:13:01,030 --> 00:13:05,360
Normalize effettivamente fare davvero un buon
compito di fare in modo che il vostro sito

263
00:13:05,360 --> 00:13:08,070
sembra la stessa per tutti i browser.

264
00:13:08,070 --> 00:13:10,660
>> MIKE RIZZO: Quindi se volevamo solo
fare clic sul collegamento molto rapidamente e spettacolo

265
00:13:10,660 --> 00:13:13,140
quello che sembra, è
può scaricare utilizzando il

266
00:13:13,140 --> 00:13:14,670
gigante pulsante Download.

267
00:13:14,670 --> 00:13:18,520
O Vi incoraggio a leggere di più
cliccando questo link in basso

268
00:13:18,520 --> 00:13:19,310
nell'angolo a destra.

269
00:13:19,310 --> 00:13:22,420
>> TOMAS REIMERS: E se effettivamente
fare clic su Leggi di più proprio lì -

270
00:13:22,420 --> 00:13:24,340
scegliere la sorgente su GitHub -

271
00:13:24,340 --> 00:13:31,720
vi si può vedere l'open source
licenza a LICENSE.md proprio lì.

272
00:13:31,720 --> 00:13:35,740
E vedrete qui è il
licenza MIT molto popolare.

273
00:13:35,740 --> 00:13:38,940
Anche in questo caso, se si legge nel testo,
sarete in grado di trovare sul sito

274
00:13:38,940 --> 00:13:42,550
si fa riferimento prima e essere in grado di
capire senza dover leggere

275
00:13:42,550 --> 00:13:45,920
attraverso il gergo legale.

276
00:13:45,920 --> 00:13:46,850
>> MIKE RIZZO: OK, grande.

277
00:13:46,850 --> 00:13:47,940
Ecco, questo è Normalize.

278
00:13:47,940 --> 00:13:49,190
Abbiamo voluto dare
che molto velocemente.

279
00:13:49,190 --> 00:13:50,030
Oh, hai una domanda?

280
00:13:50,030 --> 00:13:53,013
>> AUDIENCE: Quindi, quando si scarica, si
basta seguire il codice che essi hanno

281
00:13:53,013 --> 00:13:54,098
sotto il pulsante Download?

282
00:13:54,098 --> 00:13:55,860
>> TOMAS REIMERS: Sì, così
quando si scarica -

283
00:13:55,860 --> 00:13:58,130
>> MIKE RIZZO: Oh, questo è un ottimo punto.

284
00:13:58,130 --> 00:14:00,700
Quindi la domanda è come si fa
abbiamo effettivamente scaricarlo?

285
00:14:00,700 --> 00:14:03,260
Quindi, se si clicca sul link, vediamo
che in realtà apre

286
00:14:03,260 --> 00:14:05,030
il codice sorgente.

287
00:14:05,030 --> 00:14:08,550
Quindi, per fare questo, quello che potevamo
non è sufficiente fare clic su Salva con nome.

288
00:14:08,550 --> 00:14:10,830
Salva con nome e che dovrebbero
aprire un file.

289
00:14:10,830 --> 00:14:14,160
E allora possiamo scegliere di salvare
come normalize.CSS.

290
00:14:14,160 --> 00:14:15,810
E poi dovresti collegare in -

291
00:14:15,810 --> 00:14:18,660
>> TOMAS REIMERS: Lo stesso modo in cui si
collegare in qualsiasi altro file.

292
00:14:18,660 --> 00:14:22,250
E una volta che si collega in, ciò che è grande
su Normalize è sarà effettivamente

293
00:14:22,250 --> 00:14:25,920
prendersi cura di tutto il duro
lavorare da sola.

294
00:14:25,920 --> 00:14:27,730
Il che significa che non avete
per aggiungere tutte le classi.

295
00:14:27,730 --> 00:14:29,690
>> Non devi fare nulla di strano.

296
00:14:29,690 --> 00:14:34,590
Si normalizza senza di te
fare nient'altro.

297
00:14:34,590 --> 00:14:36,083
Sì, è necessario includerlo.

298
00:14:36,083 --> 00:14:38,990

299
00:14:38,990 --> 00:14:40,240
Google Chrome non risponde.

300
00:14:40,240 --> 00:14:43,270

301
00:14:43,270 --> 00:14:44,860
>> Solo un rapido ritiro -

302
00:14:44,860 --> 00:14:46,800
Ho notato che ci siamo buttati in questo.

303
00:14:46,800 --> 00:14:49,010
Il resto di questa presentazione è
sarà una rapida panoramica.

304
00:14:49,010 --> 00:14:50,380
Un sondaggio di biblioteche.

305
00:14:50,380 --> 00:14:52,710
>> In sostanza, quello che sono.

306
00:14:52,710 --> 00:14:53,350
Quello che fanno.

307
00:14:53,350 --> 00:14:54,060
Come sono utili.

308
00:14:54,060 --> 00:14:56,540
Come si potrebbe implementarli.

309
00:14:56,540 --> 00:14:59,730
Se si vuole iniziare a guardare loro,
seguendo lungo, e la lettura attraverso

310
00:14:59,730 --> 00:15:01,990
loro, vivamente incoraggiare tale.

311
00:15:01,990 --> 00:15:07,620
>> In alternativa, sei il benvenuto anche a
iniziare a scaricarli compreso

312
00:15:07,620 --> 00:15:11,400
loro in uno spettacolo solo per vedere quello che
guardare come o cosa fare se si ha

313
00:15:11,400 --> 00:15:12,270
il vostro computer portatile di fronte a voi.

314
00:15:12,270 --> 00:15:14,650
Se non, siete invitati a tenere
ci ascolta parlare.

315
00:15:14,650 --> 00:15:15,500
Abbiamo intenzione di continuare a parlare.

316
00:15:15,500 --> 00:15:18,680
E abbiamo il tempo, alla fine, si spera
avremo effettivamente entrare in vi mostra

317
00:15:18,680 --> 00:15:20,946
quello che alcuni di queste librerie
simile.

318
00:15:20,946 --> 00:15:22,320
>> MIKE RIZZO: Freddo.

319
00:15:22,320 --> 00:15:25,466
Va bene, così ora parliamone
su Font impressionante.

320
00:15:25,466 --> 00:15:30,480
>> TOMAS REIMERS: così Font Impressionante è un
sito davvero bello, soprattutto per chi

321
00:15:30,480 --> 00:15:32,450
di noi che sono meno artisticamente
di talento.

322
00:15:32,450 --> 00:15:36,330

323
00:15:36,330 --> 00:15:38,880
Ignorando il nome del font Impressionante, dà
un gruppo di icone, che sono

324
00:15:38,880 --> 00:15:41,050
molto utile.

325
00:15:41,050 --> 00:15:45,950
Così un sacco di volte ti attuare un
icona che potete desiderare come una bella X in modo

326
00:15:45,950 --> 00:15:47,170
che si può chiudere qualcosa.

327
00:15:47,170 --> 00:15:49,910
>> Oppure si può decidere una sorta di pulsante Modifica
con un disegno a matita come

328
00:15:49,910 --> 00:15:50,940
tutti gli altri hanno.

329
00:15:50,940 --> 00:15:53,850
E questo è quando si apprende che
disegno quelle icone possono essere

330
00:15:53,850 --> 00:15:55,510
molto noioso e difficile.

331
00:15:55,510 --> 00:15:59,160
Font Awesome - se effettivamente
vai al sito -

332
00:15:59,160 --> 00:16:02,892
ti dà un sacco di icone in
le icone in alto.

333
00:16:02,892 --> 00:16:06,980
Sì, solo la parte superiore.

334
00:16:06,980 --> 00:16:09,030
Vi darà un sacco
di icone gratis.

335
00:16:09,030 --> 00:16:15,210
>> Così qui si vede che abbiamo cose come un
asterisco, bar, un fulmine, un

336
00:16:15,210 --> 00:16:19,750
calendario, un bug, un libro, et cetera.

337
00:16:19,750 --> 00:16:21,110
Questo può essere molto utile.

338
00:16:21,110 --> 00:16:24,290
Il modo in cui si include questo è di includere
letteralmente il file CSS.

339
00:16:24,290 --> 00:16:29,760
E dopo aver incluso il file CSS,
cosa si può fare è di creare un

340
00:16:29,760 --> 00:16:33,430
tag denominato I. satands per
icona con la classe FA

341
00:16:33,430 --> 00:16:34,460
sta per Font impressionante.

342
00:16:34,460 --> 00:16:36,330
E poi, qualunque classe che si desidera.

343
00:16:36,330 --> 00:16:41,220
>> Quindi, se volevo una icona di questa più
piazza proprio qui, vorrei dare

344
00:16:41,220 --> 00:16:43,290
che la classe FA.

345
00:16:43,290 --> 00:16:46,230
E poi FA trattino più trattino quadrato.

346
00:16:46,230 --> 00:16:50,325

347
00:16:50,325 --> 00:16:53,710
>> MIKE RIZZO: Freddo, OK.

348
00:16:53,710 --> 00:16:56,980
>> TOMAS REIMERS: E poi, l'ultima CSS
biblioteca vogliamo ottenere attraverso siamo

349
00:16:56,980 --> 00:16:59,950
cercando di mantenere minimo sul CSS
biblioteche perché ci rendiamo conto della

350
00:16:59,950 --> 00:17:03,660
titolo di questa presentazione
è JavaScript Libraries.

351
00:17:03,660 --> 00:17:07,089
Ma pensavamo che possiamo pure
farvi conoscere le altre biblioteche

352
00:17:07,089 --> 00:17:09,569
mentre stavamo parlando di librerie.

353
00:17:09,569 --> 00:17:11,400
>> Si tratta di Google Web Fonts.

354
00:17:11,400 --> 00:17:17,040
E che cosa Google Web Fonts consente
da fare è aggiungere font al vostro sito web,

355
00:17:17,040 --> 00:17:22,079
che è un modo molto semplice per rendere
bella e per distinguere il set

356
00:17:22,079 --> 00:17:24,460
da tutti gli altri è se ha
un bel carattere o se si ha una bella

357
00:17:24,460 --> 00:17:27,790
collezione di font.

358
00:17:27,790 --> 00:17:31,410
Google Web Fonts è bello a differenza di altri
biblioteche nel senso che si tratta di un

359
00:17:31,410 --> 00:17:33,490
installazione davvero guidata.

360
00:17:33,490 --> 00:17:38,680
>> Quindi, se si segue il link, è
google.com / fonts, credo.

361
00:17:38,680 --> 00:17:41,100
Se si segue questo,
può scegliere il tipo di carattere.

362
00:17:41,100 --> 00:17:44,410
È possibile scegliere sulla sinistra da
di spessore, inclinazione, et cetera.

363
00:17:44,410 --> 00:17:48,970
E poi, una volta scelto uno,
è possibile fare clic utilizzo rapido.

364
00:17:48,970 --> 00:17:49,820
Proprio lì.

365
00:17:49,820 --> 00:17:51,590
In basso a destra della casella.

366
00:17:51,590 --> 00:17:54,380

367
00:17:54,380 --> 00:17:56,700
>> E poi, scorrere verso il basso.

368
00:17:56,700 --> 00:17:59,600

369
00:17:59,600 --> 00:18:02,650
Prima di tutto, ti danno il CSS che
è necessario collegare in realtà ad esso.

370
00:18:02,650 --> 00:18:03,330
E 'proprio lì.

371
00:18:03,330 --> 00:18:05,170
Si può solo copiare e incollare che dentro

372
00:18:05,170 --> 00:18:07,250
E la cosa bella di questo è
in realtà non è nemmeno necessario

373
00:18:07,250 --> 00:18:08,340
scarica il file.

374
00:18:08,340 --> 00:18:11,170
>> Che cosa sta andando a fare è che sta andando
per collegare alla versione di Google di esso.

375
00:18:11,170 --> 00:18:14,130
Ma torniamo al che cosa significa.

376
00:18:14,130 --> 00:18:18,270
Ciò significa che quando un utente
scaricherà il file -

377
00:18:18,270 --> 00:18:22,300
scarica tua pagina HTML - il codice HTML
pagina sta per fare riferimento a questo file.

378
00:18:22,300 --> 00:18:26,790
>> Allora, il computer sta andando a vedere,
oh, è ospitato su google.com piuttosto

379
00:18:26,790 --> 00:18:28,170
che su theirsite.com.

380
00:18:28,170 --> 00:18:30,370
Lasciami andare chiedere a Google per quel file.

381
00:18:30,370 --> 00:18:32,800
E poi, sta andando a includere
quasi come se fosse un

382
00:18:32,800 --> 00:18:35,584
parte del tuo sito.

383
00:18:35,584 --> 00:18:36,540
>> TOMAS REIMERS: Freddo.

384
00:18:36,540 --> 00:18:40,980
E una volta che si includono, poi a
includere nel vostro CSS, ti dà

385
00:18:40,980 --> 00:18:41,830
la linea attuale.

386
00:18:41,830 --> 00:18:45,188
Quindi si imposta la famiglia di caratteri di proprietà
uguale al nome del vostro carattere.

387
00:18:45,188 --> 00:18:47,936

388
00:18:47,936 --> 00:18:50,440
>> MIKE RIZZO: OK.

389
00:18:50,440 --> 00:18:52,220
Quindi, abbiamo appena finito con i CSS.

390
00:18:52,220 --> 00:18:57,230
E alcuni di voi potrebbe pensare, bene,
abbiamo avuto qualche CSS CS50 Finanza.

391
00:18:57,230 --> 00:19:00,390
Ma la biblioteca CSS era bootstrap.

392
00:19:00,390 --> 00:19:05,190
Noi in realtà includiamo Bootstrap un po '
in seguito sotto JavaScript perché con

393
00:19:05,190 --> 00:19:09,660
la libreria di Bootstrap CSS viene anche
con un sacco di JavaScript che

394
00:19:09,660 --> 00:19:12,060
Bootstrap o Twitter -
che ha fatto Bootstrap -

395
00:19:12,060 --> 00:19:15,426
utilizza per gestire tutti i loro CSS.

396
00:19:15,426 --> 00:19:19,592
>> TOMAS REIMERS: Qualcuno ha
domande finora circa CSS in generale?

397
00:19:19,592 --> 00:19:20,723
Siamo bravi?

398
00:19:20,723 --> 00:19:21,216
Impressionante.

399
00:19:21,216 --> 00:19:22,495
>> MIKE RIZZO: Awesome.

400
00:19:22,495 --> 00:19:25,136
>> TOMAS REIMERS: Così in movimento
a JavaScript.

401
00:19:25,136 --> 00:19:27,900
>> MIKE RIZZO: Così abbiamo voluto parlare
su jQuery per cominciare.

402
00:19:27,900 --> 00:19:30,780
Qualcuno ha sentito parlare di jQuery
prima o usato?

403
00:19:30,780 --> 00:19:32,180
Sì, una coppia?

404
00:19:32,180 --> 00:19:36,000
Quindi, se si lavora solo con i nativi
JavaScript, vi ritroverete

405
00:19:36,000 --> 00:19:41,000
digitando un sacco di lunghe selettori molto.

406
00:19:41,000 --> 00:19:44,400
Così che cosa fa jQuery è che fornisce
un bel wrapper per il codice JavaScript

407
00:19:44,400 --> 00:19:48,180
linguaggio che consente di selezionare facilmente
e manipolare diversi elementi

408
00:19:48,180 --> 00:19:52,470
all'interno del modello oggetto di documento di
pagina web o il DOM, che credo

409
00:19:52,470 --> 00:19:54,290
voi ragazzi avete sentito parlare in
lezione a questo punto.

410
00:19:54,290 --> 00:19:57,550
>> TOMAS REIMERS: Se non avete sentito parlare di
o lezione, se non avete visto

411
00:19:57,550 --> 00:20:01,870
Eppure, il Document Object Model è
fondamentalmente come le cose sono rappresentati.

412
00:20:01,870 --> 00:20:05,290
Così HTML sorta di simile a un albero
quando in realtà disegna fuori.

413
00:20:05,290 --> 00:20:06,850
Avete l'elemento HTML in cima.

414
00:20:06,850 --> 00:20:07,560
Hai la testa e il corpo.

415
00:20:07,560 --> 00:20:09,500
>> E poi, all'interno di quella che si
hanno tutto il resto.

416
00:20:09,500 --> 00:20:10,660
Questo è indicato come il DOM -

417
00:20:10,660 --> 00:20:12,120
Document Object Model.

418
00:20:12,120 --> 00:20:16,090
Quindi un modello che rappresenta oggetti in
il documento è un modo semplice di pensare

419
00:20:16,090 --> 00:20:18,560
a tale proposito.

420
00:20:18,560 --> 00:20:22,520
E uno dei la cosa grandiosa di jQuery
è fa davvero di movimento

421
00:20:22,520 --> 00:20:26,460
e gli elementi che la manipolazione all'interno
che incredibilmente semplice.

422
00:20:26,460 --> 00:20:30,300
>> Così semplice, infatti, che la maggioranza dei
JavaScript librerie o se non l'

423
00:20:30,300 --> 00:20:34,200
maggioranza, la grande maggioranza dei propri
vedrete effettivamente richiedono jQuery così

424
00:20:34,200 --> 00:20:37,530
che possono correre se stessi semplicemente
perché se non aveste jQuery, è

425
00:20:37,530 --> 00:20:40,540
sarebbe sprecare un sacco di tempo cercando di
capire come selezionare determinate

426
00:20:40,540 --> 00:20:43,660
elementi e come fare altre cose.

427
00:20:43,660 --> 00:20:47,950
E l'altra cosa grandiosa di jQuery
è che è cross browser compatibile.

428
00:20:47,950 --> 00:20:51,550
>> Quindi ricorda indietro quando abbiamo detto che
Non tutti i browser implementano

429
00:20:51,550 --> 00:20:53,100
le cose allo stesso modo?

430
00:20:53,100 --> 00:20:55,120
Questo è vero anche in JavaScript.

431
00:20:55,120 --> 00:20:58,220
E una delle grandi cose su jQuery
è che rileverà la

432
00:20:58,220 --> 00:21:00,300
browser e rilevare la
metodo appropriato.

433
00:21:00,300 --> 00:21:03,420
>> Quindi, se avete bisogno di selezionare un elemento,
Internet Explorer potrebbe dire che sei

434
00:21:03,420 --> 00:21:05,770
dovrebbe fare in questo modo.

435
00:21:05,770 --> 00:21:08,300
Firefox potrebbe dire la corretta
modo è così.

436
00:21:08,300 --> 00:21:09,710
jQuery non importa.

437
00:21:09,710 --> 00:21:12,550
Quando dite jQuery per selezionare un
elemento sarà capire come è

438
00:21:12,550 --> 00:21:16,290
dovrebbe farlo nel browser
utente è attualmente, e poi fare

439
00:21:16,290 --> 00:21:18,584
in questo modo.

440
00:21:18,584 --> 00:21:22,650
>> MIKE RIZZO: Quindi cerchiamo di non parlare
l'utilizzo di jQuery un po '.

441
00:21:22,650 --> 00:21:27,670
Proprio come PHP, jQuery ha una particolare
predilezione per il simbolo del dollaro.

442
00:21:27,670 --> 00:21:30,880
Quindi, vi accorgerete che ogni jQuery -

443
00:21:30,880 --> 00:21:32,060
Beh, non tutti.

444
00:21:32,060 --> 00:21:35,210
A volte è possibile sostituire il dollaro
segno con la parola jQuery.

445
00:21:35,210 --> 00:21:38,980
Ma in generale, solo perché è
più brevi, ogni volta che vedete jQuery essere

446
00:21:38,980 --> 00:21:41,420
utilizzato sarà con il simbolo del dollaro.

447
00:21:41,420 --> 00:21:47,030
>> Così qui stiamo solo mostrando un inizio
Selettore per un elemento nel DOM.

448
00:21:47,030 --> 00:21:52,850
Qui, abbiamo il simbolo del dollaro seguito
da parentesi aperte e poi citazioni.

449
00:21:52,850 --> 00:21:56,130
E tra virgolette andare nostre selettori
per i diversi elementi.

450
00:21:56,130 --> 00:21:59,810
Proprio come in CSS, abbiamo bisogno selettori a
essere in grado di stile diversi elementi

451
00:21:59,810 --> 00:22:00,840
all'interno della pagina.

452
00:22:00,840 --> 00:22:06,555
Tali diversi selettori traducono
esattamente in jQuery e JavaScript,

453
00:22:06,555 --> 00:22:07,820
per la maggior parte.

454
00:22:07,820 --> 00:22:10,120
>> Quindi qui abbiamo un foo punto.

455
00:22:10,120 --> 00:22:14,780
Quindi, se vi ricordate di lezione,
il punto significa solo la classe.

456
00:22:14,780 --> 00:22:18,850
Quindi stiamo selezionando elemento
con classe foo.

457
00:22:18,850 --> 00:22:22,670
Quindi, se vado avanti e aprire il nostro
JavaScript console qui molto velocemente

458
00:22:22,670 --> 00:22:26,830
solo dimostrarlo, se mi basta digitare il
segno di dollaro, vediamo che si tratta di qualche

459
00:22:26,830 --> 00:22:28,090
funzione che viene in su.

460
00:22:28,090 --> 00:22:29,420
Ed è solo definito da jQuery.

461
00:22:29,420 --> 00:22:32,120
>> TOMAS REIMERS: Per quelli di voi
sconosciuto, la consolle è uno strumento

462
00:22:32,120 --> 00:22:35,430
all'interno di Chrome, che ti permette,
fondamentalmente, eseguire JavaScript sul

463
00:22:35,430 --> 00:22:36,450
pagina corrente.

464
00:22:36,450 --> 00:22:39,420
Questo vi accorgerete incredibilmente utile quando
si sta effettivamente debug e

465
00:22:39,420 --> 00:22:42,400
ha bisogno di essere come, che cosa è la corrente
valore di una variabile globale o cosa

466
00:22:42,400 --> 00:22:43,910
è qualcos'altro?

467
00:22:43,910 --> 00:22:47,620
E 'un po' come GDB con l'eccezione
che si può effettivamente

468
00:22:47,620 --> 00:22:51,600
modificare gli elementi della pagina con
in un modo molto più facile.

469
00:22:51,600 --> 00:22:55,080
E anche così non fosse, in fondo, controllare
con voi prima che fa qualsiasi cosa.

470
00:22:55,080 --> 00:22:58,660
>> Così che, GDB come potrebbe essere, sei
sicuro di voler eseguire il prossimo passo?

471
00:22:58,660 --> 00:22:59,830
La console è in tempo reale.

472
00:22:59,830 --> 00:23:03,690
Così come pagina web è il rendering e
fare tutto ciò che sta facendo, l'

473
00:23:03,690 --> 00:23:05,720
Consiglio di corso anche accanto ad esso.

474
00:23:05,720 --> 00:23:08,330
E si può mettere il codice in impute
quella console, che sarà

475
00:23:08,330 --> 00:23:09,260
essere eseguito sulla pagina.

476
00:23:09,260 --> 00:23:12,190
>> MIKE RIZZO: Quindi, per entrare nella console,
Credo che dovrei brevemente

477
00:23:12,190 --> 00:23:13,750
parlare di come fare.

478
00:23:13,750 --> 00:23:17,850
Negli ultimi problemi che si possono avere
usato Chrome Inspect Element

479
00:23:17,850 --> 00:23:20,440
funzioni o visualizza sorgente pagina -

480
00:23:20,440 --> 00:23:23,870
e questi sono accessibili solo da destra
cliccando sulla pagina o una specifica

481
00:23:23,870 --> 00:23:28,430
elemento ed effettuando una ispezione
elemento o visualizza sorgente pagina.

482
00:23:28,430 --> 00:23:31,190
Possiamo anche accedere al JavaScript
console direttamente da

483
00:23:31,190 --> 00:23:33,630
scegliendo ispezionare elemento.

484
00:23:33,630 --> 00:23:37,930
Console Allora hai appena colpito
sul lato destro.

485
00:23:37,930 --> 00:23:41,900
>> In alternativa, si potrebbe avere anche andato
verso l'angolo in alto a destra,

486
00:23:41,900 --> 00:23:46,820
che è tagliato fuori in questa schermata, dove
ha le tre barre orizzontali.

487
00:23:46,820 --> 00:23:52,010
E si scende a strumenti e
allora console JavaScript

488
00:23:52,010 --> 00:23:53,240
qui dove può vedere -

489
00:23:53,240 --> 00:23:54,370
almeno su Windows -

490
00:23:54,370 --> 00:23:59,680
il collegamento è Shift Control J. Allora
se volessimo selezionare un elemento

491
00:23:59,680 --> 00:24:06,060
in questa pagina, proprio come ho mostrato
prima, facciamo il segno del dollaro parentesi aperte

492
00:24:06,060 --> 00:24:08,180
e poi cita.

493
00:24:08,180 --> 00:24:11,750
>> Una cosa interessante è, in genere,
apici singoli e doppi sono

494
00:24:11,750 --> 00:24:12,370
intercambiabile.

495
00:24:12,370 --> 00:24:16,050
Così un sacco di persone solo uso singola
virgolette perché sono più veloci da digitare

496
00:24:16,050 --> 00:24:19,780
di virgolette, perché non lo fai
devono tenere premuto il tasto Maiusc.

497
00:24:19,780 --> 00:24:21,770
Quindi mi limiterò a farlo adesso.

498
00:24:21,770 --> 00:24:24,510
>> Quindi voglio scegliere qualcosa
con classe.

499
00:24:24,510 --> 00:24:27,200
Container, proprio perché so che è
qualcosa che è sul nostro

500
00:24:27,200 --> 00:24:28,740
pagina web in questo momento.

501
00:24:28,740 --> 00:24:29,520
E mi ha colpito Invio.

502
00:24:29,520 --> 00:24:31,670
E possiamo vedere che ha selezionato.

503
00:24:31,670 --> 00:24:34,990
Così si presenta che
restituito l'oggetto.

504
00:24:34,990 --> 00:24:36,620
Ecco, questo è una selezione di base.

505
00:24:36,620 --> 00:24:40,080
Se volessimo manipolare realtà,
si dovrebbe chiamare qualcosa

506
00:24:40,080 --> 00:24:43,925
su tale selezione, che
avremo in seguito.

507
00:24:43,925 --> 00:24:49,030
>> TOMAS REIMERS: Quindi, solo a guardare quella
più in profondità, questo non è diverso

508
00:24:49,030 --> 00:24:52,245
rispetto alle chiamate di funzione che abbiamo fatto in C.
Il nome della funzione qui è un

509
00:24:52,245 --> 00:24:52,580
po 'strano.

510
00:24:52,580 --> 00:24:55,640
E 'il simbolo del dollaro.

511
00:24:55,640 --> 00:24:57,010
E 'solo un nome di una funzione.

512
00:24:57,010 --> 00:24:58,810
Non c'è niente di speciale.

513
00:24:58,810 --> 00:25:00,450
>> Abbiamo parentesi aperte.

514
00:25:00,450 --> 00:25:03,880
Poi, abbiamo il nostro unico argomento, che
in questo caso sembra essere una stringa,

515
00:25:03,880 --> 00:25:05,680
che è un selettore per esso.

516
00:25:05,680 --> 00:25:08,130
E poi, abbiamo il nostro
parentesi chiusa.

517
00:25:08,130 --> 00:25:09,960
Tutto qui.

518
00:25:09,960 --> 00:25:11,500
>> Non è che molto diversi.

519
00:25:11,500 --> 00:25:12,900
Anche se, ha un aspetto molto strano.

520
00:25:12,900 --> 00:25:17,220
E che può essere, una sorta di, un incollaggio
puntare per un sacco di gente.

521
00:25:17,220 --> 00:25:21,460
>> MIKE RIZZO: Così allo stesso modo, se volessimo
per selezionare un elemento che ha un ID,

522
00:25:21,460 --> 00:25:23,470
Ora vogliamo selezionare da
ID invece di classe.

523
00:25:23,470 --> 00:25:28,080
Sarebbe una cosa simile dove siamo
basta fare il segno tagliente per ID.

524
00:25:28,080 --> 00:25:33,576
Quindi stiamo selezionando qui tutto
elementi che hanno bar ID.

525
00:25:33,576 --> 00:25:35,400
>> TOMAS REIMERS: E questo si estende.

526
00:25:35,400 --> 00:25:36,450
Che CSS estende.

527
00:25:36,450 --> 00:25:42,260
Proprio come in CSS, è possibile selezionare tutti
link, che hanno la foo di classe.

528
00:25:42,260 --> 00:25:43,420
Ecco, è la stessa cosa.

529
00:25:43,420 --> 00:25:52,750
>> Si potrebbe fare a.foo, che seleziona
tutti i collegamenti con il foo classe.

530
00:25:52,750 --> 00:25:58,860
Si potrebbe fare una barra tagliente, che avrebbe
selezionare il collegamento con la barra ID e così

531
00:25:58,860 --> 00:25:59,770
via e così via.

532
00:25:59,770 --> 00:26:02,120
Ogni selettore CSS è un valido
selettore jQuery.

533
00:26:02,120 --> 00:26:03,370
>> MIKE RIZZO: Già.

534
00:26:03,370 --> 00:26:07,996

535
00:26:07,996 --> 00:26:11,460
OK, ora andiamo in un po '
di manipolazione che possiamo fare con

536
00:26:11,460 --> 00:26:12,870
il nostro jQuery.

537
00:26:12,870 --> 00:26:19,280
Così jQuery ha un particolare tipo di
di notazione dove usiamo solo

538
00:26:19,280 --> 00:26:20,170
un punto alla fine.

539
00:26:20,170 --> 00:26:23,340
E si può pensare a questo come in
C come abbiamo avuto diverse strutture.

540
00:26:23,340 --> 00:26:27,110
E per andare in quelle struct, si farebbe
utilizzare un punto per entrare in loro.

541
00:26:27,110 --> 00:26:28,480
>> Questo è, specie di, una cosa simile.

542
00:26:28,480 --> 00:26:33,570
Solo ora abbiamo funzioni all'interno di questo
selettore che possiamo chiamare su di esso.

543
00:26:33,570 --> 00:26:38,640
Così qui, il primo esempio
si può vedere è un selettore CSS.

544
00:26:38,640 --> 00:26:45,290
E in fondo, cosa che fa è
applica il primo elemento CSS a questa

545
00:26:45,290 --> 00:26:46,230
cosa che si è selezionato -

546
00:26:46,230 --> 00:26:47,720
questo elemento che è stato selezionato -

547
00:26:47,720 --> 00:26:49,290
con il valore.

548
00:26:49,290 --> 00:26:55,390
>> TOMAS REIMERS: Quindi un dizionario di facile
che sarebbe se jQuery, in sostanza,

549
00:26:55,390 --> 00:26:57,790
appena preso foo.

550
00:26:57,790 --> 00:27:05,480
E poi in CSS detto,
colore rosso e vicino.

551
00:27:05,480 --> 00:27:06,670
E 'la stessa idea.

552
00:27:06,670 --> 00:27:08,800
Che è fatto è che è stato selezionato
tutti gli elementi foo.

553
00:27:08,800 --> 00:27:10,170
E poi è applicato.

554
00:27:10,170 --> 00:27:15,884
Sorta di, il colore di proprietà
è uguale al rosso.

555
00:27:15,884 --> 00:27:21,070
>> MIKE RIZZO: Allo stesso modo, possiamo anche cambiare
il contenuto effettivo di ciò che è

556
00:27:21,070 --> 00:27:24,870
mostrando il codice HTML della pagina, che
è davvero bello perché significa che il vostro

557
00:27:24,870 --> 00:27:28,095
le pagine web possono ora essere completamente dinamico
e non devono essere statico

558
00:27:28,095 --> 00:27:31,660
di stampare utilizzando PHP
all'inizio di

559
00:27:31,660 --> 00:27:33,320
la pagina viene caricata.

560
00:27:33,320 --> 00:27:36,810
Così qui, se volessimo modificare il
effettiva HTML della pagina, ci sarebbe ora

561
00:27:36,810 --> 00:27:43,550
chiamare la funzione HTML, che poi basta
Inserti qualunque cosa specifichiamo in

562
00:27:43,550 --> 00:27:45,390
che elemento che abbiamo selezionato.

563
00:27:45,390 --> 00:27:49,810
Così qui stiamo selezionando elemento con
foo classe e poi dicendo che è HTML

564
00:27:49,810 --> 00:27:52,200
è ora ciao mondo.

565
00:27:52,200 --> 00:27:55,600
>> TOMAS REIMERS: E se ci pensate
quali sono utili applicazioni di

566
00:27:55,600 --> 00:28:00,800
questo, questo CSS uno, la prima cosa che
si può iniziare a pensare è

567
00:28:00,800 --> 00:28:03,070
in termini di anche menu a discesa.

568
00:28:03,070 --> 00:28:08,350
Si potrebbe iniziare a fare le cose come, quando
un utente si posiziona sopra la parte superiore

569
00:28:08,350 --> 00:28:11,970
di una goccia giù, si vuole fare
la parte inferiore visibile.

570
00:28:11,970 --> 00:28:12,540
Giusto?

571
00:28:12,540 --> 00:28:15,610
>> Quindi, in CSS, abbiamo immobili
per fare qualcosa di visibile.

572
00:28:15,610 --> 00:28:19,330
Cose come visualizzazione del colon none
renderebbe invisibile.

573
00:28:19,330 --> 00:28:21,190
Blocco di visualizzazione renderebbe visibile.

574
00:28:21,190 --> 00:28:25,860
O anche, se si vuole andare più semplice, è
avere cose come eguali visibilità

575
00:28:25,860 --> 00:28:27,520
visibile, e la visibilità uguale nascosta.

576
00:28:27,520 --> 00:28:30,330

577
00:28:30,330 --> 00:28:34,780
>> E si potrebbe iniziare ad attuare le cose
come drop down menu a destra

578
00:28:34,780 --> 00:28:38,410
dopo si ottiene attraverso l'idea di come
si può capire quando questa si apre,

579
00:28:38,410 --> 00:28:39,850
che ce la caveremo molto brevemente.

580
00:28:39,850 --> 00:28:42,160
Ma possiamo iniziare a vedere
applicazioni di questo.

581
00:28:42,160 --> 00:28:45,540
In un certo senso simile, se si dovesse provare
e attuare, diciamo, una chat

582
00:28:45,540 --> 00:28:48,620
motore e si vuole fare un po '
fumetto venire ogni volta che hai

583
00:28:48,620 --> 00:28:52,880
ottenuto un nuovo messaggio, una volta che si ottiene il
nuovo messaggio, si può fare un po '

584
00:28:52,880 --> 00:28:55,890
fumetto salire alterando
il codice HTML della pagina, giusto?

585
00:28:55,890 --> 00:29:00,540
Aggiungendo che la nuvoletta in più
con il testo più in là.

586
00:29:00,540 --> 00:29:01,140
Sì?

587
00:29:01,140 --> 00:29:07,750
>> AUDIENCE: Così si sarebbe incorporare questo all'interno
il codice HTML in una specie di

588
00:29:07,750 --> 00:29:10,534
[Incomprensibile]?

589
00:29:10,534 --> 00:29:12,940
>> MIKE RIZZO: Giusto.

590
00:29:12,940 --> 00:29:16,190
Si ', ci arriveremo
in un po '.

591
00:29:16,190 --> 00:29:18,810
Sì, è simile a
po 'di PHP.

592
00:29:18,810 --> 00:29:21,240
Non esattamente simile.

593
00:29:21,240 --> 00:29:24,730
>> Un buon distinzione da fare è ciò che questo
è in realtà montaggio quando editiamo

594
00:29:24,730 --> 00:29:28,480
la pagina perché non sarà
la modifica del file effettivo che si sta

595
00:29:28,480 --> 00:29:31,380
mantenuto sul server perché il mondo
non dovrebbe avere il permesso

596
00:29:31,380 --> 00:29:32,610
per modificare i file.

597
00:29:32,610 --> 00:29:36,080
Questo è solo modificando ciò che è sulla pagina
e ciò che è visualizzato all'interno

598
00:29:36,080 --> 00:29:36,950
il browser.

599
00:29:36,950 --> 00:29:40,340
Quindi, se si dovesse ricaricare la pagina dopo,
dire, cancellando qualcosa di noi

600
00:29:40,340 --> 00:29:44,730
vediamo che possiamo fare con la chiamata remove,
che cosa sarebbe poi riapparire.

601
00:29:44,730 --> 00:29:48,590
>> TOMAS REIMERS: Quindi un modo di pensare
questo è se io sono il computer e

602
00:29:48,590 --> 00:29:50,170
Mike è, una sorta di, il server.

603
00:29:50,170 --> 00:29:53,850
Che cosa sta per accadere è che ho intenzione di
chiedere a Mike, hey, posso avere una copia di

604
00:29:53,850 --> 00:29:54,630
questa pagina web?

605
00:29:54,630 --> 00:29:56,190
E lui mi darà una copia di esso.

606
00:29:56,190 --> 00:29:57,430
>> No, non è la cosa originale.

607
00:29:57,430 --> 00:29:58,620
E 'solo una copia.

608
00:29:58,620 --> 00:30:00,450
E poi sarebbe come, oh,
c'è Javascript qui.

609
00:30:00,450 --> 00:30:02,450
Chiaramente, devo modificare il
Pagina di essere come questo.

610
00:30:02,450 --> 00:30:04,250
E sto modificando la vostra copia.

611
00:30:04,250 --> 00:30:05,920
>> Ma questo non effettuare
la copia reale.

612
00:30:05,920 --> 00:30:08,480
E se dovessi chiedere a lui di nuovo
aggiornare la pagina, -

613
00:30:08,480 --> 00:30:10,060
hey, posso avere un'altra copia pulita -

614
00:30:10,060 --> 00:30:11,440
ha intenzione di darmi
un'altra copia pulita.

615
00:30:11,440 --> 00:30:14,240
E poi, ho intenzione di fare la stessa cosa
come, oh, questo JS qui che dice

616
00:30:14,240 --> 00:30:14,866
per modificare questo.

617
00:30:14,866 --> 00:30:17,460
E ho intenzione di continuare a farlo.

618
00:30:17,460 --> 00:30:20,930
>> MIKE RIZZO: Quindi una cosa davvero cool
che si può fare con jQuery è

619
00:30:20,930 --> 00:30:24,350
effettivamente aggiungere diversi tipi
di animazioni alla tua pagina.

620
00:30:24,350 --> 00:30:27,440
Non so se avete mai visto dove
si sta cercando di un riempimento di un modulo

621
00:30:27,440 --> 00:30:31,250
on-line e non si compila
le cose correttamente.

622
00:30:31,250 --> 00:30:33,440
Così una piccola cosa scivola giù
in alto e si dice

623
00:30:33,440 --> 00:30:34,820
non hanno fatto correttamente.

624
00:30:34,820 --> 00:30:36,260
Riprova.

625
00:30:36,260 --> 00:30:37,890
E poi, potrebbe anche solo scorrere verso l'alto.

626
00:30:37,890 --> 00:30:40,710
>> Risulta jQuery ha costruito in funzioni
che rendono tutto questo

627
00:30:40,710 --> 00:30:44,180
animazione davvero, davvero facile.

628
00:30:44,180 --> 00:30:46,750
Quindi non vi è in primo luogo la dissolvenza
fuori funzione, che

629
00:30:46,750 --> 00:30:47,710
è possibile chiamare su qualcosa.

630
00:30:47,710 --> 00:30:55,650
Ed è un modo per cambiare il CSS di
tale elemento in modo animato.

631
00:30:55,650 --> 00:30:58,480
Quindi ci vuole qualsivoglia elemento
si chiama fade out su.

632
00:30:58,480 --> 00:31:03,990
E poi, lentamente, lo cambia di opacità
finché non diventa completamente trasparente.

633
00:31:03,990 --> 00:31:07,330
>> TOMAS REIMERS: L'altro popolare
è scivolare verso il basso, che renderà

634
00:31:07,330 --> 00:31:08,800
qualcosa sembra facendolo scivolare verso il basso.

635
00:31:08,800 --> 00:31:12,840
Quindi, nel caso del menu a discesa,
ancora una volta, quando abbiamo appreso come rilevare

636
00:31:12,840 --> 00:31:15,310
quando questo è stato aleggiava sopra,
si può solo dire questo fondo

637
00:31:15,310 --> 00:31:16,910
parte scivolare giù adesso.

638
00:31:16,910 --> 00:31:19,270
E poi, sembrerebbe
facendo scorrere verso il basso.

639
00:31:19,270 --> 00:31:22,042

640
00:31:22,042 --> 00:31:26,590
>> MIKE RIZZO: E poi, se avete appena
qualche tipo di animazione in mente che

641
00:31:26,590 --> 00:31:29,080
jQuery non fornisce necessariamente.

642
00:31:29,080 --> 00:31:32,690
Per esempio, diciamo jQuery
non si fornisce con una diapositiva

643
00:31:32,690 --> 00:31:33,750
giù e scivolo alto.

644
00:31:33,750 --> 00:31:36,740
Beh, diciamo che si voleva far scorrere
qualcosa sulla sinistra o dalla

645
00:31:36,740 --> 00:31:39,880
il giusto tipo di come il CS50
Pagina principale fa ogni volta

646
00:31:39,880 --> 00:31:42,080
si va a un nuovo pannello.

647
00:31:42,080 --> 00:31:45,030
Si potrebbe allora probabilmente dovuto
attuare da soli usando l'

648
00:31:45,030 --> 00:31:49,310
animare funzione all'interno di jQuery.

649
00:31:49,310 --> 00:31:51,350
>> Così allo stesso modo, basta animare.

650
00:31:51,350 --> 00:31:55,850
E poi, al suo interno ci vuole un
Dizionario dei diversi valori

651
00:31:55,850 --> 00:31:57,340
che si suppone di passare.

652
00:31:57,340 --> 00:32:06,960
Così qui, se volessimo animare la
elemento foo tale che la sua larghezza sia

653
00:32:06,960 --> 00:32:10,880
si espande o contrae a 80 pixel,
seconda di ciò che è attualmente.

654
00:32:10,880 --> 00:32:14,100
Vorremmo basta passare che, come
l'argomento all'interno di esso.

655
00:32:14,100 --> 00:32:18,060
>> Animare anche alcuni altri argomenti
che si poteva passare, per esempio,

656
00:32:18,060 --> 00:32:21,150
la velocità dell'animazione
che si vuole dare.

657
00:32:21,150 --> 00:32:26,220
E per farlo, vorrei solo dire
rapidamente Google jQuery animare.

658
00:32:26,220 --> 00:32:31,710
E poi, portando questa pagina, è possibile
vedere che ha un mucchio di diverso

659
00:32:31,710 --> 00:32:33,560
proprietà che si può passare.

660
00:32:33,560 --> 00:32:35,990
>> E io incoraggio - ogni volta che si arriva
in qualcosa che non si fa

661
00:32:35,990 --> 00:32:40,390
conoscere o semplicemente vuoi saperne di più su un
particolare metodo che si può chiamare

662
00:32:40,390 --> 00:32:41,270
su qualcosa -

663
00:32:41,270 --> 00:32:44,440
solo Google esso. jQuery è estremamente
ben documentata.

664
00:32:44,440 --> 00:32:49,140
E spesso ci sono molti
esempi che essi forniscono per voi.

665
00:32:49,140 --> 00:32:52,470
Se scorriamo -

666
00:32:52,470 --> 00:32:53,720
fino in fondo -

667
00:32:53,720 --> 00:32:57,660

668
00:32:57,660 --> 00:32:59,190
che possiamo usare, come bene.

669
00:32:59,190 --> 00:33:02,480
>> Ancora una volta, quando uno sviluppatore in realtà va
attraverso la briga di scrivere un

670
00:33:02,480 --> 00:33:05,810
biblioteca, che in genere vogliono
qualcuno di usarlo.

671
00:33:05,810 --> 00:33:09,400
Così accanto sta per
essere una documentazione.

672
00:33:09,400 --> 00:33:12,270
E che la documentazione di solito può essere
trovato nella pagina del progetto, che è

673
00:33:12,270 --> 00:33:14,970
il motivo per cui abbiamo dato che il sito originale in
l'inizio, che si collega al

674
00:33:14,970 --> 00:33:18,080
pagine di progetto in modo da poter
vedere che la documentazione.

675
00:33:18,080 --> 00:33:22,670
>> In genere, la pagina del progetto, nel caso
di [incomprensibile], ma il detto

676
00:33:22,670 --> 00:33:23,940
nomi delle classi.

677
00:33:23,940 --> 00:33:27,250
Nel caso di JavaScript, dà
il nome delle funzioni.

678
00:33:27,250 --> 00:33:35,310
A proposito, se scorriamo fino alla cima,
una nota di lato breve sulle funzioni è

679
00:33:35,310 --> 00:33:39,080
ogni volta che vedete una funzione implementata
in questo modo con il disco

680
00:33:39,080 --> 00:33:43,800
parentesi nel mezzo, che mezzi
che tale proprietà è facoltativa.

681
00:33:43,800 --> 00:33:44,750
Solo un testa a testa.

682
00:33:44,750 --> 00:33:47,350
Ho visto un sacco di domande
a tale proposito.

683
00:33:47,350 --> 00:33:50,370
>> Così qui possiamo vedere che l'
animato prende immobili

684
00:33:50,370 --> 00:33:51,800
come argomento necessario.

685
00:33:51,800 --> 00:33:54,870
E tutto il resto è opzionale.

686
00:33:54,870 --> 00:33:56,136
Nota a margine -

687
00:33:56,136 --> 00:33:58,090
si può pensare a questo, specie
di, come le pagine man.

688
00:33:58,090 --> 00:34:04,275
Le pagine man sono la documentazione per C e
per un sacco di altre cose, pure.

689
00:34:04,275 --> 00:34:11,020
>> MIKE RIZZO: per questo abbiamo imparato a
cambiare diversi CSS della pagina,

690
00:34:11,020 --> 00:34:14,040
animarlo, aggiungere e rimuovere HTML.

691
00:34:14,040 --> 00:34:16,889
Ma uno dei molto più potente
cose su JavaScript

692
00:34:16,889 --> 00:34:18,270
e soprattutto jQuery -

693
00:34:18,270 --> 00:34:22,570
ciò che permette di fare è rispondere alle
diversi elementi che accadono.

694
00:34:22,570 --> 00:34:25,380
Ad esempio, qui abbiamo
un gestore di eventi.

695
00:34:25,380 --> 00:34:28,210
E questo significa solo ogni volta che questo
evento si verifica, gestiamo in un

696
00:34:28,210 --> 00:34:29,280
certo modo.

697
00:34:29,280 --> 00:34:35,159
>> Quindi, ecco, l'evento generico jQuery
gestore è il punto su.

698
00:34:35,159 --> 00:34:42,949
E poi, la prima cosa disponibile
è ciò evento che dovrebbe

699
00:34:42,949 --> 00:34:43,810
essere in ascolto per.

700
00:34:43,810 --> 00:34:45,610
Quindi, ecco, è il click che
stiamo aspettando.

701
00:34:45,610 --> 00:34:49,250
>> TOMAS REIMERS: In alternativa, avete
al passaggio del mouse, che è molto popolare.

702
00:34:49,250 --> 00:34:52,000
Ma torniamo alla mia discesa idea menu.

703
00:34:52,000 --> 00:34:54,239
Avreste quella superiore al passaggio del mouse.

704
00:34:54,239 --> 00:34:56,096
E allora si potrebbe cambiare la situazione.

705
00:34:56,096 --> 00:34:56,830
>> MIKE RIZZO: Giusto.

706
00:34:56,830 --> 00:35:01,680
E poi, quando ciò accade, semplicemente
esegue questa funzione che gli diamo

707
00:35:01,680 --> 00:35:05,080
come argomento e che
avverte ciao o ciao.

708
00:35:05,080 --> 00:35:08,900
>> TOMAS REIMERS: Quindi, nel caso di
JavaScript, questo è un posto che dobbiamo

709
00:35:08,900 --> 00:35:12,970
uscire da noi C. Possiamo effettivamente
assumere funzioni come argomenti.

710
00:35:12,970 --> 00:35:15,940
E ci sono un sacco di veramente
modi complessi per fare questo.

711
00:35:15,940 --> 00:35:17,940
Stiamo andando a promuovere un modo,
che è possibile definire il

712
00:35:17,940 --> 00:35:19,270
funzionare proprio lì.

713
00:35:19,270 --> 00:35:22,540
>> Così, quando stai chiedendo una funzione come
un parametro, sei fondamentalmente solo

714
00:35:22,540 --> 00:35:24,500
andando a definire la funzione
sul posto.

715
00:35:24,500 --> 00:35:27,090
E il modo in cui si definisce una funzione
in JavaScript è lei

716
00:35:27,090 --> 00:35:28,820
letteralmente dire la funzione.

717
00:35:28,820 --> 00:35:30,130
Poi, di solito, il nome
della funzione.

718
00:35:30,130 --> 00:35:32,510
Ma stiamo andando mai riferimento
questa funzione di nuovo.

719
00:35:32,510 --> 00:35:34,040
Quindi lasciamo senza nome.

720
00:35:34,040 --> 00:35:40,440
>> Poi le parentesi, poi il riccio
bretelle, e poi il codice all'interno.

721
00:35:40,440 --> 00:35:42,540
Così abbiamo capito questo può
essere un po 'di confusione.

722
00:35:42,540 --> 00:35:45,180
Quindi vi diamo la forma generale di
ciò che un gestore di eventi assomiglia

723
00:35:45,180 --> 00:35:47,790
di seguito, che è su eventi.

724
00:35:47,790 --> 00:35:50,598
E poi, il codice all'interno di quella.

725
00:35:50,598 --> 00:35:52,478
>> MIKE RIZZO: Ci sono delle
domande su questo?

726
00:35:52,478 --> 00:35:54,818
Questo può essere un po 'di confusione
la prima volta che si vede.

727
00:35:54,818 --> 00:35:57,550
>> TOMAS REIMERS: si vuole realmente
aprire un file e mostrare loro alcuni

728
00:35:57,550 --> 00:35:58,155
jQuery adesso?

729
00:35:58,155 --> 00:35:59,853
>> MIKE RIZZO: Sì, facciamolo.

730
00:35:59,853 --> 00:36:00,256
OK.

731
00:36:00,256 --> 00:36:02,490
>> TOMAS REIMERS: Così ora siamo
nell'apparecchio.

732
00:36:02,490 --> 00:36:07,730
E quello che abbiamo fatto è che abbiamo preso l'
libertà di creare sia un index.html

733
00:36:07,730 --> 00:36:10,100
file, che collega a
un file JavaScript.

734
00:36:10,100 --> 00:36:12,880
E possiamo aprire il -

735
00:36:12,880 --> 00:36:15,170
sì.

736
00:36:15,170 --> 00:36:16,630
Beh, fa due cose.

737
00:36:16,630 --> 00:36:18,350
>> Il primo è che si collega a
il file JavaScript.

738
00:36:18,350 --> 00:36:21,250
E vedremo che fino qui.

739
00:36:21,250 --> 00:36:25,340
Vediamo che nella testa del
Documento HTML, particolarmente.

740
00:36:25,340 --> 00:36:28,260
Così vedrete lì che
noi, in fondo, diciamo SRC,

741
00:36:28,260 --> 00:36:29,590
che sta per fonte.

742
00:36:29,590 --> 00:36:30,630
E questo è l'URL.

743
00:36:30,630 --> 00:36:32,700
>> Così qui si può dire che abbiamo
incluso jQuery.

744
00:36:32,700 --> 00:36:34,290
E abbiamo incluso anche script.

745
00:36:34,290 --> 00:36:40,630
L'altro modo per includere JavaScript è
che è possibile includere uno script inline

746
00:36:40,630 --> 00:36:44,600
tag come abbiamo in fondo dove
dice che tipo di script è il testo JavaScript.

747
00:36:44,600 --> 00:36:46,960
>> Quindi stiamo dicendo, ascolta, siamo
per includere uno script.

748
00:36:46,960 --> 00:36:51,890
E il tipo di tale script è
JavaScript, che è un tipo di testo.

749
00:36:51,890 --> 00:36:52,550
Molto semplice.

750
00:36:52,550 --> 00:36:56,490
>> MIKE RIZZO: Quindi questo tipo di, arriva a
la tua domanda su come includiamo

751
00:36:56,490 --> 00:37:02,340
JavaScript nostri archivi, perché quando abbiamo
aveva PHP, possiamo fare qualcosa di simile.

752
00:37:02,340 --> 00:37:07,570
E poi, le nostre funzioni PHP -
diciamo scorte fanno

753
00:37:07,570 --> 00:37:09,150
qualcosa che -

754
00:37:09,150 --> 00:37:10,490
va in là.

755
00:37:10,490 --> 00:37:13,860
Tuttavia, ora abbiamo i tag di script
che gli diamo, che in realtà sono

756
00:37:13,860 --> 00:37:19,470
parte del codice HTML in sé, perché non è
fingendo di essere un file HTML simile

757
00:37:19,470 --> 00:37:25,070
è in PHP, perché se andate in
e guardare il sorgente della pagina,

758
00:37:25,070 --> 00:37:28,430
vedrete questi tag script in là
con il codice JavaScript associato a

759
00:37:28,430 --> 00:37:29,800
li fatto che.

760
00:37:29,800 --> 00:37:31,760
>> Allora, se volessimo
scrivere qualche JavaScript -

761
00:37:31,760 --> 00:37:37,110
diciamo solo che abbiamo deciso di cambiare corpo
perché in questo momento non ho

762
00:37:37,110 --> 00:37:40,020
altri tag che posso davvero
modificare oltre il corpo.

763
00:37:40,020 --> 00:37:42,450
Diciamo che ho voluto
modificare il CSS di questo.

764
00:37:42,450 --> 00:37:46,190
Quindi andiamo avanti e il cambiamento
il colore di esso al rosso.

765
00:37:46,190 --> 00:37:47,380
>> Così risparmio il file.

766
00:37:47,380 --> 00:37:52,700
Torniamo alla nostra pagina web, aggiornamento,
e lo fa automaticamente

767
00:37:52,700 --> 00:37:55,920
perché non mi sembrava si aspettava
a tutti perché noi non stavamo ascoltando

768
00:37:55,920 --> 00:37:59,450
per un evento o qualcosa di simile.

769
00:37:59,450 --> 00:38:02,800
>> TOMAS REIMERS: Quindi, se andiamo indietro a quel
file in particolare - l'HTML

770
00:38:02,800 --> 00:38:04,710
FILE - quello che stai andando
per vedere è che abbiamo -

771
00:38:04,710 --> 00:38:06,810
ricordate che questa è caricato,
una sorta di, in ordine cronologico.

772
00:38:06,810 --> 00:38:09,910
Così abbiamo prima la testa.
carica questi due file.

773
00:38:09,910 --> 00:38:10,800
Poi andiamo al corpo.

774
00:38:10,800 --> 00:38:11,640
E vediamo ciao mondo.

775
00:38:11,640 --> 00:38:13,030
Così rendiamo mondo ciao.

776
00:38:13,030 --> 00:38:15,240
>> E poi l'ultima cosa che abbiamo
è che abbiamo il tag script.

777
00:38:15,240 --> 00:38:20,880
Così si corre il tag script perché è
non dicendogli di aspettare per niente.

778
00:38:20,880 --> 00:38:24,700
E questo è il più fondamentale
modo per eseguire JavaScript.

779
00:38:24,700 --> 00:38:29,200
>> Detto questo, si può mettere lo script
tag nell'intestazione appena

780
00:38:29,200 --> 00:38:31,240
per dimostrare questo punto?

781
00:38:31,240 --> 00:38:34,450

782
00:38:34,450 --> 00:38:35,700
E eseguire tale.

783
00:38:35,700 --> 00:38:38,880

784
00:38:38,880 --> 00:38:41,070
Stiamo andando a notare che
non cambiare il colore.

785
00:38:41,070 --> 00:38:44,210
E questo è uno dei problemi di
JavaScript è che le cose sono caricati

786
00:38:44,210 --> 00:38:45,930
in ordine cronologico.

787
00:38:45,930 --> 00:38:49,750
>> Quindi nel momento in cui detto codice
correva, abbiamo selezionato -

788
00:38:49,750 --> 00:38:52,530
tornare indietro -

789
00:38:52,530 --> 00:38:53,670
il tag body.

790
00:38:53,670 --> 00:38:57,560
Il tag body non esiste ancora perché
JavaScript è in linea con HTML.

791
00:38:57,560 --> 00:39:01,790
Così il browser è come selezionare il corpo.

792
00:39:01,790 --> 00:39:02,760
Non c'è ancora una cosa.

793
00:39:02,760 --> 00:39:03,600
Così possiamo ignorarlo.

794
00:39:03,600 --> 00:39:05,330
E noi continuiamo.

795
00:39:05,330 --> 00:39:07,200
>> E poi definiamo un tag body.

796
00:39:07,200 --> 00:39:09,670
Ma che non viene mai aggiornato.

797
00:39:09,670 --> 00:39:12,560
Così, quando si sta implementando copione
etichette, assicuratevi di posizionare

798
00:39:12,560 --> 00:39:15,502
dopo il tag body.

799
00:39:15,502 --> 00:39:16,820
Diapositiva successiva.

800
00:39:16,820 --> 00:39:17,830
>> MIKE RIZZO: OK.

801
00:39:17,830 --> 00:39:19,330
Così abbiamo cambiato qualcosa.

802
00:39:19,330 --> 00:39:21,910
Ma non sembrava ha risposto alla
noi a tutti perché solo tipo di

803
00:39:21,910 --> 00:39:24,150
ha fatto appena caricata la pagina.

804
00:39:24,150 --> 00:39:27,700
Così ora, invece di fare questo, perché
Non aggiungiamo un gestore di eventi.

805
00:39:27,700 --> 00:39:31,020
>> Quindi cerchiamo di fare qualcosa
al corpo di nuovo.

806
00:39:31,020 --> 00:39:33,490
E diciamo lo facciamo su -

807
00:39:33,490 --> 00:39:34,500
fare clic su.

808
00:39:34,500 --> 00:39:35,750
Aggiungeremo una funzione.

809
00:39:35,750 --> 00:39:38,270

810
00:39:38,270 --> 00:39:39,690
>> Cambiamento di Let: TOMAS REIMERS
il suo colore rosso di nuovo.

811
00:39:39,690 --> 00:39:40,000
Perché no?

812
00:39:40,000 --> 00:39:41,680
>> MIKE RIZZO: Sì, andiamo cambiamento
il suo 'colore rosso di nuovo.

813
00:39:41,680 --> 00:39:46,310

814
00:39:46,310 --> 00:39:46,900
Bene.

815
00:39:46,900 --> 00:39:48,480
Quindi cerchiamo di ricaricare la pagina.

816
00:39:48,480 --> 00:39:49,530
OK, vediamo -

817
00:39:49,530 --> 00:39:52,290
come previsto, ancora non diventa rosso.

818
00:39:52,290 --> 00:39:53,610
Ma allora possiamo andare avanti e fare clic su di esso.

819
00:39:53,610 --> 00:39:54,270
>> TOMAS REIMERS: e lo fa diventare rosso.

820
00:39:54,270 --> 00:39:56,090
>> MIKE RIZZO: E lo fa
diventa rosso come previsto.

821
00:39:56,090 --> 00:39:59,010
>> TOMAS REIMERS: E possiamo vedere come
possiamo cominciare a costruire molto di base

822
00:39:59,010 --> 00:40:00,170
interazione.

823
00:40:00,170 --> 00:40:03,850
Altre cose che potremmo voler fare è,
se non vogliamo fare il corpo

824
00:40:03,850 --> 00:40:07,230
colore rosso, facciamo il codice HTML
sfondo di colore rosso.

825
00:40:07,230 --> 00:40:08,480
Solo così è lo stesso CSS.

826
00:40:08,480 --> 00:40:19,960

827
00:40:19,960 --> 00:40:23,320
>> E quando cambiamo, possiamo vedere questo
effetto molto drammatico di cambiare il

828
00:40:23,320 --> 00:40:25,510
intera pagina.

829
00:40:25,510 --> 00:40:29,100
Quindi, di nuovo, se si sta implementando le cose,
si può avere un componente

830
00:40:29,100 --> 00:40:30,150
che è destinato a essere cliccato.

831
00:40:30,150 --> 00:40:32,710
Diciamo che un pulsante Esci e
un'intera altro componente,

832
00:40:32,710 --> 00:40:33,830
che si propone di rispondere.

833
00:40:33,830 --> 00:40:35,755
Così si sarebbe rimuovere una finestra
quando ciò accade.

834
00:40:35,755 --> 00:40:39,341

835
00:40:39,341 --> 00:40:40,700
>> MIKE RIZZO: OK.

836
00:40:40,700 --> 00:40:42,200
A titolo di esempio -

837
00:40:42,200 --> 00:40:44,400
non hai a vedere questo prima -

838
00:40:44,400 --> 00:40:47,500
Mi limiterò a mostrarvi quello che sembra
come quando ci nascondiamo qualcosa.

839
00:40:47,500 --> 00:40:52,220
Quindi vado avanti e faccio scorrere verso l'alto.

840
00:40:52,220 --> 00:40:54,440
>> TOMAS REIMERS: Volete avvolgere che in un
Tipo paragrafo prima che lo facciamo?

841
00:40:54,440 --> 00:40:55,132
>> MIKE RIZZO: OK.

842
00:40:55,132 --> 00:40:59,135
Gia ', perche' non lo facciamo così
possiamo selezionare un po 'di più.

843
00:40:59,135 --> 00:41:00,490
>> TOMAS Reimers: e andiamo
dargli una lezione.

844
00:41:00,490 --> 00:41:01,740
>> MIKE RIZZO: Già.

845
00:41:01,740 --> 00:41:06,575

846
00:41:06,575 --> 00:41:09,920
OK, vediamo.

847
00:41:09,920 --> 00:41:14,820
Invece di selezionare il corpo reale
ora, mi limiterò a selezionare tutto con

848
00:41:14,820 --> 00:41:18,780
classe ciao, che qui si
solo hanno una cosa.

849
00:41:18,780 --> 00:41:20,900
Quindi non dovremmo
preoccupare di questo.

850
00:41:20,900 --> 00:41:23,080
>> Così sarò aggiornarlo.

851
00:41:23,080 --> 00:41:24,230
Vado avanti e fare clic su di esso.

852
00:41:24,230 --> 00:41:27,890
E, una sorta di, ha fatto una diapositiva strano
up cosa, che non sembrava che

853
00:41:27,890 --> 00:41:29,580
attraente.

854
00:41:29,580 --> 00:41:31,060
In generale, essi sembrano abbastanza piacevole.

855
00:41:31,060 --> 00:41:32,720
Credo che questo - per alcuni
ragione - non lo fece.

856
00:41:32,720 --> 00:41:36,640
Mi limiterò a fare un fade out così
si può guardare anche questo.

857
00:41:36,640 --> 00:41:38,100
Molto più bello.

858
00:41:38,100 --> 00:41:41,150
>> E poi, se apro il JavaScript
consoliamo di nuovo e vogliamo vedere che cosa

859
00:41:41,150 --> 00:41:43,900
sembra che quando ci svanire dentro

860
00:41:43,900 --> 00:41:46,920
Ora, mi basta chiamare dissolvenza su di esso.

861
00:41:46,920 --> 00:41:48,830
E sfuma interattiva

862
00:41:48,830 --> 00:41:56,150
>> Allo stesso modo, potremmo realmente passare anche
un argomento di fade in o fade out,

863
00:41:56,150 --> 00:41:57,640
che è, tipo, la velocità di esso.

864
00:41:57,640 --> 00:42:02,220
Quindi cerchiamo di andare avanti e dire che vogliamo
per andare lentamente dissolvenza dentro

865
00:42:02,220 --> 00:42:04,250
Quindi credo che sembrava ancora
piuttosto veloce.

866
00:42:04,250 --> 00:42:06,180
Ma era più lento di prima.

867
00:42:06,180 --> 00:42:10,340
>> TOMAS REIMERS: E se si vuole trovare
di più su queste cose, ancora una volta,

868
00:42:10,340 --> 00:42:13,410
basta andare alla documentazione jQuery,
che vi abbiamo dato, e leggere

869
00:42:13,410 --> 00:42:13,735
attraverso questi.

870
00:42:13,735 --> 00:42:15,790
Essi documentano le loro funzioni
incredibilmente bene.

871
00:42:15,790 --> 00:42:18,622

872
00:42:18,622 --> 00:42:19,570
>> MIKE RIZZO: OK.

873
00:42:19,570 --> 00:42:21,560
Quindi credo che torniamo al presente.

874
00:42:21,560 --> 00:42:23,490
E possiamo parlare della nostra ultima pagina.

875
00:42:23,490 --> 00:42:24,690
Beh, possiamo finire con Bootstrap.

876
00:42:24,690 --> 00:42:27,140
E poi ci aprirlo
per alcune domande.

877
00:42:27,140 --> 00:42:30,180
E se voi ragazzi avete qualche idea che
vuoi provare a vomitare e vedere

878
00:42:30,180 --> 00:42:34,150
se possiamo mettere in atto con
JavaScript rapidamente.

879
00:42:34,150 --> 00:42:37,890
>> Quindi, molto velocemente su Bootstrap, che
è stato incluso automaticamente nella

880
00:42:37,890 --> 00:42:41,700
il vostro ultimo problema posto nella cartella CSS
ed effettivamente collegato al vostro

881
00:42:41,700 --> 00:42:43,190
header.php.

882
00:42:43,190 --> 00:42:46,740
Così si potrebbe aver aggiunto le classi che
sono definiti all'interno di Bootstrap ad esso.

883
00:42:46,740 --> 00:42:50,490
E sarebbe designato automaticamente
quelle cose di conseguenza.

884
00:42:50,490 --> 00:42:54,550
>> TOMAS REIMERS: Quindi Bootstrap è molto
cosa magica sviluppato dal popolo

885
00:42:54,550 --> 00:42:55,340
a Twitter.

886
00:42:55,340 --> 00:42:57,230
E quello che doveva fare era -

887
00:42:57,230 --> 00:43:00,740
prima di siti web sono stati davvero difficile fare
aspetto gradevole, soprattutto quando avevamo

888
00:43:00,740 --> 00:43:02,200
molti componenti comuni.

889
00:43:02,200 --> 00:43:04,770
Così un sacco di pulsanti sul
web sembrava la stessa.

890
00:43:04,770 --> 00:43:08,960
>> Un sacco di campi di testo può essere fatto per
un aspetto migliore rispetto al testo standard

891
00:43:08,960 --> 00:43:13,620
campo probabilmente sapete da molto
siti web vecchi o fatto davvero male

892
00:43:13,620 --> 00:43:18,210
siti web, che proprio sembrano letterale
caselle di testo, senza alcuna forma di testo

893
00:43:18,210 --> 00:43:21,190
ombra o qualsiasi tipo di piacevole contorno.

894
00:43:21,190 --> 00:43:24,540
Allora, cosa ha fatto Bootstrap era detto, bene,
abbiamo un sacco di stili comuni.

895
00:43:24,540 --> 00:43:28,210
Perché non facciamo un insieme comune di CSS
e un insieme comune di JavaScript come

896
00:43:28,210 --> 00:43:32,210
bene, che può stile così com'è e che
può dare alla gente le cose come goccia

897
00:43:32,210 --> 00:43:34,610
tendina, che può dare alla gente
cose come modali.

898
00:43:34,610 --> 00:43:38,580
>> Modal è quello che si apre sopra la pagina
ogni volta che viene in senso stretto

899
00:43:38,580 --> 00:43:41,090
qualcosa, che inibisce l'ulteriore
interazione fino a

900
00:43:41,090 --> 00:43:43,110
interagire con esso.

901
00:43:43,110 --> 00:43:45,820
Qualcosa del genere è, sei sicuro
Vuoi eliminare questa cosa?

902
00:43:45,820 --> 00:43:49,100
Non si può davvero fare altro
fino a quando si dice sì o no.

903
00:43:49,100 --> 00:43:52,720
>> Ha preso tutto questo e confezionato esso
insieme e detto, qui andiamo.

904
00:43:52,720 --> 00:43:54,630
Le persone possono ora utilizzare questo.

905
00:43:54,630 --> 00:43:56,830
E lo si può trovare su
a getbootstrap.com.

906
00:43:56,830 --> 00:44:00,480
Si è automaticamente incluso in
il vostro ultimo problema impostato.

907
00:44:00,480 --> 00:44:04,160
E tu sei più che benvenuti a
utilizzare sul vostro progetto finale.

908
00:44:04,160 --> 00:44:06,950
E se volete seguire che
link per ottenere Bootstrap.

909
00:44:06,950 --> 00:44:10,590

910
00:44:10,590 --> 00:44:15,700
>> Vedrete qui è il
Bootstrap sito CSS.

911
00:44:15,700 --> 00:44:16,860
Vedrai Bootstrap.

912
00:44:16,860 --> 00:44:20,450
E se si scorre verso il basso, vedrai
come scaricarlo, come

913
00:44:20,450 --> 00:44:21,900
installarlo, eccetera.

914
00:44:21,900 --> 00:44:24,700
>> MIKE RIZZO: E si può anche,
abbastanza interessante, personalizzarlo per

915
00:44:24,700 --> 00:44:27,770
essere qualunque tipo di temi
che si desidera.

916
00:44:27,770 --> 00:44:31,270
So che è una cosa che ho fatto per il mio
progetto finale quando ho preso la classe

917
00:44:31,270 --> 00:44:32,050
è stato personalizzarlo.

918
00:44:32,050 --> 00:44:34,540
Una versione diversa di Bootstrap che
aveva uno schema di colore diverso e

919
00:44:34,540 --> 00:44:36,700
diverse forme di alcuni
cose diverse.

920
00:44:36,700 --> 00:44:38,250
Quindi vi incoraggio a giocare con quella.

921
00:44:38,250 --> 00:44:39,440
È una specie di divertente da fare.

922
00:44:39,440 --> 00:44:43,230
>> TOMAS REIMERS: Guardando in alto
ancora una volta, è molto simile al carattere

923
00:44:43,230 --> 00:44:44,970
Impressionante sito.

924
00:44:44,970 --> 00:44:47,810
Un sacco di documentazione avrà inizio
per sembrare simile quando hai

925
00:44:47,810 --> 00:44:48,940
visto abbastanza.

926
00:44:48,940 --> 00:44:51,260
Quindi qui abbiamo il CSS
componente di questo.

927
00:44:51,260 --> 00:44:53,540
E vedrete come
può stile cose.

928
00:44:53,540 --> 00:44:56,780
Quindi, se si fa clic su tavoli, per esempio,
si può immediatamente fare un

929
00:44:56,780 --> 00:45:01,710
Tavolo abbastanza semplicemente aggiungendo
la tabella classe ad esso.

930
00:45:01,710 --> 00:45:03,150
>> Stesse cose per i pulsanti.

931
00:45:03,150 --> 00:45:12,140
Se è sufficiente aggiungere il BTN classe e BTN
inadempiente o BTN primaria, è possibile

932
00:45:12,140 --> 00:45:16,240
ottenere uno qualsiasi di questi pulsanti
con questi stili pre-made.

933
00:45:16,240 --> 00:45:18,570
E poi, se siete alla ricerca di
qualcosa di più complesso di una semplice

934
00:45:18,570 --> 00:45:24,100
restyling ciò che w hanno già, oltre a
la scheda JavaScript attraverso la parte superiore che

935
00:45:24,100 --> 00:45:25,120
avere un gruppo di componenti.

936
00:45:25,120 --> 00:45:30,410
>> Quindi qui abbiamo transizioni, modali,
dropdown, schede, e suggerimenti.

937
00:45:30,410 --> 00:45:35,530
Un suggerimento è quello che si apre sotto il tuo
mouse quando si passa su qualcosa.

938
00:45:35,530 --> 00:45:40,280
Popovers, avvisi, pulsanti, pieghevole
fisarmoniche è ciò che

939
00:45:40,280 --> 00:45:41,190
sono di solito chiamati.

940
00:45:41,190 --> 00:45:43,045
Caroselli, che di vibrazione
attraverso immagini come.

941
00:45:43,045 --> 00:45:52,190

942
00:45:52,190 --> 00:45:54,840
>> Quindi questi sono i componenti
di Bootstrap.

943
00:45:54,840 --> 00:45:57,620
Vi incoraggio a
molto andare a vedere loro.

944
00:45:57,620 --> 00:46:01,780
C'è una componente di JavaScript
e un componente CSS.

945
00:46:01,780 --> 00:46:03,880
Sentitevi liberi di usarli come volete.

946
00:46:03,880 --> 00:46:06,730
Non abbiamo intenzione di andare troppo in loro
perché riteniamo la documentazione

947
00:46:06,730 --> 00:46:09,360
è davvero ben fatto.

948
00:46:09,360 --> 00:46:10,540
E sì.

949
00:46:10,540 --> 00:46:14,500
Avete domande su questo?

950
00:46:14,500 --> 00:46:19,430
>> MIKE RIZZO: Così come sono molto veloce
lato, il design di questa pagina web che

951
00:46:19,430 --> 00:46:21,830
abbiamo rapidamente messo insieme per
questa presentazione è

952
00:46:21,830 --> 00:46:24,290
effettivamente fatto uso Bootstrap.

953
00:46:24,290 --> 00:46:27,810
Come si può vedere, quando si clicca su questi
schede diverse, siamo in realtà mai

954
00:46:27,810 --> 00:46:30,750
lasciando questa pagina index.html corrente.

955
00:46:30,750 --> 00:46:36,400
Quindi quello che abbiamo è diversi div
all'interno di questo index.html.

956
00:46:36,400 --> 00:46:39,610
E poi, ogni volta che si clicca un diverso
scheda, è solo cambiando

957
00:46:39,610 --> 00:46:41,590
che di una mostra.

958
00:46:41,590 --> 00:46:47,390
>> Così li posiziona di conseguenza,
cambia il codice HTML della pagina in modo che

959
00:46:47,390 --> 00:46:52,330
la scheda corrente è contrassegnata come attiva, in modo
appare diverso e sguardi

960
00:46:52,330 --> 00:46:52,820
veramente bello.

961
00:46:52,820 --> 00:46:57,260
>> TOMAS REIMERS: So che è stato tutto fatto
senza di noi di scrivere quasi tutti i CSS.

962
00:46:57,260 --> 00:47:01,440
Vediamo anche un colpo di testa in alto,
che i colori sono da noi.

963
00:47:01,440 --> 00:47:04,800
Ma l'attuale mettere sul
superiore della pagina e facendo

964
00:47:04,800 --> 00:47:06,660
che scroll era Bootstrap.

965
00:47:06,660 --> 00:47:09,720
E poi anche per un'altra libreria - questo
non è uno abbiamo parlato ma uno

966
00:47:09,720 --> 00:47:11,580
Potete google se vuoi.

967
00:47:11,580 --> 00:47:15,130
Questo si chiama prettify.js.

968
00:47:15,130 --> 00:47:20,650
E sarà evidenziazione della sintassi il codice
per voi utilizzando sia i CSS e JavaScript.

969
00:47:20,650 --> 00:47:23,480

970
00:47:23,480 --> 00:47:27,070
>> L'ultima cosa che vogliamo parlare
prima di rilasciare fuori nel

971
00:47:27,070 --> 00:47:30,620
mondo a guardare le biblioteche per capire
come usarli e, si spera,

972
00:47:30,620 --> 00:47:34,640
leggere la documentazione e trovare ciò che
necessità è come trovare le librerie.

973
00:47:34,640 --> 00:47:37,000
Quindi, la prima è che siamo solo
andando a spingere Google.

974
00:47:37,000 --> 00:47:37,810
Go Google.

975
00:47:37,810 --> 00:47:41,150
>> Questo è letteralmente ciò che facciamo quando
bisogno di fare qualcosa che è Google.

976
00:47:41,150 --> 00:47:44,730
C'è una libreria JavaScript che
mi permette di manipolare il tempo in un

977
00:47:44,730 --> 00:47:45,400
modo utile?

978
00:47:45,400 --> 00:47:49,510
Quindi, se so che qualche utente di creare
un account qui, e questo è il

979
00:47:49,510 --> 00:47:53,010
ora corrente, come posso calcolare il
differenza con che senza dover

980
00:47:53,010 --> 00:47:55,020
calcolare da solo?

981
00:47:55,020 --> 00:47:59,630
Quindi, questo è in realtà una cosa comune,
JavaScript library tempo.

982
00:47:59,630 --> 00:48:02,440
E qui noi Moment.js--
il più popolare.

983
00:48:02,440 --> 00:48:06,530
>> Se abbiamo bisogno di una libreria per manipolare
qualcosa come colore per potere

984
00:48:06,530 --> 00:48:08,650
generare un mucchio di colori casuali -

985
00:48:08,650 --> 00:48:10,660
eventualmente, per generare un
stile o qualcosa -

986
00:48:10,660 --> 00:48:13,480
potremmo su Google qualcosa come
JavaScript library colore.

987
00:48:13,480 --> 00:48:15,620
E sono sicuro che avremmo pop-up con
mille e uno di loro.

988
00:48:15,620 --> 00:48:18,290

989
00:48:18,290 --> 00:48:21,410
Siete invitati a leggere attraverso di loro.

990
00:48:21,410 --> 00:48:24,610
>> Così la maggior parte delle cose - quando li trovate -
stanno andando essere ospitato su uno dei

991
00:48:24,610 --> 00:48:25,920
siti che codice host.

992
00:48:25,920 --> 00:48:26,960
Loro sono sono un paio di quelli popolari.

993
00:48:26,960 --> 00:48:30,870
Il più popolare, da
Finora, è github.com.

994
00:48:30,870 --> 00:48:35,300
E se si va a GitHub è in realtà
dove è stato ospitato Normalize.

995
00:48:35,300 --> 00:48:36,950
Quindi, se volete tornare a quella.

996
00:48:36,950 --> 00:48:38,135
Mostrate loro che.

997
00:48:38,135 --> 00:48:40,516
>> MIKE RIZZO: E questo è in realtà dove
questo è ospitato anche, se avete notato.

998
00:48:40,516 --> 00:48:41,000
>> TOMAS REIMERS: Già.

999
00:48:41,000 --> 00:48:49,078
Quindi, se si va oltre a normalizzare
e andare al GitHub.

1000
00:48:49,078 --> 00:48:51,936
Erano è?

1001
00:48:51,936 --> 00:48:54,620
>> MIKE RIZZO: Quella piccola cosa cat
è il simbolo GitHub.

1002
00:48:54,620 --> 00:48:56,330
>> TOMAS REIMERS: Oh.

1003
00:48:56,330 --> 00:49:02,180
Così GitHub utilizza un metodo chiamato
Git al codice negozio.

1004
00:49:02,180 --> 00:49:05,150
È che non sai di cosa si tratta o
ti spaventa, va bene.

1005
00:49:05,150 --> 00:49:16,100
Non devi sapere che cosa è Git
perché GitHub ha un pulsante di download

1006
00:49:16,100 --> 00:49:17,200
in basso a destra.

1007
00:49:17,200 --> 00:49:21,350
>> L'altra cosa utile da sapere
su GitHub è maggior parte dei prodotti

1008
00:49:21,350 --> 00:49:23,200
avrà un me leggere.

1009
00:49:23,200 --> 00:49:25,400
E se non hanno un sito web, la
read me Parlerò di come si

1010
00:49:25,400 --> 00:49:28,310
installarlo, come si usa, cosa
fa, eccetera, eccetera, eccetera.

1011
00:49:28,310 --> 00:49:31,033
Quello che siamo stati praticamente
camminare attraverso.

1012
00:49:31,033 --> 00:49:32,326
>> MIKE RIZZO: smettere di Internet.

1013
00:49:32,326 --> 00:49:34,020
>> TOMAS REIMERS: Va bene.

1014
00:49:34,020 --> 00:49:36,980
Le ultime due cose che volevamo
a parlare -

1015
00:49:36,980 --> 00:49:38,750
abbiamo parlato di Git -

1016
00:49:38,750 --> 00:49:40,290
è la risoluzione dei problemi.

1017
00:49:40,290 --> 00:49:43,020
E questo non è rilevante per
il prodotto finale è

1018
00:49:43,020 --> 00:49:44,870
quando si esce 50.

1019
00:49:44,870 --> 00:49:48,310
E quando si esegue in prodotti
attuazione di biblioteche o di esecuzione

1020
00:49:48,310 --> 00:49:50,230
il tuo progetto, si sta andando
avere domande o siete

1021
00:49:50,230 --> 00:49:51,660
andare a cercare per le domande.

1022
00:49:51,660 --> 00:49:53,060
>> Ancora una volta, google.

1023
00:49:53,060 --> 00:49:54,630
Questo è letteralmente quello che facciamo.

1024
00:49:54,630 --> 00:49:56,400
Questo sta per sembrare stupido.

1025
00:49:56,400 --> 00:49:58,310
Ma letteralmente, noi google.

1026
00:49:58,310 --> 00:50:01,810
E ancora, una delle prime cose
è solitamente esegue in è

1027
00:50:01,810 --> 00:50:06,550
stackoverflow.com, che è una meravigliosa
domanda e risposta di vista.

1028
00:50:06,550 --> 00:50:10,530
>> E 'meraviglioso, sia perché si può
postare domande e cercare

1029
00:50:10,530 --> 00:50:12,760
risposte ma anche perché
ha già un sacco di

1030
00:50:12,760 --> 00:50:14,590
contenuti pre-popolato lì.

1031
00:50:14,590 --> 00:50:18,510
Così, di solito quando si Google una programmazione
domanda entro il primo

1032
00:50:18,510 --> 00:50:22,620
coppia colpisce si può avere già eseguito
in esso durante i vostri set di problemi.

1033
00:50:22,620 --> 00:50:27,840
>> E poi, l'ultima cosa veramente breve
è JSFIDDLE, che è - oggi abbiamo

1034
00:50:27,840 --> 00:50:32,110
state facendo un sacco di lavoro con
JavaScript HTML CSS.

1035
00:50:32,110 --> 00:50:39,820
JSFIDDLE è una web app, che sostanzialmente
permette di prendere il codice HTML, AVRA '

1036
00:50:39,820 --> 00:50:42,820
JavaScript basso a sinistra, e
a destra in alto CSS.

1037
00:50:42,820 --> 00:50:47,840
E allora può creare un rapido rendering
Di esso e vedere come interagisce.

1038
00:50:47,840 --> 00:50:50,500
E 'molto utile quando le persone stanno cercando
per fare una prova di concetto come

1039
00:50:50,500 --> 00:50:52,910
questo è come si farebbe
fare un menu a discesa.

1040
00:50:52,910 --> 00:50:54,980
Forse un uncover rapido o qualsiasi altra cosa.

1041
00:50:54,980 --> 00:50:56,560
>> MIKE RIZZO: Allora andiamo
avanti e fare clic su questo.

1042
00:50:56,560 --> 00:50:57,820
Una breve nota -

1043
00:50:57,820 --> 00:51:00,430
considerando che, prima eravamo
facendo clic su.

1044
00:51:00,430 --> 00:51:04,380
Risulta JCorey Corea ha anche un built
nel gestore di eventi click che

1045
00:51:04,380 --> 00:51:07,020
usa solo perché figure sei
andando a voler fare un sacco di cose

1046
00:51:07,020 --> 00:51:08,410
quando si vuole scegliere qualcosa.

1047
00:51:08,410 --> 00:51:09,690
>> Allo stesso modo, ha anche un hover.

1048
00:51:09,690 --> 00:51:12,850
Ma per ottenere l'intera gamma di
quelli, guardare il jQuery

1049
00:51:12,850 --> 00:51:15,320
documentazione e farlo.

1050
00:51:15,320 --> 00:51:18,760
Ho fatto qualcosa di stupido qui.

1051
00:51:18,760 --> 00:51:21,490
>> TOMAS REIMERS: Così ho una molto veloce
programma proprio qui, che dice

1052
00:51:21,490 --> 00:51:22,640
pulsante sul click.

1053
00:51:22,640 --> 00:51:23,890
Poi abbiamo un ciclo for.

1054
00:51:23,890 --> 00:51:26,810
Per i è inferiore a 404.

1055
00:51:26,810 --> 00:51:29,530
E 'solo andando a pop up
questi messaggi di avviso.

1056
00:51:29,530 --> 00:51:33,425
>> MIKE RIZZO: E qual è stata la
codice 404 stava per in HTML?

1057
00:51:33,425 --> 00:51:34,145
Qualcuno ricorda?

1058
00:51:34,145 --> 00:51:35,450
Non trovato, giusto.

1059
00:51:35,450 --> 00:51:38,640

1060
00:51:38,640 --> 00:51:40,885
Chrome ha anche aggiunto questa ordinata
cosa dove si può -

1061
00:51:40,885 --> 00:51:43,430
>> TOMAS REIMERS: Perché la gente come
Mike ha iniziato a fare questo molto e

1062
00:51:43,430 --> 00:51:47,230
Gli utenti fastidiosi, che permette
di vedere info.

1063
00:51:47,230 --> 00:51:48,286
>> MIKE RIZZO: Già.

1064
00:51:48,286 --> 00:51:50,690
>> TOMAS REIMERS: Non abbiamo tutte le domande
su questo, su JavaScript

1065
00:51:50,690 --> 00:51:53,420
biblioteche, trovando biblioteche, o
guarda ciò che di sviluppo web

1066
00:51:53,420 --> 00:51:55,400
come nel mondo reale?

1067
00:51:55,400 --> 00:51:56,880
Stiamo correndo contro il tempo.

1068
00:51:56,880 --> 00:52:00,400
Quindi io non sono sicuro che stiamo andando
per avere il tempo di attuare

1069
00:52:00,400 --> 00:52:02,290
meno che non sia davvero veloce.

1070
00:52:02,290 --> 00:52:04,580
Siamo a posto?

1071
00:52:04,580 --> 00:52:08,110
>> MIKE RIZZO: tutto quello che i ragazzi vorrebbero
per vedere realmente veloce in, come, due

1072
00:52:08,110 --> 00:52:09,556
minuti o meno?

1073
00:52:09,556 --> 00:52:10,870
>> TOMAS REIMERS: Anything
possiamo chiarire?

1074
00:52:10,870 --> 00:52:12,500
Come scrivere in -

1075
00:52:12,500 --> 00:52:13,260
>> AUDIENCE: [incomprensibile]?

1076
00:52:13,260 --> 00:52:16,070
>> MIKE RIZZO: Sì, così that -

1077
00:52:16,070 --> 00:52:18,065
>> TOMAS REIMERS: Si può solo colpire
Control-U sul sito.

1078
00:52:18,065 --> 00:52:19,275
>> MIKE RIZZO: Oh, io non so.

1079
00:52:19,275 --> 00:52:22,290
>> TOMAS REIMERS: penso, sì.

1080
00:52:22,290 --> 00:52:23,300
Control-U. Già.

1081
00:52:23,300 --> 00:52:25,970
>> MIKE RIZZO: Oh, così che è l'
il codice per il sito.

1082
00:52:25,970 --> 00:52:29,580
Ma se si vuole realmente a scaricare il nostro
file e tutto, è ospitato

1083
00:52:29,580 --> 00:52:32,650
su github.com

1084
00:52:32,650 --> 00:52:34,850
>> TOMAS REIMERS: tagliare il mio nome -

1085
00:52:34,850 --> 00:52:38,504
Tomas Reimers - barra
Seminario CS50 trattino.

1086
00:52:38,504 --> 00:52:40,710
>> MIKE RIZZO: E si può
trovare tutto quello che c'è.

1087
00:52:40,710 --> 00:52:42,310
>> TOMAS REIMERS: Questo è ciò che GitHub
sembra, tra l'altro.

1088
00:52:42,310 --> 00:52:44,910
Quindi, di nuovo, quando si vede un open source
progetto, in genere, saranno una lettura

1089
00:52:44,910 --> 00:52:45,950
Mi lì che si può leggere.

1090
00:52:45,950 --> 00:52:50,200
E se si va indietro, si noterà che
avete il download zip, che sarà

1091
00:52:50,200 --> 00:52:52,130
permettono di scaricare il sorgente
codice per includere l'

1092
00:52:52,130 --> 00:52:53,666
prodotto nel proprio cosa.

1093
00:52:53,666 --> 00:52:56,890
>> MIKE RIZZO: Sì, e se abbiamo appena clicchiamo
sulle index.html molto rapidamente -

1094
00:52:56,890 --> 00:52:59,180
>> TOMAS REIMERS: Vedrai ecco l'
il codice sorgente per il nostro sito.

1095
00:52:59,180 --> 00:53:02,016

1096
00:53:02,016 --> 00:53:06,070
>> MIKE RIZZO: Inoltre, ho dimenticato di spingere a destra
prima con il grande tavolo che

1097
00:53:06,070 --> 00:53:09,860
incluso, ma c'è anche un tavolo
di chmods che abbiamo incluso

1098
00:53:09,860 --> 00:53:13,210
solo per la vostra chiarezza.

1099
00:53:13,210 --> 00:53:16,940
Ma se scorriamo fino in fondo al
fondo, non abbiamo effettivamente fare molto

1100
00:53:16,940 --> 00:53:21,160
molto con il codice JavaScript
roba a tutti con questo.

1101
00:53:21,160 --> 00:53:26,610
È esclusivamente da tutto
altra cosa che abbiamo avuto.

1102
00:53:26,610 --> 00:53:28,730
>> Quindi grazie ragazzi per venire
e l'ascolto.

1103
00:53:28,730 --> 00:53:29,830
Ci auguriamo che questo è stato davvero utile.

1104
00:53:29,830 --> 00:53:33,020
Se avete qualsiasi JavaScript correlato
domande o vogliono solo parlare

1105
00:53:33,020 --> 00:53:36,240
che altro come quello che altre cose interessanti
si può fare con JavaScript, ci piacerebbe

1106
00:53:36,240 --> 00:53:37,186
parlare con te.

1107
00:53:37,186 --> 00:53:40,010
>> TOMAS REIMERS: Se hai una domanda
sul progetto o se questo può essere

1108
00:53:40,010 --> 00:53:42,740
rilevante, probabilmente ci andremo bastone intorno
un po 'dopo questo.

1109
00:53:42,740 --> 00:53:44,640
Ma a parte questo, hanno
un buon fine settimana.

1110
00:53:44,640 --> 00:53:45,845
>> MIKE RIZZO: Sì, godere.

1111
00:53:45,845 --> 00:53:46,120
Vedere voi ragazzi.

1112
00:53:46,120 --> 00:53:47,370
>> TOMAS REIMERS: See ya.

1113
00:53:47,370 --> 00:53:47,926