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

2
00:00:04,439 --> 00:00:07,230
DOUG Lloyd: Tässä video, halusimme
huutaa erillinen huomiota

3
00:00:07,230 --> 00:00:09,110
on hyvin erityisesti
elementti JavaScript

4
00:00:09,110 --> 00:00:11,350
että saatat löytää kätevä
kun olet alkanut

5
00:00:11,350 --> 00:00:15,750
työskennellä manipuloimalla verkkosivuja ja
muuttamalla sisältöä Web-sivun

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

7
00:00:16,460 --> 00:00:19,450
Ja se on käsite
Document Object Model.

8
00:00:19,450 --> 00:00:23,030
Jotta näimme meidän video
JavaScript, esineet ovat hyvin joustavia.

9
00:00:23,030 --> 00:00:24,750
>> Ja ne voivat sisältää eri aloilla.

10
00:00:24,750 --> 00:00:28,075
Ja vaikka me ei mennä paljon
yksityiskohta, näillä aloilla tai ominaisuuksia,

11
00:00:28,075 --> 00:00:30,200
että olisimme luultavasti enemmän
asianmukaisesti soita heille

12
00:00:30,200 --> 00:00:33,915
yhteydessä esineen, jopa
nämä ominaisuudet voivat olla muita esineitä.

13
00:00:33,915 --> 00:00:36,210
Ja sisältä nämä esineet
voi olla muita esineitä.

14
00:00:36,210 --> 00:00:39,630
>> Sinulla on erittäin suuri esine
paljon muita esineitä

15
00:00:39,630 --> 00:00:43,550
sen sisällä, mikä tavallaan
luo tämä ajatus iso puu.

16
00:00:43,550 --> 00:00:47,540
Nyt, asiakirja esine on
hyvin erikoinen esine JavaScript

17
00:00:47,540 --> 00:00:52,580
joka järjestää teidän koko web
sivu nojalla tällainen sateenvarjo

18
00:00:52,580 --> 00:00:53,470
objektin.

19
00:00:53,470 --> 00:00:56,770
Ja niin sisällä asiakirjan
esine ovat esineitä esittää

20
00:00:56,770 --> 00:00:59,630
pään ja kehon Web-sivun.

21
00:00:59,630 --> 00:01:03,760
>> Sisältä ne ovat muiden
esineet, jne, jne,

22
00:01:03,760 --> 00:01:08,411
kunnes koko web-sivulla on
on järjestetty tässä suuressa esine.

23
00:01:08,411 --> 00:01:09,660
Mikä ylösalaisin täällä, eikö?

24
00:01:09,660 --> 00:01:12,170
No, osaamme työskennellä
esineitä JavaScript.

25
00:01:12,170 --> 00:01:15,840
>> Joten jos meillä on objektin
viittaa koko sivun, että

26
00:01:15,840 --> 00:01:19,590
tarkoitetaan soittamalla oikea
menetelmiä manipuloida että esine

27
00:01:19,590 --> 00:01:22,360
tai muuttamasta tiettyjä
sen ominaisuudet, me

28
00:01:22,360 --> 00:01:25,500
vaihtaa osia
meidän sivu ohjelmallisesti

29
00:01:25,500 --> 00:01:30,210
JavaScriptin avulla sen sijaan,
koodata asioita, vaikkapa HTML.

30
00:01:30,210 --> 00:01:33,760
Joten tässä on esimerkki
hyvin yksinkertainen web-sivun, eikö?

31
00:01:33,760 --> 00:01:35,850
Se sai HTML-tunnisteet, pää.

32
00:01:35,850 --> 00:01:37,979
>> Sisällä on otsikko, Hello World.

33
00:01:37,979 --> 00:01:38,770
Sitten minulla on elin.

34
00:01:38,770 --> 00:01:40,686
Sisältä että minulla on
kolme eri asiaa.

35
00:01:40,686 --> 00:01:44,170
Minulla H2 header tag,
kohta, ja linkki.

36
00:01:44,170 --> 00:01:45,920
Tämä on hyvin yksinkertainen web-sivu.

37
00:01:45,920 --> 00:01:48,590
>> No, mitä voisi asiakirja
vastustaa tämän näyttää?

38
00:01:48,590 --> 00:01:50,700
No, se on vähän
pelottava ehkä aluksi.

39
00:01:50,700 --> 00:01:52,510
Mutta se on oikeastaan ​​vain iso puu.

40
00:01:52,510 --> 00:01:54,890
Ja aivan juureen se on asiakirja.

41
00:01:54,890 --> 00:02:00,030
>> Sisällä asiakirjan on toinen
objekti viittaa HTML-sivuni.

42
00:02:00,030 --> 00:02:02,660
Ja HTML-sivuni on kaiken tämän.

43
00:02:02,660 --> 00:02:06,900
Ja sitten sisällä HTML
esine, minulla pää esine,

44
00:02:06,900 --> 00:02:09,000
jossa viitataan kaikkeen siellä.

45
00:02:09,000 --> 00:02:11,009
>> Ja sisällä siellä,
Minulla on otsikko esine.

46
00:02:11,009 --> 00:02:15,620
Ja sisältä siellä, minulla on toinen
väittävät, että on vain Hello World.

47
00:02:15,620 --> 00:02:18,020
Voisin olla kehoni
edustettuina näin.

48
00:02:18,020 --> 00:02:22,850
>> Sisällä ruumiini, olen H2
objekti ja p objekti kohta

49
00:02:22,850 --> 00:02:25,270
ja objektin linkin.

50
00:02:25,270 --> 00:02:29,660
Ja niin tämä koko hierarkia
voidaan esittää iso puu

51
00:02:29,660 --> 00:02:31,990
paljon pienempiä vähän
asiat tulee ulos siitä.

52
00:02:31,990 --> 00:02:33,740
Nyt, tietenkin, kun
olemme ohjelmointi, me

53
00:02:33,740 --> 00:02:35,560
usko asioita, kuten iso puu.

54
00:02:35,560 --> 00:02:37,980
Haluamme nähdä todellinen
koodi liittyviä asioita.

55
00:02:37,980 --> 00:02:40,790
>> Ja Onneksi voimme
käyttää kehitystyökaluja

56
00:02:40,790 --> 00:02:46,080
todella katsomaan
Tämän sivuston Document Object.

57
00:02:46,080 --> 00:02:48,150
Ja tehdään se.

58
00:02:48,150 --> 00:02:49,580
Joten olen avannut selaimen välilehti.

59
00:02:49,580 --> 00:02:51,540
>> Ja olen avannut Developer Tools.

60
00:02:51,540 --> 00:02:54,460
Ja minun video JavaScript, I
mainitsi, että konsoli ei ole

61
00:02:54,460 --> 00:02:56,770
vain jonnekin missä
me painamme tiedot,

62
00:02:56,770 --> 00:02:59,560
se on myös paikka, jossa
me voi syöttää tiedot.

63
00:02:59,560 --> 00:03:01,380
Tässä yhteydessä, mitä
Aion sanoa

64
00:03:01,380 --> 00:03:05,720
Haluaisin saada takaisin
asiakirja esineet,

65
00:03:05,720 --> 00:03:07,502
joten voin alkaa katsoa sitä.

66
00:03:07,502 --> 00:03:08,460
Miten voisin tehdä tämän?

67
00:03:08,460 --> 00:03:10,740
No, jos haluan
järjestää se todella hienosti,

68
00:03:10,740 --> 00:03:16,317
Aion sanoa console.dir, D-I-R.
Nyt käytän console.log vain tulosta

69
00:03:16,317 --> 00:03:17,400
jotain hyvin yksinkertaista.

70
00:03:17,400 --> 00:03:20,450
Mutta jos haluan järjestää tämän
hierarkkisesti kuin esine,

71
00:03:20,450 --> 00:03:23,800
Haluan se tavallaan strukturoitujen
kuten hakemistorakenne.

72
00:03:23,800 --> 00:03:27,400
>> Joten haluan console.dir asiakirja.

73
00:03:27,400 --> 00:03:28,430
Aion paina Enter.

74
00:03:28,430 --> 00:03:32,350
Ja juuri sen alla nyt,
ja minä suurentaa täällä,

75
00:03:32,350 --> 00:03:36,000
Minulla tämä vastaus asiakirja
hieman nuolen vieressä.

76
00:03:36,000 --> 00:03:39,470
Nyt, kun avaan tämän nuoli,
siellä tulee olemaan paljon tavaraa.

77
00:03:39,470 --> 00:03:42,560
>> Mutta aiomme jättää paljon
sitä ja juuri sellainen painopiste

78
00:03:42,560 --> 00:03:46,250
on tärkein osa, joten
voi alkaa navigoida tämän asiakirjan.

79
00:03:46,250 --> 00:03:50,125
Siellä on paljon enemmän DOM kuin
vain vanhemman solmuja ja lapsen solmuja.

80
00:03:50,125 --> 00:03:51,500
Siellä on paljon avustavia tavaraa.

81
00:03:51,500 --> 00:03:52,280
>> Joten aion avata tämän.

82
00:03:52,280 --> 00:03:54,610
Ja siellä on paljon
tavaraa avautuvasta.

83
00:03:54,610 --> 00:03:59,000
Mutta kaikki Välitän vain
täällä, lapsi solmut.

84
00:03:59,000 --> 00:04:00,410
Avataan että jopa.

85
00:04:00,410 --> 00:04:03,810
>> Sisältä siellä näen
jotain tuttua, HTML.

86
00:04:03,810 --> 00:04:07,670
Joten sisällä meidän asiakirjan
yhden tason alaspäin, HTML.

87
00:04:07,670 --> 00:04:08,550
Avaan että ylös.

88
00:04:08,550 --> 00:04:10,380
Mitä me odotamme?

89
00:04:10,380 --> 00:04:13,760
>> Jos muistatte meidän kaavio,
mitä meidän pitäisi löytää sisälle HTML?

90
00:04:13,760 --> 00:04:17,275
Mitkä kaksi solmua alitus puussa?

91
00:04:17,275 --> 00:04:17,899
Otetaan selvää.

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

93
00:04:18,940 --> 00:04:22,079
Menemme alas lapsisolmuilleen.

94
00:04:22,079 --> 00:04:23,440
>> Pop että avoin.

95
00:04:23,440 --> 00:04:25,990
On pään ja vartalon.

96
00:04:25,990 --> 00:04:28,540
Ja voimme avata pää.

97
00:04:28,540 --> 00:04:30,460
Mene lapsisolmuilleen.

98
00:04:30,460 --> 00:04:31,460
No, on otsikko.

99
00:04:31,460 --> 00:04:33,293
>> Ja voisimme mennä ja
tällaisena ikuisesti.

100
00:04:33,293 --> 00:04:34,770
Voisimme tehdä tätä kehon samoin.

101
00:04:34,770 --> 00:04:40,090
Mutta on tapa, jolla voimme tarkastella
asiakirja järjestetään iso kohde.

102
00:04:40,090 --> 00:04:42,610
Ja jos katsomme on suuri
esine, joka näyttää paljon

103
00:04:42,610 --> 00:04:47,480
kuten koodi, se tarkoittaa, että voimme aloittaa
manipuloida tämä iso objektin

104
00:04:47,480 --> 00:04:51,220
koodi muuttaa mitä
sivusto näyttää ja tuntuu.

105
00:04:51,220 --> 00:04:54,920
>> Niin se on aika tehokas työkalu
meillä on käytössämme nyt.

106
00:04:54,920 --> 00:04:57,360
Niin me juuri näin,
asiakirja esine itse

107
00:04:57,360 --> 00:05:01,392
ja kaikki objektit sen sisällä
on ominaisuuksia ja menetelmiä, vain

108
00:05:01,392 --> 00:05:04,100
kuten mikä tahansa muu esine, joka olemme
työskennellyt JavaScript.

109
00:05:04,100 --> 00:05:08,370
Mutta voimme käyttää näitä ominaisuuksia ja
käyttää näitä menetelmiä tavallaan porautua

110
00:05:08,370 --> 00:05:10,900
isosta asiakirjasta ja saada
alemmas ja alemmas ja alemmas,

111
00:05:10,900 --> 00:05:13,360
hienompaa ja hienompaa jyvät
yksityiskohtaisuus, kunnes

112
00:05:13,360 --> 00:05:17,510
saada hyvin erityinen pala meidän
Web-sivu, haluamme muuttaa.

113
00:05:17,510 --> 00:05:22,700
>> Ja kun Microsoft päivittää ominaisuudet
Document Object tai soita näitä menetelmiä,

114
00:05:22,700 --> 00:05:24,450
asioita voi tapahtua nettisivuillamme.

115
00:05:24,450 --> 00:05:28,420
Ja meidän ei tarvitse tehdä mitään virkistävä
että nuo muutokset tulevat voimaan.

116
00:05:28,420 --> 00:05:33,160
>> Ja se on aika siistiä kyky
on kun olemme kanssa koodi.

117
00:05:33,160 --> 00:05:37,185
Mitkä ovat joitakin näistä ominaisuuksista
jotka ovat osa Document Object?

118
00:05:37,185 --> 00:05:40,100
No, luultavasti näki
pari niistä todella nopeasti

119
00:05:40,100 --> 00:05:42,700
kun olimme zipping
läpi jättiläinen asiakirja

120
00:05:42,700 --> 00:05:45,150
esine me juuri näin selaimen.

121
00:05:45,150 --> 00:05:48,420
>> Mutta pari näitä ominaisuuksia
saattaa olla asioita, kuten sisäinen HTML.

122
00:05:48,420 --> 00:05:52,950
Ja saatat jopa muistaa minut
käyttämällä tätä JavaScript video

123
00:05:52,950 --> 00:05:54,950
aivan lopussa, kun
puhui tapahtumista.

124
00:05:54,950 --> 00:05:56,125
Mikä oli tämä sisäinen HTML?

125
00:05:56,125 --> 00:05:59,030
No, se on vain mitä
välillä tunnisteet.

126
00:05:59,030 --> 00:06:01,590
>> Ja niin sisä- HTML,
esimerkiksi otsikon

127
00:06:01,590 --> 00:06:05,390
tag, jos olisimme pitäneet menossa
että esimerkiksi hetki sitten,

128
00:06:05,390 --> 00:06:08,020
olisi ollut Hello World.

129
00:06:08,020 --> 00:06:10,140
Se oli otsikko sivuillemme.

130
00:06:10,140 --> 00:06:12,370
Muut ominaisuudet
ovat solmun nimi, joka

131
00:06:12,370 --> 00:06:15,810
on nimi HTML
elementti kuten otsikko.

132
00:06:15,810 --> 00:06:19,100
ID, joka on tunnus
ominaisuus HTML-elementti.

133
00:06:19,100 --> 00:06:23,790
>> Muista, että voimme erityisesti osoittaa
tiettyjä elementtejä meidän HTML

134
00:06:23,790 --> 00:06:27,510
kanssa ID ominaisuus, joka yleensä
on kätevä yhteydessä CSS,

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

136
00:06:29,000 --> 00:06:33,217
Vanhempi solmu, joka on viittaus
mitä vain ylös yläpuolellani DOM.

137
00:06:33,217 --> 00:06:35,800
Ja lapsisolmuja, joka on
viittaus mitä alhaalla minua.

138
00:06:35,800 --> 00:06:37,950
Ja näimme paljon, että
vain katsellut.

139
00:06:37,950 --> 00:06:42,970
Lapsi solmuja, niin saimme
alhaisempia puuhun.

140
00:06:42,970 --> 00:06:46,590
>> Attribuutteja, se on vain joukko
määritteitä HTML elementin.

141
00:06:46,590 --> 00:06:50,270
Niinpä esimerkiksi attribuutteja voisi
olla jos sinulla on kuva tag,

142
00:06:50,270 --> 00:06:54,090
se yleensä on lähdemääritteen,
ehkä korkeus ja leveys ominaisuus.

143
00:06:54,090 --> 00:06:57,120
Ja että olisi vain array
kaikista liitettyjä ominaisuuksia

144
00:06:57,120 --> 00:06:59,300
kanssa, että HTML-elementti.

145
00:06:59,300 --> 00:07:04,140
>> Tyyli on toinen, joka
ei edustaa CSS

146
00:07:04,140 --> 00:07:06,050
muotoilu tietyn elementin.

147
00:07:06,050 --> 00:07:08,310
Ja myöhemmin tässä
video, käymme erityisesti

148
00:07:08,310 --> 00:07:14,592
vipuvaikutus tyyli tehdä pari
muutoksista sivuillamme.

149
00:07:14,592 --> 00:07:15,800
Joten ne ovat joitakin ominaisuuksia.

150
00:07:15,800 --> 00:07:17,591
>> Ja on myös joitakin
menetelmiä, että voimme

151
00:07:17,591 --> 00:07:22,450
käyttää myös nopeammin ehkä eristää
elementtejä Document Object.

152
00:07:22,450 --> 00:07:26,730
Ehkä, monipuolisin
näistä on getElementById.

153
00:07:26,730 --> 00:07:31,190
Joten voisin sanoa jotain, koska
muistaa se menetelmä Document

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

155
00:07:34,880 --> 00:07:39,820
>> Ja sisältä ne suluissa, määritä
HTML-elementti, jossa erityisesti tunnus

156
00:07:39,820 --> 00:07:42,330
Yhdistän että olen aiemmin
set, ja minä heti

157
00:07:42,330 --> 00:07:46,685
mennä oikeuteen, että elementti
yleistä verkkosivuilla.

158
00:07:46,685 --> 00:07:49,310
Joten minun ei tarvitse ehkä porata
alas jokaisen kerroksen.

159
00:07:49,310 --> 00:07:52,841
Voin vain käyttää tätä menetelmää löytää se,
tavallaan kuin lämpöohjautuvilla ohjus,

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

161
00:07:53,340 --> 00:07:56,300
Se vain menee ja etsii
mitä se etsii.

162
00:07:56,300 --> 00:07:59,290
>> GetElementsByTagName on
hyvin samankaltainen hengessä.

163
00:07:59,290 --> 00:08:02,500
Ehkä tämä olisi löytää kaikki
lihavointikoodit tai kaikki p tunnisteet

164
00:08:02,500 --> 00:08:05,920
ja antaa minulle joukko kaiken
että voisin sitten työskennellä.

165
00:08:05,920 --> 00:08:12,080
AppendChild lisää jotain
yhden tason alaspäin puussa.

166
00:08:12,080 --> 00:08:16,440
>> Joten en voi lisätä koko uuden
elementti yhden tason alempi.

167
00:08:16,440 --> 00:08:19,700
Tai voin poistaa elementin, joka on
yhden tason alempi kuin hyvin, jos haluan

168
00:08:19,700 --> 00:08:22,870
poistaa jotain minun verkkosivu.

169
00:08:22,870 --> 00:08:28,480
Nyt, nopea koodaus huomata ja nopea
päänsärky säästää huomata, toivottavasti.

170
00:08:28,480 --> 00:08:31,670
>> getElementById-- d on pieniä kirjaimia.

171
00:08:31,670 --> 00:08:36,950
En voi kertoa teille, kuinka monta kertaa olen
käytetyt getElementById ja pitkävaikutteiset

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

173
00:08:38,336 --> 00:08:39,460
Koska se on todella yhteinen.

174
00:08:39,460 --> 00:08:42,990
Jos me kirjoittaa sanan tunnus, se on
yleensä pääoma I pääoma D.

175
00:08:42,990 --> 00:08:44,240
Ja minun koodi ei vain toimi.

176
00:08:44,240 --> 00:08:45,630
Ja en voi selvittää, miksi.

177
00:08:45,630 --> 00:08:49,490
Tämä on todella, todella, todella
yhteinen vika, jokainen tekee,

178
00:08:49,490 --> 00:08:51,890
jopa asiantuntijoista, jotka ovat
tehneet tätä ikuisesti.

179
00:08:51,890 --> 00:08:55,410
Joten olla tietoinen, getElementById,
että d on pieniä.

180
00:08:55,410 --> 00:09:00,080
Ja toivottavasti, joka säästää useita
minuuttia vähintään surua.

181
00:09:00,080 --> 00:09:02,204
>> Joten mitä tämä kaikki kertoo?

182
00:09:02,204 --> 00:09:03,120
Meillä on näitä menetelmiä.

183
00:09:03,120 --> 00:09:04,161
Meillä on näitä ominaisuuksia.

184
00:09:04,161 --> 00:09:06,610
Nyt, jos lähdetään
asiakirja, asiakirja.

185
00:09:06,610 --> 00:09:10,220
mitä voimme nyt saada mitään
yhdestä kotisivultamme

186
00:09:10,220 --> 00:09:14,870
että haluamme JavaScriptin avulla
vain soittamalla nämä menetelmät

187
00:09:14,870 --> 00:09:19,940
ja hyödyntämällä ominaisuudet
että löydämme eri paikkakunnilla.

188
00:09:19,940 --> 00:09:24,890
>> Tämä voi saada monisanainen, tämä
document.getElementById,

189
00:09:24,890 --> 00:09:28,560
ehkä on pitkä tunnisteen nimi,
ehkä tehdä enemmän puheluja myöhemmin.

190
00:09:28,560 --> 00:09:31,230
Asiat voivat saada hieman monisanainen.

191
00:09:31,230 --> 00:09:34,480
Ja kuten ohjelmoijat, kun olet
luultavasti nähdä monissa näistä videoista,

192
00:09:34,480 --> 00:09:36,600
emme pidä wordy asioita.

193
00:09:36,600 --> 00:09:38,520
>> Haluamme pystyä tekemään asioita nopeasti.

194
00:09:38,520 --> 00:09:42,640
Joten haluaisimme lisää
ytimekkäästi sanoa jotain.

195
00:09:42,640 --> 00:09:46,270
Joten tällainen johtaa
käsite jotain kutsutaan jQuery.

196
00:09:46,270 --> 00:09:49,170
Nyt jQuery ei ole JavaScript.

197
00:09:49,170 --> 00:09:50,350
Se ei ole osa JavaScript.

198
00:09:50,350 --> 00:09:54,790
>> On kirjasto, joka oli kirjoitettu
jotkut JavaScript ohjelmoijat

199
00:09:54,790 --> 00:09:57,060
noin 10 vuotta sitten.

200
00:09:57,060 --> 00:10:01,300
Ja sen tavoitteena on yksinkertaistaa tämä mitä
nimeltään client side scripting, joka

201
00:10:01,300 --> 00:10:04,310
on pohjimmiltaan mitä olimme
puhumme DOM manipulointia.

202
00:10:04,310 --> 00:10:11,090
Joten jos halusin muuttaa
taustaväri Web-sivun, ehkä

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

204
00:10:11,980 --> 00:10:15,325
>> Täällä, olen ilmeisesti saada
ElementById colorDiv.

205
00:10:15,325 --> 00:10:16,950
Ja haluan asettaa sen taustan väri.

206
00:10:16,950 --> 00:10:20,720
Jos olen vain käyttää puhdasta JavaScriptin
käyttäen Document Object Model,

207
00:10:20,720 --> 00:10:23,990
että on paljon tavaraa, eikö?
document.getElementById

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

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

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

211
00:10:28,050 --> 00:10:30,110
Se oli paljon sanottavaa.

212
00:10:30,110 --> 00:10:31,720
Se on paljon kirjoittaa, liian.

213
00:10:31,720 --> 00:10:35,760
Ja niin jQuery, voimme ehkä sanoa
tämä hieman enemmän ytimekkäästi.

214
00:10:35,760 --> 00:10:39,350
Kauppa pois on se ehkä hieman
hieman arvoituksellinen yhtäkkiä,

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

216
00:10:39,850 --> 00:10:43,580
>> Ainakin pitkä on hieman
selittäviä, mitä teemme.

217
00:10:43,580 --> 00:10:49,947
Tämä dollarin merkki, suluissa,
heittomerkki, hash, colorDiv, eikö?

218
00:10:49,947 --> 00:10:50,780
Mitä se tarkoittaa?

219
00:10:50,780 --> 00:10:53,640
No, se on pohjimmiltaan vain
document.getElementById colorDiv.

220
00:10:53,640 --> 00:10:58,700
>> Mutta se on tällainen pika
tapa tehdä se käyttäen jQuery.

221
00:10:58,700 --> 00:11:01,380
Haluan vain katsomaan nyt
on pari eri tavalla

222
00:11:01,380 --> 00:11:04,520
etten tekisi todella
käyttää Document Object

223
00:11:04,520 --> 00:11:06,807
Malli manipuloida kappaletta sivustoni.

224
00:11:06,807 --> 00:11:09,140
Erityisesti aiomme
työstää manipuloimalla

225
00:11:09,140 --> 00:11:14,090
väri tietyn
Div, colorDiv, Web-sivulle.

226
00:11:14,090 --> 00:11:15,299
Joten katsomaan joka.

227
00:11:15,299 --> 00:11:15,798
Selvä.

228
00:11:15,798 --> 00:11:16,700
Joten olen sivulla.

229
00:11:16,700 --> 00:11:20,750
Sitä kutsutaan test.html kun lataat
tämä jos haluat korjailla tämän.

230
00:11:20,750 --> 00:11:24,730
Ja minulla kasan
painikkeet tällä sivulla.

231
00:11:24,730 --> 00:11:27,730
Ja sanon yksittäisten toimintojen
tausta väri, violetti, vihreä,

232
00:11:27,730 --> 00:11:31,330
oranssi, punainen, sininen, yksi toiminto
tausta väri, tapahtumakäsittelijää

233
00:11:31,330 --> 00:11:34,360
tausta väri, ja jQuery.

234
00:11:34,360 --> 00:11:38,147
Mitä minä puhun
kun minä teen tämän?

235
00:11:38,147 --> 00:11:39,230
Joten olemme nähneet painikkeita.

236
00:11:39,230 --> 00:11:41,521
Nyt, katsomaan
jotkut lähdekoodin täällä.

237
00:11:41,521 --> 00:11:44,770
Aloitamme test.html.

238
00:11:44,770 --> 00:11:48,100
Joten yksittäisten toimintojen tausta
väri on mitä olen kirjoittanut täällä.

239
00:11:48,100 --> 00:11:49,350
Saanen selaa hieman.

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

241
00:11:56,170 --> 00:11:58,820
>> Ja huomaat, että minä
ovat määrittäneet nämä painikkeet

242
00:11:58,820 --> 00:12:03,990
sanoa, kun tätä painiketta painetaan,
soittaa toiminto punastua.

243
00:12:03,990 --> 00:12:06,670
Kun tätä painiketta valitse pikemminkin
soittaa toiminto muuttuu vihreäksi,

244
00:12:06,670 --> 00:12:08,710
käännä oranssi, muuttuvat punaisiksi, muuttuu siniseksi.

245
00:12:08,710 --> 00:12:11,880
Arvata, että tämä
ei ehkä ole paras suunnittelu

246
00:12:11,880 --> 00:12:12,460
järkeä, eikö?

247
00:12:12,460 --> 00:12:16,490
>> Olisi mukavaa, jos voisin
on yleisempää lähestymistapaa.

248
00:12:16,490 --> 00:12:19,570
No, ensimmäinen me katsomaan
mitä näiden viiden toiminnot

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

250
00:12:24,400 --> 00:12:27,250
vihreä, oranssi, punainen,
ja sininen, vastaavasti.

251
00:12:27,250 --> 00:12:30,930
Joten, ei erityisen paras design.

252
00:12:30,930 --> 00:12:33,390
>> Seuraava joukko painikkeet
Olen on Olen kirjoittanut

253
00:12:33,390 --> 00:12:36,380
yksi toiminto nimeltään
vaihtaa väriä että ilmeisesti

254
00:12:36,380 --> 00:12:38,960
hyväksyy merkkijonon sen väitettä.

255
00:12:38,960 --> 00:12:40,290
Joten tämä on vähän parempi.

256
00:12:40,290 --> 00:12:43,840
Violetti, vihreä, oranssi, punainen,
sininen on nyt argumentti.

257
00:12:43,840 --> 00:12:46,230
Joten olen kirjoittanut hieman yleisempi
tapauksessa JavaScript-toiminto,

258
00:12:46,230 --> 00:12:47,771
mikä saattaa näyttää tältä.

259
00:12:47,771 --> 00:12:48,680
Olen ohimennen.

260
00:12:48,680 --> 00:12:52,090
Tämä toiminto vaihtaa väriä on
odottaa argumentin nimeltä väri.

261
00:12:52,090 --> 00:12:54,970
Ja sanon asettaa
taustaväri väri.

262
00:12:54,970 --> 00:12:58,390
Joten tässä edustaa mitä minulla täällä.

263
00:12:58,390 --> 00:12:59,770
Niin, että on hieman parempi.

264
00:12:59,770 --> 00:13:02,740
>> Mutta en ehkä
parempaankin.

265
00:13:02,740 --> 00:13:06,140
Jos menemme katsomaan
klo tapahtumakäsittely tilanne,

266
00:13:06,140 --> 00:13:07,860
nyt kaikki nämä puhelut samannäköisiä.

267
00:13:07,860 --> 00:13:10,340
Jos muistatte meidän
keskustelua tapahtumankäsittelijät,

268
00:13:10,340 --> 00:13:15,770
Saan tietoa mikä
nämä painikkeet on napsautettu ja käyttää sitä.

269
00:13:15,770 --> 00:13:19,560
>> Ja niin event.JavaScript, olen
kirjallinen muutos väri tapahtuma, joka

270
00:13:19,560 --> 00:13:21,110
keksii joka napsautettiin.

271
00:13:21,110 --> 00:13:23,250
Se laukaista esine linja.

272
00:13:23,250 --> 00:13:25,240
Ja sitten täällä, se saa todella wordy.

273
00:13:25,240 --> 00:13:27,420
Mutta mitä olen tekemässä, että olen
asettamalla tausta

274
00:13:27,420 --> 00:13:30,340
väriä triggerObject inner.HTML.

275
00:13:30,340 --> 00:13:34,170
Se on tekstin
välillä painiketta tunnisteet.

276
00:13:34,170 --> 00:13:36,500
>> Ja sitten ilmeisesti on
asettaa sen pieniksi.

277
00:13:36,500 --> 00:13:40,780
Ja näin voin muuntaa koko
merkkijono pieniksi kirjaimiksi JavaScript käyttäen

278
00:13:40,780 --> 00:13:42,940
että menetelmä pieniksi.

279
00:13:42,940 --> 00:13:46,570
Koska kun asetan väri,
kuten Yritän tehdä täällä,

280
00:13:46,570 --> 00:13:48,260
väri on oltava pieniksi.

281
00:13:48,260 --> 00:13:50,920
>> Mutta painiketta, joka minulla oli,
jos me katsomaan uudelleen,

282
00:13:50,920 --> 00:13:55,890
huomaa, että teksti on
kirjoitettu isolla P violetti.

283
00:13:55,890 --> 00:13:59,140
Ja sitten hyvin
pohja täällä, olen ilmeisesti

284
00:13:59,140 --> 00:14:02,630
yrittää tehdä tämän käyttämällä jQuery samoin.

285
00:14:02,630 --> 00:14:06,000
Ja tässä tapauksessa, en ole oikeastaan
jossa toimi lainkaan.

286
00:14:06,000 --> 00:14:11,430
Olen juuri sanoi luokkaa, että olen
käyttäen tämä painike on jQ painiketta.

287
00:14:11,430 --> 00:14:12,360
Se siitä.

288
00:14:12,360 --> 00:14:14,950
>> Joten miten jQuery tiedä mitä teen?

289
00:14:14,950 --> 00:14:18,740
Hyvin, tämä on yksi niistä eduista
slash haitat jQuery.

290
00:14:18,740 --> 00:14:21,560
Se voi haluan tehdä asioita
erittäin ytimekkäästi, mutta ehkä ei

291
00:14:21,560 --> 00:14:22,570
kuten intuitiivisesti.

292
00:14:22,570 --> 00:14:25,570
Ehkä nuo muut kolme tehdä
hieman enemmän mielessä, mitä olen tekemässä.

293
00:14:25,570 --> 00:14:29,010
Täällä kuitenkin, mitä on tekeillä?

294
00:14:29,010 --> 00:14:31,940
>> Ilmeisesti, luodaan
anonyymi toiminto

295
00:14:31,940 --> 00:14:36,790
että kuormat aina minun asiakirja
on valmis, niin document.ready,

296
00:14:36,790 --> 00:14:38,760
jotkut toiminto tulee tapahtumaan.

297
00:14:38,760 --> 00:14:40,490
Pohjimmiltaan, kun on asiakirja valmis?

298
00:14:40,490 --> 00:14:42,310
Se kun minun sivu on ladattu.

299
00:14:42,310 --> 00:14:46,540
>> Niin pian kuin minun sivu on ladattu,
Seuraava toiminto on aina valmis.

300
00:14:46,540 --> 00:14:54,310
Siinä sanotaan, jos kohde tyyppiä jQButton,
tai jos luokka jQButton on klikattu,

301
00:14:54,310 --> 00:14:55,570
suorita tämä toiminto.

302
00:14:55,570 --> 00:14:59,360
Joten tässä on kaksi nimettömänä tehtävät,
yksi määritelty sisällä muita.

303
00:14:59,360 --> 00:15:03,930
>> Joten minun koko konteksti
tässä toistaiseksi on minun sivu

304
00:15:03,930 --> 00:15:06,520
kun se lataa se kutsuu tätä toimintoa.

305
00:15:06,520 --> 00:15:09,740
Ja tämä toiminto odottaa
varten painiketta napsautetaan.

306
00:15:09,740 --> 00:15:14,490
Ja kun painiketta napsautetaan, jQ
painike erityisesti napsautetaan,

307
00:15:14,490 --> 00:15:17,150
se kutsuu tätä muut
toiminto, joka on menossa

308
00:15:17,150 --> 00:15:21,250
asettaa taustan
väri colorDiv olla

309
00:15:21,250 --> 00:15:25,990
mikä teksti on välillä tunnisteet.

310
00:15:25,990 --> 00:15:28,050
>> Tämä on käsite
joka napsautettiin.

311
00:15:28,050 --> 00:15:31,230
Mutta muuten tämä on eräänlainen
käyttäytyy samanlainen tapahtuma.

312
00:15:31,230 --> 00:15:34,460
Se on vain samalla tavalla I
olisi ilmaista tämä jQuery.

313
00:15:34,460 --> 00:15:36,790
Taaskin se on luultavasti
paljon enemmän uhkaava.

314
00:15:36,790 --> 00:15:40,840
Se ei ole niin selkeä kuin
jotain event.js,

315
00:15:40,840 --> 00:15:45,080
joka on ehkä hieman enemmän
verbose, mutta hieman vähemmän

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

317
00:15:46,000 --> 00:15:51,460
>> Mutta jos me pop takaisin yli minun selain
ikkuna, jos aloitan clicking-- hyvin,

318
00:15:51,460 --> 00:15:52,690
että muutettu violetti.

319
00:15:52,690 --> 00:15:54,450
Tämä on vihreä käyttäen merkkijono menetelmää.

320
00:15:54,450 --> 00:15:56,500
Tämä on oranssi käyttäen tapahtumakäsittelijän.

321
00:15:56,500 --> 00:15:58,300
>> Tämä on punainen jQuery, eikö?

322
00:15:58,300 --> 00:16:01,270
Ne kaikki käyttäytyvät täsmälleen sama.

323
00:16:01,270 --> 00:16:06,509
He vain tekevät sen eri
lähestyy ongelman ratkaisemiseksi.

324
00:16:06,509 --> 00:16:08,550
Siellä on paljon enemmän
jQuery niin olemme varmasti

325
00:16:08,550 --> 00:16:10,050
aio puhua tämän videon.

326
00:16:10,050 --> 00:16:15,410
Mutta jos haluat oppia lisää, voit
Siirry jQuery lajitella asiakirjojen

327
00:16:15,410 --> 00:16:19,710
ja oppia melko vähän lisää
tämä erittäin joustava kirjasto, joka

328
00:16:19,710 --> 00:16:22,550
on hyvä tehdä asiakkaan puolella
scripting kuten mitä teimme

329
00:16:22,550 --> 00:16:26,240
manipuloida ulkoasua
ja tuntea meidän sivun

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

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

332
00:16:29,650 --> 00:16:31,930
Tämä on CS50.

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