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

2
00:00:07,440 --> 00:00:08,180
>> TOMAS Reimers: Hola a tots.

3
00:00:08,180 --> 00:00:09,250
Preses Reimers del meu nom.

4
00:00:09,250 --> 00:00:10,500
>> MIKE RIZZO: I jo sóc Mike Rizzo.

5
00:00:10,500 --> 00:00:12,990
>> TOMAS Reimers: Som dues de TS CS50s.

6
00:00:12,990 --> 00:00:18,910
I avui estem liderant el seminari sobre
JavaScript i CSS per a aplicacions web.

7
00:00:18,910 --> 00:00:22,140
Si vols seguir endavant, la
enllaç està just aquí.

8
00:00:22,140 --> 00:00:25,190
I vostè vol posar cap amunt
breument a l'ordinador?

9
00:00:25,190 --> 00:00:27,460
>> Aquí està l'enllaç.

10
00:00:27,460 --> 00:00:30,390
És un lloc petit, que té vincles amb
tots els recursos que seran

11
00:00:30,390 --> 00:00:36,490
que el porten avui i també té una gran quantitat de
informació útil escrit per nosaltres per

12
00:00:36,490 --> 00:00:39,680
llegir més en profunditat quan torni,
i que està tractant de recordar el que

13
00:00:39,680 --> 00:00:42,166
va ser exactament el que diem, el que eres
parlant, et cetera.

14
00:00:42,166 --> 00:00:43,870
>> MIKE RIZZO: Molt bé.

15
00:00:43,870 --> 00:00:44,890
Així que anem a començar.

16
00:00:44,890 --> 00:00:45,700
>> TOMAS Reimers: Així que vols començar?

17
00:00:45,700 --> 00:00:45,970
D'acord.

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

19
00:00:47,170 --> 00:00:51,730
Així que primer volíem començar amb una àmplia
visió general sobre la Internet i

20
00:00:51,730 --> 00:00:54,240
els tipus d'arxius en el disseny de llocs web.

21
00:00:54,240 --> 00:00:57,550
Si bé aquesta presentació vull
entrar en JavaScript molt més

22
00:00:57,550 --> 00:01:00,320
més tard, volíem començar amb
simplement, una mica, com a vista d'ocell

23
00:01:00,320 --> 00:01:03,270
del que un lloc web és i com
a pensar en el disseny d'un

24
00:01:03,270 --> 00:01:04,800
lloc web per a l'inici.

25
00:01:04,800 --> 00:01:08,370
>> Així que vostès, en aquest moment - amb el
sent divendres a la nit - ha de tenir

26
00:01:08,370 --> 00:01:11,000
presentat les seves finances CS50
butlletins de problemes.

27
00:01:11,000 --> 00:01:15,260
Amb sort, això va ser un bon sabor
del que la programació web pot ser.

28
00:01:15,260 --> 00:01:18,261
Però aquí volem, alguna cosa així, donar
que un altre gust, també.

29
00:01:18,261 --> 00:01:23,190
>> TOMAS Reimers: Així que per recapitular el
succeeix, quan s'escriu en la seva URL a

30
00:01:23,190 --> 00:01:26,650
el seu navegador d'Internet, que posa URL
mirar a l'ordinador.

31
00:01:26,650 --> 00:01:28,590
I connecta el seu ordinador de
a un altre equip,

32
00:01:28,590 --> 00:01:29,890
que alberga aquest lloc web.

33
00:01:29,890 --> 00:01:33,150
OK, així que quan vas a google.com, ets
connectat a un Google de

34
00:01:33,150 --> 00:01:36,496
ordinadors, que té el
arxius de google.com.

35
00:01:36,496 --> 00:01:38,750
>> Aleshores us preguntarà un arxiu específic.

36
00:01:38,750 --> 00:01:40,020
Així que si vas a -

37
00:01:40,020 --> 00:01:41,550
No sé -

38
00:01:41,550 --> 00:01:48,170
example.com / index.html o / prova.html,
vostè va a demanar

39
00:01:48,170 --> 00:01:49,340
aquest arxiu específic.

40
00:01:49,340 --> 00:01:52,780
I el lloc web va
per tornar a vostè.

41
00:01:52,780 --> 00:01:54,910
>> Després, una vegada que passen per aquest arxiu -

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

43
00:01:57,750 --> 00:01:59,950
una vegada que estàs equip s'obté que
arxiu - que va a començar

44
00:01:59,950 --> 00:02:00,820
per construir una pàgina web.

45
00:02:00,820 --> 00:02:03,020
Així que ara que té l'arxiu HTML,
que és una cosa així com el

46
00:02:03,020 --> 00:02:05,170
estructura de la pàgina web.

47
00:02:05,170 --> 00:02:08,620
L'arxiu HTML també podria fer referència a
Arxius CSS, que defineixen el

48
00:02:08,620 --> 00:02:09,889
estil de la pàgina web.

49
00:02:09,889 --> 00:02:12,970
>> Arxius JavaScript, que defineix
interacció amb la pàgina web.

50
00:02:12,970 --> 00:02:15,200
Els arxius d'imatge, que són només imatges.

51
00:02:15,200 --> 00:02:19,450
I, possiblement, establir vincles amb altres arxius HTML,
que després es pot visitar.

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

53
00:02:22,656 --> 00:02:24,380
>> MIKE RIZZO: OK, molt bé.

54
00:02:24,380 --> 00:02:28,980
Així que vostès tenen de tot, potser,
laboriosament configurar el seu host local

55
00:02:28,980 --> 00:02:30,810
al sistema virtual.

56
00:02:30,810 --> 00:02:35,650
I això, una mica, és el local
domini que l'equip rep només

57
00:02:35,650 --> 00:02:38,760
per a vostè en la seva pròpia adreça IP.

58
00:02:38,760 --> 00:02:43,300
>> Així que dins d'això, llavors vostè pot afegir
a que les seves pròpies pàgines web.

59
00:02:43,300 --> 00:02:47,655
Vull dir, en CS50 Finances, vostè ha de tenir
afegit algunes pàgines HTML, que són,

60
00:02:47,655 --> 00:02:49,410
classe de, embolicat en l'embolcall PHP.

61
00:02:49,410 --> 00:02:54,690
Però al final, el que les seves pàgines PHP
van ser sortida era HTML.

62
00:02:54,690 --> 00:02:58,210
>> Però pensant en tornar als orígens
del PSET, vam haver establir

63
00:02:58,210 --> 00:03:00,890
els permisos per a tot, oi?

64
00:03:00,890 --> 00:03:07,270
Així que això només bàsicament ens permet saber
Qui pot llegir, escriure, i possiblement

65
00:03:07,270 --> 00:03:08,730
executar cada un dels arxius.

66
00:03:08,730 --> 00:03:11,870
Així que farem una ràpida - hm?

67
00:03:11,870 --> 00:03:15,660
>> TOMAS Reimers: Així que anem
per fer una demostració ràpida.

68
00:03:15,660 --> 00:03:19,560
Així que per recordar a vostè, quan vostè
connectar-se al equip de Google -

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

70
00:03:20,690 --> 00:03:24,060
i demanar un arxiu, l'ordinador primer
cal assegurar-se que està autoritzat

71
00:03:24,060 --> 00:03:28,790
per realment veure aquest arxiu o llegir que
presentar perquè no es pot simplement pregunta

72
00:03:28,790 --> 00:03:30,430
per a qualsevol arxiu en aquest equip, no?

73
00:03:30,430 --> 00:03:32,260
Això seria un risc de seguretat.

74
00:03:32,260 --> 00:03:37,020
>> Així que els arxius dels sistemes que utilitzem, com
aquest aparell CS50, té tres

75
00:03:37,020 --> 00:03:39,200
general, les persones que poden tenir
permisos a alguna cosa.

76
00:03:39,200 --> 00:03:41,610
La primera és la real
propietari d'aquest arxiu.

77
00:03:41,610 --> 00:03:43,820
El segon és el grup que
pertany el fitxer.

78
00:03:43,820 --> 00:03:46,090
No ens centrarem
massa en això.

79
00:03:46,090 --> 00:03:50,010
I l'últim és, més o menys, com el
món, o com tothom qui és

80
00:03:50,010 --> 00:03:54,130
no és específic d'aquest arxiu i no
tenir drets de propietat sobre ella.

81
00:03:54,130 --> 00:04:05,650
>> Així que si tenim el propietari, grup,
i després món.

82
00:04:05,650 --> 00:04:10,510
I després, per a cada un d'aquests grups, es
pot tenir un de tres permisos,

83
00:04:10,510 --> 00:04:13,010
OK, o múltiple d'ells.

84
00:04:13,010 --> 00:04:15,070
Vostè pot tenir permisos de lectura.

85
00:04:15,070 --> 00:04:16,560
Vostè pot comptar amb els permisos adequats.

86
00:04:16,560 --> 00:04:18,880
I vostè pot tenir permisos d'execució.

87
00:04:18,880 --> 00:04:22,060
>> Així que en termes de tipus d'arxiu reals, llegiu
el permís és com en realitat la lectura

88
00:04:22,060 --> 00:04:23,250
el contingut del fitxer.

89
00:04:23,250 --> 00:04:24,730
Un permís dreta està escrivint
a aquest arxiu.

90
00:04:24,730 --> 00:04:28,370
Un permís d'execució s'està executant el
presentar com es fa quan s'executa una de

91
00:04:28,370 --> 00:04:29,620
seus projectes CS50.

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

93
00:04:32,190 --> 00:04:38,820
>> Per això, quan estem pensant en arxius
com quan necessitem llegir un arxiu HTML

94
00:04:38,820 --> 00:04:41,790
arxiu, que ha de ser món
llegible, oi?

95
00:04:41,790 --> 00:04:44,420
Presumiblement, també el propietari vol
ser capaç d'editar aquest arxiu.

96
00:04:44,420 --> 00:04:46,610
Així que l'amo necessitarà
permisos de lectura i escriptura.

97
00:04:46,610 --> 00:04:48,710
En realitat, no cal executar.

98
00:04:48,710 --> 00:04:50,950
>> Grup, que tractarem el
mateix que el món d'avui.

99
00:04:50,950 --> 00:04:54,610
Pel que necessiten permisos de lectura.

100
00:04:54,610 --> 00:04:57,310
Però no cal escriure
o permisos d'execució.

101
00:04:57,310 --> 00:05:01,920
I ara, si pensem en tornar a l'antiga
Conjunts de processadors, el que ens adonem és que aquest tipus

102
00:05:01,920 --> 00:05:03,360
de semblar-se a binari, oi?

103
00:05:03,360 --> 00:05:04,210
1 significa que si.

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

105
00:05:05,040 --> 00:05:06,870
I en realitat podem traduir
aquest a binari.

106
00:05:06,870 --> 00:05:10,478
>> Així que 110 en binari seria 6.

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

108
00:05:13,270 --> 00:05:14,690
El mateix amb el món.

109
00:05:14,690 --> 00:05:20,846
Així que el número al qual obtindria per al
permisos per això serien 644.

110
00:05:20,846 --> 00:05:24,400
>> MIKE RIZZO: I si vostè pensa de nou a
quan es va efectuar chmod alguna cosa, crec

111
00:05:24,400 --> 00:05:28,980
van donar en el conjunt de problemes de la
exemple d'on es podia fer

112
00:05:28,980 --> 00:05:36,470
alguna cosa com chmod 644
i després el nom de l'arxiu.

113
00:05:36,470 --> 00:05:39,980
El 644 llavors, ara es pot veure directament
d'on ve això.

114
00:05:39,980 --> 00:05:42,840
Així que espero que això fa que
una mica més clara.

115
00:05:42,840 --> 00:05:45,600
>> I a continuació, per a major claredat de quin tipus -

116
00:05:45,600 --> 00:05:48,200
oh, sí, aquí això és nou.

117
00:05:48,200 --> 00:05:53,260
Així que 600 llavors no seria més que l'exemple
ens vam donar per vençuts aquí on el propietari té

118
00:05:53,260 --> 00:05:56,360
permisos de lectura i dreta mentre que el grup
i el món no tenen cap permís

119
00:05:56,360 --> 00:05:58,145
per accedir a l'arxiu.

120
00:05:58,145 --> 00:06:01,500
>> TOMAS Reimers: I després tenim una ràpida
llista de permisos comuns.

121
00:06:01,500 --> 00:06:05,250
Així directoris et vols
chmod realitat 711.

122
00:06:05,250 --> 00:06:08,930
A part ràpida - per a un directori per tenir
permís d'execució significa poder

123
00:06:08,930 --> 00:06:11,680
per obrir el directori.

124
00:06:11,680 --> 00:06:15,280
Les imatges, CSS, JavaScript, HTML necessitats
644, ja que, bàsicament, el món

125
00:06:15,280 --> 00:06:16,400
necessitats permisos de lectura.

126
00:06:16,400 --> 00:06:20,960
>> I PHP, el que vostès han vist
encara que no estarem parlant d'ell

127
00:06:20,960 --> 00:06:24,880
estrictament normalment es va efectuar chmod amb
permís 600 perquè s'executa amb

128
00:06:24,880 --> 00:06:26,540
els permisos del propietari.

129
00:06:26,540 --> 00:06:27,790
Almenys en l'aparell.

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

131
00:06:30,200 --> 00:06:36,870
>> MIKE RIZZO: Així que si no ho fa específicament
especificar el tipus d'arxiu

132
00:06:36,870 --> 00:06:39,480
que vulgueu a la configuració realitat
aquesta presentació -

133
00:06:39,480 --> 00:06:43,490
hem tingut un problema amb això perquè
tot el que no es va efectuar chmod correctament -

134
00:06:43,490 --> 00:06:47,550
vostè va a aconseguir, una mena de, un
error prohibit que el lloc web

135
00:06:47,550 --> 00:06:49,700
en realitat no tenir permís
per accedir a qualsevol arxiu

136
00:06:49,700 --> 00:06:51,370
desitja que s'accedeix.

137
00:06:51,370 --> 00:06:54,780
I, per descomptat, que es pot fixar -
com en el conjunt de problemes - en canviar

138
00:06:54,780 --> 00:06:56,405
permisos correctament.

139
00:06:56,405 --> 00:06:59,620
>> TOMAS Reimers: I l'últim comentari per
desenvolupament ràpid local és - ens

140
00:06:59,620 --> 00:07:02,000
portat això, però l'únic que volíem
per portar de nou -

141
00:07:02,000 --> 00:07:06,230
si vostè demana un servidor - hoste tan local,
per exemple, com o el que sigui. -

142
00:07:06,230 --> 00:07:09,170
i no s'especifica un arxiu concret,
l'arxiu que l'equip va

143
00:07:09,170 --> 00:07:11,540
per demanar que es diu index.html.

144
00:07:11,540 --> 00:07:12,790
O si això no existeix, index.php.

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

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

147
00:07:16,350 --> 00:07:19,560
Així que això és només una recapitulació de tot,
amb sort, que hem cobert en

148
00:07:19,560 --> 00:07:22,800
secció, i una conferència,
i fins al moment en CS50.

149
00:07:22,800 --> 00:07:26,110
I ara anem a començar a parlar
biblioteques sobre concret.

150
00:07:26,110 --> 00:07:30,270
Biblioteques de JavaScript i CSS
per a aplicacions web.

151
00:07:30,270 --> 00:07:36,350
>> Així que una de les raons per la qual tenim ràpida
biblioteques és la programació -

152
00:07:36,350 --> 00:07:39,000
hi ha un munt de problemes en
programació, que segueixen apareixent

153
00:07:39,000 --> 00:07:40,570
una altra vegada, i una altra, i una altra.

154
00:07:40,570 --> 00:07:43,870
Vostè pot notar que una gran quantitat de llocs web
necessita la capacitat de tenir desplegables

155
00:07:43,870 --> 00:07:49,100
menús, per exemple, o necessiten la capacitat
per tenir una tecla molt estàndard

156
00:07:49,100 --> 00:07:51,400
estil, que pot no ser
la cosa més fàcil.

157
00:07:51,400 --> 00:07:54,670
Ara que comença a entrar en HTML,
adonar-se que els botons poden realment

158
00:07:54,670 --> 00:07:57,720
mirar molt lleig si
no facis res.

159
00:07:57,720 --> 00:08:00,830
>> Així que un munt de gent ha escrit
anomenat biblioteques.

160
00:08:00,830 --> 00:08:02,990
I en aquest context, són
també anomenat marcs.

161
00:08:02,990 --> 00:08:04,790
Anem a utilitzar el
02:00 indistintament.

162
00:08:04,790 --> 00:08:07,360
I el que són és que són bàsicament
peces prefabricades de codi -

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

164
00:08:09,130 --> 00:08:13,240
de portar una gran quantitat de la
equip que té en la codificació.

165
00:08:13,240 --> 00:08:17,290
>> Així que predefinir un munt de classes o
pre-definir un grapat de funcions per

166
00:08:17,290 --> 00:08:20,110
El cas de JavaScript, que
pot trucar més tard.

167
00:08:20,110 --> 00:08:22,690
I llavors vostè pot, més o menys, obtenir
l'accés a aquest codi sense

168
00:08:22,690 --> 00:08:23,710
haver de fer res.

169
00:08:23,710 --> 00:08:27,750
Un exemple de la biblioteca era CS50.H.
Aquesta va ser una biblioteca que vam donar a vostè de nou

170
00:08:27,750 --> 00:08:32,090
en la primera setmana, el que va permetre que facis
coses així GetInt i GetString

171
00:08:32,090 --> 00:08:35,237
sense haver d'escriure
qualsevol codi manualment.

172
00:08:35,237 --> 00:08:36,179
>> MIKE RIZZO: Molt bé.

173
00:08:36,179 --> 00:08:40,299
Així que aquí, igual que hem hagut d'incloure
en la nostra c arxius els diferents

174
00:08:40,299 --> 00:08:46,570
biblioteques, també cal incloure en
arxius del nostre HTML diferents biblioteques.

175
00:08:46,570 --> 00:08:50,310
Per exemple, si volguéssim incloure
una biblioteca de JavaScript específic aquí,

176
00:08:50,310 --> 00:08:52,850
potser, un que hem escrit
nosaltres mateixos, ja que està allotjat de forma local

177
00:08:52,850 --> 00:08:56,000
anomenats script.js, només
utilitzar aquesta notació.

178
00:08:56,000 --> 00:08:59,500
>> Així que tenim iguals tipus guió
JavaScript font iguals

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

180
00:09:01,260 --> 00:09:05,190
I si vostè pensa de nou al seu CS50
problema financer establert, si un mira a

181
00:09:05,190 --> 00:09:09,190
header.php a la carpeta de plantilles,
vostè ha d'haver vist

182
00:09:09,190 --> 00:09:10,970
alguns d'ells inclosos.

183
00:09:10,970 --> 00:09:13,250
Així que aquest primer - els scripts -

184
00:09:13,250 --> 00:09:16,080
és que inclou una biblioteca de JavaScript.

185
00:09:16,080 --> 00:09:18,760
Inclou una biblioteca de CSS és
una mica diferent.

186
00:09:18,760 --> 00:09:21,430
>> Aquí, en lloc de la seqüència de comandaments
ETIQUETA vostè necessita l'etiqueta d'enllaç.

187
00:09:21,430 --> 00:09:27,110
I a continuació, el tipus de text CSS
és una mica diferent.

188
00:09:27,110 --> 00:09:29,270
No sempre ha d'incloure
full d'estil rel.

189
00:09:29,270 --> 00:09:30,970
Però jo crec que és, en general,
bones pràctiques.

190
00:09:30,970 --> 00:09:35,810
>> I, finalment, el HREF, que
Probablement va veure en els seus ATAGs per vincular

191
00:09:35,810 --> 00:09:39,440
en diferents baules només especifica les
l'enllaç d'on trobar això.

192
00:09:39,440 --> 00:09:42,250
Per exemple, si volguéssim vincular un
diferent de la biblioteca - diguem -

193
00:09:42,250 --> 00:09:49,330
que va viure a styles.css.

194
00:09:49,330 --> 00:09:54,030
I volíem vincular que en això és
allotjada a la web, volem copiar això.

195
00:09:54,030 --> 00:09:58,834
I després enganxar en qualsevol
que aquí tenim al seu lloc.

196
00:09:58,834 --> 00:10:01,340
>> TOMAS Reimers: OK, esperem que pugui
nois ja estan familiaritzats

197
00:10:01,340 --> 00:10:02,410
amb la forma de vincular CSS.

198
00:10:02,410 --> 00:10:04,000
Havies de fer això en
el seu últim conjunt marró.

199
00:10:04,000 --> 00:10:07,110
JavaScript, alguns de vosaltres potser
tenir una mica d'experiència amb.

200
00:10:07,110 --> 00:10:07,980
Alguns de vostès potser no.

201
00:10:07,980 --> 00:10:12,190
>> Així que per ara, saber que un arxiu JavaScript
és molt semblant a un arxiu CSS a

202
00:10:12,190 --> 00:10:15,640
el sentit que es pot enllaçar amb ell o
que es poden incloure de forma interna.

203
00:10:15,640 --> 00:10:17,360
I és que permet a les coses de guió.

204
00:10:17,360 --> 00:10:21,820
I anem a caminar a través d'un
mica de JavaScript més endavant.

205
00:10:21,820 --> 00:10:23,560
>> Així, utilitzant una biblioteca -

206
00:10:23,560 --> 00:10:26,150
una vegada que s'ha inclòs ell, és com
simple com literalment trucant al

207
00:10:26,150 --> 00:10:29,640
funcions o l'addició de la
noms de classe a la mateixa.

208
00:10:29,640 --> 00:10:32,220
L'última cosa que volem parlar
aproximadament, en termes de la biblioteca -

209
00:10:32,220 --> 00:10:34,180
i això és més d'una nota tècnica -

210
00:10:34,180 --> 00:10:35,860
és la concessió de llicències de codi obert.

211
00:10:35,860 --> 00:10:41,550
Així que quan vostè troba aquestes biblioteques reals,
vostè pot estar pensant en

212
00:10:41,550 --> 00:10:47,630
Preguntes com està bé que només sóc
utilitzant el codi d'una altra persona, especialment

213
00:10:47,630 --> 00:10:51,970
perquè això és una cosa que en gran mesura
Et vaig dir que no ho fan en aquest curs.

214
00:10:51,970 --> 00:10:55,790
>> Així que en el cas de les llicències de codi obert,
molts dels desenvolupadors -

215
00:10:55,790 --> 00:10:57,540
una vegada que han escrit una biblioteca,
que pensen que podria ser

216
00:10:57,540 --> 00:10:59,450
útil a altres persones -

217
00:10:59,450 --> 00:11:02,420
el publicarà a la web
i donar-li una llicència.

218
00:11:02,420 --> 00:11:06,620
I una llicència bàsicament diu que sóc la present
la concessió de permisos a altres

219
00:11:06,620 --> 00:11:11,250
les persones a utilitzar aquest programari
amb el següent tipus de

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

221
00:11:13,230 --> 00:11:16,100
>> Hem inclòs un enllaç a un bon lloc per
ajudar a entendre les llicències d'

222
00:11:16,100 --> 00:11:17,720
cas que estigui en ells.

223
00:11:17,720 --> 00:11:21,680
Estipulacions comunes són coses com
us convidem a utilitzar la meva biblioteca per

224
00:11:21,680 --> 00:11:23,000
sempre que es nomeni a l'autor.

225
00:11:23,000 --> 00:11:25,670
El convidem a utilitzar la meva biblioteca
sempre que quan es trenca

226
00:11:25,670 --> 00:11:26,790
no em culpis.

227
00:11:26,790 --> 00:11:30,310
El convidem a utilitzar la meva biblioteca tant de temps
que no l'utilitzi per fer diners

228
00:11:30,310 --> 00:11:31,910
per si mateix.

229
00:11:31,910 --> 00:11:34,130
Aquests són tipus de comú
estipulacions.

230
00:11:34,130 --> 00:11:37,780
>> Per a aquest projecte final CS50, que
no ha de ser súper rellevant perquè

231
00:11:37,780 --> 00:11:41,440
els projectes que vostès SEU ÚS
probablement més aviat, una mena de, conegut.

232
00:11:41,440 --> 00:11:44,170
Però quan realment sortir a l'
món i començar a utilitzar les biblioteques, les quals

233
00:11:44,170 --> 00:11:48,100
poden o no ser tan ben implementat com
alguns dels més populars que estem

234
00:11:48,100 --> 00:11:49,780
estarà passant.

235
00:11:49,780 --> 00:11:53,310
És bo ser capaç d'entendre
aquestes llicències ja

236
00:11:53,310 --> 00:11:54,560
entendre el que signifiquen.

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

238
00:11:58,120 --> 00:11:58,586
I tornant.

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

240
00:12:00,960 --> 00:12:04,850
Així que ara passar a exemples
de CSS real.

241
00:12:04,850 --> 00:12:07,770
En aquest punt, fins al moment, és possible que
no s'han trobat amb això.

242
00:12:07,770 --> 00:12:10,300
Però és possible que hagi trobat en
la seva vida quotidiana en què alguna cosa

243
00:12:10,300 --> 00:12:13,160
que es veu d'una manera en un navegador
podrien no tenir el mateix aspecte

244
00:12:13,160 --> 00:12:14,880
forma en un altre navegador.

245
00:12:14,880 --> 00:12:17,400
>> Això es diu navegador navegador
compatibilitat.

246
00:12:17,400 --> 00:12:20,780
I cada vegada s'està tornant més i
més d'un problema, especialment pel que

247
00:12:20,780 --> 00:12:25,260
navegadors prenen més i més llibertats
per posar en pràctica les coses com ells volen.

248
00:12:25,260 --> 00:12:28,440
Així que per superar això, hi ha en realitat és
una gran biblioteca anomenada Normalize.CSS.

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

250
00:12:32,236 --> 00:12:33,770
>> TOMAS Reimers: Es van incloure en el vincle.

251
00:12:33,770 --> 00:12:36,210
En aquest punt, és útil si
vostè té el seu ordinador portàtil a la que hi ha

252
00:12:36,210 --> 00:12:38,740
buscant en el lloc.

253
00:12:38,740 --> 00:12:42,580
I estem donant això a vostè dret
ara simplement perquè la final CS50

254
00:12:42,580 --> 00:12:44,370
projecte és en realitat va a
demanar-li que implementar

255
00:12:44,370 --> 00:12:45,860
de manera similar i per mitjà dels navegadors.

256
00:12:45,860 --> 00:12:49,250
>> Així que per mantenir a la part posterior de la seva
el cap, això és una biblioteca meravellosa

257
00:12:49,250 --> 00:12:51,170
perquè serà, més o menys,
normalitzar les coses.

258
00:12:51,170 --> 00:12:54,230
A Firefox, una cosa pot mostrar
com un píxel cap a l'esquerra.

259
00:12:54,230 --> 00:12:58,390
I després Chrome pot decidir que en realitat
el que volia dir era 10 píxels

260
00:12:58,390 --> 00:12:59,380
a l'esquerra.

261
00:12:59,380 --> 00:13:01,030
I voleu estandarditzar això.

262
00:13:01,030 --> 00:13:05,360
Normalitzar farà realment una molt bona
treball d'assegurar-se que el seu lloc

263
00:13:05,360 --> 00:13:08,070
té el mateix aspecte en tots els navegadors.

264
00:13:08,070 --> 00:13:10,660
>> MIKE RIZZO: Així que si volíem simplement
feu clic al vincle molt ràpid i l'espectacle

265
00:13:10,660 --> 00:13:13,140
el que sembla, vostè
pot descarregar usant el

266
00:13:13,140 --> 00:13:14,670
gegant botó Descarregar.

267
00:13:14,670 --> 00:13:18,520
O us animo a llegir més sobre això
fent clic en aquest enllaç a la part inferior

268
00:13:18,520 --> 00:13:19,310
cantonada dreta.

269
00:13:19,310 --> 00:13:22,420
>> TOMAS Reimers: I si en realitat
feu clic a Llegir Més just allà -

270
00:13:22,420 --> 00:13:24,340
feu clic a la font en GitHub -

271
00:13:24,340 --> 00:13:31,720
que realment va a veure el codi obert
atorgar una llicència a LICENSE.md allà.

272
00:13:31,720 --> 00:13:35,740
I vostè veu aquí és la
llicència MIT molt popular.

273
00:13:35,740 --> 00:13:38,940
Un cop més, si vostè llegeix a través del text,
vostè serà capaç de trobar en el lloc

274
00:13:38,940 --> 00:13:42,550
vam fer referència abans i ser capaços de
entendre sense haver de llegir

275
00:13:42,550 --> 00:13:45,920
a través de l'argot jurídica.

276
00:13:45,920 --> 00:13:46,850
>> MIKE RIZZO: OK, molt bé.

277
00:13:46,850 --> 00:13:47,940
Així que això és Normalitzar.

278
00:13:47,940 --> 00:13:49,190
Volíem donar-li
que realment ràpidament.

279
00:13:49,190 --> 00:13:50,030
Oh, tens alguna pregunta?

280
00:13:50,030 --> 00:13:53,013
>> AUDIÈNCIA: Així que quan es descarrega, es
només has de seguir el codi que tenen

281
00:13:53,013 --> 00:13:54,098
sota el botó de descàrrega?

282
00:13:54,098 --> 00:13:55,860
>> TOMAS Reimers: Sí, pel que
al rebre -

283
00:13:55,860 --> 00:13:58,130
>> MIKE RIZZO: Oh, això és un gran punt.

284
00:13:58,130 --> 00:14:00,700
Per tant el dubte era com fer
que en realitat descarregar?

285
00:14:00,700 --> 00:14:03,260
Així que si fem clic a l'enllaç, veiem
que en realitat apareix

286
00:14:03,260 --> 00:14:05,030
en el codi font.

287
00:14:05,030 --> 00:14:08,550
Així que per fer això, el que hem pogut
no és simplement feu clic a Desa com.

288
00:14:08,550 --> 00:14:10,830
Guardar com i que en cas de
obrir un arxiu.

289
00:14:10,830 --> 00:14:14,160
I llavors podem optar per guardar
com normalize.CSS.

290
00:14:14,160 --> 00:14:15,810
I després caldria vincular a -

291
00:14:15,810 --> 00:14:18,660
>> TOMAS Reimers: De la mateixa manera que
relacionar en qualsevol altre arxiu.

292
00:14:18,660 --> 00:14:22,250
I una vegada que ho enllaç en, el que és genial
sobre Normalitzar és en realitat va a

293
00:14:22,250 --> 00:14:25,920
fer-se càrrec de tot el dur
treballar per si mateix.

294
00:14:25,920 --> 00:14:27,730
El que vol dir que vostè no ha
afegir cap classe.

295
00:14:27,730 --> 00:14:29,690
>> No ha de fer res estrany.

296
00:14:29,690 --> 00:14:34,590
Es normalitzarà sense tu
fer res més.

297
00:14:34,590 --> 00:14:36,083
Sí, vostè ha de incloure.

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

299
00:14:38,990 --> 00:14:40,240
Google Chrome no està responent.

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

301
00:14:43,270 --> 00:14:44,860
>> Només una ràpida costat -

302
00:14:44,860 --> 00:14:46,800
Em vaig adonar que ens va ficar en això.

303
00:14:46,800 --> 00:14:49,010
La resta d'aquesta presentació és
serà un resum ràpid.

304
00:14:49,010 --> 00:14:50,380
Una enquesta de les biblioteques.

305
00:14:50,380 --> 00:14:52,710
>> Bàsicament, el que són.

306
00:14:52,710 --> 00:14:53,350
El que ells fan.

307
00:14:53,350 --> 00:14:54,060
Com són útils.

308
00:14:54,060 --> 00:14:56,540
Com és possible posar-les en pràctica.

309
00:14:56,540 --> 00:14:59,730
Si vols començar a mirar-los,
seguint al llarg, i de la lectura a través d'

310
00:14:59,730 --> 00:15:01,990
ells, jo els animo a que.

311
00:15:01,990 --> 00:15:07,620
>> Com a alternativa, us convidem també a
començar a descarregar ells i que inclou

312
00:15:07,620 --> 00:15:11,400
en un espectacle només per veure el que
sembli o què fer si té

313
00:15:11,400 --> 00:15:12,270
seu ordinador portàtil al davant de vostè.

314
00:15:12,270 --> 00:15:14,650
Si no és així, us convidem a seguir
ens escolta parlar.

315
00:15:14,650 --> 00:15:15,500
Seguirem parlant.

316
00:15:15,500 --> 00:15:18,680
I tenim temps al final, amb sort
anem a realment entrar en mostrant

317
00:15:18,680 --> 00:15:20,946
el que algunes d'aquestes biblioteques
ser similar.

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

319
00:15:22,320 --> 00:15:25,466
Molt bé, així que ara anem a parlar
sobre Font impressionant.

320
00:15:25,466 --> 00:15:30,480
>> TOMAS Reimers: Awesome manera de font és una
lloc realment fantàstic, especialment per a aquells

321
00:15:30,480 --> 00:15:32,450
de nosaltres que són menys artísticament
talentós.

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

323
00:15:36,330 --> 00:15:38,880
Ignorant el Nom de font impressionant, dóna
que un munt d'icones, que són

324
00:15:38,880 --> 00:15:41,050
molt útil.

325
00:15:41,050 --> 00:15:45,950
Així que un munt de vegades que es va a implementar un
ICON és possible que vulgueu com un bonic x el

326
00:15:45,950 --> 00:15:47,170
que es pot tancar alguna cosa.

327
00:15:47,170 --> 00:15:49,910
>> O pot ser que vulgui algun tipus de botó Edita
amb un dibuix a llapis com

328
00:15:49,910 --> 00:15:50,940
tothom té.

329
00:15:50,940 --> 00:15:53,850
I aquí és quan s'assabenta que
dibuix de les icones pot ser

330
00:15:53,850 --> 00:15:55,510
molt tediós i difícil.

331
00:15:55,510 --> 00:15:59,160
Font impressionant - si en realitat
anar al lloc -

332
00:15:59,160 --> 00:16:02,892
et dóna un munt d'icones sota
les icones de la part superior.

333
00:16:02,892 --> 00:16:06,980
Sí, només la part superior.

334
00:16:06,980 --> 00:16:09,030
Se li donarà una gran quantitat
d'icones gratis.

335
00:16:09,030 --> 00:16:15,210
>> Així que aquí veus que tenim coses com un
asterisc, bars, un llamp, 1

336
00:16:15,210 --> 00:16:19,750
calendari, un insecte, un llibre, etc.

337
00:16:19,750 --> 00:16:21,110
Això pot ser molt útil.

338
00:16:21,110 --> 00:16:24,290
La forma en què s'inclou aquest és incloure
literalment, l'arxiu CSS.

339
00:16:24,290 --> 00:16:29,760
I després d'haver inclòs l'arxiu CSS,
el que pot fer és crear un

340
00:16:29,760 --> 00:16:33,430
etiqueta anomenada I. satands TI per
Icona amb la classe FA

341
00:16:33,430 --> 00:16:34,460
de peu per a Font impressionant.

342
00:16:34,460 --> 00:16:36,330
I després, qualsevol que sigui la classe que vostè desitja.

343
00:16:36,330 --> 00:16:41,220
>> Així que si volia una icona d'aquest plus
quadrar aquí, jo li donaria

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

345
00:16:43,290 --> 00:16:46,230
I llavors guió FA més quadrat guió.

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

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

348
00:16:53,710 --> 00:16:56,980
>> TOMAS Reimers: I llavors, l'última CSS
biblioteca que volem aconseguir a través de nosaltres

349
00:16:56,980 --> 00:16:59,950
tractant de mantenir el mínim sobre CSS
biblioteques, perquè ens adonem de la

350
00:16:59,950 --> 00:17:03,660
títol d'aquesta presentació
és JavaScript Biblioteques.

351
00:17:03,660 --> 00:17:07,089
Però pensem que puguem, així
presentar-te a altres biblioteques

352
00:17:07,089 --> 00:17:09,569
mentre parlàvem sobre les biblioteques.

353
00:17:09,569 --> 00:17:11,400
>> És Google Web Fonts.

354
00:17:11,400 --> 00:17:17,040
I el que Google Web Fonts li permet
fer és afegir les fonts al seu lloc web,

355
00:17:17,040 --> 00:17:22,079
que és una manera molt fàcil de fer-ho
bonica i distingir el conjunt de

356
00:17:22,079 --> 00:17:24,460
de tots els altres és si té
una font agradable o si es té un bon

357
00:17:24,460 --> 00:17:27,790
col · lecció de fonts.

358
00:17:27,790 --> 00:17:31,410
Google Web Fonts és agradable a diferència d'altres
biblioteques en el sentit que és un

359
00:17:31,410 --> 00:17:33,490
instal · lació realment guiada.

360
00:17:33,490 --> 00:17:38,680
>> Així que si vostè segueix l'enllaç, és
google.com / fonts, crec.

361
00:17:38,680 --> 00:17:41,100
Si segueix això,
pot triar el tipus de lletra.

362
00:17:41,100 --> 00:17:44,410
Vostè pot triar a l'esquerra
gruix, inclinació, etc.

363
00:17:44,410 --> 00:17:48,970
I després, un cop triat un,
pot fer clic en l'ús ràpid.

364
00:17:48,970 --> 00:17:49,820
Aquí mateix.

365
00:17:49,820 --> 00:17:51,590
A baix a la dreta de la caixa.

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

367
00:17:54,380 --> 00:17:56,700
>> I després, desplaceu-vos cap avall.

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

369
00:17:59,600 --> 00:18:02,650
En primer lloc, et donen la CSS que
cal enllaçar realment a ella.

370
00:18:02,650 --> 00:18:03,330
Està just allà.

371
00:18:03,330 --> 00:18:05,170
Vostè pot simplement copiar i enganxar aquest polz

372
00:18:05,170 --> 00:18:07,250
I el bo d'això és
que en realitat no tan sols necessita

373
00:18:07,250 --> 00:18:08,340
descarregar l'arxiu.

374
00:18:08,340 --> 00:18:11,170
>> Què es va a fer és que va
vincular a la versió de Google de la mateixa.

375
00:18:11,170 --> 00:18:14,130
Així que de tornada al que significa això.

376
00:18:14,130 --> 00:18:18,270
Això vol dir que quan un usuari
descàrrega teu arxiu -

377
00:18:18,270 --> 00:18:22,300
descàrrega teva pàgina HTML - el seu HTML
la pàgina es va a fer referència al fitxer.

378
00:18:22,300 --> 00:18:26,790
>> Així doncs, l'equip va a veure,
oh, està allotjat a google.com en lloc

379
00:18:26,790 --> 00:18:28,170
que en theirsite.com.

380
00:18:28,170 --> 00:18:30,370
Déjame anar a preguntar Google per a aquest arxiu.

381
00:18:30,370 --> 00:18:32,800
I després, es va a incloure
gairebé com si es tractés d'un

382
00:18:32,800 --> 00:18:35,584
part del teu propi lloc.

383
00:18:35,584 --> 00:18:36,540
>> TOMAS Reimers: Cool.

384
00:18:36,540 --> 00:18:40,980
I una vegada que s'inclou que, a continuació, a
incloure'l al teu CSS, li dóna

385
00:18:40,980 --> 00:18:41,830
la línia real.

386
00:18:41,830 --> 00:18:45,188
Així s'estableix la família de fonts de propietat
igual al nom de la seva font.

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
Així que acabem d'acabar amb CSS.

390
00:18:52,220 --> 00:18:57,230
I alguns de vostès podrien estar pensant, bé,
vam tenir una mica de CSS en CS50 Finances.

391
00:18:57,230 --> 00:19:00,390
Però biblioteca CSS va ser d'arrencada.

392
00:19:00,390 --> 00:19:05,190
En realitat ens incloem Bootstrap una mica
més endavant sota JavaScript perquè amb

393
00:19:05,190 --> 00:19:09,660
la biblioteca Bootstrap CSS també ve
amb un munt de JavaScript que

394
00:19:09,660 --> 00:19:12,060
Bootstrap o Twitter -
qui va fer Bootstrap -

395
00:19:12,060 --> 00:19:15,426
s'utilitza per gestionar la totalitat del seu CSS.

396
00:19:15,426 --> 00:19:19,592
>> TOMAS Reimers: Algú té alguna
preguntes fins ara sobre CSS en general?

397
00:19:19,592 --> 00:19:20,723
Estem bé?

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

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

400
00:19:22,495 --> 00:19:25,136
>> TOMAS Reimers: Així es mou
en JavaScript.

401
00:19:25,136 --> 00:19:27,900
>> MIKE RIZZO: Així que volia parlar
sobre jQuery, per començar.

402
00:19:27,900 --> 00:19:30,780
Algú ha sentit parlar de jQuery
abans o usat?

403
00:19:30,780 --> 00:19:32,180
Sí, un parell?

404
00:19:32,180 --> 00:19:36,000
Així que si vostè acaba de treballar amb nadius
JavaScript es trobarà

405
00:19:36,000 --> 00:19:41,000
escrivint un munt de selectors llargs molt.

406
00:19:41,000 --> 00:19:44,400
Llavors, què jQuery fa és que proporciona
un bonic embolcall per el codi JavaScript

407
00:19:44,400 --> 00:19:48,180
llenguatge que li permet seleccionar fàcilment
i manipular diferents elements

408
00:19:48,180 --> 00:19:52,470
dins del model d'objectes de document de la
la pàgina web o el DOM, que crec que

409
00:19:52,470 --> 00:19:54,290
vostès han sentit parlar de en
donar una conferència en aquest punt.

410
00:19:54,290 --> 00:19:57,550
>> TOMAS Reimers: Si vostè no ha sentit parlar de
o la conferència si no has vist

411
00:19:57,550 --> 00:20:01,870
però, és el Document Object Model
bàsicament com es representen les coses.

412
00:20:01,870 --> 00:20:05,290
Així HTML manera s'assembla a un arbre
quan en realitat el arribarà.

413
00:20:05,290 --> 00:20:06,850
Vostè té l'element HTML a la part superior.

414
00:20:06,850 --> 00:20:07,560
Vostè té el cap i el cos.

415
00:20:07,560 --> 00:20:09,500
>> I després, dins de que
té tota la resta.

416
00:20:09,500 --> 00:20:10,660
Això es coneix com DOM -

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

418
00:20:12,120 --> 00:20:16,090
Així que un model que representa els objectes en
el document és una manera fàcil de pensar

419
00:20:16,090 --> 00:20:18,560
sobre això.

420
00:20:18,560 --> 00:20:22,520
I un de la gran cosa sobre jQuery
és el que realment fa de desplaçament

421
00:20:22,520 --> 00:20:26,460
i que la manipulació d'elements dins de
que increïblement simple.

422
00:20:26,460 --> 00:20:30,300
>> Així simple, de fet, que la majoria dels
JavaScript biblioteques o si no l'

423
00:20:30,300 --> 00:20:34,200
majoria, la gran majoria dels
vostè veurà realment requereixen jQuery per

424
00:20:34,200 --> 00:20:37,530
que puguin funcionar a si mateixos simplement
perquè si vostè no té jQuery, que

425
00:20:37,530 --> 00:20:40,540
seria perdre molt temps intentant
trobar la manera de seleccionar cert

426
00:20:40,540 --> 00:20:43,660
elements i la forma de fer altres coses.

427
00:20:43,660 --> 00:20:47,950
I l'altra gran cosa sobre jQuery
és que és transversal navegador compatible.

428
00:20:47,950 --> 00:20:51,550
>> Així que recordi de nou quan ens va dir que
no tots els navegadors implementen

429
00:20:51,550 --> 00:20:53,100
coses de la mateixa manera?

430
00:20:53,100 --> 00:20:55,120
Això és cert fins i tot en JavaScript.

431
00:20:55,120 --> 00:20:58,220
I una de les millors coses de jQuery
és que va a detectar l'

432
00:20:58,220 --> 00:21:00,300
i detectar el navegador
mètode apropiat.

433
00:21:00,300 --> 00:21:03,420
>> Així que si vostè necessita per seleccionar un element,
Internet Explorer podria dir que ets

434
00:21:03,420 --> 00:21:05,770
suposa que ha de fer d'aquesta manera.

435
00:21:05,770 --> 00:21:08,300
Firefox podria dir el correcte
forma és d'aquesta manera.

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

437
00:21:09,710 --> 00:21:12,550
Quan li dius a jQuery per seleccionar un
element que s'adonaran de com és

438
00:21:12,550 --> 00:21:16,290
suposa que fer-ho dins del navegador de l'
usuari està actualment en, i després fer

439
00:21:16,290 --> 00:21:18,584
d'aquesta manera.

440
00:21:18,584 --> 00:21:22,650
>> MIKE RIZZO: Així que no anem a parlar sobre
l'ús de jQuery una mica.

441
00:21:22,650 --> 00:21:27,670
Igual que PHP, jQuery té una especial
afició pel signe de dòlar.

442
00:21:27,670 --> 00:21:30,880
Així que trobareu que qualsevol jQuery -

443
00:21:30,880 --> 00:21:32,060
Bé, no tots.

444
00:21:32,060 --> 00:21:35,210
De vegades es pot substituir el dòlar
signar amb la paraula jQuery.

445
00:21:35,210 --> 00:21:38,980
Però, en general, només perquè és
més curta, cada vegada que vegi sent jQuery

446
00:21:38,980 --> 00:21:41,420
utilitzat serà amb un signe de dòlar.

447
00:21:41,420 --> 00:21:47,030
>> Així que aquí només estem mostrant un començament
selector per a un element en el DOM.

448
00:21:47,030 --> 00:21:52,850
Aquí, tenim el signe de dòlar seguit
per parèntesis d'obertura i després cita.

449
00:21:52,850 --> 00:21:56,130
I dins de les cometes anar els nostres selectors
per als diferents elements.

450
00:21:56,130 --> 00:21:59,810
Igual que en el CSS, necessitàvem selectors per
ser capaç d'aplicar estil diferents elements

451
00:21:59,810 --> 00:22:00,840
dins de la pàgina.

452
00:22:00,840 --> 00:22:06,555
Aquests diferents selectors tradueixen
exactament en jQuery i JavaScript,

453
00:22:06,555 --> 00:22:07,820
en la seva major part.

454
00:22:07,820 --> 00:22:10,120
>> Així que aquí tenim un foo punt.

455
00:22:10,120 --> 00:22:14,780
Així que si vostè recorda de conferència,
el punt només significa la classe.

456
00:22:14,780 --> 00:22:18,850
Així que estem seleccionant element
amb la classe foo.

457
00:22:18,850 --> 00:22:22,670
Així que si segueixo endavant i obrir els nostres
JavaScript consola d'aquí molt ràpid

458
00:22:22,670 --> 00:22:26,830
simplement demostrar que, si jo només escric la
signe de dòlar, veiem que es tracta d'alguna

459
00:22:26,830 --> 00:22:28,090
funció que apareix.

460
00:22:28,090 --> 00:22:29,420
I s'acaba de definir per jQuery.

461
00:22:29,420 --> 00:22:32,120
>> TOMAS Reimers: Per a aquells de vostès
desconegut, la consola és una eina

462
00:22:32,120 --> 00:22:35,430
dins de Chrome, que li permet,
bàsicament, executeu JavaScript a la

463
00:22:35,430 --> 00:22:36,450
pàgina actual.

464
00:22:36,450 --> 00:22:39,420
Això es pot trobar molt útil quan
en realitat estàs depuració i

465
00:22:39,420 --> 00:22:42,400
ha de ser, què és el corrent
valor d'una variable global o el

466
00:22:42,400 --> 00:22:43,910
és alguna cosa més?

467
00:22:43,910 --> 00:22:47,620
És com GDB, amb l'excepció
que en realitat es pot

468
00:22:47,620 --> 00:22:51,600
manipular els elements de la pàgina amb
que d'una manera molt més fàcil.

469
00:22:51,600 --> 00:22:55,080
I també no ho fa, bàsicament, comproveu
amb vostè abans de fer res.

470
00:22:55,080 --> 00:22:58,660
>> Així que, no GDB podria ser, oi
Segur que voleu executar el següent pas?

471
00:22:58,660 --> 00:22:59,830
La consola està en real.

472
00:22:59,830 --> 00:23:03,690
Així que la pàgina web és la prestació i
fent el que està fent, la

473
00:23:03,690 --> 00:23:05,720
consell del també corrent al costat d'ell.

474
00:23:05,720 --> 00:23:08,330
I vostè pot posar codi d'imputar a
aquesta consola, que

475
00:23:08,330 --> 00:23:09,260
executar-se en la pàgina.

476
00:23:09,260 --> 00:23:12,190
>> MIKE RIZZO: Així que per entrar a la consola,
Suposo que hauria breument

477
00:23:12,190 --> 00:23:13,750
esmentar com fer-ho.

478
00:23:13,750 --> 00:23:17,850
En els últims problemes que vostè pugui tenir
usat Chrome d'inspeccionar element

479
00:23:17,850 --> 00:23:20,440
funcions o visualització de la pàgina d'origen -

480
00:23:20,440 --> 00:23:23,870
i aquests són accessible només per dret
clic a la pàgina o una específica

481
00:23:23,870 --> 00:23:28,430
element i fent bé inspeccionar
element o vista de la pàgina d'origen.

482
00:23:28,430 --> 00:23:31,190
També podem accedir a JavaScript
consola directament per

483
00:23:31,190 --> 00:23:33,630
triar inspeccionar element.

484
00:23:33,630 --> 00:23:37,930
Consola Així que vostè acaba de colpejar
a l'extrem dret.

485
00:23:37,930 --> 00:23:41,900
>> També podeu també haver anat
a la cantonada superior dreta,

486
00:23:41,900 --> 00:23:46,820
que es talla en aquesta pantalla on
compta amb les tres barres horitzontals.

487
00:23:46,820 --> 00:23:52,010
I cal baixar a les eines i
a continuació, la consola JavaScript

488
00:23:52,010 --> 00:23:53,240
aquí, on pot veure -

489
00:23:53,240 --> 00:23:54,370
almenys en Windows -

490
00:23:54,370 --> 00:23:59,680
l'accés directe és el Control Shift J. Llavors
si volíem per seleccionar un element

491
00:23:59,680 --> 00:24:06,060
en aquesta pàgina, igual que jo vaig mostrar
abans, fem la mostra de dòlar parens obertes

492
00:24:06,060 --> 00:24:08,180
i després cita.

493
00:24:08,180 --> 00:24:11,750
>> Una cosa interessant és, en general,
Les cometes simples i dobles

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

495
00:24:12,370 --> 00:24:16,050
Així que molta gent només ha d'utilitzar un sol
cometes perquè són més ràpids d'escriure

496
00:24:16,050 --> 00:24:19,780
de cometes perquè no és així
ha de mantenir premuda la tecla de majúscules.

497
00:24:19,780 --> 00:24:21,770
Així que vaig a fer això ara mateix.

498
00:24:21,770 --> 00:24:24,510
>> Així que vull seleccionar alguna cosa
amb classe.

499
00:24:24,510 --> 00:24:27,200
Container, només perquè sé que és
cosa que està en la nostra

500
00:24:27,200 --> 00:24:28,740
la pàgina web en aquest moment.

501
00:24:28,740 --> 00:24:29,520
I vaig arribar a Enter.

502
00:24:29,520 --> 00:24:31,670
I podem veure que la va seleccionar.

503
00:24:31,670 --> 00:24:34,990
Per tant, es mostra que
retornat aquest objecte.

504
00:24:34,990 --> 00:24:36,620
Així que aquesta és una selecció bàsica.

505
00:24:36,620 --> 00:24:40,080
Si volem manipular en realitat,
vostè hauria de trucar a alguna cosa

506
00:24:40,080 --> 00:24:43,925
en què la selecció, la qual
entrarem en més endavant.

507
00:24:43,925 --> 00:24:49,030
>> TOMAS Reimers: Així que només per veure que
més en profunditat, això no és diferent

508
00:24:49,030 --> 00:24:52,245
que les crides a funcions que vam fer en C.
El nom de la funció aquí és un

509
00:24:52,245 --> 00:24:52,580
mica estrany.

510
00:24:52,580 --> 00:24:55,640
És signe de dòlar.

511
00:24:55,640 --> 00:24:57,010
És només un nom d'una funció.

512
00:24:57,010 --> 00:24:58,810
No hi ha res especial en això.

513
00:24:58,810 --> 00:25:00,450
>> Tenim parèntesi oberts.

514
00:25:00,450 --> 00:25:03,880
Llavors, tenim el nostre un argument, que
en aquest cas passa a ser una cadena,

515
00:25:03,880 --> 00:25:05,680
que és un selector per a això.

516
00:25:05,680 --> 00:25:08,130
I després, tenim la nostra
parèntesi tancat.

517
00:25:08,130 --> 00:25:09,960
Això és tot.

518
00:25:09,960 --> 00:25:11,500
>> No és que molt diferents.

519
00:25:11,500 --> 00:25:12,900
Encara que, que té un aspecte molt estrany.

520
00:25:12,900 --> 00:25:17,220
I això pot ser, més o menys, un escull
apuntar per a un munt de gent.

521
00:25:17,220 --> 00:25:21,460
>> MIKE RIZZO: Així que de manera similar, si volíem
per seleccionar un element que té un ID,

522
00:25:21,460 --> 00:25:23,470
Ara volem seleccionar per
ID en lloc de la classe.

523
00:25:23,470 --> 00:25:28,080
Seria una cosa similar en el qual
acaba de fer el signe de sostingut per ID.

524
00:25:28,080 --> 00:25:33,576
Així que estem seleccionant aquí tot
elements que tenen bar ID.

525
00:25:33,576 --> 00:25:35,400
>> TOMAS Reimers: I això s'estén.

526
00:25:35,400 --> 00:25:36,450
Això CSS s'estén.

527
00:25:36,450 --> 00:25:42,260
Igual que en el CSS, es pot seleccionar tot
enllaços, que tenen la classe foo.

528
00:25:42,260 --> 00:25:43,420
Aquí, és la mateixa cosa.

529
00:25:43,420 --> 00:25:52,750
>> Vostè podria fer a.foo, que seleccionaria
tots els vincles amb la classe Foo.

530
00:25:52,750 --> 00:25:58,860
Vostè podria fer una barra afilada, el que faria
seleccioneu l'enllaç amb la barra d'identificació i així

531
00:25:58,860 --> 00:25:59,770
successivament i així successivament.

532
00:25:59,770 --> 00:26:02,120
Qualsevol selector CSS és una vàlida
selector de jQuery.

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

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

535
00:26:07,996 --> 00:26:11,460
OK, així que ara entrarem en una mica
de manipulació que podem fer amb

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

537
00:26:12,870 --> 00:26:19,280
Així que jQuery té un tipus particular
de notació en el qual només utilitzem

538
00:26:19,280 --> 00:26:20,170
un punt al final.

539
00:26:20,170 --> 00:26:23,340
I vostè pot pensar en això com en
C com teníem diferents estructures.

540
00:26:23,340 --> 00:26:27,110
I per entrar en aquestes estructures, ho faria
utilitzar un punt per entrar-hi.

541
00:26:27,110 --> 00:26:28,480
>> És a dir, una cosa així, una cosa similar.

542
00:26:28,480 --> 00:26:33,570
Només que ara tenim funcions dins d'aquest
selector que podem recórrer-hi.

543
00:26:33,570 --> 00:26:38,640
Així que aquí, el primer exemple
es pot veure és un selector CSS.

544
00:26:38,640 --> 00:26:45,290
I, bàsicament, el que fa és
s'aplica el primer element CSS per a aquest

545
00:26:45,290 --> 00:26:46,230
cosa que ha seleccionat -

546
00:26:46,230 --> 00:26:47,720
aquest element que ha seleccionat -

547
00:26:47,720 --> 00:26:49,290
amb el valor que.

548
00:26:49,290 --> 00:26:55,390
>> TOMAS Reimers: Així que una traducció fàcil de
això seria si jQuery, bàsicament,

549
00:26:55,390 --> 00:26:57,790
acaba de prendre foo.

550
00:26:57,790 --> 00:27:05,480
I després, en CSS, va dir,
el vermell i tancar.

551
00:27:05,480 --> 00:27:06,670
És la mateixa idea.

552
00:27:06,670 --> 00:27:08,800
El que es fa és que està seleccionat
tots els elements Foo.

553
00:27:08,800 --> 00:27:10,170
I llavors s'aplica.

554
00:27:10,170 --> 00:27:15,884
Més o menys, el color de propietat
és igual a vermell.

555
00:27:15,884 --> 00:27:21,070
>> MIKE RIZZO: De la mateixa manera, també podem alterar
el contingut real del que és

556
00:27:21,070 --> 00:27:24,870
que mostra en el codi HTML de la pàgina, que
és realment genial, perquè significa que el seu

557
00:27:24,870 --> 00:27:28,095
pàgines web ara poden ser completament dinàmic
i no han de ser estàtica

558
00:27:28,095 --> 00:27:31,660
que imprimeixi usant PHP
en el començament de

559
00:27:31,660 --> 00:27:33,320
La pàgina s'està carregant.

560
00:27:33,320 --> 00:27:36,810
Així que aquí, si volguéssim canviar la
HTML real de la pàgina, ho faríem ara

561
00:27:36,810 --> 00:27:43,550
cridar a la funció HTML, el qual només
inserits el que especifiquem a

562
00:27:43,550 --> 00:27:45,390
aquest element que hem seleccionat.

563
00:27:45,390 --> 00:27:49,810
Així que aquí estem seleccionant element amb
foo classe i després dient que és HTML

564
00:27:49,810 --> 00:27:52,200
ara és hola món.

565
00:27:52,200 --> 00:27:55,600
>> TOMAS Reimers: I quan es pensa en
Quines són les aplicacions útils de

566
00:27:55,600 --> 00:28:00,800
això, això CSS un, el primer que
vostè pot començar a pensar és

567
00:28:00,800 --> 00:28:03,070
fins i tot en termes de menús desplegables.

568
00:28:03,070 --> 00:28:08,350
Vostè podria començar a fer coses com, quan
un usuari es desplaça sobre la part superior

569
00:28:08,350 --> 00:28:11,970
of a down drop, vols fer
la part inferior visible.

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

571
00:28:12,540 --> 00:28:15,610
>> Així que en CSS, tenim propietats
per fer alguna cosa visible.

572
00:28:15,610 --> 00:28:19,330
Coses com la pantalla de còlon cap
faria invisible.

573
00:28:19,330 --> 00:28:21,190
Bloc de visualització faria visible.

574
00:28:21,190 --> 00:28:25,860
O fins i tot si vols anar més simple, que
tenir coses com iguals visibilitat

575
00:28:25,860 --> 00:28:27,520
visibles, i la visibilitat és igual ocult.

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

577
00:28:30,330 --> 00:28:34,780
>> I es podria començar a aplicar les coses
com desplegable dreta menús

578
00:28:34,780 --> 00:28:38,410
després de passar per la idea de com
podeu imaginar quan aquest s'obri,

579
00:28:38,410 --> 00:28:39,850
que sortirem de manera molt breu.

580
00:28:39,850 --> 00:28:42,160
Però podem començar a veure
aplicacions d'aquest.

581
00:28:42,160 --> 00:28:45,540
En un sentit similar, si anés a tractar
i posar en pràctica, diguem, una xerrada

582
00:28:45,540 --> 00:28:48,620
motor i vol fer una mica de
bombolla de diàleg sempre que vostè has

583
00:28:48,620 --> 00:28:52,880
té un nou missatge, una vegada que el
nou missatge, vostè pot fer una mica de

584
00:28:52,880 --> 00:28:55,890
bombolla de diàleg apareixerà de manera alterar
el codi HTML de la pàgina, a la dreta?

585
00:28:55,890 --> 00:29:00,540
Afegint que la bombolla del discurs addicional
amb el text addicional en aquest país.

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

587
00:29:01,140 --> 00:29:07,750
>> AUDIÈNCIA: Així que vostè integrar això dins
el codi HTML, en una mena

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

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

590
00:29:12,940 --> 00:29:16,190
Sí, anem a arribar a això
aquí a una estona.

591
00:29:16,190 --> 00:29:18,810
Sí, és una semblança
poc a PHP.

592
00:29:18,810 --> 00:29:21,240
No és exactament similar.

593
00:29:21,240 --> 00:29:24,730
>> Una bona distinció de fer és el que aquest
en realitat està editant quan editem

594
00:29:24,730 --> 00:29:28,480
la pàgina, ja que no serà
editant el fitxer real que

595
00:29:28,480 --> 00:29:31,380
guardat al servidor perquè el món
no haurien de tenir permís

596
00:29:31,380 --> 00:29:32,610
per editar els seus arxius.

597
00:29:32,610 --> 00:29:36,080
Això és només editant el que està en la pàgina
i el que es mostra en

598
00:29:36,080 --> 00:29:36,950
el navegador.

599
00:29:36,950 --> 00:29:40,340
Així que si anés a tornar a carregar la pàgina després,
dir, l'eliminació d'alguna cosa com el

600
00:29:40,340 --> 00:29:44,730
veiem que podem fer amb l'anomenada remove,
això seria tornar a aparèixer.

601
00:29:44,730 --> 00:29:48,590
>> TOMAS Reimers: Així que una manera de pensar en
això és si jo sóc el teu ordinador i

602
00:29:48,590 --> 00:29:50,170
Mike és, més o menys, el servidor.

603
00:29:50,170 --> 00:29:53,850
Què passarà és que vaig a
Pregunta als Mike, escolta, puc tenir una còpia de

604
00:29:53,850 --> 00:29:54,630
aquesta pàgina web?

605
00:29:54,630 --> 00:29:56,190
I ell em donarà una còpia.

606
00:29:56,190 --> 00:29:57,430
>> No, no és l'original.

607
00:29:57,430 --> 00:29:58,620
És només una còpia.

608
00:29:58,620 --> 00:30:00,450
I llavors seria com, oh,
hi ha codi JavaScript que hi.

609
00:30:00,450 --> 00:30:02,450
Clarament, hauria editar el
pàgina sigui així.

610
00:30:02,450 --> 00:30:04,250
I estic editant la seva còpia.

611
00:30:04,250 --> 00:30:05,920
>> Però això no efectuar
la còpia real.

612
00:30:05,920 --> 00:30:08,480
I si jo fos a preguntar de nou
actualitzar la pàgina, -

613
00:30:08,480 --> 00:30:10,060
Hey, puc tenir una altra còpia neta -

614
00:30:10,060 --> 00:30:11,440
ell va a donar-me
una altra còpia neta.

615
00:30:11,440 --> 00:30:14,240
I llavors, jo faré el mateix
com, oh, això JS aquí que diu

616
00:30:14,240 --> 00:30:14,866
editar aquest.

617
00:30:14,866 --> 00:30:17,460
I jo seguiré fent això.

618
00:30:17,460 --> 00:30:20,930
>> MIKE RIZZO: Així que una cosa realment fresca
que es pot fer amb jQuery és

619
00:30:20,930 --> 00:30:24,350
realment afegir diferents tipus
d'animacions a la pàgina.

620
00:30:24,350 --> 00:30:27,440
No sé si alguna vegada has vist on
vostè està tractant d'un farciment d'un formulari

621
00:30:27,440 --> 00:30:31,250
en línia i vostè no omple
les coses correctament.

622
00:30:31,250 --> 00:30:33,440
Així que una petita cosa llisca cap avall
a la part superior i li diu

623
00:30:33,440 --> 00:30:34,820
no ho hagin fet això correctament.

624
00:30:34,820 --> 00:30:36,260
Torneu-ho de nou.

625
00:30:36,260 --> 00:30:37,890
I llavors, potser fins i tot només lliscar cap amunt.

626
00:30:37,890 --> 00:30:40,710
>> Resulta que jQuery s'ha construït en funcions
que fan tot això

627
00:30:40,710 --> 00:30:44,180
animació molt, molt fàcil.

628
00:30:44,180 --> 00:30:46,750
Així que no és en primer lloc l'esvaïment
funció, la qual cosa

629
00:30:46,750 --> 00:30:47,710
vostè pot trucar en alguna cosa.

630
00:30:47,710 --> 00:30:55,650
I és una manera de canviar el CSS de
aquest element en forma animada.

631
00:30:55,650 --> 00:30:58,480
Així que pren el que sigui element
l'anomeneu fade out successivament.

632
00:30:58,480 --> 00:31:03,990
I després, canvia lentament de l'opacitat
fins que s'apagui completament transparent.

633
00:31:03,990 --> 00:31:07,330
>> TOMAS Reimers: L'altra populars
llisqui cap avall, el que farà

634
00:31:07,330 --> 00:31:08,800
alguna cosa sembla lliscar cap avall.

635
00:31:08,800 --> 00:31:12,840
Així que en el cas del menú desplegable,
de nou, quan ens assabentem de la manera de detectar

636
00:31:12,840 --> 00:31:15,310
quan aquest s'ha mantingut per sobre,
vostè podria dir-li a aquest fons

637
00:31:15,310 --> 00:31:16,910
part llisqui cap avall ara.

638
00:31:16,910 --> 00:31:19,270
I llavors, sembla
lliscant cap avall.

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

640
00:31:22,042 --> 00:31:26,590
>> MIKE RIZZO: I llavors, si només tens
algun tipus d'animació en compte que

641
00:31:26,590 --> 00:31:29,080
jQuery no necessàriament proporcionen.

642
00:31:29,080 --> 00:31:32,690
Per exemple, diguem que jQuery
màquina li ofereix un tobogan

643
00:31:32,690 --> 00:31:33,750
cap avall i feu lliscar cap amunt.

644
00:31:33,750 --> 00:31:36,740
Bé, anem a dir que volia lliscar
alguna cosa per l'esquerra o des

645
00:31:36,740 --> 00:31:39,880
el tipus correcte de com el CS50
pàgina principal fa cada vegada

646
00:31:39,880 --> 00:31:42,080
vostè va a un nou panell.

647
00:31:42,080 --> 00:31:45,030
A continuació, probablement haurà de
aplicar per si mateix utilitzant la

648
00:31:45,030 --> 00:31:49,310
animar funció dins de jQuery.

649
00:31:49,310 --> 00:31:51,350
>> Així que de manera similar, que acaba d'animar.

650
00:31:51,350 --> 00:31:55,850
I després, dins d'ella que es necessita un
Diccionari dels diferents valors

651
00:31:55,850 --> 00:31:57,340
que se suposa que has de passar.

652
00:31:57,340 --> 00:32:06,960
Així que aquí, si volguéssim animar l'
element foo de tal manera que la seva amplada sigui

653
00:32:06,960 --> 00:32:10,880
s'expandeix o contreu a 80 píxels;
depenent del que actualment és.

654
00:32:10,880 --> 00:32:14,100
Ens acaba de passar que, com
l'argument en el seu interior.

655
00:32:14,100 --> 00:32:18,060
>> Animar també tenen alguns altres arguments
que vostè podria passar, per exemple,

656
00:32:18,060 --> 00:32:21,150
la velocitat de l'animació
que vols donar-li.

657
00:32:21,150 --> 00:32:26,220
I per fer això, jo només diria
ràpidament Google jQuery animat.

658
00:32:26,220 --> 00:32:31,710
I després, la criança d'aquesta pàgina, vostè pot
veure que té un munt de diferents

659
00:32:31,710 --> 00:32:33,560
propietats que pot aprovar-lo.

660
00:32:33,560 --> 00:32:35,990
>> I us animo - cada vegada que vénen
amb alguna cosa que no ho fa

661
00:32:35,990 --> 00:32:40,390
saber o simplement vol aprendre més sobre una
mètode particular que pot trucar

662
00:32:40,390 --> 00:32:41,270
en alguna cosa -

663
00:32:41,270 --> 00:32:44,440
Només Google. jQuery és extremadament
ben documentat.

664
00:32:44,440 --> 00:32:49,140
I moltes vegades hi ha una gran quantitat de
exemples que es proporcionen per a vostè.

665
00:32:49,140 --> 00:32:52,470
Si ens desplacem cap avall -

666
00:32:52,470 --> 00:32:53,720
fins a baix -

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

668
00:32:57,660 --> 00:32:59,190
que podem utilitzar, també.

669
00:32:59,190 --> 00:33:02,480
>> Un cop més, quan un desenvolupador es va en realitat
per la molèstia d'escriure un

670
00:33:02,480 --> 00:33:05,810
biblioteca, en general volen
algú a usar-lo.

671
00:33:05,810 --> 00:33:09,400
Per això, al costat va a
ser una documentació.

672
00:33:09,400 --> 00:33:12,270
I que la documentació que generalment pot ser
que es troba a la pàgina del projecte, que és

673
00:33:12,270 --> 00:33:14,970
per això li vam donar aquest lloc original en
el principi, el que es vincula a la

674
00:33:14,970 --> 00:33:18,080
pàgines del projecte perquè pugui
veure que la documentació.

675
00:33:18,080 --> 00:33:22,670
>> Normalment, la pàgina del projecte en el cas
de [inaudible], va dir a la

676
00:33:22,670 --> 00:33:23,940
noms de les classes.

677
00:33:23,940 --> 00:33:27,250
En el cas de JavaScript, que dóna
que el nom de les funcions.

678
00:33:27,250 --> 00:33:35,310
Per cert, si ens desplacem fins al cim,
una nota lateral ràpida a les funcions és

679
00:33:35,310 --> 00:33:39,080
cada vegada que vegi una funció implementada
així amb el disc

680
00:33:39,080 --> 00:33:43,800
parèntesi en el medi, el que significa
que aquesta propietat és opcional.

681
00:33:43,800 --> 00:33:44,750
Només un mà a mà.

682
00:33:44,750 --> 00:33:47,350
He vist un munt de preguntes
sobre això.

683
00:33:47,350 --> 00:33:50,370
>> Així que aquí podem veure que la
animate té propietats

684
00:33:50,370 --> 00:33:51,800
com un argument necessari.

685
00:33:51,800 --> 00:33:54,870
I tota la resta és opcional.

686
00:33:54,870 --> 00:33:56,136
Nota al marge -

687
00:33:56,136 --> 00:33:58,090
vostè pot pensar en això, més o menys
de, igual que les pàgines de manual.

688
00:33:58,090 --> 00:34:04,275
Les pàgines man són de documentació per a C i
per a un munt d'altres coses, també.

689
00:34:04,275 --> 00:34:11,020
>> MIKE RIZZO: Així que hem après a
canviar divers CSS a la pàgina,

690
00:34:11,020 --> 00:34:14,040
animar, i retiri afegir HTML.

691
00:34:14,040 --> 00:34:16,889
Però un dels realment més poderosa
coses sobre JavaScript

692
00:34:16,889 --> 00:34:18,270
i especialment jQuery -

693
00:34:18,270 --> 00:34:22,570
el que li permet fer és respondre a
diferents elements que succeeixen.

694
00:34:22,570 --> 00:34:25,380
Per exemple, aquí tenim
un controlador d'esdeveniments.

695
00:34:25,380 --> 00:34:28,210
I això només vol dir que cada vegada que això
esdeveniment ocorre, el fem servir en un

696
00:34:28,210 --> 00:34:29,280
de certa manera.

697
00:34:29,280 --> 00:34:35,159
>> Així que aquí, l'esdeveniment genèric jQuery
handler és el punt en.

698
00:34:35,159 --> 00:34:42,949
I llavors, el primer que sempre
és quin esdeveniment hauria

699
00:34:42,949 --> 00:34:43,810
estar escoltant.

700
00:34:43,810 --> 00:34:45,610
Així que aquí, és el clic que
que estem esperant.

701
00:34:45,610 --> 00:34:49,250
>> TOMAS Reimers: Alternativament, vostè té
en vol estacionari, el qual és molt popular.

702
00:34:49,250 --> 00:34:52,000
Així que de tornada al meu desplegables idea menú.

703
00:34:52,000 --> 00:34:54,239
Vostè tindria el de dalt en vol estacionari.

704
00:34:54,239 --> 00:34:56,096
I llavors vostè podria canviar això.

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

706
00:34:56,830 --> 00:35:01,680
I llavors, quan això passa, només
executa aquesta funció que li donem

707
00:35:01,680 --> 00:35:05,080
com a argument i que
alerta hola o hola.

708
00:35:05,080 --> 00:35:08,900
>> TOMAS Reimers: Així que en el cas de
JavaScript, aquest és un lloc que hem de

709
00:35:08,900 --> 00:35:12,970
deslligar de C. Podem realment
prendre funcions com a arguments.

710
00:35:12,970 --> 00:35:15,940
I hi ha un munt de molt
complexes formes de fer això.

711
00:35:15,940 --> 00:35:17,940
Anem a promoure d'una manera,
que és es pot definir el

712
00:35:17,940 --> 00:35:19,270
funcionar allà.

713
00:35:19,270 --> 00:35:22,540
>> Així que quan vostè està demanant una funció com
un paràmetre, ets bàsicament

714
00:35:22,540 --> 00:35:24,500
definirà la funció
a l'acte.

715
00:35:24,500 --> 00:35:27,090
I la manera de definir una funció
en JavaScript que és

716
00:35:27,090 --> 00:35:28,820
literalment dir funció.

717
00:35:28,820 --> 00:35:30,130
Llavors, en general, el nom
de la funció.

718
00:35:30,130 --> 00:35:32,510
Però mai farem referència a
aquesta funció de nou.

719
00:35:32,510 --> 00:35:34,040
Així que ho deixem sense nom.

720
00:35:34,040 --> 00:35:40,440
>> A continuació, els parèntesis, a continuació, l'arrissat
claus, i després el codi dins d'aquesta.

721
00:35:40,440 --> 00:35:42,540
Així entenem aquesta llauna
ser una mica confús.

722
00:35:42,540 --> 00:35:45,180
Així que li donem la forma general d'
el que és un controlador d'esdeveniments sembla

723
00:35:45,180 --> 00:35:47,790
a continuació, que es troba en els esdeveniments.

724
00:35:47,790 --> 00:35:50,598
I llavors, el codi dins d'això.

725
00:35:50,598 --> 00:35:52,478
>> MIKE RIZZO: Hi ha alguna
preguntes sobre això?

726
00:35:52,478 --> 00:35:54,818
Això pot ser una mica confús
la primera vegada que ho veig.

727
00:35:54,818 --> 00:35:57,550
>> TOMAS Reimers: Segur que vol
obrir un arxiu i mostrar alguns

728
00:35:57,550 --> 00:35:58,155
jQuery en aquest moment?

729
00:35:58,155 --> 00:35:59,853
>> MIKE RIZZO: Sí, farem això.

730
00:35:59,853 --> 00:36:00,256
D'acord.

731
00:36:00,256 --> 00:36:02,490
>> TOMAS Reimers: Així que ara estem
en l'aparell.

732
00:36:02,490 --> 00:36:07,730
I el que hem fet és que hem pres la
la llibertat de crear alhora un index.html

733
00:36:07,730 --> 00:36:10,100
arxiu, que enllaça amb
un arxiu JavaScript.

734
00:36:10,100 --> 00:36:12,880
I podem obrir el -

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

736
00:36:15,170 --> 00:36:16,630
Bé, fa dues coses.

737
00:36:16,630 --> 00:36:18,350
>> La primera és que es vincula a
l'arxiu JavaScript.

738
00:36:18,350 --> 00:36:21,250
I veurem que fins aquí.

739
00:36:21,250 --> 00:36:25,340
Veiem que al cap de la
Document HTML, en particular.

740
00:36:25,340 --> 00:36:28,260
Llavors veuràs que cal
que, bàsicament, diem SRC,

741
00:36:28,260 --> 00:36:29,590
que significa font.

742
00:36:29,590 --> 00:36:30,630
I aquesta és l'adreça URL.

743
00:36:30,630 --> 00:36:32,700
>> Així que aquí es pot dir que hem
inclòs jQuery.

744
00:36:32,700 --> 00:36:34,290
I també hem inclòs scripts.

745
00:36:34,290 --> 00:36:40,630
L'altra manera d'incloure JavaScript està
que pot incloure un script en línia

746
00:36:40,630 --> 00:36:44,600
tag que tenim a la part inferior on es
diu tipus de guió és el text de JavaScript.

747
00:36:44,600 --> 00:36:46,960
>> Així que estem dient, escolta, estem
a punt d'incloure un script.

748
00:36:46,960 --> 00:36:51,890
I el tipus d'aquest guió és
JavaScript, que és un tipus de text.

749
00:36:51,890 --> 00:36:52,550
Molt simple.

750
00:36:52,550 --> 00:36:56,490
>> MIKE RIZZO: Així que això, una mica, arriba a
seva pregunta sobre com incloem

751
00:36:56,490 --> 00:37:02,340
JavaScript als nostres arxius, perquè quan ens
havia PHP, farem alguna cosa com això.

752
00:37:02,340 --> 00:37:07,570
I després, tenim les nostres funcions de PHP -
diguem que les poblacions fan

753
00:37:07,570 --> 00:37:09,150
alguna cosa amb que -

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

755
00:37:10,490 --> 00:37:13,860
No obstant això, ara tenim les etiquetes de script
que nosaltres li donem, que en realitat són

756
00:37:13,860 --> 00:37:19,470
part del propi HTML, perquè no és
fingint ser un fitxer HTML com si

757
00:37:19,470 --> 00:37:25,070
és en PHP, perquè si intenta anar a
i mirar la font de la pàgina,

758
00:37:25,070 --> 00:37:28,430
veuràs aquestes etiquetes script en allà
amb el JavaScript associat amb

759
00:37:28,430 --> 00:37:29,800
en què.

760
00:37:29,800 --> 00:37:31,760
>> Així que, si volíem
escriure alguna cosa de JavaScript -

761
00:37:31,760 --> 00:37:37,110
diguem que volíem canviar el cos
perquè en aquest moment no tinc

762
00:37:37,110 --> 00:37:40,020
qualssevol altres etiquetes que realment puc
modifica més de cos.

763
00:37:40,020 --> 00:37:42,450
Diguem que volia
canviar el CSS d'això.

764
00:37:42,450 --> 00:37:46,190
Així que seguirem endavant i el canvi
el color de la mateixa a vermell.

765
00:37:46,190 --> 00:37:47,380
>> Així que guardi l'arxiu.

766
00:37:47,380 --> 00:37:52,700
Tornem a la nostra pàgina web, actualitzar,
i ho fa de forma automàtica

767
00:37:52,700 --> 00:37:55,920
ja que no semblava que esperava
en absolut, perquè nosaltres no estàvem escoltant

768
00:37:55,920 --> 00:37:59,450
per a un esdeveniment o alguna cosa per l'estil.

769
00:37:59,450 --> 00:38:02,800
>> TOMAS Reimers: Llavors, si ens remuntem a aquest
presentar, en particular, - el codi HTML

770
00:38:02,800 --> 00:38:04,710
Arxiu - el que vas
veure és que tenim -

771
00:38:04,710 --> 00:38:06,810
recordeu que aquest es carrega,
més o menys, cronològicament.

772
00:38:06,810 --> 00:38:09,910
Així que tenim per primera vegada el cap.
que carrega els dos arxius.

773
00:38:09,910 --> 00:38:10,800
Després ens dirigim al cos.

774
00:38:10,800 --> 00:38:11,640
I veiem hola món.

775
00:38:11,640 --> 00:38:13,030
Així que prestem hola món.

776
00:38:13,030 --> 00:38:15,240
>> I llavors l'últim que tenim
és que tenim l'etiqueta script.

777
00:38:15,240 --> 00:38:20,880
Així s'executa l'etiqueta script perquè és
si l'oculta d'esperar per a res.

778
00:38:20,880 --> 00:38:24,700
I això és el més bàsic
forma d'executar JavaScript.

779
00:38:24,700 --> 00:38:29,200
>> Dit això, es pot posar el guió
etiqueta a la capçalera només

780
00:38:29,200 --> 00:38:31,240
per demostrar aquest punt?

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

782
00:38:34,450 --> 00:38:35,700
I corre això.

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

784
00:38:38,880 --> 00:38:41,070
Anem a notar que
no va canviar el color.

785
00:38:41,070 --> 00:38:44,210
I aquest és un dels problemes de
JavaScript és que les coses es carreguen

786
00:38:44,210 --> 00:38:45,930
en un ordre cronològic.

787
00:38:45,930 --> 00:38:49,750
>> Així en el moment que aquest codi
estava corrent, seleccionem -

788
00:38:49,750 --> 00:38:52,530
tornar -

789
00:38:52,530 --> 00:38:53,670
l'etiqueta body.

790
00:38:53,670 --> 00:38:57,560
El cos de l'etiqueta no existeix encara, perquè
JavaScript està d'acord amb HTML.

791
00:38:57,560 --> 00:39:01,790
Així que el navegador és com selecte cos.

792
00:39:01,790 --> 00:39:02,760
Hi ha però, no hi ha tal cosa.

793
00:39:02,760 --> 00:39:03,600
Així que podem ignorar això.

794
00:39:03,600 --> 00:39:05,330
I seguim endavant.

795
00:39:05,330 --> 00:39:07,200
>> I a continuació, es defineix una etiqueta body.

796
00:39:07,200 --> 00:39:09,670
Però això mai s'actualitza.

797
00:39:09,670 --> 00:39:12,560
Així que quan l'aplicació de l'escriptura
etiquetes, assegureu-vos de col · locar

798
00:39:12,560 --> 00:39:15,502
després que el cos de l'etiqueta.

799
00:39:15,502 --> 00:39:16,820
Següent diapositiva.

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

801
00:39:17,830 --> 00:39:19,330
Així que canviem alguna cosa.

802
00:39:19,330 --> 00:39:21,910
Però no sembla que va respondre a
nosaltres en absolut, perquè només una mica

803
00:39:21,910 --> 00:39:24,150
ho va fer tan aviat com es carrega la pàgina.

804
00:39:24,150 --> 00:39:27,700
Així que ara, en comptes de fer això, per què
No afegim un controlador d'esdeveniments.

805
00:39:27,700 --> 00:39:31,020
>> Així que anem a fer alguna cosa
per al cos de nou.

806
00:39:31,020 --> 00:39:33,490
I diguem que ho fem en -

807
00:39:33,490 --> 00:39:34,500
premeu.

808
00:39:34,500 --> 00:39:35,750
Anem a afegir una funció.

809
00:39:35,750 --> 00:39:38,270

810
00:39:38,270 --> 00:39:39,690
>> Canvi Anem: TOMAS Reimers
el seu color a vermell una altra vegada.

811
00:39:39,690 --> 00:39:40,000
Per què no?

812
00:39:40,000 --> 00:39:41,680
>> MIKE RIZZO: Sí, canviarem
el seu "color a vermell una altra vegada.

813
00:39:41,680 --> 00:39:46,310

814
00:39:46,310 --> 00:39:46,900
Està bé.

815
00:39:46,900 --> 00:39:48,480
Així que anem a carregar la pàgina.

816
00:39:48,480 --> 00:39:49,530
Bé, ens veiem -

817
00:39:49,530 --> 00:39:52,290
com s'esperava, no s'encén de color vermell encara.

818
00:39:52,290 --> 00:39:53,610
Però llavors podem seguir endavant i feu clic.

819
00:39:53,610 --> 00:39:54,270
>> TOMAS Reimers: I no tornarà de color vermell.

820
00:39:54,270 --> 00:39:56,090
>> MIKE RIZZO: I ho fa
tornarà de color vermell com s'esperava.

821
00:39:56,090 --> 00:39:59,010
>> TOMAS Reimers: I podem veure com
podem començar a construir molt bàsic

822
00:39:59,010 --> 00:40:00,170
interacció.

823
00:40:00,170 --> 00:40:03,850
Altres coses que pot voler fer és,
si no volem que el cos

824
00:40:03,850 --> 00:40:07,230
el vermell, farem el codi HTML
fons de color vermell.

825
00:40:07,230 --> 00:40:08,480
Just el que és el mateix CSS.

826
00:40:08,480 --> 00:40:19,960

827
00:40:19,960 --> 00:40:23,320
>> I quan ho canviem, podem veure aquesta
efecte molt dramàtic de canviar el

828
00:40:23,320 --> 00:40:25,510
pàgina sencera.

829
00:40:25,510 --> 00:40:29,100
Així que de nou, si vostè està implementant coses,
vostè pot tenir un component

830
00:40:29,100 --> 00:40:30,150
que està destinat a ser fet clic a.

831
00:40:30,150 --> 00:40:32,710
Diguem que un botó Sortir i
tot un altre component,

832
00:40:32,710 --> 00:40:33,830
que està destinat a respondre.

833
00:40:33,830 --> 00:40:35,755
Pel que li tregui una finestra
quan això succeeix.

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
Només com un exemple -

837
00:40:42,200 --> 00:40:44,400
que no arriba a veure això abans -

838
00:40:44,400 --> 00:40:47,500
Només et vaig a mostrar el que sembla
com quan ens amaguem alguna cosa.

839
00:40:47,500 --> 00:40:52,220
Així que vaig a seguir endavant i fer-ho lliscar cap amunt.

840
00:40:52,220 --> 00:40:54,440
>> TOMAS Reimers: Vols embolicar que en un
text de paràgraf abans de fer això?

841
00:40:54,440 --> 00:40:55,132
>> MIKE RIZZO: OK.

842
00:40:55,132 --> 00:40:59,135
Sí, per què no ho fem només per
podem seleccionar una mica més.

843
00:40:59,135 --> 00:41:00,490
>> TOMAS Reimers: I anem a
donar-li una classe.

844
00:41:00,490 --> 00:41:01,740
>> MIKE RIZZO: Si.

845
00:41:01,740 --> 00:41:06,575

846
00:41:06,575 --> 00:41:09,920
OK, així que anem a veure.

847
00:41:09,920 --> 00:41:14,820
En lloc de seleccionar el cos real
ara, només vaig a seleccionar tot amb

848
00:41:14,820 --> 00:41:18,780
classe hola, que aquí estem
només hi ha una cosa.

849
00:41:18,780 --> 00:41:20,900
Així que no hauríem haver de
preocupar-se per això.

850
00:41:20,900 --> 00:41:23,080
>> Així que vaig a actualitzar-lo.

851
00:41:23,080 --> 00:41:24,230
Vaig a seguir endavant i feu clic.

852
00:41:24,230 --> 00:41:27,890
I, més o menys, va fer una diapositiva estrany
cosa, que no semblava que

853
00:41:27,890 --> 00:41:29,580
atractiu.

854
00:41:29,580 --> 00:41:31,060
En general, es veuen bastant bé.

855
00:41:31,060 --> 00:41:32,720
Suposo, això - per alguna
raó - no ho va fer.

856
00:41:32,720 --> 00:41:36,640
Vaig a fer un fos de sortida de manera
es pot veure en això també.

857
00:41:36,640 --> 00:41:38,100
Molt millor.

858
00:41:38,100 --> 00:41:41,150
>> I després, si obro el JavaScript
consolem de nou i volem veure el que

859
00:41:41,150 --> 00:41:43,900
sembla que quan ens vam caure polz

860
00:41:43,900 --> 00:41:46,920
Ara, només dic esvair-se en l'all.

861
00:41:46,920 --> 00:41:48,830
I s'esvaeix interactiu

862
00:41:48,830 --> 00:41:56,150
>> De la mateixa manera, en realitat podríem passar també
un argument per atenuar o intensificar terme,

863
00:41:56,150 --> 00:41:57,640
que és, una mena de, la velocitat de la mateixa.

864
00:41:57,640 --> 00:42:02,220
Així que seguirem endavant i dir que volem
d'anar a poc a poc s'esvaeixen polz

865
00:42:02,220 --> 00:42:04,250
Així que suposo que encara semblava
bastant ràpid.

866
00:42:04,250 --> 00:42:06,180
Però va ser més lent que abans.

867
00:42:06,180 --> 00:42:10,340
>> TOMAS Reimers: I si vostè vol trobar
Més informació sobre aquestes coses, de nou,

868
00:42:10,340 --> 00:42:13,410
només cal anar a la documentació de jQuery,
que els hem donat, i llegim

869
00:42:13,410 --> 00:42:13,735
a través d'aquests.

870
00:42:13,735 --> 00:42:15,790
Documenten les seves funcions
increïblement bé.

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
Així que suposo que tornarem a això.

874
00:42:21,560 --> 00:42:23,490
I podem parlar de la nostra pàgina passada.

875
00:42:23,490 --> 00:42:24,690
Bé, podem acabar amb Bootstrap.

876
00:42:24,690 --> 00:42:27,140
I després anem a obrir fins
per a algunes preguntes.

877
00:42:27,140 --> 00:42:30,180
I si vostès tenen alguna idea que
vol tractar de tirar cap amunt i veure

878
00:42:30,180 --> 00:42:34,150
si som capaços de posar-les en pràctica amb
JavaScript ràpidament.

879
00:42:34,150 --> 00:42:37,890
>> Així que en realitat ràpidament sobre Som-hi, que
va ser inclòs automàticament a

880
00:42:37,890 --> 00:42:41,700
el seu últim conjunt de problemes a la carpeta CSS
i de fet vinculats al seu

881
00:42:41,700 --> 00:42:43,190
header.php.

882
00:42:43,190 --> 00:42:46,740
Pel que podria haver agregat classes que
es defineixen dins Som-hi a la mateixa.

883
00:42:46,740 --> 00:42:50,490
I hauria llaurat de forma automàtica
aquestes coses en conseqüència.

884
00:42:50,490 --> 00:42:54,550
>> TOMAS Reimers: Així Bootstrap és un molt
cosa màgica desenvolupat pel poble

885
00:42:54,550 --> 00:42:55,340
a Twitter.

886
00:42:55,340 --> 00:42:57,230
I el que havia de fer era -

887
00:42:57,230 --> 00:43:00,740
abans dels llocs web eren realment dur per fer
vegin bé, especialment quan vam tenir

888
00:43:00,740 --> 00:43:02,200
una gran quantitat de components comuns.

889
00:43:02,200 --> 00:43:04,770
Així que un munt de botons al
web es veia igual.

890
00:43:04,770 --> 00:43:08,960
>> Una gran quantitat de camps de text es pot fer per
veuen millor que el text estàndard

891
00:43:08,960 --> 00:43:13,620
camp vostè probablement sap de veritat
webs antigues o molt mal fets

892
00:43:13,620 --> 00:43:18,210
llocs web, que només es veuen com literal
quadres de text sense cap tipus de text

893
00:43:18,210 --> 00:43:21,190
ombra o qualsevol tipus de bon contorn.

894
00:43:21,190 --> 00:43:24,540
Així que el que va fer va ser Bootstrap va dir, bé,
Tenim molts estils comuns.

895
00:43:24,540 --> 00:43:28,210
Per què no fem un conjunt comú de CSS
i un conjunt comú de JavaScript com

896
00:43:28,210 --> 00:43:32,210
així, el que pot dissenyar com està i que
pot donar a la gent coses com caiguda

897
00:43:32,210 --> 00:43:34,610
menús desplegables, el que pot donar a la gent
coses com les maneres.

898
00:43:34,610 --> 00:43:38,580
>> Modal és el que apareix sobre la pàgina
cada vegada que sigui estrictament parlant

899
00:43:38,580 --> 00:43:41,090
alguna cosa, que inhibeix encara més
interacció fins que

900
00:43:41,090 --> 00:43:43,110
interactuar amb ell.

901
00:43:43,110 --> 00:43:45,820
Una cosa com això és, estàs segura
que desitja eliminar aquesta cosa?

902
00:43:45,820 --> 00:43:49,100
Realment no es pot fer res més
fins que diguis sí o no.

903
00:43:49,100 --> 00:43:52,720
>> Li va prendre tot això i empaquetar que
junts i va dir, aquí anem.

904
00:43:52,720 --> 00:43:54,630
Ara la gent pot usar això.

905
00:43:54,630 --> 00:43:56,830
I vostè ho pot trobar a través d'
en getbootstrap.com.

906
00:43:56,830 --> 00:44:00,480
S'inclou automàticament dins
posa el teu últim problema.

907
00:44:00,480 --> 00:44:04,160
I tu ets més que benvingut a
usar-lo en el seu projecte final.

908
00:44:04,160 --> 00:44:06,950
I si vols seguir aquest
enllaç per obtenir Bootstrap.

909
00:44:06,950 --> 00:44:10,590

910
00:44:10,590 --> 00:44:15,700
>> Veuràs aquí és la
Bootstrap lloc CSS.

911
00:44:15,700 --> 00:44:16,860
Veuràs Bootstrap.

912
00:44:16,860 --> 00:44:20,450
I si es desplaça cap avall, veurà
com descarregar, com

913
00:44:20,450 --> 00:44:21,900
instal, et cetera.

914
00:44:21,900 --> 00:44:24,700
>> MIKE RIZZO: I vostè també pot,
curiosament, personalitzar a

915
00:44:24,700 --> 00:44:27,770
ser qualsevol tipus de temes
que desitgi.

916
00:44:27,770 --> 00:44:31,270
Sé que això és una cosa que vaig fer per la meva
projecte final quan vaig prendre la classe

917
00:44:31,270 --> 00:44:32,050
va ser personalitzar-lo.

918
00:44:32,050 --> 00:44:34,540
Una versió diferent de Som-hi que
tenia un esquema de color diferent i

919
00:44:34,540 --> 00:44:36,700
diferents formes d'alguns
coses diferents.

920
00:44:36,700 --> 00:44:38,250
Així que us animo a jugar amb això.

921
00:44:38,250 --> 00:44:39,440
És una mica divertit de fer.

922
00:44:39,440 --> 00:44:43,230
>> TOMAS Reimers: Mirant a través de la part superior
de nou, és molt similar a la Font

923
00:44:43,230 --> 00:44:44,970
Lloc impressionant.

924
00:44:44,970 --> 00:44:47,810
Una gran quantitat de documentació s'iniciarà
pel que sembla similar quan has

925
00:44:47,810 --> 00:44:48,940
vist prou d'ell.

926
00:44:48,940 --> 00:44:51,260
Així que aquí tenim la CSS
component d'aquest.

927
00:44:51,260 --> 00:44:53,540
I veuràs com
pot llaurar coses.

928
00:44:53,540 --> 00:44:56,780
Així que si vostè fa clic en taules, per exemple,
immediatament pot fer un

929
00:44:56,780 --> 00:45:01,710
taula bastant simplement afegint
la taula de classes a la mateixa.

930
00:45:01,710 --> 00:45:03,150
>> Les mateixes coses per als botons.

931
00:45:03,150 --> 00:45:12,140
Si vostè només ha d'afegir BTN classe i BTN
defecte o BTN primària, pot

932
00:45:12,140 --> 00:45:16,240
aconseguir qualsevol d'aquests botons
amb aquests estils pre-fets.

933
00:45:16,240 --> 00:45:18,570
I llavors, si vostè està buscant
una mica més complex que la simple

934
00:45:18,570 --> 00:45:24,100
restyling el w ja tenen, al llarg de
la fitxa JavaScript mitjançant la qual la part superior

935
00:45:24,100 --> 00:45:25,120
tenen un munt de components.

936
00:45:25,120 --> 00:45:30,410
>> Així que aquí tenim transicions, modals,
menús desplegables, tabuladors i la informació sobre eines.

937
00:45:30,410 --> 00:45:35,530
Una informació sobre eines és el que apareix sota del seu
ratolí quan passa alguna cosa.

938
00:45:35,530 --> 00:45:40,280
Popovers, alertes, botons i plegable
acordions és el

939
00:45:40,280 --> 00:45:41,190
en general es diuen.

940
00:45:41,190 --> 00:45:43,045
Carrusels, que flip
a través d'imatges com.

941
00:45:43,045 --> 00:45:52,190

942
00:45:52,190 --> 00:45:54,840
>> Així que aquests són els components
de Som-hi.

943
00:45:54,840 --> 00:45:57,620
Et animaria a
altament anar a buscar en ells.

944
00:45:57,620 --> 00:46:01,780
Hi ha un component JavaScript
i un component de CSS.

945
00:46:01,780 --> 00:46:03,880
Siéntase lliure d'utilitzar ja que li serviran.

946
00:46:03,880 --> 00:46:06,730
No aprofundirem molt en ells
perquè sentim la documentació

947
00:46:06,730 --> 00:46:09,360
està molt ben fet.

948
00:46:09,360 --> 00:46:10,540
I sí.

949
00:46:10,540 --> 00:46:14,500
Té alguna pregunta sobre això?

950
00:46:14,500 --> 00:46:19,430
>> MIKE RIZZO: Així com són realment ràpida
banda, el disseny d'aquesta pàgina web que

951
00:46:19,430 --> 00:46:21,830
ràpidament armem per
aquesta presentació és

952
00:46:21,830 --> 00:46:24,290
realment es fa usant Bootstrap.

953
00:46:24,290 --> 00:46:27,810
Com podeu veure, quan fem clic sobre aquestes
diferents pestanyes, mai en realitat són

954
00:46:27,810 --> 00:46:30,750
sortir d'aquesta pàgina index.html actual.

955
00:46:30,750 --> 00:46:36,400
Així que el que tenim és diferents divs
dins d'aquesta index.html.

956
00:46:36,400 --> 00:46:39,610
I després, cada vegada que feu clic a un diferent
pestanya, és només el canvi de

957
00:46:39,610 --> 00:46:41,590
que mostra d'un.

958
00:46:41,590 --> 00:46:47,390
>> Per tant, en conseqüència els posiciona,
canvia el codi HTML de la pàgina perquè

959
00:46:47,390 --> 00:46:52,330
la fitxa actual està marcada com activa per
apareix de manera diferent i es veu

960
00:46:52,330 --> 00:46:52,820
realment agradable.

961
00:46:52,820 --> 00:46:57,260
>> TOMAS Reimers: Així que això va ser tot fet
sense escriure gairebé qualsevol CSS.

962
00:46:57,260 --> 00:47:01,440
També veiem una capçalera a la part superior,
que els colors són per nosaltres.

963
00:47:01,440 --> 00:47:04,800
Però la veritable posada al
part superior de la pàgina i fer

964
00:47:04,800 --> 00:47:06,660
que rotllo era Bootstrap.

965
00:47:06,660 --> 00:47:09,720
I a continuació, fins i tot per a una altra biblioteca - aquesta
no és un que hem parlat, però un

966
00:47:09,720 --> 00:47:11,580
vostè pot buscar a Google si vols.

967
00:47:11,580 --> 00:47:15,130
Això es diu prettify.js.

968
00:47:15,130 --> 00:47:20,650
I serà sintaxi ressaltar el seu codi
per a vostè, utilitzant tant CSS i JavaScript.

969
00:47:20,650 --> 00:47:23,480

970
00:47:23,480 --> 00:47:27,070
>> L'última cosa que volem parlar de
abans de divulgar de sortir a la

971
00:47:27,070 --> 00:47:30,620
món a mirar les biblioteques d'esbrinar
com usar-los i, amb sort,

972
00:47:30,620 --> 00:47:34,640
llegir la documentació i trobar el que
necessitat és com trobar biblioteques.

973
00:47:34,640 --> 00:47:37,000
Així que la primera és només som
va a empènyer Google.

974
00:47:37,000 --> 00:47:37,810
Anar Google.

975
00:47:37,810 --> 00:47:41,150
>> Això és, literalment, el que fem quan ens
hagi de fer alguna cosa que és Google.

976
00:47:41,150 --> 00:47:44,730
Existeix una biblioteca de JavaScript que
em permet manipular el temps en un

977
00:47:44,730 --> 00:47:45,400
manera útil?

978
00:47:45,400 --> 00:47:49,510
Així que si jo sé que algun usuari que cregui
un compte aquí, i aquest és el

979
00:47:49,510 --> 00:47:53,010
hora actual, com puc calcular el
diferència amb què sense haver de

980
00:47:53,010 --> 00:47:55,020
calcular jo mateix?

981
00:47:55,020 --> 00:47:59,630
Així que això és realment una cosa comuna,
JavaScript biblioteca temps.

982
00:47:59,630 --> 00:48:02,440
I aquí Moment.js--
el més popular.

983
00:48:02,440 --> 00:48:06,530
>> Si necessitem una biblioteca per manipular
cosa així com el color per poder

984
00:48:06,530 --> 00:48:08,650
generar un munt de colors a l'atzar -

985
00:48:08,650 --> 00:48:10,660
possiblement, per generar una
estil o alguna cosa -

986
00:48:10,660 --> 00:48:13,480
podríem buscar a Google una mena
JavaScript biblioteca de colors.

987
00:48:13,480 --> 00:48:15,620
I estic segur que hi hauria una finestra amb
un mil i un.

988
00:48:15,620 --> 00:48:18,290

989
00:48:18,290 --> 00:48:21,410
El convidem a llegir a través d'ells.

990
00:48:21,410 --> 00:48:24,610
>> Així que la majoria de les coses - quan vostè els troba -
van ser allotjat en un dels

991
00:48:24,610 --> 00:48:25,920
llocs que codifiquen host.

992
00:48:25,920 --> 00:48:26,960
Són alguns dels més populars.

993
00:48:26,960 --> 00:48:30,870
El més popular, per
ara, és github.com.

994
00:48:30,870 --> 00:48:35,300
I si vas a GitHub en realitat és
on va ser acollit Normalitzar.

995
00:48:35,300 --> 00:48:36,950
Així que si vol tornar a aquesta.

996
00:48:36,950 --> 00:48:38,135
Ensenya que.

997
00:48:38,135 --> 00:48:40,516
>> MIKE RIZZO: I això és en realitat on
aquesta es troba allotjat també, si et vas adonar.

998
00:48:40,516 --> 00:48:41,000
>> TOMAS Reimers: Si.

999
00:48:41,000 --> 00:48:49,078
Així que si vas a Normalitzar
i anar a la GitHub.

1000
00:48:49,078 --> 00:48:51,936
Eren és això?

1001
00:48:51,936 --> 00:48:54,620
>> MIKE RIZZO: Aquesta coseta gat
és el símbol de GitHub.

1002
00:48:54,620 --> 00:48:56,330
>> TOMAS Reimers: Oh.

1003
00:48:56,330 --> 00:49:02,180
Així GitHub utilitza un mètode anomenat
Git al codi de botiga.

1004
00:49:02,180 --> 00:49:05,150
És que vostè no sap el que és o
que t'espanta, això està bé.

1005
00:49:05,150 --> 00:49:16,100
No ha de saber què és Git
perquè GitHub té un botó de descàrrega

1006
00:49:16,100 --> 00:49:17,200
a la part inferior dreta.

1007
00:49:17,200 --> 00:49:21,350
>> L'altra cosa útil saber
sobre GitHub és la majoria dels productes

1008
00:49:21,350 --> 00:49:23,200
tindrà un em llegeixen.

1009
00:49:23,200 --> 00:49:25,400
I si no tenen un lloc web, l'
llegeixo em vaig a parlar sobre com es

1010
00:49:25,400 --> 00:49:28,310
instal, com ho fa servir, el que
fa, et cetera, et cetera, et cetera.

1011
00:49:28,310 --> 00:49:31,033
El que bàsicament hem estat
caminar a través.

1012
00:49:31,033 --> 00:49:32,326
>> MIKE RIZZO: deixar de fumar d'Internet.

1013
00:49:32,326 --> 00:49:34,020
>> TOMAS Reimers: Això està bé.

1014
00:49:34,020 --> 00:49:36,980
Les dues últimes coses que volíem
per parlar de -

1015
00:49:36,980 --> 00:49:38,750
hem parlat de Git -

1016
00:49:38,750 --> 00:49:40,290
és la solució de problemes.

1017
00:49:40,290 --> 00:49:43,020
I aquest no és tan rellevant per a la
el producte final, ja que és

1018
00:49:43,020 --> 00:49:44,870
quan surti de 50.

1019
00:49:44,870 --> 00:49:48,310
I quan et trobes amb productes
la implementació de biblioteques o l'aplicació de

1020
00:49:48,310 --> 00:49:50,230
el seu propi projecte, vas
tenir preguntes o estàs

1021
00:49:50,230 --> 00:49:51,660
anar a buscar a les preguntes.

1022
00:49:51,660 --> 00:49:53,060
>> Una vegada més, buscar a Google.

1023
00:49:53,060 --> 00:49:54,630
Això és, literalment, el que fem.

1024
00:49:54,630 --> 00:49:56,400
Això va a sonar ximple.

1025
00:49:56,400 --> 00:49:58,310
Però, literalment, que Google.

1026
00:49:58,310 --> 00:50:01,810
I de nou, una de les primeres coses
en general, es troba que és

1027
00:50:01,810 --> 00:50:06,550
stackoverflow.com, que és una meravella
preguntes i respostes a la vista.

1028
00:50:06,550 --> 00:50:10,530
>> És meravellós, tant perquè es pot
Publicació de les preguntes i cercar

1029
00:50:10,530 --> 00:50:12,760
respostes sinó també perquè
que ja té una gran quantitat de

1030
00:50:12,760 --> 00:50:14,590
contingut ja es troba completa allà.

1031
00:50:14,590 --> 00:50:18,510
Així que en general quan es busca a Google una programació
qüestió en el primer

1032
00:50:18,510 --> 00:50:22,620
parella colpeja és possible que ja hagi executat
en ella durant els seus butlletins de problemes.

1033
00:50:22,620 --> 00:50:27,840
>> I després, l'últim que realment breu
és JSFIDDLE, que és - avui hem

1034
00:50:27,840 --> 00:50:32,110
estat fent un munt de treball amb
JavaScript HTML CSS.

1035
00:50:32,110 --> 00:50:39,820
JSFIDDLE és una aplicació web, que bàsicament
li permet prendre el codi HTML, SEU

1036
00:50:39,820 --> 00:50:42,820
JavaScript part inferior esquerra, i
la seva part superior dreta CSS.

1037
00:50:42,820 --> 00:50:47,840
I llavors es pot crear un render ràpid
d'ella i veure com interactua.

1038
00:50:47,840 --> 00:50:50,500
És molt útil quan les persones estan tractant
fer una prova de concepte com

1039
00:50:50,500 --> 00:50:52,910
així és com ho faria
fer un menú desplegable.

1040
00:50:52,910 --> 00:50:54,980
Potser un destapi ràpid o el que sigui.

1041
00:50:54,980 --> 00:50:56,560
>> MIKE RIZZO: Així que anirem
endavant i feu clic a aquest.

1042
00:50:56,560 --> 00:50:57,820
Una nota ràpida -

1043
00:50:57,820 --> 00:51:00,430
mentre que, abans que fóssim
fent en fer clic.

1044
00:51:00,430 --> 00:51:04,380
Resulta que JCorey Corea també ha incorporat un
en controlador d'esdeveniments clic que

1045
00:51:04,380 --> 00:51:07,020
utilitza només perquè figura ets
voldrà fer un munt de coses

1046
00:51:07,020 --> 00:51:08,410
quan es vol alguna cosa, premeu.

1047
00:51:08,410 --> 00:51:09,690
>> De la mateixa manera, també té un vol estacionari.

1048
00:51:09,690 --> 00:51:12,850
Però per arribar a tot l'àmbit de
aquests, una ullada a la jQuery

1049
00:51:12,850 --> 00:51:15,320
documentació i fer-ho.

1050
00:51:15,320 --> 00:51:18,760
Vaig fer alguna cosa estúpid aquí.

1051
00:51:18,760 --> 00:51:21,490
>> TOMAS Reimers: Així que tinc una molt ràpida
programa d'aquí, que diu

1052
00:51:21,490 --> 00:51:22,640
botó de clic.

1053
00:51:22,640 --> 00:51:23,890
Llavors tenim un bucle for.

1054
00:51:23,890 --> 00:51:26,810
Per i és menor que 404.

1055
00:51:26,810 --> 00:51:29,530
Només va a aparèixer
aquests missatges d'alerta.

1056
00:51:29,530 --> 00:51:33,425
>> MIKE RIZZO: I quin va ser el
codi 404 es va posar en HTML?

1057
00:51:33,425 --> 00:51:34,145
Recorda algú?

1058
00:51:34,145 --> 00:51:35,450
No s'ha trobat, a la dreta.

1059
00:51:35,450 --> 00:51:38,640

1060
00:51:38,640 --> 00:51:40,885
Chrome també va afegir aquesta ordenada
cosa on es pot -

1061
00:51:40,885 --> 00:51:43,430
>> TOMAS Reimers: Perquè la gent com
Mike va començar a fer això molt i

1062
00:51:43,430 --> 00:51:47,230
molestar els usuaris, la qual cosa permet
a veure info.

1063
00:51:47,230 --> 00:51:48,286
>> MIKE RIZZO: Si.

1064
00:51:48,286 --> 00:51:50,690
>> TOMAS Reimers: Tenim alguna pregunta
sobre això, sobre JavaScript

1065
00:51:50,690 --> 00:51:53,420
biblioteques, la recerca de biblioteques o
mirades el desenvolupament web

1066
00:51:53,420 --> 00:51:55,400
com en el món real?

1067
00:51:55,400 --> 00:51:56,880
Estem corrent contra el temps.

1068
00:51:56,880 --> 00:52:00,400
Així que no estic segur que anem
tenir temps per posar en pràctica

1069
00:52:00,400 --> 00:52:02,290
si no és realment ràpid.

1070
00:52:02,290 --> 00:52:04,580
Estem bé?

1071
00:52:04,580 --> 00:52:08,110
>> MIKE RIZZO: Qualsevol cosa que vostès li agradaria
per veure realment ràpid, com, en dos

1072
00:52:08,110 --> 00:52:09,556
minuts o menys?

1073
00:52:09,556 --> 00:52:10,870
>> TOMAS Reimers: Qualsevol cosa
podem aclarir?

1074
00:52:10,870 --> 00:52:12,500
Com escriure en -

1075
00:52:12,500 --> 00:52:13,260
>> AUDIÈNCIA: [inaudible]?

1076
00:52:13,260 --> 00:52:16,070
>> MIKE RIZZO: Sí, així que això és -

1077
00:52:16,070 --> 00:52:18,065
>> TOMAS Reimers: Vostè només pot colpejar
Control-O en el lloc web.

1078
00:52:18,065 --> 00:52:19,275
>> MIKE RIZZO: Oh, no sabia això.

1079
00:52:19,275 --> 00:52:22,290
>> TOMAS Reimers: Jo crec, si.

1080
00:52:22,290 --> 00:52:23,300
Control-O. Sí

1081
00:52:23,300 --> 00:52:25,970
>> MIKE RIZZO: Oh, així que aquesta és la
codi de la pàgina web.

1082
00:52:25,970 --> 00:52:29,580
Però si realment voleu descarregar el nostre
arxius i tot, es troba allotjada

1083
00:52:29,580 --> 00:52:32,650
en github.com

1084
00:52:32,650 --> 00:52:34,850
>> TOMAS Reimers: retallar meu nom -

1085
00:52:34,850 --> 00:52:38,504
Tomas Reimers - slash
Seminari de guió CS50.

1086
00:52:38,504 --> 00:52:40,710
>> MIKE RIZZO: I vostè pot
trobar de tot allà.

1087
00:52:40,710 --> 00:52:42,310
>> TOMAS Reimers: Això és el que GitHub
sembla, per cert.

1088
00:52:42,310 --> 00:52:44,910
Així que de nou, quan es veu una font oberta
projecte, en general, que serà una lectura

1089
00:52:44,910 --> 00:52:45,950
jo aquí que vostè pot llegir.

1090
00:52:45,950 --> 00:52:50,200
I si tornes, et donaràs compte que
vostè té el zip de descàrrega, que

1091
00:52:50,200 --> 00:52:52,130
li permeten descarregar la font
codi per a incloure la

1092
00:52:52,130 --> 00:52:53,666
producte en la seva pròpia cosa.

1093
00:52:53,666 --> 00:52:56,890
>> MIKE RIZZO: Sí, i si sol clic
en les index.html molt ràpidament -

1094
00:52:56,890 --> 00:52:59,180
>> TOMAS Reimers: Veuràs aquí hi ha la
codi font del nostre lloc web.

1095
00:52:59,180 --> 00:53:02,016

1096
00:53:02,016 --> 00:53:06,070
>> MIKE RIZZO: També, em vaig oblidar d'empenta dret
abans de la gran taula que

1097
00:53:06,070 --> 00:53:09,860
inclosos, però també hi ha una taula
de chmods que es van incloure

1098
00:53:09,860 --> 00:53:13,210
només per la seva claredat.

1099
00:53:13,210 --> 00:53:16,940
Però si ens desplacem fins al fons de la
inferior, en realitat no ens fem molt

1100
00:53:16,940 --> 00:53:21,160
tant amb el codi JavaScript
coses en absolut amb això.

1101
00:53:21,160 --> 00:53:26,610
És exclusivament a partir de tot el
altra cosa que el que teníem.

1102
00:53:26,610 --> 00:53:28,730
>> Així que gràcies nois per venir
i escoltant.

1103
00:53:28,730 --> 00:53:29,830
Esperem que aquest era molt servicial.

1104
00:53:29,830 --> 00:53:33,020
Si vostè té alguna habilitat relacionada
preguntes o simplement vol parlar

1105
00:53:33,020 --> 00:53:36,240
Què més com el que altres coses interessants
es pot fer amb JavaScript, ens encantaria

1106
00:53:36,240 --> 00:53:37,186
parlar amb vostè.

1107
00:53:37,186 --> 00:53:40,010
>> TOMAS Reimers: Si vostè té una pregunta
sobre el seu projecte o si això pot ser

1108
00:53:40,010 --> 00:53:42,740
rellevant, probablement anem quedem
una mica després d'aquest.

1109
00:53:42,740 --> 00:53:44,640
Però a part d'això, tenen
un bon cap de setmana.

1110
00:53:44,640 --> 00:53:45,845
>> MIKE RIZZO: Sí, gaudir.

1111
00:53:45,845 --> 00:53:46,120
Ens veiem nois.

1112
00:53:46,120 --> 00:53:47,370
>> TOMAS Reimers: Ens veiem.

1113
00:53:47,370 --> 00:53:47,926