[Powered by Google Translate] [Tjedan 9, Nastavak] [David J. Malan - Sveučilište Harvard] [Ovo je CS50. - CS50.TV] 

Ovo je CS50. To je kraj tjedna 9. Puno hvala. Konačno. Tjedan 9. Ja ga dobio. Danas ćemo nastaviti naš razgovor o web programiranju s okom prema konačnom projektu, a ne zato što morate učiniti nešto web-based za završne projekte, ali zato ni za konačnih projekata ili nakon CS50 ovo je svakako smjer u kojem moderna softver ide. Pa ipak, to je zapravo nije jednostavna stvar. U stvari, jedna od najtežih stvari koje treba učiniti je aspekt dizajna. 

Na primjer, po dizajnu mi zapravo znači dobivanje korisničko sučelje ili korisničko iskustvo u pravu. Ja pretpostavljam - i mi znamo iz nedavne problema setu kad neki od vas emitiran svoje trbušni grčevi o nekom komad softvera ili hardver koji vam infuriates, da li na kampusu ili izvan - postoji puno web-mjesta vani, postoji puno hardvera vani, takav je sranje. No, stvarnost je da čine stvari koje su jednostavno za korištenje, ali su ipak moćan je vrlo težak izazov. Tako je za danas sam pitao Josip i Tommy mi se pridružiti ovdje tako da možemo razgovarati, kako o dizajnu i što vrste misaonih procesa trebala početi prolazi kroz glavu kada dizajnirati svoje konačne projekte, buduća nastojanja. A onda s Tommyjeva pomoć ćemo pogledati neke od provedbenih detalja. Kako možete imati neku viziju na papiru ili u glavi da možete izvršiti programski pomoću neke od tehnologija i tehnika upravo smo počeli govoriti o, naime JavaScript i nešto još novije, naime AJAX, Asinkroni JavaScript. To vam omogućuje da stvorite sve više dinamike i korisničko sučelje po dobavljanje više i više podataka progresivno s poslužitelja. Pa ćemo vidjeti neke od tih isječaka, kao i danas. Kao na stranu, ako ste zainteresirani u koncentraciji u informatici ili minoring u informatici, znam da je ovaj petak u podne u Maxwell Dworkinu 221 održat će se manifestacija pizzu gdje možete naučiti nešto više o informatici. Na putu iz vrata danas ćete biti u mogućnosti pokupiti neslužbeni vodič za CS na Harvardu. Mi ćemo ga staviti na kantama za smeće izvan na visini struka tako da ako želite da iskoristite ovu i naučiti nešto više o CS, koja će biti tu za vas, kao što je bio u tjednu 0. Također, ako želite da nam se pridružite za ručak CS50 ovaj petak u 13:15, glavu cs50.net/lunch. Bez dodatnih teškoća, dajem vam demonstrator Joseph Ong. Bok. [Pljesak] Hvala. Kad sam prvi put saznao o dizajnu bio u klasi ovdje zove CS179. 

Profesor na vrijeme rekao nam priču o drugom profesora koji je otišao u hotel, a koristi se pipa. Može bilo tko reći mene što je dva gumba na lijevo i desno učiniti? [Student] topla i hladna. >> Topla i hladna. Dobro. Ono što se obično očekuje, zar ne? Ovaj profesor nakon korištenja pipa želi istuširati, a on nastavlja koristiti. On misli da lijeva i desna strana su za toplo i hladno, zar ne? No, može bilo tko reći mene što to zapravo učiniti? Bilo ruke? [Nečujno učenik odgovor] >> Jedan prijedlog je? [Nečujno učenik odgovor] >> Temperatura? Tako jedan od njih kontrolira temperaturu i ostale kontrole? >> [Student] pritisak vode. Tlak vode. Dobro. Ovaj profesor uđe u to i, misleći da su kontrole topla i hladna, Ispada onu pravu, koja misli da je za vruće, pa sve do jer on želi da se toplim tušem. Pa, to stvarno ne podudaraju, tako da on dobiva ovo nije jako zabavno iskustvo bivanja u hladan tuš, a svi znamo što to osjeća kao. Ovo je primjer dizajna mana. Što mislim da je njegova očekivanja od pipa ne odgovara što je izašao iz tuša, koja je vrsta nesretni za njega. Dakle, ovo je primjer dizajna mana što se događa u stvarnom životu. Ali smo vidjeli svakakve one druge kao dobro. Mi smo vjerojatno nije obožavatelji MBTA sustava. Ovo je metro sustav zapravo u Londonu, koji kaže: "Ovaj gumb nije u uporabi." Zašto je to još na tu? Zašto smo čak i briga? Kad sam bio klinac, kao tech pamet jedna u kući, kad računalo će se srušiti, moja mama će doći do mene, pokazujući mi ovaj ekran i me pitaju što se dogodilo. 

Čak i ne znam što to znači. [Smijeh] Što? [Smijeh] Ponekad se osjećamo kao programerima su samo trolling nas. Kao korisnici smo kao, "Što se događa? Netko nam reći." To sve se svodi na problem dizajna. Dizajn, kao što možemo vidjeti, nije čisto o estetici, se ne radi o tome kako stvari izgledaju. Ovdje vidimo da je ovaj mali pop-up ovamo zapravo izgleda prilično lijepo. Ona ima drop shadow u pozadini, ima granične polumjerima događa. To je vrsta prilično. To nije jako dobro osmišljen, jer to nije vrlo user friendly. Taj mali pop-up koji dolazi zapravo ne daj mi bilo kakve informacije o tome što se događa, to ne govori mi ništa kao korisnika o tome kako da se oporavim od tog pogreške. Mi želimo razmišljati o stvarima koje dizajn nije. Prvo, to nije estetika. To je također ne nadev svoju aplikaciju s tona nepotrebnih funkcionalnosti. Ako ste tajlandski restoran, vjerojatno ne želite biti zubar u isto vrijeme. A s Facebooka pitanja, a ne da se mnogi ljudi ga koriste i to nije bio stvarno u srži onoga što su gradili. I tako je lijepo razmišljati o ne toliko količinu stvari da ste stavljanjem na svoj zahtjev, ali kvaliteta i kako radite to bolje korisničko iskustvo a zapravo poboljšanje na ono što već imate. 

U Ukratko, dizajn govori nam ono što smo trebali graditi. Na primjer, ako gradimo nešto što neka nas traži stvari, poput Googlea, na primjer, trebali smo raditi stvari na način koji zahtijeva korisnik to uzeti puno klikova doći do onoga što žele, ili bi mi to učiniti na način, na primjer, s Google Instant ili samodovršetka koji nam omogućuje doći do naših rezultata brže? Inženjering uključuje, kao i Tommy će vam pokazati, zapravo gradi. Postoji puno vrsta dizajna. Na primjer, ako ste izgradnju nešto za implementaciju nešto u zemlje Trećeg svijeta gdje nema puno struje ili da je mnogo tehnologija, morate dizajnirati ono što ste izgradnju na način da se lako daje pristup ljudima tamo. No, ono što vrste drugih dizajnerskih odluka bi moglo biti ili može biti uključen u ovako nešto? Da. Vidim ruku. [Nečujno učenik odgovor] >> Točno. Točno. Pristup je jedna stvar. Puno ljudi ne razmišljaju o tome, "Što je s mojim korisnicima?" kao krajnosti bilo spektra. Imam korisnike koji bi mogli imati poteškoće da ja ne razmišljam o tome a ja samo razmišljam o projektiranju za opće korisnika. Internet je dostupan svima danas, i ja bi trebao biti projektiranja za one ljude kao dobro. Koje vrste drugih dizajnerskih odluka može napraviti? Da. >> [Student] troškova. Trošak. Vrlo dobro. Još jedna stvar koju možemo temeljiti naše dizajnerske odluke o su trošak. Ako smo posao, želite izgraditi nešto što ne uzima puno troškova za proizvodnju ali se može prodati po izuzetno visokim troškovima ili može doći nam neki profit. 

To su sve različite vrste dizajna, ali kada smo izgradnju nešto na internetu ili kad smo izgradnju nešto što vjerojatno ne košta toliko izgraditi do sada, poput Internet aplikacija - ne morate baciti puno kapital u nju kako napraviti nešto što zapravo radi - što smo više zabrinuti je korisničko iskustvo. Mi to zovemo korisnički usmjeren dizajn. U suštini ono što korisnik usmjeren dizajn uključuje se sami stavljanjem u cipele svojih korisnika. Ako netko prijavi za ono što sam izgradnju, oni očito ste došli na moj određenu primjenu s ciljem na umu, sa zadaćom da žele završiti. I vaš posao je ne samo da im pomogne dovršiti taj zadatak ali da im pomogne dovršiti taj zadatak na način koji je učinkovit, intuitivno, i, kao što neki čovjek rekao tamo, dostupni. Što učinkovitost znači? Učinkovitost znači koliko brzo se moj korisnički dovršiti zadatak dao moj sučelje. Da li je potrebno puno klikova za njih da se iz jednog mjesta na drugo? Je li to zamorno? Da li oni moraju izvršiti puno zadatke koji se ponavljaju? Želimo da se taj proces što učinkovitiji tako da oni ne moraju raditi te svašta. Kao i za intuitivnost, da je, na primjer, ako korisnik traži moj sučelje, da je to lako za njih da se od mjesta do mjesta? Je li to lako za njih shvatiti što oni imaju kliknuti na mom sučelju kako bi za njih da bi se postigao cilj ili zadatak koji žele postići? 

I na kraju, kao jedna osoba rekla tamo, dostupnost je vrlo važno. [Muškarac govornik] To pitanju pristupačnosti za stvari kao što su vizije, Sviđa mi se kako mi je zapravo dizajnirati nešto za nekoga tko je slijep? Oh. Za ljude koji ne mogu vidjeti na sve, mi imamo nešto što se zove ekran čitatelji. Što trebate učiniti je da treba graditi svoju web stranicu na način da, na primjer, pojedine tehnologije ono što mi zovemo - Postoji puno stvari sada. Mislim da postoje screen čitatelji nazivaju JAWS. Puno tih stvari se oslanjaju na ono što mi zovemo area pravila kako bi se očitati na korisnika što je prisutan na stranici. Za one ljude koji ne mogu vidjeti, trebate kako bi bili sigurni da su ti screen čitatelji zapravo može pokupiti sadržaja na stranici, a zapravo može pokazati svoje korisnike, ako ne možete vidjeti, barem još uvijek možete razumjeti sadržaj na stranici. Da. Ok. Dosta se govori o dobrom dizajnu. Ajmo pričati o lošem dizajnu. To su stvari koje ne biste trebali učiniti. Može li mi itko reći o svojim iskustvima s Craigslist i ono što oni misle da je ne tako veliki o ovom dizajnu? Da. >> [Student] Mislim da je previše riječi u jednom području. Previše riječi, zar ne? Potpuno neodoljiv. Vi dolazite na ovu stranicu i da ste dočekali s cijela hrpa stvari ovdje da možda čak i ne smeta ti. Na primjer, ako živite u jednoj državi koja ne počinju s tim slovom. Recimo da žive u Teksasu ili nešto. 

Morate pomicati skroz dolje na stranici da se na mjesto koje su u. Ja sam iz Bostona, pa neka me gledati u Massachusettsu. Gdje je Massachusetts? Oh, to je upravo ovdje. Oh, to je Boston. Ok. Pogledajmo Bostonu. [Smijeh] Prilično velika, zar ne? Nespretne stvari tamo. [Smijeh] Recimo ja sam u potrazi za negdje živjeti. Koliko ljudi zapravo koriste Craigslist? Tona vas. Tu su prilično loši načini da pogledate ovo, ali pogledajmo to. Koja je razlika između IMG i PIC? Može bilo tko reći mene? Tu je zapravo nema razlike. Oni znače istu stvar, ali oni imaju različite naljepnice za njih iz nekog razloga. Ako sam kliknite na sliku Je, ništa se ne događa na stranici. Ja sam zapravo morati kliknuti Pretraži ponovo da se nešto dogodi. Što bi moglo biti bolje dizajn odluka koje bi mogle biti učinjeno tamo? Ako sam klikom na taj filter, ja vjerojatno želite filtrirati po toj akciji ili da određenu kategoriju. Dakle, umjesto da pritisnite Search opet, mogao sam samo automatski učiniti filtriranje vrsta Google stilu gdje su to učiniti odmah. [Malan] Ali ne čini kao što smo ih vidjeli do sada morati fizički biti podnesen skom Unesite barem ili pritiskom na gumb? Kao što ste ih vidjeli do sada, vi ste zapravo morati kliknuti Submit učiniti te stvari. 

No, kao i Tommy će vam pokazati u drugi, zapravo postoje načini za vas tako da kada kliknete na tu stvar može automatski poslati ono što mi zovemo AJAX zahtjev i dobiti podatke natrag te filtrirati rezultate odmah. Postoji tona stvari koje su u redu s tom sučelju. [Malan] Može li tražiti Cambridge? Ima nešto malo anomaliju ovdje gdje vam je stalo Cambridge i još ste uzimajući Westford, Spring Hill, West Newton i slično. Vjerojatno nije idealno. >> Vjerojatno nije idealno. Kako bih mogao biti u mogućnosti da korisnikov doživljaj bolje na toj stranici? Da. >> [Student] Upute. Ok. Upute za kakav smislu? [Student] Na primjer, stvar za prvi put korisnici koji uopće ne znaju što je Craigslist ili ne znaš što bi trebao učiniti. Točno. Dakle, objašnjavajući što Craigslist je na ovoj stranici je važno. Mi zapravo može reći korisnicima što ova stranica je zapravo za. Ako sam samo posjetite ovaj, vidim hrpu mjesta. Ja uopće ne znam što to znači. No, što je još važnije, samo gleda na ovom sučelju, zapamtite sam morao pomicati prema dolje tonu stvari kako bi pronašli određenu zajednicu da sam zapravo stalo na tome. Što je brži način na koji sam mogao to učiniti? Da. [Student] ih podijelite gore u Istok, Zapad regijama. >> Ok. Mogao sam ih podijeliti u više kategorija koje bi mogle pomoći mi brže odrediti kako doći do tog mjesta. [Student] Stavite padajućeg popisa. >> Točno. Ok. Mogao sam koristiti padajući izbornik jer imamo fiksni skup stvari i mogli smo ih prikazati u padajućem izborniku. Na taj način ne zauzimaju toliko prostora na ekranu. No, čak i bolje od toga, što možemo učiniti? Da. >> [Nečujno učenik odgovora] >> Može li se reći da je opet? >> [Student] Okvir za pretraživanje. Da, okvir za pretraživanje. To je super. Ono što mi zapravo možemo učiniti je, ako se osvrnemo na toboganima, okvir za pretraživanje. Autocomplete. Vrlo jednostavan način pretraživati ​​kroz rezultate koje znate da su u setu. Ako sam početi pisati BO, samo mi pokazati sve rezultate koji imaju BO unutar njih. Na taj način mogu vrlo lako pronaći određeni jednom želim ići na umjesto da se pomicali kroz zaista velikom popisu. 

Ovo su sve vrste stvarno nisko-vješanje voće da netko tko provodi Craigslist zapravo može učiniti kako bi iskustvo na web stranici puno bolje za njihovu pojedinog korisnika. Ok. Dosta se govori o lošim web stranice. Ajmo pričati o Facebooku. Kada Facebook izašao, a posebno Facebook fotografije, bilo je puno drugih službi u vrijeme koje bi mogao učiniti točno iste stvari. Oni mogu organizirati svoje fotografije u albume. Što možete učiniti je da bi mogao organizirati ih u setovima, kao dobro. Možete ih organizirati po datumu. Ti bi mogao učiniti sve ove određene stvari. Ali ne bilo tko znati što je napravio Facebook fotografije eksplodirati u trenutku kad je objavljena? Da. >> [Student] oznaka. >> Tagova. Točno. Imamo Milo ovamo, koji je naš pas maskota s tom CS50 maramica. Možete vidjeti da imamo ovu označavanja u sredini. I ono što je napravio Facebook fotografije tako zanimljivo iz upotrebljivost stajališta je da je to zapravo dopustio ljudima putem ovog uključiti svoje prijatelje u svojim fotografijama. Za Facebook, budući da je njihova web stranica je posebno društveni, riječ je o izgradnji ovu vrstu društvene atmosfere. To poboljšao doživljaj fotografije puno više jer su oni zapravo mogli početi govoreći: "Ovo su veze između ljudi, a to su slike o ljudima što je zapravo stalo. " Dio toga je i svojevrsna narcizam. Ljudi vole biti označeni na fotografijama i tome slično. Iako to nije nužno dobar ljudsku osobinu, u isto vrijeme to na temelju dobrih dizajnerskih odluka jer ljudi zapravo stalo stvari kao što je ovaj. Tako da je Facebook fotografije. 

No, pričajmo Facebook više općenito. Siguran sam da puno ljudi ovdje imaju mišljenje o Facebooku, oba dobri dizajn odluke i loše dizajnerske odluke. Dakle, neka je oduška ili biti sretan. Hajde. Znam sve vas koristiti Facebook. Netko mora imati nešto loše za reći ili nešto dobro za reći o tome. Da. [Student] U feed postoji puno stvari koje sam ne stvarno stalo. Vijest hrane ne pokazuje puno stvari koje možda ne stalo. Imate prijatelje na Facebooku koji niste ispunjeni za dvije ili tri godine i vidjet ćete njihove vijesti Rezultati iskakanje gore u svoj feed a ne stvarno briga o tome. Facebook je zapravo napravio napor kako bi to bolje, a oni zapravo sam pokušao gurnuti relevantne rezultate na vrhu feed kao što je kasno tako da zapravo vidi stvari kod prijatelja koji su relevantni za vas ili vaših bliskih prijatelja. Sve drugo? Da. [Nečujno studentski odgovor] >> Može li se reći da je opet? [Student] oglasi su relativno nenametljiv. >> U kojem smislu? [Nečujno učenik odgovor] Oni nemaju svjetlo na zaslonu, kao i transparentima. Ok. To je dobro. Ako se sjećate Interneta iz 90-ih - >> [Malan] Bio sam tamo. >> On je bio tamo. [Smijeh] Možda se sjetiti treperi Animacije pozadine, sparkly stvari, GeoCities stilu vrsta stvari. To je stvarno nije primjer dobrog dizajna jer to je stvarno zbunjujući iz sadržaja. Web Yale umjetnost koristi imati animiranih GIF kao svoju pozadinu i nisi mogao pročitati ništa na stranici, ali pretpostavljam da je netko zapravo razgovarao s njima, a sada je malo drugačija. [Malan] To je puno bolje. >> To je puno bolje sada, kao što možete vidjeti. >> [Malan] Oh yeah. Samo super, samo - Da. Ok. 

Dio toga je i izrada vaša stranica eventualno vrlo minimalistički i vrlo razumljivo tako stvari na stranici toka na način da je vrlo logično i ne dobijete na putu jedni druge. Koje vrste drugih stvari su dobro o Facebooku ili loše o Facebooku? Ajmo imaju dizajn razgovor ovdje. Oh. Gdje? Da. [Student] novi Timeline sustav omogućuje pretraživanje na profil osobe o svojoj prošlosti. Ooh, Timeline. Timeline je velika stvar, jer to omogućuje vam stabljika svoje prijatelje natrag kad su bili u srednjoj školi. Timeline je dobar jer omogućuje filtriranje kroz sadržaj puno brže, to omogućuje vam stvari koje bi inače poduzimaju vam stvarno dugo vremena da pronađete samo pomicanjem gore i dolje, gore, gore, gore, gore, gore, kao ide natrag u vrijeme. No, onda je također svojevrsni minus na to u smislu korisničko iskustvo. Što bi to moglo biti? Big riječ koja počinje sa P-R. >> [Student] Zaštita. >> Zaštita, zar ne? Zaštita je veliki problem korisničko iskustvo. To je jedna od stvari koje ja mrzim najviše o Facebooku sada. [Smijeh] [Malan] Kao ja sada. David nije znao to zapravo nije dogodilo sve do jučer. Dakle, sada zna da svaki put kad sam ga razgovor Znam da me ignorira. [Malan] nespretan dio mi je zapravo ga ignoriraju, a ja ne znam znao sam ga ignoriraju. [Smijeh] Zaštita je veliki problem. Može li itko ovdje mi reći što bi moglo biti loše o Facebooku privatnosti osim činjenice da rade stvari kao što je ovaj? Što je to posebno teško raditi s obzirom na Facebook privatnost? Takvo je vodeći pitanje. Da. >> [Student] Sakrij svoje fotografije s određenim ljudima. Točno. Točno, sakriti svoje fotografije s određenim ljudima. Oni imaju ovaj mali, mali gumb u gornjem desnom kutu koji vam omogućuje prebacivanje privatnost fotografiju. Njihova privatnost opcije vrlo su različiti između različitih vrsta izbornika. 

Oni dobivši puno bolje o tome nedavno, ali je nekad bio slučaj da, kad god ste htjeli spriječiti svoje prijatelje da vide fotografije, ćete morati proći kroz vrlo kompliciranim 5-korak proces biće poput, neka mi kliknite na ovaj link, sada neka mi kliknite opet, neka mi kliknite opet, neka mi navesti koje ljudi ne mogu vidjeti moje fotografije. To nije osobito dobro na Facebook dijelu jer toliko o korisničkom iskustvu zapravo dajući im slobodu kontrolirati što ljudi mogu vidjeti. Mi to zovemo korisnički kontrolu i slobodu. Ako ne puštaju korisnici to na način koji je učinkovit i intuitivan, onda tvoj korisničko iskustvo je stvarno ne da je velika na sve.  Želite li dečki vole reći ništa o Facebooku? Kako isključiti? [Ong] Vi ne možete isključiti, a to je velika upotrebljivost mana na dijelu Facebooku. Ova značajka - Ja sam zapravo gledao u nju jučer - to je bilo da ne može to učiniti ili je zakopan negdje jako, jako duboko u utore za Facebook, jer ja ne mogu shvatiti kako onemogućiti ovu funkcionalnost na sve. [Malan] Ali ponekad te odluke nisu očito jer su ti dečki dao nam je puno korisnih povratne informacije o raznim CS50 aplikacija i web stranice koje tečaj koristi. Mi nismo proveli sve ove zahtjeve i prijedloge. 

Dio koji je za dobivanje toliko zahtjeva da je funkcija vremena, ali ponekad mi jednostavno napraviti svjesnu odluku kao što je, "Hvala na prijedlogu, ali mi se ne slažete." Pa kako se zapravo odlučiti što treba učiniti ako vaši korisnici mislite da biste trebali učiniti nešto čak i ako to nije nužno? To je fina ravnoteža između zapravo slušati što korisnici kažu i zapravo imaju nekakvu liniju gdje ćete reći, "Nećemo učiniti ono što ti korisnici reći." A posebno, mislim da je citat Henry Ford koji sažima ovaj se prilično dobro. "Ako sam pitao ljude što su htjeli, oni bi rekli su htjeli brže konje." Može li itko od sortirati zafrkavati, osim što je citat zapravo znači? To je ne samo da korisnici znaju što žele, ali to je više da - [Student] Oni ne znaju što je više moguće. U sklopu oni ne znaju što je više moguće. Zafrkavati da osim malo više. Što misliš da je? [Nečujno učenik odgovor] To je dobro. Ono što mislim da mi pokušavamo reći je da ljudi znaju što žele. Oni žele brže konje. Ono što stvarno želite je sposobnost da se brže kretati, ali oni stvarno ne znam medij kojim bi se postigla da. Kada dođete na svoje korisnike, a korisnici ti nešto reći i oni vam reći, "Želimo ove značajke i ove mogućnosti i ove mogućnosti," vi ne želite nužno razmišljati o, "Pusti me naprijed "I provesti ono što izrijekom kažu," ali ono što želim razmišljati o tome je, "Kakav ideje mogu dobiti od toga?" Što oni zapravo žele? 

A od tamo što možete učiniti je dizajnirati nešto što zadovoljava te zahtjeve ali ne nužno na način da korisnik očekuje se da će biti zadovoljni. Dakle, za nešto poput konačnih projekata, u vrlo stvarnom smislu, što je korisno heuristička kada je u pitanju stvaranje nešto bolje, pogotovo ako dizajner ima tu aroganciju o njemu u kojem ste vrsta znate što je najbolje, što bi moglo potrajati ulaz iz svojih korisnika, ali kako ti zapravo ići o uzimajući tu povratnu informaciju? U posljednjim projektima, vrlo konkretno, što stvara optimalne rezultate ovdje? Što stvara optimalne rezultate - i ja ću ići preko ove u drugi - je to proces razvoja, a zatim testiranje i onda Ponavljanje. Što mislim testiranje je obično kada dizajnirati nešto Mislite li da je prilično dobra, poput: "Ja sam kao veliki dizajner. Svatko će ljubav ovu." A onda ga staviti vani i ljudi stvarno ne sviđa iz nekog razloga. Što morate učiniti je da morate uzeti dijelove stvari koje ljudi ne sviđaju i obnoviti stvari koje ljudi ne vole. To zvuči kao vrlo očite procesu, ali taj proces stalno Ponavljanje na vrhu što ste već izgrađena je proces koji vam pomaže ne samo poboljšati svoje vještine dizajn, ali također pomaže vam poboljšati dizajn tako da ljudi zapravo cijeniti svoj proizvod čak i više nego što su učinili prije. 

Ja ću ići preko više konkretne primjere što zapravo može učiniti. Kao svojevrsno zadnji primjer proizvoda, pogledajmo kajak. KAJAK kada je izašao je bio vrlo, vrlo popularan. Može li itko pogoditi zašto? Koje su vrste stvari koje vam se sviđaju za to, ako ste ga koristili ili što su vrste stvari koje ne vole? Da. >> [Nečujno učenik odgovor] >> Ok. To je dio njega ostavljajući korisnik morati upit koji je skuplji od vrlo restriktivne jedan poput, "Morate odabrati svoj početni datum "I morate odabrati svoj datum završetka." U stvari, to vam omogućuje da budu fleksibilni o tome i to vam daje sve od letova u tom rasponu. Sve drugo? [Student] Oni uključuju naknade u cijeni. Oni ne uključuju naknade u cijeni. Porezi i stvari zapravo ide ravno u toj cijeni u gornjem lijevom tako da se ne načičkana razmišljanja da ste zapravo plaćati za 240 dolara leta kada je stvarno 330 dolara. Sve drugo? Da. [Nečujno učenik odgovor] Nisam siguran da li su oni zapravo ti to dopustiti. Možda sam u krivu. To bi moglo biti zanimljivo stvar, ako želite staviti više težine na određenim filtrima tako da oni gurnuti rezultate koji se odnose na taj filtar na vrhu. No, može li mi itko reći što je tako posebno o ovom lijevoj strani? Kako ste se tradicionalno pogledati let na internet servis prije toga? 

Da. >> [Nečujno učenik odgovora] >> Može li se reći da je - [Student] Svaki zračni prijevoznik. >> Da. Svaki zračni prijevoznik ima svoju web stranicu. Ovo objedinjuje stvari. I? [Student] Vi znate točno što put kad odlaziš. Vi ne znate točno ono vrijeme ste ostavljajući, ali se odnose na filtere posebno. Dopustite mi podići kajak. O Bože, pop-up. Loše korisničko iskustvo. Što se događa kada sam premjestiti ovaj klizač? [Student] Automatska ažuriranja. >> [Ong] Automatska ažuriranja. To je nešto što je vrlo važno. Prije toga, kad god ste htjeli pogledati let, ste morali staviti u ulaznu lokaciji, vaš izlazni položaj, pritisnite pretrage, to bi obraditi to i pokazati svoje rezultate. Ako ste htjeli promijeniti svoj upit, da će morati pritisnuti natrag dva puta, ući u novu upita od nule, a onda ga iznova i iznova. Lijepo je stvar o nečemu kao što je to on koristi vrlo [neprimjerenog] stvar u sredini. Kad god nešto ovako, to puca off zahtjev i vraća vam sve rezultate odmah. Ova vrsta neposredne povratne informacije je nešto što je KAJAK mahnito popularan jer to je stvarno lako za mene samo promijeniti svoj upit i shvatiti stvari koje su oko određenog raspona bez potrebe da ide naprijed i natrag, natrag i naprijed, natrag i naprijed. Dakle, to su sve vrste stvari koje želim razmišljati o tome kada ste projektiranje Vaše web stranice. Kako mogu napraviti da se vrlo učinkovit za moje korisnicima proći kroz ono što oni rade na i doći do njihovog eventualnog cilj što je brže moguće? [Malan] I Josipu točke ranije o korisnicima ne nužno znajući ono što oni žele, na temelju onoga što vi sada znate o HTML i imate okvire, gumbe za izbornika, odaberite ulazni polja i slično, kako bi ste provesti ideju branje početka vremena za bijeg? 

Koji od tih različitih mehanizama UI će vam koristiti? Ako samo znati količinu HTML-a koji je predavao prije i znate ulazi su radio gumbi, kućice, kap-padovi, i umeće kutija, što bi vaš prirodni izbor su za branje datume? [Student] ulaza. >> Ulaz. Ili možda čak padajući sa svim datumima, zar ne? Dakle, s više složenih UI mehanizama kao što je ovaj na lijevoj strani koje možete provesti, možete napraviti ovaj proces mnogo više intuitivno s klizač jer vrijeme je kontinuirana, a ljudi obično ne razmišljaju o tome u smislu diskretnih komade. U redu. Posljednja stvar. Deset upotrebljivost heuristika. Sve stvari s kojima smo razgovarali o vjerojatno spadaju pod jednu od tih kategorija. Ako idete na ovom linku, koje su mjesta bit će objavljena na internetu, zapravo ćete biti u mogućnosti da, kao što dizajn svoje stranice, imajte na umu ove heuristiku i ta pravila palca. Za svoje projekte, što mi predlažemo da učinite kako bi odredio vaš app bolje je učiniti papira prototipova prvi. Kada razmišljate o Vašoj aplikaciji, vrlo brzo skicirati ono što želite izgledati i pobrinite se da sve kutije su raspoređeni na način koji je vrlo intuitivno za korisnika za korištenje pa čak i pokazati ove prototipe papir za svoje prijatelje i početi fokus grupe. Samo dvije ili tri osobe zajedno i zamolite ih da samo dodirnite tih papira prototipova, i pokazati im nove ekrane kako bi vidjeli ako su oni zapravo razumiju što se događa. 

Što želite učiniti je dati im zadatak, motivirati taj zadatak, i samo im dati aplikaciju i neka ga koristiti. Nemojte im dati upute izvan toga. Želite li zapravo neka komunicirati sa svojim app na način koji vam omogućuje da vidite kako bi ga koristiti ako ne stoji pored njih. I to je vrlo važno. To će vam dati puno uvida da su ljudi uzimajući oko određenih stvari na način da ih nisam namjeravate? Jesu li oni koriste određene mehanizme UI na zaslonu na način da je vrsta Hacky? Nisam namjeravao za njih to učiniti na taj način. A kad ste gotovi s tim, što želiš da učinim? Vaši dizajn stijene, zar ne? Što želite učiniti je da žele razviti i napraviti taj proces iznova. Pa to pokazati prijateljima nakon što ste ga razvili, testirati ga, razviti, testirati, razvijati, testirati, ponoviti, na i na i naprijed. Dizajn je vrlo iterativan proces u tom smislu. Vi zapravo morati izgraditi nešto i tada shvatiti stvari o njemu da nisu shvatili prije i vratiti i poboljšati od toga. Sada, kao i za razvoj dijelu, to je ono što je Tommy će vam pokazati nakon prekida i kako bi mogli biti u stanju provesti nešto poput samodovršetak na način da je vrlo jednostavna. [Malan] Kao Tommy postavlja ovdje, pitanje onda. Mnogo od najranijih web - i kad je Josip rekao 1990 stil web stranice, to je implementacija gdje ako si htio da odaberete vrijeme početka i završetka vrijeme, Iskreno, natrag u dan, pa čak i na nekim web stranicama i danas, način ćete to učiniti je da odaberete jedan sat iz padajućeg, Vas minuta iz padajućeg, možda ste izabrali AM, PM, i onda ti da tri puta više. I tako sa 6 klikova i možda nekom scrolling Vaš korisnički zapravo može pružiti nekakav datum i / ili Vremensko razdoblje u tom smislu. 

Dakle, definitivno Nedovoljno i još dosad smo vidjeli nema izražajne mogućnosti u bilo kojem od jezika koje smo gledali učiniti nešto seksi kao što je ovaj klizač za vrijeme početka i kraja vremena. Ali ako mislite natrag na tjedan 0, kada smo razgovarali o Scratch, tamo nije bilo dodaci koji samo radili određene stvari. Stvarno je upravo tih osnova poput petlje i uvjeta i slično. Tako nekako samo razmišljam vrlo apstraktno sada, neovisno o pojedinostima HTML, Što se zapravo događa s nešto poput ovoga vremena početka i kraja vremena trakom? Kad sam premjestiti moj miš i ja kliknite na tom malom mrkve simbola na lijevo i početi povlačenjem, programatski, što je to želite biti u mogućnosti provesti da bi se to dogodilo? Koja pitanja, što Boolean izrazi želite biti u mogućnosti to pitati? Što se zapravo događa? Sammy? [Student] Gdje je položaj kursora? >> Dobro. Gdje je položaj kursora? To je nešto što mi je potrebno izraziti natrag u nule, da li je na temelju položaja ili čak boje ili slično. Možda podsjetiti sve tako kratko je u ponedjeljak da su sve ove stvari zove događanja u svijetu interneta, pa tu je stvari poput onclick i onkeypress i onkeyup i onmouseover i onmouseout. Dakle, shvatite da čak i te stvari uzimamo zdravo za gotovo na webu sa stranicama poput Facebooka i Gmaila, čak i ako nemaju pojma kako bi eventualno provesti da zato nema ništa, čak kao što je to u predavanju ili problem Postavite 7, shvatiti da s tim točno istim osnovama, s HTTP i parametrima i GET i POST, s osnovnim HTML inputa koje smo gledali do sada iu jednom trenutku s programskim mehanizama koji Tommy je oko uvesti možete početi izraziti sebe baš kao što je u tjednu 0 po vrlo intuitivno povlačenjem i ispuštanjem. 

Dakle, s koje je rekao, Tommy MacWilliam i neke nove slagalice za nas webu. U redu. Moje ime je Tommy i ja ću da se govori o JavaScriptu. Samo odricanje: Ja sam mišljenja da je JavaScript najbolji programski jezik u cijelom cijelom svijetu. Postoji puno ljudi koji se ne slažu sa mnom, ali to je upravo nevjerojatna. Nakon što se vrati na C, ako imate pisati C za drugi razred ili nekim drugim jezicima, to je samo jako frustrirajuće u svim low-level detalja morate zamarajte se u. Dakle, ako ste ikada osjećate tužno o tome neugodno C je pisati, samo vratiti, napišite JavaScript. To je nirvana. Osjećat ćete se puno bolje o svom lošem danu. Puno magije JavaScript dolazi iz njegove sposobnosti da manipuliraju stvari koji su već na stranici. Kad smo napisali naše PHP skripte, oni su pogubljeni na poslužitelju, i na kraju da je PHP skripta vjerojatno čuti neke HTML. To HTML je poslan na klijentu, a onda to je to. Ako PHP htio dodati gumb na stranici, na primjer, to stvarno ne mogu to učiniti. To će morati donijeti novu HTML datoteku i poslati da bi pregledniku. Uz JavaScript znamo da možemo ažurirati stvari, a oni su već na stranici, i zbog toga možemo pružiti mnogo više instant povratne informacije, koji će stvarno poboljšati korisničko iskustvo na našoj web stranici. Samo brzo rekapitulacija JavaScripta selektora. Mi znamo da kad smo preuzeti HTML stranicu, koji će biti predstavljeni u DOM. 

DOM zapamtite je samo ova velika stabla gdje su elementi povezani u ovom velikom hijerarhiji. Kada smo radili s bazama podataka u pset 7, jedna od prvih stvari koje je potrebno znati kako to učiniti bilo upita baze podataka. Imamo tu veliku korisnicima stol, a ponekad samo želimo reći, "Ja samo želim neke od tih korisnika koji odgovaraju neki uvjet." Slično tome, kada imamo DOM trebamo neki način ga upita. Trebamo neki način govoreći: "Želim sve tipke koje izgledaju ovako "Ili sve slike na stranici." I ove selektora nam omogućiti da to učinite. Dakle, samo brzo rekapitulacija. Ovaj prvi ovdje, ovo # predati, što je to ide na odabir? Se bilo tko sjetiti? [Nečujno učenik odgovor] >> Da, točno. To će se odabrati jedan element na stranici koja ima ID podnijeti. I tako da hash tag kaže selektor će raditi s ID. Kako o drugom, to. Usmjeren, što će taj odabir? Da. >> [Student] klasa. >> Točno. Ovo je sada će odabrati po razredu. Razlika između ID i klase ovdje je općenito ID mora biti jedinstven roku obzira prostor ste u potrazi preko. Dakle, ako ste bili u potrazi preko cijele stranice, stvarno samo treba imati jedan element s tom određenom ID-a, tako da u ovom slučaju podnijeti. S klase, s druge strane, možemo imati više od jednog elementa na istoj stranici s iste klase. To bi moglo biti korisno za reći želim da odaberete sve što je usmjereno na stranici nego samo jedna stvar. 

I na kraju, ovo posljednja ovdje je malo više komplicirano, ali ono što se ovo događa odaberite iz DOM? [Nečujno učenik odgovor] >> Što je to? [Student] Sve što je oznaka. >> Imamo dva dijela ovdje. Drugi dio će reći želim da odaberete ove oznake s oznakom unosa, tako da bilo element koji je ulaz oznaka. Ali ja ne želim da samo odabir svih ulaza jer nešto poput submit gumb bi mogao biti ulaz i nešto kao tekstualni okvir mogao biti ulaz. Dakle, s tim uglatim zagradama govorim ja samo želim da odaberete one elemente da su tipa teksta. Negdje u mom HTML tag imam atribut zove vrsta, i vrijednost tog atributa mora biti tekst. Pa kako o ovom prvom dijelu ovdje? Prva riječ ove selektor je oblik onda imam prostora, a zatim ovaj ulaz dijela. Što to učiniti, stavljajući oblik ispred njega? To se događa na osnovi ograničiti našu upita. To bi mogao biti slučaj da imamo neke ulaza na stranici koje nisu potomci obrascu. Što će to učiniti je to će reći samo želim ulazne oznake koje su negdje iznad njih neki roditelj element obrascu. I tako na taj način možemo napraviti ove više hijerarhijske upite tako da ne samo da odaberete sve podudaranje određene selektor. Možemo vrsta ograničiti opseg tog upita za nešto drugo. Tako da sada znamo kako odabrati elemente na stranici, pričajmo malo o AJAX. AJAX je još uvijek vrlo trendy skraćenica koja se zalaže za Asinkroni JavaScript i XML. To samo tako dogodi da XML je samo neki način predstavljaju podatke. 

To je vrsta izgubila popularnost u zadnje vrijeme, tako da X u AJAX ne koristi cijelo vrijeme. Uglavnom, ono što AJAX nam omogućuje učiniti je HTTP zahtjeva iz konteksta JavaScript. Kada smo u našoj web pregledniku, a mi smo navigacije oko stranicama, a mi kliknite na link, ono što naša preglednik će učiniti je HTTP zahtjev za vezu god mi kliknite. No, to nije uvijek idealno, jer ako je to slučaj, onda kao David je govorio: uvijek imamo kako bi korisnici kliknite submit gumb ili kliknuti na link kako bi se nešto dogodi da će se uključiti HTTP zahtjev. Dakle, s AJAX možemo napraviti ove zahtjeve u ime JavaScript. To znači da svaki put kad korisnik interakciju sa stranicom ili se nešto dogodi, zapravo možemo napraviti programski zahtjev za neku drugu PHP datoteku na našoj web stranici ili bilo što drugo i dohvaćanje podataka da je ta datoteka ispljune. Idemo pogledati primjer AJAX. Ovo je naš CS50 financija stranica s kojima nadamo se neki od nas su upoznati. Ako gledamo HTML ove stranice, ovdje vidimo da sam dodao nekoliko stvari, od kojih sam dobio ovaj obrazac ID. Ja sam rekao id = "oblik-citat". Ja sam to učinio samo zato što će napraviti ovo malo lakše odaberite iz DOM jer ja mogu samo napraviti vrlo jednostavan upit. Ono što želim učiniti ovdje je želim popraviti neki problem s CS50 financija. Dakle, ako idemo na finance.cs50.net, svaki put želim da dobijete ponudu, moram kliknite ovaj Saznaj Citat gumb, i da Dobiti Citat gumb onda me vodi na drugu cijeloj stranici. A ako želim još citat, moram pogoditi gumb Natrag, a zatim sam ga upisati, Ja dobiti ponudu, a ja pogodio gumb Natrag. To stvarno nije najbolje korisničko iskustvo. Tko će stvarno koristiti stranicu ako je to sporo da se cijene dionica? Dakle, ono što želite učiniti s AJAX je ukloniti taj korak ide na zasebnoj stranici kako bi vidjeli rezultate. 

Što smo stvarno samo tražim da stvarno mala cijena, i da je samo jako mala količina podataka. Dakle, nema potrebe za mene da ide još jedan cijeli HTML stranicu, preuzeti novu seriju HTML, možda skinuti neke više slika, neke druge CSS datoteke samo za mene odgovoriti na to pitanje vrlo jednostavan koliko se ovaj dioničko trošak. S AJAX možemo napraviti ovo puno lakše. Vidimo ovdje da sam povezivanja u JavaScript datoteku pod nazivom quote.js. Ajmo zapravo otvoriti tu datoteku. Ne postoji. Sve moje JavaScripta datoteka će biti smješten u HTML tako da web preglednik može pristupiti. Onda imamo posebnu imenik ovdje za JavaScriptu i sada ovdje je quote.js. Na vrhu ove datoteke ovo ovdje piše da želim čekati cijelu stranicu da se učita prije nego što sam pokušati učiniti ništa. Zašto je to nužno? Ispada da je sljedeća stvar ja ću učiniti ovdje je početak u potrazi za element koji odgovara neki birač. Ako se to ikada JavaScript se izvršava prije taj element je učitan na stranici, onda sve što sam pokušati učiniti ne ide na posao jer ću pokušati odabrati nešto što je još tamo. Dakle, ova linija do vrha kaže želim čekati dok se sve učita tako da smo jamči da su svi elementi tražim su zapravo na stranici. Ovaj znak dolara ovdje znači ja sam koristeći biblioteku pod nazivom jQuery. Ovaj jQuery knjižnice nam omogućuje korištenje ove selektora da smo samo gledali. Govoreći $ onda prolazi kao argument ovo # obrasca-citat, Ja sam sada odabirom taj obrazac koji smo upravo uzeo pogledati. Sada imam zastupljenost tom obliku u sjećanju nekako. 

Na ovaj objekt sada, ova reprezentacija obliku, Ja sam sada koristite funkciju pozvali. Što je ova funkcija radi je da će priložiti događaj rukovatelj. Događaj koji ćemo slušati je submit događaj. Dakle, kada korisnik klikne da submit gumb ili hlača Enter, Ovaj događaj će se otpustiti. Do spaja na to, ja sada mogu nadjačati zadane ponašanje obliku. Bez tog JavaScriptu, oblik će podnijeti god PHP datoteka koristili smo u toj akciji atributa. No, umjesto toga, ja sada govorim, čekaj, čekaj, čekaj, ne želim da zapravo to učiniti. Želim da se to dogodi prije nego što idete i pokušati predati nekom PHP datoteci. Sada ono što želim učiniti? U ovom trenutku želim koristiti AJAX nekako učitati u tome što cijena dionice je. Prva stvar koju sam trebate znati je ono dioničko korisnik gleda gore. Za to ću koristiti drugi izbornik. Ovo je treći selektor smo gledali prije. To govori da želim krenuti ovaj oblik elementa sa ID obrasca-citat. Onda negdje unutar tog obrasca mora postojati ulazni element koji ima ime simbola. Ako se osvrnemo na našem HTML, vidjeli smo da smo imali ulaz [ime = simbol]. To znači da će se to odabrati taj tekstualni okvir da korisnik piše u. To je lijepo. Imamo tekstualni okvir. Sada samo trebamo znati što je unutar njega. Za to možemo nazvati ovu metodu ovdje, ovo. Val, i to kaže znam što tekstualni okvir imate. Želim da mi reći što je to korisnik unese u tom tekstualni okvir. Sada imamo niz zove simbol koji je jednak bez obzira korisnik upisali u. To je lijepo. Možemo koristiti taj string sada da naš zahtjev. Ovo je nova funkcija ovdje, to $, osim da smo više ne će biti odabirom elemenata, idemo se zovete drugu funkciju koja je pod uvjetom da nam jQuery. Ovo AJAX funkcija je ono što se zapravo događa da bi ovaj HTTP zahtjev. Dakle, moramo reći da je nekoliko stvari. Prva stvar koju moramo reći ovu funkciju gdje želim zahtjev ići. Negdje u mom projektu imam ovu sliku unutar HTML direktorij zove quote.php. Ja mogu pristupiti ovu sliku, vidjeli smo, baš kao i ova, ako odem na localhost / quote.php. 

Želim da moja JavaScript da bi zahtjev za tu stranicu. Koji tip zahtjev sada? Vidjeli smo prije da oblik ima tu metodu = "post" atribut, a to znači da će napraviti POST zahtjeva, pa to neće staviti ništa u URL-u, nego GET zahtjev, koji bi samo dobiti otkaz ako mi samo pristupiti na stranicu s web-preglednik, na primjer. Sada smo je rekao Želim napraviti zahtjev HTTP POST na stranici se nalazi na quote.php. Kada smo dostaviti obrazac, sjetite se da bi mogli pristupiti ulazne elemente unutar tog oblika s tim $ _POST varijable. Do sada u priči nismo zapravo ste zajedno ikakvih podataka još. Mi samo sam rekao da smo izradu AJAX zahtjev i ovdje je tip zahtjev činimo. Sada trebamo zapravo poslati neke podatke na stranici. Za to možemo koristiti ovu nekretninu nazivom podataka. Vrijednost ove imovine je zapravo asocijativni niz. Razlog za to je što nam omogućuje slanje više nego samo jedan komad podataka. To je razlog zašto smo ove vitičastih zagrada ovdje ugniježđena unutar ovih drugih vitičastih zagrada. Tipke u tim asocijativnim nizovima će biti ista stvar kao i one atribute ime u našim obliku elemenata. To znači da ako ja pošaljem uz ključ simbola, to znači da je moja PHP stranica može pristupiti te podatke s $ _POST [simbol] baš kao što smo radili prije, kada smo bili slanje obrasca. I sada su stvarni podaci želimo poslati će biti vrijednost unutar ovog asocijativnog niza. 

Mi pohranjeni ovaj tekst u varijablu simbol, i tako šaljemo zajedno sada je ključ simbola i vrijednost obzira korisnik upisali u. Sada smo napravili ovu HTTP zahtjev, naša PHP datoteka je pogubljen, i to će poslati neke podatke natrag sada klijenta koji je upravo napravio ovaj zahtjev. Sada moramo odgovoriti na ono što poslužitelju rekao nam je. Za to imamo ovu zadnju imovinu ovdje zove uspjeh. Vrijednost ovog uspjeha ključ zapravo će biti funkcija, i to je jedan od stvarno cool stvari koje možete učiniti s JavaScriptom. Ne samo da možete imati Ints ili polja kao vrijednost unutar nekog asocijativnog niza, možemo također imaju svoju funkciju. Dakle, rekavši uspjeh, ovo je moj ključ. Dvotočka kaže ovdje dolazi vrijednost, a sada vrijednost to je zapravo funkcija. Dakle, ne trebamo dati ovu funkciju ime po sebi. Možemo samo reći da će ovo biti neki funkcija. To se događa da se jedan argument. Argument na ovu funkciju će biti god poslužitelj nas poslao natrag iz zahtjeva. Baš kao i kada je naš preglednik čini zahtjev, poslužitelj šalje nešto natrag i preglednik prikazuje ga, u kontekstu AJAX samo smo napravili zahtjev, poslužitelj poslao nešto nazad, a sada smo da su predstavljeni kao niz. S tom nizu sam samo želio prikazati da na stranici. Za to ću imati jedan posljednji birač. Želim odabrati element s ID cijeni. Ovo je samo prazna div koji sam stvorio na stranici, i ja želim postaviti sadržaj tog div da bude ono što je poslužitelj nas poslali natrag. Ja sam zapravo izmjene quote.php malo. 

Umjesto poziva uzvratiti i pružanje neke stranice, quote.php sada jednostavno će ispisati vrijednost zaliha kao string. Dakle, ako ste bili zapravo posjetite stranicu, samo bi vidjeti taj mali niz kako god cijena dionice je. Jedna posljednja stvar koju trebate učiniti ovdje je samo pazite ova funkcija vraća false. Što to govori da ako sam unutar događaja rukovatelj i taj događaj rukovatelj false umjesto povratka istina, to znači da ne želim izvorni događaj na vatru. U tom slučaju, ako nismo imali nikakve JavaScript i mi poslali obrazac, naša web preglednik će reći: "Ja ću poslati te podatke zajedno" i oni će vam poslati na drugu stranicu. Budući da smo pomoću AJAX sada, nema potrebe za slanje korisnika na drugu stranicu. Mi smo samo ćemo prikazati rezultate dinamički na ovoj istoj stranici. Mi zaista ne želite ih da odu bilo gdje, a ja želim ostati na istoj stranici. Dakle, po povratku lažna, mi bi se osiguralo da se oblik ne to učiniti za nas. Idemo pogledati što se to zapravo izgleda. Naš citat stranica izgleda isto. Dopustite mi podići inspektoru ovdje dolje, tako da možete vidjeti što se događa. Učinite to malo manje veliki. Zapamtite, ako smo otvoriti Network karticu, ovo je mjesto gdje možemo vidjeti sve HTTP zahtjeva da se događa na stranici. 

Za simbol neka mi upisati AAPL i kliknite Get Citat. Sada smo vidjeli da je udio Applea košta neki broj dolara Upravo se pojavio na stranici, ali URL uopće nije mijenjao sve. U stvari, ovdje je HTTP zahtjev koji smo upravo napravili. Napravili smo POST zahtjev za quote.php. To ima smisla. To je ono što nas poslužitelj poslao natrag. To više nije to gigantski HTML dokument sa slikama i tome slično, to je samo jedan redak teksta, i onda mi samo prikazuje liniju teksta. Ako se vratimo na zaglavljima i vidjeti što se zapravo šalju unutar ovog HTTP zahtjev, možemo vidjeti ovdje dolje da smo poslali uz ključ simbola i vrijednosti AAPL, što je ono što korisnik upisali u. To je lijepo, ali to je još uvijek malo neugodno. Još uvijek imam kliknuti ovaj gumb da biste dobili zaliha citat. Mi smo zauzet ljudi, a mi nemamo vremena da kliknete tipke. Google je to shvatio malo prije kad su provedene Google Instant. Što Google Instant čini se kao da ste tipkati to samo počinje prikazivati ​​rezultate za vas , tako da ne morate brinuti o čak klikom pretraživanje. Zapravo, zabavna priča vezana uz to. Nakon Google Instant izašao, ljudi su bili poput, "Hej, ovo je super nevjerojatna." "Ovo je tako cool." I učenik dolje na Stanfordu, koji je bio 19 u to vrijeme napravio ovaj site zove YouTube Instant. Svi YouTube Instant ne učinkovito pretražiti YouTube odmah. Dakle, umjesto da idu na YouTube.com i pogodio pretraživanje, kad sam početi pisati u YouTube Instant nešto poput CS50, mogli smo vidjeti da se ovdje to pokušava na sporoj internetskoj vezi naseliti ovi rezultati živjeti. Za to mi zapravo može napraviti vrlo jednostavno promijene na našem quote.js datoteku. Upravo sada smo pridaje ovaj događaj kada se obrazac podnosi. Mi zapravo ne žele da korisnik podnijeti taj oblik više, pa ajmo umjesto vatru ovom događaju svaki put korisnik pritisne tipku. Da bi to neka prvi promjenu događaj iz dostaviti keyup. To znači da umjesto da čeka oblik podnijeti, svaki put pritisne tipka, nešto će se dogoditi. To više nema smisla pridavati ovu keyup događaj za cijelu obliku. Mi smo stvarno samo stalo da okvir za pretraživanje. 

Za odabir da sada možemo promijeniti to biti, nego oblik-citat, Obrazac-citat, a mi ćemo imati ulaz (upišite = tekst) ili bismo mogli reći (ime = simbol) - što god želimo. Sada postoji jedna posljednja stvar koju morate učiniti. Sjeti se ovdje kad smo rekli povratak false mi je rekao da ne želim da se zadani događaj na vatru. No, to samo tako dogodi da ako mi onemogućiti da se sada, god smo upisati se neće pojaviti u pregledniku više jer bi to bilo zadano ponašanje upišete u okvir za tekst. Mi više ne žele nadjačati da, pa ajmo uništiti taj povratak lažna. Ako smo spasiti i ponovno učitati stranicu, sad kad sam početi tipkati AAPL vidjet ćete da je cijena dionice na dnu ovdje završava automatski. Dakle, ovdje je CS50 financija Instant. Zapravo zabavna priča o YouTube Instant je da student samo vrsta je pisao kao jedan-noć projekta, a sljedeći dan je bio ponuđen posao od strane YouTube CEO. Tako jednostavno kao da ste CS50 studenti, vaši konačni projekti mogu dobiti posao na YouTube. Nešto kao da je stvarno cool ideja za konačni projekt, zar ne? Imali smo neke postojeće funkcionalnosti koje smo htjeli da se integriraju s. Mi poboljšati korisničko iskustvo malo, i odjednom traži nešto na YouTube Instant moglo biti puno lakše nego u potrazi za njega na redovnoj YouTube. Tako da je Ajax u malom. 

U primjerima da je Josip bio prikazuju, vidjeli smo puno autocompletes, i one autocompletes su jako, jako zgodan jer mi nemamo na umu - Na primjer, ako se ne sjećam cijenu dionica za Apple a mi samo znamo da je aa nešto, nego samo reći, "Udio ovu stvar košta toliko novca" Ja bih nekako volio znati što dionice početi s aa. Mi možemo učiniti da stvarno lijepo s Bootstrap knjižnice koji je već uključen unutar CS50 financija. Ako ste došli do ovdje za JavaScript oznake i pomaknite se dolje do Typeahead, to je samo lijepo plugin koji je netko već napisao za nas, i lako možemo koristiti svoju funkcionalnost ovako. Ja upisali u, a ovdje je popis nekih država koje počinju s A. Recimo da mislim da je to jako cool i da je vrijeme za mene su to na svojoj stranici. Ispada da je to jako, jako jednostavan. Hajdemo skakati preko ovdje da quote3.js. Moj datoteka izgleda malo drugačije. Ovdje dolje sve moje AJAX stvari je ista. Želim učitati burzovne podatke bez potrebe da ide na drugu stranicu. Ali sada želim koristiti ovaj plugin. Bootstrap dokumentacija ima sjajne primjere kako točno mogu to učiniti. Želim reći, "Evo ulaz da želim samodovršetak na" i ja ću nazvati ovu funkciju zvanu typeahead, i da će nositi sve Typeahead stvari za nas. To će započeti popis, to će učiniti sve naše filtriranje. Jedino što treba znati je ono što podaci smo autocompleting na. Tako sam saznala ovu tipku upravo čitajući dokumentaciju i gleda na primjerima. Ako sam mu dati ključ izvora, vrijednost ovog ključa samo su neki niz stvari želim samodovršetka dalje. Ova varijabla je došao iz ove druge datoteke. Ja otvoriti symbols.js. 

Ovaj symbols.js je upravo to jako, jako veliki niz koji sadrži nizove svih tih zaliha simbola iz NASDAQ. Ako želim skočiti natrag u HTML, tako jharvard, vhosts, globalhost, HTML, predloške, quote_form. Budući da je sada zove quote3.js, neka mi promijeniti JavaScript datoteku Ja uključujući ovdje. Sada imam quote3.js, pa ću učitati u tom zasebnom JavaScript datoteku, onaj koji ima taj bootstrap samodovršetka. Sada kada sam skočiti natrag u preglednik, ponovno učitati stranicu, a ja počnite tipkati aa, tu je moj samodovršetak. I to je stvarno kao jednostavan kao taj. Imao sam jedan redak koda koji samo rekao: "Ovdje su stvari koje želim samodovršetak na" i odjednom imam stvarno, stvarno lijepo funkcionalnost nema puno truda na sve. Kao što ste u razvoju web stranice, a posebno prednji kraj stranu stvari, ćeš naći to je slučaj puno. Postoji puno, puno, puno stvarno cool slobodnih knjižnica vani da bi to super jednostavno za napraviti stvari kao što je ovaj. Može li itko sjetiti bilo nedostataka jednostavno autocompleting na ovom velikom popisu simbola? Što bi moglo biti nešto što nije najbolje sa ovog pristupa? Da. >> [Student] Vrijeme, ako imate puno [nečujan] Da. Upravo sada smo preuzimanjem ovu veliku JavaScript datoteku i tu je puno simbola. I tako, ako imamo tonu stvari, to bi mogao vrsta povećati latencije od ne samo u potrazi ali i preuzimanjem stvarne datoteke. Izvrsno. Sve drugo? Trenutno ne postoji pravi osjećaj važnosti. Ako sam upisati A, tvrtki koje pokazuju ovdje ne može biti najpopularnije tvrtke koje počinju s A. 

Prije nego što sam doći do Apple, to bi moglo potrajati još neke znakove kako bi pronašli ono što tražim. Ovo samodovršetak nema taj osjećaj važnosti. To je samo htio reći, "ništa što odgovara ću prikazati." Umjesto toga, ja bih nekako integrirati neke važnosti u mojim pretraživanja. Ako idem ovdje na Yahoo! financija, finance.yahoo.com, Ako sam pokušati unijeti simbol na Yahoo! Financije stranici i ja početi tipkati GOOG, imam lijep popis stvari. Jasno, to izgleda kao Yahoo! Financije radi nešto više pametan ovdje. Oni imaju određenu relevantnost i oni također imaju dodatne informacije kao ime roda. To je nešto što ja stvarno ne mogu dobiti samo s moje dioničko popis simbola. Želim to i tako ću ga uzeti. Da bi to neka je napraviti nekoliko stvari. Idemo prvi otvaraju inspektora na ovoj stranici jer smo vidjeli da se ova stranica ne pretovara na sve, pa to je vjerojatno pomoću AJAX nekako se učitava svoje podatke. Možemo saznati što podaci to utovara. Ako sam kliknite na ovu karticu Network, to će biti sve zahtjeve koje počinju dobiti otkaz. Sada, ako sam upisati goo, možemo vidjeti da sam upravo dobio novi HTTP zahtjev. To je vjerojatno gdje da podaci dolaze iz. Naravno, ako gledam ovaj URL, što je malo čudno ime, možemo vidjeti da je to točno gdje Yahoo šalju svoje podatke iz. 

Ja sam stvorio zasebnu datoteku pod nazivom suggest.php koja je vrlo slična u duhu na pretraživanje funkciji. To je u osnovi će napraviti upit na Yahoo URL, vratiti neke podatke, i poslati ga natrag na mene. Sada, radije nego da koristite ovaj veliki, veliki popis simbola, Ja mogu koristiti Yahoo lijepe stvari relevantnosti, a ja ne moram preuzeti taj masivni JavaScript datoteku. Ja samo ću povući dolje zapravo relevantne zaliha simbola. Ajmo skočiti u to. Dakle, html, js. Mi smo sada u quote4. Sada smo više ne koristi taj veliki popis JavaScripta datoteka. No, tu je mala vrsta dizajna problem ovdje. Mi smo je rekao da je u Ajax je asinkroni. Što to znači da kada sam napraviti AJAX zahtjev, pa ovdje na liniji 8, ovo je mjesto gdje moj AJAX zahtjev zapravo je otkaz. Recimo da sada imam neki kod ovdje dolje da će učiniti neke stvari sviđa upozoriti korisnika ili nešto promijeniti na stranici. Što se neće dogoditi je preglednik ne ide čekati za ovaj zahtjev za nastavak prije silazi i udaranje ovu liniju. To je asinkroni dio. To će učiniti taj zahtjev i reći: "Kad ste završili, "Vratiti i nazvati tu funkciju da sam vam rekao da zovu unutar uspjeha." To znači da ne možemo preuzeti sve dionice unaprijed. Mi moramo napraviti zahtjev i čekati da se nešto vratiti. To znači da prije nego što smo mogli jednostavno reći Bootstrap, "Evo popis stvari koje želim da samodovršetka dalje." Mi više ne može učiniti da se više, jer mi ne znamo ono što želimo da se zapravo samodovršetak na. Srećom, Bootstrap mislili o tome, jer oni su pametni dečki tamo, i oni su zapravo nam je dao još jedan način da napunite ovu Typeahead plugin. Prije, vrijednost ovog izvora imovine bila je upravo to veliki niz stvari samodovršetka dalje. 

Sada izvor vlasništvo je zapravo funkcija, i svrha ove funkcije je shvatiti što su stvari koje samodovršetak na su. Način da će shvatiti da van je da će zatražiti Yahoo! Financije ono što su najbolje stvari koje su samodovršetak. Za to ću napraviti vrlo sličan AJAX zahtjev. Ja ću zatražiti ovu stranicu na suggest.php. Želim poslati zajedno simbola dalje. A sada moj uspjeh, Bootstrap dokumentacija mi je rekao da bi se popuniti taj popis stvari, sve što trebate učiniti je proći u ovom polju sada na povratni funkciji. Ali čekaj malo. Ako je to trebao biti niz i AJAX me poslati natrag tekst, kako je to moguće? To uvodi novi način razmjene podataka zovu JSON. U tom slučaju nećemo samo poslati natrag jednostavan niz teksta. Sada imamo posla s ovim složenije popisu zaliha simbola. Ovi simboli zaliha također može uključivati ​​stvari kao što su imenom tvrtke ili trenutnim cijenama. Samo pomoću veliki dug niz koji nije formatiran u bilo kojem predvidiv način ne će biti najbolji način da biste dobili ove podatke iz Yahoo poslužitelja za mene na način da se mogu lako razumjeti. JSON je tehnologija koja iskorištava kako ćemo stvoriti asocijativne polja u JavaScriptu. Ovo izgleda puno poput JavaScripta asocijativnog niza, i, u stvari, to je zato što je to. JSON zalaže za JavaScript Object notacija. To je u osnovi dogovorene format za prijenos podataka natrag i naprijed. Ovdje to JSON objekt ili to JSON asocijativna polja šalje mi neke podatke o stazi. 

Tipke ovom polju su stvari poput Naravno da ima vrijednost cs50, i ovdje možemo vidjeti da ja mogu imati vrijednost koja je niz. Ja ne moram raditi stvari kao što izdvoji žice i tražiti zarezom i učiniti lude stvari kao što je to. Budući da je to izjavio u ovom JSON formatu, JavaScript i jQuery već imaju funkcije za pretvaranje niz da izgleda ovako JSON u stvarni JavaScript asocijativnog niza da možemo raditi. Doing to je kao jednostavan kao reći da više nije ovu sliku, suggest.php, me poslati natrag jednostavno niz teksta, ali znam da će mi se šalje natrag JSON. To znači da je JSON se može pretvoriti u JavaScript asocijativnog niza. I tako jQuery, želio bih da to učiniti za mene. To znači da je to odgovor parametar ovdje, ovo više nije samo niz. Zato smo rekli jQuery da ovdje dolazi neki JSON, jQuery će biti dovoljno pametni da kažu, "Htio si JSON?" "Ja ću pretvoriti da u asocijativni niz za vas." Ajmo zapravo pogledati karticu Network jednom imamo quote4.js. Mi ćemo to promijeniti i ponovno učitati stranicu. Sada ću upisati u-jednom. Ja sam napravio par zahtjeve za suggest.php, ali sada je ovo odgovor, nego samo niz, to je JSON. Dakle, imam otvoren kovrčavu braće rekavši: "Evo dolazi asocijativni niz." 

Prvi i jedini ključ ovog asocijativnog niza se zove simboli, a zatim ovdje je niz svih relevantnih simbola sad dolazi iz Yahoo! financija, nije iz tog ogromnog popisa. Tako sam jednostavno mogu naseliti ovaj samodovršetak plugin s nekim podacima koji ne dolaze iz lokalnu datoteku koja je već unaprijed određenim ali od nečega drugog. Ispada da smo zapravo može iskoristiti tehnologije pod nazivom JSONP, ili JSON s padding, koja će eliminirati ovaj suggest.php posrednika. No, umjesto da radi, neka je umjesto pogledati kako mogu poboljšati ovu čak i više. Stvarno mi se sviđa Bootstrap je Typeahead. To je jako lijepo. No, mi smo dobivanje na dobre JavaScript i želimo vrsta to sami, možda pogledati što je to dodatak mogao biti događaj. Neka se više ne koristi taj Typeahead stvar, i ajmo pokušati napraviti ovaj popis predloženih dionica sami. Ovdje u quote6.php ćemo krenuti na isti način. Svaki put kad netko nešto tipa, želimo napraviti AJAX zahtjev. Ovo je sličan našem izvornom CS50 financija Instant. Umjesto da zahtjev za quote.php, mi smo sada podnošenje zahtjeva za iste datoteke kao i prije, to suggest.php, koji je pravedan idući povući podatke iz Yahoo! financija. 

Opet, mi smo još uvijek očekuju JSON, ali sada od Typeahead nije to za nas, moramo poslati zajedno vrijednost koja je unutar tekućeg tekstualnog okvira. Sada znamo što pitati Yahoo! Financije za, pa sad evo funkcija koje želimo izvršiti jednom zahtjev dovrši. Mi nemamo plugin napraviti popis za nas, pa evo gdje mi zapravo idemo izgraditi popis prijedloga. Da bi to učinili, volio u PHP smo ulančani ove velike nizove HTML onda smo ih ispisuju, možemo učiniti isto točno stvar u JavaScriptu. Prvo ćemo krenuti ovaj niz nazivom prijedlozi, i to niz samo će sadržavati neke HTML. Mi želimo da se popis stvari, tako da ćemo krenuti s ovog popisa oznaka, a sada idemo ponoviti nad svim simbolima koji su se vratili natrag do nas. Zapamtite, jer smo je rekao datatipom: 'JSON', to nije niz. Ovo je već niz za nas. To je stvarno cool. Mi jednostavno ne može reći, "Želim da dodati na popis element." Mi ćemo ga staviti unutar jednog elementa u dijelu koji, dat ćemo mu klasu prijedloge, tako da znamo što je to, i sada ovdje je simbol da smo se vratili iz Yahoo! financija. 

Nakon što smo stvorili element za svaki od simbola smo stečen natrag, mi samo želimo zatvoriti popis. Tako sada prijedlozi predstavlja ovaj mali HTML fragment da kada se stavi na stranici će biti popis stvari koje smo u potrazi za. Sada ćemo zapravo staviti da na stranici. Za to sam zapravo stvorio još jedan prazan div i ja sam dao mu ID prijedloga. Slično kao što smo postavili sadržaj div koji bi prikaz na cijenu dionica podataka, mi smo sada samo želim postaviti sadržaj ove div na ono što ovaj niz je koji sadrži te simbole. Pomoću ove HTML metodu, ovo prijedlozi varijabla, ovaj niz je niz HTML. Želim da se taj HTML i staviti ga unutar div zove prijedlozi. Upravo smo u prilogu nešto DOM sada. Dodali smo neke nove elemente na DOM da sada možemo prikazati na stranici. Idemo vidjeti kako to izgleda. Ako smo učitati u quote6, a sada smo se vratiti, Sada kada sam početi pisati AAPL, mi više ne moraju da bootstrap samodovršetak, ali sada imamo ovaj popis koji smo sami napravili. To je malo ružnije nego Bootstrap Typeahead, na primjer, ali to ne dopušta nam da to jedna druga stvar. Kada smo bili u potrazi na toj Bootstrap plugina, Vidjeli smo da kad smo autocompleted, jedan od samodovršetka vrijednosti bio AAPL. To možda neće biti tako koristan. Kao korisnik, nisam odmah mogao prepoznati sve burzovnih oznaka. Što sam vjerojatno više vjerojatno da će prepoznati su tvrtke u stvarni imena. Dakle, ne bi bilo stvarno korisno ako umjesto govoreći AAPL ovo je nešto kao Apple Inc Budući da smo smotani to sami, možemo stvarno lako napraviti. Ajmo otvoriti našu posljednju citat datoteku ovdje, tako quote7. 

Ista stvar. Upravo sam stvorio još jednu PHP datoteku koja će nam se vratiti više nego samo simboli. Također će nam dati natrag tvrtke imena. I tako mi radimo istu stvar. Mi smo izradu AJAX zahtjev. Nakon zahtjeva je završio, idemo izvršiti ovu funkciju ovdje, i ova funkcija će se izgraditi veliki niz elemenata. No, razlika je u tome što je vrijednost tih lista više nije samo simbol, to je sada naziv. Dakle, imamo jedan mali problem. Kada smo koristiti naše lookup, moramo nekako proći to simbol. Mi ne možemo proći pretraživanja nešto poput Microsoft Corporation. Moramo proći ga MSFT. Kad pišemo HTML, imamo puno lijepih ugrađeni u atributa. Možda su povezane s njim href ili klase. Ali ono što mi stvarno trebate sada je za svaki od tih linkova imati dionice simbol povezan s njim. Nema ugrađeni u HTML atribut za dionice simbol, ali srećom, HTML5 omogućuje nam stvaranje vlastite atribute biti što god želimo. Govoreći podataka-simbol, ja sam uveo novi atribut čije ime sam izmislio, a to je u redu, jer sam ga prefaced s tim podacima. Mi ćemo pohraniti unutar postojanja simbola iz zaliha sada. Što to znači da, iako smo prikazujući vrijednost imenom tvrtke unutar naše samodovršetak, mi smo još uvijek sjećati simbol koji je povezan sa svakim mjestu. Način radimo da je unutar tog elementa samog. Dakle, to znači da moramo napraviti još jednu promjenu. Kada smo ga kliknete sada, trebamo zapravo iskoristiti simbol atribut nego samo njegova vrijednost. Ako mi natrag gore, mi priključiti rukovatelj događaja za prijedloge. Kada jedan od tih prijedloga je kliknuo sada, želim učiniti nešto. Ono što želim učiniti je promijeniti vrijednost tog okvira za unos. Sada želim postaviti ovu istu val funkciju. 

Dakle, bez ikakvih argumenata ovo Val funkcija vraća vama ono što je već u tekstualni okvir, ali ako ga dati niz, to će se taj niz i staviti ga u okvir za tekst. Ja sam odabirom svoj tekstualni okvir na isti način. To ime je simbol unutar obrasca-citat. Sada Šaljem mu vrijednost atributa podataka simbola. Ova stvar ovdje je novi, ovaj $ (ove). Što ovo se odnosi na je element koji je kliknuo. Možemo vidjeti da se ovdje nećemo pridaje klik događaj svakom elementu s klasi prijedlog pojedinačno. Umjesto toga, mi smo se približava to malo drugačije. Umjesto toga, mi govoriš kad ništa unutar ove prijedloge div, koja zapamtite je samo kontejner za taj popis, ako se nešto unutar ovog div se klikne i ima klasu prijedlog, Želim ovaj događaj na vatru. Uglavnom ono što to znači možemo učiniti je da možemo ponovno taj isti događaj rukovatelj za sve stvari u popisu. Dakle, mi ne imati jedan događaj rukovatelj za prvi element i drugačiji događaj rukovatelj za drugi element. Mi umjesto toga može reći, "Želim isti događaj rukovatelj primjenjivati ​​na sve što je u mojoj listi". No, moramo nekako znati koji je element kliknuli. To je "to" ključna riječ predstavlja upravo to. Ovo je objekt koji je upravo kliknuli od strane korisnika. Ako sam samo kliknuo treći link, to predstavlja element tog treći link, što znači da mogu dobiti svoje atribute, podaci-simbol, što znamo je da sadrži simbol koji je povezan s tvrtkom Upravo sam kliknuo. Ako skočimo natrag na našoj stranici financije, možemo vidjeti da sada kada sam početi pisati nešto poput MSFT, mi više ne uzimajući samo dionica simbole, mi smo sada uzimajući stvarne tvrtke. No, kada sam kliknite na jedan od ovih tvrtki, možemo vidjeti da mi zapravo naseljavanja tekstualni okvir ne s imenom tvrtke ali što god je pohranjena unutar tih podataka atributa. I tako, ako sam zapravo pregledajte jedan od ovih elemenata desnim klikom ga i klikom Pregledajte Element, zapravo možemo vidjeti kako to izgleda. 

Zapamtite ovo je nešto što smo stvorili unutar koje za petlje kada smo bili izgradnji taj niz HTML. Možemo vidjeti da se ovdje podataka simbol ima vrijednost MSFT, što je sjajno. To je ono što smo očekivali. To je simbol, a to je kako smo dobili vrijednost koju je potrebno koristiti unutar tog tekstualnog okvira. To je dovoljno za citat obliku, jer to je vrsta dosadno. Ajmo napraviti neke brze poboljšanja našeg portfelja stranici. Ako ste koristili CS50 Financije za neko vrijeme, a vi početi kupnje i prodaje puno dionica, na kraju ova tablica će dobiti prilično velika, i ti si idući u ištanje Stock Ticker, naravno. Nakon što je stol je jako, jako velika, to bi moglo biti korisno za korisnika pokušati potražiti preko njega. Unutar okvira za pretraživanje, ako sam početi tipkati nešto poput Disneya i potrazi za moj Mickey Mouse skladištu, možemo vidjeti da je stol sada filtriranje na temelju onoga što sam upravo upisali u. Ova funkcionalnost izgleda super komplicirano, ali to je jako, jako jednostavan s jQuery i JavaScript. Ovo portfolio.php datoteka sadrži JavaScript datoteku pod nazivom portfolio.js. Idemo pogledati to. Dakle, html, js, portfelj. Evo gdje radimo da traži na stolu. Prva stvar koju trebate učiniti je priključiti događaj rukovatelj tog tekstualnog okvira jer znamo da želimo naš filtriranje funkcija na vatru svaki put korisnik pritisne nešto, jer nemamo vremena za pretrage gumbima. Prva stvar koju trebate učiniti je shvatiti što je korisnik u potrazi za, baš kao što smo radili prije. Ova ključna riječ se odnosi na trenutnu elementa je korisnik u interakciji s. 

Budući da je korisnik u interakciji s okvir za pretraživanje, $ To predstavlja okvir za pretraživanje, tako this.val nam daje ono što je unutar okvira za pretraživanje korisnik trenutno upisujete. Dakle, sada ono što želimo učiniti je želimo ponoviti nad svim redovima unutar našeg stola. Da biste odabrali sve retke u našem stolu, dao sam toj tablici ID stolni portfelja, i svaki redak zastupa TR elementa, tako da je ovo selektor će se vratiti za mene velika polja svih redaka u mojoj tablici. Sada želim ponoviti tijekom tog polja. Mogao bih vam za petlju, ali jQuery zapravo daje nam lijep funkciju pod nazivom "svaka." Što svaki se je svaki traje jedan argument, i da je argument funkcije. Što će to učiniti je da će primijeniti tu funkciju za svaki element unutar ovog popisa. Ova funkcija uzima jedan argument da e, i kad je ova funkcija se izvršava, ovaj e će biti zamijenjen sa prvom redu, zatim drugi red, a zatim treći red. Po ovom putu, to je ista stvar kao što je trčanje za petlje a zatim figuring trenutni elementa na temelju indeksa unutar vašeg za petlju. U svakoj iteraciji, za svaki od tih elemenata u tablici, Želim da provjerite je li tekstu elementa - tekst u ćeliji unutar reda - odgovara onome što sam u potrazi za. Ovaj veliki dugi niz naredbi je kako sam mogao to učiniti. Prvo, opet, to je sada odnosi se na - jer je unutar novog funkcije - ovo je sada trenutni redak u tablici. Želim da se trenutni redak u tablici, i želim da biste dobili sve svoje djece. Zapamtite, DOM je hijerarhijski stablo, što znači da elementi imaju broj djece. 

Ovo. Djeca funkcija će vratiti k meni nazad niz sve elemente da su djeca, u ovom slučaju, red u tablici. To je jednostavno stanice unutrašnjost zaredom. Ja samo želim pretraživati ​​prvu ćeliju. Ovo. Prvi funkcija kaže dajte mi prvi element u tom polju. Zatim tekst funkcija kaže me točno ono što je unutar te ćelije jer želim tražiti preko tog teksta. Konačno, neka je pretvoriti ga u mala slova, tako da možemo učiniti tekstualne velika i mala slova upita. Konačno, želimo vidjeti ako je to niz unutar tablice sadrži niz smo tražili. IndexOf funkcija u JavaScriptu ne samo to. To nam govori da li ili ne ovaj niz sadrži još niz. Ako je istina da je stanica sadrži ono što sam u potrazi za, onda želim da biste bili sigurni da je prikazan. Metoda show će reći, "Pokaži element." Ako to nije slučaj, onda to znači da je sve što sam u potrazi za nije sadržavao u tom redu, i tako želim da se sakriju je od korisnika. To se postiže da se lijepo filtriranje učinak gdje više ne vidimo cijelu tablicu. Ako vas zanima kako napraviti ovu oznaku kao dobro, ćemo objaviti izvor online. No, to je stvarno jednostavan. JQuery ima strašan metode za ove animacije i manipuliraju CSS svojstva. Dakle, to je to za mene. 

Što onda čeka? Kao što ćete vidjeti u nekoliko dana, konačni projekti prijedlog zbog. Konačni prijedlog projekti će vam postaviti nekoliko pitanja, , ali među njima će biti i tri prekretnice - jedan "dobar" prekretnica, jedna bolja prekretnica, a jedan najbolji. Ideja je zaista pomoći vam dečki postaviti očekivanja tako da minimalno ćete biti zadovoljni s izlazom vašeg konačnog projekta i to će biti "dobar" tako daleko ste zabrinuti. No, tada je u interesu dobivanje ste do samo malo nešto bolje ili nešto najbolje, također ćemo sortirati od vas gurnuti prema tome kao dobro. The CS50 Hack-a-Thon, u međuvremenu, u nekoliko tjedana. Tipično, to činimo na temelju lutriji osnovi zbog interesa, ali izgledi su mi ćemo uzeti nekoliko stotina nas je u shuttle autobusima iz Harvard Squareu do Trga Kendall gdje Microsoft ima prekrasan objekt prigodno nazvan "NERD" - Istraživanje New England i Centar za razvoj. Mi ćemo doći oko 20:00 ćemo imati neku hranu. Oko 01:00 ćemo imati neke više hrane. Oko 05:00, ako ste još uvijek budni ćemo nad glavom IHOP ili vas odvesti natrag na kampusu. Cilj je da se upustim u posljednjim projektima pored kolege i osoblje. Potom je nekoliko dana kasnije je CS50 sajam, koja stvarno je značilo da se prilika za vi da pokažete svoj rad i postignuća za semestra dok trljanje ramena jedni s drugima i uzimajući osjećaj za ono što svatko učinio. Sa taj je rekao, mnogi zahvaljujući Tommyja i Josipu, a mi ćemo vas vidjeti u ponedjeljak.  [Pljesak]