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

2
00:00:07,440 --> 00:00:08,180
>> TOMAS REIMERS: Hallo, iedereen.

3
00:00:08,180 --> 00:00:09,250
Mijn naam is Tomas Reimers.

4
00:00:09,250 --> 00:00:10,500
>> MIKE RIZZO: En ik ben Mike Rizzo.

5
00:00:10,500 --> 00:00:12,990
>> TOMAS REIMERS: Wij zijn twee van CS50s TS.

6
00:00:12,990 --> 00:00:18,910
En vandaag gaan we wat leidt het seminar over
JavaScript en CSS voor web apps.

7
00:00:18,910 --> 00:00:22,140
Als u wilt om mee te volgen, de
link is daar.

8
00:00:22,140 --> 00:00:25,190
En wil je het omhoog zetten
de computer even?

9
00:00:25,190 --> 00:00:27,460
>> Er is de link.

10
00:00:27,460 --> 00:00:30,390
Het is een kleine site, die links naar heeft
alle middelen die we gaan zijn

11
00:00:30,390 --> 00:00:36,490
wijst u vandaag en heeft ook veel
nuttige informatie geschreven door ons te

12
00:00:36,490 --> 00:00:39,680
lees meer in de diepte als je teruggaat,
en je probeert te herinneren wat

13
00:00:39,680 --> 00:00:42,166
hebben we precies zeggen, wat je was
het over, et cetera.

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

15
00:00:43,870 --> 00:00:44,890
Dus laten we beginnen.

16
00:00:44,890 --> 00:00:45,700
>> TOMAS REIMERS: Dus je wilt beginnen?

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

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

19
00:00:47,170 --> 00:00:51,730
Daarom wilden we eerst beginnen met een brede
overzicht over het internet en

20
00:00:51,730 --> 00:00:54,240
bestandstypen bij het ontwerpen van websites.

21
00:00:54,240 --> 00:00:57,550
Hoewel deze presentatie willen we
krijgen in in JavaScript erg veel

22
00:00:57,550 --> 00:01:00,320
later, wilden we om te beginnen met
net, soort van, zoals eye view van een vogel

23
00:01:00,320 --> 00:01:03,270
van wat een website is en hoe
na te denken over het ontwerpen van een

24
00:01:03,270 --> 00:01:04,800
website voor de start.

25
00:01:04,800 --> 00:01:08,370
>> Dus jullie, op dit moment - met het
zijnde vrijdagavond - zou moeten hebben

26
00:01:08,370 --> 00:01:11,000
uw CS50 financiën ingediend
probleem stelt.

27
00:01:11,000 --> 00:01:15,260
Hopelijk, dat was een goede smaak
van wat web programmeren kan zijn.

28
00:01:15,260 --> 00:01:18,261
Maar hier willen we, soort, geven
u een andere smaak, als goed.

29
00:01:18,261 --> 00:01:23,190
>> TOMAS REIMERS: Dus gewoon om wat samen te vatten
gebeurt, wanneer u typt in uw URL naar

30
00:01:23,190 --> 00:01:26,650
uw webbrowser, die URL krijgt
opgezocht in de computer.

31
00:01:26,650 --> 00:01:28,590
En uw computer aangesloten
een andere computer,

32
00:01:28,590 --> 00:01:29,890
welke hosts die website.

33
00:01:29,890 --> 00:01:33,150
OK, dus als je naar google.com, je bent
aangesloten op een van Google's

34
00:01:33,150 --> 00:01:36,496
computers, die over de
bestanden voor google.com.

35
00:01:36,496 --> 00:01:38,750
>> Het vraagt ​​dan om een ​​specifiek bestand.

36
00:01:38,750 --> 00:01:40,020
Dus als je naar -

37
00:01:40,020 --> 00:01:41,550
Ik weet het niet -

38
00:01:41,550 --> 00:01:48,170
example.com / index.html of / test.html,
je gaat om te vragen om

39
00:01:48,170 --> 00:01:49,340
dat specifieke bestand.

40
00:01:49,340 --> 00:01:52,780
En de webserver gaan
om het terug aan u.

41
00:01:52,780 --> 00:01:54,910
>> Dan, als je door dat bestand -

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

43
00:01:57,750 --> 00:01:59,950
zodra je computer krijgt dat
file - het gaat om te beginnen

44
00:01:59,950 --> 00:02:00,820
naar een webpagina te bouwen.

45
00:02:00,820 --> 00:02:03,020
Dus nu is het HTML-bestand,
dat is een soort als de

46
00:02:03,020 --> 00:02:05,170
structuur van de webpagina.

47
00:02:05,170 --> 00:02:08,620
Het HTML-bestand kan ook verwijzen
CSS-bestanden, die het definiëren

48
00:02:08,620 --> 00:02:09,889
stijl van de webpagina.

49
00:02:09,889 --> 00:02:12,970
>> JavaScript-bestanden, die bepaalt
interactie met de webpagina.

50
00:02:12,970 --> 00:02:15,200
Beeldbestanden die net beelden zijn.

51
00:02:15,200 --> 00:02:19,450
En eventueel verwijzen naar andere HTML-bestanden,
die u vervolgens bezoekt.

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

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

54
00:02:24,380 --> 00:02:28,980
Dus jullie hebben allemaal, misschien,
nauwgezet opzetten van uw lokale host

55
00:02:28,980 --> 00:02:30,810
op uw virtuele machine.

56
00:02:30,810 --> 00:02:35,650
En dat alleen maar, soort, is de lokale
domein dat uw computer hosts

57
00:02:35,650 --> 00:02:38,760
voor u op uw eigen IP-adres.

58
00:02:38,760 --> 00:02:43,300
>> Dus binnen die, dan kunt u toevoegen
om het uw eigen webpagina's.

59
00:02:43,300 --> 00:02:47,655
Ik bedoel, in CS50 Finance, moet u beschikken over
voegde een aantal HTML-pagina's, die,

60
00:02:47,655 --> 00:02:49,410
soort, verpakt in de PHP wrapper.

61
00:02:49,410 --> 00:02:54,690
Maar uiteindelijk, wat uw PHP-pagina's
werden het uitvoeren was HTML.

62
00:02:54,690 --> 00:02:58,210
>> Maar denken terug naar het prille begin
van de PSET, moesten we stellen

63
00:02:58,210 --> 00:03:00,890
de machtigingen voor alles, toch?

64
00:03:00,890 --> 00:03:07,270
Dus dit laat gewoon eigenlijk het ons weten
die kunnen lezen, schrijven, en eventueel

65
00:03:07,270 --> 00:03:08,730
telkens laten uitvoeren van de bestanden.

66
00:03:08,730 --> 00:03:11,870
Dus we gaan snel een doen - hm?

67
00:03:11,870 --> 00:03:15,660
>> TOMAS REIMERS: Dus we gaan
om snel een demo te doen.

68
00:03:15,660 --> 00:03:19,560
Dus gewoon om u te herinneren, wanneer u
aansluiten op Google's computer -

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

70
00:03:20,690 --> 00:03:24,060
en vraag om een ​​bestand, de computer eerst
moet ervoor zorgen dat je bevoegd bent

71
00:03:24,060 --> 00:03:28,790
om daadwerkelijk te zien dat bestand of gelezen dat
file want je kunt niet gewoon vragen

72
00:03:28,790 --> 00:03:30,430
voor elk bestand op die computer, toch?

73
00:03:30,430 --> 00:03:32,260
Dat zou een gevaar voor de veiligheid zijn.

74
00:03:32,260 --> 00:03:37,020
>> Dus bestanden op de systemen die we gebruiken, zoals
deze CS50 apparaat, hebben drie

75
00:03:37,020 --> 00:03:39,200
algemeen van mensen die kunnen hebben
machtigingen voor iets.

76
00:03:39,200 --> 00:03:41,610
De eerste is de eigenlijke
eigenaar van het genoemde bestand.

77
00:03:41,610 --> 00:03:43,820
De tweede is de groep die
het bestand behoort.

78
00:03:43,820 --> 00:03:46,090
We gaan niet te focussen
te veel op dat.

79
00:03:46,090 --> 00:03:50,010
En het laatste wat is, een soort van, zoals de
wereld of zoals iedereen wie

80
00:03:50,010 --> 00:03:54,130
niet specifiek voor dat bestand en niet
hebben geen eigendomsrechten over.

81
00:03:54,130 --> 00:04:05,650
>> Dus als we de eigenaar, groep,
en vervolgens wereld.

82
00:04:05,650 --> 00:04:10,510
En voor elk van deze groepen, je
kan een van de drie machtigingen,

83
00:04:10,510 --> 00:04:13,010
OK of meerdere daarvan.

84
00:04:13,010 --> 00:04:15,070
U kunt leesrechten hebben.

85
00:04:15,070 --> 00:04:16,560
U kunt juiste rechten hebben.

86
00:04:16,560 --> 00:04:18,880
En je kunt uitvoeren permissies.

87
00:04:18,880 --> 00:04:22,060
>> Dus in termen van de werkelijke bestandstypen, lezen
toestemming is als het werkelijk te lezen

88
00:04:22,060 --> 00:04:23,250
de inhoud van het bestand.

89
00:04:23,250 --> 00:04:24,730
Een recht toestemming schrijft
het genoemde bestand.

90
00:04:24,730 --> 00:04:28,370
Een execute permissie loopt de
bestand zoals je doet als je een van de run

91
00:04:28,370 --> 00:04:29,620
uw CS50 projecten.

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

93
00:04:32,190 --> 00:04:38,820
>> Dus als we denken over bestanden
zoals wanneer we nodig hebben om een ​​HTML lezen

94
00:04:38,820 --> 00:04:41,790
bestand, dat moet wereld
leesbare, toch?

95
00:04:41,790 --> 00:04:44,420
Vermoedelijk ook de eigenaar wil
kunnen die bestand.

96
00:04:44,420 --> 00:04:46,610
Dus de eigenaar gaat nodig hebben
lezen en schrijven permissies.

97
00:04:46,610 --> 00:04:48,710
Ze hebben niet echt nodig uitvoeren.

98
00:04:48,710 --> 00:04:50,950
>> Groep, gaan we behandelen de
hetzelfde als de wereld nu.

99
00:04:50,950 --> 00:04:54,610
Dus moeten ze leesrechten.

100
00:04:54,610 --> 00:04:57,310
Maar ze hebben geen schrijfrechten nodig
of uitvoer rechten.

101
00:04:57,310 --> 00:05:01,920
En nu, als we terugdenken aan de voormalige
PSETs, wat wij realiseren is dit soort

102
00:05:01,920 --> 00:05:03,360
van kijken als binaire, toch?

103
00:05:03,360 --> 00:05:04,210
1 staat voor ja.

104
00:05:04,210 --> 00:05:05,040
0 voor nee.

105
00:05:05,040 --> 00:05:06,870
En we kunnen eigenlijk vertalen
deze naar binair.

106
00:05:06,870 --> 00:05:10,478
>> Dus 110 in binair zou 6.

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

108
00:05:13,270 --> 00:05:14,690
Zelfde met wereld.

109
00:05:14,690 --> 00:05:20,846
Dus het nummer dat u zou krijgen voor de
toestemmingen hiervoor zou zijn 644.

110
00:05:20,846 --> 00:05:24,400
>> MIKE RIZZO: En als je terugdenkt aan
als je iets CHMOD, geloof ik

111
00:05:24,400 --> 00:05:28,980
zij gaven in het probleem te stellen de
voorbeeld van waar je zou kunnen doen

112
00:05:28,980 --> 00:05:36,470
iets als chmod 644
en vervolgens de bestandsnaam.

113
00:05:36,470 --> 00:05:39,980
De 644 dan kun je nu direct zien
waar dat vandaan komt.

114
00:05:39,980 --> 00:05:42,840
Dus hopelijk dat maakt dat
een beetje meer duidelijk.

115
00:05:42,840 --> 00:05:45,600
>> En dan voor de duidelijkheid je kerel -

116
00:05:45,600 --> 00:05:48,200
oh ja, hier is dit weer.

117
00:05:48,200 --> 00:05:53,260
Dus 600 dan zou gewoon het voorbeeld zijn
we gaven hier waar de eigenaar heeft

118
00:05:53,260 --> 00:05:56,360
lezen en juiste rechten terwijl groep
en wereld geen machtigingen

119
00:05:56,360 --> 00:05:58,145
toegang tot het bestand.

120
00:05:58,145 --> 00:06:01,500
>> TOMAS REIMERS: En dan hebben we een snelle
lijst van veel voorkomende toestemmingen.

121
00:06:01,500 --> 00:06:05,250
Dus directories, je wilt
daadwerkelijk chmod 711.

122
00:06:05,250 --> 00:06:08,930
Quick opzij - voor een map te hebben
uitvoerbare toestemming betekent om te kunnen

123
00:06:08,930 --> 00:06:11,680
naar de directory te openen.

124
00:06:11,680 --> 00:06:15,280
Afbeeldingen, CSS, JavaScript, HTML behoeften
644 omdat, in principe, de wereld

125
00:06:15,280 --> 00:06:16,400
behoeften leesrechten.

126
00:06:16,400 --> 00:06:20,960
>> En PHP, die jullie hebben gezien
hoewel we niet zullen praten over het

127
00:06:20,960 --> 00:06:24,880
strikt wordt doorgaans CHMOD met
toestemming 600 omdat het lopen met

128
00:06:24,880 --> 00:06:26,540
de rechten van de eigenaar.

129
00:06:26,540 --> 00:06:27,790
Althans op het apparaat.

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

131
00:06:30,200 --> 00:06:36,870
>> MIKE RIZZO: Dus als je niet specifiek
specificeren welk type bestand

132
00:06:36,870 --> 00:06:39,480
je wilt in het daadwerkelijk opzetten
up deze presentatie -

133
00:06:39,480 --> 00:06:43,490
we hadden een probleem met dit omdat
alles was niet goed CHMOD -

134
00:06:43,490 --> 00:06:47,550
je gaat, soort van, een te krijgen
verboden fout die de website

135
00:06:47,550 --> 00:06:49,700
niet daadwerkelijk toestemming hebben
om toegang te krijgen wat file

136
00:06:49,700 --> 00:06:51,370
u het wilt openen.

137
00:06:51,370 --> 00:06:54,780
En natuurlijk kan dat worden opgelost -
zoals in probleem set - door het veranderen

138
00:06:54,780 --> 00:06:56,405
permissies gepast.

139
00:06:56,405 --> 00:06:59,620
>> TOMAS REIMERS: En de laatste opmerking voor
snel lokale ontwikkeling is - we

140
00:06:59,620 --> 00:07:02,000
bracht dit, maar we wilden gewoon
om het weer op te brengen -

141
00:07:02,000 --> 00:07:06,230
als je vraagt ​​om een ​​server - zo lokale host,
bijvoorbeeld, com of wat dan ook. -

142
00:07:06,230 --> 00:07:09,170
en je hoeft niet een bepaald bestand op te geven,
het bestand dat uw computer gaat

143
00:07:09,170 --> 00:07:11,540
te vragen voor heet index.HTML.

144
00:07:11,540 --> 00:07:12,790
Of als dat niet bestaat, index.PHP.

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

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

147
00:07:16,350 --> 00:07:19,560
Dus dat is gewoon een samenvatting van alles,
hopelijk dat we hebben behandeld in

148
00:07:19,560 --> 00:07:22,800
sectie, en lezingen,
en tot nu toe in CS50.

149
00:07:22,800 --> 00:07:26,110
En nu gaan we beginnen te praten
over specifiek bibliotheken.

150
00:07:26,110 --> 00:07:30,270
JavaScript en CSS-bibliotheken
voor web apps.

151
00:07:30,270 --> 00:07:36,350
>> Dus een snelle reden waarom we
bibliotheken is het programmeren -

152
00:07:36,350 --> 00:07:39,000
er is een hoop problemen in
programmering, die blijven opduiken

153
00:07:39,000 --> 00:07:40,570
opnieuw, en opnieuw, en opnieuw.

154
00:07:40,570 --> 00:07:43,870
U zult merken dat veel websites
hebben de mogelijkheid om drop-down hebben

155
00:07:43,870 --> 00:07:49,100
menu's, bijvoorbeeld, of het vermogen nodig
een zeer standaard knop hebben

156
00:07:49,100 --> 00:07:51,400
stijl, die niet mogen worden
de makkelijkste.

157
00:07:51,400 --> 00:07:54,670
Nu dat je begint te krijgen in HTML, u
beseffen dat knopen kan eigenlijk

158
00:07:54,670 --> 00:07:57,720
ziet er echt lelijk als je
doen niets.

159
00:07:57,720 --> 00:08:00,830
>> Dus veel mensen hebben geschreven
genoemd bibliotheken.

160
00:08:00,830 --> 00:08:02,990
En in deze context, zijn ze
ook wel kaders.

161
00:08:02,990 --> 00:08:04,790
We gaan gebruik maken van de
twee door elkaar.

162
00:08:04,790 --> 00:08:07,360
En wat ze zijn, is dat ze in principe
premade stukjes code -

163
00:08:07,360 --> 00:08:09,130
ofwel CSS of JavaScript -

164
00:08:09,130 --> 00:08:13,240
dat weg te nemen een groot deel van de
team heb je in de codering.

165
00:08:13,240 --> 00:08:17,290
>> Dus ze vooraf definiëren een heleboel klassen of
pre-definiëren een heleboel functies voor

166
00:08:17,290 --> 00:08:20,110
Geval JavaScript, die
u kunt bellen later.

167
00:08:20,110 --> 00:08:22,690
En dan kun je, soort van, krijgen
toegang tot deze code zonder

168
00:08:22,690 --> 00:08:23,710
iets te hoeven doen.

169
00:08:23,710 --> 00:08:27,750
Een voorbeeld van de bibliotheek was CS50.H.
Dat was een bibliotheek gaven we aan u terug

170
00:08:27,750 --> 00:08:32,090
in week een, waardoor je te doen
dat soort dingen getInt en GetString

171
00:08:32,090 --> 00:08:35,237
zonder schrijven
elke code zelf.

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

173
00:08:36,179 --> 00:08:40,299
Dus hier, net alsof we moesten omvatten
in onze c-bestanden de verschillende

174
00:08:40,299 --> 00:08:46,570
bibliotheken, we ook moeten opnemen in
onze HTML-bestanden verschillende bibliotheken.

175
00:08:46,570 --> 00:08:50,310
Bijvoorbeeld, als we wilden onder
een specifiek JavaScript-bibliotheek hier,

176
00:08:50,310 --> 00:08:52,850
misschien, een die we hebben geschreven
onszelf als het is lokaal gehoste

177
00:08:52,850 --> 00:08:56,000
riep script.js we gewoon
Gebruik deze notatie.

178
00:08:56,000 --> 00:08:59,500
>> Dus hebben we script type gelijken
JavaScript bron gelijken

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

180
00:09:01,260 --> 00:09:05,190
En als je terugdenkt aan je CS50
financiën probleem stellen, als je keek in

181
00:09:05,190 --> 00:09:09,190
header.php in de map templates,
je moet gezien hebben

182
00:09:09,190 --> 00:09:10,970
Enkele van deze.

183
00:09:10,970 --> 00:09:13,250
Dus dit eerste - de scripts -

184
00:09:13,250 --> 00:09:16,080
is inclusief een JavaScript-bibliotheek.

185
00:09:16,080 --> 00:09:18,760
Waaronder een CSS bibliotheek
een beetje anders.

186
00:09:18,760 --> 00:09:21,430
>> Hier, in plaats van het script
tag die u nodig hebt op de link tag.

187
00:09:21,430 --> 00:09:27,110
En dan, het type tekst CSS
is een beetje anders.

188
00:09:27,110 --> 00:09:29,270
Je hoeft niet altijd te bevatten
rel style sheet.

189
00:09:29,270 --> 00:09:30,970
Maar ik denk dat het, in het algemeen,
goede praktijken.

190
00:09:30,970 --> 00:09:35,810
>> En dan eindelijk, de HREF, die u
zag waarschijnlijk in uw ATAGs voor het koppelen

191
00:09:35,810 --> 00:09:39,440
in verschillende schakels gewoon specificeert
de link van waar te vinden dat.

192
00:09:39,440 --> 00:09:42,250
Bijvoorbeeld, als we wilden een koppeling
andere bibliotheek - laten we zeggen -

193
00:09:42,250 --> 00:09:49,330
die woonde op styles.css.

194
00:09:49,330 --> 00:09:54,030
En we wilden koppelen dat in dat
gehost op het web, zouden we dat begrepen.

195
00:09:54,030 --> 00:09:58,834
En dan plakken in wat
we hebben hier plaats.

196
00:09:58,834 --> 00:10:01,340
>> TOMAS REIMERS: OK, hopelijk u
jongens zijn al vertrouwd

197
00:10:01,340 --> 00:10:02,410
met hoe je CSS koppelen.

198
00:10:02,410 --> 00:10:04,000
Je moest dat op doen
uw laatste bruine set.

199
00:10:04,000 --> 00:10:07,110
JavaScript, sommigen van jullie misschien
enige ervaring met.

200
00:10:07,110 --> 00:10:07,980
Sommigen van u niet.

201
00:10:07,980 --> 00:10:12,190
>> Dus voor nu, weten dat een JavaScript-bestand
is heel erg als een CSS-bestand in

202
00:10:12,190 --> 00:10:15,640
de zin dat je kunt koppelen aan het of
dat je het kan ook intern.

203
00:10:15,640 --> 00:10:17,360
En het laat je script dingen.

204
00:10:17,360 --> 00:10:21,820
En we gaan u door een
beetje JavaScript later.

205
00:10:21,820 --> 00:10:23,560
>> Dus met behulp van een bibliotheek -

206
00:10:23,560 --> 00:10:26,150
als je eenmaal hebt opgenomen, het is zo
simpel als letterlijk het aanroepen van de

207
00:10:26,150 --> 00:10:29,640
functies hetzij het
class namen aan.

208
00:10:29,640 --> 00:10:32,220
Het laatste wat we willen praten
over in termen van de bibliotheek -

209
00:10:32,220 --> 00:10:34,180
en dit is meer een technische nota -

210
00:10:34,180 --> 00:10:35,860
is open source licenties.

211
00:10:35,860 --> 00:10:41,550
Dus als u deze werkelijke bibliotheken,
denkt u misschien van

212
00:10:41,550 --> 00:10:47,630
Vragen als is het OK dat ik ben gewoon
gebruik van de code van iemand anders, in het bijzonder

213
00:10:47,630 --> 00:10:51,970
want dat is iets wat we heel erg
zei dat je niet doen in deze cursus.

214
00:10:51,970 --> 00:10:55,790
>> Dus in het geval van open source licenties,
veel ontwikkelaars -

215
00:10:55,790 --> 00:10:57,540
als ze eenmaal een bibliotheek hebt geschreven,
die zij denken zouden kunnen zijn

216
00:10:57,540 --> 00:10:59,450
nuttig zijn om andere mensen -

217
00:10:59,450 --> 00:11:02,420
zal naar het web publiceren
en geef het een licentie.

218
00:11:02,420 --> 00:11:06,620
En een licentie in feite zegt Ik ben hierbij
het verlenen van toestemming aan andere

219
00:11:06,620 --> 00:11:11,250
mensen naar dit stukje software te gebruiken
de volgende soort

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

221
00:11:13,230 --> 00:11:16,100
>> We hebben een link naar een goede site om opgenomen
helpen de licenties in te begrijpen

222
00:11:16,100 --> 00:11:17,720
hoofdletter je in hen.

223
00:11:17,720 --> 00:11:21,680
Gemeenschappelijke bepalingen hebben zijn zaken als
u bent welkom om mijn bibliotheek te gebruiken zijn zo

224
00:11:21,680 --> 00:11:23,000
Zolang je me krediet.

225
00:11:23,000 --> 00:11:25,670
U bent welkom om mijn bibliotheek te gebruiken
zolang als het kapot

226
00:11:25,670 --> 00:11:26,790
je me niet kwalijk nemen.

227
00:11:26,790 --> 00:11:30,310
U bent welkom om mijn bibliotheek te gebruiken zo lang
als je het niet gebruiken om geld te verdienen

228
00:11:30,310 --> 00:11:31,910
voor jezelf.

229
00:11:31,910 --> 00:11:34,130
Dit zijn soorten voorkomende
bepalingen.

230
00:11:34,130 --> 00:11:37,780
>> Voor deze CS50 afstudeerproject, ze
niet super relevant omdat

231
00:11:37,780 --> 00:11:41,440
de projecten die jullie gebruiken
waarschijnlijk eerder, soort, bekend.

232
00:11:41,440 --> 00:11:44,170
Maar als je daadwerkelijk uit te gaan in de
wereld en begin met behulp van bibliotheken, die

233
00:11:44,170 --> 00:11:48,100
al dan niet ook worden geïmplementeerd
een aantal van de meer populaire we

234
00:11:48,100 --> 00:11:49,780
gaan door te gaan.

235
00:11:49,780 --> 00:11:53,310
Het is goed om te kunnen begrijpen
deze licenties en

236
00:11:53,310 --> 00:11:54,560
begrijpen wat ze bedoelen.

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

238
00:11:58,120 --> 00:11:58,586
En gaan terug.

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

240
00:12:00,960 --> 00:12:04,850
Dus nu verplaatsen naar voorbeelden
daadwerkelijk CSS.

241
00:12:04,850 --> 00:12:07,770
Op dit punt tot nu toe, zou je
niet hebben dit ondervonden.

242
00:12:07,770 --> 00:12:10,300
Maar je zou kunnen hebben ondervonden bij
uw dagelijks leven waar iets

243
00:12:10,300 --> 00:12:13,160
dat ziet er een manier op een browser
misschien niet hetzelfde uitzien

244
00:12:13,160 --> 00:12:14,880
manier in een andere browser.

245
00:12:14,880 --> 00:12:17,400
>> Dit is de browser browser heet
compatibiliteit.

246
00:12:17,400 --> 00:12:20,780
En steeds is het steeds meer en
meer een probleem, vooral omdat

247
00:12:20,780 --> 00:12:25,260
browsers nemen meer en meer vrijheden
om dingen uit te voeren als ze willen.

248
00:12:25,260 --> 00:12:28,440
Dus om te overwinnen, dat er eigenlijk
een grote bibliotheek genaamd Normalize.CSS.

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

250
00:12:32,236 --> 00:12:33,770
>> TOMAS REIMERS: We begrepen de link.

251
00:12:33,770 --> 00:12:36,210
Op dit punt, is het handig als
heb je je laptop daar

252
00:12:36,210 --> 00:12:38,740
kijken naar de locatie.

253
00:12:38,740 --> 00:12:42,580
En we geven dit aan u rechts
nu simpelweg omdat de CS50 finale

254
00:12:42,580 --> 00:12:44,370
project daadwerkelijk gaat
u vragen om het uit te voeren

255
00:12:44,370 --> 00:12:45,860
gelijk en door browsers.

256
00:12:45,860 --> 00:12:49,250
>> Dus gewoon in de achterkant van je houden
hoofd, is dit een prachtige bibliotheek

257
00:12:49,250 --> 00:12:51,170
want het zal, soort van,
standaardiseren dingen.

258
00:12:51,170 --> 00:12:54,230
In Firefox kan iets laten zien
als een pixel naar links.

259
00:12:54,230 --> 00:12:58,390
En dan kan Chrome eigenlijk besluiten dat
wat je bedoeld was 10 pixels

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

261
00:12:59,380 --> 00:13:01,030
En u wilt deze te standaardiseren.

262
00:13:01,030 --> 00:13:05,360
Normaliseren zal eigenlijk wel echt een goede
job zorgen dat uw site

263
00:13:05,360 --> 00:13:08,070
ziet er hetzelfde in verschillende browsers.

264
00:13:08,070 --> 00:13:10,660
>> MIKE RIZZO: Dus als we wilden gewoon
klik op de link heel snel en tonen

265
00:13:10,660 --> 00:13:13,140
u hoe dat eruit ziet, je
kunt het downloaden via de

266
00:13:13,140 --> 00:13:14,670
reus knop Download.

267
00:13:14,670 --> 00:13:18,520
Of ik moedig u aan om meer te lezen
door te klikken op deze link in de onderste

268
00:13:18,520 --> 00:13:19,310
rechtse hoek.

269
00:13:19,310 --> 00:13:22,420
>> TOMAS REIMERS: En als je echt
Klik op Lees meer daar -

270
00:13:22,420 --> 00:13:24,340
Klik op de bron op GitHub -

271
00:13:24,340 --> 00:13:31,720
je eigenlijk zien de open source
licentie op LICENSE.md daar.

272
00:13:31,720 --> 00:13:35,740
En je zult hier ziet is de
zeer populair MIT licentie.

273
00:13:35,740 --> 00:13:38,940
Nogmaals, als u lezen via de tekst,
je zult in staat zijn om het te vinden op de site

274
00:13:38,940 --> 00:13:42,550
we verwezen vóór en in staat zijn om
begrijpen zonder te lezen

275
00:13:42,550 --> 00:13:45,920
door de juridische jargon.

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

277
00:13:46,850 --> 00:13:47,940
Dus dat is Normaliseren.

278
00:13:47,940 --> 00:13:49,190
We wilden u
dat heel snel.

279
00:13:49,190 --> 00:13:50,030
Oh, heb je een vraag?

280
00:13:50,030 --> 00:13:53,013
>> PUBLIEK: Dus als je het te downloaden heb je
volg gewoon de code die zij hebben

281
00:13:53,013 --> 00:13:54,098
onder de Download-knop?

282
00:13:54,098 --> 00:13:55,860
>> TOMAS REIMERS: Ja, zo
wanneer u het downloaden -

283
00:13:55,860 --> 00:13:58,130
>> MIKE RIZZO: Oh, dat is een groot punt.

284
00:13:58,130 --> 00:14:00,700
Dus de vraag was hoe doen
we het eigenlijk downloaden?

285
00:14:00,700 --> 00:14:03,260
Dus als we op de link klikken, zien we
dat het eigenlijk opduikt

286
00:14:03,260 --> 00:14:05,030
naar de broncode.

287
00:14:05,030 --> 00:14:08,550
Dus om dit te doen, wat we konden
doen is gewoon op Opslaan als.

288
00:14:08,550 --> 00:14:10,830
Opslaan als en dat moet
brengen een bestand.

289
00:14:10,830 --> 00:14:14,160
En dan kunnen we kiezen om te besparen
als normalize.CSS.

290
00:14:14,160 --> 00:14:15,810
En dan zou je om het te koppelen in -

291
00:14:15,810 --> 00:14:18,660
>> TOMAS REIMERS: Op dezelfde manier als je
verwijzen in elk ander bestand.

292
00:14:18,660 --> 00:14:22,250
En zodra je het koppelen in, wat is er veel
over Normaliseren is hij in feite zal

293
00:14:22,250 --> 00:14:25,920
zorgen voor al het harde
werken op zich.

294
00:14:25,920 --> 00:14:27,730
Wat betekent dat je niet hoeft
om bepaalde categorieën toe te voegen.

295
00:14:27,730 --> 00:14:29,690
>> Je hoeft niets te raar doen.

296
00:14:29,690 --> 00:14:34,590
Het zal normaliseren zonder jou
verder niets te doen.

297
00:14:34,590 --> 00:14:36,083
Ja, je moet het nemen.

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

299
00:14:38,990 --> 00:14:40,240
Google Chrome reageert niet.

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

301
00:14:43,270 --> 00:14:44,860
>> Gewoon een snel terzijde -

302
00:14:44,860 --> 00:14:46,800
Ik merkte dat we sprongen in deze.

303
00:14:46,800 --> 00:14:49,010
De rest van deze presentatie is
gaat om een ​​snel overzicht te zijn.

304
00:14:49,010 --> 00:14:50,380
Een overzicht van bibliotheken.

305
00:14:50,380 --> 00:14:52,710
>> Kortom, wat ze zijn.

306
00:14:52,710 --> 00:14:53,350
Wat ze doen.

307
00:14:53,350 --> 00:14:54,060
Hoe ze zijn nuttig.

308
00:14:54,060 --> 00:14:56,540
Hoe je zou ze uit te voeren.

309
00:14:56,540 --> 00:14:59,730
Als u wilt gaan kijken naar hen,
volgende langs, en het lezen door

310
00:14:59,730 --> 00:15:01,990
hen, Ik zou dat aanmoedigen.

311
00:15:01,990 --> 00:15:07,620
>> Als alternatief, bent u welkom ook voor
beginnen ze te downloaden en met

312
00:15:07,620 --> 00:15:11,400
ze in een gezicht alleen maar om wat ze zien
er uitzien of wat ze doen als je

313
00:15:11,400 --> 00:15:12,270
uw laptop voor je.

314
00:15:12,270 --> 00:15:14,650
Zo niet, welkom om u bent
luisteren met ons praten.

315
00:15:14,650 --> 00:15:15,500
We gaan blijven praten.

316
00:15:15,500 --> 00:15:18,680
En we hebben de tijd aan het eind, hopelijk
we eigenlijk krijgen in het tonen van u

317
00:15:18,680 --> 00:15:20,946
wat sommige van deze bibliotheken
eruit.

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

319
00:15:22,320 --> 00:15:25,466
Oke, dus nu laten we praten
over Font Awesome.

320
00:15:25,466 --> 00:15:30,480
>> TOMAS REIMERS: zo Font Awesome is een
werkelijk keurige plaats, vooral voor die

321
00:15:30,480 --> 00:15:32,450
onder ons die minder artistiek
getalenteerd.

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

323
00:15:36,330 --> 00:15:38,880
Het negeren van de naam Font Awesome, het geeft
u een bos van icoontjes, die

324
00:15:38,880 --> 00:15:41,050
zeer nuttig.

325
00:15:41,050 --> 00:15:45,950
Dus een heleboel keer zul je een werktuig
pictogram kunt u me een aardige x zo

326
00:15:45,950 --> 00:15:47,170
dat je iets kunt sluiten.

327
00:15:47,170 --> 00:15:49,910
>> Of wilt u misschien een soort van knop Bewerken
met een potloodtekening als

328
00:15:49,910 --> 00:15:50,940
iedereen heeft.

329
00:15:50,940 --> 00:15:53,850
En dat is wanneer je leert dat
tekening die iconen kunnen worden

330
00:15:53,850 --> 00:15:55,510
zeer vervelend en moeilijk.

331
00:15:55,510 --> 00:15:59,160
Font Awesome - als u daadwerkelijk
ga naar de site -

332
00:15:59,160 --> 00:16:02,892
geeft je veel iconen onder
de pictogrammen boven.

333
00:16:02,892 --> 00:16:06,980
Ja, gewoon de top.

334
00:16:06,980 --> 00:16:09,030
Het zal u veel geven
pictogrammen voor gratis.

335
00:16:09,030 --> 00:16:15,210
>> Dus hier zie je we hebben dingen zoals een
sterretje, bars, een bliksemschicht, een

336
00:16:15,210 --> 00:16:19,750
kalender, een insect, een boek, et cetera.

337
00:16:19,750 --> 00:16:21,110
Dit kan zeer nuttig zijn.

338
00:16:21,110 --> 00:16:24,290
De manier waarop je dit onder andere is dat je onder
letterlijk het CSS-bestand.

339
00:16:24,290 --> 00:16:29,760
En nadat je de CSS-bestand opgenomen,
wat u kunt doen is u maakt een

340
00:16:29,760 --> 00:16:33,430
tag genaamd I. Het satands voor
pictogram met de klasse FA

341
00:16:33,430 --> 00:16:34,460
staat voor Font Awesome.

342
00:16:34,460 --> 00:16:36,330
En dan, ongeacht de klasse je wilt.

343
00:16:36,330 --> 00:16:41,220
>> Dus als ik een icoon van deze plus
vierkant hier, zou ik geef

344
00:16:41,220 --> 00:16:43,290
zij de categorie FA.

345
00:16:43,290 --> 00:16:46,230
En dan FA koppelteken plus koppelteken plein.

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: En dan, de laatste CSS
bibliotheek willen we door te komen zijn we

349
00:16:56,980 --> 00:16:59,950
proberen om het minimum te houden over CSS
bibliotheken, omdat we beseffen het

350
00:16:59,950 --> 00:17:03,660
titel van deze presentatie
is JavaScript Libraries.

351
00:17:03,660 --> 00:17:07,089
Maar we dachten dat we net zo goed
u kennismaken met de andere bibliotheken

352
00:17:07,089 --> 00:17:09,569
terwijl we aan het praten waren over bibliotheken.

353
00:17:09,569 --> 00:17:11,400
>> Het is Google Web Fonts.

354
00:17:11,400 --> 00:17:17,040
En wat Google Web Fonts u kunt
te doen is fonts toe te voegen aan uw website,

355
00:17:17,040 --> 00:17:22,079
dat is een heel gemakkelijke manier om het te maken
vrij en om uw set te onderscheiden

356
00:17:22,079 --> 00:17:24,460
van iedereen anders is als het
een mooi lettertype of als het heeft een leuke

357
00:17:24,460 --> 00:17:27,790
verzameling lettertypen.

358
00:17:27,790 --> 00:17:31,410
Google Web Fonts is mooi in tegenstelling tot andere
bibliotheken in de zin dat het een

359
00:17:31,410 --> 00:17:33,490
echt begeleide installatieprocedure.

360
00:17:33,490 --> 00:17:38,680
>> Dus als je de link volgt, is het
google.com / fonts, geloof ik.

361
00:17:38,680 --> 00:17:41,100
Volgt u dat, u
kan je het lettertype kiezen.

362
00:17:41,100 --> 00:17:44,410
U kunt kiezen aan de linkerkant van
dikte, schuin, et cetera.

363
00:17:44,410 --> 00:17:48,970
En dan, als je eenmaal hebt gekozen voor een,
je kunt snel gebruik klikken.

364
00:17:48,970 --> 00:17:49,820
Daar.

365
00:17:49,820 --> 00:17:51,590
Rechtsonder in het vak.

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

367
00:17:54,380 --> 00:17:56,700
>> En dan naar beneden scrollen.

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

369
00:17:59,600 --> 00:18:02,650
Allereerst, ze geven je de CSS die
je nodig hebt om daadwerkelijk te linken.

370
00:18:02,650 --> 00:18:03,330
Het is daar.

371
00:18:03,330 --> 00:18:05,170
Je kunt gewoon kopiëren en plakken die binnen

372
00:18:05,170 --> 00:18:07,250
En het mooie van deze is
je eigenlijk niet eens nodig om

373
00:18:07,250 --> 00:18:08,340
Download het bestand.

374
00:18:08,340 --> 00:18:11,170
>> Wat het gaat doen, is dat het gaat
om te linken naar Google's versie van het.

375
00:18:11,170 --> 00:18:14,130
Dus terug naar wat betekent dat.

376
00:18:14,130 --> 00:18:18,270
Dat betekent dat wanneer een gebruiker
uw bestand download -

377
00:18:18,270 --> 00:18:22,300
downloadt uw HTML-pagina - uw HTML
pagina gaat verwijzen naar dit bestand.

378
00:18:22,300 --> 00:18:26,790
>> Zo dan, de computer gaat zien,
oh, het is gehost op google.com plaats

379
00:18:26,790 --> 00:18:28,170
dan op theirsite.com.

380
00:18:28,170 --> 00:18:30,370
Laat me gaan vragen Google voor dat bestand.

381
00:18:30,370 --> 00:18:32,800
En dan, het zal omvatten
het bijna alsof het een

382
00:18:32,800 --> 00:18:35,584
een deel van uw eigen site.

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

384
00:18:36,540 --> 00:18:40,980
En zodra je dat onder andere, vervolgens naar
opnemen in uw CSS, het geeft je

385
00:18:40,980 --> 00:18:41,830
de huidige regel.

386
00:18:41,830 --> 00:18:45,188
Dus je hebt de eigenschap font familie ingesteld
gelijk is aan de naam van het lettertype.

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
Dus we zijn net klaar met CSS.

390
00:18:52,220 --> 00:18:57,230
En sommigen van u zou kunnen denken, goed,
we hadden wat CSS op CS50 Finance.

391
00:18:57,230 --> 00:19:00,390
Maar CSS bibliotheek was bootstrap.

392
00:19:00,390 --> 00:19:05,190
We eigenlijk onder Bootstrap een beetje
later onder JavaScript want met

393
00:19:05,190 --> 00:19:09,660
de Bootstrap CSS bibliotheek komt ook
met veel JavaScript dat

394
00:19:09,660 --> 00:19:12,060
Bootstrap of Twitter -
die Bootstrap gemaakt -

395
00:19:12,060 --> 00:19:15,426
gebruikt om al hun CSS beheren.

396
00:19:15,426 --> 00:19:19,592
>> TOMAS REIMERS: Heeft iemand enig hebben
vragen tot nu toe over CSS in het algemeen?

397
00:19:19,592 --> 00:19:20,723
We zijn goed?

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

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

400
00:19:22,495 --> 00:19:25,136
>> TOMAS REIMERS: Dus bewegen
op JavaScript.

401
00:19:25,136 --> 00:19:27,900
>> MIKE RIZZO: Dus wilden we praten
over jQuery om mee te beginnen.

402
00:19:27,900 --> 00:19:30,780
Heeft iemand gehoord van jQuery
voor of gebruikt?

403
00:19:30,780 --> 00:19:32,180
Ja, een paar?

404
00:19:32,180 --> 00:19:36,000
Dus als je gewoon werken met native
JavaScript, vind je jezelf

405
00:19:36,000 --> 00:19:41,000
het typen van een veel lange selectors veel.

406
00:19:41,000 --> 00:19:44,400
Dus wat jQuery doet is het biedt
een leuke verpakking voor de webbrowser

407
00:19:44,400 --> 00:19:48,180
taal die kunt u gemakkelijk
en manipuleren verschillende elementen

408
00:19:48,180 --> 00:19:52,470
in het document object model van de
webpagina of de DOM, waarvan ik denk dat

409
00:19:52,470 --> 00:19:54,290
jullie hebben gehoord van in
lezing op dit punt.

410
00:19:54,290 --> 00:19:57,550
>> TOMAS REIMERS: Als u nog niet gehoord van
of indien u niet hebt bekeken lezing

411
00:19:57,550 --> 00:20:01,870
nog, het Document Object Model is
eigenlijk hoe de dingen zijn vertegenwoordigd.

412
00:20:01,870 --> 00:20:05,290
Dus HTML soort lijkt op een boom
wanneer u daadwerkelijk trekken het uit.

413
00:20:05,290 --> 00:20:06,850
Je hebt de HTML-element op de top.

414
00:20:06,850 --> 00:20:07,560
U hebt het hoofd en lichaam.

415
00:20:07,560 --> 00:20:09,500
>> En dan, in dat u
hebben al het andere.

416
00:20:09,500 --> 00:20:10,660
Dat aangeduid als de DOM -

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

418
00:20:12,120 --> 00:20:16,090
Dus een model dat objecten vertegenwoordigt in
het document is een eenvoudige manier om na te denken

419
00:20:16,090 --> 00:20:18,560
daarover.

420
00:20:18,560 --> 00:20:22,520
En een van de grote ding over jQuery
is het maakt echt het oversteken

421
00:20:22,520 --> 00:20:26,460
dat en manipuleren elementen binnen
dat ongelooflijk eenvoudig.

422
00:20:26,460 --> 00:20:30,300
>> Zo eenvoudig, namelijk dat de meeste
JavaScript-bibliotheken of niet

423
00:20:30,300 --> 00:20:34,200
meerderheid, de grote meerderheid van degenen
zie je eigenlijk nodig jQuery zo

424
00:20:34,200 --> 00:20:37,530
dat ze zich gewoon kunnen lopen
want als je niet over jQuery, je

425
00:20:37,530 --> 00:20:40,540
zou een hoop tijd te verspillen proberen te
erachter te komen hoe je bepaalde selecteren

426
00:20:40,540 --> 00:20:43,660
elementen en hoe je andere dingen te doen.

427
00:20:43,660 --> 00:20:47,950
En de andere grote ding over jQuery
is dat het cross-browser compatible.

428
00:20:47,950 --> 00:20:51,550
>> Dus herinner me terug toen we zeiden dat
niet alle browsers implementeren

429
00:20:51,550 --> 00:20:53,100
dingen op dezelfde manier?

430
00:20:53,100 --> 00:20:55,120
Dit geldt zelfs in JavaScript.

431
00:20:55,120 --> 00:20:58,220
En een van de grote dingen over jQuery
is dat het detecteren

432
00:20:58,220 --> 00:21:00,300
browser en detecteren de
geschikte methode.

433
00:21:00,300 --> 00:21:03,420
>> Dus als je nodig hebt om een ​​element te selecteren,
Internet Explorer zou kunnen zeggen dat je

434
00:21:03,420 --> 00:21:05,770
verondersteld om op deze manier te doen.

435
00:21:05,770 --> 00:21:08,300
Firefox zou kunnen zeggen dat de juiste
manier is deze manier.

436
00:21:08,300 --> 00:21:09,710
jQuery niet schelen.

437
00:21:09,710 --> 00:21:12,550
Wanneer u jQuery vertellen om een ​​te selecteren
element zal het uitzoeken hoe het is

438
00:21:12,550 --> 00:21:16,290
verondersteld om het te doen binnen de browser de
gebruiker is op dit moment in, en dan doen

439
00:21:16,290 --> 00:21:18,584
het op die manier.

440
00:21:18,584 --> 00:21:22,650
>> MIKE RIZZO: Dus laten we niet praten over
het gebruik van jQuery een beetje.

441
00:21:22,650 --> 00:21:27,670
Net zoals PHP, jQuery heeft een bijzondere
voorliefde voor het dollar teken.

442
00:21:27,670 --> 00:21:30,880
Dus je zult dat elke jQuery vinden -

443
00:21:30,880 --> 00:21:32,060
nou ja, niet allemaal.

444
00:21:32,060 --> 00:21:35,210
Soms kunt u de plaats van de dollar
ondertekenen met het woord jQuery.

445
00:21:35,210 --> 00:21:38,980
Maar over het algemeen, gewoon omdat het
korter, wanneer je ziet dat jQuery

446
00:21:38,980 --> 00:21:41,420
gebruikt het zal met een dollar teken.

447
00:21:41,420 --> 00:21:47,030
>> Dus hier zijn we gewoon met een begin
selector voor een element in de DOM.

448
00:21:47,030 --> 00:21:52,850
Hier hebben we het dollar teken gevolgd
door haakjes openen en vervolgens citaten.

449
00:21:52,850 --> 00:21:56,130
En binnen de aanhalingstekens gaan onze selectors
voor de verschillende elementen.

450
00:21:56,130 --> 00:21:59,810
Net als in CSS, we selectors nodig
in staat zijn om verschillende elementen te stylen

451
00:21:59,810 --> 00:22:00,840
binnen de pagina.

452
00:22:00,840 --> 00:22:06,555
Deze verschillende selectors vertalen
precies in jQuery en JavaScript,

453
00:22:06,555 --> 00:22:07,820
grotendeels.

454
00:22:07,820 --> 00:22:10,120
>> Dus hier hebben we een punt foo.

455
00:22:10,120 --> 00:22:14,780
Dus als je herinneren van lezing,
de stip betekent gewoon de klas.

456
00:22:14,780 --> 00:22:18,850
Dus we selecteren element
met klasse foo.

457
00:22:18,850 --> 00:22:22,670
Dus als ik ga je gang en open onze
JavaScript console hier heel snel

458
00:22:22,670 --> 00:22:26,830
gewoon laten zien, als ik typ de
dollarteken, zien we dat het aantal

459
00:22:26,830 --> 00:22:28,090
functie die omhoog komt.

460
00:22:28,090 --> 00:22:29,420
En het is gewoon gedefinieerd door jQuery.

461
00:22:29,420 --> 00:22:32,120
>> TOMAS REIMERS: Voor degenen onder u
onbekende, de console is een hulpmiddel

462
00:22:32,120 --> 00:22:35,430
binnen Chrome, waarmee u,
principe, lopen JavaScript op de

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

464
00:22:36,450 --> 00:22:39,420
Dit zul je ongelooflijk handig wanneer
je eigenlijk debuggen en u

465
00:22:39,420 --> 00:22:42,400
moeten zijn als, wat is de huidige
waarde van enkele globale variabele of wat

466
00:22:42,400 --> 00:22:43,910
is iets anders?

467
00:22:43,910 --> 00:22:47,620
Het is net zoiets als GDB, met uitzondering
dat je daadwerkelijk kan

468
00:22:47,620 --> 00:22:51,600
elementen op de pagina te manipuleren met
het in een veel eenvoudiger manier.

469
00:22:51,600 --> 00:22:55,080
En ook het niet, in principe, controleer
bij jou voordat het iets doet.

470
00:22:55,080 --> 00:22:58,660
>> Dus dat zou GDB willen worden, ben je
zeker dat u de volgende stap zijn?

471
00:22:58,660 --> 00:22:59,830
De console is in het echt.

472
00:22:59,830 --> 00:23:03,690
Dus als de webpagina wordt renderen en
doen wat het doet, de

473
00:23:03,690 --> 00:23:05,720
raad ook loopt langs het.

474
00:23:05,720 --> 00:23:08,330
En u kunt toerekenen code steken in
die console, die zal

475
00:23:08,330 --> 00:23:09,260
worden uitgevoerd op de pagina.

476
00:23:09,260 --> 00:23:12,190
>> MIKE RIZZO: Dus om de console in te voeren,
Ik denk dat ik zou moeten kort

477
00:23:12,190 --> 00:23:13,750
vermelden hoe dat te doen.

478
00:23:13,750 --> 00:23:17,850
In de laatste problemen die je kan hebben
gebruikte Chrome inspecteren element

479
00:23:17,850 --> 00:23:20,440
functies of view page source -

480
00:23:20,440 --> 00:23:23,870
en die zijn toegankelijk door gewoon rechts
klikken op de pagina of specifieke

481
00:23:23,870 --> 00:23:28,430
element en het doen ofwel inspecteren
element of view page source.

482
00:23:28,430 --> 00:23:31,190
We kunnen ook toegang krijgen tot de JavaScript
console rechtstreeks door

483
00:23:31,190 --> 00:23:33,630
kiezen inspecteren element.

484
00:23:33,630 --> 00:23:37,930
Dus dan moet je gewoon op de console
aan de rechterzijde.

485
00:23:37,930 --> 00:23:41,900
>> Als alternatief kunt u ook gegaan
naar de rechterbovenhoek,

486
00:23:41,900 --> 00:23:46,820
die wordt afgesneden op dit scherm waar
heeft de drie horizontale balken.

487
00:23:46,820 --> 00:23:52,010
En je naar beneden gaan naar hulpmiddelen en
dan JavaScript-console

488
00:23:52,010 --> 00:23:53,240
hier waar kan zien -

489
00:23:53,240 --> 00:23:54,370
in ieder geval op Windows -

490
00:23:54,370 --> 00:23:59,680
de snelkoppeling is Controle Shift J. Dus dan
als we wilden een element selecteren

491
00:23:59,680 --> 00:24:06,060
binnen deze pagina, net zoals ik liet zien
voordat, doen we dollarteken geopend parens

492
00:24:06,060 --> 00:24:08,180
en dan citeert.

493
00:24:08,180 --> 00:24:11,750
>> Een interessant ding is, in het algemeen,
enkele aanhalingstekens en dubbele aanhalingstekens zijn

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

495
00:24:12,370 --> 00:24:16,050
Dus veel mensen enkel gebruik gewoon
aanhalingstekens omdat ze sneller te typen

496
00:24:16,050 --> 00:24:19,780
dan dubbele aanhalingstekens omdat je niet
moet Shift ingedrukt.

497
00:24:19,780 --> 00:24:21,770
Dus ik zal gewoon dat nu doen.

498
00:24:21,770 --> 00:24:24,510
>> Dus ik wil iets te kiezen
met klasse.

499
00:24:24,510 --> 00:24:27,200
Container, gewoon omdat ik weet dat het
iets dat op onze

500
00:24:27,200 --> 00:24:28,740
webpagina nu.

501
00:24:28,740 --> 00:24:29,520
En ik druk op Enter.

502
00:24:29,520 --> 00:24:31,670
En we kunnen zien dat het geselecteerd is.

503
00:24:31,670 --> 00:24:34,990
Het toont zo omhoog dat het
terug dat object.

504
00:24:34,990 --> 00:24:36,620
Dus dat is een fundamentele keuze.

505
00:24:36,620 --> 00:24:40,080
Als we wilden eigenlijk manipuleren,
je zou hebben om iets te noemen

506
00:24:40,080 --> 00:24:43,925
op deze selectie, die
zullen we later krijgen in.

507
00:24:43,925 --> 00:24:49,030
>> TOMAS REIMERS: Dus gewoon om te kijken naar die
meer in de diepte, dit is niet anders

508
00:24:49,030 --> 00:24:52,245
dan de functie oproepen die we in C.
De naam van de functie hier is een

509
00:24:52,245 --> 00:24:52,580
beetje raar.

510
00:24:52,580 --> 00:24:55,640
Het is dollarteken.

511
00:24:55,640 --> 00:24:57,010
Het is gewoon een naam van een functie.

512
00:24:57,010 --> 00:24:58,810
Er is niets bijzonders aan.

513
00:24:58,810 --> 00:25:00,450
>> We hebben een open haakjes.

514
00:25:00,450 --> 00:25:03,880
Dan hebben we onze een argument dat
in dit geval toevallig een string,

515
00:25:03,880 --> 00:25:05,680
die een selector voor.

516
00:25:05,680 --> 00:25:08,130
En dan hebben we onze
gesloten haakjes.

517
00:25:08,130 --> 00:25:09,960
Dat is het.

518
00:25:09,960 --> 00:25:11,500
>> Het is niet zo enorm verschillend.

519
00:25:11,500 --> 00:25:12,900
Hoewel, ziet het er heel raar.

520
00:25:12,900 --> 00:25:17,220
En dat kan, een soort, een knelpunt te zijn
punt voor veel mensen.

521
00:25:17,220 --> 00:25:21,460
>> MIKE RIZZO: Dus op dezelfde manier, als we wilden
een element dat een ID heeft selecteren,

522
00:25:21,460 --> 00:25:23,470
nu willen we door te selecteren
ID in plaats van klasse.

523
00:25:23,470 --> 00:25:28,080
Het zou iets dergelijks waar we
gewoon doen de scherpe teken voor ID.

524
00:25:28,080 --> 00:25:33,576
Dus zijn we hier de selectie van alle
elementen die ID bar.

525
00:25:33,576 --> 00:25:35,400
>> TOMAS REIMERS: En dit verlengt.

526
00:25:35,400 --> 00:25:36,450
Dat CSS uitstrekt.

527
00:25:36,450 --> 00:25:42,260
Net als in CSS, kunt u alle selecteren
links, die de klasse foo hebben.

528
00:25:42,260 --> 00:25:43,420
Hier, het is hetzelfde.

529
00:25:43,420 --> 00:25:52,750
>> Je zou a.foo doen, wat zou selecteren
alle koppelingen met de klas foo.

530
00:25:52,750 --> 00:25:58,860
Je kon een scherpe bar doen, wat zou
selecteert u de koppeling met de ID-bar en zo

531
00:25:58,860 --> 00:25:59,770
, enzovoort.

532
00:25:59,770 --> 00:26:02,120
Elke CSS selector is een geldige
jQuery selector.

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

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

535
00:26:07,996 --> 00:26:11,460
OK, dus nu laten we in een klein beetje
van manipulatie die we kunnen doen met

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

537
00:26:12,870 --> 00:26:19,280
Dus jQuery heeft een bepaald type
notatie waar we gewoon gebruik

538
00:26:19,280 --> 00:26:20,170
een punt op het einde.

539
00:26:20,170 --> 00:26:23,340
En je kunt bedenken in deze trant in
C hoe we hadden verschillende constructen.

540
00:26:23,340 --> 00:26:27,110
En in die structs te gaan, zou je
Gebruik een punt te krijgen in hen.

541
00:26:27,110 --> 00:26:28,480
>> Dit is, een soort van, iets dergelijks.

542
00:26:28,480 --> 00:26:33,570
Pas nu hebben we functies binnen deze
selector waarmee we kunnen bellen op.

543
00:26:33,570 --> 00:26:38,640
Dus hier, het eerste voorbeeld
je kunt zien is een CSS-selector.

544
00:26:38,640 --> 00:26:45,290
En eigenlijk, wat dat doet is het
past het eerste element CSS deze

545
00:26:45,290 --> 00:26:46,230
ding dat je geselecteerd -

546
00:26:46,230 --> 00:26:47,720
dit element dat u geselecteerd -

547
00:26:47,720 --> 00:26:49,290
met de waarde die.

548
00:26:49,290 --> 00:26:55,390
>> TOMAS REIMERS: Dus een eenvoudige vertaling van
dat zou zijn als jQuery, principe,

549
00:26:55,390 --> 00:26:57,790
nam gewoon foo.

550
00:26:57,790 --> 00:27:05,480
En dan in CSS zei,
kleur rood en dicht.

551
00:27:05,480 --> 00:27:06,670
Het is hetzelfde idee.

552
00:27:06,670 --> 00:27:08,800
Wat het heeft gedaan is dat het geselecteerde
alle foo elementen.

553
00:27:08,800 --> 00:27:10,170
En dan is het toegepast.

554
00:27:10,170 --> 00:27:15,884
Soort, de eigenschap color
is gelijk aan rood.

555
00:27:15,884 --> 00:27:21,070
>> MIKE RIZZO: Op dezelfde manier kunnen we ook veranderen
de werkelijke inhoud van wat

556
00:27:21,070 --> 00:27:24,870
te zien op de HTML-code van de pagina, die
is echt cool, want het betekent dat uw

557
00:27:24,870 --> 00:27:28,095
webpagina's kunnen nu volledig dynamisch zijn
en hoeven niet statisch te zijn

558
00:27:28,095 --> 00:27:31,660
dat je uit te printen met behulp van PHP
aan het begin van

559
00:27:31,660 --> 00:27:33,320
de pagina wordt geladen.

560
00:27:33,320 --> 00:27:36,810
Dus hier, als we wilden veranderen de
eigenlijke HTML van de pagina, zouden we nu

561
00:27:36,810 --> 00:27:43,550
bellen met de HTML-functie, die dan gewoon
inserts wat we opgeven in

562
00:27:43,550 --> 00:27:45,390
dat element dat we geselecteerd.

563
00:27:45,390 --> 00:27:49,810
Dus hier zijn we selecteren element met
klasse foo en dan zeggen dat het HTML

564
00:27:49,810 --> 00:27:52,200
het is nu hello wereld.

565
00:27:52,200 --> 00:27:55,600
>> TOMAS REIMERS: En als je erover nadenkt
wat nuttige toepassingen van

566
00:27:55,600 --> 00:28:00,800
deze, deze CSS een, het eerste ding dat
kun je beginnen te denken over is

567
00:28:00,800 --> 00:28:03,070
in termen van zelfs drop-down menu's.

568
00:28:03,070 --> 00:28:08,350
Je zou kunnen beginnen om dingen zoals, doen als
een gebruiker over de top deel zweeft

569
00:28:08,350 --> 00:28:11,970
van een drop-down, je wilt maken
het onderste deel zichtbaar.

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

571
00:28:12,540 --> 00:28:15,610
>> Dus in CSS, we hebben eigenschappen
om iets zichtbaar te maken.

572
00:28:15,610 --> 00:28:19,330
Dingen als scherm colon none
zou het onzichtbaar maken.

573
00:28:19,330 --> 00:28:21,190
Weergaveblok zou het zichtbaar te maken.

574
00:28:21,190 --> 00:28:25,860
Of zelfs als u wilt eenvoudiger gaan, je
hebben dingen zoals zichtbaarheid gelijken

575
00:28:25,860 --> 00:28:27,520
zichtbaar, en zichtbaarheid gelijk verborgen.

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

577
00:28:30,330 --> 00:28:34,780
>> En je zou kunnen beginnen om dingen te implementeren
zoals drop-down menu rechts

578
00:28:34,780 --> 00:28:38,410
nadat je door de idee van hoe
kunt u achterhalen wanneer deze wordt geopend,

579
00:28:38,410 --> 00:28:39,850
die we door krijgt heel kort.

580
00:28:39,850 --> 00:28:42,160
Maar we kunnen beginnen om te zien
toepassingen van deze.

581
00:28:42,160 --> 00:28:45,540
In een soortgelijke zin, als je om te proberen
en uit te voeren, laten we zeggen, een praatje

582
00:28:45,540 --> 00:28:48,620
motor en je wilt een beetje te maken
tekstballon komen wanneer je hebt

583
00:28:48,620 --> 00:28:52,880
kreeg een nieuwe bericht, als je eenmaal de
nieuw bericht, kunt u een beetje te maken

584
00:28:52,880 --> 00:28:55,890
tekstballon komen door het veranderen
de HTML-code van de pagina, toch?

585
00:28:55,890 --> 00:29:00,540
Door het toevoegen van dat extra tekstballon
met de extra tekst in.

586
00:29:00,540 --> 00:29:01,140
Yeah?

587
00:29:01,140 --> 00:29:07,750
>> PUBLIEK: Dus je zou dit in te bedden
de HTML-code in als een soort

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

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

590
00:29:12,940 --> 00:29:16,190
Ja, we krijgen dat
in een klein beetje.

591
00:29:16,190 --> 00:29:18,810
Ja, het is vergelijkbaar een
beetje PHP.

592
00:29:18,810 --> 00:29:21,240
Niet echt vergelijkbaar.

593
00:29:21,240 --> 00:29:24,730
>> Een goed onderscheid te maken is wat dit
is eigenlijk het bewerken toen we bewerken

594
00:29:24,730 --> 00:29:28,480
de pagina omdat het niet gaat worden
het bewerken van de eigenlijke bestand dat wordt

595
00:29:28,480 --> 00:29:31,380
op de server onderhouden omdat de wereld
moet toestemming niet hebben

596
00:29:31,380 --> 00:29:32,610
om uw bestanden te bewerken.

597
00:29:32,610 --> 00:29:36,080
Dit is gewoon het bewerken van wat er op de pagina
en wat er wordt binnen getoond

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

599
00:29:36,950 --> 00:29:40,340
Dus als je naar de pagina na het herladen,
zeggen, iets verwijderen wij

600
00:29:40,340 --> 00:29:44,730
zien we kunnen doen met het verwijderen gesprek
dat ding zou dan weer verschijnen.

601
00:29:44,730 --> 00:29:48,590
>> TOMAS REIMERS: Dus een manier om na te denken over
dit is als ik de computer en

602
00:29:48,590 --> 00:29:50,170
Mike is, een soort van, de server.

603
00:29:50,170 --> 00:29:53,850
Wat er gaat gebeuren is dat ik ga
vraagt ​​Mike, hey, kan ik een kopie van

604
00:29:53,850 --> 00:29:54,630
deze webpagina?

605
00:29:54,630 --> 00:29:56,190
En hij zal mij een kopie van te geven.

606
00:29:56,190 --> 00:29:57,430
>> Nee, het is niet de originele ding.

607
00:29:57,430 --> 00:29:58,620
Het is gewoon een kopie.

608
00:29:58,620 --> 00:30:00,450
En dan het zou zijn, oh,
er is hier webbrowser.

609
00:30:00,450 --> 00:30:02,450
Het is duidelijk dat ik bewerk de
pagina te worden als deze.

610
00:30:02,450 --> 00:30:04,250
En ik ben het bewerken van uw exemplaar.

611
00:30:04,250 --> 00:30:05,920
>> Maar dat is niet het uitvoeren van
de werkelijke kopie.

612
00:30:05,920 --> 00:30:08,480
En als ik hem opnieuw vragen
Vernieuw de pagina, -

613
00:30:08,480 --> 00:30:10,060
hey, ik heb nog een schoon exemplaar -

614
00:30:10,060 --> 00:30:11,440
hij gaat me
ander schoon exemplaar.

615
00:30:11,440 --> 00:30:14,240
En dan ga ik hetzelfde doen
zoals, oh, dit JS hier die zegt

616
00:30:14,240 --> 00:30:14,866
deze bewerken.

617
00:30:14,866 --> 00:30:17,460
En ik ga blijven doen.

618
00:30:17,460 --> 00:30:20,930
>> MIKE RIZZO: Dus een echt cool ding
dat je kunt doen met jQuery is

619
00:30:20,930 --> 00:30:24,350
daadwerkelijk toe te voegen verschillende types
van animaties aan uw pagina.

620
00:30:24,350 --> 00:30:27,440
Ik weet niet of je ooit hebt gezien waar
je probeert om een ​​een formulier invullen

621
00:30:27,440 --> 00:30:31,250
online en je hoeft niet invullen
de dingen correct.

622
00:30:31,250 --> 00:30:33,440
Dus een klein ding glijdt
aan de bovenkant en zegt dat je

623
00:30:33,440 --> 00:30:34,820
hebben dit niet correct gedaan.

624
00:30:34,820 --> 00:30:36,260
Probeer het opnieuw.

625
00:30:36,260 --> 00:30:37,890
En dan is het misschien zelfs alleen maar omhoog schuiven.

626
00:30:37,890 --> 00:30:40,710
>> Blijkt jQuery heeft ingebouwde functies
die maken dat alles

627
00:30:40,710 --> 00:30:44,180
animatie echt, echt makkelijk.

628
00:30:44,180 --> 00:30:46,750
Er is dus eerst de fade
out functie, die

629
00:30:46,750 --> 00:30:47,710
u kunt bellen op iets.

630
00:30:47,710 --> 00:30:55,650
En het is een manier om de CSS van veranderen
dat element in een geanimeerde manier.

631
00:30:55,650 --> 00:30:58,480
Dus het duurt wat element
jullie noemen het fade-out op.

632
00:30:58,480 --> 00:31:03,990
En dan, verandert langzaam het is dekking
totdat gaat volledig transparant.

633
00:31:03,990 --> 00:31:07,330
>> TOMAS REIMERS: De andere populaire
wordt naar beneden glijden, die zorgt ervoor

634
00:31:07,330 --> 00:31:08,800
iets lijken door het omlaag te schuiven.

635
00:31:08,800 --> 00:31:12,840
Dus in het geval van het drop-down menu,
weer, toen we geleerd hoe op te sporen

636
00:31:12,840 --> 00:31:15,310
wanneer dit is zweefde boven,
je kon gewoon vertellen deze bottom

637
00:31:15,310 --> 00:31:16,910
deel schuift nu naar beneden.

638
00:31:16,910 --> 00:31:19,270
En dan lijkt het erop
door naar beneden glijden.

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

640
00:31:22,042 --> 00:31:26,590
>> MIKE RIZZO: En dan, als je gewoon
een soort van animatie in het achterhoofd dat

641
00:31:26,590 --> 00:31:29,080
jQuery niet noodzakelijkerwijs.

642
00:31:29,080 --> 00:31:32,690
Bijvoorbeeld, laten we zeggen jQuery
doet u voorzien van een glijbaan

643
00:31:32,690 --> 00:31:33,750
omlaag en omhoog schuiven.

644
00:31:33,750 --> 00:31:36,740
Nou, laten we zeggen dat je wilde schuiven
iets van links of van

645
00:31:36,740 --> 00:31:39,880
de juiste soort als de CS50
hoofdpagina doet wanneer

646
00:31:39,880 --> 00:31:42,080
je naar een nieuw paneel.

647
00:31:42,080 --> 00:31:45,030
Je zou dan waarschijnlijk moeten
zelf uit te voeren met behulp van de

648
00:31:45,030 --> 00:31:49,310
animeren functie binnen jQuery.

649
00:31:49,310 --> 00:31:51,350
>> Zo ook is, je gewoon animeren.

650
00:31:51,350 --> 00:31:55,850
En dan, binnen het duurt een
woordenboek van de verschillende waarden

651
00:31:55,850 --> 00:31:57,340
dat je zou moeten passeren.

652
00:31:57,340 --> 00:32:06,960
Dus hier, als we wilden animeren de
element foo zodat de breedte of

653
00:32:06,960 --> 00:32:10,880
uitzet of krimpt naar 80 pixels,
afhankelijk van wat het nu is.

654
00:32:10,880 --> 00:32:14,100
We zouden net voorbij dat als
het argument binnen het.

655
00:32:14,100 --> 00:32:18,060
>> Animeren ook een aantal andere argumenten
dat je het kon overgaan, bijvoorbeeld

656
00:32:18,060 --> 00:32:21,150
de snelheid van de animatie
dat u wilt geven.

657
00:32:21,150 --> 00:32:26,220
En om dat te doen, zou ik zeggen
snel Google jQuery animeren.

658
00:32:26,220 --> 00:32:31,710
En dan, de opvoeding van deze pagina, kunt u
zie het heeft een heleboel verschillende

659
00:32:31,710 --> 00:32:33,560
eigenschappen die je het kunt doorgeven.

660
00:32:33,560 --> 00:32:35,990
>> En ik moedig u - wanneer u komt
over iets dat je niet

661
00:32:35,990 --> 00:32:40,390
kennen of gewoon meer wilt weten over een leren
specifieke methode die u kunt bellen

662
00:32:40,390 --> 00:32:41,270
op iets -

663
00:32:41,270 --> 00:32:44,440
gewoon Google het. jQuery is uiterst
goed gedocumenteerd.

664
00:32:44,440 --> 00:32:49,140
En vaak zijn er een heleboel
voorbeelden die zij voor u verzorgen.

665
00:32:49,140 --> 00:32:52,470
Als we scroll naar beneden -

666
00:32:52,470 --> 00:32:53,720
weg naar beneden -

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

668
00:32:57,660 --> 00:32:59,190
die we kunnen gebruiken, als goed.

669
00:32:59,190 --> 00:33:02,480
>> Ook wanneer een ontwikkelaar daadwerkelijk gaat
de moeite van het schrijven van een

670
00:33:02,480 --> 00:33:05,810
bibliotheek, ze meestal willen
iemand om het te gebruiken.

671
00:33:05,810 --> 00:33:09,400
Dus naast gaat
zijn een documentatiecentrum.

672
00:33:09,400 --> 00:33:12,270
En die documentatie kan meestal worden
vinden op de project pagina, die is

673
00:33:12,270 --> 00:33:14,970
waarom wij u gegeven dat de oorspronkelijke site in
het begin, die u verbindt met de

674
00:33:14,970 --> 00:33:18,080
project pagina's, zodat u kunt
zien dat de documentatie.

675
00:33:18,080 --> 00:33:22,670
>> Typisch, de project pagina in het geval
van [onverstaanbaar], het geeft je de verteld

676
00:33:22,670 --> 00:33:23,940
namen van de klassen.

677
00:33:23,940 --> 00:33:27,250
Bij JavaScript, geeft
de naam van de functies.

678
00:33:27,250 --> 00:33:35,310
By the way, als we omhoog naar de top,
een snelle kanttekening over de functies is

679
00:33:35,310 --> 00:33:39,080
wanneer u een functie geïmplementeerd zien
als dit met de harde

680
00:33:39,080 --> 00:33:43,800
haakjes in het midden, dat betekent
dat die eigenschap is optioneel.

681
00:33:43,800 --> 00:33:44,750
Slechts een hoofd.

682
00:33:44,750 --> 00:33:47,350
Ik heb een heleboel vragen gezien
daarover.

683
00:33:47,350 --> 00:33:50,370
>> Dus hier kunnen we zien dat de
bezielde neemt eigenschappen

684
00:33:50,370 --> 00:33:51,800
als noodzakelijke argument.

685
00:33:51,800 --> 00:33:54,870
En al het andere is optioneel.

686
00:33:54,870 --> 00:33:56,136
Side note -

687
00:33:56,136 --> 00:33:58,090
kunt u denken aan deze, soort
van, zoals man-pagina's.

688
00:33:58,090 --> 00:34:04,275
Man pages zijn documentatie voor C en
voor een heleboel andere dingen, als goed.

689
00:34:04,275 --> 00:34:11,020
>> MIKE RIZZO: Dus we hebben geleerd hoe te
veranderen verschillende CSS op de pagina,

690
00:34:11,020 --> 00:34:14,040
animeren, en verwijderen toevoegen HTML.

691
00:34:14,040 --> 00:34:16,889
Maar een van de echt meest krachtige
dingen over JavaScript

692
00:34:16,889 --> 00:34:18,270
en vooral jQuery -

693
00:34:18,270 --> 00:34:22,570
wat kun je doen is reageren op
verschillende elementen die gebeuren.

694
00:34:22,570 --> 00:34:25,380
Zo, hier hebben we
een event handler.

695
00:34:25,380 --> 00:34:28,210
En dat betekent alleen wanneer deze
gebeurtenis plaatsvindt, behandelen we het in een

696
00:34:28,210 --> 00:34:29,280
bepaalde manier.

697
00:34:29,280 --> 00:34:35,159
>> Dus hier, de generieke jQuery evenement
handler is de stip op.

698
00:34:35,159 --> 00:34:42,949
En dan, het eerste wat je bedoeld
is welke gebeurtenis het zou moeten

699
00:34:42,949 --> 00:34:43,810
luisteren voor.

700
00:34:43,810 --> 00:34:45,610
Dus hier, het is de klik die
we wachten.

701
00:34:45,610 --> 00:34:49,250
>> TOMAS REIMERS: Of je hebt
bij aanwijzen, dat is een zeer populair is.

702
00:34:49,250 --> 00:34:52,000
Dus terug naar mijn drop down menu idee.

703
00:34:52,000 --> 00:34:54,239
Je zou de top een bij aanwijzen hebben.

704
00:34:54,239 --> 00:34:56,096
En dan kun je dat veranderen.

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

706
00:34:56,830 --> 00:35:01,680
En dan, wanneer dat gebeurt, het is gewoon
voert deze functie die we geven

707
00:35:01,680 --> 00:35:05,080
als argument en dat
waarschuwt hallo of hoi.

708
00:35:05,080 --> 00:35:08,900
>> TOMAS REIMERS: Dus in het geval van
JavaScript, is dit een plaats waar we moeten

709
00:35:08,900 --> 00:35:12,970
onszelf te verwijderen uit C. We kunnen eigenlijk
neem functies als argumenten.

710
00:35:12,970 --> 00:35:15,940
En er zijn een heleboel echt
complexe manieren om dit te doen.

711
00:35:15,940 --> 00:35:17,940
We gaan op een manier te bevorderen,
die u kunt definiëren de

712
00:35:17,940 --> 00:35:19,270
functioneren daar.

713
00:35:19,270 --> 00:35:22,540
>> Dus als je vraagt ​​voor een functie als
een parameter, je eigenlijk bent gewoon

714
00:35:22,540 --> 00:35:24,500
naar de functie te definiëren
ter plaatse.

715
00:35:24,500 --> 00:35:27,090
En de manier waarop u een functie definiëren
in JavaScript is u

716
00:35:27,090 --> 00:35:28,820
functie letterlijk zeggen.

717
00:35:28,820 --> 00:35:30,130
Vervolgens, meestal, de naam
van de functie.

718
00:35:30,130 --> 00:35:32,510
Maar we gaan nooit verwijzen
opnieuw deze functie.

719
00:35:32,510 --> 00:35:34,040
Dus laten we het naamloos.

720
00:35:34,040 --> 00:35:40,440
>> Dan haakjes dan de gekrulde
bretels, en vervolgens de code in die.

721
00:35:40,440 --> 00:35:42,540
Dus we begrijpen dit blikje
een beetje verwarrend.

722
00:35:42,540 --> 00:35:45,180
Dus geven wij u de algemene vorm van
wat een event handler ziet er als

723
00:35:45,180 --> 00:35:47,790
hieronder, die op gebeurtenissen.

724
00:35:47,790 --> 00:35:50,598
En dan, uw code in die.

725
00:35:50,598 --> 00:35:52,478
>> MIKE RIZZO: Zijn er
vragen over dit?

726
00:35:52,478 --> 00:35:54,818
Dit kan een beetje verwarrend
de eerste keer dat je het ziet.

727
00:35:54,818 --> 00:35:57,550
>> TOMAS REIMERS: U wilt eigenlijk
het openen van een bestand en ze te laten zien wat

728
00:35:57,550 --> 00:35:58,155
jQuery op dit moment?

729
00:35:58,155 --> 00:35:59,853
>> MIKE RIZZO: Ja, laten we dat doen.

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

731
00:36:00,256 --> 00:36:02,490
>> TOMAS REIMERS: Dus nu zijn we
in het toestel.

732
00:36:02,490 --> 00:36:07,730
En wat we hebben gedaan is dat we hebben genomen de
vrijheid van het creëren van zowel een index.html

733
00:36:07,730 --> 00:36:10,100
file, die links naar
een JavaScript-bestand.

734
00:36:10,100 --> 00:36:12,880
En kunnen we het openstellen van de -

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

736
00:36:15,170 --> 00:36:16,630
Nou, het doet twee dingen.

737
00:36:16,630 --> 00:36:18,350
>> De eerste is het linkt aan
het bestand webbrowser.

738
00:36:18,350 --> 00:36:21,250
En we zullen zien dat hier.

739
00:36:21,250 --> 00:36:25,340
We zien dat in het hoofd van de
HTML-document, in het bijzonder.

740
00:36:25,340 --> 00:36:28,260
Dus je zult daar zien dat
we, in principe, zeggen SRC,

741
00:36:28,260 --> 00:36:29,590
staat voor bron.

742
00:36:29,590 --> 00:36:30,630
En dat is de URL.

743
00:36:30,630 --> 00:36:32,700
>> Dus hier kun je zeggen dat we
Inclusief jQuery.

744
00:36:32,700 --> 00:36:34,290
En we hebben ook scripts.

745
00:36:34,290 --> 00:36:40,630
De andere manier om JavaScript behoren is
dat u kunt beschikken over een inline script

746
00:36:40,630 --> 00:36:44,600
tag zoals we bij de bodem, waar het
zegt script type is tekst webbrowser.

747
00:36:44,600 --> 00:36:46,960
>> Dus we zeggen, luister, we zijn
ongeveer om een ​​script toe te voegen.

748
00:36:46,960 --> 00:36:51,890
En het soort dat script
JavaScript, dat is een soort van tekst.

749
00:36:51,890 --> 00:36:52,550
Heel simpel.

750
00:36:52,550 --> 00:36:56,490
>> MIKE RIZZO: Dus dit, soort, krijgt
je vraag over hoe we behoren

751
00:36:56,490 --> 00:37:02,340
JavaScript in onze bestanden, want als we
hadden PHP, we zoiets doen.

752
00:37:02,340 --> 00:37:07,570
En dan hebben onze PHP-functies -
laten we zeggen dat de voorraden doen

753
00:37:07,570 --> 00:37:09,150
iets met dat -

754
00:37:09,150 --> 00:37:10,490
gaat daar.

755
00:37:10,490 --> 00:37:13,860
Maar nu hebben we de script-tags
dat we geven, die eigenlijk

756
00:37:13,860 --> 00:37:19,470
deel van de HTML zelf, want het is niet
faken dat een HTML-bestand als het

757
00:37:19,470 --> 00:37:25,070
is in PHP, want als je ook daadwerkelijk te gaan in
en kijken naar de bron van de pagina,

758
00:37:25,070 --> 00:37:28,430
u zult deze script-tags zien daar
met de JavaScript in verband met

759
00:37:28,430 --> 00:37:29,800
ze in die.

760
00:37:29,800 --> 00:37:31,760
>> Zo dan, als we wilden
schrijf een aantal JavaScript -

761
00:37:31,760 --> 00:37:37,110
laten we gewoon zeggen dat we wilden lichaam te veranderen
want nu heb ik niet

762
00:37:37,110 --> 00:37:40,020
alle andere tags die ik kan echt
bewerken naast lichaam.

763
00:37:40,020 --> 00:37:42,450
Laten we zeggen dat ik wilde
wijzigt de CSS van dat.

764
00:37:42,450 --> 00:37:46,190
Dus we zullen verder gaan en verandering
de kleur ervan naar rood.

765
00:37:46,190 --> 00:37:47,380
>> Dus ik sla het bestand op.

766
00:37:47,380 --> 00:37:52,700
Laten we teruggaan naar onze website te gaan, vernieuwen,
en het doet het automatisch

767
00:37:52,700 --> 00:37:55,920
want het leek niet alsof hij wachtte
helemaal omdat we niet luisteren

768
00:37:55,920 --> 00:37:59,450
voor een evenement of iets dergelijks.

769
00:37:59,450 --> 00:38:02,800
>> TOMAS REIMERS: Dus als we terug gaan naar die
dossier in het bijzonder - de HTML

770
00:38:02,800 --> 00:38:04,710
file - wat je gaat
om te zien is dat we hebben -

771
00:38:04,710 --> 00:38:06,810
vergeet niet dat deze is geladen,
soort, chronologisch.

772
00:38:06,810 --> 00:38:09,910
Dus hebben we eerst het hoofd.
laadt deze twee bestanden.

773
00:38:09,910 --> 00:38:10,800
Dan gaan we naar het lichaam.

774
00:38:10,800 --> 00:38:11,640
En we zien hello wereld.

775
00:38:11,640 --> 00:38:13,030
Dus maken we hello wereld.

776
00:38:13,030 --> 00:38:15,240
>> En dan is het laatste wat we hebben
is hebben we de script-tag.

777
00:38:15,240 --> 00:38:20,880
Het loopt zo de script-tag, want het is
het niet te vertellen om te wachten op iets.

778
00:38:20,880 --> 00:38:24,700
En dat is de meest elementaire
manier om JavaScript uit te voeren.

779
00:38:24,700 --> 00:38:29,200
>> Met dat gezegd, kan je het script
tag in de header net

780
00:38:29,200 --> 00:38:31,240
om dit punt te laten zien?

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

782
00:38:34,450 --> 00:38:35,700
En lopen dat.

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

784
00:38:38,880 --> 00:38:41,070
We gaan merken dat het
heeft de kleur veranderen.

785
00:38:41,070 --> 00:38:44,210
Dit is een van de problemen van
Javascript is dat de dingen zijn geladen

786
00:38:44,210 --> 00:38:45,930
in een chronologische volgorde.

787
00:38:45,930 --> 00:38:49,750
>> Dus op het moment dat die code
liep, hebben we gekozen -

788
00:38:49,750 --> 00:38:52,530
ga terug -

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

790
00:38:53,670 --> 00:38:57,560
De body-tag bestaat nog niet omdat
Javascript is in lijn met HTML.

791
00:38:57,560 --> 00:39:01,790
Dus de browser is net als select lichaam.

792
00:39:01,790 --> 00:39:02,760
Er is niet zoiets nog.

793
00:39:02,760 --> 00:39:03,600
Dus we kunnen negeren.

794
00:39:03,600 --> 00:39:05,330
En we blijven gaan.

795
00:39:05,330 --> 00:39:07,200
>> En dan bepalen we een body-tag.

796
00:39:07,200 --> 00:39:09,670
Maar dat wordt nooit bijgewerkt.

797
00:39:09,670 --> 00:39:12,560
Dus als je de uitvoering script
-tags, zorg ervoor dat je plaatst

798
00:39:12,560 --> 00:39:15,502
na de body-tag.

799
00:39:15,502 --> 00:39:16,820
Volgende dia.

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

801
00:39:17,830 --> 00:39:19,330
Dus hebben we iets veranderd.

802
00:39:19,330 --> 00:39:21,910
Maar het zag er niet uit alsof het gereageerd op
ons helemaal omdat het gewoon een soort van

803
00:39:21,910 --> 00:39:24,150
deed het zodra het laden van de pagina.

804
00:39:24,150 --> 00:39:27,700
Nu, in plaats van dit te doen, waarom
doen we niet toevoegen een event handler.

805
00:39:27,700 --> 00:39:31,020
>> Dus laten we iets doen
het lichaam weer.

806
00:39:31,020 --> 00:39:33,490
En laten we zeggen dat we doen het op -

807
00:39:33,490 --> 00:39:34,500
klik.

808
00:39:34,500 --> 00:39:35,750
We zullen een functie toe te voegen.

809
00:39:35,750 --> 00:39:38,270

810
00:39:38,270 --> 00:39:39,690
>> Verandering Let's: TOMAS REIMERS
het is de kleur rood weer.

811
00:39:39,690 --> 00:39:40,000
Waarom niet?

812
00:39:40,000 --> 00:39:41,680
>> MIKE RIZZO: Ja, laten we verandering
haar 'kleur weer rood.

813
00:39:41,680 --> 00:39:46,310

814
00:39:46,310 --> 00:39:46,900
Oke.

815
00:39:46,900 --> 00:39:48,480
Dus laten we de pagina geladen is.

816
00:39:48,480 --> 00:39:49,530
OK, zien we -

817
00:39:49,530 --> 00:39:52,290
zoals verwacht, niet rood nog draaien.

818
00:39:52,290 --> 00:39:53,610
Maar dan kunnen we verder gaan en klik erop.

819
00:39:53,610 --> 00:39:54,270
>> TOMAS REIMERS: En het maakt rood.

820
00:39:54,270 --> 00:39:56,090
>> MIKE RIZZO: En het doet
rood zoals verwacht.

821
00:39:56,090 --> 00:39:59,010
>> TOMAS REIMERS: En we kunnen zien hoe
we kunnen beginnen met bouwen zeer basic

822
00:39:59,010 --> 00:40:00,170
interactie.

823
00:40:00,170 --> 00:40:03,850
Andere dingen die we zouden willen doen is,
als we niet willen het lichaam te maken

824
00:40:03,850 --> 00:40:07,230
Kleur rood, laten we de HTML
achtergrond kleur rood.

825
00:40:07,230 --> 00:40:08,480
Net zo is het hetzelfde CSS.

826
00:40:08,480 --> 00:40:19,960

827
00:40:19,960 --> 00:40:23,320
>> En als we veranderen, kunnen we dit zien
zeer dramatisch effect van het veranderen van de

828
00:40:23,320 --> 00:40:25,510
hele pagina.

829
00:40:25,510 --> 00:40:29,100
Dus nogmaals, als je de uitvoering van dingen,
U kunt een component hebben

830
00:40:29,100 --> 00:40:30,150
die is bedoeld om te worden geklikt.

831
00:40:30,150 --> 00:40:32,710
Laten we zeggen dat een Exit-knop en
een hele andere component,

832
00:40:32,710 --> 00:40:33,830
die bedoeld is om te reageren.

833
00:40:33,830 --> 00:40:35,755
Dus je zou een raam te verwijderen
wanneer dat gebeurt.

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
Net als een voorbeeld -

837
00:40:42,200 --> 00:40:44,400
je niet krijgen om dit eerder te zien -

838
00:40:44,400 --> 00:40:47,500
Ik zal even laten zien hoe het eruit
leuk als we iets te verbergen.

839
00:40:47,500 --> 00:40:52,220
Dus ik zal doorgaan en niet omhoog schuiven.

840
00:40:52,220 --> 00:40:54,440
>> TOMAS REIMERS: Wil wikkel deze in
Type paragraaf voordat we dat doen?

841
00:40:54,440 --> 00:40:55,132
>> MIKE RIZZO: OK.

842
00:40:55,132 --> 00:40:59,135
Ja, waarom niet wij doen dat net zo
we kunnen het selecteren een beetje meer.

843
00:40:59,135 --> 00:41:00,490
>> TOMAS REIMERS: En laten we
geef het een klasse.

844
00:41:00,490 --> 00:41:01,740
>> MIKE RIZZO: Yeah.

845
00:41:01,740 --> 00:41:06,575

846
00:41:06,575 --> 00:41:09,920
OK, dus laten we zien.

847
00:41:09,920 --> 00:41:14,820
In plaats van het selecteren van het eigenlijke lichaam
nu, ik zal gewoon alles selecteren met

848
00:41:14,820 --> 00:41:18,780
klasse hello, die we hier
gewoon een ding.

849
00:41:18,780 --> 00:41:20,900
Dus moeten we niet te
zorgen over.

850
00:41:20,900 --> 00:41:23,080
>> Dus ik zal het vernieuwen.

851
00:41:23,080 --> 00:41:24,230
Ik zal doorgaan en klik erop.

852
00:41:24,230 --> 00:41:27,890
En het, soort van, deed een vreemde dia
up ding, dat zag er niet zo

853
00:41:27,890 --> 00:41:29,580
aantrekkelijk.

854
00:41:29,580 --> 00:41:31,060
Over het algemeen zien ze er vrij aardig.

855
00:41:31,060 --> 00:41:32,720
Ik denk dat dit - voor sommige
reden dan ook - niet.

856
00:41:32,720 --> 00:41:36,640
Ik zal gewoon een fade out, zodat
ook u kunt kijken.

857
00:41:36,640 --> 00:41:38,100
Veel mooier.

858
00:41:38,100 --> 00:41:41,150
>> En dan, als ik open de webbrowser
troosten weer en we willen zien wat

859
00:41:41,150 --> 00:41:43,900
het lijkt erop dat als we verdwijnen in het stopcontact

860
00:41:43,900 --> 00:41:46,920
Nu, ik bel vervagen op.

861
00:41:46,920 --> 00:41:48,830
En het vervaagt opnieuw

862
00:41:48,830 --> 00:41:56,150
>> Op dezelfde manier kunnen we eigenlijk ook doorgeven
een argument om in te faden of fade-out,

863
00:41:56,150 --> 00:41:57,640
die, soort, de snelheid ervan.

864
00:41:57,640 --> 00:42:02,220
Dus laten we verder gaan en zeggen dat we willen
het langzaam gaan vervagen inch

865
00:42:02,220 --> 00:42:04,250
Dus ik denk dat het nog steeds leek
vrij snel.

866
00:42:04,250 --> 00:42:06,180
Maar het was trager dan voorheen.

867
00:42:06,180 --> 00:42:10,340
>> TOMAS REIMERS: En als je wilt weten
Meer informatie over deze dingen, nogmaals,

868
00:42:10,340 --> 00:42:13,410
gewoon naar de jQuery documentatie,
die wij je hebt gegeven, en lees

869
00:42:13,410 --> 00:42:13,735
door deze.

870
00:42:13,735 --> 00:42:15,790
Ze beschrijven hun functies
ongelooflijk goed.

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
Dus ik denk dat laten we terugkeren naar deze te gaan.

874
00:42:21,560 --> 00:42:23,490
En we kunnen praten over onze laatste pagina.

875
00:42:23,490 --> 00:42:24,690
Nou, we kunnen eindigen met Bootstrap.

876
00:42:24,690 --> 00:42:27,140
En dan zullen we het te openen
voor een aantal vragen.

877
00:42:27,140 --> 00:42:30,180
En als jullie nog ideeën die
je wilt proberen om te gooien en te zien

878
00:42:30,180 --> 00:42:34,150
als we ze kunnen implementeren met
JavaScript snel.

879
00:42:34,150 --> 00:42:37,890
>> Dus echt snel over Bootstrap, die
werd automatisch opgenomen in

880
00:42:37,890 --> 00:42:41,700
uw laatste probleem in de map CSS
en eigenlijk gekoppeld aan uw

881
00:42:41,700 --> 00:42:43,190
header.php.

882
00:42:43,190 --> 00:42:46,740
Dus kon je lessen hebt toegevoegd dat
gedefinieerd in Bootstrap aan.

883
00:42:46,740 --> 00:42:50,490
En het zou automatisch hebben vormgegeven
die dingen dienovereenkomstig.

884
00:42:50,490 --> 00:42:54,550
>> TOMAS REIMERS: Dus Bootstrap is een zeer
magische ding ontwikkeld door de mensen

885
00:42:54,550 --> 00:42:55,340
bij Twitter.

886
00:42:55,340 --> 00:42:57,230
En wat het moest doen was -

887
00:42:57,230 --> 00:43:00,740
voor websites waren echt moeilijk te maken
zien er leuk uit, vooral wanneer we hadden

888
00:43:00,740 --> 00:43:02,200
veel gemeenschappelijke componenten.

889
00:43:02,200 --> 00:43:04,770
Dus veel knoppen op de
web zag er hetzelfde uit.

890
00:43:04,770 --> 00:43:08,960
>> Veel tekstgebieden kunnen worden gemaakt
er beter uitzien dan de standaard tekst

891
00:43:08,960 --> 00:43:13,620
veld weet je waarschijnlijk van echt
oude websites of echt slecht gemaakt

892
00:43:13,620 --> 00:43:18,210
websites, die net uitzien als letterlijke
tekstvakken zonder afkomstig van

893
00:43:18,210 --> 00:43:21,190
schaduw of enige vorm van mooie schets.

894
00:43:21,190 --> 00:43:24,540
Dus wat Bootstrap deed was het zei, goed,
we hebben veel gemeen stijlen.

895
00:43:24,540 --> 00:43:28,210
Waarom gaan we niet maken een gemeenschappelijk pakket van CSS
en een gemeenschappelijke set van JavaScript als

896
00:43:28,210 --> 00:43:32,210
goed, wat kan stylen zoals is en welke
kunnen mensen dingen zoals drop geven

897
00:43:32,210 --> 00:43:34,610
down menu's, kunnen die mensen geven
dingen als hulpwerkwoorden.

898
00:43:34,610 --> 00:43:38,580
>> Modal is wat verschijnt op de pagina
wanneer het is strikt genomen

899
00:43:38,580 --> 00:43:41,090
iets, die verder remt
interactie tot u

900
00:43:41,090 --> 00:43:43,110
interactie met het.

901
00:43:43,110 --> 00:43:45,820
Zoiets als dit is, weet je het zeker
U wilt dit ding verwijderen?

902
00:43:45,820 --> 00:43:49,100
Je kunt niet echt iets anders te doen
totdat je ja of nee zeggen.

903
00:43:49,100 --> 00:43:52,720
>> Het duurde dit alles en het verpakte het
elkaar en zei, hier gaan we.

904
00:43:52,720 --> 00:43:54,630
Mensen kunnen nu gebruik maken van deze.

905
00:43:54,630 --> 00:43:56,830
En je kunt het vinden op
bij getbootstrap.com.

906
00:43:56,830 --> 00:44:00,480
Het werd automatisch opgenomen in
uw laatste probleem te stellen.

907
00:44:00,480 --> 00:44:04,160
En je meer dan welkom bent om
gebruik het op uw uiteindelijke project.

908
00:44:04,160 --> 00:44:06,950
En als je wilt volgen dat
verwijzen naar Bootstrap krijgen.

909
00:44:06,950 --> 00:44:10,590

910
00:44:10,590 --> 00:44:15,700
>> Je zult hier ziet is de
Bootstrap CSS website.

911
00:44:15,700 --> 00:44:16,860
Je zult zien Bootstrap.

912
00:44:16,860 --> 00:44:20,450
En als je naar beneden scrollt, zie je
hoe te downloaden, hoe te

913
00:44:20,450 --> 00:44:21,900
installeren, et cetera.

914
00:44:21,900 --> 00:44:24,700
>> MIKE RIZZO: En dat kan ook,
interessant genoeg, pas het aan

915
00:44:24,700 --> 00:44:27,770
worden wat voor soort thema's
die je wilt.

916
00:44:27,770 --> 00:44:31,270
Ik weet dat is iets wat ik deed voor mijn
afstudeerproject toen ik de klas

917
00:44:31,270 --> 00:44:32,050
werd pas het aan.

918
00:44:32,050 --> 00:44:34,540
Een andere versie van Bootstrap dat
had een ander kleurenschema en

919
00:44:34,540 --> 00:44:36,700
verschillende vormen van enkele
verschillende dingen.

920
00:44:36,700 --> 00:44:38,250
Dus moedig ik u om te spelen met dat.

921
00:44:38,250 --> 00:44:39,440
Het is wel leuk om te doen.

922
00:44:39,440 --> 00:44:43,230
>> TOMAS REIMERS: Kijkend over de top
nogmaals, het is zeer vergelijkbaar met de Font

923
00:44:43,230 --> 00:44:44,970
Ontzagwekkende plaats.

924
00:44:44,970 --> 00:44:47,810
Er is veel documentatie zal beginnen
te lijken vergelijkbaar wanneer je hebt

925
00:44:47,810 --> 00:44:48,940
gezien genoeg van.

926
00:44:48,940 --> 00:44:51,260
Dus hier hebben we de CSS
onderdeel.

927
00:44:51,260 --> 00:44:53,540
En je zult zien hoe het
dingen kunnen stylen.

928
00:44:53,540 --> 00:44:56,780
Dus als u klikt op de tafels, bijvoorbeeld,
kunt u direct maken van een

929
00:44:56,780 --> 00:45:01,710
tafel vrij door simpelweg het toevoegen
de klasse tafel aan.

930
00:45:01,710 --> 00:45:03,150
>> Dezelfde dingen voor knoppen.

931
00:45:03,150 --> 00:45:12,140
Als je gewoon voeg de klasse BTN en BTN
standaard of BTN primaire, kunt u

932
00:45:12,140 --> 00:45:16,240
krijgt een van deze knoppen
met deze pre-gemaakte stijlen.

933
00:45:16,240 --> 00:45:18,570
En dan, als je op zoek bent naar
iets complexer dan alleen

934
00:45:18,570 --> 00:45:24,100
restyling wat w al hebben, dan op
het tabblad JavaScript aan de bovenkant we

935
00:45:24,100 --> 00:45:25,120
heb een heleboel onderdelen.

936
00:45:25,120 --> 00:45:30,410
>> Dus hier hebben we overgangen, hulpwerkwoorden,
dropdowns, tabs en tooltips.

937
00:45:30,410 --> 00:45:35,530
Een tooltip is wat opduikt onder uw
muis wanneer u de muisaanwijzer op iets.

938
00:45:35,530 --> 00:45:40,280
Popovers, waarschuwingen, knoppen, inklapbaar
accordeons is wat

939
00:45:40,280 --> 00:45:41,190
ze meestal genoemd.

940
00:45:41,190 --> 00:45:43,045
Carrousels, die flip
door middel van beelden.

941
00:45:43,045 --> 00:45:52,190

942
00:45:52,190 --> 00:45:54,840
>> Dus dat zijn de componenten
van Bootstrap.

943
00:45:54,840 --> 00:45:57,620
Ik wil u aanmoedigen om
zeer gaan kijken naar hen.

944
00:45:57,620 --> 00:46:01,780
Er is een component JavaScript
en CSS component.

945
00:46:01,780 --> 00:46:03,880
Voel je vrij om ze te gebruiken als je wil.

946
00:46:03,880 --> 00:46:06,730
We gaan niet te veel gaan in hen
omdat wij vinden de documentatie

947
00:46:06,730 --> 00:46:09,360
is echt goed gedaan.

948
00:46:09,360 --> 00:46:10,540
En ja.

949
00:46:10,540 --> 00:46:14,500
Heeft u nog vragen over?

950
00:46:14,500 --> 00:46:19,430
>> MIKE RIZZO: Dus als een echt snelle
kant, het ontwerp van deze webpagina die

951
00:46:19,430 --> 00:46:21,830
we snel samen voor
deze presentatie is

952
00:46:21,830 --> 00:46:24,290
eigenlijk gedaan met behulp van Bootstrap.

953
00:46:24,290 --> 00:46:27,810
Zoals je kunt zien, als we op deze
verschillende tabbladen, we zijn eigenlijk nooit

954
00:46:27,810 --> 00:46:30,750
het verlaten van deze huidige index.html pagina.

955
00:46:30,750 --> 00:46:36,400
Dus wat we hebben is anders divs
binnen deze index.html.

956
00:46:36,400 --> 00:46:39,610
En dan, wanneer we op een ander
tabblad, het is gewoon het veranderen

957
00:46:39,610 --> 00:46:41,590
die iemands tonen.

958
00:46:41,590 --> 00:46:47,390
>> Dus dienovereenkomstig plaatst hen
verandert de HTML van de pagina, zodat

959
00:46:47,390 --> 00:46:52,330
het huidige tabblad wordt gemarkeerd als actief dus
het anders en ziet er verschijnt

960
00:46:52,330 --> 00:46:52,820
echt leuk.

961
00:46:52,820 --> 00:46:57,260
>> TOMAS REIMERS: Dus dat was allemaal gedaan
zonder ons te schrijven bijna elke CSS.

962
00:46:57,260 --> 00:47:01,440
We zien ook een header aan de bovenkant,
waarin de kleuren zijn door ons.

963
00:47:01,440 --> 00:47:04,800
Maar de werkelijke zetten het op de
boven aan de pagina en het maken van

964
00:47:04,800 --> 00:47:06,660
Het scroll was Bootstrap.

965
00:47:06,660 --> 00:47:09,720
En dan nog voor een andere bibliotheek - dit
is er niet een die we over gesproken, maar een

966
00:47:09,720 --> 00:47:11,580
U kunt Google als u wilt.

967
00:47:11,580 --> 00:47:15,130
Dit heet prettify.js.

968
00:47:15,130 --> 00:47:20,650
En het zal syntax highlight uw code
voor u met behulp van zowel CSS en JavaScript.

969
00:47:20,650 --> 00:47:23,480

970
00:47:23,480 --> 00:47:27,070
>> Het laatste wat we willen praten over
voordat we bevrijd je uit in de

971
00:47:27,070 --> 00:47:30,620
wereld te kijken naar bibliotheken om erachter te komen
hoe ze te gebruiken en, hopelijk,

972
00:47:30,620 --> 00:47:34,640
Lees documentatie en vinden wat je
behoefte is hoe bibliotheken te vinden.

973
00:47:34,640 --> 00:47:37,000
Dus de eerste is dat we gewoon
gaat duwen Google.

974
00:47:37,000 --> 00:47:37,810
Ga naar Google.

975
00:47:37,810 --> 00:47:41,150
>> Dat is letterlijk wat we doen als we
moeten iets doen is dat we Google.

976
00:47:41,150 --> 00:47:44,730
Is er een JavaScript-bibliotheek die
staat me toe om tijd te manipuleren in een

977
00:47:44,730 --> 00:47:45,400
handige manier?

978
00:47:45,400 --> 00:47:49,510
Dus als ik weet dat sommige gebruiker creëren
hier een account, en dit is de

979
00:47:49,510 --> 00:47:53,010
huidige tijd, hoe kan ik het berekenen van de
verschil dat hoeft

980
00:47:53,010 --> 00:47:55,020
bereken het zelf?

981
00:47:55,020 --> 00:47:59,630
Dus dit is eigenlijk een gemeenschappelijke zaak,
JavaScript tijd bibliotheek.

982
00:47:59,630 --> 00:48:02,440
En hier zijn we Moment.js--
de meest populaire.

983
00:48:02,440 --> 00:48:06,530
>> Als we behoefte aan een bibliotheek te manipuleren
zoiets als kleur kunnen

984
00:48:06,530 --> 00:48:08,650
het genereren van een aantal willekeurige kleuren -

985
00:48:08,650 --> 00:48:10,660
eventueel, voor het genereren van
stijl of iets -

986
00:48:10,660 --> 00:48:13,480
we iets zoals Google
JavaScript kleur bibliotheek.

987
00:48:13,480 --> 00:48:15,620
En ik weet zeker dat we zouden verschijnen met
duizend en een van hen.

988
00:48:15,620 --> 00:48:18,290

989
00:48:18,290 --> 00:48:21,410
U bent welkom om te lezen via hen.

990
00:48:21,410 --> 00:48:24,610
>> Dus de meeste dingen - als je ze vinden -
gaan op een van de worden gehost

991
00:48:24,610 --> 00:48:25,920
sites die gastheer code.

992
00:48:25,920 --> 00:48:26,960
Ze zijn een paar populaire.

993
00:48:26,960 --> 00:48:30,870
De meest populaire, door
ver, is github.com.

994
00:48:30,870 --> 00:48:35,300
En als je naar GitHub is het eigenlijk
waar Normaliseren werd georganiseerd.

995
00:48:35,300 --> 00:48:36,950
Dus als je terug wilt naar die ene gaan.

996
00:48:36,950 --> 00:48:38,135
Toon hen dat.

997
00:48:38,135 --> 00:48:40,516
>> MIKE RIZZO: En dat is eigenlijk waar
dit is te gehost, of het je opgevallen.

998
00:48:40,516 --> 00:48:41,000
>> TOMAS REIMERS: Yeah.

999
00:48:41,000 --> 00:48:49,078
Dus als je over te normaliseren
en ga naar de GitHub.

1000
00:48:49,078 --> 00:48:51,936
Waren is dat?

1001
00:48:51,936 --> 00:48:54,620
>> MIKE RIZZO: Dat kleine kat ding
is de GitHub symbool.

1002
00:48:54,620 --> 00:48:56,330
>> TOMAS REIMERS: Oh.

1003
00:48:56,330 --> 00:49:02,180
Dus GitHub maakt gebruik van een methode genaamd
Git te slaan code.

1004
00:49:02,180 --> 00:49:05,150
Is dat je niet weet wat dat is of
het maakt je bang, dat is prima.

1005
00:49:05,150 --> 00:49:16,100
Je hoeft niet te weten wat Git is
omdat GitHub heeft een knop Downloaden

1006
00:49:16,100 --> 00:49:17,200
rechts onderaan.

1007
00:49:17,200 --> 00:49:21,350
>> De andere nuttige ding om te weten
over GitHub is de meeste producten

1008
00:49:21,350 --> 00:49:23,200
zal hebben een read me.

1009
00:49:23,200 --> 00:49:25,400
En als ze niet over een website, het
lees me zal praten over hoe je

1010
00:49:25,400 --> 00:49:28,310
installeren, hoe je het gebruikt, wat het
doet, et cetera, et cetera, et cetera.

1011
00:49:28,310 --> 00:49:31,033
Wat we eigenlijk geweest
loopt u door.

1012
00:49:31,033 --> 00:49:32,326
>> MIKE RIZZO: Gestopt met Internet's.

1013
00:49:32,326 --> 00:49:34,020
>> TOMAS REIMERS: Dat is prima.

1014
00:49:34,020 --> 00:49:36,980
De laatste twee dingen die we wilden
om te praten over -

1015
00:49:36,980 --> 00:49:38,750
We hebben gesproken over Git -

1016
00:49:38,750 --> 00:49:40,290
is het oplossen van problemen.

1017
00:49:40,290 --> 00:49:43,020
En dit is niet zo relevant voor
het eindproduct is

1018
00:49:43,020 --> 00:49:44,870
als je weggaat 50.

1019
00:49:44,870 --> 00:49:48,310
En als je in de producten
uitvoering van bibliotheken of uitvoering

1020
00:49:48,310 --> 00:49:50,230
je eigen project, je gaat
vragen hebt of je bent

1021
00:49:50,230 --> 00:49:51,660
gaat op zoek naar vragen.

1022
00:49:51,660 --> 00:49:53,060
>> Nogmaals, Google het.

1023
00:49:53,060 --> 00:49:54,630
Dat is letterlijk wat we doen.

1024
00:49:54,630 --> 00:49:56,400
Dit gaat klinken dom.

1025
00:49:56,400 --> 00:49:58,310
Maar letterlijk, we Google het.

1026
00:49:58,310 --> 00:50:01,810
En nogmaals, een van de eerste dingen
je meestal tegenkomen is

1027
00:50:01,810 --> 00:50:06,550
stackoverflow.com, dat is een prachtige
vraag en antwoord zicht.

1028
00:50:06,550 --> 00:50:10,530
>> Het is fantastisch zowel omdat u
post de vragen en zoeken naar

1029
00:50:10,530 --> 00:50:12,760
antwoorden, maar ook omdat
het heeft al veel

1030
00:50:12,760 --> 00:50:14,590
vooraf ingevulde inhoud daar.

1031
00:50:14,590 --> 00:50:18,510
Dus meestal als je een programmeer googlen
vraag binnen de eerste

1032
00:50:18,510 --> 00:50:22,620
echtpaar raakt u wellicht al hebt uitgevoerd
in het tijdens uw probleem sets.

1033
00:50:22,620 --> 00:50:27,840
>> En dan, de laatste echt korte ding
is JSFIDDLE, die - Vandaag hebben we

1034
00:50:27,840 --> 00:50:32,110
gedaan een hoop werk met
JavaScript HTML CSS.

1035
00:50:32,110 --> 00:50:39,820
JSFIDDLE is een web app, die in feite
kunt u uw HTML nemen, UW

1036
00:50:39,820 --> 00:50:42,820
JavaScript linksonder, en
je CSS rechtsboven.

1037
00:50:42,820 --> 00:50:47,840
En dan kan het creëren van een snelle maken
van het en zie hoe deze samenwerkt.

1038
00:50:47,840 --> 00:50:50,500
Het is erg handig wanneer mensen proberen
om een ​​proof of concept te doen zoals

1039
00:50:50,500 --> 00:50:52,910
dit is hoe je zou
doen een drop-down menu.

1040
00:50:52,910 --> 00:50:54,980
Misschien een snel bloot te leggen of wat dan ook.

1041
00:50:54,980 --> 00:50:56,560
>> MIKE RIZZO: Dus laten we gaan
gang en klik deze.

1042
00:50:56,560 --> 00:50:57,820
Een korte opmerking -

1043
00:50:57,820 --> 00:51:00,430
dat het, voordat we
doen op klik.

1044
00:51:00,430 --> 00:51:04,380
Blijkt JCorey Korea heeft ook een ingebouwde
in click event handler die het

1045
00:51:04,380 --> 00:51:07,020
gebruikt alleen omdat het cijfers je bent
gaat willen een heleboel dingen doen

1046
00:51:07,020 --> 00:51:08,410
als je iets wilt klikken.

1047
00:51:08,410 --> 00:51:09,690
>> Op dezelfde manier, het heeft ook een hover.

1048
00:51:09,690 --> 00:51:12,850
Maar om de volledige reikwijdte van krijgen
degenen, kijk naar de jQuery

1049
00:51:12,850 --> 00:51:15,320
documentatie en doe het.

1050
00:51:15,320 --> 00:51:18,760
Ik heb iets stoms hier.

1051
00:51:18,760 --> 00:51:21,490
>> TOMAS REIMERS: Dus ik heb een echt snel
programma hier, die zegt

1052
00:51:21,490 --> 00:51:22,640
knop op klik.

1053
00:51:22,640 --> 00:51:23,890
Dan hebben we een lus.

1054
00:51:23,890 --> 00:51:26,810
Voor i kleiner is dan 404.

1055
00:51:26,810 --> 00:51:29,530
Het gaat gewoon om pop-up
deze waarschuwingsberichten.

1056
00:51:29,530 --> 00:51:33,425
>> MIKE RIZZO: En wat was het
code 404 stond in HTML?

1057
00:51:33,425 --> 00:51:34,145
Herinnert iemand zich?

1058
00:51:34,145 --> 00:51:35,450
Niet gevonden, rechts.

1059
00:51:35,450 --> 00:51:38,640

1060
00:51:38,640 --> 00:51:40,885
Chrome ook toegevoegd deze keurige
ding waar je kan -

1061
00:51:40,885 --> 00:51:43,430
>> TOMAS REIMERS: Omdat mensen zoals
Mike begon dit doen veel en

1062
00:51:43,430 --> 00:51:47,230
vervelend gebruikers, waardoor
je info te zien.

1063
00:51:47,230 --> 00:51:48,286
>> MIKE RIZZO: Yeah.

1064
00:51:48,286 --> 00:51:50,690
>> TOMAS REIMERS: Hebben we vragen
over dit, over JavaScript

1065
00:51:50,690 --> 00:51:53,420
bibliotheken, Bibliotheken of
wat web development looks

1066
00:51:53,420 --> 00:51:55,400
net als in de echte wereld?

1067
00:51:55,400 --> 00:51:56,880
We lopen tegen de tijd.

1068
00:51:56,880 --> 00:52:00,400
Dus ik ben niet zeker dat we gaan
om tijd te implementeren hebben

1069
00:52:00,400 --> 00:52:02,290
tenzij het echt snel.

1070
00:52:02,290 --> 00:52:04,580
Zijn we goed?

1071
00:52:04,580 --> 00:52:08,110
>> MIKE RIZZO: Alles wat jullie willen
om te zien echt snel in, zoals, twee

1072
00:52:08,110 --> 00:52:09,556
minuten of minder?

1073
00:52:09,556 --> 00:52:10,870
>> TOMAS REIMERS: Anything
we kunnen verduidelijken?

1074
00:52:10,870 --> 00:52:12,500
Hoe om te schrijven in -

1075
00:52:12,500 --> 00:52:13,260
>> PUBLIEK: [onverstaanbaar]?

1076
00:52:13,260 --> 00:52:16,070
>> MIKE RIZZO: Ja, zo that -

1077
00:52:16,070 --> 00:52:18,065
>> TOMAS REIMERS: U kunt gewoon op
Controle-U op de website.

1078
00:52:18,065 --> 00:52:19,275
>> MIKE RIZZO: Oh, ik wist niet dat.

1079
00:52:19,275 --> 00:52:22,290
>> TOMAS REIMERS: Ik denk, ja.

1080
00:52:22,290 --> 00:52:23,300
Controle-U. Yeah.

1081
00:52:23,300 --> 00:52:25,970
>> MIKE RIZZO: Oh, dus dat is het
code voor de website.

1082
00:52:25,970 --> 00:52:29,580
Maar als je echt wilt downloaden onze
bestanden en alles wordt gehost

1083
00:52:29,580 --> 00:52:32,650
op github.com

1084
00:52:32,650 --> 00:52:34,850
>> TOMAS REIMERS: slash mijn naam -

1085
00:52:34,850 --> 00:52:38,504
Tomas Reimers - slash
CS50 koppelteken seminar.

1086
00:52:38,504 --> 00:52:40,710
>> MIKE RIZZO: En je kunt
alles wat er.

1087
00:52:40,710 --> 00:52:42,310
>> TOMAS REIMERS: Dit is wat GitHub
eruit ziet, door de manier waarop.

1088
00:52:42,310 --> 00:52:44,910
Dus nogmaals, als je ziet een open source
project, meestal, zullen ze een stuk zijn

1089
00:52:44,910 --> 00:52:45,950
me daar dat je kunt lezen.

1090
00:52:45,950 --> 00:52:50,200
En als je terug gaat, zult u merken dat
heb je de download zip, die zal

1091
00:52:50,200 --> 00:52:52,130
kunt u de broncode downloaden
code omvatten de

1092
00:52:52,130 --> 00:52:53,666
product in uw eigen ding.

1093
00:52:53,666 --> 00:52:56,890
>> MIKE RIZZO: Ja, en als we klikt u gewoon
op de index.html heel snel -

1094
00:52:56,890 --> 00:52:59,180
>> TOMAS REIMERS: U zult hier zien is de
broncode voor onze website.

1095
00:52:59,180 --> 00:53:02,016

1096
00:53:02,016 --> 00:53:06,070
>> MIKE RIZZO: Ook, ik vergat naar rechts te duwen
voordat met de grote tafel het

1097
00:53:06,070 --> 00:53:09,860
inbegrepen, maar er is ook een tafel
van CHMOD instelling te krijgen dat we opgenomen

1098
00:53:09,860 --> 00:53:13,210
alleen voor uw duidelijkheid.

1099
00:53:13,210 --> 00:53:16,940
Maar als we scroll helemaal naar beneden naar de
bodem, we hebben eigenlijk niet erg

1100
00:53:16,940 --> 00:53:21,160
veel met de JavaScript
spul helemaal met dit.

1101
00:53:21,160 --> 00:53:26,610
Het is uitsluitend van alles
anders dat we hadden.

1102
00:53:26,610 --> 00:53:28,730
>> Dus dank jullie voor jullie komst
en luisteren.

1103
00:53:28,730 --> 00:53:29,830
We hopen dat dit was erg behulpzaam.

1104
00:53:29,830 --> 00:53:33,020
Als u JavaScript verwante
vragen of gewoon wilt praten over

1105
00:53:33,020 --> 00:53:36,240
wat anders als wat andere leuke dingen
je kunt doen met JavaScript, willen we graag

1106
00:53:36,240 --> 00:53:37,186
met je praten.

1107
00:53:37,186 --> 00:53:40,010
>> TOMAS REIMERS: Als u een vraag
over uw project of als dit kan zijn

1108
00:53:40,010 --> 00:53:42,740
relevant, zullen we waarschijnlijk blijven hangen
iets daarna.

1109
00:53:42,740 --> 00:53:44,640
Maar anders dan dat, hebben
een goed weekend.

1110
00:53:44,640 --> 00:53:45,845
>> MIKE RIZZO: Ja, genieten.

1111
00:53:45,845 --> 00:53:46,120
Zie jullie.

1112
00:53:46,120 --> 00:53:47,370
>> TOMAS REIMERS: Tot ziens.

1113
00:53:47,370 --> 00:53:47,926