1
00:00:00,000 --> 00:00:02,850
>> [9 § - vähemmän mukavaksi]

2
00:00:02,850 --> 00:00:04,920
[Nate Hardison - Harvardin yliopisto]

3
00:00:04,920 --> 00:00:07,230
[Tämä on CS50. - CS50.TV]

4
00:00:07,230 --> 00:00:11,140
>> Selvä. Niin, viimeinen osa lukukauden.

5
00:00:11,140 --> 00:00:18,380
Aloittaa, tiedän, että on ollut joitakin huudot tehdä joitakin Ajax,

6
00:00:18,380 --> 00:00:21,860
mutta onko olemassa muita aiheita, että meidän pitäisi tehdä ensin?

7
00:00:21,860 --> 00:00:24,960
Saanen siirtyä iPad niin, että meillä on -

8
00:00:24,960 --> 00:00:29,160
Anna minun käyttää mustaa sijasta oranssi.

9
00:00:29,160 --> 00:00:35,730
Ajax on ruokalistalla. Muita?

10
00:00:35,730 --> 00:00:40,670
Muita aiheita, että ihmiset haluavat nähdä? Kuulin DOM liian aikaisemmin.

11
00:00:40,670 --> 00:00:45,130
[Opiskelija] jQuery. >> JQuery. Okei.

12
00:00:45,130 --> 00:00:49,190
jQuery. Voimme tehdä puukottaa sekin.

13
00:00:49,190 --> 00:00:58,190
[Opiskelija] XML. >> XML. >> [Opiskelija] JSON. >> XML, JSON. Okei.

14
00:00:58,190 --> 00:01:06,390
PHP? Kaikki hyvin? C? Kaikki hyvin? >> [Opiskelija] Ei haittaisi puhua PHP.

15
00:01:06,390 --> 00:01:10,890
Hash taulukoita? Yrittää? Liittyy lista?

16
00:01:10,890 --> 00:01:16,970
[Opiskelija] Voi, on tietokilpailu viime vuonna, on pöytä omega ja iso O.

17
00:01:16,970 --> 00:01:21,360
Joo. >> [Opiskelija] on aika erilaisia ​​versioita ja illuusioita.

18
00:01:21,360 --> 00:01:25,140
Voimmeko puhua siitä? >> Joo. Me puhumme hieman tietorakenteita.

19
00:01:25,140 --> 00:01:33,640
[Opiskelija] Joo. >> [Opiskelija] Yrittää. >> [Hardison] Tietorakenteet.

20
00:01:33,640 --> 00:01:37,230
Me puhumme joitakin yrittää varmasti.

21
00:01:37,230 --> 00:01:42,530
[Opiskelija] Voimmeko CSS vähän? >> Joo, me voimme tehdä vähän CSS.

22
00:01:45,280 --> 00:01:49,290
Muita aiheita? Sam? >> [Opiskelija] Scope PHP. >> [Hardison] Scope.

23
00:01:52,540 --> 00:01:56,760
Laajuus PHP. >> [Opiskelija] HTTP.

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

25
00:02:09,729 --> 00:02:14,380
Oletan yksi tapa tehdä tämä olisi järjestää kaiken sellaista kronologisesti

26
00:02:14,380 --> 00:02:17,930
ja aloittaa tietorakenteiden koska nämä olivat pian.

27
00:02:17,930 --> 00:02:23,480
Tai voimme antaa nämä jonkinlainen etusija painotus ja mennä sieltä.

28
00:02:23,480 --> 00:02:25,860
Niin mitä te olette mieltä?

29
00:02:25,860 --> 00:02:27,820
Onko jotain, että kaikki on kuolemassa nähdä?

30
00:02:27,820 --> 00:02:31,200
Tehdään nostaa käsiä. Entä Ajax?

31
00:02:31,200 --> 00:02:33,320
Kuinka moni teistä kaverit haluavat tietää Ajax?

32
00:02:33,320 --> 00:02:37,870
Kuinka moni teistä ovat kuin, "Man, Ajax, sain sinut"? Kukaan. Selvä.

33
00:02:37,870 --> 00:02:40,900
Joten Ajax on melko korkea. Katsotaanpa tähden, että kaveri.

34
00:02:40,900 --> 00:02:46,650
Entä DOM? Jokainen valmis rokkaamaan DOM? Ei? Okei. Me tähden, että yksi liikaa.

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

36
00:02:50,330 --> 00:02:52,780
Queryless. Kyllä. Okei.

37
00:02:52,780 --> 00:02:56,380
Pari ihmistä jQuery, mutta silti ihmiset ovat hieman chill kanssa. Okei.

38
00:02:56,380 --> 00:03:03,000
XML? XML. >> [Opiskelija] Käytätkö että yli yhteydessä Ajax?

39
00:03:03,000 --> 00:03:08,670
Siinä mielessä, että - Kyllä.

40
00:03:08,670 --> 00:03:14,540
Tarkoitan, että se on keskeinen osa Ajax, joten kai voimme niputtaa että Ajax,

41
00:03:14,540 --> 00:03:16,700
jutella koko juttu siellä.

42
00:03:16,700 --> 00:03:21,830
JSON? Mikä on JSON? Okei, viileä.

43
00:03:21,830 --> 00:03:27,200
Tietorakenteita? Ihmiset tunne melko hyvä siellä?

44
00:03:27,200 --> 00:03:29,640
Tiedät liittyvät luettelot, tietää hash taulukoita?

45
00:03:29,640 --> 00:03:33,510
Miten Speller mennä kaikille? Se oli doozy, huh? Joo. Okei.

46
00:03:33,510 --> 00:03:37,320
Joo, voimme puhua hieman näistä mutta jälleen kerran, ole niin tärkeää.

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

48
00:03:41,210 --> 00:03:43,960
Tekeminen sivustot näyttää aika. Okei.

49
00:03:43,960 --> 00:03:50,670
Laajuus PHP? Yksi iso käsi tuolla. Kaksi isoa kättä, kolme. Okei.

50
00:03:50,670 --> 00:03:53,060
Ehkä medium käsi. >> [Opiskelija] Yli 2.

51
00:03:53,060 --> 00:03:56,280
Joo. Sam kampanjoi. Kädet ylös.

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

53
00:04:00,910 --> 00:04:07,410
>> Katsotaanpa. Se näyttää varmasti kuin Ajax ja DOM ovat jaossa.

54
00:04:07,410 --> 00:04:10,300
Joten aloitetaan siitä.

55
00:04:12,740 --> 00:04:16,380
Kai meillä on pari vaihtoehtoa täällä.

56
00:04:16,380 --> 00:04:21,040
Yksi on eräänlainen tehdä kertaus mitä Ajax ja XML ovat

57
00:04:21,040 --> 00:04:26,520
koska meillä ei todellakaan ole aikaa tehdä, että pykälässä tai ongelma asettaa.

58
00:04:26,520 --> 00:04:31,600
Toinen asia on sukeltaa joitakin ongelmia edellisvuosien tietokilpailuja

59
00:04:31,600 --> 00:04:33,990
ja katso, mitä siellä tapahtuu.

60
00:04:33,990 --> 00:04:40,210
Mitään etusijaa 2? >> [Opiskelija] Mielestäni konkreettisia esimerkkejä olisi enemmän hyötyä.

61
00:04:40,210 --> 00:04:42,820
Konkreettisia esimerkkejä enemmän hyötyä? Selvä.

62
00:04:42,820 --> 00:04:46,300
Mitään niistä erityisesti ne teistä päässä Ajax miehistön?

63
00:04:46,300 --> 00:04:48,840
Ongelmat haluat katsoa?

64
00:04:48,840 --> 00:04:54,850
[Opiskelija] Onko tapahtumakäsittelijän liittyvät Ajax ollenkaan? Luulen that -

65
00:04:54,850 --> 00:05:00,380
JavaScript tapahtumankäsittelijät eivät välttämättä liity Ajax. He voivat.

66
00:05:00,380 --> 00:05:03,240
[Opiskelija] Joo, se on toinen käsite, että en itse saada. >> Okei.

67
00:05:03,240 --> 00:05:06,670
[Opiskelija] Uskon kuitenkin tietovisa viimeisen vuoden on 1 iso ongelma

68
00:05:06,670 --> 00:05:12,320
myöhemmissä osissa tietokilpailu, joka liittyy Ajax ja syntaksin en oikeastaan ​​-

69
00:05:12,320 --> 00:05:14,330
Selvä. Ja Ella?

70
00:05:14,330 --> 00:05:18,950
[Opiskelija] Tunnen tiedän mitä Ajax on, mutta en tiedä, miten sitä käytetään.

71
00:05:18,950 --> 00:05:24,580
Okei. >> [Opiskelija] Minusta tuntuu, etten tiedä mitä Ajax on tai miten sitä käytetään. [Naurua]

72
00:05:24,580 --> 00:05:27,280
Okei. Joka toimii melko hyvin.

73
00:05:27,280 --> 00:05:34,700
Katsotaanpa. Katsotaanpa ehkä katsoa hyvä esimerkki Ajax ensin.

74
00:05:34,700 --> 00:05:39,030
>> Tervetuloa, tervetuloa. Toivottavasti olet kunnossa kameran.

75
00:05:39,030 --> 00:05:42,160
Jos ei, voit hengailla takana.

76
00:05:44,610 --> 00:05:48,150
>> Hyvä esimerkki Ajax.

77
00:05:51,940 --> 00:05:54,650
Saanen siirtyä minun laptop.

78
00:05:54,650 --> 00:05:57,690
Täällä olemme Google.com.

79
00:05:57,690 --> 00:06:05,460
Kuinka moni teistä kaverit ovat koskaan pelannut hauskaa "Miten?" peli Google?

80
00:06:05,460 --> 00:06:11,940
Miten voin - ja saat nähdä kaikki hauskoja asioita, jotka keksivät -

81
00:06:11,940 --> 00:06:15,200
laittaa tämän musiikkia minun Tumblr?

82
00:06:15,200 --> 00:06:18,100
Ja voit jatkaa ja saada kaikki tällaista hauskaa.

83
00:06:18,100 --> 00:06:21,380
Mitä täällä tapahtuu?

84
00:06:21,380 --> 00:06:29,270
Kuten kirjoitat Googlen hakukenttään, reaaliaikaiset tulokset päivittämässä.

85
00:06:29,270 --> 00:06:37,380
Niin laita tähän - ja huomaat, että kaikki tulokset alkavat päivityksistä on Google-sivulla.

86
00:06:37,380 --> 00:06:43,940
Se ei ole jotain, joka tapahtuu tietokoneen.

87
00:06:43,940 --> 00:06:47,870
Verkosto on mukana tässä. Google on mukana tässä.

88
00:06:47,870 --> 00:06:56,180
On käynyt ilmi, että joka kerta kun painat näppäintä, kuin sanoa G tai L,

89
00:06:56,180 --> 00:06:58,770
ja hakutulokset päivitys, mitä tapahtuu

90
00:06:58,770 --> 00:07:04,200
on olemassa joitakin JavaScript sivun, joka havaitsee, että olet painanut näppäintä,

91
00:07:04,200 --> 00:07:14,750
ja se tekee verkon pyynnön Google.com kasapäin kaikki uusimmat tulokset

92
00:07:14,750 --> 00:07:18,670
jotka parhaiten sopivat kyselyn, että olet kirjoittanut tähän mennessä.

93
00:07:21,610 --> 00:07:25,690
Valitettavasti uskon, että jos me tarkastelemme tätä -

94
00:07:25,690 --> 00:07:32,690
Olen menossa katsomaan lähde - suurin osa tästä Ajax tai JavaScript-koodia täällä

95
00:07:32,690 --> 00:07:37,830
on kaikki minified ja usein sekaisin hieman liikaa.

96
00:07:37,830 --> 00:07:43,180
Minification kirjaimellisesti on ohjelma voit suorittaa JavaScript-koodin avulla

97
00:07:43,180 --> 00:07:46,620
ja se muuttaa kaikki muuttujien nimet ja tekee siitä täysin lukukelvoton

98
00:07:46,620 --> 00:07:49,180
mutta yrittää tehdä JavaScript mahdollisimman lyhyt

99
00:07:49,180 --> 00:07:52,090
niin, että kun lähetät JavaScript-tiedostot verkon kautta

100
00:07:52,090 --> 00:07:55,960
et tarvitse ladata tai lähettää suuria tiedostoja.

101
00:07:55,960 --> 00:07:57,960
Joten tätä tavaraa on melko vaikea lukea,

102
00:07:57,960 --> 00:08:03,450
mutta haudattu tänne, mitä valtuuksia tämä typeahead - muotisana tämän -

103
00:08:03,450 --> 00:08:07,450
on Ajax pyyntöjä.

104
00:08:07,450 --> 00:08:15,230
>> Mikä tekee Ajax pyynnöstä eroaa minkä tahansa muun verkon pyynnöstä?

105
00:08:15,230 --> 00:08:18,820
Sam? >> [Opiskelija] et muuta URL. >> [Hardison] Oikea. Täsmälleen.

106
00:08:18,820 --> 00:08:24,880
Huomaat kuin kirjoitan, "miten laitan leukaluu pariliitoksenmuodostustilassa?" [Naurahtaa]

107
00:08:24,880 --> 00:08:28,100
On aina hauskaa - Joo.

108
00:08:28,100 --> 00:08:30,990
Huomaat, että tämä URL täällä yläosassa ei muutu,

109
00:08:30,990 --> 00:08:34,280
ja koko sivu ei ole virkistävää.

110
00:08:34,280 --> 00:08:39,590
Joten jos katsomme tällaista kamaa asti täällä, tämä yläreunassa, tämä Google,

111
00:08:39,590 --> 00:08:44,630
ja sitten musta palkki täällä, jota usein kutsutaan Chrome web-sivun,

112
00:08:44,630 --> 00:08:48,630
joka ei muutu. Koko sivu ei ole virkistävää.

113
00:08:48,630 --> 00:08:53,890
Ajax pyyntö käytetään virkistämään vain tulokset sivulla,

114
00:08:53,890 --> 00:08:59,450
vain, että 1 pieni osa sivun niin et tarvitse mennä täysin eri URL,

115
00:08:59,450 --> 00:09:04,690
täysin eri tiedostoa ja lataa se muistiin.

116
00:09:04,690 --> 00:09:12,640
Joten kun kuulet puhuttavan dynaaminen Web 2.0 tyyppi vallankumous,

117
00:09:12,640 --> 00:09:15,370
tämä oli takana paljon se.

118
00:09:15,370 --> 00:09:19,800
Tämä on mitä voit kirjoittaa seinälle viesti Facebook, osuma Post,

119
00:09:19,800 --> 00:09:26,350
ja ovat post näkyvät ilman koko Facebook-sivulla virkistävä

120
00:09:26,350 --> 00:09:33,670
tai selata kasan kuvia ja ladata valokuvia dynaamisesti,

121
00:09:33,670 --> 00:09:35,970
sillä kuinka paljon se imee jos meni Facebook-sivulle,

122
00:09:35,970 --> 00:09:38,130
napsautti valokuvat ja sitten piti istua siellä ja odottaa

123
00:09:38,130 --> 00:09:43,730
Vaikka kaikki pari tuhatta oman Facebook-valokuvia ladattu muistiin?

124
00:09:43,730 --> 00:09:45,170
Se on valtava kuormitus.

125
00:09:45,170 --> 00:09:48,360
Mutta Ajax voit tehdä sen asynkronisesti

126
00:09:48,360 --> 00:09:54,810
ja se on asynkroninen osa Ajax.

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

128
00:09:59,230 --> 00:10:04,370
Olemmeko hyvä? Onko jokainen tavallaan ymmärtää suunnilleen, mitä Ajax tekee?

129
00:10:04,370 --> 00:10:10,670
Se tapahtuu JavaScript, se on tehty eräänlainen dynaamisesti ja asynkronisesti

130
00:10:10,670 --> 00:10:12,540
kun sivu ladataan.

131
00:10:12,540 --> 00:10:18,010
Se tulee usein jälkeen eräänlaisena vastauksena tapahtumaan,

132
00:10:18,010 --> 00:10:23,860
joka on joko hiiren napsautuksella tai näppäimen painallus tai jotain.

133
00:10:23,860 --> 00:10:30,820
Ja sitten se tekee puhelun takaisin palvelimelle, olitpa Google.com

134
00:10:30,820 --> 00:10:35,860
tai Facebook.com, hakee uusia sisältöä sitten näyttää tai päivittää

135
00:10:35,860 --> 00:10:38,050
tai jotain sellaista.

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

137
00:10:40,080 --> 00:10:45,260
Katsotaanpa pari esimerkkiä aiemmilta vuosilta.

138
00:10:47,260 --> 00:10:49,140
Menemme tietokilpailuja.

139
00:10:49,140 --> 00:10:54,160
Ja sitten Charlotte, olit viittaavat Quiz 1 alkaen 2011. >> [Opiskelija] Joo.

140
00:10:54,160 --> 00:11:00,520
Yksi asia aion varovaisuutta on, että tarkastellaan edellisvuosien tietokilpailuja

141
00:11:00,520 --> 00:11:07,970
näet tätä kamaa kutsutaan XHR usein suhde Ajax.

142
00:11:07,970 --> 00:11:18,750
XHR ja XML HttpRequest on eräänlainen raaka tapa tehdä Ajax, jos haluatte.

143
00:11:18,750 --> 00:11:25,740
Tänä vuonna olemme siirtynyt lähes kokonaan käyttämällä tätä jQuery-kirjaston.

144
00:11:25,740 --> 00:11:34,540
jQuery on kirjasto auttaja JavaScript-funktiot ja luokat ja kaikenlaisia ​​herkkuja,

145
00:11:34,540 --> 00:11:40,730
ja jQuery eräänlainen abstrakti raaka XHR tavaraa pois teiltä

146
00:11:40,730 --> 00:11:44,930
niin, että se on paljon helpompi tehdä todellinen Ajax kamaa.

147
00:11:44,930 --> 00:11:47,020
Joten kun selaat näitä edellisvuosien tietokilpailuja

148
00:11:47,020 --> 00:11:51,860
ja te näette kamaa, joka sanoo XHR ja uusien XML HttpRequest,

149
00:11:51,860 --> 00:11:54,490
kaikki tuollaista kamaa, voit ohittaa sen.

150
00:11:54,490 --> 00:11:56,520
Sen sijaan aiomme vain jQuery tavalla.

151
00:11:56,520 --> 00:12:00,490
Emme odota sinun tietävän XML HttpRequest.

152
00:12:00,490 --> 00:12:05,690
Mutta hyvä tietää, että se on synonyymi ajatusta Ajax,

153
00:12:05,690 --> 00:12:13,620
Tämän Asynchronous JavaScript hakemalla XML-tai JSON tai mitä tahansa verkon yli.

154
00:12:13,620 --> 00:12:20,260
Mutta alun perin se korreloi XML tai liitetty XML.

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

156
00:12:24,090 --> 00:12:27,950
Katsotaanpa selaa alaspäin. Muistatko mikä ongelma erityisesti Charlotte?

157
00:12:33,080 --> 00:12:36,550
Oliko tällä sivulla, että minä katson täällä? >> [Opiskelija] Joo, luulen niin.

158
00:12:36,550 --> 00:12:38,810
[Hardison] Ah, sain sen. Okei. Joo.

159
00:12:38,810 --> 00:12:41,660
Puhutaanpa tästä todella nopeasti.

160
00:12:44,640 --> 00:12:53,860
Tapa Ajax toimii on sinulla joitakin JavaScript-tiedoston tietokoneeseen,

161
00:12:53,860 --> 00:12:59,570
ja oikeastaan ​​se on käynnissä eräänlainen yhteydessä selaimessasi.

162
00:12:59,570 --> 00:13:10,820
Joten jos opinnäytetyö on tehdä - en tiedä - uusi dating sivusto Harvard ihmisiä

163
00:13:10,820 --> 00:13:15,000
ja haluat dating sivusto on kyky lähettää nimettömiä viestejä

164
00:13:15,000 --> 00:13:19,130
henkilöstä tai anonyymi Facebook seinämäisen viestiä

165
00:13:19,130 --> 00:13:24,190
ja haluat käyttää Ajax, että jotenkin niin, että kun lähettää viestin

166
00:13:24,190 --> 00:13:26,960
se ei päivitä koko sivuston,

167
00:13:26,960 --> 00:13:32,870
oman JavaScript-koodin voisitte perustaa uuden Ajax puhelun.

168
00:13:32,870 --> 00:13:36,570
Olen keskustelemme siitä tai ei tehdä tämän kannettavan tietokoneen.

169
00:13:36,570 --> 00:13:45,940
Tärkeä osa noin Ajax puhelu on, että tällainen asynchronicity siihen

170
00:13:45,940 --> 00:13:50,250
siinä mielessä, että - haluan vaihtaa takaisin minun iPad -

171
00:13:52,120 --> 00:14:07,160
siinä mielessä, että jos minulla on koodi, joka aikoo sanoa tehdä joitakin Ajax,

172
00:14:07,160 --> 00:14:11,160
niin en voi heti seuraavana linja minun JavaScript-koodia

173
00:14:11,160 --> 00:14:15,170
odottaa, että Ajax on suorittanut.

174
00:14:15,170 --> 00:14:24,260
Mitä tapahtuu, on, että koodi toimii peräkkäin JavaScript,

175
00:14:24,260 --> 00:14:28,760
kun teet tämän Ajax puhelun, olet lähinnä forking pois

176
00:14:28,760 --> 00:14:33,960
ja lähettämällä pyynnön ulos Internet jossain palvelimelle tänne,

177
00:14:33,960 --> 00:14:37,740
mikä on tämä jos olen piirtäminen ja selvästikään ole piirtämällä hyvin.

178
00:14:37,740 --> 00:14:41,280
Olet forking pois tämän pyynnön palvelimelle, että vie jonkin aikaa

179
00:14:41,280 --> 00:14:45,020
koska se menee pois Internet ja menee ja lyö että palvelin

180
00:14:45,020 --> 00:14:49,350
ja menee ja pyytää, että PHP-skripti, jonka olet kirjoittanut loppupäätä

181
00:14:49,350 --> 00:14:55,110
todella tallentaa, että nimetön viesti tietokannassa tai jotain sellaista.

182
00:14:55,110 --> 00:15:01,640
Niin, että kestää jonkin aikaa, ja sitten lopulta, kun palvelin on tehty käsittely

183
00:15:01,640 --> 00:15:10,090
Ajax pyynnöstä, se palaa oman JavaScript-koodin,

184
00:15:10,090 --> 00:15:15,190
mutta et todellakaan tiedä, missä, missä vaiheessa toteutus

185
00:15:15,190 --> 00:15:19,680
aiot Tämä vastaus tulee.

186
00:15:23,430 --> 00:15:28,620
Miten tämä hoidetaan JavaScript?

187
00:15:28,620 --> 00:15:36,510
Tämä on, jos se tulee tähän ongelmaan, että me puhumme laptop

188
00:15:36,510 --> 00:15:47,230
jos olet rekisteröitynyt ohjaaja, voit rekisteröityä erityisesti JavaScript-toiminto

189
00:15:47,230 --> 00:15:52,650
kulua siitä, kun Ajax pyyntö on päättynyt.

190
00:15:52,650 --> 00:15:58,010
Et voi vain tehdä Ajax puhelun ja sitten heti seuraavassa koodiriviä

191
00:15:58,010 --> 00:16:01,570
olettaa, että Ajax puhelu on päättynyt.

192
00:16:03,670 --> 00:16:08,310
Osa kauneutta tämän on haluat JavaScript jatkuu

193
00:16:08,310 --> 00:16:13,210
kun se on tehty Ajax puhelun, koska se voi haarautuvat pois tästä erillistä pyyntöä

194
00:16:13,210 --> 00:16:15,750
ja pitää käsittelystä muut asiat.

195
00:16:15,750 --> 00:16:19,300
Sinulla tällaista samanaikaisuuden menossa täällä, jossa JavaScript toimii edelleen

196
00:16:19,300 --> 00:16:23,520
ja pitää tehdä muita hauskoja asioita, voisi jatkaa pyörimistä pois muita Ajax pyyntöjä.

197
00:16:23,520 --> 00:16:28,630
Ajax pyyntöjä vain mennä verkkoon ja sitten tulla takaisin kun he tulevat takaisin,

198
00:16:28,630 --> 00:16:33,390
mutta kun rekisteröidyt tästä käsittelyfunktio,

199
00:16:33,390 --> 00:16:40,040
silloin tiedät, että Ajax puhelu on palannut sillä tämä toiminto saa kutsutaan.

200
00:16:40,040 --> 00:16:46,040
Joten sen sijaan, että tämä vaiheittainen polkuun, että olemme tottuneet C,

201
00:16:46,040 --> 00:16:51,430
olet mitä enemmän samanlainen kuin mitä näimme Scratch alussa lukukauden

202
00:16:51,430 --> 00:16:54,590
jos sinulla on näitä lähetyksiä

203
00:16:54,590 --> 00:17:00,930
ja sitten on näitä "kun vihreä lippu napsautetaan" tai "kun saan tämän tapahtuman."

204
00:17:00,930 --> 00:17:05,030
Se on lähinnä mitä täällä tapahtuu JavaScript näiden Ajax pyyntöjä.

205
00:17:08,790 --> 00:17:11,940
>> Jos vastaus tähän kysymykseen on line 20,

206
00:17:11,940 --> 00:17:15,500
"Yhteydessä Ajax, mitä tämä koodiriviä tehdä?"

207
00:17:15,500 --> 00:17:22,339
voi joku sellainen mukaillen, mitä juuri sanoin vahvistaa ymmärrystä?

208
00:17:22,339 --> 00:17:24,630
[Opiskelija] Olen pahoillani. Mitä vasen puoli se sano?

209
00:17:24,630 --> 00:17:28,600
[Hardison] xhr.onreadystatechange. Anteeksi. Saan katkaista?

210
00:17:28,600 --> 00:17:31,360
Tämä on se XHR syntaksin että emme tarvitse käsitellä.

211
00:17:31,360 --> 00:17:34,060
Sinulla on samanlainen käsite jQuery.

212
00:17:34,060 --> 00:17:39,400
Mennään Source Code, keskiviikkona indeksi.

213
00:17:39,400 --> 00:17:45,020
Katsotaanpa tämän. Selvä. Sain sen.

214
00:17:48,110 --> 00:17:52,700
Tässä on, että Ajax syntaksin puhumme.

215
00:17:52,700 --> 00:17:56,270
Täällä olet täsmennetään Ajax pyynnöstä.

216
00:17:56,270 --> 00:18:03,590
Sanot: "Tämä on URL haluan mennä ulos ja ping."

217
00:18:03,590 --> 00:18:09,250
"Haluan käyttää POST vastakohtana saada."

218
00:18:09,250 --> 00:18:13,520
Ja sitten tietotyyppi on "Haluan JSON palautetaan."

219
00:18:13,520 --> 00:18:15,670
Jälleen XML oli sellainen perinteinen juttu.

220
00:18:15,670 --> 00:18:18,600
Mutta mitä etsimme on juuri se.

221
00:18:18,600 --> 00:18:21,130
Tämä on se täällä.

222
00:18:21,130 --> 00:18:24,870
Tämä toiminto (vaste) on, että onreadystatechange.

223
00:18:24,870 --> 00:18:30,300
Tämä on ohjaaja. Tämä on mitä tulee suorittaa, kun tämä pyyntö tulee takaisin.

224
00:18:30,300 --> 00:18:35,030
Niin huomaat, että tämä toiminto, että Tommy on kirjoittanut täällä

225
00:18:35,030 --> 00:18:41,850
että puhuimme luento keskiviikkona oli kyse luomisesta että hauskaa typeahead meille.

226
00:18:41,850 --> 00:18:46,490
Huomaat, että mitä hän tekee on hän rakentaa Ajax pyynnöstä

227
00:18:46,490 --> 00:18:52,680
ja sitten ei ole mitään, kun Ajax pyynnöstä.

228
00:18:52,680 --> 00:18:57,470
Hän ei käsittele vastaus Ajax pyynnöstä sen jälkeen, kun puhelu soitetaan.

229
00:18:57,470 --> 00:19:00,770
Hän vain tekee sen tässä käsittelyfunktio

230
00:19:00,770 --> 00:19:05,170
joita kutsutaan niin pian kuin vastaus ei tule takaisin.

231
00:19:08,330 --> 00:19:12,580
>> Sam. >> [Opiskelija] Onko Ajax pyyntöjen on oltava tyyppiä POST tai se voi olla saada?

232
00:19:12,580 --> 00:19:16,970
Ne voivat olla joko. >> [Opiskelija] Miten se työtä, jos et ole muuttumassa URL?

233
00:19:16,970 --> 00:19:22,280
Miten se toimi, jos et ole muuttumassa URL?

234
00:19:22,280 --> 00:19:26,400
Se vain riippuu siitä, missä tiedot on menossa.

235
00:19:26,400 --> 00:19:30,450
Joten kysymys on voi Ajax pyyntöjä olla POST tai GET?

236
00:19:30,450 --> 00:19:37,730
Siellä se voi olla joko. Se on vain todella semanttinen ero POST ja GET.

237
00:19:40,460 --> 00:19:45,670
GET tarkoittaa tyypillisesti, että olet juuri lukemassa jotain palvelimelta

238
00:19:45,670 --> 00:19:50,940
ja et ole muuttamatta mitään, kun taas POST tyypillisesti merkitsee

239
00:19:50,940 --> 00:19:54,390
että olet kirjallisesti tietoja tai kirjoitat jotain palvelimelle.

240
00:19:54,390 --> 00:19:59,500
Usein käytät POST kun yrität vaihtaa tilaa jonnekin.

241
00:19:59,500 --> 00:20:04,400
Siksi kirjautuminen aina mennä HTTP POST,

242
00:20:04,400 --> 00:20:07,940
ottaa huomioon, että Google tekee kasan GET pyyntöjä.

243
00:20:07,940 --> 00:20:19,850
Oikeastaan, jos menemme takaisin meidän Googlen esimerkkiä ja jos katsomme meidän kehitystyökaluja täällä,

244
00:20:19,850 --> 00:20:25,360
Katsotaanpa kehitystyökaluja täällä alareunassa ja avata verkkoon.

245
00:20:25,360 --> 00:20:32,910
Kuten me aloittaa kirjoittamisen, voit nähdä kaikki nämä GET tulossa sisään

246
00:20:36,240 --> 00:20:40,260
Näet kaikki nämä GET täällä ruudun alareunassa

247
00:20:40,260 --> 00:20:44,550
jotka ovat kaikki nämä XJS.

248
00:20:44,550 --> 00:20:52,390
Tämä on Ajax pyynnöstä tulossa takaisin.

249
00:20:52,390 --> 00:20:59,680
Ja jos me klikkaa sitä, voimme nähdä, mitä se sanoo ja mitä sen vastaus on.

250
00:20:59,680 --> 00:21:04,190
Se antaa meille kaiken tämän tietoa vastauksen, että saimme

251
00:21:04,190 --> 00:21:09,430
kun lähetimme Google otsikot, jotka olivat täällä.

252
00:21:09,430 --> 00:21:15,380
Katsotaanpa, jos se on - Se on meidän kyselymerkkijono jonnekin.

253
00:21:19,060 --> 00:21:22,310
URL-osoitteen. Joo.

254
00:21:22,310 --> 00:21:31,630
Alkuperäinen kyselyn, sivuuttaa huono kysely, toisessa läpiviennissä, miten mittari -

255
00:21:31,630 --> 00:21:35,900
Joka tapauksessa, jossain täällä Löydät "miten mittari" kyselyn

256
00:21:35,900 --> 00:21:39,010
tehdyn pyynnön palvelimelle.

257
00:21:39,010 --> 00:21:42,480
Ja sitten vastaus tulevat takaisin on mitä me näemme.

258
00:21:42,480 --> 00:21:45,120
Joten kyllä, se voi olla joko GET tai POST.

259
00:21:45,120 --> 00:21:50,650
Se on yleensä vain semanttinen ero. Voimme kattaa että HTTP. Kyllä, Ella?

260
00:21:50,650 --> 00:21:55,360
>> [Opiskelija] Onko eroa JSON ja XML vain, että JSON on modernimpi?

261
00:21:55,360 --> 00:22:00,730
Onko ero JSON ja XML JSON on modernimpi?

262
00:22:04,100 --> 00:22:09,900
XML ja JSON ovat vain 2 eri tapoja koodaus tietoja.

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

264
00:22:20,540 --> 00:22:29,390
HTML on osajoukko XML.

265
00:22:29,390 --> 00:22:34,650
Niinpä esimerkiksi, nyt vedä ylös TextEdit.

266
00:22:34,650 --> 00:22:44,990
XML on juuri määritelty data, joka on suljettu useita tunnisteita.

267
00:22:44,990 --> 00:22:52,820
Joten html, / html, nämä kaverit ovat voimassa tageja.

268
00:22:52,820 --> 00:22:57,470
Katsotaanpa räjäyttää tämän kokoluokan täällä ja sen luettavuuden parantamiseksi.

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

270
00:23:02,070 --> 00:23:06,300
XML vain määrittelee tag olevan jotain tällaista

271
00:23:06,300 --> 00:23:09,880
jos sinulla on avoin kulmasulkeen, nimi tag,

272
00:23:09,880 --> 00:23:15,870
ja sitten minkä tahansa määrän ominaisuuksia, jotka HTML emme useinkaan ole määritteitä.

273
00:23:15,870 --> 00:23:25,820
Mutta esimerkiksi jos meillä olisi komentosarjatunnus, usein se on tekstin tyyppi, JavaScript.

274
00:23:30,130 --> 00:23:35,770
Ja sisältä tunnisteiden tiedot.

275
00:23:37,600 --> 00:23:44,650
Vuonna totta XML voit itse määritellä nämä koodit olla mitä haluat.

276
00:23:44,650 --> 00:23:46,840
Se on vain tapa jäsentää tietosi.

277
00:23:46,840 --> 00:23:53,800
Niinpä esimerkiksi, jos halusin koodata perheeni XML,

278
00:23:53,800 --> 00:24:01,500
Voisin tehdä jotain tällaista, kuten isä ja sitten laittaa tietoa hänestä

279
00:24:01,500 --> 00:24:09,240
ja veli ja laittaa tietoa veljeni.

280
00:24:09,240 --> 00:24:18,370
Juuri tämä tapa jäsentää tietosi on XML.

281
00:24:18,370 --> 00:24:24,220
JSON, toisaalta, seuraa JavaScript Object Notation,

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

283
00:24:27,140 --> 00:24:34,040
Joten mieluummin kuin kirjoittaa tällaista tag, lähellä tunnistetyyppi muodossa,

284
00:24:34,040 --> 00:24:39,290
me sen sijaan kirjoittaa sen JavaScript olio.

285
00:24:39,290 --> 00:24:45,000
Joten JavaScript olio on kihara ahdin avata asioita

286
00:24:45,000 --> 00:24:48,700
ja sitten kihara ahdin sulkea asioita.

287
00:24:48,700 --> 00:24:53,580
Saanen loitontaa vähän, zoomata sisään

288
00:24:53,580 --> 00:24:59,790
Ja sitten mitä olet ovat Kenttien nimiä, joten "isä":

289
00:24:59,790 --> 00:25:05,480
ja sitten voisin laittaa tietoa hänestä

290
00:25:05,480 --> 00:25:12,990
ja sitten "veli": ja tietoa veljeni.

291
00:25:16,930 --> 00:25:23,040
Ja tietenkin kaikki tässä -

292
00:25:23,040 --> 00:25:26,340
Luulen, mitä on mukavaa noin JSON vastakohtana XML

293
00:25:26,340 --> 00:25:35,750
johtuu JSON esine on tämän esineen merkintätapa että JavaScript on.

294
00:25:35,750 --> 00:25:43,600
JavaScript voi todella helposti vetää, että muistiin ja hoitaa sitä yhtä JavaScript Object

295
00:25:43,600 --> 00:25:45,500
oikea, kun saat sen takaisin palvelimelle.

296
00:25:45,500 --> 00:25:49,460
Ei ole jäsentämiseen, että se todella on tehdä se raskaan tai raskainta,

297
00:25:49,460 --> 00:25:55,690
kun taas XML voit käyttää joko plugins tai jonkinlainen -

298
00:25:55,690 --> 00:25:59,130
Riippuen siitä, mitä olet lähettävät

299
00:25:59,130 --> 00:26:04,770
ja mitä käytät vastaanottamaan XML, voit joutua tekemään hieman enemmän työtä jäsentämiseen,

300
00:26:04,770 --> 00:26:10,090
tämä JavaScript kamaa, jos olet vain kirjallisesti JavaScript

301
00:26:10,090 --> 00:26:14,780
ja joudut vastaanottamaan JavaScript takaisin, se on todella helppo työskennellä.

302
00:26:16,590 --> 00:26:19,890
Toinen asia, että ihmiset myös mainita joskus

303
00:26:19,890 --> 00:26:23,630
on, että XML sinulla on kaikki nämä avoimet koodit ja lähellä tunnisteet,

304
00:26:23,630 --> 00:26:30,620
joten se voi saada iso, se voi saada hieman paisunut.

305
00:26:30,620 --> 00:26:33,990
Joten joitakin jotka kertovat, miten JSON

306
00:26:33,990 --> 00:26:42,280
sinulla ei ole kaikki nämä avoimet koodit ja lähellä tunnisteet, joten se on enemmän pakattuja.

307
00:26:42,280 --> 00:26:47,350
Syystä, että se on tärkeää, että kun täytyy ladata asioita verkon kautta

308
00:26:47,350 --> 00:26:50,040
kun puhut etäpalvelimeen,

309
00:26:50,040 --> 00:26:55,010
vähemmän, joka on siirtää Internetin, nopeammin kaikki menee.

310
00:26:56,890 --> 00:26:59,700
Joka tapauksessa, avain takeaway tässä ne ovat vain 2 eri tapoja jäsentää tietosi,

311
00:26:59,700 --> 00:27:02,150
alustus tietosi.

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

313
00:27:06,110 --> 00:27:08,230
Muita kysymyksiä? Charlotte?

314
00:27:08,230 --> 00:27:11,280
[Opiskelija] Saanko kysyä 1 viimeinen kysymys syntaksi Ajax? >> Toki.

315
00:27:11,280 --> 00:27:16,590
[Opiskelija] Jos menet takaisin esimerkki koodin ja vain loitontaa vähän,

316
00:27:16,590 --> 00:27:19,280
siellä on vain 1 rivi koodia edellä.

317
00:27:19,280 --> 00:27:21,530
Voisimmeko mennä ylös?

318
00:27:21,530 --> 00:27:24,260
päälle ("keyup", function ()

319
00:27:24,260 --> 00:27:30,670
On, että joukko tyhjiä jälkeen suluissa on ("keyup" viittaa toiminnon jälkeen menestys?

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

321
00:27:33,580 --> 00:27:35,450
Pari asiaa täällä.

322
00:27:35,450 --> 00:27:43,170
päälle ("keyup", tämä on tapa tehdä vastaavan Scratch

323
00:27:43,170 --> 00:27:50,330
milloin painetaan ja nostat ylös pois-näppäintä.

324
00:27:50,330 --> 00:27:57,440
Oikeastaan ​​JavaScript sinulla on ("keydown" puolesta ("keyup", ja ("keypress"

325
00:27:57,440 --> 00:28:06,340
ja voit tehdä asioita kunakin näistä 3 eri tapahtumissa.

326
00:28:06,340 --> 00:28:11,060
Tämä on rekisteröitymättä tapahtumankäsittelijänä tahansa näppäintä nousee,

327
00:28:11,060 --> 00:28:16,210
ja sitten tämä toiminto on tämä koko juttu

328
00:28:16,210 --> 00:28:19,560
kaikki alas sinne.

329
00:28:19,560 --> 00:28:23,880
Tämä toiminto ei ole nimeä.

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

331
00:28:25,580 --> 00:28:31,500
Kaikkia toimintojamme olemme tehneet C ja PHP kaikki saaneet nimet.

332
00:28:31,500 --> 00:28:39,900
Tämä on mitä me kutsumme Nimetön toiminto. Järkevää, eikö? No name. Anonymous.

333
00:28:39,900 --> 00:28:43,550
Mikä on kätevä noin Nimetön toiminto?

334
00:28:43,550 --> 00:28:47,860
On selvää, emme voi kutsua tätä toimintoa missään muualla meidän koodi.

335
00:28:47,860 --> 00:28:53,920
Miten me kutsumme tätä toimintoa muualla meidän koodi? Emme voi.

336
00:28:56,540 --> 00:29:03,120
Ei ole nimeä. En voi sanoa, "Ai joo, soittaa, että toiminto, sanoin siitä ('keyup'."

337
00:29:05,080 --> 00:29:08,190
Mikä on kätevä siitä kuitenkin on, että JavaScript

338
00:29:08,190 --> 00:29:11,100
kun olemme jatkuvasti rekisteröitymättä nämä tapahtumankäsittelijät -

339
00:29:11,100 --> 00:29:17,510
sitähän tämä on nimeltään, olet rekisteröitymättä tätä toimintoa käsittelijä, kun avain tulee esiin -

340
00:29:17,510 --> 00:29:23,830
on se todella mukava pystyä vain määritellä nämä toiminnot sellaista Inline ja vain sanoa,

341
00:29:23,830 --> 00:29:28,840
"Kun keyup painetaan, muistakaa tämä toiminto, aion määritellä täällä,

342
00:29:28,840 --> 00:29:35,340
ja se muistaa toimintoa ja sitten se tekee tämän toiminnon

343
00:29:35,340 --> 00:29:37,590
kun avain tulee esiin.

344
00:29:37,590 --> 00:29:41,930
Puhumme tästä enemmän, kun saat enemmän toiminnallisiksi ohjelmointia.

345
00:29:41,930 --> 00:29:46,080
Tämä on hieman maku, että jos olemme pohjimmiltaan kulkee toiminto ympärillä

346
00:29:46,080 --> 00:29:49,960
objektina, ikään kuin se olisi kuin muuttuja.

347
00:29:49,960 --> 00:29:54,410
Sen sijaan kulkee merkkijono tai int, jossa olemme toiminto.

348
00:29:56,000 --> 00:30:00,400
Sellainen outo juttu, mutta mitä mukavaa on, että kaikki muuttujat täällä,

349
00:30:00,400 --> 00:30:08,020
sisällä tätä toimintoa, rajausmenettelyn kysymykset ovat mukavia

350
00:30:08,020 --> 00:30:18,500
koska jos sinulla on vaihteleva täällä, voit viitata muuttujan sisällä tätä toimintoa

351
00:30:18,500 --> 00:30:22,720
sillä tämä toiminto on julistettu sisällä tämän toisen toiminnon.

352
00:30:22,720 --> 00:30:26,670
Joten saat olla etuja, kuten että.

353
00:30:26,670 --> 00:30:31,290
Kerran, että on jotain, joka on enemmän meta. Sinun peitä se tulevaisuudessa luokissa.

354
00:30:31,290 --> 00:30:36,150
>> Joo. >> [Opiskelija] Koska toiminto on anonyymi, sitä voi käyttää jossain muualla?

355
00:30:36,150 --> 00:30:40,750
Vai voiko sitä käyttää vain osana tätä toimintoa?

356
00:30:40,750 --> 00:30:45,460
[Hardison] Sitä käytetään ainoastaan ​​yhteydessä tätä toimintoa. Joo. Kyllä?

357
00:30:45,460 --> 00:30:48,860
>> Onko sillä jotain tekemistä sen kanssa, että se on olio-ohjelmointikieli?

358
00:30:48,860 --> 00:30:52,650
[Hardison] Onko sillä jotain tekemistä sen kanssa, että se on olio-?

359
00:30:58,000 --> 00:31:03,190
Sanoisin, että tämä on enemmän tekemistä sen kanssa, että tämä on toiminnalliset näkökohdat.

360
00:31:03,190 --> 00:31:05,640
Puhumme olio-paradigman ohjelmointi,

361
00:31:05,640 --> 00:31:09,890
ja tämä on tavallaan yksi niistä näkökohdista toiminnallinen paradigma ohjelmointi

362
00:31:09,890 --> 00:31:17,520
jos teet toimintoja, jotka koostuvat muiden toimintojen

363
00:31:17,520 --> 00:31:22,460
ja olet ohimennen toimintojen ympärille.

364
00:31:22,460 --> 00:31:25,040
>> [Opiskelija] Joten JavaScript on funktio kieli myös.

365
00:31:25,040 --> 00:31:28,420
Se on sen elementin, kyllä. Joo.

366
00:31:28,420 --> 00:31:30,000
JavaScript ja monet -

367
00:31:30,000 --> 00:31:35,120
PHP on joitakin tämäkin Python on tämä samanlaista tavaraa,

368
00:31:35,120 --> 00:31:43,390
Ruby on tällainen juttuja kuin hyvin, ja tämä on yleinen enemmän näitä moderneja kieliä.

369
00:31:43,390 --> 00:31:49,660
Olet todella saada nämä ohjelmointikieliä, jotka ovat eräänlainen jokapaikanhöylä.

370
00:31:49,660 --> 00:31:53,180
Se on kuin iso rasva Sveitsin armeijan veitsi, joka ei voi edes laittaa taskuun

371
00:31:53,180 --> 00:31:55,090
koska se on liian laaja.

372
00:31:55,090 --> 00:31:57,970
Sellainen, miten jotkut näistä kielistä on tullut.

373
00:32:01,190 --> 00:32:04,520
>> Muita kysymyksiä? Selvä.

374
00:32:04,520 --> 00:32:06,280
Miten te tunne?

375
00:32:06,280 --> 00:32:13,830
Mennään takaisin siihen tietokilpailu todella nopea ja katso jos voimme vastata 21 ja 20.

376
00:32:13,830 --> 00:32:22,030
Puhuimme 20 kun me rekisteröinyt tämän handler.

377
00:32:22,030 --> 00:32:31,550
Tämä kysymys, "Mikä olisi vaikutusta, jos me kirjoitti, että linjassa pari suluissa?"

378
00:32:31,550 --> 00:32:34,680
näet eron, kuinka ylös yläosassa ei ole suluissa

379
00:32:34,680 --> 00:32:38,370
ja täällä on sulkeissa funktion nimi?

380
00:32:38,370 --> 00:32:43,520
Yksi asia, että on tärkeää huomata,

381
00:32:43,520 --> 00:32:45,410
täällä olemme viitaten toiminto.

382
00:32:45,410 --> 00:32:48,780
Tämä ei ole anonyymi toimintoa. Se on annettu nimi, ohjaaja,

383
00:32:48,780 --> 00:32:52,580
kun taas meidän Ajax täällä, että olimme vain katsomalla,

384
00:32:52,580 --> 00:32:58,260
kaikki toiminnot, jotka olimme kulkee ympäri olivat kaikki Anonyymi: Ei funktion nimi,

385
00:32:58,260 --> 00:33:00,400
ei toimintoa nimi.

386
00:33:00,400 --> 00:33:05,670
Joten se on yleinen käytäntö on määrittää nämä toiminnot sellaista Inline nimettöminä toiminnot

387
00:33:05,670 --> 00:33:08,660
joidenkin rajausmenettelyjen etuja.

388
00:33:08,660 --> 00:33:15,340
Voisit hyvin voinut määritelty tätä toimintoa täällä tai tämä ('keyup toimintoa.

389
00:33:15,340 --> 00:33:22,400
Olisit voinut määritelty tämä kaveri kuin toimintoja nimiä muualla JavaScript-koodin,

390
00:33:22,400 --> 00:33:27,650
ja sitten sen sijaan määritellä toiminnon täällä, voisitte siirtää funktion nimi

391
00:33:27,650 --> 00:33:31,320
oikeus tällä paikalla.

392
00:33:31,320 --> 00:33:36,570
Yksi asia huomata on, että et halua käyttää suluissa

393
00:33:36,570 --> 00:33:39,400
jos olisit ohimennen funktion nimi,

394
00:33:39,400 --> 00:33:44,480
koska kun käytät suluissa, olet viitteellä "kutsua tätä toimintoa,"

395
00:33:44,480 --> 00:33:48,820
katsoo sen sijaan täällä me vain haluamme siirtää toiminnon nimi.

396
00:33:53,740 --> 00:34:02,400
Jos katsomme, mitä täällä tapahtuu, suuri ero on, että tämä ylimmällä rivillä koodia sanoo

397
00:34:02,400 --> 00:34:08,420
tehokkaasti, ylläpitää osoitin toiminto nimeltään ohjaaja,

398
00:34:08,420 --> 00:34:11,820
ja kun Ajax puhelun valmis asettamaan tätä toimintoa,

399
00:34:11,820 --> 00:34:17,210
tosiasiallisesti suorittaa toiminnon, kytke väitteitä, tehdä kaikkea tätä työtä,

400
00:34:17,210 --> 00:34:23,480
tämä rivi tänne sanoo säilyttämisen sijasta osoittimen

401
00:34:23,480 --> 00:34:30,389
on toiminto nimeltä ohjaaja, tällä onreadystatechange alalla

402
00:34:30,389 --> 00:34:33,980
aikoo järjestää tuloksen toiminto nimeltään ohjaajalle,

403
00:34:33,980 --> 00:34:38,409
joten se tulee arvioida käsittelijä, se tulee todella soittaa handler juuri nyt -

404
00:34:38,409 --> 00:34:41,250
ei kun Ajax puhelun yllä, mutta juuri nyt,

405
00:34:41,250 --> 00:34:43,940
joka ei ole mitä haluat tehdä, jos olet kirjoittamassa jotain

406
00:34:43,940 --> 00:34:48,150
käsitellä Ajax puhelun, joka on valmistunut.

407
00:34:56,520 --> 00:35:02,250
>> Selvä. Kysymyksiä siitä? Se on hiuksenhieno ero.

408
00:35:03,640 --> 00:35:06,340
Se on hiuksenhieno ero.

409
00:35:06,340 --> 00:35:09,710
Yksi asia, jonka haluan ehdottomasti ehdottaa tekee, jos et ole tehnyt sitä -

410
00:35:09,710 --> 00:35:15,040
koska tämä on uutta tavaraa, se kestää hetken aikaa se todella uppoavat

411
00:35:15,040 --> 00:35:17,840
ellet todella kirjoitat joitakin tämän tavaraa ulos -

412
00:35:17,840 --> 00:35:23,340
Olen sinun kannattaa käydä läpi lähdekoodia

413
00:35:23,340 --> 00:35:25,610
että Tommy esitetty luento keskiviikkona

414
00:35:25,610 --> 00:35:30,690
koska hän varmasti meni läpi paljon tavaraa, tavallaan hämärtää.

415
00:35:30,690 --> 00:35:32,980
Olin itse kokeilla kirjoittaa sitä.

416
00:35:32,980 --> 00:35:35,120
Kokeile koodaus joitakin juttuja ylös.

417
00:35:35,120 --> 00:35:40,530
Tee. Js-tiedoston. Kirjoita ulos koodin itse. Älä kopioi ja liitä.

418
00:35:40,530 --> 00:35:42,890
Älä vain ajaa CP.

419
00:35:42,890 --> 00:35:47,380
Turha yrittää vain sellainen flex JavaScript lihas.

420
00:35:47,380 --> 00:35:49,490
Katso, mitä asiat ovat.

421
00:35:49,490 --> 00:35:58,830
Esimerkiksi tässä Etsin quote7.js vuonna lähdekoodin keskiviikon luento.

422
00:35:58,830 --> 00:36:04,150
Kokeile menossa ja eikä vain tehdä kaikki nämä toiminnot nimettömänä,

423
00:36:04,150 --> 00:36:10,470
Kopioi tämä koodi, kirjaimellisesti mene alas tämän menestyksen koodin,

424
00:36:10,470 --> 00:36:17,270
Kopioi tämä, liitä se toisen toiminnon, ja antaa sille nimi,

425
00:36:17,270 --> 00:36:22,370
ja yritä sitten kulkee nimi ja katso mitä tapahtuu.

426
00:36:22,370 --> 00:36:26,320
[Opiskelija] Voisiko se olla erilliseen tiedostoon tai saman tiedoston?

427
00:36:26,320 --> 00:36:29,900
Se voisi olla erillinen tiedosto, jos oikein kuuluu se.

428
00:36:29,900 --> 00:36:34,170
Yksi asia, joka tulee olemaan -

429
00:36:34,170 --> 00:36:42,770
Temppu on tämä toiminto viitata johonkin muuttujat, jotka ovat sen ulkopuolella?

430
00:36:42,770 --> 00:36:49,990
Ja mielestäni se vain viittaa vastausta.

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

432
00:36:56,360 --> 00:36:59,280
Voit nimetä tätä.

433
00:36:59,280 --> 00:37:03,150
Voit vetää sen pois, voit antaa sille nimi, ja sitten voit siirtää nimen täällä.

434
00:37:03,150 --> 00:37:07,390
Joten Antaisin että kokeilla, miten se toimii.

435
00:37:09,990 --> 00:37:13,530
>> Selvä. Kysymyksiä? Kysymyksiä? Rakastan kysymyksiä.

436
00:37:13,530 --> 00:37:16,460
En tiedä teistä, mutta pidän niistä.

437
00:37:19,120 --> 00:37:21,320
Miten te tunne tästä?

438
00:37:21,320 --> 00:37:26,910
Siellä on tavallaan tämän "Voi paska" tunnelma huoneessa. [Opiskelijat hihittää]

439
00:37:26,910 --> 00:37:32,030
On sellainen, miten te tunnette? >> [Opiskelija] Joo. >> Niin? Kyllä, Daniel?

440
00:37:32,030 --> 00:37:35,270
>> [Opiskelija] Luulen ymmärtäväni sellaista yleistä käsitteitä, jotka puhut,

441
00:37:35,270 --> 00:37:37,920
kuten anonyymi toiminnot ja kaikki jutut,

442
00:37:37,920 --> 00:37:42,490
mutta en ymmärrä puoli syntaksin se tuonne ylös,

443
00:37:42,490 --> 00:37:46,510
Kuten mitä ul keinoin, li, nämä eri tunnisteita.

444
00:37:46,510 --> 00:37:51,840
En usko, että olisin voinut koodaamaan jotain JavaScript. >> Fair.

445
00:37:51,840 --> 00:37:59,960
Onko se yhteinen tunne, yhteinen tunne, se kuulostaa? Okei.

446
00:37:59,960 --> 00:38:03,370
[Opiskelija] Tuleeko meidän? >> Onko meidän täytyy koodata?

447
00:38:03,370 --> 00:38:09,280
Sinun tulisi olla valmis leikellä jotain tällaista, sanoisin.

448
00:38:09,280 --> 00:38:15,550
En ole yksi kirjallisesti tentti,

449
00:38:15,550 --> 00:38:18,770
mutta haluan ehdottomasti sanoa, että jos tämä on yhteinen tunne,

450
00:38:18,770 --> 00:38:23,020
sellainen, että paljon tätä syntaksin täällä näyttää, "Mitä helvettiä?"

451
00:38:23,020 --> 00:38:27,900
"Olen täysin uinti", niin puhutaanpa siitä ja korjata sen.

452
00:38:29,080 --> 00:38:30,520
Kuulostaako hyvältä?

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

454
00:38:32,150 --> 00:38:36,550
>> Joten mitä täällä tapahtuu? Otetaanpa tämä rivi riviltä.

455
00:38:36,550 --> 00:38:38,300
Kokeillaan menee ympäri huonetta.

456
00:38:38,300 --> 00:38:41,440
Olen juuri menossa kutsua ihmisiä 1 1, ja antaa minulle paras arvaus.

457
00:38:41,440 --> 00:38:44,470
Teemme sen nopeasti. Sinulla 5 sekuntia aikaa vastata.

458
00:38:44,470 --> 00:38:46,130
Jos et vastaa, siirrymme seuraavalle henkilölle.

459
00:38:46,130 --> 00:38:48,460
Ja se ei ole iso juttu, koska tiedän, tämä on hullua kamaa.

460
00:38:48,460 --> 00:38:52,520
Aloitamme täällä. Charlotte, mitä tämä linja tehdä?

461
00:38:52,520 --> 00:38:54,450
[Opiskelija] Se luo muuttuja nimeltä ehdotuksia

462
00:38:54,450 --> 00:38:57,890
ja asettamalla se sama mitä ul on. >> [Hardison] Oikea.

463
00:38:57,890 --> 00:39:02,220
>> Jimmy, mikä on UL?

464
00:39:02,220 --> 00:39:07,740
[Opiskelija] En tiedä. >> [Hardison] Okei, viileä. Charlotte oli täysin oikeassa.

465
00:39:07,740 --> 00:39:11,680
Tämä rivi koodia, että olen korostanut täällä julistaa muuttuja nimeltä ehdotuksia,

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

467
00:39:13,710 --> 00:39:18,760
Meillä tätä var avainsanan edessä joka varmistaa, että muuttuja pysyy paikallisen

468
00:39:18,760 --> 00:39:21,140
soveltamisalaan, että se on sisään

469
00:39:21,140 --> 00:39:28,490
Ja tämä ul asia, että emme ole ennen nähneet oikeastaan,

470
00:39:28,490 --> 00:39:34,290
Katsotaan, jos siellä on hyvä - Haluan siirtyä takaisin minun iPad.

471
00:39:36,270 --> 00:39:37,860
Uusi sivu.

472
00:39:37,860 --> 00:39:40,700
Olen varma, että te olette nähneet ul ennen.

473
00:39:40,700 --> 00:39:42,620
Se Järjestämätön lista.

474
00:39:42,620 --> 00:39:45,590
Joten oletko koskaan nähnyt web-sivu, jossa on luoteja

475
00:39:45,590 --> 00:39:56,970
ja sinulla on Thing 1, Thing 2, ja niin edelleen ja niin edelleen?

476
00:39:56,970 --> 00:40:00,770
Tämä on Järjestämätön lista.

477
00:40:00,770 --> 00:40:09,120
Tavalla kuin koodata tätä HTML on sinun aloittaa avoin tag

478
00:40:09,120 --> 00:40:19,060
joka avaa Järjestämätön lista, olisit sulkea sen lähellä tunniste, joka sulkee Järjestämätön lista,

479
00:40:19,060 --> 00:40:31,820
ja sitten keskeltä sinun täytyy luettelokohteiden, li.

480
00:40:31,820 --> 00:40:43,110
Ja sisällä li n olisi näytettävä teksti, joten Thing 1 ja Thing 2.

481
00:40:43,110 --> 00:40:49,400
Sitten olisimme suljemme luettelokohde tageja.

482
00:40:54,130 --> 00:41:01,110
Järjestämättömiä luettelot ovat erittäin yleistä, koska se on hyvä tapa saada sama tyyli

483
00:41:01,110 --> 00:41:03,720
sovelletaan rivi asioita.

484
00:41:03,720 --> 00:41:08,170
Joten jos tarkastellaan esimerkiksi PSET 7 koodia,

485
00:41:08,170 --> 00:41:12,710
paljon nav pillereitä, navigointi pillereitä, joita käytettiin eri linkkien

486
00:41:12,710 --> 00:41:18,740
ostaa, myydä, Quote, historian, kaikki tämä, nämä on toteutettu järjestämättömiä listoja,

487
00:41:18,740 --> 00:41:23,160
ja ne käytetään CSS poistaa nämä bullet pistettä

488
00:41:23,160 --> 00:41:27,530
ja laji muuttaa asioita ympärillä hieman.

489
00:41:27,530 --> 00:41:33,920
Sellainen voima CSS on, että HTML kuvailee rakennetta.

490
00:41:33,920 --> 00:41:36,680
Meillä lista luettelokohteiden.

491
00:41:36,680 --> 00:41:41,360
Se on järjestämättömiä. Ei ole ensimmäinen, toinen tai kolmas. Se on vain lista.

492
00:41:41,360 --> 00:41:45,020
Ja niin oletuksena se vetää se vain luoteja.

493
00:41:45,020 --> 00:41:50,270
Jos sen sijaan oli kirjoittanut oli, joten aion vaihtaa tämän ol lista

494
00:41:50,270 --> 00:41:53,870
toisin kuin ul, mitä se tekee?

495
00:41:53,870 --> 00:42:01,840
Näin päästäisiin eroon näistä luoteja, ja oletuksena mielestä olisi numeroitu lista

496
00:42:01,840 --> 00:42:04,020
koska nyt meillä tilaus.

497
00:42:09,700 --> 00:42:14,840
Muotoilu Lista on sen jälkeen mitä leikkiä CSS,

498
00:42:14,840 --> 00:42:21,620
ja se jos ihmiset, jotka kirjoittivat Bootstrap kirjaston CSS pelannut

499
00:42:21,620 --> 00:42:30,030
kanssa muotoilu Järjestämätön lista saada se näyttää ne mukava pikku nav pillereitä.

500
00:42:30,030 --> 00:42:33,730
Jos katsomme Google, esimerkiksi katsotaanpa katsomaan tämä kaveri.

501
00:42:33,730 --> 00:42:38,450
Takaisin "miten mittari äitisi" - kuulostaa saksalaista.

502
00:42:38,450 --> 00:42:43,490
Rakastan saksa. Se kuulostaa niin hauskaa.

503
00:42:43,490 --> 00:42:47,040
Olen pahoillani, onko Saksan ihmisiä katsomassa kuka tuntevat loukkaantunut.

504
00:42:47,040 --> 00:42:51,550
Joka tapauksessa, jos katsomme näitä linkkejä täällä yläosassa

505
00:42:51,550 --> 00:42:57,610
ja katsomme, mitä siellä tapahtuu, voimme tarkastaa sen avulla tämä kaveri.

506
00:42:57,610 --> 00:42:59,430
Olen alas täällä nurkassa.

507
00:42:59,430 --> 00:43:01,690
Kehitystyökaluja Chrome on mahtava.

508
00:43:01,690 --> 00:43:05,780
Jos te alkaa leikkiä sen kanssa tai etsiä tutorials, se auttaa paljon

509
00:43:05,780 --> 00:43:07,620
jos teet web-urakointiin.

510
00:43:07,620 --> 00:43:10,720
Napsautan pikku tarkastaja. Aion vierittää takaisin tänne.

511
00:43:10,720 --> 00:43:15,680
Aion nähdä, mitä kaikki nämä kaverit ovat.

512
00:43:15,680 --> 00:43:19,300
Olen zoomata aion napsauttavat näitä.

513
00:43:19,300 --> 00:43:25,850
Sitten voin zoomata takaisin ulos ja nähdä, mitä se todellisuudessa on HTML alas tänne.

514
00:43:25,850 --> 00:43:30,050
Näyttää siltä, ​​Google on sisäkkäisiä sitä järjestetty lista.

515
00:43:30,050 --> 00:43:36,220
Joten meillä tämä span, jossa lukee + Sinä, ja joka on sisäkkäin ankkuri tag,

516
00:43:36,220 --> 00:43:41,030
joten se tekee siitä klikattava ja se kytketään se minun Google+-sivun.

517
00:43:41,030 --> 00:43:47,130
Se on sisäkkäin luettelokohde,

518
00:43:47,130 --> 00:43:49,670
ja se on sisäkkäin tämän järjestetty lista.

519
00:43:49,670 --> 00:43:55,060
Ja nyt jos olen itse napsauta luettelon kohtaan, se tuo esiin sen minulle siellä.

520
00:43:55,060 --> 00:43:59,530
Jos Korostan Järjestämätön lista, näet kuinka painopiste menee yläreunassa.

521
00:43:59,530 --> 00:44:03,460
Se siirtää ylös ja näyttää minulle koko järjestetty lista.

522
00:44:03,460 --> 00:44:08,380
Joten Google on juuri pelannut styling saada nämä luettelot näy niin.

523
00:44:08,380 --> 00:44:15,510
Se riittää hauskaa listojen kanssa. Takaisin tietokilpailuun tai tätä kamaa.

524
00:44:15,510 --> 00:44:19,260
Nyt tiedämme, mitä Järjestämätön lista on - toivottavasti.

525
00:44:19,260 --> 00:44:28,690
>> Puhutaanpa tästä seuraavan rivin koodi, (var i response.symbols). Ella.

526
00:44:28,690 --> 00:44:35,980
[Opiskelija] Minulla ei ole aavistustakaan. >> [Hardison] Ei aavistustakaan.

527
00:44:35,980 --> 00:44:40,290
Okei. Olet nähnyt silmukka ennen, oletan. >> [Opiskelija] Joo.

528
00:44:40,290 --> 00:44:43,930
[Hardison] Muistatko tekee kunkin PHP? >> [Opiskelija] Kyllä.

529
00:44:43,930 --> 00:44:46,340
[Hardison] Tämä on juuri sitä.

530
00:44:46,340 --> 00:44:51,210
Tämä on jokaisen silmukan JavaScript.

531
00:44:51,210 --> 00:45:00,860
Tämä on lyhyempi tapa kuin tehdä varten (var i = 0; i <response.symbols.length; i + +),

532
00:45:00,860 --> 00:45:04,400
jonka voisimme tehdä,

533
00:45:04,400 --> 00:45:08,620
mutta tämä on enemmän ytimekkäästi kirjoittamisesta.

534
00:45:08,620 --> 00:45:17,530
Yksi asia on varottava JavaScript on, että tämä ei välttämättä seuraa järjestyksessä.

535
00:45:17,530 --> 00:45:23,030
Jos response.symbols on oletettavasti array,

536
00:45:23,030 --> 00:45:33,140
var i on indeksi tähän array, mutta se ei välttämättä ole 0, ja sen jälkeen 1

537
00:45:33,140 --> 00:45:36,340
ja sitten 2 ja sitten 3.

538
00:45:36,340 --> 00:45:47,360
He eivät sano käyttöä varten (var i = 0) jos välität tilaus.

539
00:45:47,360 --> 00:45:55,860
Oletan toinen asia huomata on, että kun käytimme kunkin PHP,

540
00:45:55,860 --> 00:46:03,470
tarkensimme array nimi ensin ja sitten meillä oli niin avainsanan

541
00:46:03,470 --> 00:46:07,490
ja sitten me määritetyn arvon, että halusimme hakea array.

542
00:46:07,490 --> 00:46:12,680
Tai voisimme määrätä sekä avain ja arvo, että halusimme hakea array.

543
00:46:12,680 --> 00:46:16,730
Täällä me vain saada indeksiin.

544
00:46:16,730 --> 00:46:22,090
Emme saada todellinen itse elementin.

545
00:46:22,090 --> 00:46:29,510
Niin näet, että kun menemme tänne olemme todella ottaa hakea nnen elementin

546
00:46:29,510 --> 00:46:34,810
ulos response.symbols vastustaa.

547
00:46:37,680 --> 00:46:46,400
Toinen asia, joka on hulluna tähän on, voit käyttää tätä silmukan yli esineitä JavaScript

548
00:46:46,400 --> 00:46:52,070
ja hakea jokainen ominaisuuksia, että kohteen 1 1.

549
00:46:52,070 --> 00:46:57,950
Jos menisimme takaisin, että JavaScript Object Notation kuvaus perheeni

550
00:46:57,950 --> 00:47:03,280
missä se oli kirjaimellisesti nämä aaltosulkeita ja isä, veli, äiti, kaikki,

551
00:47:03,280 --> 00:47:06,420
voit käyttää silmukan kerrata yli, että sekä

552
00:47:06,420 --> 00:47:10,130
ja hakea ominaisuudet 1 1.

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

554
00:47:14,120 --> 00:47:18,200
Joten mitä teemme, se näyttää, on me rakentaa HTML merkkijono

555
00:47:18,200 --> 00:47:22,220
aivan kuten tämä kommentti sanoo, "rakentaa html merkkijono listan ehdotuksia."

556
00:47:22,220 --> 00:47:26,340
Aiomme aloittaa meidän avoin tag meidän Järjestämätön lista

557
00:47:26,340 --> 00:47:30,110
jossa oletamme aiomme tallentaa kaikki ehdotukset luettelona kohdetta.

558
00:47:30,110 --> 00:47:36,490
Sitten aiomme lenkki kaikki symbolit vastaus

559
00:47:36,490 --> 00:47:39,230
koska muistaa tämä on typeahead varten CS50 Finance,

560
00:47:39,230 --> 00:47:44,180
joten olemme jättäytyneet pois osakesymboleja 1 1.

561
00:47:44,180 --> 00:47:50,410
Ja sitten me lisäämällä ehdotuksemme string mitä?

562
00:47:50,410 --> 00:47:53,880
>> Jared, mitä tämä näyttää?

563
00:47:53,880 --> 00:48:00,140
[Opiskelija] Tuntuu siltä se tarttumalla jonkinlaisesta tietokannasta

564
00:48:00,140 --> 00:48:02,250
mitä kirjain kirjoittaessasi,

565
00:48:02,250 --> 00:48:06,640
jättäen jonkinlainen ehdotus, mitä sana - >> [Hardison] Joo.

566
00:48:06,640 --> 00:48:10,490
Ajax pyynnöstä jo itse ei mennä ja napata että. Tämä on meidän vastauksemme.

567
00:48:10,490 --> 00:48:14,890
Tämä on itse asiassa sen jälkeen, kun olemme saaneet vastetta tietokannasta, palvelimesta.

568
00:48:14,890 --> 00:48:20,150
>> Ja niin mitä tämä on? Mitä tämä yksi tarjous juttu tarkoittavat?

569
00:48:20,150 --> 00:48:23,990
[Opiskelija] heittomerkki? >> [Hardison] Joo. Se on vain merkkijono, eikö?

570
00:48:23,990 --> 00:48:26,930
Ja niin mitä tämä on askartelu?

571
00:48:26,930 --> 00:48:31,080
Se on merkkijono ja me laitamme tavaraa merkkijono. Ja mitä on merkkijono näköisenä?

572
00:48:31,080 --> 00:48:35,140
[Opiskelija] Vain ehdotus, että Me olemme - >> [Hardison] Joo, aivan.

573
00:48:35,140 --> 00:48:43,050
Se on ehdotus sisäkkäin ankkuri tag,

574
00:48:43,050 --> 00:48:49,570
ja se on myös ankkuroitu sisällä luettelokohde niin, että se menee luettelosta.

575
00:48:49,570 --> 00:48:56,790
Kirjaimellisesti, kaikki teemme täällä on me vain rakentaa ison HTML merkkijono.

576
00:48:56,790 --> 00:49:02,570
Me vain rakentaa sitä kirjaimellisesti merkkijono muistiin.

577
00:49:02,570 --> 00:49:04,740
Emme tee mitään fancy.

578
00:49:04,740 --> 00:49:09,660
Emme uusia solmuja DOM tai mitään sellaista.

579
00:49:09,660 --> 00:49:15,030
Me kirjaimellisesti vain rakentaa merkkijono kuin olisit kirjoittaa ulos, esimerkiksi

580
00:49:15,030 --> 00:49:21,220
iPadissa kuten minä - jos teillä on iPad ja kuten kirjoittaa HTML iPadissa -

581
00:49:21,220 --> 00:49:33,250
olet vain kirjallisesti iso pitkä merkkijono, joka on kuin ul, li, ...

582
00:49:33,250 --> 00:49:38,440
ja sitten me tietysti menossa irtisanoa tämän ul.

583
00:49:38,440 --> 00:49:41,410
Niin, että kaikki olemme pääsemässä on 1 iso, massiivinen jono.

584
00:49:43,750 --> 00:49:51,180
Ja sisälle on lisätty li ja kullekin symboleja, jotka löysimme.

585
00:49:54,210 --> 00:50:01,760
>> Ja nyt jatkaen, mitä tämä linja tehdä, Stella, täällä?

586
00:50:01,760 --> 00:50:06,670
Mitä tämä linja tehdä täällä?

587
00:50:06,670 --> 00:50:11,560
[Äänetön opiskelija vastausta]

588
00:50:11,560 --> 00:50:14,970
[Hardison] Joo. Se on vain lisäämällä tämä kaveri.

589
00:50:14,970 --> 00:50:17,650
Olemme juuri päättyneen listallamme. Täsmälleen.

590
00:50:17,650 --> 00:50:25,430
>> Ja sitten tämä lopullinen linja - ja tämä näyttää ikään Hessu -

591
00:50:25,430 --> 00:50:30,230
Olen pahoillani. En tiedä nimeäsi punainen collegepaita. Tiedätkö mitä tämä tekee?

592
00:50:30,230 --> 00:50:33,270
Vai aiotko päättää mitään?

593
00:50:33,270 --> 00:50:38,560
Ja sinä? >> [Opiskelija] Se kehottaa jQuery sitä, mutta en tarkalleen tiedä, mikä toimiakseen se on.

594
00:50:38,560 --> 00:50:40,490
[Hardison] Joo. Se kehottaa jQuery.

595
00:50:40,490 --> 00:50:42,870
Entä täällä ketään yli vasemmalla puolella minua?

596
00:50:42,870 --> 00:50:51,110
Tiedätkö mitä tämä linja ei? Mitä se tuntua se tekee, jos pitäisi arvata?

597
00:50:51,110 --> 00:50:57,620
[Opiskelija] alistumisen HTML ehdotusluettelon, vai onko se -

598
00:50:57,620 --> 00:50:59,410
Joo. Mitä tarkoitat toimittamalla?

599
00:50:59,410 --> 00:51:04,370
[Opiskelija] sanovat HTML mitä me juuri käsitelty JavaScript

600
00:51:04,370 --> 00:51:07,560
on nyt ehdottomasti vain HTML. >> [Hardison] Joo.

601
00:51:07,560 --> 00:51:10,600
Se on hyvä alku.

602
00:51:10,600 --> 00:51:12,100
Katsotaanpa leikellä tätä hieman enemmän.

603
00:51:12,100 --> 00:51:14,140
Juuri tämä osa tekee täällä.

604
00:51:14,140 --> 00:51:17,660
[Opiskelija] Mikä osa siitä tekee selväksi, että se on jQuery?

605
00:51:17,660 --> 00:51:20,380
[Hardison] jQuery on tällä dollarin merkki kaveri.

606
00:51:20,380 --> 00:51:25,630
Aina olet kirjoittamassa jQuery, näet tämän dollarin merkki koko paikka.

607
00:51:25,630 --> 00:51:36,020
Tämä on juuri käytetty jQuery eräänlaisena erityinen tunnusmerkki.

608
00:51:36,020 --> 00:51:38,280
Se tekee koko joukko asioita.

609
00:51:38,280 --> 00:51:46,980
Osana tätä täällä, tämä osa linja, se on valitsin.

610
00:51:46,980 --> 00:51:53,350
Se on jQuery valitsin, ja se on valita HTML-elementti

611
00:51:53,350 --> 00:51:58,440
, joka on tunnus ehdotuksia.

612
00:51:58,440 --> 00:52:01,730
Muistatko, kuinka HTML-elementtejä voi olla, että tunnus-määritteen

613
00:52:01,730 --> 00:52:06,920
jossa voit olla kohta tunniste, joka on tunnus ehdotuksia?

614
00:52:06,920 --> 00:52:13,380
Tämä jQuery valitsin napata että elementti

615
00:52:13,380 --> 00:52:18,000
koska tämä elementti on olemassa jossain muistissa.

616
00:52:18,000 --> 00:52:21,120
JavaScript pystyy tavallaan paikantaa että elementin ja sanoa,

617
00:52:21,120 --> 00:52:24,830
"Selvä, olet kohta, jossa on tämä tunnus"

618
00:52:24,830 --> 00:52:34,940
ja sitten tämä. html sanoo: "Okei, korvata nykyinen HTML sisääsi

619
00:52:34,940 --> 00:52:41,210
"Tämä uusi merkkijono, tämä uusi HTML että aion antaa teille."

620
00:52:41,210 --> 00:52:49,950
Joten jos katsomme taaksepäin at iPad - ha, ha, minä muistin vaihtaa tällä kertaa -

621
00:52:49,950 --> 00:53:07,470
Oletko usein lisättävän asioita, kuten divs, joten kuvitella meillä oli div joka oli id ​​= "ehdotuksia";

622
00:53:07,470 --> 00:53:13,080
Aiomme sulkea div tag tänne.

623
00:53:13,080 --> 00:53:21,500
Kun käytämme jQuery valitsin napata osa DOM

624
00:53:21,500 --> 00:53:29,270
joka on tunnus ehdotuksia, se kirjaimellisesti valitsee tämän koko div täällä,

625
00:53:29,270 --> 00:53:37,920
ja sitten HTML menetelmä sanoo: "Korvaa kaikki tämän juttuja täällä

626
00:53:37,920 --> 00:53:41,840
"Oikeassa, että ul, että Järjestämätön lista, että me vain rakennettu."

627
00:53:41,840 --> 00:53:47,170
Kirjaimellisesti, jos olit näyttämässä koko HTML-tiedoston merkkijono muistiin,

628
00:53:47,170 --> 00:53:51,750
te vain sanoa: "Menkää että paikalla ja jysäyttää että ul tavaraa,"

629
00:53:51,750 --> 00:53:57,210
ja sitten päivittää sivu, jotta voit nyt nähdä Järjestämätön lista siellä.

630
00:53:57,210 --> 00:54:04,510
Joten mitä tämä on tosiasiallisesti tehnyt, on se päivitetään dynaamisesti tämän div.

631
00:54:04,510 --> 00:54:08,980
Koodi, joka me vain näki kannettava tietokone on päivitetty tämän div

632
00:54:08,980 --> 00:54:13,760
pitää uusia ehdotuksia, jotka haettiin palvelimen jonnekin.

633
00:54:13,760 --> 00:54:18,790
[Opiskelija] Mitä ehdotuksia edustaa uutta ehdotuksia ja vanhan ehdotuksia?

634
00:54:18,790 --> 00:54:21,070
Uusia ehdotuksia ja vanhoja ehdotuksia.

635
00:54:21,070 --> 00:54:24,950
[Opiskelija] Mitä tarkoittaa kumpi on vaihtumassa ja kumpi tekee korvaa?

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

637
00:54:26,400 --> 00:54:29,110
Katso täällä, tämä kaveri on merkkijono.

638
00:54:29,110 --> 00:54:34,580
Tämä määrittää ID elementti - me kutsumme sitä DOM -

639
00:54:34,580 --> 00:54:40,570
joka kirjaimellisesti tarkoittaa vain joitakin HTML-elementti, joka on jossain näytössä

640
00:54:40,570 --> 00:54:42,490
www-sivulla.

641
00:54:42,490 --> 00:54:47,830
Jos me tarkastelemme tätä, jos menemme takaisin meidän Googlen sivulle,

642
00:54:47,830 --> 00:54:53,460
näemme kaikki nämä divs ja nämä ol ja näiden li ja nämä on.

643
00:54:53,460 --> 00:55:00,020
Nämä kaikki ovat HTML-elementit, jotka tällä hetkellä muodostavat tällä sivulla.

644
00:55:00,020 --> 00:55:08,140
Nämä kaikki korreloivat yksittäisille elementtejä sivulla.

645
00:55:08,140 --> 00:55:13,650
Ja jos olisimme muuttaa tätä, voisitte katsella DOM muutos,

646
00:55:13,650 --> 00:55:16,220
ja voit nähdä tällaista siirtymässä.

647
00:55:16,220 --> 00:55:20,600
Joten jos olisimme kirjoittaa Harvard, näkisitte DOM alkavat muuttua

648
00:55:20,600 --> 00:55:24,970
ja listaelementit alkaa muuttua täällä.

649
00:55:24,970 --> 00:55:26,880
Se on oikeastaan ​​mitä tapahtuu.

650
00:55:26,880 --> 00:55:35,020
>> Katsotaan jos voimme löytää joitakin tämän juttuja tänne.

651
00:55:35,020 --> 00:55:41,490
Katsotaanpa tätä linkkiä. Katsotaanpa tätä Harvardin linkki, ja me katsella sitä muuttaa.

652
00:55:41,490 --> 00:55:48,160
Voimme nähdä, että olen valinnut tämän, se vastaa tämän DIV täällä,

653
00:55:48,160 --> 00:55:52,680
joka on myös osa listaelementin, joka on aivan toiseen listaan ​​elementti,

654
00:55:52,680 --> 00:55:56,500
joka on osa Järjestämätön lista täällä.

655
00:55:56,500 --> 00:56:07,470
Nyt mitä tapahtuu, jos me etsiä meidän vähemmän koulun hieman alas etelään?

656
00:56:07,470 --> 00:56:09,040
Se muuttuu nyt.

657
00:56:09,040 --> 00:56:13,460
Joten menetimme kahvaa että div ja että listaelementin

658
00:56:13,460 --> 00:56:19,010
koska nyt meillä on erilaisia ​​elementtejä meidän DOM,

659
00:56:19,010 --> 00:56:24,280
eri listaelementit, eri lista kohteita, eripituisia, kaikki tämä.

660
00:56:24,280 --> 00:56:28,750
Joten tämä HTML-asiakirjaa päivitetään dynaamisesti.

661
00:56:28,750 --> 00:56:33,240
Vanhat osat ovat poistettu, uudet elementit ovat lisätään.

662
00:56:33,240 --> 00:56:42,600
Tänne me vain täsmennetään tämä elementti, joka oletettavasti on vakaa

663
00:56:42,600 --> 00:56:44,870
koko meidän typeahead päivitys,

664
00:56:44,870 --> 00:56:50,270
koska muuten jos jQuery ei löydä elementti, joka on tunnus ehdotuksia,

665
00:56:50,270 --> 00:56:53,320
se tulee vain kaatua tässä vaiheessa.

666
00:56:53,320 --> 00:56:57,020
Ja sitten me päivittää sen sisäinen HTML.

667
00:56:57,020 --> 00:57:03,970
Joten se on näiden lista kohteita, nämä ankkuri tunnisteita, jotka jatkuvasti päivittää ja virkistää kirjoittaessasi.

668
00:57:10,440 --> 00:57:15,750
Tarkoittaako tämä tehdä parempaa työtä? >> [Opiskelija] Se auttaa paljon. >> [Hardison] Okei.

669
00:57:15,750 --> 00:57:24,210
Syntaksin että näet paljon - tietää, mitä tämä kaveri tekee.

670
00:57:24,210 --> 00:57:27,810
Tiedä jQuery valitsin.

671
00:57:27,810 --> 00:57:36,610
Tämä jQuery valitsin hash tag edessä merkitsee tunnus.

672
00:57:36,610 --> 00:57:42,410
Tämä kaveri sanoo: "Anna minulle elementti, joka on tunnus ehdotuksia."

673
00:57:48,440 --> 00:57:56,480
Tämä kaveri tänne myös sanoo, "Anna minulle, että sama elementti tunnus ehdotuksia."

674
00:57:56,480 --> 00:58:03,350
Tämä kaveri alapuolella on hieman monimutkaisempi.

675
00:58:03,350 --> 00:58:12,420
Tämä sanoo, "Anna minulle elementin ID form-lainaus,

676
00:58:12,420 --> 00:58:21,180
"Mutta sitten mennä sisälle, että muoto ja löytää lapsi" -

677
00:58:21,180 --> 00:58:25,710
joten tätä tilaa täällä merkitsee, että me aiomme alielementti, elementtitasoa.

678
00:58:25,710 --> 00:58:33,550
"Etsi lomake, jossa on tämä tunnus ja sitten löytää tulo sisältä että muoto, jonka nimi on symboli."

679
00:58:38,410 --> 00:58:45,050
Tämä on ehdottomasti Tommyn luentokalvot, näitä erilaisia ​​jQuery valitsimia.

680
00:58:45,050 --> 00:58:50,490
Sinun pitäisi tietää, millaisia ​​elementtejä nämä noutamista.

681
00:58:51,970 --> 00:58:54,590
Esimerkiksi, katsotaanpa siirtyä takaisin iPad todella nopeasti.

682
00:58:58,450 --> 00:59:14,970
Jos meillä olisi lomakkeen elementti id = "form-lainaus" -

683
00:59:14,970 --> 00:59:21,110
tietenkin, että puuttuu method = POST tai method = GET ja toiminta attribuutteja sekä

684
00:59:21,110 --> 00:59:37,010
että sinun pitäisi olla lomakkeita, mutta vain tässä esimerkissä lomakkeen, kuten tiedätte, on tulot

685
00:59:37,010 --> 00:59:51,860
ja että koodi, joka me vain näki saisi syöttöosassa

686
00:59:51,860 --> 00:59:57,580
että oli name = "symboli".

687
00:59:57,580 --> 01:00:02,970
Tämä on tärkeää, kun yrität täyttää eri alojen sisällä lomakkeen.

688
01:00:02,970 --> 01:00:07,440
Näin auto-täyttö toimii.

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

690
01:00:09,500 --> 01:00:16,050
[Opiskelija] Mitä eroa tunnus ja luokka? >> ID ja luokka? Joo.

691
01:00:16,050 --> 01:00:21,970
Luokka käytetään muotoilu tarkoituksiin.

692
01:00:21,970 --> 01:00:29,120
ID käytetään sitä miltä se kuulostaakin: yksilöi erityinen tekijä.

693
01:00:29,120 --> 01:00:37,610
Joten sisällä HTML-sivun, sinulla voi olla vain 1 elementti erityisesti tunnus.

694
01:00:40,370 --> 01:00:46,120
On vain 1 lomake ID form-lainaus.

695
01:00:46,120 --> 01:00:56,940
Kuitenkin NAV pillereitä luokkaan tai NAV luokka oli luultavasti jotain, että käytit

696
01:00:56,940 --> 01:01:01,380
mahdollisesti tai näki yhteydessä oman Harjoitus 7 koodia.

697
01:01:01,380 --> 01:01:11,340
Luokka käytetään soveltaa erityisesti Muotoillaksesi joukko erilaisia ​​elementtejä.

698
01:01:11,340 --> 01:01:17,580
Esimerkiksi vanhaan HTML ennen oli tyylisivut,

699
01:01:17,580 --> 01:01:21,440
ennen oli CSS, nämä CSS,

700
01:01:21,440 --> 01:01:29,540
jos halusi keskittää kappaleen tai keskittää tekstin div,

701
01:01:29,540 --> 01:01:43,940
sinun on div ja sitten sinun on jotain text-align = "center"

702
01:01:43,940 --> 01:01:51,290
samankaltaisina määrite omassa div.

703
01:01:51,290 --> 01:01:54,490
Tämä ei ole hyvä.

704
01:01:54,490 --> 01:01:57,890
Syystä ihmiset eivät pidä tästä, koska silloin kun halusi päivittää

705
01:01:57,890 --> 01:02:01,960
miten asiat näytetään sivustossasi, sinun piti kirjaimellisesti mennä jokaisella sivulla

706
01:02:01,960 --> 01:02:06,230
ja jokainen HTML-tiedosto ja mennä muuttaa kaikki stylings kaikista eri elementtejä,

707
01:02:06,230 --> 01:02:10,420
ja se oli valtava kipua, koska usein halusi olla nippu divs

708
01:02:10,420 --> 01:02:15,090
jotka kaikki keskustan linjassa tai sovi tietyllä tavalla.

709
01:02:15,090 --> 01:02:18,760
Niinpä ratkaisu, joka oli luokkaa.

710
01:02:18,760 --> 01:02:28,120
Nyt meillä on div, jossa meillä on luokkatarkennetulle olla mitä haluat kutsua sitä.

711
01:02:28,120 --> 01:02:39,160
Voisit kutsua sitä "keskellä" ja sulje div jonnekin tänne

712
01:02:39,160 --> 01:02:42,390
ja sinulla on kaikki hauskaa siellä.

713
01:02:42,390 --> 01:02:47,650
Ja sitten jossain tyylisivuusi voisitte määrittää tietyn muotoilu

714
01:02:47,650 --> 01:02:51,980
jota sovellettaisiin tähän luokkaan.

715
01:02:51,980 --> 01:02:57,280
Tämä ei tarvitse olla ainoa div, joka oli keskittynyt.

716
01:02:57,280 --> 01:03:02,240
Voisit olla muita divs että oli myös keskitettyä tekstiä.

717
01:03:06,580 --> 01:03:09,980
>> Kyllä, Charlotte? >> [Opiskelija] Palataan lainaus, mitä piste tarkoittaa?

718
01:03:09,980 --> 01:03:13,120
Mikä on piste? >> [Opiskelija] Joo.

719
01:03:14,000 --> 01:03:17,900
Takaisin kannettava tietokone, sinun tarkoittaa? >> [Opiskelija] Joo. >> Okei.

720
01:03:17,900 --> 01:03:23,920
[Opiskelija] Esimerkiksi tämä linja ei se tarkoita sitä, etteikö tämä muuttuja nimeltä Val

721
01:03:23,920 --> 01:03:27,730
sisällä muodossa? >> Joo.

722
01:03:27,730 --> 01:03:34,690
Dot merkintä JavaScript ei pari asiaa.

723
01:03:34,690 --> 01:03:43,530
Tässä tapauksessa soitat funktio, jonka nimi on val.

724
01:03:43,530 --> 01:03:45,960
Se tapa.

725
01:03:45,960 --> 01:03:50,150
Tämä on, jos pääsemme olio-kamaa, että puhuimme, Sam.

726
01:03:50,150 --> 01:04:00,840
Tämä on, jos esine - tässä tapauksessa input-elementti - on funktio tai menetelmä nimeltä val

727
01:04:00,840 --> 01:04:10,480
että pohjimmiltaan sanoo, "Hei, aseta arvo on tämä asia."

728
01:04:15,120 --> 01:04:19,050
Kuvittele, että tämän sijasta kapulakieli meillä oli kirjoittanut numeron 7 tai merkkijono 7.

729
01:04:19,050 --> 01:04:23,820
Joka muuttaisi arvo tämän tuloyksikön olevan 7.

730
01:04:23,820 --> 01:04:26,030
[Opiskelija] tulo elementti on kaiken edessä piste?

731
01:04:26,030 --> 01:04:29,190
[Hardison] input-elementti, tarkalleen, on elementtinä HTML,

732
01:04:29,190 --> 01:04:33,230
sisällä DOM, joka vastaa tämän kyselyn.

733
01:04:33,230 --> 01:04:37,150
[Opiskelija] Joten se on input-elementti. Toiminto ja sitten mitä tämän arvon pitäisi olla.

734
01:04:37,150 --> 01:04:39,360
[Hardison] Aivan. >> [Opiskelija] Okei.

735
01:04:39,360 --> 01:04:42,780
Ja voit myös käyttää tätä pääsy ominaisuuksia.

736
01:04:42,780 --> 01:04:47,690
Joten jos katsomme taaksepäin ylös koodin että olimme kävely läpi rivi riviltä

737
01:04:47,690 --> 01:04:54,830
jossa meillä on response.symbols [i]. nimen,

738
01:04:54,830 --> 01:04:58,600
emme vaatii toimia täällä.

739
01:04:58,600 --> 01:05:02,270
Ei ole suluissa.

740
01:05:02,270 --> 01:05:05,220
Yksi asia sinun pitäisi vain pitää mielessä, kun rip läpi tätä koodia,

741
01:05:05,220 --> 01:05:09,860
kun näet suluissa, joka tarkoittaa funktiokutsuna.

742
01:05:09,860 --> 01:05:12,340
Toiminto on nimeltään,

743
01:05:12,340 --> 01:05:15,910
ja nimi, joka tehtävä on mitä edeltää näiden suluissa.

744
01:05:15,910 --> 01:05:21,480
Joten tässä tapauksessa alhaalla, se on val. Tässä tapauksessa täällä se on html.

745
01:05:21,480 --> 01:05:31,700
Tässä tapauksessa täällä funktion nimi on kirjaimellisesti $,

746
01:05:31,700 --> 01:05:35,170
ja me vain tiedämme, että tämä on jQuery valitsin,

747
01:05:35,170 --> 01:05:40,090
Se on tehtävä, joka on valita mitä tämä kaveri on.

748
01:05:40,090 --> 01:05:47,030
Ja sitten kun et näe suluissa, kuten tässä tai täällä,

749
01:05:47,030 --> 01:05:51,690
mitä olet päästä sijaan on kohteen ominaisuuden.

750
01:05:51,690 --> 01:05:53,910
Tämä on kuin käyttämällä array merkintää.

751
01:05:53,910 --> 01:05:59,280
Se on vaihtoehto käyttää array merkintää.

752
01:05:59,280 --> 01:06:02,440
Se on vain pika.

753
01:06:06,680 --> 01:06:17,050
Olemme siis päästä symbolit alalla vasteen esineen.

754
01:06:21,590 --> 01:06:29,160
>> Olemme tehneet paljon Ajax, DOM, joitakin HTML, ei paljon CSS.

755
01:06:29,160 --> 01:06:34,370
Te haluatte viettää viimeisen 15 minuuttia tai niin tästä?

756
01:06:34,370 --> 01:06:37,990
Kai me todella sait noin 10 minuuttia ennen meidän on aloitettava käärimistä.

757
01:06:37,990 --> 01:06:44,190
Vai pitäisikö meidän mennä takaisin ja puhua joistakin muista asioista listallamme?

758
01:06:44,190 --> 01:06:46,800
Katsotaanpa.

759
01:06:46,800 --> 01:06:52,180
Jos menemme takaisin alkuun, meidän siirtyä minun iPad uudelleen niin te voi nähdä tämän,

760
01:06:52,180 --> 01:06:57,840
olemme tehneet paljon Ajax, olemme tehneet joitakin jQuery,

761
01:06:57,840 --> 01:07:00,980
olemme tehneet joitakin JSON, olemme tehneet joitakin XML, olemme tehneet joitakin DOM,

762
01:07:00,980 --> 01:07:05,510
olemme tehneet joitakin - Ehei, ei HTTP. Raapia.

763
01:07:05,510 --> 01:07:10,640
Ei paljon sijaa. Olemme tavallaan puhuneet CSS - Ei oikeastaan.

764
01:07:13,200 --> 01:07:16,540
Onko teillä tuntuu hyvältä Ajax? Haluatko viettää enemmän aikaa Ajax?

765
01:07:16,540 --> 01:07:19,190
Kättä. Okei.

766
01:07:19,190 --> 01:07:22,260
DOM? Joku haluaa viettää enemmän aikaa DOM?

767
01:07:22,260 --> 01:07:26,960
Helpoin tapa todella saada tuntea, mitä tapahtuu ja DOM -

768
01:07:26,960 --> 01:07:34,510
puhutaan DOM ja heittää noin, "Oh, DOM tämä, DOM, että."

769
01:07:34,510 --> 01:07:45,910
Todella DOM on vain tapa kaikki nämä HTML-elementtien säilyvät muistissa.

770
01:07:45,910 --> 01:07:49,310
ja se on vain selittää - sitähän se on.

771
01:07:49,310 --> 01:07:55,700
Se on rakenteeltaan kuin puu, ja voit käyttää yksittäisiä HTML-elementtejä

772
01:07:55,700 --> 01:07:58,850
kanssa jQuery valitsin, että dollarin merkki juttu.

773
01:07:58,850 --> 01:08:02,730
Voit käsitellä asioita. Voit lisätä elementtejä DOM.

774
01:08:02,730 --> 01:08:04,920
Voit lisätä uusi kohta elementin DOM,

775
01:08:04,920 --> 01:08:09,280
voit ottaa pois div elementin DOM jos haluat.

776
01:08:09,280 --> 01:08:15,640
Sitä se on. Se on vain eräänlainen muistoksi edustus HTML-tiedoston.

777
01:08:15,640 --> 01:08:19,430
Se voidaan manipuloida ja kulki.

778
01:08:19,430 --> 01:08:23,240
Entä jQuery ja että valitsin? Kyllä, Sam?

779
01:08:23,240 --> 01:08:28,240
>> [Opiskelija] Tarkoittaako tämä, että DOM sisältää kaikki CSS ja JavaScript?

780
01:08:28,240 --> 01:08:32,729
[Hardison] DOM sisältää ne solmut, kyllä.

781
01:08:32,729 --> 01:08:38,270
[Opiskelija] Se sisältää HTML nämä muut ylimääräiset asiakirjat tuotos?

782
01:08:38,270 --> 01:08:47,250
Jos JavaScript muuttaa HTML kuin se teki tässä Google -

783
01:08:47,250 --> 01:08:50,160
oho, anteeksi, en palaa tähän.

784
01:08:50,160 --> 01:08:55,420
Muista miten JavaScript olisi muuttaa luetteloa Googlen tulos?

785
01:08:55,420 --> 01:09:04,279
Jos JavaScript muuttaa, niin sitten nämä uuden luettelon tekijät ovat nyt osa DOM.

786
01:09:04,279 --> 01:09:06,990
Ne ruiskutetaan DOM.

787
01:09:06,990 --> 01:09:10,109
Ja käy ilmi, että skriptit ja tyylisivut itse

788
01:09:10,109 --> 01:09:11,830
ovat todellakin osa DOM.

789
01:09:11,830 --> 01:09:17,819
Näet täällä, että meillä nämä käsikirjoituksen solmut ja nämä tyyliin solmut.

790
01:09:17,819 --> 01:09:21,800
JavaScript voi lisätä ja poistaa näitä liikaa.

791
01:09:21,800 --> 01:09:25,550
Siksi se on niin paha olla haitallisen JavaScript sivusi

792
01:09:25,550 --> 01:09:30,500
on, että se voi nyt aloittaa tuomalla muita JavaScript muista paikoista.

793
01:09:30,500 --> 01:09:34,080
Joten voit aloittaa vain 1 JavaScript-tiedoston,

794
01:09:34,080 --> 01:09:37,189
mutta sitten se voi alkaa vetää muissa JavaScript-tiedostot.

795
01:09:37,189 --> 01:09:42,330
Voit käyttää Ajax ladata JavaScript ja dynaamisesti on uusi JavaScript

796
01:09:42,330 --> 01:09:45,029
käynnissä Web-sivulla.

797
01:09:45,029 --> 01:09:50,680
Joten se on todella voimakas asia, että meidän selaimet pystyvät eräänlainen jatkuvasti uudelleen tehdä

798
01:09:50,680 --> 01:09:56,280
ja uudelleen sopeutua mitä ollaan tekemässä JavaScript.

799
01:09:58,740 --> 01:10:01,450
>> [Opiskelija] Ne tyyli tunnisteet sisältyvät CSS?

800
01:10:01,450 --> 01:10:04,100
Katsotaanpa sitä. Joo.

801
01:10:04,100 --> 01:10:08,480
Tämä CSS jälleen voit nähdä, missä jQuery sai valitsin alkaen.

802
01:10:08,480 --> 01:10:18,760
Meillä tämä # gb joka sanoi: "Tämä tyyli koskee elementti tunnus gb."

803
01:10:18,760 --> 01:10:24,330
"Elementti ID gb joutuu tämän koko Tekstin tällä fonttiperheen,

804
01:10:24,330 --> 01:10:28,150
"Sans-serif; korkeus."

805
01:10:32,340 --> 01:10:33,650
>> Okei.

806
01:10:33,650 --> 01:10:36,010
Takaisin iPad.

807
01:10:37,330 --> 01:10:40,550
Entä tietorakenteita - yrittää, linkitetyt?

808
01:10:40,550 --> 01:10:44,700
Te haluatte tehdä nopea kertaus, vai te olette tunne -

809
01:10:44,700 --> 01:10:48,940
Niin? Nay? Kuka haluaa tietorakenteita? Nosta kätesi.

810
01:10:48,940 --> 01:10:52,780
Joka vihaa tietorakenteita? >> [Opiskelija] Haluan vain yrittää. >> Haluat vain yrittää.

811
01:10:52,780 --> 01:10:55,120
Okei.

812
01:10:55,120 --> 01:11:00,600
Onko kukaan halua yrittää? Ovatko kaikki kuten, "Vihaan yrittää. Tein sen. Yritin sitä."

813
01:11:00,600 --> 01:11:02,930
[Opiskelija] Haluan vain tietää omega ja iso O.

814
01:11:02,930 --> 01:11:05,600
Okei. Voimme varmasti mennä yli siitä.

815
01:11:05,600 --> 01:11:11,290
Kuulostaako jotain, että haluamme tehdä ryhmänä? Kyllä? Tavallaan? Ei?

816
01:11:11,290 --> 01:11:18,090
>> Entä HTTP? Kuulostaako jotain enemmän ihmiset haluavat tehdä?

817
01:11:18,090 --> 01:11:22,300
Vai oletko sellainen, "Eh." Tehdään HTTP ensin.

818
01:11:24,850 --> 01:11:32,010
Kuinka moni teistä kaverit ovat nähneet Davidin naurettavan mahtava HTTP lyhyt? Anybody?

819
01:11:32,010 --> 01:11:33,950
Olen nähnyt sen koko joukko.

820
01:11:33,950 --> 01:11:37,890
Se oli yksi ensimmäisiä, jotka teimme, ja niin se oli kuin meidän demo tänä kesänä.

821
01:11:37,890 --> 01:11:40,750
Dan on nähnyt se nippu liian, Dan the Man takaisin sinne.

822
01:11:43,150 --> 01:11:50,820
HTTP ja sitten on tämä HTTPS asia, että olemme puhuneet hieman.

823
01:11:50,820 --> 01:11:53,020
Mitä sinun tarvitsee tietää HTTP?

824
01:11:53,020 --> 01:12:00,220
Se on kirjaimellisesti vain protokolla vuorovaikutuksessa web-palvelin.

825
01:12:00,220 --> 01:12:09,860
Kun haluat puhua Google.com, puhut toiseen tietokoneeseen verkon välityksellä,

826
01:12:09,860 --> 01:12:13,670
mitä teet?

827
01:12:13,670 --> 01:12:16,160
Katsotaanpa ehkä tehdä tämän.

828
01:12:16,160 --> 01:12:19,420
Saanen vetää terminaali.

829
01:12:19,420 --> 01:12:21,820
Tässä on minun pikku pääteikkunaa.

830
01:12:21,820 --> 01:12:31,470
Me voimme tehdä jotain telnet, jonka avulla voimme todella alkaa yhteyden Google.com.

831
01:12:31,470 --> 01:12:33,480
Tämä ei ole jotain sinun täytyy tietää,

832
01:12:33,480 --> 01:12:35,830
mutta se on vain havainnollistaa mitä tapahtuu HTTP.

833
01:12:35,830 --> 01:12:42,360
www.google.com, portti 80.

834
01:12:42,360 --> 01:12:44,860
Mitä tämä tekee?

835
01:12:44,860 --> 01:12:49,800
Se tekee Internet-yhteyden minun tietokone ja Google.

836
01:12:49,800 --> 01:12:56,080
Ja se on todella yhteyden 173.194.75.99, joka on joitakin tietokoneen,

837
01:12:56,080 --> 01:13:02,790
Joissakin Google-palvelimen elää jossain luultavasti täällä,

838
01:13:02,790 --> 01:13:05,600
vaikka se voi olla aina takaisin Kaliforniassa.

839
01:13:05,600 --> 01:13:08,320
Nyt olen kytketty.

840
01:13:08,320 --> 01:13:10,810
Okei, siinä kaikki hyvä.

841
01:13:10,810 --> 01:13:15,260
Mutta kun menet Google.com, tyypillisesti odotat Google.com,

842
01:13:15,260 --> 01:13:19,380
joitakin HTML näyttää, eikö? Ei vain tätä.

843
01:13:19,380 --> 01:13:27,740
Ongelmana on haluan sanoa: "Anna minulle GOOGLE.COM" tai mitä tahansa.

844
01:13:27,740 --> 01:13:34,320
Mutta jos sanon, että mitään ei tapahdu.

845
01:13:34,320 --> 01:13:39,210
Itse asiassa, jos osuin Anna pari kertaa, se tulee takaisin ja se sanoo,

846
01:13:39,210 --> 01:13:42,930
"Se oli huono pyynnöstä."

847
01:13:42,930 --> 01:13:46,270
Tämä sanoi: "Ei, ei, ei, ei, ei, ei, ei, ei, ei."

848
01:13:46,270 --> 01:13:51,850
"Et voi vain laittaa tavaraa sisään Sinulla on todellakin puhua HTTP minulle."

849
01:13:51,850 --> 01:13:56,350
"Sinun täytyy muotoilla pyyntöön, koska HTTP-pyynnön, koska GET tai POST

850
01:13:56,350 --> 01:13:58,180
"Tai jotain sellaista."

851
01:13:58,180 --> 01:14:02,040
"Ja sitten palaan oikea HTML sinulle."

852
01:14:02,040 --> 01:14:04,070
Niin näet mitä se antoi minulle tässä asiassa.

853
01:14:04,070 --> 01:14:24,170
Se antoi minulle HTML, että jos voin kopioida sen ja minä TeXturi html, jos laitan sen tänne,

854
01:14:24,170 --> 01:14:33,040
ja minä tallenna se test.html--Älä viitsi.

855
01:14:33,040 --> 01:14:36,010
Web-sivun. Siellä mennään.

856
01:14:36,010 --> 01:14:46,310
Nyt jos avaan Downloads / test.html, nyt se antoi minulle huono -

857
01:14:46,310 --> 01:14:51,640
Se ei aivan tee sitä HTML.

858
01:14:51,640 --> 01:14:54,890
Se näyttää siltä kuin se ei sulje se. Täällä, katsotaanpa.

859
01:15:00,610 --> 01:15:02,900
Ehei. Okei.

860
01:15:02,900 --> 01:15:07,330
Se ei tule tehdä. Anyway, ei tule sen selville.

861
01:15:07,330 --> 01:15:10,080
Mutta joka tapauksessa, mitä se tekee on se palaa minulle HTML,

862
01:15:10,080 --> 01:15:15,800
mutta se sanoo olennaisesti, "Et antanut minulle oikea HTTP-pyynnön."

863
01:15:15,800 --> 01:15:20,810
Joten mitä meidän täytyy tietää HTTP?

864
01:15:20,810 --> 01:15:27,620
Se on tapa muotoilun pyyntöjä web-palvelimia saada tyypillisesti HTML vastauksena.

865
01:15:27,620 --> 01:15:37,050
>> Toinen asia huomata on, että kun teet pyynnön web-palvelimelle,

866
01:15:37,050 --> 01:15:45,650
sinun täytyy myös määrittää HTTP-menetelmä, jota haluat käyttää.

867
01:15:45,650 --> 01:15:48,730
Puhuimme tästä hieman aiemmin, jossa 2 isoa että näemme

868
01:15:48,730 --> 01:15:52,170
ovat GET ja POST.

869
01:15:52,170 --> 01:15:53,710
On myös koko joukko muita vaatimuksia.

870
01:15:53,710 --> 01:15:58,420
On HEAD ja laittaa ja poistaa ja kaikki nämä muut asiat,

871
01:15:58,420 --> 01:16:00,410
mutta GET ja POST ovat 2 tärkeimmät.

872
01:16:00,410 --> 01:16:04,110
Missä näet niitä ilmaantuu? Kun olet kirjoittamassa muotoja.

873
01:16:04,110 --> 01:16:08,000
Kun kirjoitat HTML lomakkeet, sinun täytyy määrittää HTTP menetelmä

874
01:16:08,000 --> 01:16:11,270
jonka haluat, että lomakkeen tiedot lähetetään.

875
01:16:11,270 --> 01:16:15,000
Ja sitten näet sen palvelimen puolella, kun olet kirjoittamassa PHP-koodin

876
01:16:15,000 --> 01:16:19,850
kun käsittelee tietoja ja sinun täytyy katsoa POST superglobal

877
01:16:19,850 --> 01:16:24,860
tai GET superglobal hakea tietoja toimitti käyttäjä.

878
01:16:24,860 --> 01:16:32,900
Ja ero GET ja POST on, että GET muuttaa varsinaisen osoitteen

879
01:16:32,900 --> 01:16:40,890
ja suurimmaksi osaksi näet, mitä parametrit välitetään GET-pyynnön

880
01:16:40,890 --> 01:16:45,580
hyvin helposti vain katsomalla URL, kun taas POST pyynnön

881
01:16:45,580 --> 01:16:52,880
et välittää parametrit pyynnön URL.

882
01:16:52,880 --> 01:16:58,610
Mutta ne eivät ole salattuja tai mitään, ellei aiot HTTPS.

883
01:16:58,610 --> 01:17:02,130
POST parametrit ovat vain osa -

884
01:17:02,130 --> 01:17:05,750
He eivät mene URL, tehokkaasti.

885
01:17:05,750 --> 01:17:10,320
Meillä on taipumus vain sellainen semanttisesti erottaa 2,

886
01:17:10,320 --> 01:17:15,270
joka sanoo vain, että todella voit tehdä saman asian kanssa GET, että voit kanssa POST.

887
01:17:15,270 --> 01:17:20,200
Voit tehdä saman. Se on vain, että käytämme niitä eri tilanteissa.

888
01:17:20,200 --> 01:17:23,330
Käytämme GET kun yritämme vain lukea jotain ja me vain sanovat:

889
01:17:23,330 --> 01:17:24,900
"Anna minulle näitä tietoja."

890
01:17:24,900 --> 01:17:28,670
Ja käytämme POST tyypillisesti, kun yritämme päivittää jotain palvelimelle.

891
01:17:28,670 --> 01:17:31,900
Siksi kun menet Google.com ja olimme tekemässä, että typeahead

892
01:17:31,900 --> 01:17:33,470
näimme kaikki GET

893
01:17:33,470 --> 01:17:36,960
koska olimme kirjaimellisesti vain tietojen noutaminen Google,

894
01:17:36,960 --> 01:17:43,710
ottaa huomioon, että jos teet Facebook seinään postitse aiot käyttää,

895
01:17:43,710 --> 01:17:51,990
todennäköisimmin, HTTP POST-menetelmää lähettää että tiedot ja tehdä tarvittavat muutokset Facebook

896
01:17:51,990 --> 01:17:56,220
teidän seinään, ystäväsi seinään.

897
01:17:56,220 --> 01:17:58,510
Katsotaanpa.

898
01:18:00,360 --> 01:18:10,030
Luulen ero HTTPS on, että se on HTTP mutta salattu.

899
01:18:10,030 --> 01:18:12,960
[Naurahtaa] Secure.

900
01:18:12,960 --> 01:18:16,820
Joo. Ja on paljon hauskoja yksityiskohtia siitä.

901
01:18:18,560 --> 01:18:21,100
>> Kysymyksiä?

902
01:18:21,100 --> 01:18:28,030
Meidän on alettava niputtamiseen, ja niin teemme joitakin tietorakenteita puolella. Charlotte?

903
01:18:28,030 --> 01:18:32,270
[Opiskelija] mitä sisältyy HTTP header-tiedostot isännästä menetelmä

904
01:18:32,270 --> 01:18:35,480
ja menetelmä ja numero? >> Ah.

905
01:18:35,480 --> 01:18:40,060
Paras tapa tarkastella sitä on mennä Network-välilehti

906
01:18:40,060 --> 01:18:48,320
 ja vain nähdä, mitä tapahtuu, kun vain mennä Google.com.

907
01:18:48,320 --> 01:18:55,300
Voit tulla tänne ja voit nähdä kaikki eri HTTP tulleisiin pyyntöihin.

908
01:18:55,300 --> 01:18:58,000
Google.com.

909
01:18:58,000 --> 01:19:02,690
Ensimmäinen oli Yritin mennä Google.com ja se sanoi,

910
01:19:02,690 --> 01:19:05,270
"Voi, Google.com ei todellisuudessa ole olemassa."

911
01:19:05,270 --> 01:19:08,700
"Jos todella haluat mennä on www.google.com."

912
01:19:08,700 --> 01:19:10,010
Joten sain ohjataan täällä.

913
01:19:10,010 --> 01:19:13,020
Siellä sain tämän 301 sitten sain 200 OK.

914
01:19:13,020 --> 01:19:17,240
Joten mikä on täällä, teidän otsikot?

915
01:19:17,240 --> 01:19:21,840
Se sanoo, että tämä on URL, johon tein pyynnöstä pyynnön menetelmä,

916
01:19:21,840 --> 01:19:24,550
ja sitten tilan koodi.

917
01:19:24,550 --> 01:19:26,070
Ne ovat 3 biggies.

918
01:19:26,070 --> 01:19:30,190
Muita asioita täällä, evästeet,

919
01:19:30,190 --> 01:19:37,130
evästeet ovat kätevä miettiminen istunnon, jos joku on kirjautunut tai ei.

920
01:19:37,130 --> 01:19:42,010
Ne ovat myös kätevä seurata ihmisiä. Näin sivustot seurata sinua koko paikka.

921
01:19:42,010 --> 01:19:44,620
He laittoivat evästeitä tietokoneellesi.

922
01:19:44,620 --> 01:19:48,320
Heidät on koulutettu tunnistamaan muut sivustot evästeitä, jos he voivat.

923
01:19:48,320 --> 01:19:52,640
Ja sitten on tämä muita juttuja, että sanoo User Agent täällä.

924
01:19:52,640 --> 01:19:57,490
Tämä user agent string tunnistaa tietokoneeni Google.com ja sanoo,

925
01:19:57,490 --> 01:20:03,010
"Google.com, juuri niin tiedät, jotkut jätkä juoksentelee tässä selaimessa

926
01:20:03,010 --> 01:20:08,050
"Intel Mac 10_8_2 vain meni Google.com."

927
01:20:08,050 --> 01:20:12,560
Ja sitten nämä Hyväksy asiat vain sanoa: "Mikä on minun tietokone,

928
01:20:12,560 --> 01:20:14,590
"Mikä on minun web-selain valmis hyväksymään?"

929
01:20:14,590 --> 01:20:20,900
Se voi hyväksyä HTML, se voi hyväksyä XML, tämä kaikki muut jutut.

930
01:20:20,900 --> 01:20:24,310
Millaisia ​​merkkikoodausten se hyväksyy?

931
01:20:24,310 --> 01:20:30,030
Se hyväksy gzipattu pakattu kamaa?

932
01:20:30,030 --> 01:20:36,120
Joskus sivustot pakkaa asioita tehdä sen nopeammin lähettää verkon yli.

933
01:20:36,120 --> 01:20:38,580
>> Cool. Selvä.

934
01:20:38,580 --> 01:20:44,460
Mielestäni se nyt. Suljemme alas, mutta minä pysyn kysymyksiä.

935
01:20:44,460 --> 01:20:47,000
>> [CS50.TV]