[Powered by Google Translate] [9. týden, pokračování] [David J. Malan - Harvard University] [To je CS50. - CS50.TV] 

To je CS50. To je konec týdne 9. Děkuju mnohokrát. Konečně. 9. týden. Mám to. Dnes budeme pokračovat v našem rozhovoru o programování pro web s okem k závěrečného projektu, ne proto, že musíte něco udělat webové pro konečné projekty, ale proto, že buď pro závěrečných prací nebo po CS50 je to jistě směr, ve kterém moderní software se děje. A přesto, že to není ve skutečnosti jednoduchá věc. Ve skutečnosti, jeden z nejtěžších věcí, které udělat, je aspekt designu. 

Například, podle návrhu máme na mysli skutečně dostat uživatelského rozhraní nebo uživatelské zkušenosti právo. Troufám si říct, - a my víme z nedávné problému sady když pár z vás vysílal své nadávání nějaký kus software nebo hardware, který přivádí k zuřivosti vás, ať už na akademické půdě nebo mimo - je tu spousta míst tam, je tam spousta hardwaru tam, že druh hovno. Skutečnost je však taková, že dělat věci, které se snadno používají a přesto jsou však silné je velmi jednoduchá. Tak pro dnešek jsem se zeptal Josefa a Tommy se připojit mě sem takže můžeme mít rozhovor, jak o designu a jaké druhy myšlenkových procesů by měla začít chodit přes hlavu když si navrhnout konečné projekty, vaše budoucí úsilí. A pak se s pomocí Tommyho se podíváme na některé z implementačních detailů. Jak můžete mít nějaké vidění na papíře nebo ve vaší mysli , které pak můžete spustit programově pomocí některé z technologií a technik jsme začali mluvit o tom, konkrétně JavaScript a ještě něco novější, a to AJAX, asynchronní JavaScript. To vám umožní vytvořit všechny dynamičtější z uživatelského rozhraní od načítání více a více dat postupně ze serveru. Tak uvidíme některé z těchto úryvků i dnes. Jak stranou, pokud máte zájem o soustředění v informatice nebo minoring ve vědě o počítačích, vím, že tento pátek v poledne v Maxwell Dworkin 221 bude pizza událost kde se můžete dozvědět něco více o počítačové vědě. Na své cestě ven ze dveří dnes budete moci vyzvednout neoficiální příručka CS na Harvardu. Dáme ji na popelnicích mimo výši pasu takže pokud chcete chytit to a naučit se něco více o CS, že tam bude pro vás, jak to bylo v týdnu 0. Také pokud byste se k nám připojit na CS50 oběd v pátek v 13:15, zamiřte do cs50.net/lunch. Bez dalších okolků, dám vám pedagogické kolega Joseph Ong. Ahoj. [Potlesk] Díky. Poprvé jsem se dozvěděl o návrhu byl ve třídě zde nazývá CS179. 

Profesor v té době řekl nám příběh o jiném profesor kdo šel do hotelu a používal kohoutky. Může mi někdo říct, co se 2 knoflíky na levé a pravé dělat? [Student] Horká a studená. >> Horká a studená. Dobré. To, co běžně očekávat, že jo? Tento profesor po použití kohoutek chce osprchovat, a on pokračuje používat. Myslí si, že levá a pravá strana jsou pro teplou a studenou, ne? Ale může mi někdo říct, co to vlastně dělat? Nějaké ruce? [Neslyšitelné Student odpověď] >> Jeden návrh je? [Neslyšitelné Student odpověď] >> Teplota? Takže jeden z nich kontroluje teplotu a další ovládací? >> [Student] tlak vody. Tlak vody. Dobré. Tento profesor vejde do toho, a v domnění, že jsou kontroly teplé a studené, otočí ten správný, který si myslí, že je pro horký, celou cestu nahoru proto, že chce, aby se teplou sprchu. No, to není opravdu odpovídat, tak on dostane toto není moc zábavné zkušenosti z toho, že v studenou sprchu, a všichni víme, jaký je to pocit. Toto je příklad konstrukční chyba. Co tím chci říct, že je jeho očekávání z kohoutku neodpovídá, co vyšel ze sprchy, který je tak trochu nešťastné pro něj. Tak tohle je příklad návrhu chyby, které se děje v reálném životě. Ale uvidíme všechny druhy ty ostatní stejně. Jsme pravděpodobně fanoušci systému MBTA. To je podzemní systém skutečně v Londýně, který říká, "Toto tlačítko není v provozu." Proč je to ještě tam? Proč jsme ještě jedno? Když jsem byl malý kluk, je tech důvtipný jeden v domě, Jestliže je počítač zhroutí, moje máma ke mně, mi ukázal tuto obrazovku a požádal mě, co se stalo. 

Ani nevím, co to znamená. [Smích] Co? [Smích] Někdy máme pocit, jako vývojáři softwaru jsou jen trolling nám. Jako uživatelé jsme jako, "Co se děje? Někdo nám." To vše přijde na problém designu. Design, jak můžeme vidět, není čistě o estetice, to není o tom, jak věci vypadají. Vidíme zde, že tento malý pop-up tady vlastně vypadá docela hezky. Má stín v pozadí, má přeshraniční rádiusů děje. Je to docela dost. Je to opravdu dobře navržen, protože to není příliš uživatelsky příjemný. To málo pop-up, který přijde opravdu není mi žádné informace o tom, co se děje, to mi neříkej, jak uživatel o tom, jak se dostat z této chyby. Chceme myslet na věci, že design není. Za prvé, není to estetika. Je to také není nádivkou vaši aplikaci s hromadou zbytečných funkcí. Pokud jste thajská restaurace, pravděpodobně nebudete chtít být zubař ve stejnou dobu. A s otázkami Facebook, ne, že mnoho lidí používá jej a bylo to opravdu v jádru toho, co stavěli. A tak je to hezké myslet ani tak na množství věcí, že jste uvedení vaší žádosti, ale kvalita a jak děláte, že uživatelský zážitek lepší vlastně zlepšení na to, co už máte. 

Stručně řečeno, design říká nám, co bychom měli stavět. Například, jestliže my budujeme něco, co nechal nás hledat věci, jako je Google, například by se dělat věci způsobem , která vyžaduje, aby uživatel vzít spoustu kliknutí se dostat na to, co chtějí, nebo bychom to měli dělat způsobem, například s Google Instant nebo automatického dokončování že nám umožňuje dostat na naše výsledky rychleji? Engineering zahrnuje, stejně jako Tommy vám ukáže, vlastně stavěli. Existuje mnoho typů designu. Například, pokud stavíte něco nasadit něco v zemi Třetího světa, kde není tolik elektřiny, nebo že mnoho technologií, musíte navrhnout to, co stavíte způsobem, který snadno umožňuje přístup k lidem tam. Ale jaké druhy z jiných konstrukčních rozhodnutí může být nebo by mohly být zapojeny do něčeho jako je tohle? Jo. Vidím ruku. [Neslyšitelné Student odpověď] >> Právo. Přesně tak. Dostupnost je jedna věc. Spousta lidí si nemyslím, že o tom, "co moje uživatelů?" jako extrémy obou spektra. Mám uživatelů, kteří by mohli mít postižení, že jsem nepřemýšlel o a já jsem přemýšlel o navrhování pro běžného uživatele. Internet je přístupný všem v dnešní době, a já bych se navrhování pro ty lidi stejně. Jaké druhy ostatních konstrukčních rozhodnutí můžete udělat? Ano. >> [Student] Tyto náklady. Náklady. Velmi dobrá. Další věc, kterou bychom mohli založit naše konstrukční rozhodnutí o nákladově. Pokud jsme firma, chcete postavit něco, co nebere moc náklady na výrobu ale může prodat za mimořádně vysoké náklady, nebo nás může dostat nějaký zisk. 

To vše jsou různé typy designu, ale když stavíme na internetu nebo když budujeme něco, co pravděpodobně nestojí tolik vybudovat hned, jako internetové aplikace - nemusíte házet tolik kapitálu do něj , aby něco, co skutečně funguje - to, co jsme více starat o je uživatelské zkušenosti. Říkáme tomu uživatelský zaměřený design. V podstatě to, co uživatel centred design zahrnuje je uvedení sami v botách vašich uživatelů. Pokud někdo zaregistruje na to, co stavím, že jsem zřejmě přišel do mého konkrétní aplikaci s cílem na mysli, s úkolem chtějí dokončit. A vaším úkolem je nejen pomoci jim splnění tohoto úkolu ale pomoci jim splnění tohoto úkolu způsobem, který je efektivní, intuitivní, a, jak se někteří člověk řekl: tam, přístupné. Co účinnost znamená? Účinnost znamená, jak rychle se moje uživatelská dokončit úkol, můj rozhraní. Má to trvat hodně kliknutí na ně se dostat z jednoho místa na druhé? Je to únavné? Mají plnit spoustu opakovaných úkolů? Chceme, aby se tento proces co nejefektivnější takže nemají dělat ty druhy věcí. Pokud jde o intuitivnost, to znamená, že například v případě, že uživatel zvedne mé rozhraní, je to pro ně snadné se dostat z místa na místo? Je to pro ně snadné zjistit, co mají kliknout v mém rozhraní aby pro ně dosažení cíle nebo úkol, který chtějí dosáhnout? 

A konečně, jak jeden člověk řekl: tam, dostupnost je velmi důležité. [Samec reproduktor] To přijde na přístupnost pro věci, jako je vize, líbí, jak mám vlastně navrhnout něco pro někoho, kdo je slepý? Oh. Pro lidi, kteří nevidí vůbec, máme něco jako čtení z obrazovky. Co byste měli udělat, je, měli byste stavět své webové stránky takovým způsobem, , že například, konkrétní technologie, co nazýváme - Existuje spousta věcí, nyní. Myslím, že tam jsou odečítače obrazovky JAWS volal. Mnoho z těchto věcí se spoléhají na to, co nazýváme oblast pravidla aby četl ven k uživateli, co je na stránce. Pro ty, kteří nemohou vidět, je třeba se ujistit, že tyto obrazovky čtenáři může skutečně vyzvednout obsah na stránce a může skutečně ukázat své uživatele, Pokud nevidíte, alespoň si můžete stále pochopit obsah na stránce. Jo. Dobře. Dost povídání o dobrém designu. Pojďme mluvit o špatné konstrukce. To jsou věci, které byste neměli dělat. Může mi někdo říct, o svých zkušenostech s Craigslist a to, co si myslí, že není tak velký o tomto návrhu? Ano. >> [Student] Myslím, že je to příliš mnoho slov v jedné oblasti. Příliš mnoho slov, ne? Zcela ohromující. Přijdete na této stránce a budete uvítáni s celou partou věcí až sem že možná ani jedno. Například, žijete v jednom státě, který nezačíná tohoto dopisu. Řekněme, že žijete v Texasu, nebo tak něco. 

Musíte procházet celou cestu dolů na stránku se dostanete do místa, které na. Jsem z Bostonu, tak ať mi to hledat v Massachusetts. Kde je Massachusetts? Oh, je to tady. Oh, to je Boston. Dobře. Pojďme se podívat na Boston. [Smích] Docela ohromující, že jo? Trapné věci támhle. [Smích] Řekněme, že jsem hledal něco žít. Kolik lidí vlastně používá Craigslist? Tuny vás. Tam jsou dost špatné způsoby, jak se dívat na to, ale pojďme se podívat na to. Jaký je rozdíl mezi img a pic? Může mi někdo říct,? Tam vlastně není žádný rozdíl. Znamenají přesně totéž, ale mají různé etikety pro ně z nějakého důvodu. Kdybych klikněte na Obsahuje obrázku, nic se neděje na stránce. Vlastně jsem se na tlačítko Hledat znovu se něco stane. Co by mohlo být lepší design rozhodnutí, které by se dalo dělat tam? Pokud jsem kliknout na tento filtr, bych asi chcete filtrovat podle konkrétní akce nebo že konkrétní kategorie. Takže místo toho, aby musel stiskněte Hledat znovu, mohl jsem automaticky dělat filtrování druh stylu Google, kde se to udělat okamžitě. [Malan] Ale ne tvoří, jak jsme je viděli doposud musí být fyzicky předložena tím, že udeří Zadejte alespoň nebo klepnutím na tlačítko? Jak jste viděl tak daleko, že opravdu máte na tlačítko Odeslat dělat ty věci. 

Ale jak Tommy Vám ukáže, do vteřiny, tam jsou vlastně způsoby, jak můžete tak, že když kliknete na tu věc, že ​​může automaticky odeslat to, co nazýváme AJAX požadavek a získat data zpět a filtrovat výsledky okamžitě. Existují tuny věcí, které jsou špatně s tímto rozhraním. [Malan] Můžete vyhledávat Cambridge? Je tu něco, co trochu anomální tady, kde vám záleží Cambridge a přesto jste stále Westford, Spring Hill, West Newton a jako. Pravděpodobně není ideální. Pravděpodobně >> není ideální. Jak bych mohl být schopen provést uživatele zážitek lepší na tuto konkrétní stránku? Ano. >> [Student] Pokyny. Dobře. Instrukce v jaké smyslu? [Student] Například věc pro nové uživatele, kteří ani nevědí, co Craigslist je nebo nevíte, co máte dělat. Přesně tak. Takže vysvětlovat, co Craigslist je na této stránce je důležité. Můžeme vlastně říci, uživatelů, co tato stránka je ve skutečnosti pro. Pokud jsem jen na návštěvě to, vidím spoustu míst. Já ani nevím, co to znamená. Ale mnohem důležitější je, jen při pohledu na toto rozhraní, pamatujte si, že musel rolovat dolů spoustu věcí najít konkrétní komunitu že jsem vlastně záleželo na tom. Co je to rychlejší způsob, jak bych mohl udělat, že? Ano. [Student] Rozdělte je do oblastí na východ, západ. Dobře >>. Mohl bych je rozdělit do více kategorií, které by mi mohl pomoci rychleji určit jak se dostat do daného místa. [Student] Dejte rozevírací seznam. Právo >>. Dobře. Mohl bych použít drop-down menu, protože máme pevnou sadu věcí a my jsme mohli ukázat jim v drop-down menu. Takhle to nezabírá tolik místa na obrazovce. Ale ještě lepší než to, co můžeme dělat? Ano. >> [Neslyšitelné Student reakce] >> Můžete říci, že znovu? >> [Student] Search box. Jo, vyhledávací okno. To je skvělé. Co můžeme skutečně udělat, je, když se podíváme zpět na sklíčka, vyhledávacího pole. Autocomplete. Velmi snadný způsob, jak vyhledávat na základě výsledků, které znáte, jsou v sadě. Když začnu psát BO, jen ukázat mi všechny výsledky, které mají BO uvnitř nich. Tak jsem si velmi snadno najít konkrétní jediná, kterou chci jít do místo toho, aby museli listovat to opravdu velkého seznamu. 

Jedná se o všechny druhy opravdu nízko visící ovoce, že někdo, kdo je provádí Craigslist může skutečně udělat, aby zážitek na internetových stránkách mnohem lepší pro jejich konkrétní uživatele. Dobře. Dost mluví o špatných stránkách. Pojďme mluvit o Facebooku. Když Facebook vyšel, a zejména Facebook fotky, tam bylo hodně dalších služeb v době, která by mohla dělat přesně stejné věci. Mohli organizovat své fotografie do alba. Co můžete udělat, je můžete uspořádat do sad stejně. Dalo by se uspořádat je podle data. Dalo by se dělat všechny tyto konkrétní věci. Ale nevíte někdo, co dělal Facebook fotografií exploduje v době, kdy byl propuštěn? Ano. >> [Studentských] Tagy. Tagy >>. Přesně tak. Máme Milo přes tu, která je náš pes maskot s tímto šátkem CS50. Můžete vidět, že máme tuto funkci značkování ve středu. A to, co se Facebook fotky tak zajímavé z hlediska použitelnosti je to, že vlastně dovolil lidem přes tento zapojit své přátele v jejich fotografií. Pro Facebook, protože jejich stránky jsou zejména sociální, je to o budování tento druh společenské atmosféry. To zlepšilo zážitek fotografií mnohem více protože by se skutečně začalo říkat, "To jsou spojení mezi lidmi, a to jsou fotky o lidi, které skutečně záleží. " Součástí je také jakoby narcismus. Lidé chtěli být označeni na fotky a podobné věci. I když to není nutně dobré lidské zvláštnost, zároveň je to na základě dobré designu rozhodnutí proto, že lidé skutečně záleží věci, jako je tento. Tak to je Facebook fotky. 

Ale pojďme mluvit Facebook obecněji. Jsem si jistý, že spousta lidí, kteří zde mají názory na Facebook, oba dobrý design rozhodnutí a špatné provedení rozhodnutí. Takže pojďme ventilovat nebo být šťastný. Pojď. Vím, že vás všechny používat Facebook. Někdo musí mít něco špatného říct, nebo něco dobrého říct o tom. Ano. [Student] V novinek je tu spousta věcí, které jsem se opravdu záleží. News Feed se ukázat mnoho věcí, které jste možná nezajímá. Máte přátele na Facebooku, kteří jste se setkal na 2 nebo 3 roky a uvidíte jejich zprávy výsledky objevovat ve vašem novinek a opravdu nestarám o to. Facebook skutečně dělal úsilí, aby to lepší, a že jsem se snažil tlačit příslušné výsledky v horní části novinek jako pozdní takže jste vlastně vidět věci přáteli, které jsou relevantní pro Vás nebo Vaše blízké přátele. Ještě něco? Ano. [Neslyšitelný studentů odpověď] >> Můžete říci, že znovu? [Student] Tyto reklamy jsou poměrně nenápadné. >> V jakém smyslu? [Neslyšitelné Student odpověď] Nemají světlo na obrazovce, jako bannery. Dobře. To je dobře. Pokud si pamatujete na internetu od 90. let - >> [Malan] Byl jsem tam. >> Byl tam. [Smích] Možná si ještě vzpomínáte blikající Gify pozadí, jiskřivé věci, GeoCities styl druh věcí. To opravdu není příklad dobrého designu protože je to opravdu neodvádí pozornost od obsahu. Umění Yale stránky míval animované GIFy jako jejich pozadí a vy jste nemohli přečíst něco na stránce, ale myslím, že někdo skutečně mluvil s nimi, a teď je to trochu jiné. [Malan] Je to mnohem líp. >> Je to mnohem lepší, teď, jak můžete vidět. >> [Malan] Ach jo. Prostě skvělé, jen - Jo. Dobře. 

Část z toho je také, aby vaše stránky možná velmi minimalistický a velmi srozumitelné takže věci na stránku průtoku způsobem, který je velmi logické a nejsou v cestě každého jiný. Jaké druhy jiných věcí jsou dobré na Facebooku nebo špatný o Facebooku? Prostě mají konstrukční rozhovor zde. Oh. Kde? Jo. [Student] Nový Timeline systém umožňuje prohledávat osoby profilu o své minulosti. Ooh, časovou osu. Časová osa je skvělá věc, protože umožňuje stonku svým přátelům zpět, když byli na střední škole. Časová osa je dobré, protože to umožňuje filtrovat pomocí obsahu hodně rychlejší, To vám umožní najít věci, které by jinak byly pořízené vám opravdu dlouho najít jen pohyb nahoru a dolů, nahoru, nahoru, nahoru, nahoru, nahoru, jako vrátit se zpět v čase. Ale pak je tu také trochu nevýhodu, aby, že pokud jde o uživatelské zkušenosti. Co by to mohlo být? Big slovo, které začíná P-R. >> [Student] Ochrana osobních údajů. >> Privacy, že jo? Ochrana osobních údajů je obrovský uživatelské zkušenosti problém. To je jedna z věcí, které nenávidím nejvíc Facebooku teď. [Smích] [Malan] Jak mám teď. David si neuvědomil, to se skutečně stalo až do včerejška. Takže teď už ví, že pokaždé, když jsem chatovat mu, že vím, že byl ignoruje mě. [Malan] trapné část byla jsem vlastně ho ignorovala, a já jsem nevěděl, že on věděl, že jsem ignoroval ho. [Smích] Ochrana osobních údajů je obrovský problém. Může tady někdo mi říct, co by mohlo být špatně Facebook soukromí kromě toho, že se takové věci? Co je to obzvlášť těžké udělat s ohledem na Facebooku soukromí? Taková je hlavní otázka. Ano. >> [Student] Skrýt své fotografie z některých lidí. Přesně tak. Přesně, skrýt vaše snímky z některých lidí. Mají tento malý, malé tlačítko v pravém horním rohu, který vám umožní přepínat soukromí fotografii. Jejich možnosti ochrany osobních údajů jsou velmi různorodé a mezi různými druhy menu. 

Oni se dostali mnohem lépe o tom v poslední době, ale to bylo v případě že kdykoli byste chtěli, aby se vaše přátele z pozorovacích fotografií, budete muset projít velmi komplikované 5-stupňovým procesem bytí jako, dovolte mi, abych na tento odkaz, teď mi dovolte klepněte na tlačítko znovu, dovolte mi, abych znovu klepněte, dovolte mi, abych specifikovat, které lidé nemohou vidět mé fotografie. To není zvláště dobré na straně Facebooku je protože tolik o zkušenostech se vlastně dává jim svobodu kontrolovat, co lidé mohou vidět. Říkáme tomu uživatelský ovládací prvek a svobodu. Pokud si nejste nechat vaši uživatelé dělají, že způsobem, který je efektivní a intuitivní, pak se vaše uživatelské zkušenosti není opravdu tak velký vůbec.  Chtěli jste chtěl říci něco o Facebook? Jak mohu tuto funkci vypnout? [Ong] nelze tuto funkci vypnout, a to je obrovský použitelnost chyba na straně Facebooku. Tato funkce - jsem skutečně podíval do toho včera - je to buď, že nemůžete udělat, nebo to je pohřben někde velmi, velmi hluboko v záhybech Facebook, protože nemůžu přijít na to, jak tuto funkci zakázat vůbec. [Malan] Ale někdy tato rozhodnutí nejsou zřejmé protože jste nám dali hodně užitečnou zpětnou vazbu na různých CS50 aplikací a webové stránky, které kurz používá. Jsme neprovedly všechny tyto požadavky a návrhy. 

Část, která je pro získání tolik žádostí, že se jedná o funkci času, ale někdy prostě učinit vědomé rozhodnutí, jako, "Děkuji vám za návrh, ale my nesouhlasíme." Tak jak se vám vlastně rozhodnout, co byste měli dělat, pokud vaši uživatelé, že bys měl něco udělat i když ne nutně? Je to jemná rovnováha mezi skutečně naslouchat tomu, co uživatelé říkají a skutečně má nějaký řádek, kde říkáte, "Nebudeme dělat to, co tito uživatelé říkají." A zejména, myslím, že tam byl citát Henryho Forda, že to shrnuje docela dobře. "Když jsem se zeptal lidí, co chtějí, by řekli, že chtějí rychlejší koně." Může mi někdo nějak šprýmaři odděleně, co to ve skutečnosti znamená citát? Není to jen, že uživatelé vědí, co chtějí, ale je to víc, že ​​- [Student] Oni nevědí, co je možné. V části nevědí, co je možné. Tease, že kromě trochu víc. Co tím myslíš, že? [Neslyšitelné Student odpověď] To je dobře. Co si myslím, že se snažíme říct je, že lidé vědí, co chtějí. Chtějí rychlejší koně. To, co opravdu chtějí, je schopnost pohybovat se rychleji, ale opravdu nevím, médium, kterým k dosažení, že. Když přijde na uživatele a uživatelé vám něco říct a řeknou vám, "My chceme tyto funkce a tyto funkce a tyto funkce," nechcete nutně myslet, "Nech mě jít napřed "A realizovat to, co by se výslovně říká," ale to, co chcete myslet, je, "Jaké myšlenky mohu dostat z toho?" Co vlastně chtějí? 

A odtud, co můžete udělat, je navrhnout něco, co splňuje tyto požadavky ale ne nutně tak, že uživatel očekává, že bude spokojen. Takže něco jako finálových projektů, ve velmi reálně, co je užitečné, heuristická, pokud jde o výrobu něco lepšího, zejména pokud návrhář má tuto aroganci o něm kdy jste nějak víte, co je nejlepší, můžete mít vstup z vašich uživatelů, ale jak se vlastně jít o získání, že zpětná vazba? V závěrečných prací, velmi konkrétně, co vytváří optimální výsledky zde? Co produkuje optimální výsledky - a já půjdu přes to v druhém - je tento proces rozvoje a pak testování a pak iterace. Co tím chci říct testování je obvykle, když si navrhnout něco si myslíte, že je to docela dobrý, jako, "já jsem tak skvělý designer. Každý se bude líbit." A pak jste to tam, a lidé nemají opravdu rád nějakého důvodu. Co musíte udělat, je budete muset vzít části věcí, které lidé dělají, jako a předělat věci, které lidé nemají rádi. To zní jako velmi zřejmým procesu, ale tento proces neustále iterace na vrcholu toho, co jste již postaven, je proces, který vám pomůže nejen zdokonalit své vlastní návrhářské schopnosti, ale také vám pomůže zdokonalit design tak, že lidé skutečně ocení váš produkt ještě víc než dřív. 

Půjdu přes více konkrétní příklady toho, co by se Vám mohl vlastně dělat. Jako jakési poslední příklad výrobku, pojďme se podívat na kajaku. KAYAK, když to vyšlo bylo velmi, velmi populární. Může někdo hádat, proč? Jaké jsou druhy věcí, které rád o tom, pokud jste použili nebo jaké jsou druhy věcí se vám nelíbí? Ano. >> [Neslyšitelné Student odpověď] >> Dobře. To je součástí toho je nechat uživatel mít dotaz, který je mnohem obsáhlejší než velmi restriktivní jeden jako, "Musíte k vyzvednutí datum zahájení "A vy budete muset vybrat datum ukončení." Ve skutečnosti, to vám umožní být flexibilní na to, a to vám dává všechny letů v tomto rozsahu. Ještě něco? [Student] Jedná se například o poplatky v ceně. Dělají zahrnují poplatky v ceně. Daně a věci skutečně jít rovnou do této ceny v levé horní části takže nejste napálil do myšlení, že jste skutečně platit za 240 dolarů letu když je to opravdu 330 dolarů. Ještě něco? Ano. [Neslyšitelné Student odpověď] Nejsem si jistý, jestli se skutečně nechat udělat. I Might Be Wrong. To by mohlo být zajímavé, pokud chcete, aby větší váhu na konkrétních filtrech tak, že tlačí výsledky související s tímto filtrem na vrchol. Ale může mi někdo říct, co je tak zvláštního na tomto levé straně? Jak jste se tradičně podívat nahoru do patra na internetové služby před tím? 

Ano. >> [Neslyšitelné Student reakce] >> Můžete říci, že - [Student] Každá letecká společnost. Jo >>. Každá letecká společnost má své vlastní internetové stránky. To konsoliduje věci. A? [Student] Víš přesně, co když budete opouštět. Víte přesně, v kolik hodin odcházíš, ale souvisí s filtry zejména. Dovolte mi, abych vytáhnout kajaku. Ach, Bože, pop-ups. Bad uživatelské zkušenosti. Co se stane, když jsem se přesunout tohoto posuvníku? [Studentských] Automatické aktualizace. >> [Ong] Automatické aktualizace. To je něco, co je velmi důležité. Před tím, když jste chtěli podívat nahoru do patra, jste museli dát do vstupního místa, váš výstup umístění, stiskněte tlačítko Hledat, to by proces, který a zobrazit výsledky. Pokud byste chtěli změnit svůj dotaz, měli byste se vymáčknout dvakrát, vstoupit do nového dotazu od nuly, a pak to znovu a znovu. Pěkná věc, o něčem, jako je to, že používá velmi [nesrozumitelné] věc ve středu. Kdykoli budete něco takového, to střílí mimo žádost a vrátí vám všechny výsledky okamžitě. Tento druh okamžitou zpětnou vazbu, je něco, co dělal KAYAK velmi populární protože je to opravdu snadné pro mě jen změnit svůj dotaz a přijít na to, věci, které jsou kolem určitého rozsahu aniž by museli jít tam a zpět, tam a zpátky, tam a zpátky. Tak to jsou všechny možné věci, které chcete myslet, když jste navrhování své webové stránky. Jak mohu dělat to velmi efektivní pro moji uživatelé projít, co pracují na a aby se jejich konečným cílem je tak rychle, jak je to možné? [Malan] A do bodu Josefa starší o uživatelích nejsou nutně vědět, co chtějí, na základě toho, co jste již slyšeli o HTML a máte políčka, přepínače, zvolte menu, vstupní pole a podobně, jak byste implementovat pojem výběrem počáteční čas letu? 

Které z těchto různých UI mechanismy byste používat? Pokud jste právě znát množství kódu HTML, který byl vyučován před a víte, že vstupy jsou přepínací tlačítka, checkboxy, drop-sestřelí, a vstupní pole, co by si přirozenou volbou byly pro uchopení data? [Student] vstup. Vstupní >>. Nebo možná i drop-dole se všemi daty, ne? Takže s složitějších UI mechanismů, jako je tento na levé straně, které můžete implementovat, můžete tento proces mnohem intuitivnější s jezdcem protože čas je spojitá, a lidé obvykle nemyslí na to, pokud jde o diskrétních bloků. Dobrá. Poslední věc. Deset použitelnost heuristiky. Všechny ty věci, s nimiž jsme hovořili o tom pravděpodobně spadají do jedné z těchto kategorií. Pokud půjdete na tento odkaz, které stránky budou umístěny na internet, budete skutečně moci, jak si navrhnout své stránky, aby tyto heuristiky na paměti a tato pravidla palce. Pro vaše projekty, co radím vám, abyste s cílem navrhnout app lépe je to papír prototypování jako první. Pokud uvažujete o své žádosti, velmi rychle načrtnout to, co chcete, aby to vypadalo, jako a zajistit, aby všechny krabice jsou uspořádány tak, že je velmi intuitivní pro uživatele k použití a dokonce ukazují tyto papírové prototypy svým přátelům a začít cílových skupin. Jen si 2 nebo 3 lidi dohromady a požádat je, aby právě klepněte na těchto papírových prototypů, a ukázat jim nové obrazovky, aby zjistili, zda skutečně pochopit, co se děje. 

Co chcete udělat, je dát jim úkol, motivovat, že úkol, a dej jim na aplikaci a nechat je používat. Nedávejte jim pokyny za tím. Chcete-li skutečně nechat interakci s vaší aplikace tak, že vám umožní vidět jak by použít, pokud jste nebyli stál vedle nich. A to je velmi důležité. To vám dá spoustu nových poznatků, aby se lidé dostat kolem konkrétních věcí tak, že jsem nezamýšlel je? Jsou použitím určitých rozhraní mechanismů na obrazovce takovým způsobem, který je druh háčky? Neměl jsem v úmyslu pro ně to tak. A jakmile jste hotovi s tím, co chceš dělat? Vaše konstrukce skály, ne? Co chcete udělat, je, že chcete vyvíjet a pak to, že proces znovu. Tak ukaž to přátelům, jakmile jste ho vyvinul, otestovat, vyvíjet, testovat, vyvíjet, testovat, iterovat, dál a dál a dál. Provedení je velmi opakovaný proces v tomto smyslu. Máte skutečně něco postavit a pak si uvědomí, co o něm že jste si neuvědomil, před a vrátit a zlepšit z toho. Nyní, stejně jako pro rozvojové části, to je to, co Tommy se chystá ukázat vám po přestávce a jak byste měli být schopni realizovat něco jako autocomplete způsobem, který je velmi jednoduchá. [Malan] Jak Tommy nastaví tady, otázka pak. Mnoho z prvních webových stránek - a když řekl Josef 1990 ve stylu webové stránky, bylo to implementace, kde, pokud jste chtěli zvolit čas začátku a čas konce, upřímně řečeno, zpět v den, a dokonce i na některých webových stránkách dnes, způsob, jak to udělat, je vybrat si hodinu z drop-dolů, si vyberete minut od drop-dolů, možná si vyberete AM, PM, a pak uděláte, že další 3 krát. A tak s 6 kliknutí a možná i posouvání Vaše uživatelské může skutečně poskytnout nějakou datum a / nebo časový rozsah v tomto smyslu. 

Takže rozhodně optimální a přesto tak daleko jsme viděli žádné vyjadřovací možnosti v některém z jazyků Podívali jsme se na to udělat něco více sexy líbí tento jezdec začátku a čas konce. Ale pokud si myslíte, že zpět do týdne 0, když jsme hovořili o Scratch, tam taky nebylo widgety, které prostě určité věci. Opravdu prostě musel tyto základní principy, jako je vedení a podmínky a jako. Takže trochu jsem přemýšlel velmi abstraktně teď, nezávisle na údaje o HTML, Co se opravdu děje s něčím, jako je tento čas začátku a čas konce jezdcem? Když jsem se pohnout myší a já klikněte na té malé mrkví symbol na levé a začnete přetahovat, programově, co je to chcete být schopni realizovat aby se tak stalo? Jaké otázky, co Boolean výrazy chceš mít možnost požádat? Co se vlastně děje? Sammy? [Student] Kde je pozice kurzoru? Dobrý >>. Kde je pozice kurzoru? To bylo něco, co jsme potřebovali vyjádřit zpět Scratch, zda to bylo založeno na místě, nebo dokonce barvu nebo podobně. Můžete vzpomenout někdy tak krátce v pondělí bylo všechny tyto věci nazývají události ve světě webu, a tak je tu věci jako onclick a onkeypress a OnKeyUp a onmouseover a onmouseout. Takže si uvědomit, že i tyto věci jsme užívali jako samozřejmost na webu s weby jako Facebook a Gmail, i když nemají tušení, jak byste možná realizovat, protože není nic, i jako to v přednášce nebo problém Nastavit 7, si uvědomit, že s těmito přesnými stejnými základy, s HTTP a parametry a GET a POST, se základními HTML vstupů, které Podívali jsme se na dosud a za chvíli s programovými mechanismy, které Tommy je asi představit můžete začít vyjádřit sám sebe, stejně jako jste v týdnu 0 by velmi intuitivně přetažením. 

Takže s tím řekl, Tommy MacWilliam a některé nové kousky skládačky pro nás pro web. Dobrá. Mé jméno je Tommy a já budu mluvit o JavaScriptu. Jen disclaimer: Já jsem toho názoru, že JavaScript je nejlepší programovací jazyk v celém celém světě. Existuje spousta lidí, kteří se mnou nesouhlasí, ale je to prostě úžasné. Jakmile se vrátíte do C, pokud máte napsat C pro jiné třídy nebo jiných jazyků, je to jen opravdu frustrující ve všech low-level detaily, které mají na zabřednout a. Takže pokud jste někdy smutno o tom, jak nepříjemné C je psát, se vrátit, napsat nějaký JavaScript. Je to nirvána. Budete se cítit mnohem lépe o své špatný den. Mnoho magie JavaScript pochází z její schopnosti manipulovat věci které jsou již na stránce. Když jsme napsali naše PHP skripty, byly provedeny na serveru, a nakonec, že ​​PHP skript pravděpodobně vypíše HTML. To HTML byl poslán klientovi, a pak, že to bylo. Pokud PHP chtěl přidat tlačítko na stránku, například, to může opravdu udělat. Měla by mít k tomu, aby celý nový HTML soubor a odeslat, která do prohlížeče. S JavaScript víme, že můžeme aktualizovat věci, zatímco oni jsou již na stránce, a kvůli tomu jsme schopni poskytnout mnohem více okamžitou zpětnou vazbu, která bude opravdu zlepšit uživatelský komfort na našich webových stránkách. Jen rychlý rekapitulace selektorů JavaScript. Víme, že když budeme stáhnout HTML stránky, že se to být zastoupen v DOM. 

DOM pamatuj je to právě tento velký strom, kde jsou prvky vztahující se v tomto velkém hierarchii. Když jsme pracovali s databázemi v PSet 7, jedna z prvních věcí, které jsme potřebovali vědět, jak to udělat je vyhledávat v databázi. Máme tuto velkou uživatelům tabulky, a někdy jsme jen chci říct, "Chci jen některé z těchto uživatelů, kteří odpovídají nějakou podmínku." Podobně, když máme DOM potřebujeme nějaký způsob, jak to dotazování. Potřebujeme nějaký způsob, jak říkat, "já chci všechny tlačítka, které vypadá podobně jako "Nebo všech snímků na stránce." A tyto selektory nám umožňují udělat. Takže jen rychlá rekapitulace. To první, kdo tu je, to # předloží, co je to, že bude na výběr? Pamatuje si někdo? [Neslyšitelné Student odpověď] >> Jo, přesně tak. To bude pro vybrání prvku na stránce, která má ID odeslat. A tak, aby hash tag říká, že tento výběr bude fungovat s ID. Jak o druhé, to. Střed, co bude, že vybrat? Jo. >> [Student] Class. Přesně >>. Toto se nyní vyberte podle třídy. Rozdíl mezi ID a třídy zde je obecně ID musí být jedinečná v co space hledáte přes. Takže pokud jste hledali přes celou webovou stránku, měli byste mít pouze 1 prvek s touto určitou ID, takže v tomto případě předloží. S tříd, na druhé straně, můžeme mít více než 1 prvek na stejné straně se stejné třídy. To by mohlo být užitečné pro ostatní chci vybrat vše, co se soustředil na stránce spíše než jen 1 věc. 

A konečně, tato poslední je zde poněkud složitější, ale co je to bude vybrat z DOM? [Neslyšitelné Student odpověď] >> Co je to? [Student] Všechno, co tag. >> Máme 2 díly zde. Druhá část je říct chci vybrat tyto značky se značkou vstupu, tak libovolný prvek, který je vstupní tag. Ale já nechci jen vybrat všechny vstupy protože něco jako tlačítko submit by mohl být vstup a něco jako textové pole může být vstup. Takže s těmito hranatými závorkami říkám chci jen vybrat ty prvky které jsou typu text. Někde v mém HTML tag mám atribut nazvaný Typ, a hodnota tohoto atributu musí být text. Tak jak o této první části tady? První slovo tohoto voliče je forma pak mám prostor a pak tento vstup část. Co to udělat, uvedení formulář před ním? To se děje v podstatě omezit naši dotaz. To by mohl být případ, že máme některé vstupy na stránce že nejsou potomky formuláře. Co to bude dělat, je to, že jsem jen chci vstupní tagy, které mají někde nad nimi některé rodiče prvek formuláře. A tak tímto způsobem můžeme tyto další hierarchické dotazy takže nemají jen vybrat vše odpovídající dané voliče. Můžeme trochu omezit rozsah tohoto dotazu na něco jiného. Takže teď, když víme, jak vybrat prvky na stránce, Pojďme mluvit trochu o AJAX. AJAX je stále velmi módní zkratka, která znamená pro Asynchronous JavaScript and XML. To jen tak se stane, že XML je to jen nějaký způsob, jak reprezentovat data. 

Tento druh ztracené popularity v poslední době, takže X v AJAX není používán po celou dobu. V podstatě to, co AJAX nám umožňuje udělat, je HTTP požadavky z kontextu JavaScriptu. Když jsme v našem webovém prohlížeči a my navigaci kolem stran a my klikněte na odkaz, co náš prohlížeč udělá, je, aby požadavek HTTP, co odkaz klikneme. Ale to není vždy ideální, protože pokud je to ten případ, pak jako David říkal, musíme vždy, aby uživatelé kliknout na tlačítko Odeslat nebo klepnout na odkaz tak, aby se něco stalo, že to bude zahrnovat požadavek HTTP. Takže s AJAX můžeme tyto požadavky jménem JavaScript. To znamená, že pokud uživatel pracuje se stránkou nebo se něco stane, můžeme skutečně udělat programový požadavek na jinou souboru PHP na našich webových stránkách nebo cokoliv jiného a načíst data, která tento soubor vyplivne. Pojďme se podívat na příklad AJAX. To je naše CS50 Finance stránku, se kterou snad někteří z nás zná. Podíváme-li se na HTML stránky, zde vidíme, že jsem přidal pár věcí, z nichž jeden jsem dal tento formulář identifikátor. Řekl jsem id = "form-citace". Udělal jsem to jen proto, že to bude dělat to trochu jednodušší vybrat z DOM protože jsem si jen udělat velmi jednoduchý dotaz. To, co chci udělat je chci opravit nějaký problém s CS50 financí. Takže pokud bychom jít do finance.cs50.net, Pokaždé, když chcete získat cenovou nabídku, musím klepněte na toto tlačítko Vyžádat, a že Získat cenovou nabídku tlačítka pak vezme mě na jinou celou stránku. A když chci další citát, musím trefit na tlačítko Zpět a pak jsem jej zadejte do, Mám nabídku, a já jsem narazila na tlačítko Zpět. To opravdu není nejlepší uživatelskou zkušenost. Kdo by ve skutečnosti využívají stránky, pokud je to tak pomalé, aby se ceny akcií? Takže to, co chcete udělat s AJAX je odstranit, že krok jít na samostatnou stránku aby k zobrazení výsledků. 

Co jsme opravdu jen ptám, je to opravdu jen malá cena, a to je jen opravdu malé množství dat. Takže není třeba pro mě jít jinou celou HTML stránku, stáhnout celou novou dávku HTML, možná stáhnout některé další obrázky, některé jiné CSS soubory jen pro mě odpovědět na tuto velmi jednoduchou otázku o tom, jak moc to dělá legální náklady. S AJAX bychom mohli udělat tuto mnohem jednodušší. Vidíme tady, že jsem propojení v souboru JavaScriptu s názvem quote.js. Pojďme skutečně otevřít tento soubor. Není tam. Všechny mé soubory JavaScriptu se bude umístěn v HTML tak, že webový prohlížeč může přistupovat. Pak máme samostatný adresář zde pro JavaScript, a nyní je zde quote.js. V horní části tohoto souboru to říká zde, že chci počkat na celou stránku má být vložen předtím, než jsem se snaží udělat cokoliv. Proč je to nutné? Ukazuje se, že další věc, kterou budu dělat, je zde začít hledat pro prvek která odpovídá některé voliče. Pokud je tato JavaScript je někdy proveden před tento prvek je vložen na stránce, pak se vše snažím udělat, je nebude fungovat protože budu snažit vybrat něco, co tam není ještě. Tak tohle line up horní říká, že chci, abys počkat, až vše je načten takže jsme zaručeno, že všechny prvky Hledám jsou skutečně na stránce. Tento znak dolaru zde znamená, že jsem pomocí knihovny s názvem jQuery. This jQuery knihovna nám umožňuje použít tyto selektory, že jsme se podíval na. Tím, že říkáte $ pak předá v jako argument toto # form-cenovou nabídku, Já jsem teď výběrem této formulář, který jsme právě se podívat na. Teď mám zastoupení té formě v paměti nějak. 

Na tomto objektu se, toto zastoupení formy, Já jsem teď pomocí funkce vyzval. Co tato funkce dělá, je, že to bude připojit obslužnou rutinu události. Událost, která budeme naslouchat, je událost submit. Takže, když uživatel klikne na tlačítko Odeslat, které nebo stiskne klávesu ENTER, tato událost je vyhodí. Po připojení do toho, teď mohu přepsat výchozí chování formuláře. Bez tohoto JavaScript, by odeslání formuláře na cokoliv PHP souboru jsme použili v tomto atributu action. Ale místo toho, jsem teď řekl, počkej, počkej, počkej, já nechci, abys skutečně udělat. Chci, aby to stalo předtím, než jdete a odešlete do určité PHP soubor. Teď, co chci dělat? Na tomto místě chci použít AJAX nějak nahrát, co cena akcií je. První věc, kterou musím vědět, je to, co legální uživatel vzhlédl. Chcete-li, že budu používat jiný volič. Jedná se o třetí volič jsme se na před. Ta říká, že chci začít tento formulář prvek s ID pro formu-citátu. Pak někde uvnitř tohoto formuláře, musí být vstupní prvek která má název symbolu. Pokud se podíváme zpět na naši HTML, viděli jsme, že jsme měli vstup [název = symbol]. To znamená, že to bude k výběru, že textové pole, které uživatel je psaní do. To je hezké. Máme textové pole. Teď už jen potřebujeme vědět, co je uvnitř ní. K tomu, abychom mohli tuto metodu volat tady, tohle. Val, a to říká, že vím, co textové pole máte. Chci, abys mi řekl, co to je uživatel zadat do tohoto textového pole. Nyní máme řetězec s názvem symbol, který se rovná bez ohledu na uživatele zadali dovnitř To je hezké. Můžeme použít tento řetězec, aby se naše žádost. To je nová funkce zde, toto $, kromě jsme již bude výběr prvků, budeme se volání jiné funkce, která je nám poskytli, by jQuery. Tato funkce AJAX je to, co se vlastně děje, aby se tento požadavek HTTP. Takže musíme říct, že to pár věcí. První věc, kterou musíme říct tuto funkci je místo, kde chci požadavek jít. Někde v mém projektu jsem tento soubor uvnitř HTML adresáři nazvaném quote.php. Mohu přístup k tomuto souboru, viděli jsme, stejně jako to, když půjdu na localhost / quote.php. 

Chci JavaScript, aby požadavek na danou stránku. Jaký typ požadavku teď? Viděli jsme před tím forma má tuto metodu = "post" atribut, a to znamená, že to bude dělat požadavek POST, takže to nebude dát nic v adrese URL, spíše než GET, které by prostě být aktivována, pokud jsme jen přístup na stránku s webovém prohlížeči, například. Nyní jsme říkal, že chcete, aby se požadavek HTTP POST na stránce se nachází na quote.php. Když jsme se předložit formulář, nezapomeňte bychom mohli přistupovat vstupní prvky uvnitř tohoto formuláře s tímto $ _POST proměnné. Zatím v příběhu jsme se skutečně odeslán spolu jakýchkoli dat, ale. Jsme právě řekl, že děláme AJAX požadavek a tady je druh žádosti děláme. Nyní se musíme skutečně odesílat data na stránku. K tomu můžeme použít tuto vlastnost nazvanou data. Hodnota této vlastnosti je vlastně asociativní pole. Důvodem pro to je, že nám umožňuje posílat víc než jen 1 kus dat. To je důvod, proč máme tyto složené závorky zde vnořena uvnitř těchto dalších složených závorek. Klíče v těchto asociativních polích se bude totéž jako jsou jméno připisuje v našich formulářových prvků. To znamená, že v případě pošlu podél klíče symbolu, to znamená, že moje PHP stránka může přístup k těmto datům pomocí $ _POST [symbol] stejně jako jsme to udělali předtím, když jsme byli odeslání formuláře. A teď skutečné údaje chceme poslat bude hodnota uvnitř tohoto asociativního pole. 

My uloženy tento text do proměnné s názvem symbol, a tak posíláme spolu nyní klíč symbolu a hodnota bez ohledu na Uživatel napsal dovnitř Nyní jsme tuto žádost HTTP, naše PHP soubor vykonán, a to bude odesílat data zpátky klientovi, že právě z tohoto požadavku. Nyní musíme reagovat na cokoliv serveru řekl nám. K tomu, že máme tuto poslední vlastnost zde nazývá úspěch. Hodnota tohoto úspěchu klíče se vlastně bude funkce, a toto je jeden z opravdu skvělých věcí, které můžete udělat pomocí JavaScriptu. Nejen, že můžete mít ints nebo pole jako hodnotu uvnitř asociativního pole, můžeme také funkci. Takže tím, že říká úspěch, to je můj klíč. Dvojtečka říká, že sem přijde hodnotu, a nyní hodnota je ve skutečnosti funkce. Takže nepotřebujeme k této funkci jméno samo o sobě. Můžeme jen říct to bude nějaká funkce. Bude to trvat 1 argument. Argument pro tuto funkci bude bez ohledu na server poslal nás zpět od podání žádosti. Stejně jako když náš prohlížeč podá žádost, server pošle něco zpět a prohlížeč zobrazí ji, v souvislosti s AJAX jsme jen z žádosti, server odeslal něco zpět, a teď jsme, že reprezentován jako řetězec. S tímto řetězcem Rád bych se zobrazí, že na stránce. K tomu, že budu mít poslední voliče. Chci vybrat prvek s ID ceny. To je jen prázdný div, že jsem si vytvořil na stránce, a chci nastavit obsah tohoto div jako něco, co server poslal nás zpět. Já jsem vlastně upravený quote.php trochu. 

Spíše než volání render a upřesnění některých stránku, quote.php teď prostě bude vytisknout hodnotu zásob jako řetězec. Takže pokud jste byli skutečně navštívit stránku, měli byste prostě vidět, že malé řetězec jakékoliv cena akcií je. Jedna poslední věc, kterou musíme udělat, je zde jen ujistěte se, že tato funkce vrací false. Co to říká, je, že když jsem uvnitř obslužnou rutinu události a že obslužná rutina událost vrátí false místo vrací hodnotu true, to znamená, že nechci, původní událost na oheň. V tomto případě, pokud se neměla žádné JavaScript a my předložen formulář, náš webový prohlížeč se říct, "já jdu poslat, že data spolu," a oni pošlou vás na jinou stránku. Protože jsme pomocí AJAX teď, že to není třeba posílat uživatele na jinou stránku. Jsme prostě bude zobrazovat výsledky dynamicky na stejné straně. My opravdu nechceme, aby nikam, a já chci zůstat na stejné stránce. Takže tím, že vrátí false, abychom zajistili, že formulář není to pro nás. Pojďme se podívat na to, co to vlastně vypadá. Naše quote stránka vypadá stejně. Dovolte mi, abych vytáhnout inspektor sem, takže můžeme vidět, co se děje. Ať je to trochu méně obrovský. Pamatujte, že pokud budeme otevírat kartu síť, to je místo, kde můžeme vidět všechny požadavky HTTP které se dějí na stránce. 

Pro symbol dovolte mi, abych zadejte AAPL a klepněte na položku Získat cenu. Nyní jsme viděli, že podíl Apple stojí určitý počet dolarů právě objevila na stránce, ale URL nezměnila vůbec. Ve skutečnosti, zde je HTTP požadavek, že jsme právě udělal. Udělali jsme požadavek POST na quote.php. To dává smysl. To je to, co server poslal nás zpět. Je to už tento gigantický HTML dokument s obrázky a podobné věci, které, je to jen řádek textu, a pak jsme jen zobrazí řádek textu. Vrátíme-li se do hlavičky, a uvidíme, co se skutečně poslal uvnitř tohoto požadavku HTTP, můžeme vidět tady dole, že jsme poslali podél klíč symbol a hodnotou AAPL, což je to, co uživatel napsal dovnitř To je pěkné, ale je to stále trochu nepříjemné. Stále mám kliknout na toto tlačítko se dostat na cenu akcií. Jsme zaneprázdnění lidé a nemáme čas na tlačítko tlačítka. Google si to uvědomila před chvílí, když prováděly Google Instant. Co Google Instant dělá, je, jak píšete, že právě začíná zobrazování výsledků pro vás takže nemusíte mít strach o ještě klepnutím na tlačítko Hledat. Vlastně, zábava příběh vztahující se k tomu. Jakmile Google Instant vyšel, byli lidé jako, "Whoa, to je super úžasné." "To je tak cool." A student se na Stanfordu, který byl 19 v té době z této stránky s názvem YouTube Instant. Všechny Instant YouTube se je efektivně vyhledávat YouTube okamžitě. Takže spíše než jít na YouTube.com a stiskněte Hledat, když začnu psát do YouTube Instant něco jako CS50, jsme mohli vidět, že to pokouší na pomalé připojení k internetu naplnění těchto výsledků žije. K tomu, že můžeme skutečně udělat velmi jednoduchý úpravu našeho quote.js souboru. Právě teď jsme připevnění tuto událost, pokud je předložen formulář. My opravdu nechceme, aby uživatel odeslat tento formulář už, takže se pojďme místo požáru se tato událost pokaždé, když uživatel stiskne klávesu. Chcete-li, aby pojďme nejprve změnit událost z předložit KeyUp. To znamená, že spíše než čekat na formulář odeslat, pokaždé, když je stisknuto tlačítko, něco se stane. To už dává smysl přiložit tento KeyUp události na celý formulář. Jsme opravdu jen o té vyhledávacího pole. 

Chcete-li vybrat, že nyní, můžeme změnit to být, spíše než forma-citací, form-quote a budeme mít vstup (typ = text), nebo bychom mohli říci (name = symbol) - co chceme. Teď je tu ještě jedna poslední věc, co musíme udělat. Nezapomeňte se sem, když jsme řekli return false jsme si řekli, že nechceme, aby výchozí událost na oheň. Ale to jen tak se stane, že když vypneme, že nyní, co jsme zadejte nebude zobrazovat v prohlížeči už protože by to bylo výchozí chování psaní do textového pole. My už chcete přepsat, takže se pojďme zničit to return false. Pokud šetříme, že a obnovte stránku, teď, když jsem začal psát AAPL uvidíte, že cena akcií na dně zde je dokončení automaticky. Takže tady je CS50 Finance Instant. Vlastně zábava příběh o YouTube Instant je, že student tak nějak to psal jako 1-noční projektu, a druhý den mu byla nabídnuta práce v YouTube generálního ředitele. Takže tak jednoduché, jak to, že jste CS50 studenti, mohou se vaše konečné projekty vám práci na YouTube. Něco jako, že je opravdu skvělý nápad pro konečného projektu, ne? Měli jsme nějaké existující funkce, které jsme chtěli integrovat s. Jsme zlepšit uživatelský komfort trochu, a najednou hledá něco na YouTube Instant může být mnohem jednodušší než ji vyhledat na pravidelném YouTube. Tak to je AJAX v kostce. 

V příkladech, že Josef byl zobrazen, viděli jsme spoustu autocompletes, a ty autocompletes jsou opravdu užitečné, protože nemáme pamatovat - Například, pokud si nepamatujete cenu akcií pro Apple a my jsme jen vím, že je to aa něco, spíše než jen jak mi říká, "Podíl této věci stojí tolik peněz," Já bych trochu rád věděl, co akcie začít s aa. Můžeme to udělat opravdu pěkně s Bootstrap knihovně, která je již součástí uvnitř CS50 financí. Pokud jste přišli sem do tagu JavaScript a přejděte dolů na Typeahead, je to jen pěkná plugin že někdo už psal pro nás, a můžeme snadno používat jeho funkce, jako je tento. Jsem napsal v a tady je seznam některých státech, které začínají s A. Řekněme, že myslím, že to je opravdu cool, a to je čas pro mě, aby je zařadila na mé straně. Ukazuje se, že je to opravdu, ale opravdu jednoduché. Pojďme přeskočit zde quote3.js. Můj soubor vypadá trochu jinak. Tady dole všechny mé věci AJAX je stejný. Chci načíst stavové údaje, aniž by museli jít na jinou stránku. Ale teď chci použít tento plugin. Bootstrap dokumentace je skvělé příklady toho, jak přesně mám udělat, že. Chci říct, "Tady je vstup, který chci automatického dokončování," a budu volat tuto funkci s názvem typeahead, a že se to zvládnout všechny Typeahead věci pro nás. To bude inicializovat seznamu, bude to dělat všechny naše filtrování. Jediná věc, je třeba vědět, je, jaké údaje jsme autocompleting na. Tak jsem zjistil, tento klíč jen tím, že čtení dokumentace a při pohledu na příklady. Kdybych jej klíč zdroje, hodnota tohoto klíče je to jen nějaký řada věcí, chci automatického dokončování. Tato proměnná pochází z tohoto jiného souboru. I otevřít symbols.js. 

Tento symbols.js je právě tento opravdu, ale opravdu velká pole obsahující řetězce všech těchto akciových symbolů z NASDAQ. Pokud chci skočit zpět do HTML, tak jharvard, vhosts, globalhost, html, šablony, quote_form. Vzhledem k tomu, že se nyní nazývá quote3.js, dovolte mi, abych si změnit soubor JavaScriptu jsem včetně zde. Teď mám quote3.js, takže budu načíst v tomto samostatném JavaScript souboru, ten, který má tuto Bootstrap Automatické dokončování. Teď, když jsem se skočit zpět do prohlížeče, stránku znovu načíst, a začnu psát aa, tady je moje autocomplete. A bylo to opravdu tak jednoduché, že. Měl jsem 1 řádek kódu, který právě řekl, "Tady jsou věci, které chci, aby automatického dokončování," a najednou jsem to opravdu, ale opravdu pěkné funkčnost s ne spoustu úsilí vůbec. Jak jste vyvíjíte webové stránky, a zejména čela straně věcí, budete toto je případ hodně. Existuje mnoho, mnoho, mnoho opravdu cool volných knihoven tam které dělají to super snadné dělat věci takhle. Může někdo myslet na žádné nevýhod prostě autocompleting na tomto rozsáhlém seznamu symbolů? Co by mohlo být něco, co není nejlepší s tímto přístupem? Jo. >> [Student] Čas, pokud máte hodně [neslyšitelné] Jo. Právě teď stažení tento obrovský JavaScript soubor a tam je spousta symbolů. A pokud máme spoustu věcí, by to mohlo trochu zvýšit latenci nejen vyhledávání ale také stahování aktuální soubor. Great. Ještě něco? Právě teď není tam žádný skutečný smysl pro EHP. Kdybych zadejte A, společností, které se objeví zde nemusí být z nejpopulárnějších společností, které začínají s A. 

Než se dostanu k Apple, může to trvat i několik více znaků najít to, co jsem hledal. Tento autocomplete nemá tento pocit EHP. Je to jen tak říct, "Cokoliv, co odpovídá jdu k zobrazení." Místo toho, rád bych se nějak integrovat nějaký význam do mých vyhledávání. Když jdu sem na Yahoo! Finance, finance.yahoo.com, Pokud se snažím zadat symbol na stránce Yahoo! Finance tyto a začnu psát GOOG, mám pěkný seznam věcí. Je zřejmé, vypadá to, že Yahoo! Finance dělá něco chytřejší zde. Mají nějaký význam, a mají také další informace jako jméno populace. To je něco, co nemůžu dostat jen s mým Slovník seznamu symbolů. Chci to, a tak jsem to vzít. Chcete-li, aby Pojďme udělat pár věcí. Podívejme se nejprve otevřete inspektor na této stránce protože jsme viděli, že tato stránka není nakládání na všechny, takže je to asi pomocí AJAX nějak načítat svá data. Můžeme zjistit, jaké údaje to načítání. Kdybych klikněte na kartě Síť, to se bude všechny požadavky, které začínají být vypalován. Nyní, když jsem zadejte břečky, můžeme vidět, že jsem právě dostal novou HTTP požadavku. To je pravděpodobně tam, kde že data pochází. Samozřejmě, když jsem se podívat na této adrese, která je trochu podivně pojmenovaný, můžeme vidět, že to je přesně to, kde Yahoo se vyšle svá data z. 

Vytvořil jsem samostatný soubor s názvem suggest.php, která je velmi podobná v duchu na vyhledávací funkci. Je to v podstatě udělá dotaz na adresu URL Yahoo, získat zpět některé údaje, a odeslat ji zpět ke mně. Nyní, spíše než používat tento velký, obrovský seznam symbolů, Mohu použít Yahoo pěkné relevance věci, a já nemám stahovat, že masivní JavaScript soubor. Já jen bude strhnout skutečně relevantní reklamní symboly. Pojďme skočit do toho. Takže html, js. Jsme nyní v quote4. Nyní jsme již používáte tento velký seznam souborů JavaScript. Ale je tu malý druh designu problému zde. Řekli jsme, že v AJAX je asynchronní. Co to znamená, že když udělám AJAX požadavek, tak tady na lince 8, to je místo, kde se má AJAX požadavek skutečně vystřelil. Řekněme, že teď mám nějaký kód sem, že to bude dělat nějaké věci Líbí upozorní uživatele, nebo změnit něco na stránce. Co se to se nestane, je prohlížeč nebude čekat na tuto žádost, aby i nadále před příchodem dolů a bít tento řádek. To je asynchronní část. Bude to, aby se tento požadavek a říct, "Kdykoliv dokončíte, "Vrátit a zavolat, že funkce, které jsem ti zavolat uvnitř úspěchu." To znamená, že nemůžeme jen stáhnout všechny zásoby předem. Musíme podat žádost a čekat na něco, aby se vrátil. To znamená, že před, mohli bychom jednoduše říci Bootstrap, "Tady je seznam věcí, které chci, abyste automatického dokončování." Nemůžeme už ne dělat, že už proto, že nevíme, to, co chceme, aby skutečně autocomplete na. Naštěstí, Bootstrap si na to, protože to jsou inteligentní chlapi támhle, a oni vlastně dali nám jiný způsob, jak naložit tuto Typeahead plugin. Dříve, hodnota tohoto zdroje majetku byl právě tento velký pole věcí automatického dokončování. 

Nyní Vlastnost source je vlastně funkce, a účelem této funkce je zjistit, co ty věci do automatického dokončování je. Tak, jak to bude na to přišel, je, že to bude ptát Yahoo! Finance co nejlepší věci na autocomplete jsou. Chcete-li, že budu dělat velmi podobnou AJAX požadavek. Chystám se požádat tuto stránku na suggest.php. Chci poslat podél symboly stále. A teď můj úspěch, Bootstrap dokumentace mi , že za účelem naplnění tento seznam věcí, vše, co potřebujete udělat, je předat v tomto poli nyní funkci zpětného volání. Ale počkejte. Pokud tohle má být pole a AJAX mě posílá zpátky text, Jak je to možné? To představuje nový způsob výměny dat s názvem JSON. V tomto případě jsme nejen zasláním jednoduché řetězec textu. Nyní máme co do činění s tímto složitějším seznamu symboly akcií. Tyto symboly akcií může také zahrnovat věci jako název společnosti nebo aktuálních cen. Jen pomocí velké dlouhý řetězec, který není naformátovaný v žádném předvídatelným způsobem se nebude nejlepší způsob, jak dostat tyto údaje ze serveru Yahoo se mnou tak, že nemohu snadno srozumitelná. JSON je technologie, která využívá toho, jak jsme se vytvořit asociativní pole v JavaScriptu. To vypadá hodně jako JavaScript asociativního pole, a ve skutečnosti, že je to proto, že je. JSON je zkratka pro JavaScript Object Notation. To je v podstatě dohodnuté formátu pro přenos dat tam a zpět. Zde tento objekt JSON nebo to JSON asociativní pole je mi poslal nějaké údaje o kurzu. 

Klíče tohoto pole, jsou věci jako předmětu, který má hodnotu cs50, a tady dole můžeme vidět, že můžu mít hodnotu, která je pole. Nemám dělat věci jako vyřadil řetězců a podívejte se na čárkami a dělat šílené věci, jako že. Protože toto je deklarována v tomto formátu JSON, JavaScript a jQuery již funkce převést řetězec , která vypadá jako tento JSON do skutečného JavaScript asociativního pole , že můžeme pracovat s. Dělat, že je tak jednoduché, jak říká, že už je to soubor, suggest.php, mě poslal zpátky prostě řetězec textu, ale já vím, že to bude mě poslal zpět JSON. To znamená, že JSON může být převeden do JavaScriptu asociativního pole. A tak jQuery, rád bych, abys to pro mě udělat. To znamená, že se tato reakce zde parametr, To je již jen řetězec. Vzhledem k tomu, že jsme řekli, že jQuery přichází nějaký JSON, jQuery bude dost chytrý, aby řekl, "Chtěl jste JSON?" "Chystám se převést to do asociativního pole pro tebe." Pojďme vlastně se podívat na záložce Síť jakmile budeme mít quote4.js. Budeme změnit a obnovte stránku. Teď budu psát v-znovu. Udělal jsem pár žádostí na suggest.php, ale teď to odpověď, spíše než jen řetězec, je to JSON. Tak jsem si otevřený složená závorka říká, "Tady je asociativní pole." 

První a pouze klíč tohoto asociativního pole se nazývá symboly, a pak je zde pole všech příslušných symbolů nyní přichází z Yahoo! Finance, není z tohoto obrovského seznamu. To je, jak mohu jednoduše naplnit tuto automatického dokončování plugin s některými údaji, které není pocházejících z místního souboru, který je již předem stanovené ale z něčeho jiného. Ukazuje se, že skutečně můžeme využít technologii zvané JSONP, nebo JSON s polstrováním, bude to odstranit tuto suggest.php prostředníka. Ale místo toho, aby dělal to, pojďme místo podívat na to, jak mohu zlepšit to ještě víc. Moc se mi líbí bootstrap je Typeahead. Je to opravdu pěkné. Ale my jsme stále dobří JavaScriptu a chceme trochu to sami, Možná se podívat na to, co tento plugin mohl dělat. Pojďme již použít tento Typeahead věc, a zkusme se tento seznam navrhovaných zásob sami. Tady v quote6.php budeme začít stejným způsobem. Pokaždé, když někdo něco napíše, chceme, aby AJAX požadavek. To je podobné našemu původnímu CS50 financí Instant. Spíše než aby žádost o quote.php, jsme nyní snaží o to požádají stejném souboru jako dříve, tato suggest.php, které se právě chystá vytáhnout data z Yahoo! Finance. 

Opět, jsme stále čeká JSON, ale teď, protože Typeahead nedělá to pro nás, musíme také zaslat spolu hodnotu, která je uvnitř aktuálního textového pole. Teď víme, na co se ptát Yahoo! Finance pro, a tak nyní je tu funkce, kterou chcete provést, jakmile požadavek dokončení. Nemáme plugin, aby se seznam pro nás, takže tady je místo, kde jsme se to vlastně bude stavět seznam návrhů. Chcete-li, že, stejně jako v PHP jsme spojeny tyto velké řetězce HTML pak jsme si vytiskli je, můžeme udělat stejnou věc přesně v JavaScriptu. Nejprve budeme začít tento řetězec s názvem návrhy, a tento řetězec je jen bude obsahovat nějaký HTML. Chceme, aby to bylo seznam věcí, takže budeme začít s tímto seznamem tag, a teď budeme iterovat přes všechny symboly, které byly vráceny zpět k nám. Pamatujte si, protože jsme řekli Typ dat: "JSON ', to není řetězec. To je již pole pro nás. To je opravdu cool. Můžeme jednoduše říci: "Chci, abys pripojit prvek seznamu." Dáme ji uvnitř prvku v části, která, budeme jej třídu návrhů, takže víme, co to je, a nyní je zde symbol, že jsme se vrátili z Yahoo! Finance. 

Jakmile jsme vytvořili prvek pro každý ze symbolů jsme dostali zpět, chceme jen uzavřít seznamu. Takže teď návrhy představuje tento malý fragment HTML které když se na stránce bude seznam věcí, které hledáte. Nyní se pojďme skutečně dát na stránce. K tomu, že jsem vlastně vytvořil další prázdný div a já jsem mu poskytla identifikátor návrhů. Stejně jako jsme si stanovili obsah div, že by zobrazují cenu stavových údajů, nyní jen chcete nastavit obsah tohoto div se, co je tento řetězec který obsahuje tyto symboly. Pomocí této metody HTML, toto doporučení proměnné, tento řetězec je řetězec HTML. Chci, abys to HTML a vložte jej uvnitř div s názvem návrhy. Právě jsme připojena něco DOM teď. Přidali jsme nějaké nové prvky do DOM, že nyní můžeme zobrazit na stránce. Pojďme se podívat, jak to vypadá. Pokud načítáme na quote6 a nyní se vrátíme zpět, teď, když jsem se začít psát AAPL, že už nemáme, že Bootstrap automatického dokončování, ale nyní máme tento seznam, který jsme udělali sami. To je trochu ošklivější než Bootstrap Typeahead, například, ale to nám umožní udělat jednu věc. Když jsme se dívali na tento Bootstrap pluginu, jsme viděli, že když jsme autocompleted, jeden z autocomplete hodnot byl AAPL. To nemusí být tak užitečné. Jako uživatel bych neměl okamžitě rozpoznat všechny symboly akcií. Co jsem asi větší pravděpodobností rozpoznat jsou firemní skutečná jména. Takže by to bylo opravdu užitečné, pokud spíše než říkat AAPL tímto řekl něco jako Apple Inc Vzhledem k tomu, že jsme válcované to sami, můžeme velmi snadno udělat. Pojďme otevřít náš poslední citát soubor zde, tak quote7. 

To je totéž. Právě jsem vytvořil další PHP soubor, který se vrátí k nám víc než jen symboly. To bude také dát nám zpět společnosti jména. A tak děláme to samé. Děláme AJAX požadavek. Po požadavek byl dokončen, budeme provádět tuto funkci zde, a tato funkce bude vybudovat velkou řetězec prvků. Ale rozdíl je, že hodnota těchto seznamů je již jen symbol, je to teď jméno. Takže máme jeden malý problém. Když jsme využít naše vyhledávání, musíme nějak předat symbol. Nemůžeme projít vyhledávací něco jako Microsoft Corporation. Musíme ji předat MSFT. Když jsme psát HTML, máme spoustu pěkných vestavěné atributy. Mohl s ním spojené href nebo třídy. Ale to, co opravdu potřebujeme, je pro každý z těchto odkazů mít symbol akcií s ním spojené. Není vestavěný HTML atributu fotografii symbol, ale naštěstí, HTML5 nám umožňuje vytvořit vlastní atributy, aby co chceme. Tím, že říkáte dat-symbol, jsem představil nový atribut jehož jméno jsem skládá, a je to v pořádku, protože jsem zahájen s těmito daty. Budeme uložit uvnitř města se symbolu ze skladu teď. Co to znamená, je to, že i když jsme zobrazení hodnoty názvu společnosti uvnitř našeho autocomplete, jsme stále pamatovat na symbol který je spojen s každou společnost. Způsob, jakým to děláš, je uvnitř tohoto prvku. Takže to znamená, že musíme udělat ještě jednu změnu. Když jsme na něj teď, musíme skutečně využít symbol atributu spíše než jen jeho hodnota. Pokud se zpět nahoru, přikládáme obslužnou rutinu události návrhy. Kdykoliv je jeden z těchto návrhů kliknutí teď, chci něco udělat. To, co chci udělat, je změnit hodnotu tohoto vstupního pole. Teď chci nastavit stejný val funkci. 

Takže bez argumentů tato funkce val vrací na vás, co je již v textovém poli, ale pokud dáte to řetězec, to bude trvat tento řetězec a vložte jej do textového pole. Já výběru jeho textové pole stejným způsobem. Je to jméno je symbolem uvnitř formulářů citátu. Teď jsem zaslala mu hodnotu atributu data-symbol. Tato věc zde je nový, to $ (to). Co se to týká, je prvek, který bylo kliknuto. Můžeme vidět, že nejsme připojení událost click na každý prvek s třídou návrhu jednotlivě. Spíše, blížíme se to trochu jinak. Místo toho říkáme, kdykoli něco uvnitř tohoto div náměty, která pamatujte je jen kontejner pro tohoto seznamu, pokud něco uvnitř tohoto div klepnutí a má třídu sugesce, Chci tuto událost na oheň. V podstatě to, co to znamená, že můžeme udělat, je, že jsme mohli znovu použít stejný obslužnou rutinu události pro všechny věci v seznamu. Takže nemáme mít jednu obslužnou rutinu události pro první prvek a různé události pro druhý prvek. Můžeme místo toho říct, "Chci stejné obslužné rutiny události se vztahuje na všechno v mém seznamu." Ale musíme to nějak vědět, který prvek bylo kliknuto. Tento "to" klíčové slovo představuje právě to. To je předmět, který právě klikli uživatelem. Pokud jsem kliknul 3. odkaz, to představuje prvek této třetí odkaz, což znamená, že bych mohl dostat svůj atribut, data-symbol, které známe musí obsahovat symbol, který je spojený s firmou jsem kliknul. Pokud bychom skočit zpět na náš finanční stránce, můžeme vidět, že až začnu psát něco jako MSFT, jsme již stále jen na reklamní symboly, jsme teď dostali skutečné společnosti. Ale když jsem klikněte na jednu z těchto společností, můžeme vidět, že jsme skutečně vyplnění textové pole není s názvem firmy ale s tím, co bylo uloženo v těchto datových atributů. A tak když jsem vlastně prohlédnout jeden z těchto prvků pravým kliknutím a klepnutím na tlačítko Zkontrolovat prvek, můžeme skutečně vidět, jak to vypadá. 

Označit toto je něco, co jsme vytvořili uvnitř, že pro vedení když jsme byli budování že řetězec HTML. Je vidět, že tímto dat symbol má hodnotu MSFT, což je velmi dobrá. To je to, co jsme očekávali. To je symbol, a to je, jak jsme se dostali hodnotu, která jsme potřebovali použít uvnitř tohoto textového pole. To je dost na poptávkový formulář, protože to je něco nudné. Pojďme udělat nějaké rychlé vylepšení našeho portfolia stránku. Pokud jste použili CS50 Finance na chvíli a můžete začít kupovat a prodávat hodně zásob, nakonec tato tabulka dostane docela velký, a budete chtít burzovní, samozřejmě. Jakmile tabulka je opravdu, opravdu velký, mohlo by to být užitečné pro uživatele, aby se pokusili hledat přes něj. Uvnitř vyhledávacího pole, pokud začnu psát něco jako Disney a hledají pro své ilustrace Mickey Mouse, můžeme vidět, že tabulka je nyní filtrování na základě toho, co jsem právě napsal dovnitř Tato funkce vypadá Super komplikované, ale je to opravdu, ale opravdu jednoduché s jQuery a JavaScript. Tento portfolio.php soubor obsahuje soubor JavaScriptu s názvem portfolio.js. Pojďme se na to podívat. Takže html, js, portfolio. Zde je místo, kde děláme, že vyhledávání na stole. První věc, kterou musím udělat, je připojit obslužnou rutinu události tohoto textového pole protože víme, že chceme, aby naše filtrování funkce na oheň pokaždé, když uživatel stiskne něco, protože nemáme čas na hledání tlačítek. První věc, kterou musíte udělat, je zjistit, co uživatel hledá, stejně jako jsme to udělali předtím. Toto klíčové odkazuje na aktuální prvek je uživatel interakci s. 

Vzhledem k tomu, že uživatel je interakce s vyhledávacího pole, $ Představuje pole pro vyhledávání, tak this.val nám dává to, co je uvnitř vyhledávacího pole je uživatel aktuálně píšete. Takže, co teď chceme udělat, je chceme iterovat přes všechny řádky uvnitř našeho stolu. Chcete-li vybrat všechny řádky v naší tabulce, dal jsem, že tabulka k ID tabulky portfolia, a každý řádek je reprezentován prvkem TR, takže výběr bude vrátit ke mně velkou pole všech řádků v mém stole. Teď chci, aby iteraci, že pole. Mohl bych si pro smyčce, ale jQuery skutečnosti nám poskytuje pěkný funkci s názvem "každý." Co každý dělá, je každý přijímá jeden argument, a tento argument je funkce. Co to udělá, je, že to bude platit tuto funkci na každý prvek uvnitř tohoto seznamu. Tato funkce má jeden argument, který je e, a když se provede tato funkce, tento e se bude nahrazen prvním řádku, pak v druhé řadě, a pak třetí řadě. Tímto způsobem, to je totéž, jako běh pro smyčce a pak zjišťuje aktuální prvek na základě indexu uvnitř vaší smyčky for. Na každé iteraci, pro každý z těchto prvků v tabulce, Chci zjistit, jestli textu prvku - text buňky uvnitř daného řádku - odpovídá tomu, co jsem hledal. Tento velký dlouhý řetězec příkazů je, jak bych mohl udělat, že. Za prvé, opět, to se týká - protože je to uvnitř nové funkce - toto je nyní aktuální řádek v tabulce. Chci, aby se aktuální řádek v tabulce, a chci se dostat všechny své děti. Nezapomeňte, DOM je hierarchické strom, , což znamená, že prvky mají řadu dětí. 

Tato. Děti funkce se vrátí na mě zpět matici všechny prvky že jsou děti, v tomto případě, řádek v tabulce. To je prostě buňky uvnitř této řady. Já jen chci, aby vyhledávat v první buňce. Tato. První funkce říká, že mi na první prvek v daném poli. Pak Odkazová funkce říká, že mě přesně to, co je uvnitř této buňky protože chci prohledávat tohoto textu. Konečně, pojďme převést na malá písmena, takže můžeme udělat textové nezáleží na velikosti písmen dotazy. Konečně, chceme zjistit, zda se tento řetězec uvnitř tabulky obsahuje řetězec jsme hledali. IndexOf funkce v JavaScriptu dělá jen to. To nám říká, zda je tento řetězec obsahuje jiný řetězec. Pokud je to pravda, že buňka obsahuje to, co jsem hledal, pak chci, aby se ujistil, že je to uvedeno. Zobrazit metoda bude říkat, "Zobrazit element." Pokud toto není ten případ, pak to znamená, že bez ohledu na pátrám, není obsažena v tomto řádku, a tak se chci schovat, je od uživatele. To dosahuje že pěkný filtrování účinek, pokud již vidíme celou tabulku. Pokud máte zájem o tom, jak tento burzovní stejně, budeme psát zdroj on-line. Ale je to opravdu jednoduché. JQuery má úžasné metody pro tyto animací a manipulace CSS vlastnosti. Tak, to je to pro mě. 

Co pak čeká? Jak uvidíte v několika dnech, konečný projekty návrhu se počítá. Konečný projekty Návrh bude se vás zeptat na pár otázek, ale mezi nimi budou tři milníky - jeden je "dobrý" milník, jeden lepší milník, a jeden nejlepší. Myšlenka je opravdu pomůže vám kluci nastavit očekávání tak, že minimálně budete spokojeni s výkonem svého konečného projektu a to bude "dobrý", pokud máte obavy. Ale pak v zájmu dostat se dosáhnout jen trochu na něco lepšího nebo něco nejlepší, budeme také nějak tlačit vás k, že stejně. The CS50 Hack-a-Thon, mezitím, je během několika týdnů. Typicky, děláme to na základě loterie základ, protože zájem, ale statistiky jsme si vezmu několik stovek z nás v kyvadlové autobusy z Harvard Square dolů Kendall náměstí, kde Microsoft má krásnou zařízení výstižně nazývá "NERD" - New England Výzkumné a vývojové centrum. Budeme se tam dostat kolem 8 vecer budeme mít něco k jídlu. Kolem 1 hod. budeme mít trochu víc jídla. Kolem 5 hod., když jsi ještě vzhůru budeme přes hlavu IHOP nebo se dostanete zpět do areálu. Cílem je ponořit se do finálových projektů vedle spolužáků a zaměstnanců. Pak o několik dní později je CS50 Fair, který je opravdu chtěl být příležitost pro vás kluci předvést svou práci a úspěchy na semestr zatímco kontaktech se navzájem a získat představu, co každý dělal. Díky, že řekl, moc děkuji Tommymu a Josefovi, a uvidíme se v pondělí.  [Potlesk]