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

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

3
00:00:08,180 --> 00:00:09,250
Jag heter Tomas Reimers.

4
00:00:09,250 --> 00:00:10,500
>> MIKE RIZZO: Och jag är Mike Rizzo.

5
00:00:10,500 --> 00:00:12,990
>> TOMAS REIMERS: Vi är två av CS50s TS.

6
00:00:12,990 --> 00:00:18,910
Och idag tar vi leder seminariet om
JavaScript och CSS för webbprogram.

7
00:00:18,910 --> 00:00:22,140
Om du vill följa med, det
länken är där borta.

8
00:00:22,140 --> 00:00:25,190
Och vill du sätta upp
på kort på datorn?

9
00:00:25,190 --> 00:00:27,460
>> Det finns på länken.

10
00:00:27,460 --> 00:00:30,390
Det är en liten plats, som har kopplingar till
alla resurser vi kommer att vara

11
00:00:30,390 --> 00:00:36,490
peka dig i dag och har även en hel del
användbar information skriven av oss till

12
00:00:36,490 --> 00:00:39,680
Läs mer på djupet när du går tillbaka,
och du försöker komma ihåg vad

13
00:00:39,680 --> 00:00:42,166
exakt gjorde vi säger, vad du var
talar om, et cetera.

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

15
00:00:43,870 --> 00:00:44,890
Så låt oss börja.

16
00:00:44,890 --> 00:00:45,700
>> TOMAS REIMERS: Så du vill börja?

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 ville först börja med en bred
översikt om internet och

20
00:00:51,730 --> 00:00:54,240
filtyper vid utformningen av webbplatser.

21
00:00:54,240 --> 00:00:57,550
Även denna presentation som vi vill
komma in i JavaScript mycket mycket

22
00:00:57,550 --> 00:01:00,320
senare, ville vi att börja med
bara, typ av, liksom en fågelperspektiv

23
00:01:00,320 --> 00:01:03,270
av vad en hemsida är och hur
att tänka på att utforma en

24
00:01:03,270 --> 00:01:04,800
webbplats för start.

25
00:01:04,800 --> 00:01:08,370
>> Så ni, på denna punkt - med det
vara fredag ​​kväll - borde ha

26
00:01:08,370 --> 00:01:11,000
lämnat in din CS50 finans
Problemet ställer.

27
00:01:11,000 --> 00:01:15,260
Förhoppningsvis var det en god smak
om vad webbprogrammering kan vara.

28
00:01:15,260 --> 00:01:18,261
Men här vill vi, typ av, ge
du en annan smak, liksom.

29
00:01:18,261 --> 00:01:23,190
>> TOMAS REIMERS: Så bara för att sammanfatta vad
händer, när du skriver in din webbadress till

30
00:01:23,190 --> 00:01:26,650
din webbläsare, blir den webbadressen
såg upp i datorn.

31
00:01:26,650 --> 00:01:28,590
Och datorns ansluten
till en annan dator,

32
00:01:28,590 --> 00:01:29,890
som är värd den webbplatsen.

33
00:01:29,890 --> 00:01:33,150
OK, så när du går till google.com, du
ansluten till en av Googles

34
00:01:33,150 --> 00:01:36,496
datorer, som har den
filer för google.com.

35
00:01:36,496 --> 00:01:38,750
>> Det frågar sedan för en viss fil.

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

37
00:01:40,020 --> 00:01:41,550
Jag vet inte -

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

39
00:01:48,170 --> 00:01:49,340
den specifika filen.

40
00:01:49,340 --> 00:01:52,780
Och webbservern är det som händer
att återlämna den till dig.

41
00:01:52,780 --> 00:01:54,910
>> Sedan, när du går igenom den filen -

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

43
00:01:57,750 --> 00:01:59,950
när du är datorn blir att
fil - det kommer att starta

44
00:01:59,950 --> 00:02:00,820
att bygga en webbsida.

45
00:02:00,820 --> 00:02:03,020
Så nu har HTML-filen,
vilket är ungefär som den

46
00:02:03,020 --> 00:02:05,170
strukturen på webbsidan.

47
00:02:05,170 --> 00:02:08,620
HTML-filen kan också referera
CSS-filer, som definierar

48
00:02:08,620 --> 00:02:09,889
stil av webbsidan.

49
00:02:09,889 --> 00:02:12,970
>> JavaScript-filer, som definierar
interaktion med webbsidan.

50
00:02:12,970 --> 00:02:15,200
Bildfiler som är bara bilder.

51
00:02:15,200 --> 00:02:19,450
Och möjligen länka till andra HTML-filer,
som du kan sedan besöka.

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

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

54
00:02:24,380 --> 00:02:28,980
Så ni har allt, kanske,
mödosamt ställa in din lokala värden

55
00:02:28,980 --> 00:02:30,810
på din virtuella maskin.

56
00:02:30,810 --> 00:02:35,650
Och det bara, typ av, är den lokala
domän som datorn är värd endast

57
00:02:35,650 --> 00:02:38,760
för dig på din egen IP-adress.

58
00:02:38,760 --> 00:02:43,300
>> Så inom det, då kan du lägga till
till det egna webbsidor.

59
00:02:43,300 --> 00:02:47,655
Jag menar, i CS50 Finance, bör du ha
lagt till några HTML-sidor, som,

60
00:02:47,655 --> 00:02:49,410
slags, insvept i PHP-omslag.

61
00:02:49,410 --> 00:02:54,690
Men i slutändan, vad din PHP-sidor
fick mata var HTML.

62
00:02:54,690 --> 00:02:58,210
>> Men tänker tillbaka till början
av PSET, var vi tvungna att ställa in

63
00:02:58,210 --> 00:03:00,890
behörigheterna för allt, eller hur?

64
00:03:00,890 --> 00:03:07,270
Så här låter bara i princip oss
som kan läsa, skriva, och möjligen

65
00:03:07,270 --> 00:03:08,730
exekvera varje fil.

66
00:03:08,730 --> 00:03:11,870
Så vi kommer att göra en snabb - hm?

67
00:03:11,870 --> 00:03:15,660
>> TOMAS REIMERS: Så ska vi
att göra en snabb demo.

68
00:03:15,660 --> 00:03:19,560
Så bara för att påminna dig, när du
ansluta till Googles dator -

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

70
00:03:20,690 --> 00:03:24,060
och be om en fil på datorn först
måste se till att du är behörig

71
00:03:24,060 --> 00:03:28,790
att faktiskt se den filen eller läsa att
fil för att du inte bara kan ställa

72
00:03:28,790 --> 00:03:30,430
för alla filer på den datorn, eller hur?

73
00:03:30,430 --> 00:03:32,260
Det skulle vara en säkerhetsrisk.

74
00:03:32,260 --> 00:03:37,020
>> Så filer på de system vi använder, som
denna CS50 apparat, har tre

75
00:03:37,020 --> 00:03:39,200
allmänna personer som kan ha
behörigheter till något.

76
00:03:39,200 --> 00:03:41,610
Den första är den faktiska
ägare av nämnda fil.

77
00:03:41,610 --> 00:03:43,820
Den andra är den grupp som
filen tillhör.

78
00:03:43,820 --> 00:03:46,090
Vi kommer inte att fokusera
för mycket på det.

79
00:03:46,090 --> 00:03:50,010
Och det sista är, typ av, liksom
värld eller liknande alla andra som är

80
00:03:50,010 --> 00:03:54,130
inte är specifika för den filen och inte
har någon form av äganderätt det.

81
00:03:54,130 --> 00:04:05,650
>> Så om vi har ägare, grupp,
och sedan världen.

82
00:04:05,650 --> 00:04:10,510
Och sedan, för var och en av dessa grupper, du
kan ha ett av tre tillstånd,

83
00:04:10,510 --> 00:04:13,010
OK, eller flera av dem.

84
00:04:13,010 --> 00:04:15,070
Du kan ha läsbehörighet.

85
00:04:15,070 --> 00:04:16,560
Du kan ha rätt behörigheter.

86
00:04:16,560 --> 00:04:18,880
Och du kan ha körrättigheter.

87
00:04:18,880 --> 00:04:22,060
>> Så när det gäller faktiska filtyper, läsa
tillstånd är som faktiskt läser

88
00:04:22,060 --> 00:04:23,250
innehållet i filen.

89
00:04:23,250 --> 00:04:24,730
En rätt tillstånd skriver
till nämnda fil.

90
00:04:24,730 --> 00:04:28,370
En exekverarättigheterna kör
fil som du gör när du kör en av

91
00:04:28,370 --> 00:04:29,620
din CS50 projekt.

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

93
00:04:32,190 --> 00:04:38,820
>> Så när vi funderar filer
som när vi behöver läsa ett HTML-

94
00:04:38,820 --> 00:04:41,790
fil, som måste vara världens
läsbar, eller hur?

95
00:04:41,790 --> 00:04:44,420
Förmodligen också ägaren vill
för att kunna redigera den filen.

96
00:04:44,420 --> 00:04:46,610
Så ägaren kommer att behöva
läs-och skrivbehörighet.

97
00:04:46,610 --> 00:04:48,710
De behöver egentligen inte köra.

98
00:04:48,710 --> 00:04:50,950
>> Group, kommer vi att behandla
samma som världen för nu.

99
00:04:50,950 --> 00:04:54,610
Så de behöver läsbehörighet.

100
00:04:54,610 --> 00:04:57,310
Men de behöver inte skriva
eller körningsbehörigheter.

101
00:04:57,310 --> 00:05:01,920
Och nu, om vi tänker tillbaka på tidigare
PSETs, vad vi förstår är denna typ

102
00:05:01,920 --> 00:05:03,360
för att se ut som binär, eller hur?

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

104
00:05:04,210 --> 00:05:05,040
0 för nej.

105
00:05:05,040 --> 00:05:06,870
Och vi kan faktiskt översätta
detta till binära.

106
00:05:06,870 --> 00:05:10,478
>> Så 110 i binär skulle vara 6.

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

108
00:05:13,270 --> 00:05:14,690
Samma med världen.

109
00:05:14,690 --> 00:05:20,846
Så det nummer du skulle få för
tillstånd för detta skulle vara 644.

110
00:05:20,846 --> 00:05:24,400
>> MIKE RIZZO: Om du tänker tillbaka på
när du chmoded något, tror jag

111
00:05:24,400 --> 00:05:28,980
de gav i problemet ange
exempel på var du kan göra

112
00:05:28,980 --> 00:05:36,470
något som chmod 644
och sedan filnamnet.

113
00:05:36,470 --> 00:05:39,980
Den 644 då, kan du nu se direkt
var det kommer ifrån.

114
00:05:39,980 --> 00:05:42,840
Så förhoppningsvis som gör att
lite mer tydlig.

115
00:05:42,840 --> 00:05:45,600
>> Och sedan för att du killen klarhet -

116
00:05:45,600 --> 00:05:48,200
oh yeah, det är här igen.

117
00:05:48,200 --> 00:05:53,260
Så 600 då bara skulle vara exempel
vi gav upp här där ägaren har

118
00:05:53,260 --> 00:05:56,360
läsa och höger behörigheter medan grupp
och världen inte har några behörigheter

119
00:05:56,360 --> 00:05:58,145
för att komma åt filen.

120
00:05:58,145 --> 00:06:01,500
>> TOMAS REIMERS: Och så har vi en snabb
lista över vanliga behörigheter.

121
00:06:01,500 --> 00:06:05,250
Så kataloger, du vill
att faktiskt chmod 711.

122
00:06:05,250 --> 00:06:08,930
Quick åt sidan - för en katalog att ha
körbara tillstånd innebär att kunna

123
00:06:08,930 --> 00:06:11,680
för att öppna katalogen.

124
00:06:11,680 --> 00:06:15,280
Bilder, CSS, JavaScript, HTML behov
644 därför att, i princip, världen

125
00:06:15,280 --> 00:06:16,400
behov läsbehörighet.

126
00:06:16,400 --> 00:06:20,960
>> Och PHP, som ni har sett
även om vi inte kommer att prata om det

127
00:06:20,960 --> 00:06:24,880
strikt typiskt chmoded med
tillstånd 600 eftersom det körs med

128
00:06:24,880 --> 00:06:26,540
behörigheterna för ägaren.

129
00:06:26,540 --> 00:06:27,790
Åtminstone på apparaten.

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

131
00:06:30,200 --> 00:06:36,870
>> MIKE RIZZO: Så om du inte uttryckligen
ange vilken typ av fil

132
00:06:36,870 --> 00:06:39,480
du vill ha i faktiskt sätta
upp denna presentation -

133
00:06:39,480 --> 00:06:43,490
Vi hade ett problem med detta eftersom
allt var inte chmoded korrekt -

134
00:06:43,490 --> 00:06:47,550
du kommer att få, typ av, a
förbjudet fel att webbplatsen

135
00:06:47,550 --> 00:06:49,700
faktiskt inte har behörighet
att få tillgång till allt vad fil

136
00:06:49,700 --> 00:06:51,370
du vill att det ska komma.

137
00:06:51,370 --> 00:06:54,780
Och naturligtvis kan det vara fast -
som i problembild - genom att ändra

138
00:06:54,780 --> 00:06:56,405
behörigheterna på lämpligt sätt.

139
00:06:56,405 --> 00:06:59,620
>> TOMAS REIMERS: Och den sista kommentaren för
snabbt lokal utveckling är - vi

140
00:06:59,620 --> 00:07:02,000
tog upp detta, men vi ville bara
att ta upp det igen -

141
00:07:02,000 --> 00:07:06,230
om du frågar efter en server - så lokala värden,
till exempel com eller vad som helst. -

142
00:07:06,230 --> 00:07:09,170
och du inte anger en specifik fil,
filen att datorn går

143
00:07:09,170 --> 00:07:11,540
att be om heter index.html.

144
00:07:11,540 --> 00:07:12,790
Eller om det inte finns, 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
Så det är bara en resumé av allt,
förhoppningsvis, när vi har täckt in

148
00:07:19,560 --> 00:07:22,800
avsnitt, och föreläsning,
och hittills i CS50.

149
00:07:22,800 --> 00:07:26,110
Och nu ska vi börja prata
om speciellt bibliotek.

150
00:07:26,110 --> 00:07:30,270
JavaScript-och CSS-bibliotek
för webbprogram.

151
00:07:30,270 --> 00:07:36,350
>> Så en snabb anledningen till att vi har
bibliotek programmerar -

152
00:07:36,350 --> 00:07:39,000
det finns en hel del problem i
programmering, som håller poppar upp

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

154
00:07:40,570 --> 00:07:43,870
Du kanske märker att många webbplatser
behöver förmågan att ha drop down

155
00:07:43,870 --> 00:07:49,100
menyer, till exempel, eller behöver möjligheten
att ha en mycket vanlig knapp

156
00:07:49,100 --> 00:07:51,400
stil, som inte får vara
det lättaste.

157
00:07:51,400 --> 00:07:54,670
Nu när du börjar komma in i HTML, du
inse att knappar kan faktiskt

158
00:07:54,670 --> 00:07:57,720
ser riktigt ful om du
inte göra någonting.

159
00:07:57,720 --> 00:08:00,830
>> Så många människor har skrivit
kallas bibliotek.

160
00:08:00,830 --> 00:08:02,990
Och i detta sammanhang, de är
även kallade ramar.

161
00:08:02,990 --> 00:08:04,790
Vi kommer att använda
två omväxlande.

162
00:08:04,790 --> 00:08:07,360
Och vad de är är att de är i grund och botten
premade delar av koden -

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

164
00:08:09,130 --> 00:08:13,240
att ta bort en hel del av
lag du har i kodning.

165
00:08:13,240 --> 00:08:17,290
>> Så de fördefiniera en massa klasser eller
förväg definiera ett gäng funktioner för

166
00:08:17,290 --> 00:08:20,110
JavaScript fall, som
du kan ringa senare.

167
00:08:20,110 --> 00:08:22,690
Och då kan du, liksom, få
tillgång till denna kod utan

168
00:08:22,690 --> 00:08:23,710
att behöva göra någonting.

169
00:08:23,710 --> 00:08:27,750
Ett exempel på det biblioteket var CS50.H.
Det var ett bibliotek som vi gav till dig

170
00:08:27,750 --> 00:08:32,090
i vecka ett, som får dig att göra
sånt getInt och GetString

171
00:08:32,090 --> 00:08:35,237
utan att behöva skriva
någon kod själv.

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

173
00:08:36,179 --> 00:08:40,299
Så här, precis som vi var tvungna att inkludera
i vår c-filer de olika

174
00:08:40,299 --> 00:08:46,570
bibliotek, vi bör i
vår HTML-filer olika bibliotek.

175
00:08:46,570 --> 00:08:50,310
Till exempel, om vi önskade att inkludera
en specifik JavaScript-bibliotek här,

176
00:08:50,310 --> 00:08:52,850
kanske, en som vi har skrivit
oss som det är lokalt värd

177
00:08:52,850 --> 00:08:56,000
kallade script.js, vi bara
använda denna notation.

178
00:08:56,000 --> 00:08:59,500
>> Så vi har manus typ jämlikar
JavaScript källa jämlikar

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

180
00:09:01,260 --> 00:09:05,190
Och om du tänker tillbaka på din CS50
finans problembild, om du tittat på

181
00:09:05,190 --> 00:09:09,190
header.php i mappen mallar,
du skulle ha sett

182
00:09:09,190 --> 00:09:10,970
några av dessa ingår.

183
00:09:10,970 --> 00:09:13,250
Så denna första - skript -

184
00:09:13,250 --> 00:09:16,080
är bland annat ett JavaScript-bibliotek.

185
00:09:16,080 --> 00:09:18,760
Inklusive en CSS-bibliotek är
lite annorlunda.

186
00:09:18,760 --> 00:09:21,430
>> Här, i stället för skriptet
tagga behöver länken taggen.

187
00:09:21,430 --> 00:09:27,110
Och sedan, texten CSS typ
är lite annorlunda.

188
00:09:27,110 --> 00:09:29,270
Du behöver inte alltid måste inkludera
rel formatmall.

189
00:09:29,270 --> 00:09:30,970
Men jag tror att det är, generellt sett,
god praxis.

190
00:09:30,970 --> 00:09:35,810
>> Och slutligen, det HREF, som du
såg förmodligen i dina ATAGs för länkning

191
00:09:35,810 --> 00:09:39,440
i olika länkar bara Anger
länken på var man kan hitta det.

192
00:09:39,440 --> 00:09:42,250
Till exempel, om vi önskade att koppla ett
annat bibliotek - låt oss bara säga -

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

194
00:09:49,330 --> 00:09:54,030
Och vi ville knyta det i det är
värd på webben, skulle vi kopiera det.

195
00:09:54,030 --> 00:09:58,834
Och sedan klistra in den på vad
Vi har här i stället.

196
00:09:58,834 --> 00:10:01,340
>> TOMAS REIMERS: OK, förhoppningsvis du
killar redan känner

197
00:10:01,340 --> 00:10:02,410
med hur man länkar CSS.

198
00:10:02,410 --> 00:10:04,000
Du var tvungen att göra det på
din sista bruna set.

199
00:10:04,000 --> 00:10:07,110
JavaScript, några av er kanske
har viss erfarenhet av.

200
00:10:07,110 --> 00:10:07,980
Några av er kanske inte.

201
00:10:07,980 --> 00:10:12,190
>> Så för nu, vet att en JavaScript-fil
är väldigt mycket som en CSS-fil i

202
00:10:12,190 --> 00:10:15,640
den meningen att du kan länka till den eller
att du kan ta med den internt.

203
00:10:15,640 --> 00:10:17,360
Och det kan du skript saker.

204
00:10:17,360 --> 00:10:21,820
Och vi kommer att gå igenom en
lite JavaScript senare.

205
00:10:21,820 --> 00:10:23,560
>> Så med hjälp av ett bibliotek -

206
00:10:23,560 --> 00:10:26,150
När du har tagit med det, det är som
enkelt som bokstavligen ringa

207
00:10:26,150 --> 00:10:29,640
funktioner eller lägga till
klassnamn till det.

208
00:10:29,640 --> 00:10:32,220
Det sista vi vill prata
om det gäller bibliotek -

209
00:10:32,220 --> 00:10:34,180
och detta är mer av en teknisk anmärkning -

210
00:10:34,180 --> 00:10:35,860
är öppen källkod licensiering.

211
00:10:35,860 --> 00:10:41,550
Så när du hittar dessa faktiska bibliotek,
du kanske tänker på

212
00:10:41,550 --> 00:10:47,630
frågor tycker det är OK att jag bara
med hjälp av någon annans kod, speciellt

213
00:10:47,630 --> 00:10:51,970
eftersom det är något vi verkligen
sa till dig att inte göra på den här kursen.

214
00:10:51,970 --> 00:10:55,790
>> Så när det gäller öppen källkod licensiering,
en hel del utvecklare -

215
00:10:55,790 --> 00:10:57,540
när de har skrivit ett bibliotek,
som de tror skulle kunna vara

216
00:10:57,540 --> 00:10:59,450
hjälp för andra människor -

217
00:10:59,450 --> 00:11:02,420
kommer att publicera den på webben
och ge det en licens.

218
00:11:02,420 --> 00:11:06,620
Och en licens i princip säger jag härmed
att ge tillstånd till andra

219
00:11:06,620 --> 00:11:11,250
människor att använda denna mjukvara
med följande slags

220
00:11:11,250 --> 00:11:13,230
bestämmelser.

221
00:11:13,230 --> 00:11:16,100
>> Vi har inkluderat en länk till en bra plats att
hjälpa dig att förstå licenser i

222
00:11:16,100 --> 00:11:17,720
om du stöter på dem.

223
00:11:17,720 --> 00:11:21,680
Vanliga krav är saker som
är du välkommen att använda mitt bibliotek så

224
00:11:21,680 --> 00:11:23,000
länge som du ger mig kredit.

225
00:11:23,000 --> 00:11:25,670
Du är välkommen att använda mitt bibliotek
så länge som när det bryts

226
00:11:25,670 --> 00:11:26,790
du klandra inte mig.

227
00:11:26,790 --> 00:11:30,310
Du är välkommen att använda mitt bibliotek så länge
när du inte använder den för att tjäna pengar

228
00:11:30,310 --> 00:11:31,910
för dig själv.

229
00:11:31,910 --> 00:11:34,130
Dessa typer av gemensamt
bestämmelser.

230
00:11:34,130 --> 00:11:37,780
>> För detta CS50 slutprojekt, de
bör inte vara super relevant eftersom

231
00:11:37,780 --> 00:11:41,440
de projekt som ni använder är
förmodligen snarare, sorts, känd.

232
00:11:41,440 --> 00:11:44,170
Men när du faktiskt gå ut i
världen och börja använda bibliotek, vilket

233
00:11:44,170 --> 00:11:48,100
kan eller inte kan också genomföras som
några av de mer populära som vi är

234
00:11:48,100 --> 00:11:49,780
kommer att gå igenom.

235
00:11:49,780 --> 00:11:53,310
Det är bra att kunna förstå
dessa licenser och till

236
00:11:53,310 --> 00:11:54,560
förstår vad de betyder.

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

238
00:11:58,120 --> 00:11:58,586
Och gå tillbaka.

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

240
00:12:00,960 --> 00:12:04,850
Så nu flyttar till exempel
faktiska CSS.

241
00:12:04,850 --> 00:12:07,770
Vid denna punkt så långt, kanske du
inte har stött på detta.

242
00:12:07,770 --> 00:12:10,300
Men du kanske har stött på det i
vardagen där något

243
00:12:10,300 --> 00:12:13,160
som ser ut på ett sätt på en browser
kanske inte ser likadana

244
00:12:13,160 --> 00:12:14,880
sätt i en annan webbläsare.

245
00:12:14,880 --> 00:12:17,400
>> Detta kallas browser browser
kompatibilitet.

246
00:12:17,400 --> 00:12:20,780
Och mer och mer det blir mer och
mer av ett problem, i synnerhet som

247
00:12:20,780 --> 00:12:25,260
webbläsare tar fler och fler friheter
att genomföra saker som de vill.

248
00:12:25,260 --> 00:12:28,440
Så för att övervinna det, egentligen är det
ett stort bibliotek som heter Normalize.CSS.

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

250
00:12:32,236 --> 00:12:33,770
>> Tomas REIMERS: Vi ingår länken.

251
00:12:33,770 --> 00:12:36,210
Vid denna punkt, är det bra om
du har din bärbara dator i det

252
00:12:36,210 --> 00:12:38,740
tittar på webbplatsen.

253
00:12:38,740 --> 00:12:42,580
Och vi ger det till dig rätt
nu helt enkelt därför att CS50 final

254
00:12:42,580 --> 00:12:44,370
projekt faktiskt kommer att
be dig att genomföra det

255
00:12:44,370 --> 00:12:45,860
på samma sätt och genom webbläsare.

256
00:12:45,860 --> 00:12:49,250
>> Så bara för att hålla på baksidan av ditt
huvud, är detta en underbar bibliotek

257
00:12:49,250 --> 00:12:51,170
eftersom det kommer, sorts,
standardisera saker.

258
00:12:51,170 --> 00:12:54,230
I Firefox, får något att visa
som en bildpunkt till vänster.

259
00:12:54,230 --> 00:12:58,390
Och sedan Chrome kan besluta att faktiskt
vad du menade var 10 pixlar

260
00:12:58,390 --> 00:12:59,380
åt vänster.

261
00:12:59,380 --> 00:13:01,030
Och du vill standardisera detta.

262
00:13:01,030 --> 00:13:05,360
Normalisera kommer faktiskt göra ett riktigt bra
jobb med att se till att din webbplats

263
00:13:05,360 --> 00:13:08,070
ser likadan ut i olika webbläsare.

264
00:13:08,070 --> 00:13:10,660
>> MIKE RIZZO: Så om vi ville bara
klicka på länken riktigt snabbt och show

265
00:13:10,660 --> 00:13:13,140
vad som ser ut som, du
kan ladda ner det med hjälp av

266
00:13:13,140 --> 00:13:14,670
jätte Download-knappen.

267
00:13:14,670 --> 00:13:18,520
Eller jag dig att läsa mer om det
genom att klicka på länken i den nedre

268
00:13:18,520 --> 00:13:19,310
högra hörnet.

269
00:13:19,310 --> 00:13:22,420
>> TOMAS REIMERS: Och om du faktiskt
Klicka på Läs mer just där -

270
00:13:22,420 --> 00:13:24,340
klicka källan på GitHub -

271
00:13:24,340 --> 00:13:31,720
du faktiskt ser öppen källkod
licens på LICENSE.md där.

272
00:13:31,720 --> 00:13:35,740
Och du ser här är den
mycket populär MIT licens.

273
00:13:35,740 --> 00:13:38,940
Återigen, om du läser igenom texten,
du kommer att kunna hitta det på webbplatsen

274
00:13:38,940 --> 00:13:42,550
Vi refererade tidigare och kunna
förstå det utan att behöva läsa

275
00:13:42,550 --> 00:13:45,920
genom den juridiska jargong.

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

277
00:13:46,850 --> 00:13:47,940
Så det är normalisering.

278
00:13:47,940 --> 00:13:49,190
Vi ville ge dig
det riktigt snabbt.

279
00:13:49,190 --> 00:13:50,030
Åh, har du en fråga?

280
00:13:50,030 --> 00:13:53,013
>> PUBLIK: Så när du laddar ned den, du
bara följa den kod som 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 laddar ner -

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

284
00:13:58,130 --> 00:14:00,700
Så frågan var hur gör
vi faktiskt ladda ner den?

285
00:14:00,700 --> 00:14:03,260
Så om vi klickar på länken, ser vi
att det faktiskt dyker upp

286
00:14:03,260 --> 00:14:05,030
på källkoden.

287
00:14:05,030 --> 00:14:08,550
Så för att göra det här, vad vi kunde
gör är bara på Spara som.

288
00:14:08,550 --> 00:14:10,830
Spara som och det borde
ta upp en fil.

289
00:14:10,830 --> 00:14:14,160
Och då kan vi välja att spara
den såsom normalize.CSS.

290
00:14:14,160 --> 00:14:15,810
Och då skulle du behöva koppla den in -

291
00:14:15,810 --> 00:14:18,660
>> TOMAS REIMERS: Samma sätt som du
länka i någon annan fil.

292
00:14:18,660 --> 00:14:22,250
Och när du koppla in den, vad som är bra
om Normalisera är det faktiskt kommer

293
00:14:22,250 --> 00:14:25,920
ta hand om allt det hårda
arbeta av sig själv.

294
00:14:25,920 --> 00:14:27,730
Vilket innebär att du inte har
att lägga till några klasser.

295
00:14:27,730 --> 00:14:29,690
>> Du behöver inte göra någonting konstigt.

296
00:14:29,690 --> 00:14:34,590
Det kommer att normaliseras utan att du
göra något ytterligare.

297
00:14:34,590 --> 00:14:36,083
Ja, du måste inkludera det.

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

299
00:14:38,990 --> 00:14:40,240
Google Chrome svarar inte.

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

301
00:14:43,270 --> 00:14:44,860
>> Bara en snabb åt sidan -

302
00:14:44,860 --> 00:14:46,800
Jag märkte att vi hoppade in i detta.

303
00:14:46,800 --> 00:14:49,010
Resten av den här presentationen är
kommer att bli en snabb överblick.

304
00:14:49,010 --> 00:14:50,380
En undersökning av biblioteken.

305
00:14:50,380 --> 00:14:52,710
>> I grund och botten, vad de är.

306
00:14:52,710 --> 00:14:53,350
Vad de gör.

307
00:14:53,350 --> 00:14:54,060
Hur de är användbara.

308
00:14:54,060 --> 00:14:56,540
Hur du kan genomföra dem.

309
00:14:56,540 --> 00:14:59,730
Om du vill börja titta på dem,
följa med, och läsa igenom

310
00:14:59,730 --> 00:15:01,990
dem, skulle jag starkt uppmuntra det.

311
00:15:01,990 --> 00:15:07,620
>> Alternativt är du välkommen även till
börja ladda ner dem och med

312
00:15:07,620 --> 00:15:11,400
dem i en syn bara för att se vad de
ser ut eller vad de gör om du har

313
00:15:11,400 --> 00:15:12,270
din bärbara dator framför dig.

314
00:15:12,270 --> 00:15:14,650
Om inte, är du välkommen att hålla
lyssna på oss prata.

315
00:15:14,650 --> 00:15:15,500
Vi kommer att fortsätta prata.

316
00:15:15,500 --> 00:15:18,680
Och vi har tid i slutet, förhoppningsvis
vi faktiskt komma in i visar dig

317
00:15:18,680 --> 00:15:20,946
vad några av dessa bibliotek
se ut.

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

319
00:15:22,320 --> 00:15:25,466
Okej, så nu ska vi prata
om Font Awesome.

320
00:15:25,466 --> 00:15:30,480
>> Tomas REIMERS: så Font Toppen är en
riktigt snyggt plats, särskilt för dem

321
00:15:30,480 --> 00:15:32,450
av oss som är mindre konstnärligt
begåvad.

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

323
00:15:36,330 --> 00:15:38,880
Att ignorera namnet Font Awesome, ger det
dig en massa ikoner, som är

324
00:15:38,880 --> 00:15:41,050
mycket användbart.

325
00:15:41,050 --> 00:15:45,950
Så många gånger du kommer att genomföra en
icon kanske du gillar en trevlig x så

326
00:15:45,950 --> 00:15:47,170
att du kan stänga något.

327
00:15:47,170 --> 00:15:49,910
>> Eller du kanske vill ha någon form av knappen Redigera
med en blyertsteckning som

328
00:15:49,910 --> 00:15:50,940
alla andra har.

329
00:15:50,940 --> 00:15:53,850
Och det är då man lär sig att
dra dessa ikoner kan vara

330
00:15:53,850 --> 00:15:55,510
mycket mödosam och svår.

331
00:15:55,510 --> 00:15:59,160
Font Awesome - om du faktiskt
gå till webbplatsen -

332
00:15:59,160 --> 00:16:02,892
ger dig en massa ikoner i
ikonerna i toppen.

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

334
00:16:06,980 --> 00:16:09,030
Det ger dig en hel del
ikoner för gratis.

335
00:16:09,030 --> 00:16:15,210
>> Så här ser du att vi har saker som en
asterisk, barer, en blixt, en

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

337
00:16:19,750 --> 00:16:21,110
Detta kan vara mycket användbart.

338
00:16:21,110 --> 00:16:24,290
Det sätt du inkludera detta är du inkludera
bokstav CSS-filen.

339
00:16:24,290 --> 00:16:29,760
Och efter att du har tagit med CSS-filen,
Vad du kan göra är att du skapar en

340
00:16:29,760 --> 00:16:33,430
tagg som heter I. satands för
ikonen med klassen FA

341
00:16:33,430 --> 00:16:34,460
står för Font Awesome.

342
00:16:34,460 --> 00:16:36,330
Och sedan, oavsett klass du vill.

343
00:16:36,330 --> 00:16:41,220
>> Så om jag ville ha en symbol för detta plus
torget just här, skulle jag ge

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

345
00:16:43,290 --> 00:16:46,230
Och sedan FA bindestreck plus bindestreck torget.

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: Och sedan, den sista CSS
bibliotek vi vill få igenom är vi

349
00:16:56,980 --> 00:16:59,950
försöker hålla det minimalt på CSS
bibliotek för att vi inser det

350
00:16:59,950 --> 00:17:03,660
titeln på denna presentation
är JavaScript bibliotek.

351
00:17:03,660 --> 00:17:07,089
Men vi tänkte att vi kanske också
introducera dig till andra bibliotek

352
00:17:07,089 --> 00:17:09,569
medan vi pratade om biblioteken.

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

354
00:17:11,400 --> 00:17:17,040
Och vad Google Web Fonts kan du
göra är att lägga till typsnitt till din webbplats,

355
00:17:17,040 --> 00:17:22,079
vilket är ett riktigt enkelt sätt att göra det
söt och för att skilja ditt set

356
00:17:22,079 --> 00:17:24,460
från alla andras är om den har
ett fint typsnitt eller om den har en fin

357
00:17:24,460 --> 00:17:27,790
samling av typsnitt.

358
00:17:27,790 --> 00:17:31,410
Google Web Fonts är trevligt till skillnad från andra
bibliotek i den meningen att det är en

359
00:17:31,410 --> 00:17:33,490
verkligen guidad installation.

360
00:17:33,490 --> 00:17:38,680
>> Så om du följer länken, det är
google.com / typsnitt, tror jag.

361
00:17:38,680 --> 00:17:41,100
Om du följer det, du
kan plocka dina typsnitt.

362
00:17:41,100 --> 00:17:44,410
Du kan välja till vänster från
tjocklek, vinkling, et cetera.

363
00:17:44,410 --> 00:17:48,970
Och sedan, när du har valt en,
du kan klicka på snabb användning.

364
00:17:48,970 --> 00:17:49,820
Just där.

365
00:17:49,820 --> 00:17:51,590
Längst ner till höger i rutan.

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

367
00:17:54,380 --> 00:17:56,700
>> Och sedan, rulla ned.

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

369
00:17:59,600 --> 00:18:02,650
Först av allt, de ger dig CSS som
du behöver för att faktiskt länka till den.

370
00:18:02,650 --> 00:18:03,330
Det är just där.

371
00:18:03,330 --> 00:18:05,170
Du kan bara kopiera och klistra in den i.

372
00:18:05,170 --> 00:18:07,250
Och det fina med den här är
du egentligen inte ens behöver

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

374
00:18:08,340 --> 00:18:11,170
>> Vad det kommer att göra är att det kommer
länka till Googles version av det.

375
00:18:11,170 --> 00:18:14,130
Så tillbaka till vad betyder det.

376
00:18:14,130 --> 00:18:18,270
Det innebär att när en användare
hämtar din fil -

377
00:18:18,270 --> 00:18:22,300
hämtar din HTML-sida - HTML
sidan kommer att referera till denna fil.

378
00:18:22,300 --> 00:18:26,790
>> Så då är din dator kommer att se,
åh, det är värd på google.com snarare

379
00:18:26,790 --> 00:18:28,170
än på theirsite.com.

380
00:18:28,170 --> 00:18:30,370
Låt mig gå be Google för den filen.

381
00:18:30,370 --> 00:18:32,800
Och sedan, det kommer att inkludera
det nästan som om det vore en

382
00:18:32,800 --> 00:18:35,584
en del av din egen webbplats.

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

384
00:18:36,540 --> 00:18:40,980
Och när du inkludera det, då till
inkludera det i din CSS, det ger dig

385
00:18:40,980 --> 00:18:41,830
själva linjen.

386
00:18:41,830 --> 00:18:45,188
Så du anger egenskapen font familjen
lika med namnet på teckensnittet.

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 precis avslutat med CSS.

390
00:18:52,220 --> 00:18:57,230
Och några av er kanske tänker, ja,
Vi hade lite CSS på CS50 Finance.

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

392
00:19:00,390 --> 00:19:05,190
Vi inkluderar faktiskt Bootstrap lite
senare i JavaScript för med

393
00:19:05,190 --> 00:19:09,660
den Bootstrap CSS biblioteket kommer också
med en hel del JavaScript som

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

395
00:19:12,060 --> 00:19:15,426
använder för att hantera alla sina CSS.

396
00:19:15,426 --> 00:19:19,592
>> TOMAS REIMERS: Har någon något
frågor så långt om CSS i allmänhet?

397
00:19:19,592 --> 00:19:20,723
Vi är bra?

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å flyttar
vidare till JavaScript.

401
00:19:25,136 --> 00:19:27,900
>> MIKE RIZZO: Så vi ville prata
om jQuery till att börja med.

402
00:19:27,900 --> 00:19:30,780
Har någon hört talas om jQuery
före eller använt det?

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

404
00:19:32,180 --> 00:19:36,000
Så om du bara arbetar med infödda
JavaScript, hittar du dig själv

405
00:19:36,000 --> 00:19:41,000
skriva en massa långa väljare mycket.

406
00:19:41,000 --> 00:19:44,400
Så vad jQuery gör är det ger
en trevlig täckblad i JavaScript

407
00:19:44,400 --> 00:19:48,180
språk som gör att du enkelt välja
och manipulera olika element

408
00:19:48,180 --> 00:19:52,470
inom modell dokument föremål för
webbsida eller DOM, som jag tror

409
00:19:52,470 --> 00:19:54,290
ni har hört talas om i
föreläsning vid denna punkt.

410
00:19:54,290 --> 00:19:57,550
>> TOMAS REIMERS: Om du inte har hört talas om
det eller om du inte har tittat på föreläsning

411
00:19:57,550 --> 00:20:01,870
ändå är Document Object Model
i princip hur saker och ting är representerade.

412
00:20:01,870 --> 00:20:05,290
Så HTML slags ser ut som ett träd
när du faktiskt dra ut den.

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 huvudet och kroppen.

415
00:20:07,560 --> 00:20:09,500
>> Och sedan, i att du
har allt annat.

416
00:20:09,500 --> 00:20:10,660
Det är kallat DOM -

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

418
00:20:12,120 --> 00:20:16,090
Så en modell som representerar objekt i
dokumentet är ett enkelt sätt att tänka

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

420
00:20:18,560 --> 00:20:22,520
Och en av de bästa med jQuery
är det verkligen gör förflyttnings

421
00:20:22,520 --> 00:20:26,460
det och manipulera element inom
det otroligt enkelt.

422
00:20:26,460 --> 00:20:30,300
>> Så enkelt, faktiskt, att majoriteten av
JavaScript-bibliotek, eller om inte

423
00:20:30,300 --> 00:20:34,200
majoriteten, den stora majoriteten av dem
du ser faktiskt kräver jQuery så

424
00:20:34,200 --> 00:20:37,530
att de kan köra sig själva helt enkelt
för om du inte hade jQuery, du

425
00:20:37,530 --> 00:20:40,540
skulle slösa bort en massa tid på att försöka
räkna ut hur man väljer vissa

426
00:20:40,540 --> 00:20:43,660
element och hur man gör andra saker.

427
00:20:43,660 --> 00:20:47,950
Och den andra stora jQuery
är att det är kors webbläsare kompatibel.

428
00:20:47,950 --> 00:20:51,550
>> Så minns tillbaka när vi sade att
inte alla webbläsare genomföra

429
00:20:51,550 --> 00:20:53,100
saker på samma sätt?

430
00:20:53,100 --> 00:20:55,120
Detta gäller även i JavaScript.

431
00:20:55,120 --> 00:20:58,220
Och en av de bästa sakerna med jQuery
är att den kommer att detektera

432
00:20:58,220 --> 00:21:00,300
webbläsare och upptäcka
lämplig metod.

433
00:21:00,300 --> 00:21:03,420
>> Så om du måste välja ett element,
Internet Explorer kan säga att du är

434
00:21:03,420 --> 00:21:05,770
tänkt att göra på detta sätt.

435
00:21:05,770 --> 00:21:08,300
Firefox kan säga rätt
sätt är det här sättet.

436
00:21:08,300 --> 00:21:09,710
jQuery bryr sig inte.

437
00:21:09,710 --> 00:21:12,550
När du berättar jQuery för att välja en
del kommer det att räkna ut hur det är

438
00:21:12,550 --> 00:21:16,290
ska göra det i webbläsaren
användaren befinner sig i, och gör sedan

439
00:21:16,290 --> 00:21:18,584
det på det sättet.

440
00:21:18,584 --> 00:21:22,650
>> MIKE RIZZO: Så låt oss inte tala om
användningen av jQuery lite.

441
00:21:22,650 --> 00:21:27,670
Precis som PHP, har ett särskilt jQuery
kärlek för dollartecken.

442
00:21:27,670 --> 00:21:30,880
Så du kommer att upptäcka att någon jQuery -

443
00:21:30,880 --> 00:21:32,060
väl, inte alla.

444
00:21:32,060 --> 00:21:35,210
Du kan ibland ersätta dollarn
skylt med ordet jQuery.

445
00:21:35,210 --> 00:21:38,980
Men generellt, bara för att det är
kortare, när du ser jQuery är

446
00:21:38,980 --> 00:21:41,420
använt det ska vara med ett dollartecken.

447
00:21:41,420 --> 00:21:47,030
>> Så här är vi bara visar en början
Väljare för ett element i DOM.

448
00:21:47,030 --> 00:21:52,850
Här har vi den dollartecken följt
av öppna parenteser och sedan citat.

449
00:21:52,850 --> 00:21:56,130
Och inom citattecken går våra väljare
för de olika delarna.

450
00:21:56,130 --> 00:21:59,810
Precis som i CSS, vi behövde väljare till
kunna styla olika element

451
00:21:59,810 --> 00:22:00,840
inom sidan.

452
00:22:00,840 --> 00:22:06,555
De olika väljare översätta
exakt i jQuery och JavaScript,

453
00:22:06,555 --> 00:22:07,820
för det mesta.

454
00:22:07,820 --> 00:22:10,120
>> Så här har vi en prick foo.

455
00:22:10,120 --> 00:22:14,780
Så om du minns från föreläsning,
pricken betyder bara klassen.

456
00:22:14,780 --> 00:22:18,850
Så vi väljer elementet
med klassen foo.

457
00:22:18,850 --> 00:22:22,670
Så om jag går vidare och öppna upp vår
JavaScript-konsolen här riktigt snabbt

458
00:22:22,670 --> 00:22:26,830
bara visa det, om jag skriver bara
dollartecken, ser vi att det är en del

459
00:22:26,830 --> 00:22:28,090
funktion som kommer upp.

460
00:22:28,090 --> 00:22:29,420
Och det är bara definieras av jQuery.

461
00:22:29,420 --> 00:22:32,120
>> TOMAS REIMERS: För er
främmande, är konsolen ett verktyg

462
00:22:32,120 --> 00:22:35,430
inom Chrome, vilket gör det möjligt att,
i grund och botten, köra JavaScript på

463
00:22:35,430 --> 00:22:36,450
aktuella sidan.

464
00:22:36,450 --> 00:22:39,420
Detta hittar du otroligt användbart när
du faktiskt felsökning och du

465
00:22:39,420 --> 00:22:42,400
måste vara som, vad är den nuvarande
värde av cirka global variabel eller vad

466
00:22:42,400 --> 00:22:43,910
är något annat?

467
00:22:43,910 --> 00:22:47,620
Det är ungefär som GDB med undantag
att du kan faktiskt

468
00:22:47,620 --> 00:22:51,600
manipulera element på sidan med
det på ett mycket enklare sätt.

469
00:22:51,600 --> 00:22:55,080
Och även att det inte, i princip, ta
in med dig innan den gör något.

470
00:22:55,080 --> 00:22:58,660
>> Så medan kanske GDB vara som, är du
säker på att du vill köra nästa steg?

471
00:22:58,660 --> 00:22:59,830
Konsolen är på riktigt.

472
00:22:59,830 --> 00:23:03,690
Så som webbsidan är rendering och
gör vad den gör, den

473
00:23:03,690 --> 00:23:05,720
fullmäktiges också köra vid sidan om.

474
00:23:05,720 --> 00:23:08,330
Och du kan lägga skriva kod i
denna konsol, vilket kommer

475
00:23:08,330 --> 00:23:09,260
köras på sidan.

476
00:23:09,260 --> 00:23:12,190
>> MIKE RIZZO: Så för att komma in i konsolen,
Jag antar att jag borde helt kort

477
00:23:12,190 --> 00:23:13,750
tala om hur man gör det.

478
00:23:13,750 --> 00:23:17,850
Under de senaste problem som du kan ha
begagnade Chrome inspektera elementet

479
00:23:17,850 --> 00:23:20,440
funktioner eller utsikt sida källa -

480
00:23:20,440 --> 00:23:23,870
och de som är tillgängliga genom att bara rätt
att klicka på sidan eller en specifik

481
00:23:23,870 --> 00:23:28,430
elementet och gör antingen inspektera
element eller vy sida källa.

482
00:23:28,430 --> 00:23:31,190
Vi kan även få tillgång till JavaScript
konsol direkt av

483
00:23:31,190 --> 00:23:33,630
välja inspektera elementet.

484
00:23:33,630 --> 00:23:37,930
Så då du bara trycka konsol
på höger sida.

485
00:23:37,930 --> 00:23:41,900
>> Alternativt kan du ha också gått
till det övre högra hörnet,

486
00:23:41,900 --> 00:23:46,820
som skärs av på den här skärmen där
den har de tre horisontella staplar.

487
00:23:46,820 --> 00:23:52,010
Och du går ner till verktyg och
och JavaScript konsol

488
00:23:52,010 --> 00:23:53,240
här där kan se -

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

490
00:23:54,370 --> 00:23:59,680
genvägen är kontroll Shift J. Alltså
om vi ville välja ett element

491
00:23:59,680 --> 00:24:06,060
inom denna sida, precis som jag visade
innan, gör vi dollartecken öppna parens

492
00:24:06,060 --> 00:24:08,180
och sedan citerar.

493
00:24:08,180 --> 00:24:11,750
>> En intressant sak är, i allmänhet,
apostrof och dubbla citationstecken är

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

495
00:24:12,370 --> 00:24:16,050
Så många människor använder bara enstaka
citationstecken eftersom de är snabbare att skriva

496
00:24:16,050 --> 00:24:19,780
än dubbla citattecken eftersom du inte
måste hålla ned Skift.

497
00:24:19,780 --> 00:24:21,770
Så jag ska bara göra det just nu.

498
00:24:21,770 --> 00:24:24,510
>> Så jag vill välja något
med klass.

499
00:24:24,510 --> 00:24:27,200
Behållare, bara för att jag vet att det är
något som är på vår

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

501
00:24:28,740 --> 00:24:29,520
Och jag slog Enter.

502
00:24:29,520 --> 00:24:31,670
Och vi kan se att det valt det.

503
00:24:31,670 --> 00:24:34,990
Så det visar sig att det
tillbaka det objektet.

504
00:24:34,990 --> 00:24:36,620
Så det är ett grundläggande val.

505
00:24:36,620 --> 00:24:40,080
Om vi ​​ville faktiskt manipulera den,
du skulle behöva ringa något

506
00:24:40,080 --> 00:24:43,925
på det valet, vilket
Vi kommer att komma in senare.

507
00:24:43,925 --> 00:24:49,030
>> TOMAS REIMERS: Så bara för att titta på det
mer på djupet, är det inte annorlunda

508
00:24:49,030 --> 00:24:52,245
än de funktionsanrop som vi gjort i C.
Namnet på funktionen här är en

509
00:24:52,245 --> 00:24:52,580
lite konstigt.

510
00:24:52,580 --> 00:24:55,640
Det är dollartecken.

511
00:24:55,640 --> 00:24:57,010
Det är bara ett namn på en funktion.

512
00:24:57,010 --> 00:24:58,810
Det är inget speciellt med det.

513
00:24:58,810 --> 00:25:00,450
>> Vi har öppna parenteser.

514
00:25:00,450 --> 00:25:03,880
Sedan har vi vår ett argument, som
i detta fall råkar vara en sträng,

515
00:25:03,880 --> 00:25:05,680
vilket är en väljare för den.

516
00:25:05,680 --> 00:25:08,130
Och då har vi vår
sluten parentes.

517
00:25:08,130 --> 00:25:09,960
Det var allt.

518
00:25:09,960 --> 00:25:11,500
>> Det är inte så väldigt olika.

519
00:25:11,500 --> 00:25:12,900
Även om, ser det väldigt konstigt.

520
00:25:12,900 --> 00:25:17,220
Och det kan vara, liksom, en stickning
pekar för många människor.

521
00:25:17,220 --> 00:25:21,460
>> MIKE RIZZO: Så samma sätt, om vi ville
att välja ett element som har ett ID,

522
00:25:21,460 --> 00:25:23,470
Nu vill vi markera med
ID i stället för klass.

523
00:25:23,470 --> 00:25:28,080
Det skulle vara en liknande sak där vi
bara göra den skarpa tecken för ID.

524
00:25:28,080 --> 00:25:33,576
Så vi väljer här hela
element som har ID-bar.

525
00:25:33,576 --> 00:25:35,400
>> TOMAS REIMERS: Och detta sträcker sig.

526
00:25:35,400 --> 00:25:36,450
Det CSS sträcker sig.

527
00:25:36,450 --> 00:25:42,260
Precis som i CSS, kan du välja alla
länkar, som har klassen foo.

528
00:25:42,260 --> 00:25:43,420
Här är det samma sak.

529
00:25:43,420 --> 00:25:52,750
>> Du kan göra a.foo, vilket skulle välja
alla länkar med klassen foo.

530
00:25:52,750 --> 00:25:58,860
Du kan göra en skarp bar, vilket skulle
välj länken med ID-bar och så

531
00:25:58,860 --> 00:25:59,770
vidare och så vidare.

532
00:25:59,770 --> 00:26:02,120
Alla CSS-väljare är en giltig
jQuery väljaren.

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å nu ska vi få in lite
av manipulation som vi kan göra med

536
00:26:11,460 --> 00:26:12,870
vår jQuery.

537
00:26:12,870 --> 00:26:19,280
Så jQuery har en viss typ
av notation där vi använder bara

538
00:26:19,280 --> 00:26:20,170
en punkt på slutet.

539
00:26:20,170 --> 00:26:23,340
Och du kan tänka på detta som i
C hur vi hade olika structs.

540
00:26:23,340 --> 00:26:27,110
Och att gå in i dessa structs, skulle du
Använd en prick för att få in dem.

541
00:26:27,110 --> 00:26:28,480
>> Detta är, typ av, en liknande sak.

542
00:26:28,480 --> 00:26:33,570
Först nu har vi funktioner inom detta
väljare att vi kan kalla på den.

543
00:26:33,570 --> 00:26:38,640
Så här, det allra första exemplet
du kan se är en CSS-väljare.

544
00:26:38,640 --> 00:26:45,290
Och i grund och botten, vad det gör är det
applicerar det första elementet CSS till detta

545
00:26:45,290 --> 00:26:46,230
sak som du valt -

546
00:26:46,230 --> 00:26:47,720
detta element som du valt -

547
00:26:47,720 --> 00:26:49,290
med det värde som.

548
00:26:49,290 --> 00:26:55,390
>> TOMAS REIMERS: Så en enkel översättning av
som skulle vara om jQuery, i grund och botten,

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

550
00:26:57,790 --> 00:27:05,480
Och sedan i CSS sade,
färg rött och nära.

551
00:27:05,480 --> 00:27:06,670
Det är samma idé.

552
00:27:06,670 --> 00:27:08,800
Vad det är gjort är det valda
alla foo element.

553
00:27:08,800 --> 00:27:10,170
Och då är det appliceras.

554
00:27:10,170 --> 00:27:15,884
Sortera på, fastighets färg
är lika med rött.

555
00:27:15,884 --> 00:27:21,070
>> MIKE RIZZO: På liknande sätt kan vi också förändra
det faktiska innehållet i det som är

556
00:27:21,070 --> 00:27:24,870
visar på HTML på sidan, vilket
är riktigt coolt eftersom det innebär att din

557
00:27:24,870 --> 00:27:28,095
webbsidor kan nu vara helt dynamisk
och behöver inte vara statisk

558
00:27:28,095 --> 00:27:31,660
att du skriver ut med PHP
i början av

559
00:27:31,660 --> 00:27:33,320
sidan laddas.

560
00:27:33,320 --> 00:27:36,810
Så här, om vi ville ändra
faktiska HTML på sidan, skulle vi nu

561
00:27:36,810 --> 00:27:43,550
anropa HTML-funktionen, som sedan bara
insatser vad vi anger i

562
00:27:43,550 --> 00:27:45,390
det element som vi valt.

563
00:27:45,390 --> 00:27:49,810
Så här är vi välja element med
klassen foo och sedan säger att det är HTML

564
00:27:49,810 --> 00:27:52,200
det är nu hallå världen.

565
00:27:52,200 --> 00:27:55,600
>> TOMAS REIMERS: Och när du tänker på
vad är användbara tillämpningar av

566
00:27:55,600 --> 00:28:00,800
detta, den här CSS ett, det första som
du kan börja tänka på är

567
00:28:00,800 --> 00:28:03,070
gäller även rullgardinsmenyer.

568
00:28:03,070 --> 00:28:08,350
Du kan börja göra saker som, när
en användare svävar över den övre delen

569
00:28:08,350 --> 00:28:11,970
av en drop down, du vill göra
bottendelen synlig.

570
00:28:11,970 --> 00:28:12,540
Rätt?

571
00:28:12,540 --> 00:28:15,610
>> Så i CSS, vi har fastigheter
att göra något synligt.

572
00:28:15,610 --> 00:28:19,330
Saker som visnings kolon ingen
skulle göra det osynligt.

573
00:28:19,330 --> 00:28:21,190
Display blocket skulle göra det synligt.

574
00:28:21,190 --> 00:28:25,860
Eller även om du vill gå enklare, du
har saker som sikt jämlikar

575
00:28:25,860 --> 00:28:27,520
synligt, och sikten är lika dolt.

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

577
00:28:30,330 --> 00:28:34,780
>> Och du kan börja genomföra saker
som rullgardinsmenyer rätt

578
00:28:34,780 --> 00:28:38,410
efter att du får igenom idén om hur
kan du räkna ut när det öppnas,

579
00:28:38,410 --> 00:28:39,850
som vi får genom mycket kortfattat.

580
00:28:39,850 --> 00:28:42,160
Men vi kan börja se
tillämpningar av detta.

581
00:28:42,160 --> 00:28:45,540
I en liknande känsla, om du skulle försöka
och genomföra, låt oss säga, en chatt

582
00:28:45,540 --> 00:28:48,620
motor och du vill göra en liten
pratbubbla kommer upp när du har

583
00:28:48,620 --> 00:28:52,880
fick ett nytt meddelande när du får
nytt meddelande, kan du göra en liten

584
00:28:52,880 --> 00:28:55,890
pratbubbla kommit upp genom att förändra
HTML på sidan, eller hur?

585
00:28:55,890 --> 00:29:00,540
Genom att lägga till den extra pratbubbla
med extra text där.

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

587
00:29:01,140 --> 00:29:07,750
>> PUBLIK: Så du skulle bädda detta inom
HTML-koden i ungefär som en

588
00:29:07,750 --> 00:29:10,534
[OHÖRBAR]?

589
00:29:10,534 --> 00:29:12,940
>> MIKE RIZZO: Höger.

590
00:29:12,940 --> 00:29:16,190
Ja, vi kommer till det
i en liten bit.

591
00:29:16,190 --> 00:29:18,810
Ja, det är liknande en
Lite till PHP.

592
00:29:18,810 --> 00:29:21,240
Inte exakt lika.

593
00:29:21,240 --> 00:29:24,730
>> En bra distinktion att göra är vad detta
faktiskt redigerar när vi redigerar

594
00:29:24,730 --> 00:29:28,480
sidan, eftersom det inte kommer att bli
redigerar den aktuella filen som håller på att

595
00:29:28,480 --> 00:29:31,380
förvaras på servern eftersom världen
bör inte behörighet

596
00:29:31,380 --> 00:29:32,610
att redigera dina filer.

597
00:29:32,610 --> 00:29:36,080
Detta är bara redigerar vad som finns på sidan
och vad som visas inom

598
00:29:36,080 --> 00:29:36,950
webbläsaren.

599
00:29:36,950 --> 00:29:40,340
Så om du skulle ladda om sidan efter,
säga, ta bort något som vi

600
00:29:40,340 --> 00:29:44,730
ser att vi kan göra med remove samtalet,
det där skulle då dyka upp igen.

601
00:29:44,730 --> 00:29:48,590
>> TOMAS REIMERS: Så ett sätt att tänka
detta är om jag är din dator och

602
00:29:48,590 --> 00:29:50,170
Mike är, typ av servern.

603
00:29:50,170 --> 00:29:53,850
Vad kommer att hända är jag ska
Fråga Mike, hej, kan jag få en kopia av

604
00:29:53,850 --> 00:29:54,630
denna webbsida?

605
00:29:54,630 --> 00:29:56,190
Och han kommer att ge mig en kopia av den.

606
00:29:56,190 --> 00:29:57,430
>> Nej, det är inte den ursprungliga sak.

607
00:29:57,430 --> 00:29:58,620
Det är bara en kopia.

608
00:29:58,620 --> 00:30:00,450
Och då skulle det vara som att, åh,
det finns JavaScript här.

609
00:30:00,450 --> 00:30:02,450
Helt klart ska jag redigera
för att vara så här.

610
00:30:02,450 --> 00:30:04,250
Och jag redigerar din kopia.

611
00:30:04,250 --> 00:30:05,920
>> Men det är inte verkställa
den färdiga kopian.

612
00:30:05,920 --> 00:30:08,480
Och om jag skulle fråga honom igen
uppdatera sidan, -

613
00:30:08,480 --> 00:30:10,060
hej, kan jag få en ren kopia -

614
00:30:10,060 --> 00:30:11,440
han kommer att ge mig
annan ren kopia.

615
00:30:11,440 --> 00:30:14,240
Och då kommer jag att göra samma sak
liksom, åh, JS detta här som säger

616
00:30:14,240 --> 00:30:14,866
att redigera denna.

617
00:30:14,866 --> 00:30:17,460
Och jag kommer att fortsätta göra det.

618
00:30:17,460 --> 00:30:20,930
>> MIKE RIZZO: Så en riktigt cool grej
som du kan göra med jQuery är

619
00:30:20,930 --> 00:30:24,350
faktiskt lägga till olika typer
av animationer till din sida.

620
00:30:24,350 --> 00:30:27,440
Jag vet inte om du någonsin sett där
du försöker en fyllning i ett formulär

621
00:30:27,440 --> 00:30:31,250
på nätet och du behöver inte fylla i
saker på rätt sätt.

622
00:30:31,250 --> 00:30:33,440
Så en liten sak glider ner
högst upp och säger att du

623
00:30:33,440 --> 00:30:34,820
har inte gjort det här på rätt sätt.

624
00:30:34,820 --> 00:30:36,260
Försök igen.

625
00:30:36,260 --> 00:30:37,890
Och sedan, det kanske till och med bara glida upp.

626
00:30:37,890 --> 00:30:40,710
>> Det visade sig att jQuery har inbyggda funktioner
att göra allt för att

627
00:30:40,710 --> 00:30:44,180
animation riktigt, riktigt enkelt.

628
00:30:44,180 --> 00:30:46,750
Så det är först den blekna
ur funktion, vilket

629
00:30:46,750 --> 00:30:47,710
du kan ringa om något.

630
00:30:47,710 --> 00:30:55,650
Och det är ett sätt att ändra CSS för
som del i en animerad sätt.

631
00:30:55,650 --> 00:30:58,480
Så det tar allt inslag
du kallar det tona ut på.

632
00:30:58,480 --> 00:31:03,990
Och sedan, förändras långsamt det opacitet
tills den går helt genomskinligt.

633
00:31:03,990 --> 00:31:07,330
>> TOMAS REIMERS: Den andra populära ett
är glida ner, vilket kommer att göra

634
00:31:07,330 --> 00:31:08,800
något som visas genom att skjuta den nedåt.

635
00:31:08,800 --> 00:31:12,840
Så i fallet med rullgardinsmenyn,
igen, när vi lärt oss hur man upptäcker

636
00:31:12,840 --> 00:31:15,310
när detta har svävade över,
du bara kunde berätta denna botten

637
00:31:15,310 --> 00:31:16,910
del glida ner nu.

638
00:31:16,910 --> 00:31:19,270
Och sedan, förefaller det
genom att glida ner.

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

640
00:31:22,042 --> 00:31:26,590
>> MIKE RIZZO: Och sedan, om man bara har
någon typ av animering i minnet att

641
00:31:26,590 --> 00:31:29,080
jQuery ger inte nödvändigtvis.

642
00:31:29,080 --> 00:31:32,690
Till exempel, låt oss säga jQuery
ger dig med en bild

643
00:31:32,690 --> 00:31:33,750
ner och glida upp.

644
00:31:33,750 --> 00:31:36,740
Nåväl, låt oss säga att du ville skjuta
något från vänster eller från

645
00:31:36,740 --> 00:31:39,880
rätt ungefär som CS50
huvudsida gör när

646
00:31:39,880 --> 00:31:42,080
du går till en ny panel.

647
00:31:42,080 --> 00:31:45,030
Du skulle då antagligen behöva
genomföra det själv med hjälp av

648
00:31:45,030 --> 00:31:49,310
animera funktion i jQuery.

649
00:31:49,310 --> 00:31:51,350
>> Så på samma sätt, du bara animera.

650
00:31:51,350 --> 00:31:55,850
Och sedan, i det att det tar
ordlista för de olika värdena

651
00:31:55,850 --> 00:31:57,340
att du ska passera.

652
00:31:57,340 --> 00:32:06,960
Så här, om vi ville att animera
elementet foo sådan att dess bredd antingen

653
00:32:06,960 --> 00:32:10,880
expanderar eller kontrakt till 80 pixlar,
beroende på vad den för närvarande är.

654
00:32:10,880 --> 00:32:14,100
Vi skulle bara passera det som
argumentet i den.

655
00:32:14,100 --> 00:32:18,060
>> Animera också har några andra argument
att du kan skicka det, till exempel,

656
00:32:18,060 --> 00:32:21,150
hastigheten på animeringen
att du vill ge det.

657
00:32:21,150 --> 00:32:26,220
Och att göra det, vill jag bara säga
snabbt till jQuery animera.

658
00:32:26,220 --> 00:32:31,710
Och sedan, att föra upp denna sida kan du
se den har en massa olika

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

660
00:32:33,560 --> 00:32:35,990
>> Och jag uppmuntrar dig - när du kommit
över något som du inte

661
00:32:35,990 --> 00:32:40,390
vet eller bara vill veta mer om en
särskild metod som du kan ringa

662
00:32:40,390 --> 00:32:41,270
om något -

663
00:32:41,270 --> 00:32:44,440
bara Google det. jQuery är extremt
väldokumenterad.

664
00:32:44,440 --> 00:32:49,140
Och ofta gånger det finns en hel del
exempel som de tillhandahåller för dig.

665
00:32:49,140 --> 00:32:52,470
Om vi ​​bläddra ner -

666
00:32:52,470 --> 00:32:53,720
vägen ner -

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

668
00:32:57,660 --> 00:32:59,190
som vi kan använda, liksom.

669
00:32:59,190 --> 00:33:02,480
>> Återigen, när en utvecklare som faktiskt går
igenom besväret att skriva ett

670
00:33:02,480 --> 00:33:05,810
bibliotek, de vanligtvis vill
någon att använda den.

671
00:33:05,810 --> 00:33:09,400
Så tillsammans kommer att
vara en dokumentation.

672
00:33:09,400 --> 00:33:12,270
Och att dokumentationen kan vanligtvis
finns på projektsidan, vilket är

673
00:33:12,270 --> 00:33:14,970
varför vi gav dig den ursprungliga platsen i
början, vilka länkar du till

674
00:33:14,970 --> 00:33:18,080
projektsidor så att du kan
se till att dokumentationen.

675
00:33:18,080 --> 00:33:22,670
>> Normalt projektsidan i fallet
av [OHÖRBAR], sade den dig

676
00:33:22,670 --> 00:33:23,940
namnen på klasserna.

677
00:33:23,940 --> 00:33:27,250
I fallet med JavaScript, det ger
du namnet på funktionerna.

678
00:33:27,250 --> 00:33:35,310
Förresten, om vi rulla upp till toppen,
en snabb liten not om funktioner är

679
00:33:35,310 --> 00:33:39,080
när du ser en funktion implementeras
så här med den hårda

680
00:33:39,080 --> 00:33:43,800
parentes i mitten, det betyder
att den egenskapen är valfri.

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

682
00:33:44,750 --> 00:33:47,350
Jag har sett en massa frågor
om det.

683
00:33:47,350 --> 00:33:50,370
>> Så här kan vi se att
animera tar egenskaper

684
00:33:50,370 --> 00:33:51,800
som en nödvändig argument.

685
00:33:51,800 --> 00:33:54,870
Och allt annat är frivilligt.

686
00:33:54,870 --> 00:33:56,136
Sidoanteckning -

687
00:33:56,136 --> 00:33:58,090
du kan tänka på detta, sortera
av, som man-sidor.

688
00:33:58,090 --> 00:34:04,275
Man sidor är dokumentation för C och
för en massa andra saker, liksom.

689
00:34:04,275 --> 00:34:11,020
>> MIKE RIZZO: Så vi har lärt oss hur man
ändra olika CSS på sidan,

690
00:34:11,020 --> 00:34:14,040
animera den, och ta bort lägga till HTML.

691
00:34:14,040 --> 00:34:16,889
Men en av de riktigt mäktigaste
saker om JavaScript

692
00:34:16,889 --> 00:34:18,270
och speciellt jQuery -

693
00:34:18,270 --> 00:34:22,570
vad det låter dig göra är att svara på
olika element som händer.

694
00:34:22,570 --> 00:34:25,380
Till exempel, här har vi
en händelsehanterare.

695
00:34:25,380 --> 00:34:28,210
Och det betyder bara när detta
händelse inträffar, hanterar vi det i en

696
00:34:28,210 --> 00:34:29,280
visst sätt.

697
00:34:29,280 --> 00:34:35,159
>> Så här, den generiska jQuery händelsen
handler är pricken på.

698
00:34:35,159 --> 00:34:42,949
Och sedan, det första du förutsatt
är vilken händelse det ska

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

700
00:34:43,810 --> 00:34:45,610
Så här är det den klick som
vi väntar på.

701
00:34:45,610 --> 00:34:49,250
>> TOMAS REIMERS: Alternativt har du
på hover, vilket är en mycket populär en.

702
00:34:49,250 --> 00:34:52,000
Så tillbaka till min rullgardinsmenyn idé.

703
00:34:52,000 --> 00:34:54,239
Du skulle ha den översta på hover.

704
00:34:54,239 --> 00:34:56,096
Och så kan man ändra på det.

705
00:34:56,096 --> 00:34:56,830
>> MIKE RIZZO: Höger.

706
00:34:56,830 --> 00:35:01,680
Och då, när det händer, det bara
utför denna funktion som vi ger det

707
00:35:01,680 --> 00:35:05,080
som ett argument och att
Det varnar hej eller hej.

708
00:35:05,080 --> 00:35:08,900
>> Tomas REIMERS: Så i fallet med
JavaScript, är detta en plats som vi behöver för att

709
00:35:08,900 --> 00:35:12,970
ta bort oss från C. Vi kan faktiskt
ta funktioner som argument.

710
00:35:12,970 --> 00:35:15,940
Och det finns en hel del riktigt
komplexa sätt att göra detta.

711
00:35:15,940 --> 00:35:17,940
Vi kommer att främja ett sätt,
som du kan definiera

712
00:35:17,940 --> 00:35:19,270
fungera där.

713
00:35:19,270 --> 00:35:22,540
>> Så när du ber om en funktion som
en parameter, är du i princip bara

714
00:35:22,540 --> 00:35:24,500
kommer att definiera funktionen
på plats.

715
00:35:24,500 --> 00:35:27,090
Och hur du definierar en funktion
i JavaScript är du

716
00:35:27,090 --> 00:35:28,820
bokstavligen säga funktion.

717
00:35:28,820 --> 00:35:30,130
Sedan, vanligtvis, namnet
av funktionen.

718
00:35:30,130 --> 00:35:32,510
Men vi kommer aldrig att referera
denna funktion igen.

719
00:35:32,510 --> 00:35:34,040
Så vi lämnar det namnlösa.

720
00:35:34,040 --> 00:35:40,440
>> Då parentesen, då den lockiga
hängslen, och sedan koden i det.

721
00:35:40,440 --> 00:35:42,540
Så vi förstår denna burk
vara lite förvirrande.

722
00:35:42,540 --> 00:35:45,180
Så vi ger dig den generella formen av
vad en händelsehanterare ser ut

723
00:35:45,180 --> 00:35:47,790
nedan, som är på händelserna.

724
00:35:47,790 --> 00:35:50,598
Och då, din kod inuti det.

725
00:35:50,598 --> 00:35:52,478
>> MIKE RIZZO: Finns det någon
frågor om detta?

726
00:35:52,478 --> 00:35:54,818
Detta kan vara lite förvirrande
första gången du ser det.

727
00:35:54,818 --> 00:35:57,550
>> TOMAS REIMERS: Du verkligen vill
öppna en fil och visa dem lite

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

729
00:35:58,155 --> 00:35:59,853
>> MIKE RIZZO: Ja, låt oss göra det.

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

731
00:36:00,256 --> 00:36:02,490
>> TOMAS REIMERS: Så nu är vi
i apparaten.

732
00:36:02,490 --> 00:36:07,730
Och det vi har gjort är att vi har tagit
frihet att skapa både en index.html

733
00:36:07,730 --> 00:36:10,100
fil, som länkar till
en JavaScript-fil.

734
00:36:10,100 --> 00:36:12,880
Och kan vi öppna upp -

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

736
00:36:15,170 --> 00:36:16,630
Jo, det gör det två saker.

737
00:36:16,630 --> 00:36:18,350
>> Den första är den länkar till
JavaScript-filen.

738
00:36:18,350 --> 00:36:21,250
Och vi ser att här uppe.

739
00:36:21,250 --> 00:36:25,340
Vi ser att i huvudet av
HTML-dokument, i synnerhet.

740
00:36:25,340 --> 00:36:28,260
Så du ser det som
vi, i grund och botten, säger SRC,

741
00:36:28,260 --> 00:36:29,590
som står för källan.

742
00:36:29,590 --> 00:36:30,630
Och det är webbadressen.

743
00:36:30,630 --> 00:36:32,700
>> Så här kan man säga att vi har
inkluderade jQuery.

744
00:36:32,700 --> 00:36:34,290
Och vi har även manus.

745
00:36:34,290 --> 00:36:40,630
Det andra sättet att inkludera JavaScript är
att du kan inkludera en inline-skript

746
00:36:40,630 --> 00:36:44,600
tag som vi har på botten där det
säger script typ är text JavaScript.

747
00:36:44,600 --> 00:36:46,960
>> Så vi säger, lyssna, vi är
om att inkludera ett skript.

748
00:36:46,960 --> 00:36:51,890
Och vilken typ av detta manus är
JavaScript, vilket är en typ av text.

749
00:36:51,890 --> 00:36:52,550
Mycket enkelt.

750
00:36:52,550 --> 00:36:56,490
>> MIKE RIZZO: Så det här, typ av, får
din fråga om hur vi inkluderar

751
00:36:56,490 --> 00:37:02,340
JavaScript våra filer för när vi
hade PHP, vi gör något sånt här.

752
00:37:02,340 --> 00:37:07,570
Och sedan, har våra PHP funktioner -
låt oss säga bestånden göra

753
00:37:07,570 --> 00:37:09,150
någonting med det -

754
00:37:09,150 --> 00:37:10,490
går in där.

755
00:37:10,490 --> 00:37:13,860
Men nu har vi skripttaggarna
att vi ger den, som faktiskt

756
00:37:13,860 --> 00:37:19,470
del av HTML själv eftersom det inte är
fejka att vara en HTML-fil som det

757
00:37:19,470 --> 00:37:25,070
är i PHP eftersom om du faktiskt gå in
och titta på källan till sida,

758
00:37:25,070 --> 00:37:28,430
du kommer att se dessa script-taggar i det
med JavaScript i samband med

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

760
00:37:29,800 --> 00:37:31,760
>> Alltså, om vi ville
skriva några JavaScript -

761
00:37:31,760 --> 00:37:37,110
låt oss bara säga att vi ville ändra kroppen
eftersom just nu jag inte har

762
00:37:37,110 --> 00:37:40,020
andra taggar som jag verkligen kan
redigera förutom kroppen.

763
00:37:40,020 --> 00:37:42,450
Låt oss bara säga att jag ville
ändra CSS av detta.

764
00:37:42,450 --> 00:37:46,190
Så vi ska gå vidare och förändring
färgen på det till röd.

765
00:37:46,190 --> 00:37:47,380
>> Så jag sparar filen.

766
00:37:47,380 --> 00:37:52,700
Låt oss gå tillbaka till vår webbsida, uppdatera,
och den gör det automatiskt

767
00:37:52,700 --> 00:37:55,920
eftersom det inte verkar som om det väntade
alls eftersom vi inte lyssnade

768
00:37:55,920 --> 00:37:59,450
för en händelse eller något liknande.

769
00:37:59,450 --> 00:38:02,800
>> TOMAS REIMERS: Så om vi går tillbaka till det
fil i synnerhet - HTML

770
00:38:02,800 --> 00:38:04,710
fil - vad du ska
att se är att vi har -

771
00:38:04,710 --> 00:38:06,810
kom ihåg att det är laddat,
slags, kronologiskt.

772
00:38:06,810 --> 00:38:09,910
Så vi har först i huvudet.
den laddar dessa två filer.

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

774
00:38:10,800 --> 00:38:11,640
Och vi ser hej världen.

775
00:38:11,640 --> 00:38:13,030
Så vi gör hej världen.

776
00:38:13,030 --> 00:38:15,240
>> Och sedan det sista vi har
är att vi har skripttagg.

777
00:38:15,240 --> 00:38:20,880
Så det körs skriptet taggen eftersom det är
inte säga till den att vänta på något.

778
00:38:20,880 --> 00:38:24,700
Och det är den mest grundläggande
sätt att köra JavaScript.

779
00:38:24,700 --> 00:38:29,200
>> Med det sagt, kan du sätta skriptet
märka upp i sidhuvudet bara

780
00:38:29,200 --> 00:38:31,240
att visa detta?

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

782
00:38:34,450 --> 00:38:35,700
Och kör det.

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

784
00:38:38,880 --> 00:38:41,070
Vi kommer att märka att det
inte ändra färg.

785
00:38:41,070 --> 00:38:44,210
Och detta är ett av problemen med
JavaScript är att saker är laddad

786
00:38:44,210 --> 00:38:45,930
i kronologisk ordning.

787
00:38:45,930 --> 00:38:49,750
>> Så på tiden att denna kod
var igång, valde vi -

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

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

790
00:38:53,670 --> 00:38:57,560
Kroppen taggen finns inte ännu eftersom
JavaScript är i linje med HTML.

791
00:38:57,560 --> 00:39:01,790
Så webbläsaren är som väljer kropp.

792
00:39:01,790 --> 00:39:02,760
Det finns något sådant ännu.

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

794
00:39:03,600 --> 00:39:05,330
Och vi fortsätter att gå.

795
00:39:05,330 --> 00:39:07,200
>> Och så definierar vi en body-taggen.

796
00:39:07,200 --> 00:39:09,670
Men det blir aldrig uppdaterats.

797
00:39:09,670 --> 00:39:12,560
Så när du genomföra manus
taggar, se till att du placerar

798
00:39:12,560 --> 00:39:15,502
efter body-taggen.

799
00:39:15,502 --> 00:39:16,820
Nästa bild.

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

801
00:39:17,830 --> 00:39:19,330
Så vi ändrade något.

802
00:39:19,330 --> 00:39:21,910
Men det såg inte ut som det besvarade
oss alls eftersom det bara typ av

803
00:39:21,910 --> 00:39:24,150
gjorde det så fort den laddade sidan.

804
00:39:24,150 --> 00:39:27,700
Så nu, istället för att göra detta, varför
vi inte lägga en händelsehanterare.

805
00:39:27,700 --> 00:39:31,020
>> Så låt oss göra något
till kroppen igen.

806
00:39:31,020 --> 00:39:33,490
Och låt oss säga att vi gör det på -

807
00:39:33,490 --> 00:39:34,500
klicka.

808
00:39:34,500 --> 00:39:35,750
Vi kommer att lägga till en funktion.

809
00:39:35,750 --> 00:39:38,270

810
00:39:38,270 --> 00:39:39,690
>> TOMAS REIMERS: Låt oss förändring
det är färg till rött igen.

811
00:39:39,690 --> 00:39:40,000
Varför inte?

812
00:39:40,000 --> 00:39:41,680
>> MIKE RIZZO: Ja, låt oss förändring
sin "färg till rött igen.

813
00:39:41,680 --> 00:39:46,310

814
00:39:46,310 --> 00:39:46,900
Okej.

815
00:39:46,900 --> 00:39:48,480
Så låt oss ladda om sidan.

816
00:39:48,480 --> 00:39:49,530
OK, ser vi -

817
00:39:49,530 --> 00:39:52,290
som väntat, inte röda ännu.

818
00:39:52,290 --> 00:39:53,610
Men då kan vi gå vidare och klicka på den.

819
00:39:53,610 --> 00:39:54,270
>> TOMAS REIMERS: Och det gör att bli röd.

820
00:39:54,270 --> 00:39:56,090
>> MIKE RIZZO: Och det gör
röda som förväntat.

821
00:39:56,090 --> 00:39:59,010
>> TOMAS REIMERS: Och vi kan se hur
vi kan börja bygga mycket grundläggande

822
00:39:59,010 --> 00:40:00,170
interaktion.

823
00:40:00,170 --> 00:40:03,850
Andra saker som vi kanske vill göra är,
om vi inte vill göra kroppen

824
00:40:03,850 --> 00:40:07,230
färg röd, låt oss göra HTML
bakgrundsfärg rött.

825
00:40:07,230 --> 00:40:08,480
Bara så det är samma CSS.

826
00:40:08,480 --> 00:40:19,960

827
00:40:19,960 --> 00:40:23,320
>> Och när vi ändra det, kan vi se detta
mycket dramatiska effekten av att ändra

828
00:40:23,320 --> 00:40:25,510
hela sidan.

829
00:40:25,510 --> 00:40:29,100
Så återigen, om du genomföra saker,
du kan ha en komponent

830
00:40:29,100 --> 00:40:30,150
som är tänkt att användarna klickar på.

831
00:40:30,150 --> 00:40:32,710
Låt oss säga att en Avsluta-knapp och
en hel annan komponent,

832
00:40:32,710 --> 00:40:33,830
som är avsedd att svara.

833
00:40:33,830 --> 00:40:35,755
Så du vill ta bort ett fönster
när det händer.

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
Bara som ett exempel -

837
00:40:42,200 --> 00:40:44,400
du inte får se det här tidigare -

838
00:40:44,400 --> 00:40:47,500
Jag ska bara visa er hur det ser
som när vi dölja något.

839
00:40:47,500 --> 00:40:52,220
Så jag ska gå vidare och inte glider upp.

840
00:40:52,220 --> 00:40:54,440
>> TOMAS REIMERS: Vill du slå in det i ett
punkt typ innan 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, varför inte vi gör det bara så
Vi kan välja det lite mer.

843
00:40:59,135 --> 00:41:00,490
>> TOMAS Reimers: Och låt oss
ge det en klass.

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å låt oss se.

847
00:41:09,920 --> 00:41:14,820
Istället för att välja den verkliga kroppen
nu, jag ska bara markera allt med

848
00:41:14,820 --> 00:41:18,780
klass hej, som här vi
bara en sak.

849
00:41:18,780 --> 00:41:20,900
Så ska vi inte behöva
bekymra dig om det.

850
00:41:20,900 --> 00:41:23,080
>> Så jag ska uppdatera den.

851
00:41:23,080 --> 00:41:24,230
Jag ska gå vidare och klicka på den.

852
00:41:24,230 --> 00:41:27,890
Och det, sorts, gjorde en konstig slide
up sak, som inte ser det

853
00:41:27,890 --> 00:41:29,580
attraktiv.

854
00:41:29,580 --> 00:41:31,060
Generellt ser de ganska trevligt.

855
00:41:31,060 --> 00:41:32,720
Jag antar att detta - för vissa
anledning - inte.

856
00:41:32,720 --> 00:41:36,640
Jag ska bara göra en tona ut så
du kan titta på det också.

857
00:41:36,640 --> 00:41:38,100
Mycket trevligare.

858
00:41:38,100 --> 00:41:41,150
>> Och sedan, om jag öppnar JavaScript
trösta igen och vi vill se vad

859
00:41:41,150 --> 00:41:43,900
det ser ut när vi tona in den

860
00:41:43,900 --> 00:41:46,920
Nu, jag ringer bara tona in på det.

861
00:41:46,920 --> 00:41:48,830
Och det bleknar igen

862
00:41:48,830 --> 00:41:56,150
>> På samma sätt kan vi faktiskt också passera
ett argument för att tona in eller ut,

863
00:41:56,150 --> 00:41:57,640
vilket är, typen av, hastigheten på den.

864
00:41:57,640 --> 00:42:02,220
Så låt oss gå vidare och säga att vi vill ha
det att gå långsamt blekna i.

865
00:42:02,220 --> 00:42:04,250
Så jag antar att det fortfarande verkade
ganska snabbt.

866
00:42:04,250 --> 00:42:06,180
Men det var långsammare än tidigare.

867
00:42:06,180 --> 00:42:10,340
>> TOMAS REIMERS: Och om du vill hitta
reda på mer om dessa saker, återigen,

868
00:42:10,340 --> 00:42:13,410
bara att gå till jQuery dokumentation,
som vi har gett dig, och läsa

869
00:42:13,410 --> 00:42:13,735
genom dessa.

870
00:42:13,735 --> 00:42:15,790
De dokumenterar deras funktioner
otroligt bra.

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å jag antar att vi går tillbaka till detta.

874
00:42:21,560 --> 00:42:23,490
Och vi kan prata om vår sista sidan.

875
00:42:23,490 --> 00:42:24,690
Tja, kan vi avsluta med Bootstrap.

876
00:42:24,690 --> 00:42:27,140
Och då ska vi öppna den
för vissa frågor.

877
00:42:27,140 --> 00:42:30,180
Och om ni har några idéer som
du vill prova att kasta upp och se

878
00:42:30,180 --> 00:42:34,150
om vi kan genomföra dem med
JavaScript snabbt.

879
00:42:34,150 --> 00:42:37,890
>> Så egentligen snabbt om Bootstrap, som
var automatiskt med i

880
00:42:37,890 --> 00:42:41,700
din sista problem som i CSS-mappen
och faktiskt kopplad till din

881
00:42:41,700 --> 00:42:43,190
header.php.

882
00:42:43,190 --> 00:42:46,740
Så du kunde ha lagt till klasser som
definieras inom Bootstrap till det.

883
00:42:46,740 --> 00:42:50,490
Och det skulle ha automatiskt formaterad
dessa saker därefter.

884
00:42:50,490 --> 00:42:54,550
>> Tomas REIMERS: Så Bootstrap är en mycket
magisk sak som utvecklats av folket

885
00:42:54,550 --> 00:42:55,340
vid post.

886
00:42:55,340 --> 00:42:57,230
Och vad det var tänkt att göra var -

887
00:42:57,230 --> 00:43:00,740
innan webbplatser var verkligen svårt att göra
ser trevligt, särskilt när vi hade

888
00:43:00,740 --> 00:43:02,200
många gemensamma komponenter.

889
00:43:02,200 --> 00:43:04,770
Så en hel del knappar på
web såg samma.

890
00:43:04,770 --> 00:43:08,960
>> Många av textfält kan göras till
ser bättre ut än den standardtext

891
00:43:08,960 --> 00:43:13,620
fält som du vet antagligen från riktigt
gamla webbplatser eller riktigt dåligt gjort

892
00:43:13,620 --> 00:43:18,210
webbplatser, som precis ser ut som bokstav
textrutor utan någon form av text

893
00:43:18,210 --> 00:43:21,190
skugga eller någon form av fin kontur.

894
00:43:21,190 --> 00:43:24,540
Så vad Bootstrap gjorde var det sagt, ja,
Vi har mycket vanliga stilar.

895
00:43:24,540 --> 00:43:28,210
Varför inte vi göra en gemensam uppsättning CSS
och en gemensam uppsättning JavaScript as

896
00:43:28,210 --> 00:43:32,210
väl, vilket kan styla det som är och som
kan ge människor saker som drop

897
00:43:32,210 --> 00:43:34,610
down menyer, kan som ger människor
saker som modals.

898
00:43:34,610 --> 00:43:38,580
>> Modal är det som dyker över sidan
närhelst det är strängt taget

899
00:43:38,580 --> 00:43:41,090
något, som hämmar vidare
interaktion tills du

900
00:43:41,090 --> 00:43:43,110
interagera med den.

901
00:43:43,110 --> 00:43:45,820
Ungefär så här är, är du säker
du vill ta bort det här?

902
00:43:45,820 --> 00:43:49,100
Du kan inte riktigt göra något annat
tills du säger ja eller nej.

903
00:43:49,100 --> 00:43:52,720
>> Det tog allt detta och det förpackat det
tillsammans och sade, nu kör vi.

904
00:43:52,720 --> 00:43:54,630
Människor kan nu använda detta.

905
00:43:54,630 --> 00:43:56,830
Och du kan finna det över
vid getbootstrap.com.

906
00:43:56,830 --> 00:44:00,480
Det var automatiskt ingår i
din sista problemet inställd.

907
00:44:00,480 --> 00:44:04,160
Och du är mer än välkommen att
använda det på ditt slutprojekt.

908
00:44:04,160 --> 00:44:06,950
Och om du vill följa det
länk för att få Bootstrap.

909
00:44:06,950 --> 00:44:10,590

910
00:44:10,590 --> 00:44:15,700
>> Du ser här är den
Bootstrap CSS webbplats.

911
00:44:15,700 --> 00:44:16,860
Du kommer att se Bootstrap.

912
00:44:16,860 --> 00:44:20,450
Och om du bläddrar ner, ser du
hur man laddar ner det, hur man

913
00:44:20,450 --> 00:44:21,900
installera det, et cetera.

914
00:44:21,900 --> 00:44:24,700
>> MIKE RIZZO: Och du kan också,
intressant nog, anpassa den till

915
00:44:24,700 --> 00:44:27,770
vara något slag av teman
som du vill.

916
00:44:27,770 --> 00:44:31,270
Jag vet att det är något som jag gjorde för min
slutprojekt när jag tog klassen

917
00:44:31,270 --> 00:44:32,050
var skräddarsy det.

918
00:44:32,050 --> 00:44:34,540
En annan version av Bootstrap att
hade ett annat färgschema och

919
00:44:34,540 --> 00:44:36,700
olika former av några
olika saker.

920
00:44:36,700 --> 00:44:38,250
Så jag uppmuntrar dig att leka med det.

921
00:44:38,250 --> 00:44:39,440
Det är ganska kul att göra.

922
00:44:39,440 --> 00:44:43,230
>> TOMAS REIMERS: Ser över toppen
igen, det är mycket likt det Font

923
00:44:43,230 --> 00:44:44,970
Fantastisk plats.

924
00:44:44,970 --> 00:44:47,810
En hel del dokumentation startar
att verka liknande när du har

925
00:44:47,810 --> 00:44:48,940
sett nog av det.

926
00:44:48,940 --> 00:44:51,260
Så här har vi CSS
komponent i detta.

927
00:44:51,260 --> 00:44:53,540
Och du får se hur det
kan styla saker.

928
00:44:53,540 --> 00:44:56,780
Så om du klickar på tabeller, till exempel,
Du kan omedelbart göra en

929
00:44:56,780 --> 00:45:01,710
bord ganska genom att helt enkelt lägga
klasstabellen till det.

930
00:45:01,710 --> 00:45:03,150
>> Samma saker för knappar.

931
00:45:03,150 --> 00:45:12,140
Om du helt enkelt lägga till klass BTN och BTN
standard eller BTN primära, kan du

932
00:45:12,140 --> 00:45:16,240
får någon av dessa knappar
med dessa färdiga stilar.

933
00:45:16,240 --> 00:45:18,570
Och sedan, om du är ute efter
något mer komplicerat än att bara

934
00:45:18,570 --> 00:45:24,100
restyling vad w redan har, över på
fliken JavaScript överst vi

935
00:45:24,100 --> 00:45:25,120
har en massa komponenter.

936
00:45:25,120 --> 00:45:30,410
>> Så här har vi övergångar, modals,
menyerna, flikar och verktygstips.

937
00:45:30,410 --> 00:45:35,530
Ett verktygstips är det som dyker upp under din
musen när du svävar på något.

938
00:45:35,530 --> 00:45:40,280
Popovers, varningar, knappar, hopfällbar
dragspel är vad

939
00:45:40,280 --> 00:45:41,190
de är oftast kallas.

940
00:45:41,190 --> 00:45:43,045
Karuseller, vilket flip
igenom som bilder.

941
00:45:43,045 --> 00:45:52,190

942
00:45:52,190 --> 00:45:54,840
>> Så de är de komponenter
Bootstrap.

943
00:45:54,840 --> 00:45:57,620
Jag vill uppmuntra er att
mycket gå titta på dem.

944
00:45:57,620 --> 00:46:01,780
Det finns en JavaScript-komponent
och en CSS-komponent.

945
00:46:01,780 --> 00:46:03,880
Känn dig fri att använda dem som du vill.

946
00:46:03,880 --> 00:46:06,730
Vi ska inte gå in för mycket i dem
eftersom vi anser att dokumentationen

947
00:46:06,730 --> 00:46:09,360
är riktigt bra gjort.

948
00:46:09,360 --> 00:46:10,540
Och ja.

949
00:46:10,540 --> 00:46:14,500
Har du några frågor om det?

950
00:46:14,500 --> 00:46:19,430
>> MIKE RIZZO: Så som är riktigt snabb
sida, utformningen av denna webbsida som

951
00:46:19,430 --> 00:46:21,830
vi snabbt sätta ihop för
denna presentation är

952
00:46:21,830 --> 00:46:24,290
faktiskt gjort med hjälp av Bootstrap.

953
00:46:24,290 --> 00:46:27,810
Som ni ser, när vi klickar på dessa
olika flikar, vi är aldrig

954
00:46:27,810 --> 00:46:30,750
lämnar denna nuvarande index.html sidan.

955
00:46:30,750 --> 00:46:36,400
Så vad vi har är olika divar
inom denna index.html.

956
00:46:36,400 --> 00:46:39,610
Och sedan, när vi klickar på en annan
flik, det är bara att byta

957
00:46:39,610 --> 00:46:41,590
som ens visning.

958
00:46:41,590 --> 00:46:47,390
>> Så det följaktligen placerar dem,
ändrar HTML på sidan, så att

959
00:46:47,390 --> 00:46:52,330
den aktuella fliken är markerad som aktiv så
det verkar annorlunda och utseende

960
00:46:52,330 --> 00:46:52,820
riktigt nice.

961
00:46:52,820 --> 00:46:57,260
>> TOMAS REIMERS: Så det var allt gjort
utan att vi skriver nästan alla CSS.

962
00:46:57,260 --> 00:47:01,440
Vi ser också en rubrik längst upp,
som färgerna är av oss.

963
00:47:01,440 --> 00:47:04,800
Men själva sätta den på
början av sidan och göra

964
00:47:04,800 --> 00:47:06,660
det rulla var Bootstrap.

965
00:47:06,660 --> 00:47:09,720
Och sedan även för ett annat bibliotek - detta
är inte något som vi pratat om, men en

966
00:47:09,720 --> 00:47:11,580
du kan Google om du vill.

967
00:47:11,580 --> 00:47:15,130
Detta kallas prettify.js.

968
00:47:15,130 --> 00:47:20,650
Och det kommer att syntax framhäva din kod
för dig med både CSS och JavaScript.

969
00:47:20,650 --> 00:47:23,480

970
00:47:23,480 --> 00:47:27,070
>> Det sista vi vill prata om
innan vi släpper dig ut i

971
00:47:27,070 --> 00:47:30,620
världen för att titta på biblioteken för att räkna ut
hur man använder dem och, förhoppningsvis,

972
00:47:30,620 --> 00:47:34,640
Läs dokumentation och hitta det du
Behovet är hur man hittar biblioteken.

973
00:47:34,640 --> 00:47:37,000
Så det första är vi bara
kommer att driva Google.

974
00:47:37,000 --> 00:47:37,810
Gå Google.

975
00:47:37,810 --> 00:47:41,150
>> Det är bokstavligen vad vi gör när vi
behöver göra något är vi Google.

976
00:47:41,150 --> 00:47:44,730
Finns det ett JavaScript-bibliotek som
gör att jag kan manipulera tid i en

977
00:47:44,730 --> 00:47:45,400
användbart sätt?

978
00:47:45,400 --> 00:47:49,510
Så om jag vet att en del användare att skapa
ett konto här, och detta är den

979
00:47:49,510 --> 00:47:53,010
aktuell tid, hur kan jag beräkna
Skillnaden med det utan att behöva

980
00:47:53,010 --> 00:47:55,020
beräkna det själv?

981
00:47:55,020 --> 00:47:59,630
Så det här är faktiskt en gemensam sak,
JavaScript biblioteket.

982
00:47:59,630 --> 00:48:02,440
Och här vi Moment.js--
den mest populära.

983
00:48:02,440 --> 00:48:06,530
>> Om vi ​​behöver ett bibliotek för att manipulera
något som färg för att kunna

984
00:48:06,530 --> 00:48:08,650
generera en massa slumpmässiga färger -

985
00:48:08,650 --> 00:48:10,660
möjligen, för att generera en
stil eller något -

986
00:48:10,660 --> 00:48:13,480
vi kunde Googla något liknande
JavaScript färgbibliotek.

987
00:48:13,480 --> 00:48:15,620
Och jag är säker på att vi skulle dyka upp med
tusen och en av dem.

988
00:48:15,620 --> 00:48:18,290

989
00:48:18,290 --> 00:48:21,410
Du är välkommen att läsa igenom dem.

990
00:48:21,410 --> 00:48:24,610
>> Så det mesta - när du hittar dem -
ska finnas på en av de

991
00:48:24,610 --> 00:48:25,920
platser som värdkoden.

992
00:48:25,920 --> 00:48:26,960
De är är några populära.

993
00:48:26,960 --> 00:48:30,870
De mest populära, genom
långt, är github.com.

994
00:48:30,870 --> 00:48:35,300
Och om du går till GitHub det är faktiskt
där Normalisera var värd.

995
00:48:35,300 --> 00:48:36,950
Så om du vill gå tillbaka till den.

996
00:48:36,950 --> 00:48:38,135
Visa dem att.

997
00:48:38,135 --> 00:48:40,516
>> MIKE RIZZO: Och det är faktiskt där
detta är värd också, om du märkt.

998
00:48:40,516 --> 00:48:41,000
>> TOMAS REIMERS: Ja.

999
00:48:41,000 --> 00:48:49,078
Så om du går över till att normalisera
och gå till GitHub.

1000
00:48:49,078 --> 00:48:51,936
Var är det?

1001
00:48:51,936 --> 00:48:54,620
>> MIKE RIZZO: Den lilla katten sak
är 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 använder en metod som kallas
Git att lagra koden.

1004
00:49:02,180 --> 00:49:05,150
Är du inte vet vad det är eller
det skrämmer dig, det är bra.

1005
00:49:05,150 --> 00:49:16,100
Du behöver inte veta vad Git är
eftersom GitHub har en Download knapp

1006
00:49:16,100 --> 00:49:17,200
längst ner till höger.

1007
00:49:17,200 --> 00:49:21,350
>> Den andra bra sak att veta
om GitHub är de flesta produkter

1008
00:49:21,350 --> 00:49:23,200
kommer att ha en läs mig.

1009
00:49:23,200 --> 00:49:25,400
Och om de inte har en hemsida, det
läsa mig kommer att prata om hur du

1010
00:49:25,400 --> 00:49:28,310
installera det, hur man använder det, vad det
gör, et cetera, et cetera, et cetera.

1011
00:49:28,310 --> 00:49:31,033
Vad vi har i stort sett varit
tar dig genom.

1012
00:49:31,033 --> 00:49:32,326
>> MIKE RIZZO: Internets sluta.

1013
00:49:32,326 --> 00:49:34,020
>> TOMAS REIMERS: Det är bra.

1014
00:49:34,020 --> 00:49:36,980
De sista två saker vi ville
att prata om -

1015
00:49:36,980 --> 00:49:38,750
Vi har pratat om Git -

1016
00:49:38,750 --> 00:49:40,290
är felsökning.

1017
00:49:40,290 --> 00:49:43,020
Och den här är inte lika relevant för
den slutliga produkten eftersom det är

1018
00:49:43,020 --> 00:49:44,870
när du lämnar 50.

1019
00:49:44,870 --> 00:49:48,310
Och när du kör in i produkter
genomförande av bibliotek eller genomföra

1020
00:49:48,310 --> 00:49:50,230
ditt eget projekt, du kommer
att ha frågor eller är du

1021
00:49:50,230 --> 00:49:51,660
kommer att leta efter frågor.

1022
00:49:51,660 --> 00:49:53,060
>> Återigen, Google det.

1023
00:49:53,060 --> 00:49:54,630
Det är bokstavligen vad vi gör.

1024
00:49:54,630 --> 00:49:56,400
Detta kommer att låta dumt.

1025
00:49:56,400 --> 00:49:58,310
Men bokstavligt, vi Google det.

1026
00:49:58,310 --> 00:50:01,810
Och återigen, en av de första sakerna
du brukar stöta på är

1027
00:50:01,810 --> 00:50:06,550
stackoverflow.com, som är ett underbart
frågor och svar ur sikte.

1028
00:50:06,550 --> 00:50:10,530
>> Det är underbart både för att du kan
skicka frågorna och leta efter

1029
00:50:10,530 --> 00:50:12,760
svar men också på att
det redan har en hel del

1030
00:50:12,760 --> 00:50:14,590
förifylld innehåll där.

1031
00:50:14,590 --> 00:50:18,510
Så oftast när du Google en programmering
fråga inom den första

1032
00:50:18,510 --> 00:50:22,620
par träffar du kanske redan kör
in i den under dina problemsamlingar.

1033
00:50:22,620 --> 00:50:27,840
>> Och sedan, det sista riktigt kort sak
är JSFIDDLE, vilket är - i dag vi har

1034
00:50:27,840 --> 00:50:32,110
gjort en hel del arbete med
JavaScript HTML CSS.

1035
00:50:32,110 --> 00:50:39,820
JSFIDDLE är en web app, som i princip
kan du ta din HTML, DIN

1036
00:50:39,820 --> 00:50:42,820
JavaScript längst ner till vänster, och
din CSS uppe till höger.

1037
00:50:42,820 --> 00:50:47,840
Och då kan det skapa en snabb rendering
av det och se hur det interagerar.

1038
00:50:47,840 --> 00:50:50,500
Det är väldigt användbart när människor försöker
att göra ett proof of concept som

1039
00:50:50,500 --> 00:50:52,910
detta är hur du skulle
gör en rullgardinsmeny.

1040
00:50:52,910 --> 00:50:54,980
Kanske en snabb avslöja eller vad som helst.

1041
00:50:54,980 --> 00:50:56,560
>> MIKE RIZZO: Så låt oss gå
vidare och klicka här.

1042
00:50:56,560 --> 00:50:57,820
En snabb anteckning -

1043
00:50:57,820 --> 00:51:00,430
medan, innan vi var
gör på klick.

1044
00:51:00,430 --> 00:51:04,380
Det visade sig att JCorey Sydkorea har också en inbyggd
i klick händelsehanterare som det

1045
00:51:04,380 --> 00:51:07,020
använder bara för att det siffror att du är
kommer att vilja göra en massa saker

1046
00:51:07,020 --> 00:51:08,410
när du vill klicka på något.

1047
00:51:08,410 --> 00:51:09,690
>> På liknande sätt har det också en hovring.

1048
00:51:09,690 --> 00:51:12,850
Men för att få den fulla omfattningen av
dem, titta på jQuery

1049
00:51:12,850 --> 00:51:15,320
dokumentation och göra det.

1050
00:51:15,320 --> 00:51:18,760
Jag gjorde något dumt här.

1051
00:51:18,760 --> 00:51:21,490
>> TOMAS REIMERS: Så jag har en riktigt snabb
program just här, som säger

1052
00:51:21,490 --> 00:51:22,640
knappen på klick.

1053
00:51:22,640 --> 00:51:23,890
Då har vi en for-loop.

1054
00:51:23,890 --> 00:51:26,810
För i är mindre än 404.

1055
00:51:26,810 --> 00:51:29,530
Det är bara att dyka upp
dessa varningsmeddelanden.

1056
00:51:29,530 --> 00:51:33,425
>> MIKE RIZZO: Och vad var det
kod 404 stod i HTML?

1057
00:51:33,425 --> 00:51:34,145
Någon som minns?

1058
00:51:34,145 --> 00:51:35,450
Hittades inte, höger.

1059
00:51:35,450 --> 00:51:38,640

1060
00:51:38,640 --> 00:51:40,885
Chrome läggs också denna snyggt
sak där du kan -

1061
00:51:40,885 --> 00:51:43,430
>> TOMAS REIMERS: Därför att människor som
Mike började göra detta mycket och

1062
00:51:43,430 --> 00:51:47,230
irriterande användare, vilket gör
du att 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 några frågor
om det här, om JavaScript

1065
00:51:50,690 --> 00:51:53,420
bibliotek, hitta bibliotek eller
vad webbutveckling ser

1066
00:51:53,420 --> 00:51:55,400
som i den verkliga världen?

1067
00:51:55,400 --> 00:51:56,880
Vi kör upp mot tiden.

1068
00:51:56,880 --> 00:52:00,400
Så jag är inte säker på att vi ska
att ha tid att genomföra

1069
00:52:00,400 --> 00:52:02,290
om det inte är riktigt snabb.

1070
00:52:02,290 --> 00:52:04,580
Är vi bra?

1071
00:52:04,580 --> 00:52:08,110
>> MIKE RIZZO: Något ni skulle vilja
att se riktigt snabb i, liksom, två

1072
00:52:08,110 --> 00:52:09,556
minuter eller mindre?

1073
00:52:09,556 --> 00:52:10,870
>> TOMAS REIMERS: Anything
vi kan förtydliga?

1074
00:52:10,870 --> 00:52:12,500
Hur man skriver in -

1075
00:52:12,500 --> 00:52:13,260
>> PUBLIK: [OHÖRBAR]?

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 bara trycka
Kontroll-U på webbplatsen.

1078
00:52:18,065 --> 00:52:19,275
>> MIKE RIZZO: Åh, jag visste inte det.

1079
00:52:19,275 --> 00:52:22,290
>> TOMAS REIMERS: Jag tror, ​​ja.

1080
00:52:22,290 --> 00:52:23,300
Kontroll-U. Yeah.

1081
00:52:23,300 --> 00:52:25,970
>> MIKE RIZZO: Åh, så det är
kod för webbplatsen.

1082
00:52:25,970 --> 00:52:29,580
Men om du verkligen vill ladda ner vår
filer och allt, är den värd

1083
00:52:29,580 --> 00:52:32,650
på github.com

1084
00:52:32,650 --> 00:52:34,850
>> TOMAS REIMERS: slash mitt namn -

1085
00:52:34,850 --> 00:52:38,504
Tomas Reimers - snedstreck
CS50 bindestreck seminarium.

1086
00:52:38,504 --> 00:52:40,710
>> MIKE RIZZO: Och du kan
hitta allt där.

1087
00:52:40,710 --> 00:52:42,310
>> Tomas REIMERS: Detta är vad GitHub
ser ut, förresten.

1088
00:52:42,310 --> 00:52:44,910
Så återigen, när du ser en öppen källkod
projekt, typiskt, kommer de att vara en läsa

1089
00:52:44,910 --> 00:52:45,950
mig där som du kan läsa.

1090
00:52:45,950 --> 00:52:50,200
Och om du går tillbaka, kommer du att märka att
har du hämta zip, som kommer

1091
00:52:50,200 --> 00:52:52,130
kan du ladda ner käll
kod för att inkludera

1092
00:52:52,130 --> 00:52:53,666
produkten i din egen sak.

1093
00:52:53,666 --> 00:52:56,890
>> MIKE RIZZO: Ja, och om vi bara klicka
på index.html verkligen snabbt -

1094
00:52:56,890 --> 00:52:59,180
>> TOMAS REIMERS: Du ser här är den
källkod för vår webbplats.

1095
00:52:59,180 --> 00:53:02,016

1096
00:53:02,016 --> 00:53:06,070
>> MIKE RIZZO: Dessutom, jag glömde att skjuta rätt
tidigare med det stora bordet det

1097
00:53:06,070 --> 00:53:09,860
ingår, men det finns också en tabell
av chmods som vi ingår

1098
00:53:09,860 --> 00:53:13,210
bara för din skull.

1099
00:53:13,210 --> 00:53:16,940
Men om vi rulla hela vägen ner till
botten, vi faktiskt inte göra mycket

1100
00:53:16,940 --> 00:53:21,160
mycket med JavaScript
grejer alls med detta.

1101
00:53:21,160 --> 00:53:26,610
Det är uteslutande från allt
annat som vi hade.

1102
00:53:26,610 --> 00:53:28,730
>> Så tack killar för att ni kom
och lyssna.

1103
00:53:28,730 --> 00:53:29,830
Vi hoppas att detta var riktigt bra.

1104
00:53:29,830 --> 00:53:33,020
Om du har några JavaScript relaterad
frågor eller bara vill prata om

1105
00:53:33,020 --> 00:53:36,240
vad mer som vilka andra coola saker
du kan göra med JavaScript, vill vi gärna

1106
00:53:36,240 --> 00:53:37,186
att prata med dig.

1107
00:53:37,186 --> 00:53:40,010
>> TOMAS REIMERS: Om du har en fråga
om ditt projekt eller om det kan vara

1108
00:53:40,010 --> 00:53:42,740
relevant, kommer vi förmodligen stanna kvar
lite efter detta.

1109
00:53:42,740 --> 00:53:44,640
Men andra än att ha
en bra helg.

1110
00:53:44,640 --> 00:53:45,845
>> MIKE RIZZO: Ja, njut.

1111
00:53:45,845 --> 00:53:46,120
Se er.

1112
00:53:46,120 --> 00:53:47,370
>> TOMAS REIMERS: Vi ses.

1113
00:53:47,370 --> 00:53:47,926