1 00:00:00,000 --> 00:00:04,439 2 00:00:04,439 --> 00:00:07,230 DOUG LLOYD: In hierdie video, ons wou om uit te roep aparte aandag 3 00:00:07,230 --> 00:00:09,110 om 'n baie besondere element van JavaScript 4 00:00:09,110 --> 00:00:11,350 wat jy dalk nuttig vind wanneer jy begin 5 00:00:11,350 --> 00:00:15,750 om te werk op te manipuleer webblaaie en die inhoud van jou web bladsy te verander 6 00:00:15,750 --> 00:00:16,460 op die vlieg. 7 00:00:16,460 --> 00:00:19,450 En dit is die idee van die Document Object Model. 8 00:00:19,450 --> 00:00:23,030 So as ons gesien het in ons video op JavaScript, voorwerpe is baie buigsaam. 9 00:00:23,030 --> 00:00:24,750 >> En hulle kan verskeie velde bevat. 10 00:00:24,750 --> 00:00:28,075 En al het ons nie in 'n baie gaan detail, daardie velde of eienskappe, 11 00:00:28,075 --> 00:00:30,200 dat ons sou waarskynlik meer hulle gepas noem 12 00:00:30,200 --> 00:00:33,915 in die konteks van 'n voorwerp, selfs daardie eiendomme kan ander voorwerpe. 13 00:00:33,915 --> 00:00:36,210 En binnekant van die voorwerpe kan ander voorwerpe. 14 00:00:36,210 --> 00:00:39,630 >> Jy het hierdie baie groot voorwerp met 'n baie ander voorwerpe 15 00:00:39,630 --> 00:00:43,550 binnekant van dit, wat soort van skep die idee van 'n groot boom. 16 00:00:43,550 --> 00:00:47,540 Nou, die dokument is 'n voorwerp baie spesiale voorwerp in JavaScript 17 00:00:47,540 --> 00:00:52,580 dat jou hele web organiseer bladsy onder hierdie soort van sambreel 18 00:00:52,580 --> 00:00:53,470 van 'n voorwerp. 19 00:00:53,470 --> 00:00:56,770 En so binnekant van die dokument voorwerp is voorwerpe aanbieding 20 00:00:56,770 --> 00:00:59,630 die kop en liggaam van jou webblad. 21 00:00:59,630 --> 00:01:03,760 >> Binnekant van die ander voorwerpe, ensovoorts, ensovoorts, 22 00:01:03,760 --> 00:01:08,411 totdat jou hele webblad het georganiseer is in hierdie groot voorwerp. 23 00:01:08,411 --> 00:01:09,660 Wat is die onderstebo hier, reg? 24 00:01:09,660 --> 00:01:12,170 Wel, ons weet hoe om te werk met voorwerpe in JavaScript. 25 00:01:12,170 --> 00:01:15,840 >> So as ons 'n voorwerp wat verwys na ons hele webblad, wat 26 00:01:15,840 --> 00:01:19,590 beteken deur die roeping van die korrekte metodes om daardie voorwerp te manipuleer 27 00:01:19,590 --> 00:01:22,360 of wysiging van sekere van sy eienskappe, ons 28 00:01:22,360 --> 00:01:25,500 kan die elemente van verandering ons blad programmaties 29 00:01:25,500 --> 00:01:30,210 die gebruik van JavaScript in plaas van om om dinge met, sê, HTML-kode. 30 00:01:30,210 --> 00:01:33,760 So hier is 'n voorbeeld van 'n baie eenvoudige webblad, reg? 31 00:01:33,760 --> 00:01:35,850 Dit het HTML tags, 'n kop. 32 00:01:35,850 --> 00:01:37,979 >> Binnekant van daar is 'n titel, hello wêreld. 33 00:01:37,979 --> 00:01:38,770 Dan het ek 'n liggaam. 34 00:01:38,770 --> 00:01:40,686 Binnekant van dit, ek het drie verskillende dinge. 35 00:01:40,686 --> 00:01:44,170 Ek het 'n h2 kop tag, 'n paragraaf, en 'n skakel. 36 00:01:44,170 --> 00:01:45,920 Dit is 'n baie eenvoudige webblad. 37 00:01:45,920 --> 00:01:48,590 >> Wel, wat kan die dokument beswaar vir hierdie lyk? 38 00:01:48,590 --> 00:01:50,700 Wel, dit is 'n bietjie scary miskien by die eerste. 39 00:01:50,700 --> 00:01:52,510 Maar dit is regtig net 'n groot boom. 40 00:01:52,510 --> 00:01:54,890 En by die wortel van dit is n dokument. 41 00:01:54,890 --> 00:02:00,030 >> Binnekant van die dokument is 'n ander voorwerp verwys na die HTML van my bladsy. 42 00:02:00,030 --> 00:02:02,660 En die HTML van my bladsy is al hierdie dinge. 43 00:02:02,660 --> 00:02:06,900 En dan binnekant van die HTML voorwerp, ek het 'n kop voorwerp, 44 00:02:06,900 --> 00:02:09,000 wat verwys na alles wat daar. 45 00:02:09,000 --> 00:02:11,009 >> En binnekant van daar, Ek het 'n titel voorwerp. 46 00:02:11,009 --> 00:02:15,620 En binnekant van daar, ek het 'n ander beswaar dis net hello world. 47 00:02:15,620 --> 00:02:18,020 Ek kon my liggaam verteenwoordig soos hierdie. 48 00:02:18,020 --> 00:02:22,850 >> Binnekant van my liggaam, ek het 'n h2 voorwerp en 'n p voorwerp paragraaf 49 00:02:22,850 --> 00:02:25,270 en 'n voorwerp 'n vir 'n skakel. 50 00:02:25,270 --> 00:02:29,660 En so hierdie hele hiërargie kan word as 'n groot boom 51 00:02:29,660 --> 00:02:31,990 met baie van die kleiner bietjie dinge kom uit dit uit. 52 00:02:31,990 --> 00:02:33,740 Nou, natuurlik, wanneer ons programmering, ons 53 00:02:33,740 --> 00:02:35,560 dink nie dinge soos 'n groot boom. 54 00:02:35,560 --> 00:02:37,980 Ons wil sien werklike kode verwante dinge. 55 00:02:37,980 --> 00:02:40,790 >> En gelukkig, ons kan gebruik ons ​​ontwikkelaar gereedskap 56 00:02:40,790 --> 00:02:46,080 om werklik 'n blik op se hierdie webwerf dokument voorwerp. 57 00:02:46,080 --> 00:02:48,150 En laat ons dit doen. 58 00:02:48,150 --> 00:02:49,580 So Ek het 'n blad leser oopgemaak. 59 00:02:49,580 --> 00:02:51,540 >> En ek het Developer Tools oopgemaak. 60 00:02:51,540 --> 00:02:54,460 En in my video op JavaScript, I genoem dat die konsole is nie 61 00:02:54,460 --> 00:02:56,770 net iewers waar ons druk inligting, 62 00:02:56,770 --> 00:02:59,560 dit is ook 'n plek waar Ons kan insette inligting. 63 00:02:59,560 --> 00:03:01,380 In hierdie konteks, wat Ek gaan om te sê, is 64 00:03:01,380 --> 00:03:05,720 Ek wil graag om terug te kry die dokument voorwerpe, 65 00:03:05,720 --> 00:03:07,502 sodat ek kan begin om 'n blik op dit. 66 00:03:07,502 --> 00:03:08,460 So hoe kan ek dit doen? 67 00:03:08,460 --> 00:03:10,740 Wel, as ek wil organiseer dit regtig mooi, 68 00:03:10,740 --> 00:03:16,317 Ek gaan om te sê console.dir, D-I-R. Nou, ek gebruik console.log net druk 69 00:03:16,317 --> 00:03:17,400 iets baie eenvoudig. 70 00:03:17,400 --> 00:03:20,450 Maar as ek wil organiseer hierargies soos 'n voorwerp, 71 00:03:20,450 --> 00:03:23,800 Ek wil dit soort van gestruktureerde soos 'n directory struktuur. 72 00:03:23,800 --> 00:03:27,400 >> So ek wil dokument console.dir. 73 00:03:27,400 --> 00:03:28,430 Ek gaan druk Enter. 74 00:03:28,430 --> 00:03:32,350 En reg onder dit nou, en ek sal hier zoom, 75 00:03:32,350 --> 00:03:36,000 Ek het hierdie reaksie dokument het met 'n bietjie pyltjie langs dit. 76 00:03:36,000 --> 00:03:39,470 Nou, wanneer ek dit pyl oopmaak, daar gaan 'n baie dinge wees. 77 00:03:39,470 --> 00:03:42,560 >> Maar ons gaan 'n baie te ignoreer dit en net soort van fokus 78 00:03:42,560 --> 00:03:46,250 op die belangrikste deel, sodat ons kan begin om hierdie dokument te navigeer. 79 00:03:46,250 --> 00:03:50,125 Daar is 'n baie meer om die DOM as net ouer en kind nodes nodes. 80 00:03:50,125 --> 00:03:51,500 Daar is 'n baie ondergeskikte dinge. 81 00:03:51,500 --> 00:03:52,280 >> So ek gaan om dit te open. 82 00:03:52,280 --> 00:03:54,610 En daar is 'n hele klomp dinge wat verskyn. 83 00:03:54,610 --> 00:03:59,000 Maar al wat ek omgee is reg hier, kind nodes. 84 00:03:59,000 --> 00:04:00,410 Kom ons oop te maak. 85 00:04:00,410 --> 00:04:03,810 >> Binnekant van daar sien ek iets bekende, HTML. 86 00:04:03,810 --> 00:04:07,670 So binnekant van ons dokument een vlak af, HTML. 87 00:04:07,670 --> 00:04:08,550 Ek oop te maak. 88 00:04:08,550 --> 00:04:10,380 Wat verwag ons? 89 00:04:10,380 --> 00:04:13,760 >> As jy onthou van ons diagram, Wat moet ons vind binnekant van HTML? 90 00:04:13,760 --> 00:04:17,275 Watter twee nodes is onder dit in die boom? 91 00:04:17,275 --> 00:04:17,899 Kom ons vind uit. 92 00:04:17,899 --> 00:04:18,940 Ons open HTML. 93 00:04:18,940 --> 00:04:22,079 Ons gaan af na die kind nodes. 94 00:04:22,079 --> 00:04:23,440 >> Pop wat oop. 95 00:04:23,440 --> 00:04:25,990 Daar is kop en liggaam. 96 00:04:25,990 --> 00:04:28,540 En ons kan maak die kop. 97 00:04:28,540 --> 00:04:30,460 Gaan na die kind nodes. 98 00:04:30,460 --> 00:04:31,460 Wel, daar is die titel. 99 00:04:31,460 --> 00:04:33,293 >> En ons kon gaan en soos hierdie vir ewig. 100 00:04:33,293 --> 00:04:34,770 Ons kan dit doen met die liggaam sowel. 101 00:04:34,770 --> 00:04:40,090 Maar daar is 'n manier vir ons om te kyk na die dokument georganiseer as 'n groot voorwerp. 102 00:04:40,090 --> 00:04:42,610 En as ons kyk na 'n groot voorwerp wat 'n baie lyk 103 00:04:42,610 --> 00:04:47,480 soos code, dit beteken dat ons kan begin om hierdie groot voorwerp te manipuleer met behulp van 104 00:04:47,480 --> 00:04:51,220 kode te verander wat ons webwerf lyk en voel. 105 00:04:51,220 --> 00:04:54,920 >> So dit is 'n mooi kragtige instrument ons het tot ons beskikking nou. 106 00:04:54,920 --> 00:04:57,360 So as ons nou net gesien het, die dokument voorwerp self 107 00:04:57,360 --> 00:05:01,392 en al die voorwerpe binnekant van dit het eienskappe en metodes, net 108 00:05:01,392 --> 00:05:04,100 soos enige ander voorwerp wat ons het is besig met in JavaScript. 109 00:05:04,100 --> 00:05:08,370 Maar ons kan die eienskappe te gebruik gebruik die metodes om soort van boor af 110 00:05:08,370 --> 00:05:10,900 van die groot dokument en kry laer en laer en laer, 111 00:05:10,900 --> 00:05:13,360 fyner en fyner korrels detail, totdat ons 112 00:05:13,360 --> 00:05:17,510 kry om 'n baie spesifieke stukkie van ons webblad wat ons wil om te verander. 113 00:05:17,510 --> 00:05:22,700 >> En toe ons eienskappe van die werk Dokumenteer voorwerp of bel daardie metodes, 114 00:05:22,700 --> 00:05:24,450 dinge kan gebeur op ons webblad. 115 00:05:24,450 --> 00:05:28,420 En ons het nie nodig om enige verfrissende doen om die veranderinge in werking tree. 116 00:05:28,420 --> 00:05:33,160 >> En dit is 'n pretty cool vermoë om wanneer ons werk met 'n kode. 117 00:05:33,160 --> 00:05:37,185 So, wat is 'n paar van hierdie eienskappe wat deel is van 'n dokument voorwerp? 118 00:05:37,185 --> 00:05:40,100 Wel, het jy waarskynlik het 'n paar van hulle werklik vinnig 119 00:05:40,100 --> 00:05:42,700 as ons aanritsen deur die reuse-dokument 120 00:05:42,700 --> 00:05:45,150 voorwerp sien ons net in die web browser. 121 00:05:45,150 --> 00:05:48,420 >> Maar 'n paar van hierdie eienskappe dalk dinge soos innerlike HTML. 122 00:05:48,420 --> 00:05:52,950 En jy kan selfs onthou my die gebruik van hierdie in die JavaScript video 123 00:05:52,950 --> 00:05:54,950 aan die einde wanneer ek praat oor die gebeure. 124 00:05:54,950 --> 00:05:56,125 Wat was hierdie innerlike HTML? 125 00:05:56,125 --> 00:05:59,030 Wel, dit is net wat tussen die tags. 126 00:05:59,030 --> 00:06:01,590 >> En so het die innerlike HTML, byvoorbeeld, van die titel 127 00:06:01,590 --> 00:06:05,390 tag, as ons aan die gang gehou in wat byvoorbeeld 'n oomblik gelede 128 00:06:05,390 --> 00:06:08,020 sou die wêreld gewees hallo. 129 00:06:08,020 --> 00:06:10,140 Dit was die titel van ons blad. 130 00:06:10,140 --> 00:06:12,370 Ander eienskappe sluit node naam, wat 131 00:06:12,370 --> 00:06:15,810 is die naam van 'n HTML element soos die titel. 132 00:06:15,810 --> 00:06:19,100 ID, wat is die ID kenmerk van 'n HTML element. 133 00:06:19,100 --> 00:06:23,790 >> Onthou dat ons spesiaal kan aandui spesifieke elemente van ons HTML 134 00:06:23,790 --> 00:06:27,510 met 'n ID kenmerk, wat gewoonlik handig te pas kom in die konteks van CSS, 135 00:06:27,510 --> 00:06:29,000 spesifiek. 136 00:06:29,000 --> 00:06:33,217 Ouer knoop, wat is 'n verwysing na wat net bo my in die DOM. 137 00:06:33,217 --> 00:06:35,800 En kind nodes, wat 'n verwysing na wat is af onder my. 138 00:06:35,800 --> 00:06:37,950 En ons het 'n baie van daardie net deur te kyk. 139 00:06:37,950 --> 00:06:42,970 Kind nodes, dit is hoe ons laer en laer in die boom. 140 00:06:42,970 --> 00:06:46,590 >> Eienskappe, dit is net 'n skikking van die eienskappe van die HTML element. 141 00:06:46,590 --> 00:06:50,270 So 'n voorbeeld van die eienskappe mag wees as jy 'n beeld tag, 142 00:06:50,270 --> 00:06:54,090 dit het gewoonlik 'n bron kenmerk, miskien 'n hoogte en 'n breedte kenmerk. 143 00:06:54,090 --> 00:06:57,120 En so sou dit net 'n verskeidenheid wees van al die eienskappe wat verband hou 144 00:06:57,120 --> 00:06:59,300 met daardie HTML element. 145 00:06:59,300 --> 00:07:04,140 >> Styl is 'n ander een wat verteenwoordig nie die CSS 146 00:07:04,140 --> 00:07:06,050 stilering van 'n bepaalde element. 147 00:07:06,050 --> 00:07:08,310 En later in hierdie video, sal ons spesifiek 148 00:07:08,310 --> 00:07:14,592 hefboom styl om 'n paar te maak van veranderinge aan ons webwerf. 149 00:07:14,592 --> 00:07:15,800 So dit is 'n paar eienskappe. 150 00:07:15,800 --> 00:07:17,591 >> En daar is ook sommige metodes wat ons kan 151 00:07:17,591 --> 00:07:22,450 gebruik om ook vinniger miskien isoleer elemente van die dokument voorwerp. 152 00:07:22,450 --> 00:07:26,730 Miskien, die mees veelsydige poste getElementById. 153 00:07:26,730 --> 00:07:31,190 So ek kan sê iets soos, want onthou dit is 'n metode van die dokument 154 00:07:31,190 --> 00:07:34,880 Beswaar, document.getElementById. 155 00:07:34,880 --> 00:07:39,820 >> En binnekant van die hakies, spesifiseer 'n HTML-element met 'n bepaalde ID 156 00:07:39,820 --> 00:07:42,330 skryf dat ek voorheen stel, en ek sal onmiddellik 157 00:07:42,330 --> 00:07:46,685 gaan reg om daardie element van die algehele webwerf. 158 00:07:46,685 --> 00:07:49,310 So ek hoef nie te boor miskien af deur elke enkele laag. 159 00:07:49,310 --> 00:07:52,841 Ek kan net gebruik hierdie metode om dit te vind, soort van soos 'n hitte-soekende missiel, 160 00:07:52,841 --> 00:07:53,340 reg? 161 00:07:53,340 --> 00:07:56,300 Dit gaan net en vind presies wat dit soek. 162 00:07:56,300 --> 00:07:59,290 >> GetElementsByTagName is baie soortgelyk in die gees. 163 00:07:59,290 --> 00:08:02,500 Miskien is dit sal al die vind vet tags of al die p tags 164 00:08:02,500 --> 00:08:05,920 en gee my 'n verskeidenheid van alles dat ek kan dan werk. 165 00:08:05,920 --> 00:08:12,080 appendChild voeg iets een vlak in die boom. 166 00:08:12,080 --> 00:08:16,440 >> So ek kan 'n hele nuwe voeg element een vlak laer. 167 00:08:16,440 --> 00:08:19,700 Of ek kan 'n element wat is verwyder een vlak laer as goed as ek wil 168 00:08:19,700 --> 00:08:22,870 om iets van my webblad verwyder. 169 00:08:22,870 --> 00:08:28,480 Nou, 'n vinnige kodering kennis en 'n vinnige hoofpyn spaar noot, hopelik. 170 00:08:28,480 --> 00:08:31,670 >> getElementById-- die d is klein. 171 00:08:31,670 --> 00:08:36,950 Ek kan jou nie sê hoeveel keer ek gebruikte getElementById en gekapitaliseer 172 00:08:36,950 --> 00:08:38,336 die d daar. 173 00:08:38,336 --> 00:08:39,460 Want dit is baie algemeen. 174 00:08:39,460 --> 00:08:42,990 As ons skryf die woord ID, dit is gewoonlik kapitaal ek kapitaal D. 175 00:08:42,990 --> 00:08:44,240 En my kode net nie werk nie. 176 00:08:44,240 --> 00:08:45,630 En ek kan nie uitvind hoekom. 177 00:08:45,630 --> 00:08:49,490 Dit is 'n baie, baie, baie algemene fout wat almal maak, 178 00:08:49,490 --> 00:08:51,890 selfs deskundiges wat is dit vir ewig doen. 179 00:08:51,890 --> 00:08:55,410 Dus net bewus wees, getElementById, dat d is klein. 180 00:08:55,410 --> 00:09:00,080 En hopelik, dat jy 'n paar spaar minute ten minste hartseer. 181 00:09:00,080 --> 00:09:02,204 >> So wat beteken dit alles vir ons sê? 182 00:09:02,204 --> 00:09:03,120 Ons het hierdie metodes. 183 00:09:03,120 --> 00:09:04,161 Ons het hierdie eienskappe. 184 00:09:04,161 --> 00:09:06,610 Nou, as ons begin by dokument, dokument. 185 00:09:06,610 --> 00:09:10,220 wat ook al, ons kan nou enige enkele stuk van ons webblad 186 00:09:10,220 --> 00:09:14,870 wat ons wil met behulp van JavaScript net deur die roeping van hierdie metodes 187 00:09:14,870 --> 00:09:19,940 en die gebruik van die eienskappe dat ons op verskeie plekke. 188 00:09:19,940 --> 00:09:24,890 >> Dit kan kry langdradig, hierdie document.getElementByID, 189 00:09:24,890 --> 00:09:28,560 Miskien het 'n lang tag naam miskien meer oproepe te doen wat jy later. 190 00:09:28,560 --> 00:09:31,230 Dinge kan kry 'n bietjie langdradig. 191 00:09:31,230 --> 00:09:34,480 En as programmeerders, as jy het waarskynlik gesien word in baie van hierdie video's, 192 00:09:34,480 --> 00:09:36,600 ons hou nie langdradig dinge. 193 00:09:36,600 --> 00:09:38,520 >> Ons wil graag in staat wees om dinge vinnig te doen. 194 00:09:38,520 --> 00:09:42,640 So wil ons graag 'n meer bondige manier om iets te sê. 195 00:09:42,640 --> 00:09:46,270 So hierdie soort van lei tot die idee van iets genoem jQuery. 196 00:09:46,270 --> 00:09:49,170 Nou jQuery is nie JavaScript. 197 00:09:49,170 --> 00:09:50,350 Dit is nie deel van JavaScript. 198 00:09:50,350 --> 00:09:54,790 >> Dit is 'n biblioteek wat geskryf is deur sommige JavaScript programmeerders 199 00:09:54,790 --> 00:09:57,060 ongeveer 10 jaar gelede. 200 00:09:57,060 --> 00:10:01,300 En sy doel is om dit wat is vereenvoudig genoem kliënt kant skripte, wat 201 00:10:01,300 --> 00:10:04,310 is basies wat ons was net praat oor met DOM manipulasies. 202 00:10:04,310 --> 00:10:11,090 En so as ek wou die verander agtergrond van my webblad, miskien 203 00:10:11,090 --> 00:10:11,980 'n spesifieke Div. 204 00:10:11,980 --> 00:10:15,325 >> Hier, ek glo om ElementById colorDiv. 205 00:10:15,325 --> 00:10:16,950 En ek wil sy agtergrond kleur te stel. 206 00:10:16,950 --> 00:10:20,720 As ek net die gebruik van suiwer JavaScript die gebruik van die Document Object Model, 207 00:10:20,720 --> 00:10:23,990 dit is 'n baie dinge, reg? document.getElementByID 208 00:10:23,990 --> 00:10:25,531 colorDiv.style.backgroundColor = groen. 209 00:10:25,531 --> 00:10:27,260 210 00:10:27,260 --> 00:10:28,050 >> Sjoe. 211 00:10:28,050 --> 00:10:30,110 Dit was 'n baie te sê. 212 00:10:30,110 --> 00:10:31,720 Dit is 'n baie om te tik, ook. 213 00:10:31,720 --> 00:10:35,760 En so in jQuery, kan ons dalk sê dit 'n bietjie meer saaklik. 214 00:10:35,760 --> 00:10:39,350 Die vakbond af om dit miskien 'n bietjie bietjie meer kriptiese al van 'n skielike, 215 00:10:39,350 --> 00:10:39,850 reg? 216 00:10:39,850 --> 00:10:43,580 >> Ten minste is die lank is 'n bietjie meer Verduidelikende as wat ons doen. 217 00:10:43,580 --> 00:10:49,947 Dit dollar teken hakies, enkele aanhaling, hash, colorDiv, reg? 218 00:10:49,947 --> 00:10:50,780 Wat beteken dit? 219 00:10:50,780 --> 00:10:53,640 Wel, dit is basies net document.getElementByID colorDiv. 220 00:10:53,640 --> 00:10:58,700 >> Maar dit is hierdie soort van snelskrif manier om dit te doen met behulp van jQuery. 221 00:10:58,700 --> 00:11:01,380 Kom nou net 'n blik op 'n paar van die verskillende maniere 222 00:11:01,380 --> 00:11:04,520 dat ek kan eintlik gebruik van hierdie dokument Object 223 00:11:04,520 --> 00:11:06,807 Model om die stukke van my site te manipuleer. 224 00:11:06,807 --> 00:11:09,140 In die besonder, ons gaan om saam te werk op te manipuleer 225 00:11:09,140 --> 00:11:14,090 die kleur van 'n bepaalde Div, colorDiv, op 'n webblad. 226 00:11:14,090 --> 00:11:15,299 So laat ons neem 'n blik op dit. 227 00:11:15,299 --> 00:11:15,798 Alles reg. 228 00:11:15,798 --> 00:11:16,700 So ek is op 'n bladsy. 229 00:11:16,700 --> 00:11:20,750 Dit is bekend as test.html wanneer jy dit aflaai hierdie as jy wil geknoei met hierdie. 230 00:11:20,750 --> 00:11:24,730 En ek het 'n klomp van die het knoppies op hierdie bladsy. 231 00:11:24,730 --> 00:11:27,730 En ek is individuele funksies sê vir die agtergrond, pers, groen, 232 00:11:27,730 --> 00:11:31,330 oranje, rooi, blou, 'n enkele funksie vir die agtergrond, event handler 233 00:11:31,330 --> 00:11:34,360 vir die agtergrond, en met behulp van jQuery. 234 00:11:34,360 --> 00:11:38,147 Wat praat ek wanneer ek dit doen? 235 00:11:38,147 --> 00:11:39,230 So het ons die knoppies gesien. 236 00:11:39,230 --> 00:11:41,521 Nou, laat ons 'n blik op sommige van die bronkode hier. 237 00:11:41,521 --> 00:11:44,770 Ons begin met test.html. 238 00:11:44,770 --> 00:11:48,100 So individuele funksies vir agtergrond kleur is wat ek hier getik het. 239 00:11:48,100 --> 00:11:49,350 Laat my blaai 'n bietjie. 240 00:11:49,350 --> 00:11:56,170 241 00:11:56,170 --> 00:11:58,820 >> En jy sal sien dat ek het hierdie knoppies gedefinieer 242 00:11:58,820 --> 00:12:03,990 om te sê wanneer die knoppie is gekliek het, noem die funksie draai pers. 243 00:12:03,990 --> 00:12:06,670 Wanneer hierdie knoppie klik, eerder, noem die funksie groen, 244 00:12:06,670 --> 00:12:08,710 draai oranje, rooi, blou. 245 00:12:08,710 --> 00:12:11,880 Jy kan seker raai dat dit is miskien nie die beste ontwerp 246 00:12:11,880 --> 00:12:12,460 sin, reg? 247 00:12:12,460 --> 00:12:16,490 >> Dit sal lekker wees as ek kon 'n meer algemene benadering. 248 00:12:16,490 --> 00:12:19,570 Wel, die eerste sal ons 'n blik na wat die vyf funksies 249 00:12:19,570 --> 00:12:24,400 document.getElementByID colorDiv.style.background = pers, 250 00:12:24,400 --> 00:12:27,250 groen, oranje, rooi, en blou, onderskeidelik. 251 00:12:27,250 --> 00:12:30,930 So, veral nie die beste ontwerp. 252 00:12:30,930 --> 00:12:33,390 >> Die volgende stel knoppies Ek het is ek geskryf 253 00:12:33,390 --> 00:12:36,380 'n enkele funksie genoem kleur te verander wat blykbaar 254 00:12:36,380 --> 00:12:38,960 aanvaar 'n string as sy argument. 255 00:12:38,960 --> 00:12:40,290 So, dit is 'n bietjie beter. 256 00:12:40,290 --> 00:12:43,840 Pers, groen, oranje, rooi, blou is nou 'n argument. 257 00:12:43,840 --> 00:12:46,230 So ek geskryf 'n meer algemene geval JavaScript-funksie, 258 00:12:46,230 --> 00:12:47,771 wat iets soos hierdie kan kyk. 259 00:12:47,771 --> 00:12:48,680 Ek is verby in. 260 00:12:48,680 --> 00:12:52,090 Hierdie funksie verander van kleur is verwag 'n argument genoem kleur. 261 00:12:52,090 --> 00:12:54,970 En ek sê sit die agtergrond kleur. 262 00:12:54,970 --> 00:12:58,390 So hier verteenwoordig wat ek hier het. 263 00:12:58,390 --> 00:12:59,770 So dit is 'n bietjie beter. 264 00:12:59,770 --> 00:13:02,740 >> Maar ek dalk in staat wees om doen beter as dit. 265 00:13:02,740 --> 00:13:06,140 As ons gaan af na 'n blik by die event handler situasie 266 00:13:06,140 --> 00:13:07,860 Maar al hierdie oproepe dieselfde lyk. 267 00:13:07,860 --> 00:13:10,340 As jy onthou vir ons bespreking oor event handlers, 268 00:13:10,340 --> 00:13:15,770 Ek kan inligting oor watter van kry hierdie knoppies is gedruk en gebruik dit. 269 00:13:15,770 --> 00:13:19,560 >> En so in event.JavaScript, ek het geskryf kleur verander gebeurtenis, wat 270 00:13:19,560 --> 00:13:21,110 figure uit watter knoppie is gekliek. 271 00:13:21,110 --> 00:13:23,250 Dit is die sneller voorwerp lyn. 272 00:13:23,250 --> 00:13:25,240 En dan hier, is dit regtig langdradig. 273 00:13:25,240 --> 00:13:27,420 Maar wat ek doen, is ek is die opstel van die agtergrond 274 00:13:27,420 --> 00:13:30,340 kleur triggerObject inner.HTML. 275 00:13:30,340 --> 00:13:34,170 Dit is die teks in tussen die knoppie tags. 276 00:13:34,170 --> 00:13:36,500 >> En dan moet ek glo om dit te stel om onderkas. 277 00:13:36,500 --> 00:13:40,780 En dit is hoe ek 'n hele kan omskep string om onderkas in JavaScript behulp 278 00:13:40,780 --> 00:13:42,940 hierdie metode om onderkas. 279 00:13:42,940 --> 00:13:46,570 Want as ek 'n kleur, as ek probeer om hier te doen, 280 00:13:46,570 --> 00:13:48,260 die kleur het al klein wees. 281 00:13:48,260 --> 00:13:50,920 >> Maar die knoppie wat ek gehad het, As ons weer na, 282 00:13:50,920 --> 00:13:55,890 sien dat die teks is daar geskryf met 'n kapitale P vir pers. 283 00:13:55,890 --> 00:13:59,140 En dan op die heel onderkant hier, ek glo 284 00:13:59,140 --> 00:14:02,630 probeer en doen dit met behulp van jQuery sowel. 285 00:14:02,630 --> 00:14:06,000 En in hierdie geval, ek is nie eintlik roep 'n funksie op alle. 286 00:14:06,000 --> 00:14:11,430 Ek het net gesê die klas wat ek is die gebruik van hierdie knoppie is 'n JQ knoppie. 287 00:14:11,430 --> 00:14:12,360 Dis dit. 288 00:14:12,360 --> 00:14:14,950 >> So hoe jQuery weet wat ek doen? 289 00:14:14,950 --> 00:14:18,740 Wel, dit is een van die voordele streep nadele van jQuery. 290 00:14:18,740 --> 00:14:21,560 Dit kan nie toelaat dat my om dinge te doen baie saaklik, maar miskien nie 291 00:14:21,560 --> 00:14:22,570 as intuïtief. 292 00:14:22,570 --> 00:14:25,570 Miskien is die ander drie maak 'n bietjie meer sin wat ek doen. 293 00:14:25,570 --> 00:14:29,010 Hier, al is, wat gaan aan? 294 00:14:29,010 --> 00:14:31,940 >> Blykbaar, skep 'n anonieme funksie 295 00:14:31,940 --> 00:14:36,790 dat baie wanneer my dokument is gereed, so document.ready, 296 00:14:36,790 --> 00:14:38,760 'n funksie gaan gebeur. 297 00:14:38,760 --> 00:14:40,490 Basies, wanneer 'n dokument gereed? 298 00:14:40,490 --> 00:14:42,310 Dit is wanneer my bladsy gelaai. 299 00:14:42,310 --> 00:14:46,540 >> So gou as my bladsy gelaai, die volgende funksie is altyd gereed. 300 00:14:46,540 --> 00:14:54,310 Dit sê, as 'n voorwerp van die tipe jQButton, of as klas jQButton is gekliek, 301 00:14:54,310 --> 00:14:55,570 die funksie te verrig. 302 00:14:55,570 --> 00:14:59,360 So hier is twee anonieme funksies, een gedefinieer binnekant van die ander. 303 00:14:59,360 --> 00:15:03,930 >> So my hele konteks hier is so ver my bladsy 304 00:15:03,930 --> 00:15:06,520 wanneer dit laai dit op hierdie funksie noem. 305 00:15:06,520 --> 00:15:09,740 En hierdie funksie wag vir 'n knoppie te gebruik. 306 00:15:09,740 --> 00:15:14,490 En wanneer 'n knoppie is gekliek het, JQ knoppie spesifiek word gebruik, 307 00:15:14,490 --> 00:15:17,150 dit hierdie ander oproepe funksie, wat gaan 308 00:15:17,150 --> 00:15:21,250 om die agtergrond te stel kleur van colorDiv te wees 309 00:15:21,250 --> 00:15:25,990 watter teks is in tussen die tags. 310 00:15:25,990 --> 00:15:28,050 >> Dit is die idee van watter knoppie is gekliek. 311 00:15:28,050 --> 00:15:31,230 Maar anders, hierdie is 'n soort van gedra soortgelyk aan 'n gebeurtenis. 312 00:15:31,230 --> 00:15:34,460 Dis net die dieselfde manier wat ek sou dit uit te druk in jQuery. 313 00:15:34,460 --> 00:15:36,790 Weereens, dit is waarskynlik 'n baie meer intimiderend. 314 00:15:36,790 --> 00:15:40,840 Dit is nie so duidelik as iets soos event.js, 315 00:15:40,840 --> 00:15:45,080 wat is miskien 'n bietjie meer verbose, maar 'n bietjie minder bietjie 316 00:15:45,080 --> 00:15:46,000 intimiderend. 317 00:15:46,000 --> 00:15:51,460 >> Maar as ons pop terug oor my browser venster, as ek begin clicking-- goed, 318 00:15:51,460 --> 00:15:52,690 dit verander na pers. 319 00:15:52,690 --> 00:15:54,450 Dit is die gebruik van die groen string metode. 320 00:15:54,450 --> 00:15:56,500 Dit is oranje met behulp van die event handler. 321 00:15:56,500 --> 00:15:58,300 >> Dit is rooi met behulp van jQuery, reg? 322 00:15:58,300 --> 00:16:01,270 Hulle het almal gedra presies dieselfde. 323 00:16:01,270 --> 00:16:06,509 Hulle doen dit net met behulp van verskillende benaderings tot die probleem op te los. 324 00:16:06,509 --> 00:16:08,550 Daar is 'n baie meer om jQuery dan is ons beslis 325 00:16:08,550 --> 00:16:10,050 gaan om te praat oor wat in hierdie video. 326 00:16:10,050 --> 00:16:15,410 Maar as jy meer wil leer, kan jy gaan na die jQuery soort van dokumentasie 327 00:16:15,410 --> 00:16:19,710 en leer nogal 'n bietjie meer oor hierdie baie buigsaam biblioteek, wat 328 00:16:19,710 --> 00:16:22,550 is 'n groot vir die doen kliënt kant script soos wat ons doen 329 00:16:22,550 --> 00:16:26,240 om die voorkoms te manipuleer en voel van ons webblad 330 00:16:26,240 --> 00:16:28,750 met die dokument Object Model. 331 00:16:28,750 --> 00:16:29,650 Ek is Doug Lloyd. 332 00:16:29,650 --> 00:16:31,930 Dit is CS50. 333 00:16:31,930 --> 00:16:34,022