1
00:00:00,000 --> 00:00:02,862
>> [Musik spiller]

2
00:00:02,862 --> 00:00:10,030

3
00:00:10,030 --> 00:00:11,580
>> DAVID MALAN: Dette er CS50.

4
00:00:11,580 --> 00:00:12,880
Dette er starten på uge ni.

5
00:00:12,880 --> 00:00:15,797
Og det er, hvad der ville have
været Mr. Boole 200 års fødselsdag.

6
00:00:15,797 --> 00:00:17,630
Så dette er stipendiaterne
til hvem vi har hentydet

7
00:00:17,630 --> 00:00:21,800
helt nogle gange om brug
Boolean variabler sande og falske,

8
00:00:21,800 --> 00:00:22,910
1 og 0 og sådan.

9
00:00:22,910 --> 00:00:25,270
Og det var Googles
Hyldest til ham i dag.

10
00:00:25,270 --> 00:00:26,489
Han ville have slået 200.

11
00:00:26,489 --> 00:00:28,280
Så hvis du gerne vil
slutte sig til os for CS50 frokost

12
00:00:28,280 --> 00:00:30,279
tage et kig på linket
på kursets hjemmeside.

13
00:00:30,279 --> 00:00:33,580
Og sådanne ansigter og venner som
disse venter dig her i Cambridge.

14
00:00:33,580 --> 00:00:35,360
Ansigter som disse venter dig i New Haven.

15
00:00:35,360 --> 00:00:37,800
Og faktisk, Ken i
New Haven venligt gjort

16
00:00:37,800 --> 00:00:41,594
hvad der kaldes en animeret GIF Eli
her på en nylig lunch-- en GIF er endnu

17
00:00:41,594 --> 00:00:44,260
anden grafisk filformat,
som du er familiar-- at

18
00:00:44,260 --> 00:00:46,300
ser lidt noget som dette.

19
00:00:46,300 --> 00:00:48,179
Så bare en sekvens of-- OK.

20
00:00:48,179 --> 00:00:49,720
Ingen her i Cambridge griner.

21
00:00:49,720 --> 00:00:51,720
Men i New Haven, dette
er virkelig sjovt, ikke?

22
00:00:51,720 --> 00:00:52,350
Okay.

23
00:00:52,350 --> 00:00:53,940
>> Så du slutte sig til os der.

24
00:00:53,940 --> 00:00:55,900
Her på Harvard,
specifikt denne onsdag,

25
00:00:55,900 --> 00:00:59,480
hvis du er en sophomore eller freshman even--
eller endda junior-- tænker på at gøre

26
00:00:59,480 --> 00:01:01,563
en switch i edb
videnskab, ved, at der ll

27
00:01:01,563 --> 00:01:04,440
være en CS rådgive retfærdig dette
Onsdag kort efter klassen

28
00:01:04,440 --> 00:01:08,040
kl 4:00 i computeren
videnskab bygning Maxwell Dworkin.

29
00:01:08,040 --> 00:01:11,890
Vi vil sætte dette på kursets
hjemmeside i morgen, så godt.

30
00:01:11,890 --> 00:01:14,430
Donuts, jeg har fået fortalt, vil blive serveret.

31
00:01:14,430 --> 00:01:15,180
>> Okay.

32
00:01:15,180 --> 00:01:18,790
Så sjovt story-- jeg stikke
rundt på internettet,

33
00:01:18,790 --> 00:01:23,575
og jeg fandt nogle gamle arkiver
af min tidligere hjemmeside.

34
00:01:23,575 --> 00:01:25,950
Og det viser out-- omkring dette
tid, det virker meget rettidig

35
00:01:25,950 --> 00:01:28,910
da jeg har forstået, at valget i UC
er ved at geare op igen.

36
00:01:28,910 --> 00:01:32,230
Så jeg løb for UC, tabte ynkeligt.

37
00:01:32,230 --> 00:01:34,770
Og måske dette var en del hvorfor.

38
00:01:34,770 --> 00:01:37,600
Så dette var min hjemmeside på det tidspunkt.

39
00:01:37,600 --> 00:01:40,477
Af en eller anden grund, jeg troede, det var
en god idé, før fortæller folk

40
00:01:40,477 --> 00:01:43,310
hvad min platform var, og hvorfor de
bør stemme for mig, at de har

41
00:01:43,310 --> 00:01:47,770
til at klikke for at indtaste for at finde ud af, at
oplysninger, som set i bakspejlet er

42
00:01:47,770 --> 00:01:48,660
slags utryg.

43
00:01:48,660 --> 00:01:50,910
Jeg ved ikke rigtig, hvad det var.

44
00:01:50,910 --> 00:01:53,140
>> Men det er bestemt ikke
hjælpe min kampagne.

45
00:01:53,140 --> 00:01:56,874
Jeg fandt også, at af den øverste
year-- Jeg havde denne Muppet kalender.

46
00:01:56,874 --> 00:01:58,540
Muppets var slags på mode dengang.

47
00:01:58,540 --> 00:01:59,456
Eller måske var de ikke.

48
00:01:59,456 --> 00:02:01,790
Jeg havde en Muppet kalender dengang.

49
00:02:01,790 --> 00:02:04,860
Og jeg troede, det ville være cool at navn
min computer på Harvards netværk

50
00:02:04,860 --> 00:02:07,460
frogman.student.harvard.edu.

51
00:02:07,460 --> 00:02:10,370
På det tidspunkt havde vi alle entydigt
værtsnavne identificerbare.

52
00:02:10,370 --> 00:02:13,150
Og kunne du vælge nogle forfængelighed
navn i stedet for dit eget navn.

53
00:02:13,150 --> 00:02:15,580
Og jeg gik med Frogman anden grund.

54
00:02:15,580 --> 00:02:19,040
>> Og så er jeg started-- Jeg brugte en masse
af tid klikke gennem disse links

55
00:02:19,040 --> 00:02:20,280
denne morgen.

56
00:02:20,280 --> 00:02:24,690
Og dette var min om side,
som nu slags synes yndig.

57
00:02:24,690 --> 00:02:28,210
Men det er også vidner til lige
hvor langt teknologien er kommet.

58
00:02:28,210 --> 00:02:30,310
Jeg mener, tilbage i dag,
en 486 var noget.

59
00:02:30,310 --> 00:02:34,090
Disse dage, det er super, super,
super langsom og godt mindre

60
00:02:34,090 --> 00:02:36,216
end du måske har i din
egne lommer i disse dage.

61
00:02:36,216 --> 00:02:38,465
Der er mere om der,
var endnu mere pinligt.

62
00:02:38,465 --> 00:02:39,770
Så jeg vil lade det blive ved det.

63
00:02:39,770 --> 00:02:42,640
Men det var min første
razzia i web-- åh, nej.

64
00:02:42,640 --> 00:02:43,180
Det var ikke.

65
00:02:43,180 --> 00:02:47,000
Min første rigtige strejftog i webprogrammering
var denne hjemmeside, som jeg lige har glemt.

66
00:02:47,000 --> 00:02:50,620
På et tidspunkt, lærte jeg at
gøre gentagne baggrundsbilleder.

67
00:02:50,620 --> 00:02:55,260
Og så jeg fandt denne fliselægning effektive,
Ligesom ishockeyspiller, fodbold og golf

68
00:02:55,260 --> 00:02:58,040
bold, eller hvad der er
for Frosh infrastrukturforvaltere hjemmeside.

69
00:02:58,040 --> 00:03:01,390
Og det var faktisk, virkelig den
første web-baseret projekt, jeg tog on--

70
00:03:01,390 --> 00:03:03,880
Jeg tror måske sophomore
år, junior year--

71
00:03:03,880 --> 00:03:07,622
efter at have taget CS50 og CS51, en
af de fælles opfølgning på klasser.

72
00:03:07,622 --> 00:03:09,330
Jeg har bemærket i leder
gennem arkiverne

73
00:03:09,330 --> 00:03:12,150
at en af ​​mine efterfølgere og
venner, Lee, slags ændret

74
00:03:12,150 --> 00:03:13,480
ophavsretten til sig selv.

75
00:03:13,480 --> 00:03:17,520
Men det var faktisk noget,
Jeg ejer den forlegenhed til.

76
00:03:17,520 --> 00:03:19,370
Men på det tidspunkt, denne
var den første hjemmeside,

77
00:03:19,370 --> 00:03:22,220
som jeg sagde for et par uger siden,
hvorved freshman kunne

78
00:03:22,220 --> 00:03:24,350
tilmelde intramurale sport her.

79
00:03:24,350 --> 00:03:27,950
Og så viser det sig,
at baggrundsbilleder

80
00:03:27,950 --> 00:03:29,530
gerne, at der ikke sådan en god idé.

81
00:03:29,530 --> 00:03:31,840
Men internettet var nyt, og
vi alle eksperimentere.

82
00:03:31,840 --> 00:03:34,310
Og dette er, hvad jeg
tilsyneladende gjorde på det tidspunkt.

83
00:03:34,310 --> 00:03:34,810
Okay.

84
00:03:34,810 --> 00:03:38,020
Så uden videre, vi skifter
tandhjul i dag til at give dig, virkelig,

85
00:03:38,020 --> 00:03:42,250
den sidste brik, som du kan finde
især nyttigt for afsluttende projekter

86
00:03:42,250 --> 00:03:44,780
men også at vil begynde at
gøre hele world wide web

87
00:03:44,780 --> 00:03:46,680
føler lidt mere forståeligt.

88
00:03:46,680 --> 00:03:49,460
Ja, vi kommer til at indføre
endnu et programmeringssprog

89
00:03:49,460 --> 00:03:52,474
kaldet JavaScript, der ligner
og forskellige på forskellige måder

90
00:03:52,474 --> 00:03:54,140
fra sprog, vi har kigget på hidtil.

91
00:03:54,140 --> 00:03:55,807
>> Så C, husker, er dette kompileret sprog.

92
00:03:55,807 --> 00:03:57,473
Du har fået til at køre det igennem en compiler.

93
00:03:57,473 --> 00:03:59,810
Du får kildekoden til at gøre indsigelse
kode, eller nuller og ettaller.

94
00:03:59,810 --> 00:04:03,000
Og dem er nuller og ettaller, der
din CPU, Central Processing Unit,

95
00:04:03,000 --> 00:04:04,360
faktisk forstår.

96
00:04:04,360 --> 00:04:06,610
PHP, derimod, er ikke
en kompileret sprog.

97
00:04:06,610 --> 00:04:08,772
Det er en hvad?

98
00:04:08,772 --> 00:04:09,980
Det er et fortolket sprog.

99
00:04:09,980 --> 00:04:11,750
Så der er nogle program
kaldes en tolk, at

100
00:04:11,750 --> 00:04:13,708
skal læse it-- top til
bund, venstre til right--

101
00:04:13,708 --> 00:04:16,519
og finde ud af, hvad alle
din syntaks gør, og betyder,

102
00:04:16,519 --> 00:04:20,200
uanset om det er en sløjfe eller en tilstand
eller et andet nummer af programmeringen

103
00:04:20,200 --> 00:04:20,740
konstruktioner.

104
00:04:20,740 --> 00:04:22,210
Så det er et fortolket sprog.

105
00:04:22,210 --> 00:04:23,910
>> Derefter introducerede vi HTML.

106
00:04:23,910 --> 00:04:26,440
Og HTML er ikke engang en
programmeringssprog.

107
00:04:26,440 --> 00:04:28,110
Vi ville kalde det, hvad?

108
00:04:28,110 --> 00:04:31,650
En markup sprog, som er lige
en slags fancy måde at sige det

109
00:04:31,650 --> 00:04:35,820
ikke har programmering konstruktioner som
så vi selv tilbage i dag med Scratch.

110
00:04:35,820 --> 00:04:36,720
Der er ingen sløjfer.

111
00:04:36,720 --> 00:04:37,920
Der er ingen betingelser.

112
00:04:37,920 --> 00:04:40,820
Det er virkelig et sprog
om mærkning af dine data

113
00:04:40,820 --> 00:04:43,620
og formaterer det eller
strukturere det på en eller anden måde.

114
00:04:43,620 --> 00:04:46,147
>> CSS mellemtiden tilsvarende
ikke et programmeringssprog.

115
00:04:46,147 --> 00:04:47,730
Det er endda mere æstetisk orienterede.

116
00:04:47,730 --> 00:04:50,470
Og det giver dig mulighed for at sortere i finjustere
ting som skriftstørrelse og farver

117
00:04:50,470 --> 00:04:51,850
og placering og alt dette.

118
00:04:51,850 --> 00:04:52,370
Derefter havde vi

119
00:04:52,370 --> 00:04:53,160
>> SQL.

120
00:04:53,160 --> 00:04:56,010
Så SQL er faktisk en programmering
sprog i en vis forstand,

121
00:04:56,010 --> 00:04:59,330
omend skræddersyet
specifikt til databaser.

122
00:04:59,330 --> 00:05:03,347
Men selv om vi kun præsentere dig for
vælge og indsætte og slette og opdatere

123
00:05:03,347 --> 00:05:05,430
og et par andre,
viser sig du kan faktisk

124
00:05:05,430 --> 00:05:07,380
skrivefunktioner eller
procedurer, som de er

125
00:05:07,380 --> 00:05:11,270
kaldes, i SQL, der ser og handle
helt ligesom PHP og C-funktioner.

126
00:05:11,270 --> 00:05:12,390
Så ved, at de eksisterer.

127
00:05:12,390 --> 00:05:15,348
Men vi ved ikke engang gider med dem
som vi lige ridse overfladen her.

128
00:05:15,348 --> 00:05:18,600
Og så JavaScript, den sidste af
vores sprog formelt indført.

129
00:05:18,600 --> 00:05:21,029
Så JavaScript, også er
et fortolket sprog.

130
00:05:21,029 --> 00:05:23,070
Og de kender, gøre
du ønsker at skelne det

131
00:05:23,070 --> 00:05:26,960
med nogle karakteristiske
fra både C og PHP?

132
00:05:26,960 --> 00:05:28,300
Hvad gør det anderledes?

133
00:05:28,300 --> 00:05:29,650
>> PUBLIKUM: Det er ikke kompileret.

134
00:05:29,650 --> 00:05:29,930
>> DAVID MALAN: Sig igen?

135
00:05:29,930 --> 00:05:31,200
>> PUBLIKUM: Det er ikke kompileret.

136
00:05:31,200 --> 00:05:31,930
>> DAVID MALAN: Det er ikke kompileret.

137
00:05:31,930 --> 00:05:33,450
Så det også tolkes.

138
00:05:33,450 --> 00:05:34,760
Så det er ikke kompileret.

139
00:05:34,760 --> 00:05:37,210
Men det gør det lidt ligesom PHP.

140
00:05:37,210 --> 00:05:39,545
Men det er stadig forskellig fra
PHP i nogle slående måde,

141
00:05:39,545 --> 00:05:40,920
i det mindste i den måde, vi vil bruge det.

142
00:05:40,920 --> 00:05:41,205
Ja?

143
00:05:41,205 --> 00:05:41,940
>> PUBLIKUM: Det kører klientsiden.

144
00:05:41,940 --> 00:05:44,000
>> DAVID MALAN: Det kører
klientsiden, som regel.

145
00:05:44,000 --> 00:05:47,190
Det er faktisk kendingsnummer
karakteristisk for os lige nu.

146
00:05:47,190 --> 00:05:51,170
C var server-side i den forstand,
at vi gjorde alt i CS50 IDE.

147
00:05:51,170 --> 00:05:53,630
PHP hidtil har været
server-side omfang

148
00:05:53,630 --> 00:05:56,550
som det også kommer interpreted--
ikke kompileret, men interpreted--

149
00:05:56,550 --> 00:06:00,690
inde CS50 IDE, hvilket naturligvis er
bare en server eller servere i skyen.

150
00:06:00,690 --> 00:06:03,070
>> Men JavaScript, selv
selvom du du vil

151
00:06:03,070 --> 00:06:07,000
at begynde at skrive det for, siger, pset
otte og måske sidste projects-- du er

152
00:06:07,000 --> 00:06:09,620
kommer til at rette det i
CS50 IDE og gemme det

153
00:06:09,620 --> 00:06:14,760
i filer i CS50 IDE, CS50 IDE
og til gengæld de cloud-servere

154
00:06:14,760 --> 00:06:19,160
hvor det er hostet, vil ikke
at fortolke eller udføre din kode.

155
00:06:19,160 --> 00:06:23,880
Snarere, det vil blive sendt i
uændret form ned til browseren.

156
00:06:23,880 --> 00:06:26,990
Og det er så bliver IE
eller Chrome eller Firefox eller Safari

157
00:06:26,990 --> 00:06:30,697
eller hvad der rent faktisk fortolker
det, top til bund, venstre til højre.

158
00:06:30,697 --> 00:06:32,780
Så nøglen kendingsnummer
karakteristisk for dag

159
00:06:32,780 --> 00:06:36,110
er, at JavaScript er client-side
og PHP, for eksempel,

160
00:06:36,110 --> 00:06:37,690
har været server-side.

161
00:06:37,690 --> 00:06:40,920
Nu, dette har interessante konsekvenser
til, ligesom, intellektuel ejendomsret

162
00:06:40,920 --> 00:06:42,660
og hvem kan faktisk se din kode.

163
00:06:42,660 --> 00:06:44,860
Og ja, kan du gå
på internettet og se de fleste

164
00:06:44,860 --> 00:06:47,530
enhver kode, nogen har
skrevet i JavaScript.

165
00:06:47,530 --> 00:06:50,230
Nogle gange er det læsbar,
nogle gange er det korrumperet.

166
00:06:50,230 --> 00:06:52,550
Men mere om det i god tid.

167
00:06:52,550 --> 00:06:57,530
>> Så JavaScript, pænt nok, er
Super lignende, syntaktisk, til C.

168
00:06:57,530 --> 00:06:59,364
Og meget gerne PHP,
der er ingen vigtigste funktion.

169
00:06:59,364 --> 00:07:02,113
Hvis du vil begynde at skrive
JavaScript-kode, som du kan se i dag,

170
00:07:02,113 --> 00:07:03,270
du bare begynde at skrive det.

171
00:07:03,270 --> 00:07:06,910
Men det er, du vil se, især
nyttige i forbindelse med web-browsere.

172
00:07:06,910 --> 00:07:09,820
Men min lille
disclaimer-- normalt earlier--

173
00:07:09,820 --> 00:07:13,790
var at sige, at du kan mere og mere
i dag brug JavaScript server-side

174
00:07:13,790 --> 00:07:17,655
ved hjælp af en fancy ramme kaldet node.js
at nogle af CS50 egne programmer

175
00:07:17,655 --> 00:07:18,280
er skrevet i.

176
00:07:18,280 --> 00:07:20,640
Tjek 50 rent faktisk bruger Node.js.

177
00:07:20,640 --> 00:07:24,140
Men vi kommer til at fokusere på
JavaScript klientsiden nu af.

178
00:07:24,140 --> 00:07:26,750
>> Så her er en række betingelser i PHP.

179
00:07:26,750 --> 00:07:29,350
Beklager, in-- faktisk, at
erklæring, også er korrekt.

180
00:07:29,350 --> 00:07:32,200
Her er også et sæt
forhold i JavaScript.

181
00:07:32,200 --> 00:07:35,560
Syntaktisk, er det
identisk med C og PHP.

182
00:07:35,560 --> 00:07:39,040
Mr. Boole s udtryk er,
Tilsvarende syntaktisk

183
00:07:39,040 --> 00:07:41,190
identisk med både C og PHP.

184
00:07:41,190 --> 00:07:44,100
Vi har også kontakter i
JavaScript, der ser ens.

185
00:07:44,100 --> 00:07:46,350
Vi har for løkker, der er
struktureret identisk,

186
00:07:46,350 --> 00:07:48,140
mens løkker, gøre, mens sløjfer.

187
00:07:48,140 --> 00:07:49,980
>> Denne ene er lidt anderledes.

188
00:07:49,980 --> 00:07:53,120
PHP havde for hver konstruktion
at du måske skal bruge

189
00:07:53,120 --> 00:07:55,320
eller vil bruge i pset syv, måske.

190
00:07:55,320 --> 00:07:59,460
JavaScript har denne specielle udgave af
for hvor du bogstaveligt talt sige noget

191
00:07:59,460 --> 00:08:03,864
lignende for variabel nøgle i objekt, som
er en meget kortfattet måde at sige,

192
00:08:03,864 --> 00:08:06,780
hvis jeg har fået en object-- Og vi vil
tale om disse igen i en moment--

193
00:08:06,780 --> 00:08:10,370
og jeg ønsker at gentage over alt
af de centrale værdipar indeni,

194
00:08:10,370 --> 00:08:13,620
Jeg behøver ikke at finde ud af at
numerisk indeks dem med nul, en,

195
00:08:13,620 --> 00:08:14,580
to, tre.

196
00:08:14,580 --> 00:08:15,900
>> Jeg kan bogstaveligt talt sige dette.

197
00:08:15,900 --> 00:08:20,740
Og på hver iteration, JavaScript
for mig vil opdatere den variable nøgle

198
00:08:20,740 --> 00:08:24,810
at være den første nøgle, så den næste nøgle,
derefter den næste tast, så den næste nøgle,

199
00:08:24,810 --> 00:08:25,510
og så videre.

200
00:08:25,510 --> 00:08:30,000
Og jeg kan få på sin værdi ved at behandle
et objekt i JavaScript, som vi vil se,

201
00:08:30,000 --> 00:08:32,584
som om det er en
associative array i PHP.

202
00:08:32,584 --> 00:08:35,750
Ja, hvis du endelig pakket din
tankerne omkring hvad en associativ array er

203
00:08:35,750 --> 00:08:40,140
i PHP, kan du tænke på det for nu som
identisk med et objekt i JavaScript.

204
00:08:40,140 --> 00:08:42,030
Men det er lidt af
en oversimplificering.

205
00:08:42,030 --> 00:08:47,230
>> Arrays ser, pænt nok, identisk
PHP bortset fra én karakter.

206
00:08:47,230 --> 00:08:51,425
Der er én ting mangler her
at vi kunne se i sidste uge med PHP.

207
00:08:51,425 --> 00:08:52,050
Hvad er udeladt?

208
00:08:52,050 --> 00:08:53,310
Ja?

209
00:08:53,310 --> 00:08:54,090
Ingen dollartegn.

210
00:08:54,090 --> 00:08:56,240
Så vi er tilbage til en
mere normal verden, hvor

211
00:08:56,240 --> 00:08:58,050
variabler har ikke dollartegn.

212
00:08:58,050 --> 00:09:00,810
Men du præfiks dem
med var, typisk.

213
00:09:00,810 --> 00:09:02,230
Og var betyder variabel.

214
00:09:02,230 --> 00:09:06,440
Og meget gerne PHP er løst
typed-- hvorved der er typer,

215
00:09:06,440 --> 00:09:10,120
der er tal og strenge
og flåd og så forth--

216
00:09:10,120 --> 00:09:11,570
JavaScript har tilsvarende typer.

217
00:09:11,570 --> 00:09:15,470
Men det er løst skrevet i, at vi
programmører behøver ikke at angive dem.

218
00:09:15,470 --> 00:09:18,980
Vi skal bare være opmærksom på,
at der findes forskellige typer.

219
00:09:18,980 --> 00:09:21,690
>> Variabler, meanwhile-- her er hvordan
vi måske erklære "Hej, verden"

220
00:09:21,690 --> 00:09:22,230
som en streng.

221
00:09:22,230 --> 00:09:24,890
Bemærker det er identisk med
PHP men ingen dollartegn.

222
00:09:24,890 --> 00:09:27,120
Og det er noget, vi vil
begynde at se mere i dag,

223
00:09:27,120 --> 00:09:30,990
hvorved du har et objekt
med nøgler og værdier.

224
00:09:30,990 --> 00:09:32,990
Og hvis du ønsker at prøve
at udlede fra sidste week--

225
00:09:32,990 --> 00:09:34,730
syntaksen er lidt anderledes.

226
00:09:34,730 --> 00:09:39,740
Men en lille tilregnelighed check-- hvor mange
nøgler er dette objekt synes at have?

227
00:09:39,740 --> 00:09:40,850
Så jeg ser fire.

228
00:09:40,850 --> 00:09:43,560
Jeg ser to.

229
00:09:43,560 --> 00:09:44,680
>> Så det er faktisk to.

230
00:09:44,680 --> 00:09:47,260
Så det er en samling
af to nøgleværdipar.

231
00:09:47,260 --> 00:09:49,820
Det centrale er symbolet hvis værdi er FB.

232
00:09:49,820 --> 00:09:52,620
Det centrale er prisen, hvis værdi er 101,53.

233
00:09:52,620 --> 00:09:54,230
Så dem er to nøgleværdipar.

234
00:09:54,230 --> 00:09:58,120
Og husk, PHP-- og det er igen
lige slags syntaktisk forskel.

235
00:09:58,120 --> 00:10:00,170
Det er ikke alt,
intellektuelt interessant.

236
00:10:00,170 --> 00:10:04,610
PHP kunne have skrevet denne samme
noget som follows-- tilbud, lig.

237
00:10:04,610 --> 00:10:06,730
Og jeg ændre disse til firkantede parenteser.

238
00:10:06,730 --> 00:10:11,240
Og så er jeg ændre dette til
en citerede ord, "pris".

239
00:10:11,240 --> 00:10:12,500
Og så skal jeg ikke bruge et kolon.

240
00:10:12,500 --> 00:10:15,060
Hvad gjorde jeg bruge i sidste uge?

241
00:10:15,060 --> 00:10:18,290
Ja, lighedstegnet
pil funky notation.

242
00:10:18,290 --> 00:10:21,470
>> Og så gjorde jeg det samme her.

243
00:10:21,470 --> 00:10:23,580
Samme ting her.

244
00:10:23,580 --> 00:10:24,240
Og det er alt.

245
00:10:24,240 --> 00:10:27,752
Så det er fint, hvis det ikke har
virkelig sunket i til hukommelsen bare

246
00:10:27,752 --> 00:10:29,960
endnu, fordi det er virkelig
intellektuelt uinteressant.

247
00:10:29,960 --> 00:10:31,660
Det er bare syntaktiske forskelle.

248
00:10:31,660 --> 00:10:33,230
Men ideerne er nøjagtig den samme.

249
00:10:33,230 --> 00:10:35,910
Inde i denne variabel
citat i JavaScript

250
00:10:35,910 --> 00:10:39,020
er en samling af nøgleværdipar,
hvoraf den ene er symbol, hvoraf den ene

251
00:10:39,020 --> 00:10:39,690
er prisen.

252
00:10:39,690 --> 00:10:42,340
Og jeg kan få på disse værdier
med følgende syntaks.

253
00:10:42,340 --> 00:10:46,280
Ligesom i PHP, kunne jeg
gøre noget like-- lade

254
00:10:46,280 --> 00:10:48,590
mig gøre dette felt lidt større.

255
00:10:48,590 --> 00:10:52,750
Ligesom i PHP, kunne jeg
gøre denne-- åh, for helvede.

256
00:10:52,750 --> 00:10:53,250
Kom nu.

257
00:10:53,250 --> 00:10:56,350

258
00:10:56,350 --> 00:11:00,800
>> Ligesom i PHP-- OK, vi får
bare bruge præsentationsnoter.

259
00:11:00,800 --> 00:11:06,010
Ligesom i PHP, kan jeg
gøre $ quote $ citat ["symbolet"],

260
00:11:06,010 --> 00:11:08,860
og dette vil få mig
værdien af ​​"symbolet."

261
00:11:08,860 --> 00:11:12,800
I JavaScript, det vil være
identiske, hvorved jeg kan bare gøre det.

262
00:11:12,800 --> 00:11:14,850
Det eneste, der er
mangler, er dollartegn.

263
00:11:14,850 --> 00:11:17,470
>> Så pænt nok, så er der
ikke så meget nyt syntaks.

264
00:11:17,470 --> 00:11:21,025
Så hvad vi i dag fokuserer på, virkelig er
nogle af de ideer og ansøgningerne.

265
00:11:21,025 --> 00:11:22,900
Og den første
program, som du måske

266
00:11:22,900 --> 00:11:26,090
har set, hvis du investerer i pset
syv allerede er denne syntaks.

267
00:11:26,090 --> 00:11:28,980
Så i pset syv, hvis du har
set eller ikke set det endnu,

268
00:11:28,980 --> 00:11:33,570
ved, at der er en fil, som vi giver
du kaldte config.json-- JavaScript

269
00:11:33,570 --> 00:11:34,661
Objekt Notation.

270
00:11:34,661 --> 00:11:35,160
Hvorfor?

271
00:11:35,160 --> 00:11:39,540
Vi ønskede at være i stand til at give dig
en skabelon med nogle nøgleværdipar.

272
00:11:39,540 --> 00:11:44,290
Vi ønskede at være i stand til at give dig en liste
af værten, navnet på serveren.

273
00:11:44,290 --> 00:11:46,710
Vi ønskede at give dig en
pladsholder for dit brugernavn

274
00:11:46,710 --> 00:11:48,210
og en pladsholder for din adgangskode.

275
00:11:48,210 --> 00:11:49,410
Hvis du ikke kan se
dette endnu, ikke at bekymre dig.

276
00:11:49,410 --> 00:11:51,340
Mere om dette i pset syv
[? spec. ?] Og så,

277
00:11:51,340 --> 00:11:53,173
selvfølgelig, vi vil have dig
at udfylde gøremål

278
00:11:53,173 --> 00:11:55,310
fordi når du logger ind
CS50 IDE, hver af jer

279
00:11:55,310 --> 00:11:57,630
have dit eget brugernavn og adgangskode.

280
00:11:57,630 --> 00:12:00,910
>> Så kunne vi har brugt et halvt dusin
eller flere forskellige filformater.

281
00:12:00,910 --> 00:12:02,940
Vi kunne have brugt en .txt-fil.

282
00:12:02,940 --> 00:12:04,570
Vi kunne bruges en CSV-fil.

283
00:12:04,570 --> 00:12:06,745
Vi kunne have brugt en
INI-fil, en XML-fil,

284
00:12:06,745 --> 00:12:09,370
en hel masse flere akronymer, der
du måske ikke har nogensinde hørt.

285
00:12:09,370 --> 00:12:11,244
Det er slags vilkårlig
ved udgangen af ​​dagen.

286
00:12:11,244 --> 00:12:16,030
Men super populære i disse dage er en tekst
format kaldet JSON-- JavaScript Object

287
00:12:16,030 --> 00:12:18,460
Notation-- der ligner dette.

288
00:12:18,460 --> 00:12:20,890
Det er lidt kryptisk,
men bemærker mønstrene.

289
00:12:20,890 --> 00:12:24,180
Du starter med en åben krøllet
klampe, og du ender med det samme.

290
00:12:24,180 --> 00:12:26,550
Inde i det er noget.

291
00:12:26,550 --> 00:12:27,920
Det er en nøgle-værdi par.

292
00:12:27,920 --> 00:12:30,580
Så det er et formål at jeg
ser på på skærmen her

293
00:12:30,580 --> 00:12:33,690
der har en nøgle, som har en værdi.

294
00:12:33,690 --> 00:12:37,610
Og netop udlede baseret på
tidligere mønster, hvad er nøglen her?

295
00:12:37,610 --> 00:12:39,790
Database, ting at
venstre i tyktarmen.

296
00:12:39,790 --> 00:12:43,500
>> Nu sker værdien at være
en flere linjer denne gang.

297
00:12:43,500 --> 00:12:46,760
Men værdien starter med en krøllet
afstive og slutter med en krøllet tandbøjle.

298
00:12:46,760 --> 00:12:49,480
Så hvad ville du foreslå, er den
type værdien af ​​databasen?

299
00:12:49,480 --> 00:12:52,160

300
00:12:52,160 --> 00:12:54,670
En ordbog eller, bare mere
kortfattet, et objekt.

301
00:12:54,670 --> 00:12:55,170
Højre?

302
00:12:55,170 --> 00:13:00,010
Det er lidt af en datastruktur, der
kan bruge andre strukturer i sig selv.

303
00:13:00,010 --> 00:13:02,750
Så hvis hele denne ting er vi
kalde en object-- og et objekt

304
00:13:02,750 --> 00:13:07,101
er bare en flok nøgle-værdi pairs-- den
værdien af ​​databasen i sig selv er et objekt.

305
00:13:07,101 --> 00:13:10,350
Værdien af ​​databasen har en hel masse
af Nøgleværdiparrene, hvoraf den første

306
00:13:10,350 --> 00:13:13,130
er vært, derefter navnet, så
brugernavn, derefter adgangskode,

307
00:13:13,130 --> 00:13:17,550
hver af hvis værdier, i mellemtiden, er det
bare en kedelig streng i anførselstegn.

308
00:13:17,550 --> 00:13:19,770
>> Så selv hvis det ikke er
super klar endnu,

309
00:13:19,770 --> 00:13:22,740
ved, at dette er blot en
standard, temmelig kedelig måde

310
00:13:22,740 --> 00:13:25,190
til lagring af data i et standardformat.

311
00:13:25,190 --> 00:13:27,700
Men de mest almindelige fejl du
kan gøre, selv i pset syv,

312
00:13:27,700 --> 00:13:32,120
er små dumme ting, ligesom hvis du
uheld udelade komma der.

313
00:13:32,120 --> 00:13:34,900
Det kommer til at resultere i filen
ikke nødvendigvis at være læsbar.

314
00:13:34,900 --> 00:13:38,191
Hvis du ved et uheld udelade ting som
citater, er det ikke kommer til at være læsbar.

315
00:13:38,191 --> 00:13:41,654
Så det er en temmelig nitpicky filformat,
men det er en, der er super almindeligt.

316
00:13:41,654 --> 00:13:44,820
Og vi tilfældigvis til at bruge det, selvom
du ikke bruger nogen JavaScript ellers

317
00:13:44,820 --> 00:13:46,330
i pset syv.

318
00:13:46,330 --> 00:13:46,860
>> Okay.

319
00:13:46,860 --> 00:13:48,110
Så husk dette billede.

320
00:13:48,110 --> 00:13:51,657
Vi talte om, i HTML, at
koden kan se sådan ud.

321
00:13:51,657 --> 00:13:54,740
Dette er HyperText Markup Language
[Uhørligt] for bare "hej, verden."

322
00:13:54,740 --> 00:13:57,570
Men så har vi foreslået en
stykke tid tilbage, at hvis det hjælper,

323
00:13:57,570 --> 00:14:00,210
du måske ønsker at begynde at tænke
om dette allerede som et træ.

324
00:14:00,210 --> 00:14:03,730
Faktisk indrykningen at vi
bruge bare for læsbarhed skyld

325
00:14:03,730 --> 00:14:05,610
eller for stil skyld på
venstre kan slags

326
00:14:05,610 --> 00:14:10,040
oversættes til dette træ, hvor du
har nogle særlige rod node, at vi vil

327
00:14:10,040 --> 00:14:16,860
generisk kaldes dokument, under hvilken
er roden HTML-element eller tag, HTML,

328
00:14:16,860 --> 00:14:19,980
som derefter har to
børn, hoved og krop.

329
00:14:19,980 --> 00:14:21,750
>> Og så til gengæld hoved har en titel.

330
00:14:21,750 --> 00:14:23,440
Og titel har en tekstværdi.

331
00:14:23,440 --> 00:14:26,130
Og kroppen på samme måde har en tekstværdi.

332
00:14:26,130 --> 00:14:29,220
Så hvis du er fortrolig ordsprog
at ja, kan du tage denne HTML

333
00:14:29,220 --> 00:14:32,080
og tegne et billede som
dette, højre side

334
00:14:32,080 --> 00:14:35,910
er en dejlig mental model, fordi nu
at vi har JavaScript, et programmeringssprog

335
00:14:35,910 --> 00:14:39,960
sprog, browsere kan
udføre og fortolke for dig,

336
00:14:39,960 --> 00:14:42,690
det viser sig, at det
vi er ved at gøre i koden

337
00:14:42,690 --> 00:14:45,320
er begynde at manipulere dette
træstruktur i hukommelsen.

338
00:14:45,320 --> 00:14:47,070
Vi behøver ikke at bygge
træet i hukommelsen.

339
00:14:47,070 --> 00:14:49,880
Vi har ikke at gøre slags
pset-fem-stil datastruktur

340
00:14:49,880 --> 00:14:50,650
kompleksitet.

341
00:14:50,650 --> 00:14:54,610
Browseren, pænt nok efter
fortolke HTML top til bund,

342
00:14:54,610 --> 00:14:58,600
venstre eller højre, der bogstaveligt talt kommer til at
hånd os hvad der svarer til en pegepind

343
00:14:58,600 --> 00:15:00,840
til at hele træet gratis.

344
00:15:00,840 --> 00:15:02,150
Det gør alt det hårde arbejde.

345
00:15:02,150 --> 00:15:05,520
Det er, hvad Mozilla og Apple
og andre har gjort for os.

346
00:15:05,520 --> 00:15:09,400
>> Og med JavaScript skal vi
være i stand til at kontrollere og ændre og gøre

347
00:15:09,400 --> 00:15:12,910
interessante ting at
det træ, ellers kendt

348
00:15:12,910 --> 00:15:15,880
som en DOM eller Document Object Model.

349
00:15:15,880 --> 00:15:17,110
Hvilke slags ting?

350
00:15:17,110 --> 00:15:19,030
Tja, det viser sig, at
i JavaScript, der er

351
00:15:19,030 --> 00:15:22,800
denne vaskeri liste over
begivenheder, der kan finde sted.

352
00:15:22,800 --> 00:15:26,330
Og vi har ikke rigtig brugt, at
Ordet siden uge nul og pset

353
00:15:26,330 --> 00:15:28,240
nul, når vi talte om Scratch.

354
00:15:28,240 --> 00:15:31,390
De fleste af jer sikkert ikke bruge
en begivenhed i dit Scratch projekt.

355
00:15:31,390 --> 00:15:33,850
Men du måske husker
den enkle Marco Polo

356
00:15:33,850 --> 00:15:36,760
eksempel hvor vi havde to
sprites, hvoraf den ene sagde, Marco.

357
00:15:36,760 --> 00:15:40,180
Den anden hvoraf derefter, efter at lytte
og høre denne begivenhed, sagde Polo.

358
00:15:40,180 --> 00:15:42,080
Hvis ikke, er du velkommen til
se tilbage så langt tilbage.

359
00:15:42,080 --> 00:15:44,450
>> Men dette er blot for at
sige, og du kan slags

360
00:15:44,450 --> 00:15:47,730
udlede navnene på disse
ting, JavaScript, viser det sig,

361
00:15:47,730 --> 00:15:53,200
kommer til at give os en måde at lytte
for muse går ned eller mus går op

362
00:15:53,200 --> 00:15:57,920
tasten eller gå ned eller nøgle
går op eller onSubmit onselect

363
00:15:57,920 --> 00:15:59,740
eller onresizing noget.

364
00:15:59,740 --> 00:16:03,060
Med andre ord er enhver fysisk handling
at et menneske kan tage med en browser

365
00:16:03,060 --> 00:16:08,210
at du gør hver dag, kan du skrive
kode for det lytter efter disse begivenheder

366
00:16:08,210 --> 00:16:10,220
og derefter gør noget passende.

367
00:16:10,220 --> 00:16:14,130
>> For eksempel, hvis du bruger Google Maps,
hvad der sker, hvis du klikker og flytte

368
00:16:14,130 --> 00:16:16,250
musen, typisk?

369
00:16:16,250 --> 00:16:17,758
Hvis du klikke og trække?

370
00:16:17,758 --> 00:16:18,258
Ja?

371
00:16:18,258 --> 00:16:21,701

372
00:16:21,701 --> 00:16:22,200
Præcis.

373
00:16:22,200 --> 00:16:23,159
Kortet begynder at bevæge sig.

374
00:16:23,159 --> 00:16:25,616
Så du kan slags se hvad der er
herovre, hvad er derovre.

375
00:16:25,616 --> 00:16:27,130
Og hvordan Google gennemfører det?

376
00:16:27,130 --> 00:16:29,421
Nå, formentlig, de er
ved hjælp af et par af disse tilfælde

377
00:16:29,421 --> 00:16:31,720
lyttere, en, der
siger, lyt til på mus

378
00:16:31,720 --> 00:16:35,410
down-- så når brugeren fysisk
skubber hans pegefeltet eller dennes mus

379
00:16:35,410 --> 00:16:36,010
ned.

380
00:16:36,010 --> 00:16:38,350
Og så er vi på udkig efter
noget lignende bevægelse

381
00:16:38,350 --> 00:16:41,145
eller en anden begivenhed,
tillader os at fange træk.

382
00:16:41,145 --> 00:16:45,910
Og i virkeligheden, træk er ligeledes i dette
dot dot dot liste over mulige indstillinger.

383
00:16:45,910 --> 00:16:49,140
>> Så dette vil være en kraftfuld
måde at begynde at reagere til brugeren

384
00:16:49,140 --> 00:16:52,824
endnu før han eller hun rent faktisk klikker
noget eksplicit lignende indsende.

385
00:16:52,824 --> 00:16:55,240
Men vi kommer til at indføre
et par emner at komme dertil.

386
00:16:55,240 --> 00:16:58,570
Men først, lad os overgang
til nogle konkrete kode.

387
00:16:58,570 --> 00:17:01,450
Så jeg har tænkt mig at gå
videre og åbne op for dom-0,

388
00:17:01,450 --> 00:17:05,869
hvilket er et meget simpelt eksempel
her, at hvis jeg zoomer ind simpelthen

389
00:17:05,869 --> 00:17:08,500
har denne indgang her for mig.

390
00:17:08,500 --> 00:17:12,410
Og jeg har tænkt mig at gå videre og skrive
"David" for mit navn, og klik på Send.

391
00:17:12,410 --> 00:17:17,940
>> Og så, omend slags billigt, jeg
har denne prompt, der popper op, der siger,

392
00:17:17,940 --> 00:17:19,244
"Hej, David!"

393
00:17:19,244 --> 00:17:21,740
Så dette er slags
ligesom vores "Hej, verden"

394
00:17:21,740 --> 00:17:25,150
at vi gjorde en stund tilbage i C og
selv i PHP, fordi jeg har dynamisk

395
00:17:25,150 --> 00:17:26,310
udlæses mit navn.

396
00:17:26,310 --> 00:17:28,230
Jeg kan gøre en andens navn her.

397
00:17:28,230 --> 00:17:31,240
Jeg kunne blot ændre dette til,
lignende, Hannah, klik på Send.

398
00:17:31,240 --> 00:17:33,780
Og ja, den lille pop-up-ændringer.

399
00:17:33,780 --> 00:17:36,650
>> Nu pop-ups er en af ​​de
fleste misbrugte funktioner i nettet.

400
00:17:36,650 --> 00:17:38,520
Og faktisk igen
dagen pop-up-blokkere

401
00:17:38,520 --> 00:17:40,820
kom ind i mode, fordi du
ville gå til nogle website--

402
00:17:40,820 --> 00:17:43,604
måske en tvivlsom sted--
der ville så pludselig

403
00:17:43,604 --> 00:17:46,020
begynde peppering din skærm
med en hel masse pop-ups.

404
00:17:46,020 --> 00:17:49,700
Og så denne evne til at poppe op
vinduer i foran brugeren

405
00:17:49,700 --> 00:17:52,372
har ikke været særlig
godt modtaget af menneskeheden.

406
00:17:52,372 --> 00:17:54,080
Så det er derfor du ser
dette forhindre ting,

407
00:17:54,080 --> 00:17:55,706
hvilket bare gør det hele grim.

408
00:17:55,706 --> 00:17:57,996
Så vi kommer til at bruge en
bedre måde at bede brugeren.

409
00:17:57,996 --> 00:17:59,350
Men for nu, der synes at arbejde.

410
00:17:59,350 --> 00:18:03,320
Så bare intuitivt, hvad
synes at være sker her?

411
00:18:03,320 --> 00:18:07,870
Jeg gå videre og klik på Send, og
så er der noget der sker, tydeligt.

412
00:18:07,870 --> 00:18:12,870
Men hvad der ikke sker det skete
sidste uge helst jeg klikkede Indsend?

413
00:18:12,870 --> 00:18:15,940
Hvad skete ikke på skærmen?

414
00:18:15,940 --> 00:18:17,170
Undskyld?

415
00:18:17,170 --> 00:18:18,010
Genindlæse.

416
00:18:18,010 --> 00:18:19,720
Den URL ændrede ikke på alle.

417
00:18:19,720 --> 00:18:22,250
Jeg sagde det var dom-0,
og jeg er stadig på dom-0.

418
00:18:22,250 --> 00:18:26,890
Normalt ville vi få ændret til en anden
URL, ligesom register.php eller lignende.

419
00:18:26,890 --> 00:18:29,560
>> Men selv når jeg afskedige
denne ting ved at klikke på OK,

420
00:18:29,560 --> 00:18:32,310
bemærke, at webadressen
forbliver helt sat.

421
00:18:32,310 --> 00:18:35,350
Og i virkeligheden, hvis jeg er lidt
skeptisk, lad mig åbne op Chrome.

422
00:18:35,350 --> 00:18:36,860
Lad mig åbne op på fanen Netværk.

423
00:18:36,860 --> 00:18:38,360
Og bemærk det er tomt i øjeblikket.

424
00:18:38,360 --> 00:18:40,700
Lad mig gå videre og sende Maria.

425
00:18:40,700 --> 00:18:42,810
Der er ingen som helst netværkstrafik.

426
00:18:42,810 --> 00:18:44,320
Så der er ingen HTTP.

427
00:18:44,320 --> 00:18:47,620
>> Så ja, hvis jeg ser på kildekoden
for denne-- lad mig lukke dette vindue

428
00:18:47,620 --> 00:18:49,480
og gå til Vis Kilde.

429
00:18:49,480 --> 00:18:50,400
Interessant.

430
00:18:50,400 --> 00:18:53,520
Det ser ud som om der er nogle
nye mærker, blandt dem script.

431
00:18:53,520 --> 00:18:57,490
Så lad os tage et kig indenfor CS50
IDE præcis, hvad jeg sendt til brugeren.

432
00:18:57,490 --> 00:19:00,690
>> Så her is-- lad os
kun fokusere på HTML.

433
00:19:00,690 --> 00:19:03,500
Her er den nederste halvdel af dom-0.html.

434
00:19:03,500 --> 00:19:07,830
Og bemærk, at det har fået en titel,
et hoved tag, et organ tag, en form tag.

435
00:19:07,830 --> 00:19:11,257
Men hvad springer ud til dig som
anderledes, især hvis du aldrig har

436
00:19:11,257 --> 00:19:12,590
skrevet dig selv enhver JavaScript.

437
00:19:12,590 --> 00:19:14,920
Lad mig rulle lidt
til højre her.

438
00:19:14,920 --> 00:19:18,330
Jeg har et input,
en anden indgang til indsende.

439
00:19:18,330 --> 00:19:21,410
Jeg har fået et ID, som er form for nyt.

440
00:19:21,410 --> 00:19:22,790
Men vi ser dette med CSS.

441
00:19:22,790 --> 00:19:24,480
Hvad er absolut nyt?

442
00:19:24,480 --> 00:19:24,980
Ja?

443
00:19:24,980 --> 00:19:30,580

444
00:19:30,580 --> 00:19:32,140
Nice.

445
00:19:32,140 --> 00:19:32,760
>> Okay.

446
00:19:32,760 --> 00:19:35,630
Så hvor der står onSubmit,
mærke til, hvad der synes at følge.

447
00:19:35,630 --> 00:19:38,740
Det er en egenskab
i HTML nomenklatur.

448
00:19:38,740 --> 00:19:40,944
Dens værdi er dette citeret streng her.

449
00:19:40,944 --> 00:19:42,860
Og det ser lidt
underligt ved første øjekast.

450
00:19:42,860 --> 00:19:44,050
Det er ikke HTML.

451
00:19:44,050 --> 00:19:45,240
Det er ikke CSS.

452
00:19:45,240 --> 00:19:47,580
Det er, som du kan gætte, JavaScript.

453
00:19:47,580 --> 00:19:51,850
Så det lader til, at indbygget i denne
webside er en funktion kaldet greet.

454
00:19:51,850 --> 00:19:54,250
Og jeg udlede, at bare
fordi det er et ord, hilse.

455
00:19:54,250 --> 00:19:55,880
Det har fået en åben parentes,
tætte parentes, semikolon.

456
00:19:55,880 --> 00:19:58,095
Ligner en C-funktion,
ligner en PHP funktion.

457
00:19:58,095 --> 00:20:00,370
>> Og ja, det vil
være en JavaScript-funktion.

458
00:20:00,370 --> 00:20:01,440
Så jeg vender tilbage falsk.

459
00:20:01,440 --> 00:20:03,440
Vi vil vende tilbage til
at på bare et øjeblik.

460
00:20:03,440 --> 00:20:05,320
Men hvor er denne funktion defineres?

461
00:20:05,320 --> 00:20:07,950
Jamen så lad mig rulle op
til toppen af ​​filen.

462
00:20:07,950 --> 00:20:11,710
Og selvom det er en lang linje,
det er relativt ligetil.

463
00:20:11,710 --> 00:20:15,000
Lad mig zoome ud her og
fokusere på disse fire linjer.

464
00:20:15,000 --> 00:20:17,137
>> Så i JavaScript, bare
som PHP, bare du

465
00:20:17,137 --> 00:20:19,720
sige, bogstaveligt talt, ordet "funktionen"
navnet på den funktion,

466
00:20:19,720 --> 00:20:22,700
og derefter parenteser med enhver
arguments-- ingen argumenter i denne sag.

467
00:20:22,700 --> 00:20:25,290
Og der er ingen returtypen
i JavaScript, ligesom PHP.

468
00:20:25,290 --> 00:20:29,470
Så det er lidt løsere end C.
Åbn krøllet klammeparentes tæt krøllet parentes.

469
00:20:29,470 --> 00:20:33,270
Indbygget i JavaScript er et function--
ikke en anbefalet function--

470
00:20:33,270 --> 00:20:35,730
men en funktion kaldet alarm
hvis eneste formål i livet

471
00:20:35,730 --> 00:20:38,620
er at trække op at stort grimt
Spørg, at vi så et øjeblik siden.

472
00:20:38,620 --> 00:20:40,950
>> Nu er dette er lidt af en mundfuld.

473
00:20:40,950 --> 00:20:42,560
Hvad sker der her?

474
00:20:42,560 --> 00:20:45,840
Så lad os starte med
fremhæve alt her.

475
00:20:45,840 --> 00:20:48,540
Det er det samme argument til at advare.

476
00:20:48,540 --> 00:20:49,530
Og hvad sker der?

477
00:20:49,530 --> 00:20:51,200
Dette blot ligner en streng.

478
00:20:51,200 --> 00:20:59,180
Og det viser sig, i modsætning til PHP og i modsætning til
C, betyder det ikke noget i JavaScript

479
00:20:59,180 --> 00:21:01,090
hvis du enkelte anførselstegn eller dobbelte anførselstegn.

480
00:21:01,090 --> 00:21:02,060
De vil være tilsvarende.

481
00:21:02,060 --> 00:21:03,769
Og helt ærligt, det er bare
populære i disse dage

482
00:21:03,769 --> 00:21:06,726
for JavaScript programmører til at altid
bruge enkelte anførselstegn eller anden grund.

483
00:21:06,726 --> 00:21:07,840
Det er bare den ting at gøre.

484
00:21:07,840 --> 00:21:09,710
Men vi kunne bruge dobbelte anførselstegn, så godt.

485
00:21:09,710 --> 00:21:11,540
>> Så plus er en ny karakter.

486
00:21:11,540 --> 00:21:14,512
Men de af jer, der har gjort
dette før, hvad betyder plus betyde?

487
00:21:14,512 --> 00:21:16,440
Ja.

488
00:21:16,440 --> 00:21:17,120
Concatenate.

489
00:21:17,120 --> 00:21:18,570
Så vi så det i PHP.

490
00:21:18,570 --> 00:21:20,315
Der er bare dot
operatør i PHP, der

491
00:21:20,315 --> 00:21:22,000
vil sammenkæde to strenge sammen.

492
00:21:22,000 --> 00:21:24,000
C var en smerte i nakken til at gøre dette.

493
00:21:24,000 --> 00:21:27,310
Recall fra pset seks, som var
en especial smerter i nakken,

494
00:21:27,310 --> 00:21:29,470
ville du nødt til at bruge
noget som strcat

495
00:21:29,470 --> 00:21:31,660
efter tildeling af hukommelse
på stakken eller bunke.

496
00:21:31,660 --> 00:21:34,243
Du var nødt til at springe gennem tøndebånd
lige til at sammenkæde to strenge.

497
00:21:34,243 --> 00:21:36,040
I JavaScript, det er super simpelt.

498
00:21:36,040 --> 00:21:38,030
Bare bruge plus operatør mellem dem.

499
00:21:38,030 --> 00:21:41,420
>> Så komplekset udseende
ting synes at være denne

500
00:21:41,420 --> 00:21:43,490
fordi ved udgangen af
Hele denne streng, jeg bare

501
00:21:43,490 --> 00:21:45,797
sammenkæde på et udråbstegn.

502
00:21:45,797 --> 00:21:48,380
Så hvis det, der blev affyret op var
"Hej, David", "hej, Hannah,"

503
00:21:48,380 --> 00:21:52,740
"Hej, Maria", og så videre, klart
at midterste ting i mellem de to

504
00:21:52,740 --> 00:21:55,215
plusser skal give mig adgang til hvad?

505
00:21:55,215 --> 00:21:58,855

506
00:21:58,855 --> 00:22:01,991
Hvad der er i der sikkert?

507
00:22:01,991 --> 00:22:02,490
Ja.

508
00:22:02,490 --> 00:22:05,090
Så jeg vil lade som her
besvare deres navn, ikke?

509
00:22:05,090 --> 00:22:10,380
Så deres navn dukkede op i den endelige
resultat. Så hvad betyder det?

510
00:22:10,380 --> 00:22:15,080
Tja, jeg foreslog tidligere i denne
billede, som den såkaldte DOM

511
00:22:15,080 --> 00:22:18,580
har denne særlige rod element
måde op øverst kaldes dokument.

512
00:22:18,580 --> 00:22:21,660
Og nu viser det sig, at der foregår
at være en særlig global variabel

513
00:22:21,660 --> 00:22:25,250
i JavaScript, indbygget i, som er en
hel masse nyttige funktioner.

514
00:22:25,250 --> 00:22:31,770
Blandt de nyttige funktioner er
evne til at få noget efterkommer node.

515
00:22:31,770 --> 00:22:37,760
Disse firkanter eller rektangler eller ellipser
er blot noder i et træ, så at sige.

516
00:22:37,760 --> 00:22:41,850
>> Så det viser sig, at der er indbygget i
JavaScript dokument objekt

517
00:22:41,850 --> 00:22:47,300
er en funktion, også kendt som en
metode, er der kaldte getElementById.

518
00:22:47,300 --> 00:22:50,410
Syntaksen for at kalde
en funktion i JavaScript

519
00:22:50,410 --> 00:22:55,220
der er inde i et objekt eller en
variabel er lige med dot notation.

520
00:22:55,220 --> 00:22:57,950
Og vi så det i C
hvad struct syntaks.

521
00:22:57,950 --> 00:23:03,530
Du ser dette i pset syv, slags,
slags, når du ser CS50 :: forespørgsel.

522
00:23:03,530 --> 00:23:08,070
Den kolon kolon i PHP er en anden
måde at kalde en funktion, der er

523
00:23:08,070 --> 00:23:09,260
inde i en genstand.

524
00:23:09,260 --> 00:23:11,960
>> Men for nu i JavaScript,
det er bare en prik.

525
00:23:11,960 --> 00:23:14,170
Og så denne funktion,
pænt nok, slags

526
00:23:14,170 --> 00:23:16,810
siger, hvad det does-- få element ved ID.

527
00:23:16,810 --> 00:23:20,280
Et element er bare et andet navn
til et tag eller node i DOM.

528
00:23:20,280 --> 00:23:26,900
Og så får element ved ID "navn"
betyder denne-- her er min HTML.

529
00:23:26,900 --> 00:23:31,910
Og baseret på denne HTML, hvad
node eller hvad HTML-tag er jeg

530
00:23:31,910 --> 00:23:35,097
vil programmeringsmæssigt afleveres
ved at ringe document.getElementById?

531
00:23:35,097 --> 00:23:37,650

532
00:23:37,650 --> 00:23:38,500
>> Ja, præcis.

533
00:23:38,500 --> 00:23:42,670
Jeg har tænkt mig at få input
element der hvis ID er "navn".

534
00:23:42,670 --> 00:23:45,140
Så specielt, kan du
tænke på denne funktion,

535
00:23:45,140 --> 00:23:49,560
getElementById, som en måde at give
bakke en pointer til den specifikke node

536
00:23:49,560 --> 00:23:50,060
i træet.

537
00:23:50,060 --> 00:23:51,980
Vi har ikke draget dette
træ, men det er en måde

538
00:23:51,980 --> 00:23:54,900
for at få adgang til denne
rektangel eller at rektangel

539
00:23:54,900 --> 00:23:58,090
ved entydigt identificerer det via sin id.

540
00:23:58,090 --> 00:23:59,760
>> Nu, hvorfor er denne nyttige?

541
00:23:59,760 --> 00:24:01,510
Tja, det viser sig
at når du har fået

542
00:24:01,510 --> 00:24:07,220
at node, der rektangel fra
billede, at node inde i det,

543
00:24:07,220 --> 00:24:10,660
til gengæld har en hel masse
properties-- nøgleværdipar

544
00:24:10,660 --> 00:24:13,480
eller data, hvoraf den ene kaldes værdi.

545
00:24:13,480 --> 00:24:16,500
Så bogstaveligt, det er lidt af et
mundfuld at forklare det hele.

546
00:24:16,500 --> 00:24:19,370
Men i slutningen af ​​dagen,
alt dette gør, er at give dig

547
00:24:19,370 --> 00:24:23,070
en streng, som brugeren har skrevet i
i denne hierarkiske måde.

548
00:24:23,070 --> 00:24:24,820
Men jeg kan ikke lide en
par af disse ting.

549
00:24:24,820 --> 00:24:27,590
Eller rettere, der er nogle nysgerrighed stadig.

550
00:24:27,590 --> 00:24:28,870
Alt dette syntes at arbejde.

551
00:24:28,870 --> 00:24:33,420
Hvorfor tror du, at jeg vendte tilbage
falsk efter kald hilse?

552
00:24:33,420 --> 00:24:35,910
Dette ser lidt grimt, at
Jeg har to udsagn der

553
00:24:35,910 --> 00:24:38,730
adskilt med semikolon.

554
00:24:38,730 --> 00:24:39,310
Gæt.

555
00:24:39,310 --> 00:24:44,390
Hvis jeg fjernede return false, hvad
kan ske, bare instinktivt?

556
00:24:44,390 --> 00:24:46,990

557
00:24:46,990 --> 00:24:49,460
Beklager, siger igen?

558
00:24:49,460 --> 00:24:50,530
>> Åbn en flok af Windows.

559
00:24:50,530 --> 00:24:52,780
Så potentielt måske noget
som det ville ske.

560
00:24:52,780 --> 00:24:54,422
Hvad ellers?

561
00:24:54,422 --> 00:24:55,630
Måske indsende en anmodning hvor?

562
00:24:55,630 --> 00:24:59,109

563
00:24:59,109 --> 00:25:00,510
Til den samme side.

564
00:25:00,510 --> 00:25:03,110
Så i virkeligheden, det er, at
jo tættere svaret her,

565
00:25:03,110 --> 00:25:05,890
selvom modsætning
i fortiden, har jeg ikke

566
00:25:05,890 --> 00:25:09,300
specificeret handlingen attribut,
som normalt vi skal gøre.

567
00:25:09,300 --> 00:25:11,780
Viser sig der er en standard.
Hvis du ikke angiver handling,

568
00:25:11,780 --> 00:25:15,370
Det er ligesom at sige tilbud, citat slut
eller navnet på selve filen,

569
00:25:15,370 --> 00:25:17,850
hvilket i dette tilfælde ville
være som dom-0.html.

570
00:25:17,850 --> 00:25:20,420
Det er bare sådan udledes,
eller rettere underforstået.

571
00:25:20,420 --> 00:25:22,420
>> Og så, hvis jeg ikke gør det, så lad os lægge mærke til.

572
00:25:22,420 --> 00:25:23,230
Lad mig gemme denne.

573
00:25:23,230 --> 00:25:25,270
Og jeg har fjernet afkast falsk.

574
00:25:25,270 --> 00:25:27,759
Lad mig gå tilbage til dette
eksempel og kraft genindlæse den.

575
00:25:27,759 --> 00:25:30,800
Og du måske har set mig foreslå
dette på CS50 Diskutere en masse gange.

576
00:25:30,800 --> 00:25:34,560
Hvis noget nogensinde har handler funky og
browser er ikke opfører sig som du forventer,

577
00:25:34,560 --> 00:25:37,410
oftentimes du ønsker at holde
Skift og klik derefter på Reload.

578
00:25:37,410 --> 00:25:41,480
Det vil tvinge hver fil for at genindlæse
og ikke bruge browserens lokal cache

579
00:25:41,480 --> 00:25:47,032
eller kopi, så det nu, lad mig gå videre og
åbne op for min Inspector, på fanen Netværk.

580
00:25:47,032 --> 00:25:48,740
Jeg har tænkt mig at klikke
Bevar Log fordi jeg

581
00:25:48,740 --> 00:25:51,660
vil ikke have det til at slette rækkerne
når jeg bliver ført væk andre steder.

582
00:25:51,660 --> 00:25:54,650
>> Lad mig gå videre her og
typen i Andi, klik på Send.

583
00:25:54,650 --> 00:25:55,150
Okay.

584
00:25:55,150 --> 00:25:56,480
Det virker som forventet.

585
00:25:56,480 --> 00:25:57,440
Den siger "Hej, Andi."

586
00:25:57,440 --> 00:25:59,420
Lad mig klikke på OK.

587
00:25:59,420 --> 00:26:00,610
Interessant.

588
00:26:00,610 --> 00:26:05,100
Bemærk, at siden ændret sig,
om end den oprindelige side.

589
00:26:05,100 --> 00:26:06,770
Læg mærke til URL slags ændret.

590
00:26:06,770 --> 00:26:09,430
Den tilføjede et spørgsmålstegn,
som normalt er en indikator

591
00:26:09,430 --> 00:26:11,260
at vi forsøgte at indsende noget.

592
00:26:11,260 --> 00:26:13,570
Og derefter ved bunden,
endnu mere eksplicit,

593
00:26:13,570 --> 00:26:17,570
her er den faktiske HTTP-anmodning,
som fik et svar på 200, som

594
00:26:17,570 --> 00:26:18,490
bragte mig tilbage her.

595
00:26:18,490 --> 00:26:20,250
>> Så dette hvad man ikke er
vi ønsker at gøre, ikke?

596
00:26:20,250 --> 00:26:22,166
Fordi jeg ønsker ikke at
genindlæse hele siden.

597
00:26:22,166 --> 00:26:24,970
Jeg stedet ønskede at vende tilbage
falsk således at kortslutning

598
00:26:24,970 --> 00:26:28,840
browserens standard opførsel, som
var naturligvis, at indsende siden.

599
00:26:28,840 --> 00:26:31,700
>> Så lad os tage et kig på en
marginalt bedre eksempel.

600
00:26:31,700 --> 00:26:33,920
Dette er dom udgave én.

601
00:26:33,920 --> 00:26:36,680
Og bemærk følgende.

602
00:26:36,680 --> 00:26:39,150
Det er OK, hvis du ikke grok
alle linjer kode.

603
00:26:39,150 --> 00:26:41,750
Men hvad er fundamentalt anderledes
om denne gennemførelse?

604
00:26:41,750 --> 00:26:44,690
Jeg vil fastsætte det opfører den
samme, gør det samme.

605
00:26:44,690 --> 00:26:49,320

606
00:26:49,320 --> 00:26:51,570
Hvad har jeg selvfølgelig gjort anderledes?

607
00:26:51,570 --> 00:26:52,266
Ja?

608
00:26:52,266 --> 00:26:53,182
>> PUBLIKUM: [uhørligt].

609
00:26:53,182 --> 00:27:03,421

610
00:27:03,421 --> 00:27:04,170
DAVID MALAN: Ja.

611
00:27:04,170 --> 00:27:08,620
Så funktionen er defineret differently--
med andre ord, ude af form,

612
00:27:08,620 --> 00:27:13,180
deroppe på linje 7-- eller
snarere line 8-- ikke længere

613
00:27:13,180 --> 00:27:15,070
har jeg onSubmit attribut.

614
00:27:15,070 --> 00:27:16,750
I det foregående eksempel, jeg havde dette.

615
00:27:16,750 --> 00:27:18,530
Og så er jeg bogstaveligt talt skrev min kode her.

616
00:27:18,530 --> 00:27:20,210
Og så sagde jeg return false.

617
00:27:20,210 --> 00:27:22,180
Og hvis det ikke gnide
du den forkerte vej endnu,

618
00:27:22,180 --> 00:27:26,140
Det bør begynde at omfang
som, ligesom i HTML,

619
00:27:26,140 --> 00:27:29,530
da vi begyndte at co-blande det
med CSS i stil attributter,

620
00:27:29,530 --> 00:27:32,890
det bare begyndt at få lidt
rodet eller føle sig lidt forkert.

621
00:27:32,890 --> 00:27:35,020
>> Ligeledes her, hvis
du begynder at tage HTML,

622
00:27:35,020 --> 00:27:37,419
og så du automatisk
plop nogle JavaScript-kode

623
00:27:37,419 --> 00:27:40,460
i midten af ​​en streng i anførselstegn, er det
ikke vil være meget vedligeholde.

624
00:27:40,460 --> 00:27:40,630
Højre?

625
00:27:40,630 --> 00:27:43,690
Det er ikke engang tydeligt ved første
sted, hvor JavaScript-kode er.

626
00:27:43,690 --> 00:27:46,590
Så det ville være virkelig rart, som
et princip om bedre design,

627
00:27:46,590 --> 00:27:50,500
lad os holde vores HTML helt
adskilt fra vores JavaScript.

628
00:27:50,500 --> 00:27:53,150
>> Så for at gøre det, hvad vi har
gjort her er following--

629
00:27:53,150 --> 00:27:56,790
vi blot bruge HTML til kun markup.

630
00:27:56,790 --> 00:28:00,730
Og så i version en af ​​denne, alle
Jeg har, er en form med et unikt id.

631
00:28:00,730 --> 00:28:04,630
Og derefter ned her, jeg udnytter
af et særligt kendetegn ved JavaScript

632
00:28:04,630 --> 00:28:08,480
hvorved jeg kan have, hvad der er
kaldes en anonym funktion.

633
00:28:08,480 --> 00:28:14,150
Så det viser sig, at hvis jeg kalder
document.getElementById af 'demo'

634
00:28:14,150 --> 00:28:18,890
det er ligesom at give mig en pointer til
denne knude i mit træ, form element,

635
00:28:18,890 --> 00:28:20,100
så at sige.

636
00:28:20,100 --> 00:28:22,220
>> Nu vil jeg bare kender fra
kende lidt af HTML

637
00:28:22,220 --> 00:28:26,330
nu er vi have læst nogle online
reference, at en form element understøtter

638
00:28:26,330 --> 00:28:29,950
en hel masse begivenhed listeners-- i
med andre ord, vasketøjet listen begivenhed

639
00:28:29,950 --> 00:28:31,700
lyttere, som vi så for et øjeblik siden.

640
00:28:31,700 --> 00:28:35,950
Jeg ved fra at læse dokumentationen
at onSubmit er en gyldig begivenhed

641
00:28:35,950 --> 00:28:38,520
lytteren til en form element.

642
00:28:38,520 --> 00:28:41,480
>> Så når jeg ved, at,
det er sikkert for mig at gøre

643
00:28:41,480 --> 00:28:45,390
den following-- få denne node
fra træet, formen element,

644
00:28:45,390 --> 00:28:48,070
og gå sin såkaldte
onSubmit ejendom.

645
00:28:48,070 --> 00:28:49,880
Så dot betyder bare
Dette er en egenskab,

646
00:28:49,880 --> 00:28:52,180
som en særlig værdi inde i den.

647
00:28:52,180 --> 00:28:55,590
Og hvad datatype er jeg
tildele, tilsyneladende,

648
00:28:55,590 --> 00:28:58,900
at onSubmit, hvilket er
effektivt en variabel inde

649
00:28:58,900 --> 00:29:01,010
af denne knude i træet?

650
00:29:01,010 --> 00:29:04,100
Det er et felt inde i denne struct.

651
00:29:04,100 --> 00:29:05,810
Hvad er den datatype?

652
00:29:05,810 --> 00:29:07,030
>> En funktion, ja.

653
00:29:07,030 --> 00:29:08,607
Så det viser sig, at PHP har dette.

654
00:29:08,607 --> 00:29:10,440
Og selv om vi
ikke fortælle dig om det,

655
00:29:10,440 --> 00:29:16,240
C har også funktionspointere, de
evne til at passere og tildele funktioner

656
00:29:16,240 --> 00:29:18,330
som variable værdier selv.

657
00:29:18,330 --> 00:29:20,280
Og vi vil ikke
at relatere tilbage til C.

658
00:29:20,280 --> 00:29:23,250
Men for nu, viser det sig, at
på højre side her,

659
00:29:23,250 --> 00:29:26,260
selv om det ser lidt
funky, dette betyder, hey browser,

660
00:29:26,260 --> 00:29:27,550
give mig en funktion.

661
00:29:27,550 --> 00:29:30,560
Jeg har ikke tænkt mig at selv gider give
det et navn, fordi jeg er bogstaveligt talt

662
00:29:30,560 --> 00:29:34,450
kommer til at tildele lad os kalde det
adressen på denne funktion

663
00:29:34,450 --> 00:29:35,994
straks at onSubmit.

664
00:29:35,994 --> 00:29:39,160
Med andre ord, browser, behøver du ikke
at vide, hvad denne funktion hedder.

665
00:29:39,160 --> 00:29:41,890
Du skal bare brug for at vide
hvor det er i hukommelsen.

666
00:29:41,890 --> 00:29:44,210
Og så er det tilstrækkeligt blot at
har et lighedstegn der

667
00:29:44,210 --> 00:29:48,240
og ikke gider at navngive dette, ligesom
foo eller hilse eller andre ord.

668
00:29:48,240 --> 00:29:50,150
Og nu er det bare en stilistisk ting.

669
00:29:50,150 --> 00:29:53,100
Jeg kunne flytte denne krøllede tandbøjle
på til-- sorry-- næste linje

670
00:29:53,100 --> 00:29:54,750
ligesom vi normalt gør CS50.

671
00:29:54,750 --> 00:29:57,550
Men i JavaScript, er det
faktisk stilistisk fælles

672
00:29:57,550 --> 00:30:00,450
at bare holde den krøllede klammeparentes, den
første, på den første linje.

673
00:30:00,450 --> 00:30:02,620
>> Men det følgende, der er
intet interessant.

674
00:30:02,620 --> 00:30:05,830
At åbne krøllede klammeparentes bare
afgrænser starten af ​​min funktion.

675
00:30:05,830 --> 00:30:09,320
Funktionen er nu
identiske, bortset fra jeg har

676
00:30:09,320 --> 00:30:11,452
omfattede return false
indersiden af ​​denne funktion.

677
00:30:11,452 --> 00:30:13,160
Fordi det viser sig out--
og du ville kun

678
00:30:13,160 --> 00:30:14,980
kender det fra læsning
den documentation--

679
00:30:14,980 --> 00:30:19,740
at hvis den funktion, du tildeler
til onSubmit handleren returnerer false,

680
00:30:19,740 --> 00:30:23,420
browseren bare kender og accepterer
ikke at sende formularen til en server.

681
00:30:23,420 --> 00:30:27,210
Hvis den returnerer sand, vil den forelægge
den til en server til grunde, vi vil se

682
00:30:27,210 --> 00:30:28,700
er nyttige på blot et øjeblik.

683
00:30:28,700 --> 00:30:31,000
>> Og så semikolon efter
den krøllede klammeparentes der bare

684
00:30:31,000 --> 00:30:32,541
betyder, at jeg er færdig definere funktionen.

685
00:30:32,541 --> 00:30:36,600
Du ved, hvad så hurtigt at kalde
som du hører en indsendelse.

686
00:30:36,600 --> 00:30:37,100
Okay.

687
00:30:37,100 --> 00:30:40,650
Dette er stadig velsagtens slags grimme.

688
00:30:40,650 --> 00:30:42,190
Så hvad mere kan vi gøre?

689
00:30:42,190 --> 00:30:45,000
>> Tja, det viser sig så i
udgave to, som er last--

690
00:30:45,000 --> 00:30:46,780
og vi vil bare blik på dette.

691
00:30:46,780 --> 00:30:49,850
Med fare for at gøre
det grimmere, viser det sig

692
00:30:49,850 --> 00:30:52,160
at der er et bibliotek i
verden kaldet jQuery.

693
00:30:52,160 --> 00:30:54,900
Og jQuery er en super
populære JavaScript-bibliotek

694
00:30:54,900 --> 00:30:57,930
det er så populært, at de fleste
enhver JavaScript-- det er ikke

695
00:30:57,930 --> 00:31:00,540
ualmindeligt for folk at forveksle
jQuery med JavaScript.

696
00:31:00,540 --> 00:31:01,070
Hvorfor?

697
00:31:01,070 --> 00:31:04,990
JavaScript selv har meget
verbose måder at gøre things--

698
00:31:04,990 --> 00:31:07,820
document.getElementById, dadadadadada.

699
00:31:07,820 --> 00:31:10,510
Du ender med at have meget
lange linjer kode.

700
00:31:10,510 --> 00:31:15,550
>> Så en fyr ved navn John Resid,
der rent faktisk arbejder for en start

701
00:31:15,550 --> 00:31:18,630
op disse dage, kom ud
med dette bibliotek år

702
00:31:18,630 --> 00:31:22,070
siden, at mange mennesker har bidraget
til den kaldte jQuery der ændrer

703
00:31:22,070 --> 00:31:23,449
syntaksen på følgende måde.

704
00:31:23,449 --> 00:31:25,740
Og bare så du har set det,
fordi du vil uvægerligt

705
00:31:25,740 --> 00:31:28,140
se dette, hvis gør en
webbaseret afsluttende projekt,

706
00:31:28,140 --> 00:31:33,270
dette ville være den samme måde
gennemførelse af den samme funktion ved hjælp

707
00:31:33,270 --> 00:31:34,630
denne særlige bibliotek.

708
00:31:34,630 --> 00:31:36,680
>> Nu, i stedet drille
det fra hinanden i sin helhed,

709
00:31:36,680 --> 00:31:38,520
lad os bare se på nogle mønstre.

710
00:31:38,520 --> 00:31:44,850
Denne syntaks synes at have
hvor mange anonyme funktioner

711
00:31:44,850 --> 00:31:49,584
eller navnløse funktioner
eller AKA lambda funktioner?

712
00:31:49,584 --> 00:31:50,190
To, ikke?

713
00:31:50,190 --> 00:31:52,690
Og du ved, at selv om
du ikke er super comfy med dette,

714
00:31:52,690 --> 00:31:55,780
blot ved, at det
siger funktion () to gange.

715
00:31:55,780 --> 00:31:58,172
>> Og det viser sig, at
hvad denne kode er doing--

716
00:31:58,172 --> 00:32:01,255
og vi vil henvise til online referencer,
i sidste ende, for noget hjælp med dette.

717
00:32:01,255 --> 00:32:04,480
Det betyder blot, at når
dokumentet er klar,

718
00:32:04,480 --> 00:32:07,490
gå videre og registrere
følgende funktion

719
00:32:07,490 --> 00:32:12,064
som forelægger handleren for HTML
element hvis unikke idé er demo.

720
00:32:12,064 --> 00:32:14,480
Og så, når det sker,
kalder disse to linjer kode.

721
00:32:14,480 --> 00:32:18,677
Og det er tragisk, en mere
verbose måde at sige return false.

722
00:32:18,677 --> 00:32:21,510
Og vi nævnt dette, bare fordi
du vil se koden som denne online.

723
00:32:21,510 --> 00:32:23,140
Og det er ikke noget at være skræmt af.

724
00:32:23,140 --> 00:32:26,057
Men snarere, husk på, at hvad der er
kommer til at være fælles i JavaScript

725
00:32:26,057 --> 00:32:26,765
er dette paradigme.

726
00:32:26,765 --> 00:32:29,510
Og så det er derfor vi vise det for nu.

727
00:32:29,510 --> 00:32:30,010
Okay.

728
00:32:30,010 --> 00:32:32,730
Så uden bolig for
meget på, at syntaks,

729
00:32:32,730 --> 00:32:37,800
er der er nogen spørgsmål om
disse eksempler eller ideer hidtil?

730
00:32:37,800 --> 00:32:38,300
Okay.

731
00:32:38,300 --> 00:32:40,220
Så lad os bruge dette til noget nyttigt.

732
00:32:40,220 --> 00:32:47,070
Gør en webside, der bare siger hej,
så og så er ikke alt, interessant,

733
00:32:47,070 --> 00:32:47,830
ikke at underwhelm.

734
00:32:47,830 --> 00:32:51,038
Denne ene kommer ikke til at være smuk,
men det kommer til at gøre noget nyttigt.

735
00:32:51,038 --> 00:32:56,350
Lad mig gå tilbage til min mappe
her og åbne op, siger, formular-0.html.

736
00:32:56,350 --> 00:32:59,320
>> Så formoder det er den freshman
intramurale sport registrering side

737
00:32:59,320 --> 00:33:01,780
uden CSS eller nogen sans for design.

738
00:33:01,780 --> 00:33:05,404
Og jeg ønsker at gå videre og
registrere her med en adgangskode.

739
00:33:05,404 --> 00:33:08,320
Og jeg har tænkt mig at acceptere vilkårene
og betingelser, og klik på Tilmeld.

740
00:33:08,320 --> 00:33:11,700
Og nu hjemmesiden siger, "Du er
registreret! (Nå, ikke rigtig.) "

741
00:33:11,700 --> 00:33:15,070
Det ser ud som det virkede, men
lad mig gå videre og tvinge reload.

742
00:33:15,070 --> 00:33:18,720
>> Og lad mig sige, nej, ikke dig
brug for min faktiske e-mail-adresse.

743
00:33:18,720 --> 00:33:21,820
Eller måske vil vi bare sige mail derinde.

744
00:33:21,820 --> 00:33:25,080
Kodeord bliver, ligesom, 12345.

745
00:33:25,080 --> 00:33:28,810
Og så, bare fordi jeg er
en idiot, nu er det 123456789.

746
00:33:28,810 --> 00:33:31,150
Og jeg har ikke tænkt mig at tjekke din boks.

747
00:33:31,150 --> 00:33:31,850
>> Hmm.

748
00:33:31,850 --> 00:33:32,350
Okay.

749
00:33:32,350 --> 00:33:34,920
Så der er flere muligheder
til forbedringer her.

750
00:33:34,920 --> 00:33:39,070
Og du ved, eller vil se i pset
syv, at du kan skrive code--

751
00:33:39,070 --> 00:33:41,890
og du bliver nødt til at skrive
kode i PHP-- at forsvare

752
00:33:41,890 --> 00:33:45,780
mod disse former for bruger
fejl, fordi brugeren klart

753
00:33:45,780 --> 00:33:46,790
har ikke samarbejdet.

754
00:33:46,790 --> 00:33:49,680
Og han eller hun ikke har givet dig alle de
værdier, du ønskede eller endda i formatet

755
00:33:49,680 --> 00:33:50,630
at du ønskede dem.

756
00:33:50,630 --> 00:33:53,250
Så du kan se i pset syv, der
Vi kunne sikkert have nogle

757
00:33:53,250 --> 00:33:55,680
hvis forholdene, der siger
hvis den e-mailadresse

758
00:33:55,680 --> 00:33:59,450
er ikke en username@something.edu,
vi kunne bare

759
00:33:59,450 --> 00:34:02,575
sige undskyld og undskylder til brugeren
meget, ligesom du muligvis i pset syv.

760
00:34:02,575 --> 00:34:05,700
Eller hvis de ikke har kontrolleret, at boksen
viser sig i PHP, kan du registrere, at,

761
00:34:05,700 --> 00:34:06,200
også.

762
00:34:06,200 --> 00:34:09,389
Og slet hvis adgangskoderne
passer ikke som i register.php

763
00:34:09,389 --> 00:34:11,521
til pset syv, kan du registrere det.

764
00:34:11,521 --> 00:34:13,770
Men det er en smerte i
halsen i, at nu anmode de

765
00:34:13,770 --> 00:34:15,510
os at gå hele vejen til serveren.

766
00:34:15,510 --> 00:34:17,053
Brugeren informeres om fejlen.

767
00:34:17,053 --> 00:34:19,219
Og i hvert fald, medmindre du bruger
nogle amatør teknikker,

768
00:34:19,219 --> 00:34:20,929
nu er de nødt til at klikke på pil tilbage.

769
00:34:20,929 --> 00:34:23,300
Ville det ikke være rart, ligesom
en masse hjemmesider i dag,

770
00:34:23,300 --> 00:34:26,190
hvis du havde mere umiddelbar
feedback, øjeblikkeligt?

771
00:34:26,190 --> 00:34:31,389
>> Med andre ord, lad mig gå til version
én, som vil være noget smukkere.

772
00:34:31,389 --> 00:34:33,469
Men det har denne funktion.

773
00:34:33,469 --> 00:34:39,590
Malan, 12345, 123456789, ikke
kommer til at markere feltet, Register.

774
00:34:39,590 --> 00:34:41,330
Passwords er ikke ens.

775
00:34:41,330 --> 00:34:44,459
Så selvom denne pop-up er ugly--
Vi kan erstatte dette i sidste ende

776
00:34:44,459 --> 00:34:47,000
med noget som Bootstrap,
som du kan se i pset syv

777
00:34:47,000 --> 00:34:50,239
er en meget populær library-- jeg gjorde
opdage, at adgangskoderne ikke stemmer overens.

778
00:34:50,239 --> 00:34:50,739
Okay.

779
00:34:50,739 --> 00:34:52,530
Nå, lad mig ordne det som brugeren.

780
00:34:52,530 --> 00:34:55,460
Lad mig gå videre og sige 12345, 12345.

781
00:34:55,460 --> 00:34:57,780
Stadig ikke kontrol af aftalen.

782
00:34:57,780 --> 00:35:00,210
Du skal acceptere den
vilkår og betingelser.

783
00:35:00,210 --> 00:35:01,760
Så hvorfor?

784
00:35:01,760 --> 00:35:04,100
>> Hvis vi allerede har postuleret
at der er en måde,

785
00:35:04,100 --> 00:35:07,260
og vi har behov for dig i
pset syv til påvisning fejl

786
00:35:07,260 --> 00:35:09,780
betingelser som denne
server-side, hvorfor skulle jeg

787
00:35:09,780 --> 00:35:13,940
gider også at gøre dette i JavaScript?

788
00:35:13,940 --> 00:35:15,850
Hvad er et argument i
fordel for tilsætning hvad

789
00:35:15,850 --> 00:35:18,760
du er ved at se som some--
Der er yderligere kompleksitet.

790
00:35:18,760 --> 00:35:23,610

791
00:35:23,610 --> 00:35:25,930
>> Måske er der ingen upside.

792
00:35:25,930 --> 00:35:26,924
Hvad kunne det være?

793
00:35:26,924 --> 00:35:27,840
PUBLIKUM: [uhørligt].

794
00:35:27,840 --> 00:35:31,132

795
00:35:31,132 --> 00:35:32,340
DAVID MALAN: Åh, interessant.

796
00:35:32,340 --> 00:35:33,530
Potentielle exploits.

797
00:35:33,530 --> 00:35:37,540
Så sikker, hvis du ikke håndterer
fejlagtige brugerinput, at store,

798
00:35:37,540 --> 00:35:40,170
måske er det desto bedre, hvis det
ikke engang nå din server.

799
00:35:40,170 --> 00:35:42,160
Jeg vil skubbe tilbage der og
siger, bør du nok

800
00:35:42,160 --> 00:35:43,284
fix begge disse problemer.

801
00:35:43,284 --> 00:35:44,140
Men det er fair.

802
00:35:44,140 --> 00:35:44,710
Hvad ellers?

803
00:35:44,710 --> 00:35:45,626
>> PUBLIKUM: [uhørligt].

804
00:35:45,626 --> 00:35:47,970

805
00:35:47,970 --> 00:35:49,014
>> DAVID MALAN: Ja.

806
00:35:49,014 --> 00:35:51,680
Denne kode, som vi sagde før, er
fortolkes på klientsiden.

807
00:35:51,680 --> 00:35:53,846
Det generer ikke serveren,
hvilket betyder det ikke

808
00:35:53,846 --> 00:35:55,930
påvirke serverens belastning eller kapacitet.

809
00:35:55,930 --> 00:35:59,840
Og nu, for lidt gamle mig,
dette har ingen relevant virkning

810
00:35:59,840 --> 00:36:01,970
fordi jeg har en bruger lige nu.

811
00:36:01,970 --> 00:36:04,010
>> Men hvis du er nogen
hjemmeside anstændig størrelse,

812
00:36:04,010 --> 00:36:07,400
især de største, som Facebook,
jo mere du kan holde folk væk

813
00:36:07,400 --> 00:36:09,927
af din server bedre
fordi en server, selvfølgelig,

814
00:36:09,927 --> 00:36:12,510
kun har en begrænset mængde RAM,
et endeligt antal gigahertz,

815
00:36:12,510 --> 00:36:16,340
et endeligt antal ting
det kan gøre per tidsenhed.

816
00:36:16,340 --> 00:36:19,170
Så hvis der er flere mennesker i
verden ramme din server,

817
00:36:19,170 --> 00:36:21,750
uheld logge
forkert, lige så godt, hvis du

818
00:36:21,750 --> 00:36:23,254
kan holde, at belastningen fra din server.

819
00:36:23,254 --> 00:36:25,420
Plus, især på en mobiltelefon
device-- hvis du har nogensinde

820
00:36:25,420 --> 00:36:29,190
logge ind my.harvard eller
Yales NetID eller lignende,

821
00:36:29,190 --> 00:36:32,330
der er denne latensen med en masse
hjemmesider som det, hvorved det tager,

822
00:36:32,330 --> 00:36:34,110
lignende, en pokkers sekund eller to gange.

823
00:36:34,110 --> 00:36:37,979
Og så, min Gud, hvis du skriver forkert,
så er du nødt til at slå tilbage og lave det igen.

824
00:36:37,979 --> 00:36:40,520
Så der er ventetid, især
på langsomme netværksforbindelser.

825
00:36:40,520 --> 00:36:43,030
Men JavaScript, fordi
det kører på klienten

826
00:36:43,030 --> 00:36:46,720
og behøver ikke at gå frem og tilbage
på tværs af en potentielt langsom internet

827
00:36:46,720 --> 00:36:49,780
forbindelse, kan du få
næsten øjeblikkelige feedback.

828
00:36:49,780 --> 00:36:50,760
>> Så lad os se på dette.

829
00:36:50,760 --> 00:36:54,280
Lad mig åbne op formular-0 og
se på HTML her.

830
00:36:54,280 --> 00:36:56,040
Og lad os bare se, hvad der foregår.

831
00:36:56,040 --> 00:36:59,460
Dette er en form, hvis
handling er register.php.

832
00:36:59,460 --> 00:37:01,530
Jeg er bare ved hjælp af få så
at jeg kunne se URL'en.

833
00:37:01,530 --> 00:37:05,030
Men for adgangskoder, ville vi helt sikkert have
at ændre dette for at skrive i virkeligheden.

834
00:37:05,030 --> 00:37:06,910
Her er et input felt af typen tekst.

835
00:37:06,910 --> 00:37:09,050
Her er en anden indgang
felt af typen password.

836
00:37:09,050 --> 00:37:13,150
Her er, hvis du aldrig har set,
en indgang på afkrydsningsfelt type.

837
00:37:13,150 --> 00:37:15,250
>> Men der er ingen JavaScript
her overhovedet.

838
00:37:15,250 --> 00:37:18,170
Dette er blot HTML,
går til register.php.

839
00:37:18,170 --> 00:37:21,020
Men i version én, hvor jeg
begyndt at få disse pop-ups,

840
00:37:21,020 --> 00:37:23,010
lad os se, hvad der faktisk sker her.

841
00:37:23,010 --> 00:37:26,757
I version én, hvad
Jeg har tænkt mig at see-- I

842
00:37:26,757 --> 00:37:29,340
troede jeg kunne stall nok
med nok ord, men jeg løb ud.

843
00:37:29,340 --> 00:37:35,180

844
00:37:35,180 --> 00:37:38,590
>> I version en-- der vi gå.

845
00:37:38,590 --> 00:37:43,180
I version én, bemærke den following--
og er ikke den bedste implementering,

846
00:37:43,180 --> 00:37:44,420
men det er min første.

847
00:37:44,420 --> 00:37:47,680
Bemærk, at under
formular, jeg har et script-tag.

848
00:37:47,680 --> 00:37:49,430
Og et script-tag betyder,
hey, browser, her

849
00:37:49,430 --> 00:37:52,340
kommer noget kode ind,
typisk JavaScript.

850
00:37:52,340 --> 00:37:54,420
Og nu, mærke til, hvad jeg laver.

851
00:37:54,420 --> 00:37:59,070
På line-- jeg kan knap nok
læse det-- linje 32, den siger,

852
00:37:59,070 --> 00:38:01,420
Var form-- så giv mig
en variabel kaldet form.

853
00:38:01,420 --> 00:38:05,049
Og derefter få document.getElementId
af "registrering."

854
00:38:05,049 --> 00:38:05,590
Hvad er dette?

855
00:38:05,590 --> 00:38:07,290
Nå, lad mig tilbage op her.

856
00:38:07,290 --> 00:38:11,510
Og varsel, ah, jeg gav i form element
en vilkårlig men beskrivende idé

857
00:38:11,510 --> 00:38:13,050
for registrering.

858
00:38:13,050 --> 00:38:16,820
Så det giver mig en variabel,
tillader mig at få fat i den node,

859
00:38:16,820 --> 00:38:19,580
dette rektangel i træet kaldes form.

860
00:38:19,580 --> 00:38:24,460
form.onsubmit midler, hey browser,
registrere en begivenhed lytteren

861
00:38:24,460 --> 00:38:25,470
på denne formular.

862
00:38:25,470 --> 00:38:28,890
Med andre ord, når denne formular er
indsendt, udføre følgende kode.

863
00:38:28,890 --> 00:38:30,810
Det behøver ikke et navn, fordi
hvorfor har du brug for at kende navnet?

864
00:38:30,810 --> 00:38:32,880
Du skal bare brug for at vide
hvad til at udføre, ergo

865
00:38:32,880 --> 00:38:35,610
Det er en anonym eller lambda-funktion.

866
00:38:35,610 --> 00:38:37,632
Og denne funktion er
alle disse linjer her.

867
00:38:37,632 --> 00:38:40,840
Og nu, for at være ærlig, selvom du
måske ikke nogensinde har skrevet JavaScript

868
00:38:40,840 --> 00:38:44,200
før, det er bare C og PHP logik.

869
00:38:44,200 --> 00:38:51,720
Så hvis form.email.value == "" -
så hvis e-mail-feltet er tomt,

870
00:38:51,720 --> 00:38:54,980
yell på brugeren med "Du skal
give din e-mail-adresse. "

871
00:38:54,980 --> 00:38:58,980
Else hvis form.password.value
er tomt hyl på brugeren,

872
00:38:58,980 --> 00:39:00,400
"Du skal angive din adgangskode."

873
00:39:00,400 --> 00:39:04,240
>> Mere interessant logisk,
hvis form.password.value ikke

874
00:39:04,240 --> 00:39:08,630
lige form.confirmation.value--
hvor kom bekræftelse fra?

875
00:39:08,630 --> 00:39:09,470
Lad mig spole tilbage.

876
00:39:09,470 --> 00:39:12,870
Tja, jeg kaldte denne indgang
felt her adgangskode.

877
00:39:12,870 --> 00:39:15,180
Og jeg kaldte denne ene her bekræftelse.

878
00:39:15,180 --> 00:39:17,850
Jeg kunne have kaldt det
adgangskode to eller noget andet.

879
00:39:17,850 --> 00:39:20,560
Jeg er bare logisk kontrol
at disse to er de samme.

880
00:39:20,560 --> 00:39:25,760
Else-- det viser sig det er Mr. Boole
igen-- en Boolesk værdi, afkrydsningsfeltet.

881
00:39:25,760 --> 00:39:29,810
Så hvis jeg siger, udråbstegn point--
hvis ikke form.agreement.checked,

882
00:39:29,810 --> 00:39:31,820
yell på brugeren så godt.

883
00:39:31,820 --> 00:39:34,470
>> Så denne syntaks, du ser, er
meget almindelig i JavaScript,

884
00:39:34,470 --> 00:39:35,970
hvor du har denne punktnotation.

885
00:39:35,970 --> 00:39:37,460
Du starter med en genstand her.

886
00:39:37,460 --> 00:39:41,430
Du dykke dybere til en til
en egenskab som adgangskode.

887
00:39:41,430 --> 00:39:43,280
Og så du får på dens faktiske værdi.

888
00:39:43,280 --> 00:39:45,830
Og igen, her er input.

889
00:39:45,830 --> 00:39:47,310
Her er navnet adgangskode.

890
00:39:47,310 --> 00:39:50,860
Og dens værdi er uanset
menneske har faktisk skrevet i.

891
00:39:50,860 --> 00:39:53,610
>> Så i alle disse
tilfælde, vendte jeg tilbage falsk.

892
00:39:53,610 --> 00:39:55,800
Men hvis ikke, jeg vender tilbage sandt.

893
00:39:55,800 --> 00:39:58,030
Og så nu ser vi en
overbevisende brug af, når

894
00:39:58,030 --> 00:40:00,620
du ville return false til
stoppe, hvad brugerens gør

895
00:40:00,620 --> 00:40:03,200
og gøre ham eller hende med at vælge
igen eller skriv igen.

896
00:40:03,200 --> 00:40:05,870
Ellers, vi vender tilbage sandt.

897
00:40:05,870 --> 00:40:08,585
>> Og lad mig præsentere en
anden variant af dette blot

898
00:40:08,585 --> 00:40:13,140
til frø vis forståelse heraf.

899
00:40:13,140 --> 00:40:16,850
Tja, i version 2 i denne, formular-2--
Jeg vil gøre det med en bølge af en hånd.

900
00:40:16,850 --> 00:40:19,920
Det er, for dem nysgerrige,
jQuery-version,

901
00:40:19,920 --> 00:40:23,330
dem af jer der måske ønsker at
fuske i det pågældende bibliotek.

902
00:40:23,330 --> 00:40:25,145
Men lad os start-- og eventuelle spørgsmål?

903
00:40:25,145 --> 00:40:29,230
Lad mig pause øjeblik, fordi
der var hurtig og meget.

904
00:40:29,230 --> 00:40:32,610
>> Men det gode her er, at alle
af koden er stort set den samme.

905
00:40:32,610 --> 00:40:33,985
Den nye ting er, hvad der er den dom?

906
00:40:33,985 --> 00:40:35,115
Hvad er disse rektangler?

907
00:40:35,115 --> 00:40:35,990
Hvad er disse knudepunkter?

908
00:40:35,990 --> 00:40:37,540
Hvad er en anonym funktion?

909
00:40:37,540 --> 00:40:38,830
Hvad er en event handler?

910
00:40:38,830 --> 00:40:43,480
Men heldigvis er de fleste af det er bare
fuld cirkel fra fx uge nul.

911
00:40:43,480 --> 00:40:43,980
Okay.

912
00:40:43,980 --> 00:40:46,070
Så noget lidt mere interessant?

913
00:40:46,070 --> 00:40:49,340
Nå, først og fremmest, lad mig gå
videre og åbne op Google Maps.

914
00:40:49,340 --> 00:40:53,360
Og du vil opdage, at for en
øjeblik, på den splitsekund,

915
00:40:53,360 --> 00:40:55,930
mærke til, hvad der sker, når
Jeg klikker hurtigt nok.

916
00:40:55,930 --> 00:40:59,720
Og denne forbindelse på Harvard er så
hurtigt, at du ikke rigtig mærke til det.

917
00:40:59,720 --> 00:41:04,469
Men hvad gør du slags slags se
hvis jeg klikke og trække virkelig hurtigt?

918
00:41:04,469 --> 00:41:07,010
De af jer, ser online,
hvis du bremse denne til 0,5x hastighed,

919
00:41:07,010 --> 00:41:09,640
du kan se dette bedre.

920
00:41:09,640 --> 00:41:13,550
>> Hvad der skete bare
før jeg klikkede og slæbt?

921
00:41:13,550 --> 00:41:15,900
Lad mig prøve her-- lade mig gøre
noget andet, ligesom 90.210.

922
00:41:15,900 --> 00:41:17,550
Lad os gå langt væk.

923
00:41:17,550 --> 00:41:19,000
Det var virkelig hurtig, også.

924
00:41:19,000 --> 00:41:22,460
Hvad med Disney World?

925
00:41:22,460 --> 00:41:23,190
Der vi går.

926
00:41:23,190 --> 00:41:23,690
OK.

927
00:41:23,690 --> 00:41:26,030
Hvad har du se et splitsekund?

928
00:41:26,030 --> 00:41:27,200
Bare, ligesom, torve, right?

929
00:41:27,200 --> 00:41:28,930
Pladsholdere til fliser?

930
00:41:28,930 --> 00:41:30,270
>> Nå, hvad sker der her?

931
00:41:30,270 --> 00:41:35,410
Google Maps er et dejligt eksempel på
denne teknologi, der kaldes AJAX.

932
00:41:35,410 --> 00:41:38,510
Og det er her, vi vil begynde at
bruge JavaScript i en særlig

933
00:41:38,510 --> 00:41:39,277
dragende måde.

934
00:41:39,277 --> 00:41:41,610
Tilbage i dag, var der
denne hjemmeside kaldet MapQuest.

935
00:41:41,610 --> 00:41:44,120
Og jeg skulle have taget en
screenshot af dette fra 1990'erne,

936
00:41:44,120 --> 00:41:45,820
hvor, hvis du ønskede at
se op her på kortet,

937
00:41:45,820 --> 00:41:48,590
ville du bogstaveligt talt klikke en pil
op på toppen, der viste dig

938
00:41:48,590 --> 00:41:49,870
en anden firkant af kortet.

939
00:41:49,870 --> 00:41:51,790
Hvis du ønskede at gå til venstre, du
klikkede en pil, der viste dig

940
00:41:51,790 --> 00:41:53,210
en anden firkant af kortet.

941
00:41:53,210 --> 00:41:54,840
Og nogle hjemmesider stadig gør det i dag.

942
00:41:54,840 --> 00:41:57,820
Men selv MapQuest har fået
bedre, ligesom Google Maps.

943
00:41:57,820 --> 00:42:01,880
>> I stedet, hvad er bedre disse
dage er websteder, der bruger AJAX.

944
00:42:01,880 --> 00:42:04,510
AJAX-- også kendt som
Asynchronous JavaScript og XML,

945
00:42:04,510 --> 00:42:08,370
som er blot en fancy måde at sige
en teknologi eller teknik,

946
00:42:08,370 --> 00:42:14,200
tillader en browser med JavaScript
at foretage yderligere HTTP-forespørgsler

947
00:42:14,200 --> 00:42:16,390
efter siden er indlæst.

948
00:42:16,390 --> 00:42:17,479
Så hvad betyder det?

949
00:42:17,479 --> 00:42:19,270
Tja, det ville være venlig
irriterende i Gmail

950
00:42:19,270 --> 00:42:21,103
Hvis hver gang du ønskede
at tjekke din post,

951
00:42:21,103 --> 00:42:24,940
du havde bogstaveligt ramt Ctrl-R eller
Kommando-R eller klik på knappen Genindlæs

952
00:42:24,940 --> 00:42:26,580
og hele darn siden ville genindlæse.

953
00:42:26,580 --> 00:42:26,800
Højre?

954
00:42:26,800 --> 00:42:28,460
Det ville flash hvidt
sandsynligvis for sekund.

955
00:42:28,460 --> 00:42:30,043
Du ville se dumme statuslinjen.

956
00:42:30,043 --> 00:42:33,170
Og bare for at se, om du har nye
mail, hele websiden og URL

957
00:42:33,170 --> 00:42:34,580
du er på ville have til at genindlæse.

958
00:42:34,580 --> 00:42:35,960
>> Men det er ikke det, der sker i Gmail.

959
00:42:35,960 --> 00:42:36,459
Højre?

960
00:42:36,459 --> 00:42:40,300
Når du får en ny e-mail i
Gmail, hvad der sker på skærmen?

961
00:42:40,300 --> 00:42:41,480
Det viser blot op, ikke?

962
00:42:41,480 --> 00:42:44,280
Det bare magisk vises
som ny række i tabellen.

963
00:42:44,280 --> 00:42:47,030
Det faktisk indebærer en
anstændigt beløb af kompleksitet.

964
00:42:47,030 --> 00:42:51,892
Faktisk, hvis du tænker over dette træ,
som selvom er en simpel en her,

965
00:42:51,892 --> 00:42:54,100
Gmail-- og jeg ville have til at se
på den kode til at være sure--

966
00:42:54,100 --> 00:42:58,710
har sandsynligvis en HTML-tabel eller måske
en uordnet liste, som den gør

967
00:42:58,710 --> 00:43:01,060
hver af dine indbakker e-mails som.

968
00:43:01,060 --> 00:43:04,050
>> Og så hvis du forestille dig dette er der
er et træ i hukommelsen, når du er

969
00:43:04,050 --> 00:43:09,050
bruger Gmail, der ser slags slags
som denne, når Google indser, ooh,

970
00:43:09,050 --> 00:43:12,770
du har en ny e-mail, det ikke
vil genopbygge hele træet.

971
00:43:12,770 --> 00:43:16,430
Snarere, det ønsker at finde den node i
træet, der repræsenterer din indbakke

972
00:43:16,430 --> 00:43:18,580
og bare indsætte en ny knude.

973
00:43:18,580 --> 00:43:24,640
>> Så meget lig pset fem, hvor man
skulle indsætte knudepunkter i en hash tabel,

974
00:43:24,640 --> 00:43:28,410
ligeledes gør Google via
JavaScript-kode, at det har skrevet,

975
00:43:28,410 --> 00:43:31,890
traverse dette træ, regne ud hvor
er, at inbox del af vinduet,

976
00:43:31,890 --> 00:43:33,440
og derefter indsætte en ny række.

977
00:43:33,440 --> 00:43:37,460
Og en ny række betyder blot én
eller flere nye knudepunkter i et træ.

978
00:43:37,460 --> 00:43:41,340
>> Og så AJAX er denne teknik
der giver mulighed for netop dette.

979
00:43:41,340 --> 00:43:44,440
Når du har besøgt en URL,
men vanvittigt længe det er,

980
00:43:44,440 --> 00:43:46,472
og når har
er indlæst, kan du stadig

981
00:43:46,472 --> 00:43:48,430
grab flere data fra
internet-- uanset om det er

982
00:43:48,430 --> 00:43:52,460
en e-mail eller en flise af en map--
Grib det bag kulisserne

983
00:43:52,460 --> 00:43:55,290
og derefter indsætte det i siden
således at den menneskelige egentlig ikke

984
00:43:55,290 --> 00:43:56,910
nødt til at vente på det.

985
00:43:56,910 --> 00:43:58,980
>> Facebook Messenger fungerer på samme måde.

986
00:43:58,980 --> 00:44:01,562
En række andre websites--
oh, faktisk selv dette.

987
00:44:01,562 --> 00:44:04,270
Jeg mener, det er helt ærligt, slags
en irriterende funktion i disse dage.

988
00:44:04,270 --> 00:44:07,500
Hvis jeg begynder at søge efter cats-- dette
er lidt af en forfærdelig brugeroplevelse.

989
00:44:07,500 --> 00:44:08,990
Det bare begynder at søge efter mig.

990
00:44:08,990 --> 00:44:10,050
Nå, hvad er det gør?

991
00:44:10,050 --> 00:44:12,920
Webadressen har ikke rigtig ændret sig
siden jeg begyndte at skrive.

992
00:44:12,920 --> 00:44:17,330
Men hvad der foregår på tværs af
wire-- OK, hmm interessant.

993
00:44:17,330 --> 00:44:20,470
Hvad sker der på tværs af
wire her bliver bare mærkelig.

994
00:44:20,470 --> 00:44:21,090
>> OK.

995
00:44:21,090 --> 00:44:24,670
Så lad mig gå videre og inspicere
element og gå til fanen Netværk

996
00:44:24,670 --> 00:44:27,040
og forsøge at gøre dette
tekniske og mindre om katte.

997
00:44:27,040 --> 00:44:32,595
Som jeg skriver, bogstaveligt talt, katte
og-- hvad der sker

998
00:44:32,595 --> 00:44:37,710
per-- Jeg har ikke tænkt mig at klikke det.

999
00:44:37,710 --> 00:44:38,210
Okay.

1000
00:44:38,210 --> 00:44:44,280
Så hernede, hvad der sker hver
gang jeg skriver et tegn, tilsyneladende?

1001
00:44:44,280 --> 00:44:45,000
Ligesom, lavt niveau?

1002
00:44:45,000 --> 00:44:47,860
Hvad sker der med hver af dem,
karakterer jeg skriver på mit tastatur?

1003
00:44:47,860 --> 00:44:48,359
Ja?

1004
00:44:48,359 --> 00:44:50,950
PUBLIKUM: [uhørligt].

1005
00:44:50,950 --> 00:44:52,340
>> DAVID MALAN: Præcis.

1006
00:44:52,340 --> 00:44:55,600
Hver af disse tegn er
gå til Google, en ad gangen.

1007
00:44:55,600 --> 00:44:58,490
De opbygger en streng
på deres server, der repræsenterer

1008
00:44:58,490 --> 00:44:59,936
alt, hvad jeg har skrevet i hidtil.

1009
00:44:59,936 --> 00:45:01,810
Og hver gang jeg skriver
en anden karakter, de

1010
00:45:01,810 --> 00:45:04,530
bruge deres hemmelige sauce af et
søgealgoritme og finde ud af,

1011
00:45:04,530 --> 00:45:07,370
mener han denne kat side
eller denne kat side eller lignende?

1012
00:45:07,370 --> 00:45:10,620
Så i en vis forstand, det giver mig en
bedre oplevelse i at jeg ikke engang

1013
00:45:10,620 --> 00:45:11,860
nødt til at fuldføre min tanke.

1014
00:45:11,860 --> 00:45:14,440
Og ja, det er en nyttig
ting, autofuldførelse i almindelighed.

1015
00:45:14,440 --> 00:45:17,690
Hvis deres algoritmer er gode nok
og hvis mine søgninger er indlysende nok,

1016
00:45:17,690 --> 00:45:19,300
Jeg behøver ikke at skrive hele ordet.

1017
00:45:19,300 --> 00:45:22,110
De vil fortælle mig, hvad det
er jeg faktisk søger efter.

1018
00:45:22,110 --> 00:45:25,940
Så hvad Google kalder øjeblikkelig
søgningen er bare bruger AJAX,

1019
00:45:25,940 --> 00:45:30,820
ved hjælp af kode, der giver dem mulighed for at anmode om
ekstra indhold via en webbrowser

1020
00:45:30,820 --> 00:45:34,026
bag kulisserne ved hjælp af denne
nyt sprog, JavaScript.

1021
00:45:34,026 --> 00:45:35,400
Så vi har et par minutter tilbage.

1022
00:45:35,400 --> 00:45:37,710
Og lad mig kalde min kammerat
Colton op på scenen,

1023
00:45:37,710 --> 00:45:40,090
da det lod
særlig sjovt sidste gang

1024
00:45:40,090 --> 00:45:42,290
at indføre en teknologi
at nogle af jer

1025
00:45:42,290 --> 00:45:44,769
har udtrykt interesse
i for de endelige projekter.

1026
00:45:44,769 --> 00:45:47,310
Vi troede, det ville være sjovt at bringe
en frivillig, selv om, i dag

1027
00:45:47,310 --> 00:45:50,074
til at vise dig en tilføjelse til
dette, der tillader du-- yeah,

1028
00:45:50,074 --> 00:45:50,990
Jeg så denne hånd først.

1029
00:45:50,990 --> 00:45:52,900
Kom op.

1030
00:45:52,900 --> 00:45:53,560
Meget godt klaret.

1031
00:45:53,560 --> 00:45:55,035
Godt arbejde.

1032
00:45:55,035 --> 00:45:57,410
Jeg har tænkt mig at projicere dette på
skærmen på blot et øjeblik.

1033
00:45:57,410 --> 00:45:58,150
Hvad er dit navn for alle?

1034
00:45:58,150 --> 00:45:59,180
>> EFA: Jeg er Efa.

1035
00:45:59,180 --> 00:45:59,410
>> DAVID MALAN: Etha?

1036
00:45:59,410 --> 00:45:59,785
>> EFA: Efa.

1037
00:45:59,785 --> 00:46:00,160
>> DAVID MALAN: Efa?

1038
00:46:00,160 --> 00:46:00,730
>> EFA: Ja.

1039
00:46:00,730 --> 00:46:01,250
>> DAVID MALAN: Rart at se dig.

1040
00:46:01,250 --> 00:46:01,600
Okay.

1041
00:46:01,600 --> 00:46:02,590
Lad mig få denne klar.

1042
00:46:02,590 --> 00:46:04,423
Kom over til den
midten med Colton her.

1043
00:46:04,423 --> 00:46:07,050
Hvad Colton har i sine hænder
dag er en fjernbetjening.

1044
00:46:07,050 --> 00:46:10,440
Så i stedet for bare stå der i en
tre-dimensionelle verden ser rundt

1045
00:46:10,440 --> 00:46:14,080
som Colton gjorde, nu Efa kan
faktisk gå rundt ved at gå op,

1046
00:46:14,080 --> 00:46:16,689
ned, til venstre og til højre som en
Nintendo eller Xbox-controller.

1047
00:46:16,689 --> 00:46:18,230
EFA: Jeg har tænkt mig at falde ned fra scenen.

1048
00:46:18,230 --> 00:46:20,500
DAVID MALAN: jeg vil
stå nogenlunde herovre.

1049
00:46:20,500 --> 00:46:21,991
Men det er en risiko.

1050
00:46:21,991 --> 00:46:22,490
OK.

1051
00:46:22,490 --> 00:46:25,690
Så gå videre og sætte dem på.

1052
00:46:25,690 --> 00:46:29,315
Lad mig gå videre og
skifte til skærmbilledet her.

1053
00:46:29,315 --> 00:46:30,670
Lad mig dæmpe lyset.

1054
00:46:30,670 --> 00:46:32,780
Og Colton, lad mig
komme stå ved siden af ​​dig.

1055
00:46:32,780 --> 00:46:35,520
>> Har du lyst til at forklare her
med mikrofonen hvad vi laver?

1056
00:46:35,520 --> 00:46:36,380
Vær så god.

1057
00:46:36,380 --> 00:46:37,280
>> COLTON: Selvfølgelig.

1058
00:46:37,280 --> 00:46:39,980
Så lige nu er vi
lastning op Oculus,

1059
00:46:39,980 --> 00:46:43,070
Jeg gætter operating-- ikke opererer
system, men de vigtigste program, hvor

1060
00:46:43,070 --> 00:46:46,630
du kan få adgang til alle de spil og
apps, der er i biblioteket.

1061
00:46:46,630 --> 00:46:50,060
Så lige nu, skal det sige
trykke på pegefeltet for at begynde.

1062
00:46:50,060 --> 00:46:53,430
Touchpad kommer til at være på den
højre side af headsettet.

1063
00:46:53,430 --> 00:46:54,569
Så gå videre og tap--

1064
00:46:54,569 --> 00:46:55,110
EFA: Åh, mand.

1065
00:46:55,110 --> 00:46:56,443
DAVID MALAN: Ja, der du går.

1066
00:46:56,443 --> 00:47:00,340

1067
00:47:00,340 --> 00:47:02,460
Kvaliteten Efa er at se
er meget højere kvalitet.

1068
00:47:02,460 --> 00:47:03,831
Dette er blot Wi-Fi her.

1069
00:47:03,831 --> 00:47:05,580
COLTON: Så hvad du er
vil ønsker at gøre

1070
00:47:05,580 --> 00:47:08,350
er ser mod toppen
til højre på skærmen.

1071
00:47:08,350 --> 00:47:10,420
Jep, det spil på den meget øverst til højre.

1072
00:47:10,420 --> 00:47:14,780
Og så når du vælger
det, skal du trykke på touchpad igen.

1073
00:47:14,780 --> 00:47:17,010
Jeg tror, ​​dens Dreadhalls.

1074
00:47:17,010 --> 00:47:20,820
Og så her er en-- her, lad
mig holde dine briller for dig.

1075
00:47:20,820 --> 00:47:24,420

1076
00:47:24,420 --> 00:47:25,790
>> Så jeg gav ham bare en controller.

1077
00:47:25,790 --> 00:47:28,886
Så nu kan han styre spillet.

1078
00:47:28,886 --> 00:47:30,510
Han kan flytte rundt og den slags.

1079
00:47:30,510 --> 00:47:31,968
Så gå videre og se op til toppen.

1080
00:47:31,968 --> 00:47:33,640
Du bør se New Game.

1081
00:47:33,640 --> 00:47:36,310
Så gå videre og du kan gøre det.

1082
00:47:36,310 --> 00:47:39,320
Nu skulle du være i stand til at kontrollere
dig selv med controlleren,

1083
00:47:39,320 --> 00:47:43,860
samt, så snart
spillet indlæser heroppe.

1084
00:47:43,860 --> 00:47:46,356
Dette kan være en lille smule skræmmende.

1085
00:47:46,356 --> 00:47:47,300
>> EFA: Nu du fortæller mig.

1086
00:47:47,300 --> 00:47:50,132
OK.

1087
00:47:50,132 --> 00:47:51,080
>> COLTON: Okay.

1088
00:47:51,080 --> 00:47:52,650
Så bekræfte, at du kan bevæge dig rundt.

1089
00:47:52,650 --> 00:47:52,750
OK.

1090
00:47:52,750 --> 00:47:53,583
Du kan flytte rundt.

1091
00:47:53,583 --> 00:47:54,300
Perfekt.

1092
00:47:54,300 --> 00:47:56,470
Så hvis du ser ned, har du et kort.

1093
00:47:56,470 --> 00:47:58,170
Kort viser dig, hvor du er.

1094
00:47:58,170 --> 00:47:59,720
Du kan se rundt i lokalet.

1095
00:47:59,720 --> 00:48:01,440
Du kan helt vende rundt.

1096
00:48:01,440 --> 00:48:02,128
Ja, præcis.

1097
00:48:02,128 --> 00:48:02,627
Vend om.

1098
00:48:02,627 --> 00:48:05,370

1099
00:48:05,370 --> 00:48:07,125
>> Så se til venstre.

1100
00:48:07,125 --> 00:48:09,875
Jeg tror, ​​der er noget, du kan
samle op på en tønde i rummet.

1101
00:48:09,875 --> 00:48:11,709
>> EFA: Hvordan får jeg den
kort af vejen?

1102
00:48:11,709 --> 00:48:12,375
COLTON: Kig op.

1103
00:48:12,375 --> 00:48:12,980
Bare se op.

1104
00:48:12,980 --> 00:48:13,480
Okay.

1105
00:48:13,480 --> 00:48:13,765
Værs'go.

1106
00:48:13,765 --> 00:48:15,181
Nu gå videre og bare vende rundt.

1107
00:48:15,181 --> 00:48:21,460

1108
00:48:21,460 --> 00:48:24,620
Så ser længere til venstre.

1109
00:48:24,620 --> 00:48:25,530
Hold dig i bevægelse til venstre.

1110
00:48:25,530 --> 00:48:26,960
Hold udkig venstre.

1111
00:48:26,960 --> 00:48:27,541
Bliv ved.

1112
00:48:27,541 --> 00:48:28,040
Ja.

1113
00:48:28,040 --> 00:48:28,720
>> EFA: Åh, den vej.

1114
00:48:28,720 --> 00:48:29,261
>> COLTON: Ja.

1115
00:48:29,261 --> 00:48:30,999
Gå hen imod det med controlleren.

1116
00:48:30,999 --> 00:48:31,540
Værs'go.

1117
00:48:31,540 --> 00:48:32,790
Nu skal det sige samle den op.

1118
00:48:32,790 --> 00:48:33,360
Værs'go.

1119
00:48:33,360 --> 00:48:34,290
Saml det op.

1120
00:48:34,290 --> 00:48:35,550
Okay.

1121
00:48:35,550 --> 00:48:38,286
Lad os nu komme ud af dette rum.

1122
00:48:38,286 --> 00:48:42,209
Gå videre og gå til den dør.

1123
00:48:42,209 --> 00:48:45,000
Så du kommer til at hold-- det siger
hold knappen for at tvinge den åben.

1124
00:48:45,000 --> 00:48:46,333
Så gå videre og hold knappen.

1125
00:48:46,333 --> 00:48:48,250
Jep, tvinger det åbne.

1126
00:48:48,250 --> 00:48:48,750
Okay.

1127
00:48:48,750 --> 00:48:49,410
Godt arbejde.

1128
00:48:49,410 --> 00:48:50,826
Nu vi gå ud af lokalet.

1129
00:48:50,826 --> 00:48:56,970

1130
00:48:56,970 --> 00:49:01,366
Så jeg har tænkt mig at lade resten op
til dig og se, hvad du finder ud af.

1131
00:49:01,366 --> 00:49:02,865
EFA: Jeg har ikke tænkt i mørke rum.

1132
00:49:02,865 --> 00:49:07,315

1133
00:49:07,315 --> 00:49:07,815
Åh vent.

1134
00:49:07,815 --> 00:49:09,314
Nu jeg nødt til at gå ned den mørke hal?

1135
00:49:09,314 --> 00:49:10,785
OK, jeg vil tilbage [uhørligt].

1136
00:49:10,785 --> 00:49:15,520

1137
00:49:15,520 --> 00:49:16,270
COLTON: Okay.

1138
00:49:16,270 --> 00:49:17,560
Nogle flere elementer til at samle op.

1139
00:49:17,560 --> 00:49:19,370
Ligner nogle mønter.

1140
00:49:19,370 --> 00:49:22,242
Det er en lås pick.

1141
00:49:22,242 --> 00:49:24,200
Så hvis du finder en låst
dør, kan du bruge det.

1142
00:49:24,200 --> 00:49:27,755

1143
00:49:27,755 --> 00:49:28,380
Er du bange?

1144
00:49:28,380 --> 00:49:29,371
>> EFA: Ikke endnu.

1145
00:49:29,371 --> 00:49:29,871
COLTON: OK.

1146
00:49:29,871 --> 00:49:34,850

1147
00:49:34,850 --> 00:49:35,497
>> Pretend-- ja.

1148
00:49:35,497 --> 00:49:37,330
Bare lade som du er
faktisk stående der.

1149
00:49:37,330 --> 00:49:39,580
Og hvis du slår around--
du har fået til at vænne sig til det.

1150
00:49:39,580 --> 00:49:40,752
Men det giver mening.

1151
00:49:40,752 --> 00:49:43,960
DAVID MALAN: Og mens Efa fortsætter med at
spille, da vi kunne gøre det hele dagen,

1152
00:49:43,960 --> 00:49:45,381
vi alle kan tip-tå herude.

1153
00:49:45,381 --> 00:49:48,130
Men vi har to andre par,
Hvis du gerne vil komme op og spille.

1154
00:49:48,130 --> 00:49:49,980
Ellers vil vi se
dig næste onsdag.

1155
00:49:49,980 --> 00:49:51,354
Tak til vores frivillige i dag.

1156
00:49:51,354 --> 00:49:52,101
[Applaus]

1157
00:49:52,101 --> 00:49:54,506

1158
00:49:54,506 --> 00:49:57,392
>> [MUSIC - "Seinfeld TEMA"]

1159
00:49:57,392 --> 00:49:58,222

1160
00:49:58,222 --> 00:50:00,180
SPEAKER 1: Jamen, jeg er
sætte en ny PL montere på.

1161
00:50:00,180 --> 00:50:01,800
Jeg har lige ændret OLPF--

1162
00:50:01,800 --> 00:50:03,980
>> SPEAKER 2: Så hvad
præcis laver du?

1163
00:50:03,980 --> 00:50:07,063
>> SPEAKER 1: Nå, hver enkelt af these--
her, vil jeg vise dig denne ene i her.

1164
00:50:07,063 --> 00:50:08,690
Du kan se det lige her.

1165
00:50:08,690 --> 00:50:09,510
>> SPEAKER 3: Jeg tror, ​​jeg er godt med disse.

1166
00:50:09,510 --> 00:50:09,933
Vil du have noget mere?

1167
00:50:09,933 --> 00:50:11,325
>> SPEAKER 4: Nej, jeg er god. [Uhørligt].

1168
00:50:11,325 --> 00:50:12,200
>> SPEAKER 3: Nej, [uhørligt].

1169
00:50:12,200 --> 00:50:12,700
Tag noget.

1170
00:50:12,700 --> 00:50:21,165

1171
00:50:21,165 --> 00:50:22,290
SPEAKER 1: Forskellige farver.

1172
00:50:22,290 --> 00:50:22,890
SPEAKER 2: OK.

1173
00:50:22,890 --> 00:50:26,690
SPEAKER 1: Så i sidste ende, hvad det
gør, er det justerer farven of--