[Powered by Google Translate] [Week 9, Folytatás] [David J. Malan - Harvard University] [Ez CS50. - CS50.TV] 

Ez CS50. Ez a vége a hét 9. Köszönöm szépen. Végre. 9. hét. Megvan. Ma folytatjuk a beszélgetést web programozás egy szem felé, a végleges projekt, nem azért van, hogy valamit csinálni web-alapú A végső projektek, hanem azért, mert sem a végső projektek vagy azt követően CS50 ez minden bizonnyal az az irány, amelyben a modern szoftvert megy. És mégis, ez valójában nem egy egyszerű dolog. Tény, hogy az egyik legnehezebb dolog, hogy a szempont design. 

Például, a design is jelenti, ténylegesen is a felhasználói felület vagy a felhasználói élmény jobbra. Merem állítani - és tudjuk, hogy egy új probléma set amikor néhány közületek Sugárzás a hasfájás néhány szoftver vagy hardver, amely infuriates te, akár az egyetemen, vagy off - van egy csomó helyek ott, van egy csomó hardver odakinn, ez a fajta szar. De a valóság az, hogy a dolgok, amelyek könnyen használható, mégis ennek ellenére erőteljes egy nagyon nehéz kihívás. Így ma kértem József és Tommy, hogy csatlakozzon hozzám ide hogy mi lehet egy beszélgetést, mind a design és milyen gondolkodási folyamatait kell kezdeni megy keresztül a fejedben amikor tervezni a végső projektek, a jövőben törekvések. És majd Tommy segítségével fogjuk nézni néhány végrehajtási részletek. Hogyan lehet néhány elképzelés papíron vagy a fejedben hogy aztán végre algoritmikusan segítségével egyes technológiák és technikák épp most kezdett beszélni, nevezetesen a JavaScript és valami még újabb, nevezetesen AJAX, aszinkron JavaScript programot. Ez lehetővé teszi, hogy a dinamikusabb a felhasználói felület által letöltésekor több és több adatot fokozatosan a szerver. Szóval majd meglátjuk, néhány ilyen kódrészletet is ma. Mint félre, ha érdekli koncentrálási számítástechnika vagy minoring számítógép-tudomány, tudom, hogy ezen a héten pénteken délben A Maxwell Dworkin 221 lesz a pizza esemény ahol meg lehet tanulni egy kicsit többet számítástechnika. Az utat az ajtón ma Ön képes lesz arra, hogy vegye fel egy nem hivatalos útmutató CS Harvardon. Majd tedd a kukák ezen kívül a derék magasságban így ha azt szeretné, hogy fogd ezt, és tanulni egy kicsit többet CS, , hogy ott lesz az Ön számára, mint volt a 0. héten. Akkor is, ha szeretne csatlakozni hozzánk ebédre CS50 ezt pénteken 01:15, irány cs50.net/lunch. Minden további nélkül, adok neked tanítást ember Joseph Ong. Szia. [Taps] Kösz. Az első alkalommal hallottam tervezés volt egy osztály van az úgynevezett CS179. 

A professzor abban az időben azt mondta nekünk a történetet egy másik tanár aki elment egy szállodába, és használta a csaptelepek. Tud valaki mondja meg, mi a 2 gombok a bal és a jobb csinálni? [Hallgató] Meleg és hideg. >> Meleg és hideg. Jó. Mit általában elvárható, igaz? Ez a tanár használata után a csapot akarja venni zuhanyozó, és azt, hogy ezt a bevételt. Azt hiszi, hogy a bal és a jobb oldalon a hideg és meleg, ugye? De tud valaki mondja meg, mit jelentenek ezek valójában? Bármely keze? [Hallhatatlan diák válasza] >> Az egyik javaslat az? [Hallhatatlan diák válasza] >> hőmérséklet? Tehát az egyik közülük ellenőrzi hőmérséklet és az egyéb ellenőrzések? >> [Hallgató] víznyomás. Víz nyomás. Jó. Ez a tanár belép ebbe, és azt gondolták, hogy a vezérlő a hideg és meleg, fordul az igazit, amely azt hiszi, ez a forró, egészen mert azt akarja, hogy egy meleg zuhany. Nos, ezek valójában nem egyeznek meg, így ő kapja ezt a nem túl szórakoztató élményt , hogy a hideg zuhany, és mindannyian tudjuk, milyen érzés. Ez egy példa a tervezési hiba. Mit jelent ez a várakozás a csapból nem egyeznek, mi jött ki a zuhany alatt, ami elég szerencsétlen neki. Tehát ez egy példa egy tervezési hiba, ami történik az életben. De azt látjuk, mindenféle más is is. Mi valószínűleg nem rajongók a MBTA rendszer. Ez a metró rendszer valóban Londonban, ami azt mondja: "Ez a gomb nem használható." Miért van még ott? Miért is érdekel? Amikor gyerek voltam, mivel a tech hozzáértés, egyet a házban, ha a számítógép is összeomolhat, anyám jön hozzám, megmutatta nekem ezt a képernyőt, és megkérdezte, mi történt. 

Még nem tudom, hogy ez mit jelent. [Nevetés] Mi az? [Nevetés] Néha úgy érezzük, mintha a szoftverfejlesztők csak pergetett minket. Amint a felhasználók vagyunk, mint a "Mi folyik itt? Valaki mondja el nekünk." Mindez jön le, hogy a kérdés a design. Design, mint látjuk, nem pusztán esztétikai, ez nem arról szól, hogy hogyan néz ki a dolgok. Látjuk itt, hogy ez a kis pop-up ide valóban úgy néz ki, nagyon szép. Ez egy árnyék a háttérben, azt átnyúló sugarú folyik. Ez olyan szép. Ez nem igazán jól megtervezett, mert nem nagyon felhasználóbarát. Ez a kis pop-up, hogy jön fel nem igazán nekem semmilyen információt arról, hogy mi folyik itt, ez nem mond nekem semmit, mint a felhasználói arról, hogyan lehet helyreállítani az említett hibát. Azt akarjuk, hogy gondolni a dolgokat, hogy a design nem. Először is, ez nem esztétika. Ez nem is a töltelék app tonnányi felesleges funkciót. Ha egy thai éttermet, akkor valószínűleg nem akarja, hogy egy fogorvos, ugyanabban az időben. És a Facebook Kérdések, nem az, hogy sok ember használta és ez nem volt a lényege, amit építettek. És ez így jó, hogy úgy gondolja, hogy nem annyira a mennyiség a dolgok hogy te üzembe az alkalmazás, de a minőség és hogyan csinálsz, hogy a jobb felhasználói élmény által ténylegesen javul, amit már van. 

Dióhéjban, design elmondja, mit kell építeni. Például, ha mi építünk valamit, ossza meg velünk keresni dolgokat, mint a Google, például, meg kell tennünk a dolgokat módon amely előírja, hogy a felhasználó számára, hogy sok kattintást kap, amit akarnak, vagy tegyünk meg olyan módon, például a Google Instant vagy autocomplete , amely lehetővé teszi számunkra, hogy a mi eredmények gyorsabb? Engineering magában foglalja, mint a Tommy megmutatja, valójában épület is. Sok fajta design. Például, ha építünk valamit telepíteni valamit Egy harmadik világbeli országban, ahol nincs sok villamos energia, illetve, hogy sok technológia meg kell tervezni, hogy mit építünk oly módon, hogy könnyen hozzáférést biztosít az emberek ott. De miféle más tervezési döntések meglehet van-e vagy lehet, hogy részt vesz valami ilyesmi? Igen. Látom a kezét. [Hallhatatlan diák válasza] >> Rendben. Pontosan. Kisegítő egy dolog. Sokan nem gondolnak: "Mi lesz a felhasználó?" mint a szélső sem spektrum. Van felhasználóknak, akik olyan fogyatékossággal, hogy nem vagyok gondolok és én csak gondoltam tervezése az általános felhasználó számára. Az internet elérhető mindenki manapság, és azt kell kidolgozniuk, azoknak az embereknek is. Milyen típusú más tervezési döntések is csinál? Igen. >> [Hallgató] Költségét. Költség. Nagyon jó. A másik dolog, talán alapozzuk tervezési döntések költség. Ha vagyunk olyan üzleti, szeretne építeni valamit, ami nem vesz sok költséget termelni de lehet eladni egy különösen magas költségek, vagy minket némi nyereséget. 

Ezek mind különböző design, de amikor építünk valamit az interneten vagy amikor építünk valamit, ami valószínűleg nem kerül, hogy sok felépíteni most mint például az Internet alkalmazások - nem kell, hogy dobja sok tőkét bele annak érdekében, hogy valamit, ami tényleg működik - mi vagyunk jobban aggódik a felhasználói élményt. Ezt hívjuk felhasználó központú design. Lényegében mi felhasználó központú design magában foglalja a napokban magatokat a cipő a felhasználók. Ha valaki feliratkozik, amit építek, ők már nyilvánvalóan az én különleges kérelmet egy célt szem előtt tartva, azzal a feladattal akarják befejezni. És a munka nem csak hogy segítsen nekik befejezni a feladatot hanem hogy segítsen nekik befejezni ezt a feladatot olyan módon, amely hatékony, intuitív, és, mint néhány ember azt mondta ott, hozzáférhető. Mit jelent a hatékonyság jelent? Hatékonyság: az, hogy milyen gyorsan jelent a felhasználói befejezni a feladatot adtam interfész. Vajon hogy sok kattintást őket, hogy egyik helyről a másikra? Ez unalmas? Vajon el kell végezni sok ismétlődő feladatok? Azt szeretnénk, hogy a folyamatot a lehető leghatékonyabban így nem kell csinálni a dolgot. Ami intuitiveness, azaz, például, ha egy felhasználó néz up my interfész, ez könnyű nekik, hogy egyik helyről a másikra? Vajon könnyű számukra, hogy kitaláljuk, mit kell kattintania az én felületen ahhoz, hogy elérjék a célt vagy feladatot akarnak elérni? 

És végül, az egyik ember azt mondta ott, a hozzáférhetőség nagyon fontos. [Férfi hangszóró] Jön a hozzáférhetőség a dolgok, mint a látás, mint hogyan tudom valójában tervezzen valamit valakinek, aki vak? Oh. Azok számára, akik nem lát egyáltalán, van egy úgynevezett képernyőolvasó. Mit kell tenned, hogy meg kell építeni a website olyan módon , hogy például, bizonyos technológiák hívjuk - Sok dolgot most. Úgy gondolom, hogy az úgynevezett JAWS képernyőolvasó. Egy csomó ilyen dolog hivatkozhat hívjuk terület szabályok annak érdekében, hogy felolvassa a felhasználónak, ami jelen van az oldalon. Azok számára, akik nem látják, meg kell győződnie arról, hogy ezek a képernyőolvasók ténylegesen vedd fel a tartalmat az oldalon, és valóban azt mutatják, hogy a felhasználók, Ha nem látod, legalább még mindig érti a tartalom az oldalon. Igen. Oké. Elég beszélünk jó design. Beszéljünk rossz design. Ezek olyan dolgok, amiket nem kellene. Tud valaki mondja meg tapasztalatait a Craigslist és mit gondolnak nem olyan nagyszerű ez a design? Igen. >> [Hallgató] Azt hiszem, túl sok szót az egyik területen. Túl sok szó, ugye? Teljesen elsöprő. Ha ezt az oldalt, és te köszöntötte egy csomó dolgot ide hogy talán nem is számít neked. Például, ha él az egyik kimondja, hogy nem úgy kezdődik, ezt a levelet. Tegyük fel, hogy él, Texas, vagy ilyesmi. 

Meg kell görgetni egészen a lap, hogy a hely, vannak. Én vagyok a Boston, hadd nézzen Massachusetts. Hol van Massachusetts? Ó, itt van. Ó, Boston. Oké. Nézzük Boston. [Nevetés] Elég nyomasztó, ugye? Kínos dolog ott. [Nevetés] Mondjuk Ezt keresem valahol élni. Hány ember ténylegesen használt Craigslist? Rengeteg téged. Vannak nagyon rossz módon, hogy nézd meg, de nézzük meg ezt. Mi a különbség az img és a kép? Tud valaki mondani nekem? Ott valóban nincs különbség. Ők is jelent pontosan ugyanaz a dolog, de ezek különböző címkéket őket valamilyen okból. Ha kattintson a Has fényképek, semmi sem történik az oldalon. Igazából kell kattintania keresése újra, hogy történjen valami. Mi lehet a jobb tervezési döntést, hogy lehet tenni ott? Ha én vagyok kattint, hogy filter, én valószínűleg szeretne szűrni, hogy az adott intézkedés vagy az adott kategóriában. Tehát ahelyett, hogy nyomja meg a Keresés ismét tudtam csak automatikusan végzi a szűrést fajta Google stílusú amennyiben csinálni azonnal. [Malan] De nem képez, ahogy láttam őket eddig kell fizikailag benyújtani lenyomja az Enter legalább vagy kattintson a gombot? Ahogy láttam őket eddig, hogy tényleg kell kattintania Submit csinálni ezeket a dolgokat. 

De Tommy megmutatja a második, vannak valójában módon az Ön számára oly módon, hogy ha rákattint a dolog akkor automatikusan küld hívjuk egy AJAX kérés és kap adatokat vissza és szűrheti az eredményeket azonnal. Rengeteg dolog, ami rossz ezen a felületen. [Malan] Tud keresni Cambridge? Van valami kissé rendhagyó itt, ahol törődnek Cambridge és még kapsz Westford, Spring Hill, West Newton és hasonlók. Valószínűleg nem ideális. >> Valószínűleg nem ideális. Hogyan lehetne azt tenni, hogy a felhasználói élményt jobban az adott oldalon? Igen. >> [Hallgató] utasítások. Oké. Utasítások milyen értelemben? [Hallgató] Például, egy dolog, az első alkalommal felhasználók számára, akik még csak nem is tudom, mi Craigslist vagy nem tudom, mit kéne csinálni. Rendben. Tehát arról, hogy mi Craigslist ezen az oldalon fontos. Mi lehet valójában mondani, hogy mi ez az oldal a felhasználók valójában a. Ha én csak meglátogatta ezt látom, egy csomó helyen. Én nem is tudom, mit jelent. De ami még fontosabb, csak nézi most ezt a felületet, emlékszem kellett görgessen egy csomó dolog, hogy talál egy adott közösség hogy én valóban törődik ezzel. Mi egy gyorsabb módja, hogy ezt? Igen. [Hallgató] Oszd őket a keleti, nyugati régiókban. >> Oké. Tudnám osztani őket több kategóriában, amely segíthet nekem gyorsabb meghatározni hogyan lehet eljutni az adott helyre. [Hallgató] Tegyen egy legördülő listából. >> Rendben. Oké. Jól jönne egy legördülő menü, mert van egy fix sor dolgot és mi is megmutatom nekik a legördülő menüből. Így nem veszi fel ilyen sok helyet a képernyőn. De még jobb, mint az, hogy mit tehetünk? Igen. >> [Hallhatatlan tanulói válasz] >> tudja mondani, hogy egyszer? >> [Hallgató] Keresés mezőbe. Igen, egy keresőmező. Ez nagyszerű. Mit tehetünk, ha ténylegesen nézzük vissza a diák keresőmezőbe. Autocomplete. Nagyon egyszerű módja annak, hogy keresni eredményeket, hogy tudod, van egy sor. Ha elkezdek gépelni BO, csak mutasd meg nekem a találatokat, amelyek BO bennük. Így tudok nagyon könnyen megtalálja a különösen egy akarok menni ahelyett, hogy lapozhat ez valóban nagy listát. 

Ezek mindenféle valóban alacsonyan lógó gyümölcs, hogy valaki, aki a végrehajtó Craigslist ténylegesen tenni, hogy a tapasztalatok a honlapon sokkal jobban azok adott felhasználó. Oké. Elég beszél rossz weboldalak. Beszéljünk Facebook. Amikor a Facebook jött ki, és különösen a Facebook fotókat, voltak sok egyéb szolgáltatás abban az időben, ami nem pontosan ugyanazokat a dolgokat. Tudták szervezni a képeket albumokba. Mit tehet az meg tudná szervezni őket készletek is. Lehet szervezni őket dátum. Lehet csinálni ezeket a különös dolgokat. De vajon valaki tudja, mit tett Facebook fotók felrobban időpontjában megjelent? Igen. >> [Hallgató] Szavak. Szavak >>. Pontosan. Van Milo ide, aki a mi kutya kabala azzal CS50 bandanna. Láthatjuk, hogy itt van ez a címkézés funkciót a közepén. És mit tett Facebook fotók annyira érdekes egy használhatósági szempontból az, hogy ténylegesen lehetővé tette az emberek ezen keresztül bevonni a barátaikat a saját fotók. A Facebook, mivel a honlap különösen a szociális, ez körülbelül épület ezt a fajta társadalmi légkör. Ez javította a tapasztalat a képek sokkal mert ténylegesen kezdeni mondván: "Ezek az emberek közötti kapcsolatok, és ezek a fotók az emberek, hogy tényleg érdekli. " Része ez is egyfajta önimádat. Az emberek szeretnek kell jelölni a kép és ilyesmik. Bár ez nem feltétlenül jó emberi tulajdonság, ugyanakkor ez a jó tervezési döntések mert az emberek valóban törődnek a dolgok, mint ez. Szóval ez Facebook fotók. 

De beszéljünk Facebook általában. Biztos vagyok benne, sok ember itt van véleményük Facebook, mind a jó és a rossz tervezési döntések tervezési döntéseket. Szóval szellőző vagy boldog legyen. Gyerünk. Tudom, hogy az összes használt Facebook. Valakinek van valami rosszat mondani, vagy valami jót mondani róla. Igen. [Hallgató] A hírcsatorna van egy csomó dolog, amit nem igazán érdekel. A hírcsatorna nem mutatnak egy csomó dolog, amit lehet, hogy nem érdekel. Van barátaival a Facebook, akik még nem találkoztak, 2 vagy 3 év és látod a híreket eredményeket felbukkanó a news feed és nem igazán érdekli. Facebook valóban erőfeszítéseket tett, hogy ez jobb, és ők már valóban megpróbálták betolni releváns eredményeket a tetején a hírcsatorna, mint a késői így valóban látni a dolgokat, a barátok, amelyek relevánsak az Ön vagy közeli barátok. Még valami? Igen. [Hallhatatlan diák válasza] >> tudja mondani, hogy egyszer? [Hallgató] A hirdetések viszonylag feltűnő. >> Milyen értelemben? [Hallhatatlan diák válasza] Nem világos a képernyőn, mint a bannerek. Oké. Ez jó. Ha emlékszel az interneten a 90-es évek - >> [Malan] ott voltam. >> Ott volt. [Nevetés] Talán emlékszik villogó GIF háttereket, csillogó dolgokat, GeoCities stílusa fajta dolgokat. Ez tényleg nem egy példa a jó design mert tényleg zavaró a tartalom. A Yale art honlap hozzászokott volna animált GIF azok háttere és akkor nem tudott olvasni semmit az oldalon, de azt hiszem, hogy valaki tényleg beszéltem velük, és most ez egy kicsit más. [Malan] Sokkal jobb most. >> Sokkal jobb most, mint látod. >> [Malan] Oh igen. Csak jó, csak - Igen. Oké. 

Része az is, hogy az oldal valószínűleg nagyon minimalista és nagyon érthető így a dolgok az oldalon áramlását oly módon, hogy ez nagyon logikus és nem kap, ahogy egymást. Milyen típusú egyéb dolgok jó a Facebook, vagy rossz a Facebook? Nézzük csak meg a design beszélgetés itt. Oh. Hova? Igen. [Hallgató] Az új Timeline rendszer lehetővé teszi a keresést az illető profilját körülbelül múltjukat. Ó, Timeline. Timeline egy nagyszerű dolog, mert lehetővé teszi, hogy tönk barátaid vissza, amikor ők voltak a középiskolában. Timeline jó, mert lehetővé teszi, hogy szűrjük tartalom sokkal gyorsabb, ez lehetővé teszi, hogy a dolgok, hogy az lett volna egyébként hozott egy nagyon hosszú ideig, hogy megtalálja Csak görgetés fel és le, fel, fel, fel, fel, fel, mint megy vissza az időben. De aztán ott van még egyfajta hátránya, hogy mind a felhasználói élményt. Mi lenne az? Nagy szó, hogy kezdődik a P-R. >> [Hallgató] Adatvédelmi. >> Privacy, ugye? Privacy hatalmas felhasználói élményt kérdés. Ez az egyik dolog, amit utálok legjobban Facebook most. [Nevetés] [Malan] Mivel tudom most. David nem vette észre ezt a valóban megtörtént egészen tegnapig. Szóval most már tudja, hogy minden egyes alkalommal, amikor beszélgetni vele tudom, ő is figyelmen kívül hagyva engem. [Malan] A kínos alkatrész Igazából figyelmen kívül hagyva őt, és én nem tudom, hogy tudtam, hogy figyelmen kívül hagyja őt. [Nevetés] Privacy egy hatalmas kérdés. Tud valaki itt mondani, mi lehet rossz a Facebook adatvédelmi amellett, hogy mennek a dolgok, mint ez? Mi az, hogy különösen nehéz megtenni tekintetében Facebook magánélet? Ez az a fajta vezető kérdés. Igen. >> [Hallgató] elrejtése képek bizonyos embereket. Rendben. Pontosan, hogy elrejtse a képek bizonyos embereket. Nekik van ez a kicsi, kis gombot a jobb felső sarokban, amely lehetővé teszi váltás a magánélet egy fényképet. A magánélet védelmét szolgáló funkciók igen változatos a különböző típusú menüket. 

Már ütött sokkal jobb, erről a közelmúltban, de ez szokott lenni a helyzet hogy amikor meg akarták akadályozni a barátaidnak lássa fotókat, meg kellett volna, hogy menjen át egy rendkívül bonyolult 5-lépéses folyamat, hogy hasonló, hadd kattints erre a linkre, most hadd kattintson újra, hadd kattintson újra, hadd adja, amelyben az emberek nem látom a képeket. Ez nem különösebben jó a Facebook részéről mert annyira felhasználói élmény valóban biztosítja számukra a szabadságot hogy ellenőrizzék, amit az emberek láthatják. Ezt hívjuk felhasználói ellenőrzést és a szabadság. Ha nem engedi a felhasználókat tenni oly módon, hogy hatékony és intuitív, akkor a felhasználói élmény, nem igazán jó egyáltalán.  Szeretnél srácok szeretnék mondani semmit Facebook? Hogyan kapcsolható ez ki? [Ong] Nem kapcsolja ki ezt ki, és ez egy hatalmas hiba használhatóság részéről a Facebook. Ez a funkció - Igazából belenézett tegnap - ez vagy az, hogy nem tudod, vagy ez eltemetve valahol nagyon-nagyon mély A mélyedések a Facebook, mert nem tudok rájönni, hogyan lehet letiltani ezt a funkciót egyáltalán. [Malan] De néha ezek a döntések nem nyilvánvaló mert ti adtak nekünk egy csomó hasznos visszajelzést különböző CS50 kérelmek és weboldalak, amelyek a kurzus használ. Mi nem hajtotta végre az összes ezeket a kéréseket és javaslatokat. 

Része, hogy a kiegészítő szerzés annyi kéri, hogy ez egy az idő függvényében, de néha csak, hogy egy tudatos döntés, mint, "Köszönjük a javaslatot, de nem értünk egyet." Szóval hogyan lehet valójában dönteni, mit kell tennie, ha a felhasználó úgy gondolja, meg kell csinálni valamit, akkor is, ha nem feltétlenül? Ez egy finom egyensúlyt ténylegesen hallgatni, amit a felhasználók mondják és valóban, amelyek valamilyen vonal, ahol azt mondja, "Nem fogjuk azt tenni, amit a felhasználók mondanak." És különösen az, azt hiszem, volt egy idézet Henry Ford, hogy összefoglalja ezt fel elég jól. "Ha én azt kérte az embereket, mit akarnak, akkor azt mondta volna, hogy gyorsabb lovakat akartak." Tud valaki egyfajta kötekedik eltekintve, hogy ez mit jelent valójában az idézet? Ez nem csak, hogy a felhasználók tudják, mit akarnak, de ez több, hogy - [Hallgató] Ők nem tudják, mi lehetséges. Részben nem tudják, mi lehetséges. Kötekedik, hogy szét egy kicsit. Mit értesz ez alatt? [Hallhatatlan hallgatói válasz] Ez jó. Azt gondolom, hogy próbáljuk elmondani, hogy az emberek tudják, mit akarnak. Azt akarják, hogy gyorsabb lovakat. Amit igazán szeretnék az a képesség, gyorsabb, de nem igazán tudom, a közeg, amellyel eléréséhez. Ha jön, hogy a felhasználók és a felhasználók mondjak valamit és azt mondom, "Azt szeretnénk, ezeket a funkciókat, és ezeket a funkciókat, és ezeket a szolgáltatásokat," Ön nem akar feltétlenül gondolni, "Hadd menjek előre "És végrehajtása, amit kifejezetten mondják," de mit akarsz gondolni: "Milyen gondolatok jutok ebből?" Mit akar valójában? 

És ott, hogy mit tehetünk, tervezni valamit, hogy megfelel-e kéréseket de nem szükségszerűen az is, hogy a felhasználó elvárja, hogy legyen elégedett. Tehát valami hasonló végleges projekteket, nagyon is valós értelemben mi hasznos heurisztikus, amikor ahhoz, hogy valami jobb, különösen, ha a tervező rendelkezik ezzel arrogancia róla ahol te fajta tudja, mi a legjobb, akkor is eltarthat bemenet a felhasználók, de hogyan, hogy tényleg megy a szerzés, hogy visszajelzést? Az utolsó projekt, nagyon konkrétan mit produkál optimális eredményt itt? Mi gyárt optimális eredményt - és megy át ez a második - ez a folyamat kidolgozása és tesztelése, majd, majd iterációjával. Mit jelent a tesztelés általában amikor tervezni valamit úgy gondolja, hogy ez elég jó, mint, "Én vagyok olyan nagy designer. Mindenki fogja szeretni ezt." És akkor tedd oda, és az emberek nem igazán tetszik valamilyen okból. Mit kell tennie, hogy van, hogy a részeket a dolgok, hogy az emberek, mint a és feljavítani a dolgokat, hogy az emberek nem szeretik. Úgy hangzik, mint egy nagyon nyilvánvaló folyamat, de ez a folyamat állandóan iterációjával a tetején, amit már épített egy olyan folyamat, amely segít nem csak szűkítheti a saját design készségek, hanem segít finomítani a tervezés annak érdekében, hogy az emberek valóban értékelik a terméket még több, mint korábban. 

Odamegyek több konkrét példát, hogy mit lehet ténylegesen. Mint egyfajta utolsó példa egy termék, nézzük meg kajak. KAJAK amikor kijött nagyon, nagyon népszerű. Tud valaki kitalálni miért? Melyek a dolgok tetszik erről, ha használták vagy mi a dolgok nem tetszik? Igen. >> [Hallhatatlan tanulói válasz] >> Oké. Ez része az, hogy a felhasználó olyan lekérdezést, amely sokkal kiterjedtebb mint egy igen szigorú 1, mint a "Meg kell felvenni a kezdési időpont ", És meg kell, hogy vegye be a befejezés dátumát." Sőt, ez lehetővé teszi, hogy rugalmasan, és ez megadja az összes járat említett tartományban. Még valami? [Hallgató] Ezek közé tartozik a díjakat az ár. Ők magukban foglalják a díjakat az ár. Az adók és a dolgok valóban egyenesen bele ezt az árat a bal felső tehát nem becsapott gondoltam, hogy te tényleg fizet a $ 240 járat ha ez tényleg 330 $. Még valami? Igen. [Hallhatatlan hallgatói válasz] Nem vagyok biztos abban, hogy valóban segítségével csinálni. Lehet, hogy tévedek. Lehet, hogy egy érdekes dolog, ha azt szeretné, hogy nagyobb súlyt adott szűrők annak érdekében, hogy nyomja kapcsolatos eredményeket a szűrőt a csúcsra. De tudja valaki mondani, hogy mi olyan különleges ebben a bal oldalon? Hogyan hagyományosan felnézni egy járat egy internetes szolgáltatás, mielőtt ez? 

Igen. >> [Hallhatatlan tanulói válasz] >> tudja mondani, hogy - [Hallgató] Minden légitársaság. >> Igen. Minden légitársaság saját honlapján. Ez egységesíti a dolgokat. És? [Hallgató] Pontosan tudod, mennyi az idő, hogy elmész. Tudod, hogy pontosan mit alkalommal elmész, hanem kapcsolódó a szűrőket különösen. Hadd húzza fel KAJAK. Ó, Istenem, pop-up. Bad felhasználói élményt. Mi történik, ha mozog a csúszkát? [Hallgató] Automatikus frissítések. >> [Ong] Automatikus frissítések. Ez valami, ami nagyon fontos. Ezt megelőzően, amikor csak akart felnézni a repülés meg kellett tenni a bemeneti helyét, a kimenet helyét, nyomja meg a keresés, úgy feldolgozni, hogy az, és mutasd meg eredményeit. Ha meg akarod változtatni a lekérdezés, akkor meg kell nyomnia vissza kétszer lép egy új lekérdezést a semmiből, majd csinálni újra és újra. A szép dolog ilyet ez használ egy nagyon [érthetetlen] dolog a közepén. Ha csinálsz valamit, mint ez, akkor lő le egy kérés és ez visszaadja a találatokat azonnal. Ez a fajta közvetlen visszacsatolás van valami, amitől KAJAK vadul népszerű mert nagyon könnyű nekem, hogy csak megváltoztatni a query és az, hogy kitaláljuk a dolgokat, amelyek körül egy adott tartományban anélkül, hogy oda-vissza, oda-vissza, oda-vissza. Tehát ezek mindenféle dolgot akar gondolni, amikor tervezése webhelyére. Hogyan lehet, hogy nagyon hatékony az én felhasználóknak, hogy menjen át, amit ők dolgoznak és hogy azok végső cél a lehető leggyorsabban? [Malan] És József pontban korábban a felhasználók nem feltétlenül tudja, hogy mit akarnak, alapján, amit ti most tudni a HTML és van jelölőnégyzetek, rádiógombok, válasszuk a menük, beviteli mezők és hasonlók, hogyan kíván végrehajtani fogalma szedés indítási idő a repülés? 

Melyik e különböző UI mechanizmusokat kíván kezelhető? Ha csak tudja, az összeget a HTML tanították előtt és tudod, hogy a bemenetek rádió gombok, jelölőnégyzetek, legördülő menü, és a beviteli mezőbe, mi lenne a természetes választás volt a szedés dátumok? [Hallgató] bemenet. >> Bemenet. Vagy talán még egy legördülő minden a dátumok, nem igaz? Tehát bonyolultabb UI mechanizmusokat, mint ez a bal oldalon, hogy lehet végrehajtani, lehet, hogy ez a folyamat sokkal intuitívabb a csúszka mert az idő folyamatos, és az emberek általában nem gondolnak, hogy mind a diszkrét darabokban. Rendben van. Az utolsó dolog. Tíz használhatóság heurisztika. Minden, amit beszéltünk talán tartoznak e kategóriák valamelyikébe. Ha megy, hogy meg ezt a linket, ami a helyszínek felteszik online, akkor ténylegesen képes legyen, ahogy design a helyén, tartsa ezeket heurisztikus szem előtt és ezeket a szabályokat a hüvelykujj. Az a projekt, amit azt javaslom tenni annak érdekében, hogy tervezze meg a jobb app az, hogy nem papír prototípus először. Amikor gondolsz az alkalmazás, nagyon gyorsan felvázolni, mit szeretne, hogy néz ki, mint és győződjön meg róla, hogy a dobozok vannak elrendezve, oly módon, hogy nagyon intuitív, hogy a felhasználó használni és még azt mutatják, ezek a papír prototípus barátaid, és indítsa el a fókuszcsoportok. Csak kap 2 vagy 3 fő össze, és kérje meg őket, hogy csak érintse meg ezeket a papíron prototípusok, és megmutatja nekik, új képernyők, hogy ha valóban megértsék, mi folyik itt. 

Mit akarok, adni nekik egy feladatot, motiválni, hogy a feladat, és csak nekik az alkalmazást, és hagyja őket használni. Ne adj nekik utasításokat túl. Azt akarod, hogy tényleg hadd kölcsönhatásba az app olyan módon, hogy lehetővé teszi, hogy látni hogyan fogják használni, ha nem áll mellettük. És ez nagyon fontos. Hogy Önnek sok betekintést, hogy vannak emberek, szerzés körül különös dolgokat oly módon, hogy nem kívánják őket? Vajon a különös UI mechanizmusok a képernyőn oly módon, hogy a fajta Hacky? Nem akartam nekik csinálni így. És ha végeztél, hogy mit akarsz csinálni? A tervezés sziklák, ugye? Mit akarok, szeretne fejleszteni, és tegye ezt a folyamatot újra. Szóval mutasd meg a barátok, ha már kifejlesztette, tesztelni, fejlesztésére, tesztelésére, fejlesztésére, tesztelésére, navigálhat, tovább és tovább. Design egy nagyon iteratív folyamat ebben az értelemben. Te tényleg kell építeni valamit, majd észre dolgokat róla hogy nem vette észre, előtt és menj vissza és javítsa ettől. Most, mint a fejlesztési része, ez az, amit Tommy fog mutatni a szünet után és hogyan lehet, hogy végre valami hasonló autocomplete oly módon, hogy viszonylag egyszerű. [Malan] A Tommy hoz létre itt, a kérdés akkor. Sok a legkorábbi honlapok - és amikor József azt mondta, 1990-es évek stílusát honlapján, volt implementációk, ahol ha akarod, hogy kiválassza a kezdési és befejezési idő, őszintén szólva, vissza a nap, és még néhány weboldal ma, úgy, ahogy ezt te vagy válasszon egy óra egy legördülő, kiválasztotta percre egy legördülő, talán úgy dönt, AM, PM, és akkor csinálni még 3 alkalommal. És így, 6 kattintás és talán néhány görgetés Saját felhasználói ténylegesen biztosítani valamilyen dátum és / vagy idő tartomány ebben az értelemben. 

Szóval biztosan szuboptimális, mégis eddig láttunk semmilyen expresszív képességek bármely nyelven általunk nézett, hogy tegyen valamit szexisebb ilyen csúszkát a kezdési és befejezési idő. De ha úgy gondolja, vissza a 0. héten, amikor beszéltünk Scratch, is ott nem voltak hirdetések, hogy csak volt bizonyos dolgokat. Tényleg most volt ilyen fundamentumok, mint a hurkok és feltételek és hasonlók. Tehát a fajta csak nagyon elvont gondolkodás most, függetlenül a szóban HTML, hogy mi is történik valójában valami ilyesmit kezdési és befejezési idő csúszkát? Amikor mozog az egér, és rákattintok a kis sárgarépa jel a bal és indítsa húzva, algoritmikusan, mit akarsz, hogy képes legyen végrehajtani hogy történt? Milyen kérdéseket, mi a logikai kifejezések akarsz tudni kérdezni? Mi folyik itt? Sammy? [Hallgató] Hol van a helyzetét a kurzor? >> Jó. Amennyiben a helyzet a kurzor? Ez olyasmi, amit szükséges kifejezni vissza Scratch, attól, hogy az adott hely vagy akár szín vagy a hasonló. Lehet, hogy emlékszem, hogy valaha így röviden, hétfőn volt az összes ezeket a dolgokat az úgynevezett események a világ az interneten, és így ott dolgok, mint onclick és onkeypress és onkeyup és onMouseOver és onMouseOut. Így észre, hogy még ezek a dolgok már vesz biztosra a weben az oldalak, mint a Facebook vagy a Gmail, akkor is, ha fogalmad sincs hogy akkor talán végre, mert nincs semmi, még hasonlót előadás vagy probléma Set 7, rájönnek, hogy ezekkel pontosan ugyanolyan alapjait, HTTP és paraméterek GET és POST, Az alap HTML bemenetek általunk nézett eddig és egy pillanatra a programszerű mechanizmusok Tommy bemutatni tud kezdeni, hogy kifejezze magát, mint te a 0. héten a nagyon ösztönösen húzással. 

Tehát azt mondta, Tommy MacWilliam és néhány új puzzle darabkái számunkra Web. Rendben van. A nevem Tommy és én fognak beszélni a JavaScript programot. Csak egy nyilatkozat: Én azon a véleményen vagyok, hogy a JavaScript a legjobb programozási nyelv az egész egész világon. Vannak sokan, akik nem értenek egyet velem, de ez egyszerűen lenyűgöző. Ha visszamegy a C, ha írni C másik osztály vagy más nyelven, ez csak nagyon frusztráló az összes alacsony szintű részleteket van, hogy megreked be Szóval, ha valaha is szomorú, hogyan bosszantó C írni, csak menj vissza, írj néhány JavaScript programot. Ez nirvána. Majd sokkal jobban érzi magát az Ön rossz nap. Sok a varázslatos JavaScript származik, hogy képes manipulálni a dolgokat , amelyek már az oldalon. Amikor írtam a PHP szkriptek, ők hajtották végre a szerveren, és végül, hogy a PHP szkript kimenete valószínűleg néhány HTML. Ezt a HTML küldtek a kliens, és ennyi volt. Ha a PHP volna hozzá egy gombot egy oldalon, például, hogy nem igazán csinálni. Meg kellett volna tenni egy teljesen új HTML fájlt, és elküldi azt a böngészőt. A JavaScript tudjuk, hogy lehet frissíteni a dolgokat, miközben ők már az oldalon, és emiatt tudunk sokkal többet azonnali visszajelzést, amely valóban javítja a felhasználói élményt honlapunkon. Csak egy gyors bedugni JavaScript választók. Tudjuk, hogy amikor letölt egy HTML oldal, ez lesz képviselve a DOM. 

A DOM emlékszik csak ez a nagy fa, ahol az elemek kapcsolódnak ebben a nagy hierarchiában. Amikor dolgoztunk adatbázisok Pset 7, az egyik első dolog, amit tudnunk kell, hogyan kell csinálni volt lekérdezni az adatbázist. Van ez a nagy felhasználók asztalra, és néha csak azt szeretném mondani, "Én csak azt akarom, néhány ilyen felhasználók számára, hogy megfeleljen bizonyos feltételt." Hasonlóképpen, amikor megvan a DOM szükségünk van valamilyen módon a lekérdező azt. Szükségünk van valamilyen módon a mondás: "Azt akarom, hogy a gombokat, hogy néz ki, mint ez "Vagy az összes kép az oldalon." És ezek a választók lehetővé teszi számunkra, hogy ezt tegyük. Tehát csak egy gyors bedugni. Ez az első, aki itt, a # előadják, mi ez fog válasszam? Tudja valaki, emlékszel? [Hallhatatlan diák válasza] >> Igen, pontosan. Ez megy válasszon egy elemet az oldalon, hogy van egy azonosítója kattintson. És így, hogy a hash tag azt mondja, ez a választó fog dolgozni azonosítók. Mi a helyzet a második, ez. Központú, mi lesz, hogy válasszon? Igen. >> [Hallgató] Class. >> Pontosan. Ez most megy, hogy kiválassza az osztályban. A különbség id és a class Itt általában az azonosító egyedinek kell lennie belül bármilyen térben, amit keres vége. Tehát, ha kerestek egy egész weboldal, tényleg csak van 1 elem, hogy egyes ID, így ebben az esetben a be. Osztályok, másrészt, mi lehet több mint 1 elem ugyanazon az oldalon az ugyanabba az osztályba. Ez hasznos lehet mondani akarok, hogy kiválassza mindent, ami az oldal közepére ahelyett, hogy csak 1 dolog. 

És végül, ez utóbbi itt egy kicsit bonyolultabb, de mit fog ez válassza ki a DOM? [Hallhatatlan diák válasza] >> Mi ez? [Hallgató] Bármi, ami egy tag. >> Jelenleg 2 rész van. A második rész fog mondani akar választani ezeket a címkéket a tag a bemeneti, így minden elem, amely egy input tag. De én nem akarom, hogy csak válassza ki az összes bemenet mert olyasmi, mint egy submit gomb lehetne bemenet és olyasmi, mint egy beviteli mező lehet egy bemenet. Tehát ezek a szögletes zárójelek Azt mondom, csak azt akarom, hogy kiválassza azokat az elemeket, melyek típusú szöveget. Valahol a HTML tag Nekem van egy attribútum nevű típus, és az értékét a attribútum kell lennie szöveg. Szóval, mi a helyzet az első rész itt? Az első szó, ennek a választó a forma, akkor van egy hely, és akkor ez a beviteli rész. Mit csinál, amivel formáját előtte? Ez lesz alapvetően korlátozzuk lekérdezést. Ez lehet a helyzet, hogy van néhány bemenetek az oldalon , amelyek nem leszármazottai formában. Mi ez fog tenni ez azt fogja mondani, csak azt akarom, a bemeneti címkéket, amelyek valahol felettük Néhány szülő eleme formában. És így tudjuk, hogy ezek a további hierarchikus lekérdezések így nem csak azt, hogy kiválassza mindent megfelelőek az adott választó. Mi lehet a fajta korlátozás hatálya alá, amely lekérdezés valami mást. Most, hogy tudjuk, hogyan válassza ki elemeket az oldalon, beszéljünk egy kicsit AJAX. AJAX egy még mindig nagyon divatos mozaikszó, hogy áll az aszinkron JavaScript és XML. Ez csak azért történik, hogy az XML csak valamilyen módon, hogy képviselje az adatokat. 

Ez a fajta elveszett népszerűség nemrégiben, tehát az X AJAX nem használják mindig. Alapvetően, mi AJAX lehetővé teszi számunkra, hogy tennie, hogy HTTP kérések az összefüggésben a JavaScript programot. Ha mi vagyunk a webböngészőt, és mi a navigációt az oldalak körül, és kattintson a linkre, mi a böngésző lesz tennie, hogy egy HTTP kérés, hogy bármilyen kapcsolat is kattintson. De ez nem mindig ideális, mert ha ez a helyzet, akkor David azt mondta, mindig van, hogy a felhasználók rákattintanak a Küldés gombot, vagy kattintson a linkre annak érdekében, hogy bármi megtörténhet, hogy fog vonni egy HTTP kérés. Tehát AJAX tudjuk, hogy ezeket a kérelmeket nevében a JavaScript programot. Ez azt jelenti, ha a felhasználó kölcsönhatásba lép az oldalon, vagy bármi történik, tudjuk valójában, hogy egy programadó kérelmet más PHP fájl honlapunkon vagy bármi mást, és letölteni az adatokat, hogy a fájl kiköpi. Vessünk egy pillantást egy példa AJAX. Ez a mi CS50 pénzügyi oldal, amely remélhetőleg néhányan közülünk nem ismerik. Ha megnézzük a HTML-oldal, azt látjuk, hogy itt adtam néhány dolgot, amelyek közül az egyik adtam ezt az űrlapot azonosító. Mondtam id = "forma-idézet." Tettem ezt azért, mert ez lesz, hogy ez egy kicsit könnyebb, válassza ki a DOM mert én is csak egy nagyon egyszerű lekérdezést. Mit akarok itt szeretnék kijavítani néhány problémát CS50 pénzügyminiszter. Tehát, ha megyünk finance.cs50.net, minden alkalommal, amikor szeretnénk, hogy egy idézet, azt kell kattintson erre a Get Idézet gomb, és hogy Árat lekérdez gombra, majd elvisz egy teljes oldalt. És ha azt akarom, egy idézet, azt kell, hogy elérje a Vissza gombot, és aztán azt írja, Kapok egy árajánlatot, és nyomja meg a Vissza gombot. Ez tényleg nem a legjobb felhasználói élményt. Ki igazán használom a helyszínen, ha ez lassan indul Stock árak? Szóval, mit akarunk kezdeni az AJAX távolítsa el, hogy a lépés lesz egy külön oldalon annak érdekében, hogy az eredményeket. 

Amit igazán csak kér, hogy valóban alacsony ár, és ez csak egy nagyon kis mennyiségű adat. Tehát nincs szükség, hogy menjek egy teljes HTML oldal, letölt egy teljesen új tétel HTML, talán le néhány képet, néhány egyéb CSS fájlokat csak nekem válaszolni, hogy igen egyszerű kérdést mennyi jelent ez állomány költségét. Az AJAX tudjuk, hogy ez egy sokkal könnyebb. Látjuk itt lent, hogy én vagyok összekapcsolása egy JavaScript nevű fájlt quote.js. Nézzük ténylegesen megnyitja a fájlt. Nem ott. Minden az én JavaScript fájlok lesznek található HTML úgy, hogy a böngésző elérheti. Aztán van egy külön könyvtárba itt JavaScript, és most itt quote.js. A tetején a fájl a azt mondja, hogy itt akarom várni a teljes oldal betöltése mielőtt megpróbálok semmit. Miért szükséges ez? Kiderül, hogy a következő dolog, fogok csinálni itt kezdeni egy elem amely megfelel bizonyos választó. Ha ez a JavaScript valaha is aláírni ezt az elemet betöltve az oldalon, akkor mindent megpróbálok csinálni nem fog működni mert én megpróbálom válassza ki valamit, ami nincs még. Szóval ez a felállás top mondja, azt akarom, hogy várjon, amíg minden be van töltve úgyhogy biztos, hogy minden olyan elemet, keresem valójában az oldalon. Ez a dollár jel itt azt jelenti, én vagyok a jQuery könyvtár neve. Ez a jQuery könyvtár lehetővé teszi számunkra, hogy ezeket a választókat, hogy csak nézett. Azáltal, mondván: $ aztán halad érvként az # form-idézet, Én most kiválasztása a formában, hogy csak volt egy pillantást. Most van egy képviselete a formában a memóriában valahogy. 

Ezen cél most e képviselet a forma, Én most egy függvényt felszólította. Mi ez a funkció nem ez fog csatolni eseménykezelő. Az esemény, hogy fogunk hallgatni a submit esemény. Tehát, ha a felhasználó rákattint, hogy a Küldés gombra, vagy megnyomja az Enter billentyűt, ez az esemény lesz a tüzet. Azáltal összejönni ebbe én most felülbírálja az alapértelmezett viselkedését az űrlapot. E nélkül a JavaScript, a nyomtatvány be bármilyen PHP fájl azt használják, hogy cselekvésre attribútum. De ahelyett, én most azt mondják, várj, várj, várj, én nem akarom, hogy tényleg csinálni. Azt akarom, hogy ez megtörténjen, mielőtt elmész, és próbálja nyújtson be néhány PHP fájlt. Most mit akarok csinálni? Ezen a ponton szeretném használni AJAX valahogy betölteni, amit az ár a készlet. Az első dolog, amit tudnod kell, amit készleten a felhasználó keresi fel. Ehhez fogom használni egy másik választó. Ez a harmadik választó néztük előtt. Ez azt mondja, hogy azt akarom, hogy elindul az űrlap elem egy ID-form-idézet. Aztán valahol az említett nyomtatvány lennie kell egy bemeneti elem hogy van egy név szimbólum. Ha visszatekintünk a mi HTML, láttuk, hogy volt egy input [name = symbol]. Ez azt jelenti, hogy ez lesz, hogy kiválassza, hogy a szövegdoboz, hogy a felhasználó a gépelés. Ez szép. Megvan a szövegmezőbe. Most már csak meg kell tudni, hogy mi van benne. Ehhez nevezhetjük ezt a módszert itt ezt. Val, és ezt mondja, tudom, hogy mit szövegdoboz van. Azt akarom, hogy mondd el, mi ez a felhasználó beírt abba a mezőbe. Most van egy string nevű szimbólum, amely egyenlő amit a felhasználó beírt be Ez szép. Tudjuk használni, hogy a húr most, hogy kérésünkre. Ez egy új funkció van, ez a $, kivéve, mi már nem fognak kiválasztása elemet, fogunk hívni egy másik funkció, ami nyújtott nekünk jQuery. Ez a funkció AJAX mi valójában megy, hogy ezt a HTTP kérés. Tehát el kell mondani, hogy egy pár dolgot. Az első dolog, amit el kell mondani, ez a funkció, ha akarom a kérelem menni. Valahol a projektem van ez a fájl belsejében a HTML könyvtár nevű quote.php. Tudom elérni ezt a fájlt, láttuk, mint ez, ha elmegyek a localhost / quote.php. 

Azt akarom, hogy JavaScript, hogy egy kérést az adott oldalra. Milyen típusú kérés most? Láttuk előtt, hogy a formának, hogy a method = "post" attribútumot, és ez azt jelenti, hogy megy, hogy a POST kérést, így nem fog tenni semmit az URL-címet, hanem a GET kérést, ami csak leadni, ha csak elérni az oldalt a böngésző, például. Most már azt mondta, szeretnék, hogy egy HTTP POST kérés egy oldalt található quote.php. Amikor az alábbi adatlapot, emlékszel tudtuk elérni a bemeneti elemek belsejében a formában az, hogy a $ _POST változó. Eddig a történet még nem ténylegesen elküldött mentén még adatok. Már csak annyit mondott tesszük egy AJAX kérés és itt van a kérés fajtája tesszük. Most arra van szükség, hogy ténylegesen küldeni néhány adatot az oldalra. Ehhez, hogy tudjuk használni ezt a tulajdonságot nevezett adatokat. A tulajdonság értéke valójában egy asszociatív tömb. Ennek az az oka az, hogy lehetővé teszi számunkra, hogy küldjön több, mint 1 darab adat. Ezért ezeket kapcsos zárójelek van beágyazva ezen egyéb kapcsos zárójelek. A kulcsokat e asszociatív tömbök lesz ugyanaz mint neve tulajdonítja a mi formában elemek. Ez azt jelenti, hogy ha küldök mentén kulcs szimbólum, azt jelenti, hogy a PHP oldalon érheti el az adatokat a $ _POST [szimbólum] mint tettük előtt, amikor mi voltunk benyújtása formában. És most a tényleges adatokat akarunk küldeni lesz értéke belsejében asszociatív tömb. 

Mi tárolt ez a szöveg egy változó nevű szimbólum, és így küldjük mentén mára kulcsfontosságú szimbólum és értéke függetlenül a felhasználó beírt be Most már tette ezt a HTTP kérés, a PHP fájl kivégezték, és ez fog küldeni néhány adatot most vissza az ügyfélnek, hogy csak tette ezt a kérést. Most meg kell válaszolni, amit a szerver mondott nekünk. Ehhez, hogy van ez utóbbi tulajdonság itt hívott siker. Az érték a siker kulcs valóban lesz egy függvény, és ez az egyik nagyon jó dolog, amit tehetünk a JavaScript programot. Nem csak, hogy ints, vagy tömbök értékként belsejében egy asszociatív tömb, mi is van egy funkciója. Tehát azzal, hogy siker, ez a kulcs. A kettőspont mondja itt jön az érték, és most az értéke ez valójában egy függvény. Tehát nem kell, hogy ezt a funkciót a nevet önmagában. Mi csak azt mondom ez lesz néhány funkciót. Ez fog tartani 1 érvet. Az az érv, hogy ez a funkció lesz függetlenül a szerver küldött minket vissza a kérelmet. Mint amikor a böngésző kér, a szerver küld valamit és a böngésző megjeleníti, összefüggésben AJAX már csak kérelmet, a szerver küldött valamit, és most már, hogy a képviselők, mint egy húr. Ezzel húr szeretném megjeleníteni, hogy az oldalon. Ehhez fogok még egy utolsó választó. Azt akarom, hogy jelölje ki az elemet az ID ár. Ez csak egy üres div, hogy már létrehozott az oldalon, és szeretném beállítani a tartalmát, div, hogy amit a szerver küldött minket vissza. Én tulajdonképpen módosított quote.php egy kicsit. 

Ahelyett, hogy hívó render, és teszi néhány oldal, quote.php most egyszerűen megy, hogy nyomtassa ki az értékét az állomány, mint egy húr. Tehát, ha úgy döntesz, hogy valóban látogassa meg az oldalt, akkor csak látni, hogy a kis húr bármilyen a részvény ára is. Még egy utolsó dolog, amit tennie kell, itt csak arról a függvény false. Mi ez azt mondja, hogy ha én vagyok belsejében egy eseménykezelő és eseménykezelő false visszatérés helyett igaz, azt jelenti, hogy nem akarom az eredeti eseményt a tüzet. Ebben az esetben, ha nem rendelkezik a JavaScript és adtunk be egy űrlapot, web böngésző fogja mondani: "Én fogom küldeni az adatokat együtt," és ők fognak küldeni egy másik oldalra. Mert mi AJAX most nincs szükség, hogy küldjön a felhasználót egy másik oldalra. Mi csak megy, hogy megjelenítse a találatok dinamikus ezen az ugyanazon az oldalon. Tényleg nem akarom, hogy megy sehova, és szeretnék maradni ugyanazon az oldalon. Tehát visszatérve a hamis, mi biztosítja, hogy a forma nem teszi azt számunkra. Vessünk egy pillantást, hogy ez mit néznek ki. A quote oldal ugyanúgy néz ki. Hadd húzza fel az ellenőr le ide, hogy lássuk, mi történik. Legyen egy kicsit kevésbé nagy. Ne feledje, ha megnyitja a Hálózat fülre, ez az, ahol láthatjuk az összes HTTP kérések történnek az oldalon. 

Egy szimbólum hadd írja AAPL és kattintson Árat lekérdez. Most láttuk, hogy egy részét az Apple költségek bizonyos számú dollárt csak megjelent az oldalon, de az URL nem változott. Tény, hogy itt van a HTTP kérés, amit most tett. Készítettünk egy POST kérés quote.php. Ennek van értelme. Ez az, amit a szerver küldött minket vissza. Ez már nem a hatalmas HTML dokumentum képeket és ilyesmi, ez csak egy sor szöveget, majd mi csak megjelenik a sort. Ha visszamegyünk a fejlécek és látjuk meg azt amink valójában elküldött belsejében HTTP kérés, láthatjuk itt lent, hogy küldött mentén kulcs szimbólum és értéke AAPL, ami az, amit a felhasználó beírt be Ez szép és jó, de ez még mindig egy kicsit bosszantó. Még mindig van, hogy kattintson erre a gombra, hogy az állomány idézet. Vagyunk elfoglalt emberek, és nincs ideje, hogy kattintson a gombok. A Google felismerte ezt egy kicsit ezelőtt, amikor végre a Google Instant. Mit Google Instant csinál, mint te, hogy csak elkezd gépelés eredmények megjelenítéséhez Önnek így nem kell aggódnia, sőt kattintva Search. Igazából, egy jó történet kapcsolódik ehhez. Ha a Google Instant kijött, az emberek olyanok voltak, mint: "Hé, ez szuper lenyűgöző." "Ez annyira jó." És egy diák le Stanford, aki 19 éves volt abban az időben tette ezen az oldalon az úgynevezett YouTube Instant. Minden YouTube Instant nem hatékonyan keresni YouTube azonnal. Tehát ahelyett, hogy menjen a YouTube.com és megüt Search, ha elkezdek gépelni a YouTube Instant valami ilyesmit CS50, láttuk, hogy itt ez próbál egy lassú internetkapcsolat népességnövekedés ezeket az eredményeket él. Ehhez mi is valójában, hogy egy nagyon egyszerű módosítását a quote.js fájlt. Most vagyunk fűződő ez az esemény, ha az űrlap elküldése. Nem igazán akar, hogy a felhasználó azt állítják, hogy formában többé, úgyhogy inkább tüzet ez az esemény minden alkalommal, amikor a felhasználó megnyomja a gombot. Ehhez Nézzük először módosítsa az esemény be keyup. Ez azt jelenti, hogy ahelyett, hogy várja az űrlap benyújtására, minden alkalommal, amikor a gombot megnyomja, valami történni fog. Már nem értelme, hogy csatolja ezt keyup esemény az egész űrlapot. Igazán csak az érdekel, hogy a keresési mezőbe. 

Annak kiválasztásához, hogy most, meg tudjuk változtatni, hogy ez helyett form-idézet, form-idézet, és mi van egy input (type = text), vagy mondhatnánk (név = jel) - amit akarunk. Most van egy utolsó dolog, amit meg kell tennünk. Emlékszel le itt, amikor azt mondtuk, return false azt mondta, hogy nem akarja, hogy az alapértelmezett eseményt a tüzet. De ez csak azért történik, hogy ha letiltja, hogy most, bármit is írja nem fog megjelenni a böngészőben már mert ez az alapértelmezett viselkedését gépelés egy szövegmezőbe. Már nem szeretné felülírni, hogy úgyhogy elpusztítani ezt a return false. Ha azt kivéve, hogy és újratölti az oldalt, most, amikor elkezdek gépelni AAPL látni fogod, hogy a részvényárfolyam alján itt kitöltésével automatikusan. Tehát itt van CS50 Finance Instant. Valójában egy jó történetet, ami a YouTube Instant az, hogy a diákok csak egyfajta írt, mint egy 1-éjszakára projekt, és a következő napon, amikor állásajánlatot a YouTube vezérigazgatója. Szóval, olyan egyszerű, mint, te CS50 diákok, a végső projektek neked munkát YouTube. Valami ilyesmi ez egy nagyon klassz ötlet egy projekt végső, igaz? Volt néhány meglévő funkciókat akarunk integrálni. Mi javítja a felhasználói élményt egy kicsit, és hirtelen keres valamit a YouTube Instant lehet, hogy sokkal könnyebb mint keresni azt rendszeresen YouTube-on. Szóval ez AJAX dióhéjban. 

A példákban hogy Joseph mutatott, láttunk egy csomó automatikus kiegészítéshez, és az automatikus kiegészítéshez nagyon, nagyon praktikus, mert nem kell emlékezni - Például, ha nem emlékszik a részvényárfolyam az Apple és mi csak tudjuk, hogy ez aa valamit, ahelyett, hogy csak azt mondja nekem, "Egy részét ez a dolog kerül a sok pénz" Azt a fajta szeretném tudni, hogy mi állományok kezdődik aa. Meg tudjuk csinálni, hogy tényleg szépen a Bootstrap könyvtár, ami már szerepelt belül CS50 pénzügyminiszter. Ha jön ide, hogy a JavaScript tag, és görgessen Typeahead, ez csak egy szép plugin, hogy valaki már írt nekünk, , és könnyen használható a funkcionalitás, mint ez. I beírt egy A, és itt van egy lista egyes államok kezdődő A. Tegyük fel, hogy azt hiszem, ez nagyon jó, és itt az ideje, hogy ezt a az oldalamon. Kiderül, hogy ez nagyon, nagyon egyszerű. Nézzük átugrani ide quote3.js. A fájl így néz egy kicsit más. Itt lent minden az én AJAX cucc ugyanaz. Akarom tölteni az állomány adatokat anélkül, hogy menjen a másik oldalra. De most szeretném használni ezt a plugin. A Bootstrap dokumentáció nagy példa arra, hogyan pontosan meg tudom csinálni ezt. Azt akarom mondani, hogy "Itt a bemeneti hogy szeretnék autocomplete on" és én fogom hívni ezt a funkciót nevezik typeahead, és ez fog kezelni minden Typeahead dolgot nekünk. Ez inicializálja a listát, akkor mindent megtesz a mi szűrés. Az egyetlen dolog, amit meg kell tudni, milyen adatokat vagyunk automatikusan kiegészülő tovább. Szóval kiderült, ez a kulcs csak elolvassa a dokumentációt, és nézi a példákat. Ha én, hogy ez egy alapvető forrás az érték e kulcsfontosságú csak néhány tömb dolgot szeretnék autocomplete be. Ez a változó jött ez a másik fájlt. Én nyit symbols.js. 

Ez symbols.js csak ez tényleg, igazán nagy tömböt húrok Mindezen tőzsdei szimbólumokat a NASDAQ. Ha azt szeretnénk, hogy ugrik vissza a HTML, ezért jharvard, vhostokat, globalhost, html, sablonok, quote_form. Mivel ez most hívott quote3.js, hadd módosítsa a JavaScript fájlt vagyok köztük van. Most már quote3.js, így fogom tölteni, hogy külön JavaScript fájl, Az egyik, hogy azt Bootstrap autocomplete. Most, mikor ugrik vissza a böngésző, töltse be újra az oldalt, majd elkezdek gépelni aa, ott van az én automatikus kiegészítés. És ez tényleg ennyire egyszerű. Volt 1 sor kódot, hogy csak azt mondta: "Itt van a dolog, szeretnék autocomplete on" és hirtelen én ezt nagyon, nagyon szép funkcionalitást nem egy csomó erőfeszítést egyáltalán. Ahogy te weboldalak fejlesztése és különösen az elülső oldala a dolgoknak, fogod találni ez a helyzet sokat. Sok, sok, sok nagyon klassz szabad könyvtárak ott hogy teszi szuper könnyű csinálni a dolgokat, mint ez. Tud valaki mondani olyan hátránya csupán automatikusan kiegészülő e nagy lista a szimbólumok? Mi lehet valami, hogy nem ez a legjobb ezt a megközelítést? Igen. >> [Hallgató] Idő, ha van egy csomó [hallható] Igen. Most mi le ezt a hatalmas JavaScript fájlt, és van egy csomó a szimbólumok. És ha van egy csomó dolog, ez a fajta növeli a látencia nem csak keres hanem le az aktuális fájlt. Remek. Még valami? Most nincs igazi értelemben vett jelentősége. Ha egy A típusú, a vállalatok, amelyek azt mutatják ide Lehet, hogy nem a legnépszerűbb cégek kezdeni A. 

Mielőtt kapok az Apple, ez eltart még néhány karaktert, hogy megtalálja, amit keresek. Ez autocomplete nem ebben az értelemben a jelentősége. Ez csak megy, azt mondja: "Bármi, ami megfelel fogok megjeleníteni." Ahelyett, hogy szeretnék valahogy integrálni némi relevanciával az én keresést. Ha elmegyek ide a Yahoo! Finance, finance.yahoo.com, Ha megpróbálom, adjon meg egy jel Yahoo! Finance oldalán és elkezdek gépelni goog, van ez a szép listát azokról a dolgokról. Egyértelmű, hogy úgy néz ki, mint a Yahoo! Finance csinál valami okos itt. Van néhány relevanciáját és ők is további információkat mint a neve az állomány. Ez olyasmi, amit nem lehet igazán az csak az én Stock szimbólumok listáját. Azt akarom, hogy ez így fogom, hogy vegye. Ehhez Csináljuk néhány dolgot. Nézzük először megnyitja az ellenőr ezen az oldalon mert láttuk, hogy ez az oldal nem átrakodás egyáltalán, így ez valószínűleg a AJAX valahogy be kell betölteni az adatokat. Tudjuk kideríteni milyen adatokat ez betöltődött. Ha kattintson erre a Network fülre, ezek lesznek az összes kéri, hogy indítsa be kell rúgni. Most, ha azt írja be a ragacs, azt látjuk, hogy most kaptam egy új HTTP-kérelmet. Ez valószínűleg, ha az adatok jön. Persze elég, ha megnézi az URL, ami egy kicsit furcsa nevű, láthatjuk, hogy ez pontosan hol Yahoo küld ki az adatokat. 

Létrehoztam egy külön fájlba nevű suggest.php ami nagyon hasonló szellemben, hogy a keresési funkciót. Ez alapvetően megy, hogy a lekérdezés Yahoo URL-jét, gyere vissza néhány adat, és küldje vissza nekem. Most ahelyett, hogy ezzel a nagy, hatalmas a szimbólumok listáját, Tudom használni a Yahoo szép vonatkozású dolgokat, és nem kell letölteni, hogy a tömeges JavaScript fájlt. Én csak megy húzza le a ténylegesen érintett tőzsdei szimbólumokat. Nézzük ugorj bele. Szóval html, js. Vagyunk most quote4. Most már nem használja azt a nagy listája JavaScript fájlokat. De van egy kis egyfajta tervezési probléma itt. Már mondta, hogy az A. AJAX aszinkron. Ez azt jelenti, hogy amikor én, hogy egy AJAX kérés, így itt a sorban 8, ez az, ahol én AJAX kérés valóban kirúgták. Tegyük fel, hogy most már van egy kódot le, hogy itt fog tenni néhány dolgot mint figyelmezteti a felhasználót, vagy valami változás az oldalon. Mi nem fog megtörténni a böngésző nem fog várni a kéréshez, hogy továbbra is mielőtt jön le, és üti ezt a sort. Ez az aszinkron része. Ez megy, hogy ezt a kérést, és azt mondja: "Amikor befejezte, "Gyere vissza, és hívja ezt a funkciót, hogy én mondtam, hogy hívja belül a siker." Ez azt jelenti, hogy nem lehet csak letölteni az összes állomány előre. Meg kell tenni a kérelmet, és várja, hogy valami jöjjön vissza. Ez azt jelenti, hogy mielőtt, akkor egyszerűen megmondani Bootstrap, "Itt van a lista azokról a dolgokról azt akarom, hogy autocomplete on." Azt már nem tudja csinálni, mert már nem tudjuk mit akarunk valójában autocomplete be. Szerencsére Bootstrap gondoltam, mert ezek okos srácok ott, és tényleg adtak egy másik módja betölteni ezt Typeahead plugin. Előtt, az értéke forrás ingatlan csak a nagy tömb dolgokat autocomplete be. 

Most a forrás objektum valójában egy függvény, és a célja ennek a funkciónak, hogy kitaláljuk, mi a dolog, hogy autocomplete on vannak. Ez úgy megy, hogy kitaláljuk, hogy ki ez fog kérni Yahoo! Finance mi a legjobb dolog, hogy autocomplete vannak. Ehhez fogok, hogy egy nagyon hasonló AJAX kérés. Fogom kérni ezt az oldalt a suggest.php. Szeretném küldeni mentén a szimbólumok is. És most a siker, a Bootstrap dokumentáció mondta hogy annak érdekében, hogy a népességnövekedés listát azokról a dolgokról, csak annyit kell tennie, hogy adja át az e tömb most a visszahívási funkciót. De várjunk csak egy percet. Ha ez állítólag egy tömb, és AJAX küld vissza szöveget, hogyan lehetséges ez? Ez egy új módja adatcsere nevezett JSON. Ebben az esetben mi nem csak küld vissza egy egyszerű szöveges karakterláncot. Most már foglalkozik ezzel a bonyolultabb listát tőzsdei szimbólumokat. Ezek a tőzsdei szimbólumokat is, olyanok, mint a cég neve vagy az aktuális árakat. Csak egy nagy, hosszú karakterlánc, ami nem formázott semmilyen kiszámítható módon Nem lesz a legjobb módja annak, hogy ezen adatok Yahoo szerver nekem oly módon, hogy azt könnyen megértse. JSON olyan technológia, amely kihasználja, hogy hogyan hozunk létre asszociatív tömbök a JavaScript. Ez úgy néz ki, mint egy JavaScript asszociatív tömb, és valóban, ez azért van, mert van. JSON rövidítése JavaScript Object Notation. Ez alapvetően egy egyeztetett formátumban adatátvitel oda-vissza. Itt a JSON objektumot vagy e JSON asszociatív tömb küld nekem néhány adatot egy tanfolyamot. 

A kulcsok Ennek a tömbnek ilyesmi persze, hogy van értéke CS50, és itt lent látjuk, hogy tudok olyan érték, amely egy tömb. Nem tudom, hogy a dolgokat, mint a parse ki húrok és keresse vessző és nem őrült ilyesmi. Mivel a bejelentett e JSON formátumban, JavaScript és jQuery már funkciókat konvertálni egy string úgy néz ki, mint ez JSON egy tényleges JavaScript asszociatív tömbben hogy tudunk együtt dolgozni. Doing, hogy olyan egyszerű, mint azt mondta, hogy már nem ez a fájl, suggest.php, küld vissza csupán egy sor szöveget, de tudom, hogy fog küldeni vissza JSON. Ez azt jelenti, hogy ez a JSON alakítható egy JavaScript asszociatív tömb. És így jQuery, szeretném ha megtennél nekem. Ez azt jelenti, hogy ez a válasz a paraméter van, ez már nem csak egy string. Mert mondtam jQuery, hogy itt jön néhány JSON, jQuery lesz okos ahhoz, hogy azt mondják: "Te akartad JSON?" "Én fogom alakítani, hogy egy asszociatív tömb neked." Nézzünk ténylegesen vessünk egy pillantást a Hálózat fülre, ha van quote4.js. Fogjuk változtatni és újratölti az oldalt. Most megyek, hogy írja be egy-egy újra. Csináltam egy pár kérelmet suggest.php, de most ezt a választ, ahelyett, hogy csak a szöveg, ez JSON. Szóval van egy nyitott kapcsos zárójel mondván: "Itt jön egy asszociatív tömb." 

Az első és egyetlen kulcsfontosságú e asszociatív tömb hívják szimbólumok, és akkor itt van egy tömb összes releváns jelek jön most a Yahoo! Finance, nem pedig, hogy a gigantikus listáról. Így tudok csak feltölteni ezt autocomplete bővítmény bizonyos adatokat nem jön egy helyi fájlt, amely már előre hanem valami mást. Kiderül, hogy mi is valójában kihasználni a technológia az úgynevezett JSONP, vagy JSON béléssel, hogy megszünteti ezt suggest.php közvetítő. De ahelyett, hogy menjünk inkább nézd meg, hogyan lehet javítani ezen még. Nagyon szeretem a Bootstrap Typeahead. Ez tényleg szép. De mi megvagyunk jó JavaScript és azt akarjuk, hogy a fajta erre magunkat, talán nézd meg, mi ez a plugin lehet csinál. Nézzünk már nem használja azt Typeahead dolog, és próbáljuk meg, hogy ezt a listát a javasolt állományok magunkat. Itt quote6.php fogunk indulni, ugyanúgy. Minden alkalommal, amikor valaki beírja valamit, azt akarjuk, hogy egy AJAX kérés. Ez hasonló az eredeti CS50 Finance Instant. Ahelyett, hogy egy kérelmet quote.php, vagyunk most, hogy egy kérelmet nyújtott be ugyanabba a fájlba, mint korábban, ez suggest.php, amely csak megy, hogy húzza az adatokat Yahoo! Finance. 

Ismét, még mindig vár JSON, de most, mivel a Typeahead nem ezt nekünk, azt is meg kell küldeni mentén, az érték, amely belül van az aktuális mezőbe. Most már tudom, hogy mit kér a Yahoo! Finance, és most itt van a funkció, hogy szeretnénk végrehajtani, ha a kérelmet befejeződik. Nem kell a plugin, hogy a listát a számunkra, így itt, ahol vagyunk valójában fog építeni egy listát a javaslatokat. Ehhez nagyon hasonló a PHP-ben is láncolt ezek a nagy karakterláncok HTML akkor nyomtatott őket, meg tudjuk csinálni pontosan ugyanolyan dolog a JavaScript programot. Gyártási fogunk indulni a húr nevezett javaslatokat, és ez a szöveg csak megy, tartalmaz néhány HTML. Azt akarjuk, hogy legyen egy listát azokról a dolgokról, ezért fogunk elindul ez a lista tag, és most megyünk navigálhat az összes a szimbólumok, amelyek visszatértek hozzánk. Ne felejtse el, mert már azt mondta adattípus: "json", ez nem egy string. Ez már egy tömb számunkra. Ez nagyon klassz. Mi egyszerűen azt mondja: "Azt akarom, hogy hozzáfűzni egy listát elem." Majd helyezze belül egy olyan elem oldalát, hogy a fogjuk, hogy ez egy osztály a javaslatot, így tudjuk, hogy mi ez, és most itt van a jel, hogy mi van vissza a Yahoo! Finance. 

Egyszer hoztunk létre eleme az egyes szimbólumok általunk ütött vissza, mi csak szeretnénk, hogy zárja le a listáról. Tehát most javaslatok képviseli ezt a kis HTML fragmens hogy ha hozott egy oldal lesz a listát azokról a dolgokról, amit keresünk. Most ténylegesen, hogy az oldalon. Ehhez én már valóban létre egy üres div, és én adtam ez egy ID-javaslatokat. Hasonlóan mi meg a tartalmát div, ami megjeleníti az ár a állományi adatok most csak azt akarom állítani a tartalmát div, hogy bármilyen e karakterlánc amely tartalmazza ezeket a szimbólumokat. Ezzel a módszerrel a HTML e javaslatok változó, ez a húr, egy sor HTML. Azt akarom, hogy ezt a HTML és helyezze belül a div nevezett javaslatot. Épp csatolt valamit a DOM most. Már hozzá néhány új elemet a DOM, hogy most már jelennek meg az oldalon. Lássuk, mi ez néz ki. Ha betölteni quote6 és most gyere vissza, most, amikor elkezdek gépelni AAPL, már nincs, hogy Bootstrap autocomplete, de most már ezt a listát, hogy mi történt magunkat. Ez egy kicsit csúnyább mint a Bootstrap Typeahead, például, de ez nem teszi lehetővé számunkra, hogy egy másik dolog. Amikor néztek hogy Bootstrap plugin, láttuk, hogy amikor autocompleted, az egyik autocomplete érték volt AAPL. Ez talán nem lesz annyira hasznos. Mint felhasználó, talán nem azonnal felismeri az összes tőzsdei szimbólumokat. Amit én talán inkább elismerik a társaság tényleges neveket. Tehát nem lenne igazán hasznos, ha ahelyett, mondván: AAPL ez mondott valamit, mint az Apple Inc. Mert mi már hengerelt e magunkat, valóban könnyen csinálni. Nyissuk ki az utolsó idézet fájl van, így quote7. 

Ugyanaz. Épp most létrehozott egy PHP fájl, amely vissza fog térni hozzánk több, mint a szimbólumokat. Azt is ad nekünk vissza a cég nevét. És így csinálunk ugyanaz a dolog. Csinálunk egy AJAX kérés. Ha a kérelem kitöltött, fogjuk végrehajtani ezt a funkciót itt, , és ezt a funkciót fog felépíteni egy nagy string elemet. De a különbség az, hogy az értéke e listák már nem csak a szimbólum, ez most a nevet. Tehát van egy kis probléma. Amikor használja a keresés, meg kell valahogy átadni a szimbólumra. Nem tudjuk átadni keresést ilyesmi Microsoft Corporation. Meg kell átadni MSFT. Amikor írunk HTML, van sok szép beépített attribútumokat. Az A talán társított egy href vagy egy osztály. De amire igazán szükségünk van minden egyes ilyen kapcsolatok van egy készlet jel társul hozzá. Nincs beépített HTML attribútum állomány jelkép, de szerencsére HTML5 lehetővé teszi számunkra, hogy hozzon létre saját attribútumokat is, amit mi akarunk. Azáltal, mondván data-szimbólum, amit egy új attribútum akinek a nevét csak készült, és ez rendben van, mert szerepel benne, hogy ezekkel az adatokkal. Fogunk tárolni belsejében ott a szimbólum a készletből most. Ez azt jelenti, hogy bár mi megjelenítésére értéke a cég neve belül mi autocomplete, még mindig emlékezve a szimbólum társított minden cég. Ahogy mi csináljuk, hogy belül van ez az eleme is. Tehát ez azt jelenti, meg kell még egy változás. Amikor kattintson rá most kell ténylegesen kihasználják a szimbólum attribútum ahelyett, hogy csak az értékét. Ha vissza, akkor csatolni eseménykezelő javaslatokat. Ha az egyik ilyen javaslatok kattint most akarok valamit. Azt akarom, hogy megváltozik az értéke, hogy a beviteli mezőbe. Most azt akarom állítani ugyanezt val a funkciót. 

Így anélkül, hogy érveit e val függvény neked mi van már a szövegmezőbe, de ha ad ez egy string, ez fog tartani, hogy a húr, és helyezze be a szövegmezőbe. Én kiválasztja a beviteli mező azonos módon. A neve szimbóluma belül form-idézet. Most megküldésével az attribútum értékét adat-szimbólum. Ez a dolog itt az új, a $ (this). Mi ez utal az az elem, amit kattintott. Láthatjuk, hogy itt nem vagyunk csatolva kattintás esemény Minden elem egy osztály a javaslatot külön-külön. Inkább mi közeledik ez egy kicsit másképp. Ehelyett azt mondja, ha valami belül e javaslatok div, amely emlékezz csak a tartály a listán, ha valami belsejében div kattint, és azt egy osztály a javaslatot, Szeretném ezt az eseményt a tüzet. Alapvetően ez azt jelenti, hogy mit tehetünk, mi is újra ugyanezt az eseménykezelő az összes dolog a listában. Tehát nem kell egy eseménykezelő az első elem és egy másik eseménykezelő a második elem. Mi ehelyett azt mondja: "Azt akarom, hogy ugyanazt eseménykezelő alkalmazni mindent a listámon." De meg kell valahogy tudni, hogy melyik elem kattintott. Ez a "this" kulcsszót jelenti, hogy csak. Ez az a tárgy, amelyet éppen kattint a felhasználó. Ha rákattint a 3. linkre, ez képviseli az eleme, hogy 3. link, ami azt jelenti, hogy lehet kapni az attribútum, adat-szimbólum, amelyről tudjuk, tartalmaznia kell a szimbólumot, ami kapcsolatos a cég csak kattintott. Ha ugrik vissza a finanszírozási oldalon, láthatjuk most, hogy egyszer elkezdek gépelni valami ilyesmit msft, vagyunk feltételei már nem csak a tőzsdei szimbólumokat, vagyunk most kezd a tényleges vállalatok. De amikor rákattintok az egyik ilyen társaság, láthatjuk, hogy mi valójában feltölteni a szövegdoboz nem a cég neve de bármi volt tárolt ezen adatok attribútumokat. És ha tényleg vizsgálja egy ilyen elemek jobb kattintással és kattintson Vizsgálja Element, azt lehet látni, hogy ez mit néz. 

Ne feledje, ez olyasvalami, amit hoztunk létre belsejében, hogy a hurok amikor mi voltunk kiépítése, hogy a húr a HTML. Láthatjuk, hogy ezt a data-szimbólumnak értéke MSFT, ami nagyszerű. Ez az, amit vártunk. Ez a szimbólum, és ez hogyan van az érték, amit használatához szükséges belsejében mezőbe. Ennyi elég az idézet formájában, mert ez a fajta unalmas. Nézzük csak, hogy néhány gyors fejlesztések portfóliónk oldalra. Ha már használt CS50 Finance egy darabig, és elkezdi a vételi és eladási sok a készletek, végül is ez a táblázat fog kapni elég nagy, és te fogsz akar egy tőzsdei, természetesen. Amint a táblázat is nagyon, nagyon nagy, hasznos lehet a felhasználó, hogy megpróbálja keresni rajta. Belül a keresőmezőbe ha elkezdek gépelni valami ilyesmit Disney és keresi az én Mickey Mouse raktáron, azt láthatjuk, hogy a táblázat most szűrés alapján, amit én csak gépelt be Ez a funkció úgy néz ki, szuper bonyolult, de ez nagyon, nagyon egyszerű jQuery és JavaScript. Ez portfolio.php fájl tartalmazza a JavaScript nevű fájlt portfolio.js. Vessünk egy pillantást. Szóval html, js, portfólió. Itt, ahol tesszük, hogy keres az asztalon. Az első dolog, amit tennie kell csatolni eseménykezelő, hogy a szövegdoboz mert tudjuk, hogy azt akarjuk, hogy szűrés funkció a tüzet minden alkalommal, amikor a felhasználó megnyomja valamit, mert nincs ideje Search gombok. Az első dolog, amit meg kell tennie, hogy kitaláljuk, mi a felhasználó keres, mint tettük korábban. Ez a kulcsszó hivatkozik az aktuális elem a felhasználó kölcsönhatásban áll. 

Mivel a felhasználó kölcsönhatásba a keresőmezőbe, $ This képviseli a keresési mezőbe, így this.val ad nekünk, mi van benne a keresőmező a felhasználó éppen gépelni. Szóval, most mit akarunk tenni az szeretnénk navigálhat egész sorát belül a táblázat. Ahhoz, hogy válassza ki az összes sort a táblázatban, adtam táblázat Az azonosító tábla portfólió és minden sor képviseli TR elem, így ez a választó fog visszatérni hozzám egy nagy tömb az összes sort az én táblázatban. Most azt akarom, hogy navigálhat fölé tömb. Tudtam egy for ciklus, de a jQuery ténylegesen biztosítja számunkra a szép nevezett funkció "minden". Mit csinál, minden egyes vesz egy érv, és ez az érv egy olyan funkció. Mit fog csinálni ez fog alkalmazni, hogy a funkció minden eleme belül ezt a listát. Ez a függvény egy argumentummal, hogy ez e, és ha ez a funkció végrehajtásra kerül, ezt az e fog helyettesíteni az első sorban, majd a második sorban, és majd a harmadik sor. Ily módon, ez ugyanaz, mint a futás egy for ciklus majd kitalálni az aktuális elem index alapján belsejében a for ciklus. Minden iterációs, minden egyes ilyen elemek a táblázatban, Azt akarom, hogy ellenőrizze, ha a szöveg az elem - a szöveg a cella belsejében a sor - egyezik mit keres. Ez a nagy hosszú sora parancsok, hogyan tudnám csinálni. Először is, ismét ezt most hivatkozik -, mert van benne egy új funkció - ez most az aktuális sor a táblázatban. Azt akarom, hogy az aktuális sor a táblázatban, és azt akarom, hogy az összes gyerek. Ne feledje, a DOM egy hierarchikus fa, ami azt jelenti, hogy az elemek olyan gyermekek száma. 

Ezt. Gyermekek funkcióban fog vissza engem egy tömb minden elemét , amelyek a gyerekek az, ebben az esetben, egy sort a táblázatban. Ez csak egyszerűen a sejtek belsejében a sor. Csak azt akarom keresni az első sejt. Ezt. Első függvény mondja nekem az első eleme, hogy a tömbben. Ezután a szöveg funkció szerint értem pontosan, mi van benne az, hogy a sejtek mert szeretnék keresni fölé szöveget. Végezetül, hadd átalakítani, hogy kisbetűs, így nem tehetünk szöveg kis-és nagybetűket lekérdezések. Végezetül, szeretnénk látni, ha a karakterlánc belsejében egy táblázat tartalmazza a string amit keresett. A indexOf funkció JavaScript pontosan ezt teszi. Azt mondja nekünk, függetlenül attól, hogy ez a szöveg tartalmaz egy string. Ha ez igaz, hogy a cellában mit keres, akkor azt szeretnénk, hogy győződjön meg arról, hogy ez látható. A show módszert fogja mondani: "Mutasd az elem." Ha nem ez a helyzet, akkor azt jelenti, hogy bármit is keresem nem tartalmaz ezen belül a sorban, és így azt akarom, hogy elrejtse az a felhasználó elől. Ez megvalósítja a kedves szűrés hatása, ha nem látjuk a teljes táblázatot. Ha érdekel, hogyan lehet ezt a ticker is, feltesszük a forrás online. De ez tényleg egyszerű. JQuery már félelmetes módszereit e animációk és manipulálni CSS tulajdonságok. Szóval, ez nekem. 

Mi hát előttünk? Mint látni fogod, néhány napon belül, a végleges projekt javaslat miatt. A végleges projekt javaslat feltenni néhány kérdést, de közülük lesz három mérföldkövek - az egyik egy "jó" mérföldkő, egy jobb mérföldkő, és az egyik legjobb. Az ötlet, hogy igazán segíteni nektek, állítsa be az elvárásokat annak érdekében, hogy minimális lesz elégedett a termelés a projekt végső és ez lesz "jó", amennyiben Ön érintett. De aztán az az érdeke, szerzés, hogy elérje egy kicsit, hogy valami jobb vagy valami a legjobb, akkor is egyfajta nyomja Ön felé, hogy az is. A CS50 Hack-a-Thon, eközben van egy pár hét alatt. Általában, mi ezt a lottón alapján alapja, mert a kamat, de esély fogjuk, hogy csak néhány száz minket shuttle buszok Harvard Square le Kendall tér, ahol a Microsoft szép létesítmény találó "NERD" - A New England Kutatási és Fejlesztési Központ. Majd oda 8 óra körül leszünk néhány ételt. Körülbelül 01:00 fogunk még egy kis ételt. Körülbelül 05:00 ha még mindig ébren leszünk feje fölött IHOP vagy vegye vissza campus. A cél itt az, hogy belevetik magukat végső projektek mellett az osztálytársak és a személyzet. Aztán néhány nappal később a CS50 Fair, ami valójában azt jelentette, hogy egy lehetőséget a srácok, hogy bemutassa a munkát és elért a félév míg a dörzsölés váll egymást, és kapok egy értelemben, amit mindenki tett. Ezzel azt mondta, nagyon köszönöm, hogy Tommy és Joseph, és mi találkozunk hétfőn.  [Taps]