[Powered by Google Translate] [9. týždeň, pokračovanie] [David J. Malan - Harvard University] [To je CS50. - CS50.TV] 

To je CS50. To je koniec týždňa 9. Děkuju mnohokrát. Konečne. 9. týždeň. Mám to. Dnes budeme pokračovať v našom rozhovore o programovanie pre web s okom k záverečného projektu, nie preto, že musíte niečo urobiť webové pre konečné projekty, ale preto, že buď na záverečných prác alebo po CS50 je to určite smer, v ktorom moderný softvér sa deje. A napriek tomu, že to nie je v skutočnosti jednoduchá vec. V skutočnosti, jeden z najťažších vecí, ktoré urobiť, je aspekt designu. 

Napríklad, podľa návrhu máme na mysli skutočne dostať užívateľského rozhrania alebo užívateľské skúsenosti právo. Trúfam si povedať, - a my vieme z nedávnej problému sady keď pár z vás vysielal svoje nadávanie nejaký kus softvér alebo hardvér, ktorý privádza k zúrivosti vás, či už na akademickej pôde alebo mimo - je tu veľa miest tam, je tam veľa hardvéru tam, že druh hovno. Skutočnosť je však taká, že robiť veci, ktoré sa ľahko používajú a napriek tomu sú však silné je veľmi jednoduchá. Tak pre dnešok som sa opýtal Jozefa a Tommy sa pripojiť ma sem takže môžeme mať rozhovor, ako o dizajne a aké druhy myšlienkových procesov by mala začať chodiť cez hlavu keď si navrhnúť konečné projekty, vaše budúce úsilie. A potom sa s pomocou Tommyho sa pozrieme na niektoré z implementačných detailov. Ako môžete mať nejaké videnie na papieri alebo vo vašej mysli , Ktoré potom môžete spustiť programovo pomocou niektoré z technológií a techník sme začali hovoriť o tom, konkrétne JavaScript a ešte niečo novšie, a to AJAX, asynchrónne JavaScript. To vám umožní vytvoriť všetky dynamickejší z užívateľského rozhrania od načítania viac a viac dát postupne zo servera. Tak uvidíme niektoré z týchto úryvkov aj dnes. Ako stranou, ak máte záujem o sústredenie v informatike alebo minoring vo vede o počítačoch, viem, že tento piatok na poludnie v Maxwell Dworkin 221 bude pizza udalosť kde sa môžete dozvedieť niečo viac o počítačovej vede. Na svojej ceste von z dverí dnes budete môcť vyzdvihnúť neoficiálne príručka SK na Harvarde. Dáme ju na košoch mimo výške pása takže ak chcete chytiť to a naučiť sa niečo viac o SK, že tam bude pre vás, ako to bolo v týždni 0. Tiež ak by ste sa k nám pripojiť na CS50 obed v piatok o 13.15 zamierte do cs50.net/lunch. Bez ďalších okolkov, dám vám pedagogické kolega Joseph Ong. Ahoj. [Potlesk] Vďaka. Prvýkrát som sa dozvedel o návrhu bol v triede tu nazýva CS179. 

Profesor v tej dobe povedal nám príbeh o inom profesor kto šiel do hotela a používal kohútiky. Môže mi niekto povedať, čo sa 2 gombíky na ľavej a pravej robiť? [Študent] Horúca a studená. >> Horúca a studená. Dobré. To, čo bežne očakávať, že jo? Tento profesor po použití kohútik chce osprchovať, a on pokračuje používať. Myslí si, že ľavá a pravá strana sú pre teplú a studenú, nie? Ale môže mi niekto povedať, čo to vlastne robiť? Nejaké ruky? [Nepočuteľné Študent odpoveď] >> Jeden návrh je? [Nepočuteľné Študent odpoveď] >> Teplota? Takže jeden z nich kontroluje teplotu a ďalšie ovládacie? >> [Študent] tlak vody. Tlak vody. Dobré. Tento profesor vojde do toho, a v domnení, že sú kontroly teplé a studené, otočí ten správny, ktorý si myslí, že je pre horúci, celú cestu hore preto, že chce, aby sa teplú sprchu. No, to nie je naozaj odpovedať, tak on dostane toto nie je moc zábavné skúsenosti z toho, že v studenú sprchu, a všetci vieme, aký je to pocit. Toto je príklad konštrukčná chyba. Čo tým chcem povedať, že je jeho očakávania z kohútika nezodpovedá, čo vyšiel zo sprchy, ktorý je tak trochu nešťastné pre neho. Tak toto je príklad návrhu chyby, ktoré sa deje v reálnom živote. Ale uvidíme všetky druhy tie ostatné rovnako. Sme pravdepodobne fanúšikovia systému MBTA. To je podzemné systém skutočne v Londýne, ktorý hovorí, "Toto tlačidlo nie je v prevádzke." Prečo je to ešte tam? Prečo sme ešte jedno? Keď som bol malý chlapec, je tech pútavé jeden v dome, Ak je počítač zrúti, moja mama ku mne, mi ukázal túto obrazovku a požiadal ma, čo sa stalo. 

Ani neviem, čo to znamená. [Smiech] Čo? [Smiech] Niekedy máme pocit, ako vývojári softvéru sú len trolling nám. Ako užívatelia sme ako, "Čo sa deje? Niekto nám." To všetko príde na problém dizajne. Dizajn, ako môžeme vidieť, nie je čisto o estetike, to nie je o tom, ako veci vyzerajú. Vidíme tu, že tento malý pop-up tu vlastne vyzerá celkom pekne. Má tieň v pozadí, má cezhraničné rádiusov deje. Je to celkom dosť. Je to naozaj dobre navrhnutý, pretože to nie je príliš užívateľsky príjemný. To málo pop-up, ktorý príde naozaj nie je mi žiadne informácie o tom, čo sa deje, to mi nehovor, ako používateľ o tom, ako sa dostať z tejto chyby. Chceme myslieť na veci, že dizajn nie je. Po prvé, nie je to estetika. Je to tiež nie je plnkou vašu aplikáciu s hromadou zbytočných funkcií. Ak ste thajská reštaurácia, pravdepodobne nebudete chcieť byť zubár v rovnakom čase. A s otázkami Facebook, nie, že veľa ľudí používa ho a bolo to naozaj v jadre toho, čo stavali. A tak je to pekné myslieť ani tak na množstvo vecí, že ste uvedenie vašej žiadosti, ale kvalita a ako robíte, že užívateľský zážitok lepší vlastne zlepšenie na to, čo už máte. 

Stručne povedané, dizajn hovorí nám, čo by sme mali stavať. Napríklad, ak my budujeme niečo, čo nechal nás hľadať veci, ako je Google, napríklad by sa robiť veci spôsobom , Ktorá vyžaduje, aby používateľ vziať veľa kliknutí sa dostať na to, čo chcú, alebo by sme to mali robiť spôsobom, napríklad s Google Instant alebo automatického dokončovania že nám umožňuje dostať na naše výsledky rýchlejšie? Engineering zahŕňa, rovnako ako Tommy vám ukáže, vlastne stavali. Existuje mnoho typov designu. Napríklad, ak staviate niečo nasadiť niečo v krajine Tretieho sveta, kde nie je toľko elektriny, alebo že mnoho technológií, musíte navrhnúť to, čo staviate spôsobom, ktorý ľahko umožňuje prístup k ľuďom tam. Ale aké druhy z iných konštrukčných rozhodnutie môže byť alebo by mohli byť zapojené do niečoho ako je toto? Jo. Vidím ruku. [Nepočuteľné Študent odpoveď] >> Právo. Presne tak. Dostupnosť je jedna vec. Veľa ľudí si nemyslím, že o tom, "čo moje užívateľov?" ako extrémy oboch spektra. Mám užívateľov, ktorí by mohli mať postihnutie, že som nepremýšľal o a ja som premýšľal o navrhovaní pre bežného užívateľa. Internet je prístupný všetkým v dnešnej dobe, a ja by som sa navrhovaní pre tých ľudí rovnako. Aké druhy ostatných konštrukčných rozhodnutia môžete urobiť? Áno. >> [Študent] Tieto náklady. Náklady. Veľmi dobrá. Ďalšia vec, ktorú by sme mohli založiť naše konštrukčné rozhodnutia o nákladovo. Ak sme firma, chcete postaviť niečo, čo neberie moc náklady na výrobu ale môže predať za mimoriadne vysoké náklady, alebo nás môže dostať nejaký zisk. 

To všetko sú rôzne typy dizajnu, ale keď staviame na internete alebo keď budujeme niečo, čo pravdepodobne nestojí toľko vybudovať hneď, ako internetové aplikácie - nemusíte hádzať toľko kapitálu do neho , Aby niečo, čo skutočne funguje - to, čo sme viac starať o ich užívateľské skúsenosti. Hovoríme tomu užívateľský zameraný dizajn. V podstate to, čo užívateľ centred dizajn zahŕňa je uvedenie sami v topánkach vašich používateľov. Ak niekto zaregistruje na to, čo staviam, že som zrejme prišiel do môjho konkrétnu aplikáciu s cieľom na mysli, s úlohou chcú dokončiť. A vašou úlohou je nielen pomôcť im splnenie tejto úlohy ale pomôcť im splnenie tejto úlohy spôsobom, ktorý je efektívny, intuitívne, a, ako sa niektorí človek povedal: tam, prístupné. Čo účinnosť znamená? Účinnosť znamená, ako rýchlo sa moje užívateľské dokončiť úlohu, môj rozhranie. Má to trvať veľa kliknutí na ne sa dostať z jedného miesta na druhé? Je to únavné? Majú plniť veľa opakovaných úloh? Chceme, aby sa tento proces čo najefektívnejšie takže nemajú robiť tie druhy vecí. Pokiaľ ide o intuitívnosť, to znamená, že napríklad v prípade, že užívateľ zdvihne moje rozhranie, je to pre nich ľahké sa dostať z miesta na miesto? Je to pre nich ľahké zistiť, čo majú kliknúť v mojom rozhranie aby pre nich dosiahnutie cieľa alebo úlohu, ktorý chcú dosiahnuť? 

A konečne, ako jeden človek povedal: tam, dostupnosť je veľmi dôležité. [Samec reproduktor] To príde na prístupnosť pre veci, ako je vízia, páči, ako mám vlastne navrhnúť niečo pre niekoho, kto je slepý? Oh. Pre ľudí, ktorí nevidia vôbec, máme niečo ako čítanie z obrazovky. Čo by ste mali urobiť, je, mali by ste stavať svoje webové stránky takým spôsobom, , Že napríklad, konkrétne technológie, čo nazývame - Existuje veľa vecí, teraz. Myslím, že tam sú čítače obrazovky JAWS volal. Mnoho z týchto vecí sa spoliehajú na to, čo nazývame oblasť pravidlá aby čítal von k užívateľovi, čo je na stránke. Pre tých, ktorí nemôžu vidieť, je potrebné sa uistiť, že tieto obrazovky čitateľovi môže skutočne vyzdvihnúť obsah na stránke a môže skutočne ukázať svojich užívateľov, Ak nevidíte, aspoň si môžete stále pochopiť obsah na stránke. Jo. Dobre. Dosť rozprávanie o dobrom dizajne. Poďme hovoriť o zlej konštrukcie. To sú veci, ktoré by ste nemali robiť. Môže mi niekto povedať, o svojich skúsenostiach s Craigslist a to, čo si myslia, že nie je tak veľký o tomto návrhu? Áno. >> [Študent] Myslím, že je to príliš veľa slov v jednej oblasti. Príliš veľa slov, nie? Úplne ohromujúci. Prídete na tejto stránke a budete uvítání s celou partiou vecí až sem že možno ani jedno. Napríklad, žijete v jednom štáte, ktorý nezačína tohto listu. Povedzme, že žijete v Texase, alebo tak niečo. 

Musíte prechádzať celú cestu dole na stránku sa dostanete do miesta, ktoré na. Som z Bostonu, tak nech mi to hľadať v Massachusetts. Kde je Massachusetts? Oh, je to tu. Oh, to je Boston. Dobre. Poďme sa pozrieť na Boston. [Smiech] Docela ohromujúci, že jo? Trápne veci tamto. [Smiech] Povedzme, že som hľadal niečo žiť. Koľko ľudí vlastne používa Craigslist? Tony vás. Tam sú dosť zlé spôsoby, ako sa pozerať na to, ale poďme sa pozrieť na to. Aký je rozdiel medzi img a pic? Môže mi niekto povedať,? Tam vlastne nie je žiadny rozdiel. Znamenajú presne to isté, ale majú rôzne etikety pre nich z nejakého dôvodu. Keby som kliknite na Obsahuje obrázku, nič sa nedeje na stránke. Vlastne som sa na tlačidlo Hľadať znovu sa niečo stane. Čo by mohlo byť lepšie design rozhodnutia, ktoré by sa dalo robiť tam? Ak som kliknúť na tento filter, by som asi chcete filtrovať podľa konkrétnej akcie alebo že konkrétne kategórie. Takže namiesto toho, aby musel stlačte Hľadať znova, mohol som automaticky robiť filtrovanie druh štýlu Google, kde sa to urobiť okamžite. [Malan] Ale nie tvorí, ako sme ich videli doteraz musí byť fyzicky predložená tým, že udrie Zadajte aspoň alebo kliknutím na tlačidlo? Ako ste videl tak ďaleko, že naozaj máte na tlačidlo Odoslať robiť tie veci. 

Ale ako Tommy Vám ukáže, do sekundy, tam sú vlastne spôsoby, ako môžete tak, že keď kliknete na tú vec, že ​​môže automaticky odoslať to, čo nazývame AJAX požiadavku a získať dáta späť a filtrovať výsledky okamžite. Existujú tony vecí, ktoré sú zle s týmto rozhraním. [Malan] Môžete vyhľadávať Cambridge? Je tu niečo, čo trochu anomálne tu, kde vám záleží Cambridge a napriek tomu ste stále Westford, Spring Hill, West Newton a ako. Pravdepodobne nie je ideálne. Pravdepodobne >> nie je ideálne. Ako by som mohol byť schopný vykonať užívateľa zážitok lepšie na túto konkrétnu stránku? Áno. >> [Študent] Usmernenia. Dobre. Inštrukcie v akej zmysle? [Študent] Napríklad vec pre nových užívateľov, ktorí ani nevedia, čo Craigslist je alebo neviete, čo máte robiť. Právo. Takže vysvetľovať, čo Craigslist je na tejto stránke je dôležité. Môžeme vlastne povedať, užívateľov, čo táto stránka je v skutočnosti pre. Ak som len na návšteve to, vidím veľa miest. Ja ani neviem, čo to znamená. Ale oveľa dôležitejšie je, len pri pohľade na toto rozhranie, pamätajte si, že musel rolovať dole veľa vecí nájsť konkrétnu komunitu že som vlastne záležalo na tom. Čo je to rýchlejší spôsob, ako by som mohol urobiť, že? Áno. [Študent] Rozdeľte ich do oblastí na východ, západ. Dobre >>. Mohol by som ich rozdeliť do viacerých kategórií, ktoré by mi mohol pomôcť rýchlejšie určiť ako sa dostať do daného miesta. [Študent] Dajte rozbaľovací zoznam. Právo >>. Dobre. Mohol by som použiť drop-down menu, pretože máme pevnú sadu vecí a my sme mohli ukázať im v drop-down menu. Takto to nezaberá toľko miesta na obrazovke. Ale ešte lepšie ako to, čo môžeme robiť? Áno. >> [Nepočuteľné Študent reakcie] >> Môžete povedať, že znova? >> [Študent] Search box. Jo, vyhľadávacie okno. To je skvelé. Čo môžeme skutočne urobiť, je, keď sa pozrieme späť na sklíčka, vyhľadávacieho poľa. Autocomplete. Veľmi jednoduchý spôsob, ako vyhľadávať na základe výsledkov, ktoré poznáte, sú v sade. Keď začnem písať BO, len ukázať mi všetky výsledky, ktoré majú BO vnútri nich. Tak som si veľmi ľahko nájsť konkrétny jediná, ktorú chcem ísť do namiesto toho, aby museli listovať to naozaj veľkého zoznamu. 

Jedná sa o všetky druhy naozaj nízko visiace ovocie, že niekto, kto ich vykonáva Craigslist môže skutočne urobiť, aby zážitok na internetových stránkach oveľa lepšie pre ich konkrétne užívateľa. Dobre. Dosť hovorí o zlých stránkach. Poďme hovoriť o Facebooku. Keď Facebook vyšiel, a najmä Facebook fotky, tam bolo veľa ďalších služieb v dobe, ktorá by mohla robiť presne rovnaké veci. Mohli organizovať svoje fotografie do albumu. Čo môžete urobiť, je môžete usporiadať do sád rovnako. Dalo by sa usporiadať ich podľa dátumu. Dalo by sa robiť všetky tieto konkrétne veci. Ale neviete niekto, čo robil Facebook fotografií exploduje v čase, keď bol prepustený? Áno. >> [Štud] Tagy. Tagy >>. Presne tak. Máme Milo cez tú, ktorá je náš pes maskot s týmto šatkou CS50. Môžete vidieť, že máme túto funkciu značkovanie v stredu. A to, čo sa Facebook fotky tak zaujímavé z hľadiska použiteľnosti je to, že vlastne dovolil ľuďom cez tento zapojiť svojich priateľov v ich fotografií. Pre Facebook, pretože ich stránky sú najmä sociálne, je to o budovaní tento druh spoločenskej atmosféry. To zlepšilo zážitok fotografií omnoho viac pretože by sa skutočne začalo hovoriť, "To sú spojenia medzi ľuďmi, a to sú fotky o ľudí, ktoré skutočne záleží. " Súčasťou je tiež akoby narcizmus. Ľudia chceli byť označení na fotky a podobné veci. Aj keď to nie je nutne dobré ľudské zvláštnosť, zároveň je to na základe dobrej dizajne rozhodnutia preto, že ľudia skutočne záleží veci, ako je tento. Tak to je Facebook fotky. 

Ale poďme hovoriť Facebook všeobecnejšie. Som si istý, že veľa ľudí, ktorí tu majú názory na Facebook, obaja dobrý dizajn rozhodnutia a zlé prevedenie rozhodnutia. Takže poďme ventilovať alebo byť šťastný. Poď. Viem, že vás všetkých používať Facebook. Niekto musí mať niečo zlé povedať, alebo niečo dobré povedať o tom. Áno. [Študent] V noviniek je tu veľa vecí, ktoré som sa naozaj záleží. News Feed sa ukázať veľa vecí, ktoré ste možno nezaujíma. Máte priateľov na Facebooku, ktorí ste sa stretol na 2 alebo 3 roky a uvidíte ich správy výsledky objavovať vo vašom noviniek a naozaj nestarám o to. Facebook skutočne robil úsilie, aby to lepšie, a že som sa snažil tlačiť príslušné výsledky v hornej časti noviniek ako neskoré takže ste vlastne vidieť veci priateľmi, ktoré sú relevantné pre Vás alebo Vašich blízkych priateľov. Ešte niečo? Áno. [Nepočuteľný študentov odpoveď] >> Môžete povedať, že znova? [Študent] Tieto reklamy sú pomerne nenápadné. >> V akom zmysle? [Nepočuteľné Študent odpoveď] Nemajú svetlo na obrazovke, ako bannery. Dobre. To je dobre. Ak si pamätáte na internete od 90. rokov - >> [Malan] Bol som tam. >> Bol tam. [Smiech] Možno si ešte spomínate blikajúce Gify pozadí, iskrivé veci, GeoCities štýl druh vecí. To naozaj nie je príklad dobrého dizajnu pretože je to naozaj neodvádza pozornosť od obsahu. Umenie Yale stránky mával animované GIFy ako ich pozadie a vy ste nemohli prečítať niečo na stránke, ale myslím, že niekto skutočne hovoril s nimi, a teraz je to trochu iné. [Malan] Je to oveľa lepšie. >> Je to oveľa lepšie, teraz, ako môžete vidieť. >> [Malan] Ach jo. Jednoducho skvelé, len - Jo. Dobre. 

Časť z toho je tiež, aby vaše stránky možno veľmi minimalistický a veľmi zrozumiteľné takže veci na stránku prietoku spôsobom, ktorý je veľmi logické a nie sú v ceste každého iný. Aké druhy iných vecí sú dobré na Facebooku alebo zlý o Facebooku? Proste majú konštrukčné rozhovor tu. Oh. Kde? Jo. [Študent] Nový Timeline systém umožňuje prehľadávať osoby profilu o svojej minulosti. Ooh, časovú os. Časová os je skvelá vec, pretože umožňuje stonky svojim priateľom späť, keď boli na strednej škole. Časová os je dobré, pretože to umožňuje filtrovať pomocou obsahu veľa rýchlejšie, To vám umožní nájsť veci, ktoré by inak boli nasnímané vám naozaj dlho nájsť len pohyb hore a dole, hore, hore, hore, hore, hore, ako vrátiť sa späť v čase. Ale potom je tu aj trochu nevýhodu, aby, že pokiaľ ide o užívateľské skúsenosti. Čo by to mohlo byť? Big slovo, ktoré začína P-R. >> [Študent] Ochrana osobných údajov. >> Privacy, že jo? Ochrana osobných údajov je obrovský užívateľské skúsenosti problém. To je jedna z vecí, ktoré nenávidím najviac Facebooku teraz. [Smiech] [Malan] Ako mám teraz. David si neuvedomil, to sa skutočne stalo až do včerajška. Takže teraz už vie, že zakaždým, keď som chatovať mu, že viem, že bol ignoruje ma. [Malan] trápne časť bola som vlastne ho ignorovala, a ja som nevedel, že on vedel, že som ignoroval ho. [Smiech] Ochrana osobných údajov je obrovský problém. Môže tu niekto mi povedať, čo by mohlo byť zle Facebook súkromia okrem toho, že sa také veci? Čo je to obzvlášť ťažké urobiť s ohľadom na Facebooku súkromie? Taká je hlavná otázka. Áno. >> [Študent] Skryť svoje fotografie z niektorých ľudí. Právo. Presne, skryť vaše fotografie z niektorých ľudí. Majú tento malý, malé tlačidlo v pravom hornom rohu, ktorý vám umožní prepínať súkromie fotografiu. Ich možnosti ochrany osobných údajov sú veľmi rôznorodé a medzi rôznymi druhmi menu. 

Oni sa dostali oveľa lepšie o tom v poslednej dobe, ale to bolo v prípade že kedykoľvek by ste chceli, aby sa vaše priateľov z pozorovacích fotografií, budete musieť prejsť veľmi komplikované 5-stupňovým procesom bytia ako, dovoľte mi, aby som na tento odkaz, teraz mi dovoľte kliknite na tlačidlo znova, dovoľte mi, aby som znovu kliknite, dovoľte mi, aby som špecifikovať, ktoré ľudia nemôžu vidieť moje fotografie. To nie je zvlášť dobré na strane Facebooku je pretože toľko o skúsenostiach sa vlastne dáva im slobodu kontrolovať, čo ľudia môžu vidieť. Hovoríme tomu užívateľský ovládací prvok a slobodu. Ak si nie ste nechať vašu užívatelia robia, že spôsobom, ktorý je efektívny a intuitívne, potom sa vaše užívateľské skúsenosti nie je naozaj tak veľký vôbec.  Chceli ste chcel povedať niečo o Facebook? Ako môžem túto funkciu vypnúť? [Ong] nemožno túto funkciu vypnúť, a to je obrovský použiteľnosť chyba na strane Facebooku. Táto funkcia - som skutočne pozrel do toho včera - je to buď, že nemôžete urobiť, alebo to je pochovaný niekde veľmi, veľmi hlboko v záhyboch Facebook, pretože nemôžem prísť na to, ako túto funkciu zakázať vôbec. [Malan] Ale niekedy tieto rozhodnutia nie sú zrejmé pretože ste nám dali veľa užitočnú spätnú väzbu na rôznych CS50 aplikácií a webové stránky, ktoré kurz používa. Sme nevykonali všetky tieto požiadavky a návrhy. 

Časť, ktorá je pre získanie toľko žiadostí, že sa jedná o funkciu času, ale niekedy jednoducho urobiť vedomé rozhodnutie, ako, "Ďakujem vám za návrh, ale my nesúhlasíme." Tak ako sa vám vlastne rozhodnúť, čo by ste mali robiť, ak vaši používatelia, že by si mal niečo urobiť aj keď nie nutne? Je to jemná rovnováha medzi skutočne načúvať tomu, čo užívatelia hovoria a skutočne má nejaký riadok, kde hovoríte, "Nebudeme robiť to, čo títo užívatelia hovoria." A najmä, myslím, že tam bol citát Henryho Forda, že to zhŕňa celkom dobre. "Keď som sa spýtal ľudí, čo chcú, by povedali, že chcú rýchlejšie koňa." Môže mi niekto nejako šprýmař oddelene, čo to v skutočnosti znamená citát? Nie je to len, že používatelia vedia, čo chcú, ale je to viac, že ​​- [Študent] Oni nevedia, čo je možné. V časti nevedia, čo je možné. Tease, že okrem trochu viac. Čo tým myslíš, že? [Nepočuteľné Študent odpoveď] To je dobre. Čo si myslím, že sa snažíme povedať je, že ľudia vedia, čo chcú. Chcú rýchlejší kone. To, čo naozaj chcú, je schopnosť pohybovať sa rýchlejšie, ale naozaj neviem, médium, ktorým k dosiahnutiu, že. Keď príde na užívateľa a užívatelia vám niečo povedať a povedia vám, "My chceme tieto funkcie a tieto funkcie a tieto funkcie," nechcete nutne myslieť, "Nechaj ma ísť napred "A realizovať to, čo by sa výslovne hovorí," ale to, čo chcete myslieť, je, "Aké myšlienky môžem dostať z toho?" Čo vlastne chcú? 

A odtiaľ, čo môžete urobiť, je navrhnúť niečo, čo spĺňa tieto požiadavky ale nie nevyhnutne tak, že používateľ očakáva, že bude spokojný. Takže niečo ako finálových projektov, vo veľmi reálne, čo je užitočné, heuristická, pokiaľ ide o výrobu niečo lepšie, najmä ak návrhár má túto aroganciu o ňom kedy ste nejako viete, čo je najlepšie, môžete mať vstup z vašich užívateľov, ale ako sa vlastne ísť o získanie, že spätná väzba? V záverečných prác, veľmi konkrétne, čo vytvára optimálne výsledky tu? Čo produkuje optimálne výsledky - a ja pôjdem cez to v druhom - je tento proces rozvoja a potom testovanie a potom iterácie. Čo tým chcem povedať testovanie je zvyčajne, keď si navrhnúť niečo si myslíte, že je to celkom dobrý, ako, "ja som tak skvelý designer. Každý sa bude páčiť." A potom ste to tam, a ľudia nemajú naozaj rád nejakého dôvodu. Čo musíte urobiť, je budete musieť vziať časti vecí, ktoré ľudia robia, ako a prerobiť veci, ktoré ľudia nemajú radi. To znie ako veľmi zrejmým procesu, ale tento proces neustále iterácie na vrchole toho, čo ste už postavený, je proces, ktorý vám pomôže nielen zdokonaliť svoje vlastné návrhárske schopnosti, ale tiež vám pomôže zdokonaliť dizajn tak, že ľudia skutočne ocenia váš produkt ešte viac ako predtým. 

Pôjdem cez viac konkrétne príklady toho, čo by sa Vám mohol vlastne robiť. Ako akési posledný príklad výrobku, poďme sa pozrieť na kajaku. KAYAK, keď to vyšlo bolo veľmi, veľmi populárny. Môže niekto hádať, prečo? Aké sú druhy vecí, ktoré rád o tom, ak ste použili alebo aké sú druhy vecí sa vám nepáči? Áno. >> [Nepočuteľné Študent odpoveď] >> Dobre. To je súčasťou toho je nechať užívateľ mať dotaz, ktorý je oveľa obsiahlejší ako veľmi reštriktívny jeden ako, "Musíte na vyzdvihnutie dátum začatia "A vy budete musieť vybrať dátum ukončenia." V skutočnosti, to vám umožní byť flexibilný na to, a to vám dáva všetky letov v tomto rozsahu. Ešte niečo? [Študent] Ide napríklad o poplatky v cene. Robia zahŕňajú poplatky v cene. Dane a veci skutočne ísť rovno do tejto ceny v ľavej hornej časti takže nie ste napálil do myslenia, že ste skutočne platiť za 240 dolárov letu keď je to naozaj 330 dolárov. Ešte niečo? Áno. [Nepočuteľné Študent odpoveď] Nie som si istý, či sa skutočne nechať urobiť. Aj Might Be Wrong. To by mohlo byť zaujímavé, ak chcete, aby väčšiu váhu na konkrétnych filtroch tak, že tlačí výsledky súvisiace s týmto filtrom na vrchol. Ale môže mi niekto povedať, čo je tak osobitného na tomto ľavej strane? Ako ste sa tradične pozrieť hore na poschodie na internetové služby pred tým? 

Áno. >> [Nepočuteľné Študent reakcie] >> Môžete povedať, že - [Študent] Každá letecká spoločnosť. Jo >>. Každá letecká spoločnosť má svoje vlastné internetové stránky. To konsoliduje veci. A? [Študent] Vieš presne, čo keď budete opúšťať. Viete presne, v koľko hodín odchádzaš, ale súvisí s filtrami najmä. Dovoľte mi, aby som vytiahnuť kajaku. Ach, Bože, pop-ups. Bad užívateľské skúsenosti. Čo sa stane, keď som sa presunúť tohto jazdca? [Štud] Automatické aktualizácie. >> [Ong] Automatické aktualizácie. To je niečo, čo je veľmi dôležité. Pred tým, keď ste chceli pozrieť hore na poschodie, ste museli dať do miesta vstupu, váš výstup umiestnenie, stlačte tlačidlo Hľadať, to by proces, ktorý a zobraziť výsledky. Ak by ste chceli zmeniť svoju otázku, mali by ste sa vymáčknout dvakrát, vstúpiť do nového dopytu od nuly, a potom to znova a znova. Pekná vec, o niečom, ako je to, že používa veľmi [nezrozumiteľné] vec v stredu. Kedykoľvek budete niečo také, to strieľa mimo žiadosť a vráti vám všetky výsledky okamžite. Tento druh okamžitú spätnú väzbu, je niečo, čo robil KAYAK veľmi populárne pretože je to naozaj jednoduché pre mňa len zmeniť svoj dotaz a prísť na to, veci, ktoré sú okolo určitého rozsahu bez toho, aby museli ísť tam a späť, tam a späť, tam a späť. Tak to sú všetky možné veci, ktoré chcete myslieť, keď ste navrhovaní svoje webové stránky. Ako môžem robiť to veľmi efektívne pre moju užívatelia prejsť, čo pracujú na a aby sa ich konečným cieľom je tak rýchlo, ako je to možné? [Malan] A do bodu Jozefa staršie o užívateľoch nie sú nevyhnutne vedieť, čo chcú, na základe toho, čo ste už počuli o HTML a máte políčka, prepínače, zvoľte menu, vstupné pole a podobne, ako by ste implementovať pojem výberom počiatočný čas letu? 

Ktoré z týchto rôznych UI mechanizmy by ste používať? Ak ste práve poznať množstvo kódu HTML, ktorý bol vyučovaný pred a viete, že vstupy sú prepínacie tlačidlá, checkboxom, drop-zostrelí, a vstupné pole, čo by si prirodzenou voľbou boli pre uchopenie dáta? [Študent] vstup. Vstupné >>. Alebo možno aj drop-dole so všetkými dátami, nie? Takže s zložitejších UI mechanizmov, ako je tento na ľavej strane, ktoré môžete implementovať, môžete tento proces oveľa intuitívnejšie s jazdcom pretože čas je spojitá, a ľudia obvykle nemyslí na to, pokiaľ ide o diskrétnych blokov. Dobrá. Posledná vec. Desať použiteľnosť heuristiky. Všetky tie veci, s ktorými sme hovorili o tom pravdepodobne spadajú do jednej z týchto kategórií. Ak pôjdete na tento odkaz, ktorý sa stránky budú umiestnené na internet, budete skutočne môcť, ako si navrhnúť svoje stránky, aby tieto heuristiky na pamäti a tieto pravidlá palca. Pre vaše projekty, čo radím vám, aby ste s cieľom navrhnúť app lepšie je to papier prototypovania ako prvý. Ak uvažujete o svojej žiadosti, veľmi rýchlo načrtnúť to, čo chcete, aby to vyzeralo, ako a zabezpečiť, aby všetky krabice sú usporiadané tak, že je veľmi intuitívne pre užívateľa na použitie a dokonca ukazujú tieto papierové prototypy svojim priateľom a začať cieľových skupín. Len si 2 alebo 3 ľudí dohromady a požiadať ich, aby práve kliknite na týchto papierových prototypov, a ukázať im nové obrazovky, aby zistili, či skutočne pochopiť, čo sa deje. 

Čo chcete urobiť, je dať im úlohu, motivovať, že úloha, a daj im na aplikáciu a nechať ich používať. Nedávajte im pokyny za tým. Ak chcete skutočne nechať interakciu s vašej aplikácie tak, že vám umožní vidieť ako by použiť, ak ste neboli stál vedľa nich. A to je veľmi dôležité. To vám dá veľa nových poznatkov, aby sa ľudia dostať okolo konkrétnych vecí tak, že som nezamýšľal je? Sú použitím určitých rozhranie mechanizmov na obrazovke takým spôsobom, ktorý je druh háčiky? Nemal som v úmysle pre nich to tak. A akonáhle ste hotoví s tým, čo chceš robiť? Vaša konštrukcia skaly, nie? Čo chcete urobiť, je, že chcete vyvíjať a potom to, že proces znovu. Tak ukáž to priateľom, akonáhle ste ho vyvinul, otestovať, vyvíjať, testovať, vyvíjať, testovať, určiť iteráciou, ďalej a ďalej a ďalej. Prevedenie je veľmi opakovaný proces v tomto zmysle. Máte skutočne niečo postaviť a potom si uvedomí, čo o ňom že ste si neuvedomil, pred a vrátiť a zlepšiť z toho. Teraz, rovnako ako pre rozvojové časti, to je to, čo Tommy sa chystá ukázať vám po prestávke a ako by ste mali byť schopní realizovať niečo ako autocomplete spôsobom, ktorý je veľmi jednoduchá. [Malan] Ako Tommy nastaví tu, otázka potom. Mnoho z prvých webových stránok - a keď povedal Josef 1990 v štýle webovej stránky, bolo to implementácia, kde, ak ste chceli zvoliť čas začiatku a čas konca, úprimne povedané, späť v deň, a dokonca aj na niektorých webových stránkach dnes, spôsob, ako to urobiť, je vybrať si hodinu z drop-dole, si vyberiete minút od drop-dole, možno si vyberiete AM, PM, a potom urobíte, že ďalšie 3 krát. A tak s 6 kliknutí a možno aj posúvanie Vaše užívateľské môže skutočne poskytnúť nejakú dátum a / alebo časový rozsah v tomto zmysle. 

Takže rozhodne optimálne a predsa tak ďaleko sme videli žiadne vyjadrovacie možnosti v niektorom z jazykov Pozreli sme sa na to urobiť niečo viac sexy páči tento jazdec začiatku a čas konca. Ale ak si myslíte, že späť do týždňa 0, keď sme hovorili o Scratch, tam taky nebolo widgety, ktoré jednoducho určité veci. Naozaj jednoducho musel tieto základné princípy, ako je vedenie a podmienky a ako. Takže trochu som premýšľal veľmi abstraktne teraz, nezávisle na údaje o HTML, Čo sa naozaj deje s niečím, ako je tento čas začiatku a čas konca jazdcom? Keď som sa pohnúť myšou a ja kliknite na tej malej mrkvou symbol na ľavej a začnete preťahovať, programovo, čo je to chcete byť schopní realizovať aby sa tak stalo? Aké otázky, čo Boolean výrazy chceš mať možnosť požiadať? Čo sa vlastne deje? Sammy? [Študent] Kde je pozícia kurzora? Dobrý >>. Kde je pozícia kurzora? To bolo niečo, čo sme potrebovali vyjadriť späť Scratch, či to bolo založené na mieste, alebo dokonca farbu alebo podobne. Môžete spomenúť niekedy tak krátko v pondelok bolo všetky tieto veci nazývajú udalosti vo svete webu, a tak je tu veci ako onclick a onkeypress a OnKeyUp a onmouseover a onmouseout. Takže si uvedomiť, že aj tieto veci sme užívali ako samozrejmosť na webe s weby ako Facebook a Gmail, aj keď nemajú tušenie, ako by ste možno realizovať, pretože nie je nič, aj ako to v prednáške alebo problém Nastaviť 7, si uvedomiť, že s týmito presnými rovnakými základy, s HTTP a parametre a GET a POST, so základnými HTML vstupov, ktoré Pozreli sme sa na doteraz a za chvíľu s programovými mechanizmy, ktoré Tommy je asi predstaviť môžete začať vyjadriť sám seba, rovnako ako ste v týždni 0 by veľmi intuitívne pretiahnutím. 

Takže s tým povedal, Tommy MacWilliam a niektoré nové kúsky skladačky pre nás pre web. Dobrá. Moje meno je Tommy a ja budem hovoriť o JavaScriptu. Len disclaimer: Ja som toho názoru, že JavaScript je najlepší programovací jazyk v celom celom svete. Existuje veľa ľudí, ktorí so mnou nesúhlasia, ale je to jednoducho úžasné. Akonáhle sa vrátite do C, ak máte napísať C pre iné triedy alebo iných jazykov, je to len naozaj frustrujúce vo všetkých low-level detaily, ktoré majú na zabŕdnuť a Takže ak ste niekedy smutno o tom, ako nepríjemné C je písať, sa vrátiť, napísať nejaký JavaScript. Je to nirvána. Budete sa cítiť oveľa lepšie o svoje zlý deň. Mnoho mágie JavaScript pochádza z jej schopnosti manipulovať veci ktoré sú už na stránke. Keď sme napísali naše PHP skripty, boli vykonané na serveri, a nakoniec, že ​​PHP skript pravdepodobne vypíše HTML. To HTML bol poslaný klientovi, a potom, že to bolo. Ak PHP chcel pridať tlačidlo na stránku, napríklad, to môže naozaj urobiť. Mala by mať k tomu, aby celý nový HTML súbor a odoslať, ktorá do prehliadača. S JavaScript vieme, že môžeme aktualizovať veci, zatiaľ čo oni sú už na stránke, a kvôli tomu sme schopní poskytnúť oveľa viac okamžitú spätnú väzbu, ktorá bude naozaj zlepšiť užívateľský komfort na našich webových stránkach. Len rýchly rekapitulácia selektorov JavaScript. Vieme, že keď budeme stiahnuť HTML stránky, že sa to byť zastúpený v DOM. 

DOM pamätaj je to práve tento veľký strom, kde sú prvky vzťahujúce sa v tomto veľkom hierarchii. Keď sme pracovali s databázami v PSet 7, jedna z prvých vecí, ktoré sme potrebovali vedieť, ako to urobiť je vyhľadávať v databáze. Máme túto veľkú užívateľom tabuľky, a niekedy sme len chcem povedať, "Chcem len niektoré z týchto užívateľov, ktorí zodpovedajú nejakú podmienku." Podobne, keď máme DOM potrebujeme nejaký spôsob, ako to dopytovania. Potrebujeme nejaký spôsob, ako hovoriť, "ja chcem všetky tlačidlá, ktoré vyzerá podobne ako "Alebo všetkých snímok na stránke." A tieto selektory nám umožňujú urobiť. Takže len rýchla rekapitulácia. To prvé, kto tu je, to # predloží, čo je to, že bude na výber? Pamätá si niekto? [Nepočuteľné Študent odpoveď] >> Jo, presne tak. To bude pre vybranie prvku na stránke, ktorá má ID odoslať. A tak, aby hash tag hovorí, že tento výber bude fungovať s ID. Ako o druhej, to. Stred, čo bude, že vybrať? Jo. >> [Študent] Class. Presne >>. Toto sa teraz vyberte podľa triedy. Rozdiel medzi ID a triedy tu je všeobecne ID musí byť jedinečná v čo space hľadáte cez. Takže ak ste hľadali cez celú webovú stránku, mali by ste mať iba 1 prvok s touto určitou ID, takže v tomto prípade predloží. S tried, na druhej strane, môžeme mať viac ako 1 prvok na rovnakej strane sa rovnakej triedy. To by mohlo byť užitočné pre ostatných chcem vybrať všetko, čo sa sústredil na stránke skôr než len 1 vec. 

A konečne, táto posledná je tu trochu zložitejšie, ale čo je to bude vybrať z DOM? [Nepočuteľné Študent odpoveď] >> Čo je to? [Študent] Všetko, čo tag. >> Máme 2 diely tu. Druhá časť sa povedať chcem vybrať tieto značky so značkou vstupu, tak ľubovoľný prvok, ktorý je vstupnou tag. Ale ja nechcem, aby stačí vybrať všetky vstupy pretože niečo ako tlačidlo submit by mohol byť vstup a niečo ako textové pole môže byť vstup. Takže s týmito hranatými zátvorkami hovorím chcem len vybrať tie prvky ktoré sú typu text. Niekde v mojom HTML tag mám atribút nazvaný Typ, a hodnota tohto atribútu musí byť text. Tak ako o tejto prvej časti tu? Prvé slovo tohto voliča je forma potom mám priestor a potom tento vstup časť. Čo to urobiť, uvedenie formulár pred ním? To sa deje v podstate obmedziť našu otázku. To by mohol byť prípad, že máme niektoré vstupy na stránke že nie sú potomkami formulára. Čo to bude robiť, je to, že som len chcem vstupné tagy, ktoré majú niekde nad nimi niektorých rodičov prvok formulára. A tak týmto spôsobom môžeme tieto ďalšie hierarchické otázky takže nemajú len vybrať všetko zodpovedajúce danej voliča. Môžeme trochu obmedziť rozsah tohto dotazu na niečo iné. Takže teraz, keď vieme, ako vybrať prvky na stránke, Poďme hovoriť trochu o AJAX. AJAX je stále veľmi módne skratka, ktorá znamená pre Asynchronous JavaScript and XML. To len tak sa stane, že XML je to len nejaký spôsob, ako reprezentovať dáta. 

Tento druh stratené popularity v poslednej dobe, takže X v AJAX nie je používaný po celú dobu. V podstate to, čo AJAX nám umožňuje urobiť, je HTTP požiadavky z kontextu JavaScriptu. Keď sme v našom webovom prehliadači a my navigáciu okolo strán a my kliknite na odkaz, čo náš prehliadač urobí, je, aby požiadavka HTTP, čo sme ako odkaz kliknite na tlačidlo. Ale to nie je vždy ideálne, pretože ak je to ten prípad, potom ako David hovoril, musíme vždy, aby používatelia kliknúť na tlačidlo Odoslať alebo kliknite na odkaz tak, aby sa niečo stalo, čo sa deje zapojiť požiadavky HTTP. Takže s AJAX môžeme tieto požiadavky menom JavaScript. To znamená, že ak používateľ pracuje so stránkou alebo sa niečo stane, môžeme skutočne urobiť programový požiadavku na inú súboru PHP na našich webových stránkach alebo čokoľvek iné a načítať dáta, ktorá tento súbor vypľuje. Poďme sa pozrieť na príklad AJAX. To je naša CS50 Financie stránku, s ktorou snáď niektorí z nás pozná. Ak sa pozrieme na HTML stránky, tu vidíme, že som pridal pár vecí, z ktorých jeden som dal tento formulár identifikátor. Povedal som id = "form-citácie". Urobil som to len preto, že to bude robiť to trochu jednoduchšie vybrať z DOM pretože som si len urobiť veľmi jednoduchý dotaz. To, čo chcem urobiť je chcem opraviť nejaký problém s CS50 financií. Takže ak by sme ísť do finance.cs50.net, Zakaždým, keď chcete získať cenovú ponuku, musím kliknite na toto tlačidlo Vyžiadať, a že Získať cenovú ponuku tlačidla potom vezme ma na inú celú stránku. A keď chcem ďalšie citát, musím trafiť na tlačidlo Späť a potom som ho zadajte do, Mám ponuku, a ja som narazila na tlačidlo Späť. To naozaj nie je najlepšie užívateľskú skúsenosť. Kto by v skutočnosti využívajú stránky, ak je to tak pomalé, aby sa ceny akcií? Takže to, čo chcete urobiť s AJAX je odstrániť, že krok ísť na samostatnú stránku aby na zobrazenie výsledkov. 

Čo sme naozaj len pýtam, je to naozaj len malá cena, a to je len naozaj malé množstvo dát. Takže nie je potrebné pre mňa ísť inou celú HTML stránku, stiahnuť celú novú dávku HTML, možno stiahnuť niektoré ďalšie obrázky, niektoré iné CSS súbory len pre mňa odpovedať na túto veľmi jednoduchú otázku o tom, ako moc to robí legálne náklady. S AJAX by sme mohli urobiť túto oveľa jednoduchšie. Vidíme tu, že som prepojenie v súbore JavaScriptu s názvom quote.js. Poďme skutočne otvoriť tento súbor. Nie je tam. Všetky moje súbory JavaScriptu sa bude umiestnený v HTML tak, že webový prehliadač môže pristupovať. Potom máme samostatný adresár tu pre JavaScript, a teraz je tu quote.js. V hornej časti tohto súboru to tu hovorí, že chcem počkať na celú stránku má byť vložený predtým, než som sa snaží urobiť čokoľvek. Prečo je to nutné? Ukazuje sa, že ďalšia vec, ktorú budem robiť, je tu začať hľadať pre prvok ktorá zodpovedá niektoré voliča. Ak je táto JavaScript je niekedy vykonaný pred tento prvok je vložený na stránke, potom sa všetko snažím urobiť, je nebude fungovať pretože budem snažiť vybrať niečo, čo tam nie je ešte. Tak toto line up hornej hovorí, že chcem, aby si počkať, až všetko je načítaný takže sme zaručené, že všetky prvky Hľadám sú skutočne na stránke. Tento znak dolára tu znamená, že som pomocou knižnice s názvom jQuery. This jQuery knižnica nám umožňuje použiť tieto selektory, že sme sa pozrel na. Tým, že hovoríte $ potom odovzdá v ako argument toto # form-cenovú ponuku, Ja som teraz výberom tejto formulár, ktorý sme práve sa pozrieť na. Teraz mám zastúpenie tej forme v pamäti nejako. 

Na tomto objekte sa, toto zastúpenie formy, Ja som teraz pomocou funkcie vyzval. Čo táto funkcia robí, je, že to bude pripojiť obslužnú rutinu udalosti. Udalosť, ktorá budeme načúvať, je udalosť submit. Takže, keď používateľ klikne na tlačidlo Odoslať, ktoré alebo stlačí kláves ENTER, táto udalosť je vyhodia. Po pripojení do toho, teraz môžem prepísať predvolené správanie formulára. Bez tohto JavaScript, by odoslaní formulára na čokoľvek PHP súboru sme použili v tomto atribúte action. Ale namiesto toho, som teraz povedal, počkaj, počkaj, počkaj, ja nechcem, aby si skutočne urobiť. Chcem, aby to stalo predtým, než idete a odošlite do určitej PHP súbor. Teraz, čo chcem robiť? Na tomto mieste chcem použiť AJAX nejako nahrať, čo cena akcií je. Prvá vec, ktorú musím vedieť, je to, čo legálne užívateľ vzhliadol. Ak chcete, že budem používať iný volič. Jedná sa o tretí volič sme sa na pred. To hovorí, že chcem začať tento formulár prvok s ID pre formu-citátu. Potom niekde vnútri tohto formulára, musí byť vstupný prvok ktorá má názov symbolu. Ak sa pozrieme späť na našu HTML, videli sme, že sme mali vstup [názov = symbol]. To znamená, že to bude k výberu, že textové pole, ktoré používateľ je písanie do. To je pekné. Máme textové pole. Teraz už len potrebujeme vedieť, čo je vo vnútri nej. K tomu, aby sme mohli túto metódu volať tu, tento val., a to hovorí, že viem, čo textové pole máte. Chcem, aby si mi povedal, čo to je užívateľ zadať do tohto textového poľa. Teraz máme reťazec s názvom symbol, ktorý sa rovná bez ohľadu užívateľ zadali dovnútra To je pekné. Môžeme použiť tento reťazec, aby sa naša žiadosť. To je nová funkcia tu, toto $, okrem sme už bude výber prvkov, budeme sa volanie inej funkcie, ktorá je nám poskytli, by jQuery. Táto funkcia AJAX je to, čo sa vlastne deje, aby sa táto požiadavka HTTP. Takže musíme povedať, že to pár vecí. Prvá vec, ktorú musíme povedať túto funkciu je miesto, kde chcem požiadavka ísť. Niekde v mojom projekte som tento súbor vnútri HTML adresári nazvanom quote.php. Môžem prístup k tomuto súboru, videli sme, rovnako ako to, keď pôjdem na localhost / quote.php. 

Chcem JavaScript, aby žiadosť na tejto stránke. Aký typ požiadavke teraz? Videli sme, že predtým, ako má formulár, že method = "post" atribút, a to znamená, že to bude robiť požiadavku POST, takže to nebude dať nič v adrese URL, skôr ako GET, ktoré by len byť aktivovaná, ak sme len prístup na stránku s webovom prehliadači, napríklad. Teraz sme hovoril, že chcete, aby sa požiadavka HTTP POST na stránke sa nachádza na quote.php. Keď sme sa predložiť formulár, nezabudnite by sme mohli pristupovať vstupných prvkov vnútri tohto formulára s týmto $ _POST premenné. Zatiaľ v príbehu sme sa skutočne odoslaný spolu akýchkoľvek dát, ale. Práve sme povedal, že robíme AJAX požiadavku a tu je druh žiadosti robíme. Teraz musíme skutočne odosielať dáta na stránku. K tomu, že môžeme použiť túto vlastnosť nazvanú dáta. Hodnota tejto vlastnosti je vlastne asociatívne pole. Dôvodom pre to je, že nám umožňuje odoslať viac než len 1 kus dát. To je dôvod, prečo máme tieto zložené zátvorky tu vnorená vnútri týchto ďalších zložených zátvoriek. Kľúče v týchto asociatívnych poliach sa bude rovnaká vec ako sú meno pripisuje v našich formulárových prvkov. To znamená, že ak pošlem pozdĺž kľúče symbolu, to znamená, že moja PHP stránka môže prístup k týmto dátam pomocou $ _POST [symbol] rovnako ako sme to urobili predtým, keď sme boli odoslaní formulára. A teraz skutočné údaje chceme poslať bude hodnota vnútri tohto asociatívneho poľa. 

My uložené tento text do premennej s názvom symbol, a tak posielame spolu teraz kľúč symbolu a hodnota akejkoľvek Užívateľ napísal dovnútra Teraz sme túto žiadosť HTTP, naše PHP súbor vykonaný, a to bude odosielať dáta staré klientovi, že práve z tejto požiadavky. Teraz musíme reagovať na čokoľvek server povedal nám. K tomu, že máme túto poslednú vlastnosť tu nazýva úspech. Hodnota tohto úspechu kľúča sa vlastne bude funkcia, a toto je jeden z naozaj skvelých vecí, ktoré môžete urobiť pomocou JavaScriptu. Nielen, že môžete mať ints alebo pole ako hodnotu vnútri asociatívneho poľa, môžeme tiež funkciu. Takže tým, že hovorí úspech, to je môj kľúč. Dvojbodka hovorí, že sem príde hodnotu, a teraz hodnota je v skutočnosti funkcie. Takže nepotrebujeme k tejto funkcii meno samo o sebe. Môžeme len povedať to bude nejaká funkcia. Bude to trvať 1 argumentu. Argument pre túto funkciu bude bez ohľadu na server poslal nás späť od podania žiadosti. Rovnako ako keď náš prehliadač podá žiadosť, server odošle niečo späť a prehliadač zobrazí ju, v súvislosti s AJAX sme práve vytvorili požiadavku, server poslal niečo späť, a teraz sme, že reprezentovaný ako reťazec. S týmto reťazcom Rád by som sa zobrazí, že na stránke. Ak chcete, že budem mať jednu poslednú voliča. Chcem vybrať prvok s ID ceny. To je len prázdny div, že som si vytvoril na stránke, a chcem nastaviť obsah tohto div ako niečo, čo server poslal nás späť. Ja som vlastne upravený quote.php trochu. 

Skôr než volanie render a spresnenie niektorých stránku, quote.php teraz sa jednoducho bude vytlačiť hodnotu zásob ako reťazec. Takže ak ste boli skutočne navštíviť stránku, mali by ste jednoducho vidieť, že malé reťazec z ohľadu na cenu akcií je. Jedna posledná vec, ktorú musíme urobiť, je tu len uistite, že táto funkcia vracia false. Čo to hovorí, je, že keď som vo vnútri obslužné rutiny udalosti a že popisovač udalosť vracia false miesto vracia hodnotu true, to znamená, že nechcem, pôvodná udalosť na oheň. V tomto prípade, ak sa nemala žiadne JavaScript a my predložený formulár, náš webový prehliadač sa povedať, "ja pošlem, že dáta spolu," a oni pošlú na inú stránku. Pretože sme pomocou AJAX teraz, že to nie je potrebné poslať užívateľa na inú stránku. Sme len tak zobrazenie výsledkov dynamicky na rovnakej strane. My naozaj nechceme, aby nikam, a ja chcem zostať na rovnakej stránke. Takže tým, že vráti false, aby sme zaistili, že formulár nie je to pre nás. Poďme sa pozrieť na to, čo to vlastne vyzerá. Naša quote stránka vyzerá rovnako. Dovoľte mi, aby som vytiahnuť inšpektor sem, takže môžeme vidieť, čo sa deje. Či je to trochu menej obrovský. Pamätajte, že ak budeme otvárať kartu sieť, to je miesto, kde môžeme vidieť všetky požiadavky HTTP ktoré sa dejú na stránke. 

Pre symbol dovoľte mi, aby som zadajte AAPL a kliknite na položku Získať cenu. Teraz sme videli, že podiel Apple stojí určitý počet dolárov práve objavila na stránke, ale URL nezmenila vôbec. V skutočnosti, je tu HTTP požiadavku, že sme práve urobil. Urobili sme požiadavku POST na quote.php. To dáva zmysel. To je to, čo server poslal nás späť. Je to už tento gigantický HTML dokument s obrázkami a podobné veci, ktoré, je to len riadok textu, a potom sme len zobrazí riadok textu. Ak sa vrátime do hlavičky, a uvidíme, čo sa skutočne poslal vnútri tejto požiadavky HTTP, môžeme vidieť tu dole, že sme poslali pozdĺž kľúč symbol a hodnotou AAPL, čo je to, čo užívateľ napísal dovnútra To je pekné, ale je to stále trochu nepríjemné. Stále mám kliknúť na toto tlačidlo sa dostať na cenu akcií. Sme zaneprázdnení ľudia a nemáme čas na tlačidlo tlačidla. Google si to uvedomila pred chvíľou, keď vykonávali Dynamické vyhľadávanie. Čo Google Instant robí, je, ako si píšete, že práve začína zobrazovanie výsledkov pre vás takže nemusíte mať strach o ešte kliknutím na tlačidlo Hľadať. Vlastne, zábava príbeh vzťahujúce sa k tomu. Akonáhle Google Instant vyšiel, boli ľudia ako, "Whoa, to je super úžasné." "To je tak cool." A študent sa na Stanforde, ktorý bol 19 v tej dobe z tejto stránky s názvom YouTube instant. Všetky Instant YouTube sa je efektívne vyhľadávať YouTube okamžite. Takže skôr než ísť na YouTube.com a stlačte Hľadať, keď začnem písať do YouTube Instant niečo ako CS50, sme mohli vidieť, že to pokúša na pomalé pripojenie k internetu naplnenie týchto výsledkov žije. K tomu, že môžeme skutočne urobiť veľmi jednoduchý úpravu nášho quote.js súboru. Práve teraz sme pripevnenie túto udalosť, ak je predložený formulár. My naozaj nechceme, aby používateľ odoslať tento formulár už, takže sa poďme miesto požiaru sa táto udalosť zakaždým, keď užívateľ stlačí kláves. Ak chcete, aby poďme najprv zmeniť udalosť z predložiť KeyUp. To znamená, že skôr než čakať na formulár odoslať, zakaždým, keď je stlačené tlačidlo, niečo sa stane. To už zmysel priložiť tento KeyUp udalosti celého formulára. Sme naozaj len o tej vyhľadávacieho poľa. 

Ak chcete vybrať, že teraz, môžeme zmeniť to byť, skôr než forma-citácií, form-quote a budeme mať vstup (typ = text), alebo by sme mohli povedať (name = symbol) - čo chceme. Teraz je tu ešte jedna posledná vec, čo musíme urobiť. Nezabudnite sa sem, keď sme povedali return false sme si povedali, že nechceme, aby predvolenú udalosť na oheň. Ale to len tak sa stane, že keď vypneme, že teraz, čo sme zadajte nebude zobrazovať v prehliadači už pretože by to bolo predvolené správanie písaní do textového poľa. My už chcete prepísať, takže sa poďme zničiť to return false. Ak šetríme, že a obnovte stránku, teraz, keď som začal písať AAPL uvidíte, že cena akcií na dne tu je dokončenie automaticky. Takže tu je CS50 Financie instant. Vlastne zábava príbeh o YouTube Instant je, že študent tak nejako to písal ako 1-nočný projektu, a druhý deň mu bola ponúknutá práca v YouTube generálneho riaditeľa. Takže tak jednoduché, ako to, že ste CS50 študenti, môžu sa vaše konečné projekty vám prácu na YouTube. Niečo ako, že je naozaj skvelý nápad pre konečného projektu, nie? Sme mali nejaké existujúce funkcie, ktoré sme chceli integrovať s Sme zlepšiť užívateľský komfort trochu, a zrazu hľadá niečo na YouTube Instant môže byť oveľa jednoduchšie ako ju vyhľadať na pravidelnom YouTube. Tak to je AJAX v kocke. 

V príkladoch, že Jozef bol zobrazený, videli sme veľa autocompletes, a tie autocompletes sú naozaj užitočné, pretože nemáme pamätať - Napríklad, ak si nepamätáte cenu akcií pre Apple a my sme jednoducho viem, že je to aa niečo, skôr než len ako mi hovorí, "Podiel tejto veci stoja toľko peňazí," Ja by som trochu rád vedel, čo akcie začať s aa. Môžeme to urobiť naozaj pekne s Bootstrap knižnici, ktorá je už súčasťou vnútri CS50 financií. Ak ste prišli sem do tagu JavaScript a prejdite dole na Typeahead, je to len pekná plugin že niekto už písal pre nás, a môžeme ľahko používať jeho funkcie, ako je tento. Som napísal v a tu je zoznam niektorých štátoch, ktoré začínajú s A. Povedzme, že myslím, že to je naozaj cool, a to je čas pre mňa, aby ich zaradila na mojej strane. Ukazuje sa, že je to naozaj, ale naozaj jednoduché. Poďme preskočiť tu quote3.js. Môj súbor vyzerá trochu inak. Tu dole všetky moje veci AJAX je rovnaký. Chcem načítať stavové údaje, bez toho aby museli ísť na inú stránku. Ale teraz chcem použiť tento plugin. Bootstrap dokumentácie je skvelé príklady toho, ako presne mám urobiť, že. Chcem povedať, "Tu je vstup, ktorý chcem automatického dokončovania," a budem volať túto funkciu s názvom typeahead, a že sa to zvládnuť všetky Typeahead veci pre nás. To bude inicializovať zoznamu, bude to robiť všetky naše filtrovanie. Jediná vec, je potrebné vedieť, je, aké údaje sme autocompleting na. Tak som našiel túto kľúč jednoduchým čítaním dokumentácie a pri pohľade na príklady. Keby som ho kľúč zdroje, hodnota tohto kľúča je to len nejaký rad vecí, chcem automatického dokončovania. Táto premenná pochádza z tohto iného súboru. Aj otvoriť symbols.js. 

Tento symbols.js je práve tento naozaj, ale naozaj veľká pole obsahujúce reťazce všetkých týchto akciových symbolov z NASDAQ. Ak chcem skočiť späť do HTML, tak jharvard, vhosts, globalhost, html, šablóny, quote_form. Vzhľadom k tomu, že sa teraz nazýva quote3.js, dovoľte mi, aby som si zmeniť súbor JavaScriptu som vrátane tu. Teraz mám quote3.js, takže budem načítať v tomto samostatnom JavaScript súboru, ten, ktorý má túto Bootstrap Automatické dokončovanie. Teraz, keď som sa skočiť späť do prehliadača, stránku znovu načítať, a začnem písať aa, tu je moja autocomplete. A bolo to naozaj tak jednoduché, že. Mal som 1 riadok kódu, ktorý práve povedal, "Tu sú veci, ktoré chcem, aby automatického dokončovania," a zrazu som to naozaj, ale naozaj pekné funkčnosť s nie veľa úsilia vôbec. Ako ste vyvíjate webové stránky, a najmä čela strane vecí, budete toto je prípad veľa. Existuje veľa, veľa, veľa naozaj cool voľných knižníc tam ktoré robia to super ľahké robiť veci takto. Môže niekto myslieť na žiadne nevýhody jednoducho autocompleting na tomto rozsiahlom zozname symbolov? Čo by mohlo byť niečo, čo nie je najlepšie s týmto prístupom? Jo. >> [Študent] Čas, ak máte veľa [nepočuteľné] Jo. Práve teraz prevzatí tento obrovský JavaScript súbor a tam je veľa symbolov. A ak máme veľa vecí, by to mohlo trochu zvýšiť latenciu nielen vyhľadávania ale aj sťahovanie aktuálny súbor. Great. Ešte niečo? Práve teraz nie je tam žiadny skutočný zmysel pre EHP. Keby som zadajte A, spoločností, ktoré sa objavia tu nemusí byť z najpopulárnejších spoločností, ktoré začínajú s A. 

Než sa dostanem k Apple, môže to trvať aj niekoľko viac znakov nájsť to, čo som hľadal. Tento autocomplete nemá tento pocit EHP. Je to len tak povedať, "Čokoľvek, čo zodpovedá idem na zobrazenie." Namiesto toho, rád by som sa nejako integrovať nejaký význam do mojich vyhľadávania. Keď idem sem na Yahoo! Finance, finance.yahoo.com, Ak sa snažím zadať symbol na stránke Yahoo! Finance tieto a začnem písať GOOG, mám pekný zoznam vecí. Je zrejmé, vyzerá to, že Yahoo! Finance robí niečo múdrejší tu. Majú nejaký význam, a majú tiež ďalšie informácie ako meno populácie. To je niečo, čo nemôžem dostať len s mojím Slovník zoznamu symbolov. Chcem to, a tak som to vziať. Ak chcete, aby Poďme urobiť pár vecí. Pozrime sa najprv otvorte inšpektor na tejto stránke pretože sme videli, že táto stránka nie je nakladanie na všetky, takže je to asi pomocou AJAX nejako načítať svoje dáta. Môžeme zistiť, aké údaje to načítania. Keby som kliknite na karte Sieť, tie sa bude všetky požiadavky, ktoré začínajú byť vypalovaný. Teraz, keď som zadajte brečky, môžeme vidieť, že som práve dostal novú HTTP požiadavky. To je pravdepodobne tam, kde že dáta pochádza. Samozrejme, keď som sa pozrieť na tejto adrese, ktorá je trochu podivne pomenovaný, môžeme vidieť, že to je presne to, kde Yahoo sa vyšle svoje dáta z 

Vytvoril som samostatný súbor s názvom suggest.php, ktorá je veľmi podobná v duchu na vyhľadávaciu funkciu. Je to v podstate udělá dotaz na adresu URL Yahoo, získať späť niektoré údaje, a odoslať ju späť ku mne. Teraz, skôr ako používať tento veľký, obrovský zoznam symbolov, Môžem použiť Yahoo pekné relevantnosti veci, a ja nemám sťahovať, že masívne JavaScript súbor. Ja len bude strhnúť skutočne relevantné reklamné symboly. Poďme skočiť do toho. Takže html, js. Sme teraz v quote4. Teraz sme už používate tento veľký zoznam súborov JavaScript. Ale je tu malý druh designu problému tu. Povedali sme, že v AJAX je asynchrónny. Čo to znamená, že keď urobím AJAX požiadavku, tak tu na linke 8, to je miesto, kde sa má AJAX požiadavka skutočne vystrelil. Povedzme, že teraz mám nejaký kód sem, že to bude robiť nejaké veci Páči upozorní užívateľa, alebo zmeniť niečo na stránke. Čo sa to sa nestane, je prehliadač nebude čakať na túto žiadosť, aby aj naďalej pred príchodom dole a biť tento riadok. To je asynchrónny časť. Bude to, aby sa táto požiadavka a povedať, "Kedykoľvek dokončíte, "Vrátiť a zavolať, že funkcie, ktoré som ti zavolať vnútri úspechu." To znamená, že nemôžeme len stiahnuť všetky zásoby vopred. Musíme podať žiadosť a čakať na niečo, aby sa vrátil. To znamená, že pred, mohli by sme jednoducho povedať Bootstrap, "Tu je zoznam vecí, ktoré chcem, aby ste automatického dokončovania." Nemôžeme už nie robiť, že už preto, že nevieme, to, čo chceme, aby skutočne autocomplete na. Našťastie, Bootstrap si na to, pretože to sú inteligentné chlapi tamto, a oni vlastne dali nám iný spôsob, ako naložiť túto Typeahead plugin. Skôr, hodnota tohto zdroja majetku bol práve tento veľký poľa vecí automatického dokončovania. 

Teraz Vlastnosť source je vlastne funkcia, a cieľom tejto funkcie je zistiť, čo tie veci do automatického dokončovania je. Tak, ako to bude na to prišiel, je, že to bude pýtať Yahoo! Finance čo najlepšie veci na autocomplete sú. Ak chcete, že budem robiť veľmi podobnú AJAX požiadavku. Chystám sa požiadať túto stránku na suggest.php. Chcem poslať pozdĺž symboly stále. A teraz môj úspech, Bootstrap dokumentácie mi , Že za účelom naplnenia tento zoznam vecí, všetko, čo potrebujete urobiť, je odovzdať v tomto poli teraz funkciu spätného volania. Ale počkajte. Ak toto má byť pole a AJAX ma posiela staré text, Ako je to možné? To predstavuje nový spôsob výmeny dát s názvom JSON. V tomto prípade sme nielen zaslaním jednoduché reťazec textu. Teraz máme čo do činenia s týmto zložitejším zoznamu symboly akcií. Tieto symboly akcií môže tiež zahŕňať veci ako názov spoločnosti alebo aktuálnych cien. Len pomocou veľkej dlhý reťazec, ktorý nie je naformátovaný v žiadnom predvídateľným spôsobom sa nebude najlepší spôsob, ako dostať tieto údaje zo servera Yahoo so mnou tak, že nemôžem ľahko zrozumiteľná. JSON je technológia, ktorá využíva toho, ako sme sa vytvoriť asociatívne pole v JavaScriptu. To vyzerá veľa ako JavaScript asociatívneho poľa, a v skutočnosti, že je to preto, že je. JSON je skratka pre JavaScript Object notácie. To je v podstate dohodnuté formáte pre prenos dát tam a späť. Tu tento objekt JSON alebo to JSON asociatívne pole je mi poslal nejaké údaje o kurze. 

Kľúče tohto poľa, sú veci ako predmetu, ktorý má hodnotu cs50, a tu dole môžeme vidieť, že môžem mať hodnotu, ktorá je pole. Nemám robiť veci ako vyradil reťazcov a pozrite sa na čiarkami a robiť šialené veci, ako že. Pretože toto je deklarovaná v tomto formáte JSON, JavaScript a jQuery už funkcia previesť reťazec , Ktorá vyzerá ako tento JSON do skutočného JavaScript asociatívneho poľa , Že môžeme pracovať s Robiť, že je tak jednoduché, ako hovorí, že už je to súbor, suggest.php, ma poslal naspäť jednoducho reťazec textu, ale ja viem, že to bude ma poslal späť JSON. To znamená, že JSON môže byť prevedený do JavaScriptu asociatívneho poľa. A tak jQuery, rád by som, aby si to pre mňa urobiť. To znamená, že sa táto reakcia tu parameter, To je už len reťazec. Vzhľadom k tomu, že sme povedali, že jQuery prichádza nejaký JSON, jQuery bude dosť chytrý, aby povedal, "Chcel ste JSON?" "Chystám sa previesť to do asociatívneho poľa pre teba." Poďme vlastne sa pozrieť na záložke Sieť akonáhle budeme mať quote4.js. Budeme zmeniť a obnovte stránku. Teraz budem písať v-znova. Urobil som pár žiadostí na suggest.php, ale teraz to odpoveď, skôr než len reťazec, je to JSON. Tak som si otvorený zložená zátvorka hovorí, "Tu je asociatívne pole." 

Prvá a jediná kľúč tohto asociatívneho poľa sa nazýva symboly, a potom je tu pole všetkých príslušných symbolov teraz prichádza z Yahoo! Finance, nie je z tohto obrovského zoznamu. To je, ako môžem jednoducho naplniť túto automatického dokončovania plugin s niektorými údajmi, ktoré nie je pochádzajúcich z miestneho súboru, ktorý je už vopred stanovené ale z niečoho iného. Ukazuje sa, že skutočne môžeme využiť technológiu zvanej JSONP, alebo JSON s polstrovaním, bude to odstrániť túto suggest.php prostredníka. Ale namiesto toho, aby robil to, poďme miesto pozrieť na to, ako môžem zlepšiť to ešte viac. Moc sa mi páči Bootstrap je Typeahead. Je to naozaj pekné. Ale my sme stále dobrí JavaScriptu a chceme trochu to sami, Možno sa pozrieť na to, čo tento plugin mohol robiť. Poďme už použiť tento Typeahead vec, a skúsme sa tento zoznam navrhovaných zásob sami. Tu v quote6.php budeme začať rovnakým spôsobom. Zakaždým, keď niekto niečo napíše, chceme, aby AJAX požiadavku. To je podobné nášmu pôvodnému CS50 financií Instant. Skôr než aby žiadosť o quote.php, sme teraz snažia o to požiadajú rovnakom súboru ako predtým, táto suggest.php, ktorý je len tak vytiahnuť dáta z Yahoo! Finance. 

Opäť, sme stále čaká JSON, ale teraz, pretože Typeahead nerobí to pre nás, musíme tiež zaslať spolu hodnotu, ktorá je vo vnútri aktuálneho textového poľa. Teraz vieme, na čo sa pýtať Yahoo! Financie pre, a tak teraz je tu funkcia, ktorú chcete vykonať, akonáhle požiadavku dokončenie. Nemáme plugin, aby sa zoznam pre nás, takže tu je miesto, kde sme sa to vlastne bude stavať zoznam návrhov. Ak chcete, že, rovnako ako v PHP sme spojené tieto veľké reťazce HTML potom sme si vytlačili je, môžeme urobiť rovnakú vec presne v JavaScriptu. Najprv budeme začať tento reťazec s názvom návrhy, a tento reťazec je len bude obsahovať nejaký HTML. Chceme, aby to bolo zoznam vecí, takže budeme začať s týmto zoznamom tag, a teraz budeme určiť iteráciou cez všetky symboly, ktoré boli vrátené späť k nám. Pamätajte si, pretože sme povedali Typ dát: "JSON ', to nie je reťazec. To je už pole pre nás. To je naozaj cool. Môžeme jednoducho povedať: "Chcem, aby si pripojit prvok zoznamu." Dáme ju vnútri prvku v časti, ktorá, budeme ho triedu návrhov, takže vieme, čo to je, a teraz je tu symbol, že sme sa vrátili z Yahoo! Finance. 

Akonáhle sme vytvorili prvok pre každý zo symbolov sme dostali späť, chceme len uzavrieť zoznamu. Takže teraz návrhy predstavuje tento malý fragment HTML ktoré keď sa na stránke bude zoznam vecí, ktoré hľadáte. Teraz sa poďme skutočne dať na stránke. K tomu, že som vlastne vytvoril ďalší prázdny div a ja som mu poskytla identifikátor návrhov. Rovnako ako sme si stanovili obsah div, že by zobrazujú cenu stavových údajov, teraz len chcete nastaviť obsah tohto div sa, čo je tento reťazec ktorý obsahuje tieto symboly. Pomocou tejto metódy HTML, toto odporúčanie premenné, tento reťazec je reťazec HTML. Chcem, aby si to HTML a vložte ho vnútri div s názvom návrhy. Práve sme pripojená niečo DOM teraz. Pridali sme nejaké nové prvky do DOM, že teraz môžeme zobraziť na stránke. Poďme sa pozrieť, ako to vyzerá. Ak načítame na quote6 a teraz sa vrátime späť, teraz, keď som sa začať písať AAPL, že už nemáme, že Bootstrap automatického dokončovania, ale teraz máme tento zoznam, ktorý sme urobili sami. To je trochu škaredšie ako Bootstrap Typeahead, napríklad, ale to nám umožní urobiť jednu vec. Keď sme sa pozerali na tento Bootstrap pluginu, sme videli, že keď sme autocompleted, jeden z autocomplete hodnôt bol AAPL. To nemusí byť tak užitočné. Ako užívateľ by som nemal okamžite rozpoznať všetky symboly akcií. Čo som asi väčšou pravdepodobnosťou rozpoznať sú firemné skutočné mená. Takže by to bolo naozaj užitočné, ak skôr než hovoriť AAPL týmto povedal niečo ako Apple Inc Vzhľadom k tomu, že sme valcované to sami, môžeme veľmi ľahko urobiť. Poďme otvoriť náš posledný citát súbor tu, tak quote7. 

To je to isté. Práve som vytvoril ďalšie PHP súbor, ktorý sa vráti k nám viac ako len symboly. To bude tiež dať nám späť spoločnosti mená. A tak robíme to isté. Robíme AJAX požiadavku. Po požiadavku bol dokončený, budeme vykonávať túto funkciu tu, a táto funkcia bude vybudovať veľkú reťazec prvkov. Ale rozdiel je, že hodnota týchto zoznamov je už len symbol, je to teraz meno. Takže máme jeden malý problém. Keď sme využiť naše vyhľadávanie, musíme nejako odovzdať symbol. Nemôžeme prejsť vyhľadávacie niečo ako Microsoft Corporation. Musíme ju odovzdať MSFT. Keď sme písať HTML, máme veľa pekných vstavané atribúty. Mohol s ním spojené href alebo triedy. Ale to, čo naozaj potrebujeme, je pre každý z týchto odkazov mať symbol akcií s ním spojené. Nie je vstavaný HTML atribútu fotografiu symbol, ale našťastie, HTML5 nám umožňuje vytvoriť vlastné atribúty, aby čo chceme. Tým, že hovoríte dát-symbol, som predstavil nový atribút ktorého meno som skladá, a je to v poriadku, pretože som začal s týmito dátami. Budeme uložiť vnútri mesta sa symbolu zo skladu teraz. Čo to znamená, je to, že aj keď sme zobrazenie hodnoty názvu spoločnosti vnútri nášho autocomplete, sme stále pamätať na symbol ktorý je spojený s každú spoločnosť. Spôsob, akým to robíš, je vo vnútri tohto prvku. Takže to znamená, že musíme urobiť ešte jednu zmenu. Keď sme na neho teraz, musíme skutočne využiť symbol atribútu skôr než len jeho hodnota. Ak sa späť hore, prikladáme obslužnú rutinu udalosti návrhy. Kedykoľvek je jeden z týchto návrhov kliknutí teraz, chcem niečo urobiť. To, čo chcem urobiť, je zmeniť hodnotu tohto vstupného poľa. Teraz chcem nastaviť rovnaký val funkciu. 

Takže bez argumentov táto funkcia val vracia na vás, čo je už v textovom poli, ale ak dáte to reťazec, to bude trvať tento reťazec a vložte ho do textového poľa. Ja výberu jeho textové pole rovnakým spôsobom. Je to meno je symbolom vnútri formulárov citátu. Teraz som zaslala mu hodnotu atribútu dáta-symbol. Táto vec tu je nový, to $ (to). Čo sa to týka, je prvok, ktorý bolo kliknuté. Môžeme vidieť, že nie sme pripojení udalosť click na každý prvok s triedou návrhu jednotlivo. Skôr, blížime sa to trochu inak. Namiesto toho hovoríme, kedykoľvek niečo vnútri tohto div námety, ktorá pamätajte je len kontajner pre tohto zoznamu, ak niečo vnútri tohto div kliknutí a má triedu sugescia, Chcem túto udalosť na oheň. V podstate to, čo to znamená, že môžeme urobiť, je, že sme mohli znovu použiť rovnaký obslužnú rutinu udalosti pre všetky veci v zozname. Takže nemáme mať jednu obslužnú rutinu udalosti pre prvý prvok a rôzne udalosti pre druhý prvok. Môžeme namiesto toho povedať, "Chcem rovnaké obslužné rutiny udalosti sa vzťahuje na všetko v mojom zozname." Ale musíme to nejako vedieť, ktorý prvok bolo kliknuté. Tento "to" kľúčové slovo predstavuje práve to. To je predmet, ktorý práve klikli užívateľom. Ak som klikol 3. odkaz, to predstavuje prvok tejto tretej odkaz, čo znamená, že by som mohol dostať svoj atribút, data-symbol, ktoré poznáme musí obsahovať symbol, ktorý je spojený s firmou som klikol. Ak by sme skočiť späť na náš finančnej stránke, môžeme vidieť, že až začnem písať niečo ako MSFT, sme už stále len na reklamné symboly, sme teraz dostali skutočné spoločnosti. Ale keď som kliknite na jednu z týchto spoločností, môžeme vidieť, že sme skutočne vyplnenie textové pole nie je s názvom firmy ale s tým, čo bolo uložené v týchto dátových atribútov. A tak keď som vlastne prezrieť jeden z týchto prvkov pravým kliknutím a kliknutím na tlačidlo Skontrolovať prvok, môžeme skutočne vidieť, ako to vyzerá. 

Označiť toto je niečo, čo sme vytvorili vo vnútri, že pre vedenie keď sme boli budovanie že reťazec HTML. Je vidieť, že týmto dát symbol má hodnotu MSFT, čo je veľmi dobrá. To je to, čo sme očakávali. To je symbol, a to je, ako sme sa dostali na hodnotu, ktorá sme potrebovali použiť vnútri tohto textového poľa. To je dosť na dopytový formulár, pretože to je niečo nudné. Poďme urobiť nejaké rýchle vylepšenie nášho portfólia stránku. Ak ste použili CS50 Financie na chvíľu a môžete začať kupovať a predávať veľa zásob, nakoniec táto tabuľka dostane docela veľký, a budete chcieť burzové, samozrejme. Akonáhle tabuľka je naozaj, naozaj veľký, mohlo by to byť užitočné pre užívateľa, aby sa pokúsili hľadať cez neho. Vnútri vyhľadávacieho poľa, ak začnem písať niečo ako Disney a hľadajú pre svoje ilustrácie Mickey Mouse, môžeme vidieť, že tabuľka je teraz filtrovanie na základe toho, čo som práve napísal dovnútra Táto funkcia vyzerá Super komplikované, ale je to naozaj, ale naozaj jednoduché s jQuery a JavaScript. Tento portfolio.php súbor obsahuje súbor JavaScriptu s názvom portfolio.js. Poďme sa na to pozrieť. Takže html, js, portfólio. Tu je miesto, kde robíme, že vyhľadávanie na stole. Prvá vec, ktorú musím urobiť, je pripojiť obslužnú rutinu udalosti tohto textového poľa pretože vieme, že chceme, aby naše filtrovanie funkcie na oheň zakaždým, keď užívateľ stlačí niečo, pretože nemáme čas na hľadanie tlačidiel. Prvá vec, ktorú musíte urobiť, je zistiť, čo používateľ hľadá, rovnako ako sme to urobili predtým. Toto kľúčové odkazuje na aktuálnu prvok je užívateľ interakciu s 

Vzhľadom k tomu, že používateľ je interakcia s vyhľadávacieho poľa, $ Predstavuje pole pre vyhľadávanie, tak this.val nám dáva to, čo je vo vnútri vyhľadávacieho poľa je užívateľ aktuálne píšete. Takže, čo teraz chceme urobiť, je chceme určiť iteráciou cez všetky riadky vnútri nášho stola. Ak chcete vybrať všetky riadky v našej tabuľke, dal som, že tabuľka k ID tabuľky portfólia, a každý riadok je reprezentovaný prvkom TR, takže výber bude vrátiť ku mne veľkú poľa všetkých riadkov v mojom stole. Teraz chcem, aby iterácii, že pole. Mohol by som si pre sláčiky, ale jQuery skutočnosti nám poskytuje pekný funkciu s názvom "každý." Čo každý robí, je každý prijíma jeden argument, a tento argument je funkcia. Čo to urobí, je, že to bude platiť túto funkciu na každý prvok vo vnútri tohto zoznamu. Táto funkcia má jeden argument, ktorý je e, a keď sa vykoná táto funkcia, tento e sa bude nahradený prvom riadku, potom v druhej rade, a potom sa tretí rad. Týmto spôsobom, to je to isté, ako beh pre sláčiky a potom zisťuje aktuálny prvok na základe indexu vnútri vašej slučky for. Na každej iterácii, pre každý z týchto prvkov v tabuľke, Chcem zistiť, či texte prvku - text bunky vnútri tejto rady - zodpovedá tomu, čo som hľadal. Tento veľký dlhý reťazec príkazov je, ako by som mohol urobiť, že. Po prvé, opäť, to sa týka - pretože je to vo vnútri nové funkcie - toto je teraz aktuálny riadok v tabuľke. Chcem, aby sa aktuálny riadok v tabuľke, a chcem sa dostať všetky svoje deti. Nezabudnite, DOM je hierarchickej strom, , Čo znamená, že prvky majú rad detí. 

Táto. Deti funkcia sa vráti na mňa späť maticu všetky prvky že sú deti, v tomto prípade, riadok v tabuľke. To je proste bunky vnútri tejto rady. Ja len chcem, aby vyhľadávať v prvej bunke. Táto. Prvá funkcia hovorí, že mi na prvý prvok v danom poli. Potom Odkazová funkcie hovorí, že ma presne to, čo je vo vnútri tejto bunky pretože chcem prehľadávať tohto textu. Konečne, poďme previesť na malé písmená, takže môžeme urobiť textové nezáleží na veľkosti písmen otázky. Napokon, chceme zistiť, či sa tento reťazec vo vnútri tabuľky obsahuje reťazec sme hľadali. IndexOf funkcie v JavaScriptu robí len to. To nám hovorí, či je tento reťazec obsahuje iný reťazec. Ak je to pravda, že bunka obsahuje to, čo som hľadal, potom chcem, aby sa ubezpečil, že je to uvedené. Zobraziť metóda bude hovoriť, "Zobraziť element." Pokiaľ toto nie je ten prípad, potom to znamená, že bez ohľadu na pátram, nie je obsiahnutá v tomto riadku, a tak sa chcem schovať, je od užívateľa. To dosahuje že pekný filtrovanie účinok, ak už vidíme celú tabuľku. Ak máte záujem o tom, ako tento burzový rovnako, budeme písať zdroj on-line. Ale je to naozaj jednoduché. JQuery má úžasné metódy pre tieto animácií a manipulácie CSS vlastnosti. Tak, to je to pre mňa. 

Čo potom čaká? Ako uvidíte v niekoľkých dňoch, finálne projekty návrhu sa počíta. Konečný projekty Návrh bude sa vás opýtať na pár otázok, ale medzi nimi budú tri míľniky - jeden je "dobrý" míľnik, jeden lepší míľnik, a jeden najlepší. Myšlienka je naozaj pomôže vám chlapci nastaviť očakávania tak, že minimálne budete spokojní s výkonom svojho konečného projektu a to bude "dobrý", ak máte obavy. Ale potom v záujme dostať sa dosiahnuť len trochu na niečo lepšie alebo niečo najlepšie, budeme tiež nejako tlačiť vás k, že rovnako. CS50 Hack-a-Thon, medzitým, je v priebehu niekoľkých týždňov. Typicky, robíme to na základe lotérie základ, pretože záujem, ale štatistiky sme si vezmem niekoľko stoviek z nás v kyvadlové autobusy z Harvard Square dole Kendall námestí, kde Microsoft má krásnu zariadenia výstižne nazýva "NERD" - New England Výskumné a vývojové centrum. Budeme sa tam dostať okolo 8 vecer budeme mať niečo k jedlu. Okolo 1 hod budeme mať trochu viac jedla. Okolo 5 hod, keď si ešte hore budeme cez hlavu IHOP alebo sa dostanete späť do areálu. Cieľom je ponoriť sa do finálových projektov vedľa spolužiakov a zamestnancov. Potom o niekoľko dní neskôr je CS50 Fair, ktorý je naozaj chcel byť príležitosť pre vás chlapci predviesť svoju prácu a úspechy na semester zatiaľ čo kontaktoch sa navzájom a získať predstavu, čo každý robil. Vďaka, že povedal, moc ďakujem Tommymu a Jozefovi, a uvidíme sa v pondelok.  [Potlesk]