1
00:00:00,000 --> 00:00:04,439

2
00:00:04,439 --> 00:00:07,230
Doug LLOYD: Šajā video, mēs vēlējāmies
lai izsauktu atsevišķu uzmanību

3
00:00:07,230 --> 00:00:09,110
ļoti īpaši
JavaScript elements

4
00:00:09,110 --> 00:00:11,350
ka jūs varētu atrast parocīgs
ja jūs, sākot

5
00:00:11,350 --> 00:00:15,750
strādāt pie manipulējot tīmekļa lapas un
mainot saturu jūsu mājas lapā

6
00:00:15,750 --> 00:00:16,460
par lidot.

7
00:00:16,460 --> 00:00:19,450
Un tas ir jēdziens
Dokumentu Object Model.

8
00:00:19,450 --> 00:00:23,030
Tātad, kā mēs redzējām mūsu video par
JavaScript, objekti ir ļoti elastīga.

9
00:00:23,030 --> 00:00:24,750
>> Un tie var saturēt dažādas jomas.

10
00:00:24,750 --> 00:00:28,075
Un, lai gan mums nebija iedziļināties daudz
detaļām, šie lauki vai īpašības,

11
00:00:28,075 --> 00:00:30,200
ka mēs, iespējams, vairāk
attiecīgi viņiem piezvanīt

12
00:00:30,200 --> 00:00:33,915
saistībā ar objekta, pat
šie īpašumi var būt citi objekti.

13
00:00:33,915 --> 00:00:36,210
Un iekšpusē tiem objektiem
var būt citi objekti.

14
00:00:36,210 --> 00:00:39,630
>> Jums ir šī ļoti liels objektu
ar daudziem citiem objektiem

15
00:00:39,630 --> 00:00:43,550
iekšpusē no tā, kāda veida
rada šo ideju par lielu koku.

16
00:00:43,550 --> 00:00:47,540
Tagad, dokuments objekts ir
ļoti īpašs objekts JavaScript

17
00:00:47,540 --> 00:00:52,580
kas organizē visu savu web
lapa ar šāda veida jumta

18
00:00:52,580 --> 00:00:53,470
no objekta.

19
00:00:53,470 --> 00:00:56,770
Un tā iekšpusē no dokumenta
objekts ir objekti, kas rada

20
00:00:56,770 --> 00:00:59,630
galvas un ķermeņa jūsu mājas lapā.

21
00:00:59,630 --> 00:01:03,760
>> Inside no tiem ir citi
objekti, un tā tālāk, un tā tālāk,

22
00:01:03,760 --> 00:01:08,411
līdz visa jūsu mājas lapa ir
tika organizēta šo lielo objektu.

23
00:01:08,411 --> 00:01:09,660
Kas ir otrādi šeit, vai ne?

24
00:01:09,660 --> 00:01:12,170
Nu, mēs zinām, kā strādāt
ar objektu JavaScript.

25
00:01:12,170 --> 00:01:15,840
>> Tātad, ja mums ir objekts, kas
attiecas uz visu mūsu mājas lapā, ka

26
00:01:15,840 --> 00:01:19,590
nozīmē, zvanot pareizs
metodes, lai manipulēt šo objektu

27
00:01:19,590 --> 00:01:22,360
vai grozot pārliecināts
tās īpašības, mēs

28
00:01:22,360 --> 00:01:25,500
var mainīt elementus
Mūsu lapa programmiski

29
00:01:25,500 --> 00:01:30,210
izmantojot JavaScript vietā,
kodēt lietas ar, teiksim, HTML.

30
00:01:30,210 --> 00:01:33,760
Tātad, šeit ir piemērs
ļoti vienkārša mājas lapa, vai ne?

31
00:01:33,760 --> 00:01:35,850
Tas ieguva HTML tagus, galvu.

32
00:01:35,850 --> 00:01:37,979
>> Iekšpusē ir virsraksts, hello world.

33
00:01:37,979 --> 00:01:38,770
Tad man ir ķermeni.

34
00:01:38,770 --> 00:01:40,686
Iekšpusē, ka man ir
trīs dažādas lietas.

35
00:01:40,686 --> 00:01:44,170
Man ir H2 header tag,
rindkopa, un saikne.

36
00:01:44,170 --> 00:01:45,920
Tas ir ļoti vienkāršs mājas lapa.

37
00:01:45,920 --> 00:01:48,590
>> Nu, ko varētu dokuments
iebilst šim izskatās?

38
00:01:48,590 --> 00:01:50,700
Nu, tas ir nedaudz
biedējošu varbūt sākumā.

39
00:01:50,700 --> 00:01:52,510
Bet tas ir tiešām tikai liels koks.

40
00:01:52,510 --> 00:01:54,890
Un tajā pašā saknē tā ir dokuments.

41
00:01:54,890 --> 00:02:00,030
>> Iekšpusē dokuments ir vēl viens
objekts atsaucoties uz HTML manu lapu.

42
00:02:00,030 --> 00:02:02,660
Un HTML mana lapa ir viss.

43
00:02:02,660 --> 00:02:06,900
Un tad iekšpusē HTML
objekts, man ir galvas objektu,

44
00:02:06,900 --> 00:02:09,000
kas attiecas uz visu tur.

45
00:02:09,000 --> 00:02:11,009
>> Un iekšā tur,
Man ir virsraksts objektu.

46
00:02:11,009 --> 00:02:15,620
Un iekšā tur, man ir cits
iebilst, ka ir tikai hello world.

47
00:02:15,620 --> 00:02:18,020
Es varētu būt manu ķermeni
pārstāvēta kā šis.

48
00:02:18,020 --> 00:02:22,850
>> Iekšpusē manu ķermeni, man ir H2
objekts un p objekts punktā

49
00:02:22,850 --> 00:02:25,270
un A objekts saiti.

50
00:02:25,270 --> 00:02:29,660
Un tā tas viss hierarhija
var attēlot kā liels koks

51
00:02:29,660 --> 00:02:31,990
ar daudz mazāku Little
lietas nāk no tā.

52
00:02:31,990 --> 00:02:33,740
Tagad, protams, kad
mēs programmēšana, mēs

53
00:02:33,740 --> 00:02:35,560
nedomāju, ka par lietām, piemēram, lielu koku.

54
00:02:35,560 --> 00:02:37,980
Mēs vēlamies redzēt faktisko
kods saistītas lietas.

55
00:02:37,980 --> 00:02:40,790
>> Un par laimi, mēs varam
izmantot mūsu izstrādātāju rīkus

56
00:02:40,790 --> 00:02:46,080
faktiski to apskatīt
Šī mājas lapa ir dokuments objekts.

57
00:02:46,080 --> 00:02:48,150
Un pieņemsim darīt.

58
00:02:48,150 --> 00:02:49,580
Tāpēc es esmu atvērusi pārlūka cilni.

59
00:02:49,580 --> 00:02:51,540
>> Un es esmu atvēra izstrādātāja rīki.

60
00:02:51,540 --> 00:02:54,460
Un manā video par JavaScript, I
minēja, ka konsole nav

61
00:02:54,460 --> 00:02:56,770
tikai kaut kur, kur
mēs izdrukāt informāciju,

62
00:02:56,770 --> 00:02:59,560
tā ir arī vieta, kur
mēs varam ievades informāciju.

63
00:02:59,560 --> 00:03:01,380
Šajā kontekstā, ko
Es esmu gatavojas teikt, ir

64
00:03:01,380 --> 00:03:05,720
Es vēlētos saņemt atpakaļ
Dokumentā objekti,

65
00:03:05,720 --> 00:03:07,502
lai es varētu sākt, lai apskatīt to.

66
00:03:07,502 --> 00:03:08,460
Tātad, kā es varētu darīt?

67
00:03:08,460 --> 00:03:10,740
Nu, ja es gribu
organizēt to tiešām labi,

68
00:03:10,740 --> 00:03:16,317
Es esmu gatavojas teikt console.dir, D-I-R.
Tagad, es izmantot console.log lai tikai drukāt

69
00:03:16,317 --> 00:03:17,400
ārā kaut kas ļoti vienkāršs.

70
00:03:17,400 --> 00:03:20,450
Bet, ja es gribu, lai organizētu šo
hierarhiski tāpat objektu,

71
00:03:20,450 --> 00:03:23,800
Es gribu to veida strukturētas
kā direktoriju struktūru.

72
00:03:23,800 --> 00:03:27,400
>> Tāpēc es gribu console.dir dokumentu.

73
00:03:27,400 --> 00:03:28,430
Es esmu gatavojas hit Enter.

74
00:03:28,430 --> 00:03:32,350
Un tieši zem tā tagad,
un es ņemšu tuvinātu šeit,

75
00:03:32,350 --> 00:03:36,000
Man šī atbilde dokumentu
ar nelielu bultiņu blakus tai.

76
00:03:36,000 --> 00:03:39,470
Tagad, kad es atvērt šo bultiņas,
tur būs daudz sīkumi.

77
00:03:39,470 --> 00:03:42,560
>> Bet mēs esam gatavojas ignorēt daudz
no tā un tikai veida uzmanības centrā

78
00:03:42,560 --> 00:03:46,250
par svarīgākajiem daļa, tāpēc mēs
var sākt, lai virzītos šo dokumentu.

79
00:03:46,250 --> 00:03:50,125
Tur ir daudz vairāk, lai DOM nekā
tikai mātes mezgli un bērnu mezgli.

80
00:03:50,125 --> 00:03:51,500
Tur ir daudz papildu sīkumi.

81
00:03:51,500 --> 00:03:52,280
>> Tāpēc es esmu gatavojas atvērt šo augšu.

82
00:03:52,280 --> 00:03:54,610
Un tur ir visai daudz
sīkumi, kas NOP augšu.

83
00:03:54,610 --> 00:03:59,000
Bet viss, man rūp, ir
tieši šeit, bērnu mezgli.

84
00:03:59,000 --> 00:04:00,410
Atvērsim ka līdz.

85
00:04:00,410 --> 00:04:03,810
>> Iekšpusē tur es redzu
kaut kas pazīstams, HTML.

86
00:04:03,810 --> 00:04:07,670
Tātad iekšpusē mūsu dokumenta
vienu līmeni uz leju, HTML.

87
00:04:07,670 --> 00:04:08,550
Es atveru, ka līdz.

88
00:04:08,550 --> 00:04:10,380
Ko mēs sagaidām?

89
00:04:10,380 --> 00:04:13,760
>> Ja jūs atceraties no mūsu diagrammas,
Ko mums vajadzētu atrast iekšpusē HTML?

90
00:04:13,760 --> 00:04:17,275
Kādi divi mezgli ir zem tā kokā?

91
00:04:17,275 --> 00:04:17,899
Let 's uzzināt.

92
00:04:17,899 --> 00:04:18,940
Mēs atvērt HTML.

93
00:04:18,940 --> 00:04:22,079
Mēs ejam uz leju, lai savu bērnu mezgliem.

94
00:04:22,079 --> 00:04:23,440
>> Pop ka atvērtas.

95
00:04:23,440 --> 00:04:25,990
Tur ir galvas un ķermeņa.

96
00:04:25,990 --> 00:04:28,540
Un mēs varam atvērt galvu.

97
00:04:28,540 --> 00:04:30,460
Dodieties uz savu bērnu mezgliem.

98
00:04:30,460 --> 00:04:31,460
Nu, tur ir nosaukums.

99
00:04:31,460 --> 00:04:33,293
>> Un mēs varētu iet tālāk un
kā šis uz visiem laikiem.

100
00:04:33,293 --> 00:04:34,770
Mēs varētu darīt ar ķermeni, kā arī.

101
00:04:34,770 --> 00:04:40,090
Bet tur ir veids, kā mēs apskatīt
dokuments organizēta kā liels objekts.

102
00:04:40,090 --> 00:04:42,610
Un, ja mēs skatāmies, ir liels
objekts, kas izskatās daudz

103
00:04:42,610 --> 00:04:47,480
tāpat kodu, tas nozīmē, ka mēs varam sākt
manipulēt šo lielo objektu, izmantojot

104
00:04:47,480 --> 00:04:51,220
kodu, lai mainītu to, ko mūsu
mājas lapa izskatās un jūtas līdzīgi.

105
00:04:51,220 --> 00:04:54,920
>> Tātad tas ir diezgan spēcīgs instruments
mums ir mūsu rīcībā tagad.

106
00:04:54,920 --> 00:04:57,360
Tātad, kā mēs tikko redzēju, tad
dokuments objekts pati

107
00:04:57,360 --> 00:05:01,392
un visus objektus iekšpusē no tā
ir īpašības un metodes, tikai

108
00:05:01,392 --> 00:05:04,100
tāpat kā jebkuru citu objektu, kas mēs esam
strādājusi ar JavaScript.

109
00:05:04,100 --> 00:05:08,370
Bet mēs varam izmantot šīs īpašības un
izmantot tādas pašas metodes, lai sakārtotu un urbt uz leju

110
00:05:08,370 --> 00:05:10,900
no lielā dokumenta un saņemt
zemāk un zemāk un zemāk,

111
00:05:10,900 --> 00:05:13,360
smalkāka un smalkāka graudi
detalizācijas, kamēr mēs

112
00:05:13,360 --> 00:05:17,510
nokļūt uz ļoti konkrētu gabalu mūsu
mājas lapa, kas mēs vēlamies mainīt.

113
00:05:17,510 --> 00:05:22,700
>> Un, kad mēs atjaunināt īpašībām
Dokumenta mērķis vai zvaniet šīs metodes,

114
00:05:22,700 --> 00:05:24,450
lietas varētu notikt mūsu mājas lapā.

115
00:05:24,450 --> 00:05:28,420
Un mums nav jādara kādu atsvaidzinošu
lai šīs izmaiņas stātos spēkā.

116
00:05:28,420 --> 00:05:33,160
>> Un tas ir diezgan foršs spēja
ir tad, kad mēs strādājam ar kodu.

117
00:05:33,160 --> 00:05:37,185
Tātad, kādi ir daži no šiem īpašumiem
kas ir daļa no dokumenta objektu?

118
00:05:37,185 --> 00:05:40,100
Nu, jūs, iespējams, redzēja
pāris no viņiem tiešām ātri

119
00:05:40,100 --> 00:05:42,700
kā mēs zipping
caur milzu dokumentu

120
00:05:42,700 --> 00:05:45,150
objekts mēs tikko redzējām interneta pārlūku.

121
00:05:45,150 --> 00:05:48,420
>> Bet pāris no šiem īpašumiem
varētu būt lietas, piemēram, iekšējo HTML.

122
00:05:48,420 --> 00:05:52,950
Un jūs pat varētu atcerēties mani
izmantojot šo JavaScript video

123
00:05:52,950 --> 00:05:54,950
pašās beigās, kad es
runāja par notikumiem.

124
00:05:54,950 --> 00:05:56,125
Kas bija šis iekšējais HTML?

125
00:05:56,125 --> 00:05:59,030
Nu, tas ir tieši tas, kas ir
starp tagiem.

126
00:05:59,030 --> 00:06:01,590
>> Un tā iekšējais HTML,
piemēram, no nosaukuma

127
00:06:01,590 --> 00:06:05,390
tag, ja mēs būtu tur dodas
ka piemēram pirms brīža,

128
00:06:05,390 --> 00:06:08,020
būtu bijis hello world.

129
00:06:08,020 --> 00:06:10,140
Tas bija nosaukums mūsu lapā.

130
00:06:10,140 --> 00:06:12,370
Citi īpašumi
ietver mezgla nosaukums, kurā

131
00:06:12,370 --> 00:06:15,810
ir nosaukums HTML
elements, piemēram, nosaukumu.

132
00:06:15,810 --> 00:06:19,100
ID, kas ir ID
atribūts HTML elementa.

133
00:06:19,100 --> 00:06:23,790
>> Atgādināt, ka mēs varam speciāli norādīt
specifiski elementi mūsu HTML

134
00:06:23,790 --> 00:06:27,510
ar ID atribūtu, kas parasti
nāk ērts kontekstā CSS,

135
00:06:27,510 --> 00:06:29,000
konkrēti.

136
00:06:29,000 --> 00:06:33,217
Parent mezgls, kas ir atsauces uz
kas ir tikai līdz virs manis DOM.

137
00:06:33,217 --> 00:06:35,800
Un bērnu mezglus, kas ir
norāde uz to, kas ir uz leju, zem manis.

138
00:06:35,800 --> 00:06:37,950
Un mēs redzējām daudz kas
tikai skatoties caur.

139
00:06:37,950 --> 00:06:42,970
Bērnu mezgli, tas ir, kā mēs saņēmām
zemāk un zemāk kokā.

140
00:06:42,970 --> 00:06:46,590
>> Atribūti, tas ir tikai masīvs
no atribūti HTML elementa.

141
00:06:46,590 --> 00:06:50,270
Tātad piemērs atribūtiem varētu
būt, ja jums ir attēla tagu,

142
00:06:50,270 --> 00:06:54,090
tas parasti ir avota atribūtu,
varbūt augstums un platums atribūts.

143
00:06:54,090 --> 00:06:57,120
Un lai būtu vienkārši masīvs
no visiem atribūtiem, kas saistīti

144
00:06:57,120 --> 00:06:59,300
ar šo HTML elements.

145
00:06:59,300 --> 00:07:04,140
>> Stils ir vēl viens, kas
tas pārstāv CSS

146
00:07:04,140 --> 00:07:06,050
stils konkrēta elementa.

147
00:07:06,050 --> 00:07:08,310
Un vēlāk šajā
video, mēs īpaši

148
00:07:08,310 --> 00:07:14,592
sviras stils izdarīt pāris
par izmaiņām mūsu mājas lapā.

149
00:07:14,592 --> 00:07:15,800
Tātad tie ir dažas īpašības.

150
00:07:15,800 --> 00:07:17,591
>> Un tur ir arī daži
metodes, ka mēs varam

151
00:07:17,591 --> 00:07:22,450
izmantot, lai arī ātrāk varbūt izolēt
elementi dokumenta objekts.

152
00:07:22,450 --> 00:07:26,730
Iespējams, visvairāk universāls
no tām ir getElementById.

153
00:07:26,730 --> 00:07:31,190
Tāpēc es varētu teikt kaut ko līdzīgu, jo
Atcerieties, tas ir metode Dokumenta

154
00:07:31,190 --> 00:07:34,880
Objekta, document.getElementById.

155
00:07:34,880 --> 00:07:39,820
>> Un iekšpusē no tiem iekavās, norādiet
HTML elements ar īpašu ID

156
00:07:39,820 --> 00:07:42,330
atribūtika, ka es esmu iepriekš
noteikts, un es uzreiz

157
00:07:42,330 --> 00:07:46,685
iet labi uz šī elementa
no kopējā tīmekļa vietnē.

158
00:07:46,685 --> 00:07:49,310
Tāpēc man nav varbūt urbt
lejup pa katru slāni.

159
00:07:49,310 --> 00:07:52,841
Es varu tikai izmantot šo metodi, lai atrastu to,
veida, piemēram, siltuma Meklēju raķete,

160
00:07:52,841 --> 00:07:53,340
labi?

161
00:07:53,340 --> 00:07:56,300
Tā vienkārši iet un atrod
tieši to, ko tas meklē.

162
00:07:56,300 --> 00:07:59,290
>> GetElementsByTagName ir
ļoti līdzīgs garā.

163
00:07:59,290 --> 00:08:02,500
Varbūt tas varētu atrast visus šos
Bold tagus vai visi p tagus

164
00:08:02,500 --> 00:08:05,920
un dod man masīvu visu
ka es varētu pēc tam strādāt.

165
00:08:05,920 --> 00:08:12,080
appendChild piebilst kaut ko
vienu līmeni uz leju kokā.

166
00:08:12,080 --> 00:08:16,440
>> Tāpēc es varu pievienot visu jauno
elements vienu līmeni zemāk.

167
00:08:16,440 --> 00:08:19,700
Vai es varu noņemt elementu, kas ir
vienu līmeni zemāk, kā arī tad, ja es gribu

168
00:08:19,700 --> 00:08:22,870
dzēst kaut ko no manas mājas lapā.

169
00:08:22,870 --> 00:08:28,480
Tagad, ātri kodēšanas piezīmi un ātri
galvassāpes ietaupot zināšanai, cerams.

170
00:08:28,480 --> 00:08:31,670
>> getElementById-- D ir mazie.

171
00:08:31,670 --> 00:08:36,950
Es nevaru pateikt, cik reizes man ir
Lietota getElementById un kapitalizēti

172
00:08:36,950 --> 00:08:38,336
D tur.

173
00:08:38,336 --> 00:08:39,460
Jo tas tiešām bieži.

174
00:08:39,460 --> 00:08:42,990
Ja mēs rakstīt vārdu ID, tas ir
Parasti kapitāls I kapitāls D.

175
00:08:42,990 --> 00:08:44,240
Un mans kods vienkārši nedarbojas.

176
00:08:44,240 --> 00:08:45,630
Un es nevaru saprast, kāpēc.

177
00:08:45,630 --> 00:08:49,490
Tas ir ļoti, ļoti, ļoti
kopējā bug, ka visi dara,

178
00:08:49,490 --> 00:08:51,890
pat eksperti, kas ir
darot visiem laikiem.

179
00:08:51,890 --> 00:08:55,410
Tik vienkārši ir jāapzinās, getElementById,
ka d ir mazajiem burtiem.

180
00:08:55,410 --> 00:09:00,080
Un cerams, ka ietaupa jums vairākas
minūtes vismaz sirdssāpes.

181
00:09:00,080 --> 00:09:02,204
>> Tātad, ko tas viss mums pateikt?

182
00:09:02,204 --> 00:09:03,120
Mums ir šīs metodes.

183
00:09:03,120 --> 00:09:04,161
Mums ir šīs īpašības.

184
00:09:04,161 --> 00:09:06,610
Tagad, ja mēs sākam no
dokuments, dokuments.

185
00:09:06,610 --> 00:09:10,220
neatkarīgi, mēs tagad var nokļūt uz jebkuru
viens gabals no mūsu mājas lapas

186
00:09:10,220 --> 00:09:14,870
ka mēs gribam, lai, izmantojot JavaScript
vienkārši zvanot šīs metodes

187
00:09:14,870 --> 00:09:19,940
un piesaistot īpašības
ka mēs atrast dažādās vietās.

188
00:09:19,940 --> 00:09:24,890
>> To var saņemt izplūdis, tas
document.getElementById,

189
00:09:24,890 --> 00:09:28,560
varbūt ir sena taga nosaukumu,
varbūt jums darīt vairāk zvanu vēlāk.

190
00:09:28,560 --> 00:09:31,230
Lietas var iegūt mazliet izplūdis.

191
00:09:31,230 --> 00:09:34,480
Un kā programmētāji, kā jūs esat
iespējams, redzējuši daudzi no šiem videoklipiem,

192
00:09:34,480 --> 00:09:36,600
mums nepatīk izplūdis lietas.

193
00:09:36,600 --> 00:09:38,520
>> Mēs vēlētos, lai varētu darīt lietas ātri.

194
00:09:38,520 --> 00:09:42,640
Tādēļ mēs vēlētos vairāk
kodolīgs veids, kā kaut ko pateikt.

195
00:09:42,640 --> 00:09:46,270
Tātad šāda veida noved pie
jēdziens kaut ko sauc jQuery.

196
00:09:46,270 --> 00:09:49,170
Tagad jQuery nav JavaScript.

197
00:09:49,170 --> 00:09:50,350
Tas nav daļa no JavaScript.

198
00:09:50,350 --> 00:09:54,790
>> Tas ir bibliotēka, kas bija rakstīts
daži JavaScript programmētāji

199
00:09:54,790 --> 00:09:57,060
aptuveni pirms 10 gadiem.

200
00:09:57,060 --> 00:10:01,300
Un tās mērķis ir vienkāršot šo to, kas ir
sauc klienta puses skriptu, kas

201
00:10:01,300 --> 00:10:04,310
būtībā tas, ko mēs bijām tikko
runājam ar DOM manipulācijām.

202
00:10:04,310 --> 00:10:11,090
Un tāpēc, ja es gribēju, lai mainītu
fona krāsa manā mājas lapā, varbūt

203
00:10:11,090 --> 00:10:11,980
īpašs Div.

204
00:10:11,980 --> 00:10:15,325
>> Lūk, es esmu acīmredzot kļūst
ElementById colorDiv.

205
00:10:15,325 --> 00:10:16,950
Un es gribu, lai uzstādītu savu fona krāsu.

206
00:10:16,950 --> 00:10:20,720
Ja es esmu tikai izmantojot tīru JavaScript
izmantojot dokumenta objekta modelis,

207
00:10:20,720 --> 00:10:23,990
tas ir daudz sīkumi, vai ne?
document.getElementById

208
00:10:23,990 --> 00:10:25,531
colorDiv.style.backgroundColor = zaļš.

209
00:10:25,531 --> 00:10:27,260

210
00:10:27,260 --> 00:10:28,050
>> Whew.

211
00:10:28,050 --> 00:10:30,110
Tas bija daudz ko teikt.

212
00:10:30,110 --> 00:10:31,720
Tas ir daudz rakstīt, too.

213
00:10:31,720 --> 00:10:35,760
Un tāpēc, jQuery, mēs varam varbūt teikt
Tas mazliet vairāk lakoniski.

214
00:10:35,760 --> 00:10:39,350
Tirdzniecības off pagaidām tas ir varbūt nedaudz
nedaudz vairāk mistisks visi pēkšņi,

215
00:10:39,350 --> 00:10:39,850
labi?

216
00:10:39,850 --> 00:10:43,580
>> Vismaz ilgi ir nedaudz vairāk
paskaidrojumiem par to, ko mēs darām.

217
00:10:43,580 --> 00:10:49,947
Šis dolāra zīme, iekavas,
single quote, hash, colorDiv, vai ne?

218
00:10:49,947 --> 00:10:50,780
Ko tas nozīmē?

219
00:10:50,780 --> 00:10:53,640
Nu, tas ir būtībā tikai
document.getElementById colorDiv.

220
00:10:53,640 --> 00:10:58,700
>> Bet tas ir šāda veida stenogrāfija
veids, kā darīt to, izmantojot jQuery.

221
00:10:58,700 --> 00:11:01,380
Pieņemsim tikai to apskatīt tagad
pie pāris dažādos veidos

222
00:11:01,380 --> 00:11:04,520
ka es varētu tiešām
izmantojiet šo dokumentu objektu

223
00:11:04,520 --> 00:11:06,807
Modelis manipulēt gabalus manā vietā.

224
00:11:06,807 --> 00:11:09,140
Jo īpaši, mēs ejam
kas strādā manipulējot

225
00:11:09,140 --> 00:11:14,090
krāsa konkrēts
Div, colorDiv, uz mājas lapā.

226
00:11:14,090 --> 00:11:15,299
Tātad, pieņemsim to apskatīt, kas.

227
00:11:15,299 --> 00:11:15,798
Viss kārtībā.

228
00:11:15,798 --> 00:11:16,700
Tāpēc es esmu lapā.

229
00:11:16,700 --> 00:11:20,750
To sauc test.html kad jūs lejupielādēt
šo, ja jūs vēlaties, lai lāpīt ar to.

230
00:11:20,750 --> 00:11:24,730
Un es esam ieguvuši ķekars
pogas uz šo lapu.

231
00:11:24,730 --> 00:11:27,730
Un es saku individuālas funkcijas
fona krāsa, violeta, zaļa,

232
00:11:27,730 --> 00:11:31,330
oranža, sarkana, zila, viena funkcija
fona krāsu, notikumu apdarinātājs

233
00:11:31,330 --> 00:11:34,360
fona krāsu, un, izmantojot jQuery.

234
00:11:34,360 --> 00:11:38,147
Ko es runāju par
kad es esmu to izdarīt?

235
00:11:38,147 --> 00:11:39,230
Tātad mēs esam redzējuši pogas.

236
00:11:39,230 --> 00:11:41,521
Tagad, pieņemsim to apskatīt
daži pirmkodu šeit.

237
00:11:41,521 --> 00:11:44,770
Mēs sāksim ar test.html.

238
00:11:44,770 --> 00:11:48,100
Tāpēc atsevišķas funkcijas fona
krāsa ir tas, ko es esmu drukāti šeit.

239
00:11:48,100 --> 00:11:49,350
Ļaujiet man ritināt mazliet.

240
00:11:49,350 --> 00:11:56,170

241
00:11:56,170 --> 00:11:58,820
>> Un jūs pamanīsiet, ka es
ir definēts šīs pogas

242
00:11:58,820 --> 00:12:03,990
pateikt, kad šī poga ir noklikšķinājuši,
zvanu funkciju griezties violeta.

243
00:12:03,990 --> 00:12:06,670
Ja šī poga ir noklikšķiniet, drīzāk,
zvanu funkcija kļūst zaļas,

244
00:12:06,670 --> 00:12:08,710
savukārt oranžs, sarkans, savukārt zilā krāsā.

245
00:12:08,710 --> 00:12:11,880
Jūs varat droši uzminēt, ka šis
varbūt nav labākais dizains

246
00:12:11,880 --> 00:12:12,460
sajūta, vai ne?

247
00:12:12,460 --> 00:12:16,490
>> Būtu jauki, ja es varētu
ir daudz vispārēju pieeju.

248
00:12:16,490 --> 00:12:19,570
Nu, vispirms mēs ņemšu apskatīt
at kādi ir šie pieci funkcijas

249
00:12:19,570 --> 00:12:24,400
document.getElementById
colorDiv.style.background = violeta,

250
00:12:24,400 --> 00:12:27,250
zaļa, oranža, sarkana,
un zilā, attiecīgi.

251
00:12:27,250 --> 00:12:30,930
Tātad, nav īpaši labākais dizains.

252
00:12:30,930 --> 00:12:33,390
>> Nākamais kopums pogas
Man ir, es esmu uzrakstījis

253
00:12:33,390 --> 00:12:36,380
viena funkcija sauc
mainīt krāsu, kas acīmredzot

254
00:12:36,380 --> 00:12:38,960
akceptē virkni kā savu argumentu.

255
00:12:38,960 --> 00:12:40,290
Tātad tas ir mazliet labāk.

256
00:12:40,290 --> 00:12:43,840
Purple, zaļa, oranža, sarkana,
blue tagad ir arguments.

257
00:12:43,840 --> 00:12:46,230
Tāpēc es esmu uzrakstījis vispārīgāka
case JavaScript funkcija,

258
00:12:46,230 --> 00:12:47,771
kas varētu izskatīties kaut kas līdzīgs šim.

259
00:12:47,771 --> 00:12:48,680
Es esmu garāmejot.

260
00:12:48,680 --> 00:12:52,090
Šī funkcija izmaiņas krāsa
gaidījis argumentu sauc krāsu.

261
00:12:52,090 --> 00:12:54,970
Un es saku iestatītu
fona krāsu uz krāsu.

262
00:12:54,970 --> 00:12:58,390
Tātad, šeit ir tas, ko es esam ieguvuši šeit.

263
00:12:58,390 --> 00:12:59,770
Tātad tas ir mazliet labāk.

264
00:12:59,770 --> 00:13:02,740
>> Bet es varētu būt iespēja
darīt labāk nekā to.

265
00:13:02,740 --> 00:13:06,140
Ja mēs ejam uz leju, lai to apskatīt
pie notikumu apdarinātājs situāciju,

266
00:13:06,140 --> 00:13:07,860
tagad visas šīs zvani izskatās vienādi.

267
00:13:07,860 --> 00:13:10,340
Ja jūs atceraties par mūsu
diskusija par notikumu apstrādes,

268
00:13:10,340 --> 00:13:15,770
Es varu saņemt informāciju par kura no
Šīs pogas ir uzklikšķināt un izmantot to.

269
00:13:15,770 --> 00:13:19,560
>> Un tā event.JavaScript, es esmu
rakstīts mainīt krāsu notikums, kas

270
00:13:19,560 --> 00:13:21,110
skaitļi, kas poga tika uzklikšķināt.

271
00:13:21,110 --> 00:13:23,250
Tas ir sprūda objekts līnija.

272
00:13:23,250 --> 00:13:25,240
Un tad šeit, tā kļūst patiešām izplūdis.

273
00:13:25,240 --> 00:13:27,420
Bet ko es daru, ir es esmu
Nosakot fona

274
00:13:27,420 --> 00:13:30,340
krāsu triggerObject inner.HTML.

275
00:13:30,340 --> 00:13:34,170
Tas ir teksts
starp pogu tagiem.

276
00:13:34,170 --> 00:13:36,500
>> Un tad man acīmredzot ir
noteikt to uz mazajiem burtiem.

277
00:13:36,500 --> 00:13:40,780
Un tas, kā es varu pārvērst visu
string uz mazo JavaScript izmantojot

278
00:13:40,780 --> 00:13:42,940
šī metode uz mazajiem burtiem.

279
00:13:42,940 --> 00:13:46,570
Jo, kad es noteikti krāsu,
kā es cenšos darīt šeit,

280
00:13:46,570 --> 00:13:48,260
krāsa ir jābūt visiem mazajiem.

281
00:13:48,260 --> 00:13:50,920
>> Bet poga, kas man bija,
ja mēs uzņemtu citu izskatu,

282
00:13:50,920 --> 00:13:55,890
ievērosiet, ka teksts ir
raksta ar lielo P Purple.

283
00:13:55,890 --> 00:13:59,140
Un pēc tam pie ļoti
bottom šeit, es acīmredzot

284
00:13:59,140 --> 00:14:02,630
mēģināt un darīt to, izmantojot jQuery, kā arī.

285
00:14:02,630 --> 00:14:06,000
Un šajā gadījumā, es neesmu faktiski
zvana funkciju vispār.

286
00:14:06,000 --> 00:14:11,430
Esmu tikko teica klase, kas es esmu
izmantojot šo pogu ir JQ poga.

287
00:14:11,430 --> 00:14:12,360
Tieši tā.

288
00:14:12,360 --> 00:14:14,950
>> Tātad, kā tas jQuery zināt, ko es daru?

289
00:14:14,950 --> 00:14:18,740
Nu, šis ir viens no priekšrocībām
slash trūkumus jQuery.

290
00:14:18,740 --> 00:14:21,560
Tas var ļaut man darīt lietas
ļoti lakoniski, bet varbūt ne

291
00:14:21,560 --> 00:14:22,570
kā intuitīvi.

292
00:14:22,570 --> 00:14:25,570
Varbūt tie pārējie trīs padarīt
mazliet vairāk sajust to, ko es daru.

293
00:14:25,570 --> 00:14:29,010
Lūk, lai gan, kas notiek?

294
00:14:29,010 --> 00:14:31,940
>> Acīmredzot, radot
anonīms funkcija

295
00:14:31,940 --> 00:14:36,790
ka slodzes, kad mana dokuments
ir gatava, tik document.ready,

296
00:14:36,790 --> 00:14:38,760
daži funkcija ir gatavojas notikt.

297
00:14:38,760 --> 00:14:40,490
Būtībā, ja ir dokuments gatavs?

298
00:14:40,490 --> 00:14:42,310
Tas ir tad, kad mana lapa ir ielādēta.

299
00:14:42,310 --> 00:14:46,540
>> Tātad, tiklīdz mana lapa ir ielādēta,
šādu funkciju vienmēr ir gatavs.

300
00:14:46,540 --> 00:14:54,310
Tajā teikts, ja objekts tipa jQButton,
vai ja klasē jQButton ir noklikšķinājuši,

301
00:14:54,310 --> 00:14:55,570
izpildīt šo funkciju.

302
00:14:55,570 --> 00:14:59,360
Tātad, šeit ir divi anonīmi funkcijas,
viens definēts iekšpusē no otras puses.

303
00:14:59,360 --> 00:15:03,930
>> Tātad visu manu kontekstā
šeit līdz šim ir mana lapa

304
00:15:03,930 --> 00:15:06,520
kad tas slodzes tas prasa šo funkciju.

305
00:15:06,520 --> 00:15:09,740
Un šī funkcija gaida
par pogu, lai uzklikšķināt.

306
00:15:09,740 --> 00:15:14,490
Un, kad poga ir noklikšķinājuši, JQ
poga īpaši ir noklikšķinājuši,

307
00:15:14,490 --> 00:15:17,150
tas prasa šis cits
funkcija, kas notiek

308
00:15:17,150 --> 00:15:21,250
lai uzstādītu fona
krāsa colorDiv būt

309
00:15:21,250 --> 00:15:25,990
kāds teksts ir starp tagiem.

310
00:15:25,990 --> 00:15:28,050
>> Tas ir jēdziens
kas poga tika uzklikšķināt.

311
00:15:28,050 --> 00:15:31,230
Bet citādi, tas ir sava veida
uzvedas līdzīgi notikumu.

312
00:15:31,230 --> 00:15:34,460
Tas ir tikai tāds pats kā es
paustu šo jQuery.

313
00:15:34,460 --> 00:15:36,790
Atkal, tas ir iespējams,
vairāk biedējoša lot.

314
00:15:36,790 --> 00:15:40,840
Tas nav tik skaidrs, kā
kaut kas līdzīgs event.js,

315
00:15:40,840 --> 00:15:45,080
kas ir varbūt nedaudz vairāk
runīgs, taču nedaudz mazāk

316
00:15:45,080 --> 00:15:46,000
biedējoša.

317
00:15:46,000 --> 00:15:51,460
>> Bet, ja mēs pop atpakaļ pār manu pārlūku
logu, ja es sāktu clicking-- labi,

318
00:15:51,460 --> 00:15:52,690
kas mainījies uz violetu.

319
00:15:52,690 --> 00:15:54,450
Tas ir zaļa, izmantojot virkni metodi.

320
00:15:54,450 --> 00:15:56,500
Tas ir oranžs, izmantojot notikumu apdarinātājs.

321
00:15:56,500 --> 00:15:58,300
>> Tas ir sarkans, izmantojot jQuery, vai ne?

322
00:15:58,300 --> 00:16:01,270
Tie visi izturas tieši tāds pats.

323
00:16:01,270 --> 00:16:06,509
Viņi vienkārši darīt to, izmantojot atšķirīgas
pieejas, lai atrisinātu problēmu.

324
00:16:06,509 --> 00:16:08,550
Tur ir daudz vairāk, lai
jQuery tad mēs esam noteikti

325
00:16:08,550 --> 00:16:10,050
gatavojas runāt par šajā video.

326
00:16:10,050 --> 00:16:15,410
Bet, ja jūs vēlaties uzzināt vairāk, varat
iet uz jQuery veida dokumentācijas

327
00:16:15,410 --> 00:16:19,710
un iemācīties pavisam nedaudz vairāk par
Tas ir ļoti elastīgs bibliotēka, kas

328
00:16:19,710 --> 00:16:22,550
ir liels, lai dara klienta pusē
skriptu, piemēram, to, ko mēs darām

329
00:16:22,550 --> 00:16:26,240
manipulēt izskatu
un sajust mūsu mājas lapā

330
00:16:26,240 --> 00:16:28,750
ar dokumenta objekta modelis.

331
00:16:28,750 --> 00:16:29,650
Es esmu Doug Lloyd.

332
00:16:29,650 --> 00:16:31,930
Tas ir CS50.

333
00:16:31,930 --> 00:16:34,022