1 00:00:00,000 --> 00:00:02,700 [Powered by Google Translate] [Tjedan 9, Nastavak] 2 00:00:02,700 --> 00:00:05,160 [David J. Malan - Sveučilište Harvard] 3 00:00:05,160 --> 00:00:07,020 [Ovo je CS50. - CS50.TV] 4 00:00:07,940 --> 00:00:13,340 >> Ovo je CS50. To je kraj tjedna 9. Puno hvala. 5 00:00:13,340 --> 00:00:15,310 Konačno. Tjedan 9. Ja ga dobio. 6 00:00:15,310 --> 00:00:18,590 Danas ćemo nastaviti naš razgovor o web programiranju 7 00:00:18,590 --> 00:00:21,660 s okom prema konačnom projektu, a ne zato što morate učiniti nešto web-based 8 00:00:21,660 --> 00:00:25,610 za završne projekte, ali zato ni za konačnih projekata ili nakon CS50 9 00:00:25,610 --> 00:00:29,000 ovo je svakako smjer u kojem moderna softver ide. 10 00:00:29,000 --> 00:00:31,770 Pa ipak, to je zapravo nije jednostavna stvar. 11 00:00:31,770 --> 00:00:35,040 U stvari, jedna od najtežih stvari koje treba učiniti je aspekt dizajna. 12 00:00:35,040 --> 00:00:38,600 >> Na primjer, po dizajnu mi zapravo znači dobivanje korisničko sučelje 13 00:00:38,600 --> 00:00:40,420 ili korisničko iskustvo u pravu. 14 00:00:40,420 --> 00:00:43,200 Ja pretpostavljam - i mi znamo iz nedavne problema setu 15 00:00:43,200 --> 00:00:45,960 kad neki od vas emitiran svoje trbušni grčevi o nekom komad softvera 16 00:00:45,960 --> 00:00:49,000 ili hardver koji vam infuriates, da li na kampusu ili izvan - 17 00:00:49,000 --> 00:00:51,930 postoji puno web-mjesta vani, postoji puno hardvera vani, 18 00:00:51,930 --> 00:00:53,900 takav je sranje. 19 00:00:53,900 --> 00:00:58,730 No, stvarnost je da čine stvari koje su jednostavno za korištenje, ali su ipak moćan 20 00:00:58,730 --> 00:01:00,550 je vrlo težak izazov. 21 00:01:00,550 --> 00:01:03,680 Tako je za danas sam pitao Josip i Tommy mi se pridružiti ovdje 22 00:01:03,680 --> 00:01:06,680 tako da možemo razgovarati, kako o dizajnu 23 00:01:06,680 --> 00:01:09,090 i što vrste misaonih procesa trebala početi prolazi kroz glavu 24 00:01:09,090 --> 00:01:12,040 kada dizajnirati svoje konačne projekte, buduća nastojanja. 25 00:01:12,040 --> 00:01:15,040 A onda s Tommyjeva pomoć ćemo pogledati neke od provedbenih detalja. 26 00:01:15,040 --> 00:01:18,440 Kako možete imati neku viziju na papiru ili u glavi 27 00:01:18,440 --> 00:01:20,760 da možete izvršiti programski 28 00:01:20,760 --> 00:01:24,030 pomoću neke od tehnologija i tehnika upravo smo počeli govoriti o, 29 00:01:24,030 --> 00:01:29,080 naime JavaScript i nešto još novije, naime AJAX, Asinkroni JavaScript. 30 00:01:29,080 --> 00:01:32,950 To vam omogućuje da stvorite sve više dinamike i korisničko sučelje 31 00:01:32,950 --> 00:01:35,780 po dobavljanje više i više podataka progresivno s poslužitelja. 32 00:01:35,780 --> 00:01:38,560 Pa ćemo vidjeti neke od tih isječaka, kao i danas. 33 00:01:38,560 --> 00:01:41,800 Kao na stranu, ako ste zainteresirani u koncentraciji u informatici 34 00:01:41,800 --> 00:01:45,010 ili minoring u informatici, znam da je ovaj petak u podne 35 00:01:45,010 --> 00:01:48,750 u Maxwell Dworkinu 221 održat će se manifestacija pizzu 36 00:01:48,750 --> 00:01:50,780 gdje možete naučiti nešto više o informatici. 37 00:01:50,780 --> 00:01:54,860 Na putu iz vrata danas ćete biti u mogućnosti pokupiti neslužbeni vodič za CS na Harvardu. 38 00:01:54,860 --> 00:01:57,290 Mi ćemo ga staviti na kantama za smeće izvan na visini struka 39 00:01:57,290 --> 00:01:59,750 tako da ako želite da iskoristite ovu i naučiti nešto više o CS, 40 00:01:59,750 --> 00:02:02,480 koja će biti tu za vas, kao što je bio u tjednu 0. 41 00:02:02,480 --> 00:02:06,500 Također, ako želite da nam se pridružite za ručak CS50 ovaj petak u 13:15, 42 00:02:06,500 --> 00:02:09,800 glavu cs50.net/lunch. 43 00:02:09,800 --> 00:02:13,260 Bez dodatnih teškoća, dajem vam demonstrator Joseph Ong. 44 00:02:13,260 --> 00:02:19,190 Bok. [Pljesak] 45 00:02:19,190 --> 00:02:20,770 Hvala. 46 00:02:20,770 --> 00:02:24,780 Kad sam prvi put saznao o dizajnu bio u klasi ovdje zove CS179. 47 00:02:24,780 --> 00:02:28,040 >> Profesor na vrijeme rekao nam priču o drugom profesora 48 00:02:28,040 --> 00:02:31,640 koji je otišao u hotel, a koristi se pipa. 49 00:02:31,640 --> 00:02:35,630 Može bilo tko reći mene što je dva gumba na lijevo i desno učiniti? 50 00:02:35,630 --> 00:02:39,080 [Student] topla i hladna. >> Topla i hladna. Dobro. 51 00:02:39,080 --> 00:02:41,430 Ono što se obično očekuje, zar ne? 52 00:02:41,430 --> 00:02:46,960 Ovaj profesor nakon korištenja pipa želi istuširati, a on nastavlja koristiti. 53 00:02:46,960 --> 00:02:51,310 On misli da lijeva i desna strana su za toplo i hladno, zar ne? 54 00:02:51,310 --> 00:02:55,470 No, može bilo tko reći mene što to zapravo učiniti? 55 00:02:55,470 --> 00:02:58,060 Bilo ruke? 56 00:02:58,060 --> 00:03:01,740 [Nečujno učenik odgovor] >> Jedan prijedlog je? 57 00:03:01,740 --> 00:03:05,860 [Nečujno učenik odgovor] >> Temperatura? 58 00:03:05,860 --> 00:03:10,460 Tako jedan od njih kontrolira temperaturu i ostale kontrole? >> [Student] pritisak vode. 59 00:03:10,460 --> 00:03:12,350 Tlak vode. Dobro. 60 00:03:12,350 --> 00:03:15,100 Ovaj profesor uđe u to i, misleći da su kontrole topla i hladna, 61 00:03:15,100 --> 00:03:21,470 Ispada onu pravu, koja misli da je za vruće, pa sve do 62 00:03:21,470 --> 00:03:23,560 jer on želi da se toplim tušem. 63 00:03:23,560 --> 00:03:28,100 Pa, to stvarno ne podudaraju, tako da on dobiva ovo nije jako zabavno iskustvo 64 00:03:28,100 --> 00:03:31,110 bivanja u hladan tuš, a svi znamo što to osjeća kao. 65 00:03:31,110 --> 00:03:33,620 Ovo je primjer dizajna mana. 66 00:03:33,620 --> 00:03:37,040 Što mislim da je njegova očekivanja od pipa 67 00:03:37,040 --> 00:03:39,420 ne odgovara što je izašao iz tuša, 68 00:03:39,420 --> 00:03:41,780 koja je vrsta nesretni za njega. 69 00:03:41,780 --> 00:03:44,990 Dakle, ovo je primjer dizajna mana što se događa u stvarnom životu. 70 00:03:44,990 --> 00:03:48,020 Ali smo vidjeli svakakve one druge kao dobro. 71 00:03:48,020 --> 00:03:50,390 Mi smo vjerojatno nije obožavatelji MBTA sustava. 72 00:03:50,390 --> 00:03:55,560 Ovo je metro sustav zapravo u Londonu, koji kaže: "Ovaj gumb nije u uporabi." 73 00:03:55,560 --> 00:04:00,220 Zašto je to još na tu? Zašto smo čak i briga? 74 00:04:00,220 --> 00:04:02,810 Kad sam bio klinac, kao tech pamet jedna u kući, 75 00:04:02,810 --> 00:04:05,050 kad računalo će se srušiti, moja mama će doći do mene, 76 00:04:05,050 --> 00:04:07,060 pokazujući mi ovaj ekran i me pitaju što se dogodilo. 77 00:04:07,060 --> 00:04:09,210 >> Čak i ne znam što to znači. 78 00:04:11,890 --> 00:04:14,700 [Smijeh] Što? 79 00:04:16,950 --> 00:04:18,019 [Smijeh] 80 00:04:18,720 --> 00:04:23,050 Ponekad se osjećamo kao programerima su samo trolling nas. 81 00:04:23,050 --> 00:04:28,460 Kao korisnici smo kao, "Što se događa? Netko nam reći." 82 00:04:28,460 --> 00:04:32,140 To sve se svodi na problem dizajna. 83 00:04:32,140 --> 00:04:34,650 Dizajn, kao što možemo vidjeti, nije čisto o estetici, 84 00:04:34,650 --> 00:04:37,230 se ne radi o tome kako stvari izgledaju. 85 00:04:37,230 --> 00:04:41,720 Ovdje vidimo da je ovaj mali pop-up ovamo zapravo izgleda prilično lijepo. 86 00:04:41,720 --> 00:04:45,290 Ona ima drop shadow u pozadini, ima granične polumjerima događa. 87 00:04:45,290 --> 00:04:47,550 To je vrsta prilično. 88 00:04:47,550 --> 00:04:51,480 To nije jako dobro osmišljen, jer to nije vrlo user friendly. 89 00:04:51,480 --> 00:04:54,920 Taj mali pop-up koji dolazi zapravo ne daj mi bilo kakve informacije 90 00:04:54,920 --> 00:04:58,450 o tome što se događa, to ne govori mi ništa kao korisnika 91 00:04:58,450 --> 00:05:01,400 o tome kako da se oporavim od tog pogreške. 92 00:05:01,400 --> 00:05:05,190 Mi želimo razmišljati o stvarima koje dizajn nije. 93 00:05:05,190 --> 00:05:06,670 Prvo, to nije estetika. 94 00:05:06,670 --> 00:05:10,800 To je također ne nadev svoju aplikaciju s tona nepotrebnih funkcionalnosti. 95 00:05:10,800 --> 00:05:14,890 Ako ste tajlandski restoran, vjerojatno ne želite biti zubar u isto vrijeme. 96 00:05:14,890 --> 00:05:17,720 A s Facebooka pitanja, a ne da se mnogi ljudi ga koriste 97 00:05:17,720 --> 00:05:21,130 i to nije bio stvarno u srži onoga što su gradili. 98 00:05:21,130 --> 00:05:24,200 I tako je lijepo razmišljati o ne toliko količinu stvari 99 00:05:24,200 --> 00:05:26,390 da ste stavljanjem na svoj zahtjev, ali kvaliteta 100 00:05:26,390 --> 00:05:28,910 i kako radite to bolje korisničko iskustvo 101 00:05:28,910 --> 00:05:32,540 a zapravo poboljšanje na ono što već imate. 102 00:05:32,540 --> 00:05:37,040 >> U Ukratko, dizajn govori nam ono što smo trebali graditi. 103 00:05:37,040 --> 00:05:41,950 Na primjer, ako gradimo nešto što neka nas traži stvari, 104 00:05:41,950 --> 00:05:45,970 poput Googlea, na primjer, trebali smo raditi stvari na način 105 00:05:45,970 --> 00:05:48,950 koji zahtijeva korisnik to uzeti puno klikova doći do onoga što žele, 106 00:05:48,950 --> 00:05:52,580 ili bi mi to učiniti na način, na primjer, s Google Instant ili samodovršetka 107 00:05:52,580 --> 00:05:54,970 koji nam omogućuje doći do naših rezultata brže? 108 00:05:54,970 --> 00:05:58,740 Inženjering uključuje, kao i Tommy će vam pokazati, zapravo gradi. 109 00:05:58,740 --> 00:06:01,890 Postoji puno vrsta dizajna. 110 00:06:01,890 --> 00:06:06,070 Na primjer, ako ste izgradnju nešto za implementaciju nešto 111 00:06:06,070 --> 00:06:09,770 u zemlje Trećeg svijeta gdje nema puno struje ili da je mnogo tehnologija, 112 00:06:09,770 --> 00:06:11,440 morate dizajnirati ono što ste izgradnju 113 00:06:11,440 --> 00:06:14,210 na način da se lako daje pristup ljudima tamo. 114 00:06:14,210 --> 00:06:18,290 No, ono što vrste drugih dizajnerskih odluka bi moglo biti 115 00:06:18,290 --> 00:06:21,850 ili može biti uključen u ovako nešto? 116 00:06:23,690 --> 00:06:25,660 Da. Vidim ruku. 117 00:06:25,660 --> 00:06:37,200 [Nečujno učenik odgovor] >> Točno. Točno. Pristup je jedna stvar. 118 00:06:37,200 --> 00:06:40,870 Puno ljudi ne razmišljaju o tome, "Što je s mojim korisnicima?" 119 00:06:40,870 --> 00:06:43,160 kao krajnosti bilo spektra. 120 00:06:43,160 --> 00:06:47,770 Imam korisnike koji bi mogli imati poteškoće da ja ne razmišljam o tome 121 00:06:47,770 --> 00:06:50,590 a ja samo razmišljam o projektiranju za opće korisnika. 122 00:06:50,590 --> 00:06:52,630 Internet je dostupan svima danas, 123 00:06:52,630 --> 00:06:54,870 i ja bi trebao biti projektiranja za one ljude kao dobro. 124 00:06:54,870 --> 00:06:58,620 Koje vrste drugih dizajnerskih odluka može napraviti? 125 00:06:58,620 --> 00:07:00,690 Da. >> [Student] troškova. 126 00:07:00,690 --> 00:07:02,680 Trošak. Vrlo dobro. 127 00:07:02,680 --> 00:07:08,060 Još jedna stvar koju možemo temeljiti naše dizajnerske odluke o su trošak. 128 00:07:08,060 --> 00:07:13,130 Ako smo posao, želite izgraditi nešto što ne uzima puno troškova za proizvodnju 129 00:07:13,130 --> 00:07:17,720 ali se može prodati po izuzetno visokim troškovima ili može doći nam neki profit. 130 00:07:17,720 --> 00:07:21,540 >> To su sve različite vrste dizajna, ali kada smo izgradnju nešto na internetu 131 00:07:21,540 --> 00:07:25,120 ili kad smo izgradnju nešto što vjerojatno ne košta toliko izgraditi do sada, 132 00:07:25,120 --> 00:07:28,630 poput Internet aplikacija - ne morate baciti puno kapital u nju 133 00:07:28,630 --> 00:07:30,900 kako napraviti nešto što zapravo radi - 134 00:07:30,900 --> 00:07:33,490 što smo više zabrinuti je korisničko iskustvo. 135 00:07:33,490 --> 00:07:36,390 Mi to zovemo korisnički usmjeren dizajn. 136 00:07:36,390 --> 00:07:41,550 U suštini ono što korisnik usmjeren dizajn uključuje se sami stavljanjem u cipele svojih korisnika. 137 00:07:41,550 --> 00:07:44,870 Ako netko prijavi za ono što sam izgradnju, 138 00:07:44,870 --> 00:07:48,250 oni očito ste došli na moj određenu primjenu s ciljem na umu, 139 00:07:48,250 --> 00:07:50,280 sa zadaćom da žele završiti. 140 00:07:50,280 --> 00:07:53,650 I vaš posao je ne samo da im pomogne dovršiti taj zadatak 141 00:07:53,650 --> 00:07:57,930 ali da im pomogne dovršiti taj zadatak na način koji je učinkovit, intuitivno, 142 00:07:57,930 --> 00:08:01,900 i, kao što neki čovjek rekao tamo, dostupni. 143 00:08:01,900 --> 00:08:03,750 Što učinkovitost znači? 144 00:08:03,750 --> 00:08:08,050 Učinkovitost znači koliko brzo se moj korisnički dovršiti zadatak dao moj sučelje. 145 00:08:08,050 --> 00:08:11,650 Da li je potrebno puno klikova za njih da se iz jednog mjesta na drugo? 146 00:08:11,650 --> 00:08:14,630 Je li to zamorno? Da li oni moraju izvršiti puno zadatke koji se ponavljaju? 147 00:08:14,630 --> 00:08:17,140 Želimo da se taj proces što učinkovitiji 148 00:08:17,140 --> 00:08:20,070 tako da oni ne moraju raditi te svašta. 149 00:08:20,070 --> 00:08:24,230 Kao i za intuitivnost, da je, na primjer, ako korisnik traži moj sučelje, 150 00:08:24,230 --> 00:08:27,240 da je to lako za njih da se od mjesta do mjesta? 151 00:08:27,240 --> 00:08:30,390 Je li to lako za njih shvatiti što oni imaju kliknuti na mom sučelju 152 00:08:30,390 --> 00:08:33,770 kako bi za njih da bi se postigao cilj ili zadatak koji žele postići? 153 00:08:33,770 --> 00:08:37,520 >> I na kraju, kao jedna osoba rekla tamo, dostupnost je vrlo važno. 154 00:08:37,520 --> 00:08:39,640 [Muškarac govornik] To pitanju pristupačnosti za stvari kao što su vizije, 155 00:08:39,640 --> 00:08:42,740 Sviđa mi se kako mi je zapravo dizajnirati nešto za nekoga tko je slijep? 156 00:08:42,740 --> 00:08:46,460 Oh. Za ljude koji ne mogu vidjeti na sve, mi imamo nešto što se zove ekran čitatelji. 157 00:08:46,460 --> 00:08:49,070 Što trebate učiniti je da treba graditi svoju web stranicu na način 158 00:08:49,070 --> 00:08:52,020 da, na primjer, pojedine tehnologije ono što mi zovemo - 159 00:08:52,020 --> 00:08:53,590 Postoji puno stvari sada. 160 00:08:53,590 --> 00:08:55,660 Mislim da postoje screen čitatelji nazivaju JAWS. 161 00:08:55,660 --> 00:08:58,410 Puno tih stvari se oslanjaju na ono što mi zovemo area pravila 162 00:08:58,410 --> 00:09:02,010 kako bi se očitati na korisnika što je prisutan na stranici. 163 00:09:02,010 --> 00:09:05,480 Za one ljude koji ne mogu vidjeti, trebate kako bi bili sigurni da su ti screen čitatelji 164 00:09:05,480 --> 00:09:09,130 zapravo može pokupiti sadržaja na stranici, a zapravo može pokazati svoje korisnike, 165 00:09:09,130 --> 00:09:13,630 ako ne možete vidjeti, barem još uvijek možete razumjeti sadržaj na stranici. 166 00:09:13,630 --> 00:09:16,190 Da. Ok. 167 00:09:16,190 --> 00:09:23,410 Dosta se govori o dobrom dizajnu. Ajmo pričati o lošem dizajnu. 168 00:09:23,410 --> 00:09:25,220 To su stvari koje ne biste trebali učiniti. 169 00:09:25,220 --> 00:09:27,890 Može li mi itko reći o svojim iskustvima s Craigslist 170 00:09:27,890 --> 00:09:32,190 i ono što oni misle da je ne tako veliki o ovom dizajnu? 171 00:09:33,690 --> 00:09:36,430 Da. >> [Student] Mislim da je previše riječi u jednom području. 172 00:09:36,430 --> 00:09:39,350 Previše riječi, zar ne? Potpuno neodoljiv. 173 00:09:39,350 --> 00:09:42,400 Vi dolazite na ovu stranicu i da ste dočekali s cijela hrpa stvari ovdje 174 00:09:42,400 --> 00:09:43,860 da možda čak i ne smeta ti. 175 00:09:43,860 --> 00:09:47,010 Na primjer, ako živite u jednoj državi koja ne počinju s tim slovom. 176 00:09:47,010 --> 00:09:48,690 Recimo da žive u Teksasu ili nešto. 177 00:09:48,690 --> 00:09:53,790 >> Morate pomicati skroz dolje na stranici da se na mjesto koje su u. 178 00:09:53,790 --> 00:10:00,320 Ja sam iz Bostona, pa neka me gledati u Massachusettsu. Gdje je Massachusetts? 179 00:10:00,320 --> 00:10:03,270 Oh, to je upravo ovdje. Oh, to je Boston. Ok. 180 00:10:03,270 --> 00:10:09,070 Pogledajmo Bostonu. [Smijeh] 181 00:10:09,070 --> 00:10:12,250 Prilično velika, zar ne? 182 00:10:12,250 --> 00:10:16,400 Nespretne stvari tamo. [Smijeh] 183 00:10:17,320 --> 00:10:19,470 Recimo ja sam u potrazi za negdje živjeti. 184 00:10:19,470 --> 00:10:24,130 Koliko ljudi zapravo koriste Craigslist? Tona vas. 185 00:10:24,130 --> 00:10:30,960 Tu su prilično loši načini da pogledate ovo, ali pogledajmo to. 186 00:10:35,130 --> 00:10:38,970 Koja je razlika između IMG i PIC? Može bilo tko reći mene? 187 00:10:41,350 --> 00:10:42,830 Tu je zapravo nema razlike. 188 00:10:42,830 --> 00:10:47,710 Oni znače istu stvar, ali oni imaju različite naljepnice za njih iz nekog razloga. 189 00:10:48,980 --> 00:10:53,560 Ako sam kliknite na sliku Je, ništa se ne događa na stranici. 190 00:10:53,560 --> 00:10:57,490 Ja sam zapravo morati kliknuti Pretraži ponovo da se nešto dogodi. 191 00:10:57,490 --> 00:11:02,430 Što bi moglo biti bolje dizajn odluka koje bi mogle biti učinjeno tamo? 192 00:11:03,820 --> 00:11:08,030 Ako sam klikom na taj filter, ja vjerojatno želite filtrirati po toj akciji 193 00:11:08,030 --> 00:11:09,970 ili da određenu kategoriju. 194 00:11:09,970 --> 00:11:14,450 Dakle, umjesto da pritisnite Search opet, mogao sam samo automatski učiniti filtriranje 195 00:11:14,450 --> 00:11:17,060 vrsta Google stilu gdje su to učiniti odmah. 196 00:11:17,060 --> 00:11:20,440 [Malan] Ali ne čini kao što smo ih vidjeli do sada morati fizički biti podnesen 197 00:11:20,440 --> 00:11:23,170 skom Unesite barem ili pritiskom na gumb? 198 00:11:23,170 --> 00:11:26,830 Kao što ste ih vidjeli do sada, vi ste zapravo morati kliknuti Submit učiniti te stvari. 199 00:11:26,830 --> 00:11:30,090 >> No, kao i Tommy će vam pokazati u drugi, zapravo postoje načini za vas 200 00:11:30,090 --> 00:11:33,010 tako da kada kliknete na tu stvar može automatski poslati 201 00:11:33,010 --> 00:11:38,840 ono što mi zovemo AJAX zahtjev i dobiti podatke natrag te filtrirati rezultate odmah. 202 00:11:38,840 --> 00:11:41,340 Postoji tona stvari koje su u redu s tom sučelju. 203 00:11:41,340 --> 00:11:43,530 [Malan] Može li tražiti Cambridge? 204 00:11:43,530 --> 00:11:47,030 Ima nešto malo anomaliju ovdje gdje vam je stalo Cambridge 205 00:11:47,030 --> 00:11:54,790 i još ste uzimajući Westford, Spring Hill, West Newton i slično. 206 00:11:54,790 --> 00:11:57,930 Vjerojatno nije idealno. >> Vjerojatno nije idealno. 207 00:11:57,930 --> 00:12:03,900 Kako bih mogao biti u mogućnosti da korisnikov doživljaj bolje na toj stranici? 208 00:12:03,900 --> 00:12:07,340 Da. >> [Student] Upute. 209 00:12:07,340 --> 00:12:09,500 Ok. Upute za kakav smislu? 210 00:12:09,500 --> 00:12:14,630 [Student] Na primjer, stvar za prvi put korisnici koji uopće ne znaju što je Craigslist 211 00:12:14,630 --> 00:12:17,320 ili ne znaš što bi trebao učiniti. 212 00:12:17,320 --> 00:12:20,150 Točno. Dakle, objašnjavajući što Craigslist je na ovoj stranici je važno. 213 00:12:20,150 --> 00:12:23,490 Mi zapravo može reći korisnicima što ova stranica je zapravo za. 214 00:12:23,490 --> 00:12:27,090 Ako sam samo posjetite ovaj, vidim hrpu mjesta. Ja uopće ne znam što to znači. 215 00:12:27,090 --> 00:12:29,730 No, što je još važnije, samo gleda na ovom sučelju, 216 00:12:29,730 --> 00:12:35,530 zapamtite sam morao pomicati prema dolje tonu stvari kako bi pronašli određenu zajednicu 217 00:12:35,530 --> 00:12:37,560 da sam zapravo stalo na tome. 218 00:12:37,560 --> 00:12:39,820 Što je brži način na koji sam mogao to učiniti? Da. 219 00:12:39,820 --> 00:12:43,290 [Student] ih podijelite gore u Istok, Zapad regijama. >> Ok. 220 00:12:43,290 --> 00:12:47,460 Mogao sam ih podijeliti u više kategorija koje bi mogle pomoći mi brže odrediti 221 00:12:47,460 --> 00:12:49,820 kako doći do tog mjesta. 222 00:12:49,820 --> 00:12:54,510 [Student] Stavite padajućeg popisa. >> Točno. Ok. 223 00:12:54,510 --> 00:12:58,240 Mogao sam koristiti padajući izbornik jer imamo fiksni skup stvari 224 00:12:58,240 --> 00:13:00,100 i mogli smo ih prikazati u padajućem izborniku. 225 00:13:00,100 --> 00:13:02,240 Na taj način ne zauzimaju toliko prostora na ekranu. 226 00:13:02,240 --> 00:13:05,630 No, čak i bolje od toga, što možemo učiniti? 227 00:13:05,630 --> 00:13:09,220 Da. >> [Nečujno učenik odgovora] >> Može li se reći da je opet? >> [Student] Okvir za pretraživanje. 228 00:13:09,220 --> 00:13:11,260 Da, okvir za pretraživanje. To je super. 229 00:13:11,260 --> 00:13:16,430 Ono što mi zapravo možemo učiniti je, ako se osvrnemo na toboganima, okvir za pretraživanje. 230 00:13:16,430 --> 00:13:21,520 Autocomplete. Vrlo jednostavan način pretraživati ​​kroz rezultate koje znate da su u setu. 231 00:13:21,520 --> 00:13:25,980 Ako sam početi pisati BO, samo mi pokazati sve rezultate koji imaju BO unutar njih. 232 00:13:25,980 --> 00:13:29,030 Na taj način mogu vrlo lako pronaći određeni jednom želim ići na 233 00:13:29,030 --> 00:13:32,390 umjesto da se pomicali kroz zaista velikom popisu. 234 00:13:32,390 --> 00:13:37,450 >> Ovo su sve vrste stvarno nisko-vješanje voće da netko tko provodi Craigslist 235 00:13:37,450 --> 00:13:42,500 zapravo može učiniti kako bi iskustvo na web stranici puno bolje za njihovu pojedinog korisnika. 236 00:13:42,500 --> 00:13:46,370 Ok. Dosta se govori o lošim web stranice. 237 00:13:46,370 --> 00:13:49,410 Ajmo pričati o Facebooku. 238 00:13:50,880 --> 00:13:54,390 Kada Facebook izašao, a posebno Facebook fotografije, 239 00:13:54,390 --> 00:13:57,870 bilo je puno drugih službi u vrijeme koje bi mogao učiniti točno iste stvari. 240 00:13:57,870 --> 00:14:00,740 Oni mogu organizirati svoje fotografije u albume. 241 00:14:00,740 --> 00:14:03,360 Što možete učiniti je da bi mogao organizirati ih u setovima, kao dobro. 242 00:14:03,360 --> 00:14:06,070 Možete ih organizirati po datumu. Ti bi mogao učiniti sve ove određene stvari. 243 00:14:06,070 --> 00:14:11,710 Ali ne bilo tko znati što je napravio Facebook fotografije eksplodirati u trenutku kad je objavljena? 244 00:14:11,710 --> 00:14:15,080 Da. >> [Student] oznaka. >> Tagova. Točno. 245 00:14:15,080 --> 00:14:21,300 Imamo Milo ovamo, koji je naš pas maskota s tom CS50 maramica. 246 00:14:21,300 --> 00:14:24,810 Možete vidjeti da imamo ovu označavanja u sredini. 247 00:14:24,810 --> 00:14:28,240 I ono što je napravio Facebook fotografije tako zanimljivo iz upotrebljivost stajališta 248 00:14:28,240 --> 00:14:34,130 je da je to zapravo dopustio ljudima putem ovog uključiti svoje prijatelje u svojim fotografijama. 249 00:14:34,130 --> 00:14:37,680 Za Facebook, budući da je njihova web stranica je posebno društveni, 250 00:14:37,680 --> 00:14:40,750 riječ je o izgradnji ovu vrstu društvene atmosfere. 251 00:14:40,750 --> 00:14:42,620 To poboljšao doživljaj fotografije puno više 252 00:14:42,620 --> 00:14:46,390 jer su oni zapravo mogli početi govoreći: "Ovo su veze između ljudi, 253 00:14:46,390 --> 00:14:49,220 a to su slike o ljudima što je zapravo stalo. " 254 00:14:49,220 --> 00:14:52,200 Dio toga je i svojevrsna narcizam. 255 00:14:52,200 --> 00:14:54,980 Ljudi vole biti označeni na fotografijama i tome slično. 256 00:14:54,980 --> 00:14:58,510 Iako to nije nužno dobar ljudsku osobinu, 257 00:14:58,510 --> 00:15:01,910 u isto vrijeme to na temelju dobrih dizajnerskih odluka 258 00:15:01,910 --> 00:15:04,860 jer ljudi zapravo stalo stvari kao što je ovaj. 259 00:15:04,860 --> 00:15:07,190 Tako da je Facebook fotografije. 260 00:15:07,190 --> 00:15:09,800 >> No, pričajmo Facebook više općenito. 261 00:15:09,800 --> 00:15:13,400 Siguran sam da puno ljudi ovdje imaju mišljenje o Facebooku, 262 00:15:13,400 --> 00:15:16,430 oba dobri dizajn odluke i loše dizajnerske odluke. 263 00:15:16,430 --> 00:15:20,270 Dakle, neka je oduška ili biti sretan. 264 00:15:23,480 --> 00:15:26,450 Hajde. Znam sve vas koristiti Facebook. 265 00:15:26,450 --> 00:15:30,970 Netko mora imati nešto loše za reći ili nešto dobro za reći o tome. Da. 266 00:15:30,970 --> 00:15:35,060 [Student] U feed postoji puno stvari koje sam ne stvarno stalo. 267 00:15:35,060 --> 00:15:37,740 Vijest hrane ne pokazuje puno stvari koje možda ne stalo. 268 00:15:37,740 --> 00:15:41,660 Imate prijatelje na Facebooku koji niste ispunjeni za dvije ili tri godine 269 00:15:41,660 --> 00:15:43,860 i vidjet ćete njihove vijesti Rezultati iskakanje gore u svoj feed 270 00:15:43,860 --> 00:15:45,870 a ne stvarno briga o tome. 271 00:15:45,870 --> 00:15:48,700 Facebook je zapravo napravio napor kako bi to bolje, 272 00:15:48,700 --> 00:15:53,150 a oni zapravo sam pokušao gurnuti relevantne rezultate na vrhu feed kao što je kasno 273 00:15:53,150 --> 00:15:58,300 tako da zapravo vidi stvari kod prijatelja koji su relevantni za vas ili vaših bliskih prijatelja. 274 00:15:58,300 --> 00:16:01,110 Sve drugo? Da. 275 00:16:01,110 --> 00:16:06,400 [Nečujno studentski odgovor] >> Može li se reći da je opet? 276 00:16:06,400 --> 00:16:10,140 [Student] oglasi su relativno nenametljiv. >> U kojem smislu? 277 00:16:10,140 --> 00:16:16,370 [Nečujno učenik odgovor] Oni nemaju svjetlo na zaslonu, kao i transparentima. 278 00:16:16,370 --> 00:16:17,760 Ok. To je dobro. 279 00:16:17,760 --> 00:16:25,030 Ako se sjećate Interneta iz 90-ih - >> [Malan] Bio sam tamo. >> On je bio tamo. [Smijeh] 280 00:16:25,030 --> 00:16:29,210 Možda se sjetiti treperi Animacije pozadine, sparkly stvari, 281 00:16:29,210 --> 00:16:31,570 GeoCities stilu vrsta stvari. 282 00:16:31,570 --> 00:16:34,080 To je stvarno nije primjer dobrog dizajna 283 00:16:34,080 --> 00:16:36,690 jer to je stvarno zbunjujući iz sadržaja. 284 00:16:36,690 --> 00:16:39,590 Web Yale umjetnost koristi imati animiranih GIF kao svoju pozadinu 285 00:16:39,590 --> 00:16:41,800 i nisi mogao pročitati ništa na stranici, 286 00:16:41,800 --> 00:16:44,870 ali pretpostavljam da je netko zapravo razgovarao s njima, a sada je malo drugačija. 287 00:16:44,870 --> 00:16:48,940 [Malan] To je puno bolje. >> To je puno bolje sada, kao što možete vidjeti. >> [Malan] Oh yeah. 288 00:16:48,940 --> 00:16:56,020 Samo super, samo - Da. Ok. 289 00:16:56,020 --> 00:17:00,560 >> Dio toga je i izrada vaša stranica eventualno vrlo minimalistički i vrlo razumljivo 290 00:17:00,560 --> 00:17:05,690 tako stvari na stranici toka na način da je vrlo logično i ne dobijete na putu jedni druge. 291 00:17:05,690 --> 00:17:11,849 Koje vrste drugih stvari su dobro o Facebooku ili loše o Facebooku? 292 00:17:11,849 --> 00:17:15,730 Ajmo imaju dizajn razgovor ovdje. 293 00:17:19,470 --> 00:17:21,339 Oh. Gdje? Da. 294 00:17:21,339 --> 00:17:25,640 [Student] novi Timeline sustav omogućuje pretraživanje na profil osobe o svojoj prošlosti. 295 00:17:25,640 --> 00:17:28,119 Ooh, Timeline. 296 00:17:28,119 --> 00:17:30,280 Timeline je velika stvar, jer to omogućuje vam stabljika svoje prijatelje 297 00:17:30,280 --> 00:17:33,300 natrag kad su bili u srednjoj školi. 298 00:17:35,160 --> 00:17:38,060 Timeline je dobar jer omogućuje filtriranje kroz sadržaj puno brže, 299 00:17:38,060 --> 00:17:41,500 to omogućuje vam stvari koje bi inače poduzimaju vam stvarno dugo vremena da pronađete 300 00:17:41,500 --> 00:17:45,840 samo pomicanjem gore i dolje, gore, gore, gore, gore, gore, kao ide natrag u vrijeme. 301 00:17:45,840 --> 00:17:48,910 No, onda je također svojevrsni minus na to u smislu korisničko iskustvo. 302 00:17:48,910 --> 00:17:51,190 Što bi to moglo biti? 303 00:17:51,190 --> 00:17:56,780 Big riječ koja počinje sa P-R. >> [Student] Zaštita. >> Zaštita, zar ne? 304 00:17:56,780 --> 00:17:59,970 Zaštita je veliki problem korisničko iskustvo. 305 00:17:59,970 --> 00:18:07,190 To je jedna od stvari koje ja mrzim najviše o Facebooku sada. [Smijeh] 306 00:18:07,190 --> 00:18:09,000 [Malan] Kao ja sada. 307 00:18:09,000 --> 00:18:11,380 David nije znao to zapravo nije dogodilo sve do jučer. 308 00:18:11,380 --> 00:18:14,560 Dakle, sada zna da svaki put kad sam ga razgovor Znam da me ignorira. 309 00:18:14,560 --> 00:18:16,880 [Malan] nespretan dio mi je zapravo ga ignoriraju, 310 00:18:16,880 --> 00:18:21,040 a ja ne znam znao sam ga ignoriraju. [Smijeh] 311 00:18:21,040 --> 00:18:24,030 Zaštita je veliki problem. 312 00:18:24,030 --> 00:18:28,670 Može li itko ovdje mi reći što bi moglo biti loše o Facebooku privatnosti 313 00:18:28,670 --> 00:18:32,270 osim činjenice da rade stvari kao što je ovaj? 314 00:18:32,270 --> 00:18:37,240 Što je to posebno teško raditi s obzirom na Facebook privatnost? 315 00:18:37,240 --> 00:18:40,340 Takvo je vodeći pitanje. 316 00:18:41,680 --> 00:18:43,930 Da. >> [Student] Sakrij svoje fotografije s određenim ljudima. 317 00:18:43,930 --> 00:18:46,170 Točno. Točno, sakriti svoje fotografije s određenim ljudima. 318 00:18:46,170 --> 00:18:51,290 Oni imaju ovaj mali, mali gumb u gornjem desnom kutu koji vam omogućuje prebacivanje privatnost fotografiju. 319 00:18:51,290 --> 00:18:56,360 Njihova privatnost opcije vrlo su različiti između različitih vrsta izbornika. 320 00:18:56,360 --> 00:18:59,510 >> Oni dobivši puno bolje o tome nedavno, ali je nekad bio slučaj 321 00:18:59,510 --> 00:19:04,870 da, kad god ste htjeli spriječiti svoje prijatelje da vide fotografije, 322 00:19:04,870 --> 00:19:08,280 ćete morati proći kroz vrlo kompliciranim 5-korak proces biće poput, 323 00:19:08,280 --> 00:19:11,150 neka mi kliknite na ovaj link, sada neka mi kliknite opet, neka mi kliknite opet, 324 00:19:11,150 --> 00:19:13,420 neka mi navesti koje ljudi ne mogu vidjeti moje fotografije. 325 00:19:13,420 --> 00:19:17,250 To nije osobito dobro na Facebook dijelu 326 00:19:17,250 --> 00:19:20,530 jer toliko o korisničkom iskustvu zapravo dajući im slobodu 327 00:19:20,530 --> 00:19:22,460 kontrolirati što ljudi mogu vidjeti. 328 00:19:22,460 --> 00:19:25,550 Mi to zovemo korisnički kontrolu i slobodu. 329 00:19:25,550 --> 00:19:31,090 Ako ne puštaju korisnici to na način koji je učinkovit i intuitivan, 330 00:19:31,090 --> 00:19:34,570 onda tvoj korisničko iskustvo je stvarno ne da je velika na sve. 331 00:19:34,570 --> 00:19:38,200  Želite li dečki vole reći ništa o Facebooku? 332 00:19:38,700 --> 00:19:41,420 Kako isključiti? 333 00:19:41,420 --> 00:19:46,290 [Ong] Vi ne možete isključiti, a to je velika upotrebljivost mana na dijelu Facebooku. 334 00:19:46,290 --> 00:19:49,410 Ova značajka - Ja sam zapravo gledao u nju jučer - 335 00:19:49,410 --> 00:19:53,940 to je bilo da ne može to učiniti ili je zakopan negdje jako, jako duboko 336 00:19:53,940 --> 00:19:58,050 u utore za Facebook, jer ja ne mogu shvatiti kako onemogućiti ovu funkcionalnost na sve. 337 00:19:58,050 --> 00:20:00,400 [Malan] Ali ponekad te odluke nisu očito 338 00:20:00,400 --> 00:20:03,890 jer su ti dečki dao nam je puno korisnih povratne informacije o raznim CS50 aplikacija 339 00:20:03,890 --> 00:20:05,710 i web stranice koje tečaj koristi. 340 00:20:05,710 --> 00:20:10,260 Mi nismo proveli sve ove zahtjeve i prijedloge. 341 00:20:10,260 --> 00:20:14,550 >> Dio koji je za dobivanje toliko zahtjeva da je funkcija vremena, 342 00:20:14,550 --> 00:20:17,070 ali ponekad mi jednostavno napraviti svjesnu odluku kao što je, 343 00:20:17,070 --> 00:20:19,830 "Hvala na prijedlogu, ali mi se ne slažete." 344 00:20:19,830 --> 00:20:24,350 Pa kako se zapravo odlučiti što treba učiniti ako vaši korisnici mislite da biste trebali učiniti nešto 345 00:20:24,350 --> 00:20:28,110 čak i ako to nije nužno? 346 00:20:28,110 --> 00:20:32,360 To je fina ravnoteža između zapravo slušati što korisnici kažu 347 00:20:32,360 --> 00:20:35,840 i zapravo imaju nekakvu liniju gdje ćete reći, 348 00:20:35,840 --> 00:20:37,750 "Nećemo učiniti ono što ti korisnici reći." 349 00:20:37,750 --> 00:20:42,520 A posebno, mislim da je citat Henry Ford koji sažima ovaj se prilično dobro. 350 00:20:42,520 --> 00:20:47,130 "Ako sam pitao ljude što su htjeli, oni bi rekli su htjeli brže konje." 351 00:20:47,130 --> 00:20:51,840 Može li itko od sortirati zafrkavati, osim što je citat zapravo znači? 352 00:20:51,840 --> 00:20:56,060 To je ne samo da korisnici znaju što žele, 353 00:20:56,060 --> 00:20:59,180 ali to je više da - 354 00:20:59,180 --> 00:21:02,720 [Student] Oni ne znaju što je više moguće. 355 00:21:02,720 --> 00:21:06,140 U sklopu oni ne znaju što je više moguće. 356 00:21:07,880 --> 00:21:11,440 Zafrkavati da osim malo više. Što misliš da je? 357 00:21:11,440 --> 00:21:21,340 [Nečujno učenik odgovor] 358 00:21:21,340 --> 00:21:25,770 To je dobro. Ono što mislim da mi pokušavamo reći je da ljudi znaju što žele. 359 00:21:25,770 --> 00:21:28,050 Oni žele brže konje. 360 00:21:28,050 --> 00:21:29,840 Ono što stvarno želite je sposobnost da se brže kretati, 361 00:21:29,840 --> 00:21:32,310 ali oni stvarno ne znam medij kojim bi se postigla da. 362 00:21:32,310 --> 00:21:36,330 Kada dođete na svoje korisnike, a korisnici ti nešto reći 363 00:21:36,330 --> 00:21:39,700 i oni vam reći, "Želimo ove značajke i ove mogućnosti i ove mogućnosti," 364 00:21:39,700 --> 00:21:42,650 vi ne želite nužno razmišljati o, "Pusti me naprijed 365 00:21:42,650 --> 00:21:44,720 "I provesti ono što izrijekom kažu," 366 00:21:44,720 --> 00:21:48,610 ali ono što želim razmišljati o tome je, "Kakav ideje mogu dobiti od toga?" 367 00:21:48,610 --> 00:21:50,450 Što oni zapravo žele? 368 00:21:50,450 --> 00:21:55,560 >> A od tamo što možete učiniti je dizajnirati nešto što zadovoljava te zahtjeve 369 00:21:55,560 --> 00:22:00,340 ali ne nužno na način da korisnik očekuje se da će biti zadovoljni. 370 00:22:00,340 --> 00:22:03,830 Dakle, za nešto poput konačnih projekata, u vrlo stvarnom smislu, 371 00:22:03,830 --> 00:22:07,900 što je korisno heuristička kada je u pitanju stvaranje nešto bolje, 372 00:22:07,900 --> 00:22:10,630 pogotovo ako dizajner ima tu aroganciju o njemu 373 00:22:10,630 --> 00:22:14,360 u kojem ste vrsta znate što je najbolje, što bi moglo potrajati ulaz iz svojih korisnika, 374 00:22:14,360 --> 00:22:16,580 ali kako ti zapravo ići o uzimajući tu povratnu informaciju? 375 00:22:16,580 --> 00:22:21,610 U posljednjim projektima, vrlo konkretno, što stvara optimalne rezultate ovdje? 376 00:22:21,610 --> 00:22:25,030 Što stvara optimalne rezultate - i ja ću ići preko ove u drugi - 377 00:22:25,030 --> 00:22:29,190 je to proces razvoja, a zatim testiranje i onda Ponavljanje. 378 00:22:29,190 --> 00:22:32,020 Što mislim testiranje je obično kada dizajnirati nešto 379 00:22:32,020 --> 00:22:36,970 Mislite li da je prilično dobra, poput: "Ja sam kao veliki dizajner. Svatko će ljubav ovu." 380 00:22:36,970 --> 00:22:41,600 A onda ga staviti vani i ljudi stvarno ne sviđa iz nekog razloga. 381 00:22:41,600 --> 00:22:46,820 Što morate učiniti je da morate uzeti dijelove stvari koje ljudi ne sviđaju 382 00:22:46,820 --> 00:22:49,180 i obnoviti stvari koje ljudi ne vole. 383 00:22:49,180 --> 00:22:53,080 To zvuči kao vrlo očite procesu, ali taj proces stalno Ponavljanje 384 00:22:53,080 --> 00:22:55,980 na vrhu što ste već izgrađena je proces koji vam pomaže 385 00:22:55,980 --> 00:22:59,730 ne samo poboljšati svoje vještine dizajn, ali također pomaže vam poboljšati dizajn 386 00:22:59,730 --> 00:23:03,790 tako da ljudi zapravo cijeniti svoj proizvod čak i više nego što su učinili prije. 387 00:23:03,790 --> 00:23:07,390 >> Ja ću ići preko više konkretne primjere što zapravo može učiniti. 388 00:23:07,390 --> 00:23:11,390 Kao svojevrsno zadnji primjer proizvoda, pogledajmo kajak. 389 00:23:11,390 --> 00:23:14,970 KAJAK kada je izašao je bio vrlo, vrlo popularan. 390 00:23:14,970 --> 00:23:18,760 Može li itko pogoditi zašto? 391 00:23:18,760 --> 00:23:20,950 Koje su vrste stvari koje vam se sviđaju za to, ako ste ga koristili 392 00:23:20,950 --> 00:23:23,990 ili što su vrste stvari koje ne vole? 393 00:23:23,990 --> 00:23:31,590 Da. >> [Nečujno učenik odgovor] >> Ok. 394 00:23:31,590 --> 00:23:34,730 To je dio njega ostavljajući korisnik morati upit koji je skuplji 395 00:23:34,730 --> 00:23:38,150 od vrlo restriktivne jedan poput, "Morate odabrati svoj početni datum 396 00:23:38,150 --> 00:23:39,810 "I morate odabrati svoj datum završetka." 397 00:23:39,810 --> 00:23:44,910 U stvari, to vam omogućuje da budu fleksibilni o tome i to vam daje sve od letova u tom rasponu. 398 00:23:44,910 --> 00:23:46,730 Sve drugo? 399 00:23:46,730 --> 00:23:50,530 [Student] Oni uključuju naknade u cijeni. 400 00:23:50,530 --> 00:23:53,330 Oni ne uključuju naknade u cijeni. 401 00:23:53,330 --> 00:23:56,720 Porezi i stvari zapravo ide ravno u toj cijeni u gornjem lijevom 402 00:23:56,720 --> 00:24:00,710 tako da se ne načičkana razmišljanja da ste zapravo plaćati za 240 dolara leta 403 00:24:00,710 --> 00:24:03,280 kada je stvarno 330 dolara. 404 00:24:03,280 --> 00:24:06,200 Sve drugo? Da. 405 00:24:06,200 --> 00:24:10,140 [Nečujno učenik odgovor] 406 00:24:10,140 --> 00:24:14,610 Nisam siguran da li su oni zapravo ti to dopustiti. 407 00:24:14,610 --> 00:24:18,310 Možda sam u krivu. 408 00:24:18,310 --> 00:24:23,360 To bi moglo biti zanimljivo stvar, ako želite staviti više težine na određenim filtrima 409 00:24:23,360 --> 00:24:27,000 tako da oni gurnuti rezultate koji se odnose na taj filtar na vrhu. 410 00:24:27,000 --> 00:24:31,920 No, može li mi itko reći što je tako posebno o ovom lijevoj strani? 411 00:24:31,920 --> 00:24:39,540 Kako ste se tradicionalno pogledati let na internet servis prije toga? 412 00:24:41,600 --> 00:24:44,650 >> Da. >> [Nečujno učenik odgovora] >> Može li se reći da je - 413 00:24:44,650 --> 00:24:47,530 [Student] Svaki zračni prijevoznik. >> Da. Svaki zračni prijevoznik ima svoju web stranicu. 414 00:24:47,530 --> 00:24:50,110 Ovo objedinjuje stvari. I? 415 00:24:50,110 --> 00:24:52,190 [Student] Vi znate točno što put kad odlaziš. 416 00:24:52,190 --> 00:24:54,460 Vi ne znate točno ono vrijeme ste ostavljajući, 417 00:24:54,460 --> 00:24:59,380 ali se odnose na filtere posebno. 418 00:25:00,710 --> 00:25:03,540 Dopustite mi podići kajak. 419 00:25:11,490 --> 00:25:14,020 O Bože, pop-up. Loše korisničko iskustvo. 420 00:25:14,020 --> 00:25:17,230 Što se događa kada sam premjestiti ovaj klizač? 421 00:25:17,230 --> 00:25:21,010 [Student] Automatska ažuriranja. >> [Ong] Automatska ažuriranja. 422 00:25:21,010 --> 00:25:23,440 To je nešto što je vrlo važno. 423 00:25:23,440 --> 00:25:25,380 Prije toga, kad god ste htjeli pogledati let, 424 00:25:25,380 --> 00:25:28,410 ste morali staviti u ulaznu lokaciji, vaš izlazni položaj, pritisnite pretrage, 425 00:25:28,410 --> 00:25:31,190 to bi obraditi to i pokazati svoje rezultate. 426 00:25:31,190 --> 00:25:34,120 Ako ste htjeli promijeniti svoj upit, da će morati pritisnuti natrag dva puta, 427 00:25:34,120 --> 00:25:39,770 ući u novu upita od nule, a onda ga iznova i iznova. 428 00:25:39,770 --> 00:25:43,910 Lijepo je stvar o nečemu kao što je to on koristi vrlo [neprimjerenog] stvar u sredini. 429 00:25:43,910 --> 00:25:46,230 Kad god nešto ovako, to puca off zahtjev 430 00:25:46,230 --> 00:25:48,420 i vraća vam sve rezultate odmah. 431 00:25:48,420 --> 00:25:51,680 Ova vrsta neposredne povratne informacije je nešto što je KAJAK mahnito popularan 432 00:25:51,680 --> 00:25:55,910 jer to je stvarno lako za mene samo promijeniti svoj upit 433 00:25:55,910 --> 00:25:58,890 i shvatiti stvari koje su oko određenog raspona 434 00:25:58,890 --> 00:26:01,950 bez potrebe da ide naprijed i natrag, natrag i naprijed, natrag i naprijed. 435 00:26:01,950 --> 00:26:05,200 Dakle, to su sve vrste stvari koje želim razmišljati o tome kada ste projektiranje Vaše web stranice. 436 00:26:05,200 --> 00:26:08,930 Kako mogu napraviti da se vrlo učinkovit za moje korisnicima proći kroz ono što oni rade na 437 00:26:08,930 --> 00:26:13,010 i doći do njihovog eventualnog cilj što je brže moguće? 438 00:26:13,010 --> 00:26:16,430 [Malan] I Josipu točke ranije o korisnicima ne nužno znajući ono što oni žele, 439 00:26:16,430 --> 00:26:18,640 na temelju onoga što vi sada znate o HTML 440 00:26:18,640 --> 00:26:22,780 i imate okvire, gumbe za izbornika, odaberite ulazni polja i slično, 441 00:26:22,780 --> 00:26:26,140 kako bi ste provesti ideju branje početka vremena za bijeg? 442 00:26:26,140 --> 00:26:30,030 >> Koji od tih različitih mehanizama UI će vam koristiti? 443 00:26:30,030 --> 00:26:34,100 Ako samo znati količinu HTML-a koji je predavao prije 444 00:26:34,100 --> 00:26:39,070 i znate ulazi su radio gumbi, kućice, kap-padovi, i umeće kutija, 445 00:26:39,070 --> 00:26:43,320 što bi vaš prirodni izbor su za branje datume? 446 00:26:43,320 --> 00:26:48,670 [Student] ulaza. >> Ulaz. Ili možda čak padajući sa svim datumima, zar ne? 447 00:26:48,670 --> 00:26:53,170 Dakle, s više složenih UI mehanizama kao što je ovaj na lijevoj strani koje možete provesti, 448 00:26:53,170 --> 00:26:55,500 možete napraviti ovaj proces mnogo više intuitivno s klizač 449 00:26:55,500 --> 00:27:01,020 jer vrijeme je kontinuirana, a ljudi obično ne razmišljaju o tome u smislu diskretnih komade. 450 00:27:01,020 --> 00:27:04,950 U redu. Posljednja stvar. 451 00:27:04,950 --> 00:27:07,370 Deset upotrebljivost heuristika. 452 00:27:07,370 --> 00:27:10,820 Sve stvari s kojima smo razgovarali o vjerojatno spadaju pod jednu od tih kategorija. 453 00:27:10,820 --> 00:27:14,420 Ako idete na ovom linku, koje su mjesta bit će objavljena na internetu, 454 00:27:14,420 --> 00:27:18,900 zapravo ćete biti u mogućnosti da, kao što dizajn svoje stranice, imajte na umu ove heuristiku 455 00:27:18,900 --> 00:27:21,330 i ta pravila palca. 456 00:27:21,330 --> 00:27:26,610 Za svoje projekte, što mi predlažemo da učinite kako bi odredio vaš app bolje 457 00:27:26,610 --> 00:27:28,850 je učiniti papira prototipova prvi. 458 00:27:28,850 --> 00:27:32,150 Kada razmišljate o Vašoj aplikaciji, vrlo brzo skicirati ono što želite izgledati 459 00:27:32,150 --> 00:27:36,230 i pobrinite se da sve kutije su raspoređeni na način koji je vrlo intuitivno za korisnika za korištenje 460 00:27:36,230 --> 00:27:39,820 pa čak i pokazati ove prototipe papir za svoje prijatelje i početi fokus grupe. 461 00:27:39,820 --> 00:27:44,230 Samo dvije ili tri osobe zajedno i zamolite ih da samo dodirnite tih papira prototipova, 462 00:27:44,230 --> 00:27:47,650 i pokazati im nove ekrane kako bi vidjeli ako su oni zapravo razumiju što se događa. 463 00:27:47,650 --> 00:27:50,680 >> Što želite učiniti je dati im zadatak, motivirati taj zadatak, 464 00:27:50,680 --> 00:27:53,270 i samo im dati aplikaciju i neka ga koristiti. 465 00:27:53,270 --> 00:27:56,530 Nemojte im dati upute izvan toga. 466 00:27:56,530 --> 00:28:00,920 Želite li zapravo neka komunicirati sa svojim app na način koji vam omogućuje da vidite 467 00:28:00,920 --> 00:28:03,870 kako bi ga koristiti ako ne stoji pored njih. 468 00:28:03,870 --> 00:28:05,250 I to je vrlo važno. 469 00:28:05,250 --> 00:28:08,780 To će vam dati puno uvida da su ljudi uzimajući oko određenih stvari 470 00:28:08,780 --> 00:28:10,560 na način da ih nisam namjeravate? 471 00:28:10,560 --> 00:28:14,680 Jesu li oni koriste određene mehanizme UI na zaslonu 472 00:28:14,680 --> 00:28:17,490 na način da je vrsta Hacky? 473 00:28:17,490 --> 00:28:22,020 Nisam namjeravao za njih to učiniti na taj način. 474 00:28:22,020 --> 00:28:23,940 A kad ste gotovi s tim, što želiš da učinim? 475 00:28:23,940 --> 00:28:26,010 Vaši dizajn stijene, zar ne? 476 00:28:26,010 --> 00:28:29,600 Što želite učiniti je da žele razviti i napraviti taj proces iznova. 477 00:28:29,600 --> 00:28:32,110 Pa to pokazati prijateljima nakon što ste ga razvili, testirati ga, 478 00:28:32,110 --> 00:28:36,630 razviti, testirati, razvijati, testirati, ponoviti, na i na i naprijed. 479 00:28:36,630 --> 00:28:39,720 Dizajn je vrlo iterativan proces u tom smislu. 480 00:28:39,720 --> 00:28:43,280 Vi zapravo morati izgraditi nešto i tada shvatiti stvari o njemu 481 00:28:43,280 --> 00:28:46,520 da nisu shvatili prije i vratiti i poboljšati od toga. 482 00:28:46,520 --> 00:28:50,890 Sada, kao i za razvoj dijelu, to je ono što je Tommy će vam pokazati nakon prekida 483 00:28:50,890 --> 00:28:53,220 i kako bi mogli biti u stanju provesti nešto poput samodovršetak 484 00:28:53,220 --> 00:28:56,610 na način da je vrlo jednostavna. 485 00:28:57,440 --> 00:28:59,550 [Malan] Kao Tommy postavlja ovdje, pitanje onda. 486 00:28:59,550 --> 00:29:03,780 Mnogo od najranijih web - i kad je Josip rekao 1990 stil web stranice, 487 00:29:03,780 --> 00:29:07,640 to je implementacija gdje ako si htio da odaberete vrijeme početka i završetka vrijeme, 488 00:29:07,640 --> 00:29:10,380 Iskreno, natrag u dan, pa čak i na nekim web stranicama i danas, 489 00:29:10,380 --> 00:29:13,220 način ćete to učiniti je da odaberete jedan sat iz padajućeg, 490 00:29:13,220 --> 00:29:15,910 Vas minuta iz padajućeg, možda ste izabrali AM, PM, 491 00:29:15,910 --> 00:29:17,440 i onda ti da tri puta više. 492 00:29:17,440 --> 00:29:19,920 I tako sa 6 klikova i možda nekom scrolling 493 00:29:19,920 --> 00:29:24,000 Vaš korisnički zapravo može pružiti nekakav datum i / ili Vremensko razdoblje u tom smislu. 494 00:29:24,000 --> 00:29:27,920 >> Dakle, definitivno Nedovoljno i još dosad smo vidjeli nema izražajne mogućnosti 495 00:29:27,920 --> 00:29:30,330 u bilo kojem od jezika koje smo gledali učiniti nešto seksi 496 00:29:30,330 --> 00:29:32,620 kao što je ovaj klizač za vrijeme početka i kraja vremena. 497 00:29:32,620 --> 00:29:36,290 Ali ako mislite natrag na tjedan 0, kada smo razgovarali o Scratch, 498 00:29:36,290 --> 00:29:39,080 tamo nije bilo dodaci koji samo radili određene stvari. 499 00:29:39,080 --> 00:29:42,700 Stvarno je upravo tih osnova poput petlje i uvjeta i slično. 500 00:29:42,700 --> 00:29:46,910 Tako nekako samo razmišljam vrlo apstraktno sada, neovisno o pojedinostima HTML, 501 00:29:46,910 --> 00:29:51,260 Što se zapravo događa s nešto poput ovoga vremena početka i kraja vremena trakom? 502 00:29:51,260 --> 00:29:54,960 Kad sam premjestiti moj miš i ja kliknite na tom malom mrkve simbola na lijevo 503 00:29:54,960 --> 00:29:59,220 i početi povlačenjem, programatski, što je to želite biti u mogućnosti provesti 504 00:29:59,220 --> 00:30:01,000 da bi se to dogodilo? 505 00:30:01,000 --> 00:30:04,920 Koja pitanja, što Boolean izrazi želite biti u mogućnosti to pitati? 506 00:30:04,920 --> 00:30:06,930 Što se zapravo događa? Sammy? 507 00:30:06,930 --> 00:30:10,080 [Student] Gdje je položaj kursora? >> Dobro. Gdje je položaj kursora? 508 00:30:10,080 --> 00:30:11,970 To je nešto što mi je potrebno izraziti natrag u nule, 509 00:30:11,970 --> 00:30:14,690 da li je na temelju položaja ili čak boje ili slično. 510 00:30:14,690 --> 00:30:18,410 Možda podsjetiti sve tako kratko je u ponedjeljak da su sve ove stvari zove događanja 511 00:30:18,410 --> 00:30:22,370 u svijetu interneta, pa tu je stvari poput onclick i onkeypress 512 00:30:22,370 --> 00:30:25,960 i onkeyup i onmouseover i onmouseout. 513 00:30:25,960 --> 00:30:29,130 Dakle, shvatite da čak i te stvari uzimamo zdravo za gotovo na webu 514 00:30:29,130 --> 00:30:32,190 sa stranicama poput Facebooka i Gmaila, čak i ako nemaju pojma 515 00:30:32,190 --> 00:30:34,890 kako bi eventualno provesti da zato nema ništa, čak kao što je to u predavanju 516 00:30:34,890 --> 00:30:38,570 ili problem Postavite 7, shvatiti da s tim točno istim osnovama, 517 00:30:38,570 --> 00:30:41,090 s HTTP i parametrima i GET i POST, 518 00:30:41,090 --> 00:30:44,010 s osnovnim HTML inputa koje smo gledali do sada 519 00:30:44,010 --> 00:30:47,690 iu jednom trenutku s programskim mehanizama koji Tommy je oko uvesti 520 00:30:47,690 --> 00:30:51,300 možete početi izraziti sebe baš kao što je u tjednu 0 521 00:30:51,300 --> 00:30:53,800 po vrlo intuitivno povlačenjem i ispuštanjem. 522 00:30:53,800 --> 00:30:58,950 >> Dakle, s koje je rekao, Tommy MacWilliam i neke nove slagalice za nas webu. 523 00:30:58,950 --> 00:31:03,450 U redu. Moje ime je Tommy i ja ću da se govori o JavaScriptu. 524 00:31:03,450 --> 00:31:07,150 Samo odricanje: Ja sam mišljenja da je JavaScript najbolji programski jezik 525 00:31:07,150 --> 00:31:09,010 u cijelom cijelom svijetu. 526 00:31:09,010 --> 00:31:11,940 Postoji puno ljudi koji se ne slažu sa mnom, ali to je upravo nevjerojatna. 527 00:31:11,940 --> 00:31:16,330 Nakon što se vrati na C, ako imate pisati C za drugi razred ili nekim drugim jezicima, 528 00:31:16,330 --> 00:31:19,780 to je samo jako frustrirajuće u svim low-level detalja morate zamarajte se u. 529 00:31:19,780 --> 00:31:23,050 Dakle, ako ste ikada osjećate tužno o tome neugodno C je pisati, 530 00:31:23,050 --> 00:31:25,130 samo vratiti, napišite JavaScript. To je nirvana. 531 00:31:25,130 --> 00:31:27,980 Osjećat ćete se puno bolje o svom lošem danu. 532 00:31:27,980 --> 00:31:31,900 Puno magije JavaScript dolazi iz njegove sposobnosti da manipuliraju stvari 533 00:31:31,900 --> 00:31:33,730 koji su već na stranici. 534 00:31:33,730 --> 00:31:38,520 Kad smo napisali naše PHP skripte, oni su pogubljeni na poslužitelju, 535 00:31:38,520 --> 00:31:42,270 i na kraju da je PHP skripta vjerojatno čuti neke HTML. 536 00:31:42,270 --> 00:31:45,860 To HTML je poslan na klijentu, a onda to je to. 537 00:31:45,860 --> 00:31:50,180 Ako PHP htio dodati gumb na stranici, na primjer, to stvarno ne mogu to učiniti. 538 00:31:50,180 --> 00:31:54,350 To će morati donijeti novu HTML datoteku i poslati da bi pregledniku. 539 00:31:54,350 --> 00:31:57,840 Uz JavaScript znamo da možemo ažurirati stvari, a oni su već na stranici, 540 00:31:57,840 --> 00:32:00,840 i zbog toga možemo pružiti mnogo više instant povratne informacije, 541 00:32:00,840 --> 00:32:06,150 koji će stvarno poboljšati korisničko iskustvo na našoj web stranici. 542 00:32:06,150 --> 00:32:09,330 Samo brzo rekapitulacija JavaScripta selektora. 543 00:32:09,330 --> 00:32:11,590 Mi znamo da kad smo preuzeti HTML stranicu, 544 00:32:11,590 --> 00:32:13,890 koji će biti predstavljeni u DOM. 545 00:32:13,890 --> 00:32:19,340 >> DOM zapamtite je samo ova velika stabla gdje su elementi povezani u ovom velikom hijerarhiji. 546 00:32:19,340 --> 00:32:21,810 Kada smo radili s bazama podataka u pset 7, 547 00:32:21,810 --> 00:32:26,280 jedna od prvih stvari koje je potrebno znati kako to učiniti bilo upita baze podataka. 548 00:32:26,280 --> 00:32:29,060 Imamo tu veliku korisnicima stol, a ponekad samo želimo reći, 549 00:32:29,060 --> 00:32:33,260 "Ja samo želim neke od tih korisnika koji odgovaraju neki uvjet." 550 00:32:33,260 --> 00:32:36,020 Slično tome, kada imamo DOM trebamo neki način ga upita. 551 00:32:36,020 --> 00:32:39,490 Trebamo neki način govoreći: "Želim sve tipke koje izgledaju ovako 552 00:32:39,490 --> 00:32:41,860 "Ili sve slike na stranici." 553 00:32:41,860 --> 00:32:44,330 I ove selektora nam omogućiti da to učinite. 554 00:32:44,330 --> 00:32:45,690 Dakle, samo brzo rekapitulacija. 555 00:32:45,690 --> 00:32:50,770 Ovaj prvi ovdje, ovo # predati, što je to ide na odabir? Se bilo tko sjetiti? 556 00:32:50,770 --> 00:32:54,880 [Nečujno učenik odgovor] >> Da, točno. 557 00:32:54,880 --> 00:32:59,510 To će se odabrati jedan element na stranici koja ima ID podnijeti. 558 00:32:59,510 --> 00:33:03,470 I tako da hash tag kaže selektor će raditi s ID. 559 00:33:03,470 --> 00:33:07,630 Kako o drugom, to. Usmjeren, što će taj odabir? 560 00:33:11,360 --> 00:33:15,180 Da. >> [Student] klasa. >> Točno. Ovo je sada će odabrati po razredu. 561 00:33:15,180 --> 00:33:18,840 Razlika između ID i klase ovdje je općenito ID mora biti jedinstven 562 00:33:18,840 --> 00:33:20,820 roku obzira prostor ste u potrazi preko. 563 00:33:20,820 --> 00:33:23,080 Dakle, ako ste bili u potrazi preko cijele stranice, 564 00:33:23,080 --> 00:33:27,740 stvarno samo treba imati jedan element s tom određenom ID-a, tako da u ovom slučaju podnijeti. 565 00:33:27,740 --> 00:33:31,330 S klase, s druge strane, možemo imati više od jednog elementa na istoj stranici 566 00:33:31,330 --> 00:33:33,130 s iste klase. 567 00:33:33,130 --> 00:33:36,580 To bi moglo biti korisno za reći želim da odaberete sve što je usmjereno na stranici 568 00:33:36,580 --> 00:33:38,450 nego samo jedna stvar. 569 00:33:38,450 --> 00:33:40,310 >> I na kraju, ovo posljednja ovdje je malo više komplicirano, 570 00:33:40,310 --> 00:33:43,890 ali ono što se ovo događa odaberite iz DOM? 571 00:33:46,650 --> 00:33:48,810 [Nečujno učenik odgovor] >> Što je to? 572 00:33:48,810 --> 00:33:53,250 [Student] Sve što je oznaka. >> Imamo dva dijela ovdje. 573 00:33:53,250 --> 00:33:58,070 Drugi dio će reći želim da odaberete ove oznake s oznakom unosa, 574 00:33:58,070 --> 00:34:00,730 tako da bilo element koji je ulaz oznaka. 575 00:34:00,730 --> 00:34:03,080 Ali ja ne želim da samo odabir svih ulaza 576 00:34:03,080 --> 00:34:05,170 jer nešto poput submit gumb bi mogao biti ulaz 577 00:34:05,170 --> 00:34:08,409 i nešto kao tekstualni okvir mogao biti ulaz. 578 00:34:08,409 --> 00:34:11,909 Dakle, s tim uglatim zagradama govorim ja samo želim da odaberete one elemente 579 00:34:11,909 --> 00:34:14,110 da su tipa teksta. 580 00:34:14,110 --> 00:34:17,400 Negdje u mom HTML tag imam atribut zove vrsta, 581 00:34:17,400 --> 00:34:19,750 i vrijednost tog atributa mora biti tekst. 582 00:34:19,750 --> 00:34:21,340 Pa kako o ovom prvom dijelu ovdje? 583 00:34:21,340 --> 00:34:25,489 Prva riječ ove selektor je oblik onda imam prostora, a zatim ovaj ulaz dijela. 584 00:34:25,489 --> 00:34:29,620 Što to učiniti, stavljajući oblik ispred njega? 585 00:34:33,409 --> 00:34:35,860 To se događa na osnovi ograničiti našu upita. 586 00:34:35,860 --> 00:34:38,510 To bi mogao biti slučaj da imamo neke ulaza na stranici 587 00:34:38,510 --> 00:34:41,080 koje nisu potomci obrascu. 588 00:34:41,080 --> 00:34:46,150 Što će to učiniti je to će reći samo želim ulazne oznake koje su negdje iznad njih 589 00:34:46,150 --> 00:34:49,030 neki roditelj element obrascu. 590 00:34:49,030 --> 00:34:52,100 I tako na taj način možemo napraviti ove više hijerarhijske upite 591 00:34:52,100 --> 00:34:55,000 tako da ne samo da odaberete sve podudaranje određene selektor. 592 00:34:55,000 --> 00:35:00,760 Možemo vrsta ograničiti opseg tog upita za nešto drugo. 593 00:35:00,760 --> 00:35:04,000 Tako da sada znamo kako odabrati elemente na stranici, 594 00:35:04,000 --> 00:35:06,780 pričajmo malo o AJAX. 595 00:35:06,780 --> 00:35:12,270 AJAX je još uvijek vrlo trendy skraćenica koja se zalaže za Asinkroni JavaScript i XML. 596 00:35:12,270 --> 00:35:15,640 To samo tako dogodi da XML je samo neki način predstavljaju podatke. 597 00:35:15,640 --> 00:35:20,920 >> To je vrsta izgubila popularnost u zadnje vrijeme, tako da X u AJAX ne koristi cijelo vrijeme. 598 00:35:20,920 --> 00:35:26,220 Uglavnom, ono što AJAX nam omogućuje učiniti je HTTP zahtjeva 599 00:35:26,220 --> 00:35:28,620 iz konteksta JavaScript. 600 00:35:28,620 --> 00:35:32,310 Kada smo u našoj web pregledniku, a mi smo navigacije oko stranicama, a mi kliknite na link, 601 00:35:32,310 --> 00:35:37,790 ono što naša preglednik će učiniti je HTTP zahtjev za vezu god mi kliknite. 602 00:35:37,790 --> 00:35:41,670 No, to nije uvijek idealno, jer ako je to slučaj, onda kao David je govorio: 603 00:35:41,670 --> 00:35:45,220 uvijek imamo kako bi korisnici kliknite submit gumb ili kliknuti na link 604 00:35:45,220 --> 00:35:50,380 kako bi se nešto dogodi da će se uključiti HTTP zahtjev. 605 00:35:50,380 --> 00:35:54,160 Dakle, s AJAX možemo napraviti ove zahtjeve u ime JavaScript. 606 00:35:54,160 --> 00:35:57,020 To znači da svaki put kad korisnik interakciju sa stranicom ili se nešto dogodi, 607 00:35:57,020 --> 00:36:01,780 zapravo možemo napraviti programski zahtjev za neku drugu PHP datoteku na našoj web stranici 608 00:36:01,780 --> 00:36:06,280 ili bilo što drugo i dohvaćanje podataka da je ta datoteka ispljune. 609 00:36:06,280 --> 00:36:09,860 Idemo pogledati primjer AJAX. 610 00:36:09,860 --> 00:36:16,140 Ovo je naš CS50 financija stranica s kojima nadamo se neki od nas su upoznati. 611 00:36:16,140 --> 00:36:21,790 Ako gledamo HTML ove stranice, ovdje vidimo da sam dodao nekoliko stvari, 612 00:36:21,790 --> 00:36:23,820 od kojih sam dobio ovaj obrazac ID. 613 00:36:23,820 --> 00:36:26,480 Ja sam rekao id = "oblik-citat". 614 00:36:26,480 --> 00:36:31,910 Ja sam to učinio samo zato što će napraviti ovo malo lakše odaberite iz DOM 615 00:36:31,910 --> 00:36:35,090 jer ja mogu samo napraviti vrlo jednostavan upit. 616 00:36:35,090 --> 00:36:38,960 Ono što želim učiniti ovdje je želim popraviti neki problem s CS50 financija. 617 00:36:38,960 --> 00:36:41,550 Dakle, ako idemo na finance.cs50.net, 618 00:36:41,550 --> 00:36:45,700 svaki put želim da dobijete ponudu, moram kliknite ovaj Saznaj Citat gumb, 619 00:36:45,700 --> 00:36:48,960 i da Dobiti Citat gumb onda me vodi na drugu cijeloj stranici. 620 00:36:48,960 --> 00:36:52,400 A ako želim još citat, moram pogoditi gumb Natrag, a zatim sam ga upisati, 621 00:36:52,400 --> 00:36:54,480 Ja dobiti ponudu, a ja pogodio gumb Natrag. 622 00:36:54,480 --> 00:36:56,840 To stvarno nije najbolje korisničko iskustvo. 623 00:36:56,840 --> 00:37:01,570 Tko će stvarno koristiti stranicu ako je to sporo da se cijene dionica? 624 00:37:01,570 --> 00:37:05,630 Dakle, ono što želite učiniti s AJAX je ukloniti taj korak ide na zasebnoj stranici 625 00:37:05,630 --> 00:37:08,410 kako bi vidjeli rezultate. 626 00:37:08,410 --> 00:37:11,240 >> Što smo stvarno samo tražim da stvarno mala cijena, 627 00:37:11,240 --> 00:37:14,240 i da je samo jako mala količina podataka. 628 00:37:14,240 --> 00:37:17,400 Dakle, nema potrebe za mene da ide još jedan cijeli HTML stranicu, 629 00:37:17,400 --> 00:37:20,670 preuzeti novu seriju HTML, možda skinuti neke više slika, 630 00:37:20,670 --> 00:37:24,410 neke druge CSS datoteke samo za mene odgovoriti na to pitanje vrlo jednostavan 631 00:37:24,410 --> 00:37:27,810 koliko se ovaj dioničko trošak. 632 00:37:27,810 --> 00:37:31,000 S AJAX možemo napraviti ovo puno lakše. 633 00:37:31,000 --> 00:37:36,400 Vidimo ovdje da sam povezivanja u JavaScript datoteku pod nazivom quote.js. 634 00:37:36,400 --> 00:37:40,140 Ajmo zapravo otvoriti tu datoteku. Ne postoji. 635 00:37:42,610 --> 00:37:45,860 Sve moje JavaScripta datoteka će biti smješten u HTML 636 00:37:45,860 --> 00:37:47,630 tako da web preglednik može pristupiti. 637 00:37:47,630 --> 00:37:50,330 Onda imamo posebnu imenik ovdje za JavaScriptu 638 00:37:50,330 --> 00:37:54,340 i sada ovdje je quote.js. 639 00:37:54,340 --> 00:38:00,930 Na vrhu ove datoteke ovo ovdje piše da želim čekati cijelu stranicu da se učita 640 00:38:00,930 --> 00:38:04,830 prije nego što sam pokušati učiniti ništa. Zašto je to nužno? 641 00:38:04,830 --> 00:38:08,650 Ispada da je sljedeća stvar ja ću učiniti ovdje je početak u potrazi za element 642 00:38:08,650 --> 00:38:10,810 koji odgovara neki birač. 643 00:38:10,810 --> 00:38:15,600 Ako se to ikada JavaScript se izvršava prije taj element je učitan na stranici, 644 00:38:15,600 --> 00:38:17,820 onda sve što sam pokušati učiniti ne ide na posao 645 00:38:17,820 --> 00:38:20,580 jer ću pokušati odabrati nešto što je još tamo. 646 00:38:20,580 --> 00:38:23,780 Dakle, ova linija do vrha kaže želim čekati dok se sve učita 647 00:38:23,780 --> 00:38:28,030 tako da smo jamči da su svi elementi tražim su zapravo na stranici. 648 00:38:29,730 --> 00:38:34,310 Ovaj znak dolara ovdje znači ja sam koristeći biblioteku pod nazivom jQuery. 649 00:38:34,310 --> 00:38:38,570 Ovaj jQuery knjižnice nam omogućuje korištenje ove selektora da smo samo gledali. 650 00:38:38,570 --> 00:38:44,010 Govoreći $ onda prolazi kao argument ovo # obrasca-citat, 651 00:38:44,010 --> 00:38:47,910 Ja sam sada odabirom taj obrazac koji smo upravo uzeo pogledati. 652 00:38:47,910 --> 00:38:52,290 Sada imam zastupljenost tom obliku u sjećanju nekako. 653 00:38:52,290 --> 00:38:56,760 >> Na ovaj objekt sada, ova reprezentacija obliku, 654 00:38:56,760 --> 00:38:58,890 Ja sam sada koristite funkciju pozvali. 655 00:38:58,890 --> 00:39:02,710 Što je ova funkcija radi je da će priložiti događaj rukovatelj. 656 00:39:02,710 --> 00:39:06,310 Događaj koji ćemo slušati je submit događaj. 657 00:39:06,310 --> 00:39:08,890 Dakle, kada korisnik klikne da submit gumb ili hlača Enter, 658 00:39:08,890 --> 00:39:11,730 Ovaj događaj će se otpustiti. 659 00:39:11,730 --> 00:39:16,390 Do spaja na to, ja sada mogu nadjačati zadane ponašanje obliku. 660 00:39:16,390 --> 00:39:19,770 Bez tog JavaScriptu, oblik će podnijeti god PHP datoteka 661 00:39:19,770 --> 00:39:22,110 koristili smo u toj akciji atributa. 662 00:39:22,110 --> 00:39:25,440 No, umjesto toga, ja sada govorim, čekaj, čekaj, čekaj, ne želim da zapravo to učiniti. 663 00:39:25,440 --> 00:39:31,140 Želim da se to dogodi prije nego što idete i pokušati predati nekom PHP datoteci. 664 00:39:31,140 --> 00:39:32,870 Sada ono što želim učiniti? 665 00:39:32,870 --> 00:39:39,270 U ovom trenutku želim koristiti AJAX nekako učitati u tome što cijena dionice je. 666 00:39:39,270 --> 00:39:44,170 Prva stvar koju sam trebate znati je ono dioničko korisnik gleda gore. 667 00:39:44,170 --> 00:39:46,760 Za to ću koristiti drugi izbornik. 668 00:39:46,760 --> 00:39:49,020 Ovo je treći selektor smo gledali prije. 669 00:39:49,020 --> 00:39:54,460 To govori da želim krenuti ovaj oblik elementa sa ID obrasca-citat. 670 00:39:54,460 --> 00:39:58,440 Onda negdje unutar tog obrasca mora postojati ulazni element 671 00:39:58,440 --> 00:40:01,270 koji ima ime simbola. 672 00:40:01,270 --> 00:40:05,460 Ako se osvrnemo na našem HTML, vidjeli smo da smo imali ulaz [ime = simbol]. 673 00:40:05,460 --> 00:40:12,380 To znači da će se to odabrati taj tekstualni okvir da korisnik piše u. 674 00:40:12,380 --> 00:40:13,870 To je lijepo. Imamo tekstualni okvir. 675 00:40:13,870 --> 00:40:17,360 Sada samo trebamo znati što je unutar njega. 676 00:40:17,360 --> 00:40:20,290 Za to možemo nazvati ovu metodu ovdje, ovo. Val, 677 00:40:20,290 --> 00:40:23,240 i to kaže znam što tekstualni okvir imate. 678 00:40:23,240 --> 00:40:28,160 Želim da mi reći što je to korisnik unese u tom tekstualni okvir. 679 00:40:28,160 --> 00:40:34,440 Sada imamo niz zove simbol koji je jednak bez obzira korisnik upisali u. 680 00:40:34,440 --> 00:40:39,820 To je lijepo. Možemo koristiti taj string sada da naš zahtjev. 681 00:40:39,820 --> 00:40:42,450 Ovo je nova funkcija ovdje, to $, 682 00:40:42,450 --> 00:40:44,900 osim da smo više ne će biti odabirom elemenata, 683 00:40:44,900 --> 00:40:48,910 idemo se zovete drugu funkciju koja je pod uvjetom da nam jQuery. 684 00:40:48,910 --> 00:40:54,810 Ovo AJAX funkcija je ono što se zapravo događa da bi ovaj HTTP zahtjev. 685 00:40:54,810 --> 00:40:57,000 Dakle, moramo reći da je nekoliko stvari. 686 00:40:57,000 --> 00:41:01,410 Prva stvar koju moramo reći ovu funkciju gdje želim zahtjev ići. 687 00:41:01,410 --> 00:41:08,910 Negdje u mom projektu imam ovu sliku unutar HTML direktorij zove quote.php. 688 00:41:08,910 --> 00:41:15,150 Ja mogu pristupiti ovu sliku, vidjeli smo, baš kao i ova, ako odem na localhost / quote.php. 689 00:41:15,150 --> 00:41:20,450 >> Želim da moja JavaScript da bi zahtjev za tu stranicu. 690 00:41:20,450 --> 00:41:22,920 Koji tip zahtjev sada? 691 00:41:22,920 --> 00:41:27,210 Vidjeli smo prije da oblik ima tu metodu = "post" atribut, 692 00:41:27,210 --> 00:41:29,270 a to znači da će napraviti POST zahtjeva, 693 00:41:29,270 --> 00:41:32,630 pa to neće staviti ništa u URL-u, nego GET zahtjev, 694 00:41:32,630 --> 00:41:36,860 koji bi samo dobiti otkaz ako mi samo pristupiti na stranicu s web-preglednik, na primjer. 695 00:41:36,860 --> 00:41:41,260 Sada smo je rekao Želim napraviti zahtjev HTTP POST 696 00:41:41,260 --> 00:41:44,840 na stranici se nalazi na quote.php. 697 00:41:44,840 --> 00:41:51,490 Kada smo dostaviti obrazac, sjetite se da bi mogli pristupiti ulazne elemente unutar tog oblika 698 00:41:51,490 --> 00:41:54,430 s tim $ _POST varijable. 699 00:41:54,430 --> 00:41:58,710 Do sada u priči nismo zapravo ste zajedno ikakvih podataka još. 700 00:41:58,710 --> 00:42:00,640 Mi samo sam rekao da smo izradu AJAX zahtjev 701 00:42:00,640 --> 00:42:03,200 i ovdje je tip zahtjev činimo. 702 00:42:03,200 --> 00:42:07,090 Sada trebamo zapravo poslati neke podatke na stranici. 703 00:42:07,090 --> 00:42:10,930 Za to možemo koristiti ovu nekretninu nazivom podataka. 704 00:42:10,930 --> 00:42:14,950 Vrijednost ove imovine je zapravo asocijativni niz. 705 00:42:14,950 --> 00:42:19,390 Razlog za to je što nam omogućuje slanje više nego samo jedan komad podataka. 706 00:42:19,390 --> 00:42:24,750 To je razlog zašto smo ove vitičastih zagrada ovdje ugniježđena unutar ovih drugih vitičastih zagrada. 707 00:42:24,750 --> 00:42:29,680 Tipke u tim asocijativnim nizovima će biti ista stvar 708 00:42:29,680 --> 00:42:32,630 kao i one atribute ime u našim obliku elemenata. 709 00:42:32,630 --> 00:42:35,740 To znači da ako ja pošaljem uz ključ simbola, 710 00:42:35,740 --> 00:42:41,870 to znači da je moja PHP stranica može pristupiti te podatke s $ _POST [simbol] 711 00:42:41,870 --> 00:42:44,640 baš kao što smo radili prije, kada smo bili slanje obrasca. 712 00:42:44,640 --> 00:42:47,090 I sada su stvarni podaci želimo poslati 713 00:42:47,090 --> 00:42:50,790 će biti vrijednost unutar ovog asocijativnog niza. 714 00:42:50,790 --> 00:42:54,070 >> Mi pohranjeni ovaj tekst u varijablu simbol, 715 00:42:54,070 --> 00:42:57,380 i tako šaljemo zajedno sada je ključ simbola 716 00:42:57,380 --> 00:43:01,380 i vrijednost obzira korisnik upisali u. 717 00:43:01,380 --> 00:43:06,270 Sada smo napravili ovu HTTP zahtjev, naša PHP datoteka je pogubljen, 718 00:43:06,270 --> 00:43:11,480 i to će poslati neke podatke natrag sada klijenta koji je upravo napravio ovaj zahtjev. 719 00:43:11,480 --> 00:43:15,220 Sada moramo odgovoriti na ono što poslužitelju rekao nam je. 720 00:43:15,220 --> 00:43:20,180 Za to imamo ovu zadnju imovinu ovdje zove uspjeh. 721 00:43:20,180 --> 00:43:24,240 Vrijednost ovog uspjeha ključ zapravo će biti funkcija, 722 00:43:24,240 --> 00:43:26,910 i to je jedan od stvarno cool stvari koje možete učiniti s JavaScriptom. 723 00:43:26,910 --> 00:43:31,720 Ne samo da možete imati Ints ili polja kao vrijednost unutar nekog asocijativnog niza, 724 00:43:31,720 --> 00:43:34,170 možemo također imaju svoju funkciju. 725 00:43:34,170 --> 00:43:36,380 Dakle, rekavši uspjeh, ovo je moj ključ. 726 00:43:36,380 --> 00:43:38,830 Dvotočka kaže ovdje dolazi vrijednost, 727 00:43:38,830 --> 00:43:41,810 a sada vrijednost to je zapravo funkcija. 728 00:43:41,810 --> 00:43:44,460 Dakle, ne trebamo dati ovu funkciju ime po sebi. 729 00:43:44,460 --> 00:43:48,820 Možemo samo reći da će ovo biti neki funkcija. To se događa da se jedan argument. 730 00:43:48,820 --> 00:43:51,190 Argument na ovu funkciju će biti 731 00:43:51,190 --> 00:43:54,460 god poslužitelj nas poslao natrag iz zahtjeva. 732 00:43:54,460 --> 00:43:57,750 Baš kao i kada je naš preglednik čini zahtjev, poslužitelj šalje nešto natrag 733 00:43:57,750 --> 00:43:59,060 i preglednik prikazuje ga, 734 00:43:59,060 --> 00:44:03,030 u kontekstu AJAX samo smo napravili zahtjev, poslužitelj poslao nešto nazad, 735 00:44:03,030 --> 00:44:07,110 a sada smo da su predstavljeni kao niz. 736 00:44:07,110 --> 00:44:11,280 S tom nizu sam samo želio prikazati da na stranici. 737 00:44:11,280 --> 00:44:14,040 Za to ću imati jedan posljednji birač. 738 00:44:14,040 --> 00:44:17,570 Želim odabrati element s ID cijeni. 739 00:44:17,570 --> 00:44:20,710 Ovo je samo prazna div koji sam stvorio na stranici, 740 00:44:20,710 --> 00:44:26,640 i ja želim postaviti sadržaj tog div da bude ono što je poslužitelj nas poslali natrag. 741 00:44:26,640 --> 00:44:30,280 Ja sam zapravo izmjene quote.php malo. 742 00:44:30,280 --> 00:44:33,460 >> Umjesto poziva uzvratiti i pružanje neke stranice, 743 00:44:33,460 --> 00:44:38,100 quote.php sada jednostavno će ispisati vrijednost zaliha kao string. 744 00:44:38,100 --> 00:44:41,880 Dakle, ako ste bili zapravo posjetite stranicu, samo bi vidjeti taj mali niz 745 00:44:41,880 --> 00:44:45,030 kako god cijena dionice je. 746 00:44:45,030 --> 00:44:50,170 Jedna posljednja stvar koju trebate učiniti ovdje je samo pazite ova funkcija vraća false. 747 00:44:50,170 --> 00:44:53,560 Što to govori da ako sam unutar događaja rukovatelj 748 00:44:53,560 --> 00:44:57,300 i taj događaj rukovatelj false umjesto povratka istina, 749 00:44:57,300 --> 00:45:01,510 to znači da ne želim izvorni događaj na vatru. 750 00:45:01,510 --> 00:45:05,270 U tom slučaju, ako nismo imali nikakve JavaScript i mi poslali obrazac, 751 00:45:05,270 --> 00:45:08,280 naša web preglednik će reći: "Ja ću poslati te podatke zajedno" 752 00:45:08,280 --> 00:45:10,130 i oni će vam poslati na drugu stranicu. 753 00:45:10,130 --> 00:45:14,360 Budući da smo pomoću AJAX sada, nema potrebe za slanje korisnika na drugu stranicu. 754 00:45:14,360 --> 00:45:17,920 Mi smo samo ćemo prikazati rezultate dinamički na ovoj istoj stranici. 755 00:45:17,920 --> 00:45:21,460 Mi zaista ne želite ih da odu bilo gdje, a ja želim ostati na istoj stranici. 756 00:45:21,460 --> 00:45:27,060 Dakle, po povratku lažna, mi bi se osiguralo da se oblik ne to učiniti za nas. 757 00:45:27,060 --> 00:45:31,170 Idemo pogledati što se to zapravo izgleda. 758 00:45:31,170 --> 00:45:34,180 Naš citat stranica izgleda isto. 759 00:45:34,180 --> 00:45:37,240 Dopustite mi podići inspektoru ovdje dolje, tako da možete vidjeti što se događa. 760 00:45:37,240 --> 00:45:40,270 Učinite to malo manje veliki. 761 00:45:40,270 --> 00:45:44,590 Zapamtite, ako smo otvoriti Network karticu, ovo je mjesto gdje možemo vidjeti sve HTTP zahtjeva 762 00:45:44,590 --> 00:45:47,570 da se događa na stranici. 763 00:45:47,570 --> 00:45:52,890 >> Za simbol neka mi upisati AAPL i kliknite Get Citat. 764 00:45:52,890 --> 00:45:56,720 Sada smo vidjeli da je udio Applea košta neki broj dolara 765 00:45:56,720 --> 00:46:00,410 Upravo se pojavio na stranici, ali URL uopće nije mijenjao sve. 766 00:46:00,410 --> 00:46:04,570 U stvari, ovdje je HTTP zahtjev koji smo upravo napravili. 767 00:46:04,570 --> 00:46:09,980 Napravili smo POST zahtjev za quote.php. To ima smisla. 768 00:46:09,980 --> 00:46:12,800 To je ono što nas poslužitelj poslao natrag. 769 00:46:12,800 --> 00:46:16,320 To više nije to gigantski HTML dokument sa slikama i tome slično, 770 00:46:16,320 --> 00:46:20,920 to je samo jedan redak teksta, i onda mi samo prikazuje liniju teksta. 771 00:46:20,920 --> 00:46:26,290 Ako se vratimo na zaglavljima i vidjeti što se zapravo šalju unutar ovog HTTP zahtjev, 772 00:46:26,290 --> 00:46:33,950 možemo vidjeti ovdje dolje da smo poslali uz ključ simbola i vrijednosti AAPL, 773 00:46:33,950 --> 00:46:36,430 što je ono što korisnik upisali u. 774 00:46:36,430 --> 00:46:39,230 To je lijepo, ali to je još uvijek malo neugodno. 775 00:46:39,230 --> 00:46:42,490 Još uvijek imam kliknuti ovaj gumb da biste dobili zaliha citat. 776 00:46:42,490 --> 00:46:45,880 Mi smo zauzet ljudi, a mi nemamo vremena da kliknete tipke. 777 00:46:45,880 --> 00:46:49,910 Google je to shvatio malo prije kad su provedene Google Instant. 778 00:46:49,910 --> 00:46:53,590 Što Google Instant čini se kao da ste tipkati to samo počinje prikazivati ​​rezultate za vas 779 00:46:53,590 --> 00:46:56,520 , tako da ne morate brinuti o čak klikom pretraživanje. 780 00:46:56,520 --> 00:46:58,730 Zapravo, zabavna priča vezana uz to. 781 00:46:58,730 --> 00:47:01,100 Nakon Google Instant izašao, ljudi su bili poput, "Hej, ovo je super nevjerojatna." 782 00:47:01,100 --> 00:47:02,540 "Ovo je tako cool." 783 00:47:02,540 --> 00:47:05,950 I učenik dolje na Stanfordu, koji je bio 19 u to vrijeme 784 00:47:05,950 --> 00:47:09,000 napravio ovaj site zove YouTube Instant. 785 00:47:09,000 --> 00:47:13,170 Svi YouTube Instant ne učinkovito pretražiti YouTube odmah. 786 00:47:13,170 --> 00:47:17,020 Dakle, umjesto da idu na YouTube.com i pogodio pretraživanje, 787 00:47:17,020 --> 00:47:21,650 kad sam početi pisati u YouTube Instant nešto poput CS50, 788 00:47:21,650 --> 00:47:25,320 mogli smo vidjeti da se ovdje to pokušava na sporoj internetskoj vezi 789 00:47:25,320 --> 00:47:28,500 naseliti ovi rezultati živjeti. 790 00:47:28,500 --> 00:47:35,590 Za to mi zapravo može napraviti vrlo jednostavno promijene na našem quote.js datoteku. 791 00:47:35,590 --> 00:47:40,900 Upravo sada smo pridaje ovaj događaj kada se obrazac podnosi. 792 00:47:40,900 --> 00:47:43,760 Mi zapravo ne žele da korisnik podnijeti taj oblik više, 793 00:47:43,760 --> 00:47:48,570 pa ajmo umjesto vatru ovom događaju svaki put korisnik pritisne tipku. 794 00:47:48,570 --> 00:47:53,200 Da bi to neka prvi promjenu događaj iz dostaviti keyup. 795 00:47:53,200 --> 00:47:55,740 To znači da umjesto da čeka oblik podnijeti, 796 00:47:55,740 --> 00:47:58,490 svaki put pritisne tipka, nešto će se dogoditi. 797 00:47:58,490 --> 00:48:02,030 To više nema smisla pridavati ovu keyup događaj za cijelu obliku. 798 00:48:02,030 --> 00:48:05,080 Mi smo stvarno samo stalo da okvir za pretraživanje. 799 00:48:05,080 --> 00:48:09,320 >> Za odabir da sada možemo promijeniti to biti, nego oblik-citat, 800 00:48:09,320 --> 00:48:14,220 Obrazac-citat, a mi ćemo imati ulaz (upišite = tekst) ili bismo mogli reći (ime = simbol) - 801 00:48:14,220 --> 00:48:16,420 što god želimo. 802 00:48:16,420 --> 00:48:18,650 Sada postoji jedna posljednja stvar koju morate učiniti. 803 00:48:18,650 --> 00:48:21,190 Sjeti se ovdje kad smo rekli povratak false 804 00:48:21,190 --> 00:48:24,370 mi je rekao da ne želim da se zadani događaj na vatru. 805 00:48:24,370 --> 00:48:26,390 No, to samo tako dogodi da ako mi onemogućiti da se sada, 806 00:48:26,390 --> 00:48:29,660 god smo upisati se neće pojaviti u pregledniku više 807 00:48:29,660 --> 00:48:33,000 jer bi to bilo zadano ponašanje upišete u okvir za tekst. 808 00:48:33,000 --> 00:48:38,660 Mi više ne žele nadjačati da, pa ajmo uništiti taj povratak lažna. 809 00:48:38,660 --> 00:48:44,800 Ako smo spasiti i ponovno učitati stranicu, sad kad sam početi tipkati AAPL 810 00:48:44,800 --> 00:48:50,160 vidjet ćete da je cijena dionice na dnu ovdje završava automatski. 811 00:48:50,160 --> 00:48:53,150 Dakle, ovdje je CS50 financija Instant. 812 00:48:53,150 --> 00:48:55,860 Zapravo zabavna priča o YouTube Instant 813 00:48:55,860 --> 00:48:59,420 je da student samo vrsta je pisao kao jedan-noć projekta, 814 00:48:59,420 --> 00:49:03,800 a sljedeći dan je bio ponuđen posao od strane YouTube CEO. 815 00:49:03,800 --> 00:49:10,610 Tako jednostavno kao da ste CS50 studenti, vaši konačni projekti mogu dobiti posao na YouTube. 816 00:49:10,610 --> 00:49:14,720 Nešto kao da je stvarno cool ideja za konačni projekt, zar ne? 817 00:49:14,720 --> 00:49:18,170 Imali smo neke postojeće funkcionalnosti koje smo htjeli da se integriraju s. 818 00:49:18,170 --> 00:49:20,330 Mi poboljšati korisničko iskustvo malo, 819 00:49:20,330 --> 00:49:24,340 i odjednom traži nešto na YouTube Instant moglo biti puno lakše 820 00:49:24,340 --> 00:49:27,290 nego u potrazi za njega na redovnoj YouTube. 821 00:49:27,290 --> 00:49:30,790 Tako da je Ajax u malom. 822 00:49:30,790 --> 00:49:34,860 >> U primjerima da je Josip bio prikazuju, vidjeli smo puno autocompletes, 823 00:49:34,860 --> 00:49:39,250 i one autocompletes su jako, jako zgodan jer mi nemamo na umu - 824 00:49:39,250 --> 00:49:41,770 Na primjer, ako se ne sjećam cijenu dionica za Apple 825 00:49:41,770 --> 00:49:45,110 a mi samo znamo da je aa nešto, nego samo reći, 826 00:49:45,110 --> 00:49:48,740 "Udio ovu stvar košta toliko novca" 827 00:49:48,740 --> 00:49:52,540 Ja bih nekako volio znati što dionice početi s aa. 828 00:49:52,540 --> 00:49:58,340 Mi možemo učiniti da stvarno lijepo s Bootstrap knjižnice koji je već uključen 829 00:49:58,340 --> 00:50:01,380 unutar CS50 financija. 830 00:50:01,380 --> 00:50:09,390 Ako ste došli do ovdje za JavaScript oznake i pomaknite se dolje do Typeahead, 831 00:50:09,390 --> 00:50:13,730 to je samo lijepo plugin koji je netko već napisao za nas, 832 00:50:13,730 --> 00:50:16,980 i lako možemo koristiti svoju funkcionalnost ovako. 833 00:50:16,980 --> 00:50:21,410 Ja upisali u, a ovdje je popis nekih država koje počinju s A. 834 00:50:21,410 --> 00:50:25,360 Recimo da mislim da je to jako cool i da je vrijeme za mene su to na svojoj stranici. 835 00:50:25,360 --> 00:50:28,300 Ispada da je to jako, jako jednostavan. 836 00:50:28,300 --> 00:50:32,810 Hajdemo skakati preko ovdje da quote3.js. 837 00:50:34,890 --> 00:50:37,380 Moj datoteka izgleda malo drugačije. 838 00:50:37,380 --> 00:50:39,700 Ovdje dolje sve moje AJAX stvari je ista. 839 00:50:39,700 --> 00:50:43,170 Želim učitati burzovne podatke bez potrebe da ide na drugu stranicu. 840 00:50:43,170 --> 00:50:46,220 Ali sada želim koristiti ovaj plugin. 841 00:50:46,220 --> 00:50:51,020 Bootstrap dokumentacija ima sjajne primjere kako točno mogu to učiniti. 842 00:50:51,020 --> 00:50:54,350 Želim reći, "Evo ulaz da želim samodovršetak na" 843 00:50:54,350 --> 00:50:56,640 i ja ću nazvati ovu funkciju zvanu typeahead, 844 00:50:56,640 --> 00:50:59,730 i da će nositi sve Typeahead stvari za nas. 845 00:50:59,730 --> 00:51:02,090 To će započeti popis, to će učiniti sve naše filtriranje. 846 00:51:02,090 --> 00:51:06,680 Jedino što treba znati je ono što podaci smo autocompleting na. 847 00:51:06,680 --> 00:51:10,480 Tako sam saznala ovu tipku upravo čitajući dokumentaciju i gleda na primjerima. 848 00:51:10,480 --> 00:51:14,150 Ako sam mu dati ključ izvora, vrijednost ovog ključa 849 00:51:14,150 --> 00:51:17,770 samo su neki niz stvari želim samodovršetka dalje. 850 00:51:17,770 --> 00:51:20,180 Ova varijabla je došao iz ove druge datoteke. 851 00:51:20,180 --> 00:51:23,400 Ja otvoriti symbols.js. 852 00:51:23,400 --> 00:51:27,980 >> Ovaj symbols.js je upravo to jako, jako veliki niz koji sadrži nizove 853 00:51:27,980 --> 00:51:32,080 svih tih zaliha simbola iz NASDAQ. 854 00:51:32,080 --> 00:51:42,190 Ako želim skočiti natrag u HTML, tako jharvard, vhosts, globalhost, HTML, predloške, 855 00:51:42,190 --> 00:51:45,820 quote_form. 856 00:51:45,820 --> 00:51:50,910 Budući da je sada zove quote3.js, neka mi promijeniti JavaScript datoteku Ja uključujući ovdje. 857 00:51:50,910 --> 00:51:55,110 Sada imam quote3.js, pa ću učitati u tom zasebnom JavaScript datoteku, 858 00:51:55,110 --> 00:51:57,910 onaj koji ima taj bootstrap samodovršetka. 859 00:51:57,910 --> 00:52:04,430 Sada kada sam skočiti natrag u preglednik, ponovno učitati stranicu, a ja počnite tipkati aa, 860 00:52:04,430 --> 00:52:06,880 tu je moj samodovršetak. I to je stvarno kao jednostavan kao taj. 861 00:52:06,880 --> 00:52:11,400 Imao sam jedan redak koda koji samo rekao: "Ovdje su stvari koje želim samodovršetak na" 862 00:52:11,400 --> 00:52:16,590 i odjednom imam stvarno, stvarno lijepo funkcionalnost nema puno truda na sve. 863 00:52:16,590 --> 00:52:19,810 Kao što ste u razvoju web stranice, a posebno prednji kraj stranu stvari, 864 00:52:19,810 --> 00:52:21,840 ćeš naći to je slučaj puno. 865 00:52:21,840 --> 00:52:25,700 Postoji puno, puno, puno stvarno cool slobodnih knjižnica vani 866 00:52:25,700 --> 00:52:30,190 da bi to super jednostavno za napraviti stvari kao što je ovaj. 867 00:52:30,190 --> 00:52:37,230 Može li itko sjetiti bilo nedostataka jednostavno autocompleting na ovom velikom popisu simbola? 868 00:52:37,230 --> 00:52:41,580 Što bi moglo biti nešto što nije najbolje sa ovog pristupa? 869 00:52:42,790 --> 00:52:45,960 Da. >> [Student] Vrijeme, ako imate puno [nečujan] 870 00:52:45,960 --> 00:52:50,420 Da. Upravo sada smo preuzimanjem ovu veliku JavaScript datoteku i tu je puno simbola. 871 00:52:50,420 --> 00:52:54,360 I tako, ako imamo tonu stvari, to bi mogao vrsta povećati latencije od ne samo u potrazi 872 00:52:54,360 --> 00:52:56,600 ali i preuzimanjem stvarne datoteke. 873 00:52:56,600 --> 00:52:58,670 Izvrsno. Sve drugo? 874 00:53:01,950 --> 00:53:05,280 Trenutno ne postoji pravi osjećaj važnosti. 875 00:53:05,280 --> 00:53:08,190 Ako sam upisati A, tvrtki koje pokazuju ovdje 876 00:53:08,190 --> 00:53:11,220 ne može biti najpopularnije tvrtke koje počinju s A. 877 00:53:11,220 --> 00:53:17,130 >> Prije nego što sam doći do Apple, to bi moglo potrajati još neke znakove kako bi pronašli ono što tražim. 878 00:53:17,130 --> 00:53:20,420 Ovo samodovršetak nema taj osjećaj važnosti. 879 00:53:20,420 --> 00:53:24,400 To je samo htio reći, "ništa što odgovara ću prikazati." 880 00:53:24,400 --> 00:53:30,510 Umjesto toga, ja bih nekako integrirati neke važnosti u mojim pretraživanja. 881 00:53:30,510 --> 00:53:36,440 Ako idem ovdje na Yahoo! financija, finance.yahoo.com, 882 00:53:36,440 --> 00:53:42,100 Ako sam pokušati unijeti simbol na Yahoo! Financije stranici 883 00:53:42,100 --> 00:53:52,310 i ja početi tipkati GOOG, imam lijep popis stvari. 884 00:53:52,310 --> 00:53:57,100 Jasno, to izgleda kao Yahoo! Financije radi nešto više pametan ovdje. 885 00:53:57,100 --> 00:53:59,790 Oni imaju određenu relevantnost i oni također imaju dodatne informacije 886 00:53:59,790 --> 00:54:01,430 kao ime roda. 887 00:54:01,430 --> 00:54:05,850 To je nešto što ja stvarno ne mogu dobiti samo s moje dioničko popis simbola. 888 00:54:05,850 --> 00:54:09,520 Želim to i tako ću ga uzeti. 889 00:54:09,520 --> 00:54:11,790 Da bi to neka je napraviti nekoliko stvari. 890 00:54:11,790 --> 00:54:15,580 Idemo prvi otvaraju inspektora na ovoj stranici 891 00:54:15,580 --> 00:54:18,100 jer smo vidjeli da se ova stranica ne pretovara na sve, 892 00:54:18,100 --> 00:54:21,960 pa to je vjerojatno pomoću AJAX nekako se učitava svoje podatke. 893 00:54:21,960 --> 00:54:23,920 Možemo saznati što podaci to utovara. 894 00:54:23,920 --> 00:54:28,390 Ako sam kliknite na ovu karticu Network, to će biti sve zahtjeve koje počinju dobiti otkaz. 895 00:54:28,390 --> 00:54:34,020 Sada, ako sam upisati goo, možemo vidjeti da sam upravo dobio novi HTTP zahtjev. 896 00:54:34,020 --> 00:54:37,490 To je vjerojatno gdje da podaci dolaze iz. 897 00:54:37,490 --> 00:54:41,990 Naravno, ako gledam ovaj URL, što je malo čudno ime, 898 00:54:41,990 --> 00:54:46,930 možemo vidjeti da je to točno gdje Yahoo šalju svoje podatke iz. 899 00:54:46,930 --> 00:54:53,400 >> Ja sam stvorio zasebnu datoteku pod nazivom suggest.php koja je vrlo slična u duhu na pretraživanje funkciji. 900 00:54:53,400 --> 00:54:57,730 To je u osnovi će napraviti upit na Yahoo URL, vratiti neke podatke, 901 00:54:57,730 --> 00:54:59,750 i poslati ga natrag na mene. 902 00:54:59,750 --> 00:55:02,570 Sada, radije nego da koristite ovaj veliki, veliki popis simbola, 903 00:55:02,570 --> 00:55:05,280 Ja mogu koristiti Yahoo lijepe stvari relevantnosti, 904 00:55:05,280 --> 00:55:08,150 a ja ne moram preuzeti taj masivni JavaScript datoteku. 905 00:55:08,150 --> 00:55:12,040 Ja samo ću povući dolje zapravo relevantne zaliha simbola. 906 00:55:12,040 --> 00:55:13,960 Ajmo skočiti u to. 907 00:55:13,960 --> 00:55:17,360 Dakle, html, js. Mi smo sada u quote4. 908 00:55:17,360 --> 00:55:22,120 Sada smo više ne koristi taj veliki popis JavaScripta datoteka. 909 00:55:22,120 --> 00:55:24,430 No, tu je mala vrsta dizajna problem ovdje. 910 00:55:24,430 --> 00:55:28,200 Mi smo je rekao da je u Ajax je asinkroni. 911 00:55:28,200 --> 00:55:31,000 Što to znači da kada sam napraviti AJAX zahtjev, 912 00:55:31,000 --> 00:55:36,490 pa ovdje na liniji 8, ovo je mjesto gdje moj AJAX zahtjev zapravo je otkaz. 913 00:55:36,490 --> 00:55:40,370 Recimo da sada imam neki kod ovdje dolje da će učiniti neke stvari 914 00:55:40,370 --> 00:55:43,930 sviđa upozoriti korisnika ili nešto promijeniti na stranici. 915 00:55:43,930 --> 00:55:49,830 Što se neće dogoditi je preglednik ne ide čekati za ovaj zahtjev za nastavak 916 00:55:49,830 --> 00:55:53,480 prije silazi i udaranje ovu liniju. 917 00:55:53,480 --> 00:55:55,900 To je asinkroni dio. 918 00:55:55,900 --> 00:55:58,400 To će učiniti taj zahtjev i reći: "Kad ste završili, 919 00:55:58,400 --> 00:56:03,080 "Vratiti i nazvati tu funkciju da sam vam rekao da zovu unutar uspjeha." 920 00:56:03,080 --> 00:56:07,300 To znači da ne možemo preuzeti sve dionice unaprijed. 921 00:56:07,300 --> 00:56:10,300 Mi moramo napraviti zahtjev i čekati da se nešto vratiti. 922 00:56:10,300 --> 00:56:13,330 To znači da prije nego što smo mogli jednostavno reći Bootstrap, 923 00:56:13,330 --> 00:56:15,580 "Evo popis stvari koje želim da samodovršetka dalje." 924 00:56:15,580 --> 00:56:18,950 Mi više ne može učiniti da se više, jer mi ne znamo 925 00:56:18,950 --> 00:56:21,780 ono što želimo da se zapravo samodovršetak na. 926 00:56:21,780 --> 00:56:25,190 Srećom, Bootstrap mislili o tome, jer oni su pametni dečki tamo, 927 00:56:25,190 --> 00:56:30,160 i oni su zapravo nam je dao još jedan način da napunite ovu Typeahead plugin. 928 00:56:30,160 --> 00:56:35,630 Prije, vrijednost ovog izvora imovine bila je upravo to veliki niz stvari samodovršetka dalje. 929 00:56:35,630 --> 00:56:39,580 >> Sada izvor vlasništvo je zapravo funkcija, 930 00:56:39,580 --> 00:56:44,580 i svrha ove funkcije je shvatiti što su stvari koje samodovršetak na su. 931 00:56:44,580 --> 00:56:48,730 Način da će shvatiti da van je da će zatražiti Yahoo! Financije 932 00:56:48,730 --> 00:56:51,750 ono što su najbolje stvari koje su samodovršetak. 933 00:56:51,750 --> 00:56:54,500 Za to ću napraviti vrlo sličan AJAX zahtjev. 934 00:56:54,500 --> 00:56:59,010 Ja ću zatražiti ovu stranicu na suggest.php. 935 00:56:59,010 --> 00:57:01,360 Želim poslati zajedno simbola dalje. 936 00:57:01,360 --> 00:57:05,570 A sada moj uspjeh, Bootstrap dokumentacija mi je rekao 937 00:57:05,570 --> 00:57:09,130 da bi se popuniti taj popis stvari, 938 00:57:09,130 --> 00:57:14,370 sve što trebate učiniti je proći u ovom polju sada na povratni funkciji. 939 00:57:14,370 --> 00:57:15,660 Ali čekaj malo. 940 00:57:15,660 --> 00:57:20,240 Ako je to trebao biti niz i AJAX me poslati natrag tekst, 941 00:57:20,240 --> 00:57:22,720 kako je to moguće? 942 00:57:22,720 --> 00:57:27,910 To uvodi novi način razmjene podataka zovu JSON. 943 00:57:27,910 --> 00:57:33,000 U tom slučaju nećemo samo poslati natrag jednostavan niz teksta. 944 00:57:33,000 --> 00:57:37,670 Sada imamo posla s ovim složenije popisu zaliha simbola. 945 00:57:37,670 --> 00:57:41,730 Ovi simboli zaliha također može uključivati ​​stvari kao što su imenom tvrtke ili trenutnim cijenama. 946 00:57:41,730 --> 00:57:47,550 Samo pomoću veliki dug niz koji nije formatiran u bilo kojem predvidiv način 947 00:57:47,550 --> 00:57:51,970 ne će biti najbolji način da biste dobili ove podatke iz Yahoo poslužitelja za mene 948 00:57:51,970 --> 00:57:54,540 na način da se mogu lako razumjeti. 949 00:57:54,540 --> 00:58:01,280 JSON je tehnologija koja iskorištava kako ćemo stvoriti asocijativne polja u JavaScriptu. 950 00:58:01,280 --> 00:58:04,510 Ovo izgleda puno poput JavaScripta asocijativnog niza, 951 00:58:04,510 --> 00:58:06,600 i, u stvari, to je zato što je to. 952 00:58:06,600 --> 00:58:09,710 JSON zalaže za JavaScript Object notacija. 953 00:58:09,710 --> 00:58:15,020 To je u osnovi dogovorene format za prijenos podataka natrag i naprijed. 954 00:58:15,020 --> 00:58:18,280 Ovdje to JSON objekt ili to JSON asocijativna polja 955 00:58:18,280 --> 00:58:21,010 šalje mi neke podatke o stazi. 956 00:58:21,010 --> 00:58:25,110 >> Tipke ovom polju su stvari poput Naravno da ima vrijednost cs50, 957 00:58:25,110 --> 00:58:29,140 i ovdje možemo vidjeti da ja mogu imati vrijednost koja je niz. 958 00:58:29,140 --> 00:58:32,730 Ja ne moram raditi stvari kao što izdvoji žice i tražiti zarezom 959 00:58:32,730 --> 00:58:35,330 i učiniti lude stvari kao što je to. 960 00:58:35,330 --> 00:58:38,820 Budući da je to izjavio u ovom JSON formatu, 961 00:58:38,820 --> 00:58:43,510 JavaScript i jQuery već imaju funkcije za pretvaranje niz 962 00:58:43,510 --> 00:58:48,140 da izgleda ovako JSON u stvarni JavaScript asocijativnog niza 963 00:58:48,140 --> 00:58:50,440 da možemo raditi. 964 00:58:50,440 --> 00:58:56,660 Doing to je kao jednostavan kao reći da više nije ovu sliku, suggest.php, 965 00:58:56,660 --> 00:58:59,040 me poslati natrag jednostavno niz teksta, 966 00:58:59,040 --> 00:59:01,950 ali znam da će mi se šalje natrag JSON. 967 00:59:01,950 --> 00:59:06,760 To znači da je JSON se može pretvoriti u JavaScript asocijativnog niza. 968 00:59:06,760 --> 00:59:10,830 I tako jQuery, želio bih da to učiniti za mene. 969 00:59:10,830 --> 00:59:13,990 To znači da je to odgovor parametar ovdje, 970 00:59:13,990 --> 00:59:16,070 ovo više nije samo niz. 971 00:59:16,070 --> 00:59:19,860 Zato smo rekli jQuery da ovdje dolazi neki JSON, 972 00:59:19,860 --> 00:59:22,950 jQuery će biti dovoljno pametni da kažu, "Htio si JSON?" 973 00:59:22,950 --> 00:59:26,890 "Ja ću pretvoriti da u asocijativni niz za vas." 974 00:59:26,890 --> 00:59:32,100 Ajmo zapravo pogledati karticu Network jednom imamo quote4.js. 975 00:59:32,100 --> 00:59:35,400 Mi ćemo to promijeniti i ponovno učitati stranicu. 976 00:59:37,150 --> 00:59:41,250 Sada ću upisati u-jednom. 977 00:59:41,250 --> 00:59:45,600 Ja sam napravio par zahtjeve za suggest.php, ali sada je ovo odgovor, 978 00:59:45,600 --> 00:59:48,670 nego samo niz, to je JSON. 979 00:59:48,670 --> 00:59:52,580 Dakle, imam otvoren kovrčavu braće rekavši: "Evo dolazi asocijativni niz." 980 00:59:52,580 --> 00:59:56,830 >> Prvi i jedini ključ ovog asocijativnog niza se zove simboli, 981 00:59:56,830 --> 01:00:00,240 a zatim ovdje je niz svih relevantnih simbola 982 01:00:00,240 --> 01:00:04,820 sad dolazi iz Yahoo! financija, nije iz tog ogromnog popisa. 983 01:00:06,110 --> 01:00:10,630 Tako sam jednostavno mogu naseliti ovaj samodovršetak plugin 984 01:00:10,630 --> 01:00:14,280 s nekim podacima koji ne dolaze iz lokalnu datoteku koja je već unaprijed određenim 985 01:00:14,280 --> 01:00:17,490 ali od nečega drugog. 986 01:00:17,490 --> 01:00:21,160 Ispada da smo zapravo može iskoristiti tehnologije pod nazivom JSONP, 987 01:00:21,160 --> 01:00:27,420 ili JSON s padding, koja će eliminirati ovaj suggest.php posrednika. 988 01:00:27,420 --> 01:00:34,010 No, umjesto da radi, neka je umjesto pogledati kako mogu poboljšati ovu čak i više. 989 01:00:34,010 --> 01:00:36,040 Stvarno mi se sviđa Bootstrap je Typeahead. To je jako lijepo. 990 01:00:36,040 --> 01:00:39,570 No, mi smo dobivanje na dobre JavaScript i želimo vrsta to sami, 991 01:00:39,570 --> 01:00:43,870 možda pogledati što je to dodatak mogao biti događaj. 992 01:00:43,870 --> 01:00:46,500 Neka se više ne koristi taj Typeahead stvar, 993 01:00:46,500 --> 01:00:50,550 i ajmo pokušati napraviti ovaj popis predloženih dionica sami. 994 01:00:50,550 --> 01:00:53,790 Ovdje u quote6.php ćemo krenuti na isti način. 995 01:00:53,790 --> 01:00:58,050 Svaki put kad netko nešto tipa, želimo napraviti AJAX zahtjev. 996 01:00:58,050 --> 01:01:01,590 Ovo je sličan našem izvornom CS50 financija Instant. 997 01:01:01,590 --> 01:01:05,020 Umjesto da zahtjev za quote.php, 998 01:01:05,020 --> 01:01:08,530 mi smo sada podnošenje zahtjeva za iste datoteke kao i prije, to suggest.php, 999 01:01:08,530 --> 01:01:12,460 koji je pravedan idući povući podatke iz Yahoo! financija. 1000 01:01:12,460 --> 01:01:19,480 >> Opet, mi smo još uvijek očekuju JSON, ali sada od Typeahead nije to za nas, 1001 01:01:19,480 --> 01:01:24,850 moramo poslati zajedno vrijednost koja je unutar tekućeg tekstualnog okvira. 1002 01:01:24,850 --> 01:01:28,120 Sada znamo što pitati Yahoo! Financije za, 1003 01:01:28,120 --> 01:01:34,160 pa sad evo funkcija koje želimo izvršiti jednom zahtjev dovrši. 1004 01:01:34,160 --> 01:01:36,520 Mi nemamo plugin napraviti popis za nas, 1005 01:01:36,520 --> 01:01:40,630 pa evo gdje mi zapravo idemo izgraditi popis prijedloga. 1006 01:01:40,630 --> 01:01:44,850 Da bi to učinili, volio u PHP smo ulančani ove velike nizove HTML 1007 01:01:44,850 --> 01:01:48,170 onda smo ih ispisuju, možemo učiniti isto točno stvar u JavaScriptu. 1008 01:01:48,170 --> 01:01:51,850 Prvo ćemo krenuti ovaj niz nazivom prijedlozi, 1009 01:01:51,850 --> 01:01:54,590 i to niz samo će sadržavati neke HTML. 1010 01:01:54,590 --> 01:01:58,320 Mi želimo da se popis stvari, tako da ćemo krenuti s ovog popisa oznaka, 1011 01:01:58,320 --> 01:02:03,340 a sada idemo ponoviti nad svim simbolima koji su se vratili natrag do nas. 1012 01:02:03,340 --> 01:02:06,500 Zapamtite, jer smo je rekao datatipom: 'JSON', to nije niz. 1013 01:02:06,500 --> 01:02:09,500 Ovo je već niz za nas. To je stvarno cool. 1014 01:02:09,500 --> 01:02:13,790 Mi jednostavno ne može reći, "Želim da dodati na popis element." 1015 01:02:13,790 --> 01:02:16,000 Mi ćemo ga staviti unutar jednog elementa u dijelu koji, 1016 01:02:16,000 --> 01:02:19,030 dat ćemo mu klasu prijedloge, tako da znamo što je to, 1017 01:02:19,030 --> 01:02:23,880 i sada ovdje je simbol da smo se vratili iz Yahoo! financija. 1018 01:02:23,880 --> 01:02:27,230 >> Nakon što smo stvorili element za svaki od simbola smo stečen natrag, 1019 01:02:27,230 --> 01:02:30,100 mi samo želimo zatvoriti popis. 1020 01:02:30,100 --> 01:02:33,040 Tako sada prijedlozi predstavlja ovaj mali HTML fragment 1021 01:02:33,040 --> 01:02:37,860 da kada se stavi na stranici će biti popis stvari koje smo u potrazi za. 1022 01:02:37,860 --> 01:02:41,070 Sada ćemo zapravo staviti da na stranici. 1023 01:02:41,070 --> 01:02:46,390 Za to sam zapravo stvorio još jedan prazan div i ja sam dao mu ID prijedloga. 1024 01:02:46,390 --> 01:02:52,520 Slično kao što smo postavili sadržaj div koji bi prikaz na cijenu dionica podataka, 1025 01:02:52,520 --> 01:02:58,600 mi smo sada samo želim postaviti sadržaj ove div na ono što ovaj niz je 1026 01:02:58,600 --> 01:03:00,290 koji sadrži te simbole. 1027 01:03:00,290 --> 01:03:07,650 Pomoću ove HTML metodu, ovo prijedlozi varijabla, ovaj niz je niz HTML. 1028 01:03:07,650 --> 01:03:13,490 Želim da se taj HTML i staviti ga unutar div zove prijedlozi. 1029 01:03:13,490 --> 01:03:15,680 Upravo smo u prilogu nešto DOM sada. 1030 01:03:15,680 --> 01:03:20,360 Dodali smo neke nove elemente na DOM da sada možemo prikazati na stranici. 1031 01:03:20,360 --> 01:03:22,540 Idemo vidjeti kako to izgleda. 1032 01:03:22,540 --> 01:03:29,110 Ako smo učitati u quote6, a sada smo se vratiti, 1033 01:03:29,110 --> 01:03:34,480 Sada kada sam početi pisati AAPL, mi više ne moraju da bootstrap samodovršetak, 1034 01:03:34,480 --> 01:03:38,470 ali sada imamo ovaj popis koji smo sami napravili. 1035 01:03:38,470 --> 01:03:43,230 To je malo ružnije nego Bootstrap Typeahead, na primjer, 1036 01:03:43,230 --> 01:03:45,580 ali to ne dopušta nam da to jedna druga stvar. 1037 01:03:45,580 --> 01:03:48,660 Kada smo bili u potrazi na toj Bootstrap plugina, 1038 01:03:48,660 --> 01:03:52,590 Vidjeli smo da kad smo autocompleted, jedan od samodovršetka vrijednosti bio AAPL. 1039 01:03:52,590 --> 01:03:54,820 To možda neće biti tako koristan. 1040 01:03:54,820 --> 01:03:59,100 Kao korisnik, nisam odmah mogao prepoznati sve burzovnih oznaka. 1041 01:03:59,100 --> 01:04:02,370 Što sam vjerojatno više vjerojatno da će prepoznati su tvrtke u stvarni imena. 1042 01:04:02,370 --> 01:04:05,310 Dakle, ne bi bilo stvarno korisno ako umjesto govoreći AAPL 1043 01:04:05,310 --> 01:04:07,970 ovo je nešto kao Apple Inc 1044 01:04:07,970 --> 01:04:12,240 Budući da smo smotani to sami, možemo stvarno lako napraviti. 1045 01:04:12,240 --> 01:04:17,630 Ajmo otvoriti našu posljednju citat datoteku ovdje, tako quote7. 1046 01:04:17,630 --> 01:04:23,200 >> Ista stvar. Upravo sam stvorio još jednu PHP datoteku koja će nam se vratiti više nego samo simboli. 1047 01:04:23,200 --> 01:04:25,550 Također će nam dati natrag tvrtke imena. 1048 01:04:25,550 --> 01:04:28,150 I tako mi radimo istu stvar. Mi smo izradu AJAX zahtjev. 1049 01:04:28,150 --> 01:04:32,370 Nakon zahtjeva je završio, idemo izvršiti ovu funkciju ovdje, 1050 01:04:32,370 --> 01:04:36,520 i ova funkcija će se izgraditi veliki niz elemenata. 1051 01:04:36,520 --> 01:04:39,520 No, razlika je u tome što je vrijednost tih lista više nije samo simbol, 1052 01:04:39,520 --> 01:04:45,370 to je sada naziv. 1053 01:04:45,370 --> 01:04:47,070 Dakle, imamo jedan mali problem. 1054 01:04:47,070 --> 01:04:51,590 Kada smo koristiti naše lookup, moramo nekako proći to simbol. 1055 01:04:51,590 --> 01:04:54,950 Mi ne možemo proći pretraživanja nešto poput Microsoft Corporation. 1056 01:04:54,950 --> 01:04:57,900 Moramo proći ga MSFT. 1057 01:04:57,900 --> 01:05:01,640 Kad pišemo HTML, imamo puno lijepih ugrađeni u atributa. 1058 01:05:01,640 --> 01:05:05,440 Možda su povezane s njim href ili klase. 1059 01:05:05,440 --> 01:05:08,230 Ali ono što mi stvarno trebate sada je za svaki od tih linkova 1060 01:05:08,230 --> 01:05:11,120 imati dionice simbol povezan s njim. 1061 01:05:11,120 --> 01:05:14,240 Nema ugrađeni u HTML atribut za dionice simbol, 1062 01:05:14,240 --> 01:05:21,010 ali srećom, HTML5 omogućuje nam stvaranje vlastite atribute biti što god želimo. 1063 01:05:21,010 --> 01:05:24,620 Govoreći podataka-simbol, ja sam uveo novi atribut 1064 01:05:24,620 --> 01:05:29,350 čije ime sam izmislio, a to je u redu, jer sam ga prefaced s tim podacima. 1065 01:05:29,350 --> 01:05:34,270 Mi ćemo pohraniti unutar postojanja simbola iz zaliha sada. 1066 01:05:34,270 --> 01:05:39,590 Što to znači da, iako smo prikazujući vrijednost imenom tvrtke 1067 01:05:39,590 --> 01:05:43,380 unutar naše samodovršetak, mi smo još uvijek sjećati simbol 1068 01:05:43,380 --> 01:05:47,110 koji je povezan sa svakim mjestu. 1069 01:05:47,110 --> 01:05:50,350 Način radimo da je unutar tog elementa samog. 1070 01:05:50,350 --> 01:05:52,930 Dakle, to znači da moramo napraviti još jednu promjenu. 1071 01:05:52,930 --> 01:05:57,090 Kada smo ga kliknete sada, trebamo zapravo iskoristiti simbol atribut 1072 01:05:57,090 --> 01:06:00,220 nego samo njegova vrijednost. 1073 01:06:00,220 --> 01:06:05,010 Ako mi natrag gore, mi priključiti rukovatelj događaja za prijedloge. 1074 01:06:05,010 --> 01:06:09,280 Kada jedan od tih prijedloga je kliknuo sada, želim učiniti nešto. 1075 01:06:09,280 --> 01:06:13,160 Ono što želim učiniti je promijeniti vrijednost tog okvira za unos. 1076 01:06:13,160 --> 01:06:16,100 Sada želim postaviti ovu istu val funkciju. 1077 01:06:16,100 --> 01:06:21,060 >> Dakle, bez ikakvih argumenata ovo Val funkcija vraća vama ono što je već u tekstualni okvir, 1078 01:06:21,060 --> 01:06:27,070 ali ako ga dati niz, to će se taj niz i staviti ga u okvir za tekst. 1079 01:06:27,070 --> 01:06:28,980 Ja sam odabirom svoj tekstualni okvir na isti način. 1080 01:06:28,980 --> 01:06:31,230 To ime je simbol unutar obrasca-citat. 1081 01:06:31,230 --> 01:06:37,540 Sada Šaljem mu vrijednost atributa podataka simbola. 1082 01:06:37,540 --> 01:06:41,560 Ova stvar ovdje je novi, ovaj $ (ove). 1083 01:06:41,560 --> 01:06:46,850 Što ovo se odnosi na je element koji je kliknuo. 1084 01:06:46,850 --> 01:06:50,880 Možemo vidjeti da se ovdje nećemo pridaje klik događaj 1085 01:06:50,880 --> 01:06:54,690 svakom elementu s klasi prijedlog pojedinačno. 1086 01:06:54,690 --> 01:06:57,140 Umjesto toga, mi smo se približava to malo drugačije. 1087 01:06:57,140 --> 01:07:01,700 Umjesto toga, mi govoriš kad ništa unutar ove prijedloge div, 1088 01:07:01,700 --> 01:07:04,080 koja zapamtite je samo kontejner za taj popis, 1089 01:07:04,080 --> 01:07:10,150 ako se nešto unutar ovog div se klikne i ima klasu prijedlog, 1090 01:07:10,150 --> 01:07:13,000 Želim ovaj događaj na vatru. 1091 01:07:13,000 --> 01:07:17,490 Uglavnom ono što to znači možemo učiniti je da možemo ponovno taj isti događaj rukovatelj 1092 01:07:17,490 --> 01:07:20,000 za sve stvari u popisu. 1093 01:07:20,000 --> 01:07:22,080 Dakle, mi ne imati jedan događaj rukovatelj za prvi element 1094 01:07:22,080 --> 01:07:24,550 i drugačiji događaj rukovatelj za drugi element. 1095 01:07:24,550 --> 01:07:29,880 Mi umjesto toga može reći, "Želim isti događaj rukovatelj primjenjivati ​​na sve što je u mojoj listi". 1096 01:07:29,880 --> 01:07:34,420 No, moramo nekako znati koji je element kliknuli. 1097 01:07:34,420 --> 01:07:38,450 To je "to" ključna riječ predstavlja upravo to. 1098 01:07:38,450 --> 01:07:42,360 Ovo je objekt koji je upravo kliknuli od strane korisnika. 1099 01:07:42,360 --> 01:07:47,680 Ako sam samo kliknuo treći link, to predstavlja element tog treći link, 1100 01:07:47,680 --> 01:07:51,670 što znači da mogu dobiti svoje atribute, podaci-simbol, 1101 01:07:51,670 --> 01:07:57,760 što znamo je da sadrži simbol koji je povezan s tvrtkom Upravo sam kliknuo. 1102 01:07:57,760 --> 01:08:04,550 Ako skočimo natrag na našoj stranici financije, 1103 01:08:04,550 --> 01:08:08,580 možemo vidjeti da sada kada sam početi pisati nešto poput MSFT, 1104 01:08:08,580 --> 01:08:11,220 mi više ne uzimajući samo dionica simbole, 1105 01:08:11,220 --> 01:08:13,720 mi smo sada uzimajući stvarne tvrtke. 1106 01:08:13,720 --> 01:08:20,410 No, kada sam kliknite na jedan od ovih tvrtki, 1107 01:08:20,410 --> 01:08:25,180 možemo vidjeti da mi zapravo naseljavanja tekstualni okvir ne s imenom tvrtke 1108 01:08:25,180 --> 01:08:29,850 ali što god je pohranjena unutar tih podataka atributa. 1109 01:08:29,850 --> 01:08:32,880 I tako, ako sam zapravo pregledajte jedan od ovih elemenata desnim klikom ga 1110 01:08:32,880 --> 01:08:36,200 i klikom Pregledajte Element, zapravo možemo vidjeti kako to izgleda. 1111 01:08:36,200 --> 01:08:40,290 >> Zapamtite ovo je nešto što smo stvorili unutar koje za petlje 1112 01:08:40,290 --> 01:08:42,649 kada smo bili izgradnji taj niz HTML. 1113 01:08:42,649 --> 01:08:47,870 Možemo vidjeti da se ovdje podataka simbol ima vrijednost MSFT, što je sjajno. 1114 01:08:47,870 --> 01:08:49,189 To je ono što smo očekivali. 1115 01:08:49,189 --> 01:08:53,170 To je simbol, a to je kako smo dobili vrijednost koju je potrebno koristiti 1116 01:08:53,170 --> 01:08:56,140 unutar tog tekstualnog okvira. 1117 01:08:56,140 --> 01:08:58,850 To je dovoljno za citat obliku, jer to je vrsta dosadno. 1118 01:08:58,850 --> 01:09:02,990 Ajmo napraviti neke brze poboljšanja našeg portfelja stranici. 1119 01:09:02,990 --> 01:09:08,109 Ako ste koristili CS50 Financije za neko vrijeme, a vi početi kupnje i prodaje puno dionica, 1120 01:09:08,109 --> 01:09:11,300 na kraju ova tablica će dobiti prilično velika, 1121 01:09:11,300 --> 01:09:13,850 i ti si idući u ištanje Stock Ticker, naravno. 1122 01:09:13,850 --> 01:09:20,350 Nakon što je stol je jako, jako velika, to bi moglo biti korisno za korisnika pokušati potražiti preko njega. 1123 01:09:20,350 --> 01:09:23,290 Unutar okvira za pretraživanje, ako sam početi tipkati nešto poput Disneya 1124 01:09:23,290 --> 01:09:26,359 i potrazi za moj Mickey Mouse skladištu, možemo vidjeti da je stol sada filtriranje 1125 01:09:26,359 --> 01:09:28,189 na temelju onoga što sam upravo upisali u. 1126 01:09:28,189 --> 01:09:31,640 Ova funkcionalnost izgleda super komplicirano, ali to je jako, jako jednostavan 1127 01:09:31,640 --> 01:09:33,859 s jQuery i JavaScript. 1128 01:09:33,859 --> 01:09:39,189 Ovo portfolio.php datoteka sadrži JavaScript datoteku pod nazivom portfolio.js. 1129 01:09:39,189 --> 01:09:41,130 Idemo pogledati to. 1130 01:09:41,130 --> 01:09:44,890 Dakle, html, js, portfelj. 1131 01:09:44,890 --> 01:09:49,210 Evo gdje radimo da traži na stolu. 1132 01:09:49,210 --> 01:09:52,750 Prva stvar koju trebate učiniti je priključiti događaj rukovatelj tog tekstualnog okvira 1133 01:09:52,750 --> 01:09:55,760 jer znamo da želimo naš filtriranje funkcija na vatru 1134 01:09:55,760 --> 01:09:59,800 svaki put korisnik pritisne nešto, jer nemamo vremena za pretrage gumbima. 1135 01:09:59,800 --> 01:10:03,000 Prva stvar koju trebate učiniti je shvatiti što je korisnik u potrazi za, 1136 01:10:03,000 --> 01:10:04,780 baš kao što smo radili prije. 1137 01:10:04,780 --> 01:10:11,320 Ova ključna riječ se odnosi na trenutnu elementa je korisnik u interakciji s. 1138 01:10:11,320 --> 01:10:14,070 >> Budući da je korisnik u interakciji s okvir za pretraživanje, 1139 01:10:14,070 --> 01:10:17,020 $ To predstavlja okvir za pretraživanje, 1140 01:10:17,020 --> 01:10:21,820 tako this.val nam daje ono što je unutar okvira za pretraživanje korisnik trenutno upisujete. 1141 01:10:22,810 --> 01:10:27,320 Dakle, sada ono što želimo učiniti je želimo ponoviti nad svim redovima 1142 01:10:27,320 --> 01:10:29,240 unutar našeg stola. 1143 01:10:29,240 --> 01:10:35,630 Da biste odabrali sve retke u našem stolu, dao sam toj tablici ID stolni portfelja, 1144 01:10:35,630 --> 01:10:39,060 i svaki redak zastupa TR elementa, 1145 01:10:39,060 --> 01:10:42,080 tako da je ovo selektor će se vratiti za mene velika polja 1146 01:10:42,080 --> 01:10:44,370 svih redaka u mojoj tablici. 1147 01:10:44,370 --> 01:10:47,010 Sada želim ponoviti tijekom tog polja. 1148 01:10:47,010 --> 01:10:52,390 Mogao bih vam za petlju, ali jQuery zapravo daje nam lijep funkciju pod nazivom "svaka." 1149 01:10:52,390 --> 01:10:55,220 Što svaki se je svaki traje jedan argument, 1150 01:10:55,220 --> 01:10:57,090 i da je argument funkcije. 1151 01:10:57,090 --> 01:11:02,760 Što će to učiniti je da će primijeniti tu funkciju za svaki element unutar ovog popisa. 1152 01:11:02,760 --> 01:11:05,550 Ova funkcija uzima jedan argument da e, 1153 01:11:05,550 --> 01:11:10,090 i kad je ova funkcija se izvršava, ovaj e će biti zamijenjen sa prvom redu, 1154 01:11:10,090 --> 01:11:12,070 zatim drugi red, a zatim treći red. 1155 01:11:12,070 --> 01:11:15,150 Po ovom putu, to je ista stvar kao što je trčanje za petlje 1156 01:11:15,150 --> 01:11:21,360 a zatim figuring trenutni elementa na temelju indeksa unutar vašeg za petlju. 1157 01:11:21,360 --> 01:11:24,750 U svakoj iteraciji, za svaki od tih elemenata u tablici, 1158 01:11:24,750 --> 01:11:30,560 Želim da provjerite je li tekstu elementa - tekst u ćeliji unutar reda - 1159 01:11:30,560 --> 01:11:33,130 odgovara onome što sam u potrazi za. 1160 01:11:33,130 --> 01:11:36,390 Ovaj veliki dugi niz naredbi je kako sam mogao to učiniti. 1161 01:11:36,390 --> 01:11:40,900 Prvo, opet, to je sada odnosi se na - jer je unutar novog funkcije - 1162 01:11:40,900 --> 01:11:45,020 ovo je sada trenutni redak u tablici. 1163 01:11:45,020 --> 01:11:47,340 Želim da se trenutni redak u tablici, 1164 01:11:47,340 --> 01:11:49,950 i želim da biste dobili sve svoje djece. 1165 01:11:49,950 --> 01:11:51,940 Zapamtite, DOM je hijerarhijski stablo, 1166 01:11:51,940 --> 01:11:54,200 što znači da elementi imaju broj djece. 1167 01:11:54,200 --> 01:12:00,180 >> Ovo. Djeca funkcija će vratiti k meni nazad niz sve elemente 1168 01:12:00,180 --> 01:12:03,240 da su djeca, u ovom slučaju, red u tablici. 1169 01:12:03,240 --> 01:12:07,150 To je jednostavno stanice unutrašnjost zaredom. 1170 01:12:07,150 --> 01:12:09,230 Ja samo želim pretraživati ​​prvu ćeliju. 1171 01:12:09,230 --> 01:12:13,090 Ovo. Prvi funkcija kaže dajte mi prvi element u tom polju. 1172 01:12:13,090 --> 01:12:17,070 Zatim tekst funkcija kaže me točno ono što je unutar te ćelije 1173 01:12:17,070 --> 01:12:19,530 jer želim tražiti preko tog teksta. 1174 01:12:19,530 --> 01:12:21,040 Konačno, neka je pretvoriti ga u mala slova, 1175 01:12:21,040 --> 01:12:23,940 tako da možemo učiniti tekstualne velika i mala slova upita. 1176 01:12:23,940 --> 01:12:29,990 Konačno, želimo vidjeti ako je to niz unutar tablice sadrži niz smo tražili. 1177 01:12:29,990 --> 01:12:32,980 IndexOf funkcija u JavaScriptu ne samo to. 1178 01:12:32,980 --> 01:12:37,060 To nam govori da li ili ne ovaj niz sadrži još niz. 1179 01:12:37,060 --> 01:12:40,150 Ako je istina da je stanica sadrži ono što sam u potrazi za, 1180 01:12:40,150 --> 01:12:42,140 onda želim da biste bili sigurni da je prikazan. 1181 01:12:42,140 --> 01:12:45,330 Metoda show će reći, "Pokaži element." 1182 01:12:45,330 --> 01:12:50,350 Ako to nije slučaj, onda to znači da je sve što sam u potrazi za nije sadržavao 1183 01:12:50,350 --> 01:12:53,550 u tom redu, i tako želim da se sakriju je od korisnika. 1184 01:12:53,550 --> 01:12:59,240 To se postiže da se lijepo filtriranje učinak gdje više ne vidimo cijelu tablicu. 1185 01:12:59,240 --> 01:13:01,480 Ako vas zanima kako napraviti ovu oznaku kao dobro, 1186 01:13:01,480 --> 01:13:04,180 ćemo objaviti izvor online. No, to je stvarno jednostavan. 1187 01:13:04,180 --> 01:13:09,860 JQuery ima strašan metode za ove animacije i manipuliraju CSS svojstva. 1188 01:13:09,860 --> 01:13:11,020 Dakle, to je to za mene. 1189 01:13:11,020 --> 01:13:15,560 >> Što onda čeka? Kao što ćete vidjeti u nekoliko dana, konačni projekti prijedlog zbog. 1190 01:13:15,560 --> 01:13:17,730 Konačni prijedlog projekti će vam postaviti nekoliko pitanja, 1191 01:13:17,730 --> 01:13:19,420 , ali među njima će biti i tri prekretnice - 1192 01:13:19,420 --> 01:13:22,840 jedan "dobar" prekretnica, jedna bolja prekretnica, a jedan najbolji. 1193 01:13:22,840 --> 01:13:25,870 Ideja je zaista pomoći vam dečki postaviti očekivanja 1194 01:13:25,870 --> 01:13:29,160 tako da minimalno ćete biti zadovoljni s izlazom vašeg konačnog projekta 1195 01:13:29,160 --> 01:13:32,060 i to će biti "dobar" tako daleko ste zabrinuti. 1196 01:13:32,060 --> 01:13:34,540 No, tada je u interesu dobivanje ste do samo malo nešto bolje 1197 01:13:34,540 --> 01:13:37,680 ili nešto najbolje, također ćemo sortirati od vas gurnuti prema tome kao dobro. 1198 01:13:37,680 --> 01:13:40,660 The CS50 Hack-a-Thon, u međuvremenu, u nekoliko tjedana. 1199 01:13:40,660 --> 01:13:44,340 Tipično, to činimo na temelju lutriji osnovi zbog interesa, 1200 01:13:44,340 --> 01:13:47,680 ali izgledi su mi ćemo uzeti nekoliko stotina nas je u shuttle autobusima iz Harvard Squareu 1201 01:13:47,680 --> 01:13:51,540 do Trga Kendall gdje Microsoft ima prekrasan objekt prigodno nazvan "NERD" - 1202 01:13:51,540 --> 01:13:53,830 Istraživanje New England i Centar za razvoj. 1203 01:13:53,830 --> 01:13:56,380 Mi ćemo doći oko 20:00 ćemo imati neku hranu. 1204 01:13:56,380 --> 01:13:58,160 Oko 01:00 ćemo imati neke više hrane. 1205 01:13:58,160 --> 01:14:02,150 Oko 05:00, ako ste još uvijek budni ćemo nad glavom IHOP ili vas odvesti natrag na kampusu. 1206 01:14:02,150 --> 01:14:04,380 Cilj je da se upustim u posljednjim projektima 1207 01:14:04,380 --> 01:14:06,190 pored kolege i osoblje. 1208 01:14:06,190 --> 01:14:08,280 Potom je nekoliko dana kasnije je CS50 sajam, 1209 01:14:08,280 --> 01:14:10,990 koja stvarno je značilo da se prilika za vi da pokažete svoj rad 1210 01:14:10,990 --> 01:14:12,700 i postignuća za semestra 1211 01:14:12,700 --> 01:14:15,610 dok trljanje ramena jedni s drugima i uzimajući osjećaj za ono što svatko učinio. 1212 01:14:15,610 --> 01:14:17,850 Sa taj je rekao, mnogi zahvaljujući Tommyja i Josipu, 1213 01:14:17,850 --> 01:14:19,960 a mi ćemo vas vidjeti u ponedjeljak. 1214 01:14:19,960 --> 01:14:24,070  [Pljesak]