1
00:00:00,000 --> 00:00:02,850
>> [Sectie 9 - minder comfortabel]

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

3
00:00:04,920 --> 00:00:07,230
[Dit is CS50. - CS50.TV]

4
00:00:07,230 --> 00:00:11,140
>> Oke. Dus, laatste deel van het semester.

5
00:00:11,140 --> 00:00:18,380
Om te beginnen, ik weet dat er een aantal kreten te doen wat Ajax zijn geweest,

6
00:00:18,380 --> 00:00:21,860
maar zijn er ook andere onderwerpen die we eerst moeten doen?

7
00:00:21,860 --> 00:00:24,960
Laat me over te schakelen naar de iPad, zodat we -

8
00:00:24,960 --> 00:00:29,160
Laat me zwart in plaats van oranje te gebruiken.

9
00:00:29,160 --> 00:00:35,730
Ajax is op het menu. Elk ander?

10
00:00:35,730 --> 00:00:40,670
Iedere andere onderwerpen die mensen willen zien? Ik hoorde DOM ook eerder.

11
00:00:40,670 --> 00:00:45,130
[Student] jQuery. >> JQuery. Oke.

12
00:00:45,130 --> 00:00:49,190
jQuery. We kunnen een gooi te doen op dat.

13
00:00:49,190 --> 00:00:58,190
[Student] XML. >> XML. >> [Student] JSON. >> XML, JSON. Oke.

14
00:00:58,190 --> 00:01:06,390
PHP? Alle goede? C? Alle goede? >> [Student] Het zou geen kwaad om te praten over PHP.

15
00:01:06,390 --> 00:01:10,890
Hash tabellen? Tries? Gelinkte lijsten?

16
00:01:10,890 --> 00:01:16,970
[Student] Oh, op de quiz van vorig jaar, is er een tafel voor de omega en de grote O.

17
00:01:16,970 --> 00:01:21,360
Yeah. >> [Student] voor de tijd voor de verschillende versies en illusies.

18
00:01:21,360 --> 00:01:25,140
Kunnen we praten over dat? >> Ja. We praten over een beetje van datastructuren.

19
00:01:25,140 --> 00:01:33,640
[Student] Ja. >> [Student] Tries. >> [Hardison] datastructuren.

20
00:01:33,640 --> 00:01:37,230
We praten over een aantal pogingen zeker.

21
00:01:37,230 --> 00:01:42,530
[Student] Kunnen we CSS een beetje? >> Ja, kunnen we een beetje CSS doen.

22
00:01:45,280 --> 00:01:49,290
Eventuele andere onderwerpen? Sam? >> [Student] Scope in PHP. >> [Hardison] Scope.

23
00:01:52,540 --> 00:01:56,760
Scope in PHP. >> [Student] HTTP.

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

25
00:02:09,729 --> 00:02:14,380
Ik denk dat een manier om dit te doen zou zijn om alles soort chronologisch ordenen

26
00:02:14,380 --> 00:02:17,930
en beginnen met datastructuren aangezien die waren de eerste.

27
00:02:17,930 --> 00:02:23,480
Of we kunnen deze toewijzen een soort van prioriteit weging en ga vanaf daar.

28
00:02:23,480 --> 00:02:25,860
Dus wat denken jullie ervan?

29
00:02:25,860 --> 00:02:27,820
Is er iets dat iedereen aan het sterven is te zien?

30
00:02:27,820 --> 00:02:31,200
Laten we een verhoging van de handen. Hoe zit het met Ajax?

31
00:02:31,200 --> 00:02:33,320
Hoeveel van jullie willen weten over Ajax?

32
00:02:33,320 --> 00:02:37,870
Hoeveel van jullie zijn als, "Man, Ajax, ik heb je"? Niemand. Oke.

33
00:02:37,870 --> 00:02:40,900
Dus Ajax is behoorlijk hoog. Laten ster die vent.

34
00:02:40,900 --> 00:02:46,650
Hoe zit het met DOM? Iedereen klaar om te rocken DOM? Nee? Oke. We zullen dat er ook een ster.

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

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

37
00:02:52,780 --> 00:02:56,380
Een paar mensen voor jQuery, maar nog steeds mensen zijn een beetje chill met die. Oke.

38
00:02:56,380 --> 00:03:03,000
XML? XML. >> [Student] Gebruik je dat meer dan in de context van Ajax?

39
00:03:03,000 --> 00:03:08,670
In de zin dat - Ja.

40
00:03:08,670 --> 00:03:14,540
Ik bedoel, het is een belangrijk onderdeel van Ajax, dus ik denk dat we kunnen bundelen die met Ajax,

41
00:03:14,540 --> 00:03:16,700
chatten over de hele zaak daar.

42
00:03:16,700 --> 00:03:21,830
JSON? Wat is JSON? Oke, koelen.

43
00:03:21,830 --> 00:03:27,200
Datastructuren? Mensen een goed gevoel daar?

44
00:03:27,200 --> 00:03:29,640
U kent uw gelinkte lijsten, weet je hash tables?

45
00:03:29,640 --> 00:03:33,510
Hoe heeft Speller gaan voor iedereen? Dat was een doozy, huh? Yeah. Oke.

46
00:03:33,510 --> 00:03:37,320
Ja, kunnen we praten een beetje over die maar nogmaals, niet zo belangrijk.

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

48
00:03:41,210 --> 00:03:43,960
Het maken van uw websites look pretty. Oke.

49
00:03:43,960 --> 00:03:50,670
Scope in PHP? Een grote hand daar. Twee grote handen, drie. Oke.

50
00:03:50,670 --> 00:03:53,060
Misschien een medium de hand. >> [Student] Meer dan 2.

51
00:03:53,060 --> 00:03:56,280
Yeah. Sam voert campagne. Haal je handen omhoog.

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

53
00:04:00,910 --> 00:04:07,410
>> Dus laten we eens kijken. Het ziet er zeker als Ajax en de DOM zijn voor het grijpen.

54
00:04:07,410 --> 00:04:10,300
Dus laten we beginnen met dat.

55
00:04:12,740 --> 00:04:16,380
Ik denk dat we hebben een paar opties hier.

56
00:04:16,380 --> 00:04:21,040
Een daarvan is het soort van doen een samenvatting van wat Ajax en XML zijn

57
00:04:21,040 --> 00:04:26,520
omdat we niet echt de tijd om dat te doen in de sectie of in het probleem stelt.

58
00:04:26,520 --> 00:04:31,600
Het andere ding is om te duiken in een aantal problemen van voorgaande jaren 'quizzen

59
00:04:31,600 --> 00:04:33,990
en zien wat er aan de hand daar.

60
00:04:33,990 --> 00:04:40,210
Een voorkeur tussen de 2? >> [Student] Ik denk dat concrete voorbeelden zou meer behulpzaam zijn.

61
00:04:40,210 --> 00:04:42,820
Concrete voorbeelden meer behulpzaam? Oke.

62
00:04:42,820 --> 00:04:46,300
Elke degenen in het bijzonder die van u van de Ajax crew?

63
00:04:46,300 --> 00:04:48,840
Eventuele problemen die u wilt bekijken?

64
00:04:48,840 --> 00:04:54,850
[Student] Is het event handler in verband met Ajax op alle? Ik denk that -

65
00:04:54,850 --> 00:05:00,380
JavaScript event handlers niet noodzakelijk betrekking hebben op Ajax. Ze kunnen.

66
00:05:00,380 --> 00:05:03,240
[Student] Ja, dat is een ander concept dat ik niet daadwerkelijk krijgen. >> Oke.

67
00:05:03,240 --> 00:05:06,670
[Student] Maar ik denk dat in de quiz van het afgelopen jaar is er 1 groot probleem

68
00:05:06,670 --> 00:05:12,320
in de latere delen van de quiz die is gerelateerd aan Ajax en de syntaxis die ik niet echt -

69
00:05:12,320 --> 00:05:14,330
Oke. En Ella?

70
00:05:14,330 --> 00:05:18,950
[Student] Ik voel me alsof ik weet wat Ajax is, maar ik zou niet weten hoe het te gebruiken.

71
00:05:18,950 --> 00:05:24,580
Oke. >> [Student] Ik voel me alsof ik niet weet wat Ajax is of hoe het te gebruiken. [Gelach]

72
00:05:24,580 --> 00:05:27,280
Oke. Dat werkt vrij goed.

73
00:05:27,280 --> 00:05:34,700
Laten we eens kijken. Laten we misschien kijken naar een goed voorbeeld van Ajax eerste.

74
00:05:34,700 --> 00:05:39,030
>> Welkom, welkom. Ik hoop dat je goed op de camera zijn.

75
00:05:39,030 --> 00:05:42,160
Zo niet, kunt u hangen in de rug.

76
00:05:44,610 --> 00:05:48,150
>> Goed voorbeeld van Ajax.

77
00:05:51,940 --> 00:05:54,650
Laat ik overschakelen op mijn laptop.

78
00:05:54,650 --> 00:05:57,690
Hier zijn we op Google.com.

79
00:05:57,690 --> 00:06:05,460
Hoeveel van jullie hebben ooit het plezier gespeeld "Hoe kan ik?" spel op Google?

80
00:06:05,460 --> 00:06:11,940
Hoe kan ik - en je krijgt om alle leuke dingen die komen te zien -

81
00:06:11,940 --> 00:06:15,200
zet deze muziek op mijn Tumblr?

82
00:06:15,200 --> 00:06:18,100
En je kunt blijven gaan en je krijgt alle dit soort leuke dingen.

83
00:06:18,100 --> 00:06:21,380
Wat hier gebeurt?

84
00:06:21,380 --> 00:06:29,270
Terwijl u typt in het zoekvak van Google, worden de real-time resultaten updaten.

85
00:06:29,270 --> 00:06:37,380
Dus zet deze - en je merkt dat alle van de resultaten beginnen bijwerking op de webpagina van Google.

86
00:06:37,380 --> 00:06:43,940
Dat is niet iets wat er gebeurt op uw computer.

87
00:06:43,940 --> 00:06:47,870
Het netwerk is betrokken. Google is betrokken bij deze.

88
00:06:47,870 --> 00:06:56,180
Het blijkt dat elke keer dat u een toets indrukt, zeggen als G of L,

89
00:06:56,180 --> 00:06:58,770
en de zoekresultaten-update, wat er gebeurt

90
00:06:58,770 --> 00:07:04,200
is er enige JavaScript op de pagina die is detecteren dat je de toets ingedrukt,

91
00:07:04,200 --> 00:07:14,750
en het is het maken van een verzoek van het netwerk om Google.com te laden op alle van de nieuwste resultaten

92
00:07:14,750 --> 00:07:18,670
die het beste passen bij de query die je tot nu toe hebt getypt.

93
00:07:21,610 --> 00:07:25,690
Helaas, ik denk dat als we kijken naar dit -

94
00:07:25,690 --> 00:07:32,690
Ik ga kijken naar de bron - de meeste van deze Ajax of JavaScript-code in hier

95
00:07:32,690 --> 00:07:37,830
is alle minified en vaak krabbelde een beetje te.

96
00:07:37,830 --> 00:07:43,180
De minification letterlijk is een programma dat u kunt uw JavaScript code uit te voeren door middel van

97
00:07:43,180 --> 00:07:46,620
en het verandert al uw variabele namen en maakt het helemaal onleesbaar

98
00:07:46,620 --> 00:07:49,180
maar probeert uw webbrowser zo kort mogelijk te maken

99
00:07:49,180 --> 00:07:52,090
zodat wanneer u uw JavaScript-bestanden te versturen via het netwerk

100
00:07:52,090 --> 00:07:55,960
je niet hoeft te grote bestanden te laden of te verzenden.

101
00:07:55,960 --> 00:07:57,960
Dus dit spul is vrij moeilijk om te lezen,

102
00:07:57,960 --> 00:08:03,450
maar begraven in hier, welke bevoegdheden deze typeahead - het modewoord van deze -

103
00:08:03,450 --> 00:08:07,450
is Ajax verzoeken.

104
00:08:07,450 --> 00:08:15,230
>> Wat maakt een Ajax-verzoek anders dan een ander soort netwerk verzoek?

105
00:08:15,230 --> 00:08:18,820
Sam? >> [Student] Je hoeft niet de URL te wijzigen. >> [Hardison] Juist. Precies.

106
00:08:18,820 --> 00:08:24,880
Je merkt als ik typ, "hoe kan ik mijn kaakbeen in pairing modus?" [Grinnikt]

107
00:08:24,880 --> 00:08:28,100
Er zijn altijd een aantal leuke - Ja.

108
00:08:28,100 --> 00:08:30,990
Je merkt dat deze URL hier op de top niet verandert,

109
00:08:30,990 --> 00:08:34,280
en de hele pagina is niet verfrissend.

110
00:08:34,280 --> 00:08:39,590
Dus als we kijken naar dit soort dingen hier naar boven, deze bar aan de top, deze Google,

111
00:08:39,590 --> 00:08:44,630
en vervolgens de zwarte balk hier, dat wordt vaak de chroom van een webpagina,

112
00:08:44,630 --> 00:08:48,630
dat is niet te veranderen. De hele pagina is niet verfrissend.

113
00:08:48,630 --> 00:08:53,890
De Ajax-verzoek wordt gebruikt om alleen de resultaten van de pagina te vernieuwen,

114
00:08:53,890 --> 00:08:59,450
alleen dat 1 klein deel van de pagina, zodat je niet hoeft te gaan naar een geheel andere URL,

115
00:08:59,450 --> 00:09:04,690
een heel ander bestand en laadt die in het geheugen.

116
00:09:04,690 --> 00:09:12,640
Dus als je mensen praten over de dynamische Web 2.0 type revolutie horen,

117
00:09:12,640 --> 00:09:15,370
dit was achter een heleboel.

118
00:09:15,370 --> 00:09:19,800
Dit is wat stelt u in staat om een ​​muur post op Facebook schrijven, raakte Post,

119
00:09:19,800 --> 00:09:26,350
en hebben de post verschijnen zonder dat de volledige Facebook-pagina verfrissend

120
00:09:26,350 --> 00:09:33,670
of blader door een bos van foto's en laden van de foto's dynamisch,

121
00:09:33,670 --> 00:09:35,970
want hoeveel zou het zuigen als je naar je Facebook-pagina,

122
00:09:35,970 --> 00:09:38,130
aangeklikt's en dan moest om daar te zitten en te wachten

123
00:09:38,130 --> 00:09:43,730
terwijl alle paar duizend van uw Facebook-foto's in het geheugen geladen?

124
00:09:43,730 --> 00:09:45,170
Dat is een enorme belasting.

125
00:09:45,170 --> 00:09:48,360
Maar met Ajax kun je dat asynchroon doen,

126
00:09:48,360 --> 00:09:54,810
en dat is het asynchrone deel van de Ajax.

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

128
00:09:59,230 --> 00:10:04,370
Zijn we goed? Heeft iedereen soort van begrijpen ongeveer wat Ajax doet?

129
00:10:04,370 --> 00:10:10,670
Het is gedaan door de JavaScript, is het gedaan soort dynamisch en asynchroon

130
00:10:10,670 --> 00:10:12,540
nadat de pagina is geladen.

131
00:10:12,540 --> 00:10:18,010
Het komt vaak na als een soort van de reactie op een gebeurtenis,

132
00:10:18,010 --> 00:10:23,860
die ofwel een muisklik of een toetsaanslag of iets dergelijks.

133
00:10:23,860 --> 00:10:30,820
En dan maakt het een oproep naar de server, of u nu op Google.com

134
00:10:30,820 --> 00:10:35,860
of Facebook.com, haalt een aantal nieuwe inhoud aan dan tonen of bijwerken

135
00:10:35,860 --> 00:10:38,050
of iets dergelijks.

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

137
00:10:40,080 --> 00:10:45,260
Laten we eens kijken naar een paar voorbeelden uit voorgaande jaren.

138
00:10:47,260 --> 00:10:49,140
We gaan naar de quizzen.

139
00:10:49,140 --> 00:10:54,160
En dan Charlotte, je Quiz 1 vermelden vanaf 2011. >> [Student] Ja.

140
00:10:54,160 --> 00:11:00,520
Een ding dat ik zal waarschuwen, is dat bij het kijken naar de voorgaande jaren 'quizzen

141
00:11:00,520 --> 00:11:07,970
je zult dit spul heet XHR vaak met relatie met Ajax te zien.

142
00:11:07,970 --> 00:11:18,750
XHR en XML HttpRequest is een soort van de ruwe manier van Ajax, als je wil.

143
00:11:18,750 --> 00:11:25,740
Dit jaar hebben we overgestapt op bijna volledig gebruik van deze jQuery library.

144
00:11:25,740 --> 00:11:34,540
jQuery is een bibliotheek van helper JavaScript-functies en klassen en allerlei goodies,

145
00:11:34,540 --> 00:11:40,730
en jQuery soort abstraheert de ruwe XHR dingen van je af

146
00:11:40,730 --> 00:11:44,930
zodat het een stuk makkelijker om de werkelijke Ajax dingen doen.

147
00:11:44,930 --> 00:11:47,020
Dus als je scrollen door deze eerdere jaren 'quizzen

148
00:11:47,020 --> 00:11:51,860
en je ziet dingen die zegt XHR en nieuwe XML HttpRequest,

149
00:11:51,860 --> 00:11:54,490
al dat soort dingen, kun je negeren.

150
00:11:54,490 --> 00:11:56,520
In plaats daarvan gaan we gewoon de jQuery manier.

151
00:11:56,520 --> 00:12:00,490
We verwachten niet dat je met XML HttpRequest.

152
00:12:00,490 --> 00:12:05,690
Maar goed om te weten dat het synoniem is met dit idee van Ajax,

153
00:12:05,690 --> 00:12:13,620
deze Asynchronous JavaScript ophalen XML of JSON of wat dan ook via het netwerk.

154
00:12:13,620 --> 00:12:20,260
Maar oorspronkelijk werd gecorreleerd met XML of verbonden XML.

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

156
00:12:24,090 --> 00:12:27,950
Laten we naar beneden scrollen. Weet je nog welk probleem in het bijzonder, Charlotte?

157
00:12:33,080 --> 00:12:36,550
Was het op deze pagina dat ik ben op zoek naar hier? >> [Student] Ja, ik denk het wel.

158
00:12:36,550 --> 00:12:38,810
[Hardison] Ah, ik heb het. Oke. Yeah.

159
00:12:38,810 --> 00:12:41,660
Laten we praten over dit heel snel.

160
00:12:44,640 --> 00:12:53,860
De manier waarop Ajax werkt is dat je een aantal JavaScript-bestand hebt op uw computer,

161
00:12:53,860 --> 00:12:59,570
en echt het draait soort in de context van uw webbrowser.

162
00:12:59,570 --> 00:13:10,820
Dus als je laatste project is het maken - ik weet het niet - een nieuwe dating site voor Harvard mensen

163
00:13:10,820 --> 00:13:15,000
en u wilt dat uw dating site de mogelijkheid om anonieme berichten te verzenden

164
00:13:15,000 --> 00:13:19,130
van persoon tot persoon of anonieme Facebook wall-achtige berichten

165
00:13:19,130 --> 00:13:24,190
en je wilt Ajax een of andere manier te gebruiken in die zo dat wanneer je een bericht te posten

166
00:13:24,190 --> 00:13:26,960
het niet de hele site te vernieuwen,

167
00:13:26,960 --> 00:13:32,870
in uw JavaScript code zou het opzetten van een nieuwe Ajax-oproep.

168
00:13:32,870 --> 00:13:36,570
Ik ben debatteren over het al dan niet om dit te doen op de laptop.

169
00:13:36,570 --> 00:13:45,940
Het belangrijkste deel van het Ajax gesprek is dat er dit soort asynchroniciteit om het

170
00:13:45,940 --> 00:13:50,250
in die zin dat - laat me terug naar mijn iPad te schakelen -

171
00:13:52,120 --> 00:14:07,160
in de zin dat als ik code die gaat zeggen doen wat Ajax,

172
00:14:07,160 --> 00:14:11,160
Dan kan ik niet op de zeer volgende regel van mijn JavaScript-code

173
00:14:11,160 --> 00:14:15,170
verwachten dat de Ajax zal zijn afgerond.

174
00:14:15,170 --> 00:14:24,260
Wat gebeurt is dat als uw code wordt uitgevoerd achtereenvolgens in JavaScript,

175
00:14:24,260 --> 00:14:28,760
als je dit Ajax belt, bent u in feite het vertakken zich af

176
00:14:28,760 --> 00:14:33,960
en het versturen van een verzoek naar het Internet om enkele server hier,

177
00:14:33,960 --> 00:14:37,740
dat is dit vakje Ik teken en duidelijk het niet tekenen erg goed.

178
00:14:37,740 --> 00:14:41,280
Je forking uit deze oproep aan de server dat gaat even duren

179
00:14:41,280 --> 00:14:45,020
als het gaat uit naar het internet en gaat en slaat die server

180
00:14:45,020 --> 00:14:49,350
en gaat en roept dat PHP-script dat u op de back-end heb geschreven

181
00:14:49,350 --> 00:14:55,110
om daadwerkelijk op te nemen dat anonieme bericht in uw database of iets dergelijks.

182
00:14:55,110 --> 00:15:01,640
Dus dat zal enige tijd uiteindelijk nemen, en dan wanneer de server wordt gedaan verwerking

183
00:15:01,640 --> 00:15:10,090
je Ajax-verzoek, zal het terugkeren naar uw JavaScript-code,

184
00:15:10,090 --> 00:15:15,190
maar je weet niet echt waar, op welk punt in de uitvoering

185
00:15:15,190 --> 00:15:19,680
je gaat naar deze reactie ontvangen.

186
00:15:23,430 --> 00:15:28,620
Hoe wordt dit behandeld in JavaScript?

187
00:15:28,620 --> 00:15:36,510
Dit is waar het vandaan komt in dit probleem dat we het over op de laptop

188
00:15:36,510 --> 00:15:47,230
waar u een handler te registreren, u een bepaalde JavaScript-functie registreren

189
00:15:47,230 --> 00:15:52,650
te lopen wanneer de Ajax-verzoek is voltooid.

190
00:15:52,650 --> 00:15:58,010
U kunt uw Ajax gesprek en dan niet gewoon in het volgende regel code

191
00:15:58,010 --> 00:16:01,570
gaan ervan uit dat de Ajax gesprek heeft afgerond.

192
00:16:03,670 --> 00:16:08,310
Een deel van de schoonheid van dit is dat je wilt dat uw JavaScript om blijven draaien

193
00:16:08,310 --> 00:16:13,210
nadat het de Ajax-oproep is gemaakt, omdat het kan vork uit deze aparte aanvraag

194
00:16:13,210 --> 00:16:15,750
en houd verwerking andere dingen.

195
00:16:15,750 --> 00:16:19,300
Je hebt dit soort concurrency hier gaan waar uw JavaScript blijft lopen kreeg

196
00:16:19,300 --> 00:16:23,520
en blijf het doen van andere leuke dingen, zou kunnen blijven spinnen andere Ajax verzoeken.

197
00:16:23,520 --> 00:16:28,630
Uw Ajax verzoeken gewoon gaan met het netwerk en dan terug te komen wanneer ze terugkomen,

198
00:16:28,630 --> 00:16:33,390
maar als je deze handler functie registreren,

199
00:16:33,390 --> 00:16:40,040
dat is als je weet dat je Ajax oproep is teruggekeerd omdat deze functie wordt aangeroepen.

200
00:16:40,040 --> 00:16:46,040
Dus in plaats van het hebben van deze sequentiële executie pad dat we gewend zijn in C,

201
00:16:46,040 --> 00:16:51,430
heb je wat meer vergelijkbaar met wat we zagen in Kras aan het begin van het semester

202
00:16:51,430 --> 00:16:54,590
waar u deze uitzendingen

203
00:16:54,590 --> 00:17:00,930
en dan heb je deze "als groene vlag geklikt" of "wanneer ik deze gebeurtenis."

204
00:17:00,930 --> 00:17:05,030
Dat is in wezen wat er gebeurt hier in JavaScript met deze Ajax verzoeken.

205
00:17:08,790 --> 00:17:11,940
>> Voor het antwoord op deze vraag op lijn 20,

206
00:17:11,940 --> 00:17:15,500
"In de context van Ajax, wat betekent dit regel code doen?"

207
00:17:15,500 --> 00:17:22,339
kan iemand soort parafraseren wat ik net zei begrip te bevestigen?

208
00:17:22,339 --> 00:17:24,630
[Student] Het spijt me. Wat doet de linker helft van het te zeggen?

209
00:17:24,630 --> 00:17:28,600
[Hardison] xhr.onreadystatechange. Sorry. Krijg ik afgesneden?

210
00:17:28,600 --> 00:17:31,360
Dit is dat XHR syntaxis dat we niet te maken hebben met.

211
00:17:31,360 --> 00:17:34,060
U heeft de vergelijkbaar concept met de jQuery.

212
00:17:34,060 --> 00:17:39,400
Laten we naar Source Code, woensdag, Index.

213
00:17:39,400 --> 00:17:45,020
Laten we eens kijken deze omhoog. Oke. Hebbes.

214
00:17:48,110 --> 00:17:52,700
Hier is dat Ajax syntax dat we het over hebben.

215
00:17:52,700 --> 00:17:56,270
Hier kun je met vermelding van de Ajax-verzoek.

216
00:17:56,270 --> 00:18:03,590
Je zegt, "Dit is de URL Ik wil om uit en ping gaan."

217
00:18:03,590 --> 00:18:09,250
"Ik wil POST gebruiken in plaats van GET."

218
00:18:09,250 --> 00:18:13,520
En dan de data type is "Ik wil JSON te worden geretourneerd."

219
00:18:13,520 --> 00:18:15,670
Nogmaals, XML was een soort van de traditionele ding.

220
00:18:15,670 --> 00:18:18,600
Maar wat we zoekt naar die functie.

221
00:18:18,600 --> 00:18:21,130
Dit is dat hier.

222
00:18:21,130 --> 00:18:24,870
Deze functie (respons) is dat onreadystatechange.

223
00:18:24,870 --> 00:18:30,300
Dit is de handler. Dit is wat wordt uitgevoerd wanneer deze aanvraag terugkomt.

224
00:18:30,300 --> 00:18:35,030
Dus je merkt dat deze functie dat Tommy hier heeft geschreven

225
00:18:35,030 --> 00:18:41,850
dat we over gesproken in lezing op woensdag werd alles over het maken die leuk typeahead voor ons.

226
00:18:41,850 --> 00:18:46,490
Je merkt dat wat hij doet is hij de bouw van de Ajax-verzoek

227
00:18:46,490 --> 00:18:52,680
en dan is er niets na de Ajax-verzoek.

228
00:18:52,680 --> 00:18:57,470
Hij is niet de verwerking van de respons van de Ajax-verzoek na de oproep wordt gedaan.

229
00:18:57,470 --> 00:19:00,770
Hij doet het alleen in deze handler functie

230
00:19:00,770 --> 00:19:05,170
dat zal zo spoedig worden genoemd als het antwoord komt terug.

231
00:19:08,330 --> 00:19:12,580
>> Sam. >> [Student] Heeft Ajax verzoeken moeten zijn van het type POST of kan het GET?

232
00:19:12,580 --> 00:19:16,970
Ze kunnen ofwel. >> [Student] Hoe zou dat werken als je niet de URL te veranderen?

233
00:19:16,970 --> 00:19:22,280
Hoe zou dat werken als je niet de URL te veranderen?

234
00:19:22,280 --> 00:19:26,400
Het is maar net waar de gegevens gaat.

235
00:19:26,400 --> 00:19:30,450
Dus de vraag is kan Ajax verzoeken zijn POST of GET?

236
00:19:30,450 --> 00:19:37,730
Dat is waar het ook kan zijn. Het is gewoon echt een semantisch verschil tussen de POST en GET.

237
00:19:40,460 --> 00:19:45,670
GET meestal betekent dat je gewoon iets uit de server leest

238
00:19:45,670 --> 00:19:50,940
en je bent niet iets te veranderen, terwijl een POST impliceert typisch

239
00:19:50,940 --> 00:19:54,390
dat je het schrijven van gegevens of je schrijft iets op een server.

240
00:19:54,390 --> 00:19:59,500
POST vaak gebruik je wanneer je probeert om ergens staat te veranderen.

241
00:19:59,500 --> 00:20:04,400
Daarom logins altijd met HTTP POST,

242
00:20:04,400 --> 00:20:07,940
terwijl Google maakt een bos van GET-aanvragen.

243
00:20:07,940 --> 00:20:19,850
Eigenlijk, als we terug naar onze Google bijvoorbeeld gaan en als we kijken naar onze developer tools hier,

244
00:20:19,850 --> 00:20:25,360
laten we eens kijken naar de developer tools hier aan de onderkant en openstellen van het netwerk.

245
00:20:25,360 --> 00:20:32,910
Als we beginnen te typen, zie je al deze GET verzoeken komende inch

246
00:20:36,240 --> 00:20:40,260
Je ziet al die GET-aanvragen hier aan de onderkant van het scherm

247
00:20:40,260 --> 00:20:44,550
dat zijn al deze xjs.

248
00:20:44,550 --> 00:20:52,390
Dit is het Ajax-verzoek terug te komen.

249
00:20:52,390 --> 00:20:59,680
En als we waren om op te klikken, kunnen we zien wat het zegt en wat de reactie is.

250
00:20:59,680 --> 00:21:04,190
Het geeft ons al deze informatie over de respons die we kregen

251
00:21:04,190 --> 00:21:09,430
toen we naar Google de headers die hier beneden waren.

252
00:21:09,430 --> 00:21:15,380
Laten we eens zien of het - Het zal ons een query string ergens hebben.

253
00:21:19,060 --> 00:21:22,310
Aanvraag-URL. Yeah.

254
00:21:22,310 --> 00:21:31,630
Oorspronkelijke query, negeer slecht query, tweede pas, hoe ik meter -

255
00:21:31,630 --> 00:21:35,900
Hoe dan ook, ergens in Hier kun je deze "hoe ik meter" vraag vinden

256
00:21:35,900 --> 00:21:39,010
in het verzoek aan de server.

257
00:21:39,010 --> 00:21:42,480
En dan de reactie terugkomen, is wat we zien.

258
00:21:42,480 --> 00:21:45,120
Dus ja, het kan ofwel GET of POST.

259
00:21:45,120 --> 00:21:50,650
Het heeft de neiging om gewoon een semantisch verschil. We kunnen dekken die met HTTP. Ja, Ella?

260
00:21:50,650 --> 00:21:55,360
>> [Student] Is het verschil tussen JSON en XML gewoon dat JSON is moderner?

261
00:21:55,360 --> 00:22:00,730
Is het verschil tussen JSON en XML dat JSON is moderner?

262
00:22:04,100 --> 00:22:09,900
XML en JSON zijn gewoon 2 verschillende manieren van coderen van gegevens.

263
00:22:15,130 --> 00:22:20,540
XML is de Extensible Markup Language.

264
00:22:20,540 --> 00:22:29,390
HTML is een subset van XML.

265
00:22:29,390 --> 00:22:34,650
Dus bijvoorbeeld, laten we trekken TextEdit.

266
00:22:34,650 --> 00:22:44,990
XML is gewoon gedefinieerd als gegevens die zijn ingesloten in een reeks van tags.

267
00:22:44,990 --> 00:22:52,820
Dus html, / html, deze jongens zijn geldig tags.

268
00:22:52,820 --> 00:22:57,470
Laten we blazen deze omvang hier en maak het beter leesbaar.

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

270
00:23:02,070 --> 00:23:06,300
XML gewoon definieert een tag als iets als dit

271
00:23:06,300 --> 00:23:09,880
waar je een open hoeksteun, de naam van het label,

272
00:23:09,880 --> 00:23:15,870
en voer een aantal attributen, die HTML we vaak niet attributen.

273
00:23:15,870 --> 00:23:25,820
Maar bijvoorbeeld, als we een script-tag, vaak heeft het de vorm van tekst, webbrowser.

274
00:23:30,130 --> 00:23:35,770
En de binnenkant van de tags is data.

275
00:23:37,600 --> 00:23:44,650
In ware XML kun je eigenlijk bepalen deze tags te zijn wat je wilt.

276
00:23:44,650 --> 00:23:46,840
Het is gewoon een manier van het structureren van uw informatie.

277
00:23:46,840 --> 00:23:53,800
Dus bijvoorbeeld, als ik wilde mijn familie te coderen in XML,

278
00:23:53,800 --> 00:24:01,500
Ik zou zoiets doen, zoals vader en zet dan informatie over hem

279
00:24:01,500 --> 00:24:09,240
en broer en zet informatie over mijn broer.

280
00:24:09,240 --> 00:24:18,370
Alleen deze manier van het structureren van uw gegevens is XML.

281
00:24:18,370 --> 00:24:24,220
JSON, aan de andere kant, volgt de JavaScript Object Notation,

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

283
00:24:27,140 --> 00:24:34,040
Dus in plaats van het schrijven van dit soort tag, dicht tag soort formaat,

284
00:24:34,040 --> 00:24:39,290
we in plaats daarvan schrijf het uit als een JavaScript-object.

285
00:24:39,290 --> 00:24:45,000
Dus de JavaScript-object heeft de accolade om dingen te openen

286
00:24:45,000 --> 00:24:48,700
en dan een accolade om dingen te sluiten.

287
00:24:48,700 --> 00:24:53,580
Laat me uitzoomen een beetje, vergroten

288
00:24:53,580 --> 00:24:59,790
En dan wat je hebt zijn de namen van velden, dus "vader":

289
00:24:59,790 --> 00:25:05,480
en dan kan ik informatie over hem zetten

290
00:25:05,480 --> 00:25:12,990
en dan "broer": en informatie over mijn broer.

291
00:25:16,930 --> 00:25:23,040
En natuurlijk alles wat hier is -

292
00:25:23,040 --> 00:25:26,340
Ik denk dat wat er leuk is aan JSON in tegenstelling tot XML

293
00:25:26,340 --> 00:25:35,750
is omdat een JSON object aan dit object notatie dat JavaScript heeft.

294
00:25:35,750 --> 00:25:43,600
JavaScript kan echt gemakkelijk te trekken die in het geheugen en behandelen net als een JavaScript-object

295
00:25:43,600 --> 00:25:45,500
rechts wanneer u het ontvangen terug van de server.

296
00:25:45,500 --> 00:25:49,460
Er is geen parsing dat het echt om dat te doen is heavy duty of zwaar tillen,

297
00:25:49,460 --> 00:25:55,690
terwijl met XML je moet ofwel plugins of een soort van gebruik -

298
00:25:55,690 --> 00:25:59,130
Afhankelijk van wat je precies wilt verzenden

299
00:25:59,130 --> 00:26:04,770
en wat u gebruikt om de XML te ontvangen, moet u misschien een beetje meer werk parsing doen,

300
00:26:04,770 --> 00:26:10,090
dat deze JavaScript spul, als je gewoon aan het schrijven bent met JavaScript

301
00:26:10,090 --> 00:26:14,780
en u ontvangt JavaScript terug, het is echt makkelijk om mee te werken.

302
00:26:16,590 --> 00:26:19,890
Het andere ding dat mensen soms ook zal noemen

303
00:26:19,890 --> 00:26:23,630
is dat met XML u al deze openstaande tags en sluit-tags,

304
00:26:23,630 --> 00:26:30,620
dus het groot kan krijgen, kan het een beetje opgeblazen.

305
00:26:30,620 --> 00:26:33,990
Dus er zijn sommigen die zal praten over hoe met JSON

306
00:26:33,990 --> 00:26:42,280
je hoeft niet al die geopende tags en sluit-tags, dus het is meer gecomprimeerd.

307
00:26:42,280 --> 00:26:47,350
De reden dat dat belangrijk is, is dat wanneer je dingen over het netwerk te laden

308
00:26:47,350 --> 00:26:50,040
als je praat met een externe server,

309
00:26:50,040 --> 00:26:55,010
hoe minder dat moet via het internet te verzenden, hoe sneller alles gaat.

310
00:26:56,890 --> 00:26:59,700
Hoe dan ook, de sleutel mee te nemen is hier ze zijn gewoon 2 verschillende manieren van het structureren van uw gegevens,

311
00:26:59,700 --> 00:27:02,150
formatteren van uw gegevens.

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

313
00:27:06,110 --> 00:27:08,230
Andere vragen? Charlotte?

314
00:27:08,230 --> 00:27:11,280
[Student] Mag ik 1 laatste vraag over de syntaxis van Ajax? >> Sure.

315
00:27:11,280 --> 00:27:16,590
[Student] Als je terug naar het voorbeeld code gaan en gewoon te zoomen een beetje,

316
00:27:16,590 --> 00:27:19,280
er is maar 1 regel code hierboven.

317
00:27:19,280 --> 00:27:21,530
Kunnen we gaan?

318
00:27:21,530 --> 00:27:24,260
op ('keyup', function ()

319
00:27:24,260 --> 00:27:30,670
Is die set van lege haakjes achter op ('keyup' verwijst naar de functie na het succes?

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

321
00:27:33,580 --> 00:27:35,450
Een paar dingen hier.

322
00:27:35,450 --> 00:27:43,170
op ('keyup', dit is een manier van doen het equivalent in Scratch

323
00:27:43,170 --> 00:27:50,330
wanneer een toets wordt ingedrukt en je til af van de sleutel.

324
00:27:50,330 --> 00:27:57,440
Eigenlijk, in JavaScript u op ('KeyDown', op ('keyup', en op ('indrukken',

325
00:27:57,440 --> 00:28:06,340
en je kunt dingen doen op elk van die 3 verschillende evenementen.

326
00:28:06,340 --> 00:28:11,060
Dit is een event handler elk moment een sleutel komt registreren,

327
00:28:11,060 --> 00:28:16,210
en dan is deze functie is dit hele ding

328
00:28:16,210 --> 00:28:19,560
helemaal naar beneden naar daar.

329
00:28:19,560 --> 00:28:23,880
Deze functie heeft geen naam.

330
00:28:23,880 --> 00:28:25,580
Beetje raar.

331
00:28:25,580 --> 00:28:31,500
Al onze functies die we hebben gedaan in C en PHP hebben allemaal namen.

332
00:28:31,500 --> 00:28:39,900
Dit is wat we een anonieme functie aan te roepen. Klinkt logisch, toch? Geen naam. Anoniem.

333
00:28:39,900 --> 00:28:43,550
Wat is handig over de anonieme functie?

334
00:28:43,550 --> 00:28:47,860
Het is duidelijk dat we niet deze functie ergens anders noemen in onze code.

335
00:28:47,860 --> 00:28:53,920
Hoe zouden we deze functie noemen elders in onze code? Dat kunnen we niet.

336
00:28:56,540 --> 00:29:03,120
Er staat geen naam. Ik kan niet zeggen: "Oh ja, bel die functie die ik zei met op ('keyUp'."

337
00:29:05,080 --> 00:29:08,190
Wat is handig erover is echter dat in JavaScript

338
00:29:08,190 --> 00:29:11,100
als we voortdurend registreren deze event handlers -

339
00:29:11,100 --> 00:29:17,510
dat is wat dit heet, je bent deze functie registreren als handler als een toets komt -

340
00:29:17,510 --> 00:29:23,830
is het is echt leuk om te kunnen om gewoon te definiëren deze functies soort inline en gewoon zeggen,

341
00:29:23,830 --> 00:29:28,840
"Toen de keyup wordt ingedrukt, onthoud dit functie die ik ga hier te definiëren,

342
00:29:28,840 --> 00:29:35,340
en het zal deze functie onthouden en dan zal deze functie te doen

343
00:29:35,340 --> 00:29:37,590
wanneer de toets komt.

344
00:29:37,590 --> 00:29:41,930
We praten over dit meer als je eenmaal meer te krijgen in functioneel programmeren.

345
00:29:41,930 --> 00:29:46,080
Dit is een beetje een smaak van die waar we in wezen het passeren van een functie rond

346
00:29:46,080 --> 00:29:49,960
als object, bijna alsof het als een variabele.

347
00:29:49,960 --> 00:29:54,410
In plaats van het passeren van een string of een int, we passeren een functie.

348
00:29:56,000 --> 00:30:00,400
Dat is een beetje een raar ding, maar wat leuk is dat alle variabelen in hier,

349
00:30:00,400 --> 00:30:08,020
binnenkant van deze functie, de scoping kwesties zijn mooi

350
00:30:08,020 --> 00:30:18,500
want als je een variabel tot hier, kunt u verwijzen naar die variabele binnenkant van deze functie

351
00:30:18,500 --> 00:30:22,720
omdat deze functie is de binnenkant van deze andere functie verklaard.

352
00:30:22,720 --> 00:30:26,670
Zo krijg je op een uitkering als dat hebben.

353
00:30:26,670 --> 00:30:31,290
Nogmaals, dat is iets dat meer meta. U zult het dekken in de toekomst klassen.

354
00:30:31,290 --> 00:30:36,150
>> Ja. >> [Student] Aangezien de functie is anoniem, kan het ergens anders worden gebruikt?

355
00:30:36,150 --> 00:30:40,750
Of kan het alleen worden gebruikt in het kader van deze functie?

356
00:30:40,750 --> 00:30:45,460
[Hardison] Het wordt gebruikt in de context van deze functie. Yeah. Ja?

357
00:30:45,460 --> 00:30:48,860
>> Heeft het iets te maken met het feit dat het een objectgeoriënteerde taal?

358
00:30:48,860 --> 00:30:52,650
[Hardison] Heeft het iets te maken met het feit dat het object-georiënteerd?

359
00:30:58,000 --> 00:31:03,190
Ik zou zeggen dat dit heeft meer te maken met het feit dat dit functionele aspecten.

360
00:31:03,190 --> 00:31:05,640
We hebben het over de object-georiënteerde paradigma van de programmering,

361
00:31:05,640 --> 00:31:09,890
en dit is een soort van een van die aspecten van de functionele paradigma van de programmering

362
00:31:09,890 --> 00:31:17,520
waar u het maken van functies die zijn samengesteld uit andere functies

363
00:31:17,520 --> 00:31:22,460
en u passeert functies rond.

364
00:31:22,460 --> 00:31:25,040
>> [Student] JavaScript is dus een functie taal ook.

365
00:31:25,040 --> 00:31:28,420
Het heeft elementen van het, ja. Yeah.

366
00:31:28,420 --> 00:31:30,000
JavaScript en veel -

367
00:31:30,000 --> 00:31:35,120
PHP heeft een aantal van deze ook Python heeft deze zelfde soort dingen,

368
00:31:35,120 --> 00:31:43,390
Ruby heeft dit soort dingen ook, en dit is gebruikelijk in meer van deze moderne talen.

369
00:31:43,390 --> 00:31:49,660
Je echt deze scripttalen dat zijn een soort van jack-of-all-trades.

370
00:31:49,660 --> 00:31:53,180
Het is net als de grote vette Zwitsers zakmes, de een dat je niet eens in je zak

371
00:31:53,180 --> 00:31:55,090
omdat het te breed.

372
00:31:55,090 --> 00:31:57,970
Dat is een beetje hoe sommige van deze talen zijn geworden.

373
00:32:01,190 --> 00:32:04,520
>> Nog meer vragen? Oke.

374
00:32:04,520 --> 00:32:06,280
Hoe zijn jullie je?

375
00:32:06,280 --> 00:32:13,830
Laten we teruggaan naar die quiz echt snel gaan en kijken of we kunnen beantwoorden 21 en 20.

376
00:32:13,830 --> 00:32:22,030
We spraken over 20 zoals we deze handler geregistreerd.

377
00:32:22,030 --> 00:32:31,550
Deze vraag is hier: "Wat zou het effect zijn als we schreven dat lijn met een paar haakjes?"

378
00:32:31,550 --> 00:32:34,680
Zie je het verschil, hoe aan de top zijn er geen haakjes

379
00:32:34,680 --> 00:32:38,370
en hier beneden er tussen haakjes achter de naam van de functie?

380
00:32:38,370 --> 00:32:43,520
Een ding dat is belangrijk op te merken,

381
00:32:43,520 --> 00:32:45,410
hier we verwijzen naar een functie.

382
00:32:45,410 --> 00:32:48,780
Dit is niet een anonieme functie. Het is een naam gekregen, handler,

383
00:32:48,780 --> 00:32:52,580
terwijl in onze Ajax hier dat we waren gewoon op zoek naar,

384
00:32:52,580 --> 00:32:58,260
alle functies die we rond waren op doorreis waren allemaal anoniem: geen functie naam,

385
00:32:58,260 --> 00:33:00,400
geen functie naam.

386
00:33:00,400 --> 00:33:05,670
Dus is het gebruikelijk om deze functies soort inline als anonieme functies definiëren

387
00:33:05,670 --> 00:33:08,660
voor sommige scoping voordelen.

388
00:33:08,660 --> 00:33:15,340
Je zou heel goed deze functie hebt gedefinieerd hier of dit op (functie 'keyUp'.

389
00:33:15,340 --> 00:33:22,400
Je zou deze man hebben gedefinieerd als functies met namen elders in uw JavaScript-code,

390
00:33:22,400 --> 00:33:27,650
en dan in plaats van het definiëren van de functie hier, zou je de naam van de functie passeren

391
00:33:27,650 --> 00:33:31,320
recht op deze plek.

392
00:33:31,320 --> 00:33:36,570
Een ding om op te merken is dat je niet zou willen om de haakjes te gebruiken

393
00:33:36,570 --> 00:33:39,400
als je daarbij de naam van de functie,

394
00:33:39,400 --> 00:33:44,480
want als je de haakjes te gebruiken, bent u impliceren "noemen deze functie,"

395
00:33:44,480 --> 00:33:48,820
terwijl in plaats daarvan hier we willen gewoon de naam van de functie passeren.

396
00:33:53,740 --> 00:34:02,400
Als we kijken naar wat er hier aan de hand, het grote verschil is dat deze top regel code zegt

397
00:34:02,400 --> 00:34:08,420
effectief, onderhouden van een pointer naar de functie genaamd handler,

398
00:34:08,420 --> 00:34:11,820
en wanneer de Ajax-oproep is voltooid, noemen deze functie,

399
00:34:11,820 --> 00:34:17,210
daadwerkelijk uitvoeren van de functie, plug in de argumenten, al dat werk te doen,

400
00:34:17,210 --> 00:34:23,480
dat deze lijn hier beneden zegt in plaats van het handhaven van een pointer

401
00:34:23,480 --> 00:34:30,389
de functie heet handler, dit onreadystatechange veld

402
00:34:30,389 --> 00:34:33,980
zal het resultaat van een functie genaamd naar handler houden,

403
00:34:33,980 --> 00:34:38,409
dus het gaat om handler te evalueren, het gaat om daadwerkelijk handler bellen nu -

404
00:34:38,409 --> 00:34:41,250
niet wanneer de Ajax oproep voltooid, maar op dit moment,

405
00:34:41,250 --> 00:34:43,940
dat is niet wat je wilt doen als je iets schrijft

406
00:34:43,940 --> 00:34:48,150
om te gaan met een Ajax call dat is voltooid.

407
00:34:56,520 --> 00:35:02,250
>> Oke. Vragen over dat? Het is een subtiel verschil.

408
00:35:03,640 --> 00:35:06,340
Het is een subtiel verschil.

409
00:35:06,340 --> 00:35:09,710
Een ding dat ik zou zeker doen als je het niet hebt gedaan -

410
00:35:09,710 --> 00:35:15,040
want dit is nieuwe dingen, het duurt een tijdje voor het echt zinken in

411
00:35:15,040 --> 00:35:17,840
tenzij je daadwerkelijk typt een aantal van deze spullen -

412
00:35:17,840 --> 00:35:23,340
Ik wil u aanmoedigen om te gaan door de broncode

413
00:35:23,340 --> 00:35:25,610
dat Tommy gepresenteerd in collegezalen op woensdag

414
00:35:25,610 --> 00:35:30,690
want hij ging zeker door middel van een heleboel dingen, een soort in een waas.

415
00:35:30,690 --> 00:35:32,980
Ik zou eigenlijk proberen te typen.

416
00:35:32,980 --> 00:35:35,120
Probeer het coderen van sommige spullen.

417
00:35:35,120 --> 00:35:40,530
Maak een bestand. Js. Typ de code zelf. Niet gewoon kopiëren en plakken.

418
00:35:40,530 --> 00:35:42,890
Niet alleen lopen CP.

419
00:35:42,890 --> 00:35:47,380
Probeer dat te doen alleen maar om soort flex je JavaScript spier.

420
00:35:47,380 --> 00:35:49,490
Zien wat de dingen zijn.

421
00:35:49,490 --> 00:35:58,830
Bijvoorbeeld, hier ben ik op zoek naar quote7.js in de broncode van woensdag's lezing.

422
00:35:58,830 --> 00:36:04,150
Proberen te gaan in en in plaats van alleen het maken van al deze functies anoniem,

423
00:36:04,150 --> 00:36:10,470
Kopieer deze code, letterlijk naar beneden naar dit succes code,

424
00:36:10,470 --> 00:36:17,270
Kopieer dit, plak het in een andere functie, en geef het een naam,

425
00:36:17,270 --> 00:36:22,370
en probeer dan het passeren van de naam in en zie wat er gebeurt.

426
00:36:22,370 --> 00:36:26,320
[Student] Kan dat in een apart bestand of in hetzelfde bestand?

427
00:36:26,320 --> 00:36:29,900
Het zou kunnen zijn in een apart bestand als je goed opnemen.

428
00:36:29,900 --> 00:36:34,170
Een ding dat gaat worden -

429
00:36:34,170 --> 00:36:42,770
De truc is werkt deze functie verwijzen naar een van de variabelen die buiten het?

430
00:36:42,770 --> 00:36:49,990
En ik denk dat het alleen betrekking heeft op respons.

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

432
00:36:56,360 --> 00:36:59,280
U kunt deze naam.

433
00:36:59,280 --> 00:37:03,150
U kunt trekken, kun je het een naam geven, en dan kun je de naam passeren hier.

434
00:37:03,150 --> 00:37:07,390
Dus ik zou geven dat een keer te proberen, kijken hoe dat werkt.

435
00:37:09,990 --> 00:37:13,530
>> Oke. Vragen? Vragen? Ik hou van vragen.

436
00:37:13,530 --> 00:37:16,460
Ik weet niet over jullie, maar ik vind ze.

437
00:37:19,120 --> 00:37:21,320
Hoe hebben jullie het gevoel hierover?

438
00:37:21,320 --> 00:37:26,910
Er is een soort van deze, "Oh, crap" sfeer in de kamer. [Studenten grinniken]

439
00:37:26,910 --> 00:37:32,030
Is dat een soort van hoe jullie je voelt? >> [Student] Ja. >> Ja? Ja, Daniel?

440
00:37:32,030 --> 00:37:35,270
>> [Student] Ik denk dat ik begrijp soort van de algemene concepten die je het over hebt,

441
00:37:35,270 --> 00:37:37,920
zoals de anonieme functies en al deze spullen,

442
00:37:37,920 --> 00:37:42,490
maar ik begrijp niet de helft van de syntaxis die daar op dit moment,

443
00:37:42,490 --> 00:37:46,510
zoals wat ul middelen, li, deze verschillende tags.

444
00:37:46,510 --> 00:37:51,840
Ik denk niet dat ik zou kunnen iets met JavaScript-code. >> Fair.

445
00:37:51,840 --> 00:37:59,960
Is dat een gemeenschappelijk gevoel, gemeenschappelijke gevoel, het klinkt als? Oke.

446
00:37:59,960 --> 00:38:03,370
[Student] Zullen we moeten? >> Zullen we moeten coderen?

447
00:38:03,370 --> 00:38:09,280
Je moet bereid zijn om zoiets te ontleden, zou ik zeggen.

448
00:38:09,280 --> 00:38:15,550
Ik ben niet degene die het schrijven van het examen,

449
00:38:15,550 --> 00:38:18,770
maar ik zou zeker zeggen dat als dat is een gemeenschappelijk gevoel,

450
00:38:18,770 --> 00:38:23,020
soort dat veel van deze syntax hier eruit ziet, "Wat is er aan de hand?"

451
00:38:23,020 --> 00:38:27,900
"Ik ben helemaal zwemmen," laten we dan praten over dat en dat bevestigen.

452
00:38:29,080 --> 00:38:30,520
Klinkt dat goed?

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

454
00:38:32,150 --> 00:38:36,550
>> Dus wat is hier aan de hand? Laten we deze lijn door lijn.

455
00:38:36,550 --> 00:38:38,300
Laten we proberen te gaan rond de kamer.

456
00:38:38,300 --> 00:38:41,440
Ik ga gewoon een beroep doen op mensen 1 voor 1, en geef me je beste gok.

457
00:38:41,440 --> 00:38:44,470
We zullen het snel te doen. Je hebt 5 seconden om te antwoorden.

458
00:38:44,470 --> 00:38:46,130
Als u niet antwoordt, gaan we naar de volgende persoon.

459
00:38:46,130 --> 00:38:48,460
En het is niet een groot probleem, want ik weet dat dit gekke dingen.

460
00:38:48,460 --> 00:38:52,520
We zullen hier opnieuw beginnen. Charlotte, wat doet deze lijn doen?

461
00:38:52,520 --> 00:38:54,450
[Student] Het is het creëren van een variabele genaamd suggesties

462
00:38:54,450 --> 00:38:57,890
en deze gelijk te stellen aan wat ul is. >> [Hardison] Juist.

463
00:38:57,890 --> 00:39:02,220
>> Jimmy, wat is ul?

464
00:39:02,220 --> 00:39:07,740
[Student] Ik weet het niet. >> [Hardison] Oke, cool. Charlotte was helemaal gelijk.

465
00:39:07,740 --> 00:39:11,680
Deze lijn van de code die ik hier heb gemarkeerd verklaart een variabele genaamd suggesties,

466
00:39:11,680 --> 00:39:13,710
een JavaScript-variabele.

467
00:39:13,710 --> 00:39:18,760
We hebben dit var zoekwoord voor die ervoor zorgt dat de variabele blijft lokale maakt kreeg

468
00:39:18,760 --> 00:39:21,140
om de omvang dat het in

469
00:39:21,140 --> 00:39:28,490
En dit ul ding dat we niet echt gezien hebben voor,

470
00:39:28,490 --> 00:39:34,290
laten we kijken of er een goede - Laat me terug naar mijn iPad te schakelen.

471
00:39:36,270 --> 00:39:37,860
Nieuwe pagina.

472
00:39:37,860 --> 00:39:40,700
Ik weet zeker dat jullie het ul eerder gezien.

473
00:39:40,700 --> 00:39:42,620
Het is een ongeordende lijst.

474
00:39:42,620 --> 00:39:45,590
Dus heb je ooit gezien op een webpagina waar je de kogels

475
00:39:45,590 --> 00:39:56,970
en je hebt Thing 1 Thing 2, en zo verder en zo voort?

476
00:39:56,970 --> 00:40:00,770
Dit is een ongeordende lijst.

477
00:40:00,770 --> 00:40:09,120
De manier waarop je dit in HTML zou code is je zou beginnen met een open-tag

478
00:40:09,120 --> 00:40:19,060
dat opent de ongeordende lijst, zou je te sluiten met een close-tag die de ongeordende lijst wordt gesloten,

479
00:40:19,060 --> 00:40:31,820
en vervolgens in het midden zou je naar de lijst items, li.

480
00:40:31,820 --> 00:40:43,110
En in de li's de tekst weer te geven zou zijn, dus Thing 1 en Thing 2.

481
00:40:43,110 --> 00:40:49,400
Dan zouden we onze lijst post-tags sluiten.

482
00:40:54,130 --> 00:41:01,110
Ongeordende lijsten zijn super vaak, want het is een geweldige manier om dezelfde styling krijgen

483
00:41:01,110 --> 00:41:03,720
toegepast op een rij van de dingen.

484
00:41:03,720 --> 00:41:08,170
Dus als je kijkt in, bijvoorbeeld, de PSET 7 code,

485
00:41:08,170 --> 00:41:12,710
een groot deel van de nav pillen, de navigatie-pillen die werden gebruikt voor de verschillende schakels

486
00:41:12,710 --> 00:41:18,740
te kopen, verkopen, Quote, Geschiedenis, dat alles, die zijn geïmplementeerd als ongeordende lijsten,

487
00:41:18,740 --> 00:41:23,160
en ze gebruikt CSS om deze bullet points te verwijderen

488
00:41:23,160 --> 00:41:27,530
en soort dingen veranderen rond een beetje.

489
00:41:27,530 --> 00:41:33,920
Dat is een beetje de kracht van de CSS is dat de HTML beschrijft de structuur.

490
00:41:33,920 --> 00:41:36,680
We hebben een lijst van lijstitems kreeg.

491
00:41:36,680 --> 00:41:41,360
Het is ongeordend. Er is geen eerste, tweede of derde. Het is gewoon een lijst.

492
00:41:41,360 --> 00:41:45,020
En dus standaard het zal tekenen met alleen kogels.

493
00:41:45,020 --> 00:41:50,270
Als we in plaats daarvan hadden ol geschreven, dus ik ga dit veranderen in een ol lijst

494
00:41:50,270 --> 00:41:53,870
in tegenstelling tot een ul, wat zou dat doen?

495
00:41:53,870 --> 00:42:01,840
Het zou te ontdoen van deze kogels, en de standaard zou in plaats daarvan een genummerde lijst worden

496
00:42:01,840 --> 00:42:04,020
want nu hebben we bestellen.

497
00:42:09,700 --> 00:42:14,840
De styling van de lijst is dan wat je spelen met CSS,

498
00:42:14,840 --> 00:42:21,620
en dat is waar de mensen die de Bootstrap bibliotheek schreef voor CSS speelde rond

499
00:42:21,620 --> 00:42:30,030
met de styling van een ongeordende lijst te krijgen om die mooie kleine nav pillen te geven.

500
00:42:30,030 --> 00:42:33,730
Als we kijken naar Google, bijvoorbeeld, laten we eens een kijkje nemen op deze man.

501
00:42:33,730 --> 00:42:38,450
Terug naar "hoe ik meter je moeder" - klinkt een beetje Duits.

502
00:42:38,450 --> 00:42:43,490
Ik hou van het Duits. Het klinkt zo leuk.

503
00:42:43,490 --> 00:42:47,040
Het spijt me als er sprake is van Duitse mensen kijken die beledigd voelen.

504
00:42:47,040 --> 00:42:51,550
Hoe dan ook, als we kijken naar deze links hier aan de top

505
00:42:51,550 --> 00:42:57,610
en we kijken naar wat er aan de hand daar, kunnen we het inspecteren met behulp van deze kerel.

506
00:42:57,610 --> 00:42:59,430
Ik ben weg hier beneden in de hoek.

507
00:42:59,430 --> 00:43:01,690
Ontwikkeltools op Chrome is geweldig.

508
00:43:01,690 --> 00:43:05,780
Als jullie beginnen te spelen met het of opzoeken tutorials voor het, het zal een grote hulp

509
00:43:05,780 --> 00:43:07,620
als je doet op het web gebaseerde projecten.

510
00:43:07,620 --> 00:43:10,720
Ik klik op mijn kleine inspecteur. Ik ga terug omhoog hier.

511
00:43:10,720 --> 00:43:15,680
Ik ga om te zien wat al deze jongens zijn.

512
00:43:15,680 --> 00:43:19,300
Ik vergroten ga ik om te klikken op deze.

513
00:43:19,300 --> 00:43:25,850
Dan kan ik weer uit te zoomen en te zien wat het eigenlijk is in de HTML manier hier beneden.

514
00:43:25,850 --> 00:43:30,050
Het lijkt erop dat Google het is genesteld in een geordende lijst.

515
00:43:30,050 --> 00:43:36,220
Dus we hebben deze overspanning die zegt + U, en dat is genest binnen een anker-tag,

516
00:43:36,220 --> 00:43:41,030
dus dat is wat maakt het aanklikbaar en het linkt het naar mijn Google+ pagina.

517
00:43:41,030 --> 00:43:47,130
Het is genest in een item in de lijst,

518
00:43:47,130 --> 00:43:49,670
en het is genest in deze geordende lijst.

519
00:43:49,670 --> 00:43:55,060
En als ik nu eigenlijk op het item in de lijst, zal het hoogtepunt voor mij daar.

520
00:43:55,060 --> 00:43:59,530
Als ik wijzen op de ongeordende lijst, zie je hoe gaat de focus op de top.

521
00:43:59,530 --> 00:44:03,460
Het verschuift en toont me de hele geordende lijst.

522
00:44:03,460 --> 00:44:08,380
Dus Google heeft zojuist rond gespeeld met de styling om deze lijsten te zien zijn als dat.

523
00:44:08,380 --> 00:44:15,510
Dat is genoeg plezier met lijsten. Terug naar de quiz of dit spul.

524
00:44:15,510 --> 00:44:19,260
Nu weten we wat een ongeordende lijst is - hopelijk.

525
00:44:19,260 --> 00:44:28,690
>> Laten we praten over deze volgende regel code for (var i in response.symbols). Ella.

526
00:44:28,690 --> 00:44:35,980
[Student] Ik heb geen idee. >> [Hardison] Geen idee.

527
00:44:35,980 --> 00:44:40,290
Oke. Je hebt gezien een lus voor, neem ik aan. >> [Student] Ja.

528
00:44:40,290 --> 00:44:43,930
[Hardison] Weet je nog doen voor elke in PHP? >> [Student] Ja.

529
00:44:43,930 --> 00:44:46,340
[Hardison] Dit is precies dat.

530
00:44:46,340 --> 00:44:51,210
Dit is een voor elke lus in JavaScript.

531
00:44:51,210 --> 00:45:00,860
Dit is een kortere weg dan het doen van de for (var i = 0; i <response.symbols.length; i + +),

532
00:45:00,860 --> 00:45:04,400
die we konden doen,

533
00:45:04,400 --> 00:45:08,620
maar dit is een meer beknopte manier van schrijven.

534
00:45:08,620 --> 00:45:17,530
Een ding voorzichtig in JavaScript te zijn is dat dit niet noodzakelijkerwijs de bestelling.

535
00:45:17,530 --> 00:45:23,030
Als response.symbols vermoedelijk een array,

536
00:45:23,030 --> 00:45:33,140
var i zal een index in deze array, maar het is niet noodzakelijk de 0 en de 1

537
00:45:33,140 --> 00:45:36,340
en vervolgens de 2 en dan de 3.

538
00:45:36,340 --> 00:45:47,360
Ze zeggen wel gebruik van de for (var i = 0) als u de zorg over het bestelproces.

539
00:45:47,360 --> 00:45:55,860
Ik denk dat de ander ding om op te merken is dat wanneer we een voor elke in PHP,

540
00:45:55,860 --> 00:46:03,470
we aangegeven de naam matrix eerst en dan hadden we het als trefwoord

541
00:46:03,470 --> 00:46:07,490
en dan gespecificeerd we de waarde die we wilden halen uit de array.

542
00:46:07,490 --> 00:46:12,680
Of we kunnen zowel de sleutel en de waarde die we wilden halen uit de array opgeeft.

543
00:46:12,680 --> 00:46:16,730
Hier zijn we net de index.

544
00:46:16,730 --> 00:46:22,090
We hebben het niet krijgen van de werkelijke element zelf.

545
00:46:22,090 --> 00:46:29,510
Zo zie je maar dat als we gaan hier zijn we eigenlijk het moeten de i-element te halen

546
00:46:29,510 --> 00:46:34,810
uit de response.symbols object.

547
00:46:37,680 --> 00:46:46,400
Het andere ding dat is gek op dit is kunt u dit gebruiken om de lus over objecten in JavaScript

548
00:46:46,400 --> 00:46:52,070
en ophalen van elk van de eigenschappen van dat object 1 op 1.

549
00:46:52,070 --> 00:46:57,950
Als we terug naar dat JavaScript Object Notation afbeelding van mijn familie

550
00:46:57,950 --> 00:47:03,280
waar het was letterlijk de accolades en vader, broer, moeder, dat alles,

551
00:47:03,280 --> 00:47:06,420
je zou kunnen gebruiken een lus over te herhalen dat ook

552
00:47:06,420 --> 00:47:10,130
en ophalen van de eigenschappen 1 voor 1.

553
00:47:10,130 --> 00:47:12,110
Soort van gek.

554
00:47:14,120 --> 00:47:18,200
Dus wat we doen, het eruit ziet, is dat we de opbouw van een HTML-tekenreeks

555
00:47:18,200 --> 00:47:22,220
net als deze reactie zegt: "bouwen html string voor een lijst met suggesties."

556
00:47:22,220 --> 00:47:26,340
We gaan om te beginnen met onze open-tag voor onze ongeordende lijst

557
00:47:26,340 --> 00:47:30,110
waarin we veronderstellen we gaan alle suggesties als lijst items op te slaan.

558
00:47:30,110 --> 00:47:36,490
Dan gaan we lus over alle symbolen in het antwoord

559
00:47:36,490 --> 00:47:39,230
want vergeet niet dit is een typeahead voor CS50 Financiën,

560
00:47:39,230 --> 00:47:44,180
dus we trekken uit de voorraad symbolen 1 voor 1.

561
00:47:44,180 --> 00:47:50,410
En dan zijn we toe te voegen aan onze suggesties touwtje wat?

562
00:47:50,410 --> 00:47:53,880
>> Jared, wat betekent dit eruit?

563
00:47:53,880 --> 00:48:00,140
[Student] Het lijkt alsof het grijpen van een soort database

564
00:48:00,140 --> 00:48:02,250
welke letter u typt,

565
00:48:02,250 --> 00:48:06,640
waardoor een soort suggestie welk woord - >> [Hardison] Ja.

566
00:48:06,640 --> 00:48:10,490
De Ajax-verzoek al eigenlijk niet gaan en pak die. Dit is ons antwoord.

567
00:48:10,490 --> 00:48:14,890
Dit is eigenlijk nadat we hebben gekregen van de reactie van de database, van de server.

568
00:48:14,890 --> 00:48:20,150
>> En dus wat is dit? Wat betekent dit enkele quote ding aan te duiden?

569
00:48:20,150 --> 00:48:23,990
[Student] De enkele quote? >> [Hardison] Ja. Het is gewoon een string, toch?

570
00:48:23,990 --> 00:48:26,930
En dus wat is dit crafting?

571
00:48:26,930 --> 00:48:31,080
Het is een string en we zetten spullen in de string. En wat is de string zoek als?

572
00:48:31,080 --> 00:48:35,140
[Student] Alleen al de suggestie dat We zijn - >> [Hardison] Ja, precies.

573
00:48:35,140 --> 00:48:43,050
Het is de suggestie genest in een anker-tag,

574
00:48:43,050 --> 00:48:49,570
en dat is ook verankerd in een lijst-item, zodat het zal gaan in de lijst.

575
00:48:49,570 --> 00:48:56,790
Letterlijk, alles wat we hier doen is dat we gewoon het opbouwen van een groot HTML string.

576
00:48:56,790 --> 00:49:02,570
We zijn net opbouw daarvan letterlijk als een string in het geheugen.

577
00:49:02,570 --> 00:49:04,740
We zijn niet iets bijzonders te doen.

578
00:49:04,740 --> 00:49:09,660
We zijn niet het creëren van nieuwe knooppunten in de DOM of iets dergelijks.

579
00:49:09,660 --> 00:49:15,030
We zijn letterlijk slechts het bouwen van een string als je uit te schrijven, bijvoorbeeld,

580
00:49:15,030 --> 00:49:21,220
op uw iPad zoals ik - in het geval jullie een iPad en als het schrijven van HTML op uw iPad -

581
00:49:21,220 --> 00:49:33,250
je bent gewoon het schrijven van een grote lange string die is net als ul, li, een ...

582
00:49:33,250 --> 00:49:38,440
en dan zijn we natuurlijk gaan om het te beëindigen met deze ul.

583
00:49:38,440 --> 00:49:41,410
Dus dat is alles wat we krijgen is 1 grote, massieve string.

584
00:49:43,750 --> 00:49:51,180
En binnen is er een li en een een voor elk van de symbolen die we hebben gevonden.

585
00:49:54,210 --> 00:50:01,760
>> En nu verder op, wat doet deze lijn doen, Stella, hier?

586
00:50:01,760 --> 00:50:06,670
Wat houdt deze lijn hier doen?

587
00:50:06,670 --> 00:50:11,560
[Onverstaanbaar student reactie]

588
00:50:11,560 --> 00:50:14,970
[Hardison] Ja. Het is gewoon het toevoegen van deze kerel.

589
00:50:14,970 --> 00:50:17,650
We zijn net eindigt onze lijst. Precies.

590
00:50:17,650 --> 00:50:25,430
>> En dan is deze laatste regel - en dit ziet er soort van goofy -

591
00:50:25,430 --> 00:50:30,230
Het spijt me. Ik weet niet je naam in de rode sweater. Weet je wat dit doet?

592
00:50:30,230 --> 00:50:33,270
Of ga je beslissen nee?

593
00:50:33,270 --> 00:50:38,560
En jij? >> [Student] Zij roept jQuery op, maar ik weet niet precies welke functie het is.

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

595
00:50:40,490 --> 00:50:42,870
Hoe zit het met iemand hier op aan de linkerkant van me?

596
00:50:42,870 --> 00:50:51,110
Weet je wat deze lijn doet? Wat lijkt het alsof het doet als je moest raden?

597
00:50:51,110 --> 00:50:57,620
[Student] indienen om de HTML van de lijst met suggesties, of is het -

598
00:50:57,620 --> 00:50:59,410
Yeah. Wat bedoel je door het indienen?

599
00:50:59,410 --> 00:51:04,370
[Student] Zeggen naar HTML wat we zojuist behandeld in JavaScript

600
00:51:04,370 --> 00:51:07,560
is nu zeker alleen HTML. >> [Hardison] Ja.

601
00:51:07,560 --> 00:51:10,600
Dat is een goede start.

602
00:51:10,600 --> 00:51:12,100
Laten we ontleden dit een beetje meer.

603
00:51:12,100 --> 00:51:14,140
Dat is precies wat dit deel hier doet.

604
00:51:14,140 --> 00:51:17,660
[Student] Welk aspect ervan maakt duidelijk dat het jQuery?

605
00:51:17,660 --> 00:51:20,380
[Hardison] jQuery is dit dollarteken vent.

606
00:51:20,380 --> 00:51:25,630
Wanneer je aan het schrijven bent jQuery, ziet u dit dollarteken all over the place.

607
00:51:25,630 --> 00:51:36,020
Dit is net als in jQuery soort speciaal symbool.

608
00:51:36,020 --> 00:51:38,280
Het doet een heleboel dingen.

609
00:51:38,280 --> 00:51:46,980
In het kader van dit hier, dit deel van de lijn, het is een selector.

610
00:51:46,980 --> 00:51:53,350
Het is de jQuery selector en wordt het selecteren van de HTML-element

611
00:51:53,350 --> 00:51:58,440
dat is de ID suggesties.

612
00:51:58,440 --> 00:52:01,730
Weet je nog hoe HTML-elementen die ID attribuut kan hebben

613
00:52:01,730 --> 00:52:06,920
waar u een paragraaf tag die ID suggesties heeft kan hebben?

614
00:52:06,920 --> 00:52:13,380
Dit jQuery selector zal grijpen dat element

615
00:52:13,380 --> 00:52:18,000
omdat element ergens in het geheugen bestaan.

616
00:52:18,000 --> 00:52:21,120
JavaScript staat is om soort van lokaliseren van dat element en zeggen:

617
00:52:21,120 --> 00:52:24,830
"Oh, oke, jij bent de paragraaf die deze ID heeft,"

618
00:52:24,830 --> 00:52:34,940
en dan dit. html zegt: "Oke, vervanging van de huidige HTML in je

619
00:52:34,940 --> 00:52:41,210
"Met deze nieuwe reeks, deze nieuwe HTML die ik je ga geven."

620
00:52:41,210 --> 00:52:49,950
Dus als we kijken terug over naar de iPad - ha, ha, herinnerde ik me deze keer schakelen -

621
00:52:49,950 --> 00:53:07,470
je vaak invoegen in dingen als divs, dus stel dat we hadden een div dat had id = "suggesties";

622
00:53:07,470 --> 00:53:13,080
We gaan naar de div-tag hier beneden te sluiten.

623
00:53:13,080 --> 00:53:21,500
Wanneer we de jQuery selector om het element in de DOM te grijpen

624
00:53:21,500 --> 00:53:29,270
dat heeft de ID van suggesties, het letterlijk kiest deze hele div hier,

625
00:53:29,270 --> 00:53:37,920
en dan zegt de HTML-methode, "al deze spullen Vervang recht hier

626
00:53:37,920 --> 00:53:41,840
"Midden in dat ul, dat ongeordende lijst die we net opgebouwd."

627
00:53:41,840 --> 00:53:47,170
Letterlijk, als je aan het bekijken was snaar de hele HTML-bestand in het geheugen,

628
00:53:47,170 --> 00:53:51,750
zou je gewoon zeggen: "Ga naar die plek en plof in die ul spul,"

629
00:53:51,750 --> 00:53:57,210
en dan update de pagina, zodat je er nu ziet de ongeordende lijst.

630
00:53:57,210 --> 00:54:04,510
Dus wat heeft dit effectief gedaan is dat het dynamisch bijgewerkt deze div.

631
00:54:04,510 --> 00:54:08,980
De code die we net zagen op de laptop heeft deze div bijgewerkt

632
00:54:08,980 --> 00:54:13,760
de nieuwe suggesties die ergens werden opgehaald van de server te houden.

633
00:54:13,760 --> 00:54:18,790
[Student] Welke suggesties vertegenwoordigt de nieuwe suggesties en de oude suggesties?

634
00:54:18,790 --> 00:54:21,070
De nieuwe suggesties en de oude suggesties.

635
00:54:21,070 --> 00:54:24,950
[Student] Wat vertegenwoordigt welke wordt vervangen en welke doet het vervangen?

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

637
00:54:26,400 --> 00:54:29,110
Zie hier, deze man is een string.

638
00:54:29,110 --> 00:54:34,580
Dit specificeert de ID van een element - we noemen het in de DOM -

639
00:54:34,580 --> 00:54:40,570
wat letterlijk betekent gewoon wat HTML-element dat ergens wordt weergegeven

640
00:54:40,570 --> 00:54:42,490
op de webpagina.

641
00:54:42,490 --> 00:54:47,830
Als we kijken naar dit, als we terug naar onze Google-pagina te gaan,

642
00:54:47,830 --> 00:54:53,460
zien we al deze divs en deze ol en deze li's en deze a's.

643
00:54:53,460 --> 00:55:00,020
Deze alle vormen de HTML-elementen die momenteel deel uitmaken van deze pagina.

644
00:55:00,020 --> 00:55:08,140
Deze allen correleren met afzonderlijke elementen op de pagina.

645
00:55:08,140 --> 00:55:13,650
En als we om dit te veranderen, zou je de DOM verandering kijken,

646
00:55:13,650 --> 00:55:16,220
en je kunt dit soort verschuiving zien.

647
00:55:16,220 --> 00:55:20,600
Dus als we waren te typen Harvard, zou je de DOM beginnen te veranderen

648
00:55:20,600 --> 00:55:24,970
en de lijst elementen, te beginnen hier in te veranderen.

649
00:55:24,970 --> 00:55:26,880
Dat is eigenlijk wat er gebeurt.

650
00:55:26,880 --> 00:55:35,020
>> Eens kijken of we een aantal van deze dingen kan vinden midden in hier.

651
00:55:35,020 --> 00:55:41,490
Laten we eens kijken naar deze link. Laten we eens kijken naar deze link Harvard Wikipedia, en we zullen kijken veranderen.

652
00:55:41,490 --> 00:55:48,160
We kunnen zien dat als ik dit heb gekozen, het komt overeen met deze div hier,

653
00:55:48,160 --> 00:55:52,680
die ook deel uitmaakt van een element in de lijst, die direct naast een ander element in de lijst,

654
00:55:52,680 --> 00:55:56,500
die deel uitmaakt van de ongeordende lijst hier.

655
00:55:56,500 --> 00:56:07,470
Nu, wat gebeurt er als we zoeken voor onze mindere school Zuid iets naar beneden?

656
00:56:07,470 --> 00:56:09,040
Het verandert nu.

657
00:56:09,040 --> 00:56:13,460
Dus verloren we onze greep op die div en die lijst element

658
00:56:13,460 --> 00:56:19,010
want nu hebben we verschillende elementen in ons DOM,

659
00:56:19,010 --> 00:56:24,280
andere lijst elementen, lijstitems, verschillende lengtes, dat allemaal.

660
00:56:24,280 --> 00:56:28,750
Dus dit HTML-document wordt dynamisch bijgewerkt.

661
00:56:28,750 --> 00:56:33,240
Oude elementen worden verwijderd, worden nieuwe elementen worden toegevoegd.

662
00:56:33,240 --> 00:56:42,600
Terug hier zijn we gewoon opgeven van dit element, die vermoedelijk stabiel zal zijn

663
00:56:42,600 --> 00:56:44,870
in onze typeahead update

664
00:56:44,870 --> 00:56:50,270
want anders als jQuery een element dat een ID van suggesties heeft niet kunt vinden,

665
00:56:50,270 --> 00:56:53,320
het zal gewoon crashen op dit punt.

666
00:56:53,320 --> 00:56:57,020
En dan zijn we het actualiseren van haar innerlijke HTML.

667
00:56:57,020 --> 00:57:03,970
Dus het is deze lijst items, deze anchor tags die voortdurend wordt bijgewerkt en verfrissen terwijl u typt.

668
00:57:10,440 --> 00:57:15,750
Is dat een betere baan? >> [Student] Dat helpt veel. >> [Hardison] Oke.

669
00:57:15,750 --> 00:57:24,210
De syntax dat je veel zult zien - weten wat deze man doet.

670
00:57:24,210 --> 00:57:27,810
Ken de jQuery selector.

671
00:57:27,810 --> 00:57:36,610
Dit jQuery selector met een hash tag voor impliceert een ID.

672
00:57:36,610 --> 00:57:42,410
Deze man zegt: "Geef me het element dat de ID suggesties heeft."

673
00:57:48,440 --> 00:57:56,480
Deze man hier beneden zegt ook: "Geef me dat hetzelfde element met ID suggesties."

674
00:57:56,480 --> 00:58:03,350
Deze man eronder is iets complexer.

675
00:58:03,350 --> 00:58:12,420
Deze zegt: "Geef me het element met ID vorm-citaat,

676
00:58:12,420 --> 00:58:21,180
"Maar dan naar binnen die vorm en vinden het kind" -

677
00:58:21,180 --> 00:58:25,710
dus deze ruimte hier houdt in dat we gaan naar een kind element, een genest element.

678
00:58:25,710 --> 00:58:33,550
"Zoek de vorm die deze ID heeft en dan vinden de ingang in die vorm wiens naam symbool."

679
00:58:38,410 --> 00:58:45,050
Dit is zeker in Tommy's slides, deze verschillende soorten jQuery selectors.

680
00:58:45,050 --> 00:58:50,490
Je moet weten wat voor soort elementen deze ophaalt.

681
00:58:51,970 --> 00:58:54,590
Bijvoorbeeld, laten we teruggaan naar de iPad echt snel.

682
00:58:58,450 --> 00:59:14,970
Als we een formulier element met id = "form-citaat" -

683
00:59:14,970 --> 00:59:21,110
natuurlijk dat ontbreekt de method = POST of method = GET en actie attributen alsmede

684
00:59:21,110 --> 00:59:37,010
die je moet hebben op formulieren, maar voor dit voorbeeld een formulier, zoals u weet, heeft ingangen

685
00:59:37,010 --> 00:59:51,860
en dat code die we net gezien zouden de ingang element krijgen

686
00:59:51,860 --> 00:59:57,580
dat had name = "symbool".

687
00:59:57,580 --> 01:00:02,970
Dit is belangrijk wanneer je probeert om verschillende gebieden binnenkant van uw formulier in te vullen.

688
01:00:02,970 --> 01:00:07,440
Dit is hoe automatisch vullen werkt.

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

690
01:00:09,500 --> 01:00:16,050
[Student] Wat is het verschil tussen een ID en een klasse? >> Een ID en een klasse? Yeah.

691
01:00:16,050 --> 01:00:21,970
Een klasse wordt gebruikt voor de styling doeleinden.

692
01:00:21,970 --> 01:00:29,120
Een ID wordt gebruikt voor wat het klinkt als: unieke identificatiecode voor een bepaald element.

693
01:00:29,120 --> 01:00:37,610
Dus binnen een HTML-pagina, kunt u slechts 1 element met een bepaalde ID.

694
01:00:40,370 --> 01:00:46,120
Er is maar 1 formulier met de ID-formulier offerte.

695
01:00:46,120 --> 01:00:56,940
Echter, de nav pillen klasse of nav klasse was waarschijnlijk iets dat je gebruikt

696
01:00:56,940 --> 01:01:01,380
mogelijk of zagen in de context van uw Probleemverzameling 7 code.

697
01:01:01,380 --> 01:01:11,340
Een klasse wordt gebruikt om een ​​bepaalde styling van toepassing op een aantal verschillende elementen.

698
01:01:11,340 --> 01:01:17,580
Bijvoorbeeld, in de oude dagen van HTML voordat er style sheets,

699
01:01:17,580 --> 01:01:21,440
voordat er CSS, deze Cascading Style Sheets,

700
01:01:21,440 --> 01:01:29,540
als je wilde een paragraaf centreren of centreren de tekst in een div,

701
01:01:29,540 --> 01:01:43,940
zou je een div te hebben en dan zou je iets als text-align = "center" hebben

702
01:01:43,940 --> 01:01:51,290
zoals als een attribuut in je div.

703
01:01:51,290 --> 01:01:54,490
Dit is niet goed.

704
01:01:54,490 --> 01:01:57,890
De reden dat mensen dit niet willen is omdat dan wanneer je wilde updaten

705
01:01:57,890 --> 01:02:01,960
hoe alles weergegeven op uw website, moest je letterlijk gaan in elke pagina

706
01:02:01,960 --> 01:02:06,230
en elke HTML-bestand en ga veranderen de hele stylings op alle verschillende elementen,

707
01:02:06,230 --> 01:02:10,420
en het was een enorme pijn want vaak je wilde een bos van divs hebben

708
01:02:10,420 --> 01:02:15,090
dat alle centrum werden uitgelijnd of passen op een bepaalde manier.

709
01:02:15,090 --> 01:02:18,760
Dus de oplossing voor dat was de klas.

710
01:02:18,760 --> 01:02:28,120
Nu hebben we een div waar we de klasse gespecificeerd worden wat je het ook wilt noemen.

711
01:02:28,120 --> 01:02:39,160
Je zou kunnen noemen het "midden", en sluit je div ergens hier beneden

712
01:02:39,160 --> 01:02:42,390
en heb je al je leuke dingen daar.

713
01:02:42,390 --> 01:02:47,650
En dan ergens in je stylesheet zou je een bepaalde styling opgeven

714
01:02:47,650 --> 01:02:51,980
dat zou gelden voor deze klasse.

715
01:02:51,980 --> 01:02:57,280
Dit had niet de enige div dat gecentreerd was zijn.

716
01:02:57,280 --> 01:03:02,240
Je zou kunnen hebben andere divs die ook tekst had gecentreerd.

717
01:03:06,580 --> 01:03:09,980
>> Ja, Charlotte? >> [Student] Terug te gaan naar de offerte, wat doet de stip betekenen?

718
01:03:09,980 --> 01:03:13,120
Wat is het punt? >> [Student] Ja.

719
01:03:14,000 --> 01:03:17,900
Terug naar de laptop, bedoel je? >> [Student] Ja. >> Oke.

720
01:03:17,900 --> 01:03:23,920
[Student] Bijvoorbeeld, in deze lijn betekent dat dan dat er deze variabele genaamd val

721
01:03:23,920 --> 01:03:27,730
binnenkant van het formulier? >> Ja.

722
01:03:27,730 --> 01:03:34,690
De dot notatie in JavaScript doet een paar dingen.

723
01:03:34,690 --> 01:03:43,530
In dit geval u belt een functie waarvan de naam val.

724
01:03:43,530 --> 01:03:45,960
Het is een methode.

725
01:03:45,960 --> 01:03:50,150
Dit is waar we in de objectgeoriënteerde spul dat we het over hadden, Sam.

726
01:03:50,150 --> 01:04:00,840
Hier object - in dit geval het ingangselement - een functie of een methode genaamd val

727
01:04:00,840 --> 01:04:10,480
die in feite zegt: "He, zet je de waarde van deze zaak."

728
01:04:15,120 --> 01:04:19,050
Stel je voor dat in plaats van deze gobbledygook hadden we het nummer 7 of de snaar 7 geschreven.

729
01:04:19,050 --> 01:04:23,820
Dat zou de waarde van deze input element te veranderen 7.

730
01:04:23,820 --> 01:04:26,030
[Student] De input element dat alles voor de dot?

731
01:04:26,030 --> 01:04:29,190
[Hardison] De input element, precies, dat het element in de HTML,

732
01:04:29,190 --> 01:04:33,230
binnen de DOM, die overeenkomt met deze query.

733
01:04:33,230 --> 01:04:37,150
[Student] Dus het is ingangselement. Functie en vervolgens wat die waarde zou moeten zijn.

734
01:04:37,150 --> 01:04:39,360
[Hardison] Precies. >> [Student] Oke.

735
01:04:39,360 --> 01:04:42,780
En u ook dit gebruiken om toegang eigenschappen.

736
01:04:42,780 --> 01:04:47,690
Dus als we kijken terug naar de code die we via lijn per lijn te lopen

737
01:04:47,690 --> 01:04:54,830
waar we response.symbols [i]. naam,

738
01:04:54,830 --> 01:04:58,600
we zijn niet een functie roepen hier.

739
01:04:58,600 --> 01:05:02,270
Er zijn geen haakjes.

740
01:05:02,270 --> 01:05:05,220
Een ding moet je gewoon in gedachten te houden als je scheuren door deze code,

741
01:05:05,220 --> 01:05:09,860
als je ziet haakjes, dat betekent functie-aanroep.

742
01:05:09,860 --> 01:05:12,340
Een functie wordt opgeroepen,

743
01:05:12,340 --> 01:05:15,910
en de naam van die functie is wat die haakjes voorafgaat.

744
01:05:15,910 --> 01:05:21,480
Dus in dit geval beneden, het is val. In dit geval hier is het html.

745
01:05:21,480 --> 01:05:31,700
In dit geval hier de naam van de functie letterlijk $,

746
01:05:31,700 --> 01:05:35,170
en we weten alleen dat dit de jQuery selector,

747
01:05:35,170 --> 01:05:40,090
het is de functie die is het selecteren van wat deze man is.

748
01:05:40,090 --> 01:05:47,030
En dan als je niet tussen haakjes te zien, zoals hier of hier,

749
01:05:47,030 --> 01:05:51,690
wat je in plaats daarvan toegang is een eigenschap van het object.

750
01:05:51,690 --> 01:05:53,910
Dit is net als het gebruik van de array notatie.

751
01:05:53,910 --> 01:05:59,280
Het is een alternatief voor de matrix notatie.

752
01:05:59,280 --> 01:06:02,440
Het is gewoon een afkorting.

753
01:06:06,680 --> 01:06:17,050
Dus we toegang tot het gebied symbolen van de response object.

754
01:06:21,590 --> 01:06:29,160
>> We hebben veel over Ajax, DOM, wat HTML, CSS niet veel gedaan.

755
01:06:29,160 --> 01:06:34,370
Willen jullie de laatste 15 minuten of zo te besteden aan deze?

756
01:06:34,370 --> 01:06:37,990
Ik denk dat we moet echt ongeveer 10 minuten voordat we moeten beginnen met inpakken.

757
01:06:37,990 --> 01:06:44,190
Of moeten we terug gaan en praten over een aantal van de andere dingen op onze lijst?

758
01:06:44,190 --> 01:06:46,800
Laten we eens kijken.

759
01:06:46,800 --> 01:06:52,180
Als we terug gaan naar het begin, dan schakelen we over naar mijn iPad weer zo kunnen jullie dit zien,

760
01:06:52,180 --> 01:06:57,840
we hebben veel van Ajax gedaan, hebben we een aantal jQuery gedaan,

761
01:06:57,840 --> 01:07:00,980
we hebben wat JSON gedaan, hebben we een aantal XML gedaan, hebben we een aantal DOM gedaan,

762
01:07:00,980 --> 01:07:05,510
we hebben gedaan wat - nope, niet HTTP. Schrap dat.

763
01:07:05,510 --> 01:07:10,640
Niet veel ruimte. We soort gesproken over CSS - niet echt.

764
01:07:13,200 --> 01:07:16,540
Hebben jullie een goed gevoel over Ajax? Wilt u meer tijd besteden aan Ajax?

765
01:07:16,540 --> 01:07:19,190
Handopsteken. Oke.

766
01:07:19,190 --> 01:07:22,260
DOM? Iedereen wil meer tijd besteden aan DOM?

767
01:07:22,260 --> 01:07:26,960
De gemakkelijkste manier om echt een gevoel voor wat er aan de hand met de DOM -

768
01:07:26,960 --> 01:07:34,510
mensen praten over de DOM en gooi rond, "Oh, de DOM dit, de DOM dat."

769
01:07:34,510 --> 01:07:45,910
Echt de DOM is gewoon de manier waarop al deze HTML-elementen worden in het geheugen.

770
01:07:45,910 --> 01:07:49,310
en het is gewoon uit te leggen - dat is wat het is.

771
01:07:49,310 --> 01:07:55,700
Het is gestructureerd als een boom, en kunt u afzonderlijke HTML-elementen toegang

772
01:07:55,700 --> 01:07:58,850
met dat jQuery selector, dat dollarteken dingetje.

773
01:07:58,850 --> 01:08:02,730
Je kunt dingen manipuleren. U kunt elementen toevoegen aan de DOM.

774
01:08:02,730 --> 01:08:04,920
U kunt een nieuwe paragraaf element toe te voegen aan de DOM,

775
01:08:04,920 --> 01:08:09,280
je weg kan nemen een div element uit de DOM als je wilt.

776
01:08:09,280 --> 01:08:15,640
Dat is alles wat het is. Het is gewoon een soort van de in het geheugen weergave van uw HTML-bestand.

777
01:08:15,640 --> 01:08:19,430
Het kan worden gemanipuleerd en doorlopen.

778
01:08:19,430 --> 01:08:23,240
Hoe zit het met jQuery en dat selector? Ja, Sam?

779
01:08:23,240 --> 01:08:28,240
>> [Student] Betekent dit dat de DOM omvat al uw CSS en JavaScript?

780
01:08:28,240 --> 01:08:32,729
[Hardison] De DOM omvat die knopen, ja.

781
01:08:32,729 --> 01:08:38,270
[Student] Het omvat de HTML dat die andere ondersteunende documenten output?

782
01:08:38,270 --> 01:08:47,250
Als JavaScript wijzigt de HTML als het deed in deze Google -

783
01:08:47,250 --> 01:08:50,160
oeps, sorry, ik ga niet terug op dat.

784
01:08:50,160 --> 01:08:55,420
Weet je nog hoe JavaScript de lijst van Google-resultaten zou wijzigen?

785
01:08:55,420 --> 01:09:04,279
Als JavaScript wijzigt dat, dan zijn die nieuwe lijst elementen zijn nu onderdeel van de DOM.

786
01:09:04,279 --> 01:09:06,990
Zij werden geïnjecteerd in de DOM.

787
01:09:06,990 --> 01:09:10,109
En het blijkt dat de scripts en de stylesheets zelf

788
01:09:10,109 --> 01:09:11,830
zijn inderdaad onderdeel van de DOM.

789
01:09:11,830 --> 01:09:17,819
Je ziet hier beneden dat we deze script knooppunten en deze stijl knooppunten hebt.

790
01:09:17,819 --> 01:09:21,800
JavaScript kan toevoegen en verwijderen deze ook.

791
01:09:21,800 --> 01:09:25,550
Dit is waarom het zo slecht om kwaadaardige JavaScript op uw pagina

792
01:09:25,550 --> 01:09:30,500
is dat het nu kan beginnen met het binnenhalen andere webbrowser van andere plaatsen.

793
01:09:30,500 --> 01:09:34,080
Zodat u kunt beginnen met slechts 1 JavaScript-bestand,

794
01:09:34,080 --> 01:09:37,189
maar dan kan het beginnen te trekken in andere JavaScript-bestanden.

795
01:09:37,189 --> 01:09:42,330
U kunt Ajax gebruiken om te laden in JavaScript en dynamisch hebben nieuwe JavaScript

796
01:09:42,330 --> 01:09:45,029
die op uw webpagina.

797
01:09:45,029 --> 01:09:50,680
Dus het is een echt krachtig ding dat onze browsers kunnen soort van steeds opnieuw maken

798
01:09:50,680 --> 01:09:56,280
en opnieuw aanpassen welke wordt gegenereerd door JavaScript.

799
01:09:58,740 --> 01:10:01,450
>> [Student] Die stijl tags worden opgenomen in CSS?

800
01:10:01,450 --> 01:10:04,100
Laten we eens kijken. Yeah.

801
01:10:04,100 --> 01:10:08,480
Deze CSS, weer kunt u zien waar jQuery kreeg zijn selector uit.

802
01:10:08,480 --> 01:10:18,760
We hebben dit # gb die zegt: "Dit styling geldt voor een element met ID gb."

803
01:10:18,760 --> 01:10:24,330
"Een element met ID gb gaat dit lettergrootte hebben met dit lettertype familie,

804
01:10:24,330 --> 01:10:28,150
"Sans-serif; hoogte."

805
01:10:32,340 --> 01:10:33,650
>> Oke.

806
01:10:33,650 --> 01:10:36,010
Terug naar de iPad.

807
01:10:37,330 --> 01:10:40,550
Hoe zit datastructuren - pogingen, gelinkte lijsten?

808
01:10:40,550 --> 01:10:44,700
Willen jullie een snelle opfriscursus op dat te doen, of zijn jullie voelen -

809
01:10:44,700 --> 01:10:48,940
Yea? Nay? Wie wil datastructuren? Steek je hand op.

810
01:10:48,940 --> 01:10:52,780
Die een hekel datastructuren? >> [Student] Ik wil alleen probeert. >> Je wilt alleen probeert.

811
01:10:52,780 --> 01:10:55,120
Oke.

812
01:10:55,120 --> 01:11:00,600
Is er iemand die niet probeert willen? Wordt iedereen als: "Ik haat probeert. Ik deed het. Probeerde ik het."

813
01:11:00,600 --> 01:11:02,930
[Student] Ik wil gewoon weten over de omega en grote O.

814
01:11:02,930 --> 01:11:05,600
Oke. We kunnen zeker gaan over dat.

815
01:11:05,600 --> 01:11:11,290
Klinkt dat als iets dat we willen doen als een groep? Ja? Zoiets? Nee?

816
01:11:11,290 --> 01:11:18,090
>> Hoe zit het HTTP? Betekent dat lijkt misschien iets meer mensen willen doen?

817
01:11:18,090 --> 01:11:22,300
Of ben je soort, "Eh." Laten we eerst HTTP doen.

818
01:11:24,850 --> 01:11:32,010
Hoeveel van jullie hebben Davids belachelijk geweldig HTTP kort gezien? Iemand?

819
01:11:32,010 --> 01:11:33,950
Ik heb het een hele hoop gezien.

820
01:11:33,950 --> 01:11:37,890
Het was een van de eersten die wij deden, en dus het was alsof we onze demo deze zomer.

821
01:11:37,890 --> 01:11:40,750
Dan heeft het gezien een bos ook, Dan the Man terug.

822
01:11:43,150 --> 01:11:50,820
HTTP en dan is er dit HTTPS ding dat we hebben het over een beetje.

823
01:11:50,820 --> 01:11:53,020
Wat heb je nodig om te weten over HTTP?

824
01:11:53,020 --> 01:12:00,220
Het is letterlijk het protocol voor interactie met een webserver.

825
01:12:00,220 --> 01:12:09,860
Wanneer u wilt Google.com praten, je praat met een andere computer via een netwerk,

826
01:12:09,860 --> 01:12:13,670
wat doe je dan?

827
01:12:13,670 --> 01:12:16,160
Laten we dit misschien doen.

828
01:12:16,160 --> 01:12:19,420
Laat ik trek een terminal.

829
01:12:19,420 --> 01:12:21,820
Hier is mijn kleine terminal venster.

830
01:12:21,820 --> 01:12:31,470
We kunnen iets als telnet, die ons in staat stelt om daadwerkelijk te starten een verbinding naar Google.com doen.

831
01:12:31,470 --> 01:12:33,480
Dit is niet iets wat je moet weten,

832
01:12:33,480 --> 01:12:35,830
maar het is gewoon om te illustreren wat er gebeurt met de HTTP.

833
01:12:35,830 --> 01:12:42,360
www.google.com, poort 80.

834
01:12:42,360 --> 01:12:44,860
Wat is dit?

835
01:12:44,860 --> 01:12:49,800
Het is het maken van een internetverbinding tussen mijn computer en Google.

836
01:12:49,800 --> 01:12:56,080
En het is eigenlijk te sluiten op 173.194.75.99, dat is wat de computer,

837
01:12:56,080 --> 01:13:02,790
sommige Google-server ergens wonen waarschijnlijk uit hier,

838
01:13:02,790 --> 01:13:05,600
hoewel het helemaal terug in Californië zou kunnen zijn.

839
01:13:05,600 --> 01:13:08,320
Nu ben ik aangesloten.

840
01:13:08,320 --> 01:13:10,810
Oke, dat is allemaal goed.

841
01:13:10,810 --> 01:13:15,260
Maar als je naar Google.com, meestal verwacht je Google.com,

842
01:13:15,260 --> 01:13:19,380
sommige HTML te laten zien, toch? Niet alleen dit.

843
01:13:19,380 --> 01:13:27,740
Het probleem is dat ik wil zeggen, "GEEF ME GOOGLE.COM" of wat dan ook.

844
01:13:27,740 --> 01:13:34,320
Maar als ik dat zeg, gebeurt er niets.

845
01:13:34,320 --> 01:13:39,210
In feite, als ik druk op Enter een paar keer, het komt terug en het zegt,

846
01:13:39,210 --> 01:13:42,930
"Dat was een slechte vraag."

847
01:13:42,930 --> 01:13:46,270
Deze zei: "Nee, nee, nee, nee, nee, nee, nee, nee, nee."

848
01:13:46,270 --> 01:13:51,850
"Je kunt niet zomaar spullen inch Je moet eigenlijk HTTP spreken voor mij."

849
01:13:51,850 --> 01:13:56,350
"U moet uw verzoek opmaken als een HTTP-verzoek, als een GET of POST

850
01:13:56,350 --> 01:13:58,180
"Of iets dergelijks."

851
01:13:58,180 --> 01:14:02,040
"En dan zal ik de juiste HTML om u terug te keren."

852
01:14:02,040 --> 01:14:04,070
Zo zie je maar wat het gaf me in dit geval.

853
01:14:04,070 --> 01:14:24,170
Het gaf me HTML dat als ik kopieer het en ik Teksteditor html, als ik het in hier,

854
01:14:24,170 --> 01:14:33,040
en ik sla het op als test.html-oh, kom op.

855
01:14:33,040 --> 01:14:36,010
Webpagina. Daar gaan we.

856
01:14:36,010 --> 01:14:46,310
Nu als ik open Downloads / test.html, nu het gaf me de slechte -

857
01:14:46,310 --> 01:14:51,640
Het niet helemaal maken het als HTML.

858
01:14:51,640 --> 01:14:54,890
Het lijkt erop dat het niet sluiten. Hier, laten we eens kijken.

859
01:15:00,610 --> 01:15:02,900
Nope. Oke.

860
01:15:02,900 --> 01:15:07,330
Het gaat niet te maken. Hoe dan ook, niet van plan om dat uit.

861
01:15:07,330 --> 01:15:10,080
Maar goed, wat het doet is het is terug te keren naar me de HTML,

862
01:15:10,080 --> 01:15:15,800
maar het zegt in wezen: "Je gaf me een goede HTTP-verzoek."

863
01:15:15,800 --> 01:15:20,810
Dus wat hebben we nodig om te weten over HTTP?

864
01:15:20,810 --> 01:15:27,620
Het is de manier van opmaak verzoeken om webservers te komen, meestal, HTML in reactie.

865
01:15:27,620 --> 01:15:37,050
>> Het andere ding om op te merken is dat wanneer u een verzoek om een ​​webserver te maken,

866
01:15:37,050 --> 01:15:45,650
moet u de HTTP-methode die u wilt gebruiken.

867
01:15:45,650 --> 01:15:48,730
We spraken over dit een beetje eerder, waar de 2 groten die we zien

868
01:15:48,730 --> 01:15:52,170
zijn GET en POST.

869
01:15:52,170 --> 01:15:53,710
Er zijn ook een hele hoop andere.

870
01:15:53,710 --> 01:15:58,420
Er is HEAD en PUT en DELETE en al die andere dingen,

871
01:15:58,420 --> 01:16:00,410
maar GET en POST zijn de 2 belangrijkste.

872
01:16:00,410 --> 01:16:04,110
Waar zie je die opduiken? Als je schrijft vormen.

873
01:16:04,110 --> 01:16:08,000
Als je het schrijven van HTML formulieren, moet u de HTTP-methode te specificeren

874
01:16:08,000 --> 01:16:11,270
waarop u wilt dat formulier te verzenden data.

875
01:16:11,270 --> 01:16:15,000
En dan zie je op de server kant als je het schrijven van PHP-code

876
01:16:15,000 --> 01:16:19,850
wanneer u omgaan met de gegevens en moet je kijken in de POST superglobal

877
01:16:19,850 --> 01:16:24,860
of de GET superglobal om de gegevens die werd ingediend door de gebruiker op te halen.

878
01:16:24,860 --> 01:16:32,900
En het verschil tussen GET en POST is dat GET wijzigt de werkelijke URL

879
01:16:32,900 --> 01:16:40,890
en voor het grootste deel kun je zien welke parameters werden doorgegeven aan een GET-aanvraag

880
01:16:40,890 --> 01:16:45,580
heel gemakkelijk gewoon door te kijken in de URL, terwijl bij een POST-aanvraag

881
01:16:45,580 --> 01:16:52,880
u niet doorsturen van de parameters van het verzoek in de URL.

882
01:16:52,880 --> 01:16:58,610
Maar ze zijn niet gecodeerd of iets tenzij je gaat via HTTPS.

883
01:16:58,610 --> 01:17:02,130
De POST-parameters zijn slechts een deel van het -

884
01:17:02,130 --> 01:17:05,750
Ze gaan niet in de URL, effectief.

885
01:17:05,750 --> 01:17:10,320
We hebben de neiging om gewoon een soort van semantisch scheiden van de 2,

886
01:17:10,320 --> 01:17:15,270
die net zegt dat echt, kun je hetzelfde doen met GET die je kunt met POST.

887
01:17:15,270 --> 01:17:20,200
U kunt hetzelfde doen. Het is gewoon dat we ze gebruiken in verschillende situaties.

888
01:17:20,200 --> 01:17:23,330
We maken gebruik van GET als we proberen om gewoon iets te lezen en we gewoon zeggen,

889
01:17:23,330 --> 01:17:24,900
"Geef mij deze gegevens."

890
01:17:24,900 --> 01:17:28,670
En we gebruiken POST meestal wanneer we proberen om iets op de server.

891
01:17:28,670 --> 01:17:31,900
Dat is waarom wanneer u naar Google.com en we deden dat typeahead

892
01:17:31,900 --> 01:17:33,470
we zagen al die GET-aanvragen

893
01:17:33,470 --> 01:17:36,960
omdat we letterlijk alleen informatie ophalen van Google,

894
01:17:36,960 --> 01:17:43,710
terwijl als je een Facebook-wall post te maken, je gaat gebruiken,

895
01:17:43,710 --> 01:17:51,990
het meest waarschijnlijk, een HTTP POST methode om die gegevens te verzenden en een verandering naar Facebook

896
01:17:51,990 --> 01:17:56,220
in de muur, de muur van uw vriend.

897
01:17:56,220 --> 01:17:58,510
Laten we eens kijken.

898
01:18:00,360 --> 01:18:10,030
Ik denk dat het verschil met HTTPS is dat het HTTP, maar versleuteld.

899
01:18:10,030 --> 01:18:12,960
[Grinnikt] Secure.

900
01:18:12,960 --> 01:18:16,820
Yeah. En er zijn een heleboel leuke details daarover.

901
01:18:18,560 --> 01:18:21,100
>> Vragen?

902
01:18:21,100 --> 01:18:28,030
We moeten beginnen met inpakken, en dus zullen we een aantal data structuren te doen aan de zijkant. Charlotte?

903
01:18:28,030 --> 01:18:32,270
[Student] Wat is inbegrepen in de HTTP-header-bestanden van de host naar de methode

904
01:18:32,270 --> 01:18:35,480
en de methode en het nummer? >> Ah.

905
01:18:35,480 --> 01:18:40,060
De beste manier om ernaar te kijken is om naar het tabblad Netwerk

906
01:18:40,060 --> 01:18:48,320
 en gewoon zien wat er gebeurt als je gewoon naar Google.com.

907
01:18:48,320 --> 01:18:55,300
U kunt hier beneden komen en je kunt alle van de verschillende HTTP-verzoeken die werden gemaakt zien.

908
01:18:55,300 --> 01:18:58,000
Google.com.

909
01:18:58,000 --> 01:19:02,690
De eerste was ik probeerde om naar Google.com en het zei,

910
01:19:02,690 --> 01:19:05,270
"Oh, Google.com bestaat niet echt."

911
01:19:05,270 --> 01:19:08,700
"Waar je echt wilt om te gaan is naar www.google.com."

912
01:19:08,700 --> 01:19:10,010
Dus ik ben hier omgeleid.

913
01:19:10,010 --> 01:19:13,020
Dat is waar ik heb deze 301 toen kreeg ik de 200 OK.

914
01:19:13,020 --> 01:19:17,240
Dus wat is hier, in je headers?

915
01:19:17,240 --> 01:19:21,840
Het zegt dit is de URL waarop ik het verzoek, de aanvraag methode,

916
01:19:21,840 --> 01:19:24,550
en vervolgens de status code.

917
01:19:24,550 --> 01:19:26,070
Dat zijn de 3 kanjers.

918
01:19:26,070 --> 01:19:30,190
De andere dingen hier, koekjes,

919
01:19:30,190 --> 01:19:37,130
cookies zijn handig voor het uitzoeken van de sessie, als iemand is ingelogd of niet.

920
01:19:37,130 --> 01:19:42,010
Ze zijn ook handig voor het bijhouden van mensen. Dit is hoe websites track die u all over the place.

921
01:19:42,010 --> 01:19:44,620
Ze zetten cookies op uw computer.

922
01:19:44,620 --> 01:19:48,320
Ze zijn opgeleid om cookies andere websites 'als ze kunnen herkennen.

923
01:19:48,320 --> 01:19:52,640
En dan is er nog die andere dingen die de user agent zegt hier.

924
01:19:52,640 --> 01:19:57,490
Deze user agent string identificeert mijn computer naar Google.com en zegt:

925
01:19:57,490 --> 01:20:03,010
"Google.com, zodat je het weet, een gozer loopt deze browser

926
01:20:03,010 --> 01:20:08,050
"Op Intel Mac 10_8_2 ging gewoon naar Google.com."

927
01:20:08,050 --> 01:20:12,560
En dan zijn deze Accepteer dingen gewoon zeggen: "Wat is mijn computer,

928
01:20:12,560 --> 01:20:14,590
"Wat is mijn webbrowser bereid te accepteren?"

929
01:20:14,590 --> 01:20:20,900
Het kan HTML aanvaarden, kan het XML accepteren, al die andere dingen.

930
01:20:20,900 --> 01:20:24,310
Welke tekencoderingen aanvaardt zij?

931
01:20:24,310 --> 01:20:30,030
Is het accepteren gzip gecomprimeerd spullen?

932
01:20:30,030 --> 01:20:36,120
Soms websites zullen dingen comprimeren om het sneller te sturen over het netwerk te maken.

933
01:20:36,120 --> 01:20:38,580
>> Cool. Oke.

934
01:20:38,580 --> 01:20:44,460
Ik denk dat is het voor nu. We zullen sluiten, maar ik zal voor de vragen blijven.

935
01:20:44,460 --> 01:20:47,000
>> [CS50.TV]