1
00:00:00,000 --> 00:00:03,840
>> [MUSIC SPILLE]

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

3
00:00:05,770 --> 00:00:08,690
>> DOUG LLOYD: Så nå vi er gamle
proffene på web-programmering, ikke sant?

4
00:00:08,690 --> 00:00:12,140
Og vi har dekket flere
språkene i enkelte videoer.

5
00:00:12,140 --> 00:00:14,690
Og nå la oss gjøre en mer, Javascript.

6
00:00:14,690 --> 00:00:17,370
>> Først den gode nyheten, Javascript
er en moderne programmerings

7
00:00:17,370 --> 00:00:21,410
språket mye som PHP som
Syntaksen er avledet fra C,

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

9
00:00:22,830 --> 00:00:25,880
Det er omtrent like gammel som PHP, også,
etter å ha vært rundt 20 år.

10
00:00:25,880 --> 00:00:28,600
Den ble oppfunnet rundt
Samtidig som PHP.

11
00:00:28,600 --> 00:00:32,240
Og Javascript er faktisk ganske
grunnleggende for brukeropplevelsen

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

13
00:00:32,740 --> 00:00:34,448
Faktisk er det
tre språk at jeg

14
00:00:34,448 --> 00:00:38,480
vil si liksom gjøre opp
brukeropplevelsen av å samhandle

15
00:00:38,480 --> 00:00:42,650
med nettsiden, html,
CSS og Javascript.

16
00:00:42,650 --> 00:00:46,030
Og så nå la oss snakke
Litt om Javascript.

17
00:00:46,030 --> 00:00:50,301
>> Den dårlige nyheten, men med Javascript er
at det setter en masse regler for seg selv,

18
00:00:50,301 --> 00:00:51,300
og da det bryter dem.

19
00:00:51,300 --> 00:00:54,010
Og Javascript kan faktisk være
slags utfordrende å lære,

20
00:00:54,010 --> 00:00:57,000
fordi det er i motsetning til C og
PHP, som er meget strukturert

21
00:00:57,000 --> 00:01:00,270
og har veldig strenge regler
for hvordan ting kan fungere.

22
00:01:00,270 --> 00:01:03,690
Javascript har kind
av fått så fleksibel

23
00:01:03,690 --> 00:01:06,650
at kanskje ting ikke kommer til å
fungerer slik vi forventer at de skal,

24
00:01:06,650 --> 00:01:09,830
og kanskje vi egentlig ikke kan lære
vår første programmeringsspråk

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

26
00:01:10,769 --> 00:01:12,810
Så kanskje fordi det ikke
satt seg noen regler,

27
00:01:12,810 --> 00:01:15,754
og det gjør egentlig ikke
håndheve gode koding vaner.

28
00:01:15,754 --> 00:01:18,170
Men nå har vi forhåpentligvis utviklet
noen gode koding vaner,

29
00:01:18,170 --> 00:01:21,470
og slik at vi kan begynne å streiftog
inn Java litt.

30
00:01:21,470 --> 00:01:25,750
>> Å skrive Javascript, i likhet med åpning
opp en C-fil med en prikk C forlengelse

31
00:01:25,750 --> 00:01:29,770
eller en PHP-fil med en prikk PHP extension,
alt vi trenger å gjøre er å åpne opp en fil

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

33
00:01:31,764 --> 00:01:34,430
Vi trenger ikke å ha noen spesiell
skilletegn som vi gjorde i PHP.

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

35
00:01:36,750 --> 00:01:40,300
som vi er vant til fra det, slik
vi forteller nettleseren vår at det vi har er

36
00:01:40,300 --> 00:01:43,502
Javascript er ved å inkludere
det i en html kode,

37
00:01:43,502 --> 00:01:46,210
og vi får se litt om
hvordan du gjør det på bare et øyeblikk.

38
00:01:46,210 --> 00:01:48,210
>> Den andre tingen som gjør
Javascript annerledes,

39
00:01:48,210 --> 00:01:50,580
skjønt, er at det kjører klientsiden.

40
00:01:50,580 --> 00:01:53,430
Så husker med PHP som
Vi kunne aldri virkelig se

41
00:01:53,430 --> 00:01:57,041
PHP som understreket et nettsted.

42
00:01:57,041 --> 00:01:59,040
Hvis vi noen gang sett på
siden kilden, ville vi bare

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

44
00:02:02,830 --> 00:02:04,900
Men Script kjører klientsiden.

45
00:02:04,900 --> 00:02:06,710
Javascript kjører på datamaskinen.

46
00:02:06,710 --> 00:02:09,050
Og det er derfor du kan gjøre
Ting som legger blokkere.

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

48
00:02:09,550 --> 00:02:12,704
Ad blokkering gjøres vanligvis ved
drepe alle av Javascript

49
00:02:12,704 --> 00:02:14,370
som kjører på et bestemt nettsted.

50
00:02:14,370 --> 00:02:19,000
Og fordi det ville ha å
kjøres på maskinen din klientsiden,

51
00:02:19,000 --> 00:02:21,910
du kan bare stoppe
Javascript for å kjøre helt.

52
00:02:21,910 --> 00:02:27,030
Det betyr også at når du bruker
en nettside som inneholder Javascript,

53
00:02:27,030 --> 00:02:32,450
du må sende Javascript kilde
kode som en del av HTTP-svar

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

55
00:02:34,159 --> 00:02:35,950
Og så du kanskje ikke
ønsker å bruke Javascript

56
00:02:35,950 --> 00:02:38,395
å gjøre virkelig sensitive ting
som informasjon som passerer

57
00:02:38,395 --> 00:02:41,020
om brukernes passord rygg og
frem, fordi de er faktisk

58
00:02:41,020 --> 00:02:45,610
kommer til å motta alle kildekoden,
ikke bare html som genereres,

59
00:02:45,610 --> 00:02:49,030
slik som vil være tilfelle med si PHP.

60
00:02:49,030 --> 00:02:51,620
>> Så hvordan skal vi inkludere Javascript
i vår html til å begynne med?

61
00:02:51,620 --> 00:02:54,520
Vel, i likhet med CSS, faktisk,
er liksom hvordan vi gjør det her.

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

63
00:02:56,190 --> 00:03:00,760
Og innsiden av disse stil koder,
vi kan definere en CSS-stilark.

64
00:03:00,760 --> 00:03:03,450
Tilsvar med Javascript
kan vi åpne opp skriptkodene,

65
00:03:03,450 --> 00:03:06,660
en annen html tag vi ikke
snakke om i vår html video,

66
00:03:06,660 --> 00:03:09,720
og skrive Javascript
mellom disse skriptkodene.

67
00:03:09,720 --> 00:03:13,960
Også skjønt, som CSS, vi
kunne koble inn utenom CSS-filer

68
00:03:13,960 --> 00:03:15,900
og trekke dem inn i vårt program på den måten.

69
00:03:15,900 --> 00:03:18,280
Med CSS kan vi også,
Unnskyld meg, med Javascript

70
00:03:18,280 --> 00:03:23,240
Vi kan også angi kilde
egenskap av skriptmerket

71
00:03:23,240 --> 00:03:25,720
å knytte i Javascript
separat, slik at du ikke

72
00:03:25,720 --> 00:03:27,680
må skrive det i
mellom skriptkodene, vi

73
00:03:27,680 --> 00:03:29,600
kan koble den inn ved hjelp
at skriptmerket også.

74
00:03:29,600 --> 00:03:33,230
Og akkurat som med tilfellet med CSS der
Vi anbefaler at det var trolig

75
00:03:33,230 --> 00:03:36,090
i din beste interesse å skrive
CSS i en egen fil i tilfelle

76
00:03:36,090 --> 00:03:38,500
du trenger å endre det,
på samme måte gjø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 bruke skriptkodene kilde
attributt å knytte Javascript

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

80
00:03:49,520 --> 00:03:52,610
>> Så Javascript variabler, vil vi
begynne å snakke om syntaksen her.

81
00:03:52,610 --> 00:03:53,600
Og vi vil gå gjennom
denne typen hurtig,

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

83
00:03:56,640 --> 00:03:59,490
Så variabler i Javascript er
svært lik PHP variabler.

84
00:03:59,490 --> 00:04:03,270
Det finnes ingen type Specifier, og
når du introdusere en variabel,

85
00:04:03,270 --> 00:04:05,070
du prefiks det med VAR-nøkkelordet.

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

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

88
00:04:09,950 --> 00:04:12,060
nevner ikke typen
av den variable i det hele tatt.

89
00:04:12,060 --> 00:04:15,124
Vi vil si noe sånt
dollartegn x er lik 44 i PHP.

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

91
00:04:17,040 --> 00:04:19,589
vi ville si var x lik 44.

92
00:04:19,589 --> 00:04:22,780
Så Var er liksom vår måte
for innføring av en variabel.

93
00:04:22,780 --> 00:04:26,850
Det er kanskje litt mer intuitiv
enn bare dollartegn variabel.

94
00:04:26,850 --> 00:04:29,080
>> Igjen, siden det er ingen
datatyper, kan vi gjøre dette

95
00:04:29,080 --> 00:04:34,490
med en hvilken som helst datatype, strenger,
noe annet ville alle være var.

96
00:04:34,490 --> 00:04:37,260
Conditionals, alle våre
gamle venner fra C og PHP

97
00:04:37,260 --> 00:04:41,640
er fortsatt tilgjengelig, så vi har om,
annet hvis, annet, bryter og spørsmål

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

99
00:04:42,240 --> 00:04:45,890
Bryter rester så fleksibelt som det
var i PHP, men alle disse er du

100
00:04:45,890 --> 00:04:46,930
kjent med nå.

101
00:04:46,930 --> 00:04:49,900
Og på samme måte med sløyfer er
de gamle favoritter av mens,

102
00:04:49,900 --> 00:04:52,700
gjøre mens, og for fortsatt tilgjengelig for oss.

103
00:04:52,700 --> 00:04:55,880
Så allerede vet vi mye av den
grunnleggende Javascript slags grunnleggende

104
00:04:55,880 --> 00:05:01,800
bare i kraft av å ha ganske mye
av kunnskap nå om C og PHP.

105
00:05:01,800 --> 00:05:03,670
>> Hva med funksjoner i Javascript?

106
00:05:03,670 --> 00:05:08,199
Vel, i likhet med PHP hver funksjon er
introdusert med funksjonen søkeordet.

107
00:05:08,199 --> 00:05:10,740
Du sier funksjon, og deretter
begynner å definere din funksjon.

108
00:05:10,740 --> 00:05:12,531
Hva er litt annerledes
om Javascript,

109
00:05:12,531 --> 00:05:15,700
om er muligheten til å ha
det som kalles en anonym funksjon.

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

111
00:05:18,880 --> 00:05:21,222
Dette er noe vi
egentlig ikke har sett før.

112
00:05:21,222 --> 00:05:23,430
Vi vil virkelig bruke begrepet
av en anonym funksjon

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

114
00:05:27,880 --> 00:05:31,530
gjøre litt mer fornuftig i sammenheng
når vi ser det i en bestemt situasjon

115
00:05:31,530 --> 00:05:33,120
som jeg har laget her.

116
00:05:33,120 --> 00:05:35,710
Men la oss bare ta en titt
på hva en enkel Javascript

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

118
00:05:37,850 --> 00:05:40,610
>> Så jeg har gått foran og
åpnet opp min CS50 IDE

119
00:05:40,610 --> 00:05:43,690
og jeg har allerede kjørt Apache
å starte min server kjører.

120
00:05:43,690 --> 00:05:46,800
Og jeg har på dette bildet
åpne kalt Home.html.

121
00:05:46,800 --> 00:05:48,330
Og jeg skal zoome inn litt her.

122
00:05:48,330 --> 00:05:52,090
Og i utgangspunktet, kan du se
Home.html er bare en haug med knapper.

123
00:05:52,090 --> 00:05:55,291
Og jeg hevde på toppen her
at dette er den Script seksjon

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

125
00:05:55,790 --> 00:05:59,490
Så det er en haug med knapper her,
men hva gjør disse knappene egentlig gjøre?

126
00:05:59,490 --> 00:06:03,662
>> Vel, vi hodet over til min IED,
og jeg har Home.html åpne her.

127
00:06:03,662 --> 00:06:05,620
Helt i begynnelsen,
her er der jeg knytte

128
00:06:05,620 --> 00:06:07,500
i alle mine Javascript kildefilene.

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

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

131
00:06:12,440 --> 00:06:14,440
av skriptmerket til å lenke i filen.

132
00:06:14,440 --> 00:06:18,660
Så jeg har ikke skrevet noen
Javascript direkte inn i denne filen,

133
00:06:18,660 --> 00:06:21,790
men jeg har trukket i alle
Java jeg har skrevet separat.

134
00:06:21,790 --> 00:06:24,540
Og hvis vi bla nedover her, dette
bør alle ser litt kjent

135
00:06:24,540 --> 00:06:27,090
med en liten bit av ny syntaks.

136
00:06:27,090 --> 00:06:32,655
Vi har her overskriften koden for
funksjoner og deretter en knapp.

137
00:06:32,655 --> 00:06:35,530
Jeg har en inngang som er en type knapp,
og tilsynelatende når jeg klikker på den,

138
00:06:35,530 --> 00:06:38,130
Jeg kommer til å ringe noen
fungere varsling dato.

139
00:06:38,130 --> 00:06:41,792
Og dette er hvordan vi kan liksom blande opp
en liten bit av Javascript og HTML.

140
00:06:41,792 --> 00:06:44,500
De faktisk spiller ganske pent
sammen, og så tilsynelatende når

141
00:06:44,500 --> 00:06:48,730
Jeg klikker på denne knappen, kommer jeg til
å kalle noen funksjon varsling dato.

142
00:06:48,730 --> 00:06:53,660
Og på samme måte har jeg definert atferd
for alle de andre knapper som

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

144
00:06:56,440 --> 00:06:59,172
i løpet av dette video.

145
00:06:59,172 --> 00:07:00,880
Men la oss gå tilbake opp
her og ta en titt

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 at har denne første funksjonen
vi kommer til å ta en titt på.

148
00:07:07,370 --> 00:07:11,630
Som du kan se, begynner jeg min Script
fungere med nøkkelordet funksjon,

149
00:07:11,630 --> 00:07:14,560
og jeg har gitt denne en
navn, det heter varsling dato.

150
00:07:14,560 --> 00:07:18,710
Innsiden av det, jeg tydeligvis skape en
ny lokal variabel kalt gjeldende dato.

151
00:07:18,710 --> 00:07:21,500
Og jeg kommer til å tildele
en lik til en ny dato.

152
00:07:21,500 --> 00:07:24,430
Og vi kunne få inn en masse
detalj om hva en dato er,

153
00:07:24,430 --> 00:07:27,060
og virkelig Javascript er så
stor at vi ikke kan muligens

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

155
00:07:28,330 --> 00:07:32,220
Men nok det å si, dette kommer
å komme tilbake til meg data som

156
00:07:32,220 --> 00:07:35,470
innkapsler gjeldende dato og klokkeslett.

157
00:07:35,470 --> 00:07:39,100
Jeg lagre det i en variabel som jeg er
tilsynelatende kommer til å varsle gjeldende dato.

158
00:07:39,100 --> 00:07:41,300
>> Vel, hva gjør varsling
gjeldende dato ser ut?

159
00:07:41,300 --> 00:07:46,460
La oss ta en titt på selve filen
tilbake over i nettleservinduet.

160
00:07:46,460 --> 00:07:49,551
Så igjen, dette er den knappen som jeg
har knyttet til, denne heter funksjonen.

161
00:07:49,551 --> 00:07:51,800
Og jeg klikker det der og
se hva den gjorde, det varslet.

162
00:07:51,800 --> 00:07:56,140
Det dukket opp denne typen boksen forteller
meg at det nåværende tidspunkt er, tilsynelatende

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 det igjen, nå
det er noen få sekunder senere, ikke sant?

165
00:08:02,345 --> 00:08:03,720
Så det er all denne funksjonen gjør.

166
00:08:03,720 --> 00:08:07,670
Når jeg klikker på denne knappen, den
dukker opp en varselmelding til meg.

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

168
00:08:13,806 --> 00:08:15,690
Så det er egentlig ikke
for mye til funksjoner

169
00:08:15,690 --> 00:08:19,110
som er forskjellig fra PHP,
bare en liten bit av ny syntaks

170
00:08:19,110 --> 00:08:22,500
som følger med å arbeide med Javascript.

171
00:08:22,500 --> 00:08:24,650
>> Arrays i Javascript er
ganske grei.

172
00:08:24,650 --> 00:08:27,200
Å erklære en matrise, bruker du
den hakeparentes syntaks

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

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

175
00:08:33,432 --> 00:08:35,140
Så dette array, både
av 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 som er alle heltall, og en som
er blandet opp forskjellige datatyper.

178
00:08:42,500 --> 00:08:45,020
>> Hva er noe helt annet
i Javascript, skjønt?

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å kanskje du har hørt om
objektorientert programmering.

181
00:08:50,240 --> 00:08:53,370
Vi gjør ikke mye av det i CS50,
men vi vil gjøre en liten bit av det

182
00:08:53,370 --> 00:08:55,670
her i sammenheng med Javascript.

183
00:08:55,670 --> 00:08:59,100
Nå Java har evnen til å
oppfører seg som et objektorientert programmerings

184
00:08:59,100 --> 00:09:02,615
språk, men det er ikke i seg selv
utelukkende et objektorientert

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

186
00:09:03,490 --> 00:09:05,281
Og dette igjen kommer
tilbake til hvorfor jeg sa det

187
00:09:05,281 --> 00:09:10,610
kan være svært utfordrende å lære
Javascript som første programmerings

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

189
00:09:13,890 --> 00:09:16,430
>> C på den annen side er en
funksjonelle programmeringsspråk.

190
00:09:16,430 --> 00:09:22,270
Hvis vi vil, funksjoner er
liksom den store sjefen mann, ikke sant?

191
00:09:22,270 --> 00:09:24,410
De diktere hva
skjer alt annet.

192
00:09:24,410 --> 00:09:26,600
Vi ønsker å endre variabler,
vi kaller funksjoner.

193
00:09:26,600 --> 00:09:28,220
Vi gjør ting til funksjoner.

194
00:09:28,220 --> 00:09:31,250
Objekter i stedet, i en
objektorientert språk,

195
00:09:31,250 --> 00:09:35,937
objekter liksom blitt stjernen og
funksjoner blir liksom sekundært.

196
00:09:35,937 --> 00:09:38,270
Men hva er et objekt, hva
er denne oppfatningen av et objekt?

197
00:09:38,270 --> 00:09:40,880
Vel, hvis det hjelper, tror
om det først sorter

198
00:09:40,880 --> 00:09:44,540
som 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, inneholder en struktur
en rekke felter,

200
00:09:47,430 --> 00:09:51,174
og kanskje vi nå kan begynne å
kaller disse felt egenskaper.

201
00:09:51,174 --> 00:09:53,590
Men egenskapene egentlig aldri
stå på egne, ikke sant?

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

203
00:09:56,410 --> 00:10:00,750
felt eller egenskaper, en an
heltall for året på bilen

204
00:10:00,750 --> 00:10:04,290
og en annen 10 tegn
string for modellen av bilen,

205
00:10:04,290 --> 00:10:07,150
Jeg kan si noe sånt som dette,
Jeg kan erklære en ny variabel

206
00:10:07,150 --> 00:10:10,080
av type struct bilen Herbie.

207
00:10:10,080 --> 00:10:13,730
Og så kan jeg si noe
som herbie.year lik 1963,

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

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

210
00:10:17,000 --> 00:10:19,680
Jeg bruker feltene i
forbindelse av strukturen,

211
00:10:19,680 --> 00:10:22,290
men jeg kunne aldri bare
si noe sånt som dette.

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

213
00:10:22,790 --> 00:10:26,836
Jeg kan ikke bruke navnet felt
uavhengig av strukturen.

214
00:10:26,836 --> 00:10:28,210
Det er liksom en fundamental ting.

215
00:10:28,210 --> 00:10:32,990
>> Så felt blir
grunnleggende for C strukturer

216
00:10:32,990 --> 00:10:39,050
er svært like egenskaper som
grunnleggende for Javascript objekter.

217
00:10:39,050 --> 00:10:42,080
Men hva gjør dem
spesielt interessant

218
00:10:42,080 --> 00:10:46,230
er at objekter kan også ha det
kalles metoder, som er virkelig

219
00:10:46,230 --> 00:10:50,730
bare et fancy ord for funksjoner som
er iboende til objektet i tillegg.

220
00:10:50,730 --> 00:10:55,340
Så det er en funksjon som bare kan være
heter i sammenheng med en gjenstand.

221
00:10:55,340 --> 00:10:59,200
Bare et objekt som har definert
denne funksjonen inne i sin,

222
00:10:59,200 --> 00:11:02,020
hvis du tenker på en
struct, funksjonen

223
00:11:02,020 --> 00:11:05,720
defineres innenfor de definerer
klammeparentes av strukturen.

224
00:11:05,720 --> 00:11:07,980
Så det betyr bare noe
til strukturen.

225
00:11:07,980 --> 00:11:10,960
Og det er liksom det vi gjør
her med objekter og metoder.

226
00:11:10,960 --> 00:11:13,580
Det er i utgangspunktet som vi er
å definere en funksjon som

227
00:11:13,580 --> 00:11:16,670
bare fornuftig på en
bestemt objekt, og så vi

228
00:11:16,670 --> 00:11:19,440
kalle det en fremgangsmåte av objektet.

229
00:11:19,440 --> 00:11:23,180
Og vi kan aldri kalle det
funksjon uavhengig av objektet,

230
00:11:23,180 --> 00:11:29,260
akkurat som vi ikke kan si år eller modell
uavhengig av struct i C.

231
00:11:29,260 --> 00:11:32,300
>> Så funksjonell programmering
paradigmer se omtrent slik ut.

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

233
00:11:35,450 --> 00:11:38,650
I et objektorientert programmerings
språk, denne typen får

234
00:11:38,650 --> 00:11:43,464
snudd, og vi ville tenke på
det liker dette, object.function.

235
00:11:43,464 --> 00:11:45,380
Så det liksom at dot
operatør igjen antyde

236
00:11:45,380 --> 00:11:49,540
at det er noen form for eiendom
eller egenskap av selve objektet.

237
00:11:49,540 --> 00:11:53,240
Men dette er hva et objekt
orientert programmeringsspråk

238
00:11:53,240 --> 00:11:57,150
kan gjøre for å gjøre en funksjon
kalle på en metode, igjen, som

239
00:11:57,150 --> 00:12:00,260
er bare et spesielt ord for en funksjon
som er iboende i et objekt.

240
00:12:00,260 --> 00:12:03,440
Dette er hva som
syntaks kan se ut.

241
00:12:03,440 --> 00:12:09,360
Og så vil vi begynne å se noen av
dette i sammenheng med Javascript.

242
00:12:09,360 --> 00:12:12,470
>> Du kan også tenke på et objekt
liksom som en assosiativ array,

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

244
00:12:14,160 --> 00:12:17,720
Husk en assosiativ array tillater
oss å ha sentrale verdi-par, i stedet

245
00:12:17,720 --> 00:12:23,040
av å ha 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
Assosiative arrays kan kartlegge
ord, slik som i PHP video,

248
00:12:27,472 --> 00:12:29,180
vi snakket om
påfyll av pizza.

249
00:12:29,180 --> 00:12:31,180
Og så hadde vi en matrise
kalt pizza, og vi

250
00:12:31,180 --> 00:12:36,670
hadde ost var en nøkkel og $ 8,99 var
verdi, og deretter pepperoni var en nøkkel,

251
00:12:36,670 --> 00:12:39,190
$ 9,99 var en verdi, og så videre.

252
00:12:39,190 --> 00:12:43,300
Og så kan vi også tenke på en
objekt slags ligner en assosiativ

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

254
00:12:43,840 --> 00:12:47,020
Og så denne syntaksen her
ville skape et nytt objekt

255
00:12:47,020 --> 00:12:50,950
heter Herbie med to-
egenskaper innsiden av det.

256
00:12:50,950 --> 00:12:57,310
År, noe som er tildelt verdien 1963,
og modell, som er tilordnet strengen

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

258
00:12:58,140 --> 00:13:01,770
>> Og legg merke til her at jeg bruker
apostrof i Javascript.

259
00:13:01,770 --> 00:13:05,570
Du kan bruke enkle eller doble anførselstegn
når du snakker om strenger.

260
00:13:05,570 --> 00:13:07,772
Det er bare konvensjonelt
slik at de fleste ganger

261
00:13:07,772 --> 00:13:10,230
når du skriver Javascript,
du bare bruke enkle anførselstegn.

262
00:13:10,230 --> 00:13:15,050
Men jeg kunne bruke anførselstegn her, og
som ville være helt greit også.

263
00:13:15,050 --> 00:13:17,470
>> Så husker hvordan i
PHP vi hadde denne oppfatningen

264
00:13:17,470 --> 00:13:22,730
en for hver sløyfe som ville tillate oss
å iterere over alle knappe verdi

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

266
00:13:25,270 --> 00:13:29,050
ikke har denne evnen til å reagere
gjennom 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 noe veldig likt,
men det er ikke kalt en for hver sløyfe,

269
00:13:35,010 --> 00:13:38,960
det kalles en for i sløyfer.

270
00:13:38,960 --> 00:13:42,890
Så hvis jeg sa til meg som
dette, for Var nøkkelen i objektet,

271
00:13:42,890 --> 00:13:48,670
det er liksom lik si
for hvert noe som noe.

272
00:13:48,670 --> 00:13:53,850
Men alt jeg gjør her er itera
gjennom alle nøklene til mitt formål.

273
00:13:53,850 --> 00:13:56,070
Og innsiden av krøllete
seler der, ville jeg

274
00:13:56,070 --> 00:14:03,410
bruker objekt klammer nøkkelen til å referere
til verdien på den tasten stedet.

275
00:14:03,410 --> 00:14:05,400
>> Alternativt, det er
enda en annen tilnærming.

276
00:14:05,400 --> 00:14:10,880
Hvis jeg bare bare bryr seg om
verdier, kan jeg si for nøkkelen objekt,

277
00:14:10,880 --> 00:14:12,360
og bare bruke tasten inne.

278
00:14:12,360 --> 00:14:17,240
Så for Var nøkkelen i objektet, har jeg
å bruke objekt klammer

279
00:14:17,240 --> 00:14:19,340
tast innenfor sløyfen.

280
00:14:19,340 --> 00:14:24,580
For Var nøkkelen objekt, kan jeg
bare bruke tasten inne i loop,

281
00:14:24,580 --> 00:14:29,040
fordi jeg er bare spesifikt
snakker om verdiene der.

282
00:14:29,040 --> 00:14:32,630
>> Så la oss kanskje ta en
se på forskjellen

283
00:14:32,630 --> 00:14:35,670
bare for å raskt vise deg
forskjellen mellom fire

284
00:14:35,670 --> 00:14:40,730
i og for sammen med en meget spesifikk
array, som vi har her, uke array.

285
00:14:40,730 --> 00:14:43,616
Så jeg må finne en ny matrise
at jeg fylt med syv strenger,

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 ønsker å nå iterere
gjennom denne array,

288
00:14:50,530 --> 00:14:53,090
skrive ut visse opplysninger.

289
00:14:53,090 --> 00:14:58,780
Hvis jeg bruker en for i sløyfe
å skrive ut informasjon,

290
00:14:58,780 --> 00:15:00,710
hva tror du jeg kommer til å få?

291
00:15:00,710 --> 00:15:01,710
Vel, la oss ta en titt.

292
00:15:01,710 --> 00:15:05,300
Og før vi hoppe over
til min nettleservindu,

293
00:15:05,300 --> 00:15:08,090
bare vet at
console.log er liksom én

294
00:15:08,090 --> 00:15:10,630
måte å gjøre en utskrifts F i Javascript.

295
00:15:10,630 --> 00:15:12,040
Men hva er den konsollen?

296
00:15:12,040 --> 00:15:14,940
Vel, det er det vi skal
å gå ta en titt på akkurat nå.

297
00:15:14,940 --> 00:15:16,850
>> OK, så vi er tilbake her
i min nettleservindu,

298
00:15:16,850 --> 00:15:19,410
og jeg kommer til å åpne
opp min utviklerverktøy.

299
00:15:19,410 --> 00:15:22,290
Igjen, jeg bare trykke F12
å åpne opp utviklerverktøy.

300
00:15:22,290 --> 00:15:25,670
Og legg merke til at her på
Toppen jeg har valgt konsollen.

301
00:15:25,670 --> 00:15:28,480
Så dette er oppfatningen
av en utvikler konsoll,

302
00:15:28,480 --> 00:15:30,500
og det vil gi oss mulighet til å
skrive ut informasjon ut,

303
00:15:30,500 --> 00:15:33,000
liksom som terminalen, men
som du vil se litt senere,

304
00:15:33,000 --> 00:15:37,720
Vi kan også skrive informasjon i
å samhandle med vår nettside.

305
00:15:37,720 --> 00:15:42,320
Jeg kommer til å zoome inn litt her,
og jeg skal nå klikke på for i testen.

306
00:15:42,320 --> 00:15:45,230
Og fire i test-- Jeg skal ikke
vise deg koden for det akkurat nå,

307
00:15:45,230 --> 00:15:47,479
men du får det hvis du
laste ned kildekoden som

308
00:15:47,479 --> 00:15:50,380
er assosiert med denne video--
er bare at for i sløyfe

309
00:15:50,380 --> 00:15:52,610
som vi så bare en
andre siden på lysbildet.

310
00:15:52,610 --> 00:15:54,810
>> Så jeg skal klikk som
knappen, og over her,

311
00:15:54,810 --> 00:15:58,440
her er det som har skrevet ut i
konsoll, 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 ble ikke skrevet ut ut informasjon
inni disse array-steder,

314
00:16:02,490 --> 00:16:05,180
fordi jeg brukte en for i loop.

315
00:16:05,180 --> 00:16:10,670
Og inne i kroppen av sløyfen, I
bare skrives ut nøkkelen ikke motsette nøkkelen.

316
00:16:10,670 --> 00:16:18,600
Men hvis jeg nå fjerne min konsoll, og jeg
bytte til for test, og fire av test

317
00:16:18,600 --> 00:16:22,500
Sier jeg at jeg bruker for av sløyfe
stedet og skrive ut nøkkel,

318
00:16:22,500 --> 00:16:28,079
hvis jeg klikker det, nå får jeg den
faktiske elementer inne i mitt objekt

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

320
00:16:29,120 --> 00:16:31,760
Mitt utvalg av ukedager.

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

322
00:16:33,480 --> 00:16:36,930
Så det er forskjellen mellom
en for i løkke, som skriver ut

323
00:16:36,930 --> 00:16:43,410
bare nøklene hvis du bare bruker nøkkelen
på innsiden av kroppen til sløyfen,

324
00:16:43,410 --> 00:16:46,850
og en for loop, som skriver
ut verdiene hvis du bruker bare

325
00:16:46,850 --> 00:16:48,870
nøkkelen inne i kroppen av løkken.

326
00:16:48,870 --> 00:16:52,380
>> Greit, hvordan kan vi nå begynne å
sette sammen strenger og kanskje blande

327
00:16:52,380 --> 00:16:57,220
noen variabler med interpole
at vi var i stand til å gjøre i PHP?

328
00:16:57,220 --> 00:16:59,410
Vel, vi er ganske kjent
med dette fra PHP.

329
00:16:59,410 --> 00:17:04,109
Dette er hvordan vi ville gjøre det ved hjelp av
dot operatøren å sette sammen strenger.

330
00:17:04,109 --> 00:17:06,260
I Javascript, skjønt,
vi faktisk bruke noe

331
00:17:06,260 --> 00:17:09,290
kalt pluss operatøren, som
er kanskje enda litt mer

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

333
00:17:10,470 --> 00:17:12,609
Vi legger en haug
strenger sammen.

334
00:17:12,609 --> 00:17:14,520
Så la oss dra tilbake
over og se hva dette

335
00:17:14,520 --> 00:17:18,693
vil skrive ut hvis vi prøver å skrive ut
all informasjon i uken array.

336
00:17:18,693 --> 00:17:20,859
Greit, så under her
etter streng sammensetning,

337
00:17:20,859 --> 00:17:24,822
Jeg har to alternativer, string bygning
V1 og deretter streng bygning V2.

338
00:17:24,822 --> 00:17:26,530
Og vi vil se hvorfor vi
trenger V2 i et sekund.

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

340
00:17:28,610 --> 00:17:30,360
er koden vi var
bare å ta en titt på,

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

342
00:17:32,980 --> 00:17:35,910
La oss se om dette utskrifter
ut hva vi kan forvente.

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

344
00:17:39,939 --> 00:17:41,730
Vel, det jeg prøvde
å gjøre det var få

345
00:17:41,730 --> 00:17:46,280
det å skrive ut mandag er dag nummer
en, er tirsdag dag nummer to.

346
00:17:46,280 --> 00:17:50,140
Men det virker som jeg er
alltid å skrive ut en.

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

348
00:17:51,260 --> 00:17:55,600
Vel, det viser seg, ta en ny titt
på denne lille kodebiten her.

349
00:17:55,600 --> 00:18:00,160
Legg merke til at vi bruker pluss
Operatøren i to forskjellige sammenhenger.

350
00:18:00,160 --> 00:18:03,221
>> Og så her er der kanskje ting
som vi har på en måte vært å si,

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

352
00:18:03,970 --> 00:18:05,910
Vi trenger ikke forholde seg til datatyper lenger.

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

354
00:18:08,220 --> 00:18:10,960
faktisk kan være litt
av et problem for oss.

355
00:18:10,960 --> 00:18:16,260
Nå som pluss-operatoren blir brukt til å
sette sammen strenger og legge sammen tall

356
00:18:16,260 --> 00:18:19,550
sammen, har Javascript
å gjøre sitt beste gjetning

357
00:18:19,550 --> 00:18:22,030
om hva jeg vil den skal gjøre for meg.

358
00:18:22,030 --> 00:18:23,900
Og i dette tilfellet, det gjettet feil.

359
00:18:23,900 --> 00:18:29,340
Det bare sammensatt dag, noe som ville bli
0, en, to, tre, fire, fem eller seks,

360
00:18:29,340 --> 00:18:32,060
og da er det bare sammenkjedet
det og deretter sammenkjedet en.

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

362
00:18:35,020 --> 00:18:37,320
Og så disse språkene,
PHP og Javascript,

363
00:18:37,320 --> 00:18:39,196
som abstraherer vekk
denne oppfatningen av typer,

364
00:18:39,196 --> 00:18:40,820
du trenger ikke å forholde seg til det lenger.

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

366
00:18:43,600 --> 00:18:46,780
Og vi kan, i situasjoner
som dette, utnytte det faktum

367
00:18:46,780 --> 00:18:49,240
ved å si noe
som kanskje dette som

368
00:18:49,240 --> 00:18:53,210
forteller Javascript, ved
måte, behandle dette som et heltall,

369
00:18:53,210 --> 00:18:57,100
ikke behandle den som en streng, selv
selv om vi blander sammen strenger

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

371
00:18:58,940 --> 00:19:02,204
>> Det er bare en av de tingene
at det virker så bra i sammenheng

372
00:19:02,204 --> 00:19:04,120
at vi ikke trenger å
håndtere typer lenger,

373
00:19:04,120 --> 00:19:05,828
men noen ganger vil du
kjøre inn i en situasjon

374
00:19:05,828 --> 00:19:09,110
akkurat som dette, hvor det faktum at
du har ikke kontroll over typer

375
00:19:09,110 --> 00:19:11,220
kan slå tilbake på deg
hvis du ikke er forsiktig.

376
00:19:11,220 --> 00:19:18,285
Og så hvis vi komme tilbake over til IDE, jeg
kommer til å tømme ut min konsoll igjen,

377
00:19:18,285 --> 00:19:20,660
og jeg kommer til å klikke string
bygning versjon to, hvilke

378
00:19:20,660 --> 00:19:23,052
er der jeg bruker det parse int funksjon.

379
00:19:23,052 --> 00:19:25,260
Nå er det å skrive ut
informasjon som jeg forventer.

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

381
00:19:29,330 --> 00:19:31,170
>> Så la oss snakke om funksjoner igjen.

382
00:19:31,170 --> 00:19:34,790
Jeg lovet at vi ville snakke om anonym
funksjoner, og nå konteksten for at

383
00:19:34,790 --> 00:19:36,360
har endelig kommet.

384
00:19:36,360 --> 00:19:39,980
Så før vi gjør det, la oss snakke igjen
om arrays for bare et sekund.

385
00:19:39,980 --> 00:19:42,120
Så arrays er en spesiell
tilfelle av 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å funksjoner er en
spesielt tilfelle av et objekt,

388
00:19:47,190 --> 00:19:49,770
heltall er en spesiell
tilfelle av en gjenstand,

389
00:19:49,770 --> 00:19:52,152
men arrays spesifikt
har en rekke metoder.

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

391
00:19:55,110 --> 00:19:58,600
De har en rekke metoder som
kan anvendes på disse stedene.

392
00:19:58,600 --> 00:20:01,197
Det er en metode som kalles
størrelse, array.size,

393
00:20:01,197 --> 00:20:03,030
som vil returnere til
du som du kan forvente

394
00:20:03,030 --> 00:20:05,120
antall elementer i matrisen.

395
00:20:05,120 --> 00:20:08,480
array.pop, liksom som
vår oppfatningen av dukker av

396
00:20:08,480 --> 00:20:11,110
av en stabel, hvis du husker
fra vår stabler video,

397
00:20:11,110 --> 00:20:13,810
fjerner det siste elementet fra matrisen.

398
00:20:13,810 --> 00:20:17,110
Array.push tilfører et nytt element
til enden av en matrise.

399
00:20:17,110 --> 00:20:20,910
array.shift er liksom
som DQ, skjøter det ut

400
00:20:20,910 --> 00:20:23,610
det første element av en matrise.

401
00:20:23,610 --> 00:20:27,549
>> Men det er også en annen spesiell
Fremgangsmåten i en matrise som kalles kartet.

402
00:20:27,549 --> 00:20:29,340
Og dette er liksom en
interessant konsept.

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

404
00:20:30,930 --> 00:20:33,880
Du vil faktisk se dette
i flere andre språk,

405
00:20:33,880 --> 00:20:38,550
og vi snakker ikke om en
slags cartographers kart her,

406
00:20:38,550 --> 00:20:41,480
vi snakker om en kartlegging funksjon.

407
00:20:41,480 --> 00:20:44,110
I sammenheng er vi
snakker om her, et kart

408
00:20:44,110 --> 00:20:47,950
er en spesiell operasjon vi
kan utføre på en matrise

409
00:20:47,950 --> 00:20:51,630
å bruke en bestemt funksjon
til hvert element i den oppstillingen.

410
00:20:51,630 --> 00:20:55,190
og så vi vil si i
dette tilfelle kanskje array.map,

411
00:20:55,190 --> 00:21:00,330
og innsiden av det, vi passerer
inn i kartet er en funksjon som vi ønsker

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

413
00:21:02,430 --> 00:21:07,299
Så det er liksom analog til hjelp
en løkke for å iterere over hvert element

414
00:21:07,299 --> 00:21:09,340
og bruke en bestemt
fungere til hvert element,

415
00:21:09,340 --> 00:21:14,830
bare Javascript har dette innebygget
oppfatningen av en kartlegging som kan brukes.

416
00:21:14,830 --> 00:21:19,700
Og dette er en stor sammenheng til
snakke om en anonym funksjon.

417
00:21:19,700 --> 00:21:22,370
>> Så la oss si at vi har
Denne rekken av heltall.

418
00:21:22,370 --> 00:21:25,370
Det kalles nums, og det har five
ting i det, en, to, tre, fire,

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

420
00:21:26,410 --> 00:21:30,620
Nå ønsker jeg å kartlegge noen
Funksjonen på denne matrisen.

421
00:21:30,620 --> 00:21:34,337
Jeg ønsker å ha en funksjon gjelder
til hvert element i matrisen.

422
00:21:34,337 --> 00:21:37,420
Vel, la oss si at det jeg ønsker å
gjøre er å doble alle elementene.

423
00:21:37,420 --> 00:21:42,520
Hva jeg kunne gjøre er å bare bruke en løkke
for Var jeg er lik 0, er jeg mindre enn

424
00:21:42,520 --> 00:21:47,390
eller lik 4, jeg pluss, pluss, og
deretter doble hvert enkelt nummer.

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

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

427
00:21:53,420 --> 00:21:58,310
nå, men jeg vil gjerne at du skal
gjelde en kartlegging på denne matrisen

428
00:21:58,310 --> 00:22:00,400
hvor jeg vil ha deg
å doble hvert nummer.

429
00:22:00,400 --> 00:22:02,540
Og det er akkurat
hva som skjer her.

430
00:22:02,540 --> 00:22:06,870
Men legg merke til hva jeg har bestått
inn som argument for å kartlegge.

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

432
00:22:09,080 --> 00:22:11,140
Og merker jeg ikke har gitt
denne funksjonen et navn,

433
00:22:11,140 --> 00:22:13,290
Jeg har bare gitt det en parameter liste.

434
00:22:13,290 --> 00:22:16,370
Og slik at dette er et eksempel
av en anonym funksjon.

435
00:22:16,370 --> 00:22:21,270
>> Vi vanligvis ville aldri kalle dette
funksjon utenfor rammen av kartet.

436
00:22:21,270 --> 00:22:24,110
Vi definerer det som et parameter
å kartlegge, og slik at vi ikke egentlig

437
00:22:24,110 --> 00:22:27,910
må ha et navn på det hvis det
eneste som bryr seg om er kartet

438
00:22:27,910 --> 00:22:30,339
og det er definert riktig
der innsiden av kartet.

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

440
00:22:31,880 --> 00:22:34,680
Vi har ikke vært i stand
for å gjøre dette tidligere.

441
00:22:34,680 --> 00:22:38,400
Kart noen funksjon som
aksepterer en parameter, num,

442
00:22:38,400 --> 00:22:41,890
og hva som funksjon gjør
er avkastningen NUM ganger 2.

443
00:22:41,890 --> 00:22:45,330
Og så etter dette
kartlegging har blitt anvendt,

444
00:22:45,330 --> 00:22:50,090
dette er nå hva nums utseende
like, to, fire, seks, åtte, ti.

445
00:22:50,090 --> 00:22:52,090
Og vi vil komme over til min
nettleservinduet og bare

446
00:22:52,090 --> 00:22:55,240
ta en titt på denne
veldig raskt også.

447
00:22:55,240 --> 00:22:58,000
>> Så jeg har en annen knapp her
i mitt hjem side som heter dobbel.

448
00:22:58,000 --> 00:23:03,570
Og når jeg klikker dobbel, og den forteller
meg før det var ett, to, tre, fire,

449
00:23:03,570 --> 00:23:07,250
fem etter to, fire, seks, åtte, ti.

450
00:23:07,250 --> 00:23:11,930
Og hvis jeg går tilbake og klikk dobbel
igjen, to, fire, seks, åtte, ti.

451
00:23:11,930 --> 00:23:17,400
Og så etter, fire,
åtte, 12, 16, og deretter 20.

452
00:23:17,400 --> 00:23:20,440
Og hva gjør jeg i denne funksjonen?

453
00:23:20,440 --> 00:23:25,210
Vel, hvis vi bare pop over til IDE, og
Jeg trekker opp min anonym funksjon, her

454
00:23:25,210 --> 00:23:28,780
på linje sju til 13, jeg er
gjøre litt fancy jobb her,

455
00:23:28,780 --> 00:23:32,240
men jeg bare skriver ut
hva er for tiden i rekken.

456
00:23:32,240 --> 00:23:36,580
Deretter på linje 16, 17,
og 18, det er kartet mitt.

457
00:23:36,580 --> 00:23:40,930
Det er der jeg søker denne fordoblingen
Funksjonen til hvert enkelt element.

458
00:23:40,930 --> 00:23:43,530
Og så litt lenger ned,
Jeg bare gjør det samme

459
00:23:43,530 --> 00:23:46,640
Jeg gjorde før, bortsett fra nå er jeg
skrive ut innholdet i matrisen

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

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

462
00:23:50,500 --> 00:23:53,640
å kartlegge over en hel rekke.

463
00:23:53,640 --> 00:23:58,466
>> Så en mer stort tema å snakke om i
Javascript er forestillingen om en hendelse.

464
00:23:58,466 --> 00:24:01,590
En hendelse er noe som bare skjer
når en bruker samhandler med web

465
00:24:01,590 --> 00:24:04,715
side, så kanskje de klikker noe,
eller kanskje siden er ferdig lastet,

466
00:24:04,715 --> 00:24:07,200
eller kanskje de har flyttet
musen over noe,

467
00:24:07,200 --> 00:24:09,290
eller de har skrevet noe
i et inntastingsfelt.

468
00:24:09,290 --> 00:24:14,260
Alle disse tingene er hendelser
som skjer på vår nettside.

469
00:24:14,260 --> 00:24:17,460
Og Javascript har
mulighet til å støtte noe

470
00:24:17,460 --> 00:24:21,760
kalt en hendelseshåndterer, som
er en tilbakeringingsfunksjon som

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

472
00:24:23,329 --> 00:24:24,620
Og hva er en tilbakeringingsfunksjonen?

473
00:24:24,620 --> 00:24:27,328
Vel, det er som regel bare en annen
nevne for en anonym funksjon.

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

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

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

477
00:24:38,060 --> 00:24:41,420
De fleste HTML-elementer har
støtte for et attributt

478
00:24:41,420 --> 00:24:45,170
at vi ikke snakker om i html
video for noe sånt på klikk

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

480
00:24:50,540 --> 00:24:53,120
at du da kan skrive funksjoner
som omhandler disse hendelsene

481
00:24:53,120 --> 00:24:56,090
når disse hendelsene
oppstå på nettsiden din.

482
00:24:56,090 --> 00:24:59,170
>> Og så kanskje din html
ser omtrent slik ut.

483
00:24:59,170 --> 00:25:02,240
Og jeg har to knapper her,
knappen én og knapp to,

484
00:25:02,240 --> 00:25:04,620
og her har jeg i dag
definert ingenting,

485
00:25:04,620 --> 00:25:11,170
men dette er hvor attributtet på
klikk er tydeligvis en del av min html tag.

486
00:25:11,170 --> 00:25:15,220
Så tilsynelatende når jeg definere hva som er
går på innsiden av det attributt,

487
00:25:15,220 --> 00:25:18,590
det kommer til å være litt Javascript
funksjon som svarer til arrangementet

488
00:25:18,590 --> 00:25:24,360
formodentlig for å klikke på
knappen én eller knapp to.

489
00:25:24,360 --> 00:25:28,580
>> Hva er slags kult om dette er vi
kan skrive en generisk hendelsesbehandling.

490
00:25:28,580 --> 00:25:32,370
Og denne hendelsen Handler vil
opprette en hendelse objekt.

491
00:25:32,370 --> 00:25:37,000
Og arrangementet objektet vil fortelle oss
hvilken av de to knappene ble klikket.

492
00:25:37,000 --> 00:25:38,064
Nå hvordan fungerer det?

493
00:25:38,064 --> 00:25:39,730
Vel, det kan se slik ut.

494
00:25:39,730 --> 00:25:44,860
Så vil vi først definere våre knapper
for å ha en respons på tilbakeringing

495
00:25:44,860 --> 00:25:47,470
funksjon som vil bli kalt
når knappen klikkes,

496
00:25:47,470 --> 00:25:49,520
vi kaller hendelsen varsling navn.

497
00:25:49,520 --> 00:25:53,320
Og legg merke til i begge tilfeller vi er
passerer i denne hendelsen parameter.

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

499
00:25:55,460 --> 00:26:00,330
utløses av hendelse skjer,
det kommer til å lage dette arrangementet objektet

500
00:26:00,330 --> 00:26:03,300
og gi det som en
parameter for å varsle navn.

501
00:26:03,300 --> 00:26:07,270
Og at arrangementet objektet er
kommer til å inneholde informasjon

502
00:26:07,270 --> 00:26:09,800
om hvilken knapp du klikket.

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

504
00:26:11,580 --> 00:26:13,654
Vel, det kan se slik ut.

505
00:26:13,654 --> 00:26:15,570
Så nå i min egen
Javascript-fil, kan jeg

506
00:26:15,570 --> 00:26:17,420
må finne denne
funksjon varsling navn, som

507
00:26:17,420 --> 00:26:19,500
igjen aksepterer at hendelsen parameter.

508
00:26:19,500 --> 00:26:24,640
Og så her er hvor jeg detektere
hvilken knapp ble utløst,

509
00:26:24,640 --> 00:26:28,100
Var trigger lik hendelse
dot source element.

510
00:26:28,100 --> 00:26:33,150
Hva var kilden som skapte
denne hendelsen objekt som ble vedtatt i?

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

512
00:26:36,390 --> 00:26:40,710
>> Og så her alt jeg gjør er
skrive ut trigger.innerhtml.

513
00:26:40,710 --> 00:26:43,860
Brønn, i dette tilfellet, i denne
kontekst, trigger.innerhtml

514
00:26:43,860 --> 00:26:45,940
er akkurat det som står på knappen.

515
00:26:45,940 --> 00:26:48,830
Det bare så skjer hvis vi hopper
tilbake for andre, ville det

516
00:26:48,830 --> 00:26:51,670
være hva som er i mellom disse knappe koder.

517
00:26:51,670 --> 00:26:54,150
Det vil være knapp én eller knapp to.

518
00:26:54,150 --> 00:26:57,320
Og la oss ta en titt på
hvordan dette hendelseshåndterer ville

519
00:26:57,320 --> 00:27:01,080
se om vi hadde det kjører i praksis.

520
00:27:01,080 --> 00:27:03,850
>> Så først av alt, har du
åpnet opp events.js,

521
00:27:03,850 --> 00:27:06,517
som er Javascript-fil der
Jeg har definert denne funksjonen.

522
00:27:06,517 --> 00:27:08,558
Og som du kan se, er det
ganske mye akkurat hva

523
00:27:08,558 --> 00:27:10,230
vi nettopp så på lysbildet en andre siden.

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

525
00:27:14,890 --> 00:27:17,660
Og jeg har her knappen
ett og knapp to.

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

527
00:27:19,820 --> 00:27:23,930
Du klikket på knappen en, hvis du
kan se her i varselet.

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

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

530
00:27:28,980 --> 00:27:32,150
>> Så begge knappene har
samme funksjon samtale, ikke sant?

531
00:27:32,150 --> 00:27:35,840
De begge var våken navn
hendelse, men dette arrangementet objektet

532
00:27:35,840 --> 00:27:41,900
som blir skapt når vi klikker på
det forteller oss hvilken knapp ble klikket.

533
00:27:41,900 --> 00:27:44,650
Vi trengte ikke å skrive to separate
funksjoner eller avtale med har

534
00:27:44,650 --> 00:27:46,470
å passere tilleggsinformasjon.

535
00:27:46,470 --> 00:27:48,220
Vi bare stole på
hva Javascript vil

536
00:27:48,220 --> 00:27:53,772
gjøre for oss, som er å skape det
slags hendelse objekt på våre vegne.

537
00:27:53,772 --> 00:27:56,730
Det er mye mer å Java enn
hva vi har dekket i denne videoen,

538
00:27:56,730 --> 00:27:58,521
men å ha disse
fundamental bør få deg

539
00:27:58,521 --> 00:28:00,690
Ganske lang måter å
lære alt du vil

540
00:28:00,690 --> 00:28:04,030
trenger å vite om dette
interessant språk.

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

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

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