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

2
00:00:07,440 --> 00:00:08,180
>> TOMAS REIMERS: Hej, alle sammen.

3
00:00:08,180 --> 00:00:09,250
Mit navn er Tomas Reimers.

4
00:00:09,250 --> 00:00:10,500
>> MIKE RIZZO: Og jeg er Mike Rizzo.

5
00:00:10,500 --> 00:00:12,990
>> TOMAS REIMERS: Vi er to af CS50s TS.

6
00:00:12,990 --> 00:00:18,910
Og i dag er vi førende seminaret
JavaScript og CSS til web apps.

7
00:00:18,910 --> 00:00:22,140
Hvis du ønsker at følge med, det
link er lige derovre.

8
00:00:22,140 --> 00:00:25,190
Og ønsker du at sætte det op
på computeren kortvarigt?

9
00:00:25,190 --> 00:00:27,460
>> Der er linket.

10
00:00:27,460 --> 00:00:30,390
Det er et lille websted, der indeholder links til
alle de ressourcer, vi kommer til at være

11
00:00:30,390 --> 00:00:36,490
pege dig i dag og har også en masse
nyttige oplysninger skrevet af os

12
00:00:36,490 --> 00:00:39,680
Læs mere i dybden, når du går tilbage,
og du forsøger at huske, hvad

13
00:00:39,680 --> 00:00:42,166
præcist gjorde vi siger, hvad var du
taler om, et cetera.

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

15
00:00:43,870 --> 00:00:44,890
Så lad os begynde.

16
00:00:44,890 --> 00:00:45,700
>> TOMAS REIMERS: Så du ønsker at starte?

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

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

19
00:00:47,170 --> 00:00:51,730
Så vi ønskede først at starte med en bred
overblik over internettet og

20
00:00:51,730 --> 00:00:54,240
filtyper, når designe hjemmesider.

21
00:00:54,240 --> 00:00:57,550
Mens denne præsentation vil vi
komme ind i JavaScript en masse meget

22
00:00:57,550 --> 00:01:00,320
senere, ønskede vi at starte med
bare, lidt ligesom et fugleperspektiv

23
00:01:00,320 --> 00:01:03,270
af hvad en hjemmeside er, og hvordan
at tænke på at designe en

24
00:01:03,270 --> 00:01:04,800
hjemmeside for starten.

25
00:01:04,800 --> 00:01:08,370
>> Så jer på dette punkt - med det
være fredag ​​aften - skal have

26
00:01:08,370 --> 00:01:11,000
indsendt dit CS50 finans
problem sæt.

27
00:01:11,000 --> 00:01:15,260
Forhåbentlig, det var en god smag
af, hvad webprogrammering kan være.

28
00:01:15,260 --> 00:01:18,261
Men her vil vi, slags, giver
dig en anden smag, så godt.

29
00:01:18,261 --> 00:01:23,190
>> TOMAS REIMERS: Så bare for at opsummere, hvad
sker, når du skriver i din webadresse til

30
00:01:23,190 --> 00:01:26,650
din webbrowser, får denne URL
slås op i computeren.

31
00:01:26,650 --> 00:01:28,590
Og din computers tilsluttet
til en anden computer,

32
00:01:28,590 --> 00:01:29,890
der er vært denne hjemmeside.

33
00:01:29,890 --> 00:01:33,150
OK, så når du går til google.com, er du
tilsluttet en af ​​Googles

34
00:01:33,150 --> 00:01:36,496
computere, som har den
filer til google.com.

35
00:01:36,496 --> 00:01:38,750
>> Derefter beder om en bestemt fil.

36
00:01:38,750 --> 00:01:40,020
Så hvis du går til -

37
00:01:40,020 --> 00:01:41,550
Jeg ved det ikke -

38
00:01:41,550 --> 00:01:48,170
example.com / index.html eller / test.html,
du kommer til at bede om

39
00:01:48,170 --> 00:01:49,340
den pågældende fil.

40
00:01:49,340 --> 00:01:52,780
Og webserverens går
at vende tilbage til dig.

41
00:01:52,780 --> 00:01:54,910
>> Så, når du går gennem denne fil -

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

43
00:01:57,750 --> 00:01:59,950
når du er computer får at
fil - det kommer til at starte

44
00:01:59,950 --> 00:02:00,820
at bygge en webside.

45
00:02:00,820 --> 00:02:03,020
Så nu har den HTML-fil,
som er lidt ligesom den

46
00:02:03,020 --> 00:02:05,170
struktur af websiden.

47
00:02:05,170 --> 00:02:08,620
HTML-filen kan også referere til
CSS-filer, som definerer

48
00:02:08,620 --> 00:02:09,889
stil af websiden.

49
00:02:09,889 --> 00:02:12,970
>> JavaScript-filer, der definerer
interaktion med websiden.

50
00:02:12,970 --> 00:02:15,200
Billedfiler, der er kun billeder.

51
00:02:15,200 --> 00:02:19,450
Og muligvis linke til andre HTML-filer,
som du derefter kan besøge.

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

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

54
00:02:24,380 --> 00:02:28,980
Så du fyre har alt, måske,
møjsommeligt oprette din lokale vært

55
00:02:28,980 --> 00:02:30,810
på din virtuelle maskine.

56
00:02:30,810 --> 00:02:35,650
Og at netop, slags, er den lokale
domæne, som din computer er vært for kun

57
00:02:35,650 --> 00:02:38,760
for dig på din egen IP-adresse.

58
00:02:38,760 --> 00:02:43,300
>> Så inden for denne, så kan du tilføje
til det dine egne websider.

59
00:02:43,300 --> 00:02:47,655
Jeg mener, i CS50 Finance, bør du have
tilføjet nogle HTML-sider, som er,

60
00:02:47,655 --> 00:02:49,410
slags, svøbt i PHP wrapper.

61
00:02:49,410 --> 00:02:54,690
Men i sidste ende, hvad din PHP-sider
blev output var HTML.

62
00:02:54,690 --> 00:02:58,210
>> Men tænker tilbage til begyndelsen
af PSET, havde vi at sætte

63
00:02:58,210 --> 00:03:00,890
tilladelserne til alt, ikke?

64
00:03:00,890 --> 00:03:07,270
Så dette bare dybest set lader os vide
der kan læse, skrive og muligvis

65
00:03:07,270 --> 00:03:08,730
udføre hver af filerne.

66
00:03:08,730 --> 00:03:11,870
Så vi kommer til at gøre en hurtig - hm?

67
00:03:11,870 --> 00:03:15,660
>> TOMAS REIMERS: Så vi vil
at gøre en hurtig demo.

68
00:03:15,660 --> 00:03:19,560
Så bare for at minde dig om, når du
forbindelse til Googles computer -

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

70
00:03:20,690 --> 00:03:24,060
og bede om en fil, computeren først
er nødt til at sikre, at du er godkendt

71
00:03:24,060 --> 00:03:28,790
til rent faktisk at se, at filen eller læse, at
fil, fordi du ikke bare kan spørge

72
00:03:28,790 --> 00:03:30,430
for enhver fil på denne computer, right?

73
00:03:30,430 --> 00:03:32,260
Det ville være en sikkerhedsrisiko.

74
00:03:32,260 --> 00:03:37,020
>> Så filer på de systemer, vi bruger, ligesom
denne CS50 apparat, har tre

75
00:03:37,020 --> 00:03:39,200
generelt folk der kan have
tilladelser til noget.

76
00:03:39,200 --> 00:03:41,610
Den første er den faktiske
Ejeren af ​​nævnte fil.

77
00:03:41,610 --> 00:03:43,820
Den anden er den gruppe, der
filen tilhører.

78
00:03:43,820 --> 00:03:46,090
Vi kommer ikke til at fokusere
for meget på det.

79
00:03:46,090 --> 00:03:50,010
Og den sidste ting er, en slags, ligesom
verden eller ligesom alle andre der er

80
00:03:50,010 --> 00:03:54,130
ikke er specifikke for den pågældende fil, og ikke
har nogen ejendomsret over den.

81
00:03:54,130 --> 00:04:05,650
>> Så hvis vi har ejer, gruppe,
og derefter verden.

82
00:04:05,650 --> 00:04:10,510
Og så, for hver af disse grupper, du
kan have en af ​​tre tilladelser,

83
00:04:10,510 --> 00:04:13,010
OK, eller flere af dem.

84
00:04:13,010 --> 00:04:15,070
Du kan have læserettigheder.

85
00:04:15,070 --> 00:04:16,560
Du kan have rette tilladelser.

86
00:04:16,560 --> 00:04:18,880
Og du kan have køretilladelse.

87
00:04:18,880 --> 00:04:22,060
>> Så i form af faktiske filtyper, læse
tilladelse er ligesom faktisk at læse

88
00:04:22,060 --> 00:04:23,250
indholdet af filen.

89
00:04:23,250 --> 00:04:24,730
En ret tilladelse skriver
til nævnte fil.

90
00:04:24,730 --> 00:04:28,370
En køretilladelse kører
fil, som du gør, når du kører en af

91
00:04:28,370 --> 00:04:29,620
dine CS50 projekter.

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

93
00:04:32,190 --> 00:04:38,820
>> Så når vi tænker på filer
ligesom når vi har brug for at læse en HTML

94
00:04:38,820 --> 00:04:41,790
fil, der skal være verden
læsbar, right?

95
00:04:41,790 --> 00:04:44,420
Formentlig også ejeren ønsker
at være i stand til at redigere denne fil.

96
00:04:44,420 --> 00:04:46,610
Så ejeren vil få brug for
læse og skrive tilladelser.

97
00:04:46,610 --> 00:04:48,710
De behøver ikke virkelig har brug for at udføre.

98
00:04:48,710 --> 00:04:50,950
>> Gruppen, vi kommer til at behandle
samme som verdens for nu.

99
00:04:50,950 --> 00:04:54,610
Så de har brug for Læsning.

100
00:04:54,610 --> 00:04:57,310
Men de behøver ikke skrive
eller køretilladelse.

101
00:04:57,310 --> 00:05:01,920
Og nu, hvis vi tænker tilbage til den tidligere
PSETs, hvad vi ved, er disse slags

102
00:05:01,920 --> 00:05:03,360
af ligne binær, right?

103
00:05:03,360 --> 00:05:04,210
1 står for ja.

104
00:05:04,210 --> 00:05:05,040
0 for ingen.

105
00:05:05,040 --> 00:05:06,870
Og vi kan faktisk oversætte
dette til binær.

106
00:05:06,870 --> 00:05:10,478
>> Så 110 i binær ville være 6.

107
00:05:10,478 --> 00:05:13,270
100 ville være 4.

108
00:05:13,270 --> 00:05:14,690
Samme med verden.

109
00:05:14,690 --> 00:05:20,846
Så det nummer, du ville få for den
tilladelser til dette ville være 644.

110
00:05:20,846 --> 00:05:24,400
>> MIKE RIZZO: Og hvis du tænker tilbage på
når du chmoded noget, tror jeg

111
00:05:24,400 --> 00:05:28,980
de gav i problemet indstille
eksempel på, hvor du kan gøre

112
00:05:28,980 --> 00:05:36,470
noget som chmod 644
og derefter filnavnet.

113
00:05:36,470 --> 00:05:39,980
644 så kan du nu se direkte
hvor der kommer fra.

114
00:05:39,980 --> 00:05:42,840
Så forhåbentlig, der gør, at
lidt mere klart.

115
00:05:42,840 --> 00:05:45,600
>> Og så til dig fyrens klarhed -

116
00:05:45,600 --> 00:05:48,200
oh yeah, her er det igen.

117
00:05:48,200 --> 00:05:53,260
Så 600 så bare ville være eksempel
vi gav op her, hvor ejeren har

118
00:05:53,260 --> 00:05:56,360
læse og rette tilladelser mens gruppe
og verden har ikke nogen tilladelser

119
00:05:56,360 --> 00:05:58,145
at få adgang til filen.

120
00:05:58,145 --> 00:06:01,500
>> TOMAS REIMERS: Og så skal vi have en hurtig
liste over almindelige tilladelser.

121
00:06:01,500 --> 00:06:05,250
Så mapper, du vil have
faktisk chmod 711.

122
00:06:05,250 --> 00:06:08,930
Hurtig side - for en mappe at have
eksekverbare tilladelse betyder at være i stand

123
00:06:08,930 --> 00:06:11,680
for at åbne mappen.

124
00:06:11,680 --> 00:06:15,280
Billeder, CSS, JavaScript, HTML behov
644 fordi, dybest set, verden

125
00:06:15,280 --> 00:06:16,400
behov læse tilladelser.

126
00:06:16,400 --> 00:06:20,960
>> Og PHP, som du fyre har set
selv om vi ikke vil tale om det

127
00:06:20,960 --> 00:06:24,880
strengt typisk chmoded med
tilladelse 600 fordi det køres med

128
00:06:24,880 --> 00:06:26,540
tilladelserne til ejeren.

129
00:06:26,540 --> 00:06:27,790
Mindst på apparatet.

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

131
00:06:30,200 --> 00:06:36,870
>> MIKE RIZZO: Så hvis du ikke specifikt
angive, hvilken type fil

132
00:06:36,870 --> 00:06:39,480
du ønsker i rent faktisk at sætte
op denne præsentation -

133
00:06:39,480 --> 00:06:43,490
vi havde et problem med dette, fordi
alt var ikke chmoded korrekt -

134
00:06:43,490 --> 00:06:47,550
du kommer til at få, sådan en
forbudte fejl, at hjemmesiden

135
00:06:47,550 --> 00:06:49,700
faktisk ikke har tilladelse
at få adgang uanset fil

136
00:06:49,700 --> 00:06:51,370
du vil have det til at få adgang.

137
00:06:51,370 --> 00:06:54,780
Og selvfølgelig, som kan fastsættes -
som i problem sæt - ved at ændre

138
00:06:54,780 --> 00:06:56,405
tilladelser korrekt.

139
00:06:56,405 --> 00:06:59,620
>> TOMAS REIMERS: Og den sidste bemærkning til
hurtigt lokal udvikling er - vi

140
00:06:59,620 --> 00:07:02,000
bragt dette op, men vi ville bare
at bringe det op igen -

141
00:07:02,000 --> 00:07:06,230
hvis du beder om en server - så lokal vært,
for eksempel com eller hvad. -

142
00:07:06,230 --> 00:07:09,170
og du behøver ikke angive en bestemt fil,
den fil, computeren går

143
00:07:09,170 --> 00:07:11,540
til at bede om hedder index.html.

144
00:07:11,540 --> 00:07:12,790
Eller hvis det ikke findes, index.php.

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

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

147
00:07:16,350 --> 00:07:19,560
Så det er bare et resumé af alt,
Forhåbentlig da vi har dækket i

148
00:07:19,560 --> 00:07:22,800
sektion, og foredrag,
og så langt i CS50.

149
00:07:22,800 --> 00:07:26,110
Og nu vil vi begynde at tale
om specifikt biblioteker.

150
00:07:26,110 --> 00:07:30,270
JavaScript og CSS-biblioteker
for web apps.

151
00:07:30,270 --> 00:07:36,350
>> Så en hurtig grunden til at vi har
biblioteker programmerer -

152
00:07:36,350 --> 00:07:39,000
der er en masse problemer i
programmering, der holder popping op

153
00:07:39,000 --> 00:07:40,570
igen og igen og igen.

154
00:07:40,570 --> 00:07:43,870
Du vil måske bemærke, at en masse hjemmesider
brug for evnen til at have drop down

155
00:07:43,870 --> 00:07:49,100
menuer, for eksempel, eller har brug for evnen
at have en meget standard knap

156
00:07:49,100 --> 00:07:51,400
stil, som ikke kan være
det nemmeste.

157
00:07:51,400 --> 00:07:54,670
Nu, at du begynder at komme ind i HTML, du
indse, at knapperne kan faktisk

158
00:07:54,670 --> 00:07:57,720
ser virkelig grim, hvis du
gør ikke noget.

159
00:07:57,720 --> 00:08:00,830
>> Så en masse mennesker har skrevet
kaldes biblioteker.

160
00:08:00,830 --> 00:08:02,990
Og i denne sammenhæng, er de
også kaldet rammer.

161
00:08:02,990 --> 00:08:04,790
Vi kommer til at bruge
to flæng.

162
00:08:04,790 --> 00:08:07,360
Og hvad de er, er de er dybest set
premade stykker kode -

163
00:08:07,360 --> 00:08:09,130
enten CSS eller JavaScript -

164
00:08:09,130 --> 00:08:13,240
at tage væk en masse af de
Team du har i kodning.

165
00:08:13,240 --> 00:08:17,290
>> Så de pre-definere en flok af klasser eller
præ-definere en flok funktioner til

166
00:08:17,290 --> 00:08:20,110
JavaScript sag, som
du kan ringe senere.

167
00:08:20,110 --> 00:08:22,690
Og så kan du, en slags, få
adgang til denne kode uden

168
00:08:22,690 --> 00:08:23,710
at skulle gøre noget.

169
00:08:23,710 --> 00:08:27,750
Et eksempel af biblioteket var CS50.H.
Det var et bibliotek, vi gav dig tilbage

170
00:08:27,750 --> 00:08:32,090
i uge et, som tillod dig at gøre
ting som der GetInt og getString

171
00:08:32,090 --> 00:08:35,237
uden at skulle skrive
nogen kode selv.

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

173
00:08:36,179 --> 00:08:40,299
Så her, ligesom vi skulle omfatte
i vores c-filer de forskellige

174
00:08:40,299 --> 00:08:46,570
biblioteker, vi også skal medtage i
vores HTML filer forskellige biblioteker.

175
00:08:46,570 --> 00:08:50,310
For eksempel, hvis vi ønskede at medtage
en specifik JavaScript bibliotek her,

176
00:08:50,310 --> 00:08:52,850
måske, som vi har skrevet
os selv som det lokalt er hostet

177
00:08:52,850 --> 00:08:56,000
kaldet script.js, vi bare
bruge denne notation.

178
00:08:56,000 --> 00:08:59,500
>> Så vi har script typen ligemænd
JavaScript kilde ligemænd

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

180
00:09:01,260 --> 00:09:05,190
Og hvis du tænker tilbage på din CS50
finans problem indstillet, hvis du kiggede i

181
00:09:05,190 --> 00:09:09,190
header.php i mappen Skabeloner,
du skulle have set

182
00:09:09,190 --> 00:09:10,970
nogle af disse inkluderet.

183
00:09:10,970 --> 00:09:13,250
Så dette første - scripts -

184
00:09:13,250 --> 00:09:16,080
er herunder et JavaScript bibliotek.

185
00:09:16,080 --> 00:09:18,760
Herunder en CSS biblioteket
en lille smule anderledes.

186
00:09:18,760 --> 00:09:21,430
>> Her, i stedet for scriptet
tag, du har brug for link tag.

187
00:09:21,430 --> 00:09:27,110
Og så teksten CSS typen
er lidt anderledes.

188
00:09:27,110 --> 00:09:29,270
Du behøver ikke altid nødt til at inkludere
rel typografiark.

189
00:09:29,270 --> 00:09:30,970
Men jeg tror, ​​det er generelt
god praksis.

190
00:09:30,970 --> 00:09:35,810
>> Og så endelig, det HREF, som du
formentlig så i dine ATAGs for at koble

191
00:09:35,810 --> 00:09:39,440
i forskellige links bare er oplyst
linket til hvor man kan finde det.

192
00:09:39,440 --> 00:09:42,250
For eksempel, hvis vi ønskede at knytte en
andet bibliotek - lad os bare sige -

193
00:09:42,250 --> 00:09:49,330
der boede på styles.css.

194
00:09:49,330 --> 00:09:54,030
Og vi ønskede at knytte at det er
hostes på nettet, ville vi kopiere det.

195
00:09:54,030 --> 00:09:58,834
Og derefter indsætte den ind i, hvad
vi har lige her i stedet.

196
00:09:58,834 --> 00:10:01,340
>> TOMAS REIMERS: OK, forhåbentlig du
fyre allerede kender

197
00:10:01,340 --> 00:10:02,410
med hvordan man kan knytte CSS.

198
00:10:02,410 --> 00:10:04,000
Du var nødt til at gøre det på
din sidste brun sæt.

199
00:10:04,000 --> 00:10:07,110
JavaScript, nogle af jer måske
har en vis erfaring med.

200
00:10:07,110 --> 00:10:07,980
Nogle af jer måske ikke.

201
00:10:07,980 --> 00:10:12,190
>> Så for nu, ved, at en JavaScript-fil
er meget gerne en CSS-fil i

202
00:10:12,190 --> 00:10:15,640
den forstand, at du kan linke til det eller
som du kan medtage det internt.

203
00:10:15,640 --> 00:10:17,360
Og det giver dig mulighed for at script ting.

204
00:10:17,360 --> 00:10:21,820
Og vi kommer til at gå dig gennem en
lille smule af JavaScript senere.

205
00:10:21,820 --> 00:10:23,560
>> Så ved hjælp af et bibliotek -

206
00:10:23,560 --> 00:10:26,150
når du har medtaget det, er det som
simpelt som bogstaveligt kalde

207
00:10:26,150 --> 00:10:29,640
funktioner eller tilføje
klasse navne til det.

208
00:10:29,640 --> 00:10:32,220
Det sidste, vi ønsker at tale
om i form af bibliotek -

209
00:10:32,220 --> 00:10:34,180
og det er mere en teknisk note -

210
00:10:34,180 --> 00:10:35,860
er open source licenser.

211
00:10:35,860 --> 00:10:41,550
Så når du finde disse egentlige biblioteker,
du kan tænke på

212
00:10:41,550 --> 00:10:47,630
spørgsmål kan lide er det OK, at jeg bare
bruger en andens kode, især

213
00:10:47,630 --> 00:10:51,970
fordi det er noget, vi meget
fortalte du ikke at gøre i dette kursus.

214
00:10:51,970 --> 00:10:55,790
>> Så i tilfælde af open source licenser,
en masse udviklere -

215
00:10:55,790 --> 00:10:57,540
når de har skrevet et bibliotek,
som de mener kunne være

216
00:10:57,540 --> 00:10:59,450
nyttigt til andre mennesker -

217
00:10:59,450 --> 00:11:02,420
vil offentliggøre det på internettet
og give det en licens.

218
00:11:02,420 --> 00:11:06,620
Og en licens dybest set siger jeg hermed
give tilladelse til andre

219
00:11:06,620 --> 00:11:11,250
folk til at bruge dette stykke software
med følgende slags

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

221
00:11:13,230 --> 00:11:16,100
>> Vi har inkluderet et link til et godt sted at
hjælpe dig med at forstå de nævnte licenser

222
00:11:16,100 --> 00:11:17,720
hvis du løber ind i dem.

223
00:11:17,720 --> 00:11:21,680
Almindelige bestemmelser er ting som
er du velkommen til at bruge mit bibliotek, så

224
00:11:21,680 --> 00:11:23,000
længe du giver mig kredit.

225
00:11:23,000 --> 00:11:25,670
Du er velkommen til at bruge mit bibliotek
så længe når den bryder

226
00:11:25,670 --> 00:11:26,790
du ikke bebrejde mig.

227
00:11:26,790 --> 00:11:30,310
Du er velkommen til at bruge mit bibliotek, så længe
som du ikke bruger det til at tjene penge

228
00:11:30,310 --> 00:11:31,910
for dig selv.

229
00:11:31,910 --> 00:11:34,130
Disse er former for fælles
bestemmelser.

230
00:11:34,130 --> 00:11:37,780
>> Til dette CS50 afsluttende projekt, de
bør ikke være super relevant, fordi

231
00:11:37,780 --> 00:11:41,440
de projekter, som du fyre bruger, er
formentlig snarere en slags, kendt.

232
00:11:41,440 --> 00:11:44,170
Men når du rent faktisk gå ud i
verden og begynde at bruge biblioteker, som

233
00:11:44,170 --> 00:11:48,100
måske eller måske ikke være så godt gennemført som
nogle af de mere populære dem, vi er

234
00:11:48,100 --> 00:11:49,780
kommer til at gå igennem.

235
00:11:49,780 --> 00:11:53,310
Det er godt at være i stand til at forstå
disse licenser og til

236
00:11:53,310 --> 00:11:54,560
forstå, hvad de betyder.

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

238
00:11:58,120 --> 00:11:58,586
Og gå tilbage.

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

240
00:12:00,960 --> 00:12:04,850
Så nu flytter ind på eksempler
faktiske CSS.

241
00:12:04,850 --> 00:12:07,770
På dette punkt hidtil, vil du måske
ikke er stødt på dette.

242
00:12:07,770 --> 00:12:10,300
Men du måske har stødt på det i
din hverdag, hvor noget

243
00:12:10,300 --> 00:12:13,160
der ser på én måde på én browser
ser måske ikke den samme

244
00:12:13,160 --> 00:12:14,880
måde i en anden browser.

245
00:12:14,880 --> 00:12:17,400
>> Dette kaldes browser browser
kompatibilitet.

246
00:12:17,400 --> 00:12:20,780
Og i stigende grad er det blevet mere og
mere af et problem, især som

247
00:12:20,780 --> 00:12:25,260
browsere tager flere og flere friheder
at gennemføre tingene, som de ønsker.

248
00:12:25,260 --> 00:12:28,440
Så for at overvinde det, der faktisk er
et stort bibliotek kaldet Normalize.CSS.

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

250
00:12:32,236 --> 00:12:33,770
>> TOMAS REIMERS: Vi inkluderede linket.

251
00:12:33,770 --> 00:12:36,210
På dette tidspunkt, er det nyttigt, hvis
du har din bærbare computer i der

252
00:12:36,210 --> 00:12:38,740
ser på webstedet.

253
00:12:38,740 --> 00:12:42,580
Og vi giver dette for dig lige
nu blot fordi CS50 endelig

254
00:12:42,580 --> 00:12:44,370
Projektet er faktisk kommer til at
bede dig om at gennemføre den

255
00:12:44,370 --> 00:12:45,860
lignende og gennem browsere.

256
00:12:45,860 --> 00:12:49,250
>> Så bare for at holde på bagsiden af ​​din
hoved, det er en vidunderlig bibliotek

257
00:12:49,250 --> 00:12:51,170
fordi det vil, slags,
standardisere ting.

258
00:12:51,170 --> 00:12:54,230
I Firefox kan noget vise
som én pixel til venstre.

259
00:12:54,230 --> 00:12:58,390
Og så Chrome kan beslutte, at der faktisk
hvad du mente var 10 pixels

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

261
00:12:59,380 --> 00:13:01,030
Og du ønsker at standardisere dette.

262
00:13:01,030 --> 00:13:05,360
Normaliser vil faktisk gøre en rigtig god
opgave at sikre, at dit websted

263
00:13:05,360 --> 00:13:08,070
ser det samme på tværs af browsere.

264
00:13:08,070 --> 00:13:10,660
>> MIKE RIZZO: Så hvis vi ønskede at blot
Klik på linket virkelig hurtigt og show

265
00:13:10,660 --> 00:13:13,140
dig, hvad der ligner, du
kan hente det ved hjælp af

266
00:13:13,140 --> 00:13:14,670
gigant knappen Hent.

267
00:13:14,670 --> 00:13:18,520
Eller jeg opfordre dig til at læse mere om det
ved at klikke på dette link i den nederste

268
00:13:18,520 --> 00:13:19,310
højre hjørne.

269
00:13:19,310 --> 00:13:22,420
>> TOMAS REIMERS: Og hvis du rent faktisk
klik Læs mere lige der -

270
00:13:22,420 --> 00:13:24,340
klik på kilde på GitHub -

271
00:13:24,340 --> 00:13:31,720
du faktisk se open source
licens på LICENSE.md lige der.

272
00:13:31,720 --> 00:13:35,740
Og du vil se her er den
meget populært MIT licens.

273
00:13:35,740 --> 00:13:38,940
Igen, hvis du læser teksten,
vil du være i stand til at finde den på webstedet

274
00:13:38,940 --> 00:13:42,550
vi refereres før og være i stand til
forstå det uden at skulle læse

275
00:13:42,550 --> 00:13:45,920
gennem den juridiske jargon.

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

277
00:13:46,850 --> 00:13:47,940
Så det er normaliseres.

278
00:13:47,940 --> 00:13:49,190
Vi ønskede at give dig
der virkelig hurtigt.

279
00:13:49,190 --> 00:13:50,030
Åh, har du et spørgsmål?

280
00:13:50,030 --> 00:13:53,013
>> PUBLIKUM: Så når du henter det, du
blot følge denne kode, at de har

281
00:13:53,013 --> 00:13:54,098
under knappen download?

282
00:13:54,098 --> 00:13:55,860
>> TOMAS REIMERS: Ja, så
når du downloader -

283
00:13:55,860 --> 00:13:58,130
>> MIKE RIZZO: Åh, det er en stor punkt.

284
00:13:58,130 --> 00:14:00,700
Så spørgsmålet var, hvordan gør
vi faktisk hente den?

285
00:14:00,700 --> 00:14:03,260
Så hvis vi klikker på linket, ser vi
at det rent faktisk dukker op

286
00:14:03,260 --> 00:14:05,030
på kildekoden.

287
00:14:05,030 --> 00:14:08,550
Så for at gøre dette, hvad vi kunne
gøre er bare at klikke på Gem som.

288
00:14:08,550 --> 00:14:10,830
Gem som og der bør
opdrage en fil.

289
00:14:10,830 --> 00:14:14,160
Og så kan vi vælge at gemme
det som normalize.CSS.

290
00:14:14,160 --> 00:14:15,810
Og så ville du nødt til at forbinde det på -

291
00:14:15,810 --> 00:14:18,660
>> TOMAS REIMERS: På samme måde som du
linke i enhver anden fil.

292
00:14:18,660 --> 00:14:22,250
Og når du linker det i, hvad er stor
om Normaliser er det rent faktisk vil

293
00:14:22,250 --> 00:14:25,920
tage sig af alle de hårde
af sig selv.

294
00:14:25,920 --> 00:14:27,730
Betyder, at du ikke har
at tilføje klasser.

295
00:14:27,730 --> 00:14:29,690
>> Du behøver ikke at gøre noget underligt.

296
00:14:29,690 --> 00:14:34,590
Det vil normalisere uden dig
gør noget yderligere.

297
00:14:34,590 --> 00:14:36,083
Ja, du er nødt til at inkludere den.

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

299
00:14:38,990 --> 00:14:40,240
Google Chrome svarer ikke.

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

301
00:14:43,270 --> 00:14:44,860
>> Bare en hurtig side -

302
00:14:44,860 --> 00:14:46,800
Jeg bemærkede vi sprang ind i dette.

303
00:14:46,800 --> 00:14:49,010
Resten af ​​denne præsentation er
kommer til at være et hurtigt overblik.

304
00:14:49,010 --> 00:14:50,380
En undersøgelse af biblioteker.

305
00:14:50,380 --> 00:14:52,710
>> Dybest set, hvad de er.

306
00:14:52,710 --> 00:14:53,350
Hvad de gør.

307
00:14:53,350 --> 00:14:54,060
Hvordan de er nyttige.

308
00:14:54,060 --> 00:14:56,540
Hvordan du kan gennemføre dem.

309
00:14:56,540 --> 00:14:59,730
Hvis du ønsker at begynde at kigge på dem,
følge med, og læsning gennem

310
00:14:59,730 --> 00:15:01,990
dem, vil jeg stærkt opfordre det.

311
00:15:01,990 --> 00:15:07,620
>> Alternativt er du også velkommen til at
begynde at downloade dem og inklusive

312
00:15:07,620 --> 00:15:11,400
dem i et syn blot for at se, hvad de
ser ud, eller hvad de skal gøre, hvis du har

313
00:15:11,400 --> 00:15:12,270
din bærbare foran dig.

314
00:15:12,270 --> 00:15:14,650
Hvis ikke, er du velkommen til at holde
lytter til os snakke.

315
00:15:14,650 --> 00:15:15,500
Vi kommer til at holde taler.

316
00:15:15,500 --> 00:15:18,680
Og vi har tid i slutningen, forhåbentlig
vi vil faktisk komme ind at vise dig

317
00:15:18,680 --> 00:15:20,946
hvad nogle af disse biblioteker
se ud.

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

319
00:15:22,320 --> 00:15:25,466
Okay, så lad os nu tale
om Font Awesome.

320
00:15:25,466 --> 00:15:30,480
>> TOMAS REIMERS: så Font Awesome er en
virkelig sirlige sted, især for dem

321
00:15:30,480 --> 00:15:32,450
af os, der er mindre kunstnerisk
talentfuld.

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

323
00:15:36,330 --> 00:15:38,880
Ignorerer navnet Font Awesome, det giver
dig en masse ikoner, som er

324
00:15:38,880 --> 00:15:41,050
meget nyttig.

325
00:15:41,050 --> 00:15:45,950
Så en masse gange, du vil gennemføre en
ikon kan du som en nice x deromkring

326
00:15:45,950 --> 00:15:47,170
at du kan lukke noget.

327
00:15:47,170 --> 00:15:49,910
>> Eller du ønsker måske en form for knappen Rediger
med en blyant tegning ligesom

328
00:15:49,910 --> 00:15:50,940
alle andre har.

329
00:15:50,940 --> 00:15:53,850
Og det er, når du lærer at
tegning af disse ikoner kan være

330
00:15:53,850 --> 00:15:55,510
meget trættende og vanskeligt.

331
00:15:55,510 --> 00:15:59,160
Font Awesome - hvis du rent faktisk
gå til webstedet -

332
00:15:59,160 --> 00:16:02,892
giver dig en masse ikoner under
ikonerne øverst.

333
00:16:02,892 --> 00:16:06,980
Ja, bare toppen.

334
00:16:06,980 --> 00:16:09,030
Det vil give dig en masse
af ikoner gratis.

335
00:16:09,030 --> 00:16:15,210
>> Så her kan du se, vi har ting som en
stjerne, barer, et lyn, en

336
00:16:15,210 --> 00:16:19,750
kalender, en fejl, en bog, et cetera.

337
00:16:19,750 --> 00:16:21,110
Dette kan være meget nyttig.

338
00:16:21,110 --> 00:16:24,290
Den måde du medtage denne er du medtage
bogstaveligt CSS-fil.

339
00:16:24,290 --> 00:16:29,760
Og efter du har inkluderet den CSS-fil,
hvad du kan gøre, er at du opretter en

340
00:16:29,760 --> 00:16:33,430
tag kaldet I. Den satands for
ikon med klassen FA

341
00:16:33,430 --> 00:16:34,460
stående i Font Awesome.

342
00:16:34,460 --> 00:16:36,330
Og så, hvad klasse du ønsker.

343
00:16:36,330 --> 00:16:41,220
>> Så hvis jeg ville have en ikon af denne plus
square lige her, ville jeg give

344
00:16:41,220 --> 00:16:43,290
det klassen FA.

345
00:16:43,290 --> 00:16:46,230
Og så FA bindestreg plus bindestreg firkantet.

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: Og så den sidste CSS
bibliotek, vi ønsker at komme igennem, vi er

349
00:16:56,980 --> 00:16:59,950
forsøger at holde det minimalt på CSS
biblioteker, fordi vi indser det

350
00:16:59,950 --> 00:17:03,660
Titlen på denne præsentation
er JavaScript biblioteker.

351
00:17:03,660 --> 00:17:07,089
Men vi troede, at vi kan lige så godt
introducere dig til de andre biblioteker

352
00:17:07,089 --> 00:17:09,569
mens vi talte om biblioteker.

353
00:17:09,569 --> 00:17:11,400
>> Det er Google Web Fonts.

354
00:17:11,400 --> 00:17:17,040
Og hvad Google Web Fonts giver dig
gøre er at tilføje skrifttyper til din hjemmeside,

355
00:17:17,040 --> 00:17:22,079
som er en virkelig nem måde at gøre det
smuk og til at skelne dit sæt

356
00:17:22,079 --> 00:17:24,460
fra alle andres er, hvis det har
en dejlig skrifttype eller hvis det har en dejlig

357
00:17:24,460 --> 00:17:27,790
samling af skrifttyper.

358
00:17:27,790 --> 00:17:31,410
Google Web Fonts er rart i modsætning til andre
biblioteker i den forstand, at det er en

359
00:17:31,410 --> 00:17:33,490
virkelig automatiseret installation.

360
00:17:33,490 --> 00:17:38,680
>> Så hvis du følger linket, det er
google.com / skrifttyper, tror jeg.

361
00:17:38,680 --> 00:17:41,100
Hvis du følger det, du
kan vælge din skrifttype.

362
00:17:41,100 --> 00:17:44,410
Du kan vælge på venstre fra
tykkelse, skrå, et cetera.

363
00:17:44,410 --> 00:17:48,970
Og så, når du har valgt en,
du kan klikke på hurtig brug.

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

365
00:17:49,820 --> 00:17:51,590
Nederst til højre i boksen.

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

367
00:17:54,380 --> 00:17:56,700
>> Og derefter rulle ned.

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

369
00:17:59,600 --> 00:18:02,650
Først og fremmest, de giver dig CSS som
du nødt til rent faktisk at linke til det.

370
00:18:02,650 --> 00:18:03,330
Det er lige der.

371
00:18:03,330 --> 00:18:05,170
Du kan bare kopiere og indsætte det i.

372
00:18:05,170 --> 00:18:07,250
Og nice ting om denne ene er
du behøver faktisk ikke engang behøver at

373
00:18:07,250 --> 00:18:08,340
hente filen.

374
00:18:08,340 --> 00:18:11,170
>> Hvad det kommer til at gøre, er at det går
at linke til Googles version af det.

375
00:18:11,170 --> 00:18:14,130
Så tilbage til hvad betyder.

376
00:18:14,130 --> 00:18:18,270
Det betyder, at når en bruger
downloader din fil -

377
00:18:18,270 --> 00:18:22,300
downloader din HTML-side - din HTML
side kommer til at henvise til denne fil.

378
00:18:22,300 --> 00:18:26,790
>> Så, er din computer kommer til at se,
Åh, det er hostet på google.com snarere

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

380
00:18:28,170 --> 00:18:30,370
Lad mig gå bede Google for denne fil.

381
00:18:30,370 --> 00:18:32,800
Og så det kommer til at omfatte
det næsten som om det var en

382
00:18:32,800 --> 00:18:35,584
en del af dit eget websted.

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

384
00:18:36,540 --> 00:18:40,980
Og når du medtage det, så at
medtage den i din CSS, det giver dig

385
00:18:40,980 --> 00:18:41,830
den faktiske linje.

386
00:18:41,830 --> 00:18:45,188
Så du indstille egenskaben font familie
lig med navnet på din skrifttype.

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
Så vi er lige blevet færdig med CSS.

390
00:18:52,220 --> 00:18:57,230
Og nogle af jer måske tænke, ja,
vi havde nogle CSS på CS50 Finance.

391
00:18:57,230 --> 00:19:00,390
Men CSS bibliotek var bootstrap.

392
00:19:00,390 --> 00:19:05,190
Vi har faktisk omfatter Bootstrap lidt
senere under JavaScript fordi med

393
00:19:05,190 --> 00:19:09,660
Bootstrap CSS biblioteket også kommer
med en masse af JavaScript,

394
00:19:09,660 --> 00:19:12,060
Bootstrap eller Twitter -
der gjorde Bootstrap -

395
00:19:12,060 --> 00:19:15,426
bruger til at styre alle deres CSS.

396
00:19:15,426 --> 00:19:19,592
>> TOMAS REIMERS: Er der nogen der har nogen
spørgsmål hidtil omkring CSS i almindelighed?

397
00:19:19,592 --> 00:19:20,723
Vi er gode?

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

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

400
00:19:22,495 --> 00:19:25,136
>> TOMAS REIMERS: Så flytter
videre til JavaScript.

401
00:19:25,136 --> 00:19:27,900
>> MIKE RIZZO: Så vi ønskede at tale
om jQuery til at begynde med.

402
00:19:27,900 --> 00:19:30,780
Har nogen hørt om jQuery
før eller brugt det?

403
00:19:30,780 --> 00:19:32,180
Ja, et par?

404
00:19:32,180 --> 00:19:36,000
Så hvis du bare arbejde med indfødte
JavaScript, vil du finde dig selv

405
00:19:36,000 --> 00:19:41,000
skrive en masse lange selektorer en masse.

406
00:19:41,000 --> 00:19:44,400
Så hvad jQuery gør, er det giver
en pæn indpakning til JavaScript

407
00:19:44,400 --> 00:19:48,180
sprog, der lader dig nemt vælge
og manipulere forskellige elementer

408
00:19:48,180 --> 00:19:52,470
i dokumentet objekt model af
webside eller DOM, som jeg tror

409
00:19:52,470 --> 00:19:54,290
du fyre har hørt om i
forelæsning på dette punkt.

410
00:19:54,290 --> 00:19:57,550
>> TOMAS REIMERS: Hvis du ikke har hørt om
det, eller hvis du ikke har set foredrag

411
00:19:57,550 --> 00:20:01,870
endnu, Document Object Model er
dybest set, hvordan tingene er repræsenteret.

412
00:20:01,870 --> 00:20:05,290
Så HTML slags ligner et træ
når du rent faktisk trække det ud.

413
00:20:05,290 --> 00:20:06,850
Du har HTML-element på toppen.

414
00:20:06,850 --> 00:20:07,560
Du har hoved og krop.

415
00:20:07,560 --> 00:20:09,500
>> Og så, inden du
har alt andet.

416
00:20:09,500 --> 00:20:10,660
Der er benævnt DOM -

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

418
00:20:12,120 --> 00:20:16,090
Så en model, som repræsenterer objekter
dokumentet er en nem måde at tænke

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

420
00:20:18,560 --> 00:20:22,520
Og en af ​​de store ting om jQuery
er det virkelig gør gennemkører

421
00:20:22,520 --> 00:20:26,460
der og manipulere elementer inden for
det utroligt simpelt.

422
00:20:26,460 --> 00:20:30,300
>> Så simpelt, i virkeligheden, at de fleste af
JavaScript biblioteker, eller hvis ikke

423
00:20:30,300 --> 00:20:34,200
flertal grand størstedelen af ​​dem
du vil se rent faktisk kræver jQuery så

424
00:20:34,200 --> 00:20:37,530
at de kan køre sig selv blot
fordi hvis du ikke har jQuery, du

425
00:20:37,530 --> 00:20:40,540
ville spilde en masse tid på at forsøge at
finde ud af, hvordan du vælger bestemte

426
00:20:40,540 --> 00:20:43,660
elementer og hvordan at gøre andre ting.

427
00:20:43,660 --> 00:20:47,950
Og den anden store ting om jQuery
er, at det er cross browser kompatibel.

428
00:20:47,950 --> 00:20:51,550
>> Så husk tilbage, når vi sagde, at
ikke alle browsere implementere

429
00:20:51,550 --> 00:20:53,100
tingene på den samme måde?

430
00:20:53,100 --> 00:20:55,120
Dette gælder også i JavaScript.

431
00:20:55,120 --> 00:20:58,220
Og en af ​​de store ting om jQuery
er, at det detekterer

432
00:20:58,220 --> 00:21:00,300
browser og opdage
passende metode.

433
00:21:00,300 --> 00:21:03,420
>> Så hvis du har brug for at vælge et element,
Internet Explorer kan sige, du er

434
00:21:03,420 --> 00:21:05,770
formodes at gøre på denne måde.

435
00:21:05,770 --> 00:21:08,300
Firefox kan sige det rigtige
måde er denne vej.

436
00:21:08,300 --> 00:21:09,710
jQuery er ligeglad.

437
00:21:09,710 --> 00:21:12,550
Når du fortæller jQuery til at vælge en
element vil det regne ud, hvordan det er

438
00:21:12,550 --> 00:21:16,290
formodes at gøre det inden browseren
Brugeren er i øjeblikket i, og derefter gøre

439
00:21:16,290 --> 00:21:18,584
det på den måde.

440
00:21:18,584 --> 00:21:22,650
>> MIKE RIZZO: Så lad os ikke tale om
brugen af ​​jQuery en lille smule.

441
00:21:22,650 --> 00:21:27,670
Ligesom PHP, jQuery har en særlig
forkærlighed for dollartegn.

442
00:21:27,670 --> 00:21:30,880
Så du opdage, at enhver jQuery -

443
00:21:30,880 --> 00:21:32,060
godt, ikke alle.

444
00:21:32,060 --> 00:21:35,210
Du kan undertiden erstatte dollar
underskrive med ordet jQuery.

445
00:21:35,210 --> 00:21:38,980
Men generelt, bare fordi det er
kortere, når du ser jQuery være

446
00:21:38,980 --> 00:21:41,420
brugt det vil være med et dollartegn.

447
00:21:41,420 --> 00:21:47,030
>> Så her er vi bare viser en begyndelse
omskifter for et element i DOM.

448
00:21:47,030 --> 00:21:52,850
Her har vi den dollartegn efterfulgt
ved åbne parenteser og derefter citater.

449
00:21:52,850 --> 00:21:56,130
Og inden for de citater gå vores vælgere
for de forskellige elementer.

450
00:21:56,130 --> 00:21:59,810
Ligesom i CSS, vi havde brug for vælgere til
være i stand til at style forskellige elementer

451
00:21:59,810 --> 00:22:00,840
på siden.

452
00:22:00,840 --> 00:22:06,555
Disse forskellige vælgere oversætte
nøjagtigt ind jQuery og JavaScript,

453
00:22:06,555 --> 00:22:07,820
for det meste.

454
00:22:07,820 --> 00:22:10,120
>> Så her har vi en prik foo.

455
00:22:10,120 --> 00:22:14,780
Så hvis du husker fra foredrag,
dot betyder bare klassen.

456
00:22:14,780 --> 00:22:18,850
Så vi vælger elementet
med klasse foo.

457
00:22:18,850 --> 00:22:22,670
Så hvis jeg gå videre og åbne vores
JavaScript-konsol her virkelig hurtigt

458
00:22:22,670 --> 00:22:26,830
bare vise det, hvis jeg bare skrive
dollar tegn, ser vi, at det er nogle

459
00:22:26,830 --> 00:22:28,090
funktion, der kommer op.

460
00:22:28,090 --> 00:22:29,420
Og det er netop defineret af jQuery.

461
00:22:29,420 --> 00:22:32,120
>> TOMAS REIMERS: For dem af jer
uvant, konsollen er et værktøj

462
00:22:32,120 --> 00:22:35,430
inden Chrome, som giver dig mulighed for at,
dybest set køre JavaScript på

463
00:22:35,430 --> 00:22:36,450
aktuelle side.

464
00:22:36,450 --> 00:22:39,420
Dette finder du utroligt nyttigt, når
du faktisk debugging og du

465
00:22:39,420 --> 00:22:42,400
behøver at være ligesom, hvad er den nuværende
værdi på ca global variabel eller hvad

466
00:22:42,400 --> 00:22:43,910
er noget andet?

467
00:22:43,910 --> 00:22:47,620
Det er lidt ligesom GDB med undtagelse
at du kan faktisk

468
00:22:47,620 --> 00:22:51,600
manipulere elementer på siden med
det i en meget lettere måde.

469
00:22:51,600 --> 00:22:55,080
Og også det ikke, dybest set, tjek
i med dig, før det gør noget.

470
00:22:55,080 --> 00:22:58,660
>> Så henviser til, at måske GDB være ligesom, er du
sikker på at du ønsker at køre det næste skridt?

471
00:22:58,660 --> 00:22:59,830
Konsollen er i det virkelige.

472
00:22:59,830 --> 00:23:03,690
Så som websiden rendering og
gøre, hvad det laver, det

473
00:23:03,690 --> 00:23:05,720
byrådets også kører sideløbende.

474
00:23:05,720 --> 00:23:08,330
Og du kan sætte imputere kode i
at konsol, som vil

475
00:23:08,330 --> 00:23:09,260
køres på siden.

476
00:23:09,260 --> 00:23:12,190
>> MIKE RIZZO: Så for at komme ind i konsollen,
Jeg tror jeg skal kort

477
00:23:12,190 --> 00:23:13,750
nævne, hvordan man gør det.

478
00:23:13,750 --> 00:23:17,850
I de sidste problemer, som du måtte have
brugt Chromes inspicere element

479
00:23:17,850 --> 00:23:20,440
funktioner eller view side kilde -

480
00:23:20,440 --> 00:23:23,870
og dem er tilgængelige lige ved at højreklikke
klikke på siden eller en specifik

481
00:23:23,870 --> 00:23:28,430
element og gør enten inspicere
element eller visning side kilde.

482
00:23:28,430 --> 00:23:31,190
Vi kan også få adgang til JavaScript
konsollen direkte ved

483
00:23:31,190 --> 00:23:33,630
vælge inspicere element.

484
00:23:33,630 --> 00:23:37,930
Så du bare trykke konsol
i langt højre side.

485
00:23:37,930 --> 00:23:41,900
>> Alternativt kunne du også har gået
til øverste højre hjørne,

486
00:23:41,900 --> 00:23:46,820
som er afskåret på denne skærm, hvor
det har de tre vandrette søjler.

487
00:23:46,820 --> 00:23:52,010
Og du går ned til værktøjer og
derefter JavaScript-konsol

488
00:23:52,010 --> 00:23:53,240
her, hvor kan se -

489
00:23:53,240 --> 00:23:54,370
mindste på Windows -

490
00:23:54,370 --> 00:23:59,680
genvejen er Kontrol Shift J. Så
hvis vi ønskede at vælge et element

491
00:23:59,680 --> 00:24:06,060
inden for denne side, ligesom jeg viste
før, vi gør dollar sign åbne parens

492
00:24:06,060 --> 00:24:08,180
og derefter citerer.

493
00:24:08,180 --> 00:24:11,750
>> En interessant ting er, generelt,
apostroffer og dobbelte anførselstegn er

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

495
00:24:12,370 --> 00:24:16,050
Så en masse mennesker bare bruge single
anførselstegn, fordi de er hurtigere til at skrive

496
00:24:16,050 --> 00:24:19,780
end anførselstegn, fordi du ikke gøre
nødt til at holde Shift nede.

497
00:24:19,780 --> 00:24:21,770
Så jeg vil bare gøre det lige nu.

498
00:24:21,770 --> 00:24:24,510
>> Så jeg ønsker at vælge noget
med klasse.

499
00:24:24,510 --> 00:24:27,200
Container, bare fordi jeg ved, det er
noget, der er på vores

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

501
00:24:28,740 --> 00:24:29,520
Og jeg ramte Enter.

502
00:24:29,520 --> 00:24:31,670
Og vi kan se, at det har valgt det.

503
00:24:31,670 --> 00:24:34,990
Så det viser sig, at det
returneres samme objekt.

504
00:24:34,990 --> 00:24:36,620
Så det er et grundlæggende valg.

505
00:24:36,620 --> 00:24:40,080
Hvis vi ønskede at faktisk manipulere det,
ville du nødt til at kalde noget

506
00:24:40,080 --> 00:24:43,925
på den udvælgelse, som
vi vil komme ind senere.

507
00:24:43,925 --> 00:24:49,030
>> TOMAS REIMERS: Så bare for at se på det
mere i dybden, det er ikke anderledes

508
00:24:49,030 --> 00:24:52,245
end funktionskald vi gjort i C.
Navnet på funktionen her er der en

509
00:24:52,245 --> 00:24:52,580
lidt underligt.

510
00:24:52,580 --> 00:24:55,640
Det er dollartegn.

511
00:24:55,640 --> 00:24:57,010
Det er bare et navn på en funktion.

512
00:24:57,010 --> 00:24:58,810
Der er ikke noget særlig om det.

513
00:24:58,810 --> 00:25:00,450
>> Vi har åbne parenteser.

514
00:25:00,450 --> 00:25:03,880
Så har vi vores ét argument, som
i dette tilfælde sker for at være en streng,

515
00:25:03,880 --> 00:25:05,680
som er en omskifter for den.

516
00:25:05,680 --> 00:25:08,130
Og så har vi vores
lukket parentes.

517
00:25:08,130 --> 00:25:09,960
Det er det.

518
00:25:09,960 --> 00:25:11,500
>> Det er ikke så meget forskellige.

519
00:25:11,500 --> 00:25:12,900
Selv ser det meget underligt.

520
00:25:12,900 --> 00:25:17,220
Og det kan være, en slags, et springende
punkt for en masse mennesker.

521
00:25:17,220 --> 00:25:21,460
>> MIKE RIZZO: Så på samme måde, hvis vi ønskede
for at vælge et element, der har et id,

522
00:25:21,460 --> 00:25:23,470
Nu ønsker vi at markere med
ID i stedet for klassen.

523
00:25:23,470 --> 00:25:28,080
Det ville være en lignende ting, hvor vi
bare gøre det skarpe tegn for id.

524
00:25:28,080 --> 00:25:33,576
Så vi vælger her hele
elementer, der har ID bar.

525
00:25:33,576 --> 00:25:35,400
>> TOMAS REIMERS: Og det udvider.

526
00:25:35,400 --> 00:25:36,450
At CSS udvider.

527
00:25:36,450 --> 00:25:42,260
Ligesom i CSS, kan du vælge alle
links, som har klassen foo.

528
00:25:42,260 --> 00:25:43,420
Her er det det samme.

529
00:25:43,420 --> 00:25:52,750
>> Du kan gøre a.foo, hvilket ville du vælge
alle de links med klassen foo.

530
00:25:52,750 --> 00:25:58,860
Du kan gøre en skarp bar, hvilket ville
vælge linket med id bar og så

531
00:25:58,860 --> 00:25:59,770
videre og så videre.

532
00:25:59,770 --> 00:26:02,120
Enhver CSS selector er en gyldig
jQuery selector.

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

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

535
00:26:07,996 --> 00:26:11,460
OK, så lad os nu komme ind i en lille smule
manipulation, som vi kan gøre med

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

537
00:26:12,870 --> 00:26:19,280
Så jQuery har en bestemt type
af notation, hvor vi bare bruge

538
00:26:19,280 --> 00:26:20,170
en prik i slutningen.

539
00:26:20,170 --> 00:26:23,340
Og du kan tænke på dette som i
C hvordan vi havde forskellige structs.

540
00:26:23,340 --> 00:26:27,110
Og for at gå ind i disse structs, ville du
bruge en prik for at komme ind i dem.

541
00:26:27,110 --> 00:26:28,480
>> Dette er sådan, en lignende ting.

542
00:26:28,480 --> 00:26:33,570
Først nu har vi funktioner inden for dette
vælgerelementet at vi kan kalde på den.

543
00:26:33,570 --> 00:26:38,640
Så her, det allerførste eksempel
du kan se, er en CSS selector.

544
00:26:38,640 --> 00:26:45,290
Og dybest set, hvad det gør, er det
gælder det første element CSS til dette

545
00:26:45,290 --> 00:26:46,230
ting, du har valgt -

546
00:26:46,230 --> 00:26:47,720
dette element, du har valgt -

547
00:26:47,720 --> 00:26:49,290
med den værdi,.

548
00:26:49,290 --> 00:26:55,390
>> TOMAS REIMERS: Så en let oversættelse af
der ville være, hvis jQuery, dybest set,

549
00:26:55,390 --> 00:26:57,790
tog bare foo.

550
00:26:57,790 --> 00:27:05,480
Og så i CSS sagde,
farven rød og tæt.

551
00:27:05,480 --> 00:27:06,670
Det er den samme idé.

552
00:27:06,670 --> 00:27:08,800
Hvad det er gjort, er det er markeret
alle foo elementer.

553
00:27:08,800 --> 00:27:10,170
Og så er det anvendt.

554
00:27:10,170 --> 00:27:15,884
Slags, ejendommen farve
er lig med rødt.

555
00:27:15,884 --> 00:27:21,070
>> MIKE RIZZO: På samme måde kan vi også ændre
det faktiske indhold af, hvad der er

556
00:27:21,070 --> 00:27:24,870
vises på HTML på siden, som
er virkelig cool, fordi det betyder, at din

557
00:27:24,870 --> 00:27:28,095
websider kan nu være helt dynamisk
og behøver ikke at være statisk

558
00:27:28,095 --> 00:27:31,660
at du udskriver ved hjælp af PHP
i begyndelsen af

559
00:27:31,660 --> 00:27:33,320
den side, der indlæses.

560
00:27:33,320 --> 00:27:36,810
Så her, hvis vi ønskede at ændre
faktiske HTML på siden, ville vi nu

561
00:27:36,810 --> 00:27:43,550
kalder HTML funktion, som så bare
skær uanset hvad vi angiver i

562
00:27:43,550 --> 00:27:45,390
dette element, som vi har valgt.

563
00:27:45,390 --> 00:27:49,810
Så her vi vælger elementet med
klasse foo og så siger det er HTML

564
00:27:49,810 --> 00:27:52,200
er det nu hej verden.

565
00:27:52,200 --> 00:27:55,600
>> TOMAS REIMERS: Og når man tænker over
hvad er nyttige anvendelser af

566
00:27:55,600 --> 00:28:00,800
dette, denne CSS ene, den første ting,
kan du begynde at tænke på er

567
00:28:00,800 --> 00:28:03,070
i form af selv drop down menuer.

568
00:28:03,070 --> 00:28:08,350
Du kunne begynde at gøre ting som, når
en bruger svæver over den øverste del

569
00:28:08,350 --> 00:28:11,970
af en dråbe ned, du ønsker at gøre
den nederste del synlig.

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

571
00:28:12,540 --> 00:28:15,610
>> Så i CSS, har vi egenskaber
at gøre noget synligt.

572
00:28:15,610 --> 00:28:19,330
Ting som display kolon none
ville gøre det usynlige.

573
00:28:19,330 --> 00:28:21,190
Display blok vil gøre det synligt.

574
00:28:21,190 --> 00:28:25,860
Eller endda hvis du ønsker at gå enklere, du
har ting som synlighed ligemænd

575
00:28:25,860 --> 00:28:27,520
synlig, og synlighed er lig skjult.

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

577
00:28:30,330 --> 00:28:34,780
>> Og du kan begynde at implementere ting
ligesom drop down menuer til højre

578
00:28:34,780 --> 00:28:38,410
når du får gennem ideen om, hvordan
kan du regne ud, når det åbnes,

579
00:28:38,410 --> 00:28:39,850
som vi får gennem meget kortvarigt.

580
00:28:39,850 --> 00:28:42,160
Men vi kan begynde at se
anvendelser af denne.

581
00:28:42,160 --> 00:28:45,540
I en lignende følelse, hvis du skulle prøve
og gennemføre, lad os sige, en chat

582
00:28:45,540 --> 00:28:48,620
motor og du ønsker at gøre en lille
taleboble kommer op, når du har

583
00:28:48,620 --> 00:28:52,880
fik en ny besked, når du får den
ny meddelelse, kan du lave en lille

584
00:28:52,880 --> 00:28:55,890
taleboble kommer op ved at ændre
HTML på siden, ikke?

585
00:28:55,890 --> 00:29:00,540
Ved at tilføje, at ekstra taleboble
med den ekstra tekst derinde.

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

587
00:29:01,140 --> 00:29:07,750
>> PUBLIKUM: Så du ville indkapsle dette i
HTML-kode i lidt ligesom en

588
00:29:07,750 --> 00:29:10,534
[Uhørligt]?

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

590
00:29:12,940 --> 00:29:16,190
Ja, vi vil komme til at
i en lille smule.

591
00:29:16,190 --> 00:29:18,810
Ja, det ligner en
lidt til PHP.

592
00:29:18,810 --> 00:29:21,240
Ikke ligefrem ens.

593
00:29:21,240 --> 00:29:24,730
>> En god skelnen at gøre er, hvad dette
faktisk redigering når vi redigerer

594
00:29:24,730 --> 00:29:28,480
den side, fordi det ikke kommer til at blive
redigere den faktiske fil, der bliver

595
00:29:28,480 --> 00:29:31,380
holdes på serveren, fordi verden
bør ikke have tilladelse

596
00:29:31,380 --> 00:29:32,610
at redigere dine filer.

597
00:29:32,610 --> 00:29:36,080
Dette er blot at redigere, hvad der er på siden
og hvad der bliver vist inden

598
00:29:36,080 --> 00:29:36,950
browseren.

599
00:29:36,950 --> 00:29:40,340
Så hvis du skulle genindlæse siden efter,
sige, slette noget så vi

600
00:29:40,340 --> 00:29:44,730
se, vi kan gøre med remove opkaldet,
at ting ville derefter igen.

601
00:29:44,730 --> 00:29:48,590
>> TOMAS REIMERS: Så en måde at tænke på
dette er, hvis jeg er din computer og

602
00:29:48,590 --> 00:29:50,170
Mike er en slags, serveren.

603
00:29:50,170 --> 00:29:53,850
Hvad kommer til at ske, er jeg har tænkt mig at
spørger Mike, hey, kan jeg få en kopi af

604
00:29:53,850 --> 00:29:54,630
denne webside?

605
00:29:54,630 --> 00:29:56,190
Og han vil give mig en kopi af den.

606
00:29:56,190 --> 00:29:57,430
>> Nej, det er ikke den originale ting.

607
00:29:57,430 --> 00:29:58,620
Det er bare en kopi.

608
00:29:58,620 --> 00:30:00,450
Og så ville det være ligesom, åh,
der er JavaScript her.

609
00:30:00,450 --> 00:30:02,450
Er klart, at jeg redigere
side at være sådan.

610
00:30:02,450 --> 00:30:04,250
Og jeg redigerer din kopi.

611
00:30:04,250 --> 00:30:05,920
>> Men det er ikke foretager
den faktiske kopi.

612
00:30:05,920 --> 00:30:08,480
Og hvis jeg skulle spørge ham igen
opdatere siden, -

613
00:30:08,480 --> 00:30:10,060
hey, kan jeg have en anden ren kopi -

614
00:30:10,060 --> 00:30:11,440
han kommer til at give mig
anden ren kopi.

615
00:30:11,440 --> 00:30:14,240
Og så jeg har tænkt mig at gøre det samme
ligesom, åh, det JS her, der siger

616
00:30:14,240 --> 00:30:14,866
at redigere denne.

617
00:30:14,866 --> 00:30:17,460
Og jeg har tænkt mig at holde gør det.

618
00:30:17,460 --> 00:30:20,930
>> MIKE RIZZO: Så en virkelig cool ting
at du kan gøre med jQuery er

619
00:30:20,930 --> 00:30:24,350
faktisk tilføje forskellige typer
animationer til din side.

620
00:30:24,350 --> 00:30:27,440
Jeg ved ikke, om du nogensinde har set, hvor
du forsøger at et at udfylde en formular

621
00:30:27,440 --> 00:30:31,250
online, og du behøver ikke udfylde
tingene korrekt.

622
00:30:31,250 --> 00:30:33,440
Så en lille ting glider ned
foroven og siger, at du

623
00:30:33,440 --> 00:30:34,820
ikke har gjort dette korrekt.

624
00:30:34,820 --> 00:30:36,260
Prøv venligst igen.

625
00:30:36,260 --> 00:30:37,890
Og så kan det endda bare glide op.

626
00:30:37,890 --> 00:30:40,710
>> Slår ud jQuery har indbyggede funktioner
at gøre alle det

627
00:30:40,710 --> 00:30:44,180
animation virkelig, virkelig nemt.

628
00:30:44,180 --> 00:30:46,750
Så der er først fade
ud funktion, som

629
00:30:46,750 --> 00:30:47,710
du kan ringe på noget.

630
00:30:47,710 --> 00:30:55,650
Og det er en måde at ændre CSS af
at element i en animeret måde.

631
00:30:55,650 --> 00:30:58,480
Så det tager, uanset element
du kalder det fade ud på.

632
00:30:58,480 --> 00:31:03,990
Og så, langsomt ændrer det opacitet
indtil det går helt gennemsigtig.

633
00:31:03,990 --> 00:31:07,330
>> TOMAS REIMERS: Den anden populære
er glide ned, hvilket vil gøre

634
00:31:07,330 --> 00:31:08,800
noget vises ved at skubbe den ned.

635
00:31:08,800 --> 00:31:12,840
Så i tilfælde af rullemenuen,
igen, da vi lærte at opdage

636
00:31:12,840 --> 00:31:15,310
når dette er blevet svævede,
du bare kunne fortælle denne bund

637
00:31:15,310 --> 00:31:16,910
del glide ned nu.

638
00:31:16,910 --> 00:31:19,270
Og så ser det ud
ved at glide ned.

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

640
00:31:22,042 --> 00:31:26,590
>> MIKE RIZZO: Og så, hvis du bare har
en form for animation i tankerne, at

641
00:31:26,590 --> 00:31:29,080
jQuery giver ikke nødvendigvis.

642
00:31:29,080 --> 00:31:32,690
For eksempel, lad os sige jQuery
yder dig et dias

643
00:31:32,690 --> 00:31:33,750
ned og slide op.

644
00:31:33,750 --> 00:31:36,740
Nå, lad os sige, du ønskede at glide
noget fra venstre eller fra

645
00:31:36,740 --> 00:31:39,880
den rigtige slags ligesom CS50
hovedside gør, når

646
00:31:39,880 --> 00:31:42,080
du går til et nyt panel.

647
00:31:42,080 --> 00:31:45,030
Du ville så sandsynligvis nødt til at
gennemføre det selv ved hjælp af

648
00:31:45,030 --> 00:31:49,310
animere funktion inden jQuery.

649
00:31:49,310 --> 00:31:51,350
>> Så på samme måde, du bare animere.

650
00:31:51,350 --> 00:31:55,850
Og så, i det det tager en
ordbog af de forskellige værdier

651
00:31:55,850 --> 00:31:57,340
at du skulle passere.

652
00:31:57,340 --> 00:32:06,960
Så her, hvis vi ønskede at animere
element foo således, at dens bredde enten

653
00:32:06,960 --> 00:32:10,880
udvider eller kontrakter til 80 pixels,
afhængigt af, hvad det i øjeblikket er.

654
00:32:10,880 --> 00:32:14,100
Vi ville bare videregive, at så
argumentet i det.

655
00:32:14,100 --> 00:32:18,060
>> Animere også har nogle andre argumenter
at du kunne passere det, for eksempel,

656
00:32:18,060 --> 00:32:21,150
hastigheden af ​​animationen
at du ønsker at give det.

657
00:32:21,150 --> 00:32:26,220
Og for at gøre det, ville jeg bare sige
hurtigt Google jQuery animere.

658
00:32:26,220 --> 00:32:31,710
Og så opdrager denne side, kan du
se det fik en masse forskellige

659
00:32:31,710 --> 00:32:33,560
egenskaber, som du kan passere det.

660
00:32:33,560 --> 00:32:35,990
>> Og jeg vil opfordre dig - når du kommer
på noget, du ikke

661
00:32:35,990 --> 00:32:40,390
kende eller blot ønsker at lære mere om en
bestemt metode, som du kan ringe

662
00:32:40,390 --> 00:32:41,270
om noget -

663
00:32:41,270 --> 00:32:44,440
bare google det. jQuery er yderst
veldokumenteret.

664
00:32:44,440 --> 00:32:49,140
Og ofte gange der er en masse af
eksempler på, at de leverer til dig.

665
00:32:49,140 --> 00:32:52,470
Hvis vi rulle ned -

666
00:32:52,470 --> 00:32:53,720
vej ned -

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

668
00:32:57,660 --> 00:32:59,190
at vi kan bruge, så godt.

669
00:32:59,190 --> 00:33:02,480
>> Igen, når en udvikler rent faktisk går
gennem besværet med at skrive et

670
00:33:02,480 --> 00:33:05,810
bibliotek, de typisk vil have
nogen til at bruge det.

671
00:33:05,810 --> 00:33:09,400
Så sammen med kommer til at
være en dokumentation.

672
00:33:09,400 --> 00:33:12,270
Og at dokumentation kan normalt være
findes på projektets side, der er

673
00:33:12,270 --> 00:33:14,970
hvorfor vi gav dig, at oprindelige websted i
starten, som forbinder dig til den

674
00:33:14,970 --> 00:33:18,080
projekt sider, så du kan
se denne dokumentation.

675
00:33:18,080 --> 00:33:22,670
>> Typisk projektet side i tilfælde
af [uhørlige], det fortalte dig det

676
00:33:22,670 --> 00:33:23,940
navnene på de klasser.

677
00:33:23,940 --> 00:33:27,250
I tilfælde af JavaScript, giver
dig navnet på funktionerne.

678
00:33:27,250 --> 00:33:35,310
Af den måde, hvis vi rulle op til toppen,
en hurtig side bemærkning om funktioner er

679
00:33:35,310 --> 00:33:39,080
når du ser en funktion implementeret
som dette med den hårde

680
00:33:39,080 --> 00:33:43,800
parentes i midten, der betyder
at ejendommen er valgfrit.

681
00:33:43,800 --> 00:33:44,750
Bare en heads up.

682
00:33:44,750 --> 00:33:47,350
Jeg har set en masse spørgsmål
om det.

683
00:33:47,350 --> 00:33:50,370
>> Så her kan vi se, at
animere tager egenskaber

684
00:33:50,370 --> 00:33:51,800
som et nødvendigt argument.

685
00:33:51,800 --> 00:33:54,870
Og alt andet er valgfrit.

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

687
00:33:56,136 --> 00:33:58,090
du kan tænke på dette, sortere
af, ligesom man-siderne.

688
00:33:58,090 --> 00:34:04,275
Man sider er dokumentation for C og
for en masse andre ting, så godt.

689
00:34:04,275 --> 00:34:11,020
>> MIKE RIZZO: Så vi har lært at
ændre anderledes CSS på siden,

690
00:34:11,020 --> 00:34:14,040
animere den, og fjerne tilføje HTML.

691
00:34:14,040 --> 00:34:16,889
Men en af ​​de virkelig mest magtfulde
ting om JavaScript

692
00:34:16,889 --> 00:34:18,270
og især jQuery -

693
00:34:18,270 --> 00:34:22,570
hvad det kan du gøre, er at reagere på
forskellige elementer til at ske.

694
00:34:22,570 --> 00:34:25,380
For eksempel, her har vi
en event handler.

695
00:34:25,380 --> 00:34:28,210
Og det betyder bare, når dette
hændelse sker, vi håndtere det på en

696
00:34:28,210 --> 00:34:29,280
bestemt måde.

697
00:34:29,280 --> 00:34:35,159
>> Så her, den generiske jQuery begivenhed
handleren er prikken på.

698
00:34:35,159 --> 00:34:42,949
Og så, den første ting, du har opgivet
er det tilfælde bør det

699
00:34:42,949 --> 00:34:43,810
lytte efter.

700
00:34:43,810 --> 00:34:45,610
Så her, det er klik,
vi venter på.

701
00:34:45,610 --> 00:34:49,250
>> TOMAS REIMERS: Alternativt har du
den svæver, som er en meget populær en.

702
00:34:49,250 --> 00:34:52,000
Så tilbage til min rullemenuen idé.

703
00:34:52,000 --> 00:34:54,239
Du ville have den øverste på hover.

704
00:34:54,239 --> 00:34:56,096
Og så kunne du ændre det.

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

706
00:34:56,830 --> 00:35:01,680
Og så, når det sker, er det bare
udfører denne funktion, at vi giver det

707
00:35:01,680 --> 00:35:05,080
som et argument, og at
det advarer hej eller hej.

708
00:35:05,080 --> 00:35:08,900
>> TOMAS REIMERS: Så i tilfælde af
JavaScript, er dette et sted vi nødt til at

709
00:35:08,900 --> 00:35:12,970
fjerne os fra C. Vi kan faktisk
tage funktioner som argumenter.

710
00:35:12,970 --> 00:35:15,940
Og der er en masse virkelig
komplekse måder at gøre dette.

711
00:35:15,940 --> 00:35:17,940
Vi kommer til at fremme den ene vej,
der er, kan du definere

712
00:35:17,940 --> 00:35:19,270
fungere lige der.

713
00:35:19,270 --> 00:35:22,540
>> Så når du beder om en funktion som
en parameter, er du dybest set blot

714
00:35:22,540 --> 00:35:24,500
kommer til at definere funktionen
på stedet.

715
00:35:24,500 --> 00:35:27,090
Og den måde du definerer en funktion
i JavaScript er dig

716
00:35:27,090 --> 00:35:28,820
bogstaveligt sige funktion.

717
00:35:28,820 --> 00:35:30,130
Derefter sædvanligvis navnet
af funktionen.

718
00:35:30,130 --> 00:35:32,510
Men vi vil aldrig referere
denne funktion igen.

719
00:35:32,510 --> 00:35:34,040
Så vi lader det navnløs.

720
00:35:34,040 --> 00:35:40,440
>> Derefter parenteser, så krøllet
seler, og derefter koden i det.

721
00:35:40,440 --> 00:35:42,540
Så vi forstår dette dåse
være lidt forvirrende.

722
00:35:42,540 --> 00:35:45,180
Så vi giver dig den almindelige form for
hvad en hændelseshandler ligner

723
00:35:45,180 --> 00:35:47,790
nedenfor, som er på begivenheder.

724
00:35:47,790 --> 00:35:50,598
Og så, din kode inde det.

725
00:35:50,598 --> 00:35:52,478
>> MIKE RIZZO: Er der nogen
spørgsmål om denne?

726
00:35:52,478 --> 00:35:54,818
Dette kan være lidt forvirrende
første gang, du ser det.

727
00:35:54,818 --> 00:35:57,550
>> TOMAS REIMERS: Du rent faktisk ønsker at
åbne en fil og vise dem nogle

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

729
00:35:58,155 --> 00:35:59,853
>> MIKE RIZZO: Ja, lad os gøre det.

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

731
00:36:00,256 --> 00:36:02,490
>> TOMAS REIMERS: Så nu er vi
i apparatet.

732
00:36:02,490 --> 00:36:07,730
Og hvad vi har gjort er, at vi har taget
frihed til at skabe både en index.html

733
00:36:07,730 --> 00:36:10,100
fil, som linker til
en JavaScript-fil.

734
00:36:10,100 --> 00:36:12,880
Og kan vi åbne op for -

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

736
00:36:15,170 --> 00:36:16,630
Tja, det gør to ting.

737
00:36:16,630 --> 00:36:18,350
>> Den første er den linker til
den JavaScript-fil.

738
00:36:18,350 --> 00:36:21,250
Og vi vil se, at op her.

739
00:36:21,250 --> 00:36:25,340
Vi ser, at i spidsen for
HTML-dokument, især.

740
00:36:25,340 --> 00:36:28,260
Så du vil se der,
vi, dybest set, siger SRC,

741
00:36:28,260 --> 00:36:29,590
som står for kilden.

742
00:36:29,590 --> 00:36:30,630
Og det er det URL.

743
00:36:30,630 --> 00:36:32,700
>> Så her kan man sige, vi har
inkluderet jQuery.

744
00:36:32,700 --> 00:36:34,290
Og vi har også inkluderet scripts.

745
00:36:34,290 --> 00:36:40,630
Den anden måde at medtage JavaScript er
som du kan medtage en inline-script

746
00:36:40,630 --> 00:36:44,600
tag, som vi har på bunden, hvor det
siger script type er tekst JavaScript.

747
00:36:44,600 --> 00:36:46,960
>> Så vi siger, lyt, er vi
ved at omfatte et script.

748
00:36:46,960 --> 00:36:51,890
Og typen af ​​det script er
JavaScript, som er en type af tekst.

749
00:36:51,890 --> 00:36:52,550
Meget enkel.

750
00:36:52,550 --> 00:36:56,490
>> MIKE RIZZO: Så det, slags, får at
dit spørgsmål om, hvordan vi inddrager

751
00:36:56,490 --> 00:37:02,340
JavaScript i vores filer, fordi når vi
havde PHP, vi gør noget som dette.

752
00:37:02,340 --> 00:37:07,570
Og så har vores PHP funktioner -
lad os sige lagre gøre

753
00:37:07,570 --> 00:37:09,150
noget med det -

754
00:37:09,150 --> 00:37:10,490
går derind.

755
00:37:10,490 --> 00:37:13,860
Men nu har vi scripttags
at vi giver det, som faktisk

756
00:37:13,860 --> 00:37:19,470
en del af HTML sig selv, fordi det ikke er
faking at være en HTML-fil som det

757
00:37:19,470 --> 00:37:25,070
er i PHP, fordi hvis du rent faktisk går i
og se på kilden til siden,

758
00:37:25,070 --> 00:37:28,430
du vil se disse scripttags derinde
med JavaScript forbundet med

759
00:37:28,430 --> 00:37:29,800
dem i det.

760
00:37:29,800 --> 00:37:31,760
>> Så, hvis vi ønskede at
skrive nogle JavaScript -

761
00:37:31,760 --> 00:37:37,110
lad os bare sige, at vi ønskede at ændre krop
fordi lige nu har jeg ikke

762
00:37:37,110 --> 00:37:40,020
andre tags, som jeg virkelig
redigere udover kroppen.

763
00:37:40,020 --> 00:37:42,450
Lad os bare sige, at jeg ønskede at
ændre CSS af det.

764
00:37:42,450 --> 00:37:46,190
Så vi vil gå videre og forandring
farven på den til rød.

765
00:37:46,190 --> 00:37:47,380
>> Så jeg gemme filen.

766
00:37:47,380 --> 00:37:52,700
Lad os gå tilbage til vores webside, opdateringshastighed,
og det gør det automatisk

767
00:37:52,700 --> 00:37:55,920
fordi det ikke synes ligesom det ventede
på alle, fordi vi ikke lyttede

768
00:37:55,920 --> 00:37:59,450
til et arrangement eller noget lignende.

769
00:37:59,450 --> 00:38:02,800
>> TOMAS REIMERS: Så hvis vi går tilbage til det
fil i særdeleshed - HTML

770
00:38:02,800 --> 00:38:04,710
fil - hvad du vil
at se, er, at vi har -

771
00:38:04,710 --> 00:38:06,810
huske, at dette er indlæst,
slags, kronologisk.

772
00:38:06,810 --> 00:38:09,910
Så vi har først hovedet.
indlæser disse to filer.

773
00:38:09,910 --> 00:38:10,800
Så går vi til kroppen.

774
00:38:10,800 --> 00:38:11,640
Og vi ser hej verden.

775
00:38:11,640 --> 00:38:13,030
Så vi render hej verden.

776
00:38:13,030 --> 00:38:15,240
>> Og så det sidste, vi har
er vi har script-tag.

777
00:38:15,240 --> 00:38:20,880
Så det kører script-tag, fordi det er
ikke fortæller det til at vente på noget.

778
00:38:20,880 --> 00:38:24,700
Og det er det mest basale
måde at køre JavaScript.

779
00:38:24,700 --> 00:38:29,200
>> Med det sagt, kan du sætte scriptet
tag op i headeren bare

780
00:38:29,200 --> 00:38:31,240
for at vise dette punkt?

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

782
00:38:34,450 --> 00:38:35,700
Og køre den.

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

784
00:38:38,880 --> 00:38:41,070
Vi kommer til at bemærke, at det
ikke ændre farven.

785
00:38:41,070 --> 00:38:44,210
Og dette er et af de problemer,
JavaScript er, at tingene er indlæst

786
00:38:44,210 --> 00:38:45,930
i kronologisk rækkefølge.

787
00:38:45,930 --> 00:38:49,750
>> Så på det tidspunkt, at koden
kørte, valgte vi -

788
00:38:49,750 --> 00:38:52,530
gå tilbage -

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

790
00:38:53,670 --> 00:38:57,560
Kroppen tag eksisterer ikke endnu, fordi
JavaScript er på linje med HTML.

791
00:38:57,560 --> 00:39:01,790
Så browser er ligesom at vælge krop.

792
00:39:01,790 --> 00:39:02,760
Der er ikke sådan noget endnu.

793
00:39:02,760 --> 00:39:03,600
Så vi kan ignorere det.

794
00:39:03,600 --> 00:39:05,330
Og vi holde ud.

795
00:39:05,330 --> 00:39:07,200
>> Og så skal vi definere en krop tag.

796
00:39:07,200 --> 00:39:09,670
Men som aldrig bliver opdateret.

797
00:39:09,670 --> 00:39:12,560
Så når du gennemføre script
tags, skal du sørge for at placere

798
00:39:12,560 --> 00:39:15,502
efter kroppen tag.

799
00:39:15,502 --> 00:39:16,820
Næste dias.

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

801
00:39:17,830 --> 00:39:19,330
Så vi ændrede noget.

802
00:39:19,330 --> 00:39:21,910
Men det ligner ikke det reagerede på
os på alle, fordi det lige slags

803
00:39:21,910 --> 00:39:24,150
gjorde det, så snart det er lagt på siden.

804
00:39:24,150 --> 00:39:27,700
Så nu, i stedet for at gøre dette, hvorfor
ikke tilføjer vi en event handler.

805
00:39:27,700 --> 00:39:31,020
>> Så lad os gøre noget
til kroppen igen.

806
00:39:31,020 --> 00:39:33,490
Og lad os sige, at vi gør det på -

807
00:39:33,490 --> 00:39:34,500
klik.

808
00:39:34,500 --> 00:39:35,750
Vi vil tilføje en funktion.

809
00:39:35,750 --> 00:39:38,270

810
00:39:38,270 --> 00:39:39,690
>> TOMAS REIMERS: Lad os ændre
det er farve til rød igen.

811
00:39:39,690 --> 00:39:40,000
Hvorfor ikke?

812
00:39:40,000 --> 00:39:41,680
>> MIKE RIZZO: Ja, lad os ændre
dens 'farve til rød igen.

813
00:39:41,680 --> 00:39:46,310

814
00:39:46,310 --> 00:39:46,900
Ok.

815
00:39:46,900 --> 00:39:48,480
Så lad os genindlæse siden.

816
00:39:48,480 --> 00:39:49,530
OK, vi ser -

817
00:39:49,530 --> 00:39:52,290
som forventet, betyder det ikke røde endnu.

818
00:39:52,290 --> 00:39:53,610
Men så kan vi gå videre og klik på det.

819
00:39:53,610 --> 00:39:54,270
>> TOMAS REIMERS: Og det bliver røde.

820
00:39:54,270 --> 00:39:56,090
>> MIKE RIZZO: Og det gør
røde som forventet.

821
00:39:56,090 --> 00:39:59,010
>> TOMAS REIMERS: Og vi kan se, hvordan
kan vi begynde at bygge meget grundlæggende

822
00:39:59,010 --> 00:40:00,170
interaktion.

823
00:40:00,170 --> 00:40:03,850
Andre ting, vi måske ønsker at gøre, er,
hvis vi ikke ønsker at gøre kroppen

824
00:40:03,850 --> 00:40:07,230
farven rød, lad os gøre HTML
baggrundsfarven rød.

825
00:40:07,230 --> 00:40:08,480
Bare så det er den samme CSS.

826
00:40:08,480 --> 00:40:19,960

827
00:40:19,960 --> 00:40:23,320
>> Og når vi ændrer det, kan vi se dette
meget dramatisk effekten af ​​at ændre

828
00:40:23,320 --> 00:40:25,510
hele siden.

829
00:40:25,510 --> 00:40:29,100
Så igen, hvis du gennemføre tingene,
du kan have én komponent

830
00:40:29,100 --> 00:40:30,150
som er beregnet til at blive klikket på.

831
00:40:30,150 --> 00:40:32,710
Lad os sige en Exit-knappen og
en hel anden komponent,

832
00:40:32,710 --> 00:40:33,830
som er beregnet til at reagere.

833
00:40:33,830 --> 00:40:35,755
Så du vil fjerne et vindue
når det sker.

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
Blot som eksempel -

837
00:40:42,200 --> 00:40:44,400
du ikke får at se dette tidligere -

838
00:40:44,400 --> 00:40:47,500
Jeg vil bare vise dig, hvad det ser
gerne, når vi skjuler noget.

839
00:40:47,500 --> 00:40:52,220
Så jeg vil gå videre og glider op.

840
00:40:52,220 --> 00:40:54,440
>> TOMAS REIMERS: Vil du wrap, at i en
afsnit type, før vi gør det?

841
00:40:54,440 --> 00:40:55,132
>> MIKE RIZZO: OK.

842
00:40:55,132 --> 00:40:59,135
Ja, hvorfor gør vi ikke det bare så
vi kan vælge det lidt mere.

843
00:40:59,135 --> 00:41:00,490
>> TOMAS Reimers: Og lad os
give det en klasse.

844
00:41:00,490 --> 00:41:01,740
>> MIKE RIZZO: Ja.

845
00:41:01,740 --> 00:41:06,575

846
00:41:06,575 --> 00:41:09,920
OK, så lad os se.

847
00:41:09,920 --> 00:41:14,820
Stedet for at vælge den faktiske krop
nu vil jeg bare vælge alt med

848
00:41:14,820 --> 00:41:18,780
klasse hej, som her vi
bare have én ting.

849
00:41:18,780 --> 00:41:20,900
Så vi skal ikke have til
bekymre sig om det.

850
00:41:20,900 --> 00:41:23,080
>> Så jeg vil opdatere den.

851
00:41:23,080 --> 00:41:24,230
Jeg vil gå videre og klik på det.

852
00:41:24,230 --> 00:41:27,890
Og det, en slags, gjorde en underlig dias
up ting, der ikke ser så

853
00:41:27,890 --> 00:41:29,580
attraktiv.

854
00:41:29,580 --> 00:41:31,060
Generelt ser de ret nice.

855
00:41:31,060 --> 00:41:32,720
Jeg gætte, dette - for nogle
grund - ikke gjorde.

856
00:41:32,720 --> 00:41:36,640
Jeg vil bare gøre en fade ud, så
du kan se på det også.

857
00:41:36,640 --> 00:41:38,100
Meget pænere.

858
00:41:38,100 --> 00:41:41,150
>> Og så, hvis jeg åbner op for JavaScript
trøste igen, og vi ønsker at se, hvad

859
00:41:41,150 --> 00:41:43,900
det ser ud, når vi fade det i.

860
00:41:43,900 --> 00:41:46,920
Nu vil jeg bare kalde fade ind på det.

861
00:41:46,920 --> 00:41:48,830
Og det svinder igen

862
00:41:48,830 --> 00:41:56,150
>> Tilsvarende kunne vi faktisk også videregive
et argument at fade ind eller fade ud,

863
00:41:56,150 --> 00:41:57,640
hvilket er, slags, hastigheden af ​​det.

864
00:41:57,640 --> 00:42:02,220
Så lad os gå videre og sige, at vi ønsker,
det at gå langsomt falme i.

865
00:42:02,220 --> 00:42:04,250
Så jeg tror det stadig virkede
temmelig hurtig.

866
00:42:04,250 --> 00:42:06,180
Men det var langsommere end før.

867
00:42:06,180 --> 00:42:10,340
>> TOMAS REIMERS: Og hvis du ønsker at finde
ud af mere om disse ting, igen,

868
00:42:10,340 --> 00:42:13,410
bare gå til jQuery dokumentation,
som vi har givet dig, og læse

869
00:42:13,410 --> 00:42:13,735
gennem disse.

870
00:42:13,735 --> 00:42:15,790
De dokumenterer deres funktioner
utroligt godt.

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
Så jeg gætte lad os gå tilbage til dette.

874
00:42:21,560 --> 00:42:23,490
Og vi kan snakke om vores sidste side.

875
00:42:23,490 --> 00:42:24,690
Nå, kan vi slutte af med Bootstrap.

876
00:42:24,690 --> 00:42:27,140
Og så vil vi åbne det op
for nogle spørgsmål.

877
00:42:27,140 --> 00:42:30,180
Og hvis du fyre har nogen ideer,
du gerne vil prøve at kaste op og se

878
00:42:30,180 --> 00:42:34,150
hvis vi kan gennemføre dem med
JavaScript hurtigt.

879
00:42:34,150 --> 00:42:37,890
>> Så virkelig hurtigt om Bootstrap, som
automatisk blev medtaget i

880
00:42:37,890 --> 00:42:41,700
dit sidste problem indstillet i CSS mappen
og faktisk er knyttet til i din

881
00:42:41,700 --> 00:42:43,190
header.php.

882
00:42:43,190 --> 00:42:46,740
Så du kunne have tilføjet klasser,
defineres inden Bootstrap til det.

883
00:42:46,740 --> 00:42:50,490
Og det ville have automatisk stylet
disse ting i overensstemmelse hermed.

884
00:42:50,490 --> 00:42:54,550
>> TOMAS REIMERS: So Bootstrap er en meget
magiske ting udviklet af mennesker

885
00:42:54,550 --> 00:42:55,340
på Twitter.

886
00:42:55,340 --> 00:42:57,230
Og hvad det skulle gøre, var -

887
00:42:57,230 --> 00:43:00,740
før hjemmesider var virkelig hårdt på at gøre
ser nice, især når vi havde

888
00:43:00,740 --> 00:43:02,200
en masse fælles komponenter.

889
00:43:02,200 --> 00:43:04,770
Så en masse knapper på
web så det samme.

890
00:43:04,770 --> 00:43:08,960
>> En masse af tekstfelter kan foretages
se bedre ud end standard tekst

891
00:43:08,960 --> 00:43:13,620
felt, du sikkert kender fra virkelig
gamle hjemmesider eller virkelig dårligt lavet

892
00:43:13,620 --> 00:43:18,210
websites, som bare ligner bogstavelig
tekstbokse uden nogen form for tekst

893
00:43:18,210 --> 00:43:21,190
skygge eller nogen form for god disposition.

894
00:43:21,190 --> 00:43:24,540
Så hvad Bootstrap gjorde, var det sagt, godt,
Vi har en masse fælles stilarter.

895
00:43:24,540 --> 00:43:28,210
Hvorfor gør vi ikke lave en fælles sæt af CSS
og et fælles sæt af JavaScript som

896
00:43:28,210 --> 00:43:32,210
godt, som kan style det som er, og som
kan give folk ting som drop

897
00:43:32,210 --> 00:43:34,610
down menuer, kan der giver folk
ting som modals.

898
00:43:34,610 --> 00:43:38,580
>> Modal er hvad popper over siden
når det er strengt taget

899
00:43:38,580 --> 00:43:41,090
noget, som hæmmer yderligere
interaktion, indtil du

900
00:43:41,090 --> 00:43:43,110
interagere med det.

901
00:43:43,110 --> 00:43:45,820
Noget som dette er, er du sikker
du vil slette denne ting?

902
00:43:45,820 --> 00:43:49,100
Du kan ikke rigtig gøre noget andet
indtil du siger ja eller nej.

903
00:43:49,100 --> 00:43:52,720
>> Det tog alt dette, og det pakket det
sammen og sagde, here we go.

904
00:43:52,720 --> 00:43:54,630
Folk kan nu bruge denne.

905
00:43:54,630 --> 00:43:56,830
Og du kan finde det over
på getbootstrap.com.

906
00:43:56,830 --> 00:44:00,480
Det blev automatisk omfattet
dit sidste problem indstillet.

907
00:44:00,480 --> 00:44:04,160
Og du er mere end velkommen til at
bruge det på din endelige projekt.

908
00:44:04,160 --> 00:44:06,950
Og hvis du ønsker at følge denne
link for at få Bootstrap.

909
00:44:06,950 --> 00:44:10,590

910
00:44:10,590 --> 00:44:15,700
>> Du kan se her, er
Bootstrap CSS site.

911
00:44:15,700 --> 00:44:16,860
Du vil se Bootstrap.

912
00:44:16,860 --> 00:44:20,450
Og hvis du ruller ned, vil du se
hvordan du henter det, hvordan man

913
00:44:20,450 --> 00:44:21,900
installere det, et cetera.

914
00:44:21,900 --> 00:44:24,700
>> MIKE RIZZO: Og du kan også,
interessant nok, tilpasse det til

915
00:44:24,700 --> 00:44:27,770
være, hvad slags temaer
som du ønsker.

916
00:44:27,770 --> 00:44:31,270
Jeg ved, det er noget, jeg gjorde for min
afgangsprojekt, da jeg tog klassen

917
00:44:31,270 --> 00:44:32,050
blev tilpasse det.

918
00:44:32,050 --> 00:44:34,540
En anden version af Bootstrap at
havde en anden farve ordningen og

919
00:44:34,540 --> 00:44:36,700
forskellige former for nogle
forskellige ting.

920
00:44:36,700 --> 00:44:38,250
Så jeg opfordre dig til at lege med det.

921
00:44:38,250 --> 00:44:39,440
Det er lidt sjovt at gøre.

922
00:44:39,440 --> 00:44:43,230
>> TOMAS REIMERS: Ser på tværs toppen
igen, det er meget lig den skrifttype

923
00:44:43,230 --> 00:44:44,970
Awesome site.

924
00:44:44,970 --> 00:44:47,810
En masse af dokumentation vil begynde
at synes ens, når du har

925
00:44:47,810 --> 00:44:48,940
set nok af det.

926
00:44:48,940 --> 00:44:51,260
Så her har vi CSS
del af denne.

927
00:44:51,260 --> 00:44:53,540
Og du vil se, hvordan det
kan style ting.

928
00:44:53,540 --> 00:44:56,780
Så hvis du klikker på borde, for eksempel,
kan du straks få en

929
00:44:56,780 --> 00:45:01,710
tabel temmelig ved blot at tilføje
klassen tabel til det.

930
00:45:01,710 --> 00:45:03,150
>> Samme ting for knapper.

931
00:45:03,150 --> 00:45:12,140
Hvis du blot tilføje klassen BTN og BTN
standard eller BTN primær, kan du

932
00:45:12,140 --> 00:45:16,240
få en af ​​disse knapper
med disse pre-made stilarter.

933
00:45:16,240 --> 00:45:18,570
Og så, hvis du leder efter
noget mere end blot at

934
00:45:18,570 --> 00:45:24,100
restyling hvad w allerede har, over på
fanen JavaScript tværs af toppen, vi

935
00:45:24,100 --> 00:45:25,120
har en masse komponenter.

936
00:45:25,120 --> 00:45:30,410
>> Så her har vi overgange, modals,
dropdowns, faneblade og værktøjstip.

937
00:45:30,410 --> 00:45:35,530
En tooltip er, hvad der dukker op under din
mus, når du holder på noget.

938
00:45:35,530 --> 00:45:40,280
Popovers, alarmer, knapper, sammenklappelig
harmonikaer er hvad

939
00:45:40,280 --> 00:45:41,190
de er normalt kaldes.

940
00:45:41,190 --> 00:45:43,045
Karruseller, som flip
gennem billeder.

941
00:45:43,045 --> 00:45:52,190

942
00:45:52,190 --> 00:45:54,840
>> Så dem, er de komponenter,
af Bootstrap.

943
00:45:54,840 --> 00:45:57,620
Jeg vil opfordre dig til at
meget gå se på dem.

944
00:45:57,620 --> 00:46:01,780
Der er en JavaScript-komponent
og en CSS komponent.

945
00:46:01,780 --> 00:46:03,880
Du er velkommen til at bruge dem som du vil.

946
00:46:03,880 --> 00:46:06,730
Vi kommer ikke til at gå for meget ind i dem
fordi vi føler dokumentationen

947
00:46:06,730 --> 00:46:09,360
er virkelig godt klaret.

948
00:46:09,360 --> 00:46:10,540
Og ja.

949
00:46:10,540 --> 00:46:14,500
Har du har spørgsmål om det?

950
00:46:14,500 --> 00:46:19,430
>> MIKE RIZZO: Så som en virkelig hurtig
side, design af denne webside,

951
00:46:19,430 --> 00:46:21,830
vi hurtigt sat sammen for
denne præsentation er

952
00:46:21,830 --> 00:46:24,290
faktisk gøres ved hjælp af Bootstrap.

953
00:46:24,290 --> 00:46:27,810
Som du kan se, når vi klikker på disse
forskellige faner, er vi faktisk aldrig

954
00:46:27,810 --> 00:46:30,750
forlader denne aktuelle index.html side.

955
00:46:30,750 --> 00:46:36,400
Så hvad vi har, er forskellige divs
inden for denne index.html.

956
00:46:36,400 --> 00:46:39,610
Og så, når vi klikker på et andet
fane, er det blot at ændre

957
00:46:39,610 --> 00:46:41,590
som ens fremvisning.

958
00:46:41,590 --> 00:46:47,390
>> Så det placerer dem i overensstemmelse hermed,
ændrer HTML på siden, så

959
00:46:47,390 --> 00:46:52,330
den aktuelle fane er markeret som aktiv, så
det vises forskelligt og udseende

960
00:46:52,330 --> 00:46:52,820
virkelig rart.

961
00:46:52,820 --> 00:46:57,260
>> TOMAS REIMERS: Så blev alle gjort
uden at vi skriver næsten enhver CSS.

962
00:46:57,260 --> 00:47:01,440
Vi ser også en header på tværs af toppen,
hvor farverne er af os.

963
00:47:01,440 --> 00:47:04,800
Men den faktiske sætte den på
toppen af ​​siden og gøre

964
00:47:04,800 --> 00:47:06,660
det scroll var Bootstrap.

965
00:47:06,660 --> 00:47:09,720
Og så selv for et andet bibliotek - dette
er ikke en, vi talte om, men en

966
00:47:09,720 --> 00:47:11,580
du kan Google, hvis du ønsker.

967
00:47:11,580 --> 00:47:15,130
Dette kaldes prettify.js.

968
00:47:15,130 --> 00:47:20,650
Og det vil syntaksfremhævningen din kode
for dig at bruge både CSS og JavaScript.

969
00:47:20,650 --> 00:47:23,480

970
00:47:23,480 --> 00:47:27,070
>> Det sidste, vi ønsker at tale om
før vi slipper dig ud i

971
00:47:27,070 --> 00:47:30,620
verden til at se på bibliotekerne for at finde ud af
hvordan man bruger dem og, forhåbentlig,

972
00:47:30,620 --> 00:47:34,640
læse dokumentationen og finde, hvad du
behov er at finde biblioteker.

973
00:47:34,640 --> 00:47:37,000
Så det første er vi bare
kommer til at skubbe Google.

974
00:47:37,000 --> 00:47:37,810
Go Google.

975
00:47:37,810 --> 00:47:41,150
>> Det er bogstaveligt talt hvad vi gør, når vi
nødt til at gøre noget er vi Google.

976
00:47:41,150 --> 00:47:44,730
Er der en JavaScript-bibliotek,
tillader mig at manipulere tiden i en

977
00:47:44,730 --> 00:47:45,400
nyttig måde?

978
00:47:45,400 --> 00:47:49,510
Så hvis jeg ved, at nogle bruger skabe
en konto her, og det er

979
00:47:49,510 --> 00:47:53,010
aktuel tid, hvordan kan jeg beregne
Forskellen med det uden at skulle

980
00:47:53,010 --> 00:47:55,020
beregne det selv?

981
00:47:55,020 --> 00:47:59,630
Så det er faktisk en fælles ting,
JavaScript tid bibliotek.

982
00:47:59,630 --> 00:48:02,440
Og her er vi Moment.js--
den mest populære.

983
00:48:02,440 --> 00:48:06,530
>> Hvis vi har brug for et bibliotek til at manipulere
noget lignende farve for at kunne

984
00:48:06,530 --> 00:48:08,650
generere en flok tilfældige farver -

985
00:48:08,650 --> 00:48:10,660
eventuelt at generere en
stil eller noget -

986
00:48:10,660 --> 00:48:13,480
vi kunne google noget lignende
JavaScript farve biblioteket.

987
00:48:13,480 --> 00:48:15,620
Og jeg er sikker på, vi ville poppe op med
et tusind og en af ​​dem.

988
00:48:15,620 --> 00:48:18,290

989
00:48:18,290 --> 00:48:21,410
Du er velkommen til at læse dem igennem.

990
00:48:21,410 --> 00:48:24,610
>> Så de fleste ting - når du finder dem -
vil være vært på et af de

991
00:48:24,610 --> 00:48:25,920
websteder, som vært kode.

992
00:48:25,920 --> 00:48:26,960
De er er et par populære dem.

993
00:48:26,960 --> 00:48:30,870
Den mest populære, ved
langt, er github.com.

994
00:48:30,870 --> 00:48:35,300
Og hvis du går til GitHub det er faktisk
hvor normaliser var vært.

995
00:48:35,300 --> 00:48:36,950
Så hvis du ønsker at gå tilbage til.

996
00:48:36,950 --> 00:48:38,135
Vis dem det.

997
00:48:38,135 --> 00:48:40,516
>> MIKE RIZZO: Og det er faktisk, hvor
dette er hostet også, hvis du bemærket.

998
00:48:40,516 --> 00:48:41,000
>> TOMAS REIMERS: Ja.

999
00:48:41,000 --> 00:48:49,078
Så hvis du går over til normalisere
og gå til GitHub.

1000
00:48:49,078 --> 00:48:51,936
Var er det?

1001
00:48:51,936 --> 00:48:54,620
>> MIKE RIZZO: Den lille kat ting
er GitHub symbol.

1002
00:48:54,620 --> 00:48:56,330
>> TOMAS REIMERS: Oh.

1003
00:48:56,330 --> 00:49:02,180
Så GitHub bruger en metode, der kaldes
Git at gemme koden.

1004
00:49:02,180 --> 00:49:05,150
Er du ikke ved, hvad der er eller
det skræmmer dig, det er fint.

1005
00:49:05,150 --> 00:49:16,100
Du behøver ikke at vide, hvad Git er
fordi GitHub har en download-knap

1006
00:49:16,100 --> 00:49:17,200
nederst til højre.

1007
00:49:17,200 --> 00:49:21,350
>> Den anden nyttige ting at vide
om GitHub er de fleste produkter

1008
00:49:21,350 --> 00:49:23,200
vil have en læse mig.

1009
00:49:23,200 --> 00:49:25,400
Og hvis de ikke har en hjemmeside, den
læse mig vil tale om, hvordan du

1010
00:49:25,400 --> 00:49:28,310
installere det, hvordan du bruger det, hvad det
gør, et cetera, et cetera, et cetera.

1011
00:49:28,310 --> 00:49:31,033
Hvad vi har været stort set
gå dig igennem.

1012
00:49:31,033 --> 00:49:32,326
>> MIKE RIZZO: Internettets holde op.

1013
00:49:32,326 --> 00:49:34,020
>> TOMAS REIMERS: Det er fint.

1014
00:49:34,020 --> 00:49:36,980
De sidste to ting vi ønskede
at tale om -

1015
00:49:36,980 --> 00:49:38,750
vi har talt om Git -

1016
00:49:38,750 --> 00:49:40,290
er fejlfinding.

1017
00:49:40,290 --> 00:49:43,020
Og dette er ikke så relevant for
slutproduktet, som det er

1018
00:49:43,020 --> 00:49:44,870
når du forlader 50 år.

1019
00:49:44,870 --> 00:49:48,310
Og når du løber ind i produkter
gennemførelse af biblioteker eller gennemførelse af

1020
00:49:48,310 --> 00:49:50,230
dit eget projekt, du vil
har spørgsmål, eller du er

1021
00:49:50,230 --> 00:49:51,660
kommer til at se for spørgsmål.

1022
00:49:51,660 --> 00:49:53,060
>> Igen, Google det.

1023
00:49:53,060 --> 00:49:54,630
Det er bogstaveligt talt hvad vi gør.

1024
00:49:54,630 --> 00:49:56,400
Dette kommer til at lyde fjollet.

1025
00:49:56,400 --> 00:49:58,310
Men bogstaveligt, vi Google det.

1026
00:49:58,310 --> 00:50:01,810
Og igen, en af ​​de første ting
du normalt løbe ind i, er

1027
00:50:01,810 --> 00:50:06,550
stackoverflow.com, som er et vidunderligt
spørgsmål og svar syne.

1028
00:50:06,550 --> 00:50:10,530
>> Det er vidunderligt, både fordi du kan
bogføre spørgsmål og se efter

1029
00:50:10,530 --> 00:50:12,760
svar, men også fordi
det allerede har en masse

1030
00:50:12,760 --> 00:50:14,590
præ-befolket indhold der.

1031
00:50:14,590 --> 00:50:18,510
Så som regel, når du Google en programmering
spørgsmål inden for den første

1032
00:50:18,510 --> 00:50:22,620
par hits du måske allerede har kørt
ind i det i løbet af dit problem sæt.

1033
00:50:22,620 --> 00:50:27,840
>> Og så den sidste rigtig kort ting
er jsFiddle, der er - i dag vi har

1034
00:50:27,840 --> 00:50:32,110
gjort et stort arbejde med
JavaScript HTML CSS.

1035
00:50:32,110 --> 00:50:39,820
JsFiddle er en web-app, som dybest set
giver dig mulighed for at tage din HTML, DIN

1036
00:50:39,820 --> 00:50:42,820
JavaScript nederst til venstre, og
din CSS øverst til højre.

1037
00:50:42,820 --> 00:50:47,840
Og så kan det skabe en hurtig render
af det og se, hvordan det interagerer.

1038
00:50:47,840 --> 00:50:50,500
Det er meget nyttigt, når folk forsøger
til at gøre en proof of concept som

1039
00:50:50,500 --> 00:50:52,910
dette er, hvordan du ville
gøre en drop down menu.

1040
00:50:52,910 --> 00:50:54,980
Måske en hurtig afdække eller hvad.

1041
00:50:54,980 --> 00:50:56,560
>> MIKE RIZZO: Så lad os gå
videre og klik på denne.

1042
00:50:56,560 --> 00:50:57,820
En hurtig note -

1043
00:50:57,820 --> 00:51:00,430
henviser til, at før vi var
gør på klik.

1044
00:51:00,430 --> 00:51:04,380
Slår ud JCorey Korea har også en indbygget
i klik event handleren, at det

1045
00:51:04,380 --> 00:51:07,020
bruger bare fordi det tal, du er
lyst til at gøre en masse ting

1046
00:51:07,020 --> 00:51:08,410
når du ønsker at klikke på noget.

1047
00:51:08,410 --> 00:51:09,690
>> Tilsvarende er det også har en svæve.

1048
00:51:09,690 --> 00:51:12,850
Men for at få det fulde omfang af
dem, se på jQuery

1049
00:51:12,850 --> 00:51:15,320
dokumentation og gøre det.

1050
00:51:15,320 --> 00:51:18,760
Jeg gjorde noget dumt her.

1051
00:51:18,760 --> 00:51:21,490
>> TOMAS REIMERS: Så jeg har en virkelig hurtig
program lige her, som siger

1052
00:51:21,490 --> 00:51:22,640
knap klik.

1053
00:51:22,640 --> 00:51:23,890
Så har vi en for-løkke.

1054
00:51:23,890 --> 00:51:26,810
For i er mindre end 404.

1055
00:51:26,810 --> 00:51:29,530
Det er bare at dukke op
disse advarselsmeddelelser.

1056
00:51:29,530 --> 00:51:33,425
>> MIKE RIZZO: Og hvad var det
kode 404 stod for i HTML?

1057
00:51:33,425 --> 00:51:34,145
Er der nogen der kan huske?

1058
00:51:34,145 --> 00:51:35,450
Ikke fundet, til højre.

1059
00:51:35,450 --> 00:51:38,640

1060
00:51:38,640 --> 00:51:40,885
Chrome også tilføjet denne nydelige
ting, hvor du kan -

1061
00:51:40,885 --> 00:51:43,430
>> TOMAS REIMERS: Fordi folk som
Mike begyndte at gøre dette en masse og

1062
00:51:43,430 --> 00:51:47,230
irriterende brugere, som tillader
dig at se info.

1063
00:51:47,230 --> 00:51:48,286
>> MIKE RIZZO: Ja.

1064
00:51:48,286 --> 00:51:50,690
>> TOMAS REIMERS: Har vi nogen spørgsmål
om dette, om JavaScript

1065
00:51:50,690 --> 00:51:53,420
biblioteker, finde biblioteker, eller
hvad webudvikling udseende

1066
00:51:53,420 --> 00:51:55,400
ligesom i den virkelige verden?

1067
00:51:55,400 --> 00:51:56,880
Vi kører op mod tiden.

1068
00:51:56,880 --> 00:52:00,400
Så jeg er ikke sikker på, vi vil
at have tid til at gennemføre

1069
00:52:00,400 --> 00:52:02,290
medmindre det er virkelig hurtig.

1070
00:52:02,290 --> 00:52:04,580
Er vi gode?

1071
00:52:04,580 --> 00:52:08,110
>> MIKE RIZZO: Noget du fyre vil gerne
at se virkelig hurtig i, ligesom, to

1072
00:52:08,110 --> 00:52:09,556
minutter eller mindre?

1073
00:52:09,556 --> 00:52:10,870
>> TOMAS REIMERS: Anything
vi kan afklare?

1074
00:52:10,870 --> 00:52:12,500
Hvordan man skriver i -

1075
00:52:12,500 --> 00:52:13,260
>> PUBLIKUM: [uhørligt]?

1076
00:52:13,260 --> 00:52:16,070
>> MIKE RIZZO: Ja, så that -

1077
00:52:16,070 --> 00:52:18,065
>> TOMAS REIMERS: Du kan bare slå
Ctrl-U på hjemmesiden.

1078
00:52:18,065 --> 00:52:19,275
>> MIKE RIZZO: Åh, jeg vidste ikke, at.

1079
00:52:19,275 --> 00:52:22,290
>> TOMAS REIMERS: Jeg tror, ​​ja.

1080
00:52:22,290 --> 00:52:23,300
Ctrl-U. Ja.

1081
00:52:23,300 --> 00:52:25,970
>> MIKE RIZZO: Åh, så det er
kode til hjemmesiden.

1082
00:52:25,970 --> 00:52:29,580
Men hvis du rent faktisk ønsker at downloade vores
filer og alt, det er hostet

1083
00:52:29,580 --> 00:52:32,650
på github.com

1084
00:52:32,650 --> 00:52:34,850
>> TOMAS REIMERS: skråstreg mit navn -

1085
00:52:34,850 --> 00:52:38,504
Tomas Reimers - skråstreg
CS50 bindestreg seminaret.

1086
00:52:38,504 --> 00:52:40,710
>> MIKE RIZZO: Og du kan
finde alt der.

1087
00:52:40,710 --> 00:52:42,310
>> TOMAS REIMERS: Dette er, hvad GitHub
ser ud, ved den måde.

1088
00:52:42,310 --> 00:52:44,910
Så igen, når du ser en open source
projekt typisk vil de være en read

1089
00:52:44,910 --> 00:52:45,950
mig der, som du kan læse.

1090
00:52:45,950 --> 00:52:50,200
Og hvis du går tilbage, vil du bemærke, at
du har download zip, som vil

1091
00:52:50,200 --> 00:52:52,130
giver dig mulighed for at downloade kilden
kode til at omfatte

1092
00:52:52,130 --> 00:52:53,666
produkt i din egen ting.

1093
00:52:53,666 --> 00:52:56,890
>> MIKE RIZZO: Ja, og hvis vi blot klikke
på index.html virkelig hurtigt -

1094
00:52:56,890 --> 00:52:59,180
>> TOMAS REIMERS: Du kan se her er den
kildekoden til vores hjemmeside.

1095
00:52:59,180 --> 00:53:02,016

1096
00:53:02,016 --> 00:53:06,070
>> MIKE RIZZO: Også, jeg glemte at skubbe til højre
før med det store bord det

1097
00:53:06,070 --> 00:53:09,860
inkluderet, men der er også en tabel
af chmods som vi indgår

1098
00:53:09,860 --> 00:53:13,210
bare for din klarhed.

1099
00:53:13,210 --> 00:53:16,940
Men hvis vi rulle hele vejen ned til
bund, vi faktisk ikke gøre meget

1100
00:53:16,940 --> 00:53:21,160
meget med JavaScript
ting på alle med dette.

1101
00:53:21,160 --> 00:53:26,610
Det er udelukkende fra alt
andet, som vi havde.

1102
00:53:26,610 --> 00:53:28,730
>> Så tak gutter for at komme
og lytte.

1103
00:53:28,730 --> 00:53:29,830
Vi håber, at dette var virkelig nyttige.

1104
00:53:29,830 --> 00:53:33,020
Hvis du har nogen JavaScript relateret
spørgsmål eller blot ønsker at tale om

1105
00:53:33,020 --> 00:53:36,240
hvad der ellers ligesom hvad andre seje ting
du kan gøre med JavaScript, ville vi elsker

1106
00:53:36,240 --> 00:53:37,186
til at tale med dig.

1107
00:53:37,186 --> 00:53:40,010
>> TOMAS REIMERS: Hvis du har et spørgsmål
om dit projekt eller om det kan være

1108
00:53:40,010 --> 00:53:42,740
relevant, vil vi sandsynligvis holde sig omkring
lidt efter dette.

1109
00:53:42,740 --> 00:53:44,640
Men bortset fra det, har
en god weekend.

1110
00:53:44,640 --> 00:53:45,845
>> MIKE RIZZO: Ja, nyde.

1111
00:53:45,845 --> 00:53:46,120
Se jer.

1112
00:53:46,120 --> 00:53:47,370
>> TOMAS REIMERS: See ya.

1113
00:53:47,370 --> 00:53:47,926