1 00:00:00,000 --> 00:00:04,439 2 00:00:04,439 --> 00:00:07,230 DOUG LLOYD: Katika video hii, tulitaka kuita kipaumbele tofauti 3 00:00:07,230 --> 00:00:09,110 kwa sana hasa kipengele cha JavaScript 4 00:00:09,110 --> 00:00:11,350 kwamba unaweza kupata sehemu wakati wewe ni mapya 5 00:00:11,350 --> 00:00:15,750 kufanya kazi ya kufanyia kurasa za mtandao na kubadilisha maudhui ya mtandao ukurasa wako 6 00:00:15,750 --> 00:00:16,460 juu ya kuruka. 7 00:00:16,460 --> 00:00:19,450 Na hiyo ndiyo dhana ya Document Object Model. 8 00:00:19,450 --> 00:00:23,030 Hivyo kama tulivyoona katika sehemu yetu juu ya JavaScript, vitu ni rahisi sana. 9 00:00:23,030 --> 00:00:24,750 >> Na wanaweza vyenye nyanja mbalimbali. 10 00:00:24,750 --> 00:00:28,075 Na ingawa hatukuwa kwenda katika mengi ya undani, mashamba hayo au mali, 11 00:00:28,075 --> 00:00:30,200 kwamba tunataka pengine zaidi ipasavyo kuwaita 12 00:00:30,200 --> 00:00:33,915 katika mazingira ya kitu, hata mali hizo inaweza kuwa vitu vingine. 13 00:00:33,915 --> 00:00:36,210 Na ndani ya vitu wale inaweza kuwa vitu vingine. 14 00:00:36,210 --> 00:00:39,630 >> Una hii kitu kikubwa sana na mengi ya vitu vingine 15 00:00:39,630 --> 00:00:43,550 ndani yake, ambayo ni aina ya inajenga wazo hili la mti mkubwa. 16 00:00:43,550 --> 00:00:47,540 Sasa, hati kitu ni kitu maalum sana katika JavaScript 17 00:00:47,540 --> 00:00:52,580 kwamba kupanga mtandao wako wote ukurasa chini ya aina hii ya mwavuli 18 00:00:52,580 --> 00:00:53,470 wa kitu. 19 00:00:53,470 --> 00:00:56,770 Na hivyo ndani ya hati kitu ni vitu kuwasilisha 20 00:00:56,770 --> 00:00:59,630 kichwa na mwili wa mtandao ukurasa wako. 21 00:00:59,630 --> 00:01:03,760 >> Ndani ya wale wengine vitu, nakadhalika, nakadhalika, 22 00:01:03,760 --> 00:01:08,411 mpaka nzima mtandao ukurasa wako ina yaliandaliwa katika hii kitu kubwa. 23 00:01:08,411 --> 00:01:09,660 Nini kichwa hapa, sawa? 24 00:01:09,660 --> 00:01:12,170 Naam, sisi kujua jinsi ya kufanya kazi na vitu katika JavaScript. 25 00:01:12,170 --> 00:01:15,840 >> Hivyo kama tuna kitu kwamba inahusu yetu mtandao mzima ukurasa, kwamba 26 00:01:15,840 --> 00:01:19,590 ina maana kwa kupiga sahihi mbinu kuendesha kwamba kitu 27 00:01:19,590 --> 00:01:22,360 au kubadilisha baadhi ya ya tabia yake, sisi 28 00:01:22,360 --> 00:01:25,500 Unaweza kubadilisha mambo ya ukurasa wetu programmatically 29 00:01:25,500 --> 00:01:30,210 kutumia JavaScript badala ya kuwa na kanuni ya mambo na, kusema, HTML. 30 00:01:30,210 --> 00:01:33,760 Hivyo hapa ni mfano wa rahisi sana mtandao ukurasa, haki? 31 00:01:33,760 --> 00:01:35,850 Ni got tags, kichwa. 32 00:01:35,850 --> 00:01:37,979 >> Ndani ya huko ni cheo, hujambo dunia. 33 00:01:37,979 --> 00:01:38,770 Basi nina mwili. 34 00:01:38,770 --> 00:01:40,686 Ndani ya kwamba, nina mambo matatu tofauti. 35 00:01:40,686 --> 00:01:44,170 Nina h2 kichwa tag, aya, na kiungo. 36 00:01:44,170 --> 00:01:45,920 Hii ni mtandao rahisi sana ukurasa. 37 00:01:45,920 --> 00:01:48,590 >> Naam, ni nini wapate hati kitu kwa kuangalia hii kama? 38 00:01:48,590 --> 00:01:50,700 Naam, ni kidogo inatisha labda kwa mara ya kwanza. 39 00:01:50,700 --> 00:01:52,510 Lakini ni kweli tu mti mkubwa. 40 00:01:52,510 --> 00:01:54,890 Na kila mzizi wa ni hati. 41 00:01:54,890 --> 00:02:00,030 >> Ndani ya hati ni mwingine kitu akimaanisha HTML wa ukurasa wangu. 42 00:02:00,030 --> 00:02:02,660 Na HTML ya ukurasa wangu ni haya yote. 43 00:02:02,660 --> 00:02:06,900 Na kisha ndani ya HTML kitu, nina kichwa kitu, 44 00:02:06,900 --> 00:02:09,000 ambayo inahusu kila kitu hapo. 45 00:02:09,000 --> 00:02:11,009 >> Na ndani ya huko, Nina kichwa kitu. 46 00:02:11,009 --> 00:02:15,620 Na ndani ya huko, mimi na mwingine kitu hiyo ni hujambo dunia. 47 00:02:15,620 --> 00:02:18,020 Mimi naweza kuwa mwili wangu kuwakilishwa kama hii. 48 00:02:18,020 --> 00:02:22,850 >> Ndani ya mwili wangu, nina h2 kitu na p kitu kwa aya 49 00:02:22,850 --> 00:02:25,270 na kitu kwa kiungo. 50 00:02:25,270 --> 00:02:29,660 Na hivyo uongozi huu mzima inaweza kuwakilishwa kama mti mkubwa 51 00:02:29,660 --> 00:02:31,990 kwa kura ya ndogo ndogo mambo kuja nje ya hiyo. 52 00:02:31,990 --> 00:02:33,740 Sasa, bila shaka, wakati sisi ni programu, sisi 53 00:02:33,740 --> 00:02:35,560 sidhani ya mambo kama mti mkubwa. 54 00:02:35,560 --> 00:02:37,980 Tunataka kuona halisi kificho kuhusiana mambo. 55 00:02:37,980 --> 00:02:40,790 >> Na kwa bahati nzuri, tunaweza kutumia developer zana yetu 56 00:02:40,790 --> 00:02:46,080 kwa kweli tuangalie tovuti hii hati kitu. 57 00:02:46,080 --> 00:02:48,150 Na hebu kufanya hivyo. 58 00:02:48,150 --> 00:02:49,580 Hivyo nimekuwa imefungua browser tab. 59 00:02:49,580 --> 00:02:51,540 >> Na nimekuwa imefungua Developer Tools. 60 00:02:51,540 --> 00:02:54,460 Na katika video yangu juu ya JavaScript, mimi alieleza kuwa console si 61 00:02:54,460 --> 00:02:56,770 tu mahala fulani ambapo sisi magazeti ya habari, 62 00:02:56,770 --> 00:02:59,560 pia ni mahali ambapo tunaweza maelezo pembejeo. 63 00:02:59,560 --> 00:03:01,380 Katika hali hii, ni nini Mimi nina kwenda kusema ni 64 00:03:01,380 --> 00:03:05,720 Ningependa kupata nyuma vitu hati, 65 00:03:05,720 --> 00:03:07,502 hivyo siwezi kuanza kuwa na kuangalia saa yake. 66 00:03:07,502 --> 00:03:08,460 Hivyo jinsi gani mimi kufanya hivyo? 67 00:03:08,460 --> 00:03:10,740 Naam, kama nataka kuandaa yake kweli nicely, 68 00:03:10,740 --> 00:03:16,317 Mimi nina kwenda kusema console.dir, D-I-R. Sasa, mimi kutumia console.log kwa magazeti tu 69 00:03:16,317 --> 00:03:17,400 nje kitu rahisi sana. 70 00:03:17,400 --> 00:03:20,450 Lakini kama nataka kuandaa hii hierarchically kama kitu, 71 00:03:20,450 --> 00:03:23,800 Nataka ni aina ya muundo kama muundo directory. 72 00:03:23,800 --> 00:03:27,400 >> Hivyo nataka console.dir hati. 73 00:03:27,400 --> 00:03:28,430 Mimi nina kwenda hit Enter. 74 00:03:28,430 --> 00:03:32,350 Na haki chini yake sasa, na mimi itabidi kuvuta hapa, 75 00:03:32,350 --> 00:03:36,000 Mimi nimepata hii hati majibu na mshale mdogo karibu na hiyo. 76 00:03:36,000 --> 00:03:39,470 Sasa, wakati mimi kufungua mshale huu, kuna kwenda kuwa mengi ya mambo ya ajabu. 77 00:03:39,470 --> 00:03:42,560 >> Lakini tunakwenda kupuuza mengi yake na aina tu ya lengo 78 00:03:42,560 --> 00:03:46,250 juu ya sehemu muhimu, hivyo sisi unaweza kuanza navigate waraka huu. 79 00:03:46,250 --> 00:03:50,125 Kuna mengi zaidi kwa DOM kuliko tu mzazi nodi na nodi mtoto. 80 00:03:50,125 --> 00:03:51,500 Kuna mengi ya mambo saidizi. 81 00:03:51,500 --> 00:03:52,280 >> Hivyo nina kwenda kwa kufungua hili. 82 00:03:52,280 --> 00:03:54,610 Na kuna mengi yote ya mambo ambayo pops up. 83 00:03:54,610 --> 00:03:59,000 Lakini yote mimi huduma ya juu ni haki hapa, nodes mtoto. 84 00:03:59,000 --> 00:04:00,410 Hebu kufungua kwamba up. 85 00:04:00,410 --> 00:04:03,810 >> Ndani ya huko naona kitu utambuzi, HTML. 86 00:04:03,810 --> 00:04:07,670 Hivyo ndani ya hati wetu ngazi moja chini, HTML. 87 00:04:07,670 --> 00:04:08,550 Mimi wazi kwamba up. 88 00:04:08,550 --> 00:04:10,380 Je, ni sisi wanatarajia? 89 00:04:10,380 --> 00:04:13,760 >> Kama unakumbuka kutoka mchoro wetu, tunapaswa kupata ndani ya HTML? 90 00:04:13,760 --> 00:04:17,275 Nini nodes mbili ni chini yake katika mti? 91 00:04:17,275 --> 00:04:17,899 Hebu kujua. 92 00:04:17,899 --> 00:04:18,940 Sisi kufungua HTML. 93 00:04:18,940 --> 00:04:22,079 Sisi kwenda chini kwa mtoto wake nodes. 94 00:04:22,079 --> 00:04:23,440 >> Kisasa kuwa wazi. 95 00:04:23,440 --> 00:04:25,990 Kuna kichwa na mwili. 96 00:04:25,990 --> 00:04:28,540 Na tunaweza kufungua kichwa. 97 00:04:28,540 --> 00:04:30,460 Kwenda kwa mtoto wake nodes. 98 00:04:30,460 --> 00:04:31,460 Naam, kuna jina. 99 00:04:31,460 --> 00:04:33,293 >> Na tungeweza kuendelea na na maisha haya ya milele. 100 00:04:33,293 --> 00:04:34,770 Tuliweza kufanya hivyo na mwili pia. 101 00:04:34,770 --> 00:04:40,090 Lakini kuna njia kwa sisi tuangalie hati iliyoandaliwa kama kitu kubwa. 102 00:04:40,090 --> 00:04:42,610 Na kama sisi kuangalia ni kubwa kitu kwamba inaonekana mengi 103 00:04:42,610 --> 00:04:47,480 kama kanuni, hiyo ina maana kwamba tunaweza kuanza kuendesha hii kitu kubwa kwa kutumia 104 00:04:47,480 --> 00:04:51,220 kificho kubadili kile wetu tovuti inaonekana na anahisi kama. 105 00:04:51,220 --> 00:04:54,920 >> Hivyo hiyo ni pretty zana yenye nguvu tuna tulizonazo sasa. 106 00:04:54,920 --> 00:04:57,360 Hivyo kama sisi tu kuona, hati kitu yenyewe 107 00:04:57,360 --> 00:05:01,392 na wote wa vitu ndani yake kuwa na mali na mbinu, tu 108 00:05:01,392 --> 00:05:04,100 kama kitu nyingine yoyote ambayo tumekuwa ikifanya kazi na katika JavaScript. 109 00:05:04,100 --> 00:05:08,370 Lakini tunaweza kutumia mali hizo na kutumia njia hizo aina ya kuchimba chini 110 00:05:08,370 --> 00:05:10,900 kutoka hati kubwa na kupata chini na chini na chini, 111 00:05:10,900 --> 00:05:13,360 finer na finer nafaka cha zaidi, mpaka sisi 112 00:05:13,360 --> 00:05:17,510 kupata kipande maalum sana ya yetu ukurasa wa mtandao kwamba tunataka mabadiliko. 113 00:05:17,510 --> 00:05:22,700 >> Na wakati sisi update mali ya Hati Kitu au piga mbinu hizo, 114 00:05:22,700 --> 00:05:24,450 mambo kinaweza kutokea kwenye mtandao wetu ukurasa. 115 00:05:24,450 --> 00:05:28,420 Na hatuna haja ya kufanya lolote kuogea kuwa mabadiliko hayo kufanya kazi. 116 00:05:28,420 --> 00:05:33,160 >> Na hiyo ndiyo uwezo pretty baridi kwa na wakati sisi ni kufanya kazi na kanuni. 117 00:05:33,160 --> 00:05:37,185 Kwa hiyo kile ni baadhi ya mali hizi ambazo ni sehemu ya hati kitu? 118 00:05:37,185 --> 00:05:40,100 Naam, pengine aliona wanandoa wao kweli haraka 119 00:05:40,100 --> 00:05:42,700 tulipokuwa zipping kupitia hati kubwa 120 00:05:42,700 --> 00:05:45,150 kitu sisi tu kuona katika kivinjari. 121 00:05:45,150 --> 00:05:48,420 >> Lakini michache ya mali hizi inaweza kuwa vitu kama HTML ndani. 122 00:05:48,420 --> 00:05:52,950 Na unaweza hata kukumbuka mimi kutumia hii katika JavaScript video 123 00:05:52,950 --> 00:05:54,950 mwishoni sana wakati mimi alikuwa akizungumza kuhusu matukio. 124 00:05:54,950 --> 00:05:56,125 Ilikuwa HTML huu ndani nini? 125 00:05:56,125 --> 00:05:59,030 Naam, ni tu nini katika kati ya vitambulisho. 126 00:05:59,030 --> 00:06:01,590 >> Na hivyo HTML ndani, Kwa mfano, ya cheo 127 00:06:01,590 --> 00:06:05,390 tag, kama sisi alikuwa naendelea kwenda katika kuwa mfano wakati iliyopita, 128 00:06:05,390 --> 00:06:08,020 Ingekuwa hujambo dunia. 129 00:06:08,020 --> 00:06:10,140 Hiyo ilikuwa jina la ukurasa wetu. 130 00:06:10,140 --> 00:06:12,370 Mali nyingine pamoja na jina nodi, ambayo 131 00:06:12,370 --> 00:06:15,810 ni jina la HTML kipengele kama vile jina. 132 00:06:15,810 --> 00:06:19,100 ID, ambayo ni ID wanampa ya HTML kipengele. 133 00:06:19,100 --> 00:06:23,790 >> Kumbuka kwamba tunaweza hasa zinaonyesha vipengele maalum HTML yetu 134 00:06:23,790 --> 00:06:27,510 na kitambulisho sifa, ambayo kwa kawaida huja katika Handy katika mazingira ya CSS, 135 00:06:27,510 --> 00:06:29,000 hasa. 136 00:06:29,000 --> 00:06:33,217 Nodi mzazi, ambayo ni kumbukumbu ya nini tu juu juu yangu katika DOM. 137 00:06:33,217 --> 00:06:35,800 Na mtoto nodes, ambayo ni kumbukumbu ya nini chini chini yangu. 138 00:06:35,800 --> 00:06:37,950 Na tuliona mengi ya kwamba kuangalia tu kwa njia ya. 139 00:06:37,950 --> 00:06:42,970 Nodes mtoto, hiyo ni jinsi tulipata chini na chini katika mti. 140 00:06:42,970 --> 00:06:46,590 >> Sifa, hiyo ni safu ya sifa ya HTML kipengele. 141 00:06:46,590 --> 00:06:50,270 Hivyo mfano wa sifa nguvu kuwa kama una tag picha, 142 00:06:50,270 --> 00:06:54,090 ni kawaida ina chanzo sifa, labda urefu na upana sifa. 143 00:06:54,090 --> 00:06:57,120 Na hivyo kwamba ingekuwa tu kuwa safu ya yote ya sifa zinazohusiana 144 00:06:57,120 --> 00:06:59,300 na kwamba HTML kipengele. 145 00:06:59,300 --> 00:07:04,140 >> Style ni mtu mwingine kwamba haina kuwakilisha CSS 146 00:07:04,140 --> 00:07:06,050 styling ya kipengele fulani. 147 00:07:06,050 --> 00:07:08,310 Na baadaye katika hii video, tutaweza mahsusi 148 00:07:08,310 --> 00:07:14,592 kujiinua style ya kufanya wanandoa mabadiliko ya tovuti yetu. 149 00:07:14,592 --> 00:07:15,800 Basi hizo tabia ya baadhi ya. 150 00:07:15,800 --> 00:07:17,591 >> Na pia kuna baadhi mbinu kwamba tunaweza 151 00:07:17,591 --> 00:07:22,450 kutumia ili pia kwa haraka zaidi labda kujitenga mambo ya Document Object. 152 00:07:22,450 --> 00:07:26,730 Pengine, Versatile wa haya getElementById kuwa. 153 00:07:26,730 --> 00:07:31,190 Hivyo mimi anaweza kusema kitu kama, kwa sababu kumbuka ni njia ya Document 154 00:07:31,190 --> 00:07:34,880 Kitu, document.getElementByID. 155 00:07:34,880 --> 00:07:39,820 >> Na ndani ya mabano hizo, taja HTML kipengele na kitambulisho fulani 156 00:07:39,820 --> 00:07:42,330 wanampa kwamba nimepata awali kuweka, na mimi itabidi mara moja 157 00:07:42,330 --> 00:07:46,685 kwenda haki ya kuwa kipengele ya tovuti kwa ujumla. 158 00:07:46,685 --> 00:07:49,310 Hivyo sina kwa labda kuchimba chini kupitia kila safu moja. 159 00:07:49,310 --> 00:07:52,841 Naweza tu kutumia njia hii ya kupata hiyo, aina ya kama joto kutafuta makombora, 160 00:07:52,841 --> 00:07:53,340 sawa? 161 00:07:53,340 --> 00:07:56,300 Ni tu unaendelea na anaona nini hasa ni kutafuta. 162 00:07:56,300 --> 00:07:59,290 >> GetElementsByTagName ni sawa sana katika ulimwengu wa kiroho. 163 00:07:59,290 --> 00:08:02,500 Labda hii itakuwa kupata yote ya vitambulisho ujasiri au yote ya vitambulisho p 164 00:08:02,500 --> 00:08:05,920 na kunipa safu ya kila kitu niweze kisha kazi pamoja. 165 00:08:05,920 --> 00:08:12,080 appendChild anaongeza kitu ngazi moja chini ya mti. 166 00:08:12,080 --> 00:08:16,440 >> Hivyo siwezi kuongeza mpya nzima kipengele cha moja chini. 167 00:08:16,440 --> 00:08:19,700 Au naweza kuondoa kipengele hiyo ni ngazi moja chini na pia kama nataka 168 00:08:19,700 --> 00:08:22,870 kufuta kitu kutoka mtandao ukurasa wangu. 169 00:08:22,870 --> 00:08:28,480 Sasa, haraka coding kumbuka na haraka kichwa kuokoa kumbuka, hopefully. 170 00:08:28,480 --> 00:08:31,670 >> getElementById-- d ni ndogo. 171 00:08:31,670 --> 00:08:36,950 Siwezi kukuambia jinsi mara nyingi nina kutumika getElementById na mtaji 172 00:08:36,950 --> 00:08:38,336 d huko. 173 00:08:38,336 --> 00:08:39,460 Kwa sababu ni kweli ya kawaida. 174 00:08:39,460 --> 00:08:42,990 Kama sisi kuandika neno ID, ni Kwa kawaida mji mkuu mimi mji mkuu D. 175 00:08:42,990 --> 00:08:44,240 Na kanuni yangu tu haifanyi kazi. 176 00:08:44,240 --> 00:08:45,630 Na siwezi takwimu kwa nini. 177 00:08:45,630 --> 00:08:49,490 Hii ni kweli, kweli, kweli mdudu kawaida kwamba kila mtu hufanya, 178 00:08:49,490 --> 00:08:51,890 hata wataalam kwamba wana wamekuwa wakifanya hii milele. 179 00:08:51,890 --> 00:08:55,410 Hivyo tu kuwa na ufahamu, getElementById, kwamba d ni ndogo. 180 00:08:55,410 --> 00:09:00,080 Na natumaini kwamba Huwaokoeni kadhaa angalau dakika ya maumivu ya moyo. 181 00:09:00,080 --> 00:09:02,204 >> Basi ni nini yote haya kutuambia? 182 00:09:02,204 --> 00:09:03,120 Tuna njia hizi. 183 00:09:03,120 --> 00:09:04,161 Tuna mali hizi. 184 00:09:04,161 --> 00:09:06,610 Sasa, kama sisi kuanza kutoka hati, hati. 185 00:09:06,610 --> 00:09:10,220 chochote, tunaweza sasa kupata yoyote kipande moja ya mtandao wetu ukurasa 186 00:09:10,220 --> 00:09:14,870 kwamba tunataka kutumia JavaScript tu kwa kupiga hizi mbinu 187 00:09:14,870 --> 00:09:19,940 na leveraging mali kwamba tunapata katika maeneo mbalimbali. 188 00:09:19,940 --> 00:09:24,890 >> Hii inaweza kupata wordy, hii document.getElementByID, 189 00:09:24,890 --> 00:09:28,560 labda kwa muda mrefu jina tag, labda wewe kufanya wito zaidi baadaye. 190 00:09:28,560 --> 00:09:31,230 Mambo wanaweza kupata kidogo wordy. 191 00:09:31,230 --> 00:09:34,480 Na kama programmers, kama wameweza pengine kuona katika mengi ya video hizi, 192 00:09:34,480 --> 00:09:36,600 sisi si kama mambo wordy. 193 00:09:36,600 --> 00:09:38,520 >> Sisi kama kuwa na uwezo wa kufanya mambo haraka. 194 00:09:38,520 --> 00:09:42,640 Hivyo tungependa zaidi mafupi ya njia ya kusema kitu. 195 00:09:42,640 --> 00:09:46,270 Hivyo aina hii ya kuingilia kwa dhana ya kitu kinachoitwa jQuery. 196 00:09:46,270 --> 00:09:49,170 Sasa jQuery si JavaScript. 197 00:09:49,170 --> 00:09:50,350 Siyo sehemu ya JavaScript. 198 00:09:50,350 --> 00:09:54,790 >> Ni maktaba ambayo iliandikwa na baadhi programmers JavaScript 199 00:09:54,790 --> 00:09:57,060 muda wa miaka 10 iliyopita. 200 00:09:57,060 --> 00:10:01,300 Na lengo lake ni kurahisisha hii nini aitwaye mteja upande scripting, ambayo 201 00:10:01,300 --> 00:10:04,310 kimsingi ni nini tulikuwa tu kuzungumza juu na DOM manipulations. 202 00:10:04,310 --> 00:10:11,090 Na hivyo kama nilitaka kurekebisha rangi ya asili ya mtandao ukurasa wangu, labda 203 00:10:11,090 --> 00:10:11,980 Div maalum. 204 00:10:11,980 --> 00:10:15,325 >> Hapa, mimi nina inaonekana kupata ElementById colorDiv. 205 00:10:15,325 --> 00:10:16,950 Na mimi nataka kuweka historia yake ya rangi. 206 00:10:16,950 --> 00:10:20,720 Kama mimi nina kutumia safi tu JavaScript kutumia Document Object Model, 207 00:10:20,720 --> 00:10:23,990 hiyo ni mengi ya mambo, sawa? document.getElementByID 208 00:10:23,990 --> 00:10:25,531 colorDiv.style.backgroundColor = kijani. 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 Hiyo ilikuwa ni mengi ya kusema. 212 00:10:30,110 --> 00:10:31,720 Ni mengi na aina, pia. 213 00:10:31,720 --> 00:10:35,760 Na hivyo katika jQuery, tunaweza labda kusema hii kidogo zaidi concisely. 214 00:10:35,760 --> 00:10:39,350 Biashara mbali ya kuwa ni labda kidogo kidogo cryptic zaidi kwa ghafla, 215 00:10:39,350 --> 00:10:39,850 sawa? 216 00:10:39,850 --> 00:10:43,580 >> Angalau kwa muda mrefu ni kidogo zaidi maelezo kama kwa nini sisi ni kufanya. 217 00:10:43,580 --> 00:10:49,947 Hii ishara dola, mabano, moja kunukuu, hash, colorDiv, sawa? 218 00:10:49,947 --> 00:10:50,780 Hiyo ina maana gani? 219 00:10:50,780 --> 00:10:53,640 Naam, hiyo ni kimsingi tu document.getElementByID colorDiv. 220 00:10:53,640 --> 00:10:58,700 >> Lakini ni aina hii ya shorthand njia ya kufanya hivyo kwa kutumia jQuery. 221 00:10:58,700 --> 00:11:01,380 Hebu tuangalie sasa tu katika michache ya njia mbalimbali 222 00:11:01,380 --> 00:11:04,520 ili nipate kwa kweli kutumia hii kitu Document 223 00:11:04,520 --> 00:11:06,807 Mfano kuendesha vipande vya tovuti yangu. 224 00:11:06,807 --> 00:11:09,140 Hasa, tunakwenda kuwa kazi ya kufanyia 225 00:11:09,140 --> 00:11:14,090 rangi ya pekee Div, colorDiv, katika ukurasa wa mtandao. 226 00:11:14,090 --> 00:11:15,299 Basi hebu tuangalie hiyo. 227 00:11:15,299 --> 00:11:15,798 Sawa. 228 00:11:15,798 --> 00:11:16,700 Kwa hiyo mimi nina juu ya ukurasa. 229 00:11:16,700 --> 00:11:20,750 Ni wito test.html wakati wewe download hii kama unataka tinker na hii. 230 00:11:20,750 --> 00:11:24,730 Na mimi nimepata kundi la kifungo juu ya ukurasa huu. 231 00:11:24,730 --> 00:11:27,730 Na mimi kusema kazi ya mtu binafsi kwa rangi ya asili, zambarau, kijani, 232 00:11:27,730 --> 00:11:31,330 machungwa, nyekundu, bluu, kazi moja kwa rangi ya asili, tukio handler 233 00:11:31,330 --> 00:11:34,360 kwa rangi ya asili, na kwa kutumia jQuery. 234 00:11:34,360 --> 00:11:38,147 Nataka kuzungumza juu wakati mimi nina kufanya hili? 235 00:11:38,147 --> 00:11:39,230 Hivyo tumeona vifungo. 236 00:11:39,230 --> 00:11:41,521 Sasa, hebu tuangalie baadhi ya chanzo kanuni hapa. 237 00:11:41,521 --> 00:11:44,770 Tutaweza kuanza na test.html. 238 00:11:44,770 --> 00:11:48,100 Kazi hivyo mtu binafsi kwa asili rangi ni nini nimekuwa typed hapa. 239 00:11:48,100 --> 00:11:49,350 Hebu kitabu kidogo. 240 00:11:49,350 --> 00:11:56,170 241 00:11:56,170 --> 00:11:58,820 >> Na utasikia taarifa kwamba mimi kuwa defined vifungo hizi 242 00:11:58,820 --> 00:12:03,990 kusema wakati kifungo hii ni clicked, piga kazi kugeuka rangi ya zambarau. 243 00:12:03,990 --> 00:12:06,670 Wakati kifungo hii ni click, badala yake, piga kazi kugeuka rangi ya kijani, 244 00:12:06,670 --> 00:12:08,710 kugeuka rangi ya machungwa, kugeuka nyekundu, kugeuka bluu. 245 00:12:08,710 --> 00:12:11,880 Pengine unaweza nadhani kwamba hii labda si kubuni bora 246 00:12:11,880 --> 00:12:12,460 maana, sawa? 247 00:12:12,460 --> 00:12:16,490 >> Itakuwa nzuri kama mimi naweza kuwa na mbinu zaidi kwa ujumla. 248 00:12:16,490 --> 00:12:19,570 Naam, kwanza tutaweza kuangalia nini kazi hizo tano ni 249 00:12:19,570 --> 00:12:24,400 document.getElementByID colorDiv.style.background = zambarau, 250 00:12:24,400 --> 00:12:27,250 kijani, machungwa, nyekundu, na bluu, kwa mtiririko huo. 251 00:12:27,250 --> 00:12:30,930 Hivyo, si hasa kubuni bora. 252 00:12:30,930 --> 00:12:33,390 >> Seti ya pili ya vifungo I have ni nimekuwa imeandikwa 253 00:12:33,390 --> 00:12:36,380 kazi moja inayoitwa mabadiliko ya rangi ya kwamba inaonekana 254 00:12:36,380 --> 00:12:38,960 anapokea kamba kama hoja yake. 255 00:12:38,960 --> 00:12:40,290 Hivyo hii ni kidogo kidogo bora. 256 00:12:40,290 --> 00:12:43,840 Zambarau, kijani, machungwa, nyekundu, bluu ni sasa hoja. 257 00:12:43,840 --> 00:12:46,230 Hivyo nimekuwa imeandikwa zaidi ya jumla kesi JavaScript kazi, 258 00:12:46,230 --> 00:12:47,771 ambayo inaweza kuangalia kitu kama hii. 259 00:12:47,771 --> 00:12:48,680 Mimi nina kupita katika. 260 00:12:48,680 --> 00:12:52,090 Hii rangi mabadiliko kazi ni wanatarajia hoja aitwaye rangi. 261 00:12:52,090 --> 00:12:54,970 Na mimi kusema kuweka rangi ya asili kwa rangi. 262 00:12:54,970 --> 00:12:58,390 Hivyo hapa inawakilisha nini mimi nimepata hapa. 263 00:12:58,390 --> 00:12:59,770 Hivyo hiyo ni kidogo bora. 264 00:12:59,770 --> 00:13:02,740 >> Lakini mimi ili kuwa na uwezo wa kufanya vizuri zaidi kuliko hiyo. 265 00:13:02,740 --> 00:13:06,140 Kama sisi kwenda chini kwa kuchukua kuangalia katika hali tukio handler, 266 00:13:06,140 --> 00:13:07,860 sasa simu hizi zote kuangalia huo. 267 00:13:07,860 --> 00:13:10,340 Kama unakumbuka kwa wetu mjadala juu ya tukio handlers, 268 00:13:10,340 --> 00:13:15,770 Siwezi kupata taarifa wanafunzi kuhusu nani kati vifungo hizi ilikuwa clicked na kutumia hiyo. 269 00:13:15,770 --> 00:13:19,560 >> Na hivyo katika event.JavaScript, nimekuwa Imeandikwa tukio mabadiliko ya rangi, ambayo 270 00:13:19,560 --> 00:13:21,110 takwimu za nje ambayo kifungo ilikuwa clicked. 271 00:13:21,110 --> 00:13:23,250 Hiyo ni trigger kitu mstari. 272 00:13:23,250 --> 00:13:25,240 Na kisha hapa, ni kweli anapata wordy. 273 00:13:25,240 --> 00:13:27,420 Lakini nini mimi kufanya ni mimi nina kuweka historia 274 00:13:27,420 --> 00:13:30,340 rangi ya triggerObject inner.HTML. 275 00:13:30,340 --> 00:13:34,170 Hiyo ni maandishi katika kati ya vitambulisho kifungo. 276 00:13:34,170 --> 00:13:36,500 >> Na kisha mimi inaonekana kuwa kuweka kwa Herufi za chini. 277 00:13:36,500 --> 00:13:40,780 Na hiyo ni jinsi mimi inaweza kubadilisha nzima kamba na Herufi za chini katika JavaScript kutumia 278 00:13:40,780 --> 00:13:42,940 njia ambayo kwa Herufi za chini. 279 00:13:42,940 --> 00:13:46,570 Kwa sababu wakati mimi kuweka alama, kama mimi nina kujaribu kufanya hapa, 280 00:13:46,570 --> 00:13:48,260 rangi ina kuwa zote lowercase. 281 00:13:48,260 --> 00:13:50,920 >> Lakini kifungo kwamba nilikuwa, kama sisi kuchukua mwingine kuangalia, 282 00:13:50,920 --> 00:13:55,890 taarifa kwamba kuna maandishi Imeandikwa na mji mkuu wa P kwa zambarau. 283 00:13:55,890 --> 00:13:59,140 Na kisha saa sana chini hapa, mimi inaonekana 284 00:13:59,140 --> 00:14:02,630 kujaribu na kufanya hivyo kwa kutumia jQuery pia. 285 00:14:02,630 --> 00:14:06,000 Na katika kesi hii, mimi si kweli wito kazi wakati wote. 286 00:14:06,000 --> 00:14:11,430 Nilivyosema tu darasa kwamba mimi nina kutumia kwa kifungo hii ni kifungo JQ. 287 00:14:11,430 --> 00:14:12,360 Hiyo ni. 288 00:14:12,360 --> 00:14:14,950 >> Hivyo ni jinsi gani jQuery kujua nini mimi kufanya? 289 00:14:14,950 --> 00:14:18,740 Naam, hii ni moja ya faida kufyeka hasara ya jQuery. 290 00:14:18,740 --> 00:14:21,560 Ni inaweza naomba kufanya mambo concisely sana, lakini labda si 291 00:14:21,560 --> 00:14:22,570 kama shirikishi. 292 00:14:22,570 --> 00:14:25,570 Labda wale wengine watatu kufanya kidogo zaidi kuhisi nini mimi kufanya. 293 00:14:25,570 --> 00:14:29,010 Hapa, ingawa, nini kinaendelea? 294 00:14:29,010 --> 00:14:31,940 >> Inavyoonekana, kujenga kazi bila majina 295 00:14:31,940 --> 00:14:36,790 kwamba mizigo wakati wowote hati yangu ni tayari, hivyo document.ready, 296 00:14:36,790 --> 00:14:38,760 baadhi ya kazi kinaenda kutokea. 297 00:14:38,760 --> 00:14:40,490 Kimsingi, wakati ni hati tayari? 298 00:14:40,490 --> 00:14:42,310 Ni wakati ukurasa wangu ina kubeba. 299 00:14:42,310 --> 00:14:46,540 >> Hivyo kwa haraka kama ukurasa wangu ina kubeba, kufuatia kazi unafaa. 300 00:14:46,540 --> 00:14:54,310 Inasema, ikiwa ni kitu cha aina jQButton, au kama darasa jQButton imekuwa clicked, 301 00:14:54,310 --> 00:14:55,570 kutekeleza kazi hii. 302 00:14:55,570 --> 00:14:59,360 Hivyo hapa ni majukumu mawili bila majina, moja inavyoelezwa ndani ya mwingine. 303 00:14:59,360 --> 00:15:03,930 >> Hivyo mazingira yangu yote hapa hadi sasa ni ukurasa wangu 304 00:15:03,930 --> 00:15:06,520 wakati mizigo wito kazi hii. 305 00:15:06,520 --> 00:15:09,740 Na kazi hii ni kusubiri kwa kifungo kuwa clicked. 306 00:15:09,740 --> 00:15:14,490 Na wakati kifungo ni clicked, Jq kifungo hasa ni clicked, 307 00:15:14,490 --> 00:15:17,150 wito huu vingine kazi, ambayo ni kwenda 308 00:15:17,150 --> 00:15:21,250 kuweka historia rangi ya colorDiv kuwa 309 00:15:21,250 --> 00:15:25,990 chochote maandishi ni katika kati ya vitambulisho. 310 00:15:25,990 --> 00:15:28,050 >> Hii ni dhana ya ambayo kifungo ilikuwa clicked. 311 00:15:28,050 --> 00:15:31,230 Lakini vinginevyo, hii ni aina ya tabia sawa na tukio hilo. 312 00:15:31,230 --> 00:15:34,460 Ni tu njia ile ile ndiyo mimi ingekuwa kueleza hii katika jQuery. 313 00:15:34,460 --> 00:15:36,790 Tena, pengine ni mengi zaidi vitisho. 314 00:15:36,790 --> 00:15:40,840 Siyo kama wazi kama kitu kama event.js, 315 00:15:40,840 --> 00:15:45,080 ambayo ni labda kidogo zaidi verbose, lakini kidogo kidogo 316 00:15:45,080 --> 00:15:46,000 vitisho. 317 00:15:46,000 --> 00:15:51,460 >> Lakini kama sisi pop nyuma zaidi kwa browser yangu dirisha, kama mimi kuanza clicking-- vizuri, 318 00:15:51,460 --> 00:15:52,690 kuwa iliyopita na zambarau. 319 00:15:52,690 --> 00:15:54,450 Hii ni kijani kwa kutumia njia kamba. 320 00:15:54,450 --> 00:15:56,500 Hii ni machungwa kwa kutumia tukio handler. 321 00:15:56,500 --> 00:15:58,300 >> Hii ni nyekundu kwa kutumia jQuery, sawa? 322 00:15:58,300 --> 00:16:01,270 Wote kuishi sawa. 323 00:16:01,270 --> 00:16:06,509 Wao tu kufanya hivyo kwa kutumia mbalimbali mbinu ya kutatua tatizo. 324 00:16:06,509 --> 00:16:08,550 Kuna mengi zaidi kwa jQuery kisha tuko hakika 325 00:16:08,550 --> 00:16:10,050 kwenda kuzungumza kuhusu katika video hii. 326 00:16:10,050 --> 00:16:15,410 Lakini kama unataka kujifunza zaidi, unaweza kwenda jQuery aina ya nyaraka 327 00:16:15,410 --> 00:16:19,710 na kujifunza kidogo kabisa zaidi kuhusu huu maktaba rahisi sana, ambayo 328 00:16:19,710 --> 00:16:22,550 ni kubwa kwa ajili ya kufanya upande wa mteja scripting kama vile nini tunafanya 329 00:16:22,550 --> 00:16:26,240 kuendesha na kuangalia na kujisikia ya mtandao wetu ukurasa 330 00:16:26,240 --> 00:16:28,750 pamoja Document Object Model. 331 00:16:28,750 --> 00:16:29,650 Mimi nina Doug Lloyd. 332 00:16:29,650 --> 00:16:31,930 Hii ni CS50. 333 00:16:31,930 --> 00:16:34,022