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

2
00:00:10,632 --> 00:00:12,340
ALLISON Buchholtz-AU:
Okay alle.

3
00:00:12,340 --> 00:00:13,520
Velkommen tilbage til afsnittet.

4
00:00:13,520 --> 00:00:15,315
Det er vores næstsidste sektion.

5
00:00:15,315 --> 00:00:16,542
Det er så trist.

6
00:00:16,542 --> 00:00:19,500
Jeg ved ikke, hvad jeg har tænkt mig at gøre
uden at se jer hver mandag.

7
00:00:19,500 --> 00:00:20,970
Jeg gætter vi bør bare--
måske vi kunne bare

8
00:00:20,970 --> 00:00:22,710
mødes her og har middag eller noget.

9
00:00:22,710 --> 00:00:23,270
Jeg ved det ikke.

10
00:00:23,270 --> 00:00:24,370
Jeg tager mad i stedet.

11
00:00:24,370 --> 00:00:26,290
Vi vil bare snakke.

12
00:00:26,290 --> 00:00:29,900
Men ja, i næste uge
være vores sidste afsnit.

13
00:00:29,900 --> 00:00:32,390
>> På dette notat, har du en quiz i næste uge.

14
00:00:32,390 --> 00:00:35,660
Jeg ved, at jeg har glemt at gøre mit, ligesom,
to uger varsel i sidste uge,

15
00:00:35,660 --> 00:00:39,140
Men forhåbentlig jer
vidste det ville komme.

16
00:00:39,140 --> 00:00:42,880
Forhåbentlig er dette en af ​​de sidste
midterms for jer til semester.

17
00:00:42,880 --> 00:00:46,950
Men det kommer til at omfatte alle de
materiale, som vi har gået forbi.

18
00:00:46,950 --> 00:00:50,811
Så det er ikke ligesom du kan bare glemme
omkring fire sløjfer eller variable.

19
00:00:50,811 --> 00:00:52,560
Fordi vi har lært
de i begyndelsen,

20
00:00:52,560 --> 00:00:55,870
de er naturligvis
fair spil til din quiz.

21
00:00:55,870 --> 00:01:00,150
>> Det kommer til at være det samme format, samme
længde, så du allerede er vant til det.

22
00:01:00,150 --> 00:01:02,330
Der kommer til at være
kodning i hånden problemer,

23
00:01:02,330 --> 00:01:06,270
måske nogle true false,
måske nogle korte svar.

24
00:01:06,270 --> 00:01:08,090
Så du skal være
fortrolig med det format,

25
00:01:08,090 --> 00:01:10,940
især hvis du tager
de praksis tests.

26
00:01:10,940 --> 00:01:13,950
Men som jeg siger her, det er
kumulative, men vi er helt sikkert

27
00:01:13,950 --> 00:01:17,410
vil fokusere på
ting fra uge seks og frem.

28
00:01:17,410 --> 00:01:24,050
Så vi er sandsynligvis ikke vil
spørge dig om, hvor mange bytes

29
00:01:24,050 --> 00:01:26,180
er i hver type eller
den slags ting,

30
00:01:26,180 --> 00:01:29,730
men vi sandsynligvis vil være
interesseret i ting som hægtede lister,

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

32
00:01:32,750 --> 00:01:33,960
at vi har talt om.

33
00:01:33,960 --> 00:01:38,990
Så sørg for du virkelig
op på dem, og hvis du

34
00:01:38,990 --> 00:01:41,590
brug for ressourcer,
Her er masser af ressourcer.

35
00:01:41,590 --> 00:01:44,790
Jeg gav dig slags
af en hurtig liste der.

36
00:01:44,790 --> 00:01:48,330
>> I næste uge vil være quiz
anmelder løbet af denne tid.

37
00:01:48,330 --> 00:01:52,290
Så hvis du har spørgsmål
eller specifikke emner,

38
00:01:52,290 --> 00:01:56,180
specifikke ting på quiz,
du gerne vil gå over, skal du

39
00:01:56,180 --> 00:02:01,780
sende dem til mig i god tid, så jeg kan
slags forberede noget materiale for.

40
00:02:01,780 --> 00:02:06,310
Og i tillæg til dette
sektion gennemgang, vil vi

41
00:02:06,310 --> 00:02:09,616
også holde kurset hele
gennemgå som vi gjorde sidste gang.

42
00:02:09,616 --> 00:02:11,490
Og det kommer til at blive
udført af de samme personer.

43
00:02:11,490 --> 00:02:13,030
Jeg ved ikke, om det
gør det bedre eller værre,

44
00:02:13,030 --> 00:02:15,670
men det vil være mig,
Hannah, Davan, og Gabe igen.

45
00:02:15,670 --> 00:02:18,630
Så hvis du ønsker at komme se
os alle drillerier med hinanden

46
00:02:18,630 --> 00:02:21,270
og gå dig gennem quiz
gennemgang, bør du helt sikkert

47
00:02:21,270 --> 00:02:22,600
kommer til at næste mandag også.

48
00:02:22,600 --> 00:02:26,210
Så du bare have en mandag marmelade
pakket af quiz gennemgang, hvilket er godt

49
00:02:26,210 --> 00:02:29,840
fordi så har du tirsdag
at behandle gennem alt.

50
00:02:29,840 --> 00:02:32,230
>> Men helt sikkert gøre tjek
disse ressourcer.

51
00:02:32,230 --> 00:02:36,030
Study.csv.net er langt jeg
tænke, en af ​​de mest nyttige,

52
00:02:36,030 --> 00:02:37,990
hovedsagelig fordi det har
en masse kodeeksempler,

53
00:02:37,990 --> 00:02:40,490
det har alle de Power Point
med alle de noter på den,

54
00:02:40,490 --> 00:02:44,510
der er virkelig, hvad jeg tegner mest
af mine afsnit materialer fra.

55
00:02:44,510 --> 00:02:47,480
Hvis der er noget i tidligere
sektioner, jeg kan have sendt ud

56
00:02:47,480 --> 00:02:49,920
at du ikke kan have
fået, bare lad mig det vide.

57
00:02:49,920 --> 00:02:52,520
Ligesom sidste uges kodeeksempler,
hvis nogen ikke fik det,

58
00:02:52,520 --> 00:02:55,930
bare email mig eller komme tale med mig,
og jeg vil sørge for, at du får det.

59
00:02:55,930 --> 00:03:02,000
>> Så med dette, i dag skal vi
at være tale om JavaScript.

60
00:03:02,000 --> 00:03:04,690
Så her er vi Tommy, hvem jeg var
bare at tale med dig i aftes.

61
00:03:04,690 --> 00:03:06,670
Jeg elsker Tommy.

62
00:03:06,670 --> 00:03:09,040
JavaScript er hans foretrukne
sprog, som han siger her.

63
00:03:09,040 --> 00:03:14,050
De vil forsøge at fortælle dig, at det er
ikke den bedste, og de vil være forkert.

64
00:03:14,050 --> 00:03:16,510
Så Tommy er en JavaScript mester.

65
00:03:16,510 --> 00:03:19,850
Jeg er ikke helt på hans
niveau, men jeg var ligesom,

66
00:03:19,850 --> 00:03:22,900
"Tommy, hvordan jeg underviser
disse børn JavaScript? "

67
00:03:22,900 --> 00:03:26,700
Så jeg fik nogle tips, så
forhåbentlig de arbejder ud.

68
00:03:26,700 --> 00:03:31,140
>> Så et par ting at vide, er, at
JavaScript er et klient-side scripting

69
00:03:31,140 --> 00:03:35,560
sprog, så mens PHP er noget
at vi anses for mere server-side,

70
00:03:35,560 --> 00:03:39,280
Det blev uploade til serveren,
kompileret og udføres der.

71
00:03:39,280 --> 00:03:42,871
Denne ene udføres
på din egen maskine.

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

73
00:03:43,370 --> 00:03:46,960
Så du indlæse nogle JavaScript siden
og det udfører på din maskine.

74
00:03:46,960 --> 00:03:49,910
Syntax er meget lig C og PHP.

75
00:03:49,910 --> 00:03:52,490
Vi kommer til at gå gennem
nogle eksempler på JavaScript,

76
00:03:52,490 --> 00:03:56,740
og du kommer til at se, at
måde, vi taler om variabler, løkker,

77
00:03:56,740 --> 00:03:58,910
og betingelserne er alle meget ens.

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

79
00:04:00,500 --> 00:04:04,490
Det faktum, at de er så ens, er
sandsynligvis kommer til at rejse nogle af jer

80
00:04:04,490 --> 00:04:08,529
op i nogle tilfælde, blot fordi
vil du optage en lille smule C

81
00:04:08,529 --> 00:04:09,570
hvor der ikke skulle være.

82
00:04:09,570 --> 00:04:14,130
Måske du prøve og skrive noget
når det ikke skal skrives.

83
00:04:14,130 --> 00:04:16,540
>> Og på den, en ting til
ved er, at JavaScript

84
00:04:16,540 --> 00:04:19,360
er en dynamisk indtastet
sprog, som PHP.

85
00:04:19,360 --> 00:04:21,410
Så hvis du fyre huske
fra afsnittet i sidste uge,

86
00:04:21,410 --> 00:04:23,680
da vi var slags gør
vores PHP lynkursus,

87
00:04:23,680 --> 00:04:28,860
Vi så, hvordan en streng kunne være
forvandlet til en int én, og så videre.

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

89
00:04:31,650 --> 00:04:34,850
Den type dine variabler
bestemmes på kørselstidspunktet,

90
00:04:34,850 --> 00:04:38,180
så de kan ændre sig over
løbet af programmet,

91
00:04:38,180 --> 00:04:43,109
og på samme måde, som vi aldrig
virkelig erklærer typer til PHP variabler,

92
00:04:43,109 --> 00:04:45,900
vi kommer til at gøre det samme
ting her, hvor vi er ikke rigtig

93
00:04:45,900 --> 00:04:49,740
styre de typer af vores variable,
så at sige, som vi gør i C.

94
00:04:49,740 --> 00:04:52,200
>> Og så en ting
der er temmelig cool er

95
00:04:52,200 --> 00:04:54,090
at du kan fejl
kontrollere via konsollen,

96
00:04:54,090 --> 00:04:57,240
med denne store funktion
console.log, som

97
00:04:57,240 --> 00:05:00,930
giver dig mulighed for at udskrive forskellige
variabler eller genstande, som vi vil

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

99
00:05:01,750 --> 00:05:05,720
Ligesom i sidste uge, da jeg var
som, "bruge denne funktion," med dump

100
00:05:05,720 --> 00:05:10,490
fra din pset dette er en funktion
du vil bruge, console.log.

101
00:05:10,490 --> 00:05:12,860
Jeg var så overrasket over, hvor mange
studerende på kontortid

102
00:05:12,860 --> 00:05:14,530
vidste ikke, om dump-funktionen.

103
00:05:14,530 --> 00:05:19,010
Og jeg var ligesom, "gutter, vil dette
gøre dit liv så meget lettere. "

104
00:05:19,010 --> 00:05:22,960
>> Okay, så det var slags
bare en kort ting, som altid,

105
00:05:22,960 --> 00:05:24,000
vi har eksempler.

106
00:05:24,000 --> 00:05:25,600
Jeg ved, du fyre elsker dem.

107
00:05:25,600 --> 00:05:30,930
Så her er et eksempel på et meget
simpel JavaScript-fil her.

108
00:05:30,930 --> 00:05:34,000
Så det er bare at skabe
denne pop-up, der siger,

109
00:05:34,000 --> 00:05:36,336
"Hej verden", når du
indtaste siden, men lad os

110
00:05:36,336 --> 00:05:37,960
forsøge at gå gennem dette en lille smule.

111
00:05:37,960 --> 00:05:43,440
Så selvfølgelig er det bare
ligesom din normale index.html.

112
00:05:43,440 --> 00:05:50,280
Så bare vores normale skabelon her,
og vi har HTML, vi har vores hoved,

113
00:05:50,280 --> 00:05:55,580
og ligesom med CSS, hvordan vi
omfattede nogle uden fil, ikke?

114
00:05:55,580 --> 00:05:59,260
Vi har nogle script type
tekst, er JavaScript.

115
00:05:59,260 --> 00:06:02,680
Og kilden er hello.js,
der er hernede.

116
00:06:02,680 --> 00:06:05,630
Det er hele filen for hello.js.

117
00:06:05,630 --> 00:06:09,080
Og så har vi nogle
titel og nogle organ HTML

118
00:06:09,080 --> 00:06:11,050
at vi ikke virkelig bekymrer sig om.

119
00:06:11,050 --> 00:06:15,970
>> Hvad der sker, er, når vi indlæse denne side
den automatisk udfører dette script.

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

121
00:06:16,470 --> 00:06:18,790
Så JavaScript vil
udføre automatisk.

122
00:06:18,790 --> 00:06:22,860
Så hvad det kommer til at gøre, går det
til straks at gå og udføre dette.

123
00:06:22,860 --> 00:06:24,110
Og det kommer til at sige, "alarm.

124
00:06:24,110 --> 00:06:25,190
Hej verden ".

125
00:06:25,190 --> 00:06:30,840
Hvilken alarm er den funktion,
faktisk frembringer denne boks.

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

127
00:06:31,540 --> 00:06:33,390
Så det er sådan alle Encompass.

128
00:06:33,390 --> 00:06:36,700
Der er ikke noget ekstra, vi havde
at gøre foruden bare alarm,

129
00:06:36,700 --> 00:06:40,000
og så hvad vi ville
inden for vores Alert box.

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

131
00:06:40,500 --> 00:06:45,080
Så det er bare en super enkel
eksempel på, hvad JavaScript kan gøre.

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

133
00:06:48,110 --> 00:06:50,070
>> En af de virkelig cool
ting, som vi skal se,

134
00:06:50,070 --> 00:06:55,150
er, at JavaScript giver dig
at manipulere dine websider,

135
00:06:55,150 --> 00:06:57,720
uden at
genindlæse dem hver gang.

136
00:06:57,720 --> 00:07:01,830
Så hvis du want-- for eksempel, hvis
du svæver over noget,

137
00:07:01,830 --> 00:07:04,300
hvis du fyre nogensinde har
set ligesom menulinjer,

138
00:07:04,300 --> 00:07:07,360
eller når du svæver over nogle
emne, vises en drop-down menu,

139
00:07:07,360 --> 00:07:08,670
det er på grund af JavaScript.

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

141
00:07:09,170 --> 00:07:12,670
Så du ikke at genindlæse hele
side at få denne menu til at dukke op,

142
00:07:12,670 --> 00:07:17,240
du bare på udkig efter nogle specifikke
handling, som brugeren har taget,

143
00:07:17,240 --> 00:07:21,800
som kaldes begivenheder, vi får
ind, og når du ser det, du siger,

144
00:07:21,800 --> 00:07:25,960
"OK, redigere noget på dette
side og gøre det ser anderledes,

145
00:07:25,960 --> 00:07:28,270
men kun redigere disse specifikke ting.

146
00:07:28,270 --> 00:07:29,690
Du må ikke genindlæse det hele. "

147
00:07:29,690 --> 00:07:33,110
Så det faktisk er meget pænere, og
du behøver ikke at genindlæse dine sider,

148
00:07:33,110 --> 00:07:34,510
og det er virkelig cool.

149
00:07:34,510 --> 00:07:38,270
>> Så variable erklæringer,
så du kan slags se,

150
00:07:38,270 --> 00:07:40,530
Jeg sætter på toppen her, løst skrevet.

151
00:07:40,530 --> 00:07:42,570
Så dette er meget gerne PHP.

152
00:07:42,570 --> 00:07:48,770
Vi behøver ikke at fortælle
JavaScript hvilken type vi er

153
00:07:48,770 --> 00:07:50,740
forventer hver af disse variabler for at være.

154
00:07:50,740 --> 00:07:52,560
De kan være hvad typer, vi ønsker.

155
00:07:52,560 --> 00:07:57,480
Så du bemærker i denne sag, erklærer vi
dem meget enkelt, bare med "var"

156
00:07:57,480 --> 00:08:00,990
og så hvad vi vil
vores variabelnavn at være.

157
00:08:00,990 --> 00:08:05,680
Én ting at bemærke er, at når du
sætte var foran et variabelnavn,

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

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

160
00:08:09,320 --> 00:08:14,025
Det er helt rimeligt for dig
til helt at bare slette Var

161
00:08:14,025 --> 00:08:18,970
og bare have s lig CS50, og
det ville bare være 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 initialisere det begge veje,
bare afhænger af, hvordan du vil have det.

164
00:08:22,490 --> 00:08:24,448
Så hvis du initialisering
det i en funktion,

165
00:08:24,448 --> 00:08:28,070
og du vil, at variablen til
holde scoped inden for denne funktion,

166
00:08:28,070 --> 00:08:31,620
du vil ønsker at gøre
noget som var navngive en variabel,

167
00:08:31,620 --> 00:08:34,270
versus hvis du ønsker det
globalt scoped, du

168
00:08:34,270 --> 00:08:36,240
kan bare gøre navnet
de variable og derefter

169
00:08:36,240 --> 00:08:38,270
uanset hvad du gerne vil have det sat lig med.

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

171
00:08:40,230 --> 00:08:45,580
>> Det er lidt cool ting hernede,
for hvis vi opdager vores variabel

172
00:08:45,580 --> 00:08:47,590
B starter som sandt.

173
00:08:47,590 --> 00:08:51,280
Og hvad det does-- kan
nogen fortælle mig, hvad det betyder?

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

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

176
00:08:55,890 --> 00:09:00,156
Hvad ville type B
være i begyndelsen?

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

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

179
00:09:01,330 --> 00:09:01,940
Right.

180
00:09:01,940 --> 00:09:07,260
Og så vi overflytte B
til denne streng, ikke?

181
00:09:07,260 --> 00:09:11,170
Så her, hvilken type B være?

182
00:09:11,170 --> 00:09:12,480
Det ville være en streng, ikke?

183
00:09:12,480 --> 00:09:14,900
Så hvad der er vigtigt for
meddelelse er, at i C, vi

184
00:09:14,900 --> 00:09:17,330
kunne næsten aldrig gøre
noget lignende.

185
00:09:17,330 --> 00:09:22,000
Vi er nødt til at have en variabel,
kastede det som noget andet,

186
00:09:22,000 --> 00:09:27,185
måske gøre nogle funktion med en to
i, gå fra en afgift til et heltal.

187
00:09:27,185 --> 00:09:31,063
Men hvis vi bemærker her, B
meget nemt ændrer skriver.

188
00:09:31,063 --> 00:09:33,760
>> PUBLIKUM: Vent, så du kan bare
være ligesom, "make b et heltal?"

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

190
00:09:34,360 --> 00:09:36,185
Du kan bare overflytte b for et heltal.

191
00:09:36,185 --> 00:09:36,910
>> PUBLIKUM: Virkelig?

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

193
00:09:38,035 --> 00:09:39,810
Og så ville det være en int.

194
00:09:39,810 --> 00:09:43,820
Så dine variabler kan ændre sig over
løbet af programmet også.

195
00:09:43,820 --> 00:09:46,410
De er ikke strengt indtastet.

196
00:09:46,410 --> 00:09:49,180
Det er meget løst skrevet.

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

198
00:09:50,820 --> 00:09:54,820
Dybest set dine variabler kan gøre, hvad
de ønsker, som vi slags så med PHP.

199
00:09:54,820 --> 00:09:59,430
De kan gøre nogle skøre ting, så
er det vigtigt at være temmelig forsigtig.

200
00:09:59,430 --> 00:10:01,200
Navngiv dine variabler godt.

201
00:10:01,200 --> 00:10:03,450
Hvis du ikke, gør lige pludselig
du kommer til at være ligesom,

202
00:10:03,450 --> 00:10:05,783
"Vent, jeg troede, det var en
streng, og nu er det en int,

203
00:10:05,783 --> 00:10:08,170
og jeg er ikke helt sikker
hvad der foregår her. "

204
00:10:08,170 --> 00:10:12,410
Så dette er blot et enkelt eksempel på
viser, hvordan en variabel kan let

205
00:10:12,410 --> 00:10:15,890
ændre dens type i
løbet af et program.

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

207
00:10:16,870 --> 00:10:19,200
Så dette skal se
super, super bekendt.

208
00:10:19,200 --> 00:10:21,510
Så dette er vores sløjfer i JavaScript.

209
00:10:21,510 --> 00:10:27,780
De er nøjagtig de samme, bortset fra
i stedet for fire int i er lig med nul,

210
00:10:27,780 --> 00:10:30,470
kunne vi bare sige var jeg lig med nul.

211
00:10:30,470 --> 00:10:34,100
Og så kunne vi have vores samme slags
af betingelse, samme slags opdatering,

212
00:10:34,100 --> 00:10:36,090
Jeg plus plus fungerer fint.

213
00:10:36,090 --> 00:10:39,800
Så fire er de samme,
whiles er de samme,

214
00:10:39,800 --> 00:10:41,440
og gøre whiles er nøjagtig den samme.

215
00:10:41,440 --> 00:10:44,070
Samme slags generelt format.

216
00:10:44,070 --> 00:10:48,840
Vi bemærker, fire, parenteser,
beslag, det er alle de samme.

217
00:10:48,840 --> 00:10:51,470
Der vil også være semikoloner
når vi kommer til eksempel kode.

218
00:10:51,470 --> 00:10:55,250
Du vil se det temmelig
det samme som C.

219
00:10:55,250 --> 00:10:59,770
>> For funktionserklæringer,
igen, meget ens.

220
00:10:59,770 --> 00:11:05,100
Vi har en funktion, som kun
siger, at det er en funktion, og derefter

221
00:11:05,100 --> 00:11:07,660
navnet på vores
funktion, og indgangene.

222
00:11:07,660 --> 00:11:11,590
Og igen, hvis vi bemærker, at vi
har ingen typer her overhovedet.

223
00:11:11,590 --> 00:11:12,090
Right?

224
00:11:12,090 --> 00:11:18,150
Vi har ikke noget at sige, at disse
skal være int'er eller double, eller flåd.

225
00:11:18,150 --> 00:11:19,530
De kunne være, hvad de vil.

226
00:11:19,530 --> 00:11:23,560
Hvad der er vigtigt er at bemærke, at
vi nødt til at skrive funktionen på forhånd

227
00:11:23,560 --> 00:11:26,430
at lade JavaScript ved, at
dette er faktisk en funktion.

228
00:11:26,430 --> 00:11:29,820
>> Så dette er blot nogle simple sum
funktion, der returnerer x eller y,

229
00:11:29,820 --> 00:11:33,800
og så hvad er også køligt
er, at du rent faktisk kan

230
00:11:33,800 --> 00:11:35,950
tildele en funktion til en variabel.

231
00:11:35,950 --> 00:11:41,770
Så i dette tilfælde summen er nu
funktion, der faktisk gør sum.

232
00:11:41,770 --> 00:11:47,740
Så hvis du bemærker her, vi har
funktion, navnet på funktionen, indgange.

233
00:11:47,740 --> 00:11:48,860
Right?

234
00:11:48,860 --> 00:11:52,120
Her har vi bare have funktion og indgange.

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

236
00:11:54,310 --> 00:11:59,265
Og det er noget, der bør være nye
til de fleste af jer, hvis ikke alle.

237
00:11:59,265 --> 00:12:01,140
Så dybest set, hvad det
betyder, at vi ikke

238
00:12:01,140 --> 00:12:03,050
nødt til navnet på vores
funktion i dette tilfælde.

239
00:12:03,050 --> 00:12:06,260
Vi kan bare sige, "OK, jeg har tænkt mig at
har denne funktion, udfører, her

240
00:12:06,260 --> 00:12:08,550
er dens input, og her er
hvad det kommer til at gøre. "

241
00:12:08,550 --> 00:12:12,540
Og især når du tildele
en funktion til nogle variable

242
00:12:12,540 --> 00:12:14,950
at du kommer til at manipulere,
Du behøver ikke nødvendigvis

243
00:12:14,950 --> 00:12:17,116
nødt til at navngive det, fordi
du kommer til at henvise

244
00:12:17,116 --> 00:12:20,990
det ved denne variabel
navn, ikke ved, hvad

245
00:12:20,990 --> 00:12:22,840
funktionen blev faktisk kaldt.

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

247
00:12:23,550 --> 00:12:27,810
>> Så hvis vi ser her, vi
har nogle variable sum nu

248
00:12:27,810 --> 00:12:30,920
der er lig med den
sum af tre og fem.

249
00:12:30,920 --> 00:12:33,070
Og vi ville få det.

250
00:12:33,070 --> 00:12:36,750
Og det ville bare have nogle alarm,
tre plus fem er lig med nummeret.

251
00:12:36,750 --> 00:12:43,950
Dette plus vil bare sammenkæde
uanset vores svar var på strengen.

252
00:12:43,950 --> 00:12:47,420
Også køligt, plus kan sammenkæde strenge.

253
00:12:47,420 --> 00:12:53,510
>> For JavaScript, som med PHP,
HTML og CSS som vi sagde,

254
00:12:53,510 --> 00:12:56,450
en masse af det vi er slags tage
de uddannelse hjul off her

255
00:12:56,450 --> 00:13:02,030
og du fyre har en masse know
hvordan man virkelig forstå disse ting.

256
00:13:02,030 --> 00:13:04,280
De er lidt anderledes,
men de er ikke så fremmed

257
00:13:04,280 --> 00:13:09,460
og at du ikke kan google ting eller
slå dem op online med W3 skoler.

258
00:13:09,460 --> 00:13:12,755
Og vi er virkelig forventer du
fyre til, slags, eksperiment

259
00:13:12,755 --> 00:13:14,400
og lære på egen hånd.

260
00:13:14,400 --> 00:13:19,490
Så jeg ved, at dette kan synes en smule
mindre grundig end nogle af de C-ting

261
00:13:19,490 --> 00:13:21,936
vi gør, men det er faktisk en grund til.

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

263
00:13:25,060 --> 00:13:28,470
Men forhåbentlig er det ikke alt
anderledes, og det er ikke overvældende.

264
00:13:28,470 --> 00:13:31,940
>> Så arrays i JavaScript,
igen meget, meget ens.

265
00:13:31,940 --> 00:13:32,460
Right?

266
00:13:32,460 --> 00:13:36,520
Vi har nogle variable matrix
der er lig med tomme parenteser,

267
00:13:36,520 --> 00:13:40,340
og det er bare en tom array.

268
00:13:40,340 --> 00:13:43,420
Dette kaldes ofte
bogstavelig matrix notation.

269
00:13:43,420 --> 00:13:45,280
Det er bare én ting, vi kalder det.

270
00:13:45,280 --> 00:13:51,380
Hvis vi ser matrix to her, vi har nogle
bogstavelig array, der har tre elementer,

271
00:13:51,380 --> 00:13:51,910
ret?

272
00:13:51,910 --> 00:13:54,640
Og så har vi nogle
Var tredje element, der er

273
00:13:54,640 --> 00:13:58,060
nogle variable, der er bare
kommer til at holde denne streng, JS.

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

275
00:14:01,760 --> 00:14:06,170
>> De elementer, god til at lægge mærke til,
er adskilt af kommaer,

276
00:14:06,170 --> 00:14:07,740
ligesom vi ville forvente.

277
00:14:07,740 --> 00:14:14,630
Og du kan også få adgang til disse, som vi gjorde
i C, med dette indeks notation, ikke?

278
00:14:14,630 --> 00:14:16,950
Så forskellige fra PHP
nu, vi vil tilbage

279
00:14:16,950 --> 00:14:20,180
til bare lidt for at henvise
til ting ved indeks.

280
00:14:20,180 --> 00:14:22,189
Ligesom C, er det også nul-indekset.

281
00:14:22,189 --> 00:14:25,230
Jeg føler, at det ville være virkelig grusom
hvis de pludselig JavaScript én

282
00:14:25,230 --> 00:14:30,630
indeks, og du havde helt
genoverveje, hvordan du synes om arrays.

283
00:14:30,630 --> 00:14:36,140
>> En cool ting er, at i stedet
for at skulle do-- hvis du nogensinde

284
00:14:36,140 --> 00:14:39,240
ønskede længde af et array,
måske du gentage gennem det

285
00:14:39,240 --> 00:14:43,430
indtil du finder nogle ende, eller
du vil bare vide, hvad det er.

286
00:14:43,430 --> 00:14:49,310
Fordi JavaScript er meget løs i mere
måder end bare typen, som vi ser her,

287
00:14:49,310 --> 00:14:53,310
vi kan bare gøre dette array
større, fordi vi beslutter at.

288
00:14:53,310 --> 00:14:56,177
Hvis vi bemærker vifte tre
har tre ting til at starte,

289
00:14:56,177 --> 00:14:58,510
men så lige pludselig,
vi er ligesom, "Åh, bare for sjov.

290
00:14:58,510 --> 00:15:01,370
Vi faktisk går
at gøre det 101 ting. "

291
00:15:01,370 --> 00:15:05,300
Så hvis du nogensinde ønsker at vide
faktiske længde af dit array,

292
00:15:05,300 --> 00:15:06,680
du gør det på denne måde.

293
00:15:06,680 --> 00:15:10,470
Og vi kommer til at se en masse
af denne notation i eksemplerne,

294
00:15:10,470 --> 00:15:12,730
men med JavaScript
Det er typisk, hvad

295
00:15:12,730 --> 00:15:16,410
objekt, du taler om
dot uanset form for funktion

296
00:15:16,410 --> 00:15:17,740
du vil anvende for den.

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

298
00:15:18,240 --> 00:15:20,520
>> Så i dette tilfælde vores
formål er arrayet to,

299
00:15:20,520 --> 00:15:23,470
og vi siger, vi ønsker
længde matrix to.

300
00:15:23,470 --> 00:15:25,716
Så dette blot kræver ligesom længden på det.

301
00:15:25,716 --> 00:15:27,090
Og der vil returnere din længde.

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

303
00:15:32,610 --> 00:15:36,790
Også noget at bemærke er
at hvis vi opdager vores arrays,

304
00:15:36,790 --> 00:15:39,830
modsætning C, har de ikke
at være alle af samme type.

305
00:15:39,830 --> 00:15:41,670
Dette er meget mere som PHP.

306
00:15:41,670 --> 00:15:45,905
JavaScript er dybest set ligesom
denne interessante meld C og PHP.

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

308
00:15:50,020 --> 00:15:52,170
Så vi får ind.

309
00:15:52,170 --> 00:15:56,750
For nu, lad os bare antage
at dine arrays er dybest set

310
00:15:56,750 --> 00:16:00,640
som C arrays, i at
de er nul indekseret.

311
00:16:00,640 --> 00:16:04,120
OK, så det er alt.

312
00:16:04,120 --> 00:16:08,850
Du kan også bare udvide en
matrix til uanset indeks, du vil.

313
00:16:08,850 --> 00:16:14,260
Betragtninger vil det sandsynligvis seg
fejl på dig eller give dig nogle fejl,

314
00:16:14,260 --> 00:16:15,970
JavaScript er ligesom, "nah, det er fint.

315
00:16:15,970 --> 00:16:16,620
Jeg fik dette.

316
00:16:16,620 --> 00:16:19,460
Vi vil bare gå lige
hvor du vil. "

317
00:16:19,460 --> 00:16:24,310
>> OK, så objekter er meget vigtigt.

318
00:16:24,310 --> 00:16:29,720
Du fyre vil bruge en masse af disse
i din P sæt, hvis jeg husker korrekt.

319
00:16:29,720 --> 00:16:34,780
Så de ting, at disse er
svarende til i C er structs.

320
00:16:34,780 --> 00:16:39,290
Så du kan tænke om-- når
vi går til et eksempel til højre

321
00:16:39,290 --> 00:16:41,810
efter dette Jeg tror, ​​det vil
gøre en masse mere sense--

322
00:16:41,810 --> 00:16:45,830
men vi dybest set bruge objekter til
organisere naturligvis information.

323
00:16:45,830 --> 00:16:47,780
Når vi talte om
structs i C, vi ofte

324
00:16:47,780 --> 00:16:53,405
tale om en studerende, der havde nogle navn,
ID, hus, du ved, koncentration.

325
00:16:53,405 --> 00:16:56,030
Og det er sådan det samme
at vi bruger objekter til her.

326
00:16:56,030 --> 00:16:59,300
Det er bare at organisere
tilsvarende oplysninger.

327
00:16:59,300 --> 00:17:03,620
>> Du kan også tænke på disse som mere
svarende til associative arrays i PHP.

328
00:17:03,620 --> 00:17:10,010
Så det ville være slags ting
hvor vi har nogle nøgle med en vis værdi,

329
00:17:10,010 --> 00:17:12,859
meget lig PHP.

330
00:17:12,859 --> 00:17:15,780
Så du kan initialisere nogle
tom objekt, som vi ser heroppe,

331
00:17:15,780 --> 00:17:17,390
bare med krøllede parenteser.

332
00:17:17,390 --> 00:17:19,160
Så arrays er firkantede parenteser.

333
00:17:19,160 --> 00:17:21,220
Tomme objekter er krøllede parenteser.

334
00:17:21,220 --> 00:17:24,020
Godt forskel at have.

335
00:17:24,020 --> 00:17:27,319
Og disse er blot to forskellige
måder at angive egenskaber.

336
00:17:27,319 --> 00:17:31,460
Så dette er slags
meget mere af en måde, der

337
00:17:31,460 --> 00:17:35,220
ligner PHP, med vores
associative arrays, med vores nøgle,

338
00:17:35,220 --> 00:17:39,910
og vores værdi, hvorimod
denne ene is-- du vil

339
00:17:39,910 --> 00:17:41,920
se denne meget mere i JavaScript.

340
00:17:41,920 --> 00:17:43,550
Denne tendens til at være konventionen.

341
00:17:43,550 --> 00:17:47,660
Og på samme måde, som vi gjorde
matrix to dot længde, dette at sige:

342
00:17:47,660 --> 00:17:51,580
"OK, giv mig dette
attribut af dette objekt. "

343
00:17:51,580 --> 00:17:52,110
Right?

344
00:17:52,110 --> 00:17:55,660
Så på samme måde, det var ligesom, "giv mig
attributten længde matrix to "

345
00:17:55,660 --> 00:17:59,970
dette siger, "giv mig nogle
ejendom i vores tomme objekt. "

346
00:17:59,970 --> 00:18:02,890
Eller i dette tilfælde, er vi
tildele den til en vis værdi her.

347
00:18:02,890 --> 00:18:06,200
Men du kan også få adgang til det på den måde.

348
00:18:06,200 --> 00:18:09,090
>> Og så her er det bare
viser to forskellige alarmer.

349
00:18:09,090 --> 00:18:12,320
Så det ville vise de indberetninger
ville være nøjagtigt den samme,

350
00:18:12,320 --> 00:18:17,150
Det er blot to forskellige måder
adgang til elementet, som vi ønsker.

351
00:18:17,150 --> 00:18:19,552
Giver det mening for alle?

352
00:18:19,552 --> 00:18:21,510
Jeg har lyst til dette ene
sandsynligvis er mere fornuftigt,

353
00:18:21,510 --> 00:18:23,270
bare fordi vi kommer ud af PHP.

354
00:18:23,270 --> 00:18:26,400
Men som vi gør flere eksempler, dette
er bogstaveligt talt nøjagtig det samme.

355
00:18:26,400 --> 00:18:28,170
Meget af det er bare ændre på syntaks.

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

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

358
00:18:33,030 --> 00:18:34,180
Jeg elsker eksempler.

359
00:18:34,180 --> 00:18:40,070
Så her er nogle CS50
variabel, er et objekt,

360
00:18:40,070 --> 00:18:42,160
og vi opbevarer alt dette
oplysninger om det.

361
00:18:42,160 --> 00:18:46,680
Så vi har selvfølgelig, instruktør,
TFS, psets, og tapede.

362
00:18:46,680 --> 00:18:51,840
Så vi bemærker disse er næsten
alle forskellige typer.

363
00:18:51,840 --> 00:18:52,340
Right?

364
00:18:52,340 --> 00:18:56,230
Så objekter kan gemme
attributter af forskellige typer.

365
00:18:56,230 --> 00:19:01,220
Vi kan tænke på denne-- det er meget
ligner vores associative array i PHP.

366
00:19:01,220 --> 00:19:07,470
Så nøgle, værdi, nøgle, værdi,
nøgle, værdi, så videre og så videre.

367
00:19:07,470 --> 00:19:11,230
Hvad er også interessant på samme måde
at vi kan have arrays inden arrays,

368
00:19:11,230 --> 00:19:14,690
Vi kan også have objekter inden for
genstande eller arrays inden genstande.

369
00:19:14,690 --> 00:19:18,410
Du er aldrig rigtig er begrænset til
blot en enkelt ting.

370
00:19:18,410 --> 00:19:24,220
Vi kan få meget Inceptionesque, bare
holde går ned i kaninhullet der.

371
00:19:24,220 --> 00:19:26,080
>> Så hvis vi bemærker, at vi
har nogle naturligvis at

372
00:19:26,080 --> 00:19:31,120
er en streng, instruktør, der er en snor,
og array, en int og en boolesk.

373
00:19:31,120 --> 00:19:36,110
Så alle disse forskellige ting.

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

375
00:19:39,600 --> 00:19:42,930
Så i dette tilfælde, har vi
et array af objekter.

376
00:19:42,930 --> 00:19:45,320
Så bare gerne et objekt
kan have en matrix i det.

377
00:19:45,320 --> 00:19:47,210
Vi kan også have en række af objekter.

378
00:19:47,210 --> 00:19:51,250
Dette kan være nyttigt for
tænke ligner slags

379
00:19:51,250 --> 00:19:54,260
om, hvordan vi havde en hash
bord, havde vi et array

380
00:19:54,260 --> 00:19:56,220
af alle disse forskellige
typer structs at

381
00:19:56,220 --> 00:19:59,070
var henvisninger til forskellige
noder og whatnot.

382
00:19:59,070 --> 00:20:01,420
Men i dette tilfælde, vi
har en række af objekter.

383
00:20:01,420 --> 00:20:04,890
Så dette er ligesom et array
af associative arrays.

384
00:20:04,890 --> 00:20:09,430
Så vi har nogle første ville
være genstand med navnet James

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

386
00:20:11,340 --> 00:20:14,780
>> Du fyre kan huske
noget meget lig dette

387
00:20:14,780 --> 00:20:21,710
med din sidste pset, hvor, hvis du
trukket noget fra din database,

388
00:20:21,710 --> 00:20:24,480
den første slags
ting i dit array var

389
00:20:24,480 --> 00:20:27,110
alle de oplysninger om
den første bruger, der mødte det,

390
00:20:27,110 --> 00:20:30,765
og så er du nødt til at indeksere ind i det
at få deres bestand eller deres cache

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

392
00:20:32,110 --> 00:20:34,620
Så dette er meget det samme
ting, bare en lille ændring

393
00:20:34,620 --> 00:20:39,570
i syntaks, lidt ændring i
de ord, vi bruger til at beskrive dem.

394
00:20:39,570 --> 00:20:45,960
>> Så hvis vi ønskede, kan nogen fortælle
mig, hvad denne advarsel ville gøre her?

395
00:20:45,960 --> 00:20:48,780
Eller hvad denne bit af
kode vil gøre for os?

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

397
00:20:50,992 --> 00:20:52,616
PUBLIKUM: Det vil give dig alle de navne.

398
00:20:52,616 --> 00:20:54,900
ALLISON Buchholtz-AU: Højre, så det
ville bare advare alle de navne

399
00:20:54,900 --> 00:20:57,960
fordi det ville gå igennem
sommerhus i, så det ville starte ved nul.

400
00:20:57,960 --> 00:21:01,330
Så det vil sige, OK vi ser
på dette første objekt, som

401
00:21:01,330 --> 00:21:03,210
er den første slot i vores array.

402
00:21:03,210 --> 00:21:06,900
Og det siger, "giv mig
attribut, navnet på det pågældende objekt. "

403
00:21:06,900 --> 00:21:09,030
Så vi går her, ville vi
scan, ville vi finde navn,

404
00:21:09,030 --> 00:21:11,340
og vi ville udskrive
James, Molly og Carl.

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

406
00:21:14,410 --> 00:21:15,799
Eventuelle spørgsmål indtil videre?

407
00:21:15,799 --> 00:21:17,590
JavaScript desværre
du kommer til at være

408
00:21:17,590 --> 00:21:20,950
gør en masse for at kigge op på din
egne, finde ud af syntaks,

409
00:21:20,950 --> 00:21:21,910
kæmper med det.

410
00:21:21,910 --> 00:21:25,870
Men selvfølgelig er jeg altid her,
kontortid er altid her.

411
00:21:25,870 --> 00:21:28,260
Jeg kunne være om tirsdagen i denne uge.

412
00:21:28,260 --> 00:21:31,050
Så hvis du er der, kan du
kom og besøg mig i denne uge.

413
00:21:31,050 --> 00:21:32,470
Det ville være dejligt.

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

415
00:21:36,260 --> 00:21:38,900
Så dette er blot en måde
at vi kan lide at tænke

416
00:21:38,900 --> 00:21:45,720
om, hvordan vores HTML og alt
inden den er organiseret.

417
00:21:45,720 --> 00:21:49,930
Dette er meget noget,
vil sandsynligvis komme op på din quiz.

418
00:21:49,930 --> 00:21:58,150
Jeg kender mit år, var det som her er
HTML-fil, skal du udfylde DOM for det.

419
00:21:58,150 --> 00:21:59,770
Og du bare udfylde små ting.

420
00:21:59,770 --> 00:22:01,500
Disse bør være nemme point forhåbentlig.

421
00:22:01,500 --> 00:22:03,450
Forhåbentlig vil du see--

422
00:22:03,450 --> 00:22:04,590
>> Publikum: [uhørligt]

423
00:22:04,590 --> 00:22:06,660
>> ALLISON Buchholtz-AU: So
du ser dette træ her?

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

425
00:22:07,200 --> 00:22:08,949
>> ALLISON Buchholtz-AU:
Så de vil bede brug

426
00:22:08,949 --> 00:22:11,750
at udfylde, hvad der sker under kroppen.

427
00:22:11,750 --> 00:22:15,770
Måske under kroppen, vi har nogle
divs eller vi har nogle stykker,

428
00:22:15,770 --> 00:22:19,160
og vi vil bede dig om at udfylde
et træ meget gerne dette.

429
00:22:19,160 --> 00:22:21,440
Så vi vil gå gennem den.

430
00:22:21,440 --> 00:22:26,120
Så Document-objekt
Model er bare en måde

431
00:22:26,120 --> 00:22:31,240
at strukturere og tænke
om vores HTML grafisk.

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

433
00:22:33,860 --> 00:22:35,840
Og også når vi får
til mere JavaScript,

434
00:22:35,840 --> 00:22:37,640
det vil være det
måde, at vi faktisk

435
00:22:37,640 --> 00:22:39,990
manipulere anderledes
elementer på siden.

436
00:22:39,990 --> 00:22:43,980
Vi har brug for en måde at få adgang til hver
af de ting i vores HTML,

437
00:22:43,980 --> 00:22:48,050
og så det giver os et meget
beton standardiseret måde

438
00:22:48,050 --> 00:22:51,010
tværs af forskellige websider til at gøre det.

439
00:22:51,010 --> 00:22:53,440
>> Så hvis vi bare gå gennem
det her, naturligvis

440
00:22:53,440 --> 00:22:56,790
vores dokument er ligesom hele vores fil.

441
00:22:56,790 --> 00:22:59,350
Det naturligvis giver mening
at det er den højeste ting,

442
00:22:59,350 --> 00:23:03,520
og så har vi vores faktiske HTML,
som svarer til dette mærke her.

443
00:23:03,520 --> 00:23:08,480
Også hvis du i led dine tags
ordentligt, så skaber dette DOM-træet

444
00:23:08,480 --> 00:23:10,530
bliver super enkel.

445
00:23:10,530 --> 00:23:12,400
Så vi har nogle hoved her.

446
00:23:12,400 --> 00:23:15,780
Vi har nogle organ,
vi ser stamceller ud af HTML,

447
00:23:15,780 --> 00:23:18,530
hvilket er grunden til vi har hoved og krop.

448
00:23:18,530 --> 00:23:22,880
Inden hovedet, vi har nogle
titel-tag, en ende titel-tag,

449
00:23:22,880 --> 00:23:24,570
så vi ved, der kommer efter hovedet.

450
00:23:24,570 --> 00:23:28,040
Og inden for vores titel-tag,
vi har goddag, verden.

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

452
00:23:28,740 --> 00:23:31,311
Så det er det hele venstre gren.

453
00:23:31,311 --> 00:23:34,060
Og så til højre hånd gren
her ser vi, at vi har HTML,

454
00:23:34,060 --> 00:23:38,680
OK, vi har gjort dette hoveddelen,
vi ser bare på kroppen,

455
00:23:38,680 --> 00:23:40,670
så vi har nogle organ område.

456
00:23:40,670 --> 00:23:44,350
Og inden for denne, den eneste
ting vi har, er hej, verden.

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

458
00:23:45,090 --> 00:23:54,130
Hvis vi havde ting som
nogle beslag p og derefter

459
00:23:54,130 --> 00:23:57,500
Hej, verden, og derefter en anden
beslag p af farvel, verden,

460
00:23:57,500 --> 00:24:00,080
ville vi have to bobler
kommer ud herfra.

461
00:24:00,080 --> 00:24:05,550
Fordi de er begge under kroppen, men
de er separate stykker denne sag.

462
00:24:05,550 --> 00:24:11,520
Der er absolut praksis
om der i tidligere quizzer,

463
00:24:11,520 --> 00:24:14,570
samt masser online på det.

464
00:24:14,570 --> 00:24:18,260
OK, så er dette bare lader
os se alt pænt

465
00:24:18,260 --> 00:24:20,810
og manipulere ting
meget systematisk.

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

467
00:24:21,340 --> 00:24:23,640
Vi ved præcis, hvordan man
krydse gennem dette træ,

468
00:24:23,640 --> 00:24:26,910
så vi ved, hvad vi vil have adgang til.

469
00:24:26,910 --> 00:24:31,690
>> OK, så det er derfor, vi ønsker
at have denne slags model,

470
00:24:31,690 --> 00:24:35,190
så vi kan bruge ting som dette,
og vi forstår, hvad de betyder,

471
00:24:35,190 --> 00:24:38,370
og de er standardiseret
på tværs af alle ting, vi gør.

472
00:24:38,370 --> 00:24:45,900
Så dokument dot titel er bare
titlen på our-- alle disse

473
00:24:45,900 --> 00:24:48,960
er temmelig selvforklarende,
Jeg vil gerne tro.

474
00:24:48,960 --> 00:24:51,660
Så de første tre
eksempler er blot at sige,

475
00:24:51,660 --> 00:24:54,770
"OK, bare giv mig
Titlen på denne webside. "

476
00:24:54,770 --> 00:24:58,030
Så det vil give dig, hvad
svarer til titlen.

477
00:24:58,030 --> 00:25:01,880
>> Dokument dot krop vil give dig
hvad der er inden for disse kroppens tags.

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

479
00:25:03,240 --> 00:25:07,820
Og dokument dot krop dot
indtaste HTML er en meget cool én,

480
00:25:07,820 --> 00:25:11,660
og måske ikke ligesom super
intuitive, men den indre HTML

481
00:25:11,660 --> 00:25:13,740
svarer til denne ret her.

482
00:25:13,740 --> 00:25:17,410
Så hvis du nogensinde vil
manipulere tekst på en side,

483
00:25:17,410 --> 00:25:22,700
typisk du vil gøre
noget med kroppen dot indre HTML.

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

485
00:25:23,820 --> 00:25:31,341
Så indre HTML tendens til at henvise til
hvad der rent faktisk mellem disse tags.

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

487
00:25:31,840 --> 00:25:33,020
Og så nyttige funktioner.

488
00:25:33,020 --> 00:25:40,390
Så hvis du ønskede at få
nogen af ​​disse, ethvert element,

489
00:25:40,390 --> 00:25:43,140
vi har nogle Id, klasse
navn eller mærke navn.

490
00:25:43,140 --> 00:25:47,100
Dette er meget lig
ting, vi gjorde med CSS, ikke?

491
00:25:47,100 --> 00:25:51,360
Hvor vi har nogle vælgere, der
svarer til enten et tag, en klasse

492
00:25:51,360 --> 00:25:53,800
at vi giver dem, eller en id.

493
00:25:53,800 --> 00:25:55,310
Dette er meget meget på samme måde.

494
00:25:55,310 --> 00:26:00,720
Hvis du har noget,
har nogle klasse af hund,

495
00:26:00,720 --> 00:26:05,800
og du siger få elementer ved mærkenavn,
og du lægger hund i there-- eller ked af det,

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

497
00:26:06,610 --> 00:26:07,770
Du kan sætte prik i der.

498
00:26:07,770 --> 00:26:11,780
Det kommer til at returnere alle dem
elementer du der har denne klasse.

499
00:26:11,780 --> 00:26:13,880
Så du kan manipulere kun dem.

500
00:26:13,880 --> 00:26:18,430
På samme måde, måske har du bare
ønsker at manipulere nogle header, så

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

502
00:26:20,980 --> 00:26:24,900
Du kan gøre få elementer ved tag
navn, fordi H1 er et mærkenavn.

503
00:26:24,900 --> 00:26:29,270
Og på samme måde, hvis du ønsker at få
nogle unikke ting, kan du få tag.

504
00:26:29,270 --> 00:26:31,100
Få element af Id.

505
00:26:31,100 --> 00:26:32,710
Og de er faktisk masser af disse.

506
00:26:32,710 --> 00:26:36,300
Disse er kun ligesom tre af rigtig mange.

507
00:26:36,300 --> 00:26:39,600
Så hvis du går online, som
Jeg har tænkt mig at opmuntre

508
00:26:39,600 --> 00:26:45,342
du skal gøre, og gøre nogle
forskning på egen hånd,

509
00:26:45,342 --> 00:26:48,450
Jeg helt klart anbefale
undersøger alle dem.

510
00:26:48,450 --> 00:26:50,880
De kunne være super
nyttige, især når

511
00:26:50,880 --> 00:26:57,180
du vil bare slags manipulere
meget specifikke ting uden at have

512
00:26:57,180 --> 00:27:00,390
at gå igennem og prøve
til at frasortere alt.

513
00:27:00,390 --> 00:27:03,540
>> OK, så det sidste,
er JavaScript-hændelser.

514
00:27:03,540 --> 00:27:10,730
Så da jeg talte tidligere
om at gå ind på en hjemmeside,

515
00:27:10,730 --> 00:27:14,340
og når du svæver over noget,
eller musen svæver over noget,

516
00:27:14,340 --> 00:27:15,420
noget andet sker.

517
00:27:15,420 --> 00:27:17,900
Det er det, vi gerne vil
tænke som en begivenhed.

518
00:27:17,900 --> 00:27:23,970
Så det, vi har, at magt
være nyttigt her er onclick.

519
00:27:23,970 --> 00:27:29,140
Så mine var på hover, som, jeg er
temmelig sikker, er lige på hover.

520
00:27:29,140 --> 00:27:31,300
Også et ton af disse
at du kan kigge efter.

521
00:27:31,300 --> 00:27:34,340
Der er en hel liste online
af de forskellige ting

522
00:27:34,340 --> 00:27:37,130
at du kan lytte til.

523
00:27:37,130 --> 00:27:41,220
>> Men JavaScript-hændelser er
dybest set bare at reagere på tingene

524
00:27:41,220 --> 00:27:42,430
at din bruger gør.

525
00:27:42,430 --> 00:27:42,930
Right?

526
00:27:42,930 --> 00:27:45,220
Så din bruger gør
noget, det er en begivenhed,

527
00:27:45,220 --> 00:27:48,340
og JavaScript vil reagere
men du vil have det til.

528
00:27:48,340 --> 00:27:49,770
Det vil reagere i overensstemmelse hermed.

529
00:27:49,770 --> 00:27:54,630
Så i dette tilfælde, har vi
nogle vindue dot onload.

530
00:27:54,630 --> 00:27:57,170
Så hvad det siger, er, "vent
indtil vinduets loaded. "

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

532
00:27:57,780 --> 00:28:02,102
Så når alt er lastet, onload,
så kan du udføre denne funktion.

533
00:28:02,102 --> 00:28:03,810
Så når alt er
indlæst, er du nødt

534
00:28:03,810 --> 00:28:07,760
at have nogle søgeknappen
der får et element af Id,

535
00:28:07,760 --> 00:28:13,740
og den udskriver hvad det så
element er som knappen Søg.

536
00:28:13,740 --> 00:28:17,050
Og så har vi denne variabel,
vi siger, "OK, onclick."

537
00:28:17,050 --> 00:28:20,390
Så når vi hører et klik
på knappen Søg,

538
00:28:20,390 --> 00:28:23,990
udføre denne funktion, hvilket er en
alarm, du har klikket på knappen Søg.

539
00:28:23,990 --> 00:28:28,910
>> Så hvad sker der is-- dette er en nice
lille grafisk gengivelse her.

540
00:28:28,910 --> 00:28:31,480
Så vores dokument belastninger,
det er vores onload,

541
00:28:31,480 --> 00:28:34,340
Vi finder vores søgning
knap, som er dette.

542
00:28:34,340 --> 00:28:36,570
Vi leder efter vores knappen Søg.

543
00:28:36,570 --> 00:28:40,790
Og så når knappen Søg er
klikkede, svarer det til lige her.

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

545
00:28:41,980 --> 00:28:47,300
Så vi endelig advare vores brugere,
som er det sidste linje her.

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

547
00:28:48,250 --> 00:28:52,960
Så hver af disse fire trin bare
svarer til de fire kasser

548
00:28:52,960 --> 00:28:55,031
dernede på bunden.

549
00:28:55,031 --> 00:28:56,405
Giver det mening for alle?

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

551
00:29:01,120 --> 00:29:05,200
>> Og så en ting, jeg bare
at nævne meget, meget kort, at jeg

552
00:29:05,200 --> 00:29:08,660
opfordre jer til
gå se mere på er

553
00:29:08,660 --> 00:29:13,210
jQuery, som er lige et bibliotek
der er bygget oven på JavaScript.

554
00:29:13,210 --> 00:29:16,480
Det er super nyttigt, da
med de fleste biblioteker.

555
00:29:16,480 --> 00:29:18,320
Der er masser af funktioner.

556
00:29:18,320 --> 00:29:21,930
Så hvis der er nogensinde noget,
du ønsker at gøre i JavaScript,

557
00:29:21,930 --> 00:29:24,880
dit første instinkt
bør ikke være at tænke

558
00:29:24,880 --> 00:29:27,340
af, bør "hvilken funktion
Jeg kode? "Det skal være,

559
00:29:27,340 --> 00:29:29,560
"Lad mig se nogen er
allerede gjort det for mig. "

560
00:29:29,560 --> 00:29:32,800
Fordi ni ud af ti gange,
nogen vil have gjort det allerede,

561
00:29:32,800 --> 00:29:35,760
og de sandsynligvis have gjort det bedre.

562
00:29:35,760 --> 00:29:39,990
Folk bruger en masse tid på at gøre disse,
og JavaScript er meget udbredt,

563
00:29:39,990 --> 00:29:42,810
så folk er konstant
forsøger at gøre det bedre.

564
00:29:42,810 --> 00:29:47,110
Og jQuery har en masse funktioner
der vil formentlig være nyttige for dig

565
00:29:47,110 --> 00:29:50,470
i din endelige projekt, hvis du er
gør noget med webdesign.

566
00:29:50,470 --> 00:29:53,480
Som jeg gerne sige, "arbejde
smartere, ikke hårdere. "

567
00:29:53,480 --> 00:29:57,130
Hvis du fyre gør det, vil det være dejligt.

568
00:29:57,130 --> 00:30:00,330
Når vi er på hackathon jeg ikke
Du skal være alt stresset.

569
00:30:00,330 --> 00:30:03,600
Jeg vil have dig til at være ligesom, "Jeg fik
dette. jQuery er fik min ryg.

570
00:30:03,600 --> 00:30:05,790
Jeg behøver ikke at skrive disse funktioner. "

571
00:30:05,790 --> 00:30:07,636
>> Så bare to ting til
husk, jeg har tænkt mig

572
00:30:07,636 --> 00:30:10,220
at lade jer se mere
i jQuery på egen hånd.

573
00:30:10,220 --> 00:30:13,070
Jeg har tænkt mig at sige, er det
gør nogle temmelig awesome ting

574
00:30:13,070 --> 00:30:15,220
og kan gøre dit liv
en hel del lettere.

575
00:30:15,220 --> 00:30:17,150
Men hvad du vil
har er hvad fil

576
00:30:17,150 --> 00:30:21,020
at du kommer til at bruge det i,
du vil ønsker disse to linjer.

577
00:30:21,020 --> 00:30:25,630
Du kommer til at have den
script af JS jQuery dot js.

578
00:30:25,630 --> 00:30:28,500
Og faktisk din kilde
kommer til at være nogle URL.

579
00:30:28,500 --> 00:30:35,870
Hvis du Google jQuery, Google
faktisk er vært alle filerne for dig.

580
00:30:35,870 --> 00:30:38,950
Så du helt sikkert ønsker at
input, URL i stedet.

581
00:30:38,950 --> 00:30:41,130
Jeg bare sætte dette her
for nemheds skyld.

582
00:30:41,130 --> 00:30:45,180
Alt dette betyder er, hvor at
find dit jQuery biblioteket.

583
00:30:45,180 --> 00:30:48,600
Det er massiv, så du ikke vil
at være vært for det på din egen computer

584
00:30:48,600 --> 00:30:53,390
hvis du kan undgå det, og derfor har vi
tendens til at bare sætte i Googles webadresse,

585
00:30:53,390 --> 00:30:55,880
er vært alle disse filer til dig.

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

587
00:30:56,380 --> 00:30:58,850
Du google det, jeg lover
det vil være der.

588
00:30:58,850 --> 00:31:01,200
>> Og så uanset
JavaScript-fil, som du er

589
00:31:01,200 --> 00:31:07,150
hjælp, så dette er blot nogle ydre
JavaScript-fil, som du bruger.

590
00:31:07,150 --> 00:31:11,570
På samme måde, som vi linker til vores CSS
filer, det er den samme slags ting.

591
00:31:11,570 --> 00:31:15,480
Dette blot links til filen
hvor du har JavaScript er.

592
00:31:15,480 --> 00:31:18,970
Og jeg har nogle eksempler
med enkle JavaScript.

593
00:31:18,970 --> 00:31:20,220
Så vi vil gå igennem det.

594
00:31:20,220 --> 00:31:27,230
Og så i dit indeks JavaScript,
hvilket er din JavaScript-fil her,

595
00:31:27,230 --> 00:31:30,900
dette er slags indpakningen
at du har til jQuery.

596
00:31:30,900 --> 00:31:33,860
Du er næsten 99,9
procent af tiden går

597
00:31:33,860 --> 00:31:36,800
at have dette i din index.js fil.

598
00:31:36,800 --> 00:31:40,010
For hvad det siger, er,
"Ikke udføre noget

599
00:31:40,010 --> 00:31:43,480
indtil dokumentet er faktisk
klar ", hvilket er præcis, hvad du ønsker.

600
00:31:43,480 --> 00:31:46,600
For hvis dit dokument er ikke klar,
og jQuery begynder at gøre tingene,

601
00:31:46,600 --> 00:31:48,020
det er bare noget rod.

602
00:31:48,020 --> 00:31:50,480
Så du altid ønsker at have denne wrapper.

603
00:31:50,480 --> 00:31:55,760
Og så for ting, der går der, jeg
overlader det til dine gutter egen perusing.

604
00:31:55,760 --> 00:32:04,610
>> OK, så er der nogen spørgsmål til højre
nu om JavaScript i almindelighed?

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

606
00:32:07,420 --> 00:32:10,780
Hvis ikke, har vi nogle cool
eksempler, vi kan gå igennem,

607
00:32:10,780 --> 00:32:13,120
at du fyrene kan hjælpe mig koden.

608
00:32:13,120 --> 00:32:15,877
Men jeg vil også være
super nice, og hvis du

609
00:32:15,877 --> 00:32:17,960
ønsker ikke at sige noget
for disse, det er fint.

610
00:32:17,960 --> 00:32:20,510
Jeg kan også bare give dig eksempler.

611
00:32:20,510 --> 00:32:24,581
Men noget på
PowerPoint før vi går videre?

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

613
00:32:25,080 --> 00:32:26,990
>> Jeg føler at du fyre har brug for til energi.

614
00:32:26,990 --> 00:32:31,516
Så jeg tror, ​​vi kommer til at starte
med mit parti eksempel først.

615
00:32:31,516 --> 00:32:33,390
Vi har tre eksempler,
du har dit valg.

616
00:32:33,390 --> 00:32:37,720
Så vi har uret, hvor vi skal hen
at gennemføre en egentlig ur, der er

617
00:32:37,720 --> 00:32:41,430
vil opdatere som tiden går.

618
00:32:41,430 --> 00:32:43,310
Vi har denne store kvidre funktion.

619
00:32:43,310 --> 00:32:44,560
Denne-- du hvad, hold fast.

620
00:32:44,560 --> 00:32:47,220
Vi kommer til at gøre dette gå væk.

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 denne store kvidre funktion
her, at-- jeg ved, ikke?

624
00:32:56,132 --> 00:32:57,090
Det kommer til at være stor.

625
00:32:57,090 --> 00:32:58,350
Er du fyre ophidset?

626
00:32:58,350 --> 00:33:01,170
Det kommer til at tælle antallet
tegn, som du har tilbage,

627
00:33:01,170 --> 00:33:04,520
så hvis jeg skriver lige nu,
selvfølgelig er det stadig står 140,

628
00:33:04,520 --> 00:33:06,190
men vi ved, det er ikke tilfældet.

629
00:33:06,190 --> 00:33:08,570
Og så med vores sidste
her, klik her for at feste.

630
00:33:08,570 --> 00:33:12,150
Hvad kommer til at ske, er, når
vi klikker, baggrunden er

631
00:33:12,150 --> 00:33:13,340
kommer til at ændre farver.

632
00:33:13,340 --> 00:33:17,060
Så du fyre har dine muligheder for
hvilken en du ønsker at gøre først.

633
00:33:17,060 --> 00:33:19,800
Jeg lover jeg vil tage det meget let på dig.

634
00:33:19,800 --> 00:33:22,680
Jeg føler at alle ligesom
af bare meget lav nøgle i dag.

635
00:33:22,680 --> 00:33:25,540
Så jeg vil lede dig gennem hvordan
vi vil gennemføre alle disse.

636
00:33:25,540 --> 00:33:28,520
Hvis du ønsker at kime
i, det er fantastisk, men jeg

637
00:33:28,520 --> 00:33:30,020
lyst alle er lidt træt.

638
00:33:30,020 --> 00:33:32,970
Så jeg vil bare gå dig
gennem disse eksempler.

639
00:33:32,970 --> 00:33:35,015
Har vi noget,
Vi vil gerne gøre først?

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

641
00:33:38,140 --> 00:33:39,475
Nogen?

642
00:33:39,475 --> 00:33:41,350
Ingen præference?

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

644
00:33:41,867 --> 00:33:42,450
Ved du hvad?

645
00:33:42,450 --> 00:33:43,290
Vi er på partiet.

646
00:33:43,290 --> 00:33:48,380
Jeg føler, at du fyre har brug for en little--
så vil vi gøre festen 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å det, vi har her-- det er
ikke skulle være der.

650
00:33:56,930 --> 00:33:57,910
Nu er det godt.

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

652
00:33:59,810 --> 00:34:03,110
Så det, vi har her, er
blot en simpel HTML-side

653
00:34:03,110 --> 00:34:07,840
at jer alle bør være super
kender fra dine sidste to psets.

654
00:34:07,840 --> 00:34:10,212
vi har vores doc typen her.

655
00:34:10,212 --> 00:34:10,920
Kan alle 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 vores HTML naturligvis.

659
00:34:13,900 --> 00:34:18,360
Vi har nogle header, der er
knyttet til et typografiark, der

660
00:34:18,360 --> 00:34:21,420
lige lavet min skrifttype nice og store og fed.

661
00:34:21,420 --> 00:34:23,489
Så du skal ikke bekymre dig om det.

662
00:34:23,489 --> 00:34:26,437
>> Vi har nogle organ med
en Id baggrund, OK?

663
00:34:26,437 --> 00:34:28,520
Fordi vi vil være
ændre baggrunden.

664
00:34:28,520 --> 00:34:31,964
Så når vi er ved at ændre den
baggrund af vores krop,

665
00:34:31,964 --> 00:34:35,965
Vi husker fra for to uger siden
når vi har at gøre med web-sider.

666
00:34:35,965 --> 00:34:36,840
Så godt at have det.

667
00:34:36,840 --> 00:34:39,270
Og vi har nogle Id lig fest.

668
00:34:39,270 --> 00:34:43,909
Denne h ref pund betyder blot, at
det kommer til at gå til den samme side.

669
00:34:43,909 --> 00:34:47,120
Og klik her for at feste,
hvilket er grunden til, når vi klikker på det,

670
00:34:47,120 --> 00:34:48,940
det skal ændre farver, heldigvis.

671
00:34:48,940 --> 00:34:54,322
>> Og så har vi nogle script her, at
er netop knyttet til dette parti dot js

672
00:34:54,322 --> 00:34:58,100
fil, der er tom, fordi
Vi har ikke gjort noget endnu.

673
00:34:58,100 --> 00:35:00,450
Og det er så trist.

674
00:35:00,450 --> 00:35:06,100
Men meget snart, vil det ændre
farver, og det vil være fantastisk.

675
00:35:06,100 --> 00:35:10,520
>> Så jeg vil bare gå jer
gennem hvordan vi kan gribe dette.

676
00:35:10,520 --> 00:35:14,030
Så det første,
vi måske ønsker at gøre,

677
00:35:14,030 --> 00:35:18,050
hvis vi ændrer på baggrund af
kroppen, det første, vi måske ønsker

678
00:35:18,050 --> 00:35:22,730
at gøre er faktisk fat
hvad kroppen er, ikke?

679
00:35:22,730 --> 00:35:27,690
Så vi ønsker at have sum, vores
baggrund, og hvis du bemærker,

680
00:35:27,690 --> 00:35:29,567
Jeg bare automatisk bare begynde at skrive.

681
00:35:29,567 --> 00:35:32,400
Der er ikke noget særligt, at vi
nødt til at gøre for vores JavaScript-filer.

682
00:35:32,400 --> 00:35:35,820
Jeg kan begynde at erklære variabler,
og erklære tilfældige funktioner.

683
00:35:35,820 --> 00:35:38,110
Og det er meget mere fri form.

684
00:35:38,110 --> 00:35:41,930
Det er ligesom med C, vi gav jer alle
disse hårde regler, og du voksede op,

685
00:35:41,930 --> 00:35:43,220
så vi er ligesom, "gå videre.

686
00:35:43,220 --> 00:35:44,000
Være fri.

687
00:35:44,000 --> 00:35:44,870
Gør hvad du vil. "

688
00:35:44,870 --> 00:35:46,280
Og det er, hvad JavaScript er.

689
00:35:46,280 --> 00:35:48,390
Så vi har nogle baggrunden her.

690
00:35:48,390 --> 00:35:55,900
Med vores DOM model, vi ved, vi
kan gøre dokumentet dot få element,

691
00:35:55,900 --> 00:36:00,290
og hvis vi bemærker her,
vores krop har en Id.

692
00:36:00,290 --> 00:36:00,930
Right?

693
00:36:00,930 --> 00:36:06,310
Så vi kan får dokument ved
Id, og her er en simpel en.

694
00:36:06,310 --> 00:36:08,295
Hvad er vores Id, vi ønsker her?

695
00:36:08,295 --> 00:36:09,170
PUBLIKUM: Baggrund.

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

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

698
00:36:12,230 --> 00:36:14,250
Og semikolon til sidst.

699
00:36:14,250 --> 00:36:15,610
Det er ikke gået væk endnu.

700
00:36:15,610 --> 00:36:17,330
Du har stadig brug for dine semikoloner.

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

702
00:36:17,830 --> 00:36:19,690
Så det er vores første.

703
00:36:19,690 --> 00:36:23,880
Og når vi klikker noget, vi
vil have noget til at ske, ikke?

704
00:36:23,880 --> 00:36:28,270
Så vi måske ønsker nogle variable
der venter på et klik.

705
00:36:28,270 --> 00:36:32,410
Hvad vi vil gøre, er at vi kommer til at
gøre vores link mere ligner en knap.

706
00:36:32,410 --> 00:36:43,140
Så vi kommer til at have nogle knap,
lig dokumentere prik få element af Id.

707
00:36:43,140 --> 00:36:48,670
Og hvis jeg taler om det
klik link eller klik her for at feste

708
00:36:48,670 --> 00:36:51,850
link, hvad kunne min Id være her?

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 ikke alt for dårlig hidtil.

712
00:36:56,500 --> 00:36:59,060
Alle får, hvad vi laver?

713
00:36:59,060 --> 00:37:02,100
>> OK, så nu har vi vores
knap, og vi ønsker

714
00:37:02,100 --> 00:37:04,140
ting at ændre sig, når vi klikker på det.

715
00:37:04,140 --> 00:37:08,750
Så hvis vi husker fra vores PowerPoint,
meget simpel ting, vi kan gøre

716
00:37:08,750 --> 00:37:12,140
er bare knap dot onclick, ikke?

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

718
00:37:14,750 --> 00:37:18,730
Og det kommer til at svare til nogle funktion.

719
00:37:18,730 --> 00:37:20,620
Dette er en anonym funktion.

720
00:37:20,620 --> 00:37:24,620
Og det bare as-- faktisk er jeg
kommer til at gøre dette til en lidt større.

721
00:37:24,620 --> 00:37:27,330
>> Så hvad jeg lige gjorde
her er jeg siger, OK,

722
00:37:27,330 --> 00:37:31,810
når vi klikker vores knap, som er
dette link, som vi netop er nævnt,

723
00:37:31,810 --> 00:37:34,270
vi kommer til at udføre
denne anonyme funktion.

724
00:37:34,270 --> 00:37:35,845
Vi har ikke brug for input.

725
00:37:35,845 --> 00:37:37,220
Vi er ligeglade, hvad brugeren siger.

726
00:37:37,220 --> 00:37:38,800
Når de klikker på det, vi er
kommer til at gøre, hvad vi vil,

727
00:37:38,800 --> 00:37:40,660
der er ændre baggrundsfarven.

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

729
00:37:42,640 --> 00:37:47,224
Så det er derfor vi ikke har nogen input,
vi bare har denne anonyme funktion.

730
00:37:47,224 --> 00:37:49,390
Og nu er vi faktisk går
at skrive denne funktion.

731
00:37:49,390 --> 00:37:55,040
>> Så der er en masse måder, du
kunne generere en tilfældig farve.

732
00:37:55,040 --> 00:37:59,010
Den måde, at jeg gjorde det var at
generere tre tilfældige tal

733
00:37:59,010 --> 00:38:01,910
og konvertere dem til et RGB triple.

734
00:38:01,910 --> 00:38:06,130
Så dette blot viser dig nogle cool
ting, hvis du ligesom, "Åh,

735
00:38:06,130 --> 00:38:08,464
Jeg har brug for at generere en tilfældig
nummer. "Hvis du googlede det,

736
00:38:08,464 --> 00:38:09,630
dette er hvad du ville finde.

737
00:38:09,630 --> 00:38:17,580
>> Så vi har tre forskellige
ting, Var, ikke rød igen, grøn.

738
00:38:17,580 --> 00:38:18,080
Right?

739
00:38:18,080 --> 00:38:20,740
Så dem er de tre
ting, der gør en farve.

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

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

742
00:38:22,960 --> 00:38:27,050
Og det, vi kan gøre, er, at vi ved
at det skal være mellem 255,

743
00:38:27,050 --> 00:38:30,140
og hvis du kiggede op nogle
tilfældige tal generator,

744
00:38:30,140 --> 00:38:36,000
du kunne få noget som matematik
dot tilfældig, som hvis man ser dette op

745
00:38:36,000 --> 00:38:39,230
vender tilbage til nogle antal
mellem nul og én.

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

747
00:38:39,980 --> 00:38:44,470
Og hvilke numre gøre vores
RGB tripler gå mellem?

748
00:38:44,470 --> 00:38:47,240
Zero og hvad?

749
00:38:47,240 --> 00:38:49,000
Hvad kan de gå op til?

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

751
00:38:49,950 --> 00:38:53,320
Så hvis matematik dot tilfældigt
går mellem nul og én,

752
00:38:53,320 --> 00:38:56,365
hvordan kan vi ønsker at konvertere dette?

753
00:38:56,365 --> 00:38:56,990
PUBLIKUM: Time?

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

755
00:38:57,830 --> 00:38:58,677
Så tid er 255.

756
00:38:58,677 --> 00:39:00,888
>> Publikum: [uhørligt]
Det er ligesom [uhørligt].

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

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

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

760
00:39:04,580 --> 00:39:06,300
JavaScript bare tager sig af dig.

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

762
00:39:07,580 --> 00:39:09,360
Så vi kan gøre det for alle disse.

763
00:39:09,360 --> 00:39:10,540
Right?

764
00:39:10,540 --> 00:39:16,480
Math dot tilfældige tidspunkter 255.

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

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

767
00:39:18,820 --> 00:39:23,350
Så de ting er, kan dette
ikke returnere et heltal.

768
00:39:23,350 --> 00:39:24,080
Right?

769
00:39:24,080 --> 00:39:26,450
Måske vi få nogle tal
mellem nul og én,

770
00:39:26,450 --> 00:39:32,150
og det får den til at være lidt
off, og vores RGBS kan ikke være flåd.

771
00:39:32,150 --> 00:39:33,360
De skal være int'er.

772
00:39:33,360 --> 00:39:37,610
Så hvis du prøvet dette, det ville nok
har nogle uberegnelig opførsel.

773
00:39:37,610 --> 00:39:38,810
Det ville være lidt funky.

774
00:39:38,810 --> 00:39:43,200
Så det, vi gør, er vi ønsker at gøre
sikre, at disse er afrundede,

775
00:39:43,200 --> 00:39:45,400
og du kunne runde enten måde.

776
00:39:45,400 --> 00:39:47,110
Jeg afrundet med gulv.

777
00:39:47,110 --> 00:39:49,680
Så jeg altid sørget
at det rundet ned.

778
00:39:49,680 --> 00:39:54,440
Men gå ud af hvor nemt det
var at bare få et tilfældigt tal,

779
00:39:54,440 --> 00:39:57,920
hvordan tror du, vi
måske gulv dette nummer?

780
00:39:57,920 --> 00:40:00,720
Det er meget ens.

781
00:40:00,720 --> 00:40:02,810
Nogen idé?

782
00:40:02,810 --> 00:40:06,450
Så hvis tilfældig var bare matematik dot
tilfældig, så tror du, vi ville gøre gulvet?

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

784
00:40:09,670 --> 00:40:11,340
Og du kan også gøre math dot loft.

785
00:40:11,340 --> 00:40:14,030
Runde er slags tvetydig
fordi du ikke

786
00:40:14,030 --> 00:40:16,110
vide, om at runde op eller runde ned.

787
00:40:16,110 --> 00:40:20,797
Så typisk gør vi altid matematik
dot etage, matematik dot loft.

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

789
00:40:21,380 --> 00:40:22,780
>> PUBLIKUM: Er ordet runde ned?

790
00:40:22,780 --> 00:40:24,740
>> ALLISON Buchholtz-AU: Floor runder ned.

791
00:40:24,740 --> 00:40:26,990
Og det er kun et valg fra min side.

792
00:40:26,990 --> 00:40:32,370
>> Så nu har vi vores tre tal
der er blevet tilfældigt genereret,

793
00:40:32,370 --> 00:40:36,610
og hvad vi vil gøre nu, er vi
bare at ændre baggrunden.

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

795
00:40:37,310 --> 00:40:41,490
Så vi allerede har vores
baggrund slags gemt

796
00:40:41,490 --> 00:40:43,280
i dette element kaldet baggrund.

797
00:40:43,280 --> 00:40:47,300
Så hvad du vil bemærke, er, hvis
du leget med dette,

798
00:40:47,300 --> 00:40:50,460
Vi ønsker at ændre stil.

799
00:40:50,460 --> 00:40:53,812
Og det er sådan noget,
du vil Google og finde ud af,

800
00:40:53,812 --> 00:40:55,020
gerne, hvordan du ændrer farven.

801
00:40:55,020 --> 00:40:59,210
>> Men den måde, du får adgang til denne farve er
baggrund dot style dot baggrund.

802
00:40:59,210 --> 00:41:03,490
Så dette siger givet
Dette formål, baggrund,

803
00:41:03,490 --> 00:41:06,920
som henviser til, at
element Id deroppe,

804
00:41:06,920 --> 00:41:10,690
vi kommer til at se på
stil i den stil,

805
00:41:10,690 --> 00:41:13,280
vi kommer til at se på baggrunden.

806
00:41:13,280 --> 00:41:14,270
OK?

807
00:41:14,270 --> 00:41:17,630
Og hvis du går og ser dette op,
det kan gøre lidt mere mening,

808
00:41:17,630 --> 00:41:21,930
men det er dybest set bare at sige,
"Giv mig denne meget specifikke attribut

809
00:41:21,930 --> 00:41:25,770
af det, jeg har defineret tidligere. "

810
00:41:25,770 --> 00:41:32,340
Så det, vi er ved at ændre det til, er
nogle RGB, fordi det giver mening.

811
00:41:32,340 --> 00:41:34,780
Vi bruger RGB tredobler, ikke?

812
00:41:34,780 --> 00:41:41,530
Og vi have-- jeg vil sørge for jeg
få det rigtige antal citater herinde.

813
00:41:41,530 --> 00:41:43,940
Så det, vi gør, er vi
RGB, og vi vil

814
00:41:43,940 --> 00:41:46,800
at-- dette er ligesom
sammenkædning, som er rød.

815
00:41:46,800 --> 00:41:50,030

816
00:41:50,030 --> 00:41:52,610
Og så ønsker vi nogle komma.

817
00:41:52,610 --> 00:41:59,925
Og så ønsker vi plus grøn,
derefter nogle komma, og nogle blå.

818
00:41:59,925 --> 00:42:10,640

819
00:42:10,640 --> 00:42:14,120
>> Så disse plusser bare
mener ligesom sammenkædning.

820
00:42:14,120 --> 00:42:19,810
Så dette er blot at skabe dette
streng, der foregår inden for 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
>> Publikum: [uhørligt] plus derefter
det grønne plus derefter det røde.

824
00:42:26,684 --> 00:42:30,163
>> ALLISON Buchholtz-AU: Ja,
fordi jeg rodet det op.

825
00:42:30,163 --> 00:42:30,890
At ens fint.

826
00:42:30,890 --> 00:42:32,110
Åh, hold fast.

827
00:42:32,110 --> 00:42:32,610
Nej.

828
00:42:32,610 --> 00:42:36,770
Fordi jeg har brug for at sørge for,
at jeg fik alle disse ret.

829
00:42:36,770 --> 00:42:39,680

830
00:42:39,680 --> 00:42:43,950
Så jeg vil forklare i uno momento.

831
00:42:43,950 --> 00:42:47,040
Grøn, blå, perfekt.

832
00:42:47,040 --> 00:42:47,971
Nu er jeg færdig.

833
00:42:47,971 --> 00:42:48,470
Jeg 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å hvad det er, at baggrunden
vil blive sat til nogle streng.

837
00:42:58,085 --> 00:42:58,585
Right?

838
00:42:58,585 --> 00:42:59,710
Hvilket er, hvad vi har her.

839
00:42:59,710 --> 00:43:05,870
Det kommer til at være nogle RGB 255 komma
255 komma nul, eller hvad nummer du

840
00:43:05,870 --> 00:43:06,512
har der.

841
00:43:06,512 --> 00:43:08,220
Så vi laver her,
vi har nogle streng.

842
00:43:08,220 --> 00:43:11,910
Og hvad vi ønsker at gøre, er vi
slags dynamisk skabe

843
00:43:11,910 --> 00:43:14,010
at når vi faktisk køre dette program.

844
00:43:14,010 --> 00:43:16,570
Så dette er nogle streng.

845
00:43:16,570 --> 00:43:20,290
Plus sammenkæder det med
den værdi, røde har,

846
00:43:20,290 --> 00:43:23,320
der sammenkæder den med en
komma, der sammenkæder den

847
00:43:23,320 --> 00:43:26,090
med det grønne er, og
så videre, og så videre.

848
00:43:26,090 --> 00:43:26,660
OK?

849
00:43:26,660 --> 00:43:32,210
Indtil det sidste, som er den
slutparenteserne denne RGB her.

850
00:43:32,210 --> 00:43:32,800
OK?

851
00:43:32,800 --> 00:43:37,230
>> Så hvad det kommer til at
generere er nogle kommando virkelig

852
00:43:37,230 --> 00:43:42,770
der er RGB af tre tal
den baggrund er nu indstillet til.

853
00:43:42,770 --> 00:43:43,940
OK?

854
00:43:43,940 --> 00:43:46,510
Så lad os se om det virker.

855
00:43:46,510 --> 00:43:49,720
Jeg håber det ikke, for hvis det
ikke, jeg har tænkt mig at være reel trist.

856
00:43:49,720 --> 00:43:50,250
Åh nej.

857
00:43:50,250 --> 00:43:52,710
OK, hold fast.

858
00:43:52,710 --> 00:43:56,730
Absolut baggrund
dot stil dot baggrund.

859
00:43:56,730 --> 00:43:59,569
Jeg absolut mangler
noget bare lille.

860
00:43:59,569 --> 00:44:00,610
Har du ikke fyre hader det?

861
00:44:00,610 --> 00:44:04,020
Når det er bare en lille smule fejl?

862
00:44:04,020 --> 00:44:04,990
Almægtige baggrund.

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
>> Publikum: [uhørligt]

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
Jeg prøvede dette før klassen.

869
00:44:14,050 --> 00:44:16,570
Jeg har alt, hvad jeg gjorde før
klasse i tilfælde jeg var ligesom,

870
00:44:16,570 --> 00:44:17,970
"Vent, hvad har jeg gjort forkert?"

871
00:44:17,970 --> 00:44:23,190
Fordi jeg var ligesom, "jeg vil sandsynligvis
rod dette op på et tidspunkt. "

872
00:44:23,190 --> 00:44:24,150
Plus grønne.

873
00:44:24,150 --> 00:44:26,250
Alt ser ud som det er
sammenkædet 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
>> Publikum: [uhørligt]

877
00:44:31,870 --> 00:44:33,810
>> ALLISON Buchholtz-AU: Åh, der du går.

878
00:44:33,810 --> 00:44:35,520
Det er, hvad jeg havde brug for.

879
00:44:35,520 --> 00:44:36,805
Kig på det.

880
00:44:36,805 --> 00:44:40,090
Tiffany til at redde.

881
00:44:40,090 --> 00:44:40,590
Perfekt.

882
00:44:40,590 --> 00:44:41,090
OK.

883
00:44:41,090 --> 00:44:43,834
Lad os se om det virker.

884
00:44:43,834 --> 00:44:44,816
Åh min Gud.

885
00:44:44,816 --> 00:44:45,641
OK.

886
00:44:45,641 --> 00:44:46,140
Hold på.

887
00:44:46,140 --> 00:44:48,280
>> PUBLIKUM: Plads efter den anden plus.

888
00:44:48,280 --> 00:44:50,310
>> ALLISON Buchholtz-AU: Hvilken?

889
00:44:50,310 --> 00:44:52,910
Åh vent, vent.

890
00:44:52,910 --> 00:44:54,870
Space slid?

891
00:44:54,870 --> 00:44:57,209
>> PUBLIKUM: Anden plus i
den grønne sammenkædning.

892
00:44:57,209 --> 00:44:58,250
ALLISON Buchholtz-AU: Oh.

893
00:44:58,250 --> 00:44:59,570
PUBLIKUM: Der er ikke plads
efter plus, ja.

894
00:44:59,570 --> 00:45:00,790
ALLISON Buchholtz-AU: Du
har ikke brug for det, men--

895
00:45:00,790 --> 00:45:01,190
PUBLIKUM: Åh, det gør du ikke?

896
00:45:01,190 --> 00:45:01,910
ALLISON Buchholtz-AU: Det ser pænt ud.

897
00:45:01,910 --> 00:45:02,530
PUBLIKUM: OK.

898
00:45:02,530 --> 00:45:03,030
OK.

899
00:45:03,030 --> 00:45:05,170
>> ALLISON Buchholtz AU:
Lad os se, om det virker.

900
00:45:05,170 --> 00:45:05,670
OK.

901
00:45:05,670 --> 00:45:07,836
Jeg naturligvis ikke på
denne demo, som minder mig

902
00:45:07,836 --> 00:45:12,810
af et foredrag den anden uge,
men jeg ved, at dette vil arbejde.

903
00:45:12,810 --> 00:45:15,860
Jeg ved, at dette vil arbejde.

904
00:45:15,860 --> 00:45:16,580
Så tæt.

905
00:45:16,580 --> 00:45:22,330
Medmindre jeg ved et uheld slettet
mit script på denne ene.

906
00:45:22,330 --> 00:45:24,035
Nej, det er part dot js.

907
00:45:24,035 --> 00:45:25,776
OK holde på.

908
00:45:25,776 --> 00:45:28,650
Jeg har tænkt mig at kopiere denne, og jeg er også
bare at slette alt,

909
00:45:28,650 --> 00:45:30,108
fordi jeg havde denne arbejdsgruppe tidligere.

910
00:45:30,108 --> 00:45:32,470

911
00:45:32,470 --> 00:45:33,770
>> Jeg lover, at det virker.

912
00:45:33,770 --> 00:45:36,160
Hvis ikke, vil jeg vise dig, hvad Tommys er.

913
00:45:36,160 --> 00:45:38,890
Og der.

914
00:45:38,890 --> 00:45:42,380
>> PUBLIKUM: Du refererer part
dot CSS, og det er en fest dot js.

915
00:45:42,380 --> 00:45:45,940
>> ALLISON Buchholtz-AU: Ah, godt
lige her er part dot js.

916
00:45:45,940 --> 00:45:49,187
OK, hvad har jeg gjort anderledes?

917
00:45:49,187 --> 00:45:50,520
OK, vil vi se, om det virker 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å jeg ved ikke, hvad jeg gjorde anderledes,
men det er hvad der skal ske.

921
00:46:02,110 --> 00:46:03,230
Kinda cool.

922
00:46:03,230 --> 00:46:06,650
Jeg klikkede på dette, ligesom, for evigt.

923
00:46:06,650 --> 00:46:11,185
Men vi kan forsøge at se, hvad jeg gjorde
forskelligt, at denne havde.

924
00:46:11,185 --> 00:46:14,560
Jeg ved ikke, om jer, men dette
ser dybest set, hvad jeg lige har skrevet.

925
00:46:14,560 --> 00:46:17,950
Der var sandsynligvis en manglende
semikolon et sted er min ting.

926
00:46:17,950 --> 00:46:22,064
Faktisk efter, jeg tror, ​​jeg manglede
et semikolon lige her faktisk.

927
00:46:22,064 --> 00:46:24,230
Men jeg kunne ikke se det, fordi
Det var væk fra skærmen.

928
00:46:24,230 --> 00:46:29,040
>> Men hvis vi bemærker, er det temmelig
meget præcis, hvad jeg lige har skrevet.

929
00:46:29,040 --> 00:46:33,010
Jeg tror nok den sværeste del om
dette er bare lidt denne ting ret

930
00:46:33,010 --> 00:46:36,830
her, forståelse
hvad det gør der.

931
00:46:36,830 --> 00:46:42,230
Disse mulige ting, du lærer
egentlig bare ved at google og ærligt

932
00:46:42,230 --> 00:46:42,880
prøver bare.

933
00:46:42,880 --> 00:46:46,770
Hvis du tror, ​​der er nogle
attribut, der sandsynligvis er.

934
00:46:46,770 --> 00:46:48,382
Så prøv det.

935
00:46:48,382 --> 00:46:49,090
Se hvad der sker.

936
00:46:49,090 --> 00:46:53,000
Som jeg sagde, er der en masse
eksperimenter med JavaScript,

937
00:46:53,000 --> 00:46:56,810
og PHP, og alt,
ting, og CSS især.

938
00:46:56,810 --> 00:47:00,046
Det er den eneste sande
måde at forstå det.

939
00:47:00,046 --> 00:47:07,100
>> OK, så efter at fiaskoen med fest
dot js, vi har to andre muligheder.

940
00:47:07,100 --> 00:47:10,650
Vi har ur eller Twitter.

941
00:47:10,650 --> 00:47:12,190
De er begge interessante.

942
00:47:12,190 --> 00:47:17,720
Måske ikke helt så sjovt som part,
som havde en cool lille Lysblink

943
00:47:17,720 --> 00:47:19,595
ting i slutningen.

944
00:47:19,595 --> 00:47:21,714
Har du fyre har nogen præference?

945
00:47:21,714 --> 00:47:22,380
PUBLIKUM: Ur?

946
00:47:22,380 --> 00:47:22,950
ALLISON Buchholtz-AU: Clock?

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å igen, har vi vores
tom JavaScript-fil.

950
00:47:30,460 --> 00:47:35,800
Og som vi ser her, vi
har nogle meget enkle HTML.

951
00:47:35,800 --> 00:47:40,010
Vi har vores typografiark, der bare
formaterer hvad det skal se ud.

952
00:47:40,010 --> 00:47:42,860
Vi har vores div med
en Id af ur, som

953
00:47:42,860 --> 00:47:44,420
bare siger, "dette bør være et ur."

954
00:47:44,420 --> 00:47:47,650
Og vi har vores link
til vores JavaScript-fil

955
00:47:47,650 --> 00:47:51,400
der er faktisk kommer til at
generere vores ur for os.

956
00:47:51,400 --> 00:47:56,060
Fordi cool ting er, at du kan
sæt JavaScript til automatisk at opdatere

957
00:47:56,060 --> 00:47:56,963
selv.

958
00:47:56,963 --> 00:47:57,810
OK?

959
00:47:57,810 --> 00:48:01,580
Så i stedet for at vente på
brugeren at ramme Opdater på en side

960
00:48:01,580 --> 00:48:03,840
så du kan få
opdateret tid, JavaScript

961
00:48:03,840 --> 00:48:06,760
kan opdatere det, men det kan lide.

962
00:48:06,760 --> 00:48:12,082
>> Så som med vores sidste, vi ønskede
at få adgang til vores baggrund, ikke?

963
00:48:12,082 --> 00:48:14,790
Så hvad tror du kan være den
første ting, vi ønsker at gøre her?

964
00:48:14,790 --> 00:48:19,538
Hvis vi slags går ud
denne form for paradigme her?

965
00:48:19,538 --> 00:48:22,200
Vi sikkert gerne
adgang til vores ur, right?

966
00:48:22,200 --> 00:48:24,724
Så har vi nogle var
ur, der equals--

967
00:48:24,724 --> 00:48:26,140
hvad gør vi tror det kommer til at være?

968
00:48:26,140 --> 00:48:29,290

969
00:48:29,290 --> 00:48:42,670
Dokument prik få element by-- jeg også
elsker Sublime-- Id og vores Id er ur.

970
00:48:42,670 --> 00:48:43,585
Semikolon.

971
00:48:43,585 --> 00:48:45,710
Fik at sørge for at få
disse semikoloner denne gang,

972
00:48:45,710 --> 00:48:47,835
fordi jeg har lyst til at
var problemet sidste gang.

973
00:48:47,835 --> 00:48:55,980
OK, så, da jeg var bare at sige med at forsøge
have JavaScript opdatere sig selv,

974
00:48:55,980 --> 00:48:59,655
der er denne store funktion, jeg
kender det skete praktisk sidste år,

975
00:48:59,655 --> 00:49:02,780
Jeg er ikke sikker på det kommer i handy for dette
pset, men det hedder indstillede interval.

976
00:49:02,780 --> 00:49:05,640

977
00:49:05,640 --> 00:49:08,200
Og det er faktisk rigtig
cool hvis du fyre gøre noget

978
00:49:08,200 --> 00:49:11,460
med tiden eller få
opdaterede oplysninger.

979
00:49:11,460 --> 00:49:13,700
På en hjemmeside for en endelig
projekt, dette er sandsynligvis

980
00:49:13,700 --> 00:49:16,240
en funktion, du vil
få super bekendt med.

981
00:49:16,240 --> 00:49:19,730
Så hvad indstillede interval gør, er at
vi kommer til at give det en funktion,

982
00:49:19,730 --> 00:49:21,830
og hvor ofte det skal
kalde denne funktion.

983
00:49:21,830 --> 00:49:22,430
OK?

984
00:49:22,430 --> 00:49:26,890
>> Så i dette tilfælde, er vi bare at
skabe nogle anonyme funktion igen,

985
00:49:26,890 --> 00:49:31,530
OK, det kommer til at få
vores date, og vores tid,

986
00:49:31,530 --> 00:49:33,780
og derefter opdatere ting og vise det.

987
00:49:33,780 --> 00:49:35,130
Så vi vil bekymre sig om det.

988
00:49:35,130 --> 00:49:39,120
Vi vil være ligesom generere ur her.

989
00:49:39,120 --> 00:49:41,750
Men det, vi har brug for, er, hvordan
ofte for at opdatere den.

990
00:49:41,750 --> 00:49:43,930
Så i dette tilfælde, det er bare millisekunder.

991
00:49:43,930 --> 00:49:46,877
Så vi bare gå til
gøre 100 millisekunder.

992
00:49:46,877 --> 00:49:48,210
Selvfølgelig helt vilkårlig.

993
00:49:48,210 --> 00:49:50,600
Hvis du ønskede det at opdatere
meget langsommere, kunne du.

994
00:49:50,600 --> 00:49:53,300
Vi kan rode rundt
med det indstillede interval,

995
00:49:53,300 --> 00:49:57,240
hvor stor vores interval er efter vi får
en arbejdsgruppe ur, som forhåbentlig vil jeg

996
00:49:57,240 --> 00:49:59,660
komme til.

997
00:49:59,660 --> 00:50:04,110
Så det er bare at sige: "OK, opkald
denne funktion for hver 100 millisekunder. "

998
00:50:04,110 --> 00:50:04,805
OK?

999
00:50:04,805 --> 00:50:07,280
Det er alt den gør.

1000
00:50:07,280 --> 00:50:12,290
>> Så det, vi ønsker, at vores funktion til
gøre, er at vi ønsker at have nogle dato

1001
00:50:12,290 --> 00:50:14,200
og nogle gang er det
vi vil have.

1002
00:50:14,200 --> 00:50:19,740
Så vi kan starte med vores
dato lig noget,

1003
00:50:19,740 --> 00:50:22,708
og vores tid er lig med noget
at vi ikke kender endnu.

1004
00:50:22,708 --> 00:50:26,070

1005
00:50:26,070 --> 00:50:29,300
Eller faktisk, vi skal blot dato, fordi
dato kommer til at omfatte alt.

1006
00:50:29,300 --> 00:50:34,310

1007
00:50:34,310 --> 00:50:40,010
Igen, hvis du bare Google noget om
hvad du vil gøre, hvis du skriver, "OK,

1008
00:50:40,010 --> 00:50:41,980
Jeg ønsker at få den tid
via JavaScript, "det

1009
00:50:41,980 --> 00:50:45,890
vil give dig denne store
funktion kaldet get dato.

1010
00:50:45,890 --> 00:50:48,664
Bogstaveligt, de fleste ting
at du ønsker at gøre,

1011
00:50:48,664 --> 00:50:50,830
JavaScript vil have
det gjort for dig allerede.

1012
00:50:50,830 --> 00:50:55,770
Så det er bogstaveligt talt som ny
få dato, hvilket er creating--

1013
00:50:55,770 --> 00:50:58,600
eller ny dato, rather--
som genererer

1014
00:50:58,600 --> 00:51:03,690
en genstand, der repræsenterer en dato.

1015
00:51:03,690 --> 00:51:08,200
>> Og hvad vi skal gøre her er
dette is-- jeg har tænkt mig at skrive dette,

1016
00:51:08,200 --> 00:51:10,820
og derefter forklare, hvad det gør.

1017
00:51:10,820 --> 00:51:12,560
Så jeg vil sørge for jeg får denne ret.

1018
00:51:12,560 --> 00:51:17,950

1019
00:51:17,950 --> 00:51:23,440
>> OK, så hvad denne funktion
gør, er vi bare

1020
00:51:23,440 --> 00:51:30,680
skabe HTML, der er faktisk
kommer til at gå i vores div id af ur.

1021
00:51:30,680 --> 00:51:34,610
Så hvad det vil gøre
er blot generere nogle streng, OK?

1022
00:51:34,610 --> 00:51:38,510
Det bliver så vil være
transplanteret ind i vores HTML.

1023
00:51:38,510 --> 00:51:42,130
Dybest set, hvad det kommer til at gøre, er
hvad we-- hvad jeg vil vise dig

1024
00:51:42,130 --> 00:51:49,070
er, at uanset hvad vi siger HTML er,
vi kommer til at erstatte denne tekst her

1025
00:51:49,070 --> 00:51:51,090
med hvad HTML er.

1026
00:51:51,090 --> 00:51:56,390
Så dette kommer til at tillade
os til at ændre vores ur prik

1027
00:51:56,390 --> 00:52:00,940
HTML fra at være blot teksten i dette
bør være et ur, til rent faktisk at vise

1028
00:52:00,940 --> 00:52:05,630
numre og ting, som vi holder af
om, og faktisk være klokken.

1029
00:52:05,630 --> 00:52:09,810
>> Så det, vi kommer til at gøre, er at vi er
vil begynde at generere denne HTML.

1030
00:52:09,810 --> 00:52:16,520
Så på samme måde, som vi brugte
at gøre plus lig for heltal,

1031
00:52:16,520 --> 00:52:20,461
kan du nu gøre det for strygere,
undtagen det kommer til at sammenkæde dem.

1032
00:52:20,461 --> 00:52:20,960
Right?

1033
00:52:20,960 --> 00:52:26,070
Som vi så med part dot js, det bare
sammenkæder alle disse ting sammen.

1034
00:52:26,070 --> 00:52:31,970
Så du kan sammenkæde forskellige stumper af
HTML fra variabler eller stumper af strenge

1035
00:52:31,970 --> 00:52:33,750
at du skriver ud
dig selv, og det bare

1036
00:52:33,750 --> 00:52:38,650
virkelig giver dig mulighed for dynamisk
generere HTML, som er temmelig cool.

1037
00:52:38,650 --> 00:52:42,040
Så hvis du har noget
meget brugerspecifikke,

1038
00:52:42,040 --> 00:52:44,130
dette kan give dig mulighed for at gøre det.

1039
00:52:44,130 --> 00:52:47,550
>> Så vi har HTML, til jeg har tænkt mig at
forsøge at sikre jeg får denne ret.

1040
00:52:47,550 --> 00:52:49,890
Så vi kommer til at gøre nogle h1 header.

1041
00:52:49,890 --> 00:52:53,610
Så hvad er vigtigt at indse her
er, at dette er faktisk bare HTML.

1042
00:52:53,610 --> 00:52:54,460
Right?

1043
00:52:54,460 --> 00:52:56,610
Vi skriver faktisk
HTML-kode på her, det er

1044
00:52:56,610 --> 00:53:01,090
ikke bare en streng i det normale
måde, at vi ville tænke over det.

1045
00:53:01,090 --> 00:53:02,930
Så vi har nogle HTML.

1046
00:53:02,930 --> 00:53:04,940
Dette betragtes som en streng her selv.

1047
00:53:04,940 --> 00:53:10,380
Og vi gør dato dot-- vi
ønsker at få vores timer.

1048
00:53:10,380 --> 00:53:12,910
Igen, hvis du skulle kigge
up noget om dato,

1049
00:53:12,910 --> 00:53:16,160
det ville fortælle dig disse er alle
de attributter, dato har.

1050
00:53:16,160 --> 00:53:17,670
Og her er hvad du kan bruge på det.

1051
00:53:17,670 --> 00:53:20,620
Så det har sandsynligvis ting som
få timer, og få minutter,

1052
00:53:20,620 --> 00:53:24,669
og få sekunder og få millisekunder,
og hvem ved hvad de har.

1053
00:53:24,669 --> 00:53:27,210
Men hvis man ser ind i
dokumentation, vil det hele være der.

1054
00:53:27,210 --> 00:53:31,980
>> Så vi har få timer,
og så ville vi ønsker

1055
00:53:31,980 --> 00:53:35,614
at sammenkæde at med-- jeg er
kommer til at flytte denne herovre.

1056
00:53:35,614 --> 00:53:38,780
Så hvis vi genererer lige nu, er vi
faktisk genererer den tid, ikke?

1057
00:53:38,780 --> 00:53:43,590
Vi har timer, og derefter hvad der er
mellem timer og minutter?

1058
00:53:43,590 --> 00:53:45,080
Du har et semikolon, ikke?

1059
00:53:45,080 --> 00:53:48,010
Så vi vil gøre nogle semikolon her.

1060
00:53:48,010 --> 00:53:51,780
Og så ønsker vi at få vores
minutter, så på samme måde

1061
00:53:51,780 --> 00:53:56,450
at vi har dato prik få timer,
hvordan kan vi få vores minutter?

1062
00:53:56,450 --> 00:54:01,542
Det er bogstavelig talt dato prik få
minutter, som jeg lidt ligesom.

1063
00:54:01,542 --> 00:54:03,250
Det er ligesom, "Åh, hvordan
får jeg mine minutter? "

1064
00:54:03,250 --> 00:54:05,850
Jeg bare få mine minutter.

1065
00:54:05,850 --> 00:54:07,500
>> OK.

1066
00:54:07,500 --> 00:54:10,990
Og så har vi en anden kolon her.

1067
00:54:10,990 --> 00:54:16,350
Og så hvis vi ønsker at få vores
sekunder, hvordan kan vi få vores andet?

1068
00:54:16,350 --> 00:54:17,400
Dato dot få sekunder.

1069
00:54:17,400 --> 00:54:20,390

1070
00:54:20,390 --> 00:54:21,590
Jeg synes det er ret cool.

1071
00:54:21,590 --> 00:54:23,589
Og hvad der er vigtigt for
indse, er, at vi også

1072
00:54:23,589 --> 00:54:31,730
nødt til at lukke vores HTML-tag her, fordi
Det skal stadig være gyldig 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øre ur
dot indre HTML er lig med HTML.

1075
00:54:43,110 --> 00:54:43,930
OK?

1076
00:54:43,930 --> 00:54:46,470
Så husk, hvordan jeg sagde
indre HTML dybest set

1077
00:54:46,470 --> 00:54:50,610
tager hvad der er mellem
to tags, som vi talte om

1078
00:54:50,610 --> 00:54:54,470
og skær eller manipulerer
hvad der er derinde?

1079
00:54:54,470 --> 00:54:58,290
Så hvad det gør, hvis
vi går tilbage til vores ur,

1080
00:54:58,290 --> 00:55:04,180
er, at uret refererer til
alt inden for denne div.

1081
00:55:04,180 --> 00:55:09,770
Dette er den indre HTML
af denne Id ur div.

1082
00:55:09,770 --> 00:55:13,930
Og så det kommer til at ændre det til
HTML, vi netop dannet,

1083
00:55:13,930 --> 00:55:16,750
der, som forhåbentlig
Forhåbentlig, forhåbentlig,

1084
00:55:16,750 --> 00:55:21,026
vil vise tiden lige nu.

1085
00:55:21,026 --> 00:55:23,960
Vi vil se.

1086
00:55:23,960 --> 00:55:25,170
Selvfølgelig.

1087
00:55:25,170 --> 00:55:26,860
Så mange tekniske spørgsmål.

1088
00:55:26,860 --> 00:55:31,480
Allisons bare-- jeg
fra min spil i dag fyre.

1089
00:55:31,480 --> 00:55:34,136
OK, der virker.

1090
00:55:34,136 --> 00:55:35,760
ur dot indre HTML.

1091
00:55:35,760 --> 00:55:42,097
Det var HTML Really?

1092
00:55:42,097 --> 00:55:43,180
Også dette er, hvad der sker.

1093
00:55:43,180 --> 00:55:48,750
Når du ikke kan se noget, du
bare se på din kildekode.

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
Vil du vide en cool arbejde omkring
at vi kommer til at gøre lige her?

1097
00:55:54,870 --> 00:55:55,740
>> PUBLIKUM: Kan du gøre store bogstaver?

1098
00:55:55,740 --> 00:55:56,580
De store bogstaver?

1099
00:55:56,580 --> 00:55:58,996
Fordi du har få timer,
og derefter få minutter.

1100
00:55:58,996 --> 00:56:02,590
>> ALLISON Buchholtz-AU: Det
er få timer og get-- oh.

1101
00:56:02,590 --> 00:56:04,945
Du are-- guldstjerne.

1102
00:56:04,945 --> 00:56:08,114

1103
00:56:08,114 --> 00:56:09,030
Det hele er en test, gutter.

1104
00:56:09,030 --> 00:56:13,630

1105
00:56:13,630 --> 00:56:17,330
Jeg lover, at det var i orden før klassen.

1106
00:56:17,330 --> 00:56:22,590
>> OK, men noget køligt at vide, er
at du kan also-- hvis undertiden

1107
00:56:22,590 --> 00:56:26,560
de eksterne filer er
få lidt skør,

1108
00:56:26,560 --> 00:56:30,960
du kan også bare sætte dem lige
herinde, som har en tendens til at ordne tingene.

1109
00:56:30,960 --> 00:56:35,840
Undtagen dette er ligesom virkelig grimme.

1110
00:56:35,840 --> 00:56:38,050
Selvfølgelig formatere alt.

1111
00:56:38,050 --> 00:56:41,425
Sørg for at det hele er smuk.

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
>> Jeg ønskede at gøre alle de seje demoer,
og de er bare ikke arbejder ud.

1115
00:56:50,621 --> 00:56:51,555
OK.

1116
00:56:51,555 --> 00:56:53,890
Script var ur.

1117
00:56:53,890 --> 00:57:00,350
Anyways, hvad der er vigtigt er,
at dette er den almindelige måde

1118
00:57:00,350 --> 00:57:01,870
at du ville formatere JavaScript.

1119
00:57:01,870 --> 00:57:04,490
Som du kan se, kan det være
meget kræsen tider,

1120
00:57:04,490 --> 00:57:08,780
selv når det var bogstaveligt
arbejdet, to sekunder siden.

1121
00:57:08,780 --> 00:57:11,820
Eller ikke to sekund siden,
men meget, meget nylig.

1122
00:57:11,820 --> 00:57:16,070
>> Så for at vise dig, hvad det skal se ud,
og til at vise dig, at jeg ikke er skør,

1123
00:57:16,070 --> 00:57:19,730
og at alt er præcis den
samme, det er hvad det skal se ud.

1124
00:57:19,730 --> 00:57:27,410
Du er bare kommer til at gøre denne top del
her, og hvis du ser side kilde,

1125
00:57:27,410 --> 00:57:32,160
hvis du bemærker, han gjorde nogle
crazier ting, jeg forenklet det.

1126
00:57:32,160 --> 00:57:35,710
Også kredit til Tommy
McWilliam, der rent faktisk

1127
00:57:35,710 --> 00:57:38,810
hjalp mig oprette disse eksempler,
hvilket er grunden til jeg ved, at de arbejder.

1128
00:57:38,810 --> 00:57:41,560
Fordi Tommy er en JavaScript mester.

1129
00:57:41,560 --> 00:57:43,180
Men hvis vi bemærker, har vi nogle sæt.

1130
00:57:43,180 --> 00:57:45,170
Vi har vores ur-funktion her.

1131
00:57:45,170 --> 00:57:48,450
Dette er JavaScript,
vi bare skrev, eller noget af det.

1132
00:57:48,450 --> 00:57:51,470
Vi har lige skrev denne ene lige her.

1133
00:57:51,470 --> 00:57:54,260
Og han har en ekstra
funktion, bare puder det

1134
00:57:54,260 --> 00:57:57,790
ved at sætte et nul, før en
bogstav eller før et nummer, hvis det er

1135
00:57:57,790 --> 00:57:59,412
kun en af ​​dem.

1136
00:57:59,412 --> 00:58:02,120
Så hvis du bemærker, dette er temmelig
meget præcis, hvad vi lige har skrevet.

1137
00:58:02,120 --> 00:58:06,230
Du har nogle variable ur,
har vores element, får element af ID,

1138
00:58:06,230 --> 00:58:07,252
som er ur.

1139
00:58:07,252 --> 00:58:08,960
Vi har vores indstillede interval
funktion, det er

1140
00:58:08,960 --> 00:58:12,670
en anonym funktion
der udfører alt dette.

1141
00:58:12,670 --> 00:58:16,940
Vi har nogle start streng af
HTML at vi så dynamisk

1142
00:58:16,940 --> 00:58:20,750
generere ved at have nogle
h1 header, sammenkæde

1143
00:58:20,750 --> 00:58:23,950
med få timer, plus
vores tyktarm, plus at få

1144
00:58:23,950 --> 00:58:26,860
referatet, plus en anden
kolon, plus vores sekunder

1145
00:58:26,860 --> 00:58:29,330
og endelig slutter HTML for det.

1146
00:58:29,330 --> 00:58:34,210
Og derefter opdatere vi vores ur
dot indre HTML til HTML,

1147
00:58:34,210 --> 00:58:37,640
og vi opdaterer hver 100 millisekunder.

1148
00:58:37,640 --> 00:58:39,060
OK?

1149
00:58:39,060 --> 00:58:42,470
>> Se Jeg lover jeg ikke skør.

1150
00:58:42,470 --> 00:58:43,440
Jeg ved det ikke.

1151
00:58:43,440 --> 00:58:47,160
Jeg ved ikke, hvorfor den ikke kan lide mig.

1152
00:58:47,160 --> 00:58:54,030
Jeg føler mig som ser det samme,
men det hader mig tilsyneladende.

1153
00:58:54,030 --> 00:58:59,600
>> Så lad os se om runde tre går bedre.

1154
00:58:59,600 --> 00:59:00,970
Vi er ved at se.

1155
00:59:00,970 --> 00:59:02,910
Jeg er ikke sikker på, hvordan det kommer til at gå.

1156
00:59:02,910 --> 00:59:06,700
Er alle mindst få
ulemper, ligesom bare det overordnede tema

1157
00:59:06,700 --> 00:59:08,480
af JavaScript, selv?

1158
00:59:08,480 --> 00:59:15,660
Jeg håber, det er i hvert fald nyttigt, mere
end at vise, at det er lidt kræsen.

1159
00:59:15,660 --> 00:59:21,190
Men dit problem sæt vil være meget sjovt.

1160
00:59:21,190 --> 00:59:22,590
Det kommer til at være stor.

1161
00:59:22,590 --> 00:59:24,820
Det vil ikke være helt så kedelig
da dette, tror jeg ikke.

1162
00:59:24,820 --> 00:59:28,100
Du vil faktisk komme til
se virkelig cool ting.

1163
00:59:28,100 --> 00:59:31,734
>> Så sidst men ikke mindst,
vi skal prøve Twitter én.

1164
00:59:31,734 --> 00:59:32,900
Jeg er virkelig bange nu, gutter.

1165
00:59:32,900 --> 00:59:35,762
Jeg ved ikke, hvordan det kommer til at gå.

1166
00:59:35,762 --> 00:59:39,930
Men bare for at give dig lidt
mere smag, og det er faktisk

1167
00:59:39,930 --> 00:59:44,190
manipulere strenge og
indgange, hvad vi vil gøre

1168
00:59:44,190 --> 00:59:50,960
er, hvis vi bemærker her med HTML--
denne ene har en lille smule more--

1169
00:59:50,960 --> 00:59:57,200
vi har noget tekst område, som
svarer til denne tekst område her.

1170
00:59:57,200 --> 00:59:58,030
OK?

1171
00:59:58,030 --> 01:00:00,420
Og det har en Id af tekst.

1172
01:00:00,420 --> 01:00:04,520
Vi nyindrettede det en lille smule
med nogle bredde og højde

1173
01:00:04,520 --> 01:00:07,310
at vi har forudbestemt,
og vi har H1,

1174
01:00:07,310 --> 01:00:11,260
som netop er vores header, der
repræsenterer vores tegn tilbage.

1175
01:00:11,260 --> 01:00:14,570
Vi gav det nogle Id af
tegn tilbage,

1176
01:00:14,570 --> 01:00:18,660
og så har vi nogle script
her, som jeg er virkelig

1177
01:00:18,660 --> 01:00:20,790
håber tredje gang er
charmen her, gutter.

1178
01:00:20,790 --> 01:00:26,750
>> Så det, vi ønsker at gøre,
i den samme generelle vene

1179
01:00:26,750 --> 01:00:31,480
at vi har gjort med ur dot js
og fest dot js som vi har bemærket,

1180
01:00:31,480 --> 01:00:35,980
er vi startet ved faktisk snuppe
de ting, vi holder af, ikke?

1181
01:00:35,980 --> 01:00:42,330
Så i dette tilfælde, er der to
ting, som vi holder af, OK?

1182
01:00:42,330 --> 01:00:47,199
En ting, vi er faktisk slags
leder til og trække data fra

1183
01:00:47,199 --> 01:00:48,990
og en ting,
vi faktisk forandring.

1184
01:00:48,990 --> 01:00:52,110

1185
01:00:52,110 --> 01:00:53,730
Så der er vores HTML.

1186
01:00:53,730 --> 01:01:00,370
Hvis dette er vores hjemmeside her, hvad der er
de data, vi kigger på?

1187
01:01:00,370 --> 01:01:03,860
Det kommer til at være, hvad
teksten i vores bokse, ikke?

1188
01:01:03,860 --> 01:01:05,310
Så uanset hvad jeg skriver i her.

1189
01:01:05,310 --> 01:01:08,150
Det er, hvad jeg vil vide, eller
det er, hvad jeg ønsker at se på.

1190
01:01:08,150 --> 01:01:10,690
Og hvad vil være
ændre på vores hjemmeside?

1191
01:01:10,690 --> 01:01:13,550

1192
01:01:13,550 --> 01:01:14,880
De tegn tilbage.

1193
01:01:14,880 --> 01:01:19,550
Så på samme måde, vi ønsker at
begynde ved at initialisere variabler

1194
01:01:19,550 --> 01:01:22,030
der rent faktisk holde på disse elementer.

1195
01:01:22,030 --> 01:01:22,890
OK?

1196
01:01:22,890 --> 01:01:29,930
Så hvis vi har nogle var
det er vores tekstområde,

1197
01:01:29,930 --> 01:01:33,681
og vi har nogle var der er tilbage.

1198
01:01:33,681 --> 01:01:34,180
Right?

1199
01:01:34,180 --> 01:01:36,190
Så disse kommer til at
holde disse to ting.

1200
01:01:36,190 --> 01:01:42,370
Så den samme slags ting,
dokument dot-- OK, jeg er

1201
01:01:42,370 --> 01:01:45,920
vil sørge for dette er
kommer til at arbejde denne gang.

1202
01:01:45,920 --> 01:01:49,620
Jeg er meget stejlt.

1203
01:01:49,620 --> 01:01:53,310
OK, så hvis vi ønsker, at vores
tekstområde, ifølge

1204
01:01:53,310 --> 01:01:55,710
til vores HTML, hvad er vores id?

1205
01:01:55,710 --> 01:01:56,420
Hvad er vores Id?

1206
01:01:56,420 --> 01:01:59,500

1207
01:01:59,500 --> 01:02:05,540
Det er bare kommer til at være tekst, fordi
dette skaber vores tekst område, OK,

1208
01:02:05,540 --> 01:02:10,320
og vores id er tekst, så det er
hvordan vi kan få fat i, hvad der er derinde.

1209
01:02:10,320 --> 01:02:12,130
OK, semikolon.

1210
01:02:12,130 --> 01:02:13,940
Jeg har tænkt mig at være super
præcist om dette,

1211
01:02:13,940 --> 01:02:16,300
fordi jeg ønsker, at dette arbejde denne gang.

1212
01:02:16,300 --> 01:02:22,120
OK, gøre det samme,
få element af Id.

1213
01:02:22,120 --> 01:02:25,970
Jeg er virkelig spekulerer på, hvad har
forårsagede de to andre at rod.

1214
01:02:25,970 --> 01:02:29,750
OK, så i dette ene,
hvad vil vi få adgang til?

1215
01:02:29,750 --> 01:02:30,760
Hvad er vores Id her?

1216
01:02:30,760 --> 01:02:33,980

1217
01:02:33,980 --> 01:02:36,261
Vi har en anden id i
vores HTML, hvad er det?

1218
01:02:36,261 --> 01:02:37,552
PUBLIKUM: tegn tilbage.

1219
01:02:37,552 --> 01:02:39,343
ALLISON Buchholtz-AU:
Tegn tilbage.

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å jeg bare gå til
skriver dette virkelig hurtig.

1224
01:02:49,800 --> 01:02:53,706

1225
01:02:53,706 --> 01:02:55,330
Jeg bare at skrive dette i sekundet.

1226
01:02:55,330 --> 01:02:56,190
Så tekstområde.

1227
01:02:56,190 --> 01:02:59,550

1228
01:02:59,550 --> 01:03:06,180
Det interessante er B function-- der
er masser af funktioner, som ikke kun

1229
01:03:06,180 --> 01:03:09,690
svarer til dine
mus, men tastaturet.

1230
01:03:09,690 --> 01:03:10,190
OK?

1231
01:03:10,190 --> 01:03:16,540
Så du kan sige, når en tast er
presset, kan du gøre ting som.

1232
01:03:16,540 --> 01:03:20,450
Så det, vi bruger
kaldes på nøgle op, som

1233
01:03:20,450 --> 01:03:25,320
siger, "hvis du har trykket på en tast på
tastaturet, når brugeren har løftet

1234
01:03:25,320 --> 01:03:28,064
deres finger det knap,
og nøglen er blevet upresset,

1235
01:03:28,064 --> 01:03:29,480
så vi kommer til at gøre noget. "

1236
01:03:29,480 --> 01:03:29,980
OK?

1237
01:03:29,980 --> 01:03:31,370
Så det giver mening, ikke?

1238
01:03:31,370 --> 01:03:33,540
Fordi hvert tegn
vi skriver, vi skal

1239
01:03:33,540 --> 01:03:36,550
at nødt til at løfte vores fingre off
af det, så når nøglen går op,

1240
01:03:36,550 --> 01:03:40,980
vi kan vide at formindske
vores tegn tilbage.

1241
01:03:40,980 --> 01:03:44,440
>> Så vi har nogle på nøgle
op, og på samme måde,

1242
01:03:44,440 --> 01:03:47,480
vi kommer til at sige,
"OK, når vi gør det, vi

1243
01:03:47,480 --> 01:03:55,110
kommer til at skabe nogle funktion,
vil tage e "i dette tilfælde,

1244
01:03:55,110 --> 01:03:58,800
og hvad vi ønsker at gøre, er
beregne antallet tilbage.

1245
01:03:58,800 --> 01:04:02,510
OK, så lad os bare starte
ved at skabe en variabel.

1246
01:04:02,510 --> 01:04:05,830
Så vi har nogle variable r,
der kommer til at repræsentere

1247
01:04:05,830 --> 01:04:07,720
hvor mange tegn, vi har tilbage.

1248
01:04:07,720 --> 01:04:08,890
OK?

1249
01:04:08,890 --> 01:04:14,540
Vi ved, at vi starter med
140, og hvis vi ønsker at vide,

1250
01:04:14,540 --> 01:04:18,360
Lad os sige, at længden af ​​denne
streng, der har været input,

1251
01:04:18,360 --> 01:04:20,860
Har du fyre har nogen idé
hvordan vi kan gøre det?

1252
01:04:20,860 --> 01:04:23,900
Lige baseret ud af det åbenlyse
ting, som hvis vi ønskede timer,

1253
01:04:23,900 --> 01:04:25,870
vi bruges få timer.

1254
01:04:25,870 --> 01:04:28,860
Vi ved, at vores formål er
tekst område, men kunne du fyre

1255
01:04:28,860 --> 01:04:33,050
tænke på, hvad der kan komme efter det?

1256
01:04:33,050 --> 01:04:35,280
Nogen idéer?

1257
01:04:35,280 --> 01:04:41,730
>> Så denne ene er lidt mindre
intuitiv, men det værdi dot længde.

1258
01:04:41,730 --> 01:04:44,700
Så bare give mig nogle
værdi attribut,

1259
01:04:44,700 --> 01:04:46,500
er faktisk længden af ​​denne streng.

1260
01:04:46,500 --> 01:04:50,340
Så det kommer til at sige, "OK, jeg leder
ved hele denne streng indenfor tekstområdet,

1261
01:04:50,340 --> 01:04:52,730
og jeg har tænkt mig at fortælle
dig, hvor lang tid det er. "

1262
01:04:52,730 --> 01:04:55,500
For hvis vi husker strenge
er virkelig kun arrays,

1263
01:04:55,500 --> 01:04:58,110
så vi bare kan tage længden af ​​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
>> Så det, vi ønsker at gøre, er vi
aldrig vil tillade brugeren

1267
01:05:09,360 --> 01:05:12,340
indtaste mere end
140 tegn, ikke?

1268
01:05:12,340 --> 01:05:15,610
For hvis vi siger ligesom, "Åh, du
kun så meget tilbage, "

1269
01:05:15,610 --> 01:05:20,522
og derefter lade dem gøre det
anyways, har vi ligget.

1270
01:05:20,522 --> 01:05:22,230
Og det er en anden
ting at JavaScript

1271
01:05:22,230 --> 01:05:24,530
kan være rigtig godt
for, er brugervalidering

1272
01:05:24,530 --> 01:05:29,062
og sikre, at din
bruger passer ind nogen regler

1273
01:05:29,062 --> 01:05:30,270
at du har givet til dem.

1274
01:05:30,270 --> 01:05:36,020
Så hvis du ønsker at gøre ting som gør
sikker på nogen input deres e-mail-adresse,

1275
01:05:36,020 --> 01:05:40,242
eller at sørge for, at når de
indtaste to passwords, de matchede.

1276
01:05:40,242 --> 01:05:41,200
JavaScript kan gøre det.

1277
01:05:41,200 --> 01:05:44,010
Du ville gøre noget lignende, "når
formularen er sendt "eller lignende,

1278
01:05:44,010 --> 01:05:48,170
"Når Send formular knap er
klikkede, find ud af alle disse ting. "

1279
01:05:48,170 --> 01:05:49,670
Og vi kan gøre det JavaScript.

1280
01:05:49,670 --> 01:05:52,680
Så det er lige, hvad
vi vil gøre her.

1281
01:05:52,680 --> 01:05:57,810
>> Så hvad der kunne være en måde at kontrollere, om
de har gået over 140 tegn?

1282
01:05:57,810 --> 01:06:03,310
Hvad kommer til at ske med
vores værdi af r hvis de prøver?

1283
01:06:03,310 --> 01:06:04,760
Det kommer til at være negativ, ikke?

1284
01:06:04,760 --> 01:06:07,380
Eller det vil være mindre
end eller lig med nul.

1285
01:06:07,380 --> 01:06:13,690
Så vi kan bruge en, hvis det er
ligesom alt andet.

1286
01:06:13,690 --> 01:06:14,270
OK?

1287
01:06:14,270 --> 01:06:20,480
Og vi har nogle tekstområde dot
værdi, og hvad vi laver her

1288
01:06:20,480 --> 01:06:29,940
er vi bare cutting-- hvad er det?

1289
01:06:29,940 --> 01:06:30,900
Undskyld.

1290
01:06:30,900 --> 01:06:32,732
Denne ene, vi ønsker blot at returnere falsk.

1291
01:06:32,732 --> 01:06:34,030
Jeg fik forvirret.

1292
01:06:34,030 --> 01:06:36,560
Alle frazzled fra ting ikke fungerer.

1293
01:06:36,560 --> 01:06:40,010
OK, vi ønsker blot at
return false, og så vi

1294
01:06:40,010 --> 01:06:44,160
ønsker at vise
resterende tegn, ikke?

1295
01:06:44,160 --> 01:06:48,720
Så med uret, vi gjorde
noget med indvendig HTML, ikke?

1296
01:06:48,720 --> 01:06:52,070
Hvor vi sat det lige for nogle
variable, så hvad kunne vi gøre her?

1297
01:06:52,070 --> 01:06:54,590

1298
01:06:54,590 --> 01:06:57,750
Hvad skal vi ændre den indre HTML af?

1299
01:06:57,750 --> 01:07:02,843

1300
01:07:02,843 --> 01:07:03,780
>> PUBLIKUM: Resterende?

1301
01:07:03,780 --> 01:07:05,738
>> ALLISON Buchholtz-AU:
Vi er ved at ændre tilbage.

1302
01:07:05,738 --> 01:07:09,217

1303
01:07:09,217 --> 01:07:11,300
Okay, og hvad gør vi
ønsker at sætte det lig med?

1304
01:07:11,300 --> 01:07:14,440

1305
01:07:14,440 --> 01:07:18,437
Det kommer til at være r, fordi det
bør være vores tegn tilbage.

1306
01:07:18,437 --> 01:07:19,600
OK?

1307
01:07:19,600 --> 01:07:26,060
Så jeg er virkelig nervøs for at se, om
dette virker nu, men vi vil se.

1308
01:07:26,060 --> 01:07:28,960

1309
01:07:28,960 --> 01:07:29,460
Lad dette.

1310
01:07:29,460 --> 01:07:34,690

1311
01:07:34,690 --> 01:07:37,700
Det er virkelig hurtig.

1312
01:07:37,700 --> 01:07:38,970
[Uhørligt] OK.

1313
01:07:38,970 --> 01:07:44,574

1314
01:07:44,574 --> 01:07:45,990
Igen, jeg bare vil vise dig.

1315
01:07:45,990 --> 01:07:49,430
Uanset årsagen,
mine beslutter ikke at arbejde,

1316
01:07:49,430 --> 01:07:53,354
men hvad jeg vil vise dig er, at denne
is-- oh Jeg skulle sætte det i.

1317
01:07:53,354 --> 01:07:57,470
OK, vi bemærker den samme slags
ting her, at få tekstområdet.

1318
01:07:57,470 --> 01:08:01,070
>> Også, hvis du guy varsel, hvis der er
nogensinde noget, du ønsker at gøre,

1319
01:08:01,070 --> 01:08:04,080
og du ved ikke, hvordan man gør
det, skal du blot klikke Vis sidens kilde,

1320
01:08:04,080 --> 01:08:06,632
og de kommer til at fortælle dig.

1321
01:08:06,632 --> 01:08:07,840
Nogle gange vil det være krypteret.

1322
01:08:07,840 --> 01:08:11,147
For din pset, vi krypterer alting,
så det bare ligner volapyk.

1323
01:08:11,147 --> 01:08:13,480
Men hvis der er nogensinde en rigtig
kølig websted, som du kan lide,

1324
01:08:13,480 --> 01:08:17,729
hvis du bare klikke på Vis sidens kilde,
det kommer til at fortælle dig, hvordan du gør det.

1325
01:08:17,729 --> 01:08:20,770
Så igen, at arbejde smartere, ikke hårdere.

1326
01:08:20,770 --> 01:08:24,250
Og som du kan se her, alle
disse ting er ens.

1327
01:08:24,250 --> 01:08:31,930
denne ene her blot tager nogle substring
at jeg glemmer præcis, hvad det betyder.

1328
01:08:31,930 --> 01:08:36,980
Men det tager selvfølgelig nogle substring
af værdien fra nul til ti,

1329
01:08:36,980 --> 01:08:41,540
og returnerer falsk hvad bør stoppe
brugeren fra indlæsning længere,

1330
01:08:41,540 --> 01:08:46,040
og så selvfølgelig opdaterer
den indre HTML der.

1331
01:08:46,040 --> 01:08:47,410
>> Cool.

1332
01:08:47,410 --> 01:08:53,000
Så store tage på lager fra i dag,
eksperiment, se på kildekoden

1333
01:08:53,000 --> 01:08:58,359
fordi det vil hjælpe dig meget,
og alle, nogle gange JavaScript

1334
01:08:58,359 --> 01:09:03,200
kan være svært at arbejde med og ikke
altid arbejde på den måde, du forventer, at,

1335
01:09:03,200 --> 01:09:05,700
men bare holde forsøger
fordi jeg lover, at det vil.

1336
01:09:05,700 --> 01:09:08,376
Jeg lover alle disse eksempler
arbejdede før klassen.

1337
01:09:08,376 --> 01:09:09,750
Jeg forstår ikke, hvad der skete.

1338
01:09:09,750 --> 01:09:13,069
Jeg bogstaveligt talt har alt det samme.

1339
01:09:13,069 --> 01:09:17,660
>> En ting mere, som jeg ønsker blot at
vise jer, der kan være super nyttig

1340
01:09:17,660 --> 01:09:21,630
er in-- hvad arbejdede før?

1341
01:09:21,630 --> 01:09:23,935
Vi fik part i arbejde, har vi ikke?

1342
01:09:23,935 --> 01:09:26,569
Det tror jeg.

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
Awesome.

1346
01:09:28,250 --> 01:09:31,189
OK, så en ting,
du fyre skal vide

1347
01:09:31,189 --> 01:09:33,340
er konsollen log, som jeg talte om.

1348
01:09:33,340 --> 01:09:37,040
Så trøste dot log over hej.

1349
01:09:37,040 --> 01:09:40,430
Så dette er sådan det
JavaScript svarer til printf.

1350
01:09:40,430 --> 01:09:42,810
Så hvis du nogensinde vil
inspicere dine variabler

1351
01:09:42,810 --> 01:09:49,649
eller se, hvad der sker der, hvad
du kan gøre er, hvis vi inspicere element,

1352
01:09:49,649 --> 01:09:51,899
er, hvad du ønsker at gå
til, og du går at trøste,

1353
01:09:51,899 --> 01:09:53,770
vil du se, at det trykte hej.

1354
01:09:53,770 --> 01:09:55,750
>> Så vi kunne have det
print hvad vi ville.

1355
01:09:55,750 --> 01:10:04,170
Hvis vi ønskede at udskrive baggrund
dot stil dot baggrund

1356
01:10:04,170 --> 01:10:08,454
Vi bør være i stand til at se den
RGB triple, der kommer op.

1357
01:10:08,454 --> 01:10:11,140
Eller ikke.

1358
01:10:11,140 --> 01:10:13,520
Jeg glemmer præcis hvordan du
udskrive en variabel som det,

1359
01:10:13,520 --> 01:10:17,249
men du bør være i stand til at
udskrive noget.

1360
01:10:17,249 --> 01:10:19,040
Det vil være meget nyttigt
for din pset når

1361
01:10:19,040 --> 01:10:23,330
du forsøger at manipulere
koordinater eller whatnot.

1362
01:10:23,330 --> 01:10:25,270
Så de også ændre dette stykke i klassen.

1363
01:10:25,270 --> 01:10:30,750
Dette er forskelligt fra sidste år, så
bare være rart at dine TF'er eller TFS

1364
01:10:30,750 --> 01:10:36,350
ved kontortid snarere, fordi vi er
form for læring sammen med jer.

1365
01:10:36,350 --> 01:10:41,230
Men konsollen log var super, super
nyttigt for JavaScript sidste år.

1366
01:10:41,230 --> 01:10:42,740
Så elsker det.

1367
01:10:42,740 --> 01:10:43,780
Lær at bruge den.

1368
01:10:43,780 --> 01:10:49,026
Det er nemmere at bruge end GDB, så
bør være mindst et plus punkt.

1369
01:10:49,026 --> 01:10:50,650
Men tak gutter bærer med mig.

1370
01:10:50,650 --> 01:10:53,400
Jeg er ked af, at min
eksempler på en eller anden grund

1371
01:10:53,400 --> 01:10:55,410
bare ikke lyst til at
samarbejde med mig, men jeg

1372
01:10:55,410 --> 01:11:01,010
håber, at det hjalp slags får du en
lidt mere i den zone af JavaScript.

1373
01:11:01,010 --> 01:11:04,980
Og send mig alle dine spørgsmål til
næste uge, så jeg kan super repareres,

1374
01:11:04,980 --> 01:11:09,420
og jeg vil bringe slik og endda ekstra
slik, fordi det var latterligt.

1375
01:11:09,420 --> 01:11:14,000
Men du fyre er stor,
og har en fantastisk uge.

1376
01:11:14,000 --> 01:11:15,584