1
00:00:00,000 --> 00:00:02,335
[SKAN MŪZIKA]

2
00:00:05,401 --> 00:00:07,650
DAGS LOIDS: Tātad mūsu video par
JavaScript mēs jūs iepazīstinājām ar 

3
00:00:07,650 --> 00:00:09,900
objekta jēdzienu. 

4
00:00:09,900 --> 00:00:12,634
Un šajā video es vēlos runāt par
ļoti konkrētu objektu, ko mēs varam 

5
00:00:12,634 --> 00:00:15,369
izmantot, lai manipulētu ar datiem
un saturu mūsu tīmekļa lapās, ko 

6
00:00:15,369 --> 00:00:18,104
sauc par dokumenta objektu. 

7
00:00:18,104 --> 00:00:21,042
Tagad jūs varat atcerēties no tās
diskusijas JavaScript videoklipā, 

8
00:00:21,042 --> 00:00:23,980
ka objekti būtībā satur divas
dažādas lietas. 

9
00:00:23,980 --> 00:00:27,100
Tie satur kaut ko, ko sauc par
rekvizītiem vai datiem.

10
00:00:27,100 --> 00:00:29,268
Un tie satur metodes, kas ir
funkcijas, kas attiecas tikai uz šiem 

11
00:00:29,268 --> 00:00:31,437
objektiem. 

12
00:00:31,437 --> 00:00:34,344
Bet kur mēs īsti neiedziļinājāmies,
bija tas, ka šie objekti, - ko 

13
00:00:34,344 --> 00:00:37,252
jūs varat tajos ievietot -
patiesībā ir diezgan elastīgi. 

14
00:00:37,252 --> 00:00:39,210
Ar tiem var paveikt daudz un
dažādas lietas.

15
00:00:39,210 --> 00:00:41,110
Jūs varat ne tikai ievietot datus.

16
00:00:41,110 --> 00:00:44,950
Tajā varat ievietot arī citus
objektus vai masīvus.

17
00:00:44,950 --> 00:00:47,350
Un varbūt tajos objektos, kurus
ievietojat tajā lielākā objektā, ir 

18
00:00:47,350 --> 00:00:49,750
arī citi objekti. 

19
00:00:49,750 --> 00:00:53,807
Tātad jūs varat izveidot šo objektu
ligzdošanas struktūru vienā 

20
00:00:53,807 --> 00:00:57,865
JavaScript objektā, kas, ja
padomājat, atceroties mūsu diskusiju par 

21
00:00:57,865 --> 00:01:01,922
C valodu un kokiem, tā izveido koka
struktūru, kurā jums ir viens 

22
00:01:01,922 --> 00:01:05,980
objekts, tajā ir vēl viens, tajos
ir citi utt. 

23
00:01:05,980 --> 00:01:08,020
Viens ļoti specifisks objekts
JavaScript tiek saukts par dokumenta 

24
00:01:08,020 --> 00:01:10,060
objektu. 

25
00:01:10,060 --> 00:01:14,185
Un tas ir objekts, kas būtībā
pārorganizē visu vienas tīmekļa lapas 

26
00:01:14,185 --> 00:01:18,310
saturu vienā JavaScript objektā. 

27
00:01:18,310 --> 00:01:21,340
Kad jūs zināt dokumenta objekta
metodes un rekvizītus, varat tos 

28
00:01:21,340 --> 00:01:24,370
mainīt JavaScript. 

29
00:01:24,370 --> 00:01:26,530
Vērtībai var piešķirt dažādus
rekvizītus.

30
00:01:26,530 --> 00:01:30,175
Varat izsaukt objekta metodes, lai
mainītu dažus no šiem rekvizītiem, 

31
00:01:30,175 --> 00:01:33,820
kas ļauj manipulēt ar vietnes
saturu vai izskatu un darbību, tikai 

32
00:01:33,820 --> 00:01:37,465
izmantojot JavaScript, nevis
atgriezties un rediģēt HTML vai Python, 

33
00:01:37,465 --> 00:01:41,110
kas ir tā pamatā. 

34
00:01:41,110 --> 00:01:44,360
Tātad, šeit ir ļoti vienkāršas HTML
vietnes piemērs.

35
00:01:44,360 --> 00:01:45,970
Šeit tiešām nekas daudz nenotiek.

36
00:01:45,970 --> 00:01:48,160
Bet, kā redzat, ir HTML tagi.

37
00:01:48,160 --> 00:01:50,620
Tajā mums ir head sekcija un body
sekcija.

38
00:01:50,620 --> 00:01:53,815
Head sekcijā mums ir nosaukums
“Hello, world”. Body sekcijā mums ir 

39
00:01:53,815 --> 00:01:57,010
pāris dažādi tagi. 

40
00:01:57,010 --> 00:02:02,920
Mums ir H2 jeb otrā līmeņa galvenes
tags, rindkopas tags un saite.

41
00:02:02,920 --> 00:02:07,180
Un to visu faktiski var attēlot
JavaScript kā dokumenta objektu.

42
00:02:07,180 --> 00:02:10,707
Mēs faktiski varam visu to sakārtot
hierarhiski, līdzīgi tam, ko 

43
00:02:10,707 --> 00:02:14,235
darām ar atkāpi, kur skaidri
redzams, ka lietas, kas ir ievilktas 

44
00:02:14,235 --> 00:02:17,762
vienu līmeni tālāk, ir ligzdotas ar
cita iekšpusi — ligzdotas citas 

45
00:02:17,762 --> 00:02:21,290
HTML daļas iekšpusē. 

46
00:02:21,290 --> 00:02:24,512
Piemēram, lūk, kāda varētu būt tās
vienkāršas tīmekļa lapas koka 

47
00:02:24,512 --> 00:02:27,734
struktūra, kuru tikko apskatījām. 

48
00:02:27,734 --> 00:02:28,650
Tātad mums ir dokuments.

49
00:02:28,650 --> 00:02:31,210
Tajā mums ir HTML.

50
00:02:31,210 --> 00:02:36,100
Un to attēlo mūsu rīcībā esošais
HTML tags.

51
00:02:36,100 --> 00:02:39,750
Un viss, kas tajā atrodas, ir
ligzdots zem tā, kā redzat.

52
00:02:39,750 --> 00:02:43,180
Mūsu HTML ir divas galvenās lietas
nākamajā līmenī.

53
00:02:43,180 --> 00:02:45,110
Ir head sekcija un body sekcija.

54
00:02:45,110 --> 00:02:46,960
Tātad mēs varam īpaši aplūkot head.

55
00:02:46,960 --> 00:02:49,570
Un mēs redzam, ka head sekcijā ir
virsraksts.

56
00:02:49,570 --> 00:02:54,936
Un virsrakstā ir teksts “Hello,
world”. Un mēs varam arī aplūkot 

57
00:02:54,936 --> 00:03:00,303
body, kas ir pilnīgi atšķirīgs
objekta vai koka segments, kura 

58
00:03:00,303 --> 00:03:05,670
iekšpusē ir katrs no šiem trim
atsevišķiem gabaliem, h2, p un tags. 

59
00:03:05,670 --> 00:03:11,165
Un to visu var attēlot kā kokā,
kas, kā redzat, iezīmējot tekstu zaļā 

60
00:03:11,165 --> 00:03:16,660
krāsā HTML, tiek saskaņots arī ar
mūsu HTML sadaļu. 

61
00:03:16,660 --> 00:03:19,030
Tātad dokumenta objektam ir
rekvizīti, tāpat kā jebkuram citam 

62
00:03:19,030 --> 00:03:21,400
objektam. 

63
00:03:21,400 --> 00:03:23,340
Un tam ir arī vairākas metodes.

64
00:03:23,340 --> 00:03:27,363
Un, ja jūs atkal — un mēs par to
runāsim pēc brīža — zināt, kā 

65
00:03:27,363 --> 00:03:31,386
pārvietoties pa dokumenta objektu,
sākot no augšas un urbjot līdz 

66
00:03:31,386 --> 00:03:35,410
vajadzīgajai lapas sadaļai, varat
mainīt vietnes izskatu. 

67
00:03:35,410 --> 00:03:38,505
Tātad patiesībā iedziļināsimies IDE
un apskatīsim, kā jūs paši varat 

68
00:03:38,505 --> 00:03:41,600
redzēt dokumenta objektu
pārlūkprogrammā. 

69
00:03:41,600 --> 00:03:42,100
Labi.

70
00:03:42,100 --> 00:03:46,000
Tātad mēs esam manā IDE, un es ļoti
ātri tikai parādīšu, ka tas ir 

71
00:03:46,000 --> 00:03:49,900
tieši tas pats HTML, kas mums bija
slaidā tieši pirms brīža. 

72
00:03:49,900 --> 00:03:53,180
Un man ir faktiski atvērta lapa
citā cilnē šeit.

73
00:03:53,180 --> 00:03:56,120
Jūs arī pamanīsit, ka es atvēru
savu Developer Console.

74
00:03:56,120 --> 00:03:58,346
Ja izmantojat Google Chrome,
parasti varat to izdarīt, izmantojot 

75
00:03:58,346 --> 00:04:00,573
taustiņu kombināciju
Control-Shift-J PC datorā vai Command-Shift-J 

76
00:04:00,573 --> 00:04:02,800
Mac datorā. 

77
00:04:02,800 --> 00:04:04,630
Un tas vienkārši atver JavaScript
Console.

78
00:04:04,630 --> 00:04:07,270
Un atcerieties no mūsu JavaScript
videoklipa, ka mēs varam izmantot 

79
00:04:07,270 --> 00:04:09,910
Console, piemēram, izmantojot
console.log, lai izdrukātu informāciju 

80
00:04:09,910 --> 00:04:12,550
konsolei, kad mēs pārlūkojam savu
lapu. 

81
00:04:12,550 --> 00:04:15,133
Ir arī citas lietas, ko mēs varam
darīt ar Console.

82
00:04:15,133 --> 00:04:18,357
Mēs varam arī ievadīt komandas, lai
tā kaut ko darītu.

83
00:04:18,357 --> 00:04:21,440
Un tāpēc tas, ko es darīšu šoreiz,
ir kaut kas nedaudz atšķirīgs.

84
00:04:21,440 --> 00:04:25,540
Tā vietā, lai rakstītu console.log,
es rakstīšu console.dir.

85
00:04:25,540 --> 00:04:29,143
Un tas, ko darīs console.dir,
pamatā mēģinās sakārtot manas lapas 

86
00:04:29,143 --> 00:04:32,746
saturu šeit direktoriju struktūrā,
kas būtībā ir augstākās 

87
00:04:32,746 --> 00:04:36,350
kvalitātesobjekta aprakstīšanas
veids. 

88
00:04:36,350 --> 00:04:38,639
Tātad mēs varam apskatīt un redzēt,
kas atrodas objektā.

89
00:04:38,639 --> 00:04:40,180
Un uz kādu objektu es gribu
skatīties?

90
00:04:40,180 --> 00:04:42,355
Nu, es gribu apskatīt dokumenta
objektu, tāpēc es dodos uz 

91
00:04:42,355 --> 00:04:44,530
console.dir dokumentu. 

92
00:04:44,530 --> 00:04:47,450
Kad es šeit nospiedīšu taustiņu
Enter, mēs redzēsim, ka es saņēmu 

93
00:04:47,450 --> 00:04:50,370
pretī undefined. 

94
00:04:50,370 --> 00:04:52,810
Bet virs tā man ir šāda veida
dokuments ar tēmturi.

95
00:04:52,810 --> 00:04:56,932
Tā ir JavaScript Console, kas man
atgriež dokumenta objektu.

96
00:04:56,932 --> 00:04:59,640
Kad tas tiks atvērts, tajā būs
daudz lietu.

97
00:04:59,640 --> 00:05:01,848
Un par daudz ko mēs īsti nerunāsim.

98
00:05:01,848 --> 00:05:03,809
Es tikai vēlos jums parādīt, kā
lietas ir ligzdotas šajā dokumenta 

99
00:05:03,809 --> 00:05:05,770
objektā. 

100
00:05:05,770 --> 00:05:07,260
Tāpēc es atvēršu šo.

101
00:05:07,260 --> 00:05:08,885
Un atkal šeit ir daudz lietu.

102
00:05:08,885 --> 00:05:12,822
Bet tas, ko es patiešām vēlos
apskatīt, ir children, tāpēc tikai 

103
00:05:12,822 --> 00:05:16,760
aplūkojot dokumenta objekta
children rekvizītu. 

104
00:05:16,760 --> 00:05:18,950
Un jūs varat redzēt, ka tur ir
viens.

105
00:05:18,950 --> 00:05:22,100
Ja es to atveru, ko jūs šeit
redzat?

106
00:05:22,100 --> 00:05:26,120
Dokumenta objektā ir viens bērns,
ko sauc par HTML, ko jūs varētu 

107
00:05:26,120 --> 00:05:30,140
atcerēties no mūsu diagrammas pirms
dažiem slaidiem. 

108
00:05:30,140 --> 00:05:37,008
Ja es to atvēršu, jūs redzēsiet, ka
tajā ir arī bērni, patiesībā, 

109
00:05:37,008 --> 00:05:43,877
divi no tiem ir head un body. 

110
00:05:43,877 --> 00:05:46,210
Un es varu turpināt veikt šo
vingrinājumu līdz galam.

111
00:05:46,210 --> 00:05:47,690
Bet patiesībā, ja es turpinātu to
darīt un es skatītos head sekcijā, 

112
00:05:47,690 --> 00:05:49,170
es atrastu nosaukuma tagu. 

113
00:05:49,170 --> 00:05:50,990
Es varētu to atvērt un redzēt, kas
tur ir.

114
00:05:50,990 --> 00:05:55,350
Body sekcijā es atklātu, ka ir trīs
bērni, h2, p un tags.

115
00:05:55,350 --> 00:05:59,280
Tie visi ir ligzdoti šajā lielajā
dokumenta objektā.

116
00:05:59,280 --> 00:06:02,970
Un mēs faktiski varam manipulēt ar
šo objektu, izmantojot JavaScript.

117
00:06:02,970 --> 00:06:04,917
Atgriezīsimies pie slaidiem un
nedaudz parunāsim par to, kā mēs 

118
00:06:04,917 --> 00:06:06,864
varētu to izdarīt. 

119
00:06:06,864 --> 00:06:09,325
Tātad atkal, dokumenta objekts, kā
jūs redzējāt, kad mēs to tikko 

120
00:06:09,325 --> 00:06:11,787
skatījāmies konsolē, ir diezgan
liels. 

121
00:06:11,787 --> 00:06:13,120
Tur ir daudz lietu.

122
00:06:13,120 --> 00:06:15,265
Mēs nerunāsim par visu, jo ne viss
būs patiešām nepieciešams, kad jūs 

123
00:06:15,265 --> 00:06:17,410
sāksiet ar to strādāt. 

124
00:06:17,410 --> 00:06:21,220
Taču es vēlos aplūkot dažus lielus
rekvizītus, kurus varat izmantot, 

125
00:06:21,220 --> 00:06:25,030
strādājot ar dokumenta objektu, kā
arī dažas metodes. 

126
00:06:25,030 --> 00:06:30,250
Piemēram, viens no tiem ir
InnerHTML, kas satur HTML tagu komplektu.

127
00:06:30,250 --> 00:06:33,256
Piemēram, virsraksta taga
InnerHTML, ja man būtu jāiedziļinās šajā 

128
00:06:33,256 --> 00:06:36,263
sadaļā, būtu “Hello, world” vai
vienalga kā es to nosaucu — 

129
00:06:36,263 --> 00:06:39,270
neatkarīgi no manas lapas faktiskā
nosaukuma. 

130
00:06:39,270 --> 00:06:43,785
Tas ir virsraksta taga InnerHTML
vai virsraksta mezgls, vai 

131
00:06:43,785 --> 00:06:48,300
virsraksta objekts kopējā dokumenta
objektā. 

132
00:06:48,300 --> 00:06:51,500
nodeName tāpat būtu tikai nosaukums
mezglam, kuru mēs tikko 

133
00:06:51,500 --> 00:06:54,700
aprakstījām, vai objekta sadaļai,
kuru mēs tikko aprakstījām. 

134
00:06:54,700 --> 00:06:55,320
Id.

135
00:06:55,320 --> 00:06:59,070
No mūsu video par HTML un CSS,
iespējams, atceraties, ka noteiktiem 

136
00:06:59,070 --> 00:07:02,820
HTML elementiem varam norādīt
neobligātu ID atribūtu. 

137
00:07:02,820 --> 00:07:06,240
Mēs parasti to izmantojam CSS
kontekstā, piemēram, lai izveidotu 

138
00:07:06,240 --> 00:07:09,660
stilu vienam noteiktam mezglam vai
vienai noteiktai tagu kopai mūsu 

139
00:07:09,660 --> 00:07:13,080
HTML ar noteiktu stilu. 

140
00:07:13,080 --> 00:07:16,350
Mēs varam piešķirt tam ID, lai CSS
zinātu, kurai lapas sadaļai 

141
00:07:16,350 --> 00:07:19,620
piemērot šo stilu. 

142
00:07:19,620 --> 00:07:22,170
Tātad šis īpašums tikai ļautu mums
noskaidrot, kāds ir konkrētā 

143
00:07:22,170 --> 00:07:24,720
mezgla ID. 

144
00:07:24,720 --> 00:07:27,857
parentNode ir atsauce uz vienu
līmeni augstāk esošo mezglu.

145
00:07:27,857 --> 00:07:31,581
Tātad vēlreiz, ja skatos uz
virsraksta mezglu — pagaidām turpināšu 

146
00:07:31,581 --> 00:07:35,305
izmantot šo piemēru — tā
vecākmezgls būtu head, jo virsraksts šajā 

147
00:07:35,305 --> 00:07:39,030
koka struktūrā ir ligzdots head
sekcijā. 

148
00:07:39,030 --> 00:07:41,100
childNodes ir gluži pretēji tam.

149
00:07:41,100 --> 00:07:43,650
Tas ir tas, kas ir zemāks par to,
kur es šobrīd esmu.

150
00:07:43,650 --> 00:07:47,940
Tātad, ja es tagad izmantoju body
mezglu kā piemēru, jo mēs esam 

151
00:07:47,940 --> 00:07:52,230
ligzdojuši šajā koka sadaļā, body
mezgla bērnu mezgli būtu h2 un p un 

152
00:07:52,230 --> 00:07:56,520
a. 

153
00:07:56,520 --> 00:08:00,030
Tie būtu trīs bērnu mezgli no šī
apgabala.

154
00:08:00,030 --> 00:08:03,300
atribūti, HTML elementa atribūtu
masīvs.

155
00:08:03,300 --> 00:08:05,240
Labs piemērs šeit ir attēla tags.

156
00:08:05,240 --> 00:08:07,875
Tātad, ja es atkal pārvietojos
dokumenta objektā, izmantojot 

157
00:08:07,875 --> 00:08:10,510
JavaScript, un es nonāku pie attēla
taga un vēlos noskaidrot, kādi 

158
00:08:10,510 --> 00:08:13,145
atribūti tam ir, varat atcerēties,
ka attēla atribūtos ietilpst, 

159
00:08:13,145 --> 00:08:15,780
piemēram, tā avots. 

160
00:08:15,780 --> 00:08:16,920
Kas ir avota datne?

161
00:08:16,920 --> 00:08:18,870
Vai varbūt esmu norādījis arī
neobligātos augstuma un platuma 

162
00:08:18,870 --> 00:08:20,820
parametrus. 

163
00:08:20,820 --> 00:08:23,430
Tie būtu visi atribūti, kas
saistīti ar konkrēto dokumenta objekta 

164
00:08:23,430 --> 00:08:26,040
mezglu. 

165
00:08:26,040 --> 00:08:29,205
Un tad stils, kas ir viens no
veidiem — tas ir vēl viens veids, kā 

166
00:08:29,205 --> 00:08:32,370
mēs faktiski varam veidot lapas
izskatu un sajūtas. 

167
00:08:32,370 --> 00:08:36,014
Un pēc dažiem mirkļiem mēs faktiski
izskatīsim piemēru, kur mēs īpaši 

168
00:08:36,014 --> 00:08:39,659
manipulējam ar šo rekvizītu, stila
rekvizītu, lai kaut ko mainītu. 

169
00:08:39,659 --> 00:08:45,630
Bet tas ir analoģisks noteiktas
sadaļas vai lapas daļas CSS stilam.

170
00:08:45,630 --> 00:08:47,630
Tātad šie ir daži no
visizplatītākajiem rekvizītiem.

171
00:08:47,630 --> 00:08:49,880
Ir arī četras izplatītākās metodes,
kuras jūs varētu redzēt.

172
00:08:49,880 --> 00:08:51,720
Un atkal, ir daudz vairāk par šo.

173
00:08:51,720 --> 00:08:53,775
Bet šeit ir četras, kuras varat
izmantot, kad sākat strādāt ar 

174
00:08:53,775 --> 00:08:55,830
dokumenta objektu. 

175
00:08:55,830 --> 00:08:57,167
getElementById.

176
00:08:57,167 --> 00:08:59,963
Un ievērojiet, ka tagad, tā kā mēs
runājam par metodēm, visas šīs ir 

177
00:08:59,963 --> 00:09:02,760
funkcijas, kurām pēc izvēles var
būt nepieciešami parametri. 

178
00:09:02,760 --> 00:09:06,270
Šajā gadījumā mēs meklējam elementu
ar noteiktu ID.

179
00:09:06,270 --> 00:09:08,710
Tas ir parametrs, kas tiek nodots
tur.

180
00:09:08,710 --> 00:09:12,380
Tātad, ja mēs, iespējams, esam
izveidojuši noteiktu elementu, 

181
00:09:12,380 --> 00:09:16,050
izmantojot CSS, un esam tam
piešķīruši šo neobligāto ID atribūtu, šī 

182
00:09:16,050 --> 00:09:19,720
metode mūsu vietā pārvietotos pa
visu dokumenta objektu un atrastu 

183
00:09:19,720 --> 00:09:23,390
konkrēto mezglu, vienu no tiem, kas
atrodas tālāk kokā vai tālāk 

184
00:09:23,390 --> 00:09:27,060
ligzdotu objektā. 

185
00:09:27,060 --> 00:09:30,540
Tā atrastu šo lapas sadaļu un
atgrieztu jums M objektu no šī punkta 

186
00:09:30,540 --> 00:09:34,020
uz leju. 

187
00:09:34,020 --> 00:09:35,510
getElementsByTagName.

188
00:09:35,510 --> 00:09:36,990
Ievērojiet, ka tā ir getElements.

189
00:09:36,990 --> 00:09:41,610
Tā, piemēram, varētu atrast visus
gadījumus, kad es izmantoju B tagu.

190
00:09:41,610 --> 00:09:47,765
Tā dotu man visu manas vietnes
treknrakstā atzīmēto sadaļu masīvu.

191
00:09:47,765 --> 00:09:51,632
appendChild būtībā ļauj man
pievienot papildu mezglu zemāk, kur es 

192
00:09:51,632 --> 00:09:55,500
šobrīd esmu, tāpēc tā ļauj man
paplašināt lietu skaitu. 

193
00:09:55,500 --> 00:10:00,510
Es varētu uzreiz pievienot jaunu
elementu savas vietnes pamattekstam.

194
00:10:00,510 --> 00:10:04,425
Es varu pievienot, iespējams, jaunu
rindkopas tagu vai H3, vai kaut 

195
00:10:04,425 --> 00:10:08,340
ko citu, kas tur nebija pirms šīs
metodes izmantošanas šeit. 

196
00:10:08,340 --> 00:10:10,650
Un tad removeChild ir gluži
pretēja.

197
00:10:10,650 --> 00:10:14,100
Tā izdzēš lapas sadaļu, no
dokumenta objekta noņemot šo HTML daļu, 

198
00:10:14,100 --> 00:10:17,550
visu mezglu. 

199
00:10:17,550 --> 00:10:19,440
Es gribu norādīt uz vienu lietu,
kas programmētājiem rada daudz 

200
00:10:19,440 --> 00:10:21,330
sirdssāpes. 

201
00:10:21,330 --> 00:10:23,150
Es zinu, ka tas man ir radījis
daudz sirdssāpes.

202
00:10:23,150 --> 00:10:26,260
Lietojot atribūtu getElementById,
ievērojiet, ka D Id laukā ir 

203
00:10:26,260 --> 00:10:29,370
rakstīts ar mazo burtu. 

204
00:10:29,370 --> 00:10:33,585
Parasti, ja identifikācijai
izmantojam terminu ID, tas parasti ir 

205
00:10:33,585 --> 00:10:37,800
lielais I un lielais D. 

206
00:10:33,660 --> 00:10:36,577
Es pat nevaru pateikt, cik reizes
esmu nejauši ierakstījis lielo I, 

207
00:10:36,577 --> 00:10:39,495
lielo D šeit. 

208
00:10:39,495 --> 00:10:42,870
Un tad es saņemu JavaScript error,
jo tā nezina, par ko es runāju.

209
00:10:42,870 --> 00:10:46,950
Tāpēc, nosaucot to par plaši
izplatītu problēmu, esiet ļoti 

210
00:10:46,950 --> 00:10:51,030
piesardzīgi, lietojot to,
izmantojiet mazo burtu D. 

211
00:10:51,030 --> 00:10:55,080
Tā kā dokumenta objekts ir viena
liela lieta, kurā ir ligzdoti daudzi 

212
00:10:55,080 --> 00:10:59,130
objekti, ja mēs sākam no augšas,
izmantojot šos rekvizītus un 

213
00:10:59,130 --> 00:11:03,180
metodes, varam atrast ceļu uz
jebkuru citu dokumenta objekta 

214
00:11:03,180 --> 00:11:07,230
apgabalu. 

215
00:11:07,230 --> 00:11:09,900
Tagad jūs, iespējams, pamanījāt, ka
daži no šiem terminiem, daži no 

216
00:11:09,900 --> 00:11:12,570
šiem rekvizītu nosaukumiem un daži
no šiem metožu nosaukumiem ir 

217
00:11:12,570 --> 00:11:15,240
patiešām ļoti gari. 

218
00:11:15,240 --> 00:11:17,950
Lai to izdarītu, būtu daudz
jāraksta.

219
00:11:17,950 --> 00:11:20,886
Un tāpēc tas ir pieņemts, strādājot
pie projekta, kurā ir daudz 

220
00:11:20,886 --> 00:11:23,823
manipulāciju ar dokumentu
objektiem, izmantot JavaScript bibliotēku 

221
00:11:23,823 --> 00:11:26,760
ar nosaukumu jQuery. 

222
00:11:26,760 --> 00:11:27,990
jQuery ir diezgan populāra.

223
00:11:27,990 --> 00:11:29,385
Iespējams, tā ir vispopulārākā
pašlaik izmantotā JavaScript 

224
00:11:29,385 --> 00:11:30,781
bibliotēka. 

225
00:11:30,781 --> 00:11:33,094
Tas pastāv jau apmēram 10 gadus.

226
00:11:33,094 --> 00:11:34,260
Tā ir atvērtā koda bibliotēka.

227
00:11:34,260 --> 00:11:35,670
Un tā dara daudzas lietas.

228
00:11:35,670 --> 00:11:40,520
Taču viena no lietām, ko tā dara
īpaši labi, ir tā sauktā klienta 

229
00:11:40,520 --> 00:11:45,370
puses skriptēšanas vienkāršošana,
kā arī koda rakstīšana, lai mainītu 

230
00:11:45,370 --> 00:11:50,220
lietas savā datorā tā, lai
ietekmētu vietnes izskatu un sajūtas. 

231
00:11:50,220 --> 00:11:52,200
Dokumentu objektu manipulācijas ir
viena no tām lietām, ko tā veic 

232
00:11:52,200 --> 00:11:54,180
ļoti labi. 

233
00:11:54,180 --> 00:11:58,440
Tā arī diezgan labi veic AJAX
vaicājumus, par kuriem mēs runāsim citā 

234
00:11:58,440 --> 00:12:02,700
AJAX videoklipā. 

235
00:12:02,700 --> 00:12:06,870
Tā, piemēram, šī ir neapstrādāta
JavaScript versija, ko mēs darām 

236
00:12:06,870 --> 00:12:11,040
šajā neapstrādātā JavaScript
versijā, maina vienu lapas sadaļu. 

237
00:12:11,040 --> 00:12:14,725
Es atrodu savas lapas elementu,
kura ID ir colorDiv.

238
00:12:14,725 --> 00:12:16,600
Tāpēc es sāku no dokumenta
augšdaļas.

239
00:12:16,600 --> 00:12:20,235
Tā izskatīs visu dokumenta objektu,
visus zem tā esošos ligzdotos 

240
00:12:20,235 --> 00:12:23,870
mezglus, lai atrastu lapas sadaļu
ar nosaukumu colorDiv. 

241
00:12:23,870 --> 00:12:27,245
Un es došos uz turieni un iestatīšu
šī mezgla stila rekvizīta 

242
00:12:27,245 --> 00:12:30,621
backgroundColor rekvizītu zaļā
krāsā. 

243
00:12:30,621 --> 00:12:33,730
Tātad būtībā viss, kas šeit notiek,
ir tas, ka es mainu vienas savas 

244
00:12:33,730 --> 00:12:36,840
lapas sadaļas fona krāsu uz zaļu. 

245
00:12:36,840 --> 00:12:40,920
Šeit daudz jāraksta, lai to
izdarītu tīrā JavaScript.

246
00:12:40,920 --> 00:12:43,695
Izmantojot jQuery, kompromiss ir
tāds, ka jūs iegūstat īsāku tekstu — 

247
00:12:43,695 --> 00:12:46,470
jums ir jāievada mazāk
informācijas. 

248
00:12:46,470 --> 00:12:48,250
Jums ir īsāka koda rinda.

249
00:12:48,250 --> 00:12:52,440
Bet tā izskatīsies mazliet
dīvaināk.

250
00:12:52,440 --> 00:12:56,160
Tātad tā darītu tieši to pašu,
izmantojot jQuery sintaksi.

251
00:12:56,160 --> 00:13:00,834
Dolāra zīme ir īss veids, kā
pateikt jQuery.

252
00:13:00,834 --> 00:13:03,750
Un tā meklēs manas lapas sadaļu ar
nosaukumu colorDiv.

253
00:13:03,750 --> 00:13:05,640
Tā ir jQuery sintakse.

254
00:13:05,640 --> 00:13:10,080
Un es nomainīšu šī mezgla CSS fona
krāsu uz zaļu.

255
00:13:10,080 --> 00:13:11,580
Atkal, tas ir mazliet dīvaini.

256
00:13:11,580 --> 00:13:13,920
Bet tas ir īsāks veids, kā darīt to
pašu.

257
00:13:13,920 --> 00:13:17,805
Tāpēc bieži vien to redzēsit
pretstatā garākajai JavaScript versijai, 

258
00:13:17,805 --> 00:13:21,690
kad redzat kādu klienta puses
skriptēšanu. 

259
00:13:21,690 --> 00:13:24,862
Tagad es vēlos atgriezties pie IDE
un nedaudz parādīt kā — parādīt 

260
00:13:24,862 --> 00:13:28,035
dažus piemērus - kā mēs faktiski
varam manipulēt ar dokumenta 

261
00:13:28,035 --> 00:13:31,207
objektu, izmantojot JavaScript un
jQuery, lai mainītu sadaļas krāsu 

262
00:13:31,207 --> 00:13:34,380
tīmekļa lapā. 

263
00:13:34,380 --> 00:13:35,240
Labi.

264
00:13:35,240 --> 00:13:38,845
Tātad šeit ir ļoti vienkārša
tīmekļa lapa — un jūs varat lejupielādēt 

265
00:13:38,845 --> 00:13:42,450
šo piemēru, pārskatot šo
videoklipu — kurā ir daudz dažādu pogu. 

266
00:13:42,450 --> 00:13:45,334
Un, kā redzat augšpusē, tur ir
sadaļa “Change my color!” Mēs 

267
00:13:45,334 --> 00:13:48,218
mēģināsim mainīt šīs lapas sadaļas
fona krāsu. 

268
00:13:48,218 --> 00:13:50,509
Un acīmredzot es to darīšu četros
dažādos veidos.

269
00:13:50,509 --> 00:13:53,609
Ir atsevišķas funkcijas fona
krāsai, kas rakstītas JavaScript; viena 

270
00:13:53,609 --> 00:13:56,709
funkcija, lai mainītu fona krāsu,
lai, iespējams, nedaudz uzlabotu 

271
00:13:56,709 --> 00:13:59,809
dizainu; notikumu apdarinātājs —
atcerieties no mūsu videoklipa 

272
00:13:59,809 --> 00:14:02,909
beigām par JavaScript, mēs nedaudz
runājām par notikumu 

273
00:14:02,909 --> 00:14:06,009
apdarinātājiem, tāpēc šī būs vēl
viena iespēja redzēt tos darbībā — 

274
00:14:06,009 --> 00:14:09,109
un viens piemērs, kur mēs darām
tieši to pašu, neapstrādāta 

275
00:14:09,109 --> 00:14:12,210
JavaScript vietā izmantojot jQuery.


276
00:14:12,210 --> 00:14:15,210
Apskatīsim, kā patiesībā izskatās
šīs vietnes kods.

277
00:14:15,210 --> 00:14:17,190
Manā IDE mēs atvērsim šo cilni.

278
00:14:17,190 --> 00:14:20,663
Kā redzat, es ielādēju pāris
dažādus JavaScript skriptus savas lapas 

279
00:14:20,663 --> 00:14:24,136
sākumā, tāpēc es galvenokārt
izmantoju tēmturis include, kas ir 

280
00:14:24,136 --> 00:14:27,610
analoģija šeit ar C valodu, pāris
JavaScript datnes. 

281
00:14:27,610 --> 00:14:30,470
Un man ir viena datne katram no
četriem dažādiem krāsu manipulācijas 

282
00:14:30,470 --> 00:14:33,330
veidiem, ko mēs veiksim. 

283
00:14:33,330 --> 00:14:35,700
Un tad šeit - tas nav īpaši labi
izstrādāts HTML, taču tas tiek galā 

284
00:14:35,700 --> 00:14:38,070
ar darbu. 

285
00:14:38,070 --> 00:14:42,610
Man ir viena sadaļa ar piecu pogu
komplektu fona krāsu pogām, viena - 

286
00:14:42,610 --> 00:14:47,150
krāsas kā parametra nodošanai,
viena - notikumu apstrādātājam, un 

287
00:14:47,150 --> 00:14:51,690
viena - jQuery pogām. 

288
00:14:51,690 --> 00:14:53,590
Un tās visas izskatās nedaudz
atšķirīgas.

289
00:14:53,590 --> 00:14:59,400
Tāpēc sāksim, aplūkojot atsevišķas
krāsas.

290
00:14:59,400 --> 00:15:04,330
Tātad šeit tiešām nav daudz.

291
00:15:05,874 --> 00:15:08,442
Jūs redzējāt, ka es uzrakstīju šīs
piecas dažādās funkcijas: 

292
00:15:08,442 --> 00:15:11,010
turnPurple, turnGreen, turnOrange,
turnRed un turnBlue. 

293
00:15:11,010 --> 00:15:14,520
Un viss, ko tās dara, ir -
izmantojot tīru JavaScript - tās iegūst 

294
00:15:14,520 --> 00:15:18,030
elementu pēc colorDiv ID, kas ir
elements, kuram mēs cenšamies mainīt 

295
00:15:18,030 --> 00:15:21,540
fona krāsu. 

296
00:15:21,540 --> 00:15:25,080
Un es iestatīju tā stila fona krāsu
atribūtu uz violetu, zaļu, 

297
00:15:25,080 --> 00:15:28,620
oranžu, sarkanu vai zilu, kā
aprakstīts. 

298
00:15:28,620 --> 00:15:31,200
Tātad tas, cerams, ir pats par sevi
saprotams.

299
00:15:31,200 --> 00:15:34,337
Tad mums ir sava veida vispārēja
nozīme, kur, pretēji, mēs nododam 

300
00:15:34,337 --> 00:15:37,475
krāsu kā parametru. 

301
00:15:37,475 --> 00:15:40,863
Iespējams, atceraties, uz mirkli
atskatoties uz mūsu HTML, ka šeit es 

302
00:15:40,863 --> 00:15:44,251
nododu krāsas: violetu, zaļu,
oranžu, sarkanu un zilu, kā šīs 

303
00:15:44,251 --> 00:15:47,640
funkcijas parametrus. 

304
00:15:47,640 --> 00:15:52,125
Un vispārējam mērķim es vienkārši
saku, ka es ievadīju parametru, ar 

305
00:15:52,125 --> 00:15:56,610
iestatītu colorDiv backgroundColor
tajā krāsā. 

306
00:15:56,610 --> 00:15:58,470
Tad mums ir ieslēgts notikumu
apstrādātājs.

307
00:15:58,470 --> 00:16:01,405
Tāpēc atcerieties — ja aplūkojam
notikumu apstrādātāju viens, rinda 

308
00:16:01,405 --> 00:16:04,340
izskatās vienāda visiem pieciem. 

309
00:16:04,340 --> 00:16:07,545
Taču no mūsu diskusijas par
notikumu apdarinātājiem, iespējams, 

310
00:16:07,545 --> 00:16:10,750
atceraties, ka notikumu
apdarinātājs darbojas tad, kad noklikšķināt 

311
00:16:10,750 --> 00:16:13,955
uz pogas. Piemēram, notikumu
apstrādātājs tver informāciju par to, 

312
00:16:13,955 --> 00:16:17,160
kas to izraisīja. 

313
00:16:17,160 --> 00:16:20,727
Tas, piemēram, zina, uz kuras pogas
jūs noklikšķinājāt.

314
00:16:20,727 --> 00:16:24,060
Un visas šīs pogas — es uz brīdi
pāriešu uz HTML.

315
00:16:24,060 --> 00:16:27,193
Visām šīm pogām ir atšķirīgs
nosaukums — violeta, zaļa, oranža, 

316
00:16:27,193 --> 00:16:30,326
sarkana un zila, ar lielajiem
burtiem, tas ir vārds, kas faktiski 

317
00:16:30,326 --> 00:16:33,460
tiks atainots uz pogas. 

318
00:16:33,460 --> 00:16:37,440
Tāpēc man ir veids, kā tās visas
atšķirt.

319
00:16:37,440 --> 00:16:39,240
Bet kā izrādās - atvainojos par to.

320
00:16:39,240 --> 00:16:44,115
Kā izrādās, lai mana krāsas maiņa
darbotos, es nevaru ievadīt krāsas 

321
00:16:44,115 --> 00:16:48,990
nosaukumu ar lielo burtu. 

322
00:16:48,990 --> 00:16:50,710
Man ir jānodod informācija ar mazo
burtu.

323
00:16:50,710 --> 00:16:56,585
Tā vietā es iestatīšu dokumenta
colorDiv backgroundColor uz jebkuru 

324
00:16:56,585 --> 00:17:02,460
objektu, kas izraisīja notikuma
izsaukšanu. 

325
00:17:02,460 --> 00:17:04,935
Es apskatīšu tā InnerHTML — tad
šeit šis InnerHTML rekvizīts tiek 

326
00:17:04,935 --> 00:17:07,410
pielietots. 

327
00:17:07,410 --> 00:17:11,376
Un tas, ko es ar to darīšu, ir -
pārveidošu visu šo virkni, lai 

328
00:17:11,376 --> 00:17:15,342
lielais P violetais burts būtu
mazs. 

329
00:17:15,342 --> 00:17:18,298
Tātad būtībā tas, kas šeit notiek,
ir sekojošais - es noklikšķinu uz 

330
00:17:18,298 --> 00:17:21,254
pogas, teiksim, es noklikšķinu uz
violetas pogas, un notiek tas, ka 

331
00:17:21,254 --> 00:17:24,210
lielais P burts tiek pārvērsts par
violetu mazajiem burtiem. 

332
00:17:24,210 --> 00:17:27,310
Un tad vārds “purple” kļūs par
krāsu, uz kuru es iestatu 

333
00:17:27,310 --> 00:17:30,410
backgroundColor. 

334
00:17:30,410 --> 00:17:31,660
Tāpēc cerams, ka tam ir jēga.

335
00:17:31,660 --> 00:17:33,743
Es atkal noklikšķinu uz pogas.

336
00:17:33,743 --> 00:17:35,042
Šai pogai ir nosaukums.

337
00:17:35,042 --> 00:17:38,071
Es vienkārši izmantoju šīs pogas
nosaukumu, InnerHTML satricinājumu 

338
00:17:38,071 --> 00:17:41,100
starp pogu tagiem, darot to visu ar
mazajiem burtiem. 

339
00:17:41,100 --> 00:17:44,175
Un tā ir krāsa, kurai es varu
piešķirt backgroundColor.

340
00:17:44,175 --> 00:17:47,073
Atkal, jūs varat spēlēties ar to,
kad jūs mānījat, ja sekojat šim 

341
00:17:47,073 --> 00:17:49,971
videoklipam un, iespējams, iestatāt
citas dažādas krāsas, lai 

342
00:17:49,971 --> 00:17:52,870
redzētu, ka varat veikt arī šīs
izmaiņas. 

343
00:17:52,870 --> 00:17:55,790
Un tad mums ir šī jQuery versija.

344
00:17:55,790 --> 00:17:59,100
Un mēs šeit vēlreiz apskatīsim
HTML.

345
00:17:59,100 --> 00:18:01,350
Ņemiet vērā, ka ar šo tas izskatās
nedaudz savādāk.

346
00:18:01,350 --> 00:18:03,810
Šoreiz nenorādīju onClick atribūtu.

347
00:18:03,810 --> 00:18:07,230
Es veidoju jaunu klasi, ko sauc par
jQuery pogu.

348
00:18:07,230 --> 00:18:10,380
Bet šķiet, ka nav nevienas
funkcijas, kas tiktu izsaukta.

349
00:18:10,380 --> 00:18:13,680
Tā ir sava veida blakusparādība
tam, kas notiek jQuery bibliotēkā.

350
00:18:13,680 --> 00:18:16,305
Un veids, kā darbojas jQuery — vai
viens no veidiem, kā jQuery var 

351
00:18:16,305 --> 00:18:18,930
darboties, ir tas, ka mēs varam
darīt kaut ko līdzīgu šim. 

352
00:18:18,930 --> 00:18:20,650
Tā izmanto anonīmas funkcijas.

353
00:18:20,650 --> 00:18:22,170
Atcerieties, ka, izmantojot
JavaScript, mums ir šāds jēdziens par 

354
00:18:22,170 --> 00:18:23,691
anonīmām funkcijām. 

355
00:18:23,691 --> 00:18:25,560
Mums var būt funkcijas, kurām nav
nosaukumu.

356
00:18:25,560 --> 00:18:29,100
Tātad šeit notiek tas, ka
dokuments — atkal ir vārds “document” - kad 

357
00:18:29,100 --> 00:18:32,640
dokumenta objekts ir pilnībā
ielādēts vai gatavs, lapa izpildīs tālāk 

358
00:18:32,640 --> 00:18:36,180
norādīto funkciju. 

359
00:18:36,180 --> 00:18:39,320
Tā teiks: es meklēšu katru
gadījumu, kad kaut kas pieder klasei — tas 

360
00:18:39,320 --> 00:18:42,460
ir tas mazais punkts, atcerieties,
ka no CSS — klases JQ poga parādās 

361
00:18:42,460 --> 00:18:45,600
lapā. 

362
00:18:45,600 --> 00:18:49,620
Un, kad tiek noklikšķināts uz kādas
no šīm pogām, es izpildīšu šo 

363
00:18:49,620 --> 00:18:53,640
citu anonīmo funkciju, kas principā
darīs to, ko mēs tikko redzējām 

364
00:18:53,640 --> 00:18:57,660
pēdējā piemērā, kur mēs visu pogas
tekstu pārveidojām ar mazajiem 

365
00:18:57,660 --> 00:19:01,680
burtiem, un tas kļūst par krāsas
nosaukumu, ko varam piešķirt. 

366
00:19:01,680 --> 00:19:03,910
Bet es tikai gatavojos to darīt,
izmantojot jQuery sintaksi, nevis 

367
00:19:03,910 --> 00:19:06,140
JavaScript sintaksi. 

368
00:19:06,140 --> 00:19:08,410
Tātad atkal tas, kas šeit notiek,
ir - dokuments, lapa ir pilnībā 

369
00:19:08,410 --> 00:19:10,680
ielādēta. 

370
00:19:10,680 --> 00:19:15,810
Un, kad lapa ir pilnībā ielādēta,
lapai tiek piemērota šāda funkcija.

371
00:19:15,810 --> 00:19:19,680
Katrai jQuery pogai tiek piešķirts
šis papildu atribūts, šis onClick 

372
00:19:19,680 --> 00:19:23,550
atribūts, tādējādi, noklikšķinot uz
tās, tā piešķir krāsu, 

373
00:19:23,550 --> 00:19:27,420
pamatojoties uz pogas tekstu. 

374
00:19:27,420 --> 00:19:31,110
Atkal, mēs neiedziļināsimies
daudzās detaļās par pašu jQuery.

375
00:19:31,110 --> 00:19:32,940
Tas ir sava veida vingrinājums
mājāsdarbam.

376
00:19:32,940 --> 00:19:36,183
Taču šī šeit redzamā versija ir
tieši tāda pati kā notikumu 

377
00:19:36,183 --> 00:19:39,426
apdarinātāja versija, ko tikko
redzējām tīrai JavaScript, izņemot 

378
00:19:39,426 --> 00:19:42,670
rakstītu jQuery stilā. 

379
00:19:42,670 --> 00:19:44,570
Un, ja es patiešām dodos uz tīmekļa
lapu, visas šīs četras pogas 

380
00:19:44,570 --> 00:19:46,470
faktiski darbojas. 

381
00:19:46,470 --> 00:19:49,350
Es varu noklikšķināt uz violetas
šeit, uz zaļas šeit.

382
00:19:49,350 --> 00:19:51,570
Es varu noklikšķināt uz oranžas,
sarkanas.

383
00:19:51,570 --> 00:19:54,580
Tās visas dara tieši to pašu.

384
00:19:54,580 --> 00:19:58,680
Tās to vienkārši dara, veicot pāris
dažādus paņēmienus.

385
00:19:58,680 --> 00:20:02,646
Cerams, ka varat izmantot šo
piemēru, lai sniegtu labāku izpratni par 

386
00:20:02,646 --> 00:20:06,613
funkciju izmantošanu JavaScript,
notikumu izmantošanu JavaScript un, 

387
00:20:06,613 --> 00:20:10,580
iespējams, izmēģinot jQuery. 

388
00:20:10,580 --> 00:20:13,600
Tātad, ja vēlaties uzzināt vairāk
par jQuery, izņemot to, par ko mēs 

389
00:20:13,600 --> 00:20:16,620
runājam šajā videoklipā, varat
doties uz jQuery dokumentāciju, kas ir 

390
00:20:16,620 --> 00:20:19,640
pieejama vietnē, ko redzat šeit
ekrānā. 

391
00:20:19,640 --> 00:20:22,545
Tā ir lieliska vieta, kur doties,
lai uzzinātu par dažām 

392
00:20:22,545 --> 00:20:25,450
interesantākajām lietām, ko varat
darīt, izmantojot jQuery. 

393
00:20:25,450 --> 00:20:30,130
Nedaudz vairāk par to mēs redzēsim
arī mūsu videoklipā par AJAX.

394
00:20:30,130 --> 00:20:31,090
Es esmu Dags Loids.

395
00:20:31,090 --> 00:20:33,020
Šis ir CS50.