1 00:00:00,000 --> 00:00:04,439 2 00:00:04,439 --> 00:00:07,230 Doug LLOYD: U ovom video, željeli smo viknuti zasebnu pozornost 3 00:00:07,230 --> 00:00:09,110 na vrlo poseban element JavaScript 4 00:00:09,110 --> 00:00:11,350 da bi mogli naći pri ruci kada ste s početkom 5 00:00:11,350 --> 00:00:15,750 raditi na manipulaciju web stranice i mijenja sadržaj vaše web stranice 6 00:00:15,750 --> 00:00:16,460 u letu. 7 00:00:16,460 --> 00:00:19,450 I to je pojam model objekta dokumenta. 8 00:00:19,450 --> 00:00:23,030 Dakle, kao što smo vidjeli u našem video na JavaScript, predmeti su vrlo fleksibilni. 9 00:00:23,030 --> 00:00:24,750 >> I oni mogu sadržavati različite polja. 10 00:00:24,750 --> 00:00:28,075 I iako mi ne ide u puno detalj, te polja i svojstva, 11 00:00:28,075 --> 00:00:30,200 da ćemo vjerojatno više prikladno ih nazvati 12 00:00:30,200 --> 00:00:33,915 u kontekstu nekog objekta, čak ta svojstva mogu biti i drugi predmeti. 13 00:00:33,915 --> 00:00:36,210 A unutar tih objekata mogu biti i drugi predmeti. 14 00:00:36,210 --> 00:00:39,630 >> Imate ovu veliku objekt s puno drugih objekata 15 00:00:39,630 --> 00:00:43,550 unutar njega, koja vrsta stvara ideju velikog stabla. 16 00:00:43,550 --> 00:00:47,540 Sada, objekt dokument vrlo poseban objekt u JavaScript 17 00:00:47,540 --> 00:00:52,580 da organizira svoj cijeli web Stranica pod ovu vrstu kišobran 18 00:00:52,580 --> 00:00:53,470 od objekta. 19 00:00:53,470 --> 00:00:56,770 I tako unutar dokumenta Predmet su objekti predstavljanje 20 00:00:56,770 --> 00:00:59,630 glava i tijelo vaše web stranice. 21 00:00:59,630 --> 00:01:03,760 >> Unutar to su druge objekata, i tako dalje, i tako dalje, 22 00:01:03,760 --> 00:01:08,411 dok se cijela web stranica ima organiziran je u ovom velikom objektu. 23 00:01:08,411 --> 00:01:09,660 Što je naopako ovdje, zar ne? 24 00:01:09,660 --> 00:01:12,170 Pa, znamo kako raditi s objektima u JavaScript. 25 00:01:12,170 --> 00:01:15,840 >> Dakle, ako imamo objekt koji se odnosi na cijelu našu web stranicu, da se 26 00:01:15,840 --> 00:01:19,590 znači pozivom ispravan Metode manipulirati taj objekt 27 00:01:19,590 --> 00:01:22,360 ili mijenjanje određeni svojih svojstava, mi 28 00:01:22,360 --> 00:01:25,500 može mijenjati elemente naša stranica programatski 29 00:01:25,500 --> 00:01:30,210 pomoću JavaScript umjesto da da kod stvari s, recimo, HTML. 30 00:01:30,210 --> 00:01:33,760 Dakle, ovdje je primjer od a vrlo jednostavan web stranica, zar ne? 31 00:01:33,760 --> 00:01:35,850 To je dobio HTML oznake, glavu. 32 00:01:35,850 --> 00:01:37,979 >> Unutar postoji naslov, Hello World. 33 00:01:37,979 --> 00:01:38,770 Onda imam tijelo. 34 00:01:38,770 --> 00:01:40,686 Unutar toga, imam tri različite stvari. 35 00:01:40,686 --> 00:01:44,170 Imam H2 zaglavlja oznaku, odlomak, i vezu. 36 00:01:44,170 --> 00:01:45,920 Ovo je vrlo jednostavna web stranica. 37 00:01:45,920 --> 00:01:48,590 >> Pa, što bi moglo dokument objekt za ovu izgledati? 38 00:01:48,590 --> 00:01:50,700 Pa, to je malo zastrašujuće možda na prvi. 39 00:01:50,700 --> 00:01:52,510 Ali to je zapravo samo velika stabla. 40 00:01:52,510 --> 00:01:54,890 A na samom korijenu toga je dokument. 41 00:01:54,890 --> 00:02:00,030 >> Unutar dokument je još Predmet se odnosi na HTML stranici. 42 00:02:00,030 --> 00:02:02,660 I HTML moje stranice je sve to. 43 00:02:02,660 --> 00:02:06,900 A onda unutar HTML predmet, imam glavu objekt, 44 00:02:06,900 --> 00:02:09,000 koji se odnosi na sve tamo. 45 00:02:09,000 --> 00:02:11,009 >> A unutar tu, Imam naslov objekt. 46 00:02:11,009 --> 00:02:15,620 A unutar tu, imam još jedan prigovoriti da je samo Hello World. 47 00:02:15,620 --> 00:02:18,020 Mogao sam imati svoje tijelo predstavljao ovako. 48 00:02:18,020 --> 00:02:22,850 >> Unutar moje tijelo, imam H2 objekt i p objekt za stavku 49 00:02:22,850 --> 00:02:25,270 sa a objekt za vezu. 50 00:02:25,270 --> 00:02:29,660 I tako to cijela hijerarhija može se prikazati kao velikog stabla 51 00:02:29,660 --> 00:02:31,990 s puno manjim Little stvari dolaze iz nje. 52 00:02:31,990 --> 00:02:33,740 Sada, naravno, kada je mi programiranje, mi 53 00:02:33,740 --> 00:02:35,560 nemojte misliti stvari poput velikog stabla. 54 00:02:35,560 --> 00:02:37,980 Želimo vidjeti stvarna kod povezane stvari. 55 00:02:37,980 --> 00:02:40,790 >> I na sreću, možemo koristiti naše razvojne alate 56 00:02:40,790 --> 00:02:46,080 zapravo pogledati Ova web stranica je predmet dokumenta. 57 00:02:46,080 --> 00:02:48,150 I neka je to. 58 00:02:48,150 --> 00:02:49,580 Tako sam otvorio karticu pregledniku. 59 00:02:49,580 --> 00:02:51,540 >> I sam otvorio razvojne alate. 60 00:02:51,540 --> 00:02:54,460 I u mom videu JavaScript ja spominje da je konzola ne 61 00:02:54,460 --> 00:02:56,770 samo negdje gdje možemo ispisati podatke, 62 00:02:56,770 --> 00:02:59,560 to je također mjesto gdje možemo ulazne podatke. 63 00:02:59,560 --> 00:03:01,380 U tom kontekstu, što Idem reći 64 00:03:01,380 --> 00:03:05,720 Želio bih se vratiti predmeti dokument, 65 00:03:05,720 --> 00:03:07,502 tako da mogu početi da imaju pogled na njega. 66 00:03:07,502 --> 00:03:08,460 Pa kako bih mogao to učiniti? 67 00:03:08,460 --> 00:03:10,740 Pa, ako želim organizirati stvarno lijepo, 68 00:03:10,740 --> 00:03:16,317 Idem reći console.dir, D-i-R. Sada, ja koristiti console.log se samo ispisati 69 00:03:16,317 --> 00:03:17,400 nešto vrlo jednostavno. 70 00:03:17,400 --> 00:03:20,450 Ali ako želim organizirati ovo hijerarhijski kao objekt, 71 00:03:20,450 --> 00:03:23,800 Želim da vrsta strukturiranih poput strukture direktorija. 72 00:03:23,800 --> 00:03:27,400 >> Dakle, želim console.dir dokument. 73 00:03:27,400 --> 00:03:28,430 Idem pritisnite Enter. 74 00:03:28,430 --> 00:03:32,350 A odmah ispod nje sada, i ja ću povećavanje ovdje 75 00:03:32,350 --> 00:03:36,000 Imam ovaj dokument odgovor uz malo strelicu pokraj njega. 76 00:03:36,000 --> 00:03:39,470 Sada, kada sam otvoriti ovu strelicu, tu će biti puno stvari. 77 00:03:39,470 --> 00:03:42,560 >> Ali ćemo zanemariti puno to i samo vrsta fokusu 78 00:03:42,560 --> 00:03:46,250 o najvažnijem dijelu, tako da smo može početi kretati ovaj dokument. 79 00:03:46,250 --> 00:03:50,125 Postoji puno više nego DOM Samo roditelj čvorovi i dijete čvorovi. 80 00:03:50,125 --> 00:03:51,500 Postoji puno popratnih stvari. 81 00:03:51,500 --> 00:03:52,280 >> Tako ću otvoriti ovaj gore. 82 00:03:52,280 --> 00:03:54,610 I tu je puno stvari koje pops gore. 83 00:03:54,610 --> 00:03:59,000 Ali sve me zanima upravo ovdje, dijete čvorovi. 84 00:03:59,000 --> 00:04:00,410 Otvorimo to. 85 00:04:00,410 --> 00:04:03,810 >> Unutar tamo vidim nešto poznato, HTML. 86 00:04:03,810 --> 00:04:07,670 Dakle unutar našeg dokumenta jednu razinu dolje, HTML. 87 00:04:07,670 --> 00:04:08,550 Otvorim to. 88 00:04:08,550 --> 00:04:10,380 Što očekujemo? 89 00:04:10,380 --> 00:04:13,760 >> Ako se sjećate iz našeg dijagrama, Što bismo trebali naći unutar HTML? 90 00:04:13,760 --> 00:04:17,275 Koje dvije čvorovi su ispod njega na stablu? 91 00:04:17,275 --> 00:04:17,899 Idemo saznati. 92 00:04:17,899 --> 00:04:18,940 Mi otvoriti HTML. 93 00:04:18,940 --> 00:04:22,079 Idemo dolje na svoje dijete čvorova. 94 00:04:22,079 --> 00:04:23,440 >> Pop otvaranje. 95 00:04:23,440 --> 00:04:25,990 Postoji glave i tijela. 96 00:04:25,990 --> 00:04:28,540 I možemo otvoriti glavu. 97 00:04:28,540 --> 00:04:30,460 Idi na svoje dijete čvorova. 98 00:04:30,460 --> 00:04:31,460 Pa, postoji naslov. 99 00:04:31,460 --> 00:04:33,293 >> I mogli bismo ići na i ovako zauvijek. 100 00:04:33,293 --> 00:04:34,770 Mogli bismo to učiniti s tijelom, kao dobro. 101 00:04:34,770 --> 00:04:40,090 Ali postoji način za nas da pogledamo dokument organizirana kao veliki objekt. 102 00:04:40,090 --> 00:04:42,610 A ako gledamo je velika objekt koji izgleda puno 103 00:04:42,610 --> 00:04:47,480 kao i kod, to znači da možemo početi manipulirati ovaj veliki objekt pomoću 104 00:04:47,480 --> 00:04:51,220 broj mijenjati ono što naš Web stranica izgleda i osjeća slično. 105 00:04:51,220 --> 00:04:54,920 >> Tako da je prilično moćan alat imamo na raspolaganju sada. 106 00:04:54,920 --> 00:04:57,360 Dakle, kao što smo upravo vidjeli, Dokument sama objekt 107 00:04:57,360 --> 00:05:01,392 i sve objekte unutar nje imaju svojstva i metode, samo 108 00:05:01,392 --> 00:05:04,100 kao i bilo koji drugi objekt koji smo radili s u JavaScriptu. 109 00:05:04,100 --> 00:05:08,370 Ali možemo koristiti ta svojstva i koristiti one metode vrsta drill down 110 00:05:08,370 --> 00:05:10,900 od velikog dokumenta i dobiti niže i niže i niže, 111 00:05:10,900 --> 00:05:13,360 finije i finije žitarice detalja, dok ne 112 00:05:13,360 --> 00:05:17,510 doći na vrlo specifičan dio naše Web stranice koje želite promijeniti. 113 00:05:17,510 --> 00:05:22,700 >> A kad smo ažurirati svojstva Document Object ili nazovite one metode, 114 00:05:22,700 --> 00:05:24,450 stvari mogu dogoditi na našoj web-stranici. 115 00:05:24,450 --> 00:05:28,420 I ne trebamo učiniti bilo osvježenje da te promjene stupaju na snagu. 116 00:05:28,420 --> 00:05:33,160 >> I to je prilično kul sposobnost ima kada radimo s kodom. 117 00:05:33,160 --> 00:05:37,185 Pa što su neki od tih svojstava koji su dio objekta dokumenta? 118 00:05:37,185 --> 00:05:40,100 Pa, vjerojatno vidjeli par njih jako brzo 119 00:05:40,100 --> 00:05:42,700 kao što smo bili patentni zatvarač kroz div dokumenta 120 00:05:42,700 --> 00:05:45,150 Objekt smo upravo vidjeli u web pregledniku. 121 00:05:45,150 --> 00:05:48,420 >> Ali par tih svojstava možda stvari kao unutrašnje HTML. 122 00:05:48,420 --> 00:05:52,950 A možda čak i podsjetiti me koristeći ovaj u videu JavaScript 123 00:05:52,950 --> 00:05:54,950 na samom kraju, kada sam je govorio o događajima. 124 00:05:54,950 --> 00:05:56,125 Što je to unutarnja HTML? 125 00:05:56,125 --> 00:05:59,030 Pa, to je samo ono što je između oznaka. 126 00:05:59,030 --> 00:06:01,590 >> I tako unutarnji HTML, na primjer, iz naslova 127 00:06:01,590 --> 00:06:05,390 oznaka, ako je zadržao ide u da npr trenutak prije, 128 00:06:05,390 --> 00:06:08,020 bi bio Hello World. 129 00:06:08,020 --> 00:06:10,140 To je naslov naše stranice. 130 00:06:10,140 --> 00:06:12,370 Ostala svojstva uključuju ime čvora, što 131 00:06:12,370 --> 00:06:15,810 je naziv HTML elementa, kao što naslov. 132 00:06:15,810 --> 00:06:19,100 ID, koji je ID atribut HTML elementa. 133 00:06:19,100 --> 00:06:23,790 >> Sjetite se da smo posebno može ukazivati specifični elementi našeg HTML 134 00:06:23,790 --> 00:06:27,510 s ID atribut, koji obično dolazi u ruci u kontekstu CSS, 135 00:06:27,510 --> 00:06:29,000 posebno. 136 00:06:29,000 --> 00:06:33,217 Roditelj čvor, koji se odnosi na što je samo do iznad mene u DOM. 137 00:06:33,217 --> 00:06:35,800 A dijete čvorovi, koje je upućivanje na ono što je ispod mene. 138 00:06:35,800 --> 00:06:37,950 A vidjeli smo puno toga samo gleda kroz. 139 00:06:37,950 --> 00:06:42,970 Dijete čvorovi, to je kako smo dobili niže i niže u stablo. 140 00:06:42,970 --> 00:06:46,590 >> Atributi, to je samo niz atributa HTML elementa. 141 00:06:46,590 --> 00:06:50,270 Dakle, primjer atributa moglo biti ako imate slike oznaku, 142 00:06:50,270 --> 00:06:54,090 to obično ima izvorni atribut, možda visina i širina atribut. 143 00:06:54,090 --> 00:06:57,120 A kako bi tek bilo niz od svih atributa povezanih 144 00:06:57,120 --> 00:06:59,300 s tim HTML element. 145 00:06:59,300 --> 00:07:04,140 >> Stil je još jedan koji ne predstavljaju CSS 146 00:07:04,140 --> 00:07:06,050 stil pojedinog elementa. 147 00:07:06,050 --> 00:07:08,310 I kasnije u ovom Video, mi ćemo posebno 148 00:07:08,310 --> 00:07:14,592 utjecati stilu napraviti par promjena naše web stranice. 149 00:07:14,592 --> 00:07:15,800 Dakle, to su neke osobine. 150 00:07:15,800 --> 00:07:17,591 >> A tu su i neke Metode koje možemo 151 00:07:17,591 --> 00:07:22,450 koristiti za brže i možda izolirati elementi Document objekt. 152 00:07:22,450 --> 00:07:26,730 Možda, najsvestraniji od njih je getElementById. 153 00:07:26,730 --> 00:07:31,190 Tako sam mogao reći nešto poput, jer zapamtite to je metoda dokumenta 154 00:07:31,190 --> 00:07:34,880 Object, document.getElementById. 155 00:07:34,880 --> 00:07:39,820 >> A unutar tih zagrada navesti HTML element s određenom ID 156 00:07:39,820 --> 00:07:42,330 atribut da imam prije postaviti i odmah ću 157 00:07:42,330 --> 00:07:46,685 ići do tog elementa cjelokupne web stranice. 158 00:07:46,685 --> 00:07:49,310 Pa ja ne moram možda izbušiti kroz svaki sloj. 159 00:07:49,310 --> 00:07:52,841 Ja samo mogu koristiti ovu metodu da ga pronaći, vrsta poput topline tražilaca rakete, 160 00:07:52,841 --> 00:07:53,340 pravo? 161 00:07:53,340 --> 00:07:56,300 To samo ide i nađe upravo ono što traži. 162 00:07:56,300 --> 00:07:59,290 >> GetElementsByTagName je vrlo slični u duhu. 163 00:07:59,290 --> 00:08:02,500 Možda će to pronaći sve bold oznake ili sve p oznake 164 00:08:02,500 --> 00:08:05,920 i daj mi niz sve da sam tada mogao raditi. 165 00:08:05,920 --> 00:08:12,080 appendChild dodaje nešto jednu razinu dolje u stablo. 166 00:08:12,080 --> 00:08:16,440 >> Dakle, ja mogu dodati cijeli novi Element jednu razinu niže. 167 00:08:16,440 --> 00:08:19,700 Ili mogu ukloniti element koji je jednu razinu niže i ako želim 168 00:08:19,700 --> 00:08:22,870 izbrisati nešto iz moje web stranice. 169 00:08:22,870 --> 00:08:28,480 Sada, brzo kodiranje note i brzo glavobolja štedi na znanje, nadam se. 170 00:08:28,480 --> 00:08:31,670 >> getElementById-- D je mala. 171 00:08:31,670 --> 00:08:36,950 Ne mogu vam reći koliko puta sam Rabljeni getElementById i kapitaliziran 172 00:08:36,950 --> 00:08:38,336 D tamo. 173 00:08:38,336 --> 00:08:39,460 Jer to je stvarno čest. 174 00:08:39,460 --> 00:08:42,990 Ako pišemo riječ ID, to je Obično kapital I kapital D. 175 00:08:42,990 --> 00:08:44,240 I moj broj jednostavno ne radi. 176 00:08:44,240 --> 00:08:45,630 A ja ne mogu shvatiti zašto. 177 00:08:45,630 --> 00:08:49,490 Ovo je jako, jako, jako čest bug da svatko čini, 178 00:08:49,490 --> 00:08:51,890 čak i stručnjaci koji su bio događaj ovaj zauvijek. 179 00:08:51,890 --> 00:08:55,410 Dakle, samo budite svjesni, getElementById, da je d mala. 180 00:08:55,410 --> 00:09:00,080 I nadam se, da štedi više minuta barem tuga. 181 00:09:00,080 --> 00:09:02,204 >> Pa što se sve to nam? 182 00:09:02,204 --> 00:09:03,120 Imamo ove metode. 183 00:09:03,120 --> 00:09:04,161 Imamo ta svojstva. 184 00:09:04,161 --> 00:09:06,610 Sada, ako ćemo početi od dokument, dokument. 185 00:09:06,610 --> 00:09:10,220 god, sada možemo doći do bilo jedan komad naše web stranice 186 00:09:10,220 --> 00:09:14,870 da želimo pomoću JavaScript Samo pozivom ove metode 187 00:09:14,870 --> 00:09:19,940 i utjecati na svojstva koje smo pronašli na raznim mjestima. 188 00:09:19,940 --> 00:09:24,890 >> To se može dobiti razvučen, ovaj document.getElementByID, 189 00:09:24,890 --> 00:09:28,560 možda imaju dugu naziv oznake, možda učiniti više poziva kasnije. 190 00:09:28,560 --> 00:09:31,230 Stvari mogu dobiti malo razvučen. 191 00:09:31,230 --> 00:09:34,480 I kao programeri, kao što ste vjerojatno vidjeti u mnogim od tih videa, 192 00:09:34,480 --> 00:09:36,600 mi se ne sviđa razvučen stvari. 193 00:09:36,600 --> 00:09:38,520 >> Mi smo željeli biti u mogućnosti za napraviti stvari brzo. 194 00:09:38,520 --> 00:09:42,640 Stoga smo željeli više koncizan način nešto reći. 195 00:09:42,640 --> 00:09:46,270 Dakle, ova vrsta dovodi do Pojam nešto što se zove jQuery. 196 00:09:46,270 --> 00:09:49,170 Sada jQuery ne JavaScript. 197 00:09:49,170 --> 00:09:50,350 To nije dio JavaScript. 198 00:09:50,350 --> 00:09:54,790 >> To je knjižnica koja je napisana neki JavaScript programera 199 00:09:54,790 --> 00:09:57,060 oko 10 godina. 200 00:09:57,060 --> 00:10:01,300 I njegov je cilj pojednostaviti ovaj što je zove klijent strani skriptiranje, koji 201 00:10:01,300 --> 00:10:04,310 je u osnovi ono što smo bili samo pričaju s DOM manipulacije. 202 00:10:04,310 --> 00:10:11,090 I tako, ako sam htjela mijenjati Boja pozadine moje web stranice, možda 203 00:10:11,090 --> 00:10:11,980 specifičan Div. 204 00:10:11,980 --> 00:10:15,325 >> Evo, ja očito dobivam ElementById colorDiv. 205 00:10:15,325 --> 00:10:16,950 I želim postaviti svoju boju pozadine. 206 00:10:16,950 --> 00:10:20,720 Ako sam samo pomoću čistog JavaScript pomoću Document Object Model, 207 00:10:20,720 --> 00:10:23,990 to je puno stvari, zar ne? document.getElementByID 208 00:10:23,990 --> 00:10:25,531 colorDiv.style.backgroundColor = zelena. 209 00:10:25,531 --> 00:10:27,260 210 00:10:27,260 --> 00:10:28,050 >> Uh. 211 00:10:28,050 --> 00:10:30,110 To je puno toga za reći. 212 00:10:30,110 --> 00:10:31,720 To je puno tipkati, previše. 213 00:10:31,720 --> 00:10:35,760 I tako u jQuery, što možda može reći ovo malo više jezgrovito. 214 00:10:35,760 --> 00:10:39,350 Trgovinski off to što je možda malo malo više zagonetan odjednom, 215 00:10:39,350 --> 00:10:39,850 pravo? 216 00:10:39,850 --> 00:10:43,580 >> Barem dugo je malo više objašnjenje o tome što radimo. 217 00:10:43,580 --> 00:10:49,947 Ovo dolar znak, zagrade, Jedan citat, ljestve, colorDiv, zar ne? 218 00:10:49,947 --> 00:10:50,780 Što to znači? 219 00:10:50,780 --> 00:10:53,640 Pa, to je zapravo samo document.getElementByID colorDiv. 220 00:10:53,640 --> 00:10:58,700 >> Ali to je ova vrsta stenogram način to radi pomoću jQuery. 221 00:10:58,700 --> 00:11:01,380 Ajmo pogledati sada na nekoliko različitih načina 222 00:11:01,380 --> 00:11:04,520 da bi zapravo koristiti ovaj Document Object 223 00:11:04,520 --> 00:11:06,807 Model manipulirati komada mom mjestu. 224 00:11:06,807 --> 00:11:09,140 Konkretno, idemo da se radi o manipulaciji 225 00:11:09,140 --> 00:11:14,090 boja određeni Div, colorDiv, na web-stranici. 226 00:11:14,090 --> 00:11:15,299 Tako ćemo pogledati kako. 227 00:11:15,299 --> 00:11:15,798 U redu. 228 00:11:15,798 --> 00:11:16,700 Dakle, ja sam na stranici. 229 00:11:16,700 --> 00:11:20,750 To se zove test.html prilikom preuzimanja ovo ako želite prtljati s tim. 230 00:11:20,750 --> 00:11:24,730 I ja imam hrpu Tipke na ovoj stranici. 231 00:11:24,730 --> 00:11:27,730 A ja govorim pojedine funkcije za boju pozadine, ljubičasta, zelena, 232 00:11:27,730 --> 00:11:31,330 narančasta, crvena, plava, jedna jedina funkcija za boju pozadine, događaj rukovatelj 233 00:11:31,330 --> 00:11:34,360 za boju pozadine, i pomoću jQuery. 234 00:11:34,360 --> 00:11:38,147 Što sam ja govorim o kad ovo radim? 235 00:11:38,147 --> 00:11:39,230 Tako smo vidjeli gumbe. 236 00:11:39,230 --> 00:11:41,521 Sada, neka je pogledati Neki od izvornog koda ovdje. 237 00:11:41,521 --> 00:11:44,770 Počet ćemo s test.html. 238 00:11:44,770 --> 00:11:48,100 Tako pojedine funkcije za pozadinu boja je ono što sam upisali ovdje. 239 00:11:48,100 --> 00:11:49,350 Dopustite mi pomaknite malo. 240 00:11:49,350 --> 00:11:56,170 241 00:11:56,170 --> 00:11:58,820 >> A vi ćete primijetiti da ja su definirani ovim gumbiće 242 00:11:58,820 --> 00:12:03,990 reći kada se klikne na ovaj gumb, pozvati funkciju pretvoriti ljubičasta. 243 00:12:03,990 --> 00:12:06,670 Kad ovaj gumb klik, naprotiv, pozvati funkcija postati zelena, 244 00:12:06,670 --> 00:12:08,710 narančastu boju, crveno, poplaviti. 245 00:12:08,710 --> 00:12:11,880 Vjerojatno možete pretpostaviti da je ovaj možda i nije najbolji dizajn 246 00:12:11,880 --> 00:12:12,460 smisla, zar ne? 247 00:12:12,460 --> 00:12:16,490 >> Bilo bi lijepo kad bih mogao imaju više opći pristup. 248 00:12:16,490 --> 00:12:19,570 Pa, prvo ćemo pogledati na ono što ti pet funkcije 249 00:12:19,570 --> 00:12:24,400 document.getElementByID colorDiv.style.background = ljubičasta, 250 00:12:24,400 --> 00:12:27,250 zelena, narančasta, crvena, i plava, respektivno. 251 00:12:27,250 --> 00:12:30,930 Dakle, nije osobito najbolji dizajn. 252 00:12:30,930 --> 00:12:33,390 >> Sljedeći set tipki Ja sam je sam napisao 253 00:12:33,390 --> 00:12:36,380 jedna funkcija zove promijeniti boju koja očito 254 00:12:36,380 --> 00:12:38,960 prihvaća string kao svoj argument. 255 00:12:38,960 --> 00:12:40,290 Dakle, ovo je malo bolje. 256 00:12:40,290 --> 00:12:43,840 Ljubičasta, zelena, narančasta, crvena, plavi je sada argument. 257 00:12:43,840 --> 00:12:46,230 Zato sam napisao više uopće Slučaj JavaScript funkcija, 258 00:12:46,230 --> 00:12:47,771 što bi moglo izgledati nešto poput ovoga. 259 00:12:47,771 --> 00:12:48,680 Ja sam u prolazu. 260 00:12:48,680 --> 00:12:52,090 Ova boja promjena funkcija očekujući argument naziva u boji. 261 00:12:52,090 --> 00:12:54,970 A ja govorim postaviti Boja pozadine u boji. 262 00:12:54,970 --> 00:12:58,390 Dakle, ovdje predstavlja ono što imam ovdje. 263 00:12:58,390 --> 00:12:59,770 Tako da je malo bolje. 264 00:12:59,770 --> 00:13:02,740 >> Ali ja možda moći bolje od toga. 265 00:13:02,740 --> 00:13:06,140 Ako ćemo ići dolje pogledati na događaj rukovatelj situaciji, 266 00:13:06,140 --> 00:13:07,860 Sada svi ti pozivi izgledaju isto. 267 00:13:07,860 --> 00:13:10,340 Ako se sjećate za naše rasprava o rukovatelje događajima, 268 00:13:10,340 --> 00:13:15,770 Ja mogu dobiti informacije o tome koji Ovi gumbi se klikne i koristiti. 269 00:13:15,770 --> 00:13:19,560 >> I tako u event.JavaScript, sam napisano događaj promjena boje, što 270 00:13:19,560 --> 00:13:21,110 figure koji gumb je kliknuo. 271 00:13:21,110 --> 00:13:23,250 To je okidač objekt linije. 272 00:13:23,250 --> 00:13:25,240 I onda ovdje, to dobiva stvarno razvučen. 273 00:13:25,240 --> 00:13:27,420 No, ono što ja radim je sam postavljanje pozadine 274 00:13:27,420 --> 00:13:30,340 boje triggerObject inner.HTML. 275 00:13:30,340 --> 00:13:34,170 To je tekst u između tipki tagova. 276 00:13:34,170 --> 00:13:36,500 >> A onda sam očito ima da ga postavite u mala slova. 277 00:13:36,500 --> 00:13:40,780 A to je kako ja mogu pretvoriti cijelu string u mala slova u JavaScript korištenja 278 00:13:40,780 --> 00:13:42,940 da se način u mala slova. 279 00:13:42,940 --> 00:13:46,570 Jer kad sam postaviti boju, kao što ja pokušavam učiniti ovdje, 280 00:13:46,570 --> 00:13:48,260 boja mora biti sve malim slovima. 281 00:13:48,260 --> 00:13:50,920 >> Ali gumb da sam imala, ako uzmemo još jedan pogled, 282 00:13:50,920 --> 00:13:55,890 primijetiti da tekst postoji napisano s velikim P za ljubičasta. 283 00:13:55,890 --> 00:13:59,140 A onda na samom Dno ovdje, očito 284 00:13:59,140 --> 00:14:02,630 pokušati učiniti koristeći jQuery kao dobro. 285 00:14:02,630 --> 00:14:06,000 I u ovom slučaju, nisam zapravo pozivanje funkcija na sve. 286 00:14:06,000 --> 00:14:11,430 Ja sam samo rekao klasu da sam pomoću ove tipke je gumb JQ. 287 00:14:11,430 --> 00:14:12,360 To je to. 288 00:14:12,360 --> 00:14:14,950 >> Pa kako se jQuery znati što radim? 289 00:14:14,950 --> 00:14:18,740 Pa, to je jedna od prednosti slash nedostatke jQuery. 290 00:14:18,740 --> 00:14:21,560 To može dopustiti mene za napraviti stvari vrlo sažeto, ali možda ne 291 00:14:21,560 --> 00:14:22,570 kao intuitivno. 292 00:14:22,570 --> 00:14:25,570 Možda one ostale tri napraviti malo više smisla što radim. 293 00:14:25,570 --> 00:14:29,010 Ovdje je, međutim, što se događa? 294 00:14:29,010 --> 00:14:31,940 >> Očito, stvaranje anonimni funkcija 295 00:14:31,940 --> 00:14:36,790 koji učitava, kad god mi je dokument je spreman, tako document.ready, 296 00:14:36,790 --> 00:14:38,760 Neki funkcija će se dogoditi. 297 00:14:38,760 --> 00:14:40,490 Naime, kad je dokument spreman? 298 00:14:40,490 --> 00:14:42,310 To je kad je moja stranica je učitan. 299 00:14:42,310 --> 00:14:46,540 >> Dakle, čim mi stranica učita, Sljedeći funkcija je uvijek spreman. 300 00:14:46,540 --> 00:14:54,310 Ona kaže da, ako je predmet tipa jQButton, ili ako klase jQButton je kliknuo, 301 00:14:54,310 --> 00:14:55,570 izvrši ovu funkciju. 302 00:14:55,570 --> 00:14:59,360 Dakle ovdje je dva anonimna funkcije, definira unutar druge. 303 00:14:59,360 --> 00:15:03,930 >> Dakle, moj cijeli kontekst ovdje sada je moja stranica 304 00:15:03,930 --> 00:15:06,520 kad se učitava on poziva tu funkciju. 305 00:15:06,520 --> 00:15:09,740 I ova funkcija čeka za gumba koji se kliknuli. 306 00:15:09,740 --> 00:15:14,490 A kad se klikne gumb, JQ Gumb posebno kliknuli, 307 00:15:14,490 --> 00:15:17,150 što zove taj drugi funkcija, što se događa 308 00:15:17,150 --> 00:15:21,250 postaviti pozadinu Boja colorDiv se 309 00:15:21,250 --> 00:15:25,990 sve što je tekst između oznake. 310 00:15:25,990 --> 00:15:28,050 >> To je pojam koja tipka se pritisne. 311 00:15:28,050 --> 00:15:31,230 Ali inače, ovo je vrsta ponaša slično događaja. 312 00:15:31,230 --> 00:15:34,460 To je samo način na koji sam isto će izraziti u jQuery. 313 00:15:34,460 --> 00:15:36,790 Opet, to je vjerojatno puno više zastrašujuće. 314 00:15:36,790 --> 00:15:40,840 Nije jasno kako nešto poput event.js, 315 00:15:40,840 --> 00:15:45,080 što je možda malo više preopširan, ali malo manje 316 00:15:45,080 --> 00:15:46,000 zastrašujuće. 317 00:15:46,000 --> 00:15:51,460 >> Ali ako mi pop natrag na moj e prozor, ako počnem clicking-- dobro, 318 00:15:51,460 --> 00:15:52,690 koji je promijenio do ljubičaste. 319 00:15:52,690 --> 00:15:54,450 To je zelena korištenjem metode string. 320 00:15:54,450 --> 00:15:56,500 To je narančasta pomoću događaj rukovatelj. 321 00:15:56,500 --> 00:15:58,300 >> To je crvena pomoću jQuery, zar ne? 322 00:15:58,300 --> 00:16:01,270 Svi oni se ponašaju isto. 323 00:16:01,270 --> 00:16:06,509 Oni jednostavno učiniti pomoću drugačije pristupi za rješavanje problema. 324 00:16:06,509 --> 00:16:08,550 Postoji puno više jQuery onda ste sigurno 325 00:16:08,550 --> 00:16:10,050 će govoriti o tome u ovom videu. 326 00:16:10,050 --> 00:16:15,410 No ako želite saznati više, možete ići na jQuery vrsti dokumentacije 327 00:16:15,410 --> 00:16:19,710 i naučiti vrlo malo više o Ovo je vrlo fleksibilan knjižnica, koja 328 00:16:19,710 --> 00:16:22,550 je super za to strani klijenta skriptiranje kao što smo radili 329 00:16:22,550 --> 00:16:26,240 manipulirati izgled i osjetiti naše web stranice 330 00:16:26,240 --> 00:16:28,750 s Document Object Model. 331 00:16:28,750 --> 00:16:29,650 Ja sam Doug Lloyd. 332 00:16:29,650 --> 00:16:31,930 Ovo je CS50. 333 00:16:31,930 --> 00:16:34,022