1
00:00:00,000 --> 00:00:03,840
>> [MUSIK SPELA]

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

3
00:00:05,770 --> 00:00:08,690
>> DOUG LLOYD: Så nu vi är gamla
proffs på webbprogrammering, eller hur?

4
00:00:08,690 --> 00:00:12,140
Och vi har täckt flera
språk i enskilda videoklipp.

5
00:00:12,140 --> 00:00:14,690
Och nu ska vi göra en mer JavaScript.

6
00:00:14,690 --> 00:00:17,370
>> Första goda nyheter, JavaScript
är en modern programmering

7
00:00:17,370 --> 00:00:21,410
språk likt PHP vars
Syntaxen är härledd från C,

8
00:00:21,410 --> 00:00:22,830
så det är ett bra ställe att börja.

9
00:00:22,830 --> 00:00:25,880
Det är ungefär lika gammal som PHP, liksom,
har funnits cirka 20 år.

10
00:00:25,880 --> 00:00:28,600
Det uppfanns runt
Samtidigt som PHP.

11
00:00:28,600 --> 00:00:32,240
Och JavaScript är faktiskt ganska
grundläggande för användarupplevelsen

12
00:00:32,240 --> 00:00:32,740
av banan.

13
00:00:32,740 --> 00:00:34,448
I själva verket finns det
tre språk som jag

14
00:00:34,448 --> 00:00:38,480
skulle säga sorts göra upp
användarens upplevelse av att interagera

15
00:00:38,480 --> 00:00:42,650
med webbplatsen, html,
CSS och JavaScript.

16
00:00:42,650 --> 00:00:46,030
Och så nu ska vi prata
lite om JavaScript.

17
00:00:46,030 --> 00:00:50,301
>> De dåliga nyheterna är dock med JavaScript är
att det sätter en massa regler för sig själv,

18
00:00:50,301 --> 00:00:51,300
och sedan det bryter dem.

19
00:00:51,300 --> 00:00:54,010
Och JavaScript kan faktiskt vara
typ av en utmaning att lära sig,

20
00:00:54,010 --> 00:00:57,000
eftersom det är till skillnad från C och
PHP, vilket mycket är strukturerade

21
00:00:57,000 --> 00:01:00,270
och har mycket strikta regler
för hur saker och ting kan fungera.

22
00:01:00,270 --> 00:01:03,690
JavaScript har sortens
av blivit så flexibel

23
00:01:03,690 --> 00:01:06,650
det kanske det inte går att
fungerar som vi förväntar oss,

24
00:01:06,650 --> 00:01:09,830
och kanske vi verkligen kan inte lära
vår första programmeringsspråk

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

26
00:01:10,769 --> 00:01:12,810
Så kanske eftersom det inte
satt några regler,

27
00:01:12,810 --> 00:01:15,754
och det spelar egentligen ingen
driva goda kodning vanor.

28
00:01:15,754 --> 00:01:18,170
Men nu har vi förhoppningsvis utvecklat
några bra kodning vanor,

29
00:01:18,170 --> 00:01:21,470
och så att vi kan börja att razzia
i JavaScript lite.

30
00:01:21,470 --> 00:01:25,750
>> För att skriva JavaScript, liknande öppning
upp en C-fil med en punkt C förlängning

31
00:01:25,750 --> 00:01:29,770
eller PHP-fil med en prick PHP förlängning,
allt vi behöver göra är att öppna upp en fil

32
00:01:29,770 --> 00:01:31,764
med pricken js filändelsen.

33
00:01:31,764 --> 00:01:34,430
Vi behöver inte ha någon särskild
avgränsare som vi gjorde i PHP.

34
00:01:34,430 --> 00:01:36,750
Denna typ av vinkeln
fäste frågetecken PHP

35
00:01:36,750 --> 00:01:40,300
att vi är vana vid från det, hur
vi berätta vår webbläsare som vad vi har är

36
00:01:40,300 --> 00:01:43,502
JavaScript är genom att ta
den i en HTML-tagg,

37
00:01:43,502 --> 00:01:46,210
och vi får se lite om
hur man gör det på bara ett ögonblick.

38
00:01:46,210 --> 00:01:48,210
>> Den andra saken som gör
JavaScript olika,

39
00:01:48,210 --> 00:01:50,580
är dock att det körs på klientsidan.

40
00:01:50,580 --> 00:01:53,430
Så minns med PHP som
Vi kunde aldrig riktigt se

41
00:01:53,430 --> 00:01:57,041
PHP som underströk en webbplats.

42
00:01:57,041 --> 00:01:59,040
Om vi ​​någonsin sett den
sida källa, vi skulle bara

43
00:01:59,040 --> 00:02:02,830
se html som var
genereras av att PHP.

44
00:02:02,830 --> 00:02:04,900
Men JavaScript driver klientsidan.

45
00:02:04,900 --> 00:02:06,710
JavaScript körs på din dator.

46
00:02:06,710 --> 00:02:09,050
Och det är därför du kan göra
saker som lägger blockerare.

47
00:02:09,050 --> 00:02:09,550
Höger?

48
00:02:09,550 --> 00:02:12,704
Annonsblockering görs oftast genom
döda alla JavaScript

49
00:02:12,704 --> 00:02:14,370
som körs på en viss webbplats.

50
00:02:14,370 --> 00:02:19,000
Och eftersom det skulle behöva
körs på din maskin klientsidan,

51
00:02:19,000 --> 00:02:21,910
du kan bara stoppa
JavaScript för att köra helt.

52
00:02:21,910 --> 00:02:27,030
Det innebär också att när du använder
en webbplats som innehåller JavaScript,

53
00:02:27,030 --> 00:02:32,450
du måste skicka JavaScript källa
kod som en del av http svar

54
00:02:32,450 --> 00:02:34,159
till kunden när de begär det.

55
00:02:34,159 --> 00:02:35,950
Och så du kanske inte
vill använda JavaScript

56
00:02:35,950 --> 00:02:38,395
att göra riktigt känsliga saker
som vidarebefordrar information

57
00:02:38,395 --> 00:02:41,020
om användarnas lösenord rygg och
framåt, eftersom de är faktiskt

58
00:02:41,020 --> 00:02:45,610
kommer att få alla av källkoden,
inte bara html som genereras,

59
00:02:45,610 --> 00:02:49,030
såsom skulle vara fallet med säga PHP.

60
00:02:49,030 --> 00:02:51,620
>> Så hur gör vi inkluderar JavaScript
i vår html till att börja med?

61
00:02:51,620 --> 00:02:54,520
Tja, i likhet med CSS, faktiskt,
är en slags hur vi gör det här.

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

63
00:02:56,190 --> 00:03:00,760
Och insidan av dessa stil taggar,
Vi kan definiera en CSS-formatmall.

64
00:03:00,760 --> 00:03:03,450
På samma sätt med JavaScript
kan vi öppna upp script-taggar,

65
00:03:03,450 --> 00:03:06,660
annan html tag vi inte
tala om i vår html video,

66
00:03:06,660 --> 00:03:09,720
och skriva JavaScript
mellan dessa script-taggar.

67
00:03:09,720 --> 00:03:13,960
Även om, som CSS, vi
kunde länka in utanför CSS-filer

68
00:03:13,960 --> 00:03:15,900
och dra in dem i vårt program på det sättet.

69
00:03:15,900 --> 00:03:18,280
Med CSS kan vi också,
ursäkta mig, med JavaScript

70
00:03:18,280 --> 00:03:23,240
Vi kan också ange källan
attribut av skripttagg

71
00:03:23,240 --> 00:03:25,720
länka in JavaScript
separat, så att du inte

72
00:03:25,720 --> 00:03:27,680
måste skriva det i
mellan script-taggar, vi

73
00:03:27,680 --> 00:03:29,600
kan länka det att använda
att skripttagg också.

74
00:03:29,600 --> 00:03:33,230
Och precis som i fallet med CSS där
Vi rekommenderar att det var förmodligen

75
00:03:33,230 --> 00:03:36,090
i ditt bästa intresse att skriva
din CSS i en separat fil i fall

76
00:03:36,090 --> 00:03:38,500
du behöver ändra det,
på samma sätt gör vi rekommenderar

77
00:03:38,500 --> 00:03:40,720
att du skriver ditt
JavaScript i separata filer

78
00:03:40,720 --> 00:03:45,460
och använda skripttaggarna källa
skriva knyta JavaScript

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

80
00:03:49,520 --> 00:03:52,610
>> Så JavaScript variabler, vi ska
börja tala om syntaxen här.

81
00:03:52,610 --> 00:03:53,600
Och vi ska gå igenom
denna typ av snabbt,

82
00:03:53,600 --> 00:03:56,640
eftersom vi har gjort detta i PHP, så
allt detta borde vara ganska bekant.

83
00:03:56,640 --> 00:03:59,490
Så variabler i JavaScript är
mycket lik PHP variabler.

84
00:03:59,490 --> 00:04:03,270
Det finns ingen typ specificerare, och
när du införa en variabel,

85
00:04:03,270 --> 00:04:05,070
du prefix det med nyckelordet var.

86
00:04:05,070 --> 00:04:07,750
I PHP skulle vi göra något
så här, dollartecken x.

87
00:04:07,750 --> 00:04:09,950
Det är hur vi indikerade
en variabel, men nej, vi

88
00:04:09,950 --> 00:04:12,060
inte nämna vilken typ
av variabeln alls.

89
00:04:12,060 --> 00:04:15,124
Vi skulle säga något i stil
dollartecken x är lika 44 i PHP.

90
00:04:15,124 --> 00:04:17,040
Om vi ​​gjorde det
Samma sak i JavaScript,

91
00:04:17,040 --> 00:04:19,589
skulle vi säga var x är lika med 44.

92
00:04:19,589 --> 00:04:22,780
Så var är typ av vägen
att införa en variabel.

93
00:04:22,780 --> 00:04:26,850
Det är kanske lite mer intuitiv
än bara dollartecken variabel.

94
00:04:26,850 --> 00:04:29,080
>> Återigen, eftersom det inte finns någon
datatyper, skulle vi kunna göra detta

95
00:04:29,080 --> 00:04:34,490
med någon datatyp, strängar,
något annat skulle alla vara var.

96
00:04:34,490 --> 00:04:37,260
Villkors, alla våra
gamla vänner från C och PHP

97
00:04:37,260 --> 00:04:41,640
är fortfarande tillgängliga, så vi har om,
else if, annars, strömbrytare och fråga

98
00:04:41,640 --> 00:04:42,240
märke kolon.

99
00:04:42,240 --> 00:04:45,890
Switch kvar så flexibel som den
var i PHP, men alla dessa du

100
00:04:45,890 --> 00:04:46,930
bekant med vid det här laget.

101
00:04:46,930 --> 00:04:49,900
Och på liknande sätt med öglor är
de favoriter medan,

102
00:04:49,900 --> 00:04:52,700
gör tid, och för fortfarande tillgängliga för oss.

103
00:04:52,700 --> 00:04:55,880
Så redan vet vi en hel del av
grundläggande JavaScript slags fundamenta

104
00:04:55,880 --> 00:05:01,800
bara genom att ha en hel
kunskap nu om C och PHP.

105
00:05:01,800 --> 00:05:03,670
>> Vad om funktioner i JavaScript?

106
00:05:03,670 --> 00:05:08,199
Tja, i likhet med PHP varje funktion är
introducerades med nyckelordet function.

107
00:05:08,199 --> 00:05:10,740
Du säger funktion, och sedan
börja definiera din funktion.

108
00:05:10,740 --> 00:05:12,531
Vad är lite annorlunda
om JavaScript

109
00:05:12,531 --> 00:05:15,700
är dock möjligheten att ha
vad som kallas en anonym funktion.

110
00:05:15,700 --> 00:05:18,880
Så du kan definiera funktioner
som inte har ett namn.

111
00:05:18,880 --> 00:05:21,222
Detta är något som vi
verkligen inte har sett förut.

112
00:05:21,222 --> 00:05:23,430
Vi kommer verkligen använda begreppet
av en anonym funktion

113
00:05:23,430 --> 00:05:27,880
lite senare i denna
video, eftersom det ska

114
00:05:27,880 --> 00:05:31,530
göra lite mer känsla i sitt sammanhang
när vi ser det i en viss situation

115
00:05:31,530 --> 00:05:33,120
att jag har skapat här.

116
00:05:33,120 --> 00:05:35,710
Men låt oss bara ta en titt
på vad en enkel JavaScript

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

118
00:05:37,850 --> 00:05:40,610
>> Så jag har gått vidare och
öppnat min CS50 IDE

119
00:05:40,610 --> 00:05:43,690
och jag har redan kör Apache
att börja min server som kör.

120
00:05:43,690 --> 00:05:46,800
Och jag har den här filen
öppna kallas home.html.

121
00:05:46,800 --> 00:05:48,330
Och jag kommer att zooma in lite här.

122
00:05:48,330 --> 00:05:52,090
Och i princip kan du se
Home.html är bara en massa knappar.

123
00:05:52,090 --> 00:05:55,291
Och jag hävdar upptill här
att detta är JavaScript sektionen

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

125
00:05:55,790 --> 00:05:59,490
Så det finns en massa knappar här,
men vad gör dessa knappar faktiskt gör?

126
00:05:59,490 --> 00:06:03,662
>> Tja, vi bege dig till min IED,
och jag har home.html öppna här.

127
00:06:03,662 --> 00:06:05,620
Alldeles i början,
här är där jag länka

128
00:06:05,620 --> 00:06:07,500
i alla mina JavaScript källfilerna.

129
00:06:07,500 --> 00:06:08,000
Höger?

130
00:06:08,000 --> 00:06:12,440
Så jag har anonymous.js, clock.js,
Jag använder källattributet

131
00:06:12,440 --> 00:06:14,440
av skripttagg att länka in filen.

132
00:06:14,440 --> 00:06:18,660
Så jag har inte skrivit någon
JavaScript direkt i den här filen,

133
00:06:18,660 --> 00:06:21,790
men jag har dragit i alla
JavaScript Jag har skrivit separat.

134
00:06:21,790 --> 00:06:24,540
Och om vi rulla ner här, detta
bör alla ser något bekant

135
00:06:24,540 --> 00:06:27,090
med lite ny syntax.

136
00:06:27,090 --> 00:06:32,655
Vi har här sidhuvudtagg för
funktioner och sedan en knapp.

137
00:06:32,655 --> 00:06:35,530
Jag har en ingång som är en knapp typ,
och tydligen när jag klickar på den,

138
00:06:35,530 --> 00:06:38,130
Jag ska ringa några
fungera alert datum.

139
00:06:38,130 --> 00:06:41,792
Och det är hur vi slags kan blanda ihop
en liten bit av JavaScript och html.

140
00:06:41,792 --> 00:06:44,500
De spelar faktiskt ganska snyggt
tillsammans, och så uppenbarligen när

141
00:06:44,500 --> 00:06:48,730
Jag klickar på den här knappen, jag kommer
att ringa någon funktion alert datum.

142
00:06:48,730 --> 00:06:53,660
Och på samma sätt har jag definierade beteenden
för alla andra knappar som

143
00:06:53,660 --> 00:06:56,440
är på den home.html sida,
som vi kommer att hålla tillbaka

144
00:06:56,440 --> 00:06:59,172
till under loppet av denna video.

145
00:06:59,172 --> 00:07:00,880
Men låt oss gå tillbaka upp
här och ta en titt

146
00:07:00,880 --> 00:07:03,850
vid clock.js, som är den
JavaScript-fil som jag

147
00:07:03,850 --> 00:07:07,370
skrev som har denna första funktion
Vi ska ta en titt på.

148
00:07:07,370 --> 00:07:11,630
Som ni kan se, jag börjar min JavaScript
fungera med sökordet funktion,

149
00:07:11,630 --> 00:07:14,560
och jag har gett detta ett
namn, det kallas alert datum.

150
00:07:14,560 --> 00:07:18,710
Inuti det, jag uppenbarligen skapa en
ny lokal variabel kallad aktuellt datum.

151
00:07:18,710 --> 00:07:21,500
Och jag kommer att tilldela
en lika med ett nytt datum.

152
00:07:21,500 --> 00:07:24,430
Och vi kunde få in en hel del
detalj om vad ett datum är,

153
00:07:24,430 --> 00:07:27,060
och verkligen JavaScript är så
stor att vi kan omöjligen

154
00:07:27,060 --> 00:07:28,330
täcka allt i en video.

155
00:07:28,330 --> 00:07:32,220
Men det räcker att säga, detta kommer
att återvända till mig ett dataelement som

156
00:07:32,220 --> 00:07:35,470
kapslar aktuellt datum och klockslag.

157
00:07:35,470 --> 00:07:39,100
Jag lagrar det i en variabel som jag
uppenbarligen kommer att varna dagens datum.

158
00:07:39,100 --> 00:07:41,300
>> Tja, vad gör alert
aktuellt datum ser ut?

159
00:07:41,300 --> 00:07:46,460
Låt oss ta en titt på själva filen
tillbaka över i webbläsarfönstret.

160
00:07:46,460 --> 00:07:49,551
Så återigen, detta är den knapp som jag
knutit till denna namngiven funktion.

161
00:07:49,551 --> 00:07:51,800
Och jag klickar på den där och
titta vad det gjorde, varnade det.

162
00:07:51,800 --> 00:07:56,140
Det dök upp denna typ av box berättar
mig att den aktuella tiden är tydligen

163
00:07:56,140 --> 00:07:59,370
Det är 4 november kl
10:43:43 på morgonen.

164
00:07:59,370 --> 00:08:02,345
Och om jag klickar på den igen, nu
Det är ett par sekunder senare, eller hur?

165
00:08:02,345 --> 00:08:03,720
Så det är allt här funktionen gör.

166
00:08:03,720 --> 00:08:07,670
När jag klickar på den här knappen, det
dyker upp ett meddelande till mig.

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

168
00:08:13,806 --> 00:08:15,690
Så det finns egentligen inte
för mycket funktioner

169
00:08:15,690 --> 00:08:19,110
som skiljer sig från PHP,
bara en liten bit av ny syntax

170
00:08:19,110 --> 00:08:22,500
som kommer med att arbeta med JavaScript.

171
00:08:22,500 --> 00:08:24,650
>> Matriser i JavaScript är
ganska enkelt.

172
00:08:24,650 --> 00:08:27,200
Att förklara en array använder du
Hakparenteserna syntax

173
00:08:27,200 --> 00:08:30,090
att vi är bekant med från PHP.

174
00:08:30,090 --> 00:08:33,432
Och liknar PHP, vi
kan också blanda datatyper.

175
00:08:33,432 --> 00:08:35,140
Så denna array, både
av dessa matriser skulle

176
00:08:35,140 --> 00:08:36,960
vara helt legitimt JavaScript.

177
00:08:36,960 --> 00:08:42,500
En som är alla heltal, och en som
blandas upp olika datatyper.

178
00:08:42,500 --> 00:08:45,020
>> Vad är något helt annat
i JavaScript, men?

179
00:08:45,020 --> 00:08:47,020
Det är begreppet ett objekt.

180
00:08:47,020 --> 00:08:50,240
Så kanske du har hört talas om
objektorienterad programmering.

181
00:08:50,240 --> 00:08:53,370
Vi gör inte mycket av det i CS50,
men vi kommer att göra en liten bit av det

182
00:08:53,370 --> 00:08:55,670
här i samband med JavaScript.

183
00:08:55,670 --> 00:08:59,100
Nu JavaScript har förmågan att
beter sig som ett objektorienterat programmeringsspråk

184
00:08:59,100 --> 00:09:02,615
språk, men det är inte i sig
uteslutande ett objektorienterat

185
00:09:02,615 --> 00:09:03,490
programmeringsspråk.

186
00:09:03,490 --> 00:09:05,281
Och detta igen kommer
tillbaka till varför jag sa, det

187
00:09:05,281 --> 00:09:10,610
kan vara mycket utmanande att lära
JavaScript som din första program

188
00:09:10,610 --> 00:09:13,890
språk, eftersom den inte
verkligen passa en viss paradigm.

189
00:09:13,890 --> 00:09:16,430
>> C på andra sidan är en
funktionell programmeringsspråk.

190
00:09:16,430 --> 00:09:22,270
Om vi ​​vill, funktioner
sorts big boss mannen, eller hur?

191
00:09:22,270 --> 00:09:24,410
De diktera vad
händer allt annat.

192
00:09:24,410 --> 00:09:26,600
Vi vill ändra variabler,
vi kallar funktioner.

193
00:09:26,600 --> 00:09:28,220
Vi gör saker till funktioner.

194
00:09:28,220 --> 00:09:31,250
Objekt i stället, i ett
objektorienterat språk,

195
00:09:31,250 --> 00:09:35,937
föremål slags bli stjärnan och
funktioner blir slags sekundär.

196
00:09:35,937 --> 00:09:38,270
Men vad är ett objekt, vad
är denna föreställning om ett objekt?

197
00:09:38,270 --> 00:09:40,880
Tja, om det hjälper, tror
om det först sortera

198
00:09:40,880 --> 00:09:44,540
av som en C-struktur eller en struct
att vi har lärt oss om tidigare.

199
00:09:44,540 --> 00:09:47,430
I C, innehåller en struktur
ett antal områden,

200
00:09:47,430 --> 00:09:51,174
och kanske vi nu kan börja
kalla dessa fält egenskaper.

201
00:09:51,174 --> 00:09:53,590
Men egenskaperna aldrig riktigt
stå på egna ben, eller hur?

202
00:09:53,590 --> 00:09:56,410
Om jag definierar en struktur för en bil
såhär med följande två

203
00:09:56,410 --> 00:10:00,750
fält eller fastigheter, en an
heltal för det år då bilen

204
00:10:00,750 --> 00:10:04,290
och en annan 10 tecken
sträng för modellen av bilen,

205
00:10:04,290 --> 00:10:07,150
Jag kan säga något sådant,
Jag kan förklara en ny variabel

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

207
00:10:10,080 --> 00:10:13,730
Och då kan jag säga något
liknande herbie.year lika 1963,

208
00:10:13,730 --> 00:10:15,850
och herbie.model lika Beetle.

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

210
00:10:17,000 --> 00:10:19,680
Jag använder fälten i
ramen för struktur,

211
00:10:19,680 --> 00:10:22,290
men jag kunde aldrig bara
säga något så här.

212
00:10:22,290 --> 00:10:22,790
Höger?

213
00:10:22,790 --> 00:10:26,836
Jag kan inte använda fältnamnet
oberoende av strukturen.

214
00:10:26,836 --> 00:10:28,210
Det blir liksom en grundläggande sak.

215
00:10:28,210 --> 00:10:32,990
>> Så inriktningarna är
grundläggande för C strukturer

216
00:10:32,990 --> 00:10:39,050
är mycket lika egenskaper är
grundläggande för JavaScript-objekt.

217
00:10:39,050 --> 00:10:42,080
Men vad som gör dem
särskilt intressant

218
00:10:42,080 --> 00:10:46,230
är att objekt också kan ha vad
kallas metoder, som egentligen

219
00:10:46,230 --> 00:10:50,730
bara ett fint ord för funktioner som
är inneboende till objektet samt.

220
00:10:50,730 --> 00:10:55,340
Så det är en funktion som bara kan vara
kallas i samband med ett föremål.

221
00:10:55,340 --> 00:10:59,200
Endast ett objekt som har definierat
denna funktion inne i dess,

222
00:10:59,200 --> 00:11:02,020
om du tänker på en
struct, funktionen

223
00:11:02,020 --> 00:11:05,720
definieras inuti de definierar
klammerparenteserna av strukturen.

224
00:11:05,720 --> 00:11:07,980
Så det bara betyder något
till strukturen.

225
00:11:07,980 --> 00:11:10,960
Och det är typ av vad vi gör
här med objekt och metoder.

226
00:11:10,960 --> 00:11:13,580
Det är i princip som vi är
att definiera en funktion som

227
00:11:13,580 --> 00:11:16,670
bara vettigt på en
visst objekt, och så vi

228
00:11:16,670 --> 00:11:19,440
ring att en metod av objektet.

229
00:11:19,440 --> 00:11:23,180
Och vi kan aldrig kalla det
funktion oberoende av objektet,

230
00:11:23,180 --> 00:11:29,260
precis som vi inte kan säga år eller modell
oberoende av struct i C.

231
00:11:29,260 --> 00:11:32,300
>> Så funktionell programmering
paradigm se ut så här.

232
00:11:32,300 --> 00:11:35,450
Funktion och sedan när du passerar
i objektet som en parameter.

233
00:11:35,450 --> 00:11:38,650
I ett objektorienterat programmeringsspråk
språk, denna typ av blir

234
00:11:38,650 --> 00:11:43,464
vänt, och vi skulle tänka på
det så här, object.function.

235
00:11:43,464 --> 00:11:45,380
Så det slags att dot
operatören igen innebär

236
00:11:45,380 --> 00:11:49,540
att det är någon form av egendom
eller ett attribut för själva objektet.

237
00:11:49,540 --> 00:11:53,240
Men detta är vad ett objekt
orienterade programmeringsspråk

238
00:11:53,240 --> 00:11:57,150
kan göra för att göra en funktion
uppmana en metod, återigen, som

239
00:11:57,150 --> 00:12:00,260
är bara en speciellt ord för en funktion
som är inneboende till ett objekt.

240
00:12:00,260 --> 00:12:03,440
Detta är vad det
syntax kan se ut.

241
00:12:03,440 --> 00:12:09,360
Och så vi börjar att se några av
detta i samband med JavaScript.

242
00:12:09,360 --> 00:12:12,470
>> Du kan också tänka på ett objekt
ungefär som en associativ array,

243
00:12:12,470 --> 00:12:14,160
som vi känner till från PHP.

244
00:12:14,160 --> 00:12:17,720
Kom ihåg en associativ array tillåter
vi har nyckelpar värde, i stället

245
00:12:17,720 --> 00:12:23,040
att ha index 0, en, två, tre,
och så vidare som vi är vana vid från C

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

247
00:12:23,940 --> 00:12:27,472
Associativa arrayer kan kartlägga
ord, såsom i PHP video,

248
00:12:27,472 --> 00:12:29,180
Vi pratade om
pålägg av pizzor.

249
00:12:29,180 --> 00:12:31,180
Och så hade vi en array
kallade pizzor, och vi

250
00:12:31,180 --> 00:12:36,670
hade ost var en nyckel och $ 8,99 var
värde, och sedan pepperoni var en nyckel,

251
00:12:36,670 --> 00:12:39,190
$ 9,99 var ett värde, och så vidare.

252
00:12:39,190 --> 00:12:43,300
Och så kan vi också tänka på ett
invända slags liknar en associativ

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

254
00:12:43,840 --> 00:12:47,020
Och så denna syntax här
skulle skapa ett nytt objekt

255
00:12:47,020 --> 00:12:50,950
kallas herbie med två
fastigheter inne i det.

256
00:12:50,950 --> 00:12:57,310
År, som tillskrivs värdet 1963,
och modell, som tillskrivs strängen

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

258
00:12:58,140 --> 00:13:01,770
>> Och lägg märke till här att jag använder
apostrof i JavaScript.

259
00:13:01,770 --> 00:13:05,570
Du kan använda enkla eller dubbla citattecken
när du pratar om strängar.

260
00:13:05,570 --> 00:13:07,772
Det är bara på konventionellt sätt
Det fall som de flesta gånger

261
00:13:07,772 --> 00:13:10,230
när du skriver JavaScript
du bara använda enkla citattecken.

262
00:13:10,230 --> 00:13:15,050
Men jag kunde använda citationstecken här, och
det skulle vara helt bra också.

263
00:13:15,050 --> 00:13:17,470
>> Så kom ihåg hur i
PHP hade vi detta begrepp

264
00:13:17,470 --> 00:13:22,730
en för varje slinga som skulle tillåta oss
att iterera över hela nyckelvärdet

265
00:13:22,730 --> 00:13:25,270
par av ett associativt
array, eftersom vi

266
00:13:25,270 --> 00:13:29,050
har inte denna förmåga att iterera
genom 0, ett, två, tre, fyra,

267
00:13:29,050 --> 00:13:30,710
och så vidare?

268
00:13:30,710 --> 00:13:35,010
JavaScript har något liknande,
men det är inte kallas en för varje slinga,

269
00:13:35,010 --> 00:13:38,960
det kallas en i slingor.

270
00:13:38,960 --> 00:13:42,890
Så om jag sade till mig som
detta för var nyckeln i objektet,

271
00:13:42,890 --> 00:13:48,670
det är typ av lik säga
för varje något som något.

272
00:13:48,670 --> 00:13:53,850
Men allt jag gör här är iteration
genom alla nycklarna till min objekt.

273
00:13:53,850 --> 00:13:56,070
Och insidan av lockigt
hängslen där, skulle jag

274
00:13:56,070 --> 00:14:03,410
använda objekt hakparenteser för att hänvisa
värdet på den nyckeln plats.

275
00:14:03,410 --> 00:14:05,400
>> Alternativt finns det
även ett annat tillvägagångssätt.

276
00:14:05,400 --> 00:14:10,880
Om jag bara bara bryr sig om
värden, kan jag säga för nyckel av objekt,

277
00:14:10,880 --> 00:14:12,360
och bara använda nyckeln inuti.

278
00:14:12,360 --> 00:14:17,240
Så för var nyckeln i objektet, har jag
att använda objekt hakparenteser

279
00:14:17,240 --> 00:14:19,340
nyckeln inuti slingan.

280
00:14:19,340 --> 00:14:24,580
För var nyckel objekt, jag kan
Använd bara nyckeln inuti slingan,

281
00:14:24,580 --> 00:14:29,040
eftersom jag bara specifikt
talar om värden där.

282
00:14:29,040 --> 00:14:32,630
>> Så låt oss kanske ta en
titta på skillnaden

283
00:14:32,630 --> 00:14:35,670
bara för att snabbt visa dig
skillnaden mellan fyra

284
00:14:35,670 --> 00:14:40,730
i och för tillsammans med en mycket specifik
array, som vi har här, vecka array.

285
00:14:40,730 --> 00:14:43,616
Så jag måste hitta en ny array
som jag fyllde med sju strängar,

286
00:14:43,616 --> 00:14:46,240
Måndag tisdag onsdag,
Torsdag, fredag, lördag, söndag.

287
00:14:46,240 --> 00:14:50,530
Och jag vill nu iterera
genom denna matris,

288
00:14:50,530 --> 00:14:53,090
utskrift av viss information.

289
00:14:53,090 --> 00:14:58,780
Om jag använder en i slinga
att skriva ut information,

290
00:14:58,780 --> 00:15:00,710
vad tror du att jag kommer att få?

291
00:15:00,710 --> 00:15:01,710
Nåväl, låt oss ta en titt.

292
00:15:01,710 --> 00:15:05,300
Och innan vi hoppa över
till min webbläsarfönster,

293
00:15:05,300 --> 00:15:08,090
vet bara att
console.log är typ av en

294
00:15:08,090 --> 00:15:10,630
sätt att göra en utskrift F i JavaScript.

295
00:15:10,630 --> 00:15:12,040
Men vad är konsolen?

296
00:15:12,040 --> 00:15:14,940
Tja, det är vad vi tänker
att gå och ta en titt på just nu.

297
00:15:14,940 --> 00:15:16,850
>> OK, så vi är tillbaka hit
i min webbläsarfönster,

298
00:15:16,850 --> 00:15:19,410
och jag kommer att öppna
mina utvecklarverktyg.

299
00:15:19,410 --> 00:15:22,290
Återigen, jag bara slår F12
att öppna upp utvecklarverktyg.

300
00:15:22,290 --> 00:15:25,670
Och lägg märke till att här på
top Jag har valt konsol.

301
00:15:25,670 --> 00:15:28,480
Så detta är begreppet
av en utvecklarkonsolen,

302
00:15:28,480 --> 00:15:30,500
och det ger oss möjlighet att
skriva ut information,

303
00:15:30,500 --> 00:15:33,000
ungefär som terminalen, men
som du ser lite senare,

304
00:15:33,000 --> 00:15:37,720
Vi kan också skriva information
att interagera med vår hemsida.

305
00:15:37,720 --> 00:15:42,320
Jag kommer att zooma in lite här,
och jag ska klicka nu i test.

306
00:15:42,320 --> 00:15:45,230
Och fyra i test-- Jag tänker inte
visa koden för det just nu,

307
00:15:45,230 --> 00:15:47,479
men du får det om du
ladda källkoden som

308
00:15:47,479 --> 00:15:50,380
är associerad med denna video--
är bara det att i loop

309
00:15:50,380 --> 00:15:52,610
som vi såg bara en
andra sedan på bilden.

310
00:15:52,610 --> 00:15:54,810
>> Så jag ska klick som
knappen och hit,

311
00:15:54,810 --> 00:15:58,440
Här är vad som skrivs ut i
konsol, 0, ett, två, tre, fyra, fem,

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

313
00:15:58,940 --> 00:16:02,490
Jag ville inte skriva ut informationen
inom dessa array platser,

314
00:16:02,490 --> 00:16:05,180
eftersom jag använde en i slinga.

315
00:16:05,180 --> 00:16:10,670
Och inuti kroppen av slingan, jag
bara skrivas ut nyckeln inte objektnyckel.

316
00:16:10,670 --> 00:16:18,600
Men om jag nu rensa min konsol, och jag
växla till för av test, och fyra test

317
00:16:18,600 --> 00:16:22,500
Jag säger att jag använder för av slinga
i stället och skriva ut nyckeln,

318
00:16:22,500 --> 00:16:28,079
om jag klickar att nu jag får
faktiska element inne i mitt objekt

319
00:16:28,079 --> 00:16:29,120
eller min array i detta fall.

320
00:16:29,120 --> 00:16:31,760
Min samling av veckodagar.

321
00:16:31,760 --> 00:16:33,480
Jag skrivas ut måndag,
Tisdag onsdag.

322
00:16:33,480 --> 00:16:36,930
Så det är skillnaden mellan
en i slinga, som skriver ut

323
00:16:36,930 --> 00:16:43,410
bara nycklarna om du använder bara nyckel
insidan av kroppen av slingan,

324
00:16:43,410 --> 00:16:46,850
och en för av slinga, som utskrifter
de värderingar om du använder bara

325
00:16:46,850 --> 00:16:48,870
nyckel inuti kroppen av slingan.

326
00:16:48,870 --> 00:16:52,380
>> Okej, hur ska vi nu börja
sammanfoga strängar och kanske blanda ihop

327
00:16:52,380 --> 00:16:57,220
vissa variabler med interpolering
som vi skulle kunna göra i PHP?

328
00:16:57,220 --> 00:16:59,410
Tja, vi är ganska bekant
med detta från PHP.

329
00:16:59,410 --> 00:17:04,109
Detta är hur vi skulle göra det med hjälp av
punktoperatorn för att sammanfoga strängar.

330
00:17:04,109 --> 00:17:06,260
I JavaScript, dock,
vi faktiskt använda något

331
00:17:06,260 --> 00:17:09,290
kallas plus aktör och som
är kanske lite mer

332
00:17:09,290 --> 00:17:10,470
intuitivt, eller hur?

333
00:17:10,470 --> 00:17:12,609
Vi lägger ett gäng
av strängar tillsammans.

334
00:17:12,609 --> 00:17:14,520
Så låt oss gå tillbaka
över och se vad detta

335
00:17:14,520 --> 00:17:18,693
skrivs ut om vi försöker att skriva ut
all information i veckan array.

336
00:17:18,693 --> 00:17:20,859
Okej, så här under
enligt strängsammanfogning,

337
00:17:20,859 --> 00:17:24,822
Jag har två alternativ, sträng byggnad
V1 och sedan sträng byggnad V2.

338
00:17:24,822 --> 00:17:26,530
Och vi kommer att se varför vi
behöver V2 i en sekund.

339
00:17:26,530 --> 00:17:28,610
Men jag ska klicka på
sträng byggnad V1, som

340
00:17:28,610 --> 00:17:30,360
är koden vi var
bara ta en titt på,

341
00:17:30,360 --> 00:17:32,980
den console.log med alla plussidan.

342
00:17:32,980 --> 00:17:35,910
Låt oss se om detta tryck
reda på vad vi förväntar oss.

343
00:17:35,910 --> 00:17:39,939
>> Måndag är dagnummer 01 i veckan,
Tisdag är dag nummer 11 i veckan.

344
00:17:39,939 --> 00:17:41,730
Tja, vad jag försökte
att göra det var att få

345
00:17:41,730 --> 00:17:46,280
det att skriva ut måndag är dagnummer
en, är tisdag dag nummer två.

346
00:17:46,280 --> 00:17:50,140
Men det verkar som om jag är
alltid att skriva ut en.

347
00:17:50,140 --> 00:17:51,260
Tja, varför är det?

348
00:17:51,260 --> 00:17:55,600
Tja, det visar sig, ta en titt
på denna lilla snutt kod här.

349
00:17:55,600 --> 00:18:00,160
Lägg märke till att vi använder plus
operatör i två olika sammanhang.

350
00:18:00,160 --> 00:18:03,221
>> Och så här är där kanske saker
att vi har sådan har sagt,

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

352
00:18:03,970 --> 00:18:05,910
Vi sysslar inte med datatyper längre.

353
00:18:05,910 --> 00:18:08,220
Men här är där det faktum
att vi förlorar datatyper

354
00:18:08,220 --> 00:18:10,960
kan faktiskt vara lite
av ett problem för oss.

355
00:18:10,960 --> 00:18:16,260
Nu när plusoperatorn används för att
sammanfoga strängar och lägga till nummer

356
00:18:16,260 --> 00:18:19,550
tillsammans har JavaScript
att göra sitt bästa gissning

357
00:18:19,550 --> 00:18:22,030
vad jag vill att det ska göra för mig.

358
00:18:22,030 --> 00:18:23,900
Och i detta fall, gissade fel.

359
00:18:23,900 --> 00:18:29,340
Det bara konkatenerade dag, vilket skulle vara
0, ett, två, tre, fyra, fem, eller sex,

360
00:18:29,340 --> 00:18:32,060
och då är det bara sammanfogas
det och sedan sammanfogas en.

361
00:18:32,060 --> 00:18:35,020
Det faktiskt inte lägga ihop dem.

362
00:18:35,020 --> 00:18:37,320
Och så dessa språk,
PHP och JavaScript,

363
00:18:37,320 --> 00:18:39,196
som abstraherar bort
detta begrepp typer,

364
00:18:39,196 --> 00:18:40,820
du behöver inte ta itu med det längre.

365
00:18:40,820 --> 00:18:43,600
De har fortfarande typer under huven.

366
00:18:43,600 --> 00:18:46,780
Och vi kan, i situationer
så här, utnyttja detta faktum

367
00:18:46,780 --> 00:18:49,240
genom att säga något
som kanske detta, som

368
00:18:49,240 --> 00:18:53,210
berättar JavaScript, genom
sätt, behandla detta som ett heltal,

369
00:18:53,210 --> 00:18:57,100
inte behandla det som en sträng, även
även om vi blandar ihop strängar

370
00:18:57,100 --> 00:18:58,940
och heltal här.

371
00:18:58,940 --> 00:19:02,204
>> Det är bara en av dessa saker
att det verkar så stor i sammanhang

372
00:19:02,204 --> 00:19:04,120
att vi inte behöver
hantera typer längre,

373
00:19:04,120 --> 00:19:05,828
men ibland du kommer
hamna i en situation

374
00:19:05,828 --> 00:19:09,110
precis som det där det faktum att
du inte har kontroll över olika typer

375
00:19:09,110 --> 00:19:11,220
kan slå tillbaka på dig
Om du inte är försiktig.

376
00:19:11,220 --> 00:19:18,285
Och så om vi pop tillbaka över till IDE, jag
kommer att rensa ut min konsol igen,

377
00:19:18,285 --> 00:19:20,660
och jag kommer att klicka sträng
byggnad version två, som

378
00:19:20,660 --> 00:19:23,052
är där jag använder det parse int funktion.

379
00:19:23,052 --> 00:19:25,260
Nu är det skrivs ut
information som jag förväntat mig.

380
00:19:25,260 --> 00:19:29,330
Måndag dag nummer ett, tisdag
är dag nummer två, och så vidare.

381
00:19:29,330 --> 00:19:31,170
>> Så låt oss tala om funktioner igen.

382
00:19:31,170 --> 00:19:34,790
Jag lovade att vi skulle prata om anonym
funktioner, och nu sammanhanget för att

383
00:19:34,790 --> 00:19:36,360
har äntligen kommit.

384
00:19:36,360 --> 00:19:39,980
Så innan vi gör det, låt oss prata igen
om arrayer för bara en sekund.

385
00:19:39,980 --> 00:19:42,120
Så arrayer är en speciell
fallet med ett objekt.

386
00:19:42,120 --> 00:19:45,180
Faktum är att allt i
JavaScript är faktiskt ett objekt.

387
00:19:45,180 --> 00:19:47,190
Så funktioner är en
specialfall av ett objekt,

388
00:19:47,190 --> 00:19:49,770
heltal är en speciell
fallet med ett föremål,

389
00:19:49,770 --> 00:19:52,152
men arrayer specifikt
har ett antal metoder.

390
00:19:52,152 --> 00:19:55,110
Kom ihåg att de är föremål,
de kan ha egenskaper och metoder.

391
00:19:55,110 --> 00:19:58,600
De har ett antal metoder som
kan appliceras på dessa objekt.

392
00:19:58,600 --> 00:20:01,197
Det finns en metod som kallas
storlek, array.size,

393
00:20:01,197 --> 00:20:03,030
som kommer att återvända till
dig som du kan förvänta dig

394
00:20:03,030 --> 00:20:05,120
antalet element i arrayen.

395
00:20:05,120 --> 00:20:08,480
Array.pop, ungefär som
vår uppfattning om poppar upp

396
00:20:08,480 --> 00:20:11,110
av en stapel, om ni minns
från vår stackar video,

397
00:20:11,110 --> 00:20:13,810
bort det sista elementet från arrayen.

398
00:20:13,810 --> 00:20:17,110
Array.push tillför ett nytt element
i slutet av en array.

399
00:20:17,110 --> 00:20:20,910
Array.shift är typ av
liknande DQ, skarvar den ut

400
00:20:20,910 --> 00:20:23,610
den allra första elementet i en array.

401
00:20:23,610 --> 00:20:27,549
>> Men det finns också en annan särskild
metod för en array med namnet karta.

402
00:20:27,549 --> 00:20:29,340
Och detta är typ av en
intressant koncept.

403
00:20:29,340 --> 00:20:30,930
Så vad är tanken på en karta?

404
00:20:30,930 --> 00:20:33,880
Du kommer faktiskt se detta
i flera andra språk,

405
00:20:33,880 --> 00:20:38,550
och vi pratar inte om en
sorts kartografer karta här,

406
00:20:38,550 --> 00:20:41,480
Vi pratar om en mappningsfunktion.

407
00:20:41,480 --> 00:20:44,110
I samband vi är
talar om här, en karta

408
00:20:44,110 --> 00:20:47,950
är en speciell operation vi
kan utföra på en matris

409
00:20:47,950 --> 00:20:51,630
att tillämpa en viss funktion
till varje element i den arrayen.

410
00:20:51,630 --> 00:20:55,190
och så vi skulle säga i
det här fallet, kanske array.map,

411
00:20:55,190 --> 00:21:00,330
och inne i det, vi passerar
till karta är en funktion som vi vill

412
00:21:00,330 --> 00:21:02,430
som skall tillämpas på varje enskilt element.

413
00:21:02,430 --> 00:21:07,299
Så det är typ av analogt med att använda
en slinga för att iterera över varje element

414
00:21:07,299 --> 00:21:09,340
och tillämpa en viss
fungera för att varje element,

415
00:21:09,340 --> 00:21:14,830
just JavaScript har detta inbyggd
begreppet en avbildning som kan tillämpas.

416
00:21:14,830 --> 00:21:19,700
Och detta är en stor sammanhang
tala om en anonym funktion.

417
00:21:19,700 --> 00:21:22,370
>> Så låt oss säga att vi har
denna array av heltal.

418
00:21:22,370 --> 00:21:25,370
Det kallas nums, och det har fått fem
saker i det, ett, två, tre, fyra,

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

420
00:21:26,410 --> 00:21:30,620
Nu vill jag att kartlägga några
funktionen till denna matris.

421
00:21:30,620 --> 00:21:34,337
Jag vill ha en funktion tillämpas
till varje element i gruppen.

422
00:21:34,337 --> 00:21:37,420
Nåväl, låt oss säga att det jag vill
göra är att fördubbla alla element.

423
00:21:37,420 --> 00:21:42,520
Vad jag kan göra är bara använda en slinga
för var jag är lika med 0, är ​​jag mindre än

424
00:21:42,520 --> 00:21:47,390
eller lika med 4, I plus, plus, och
sedan fördubblas varje enda nummer.

425
00:21:47,390 --> 00:21:49,580
Men jag kan också göra något sånt här.

426
00:21:49,580 --> 00:21:53,420
Jag kan säga nums var tidigare
ett två tre Fyra Fem,

427
00:21:53,420 --> 00:21:58,310
nu, men skulle jag vilja att ni
applicera en avbildning på denna matris

428
00:21:58,310 --> 00:22:00,400
där jag skulle vilja att ni
att fördubbla varje nummer.

429
00:22:00,400 --> 00:22:02,540
Och det är precis
vad som händer här.

430
00:22:02,540 --> 00:22:06,870
Men lägg märke till vad jag passerar
in som argument för att kartlägga.

431
00:22:06,870 --> 00:22:09,080
Detta är en anonym funktion.

432
00:22:09,080 --> 00:22:11,140
Och märker jag har inte gett
denna funktion ett namn,

433
00:22:11,140 --> 00:22:13,290
Jag har bara gett det en parameterlista.

434
00:22:13,290 --> 00:22:16,370
Och så detta är ett exempel
av en anonym funktion.

435
00:22:16,370 --> 00:22:21,270
>> Vi brukar aldrig skulle kalla detta
funktion utanför ramen för kartan.

436
00:22:21,270 --> 00:22:24,110
Vi definierar det som en parameter
att kartlägga och så vi egentligen inte

437
00:22:24,110 --> 00:22:27,910
måste ha ett namn för det om det
enda som bryr sig om är karta

438
00:22:27,910 --> 00:22:30,339
och det är definierat rätt
där insidan av kartan.

439
00:22:30,339 --> 00:22:31,880
Och så detta är en anonym funktion.

440
00:22:31,880 --> 00:22:34,680
Vi har inte kunnat
att göra detta tidigare.

441
00:22:34,680 --> 00:22:38,400
Sätt någon funktion som
accepterar en parameter, num,

442
00:22:38,400 --> 00:22:41,890
och vad den funktionen gör
är returer num gånger 2.

443
00:22:41,890 --> 00:22:45,330
Och så efter detta
kartläggning har tillämpats,

444
00:22:45,330 --> 00:22:50,090
Detta är nu vad nums utseende
som, två, fyra, sex, åtta, 10.

445
00:22:50,090 --> 00:22:52,090
Och vi kommer att pop över till min
webbläsarfönster och bara

446
00:22:52,090 --> 00:22:55,240
ta en titt på denna
riktigt snabbt också.

447
00:22:55,240 --> 00:22:58,000
>> Så jag har en annan knapp här
i min hemsida som kallas dubbel.

448
00:22:58,000 --> 00:23:03,570
Och när jag klickar dubbel, och det säger
mig innan det var en, två, tre, fyra,

449
00:23:03,570 --> 00:23:07,250
fem efter två, fyra, sex, åtta, tio.

450
00:23:07,250 --> 00:23:11,930
Och om jag går tillbaka och klicka dubbel
igen, två, fyra, sex, åtta, 10.

451
00:23:11,930 --> 00:23:17,400
Och sedan efter, fyra,
åtta, tolv, sexton, och sedan 20.

452
00:23:17,400 --> 00:23:20,440
Och vad gör jag i denna funktion?

453
00:23:20,440 --> 00:23:25,210
Tja, om vi bara pop över till IDE, och
Jag drar upp min anonym funktion, här

454
00:23:25,210 --> 00:23:28,780
på rad sju till 13, jag är
göra lite fint arbete här,

455
00:23:28,780 --> 00:23:32,240
men jag bara skriva ut
vad som för närvarande i matrisen.

456
00:23:32,240 --> 00:23:36,580
Sedan på linje 16, 17,
och 18, det är min karta.

457
00:23:36,580 --> 00:23:40,930
Det är där jag tillämpar denna fördubbling
funktion till varje enskild del.

458
00:23:40,930 --> 00:23:43,530
Och sedan lite längre ner,
Jag bara gör samma sak

459
00:23:43,530 --> 00:23:46,640
Jag gjorde innan, förutom nu är jag
utskrift av innehållet i uppsättningen

460
00:23:46,640 --> 00:23:48,167
efteråt.

461
00:23:48,167 --> 00:23:50,500
Men allt jag har gjort här är
bara använda en anonym funktion

462
00:23:50,500 --> 00:23:53,640
karta över en hel rad.

463
00:23:53,640 --> 00:23:58,466
>> Så en mer stort ämne att prata om i
JavaScript är idén om en händelse.

464
00:23:58,466 --> 00:24:01,590
En händelse är något som bara händer
när en användare interagerar med din web

465
00:24:01,590 --> 00:24:04,715
sida, så kanske de klickar något,
eller kanske sidan lästs in,

466
00:24:04,715 --> 00:24:07,200
eller kanske de har flyttat
musen över något,

467
00:24:07,200 --> 00:24:09,290
eller de har skrivit något
i ett inmatningsfält.

468
00:24:09,290 --> 00:24:14,260
Alla dessa saker är händelser
som förekommer på vår hemsida.

469
00:24:14,260 --> 00:24:17,460
Och JavaScript har
förmåga att stödja något

470
00:24:17,460 --> 00:24:21,760
kallas en händelsehanterare som
är en callback-funktion som

471
00:24:21,760 --> 00:24:23,329
svarar på en html händelse.

472
00:24:23,329 --> 00:24:24,620
Och vad är en callback-funktion?

473
00:24:24,620 --> 00:24:27,328
Tja, det är i allmänhet bara en annan
namn för en anonym funktion.

474
00:24:27,328 --> 00:24:30,170
Det är en funktion som
svarar på en händelse.

475
00:24:30,170 --> 00:24:34,130
Och det är där vi kommer till
idé att binda vissa funktioner

476
00:24:34,130 --> 00:24:38,060
till en speciell HTML-attribut.

477
00:24:38,060 --> 00:24:41,420
De flesta HTML-element har
stöd för ett attribut

478
00:24:41,420 --> 00:24:45,170
att vi inte talar om i html
video för något som på klick

479
00:24:45,170 --> 00:24:50,540
eller på hover eller last,
alla dessa händelser

480
00:24:50,540 --> 00:24:53,120
som du sedan kan skriva funktioner
att ta itu med dessa händelser

481
00:24:53,120 --> 00:24:56,090
när dessa händelser
inträffar på din hemsida.

482
00:24:56,090 --> 00:24:59,170
>> Och så kanske din html
ser ut ungefär så här.

483
00:24:59,170 --> 00:25:02,240
Och jag har två knappar här,
knappen en och knapp två,

484
00:25:02,240 --> 00:25:04,620
och här har jag för närvarande
definierade ingenting,

485
00:25:04,620 --> 00:25:11,170
men det är där attributet på
klick är uppenbarligen en del av min HTML-tagg.

486
00:25:11,170 --> 00:25:15,220
Så uppenbarligen när jag definierar vad som är
pågår inne i denna egenskap,

487
00:25:15,220 --> 00:25:18,590
det kommer att bli några JavaScript
funktion som svarar på händelsen

488
00:25:18,590 --> 00:25:24,360
förmodligen att klicka på
knapp en knapp eller två.

489
00:25:24,360 --> 00:25:28,580
>> Vad är ganska coolt om det här är vi
kan skriva en generisk händelsehanterare.

490
00:25:28,580 --> 00:25:32,370
Och denna händelse Handler kommer
skapa ett händelseobjekt.

491
00:25:32,370 --> 00:25:37,000
Och händelseobjektet berättar
vilken av de två knapparna klickade.

492
00:25:37,000 --> 00:25:38,064
Nu hur fungerar det?

493
00:25:38,064 --> 00:25:39,730
Tja, kan det se ut så här.

494
00:25:39,730 --> 00:25:44,860
Så vi kommer först definiera våra knappar
att ha ett svar på återuppringning

495
00:25:44,860 --> 00:25:47,470
funktion som kommer att kallas
när knappen klickas,

496
00:25:47,470 --> 00:25:49,520
vi kallar händelsen alert namn.

497
00:25:49,520 --> 00:25:53,320
Och lägg märke till i båda fallen vi är
passerar denna händelse parameter.

498
00:25:53,320 --> 00:25:55,460
Så vi kallar denna funktion
eller när denna funktion

499
00:25:55,460 --> 00:26:00,330
utlöses av händelsen som händer,
det kommer att skapa denna händelseobjekt

500
00:26:00,330 --> 00:26:03,300
och skicka det som ett
parametern för att varna namn.

501
00:26:03,300 --> 00:26:07,270
Och det händelseobjektet är
kommer att innehålla information

502
00:26:07,270 --> 00:26:09,800
om vilken knapp du klickade.

503
00:26:09,800 --> 00:26:11,580
Och hur går det göra det?

504
00:26:11,580 --> 00:26:13,654
Tja, kan det se ut så här.

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

506
00:26:15,570 --> 00:26:17,420
måste hitta detta
funktionen alert namn, som

507
00:26:17,420 --> 00:26:19,500
igen medger att händelsen parametern.

508
00:26:19,500 --> 00:26:24,640
Och så här är där jag upptäcka
vilken knapp utlöstes,

509
00:26:24,640 --> 00:26:28,100
var utlösaren lika händelse
punktkällelementet.

510
00:26:28,100 --> 00:26:33,150
Vad var källan som skapade
denna händelseobjekt som antogs i?

511
00:26:33,150 --> 00:26:36,390
Var den knäppas en eller var det knapp två?

512
00:26:36,390 --> 00:26:40,710
>> Och så här allt jag gör är
utskrift trigger.innerhtml.

513
00:26:40,710 --> 00:26:43,860
Jo, i detta fall, i detta
sammanhang trigger.innerhtml

514
00:26:43,860 --> 00:26:45,940
är precis vad som står skrivet på knappen.

515
00:26:45,940 --> 00:26:48,830
Det råkar vara så om vi hoppar
tillbaka för en sekund, skulle det

516
00:26:48,830 --> 00:26:51,670
vara vad som finns i mellan dessa Taggar.

517
00:26:51,670 --> 00:26:54,150
Det kommer att bli knapp en knapp eller två.

518
00:26:54,150 --> 00:26:57,320
Och låt oss ta en titt på
hur denna händelse handler skulle

519
00:26:57,320 --> 00:27:01,080
se om vi hade det körs i praktiken.

520
00:27:01,080 --> 00:27:03,850
>> Så först av allt, du har
öppnat events.js,

521
00:27:03,850 --> 00:27:06,517
vilket är den JavaScript-fil där
Jag har definierat denna funktion.

522
00:27:06,517 --> 00:27:08,558
Och som ni kan se, är det
ganska mycket exakt vad

523
00:27:08,558 --> 00:27:10,230
vi bara såg på bilden för en sekund sedan.

524
00:27:10,230 --> 00:27:14,890
Och jag kommer att gå över till
hemsida som vi har använt.

525
00:27:14,890 --> 00:27:17,660
Och jag har här knappen
en och knapp två.

526
00:27:17,660 --> 00:27:19,820
Och jag ska klicka på knappen en.

527
00:27:19,820 --> 00:27:23,930
Du klickade på knappen en, om du
kan se här i registreringen.

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

529
00:27:25,810 --> 00:27:28,980
Klicka på knappen två, du
klickat på en knapp två.

530
00:27:28,980 --> 00:27:32,150
>> Så båda knapparna har
samma samtal funktion, eller hur?

531
00:27:32,150 --> 00:27:35,840
De båda var alert namn
händelse, men denna händelse objekt

532
00:27:35,840 --> 00:27:41,900
som blir skapas när vi klickar på
Det berättar vilken knapp du klickade.

533
00:27:41,900 --> 00:27:44,650
Vi behövde inte skriva två separata
funktioner eller affär med att ha

534
00:27:44,650 --> 00:27:46,470
att passera någon ytterligare information.

535
00:27:46,470 --> 00:27:48,220
Vi är bara förlita sig på
vad JavaScript kommer

536
00:27:48,220 --> 00:27:53,772
göra för oss, som är att skapa den
sorts händelseobjekt för vår räkning.

537
00:27:53,772 --> 00:27:56,730
Det finns mycket mer att JavaScript än
vad vi har täckt i denna video,

538
00:27:56,730 --> 00:27:58,521
men med dessa
grundläggande borde få dig

539
00:27:58,521 --> 00:28:00,690
ganska lång väg till
lärande allt du

540
00:28:00,690 --> 00:28:04,030
behöver veta om detta
intressant språk.

541
00:28:04,030 --> 00:28:05,000
Jag är Doug Lloyd.

542
00:28:05,000 --> 00:28:07,010
Detta är CS50.

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