1
00:00:00,000 --> 00:00:08,100

2
00:00:08,100 --> 00:00:08,890
>> ROGER ZURAWICKI: Hej alla.

3
00:00:08,890 --> 00:00:11,310
Kan jag få din uppmärksamhet?

4
00:00:11,310 --> 00:00:12,090
Tack, killar.

5
00:00:12,090 --> 00:00:14,030
Idag vill jag tala om Meteor.

6
00:00:14,030 --> 00:00:16,710
Det är en JavaScript ram.

7
00:00:16,710 --> 00:00:21,110
Vi kommer att gå igenom hur du kan
göra riktigt coola webbprogram.

8
00:00:21,110 --> 00:00:24,940
>> Innan vi kommer in i JavaScript, jag bara
vill berätta för er att detta kommer

9
00:00:24,940 --> 00:00:26,900
vara - du har en senare
pussla denna termin.

10
00:00:26,900 --> 00:00:28,520
Det ska handla om JavaScript.

11
00:00:28,520 --> 00:00:32,910
Jag tror [OHÖRBAR] först gå till
täcka webben HTML PHP grejer innan vi

12
00:00:32,910 --> 00:00:34,530
flytta till JavaScript.

13
00:00:34,530 --> 00:00:39,650
Och i CS50 är JavaScript anses
som en klientkoden.

14
00:00:39,650 --> 00:00:41,970
Så det blir bara köras i
webbläsaren.

15
00:00:41,970 --> 00:00:45,740
>> Men tack vare de senaste framstegen inom
teknik, har vi nu lyckats köra

16
00:00:45,740 --> 00:00:48,090
JavaScript som en server också.

17
00:00:48,090 --> 00:00:51,630
Så det här har skapat en riktigt cool
ramen för nu kan du skriva

18
00:00:51,630 --> 00:00:55,250
legitimt samma kod för
klienten och servern.

19
00:00:55,250 --> 00:00:57,810
Och när du definierar funktioner i din
server, kan din klient ringa dem

20
00:00:57,810 --> 00:00:59,090
samma funktioner.

21
00:00:59,090 --> 00:01:00,370
Och det gör det mycket enklare.

22
00:01:00,370 --> 00:01:04,519
Av följande skäl tidigare, om du använder PHP på
servern JavaScript på den främre

23
00:01:04,519 --> 00:01:08,040
Därför måste du skriva ett PHP-funktionen
och sedan en JavaScript version av

24
00:01:08,040 --> 00:01:10,880
samma funktion för att göra det
samma typ av arbete.

25
00:01:10,880 --> 00:01:14,330
>> Så innan vi börjar, jag vill ha
för att visa en demo av vad

26
00:01:14,330 --> 00:01:17,190
Meteor kan göra för dig.

27
00:01:17,190 --> 00:01:20,330
Jag kommer att visa er demo, vilket är vad
du kommer att kunna skapa den

28
00:01:20,330 --> 00:01:21,580
slutet av detta seminarium.

29
00:01:21,580 --> 00:01:24,260

30
00:01:24,260 --> 00:01:25,670
Vi bara gå här.

31
00:01:25,670 --> 00:01:27,410
Detta är en Tavlan app.

32
00:01:27,410 --> 00:01:31,970
Det är faktiskt bas i exemplet
att Meteor ger dig.

33
00:01:31,970 --> 00:01:37,220
>> Meteor är mycket trevligt eftersom när du
installera den som ett paket, kan du

34
00:01:37,220 --> 00:01:39,140
princip leka med
dessa fyra demos.

35
00:01:39,140 --> 00:01:41,410
Och det Tavlan är
första av dessa demonstrationer.

36
00:01:41,410 --> 00:01:44,620
Efter seminariet, jag uppmuntrar er alla
att bara utforska andra demos

37
00:01:44,620 --> 00:01:48,300
för jag tycker de är riktigt cool, och
de visar dig kraften av Meteor.

38
00:01:48,300 --> 00:01:51,310
>> Så vad detta är, är detta
värd på Tavlan.

39
00:01:51,310 --> 00:01:54,950
Detta är bara sagt en lista med namn.

40
00:01:54,950 --> 00:01:56,510
Och du kan välja personer.

41
00:01:56,510 --> 00:01:57,780
De gulnar.

42
00:01:57,780 --> 00:02:00,060
Och då kan du ge
dem fem poäng.

43
00:02:00,060 --> 00:02:02,850
Och du kommer att märka att listan är
sorterad för som jag ger mig själv mer

44
00:02:02,850 --> 00:02:05,850
och mer poäng, jag är nu på toppen.

45
00:02:05,850 --> 00:02:07,420
Så det är där vi börjar.

46
00:02:07,420 --> 00:02:11,690
>> Och vad kommer du att kunna ta bort
från detta seminarium är några fler

47
00:02:11,690 --> 00:02:13,600
funktioner som jag har lagt till
Leaderboard.

48
00:02:13,600 --> 00:02:18,240
Vi kommer att täcka hur man, liksom
lägga fem poäng till en spelare, vi kan

49
00:02:18,240 --> 00:02:28,720
ta bort spelare, kan vi lägga till nya spelare,
och vi kan välja hur vi vill

50
00:02:28,720 --> 00:02:29,540
att sortera dem.

51
00:02:29,540 --> 00:02:35,240
Och allt detta är mycket enkla API-anrop
att Meteor ger dig.

52
00:02:35,240 --> 00:02:39,120
Du har också en funktion här
att slumpmässigt poängen.

53
00:02:39,120 --> 00:02:41,450
>> Så vad är riktigt coolt om det här
är ni faktiskt kan

54
00:02:41,450 --> 00:02:43,820
alla går till webbplatsen.

55
00:02:43,820 --> 00:02:46,575
Jag ska lägga den i större text här.

56
00:02:46,575 --> 00:02:51,390

57
00:02:51,390 --> 00:02:52,640
En radikal-bly erboard.meteor.com.

58
00:02:52,640 --> 00:03:03,390

59
00:03:03,390 --> 00:03:07,622
Och när ni går till webbplatsen, du
ska kunna redigera platsen, och

60
00:03:07,622 --> 00:03:09,595
alla dina redigeringar kommer att vara synlig
till alla andra.

61
00:03:09,595 --> 00:03:12,730

62
00:03:12,730 --> 00:03:17,740
Så du kan - är ni alla
kan ansluta till webbplatsen?

63
00:03:17,740 --> 00:03:18,750
Så leka med den.

64
00:03:18,750 --> 00:03:20,440
Gå och börja ta bort några namn.

65
00:03:20,440 --> 00:03:21,690
Se vad som händer.

66
00:03:21,690 --> 00:03:35,370

67
00:03:35,370 --> 00:03:38,510
>> Så du ser att alla kan spela.

68
00:03:38,510 --> 00:03:41,930
Det här är bara standardsäkerhets
läge för Meteor.

69
00:03:41,930 --> 00:03:44,360
Du ser att alla kan
ändra varandras uppgifter.

70
00:03:44,360 --> 00:03:44,920
Oroa dig inte.

71
00:03:44,920 --> 00:03:46,460
Meteor har säkerheten.

72
00:03:46,460 --> 00:03:49,860
Detta är en mycket lätt implementeras
funktion, där du kan ställa in användare

73
00:03:49,860 --> 00:03:50,600
och inloggningar.

74
00:03:50,600 --> 00:03:53,750
Men just nu, vem som helst som besöker
webbplats kan ge sig själva så många

75
00:03:53,750 --> 00:03:55,000
pekar som de vill.

76
00:03:55,000 --> 00:03:57,140

77
00:03:57,140 --> 00:04:00,090
Så jag alltid så här, eftersom det här
är ett roligt sätt att komma igång.

78
00:04:00,090 --> 00:04:02,360
Och sedan kommer vi bara prata
om detaljerna, hur

79
00:04:02,360 --> 00:04:03,610
Meteor gör detta möjligt.

80
00:04:03,610 --> 00:04:10,820

81
00:04:10,820 --> 00:04:15,660
>> Så jag kommer att täcka det som Meteor är,
och då kommer vi bara behöver täcka

82
00:04:15,660 --> 00:04:18,920
två förutsättningar som CS50
har inte täcks tillräckligt.

83
00:04:18,920 --> 00:04:21,970
Men i slutet av perioden, bör du
vara bekväm med både HTML och

84
00:04:21,970 --> 00:04:25,250
JavaScript för att verkligen få tag
smutsiga arbeta med Meteor.

85
00:04:25,250 --> 00:04:28,740
Och jag tycker det är bara ett bra sätt för
ännu mindre bekväm studenter att göra

86
00:04:28,740 --> 00:04:32,930
slutgiltiga projekt eftersom de kan verkligen
bo i ett språk, och de får

87
00:04:32,930 --> 00:04:37,620
se förändringar i deras
arbeta direkt.

88
00:04:37,620 --> 00:04:42,520
>> Så detta bildspel bara några av de
viktig teknik som Meteor JS

89
00:04:42,520 --> 00:04:43,610
ger till dig.

90
00:04:43,610 --> 00:04:46,090
Meteor är inte en ny teknik
på egen hand.

91
00:04:46,090 --> 00:04:48,390
Det är verkligen ett gytter av
alla dessa olika saker

92
00:04:48,390 --> 00:04:49,920
vi har på internet.

93
00:04:49,920 --> 00:04:55,650
Förutom HTML, CSS, JavaScript, vi
har en del teknik som Node.js,

94
00:04:55,650 --> 00:04:58,490
vilket är det som gör att du kan köra
JavaScript på baksidan slutet på

95
00:04:58,490 --> 00:05:02,520
server, samt en del JavaScript
bibliotek som jQuery, streck.

96
00:05:02,520 --> 00:05:06,320
>> Alla dessa kommer att vara bekant för
du i slutet av terminen.

97
00:05:06,320 --> 00:05:10,680
Och vi kommer även att använda en databas som kallas
mongodb, som är en riktigt

98
00:05:10,680 --> 00:05:14,250
populära databas nu
dessa nya startups.

99
00:05:14,250 --> 00:05:18,650
Du kan se det som som MySQL, men
det fungerar väldigt fint med JavaScript.

100
00:05:18,650 --> 00:05:22,140
Och det finns en del andra tekniker här
och många fler jag har inte listat

101
00:05:22,140 --> 00:05:23,880
att alla gränssnitt verkligen
fint med Meteor.

102
00:05:23,880 --> 00:05:26,900

103
00:05:26,900 --> 00:05:30,540
>> Jag måste sätta denna bild eftersom
Ibland får jag förvirring om detta.

104
00:05:30,540 --> 00:05:31,695
Meteor är bara JavaScript.

105
00:05:31,695 --> 00:05:33,040
Det är inte PHP.

106
00:05:33,040 --> 00:05:34,360
Det är inte Ruby on Rails.

107
00:05:34,360 --> 00:05:37,950
Så om du skriver kod, om du vill
skriva ett Meteor projekt, du verkligen

108
00:05:37,950 --> 00:05:38,900
kan inte använda Ruby-kod.

109
00:05:38,900 --> 00:05:41,660
Du verkligen inte använder PHP.

110
00:05:41,660 --> 00:05:45,800
>> Samtidigt som vi ser att skillnaderna i
kod och syntaxen kanske inte att

111
00:05:45,800 --> 00:05:48,930
annorlunda, vill jag betona för er att
Meteor, allt du koden

112
00:05:48,930 --> 00:05:50,660
endast i JavaScript.

113
00:05:50,660 --> 00:05:53,920
Och allt som du visar till
användaren blir HTML CSS.

114
00:05:53,920 --> 00:05:56,780
Men du egentligen inte använder någon av
de andra språk som andra

115
00:05:56,780 --> 00:05:59,250
seminarier kan omfatta.

116
00:05:59,250 --> 00:06:01,020
Vad Meteor är också är en webbserver.

117
00:06:01,020 --> 00:06:03,930
Så även om du inte har några
JavaScript, och du bara vill tjäna

118
00:06:03,930 --> 00:06:07,020
CSS och HTML-filer, Meteor
kan göra det åt dig.

119
00:06:07,020 --> 00:06:10,520

120
00:06:10,520 --> 00:06:13,770
>> Och här är länken igen till
demo som jag fick ni

121
00:06:13,770 --> 00:06:15,380
började spela med.

122
00:06:15,380 --> 00:06:18,230
Men låt oss gå vidare till HTML.

123
00:06:18,230 --> 00:06:22,060
Hur många här har
ingen aning om vad HTML är?

124
00:06:22,060 --> 00:06:22,670
OK bra.

125
00:06:22,670 --> 00:06:25,800
Och det är helt bra.

126
00:06:25,800 --> 00:06:29,410
Du behöver verkligen inte veta mycket om
det eftersom vi kommer att gå över

127
00:06:29,410 --> 00:06:31,220
användning mycket enkelt.

128
00:06:31,220 --> 00:06:34,570
>> Detta är vad den enkla
HTML-sidan ser ut.

129
00:06:34,570 --> 00:06:38,840
Detta kan vara som din hej, värld för
HTML, medan vi började i C med

130
00:06:38,840 --> 00:06:40,760
hej, värld.

131
00:06:40,760 --> 00:06:44,360
Jag vill inte att du betona på
information om vad HTML, vilken huvud, vad

132
00:06:44,360 --> 00:06:46,120
kropp, vilken titel gör där.

133
00:06:46,120 --> 00:06:49,130
Jag vill bara betona struktur,
hur du har taggar.

134
00:06:49,130 --> 00:06:50,860
Och det är vinkelfästen.

135
00:06:50,860 --> 00:06:52,380
Och det är där du har
dina deskriptorer.

136
00:06:52,380 --> 00:06:54,790
>> Så du kan ha HTML-dokument.

137
00:06:54,790 --> 00:06:59,300
Och så kommer du stänger HTML-dokument
med backslash samma sak.

138
00:06:59,300 --> 00:07:01,200
Och du har olika typer av taggar.

139
00:07:01,200 --> 00:07:02,730
Och märker att de alla är matchade.

140
00:07:02,730 --> 00:07:05,300
Du kommer att ha som en body-taggen
och sedan en nära body-taggen.

141
00:07:05,300 --> 00:07:08,620
Och inne i body-taggen, kommer att vara
innehållet på din webbsida.

142
00:07:08,620 --> 00:07:12,770
Så denna webbsida skulle helt enkelt visa
på en vit bakgrund och svart text

143
00:07:12,770 --> 00:07:14,242
hej, värld.

144
00:07:14,242 --> 00:07:17,610
Låter det vettigt?

145
00:07:17,610 --> 00:07:19,500
OK.

146
00:07:19,500 --> 00:07:22,640
>> Nu ska jag snart
täcka JavaScript.

147
00:07:22,640 --> 00:07:26,990
För att citera en tidigare TF,
"Javascript är den bästa programmering

148
00:07:26,990 --> 00:07:28,550
språk som finns.

149
00:07:28,550 --> 00:07:30,520
Andra människor kommer att försöka
säga något annat.

150
00:07:30,520 --> 00:07:33,840
De har fel. "Javascript är ganska
trevlig, och jag ska visa dig varför.

151
00:07:33,840 --> 00:07:36,620

152
00:07:36,620 --> 00:07:42,380
>> Så det här är det klassiska exemplet vi börjar
med i C. Vi har hej, värld.

153
00:07:42,380 --> 00:07:45,500
Och du märker att även om du krymper
det, du måste ha minst två

154
00:07:45,500 --> 00:07:46,560
rader kod här.

155
00:07:46,560 --> 00:07:48,990
Jag har flera rader kod.

156
00:07:48,990 --> 00:07:50,160
Detta kan göras mycket enkelt.

157
00:07:50,160 --> 00:07:53,950
En linje i JavaScript med console.log,
och sedan din sträng,

158
00:07:53,950 --> 00:07:55,340
hej, värld.

159
00:07:55,340 --> 00:07:59,570
>> Nu, även om vi ska flytta till en ny
språk JavaScript, nästan alla av

160
00:07:59,570 --> 00:08:02,950
färdigheter du lärt dig genom att koda
i C är direkt portabel.

161
00:08:02,950 --> 00:08:07,130
Så strängar, tanken på strängar i
citattecken, det är samma.

162
00:08:07,130 --> 00:08:08,890
Den semikolon, det är samma.

163
00:08:08,890 --> 00:08:11,190
>> En snygg funktion om JavaScript
faktiskt är att du

164
00:08:11,190 --> 00:08:12,360
behöver inte semikolonet.

165
00:08:12,360 --> 00:08:14,950
Man kan gissa att du borde
sätta ett semikolon där.

166
00:08:14,950 --> 00:08:18,035
Men som sagt, ska du alltid försöka
att sätta dina semikolon där.

167
00:08:18,035 --> 00:08:21,160
Det anses bra stil.

168
00:08:21,160 --> 00:08:22,650
Och också, det finns ingen huvudfunktion.

169
00:08:22,650 --> 00:08:25,580
Man börjar precis vid toppen av filen
och läsa saker rad för rad.

170
00:08:25,580 --> 00:08:28,820

171
00:08:28,820 --> 00:08:32,760
>> Då detta är vad som krävs för att göra
att hej, världsprogram.

172
00:08:32,760 --> 00:08:36,059
Och sedan märker att du måste
gör hej och sedan köra hej.

173
00:08:36,059 --> 00:08:38,530
Med JavaScript, det anses
ett tolkat språk.

174
00:08:38,530 --> 00:08:40,780
Vad du behöver veta är att
det finns inget att göra.

175
00:08:40,780 --> 00:08:41,950
>> Det finns ingen kompilering.

176
00:08:41,950 --> 00:08:43,440
Du kör bara nod.

177
00:08:43,440 --> 00:08:47,220
Och kom ihåg nod är det program som
kommer att köra JavaScript på en konsol,

178
00:08:47,220 --> 00:08:49,030
på en svart låda, inte på webbplatsen.

179
00:08:49,030 --> 00:08:52,480
Så du bara ge den filen, och det är
ska skriva ut hej, värld.

180
00:08:52,480 --> 00:08:56,750
>> Jag ska faktiskt göra en liten demo av
att för er här.

181
00:08:56,750 --> 00:08:59,380
Så låt oss gå över till min
Node.js terminal.

182
00:08:59,380 --> 00:09:04,470

183
00:09:04,470 --> 00:09:05,322
OK.

184
00:09:05,322 --> 00:09:06,150
Låt oss flytta hit.

185
00:09:06,150 --> 00:09:07,930
Så jag ska börja nod.

186
00:09:07,930 --> 00:09:10,230
Och jag ska visa er i just
en sekund hur man får det

187
00:09:10,230 --> 00:09:12,000
installerad, om du inte gör.

188
00:09:12,000 --> 00:09:14,800
Låt mig göra det lite större.

189
00:09:14,800 --> 00:09:17,800

190
00:09:17,800 --> 00:09:17,870
OK.

191
00:09:17,870 --> 00:09:20,120
Jag hoppas att ni kan se.

192
00:09:20,120 --> 00:09:27,390
>> Så jag kan skriva kod som jag gjorde
tidigare i console.log.

193
00:09:27,390 --> 00:09:28,915
Hej, Roger.

194
00:09:28,915 --> 00:09:31,710

195
00:09:31,710 --> 00:09:35,330
Och märker att jag inte behöver göra det
semikolon, men då får jag denna konstiga

196
00:09:35,330 --> 00:09:36,850
undefined sak.

197
00:09:36,850 --> 00:09:40,310
Jo faktiskt, det gör detsamma om
det odefinierade sak.

198
00:09:40,310 --> 00:09:43,590
Saker jag vill att du ska märka är att du
behöver inte den viktigaste funktionen här

199
00:09:43,590 --> 00:09:45,050
att börja köra kod.

200
00:09:45,050 --> 00:09:46,790
Och det finns ingen backslash slut.

201
00:09:46,790 --> 00:09:50,683
Det finns några små funktioner som
JavaScript kan göra för dig.

202
00:09:50,683 --> 00:09:53,510
>> PUBLIK: [OHÖRBAR].

203
00:09:53,510 --> 00:09:54,000
>> ROGER ZURAWICKI: Oh yeah.

204
00:09:54,000 --> 00:09:57,460
Jag är ledsen för det.

205
00:09:57,460 --> 00:10:02,200
Och att pilen betyder bara nod
är redo för ett annat kommando.

206
00:10:02,200 --> 00:10:05,380
Så du kan få den att göra enkla
matematik, som 1 plus 1.

207
00:10:05,380 --> 00:10:10,360
Och precis som i C, dessa matte
symboler är precis samma.

208
00:10:10,360 --> 00:10:13,750
Jag kan göra console.log av ett nummer.

209
00:10:13,750 --> 00:10:15,090
Och sedan skriver ut två.

210
00:10:15,090 --> 00:10:19,000
JavaScript är trevligt i det avseendet, eftersom
även om två är en int,

211
00:10:19,000 --> 00:10:22,020
som i C, om du gjorde printf med
två, skulle du få ett felmeddelande.

212
00:10:22,020 --> 00:10:24,140
>> Men JavaScript vet, åh, du är
skriver något.

213
00:10:24,140 --> 00:10:25,070
Jag kommer att behöva en sträng.

214
00:10:25,070 --> 00:10:28,410
Så låt mig konvertera att två
till en sträng för dig.

215
00:10:28,410 --> 00:10:34,970
Och du kan också göra en del konstiga saker
liksom hej och sedan plus två.

216
00:10:34,970 --> 00:10:39,520
Detta är bara ytterligare ett exempel på hur två
kan omvandlas i där också.

217
00:10:39,520 --> 00:10:45,135
>> Så med det ur vägen, låt oss
bara täcker lite mer Javascript.

218
00:10:45,135 --> 00:10:48,660

219
00:10:48,660 --> 00:10:50,540
Så i C, har vi typer.

220
00:10:50,540 --> 00:10:53,925
När vi skapade en ny variabel, vi
måste säga att det är char * eller

221
00:10:53,925 --> 00:10:55,850
sträng i fallet CS50.

222
00:10:55,850 --> 00:10:58,350
Eller om vi hade ett decimaltal,
vi hade att säga flyta.

223
00:10:58,350 --> 00:11:00,690
Om vi ​​behövde en Boolean,
vi hade att säga b..

224
00:11:00,690 --> 00:11:04,220
Och sedan när vi hade något som
var b, det hade att stanna en bool.

225
00:11:04,220 --> 00:11:07,360
Vi kunde inte trolla ändra den till
en int om vi skrev i

226
00:11:07,360 --> 00:11:09,450
parenteser, int av b..

227
00:11:09,450 --> 00:11:11,820
>> I JavaScript, det finns inga slag.

228
00:11:11,820 --> 00:11:13,350
Du tror bara på det som var.

229
00:11:13,350 --> 00:11:15,270
Och var är hur du skapar en ny typ.

230
00:11:15,270 --> 00:11:19,210
Så det kan ha var s vara en sträng,
var n är ett flöte,

231
00:11:19,210 --> 00:11:21,230
och var b är sant.

232
00:11:21,230 --> 00:11:24,980
Och en sak som du inte kan göra i C är
Jag kan nu säga, efter den linjen, b

233
00:11:24,980 --> 00:11:26,230
är lika med ett heltal.

234
00:11:26,230 --> 00:11:27,400
Och det fungerar alldeles utmärkt.

235
00:11:27,400 --> 00:11:30,840
Medan C, skulle den säga som
din heltal är inte bool.

236
00:11:30,840 --> 00:11:32,770
Jag kan inte göra det åt dig.

237
00:11:32,770 --> 00:11:34,050
Eller [OHÖRBAR] skulle kasta ett fel.

238
00:11:34,050 --> 00:11:37,970

239
00:11:37,970 --> 00:11:43,420
>> Och jag kan snabbt gå tillbaka till nod och
visar en del av denna funktionalitet.

240
00:11:43,420 --> 00:11:44,960
Så jag kan ha en var en.

241
00:11:44,960 --> 00:11:52,120
Kalla det "Apple." Så nu när jag skriver ut ett,
Jag får min sträng, "Apple". Men jag kan

242
00:11:52,120 --> 00:11:54,900
även nu säger en lika 3.

243
00:11:54,900 --> 00:11:56,610
Och märker det finns inget fel.

244
00:11:56,610 --> 00:12:00,630
Och nu är lika med 3.

245
00:12:00,630 --> 00:12:01,880
Har du frågor så långt?

246
00:12:01,880 --> 00:12:07,030

247
00:12:07,030 --> 00:12:07,570
Ja.

248
00:12:07,570 --> 00:12:10,780
>> PUBLIK: Vänta, så console.log
är i grunden printf, eller hur?

249
00:12:10,780 --> 00:12:12,180
>> ROGER ZURAWICKI: console.log
är din printf.

250
00:12:12,180 --> 00:12:12,652
>> PUBLIK: Höger.

251
00:12:12,652 --> 00:12:17,844
Så hur kommer om du bara skriva in åtta
eller [OHÖRBAR], vad betyder det

252
00:12:17,844 --> 00:12:18,790
[OHÖRBAR]?

253
00:12:18,790 --> 00:12:19,160
>> ROGER ZURAWICKI: Höger.

254
00:12:19,160 --> 00:12:21,690
Så det är -

255
00:12:21,690 --> 00:12:24,240
grejer i grönt blir tryckt
på konsolen.

256
00:12:24,240 --> 00:12:27,050
Och det vi får se nästa är
När vi flyttar till webben

257
00:12:27,050 --> 00:12:29,300
sida, vi kommer inte att göra -

258
00:12:29,300 --> 00:12:32,650
JavaScript kommer att ha en HTML
mall, som jag ska täcka i

259
00:12:32,650 --> 00:12:34,730
Meteor del av seminariet.

260
00:12:34,730 --> 00:12:38,730
Och det är där du kan säga, ge mig
värdet av en, och det kommer att sätta en i

261
00:12:38,730 --> 00:12:39,920
din webbplats.

262
00:12:39,920 --> 00:12:42,520
Eftersom varje webbläsare faktiskt
har en liten konsol.

263
00:12:42,520 --> 00:12:46,380
Och om du tittat mycket noga, du
skulle få lite information, som din

264
00:12:46,380 --> 00:12:51,210
printf är förekommer där med
varje webbsida du laddar.

265
00:12:51,210 --> 00:12:53,580
>> PUBLIK: Hur fick du
till skalet skärmen?

266
00:12:53,580 --> 00:12:57,680
>> ROGER ZURAWICKI: Så det finns ett kommando
kallad nod, och det kommer med Meteor.

267
00:12:57,680 --> 00:13:01,230
Så jag ska bara avsluta ut där.

268
00:13:01,230 --> 00:13:03,580
Node är det program som
kör JavaScript.

269
00:13:03,580 --> 00:13:07,070
Om du går till meteor.com, du
kan installera Meteor, och

270
00:13:07,070 --> 00:13:08,480
Meteor levereras med noden.

271
00:13:08,480 --> 00:13:11,470
Eftersom Meteor är bara en samling
av alla dessa programpaket.

272
00:13:11,470 --> 00:13:15,280
När vi kommer till vårt exempel, kommer jag
gå alla genom att installera

273
00:13:15,280 --> 00:13:17,625
Meteor, och sedan kan du spela
med nod själv.

274
00:13:17,625 --> 00:13:22,154

275
00:13:22,154 --> 00:13:23,980
OK, bra.

276
00:13:23,980 --> 00:13:29,640
>> Så en annan bra funktion om att arbeta
med Javascript är slingor är desamma.

277
00:13:29,640 --> 00:13:31,430
Ganska mycket exakt samma.

278
00:13:31,430 --> 00:13:35,530
För loopar, medan slingor, gör
medan loopar, om annat.

279
00:13:35,530 --> 00:13:36,880
Det är i alla fall med hängslen.

280
00:13:36,880 --> 00:13:38,540
Det är samma syntax.

281
00:13:38,540 --> 00:13:41,350
I fallet med en for-slinga, den lilla
detaljer som du måste vara uppmärksam

282
00:13:41,350 --> 00:13:45,340
att istället för int i lika med 0,
vi har att säga var jag är lika med 0.

283
00:13:45,340 --> 00:13:49,580
Men det är på grund av variablerna
typer som vi pratade om tidigare.

284
00:13:49,580 --> 00:13:53,360
>> Lägg märke till att printf blir
en stock, en console.log.

285
00:13:53,360 --> 00:13:57,370
Och vi behöver inte göra det procent
p backslash n och gå sedan in i..

286
00:13:57,370 --> 00:13:58,380
Du kan bara säga jag.

287
00:13:58,380 --> 00:14:01,910
Och det skulle skriva ut antalet
från noll till fyra.

288
00:14:01,910 --> 00:14:04,830
Om ni vill prova detta, eftersom
du tog upp en bra poäng.

289
00:14:04,830 --> 00:14:08,730
Om du vill köra den här koden på din
egen webbläsare, skulle jag rekommendera att

290
00:14:08,730 --> 00:14:11,040
alla öppnar Google Chrome.

291
00:14:11,040 --> 00:14:14,220
Google Chrome eller en webbläsare egentligen,
men jag gillar Google Chrome

292
00:14:14,220 --> 00:14:17,350
eftersom det är mycket standardiserad.

293
00:14:17,350 --> 00:14:24,240
>> Du kan gå till, jag tror, ​​om ni rätt
klicka på någon hemsida, bara i

294
00:14:24,240 --> 00:14:26,880
vita rymden, ser du ett alternativ
kallas Inspektera Element.

295
00:14:26,880 --> 00:14:28,810
Det är oftast den sista.

296
00:14:28,810 --> 00:14:32,630
Och när du klickar på den, ska du få
en sak till botten visas här.

297
00:14:32,630 --> 00:14:35,840

298
00:14:35,840 --> 00:14:37,780
Låt mig zooma in här.

299
00:14:37,780 --> 00:14:41,390
Och vi har ett par flikar här.

300
00:14:41,390 --> 00:14:43,580
Den du bryr dig om är konsolen.

301
00:14:43,580 --> 00:14:48,820
>> Och detta är en JavaScript-konsol
att du nu kan arbeta med.

302
00:14:48,820 --> 00:14:49,370
Bra.

303
00:14:49,370 --> 00:14:52,560
Så jag kan skriva in samma saker
Jag skriver tidigare i nod.

304
00:14:52,560 --> 00:14:54,790
Ett plus ett är två.

305
00:14:54,790 --> 00:14:59,110
Var en lika "Apple".

306
00:14:59,110 --> 00:15:03,430
Och då skulle jag skriva ut en,
och en är "Apple".

307
00:15:03,430 --> 00:15:08,760
Så i alla webbläsare, Firefox, Chrome,
Safari, vad du än använder, som

308
00:15:08,760 --> 00:15:11,240
länge du har tillgång till en JavaScript
konsol, samma typ av

309
00:15:11,240 --> 00:15:15,520
kod jag sprang i nod du
kan köras i din egen konsol.

310
00:15:15,520 --> 00:15:17,530
>> PUBLIK: [OHÖRBAR]?

311
00:15:17,530 --> 00:15:18,690
>> ROGER ZURAWICKI: Hur
komma till konsolen?

312
00:15:18,690 --> 00:15:22,880
Du måste högerklicka på tomt utrymme
på sidan, och sedan går du till

313
00:15:22,880 --> 00:15:26,100
Inspektera Element.

314
00:15:26,100 --> 00:15:28,290
Så egentligen, jag skulle vilja att ni
att bara se till att du kan

315
00:15:28,290 --> 00:15:29,860
Inspektera Element i Chrome.

316
00:15:29,860 --> 00:15:32,630
Och se när du skriver på något
kod till konsolen

317
00:15:32,630 --> 00:15:33,880
att det körs korrekt.

318
00:15:33,880 --> 00:16:15,820

319
00:16:15,820 --> 00:16:18,430
Tveka inte att ställa några frågor om
något är oklart här.

320
00:16:18,430 --> 00:16:23,340

321
00:16:23,340 --> 00:16:24,590
>> PUBLIK: [OHÖRBAR].

322
00:16:24,590 --> 00:16:27,280

323
00:16:27,280 --> 00:16:28,200
>> ROGER ZURAWICKI: Alla typer, höger.

324
00:16:28,200 --> 00:16:31,370
Det finns bara en typ för alla
variabler i JavaScript.

325
00:16:31,370 --> 00:16:34,160
Och när du måste deklarera
en variabel, säger du var.

326
00:16:34,160 --> 00:16:35,410
>> PUBLIK: [OHÖRBAR].

327
00:16:35,410 --> 00:16:39,010

328
00:16:39,010 --> 00:16:40,050
>> ROGER ZURAWICKI: Ja.

329
00:16:40,050 --> 00:16:43,730
Det gör det, men i JavaScript, det är mycket
smart om allokering av minne.

330
00:16:43,730 --> 00:16:44,600
Det finns ingen malloc.

331
00:16:44,600 --> 00:16:45,780
Det finns ingen gratis.

332
00:16:45,780 --> 00:16:48,490
Så du behöver inte oroa dig för det.

333
00:16:48,490 --> 00:16:51,140
Det är en annan trevlig funktion som
JavaScript ger dig.

334
00:16:51,140 --> 00:16:56,990

335
00:16:56,990 --> 00:16:58,440
>> Så jag skulle vilja gå vidare.

336
00:16:58,440 --> 00:17:01,360
Skulle det vara OK?

337
00:17:01,360 --> 00:17:02,610
OK.

338
00:17:02,610 --> 00:17:04,780

339
00:17:04,780 --> 00:17:07,720
Bra.

340
00:17:07,720 --> 00:17:10,660
>> PUBLIK: Jag har bara problem
finna den [? Inspektera Element. ?]

341
00:17:10,660 --> 00:17:13,609

342
00:17:13,609 --> 00:17:16,250
>> ROGER ZURAWICKI: Så Safari utseende
lite annorlunda, men ni

343
00:17:16,250 --> 00:17:18,599
har Chrome eller Firefox?

344
00:17:18,599 --> 00:17:21,619
De är de lättare
dem att arbeta med.

345
00:17:21,619 --> 00:17:25,079
Och för dina projekt, rekommenderar jag
hålla sig med en webbläsare eftersom

346
00:17:25,079 --> 00:17:29,610
du får en hel del buggar nästan
eftersom alla webbläsare behandlar

347
00:17:29,610 --> 00:17:31,980
JavaScript HTML lite annorlunda.

348
00:17:31,980 --> 00:17:35,170
Så jag tror att ditt liv kommer att bli mycket
lättare om du håller dig till Chrome eftersom

349
00:17:35,170 --> 00:17:37,052
den är tillgänglig på alla maskiner.

350
00:17:37,052 --> 00:17:38,790
Och det är en ganska populär webbläsare.

351
00:17:38,790 --> 00:17:59,860

352
00:17:59,860 --> 00:18:01,110
OK?

353
00:18:01,110 --> 00:18:03,310

354
00:18:03,310 --> 00:18:06,370
>> Så nästa ämne som vi borde
täcker i JavaScript -

355
00:18:06,370 --> 00:18:07,730
Jag är ledsen för formateringen här.

356
00:18:07,730 --> 00:18:11,630
Jag var tvungen att sträcka bilderna för att matcha
widescreen projektor.

357
00:18:11,630 --> 00:18:14,750
Men jag skulle nu vilja tala om
hur man gör fungerar.

358
00:18:14,750 --> 00:18:17,410
I C, måste vi deklarera
varje funktion.

359
00:18:17,410 --> 00:18:22,130
Liksom int add, och det tar en int i
x, och en int y, och sedan lägger vi dem

360
00:18:22,130 --> 00:18:23,100
och lämna tillbaka den.

361
00:18:23,100 --> 00:18:26,850
>> I JavaScript, fungerar faktiskt
annan variabel typ.

362
00:18:26,850 --> 00:18:30,560
Så vi bara säga var lägga till, och
det motsvarar en funktion.

363
00:18:30,560 --> 00:18:32,580
En funktion som tar en x-och en y.

364
00:18:32,580 --> 00:18:33,790
Och vad gör den funktionen gör?

365
00:18:33,790 --> 00:18:39,910
Den returnerar x plus y i exakt samma
syntax som i C. Och du märker att i

366
00:18:39,910 --> 00:18:44,290
JavaScript, kommer du inte få veta vad det
returnerar eftersom det sedan

367
00:18:44,290 --> 00:18:49,160
variabler inte har typer ändå, det
det är inte riktigt produktiv, gissar jag,

368
00:18:49,160 --> 00:18:52,855
att ange alla dina
typer i dina funktioner.

369
00:18:52,855 --> 00:18:55,720

370
00:18:55,720 --> 00:18:59,565
Och sedan när du ringer en funktion, det är
exakt samma syntax som C. Du

371
00:18:59,565 --> 00:19:03,610
bara passera i dina två argument.

372
00:19:03,610 --> 00:19:07,330
Jag skulle vilja prova det här i min nod.

373
00:19:07,330 --> 00:19:09,284
Kan jag ändra bilden?

374
00:19:09,284 --> 00:19:10,534
>> PUBLIK: [OHÖRBAR].

375
00:19:10,534 --> 00:19:14,639

376
00:19:14,639 --> 00:19:17,000
Kommer vi att få en kopia av bilderna?

377
00:19:17,000 --> 00:19:18,250
>> ROGER ZURAWICKI: Ja.

378
00:19:18,250 --> 00:19:28,280

379
00:19:28,280 --> 00:19:29,956
Så låt oss gå tillbaka till noden.

380
00:19:29,956 --> 00:19:32,240
OK.

381
00:19:32,240 --> 00:19:38,160
Så jag ska säga var add lika funktion.

382
00:19:38,160 --> 00:19:40,650
Att ta ett x, ta en y.

383
00:19:40,650 --> 00:19:43,690
Och då den vet att uttalandet är
inte slutförts.

384
00:19:43,690 --> 00:19:47,692
Så i nod eller i konsolen,
du kommer att märka dot dot dot.

385
00:19:47,692 --> 00:19:49,660
Så du kan fortsätta att skriva din kod.

386
00:19:49,660 --> 00:19:53,650
Och nu ska jag säga retur x plus y.

387
00:19:53,650 --> 00:19:54,790
Och stäng sedan stag.

388
00:19:54,790 --> 00:20:00,260
Och så fort jag stänger stag, det
ser att uttalandet är klar.

389
00:20:00,260 --> 00:20:04,730
>> Och nu kan jag säga att lägga till ett och två.

390
00:20:04,730 --> 00:20:08,280
Och jag får tre ut.

391
00:20:08,280 --> 00:20:11,545
Observera att om jag bara fick lägga till, det
säger mig att det är en funktion.

392
00:20:11,545 --> 00:20:14,630

393
00:20:14,630 --> 00:20:19,570
Och en sak bara för att uppmärksamma
är om du ger det fel antal

394
00:20:19,570 --> 00:20:23,380
argument, kommer det att göra.

395
00:20:23,380 --> 00:20:25,890
Det kommer att köras, men du kan få
några riktigt konstiga resultat.

396
00:20:25,890 --> 00:20:30,070
Ungefär som ett skräp värde,
du kan tänka på det.

397
00:20:30,070 --> 00:20:32,060
Så gå vidare och prova
detta i din webbläsare.

398
00:20:32,060 --> 00:21:25,180

399
00:21:25,180 --> 00:21:29,510
>> OK, så i intressera av tiden kommer jag
nu gå vidare till nästa drag i

400
00:21:29,510 --> 00:21:30,760
JavaScript.

401
00:21:30,760 --> 00:21:36,520

402
00:21:36,520 --> 00:21:38,400
Så vi har pratat om funktioner.

403
00:21:38,400 --> 00:21:40,840
Vi har pratat om loopar,
if satser också.

404
00:21:40,840 --> 00:21:43,660
Syntaxen är densamma
såsom C och variabler.

405
00:21:43,660 --> 00:21:46,090
Och nu vill jag prata om arrayer.

406
00:21:46,090 --> 00:21:48,520
Jag är ledsen att bilderna
fick lite avskurna.

407
00:21:48,520 --> 00:21:52,470
Men i själva verket, i det första avsnittet,
allt du behöver för att fungera.

408
00:21:52,470 --> 00:21:55,410
>> Så vi har en annan typ av
variabler kallade matriser.

409
00:21:55,410 --> 00:21:57,930
Och vi använder hakparenteser
för att beteckna dem.

410
00:21:57,930 --> 00:22:01,960
Så i det första exemplet,
var arr, tom array.

411
00:22:01,960 --> 00:22:05,900
Detta är den tomma listan, så en matris
innehåller inga element.

412
00:22:05,900 --> 00:22:09,770
Och du kan också ha en matris
med tre strängar.

413
00:22:09,770 --> 00:22:13,290
I C, varje element i arrayen
tvungen att vara av samma typ.

414
00:22:13,290 --> 00:22:16,940
>> Men eftersom det i JavaScript finns det bara
en typ, arrayer kan faktiskt

415
00:22:16,940 --> 00:22:18,510
har olika typer av värden.

416
00:22:18,510 --> 00:22:22,220
Som här, har vi en matris med
en flottör, en bool, och en int.

417
00:22:22,220 --> 00:22:25,020

418
00:22:25,020 --> 00:22:28,510
Sättet du får en längd av en matris,
du egentligen inte behöver använda storlek

419
00:22:28,510 --> 00:22:29,030
eller vad som helst.

420
00:22:29,030 --> 00:22:31,570
Du säger bara matris och
sedan dot längd.

421
00:22:31,570 --> 00:22:36,450
Och denna punktlängd, kan du tänka på
det ungefär som en struct, hur varje

422
00:22:36,450 --> 00:22:40,890
array har ett fält, en extra variabel
insidan av det som kallas längd, vilken

423
00:22:40,890 --> 00:22:42,910
håller reda på hur länge din array är.

424
00:22:42,910 --> 00:22:47,280

425
00:22:47,280 --> 00:22:50,420
>> Så jag bara snabbt gå in på
nod och visa er samma sak.

426
00:22:50,420 --> 00:22:55,860

427
00:22:55,860 --> 00:22:58,050
Så jag kan ha en matris.

428
00:22:58,050 --> 00:23:00,280
Det kan vara den tomma listan.

429
00:23:00,280 --> 00:23:02,030
Och det kommer att skrivas ut mig
tillbaka en tom lista.

430
00:23:02,030 --> 00:23:02,530
Bra.

431
00:23:02,530 --> 00:23:08,560
Jag kan nu säga att matrisen
har 1 och 2,3, och sann.

432
00:23:08,560 --> 00:23:10,400
Så alla olika typer.

433
00:23:10,400 --> 00:23:11,740
Och du märker att det fungerar alldeles utmärkt.

434
00:23:11,740 --> 00:23:16,330
Matrisen jag får tillbaka stöd
alla värden jag gav det.

435
00:23:16,330 --> 00:23:20,440
>> Om jag ville få den första delen av
arrayen, är syntaxen faktiskt

436
00:23:20,440 --> 00:23:22,980
samma som i C. Du
kan säga array noll.

437
00:23:22,980 --> 00:23:24,430
Och du får en.

438
00:23:24,430 --> 00:23:27,920
Jag kan säga samma sak om matrisen
två, och jag blir sann.

439
00:23:27,920 --> 00:23:31,610
Om jag gör något utanför arrayen,
JavaScript är ett säkert språk

440
00:23:31,610 --> 00:23:33,390
eftersom jag inte kommer att få en seg fel.

441
00:23:33,390 --> 00:23:34,780
Jag ska få odefinierad.

442
00:23:34,780 --> 00:23:37,510
>> Och detta odefinierade kan du snäll
av tänka på det som null.

443
00:23:37,510 --> 00:23:41,390
Men det kan vara riktigt irriterande när du
kod eftersom du måste kontrollera att

444
00:23:41,390 --> 00:23:43,880
nästan allt du gör, du
arbetar med är odefinierad.

445
00:23:43,880 --> 00:23:47,700
Och vi får se några exempel på
detta när vi arbetar i Meteor.

446
00:23:47,700 --> 00:23:50,600
>> Även array fyra är odefinierad,
Jag kan tilldela den ett värde.

447
00:23:50,600 --> 00:23:52,570
Så jag säger det är lika med ett.

448
00:23:52,570 --> 00:23:57,050
Och sedan om jag går till array, jag
har extra värde där.

449
00:23:57,050 --> 00:24:02,470
Och märker att array tre, vilket också
var odefinierad, förblir odefinierad.

450
00:24:02,470 --> 00:24:05,690
Så jag har nu en array med
ett hål i mitten.

451
00:24:05,690 --> 00:24:07,750
Men om jag tryckt array fyra,
Jag skulle få en.

452
00:24:07,750 --> 00:24:10,960
Om jag gjorde array tre, jag blir odefinierad.

453
00:24:10,960 --> 00:24:13,880
>> Så trevlig funktion att JavaScript
gör att du kan göra är att listorna kan

454
00:24:13,880 --> 00:24:15,620
ändra storlek.

455
00:24:15,620 --> 00:24:18,520
Matriser, matriser är listor,
de ändrar storlek.

456
00:24:18,520 --> 00:24:22,480
Och du kan ange vilken plats som helst
inne i dem.

457
00:24:22,480 --> 00:24:25,370
Och alla luckorna kommer att fyllas
med dessa odefinierade värden.

458
00:24:25,370 --> 00:24:31,560

459
00:24:31,560 --> 00:24:33,450
>> Så vi har pratat om matriser.

460
00:24:33,450 --> 00:24:37,050
Nu, det sista jag vill täcka in
JavaScript, och detta är mycket viktigt

461
00:24:37,050 --> 00:24:39,550
till att förstå den kod som
Jag ska visa dig,

462
00:24:39,550 --> 00:24:41,530
kommer att bli föremål.

463
00:24:41,530 --> 00:24:45,140
Och föremål är en term i -

464
00:24:45,140 --> 00:24:47,380
i grund och botten är de närvarande i
många programmeringsspråk.

465
00:24:47,380 --> 00:24:50,620
Och varje programmeringsspråk gillar att
tänka på dem lite annorlunda.

466
00:24:50,620 --> 00:24:55,050
>> Men jag tror att för Meteor, en bra
Analogt är C strukt.

467
00:24:55,050 --> 00:24:59,410
I C, om vi vill hitta struct
student, skulle vi behöva ange alla de

468
00:24:59,410 --> 00:25:00,240
saker i den.

469
00:25:00,240 --> 00:25:01,440
Så det måste ha ett namn.

470
00:25:01,440 --> 00:25:02,140
Det måste ha ett år.

471
00:25:02,140 --> 00:25:03,650
Det måste ha ett kön.

472
00:25:03,650 --> 00:25:07,350
Men vi måste också ge den
typer av alla dessa saker.

473
00:25:07,350 --> 00:25:11,200
>> Och nu när vi har den här formen för
struct kallas elev, kan vi få en

474
00:25:11,200 --> 00:25:14,640
ny struct, och då kan vi manuellt
säga vad var och en av fälten är.

475
00:25:14,640 --> 00:25:17,740
Och det är där vi använder punktnamn,
dot år, dot kön.

476
00:25:17,740 --> 00:25:21,930
Och då är vi bara i den sista raden i
koden här, jag bara skriva ut

477
00:25:21,930 --> 00:25:24,980
namnet på den struct student.

478
00:25:24,980 --> 00:25:28,220
>> I JavaScript-världen, det finns
något sådant som struct student.

479
00:25:28,220 --> 00:25:30,660
Du behöver inte skapa en förinställd struktur.

480
00:25:30,660 --> 00:25:34,680
Du faktiskt bara, i dessa konsoler,
du säger vad allting är.

481
00:25:34,680 --> 00:25:40,680
Och det är denna konstiga notation med
kolon och sedan komma, men du kommer

482
00:25:40,680 --> 00:25:41,810
vänjer sig snart nog.

483
00:25:41,810 --> 00:25:44,930
>> Och det är faktiskt ett riktigt enkelt,
flexibelt sätt för att bara

484
00:25:44,930 --> 00:25:47,400
manipulera objekt.

485
00:25:47,400 --> 00:25:51,270
Du märker att om jag vill nu få
namn från s, jag gör bara s.name.

486
00:25:51,270 --> 00:25:54,090

487
00:25:54,090 --> 00:25:56,790
Finns det några frågor om det här?

488
00:25:56,790 --> 00:26:00,260
Denna regel har varit ett mycket förvirrande
ämne när vi introducera människor till

489
00:26:00,260 --> 00:26:02,280
JavaScript.

490
00:26:02,280 --> 00:26:04,110
Jag ska göra några exempel på detta i noden.

491
00:26:04,110 --> 00:26:05,010
Ja?

492
00:26:05,010 --> 00:26:06,260
>> PUBLIK: [OHÖRBAR].

493
00:26:06,260 --> 00:26:14,130

494
00:26:14,130 --> 00:26:16,230
>> ROGER ZURAWICKI: Så gör du
har ett exempel, multipel

495
00:26:16,230 --> 00:26:18,764
variabler av denna typ.

496
00:26:18,764 --> 00:26:20,014
>> PUBLIK: [OHÖRBAR].

497
00:26:20,014 --> 00:26:23,540

498
00:26:23,540 --> 00:26:24,790
>> PUBLIK: [OHÖRBAR].

499
00:26:24,790 --> 00:26:37,610

500
00:26:37,610 --> 00:26:39,450
>> ROGER ZURAWICKI: OK.

501
00:26:39,450 --> 00:26:43,760
Så jag antar att det sätt du skulle gå tillväga är
du skulle sätta objekten i en matris,

502
00:26:43,760 --> 00:26:45,340
och nu har du en
array med objekt.

503
00:26:45,340 --> 00:26:47,547
Besvarar det din fråga?

504
00:26:47,547 --> 00:26:48,797
>> PUBLIK: [OHÖRBAR].

505
00:26:48,797 --> 00:26:50,890

506
00:26:50,890 --> 00:26:51,260
>> ROGER ZURAWICKI: Ja.

507
00:26:51,260 --> 00:26:52,430
S är ett objekt.

508
00:26:52,430 --> 00:26:57,455
Så vi kan gå in i nod och bara
leka lite.

509
00:26:57,455 --> 00:26:58,705
>> PUBLIK: [OHÖRBAR]?

510
00:26:58,705 --> 00:27:04,880

511
00:27:04,880 --> 00:27:05,440
>> ROGER ZURAWICKI: Åh, OK.

512
00:27:05,440 --> 00:27:10,660
Så om du frågar vilka klasser,
klasser behandlas mycket olika,

513
00:27:10,660 --> 00:27:14,510
och de har en riktigt konstig ordning
kallas prototyper, som du inte

514
00:27:14,510 --> 00:27:15,620
behöver veta om.

515
00:27:15,620 --> 00:27:17,910
Det finns ingen fast sätt att göra det.

516
00:27:17,910 --> 00:27:21,160
Så om du vill skapa flera, du
skulle liksom bara har en funktion

517
00:27:21,160 --> 00:27:22,100
eller något.

518
00:27:22,100 --> 00:27:24,340
Du skapar din egen funktion.

519
00:27:24,340 --> 00:27:26,765
Och du skulle returnera ett objekt.

520
00:27:26,765 --> 00:27:29,550
Det skulle vara det enklaste
sätt att göra det.

521
00:27:29,550 --> 00:27:32,454
Låter det vettigt?

522
00:27:32,454 --> 00:27:33,704
OK.

523
00:27:33,704 --> 00:27:36,182

524
00:27:36,182 --> 00:27:36,650
Bra.

525
00:27:36,650 --> 00:27:39,820
Så när vi har en förståelse för
JavaScript-objekt, de är -

526
00:27:39,820 --> 00:27:41,082
oh, ja.

527
00:27:41,082 --> 00:27:42,026
>> PUBLIK: [OHÖRBAR]

528
00:27:42,026 --> 00:27:45,802
exempel, vad är skillnaden mellan
"Roger" med citattecken kontra

529
00:27:45,802 --> 00:27:47,510
[OHÖRBAR] med enkla citattecken.

530
00:27:47,510 --> 00:27:47,810
>> ROGER ZURAWICKI: OK.

531
00:27:47,810 --> 00:27:52,730
Så det här är i C, har vi den enda
citat som representerar tecken och dubbel

532
00:27:52,730 --> 00:27:54,550
citationstecken representerande strängar.

533
00:27:54,550 --> 00:27:57,920
JavaScript faktiskt kastar denna bort
eftersom du kan ha strängar med

534
00:27:57,920 --> 00:28:01,570
enkla eller dubbla citattecken, och det finns
något sådant som en enda röding.

535
00:28:01,570 --> 00:28:04,400
Men om du bara kopierat samma
C-kod, JavaScript skulle

536
00:28:04,400 --> 00:28:05,610
behandla det bara bra.

537
00:28:05,610 --> 00:28:07,710
Det är därför jag behandlade det som -

538
00:28:07,710 --> 00:28:12,540
det är därför jag kan bokstavligen port
koden i det avseendet.

539
00:28:12,540 --> 00:28:15,420
>> Och jag vill visa dig ett exempel
av ett mer komplicerat föremål.

540
00:28:15,420 --> 00:28:19,890
Så du kan märka att ett objekt
kan ha strängar som värden.

541
00:28:19,890 --> 00:28:21,530
Det kan ha en annan lista med värden.

542
00:28:21,530 --> 00:28:23,820
Det skulle kunna ha en lista på
objekt som värden.

543
00:28:23,820 --> 00:28:25,870
Det finns egentligen ingen gräns för detta.

544
00:28:25,870 --> 00:28:29,070
Så här är det bara en bra demonstration
om hur du kan få en hel del

545
00:28:29,070 --> 00:28:33,290
olika typer som pågår
allt i ett objekt.

546
00:28:33,290 --> 00:28:34,540
Är detta vettigt?

547
00:28:34,540 --> 00:28:41,090

548
00:28:41,090 --> 00:28:44,700
>> Nu kan du också ha
arrayer av objekt.

549
00:28:44,700 --> 00:28:48,530
Och här är slags liknar vad du
frågade, om du kan få föremål av

550
00:28:48,530 --> 00:28:49,190
samma typ.

551
00:28:49,190 --> 00:28:52,960
Men problemet är, det finns ingen fast
format för objekt i JavaScript.

552
00:28:52,960 --> 00:28:55,020
Så du måste ange dem själv.

553
00:28:55,020 --> 00:28:57,600
Och du måste se
att de är enhetliga.

554
00:28:57,600 --> 00:29:00,410
Så här, när jag skapar ett objekt, har jag
att se till att var och en har en

555
00:29:00,410 --> 00:29:01,910
namn, och var och en har ett hus.

556
00:29:01,910 --> 00:29:05,620
>> Och då har jag en rad av dem,
och det kan vara min stuga.

557
00:29:05,620 --> 00:29:08,290
Och så här kan du slags
se för loopen pågår.

558
00:29:08,290 --> 00:29:14,090
Den för slingan är bara en riktigt vanlig
sätt att färdas över en matris

559
00:29:14,090 --> 00:29:15,150
i JavaScript.

560
00:29:15,150 --> 00:29:18,010
Lägg märke till att detta mönster är mycket likt
till C motsvarande, där man

561
00:29:18,010 --> 00:29:21,470
har int i lika med noll. Jag
är mindre än längden.

562
00:29:21,470 --> 00:29:23,634
Och då jag plus plus.

563
00:29:23,634 --> 00:29:26,035
>> Det är nästan samma kod,
med undantag för några detaljer.

564
00:29:26,035 --> 00:29:29,460

565
00:29:29,460 --> 00:29:33,120
Så gör alla förstår
vad ett objekt är?

566
00:29:33,120 --> 00:29:35,820
Tänk på det som ett C-struct.

567
00:29:35,820 --> 00:29:38,784
Och sättet du kommer åt fälten
är bara med pricken.

568
00:29:38,784 --> 00:29:41,950
Och så länge du kommer ihåg hur man
använda punkt, kommer du att fina.

569
00:29:41,950 --> 00:29:55,300

570
00:29:55,300 --> 00:29:58,790
>> OK, så nu kan alla
Läs den länken?

571
00:29:58,790 --> 00:30:02,220
Här är länken till projektet.

572
00:30:02,220 --> 00:30:04,950
Är det någon som har problem
se länken?

573
00:30:04,950 --> 00:30:06,251
OK, låt oss ändra det då.

574
00:30:06,251 --> 00:30:14,430

575
00:30:14,430 --> 00:30:15,680
Det är inte -

576
00:30:15,680 --> 00:30:21,900

577
00:30:21,900 --> 00:30:24,240
Ja, det är nog det
enklaste sättet att göra det.

578
00:30:24,240 --> 00:30:32,390

579
00:30:32,390 --> 00:30:34,560
Bra.

580
00:30:34,560 --> 00:30:38,270
>> Så om du går till denna plats, det bör
finnas vissa instruktioner som jag ska

581
00:30:38,270 --> 00:30:42,550
gå över på hur vi kan installera Meteor
och få vår exempelprojekt igång.

582
00:30:42,550 --> 00:30:47,900

583
00:30:47,900 --> 00:30:50,180
Jag vill se till att alla har
länken ner innan jag flyttar.

584
00:30:50,180 --> 00:31:16,250

585
00:31:16,250 --> 00:31:17,500
Kan jag gå vidare?

586
00:31:17,500 --> 00:31:20,683

587
00:31:20,683 --> 00:31:23,680
OK, bra.

588
00:31:23,680 --> 00:31:25,890
>> Så här är jag på webbplatsen.

589
00:31:25,890 --> 00:31:28,740
Du kommer att märka i readme-filen,
vi har några instruktioner om hur

590
00:31:28,740 --> 00:31:30,200
för att få e inrättas.

591
00:31:30,200 --> 00:31:33,920
Du måste vara antingen i CS50
apparat eller bara på en Mac.

592
00:31:33,920 --> 00:31:35,330
Windows kommer inte att fungera.

593
00:31:35,330 --> 00:31:37,760
Men i stort sett allt som inte är
Windows bör arbeta med dessa

594
00:31:37,760 --> 00:31:39,820
instruktioner bara bra.

595
00:31:39,820 --> 00:31:41,470
Men jag kan göra det lite
större också.

596
00:31:41,470 --> 00:31:45,610

597
00:31:45,610 --> 00:31:48,820
>> Så du ska köra det första
par kommandon.

598
00:31:48,820 --> 00:31:50,450
Dessa killar kommer bara installera Meteor.

599
00:31:50,450 --> 00:31:54,870

600
00:31:54,870 --> 00:31:58,530
Jag kan gå in i min terminal.

601
00:31:58,530 --> 00:32:02,710
Och om jag kör samma sak nu,
Jag har redan det installerat.

602
00:32:02,710 --> 00:32:03,710
Så det är lite kortare.

603
00:32:03,710 --> 00:32:05,155
Det kan ta lite längre tid
för er.

604
00:32:05,155 --> 00:32:08,160

605
00:32:08,160 --> 00:32:13,530
Men jag vill först se
att vi har Meteor igång.

606
00:32:13,530 --> 00:32:16,780
Efter Meteor har installerat, bör du
kunna få nod i konsolen.

607
00:32:16,780 --> 00:32:19,430
>> PUBLIK: De frågar
om ett lösenord.

608
00:32:19,430 --> 00:32:22,110
>> ROGER ZURAWICKI: Det skulle vara din
användarens lösenord, om du är på en Mac.

609
00:32:22,110 --> 00:32:27,030
Det behöver bara tillstånd att
ändra vissa systemfiler.

610
00:32:27,030 --> 00:32:30,690
Så frågan var, om den ber dig om
ett lösenord, det är bara att fråga dig

611
00:32:30,690 --> 00:32:33,510
för ditt användarnamn lösenord när
du loggar in på din Mac.

612
00:32:33,510 --> 00:32:35,770
Och det är så att du kan
ändra systemfiler.

613
00:32:35,770 --> 00:32:46,670

614
00:32:46,670 --> 00:32:51,260
>> Och när du är klar, kan du gå vidare
till nästa steg, vilket kommer att kopiera

615
00:32:51,260 --> 00:32:54,220
exempelkod jag har från webbplatsen.

616
00:32:54,220 --> 00:32:58,330
Och du får en ny katalog i din
hemkatalog kallas leaderboard, och

617
00:32:58,330 --> 00:32:59,670
vi kan börja arbeta därifrån.

618
00:32:59,670 --> 00:33:09,680

619
00:33:09,680 --> 00:33:14,620
Så jag bara kopiera och klistra in dessa
kommandon i min terminal.

620
00:33:14,620 --> 00:33:16,780
Och för mig, jag redan klonat det.

621
00:33:16,780 --> 00:33:21,470
Så jag kan bara nu flytta
i leaderboard.

622
00:33:21,470 --> 00:33:23,450
Och jag skulle ha några
filer i det.

623
00:33:23,450 --> 00:33:29,880

624
00:33:29,880 --> 00:33:31,113
Några frågor?

625
00:33:31,113 --> 00:33:34,430
>> PUBLIK: [OHÖRBAR] fungerar inte.

626
00:33:34,430 --> 00:33:36,741
>> ROGER ZURAWICKI: Åh, kanske du
behöver git installeras också.

627
00:33:36,741 --> 00:33:39,150
>> PUBLIK: [OHÖRBAR].

628
00:33:39,150 --> 00:33:40,162
>> ROGER ZURAWICKI: Förlåt?

629
00:33:40,162 --> 00:33:41,412
>> PUBLIK: [OHÖRBAR].

630
00:33:41,412 --> 00:33:44,500

631
00:33:44,500 --> 00:33:47,390
>> ROGER ZURAWICKI: Åh, OK.

632
00:33:47,390 --> 00:33:47,720
OK.

633
00:33:47,720 --> 00:33:52,860
Det beror på att du kan behöva vara
inloggad på GitHub för att få den här länken.

634
00:33:52,860 --> 00:33:58,160
Om ni kan se det, det enklaste
sätt att göra det skulle jag då säga är

635
00:33:58,160 --> 00:33:59,270
ladda ner zip.

636
00:33:59,270 --> 00:34:02,010
Och det kommer bara ladda ner
alla filer.

637
00:34:02,010 --> 00:34:05,510
Och sedan när du sätter den i ditt
ladda ner eller din hemkatalog -

638
00:34:05,510 --> 00:34:07,360
Jag rekommenderar att sätta den i ditt
hemkatalog så kan vi alla

639
00:34:07,360 --> 00:34:09,210
köra samma kommandon.

640
00:34:09,210 --> 00:34:15,230
Så länge vi har filerna, kommer vi
kunna börja arbeta med dem.

641
00:34:15,230 --> 00:34:17,969
Låt mig veta om människor har
problem med att hämta filerna.

642
00:34:17,969 --> 00:34:21,040
>> PUBLIK: Genom hemkatalog,
du menar -

643
00:34:21,040 --> 00:34:24,989
>> ROGER ZURAWICKI: Så hemkatalog skulle
vara John Harvard, om du är i

644
00:34:24,989 --> 00:34:27,460
den CS50 apparaten.

645
00:34:27,460 --> 00:34:33,651
För att komma till din hemkatalog,
skriv bara in C.

646
00:34:33,651 --> 00:34:34,145
>> PUBLIK: [OHÖRBAR]

647
00:34:34,145 --> 00:34:37,610
CS50 apparaten [OHÖRBAR].

648
00:34:37,610 --> 00:34:38,650
>> ROGER ZURAWICKI: Ja.

649
00:34:38,650 --> 00:34:40,480
Du vill köra kommandona
i din terminal.

650
00:34:40,480 --> 00:34:44,899

651
00:34:44,899 --> 00:34:45,390
>> PUBLIK: [OHÖRBAR].

652
00:34:45,390 --> 00:34:50,800
Jag fick ett felmeddelande som säger nej
sådan fil eller katalog.

653
00:34:50,800 --> 00:34:52,739
>> ROGER ZURAWICKI: Vi kan ta en snabb
sönder och bara se till att

654
00:34:52,739 --> 00:34:56,760
alla har Meteor installerat, och jag ska
bara gå försöka hjälpa folk ut.

655
00:34:56,760 --> 00:34:59,130
Försök att hjälpa varandra om
du springer på problem.

656
00:34:59,130 --> 00:35:04,640

657
00:35:04,640 --> 00:35:05,580
Tyvärr, ja.

658
00:35:05,580 --> 00:35:08,930
Är du både i apparaten?

659
00:35:08,930 --> 00:35:09,350
>> PUBLIK: Ja.

660
00:35:09,350 --> 00:35:13,190
Jag har RISA

661
00:35:13,190 --> 00:35:14,300
>> ROGER ZURAWICKI: OK.

662
00:35:14,300 --> 00:35:20,740
Om du går tillbaka till webbplatsen,
gå rulla upp till toppen.

663
00:35:20,740 --> 00:35:23,580
Och det är det här HTTPS.

664
00:35:23,580 --> 00:35:25,810
>> PUBLIK: Kopiera denna?

665
00:35:25,810 --> 00:35:26,230
>> ROGER ZURAWICKI: Ja.

666
00:35:26,230 --> 00:35:28,950
Och då du vill
Skriv in git clone.

667
00:35:28,950 --> 00:35:30,814
Så om du trycker på Kontroll A -

668
00:35:30,814 --> 00:35:33,718
>> PUBLIK: Här?

669
00:35:33,718 --> 00:35:36,410
Och göra [OHÖRBAR]?

670
00:35:36,410 --> 00:35:37,307
>> ROGER ZURAWICKI: G-I-T.

671
00:35:37,307 --> 00:35:38,557
>> PUBLIK: [OHÖRBAR].

672
00:35:38,557 --> 00:35:40,410

673
00:35:40,410 --> 00:35:42,670
>> ROGER ZURAWICKI: Git och sedan klona.

674
00:35:42,670 --> 00:35:46,610
Så det är mycket likt det kommando du
hade ovan, men webbadressen ändras.

675
00:35:46,610 --> 00:35:49,010
Så innan det var det, nu är det här.

676
00:35:49,010 --> 00:35:50,680
Låt mig uppdatera -

677
00:35:50,680 --> 00:35:51,354
ja.

678
00:35:51,354 --> 00:35:52,604
>> PUBLIK: [OHÖRBAR].

679
00:35:52,604 --> 00:35:56,000

680
00:35:56,000 --> 00:35:58,076
>> ROGER ZURAWICKI: Detta är nedladdad.

681
00:35:58,076 --> 00:35:59,326
>> PUBLIK: [OHÖRBAR].

682
00:35:59,326 --> 00:36:02,930

683
00:36:02,930 --> 00:36:05,690
>> ROGER ZURAWICKI: Åh, så det
inte klona korrekt.

684
00:36:05,690 --> 00:36:07,920
Jag kommer att fixa det.

685
00:36:07,920 --> 00:36:10,190
Det finns ett fel med att försöka
för att ladda ner filerna.

686
00:36:10,190 --> 00:36:13,820
Låt mig uppdatera kommandot för er
så jag kan se till att det kommer att fungera.

687
00:36:13,820 --> 00:36:17,025
Jag är ledsen för det.

688
00:36:17,025 --> 00:36:21,618
Det bör vara densamma för
Mac eller CS50 apparaten.

689
00:36:21,618 --> 00:36:22,868
>> PUBLIK: [OHÖRBAR].

690
00:36:22,868 --> 00:36:49,320

691
00:36:49,320 --> 00:36:51,190
>> ROGER ZURAWICKI: Jag har uppdaterat
kommando för nummer två, om

692
00:36:51,190 --> 00:36:52,910
du uppdatera sidan.

693
00:36:52,910 --> 00:36:56,520
Och med detta, URL, bör du vara
kunna ladda ner filerna.

694
00:36:56,520 --> 00:37:00,162

695
00:37:00,162 --> 00:37:02,550
>> PUBLIK: Så om vi fortfarande
nedladdning [OHÖRBAR].

696
00:37:02,550 --> 00:37:05,930
>> ROGER ZURAWICKI: Om du är
fortfarande ladda ner Meteor?

697
00:37:05,930 --> 00:37:07,180
>> PUBLIK: [OHÖRBAR].

698
00:37:07,180 --> 00:37:09,860

699
00:37:09,860 --> 00:37:11,910
>> ROGER ZURAWICKI: Ja, om du vill
att utvecklas på din Mac.

700
00:37:11,910 --> 00:37:14,145
Men du behöver Xcode utvecklare
verktyg installerade.

701
00:37:14,145 --> 00:37:21,530

702
00:37:21,530 --> 00:37:24,550
Jag har testat dessa kommandon på CS50
apparat, så jag kan garantera

703
00:37:24,550 --> 00:37:25,440
att det kommer att fungera.

704
00:37:25,440 --> 00:37:26,710
Ja. låt mig gå och hjälpa dig.

705
00:37:26,710 --> 00:37:30,558

706
00:37:30,558 --> 00:37:31,808
>> PUBLIK: [OHÖRBAR].

707
00:37:31,808 --> 00:37:39,440

708
00:37:39,440 --> 00:37:40,372
Jag ger mitt lösenord.

709
00:37:40,372 --> 00:37:42,240
Det här är Mac.

710
00:37:42,240 --> 00:37:43,490
Och då gör jag [OHÖRBAR].

711
00:37:43,490 --> 00:37:51,114

712
00:37:51,114 --> 00:37:52,580
>> ROGER ZURAWICKI: OK.

713
00:37:52,580 --> 00:37:57,080
Jag skulle prova att köra alla kommandon
enbart i CS50 apparaten terminalen.

714
00:37:57,080 --> 00:37:58,330
>> PUBLIK: [OHÖRBAR].

715
00:37:58,330 --> 00:38:00,220

716
00:38:00,220 --> 00:38:02,570
>> ROGER ZURAWICKI: Jag skulle få det att fungera
först på terminalen, å

717
00:38:02,570 --> 00:38:04,830
CS50 apparat, och sedan
Mac-terminalen.

718
00:38:04,830 --> 00:38:08,130
>> PUBLIK: Så om du gör det på CS50
apparater som att [OHÖRBAR].

719
00:38:08,130 --> 00:38:13,650

720
00:38:13,650 --> 00:38:15,850
>> ROGER ZURAWICKI: Jag vill flytta
på, men om folk fortfarande har

721
00:38:15,850 --> 00:38:20,190
problem med att konfigurera Meteor, är Kevin mer
än gärna hjälpa er ut,

722
00:38:20,190 --> 00:38:21,440
Kevin i grå skjorta.

723
00:38:21,440 --> 00:38:26,320

724
00:38:26,320 --> 00:38:32,170
Vad vi borde ha är att vi kommer att
kör det sista kommandot, nummer tre, i

725
00:38:32,170 --> 00:38:33,710
vår terminal.

726
00:38:33,710 --> 00:38:37,320
När vi gör det kommer vi att köra Meteor.

727
00:38:37,320 --> 00:38:39,040
>> Och du borde -

728
00:38:39,040 --> 00:38:41,200
åh, jag har redan Meteor igång.

729
00:38:41,200 --> 00:38:45,230
Så det kommer inte att låta - låt mig
bara avsluta min andra Meteor.

730
00:38:45,230 --> 00:38:49,640
När jag kör Meteor, du
bör nu se till att -

731
00:38:49,640 --> 00:38:51,490
du bör se den aktuella katalogen
att det är servering.

732
00:38:51,490 --> 00:38:55,476
Och nu det kommer att säga servern
körs på http://localhost.

733
00:38:55,476 --> 00:38:58,860
Det är den webbadress som du vill lägga
in i din webbläsare.

734
00:38:58,860 --> 00:39:05,410
>> Och på den adressen, ska du kunna
tillgång till en fin liten leaderboard.

735
00:39:05,410 --> 00:39:10,030

736
00:39:10,030 --> 00:39:14,530
Så märker att det här är på localhost,
vilket innebär att om du gör något

737
00:39:14,530 --> 00:39:17,320
förändringar, du kommer inte att
se varandras ändringar.

738
00:39:17,320 --> 00:39:20,830
Med beaktande av följande på webbplatsen jag visade dig
i början, skulle vi kunna få

739
00:39:20,830 --> 00:39:23,380
allas ändringar eftersom alla
hade tillgång till samma webbplats.

740
00:39:23,380 --> 00:39:27,010

741
00:39:27,010 --> 00:39:29,540
>> Så låt mig bara gå till [? ord?]

742
00:39:29,540 --> 00:39:35,570
3000.

743
00:39:35,570 --> 00:39:38,820
Så du bör kunna bara bekräfta
att funktionaliteten fungerar.

744
00:39:38,820 --> 00:39:44,790
Du kan välja olika människor, och
du kan ge dem olika punkter.

745
00:39:44,790 --> 00:39:46,710
Så jag ge någon poäng.

746
00:39:46,710 --> 00:39:50,420
Du kan också se att
de stiger i rang.

747
00:39:50,420 --> 00:39:53,450

748
00:39:53,450 --> 00:39:57,360
>> Nu, i intresse av tiden, det
finns tre funktioner som jag har

749
00:39:57,360 --> 00:39:58,020
genomföras.

750
00:39:58,020 --> 00:40:03,760
Och vi kommer att genomföra rader
användare som vår första långfilm.

751
00:40:03,760 --> 00:40:06,360
Men innan vi går vidare, är
Några frågor?

752
00:40:06,360 --> 00:40:09,010
Du hade din hand upp.

753
00:40:09,010 --> 00:40:10,480
Ja?

754
00:40:10,480 --> 00:40:11,730
>> PUBLIK: [OHÖRBAR].

755
00:40:11,730 --> 00:40:20,980

756
00:40:20,980 --> 00:40:22,450
>> ROGER ZURAWICKI: Kan du kontrollera
att Meteor är installerat?

757
00:40:22,450 --> 00:40:25,160

758
00:40:25,160 --> 00:40:26,410
>> PUBLIK: [OHÖRBAR].

759
00:40:26,410 --> 00:40:31,440

760
00:40:31,440 --> 00:40:32,680
>> ROGER ZURAWICKI: Lokal värd 3.000?

761
00:40:32,680 --> 00:40:36,550
Och du är i CS50 apparaten?

762
00:40:36,550 --> 00:40:37,800
Jag kan göra -

763
00:40:37,800 --> 00:40:39,870

764
00:40:39,870 --> 00:40:41,210
du behöver inte vara på en Mac.

765
00:40:41,210 --> 00:40:43,558
Detta kommer att fungera i apparaten.

766
00:40:43,558 --> 00:40:45,880
>> PUBLIK: [OHÖRBAR].

767
00:40:45,880 --> 00:40:47,520
>> ROGER ZURAWICKI: I det normala
webbläsare, ja.

768
00:40:47,520 --> 00:40:49,170
>> PUBLIK: [OHÖRBAR].

769
00:40:49,170 --> 00:40:52,100
>> ROGER ZURAWICKI: Är Meteor igång?

770
00:40:52,100 --> 00:40:54,180
Så OK, det finns en skillnad här.

771
00:40:54,180 --> 00:40:56,300
Om du kör den i
apparat, måste du göra

772
00:40:56,300 --> 00:40:58,400
host inom apparaten.

773
00:40:58,400 --> 00:41:00,860
Om du kör den i din Mac,
som jag är, så jag kan göra

774
00:41:00,860 --> 00:41:02,460
min Mac Google Chrome.

775
00:41:02,460 --> 00:41:05,520
Men om du använder CS50 apparaten,
du måste göra allt

776
00:41:05,520 --> 00:41:06,350
i apparaten.

777
00:41:06,350 --> 00:41:09,022
Så du måste använda Google
Chrome i apparaten.

778
00:41:09,022 --> 00:41:10,350
>> PUBLIK: [OHÖRBAR].

779
00:41:10,350 --> 00:41:12,188
>> ROGER ZURAWICKI: Det är
fortfarande inte fungerar?

780
00:41:12,188 --> 00:41:13,438
>> PUBLIK: [OHÖRBAR].

781
00:41:13,438 --> 00:41:39,170

782
00:41:39,170 --> 00:41:42,390
>> ROGER ZURAWICKI: Så bara för att upprepa,
hur ska du få tillgång till webbplatsen nu.

783
00:41:42,390 --> 00:41:46,380
Du har en webbadress här på
host 3000.

784
00:41:46,380 --> 00:41:49,600
Om du är i CS50 apparaten,
du måste öppna CS50

785
00:41:49,600 --> 00:41:51,320
apparatens Google Chrome.

786
00:41:51,320 --> 00:41:54,850
Och i att Google Chrome inom
apparat, kan du skriva in webbadressen,

787
00:41:54,850 --> 00:41:56,400
och du bör se en leaderboard.

788
00:41:56,400 --> 00:41:58,990

789
00:41:58,990 --> 00:42:04,800
Så jag ska bara skjuta upp det
åt sidan här lite.

790
00:42:04,800 --> 00:42:09,600
Och nu ska jag öppna min
textredigerare hit.

791
00:42:09,600 --> 00:42:16,040
Så låt mig bara se till att
koden är i sin ordning.

792
00:42:16,040 --> 00:42:17,580
OK.

793
00:42:17,580 --> 00:42:19,750
Bra.

794
00:42:19,750 --> 00:42:22,360
>> Jag vill nu gå igenom
koden lite.

795
00:42:22,360 --> 00:42:26,110
Och den första filen jag vill börja
med IS leaderboard.html.

796
00:42:26,110 --> 00:42:31,520
Du kommer att kunna få denna kod efter
seminariet, så jag vill bara visa

797
00:42:31,520 --> 00:42:33,960
dig på min dator vad som händer.

798
00:42:33,960 --> 00:42:39,130

799
00:42:39,130 --> 00:42:40,970
Så jag hoppas att alla kan se det.

800
00:42:40,970 --> 00:42:47,970

801
00:42:47,970 --> 00:42:51,590
Så i början av filen, vi
har vårt huvud och titeln, som

802
00:42:51,590 --> 00:42:54,510
liknar det vi såg
i varje HTML-dokument.

803
00:42:54,510 --> 00:42:56,990
Och då ska vi ha
body-taggen här.

804
00:42:56,990 --> 00:42:59,920
>> Vad jag har valt är den viktigaste
kropp, i princip vad

805
00:42:59,920 --> 00:43:01,470
kommer att få visas.

806
00:43:01,470 --> 00:43:05,560
Men det finns några nya icke-HTML
saker, och det är i

807
00:43:05,560 --> 00:43:06,710
dubbla vinkelfästen.

808
00:43:06,710 --> 00:43:08,600
Och dessa är malltaggar.

809
00:43:08,600 --> 00:43:13,770
Så du ser här denna konsol
fäste nya leaderboard.

810
00:43:13,770 --> 00:43:17,390
Och detta är typ av - tänk på det
som kräver en funktion för HTML.

811
00:43:17,390 --> 00:43:19,320
>> Detta är en speciell version av HTML.

812
00:43:19,320 --> 00:43:22,730
Det är den version som Meteor använder, vilket
är därför du kan visa olika

813
00:43:22,730 --> 00:43:26,190
saker, som leaderboarden
namn och knappar.

814
00:43:26,190 --> 00:43:30,870
Men leader säger till dig att gå till
mall med namnet leaderboard.

815
00:43:30,870 --> 00:43:34,746
Så mallen inte få visas genom
sig själv, men det är en funktion, så det

816
00:43:34,746 --> 00:43:35,390
kommer att få kallas.

817
00:43:35,390 --> 00:43:41,030
Och du kommer att ersätta i allt detta
kod här i leaderboard.

818
00:43:41,030 --> 00:43:44,510

819
00:43:44,510 --> 00:43:48,820
>> Den intressanta delen av ledartavlan
här är just detta bord.

820
00:43:48,820 --> 00:43:52,910
Om du bara läsa den, läsa den här koden
högt bör det vara intuitivt

821
00:43:52,910 --> 00:43:57,390
eftersom leaderboard, allt vi
har här är ett bord.

822
00:43:57,390 --> 00:44:00,410
Detta ID-klass saker du inte
behöver oroa dig.

823
00:44:00,410 --> 00:44:02,460
Vet bara att det finns en tabellrubrik.

824
00:44:02,460 --> 00:44:03,630
Det är här thead.

825
00:44:03,630 --> 00:44:06,860
>> Och den hittar ett namn och en poäng.

826
00:44:06,860 --> 00:44:12,150
Alla dessa taggar, liksom thtable, THEAD,
du ska bara lära dig när du går längs.

827
00:44:12,150 --> 00:44:15,540
Det är inte viktigt att du memorera
dessa eftersom du kan bara komma åt alla

828
00:44:15,540 --> 00:44:16,520
referera till nätet.

829
00:44:16,520 --> 00:44:20,610
Eller i slutet av terminen, dessa
kommer bara att vara mycket bekant med dig.

830
00:44:20,610 --> 00:44:22,840
>> Efter huvudet på bordet, den
del som jag vill fästa er

831
00:44:22,840 --> 00:44:24,900
uppmärksamhet är detta h tagg.

832
00:44:24,900 --> 00:44:27,180
Eftersom det är i dubbla fästen,
Det är en mall.

833
00:44:27,180 --> 00:44:30,980
Så det innebär att för var och en av spelarna,
vad spelarna är, måste vi

834
00:44:30,980 --> 00:44:31,500
visa den.

835
00:44:31,500 --> 00:44:32,965
Och vi går till spelaren mallen.

836
00:44:32,965 --> 00:44:35,680

837
00:44:35,680 --> 00:44:39,890
>> Om vi ​​rulla ner lite mer -

838
00:44:39,890 --> 00:44:40,980
Jag hoppas att alla kan se det.

839
00:44:40,980 --> 00:44:42,900
Vi har spelaren mallen.

840
00:44:42,900 --> 00:44:49,080
Och den här mallen definierar grunden en
tabellcell, där du sätter i namnet

841
00:44:49,080 --> 00:44:50,330
här och poängen.

842
00:44:50,330 --> 00:44:52,540

843
00:44:52,540 --> 00:44:56,720
Att zooma ut nu, kan vi se
att denna bit av kod -

844
00:44:56,720 --> 00:44:59,060
och det var vår spelare där nere -

845
00:44:59,060 --> 00:45:01,070
definierar en av dessa celler.

846
00:45:01,070 --> 00:45:02,890
Varje sak som jag klickar
blir gul.

847
00:45:02,890 --> 00:45:06,690

848
00:45:06,690 --> 00:45:08,660
>> Ett enkelt sätt att jag kunde ändra det nu.

849
00:45:08,660 --> 00:45:10,150
Se till Meteor är fortfarande igång.

850
00:45:10,150 --> 00:45:12,540
Meteor ska vara en server process,
så du bara lämna det

851
00:45:12,540 --> 00:45:14,020
igång när du utvecklas.

852
00:45:14,020 --> 00:45:18,280
Låt oss säga att jag ville ändra
alla namn eller poängen.

853
00:45:18,280 --> 00:45:23,320
Och jag skulle säga att jag ska
att lägga till poäng här.

854
00:45:23,320 --> 00:45:27,215
Så förändringen jag gjorde här var,
istället för att bara poängen, jag

855
00:45:27,215 --> 00:45:30,280
lägga poäng rymdpunkter.

856
00:45:30,280 --> 00:45:32,775
>> Jag kommer att zooma ut, och jag är
kommer att spara min fil.

857
00:45:32,775 --> 00:45:35,510

858
00:45:35,510 --> 00:45:39,830
Och efter jag spara min fil, jag behöver
att se till Meteor körs.

859
00:45:39,830 --> 00:45:55,650

860
00:45:55,650 --> 00:45:57,610
Ledsen för det.

861
00:45:57,610 --> 00:46:00,330
Jag vill visa dig redigeringar
gjordes i realtid.

862
00:46:00,330 --> 00:46:06,180
Så jag ska bara byta lite text.

863
00:46:06,180 --> 00:46:07,600
Klicka på en spelare.

864
00:46:07,600 --> 00:46:10,040
Jag sätter det i versaler.

865
00:46:10,040 --> 00:46:14,540
Och det bör vara att om detta fungerar
ordentligt, när jag sparar det, det

866
00:46:14,540 --> 00:46:16,801
skulle uppdatera.

867
00:46:16,801 --> 00:46:20,420
>> Åh, jag tror att just nu är problemet
Jag är inte i rätt katalog.

868
00:46:20,420 --> 00:46:24,940

869
00:46:24,940 --> 00:46:26,870
OK.

870
00:46:26,870 --> 00:46:28,160
Jag är ledsen för det.

871
00:46:28,160 --> 00:46:32,860
Så här, vad du märker är
min förändring gick igenom.

872
00:46:32,860 --> 00:46:34,540
Nu säger jag vill återställa ändringen.

873
00:46:34,540 --> 00:46:36,200
Jag vill gå tillbaka till det jag hade.

874
00:46:36,200 --> 00:46:37,640
Jag ska bara skriva det normalt.

875
00:46:37,640 --> 00:46:39,180
Klicka på en spelare.

876
00:46:39,180 --> 00:46:42,920
>> I samma ögonblick som jag sparar det,
webbplats uppdateras för mig.

877
00:46:42,920 --> 00:46:44,740
Och jag ser min förändring på
platsen direkt.

878
00:46:44,740 --> 00:46:48,170
Detta är en riktigt användbar funktion
i felsökning för nu

879
00:46:48,170 --> 00:46:49,640
Jag behöver inte -

880
00:46:49,640 --> 00:46:52,920
När vi skriver C-kod, inte bara gjorde vi
måste spara filen, men vi var tvungna att

881
00:46:52,920 --> 00:46:54,750
göra det och sedan köra den igen.

882
00:46:54,750 --> 00:46:58,750
Meteor är mycket trevligt eftersom till skillnad från C,
det ögonblick du spara HTML eller

883
00:46:58,750 --> 00:47:01,070
JavaScript-fil, förändringen
dyker upp omedelbart.

884
00:47:01,070 --> 00:47:05,050

885
00:47:05,050 --> 00:47:09,140
>> En fråga är, i dessa mallar, hur
får jag de värden som spelare

886
00:47:09,140 --> 00:47:11,520
eller välj ett namn?

887
00:47:11,520 --> 00:47:17,130
Om jag zooma in här i min kod,
Jag ser det här för varje spelare.

888
00:47:17,130 --> 00:47:19,970
Så mallen vet att
Jag har spelare på något sätt.

889
00:47:19,970 --> 00:47:22,110
Och den vet att det finns
ett valt namn.

890
00:47:22,110 --> 00:47:23,220
Var kommer det ifrån?

891
00:47:23,220 --> 00:47:25,180
Det kommer från JavaScript.

892
00:47:25,180 --> 00:47:30,980
>> Och om du går till leaderboard.js, detta
fil, nu när jag går här, vi har en

893
00:47:30,980 --> 00:47:33,460
Några kommandon definierade.

894
00:47:33,460 --> 00:47:36,400
Detta är speciellt Meteor syntax.

895
00:47:36,400 --> 00:47:38,600
Observera att du inte behöver
Vars eller något.

896
00:47:38,600 --> 00:47:42,990
Men dessa är bara structs på structs
på structs eller dessa objekt.

897
00:47:42,990 --> 00:47:45,910
Och allt jag definierar är mallen
kallade leaderboard.

898
00:47:45,910 --> 00:47:47,900
>> Tavlan bör få en
något som heter spelare.

899
00:47:47,900 --> 00:47:48,840
Och vad är spelarna?

900
00:47:48,840 --> 00:47:51,860
Det är vad detta uttryck återvänder.

901
00:47:51,860 --> 00:47:53,020
Och vad är valt namn?

902
00:47:53,020 --> 00:47:54,630
Det är lite mer kod.

903
00:47:54,630 --> 00:47:56,810
Detaljerna i koden vi ska
täcka lite senare.

904
00:47:56,810 --> 00:48:02,210
Men just nu vill jag att du förstår
att i denna kod, tar vi

905
00:48:02,210 --> 00:48:04,350
spelare, och vi ger det ett värde.

906
00:48:04,350 --> 00:48:07,000
I det här fallet är det en funktion
som får köras.

907
00:48:07,000 --> 00:48:10,290
Så vi kan få värdet tillbaka
när vi kör funktionen.

908
00:48:10,290 --> 00:48:12,830

909
00:48:12,830 --> 00:48:13,520
Detta är en logg.

910
00:48:13,520 --> 00:48:14,770
Låter det vettigt?

911
00:48:14,770 --> 00:48:23,170

912
00:48:23,170 --> 00:48:25,010
>> Jag kan ändra så det sorteras.

913
00:48:25,010 --> 00:48:27,230
Här finns det en sorts objekt.

914
00:48:27,230 --> 00:48:31,660
Och vad detta säger är jag ska sortera
av poäng fallande först och

915
00:48:31,660 --> 00:48:33,170
sedan namn stigande.

916
00:48:33,170 --> 00:48:36,630
Om jag ändrar detta till någon, det kommer
att sortera poäng stigande.

917
00:48:36,630 --> 00:48:39,120
Så noll ska vara på topp.

918
00:48:39,120 --> 00:48:43,370
Och när jag zooma in i min hemsida, vi
nu ser att webbplatsen uppdateras.

919
00:48:43,370 --> 00:48:44,923
Och poängen är stiga.

920
00:48:44,923 --> 00:48:49,010

921
00:48:49,010 --> 00:48:53,980
>> Nästa funktion jag vill bara
att täcka är klicksteg.

922
00:48:53,980 --> 00:48:57,910
Av intresse för tiden, jag kommer inte
kunna täcka mer av Meteor

923
00:48:57,910 --> 00:49:00,690
kod, men det finns gott om resurser
tillgängliga, och jag kommer att vara

924
00:49:00,690 --> 00:49:03,560
här efter seminariet.

925
00:49:03,560 --> 00:49:07,680
Men jag vill bara att täcka
leaderboarden händelser.

926
00:49:07,680 --> 00:49:10,520
Denna syntax lär du dig en
Lite senare i föreläsningen.

927
00:49:10,520 --> 00:49:12,870
Detta är JavaScript.

928
00:49:12,870 --> 00:49:16,720
>> Vi säger bara, när vi får ett klick,
och det är på den ökning, detta

929
00:49:16,720 --> 00:49:19,160
hash betyder bara ID.

930
00:49:19,160 --> 00:49:23,945
På steg ID-taggen, då vi vill ha
att uppdatera - de nyckelord jag vill ha dig

931
00:49:23,945 --> 00:49:26,740
att titta på är uppdatering och
välja och spelaren.

932
00:49:26,740 --> 00:49:29,080
Så beroende på vilket spelarens vald,
Vi uppdaterar den.

933
00:49:29,080 --> 00:49:31,260
Och det vi gör är att vi öka
sin poäng med fem.

934
00:49:31,260 --> 00:49:37,700

935
00:49:37,700 --> 00:49:40,340
Och som kommer att beskriva funktionaliteten
vi har här.

936
00:49:40,340 --> 00:49:50,270

937
00:49:50,270 --> 00:49:54,510
>> Efter utgången av detta seminarium, vi ska
att kunna se lite mer kod.

938
00:49:54,510 --> 00:50:00,400
Men att gå tillbaka till mitt mål som jag vill
ändra webbplatsen, ville jag hit

939
00:50:00,400 --> 00:50:03,400
att lägga till ett ta bort-knapp så
Jag kan ta bort spelaren.

940
00:50:03,400 --> 00:50:05,390
Så för att göra det, jag behöver
att göra två saker.

941
00:50:05,390 --> 00:50:09,680
Jag behöver uppdatera HTML, uppdatera
visa, vad som får visas för användaren, och

942
00:50:09,680 --> 00:50:15,080
då har någon JavaScript att när
knappen trycks in Meteor går

943
00:50:15,080 --> 00:50:15,690
att göra något.

944
00:50:15,690 --> 00:50:18,040
Det kommer att ta bort den spelaren.

945
00:50:18,040 --> 00:50:20,720
>> Så det finns en hel del bitar av kod
som har i princip redan

946
00:50:20,720 --> 00:50:22,610
har gjort för mig.

947
00:50:22,610 --> 00:50:26,160
Om jag ser här, jag har redan en väg
att få den valda spelaren.

948
00:50:26,160 --> 00:50:29,880
Det är det här, om du kan se det.

949
00:50:29,880 --> 00:50:31,346
Så om jag bara -

950
00:50:31,346 --> 00:50:35,160
Jag kommer att ha en annan händelse.

951
00:50:35,160 --> 00:50:37,900
Så jag ska kopiera det jag har.

952
00:50:37,900 --> 00:50:40,740
Eftersom detta är en lista,
Jag behöver bara ett kommatecken.

953
00:50:40,740 --> 00:50:45,480
>> Så nu ska jag klicka bort.

954
00:50:45,480 --> 00:50:48,840
Och då istället för spelare uppdatering,
Jag kommer att göra spelarna bort.

955
00:50:48,840 --> 00:50:51,620
Och alla spelare tar bort behov
är en utvald spelare.

956
00:50:51,620 --> 00:50:56,500
Så denna funktion är allt vi behöver.

957
00:50:56,500 --> 00:51:01,550
Jag behöver lägga till några
HTML här dock.

958
00:51:01,550 --> 00:51:05,180
Så om jag bläddra ner hit,
detta är den HTML-vy.

959
00:51:05,180 --> 00:51:08,300
Vi hade en sak här,
vilket var en en tagg.

960
00:51:08,300 --> 00:51:09,610
Du behöver inte bekymra dig om det.

961
00:51:09,610 --> 00:51:12,000
>> Det viktiga för dig är
detta ID inkrement.

962
00:51:12,000 --> 00:51:14,990
Och det är det som får oss att säga, när
vi klickade ökning måste vi

963
00:51:14,990 --> 00:51:16,410
ger fem poäng.

964
00:51:16,410 --> 00:51:18,240
Och du kommer att se att detta är en knapp.

965
00:51:18,240 --> 00:51:20,150
Det är vad det BTN betyder.

966
00:51:20,150 --> 00:51:23,190
Och texten i knappen
är att ge fem poäng.

967
00:51:23,190 --> 00:51:26,440
Så vad jag ska göra är att jag är
går att kopiera den här linjen.

968
00:51:26,440 --> 00:51:29,910
Jag kommer att ändra ID för att radera.

969
00:51:29,910 --> 00:51:34,310
Och jag kommer att ändra
text här för att ta bort.

970
00:51:34,310 --> 00:51:35,980
>> Så se till att allt är sparat.

971
00:51:35,980 --> 00:51:39,010
Jag vill gå tillbaka till min JavaScript
att se till att jag har

972
00:51:39,010 --> 00:51:40,880
bort uppradade här.

973
00:51:40,880 --> 00:51:41,780
Bra.

974
00:51:41,780 --> 00:51:43,145
Så jag kommer att spara båda filerna.

975
00:51:43,145 --> 00:51:46,060

976
00:51:46,060 --> 00:51:49,320
När du har sparat båda filerna, vi
kan gå tillbaka till botten.

977
00:51:49,320 --> 00:51:51,550
Och nu ser vi att vi har
en radera-knapp.

978
00:51:51,550 --> 00:51:56,050
Och ett steg.

979
00:51:56,050 --> 00:51:58,200
Du märker att du kan få en
fel eftersom när jag klickar

980
00:51:58,200 --> 00:52:00,610
bort, ingenting händer.

981
00:52:00,610 --> 00:52:03,930
>> Ett sätt att felsöka detta är att gå
tillbaka till Inspektera Element.

982
00:52:03,930 --> 00:52:07,820
Jag gör detta med flit, så att du kan
se hur du skulle felsöka något.

983
00:52:07,820 --> 00:52:11,210
I Inspektera Element, vi har
all vår text här nere.

984
00:52:11,210 --> 00:52:13,320
Jag vill gå tillbaka till konsolen.

985
00:52:13,320 --> 00:52:19,230
Och vad händer när jag går här
är jag få någon form av fel.

986
00:52:19,230 --> 00:52:21,660
Det säger att det finns ingen metod att ta bort.

987
00:52:21,660 --> 00:52:30,770
>> Vad detta säger är när jag går
tillbaka till koden, ringde jag spelare

988
00:52:30,770 --> 00:52:31,870
bort här.

989
00:52:31,870 --> 00:52:34,430
Delete är faktiskt inte
rätt kommando.

990
00:52:34,430 --> 00:52:39,740
Så för att ta reda på vad den rätta kommandot
är, det finns Meteor API.

991
00:52:39,740 --> 00:52:42,680
Dokumentationen Jag vill peka dig
killar till är bara på meteor.com.

992
00:52:42,680 --> 00:52:45,190
Så jag har det här uppe.

993
00:52:45,190 --> 00:52:48,510

994
00:52:48,510 --> 00:52:51,370
Det här är bara så ni vet
var att lära sig mer.

995
00:52:51,370 --> 00:52:54,420
>> Det finns en länk till dokumentationen.

996
00:52:54,420 --> 00:52:59,410
Och i grund och botten, jag kan bara
hittar på delete.

997
00:52:59,410 --> 00:53:03,220
Och vad du ser, ta bort
faktiskt bort.

998
00:53:03,220 --> 00:53:05,400
Det är det kommando som
Jag behöver ringa.

999
00:53:05,400 --> 00:53:09,620
Så nu när vi vet att, jag ska
att ändra detta bort för att ta bort.

1000
00:53:09,620 --> 00:53:13,060

1001
00:53:13,060 --> 00:53:18,010
Så nu, när jag går tillbaka till min leader
plats, kommer jag att klicka

1002
00:53:18,010 --> 00:53:19,450
bort, och nu är jag borta.

1003
00:53:19,450 --> 00:53:21,290
Det finns inget mer Roger.

1004
00:53:21,290 --> 00:53:25,470
Och jag kan hålla på att ta bort alla
enda namn förrän jag har inget kvar.

1005
00:53:25,470 --> 00:53:33,600

1006
00:53:33,600 --> 00:53:36,060
>> Så det var en liten förhandsvisning
om hur man använder Meteor.

1007
00:53:36,060 --> 00:53:38,990

1008
00:53:38,990 --> 00:53:42,380
Du kommer att lära sig mycket mer JavaScript
och HTML nödvändigt att göra

1009
00:53:42,380 --> 00:53:46,970
det ser snyggare, som vi täcker in
veckans [? bit?] inställd för HTML

1010
00:53:46,970 --> 00:53:49,630
och JavaScript nästa
[? bit?] inställd.

1011
00:53:49,630 --> 00:53:53,150
>> Så bli inte orolig om inte alla
det här kommer lätt till dig.

1012
00:53:53,150 --> 00:53:56,410
Det kommer med tiden för
den slutliga projektet.

1013
00:53:56,410 --> 00:53:58,030
Tack för att du visar upp.

1014
00:53:58,030 --> 00:54:01,380
Länken jag kommer att uppdatera snart efter
seminarium så att du kan se lite mer

1015
00:54:01,380 --> 00:54:05,630
exempel som jag har genomförts på hur
att få de mer avancerade leader

1016
00:54:05,630 --> 00:54:08,640
som jag har på denna webbplats här på
en radikal-leaderboard.meteor.

1017
00:54:08,640 --> 00:54:19,550

1018
00:54:19,550 --> 00:54:21,260
Tack.

1019
00:54:21,260 --> 00:54:22,760
>> [Applåder]

1020
00:54:22,760 --> 00:56:58,070