1 00:00:00,000 --> 00:00:03,840 >> [Predvaja glasba] 2 00:00:03,840 --> 00:00:05,770 3 00:00:05,770 --> 00:00:08,690 >> Doug LLOYD: Torej, do sedaj smo stari pros na spletnem programiranju, kajne? 4 00:00:08,690 --> 00:00:12,140 In smo zajeti več jeziki v posameznih video posnetkov. 5 00:00:12,140 --> 00:00:14,690 In zdaj naredimo še eno, JavaScript. 6 00:00:14,690 --> 00:00:17,370 >> Najprej dobra novica, JavaScript je sodoben programski 7 00:00:17,370 --> 00:00:21,410 jezik, podobno kot so PHP, katere sintaksa izhaja iz C, 8 00:00:21,410 --> 00:00:22,830 tako da je dober kraj za začetek. 9 00:00:22,830 --> 00:00:25,880 To je približno tako stara kot so PHP, kot tudi, ki je bila približno približno 20 let. 10 00:00:25,880 --> 00:00:28,600 Bilo je izumil okoli v istem času, kot je PHP. 11 00:00:28,600 --> 00:00:32,240 In JavaScript je pravzaprav zelo temeljnega pomena za uporabniško izkušnjo 12 00:00:32,240 --> 00:00:32,740 spleta. 13 00:00:32,740 --> 00:00:34,448 Dejstvo je, da so trije jeziki, ki sem 14 00:00:34,448 --> 00:00:38,480 bi rekel, neke vrste, ki sestavljajo uporabniška izkušnja interakcije 15 00:00:38,480 --> 00:00:42,650 s spletno stranjo, html, css in JavaScript. 16 00:00:42,650 --> 00:00:46,030 In tako zdaj pa talk malo o JavaScript. 17 00:00:46,030 --> 00:00:50,301 >> Slaba novica, čeprav z JavaScript je da postavlja veliko pravil zase, 18 00:00:50,301 --> 00:00:51,300 nato pa jih zlomi. 19 00:00:51,300 --> 00:00:54,010 In JavaScript lahko dejansko vrste izziv, da se naučijo, 20 00:00:54,010 --> 00:00:57,000 ker je za razliko od C in PHP, ki so zelo strukturiran 21 00:00:57,000 --> 00:01:00,270 in imajo zelo toga pravila za to, kako lahko stvari delujejo. 22 00:01:00,270 --> 00:01:03,690 JavaScript je vrsta od gotten tako prilagodljiv 23 00:01:03,690 --> 00:01:06,650 da morda stvari se ne bo deluje tako, kot smo jih pričakovali, da, 24 00:01:06,650 --> 00:01:09,830 in morda res ne morejo naučiti naš prvi programski jezik 25 00:01:09,830 --> 00:01:10,769 kot JavaScript. 26 00:01:10,769 --> 00:01:12,810 Mogoče zato, ker ne sama vsa pravila določena, 27 00:01:12,810 --> 00:01:15,754 in to v resnici ne uveljavljanje dobrih kodirane navade. 28 00:01:15,754 --> 00:01:18,170 Ampak zdaj smo upajmo razvili nekaj dobrih kodiranje navade, 29 00:01:18,170 --> 00:01:21,470 in tako lahko začnemo plenilec v JavaScriptu malo. 30 00:01:21,470 --> 00:01:25,750 >> Če želite napisati JavaScript, podobno odprtino up datoteko C z dot razširitev C 31 00:01:25,750 --> 00:01:29,770 ali datoteko PHP z razširitvijo dot PHP, vse, kar morate storiti, je odpreti datoteko 32 00:01:29,770 --> 00:01:31,764 s piko js končnico datoteke. 33 00:01:31,764 --> 00:01:34,430 Mi ne potrebujemo, da imate kakršne koli posebne Ločila, kot smo to storili v PHP. 34 00:01:34,430 --> 00:01:36,750 Da nekako pod kotom Nosilec vprašaj PHP 35 00:01:36,750 --> 00:01:40,300 da smo navajeni od tiste, na način, povemo naš brskalnik, da je tisto, kar imamo 36 00:01:40,300 --> 00:01:43,502 JavaScript je z vključitvijo je v html tag, 37 00:01:43,502 --> 00:01:46,210 in bomo videli malo o kako to storiti v samo trenutek. 38 00:01:46,210 --> 00:01:48,210 >> Druga stvar, ki naredi JavaScript različni, 39 00:01:48,210 --> 00:01:50,580 čeprav, je, da teče strani odjemalca. 40 00:01:50,580 --> 00:01:53,430 Tako opozarjajo, s PHP, ki smo lahko nikoli zares videli 41 00:01:53,430 --> 00:01:57,041 PHP, ki je poudaril, spletne strani. 42 00:01:57,041 --> 00:01:59,040 Če bomo kdaj ogledov Stran vir, bi le mi 43 00:01:59,040 --> 00:02:02,830 glej html, ki je bil jih ustvari ta PHP. 44 00:02:02,830 --> 00:02:04,900 Ampak JavaScript teče strani odjemalca. 45 00:02:04,900 --> 00:02:06,710 Tvoj JavaScript teče na vašem računalniku. 46 00:02:06,710 --> 00:02:09,050 In to je, zakaj lahko narediš Stvari radi dodali blokatorji. 47 00:02:09,050 --> 00:02:09,550 Prav? 48 00:02:09,550 --> 00:02:12,704 Blokiranje oglasov se običajno opravi z ubijanje vseh JavaScript 49 00:02:12,704 --> 00:02:14,370 ki se izvaja na posebno spletno stran. 50 00:02:14,370 --> 00:02:19,000 In ker bi morali teče na vašem računalniku odjemalca strani 51 00:02:19,000 --> 00:02:21,910 lahko samo ustaviti JavaScript za vožnjo v celoti. 52 00:02:21,910 --> 00:02:27,030 To tudi pomeni, da je, ko uporabljate spletna stran, ki vsebuje JavaScript, 53 00:02:27,030 --> 00:02:32,450 morate poslati vir JavaScript Koda kot del vašega http odgovor 54 00:02:32,450 --> 00:02:34,159 za stranko, ko jo zahteva. 55 00:02:34,159 --> 00:02:35,950 In tako morda ne želite uporabiti JavaScript 56 00:02:35,950 --> 00:02:38,395 narediti res občutljivih stvari kot poteka informacij 57 00:02:38,395 --> 00:02:41,020 o gesel uporabnikov in nazaj naprej, ker oni so dejansko 58 00:02:41,020 --> 00:02:45,610 bodo prejeli vse izvorne kode, ne samo html, ki je ustvarjena, 59 00:02:45,610 --> 00:02:49,030 kot bi se zgodilo z recimo PHP. 60 00:02:49,030 --> 00:02:51,620 >> Torej, kako bomo vključiti JavaScript v našem html začeti s? 61 00:02:51,620 --> 00:02:54,520 No, podobno kot CSS, pravzaprav, je nekako, kako to počnemo tukaj. 62 00:02:54,520 --> 00:02:56,190 Z CSS imamo slog oznake. 63 00:02:56,190 --> 00:03:00,760 In znotraj teh slogovnih oznak, moremo opredeliti CSS slogi je. 64 00:03:00,760 --> 00:03:03,450 Podobno je z JavaScript Lahko se nam odpirajo skriptne oznake, 65 00:03:03,450 --> 00:03:06,660 en html tag nismo govoriti v našem html video, 66 00:03:06,660 --> 00:03:09,720 in pisati JavaScript v med temi scenarij oznakami. 67 00:03:09,720 --> 00:03:13,960 Prav tako, čeprav, kot so CSS, smo bi lahko povezali v zunanji CSS datotek 68 00:03:13,960 --> 00:03:15,900 in jih povlecite v naš program, ki način. 69 00:03:15,900 --> 00:03:18,280 Z CSS smo lahko tudi, oprostite, z JavaScript 70 00:03:18,280 --> 00:03:23,240 lahko določite tudi vir atribut script tag 71 00:03:23,240 --> 00:03:25,720 povezati v JavaScript ločeno, tako da vam ne 72 00:03:25,720 --> 00:03:27,680 morali pisati v med scenarija tags smo 73 00:03:27,680 --> 00:03:29,600 Lahko ga povežete z uporabo da skript priponka dobro. 74 00:03:29,600 --> 00:03:33,230 In tako kot pri primeru z CSS, kjer je priporočamo, da je verjetno 75 00:03:33,230 --> 00:03:36,090 v vašem najboljšem interesu, da napišete tvoj CSS v ločeni datoteki, v primeru 76 00:03:36,090 --> 00:03:38,500 morate spremeniti, podobno storiti priporočamo 77 00:03:38,500 --> 00:03:40,720 da napišete JavaScript v ločenih datotekah 78 00:03:40,720 --> 00:03:45,460 in uporabite vir script oznak pripisovati tie vaš JavaScript 79 00:03:45,460 --> 00:03:49,520 v svoj html, svojo spletno stran. 80 00:03:49,520 --> 00:03:52,610 >> Torej JavaScript spremenljivke, bomo začeli govoriti o skladnji tukaj. 81 00:03:52,610 --> 00:03:53,600 In bomo šli skozi ta vrsta hitro, 82 00:03:53,600 --> 00:03:56,640 ker smo to storili v PHP, tako To bi morali biti precej pozna. 83 00:03:56,640 --> 00:03:59,490 Torej spremenljivke v JavaScriptu so Zelo podobna PHP spremenljivke. 84 00:03:59,490 --> 00:04:03,270 Ni tip določilo, in ko uvedejo spremenljivko, 85 00:04:03,270 --> 00:04:05,070 jo predpono z var ključno besedo. 86 00:04:05,070 --> 00:04:07,750 V PHP bi naredili nekaj kot je ta, znak za dolar x. 87 00:04:07,750 --> 00:04:09,950 To je, kako smo navedli spremenljiva, vendar ne bomo 88 00:04:09,950 --> 00:04:12,060 ne omenjam tip spremenljivke sploh. 89 00:04:12,060 --> 00:04:15,124 Mi bi rekli nekaj podobnega znak za dolar x enaka 44 v PHP. 90 00:04:15,124 --> 00:04:17,040 Če smo bili početje ista stvar v JavaScript, 91 00:04:17,040 --> 00:04:19,589 bi rekli var x enaka 44. 92 00:04:19,589 --> 00:04:22,780 Torej var je nekako naše poti uvedbe spremenljivko. 93 00:04:22,780 --> 00:04:26,850 To je morda malo bolj intuitivna kot le znak za dolar spremenljivko. 94 00:04:26,850 --> 00:04:29,080 >> Še enkrat, saj ni tipi podatkov, da bi lahko to storite 95 00:04:29,080 --> 00:04:34,490 s katero koli vrsto podatkov, nizi, karkoli drugega, bi bili vsi var. 96 00:04:34,490 --> 00:04:37,260 Pogojniki, vse naše stari prijatelji iz C in PHP 97 00:04:37,260 --> 00:04:41,640 so še vedno na voljo, tako da imamo, če else if, drugega, stikalo in vprašanje 98 00:04:41,640 --> 00:04:42,240 znamka kolona. 99 00:04:42,240 --> 00:04:45,890 Stikalo Preostali tako prilagodljiv kot to je bil v PHP, ampak vse to ste 100 00:04:45,890 --> 00:04:46,930 seznanjeni z do sedaj. 101 00:04:46,930 --> 00:04:49,900 In podobno, pa so zanke stare favorite iz časa, 102 00:04:49,900 --> 00:04:52,700 storite nekaj časa, in še vedno na voljo za nas. 103 00:04:52,700 --> 00:04:55,880 Tako že vemo, veliko od Osnovna JavaScript vrsta temeljev 104 00:04:55,880 --> 00:05:01,800 samo na podlagi, ki ima zelo malo znanja zdaj o C in PHP. 105 00:05:01,800 --> 00:05:03,670 >> Kaj funkcij v JavaScript? 106 00:05:03,670 --> 00:05:08,199 No, podobno PHP vsaka funkcija je uveden s funkcijo ključno besedo. 107 00:05:08,199 --> 00:05:10,740 Pravite funkcijo, nato pa vas začeli definirati svojo funkcijo. 108 00:05:10,740 --> 00:05:12,531 Kaj je malo drugačna o JavaScript, 109 00:05:12,531 --> 00:05:15,700 čeprav je zmožnost, da ima kar se imenuje anonimni funkcija. 110 00:05:15,700 --> 00:05:18,880 Torej lahko določite funkcije da nimajo ime. 111 00:05:18,880 --> 00:05:21,222 To je nekaj, kar smo Res niso videli prej. 112 00:05:21,222 --> 00:05:23,430 Bomo res uporabljajo koncept od anonimnega funkcije 113 00:05:23,430 --> 00:05:27,880 malo kasneje v tem video, saj bom 114 00:05:27,880 --> 00:05:31,530 bi malo bolj smiselno v kontekstu ko smo ga videli v določeni situaciji 115 00:05:31,530 --> 00:05:33,120 da sem tukaj zvijača. 116 00:05:33,120 --> 00:05:35,710 Ampak kaj je samo da si ogledate na kateri preprost JavaScript 117 00:05:35,710 --> 00:05:37,850 Funkcija bi izgledal. 118 00:05:37,850 --> 00:05:40,610 >> Tako sem šel naprej in odprla svoj CS50 IDE 119 00:05:40,610 --> 00:05:43,690 in sem že teče Apache da začne svoj strežnik teče. 120 00:05:43,690 --> 00:05:46,800 In imam to datoteko Odpri imenuje Home.html. 121 00:05:46,800 --> 00:05:48,330 In bom povečate malo tukaj. 122 00:05:48,330 --> 00:05:52,090 In v bistvu, lahko vidite Home.html je samo kup gumbov. 123 00:05:52,090 --> 00:05:55,291 In jaz sem trdila na vrhu tukaj da je ta odsek JavaScript 124 00:05:55,291 --> 00:05:55,790 materiali. 125 00:05:55,790 --> 00:05:59,490 Torej, tam je kup gumbov tukaj, ampak kaj ti gumbi dejansko naredil? 126 00:05:59,490 --> 00:06:03,662 >> No, bomo nad glavo, da moje IED, in sem Home.html odpreti tukaj. 127 00:06:03,662 --> 00:06:05,620 Na samem začetku, Tukaj je, kjer sem povezavo 128 00:06:05,620 --> 00:06:07,500 v vseh mojih JavaScript izvornih datotek. 129 00:06:07,500 --> 00:06:08,000 Prav? 130 00:06:08,000 --> 00:06:12,440 Torej imam anonymous.js, clock.js, Jaz sem z izvorno atribut 131 00:06:12,440 --> 00:06:14,440 skripta tag povezati v datoteki. 132 00:06:14,440 --> 00:06:18,660 Torej nisem napisal koli JavaScript neposredno v tej datoteki, 133 00:06:18,660 --> 00:06:21,790 vendar sem potegnil v vseh JavaScript sem napisal ločeno. 134 00:06:21,790 --> 00:06:24,540 In če smo se pomaknite dol, to vsi bi morali videti nekoliko seznanjeni 135 00:06:24,540 --> 00:06:27,090 z malo nove sintakse. 136 00:06:27,090 --> 00:06:32,655 Imamo tukaj header tag za funkcije in nato gumb. 137 00:06:32,655 --> 00:06:35,530 Imam vhod, ki je gumb tipa, in očitno, ko sem ga kliknite, 138 00:06:35,530 --> 00:06:38,130 Bom poklical nekaj delovati opozorilno datum. 139 00:06:38,130 --> 00:06:41,792 In to je, kako bomo lahko nekako pomešajo malo JavaScript in HTML. 140 00:06:41,792 --> 00:06:44,500 Dejansko igrajo zelo lepo skupaj, in tako očitno, ko 141 00:06:44,500 --> 00:06:48,730 I kliknite na ta gumb, da bom poklicati nekaj datum opozorilno funkcijo. 142 00:06:48,730 --> 00:06:53,660 In podobno se nisem opredeljena vedenje Za vse druge tipke, da 143 00:06:53,660 --> 00:06:56,440 so na tej strani home.html, ki bomo vedno znova vračali 144 00:06:56,440 --> 00:06:59,172 da med tem videu. 145 00:06:59,172 --> 00:07:00,880 Ampak pojdimo nazaj gor tukaj in si oglejte 146 00:07:00,880 --> 00:07:03,850 pri clock.js, ki je Datoteka JavaScript, da sem 147 00:07:03,850 --> 00:07:07,370 zapisal, da je to prvo funkcijo bomo si oglejte. 148 00:07:07,370 --> 00:07:11,630 Kot lahko vidite, sem začel svoj JavaScript delovati s funkcijo za ključne besede, 149 00:07:11,630 --> 00:07:14,560 in sem dal tale ime, je pozval opozorilo datum. 150 00:07:14,560 --> 00:07:18,710 Znotraj tam, sem očitno ustvariti nova lokalna spremenljivka imenovan trenutni datum. 151 00:07:18,710 --> 00:07:21,500 In bom dodeliti enako na nov dan. 152 00:07:21,500 --> 00:07:24,430 In bi lahko dobili v veliko Podatek o tem, kaj je datum, 153 00:07:24,430 --> 00:07:27,060 in res JavaScript je tako velik, da ne moremo morebiti 154 00:07:27,060 --> 00:07:28,330 zajema vse, kar je v enem videu. 155 00:07:28,330 --> 00:07:32,220 Ampak je dovolj reči, to se dogaja da se vrnete zame podatek, da je 156 00:07:32,220 --> 00:07:35,470 povzema trenutni datum in čas. 157 00:07:35,470 --> 00:07:39,100 Jaz shranjevanje, ki v spremenljivko, da sem očitno gre za opozarjanje trenutni datum. 158 00:07:39,100 --> 00:07:41,300 >> No, kaj počne opozorilo trenutni datum izgledal? 159 00:07:41,300 --> 00:07:46,460 Oglejmo pogled na same datoteke nazaj čez v oknu brskalnika. 160 00:07:46,460 --> 00:07:49,551 Torej še enkrat, to je gumb, ki sem so vezani, s tem imenom funkcijo. 161 00:07:49,551 --> 00:07:51,800 In sem jo kliknite tam in poglej, kaj je storil, je opozoril. 162 00:07:51,800 --> 00:07:56,140 Je izstrelil te vrste škatle pove me, da je sedanji čas, očitno 163 00:07:56,140 --> 00:07:59,370 to je 4. november ob 10:43:43 zjutraj. 164 00:07:59,370 --> 00:08:02,345 In če sem ga znova kliknite, zdaj to je le nekaj sekund kasneje, kajne? 165 00:08:02,345 --> 00:08:03,720 Tako, da je vse to funkcijo ne. 166 00:08:03,720 --> 00:08:07,670 Ko sem kliknite ta gumb, da pops up opozorilno sporočilo, da me. 167 00:08:07,670 --> 00:08:13,806 168 00:08:13,806 --> 00:08:15,690 Torej je res ni preveč funkcij 169 00:08:15,690 --> 00:08:19,110 ki je drugačna od PHP, samo malo nove sintakse 170 00:08:19,110 --> 00:08:22,500 ki prihaja z dela z JavaScriptom. 171 00:08:22,500 --> 00:08:24,650 >> Polja v JavaScriptu so precej preprosta. 172 00:08:24,650 --> 00:08:27,200 Naj ugotovi vrsto, uporabite sintakso oglati oklepaji 173 00:08:27,200 --> 00:08:30,090 da smo seznanjeni z od PHP. 174 00:08:30,090 --> 00:08:33,432 In podobno PHP, smo Prav tako lahko mix podatkovnih tipov. 175 00:08:33,432 --> 00:08:35,140 Torej, ta niz, tako teh nizi bi 176 00:08:35,140 --> 00:08:36,960 popolnoma legitimno JavaScript. 177 00:08:36,960 --> 00:08:42,500 Ena, ki je vsa cela števila, in tisti, ki je pomešal različne podatkovne tipe. 178 00:08:42,500 --> 00:08:45,020 >> Kaj je nekaj zelo drugačna v JavaScript, čeprav? 179 00:08:45,020 --> 00:08:47,020 To je pojem objekta. 180 00:08:47,020 --> 00:08:50,240 Torej, morda ste že slišali za objektno usmerjenega programiranja. 181 00:08:50,240 --> 00:08:53,370 Tega ne počnemo veliko od tega v CS50, vendar bomo storili malo njega 182 00:08:53,370 --> 00:08:55,670 tu v okviru JavaScript. 183 00:08:55,670 --> 00:08:59,100 Sedaj JavaScript je sposoben obnašajo kot objektnega programiranja 184 00:08:59,100 --> 00:09:02,615 jezik, vendar ni sama izključno predmet usmerjen 185 00:09:02,615 --> 00:09:03,490 programski jezik. 186 00:09:03,490 --> 00:09:05,281 In to spet prihaja nazaj, zakaj sem rekel, da 187 00:09:05,281 --> 00:09:10,610 je lahko zelo zahtevno, da se naučijo JavaScript kot vaš prvi programiranje 188 00:09:10,610 --> 00:09:13,890 jezik, ker ne res fit posebno paradigmo. 189 00:09:13,890 --> 00:09:16,430 >> C na drugi strani pa je funkcijski programski jezik. 190 00:09:16,430 --> 00:09:22,270 Če želimo, funkcije nekako big boss človeka, kajne? 191 00:09:22,270 --> 00:09:24,410 Ti narekujejo, kaj zgodi vse ostalo. 192 00:09:24,410 --> 00:09:26,600 Želimo spremeniti spremenljivke, pravimo funkcij. 193 00:09:26,600 --> 00:09:28,220 Počnemo stvari funkcij. 194 00:09:28,220 --> 00:09:31,250 Namesto nasprotuje, v objektno usmerjen jezik, 195 00:09:31,250 --> 00:09:35,937 predmeti nekako postala zvezda in funkcije postanejo nekako drugotnega pomena. 196 00:09:35,937 --> 00:09:38,270 Toda kaj je predmet, kaj je ta pojem objekta? 197 00:09:38,270 --> 00:09:40,880 No, če to pomaga, mislim, o tem na prvem vrste 198 00:09:40,880 --> 00:09:44,540 podobnega strukturo C ali struct da smo spoznali prej. 199 00:09:44,540 --> 00:09:47,430 V C, struktura vsebuje številnih področjih, 200 00:09:47,430 --> 00:09:51,174 in morda smo zdaj lahko začne pokličite teh področjih lastnosti. 201 00:09:51,174 --> 00:09:53,590 Toda lastnosti nikoli zares stati na svoje, kajne? 202 00:09:53,590 --> 00:09:56,410 Če sem opredeliti strukturo za avto kot je ta z naslednjih dveh 203 00:09:56,410 --> 00:10:00,750 polja ali lastnosti, ena an celo za leto avtomobila 204 00:10:00,750 --> 00:10:04,290 in ena 10 karakter Niz za model avtomobila, 205 00:10:04,290 --> 00:10:07,150 Lahko rečem kaj takega, Jaz lahko razglasi novo spremenljivko 206 00:10:07,150 --> 00:10:10,080 tipa struct avtomobila Herbie. 207 00:10:10,080 --> 00:10:13,730 In potem lahko rečem nekaj kot herbie.year enaka 1963, 208 00:10:13,730 --> 00:10:15,850 in herbie.model enaka Beetle. 209 00:10:15,850 --> 00:10:17,000 To je ok. 210 00:10:17,000 --> 00:10:19,680 Jaz sem z uporabo polja v kontekst strukture, 211 00:10:19,680 --> 00:10:22,290 ampak jaz nikoli ne bi samo reči kaj takega. 212 00:10:22,290 --> 00:10:22,790 Prav? 213 00:10:22,790 --> 00:10:26,836 Ne morem uporabljati ime polja neodvisno od strukture. 214 00:10:26,836 --> 00:10:28,210 To je neke vrste temeljno stvar. 215 00:10:28,210 --> 00:10:32,990 >> Torej polja pa Temeljna struktur C 216 00:10:32,990 --> 00:10:39,050 so zelo podobne lastnosti čemer temeljnega pomena za JavaScript predmetov. 217 00:10:39,050 --> 00:10:42,080 Toda kaj jih naredi posebej zanimiva 218 00:10:42,080 --> 00:10:46,230 je, da lahko imajo tudi predmeti kaj se imenujejo metode, ki so res 219 00:10:46,230 --> 00:10:50,730 samo fancy beseda za funkcije, ki so neločljivo povezana s predmetom, kot dobro. 220 00:10:50,730 --> 00:10:55,340 Tako da je funkcija, ki je lahko le imenovana v okviru predmeta. 221 00:10:55,340 --> 00:10:59,200 Samo predmet, ki je opredeljena ta funkcija znotraj ITS, 222 00:10:59,200 --> 00:11:02,020 Če menite, da približno struct, funkcija 223 00:11:02,020 --> 00:11:05,720 je definiran znotraj tiste, ki določajo zaviti oklepaji konstrukcije. 224 00:11:05,720 --> 00:11:07,980 Torej to pomeni le nekaj strukture. 225 00:11:07,980 --> 00:11:10,960 In to je nekako tisto, kar delamo tukaj s predmeti in metod. 226 00:11:10,960 --> 00:11:13,580 To je v bistvu, kot da smo opredeljuje funkcijo, ki 227 00:11:13,580 --> 00:11:16,670 smiselna le na zlasti predmet, in tako smo 228 00:11:16,670 --> 00:11:19,440 klic, da postopku objekta. 229 00:11:19,440 --> 00:11:23,180 In mi nikoli ne more poklicati, da Funkcija neodvisna od objekta, 230 00:11:23,180 --> 00:11:29,260 tako kot ne moremo reči, leto ali modela neodvisno od struct v C. 231 00:11:29,260 --> 00:11:32,300 >> Torej funkcionalno programiranje paradigme izgledala nekako takole. 232 00:11:32,300 --> 00:11:35,450 Funkcija in potem, ko se boste peljali v predmeta kot parameter. 233 00:11:35,450 --> 00:11:38,650 V objektnega programiranja jeziki, to nekako dobi 234 00:11:38,650 --> 00:11:43,464 zrcaljeno, in mi bi razmišljati o je všeč to, object.function. 235 00:11:43,464 --> 00:11:45,380 Torej je nekako ta pika Operater spet kar pomeni, 236 00:11:45,380 --> 00:11:49,540 da je to neke vrste nepremičnin ali atribut predmeta samega. 237 00:11:49,540 --> 00:11:53,240 Ampak to je tisto, kar je predmet usmerjen programski jezik 238 00:11:53,240 --> 00:11:57,150 lahko storili, da bi funkcijo pokličite na metodi, še enkrat, ki 239 00:11:57,150 --> 00:12:00,260 je prav posebno beseda za funkcijo ki je neločljivo povezana s predmetom. 240 00:12:00,260 --> 00:12:03,440 To je tisto, ki sintaksa bi izgledal. 241 00:12:03,440 --> 00:12:09,360 In tako bomo začeli videti nekaj to v kontekstu JavaScript. 242 00:12:09,360 --> 00:12:12,470 >> Lahko tudi razmišljati o predmetu nekako kot asociativni array, 243 00:12:12,470 --> 00:12:14,160 ki smo seznanjeni z od PHP. 244 00:12:14,160 --> 00:12:17,720 Zapomni asociativno paleto omogoča nas, da imajo ključne parov vrednosti, namesto 245 00:12:17,720 --> 00:12:23,040 imajo indekse 0, ena, dva, tri, in tako naprej, kot smo navajeni od C 246 00:12:23,040 --> 00:12:23,940 nizi. 247 00:12:23,940 --> 00:12:27,472 Asociativne nize lahko zemljevid Besede, kot so v PHP video, 248 00:12:27,472 --> 00:12:29,180 smo govorili o prelivi za pice. 249 00:12:29,180 --> 00:12:31,180 In tako smo imeli niz imenovane pice, in smo 250 00:12:31,180 --> 00:12:36,670 imel sir je bil ključen in 8,99 $ je bil vrednost, nato pa feferoni bila ključna, 251 00:12:36,670 --> 00:12:39,190 9,99 $ je vrednost, in tako naprej. 252 00:12:39,190 --> 00:12:43,300 In tako smo lahko tudi razmišljati o ugovarja nekako podobna asociativnega 253 00:12:43,300 --> 00:12:43,840 matrika. 254 00:12:43,840 --> 00:12:47,020 In tako je ta sintaksa tukaj bi ustvarite nov predmet 255 00:12:47,020 --> 00:12:50,950 imenuje herbie z dvema lastnosti znotraj nje. 256 00:12:50,950 --> 00:12:57,310 Leto, ki je določena z vrednostjo 1963, in model, ki je dodeljen niz 257 00:12:57,310 --> 00:12:58,140 Beetle. 258 00:12:58,140 --> 00:13:01,770 >> In opazila sem, da sem s pomočjo enojni narekovaji v JavaScript. 259 00:13:01,770 --> 00:13:05,570 Lahko uporabite enojne ali dvojne narekovaje ko govoriš o strune. 260 00:13:05,570 --> 00:13:07,772 To je samo konvencionalno v primeru, da je večina krat 261 00:13:07,772 --> 00:13:10,230 Ko pišete JavaScript, samo uporabite enojne narekovaje. 262 00:13:10,230 --> 00:13:15,050 Vendar sem lahko uporabite dvojne narekovaje tukaj, in da bi bila popolnoma v redu, kot tudi. 263 00:13:15,050 --> 00:13:17,470 >> Torej, ne pozabite, kako v PHP smo imeli ta pojem 264 00:13:17,470 --> 00:13:22,730 od A za vsako zanko, ki bi nam omogoči Ponovil čez vse ključne vrednosti 265 00:13:22,730 --> 00:13:25,270 pari z društvenim matrika, ker smo 266 00:13:25,270 --> 00:13:29,050 niso imeli te možnosti za ponovitev z 0, ena, dva, tri, štiri, 267 00:13:29,050 --> 00:13:30,710 in tako naprej? 268 00:13:30,710 --> 00:13:35,010 JavaScript je nekaj zelo podobnega, vendar je ne imenuje za vsako zanko, 269 00:13:35,010 --> 00:13:38,960 to se imenuje v zanke. 270 00:13:38,960 --> 00:13:42,890 Torej, če sem rekel, da mi je všeč to, za var ključ v objektu, 271 00:13:42,890 --> 00:13:48,670 to je nekako podobno rekel za vsakega nekaj, kot nekaj. 272 00:13:48,670 --> 00:13:53,850 Toda vse delam tukaj je iterating skozi vse tipke mojega objekta. 273 00:13:53,850 --> 00:13:56,070 In notranjost Curly naramnice tam, jaz bi 274 00:13:56,070 --> 00:14:03,410 uporaba objektno oglatih oklepajih ključ sklicevati na vrednosti v tem ključnega lokaciji. 275 00:14:03,410 --> 00:14:05,400 >> Druga možnost je, da je tudi drugačen pristop. 276 00:14:05,400 --> 00:14:10,880 Če sem mar le približno vrednosti, lahko rečem za ključ objekta, 277 00:14:10,880 --> 00:14:12,360 in samo s tipko v notranjosti. 278 00:14:12,360 --> 00:14:17,240 Torej za var ključ v objektu, imam za uporabo objektov oglatih oklepajev 279 00:14:17,240 --> 00:14:19,340 Ključ notranjosti zanke. 280 00:14:19,340 --> 00:14:24,580 Za var ključ objekta, sem lahko Samo uporabite tipko znotraj zanke, 281 00:14:24,580 --> 00:14:29,040 ker sem samo posebej govorimo o vrednotah tam. 282 00:14:29,040 --> 00:14:32,630 >> Torej, kaj je morda trajalo pogled na razliko 283 00:14:32,630 --> 00:14:35,670 samo da hitro vam pokažem razlika med štiri 284 00:14:35,670 --> 00:14:40,730 v in iz z zelo specifično matrika, ki smo tukaj, teden matrika. 285 00:14:40,730 --> 00:14:43,616 Torej moram najti novo paleto da sem napolnjena s sedmimi strunami, 286 00:14:43,616 --> 00:14:46,240 Ponedeljek, torek, sreda, Četrtek, petek, sobota, nedelja. 287 00:14:46,240 --> 00:14:50,530 In želim, da zdaj Ponovil s tem polju, 288 00:14:50,530 --> 00:14:53,090 tiskanje določene informacije. 289 00:14:53,090 --> 00:14:58,780 Če sem uporabljate v zanki natisniti informacije, 290 00:14:58,780 --> 00:15:00,710 kaj misliš, da bom dobil? 291 00:15:00,710 --> 00:15:01,710 No, poglej. 292 00:15:01,710 --> 00:15:05,300 In preden smo skok čez do mojega okna brskalnika, 293 00:15:05,300 --> 00:15:08,090 samo vem, da console.log je nekako ena 294 00:15:08,090 --> 00:15:10,630 način za početje tiskanja F v JavaScript. 295 00:15:10,630 --> 00:15:12,040 Toda kaj je konzola? 296 00:15:12,040 --> 00:15:14,940 No, to je tisto, kar bomo iti, da pogled na zdaj. 297 00:15:14,940 --> 00:15:16,850 >> OK, tako da smo spet tukaj v mojem oknu brskalnika, 298 00:15:16,850 --> 00:15:19,410 in bom odpreti do mojih razvojnimi orodji. 299 00:15:19,410 --> 00:15:22,290 Še enkrat, jaz sem samo udaril F12 odpirati orodja za razvijalce. 300 00:15:22,290 --> 00:15:25,670 In opazil, da je tu v top sem izbral konzolo. 301 00:15:25,670 --> 00:15:28,480 Torej je ta pojem od razvijalca konzole, 302 00:15:28,480 --> 00:15:30,500 in to nam bo omogočilo, da tiskati informacije ven, 303 00:15:30,500 --> 00:15:33,000 nekaj podobnega terminala, vendar kot boste videli malo kasneje, 304 00:15:33,000 --> 00:15:37,720 bomo lahko tudi vnesete podatke v interakcijo z naše spletne strani. 305 00:15:37,720 --> 00:15:42,320 Jaz grem za povečavo malo tu, in bom zdaj kliknite na v testu. 306 00:15:42,320 --> 00:15:45,230 In štiri v test-- ne bom vam pokažem kodo za to prav zdaj, 307 00:15:45,230 --> 00:15:47,479 ampak ga boste dobili, če boste prenesete izvorno kodo, ki 308 00:15:47,479 --> 00:15:50,380 je povezana s to video-- je le, da je v zanko 309 00:15:50,380 --> 00:15:52,610 da smo videli samo Druga nazaj na slide. 310 00:15:52,610 --> 00:15:54,810 >> Torej bom klik, da je gumb, in tukaj, 311 00:15:54,810 --> 00:15:58,440 tukaj je, kaj se je izpisal v naslon, 0, ena, dva, tri, štiri, pet, 312 00:15:58,440 --> 00:15:58,940 šest. 313 00:15:58,940 --> 00:16:02,490 Nisem izpisati podatke znotraj teh polj lokacijah, 314 00:16:02,490 --> 00:16:05,180 ker sem uporabiti v zanko. 315 00:16:05,180 --> 00:16:10,670 In v notranjost telesa zanke, sem Samo izpisal ključ ne nasprotuje tipko. 316 00:16:10,670 --> 00:16:18,600 Ampak, če sem zdaj zbistriti konzolo, in jaz preklopite na za test, in štiri test 317 00:16:18,600 --> 00:16:22,500 Rečem uporabiti za zanke namesto tega in izpisal ključ, 318 00:16:22,500 --> 00:16:28,079 če sem kliknite, da zdaj jaz sem pridobivanje dejanski elementi znotraj mojega predmeta 319 00:16:28,079 --> 00:16:29,120 ali je moja matrika v tem primeru. 320 00:16:29,120 --> 00:16:31,760 Moj array teden dni. 321 00:16:31,760 --> 00:16:33,480 Jaz natisne ponedeljek, Torek, sreda. 322 00:16:33,480 --> 00:16:36,930 Tako, da je razlika med A za v zanko, ki natisne 323 00:16:36,930 --> 00:16:43,410 samo tipke, če ste jo pravkar uporabljate ključ notranjost telesa zanke 324 00:16:43,410 --> 00:16:46,850 in za zanke, ki tiska od vrednosti, če uporabljate le 325 00:16:46,850 --> 00:16:48,870 Ključ notranjost telesa zanke. 326 00:16:48,870 --> 00:16:52,380 >> Vse je v redu, kako bomo zdaj začeli združevanje nizov in morda pomešajo 327 00:16:52,380 --> 00:16:57,220 nekatere spremenljivke z interpolacijo kot smo bili sposobni narediti v PHP? 328 00:16:57,220 --> 00:16:59,410 No, mi smo precej seznanjeni s tem od PHP. 329 00:16:59,410 --> 00:17:04,109 To je, kako bi to naredil z uporabo dot operator za združevanje nizov. 330 00:17:04,109 --> 00:17:06,260 V JavaScript, čeprav, smo dejansko uporabili nekaj 331 00:17:06,260 --> 00:17:09,290 imenuje operator plus, ki je morda celo malo bolj 332 00:17:09,290 --> 00:17:10,470 intuitivno, kajne? 333 00:17:10,470 --> 00:17:12,609 Mi smo dodajanjem kup nizov skupaj. 334 00:17:12,609 --> 00:17:14,520 Torej vrnimo nazaj znova in videli, kaj je to 335 00:17:14,520 --> 00:17:18,693 bo izpisal, če smo poskušali, da natisnete vse informacije v tednu matriki. 336 00:17:18,693 --> 00:17:20,859 Vse je v redu, tako da v skladu s tukaj pod niz združevanje, 337 00:17:20,859 --> 00:17:24,822 Imam dve možnosti, niz stavba V1 in nato niz zgradba V2. 338 00:17:24,822 --> 00:17:26,530 In bomo videli, zakaj smo potrebujejo V2 v sekundi. 339 00:17:26,530 --> 00:17:28,610 Ampak bom kliknite na Niz zgradba V1, ki 340 00:17:28,610 --> 00:17:30,360 je koda smo tik ob poglej, 341 00:17:30,360 --> 00:17:32,980 console.log z vsemi pluse. 342 00:17:32,980 --> 00:17:35,910 Poglejmo, če te tiska izvedeti, kaj pričakujemo. 343 00:17:35,910 --> 00:17:39,939 >> Ponedeljek dan številka 01 v tednu, Torek je dan številka 11 tednu. 344 00:17:39,939 --> 00:17:41,730 No, kaj sem bil težaven storiti prišlo dobili 345 00:17:41,730 --> 00:17:46,280 ga natisniti ponedeljek dan številka ena, torek je dan številka dve. 346 00:17:46,280 --> 00:17:50,140 Toda zdi se, kot da sem Vedno tiskanje enega. 347 00:17:50,140 --> 00:17:51,260 No, zakaj je to? 348 00:17:51,260 --> 00:17:55,600 No, se izkaže, še enkrat pogledati na ta mali košček kode tukaj. 349 00:17:55,600 --> 00:18:00,160 Opazimo, da smo s tipkami plus operater v dveh različnih kontekstih. 350 00:18:00,160 --> 00:18:03,221 >> In tako da tukaj je, kjer morda stvari da smo nekako že rekel, 351 00:18:03,221 --> 00:18:03,970 oh, to je tako super. 352 00:18:03,970 --> 00:18:05,910 Mi se ne ukvarjajo s podatkovnimi tipi več. 353 00:18:05,910 --> 00:18:08,220 Ampak tukaj je, kjer je dejstvo, da smo izgubili podatkovnih tipov 354 00:18:08,220 --> 00:18:10,960 lahko dejansko malo problem za nas. 355 00:18:10,960 --> 00:18:16,260 Zdaj, ko je upravljavec plus se uporablja za združevanje nizov in dodate številke 356 00:18:16,260 --> 00:18:19,550 skupaj JavaScript je narediti svoje najboljše ugibati 357 00:18:19,550 --> 00:18:22,030 glede tega, kaj želim, da bi naredil zame. 358 00:18:22,030 --> 00:18:23,900 In v tem primeru, je uganil narobe. 359 00:18:23,900 --> 00:18:29,340 Samo sestavljenim dan, kar bi bilo 0, ena, dva, tri, štiri, pet ali šest, 360 00:18:29,340 --> 00:18:32,060 in potem to združena z verigo da nato združena z verigo eno. 361 00:18:32,060 --> 00:18:35,020 To pa jih dejansko ne seštevajo. 362 00:18:35,020 --> 00:18:37,320 In tako ti jeziki, PHP in JavaScript, 363 00:18:37,320 --> 00:18:39,196 da abstrahira stran ta pojem vrste, 364 00:18:39,196 --> 00:18:40,820 vam ni treba ukvarjati z njo več. 365 00:18:40,820 --> 00:18:43,600 So pa še vedno vrst pod pokrovom. 366 00:18:43,600 --> 00:18:46,780 In smo lahko v razmerah, kot je ta, izkoristite to dejstvo 367 00:18:46,780 --> 00:18:49,240 z besedami, kaj kot je morda to, kar 368 00:18:49,240 --> 00:18:53,210 je povedal JavaScript, z Tako to obravnava kot celo število, 369 00:18:53,210 --> 00:18:57,100 ga ne obravnava kot niz, celo čeprav smo mešanje skupaj strune 370 00:18:57,100 --> 00:18:58,940 in cela tukaj. 371 00:18:58,940 --> 00:19:02,204 >> To je samo ena od tistih stvari da se zdi tako velika, v okviru 372 00:19:02,204 --> 00:19:04,120 da mi ne bi bilo treba ukvarjajo z vrstami več, 373 00:19:04,120 --> 00:19:05,828 ampak včasih boste vodijo v situacijo 374 00:19:05,828 --> 00:19:09,110 natanko tako kot to, če je dejstvo, da nimate nadzora nad vrstami 375 00:19:09,110 --> 00:19:11,220 lahko Nazaj prižiganje na vas če niste previdni. 376 00:19:11,220 --> 00:19:18,285 In tako, če bomo pop nazaj čez do IDE, sem bo spet počistiti mojo konzolo, 377 00:19:18,285 --> 00:19:20,660 in grem, da kliknete niz Različica dva, ki 378 00:19:20,660 --> 00:19:23,052 je, če sem uporabljati to funkcijo razčleniti int. 379 00:19:23,052 --> 00:19:25,260 Zdaj je tiskanje informacije, da sem pričakoval. 380 00:19:25,260 --> 00:19:29,330 Ponedeljek dan številka ena, torek dan številka dve, in tako naprej. 381 00:19:29,330 --> 00:19:31,170 >> Torej, kaj je spet govoril o funkcijah. 382 00:19:31,170 --> 00:19:34,790 Obljubil sem, bomo govorili o anonimni funkcije, in zdaj kontekst, ki 383 00:19:34,790 --> 00:19:36,360 je končno prišel. 384 00:19:36,360 --> 00:19:39,980 Torej, preden bomo to storili, kaj je govoril zopet o nizi za samo sekundo. 385 00:19:39,980 --> 00:19:42,120 Torej, nizi so posebna V primeru objekta. 386 00:19:42,120 --> 00:19:45,180 V bistvu, vse v JavaScript je pravzaprav predmet. 387 00:19:45,180 --> 00:19:47,190 Torej funkcije so Poseben primer predmeta, 388 00:19:47,190 --> 00:19:49,770 cela števila so posebna V primeru objekta, 389 00:19:49,770 --> 00:19:52,152 vendar nizi posebej imajo številne metode. 390 00:19:52,152 --> 00:19:55,110 Ne pozabite, ker oni so predmeti, imajo lahko lastnosti in metod. 391 00:19:55,110 --> 00:19:58,600 Imajo številne metode, ki Uporabijo se lahko na te predmete. 392 00:19:58,600 --> 00:20:01,197 Obstaja metoda, imenovana velikost, array.size, 393 00:20:01,197 --> 00:20:03,030 ki se bo vrnil na ste, kot ste morda pričakovali 394 00:20:03,030 --> 00:20:05,120 število elementov v matriki. 395 00:20:05,120 --> 00:20:08,480 array.pop, nekako tako kot naš pojem popping off 396 00:20:08,480 --> 00:20:11,110 kupu, če se spomnimo iz naše Stacks video, 397 00:20:11,110 --> 00:20:13,810 odstrani zadnji element iz matrike. 398 00:20:13,810 --> 00:20:17,110 array.push dodaja nov element do konca matrike. 399 00:20:17,110 --> 00:20:20,910 array.shift je nekako kot DQ, da spoji ven 400 00:20:20,910 --> 00:20:23,610 zelo prvi element matrike. 401 00:20:23,610 --> 00:20:27,549 >> Ampak tam je tudi ena posebna metoda niz se imenuje zemljevid. 402 00:20:27,549 --> 00:20:29,340 In to je neke vrste zanimiv koncept. 403 00:20:29,340 --> 00:20:30,930 Torej, kaj je ideja o zemljevidu? 404 00:20:30,930 --> 00:20:33,880 Boste dejansko videli to v več drugih jezikih, 405 00:20:33,880 --> 00:20:38,550 in mi ne govorimo o nekako kartografov karto tukaj, 406 00:20:38,550 --> 00:20:41,480 govorimo o odvisnosti kartiranja. 407 00:20:41,480 --> 00:20:44,110 V kontekstu smo tu govoriš, zemljevid 408 00:20:44,110 --> 00:20:47,950 je posebna operacija smo lahko opravljajo na paleto 409 00:20:47,950 --> 00:20:51,630 uporabiti določeno funkcijo za vsak element tega polja. 410 00:20:51,630 --> 00:20:55,190 in tako bi lahko rekli v V tem primeru, morda array.map, 411 00:20:55,190 --> 00:21:00,330 in znotraj nje, smo mimo na karti je funkcija, ki ga želimo 412 00:21:00,330 --> 00:21:02,430 ki se uporablja za vsak posamezen element. 413 00:21:02,430 --> 00:21:07,299 Torej, to je nekako analogno uporabo zanka za ponovitev čez vsak element 414 00:21:07,299 --> 00:21:09,340 in se uporablja posebna delovati na vsakem elementu, 415 00:21:09,340 --> 00:21:14,830 Samo JavaScript je to vgrajeno Pojem kartiranja, ki se lahko uporabljajo. 416 00:21:14,830 --> 00:21:19,700 In to je odličen okvir za govorimo o anonimni funkcijo. 417 00:21:19,700 --> 00:21:22,370 >> Torej, recimo, da imamo ta množica celih števil. 418 00:21:22,370 --> 00:21:25,370 Imenuje nums, in je dobil pet stvari v njem, ena, dva, tri, štiri, 419 00:21:25,370 --> 00:21:26,410 pet. 420 00:21:26,410 --> 00:21:30,620 Sedaj želim karto nekaj funkcija na tem polju. 421 00:21:30,620 --> 00:21:34,337 Rad bi imel funkcijo uporabiti za vsak element matrike. 422 00:21:34,337 --> 00:21:37,420 No, recimo, da je tisto, kar želim storiti je samo dvojno vseh elementov. 423 00:21:37,420 --> 00:21:42,520 Kaj lahko storim je le uporabiti zanko za var I enak 0, I je manj kot 424 00:21:42,520 --> 00:21:47,390 ali enako 4, sem plus plus in takrat podvojilo vsako posamezno številko. 425 00:21:47,390 --> 00:21:49,580 Ampak ne morem narediti tudi kaj takega. 426 00:21:49,580 --> 00:21:53,420 Lahko rečem nums je bil prej ena dva tri štiri pet, 427 00:21:53,420 --> 00:21:58,310 zdaj, čeprav, jaz bi vas rad uporablja preslikavo na tem polju 428 00:21:58,310 --> 00:22:00,400 če bi vas rad podvojilo vsako številko. 429 00:22:00,400 --> 00:22:02,540 In to je točno kaj se dogaja tukaj. 430 00:22:02,540 --> 00:22:06,870 Ampak obvestilo, kaj sem mimo v kot argument na zemljevid. 431 00:22:06,870 --> 00:22:09,080 To je anonimna funkcija. 432 00:22:09,080 --> 00:22:11,140 In opazila nisem dal ta funkcija ime, 433 00:22:11,140 --> 00:22:13,290 Sem mu dal samo seznam parametrov. 434 00:22:13,290 --> 00:22:16,370 In tako je to primer od anonimnega funkcije. 435 00:22:16,370 --> 00:22:21,270 >> Smo na splošno ne bi nikoli to imenujemo Funkcija izven konteksta zemljevidu. 436 00:22:21,270 --> 00:22:24,110 Mi smo jo opredeljuje kot parameter zemljevid, in tako smo v resnici ne 437 00:22:24,110 --> 00:22:27,910 morajo imeti ime za to, če Edina stvar, ki skrbi je map 438 00:22:27,910 --> 00:22:30,339 in to je opredeljena pravica obstaja znotraj zemljevida. 439 00:22:30,339 --> 00:22:31,880 In tako je to anonimno funkcijo. 440 00:22:31,880 --> 00:22:34,680 Nismo bili sposobni to storiti že prej. 441 00:22:34,680 --> 00:22:38,400 Zemljevid nekatere funkcije, ki sprejema enega parametra, num, 442 00:22:38,400 --> 00:22:41,890 in kaj ta funkcija ne se vrne num krat 2. 443 00:22:41,890 --> 00:22:45,330 In tako po tem je bil uporabljen kartiranje, 444 00:22:45,330 --> 00:22:50,090 to je zdaj kaj nums videz podobno, dve, štiri, šest, osem, 10. 445 00:22:50,090 --> 00:22:52,090 In bomo pop v mojo okno brskalnika in samo 446 00:22:52,090 --> 00:22:55,240 poglej na to res hitro, kot tudi. 447 00:22:55,240 --> 00:22:58,000 >> Torej imam drug gumb tukaj V moji domači strani imenuje dvojno. 448 00:22:58,000 --> 00:23:03,570 In ko sem kliknite dvojna, in to pove mi preden je bila ena, dva, tri, štiri, 449 00:23:03,570 --> 00:23:07,250 pet po dva, štiri, šest, osem, 10. 450 00:23:07,250 --> 00:23:11,930 In če grem nazaj in kliknite double Ponovno, dve, štiri, šest, osem, 10. 451 00:23:11,930 --> 00:23:17,400 In potem po štiri, osem, 12, 16, in nato 20. 452 00:23:17,400 --> 00:23:20,440 In kaj počnem v tej funkciji? 453 00:23:20,440 --> 00:23:25,210 No, če smo samo pop prenesejo IDE, in Sem dvigni mojo anonimno funkcijo, tu 454 00:23:25,210 --> 00:23:28,780 na liniji sedem do 13 let, da sem početje malo fancy delo tukaj, 455 00:23:28,780 --> 00:23:32,240 ampak jaz sem samo tiskanje kaj je trenutno v matriki. 456 00:23:32,240 --> 00:23:36,580 Nato na liniji 16, 17, in 18, tam je moja karta. 457 00:23:36,580 --> 00:23:40,930 To je, če sem uporabo tega podvojitev funkcija za vsak posamezen element. 458 00:23:40,930 --> 00:23:43,530 In potem še malo navzdol, Jaz sem samo počne isto stvar 459 00:23:43,530 --> 00:23:46,640 Sem delal prej, razen zdaj sem tiskanje vsebino matrike 460 00:23:46,640 --> 00:23:48,167 zatem. 461 00:23:48,167 --> 00:23:50,500 Ampak vse tukaj sem naredil, je samo uporabo anonimnega funkcijo 462 00:23:50,500 --> 00:23:53,640 zemljevid čez celotno paleto. 463 00:23:53,640 --> 00:23:58,466 >> Torej, še ena velika tema za pogovor o v JavaScript je pojem dogodka. 464 00:23:58,466 --> 00:24:01,590 Dogodek je nekaj, kar se zgodi le ko uporabnik komunicira z vašo spletno 465 00:24:01,590 --> 00:24:04,715 stran, tako da morda pa kliknite nekaj, ali pa je stran naložena, 466 00:24:04,715 --> 00:24:07,200 ali pa ste se preselili njihova miško nad nečim, 467 00:24:07,200 --> 00:24:09,290 ali oni vnesli nekaj v vnosno polje. 468 00:24:09,290 --> 00:24:14,260 Vse te stvari so dogodki ki se pojavljajo na naši spletni strani. 469 00:24:14,260 --> 00:24:17,460 In JavaScript je sposobnost za podporo nekaj 470 00:24:17,460 --> 00:24:21,760 imenuje dogodek trener, ki je funkcija za povratni klic, ki 471 00:24:21,760 --> 00:24:23,329 odziva na html dogodka. 472 00:24:23,329 --> 00:24:24,620 In kaj je funkcija za povratni klic? 473 00:24:24,620 --> 00:24:27,328 No, to je v glavnem samo še en ime za anonimno funkcijo. 474 00:24:27,328 --> 00:24:30,170 To je funkcija odziva na dogodek. 475 00:24:30,170 --> 00:24:34,130 In to je, če smo prišli do Ideja o zavezujočih določenih funkcij 476 00:24:34,130 --> 00:24:38,060 na določeno html atributa. 477 00:24:38,060 --> 00:24:41,420 Večina elementov html imajo podpora za atribut 478 00:24:41,420 --> 00:24:45,170 da nismo govorili o v html video nekaj podobnega na klik 479 00:24:45,170 --> 00:24:50,540 ali na lebdenje ali obremenitve, vse te dogodke 480 00:24:50,540 --> 00:24:53,120 da lahko potem napišite funkcije ki se ukvarjajo s temi dogodki 481 00:24:53,120 --> 00:24:56,090 ko te dogodke pojavijo na vaši spletni strani. 482 00:24:56,090 --> 00:24:59,170 >> In tako morda vaš html izgleda nekako takole. 483 00:24:59,170 --> 00:25:02,240 In imam dva gumba tukaj, Gumb ena in dva gumba, 484 00:25:02,240 --> 00:25:04,620 in tukaj imam trenutno opredeljena nič, 485 00:25:04,620 --> 00:25:11,170 ampak to je, če atribut klik je očitno del mojega html tag. 486 00:25:11,170 --> 00:25:15,220 Torej, očitno, ko sem opredeliti, kaj je dogaja znotraj tega atributa, 487 00:25:15,220 --> 00:25:18,590 to se dogaja, da se nekateri JavaScript funkcijo, ki se odziva na dogodek 488 00:25:18,590 --> 00:25:24,360 domnevno z klikom na Gumb en gumb ali dva. 489 00:25:24,360 --> 00:25:28,580 >> Kaj je nekako kul je to smo Lahko napišete generični dogodek trener. 490 00:25:28,580 --> 00:25:32,370 In ta dogodek Handler bo ustvariti dogodek predmeta. 491 00:25:32,370 --> 00:25:37,000 In nam bo dogodek predmet povej kateri od teh dveh gumbov je kliknil. 492 00:25:37,000 --> 00:25:38,064 Zdaj pa, kako to deluje? 493 00:25:38,064 --> 00:25:39,730 No, morda je videti nekako takole. 494 00:25:39,730 --> 00:25:44,860 Tako bomo najprej opredeliti svoje gumbe da imajo odgovor na povratni klic 495 00:25:44,860 --> 00:25:47,470 funkcijo, ki se bo imenovala ko je gumb kliknili, 496 00:25:47,470 --> 00:25:49,520 bomo klic dogodek opozorilno ime. 497 00:25:49,520 --> 00:25:53,320 In opazil, v obeh primerih sva poteka na tem dogodku parameter. 498 00:25:53,320 --> 00:25:55,460 Torej pravimo to funkcijo ali ko je ta funkcija 499 00:25:55,460 --> 00:26:00,330 se sproži dogodek dogaja, to se dogaja, da ustvarite ta dogodek predmeta 500 00:26:00,330 --> 00:26:03,300 in ga prenese kot parameter za opozarjanje ime. 501 00:26:03,300 --> 00:26:07,270 In ta dogodek objekt dogaja, da vsebujejo informacije 502 00:26:07,270 --> 00:26:09,800 o katerih je gumb kliknili. 503 00:26:09,800 --> 00:26:11,580 In kako to storiti? 504 00:26:11,580 --> 00:26:13,654 No, morda je videti nekako takole. 505 00:26:13,654 --> 00:26:15,570 Torej, zdaj je moja ločena Datoteka JavaScript, da bi lahko 506 00:26:15,570 --> 00:26:17,420 morali najti to Funkcija opozarjanja ime, ki 507 00:26:17,420 --> 00:26:19,500 spet sprejema ta dogodek parameter. 508 00:26:19,500 --> 00:26:24,640 In potem je tu, kjer sem zaznavam kateri gumb je sprožil, 509 00:26:24,640 --> 00:26:28,100 var sprožilec enak dogodek pika element vira. 510 00:26:28,100 --> 00:26:33,150 Kaj je bil vir, ki je ustvaril Ta dogodek je objekt, ki je bil sprejet leta? 511 00:26:33,150 --> 00:26:36,390 Bila je Gumb ena ali pa je gumb za dva? 512 00:26:36,390 --> 00:26:40,710 >> In potem tukaj vse kar počnem, je tiskanje trigger.innerhtml. 513 00:26:40,710 --> 00:26:43,860 No, v tem primeru v tem kontekst, trigger.innerhtml 514 00:26:43,860 --> 00:26:45,940 je samo tisto, kar je napisano na gumb. 515 00:26:45,940 --> 00:26:48,830 Samo tako se zgodi, če skočimo nazaj za sekundo, bi, da 516 00:26:48,830 --> 00:26:51,670 to, kar je med temi gumb oznakami. 517 00:26:51,670 --> 00:26:54,150 To bo gumb en gumb ali dva. 518 00:26:54,150 --> 00:26:57,320 In dajmo si oglejte kako bi ta dogodek trener 519 00:26:57,320 --> 00:27:01,080 poglej, če bi imeli to deluje v praksi. 520 00:27:01,080 --> 00:27:03,850 >> Torej, najprej, ste odprle events.js, 521 00:27:03,850 --> 00:27:06,517 ki je datoteka JavaScript kjer Imam definirana to funkcijo. 522 00:27:06,517 --> 00:27:08,558 In kot lahko vidite, da je precej točno to, kar 523 00:27:08,558 --> 00:27:10,230 smo pravkar videli na slide drugi nazaj. 524 00:27:10,230 --> 00:27:14,890 In bom šel čez na Domača stran smo bili z uporabo. 525 00:27:14,890 --> 00:27:17,660 In tukaj imam gumb ena in dva gumba. 526 00:27:17,660 --> 00:27:19,820 In bom kliknite na gumb enega. 527 00:27:19,820 --> 00:27:23,930 Ste kliknili na gumb eno, če vas vidim tukaj v razpisu. 528 00:27:23,930 --> 00:27:25,810 V REDU. 529 00:27:25,810 --> 00:27:28,980 Kliknite na gumb dveh, vas kliknili na gumb dveh. 530 00:27:28,980 --> 00:27:32,150 >> Torej, obe tipki imajo Enako klic funkcije, kajne? 531 00:27:32,150 --> 00:27:35,840 Prav tako je bilo opozorilo ime dogodek, vendar je ta dogodek objekt 532 00:27:35,840 --> 00:27:41,900 da dobi ustvarili, ko smo kliknite na to nam pove, kateri gumb je kliknil. 533 00:27:41,900 --> 00:27:44,650 Nismo imeli napisati dveh ločenih funkcije ali se ukvarjajo z ob 534 00:27:44,650 --> 00:27:46,470 da prenese vse dodatne informacije. 535 00:27:46,470 --> 00:27:48,220 Mi samo zanašajo na kar JavaScript bo 536 00:27:48,220 --> 00:27:53,772 narediti za nas, ki je ustvariti, da nekako dogodkovnega objekta v našem imenu. 537 00:27:53,772 --> 00:27:56,730 Tam je veliko več za JavaScript kot kaj smo zajeti v tem videu, 538 00:27:56,730 --> 00:27:58,521 vendar imajo ti Temeljna naj bi dobil 539 00:27:58,521 --> 00:28:00,690 precej dolgo načini za učenje vse, kar boste 540 00:28:00,690 --> 00:28:04,030 morate vedeti o tem zanimiv jezik. 541 00:28:04,030 --> 00:28:05,000 Sem Doug Lloyd. 542 00:28:05,000 --> 00:28:07,010 To je CS50. 543 00:28:07,010 --> 00:28:09,181