1
00:00:00,000 --> 00:00:03,840
>> [Musik spiller]

2
00:00:03,840 --> 00:00:05,770

3
00:00:05,770 --> 00:00:08,690
>> DOUG LLOYD: Så nu er vi gamle
proffer på webprogrammering, ikke?

4
00:00:08,690 --> 00:00:12,140
Og vi har dækket flere
sprog i de enkelte videoer.

5
00:00:12,140 --> 00:00:14,690
Og lad os nu gøre en mere, JavaScript.

6
00:00:14,690 --> 00:00:17,370
>> Først de gode nyheder, JavaScript
er en moderne programmering

7
00:00:17,370 --> 00:00:21,410
sprog meget gerne PHP, hvis
syntaks er afledt af C,

8
00:00:21,410 --> 00:00:22,830
så det er et godt sted at starte.

9
00:00:22,830 --> 00:00:25,880
Det handler om så gammel som PHP, så godt,
have været omkring omkring 20 år.

10
00:00:25,880 --> 00:00:28,600
Det blev opfundet omkring
samtidig med PHP.

11
00:00:28,600 --> 00:00:32,240
Og JavaScript er faktisk temmelig
grundlæggende for brugeroplevelsen

12
00:00:32,240 --> 00:00:32,740
af banen.

13
00:00:32,740 --> 00:00:34,448
I virkeligheden er der
tre sprog, som jeg

14
00:00:34,448 --> 00:00:38,480
ville sige slags udgør
brugeroplevelse interagere

15
00:00:38,480 --> 00:00:42,650
med hjemmesiden, html,
css, og JavaScript.

16
00:00:42,650 --> 00:00:46,030
Og så lad os nu snakke
lidt om JavaScript.

17
00:00:46,030 --> 00:00:50,301
>> Den dårlige nyhed, dog med JavaScript er
at det sætter en masse regler for sig selv,

18
00:00:50,301 --> 00:00:51,300
og derefter det bryder dem.

19
00:00:51,300 --> 00:00:54,010
Og JavaScript kan faktisk være
form for udfordrende at lære,

20
00:00:54,010 --> 00:00:57,000
fordi det er i modsætning til C og
PHP, som er meget struktureret

21
00:00:57,000 --> 00:01:00,270
og har meget strenge regler
til, hvordan tingene kan fungere.

22
00:01:00,270 --> 00:01:03,690
JavaScript har slags
af fået så fleksibel

23
00:01:03,690 --> 00:01:06,650
at måske tingene ikke kommer til at
arbejde på den måde, vi forventer, at,

24
00:01:06,650 --> 00:01:09,830
og måske vi kan virkelig ikke lære
vores første programmeringssprog

25
00:01:09,830 --> 00:01:10,769
som en JavaScript.

26
00:01:10,769 --> 00:01:12,810
Så måske fordi det ikke
sat sig nogen regler,

27
00:01:12,810 --> 00:01:15,754
og det gør egentlig ikke
håndhæve gode kodning vaner.

28
00:01:15,754 --> 00:01:18,170
Men nu har vi forhåbentlig udviklet
nogle gode kodning vaner,

29
00:01:18,170 --> 00:01:21,470
og så vi kan begynde at strejftog
ind i javascript en lille smule.

30
00:01:21,470 --> 00:01:25,750
>> For at skrive JavaScript, svarende til åbning
en C-fil med en prik C forlængelse

31
00:01:25,750 --> 00:01:29,770
eller en PHP-fil med en prik PHP udvidelse,
alt, hvad vi skal gøre, er at åbne op en fil

32
00:01:29,770 --> 00:01:31,764
med dot js filtypen.

33
00:01:31,764 --> 00:01:34,430
Vi behøver ikke at have nogen særlig
afgrænsere som vi gjorde i PHP.

34
00:01:34,430 --> 00:01:36,750
Den slags vinkel
beslag spørgsmålstegn PHP

35
00:01:36,750 --> 00:01:40,300
at vi er vant til fra det, den måde
vi fortæller vores browser, hvad vi har, er

36
00:01:40,300 --> 00:01:43,502
JavaScript er ved at inkludere
det i en html-tag,

37
00:01:43,502 --> 00:01:46,210
og vi vil se lidt om
hvordan man gør det på bare et øjeblik.

38
00:01:46,210 --> 00:01:48,210
>> Den anden ting, der gør
JavaScript anderledes,

39
00:01:48,210 --> 00:01:50,580
er dog, at det kører klientsiden.

40
00:01:50,580 --> 00:01:53,430
Så husker med PHP som
vi kunne aldrig rigtig se

41
00:01:53,430 --> 00:01:57,041
PHP, der understregede en hjemmeside.

42
00:01:57,041 --> 00:01:59,040
Hvis vi nogensinde set den
side kilde, ville vi kun

43
00:01:59,040 --> 00:02:02,830
se html, der var
genereret ved denne PHP.

44
00:02:02,830 --> 00:02:04,900
Men JavaScript kører klientsiden.

45
00:02:04,900 --> 00:02:06,710
Din JavaScript kører på din computer.

46
00:02:06,710 --> 00:02:09,050
Og det er derfor, du kan gøre
tingene gerne tilføje blokkere.

47
00:02:09,050 --> 00:02:09,550
Højre?

48
00:02:09,550 --> 00:02:12,704
Ad blokering sker som regel ved
dræbe alle de JavaScript

49
00:02:12,704 --> 00:02:14,370
der kører på et bestemt websted.

50
00:02:14,370 --> 00:02:19,000
Og fordi det ville være nødt til
køre på din maskine klientsiden,

51
00:02:19,000 --> 00:02:21,910
kan du bare stoppe
JavaScript til at køre helt.

52
00:02:21,910 --> 00:02:27,030
Det betyder også, at når du bruger
en hjemmeside, der indeholder JavaScript,

53
00:02:27,030 --> 00:02:32,450
du nødt til at sende JavaScript kilde
kode som en del af din HTTP-svar

54
00:02:32,450 --> 00:02:34,159
til kunden, når de anmoder om det.

55
00:02:34,159 --> 00:02:35,950
Og så ikke måske du
ønsker at bruge JavaScript

56
00:02:35,950 --> 00:02:38,395
at gøre virkelig følsomme ting
ligesom videregive oplysninger

57
00:02:38,395 --> 00:02:41,020
om brugernes adgangskoder bakke og
frem, fordi de er faktisk

58
00:02:41,020 --> 00:02:45,610
kommer til at modtage alle kildekoden,
ikke kun html, der genereres,

59
00:02:45,610 --> 00:02:49,030
såsom det ville være tilfældet med sige PHP.

60
00:02:49,030 --> 00:02:51,620
>> Så hvordan gør vi inkluderer JavaScript
i vores html at starte med?

61
00:02:51,620 --> 00:02:54,520
Nå, svarende til CSS, faktisk,
er sortering af hvordan vi gør det her.

62
00:02:54,520 --> 00:02:56,190
Med CSS har vi stil tags.

63
00:02:56,190 --> 00:03:00,760
Og inde i disse stil tags,
Vi kan definere en CSS style sheet.

64
00:03:00,760 --> 00:03:03,450
Tilsvarende med JavaScript
kan vi åbne op scripttags,

65
00:03:03,450 --> 00:03:06,660
anden html-tag, vi ikke gjorde
taler om i vores html-video,

66
00:03:06,660 --> 00:03:09,720
og skrive JavaScript i
mellem disse script tags.

67
00:03:09,720 --> 00:03:13,960
Også selvom, som CSS, vi
kunne forbinde med uden CSS-filer

68
00:03:13,960 --> 00:03:15,900
og trække dem ind i vores program på den måde.

69
00:03:15,900 --> 00:03:18,280
Med CSS kan vi også,
undskyld mig, med JavaScript

70
00:03:18,280 --> 00:03:23,240
Vi kan også angive kilden
attribut i script-tag

71
00:03:23,240 --> 00:03:25,720
at linke i JavaScript
separat, så du ikke gør

72
00:03:25,720 --> 00:03:27,680
nødt til at skrive det i
mellem scripttags, vi

73
00:03:27,680 --> 00:03:29,600
kan linke det i at bruge
at script-tag så godt.

74
00:03:29,600 --> 00:03:33,230
Og ligesom med tilfældet med CSS, hvor
anbefaler vi, at det var nok

75
00:03:33,230 --> 00:03:36,090
i din bedste interesse at skrive
din CSS i en separat fil i tilfælde

76
00:03:36,090 --> 00:03:38,500
du har brug for at ændre det,
ligeledes gør vi anbefaler

77
00:03:38,500 --> 00:03:40,720
at du skriver din
JavaScript i separate filer

78
00:03:40,720 --> 00:03:45,460
og bruge scripttags kilde
tillægge binde din JavaScript

79
00:03:45,460 --> 00:03:49,520
ind i din html, din webside.

80
00:03:49,520 --> 00:03:52,610
>> Så JavaScript variabler, vi får
begynde at tale om syntaksen her.

81
00:03:52,610 --> 00:03:53,600
Og vi vil gå igennem
denne form for hurtigt,

82
00:03:53,600 --> 00:03:56,640
fordi vi har gjort dette i PHP, så
dette bør alle være temmelig bekendt.

83
00:03:56,640 --> 00:03:59,490
Så variabler i JavaScript er
meget lig PHP variabler.

84
00:03:59,490 --> 00:04:03,270
Der er ingen form anvisning, og
når man indfører en variabel,

85
00:04:03,270 --> 00:04:05,070
du præfikset det med nøgleordet var.

86
00:04:05,070 --> 00:04:07,750
I PHP ville vi gøre noget
som dette, dollartegn x.

87
00:04:07,750 --> 00:04:09,950
Det er, hvordan vi angivet
en variabel, men nej, vi

88
00:04:09,950 --> 00:04:12,060
ikke nævner den type
af den variable overhovedet.

89
00:04:12,060 --> 00:04:15,124
Vi ville sige noget lignende
dollar tegn x er lig 44 i PHP.

90
00:04:15,124 --> 00:04:17,040
Hvis vi gjorde det
samme ting i JavaScript,

91
00:04:17,040 --> 00:04:19,589
vi ville sige var x er lig 44.

92
00:04:19,589 --> 00:04:22,780
Så Var er sortering af vores måde
for at indføre en variabel.

93
00:04:22,780 --> 00:04:26,850
Det er måske lidt mere intuitiv
end blot dollartegn variabel.

94
00:04:26,850 --> 00:04:29,080
>> Igen, da der ikke er nogen
datatyper, kunne vi gøre det

95
00:04:29,080 --> 00:04:34,490
med enhver datatype, strygere,
alt andet ville alle være var.

96
00:04:34,490 --> 00:04:37,260
Betingede, alle vores
gamle venner fra C og PHP

97
00:04:37,260 --> 00:04:41,640
er stadig tilgængelige, så vi har, hvis
ellers hvis, ellers, switch og spørgsmål

98
00:04:41,640 --> 00:04:42,240
mark colon.

99
00:04:42,240 --> 00:04:45,890
Switch resterende så fleksibel som det
var i PHP, men alle disse du er

100
00:04:45,890 --> 00:04:46,930
bekendt med nu.

101
00:04:46,930 --> 00:04:49,900
Og tilsvarende med loops er
de gamle favoritter i mens,

102
00:04:49,900 --> 00:04:52,700
gøre, mens og til stadig til rådighed for os.

103
00:04:52,700 --> 00:04:55,880
Så allerede ved vi en masse af det
grundlæggende JavaScript slags fundamentale

104
00:04:55,880 --> 00:05:01,800
lige ved at have ganske lidt
viden nu omkring C og PHP.

105
00:05:01,800 --> 00:05:03,670
>> Hvad med funktioner i JavaScript?

106
00:05:03,670 --> 00:05:08,199
Nå, svarende til PHP hver funktion er
indføres med funktionen nøgleordet.

107
00:05:08,199 --> 00:05:10,740
Du siger funktion, og så skal du
begynde at definere din funktion.

108
00:05:10,740 --> 00:05:12,531
Hvad er en lidt anderledes
om JavaScript,

109
00:05:12,531 --> 00:05:15,700
er dog evnen til at have
hvad der kaldes en anonym funktion.

110
00:05:15,700 --> 00:05:18,880
Så du kan definere funktioner
der ikke har et navn.

111
00:05:18,880 --> 00:05:21,222
Det er noget, vi
virkelig ikke har set før.

112
00:05:21,222 --> 00:05:23,430
Vi vil virkelig bruge konceptet
af en anonym funktion

113
00:05:23,430 --> 00:05:27,880
lidt senere i denne
video, fordi det vil

114
00:05:27,880 --> 00:05:31,530
gøre lidt mere mening i kontekst
når vi ser det i en bestemt situation

115
00:05:31,530 --> 00:05:33,120
at jeg har lavet her.

116
00:05:33,120 --> 00:05:35,710
Men lad os bare tage et kig
på, hvad en simpel JavaScript

117
00:05:35,710 --> 00:05:37,850
Funktionen kan se ud.

118
00:05:37,850 --> 00:05:40,610
>> Så jeg har gået videre og
åbnet min CS50 IDE

119
00:05:40,610 --> 00:05:43,690
og jeg har allerede kørt Apache
at begynde min server kører.

120
00:05:43,690 --> 00:05:46,800
Og jeg har denne fil
åbne kaldt home.html.

121
00:05:46,800 --> 00:05:48,330
Og jeg vil zoome ind på en lille smule her.

122
00:05:48,330 --> 00:05:52,090
Og dybest set, kan du se
Home.html er bare en masse knapper.

123
00:05:52,090 --> 00:05:55,291
Og jeg hævder i toppen her
at dette er JavaScript afsnittet

124
00:05:55,291 --> 00:05:55,790
materialer.

125
00:05:55,790 --> 00:05:59,490
Så der er en masse knapper her,
men hvad gør disse knapper rent faktisk gør?

126
00:05:59,490 --> 00:06:03,662
>> Nå, vil vi hovedet over til min IED,
og jeg har home.html åbne her.

127
00:06:03,662 --> 00:06:05,620
I begyndelsen,
her er hvor jeg forbinder

128
00:06:05,620 --> 00:06:07,500
i alle mine JavaScript kildefiler.

129
00:06:07,500 --> 00:06:08,000
Højre?

130
00:06:08,000 --> 00:06:12,440
Så jeg har anonymous.js, clock.js,
Jeg bruger attributten kilde

131
00:06:12,440 --> 00:06:14,440
af script-tag til at linke i filen.

132
00:06:14,440 --> 00:06:18,660
Så jeg har ikke skrevet nogen
JavaScript direkte ind i denne fil,

133
00:06:18,660 --> 00:06:21,790
men jeg har trukket i alle
JavaScript Jeg har skrevet hver for sig.

134
00:06:21,790 --> 00:06:24,540
Og hvis vi rulle ned her, dette
bør alle se noget bekendt

135
00:06:24,540 --> 00:06:27,090
med en lille smule af nye syntaks.

136
00:06:27,090 --> 00:06:32,655
Vi har her header tag for
funktioner og derefter en knap.

137
00:06:32,655 --> 00:06:35,530
Jeg har et input, der er en type knap,
og tilsyneladende når jeg klikker på det,

138
00:06:35,530 --> 00:06:38,130
Jeg har tænkt mig at ringe til nogle
fungere alarm dato.

139
00:06:38,130 --> 00:06:41,792
Og det er, hvordan vi kan slags blande
en lille smule af JavaScript og html.

140
00:06:41,792 --> 00:06:44,500
De rent faktisk spiller temmelig pænt
sammen og så tilsyneladende når

141
00:06:44,500 --> 00:06:48,730
Jeg klikker på denne knap, jeg har tænkt mig
at kalde en funktion alarm dato.

142
00:06:48,730 --> 00:06:53,660
Og på samme måde har jeg definerede adfærd
for alle de andre knapper,

143
00:06:53,660 --> 00:06:56,440
er på denne home.html side,
som vi vil holde tilbage

144
00:06:56,440 --> 00:06:59,172
til i løbet af denne video.

145
00:06:59,172 --> 00:07:00,880
Men lad os gå tilbage op
her og tage et kig

146
00:07:00,880 --> 00:07:03,850
ved clock.js, som er
JavaScript-fil, som jeg

147
00:07:03,850 --> 00:07:07,370
skrev der har denne første funktion
vi kommer til at tage et kig på.

148
00:07:07,370 --> 00:07:11,630
Som du kan se, jeg begynder min JavaScript
fungere med søgeordet-funktion,

149
00:07:11,630 --> 00:07:14,560
og jeg har givet denne en
navn, kaldes det alarm dato.

150
00:07:14,560 --> 00:07:18,710
Inde i der, jeg tilsyneladende skabe en
ny lokal variabel kaldet aktuelle dato.

151
00:07:18,710 --> 00:07:21,500
Og jeg har tænkt mig at tildele
lige til en ny dato.

152
00:07:21,500 --> 00:07:24,430
Og vi kunne komme ind i en masse
detaljer om, hvad en date er,

153
00:07:24,430 --> 00:07:27,060
og virkelig JavaScript er så
stort, at vi ikke kan muligvis

154
00:07:27,060 --> 00:07:28,330
dække alt i én video.

155
00:07:28,330 --> 00:07:32,220
Men er det tilstrækkeligt at sige, vil dette
at vende tilbage til mig et dataelement, der

156
00:07:32,220 --> 00:07:35,470
indkapsler den aktuelle dato og tid.

157
00:07:35,470 --> 00:07:39,100
Jeg opbevare det i en variabel, at jeg er
tilsyneladende vil advare aktuelle dato.

158
00:07:39,100 --> 00:07:41,300
>> Nå, hvad betyder alarm
aktuelle dato ud?

159
00:07:41,300 --> 00:07:46,460
Lad os tage et kig på selve filen
bakke ovre i browservinduet.

160
00:07:46,460 --> 00:07:49,551
Så igen, det er den knap, som jeg
har bundet til denne angivne funktion.

161
00:07:49,551 --> 00:07:51,800
Og jeg klikker på det der, og
se, hvad det gjorde, det advaret.

162
00:07:51,800 --> 00:07:56,140
Det dukkede op denne slags boks fortæller
mig, at det aktuelle klokkeslæt er, tilsyneladende

163
00:07:56,140 --> 00:07:59,370
det er november 4 ved
10:43:43 i morgen.

164
00:07:59,370 --> 00:08:02,345
Og hvis jeg klikker på det igen, nu
det er et par sekunder senere, ikke?

165
00:08:02,345 --> 00:08:03,720
Så det er alt denne funktion gør.

166
00:08:03,720 --> 00:08:07,670
Når jeg klikker på denne knap, det
popper op en advarsel besked til mig.

167
00:08:07,670 --> 00:08:13,806

168
00:08:13,806 --> 00:08:15,690
Så der er virkelig ikke
for meget at funktioner

169
00:08:15,690 --> 00:08:19,110
der er forskellig fra PHP,
bare en lille smule af nye syntaks

170
00:08:19,110 --> 00:08:22,500
der kommer med at arbejde med JavaScript.

171
00:08:22,500 --> 00:08:24,650
>> Arrays i JavaScript er
temmelig ligetil.

172
00:08:24,650 --> 00:08:27,200
At erklære et array, du bruger
De kantede parenteser syntaks

173
00:08:27,200 --> 00:08:30,090
at vi er bekendt med fra PHP.

174
00:08:30,090 --> 00:08:33,432
Og ligner PHP, vi
også kan blande datatyper.

175
00:08:33,432 --> 00:08:35,140
Så dette array, både
af disse arrays ville

176
00:08:35,140 --> 00:08:36,960
være helt legitimt JavaScript.

177
00:08:36,960 --> 00:08:42,500
En, der er alle heltal, og en,
er blandet op forskellige datatyper.

178
00:08:42,500 --> 00:08:45,020
>> Hvad er noget helt andet
i JavaScript, selv?

179
00:08:45,020 --> 00:08:47,020
Det er forestillingen om et objekt.

180
00:08:47,020 --> 00:08:50,240
Så måske du har hørt om
objektorienteret programmering.

181
00:08:50,240 --> 00:08:53,370
Vi gør ikke en masse af det i CS50,
men vi vil gøre en lille smule af det

182
00:08:53,370 --> 00:08:55,670
her i forbindelse med JavaScript.

183
00:08:55,670 --> 00:08:59,100
Nu JavaScript har evnen til at
opføre sig som et objektorienteret programmeringssprog

184
00:08:59,100 --> 00:09:02,615
sprog, men det er ikke i sig selv
udelukkende en objektorienteret

185
00:09:02,615 --> 00:09:03,490
programmeringssprog.

186
00:09:03,490 --> 00:09:05,281
Og dette igen kommer
tilbage til, hvorfor jeg sagde, det

187
00:09:05,281 --> 00:09:10,610
kan være meget udfordrende at lære
JavaScript som din første programmering

188
00:09:10,610 --> 00:09:13,890
sprog, fordi den ikke
virkelig passe en bestemt paradigme.

189
00:09:13,890 --> 00:09:16,430
>> C på den anden side er en
funktionelt programmeringssprog.

190
00:09:16,430 --> 00:09:22,270
Hvis vi vil, funktioner
slags den store boss mand, ikke?

191
00:09:22,270 --> 00:09:24,410
De diktere, hvad
sker alt andet.

192
00:09:24,410 --> 00:09:26,600
Vi ønsker at ændre variabler,
vi kalder funktioner.

193
00:09:26,600 --> 00:09:28,220
Vi gør tingene til funktioner.

194
00:09:28,220 --> 00:09:31,250
Objekter stedet, i en
objektorienteret sprog,

195
00:09:31,250 --> 00:09:35,937
objekter slags blive stjerne og
funktioner bliver slags sekundært.

196
00:09:35,937 --> 00:09:38,270
Men hvad er et objekt, hvad
er denne forestilling om et objekt?

197
00:09:38,270 --> 00:09:40,880
Tja, hvis det hjælper, tror
om det på først Sorter

198
00:09:40,880 --> 00:09:44,540
ligesom en C struktur eller en struct
at vi har lært om før.

199
00:09:44,540 --> 00:09:47,430
I C, en struktur indeholder
en række områder,

200
00:09:47,430 --> 00:09:51,174
og måske vi nu kan begynde at
kalder disse felter egenskaber.

201
00:09:51,174 --> 00:09:53,590
Men de egenskaber, aldrig rigtig
stå på egne, ikke?

202
00:09:53,590 --> 00:09:56,410
Hvis jeg definerer en struktur for en bil
som dette med følgende to

203
00:09:56,410 --> 00:10:00,750
marker eller egenskaber, en an
heltal for året af bilen

204
00:10:00,750 --> 00:10:04,290
og en anden en 10 karakter
streng for den model af bilen,

205
00:10:04,290 --> 00:10:07,150
Jeg kan sige noget som dette,
Jeg kan erklære en ny variabel

206
00:10:07,150 --> 00:10:10,080
af typen struct bil herbie.

207
00:10:10,080 --> 00:10:13,730
Og så kan jeg sige noget
ligesom herbie.year lig 1963,

208
00:10:13,730 --> 00:10:15,850
og herbie.model lig Beetle.

209
00:10:15,850 --> 00:10:17,000
Det er ok.

210
00:10:17,000 --> 00:10:19,680
Jeg bruger felterne i
forbindelse af strukturen,

211
00:10:19,680 --> 00:10:22,290
men jeg kunne aldrig bare
sige noget som dette.

212
00:10:22,290 --> 00:10:22,790
Højre?

213
00:10:22,790 --> 00:10:26,836
Jeg kan ikke bruge navnet feltet
uafhængig af strukturen.

214
00:10:26,836 --> 00:10:28,210
Det er sortering af en grundlæggende ting.

215
00:10:28,210 --> 00:10:32,990
>> Så felter er
grundlæggende for C strukturer

216
00:10:32,990 --> 00:10:39,050
er meget lig egenskaber bliver
grundlæggende for JavaScript objekter.

217
00:10:39,050 --> 00:10:42,080
Men hvad der gør dem
særligt interessant

218
00:10:42,080 --> 00:10:46,230
er, at objekter også kan have hvad
kaldes metoder, som er virkelig

219
00:10:46,230 --> 00:10:50,730
bare en fancy ord for funktioner,
er forbundet til objektet samt.

220
00:10:50,730 --> 00:10:55,340
Så det er en funktion, der kun kan
kaldes i forbindelse med et objekt.

221
00:10:55,340 --> 00:10:59,200
Kun et objekt, der har defineret
denne funktion inde i sin,

222
00:10:59,200 --> 00:11:02,020
hvis du tænker over en
struct, funktionen

223
00:11:02,020 --> 00:11:05,720
defineres inden de definerer
krøllede parenteser af strukturen.

224
00:11:05,720 --> 00:11:07,980
Så det kun betyder noget
til strukturen.

225
00:11:07,980 --> 00:11:10,960
Og det er slags, hvad vi laver
her med genstande og metoder.

226
00:11:10,960 --> 00:11:13,580
Det er dybest set ligesom vi er
definerer en funktion,

227
00:11:13,580 --> 00:11:16,670
kun mening på en
særligt formål, og så vi

228
00:11:16,670 --> 00:11:19,440
ringe, at en fremgangsmåde af objektet.

229
00:11:19,440 --> 00:11:23,180
Og vi kan aldrig kalde det
fungerer uafhængigt af objektet,

230
00:11:23,180 --> 00:11:29,260
ligesom vi ikke kan sige år eller model
uafhængig af struct i C.

231
00:11:29,260 --> 00:11:32,300
>> Så funktionel programmering
paradigmer ser noget som dette.

232
00:11:32,300 --> 00:11:35,450
Funktion og derefter, når du passerer
i objektet som en parameter.

233
00:11:35,450 --> 00:11:38,650
I et objektorienteret programmering
sprog, denne slags får

234
00:11:38,650 --> 00:11:43,464
vendt, og vi ville tænke over
det sådan, object.function.

235
00:11:43,464 --> 00:11:45,380
Så det slags, at dot
operatør igen indebærer

236
00:11:45,380 --> 00:11:49,540
at det er en slags ejendom
eller attribut af objektet selv.

237
00:11:49,540 --> 00:11:53,240
Men dette er hvad et objekt
orienterede programmeringssprog

238
00:11:53,240 --> 00:11:57,150
kunne gøre for at gøre en funktion
kalder på en metode, igen, som

239
00:11:57,150 --> 00:12:00,260
er blot en særligt ord for en funktion
der er uløseligt forbundet med et objekt.

240
00:12:00,260 --> 00:12:03,440
Dette er, hvad der
syntaks kunne se ud.

241
00:12:03,440 --> 00:12:09,360
Og så vi vil begynde at se nogle af
dette i forbindelse med JavaScript.

242
00:12:09,360 --> 00:12:12,470
>> Du kan også tænke på et objekt
lidt ligesom et associativt array,

243
00:12:12,470 --> 00:12:14,160
som vi er bekendt med fra PHP.

244
00:12:14,160 --> 00:12:17,720
Husk en associativt array tillader
os at have vigtige værdipar, i stedet

245
00:12:17,720 --> 00:12:23,040
for at have indekser 0, en, to, tre,
og så videre, som vi er vant til fra C

246
00:12:23,040 --> 00:12:23,940
arrays.

247
00:12:23,940 --> 00:12:27,472
Associative arrays kan kortlægge
ord, såsom i PHP video,

248
00:12:27,472 --> 00:12:29,180
vi talte om
toppings af pizzaer.

249
00:12:29,180 --> 00:12:31,180
Og så havde vi en matrix
kaldet pizzaer, og vi

250
00:12:31,180 --> 00:12:36,670
havde ost var en nøgle og $ 8,99 var den
værdi, og derefter pepperoni var en nøgle,

251
00:12:36,670 --> 00:12:39,190
$ 9.99 var en værdi, og så videre.

252
00:12:39,190 --> 00:12:43,300
Og så kan vi også tænke på en
objekt slags svarer til en associativ

253
00:12:43,300 --> 00:12:43,840
array.

254
00:12:43,840 --> 00:12:47,020
Og så denne syntaks her
ville skabe et nyt objekt

255
00:12:47,020 --> 00:12:50,950
kaldte herbie med to
egenskaber inde i den.

256
00:12:50,950 --> 00:12:57,310
År, hvilket er tildelt værdien 1963
og model, som er forsynet med strengen

257
00:12:57,310 --> 00:12:58,140
Bille.

258
00:12:58,140 --> 00:13:01,770
>> Og bemærke her, at jeg bruger
enkelte anførselstegn i JavaScript.

259
00:13:01,770 --> 00:13:05,570
Du kan bruge enkelt eller dobbelt citationstegn
når du taler om strenge.

260
00:13:05,570 --> 00:13:07,772
Det er bare konventionelt
sådan, at de fleste gange

261
00:13:07,772 --> 00:13:10,230
når du skriver JavaScript,
du bare bruge enkelte anførselstegn.

262
00:13:10,230 --> 00:13:15,050
Men jeg kunne bruge dobbelte anførselstegn her, og
det ville være helt fint så godt.

263
00:13:15,050 --> 00:13:17,470
>> Så huske, hvordan i
PHP havde vi dette begreb

264
00:13:17,470 --> 00:13:22,730
en for hver løkke, der ville tillade os
at gentage over alle de nøgleværdi

265
00:13:22,730 --> 00:13:25,270
par af en associativ
array, fordi vi

266
00:13:25,270 --> 00:13:29,050
havde ikke denne mulighed for at gentage
gennem 0, en, to, tre, fire,

267
00:13:29,050 --> 00:13:30,710
og så videre?

268
00:13:30,710 --> 00:13:35,010
JavaScript har noget meget lignende,
men det er ikke kaldes en for hver sløjfe,

269
00:13:35,010 --> 00:13:38,960
det hedder et i sløjfer.

270
00:13:38,960 --> 00:13:42,890
Så hvis jeg sagde til mig som
dette, for var nøglen i objektet,

271
00:13:42,890 --> 00:13:48,670
det er slags ligner sige
for hver noget som noget.

272
00:13:48,670 --> 00:13:53,850
Men alt jeg gør her er iteration
gennem alle nøglerne til mit formål.

273
00:13:53,850 --> 00:13:56,070
Og inde i de krøllede
seler der, jeg ville

274
00:13:56,070 --> 00:14:03,410
bruge objekt skarpe parenteser nøglen til at henvise
til værdien ved, at centrale beliggenhed.

275
00:14:03,410 --> 00:14:05,400
>> Alternativt er der
endda en anden tilgang.

276
00:14:05,400 --> 00:14:10,880
Hvis jeg bare kun bekymrer sig om
værdier, kan jeg sige for centrale objekt,

277
00:14:10,880 --> 00:14:12,360
og bare bruge nøglen inde.

278
00:14:12,360 --> 00:14:17,240
Så for var nøglen i objekt, jeg har
at bruge objekt kantede parenteser

279
00:14:17,240 --> 00:14:19,340
nøglen i sløjfen.

280
00:14:19,340 --> 00:14:24,580
Til Var nøgle objekt, kan jeg
bare bruge nøglen inde i løkken,

281
00:14:24,580 --> 00:14:29,040
fordi jeg er bare specifikt
taler om de værdier der.

282
00:14:29,040 --> 00:14:32,630
>> Så lad os måske tage et
se på forskellen

283
00:14:32,630 --> 00:14:35,670
lige hurtigt vise dig
forskellen mellem fire

284
00:14:35,670 --> 00:14:40,730
i og for af med en meget specifik
array, som vi har her, uge ​​array.

285
00:14:40,730 --> 00:14:43,616
Så jeg er nødt til at finde et nyt array
at jeg er fyldt med syv strygere,

286
00:14:43,616 --> 00:14:46,240
Mandag, tirsdag, onsdag,
Torsdag, fredag, lørdag, søndag.

287
00:14:46,240 --> 00:14:50,530
Og jeg vil gerne nu gentage
gennem denne matrix,

288
00:14:50,530 --> 00:14:53,090
udskrivning ud visse oplysninger.

289
00:14:53,090 --> 00:14:58,780
Hvis jeg bruger en i løkke
at udskrive oplysninger,

290
00:14:58,780 --> 00:15:00,710
hvad tror du, jeg har tænkt mig at få?

291
00:15:00,710 --> 00:15:01,710
Nå, lad os tage et kig.

292
00:15:01,710 --> 00:15:05,300
Og før vi springe over
til mit browservindue,

293
00:15:05,300 --> 00:15:08,090
bare vide, at
console.log er sortering af en

294
00:15:08,090 --> 00:15:10,630
måde at gøre et print F i JavaScript.

295
00:15:10,630 --> 00:15:12,040
Men hvad er den konsol?

296
00:15:12,040 --> 00:15:14,940
Tja, det er, hvad vi vil
at gå tage et kig på lige nu.

297
00:15:14,940 --> 00:15:16,850
>> OK, så er vi tilbage her
i mit browservindue,

298
00:15:16,850 --> 00:15:19,410
og jeg har tænkt mig at åbne
mine udviklingsværktøjer.

299
00:15:19,410 --> 00:15:22,290
Igen, jeg bare trykke F12
at åbne op for udviklingsværktøjer.

300
00:15:22,290 --> 00:15:25,670
Og bemærk, at her på
top Jeg har valgt konsol.

301
00:15:25,670 --> 00:15:28,480
Så dette er forestillingen
af en udvikler konsol,

302
00:15:28,480 --> 00:15:30,500
og det vil give os mulighed for at
udskrive oplysninger ud,

303
00:15:30,500 --> 00:15:33,000
slags ligesom terminalen, men
som du kan se lidt senere,

304
00:15:33,000 --> 00:15:37,720
Vi kan også skrive oplysninger i
at interagere med vores hjemmeside.

305
00:15:37,720 --> 00:15:42,320
Jeg har tænkt mig at zoome ind en lille smule her,
og jeg vil nu klikke på i test.

306
00:15:42,320 --> 00:15:45,230
Og fire i test-- jeg ikke gonna
vise dig koden for det lige nu,

307
00:15:45,230 --> 00:15:47,479
men du får det, hvis du
downloade kildekode,

308
00:15:47,479 --> 00:15:50,380
er tilknyttet denne video--
er bare, at i loop

309
00:15:50,380 --> 00:15:52,610
at vi så bare en
sekund siden på diaset.

310
00:15:52,610 --> 00:15:54,810
>> Så jeg vil klik,
knappen, og herovre,

311
00:15:54,810 --> 00:15:58,440
her er hvad der er udskrevet i
konsol, 0, en, to, tre, fire, fem,

312
00:15:58,440 --> 00:15:58,940
seks.

313
00:15:58,940 --> 00:16:02,490
Jeg havde ikke udskrive oplysningerne
inden for disse Array steder,

314
00:16:02,490 --> 00:16:05,180
fordi jeg brugte en i løkke.

315
00:16:05,180 --> 00:16:10,670
Og inde i kroppen af ​​løkken, jeg
bare udskrives tast ikke modsætte tasten.

316
00:16:10,670 --> 00:16:18,600
Men hvis jeg nu klart min konsol, og jeg
skifte til for test, og fire af test

317
00:16:18,600 --> 00:16:22,500
Jeg siger jeg bruge til loop
i stedet og udskrive nøgle,

318
00:16:22,500 --> 00:16:28,079
hvis jeg klikker der, nu er jeg får den
konkrete elementer inde i mit objekt

319
00:16:28,079 --> 00:16:29,120
eller min array i dette tilfælde.

320
00:16:29,120 --> 00:16:31,760
Min vifte af ugedage.

321
00:16:31,760 --> 00:16:33,480
Jeg udskrives mandag
Tirsdag, onsdag.

322
00:16:33,480 --> 00:16:36,930
Så det er forskellen mellem
a i loop, der udskriver

323
00:16:36,930 --> 00:16:43,410
bare tasterne, hvis du bare bruger nøgle
indersiden af ​​kroppen af ​​løkken,

324
00:16:43,410 --> 00:16:46,850
og et for loop, som udskriver
de værdier, hvis du bruger bare

325
00:16:46,850 --> 00:16:48,870
tasten inde i kroppen af ​​løkken.

326
00:16:48,870 --> 00:16:52,380
>> Okay, hvordan kan vi nu begynde at
sammenkæde strenge og måske blande

327
00:16:52,380 --> 00:16:57,220
nogle variable med interpolation
ligesom vi var i stand til at gøre i PHP?

328
00:16:57,220 --> 00:16:59,410
Nå, vi er temmelig bekendt
med dette fra PHP.

329
00:16:59,410 --> 00:17:04,109
Dette er, hvordan vi ville gøre det ved hjælp af
dot operatør at sammenkæde strenge.

330
00:17:04,109 --> 00:17:06,260
I JavaScript, selv om,
vi faktisk bruge noget

331
00:17:06,260 --> 00:17:09,290
kaldet plus operatør, som
er måske endda en lille smule mere

332
00:17:09,290 --> 00:17:10,470
intuitiv, ikke?

333
00:17:10,470 --> 00:17:12,609
Vi tilføjer en flok
af strenge sammen.

334
00:17:12,609 --> 00:17:14,520
Så lad os hovedet tilbage
igen og se, hvad det

335
00:17:14,520 --> 00:17:18,693
vil udskrive, hvis vi forsøger at udskrive
alle oplysningerne i uge array.

336
00:17:18,693 --> 00:17:20,859
Okay, så under her
under streng sammenkædning,

337
00:17:20,859 --> 00:17:24,822
Jeg har to muligheder, snor bygning
V1 og derefter string bygning V2.

338
00:17:24,822 --> 00:17:26,530
Og vi vil se, hvorfor vi
brug V2 i en anden.

339
00:17:26,530 --> 00:17:28,610
Men jeg skal du klikke på
string bygning V1, som

340
00:17:28,610 --> 00:17:30,360
er koden var vi
bare tage et kig på,

341
00:17:30,360 --> 00:17:32,980
den console.log med alle de plusser.

342
00:17:32,980 --> 00:17:35,910
Lad os se, om denne udskrifter
ud af, hvad vi forventer.

343
00:17:35,910 --> 00:17:39,939
>> Mandag er dag nummer 01 i ugen,
Tirsdag er dag nummer 11 i ugen.

344
00:17:39,939 --> 00:17:41,730
Nå, hvad jeg prøvede
at gøre der var få

345
00:17:41,730 --> 00:17:46,280
det at udskrive mandag er dag nummer
én, tirsdag er dag nummer to.

346
00:17:46,280 --> 00:17:50,140
Men det ser ud som jeg er
altid udskrive en.

347
00:17:50,140 --> 00:17:51,260
Tja, hvorfor er det?

348
00:17:51,260 --> 00:17:55,600
Tja, det viser sig, tage endnu et kig
på denne lille stump kode her.

349
00:17:55,600 --> 00:18:00,160
Bemærk, at vi ved hjælp af plus
operatør i to forskellige sammenhænge.

350
00:18:00,160 --> 00:18:03,221
>> Og så her er, hvor måske ting
at vi har sådan sagt,

351
00:18:03,221 --> 00:18:03,970
Åh, det er så stor.

352
00:18:03,970 --> 00:18:05,910
Vi behandler ikke datatyper længere.

353
00:18:05,910 --> 00:18:08,220
Men her er, hvor det faktum
at vi mister datatyper

354
00:18:08,220 --> 00:18:10,960
kan faktisk være en smule
af et problem for os.

355
00:18:10,960 --> 00:18:16,260
Nu, plus operatøren anvendes til at
sammenkæde strenge og tilføje numre

356
00:18:16,260 --> 00:18:19,550
sammen, JavaScript har
at gøre sit bedste gæt

357
00:18:19,550 --> 00:18:22,030
om, hvad jeg vil have det til at gøre for mig.

358
00:18:22,030 --> 00:18:23,900
Og i dette tilfælde, det gættede forkert.

359
00:18:23,900 --> 00:18:29,340
Det bare sammenkædet dag, hvilket ville være
0, en, to, tre, fire, fem eller seks,

360
00:18:29,340 --> 00:18:32,060
og så er det bare sammenkædet
det, og derefter sammenkædet én.

361
00:18:32,060 --> 00:18:35,020
Det gjorde faktisk ikke tilføje dem sammen.

362
00:18:35,020 --> 00:18:37,320
Og så disse sprog,
PHP og JavaScript,

363
00:18:37,320 --> 00:18:39,196
der abstracts væk
dette begreb typer,

364
00:18:39,196 --> 00:18:40,820
du behøver ikke at beskæftige sig med det længere.

365
00:18:40,820 --> 00:18:43,600
De har stadig typer under kølerhjelmen.

366
00:18:43,600 --> 00:18:46,780
Og vi kan, i situationer
som dette, udnytte denne omstændighed

367
00:18:46,780 --> 00:18:49,240
ved at sige noget
Ligesom måske dette, der

368
00:18:49,240 --> 00:18:53,210
fortæller JavaScript, ved
måde, behandle dette som et heltal,

369
00:18:53,210 --> 00:18:57,100
ikke behandle det som en streng, selv
selvom vi blande strygere

370
00:18:57,100 --> 00:18:58,940
og heltal her.

371
00:18:58,940 --> 00:19:02,204
>> Det er bare en af ​​disse ting
at det forekommer så stor i forbindelse

372
00:19:02,204 --> 00:19:04,120
at vi ikke behøver at
behandle typer længere,

373
00:19:04,120 --> 00:19:05,828
men nogle gange vil du
ende i en situation

374
00:19:05,828 --> 00:19:09,110
præcis som dette, hvor den omstændighed, at
du ikke har kontrol over typer

375
00:19:09,110 --> 00:19:11,220
kan give bagslag på dig
hvis du ikke er forsigtig.

376
00:19:11,220 --> 00:19:18,285
Og så hvis vi pop tilbage over til IDE, jeg er
kommer til at rydde min konsol igen,

377
00:19:18,285 --> 00:19:20,660
og jeg har tænkt mig at klikke på strengen
bygning udgave to, som

378
00:19:20,660 --> 00:19:23,052
er, hvor jeg bruger, at parse int funktion.

379
00:19:23,052 --> 00:19:25,260
Nu er det at udskrive
oplysninger, som jeg forventer.

380
00:19:25,260 --> 00:19:29,330
Mandagens dag nummer et, tirsdag
er dag nummer to, og så videre.

381
00:19:29,330 --> 00:19:31,170
>> Så lad os tale om funktioner igen.

382
00:19:31,170 --> 00:19:34,790
Jeg lovede, vi ville tale om anonym
funktioner og nu forbindelse til det

383
00:19:34,790 --> 00:19:36,360
er endelig ankommet.

384
00:19:36,360 --> 00:19:39,980
Så før vi gør det, lad os tale igen
om arrays for kun et sekund.

385
00:19:39,980 --> 00:19:42,120
Så arrays er en speciel
tilfælde af et objekt.

386
00:19:42,120 --> 00:19:45,180
Faktisk alt i
JavaScript er faktisk et objekt.

387
00:19:45,180 --> 00:19:47,190
Så funktioner er en
særligt tilfælde af et objekt,

388
00:19:47,190 --> 00:19:49,770
heltal er en speciel
tilfælde af en genstand,

389
00:19:49,770 --> 00:19:52,152
men arrays specifikt
har en række metoder.

390
00:19:52,152 --> 00:19:55,110
Husk fordi de er objekter,
de kan have egenskaber og metoder.

391
00:19:55,110 --> 00:19:58,600
De har en række metoder, der
kan anvendes til disse objekter.

392
00:19:58,600 --> 00:20:01,197
Der er en metode, der kaldes
størrelse, array.size,

393
00:20:01,197 --> 00:20:03,030
som vil vende tilbage til
dig, som man kunne forvente

394
00:20:03,030 --> 00:20:05,120
antallet af elementer i din array.

395
00:20:05,120 --> 00:20:08,480
array.pop, lidt ligesom
vores opfattelse af popping off

396
00:20:08,480 --> 00:20:11,110
af en stak, hvis du husker
fra vores stakke video,

397
00:20:11,110 --> 00:20:13,810
fjerner det sidste element fra arrayet.

398
00:20:13,810 --> 00:20:17,110
array.push tilføjer et nyt element
til slutningen af ​​et array.

399
00:20:17,110 --> 00:20:20,910
array.shift er sortering af
Ligesom DQ, det splejsninger ud

400
00:20:20,910 --> 00:20:23,610
den allerførste element i et array.

401
00:20:23,610 --> 00:20:27,549
>> Men der er også en anden særlig
Fremgangsmåde ifølge et array kaldet kort.

402
00:20:27,549 --> 00:20:29,340
Og det er sortering af en
interessant koncept.

403
00:20:29,340 --> 00:20:30,930
Så hvad er ideen om et kort?

404
00:20:30,930 --> 00:20:33,880
Du vil faktisk se denne
på flere andre sprog,

405
00:20:33,880 --> 00:20:38,550
og vi taler ikke om en
slags kartografer kort her,

406
00:20:38,550 --> 00:20:41,480
vi taler om en kortlægning funktion.

407
00:20:41,480 --> 00:20:44,110
I forbindelse er vi
taler om her, et kort

408
00:20:44,110 --> 00:20:47,950
er en særlig operation, vi
kan udføre på en række

409
00:20:47,950 --> 00:20:51,630
at anvende en bestemt funktion
til hvert element af denne matrix.

410
00:20:51,630 --> 00:20:55,190
og så ville vi sige i
dette tilfælde måske array.map,

411
00:20:55,190 --> 00:21:00,330
og inde i det, vi passerer
i kortet er en funktion, vi ønsker

412
00:21:00,330 --> 00:21:02,430
der skal anvendes på hver enkelt element.

413
00:21:02,430 --> 00:21:07,299
Så det er lidt analogt med at bruge
en løkke til at gentage over hvert element

414
00:21:07,299 --> 00:21:09,340
og anvende en særlig
fungere til hvert element,

415
00:21:09,340 --> 00:21:14,830
netop JavaScript har denne indbygget
begrebet kortlægning, der kan anvendes.

416
00:21:14,830 --> 00:21:19,700
Og det er en stor sammenhæng
tale om en anonym funktion.

417
00:21:19,700 --> 00:21:22,370
>> Så lad os sige, vi har
dette array af heltal.

418
00:21:22,370 --> 00:21:25,370
Det hedder nums, og det har fået fem
ting i den, en, to, tre, fire,

419
00:21:25,370 --> 00:21:26,410
fem.

420
00:21:26,410 --> 00:21:30,620
Nu vil jeg kortlægge nogle
funktion på dette array.

421
00:21:30,620 --> 00:21:34,337
Jeg vil gerne have en funktion, gælder
til hvert element i arrayet.

422
00:21:34,337 --> 00:21:37,420
Nå, lad os sige, at det, jeg vil
gøre er bare fordoble alle elementerne.

423
00:21:37,420 --> 00:21:42,520
Hvad jeg kunne gøre er bare at bruge en løkke
til Var I lig 0, jeg er mindre end

424
00:21:42,520 --> 00:21:47,390
eller lig med 4, jeg plus, plus, og
derefter fordoble hver enkelt nummer.

425
00:21:47,390 --> 00:21:49,580
Men jeg kan også gøre noget som dette.

426
00:21:49,580 --> 00:21:53,420
Jeg kan sige nums var tidligere
en to tre fire fem,

427
00:21:53,420 --> 00:21:58,310
nu, vil jeg dog gerne have dig til
anvende en mapning dette array

428
00:21:58,310 --> 00:22:00,400
hvor jeg vil gerne have dig
at fordoble hvert nummer.

429
00:22:00,400 --> 00:22:02,540
Og det er præcis
hvad der sker her.

430
00:22:02,540 --> 00:22:06,870
Men mærke til, hvad jeg passerer
i som argument til at kortlægge.

431
00:22:06,870 --> 00:22:09,080
Dette er en anonym funktion.

432
00:22:09,080 --> 00:22:11,140
Og bemærk jeg har ikke givet
denne funktion et navn,

433
00:22:11,140 --> 00:22:13,290
Jeg har kun givet det en parameter listen.

434
00:22:13,290 --> 00:22:16,370
Og så dette er et eksempel
af en anonym funktion.

435
00:22:16,370 --> 00:22:21,270
>> Vi generelt ville aldrig kalde dette
funktion uden for rammerne af kortet.

436
00:22:21,270 --> 00:22:24,110
Vi definerer det som en parameter
at kortlægge, og så vi ikke rigtig

437
00:22:24,110 --> 00:22:27,910
nødt til at have et navn for det, hvis det
eneste, der bekymrer sig om, er kortet

438
00:22:27,910 --> 00:22:30,339
og det er defineret rigtigt
der inde i kortet.

439
00:22:30,339 --> 00:22:31,880
Og så dette er en anonym funktion.

440
00:22:31,880 --> 00:22:34,680
Vi har ikke kunnet
at gøre dette tidligere.

441
00:22:34,680 --> 00:22:38,400
Marker en funktion, som
accepterer en parameter, num,

442
00:22:38,400 --> 00:22:41,890
og hvad denne funktion gør
er afkast num gange 2.

443
00:22:41,890 --> 00:22:45,330
Og så efter denne
kortlægning er blevet anvendt,

444
00:22:45,330 --> 00:22:50,090
dette er nu hvad nums udseende
lignende, to, fire, seks, otte, 10.

445
00:22:50,090 --> 00:22:52,090
Og vi vil pop over til min
vinduet og bare browser

446
00:22:52,090 --> 00:22:55,240
tage et kig på dette
virkelig hurtigt så godt.

447
00:22:55,240 --> 00:22:58,000
>> Så jeg har en anden knap her
i mit hjem side kaldet dobbelt.

448
00:22:58,000 --> 00:23:03,570
Og når jeg klikker dobbelt, og det fortæller
mig før det var en, to, tre, fire,

449
00:23:03,570 --> 00:23:07,250
fem efter to, fire, seks, otte, 10.

450
00:23:07,250 --> 00:23:11,930
Og hvis jeg gå tilbage og klik dobbelt
igen, to, fire, seks, otte, 10.

451
00:23:11,930 --> 00:23:17,400
Og så efter, fire,
otte, 12, 16, og derefter 20.

452
00:23:17,400 --> 00:23:20,440
Og hvad gør jeg i denne funktion?

453
00:23:20,440 --> 00:23:25,210
Tja, hvis vi bare pop over til IDE, og
Jeg trækker min anonyme funktion, her

454
00:23:25,210 --> 00:23:28,780
on line syv til 13, jeg er
laver lidt fancy arbejde her,

455
00:23:28,780 --> 00:23:32,240
men jeg er bare udskrive
hvad der i øjeblikket i array'et.

456
00:23:32,240 --> 00:23:36,580
Derefter på linje 16, 17,
og 18, der er mit kort.

457
00:23:36,580 --> 00:23:40,930
Det er her, jeg anvender denne fordobling
funktion til hver enkelt element.

458
00:23:40,930 --> 00:23:43,530
Og så lidt længere nede,
Jeg er bare gøre det samme

459
00:23:43,530 --> 00:23:46,640
Jeg gjorde før, bortset fra nu er jeg
udskrive indholdet af arrayet

460
00:23:46,640 --> 00:23:48,167
bagefter.

461
00:23:48,167 --> 00:23:50,500
Men alt jeg har gjort her er
bare bruge en anonym funktion

462
00:23:50,500 --> 00:23:53,640
til kort over en hel vifte.

463
00:23:53,640 --> 00:23:58,466
>> Så en mere stort emne at tale om i
JavaScript er forestillingen af ​​en begivenhed.

464
00:23:58,466 --> 00:24:01,590
En begivenhed er noget, der bare sker
når en bruger interagerer med din web

465
00:24:01,590 --> 00:24:04,715
side, så måske de klikker noget,
eller måske siden er loadet,

466
00:24:04,715 --> 00:24:07,200
eller måske de har flyttet
deres musen over noget,

467
00:24:07,200 --> 00:24:09,290
eller de har indtastet noget
i et input felt.

468
00:24:09,290 --> 00:24:14,260
Alle disse ting er begivenheder
der er indtruffet på vores hjemmeside.

469
00:24:14,260 --> 00:24:17,460
Og JavaScript har
evne til at understøtte noget

470
00:24:17,460 --> 00:24:21,760
kaldes en event handler, som
er en callback funktion,

471
00:24:21,760 --> 00:24:23,329
reagerer på en html begivenhed.

472
00:24:23,329 --> 00:24:24,620
Og hvad er en callback funktion?

473
00:24:24,620 --> 00:24:27,328
Tja, det er generelt bare en anden
navn til en anonym funktion.

474
00:24:27,328 --> 00:24:30,170
Det er en funktion, som
reagerer på en begivenhed.

475
00:24:30,170 --> 00:24:34,130
Og det er her vi kommer til
Ideen til at binde visse funktioner

476
00:24:34,130 --> 00:24:38,060
til en bestemt html attribut.

477
00:24:38,060 --> 00:24:41,420
De fleste HTML-elementer har
støtte til en attribut

478
00:24:41,420 --> 00:24:45,170
at vi ikke taler om i html
video til noget lignende på klik

479
00:24:45,170 --> 00:24:50,540
eller på hover eller belastning,
alle disse begivenheder

480
00:24:50,540 --> 00:24:53,120
som du derefter kan skrive funktioner
at beskæftige sig med disse begivenheder

481
00:24:53,120 --> 00:24:56,090
når disse begivenheder
forekommer på din webside.

482
00:24:56,090 --> 00:24:59,170
>> Og så måske din html
ser noget som dette.

483
00:24:59,170 --> 00:25:02,240
Og jeg har to knapper her,
one og knap to,

484
00:25:02,240 --> 00:25:04,620
og her har jeg i øjeblikket
defineret noget,

485
00:25:04,620 --> 00:25:11,170
men det er her attributten på
klik er tilsyneladende en del af min html-tag.

486
00:25:11,170 --> 00:25:15,220
Så tilsyneladende når jeg definerer, hvad der er
foregår inde i denne egenskab,

487
00:25:15,220 --> 00:25:18,590
det kommer til at være nogle javascript
funktion, der reagerer på begivenheden

488
00:25:18,590 --> 00:25:24,360
formentlig for at klikke på
knap en eller knap to.

489
00:25:24,360 --> 00:25:28,580
>> Hvad er slags cool om dette er vi
kan skrive en generisk event handler.

490
00:25:28,580 --> 00:25:32,370
Og denne begivenhed Handler vil
oprette en begivenhed objekt.

491
00:25:32,370 --> 00:25:37,000
Og begivenheden objektet vil fortælle os,
hvilken af ​​de to knapper blev klikket.

492
00:25:37,000 --> 00:25:38,064
Nu, hvordan hænger det sammen?

493
00:25:38,064 --> 00:25:39,730
Tja, det kan se sådan ud.

494
00:25:39,730 --> 00:25:44,860
Så vi vil først definere vores knapper
at have en reaktion på tilbagekald

495
00:25:44,860 --> 00:25:47,470
funktion, der vil blive kaldt
når der klikkes på knappen,

496
00:25:47,470 --> 00:25:49,520
vi vil kalde begivenhed alarm navn.

497
00:25:49,520 --> 00:25:53,320
Og meddelelse i begge tilfælde vi er
passerer i denne begivenhed parameter.

498
00:25:53,320 --> 00:25:55,460
Så vi kalder denne funktion
eller når denne funktion

499
00:25:55,460 --> 00:26:00,330
udløses af hændelse sker,
det kommer til at skabe denne begivenhed objekt

500
00:26:00,330 --> 00:26:03,300
og videregive det som en
parameter at advare navn.

501
00:26:03,300 --> 00:26:07,270
Og så fald formål er
kommer til at indeholde oplysninger

502
00:26:07,270 --> 00:26:09,800
om, hvilken knap blev klikket.

503
00:26:09,800 --> 00:26:11,580
Og hvordan gør den det?

504
00:26:11,580 --> 00:26:13,654
Tja, det kan se sådan ud.

505
00:26:13,654 --> 00:26:15,570
Så nu i min separat
JavaScript-fil, jeg kunne

506
00:26:15,570 --> 00:26:17,420
nødt til at finde denne
funktion alarm navn, som

507
00:26:17,420 --> 00:26:19,500
igen accepterer, at begivenheden parameter.

508
00:26:19,500 --> 00:26:24,640
Og så her er hvor jeg detektering
hvilken knap blev udløst,

509
00:26:24,640 --> 00:26:28,100
Var trigger lig begivenhed
dot kildeelementet.

510
00:26:28,100 --> 00:26:33,150
Hvad var kilden, der skabte
denne begivenhed objekt, der blev vedtaget i?

511
00:26:33,150 --> 00:26:36,390
Var det knap én eller var det knap to?

512
00:26:36,390 --> 00:26:40,710
>> Og så her hele jeg gør er
udskrivning ud trigger.innerhtml.

513
00:26:40,710 --> 00:26:43,860
Tja, i dette tilfælde, i dette
sammenhæng trigger.innerhtml

514
00:26:43,860 --> 00:26:45,940
er lige, hvad der er skrevet på knappen.

515
00:26:45,940 --> 00:26:48,830
Det bare så sker, hvis vi hopper
tilbage til en anden, der ville

516
00:26:48,830 --> 00:26:51,670
være, hvad der er i mellem disse knapper tags.

517
00:26:51,670 --> 00:26:54,150
Det vil være knap en eller knap to.

518
00:26:54,150 --> 00:26:57,320
Og lad os tage et kig på
hvordan dette event handler ville

519
00:26:57,320 --> 00:27:01,080
se ud, hvis vi havde det kører i praksis.

520
00:27:01,080 --> 00:27:03,850
>> Så først og fremmest, du har
åbnet events.js,

521
00:27:03,850 --> 00:27:06,517
som er JavaScript fil, hvor
Jeg har defineret denne funktion.

522
00:27:06,517 --> 00:27:08,558
Og som du kan se, er det
temmelig meget præcis, hvad

523
00:27:08,558 --> 00:27:10,230
vi lige har set på diaset et sekund siden.

524
00:27:10,230 --> 00:27:14,890
Og jeg vil gå over til
hjemmeside vi har brugt.

525
00:27:14,890 --> 00:27:17,660
Og jeg har her knap
en og knap to.

526
00:27:17,660 --> 00:27:19,820
Og jeg vil klikke på knappen én.

527
00:27:19,820 --> 00:27:23,930
Du har klikket på knappen én, hvis du
kan se lige her i indberetningen.

528
00:27:23,930 --> 00:27:25,810
OK.

529
00:27:25,810 --> 00:27:28,980
Klik på knappen to, du
klikket på en knap to.

530
00:27:28,980 --> 00:27:32,150
>> Så begge knapper har den
samme funktion opkald, ikke?

531
00:27:32,150 --> 00:27:35,840
De begge var alarm navn
begivenhed, men denne begivenhed objekt

532
00:27:35,840 --> 00:27:41,900
der bliver skabt, når vi klikker på
det fortæller os, hvilken knap blev klikket.

533
00:27:41,900 --> 00:27:44,650
Vi havde ikke til at skrive to separate
funktioner eller aftale med have

534
00:27:44,650 --> 00:27:46,470
at videregive yderligere oplysninger.

535
00:27:46,470 --> 00:27:48,220
Vi er bare stole på
hvad JavaScript vil

536
00:27:48,220 --> 00:27:53,772
gøre for os, som er at skabe den
slags begivenhed objekt på vores vegne.

537
00:27:53,772 --> 00:27:56,730
Der er meget mere at JavaScript end
hvad vi har dækket i denne video,

538
00:27:56,730 --> 00:27:58,521
men har disse
grundlæggende bør få dig

539
00:27:58,521 --> 00:28:00,690
ganske lang måder at
læring alt, hvad du

540
00:28:00,690 --> 00:28:04,030
brug for at vide om dette
interessant sprog.

541
00:28:04,030 --> 00:28:05,000
Jeg er Doug Lloyd.

542
00:28:05,000 --> 00:28:07,010
Det er CS50.

543
00:28:07,010 --> 00:28:09,181