1
00:00:00,000 --> 00:00:02,850
>> [9 § - Mindre Bekväm]

2
00:00:02,850 --> 00:00:04,920
[Nate Hardison - Harvard University]

3
00:00:04,920 --> 00:00:07,230
[Det här är CS50. - CS50.TV]

4
00:00:07,230 --> 00:00:11,140
>> Okej. Så, sista delen av terminen.

5
00:00:11,140 --> 00:00:18,380
För att starta, jag vet att det har varit en del skrik att göra några Ajax,

6
00:00:18,380 --> 00:00:21,860
men finns det några andra ämnen som vi borde göra först?

7
00:00:21,860 --> 00:00:24,960
Låt mig gå över till iPad så att vi har -

8
00:00:24,960 --> 00:00:29,160
Låt mig använda svart istället för orange.

9
00:00:29,160 --> 00:00:35,730
Ajax står på menyn. Någon annan?

10
00:00:35,730 --> 00:00:40,670
Alla andra ämnen som folk vill se? Jag hörde DOM också tidigare.

11
00:00:40,670 --> 00:00:45,130
[Elev] jQuery. >> JQuery. Okej.

12
00:00:45,130 --> 00:00:49,190
jQuery. Vi kan göra ett hugg på det också.

13
00:00:49,190 --> 00:00:58,190
[Elev] XML. >> XML. >> [Elev] JSON. >> XML, JSON. Okej.

14
00:00:58,190 --> 00:01:06,390
PHP? Allt bra? C? Allt bra? >> [Elev] Det skulle inte skada att tala om PHP.

15
00:01:06,390 --> 00:01:10,890
Hashtabeller? Antal försök? Länkade listor?

16
00:01:10,890 --> 00:01:16,970
[Elev] Åh, på frågesport från förra året, det finns en tabell för omega och den stora O.

17
00:01:16,970 --> 00:01:21,360
Yeah. >> [Elev] under tiden för de olika typer av versioner och illusioner.

18
00:01:21,360 --> 00:01:25,140
Kan vi prata om det? >> Ja. Vi pratar om en liten bit av datastrukturer.

19
00:01:25,140 --> 00:01:33,640
[Elev] Ja. >> [Elev] Försöker. >> [Hardison] Datastrukturer.

20
00:01:33,640 --> 00:01:37,230
Vi kommer att tala om några försök för säker.

21
00:01:37,230 --> 00:01:42,530
[Elev] Kan vi ha CSS lite? >> Ja, det kan vi göra lite CSS.

22
00:01:45,280 --> 00:01:49,290
Alla andra ämnen? Sam? >> [Elev] Scope i PHP. >> [Hardison] Scope.

23
00:01:52,540 --> 00:01:56,760
Omfattning i PHP. >> [Elev] HTTP.

24
00:01:56,760 --> 00:02:01,410
HTTP. Awesome.

25
00:02:09,729 --> 00:02:14,380
Jag antar att ett sätt att göra detta skulle vara att organisera allt slags kronologiskt

26
00:02:14,380 --> 00:02:17,930
och börja med datastrukturer eftersom de som var tidigast.

27
00:02:17,930 --> 00:02:23,480
Eller vi kan tilldela dem någon form av prioritetsviktning och gå därifrån.

28
00:02:23,480 --> 00:02:25,860
Så vad tycker ni?

29
00:02:25,860 --> 00:02:27,820
Finns det något som alla är döende för att se?

30
00:02:27,820 --> 00:02:31,200
Låt oss göra en höjning av händer. Vad sägs om Ajax?

31
00:02:31,200 --> 00:02:33,320
Hur många av er vill veta om Ajax?

32
00:02:33,320 --> 00:02:37,870
Hur många av er är som, "Man, Ajax, jag har dig"? Ingen. Okej.

33
00:02:37,870 --> 00:02:40,900
Så Ajax är ganska hög. Låt oss stjärnan den killen.

34
00:02:40,900 --> 00:02:46,650
Vad sägs om DOM? Alla redo att rocka DOM? Nej? Okej. Vi stjärnan den också.

35
00:02:46,650 --> 00:02:49,040
jQuery?

36
00:02:50,330 --> 00:02:52,780
Queryless. Ja. Okej.

37
00:02:52,780 --> 00:02:56,380
Ett par personer för jQuery, men fortfarande människor är lite mer chill med det. Okej.

38
00:02:56,380 --> 00:03:03,000
XML? XML. >> [Elev] Använder du att mer än i samband med Ajax?

39
00:03:03,000 --> 00:03:08,670
I den meningen att - Ja.

40
00:03:08,670 --> 00:03:14,540
Jag menar, är det en viktig del i Ajax, så jag antar att vi kan kombinera det med Ajax,

41
00:03:14,540 --> 00:03:16,700
prata om det hela där.

42
00:03:16,700 --> 00:03:21,830
JSON? Vad är JSON? Okej, svalna.

43
00:03:21,830 --> 00:03:27,200
Datastrukturer? Människor känner sig ganska bra där?

44
00:03:27,200 --> 00:03:29,640
Du vet att dina länkade listor, känna dina hashtabeller?

45
00:03:29,640 --> 00:03:33,510
Hur gick Speller går för alla? Det var en doozy, va? Yeah. Okej.

46
00:03:33,510 --> 00:03:37,320
Ja, vi kan prata lite om dem, men återigen, inte så viktigt.

47
00:03:37,320 --> 00:03:39,240
CSS?

48
00:03:41,210 --> 00:03:43,960
Som gör din webbplats ser ganska. Okej.

49
00:03:43,960 --> 00:03:50,670
Omfattning i PHP? En stor hand där borta. Två stora händer, tre. Okej.

50
00:03:50,670 --> 00:03:53,060
Kanske ett medium hand. >> [Elev] Mer än 2.

51
00:03:53,060 --> 00:03:56,280
Yeah. Sam är en kampanj. Upp med händerna.

52
00:03:56,280 --> 00:04:00,910
HTTP? Okej.

53
00:04:00,910 --> 00:04:07,410
>> Så låt oss se. Det ser definitivt ut som Ajax och DOM är att slåss om.

54
00:04:07,410 --> 00:04:10,300
Så låt oss börja med det.

55
00:04:12,740 --> 00:04:16,380
Jag antar att vi har ett par alternativ här.

56
00:04:16,380 --> 00:04:21,040
En är att sorts göra en resumé av vad Ajax och XML är

57
00:04:21,040 --> 00:04:26,520
eftersom vi inte riktigt har tid att göra det i avsnittet eller i problemet ställer.

58
00:04:26,520 --> 00:04:31,600
Den andra saken är att dyka in i en del problem från tidigare års frågesporter

59
00:04:31,600 --> 00:04:33,990
och se vad som händer där.

60
00:04:33,990 --> 00:04:40,210
Varje preferens mellan de två? >> [Elev] Jag tror konkreta exempel skulle vara mer användbar.

61
00:04:40,210 --> 00:04:42,820
Konkreta exempel mer hjälp? Okej.

62
00:04:42,820 --> 00:04:46,300
Alla de i synnerhet de av er från Ajax besättningen?

63
00:04:46,300 --> 00:04:48,840
Eventuella problem som du vill titta på?

64
00:04:48,840 --> 00:04:54,850
[Elev] Är händelsehanterare relaterade till Ajax alls? Jag tror that -

65
00:04:54,850 --> 00:05:00,380
JavaScript-händelsehanterare inte nödvändigtvis relaterar till Ajax. De kan.

66
00:05:00,380 --> 00:05:03,240
[Elev] Ja, det är ett annat begrepp som jag egentligen inte får. >> Okej.

67
00:05:03,240 --> 00:05:06,670
[Elev] Men jag tror i frågesporten från det senaste året finns det 1 stort problem

68
00:05:06,670 --> 00:05:12,320
i de senare delarna av frågesport som är relaterade till Ajax och den syntax som jag inte riktigt -

69
00:05:12,320 --> 00:05:14,330
Okej. Och Ella?

70
00:05:14,330 --> 00:05:18,950
[Elev] Jag känner att jag vet vad Ajax är, men jag vet inte hur man använder det.

71
00:05:18,950 --> 00:05:24,580
Okej. >> [Elev] Jag känner att jag inte vet vad Ajax är eller hur man använder det. [Skratt]

72
00:05:24,580 --> 00:05:27,280
Okej. Det fungerar ganska bra.

73
00:05:27,280 --> 00:05:34,700
Låt oss se. Låt oss kanske titta på ett bra exempel på Ajax först.

74
00:05:34,700 --> 00:05:39,030
>> Välkommen, välkommen. Jag hoppas att du är okej på kameran.

75
00:05:39,030 --> 00:05:42,160
Om inte, kan du hänga i ryggen.

76
00:05:44,610 --> 00:05:48,150
>> Bra exempel på Ajax.

77
00:05:51,940 --> 00:05:54,650
Låt mig gå över till min laptop.

78
00:05:54,650 --> 00:05:57,690
Här är vi på Google.com.

79
00:05:57,690 --> 00:06:05,460
Hur många av er har någonsin spelat det roliga "Hur gör jag?" spel på Google?

80
00:06:05,460 --> 00:06:11,940
Hur gör jag - och du får se alla roliga saker som kommer upp -

81
00:06:11,940 --> 00:06:15,200
sätta denna musik på min Tumblr?

82
00:06:15,200 --> 00:06:18,100
Och du kan hålla på och få all denna typ av roliga saker.

83
00:06:18,100 --> 00:06:21,380
Vad händer här?

84
00:06:21,380 --> 00:06:29,270
När du skriver i Googles sökruta, är realtidsresultat uppdateras.

85
00:06:29,270 --> 00:06:37,380
Så sätta detta - och du märker att alla resultaten starta uppdateringen på webbsidan Google.

86
00:06:37,380 --> 00:06:43,940
Det är inte något som händer på din dator.

87
00:06:43,940 --> 00:06:47,870
Nätverket är inblandad i det här. Google är involverad i detta.

88
00:06:47,870 --> 00:06:56,180
Det visar sig att varje gång du trycker på en knapp, som säger G eller L,

89
00:06:56,180 --> 00:06:58,770
och sökresultaten uppdatering, är vad som händer

90
00:06:58,770 --> 00:07:04,200
är det finns någon JavaScript på den sida som är att upptäcka att du tryckte på knappen,

91
00:07:04,200 --> 00:07:14,750
och det är att göra en nätverksbegäran till Google.com för att ladda upp alla de senaste resultaten

92
00:07:14,750 --> 00:07:18,670
som bäst passar den fråga som du har skrivit hittills.

93
00:07:21,610 --> 00:07:25,690
Tyvärr tror jag att om vi skulle titta på detta -

94
00:07:25,690 --> 00:07:32,690
Jag kommer att titta på källan - det mesta av detta Ajax eller JavaScript-kod i här

95
00:07:32,690 --> 00:07:37,830
är alla minified och ofta kodade lite för.

96
00:07:37,830 --> 00:07:43,180
Den minification bokstavligen är ett program som du kan köra din JavaScript-kod genom

97
00:07:43,180 --> 00:07:46,620
och det förändrar alla dina variabelnamn och gör det helt oläslig

98
00:07:46,620 --> 00:07:49,180
men försöker göra din JavaScript så kort som möjligt

99
00:07:49,180 --> 00:07:52,090
så att när du skickar dina JavaScript-filer över nätverket

100
00:07:52,090 --> 00:07:55,960
du inte behöva ladda eller skicka stora filer.

101
00:07:55,960 --> 00:07:57,960
Så det här är ganska svårt att läsa,

102
00:07:57,960 --> 00:08:03,450
men begravdes i här, vilka befogenheter denna typeahead - modeord för detta -

103
00:08:03,450 --> 00:08:07,450
är Ajax förfrågningar.

104
00:08:07,450 --> 00:08:15,230
>> Vad gör en Ajax begäran skiljer sig från någon annan typ av förfrågan nätverk?

105
00:08:15,230 --> 00:08:18,820
Sam? >> [Elev] Du behöver inte ändra URL. >> [Hardison] Höger. Exakt.

106
00:08:18,820 --> 00:08:24,880
Du märker när jag skriver, "hur ska jag lägga min käkbenet i parningsläge?" [Småskrattar]

107
00:08:24,880 --> 00:08:28,100
Det finns alltid lite kul - Ja.

108
00:08:28,100 --> 00:08:30,990
Du märker att det här URL här uppe i toppen inte förändras,

109
00:08:30,990 --> 00:08:34,280
och hela sidan inte är uppfriskande.

110
00:08:34,280 --> 00:08:39,590
Så om vi tittar på den här typen av grejer rätt upp här, denna bar i toppen, detta Google,

111
00:08:39,590 --> 00:08:44,630
och sedan det svarta fältet upp här, som kallas ofta krom på en webbsida,

112
00:08:44,630 --> 00:08:48,630
det är inte förändras. Hela sidan är inte uppfriskande.

113
00:08:48,630 --> 00:08:53,890
Den Ajax begäran används för att uppdatera bara resultaten från den sida,

114
00:08:53,890 --> 00:08:59,450
just det 1 liten del av sidan så att du inte behöva gå till en helt annan webbadress,

115
00:08:59,450 --> 00:09:04,690
en helt annan fil, och ladda det i minnet.

116
00:09:04,690 --> 00:09:12,640
Så när man hör folk prata om den dynamiska Web 2.0 typ av revolution,

117
00:09:12,640 --> 00:09:15,370
detta låg bakom mycket av det.

118
00:09:15,370 --> 00:09:19,800
Det är detta som gör att du kan skriva en vägg inlägg på Facebook, slå inlägg,

119
00:09:19,800 --> 00:09:26,350
och ha den posten visas utan hela Facebook-sida uppfriskande

120
00:09:26,350 --> 00:09:33,670
eller bläddra igenom en massa bilder och läsa in bilderna dynamiskt,

121
00:09:33,670 --> 00:09:35,970
eftersom hur mycket skulle det suga om du gick till din Facebook-sida,

122
00:09:35,970 --> 00:09:38,130
klickade på foton, och sedan fick sitta där och vänta

123
00:09:38,130 --> 00:09:43,730
medan alla par tusen av dina Facebook-bilder laddas in i minnet?

124
00:09:43,730 --> 00:09:45,170
Det är en enorm belastning.

125
00:09:45,170 --> 00:09:48,360
Men med Ajax kan du göra det asynkront,

126
00:09:48,360 --> 00:09:54,810
och det är den asynkrona delen av Ajax.

127
00:09:54,810 --> 00:09:56,980
>> Okej.

128
00:09:59,230 --> 00:10:04,370
Är vi bra? Får alla slags förstå ungefär vad Ajax gör?

129
00:10:04,370 --> 00:10:10,670
Det är gjort av JavaScript, är det gjort slags dynamiskt och asynkront

130
00:10:10,670 --> 00:10:12,540
efter att sidan har laddats.

131
00:10:12,540 --> 00:10:18,010
Det kommer ofta in efter som ett slags svar på en händelse,

132
00:10:18,010 --> 00:10:23,860
som antingen är ett musklick eller en tangenttryckning eller något liknande.

133
00:10:23,860 --> 00:10:30,820
Och då är det ett samtal tillbaka till servern, oavsett om du är på Google.com

134
00:10:30,820 --> 00:10:35,860
eller Facebook.com, hämtar lite nytt innehåll för att sedan visa eller uppdatera

135
00:10:35,860 --> 00:10:38,050
eller nåt sånt.

136
00:10:38,050 --> 00:10:40,080
>> Cool. Okej.

137
00:10:40,080 --> 00:10:45,260
Låt oss titta på ett par exempel från tidigare år.

138
00:10:47,260 --> 00:10:49,140
Vi går till frågesporter.

139
00:10:49,140 --> 00:10:54,160
Och sedan Charlotte, du nämna Quiz 1 från 2011. >> [Elev] Ja.

140
00:10:54,160 --> 00:11:00,520
En sak som jag kommer att försiktighet är att titta på tidigare års frågesporter

141
00:11:00,520 --> 00:11:07,970
du ser det här som kallas XHR ofta med relationen till Ajax.

142
00:11:07,970 --> 00:11:18,750
XHR och XML httprequest är typ av den råa sätt att göra Ajax, om ni så vill.

143
00:11:18,750 --> 00:11:25,740
I år har vi gått över till nästan helt med hjälp av denna jQuery-biblioteket.

144
00:11:25,740 --> 00:11:34,540
jQuery är ett bibliotek av hjälpar JavaScript-funktioner och klasser och allehanda godsaker,

145
00:11:34,540 --> 00:11:40,730
och jQuery slags abstraherar rå XHR grejer ifrån dig

146
00:11:40,730 --> 00:11:44,930
så att det är mycket lättare att göra själva Ajax grejer.

147
00:11:44,930 --> 00:11:47,020
Så när du bläddrar igenom dessa tidigare års frågesporter

148
00:11:47,020 --> 00:11:51,860
och du ser saker som säger XHR och nya XML httprequest,

149
00:11:51,860 --> 00:11:54,490
alla såna saker, kan du ignorera det.

150
00:11:54,490 --> 00:11:56,520
Istället ska vi bara jQuery vägen.

151
00:11:56,520 --> 00:12:00,490
Vi förväntar oss inte att du ska veta XML httprequest.

152
00:12:00,490 --> 00:12:05,690
Men bra att veta att det är synonymt med denna idé om Ajax,

153
00:12:05,690 --> 00:12:13,620
denna Asynchronous JavaScript hämta XML eller JSON eller vad över nätverket.

154
00:12:13,620 --> 00:12:20,260
Men från början var det korrelerade med XML eller ansluten till XML.

155
00:12:20,260 --> 00:12:22,440
>> Okej.

156
00:12:24,090 --> 00:12:27,950
Låt oss bläddra ner. Kommer du ihåg vilka problem i synnerhet, Charlotte?

157
00:12:33,080 --> 00:12:36,550
Var det den här sidan som jag tittar på just här? >> [Elev] Ja, jag tror det.

158
00:12:36,550 --> 00:12:38,810
[Hardison] Ah, jag har det. Okej. Yeah.

159
00:12:38,810 --> 00:12:41,660
Låt oss tala om det här verkligen snabbt.

160
00:12:44,640 --> 00:12:53,860
Sättet Ajax fungerar är att du har lite JavaScript-fil på din dator,

161
00:12:53,860 --> 00:12:59,570
och verkligen det körs typ av i samband med din webbläsare.

162
00:12:59,570 --> 00:13:10,820
Så om din sista projekt är att göra - jag vet inte - en ny dejtingsajt för Harvard människor

163
00:13:10,820 --> 00:13:15,000
och du vill att din dejtingsajt för att ha möjlighet att skicka anonyma meddelanden

164
00:13:15,000 --> 00:13:19,130
från person till person eller anonyma Facebook väggliknande inlägg

165
00:13:19,130 --> 00:13:24,190
och du vill använda Ajax i att på något sätt så att när du postar ett meddelande

166
00:13:24,190 --> 00:13:26,960
den inte uppdatera hela webbplatsen,

167
00:13:26,960 --> 00:13:32,870
i din JavaScript-kod som du vill ställa in en ny Ajax samtal.

168
00:13:32,870 --> 00:13:36,570
Jag diskuterar om huruvida eller inte att göra detta på den bärbara datorn.

169
00:13:36,570 --> 00:13:45,940
Den viktiga delen om Ajax samtalet är att det är denna typ av asynkronitet till det

170
00:13:45,940 --> 00:13:50,250
i den meningen att - låt mig byta tillbaka till min iPad -

171
00:13:52,120 --> 00:14:07,160
i den meningen att om jag har kod som kommer att säga att göra några Ajax,

172
00:14:07,160 --> 00:14:11,160
då kan jag inte på mycket nästa rad av min JavaScript-kod

173
00:14:11,160 --> 00:14:15,170
förvänta sig att Ajax ska ha genomgått.

174
00:14:15,170 --> 00:14:24,260
Vad som händer är att när koden körs sekventiellt i JavaScript,

175
00:14:24,260 --> 00:14:28,760
När du gör detta Ajax samtal, du är i huvudsak forking ut

176
00:14:28,760 --> 00:14:33,960
och skicka en förfrågan ut till Internet i någon server över här,

177
00:14:33,960 --> 00:14:37,740
vilket är den här rutan Jag ritar och tydligt inte dra det mycket väl.

178
00:14:37,740 --> 00:14:41,280
Du förgrening av denna uppmaning till den server som kommer att ta tid

179
00:14:41,280 --> 00:14:45,020
eftersom det går ut till Internet och går och träffar den servern

180
00:14:45,020 --> 00:14:49,350
och går och kräver att PHP-skript som du har skrivit på bakändan

181
00:14:49,350 --> 00:14:55,110
att faktiskt spela det anonyma meddelandet i din databas eller något liknande.

182
00:14:55,110 --> 00:15:01,640
Så det kommer att ta tid, och sedan så småningom när servern är klar att bearbeta

183
00:15:01,640 --> 00:15:10,090
din Ajax begäran kommer den att återgå till din JavaScript-kod,

184
00:15:10,090 --> 00:15:15,190
men du vet inte riktigt var, när i utförandet

185
00:15:15,190 --> 00:15:19,680
du kommer att få denna respons.

186
00:15:23,430 --> 00:15:28,620
Hur hanteras detta i JavaScript?

187
00:15:28,620 --> 00:15:36,510
Det är där det kommer i det här problemet som vi pratar om på den bärbara datorn

188
00:15:36,510 --> 00:15:47,230
där du registrerar en handler, du registrerar en viss JavaScript-funktion

189
00:15:47,230 --> 00:15:52,650
löpa när Ajax begäran är klar.

190
00:15:52,650 --> 00:15:58,010
Du kan inte bara göra ditt Ajax samtal och sedan i nästa kodrad

191
00:15:58,010 --> 00:16:01,570
anta att Ajax samtalet har avslutats.

192
00:16:03,670 --> 00:16:08,310
En del av skönheten i detta är att du vill att din JavaScript för att fortsätta att köra

193
00:16:08,310 --> 00:16:13,210
efter att det är gjort i Ajax samtal eftersom det kan punga ut denna separata begäran

194
00:16:13,210 --> 00:16:15,750
och fortsätta bearbeta annat.

195
00:16:15,750 --> 00:16:19,300
Du har den här typen av samtidighet gå här där din JavaScript fortsätter att gå

196
00:16:19,300 --> 00:16:23,520
och fortsätter att göra andra roliga saker, skulle kunna fortsätta att snurra ut andra Ajax förfrågningar.

197
00:16:23,520 --> 00:16:28,630
Dina Ajax begär bara att gå ut på nätet och komma tillbaka när de kommer tillbaka då,

198
00:16:28,630 --> 00:16:33,390
men när du registrera hanteraren funktion,

199
00:16:33,390 --> 00:16:40,040
det är då du vet att din Ajax samtal har återvänt eftersom funktionen anropas.

200
00:16:40,040 --> 00:16:46,040
Så istället för att ha denna sekventiell exekvering väg som vi är vana vid i C,

201
00:16:46,040 --> 00:16:51,430
har du vad som är mer likt det vi såg i Scratch i början av terminen

202
00:16:51,430 --> 00:16:54,590
där du har dessa sändningar

203
00:16:54,590 --> 00:17:00,930
och då har du dessa "när grön flagg klickat" eller "när jag tar emot denna händelse."

204
00:17:00,930 --> 00:17:05,030
Det är i grunden vad som händer här i JavaScript med dessa Ajax förfrågningar.

205
00:17:08,790 --> 00:17:11,940
>> För att svaret på denna fråga på rad 20,

206
00:17:11,940 --> 00:17:15,500
"I samband med Ajax, vad betyder den här kodraden gör?"

207
00:17:15,500 --> 00:17:22,339
kan någon slags parafras vad jag sa för att bekräfta förståelse?

208
00:17:22,339 --> 00:17:24,630
[Elev] Jag är ledsen. Vad innebär den vänstra halvan av det?

209
00:17:24,630 --> 00:17:28,600
[Hardison] xhr.onreadystatechange. Ursäkta. Får jag avskuren?

210
00:17:28,600 --> 00:17:31,360
Detta är det XHR syntax som vi inte kommer att ha att göra med.

211
00:17:31,360 --> 00:17:34,060
Du har liknande koncept med jQuery.

212
00:17:34,060 --> 00:17:39,400
Låt oss gå till källkod, onsdag, Index.

213
00:17:39,400 --> 00:17:45,020
Låt oss slå upp det här. Okej. Uppfattat.

214
00:17:48,110 --> 00:17:52,700
Här är det Ajax syntax som vi pratar om.

215
00:17:52,700 --> 00:17:56,270
Här du ange Ajax begäran.

216
00:17:56,270 --> 00:18:03,590
Du säger, "Det här är webbadressen jag vill gå ut och ping."

217
00:18:03,590 --> 00:18:09,250
"Jag vill använda POST istället för GET."

218
00:18:09,250 --> 00:18:13,520
Och sedan datatypen är "Jag vill JSON som ska returneras."

219
00:18:13,520 --> 00:18:15,670
Återigen, XML var typ av den traditionella sak.

220
00:18:15,670 --> 00:18:18,600
Men vad vi letar efter den funktionen.

221
00:18:18,600 --> 00:18:21,130
Detta är det just här.

222
00:18:21,130 --> 00:18:24,870
Denna funktion (svar) är att onreadystatechange.

223
00:18:24,870 --> 00:18:30,300
Det är föraren. Detta är vad som kommer att utföra när denna ansökan kommer tillbaka.

224
00:18:30,300 --> 00:18:35,030
Så du märker att denna funktion som Tommy har skrivit här

225
00:18:35,030 --> 00:18:41,850
som vi talade om i föreläsning på onsdagen var allt om att skapa det roliga typeahead för oss.

226
00:18:41,850 --> 00:18:46,490
Du märker att det han gör är att han bygger på Ajax begäran

227
00:18:46,490 --> 00:18:52,680
och sedan finns det inget efter Ajax begäran.

228
00:18:52,680 --> 00:18:57,470
Han är inte bearbeta svaret från Ajax begäran efter samtalet görs.

229
00:18:57,470 --> 00:19:00,770
Han bara gör det i denna hanterarfunktion

230
00:19:00,770 --> 00:19:05,170
som kommer att kallas så snart svar innebär komma tillbaka.

231
00:19:08,330 --> 00:19:12,580
>> Sam. >> [Elev] Har Ajax förfrågningar måste vara av typen POST eller kan det vara FÅ?

232
00:19:12,580 --> 00:19:16,970
De kan vara antingen. >> [Elev] Hur skulle det fungera om du inte ändrar webbadressen?

233
00:19:16,970 --> 00:19:22,280
Hur skulle det fungera om du inte ändrar webbadressen?

234
00:19:22,280 --> 00:19:26,400
Det beror bara på var data går.

235
00:19:26,400 --> 00:19:30,450
Så frågan är kan Ajax förfrågningar vara POST eller GET?

236
00:19:30,450 --> 00:19:37,730
Det är där det kan vara heller. Det är bara egentligen en semantisk skillnad mellan POST och GET.

237
00:19:40,460 --> 00:19:45,670
GET oftast innebär att du bara läser något från servern

238
00:19:45,670 --> 00:19:50,940
och du inte ändrar något, medan en POST innebär normalt

239
00:19:50,940 --> 00:19:54,390
att du skriver data eller om du ska skriva något på en server.

240
00:19:54,390 --> 00:19:59,500
Ofta du använder POST när du försöker ändra tillstånd någonstans.

241
00:19:59,500 --> 00:20:04,400
Därför inloggningar går alltid med HTTP POST,

242
00:20:04,400 --> 00:20:07,940
medan Google gör en massa GET-förfrågningar.

243
00:20:07,940 --> 00:20:19,850
Egentligen, om vi går tillbaka till våra Google exempel och om vi tittar på våra utvecklingsverktyg här,

244
00:20:19,850 --> 00:20:25,360
låt oss titta på de utvecklingsverktyg här i botten och öppna upp nätverket.

245
00:20:25,360 --> 00:20:32,910
När vi börjar skriva, kan du se alla dessa får förfrågningar kommer in

246
00:20:36,240 --> 00:20:40,260
Du ser alla dessa får förfrågningar här längst ned på skärmen

247
00:20:40,260 --> 00:20:44,550
som är alla dessa xjs.

248
00:20:44,550 --> 00:20:52,390
Detta är den begäran Ajax kommer tillbaka.

249
00:20:52,390 --> 00:20:59,680
Och om vi skulle klicka på det, kan vi se vad den säger och vad dess svar är.

250
00:20:59,680 --> 00:21:04,190
Det ger oss all denna information om det svar som vi fick

251
00:21:04,190 --> 00:21:09,430
När vi skickade till Google rubrikerna som var här nere.

252
00:21:09,430 --> 00:21:15,380
Få se om det har - Det kommer att ha vår frågesträng någonstans.

253
00:21:19,060 --> 00:21:22,310
URL-begäran. Yeah.

254
00:21:22,310 --> 00:21:31,630
Original fråga, ignorera dåligt fråga, andra passet, hur jag meter -

255
00:21:31,630 --> 00:21:35,900
Hur som helst, någonstans här kan du hitta det här "hur jag meter" query

256
00:21:35,900 --> 00:21:39,010
på begäran till servern.

257
00:21:39,010 --> 00:21:42,480
Och då svaret kommer tillbaka är vad vi ser.

258
00:21:42,480 --> 00:21:45,120
Så ja, kan det vara antingen GET eller POST.

259
00:21:45,120 --> 00:21:50,650
Det tenderar att vara bara en semantisk skillnad. Vi kan täcka det med HTTP. Ja, Ella?

260
00:21:50,650 --> 00:21:55,360
>> [Elev] Är skillnaden mellan JSON och XML bara att JSON är mer modernt?

261
00:21:55,360 --> 00:22:00,730
Är skillnaden mellan JSON och XML som JSON är mer modernt?

262
00:22:04,100 --> 00:22:09,900
XML och JSON är bara två olika sätt att koda data.

263
00:22:15,130 --> 00:22:20,540
XML är ett Extensible Markup Language.

264
00:22:20,540 --> 00:22:29,390
HTML är en delmängd av XML.

265
00:22:29,390 --> 00:22:34,650
Så till exempel, låt oss dra upp Textedit.

266
00:22:34,650 --> 00:22:44,990
XML är bara definieras som data som är inneslutna i en serie av etiketter.

267
00:22:44,990 --> 00:22:52,820
Så html, / html, killarna är giltiga taggar.

268
00:22:52,820 --> 00:22:57,470
Låt oss spränga denna storlek här och göra den mer lättläst.

269
00:23:00,130 --> 00:23:02,070
hej!

270
00:23:02,070 --> 00:23:06,300
XML definierar bara en etikett som något liknande

271
00:23:06,300 --> 00:23:09,880
där du har en öppenvinkelfäste, namnet på etiketten,

272
00:23:09,880 --> 00:23:15,870
och sedan valfritt antal attribut, som i HTML vi ofta inte har attribut.

273
00:23:15,870 --> 00:23:25,820
Men till exempel om vi hade en script-tagg, det har ofta den typ av text, Javascript.

274
00:23:30,130 --> 00:23:35,770
Och inne i taggarna är data.

275
00:23:37,600 --> 00:23:44,650
I sann XML kan du faktiskt definiera dessa taggar för att vara vad du vill.

276
00:23:44,650 --> 00:23:46,840
Det är bara ett sätt att strukturera din information.

277
00:23:46,840 --> 00:23:53,800
Så till exempel, om jag ville koda min familj i XML,

278
00:23:53,800 --> 00:24:01,500
Jag skulle kunna göra något sådant, som far och sedan lägga in information om honom

279
00:24:01,500 --> 00:24:09,240
och bror och lägga in information om min bror.

280
00:24:09,240 --> 00:24:18,370
Just detta sätt att strukturera dina data är XML.

281
00:24:18,370 --> 00:24:24,220
JSON, å andra sidan, följer JavaScript Object Notation,

282
00:24:24,220 --> 00:24:27,140
därmed J-S-O-N, JSON.

283
00:24:27,140 --> 00:24:34,040
Så snarare än att skriva med denna typ av tagg, nära tag typ format,

284
00:24:34,040 --> 00:24:39,290
vi istället skriva det som ett JavaScript-objekt.

285
00:24:39,290 --> 00:24:45,000
Så JavaScript-objektet har lockigt stag för att öppna saker

286
00:24:45,000 --> 00:24:48,700
och sedan en klammerparentes att stänga saker.

287
00:24:48,700 --> 00:24:53,580
Låt mig zooma ut lite, zooma in

288
00:24:53,580 --> 00:24:59,790
Och vad du har är namnen på fälten, så "far":

289
00:24:59,790 --> 00:25:05,480
och då kunde jag lägga in information om honom

290
00:25:05,480 --> 00:25:12,990
och sedan "broder": och information om min bror.

291
00:25:16,930 --> 00:25:23,040
Och naturligtvis allt här är -

292
00:25:23,040 --> 00:25:26,340
Jag antar att det är trevligt om JSON i motsats till XML

293
00:25:26,340 --> 00:25:35,750
beror på att en JSON-objekt är i det här objektet notation som JavaScript har.

294
00:25:35,750 --> 00:25:43,600
JavaScript kan verkligen enkelt dra det i minnet och behandla det precis som ett JavaScript-objekt

295
00:25:43,600 --> 00:25:45,500
rätt när du får tillbaka den från servern.

296
00:25:45,500 --> 00:25:49,460
Det finns ingen tolkning att det verkligen har att göra som är tunga eller tunga lyft,

297
00:25:49,460 --> 00:25:55,690
medan med XML måste du använda antingen plugins eller något slags -

298
00:25:55,690 --> 00:25:59,130
Beroende på vad exakt du sänder

299
00:25:59,130 --> 00:26:04,770
och vad du använder för att ta emot XML, kanske du måste göra lite mer arbete parsning,

300
00:26:04,770 --> 00:26:10,090
Detta JavaScript-grejer, om du bara skriver med JavaScript

301
00:26:10,090 --> 00:26:14,780
och du får JavaScript tillbaka, det är verkligen lätt att arbeta med.

302
00:26:16,590 --> 00:26:19,890
Den andra saken som folk också kommer att nämna ibland

303
00:26:19,890 --> 00:26:23,630
är att med XML du har alla dessa öppna taggar och nära taggar,

304
00:26:23,630 --> 00:26:30,620
så det kan bli stor, kan det bli lite uppsvälld.

305
00:26:30,620 --> 00:26:33,990
Så finns det några som kommer att tala om hur med JSON

306
00:26:33,990 --> 00:26:42,280
du behöver inte ha alla dessa öppna taggar och nära taggar, så det är mer komprimerad.

307
00:26:42,280 --> 00:26:47,350
Anledningen till att det är viktigt är att när du måste fylla på saker över nätverket

308
00:26:47,350 --> 00:26:50,040
när du pratar med en fjärrserver,

309
00:26:50,040 --> 00:26:55,010
desto mindre som behöver överföras över Internet, går snabbare allt.

310
00:26:56,890 --> 00:26:59,700
Hur som helst, är nyckeln takeaway här är de bara 2 olika sätt att strukturera data,

311
00:26:59,700 --> 00:27:02,150
formatera dina data.

312
00:27:04,950 --> 00:27:06,110
>> Okej.

313
00:27:06,110 --> 00:27:08,230
Övriga frågor? Charlotte?

314
00:27:08,230 --> 00:27:11,280
[Elev] Kan jag ställa en sista fråga om syntaxen i Ajax? >> Visst.

315
00:27:11,280 --> 00:27:16,590
[Elev] Om du går tillbaka till exempelkod och bara zooma ut lite,

316
00:27:16,590 --> 00:27:19,280
det finns bara 1 rad kod ovan.

317
00:27:19,280 --> 00:27:21,530
Kan vi bara gå upp?

318
00:27:21,530 --> 00:27:24,260
på ('keyUp', ()-funktionen

319
00:27:24,260 --> 00:27:30,670
Är det uppsättning tomma parenteser efter på ('keyUp' hänvisning till funktion efter framgång?

320
00:27:30,670 --> 00:27:33,580
[Hardison] Nej.

321
00:27:33,580 --> 00:27:35,450
Ett par saker här.

322
00:27:35,450 --> 00:27:43,170
på ('keyUp', är detta ett sätt att göra motsvarande i Scratch

323
00:27:43,170 --> 00:27:50,330
av när en knapp trycks in och du lyfter upp bort av nyckeln.

324
00:27:50,330 --> 00:27:57,440
Faktiskt, i JavaScript du har på ('keyDown', på ('keyUp', och på ("knapptryckning",

325
00:27:57,440 --> 00:28:06,340
och du kan göra saker på var och en av dessa tre olika händelser.

326
00:28:06,340 --> 00:28:11,060
Detta är att registrera en händelsehanterare varje gång en knapp kommer upp,

327
00:28:11,060 --> 00:28:16,210
och då denna funktion är hela denna sak

328
00:28:16,210 --> 00:28:19,560
hela vägen ner till där.

329
00:28:19,560 --> 00:28:23,880
Den här funktionen har inget namn.

330
00:28:23,880 --> 00:28:25,580
Slags konstig.

331
00:28:25,580 --> 00:28:31,500
Alla våra funktioner som vi har gjort i C och PHP har alla hade namn.

332
00:28:31,500 --> 00:28:39,900
Detta är vad vi kallar en anonym funktion. Vettigt, eller hur? Inget namn. Anonym.

333
00:28:39,900 --> 00:28:43,550
Vad är praktiskt om den anonyma funktionen?

334
00:28:43,550 --> 00:28:47,860
Uppenbarligen kan vi inte kalla denna funktion någon annanstans i vår kod.

335
00:28:47,860 --> 00:28:53,920
Hur skulle vi kalla den här funktionen på andra håll i vår kod? Vi kan inte.

336
00:28:56,540 --> 00:29:03,120
Det finns inget namn. Jag kan inte säga, "Ja, kalla det fungerar som jag sa med på ('keyUp'."

337
00:29:05,080 --> 00:29:08,190
Vad är praktiskt om det är dock att i JavaScript

338
00:29:08,190 --> 00:29:11,100
när vi ständigt registrerar dessa händelsehanterare -

339
00:29:11,100 --> 00:29:17,510
det är vad det kallas, du registrera denna funktion som en hanterare när en knapp kommer upp -

340
00:29:17,510 --> 00:29:23,830
är det verkligen skönt att kunna bara definiera dessa funktioner sorts inline och bara säga,

341
00:29:23,830 --> 00:29:28,840
"När keyUp trycks, kom ihåg denna funktion som jag kommer att definiera just här,

342
00:29:28,840 --> 00:29:35,340
och det kommer att komma ihåg denna funktion och så kommer det att göra denna funktion

343
00:29:35,340 --> 00:29:37,590
närhelst knappen kommer upp.

344
00:29:37,590 --> 00:29:41,930
Vi ska prata om det här mer när du får mer i funktionell programmering.

345
00:29:41,930 --> 00:29:46,080
Detta är lite av en smak av det där vi i huvudsak passerar en funktion runt

346
00:29:46,080 --> 00:29:49,960
som ett objekt, nästan som om det var som en variabel.

347
00:29:49,960 --> 00:29:54,410
I stället för att passera en sträng eller int, vi passerar en funktion.

348
00:29:56,000 --> 00:30:00,400
Det är lite av en konstig sak, men det som är skönt är att alla variabler i här,

349
00:30:00,400 --> 00:30:08,020
insidan av denna funktion, de avgränsningsfrågor är trevliga

350
00:30:08,020 --> 00:30:18,500
för om du har en variabel upp här, kan du hänvisa till den variabeln insidan av denna funktion

351
00:30:18,500 --> 00:30:22,720
eftersom funktionen deklareras inuti denna andra funktion.

352
00:30:22,720 --> 00:30:26,670
Så du får ha förmåner som det.

353
00:30:26,670 --> 00:30:31,290
Återigen, det är något som är mer meta. Du kommer att täcka det i kommande klasser.

354
00:30:31,290 --> 00:30:36,150
>> Ja. >> [Elev] Eftersom funktionen är anonym, kan den användas någon annanstans?

355
00:30:36,150 --> 00:30:40,750
Eller kan den bara användas i samband med denna funktion?

356
00:30:40,750 --> 00:30:45,460
[Hardison] Den används endast i samband med denna funktion. Yeah. Ja?

357
00:30:45,460 --> 00:30:48,860
>> Har det något att göra med det faktum att det är ett objektorienterat språk?

358
00:30:48,860 --> 00:30:52,650
[Hardison] Har det något att göra med det faktum att det är objektorienterat?

359
00:30:58,000 --> 00:31:03,190
Jag skulle säga att detta har mer att göra med det faktum att det har funktionella aspekter.

360
00:31:03,190 --> 00:31:05,640
Vi pratar om det objektorienterade paradigmet av programmering,

361
00:31:05,640 --> 00:31:09,890
och det är typ av en av de aspekter av den funktionella paradigm för programmering

362
00:31:09,890 --> 00:31:17,520
där du gör funktioner som består av andra funktioner

363
00:31:17,520 --> 00:31:22,460
och du passerar funktioner runt.

364
00:31:22,460 --> 00:31:25,040
>> [Elev] Så JavaScript är ett funktionsspråk också.

365
00:31:25,040 --> 00:31:28,420
Den har inslag av det, ja. Yeah.

366
00:31:28,420 --> 00:31:30,000
JavaScript och många -

367
00:31:30,000 --> 00:31:35,120
PHP har en del av detta också, har Python samma sorts saker,

368
00:31:35,120 --> 00:31:43,390
Ruby har den här sortens grejer också, och detta är vanligt i flera av dessa moderna språk.

369
00:31:43,390 --> 00:31:49,660
Du får verkligen dessa skriptspråk som är typ av jack-of-all-trades.

370
00:31:49,660 --> 00:31:53,180
Det är som den stora feta schweiziska armékniv, en som du inte ens kan sätta i fickan

371
00:31:53,180 --> 00:31:55,090
eftersom det är för stort.

372
00:31:55,090 --> 00:31:57,970
Det är typ hur några av dessa språk har blivit.

373
00:32:01,190 --> 00:32:04,520
>> Fler frågor? Okej.

374
00:32:04,520 --> 00:32:06,280
Hur ska ni känner?

375
00:32:06,280 --> 00:32:13,830
Låt oss gå tillbaka till denna frågesport riktigt snabbt och se om vi kan svara på 21 och 20.

376
00:32:13,830 --> 00:32:22,030
Vi pratade om 20 som vi registrerat hanteraren.

377
00:32:22,030 --> 00:32:31,550
Denna fråga här, "Vad skulle bli effekten om vi skrev den linjen med ett par parenteser?"

378
00:32:31,550 --> 00:32:34,680
du se skillnaden, hur upp i toppen finns det inga parenteser

379
00:32:34,680 --> 00:32:38,370
och här nere finns parentes efter funktionsnamnet?

380
00:32:38,370 --> 00:32:43,520
En sak som är viktigt att notera,

381
00:32:43,520 --> 00:32:45,410
här vi hänvisar till en funktion.

382
00:32:45,410 --> 00:32:48,780
Detta är inte en anonym funktion. Det har fått ett namn, handler,

383
00:32:48,780 --> 00:32:52,580
medan i vår Ajax hit att vi bara tittar på,

384
00:32:52,580 --> 00:32:58,260
alla de funktioner som vi passerar runt var alla anonyma: ingen funktion namn,

385
00:32:58,260 --> 00:33:00,400
ingen funktionsnamnet.

386
00:33:00,400 --> 00:33:05,670
Så det är vanlig praxis att definiera dessa funktioner typ av inline som anonyma funktioner

387
00:33:05,670 --> 00:33:08,660
för en del av avgränsnings fördelar.

388
00:33:08,660 --> 00:33:15,340
Du kan mycket väl ha definierat denna funktion just här eller här på ('keyUp' funktion.

389
00:33:15,340 --> 00:33:22,400
Du kunde ha definierat den här killen som funktioner med namn på andra håll i din JavaScript-kod,

390
00:33:22,400 --> 00:33:27,650
och då istället för att definiera funktionen här, skulle du skicka namnet på funktionen

391
00:33:27,650 --> 00:33:31,320
rätt i denna plats.

392
00:33:31,320 --> 00:33:36,570
En sak att notera är att du inte skulle vilja använda parentes

393
00:33:36,570 --> 00:33:39,400
om du anger namnet på funktionen,

394
00:33:39,400 --> 00:33:44,480
eftersom när du använder parenteser, du antyder "kallar denna funktion"

395
00:33:44,480 --> 00:33:48,820
medan i stället här vi vill bara att passera namnet på funktionen.

396
00:33:53,740 --> 00:34:02,400
Om vi ​​tittar på vad som händer här, är den stora skillnaden att denna översta kodraden säger

397
00:34:02,400 --> 00:34:08,420
effektivt, underhåller en pekare till den funktion som kallas handler,

398
00:34:08,420 --> 00:34:11,820
och när Ajax anrop slut, kalla denna funktion,

399
00:34:11,820 --> 00:34:17,210
faktiskt utföra funktionen, koppla in argumenten, gör allt detta arbete,

400
00:34:17,210 --> 00:34:23,480
Denna linje här nere säger istället för att upprätthålla en pekare

401
00:34:23,480 --> 00:34:30,389
till den funktion som kallas handler, detta onreadystatechange område

402
00:34:30,389 --> 00:34:33,980
kommer att hålla resultatet av en funktion som kallas för hanterare,

403
00:34:33,980 --> 00:34:38,409
så det kommer att utvärdera handler, det kommer att faktiskt ringa handler just nu -

404
00:34:38,409 --> 00:34:41,250
inte när Ajax anrop slut men just nu,

405
00:34:41,250 --> 00:34:43,940
vilket inte är vad du vill göra om du skriver något

406
00:34:43,940 --> 00:34:48,150
att ta itu med en Ajax samtal som är klar.

407
00:34:56,520 --> 00:35:02,250
>> Okej. Frågor om det? Det är en subtil skillnad.

408
00:35:03,640 --> 00:35:06,340
Det är en subtil skillnad.

409
00:35:06,340 --> 00:35:09,710
En sak som jag definitivt skulle föreslå att göra om du inte har gjort det -

410
00:35:09,710 --> 00:35:15,040
eftersom det är nya saker, det tar ett tag för den att verkligen sjunka in

411
00:35:15,040 --> 00:35:17,840
om du faktiskt skriver en del av det här ut -

412
00:35:17,840 --> 00:35:23,340
Jag vill uppmuntra er att gå igenom källkoden

413
00:35:23,340 --> 00:35:25,610
att Tommy presenteras i föreläsning på onsdag

414
00:35:25,610 --> 00:35:30,690
eftersom han definitivt gick igenom en massa saker, typ av i en oskärpa.

415
00:35:30,690 --> 00:35:32,980
Jag skulle faktiskt prova att skriva ut det.

416
00:35:32,980 --> 00:35:35,120
Försök att koda lite saker upp.

417
00:35:35,120 --> 00:35:40,530
Gör en fil. Js. Skriv ut koden själv. Inte bara kopiera och klistra in.

418
00:35:40,530 --> 00:35:42,890
Inte bara köra CP.

419
00:35:42,890 --> 00:35:47,380
Försök att göra det bara för att typ av flex JavaScript muskler.

420
00:35:47,380 --> 00:35:49,490
Se vad det är.

421
00:35:49,490 --> 00:35:58,830
Till exempel, här jag tittar på quote7.js i källkoden från onsdagens föreläsning.

422
00:35:58,830 --> 00:36:04,150
Försök att gå in och i stället för att bara göra alla dessa funktioner anonym,

423
00:36:04,150 --> 00:36:10,470
kopiera den här koden, bokstavligen gå ner till denna framgång kod,

424
00:36:10,470 --> 00:36:17,270
kopiera, klistra in den på en annan funktion, och ge den ett namn,

425
00:36:17,270 --> 00:36:22,370
och sedan försöka passera namnet på och se vad som händer.

426
00:36:22,370 --> 00:36:26,320
[Elev] Kan det vara i en separat fil eller i samma fil?

427
00:36:26,320 --> 00:36:29,900
Det kan vara i en separat fil om du ordentligt inkludera det.

428
00:36:29,900 --> 00:36:34,170
En sak som kommer att bli -

429
00:36:34,170 --> 00:36:42,770
Tricket är inte denna funktion hänvisa till någon av de variabler som ligger utanför det?

430
00:36:42,770 --> 00:36:49,990
Och jag tror att det bara syftar på svar.

431
00:36:49,990 --> 00:36:51,640
Yeah.

432
00:36:56,360 --> 00:36:59,280
Du kan namnge detta.

433
00:36:59,280 --> 00:37:03,150
Du kan dra ut den, kan du ge den ett namn, och sedan kan du skicka namnet på här.

434
00:37:03,150 --> 00:37:07,390
Så jag skulle ge det ett försök, se hur det fungerar.

435
00:37:09,990 --> 00:37:13,530
>> Okej. Frågor? Frågor? Jag älskar frågor.

436
00:37:13,530 --> 00:37:16,460
Jag vet inte om er, men jag gillar dem.

437
00:37:19,120 --> 00:37:21,320
Hur ska ni känner om det här?

438
00:37:21,320 --> 00:37:26,910
Det är lite av det här, "Oh, crap" stämningen i rummet. [Studenter skratt]

439
00:37:26,910 --> 00:37:32,030
Är den typen av hur ni mår? >> [Elev] Ja. >> Yeah? Ja, Daniel?

440
00:37:32,030 --> 00:37:35,270
>> [Elev] Jag tror att jag förstår typ av de övergripande begrepp som du pratar om,

441
00:37:35,270 --> 00:37:37,920
liksom de anonyma funktioner och allt det här,

442
00:37:37,920 --> 00:37:42,490
men jag förstår inte halva den syntax som är där uppe just nu,

443
00:37:42,490 --> 00:37:46,510
gillar vad ul medel, li, dessa olika taggar.

444
00:37:46,510 --> 00:37:51,840
Jag tror inte att jag skulle kunna koda något med JavaScript. >> Fair.

445
00:37:51,840 --> 00:37:59,960
Är det en vanlig känsla, gemensam känsla, det låter som? Okej.

446
00:37:59,960 --> 00:38:03,370
[Elev] Kommer vi behöver? >> Ska vi behöva koda?

447
00:38:03,370 --> 00:38:09,280
Du bör vara beredd att dissekera ungefär så här, skulle jag säga.

448
00:38:09,280 --> 00:38:15,550
Jag är inte den som skriver tentan,

449
00:38:15,550 --> 00:38:18,770
men jag skulle definitivt säga att om det är en vanlig känsla,

450
00:38:18,770 --> 00:38:23,020
typ av att en hel del av den här syntaxen här ser ut, "Vad fan är det som händer?"

451
00:38:23,020 --> 00:38:27,900
"Jag är helt simma," låt oss tala om det och fixa det.

452
00:38:29,080 --> 00:38:30,520
Låter det bra?

453
00:38:30,520 --> 00:38:32,150
Okej.

454
00:38:32,150 --> 00:38:36,550
>> Så vad händer här? Låt oss ta denna rad för rad.

455
00:38:36,550 --> 00:38:38,300
Låt oss försöka gå runt i rummet.

456
00:38:38,300 --> 00:38:41,440
Jag kommer bara att uppmana folk 1 av 1, och ge mig din bästa gissning.

457
00:38:41,440 --> 00:38:44,470
Vi gör det snabbt. Du har 5 sekunder att svara.

458
00:38:44,470 --> 00:38:46,130
Om du inte svarar, vi går till nästa person.

459
00:38:46,130 --> 00:38:48,460
Och det är inte en stor sak eftersom jag vet att det är galna grejer.

460
00:38:48,460 --> 00:38:52,520
Vi börjar här. Charlotte, vad gör denna linje göra?

461
00:38:52,520 --> 00:38:54,450
[Elev] Det skapar en variabel som heter förslag

462
00:38:54,450 --> 00:38:57,890
och ställer in det motsvarar vad ul är. >> [Hardison] Höger.

463
00:38:57,890 --> 00:39:02,220
>> Jimmy, vad är ul?

464
00:39:02,220 --> 00:39:07,740
[Elev] Jag vet inte. >> [Hardison] Okej, coolt. Charlotte var helt rätt.

465
00:39:07,740 --> 00:39:11,680
Denna kodrad som jag har markerat här deklarerar en variabel som heter förslag,

466
00:39:11,680 --> 00:39:13,710
en JavaScript-variabel.

467
00:39:13,710 --> 00:39:18,760
Vi har denna nyckelordet var framför som ser till att variabeln förblir lokala

468
00:39:18,760 --> 00:39:21,140
till den omfattning som det är i.

469
00:39:21,140 --> 00:39:28,490
Och detta ul sak som vi inte har sett förut riktigt,

470
00:39:28,490 --> 00:39:34,290
låt oss se om det finns en god - Låt mig byta tillbaka till min iPad.

471
00:39:36,270 --> 00:39:37,860
Ny sida.

472
00:39:37,860 --> 00:39:40,700
Jag är säker på att ni har sett ul innan.

473
00:39:40,700 --> 00:39:42,620
Det är en oordnad lista.

474
00:39:42,620 --> 00:39:45,590
Så har du någonsin sett på en webbsida där du har kulorna

475
00:39:45,590 --> 00:39:56,970
och du har Thing 1 Thing 2, och så vidare och så vidare?

476
00:39:56,970 --> 00:40:00,770
Detta är en oordnad lista.

477
00:40:00,770 --> 00:40:09,120
Det sätt som du skulle koda detta i HTML är att du skulle börja med en öppen tagg

478
00:40:09,120 --> 00:40:19,060
som öppnar den oordnad lista, skulle du stänger den med en nära tagg som stänger oordnad lista,

479
00:40:19,060 --> 00:40:31,820
och sedan i mitten du måste lista artiklar, li.

480
00:40:31,820 --> 00:40:43,110
Och inne i li s skulle vara den text som ska visas, så Thing 1 och Thing 2.

481
00:40:43,110 --> 00:40:49,400
Då skulle vi stänga våra listämne taggar.

482
00:40:54,130 --> 00:41:01,110
Oordnade listor är super vanligt eftersom det är ett bra sätt att få samma styling

483
00:41:01,110 --> 00:41:03,720
appliceras på en rad olika saker.

484
00:41:03,720 --> 00:41:08,170
Så om du tittar på, till exempel, pset 7 koden,

485
00:41:08,170 --> 00:41:12,710
en hel del av de nav piller, navigerings piller som används för de olika länkarna

486
00:41:12,710 --> 00:41:18,740
Köpa, sälja, Citat, historia, allt detta, de som genomförs som oordnade listor,

487
00:41:18,740 --> 00:41:23,160
och de använde CSS för att ta bort dessa punktlistor

488
00:41:23,160 --> 00:41:27,530
och typ av vända något.

489
00:41:27,530 --> 00:41:33,920
Det är lite av kraften i CSS är att HTML beskriver strukturen.

490
00:41:33,920 --> 00:41:36,680
Vi har en lista med listobjekt.

491
00:41:36,680 --> 00:41:41,360
Det är oordnade. Det finns ingen första, andra eller tredje. Det är bara en lista.

492
00:41:41,360 --> 00:41:45,020
Och så som standard kommer att dra det med bara kulor.

493
00:41:45,020 --> 00:41:50,270
Om vi ​​istället hade skrivit ol, så jag kommer att ändra detta till en ol-lista

494
00:41:50,270 --> 00:41:53,870
i motsats till en ul, vad skulle det göra?

495
00:41:53,870 --> 00:42:01,840
Det skulle bli av med dessa kulor, och standard skulle i stället vara en numrerad lista

496
00:42:01,840 --> 00:42:04,020
för nu har vi beställning.

497
00:42:09,700 --> 00:42:14,840
Formgivningen av listan är då vad du leka med i CSS,

498
00:42:14,840 --> 00:42:21,620
och det är där folk som skrev Bootstrap bibliotek för CSS lekte

499
00:42:21,620 --> 00:42:30,030
med den grafiska utformningen av en oordnad lista för att få den att visa dessa fina små nav piller.

500
00:42:30,030 --> 00:42:33,730
Om vi ​​ser på Google, till exempel, låt oss ta en titt på den här killen.

501
00:42:33,730 --> 00:42:38,450
Tillbaka till "hur jag m din mamma" - låter lite tyska.

502
00:42:38,450 --> 00:42:43,490
Jag älskar tyska. Det låter så kul.

503
00:42:43,490 --> 00:42:47,040
Jag är ledsen om det finns några tyska folk tittar som känner sig kränkt.

504
00:42:47,040 --> 00:42:51,550
Hur som helst, om vi tittar på dessa länkar här uppe på toppen

505
00:42:51,550 --> 00:42:57,610
och vi tittar på vad som händer där, kan vi kontrollera det med den här killen.

506
00:42:57,610 --> 00:42:59,430
Jag är långt nere i hörnet.

507
00:42:59,430 --> 00:43:01,690
Utvecklingsverktyg på Chrome är fantastisk.

508
00:43:01,690 --> 00:43:05,780
Om ni börjar leka med den eller leta upp tutorials för det, det hjälper en hel del

509
00:43:05,780 --> 00:43:07,620
om du gör webbaserade projekt.

510
00:43:07,620 --> 00:43:10,720
Jag klickar på min lilla inspektör. Jag kommer att rulla tillbaka upp hit.

511
00:43:10,720 --> 00:43:15,680
Jag ska se vad alla dessa killar är.

512
00:43:15,680 --> 00:43:19,300
Jag zooma in jag ska klicka på dem.

513
00:43:19,300 --> 00:43:25,850
Sedan kan jag zooma ut och se vad det egentligen är i HTML vägen hit ner.

514
00:43:25,850 --> 00:43:30,050
Det ser ut som Google har kapslade det i en ordnad lista.

515
00:43:30,050 --> 00:43:36,220
Så vi har fått denna spännvidd som säger + Ni, och som är inkapslad i ett ankare tagg,

516
00:43:36,220 --> 00:43:41,030
så det är det som gör den klickbar och länkar den till min Google+ sida.

517
00:43:41,030 --> 00:43:47,130
Den är inkapslad i ett listobjekt,

518
00:43:47,130 --> 00:43:49,670
och den är inkapslad i detta ordnad lista.

519
00:43:49,670 --> 00:43:55,060
Och nu om jag klickar faktiskt listobjektet, kommer det att lyfta fram det för mig där uppe.

520
00:43:55,060 --> 00:43:59,530
Om jag belysa oordnad lista, ser du hur fokus går i toppen.

521
00:43:59,530 --> 00:44:03,460
Den växlar upp och visar mig hela ordnad lista.

522
00:44:03,460 --> 00:44:08,380
Så Google har precis spelat runt med styling för att få dessa listor för att visa upp så där.

523
00:44:08,380 --> 00:44:15,510
Det är tillräckligt kul med listor. Tillbaka till frågesport eller det här.

524
00:44:15,510 --> 00:44:19,260
Nu vet vi vad en oordnad lista är - förhoppningsvis.

525
00:44:19,260 --> 00:44:28,690
>> Låt oss tala om det här nästa kodrad, for (var i in response.symbols). Ella.

526
00:44:28,690 --> 00:44:35,980
[Elev] Jag har ingen aning. >> [Hardison] Ingen aning.

527
00:44:35,980 --> 00:44:40,290
Okej. Du har sett en för loop innan, antar jag. >> [Elev] Ja.

528
00:44:40,290 --> 00:44:43,930
[Hardison] Minns du gör för var i PHP? >> [Elev] Ja.

529
00:44:43,930 --> 00:44:46,340
[Hardison] Det är just det.

530
00:44:46,340 --> 00:44:51,210
Detta är en för varje slinga i JavaScript.

531
00:44:51,210 --> 00:45:00,860
Detta är en kortare väg än att göra det för (var i = 0; i <response.symbols.length, i + +),

532
00:45:00,860 --> 00:45:04,400
som vi skulle kunna göra,

533
00:45:04,400 --> 00:45:08,620
men detta är ett mer koncist sätt att skriva det.

534
00:45:08,620 --> 00:45:17,530
En sak att vara försiktig med i JavaScript är att detta inte nödvändigtvis behöver följa ordningen.

535
00:45:17,530 --> 00:45:23,030
Om response.symbols är förmodligen en matris,

536
00:45:23,030 --> 00:45:33,140
var jag kommer att vara ett index in i denna samling, men det är inte nödvändigtvis det 0 och sedan 1

537
00:45:33,140 --> 00:45:36,340
och sedan 2 och sedan 3.

538
00:45:36,340 --> 00:45:47,360
De säger använda den for (var i = 0) om du bryr dig om beställning.

539
00:45:47,360 --> 00:45:55,860
Jag antar att den andra sak att notera är att när vi använde ett för var och en i PHP,

540
00:45:55,860 --> 00:46:03,470
Vi specificerade matrisen namnet först och sedan hade vi det som sökord

541
00:46:03,470 --> 00:46:07,490
och sedan vi specificerat det värde som vi ville hämta från arrayen.

542
00:46:07,490 --> 00:46:12,680
Eller vi kan ange både nyckeln och det värde som vi ville hämta från arrayen.

543
00:46:12,680 --> 00:46:16,730
Här ska vi bara få indexet.

544
00:46:16,730 --> 00:46:22,090
Vi kommer inte att få den verkliga själva elementet.

545
00:46:22,090 --> 00:46:29,510
Så du ser att när vi går här nere vi faktiskt behöva hämta den i: te elementet

546
00:46:29,510 --> 00:46:34,810
ur response.symbols invända.

547
00:46:37,680 --> 00:46:46,400
Den andra saken som är galen om det här är att du kan använda detta för att slinga över objekt i JavaScript

548
00:46:46,400 --> 00:46:52,070
och hämta var och en av egenskaperna för det objektet 1 med 1.

549
00:46:52,070 --> 00:46:57,950
Om vi ​​gick tillbaka till att JavaScript Object Notation skildring av min familj

550
00:46:57,950 --> 00:47:03,280
där det var bokstavligen de klammerparenteser och far, bror, mamma, allt det,

551
00:47:03,280 --> 00:47:06,420
du kan använda en for-slinga för att iterera över det också

552
00:47:06,420 --> 00:47:10,130
och hämta fastigheterna 1 av 1.

553
00:47:10,130 --> 00:47:12,110
Slags galen.

554
00:47:14,120 --> 00:47:18,200
Så vad vi gör, det ser ut, är att vi bygger upp en HTML-sträng

555
00:47:18,200 --> 00:47:22,220
precis som den här kommentaren säger, "bygga html-sträng för en lista med förslag."

556
00:47:22,220 --> 00:47:26,340
Vi ska börja med vår öppna tagg för vår oordnad lista

557
00:47:26,340 --> 00:47:30,110
där vi antar att vi kommer att lagra alla förslag som listobjekten.

558
00:47:30,110 --> 00:47:36,490
Sen ska vi slinga över alla symbolerna i svaret

559
00:47:36,490 --> 00:47:39,230
eftersom ihåg detta är en typeahead för CS50 Finance,

560
00:47:39,230 --> 00:47:44,180
så vi drar oss ur aktiesymboler 1 av 1.

561
00:47:44,180 --> 00:47:50,410
Och sedan ska vi lägga till våra förslag sträng vad?

562
00:47:50,410 --> 00:47:53,880
>> Jared, hur ser det här ut som?

563
00:47:53,880 --> 00:48:00,140
[Elev] Det verkar som det är att ta tag av någon form av databas

564
00:48:00,140 --> 00:48:02,250
vilken bokstav du skriver in,

565
00:48:02,250 --> 00:48:06,640
lämnar någon form av förslag vad ordet - >> [Hardison] Ja.

566
00:48:06,640 --> 00:48:10,490
I Ajax förfrågan redan faktiskt gick och greppa det. Detta är vårt svar.

567
00:48:10,490 --> 00:48:14,890
Detta är faktiskt efter att vi har fått svaret från databasen från servern.

568
00:48:14,890 --> 00:48:20,150
>> Och så vad är det här? Vad innebär detta enda citat sak beteckna?

569
00:48:20,150 --> 00:48:23,990
[Elev] Den enda anbud? >> [Hardison] Ja. Det är bara en sträng, eller hur?

570
00:48:23,990 --> 00:48:26,930
Och så vad är det här crafting?

571
00:48:26,930 --> 00:48:31,080
Det är en sträng och vi sätter saker i strängen. Och vad som är strängen ser ut?

572
00:48:31,080 --> 00:48:35,140
[Elev] Bara tanken att Vi är - >> [Hardison] Ja, exakt.

573
00:48:35,140 --> 00:48:43,050
Det är förslaget inkapslad i ett ankare tagg,

574
00:48:43,050 --> 00:48:49,570
och det är också förankrad inne i ett listobjekt så att det kommer att gå in i listan.

575
00:48:49,570 --> 00:48:56,790
Bokstavligen, är allt vi gör här vi bara bygga upp en stor HTML-sträng.

576
00:48:56,790 --> 00:49:02,570
Vi ska bara bygga upp det bokstavligen som en sträng i minnet.

577
00:49:02,570 --> 00:49:04,740
Vi ska inte göra något fint.

578
00:49:04,740 --> 00:49:09,660
Vi ska inte skapa nya noder i DOM-eller något liknande.

579
00:49:09,660 --> 00:49:15,030
Vi är bokstavligen bara bygga en sträng som om du skulle skriva ut, till exempel,

580
00:49:15,030 --> 00:49:21,220
på din iPad som jag har - om ni har en iPad och gillar att skriva HTML på din iPad -

581
00:49:21,220 --> 00:49:33,250
du bara skriver en stor lång sträng som är som ul, li, en ...

582
00:49:33,250 --> 00:49:38,440
och då vi givetvis kommer att säga det med denna ul.

583
00:49:38,440 --> 00:49:41,410
Så det är allt vi får är en stor, massiv sträng.

584
00:49:43,750 --> 00:49:51,180
Och inuti finns det en li och en för var och en av de symboler som vi hittade.

585
00:49:54,210 --> 00:50:01,760
>> Och nu, fortsätter den, vad gör den här raden gör, Stella, just här?

586
00:50:01,760 --> 00:50:06,670
Vad gör denna linje göra här?

587
00:50:06,670 --> 00:50:11,560
[Ohörbar studerande respons]

588
00:50:11,560 --> 00:50:14,970
[Hardison] Ja. Det är bara att lägga till den här killen.

589
00:50:14,970 --> 00:50:17,650
Vi bara slutade vår lista. Exakt.

590
00:50:17,650 --> 00:50:25,430
>> Och sedan denna sista raden - och det ser typ av fånig -

591
00:50:25,430 --> 00:50:30,230
Jag är ledsen. Jag vet inte ditt namn i den röda tröjan. Vet du vad detta innebär?

592
00:50:30,230 --> 00:50:33,270
Eller kommer ni att besluta något?

593
00:50:33,270 --> 00:50:38,560
Och du? >> [Elev] Det kallar jQuery på det, men jag vet inte exakt vet vilken funktion det är.

594
00:50:38,560 --> 00:50:40,490
[Hardison] Ja. Det kallar jQuery.

595
00:50:40,490 --> 00:50:42,870
Vad sägs om någon här över på vänster sida av mig?

596
00:50:42,870 --> 00:50:51,110
Vet du vad det här raden gör? Vad ser det ut som det gör om du skulle gissa?

597
00:50:51,110 --> 00:50:57,620
[Elev] Skicka till HTML listan med förslag, eller är det -

598
00:50:57,620 --> 00:50:59,410
Yeah. Vad menar du med att skicka in?

599
00:50:59,410 --> 00:51:04,370
[Elev] Att säga till HTML vad vi just behandlat i JavaScript

600
00:51:04,370 --> 00:51:07,560
är nu definitivt bara HTML. >> [Hardison] Ja.

601
00:51:07,560 --> 00:51:10,600
Det är en bra start.

602
00:51:10,600 --> 00:51:12,100
Låt oss dissekera detta lite mer.

603
00:51:12,100 --> 00:51:14,140
Det är precis vad den här delen gör just här.

604
00:51:14,140 --> 00:51:17,660
[Elev] Vilken aspekt av det gör det klart att det är jQuery?

605
00:51:17,660 --> 00:51:20,380
[Hardison] jQuery är det dollartecken kille.

606
00:51:20,380 --> 00:51:25,630
Varje gång du skriver jQuery, kommer du att se den här dollartecken överallt.

607
00:51:25,630 --> 00:51:36,020
Detta har bara använts i jQuery som typ av en speciell symbol.

608
00:51:36,020 --> 00:51:38,280
Det gör en hel massa saker.

609
00:51:38,280 --> 00:51:46,980
I samband med detta just här, denna del av linjen, är det en väljare.

610
00:51:46,980 --> 00:51:53,350
Det är jQuery väljaren, och det är att välja den HTML-element

611
00:51:53,350 --> 00:51:58,440
som har ID-förslag.

612
00:51:58,440 --> 00:52:01,730
Kom ihåg hur HTML-element kan ha att ID-attribut

613
00:52:01,730 --> 00:52:06,920
där du kan ha en punkt tagg som har ID-förslag?

614
00:52:06,920 --> 00:52:13,380
Denna jQuery väljaren kommer att fånga det elementet

615
00:52:13,380 --> 00:52:18,000
eftersom det elementet måste finnas någonstans i minnet.

616
00:52:18,000 --> 00:52:21,120
JavaScript kan slags precisera det elementet och säga,

617
00:52:21,120 --> 00:52:24,830
"Åh, okej, du är den punkt som har detta ID,"

618
00:52:24,830 --> 00:52:34,940
och sedan detta. html säger, "Okej, ersätta den nuvarande HTML inom dig

619
00:52:34,940 --> 00:52:41,210
"Med den nya strängen, den nya HTML som jag ska ge dig."

620
00:52:41,210 --> 00:52:49,950
Så om vi ser tillbaka över på iPad - ha, ha, mindes jag att byta den här gången -

621
00:52:49,950 --> 00:53:07,470
du ofta sätta in saker som divar, så föreställa sig att vi hade en div som hade id = "förslag";

622
00:53:07,470 --> 00:53:13,080
Vi kommer att stänga div-taggen här nere.

623
00:53:13,080 --> 00:53:21,500
När vi använder jQuery väljaren att greppa elementet i DOM

624
00:53:21,500 --> 00:53:29,270
som har ID-förslag, väljer det bokstavligen hela denna div just här,

625
00:53:29,270 --> 00:53:37,920
och sedan HTML-metoden säger, "Ersätt allt det här rätt i här

626
00:53:37,920 --> 00:53:41,840
"Rätt i det ul, som oordnad lista som vi just byggt upp."

627
00:53:41,840 --> 00:53:47,170
Bokstavligen, om du tittar på hela HTML-filens sträng i minnet,

628
00:53:47,170 --> 00:53:51,750
du skulle bara säga, "Gå in i den platsen och plundra i det ul grejer"

629
00:53:51,750 --> 00:53:57,210
och sedan uppdatera sidan så att du nu ser oordnad lista där.

630
00:53:57,210 --> 00:54:04,510
Så vad detta har faktiskt gjort är det dynamiskt uppdaterade denna div.

631
00:54:04,510 --> 00:54:08,980
Den kod som vi bara såg på den bärbara datorn har uppdaterat denna div

632
00:54:08,980 --> 00:54:13,760
att hålla de nya förslag som hämtades från servern någonstans.

633
00:54:13,760 --> 00:54:18,790
[Elev] Vilka förslag representerar de nya förslag och de gamla förslagen?

634
00:54:18,790 --> 00:54:21,070
De nya förslag och de gamla förslagen.

635
00:54:21,070 --> 00:54:24,950
[Elev] Vad representerar vilken som byts ut och som man gör den ersätter?

636
00:54:24,950 --> 00:54:26,400
[Hardison] Uppfattat.

637
00:54:26,400 --> 00:54:29,110
Se här, den här killen är en sträng.

638
00:54:29,110 --> 00:54:34,580
Detta anger ID på ett element - vi kallar det i DOM -

639
00:54:34,580 --> 00:54:40,570
vilket bokstavligen betyder bara några HTML-element som någonstans visas kan

640
00:54:40,570 --> 00:54:42,490
på webbsidan.

641
00:54:42,490 --> 00:54:47,830
Om vi ​​skulle titta på det här, om vi går tillbaka till vår Google-sida,

642
00:54:47,830 --> 00:54:53,460
Vi ser alla dessa divar och dessa ol-talet och dessa li-talet och dessa a-talet.

643
00:54:53,460 --> 00:55:00,020
Dessa utgör alla de HTML-element som för närvarande utgör den här sidan.

644
00:55:00,020 --> 00:55:08,140
Dessa alla korrelerar till enskilda element på sidan.

645
00:55:08,140 --> 00:55:13,650
Och om vi skulle ändra på detta, skulle du titta på DOM förändring,

646
00:55:13,650 --> 00:55:16,220
och du kan se den här typen av växling.

647
00:55:16,220 --> 00:55:20,600
Så om vi skulle skriva Harvard, skulle du se DOM börjar förändring

648
00:55:20,600 --> 00:55:24,970
och listelementen börjar ändra på här.

649
00:55:24,970 --> 00:55:26,880
Det är faktiskt vad som händer.

650
00:55:26,880 --> 00:55:35,020
>> Låt oss se om vi kan hitta några av det här rätt i här.

651
00:55:35,020 --> 00:55:41,490
Låt oss titta på den här länken. Låt oss titta på detta Harvard Wikipedia länk, och vi kommer att titta på det förändras.

652
00:55:41,490 --> 00:55:48,160
Vi kan se det som jag har valt det här, svarar den till denna div just här,

653
00:55:48,160 --> 00:55:52,680
som också är en del av ett listelement, som ligger precis intill en annan listelement,

654
00:55:52,680 --> 00:55:56,500
vilket är en del av oordnad lista här.

655
00:55:56,500 --> 00:56:07,470
Nu vad händer om vi söker efter vår mindre skola lite söderut?

656
00:56:07,470 --> 00:56:09,040
Det ändras nu.

657
00:56:09,040 --> 00:56:13,460
Så vi förlorade vårt grepp om den div och listelement

658
00:56:13,460 --> 00:56:19,010
för nu har vi olika element i vår DOM,

659
00:56:19,010 --> 00:56:24,280
olika listelement, olika listobjekt, olika längder, allt detta.

660
00:56:24,280 --> 00:56:28,750
Så här HTML-dokument håller uppdateras dynamiskt.

661
00:56:28,750 --> 00:56:33,240
Gamla element tas bort, nya element läggs till.

662
00:56:33,240 --> 00:56:42,600
Tillbaka här vi bara ange detta element, som förmodligen kommer att vara stabil

663
00:56:42,600 --> 00:56:44,870
hela vår typeahead uppdatering,

664
00:56:44,870 --> 00:56:50,270
annars om jQuery inte kan hitta ett element som har ett ID av förslag,

665
00:56:50,270 --> 00:56:53,320
det ska bara krascha på denna punkt.

666
00:56:53,320 --> 00:56:57,020
Och då vi uppdaterar sin inre HTML.

667
00:56:57,020 --> 00:57:03,970
Så det är dessa listobjekt, dessa ankare taggar som ständigt kommer att uppdatera och uppdatera när du skriver.

668
00:57:10,440 --> 00:57:15,750
Betyder det att göra ett bättre jobb? >> [Elev] Det hjälper mycket. >> [Hardison] Okej.

669
00:57:15,750 --> 00:57:24,210
Syntaxen att du kommer att se en hel del - vet vad den här killen gör.

670
00:57:24,210 --> 00:57:27,810
Vet jQuery väljaren.

671
00:57:27,810 --> 00:57:36,610
Denna jQuery väljare med en hash-taggen framför innebär ett ID.

672
00:57:36,610 --> 00:57:42,410
Den här killen säger: "Ge mig det element som har ID-förslag."

673
00:57:48,440 --> 00:57:56,480
Den här killen här nere säger också, "Ge mig som samma element med ID-förslag."

674
00:57:56,480 --> 00:58:03,350
Denna killen nedanför den är något mer komplex.

675
00:58:03,350 --> 00:58:12,420
Det säger, "Ge mig elementet med ID formulär-citat,

676
00:58:12,420 --> 00:58:21,180
"Men sedan gå in formuläret och hitta barnet" -

677
00:58:21,180 --> 00:58:25,710
så detta utrymme här innebär att vi ska ett underordnat element, en kapslad inslag.

678
00:58:25,710 --> 00:58:33,550
"Hitta den form som har detta ID och sedan hitta ingången inne den formen vars namn är symbol."

679
00:58:38,410 --> 00:58:45,050
Detta är definitivt i Tommys föreläsningsbilder, dessa olika typer av jQuery väljare.

680
00:58:45,050 --> 00:58:50,490
Du bör veta vilka typer av element dessa hämtar.

681
00:58:51,970 --> 00:58:54,590
Till exempel, låt oss byta tillbaka till iPad riktigt snabbt.

682
00:58:58,450 --> 00:59:14,970
Om vi ​​hade ett formulärelement med id = "form citat" -

683
00:59:14,970 --> 00:59:21,110
naturligtvis som saknas metoden = POST eller metod = GET och handling attribut samt

684
00:59:21,110 --> 00:59:37,010
att du bör ha på blanketter, men bara för detta exempel ett formulär, som ni vet, har ingångar

685
00:59:37,010 --> 00:59:51,860
och att kod som vi såg bara skulle få ingångselementet

686
00:59:51,860 --> 00:59:57,580
som hade namn = "symbol".

687
00:59:57,580 --> 01:00:02,970
Detta är viktigt när du försöker fylla olika områden inne i formuläret.

688
01:00:02,970 --> 01:00:07,440
Detta är hur auto-fyllning verk.

689
01:00:07,440 --> 01:00:09,500
>> Ja, Ella?

690
01:00:09,500 --> 01:00:16,050
[Elev] Vad är skillnaden mellan ett ID och en klass? >> Ett ID och en klass? Yeah.

691
01:00:16,050 --> 01:00:21,970
En klass används för styling ändamål.

692
01:00:21,970 --> 01:00:29,120
Ett ID används för vad det låter som: unikt identifierar ett visst element.

693
01:00:29,120 --> 01:00:37,610
Så inom en HTML-sida, kan du bara ha 1 element med ett visst id.

694
01:00:40,370 --> 01:00:46,120
Det finns bara 1 formuläret med ID-formen-citat.

695
01:00:46,120 --> 01:00:56,940
Men det nav piller klass eller nav klass var nog något som du använt

696
01:00:56,940 --> 01:01:01,380
möjligen eller såg i samband med din Problem Set 7 kod.

697
01:01:01,380 --> 01:01:11,340
En klass används för att tillämpa en särskild styling till en massa olika element.

698
01:01:11,340 --> 01:01:17,580
Till exempel i de gamla dagarna i HTML innan det fanns stilmallar,

699
01:01:17,580 --> 01:01:21,440
innan det fanns CSS, dessa Cascading Style Sheets,

700
01:01:21,440 --> 01:01:29,540
om du vill centrera ett stycke eller centrera texten i en div,

701
01:01:29,540 --> 01:01:43,940
du skulle ha en div och sedan du skulle ha något som text-align = "center"

702
01:01:43,940 --> 01:01:51,290
som som ett attribut i din div.

703
01:01:51,290 --> 01:01:54,490
Det här är inte bra.

704
01:01:54,490 --> 01:01:57,890
Anledningen folk inte gillar detta beror på att sedan när du ville uppdatera

705
01:01:57,890 --> 01:02:01,960
hur det som visas på din webbplats, du var tvungen att bokstavligen gå in i varje sida

706
01:02:01,960 --> 01:02:06,230
och varje HTML-fil och gå ändra alla stylings på alla de olika delarna,

707
01:02:06,230 --> 01:02:10,420
och det var en enorm smärta eftersom ofta du ville ha ett gäng divar

708
01:02:10,420 --> 01:02:15,090
som alla var centrerad eller passa ett visst sätt.

709
01:02:15,090 --> 01:02:18,760
Så lösningen på det var den klassen.

710
01:02:18,760 --> 01:02:28,120
Nu har vi en div där vi har klassen som anges för att vara vad du vill kalla det.

711
01:02:28,120 --> 01:02:39,160
Du kan kalla det "centrerad", och stäng din div någonstans nere

712
01:02:39,160 --> 01:02:42,390
och du har alla dina roliga grejer där.

713
01:02:42,390 --> 01:02:47,650
Och sedan någonstans i din stilmall som du vill ange en viss styling

714
01:02:47,650 --> 01:02:51,980
som skulle gälla för den här klassen.

715
01:02:51,980 --> 01:02:57,280
Det behövde inte vara den enda div som var centrerad.

716
01:02:57,280 --> 01:03:02,240
Du kan ha andra divar som också hade centrerad text.

717
01:03:06,580 --> 01:03:09,980
>> Ja, Charlotte? >> [Elev] Att gå tillbaka till citatet, vad betyder pricken detta?

718
01:03:09,980 --> 01:03:13,120
Vad är pricken? >> [Elev] Ja.

719
01:03:14,000 --> 01:03:17,900
Tillbaka till den bärbara datorn, menar du? >> [Elev] Ja. >> Okej.

720
01:03:17,900 --> 01:03:23,920
[Elev] Till exempel i denna linje betyder det att det är denna variabel som heter val

721
01:03:23,920 --> 01:03:27,730
insidan av formen? >> Ja.

722
01:03:27,730 --> 01:03:34,690
Den punktnotation i JavaScript gör ett par saker.

723
01:03:34,690 --> 01:03:43,530
I det här fallet du ringer en funktion som heter val.

724
01:03:43,530 --> 01:03:45,960
Det är en metod.

725
01:03:45,960 --> 01:03:50,150
Det är här vi kommer in i objektorienterad saker som vi pratade om, Sam.

726
01:03:50,150 --> 01:04:00,840
Det är där objekt - i detta fall den ingående elementet - har en funktion eller en metod som kallas val

727
01:04:00,840 --> 01:04:10,480
som i princip säger, "Hej, ange ditt värde för att vara det här."

728
01:04:15,120 --> 01:04:19,050
Tänk dig att i stället för denna rappakalja som vi hade skrivit nummer 7 eller strängen 7.

729
01:04:19,050 --> 01:04:23,820
Det skulle ändra värdet på denna ingång inslag att vara 7.

730
01:04:23,820 --> 01:04:26,030
[Elev] Ingångs elementet är allting framför pricken?

731
01:04:26,030 --> 01:04:29,190
[Hardison] Ingångs element, exakt, är elementet i HTML,

732
01:04:29,190 --> 01:04:33,230
inom DOM, matchar denna fråga.

733
01:04:33,230 --> 01:04:37,150
[Elev] Så det är ingångsfunktion inslag. Och sedan vad det värdet ska vara.

734
01:04:37,150 --> 01:04:39,360
[Hardison] Exakt. >> [Elev] Okej.

735
01:04:39,360 --> 01:04:42,780
Och du också använda detta för att komma åt egenskaper.

736
01:04:42,780 --> 01:04:47,690
Så om vi ser tillbaka på den kod som vi gick igenom rad för rad

737
01:04:47,690 --> 01:04:54,830
där vi har response.symbols [i]. namn,

738
01:04:54,830 --> 01:04:58,600
vi inte ringa en funktion här.

739
01:04:58,600 --> 01:05:02,270
Det finns inga parenteser.

740
01:05:02,270 --> 01:05:05,220
En sak du bör bara tänka på när du rippa genom denna kod,

741
01:05:05,220 --> 01:05:09,860
när du ser parenteser, innebär att funktionsanrop.

742
01:05:09,860 --> 01:05:12,340
En funktion som kallas,

743
01:05:12,340 --> 01:05:15,910
och namnet på den funktionen är vad föregår dessa parenteser.

744
01:05:15,910 --> 01:05:21,480
Så i detta fall nere, det är val. I det här fallet just här det är html.

745
01:05:21,480 --> 01:05:31,700
I det här fallet här namnet på funktionen är bokstavligen $,

746
01:05:31,700 --> 01:05:35,170
och vi vet bara att detta är den jQuery väljaren,

747
01:05:35,170 --> 01:05:40,090
det är den funktion som är att välja vad den här killen är.

748
01:05:40,090 --> 01:05:47,030
Och sedan när du inte ser parenteser, som här eller här,

749
01:05:47,030 --> 01:05:51,690
vad du tillgång istället är en egenskap för objektet.

750
01:05:51,690 --> 01:05:53,910
Det är som att använda arrayen notation.

751
01:05:53,910 --> 01:05:59,280
Det är ett alternativ till att använda array notation.

752
01:05:59,280 --> 01:06:02,440
Det är bara en förkortning.

753
01:06:06,680 --> 01:06:17,050
Så vi tillgång till symbolerna inom svarsobjektet.

754
01:06:21,590 --> 01:06:29,160
>> Vi har gjort en hel del på Ajax, DOM, vissa HTML, inte mycket CSS.

755
01:06:29,160 --> 01:06:34,370
Har ni vill spendera de sista 15 minuter eller så på det här?

756
01:06:34,370 --> 01:06:37,990
Jag antar att vi har verkligen fått ca 10 minuter innan vi måste börja slå in.

757
01:06:37,990 --> 01:06:44,190
Eller ska vi gå tillbaka och tala om några av de andra sakerna på vår lista?

758
01:06:44,190 --> 01:06:46,800
Låt oss se.

759
01:06:46,800 --> 01:06:52,180
Om vi ​​går tillbaka till början, vi växlar över till min iPad igen så att ni kan se här,

760
01:06:52,180 --> 01:06:57,840
vi har gjort en hel del Ajax, har vi gjort en del jQuery,

761
01:06:57,840 --> 01:07:00,980
Vi har gjort en del JSON, vi har gjort en del XML, vi har gjort en del DOM,

762
01:07:00,980 --> 01:07:05,510
Vi har gjort en del - nix, inte HTTP. Scratch det.

763
01:07:05,510 --> 01:07:10,640
Inte mycket utrymme. Vi slags talat om CSS - inte riktigt.

764
01:07:13,200 --> 01:07:16,540
Har ni må bra på Ajax? Vill du spendera mer tid på Ajax?

765
01:07:16,540 --> 01:07:19,190
Handuppräckning. Okej.

766
01:07:19,190 --> 01:07:22,260
DOM? Någon som vill spendera mer tid på DOM?

767
01:07:22,260 --> 01:07:26,960
Det enklaste sättet att verkligen få en känsla för vad som händer med DOM -

768
01:07:26,960 --> 01:07:34,510
folk pratar om DOM och kasta runt, "Åh, DOM detta, DOM det."

769
01:07:34,510 --> 01:07:45,910
Verkligen DOM är precis som alla dessa HTML-element hålls i minnet.

770
01:07:45,910 --> 01:07:49,310
och det är bara att förklara - det är vad det är.

771
01:07:49,310 --> 01:07:55,700
Den är uppbyggd som ett träd, och du kan komma åt enskilda HTML-element

772
01:07:55,700 --> 01:07:58,850
med att jQuery väljare, som dollartecken grejen.

773
01:07:58,850 --> 01:08:02,730
Du kan manipulera saker. Du kan lägga till element i DOM.

774
01:08:02,730 --> 01:08:04,920
Du kan lägga till en ny punkt inslag till DOM,

775
01:08:04,920 --> 01:08:09,280
Du kan ta bort en div-element från DOM, om du vill.

776
01:08:09,280 --> 01:08:15,640
Det är allt det är. Det är bara typ av minne representation av din HTML-fil.

777
01:08:15,640 --> 01:08:19,430
Det kan manipuleras och köras.

778
01:08:19,430 --> 01:08:23,240
Vad sägs om jQuery och att väljaren? Ja, Sam?

779
01:08:23,240 --> 01:08:28,240
>> [Elev] Betyder det att DOM innehåller alla dina CSS och JavaScript?

780
01:08:28,240 --> 01:08:32,729
[Hardison] DOM innehåller de noder, ja.

781
01:08:32,729 --> 01:08:38,270
[Elev] Den innehåller HTML som de andra hjälpdokument utgång?

782
01:08:38,270 --> 01:08:47,250
Om JavaScript ändrar HTML som det gjorde i det här Google -

783
01:08:47,250 --> 01:08:50,160
oops, sorry, jag är inte tillbaka på det.

784
01:08:50,160 --> 01:08:55,420
Kom ihåg hur JavaScript skulle ändra listan över Google-resultaten?

785
01:08:55,420 --> 01:09:04,279
Om JavaScript modifierar det, då de nya listelement är nu en del av DOM.

786
01:09:04,279 --> 01:09:06,990
De injicerades i DOM.

787
01:09:06,990 --> 01:09:10,109
Och det visar sig att de skript och arken stil själva

788
01:09:10,109 --> 01:09:11,830
faktiskt är del av DOM.

789
01:09:11,830 --> 01:09:17,819
Du ser här nere att vi har fått dessa script noder och dessa stil noder.

790
01:09:17,819 --> 01:09:21,800
JavaScript kan lägga till och ta bort dessa också.

791
01:09:21,800 --> 01:09:25,550
Det är därför det är så illa att ha skadlig JavaScript på din sida

792
01:09:25,550 --> 01:09:30,500
är att man nu kan börja ta in andra JavaScript från andra platser.

793
01:09:30,500 --> 01:09:34,080
Så du kan börja med bara 1 JavaScript-fil,

794
01:09:34,080 --> 01:09:37,189
men då kan det börja dra i andra JavaScript-filer.

795
01:09:37,189 --> 01:09:42,330
Du kan använda Ajax för att läsa in i JavaScript och dynamiskt ha nya JavaScript

796
01:09:42,330 --> 01:09:45,029
som körs på din hemsida.

797
01:09:45,029 --> 01:09:50,680
Så det är en riktigt kraftfull sak som våra läsare kan slags ständigt på nytt göra

798
01:09:50,680 --> 01:09:56,280
och åter anpassa det som genereras av JavaScript.

799
01:09:58,740 --> 01:10:01,450
>> [Elev] Dessa stil taggar finns i CSS?

800
01:10:01,450 --> 01:10:04,100
Låt oss titta på det. Yeah.

801
01:10:04,100 --> 01:10:08,480
Denna CSS, igen kan du se var jQuery fick sin väljaren från.

802
01:10:08,480 --> 01:10:18,760
Vi har denna # gb som säger, "Denna styling gäller ett element med ID-gb."

803
01:10:18,760 --> 01:10:24,330
"Ett element med ID-gb kommer att ha denna storlek typsnitt med liknande typsnitt,

804
01:10:24,330 --> 01:10:28,150
"Sans-serif; höjd."

805
01:10:32,340 --> 01:10:33,650
>> Okej.

806
01:10:33,650 --> 01:10:36,010
Tillbaka till iPad.

807
01:10:37,330 --> 01:10:40,550
Hur om datastrukturer - försök, länkade listor?

808
01:10:40,550 --> 01:10:44,700
Har ni vill göra en snabb repetition på det, eller är ni känner -

809
01:10:44,700 --> 01:10:48,940
Ja? Nej? Vem vill datastrukturer? Räck upp handen.

810
01:10:48,940 --> 01:10:52,780
Vem hatar datastrukturer? >> [Elev] Jag vill bara försök. >> Du vill bara försök.

811
01:10:52,780 --> 01:10:55,120
Okej.

812
01:10:55,120 --> 01:11:00,600
Är det någon som inte vill ha försök? Är alla som "Jag hatar försök. Jag gjorde det. Jag försökte det."

813
01:11:00,600 --> 01:11:02,930
[Elev] Jag vill bara veta om omega och stora O.

814
01:11:02,930 --> 01:11:05,600
Okej. Vi kan definitivt gå över det.

815
01:11:05,600 --> 01:11:11,290
Låter det som något som vi vill göra som en grupp? Ja? Sortera på? Nej?

816
01:11:11,290 --> 01:11:18,090
>> Hur HTTP? Betyder det verka som något fler människor vill göra?

817
01:11:18,090 --> 01:11:22,300
Eller är du typen av, "Eh." Låt oss göra HTTP först.

818
01:11:24,850 --> 01:11:32,010
Hur många av er har sett Davids löjligt häftigt HTTP-kort? Någon?

819
01:11:32,010 --> 01:11:33,950
Jag har sett det en hel massa.

820
01:11:33,950 --> 01:11:37,890
Det var en av de första som vi gjorde, och så det var liksom vår demo i sommar.

821
01:11:37,890 --> 01:11:40,750
Dan har sett det ett gäng också, Dan the Man tillbaka dit.

822
01:11:43,150 --> 01:11:50,820
HTTP och så finns det här HTTPS sak som vi har pratat om lite.

823
01:11:50,820 --> 01:11:53,020
Vad behöver du veta om HTTP?

824
01:11:53,020 --> 01:12:00,220
Det är bokstavligen bara protokollet för att interagera med en webbserver.

825
01:12:00,220 --> 01:12:09,860
När du vill tala med Google.com, du pratar med en annan dator över ett nätverk,

826
01:12:09,860 --> 01:12:13,670
vad gör du?

827
01:12:13,670 --> 01:12:16,160
Vi kanske gör det.

828
01:12:16,160 --> 01:12:19,420
Låt mig dra upp en terminal.

829
01:12:19,420 --> 01:12:21,820
Här är min lilla terminalfönster.

830
01:12:21,820 --> 01:12:31,470
Vi kan göra något som telnet, vilket ger oss möjlighet att faktiskt starta en anslutning till Google.com.

831
01:12:31,470 --> 01:12:33,480
Detta är inte något som du behöver veta,

832
01:12:33,480 --> 01:12:35,830
men det är bara för att illustrera vad som händer med HTTP.

833
01:12:35,830 --> 01:12:42,360
www.google.com, port 80.

834
01:12:42,360 --> 01:12:44,860
Vad är det här att göra?

835
01:12:44,860 --> 01:12:49,800
Det är att göra en Internet-anslutning mellan datorn och Google.

836
01:12:49,800 --> 01:12:56,080
Och det är faktiskt ansluter till 173.194.75.99, vilket är en viss dator,

837
01:12:56,080 --> 01:13:02,790
vissa Google-server som bor någonstans förmodligen ut här,

838
01:13:02,790 --> 01:13:05,600
om det kan vara hela vägen tillbaka i Kalifornien.

839
01:13:05,600 --> 01:13:08,320
Nu är jag ansluten.

840
01:13:08,320 --> 01:13:10,810
Okej, det är allt bra.

841
01:13:10,810 --> 01:13:15,260
Men när du går till Google.com, vanligtvis du förväntar Google.com,

842
01:13:15,260 --> 01:13:19,380
någon HTML för att visa upp, eller hur? Inte bara detta.

843
01:13:19,380 --> 01:13:27,740
Problemet är att jag vill ha sagt, "GE MIG GOOGLE.COM" eller vad som helst.

844
01:13:27,740 --> 01:13:34,320
Men om jag säger att, händer ingenting.

845
01:13:34,320 --> 01:13:39,210
Faktum är att om jag slog in ett par gånger, det kommer tillbaka och det står,

846
01:13:39,210 --> 01:13:42,930
"Det var en dålig begäran."

847
01:13:42,930 --> 01:13:46,270
Detta sade, "Nej, nej, nej, nej, nej, nej, nej, nej, nej."

848
01:13:46,270 --> 01:13:51,850
"Du kan inte bara lägga saker i. Du har faktiskt tala HTTP till mig."

849
01:13:51,850 --> 01:13:56,350
"Du måste formatera din begäran som en HTTP-begäran, som en GET eller POST

850
01:13:56,350 --> 01:13:58,180
"Eller något liknande."

851
01:13:58,180 --> 01:14:02,040
"Och sedan ska jag tillbaka korrekt HTML till dig."

852
01:14:02,040 --> 01:14:04,070
Så ni ser vad det gav mig i det här fallet.

853
01:14:04,070 --> 01:14:24,170
Det gav mig HTML att om jag kopierar den och jag Edit html, om jag sätter den i här,

854
01:14:24,170 --> 01:14:33,040
och jag spara den som test.html--oh, kom igen.

855
01:14:33,040 --> 01:14:36,010
Webbsida. Så där.

856
01:14:36,010 --> 01:14:46,310
Nu om jag öppnar Nedladdningar / test.html, nu gav mig dåligt -

857
01:14:46,310 --> 01:14:51,640
Det har inte riktigt göra det som HTML.

858
01:14:51,640 --> 01:14:54,890
Det ser ut som det inte stänga den. Här, låt oss se.

859
01:15:00,610 --> 01:15:02,900
Nope. Okej.

860
01:15:02,900 --> 01:15:07,330
Det kommer inte att göra. Hur som helst, inte att räkna ut.

861
01:15:07,330 --> 01:15:10,080
Men hur som helst, vad den gör är det att återvända till mig HTML,

862
01:15:10,080 --> 01:15:15,800
men det säger i grunden, "Du gav mig en ordentlig HTTP-begäran."

863
01:15:15,800 --> 01:15:20,810
Vad behöver vi veta om HTTP?

864
01:15:20,810 --> 01:15:27,620
Det är sättet att formatera förfrågningar till webbservrar för att få, oftast, HTML som svar.

865
01:15:27,620 --> 01:15:37,050
>> Den andra sak att notera är att när du gör en förfrågan till en webbserver,

866
01:15:37,050 --> 01:15:45,650
måste du ange HTTP-metod som du vill använda.

867
01:15:45,650 --> 01:15:48,730
Vi pratade om det här lite tidigare, där de två stora länder som vi ser

868
01:15:48,730 --> 01:15:52,170
är GET och POST.

869
01:15:52,170 --> 01:15:53,710
Det finns också en hel massa andra.

870
01:15:53,710 --> 01:15:58,420
Det finns HEAD och PUT och DELETE, och alla dessa andra saker,

871
01:15:58,420 --> 01:16:00,410
men GET och POST är de två viktigaste.

872
01:16:00,410 --> 01:16:04,110
Var ser ni de dyker upp? När du skriver former.

873
01:16:04,110 --> 01:16:08,000
När du skriver HTML-formulär, måste du ange HTTP-metoden

874
01:16:08,000 --> 01:16:11,270
genom vilken du vill att formulärdata som ska överföras.

875
01:16:11,270 --> 01:16:15,000
Och så du ser det på serversidan när du skriver PHP-kod

876
01:16:15,000 --> 01:16:19,850
när du hanterar data och du måste titta på POST superglobal

877
01:16:19,850 --> 01:16:24,860
eller GET superglobal att hämta data som lämnats in av användaren.

878
01:16:24,860 --> 01:16:32,900
Och skillnaden mellan GET och POST är att GET modifierar den verkliga adressen

879
01:16:32,900 --> 01:16:40,890
och för det mesta kan man se vilka parametrar som skickas till en GET-förfrågan

880
01:16:40,890 --> 01:16:45,580
väldigt lätt bara genom att titta på webbadressen, medan med en begäran POST

881
01:16:45,580 --> 01:16:52,880
du inte sänder parametrarna för ansökan i webbadressen.

882
01:16:52,880 --> 01:16:58,610
Men de är inte krypterad eller något om du kommer över HTTPS.

883
01:16:58,610 --> 01:17:02,130
POST-parametrar är bara en del av den -

884
01:17:02,130 --> 01:17:05,750
De går inte i webbadressen, på ett effektivt sätt.

885
01:17:05,750 --> 01:17:10,320
Vi tenderar att bara typ av semantiskt skilja 2,

886
01:17:10,320 --> 01:17:15,270
som bara säger att riktigt, kan du göra samma sak med GET som du kan med POST.

887
01:17:15,270 --> 01:17:20,200
Du kan göra samma sak. Det är bara det att vi använder dem i olika situationer.

888
01:17:20,200 --> 01:17:23,330
Vi använder GET när vi försöker bara läsa något och vi säger bara,

889
01:17:23,330 --> 01:17:24,900
"Ge mig denna information."

890
01:17:24,900 --> 01:17:28,670
Och vi använder POST vanligtvis när vi försöker uppdatera något på servern.

891
01:17:28,670 --> 01:17:31,900
Det är därför som när du går till Google.com och vi gjorde det typeahead

892
01:17:31,900 --> 01:17:33,470
Vi såg alla dessa får förfrågningar

893
01:17:33,470 --> 01:17:36,960
eftersom vi bokstavligen bara hämta information från Google,

894
01:17:36,960 --> 01:17:43,710
medan om du gör en Facebook-vägg inlägg, du ska använda,

895
01:17:43,710 --> 01:17:51,990
mest troligt, en HTTP POST-metoden för att skicka dessa data och göra en förändring till Facebook

896
01:17:51,990 --> 01:17:56,220
i väggen, din väns vägg.

897
01:17:56,220 --> 01:17:58,510
Låt oss se.

898
01:18:00,360 --> 01:18:10,030
Jag antar att skillnaden med HTTPS är att det är HTTP men krypterad.

899
01:18:10,030 --> 01:18:12,960
[Småskrattar] Säkert.

900
01:18:12,960 --> 01:18:16,820
Yeah. Och det finns en hel del roliga detaljer om det.

901
01:18:18,560 --> 01:18:21,100
>> Frågor?

902
01:18:21,100 --> 01:18:28,030
Vi måste börja linda upp, och så ska vi göra vissa datastrukturer på sidan. Charlotte?

903
01:18:28,030 --> 01:18:32,270
[Elev] Vad ingår i HTTP-header-filer från värden till metoden

904
01:18:32,270 --> 01:18:35,480
och metoden och antalet? >> Ah.

905
01:18:35,480 --> 01:18:40,060
Det bästa sättet att se på det är att gå till fliken Nätverk

906
01:18:40,060 --> 01:18:48,320
 och bara se vad som händer när du bara gå till Google.com.

907
01:18:48,320 --> 01:18:55,300
Du kan komma hit och du kan se alla de olika HTTP-förfrågningar som gjorts.

908
01:18:55,300 --> 01:18:58,000
Google.com.

909
01:18:58,000 --> 01:19:02,690
Den första var jag försökte gå till Google.com och det sa,

910
01:19:02,690 --> 01:19:05,270
"Åh, Google.com egentligen inte existerar."

911
01:19:05,270 --> 01:19:08,700
"När du verkligen vill gå är till www.google.com."

912
01:19:08,700 --> 01:19:10,010
Så jag fick omdirigeras här.

913
01:19:10,010 --> 01:19:13,020
Det var där jag fick den här 301 då jag fick 200 OK.

914
01:19:13,020 --> 01:19:17,240
Så vad är här, i dina rubriker?

915
01:19:17,240 --> 01:19:21,840
Det säger att detta är den URL som jag gjorde begäran, begäran-metoden,

916
01:19:21,840 --> 01:19:24,550
och sedan statuskoden.

917
01:19:24,550 --> 01:19:26,070
Det är de tre jättarna.

918
01:19:26,070 --> 01:19:30,190
De andra saker här, kakor,

919
01:19:30,190 --> 01:19:37,130
cookies är praktiskt för att räkna ut sessionen, om någon är inloggad eller inte.

920
01:19:37,130 --> 01:19:42,010
De är också praktiskt för att spåra människor. Detta är hur webbplatser spåra dig överallt.

921
01:19:42,010 --> 01:19:44,620
De sätter cookies på din dator.

922
01:19:44,620 --> 01:19:48,320
De är utbildade för att känna igen andra webbplatser "cookies om de kan.

923
01:19:48,320 --> 01:19:52,640
Och så finns det andra saker som säger user agent här.

924
01:19:52,640 --> 01:19:57,490
Denna användaragentsträng identifierar datorn till Google.com och säger,

925
01:19:57,490 --> 01:20:03,010
"Google.com, bara så du vet, någon snubbe som kör den här webbläsaren

926
01:20:03,010 --> 01:20:08,050
"På Intel Mac 10_8_2 bara gick till Google.com."

927
01:20:08,050 --> 01:20:12,560
Och då dessa acceptera saker bara säga, "Vad är min dator,

928
01:20:12,560 --> 01:20:14,590
"Vad är min webbläsare beredd att acceptera?"

929
01:20:14,590 --> 01:20:20,900
Det kan ta emot HTML, kan den godta XML, allt det här andra grejer.

930
01:20:20,900 --> 01:20:24,310
Vilken typ av teckenkodningar betyder acceptera?

931
01:20:24,310 --> 01:20:30,030
Är det accepterar gzip-packade komprimerad grejer?

932
01:20:30,030 --> 01:20:36,120
Ibland webbplatser kommer att komprimera saker att göra det snabbare att skicka över nätverket.

933
01:20:36,120 --> 01:20:38,580
>> Cool. Okej.

934
01:20:38,580 --> 01:20:44,460
Jag tror att det var allt för nu. Vi kommer att lägga ner, men jag kommer att finnas kvar för frågor.

935
01:20:44,460 --> 01:20:47,000
>> [CS50.TV]