1
00:00:00,000 --> 00:00:10,632

2
00:00:10,632 --> 00:00:12,340
ALLISON Buchholtz-AU:
Okej alla.

3
00:00:12,340 --> 00:00:13,520
Välkommen tillbaka till avsnitt.

4
00:00:13,520 --> 00:00:15,315
Det är vår näst sista avsnittet.

5
00:00:15,315 --> 00:00:16,542
Det är så sorgligt.

6
00:00:16,542 --> 00:00:19,500
Jag vet inte vad jag ska göra
utan att se er varje måndag.

7
00:00:19,500 --> 00:00:20,970
Jag antar att vi borde bara--
kanske vi kunde bara

8
00:00:20,970 --> 00:00:22,710
träffas här och äta middag eller något.

9
00:00:22,710 --> 00:00:23,270
JAG VET INTE.

10
00:00:23,270 --> 00:00:24,370
Jag ska ta med mat istället.

11
00:00:24,370 --> 00:00:26,290
Vi ska bara prata.

12
00:00:26,290 --> 00:00:29,900
Men ja, nästa vecka kommer
vara vår sista avsnittet.

13
00:00:29,900 --> 00:00:32,390
>> Alltså, har du frågesport nästa vecka.

14
00:00:32,390 --> 00:00:35,660
Jag vet att jag glömde att göra mitt, liksom,
två veckors varsel förra veckan,

15
00:00:35,660 --> 00:00:39,140
Men förhoppningsvis ni
visste att detta skulle komma.

16
00:00:39,140 --> 00:00:42,880
Förhoppningsvis är detta en av de sista
midterms för er killar för terminen.

17
00:00:42,880 --> 00:00:46,950
Men det kommer att täcka alla
material som vi har gått över.

18
00:00:46,950 --> 00:00:50,811
Så det är inte som du kan bara glömma
cirka fyra slingor eller variabler.

19
00:00:50,811 --> 00:00:52,560
Eftersom vi lärt oss
de i början,

20
00:00:52,560 --> 00:00:55,870
de är uppenbarligen
rättvist spel för din frågesport.

21
00:00:55,870 --> 00:01:00,150
>> Det kommer att bli samma format, samma
längd, så du redan är van vid det.

22
00:01:00,150 --> 00:01:02,330
Det kommer att bli
kodning av handproblem,

23
00:01:02,330 --> 00:01:06,270
kanske några sant falskt,
kanske några korta svaret.

24
00:01:06,270 --> 00:01:08,090
Så du bör vara
bekant med formatet,

25
00:01:08,090 --> 00:01:10,940
speciellt om du tar
övningsprov.

26
00:01:10,940 --> 00:01:13,950
Men som jag säger här, det
kumulativa, men vi är definitivt

27
00:01:13,950 --> 00:01:17,410
kommer att fokusera på
saker från vecka sex och framåt.

28
00:01:17,410 --> 00:01:24,050
Så är vi förmodligen inte kommer
att fråga dig om hur många bytes

29
00:01:24,050 --> 00:01:26,180
är i varje typ eller
de möjliga saker,

30
00:01:26,180 --> 00:01:29,730
men vi förmodligen kommer att bli
intresserade av saker som länkade listor,

31
00:01:29,730 --> 00:01:32,750
eller olika datastrukturer,
eller olika algoritmer

32
00:01:32,750 --> 00:01:33,960
att vi har pratat om.

33
00:01:33,960 --> 00:01:38,990
Så se till att du verkligen
upp på dem, och om du

34
00:01:38,990 --> 00:01:41,590
behöver några resurser,
Här finns massor av resurser.

35
00:01:41,590 --> 00:01:44,790
Jag gav dig bara snäll
av en snabb lista där.

36
00:01:44,790 --> 00:01:48,330
>> Nästa vecka blir frågesport
granska under denna tid.

37
00:01:48,330 --> 00:01:52,290
Så om du har några frågor
eller specifika ämnen,

38
00:01:52,290 --> 00:01:56,180
specifika saker på den quiz som
du vill gå över, vänligen

39
00:01:56,180 --> 00:02:01,780
skicka dem till mig i förväg så jag kan
sorts förbereda en del material för det.

40
00:02:01,780 --> 00:02:06,310
Och i tillägg till detta
avsnitt översyn, vi ska

41
00:02:06,310 --> 00:02:09,616
också hålla kursen omfattande
granska som vi gjorde förra gången.

42
00:02:09,616 --> 00:02:11,490
Och det kommer att bli
gjort av samma personer.

43
00:02:11,490 --> 00:02:13,030
Jag vet inte om det
gör det bättre eller sämre,

44
00:02:13,030 --> 00:02:15,670
men det kommer att vara jag,
Hannah, Davan och Gabe igen.

45
00:02:15,670 --> 00:02:18,630
Så om du vill komma se
oss alla skämten med varandra

46
00:02:18,630 --> 00:02:21,270
och gå igenom frågesport
översyn, bör du definitivt

47
00:02:21,270 --> 00:02:22,600
kommer till att nästa måndag också.

48
00:02:22,600 --> 00:02:26,210
Så du ska bara ha en måndag jam
packad av frågesport översyn, vilket är bra

49
00:02:26,210 --> 00:02:29,840
för då har du tisdag
att bearbeta igenom allt.

50
00:02:29,840 --> 00:02:32,230
>> Men definitivt göra kolla
ut dessa resurser.

51
00:02:32,230 --> 00:02:36,030
Study.csv.net är överlägset, jag
tänka, en av de mest användbara,

52
00:02:36,030 --> 00:02:37,990
mest för att det har
en hel del exempelkod,

53
00:02:37,990 --> 00:02:40,490
det har alla Power Points
med alla anteckningar på det,

54
00:02:40,490 --> 00:02:44,510
vilket är verkligen vad jag drar mest
av mina sektions material från.

55
00:02:44,510 --> 00:02:47,480
Om det finns något i tidigare
sektioner som jag kan ha skickat ut

56
00:02:47,480 --> 00:02:49,920
att du inte kan ha
fått, så låt mig veta.

57
00:02:49,920 --> 00:02:52,520
Liksom förra veckans exempelkod,
om någon inte fick det,

58
00:02:52,520 --> 00:02:55,930
bara maila mig eller komma och prata med mig,
och jag ska se till att du får det.

59
00:02:55,930 --> 00:03:02,000
>> Så med det, i dag kommer vi
att prata om JavaScript.

60
00:03:02,000 --> 00:03:04,690
Så här är vi Tommy, vem jag var
bara prata med dig i natt.

61
00:03:04,690 --> 00:03:06,670
Jag älskar Tommy.

62
00:03:06,670 --> 00:03:09,040
JavaScript är hans favorit
språket, som han säger här.

63
00:03:09,040 --> 00:03:14,050
De ska försöka berätta att det är
inte den bästa, och de kommer att vara fel.

64
00:03:14,050 --> 00:03:16,510
Så Tommy är en JavaScript mästare.

65
00:03:16,510 --> 00:03:19,850
Jag är inte riktigt på hans
nivå, men jag var som,

66
00:03:19,850 --> 00:03:22,900
"Tommy, hur gör jag undervisar
dessa barn JavaScript? "

67
00:03:22,900 --> 00:03:26,700
Så jag fick några tips, så
förhoppningsvis de tränar.

68
00:03:26,700 --> 00:03:31,140
>> Så ett par saker att veta är att
JavaScript är ett klientskript

69
00:03:31,140 --> 00:03:35,560
språk, så medan PHP är något
att vi anses vara mer serversidan,

70
00:03:35,560 --> 00:03:39,280
det laddar upp till servern,
kompileras och exekveras där.

71
00:03:39,280 --> 00:03:42,871
Denna en exekveras
på din egen maskin.

72
00:03:42,871 --> 00:03:43,370
OK?

73
00:03:43,370 --> 00:03:46,960
Så du laddar lite JavaScript sida,
och det utför på din maskin.

74
00:03:46,960 --> 00:03:49,910
Syntax är mycket lik C och PHP.

75
00:03:49,910 --> 00:03:52,490
Vi kommer att gå igenom
några exempel på JavaScript,

76
00:03:52,490 --> 00:03:56,740
och du kommer att se att det
sätt vi talar om variabler, loopar,

77
00:03:56,740 --> 00:03:58,910
och förhållandena är alla mycket lika.

78
00:03:58,910 --> 00:04:00,500
OK?

79
00:04:00,500 --> 00:04:04,490
Det faktum att de är så lika är
förmodligen kommer att resa en del av er

80
00:04:04,490 --> 00:04:08,529
upp, i vissa fall, bara för att
du kommer att infoga en liten bit av C

81
00:04:08,529 --> 00:04:09,570
där det inte borde vara.

82
00:04:09,570 --> 00:04:14,130
Kanske du försöker och skriva något
när den inte ska skrivas.

83
00:04:14,130 --> 00:04:16,540
>> Och på det, en sak till
vet är att JavaScript

84
00:04:16,540 --> 00:04:19,360
är ett dynamiskt skrivit
språket, som PHP.

85
00:04:19,360 --> 00:04:21,410
Så om ni kommer ihåg
från avsnitt förra veckan,

86
00:04:21,410 --> 00:04:23,680
när vi var typ av göra
vår PHP snabbkurs,

87
00:04:23,680 --> 00:04:28,860
Vi såg hur en sträng man kunde vara
förvandlats till en int en, och så vidare.

88
00:04:28,860 --> 00:04:31,650

89
00:04:31,650 --> 00:04:34,850
Den typ av dina variabler
bestäms vid körning,

90
00:04:34,850 --> 00:04:38,180
så de kan förändras över
loppet av programmet

91
00:04:38,180 --> 00:04:43,109
och på samma sätt som vi aldrig
verkligen förklara typer för PHP-variabler,

92
00:04:43,109 --> 00:04:45,900
vi kommer att göra detsamma
sak här, där vi är verkligen inte

93
00:04:45,900 --> 00:04:49,740
styra de typer av våra variabler,
så att säga, som vi gör i C.

94
00:04:49,740 --> 00:04:52,200
>> Och så en sak
det är ganska coolt är

95
00:04:52,200 --> 00:04:54,090
att du kan fel
Kontrollera via konsolen,

96
00:04:54,090 --> 00:04:57,240
med denna stora funktion
console.log, vilket

97
00:04:57,240 --> 00:05:00,930
gör att du kan skriva ut olika
variabler eller objekt att vi kommer

98
00:05:00,930 --> 00:05:01,750
prata om.

99
00:05:01,750 --> 00:05:05,720
Precis som förra veckan när jag var
som, "använda denna funktion" med dump

100
00:05:05,720 --> 00:05:10,490
från din pset detta är en funktion
du vill använda, console.log.

101
00:05:10,490 --> 00:05:12,860
Jag blev så förvånad över hur många
studenter på kontorstid

102
00:05:12,860 --> 00:05:14,530
visste inte om dumpfunktionen.

103
00:05:14,530 --> 00:05:19,010
Och jag var som, "grabbar, denna vilja
göra ditt liv så mycket enklare. "

104
00:05:19,010 --> 00:05:22,960
>> Okej, så det var typ av
bara en kort sak, som alltid,

105
00:05:22,960 --> 00:05:24,000
Vi har exempel.

106
00:05:24,000 --> 00:05:25,600
Jag vet att ni älskar dem.

107
00:05:25,600 --> 00:05:30,930
Så här är ett exempel på en mycket
enkel JavaScript fil här.

108
00:05:30,930 --> 00:05:34,000
Så det är bara att gå för att skapa
Detta pop-up som säger,

109
00:05:34,000 --> 00:05:36,336
"Hej världen" när du
anger sidans, men låt oss

110
00:05:36,336 --> 00:05:37,960
försöka gå igenom det här lite.

111
00:05:37,960 --> 00:05:43,440
Så uppenbarligen är detta bara
som din vanliga index.html.

112
00:05:43,440 --> 00:05:50,280
Så, bara vår normala mall här,
och vi har HTML, vi har vårt huvud,

113
00:05:50,280 --> 00:05:55,580
och precis som med CSS, hur vi
inkluderade några utanför filen, eller hur?

114
00:05:55,580 --> 00:05:59,260
Vi har en del script typ
text som är JavaScript.

115
00:05:59,260 --> 00:06:02,680
Och källan är hello.js,
vilket är här nere.

116
00:06:02,680 --> 00:06:05,630
Detta är hela filen för hello.js.

117
00:06:05,630 --> 00:06:09,080
Och då har vi några
titel och vissa kropps HTML

118
00:06:09,080 --> 00:06:11,050
att vi egentligen inte bryr sig om.

119
00:06:11,050 --> 00:06:15,970
>> Vad som händer är, när vi laddar denna sida,
det utför automatiskt här skriptet.

120
00:06:15,970 --> 00:06:16,470
OK?

121
00:06:16,470 --> 00:06:18,790
Så JavaScript kommer
exekvera automatiskt.

122
00:06:18,790 --> 00:06:22,860
Så vad det kommer att göra, det kommer
att omedelbart gå och utföra detta.

123
00:06:22,860 --> 00:06:24,110
Och det kommer att säga, "alert.

124
00:06:24,110 --> 00:06:25,190
Hej världen. "

125
00:06:25,190 --> 00:06:30,840
Vilken varning är den funktion som
faktiskt genererar denna ruta.

126
00:06:30,840 --> 00:06:31,540
OK?

127
00:06:31,540 --> 00:06:33,390
Så det är typ allt encompass.

128
00:06:33,390 --> 00:06:36,700
Det finns inget extra hade vi
att göra förutom just alert,

129
00:06:36,700 --> 00:06:40,000
och sedan vad vi ville
inom vår Alert rutan.

130
00:06:40,000 --> 00:06:40,500
OK?

131
00:06:40,500 --> 00:06:45,080
Så det är bara en super enkel
exempel på vad JavaScript kan göra.

132
00:06:45,080 --> 00:06:48,110

133
00:06:48,110 --> 00:06:50,070
>> En av de riktigt coola
saker, som vi ska se,

134
00:06:50,070 --> 00:06:55,150
är att JavaScript gör att du
att manipulera dina webbsidor,

135
00:06:55,150 --> 00:06:57,720
utan att behöva
ladda dem varje gång.

136
00:06:57,720 --> 00:07:01,830
Så om du want-- till exempel om
du svävar över något,

137
00:07:01,830 --> 00:07:04,300
om ni någonsin har
ses som meny barer,

138
00:07:04,300 --> 00:07:07,360
eller när du för muspekaren över en viss
ämne, visas en rullgardinsmeny,

139
00:07:07,360 --> 00:07:08,670
det är på grund av JavaScript.

140
00:07:08,670 --> 00:07:09,170
OK?

141
00:07:09,170 --> 00:07:12,670
Så du inte ladda om hela
sida för att få den här menyn för att visa upp,

142
00:07:12,670 --> 00:07:17,240
du bara letar efter vissa specifika
åtgärder som användaren har tagit,

143
00:07:17,240 --> 00:07:21,800
som kallas händelser som vi kommer att få
in, och när du ser det, säger du,

144
00:07:21,800 --> 00:07:25,960
"OK, redigera något på detta
sida och att det ser annorlunda,

145
00:07:25,960 --> 00:07:28,270
men bara redigera dessa specifika saker.

146
00:07:28,270 --> 00:07:29,690
Inte ladda om hela saken. "

147
00:07:29,690 --> 00:07:33,110
Så det är faktiskt mycket trevligare, och
du behöver inte ladda om dina sidor,

148
00:07:33,110 --> 00:07:34,510
och det är riktigt coolt.

149
00:07:34,510 --> 00:07:38,270
>> Så variabeldeklarationer,
så du kan typ av se,

150
00:07:38,270 --> 00:07:40,530
Jag satte på toppen här, löst skrivit.

151
00:07:40,530 --> 00:07:42,570
Så detta är väldigt likt PHP.

152
00:07:42,570 --> 00:07:48,770
Vi behöver inte berätta
JavaScript vilken typ vi är

153
00:07:48,770 --> 00:07:50,740
förväntar vardera av dessa variabler för att vara.

154
00:07:50,740 --> 00:07:52,560
De kan vara vad slag vi vill.

155
00:07:52,560 --> 00:07:57,480
Så du märker i det här fallet, vi förklarar
dem mycket enkelt, bara med "var"

156
00:07:57,480 --> 00:08:00,990
och sedan vad vi vill
vår variabelnamn för att vara.

157
00:08:00,990 --> 00:08:05,680
En sak att notera är att när du
sätta var framför ett variabelnamn,

158
00:08:05,680 --> 00:08:07,520
den lokalt omfattningar det.

159
00:08:07,520 --> 00:08:09,320
OK?

160
00:08:09,320 --> 00:08:14,025
Det är helt rimligt för dig
att helt bara radera var

161
00:08:14,025 --> 00:08:18,970
och bara ha s lika CS50, och
som bara skulle vara en global variabel.

162
00:08:18,970 --> 00:08:19,580
OK?

163
00:08:19,580 --> 00:08:22,490
Så du kan initiera både och,
bara beror på hur du vill ha det.

164
00:08:22,490 --> 00:08:24,448
Så om du initierar
den inom en funktion,

165
00:08:24,448 --> 00:08:28,070
och du vill att variabeln ska
hålla scoped inom denna funktion,

166
00:08:28,070 --> 00:08:31,620
du kommer att vilja göra
något som var namnge en variabel,

167
00:08:31,620 --> 00:08:34,270
kontra om du vill ha det
globalt scoped, du

168
00:08:34,270 --> 00:08:36,240
kan bara göra det känt av
variabeln och sedan

169
00:08:36,240 --> 00:08:38,270
vad du vill att det sätts lika med.

170
00:08:38,270 --> 00:08:40,230
OK?

171
00:08:40,230 --> 00:08:45,580
>> Detta är typ av cool sak här nere,
för om vi märker våra variabel

172
00:08:45,580 --> 00:08:47,590
b börjar som sant.

173
00:08:47,590 --> 00:08:51,280
Och vad detta does-- kan
någon berätta för mig vad detta innebär?

174
00:08:51,280 --> 00:08:54,190

175
00:08:54,190 --> 00:08:55,890
Så vi har lite alert.

176
00:08:55,890 --> 00:09:00,156
Vad skulle skriva på b
vara i början?

177
00:09:00,156 --> 00:09:00,905
PUBLIK: Boolean.

178
00:09:00,905 --> 00:09:01,330
ALLISON Buchholtz-AU: Boolean.

179
00:09:01,330 --> 00:09:01,940
Höger.

180
00:09:01,940 --> 00:09:07,260
Och sedan tilldela vi b
till denna sträng, eller hur?

181
00:09:07,260 --> 00:09:11,170
Så då här, vilken typ av b vara?

182
00:09:11,170 --> 00:09:12,480
Det skulle vara en sträng, eller hur?

183
00:09:12,480 --> 00:09:14,900
Så vad som är viktigt för
meddelande är att i c, vi

184
00:09:14,900 --> 00:09:17,330
kunde nästan aldrig göra
något liknande.

185
00:09:17,330 --> 00:09:22,000
Vi skulle behöva ha en variabel,
kasta den som något annat,

186
00:09:22,000 --> 00:09:27,185
kanske göra någon funktion med en två
i, går från en avgift till ett heltal.

187
00:09:27,185 --> 00:09:31,063
Men om vi märker här, b
mycket lätt byter typ.

188
00:09:31,063 --> 00:09:33,760
>> PUBLIK: Vänta, så du kan bara
vara som, "gör b ett heltal?"

189
00:09:33,760 --> 00:09:34,360
>> ALLISON Buchholtz-AU: Yeah.

190
00:09:34,360 --> 00:09:36,185
Du kan bara tilldela b till ett heltal.

191
00:09:36,185 --> 00:09:36,910
>> PUBLIK: Verkligen?

192
00:09:36,910 --> 00:09:38,035
>> ALLISON Buchholtz-AU: Yeah.

193
00:09:38,035 --> 00:09:39,810
Och då skulle det vara en int.

194
00:09:39,810 --> 00:09:43,820
Så dina variabler kan förändras över
loppet av programmets alltför.

195
00:09:43,820 --> 00:09:46,410
De är inte strikt skrivit.

196
00:09:46,410 --> 00:09:49,180
Det är mycket löst skrivit.

197
00:09:49,180 --> 00:09:50,820
OK?

198
00:09:50,820 --> 00:09:54,820
I grund och botten dina variabler kan göra vad
de vill ha, när vi slags såg med PHP.

199
00:09:54,820 --> 00:09:59,430
De kan göra en del galna saker, så
det är viktigt att vara ganska försiktiga.

200
00:09:59,430 --> 00:10:01,200
Namnge dina variabler väl.

201
00:10:01,200 --> 00:10:03,450
Om du inte gör det, helt plötsligt
du kommer att vara som,

202
00:10:03,450 --> 00:10:05,783
"Vänta, jag trodde att detta var en
sträng, och nu är det en int,

203
00:10:05,783 --> 00:10:08,170
och jag är inte riktigt säker
vad som händer här. "

204
00:10:08,170 --> 00:10:12,410
Så det här är bara ett enkelt exempel på
som visar hur en variabel kan enkelt

205
00:10:12,410 --> 00:10:15,890
ändra dess typ över
loppet av ett program.

206
00:10:15,890 --> 00:10:16,870
>> OK.

207
00:10:16,870 --> 00:10:19,200
Så detta ska se ut
super, super bekant.

208
00:10:19,200 --> 00:10:21,510
Så dessa är våra slingor i JavaScript.

209
00:10:21,510 --> 00:10:27,780
De är exakt samma, med undantag för
i stället för fyra int jag är lika med noll,

210
00:10:27,780 --> 00:10:30,470
Vi kunde bara säga var i är lika med noll.

211
00:10:30,470 --> 00:10:34,100
Och då kunde vi ha vår samma sorts
av tillstånd, samma sorts uppdatering,

212
00:10:34,100 --> 00:10:36,090
Jag plus plus fungerar alldeles utmärkt.

213
00:10:36,090 --> 00:10:39,800
Så fyror är samma,
whiles är samma,

214
00:10:39,800 --> 00:10:41,440
och göra whiles är exakt samma.

215
00:10:41,440 --> 00:10:44,070
Samma sorts allmänna format.

216
00:10:44,070 --> 00:10:48,840
Vi märker, fyra, parenteser,
konsoler, det är i alla fall.

217
00:10:48,840 --> 00:10:51,470
Också det kommer att bli semikolon
när vi kommer till exempelkod.

218
00:10:51,470 --> 00:10:55,250
Du ser det är ganska
mycket samma som c.

219
00:10:55,250 --> 00:10:59,770
>> För funktionsdeklarationer,
igen, mycket lika.

220
00:10:59,770 --> 00:11:05,100
Vi har någon funktion som bara
säger att det är en funktion, och sedan

221
00:11:05,100 --> 00:11:07,660
namnet på vår
funktion, och ingångarna.

222
00:11:07,660 --> 00:11:11,590
Och igen om vi märker, vi
har inga typer här som helst.

223
00:11:11,590 --> 00:11:12,090
Rätt?

224
00:11:12,090 --> 00:11:18,150
Vi har ingenting att säga att dessa
behöver vara ints eller dubbel, eller flyter.

225
00:11:18,150 --> 00:11:19,530
De kan vara vad som helst.

226
00:11:19,530 --> 00:11:23,560
Vad som är viktigt är att märka att
Vi måste skriva funktionen förväg

227
00:11:23,560 --> 00:11:26,430
att låta JavaScript veta att
detta är faktiskt en funktion.

228
00:11:26,430 --> 00:11:29,820
>> Så det här är bara några enkla summan
funktion som returnerar x eller y,

229
00:11:29,820 --> 00:11:33,800
och vad är också coolt
är att du faktiskt kan

230
00:11:33,800 --> 00:11:35,950
tilldela en funktion till en variabel.

231
00:11:35,950 --> 00:11:41,770
Så i det här fallet, är summan nu
funktion som faktiskt gör summa.

232
00:11:41,770 --> 00:11:47,740
Så om du märker här, vi har
funktion, namn funktion, ingångar.

233
00:11:47,740 --> 00:11:48,860
Rätt?

234
00:11:48,860 --> 00:11:52,120
Här har vi bara funktion och ingångar.

235
00:11:52,120 --> 00:11:54,310
Så detta kallas en anonym funktion.

236
00:11:54,310 --> 00:11:59,265
Och detta är något som borde vara nytt
de flesta av er, om inte alla av er.

237
00:11:59,265 --> 00:12:01,140
Så i princip vad som
medel är att vi inte gör det

238
00:12:01,140 --> 00:12:03,050
behöver namnet på vår
funktion i det här fallet.

239
00:12:03,050 --> 00:12:06,260
Vi kan bara säga, "OK, jag ska
har denna funktion som körs, här

240
00:12:06,260 --> 00:12:08,550
är dess ingångar, och här är
vad det kommer att göra. "

241
00:12:08,550 --> 00:12:12,540
Och speciellt när du tilldelar
en funktion till viss variabel

242
00:12:12,540 --> 00:12:14,950
att du kommer att manipulera,
Du behöver inte nödvändigtvis

243
00:12:14,950 --> 00:12:17,116
måste nämna det eftersom
du kommer att vara att hänvisa

244
00:12:17,116 --> 00:12:20,990
genom denna variabel
namn, inte genom vad

245
00:12:20,990 --> 00:12:22,840
funktionen kallades faktiskt.

246
00:12:22,840 --> 00:12:23,550
OK?

247
00:12:23,550 --> 00:12:27,810
>> Så om vi ser här, vi
har någon rörlig summa nu

248
00:12:27,810 --> 00:12:30,920
som är lika med den
Summan av tre och fem.

249
00:12:30,920 --> 00:12:33,070
Och vi skulle få detta.

250
00:12:33,070 --> 00:12:36,750
Och detta skulle bara ha lite varning,
tre plus fem är lika med antalet.

251
00:12:36,750 --> 00:12:43,950
Detta plus kommer bara slå samman
oavsett vårt svar var på strängen.

252
00:12:43,950 --> 00:12:47,420
Också coolt, plus kan sammanfoga strängar.

253
00:12:47,420 --> 00:12:53,510
>> För JavaScript som med PHP,
HTML och CSS som vi sagt,

254
00:12:53,510 --> 00:12:56,450
mycket av det vi är typ av att ta
träningshjul off här

255
00:12:56,450 --> 00:13:02,030
och ni har en hel del know
Hur verkligen förstå dessa saker.

256
00:13:02,030 --> 00:13:04,280
De är något annorlunda,
men de är inte så främmande

257
00:13:04,280 --> 00:13:09,460
och att du inte kan googla saker eller
leta upp dem på nätet med w3 skolor.

258
00:13:09,460 --> 00:13:12,755
Och vi verkligen förväntar dig
killar till, typ av, experiment

259
00:13:12,755 --> 00:13:14,400
och lära sig på egen hand.

260
00:13:14,400 --> 00:13:19,490
Så, jag vet att detta kan verka lite
mindre noggrann än vissa av de c saker

261
00:13:19,490 --> 00:13:21,936
vi gör, men det är faktiskt en anledning.

262
00:13:21,936 --> 00:13:25,060

263
00:13:25,060 --> 00:13:28,470
Men förhoppningsvis är det inte alltför
annorlunda, och det är inte överväldigande.

264
00:13:28,470 --> 00:13:31,940
>> Så matriser i JavaScript,
igen mycket, mycket lika.

265
00:13:31,940 --> 00:13:32,460
Rätt?

266
00:13:32,460 --> 00:13:36,520
Vi har några rörliga array
det är lika med tomma fästen,

267
00:13:36,520 --> 00:13:40,340
och det är bara en tom array.

268
00:13:40,340 --> 00:13:43,420
Detta kallas ofta
bokstav array notation.

269
00:13:43,420 --> 00:13:45,280
Det är bara en sak som vi kallar det.

270
00:13:45,280 --> 00:13:51,380
Om vi ​​ser array två här, har vi några
bokstav array som består av tre delar,

271
00:13:51,380 --> 00:13:51,910
rätt?

272
00:13:51,910 --> 00:13:54,640
Och då har vi några
var tredje element som är

273
00:13:54,640 --> 00:13:58,060
någon variabel det är bara
kommer att hålla denna sträng, JS.

274
00:13:58,060 --> 00:14:01,760

275
00:14:01,760 --> 00:14:06,170
>> Elementen, bra att märka,
separeras med kommatecken,

276
00:14:06,170 --> 00:14:07,740
precis som vi skulle förvänta oss.

277
00:14:07,740 --> 00:14:14,630
Och du kan också komma åt dessa, som vi gjorde
i C, med detta index notation, eller hur?

278
00:14:14,630 --> 00:14:16,950
Så annorlunda från PHP
Nu, vi kommer tillbaka

279
00:14:16,950 --> 00:14:20,180
att bara sorts hänvisa
till saker av index.

280
00:14:20,180 --> 00:14:22,189
Precis som C, det är också noll index.

281
00:14:22,189 --> 00:14:25,230
Det känns som att det skulle vara riktigt grym
om de plötsligt gjorde JavaScript man

282
00:14:25,230 --> 00:14:30,630
index, och du var tvungen att helt
tänka om hur du tänker på matriser.

283
00:14:30,630 --> 00:14:36,140
>> En cool sak är att istället
för att behöva do-- om du någonsin

284
00:14:36,140 --> 00:14:39,240
ville längden av en array,
kanske du iterera igenom det

285
00:14:39,240 --> 00:14:43,430
tills du hittar något slut, eller
du skulle bara veta vad det är.

286
00:14:43,430 --> 00:14:49,310
Eftersom JavaScript är mycket lös i mer
sätt än bara typ, som vi ser här,

287
00:14:49,310 --> 00:14:53,310
Vi kan bara göra denna array
större eftersom vi beslutar att.

288
00:14:53,310 --> 00:14:56,177
Om vi ​​märker array tre
har tre saker att starta,

289
00:14:56,177 --> 00:14:58,510
men då helt plötsligt,
Vi är som, "Åh, bara skojar.

290
00:14:58,510 --> 00:15:01,370
Vi faktiskt går
för att göra det 101 saker. "

291
00:15:01,370 --> 00:15:05,300
Så om du någonsin vill veta
faktiska längden på din array,

292
00:15:05,300 --> 00:15:06,680
du gör det så här.

293
00:15:06,680 --> 00:15:10,470
Och vi kommer att se en hel del
av denna notation i exemplen,

294
00:15:10,470 --> 00:15:12,730
men med JavaScript
det är oftast vad

295
00:15:12,730 --> 00:15:16,410
objekt som du pratar om
dot oavsett typ av funktion

296
00:15:16,410 --> 00:15:17,740
du vill appliceras på det.

297
00:15:17,740 --> 00:15:18,240
OK?

298
00:15:18,240 --> 00:15:20,520
>> Så i detta fall, vår
objektet är array två,

299
00:15:20,520 --> 00:15:23,470
och vi säger att vi vill ha det
längd matris två.

300
00:15:23,470 --> 00:15:25,716
Så det här precis samtal såsom längd på det.

301
00:15:25,716 --> 00:15:27,090
Och det kommer att returnera din längd.

302
00:15:27,090 --> 00:15:32,610

303
00:15:32,610 --> 00:15:36,790
Också något att notera är
att om vi märker våra matriser,

304
00:15:36,790 --> 00:15:39,830
skillnad C, har de inte
vara alla av samma typ.

305
00:15:39,830 --> 00:15:41,670
Detta är mycket mer som PHP.

306
00:15:41,670 --> 00:15:45,905
JavaScript är i princip precis som
denna intressanta meld av C och PHP.

307
00:15:45,905 --> 00:15:50,020

308
00:15:50,020 --> 00:15:52,170
Så vi ska få in det.

309
00:15:52,170 --> 00:15:56,750
För nu, låt oss bara anta
att dina arrayer är i grunden

310
00:15:56,750 --> 00:16:00,640
som C matriser, i det att
de är noll indexeras.

311
00:16:00,640 --> 00:16:04,120
OK, så det är allt.

312
00:16:04,120 --> 00:16:08,850
Du kan också bara förlänga en
array till vad index du vill.

313
00:16:08,850 --> 00:16:14,260
Medan detta skulle förmodligen seg
fel på dig eller ge dig lite fel,

314
00:16:14,260 --> 00:16:15,970
JavaScript är som, "Nä, det är bra.

315
00:16:15,970 --> 00:16:16,620
Jag fick detta.

316
00:16:16,620 --> 00:16:19,460
Vi ska bara gå rakt
där du vill. "

317
00:16:19,460 --> 00:16:24,310
>> OK, så objekten är mycket viktiga.

318
00:16:24,310 --> 00:16:29,720
Ni kommer att använda en hel del av dessa
i din P set, om jag minns rätt.

319
00:16:29,720 --> 00:16:34,780
Så det som dessa är
liknar i C är structs.

320
00:16:34,780 --> 00:16:39,290
Så du kan tänka about-- när
Vi går till exempel rätt

321
00:16:39,290 --> 00:16:41,810
efter detta tror jag att det kommer
göra mycket mer sense--

322
00:16:41,810 --> 00:16:45,830
men vi i grund och botten använder objekt till
organisera naturligtvis relaterad information.

323
00:16:45,830 --> 00:16:47,780
När vi pratade om
structs i C, vi ofta

324
00:16:47,780 --> 00:16:53,405
tala om en student som hade vissa namn,
ID, hus, ni vet, koncentration.

325
00:16:53,405 --> 00:16:56,030
Och det är typ av samma sak
att vi använder föremål för här.

326
00:16:56,030 --> 00:16:59,300
Det är bara att organisera
liknande information.

327
00:16:59,300 --> 00:17:03,620
>> Du kan också tänka på dessa som mer
liknande associativa arrayer i PHP.

328
00:17:03,620 --> 00:17:10,010
Så detta skulle vara typ av sak
där vi har några viktiga med ett visst värde,

329
00:17:10,010 --> 00:17:12,859
mycket lik PHP.

330
00:17:12,859 --> 00:17:15,780
Så du kan initiera en del
tomt objekt, som vi ser här uppe,

331
00:17:15,780 --> 00:17:17,390
precis med klammerparenteser.

332
00:17:17,390 --> 00:17:19,160
Så arrayer är hakparenteser.

333
00:17:19,160 --> 00:17:21,220
Tomma objekt är klammerparenteser.

334
00:17:21,220 --> 00:17:24,020
Bra skillnad att ha.

335
00:17:24,020 --> 00:17:27,319
Och dessa är bara två olika
sätt att ställa in egenskaper.

336
00:17:27,319 --> 00:17:31,460
Så det här är typ av
mycket mer av ett sätt som

337
00:17:31,460 --> 00:17:35,220
liknar PHP, med vår
associativa arrayer, med vår nyckel,

338
00:17:35,220 --> 00:17:39,910
och vårt värde, medan
här är-- du kommer

339
00:17:39,910 --> 00:17:41,920
ser detta mycket mer i JavaScript.

340
00:17:41,920 --> 00:17:43,550
Detta tenderar att vara konventionen.

341
00:17:43,550 --> 00:17:47,660
Och på samma sätt som vi gjorde
array två dot längd, detta säger,

342
00:17:47,660 --> 00:17:51,580
"OK, ge mig det här
skriver detta objekt. "

343
00:17:51,580 --> 00:17:52,110
Rätt?

344
00:17:52,110 --> 00:17:55,660
Så på samma sätt var det som, "ge mig
attributlängd array två, "

345
00:17:55,660 --> 00:17:59,970
detta säger, "ge mig några
egendom av vår tomt objekt. "

346
00:17:59,970 --> 00:18:02,890
Eller i det här fallet, är vi
koppla den till något värde här.

347
00:18:02,890 --> 00:18:06,200
Men du kan också komma åt det på det sättet.

348
00:18:06,200 --> 00:18:09,090
>> Och så här det är bara
visar två olika varningar.

349
00:18:09,090 --> 00:18:12,320
Så detta skulle visa registreringarna
skulle vara exakt densamma,

350
00:18:12,320 --> 00:18:17,150
Det är bara två olika sätt att
tillgång till element som vi vill ha.

351
00:18:17,150 --> 00:18:19,552
Betyder det vettigt att alla?

352
00:18:19,552 --> 00:18:21,510
Jag känner mig som den här
förmodligen vettigare,

353
00:18:21,510 --> 00:18:23,270
bara för att vi är på väg bort från PHP.

354
00:18:23,270 --> 00:18:26,400
Men som vi gör fler exempel, detta
är bokstavligen exakt samma.

355
00:18:26,400 --> 00:18:28,170
En hel del av det bara ändra i syntaxen.

356
00:18:28,170 --> 00:18:30,710

357
00:18:30,710 --> 00:18:33,030
>> OK, så exempel.

358
00:18:33,030 --> 00:18:34,180
Jag älskar exempel.

359
00:18:34,180 --> 00:18:40,070
Så här är några CS50
variabel som är ett föremål,

360
00:18:40,070 --> 00:18:42,160
och vi lagrar allt detta
information om det.

361
00:18:42,160 --> 00:18:46,680
Så vi har naturligtvis instruktör,
tfs, psets och tejpade.

362
00:18:46,680 --> 00:18:51,840
Så vi märker dessa är nästan
alla olika typer.

363
00:18:51,840 --> 00:18:52,340
Rätt?

364
00:18:52,340 --> 00:18:56,230
Så föremål kan lagra
attribut av olika typer.

365
00:18:56,230 --> 00:19:01,220
Vi kan tänka på this-- det är mycket
liknar vår associativ array i PHP.

366
00:19:01,220 --> 00:19:07,470
Så nyckel, värde, nyckel, värde,
nyckel, värde, så vidare och så vidare.

367
00:19:07,470 --> 00:19:11,230
Det som också är intressant på samma sätt
att vi kan ha arrayer inom arrayer,

368
00:19:11,230 --> 00:19:14,690
Vi kan också ha föremål inom
objekt eller arrayer inom föremål.

369
00:19:14,690 --> 00:19:18,410
Du kommer aldrig riktigt begränsat till
bara en enda en av saker.

370
00:19:18,410 --> 00:19:24,220
Vi kan få mycket Inceptionesque, precis
fortsätt ner i kaninhålet där.

371
00:19:24,220 --> 00:19:26,080
>> Så om vi märker, vi
ha viss kurs som

372
00:19:26,080 --> 00:19:31,120
är en sträng, instruktör som är en sträng,
och matris, en int, och en Boolean.

373
00:19:31,120 --> 00:19:36,110
Så alla av dessa olika saker.

374
00:19:36,110 --> 00:19:39,600
>> Okej, så har vi en till.

375
00:19:39,600 --> 00:19:42,930
Så i det här fallet har vi
en array med objekt.

376
00:19:42,930 --> 00:19:45,320
Så precis som ett objekt
kan ha en matris i den.

377
00:19:45,320 --> 00:19:47,210
Vi kan också ha en array med objekt.

378
00:19:47,210 --> 00:19:51,250
Det kan vara användbart för
tänka liknar slag

379
00:19:51,250 --> 00:19:54,260
av hur vi hade en hash
bord, hade vi en array

380
00:19:54,260 --> 00:19:56,220
av alla dessa olika
typer av structs som

381
00:19:56,220 --> 00:19:59,070
var pekare till olika
noder och whatnot.

382
00:19:59,070 --> 00:20:01,420
Men i det här fallet, vi
ha en array med objekt.

383
00:20:01,420 --> 00:20:04,890
Så detta är som en array
av associativa arrayer.

384
00:20:04,890 --> 00:20:09,430
Så vi har några första elementet skulle
bli föremål med namnet James

385
00:20:09,430 --> 00:20:11,340
och hus Winthrop.

386
00:20:11,340 --> 00:20:14,780
>> Ni kanske minns
något mycket liknar detta

387
00:20:14,780 --> 00:20:21,710
med din sista pset, där om du
drog något från din databas,

388
00:20:21,710 --> 00:20:24,480
den första typen av
sak i ditt array var

389
00:20:24,480 --> 00:20:27,110
all information om
den första användaren som mötte det,

390
00:20:27,110 --> 00:20:30,765
och sedan du var tvungen att index in i det
att få sina lager eller deras cache

391
00:20:30,765 --> 00:20:32,110
eller whatnot.

392
00:20:32,110 --> 00:20:34,620
Så detta är väldigt mycket samma
sak, bara en liten förändring

393
00:20:34,620 --> 00:20:39,570
i syntax, lite förändring
de ord vi använder för att beskriva dem.

394
00:20:39,570 --> 00:20:45,960
>> Så om vi ville, kan någon berätta
mig vad denna varning skulle göra här?

395
00:20:45,960 --> 00:20:48,780
Eller vad denna bit av
kod skulle göra för oss?

396
00:20:48,780 --> 00:20:50,992

397
00:20:50,992 --> 00:20:52,616
PUBLIK: Det ska ge er alla namn.

398
00:20:52,616 --> 00:20:54,900
ALLISON Buchholtz-AU: Höger, så det
skulle bara varna med alla namn

399
00:20:54,900 --> 00:20:57,960
eftersom det skulle gå igenom
stuga i, så det skulle börja på noll.

400
00:20:57,960 --> 00:21:01,330
Så det skulle säga, OK vi söker
vid denna första objektet, vilket

401
00:21:01,330 --> 00:21:03,210
är den första slitsen i vår array.

402
00:21:03,210 --> 00:21:06,900
Och den säger, "ge mig
attribut, namnet på det objektet. "

403
00:21:06,900 --> 00:21:09,030
Så vi går här, skulle vi
scan, vi skulle hitta namn,

404
00:21:09,030 --> 00:21:11,340
och vi skulle skriva ut
James, Molly, och Carl.

405
00:21:11,340 --> 00:21:14,410

406
00:21:14,410 --> 00:21:15,799
Eventuella frågor hittills?

407
00:21:15,799 --> 00:21:17,590
JavaScript tyvärr
du kommer att bli

408
00:21:17,590 --> 00:21:20,950
gör en hel del tittar upp på din
egna, räkna ut syntaxen,

409
00:21:20,950 --> 00:21:21,910
brottas med den.

410
00:21:21,910 --> 00:21:25,870
Men naturligtvis är jag alltid här,
kontorstid är alltid här.

411
00:21:25,870 --> 00:21:28,260
Jag kan vara på tisdagar här veckan.

412
00:21:28,260 --> 00:21:31,050
Så om du är det, kan du
kom och besök mig den här veckan.

413
00:21:31,050 --> 00:21:32,470
Det skulle vara bra.

414
00:21:32,470 --> 00:21:36,260
>> OK, så DOM är Document-Object Model.

415
00:21:36,260 --> 00:21:38,900
Så det här är bara ett sätt
att vi vill tro

416
00:21:38,900 --> 00:21:45,720
om hur vår HTML och allt
inom den är organiserad.

417
00:21:45,720 --> 00:21:49,930
Detta är mycket något som
kommer förmodligen komma upp på din frågesport.

418
00:21:49,930 --> 00:21:58,150
Jag vet mitt år, det var som här är
HTML-fil, fyll i DOM för det.

419
00:21:58,150 --> 00:21:59,770
Och du bara fylla i lite saker.

420
00:21:59,770 --> 00:22:01,500
Dessa bör vara enkla poäng förhoppningsvis.

421
00:22:01,500 --> 00:22:03,450
Förhoppningsvis kommer du see--

422
00:22:03,450 --> 00:22:04,590
>> PUBLIK: [OHÖRBAR]

423
00:22:04,590 --> 00:22:06,660
>> ALLISON Buchholtz-AU: So
du ser det här trädet här?

424
00:22:06,660 --> 00:22:07,200
>> PUBLIK: Ja.

425
00:22:07,200 --> 00:22:08,949
>> ALLISON Buchholtz-AU:
Så de kommer att be användning

426
00:22:08,949 --> 00:22:11,750
att fylla i vad som händer under kroppen.

427
00:22:11,750 --> 00:22:15,770
Kanske under kroppen, har vi några
divar eller vi har några stycken,

428
00:22:15,770 --> 00:22:19,160
och vi kommer att be dig att fylla i
ett träd mycket som här.

429
00:22:19,160 --> 00:22:21,440
Så vi kommer att gå igenom det.

430
00:22:21,440 --> 00:22:26,120
Så Document-Object
Modell är bara ett sätt

431
00:22:26,120 --> 00:22:31,240
att strukturera och tänka
om vår HTML grafiskt.

432
00:22:31,240 --> 00:22:33,860

433
00:22:33,860 --> 00:22:35,840
Och även när vi får
till mer JavaScript

434
00:22:35,840 --> 00:22:37,640
det kommer att bli den
sätt som vi faktiskt

435
00:22:37,640 --> 00:22:39,990
manipulera olika
element på sidan.

436
00:22:39,990 --> 00:22:43,980
Vi behöver ett sätt att komma åt varje
av de saker i vår HTML,

437
00:22:43,980 --> 00:22:48,050
och så detta ger oss en mycket
konkret standardiserat sätt

438
00:22:48,050 --> 00:22:51,010
över olika webbsidor för att göra det.

439
00:22:51,010 --> 00:22:53,440
>> Så om vi bara gå igenom
detta här, naturligtvis

440
00:22:53,440 --> 00:22:56,790
vårt dokument är som hela vår fil.

441
00:22:56,790 --> 00:22:59,350
Det gör naturligtvis vettigt
att det är den högsta sak,

442
00:22:59,350 --> 00:23:03,520
och sedan har vi våra faktiska HTML,
som motsvarar denna tagg här.

443
00:23:03,520 --> 00:23:08,480
Även om du i strecksats dina taggar
ordentligt, sedan skapa denna DOM-trädet

444
00:23:08,480 --> 00:23:10,530
blir super enkelt.

445
00:23:10,530 --> 00:23:12,400
Så vi har lite huvudet här.

446
00:23:12,400 --> 00:23:15,780
Vi har några organ som
Vi ser stem bort av HTML,

447
00:23:15,780 --> 00:23:18,530
det är därför vi har huvud och kropp.

448
00:23:18,530 --> 00:23:22,880
Inom huvudet, har vi några
rubriktaggen, en slutrubriktaggen,

449
00:23:22,880 --> 00:23:24,570
så vi vet att kommer efter huvudet.

450
00:23:24,570 --> 00:23:28,040
Och inom vår rubriktaggen,
vi har hej, värld.

451
00:23:28,040 --> 00:23:28,740
OK?

452
00:23:28,740 --> 00:23:31,311
Så det är här hela vänstra grenen.

453
00:23:31,311 --> 00:23:34,060
Och sedan för den högra grenen
Här ser vi att vi har HTML,

454
00:23:34,060 --> 00:23:38,680
OK vi har gjort den här huvuddelen,
Vi tittar bara på kroppen,

455
00:23:38,680 --> 00:23:40,670
så vi har lite kroppsområde.

456
00:23:40,670 --> 00:23:44,350
Och inom denna, den enda
Det vi har är hej, värld.

457
00:23:44,350 --> 00:23:45,090
OK?

458
00:23:45,090 --> 00:23:54,130
Om vi ​​hade saker som
vissa fäste p och sedan

459
00:23:54,130 --> 00:23:57,500
Hej, värld, och sedan en annan
fäste p av goodbye, värld,

460
00:23:57,500 --> 00:24:00,080
Vi skulle ha två bubblor
kommer ut av här.

461
00:24:00,080 --> 00:24:05,550
Eftersom de är båda under kroppen, men
de är separata stycken här fallet.

462
00:24:05,550 --> 00:24:11,520
Det är definitivt praxis
om det i tidigare frågesporter,

463
00:24:11,520 --> 00:24:14,570
samt massor på nätet på den.

464
00:24:14,570 --> 00:24:18,260
OK så, detta bara låter
oss se allt fint

465
00:24:18,260 --> 00:24:20,810
och manipulera saker
mycket systematiskt.

466
00:24:20,810 --> 00:24:21,340
OK?

467
00:24:21,340 --> 00:24:23,640
Vi vet exakt hur man
passera igenom detta träd,

468
00:24:23,640 --> 00:24:26,910
så vi vet vad vi vill komma åt.

469
00:24:26,910 --> 00:24:31,690
>> OK så det är därför vi vill ha
att ha denna typ av modell,

470
00:24:31,690 --> 00:24:35,190
så att vi kan använda saker som detta,
och vi förstår vad de menar,

471
00:24:35,190 --> 00:24:38,370
och de är standardiserade
i alla saker som vi gör.

472
00:24:38,370 --> 00:24:45,900
Så dokument dot titel är bara
titeln our-- alla dessa

473
00:24:45,900 --> 00:24:48,960
är ganska självförklarande,
Jag gillar att tänka.

474
00:24:48,960 --> 00:24:51,660
Så de tre första
exempel säger bara,

475
00:24:51,660 --> 00:24:54,770
"OK, bara ge mig
titeln på denna webbsida. "

476
00:24:54,770 --> 00:24:58,030
Så det kommer att ge dig vad
motsvarar titeln.

477
00:24:58,030 --> 00:25:01,880
>> Dokument dot kropp kommer att ge dig
allt inom dessa kropps taggar.

478
00:25:01,880 --> 00:25:03,240
Så du kan manipulera det.

479
00:25:03,240 --> 00:25:07,820
Och dokument dot kropps dot
ange HTML är en väldigt cool man,

480
00:25:07,820 --> 00:25:11,660
och kanske inte som super
intuitivt, men det inre HTML

481
00:25:11,660 --> 00:25:13,740
motsvarar denna rätt här.

482
00:25:13,740 --> 00:25:17,410
Så om du någonsin vill
manipulera text på en sida,

483
00:25:17,410 --> 00:25:22,700
vanligtvis du kommer att göra
något med kroppen dot inre HTML.

484
00:25:22,700 --> 00:25:23,820
OK?

485
00:25:23,820 --> 00:25:31,341
Så inre HTML tenderar att hänvisa till
vad är egentligen mellan dessa taggar.

486
00:25:31,341 --> 00:25:31,840
OK?

487
00:25:31,840 --> 00:25:33,020
Och sedan användbara funktioner.

488
00:25:33,020 --> 00:25:40,390
Så om du ville få
någon av dessa, alla element,

489
00:25:40,390 --> 00:25:43,140
vi har några Id, klass
namn eller taggnamn.

490
00:25:43,140 --> 00:25:47,100
Detta är mycket lik
saker vi gjorde med CSS, eller hur?

491
00:25:47,100 --> 00:25:51,360
Där vi har några väljare som
motsvarar antingen en tagg, en klass

492
00:25:51,360 --> 00:25:53,800
att vi ger dem, eller ett ID.

493
00:25:53,800 --> 00:25:55,310
Detta är mycket samma sätt.

494
00:25:55,310 --> 00:26:00,720
Om du har något som
har viss klass av hund,

495
00:26:00,720 --> 00:26:05,800
och du säger får element genom taggnamn,
och du sätter hunden i there-- eller ledsen,

496
00:26:05,800 --> 00:26:06,610
klassnamn.

497
00:26:06,610 --> 00:26:07,770
Du kan sätta prick i det.

498
00:26:07,770 --> 00:26:11,780
Det kommer att returnera alla dem
element till er som har den klassen.

499
00:26:11,780 --> 00:26:13,880
Så du kan manipulera bara de.

500
00:26:13,880 --> 00:26:18,430
På samma sätt, kanske du bara
vill manipulera någon header, så

501
00:26:18,430 --> 00:26:20,980
vissa h1 header, som vi gjorde.

502
00:26:20,980 --> 00:26:24,900
Du kan göra få element via tagg
namn, eftersom h1 är ett taggnamn.

503
00:26:24,900 --> 00:26:29,270
Och på samma sätt, om du vill få
vissa unika sak, kan du få tag.

504
00:26:29,270 --> 00:26:31,100
Få elementet genom Id.

505
00:26:31,100 --> 00:26:32,710
Och de är faktiskt massor av dessa.

506
00:26:32,710 --> 00:26:36,300
Dessa är bara som tre av väldigt många.

507
00:26:36,300 --> 00:26:39,600
Så om du går online, som
Jag ska uppmuntra

508
00:26:39,600 --> 00:26:45,342
dig att göra, och göra en del
forskning på egen hand,

509
00:26:45,342 --> 00:26:48,450
Jag rekommenderar definitivt
undersöker alla dem.

510
00:26:48,450 --> 00:26:50,880
De kunde vara super
användbara, särskilt när

511
00:26:50,880 --> 00:26:57,180
du vill bara typ av manipulera
mycket specifika saker utan att ha

512
00:26:57,180 --> 00:27:00,390
att gå igenom och försök
att tolka ut allt.

513
00:27:00,390 --> 00:27:03,540
>> OK, så det sista
är JavaScript-händelser.

514
00:27:03,540 --> 00:27:10,730
Så när jag pratade tidigare
om att gå in på en hemsida,

515
00:27:10,730 --> 00:27:14,340
och när du för muspekaren över något,
eller musen svävar över något,

516
00:27:14,340 --> 00:27:15,420
något annat händer.

517
00:27:15,420 --> 00:27:17,900
Detta är vad vi skulle vilja
tänka som en händelse.

518
00:27:17,900 --> 00:27:23,970
Så vad vi har att styrka
vara användbar här är onclick.

519
00:27:23,970 --> 00:27:29,140
Så gruvan var på hover, vilket jag är
ganska säker, är bara på hover.

520
00:27:29,140 --> 00:27:31,300
Också en ton av dessa
att du kan leta efter.

521
00:27:31,300 --> 00:27:34,340
Det finns en hel lista på nätet
av de olika saker

522
00:27:34,340 --> 00:27:37,130
att du kan lyssna på.

523
00:27:37,130 --> 00:27:41,220
>> Men JavaScript-händelser är
i princip bara reagera på saker

524
00:27:41,220 --> 00:27:42,430
att ditt användarnamn gör.

525
00:27:42,430 --> 00:27:42,930
Rätt?

526
00:27:42,930 --> 00:27:45,220
Så din användaren gör
något, det är en händelse,

527
00:27:45,220 --> 00:27:48,340
och JavaScript kommer att svara
men du vill att den ska.

528
00:27:48,340 --> 00:27:49,770
Det kommer att reagera därefter.

529
00:27:49,770 --> 00:27:54,630
Så i det här fallet har vi
vissa fönster dot onload.

530
00:27:54,630 --> 00:27:57,170
Så vad detta säger är, "vänta
tills fönstrets laddad. "

531
00:27:57,170 --> 00:27:57,780
OK?

532
00:27:57,780 --> 00:28:02,102
Så när allt är laddad, onload,
då kan du utföra denna funktion.

533
00:28:02,102 --> 00:28:03,810
Så när allt är
laddad, du kommer

534
00:28:03,810 --> 00:28:07,760
att ha lite sökknappen
som får ett element av Id,

535
00:28:07,760 --> 00:28:13,740
och det skrivs ut vad det
element är knappen Sök.

536
00:28:13,740 --> 00:28:17,050
Och så har vi denna variabel,
vi säger, "OK, onclick."

537
00:28:17,050 --> 00:28:20,390
Så när vi hör ett klick
på sökknappen

538
00:28:20,390 --> 00:28:23,990
utföra denna funktion, vilket är en
varning, klickade du på knappen Sök.

539
00:28:23,990 --> 00:28:28,910
>> Så vad händer är-- detta är en trevlig
liten grafisk representation här.

540
00:28:28,910 --> 00:28:31,480
Så våra dokumentlaster,
det är vår onload,

541
00:28:31,480 --> 00:28:34,340
vi hittar vårt sökning
knappen, vilket är det.

542
00:28:34,340 --> 00:28:36,570
Vi letar efter vår sökknappen.

543
00:28:36,570 --> 00:28:40,790
Och sedan när knappen Sök är
klickade motsvarar det just här.

544
00:28:40,790 --> 00:28:41,980
Onclick.

545
00:28:41,980 --> 00:28:47,300
Då vi äntligen varna våra användare,
vilket är det sista raden här.

546
00:28:47,300 --> 00:28:48,250
OK?

547
00:28:48,250 --> 00:28:52,960
Så var och en av dessa fyra steg bara
motsvarar de fyra rutorna

548
00:28:52,960 --> 00:28:55,031
där nere på botten.

549
00:28:55,031 --> 00:28:56,405
Betyder det vettigt att alla?

550
00:28:56,405 --> 00:29:01,120

551
00:29:01,120 --> 00:29:05,200
>> Och så en sak som jag kommer bara
tala mycket, mycket kortfattat, att jag

552
00:29:05,200 --> 00:29:08,660
uppmuntra er till
gå titta mer på är

553
00:29:08,660 --> 00:29:13,210
jQuery, som ligger bara ett bibliotek
som är byggd ovanpå JavaScript.

554
00:29:13,210 --> 00:29:16,480
Det är super användbar, såsom
med de flesta bibliotek.

555
00:29:16,480 --> 00:29:18,320
Det finns massor av funktioner.

556
00:29:18,320 --> 00:29:21,930
Så om det finns någonsin något som
du vill göra i JavaScript,

557
00:29:21,930 --> 00:29:24,880
din första instinkt
bör inte vara att tänka

558
00:29:24,880 --> 00:29:27,340
av "vilken funktion bör
Jag kod? "Det borde vara,

559
00:29:27,340 --> 00:29:29,560
"Låt mig se någons
redan gjort detta för mig. "

560
00:29:29,560 --> 00:29:32,800
Eftersom nio gånger av tio,
någon kommer ha gjort det redan,

561
00:29:32,800 --> 00:29:35,760
och de förmodligen ha gjort det bättre.

562
00:29:35,760 --> 00:29:39,990
Människor tillbringar mycket tid att göra dessa,
och Javascript är väldigt stor utsträckning,

563
00:29:39,990 --> 00:29:42,810
så att folk ständigt
försöka göra det bättre.

564
00:29:42,810 --> 00:29:47,110
Och jQuery har en hel del funktioner
som förmodligen kommer att vara användbart för dig

565
00:29:47,110 --> 00:29:50,470
i ditt slutprojekt om du är
gör något med webbdesign.

566
00:29:50,470 --> 00:29:53,480
Som jag vilja säga, "arbete
smartare, inte hårdare. "

567
00:29:53,480 --> 00:29:57,130
Om ni gör det, kommer det att bli bra.

568
00:29:57,130 --> 00:30:00,330
När vi är på hackathon jag inte
vill du vara allt stressad.

569
00:30:00,330 --> 00:30:03,600
Jag vill att du ska vara som, "Jag fick
detta. jQuery har fått min rygg.

570
00:30:03,600 --> 00:30:05,790
Jag behöver inte skriva dessa funktioner. "

571
00:30:05,790 --> 00:30:07,636
>> Så bara två saker till
minns, jag ska

572
00:30:07,636 --> 00:30:10,220
att låta er ser mer
in jQuery på egen hand.

573
00:30:10,220 --> 00:30:13,070
Allt jag tänker säga är det
gör några ganska häftigt saker

574
00:30:13,070 --> 00:30:15,220
och kan göra ditt liv
en hel del enklare.

575
00:30:15,220 --> 00:30:17,150
Men vad du vill
har är oavsett fil

576
00:30:17,150 --> 00:30:21,020
att du kommer att använda den,
du kommer att ha dessa två linjer.

577
00:30:21,020 --> 00:30:25,630
Du kommer att ha den
manus av js jQuery dot js.

578
00:30:25,630 --> 00:30:28,500
Och faktiskt din källa
kommer att bli en del URL.

579
00:30:28,500 --> 00:30:35,870
Om du Google jQuery, Google
faktiskt är värd alla filer för dig.

580
00:30:35,870 --> 00:30:38,950
Så du definitivt vill
ingång som URL i stället.

581
00:30:38,950 --> 00:30:41,130
Jag lägger just detta här
för enkelhetens skull.

582
00:30:41,130 --> 00:30:45,180
Allt detta betyder är var man
hitta din jQuery biblioteket.

583
00:30:45,180 --> 00:30:48,600
Det är massiv, så att du inte vill ha
att placera den på din egen dator

584
00:30:48,600 --> 00:30:53,390
om du kan undvika det, vilket är anledningen till att vi
tenderar att bara sätta i Googles URL som

585
00:30:53,390 --> 00:30:55,880
värd alla dessa filer för dig.

586
00:30:55,880 --> 00:30:56,380
OK?

587
00:30:56,380 --> 00:30:58,850
Du Google det, jag lovar
Det kommer att vara där.

588
00:30:58,850 --> 00:31:01,200
>> Och sedan vad
JavaScript-filen som du är

589
00:31:01,200 --> 00:31:07,150
använder, så det här är bara några externa
JavaScript-fil som du använder.

590
00:31:07,150 --> 00:31:11,570
På samma sätt som vi länkar till vår CSS
filer, är detta samma sak.

591
00:31:11,570 --> 00:31:15,480
Detta kopplar bara till filen
där din JavaScript är.

592
00:31:15,480 --> 00:31:18,970
Och jag har några exempel
med enkla JavaScript.

593
00:31:18,970 --> 00:31:20,220
Så vi kommer att gå igenom det.

594
00:31:20,220 --> 00:31:27,230
Och sedan i ditt index JavaScript
vilket är ditt JavaScript-filen här,

595
00:31:27,230 --> 00:31:30,900
Detta är typ av omslaget
att du har för jQuery.

596
00:31:30,900 --> 00:31:33,860
Du är nästan 99,9
procent av tiden som går

597
00:31:33,860 --> 00:31:36,800
att ha detta i din index.js filen.

598
00:31:36,800 --> 00:31:40,010
För vad det säger är,
"Inte köra något

599
00:31:40,010 --> 00:31:43,480
tills dokumentet är faktiskt
redo ", vilket är precis vad du vill.

600
00:31:43,480 --> 00:31:46,600
För om dokumentet är inte redo,
och jQuery börjar göra saker,

601
00:31:46,600 --> 00:31:48,020
det är bara en enda röra.

602
00:31:48,020 --> 00:31:50,480
Så du alltid vill ha denna omslag.

603
00:31:50,480 --> 00:31:55,760
Och sedan för saker som går in där, jag
skall överlåta åt dina killar egna läsningen.

604
00:31:55,760 --> 00:32:04,610
>> OK, så finns det några frågor rätt
nu om JavaScript i allmänhet?

605
00:32:04,610 --> 00:32:07,420
Eller DOM modellen?

606
00:32:07,420 --> 00:32:10,780
Om inte, har vi några coola
exempel som vi kan gå igenom,

607
00:32:10,780 --> 00:32:13,120
att ni kan hjälpa mig koden.

608
00:32:13,120 --> 00:32:15,877
Men jag kommer också att vara
super trevligt, och om du

609
00:32:15,877 --> 00:32:17,960
vill inte säga något
för dessa, det är bra.

610
00:32:17,960 --> 00:32:20,510
Jag kan också bara ge er exempel.

611
00:32:20,510 --> 00:32:24,581
Men något på
PowerPoint innan vi går vidare?

612
00:32:24,581 --> 00:32:25,080
Cool.

613
00:32:25,080 --> 00:32:26,990
>> Det känns som ni behöver energi.

614
00:32:26,990 --> 00:32:31,516
Så jag tror att vi kommer att börja
med mitt parti exempel först.

615
00:32:31,516 --> 00:32:33,390
Vi har tre exemplen,
du har ditt val.

616
00:32:33,390 --> 00:32:37,720
Så vi har klocka, vart vi ska
att genomföra en faktisk klocka som är

617
00:32:37,720 --> 00:32:41,430
kommer att uppdatera med tiden.

618
00:32:41,430 --> 00:32:43,310
Vi har denna stora Twitter funktionen.

619
00:32:43,310 --> 00:32:44,560
This-- du vet vad, hålla på.

620
00:32:44,560 --> 00:32:47,220
Vi kommer att göra detta försvinna.

621
00:32:47,220 --> 00:32:47,950
Bam.

622
00:32:47,950 --> 00:32:49,060
OK.

623
00:32:49,060 --> 00:32:56,132
>> Vi har denna stora Twitter funktion
Här that-- jag vet, rätt?

624
00:32:56,132 --> 00:32:57,090
Det kommer att bli stor.

625
00:32:57,090 --> 00:32:58,350
Är ni glada?

626
00:32:58,350 --> 00:33:01,170
Det kommer att räkna antalet
tecken som du har kvar,

627
00:33:01,170 --> 00:33:04,520
så om jag skriver just nu,
uppenbarligen fortfarande står 140,

628
00:33:04,520 --> 00:33:06,190
men vi vet att det inte är fallet.

629
00:33:06,190 --> 00:33:08,570
Och sedan med vår sista
här, klicka här för att festa.

630
00:33:08,570 --> 00:33:12,150
Vad kommer att hända är när
vi klickar, bakgrunden s

631
00:33:12,150 --> 00:33:13,340
kommer att ändra färger.

632
00:33:13,340 --> 00:33:17,060
Så ni har dina alternativ av
vilken du vill göra först.

633
00:33:17,060 --> 00:33:19,800
Jag lovar att jag ska ta det väldigt lätt på dig.

634
00:33:19,800 --> 00:33:22,680
Jag känner mig som alla är snäll
på bara mycket lågmäld dag.

635
00:33:22,680 --> 00:33:25,540
Så jag ska gå igenom hur
Vi kommer att genomföra alla dessa.

636
00:33:25,540 --> 00:33:28,520
Om du vill klämta
i, det är bra, men jag

637
00:33:28,520 --> 00:33:30,020
känns som alla är lite trött.

638
00:33:30,020 --> 00:33:32,970
Så jag ska bara gå dig
genom dessa exempel.

639
00:33:32,970 --> 00:33:35,015
Har vi något som
Vi skulle vilja göra först?

640
00:33:35,015 --> 00:33:38,140

641
00:33:38,140 --> 00:33:39,475
Någon?

642
00:33:39,475 --> 00:33:41,350
Ingen preferens?

643
00:33:41,350 --> 00:33:41,867
OK.

644
00:33:41,867 --> 00:33:42,450
Vet du vad?

645
00:33:42,450 --> 00:33:43,290
Vi är på fest.

646
00:33:43,290 --> 00:33:48,380
Jag känner mig som ni behöver en little--
så kommer vi att göra partiet först.

647
00:33:48,380 --> 00:33:48,880
OK.

648
00:33:48,880 --> 00:33:51,470

649
00:33:51,470 --> 00:33:56,930
>> Så vad vi har här-- det är
inte tänkt att vara där.

650
00:33:56,930 --> 00:33:57,910
Nu är det bra.

651
00:33:57,910 --> 00:33:59,810
OK.

652
00:33:59,810 --> 00:34:03,110
Så vad vi har här är
bara en enkel HTML-sida

653
00:34:03,110 --> 00:34:07,840
att ni alla ska vara super
bekant med från dina två sista psets.

654
00:34:07,840 --> 00:34:10,212
Vi har vår doc typ här.

655
00:34:10,212 --> 00:34:10,920
Kan alla se?

656
00:34:10,920 --> 00:34:11,420
OK.

657
00:34:11,420 --> 00:34:12,560
Cool.

658
00:34:12,560 --> 00:34:13,900
Vi har vår HTML uppenbarligen.

659
00:34:13,900 --> 00:34:18,360
Vi har några huvud som är
kopplad till en formatmall som

660
00:34:18,360 --> 00:34:21,420
precis gjort min typsnitt trevlig och stora och djärva.

661
00:34:21,420 --> 00:34:23,489
Så oroa dig inte om det.

662
00:34:23,489 --> 00:34:26,437
>> Vi har lite kropp med
en Id bakgrund, OK?

663
00:34:26,437 --> 00:34:28,520
Eftersom vi kommer att vara
ändra bakgrunden.

664
00:34:28,520 --> 00:34:31,964
Så när vi förändrar
bakgrund av vår kropp,

665
00:34:31,964 --> 00:34:35,965
Vi minns från två veckor sedan
när vi har att göra med webbsidor.

666
00:34:35,965 --> 00:34:36,840
Så bra att ha det.

667
00:34:36,840 --> 00:34:39,270
Och vi har några Id lika part.

668
00:34:39,270 --> 00:34:43,909
Detta h ref pundet betyder bara att
det kommer att gå till samma sida.

669
00:34:43,909 --> 00:34:47,120
Och klicka här för att festa,
varför när vi klickar på den,

670
00:34:47,120 --> 00:34:48,940
Det borde ändra färger, tack och lov.

671
00:34:48,940 --> 00:34:54,322
>> Och då har vi några script här att
är bara kopplad till detta parti dot js

672
00:34:54,322 --> 00:34:58,100
fil, som är tom eftersom
Vi har inte gjort något ännu.

673
00:34:58,100 --> 00:35:00,450
Och det är så sorgligt.

674
00:35:00,450 --> 00:35:06,100
Men mycket snart, kommer det att förändra
färger, och det kommer att bli häftigt.

675
00:35:06,100 --> 00:35:10,520
>> Så jag ska bara gå er
igenom hur vi skulle kunna närma sig detta.

676
00:35:10,520 --> 00:35:14,030
Så det första som
vi kanske vill göra,

677
00:35:14,030 --> 00:35:18,050
om vi ändrar bakgrunden
kroppen, det första vi kanske vill

678
00:35:18,050 --> 00:35:22,730
göra är att faktiskt ta tag
vad kroppen är, eller hur?

679
00:35:22,730 --> 00:35:27,690
Så vi vill ha summan, vår
bakgrund, och om du märker,

680
00:35:27,690 --> 00:35:29,567
Jag bara automatiskt bara börja skriva.

681
00:35:29,567 --> 00:35:32,400
Det finns inget speciellt att vi
behöver göra för våra JavaScript-filer.

682
00:35:32,400 --> 00:35:35,820
Jag kan börja förklara variabler,
och förklara slumpmässiga funktioner.

683
00:35:35,820 --> 00:35:38,110
Och det är mycket mer fri form.

684
00:35:38,110 --> 00:35:41,930
Det är som med C, vi gav er alla
dessa hårda regler, och du växte upp,

685
00:35:41,930 --> 00:35:43,220
så vi är som, "gå ut.

686
00:35:43,220 --> 00:35:44,000
Var fri.

687
00:35:44,000 --> 00:35:44,870
Gör vad du vill. "

688
00:35:44,870 --> 00:35:46,280
Och det är vad JavaScript är.

689
00:35:46,280 --> 00:35:48,390
Så vi har lite bakgrund här.

690
00:35:48,390 --> 00:35:55,900
Med vår DOM modell, vet vi att vi
kan göra dokument prick få element,

691
00:35:55,900 --> 00:36:00,290
och om vi märker här,
vår kropp har ett ID.

692
00:36:00,290 --> 00:36:00,930
Rätt?

693
00:36:00,930 --> 00:36:06,310
Så vi kan får dokument genom
Id, och här är enkel.

694
00:36:06,310 --> 00:36:08,295
Vad är vårt Id som vi vill ha här?

695
00:36:08,295 --> 00:36:09,170
PUBLIK: Bakgrund.

696
00:36:09,170 --> 00:36:11,280
ALLISON Buchholtz-AU: Bakgrund.

697
00:36:11,280 --> 00:36:12,230
Perfect.

698
00:36:12,230 --> 00:36:14,250
Och semikolon vid slutet.

699
00:36:14,250 --> 00:36:15,610
Det har inte gått iväg ännu.

700
00:36:15,610 --> 00:36:17,330
Du behöver fortfarande era semikolon.

701
00:36:17,330 --> 00:36:17,830
OK.

702
00:36:17,830 --> 00:36:19,690
Så det är vår första.

703
00:36:19,690 --> 00:36:23,880
Och när vi klickar något, vi
vill ha något att hända, eller hur?

704
00:36:23,880 --> 00:36:28,270
Så vi kanske vill ha lite variabel
som väntar på ett klick.

705
00:36:28,270 --> 00:36:32,410
Vad vi ska göra är att vi kommer att
göra vår länk mer liknar en knapp.

706
00:36:32,410 --> 00:36:43,140
Så vi kommer att ha lite knapp som
lika dokumentera dot få inslag av Id.

707
00:36:43,140 --> 00:36:48,670
Och om jag talar om det
klicka länken eller klicka här för att festa

708
00:36:48,670 --> 00:36:51,850
länk, vad som kan mitt ID vara här?

709
00:36:51,850 --> 00:36:52,590
Party.

710
00:36:52,590 --> 00:36:55,200
Korrekt.

711
00:36:55,200 --> 00:36:56,500
OK inte så illa så långt.

712
00:36:56,500 --> 00:36:59,060
Alla få vad vi gör?

713
00:36:59,060 --> 00:37:02,100
>> OK, så nu har vi vår
knapp, och vi vill

714
00:37:02,100 --> 00:37:04,140
saker att förändras när vi klickar på den.

715
00:37:04,140 --> 00:37:08,750
Så om vi minns från vår PowerPoint,
mycket enkel sak vi kan göra

716
00:37:08,750 --> 00:37:12,140
är bara knapp dot onclick, eller hur?

717
00:37:12,140 --> 00:37:14,750

718
00:37:14,750 --> 00:37:18,730
Och det kommer att vara lika någon funktion.

719
00:37:18,730 --> 00:37:20,620
Detta är en anonym funktion.

720
00:37:20,620 --> 00:37:24,620
Och detta bara as-- egentligen är jag
kommer att göra detta till en lite större.

721
00:37:24,620 --> 00:37:27,330
>> Så vad jag gjorde precis
Här är jag säger, OK,

722
00:37:27,330 --> 00:37:31,810
När vi klickar vår knapp, vilket är
denna länk som vi bara nämns,

723
00:37:31,810 --> 00:37:34,270
vi kommer att köra
Detta anonym funktion.

724
00:37:34,270 --> 00:37:35,845
Vi behöver inga ingångar.

725
00:37:35,845 --> 00:37:37,220
Vi bryr oss inte vad användaren säger.

726
00:37:37,220 --> 00:37:38,800
När de klickar på den, vi är
kommer att göra vad vi vill,

727
00:37:38,800 --> 00:37:40,660
vilket är att ändra bakgrundsfärgen.

728
00:37:40,660 --> 00:37:42,640
OK?

729
00:37:42,640 --> 00:37:47,224
Så det är därför vi inte har några insatsvaror,
Vi har just detta anonym funktion.

730
00:37:47,224 --> 00:37:49,390
Och nu är vi faktiskt kommer
att skriva den här funktionen.

731
00:37:49,390 --> 00:37:55,040
>> Så det finns en massa olika sätt som du
skulle kunna generera en slumpmässig färg.

732
00:37:55,040 --> 00:37:59,010
Det sätt som jag gjorde det var att
generera tre slumptal

733
00:37:59,010 --> 00:38:01,910
och konvertera dem till en RGB-trippel.

734
00:38:01,910 --> 00:38:06,130
Så detta bara visar några coola
saker som om du är som, "Åh,

735
00:38:06,130 --> 00:38:08,464
Jag behöver för att generera en slumpmässig
nummer. "om du googlat det,

736
00:38:08,464 --> 00:38:09,630
detta är vad du skulle hitta.

737
00:38:09,630 --> 00:38:17,580
>> Så vi har tre olika
saker, var, inte röd igen, grön.

738
00:38:17,580 --> 00:38:18,080
Rätt?

739
00:38:18,080 --> 00:38:20,740
Så de är de tre
saker som gör upp en färg.

740
00:38:20,740 --> 00:38:22,220
Blå, röd och grön.

741
00:38:22,220 --> 00:38:22,960
Cool.

742
00:38:22,960 --> 00:38:27,050
Och vad vi kan göra är att vi vet
att det måste vara mellan 255,

743
00:38:27,050 --> 00:38:30,140
och om du tittade upp några
slumpgenerator,

744
00:38:30,140 --> 00:38:36,000
du kan få något som matematik
dot slumpmässigt, vilket om man tittar upp här

745
00:38:36,000 --> 00:38:39,230
återgår till vissa nummer
mellan noll och ett.

746
00:38:39,230 --> 00:38:39,980
OK?

747
00:38:39,980 --> 00:38:44,470
Och vilka nummer gör vårt
RGB tripplar går mellan?

748
00:38:44,470 --> 00:38:47,240
Noll och vad?

749
00:38:47,240 --> 00:38:49,000
Vad kan de gå upp till?

750
00:38:49,000 --> 00:38:49,950
255.

751
00:38:49,950 --> 00:38:53,320
Så om matte dot slump
går mellan noll och ett,

752
00:38:53,320 --> 00:38:56,365
Hur kan vi vill omvandla detta?

753
00:38:56,365 --> 00:38:56,990
PUBLIK: Tid?

754
00:38:56,990 --> 00:38:57,830
ALLISON Buchholtz-AU: Ja, exakt.

755
00:38:57,830 --> 00:38:58,677
Så tiden är 255.

756
00:38:58,677 --> 00:39:00,888
>> PUBLIK: [OHÖRBAR]
Det är som [OHÖRBAR].

757
00:39:00,888 --> 00:39:02,471
ALLISON Buchholtz-AU: Math dot random.

758
00:39:02,471 --> 00:39:03,096
PUBLIK: Cool.

759
00:39:03,096 --> 00:39:04,580
ALLISON Buchholtz-AU: Ja.

760
00:39:04,580 --> 00:39:06,300
JavaScript tar bara hand om dig.

761
00:39:06,300 --> 00:39:07,580
OK.

762
00:39:07,580 --> 00:39:09,360
Så vi kan göra det för alla dessa.

763
00:39:09,360 --> 00:39:10,540
Rätt?

764
00:39:10,540 --> 00:39:16,480
Math dot slumpmässiga tidpunkter 255.

765
00:39:16,480 --> 00:39:17,740
Uppfattat.

766
00:39:17,740 --> 00:39:18,820
Cool.

767
00:39:18,820 --> 00:39:23,350
Så saken är, kan detta
inte tillbaka ett heltal.

768
00:39:23,350 --> 00:39:24,080
Rätt?

769
00:39:24,080 --> 00:39:26,450
Kanske får vi ett visst antal
mellan noll och ett,

770
00:39:26,450 --> 00:39:32,150
och det får att vara något
off, och våra RGBS inte kan vara flottar.

771
00:39:32,150 --> 00:39:33,360
De måste vara ints.

772
00:39:33,360 --> 00:39:37,610
Så om du provat det här, skulle det förmodligen
har lite nyckfulla beteende.

773
00:39:37,610 --> 00:39:38,810
Det skulle vara lite funky.

774
00:39:38,810 --> 00:39:43,200
Så vad vi gör är att vi vill göra
Se till att dessa är rundade,

775
00:39:43,200 --> 00:39:45,400
och du kan runda båda hållen.

776
00:39:45,400 --> 00:39:47,110
Jag rundade med golv.

777
00:39:47,110 --> 00:39:49,680
Så jag alltid såg till
att det avrundas nedåt.

778
00:39:49,680 --> 00:39:54,440
Men att gå bort av hur enkelt det
var att bara få ett slumptal,

779
00:39:54,440 --> 00:39:57,920
Hur tror du att vi
kanske våningen här numret?

780
00:39:57,920 --> 00:40:00,720
Det är väldigt likt.

781
00:40:00,720 --> 00:40:02,810
Någon idé?

782
00:40:02,810 --> 00:40:06,450
Så om slump var bara matte dot
slumpmässigt, så tror du att vi skulle göra golvet?

783
00:40:06,450 --> 00:40:09,670
Math dot golvet.

784
00:40:09,670 --> 00:40:11,340
Och du kan också göra matte dot taket.

785
00:40:11,340 --> 00:40:14,030
Round är typ av tvetydiga
eftersom du inte

786
00:40:14,030 --> 00:40:16,110
vet om att runda upp eller avrunda nedåt.

787
00:40:16,110 --> 00:40:20,797
Så typiskt att vi alltid gör matte
dot golvet, matte dot taket.

788
00:40:20,797 --> 00:40:21,380
Men honestly--

789
00:40:21,380 --> 00:40:22,780
>> PUBLIK: Gör golv runda ner?

790
00:40:22,780 --> 00:40:24,740
>> ALLISON Buchholtz-AU: Golv rundor ner.

791
00:40:24,740 --> 00:40:26,990
Och det är bara ett val från min sida.

792
00:40:26,990 --> 00:40:32,370
>> Så nu har vi våra tre nummer
som har slumpmässigt genererade,

793
00:40:32,370 --> 00:40:36,610
och vad vi ska göra nu är att vi är
bara att ändra bakgrunden.

794
00:40:36,610 --> 00:40:37,310
OK?

795
00:40:37,310 --> 00:40:41,490
Så vi har redan vår
bakgrund slags lagrad

796
00:40:41,490 --> 00:40:43,280
i detta element som kallas bakgrunden.

797
00:40:43,280 --> 00:40:47,300
Så vad du kommer att märka är, om
du lekte med detta,

798
00:40:47,300 --> 00:40:50,460
Vi vill ändra stil.

799
00:40:50,460 --> 00:40:53,812
Och detta är typ av något som
skulle du Google och räkna ut,

800
00:40:53,812 --> 00:40:55,020
gillar hur du ändrar färg.

801
00:40:55,020 --> 00:40:59,210
>> Men sättet du kommer åt den här färgen är
bakgrund dot stil dot bakgrund.

802
00:40:59,210 --> 00:41:03,490
Så detta säger givet
detta objekt, bakgrund,

803
00:41:03,490 --> 00:41:06,920
som hänvisar till det
elementet Id uppe,

804
00:41:06,920 --> 00:41:10,690
vi kommer att titta på
stil inom stilen,

805
00:41:10,690 --> 00:41:13,280
vi kommer att titta på i bakgrunden.

806
00:41:13,280 --> 00:41:14,270
OK?

807
00:41:14,270 --> 00:41:17,630
Och om du går och tittar upp detta,
det kan göra lite mer känsla,

808
00:41:17,630 --> 00:41:21,930
men detta är i grunden bara säga,
"Ge mig detta mycket specifika attribut

809
00:41:21,930 --> 00:41:25,770
av vad jag har definierat tidigare. "

810
00:41:25,770 --> 00:41:32,340
Så vad vi ändra det till är
vissa RGB, eftersom det är vettigt.

811
00:41:32,340 --> 00:41:34,780
Vi använder RGB tripplar, eller hur?

812
00:41:34,780 --> 00:41:41,530
Och vi have-- jag vill se till att jag
få rätt antal citat i här.

813
00:41:41,530 --> 00:41:43,940
Så vad vi gör är att vi har
RGB, och vi kommer

814
00:41:43,940 --> 00:41:46,800
att-- detta är som
sammanlänkning, vilket är rött.

815
00:41:46,800 --> 00:41:50,030

816
00:41:50,030 --> 00:41:52,610
Och då är vi vill ha lite kommatecken.

817
00:41:52,610 --> 00:41:59,925
Och då vill vi plus grönt,
sedan några kommatecken, och lite blått.

818
00:41:59,925 --> 00:42:10,640

819
00:42:10,640 --> 00:42:14,120
>> Så dessa plus bara
menar som sammanfogning.

820
00:42:14,120 --> 00:42:19,810
Så det här är bara att skapa denna
sträng som händer inom RGB.

821
00:42:19,810 --> 00:42:20,310
OK?

822
00:42:20,310 --> 00:42:23,200

823
00:42:23,200 --> 00:42:26,684
>> PUBLIK: [OHÖRBAR] plus sedan
det gröna ett plus sedan den röda.

824
00:42:26,684 --> 00:42:30,163
>> ALLISON Buchholtz-AU: Ja,
eftersom jag trasslat upp det.

825
00:42:30,163 --> 00:42:30,890
Den där är bra.

826
00:42:30,890 --> 00:42:32,110
Åh, hålla på.

827
00:42:32,110 --> 00:42:32,610
Nej.

828
00:42:32,610 --> 00:42:36,770
Eftersom jag måste se till
att jag fick alla dessa rätt.

829
00:42:36,770 --> 00:42:39,680

830
00:42:39,680 --> 00:42:43,950
Så jag kommer att förklara i uno momento.

831
00:42:43,950 --> 00:42:47,040
Grönt, blått, perfekt.

832
00:42:47,040 --> 00:42:47,971
Nu är jag klar.

833
00:42:47,971 --> 00:42:48,470
Jag tror.

834
00:42:48,470 --> 00:42:51,570

835
00:42:51,570 --> 00:42:52,530
>> OK.

836
00:42:52,530 --> 00:42:58,085
Så vad det här är, är att bakgrunden
kommer att ställas till viss sträng.

837
00:42:58,085 --> 00:42:58,585
Rätt?

838
00:42:58,585 --> 00:42:59,710
Vilket är vad vi har här.

839
00:42:59,710 --> 00:43:05,870
Det kommer att bli lite RGB 255 kommatecken
255 kommatecken noll, eller vad nummer du

840
00:43:05,870 --> 00:43:06,512
har där.

841
00:43:06,512 --> 00:43:08,220
Så vi gör här,
Vi har lite sträng.

842
00:43:08,220 --> 00:43:11,910
Och vad vi vill göra, är att vi är
typ av dynamiskt skapa

843
00:43:11,910 --> 00:43:14,010
att när vi faktiskt köra programmet.

844
00:43:14,010 --> 00:43:16,570
Så detta är något snöre.

845
00:43:16,570 --> 00:43:20,290
Plus sammanfogar den med
det värde som röda har,

846
00:43:20,290 --> 00:43:23,320
som sammanfogar det med en
kommatecken, vilket sammanfogar det

847
00:43:23,320 --> 00:43:26,090
med vad grönt är, och
så vidare, och så vidare.

848
00:43:26,090 --> 00:43:26,660
OK?

849
00:43:26,660 --> 00:43:32,210
Fram till slutet, vilket är den
stängning parenteser av denna RGB här.

850
00:43:32,210 --> 00:43:32,800
OK?

851
00:43:32,800 --> 00:43:37,230
>> Så vad detta kommer att
generera en viss kommando verkligen

852
00:43:37,230 --> 00:43:42,770
dvs RGB av tre nummer
den bakgrunden är nu inställd på.

853
00:43:42,770 --> 00:43:43,940
OK?

854
00:43:43,940 --> 00:43:46,510
Så låt oss se om det fungerar.

855
00:43:46,510 --> 00:43:49,720
Jag hoppas att det gör det, för om det
inte, jag ska vara riktigt tråkigt.

856
00:43:49,720 --> 00:43:50,250
Åh nej.

857
00:43:50,250 --> 00:43:52,710
OK, hålla på.

858
00:43:52,710 --> 00:43:56,730
Definitivt bakgrund
dot stil dot bakgrund.

859
00:43:56,730 --> 00:43:59,569
Jag definitivt saknas
något bara små.

860
00:43:59,569 --> 00:44:00,610
Gör inte ni hatar det?

861
00:44:00,610 --> 00:44:04,020
När det är bara en liten liten fel?

862
00:44:04,020 --> 00:44:04,990
Allsmäktig bakgrund.

863
00:44:04,990 --> 00:44:08,391

864
00:44:08,391 --> 00:44:08,890
RGB.

865
00:44:08,890 --> 00:44:09,765
>> PUBLIK: [OHÖRBAR]

866
00:44:09,765 --> 00:44:11,729

867
00:44:11,729 --> 00:44:12,770
ALLISON Buchholtz-AU: Nej

868
00:44:12,770 --> 00:44:14,050
Jag försökte detta innan klassen.

869
00:44:14,050 --> 00:44:16,570
Jag har allt jag gjorde innan
klass i fall jag var som,

870
00:44:16,570 --> 00:44:17,970
"Vänta, vad gjorde jag för fel?"

871
00:44:17,970 --> 00:44:23,190
Eftersom jag var som, "Jag kommer förmodligen
förstöra detta någon gång. "

872
00:44:23,190 --> 00:44:24,150
Plus grönt.

873
00:44:24,150 --> 00:44:26,250
Allt ser ut som det är
sammanfogas korrekt.

874
00:44:26,250 --> 00:44:29,620

875
00:44:29,620 --> 00:44:30,520
OK.

876
00:44:30,520 --> 00:44:31,870
>> PUBLIK: [OHÖRBAR]

877
00:44:31,870 --> 00:44:33,810
>> ALLISON Buchholtz-AU: Åh, det du går.

878
00:44:33,810 --> 00:44:35,520
Det är vad jag behövde.

879
00:44:35,520 --> 00:44:36,805
Titta på det.

880
00:44:36,805 --> 00:44:40,090
Tiffany att rädda.

881
00:44:40,090 --> 00:44:40,590
Perfect.

882
00:44:40,590 --> 00:44:41,090
OK.

883
00:44:41,090 --> 00:44:43,834
Nu ska vi se om det fungerar.

884
00:44:43,834 --> 00:44:44,816
Herregud.

885
00:44:44,816 --> 00:44:45,641
OK.

886
00:44:45,641 --> 00:44:46,140
Håll ut.

887
00:44:46,140 --> 00:44:48,280
>> PUBLIK: Space efter den andra plus.

888
00:44:48,280 --> 00:44:50,310
>> ALLISON Buchholtz-AU: Vilken?

889
00:44:50,310 --> 00:44:52,910
Åh vänta, vänta.

890
00:44:52,910 --> 00:44:54,870
Rymd slitage?

891
00:44:54,870 --> 00:44:57,209
>> PUBLIK: Andra plus i
den gröna sammanfogning.

892
00:44:57,209 --> 00:44:58,250
ALLISON Buchholtz-AU: Oh.

893
00:44:58,250 --> 00:44:59,570
PUBLIK: Det finns inget utrymme
efter plus, ja.

894
00:44:59,570 --> 00:45:00,790
ALLISON Buchholtz-AU: Du
behöver inte det, men--

895
00:45:00,790 --> 00:45:01,190
PUBLIK: Åh, gör du inte?

896
00:45:01,190 --> 00:45:01,910
ALLISON Buchholtz-AU: Det ser ganska.

897
00:45:01,910 --> 00:45:02,530
PUBLIK: OK.

898
00:45:02,530 --> 00:45:03,030
OK.

899
00:45:03,030 --> 00:45:05,170
>> ALLISON Buchholtz AU:
Låt oss se om det fungerar.

900
00:45:05,170 --> 00:45:05,670
OK.

901
00:45:05,670 --> 00:45:07,836
Jag uppenbarligen misslyckas på
denna demo, vilket påminner mig

902
00:45:07,836 --> 00:45:12,810
av en föreläsning den andra veckan,
men jag vet att detta kommer att fungera.

903
00:45:12,810 --> 00:45:15,860
Jag vet att detta kommer att fungera.

904
00:45:15,860 --> 00:45:16,580
Så nära.

905
00:45:16,580 --> 00:45:22,330
Om jag inte raderade av misstag
mitt manus på den här.

906
00:45:22,330 --> 00:45:24,035
Nej, det är party prick js.

907
00:45:24,035 --> 00:45:25,776
OK håll.

908
00:45:25,776 --> 00:45:28,650
Jag kommer att kopiera detta, och jag är också
bara att ta bort allt,

909
00:45:28,650 --> 00:45:30,108
eftersom jag hade denna arbetsgrupp tidigare.

910
00:45:30,108 --> 00:45:32,470

911
00:45:32,470 --> 00:45:33,770
>> Jag lovar att det fungerar.

912
00:45:33,770 --> 00:45:36,160
Om inte, kommer jag visa dig vad Tommys är.

913
00:45:36,160 --> 00:45:38,890
Och där.

914
00:45:38,890 --> 00:45:42,380
>> PUBLIK: Du refererar parti
dot CSS, och det är en parti dot js.

915
00:45:42,380 --> 00:45:45,940
>> ALLISON Buchholtz-AU: Ah, väl
här är parti dot js.

916
00:45:45,940 --> 00:45:49,187
OK, vad gjorde jag annorlunda?

917
00:45:49,187 --> 00:45:50,520
OK, vi får se om det fungerar nu.

918
00:45:50,520 --> 00:45:54,180

919
00:45:54,180 --> 00:45:54,980
Bam.

920
00:45:54,980 --> 00:46:02,110
Så, jag vet inte vad jag gjorde annorlunda,
men detta är vad som ska hända.

921
00:46:02,110 --> 00:46:03,230
Kinda cool.

922
00:46:03,230 --> 00:46:06,650
Jag klickade på detta, liksom, för evigt.

923
00:46:06,650 --> 00:46:11,185
Men vi kan försöka och se vad jag gjorde
annorlunda att detta hade.

924
00:46:11,185 --> 00:46:14,560
Jag vet inte om ni, men detta
ser i princip vad jag skrev precis.

925
00:46:14,560 --> 00:46:17,950
Det var förmodligen en försvunnen
semikolon någonstans är min grej.

926
00:46:17,950 --> 00:46:22,064
Faktiskt efter, jag tror jag saknade
semikolon här faktiskt.

927
00:46:22,064 --> 00:46:24,230
Men jag kunde inte se det eftersom
Det var utanför skärmen.

928
00:46:24,230 --> 00:46:29,040
>> Men om vi märker, detta är ganska
mycket exakt vad jag skrev precis.

929
00:46:29,040 --> 00:46:33,010
Jag tror nog det svåraste delen om
Detta är bara typ av denna sak rätt

930
00:46:33,010 --> 00:46:36,830
Här, förståelse
vad den gör där.

931
00:46:36,830 --> 00:46:42,230
Dessa typer av saker som du lär
egentligen bara genom att googla och ärligt

932
00:46:42,230 --> 00:46:42,880
bara försöka.

933
00:46:42,880 --> 00:46:46,770
Om du tror att det finns vissa
attribut, det förmodligen är.

934
00:46:46,770 --> 00:46:48,382
Så prova det.

935
00:46:48,382 --> 00:46:49,090
Se vad som händer.

936
00:46:49,090 --> 00:46:53,000
Som jag sa, det finns en hel del
experimenterande med JavaScript

937
00:46:53,000 --> 00:46:56,810
och PHP, och allt det
grejer, och CSS speciellt.

938
00:46:56,810 --> 00:47:00,046
Det är den enda sanna
sätt att förstå det.

939
00:47:00,046 --> 00:47:07,100
>> OK, så efter att fiaskot med fest
dot js, har vi två andra alternativ.

940
00:47:07,100 --> 00:47:10,650
Vi har klocka eller Twitter.

941
00:47:10,650 --> 00:47:12,190
De är både intressant.

942
00:47:12,190 --> 00:47:17,720
Kanske inte riktigt lika roligt som part,
som hade en cool liten strobning

943
00:47:17,720 --> 00:47:19,595
sak i slutet.

944
00:47:19,595 --> 00:47:21,714
Har ni några preferenser?

945
00:47:21,714 --> 00:47:22,380
PUBLIK: Klocka?

946
00:47:22,380 --> 00:47:22,950
ALLISON Buchholtz-AU: Klocka?

947
00:47:22,950 --> 00:47:23,450
OK.

948
00:47:23,450 --> 00:47:25,390
Cool.

949
00:47:25,390 --> 00:47:30,460
>> Så återigen, har vi vår
tom JavaScript-fil.

950
00:47:30,460 --> 00:47:35,800
Och som vi ser här, vi
har några mycket enkel HTML.

951
00:47:35,800 --> 00:47:40,010
Vi har vår stilmall, som bara
forma hur det ska se ut.

952
00:47:40,010 --> 00:47:42,860
Vi har vår div med
ett ID på klocka, som

953
00:47:42,860 --> 00:47:44,420
bara säger, "det här borde vara en klocka."

954
00:47:44,420 --> 00:47:47,650
Och vi har vår länk
till vår JavaScript-fil

955
00:47:47,650 --> 00:47:51,400
som är faktiskt kommer att
generera vår klocka för oss.

956
00:47:51,400 --> 00:47:56,060
Eftersom det häftiga är att du kan
ställa JavaScript för att automatiskt uppdatera

957
00:47:56,060 --> 00:47:56,963
själv.

958
00:47:56,963 --> 00:47:57,810
OK?

959
00:47:57,810 --> 00:48:01,580
Så istället för att vänta på
användaren att slå Uppdatera på en sida

960
00:48:01,580 --> 00:48:03,840
så att du kan få
uppdaterade tid, JavaScript

961
00:48:03,840 --> 00:48:06,760
kan uppdatera den men det gillar.

962
00:48:06,760 --> 00:48:12,082
>> Så, som med vårt sista, vi ville
att få tillgång till vår bakgrund, eller hur?

963
00:48:12,082 --> 00:48:14,790
Så vad tror du kan vara den
första vi vill göra här?

964
00:48:14,790 --> 00:48:19,538
Om vi ​​slags gå ut
denna typ av paradigm här?

965
00:48:19,538 --> 00:48:22,200
Vi vill förmodligen
tillgång till vår klocka, eller hur?

966
00:48:22,200 --> 00:48:24,724
Så, har vi några var
klocka, som equals--

967
00:48:24,724 --> 00:48:26,140
Vad tror vi att det kommer att bli?

968
00:48:26,140 --> 00:48:29,290

969
00:48:29,290 --> 00:48:42,670
Dokument prick få elementet by-- jag också
älskar Sublime-- Id och vår Id är klockan.

970
00:48:42,670 --> 00:48:43,585
Semikolon.

971
00:48:43,585 --> 00:48:45,710
Fick se till att få
dessa semikolon denna tid,

972
00:48:45,710 --> 00:48:47,835
eftersom jag känner mig sådär
var problemet förra gången.

973
00:48:47,835 --> 00:48:55,980
OK så, som jag säger bara med att försöka
ha JavaScript uppdatera sig själv,

974
00:48:55,980 --> 00:48:59,655
det finns denna stora funktion, jag
vet att det kom praktiskt förra året,

975
00:48:59,655 --> 00:49:02,780
Jag är inte säker på att det är praktiskt för detta
pset, men det kallas inställt intervall.

976
00:49:02,780 --> 00:49:05,640

977
00:49:05,640 --> 00:49:08,200
Och det här är faktiskt riktigt
coolt om ni gör något

978
00:49:08,200 --> 00:49:11,460
med tiden eller att få
uppdaterad information.

979
00:49:11,460 --> 00:49:13,700
På en hemsida för en slutlig
Projektet är detta förmodligen

980
00:49:13,700 --> 00:49:16,240
en funktion som du vill
få super bekant med.

981
00:49:16,240 --> 00:49:19,730
Så vad inställd intervall gör är att
vi kommer att ge det en funktion,

982
00:49:19,730 --> 00:49:21,830
och hur ofta det ska
kallar denna funktion.

983
00:49:21,830 --> 00:49:22,430
OK?

984
00:49:22,430 --> 00:49:26,890
>> Så i det här fallet, vi kommer bara att
skapa någon anonym funktion igen,

985
00:49:26,890 --> 00:49:31,530
OK, som kommer att få
våra datum, och vår tid,

986
00:49:31,530 --> 00:49:33,780
och sedan uppdatera saker och visa den.

987
00:49:33,780 --> 00:49:35,130
Så vi ska oroa sig.

988
00:49:35,130 --> 00:49:39,120
Vi ska vara som genererar klockan här.

989
00:49:39,120 --> 00:49:41,750
Men vad vi behöver är hur
ofta för att uppdatera den.

990
00:49:41,750 --> 00:49:43,930
Så i detta fall, det är bara millisekunder.

991
00:49:43,930 --> 00:49:46,877
Så vi ska bara
gör 100 millisekunder.

992
00:49:46,877 --> 00:49:48,210
Naturligtvis helt godtyckligt.

993
00:49:48,210 --> 00:49:50,600
Om du ville att det skulle uppdatera
mycket långsammare, kunde du.

994
00:49:50,600 --> 00:49:53,300
Vi kan röra runt
med inställt intervall,

995
00:49:53,300 --> 00:49:57,240
hur stor vår intervallet är när vi får
en fungerande klocka, som förhoppningsvis ska jag

996
00:49:57,240 --> 00:49:59,660
komma till.

997
00:49:59,660 --> 00:50:04,110
Så det här är bara säga, "OK, samtal
denna funktion varje 100 millisekunder. "

998
00:50:04,110 --> 00:50:04,805
OK?

999
00:50:04,805 --> 00:50:07,280
Det är allt den gör.

1000
00:50:07,280 --> 00:50:12,290
>> Så vad vi vill att vår funktion
gör är att vi vill ha vissa datum

1001
00:50:12,290 --> 00:50:14,200
och någon gång är vad
vi kommer att ha.

1002
00:50:14,200 --> 00:50:19,740
Så vi kan börja med vår
datum är lika något,

1003
00:50:19,740 --> 00:50:22,708
och vår tid är lika något
att vi inte vet ännu.

1004
00:50:22,708 --> 00:50:26,070

1005
00:50:26,070 --> 00:50:29,300
Eller egentligen, behöver vi bara datum, eftersom
datum kommer att omfatta allt.

1006
00:50:29,300 --> 00:50:34,310

1007
00:50:34,310 --> 00:50:40,010
Igen om du bara Google något om
vad du vill göra, om du skriver, "OK,

1008
00:50:40,010 --> 00:50:41,980
Jag vill få tiden
via JavaScript, "det

1009
00:50:41,980 --> 00:50:45,890
kommer att ge dig denna stora
Funktionen kallas get datum.

1010
00:50:45,890 --> 00:50:48,664
Bokstavligen, det mesta
som du vill göra,

1011
00:50:48,664 --> 00:50:50,830
JavaScript kommer att ha
det gjort för dig redan.

1012
00:50:50,830 --> 00:50:55,770
Så det är bokstavligen som nytt
få datum, vilket är creating--

1013
00:50:55,770 --> 00:50:58,600
eller nytt datum, rather--
vilket genererar

1014
00:50:58,600 --> 00:51:03,690
vissa objekt som representerar ett datum.

1015
00:51:03,690 --> 00:51:08,200
>> Och vad vi ska göra här är
Detta är-- Jag kommer att skriva detta,

1016
00:51:08,200 --> 00:51:10,820
och sedan förklara vad den gör.

1017
00:51:10,820 --> 00:51:12,560
Så jag ska se till att jag får denna rätt.

1018
00:51:12,560 --> 00:51:17,950

1019
00:51:17,950 --> 00:51:23,440
>> OK, så vad denna funktion
gör, är att vi är bara

1020
00:51:23,440 --> 00:51:30,680
skapa HTML som faktiskt
kommer att gå i vårt div id på klockan.

1021
00:51:30,680 --> 00:51:34,610
Så vad detta kommer att göra
är bara generera lite sträng, OK?

1022
00:51:34,610 --> 00:51:38,510
Det är då kommer att bli
transplanteras in i vår HTML.

1023
00:51:38,510 --> 00:51:42,130
I grund och botten vad det kommer att göra är
vad we-- vad jag kommer att visa dig

1024
00:51:42,130 --> 00:51:49,070
är att vad vi säger HTML är,
vi kommer att ersätta denna text här

1025
00:51:49,070 --> 00:51:51,090
med vad HTML är.

1026
00:51:51,090 --> 00:51:56,390
Så detta kommer att möjliggöra
oss att ändra vår klocka dot

1027
00:51:56,390 --> 00:52:00,940
HTML ifrån bara texten i detta
bör vara en klocka, att faktiskt visa

1028
00:52:00,940 --> 00:52:05,630
siffror och saker som vi bryr
om, och faktiskt vara klockan.

1029
00:52:05,630 --> 00:52:09,810
>> Så vad vi ska göra är att vi är
kommer att börja generera denna HTML.

1030
00:52:09,810 --> 00:52:16,520
Så på samma sätt som vi använde
att göra plus lika för heltal,

1031
00:52:16,520 --> 00:52:20,461
Du kan nu göra det för strängar,
förutom det kommer att sammanfoga dem.

1032
00:52:20,461 --> 00:52:20,960
Rätt?

1033
00:52:20,960 --> 00:52:26,070
Som vi såg med part prick js, detta bara
sammanfogar alla dessa saker tillsammans.

1034
00:52:26,070 --> 00:52:31,970
Så du kan sammanfoga olika bitar av
HTML från variabler, eller bitar av strängar

1035
00:52:31,970 --> 00:52:33,750
att du skriver ut
själv, och detta bara

1036
00:52:33,750 --> 00:52:38,650
verkligen ger dig möjlighet att dynamiskt
generera HTML, vilket är ganska coolt.

1037
00:52:38,650 --> 00:52:42,040
Så om du har något
väldigt användarspecifika,

1038
00:52:42,040 --> 00:52:44,130
Detta kan tillåta dig att göra det.

1039
00:52:44,130 --> 00:52:47,550
>> Så vi har HTML, till jag ska
försöka se till att jag får denna rätt.

1040
00:52:47,550 --> 00:52:49,890
Så vi kommer att göra en del h1 header.

1041
00:52:49,890 --> 00:52:53,610
Så vad är viktigt att inse här
är att detta är faktiskt bara HTML.

1042
00:52:53,610 --> 00:52:54,460
Rätt?

1043
00:52:54,460 --> 00:52:56,610
Vi skriver faktiskt
HTML-kod i här, det är

1044
00:52:56,610 --> 00:53:01,090
inte bara en sträng i det normala
sätt att vi skulle tänka på det.

1045
00:53:01,090 --> 00:53:02,930
Så vi har lite HTML.

1046
00:53:02,930 --> 00:53:04,940
Detta anses vara en sträng här men.

1047
00:53:04,940 --> 00:53:10,380
Och vi gör datum dot-- vi
vill få våra timmar.

1048
00:53:10,380 --> 00:53:12,910
Igen, om du skulle titta
upp något om datum,

1049
00:53:12,910 --> 00:53:16,160
Det skulle berätta dessa är alla
de attribut som datumet har.

1050
00:53:16,160 --> 00:53:17,670
Och här är vad du kan använda den.

1051
00:53:17,670 --> 00:53:20,620
Så det har antagligen saker som
få timmar, och få minuter,

1052
00:53:20,620 --> 00:53:24,669
och få sekunder, och få millisekunder,
och vem vet vad de har.

1053
00:53:24,669 --> 00:53:27,210
Men om man tittar in i
dokumentation, kommer allt att vara där.

1054
00:53:27,210 --> 00:53:31,980
>> Så vi har få timmar,
och sedan skulle vi vilja

1055
00:53:31,980 --> 00:53:35,614
att sammanfoga att with-- jag är
kommer att flytta detta över här.

1056
00:53:35,614 --> 00:53:38,780
Så om vi genererar just nu, vi är
faktiskt genererar tiden, eller hur?

1057
00:53:38,780 --> 00:53:43,590
Vi har timmar, och sedan vad
mellan timmar och minuter?

1058
00:53:43,590 --> 00:53:45,080
Du har ett semikolon, eller hur?

1059
00:53:45,080 --> 00:53:48,010
Så vi vill göra något semikolon här.

1060
00:53:48,010 --> 00:53:51,780
Och sedan vill vi få vår
minuter, så på samma sätt

1061
00:53:51,780 --> 00:53:56,450
att vi har datum prick få timmar,
Hur kan vi få våra minuter?

1062
00:53:56,450 --> 00:54:01,542
Det är bokstavligen vilka datum dot få
minuter, vilket jag gillar.

1063
00:54:01,542 --> 00:54:03,250
Det är som, "Åh, hur
får jag mina minuter? "

1064
00:54:03,250 --> 00:54:05,850
Jag får bara mina minuter.

1065
00:54:05,850 --> 00:54:07,500
>> OK.

1066
00:54:07,500 --> 00:54:10,990
Och sedan har vi en annan kolon här.

1067
00:54:10,990 --> 00:54:16,350
Och sedan om vi vill få våra
sekunder, hur kan vi få vår andra?

1068
00:54:16,350 --> 00:54:17,400
Datum dot få sekunder.

1069
00:54:17,400 --> 00:54:20,390

1070
00:54:20,390 --> 00:54:21,590
Jag tycker det är ganska coolt.

1071
00:54:21,590 --> 00:54:23,589
Och vad som är viktigt att
inser, är att vi också

1072
00:54:23,589 --> 00:54:31,730
måste stänga vår HTML-taggen här, eftersom
Det bör fortfarande vara giltig HTML, så h1.

1073
00:54:31,730 --> 00:54:33,481
Cool.

1074
00:54:33,481 --> 00:54:43,110
>> Så efter det kan vi göra klockan
dot inre HTML är lika med HTML.

1075
00:54:43,110 --> 00:54:43,930
OK?

1076
00:54:43,930 --> 00:54:46,470
Så kom ihåg hur jag sa
inre HTML princip

1077
00:54:46,470 --> 00:54:50,610
tar allt som är mellan
två taggar som vi talat om

1078
00:54:50,610 --> 00:54:54,470
och skär eller manipulerar
vad är det?

1079
00:54:54,470 --> 00:54:58,290
Så vad detta innebär, om
vi går tillbaka till vår klocka,

1080
00:54:58,290 --> 00:55:04,180
är att klocka hänvisar till
allt inom denna div.

1081
00:55:04,180 --> 00:55:09,770
Detta är den inre HTML
av denna Id klock div.

1082
00:55:09,770 --> 00:55:13,930
Och så det kommer att ändra det till
HTML som vi just genererade,

1083
00:55:13,930 --> 00:55:16,750
vilket, som, förhoppningsvis,
förhoppningsvis, förhoppningsvis,

1084
00:55:16,750 --> 00:55:21,026
visar tiden just nu.

1085
00:55:21,026 --> 00:55:23,960
Vi får se.

1086
00:55:23,960 --> 00:55:25,170
Självklart.

1087
00:55:25,170 --> 00:55:26,860
Så många tekniska frågor.

1088
00:55:26,860 --> 00:55:31,480
Allisons bara-- jag
av mina spel idag killar.

1089
00:55:31,480 --> 00:55:34,136
OK, fungerar det.

1090
00:55:34,136 --> 00:55:35,760
Klockan dot inre HTML.

1091
00:55:35,760 --> 00:55:42,097
Det var HTML Verkligen?

1092
00:55:42,097 --> 00:55:43,180
Också detta är vad som händer.

1093
00:55:43,180 --> 00:55:48,750
När du inte kan se något, du
titta bara på din källkod.

1094
00:55:48,750 --> 00:55:49,250
OK.

1095
00:55:49,250 --> 00:55:51,912

1096
00:55:51,912 --> 00:55:54,870
Vill du veta en cool arbete runt
att vi ska göra här?

1097
00:55:54,870 --> 00:55:55,740
>> PUBLIK: Kan du göra stora bokstäver?

1098
00:55:55,740 --> 00:55:56,580
De versaler?

1099
00:55:56,580 --> 00:55:58,996
Eftersom du har få timmar,
och sedan få minuter.

1100
00:55:58,996 --> 00:56:02,590
>> ALLISON Buchholtz-AU: Det
är få timmar och get-- oh.

1101
00:56:02,590 --> 00:56:04,945
Du är-- guldstjärna.

1102
00:56:04,945 --> 00:56:08,114

1103
00:56:08,114 --> 00:56:09,030
Det är allt ett test, grabbar.

1104
00:56:09,030 --> 00:56:13,630

1105
00:56:13,630 --> 00:56:17,330
Jag lovar att det fungerade innan klassen.

1106
00:56:17,330 --> 00:56:22,590
>> OK, men något coolt att veta är
att du kan also-- om ibland

1107
00:56:22,590 --> 00:56:26,560
dina externa filer är
bli lite galen,

1108
00:56:26,560 --> 00:56:30,960
Du kan också bara sätta dem rakt
in här, vilket tenderar att åtgärda saker.

1109
00:56:30,960 --> 00:56:35,840
Utom detta är som verkligen ful.

1110
00:56:35,840 --> 00:56:38,050
Naturligtvis formatera allt.

1111
00:56:38,050 --> 00:56:41,425
Se till att det är alla ganska.

1112
00:56:41,425 --> 00:56:41,925
OK.

1113
00:56:41,925 --> 00:56:47,200

1114
00:56:47,200 --> 00:56:50,621
>> Jag ville göra alla coola demos,
och de är bara inte tränar.

1115
00:56:50,621 --> 00:56:51,555
OK.

1116
00:56:51,555 --> 00:56:53,890
Script var klockan.

1117
00:56:53,890 --> 00:57:00,350
Iaf, vad som är viktigt är
att detta är den allmänna vägen

1118
00:57:00,350 --> 00:57:01,870
att du skulle formatera JavaScript.

1119
00:57:01,870 --> 00:57:04,490
Som ni kan se, kan det vara
mycket petiga ibland,

1120
00:57:04,490 --> 00:57:08,780
även när det var bokstavligen
arbetar två sekunder sedan.

1121
00:57:08,780 --> 00:57:11,820
Eller inte två andra sedan,
men mycket, mycket nyligen.

1122
00:57:11,820 --> 00:57:16,070
>> Så för att visa dig hur det ska se ut,
och för att visa er att jag inte är galen,

1123
00:57:16,070 --> 00:57:19,730
och att allt är exakt
Samma, det är vad det ska se ut.

1124
00:57:19,730 --> 00:57:27,410
Du ska bara göra detta övre delen
här, och om du visar sidan källa,

1125
00:57:27,410 --> 00:57:32,160
om du märker, gjorde han några
galnare saker, jag förenklat det.

1126
00:57:32,160 --> 00:57:35,710
Också, kredit till Tommy
McWilliam, som faktiskt

1127
00:57:35,710 --> 00:57:38,810
hjälpte mig att skapa dessa exempel,
det är därför jag vet att de fungerar.

1128
00:57:38,810 --> 00:57:41,560
Eftersom Tommy är en JavaScript mästare.

1129
00:57:41,560 --> 00:57:43,180
Men om vi märker, vi har några set.

1130
00:57:43,180 --> 00:57:45,170
Vi har vår klockfunktion här.

1131
00:57:45,170 --> 00:57:48,450
Detta är desto JavaScript som
vi bara skrev, eller en del av det.

1132
00:57:48,450 --> 00:57:51,470
Vi skrev precis här en rätt här.

1133
00:57:51,470 --> 00:57:54,260
Och han har en extra
funktion som bara pads det

1134
00:57:54,260 --> 00:57:57,790
genom att sätta en nolla innan ett
brev eller före ett nummer om det är

1135
00:57:57,790 --> 00:57:59,412
bara en av dem.

1136
00:57:59,412 --> 00:58:02,120
Så om du märker, detta är ganska
mycket exakt vad vi skrev precis.

1137
00:58:02,120 --> 00:58:06,230
Du har några rörliga klocka som
har vår del, få del av ID,

1138
00:58:06,230 --> 00:58:07,252
vilket är klockan.

1139
00:58:07,252 --> 00:58:08,960
Vi har vår inställt intervall
funktion, det är

1140
00:58:08,960 --> 00:58:12,670
en anonym funktion
som utför allt detta.

1141
00:58:12,670 --> 00:58:16,940
Vi har några utgångs sträng av
HTML som vi sedan dynamiskt

1142
00:58:16,940 --> 00:58:20,750
genererar genom att ha vissa
h1 header, sammanfoga

1143
00:58:20,750 --> 00:58:23,950
med få timmar, plus
vår kolon, plus få

1144
00:58:23,950 --> 00:58:26,860
protokollet, plus en annan
kolon, plus våra sekunder,

1145
00:58:26,860 --> 00:58:29,330
och slutligen slutar HTML för det.

1146
00:58:29,330 --> 00:58:34,210
Och sedan uppdatera vi vår klocka
dot inre HTML till HTML,

1147
00:58:34,210 --> 00:58:37,640
och vi uppdaterar varje 100 millisekunder.

1148
00:58:37,640 --> 00:58:39,060
OK?

1149
00:58:39,060 --> 00:58:42,470
>> Se Jag lovar jag är inte galen.

1150
00:58:42,470 --> 00:58:43,440
JAG VET INTE.

1151
00:58:43,440 --> 00:58:47,160
Jag vet inte varför det gillar inte mig.

1152
00:58:47,160 --> 00:58:54,030
Jag känner mig som ser likadan ut,
men tydligen hatar mig.

1153
00:58:54,030 --> 00:58:59,600
>> Så låt oss se om runt tre går bättre.

1154
00:58:59,600 --> 00:59:00,970
Vi håller på att se.

1155
00:59:00,970 --> 00:59:02,910
Jag är inte säker på hur detta kommer att gå.

1156
00:59:02,910 --> 00:59:06,700
Är alla minst få
cons, som bara den allmänna temat

1157
00:59:06,700 --> 00:59:08,480
av JavaScript, men?

1158
00:59:08,480 --> 00:59:15,660
Jag hoppas att det är åtminstone bra, mer
än att visa att det är lite petiga.

1159
00:59:15,660 --> 00:59:21,190
Men ditt problem som kommer att vara väldigt roligt.

1160
00:59:21,190 --> 00:59:22,590
Det kommer att bli stor.

1161
00:59:22,590 --> 00:59:24,820
Det kommer inte att vara riktigt lika trött
eftersom detta, jag tror inte det.

1162
00:59:24,820 --> 00:59:28,100
Du kommer faktiskt få
se riktigt coola saker.

1163
00:59:28,100 --> 00:59:31,734
>> Så sist men inte minst,
vi ska försöka Twitter en.

1164
00:59:31,734 --> 00:59:32,900
Jag är verkligen rädd nu, grabbar.

1165
00:59:32,900 --> 00:59:35,762
Jag vet inte hur detta kommer att gå.

1166
00:59:35,762 --> 00:59:39,930
Men bara för att ge er en liten
mer smak, är och detta faktiskt

1167
00:59:39,930 --> 00:59:44,190
manipulera strängar och
ingångar, vad vi ska göra

1168
00:59:44,190 --> 00:59:50,960
är, om vi märker här med HTML--
här har lite more--

1169
00:59:50,960 --> 00:59:57,200
vi har några textområdet, vilket
motsvarar denna text område här.

1170
00:59:57,200 --> 00:59:58,030
OK?

1171
00:59:58,030 --> 01:00:00,420
Och som har en Id av text.

1172
01:00:00,420 --> 01:00:04,520
Vi restyled det lite
med viss bredd och höjd

1173
01:00:04,520 --> 01:00:07,310
att vi har förutbestämt,
och vi har h1,

1174
01:00:07,310 --> 01:00:11,260
som just är vår header en som
representerar våra tecken kvar.

1175
01:00:11,260 --> 01:00:14,570
Vi gav det några Id av
bokstäver återstår,

1176
01:00:14,570 --> 01:00:18,660
och sedan har vi några skript
här, som jag verkligen

1177
01:00:18,660 --> 01:00:20,790
hopp tredje gången s
charmen här, grabbar.

1178
01:00:20,790 --> 01:00:26,750
>> Så vad vi vill göra,
i samma allmänna ven

1179
01:00:26,750 --> 01:00:31,480
att vi har gjort med klocka prick js
och parti dot js som vi har märkt,

1180
01:00:31,480 --> 01:00:35,980
är att vi har börjat genom att faktiskt ta tag
de saker som vi bryr oss om, eller hur?

1181
01:00:35,980 --> 01:00:42,330
Så i det här fallet finns det två
saker som vi bryr oss om, OK?

1182
01:00:42,330 --> 01:00:47,199
En sak som vi är faktiskt typ av
undersöker och dra data från,

1183
01:00:47,199 --> 01:00:48,990
och en sak som
vi är faktiskt förändras.

1184
01:00:48,990 --> 01:00:52,110

1185
01:00:52,110 --> 01:00:53,730
Så det är vår HTML.

1186
01:00:53,730 --> 01:01:00,370
Om detta är vår hemsida här, vad är
de data som vi tittar på?

1187
01:01:00,370 --> 01:01:03,860
Det kommer att bli vad som helst
texten i våra lådor, eller hur?

1188
01:01:03,860 --> 01:01:05,310
Så vad jag skriver in här.

1189
01:01:05,310 --> 01:01:08,150
Det är vad jag vill veta, eller
det är vad jag vill titta på.

1190
01:01:08,150 --> 01:01:10,690
Och vad som kommer att bli
ändra på vår hemsida?

1191
01:01:10,690 --> 01:01:13,550

1192
01:01:13,550 --> 01:01:14,880
De bokstäver återstår.

1193
01:01:14,880 --> 01:01:19,550
Så på samma sätt vill vi
börja med att initiera variabler

1194
01:01:19,550 --> 01:01:22,030
som faktiskt hålla fast dessa delar.

1195
01:01:22,030 --> 01:01:22,890
OK?

1196
01:01:22,890 --> 01:01:29,930
Så om vi har någon var
det är vår textområde,

1197
01:01:29,930 --> 01:01:33,681
och vi har några var som återstår.

1198
01:01:33,681 --> 01:01:34,180
Rätt?

1199
01:01:34,180 --> 01:01:36,190
Så dessa kommer att
håll dessa två saker.

1200
01:01:36,190 --> 01:01:42,370
Så samma sak,
Dokumentet dot-- OK, jag är

1201
01:01:42,370 --> 01:01:45,920
kommer att se till att detta är
gå till jobbet den här gången.

1202
01:01:45,920 --> 01:01:49,620
Jag är mycket övertygad.

1203
01:01:49,620 --> 01:01:53,310
OK, så om vi vill att vår
textområde, enligt

1204
01:01:53,310 --> 01:01:55,710
till vår HTML, vad är vårt identifierare?

1205
01:01:55,710 --> 01:01:56,420
Vad är vårt Id?

1206
01:01:56,420 --> 01:01:59,500

1207
01:01:59,500 --> 01:02:05,540
Det kommer bara att vara text, eftersom
detta skapar vår textområde, OK,

1208
01:02:05,540 --> 01:02:10,320
och vår Id är text, så det är
hur vi kan ta vad som finns där inne.

1209
01:02:10,320 --> 01:02:12,130
OK, semikolon.

1210
01:02:12,130 --> 01:02:13,940
Jag kommer att vara super
exakt om detta,

1211
01:02:13,940 --> 01:02:16,300
eftersom jag vill att det ska fungera den här gången.

1212
01:02:16,300 --> 01:02:22,120
OK, gör samma sak,
få del av Id.

1213
01:02:22,120 --> 01:02:25,970
Jag är verkligen undrar vad har
orsakade de andra två att förstöra.

1214
01:02:25,970 --> 01:02:29,750
OK, då i den här,
vad vill vi komma åt?

1215
01:02:29,750 --> 01:02:30,760
Vad är vår Id här?

1216
01:02:30,760 --> 01:02:33,980

1217
01:02:33,980 --> 01:02:36,261
Vi har en annan Id i
vår HTML, vad är det?

1218
01:02:36,261 --> 01:02:37,552
PUBLIK: Tecken kvar.

1219
01:02:37,552 --> 01:02:39,343
ALLISON Buchholtz-AU:
Tecken kvar.

1220
01:02:39,343 --> 01:02:43,360

1221
01:02:43,360 --> 01:02:44,330
>> OK.

1222
01:02:44,330 --> 01:02:46,010
Cool.

1223
01:02:46,010 --> 01:02:49,800
Så jag ska bara
skriva detta riktigt snabbt.

1224
01:02:49,800 --> 01:02:53,706

1225
01:02:53,706 --> 01:02:55,330
Jag kommer bara att skriva detta på andra.

1226
01:02:55,330 --> 01:02:56,190
Så textområde.

1227
01:02:56,190 --> 01:02:59,550

1228
01:02:59,550 --> 01:03:06,180
Det intressanta är B function-- där
finns massor av funktioner som inte bara

1229
01:03:06,180 --> 01:03:09,690
motsvarar din
mus, men tangentbordet.

1230
01:03:09,690 --> 01:03:10,190
OK?

1231
01:03:10,190 --> 01:03:16,540
Så du kan säga när någon tangent är
intryckt, kan du göra sådana saker.

1232
01:03:16,540 --> 01:03:20,450
Så den som vi använder
heter på knapp uppåt, vilket

1233
01:03:20,450 --> 01:03:25,320
säger, "om du har tryckt på en tangent på
tangentbordet, när användaren har lyft

1234
01:03:25,320 --> 01:03:28,064
deras fingret från den knappen,
och nyckeln har blivit opressad,

1235
01:03:28,064 --> 01:03:29,480
då ska vi göra något. "

1236
01:03:29,480 --> 01:03:29,980
OK?

1237
01:03:29,980 --> 01:03:31,370
Så detta är vettigt, eller hur?

1238
01:03:31,370 --> 01:03:33,540
Eftersom varje tecken
Vi skriver, vi ska

1239
01:03:33,540 --> 01:03:36,550
att behöva lyfta våra fingrar off
av det, så när nyckeln går upp,

1240
01:03:36,550 --> 01:03:40,980
vi kan veta att dekrementera
våra bokstäver återstår.

1241
01:03:40,980 --> 01:03:44,440
>> Så vi har en del på nyckeln
upp, och på samma sätt,

1242
01:03:44,440 --> 01:03:47,480
vi ska säga,
"OK, när vi gör det, vi

1243
01:03:47,480 --> 01:03:55,110
kommer att skapa någon funktion som
kommer att ta e ", i det här fallet,

1244
01:03:55,110 --> 01:03:58,800
och vad vi vill göra är att
beräkna antalet kvarvarande.

1245
01:03:58,800 --> 01:04:02,510
OK, så låt oss bara börja
genom att skapa en variabel.

1246
01:04:02,510 --> 01:04:05,830
Så vi har några rörliga r,
det kommer att representera

1247
01:04:05,830 --> 01:04:07,720
hur många tecken som vi har kvar.

1248
01:04:07,720 --> 01:04:08,890
OK?

1249
01:04:08,890 --> 01:04:14,540
Vi vet att vi börjar med
140, och om vi vill veta,

1250
01:04:14,540 --> 01:04:18,360
låt oss säga, längden av detta
sträng som har varit ingång,

1251
01:04:18,360 --> 01:04:20,860
Har ni någon aning
hur vi kan göra det?

1252
01:04:20,860 --> 01:04:23,900
Precis baserat bort av det uppenbara
saker, som om vi ville timmar,

1253
01:04:23,900 --> 01:04:25,870
vi använde få timmar.

1254
01:04:25,870 --> 01:04:28,860
Vi vet att våra objekt är
textområdet, men kan ni

1255
01:04:28,860 --> 01:04:33,050
tänk på vad som kan komma efter den?

1256
01:04:33,050 --> 01:04:35,280
Några idéer?

1257
01:04:35,280 --> 01:04:41,730
>> Så detta ens typ av mindre
intuitivt, men det är värde dot längd.

1258
01:04:41,730 --> 01:04:44,700
Så bara ge mig lite
värdeattribut som

1259
01:04:44,700 --> 01:04:46,500
är faktiskt längden på denna sträng.

1260
01:04:46,500 --> 01:04:50,340
Så det kommer att säga, "OK, jag letar
på hela denna sträng i textområdet,

1261
01:04:50,340 --> 01:04:52,730
och jag kommer att berätta
hur lång tid det är. "

1262
01:04:52,730 --> 01:04:55,500
För om vi minns strängar
är verkligen bara matriser,

1263
01:04:55,500 --> 01:04:58,110
så vi kan bara ta längden på dem.

1264
01:04:58,110 --> 01:05:01,860
Så vi har det.

1265
01:05:01,860 --> 01:05:04,058
Cool.

1266
01:05:04,058 --> 01:05:09,360
>> Sen vad vi vill göra är att vi
aldrig vill låta användaren

1267
01:05:09,360 --> 01:05:12,340
ange mer än
140 tecken, eller hur?

1268
01:05:12,340 --> 01:05:15,610
För om vi säger som, "Åh, du
endast har detta mycket kvar, "

1269
01:05:15,610 --> 01:05:20,522
och sedan låta dem göra det
anyways, vi har ljugit.

1270
01:05:20,522 --> 01:05:22,230
Och detta är en annan
sak som JavaScript

1271
01:05:22,230 --> 01:05:24,530
kan bli riktigt bra
för, är validering användaren

1272
01:05:24,530 --> 01:05:29,062
och se till att ditt
användaren ryms inom några regler

1273
01:05:29,062 --> 01:05:30,270
att du har skickat till dem.

1274
01:05:30,270 --> 01:05:36,020
Så om du vill göra saker som att göra
säker på att någon ingång sin e-postadress,

1275
01:05:36,020 --> 01:05:40,242
eller att se till att när de
ange två lösenord, matchas de.

1276
01:05:40,242 --> 01:05:41,200
JavaScript kan göra det.

1277
01:05:41,200 --> 01:05:44,010
Du skulle göra något liknande, "när
formuläret skickas, "eller liknande,

1278
01:05:44,010 --> 01:05:48,170
"När Skicka formulär-knapp är
klickade, kolla alla dessa saker. "

1279
01:05:48,170 --> 01:05:49,670
Och vi kan göra att JavaScript.

1280
01:05:49,670 --> 01:05:52,680
Så det är precis vad
vi ska göra här.

1281
01:05:52,680 --> 01:05:57,810
>> Så vad kan vara ett sätt att kontrollera om
de har gått över 140 tecken?

1282
01:05:57,810 --> 01:06:03,310
Vad kommer att hända med
vårt värde på r om de försöker?

1283
01:06:03,310 --> 01:06:04,760
Det kommer att vara negativ, eller hur?

1284
01:06:04,760 --> 01:06:07,380
Eller det kommer att bli mindre
än eller lika med noll.

1285
01:06:07,380 --> 01:06:13,690
Så vi kan använda en om det är
precis som allt annat.

1286
01:06:13,690 --> 01:06:14,270
OK?

1287
01:06:14,270 --> 01:06:20,480
Och vi har några textområdet dot
värde, och vad vi gör här

1288
01:06:20,480 --> 01:06:29,940
är vi bara cutting-- vad är det?

1289
01:06:29,940 --> 01:06:30,900
Ursäkta.

1290
01:06:30,900 --> 01:06:32,732
Den här, vi vill bara returnera false.

1291
01:06:32,732 --> 01:06:34,030
Jag blev förvirrad.

1292
01:06:34,030 --> 01:06:36,560
Allt frazzled från saker som inte fungerar.

1293
01:06:36,560 --> 01:06:40,010
OK, vi bara vill
return false, och då är vi

1294
01:06:40,010 --> 01:06:44,160
vill visa
återstående tecken, eller hur?

1295
01:06:44,160 --> 01:06:48,720
Så med klockan, vi gjorde
något med inner HTML, eller hur?

1296
01:06:48,720 --> 01:06:52,070
Där vi satt det lika med en del
variabel, så vad kan vi göra här?

1297
01:06:52,070 --> 01:06:54,590

1298
01:06:54,590 --> 01:06:57,750
Vad är det vi förändra inner HTML för?

1299
01:06:57,750 --> 01:07:02,843

1300
01:07:02,843 --> 01:07:03,780
>> PUBLIK: Återstående?

1301
01:07:03,780 --> 01:07:05,738
>> ALLISON Buchholtz-AU:
Vi ändrar kvar.

1302
01:07:05,738 --> 01:07:09,217

1303
01:07:09,217 --> 01:07:11,300
Okej, och vad gör vi
vill ställa in den lika med?

1304
01:07:11,300 --> 01:07:14,440

1305
01:07:14,440 --> 01:07:18,437
Det kommer att bli r, eftersom det
bör vara våra tecken kvar.

1306
01:07:18,437 --> 01:07:19,600
OK?

1307
01:07:19,600 --> 01:07:26,060
Så jag är riktigt nervös för att se om
detta fungerar nu, men vi får se.

1308
01:07:26,060 --> 01:07:28,960

1309
01:07:28,960 --> 01:07:29,460
Lämna det här.

1310
01:07:29,460 --> 01:07:34,690

1311
01:07:34,690 --> 01:07:37,700
Det är riktigt snabb.

1312
01:07:37,700 --> 01:07:38,970
[OHÖRBAR] OK.

1313
01:07:38,970 --> 01:07:44,574

1314
01:07:44,574 --> 01:07:45,990
Återigen, jag ska bara visa er.

1315
01:07:45,990 --> 01:07:49,430
Av någon anledning,
gruvan beslutar att inte arbeta,

1316
01:07:49,430 --> 01:07:53,354
men vad jag kommer att visa dig är att detta
är-- åh jag skulle sätta den i.

1317
01:07:53,354 --> 01:07:57,470
OK, märker vi samma sorts
sak här, att få textområdet.

1318
01:07:57,470 --> 01:08:01,070
>> Dessutom, om du killen varsel, om det finns
någonsin något du vill göra,

1319
01:08:01,070 --> 01:08:04,080
och du inte vet hur man gör
det, bara klicka på Visa sidkälla,

1320
01:08:04,080 --> 01:08:06,632
och de kommer att berätta för dig.

1321
01:08:06,632 --> 01:08:07,840
Ibland kommer att krypteras.

1322
01:08:07,840 --> 01:08:11,147
För din pset, krypterar vi allt,
så det bara ser ut som rappakalja.

1323
01:08:11,147 --> 01:08:13,480
Men om det någonsin en riktigt
cool hemsida som du vill,

1324
01:08:13,480 --> 01:08:17,729
om du bara klicka på Visa sidkälla,
det kommer att berätta för dig hur man gör det.

1325
01:08:17,729 --> 01:08:20,770
Så återigen, arbeta smartare, inte hårdare.

1326
01:08:20,770 --> 01:08:24,250
Och som ni ser här, alla
dessa saker är lika.

1327
01:08:24,250 --> 01:08:31,930
här här bara tar lite träng
att jag glömmer exakt vad detta innebär.

1328
01:08:31,930 --> 01:08:36,980
Men det tar naturligtvis lite träng
av värdet från noll till tio,

1329
01:08:36,980 --> 01:08:41,540
och returnerar false vad ska sluta
användaren från att mata in längre,

1330
01:08:41,540 --> 01:08:46,040
och då är det uppenbart uppdaterar
inner HTML där.

1331
01:08:46,040 --> 01:08:47,410
>> Cool.

1332
01:08:47,410 --> 01:08:53,000
Så stora ta aways från idag,
experiment, titta på källkoden

1333
01:08:53,000 --> 01:08:58,359
eftersom det kommer att hjälpa dig mycket,
och alla, ibland JavaScript

1334
01:08:58,359 --> 01:09:03,200
kan vara svårt att arbeta med och inte
alltid fungera som du förväntar dig det,

1335
01:09:03,200 --> 01:09:05,700
men bara fortsätta att försöka
eftersom jag lovar att det kommer.

1336
01:09:05,700 --> 01:09:08,376
Jag lovar alla dessa exempel
arbetade innan klassen.

1337
01:09:08,376 --> 01:09:09,750
Jag förstår inte vad som hände.

1338
01:09:09,750 --> 01:09:13,069
Jag har bokstavligen allt samma.

1339
01:09:13,069 --> 01:09:17,660
>> En sak som jag vill bara
visa er som kan vara super bra

1340
01:09:17,660 --> 01:09:21,630
är in-- vad arbetade tidigare?

1341
01:09:21,630 --> 01:09:23,935
Vi fick partiet att arbeta, inte vi?

1342
01:09:23,935 --> 01:09:26,569
Jag tror det.

1343
01:09:26,569 --> 01:09:27,069
Ja.

1344
01:09:27,069 --> 01:09:27,630
Vi gjorde.

1345
01:09:27,630 --> 01:09:28,250
Grymt.

1346
01:09:28,250 --> 01:09:31,189
OK, så en sak som
ni bör veta

1347
01:09:31,189 --> 01:09:33,340
är konsolen loggen som jag pratade om.

1348
01:09:33,340 --> 01:09:37,040
Så trösta dot logg över hello.

1349
01:09:37,040 --> 01:09:40,430
Så det här är typ av
JavaScript ekvivalent printf.

1350
01:09:40,430 --> 01:09:42,810
Så om du någonsin vill
inspektera dina variabler

1351
01:09:42,810 --> 01:09:49,649
eller se vad som händer där, vad
du kan göra är, om vi inspektera element,

1352
01:09:49,649 --> 01:09:51,899
är vad du vill gå
till, och du går att trösta,

1353
01:09:51,899 --> 01:09:53,770
du kommer att se att det skrivs ut hej.

1354
01:09:53,770 --> 01:09:55,750
>> Så vi kunde ha det
skriva ut allt vi ville.

1355
01:09:55,750 --> 01:10:04,170
Om vi ​​ville att det skulle skriva ut bakgrunden
dot stil dot bakgrund,

1356
01:10:04,170 --> 01:10:08,454
Vi borde kunna se
RGB trippel som kommer upp.

1357
01:10:08,454 --> 01:10:11,140
Eller inte.

1358
01:10:11,140 --> 01:10:13,520
Jag glömmer exakt hur du
skriva ut en variabel som detta,

1359
01:10:13,520 --> 01:10:17,249
men du bör kunna
skriva ut saker.

1360
01:10:17,249 --> 01:10:19,040
Det kommer att vara mycket användbart
för din pset när

1361
01:10:19,040 --> 01:10:23,330
du försöker manipulera
koordinater eller whatnot.

1362
01:10:23,330 --> 01:10:25,270
Så de också ändra denna pjäs i klassen.

1363
01:10:25,270 --> 01:10:30,750
Detta skiljer sig från senaste åren, så
bara vara trevligt att dina TF, eller TF

1364
01:10:30,750 --> 01:10:36,350
på kontorstid snarare eftersom vi är
typ av lärande tillsammans med er.

1365
01:10:36,350 --> 01:10:41,230
Men konsolen loggen var super, super
hjälp för JavaScript fjol.

1366
01:10:41,230 --> 01:10:42,740
Så älskar det.

1367
01:10:42,740 --> 01:10:43,780
Lär dig hur man använder det.

1368
01:10:43,780 --> 01:10:49,026
Det är lättare att använda än GDB, så att
bör vara minst ett plus.

1369
01:10:49,026 --> 01:10:50,650
Men tack killar bär med mig.

1370
01:10:50,650 --> 01:10:53,400
Jag är ledsen att min
exempel av någon anledning

1371
01:10:53,400 --> 01:10:55,410
bara inte vill
samarbeta med mig, men jag

1372
01:10:55,410 --> 01:11:01,010
hoppas att det hjälpte typ av får du en
lite mer i zonen för JavaScript.

1373
01:11:01,010 --> 01:11:04,980
Och skicka alla dina frågor till mig
nästa vecka så jag kan super repar,

1374
01:11:04,980 --> 01:11:09,420
och jag ska ta med godis och även extra
godis eftersom det var löjligt.

1375
01:11:09,420 --> 01:11:14,000
Men ni är bra,
och har en fantastisk vecka.

1376
01:11:14,000 --> 01:11:15,584