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

2
00:00:04,439 --> 00:00:07,230
DOUG LLOYD: Bideo honetan, nahi dugu
arreta bereizi deitzeko

3
00:00:07,230 --> 00:00:09,110
oso zehatz bati
Javascript-elementu

4
00:00:09,110 --> 00:00:11,350
handy aurkitu dezakezu hori
denean hasten zaren

5
00:00:11,350 --> 00:00:15,750
den web orriak manipulatzeko lan egiteko eta
zure web edukia aldatzen

6
00:00:15,750 --> 00:00:16,460
unean.

7
00:00:16,460 --> 00:00:19,450
Eta hori nozioa da
Document Object Model du.

8
00:00:19,450 --> 00:00:23,030
Beraz, ikusi gure bideoa garen
Ikusteko Javascript-a, objektu oso malguak dira.

9
00:00:23,030 --> 00:00:24,750
>> Eta hainbat arlotan eduki ahal izango dute.

10
00:00:24,750 --> 00:00:28,075
Eta nahiz eta ez genuen asko sartu
Zehatz-mehatz, eremu edo propietate horiek,

11
00:00:28,075 --> 00:00:30,200
ziurrenik gehiago litzateke dugun
egokian deitu

12
00:00:30,200 --> 00:00:33,915
Objektu baten testuinguruan, nahiz eta
propietate horiek beste objektu izan daiteke.

13
00:00:33,915 --> 00:00:36,210
Eta objektu horien barruan
beste objektu izan daiteke.

14
00:00:36,210 --> 00:00:39,630
>> Objektu oso handiak honetako daukazu
beste objektu asko batera

15
00:00:39,630 --> 00:00:43,550
horren barruan, zein moduko
Zuhaitz handi baten ideia hori sortzen.

16
00:00:43,550 --> 00:00:47,540
Orain, dokumentu objektu bat
Ikusteko Javascript-objektu bat oso berezia

17
00:00:47,540 --> 00:00:52,580
Hori zure web osoan antolatzen
aterki moduko honen pean orria

18
00:00:52,580 --> 00:00:53,470
Objektu baten.

19
00:00:53,470 --> 00:00:56,770
Eta beraz, agiri horien barruan
Objektu aurkeztuz objektuak daude

20
00:00:56,770 --> 00:00:59,630
Burua eta gorputza zure web orrialdetik.

21
00:00:59,630 --> 00:01:03,760
>> Horien barruan, beste hauek dira
objektuak, eta abar, eta abar,

22
00:01:03,760 --> 00:01:08,411
Zure web orria osoa izan arte
antolatu da objektu handi honetan.

23
00:01:08,411 --> 00:01:09,660
Zer da hemen goitik, ezta?

24
00:01:09,660 --> 00:01:12,170
Beno, badakigu nola funtzionatuko
Ikusteko Javascript-a objektuekin.

25
00:01:12,170 --> 00:01:15,840
>> Beraz, objektu bat izan badugu
gure web orria osoa buruzkoa da, hau

26
00:01:15,840 --> 00:01:19,590
zuzena deituz esan
metodoak objektu hori manipulatzeko

27
00:01:19,590 --> 00:01:22,360
edo aldatzea jakin
haren propietate, dugu

28
00:01:22,360 --> 00:01:25,500
elementu alda daiteke
Gure orrialdea programazioaren

29
00:01:25,500 --> 00:01:30,210
Javascript ordez beharrik erabiliz
, adibidez, HTML gauzak kode-.

30
00:01:30,210 --> 00:01:33,760
Hortaz, hona baten adibidea da
Oso erraz web orria, ezta?

31
00:01:33,760 --> 00:01:35,850
Honez HTML etiketa, buru bat lortu.

32
00:01:35,850 --> 00:01:37,979
>> Inside izenburua, kaixo mundua ez da.

33
00:01:37,979 --> 00:01:38,770
Ondoren gorputz bat daukat.

34
00:01:38,770 --> 00:01:40,686
Horren barruan, tengo
Hiru gauza desberdinak.

35
00:01:40,686 --> 00:01:44,170
H2 goiburua etiketa bat daukat,
paragrafo bat, eta lotura bat.

36
00:01:44,170 --> 00:01:45,920
Honek web orri bat oso erraza da.

37
00:01:45,920 --> 00:01:48,590
>> Beno, zer dokumentu haiek
itxura horretarako aurka?

38
00:01:48,590 --> 00:01:50,700
Beno, pixka bat da
scary agian lehen.

39
00:01:50,700 --> 00:01:52,510
Baina benetan Zuhaitz handi bat besterik ez.

40
00:01:52,510 --> 00:01:54,890
Eta hori oso erro at idazkia.

41
00:01:54,890 --> 00:02:00,030
>> Barruan dokumentuaren beste bat
Objektu nire orriaren HTML aipatuz.

42
00:02:00,030 --> 00:02:02,660
Eta nire orriaren HTML hori guztia.

43
00:02:02,660 --> 00:02:06,900
Eta gero HTML-barrutik
objektu, burua objektu bat daukat,

44
00:02:06,900 --> 00:02:09,000
eta hori guztia ez dagokio.

45
00:02:09,000 --> 00:02:11,009
>> Eta han barruan,
Izenburua objektu bat daukat.

46
00:02:11,009 --> 00:02:15,620
Eta han barruan, beste bat izan nuen
objektu hori besterik kaixo mundua da.

47
00:02:15,620 --> 00:02:18,020
Nire gorputza izan dut
Hau atsegin irudikatzen.

48
00:02:18,020 --> 00:02:22,850
>> Nire gorputza barrutik, H2 bat dut
Objektu eta p paragrafoan dagoen objektu bat

49
00:02:22,850 --> 00:02:25,270
eta lotura bat objektu baten bat.

50
00:02:25,270 --> 00:02:29,660
Eta hierarkia osoa hau orain
zuhaitz handi bat bezala irudikatzen ahal

51
00:02:29,660 --> 00:02:31,990
apur bat txikiagoa asko
gauzak irteten.

52
00:02:31,990 --> 00:02:33,740
Baina, noski, betiere
, dugu programatzen ari gara

53
00:02:33,740 --> 00:02:35,560
ez gauzak pentsatu Zuhaitz handi baten antzera.

54
00:02:35,560 --> 00:02:37,980
Benetako ikusi nahi dugu
kodea lotutako.

55
00:02:37,980 --> 00:02:40,790
>> Eta zorionez, ahal dugun
gure garapen tresnak erabili

56
00:02:40,790 --> 00:02:46,080
Begirada bat benetan hartu
Atari honetako dokumentu objektu.

57
00:02:46,080 --> 00:02:48,150
Eta utzi egin dutela.

58
00:02:48,150 --> 00:02:49,580
Beraz ireki zuen ditudan nabigatzailean fitxa bat.

59
00:02:49,580 --> 00:02:51,540
>> Eta ireki dut up garapen tresnak.

60
00:02:51,540 --> 00:02:54,460
Eta nire video Ikusteko Javascript-a ere, I
aipatu kontsola ez da

61
00:02:54,460 --> 00:02:56,770
Nonbaiten bakarrik non
Informazio inprimatu dugu,

62
00:02:56,770 --> 00:02:59,560
gainera, ez da leku bat non
sarrerako Informazio ahal dugun.

63
00:02:59,560 --> 00:03:01,380
Testuinguru honetan, zer
Esan nahi da noa

64
00:03:01,380 --> 00:03:05,720
Itzuli nahi nuke
dokumentu objektuak,

65
00:03:05,720 --> 00:03:07,502
beraz, begirada bat izan nahi dut.

66
00:03:07,502 --> 00:03:08,460
Beraz, nola liteke hori?

67
00:03:08,460 --> 00:03:10,740
Beno, bada nahi dut
antolatzen da benetan nicely,

68
00:03:10,740 --> 00:03:16,317
Console.dir, D-I-R esan noa.
Orain, console.log erabili besterik inprimatu nahi dut

69
00:03:16,317 --> 00:03:17,400
zerbait oso erraza da.

70
00:03:17,400 --> 00:03:20,450
Baina hau antolatu nahi badut
hierarkikoki objektu bat bezala,

71
00:03:20,450 --> 00:03:23,800
Sort egituratuta nahi dut
zerbitzuaren egitura bezala.

72
00:03:23,800 --> 00:03:27,400
>> Beraz dokumentuaren console.dir nahi dut.

73
00:03:27,400 --> 00:03:28,430
Sartu sakatu dut.

74
00:03:28,430 --> 00:03:32,350
Eta eskuineko bere azpian, orain,
eta mapan handiago dut hemen,

75
00:03:32,350 --> 00:03:36,000
Dut erantzunez dokumentu honetan
gezi txiki bat da hurrengo.

76
00:03:36,000 --> 00:03:39,470
Orain, gezi hau ireki nuen,
Ez da gauza asko izango.

77
00:03:39,470 --> 00:03:42,560
>> Baina ari gara asko alde batetara joan
la da eta foku-mota besterik

78
00:03:42,560 --> 00:03:46,250
garrantzitsuena parte, dugu, beraz,
dokumentu honetan nabigatzen has daiteke.

79
00:03:46,250 --> 00:03:50,125
Askoz baino DOM gehiago
besterik guraso nodo eta ume nodoak.

80
00:03:50,125 --> 00:03:51,500
Ez dago gauza laguntzaileak asko da.

81
00:03:51,500 --> 00:03:52,280
>> Beraz, ez dut hau irekitzeko gora.

82
00:03:52,280 --> 00:03:54,610
Eta asko oso bat da
stuff azalduko da.

83
00:03:54,610 --> 00:03:59,000
Baina arduratu dut guztiak
hementxe, ume nodoak.

84
00:03:59,000 --> 00:04:00,410
Utzi duten zabalduko da sortu.

85
00:04:00,410 --> 00:04:03,810
>> Han barruan ikusten dut
zerbait ezaguna, HTML.

86
00:04:03,810 --> 00:04:07,670
Beraz, gure dokumentuaren barruan
Maila bat behera, HTML.

87
00:04:07,670 --> 00:04:08,550
Hori ireki dut.

88
00:04:08,550 --> 00:04:10,380
Zer ari gara zain?

89
00:04:10,380 --> 00:04:13,760
>> Gogoratzen baduzu, gure diagrama batetik,
zer aurkitu behar dugu HTML barruan?

90
00:04:13,760 --> 00:04:17,275
Zer bi nodo da beherago daude zuhaitzean?

91
00:04:17,275 --> 00:04:17,899
Jakin dezagun.

92
00:04:17,899 --> 00:04:18,940
Ireki dugu HTML.

93
00:04:18,940 --> 00:04:22,079
Jaitsiko gara bere seme-alaba nodo.

94
00:04:22,079 --> 00:04:23,440
>> Pop irekita dagoela.

95
00:04:23,440 --> 00:04:25,990
Badira burua eta gorputza da.

96
00:04:25,990 --> 00:04:28,540
Eta ireki ahal izango dugu buruan.

97
00:04:28,540 --> 00:04:30,460
Bere seme-alaba nodo Joan.

98
00:04:30,460 --> 00:04:31,460
Beno, ez dago izenburua da.

99
00:04:31,460 --> 00:04:33,293
>> Eta joan izan dugu eta
Hau atsegin betiko.

100
00:04:33,293 --> 00:04:34,770
Horretarako izan dugu gorputzarekin baita.

101
00:04:34,770 --> 00:04:40,090
Baina ez digu begiratzeko modu bat da
objektu handi bat bezala antolatu dokumentua.

102
00:04:40,090 --> 00:04:42,610
Eta begiratzen dugu at bada handi bat da
asko begiratzen duten objektu

103
00:04:42,610 --> 00:04:47,480
kodea bezala, horrek esan nahi du, ezin dugu hasteko
Objektu handi hau manipulatzeko erabiliz

104
00:04:47,480 --> 00:04:51,220
kode zer aldatu den gure
Webgune itxura eta sentitzen bezala.

105
00:04:51,220 --> 00:04:54,920
>> Beraz, hori tresna nahiko indartsua da
gure eskura dugu orain.

106
00:04:54,920 --> 00:04:57,360
Beraz, ikusi dugun bezala, etorri
dokumentuaren objektu bera

107
00:04:57,360 --> 00:05:01,392
eta, horren barruan objektu guztiak
propietate eta metodo dute, besterik ez

108
00:05:01,392 --> 00:05:04,100
Hori dugu beste edozein objektu bezala
izan Javascript duten lanean.

109
00:05:04,100 --> 00:05:08,370
Baina propietate horiek erabili ahal izango dugu eta
metodo horiek erabiltzeko moduko zulatzeko behera

110
00:05:08,370 --> 00:05:10,900
dokumentu handi batetik eta
txikiagoak eta txikiagoak eta txikiagoak,

111
00:05:10,900 --> 00:05:13,360
finagoa eta finagoa aleak
xehetasun-, genuen arte

112
00:05:13,360 --> 00:05:17,510
pieza oso zehatz bat lortzeko gure
hori aldatu nahi dugu web orria.

113
00:05:17,510 --> 00:05:22,700
>> Eta noiz propietate eguneratu dugu
Dokumentuaren objektu edo metodo horiek deitu,

114
00:05:22,700 --> 00:05:24,450
Gauzak liteke gure web orrian gertatuko.

115
00:05:24,450 --> 00:05:28,420
Eta ez dugu behar freskagarri edozein egin
Aldaketa horiek hartu eraginik izan.

116
00:05:28,420 --> 00:05:33,160
>> Eta hori nahiko cool gaitasuna da
kode batekin ari gara lanean dute.

117
00:05:33,160 --> 00:05:37,185
Beraz, zer dira propietate horietako batzuen
duen dokumentu objektu baten zati dira?

118
00:05:37,185 --> 00:05:40,100
Beno, ziurrenik ikusi duzu bat
Horietako pare benetan azkar

119
00:05:40,100 --> 00:05:42,700
konprimituta genuenaren
dokumentu erraldoiaren bidez

120
00:05:42,700 --> 00:05:45,150
Objektu web nabigatzailea ikusi besterik ez dugu.

121
00:05:45,150 --> 00:05:48,420
>> Baina propietate horiek pare bat
barruko HTML bezalako gauza izan liteke.

122
00:05:48,420 --> 00:05:52,950
Eta nahiz eta baliteke gogoratzen dit
honek JavaScript bideoa erabiliz

123
00:05:52,950 --> 00:05:54,950
oso amaieran dudanean
gertaerei buruz hitz egiten zen.

124
00:05:54,950 --> 00:05:56,125
Zein izan da barruko HTML hau?

125
00:05:56,125 --> 00:05:59,030
Beno, besterik ez da zer da
tags artean.

126
00:05:59,030 --> 00:06:01,590
>> Eta beraz, barruko HTML,
adibidez, izenburua du

127
00:06:01,590 --> 00:06:05,390
Etiketa, mantendu izan bagenu ere joan
Adibidez, duela une bat,

128
00:06:05,390 --> 00:06:08,020
Mundu izango zatekeen kaixo.

129
00:06:08,020 --> 00:06:10,140
Hori da gure orriaren izenburua izan zen.

130
00:06:10,140 --> 00:06:12,370
Beste ezaugarri
besteak beste nodo izena, eta bertan

131
00:06:12,370 --> 00:06:15,810
HTML baten izena da
elementu izenburu gisa, hala nola.

132
00:06:15,810 --> 00:06:19,100
NAN, zein identifikazio da
HTML elementu bat egozten diote.

133
00:06:19,100 --> 00:06:23,790
>> Gogoratu ezin dugula bereziki adierazi
Gure HTML elementu espezifikoak

134
00:06:23,790 --> 00:06:27,510
ID atributu bat, ohi dituzten
erabilgarria dator CSS testuinguru batean,

135
00:06:27,510 --> 00:06:29,000
zehazki.

136
00:06:29,000 --> 00:06:33,217
Guraso nodo, zein erreferentzia bat da
Zer da besterik me gainetik gora DOM ere.

137
00:06:33,217 --> 00:06:35,800
Eta ume nodo, hau da, bat
Zer da niretzat behean behera erreferentzia.

138
00:06:35,800 --> 00:06:37,950
Eta hori asko ikusi ditugu
besterik bidez bilatzen.

139
00:06:37,950 --> 00:06:42,970
Child nodoak, hori nola lortu dugu
gero eta apalagoa zuhaitz sartu.

140
00:06:42,970 --> 00:06:46,590
>> Atributuak, hori besterik array bat
HTML elementu egozten.

141
00:06:46,590 --> 00:06:50,270
Beraz atributuak adibide bat gerta daiteke
izan Image etiketa bat izanez gero,

142
00:06:50,270 --> 00:06:54,090
normalean iturburu-attribute bat du,
agian, altuera eta zabalera atributu bat.

143
00:06:54,090 --> 00:06:57,120
Eta beraz, ez litzateke, besterik gabe, bateria izango
ezaugarri-guztien

144
00:06:57,120 --> 00:06:59,300
HTML elementu horrekin.

145
00:06:59,300 --> 00:07:04,140
>> Beste estilo bat dela argi
adierazten du CSS du

146
00:07:04,140 --> 00:07:06,050
elementu jakin baten Sorozabal.

147
00:07:06,050 --> 00:07:08,310
Eta beranduago honetan on
bideo, zehazki egingo dugu

148
00:07:08,310 --> 00:07:14,592
leverage estilo pare bat egiteko
Gure webgunean egindako aldaketak.

149
00:07:14,592 --> 00:07:15,800
Beraz, horiek propietate batzuk.

150
00:07:15,800 --> 00:07:17,591
>> Eta badira ere
metodoak ahal dugun

151
00:07:17,591 --> 00:07:22,450
erabili halaber azkarrago agian isolatzea
Dokumentuaren Objektu elementu.

152
00:07:22,450 --> 00:07:26,730
Agian, gehien polifazetikoa
getElementById izateaz horiek.

153
00:07:26,730 --> 00:07:31,190
Beraz, agian antzeko zerbait esan dut, izan ere,
Gogoan izanik Dokumentuaren metodo bat da

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

155
00:07:34,880 --> 00:07:39,820
>> Eta barruan Parentesi horiek, zehaztu
NAN jakin batekin HTML elementu bat

156
00:07:39,820 --> 00:07:42,330
egozten diote aurrez Dudan
ezarri, eta berehala egingo dut

157
00:07:42,330 --> 00:07:46,685
go elementu hori izateko eskubidea
Webgune globala bezala.

158
00:07:46,685 --> 00:07:49,310
Alegia, ez dute agian zulatzeko
geruza bakoitzean bakarra bitartez behera.

159
00:07:49,310 --> 00:07:52,841
Besterik ez dut erabili ahal metodo hau aurkitu,
Sort bero bila misil bat bezala,

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

161
00:07:53,340 --> 00:07:56,300
Besterik doa eta aurkitzen du
zehazki zer da bilatzen.

162
00:07:56,300 --> 00:07:59,290
>> GetElementsByTagName da
oso antzeko espirituz.

163
00:07:59,290 --> 00:08:02,500
Agian hau guztia aurkituko litzateke
tags lodia edo p etiketa guztietan

164
00:08:02,500 --> 00:08:05,920
eta eman dit dena array bat
dudala zezaketen batekin lan.

165
00:08:05,920 --> 00:08:12,080
appendChild zerbait gehitzen
Maila bat zuhaitzean behera.

166
00:08:12,080 --> 00:08:16,440
>> Beraz berria oso bat gehitu ahal izango dut
elementu maila bat baxuagoa.

167
00:08:16,440 --> 00:08:19,700
Edo hori da elementu bat kendu ahal izango dut
Maila bat baxuagoa baita nahi badut

168
00:08:19,700 --> 00:08:22,870
Nire web orritik zerbait ezabatzeko.

169
00:08:22,870 --> 00:08:28,480
Orain, bat azkar kodetze ohar eta azkar bat
buruko mina ohar aurreztea, zorionez.

170
00:08:28,480 --> 00:08:31,670
>> getElementById-- d minuskula da.

171
00:08:31,670 --> 00:08:36,950
Ezin dizut esan zenbat aldiz I duzu
Erabilitako getElementById eta larriz

172
00:08:36,950 --> 00:08:38,336
d bertan.

173
00:08:38,336 --> 00:08:39,460
Benetan ohikoa delako.

174
00:08:39,460 --> 00:08:42,990
Hitz ID idazten badugu, ez da
Ohi capital I kapital D.

175
00:08:42,990 --> 00:08:44,240
Eta nire kodea besterik ez du funtzionatzen.

176
00:08:44,240 --> 00:08:45,630
Eta ezin dut irudikatu zergatik.

177
00:08:45,630 --> 00:08:49,490
Hau da, benetan, benetan, benetan
bug komun denek egiten duten,

178
00:08:49,490 --> 00:08:51,890
nahiz eta adituek duten
dira betiko lan hau egiteko.

179
00:08:51,890 --> 00:08:55,410
Beraz, kontuan izan, getElementById,
d duten minuskulaz da.

180
00:08:55,410 --> 00:09:00,080
Eta zorionez, aurrezten duzu hainbat
heartache gutxienez minutu.

181
00:09:00,080 --> 00:09:02,204
>> Beraz, zer hori guztia esaten digu?

182
00:09:02,204 --> 00:09:03,120
Metodo hauek ditugu.

183
00:09:03,120 --> 00:09:04,161
Propietate hauek ditugu.

184
00:09:04,161 --> 00:09:06,610
Orain, hasteko bada dugun
dokumentu, dokumentu.

185
00:09:06,610 --> 00:09:10,220
edozein dela ere, gaur egun ezin dugu inolako iristeko
gure web orria pieza bakar

186
00:09:10,220 --> 00:09:14,870
Ikusteko Javascript-a erabiliz nahi dugun
besterik metodo horiek deituz

187
00:09:14,870 --> 00:09:19,940
eta propietate aprobetxatuz
aurkitu dugun leku desberdinetan.

188
00:09:19,940 --> 00:09:24,890
>> Hau wordy lor daiteke, hau
document.getElementByID,

189
00:09:24,890 --> 00:09:28,560
Agian marka luzea dute,
agian, dei gehiago egin duzu geroago.

190
00:09:28,560 --> 00:09:31,230
Gauzak pixka bat wordy lor daiteke.

191
00:09:31,230 --> 00:09:34,480
Eta programatzaile gisa, duzun bezala
ziurrenik bideo horietako asko ikusi,

192
00:09:34,480 --> 00:09:36,600
ez dugu nahi wordy gauza.

193
00:09:36,600 --> 00:09:38,520
>> Gauzak azkar egiteko gai izan nahi dugu.

194
00:09:38,520 --> 00:09:42,640
Beraz, gehiago bat nahi genuke
zehatza modu zerbait esateko.

195
00:09:42,640 --> 00:09:46,270
Beraz eramaten moduko honetan
Zerbait nozioa jQuery izeneko.

196
00:09:46,270 --> 00:09:49,170
Orain jQuery ez da Javascript.

197
00:09:49,170 --> 00:09:50,350
Ez da JavaScript zati da.

198
00:09:50,350 --> 00:09:54,790
>> Liburutegi bat izan zen idatzia da
Javascript programatzaileak batzuk

199
00:09:54,790 --> 00:09:57,060
Duela 10 urte inguru.

200
00:09:57,060 --> 00:10:01,300
Eta bere helburua, hau zer da sinplifikatzeko
bezeroaren aldeko scripting izenekoa,

201
00:10:01,300 --> 00:10:04,310
da, funtsean, zer besterik izan ginen
buruz hitz egiten DOM manipulazio batera.

202
00:10:04,310 --> 00:10:11,090
Eta hala bada aldatu nahi nuen
hondo nire web orria kolorea, agian,

203
00:10:11,090 --> 00:10:11,980
Div partida bat.

204
00:10:11,980 --> 00:10:15,325
>> Hemen, itxuraz naiz lortzean dut
ElementById colorDiv.

205
00:10:15,325 --> 00:10:16,950
Eta bere background color ezarri nahi dut.

206
00:10:16,950 --> 00:10:20,720
Besterik Javascript pure dut erabiltzen bada
Dokumentuaren Objektu Modelo erabiliz,

207
00:10:20,720 --> 00:10:23,990
Hori gauza handia da, ezta?
document.getElementByID

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

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
Hori zeresanik izan zen.

212
00:10:30,110 --> 00:10:31,720
Zerbait idatzi asko da, gehiegi.

213
00:10:31,720 --> 00:10:35,760
Eta beraz, jQuery, dugu, agian, esan daiteke
hau pixka bat gehiago laburki.

214
00:10:35,760 --> 00:10:39,350
Merkataritzako da baloia off etorri da agian pixka bat
bit gehiago críptica Bat-batean,

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

216
00:10:39,850 --> 00:10:43,580
>> Gutxienez luzea da, pixka bat gehiago
zer egiten ari garen moduan azaltzen.

217
00:10:43,580 --> 00:10:49,947
Honek dolarraren ikurra, parentesi
barra arrunta, hash, colorDiv, ezta?

218
00:10:49,947 --> 00:10:50,780
Zer esan nahi du horrek?

219
00:10:50,780 --> 00:10:53,640
Beno, hori da, funtsean, besterik gabe,
document.getElementByID colorDiv.

220
00:10:53,640 --> 00:10:58,700
>> Baina takigrafia moduko hau da
jQuery erabiliz horretan egiten.

221
00:10:58,700 --> 00:11:01,380
Dezagun, besterik gabe, begirada bat
modu ezberdinetan pare batean

222
00:11:01,380 --> 00:11:04,520
Egia esan, agian dut
Dokumentuaren Objektu hau erabiltzeko

223
00:11:04,520 --> 00:11:06,807
Model nire gune piezak manipulatzeko.

224
00:11:06,807 --> 00:11:09,140
Hain zuzen ere, goazen
manipulatzeko beharreko lan

225
00:11:09,140 --> 00:11:14,090
jakin baten kolorea
Div, colorDiv, web orri baten gainean.

226
00:11:14,090 --> 00:11:15,299
Beraz, dezagun begirada bat.

227
00:11:15,299 --> 00:11:15,798
Ados.

228
00:11:15,798 --> 00:11:16,700
Beraz nago orri batean nuen.

229
00:11:16,700 --> 00:11:20,750
Deitzen test.html deskargatzen duzun
horri hau tinker nahi baduzu.

230
00:11:20,750 --> 00:11:24,730
Eta Dut mordo bat
Orrialde honetako botoiak.

231
00:11:24,730 --> 00:11:27,730
Eta naiz funtzio banakako esaten dut
atzeko kolorea morea, berdea,

232
00:11:27,730 --> 00:11:31,330
laranja, gorria, urdina, funtzio bakar
background color for, gertaera kudeatzailea

233
00:11:31,330 --> 00:11:34,360
atzeko kolorea, eta jQuery erabiliz.

234
00:11:34,360 --> 00:11:38,147
Zer ari naiz buruz hitz egiten
hori egiten ari naiz?

235
00:11:38,147 --> 00:11:39,230
Beraz, ikusi dugu botoiak.

236
00:11:39,230 --> 00:11:41,521
Orain, dezagun begirada bat
iturburu-kodea hemen batzuk.

237
00:11:41,521 --> 00:11:44,770
Test.html batekin hasiko gara.

238
00:11:44,770 --> 00:11:48,100
Atzerako funtzio Beraz banakako
kolorea da hemen I Idatzi.

239
00:11:48,100 --> 00:11:49,350
Let me apur bat korrituko da.

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

241
00:11:56,170 --> 00:11:58,820
>> Eta nik hori nabarituko duzu
Horien botoiak definitu dute

242
00:11:58,820 --> 00:12:03,990
botoi honetan klik egitean esateko,
buelta morea deitu funtzioa.

243
00:12:03,990 --> 00:12:06,670
Egin botoi hau sakatu, baizik eta,
deitu funtzioa aktibatzeko berdea,

244
00:12:06,670 --> 00:12:08,710
piztu laranja, gorria piztu, piztu urdina.

245
00:12:08,710 --> 00:12:11,880
Ziurrenik asmatzea hori
ez da beharbada onena diseinua

246
00:12:11,880 --> 00:12:12,460
Zentzu da, ezta?

247
00:12:12,460 --> 00:12:16,490
>> Polita izango litzateke, ahal banu
planteamendu orokorrago bat izatea.

248
00:12:16,490 --> 00:12:19,570
Beno, lehenengo begirada bat hartuko dugu
zer bost funtzio horiek dira

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

250
00:12:24,400 --> 00:12:27,250
berdea, laranja, gorria,
eta urdina, hurrenez hurren.

251
00:12:27,250 --> 00:12:30,930
Beraz, ez da bereziki diseinu onenak.

252
00:12:30,930 --> 00:12:33,390
>> Hurrengo botoiak multzoa
I izan da idatzi dut

253
00:12:33,390 --> 00:12:36,380
izeneko funtzio bakar bat
kolorez aldatzen diren itxuraz

254
00:12:36,380 --> 00:12:38,960
Kate bat bere argumentu bezala onartzen.

255
00:12:38,960 --> 00:12:40,290
Beraz, hau da, pixka bat hobea.

256
00:12:40,290 --> 00:12:43,840
Morea, berdea, laranja, gorria,
urdina da orain argudio bat.

257
00:12:43,840 --> 00:12:46,230
Beraz orokorrago bat idatzi dut
Kasu Javascript funtzioa,

258
00:12:46,230 --> 00:12:47,771
honen antzeko zerbait begiratu dezake.

259
00:12:47,771 --> 00:12:48,680
Pasatzen dut.

260
00:12:48,680 --> 00:12:52,090
Funtzioaren kolore aldaketa hau da
kolore izeneko argumentu bat espero.

261
00:12:52,090 --> 00:12:54,970
Eta ezarri esaten dut egin
hondo kolorea da.

262
00:12:54,970 --> 00:12:58,390
Hortaz, hona hemen zer dut adierazten du.

263
00:12:58,390 --> 00:12:59,770
Beraz, hori da pixka bat hobea.

264
00:12:59,770 --> 00:13:02,740
>> Baina gauza izan liteke I
ez da hori baino hobea.

265
00:13:02,740 --> 00:13:06,140
Jaitsiko gara begirada bat hartu behar bada
gertaera kudeatzailea egoera hartan,

266
00:13:06,140 --> 00:13:07,860
orain dei horien guztien itxura bera.

267
00:13:07,860 --> 00:13:10,340
Ba Gogoratzen baduzu, gure
gertaera kudeatzaileen buruzko eztabaida,

268
00:13:10,340 --> 00:13:15,770
Zein inguruko informazioa eskuratu ahal izango dut
Horien botoiak sakatu eta erabiltzen duten.

269
00:13:15,770 --> 00:13:19,560
>> Eta beraz event.JavaScript, eta ez dut
idatzizko aldaketa kolorea gertaera,

270
00:13:19,560 --> 00:13:21,110
zifrak bertan botoia zen bertan klik.

271
00:13:21,110 --> 00:13:23,250
Hori trigger objektu lerroan.

272
00:13:23,250 --> 00:13:25,240
Eta gero, hara, benetan wordy daukala.

273
00:13:25,240 --> 00:13:27,420
Baina, zer egiten ari naiz da naiz
Atzeko planoan ezarriz

274
00:13:27,420 --> 00:13:30,340
triggerObject inner.HTML den kolorea.

275
00:13:30,340 --> 00:13:34,170
Hori testua da
botoia etiketa artean.

276
00:13:34,170 --> 00:13:36,500
>> Eta gero, itxuraz daukat
ezarri minuskulan.

277
00:13:36,500 --> 00:13:40,780
Eta hori oso bat nola bihurtu ahal izango dut
katea Javascript minuskulan erabiliz

278
00:13:40,780 --> 00:13:42,940
Metodo hori minuskulan.

279
00:13:42,940 --> 00:13:46,570
Denean kolore bat ezarri dudalako,
hemen egiten saiatzen ari naiz gisa,

280
00:13:46,570 --> 00:13:48,260
kolorea du minuskulaz egon behar.

281
00:13:48,260 --> 00:13:50,920
>> Baina botoia hori izan nuen,
beste itxura hartzen badugu,

282
00:13:50,920 --> 00:13:55,890
nabarituko testua han da
capital morea P idatzita.

283
00:13:55,890 --> 00:13:59,140
Eta gero, oso
beheko hemen, I itxuraz

284
00:13:59,140 --> 00:14:02,630
saiatu eta egin jQuery erabiliz honetan baita.

285
00:14:02,630 --> 00:14:06,000
Eta, kasu honetan, ez naiz benetan
deituz funtzio guztietan.

286
00:14:06,000 --> 00:14:11,430
Besterik ez dut esan klasea naiz
botoi hau erabiliz JQ botoi bat da.

287
00:14:11,430 --> 00:14:12,360
Hori da.

288
00:14:12,360 --> 00:14:14,950
>> Beraz, nola daki jQuery zer egiten ari naiz?

289
00:14:14,950 --> 00:14:18,740
Beno, hau da abantaila bat
jQuery desabantailak barra.

290
00:14:18,740 --> 00:14:21,560
Gauzak egiteko aukera ematen dit daiteke
Oso laburki, baina agian ez

291
00:14:21,560 --> 00:14:22,570
gisa intuizioa.

292
00:14:22,570 --> 00:14:25,570
Agian horiek beste hiru egin a
bit gehiago senti zer egiten ari naiz.

293
00:14:25,570 --> 00:14:29,010
Hemen, ordea, zer gertatzen da?

294
00:14:29,010 --> 00:14:31,940
>> Antza denez, sortzen
Funtzio anonimoak

295
00:14:31,940 --> 00:14:36,790
zamak direnean nire dokumentuan
prest, beraz document.ready da,

296
00:14:36,790 --> 00:14:38,760
funtzio batzuk gertatuko da.

297
00:14:38,760 --> 00:14:40,490
Funtsean, dokumentu bat prest dago?

298
00:14:40,490 --> 00:14:42,310
It nire orria kargatu da.

299
00:14:42,310 --> 00:14:46,540
>> Beraz, ahalik eta azkarren nire orria kargatu duen moduan,
funtzioa honako prest dago beti.

300
00:14:46,540 --> 00:14:54,310
Esaten du, mota jQButton objektu bat bada,
edo klase jQButton ditu bertan klik badira,

301
00:14:54,310 --> 00:14:55,570
funtzio hau exekutatu.

302
00:14:55,570 --> 00:14:59,360
Hortaz, hona hemen bi funtzio anonimoa da,
bata bestearen barruan definitutako.

303
00:14:59,360 --> 00:15:03,930
>> Beraz, nire testuinguru osoa
Hemen, orain arte ez da nire orria

304
00:15:03,930 --> 00:15:06,520
lukeen kargatzen denean funtzio hau deitzen da.

305
00:15:06,520 --> 00:15:09,740
Eta funtzio hau zain dago
botoi bat, bertan klik egin behar da.

306
00:15:09,740 --> 00:15:14,490
Eta botoi bat klik egitean, JQ
botoia zehazki klik egiterakoan,

307
00:15:14,490 --> 00:15:17,150
beste hau deitzen da
funtzioa, hau da, joan

308
00:15:17,150 --> 00:15:21,250
hondo ezartzeko
colorDiv kolorea behar izan

309
00:15:21,250 --> 00:15:25,990
edozein dela testu tags artean dago.

310
00:15:25,990 --> 00:15:28,050
>> Hau ideia da
bertan botoia sakatu.

311
00:15:28,050 --> 00:15:31,230
Baina bestela, hau da Ordena
Gertaera baten antzekoa portatzen.

312
00:15:31,230 --> 00:15:34,460
Era horixe bera da I
hau adierazi nahi jQuery.

313
00:15:34,460 --> 00:15:36,790
Berriz ere, seguruenik bat
Asko gehiago beldurra.

314
00:15:36,790 --> 00:15:40,840
Ez da bezain argi
event.js antzeko zerbait,

315
00:15:40,840 --> 00:15:45,080
hau da, agian, pixka bat gehiago
, baina pixka bat xeheak gutxiago

316
00:15:45,080 --> 00:15:46,000
beldurra.

317
00:15:46,000 --> 00:15:51,460
>> Baina atzera irekiko dugu nire nabigatzailea baino gehiago bada
leiho, clicking-- hasi badut ondo,

318
00:15:51,460 --> 00:15:52,690
morea aldatu.

319
00:15:52,690 --> 00:15:54,450
Hau da berdea katea metodoa erabiliz.

320
00:15:54,450 --> 00:15:56,500
Hau laranja da gertaera kudeatzailea erabiliz.

321
00:15:56,500 --> 00:15:58,300
>> Hau gorria da jQuery erabiliz, ezta?

322
00:15:58,300 --> 00:16:01,270
Berdin-berdin jokatzen dute guztiek.

323
00:16:01,270 --> 00:16:06,509
Egiten dute, besterik gabe, desberdinak erabiliz
hurbiltzen arazoa konpontzeko.

324
00:16:06,509 --> 00:16:08,550
Askoz gehiago
Orduz jQuery zalantzarik gara

325
00:16:08,550 --> 00:16:10,050
bideo honetan buruz hitz egiteko.

326
00:16:10,050 --> 00:16:15,410
Baina gehiago jakin nahi baduzu, ezin duzu
jQuery dokumentazioa moduko joan

327
00:16:15,410 --> 00:16:19,710
eta ikasi nahiko pixka bat gehiago
liburutegi oso malgua hau, eta horrek

328
00:16:19,710 --> 00:16:22,550
da bezero aldean egiten handia
hala nola, zer egiten ari ginen bezala scripting

329
00:16:22,550 --> 00:16:26,240
Begirada manipulatzeko
eta gure web orriaren sentitzen

330
00:16:26,240 --> 00:16:28,750
the Document Object Model batera.

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

332
00:16:29,650 --> 00:16:31,930
Hau CS50 da.

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