[Powered by Google Translate] [Vecka 9, Fortsättning] [David J. Malan - Harvard University] [Detta är CS50. - CS50.TV] 

Detta är CS50. Detta är slutet av vecka 9. Tack så mycket. Äntligen. Vecka 9. Jag fick det. Idag fortsätter vi vårt samtal om webbprogrammering med ett öga mot det slutgiltiga projektet, inte för att du måste göra något webbaserad för slutliga projekt, men eftersom varken för examensarbeten eller efter CS50 detta är verkligen den riktning i vilken modern programvara går. Och ändå är det faktiskt inte en lätt sak. I själva verket är en av de svåraste saker att göra aspekten av design. 

Till exempel genom konstruktion menar vi faktiskt få användargränssnittet eller användarupplevelsen höger. Jag förmodar - och vi vet från en nyligen problembild när några av er sändes dina gnäller om några mjukvara eller maskinvara som infuriates dig, vare sig på campus eller utanför - det finns en hel del webbplatser där ute, det finns en hel del hårdvara ute, denna typ av suger. Men verkligheten är att göra saker som är lätta att använda men ändå är ändå kraftfulla är en mycket svår utmaning. Så för idag frågade jag Josef och Tommy att gå med mig hit så att vi kan ha en konversation, både om design och vilka typer av tankeprocesser ska börja gå igenom ditt huvud När du designar sista projekt, dina framtida strävanden. Och därefter med Tommy hjälp vi titta på några av de implementeringsdetaljer. Hur kan du ha lite visioner på papper eller i ditt sinne att du sedan kan köra programmässigt genom att använda en del av de tekniker och metoder som vi har precis börjat prata om, nämligen JavaScript och något ännu nyare, nämligen AJAX, asynkron JavaScript. Det låter dig skapa allt mer dynamiska av ett användargränssnitt genom att hämta mer och mer data successivt från en server. Så vi får se några av de strängar som bra idag. Som en sidoreplik, om du är intresserad av att koncentrera i datavetenskap eller minoring i datavetenskap, vet att denna fredag ​​kl i Maxwell Dworkin 221 kommer det att finnas en pizza händelse där du kan lära dig lite mer om datavetenskap. På väg ut genom dörren idag kommer du att kunna plocka upp en inofficiell guide till CS på Harvard. Vi ska lägga den på papperskorgen burkar utanför i midjehöjd så att om du vill ta tag i detta och lära lite mer om CS, som kommer att vara där för dig som det var i vecka 0. Även om du skulle vilja gå med oss ​​för CS50 lunch på fredag ​​kl 01:15, bege dig till cs50.net/lunch. Utan vidare, jag ger dig undervisning karl Joseph Ong. Hej. [Applåder] Tack. Första gången jag lärde mig om design var i en klass här kallas CS179. 

Professorn vid tiden berättade historien om en annan professor som hade gått till ett hotell och använde kranar. Kan någon berätta för mig vad de 2 rattarna på vänster och höger gör? [Elev] Varmt och kallt. >> Varmt och kallt. Bra. Vad du normalt förväntar, eller hur? Denna professor efter att ha använt kranen vill ta en dusch, och han fortsätter att använda detta. Han tror att vänster och höger sidorna är för varmt och kallt, eller hur? Men kan någon berätta för mig vad dessa egentligen göra? Några händer? [Ohörbart elev svar] >> Ett förslag är? [Ohörbart elev svar] >> Temperatur? Så en av dem reglerar temperatur och andra kontroller? >> [Elev] Vattentryck. Vattentrycket. Bra. Denna professor går in i detta och tror att de kontrollerar varmt och kallt, vänder den rätta, vilket han tycker är för varmt, hela vägen upp för att han vill ta en varm dusch. Tja, detta inte riktigt stämmer, så han får inte mycket rolig upplevelse av att vara i en kall dusch, och vi vet alla hur det känns. Detta är ett exempel på en konstruktion fel. Vad jag menar med detta är hans förväntningar från kranen matchade inte vad som kom ut ur duschen, som är typ av olyckligt för honom. Så detta är ett exempel på en design fel som händer i verkliga livet. Men vi ser alla möjliga andra som också. Vi är nog inte fans av MBTA-systemet. Detta är ett tunnelbana faktiskt i London, som säger: "Den här knappen är inte i bruk." Varför är det även på det? Varför bryr vi ens? När jag var liten, är den tekniskt kunniga en i huset, när datorn skulle krascha, skulle min mamma komma till mig, visar mig den här skärmen och frågar mig vad som hände. 

Även jag vet inte vad det innebär. [Skratt] Vad? [Skratt] Ibland känner vi oss som mjukvaruutvecklare är bara trolling oss. Som användare är vi som, "Vad är det som händer? Någon berätta för oss." Detta allt handlar om en fråga om design. Design, som vi kan se, inte enbart om estetik, det handlar inte om hur det ser ut. Vi ser här att denna lilla pop-up hit faktiskt ser ganska trevligt. Den har en skugga i bakgrunden, har det gränsöverskridande radie pågår. Det är typ av söt. Det är inte riktigt bra utformad eftersom det inte är mycket användarvänlig. Det lilla pop-up som kommer upp inte riktigt ge mig någon information om vad som händer, säger den mig ingenting som användaren om hur man återhämta sig från felet. Vi vill tänka på saker att design inte är. Först, det är inte estetik. Det är inte heller fyllning din app med massor av onödiga funktioner. Om du är en thailändsk restaurang, du förmodligen inte vill bli tandläkare samtidigt. Och med Facebook Frågor och inte att många människor använde den och det var inte riktigt i centrum för vad de byggde. Och så är det skönt att tänka på inte så mycket mängden av de saker att du sätter på din ansökan men kvaliteten och hur du gör det användarupplevelsen bättre genom att faktiskt förbättra på vad du redan har. 

I ett nötskal, berättar designen för oss vad vi ska bygga. Till exempel, om vi bygger något som låt oss söka upp saker, som Google, till exempel, ska vi göra saker på ett sätt som som kräver att användaren kan ta massor av klick för att komma till vad de vill, eller ska vi göra det på ett sätt, till exempel med Google Instant eller Komplettera automatiskt som låter oss komma till våra resultat snabbare? Engineering innebär, liksom Tommy kommer att visa dig, faktiskt bygga det. Det finns massor av olika typer av design. Till exempel, för om du bygger något distribuera något i ett tredje världen land där det inte finns mycket el eller så mycket teknik, du måste utforma vad du bygger på ett sätt som lätt ger tillgång till människorna där. Men vad för slags andra designbeslut kan det finnas eller kan vara inblandade i något sådant? Ja. Jag ser en hand. [Ohörbart elev svar] >> Höger. Exakt. Tillgänglighet är en sak. Många tänker inte på, "Vad mina användare?" liksom ytterligheterna av antingen spektrum. Jag har användare som kan ha funktionshinder som jag inte tänker och jag bara tänka designa för den allmänna användaren. Internet är tillgängliga för alla idag, och jag borde utarbeta för dem också. Vilka möjliga andra designbeslut kan du göra? Ja. >> [Elev] Kostnad. Kostnad. Mycket bra. En annan sak vi kan basera våra designbeslut på är kostnaden. Om vi ​​är ett företag, du vill bygga något som inte tar mycket kostar att producera men kan sälja till en särskilt hög kostnad eller kan få oss lite vinst. 

Dessa är alla olika typer av design, men när vi bygger någonting på Internet eller när vi bygger något som förmodligen inte kostar så mycket att bygga upp nu, Liksom Internet-tillämpningar - du behöver inte kasta mycket kapital i den för att göra något som faktiskt fungerar - vad vi är mer oroad över är användarupplevelsen. Vi kallar detta användarcentrerad design. Huvudsak vad användarcentrerad design innebär sätter er i skorna av dina användare. Om någon registrerar sig för vad jag bygger, de har kommit uppenbarligen min särskilt program med ett mål i sikte, en uppgift som de vill genomföra. Och ditt jobb är inte bara att hjälpa dem slutföra denna uppgift utan att hjälpa dem slutföra uppgiften på ett sätt som är effektivt, intuitivt, och som någon person sagt borta, tillgänglig. Vad betyder effektivitet? Effektivitet innebär hur snabbt gör mitt användarnamn slutföra uppgiften med tanke på min gränssnitt. Tar det massor av klick för dem att ta sig från en plats till en annan? Är det tråkigt? Har de utföra massor av repetitiva uppgifter? Vi vill göra det så effektivt som möjligt så de behöver inte göra dessa typer av saker. När det gäller intuition, är det, till exempel, om en användare tittar upp min gränssnitt, är det lätt för dem att ta sig från plats till plats? Är det lätt för dem att räkna ut vad de har att klicka på mitt gränssnitt så att de kan nå målet eller uppgiften som de vill uppnå? 

Och slutligen, som en person sade där, är tillgängligheten väldigt viktig. [Manlig talare] Det kommer att tillgängligheten för saker som vision, gillar hur jag faktiskt designar något för någon som är blind? Åh. För människor som inte kan se på allt har vi något som kallas skärmläsare. Vad du bör göra är att du ska bygga din webbplats på ett sätt som att till exempel vissa teknologier som vi kallar - Det finns massor av saker nu. Jag tror att det finns skärmläsare som kallas JAWS. Många av dessa saker är beroende av vad vi kallar området regler För att läsa ut till användaren vad som finns på sidan. För de människor som inte kan se, måste du se till att dessa skärmläsare kan faktiskt ta upp innehållet på sidan och kan faktiskt visa dina användare, Om du inte kan se, åtminstone du kan fortfarande förstå innehållet på sidan. Ja. Okej. Nog talar om god design. Låt oss tala om dålig design. Detta är saker som du inte bör göra. Kan någon berätta för mig om sina erfarenheter med Craigslist och vad de tycker är inte så bra denna design? Ja. >> [Eleven] Jag tror att det finns alltför många ord i ett område. Alltför många ord, eller hur? Helt överväldigande. Du kommer till den här sidan och du är hälsade med en hel massa saker här uppe som kanske inte ens någon roll för dig. Till exempel, du bor i en stat som inte börjar med detta brev. Låt oss säga att du bor i Texas eller något. 

Du måste bläddra hela vägen ner på sidan för att komma till den plats du är på. Jag är från Boston, så låt mig se i Massachusetts. Var är Massachusetts? Åh, det är här. Åh, det är Boston. Okej. Låt oss titta på Boston. [Skratt] Ganska överväldigande, eller hur? Awkward saker där. [Skratt] Låt oss säga att jag letar efter någonstans att bo. Hur många människor har faktiskt använt Craigslist? Massor av dig. Det är ganska dåliga sätt att se på detta, men låt oss titta på det här. Vad är skillnaden mellan img och PIC? Kan någon berätta för mig? Det faktiskt finns ingen skillnad. De menar exakt samma sak, men de har olika etiketter för dem av någon anledning. Om jag klickar på har bild, händer ingenting på sidan. Jag har faktiskt klicka på Sök igen för att något ska hända. Vad kan vara en bättre konstruktion beslut som skulle kunna göras där? Om jag klickar på det filtret, vill jag nog filtrera efter just åtgärder eller att viss kategori. Så istället för att behöva trycka Sök igen kunde jag bara automatiskt gör filtreringen typ av Googles stil där de gör det direkt. [Malan] Men inte bildas som vi har sett dem hittills måste fysiskt in genom att slå Ange minst eller klicka på en knapp? Som du har sett dem så långt, har du faktiskt klicka på Skicka för att göra dessa saker. 

Men som Tommy kommer att visa dig i ett andra, det finns faktiskt sätt för dig så att när du klickar på den saken den automatiskt kan skicka vad vi kallar en AJAX begäran och få data tillbaka och filtrera dina resultat omedelbart. Det finns massor av saker som är fel med detta gränssnitt. [Malan] kan du söka efter Cambridge? Det är något lite avvikande här där du bryr dig om Cambridge och ändå du får Westford, Spring Hill, West Newton och liknande. Förmodligen inte perfekt. >> Förmodligen inte perfekt. Hur skulle jag kunna göra användarens upplevelse bättre på just denna sida? Ja. >> [Elev] Instruktioner. Okej. Instruktioner i vilken typ av förnuft? [Elev] Till exempel en sak för första gången användare som inte ens vet vad Craigslist är eller om du inte vet vad du ska göra. Rätt. Så förklara vad Craigslist är på denna sida är viktigt. Vi kan faktiskt säga användarna vad den här sidan är faktiskt för. Om jag bara besöker denna ser jag en massa platser. Jag vet inte ens vad de betyder. Men ännu viktigare, bara tittar på detta gränssnitt, minns jag var tvungen att scrolla ner massor av saker att hitta en viss gemenskap att jag brydde faktiskt om den här. Vad är ett snabbare sätt jag kunde göra det? Ja. [Elev] Dela upp dem i öster, väster regioner. >> Okej. Jag kan dela in dem i flera kategorier som skulle kunna hjälpa mig snabbare avgöra hur man får till det viss plats. [Elev] Sätt en listruta. >> Höger. Okej. Jag skulle kunna använda en rullgardinsmeny för att vi har en fast uppsättning av saker och vi kunde visa dem i en rullgardinsmeny. På så sätt tar det inte upp så mycket plats på skärmen. Men ännu bättre än så, vad kan vi göra? Ja. >> [Ohörbart elev svar] >> Kan du säga det igen? >> [Elev] sökrutan. Ja, en sökruta. Det är bra. Vad vi kan faktiskt göra är om vi ser tillbaka på bilderna, sökrutan. Komplettera automatiskt. Mycket enkelt sätt att söka igenom resultat som du vet är i en uppsättning. Om jag börjar skriva BO, bara visa mig alla de resultat som har BO inne i dem. På så sätt kan jag lätt hitta den speciella jag vill gå till istället för att behöva bläddra igenom detta riktigt stora lista. 

Dessa är alla typer av riktigt lågt hängande frukt att någon som genomför Craigslist kan faktiskt göra för att göra upplevelsen på webbplatsen mycket bättre för just deras användare. Okej. Nog talar om dåliga webbplatser. Låt oss tala om Facebook. När Facebook kom ut, och i synnerhet Facebook-foton, Det fanns massor av andra tjänster vid den tid som skulle kunna göra precis samma saker. De kunde organisera dina bilder i album. Vad du kan göra är att du kan organisera dem i uppsättningar också. Du kan organisera dem efter datum. Du kan göra alla dessa särskilda saker. Men någon som vet vad som fick Facebook bilder explodera när den släpptes? Ja. >> [Studerande] Taggar. >> Taggar. Exakt. Vi har Milo hit, som är vår hund maskot med att CS50 bandana. Du kan se att vi har den här märkning funktion i mitten. Och vad gjorde Facebook-foton så intressant ur användbarhet synvinkel är att det faktiskt får människor via denna att engagera sina vänner i sina bilder. För Facebook, eftersom deras webbplats är särskilt sociala, det handlar om att bygga denna typ av social atmosfär. Det förbättrade upplevelsen av bilder mycket mer eftersom de kan faktiskt börja säga "Det är kopplingar mellan människor, och dessa är bilder om människor du verkligen bryr sig om. " En del av det är också typ narcissism. Folk gillar att märkas i bilder och sånt. Även om det är inte nödvändigtvis en bra mänsklig egenskap, Samtidigt den är baserad på goda designbeslut eftersom människor faktiskt bryr sig om saker som detta. Så det är Facebook-foton. 

Men låt oss tala Facebook allmänhet. Jag är säker på massor av människor här har åsikter om Facebook, både bra designbeslut och dåliga beslut design. Så låt oss ventilera eller vara lycklig. Kom igen. Jag vet allt om du använder Facebook. Någon måste ha något dåligt att säga eller något gott att säga om den. Ja. [Elev] I nyhetsflödet finns en massa saker som jag inte riktigt bryr sig om. Nyhetsflödet gör visar en massa saker som du kanske inte bryr sig om. Du har vänner på Facebook som du inte har träffat på 2 eller 3 år och du ser deras nyheter resultat poppar upp i ditt nyhetsflöde och du egentligen inte bryr sig om det. Facebook har faktiskt gjort ett försök att göra detta bättre, och de har faktiskt försökt att driva relevanta resultat till toppen av nyhetsflödet som för sent så du ser faktiskt saker av vänner som är relevanta för dig eller dina nära vänner. Något annat? Ja. [Ohörbart elev svar] >> Kan du säga det igen? [Elev] Annonserna är relativt diskreta. >> I vilken mening? [Ohörbart elev svar] De har inte ljus på skärmen, som banners. Okej. Det är bra. Om du kommer ihåg Internet från 90-talet - >> [Malan] jag var där. >> Han var där. [Skratt] Du kanske kommer ihåg blinkande GIF bakgrunder, sparkly saker, GeoCities stil slags saker. Det är verkligen inte ett exempel på en bra design eftersom det är verkligen störande från innehållet. Yale konst webbplats brukade ha animerade GIF som sin bakgrund och du inte kunde läsa något på sidan, men jag antar att någon faktiskt pratade med dem och nu är det lite annorlunda. [Malan] Det är mycket bättre nu. >> Det är mycket bättre nu, som ni kan se. >> [Malan] Oh yeah. Bara bra, bara - Ja. Okej. 

En del av det är också att göra din sida kanske mycket minimalistiska och mycket förståeligt så saker på sidan flödet på ett sätt som är mycket logiskt och inte komma i vägen för varandra. Vilka möjliga andra saker är bra om Facebook eller dåligt om Facebook? Låt oss bara ha en design konversation här. Åh. Var? Ja. [Eleven] Den nya tidslinje systemet kan du söka personens profil om sitt förflutna. Ooh, Tidslinje. Tidslinje är en stor sak eftersom det låter dig stjälk dina vänner tillbaka när de var i gymnasiet. Tidslinje är bra eftersom det gör att du kan filtrera igenom innehåll mycket snabbare, det kan du hitta saker som annars skulle ha tagit dig en riktigt lång tid att hitta bara rulla upp och ner, upp, upp, upp, upp, upp, som att gå tillbaka i tiden. Men sedan finns det också en slags nackdelen med att i fråga om användarens upplevelse. Vad kan det vara? Stora ord som börjar med P-R. >> [Elev] Sekretess. >> Privat, eller hur? Sekretess är en stor upplevelse frågan. Detta är en av de saker jag hatar mest om Facebook nu. [Skratt] [Malan] Som gör jag nu. David insåg inte detta faktiskt hände förrän igår. Så nu vet han att varje gång jag chatta att jag vet att han har ignorerar mig. [Malan] Den besvärliga delen var jag faktiskt ignorera honom, och jag visste inte att han visste att jag ignorerar honom. [Skratt] Sekretess är en stor fråga. Kan någon här berätta vad som kan vara dåligt om Facebook sekretess förutom det faktum att de gör saker som detta? Vad är det särskilt svårt att göra när det gäller Facebook privatliv? Den sortens är en ledande fråga. Ja. >> [Elev] Göm dina bilder från vissa personer. Rätt. Exakt, för att dölja dina bilder från vissa personer. De har denna lilla, lilla knappen i det övre högra som gör att du växla privatliv på ett foto. Deras skydd av privatlivet är mycket varierande mellan olika typer av menyer. 

De har blivit mycket bättre om det nyligen, men det brukade vara fallet att när du ville hindra dina vänner från att se bilder, Du skulle behöva gå igenom en mycket komplicerad 5-stegs process för att bli som, Låt mig klicka på denna länk, låt mig klicka igen, låt mig klicka igen, Låt mig ange vilka människor inte kan se mina bilder. Det är inte särskilt bra på Facebook del eftersom så mycket om användarupplevelsen faktiskt ge dem frihet att kontrollera vad folk kan se. Vi kallar denna användare kontroll och frihet. Om du inte låter dina användare gör det på ett sätt som är effektivt och intuitivt, då din användarupplevelse är inte riktigt så bra alls.  Vill ni säga något om Facebook? Hur stänger jag av denna funktion? [Ong] Du kan inte stänga av denna funktion, och det är en enorm användbarhet fel hos Facebook. Denna funktion - jag faktiskt såg i den igår - det är antingen att man inte kan göra det eller det är begravd någonstans mycket, mycket djup i skrymslen Facebook eftersom jag inte kan lista ut hur man inaktivera den här funktionen alls. [Malan] Men ibland dessa beslut inte är uppenbara eftersom ni har gett oss en hel del nyttig feedback på olika CS50 ansökningar och webbplatser som kursen använder. Vi har inte genomfört alla dessa önskemål och förslag. 

En del av det är för att få så många förfrågningar att det är en funktion av tiden, men ibland gör vi bara ett medvetet beslut som, "Tack för förslaget, men vi är oense." Så hur bestämmer du verkligen vad du ska göra om dina användare tycker att du borde göra något även om du inte nödvändigtvis? Det är en fin balans mellan faktiskt lyssnar på vad dina användare säger och faktiskt ha något slags linje där du säger, "Vi kommer inte att göra vad dessa användare säger." Och i synnerhet tror jag att det var ett citat av Henry Ford som sammanfattar upp detta ganska bra. "Om jag hade frågat folk vad de ville, skulle de ha sagt att de ville ha snabbare hästar." Kan någon sorts retas isär vad det citatet egentligen betyder? Det är inte bara att användarna vet vad de vill, men det är mer som - [Eleven] De vet inte vad som är möjligt. I del de inte vet vad som är möjligt. Tease att förutom lite mer. Vad menar du med det? [Ohörbart elev svar] Det är bra. Vad jag tror att vi försöker säga här är att folk vet vad de vill. De vill snabbare hästar. Vad de verkligen vill är förmågan att gå snabbare, men de vet inte riktigt det medium genom vilket för att uppnå detta. När du kommer till dina användare och dina användare berätta något och de säger, "Vi vill ha dessa funktioner och dessa funktioner och dessa funktioner" du inte vill att nödvändigtvis tänka på, "Låt mig gå vidare "Och genomföra vad de uttryckligen säger," men vad du vill tänka på är: "Vad för slags idéer kan jag få från det?" Vad vill de egentligen? 

Och därifrån vad du kan göra är utforma något som uppfyller dessa krav men inte nödvändigtvis på det sätt som användaren förväntar sig att vara nöjd. Så för något liknande slutliga projekt, i mycket reala termer, vad är en bra heuristisk när det gäller att göra något bättre, särskilt om designern har denna arrogans om honom där du slags vet vad som är bäst, kan du ta input från användarna, men hur går du egentligen om att få den feedback? I slutliga projekt, mycket konkret, ger det optimala resultat här? Vad ger optimala resultat - och jag kommer att gå över denna i en andra - är denna process att utveckla och sedan testa och sedan iteration. Vad jag menar med testning är oftast när du designar något du tycker det är ganska bra, liksom, "Jag är en stor designer. Alla kommer att älska det här." Och sedan lägga ut den där och folk inte gillar det av någon anledning. Vad du behöver göra är att du måste ta de delar av saker som folk gör som och förnya de saker som folk inte gillar. Det låter som en mycket självklar process, men denna process ständigt iteration på toppen av vad du redan har byggt är en process som hjälper dig inte bara förfina dina egna färdigheter, men också hjälper dig att förfina designen så att människor uppskattar faktiskt din produkt ännu mer än de gjorde tidigare. 

Jag ska gå över mer konkreta exempel på vad du kan faktiskt göra. Som en slags sista exempel på en produkt, låt oss titta på KAYAK. KAYAK när den kom ut var mycket, mycket populär. Kan någon gissa varför? Vilka är de typer av saker du tycker om detta om du har använt det eller vad är de typer av saker du inte gillar? Ja. >> [Ohörbart elev svar] >> Okej. Det är en del av det är att låta användaren har en fråga som är mer expansiv än en mycket restriktiv som, "Du måste välja din startdatum "Och du måste välja din slutdatum." I själva verket låter den dig vara flexibel om det och det ger dig alla de flygningar i det intervallet. Något annat? [Elev] De omfattar avgifter i priset. De gör inkluderar avgifter i priset. De skatter och saker går faktiskt rakt in det priset i det övre vänstra så att du inte luras att tro att du faktiskt betalar för en $ 240 flygning när det är riktigt 330 $. Något annat? Ja. [Ohörbart elev svar] Jag är inte säker på om de verkligen låta dig göra det. Jag kan ha fel. Det kan vara en intressant sak om du vill lägga mer tyngd på vissa filter så att de trycker resultat relaterade till det filtret till toppen. Men kan någon berätta för mig vad som är så speciellt med denna vänster sida? Hur kom du ser traditionellt upp en flygning på en Internettjänst innan? 

Ja. >> [Ohörbart elev svar] >> Kan du säga det - [Eleven] Varje flygbolag. >> Ja. Varje flygbolag har en egen webbplats. Detta konsoliderar saker. Och? [Eleven] Du vet exakt vilken tid du lämnar. Du vet exakt vilken tid du lämnar, men relaterade till filter i synnerhet. Låt mig dra upp KAYAK. Åh Gud, pop-ups. Dålig användarupplevelse. Vad händer när jag flyttar detta reglage? [Studerande] Automatiska uppdateringar. >> [Ong] Automatiska uppdateringar. Det är något som är mycket viktigt. Före detta, när du ville slå upp en flygning, du var tvungen att sätta på din input plats, din produktion plats, sedan på Sök skulle bearbeta det och visa dina resultat. Om du vill ändra din fråga, skulle du behöva trycka tillbaka två gånger, in i en ny fråga från början, och sedan göra det om och om igen. Det fina med något sånt här är det använder en väldigt [obegripliga] sak i mitten. När du gör något sånt här, skjuter bort en begäran och det tar dig tillbaka alla resultat omedelbart. Denna typ av omedelbar feedback är något som gjorde KAYAK mycket populära eftersom det är väldigt lätt för mig att bara ändra min fråga och att räkna ut de saker som är kring ett visst område utan att behöva gå fram och tillbaka, fram och tillbaka, och tillbaka. Så dessa är alla möjliga saker du vill tänka på när du utformar din webbplats. Hur kan jag göra det mycket effektivt för mina användare att gå igenom vad de arbetar på och för att komma till deras eventuella mål så snabbt som möjligt? [Malan] Och Josefs punkt tidigare om användarna inte nödvändigtvis veta vad de vill, baserat på vad ni nu vet om HTML och du har kryssrutor, radioknappar, välja menyer, inmatningsfält och liknande, hur skulle du genomföra idén att plocka en starttid för en flygning? 

Vilka av dessa olika UI mekanismer skulle du använda? Om du vet precis hur mycket HTML som lärdes innan och du vet ingångarna är radio-knappar, kryssrutor, drop-downs, och rutan, vad skulle din naturliga valet har varit för att plocka datum? [Elev] Ingång. >> Ingång. Eller kanske en drop-down med alla datum, eller hur? Så med mer komplexa UI mekanismer som detta på vänster sida som du kan genomföra, Du kan göra denna process mycket mer intuitivt med ett reglage eftersom tiden är kontinuerlig, och människor i allmänhet tror inte på det i termer av diskreta bitar. Okej. Sista. Tio användbarhet heuristik. Alla de saker som vi pratat om faller förmodligen under någon av dessa kategorier. Om du går till den här länken, som platser kommer att läggas på nätet, du faktiskt kommer att kunna, som du designar din webbplats, hålla dessa heuristik i åtanke och dessa tumregler. För dina projekt, det jag föreslår att du gör för att utforma din app bättre är att göra papper prototyper först. När du funderar på din ansökan, snabbt skissa vad du vill att det ska se ut och se till att alla rutorna är placerade på ett sätt som är mycket intuitivt för användaren att använda och även visa dessa papper prototyper till dina vänner och börja fokusgrupper. Bara få 2 eller 3 människor och be dem att bara peka på dessa papper prototyper, och visa dem nya skärmar för att se om de verkligen förstår vad som händer. 

Vad du vill göra är att ge dem en uppgift, motivera denna uppgift, och bara ge dem app och låt dem använda den. Ge inte dem instruktioner längre än så. Du vill verkligen låta dem interagera med din app på ett sätt som låter dig se hur de skulle använda den om du inte stod bredvid dem. Och det är mycket viktigt. Det kommer att ge dig massor av insikter om människor blir runt vissa saker på ett sätt som jag inte hade för avsikt dem? Använder de speciella UI mekanismer på skärmen på ett sätt som är typ av Hacky? Jag har inte för avsikt för dem att göra det på det sättet. Och när du är klar med det, vad vill du göra? Din design stenar, eller hur? Vad du vill göra är att du vill utveckla och göra den processen igen. Så visa det för vänner när du har utvecklat den, testa den, utveckla, testa, utveckla, testa, iterera, om och om och framåt. Design är en mycket iterativ process i denna mening. Du har faktiskt bygga något och sedan inser saker om det att du inte inser innan och gå tillbaka och förbättras från det. Nu för utvecklingen delen, det är vad Tommy kommer att visa dig efter pausen och hur du skulle kunna genomföra något liknande automatisk komplettering på ett sätt som är ganska enkel. [Malan] Som Tommy sätter upp här, en fråga då. En hel del av de tidigaste webbplatser - och när Josef sade 1990 stil webbplats, Det var implementeringar där om du ville välja en starttid och en sluttid, uppriktigt sagt, tillbaka i dag och även på vissa webbplatser idag, hur du gör detta är du väljer en timme från en drop-down, du väljer minuter från en drop-down, kanske du väljer AM, PM och sedan gör att 3 gånger. Och så med 6 klick och kanske lite bläddra ditt användarnamn kan faktiskt ge någon form av datum och / eller tidsintervall i denna mening. 

Så definitivt suboptimal och ändå så långt vi har sett några uttrycksfulla kapacitet på något av de språk som vi har tittat på att göra något sexigare Liksom detta reglage för start-och sluttid. Men om du tänker tillbaka på vecka 0 när vi pratade om Scratch, där också fanns inte widgets som bara gjorde vissa saker. Du verkligen bara hade dessa grundprinciper som loopar och villkor och liknande. Snäll för att bara tänka mycket abstrakt nu oberoende av uppgifterna i HTML, vad som verkligen händer med något sådant starttid och sluttid skjutreglaget? När jag flyttar min mus och jag klickar på den lilla morot symbolen till vänster och börja dra, programmatiskt, vad är det du vill kunna genomföra att göra det hända? Vilka frågor, vad booleska uttryck som du vill kunna be? Vad som verkligen händer? Sammy? [Eleven] Var är markörens position? >> Bra. Var är markörens position? Detta var något vi behövde uttrycka tillbaka i Scratch, om det var baserat på plats eller ens färg eller liknande. Du kanske kommer ihåg aldrig så kort måndag fanns alla dessa saker som kallas händelser i världen av webben, och så finns det saker som onclick och onkeypress och onKeyUp och onMouseOver och onMouseOut. Så inser att även dessa saker vi har tagit för givet på webben med sajter som Facebook och Gmail, även om du inte har en aning hur du skulle kanske genomföra det eftersom det finns inget ens som det föreläsning eller problembild 7, inse att dessa exakt samma grundprinciper, med HTTP och parametrar och GET och POST, med de grundläggande HTML ingångar som vi har tittat på hittills och i ett ögonblick med de programmatiska mekanismer som Tommys väg att införa kan du börja uttrycka dig precis som du gjorde i vecka 0 av mycket intuitivt dra och släppa. 

Så med det sagt, Tommy MacWilliam och några nya pusselbitar för oss för webben. Okej. Mitt namn är Tommy och jag kommer att tala om JavaScript. Bara en ansvarsfriskrivning: Jag är av den åsikten att JavaScript är bäst programmeringsspråk i hela hela världen. Det finns massor av människor som inte håller med mig, men det är bara fantastiskt. När du går tillbaka till C, om du måste skriva C för en annan klass eller några andra språk, det är bara riktigt frustrerande i alla låg nivå detaljer du måste gräva ner i. Så om du någonsin känner dig ledsen över hur irriterande C är att skriva, bara gå tillbaka, skriva några JavaScript. Det är nirvana. Du kommer att må mycket bättre om din dålig dag. En hel del av den magiska JavaScript kommer från dess förmåga att manipulera saker som redan finns på sidan. När vi skrev våra PHP-skript, de körs på servern, och så småningom att PHP-skript matar förmodligen någon HTML. Det HTML skickades till kunden, och då var det. Om PHP ville lägga till en knapp på en sida, till exempel, kan det egentligen inte göra det. Det skulle ha att göra en helt ny HTML-fil och skicka den till webbläsaren. Med JavaScript vi vet att vi kan uppdatera saker medan de är redan på sidan, och på grund av detta kan vi erbjuda mycket mer omedelbar feedback, som verkligen kommer att förbättra användarupplevelsen på vår hemsida. Bara en snabb resumé av JavaScript väljare. Vi vet att när vi hämtar en HTML-sida, det kommer att vara representerade i DOM. 

DOM är minns bara detta stora träd där elementen är relaterade i denna stora hierarki. När vi arbetade med databaser i pset 7, en av de första saker som vi behövde för att veta hur man gör var söka i databasen. Vi har denna stora användare bord, och ibland vi vill bara säga, "Jag vill bara några av dessa användare som matchar ett villkor." Likaså när vi har DOM behöver vi något sätt att fråga det. Vi behöver ett sätt att säga: "Jag vill att alla knappar som ser ut så här "Eller alla bilder på sidan." Och dessa väljare tillåter oss att göra det. Så bara en snabb återblick. Denna första här, det # skicka, vad är det att gå att välja? Minns någon? [Ohörbart elev svar] >> Ja, exakt. Detta kommer att välja ett element på sidan som har ett ID på skicka. Och så att hash-taggen säger detta väljare kommer att fungera med ID. Vad sägs om den andra, det här. Centrerad, vad det välja? Ja. >> [Elev] Klass. >> Exakt. Detta kommer nu att välja efter klass. Skillnaden mellan ID och klass här är i allmänhet ID ska vara unikt inom vilken plats du söker över. Så om du söker på en hel webbsida, du borde verkligen bara ha 1 element med att vissa ID, så i detta fall skicka. Med klasser, å andra sidan kan vi ha mer än 1 del på samma sida med samma klass. Detta kan vara användbart för att säga att jag vill välja allt som centreras på sidan snarare än bara 1 sak. 

Och slutligen, är det sista en här lite mer komplicerat, men vad kommer detta att välja från DOM? [Ohörbart elev svar] >> Vad är det? [Elev] Allt som är en tagg. >> Vi har 2 delar här. Den andra delen kommer att säga att jag vill välja dessa taggar med en tagg av input, så alla element som är en ingång tagg. Men jag vill inte bara välja alla ingångar att något som en submit-knapp kan vara en ingång och något som liknar en textruta kan vara en ingång. Så med dessa hakparenteser jag säger att jag vill bara att välja de delar som är av typen text. Någonstans i min HTML-tagg har jag ett attribut som heter typ, och värdet av denna egenskap måste vara text. Så vad sägs om denna första del här? Det första ordet i denna väljare är form så har jag en plats och sedan den här ingången delen. Vad gör det, sätta formen framför den? Detta kommer att i princip begränsa vår fråga. Det kan vara så att vi har några ingångar på sidan som inte är ättlingar till ett formulär. Vad detta kommer att göra är det kommer att säga jag vill bara de ingående taggar som har någonstans ovanför dem någon förälder element i ett formulär. Och så på det sättet kan vi göra dessa mer hierarkiska frågor så att vi inte bara att markera allt matchar en viss väljare. Vi kan typ av begränsning omfattningen av den frågan till något annat. Så nu när vi vet hur man väljer element på sidan, låt oss prata lite om AJAX. AJAX är en fortfarande mycket trendig förkortning som står för Asynchronous JavaScript and XML. Det råkar vara så att XML är bara några sätt att representera data. 

Denna typ av förlorad popularitet nyligen, så på X i AJAX används inte hela tiden. I grund och botten, är att göra det som AJAX tillåter oss att göra HTTP-förfrågningar av sammanhanget av JavaScript. När vi är i vår webbläsare och vi navigera runt sidor och vi klickar på en länk, vad vår webbläsare kommer att göra är att göra en HTTP-förfrågan till vad länken vi klickar. Men det är inte alltid perfekt, för om så är fallet, då som David sa, Vi måste alltid göra användarna klickar på en Submit-knappen eller klicka på en länk för att göra vad som helst hända som kommer att innebära en HTTP-begäran. Så med AJAX kan vi göra dessa förfrågningar på uppdrag av JavaScript. Det innebär när användaren interagerar med sidan eller något händer, Vi kan faktiskt göra en programmatisk begäran till en annan PHP-fil på vår hemsida eller något annat och hämta data som filen spottar ut. Låt oss ta en titt på ett exempel på AJAX. Detta är vår CS50 Finance sida som förhoppningsvis några av oss är bekanta. Om vi ​​tittar på HTML-koden för sidan ser vi här att jag har lagt ett par saker, en som jag har gett denna form ett ID. Jag har sagt id = "form-citat". Jag har gjort detta bara för att det kommer att göra detta till en lite enklare att välja från DOM eftersom jag kan bara göra en mycket enkel fråga. Vad jag vill göra här är att jag vill fixa vissa problem med CS50 Finans. Så om vi går till finance.cs50.net, varje gång jag vill få en offert, måste jag klicka på denna Get Citat knapp, och som Få offert knappen och sedan tar mig till en annan hela sidan. Och om jag vill ha en annan citerar jag måste slå på knappen Bakåt och jag skriver det, Jag får en offert, och jag slog på knappen Bakåt. Detta är verkligen inte den bästa användarupplevelsen. Vem skulle verkligen använda webbplatsen om det är att långsamt få aktiekurser? Så vad vi vill göra med AJAX är att ta bort det steget att gå till en separat sida För att se resultatet. 

Vad vi egentligen bara ber om är att verkligen litet pris, och det är bara en riktigt liten mängd data. Så det finns ingen anledning för mig att gå en annan hela HTML-sidan, hämta en helt ny sats HTML, kanske hämta lite fler bilder, några andra CSS-filer bara för mig att svara på den mycket enkel fråga hur mycket kostar detta bestånd kostnad. Med AJAX kan vi göra detta till en mycket enklare. Vi ser här nere att jag länka i en JavaScript-fil som heter quote.js. Låt oss verkligen öppna upp filen. Inte där. Alla mina JavaScript-filer kommer att finnas i HTML så att webbläsaren kan komma åt den. Då har vi en separat katalog här för JavaScript, och nu här är quote.js. Högst upp i den här filen detta säger här att jag vill vänta på att hela sidan ska laddas innan jag försöker göra något. Varför är det nödvändigt? Det visar sig att nästa sak jag kommer att göra här är att börja leta efter ett element som matchar en viss väljare. Om denna Javascript är någonsin utförs innan detta element laddas på sidan, då allt jag försöker göra inte kommer att fungera eftersom jag ska försöka välja något som inte finns ännu. Så här raden uppe säger att jag vill att du ska vänta tills allt är laddad så vi garanterat att alla element som jag letar efter är faktiskt på sidan. Denna dollartecken här betyder att jag använder biblioteket som heter jQuery. Denna jQuery biblioteket tillåter oss att använda dessa selektorer som vi bara tittat på. Genom att säga $ då passerar in som ett argument här # form-citat, Jag är nu välja den form som vi bara tog en titt på. Nu har jag en representation av den formen i minnet på något sätt. 

På detta objekt nu denna representation av formen, Jag använder nu en funktion som kallas på. Vad denna funktion gör är att det kommer att fästa en händelsehanterare. Om vi ​​ska lyssna efter är submit händelsen. Så när användaren klickar som skicka-knappen eller trycker på Enter, denna händelse kommer att avfyras. Genom att haka in i detta kan jag åsidosätta nu standardbeteendet av formuläret. Utan denna Javascript skulle formuläret lämna allt PHP-fil vi använde i att åtgärder attribut. Men istället, jag säger nu, vänta, vänta, vänta, jag vill inte att du faktiskt göra det. Jag vill att detta ska hända innan du går och försöka lägga till några PHP-fil. Nu vad vill jag göra? Vid denna punkt jag vill använda AJAX på något sätt att ladda i vad priset på aktien är. Det första jag behöver veta är vad lager användaren tittar upp. För att göra det jag ska använda en annan väljare. Detta är den tredje väljaren vi tittat på tidigare. Detta säger att jag vill börja detta formulär element med ett ID form-citat. Sedan någonstans inuti formuläret måste det finnas en ingång inslag som har ett namn symbol. Om vi ​​ser tillbaka på vår HTML, såg vi att vi hade en ingång [namn = symbol]. Det innebär att detta kommer att välja att textruta som användaren skriver in. Det är trevligt. Vi har textrutan. Nu behöver vi bara veta vad som finns inuti den. För att göra det vi kan kalla den här metoden här, detta. Val, och detta säger jag vet vad textruta du har. Jag vill att du berätta för mig vad det är användaren skrivit in i den textruta. Nu har vi en sträng som heter symbol som är lika med vad användaren skrivit in Det är trevligt. Vi kan använda den strängen nu att vår begäran. Detta är en ny funktion här, detta $, utom vi inte längre kommer att välja element, vi kommer att ringa en annan funktion som är till oss av jQuery. Denna AJAX funktion är vad som faktiskt kommer att göra detta HTTP-begäran. Så vi måste berätta det några saker. Det första vi måste säga denna funktion är där jag vill att begäran att gå. Någonstans i mitt projekt har jag den här filen inuti HTML-katalog som heter quote.php. Jag kan komma åt denna fil, såg vi, precis som här, om jag går till localhost / quote.php. 

Jag vill att min JavaScript för att lämna in en begäran till den sidan. Vilken typ av förfrågan nu? Vi såg tidigare att formen har denna metod = "post"-attribut, och det betyder att det kommer att göra en POST-begäran, så det kommer inte att sätta något i URL, snarare än en GET begäran, som bara skulle få sparken om vi bara åt sidan med webbläsaren, till exempel. Nu har vi sagt att jag vill göra en HTTP POST-begäran till en sida som ligger på quote.php. När vi skicka formuläret, minns vi kunde komma åt de ingående delarna inuti formuläret med att $ _POST variabeln. Hittills i berättelsen som vi inte har faktiskt skickat längs data ännu. Vi har precis sagt att vi gör en AJAX begäran och här är den typ av förfrågan vi gör. Nu måste vi verkligen skicka några data till sidan. För att göra det vi kan använda den här egenskapen kallas data. Värdet för den här egenskapen är faktiskt en associativ array. Anledningen till detta är det tillåter oss att skicka mer än bara 1 bit data. Det är därför vi har dessa klammerparenteser här inkapslad i dessa andra klammerparenteser. Tangenterna i dessa associativa arrayer kommer att vara samma sak som de namnet attribut i vårt formulär element. Det betyder att om jag skickar längs en nyckel symbol, det betyder min PHP-sida kan komma åt denna data med $ _POST [symbol] precis som vi gjorde innan när vi skickar ett formulär. Och nu de faktiska uppgifter som vi vill skicka kommer att vara värdet insidan av denna associativ array. 

Vi lagras denna text i en variabel som kallas symbol, och så vi skickar tillsammans nu nyckel symbol och ett värde oavsett användaren skrivit in Nu har vi gjort denna HTTP-förfrågan, vår PHP-fil har utförts, och det kommer att skicka några data tillbaka nu till klienten som bara gjorde denna begäran. Nu måste vi reagera på vad servern sade till oss. För att göra det vi har denna sista egenskap här kallas framgång. Värdet av denna framgång nyckel faktiskt kommer att vara en funktion, och detta är en av de riktigt coola saker du kan göra med JavaScript. Inte bara kan du få Ints eller matriser som ett värde inuti en associativ array, Vi kan också ha en funktion. Så genom att säga framgång, det är min nyckel. Ett kolon säger här kommer värdet, och nu värdet av detta är faktiskt en funktion. Så vi behöver inte ge den här funktionen ett namn i sig. Vi kan bara säga att detta kommer att bli någon funktion. Det kommer att ta 1 argument. Argumentet att denna funktion kommer att vara oavsett servern skickade oss tillbaka från begäran. Precis som när vår webbläsare gör en förfrågan skickar servern något tillbaka och webbläsaren visar den, i samband med AJAX vi bara gjort en förfrågan skickade servern något tillbaka, och nu har vi som representeras som en sträng. Med den strängen skulle jag bara vilja visa det på sidan. För att göra det jag ska ha en sista väljaren. Jag vill välja det element med ID priset. Detta är bara en tom div som jag har skapat på sidan, och jag vill ställa innehållet i den div som oavsett servern skickade oss tillbaka. Jag har faktiskt ändrat quote.php lite. 

I stället för att ringa render och göra lite sida, quote.php nu bara kommer att skriva ut värdet av beståndet som en sträng. Så om du skulle faktiskt besöka sidan, skulle du se just det lilla strängen oavsett aktiekursen är. En sista sak vi behöver göra här är att bara se den här funktionen returnerar false. Vad detta säger är att om jag är inne på en händelsehanterare och att händelsehanterare returnerar false stället för att återvända sant, det betyder att jag inte vill det ursprungliga händelsen att skjuta. I det här fallet, om vi inte hade någon JavaScript och vi lämnade ett formulär, vår webbläsare kommer att säga, "Jag kommer att skicka dessa data tillsammans," och de kommer att skicka dig till en annan sida. Eftersom vi använder AJAX nu, det finns ingen anledning att skicka användaren till en annan sida. Vi ska bara visa resultaten dynamiskt på samma sida. Vi vill verkligen inte att de ska gå någonstans, och jag vill stanna på samma sida. Så genom att returnera false, ser vi till att formuläret inte göra det för oss. Låt oss ta en titt på vad detta egentligen ser ut. Vår offert sidan ser likadan ut. Låt mig dra upp inspektören här nere så att vi kan se vad som händer. Gör det till en lite mindre enorm. Tänk om vi öppnar upp fliken Nätverk, det är där vi kan se alla HTTP-förfrågningar som händer på sidan. 

För en symbol Låt mig skriva in AAPL och klicka Få offert. Nu såg vi att en del av Apple kostar ett visst antal dollar bara dök upp på sidan, men URL ändrar inte alls. I själva verket, här är HTTP-begäran som vi just gjort. Vi gjorde en POST-begäran till quote.php. Som är vettigt. Detta är vad servern skickade oss tillbaka. Det är inte längre denna gigantiska HTML-dokument med bilder och sånt, det är bara en textrad och sedan vi bara visade textraden. Om vi ​​går tillbaka till rubrikerna och se vad vi faktiskt skickade insidan av denna HTTP-begäran, kan vi se här nere att vi skickade längs en nyckel symbol och ett värde på AAPL, vilket är vad användaren skrivit in Det är trevligt, men det är fortfarande lite irriterande. Jag har fortfarande att klicka på denna knapp för att få aktiekurser. Vi är upptagna människor och vi har inte tid att klicka på knappar. Google insåg detta ett litet tag sedan när de genomfört Google Instant. Vad Google Instant gör är som du skriver det börjar bara visa resultat för dig så du behöver inte oroa dig för ens klicka på Sök. Egentligen en rolig historia med anknytning till detta. När Google Instant kom ut, var folk som "Whoa, är detta super fantastiskt." "Det här är så coolt." Och en elev ner vid Stanford som var 19 vid tiden gjorde denna plats som kallas YouTube Direkt. Alla YouTube Direkt gör är att söka effektivt YouTube direkt. Så i stället för att gå till YouTube.com och trycka på sök, När jag börjar skriva in YouTube Omedelbar något liknande CS50, kunde vi se här att det är ett försök att på en långsam Internet-anslutning fylla dessa resultat live. För att göra det vi faktiskt kan göra en mycket enkel modifiering våra quote.js fil. Just nu är vi fästa denna händelse när formuläret skickas. Vi vill egentligen inte göra användaren skicka formuläret längre, så låt oss istället brand denna händelse varje gång användaren trycker på en tangent. För att göra det låt oss först ändra händelsen från underkasta sig keyUp. Det innebär att i stället vänta på formuläret för att skicka, varje gång du trycker på knappen, är något kommer att hända. Det går inte längre att bifoga den här keyUp händelse till hela formen. Vi verkligen bara bryr sig om att sökrutan. 

För att välja det nu kan vi ändra detta vara, snarare än form-citat, form-citat och vi kommer att ha en ingång (type = text) eller vi kan säga (namn = symbol) - vad vi vill. Nu finns det en sista vi måste göra. Tänk här nere när vi sa returnera false Vi sade att vi inte vill att standard händelsen att skjuta. Men det råkar vara så att om vi inaktiverar det nu, vad vi skriver i kommer inte att dyka upp i webbläsaren längre eftersom det skulle vara standardbeteendet att skriva i en textruta. Vi vill inte längre att överskrida detta, så låt oss förstöra denna återgång falskt. Om vi ​​sparar det och ladda om sidan, nu när jag börjar skriva AAPL ser du att aktiekursen i botten här håller på att slutföra automatiskt. Så här är CS50 Finans Direkt. Faktiskt en rolig historia om YouTube Direkt är att eleven bara typ av skrev det som en 1-natt-projektet, och nästa dag var han erbjuden ett jobb som YouTube VD. Så enkelt är det, ni CS50 studenter kan dina sista projekt får du ett jobb på YouTube. Nåt sånt är en riktigt cool idé för ett examensarbete, eller hur? Vi hade några befintliga funktioner som vi ville integrera med. Vi förbättrar användarupplevelsen lite, och plötsligt söker något på YouTube Omedelbar kan vara mycket enklare än att söka efter det på regelbunden YouTube. Så det är AJAX i ett nötskal. 

I de exempel som Josef visade, såg vi en massa autocompletes, och dessa autocompletes är verkligen, verkligen praktiskt eftersom vi inte behöver komma ihåg - Till exempel, om du inte kommer ihåg aktiekursen för Apple och vi vet bara att det är en en något, snarare än att bara säga till mig, "En del av denna sak kostar så mycket pengar" Jag sorts vilja veta vad bestånden börjar med AA. Vi kan göra som verkligen snyggt med Bootstrap biblioteket som redan ingår inuti CS50 Finans. Om du kommer hit till JavaScript-taggen och bläddra ner till Typeahead, Detta är bara en trevlig plugin som någon redan skrivit för oss, och vi kan enkelt använda sin funktionalitet som denna. Jag skrev i ett A och här är en lista över några stater som börjar med A. Låt oss säga att jag tycker att detta är riktigt coolt och det är dags för mig att ta med detta på min sida. Det visar sig att det är riktigt, riktigt enkelt. Vi hoppa över här quote3.js. Min fil ser lite annorlunda. Här nere alla mina AJAX grejer är densamma. Jag vill läsa beståndet data utan att behöva gå till en annan sida. Men nu vill jag använda denna plugin. Bootstrap Dokumentationen har bra exempel på hur just jag kan göra det. Jag vill säga: "Här är ingången som jag vill Komplettera automatiskt på" och jag kommer att kalla denna funktion som kallas typeahead, och det kommer att hantera alla de Typeahead saker för oss. Det kommer att initiera listan kommer den att göra alla våra filtrering. Det enda man behöver veta är vilka uppgifter vi autocompleting på. Så jag fick reda på den här knappen bara genom att läsa dokumentationen och titta på exemplen. Om jag ger det en nyckel källa, värdet på denna nyckel är bara några rad saker jag vill Komplettera automatiskt. Denna variabel kom från denna andra fil. Jag öppnar symbols.js. 

Detta symbols.js är just detta verkligen, verkligen stora array som innehåller strängar av alla dessa lager symboler från NASDAQ. Om jag vill gå tillbaka till HTML så jharvard, vhosts, globalhost, html, mallar, quote_form. Eftersom det nu heter quote3.js, låt mig ändra JavaScript-filen jag även här. Nu har jag quote3.js, så jag kommer att ladda i den separata JavaScript-fil, den som har det Bootstrap Komplettera automatiskt. Nu när jag hoppar tillbaka till webbläsaren, ladda om sidan, och jag börjar skriva aa, Det är min Komplettera automatiskt. Och det var verkligen så enkelt är det. Jag hade 1 kodrad som bara sa: "Här är de saker jag vill Komplettera automatiskt på" och plötsligt har jag detta verkligen, verkligen trevlig funktionalitet med inte en massa ansträngning alls. När du utvecklar webbplatser och i synnerhet den främre änden sidan av saken, du kommer att hitta så är fallet mycket. Det finns mycket, mycket, mycket riktigt coola fria bibliotek ute som gör det super lätt att göra saker som denna. Kan någon komma på några nackdelar med att helt enkelt autocompleting på denna stora lista över symboler? Vad kan vara något som är inte bäst med detta synsätt? Ja. >> [Elev] tid, om du har en hel del [ohörbart] Ja. Just nu är vi laddar ner denna enorma JavaScript-fil och det finns en hel del symboler. Och så om vi har massor av saker, det kan typ av ökad latens, inte bara leta men också ladda ner själva filen. Jättebra. Något annat? Just nu finns det ingen verklig känsla av relevans. Om jag skriver i ett A, de företag som visar upp här kanske inte de mest populära företagen som börjar med A. 

Innan jag kommer till Apple, kan det ta lite fler tecken att hitta vad jag letar efter. Denna Komplettera automatiskt har inte denna känsla av relevans. Det kommer bara att säga, "Allt som matchar jag ska visa." Istället för det, skulle jag vilja att på något sätt integrera viss betydelse i mina sökningar. Om jag går hit till Yahoo! Finans, finance.yahoo.com, Om jag försöker att ange en symbol på Yahoo Finance sida och jag börjar skriva goog, jag har denna fina lista över saker. Uppenbarligen ser det ut som Yahoo Finance gör något mer smart här. De har viss relevans och de har också ytterligare information som namnet på beståndet. Det är något som jag inte riktigt kan få med bara min lagerlista av symboler. Jag vill ha det här och så ska jag ta den. För att göra det vi gör ett par saker. Vi öppnar först upp inspektören på denna sida eftersom vi såg att denna sida inte omladdning alls, så det är förmodligen med AJAX något att ladda sina data. Vi kan ta reda på vilka uppgifter det laddar. Om jag klickar på fliken Nätverk, dessa kommer att bli alla de förfrågningar som börjar bli avskedad. Nu om jag skriver i goo, kan vi se att jag bara fick en ny HTTP-begäran. Detta är förmodligen där att data kommer från. Visst nog, om jag tittar på denna URL, vilket är lite konstigt namn, Vi kan se att det är precis där Yahoo sänder ut sina data från. 

Jag har skapat en separat fil som heter suggest.php som är mycket lik i anden till lookup funktion. Det är i princip kommer att göra en förfrågan till Yahoo URL, få tillbaka några uppgifter, och skicka tillbaka den till mig. Nu, i stället för att använda denna stora, enorm lista med symboler, Jag kan använda Yahoos fina relevans saker, och jag behöver inte ladda ner den massiva JavaScript-fil. Jag kommer bara att dra ner de faktiskt relevanta börssymboler. Låt oss hoppa in i det. Så html, js. Vi är nu i quote4. Nu är vi inte längre använder den stora listan över JavaScript-filer. Men det finns en liten typ av design problem här. Vi har sagt att A i AJAX är asynkron. Vad detta innebär är att när jag gör en AJAX begäran, så här på rad 8, det är där min AJAX begäran faktiskt sparken. Låt oss säga nu har jag lite kod här nere som kommer att göra en del saker liknande uppmärksamma användaren eller ändra något på sidan. Vad kommer inte att hända är att webbläsaren inte kommer att vänta på denna begäran att fortsätta innan man kommer ner och slå denna linje. Det är den asynkrona delen. Det kommer att göra denna begäran och säga, "När du är klar, "Komma tillbaka och kalla den funktionen som jag sa till dig att ringa in till framgång." Det betyder att vi inte bara kan ladda ner alla bestånd i förväg. Vi måste göra ansökan och vänta på att något ska komma tillbaka. Det betyder att innan, kan vi tala om helt enkelt Bootstrap, "Här är en lista över saker som jag vill att du ska Komplettera automatiskt på." Vi kan inte längre göra det längre eftersom vi inte vet vad vi vill faktiskt Komplettera automatiskt. Lyckligtvis trodde Bootstrap detta eftersom de är smarta killar borta, och de gav oss faktiskt ett annat sätt att ladda denna Typeahead plugin. Förut var värdet av denna källa egenskapen just denna stora samling av saker att Komplettera automatiskt. 

Nu egenskapen source är faktiskt en funktion, och syftet med denna funktion är att räkna ut vad saker till Komplettera automatiskt är. Hur det kommer att lista ut är att det kommer att ställa Yahoo! Finans vad de bästa saker att autocomplete är. För att göra det jag ska göra en mycket likartad AJAX begäran. Jag ska begära den här sidan på suggest.php. Jag vill skicka längs symbolerna fortfarande. Och nu min framgång, berättade Bootstrap dokumentationen mig att för att fylla den lista över saker, allt jag behöver göra är att passera i denna array nu till callback-funktionen. Men vänta lite. Om detta är tänkt att vara en array och AJAX skickar mig tillbaka texten, Hur är det möjligt? Detta introducerar ett nytt sätt att utbyta data kallas JSON. I det här fallet vi inte bara skicka tillbaka en enkel textsträng. Nu är vi har att göra med denna mer komplexa lista av börssymboler. Dessa lager symboler kan även innehålla saker som bolagets namn eller löpande priser. Bara med hjälp av en stor lång sträng som inte är formaterad på något förutsägbart sätt kommer inte att vara det bästa sättet att få dessa data från Yahoo server för mig på ett sätt som jag lätt kan förstå. JSON är en teknik som utnyttjar hur vi skapar associativa arrayer i JavaScript. Detta ser ut som en JavaScript associativ array, och i själva verket är det för att det är. JSON står för JavaScript Object Notation. Detta är i grunden en överenskomna format för överföring av data och tillbaka. Här i JSON-objekt eller denna JSON associativ array skickar mig några data om en kurs. 

Nycklarna till denna array är saker som kurs som har ett värde på CS50, och här nere kan vi se att jag kan ha ett värde som är en matris. Jag behöver inte göra saker som parse ut strängar och leta efter kommatecken och gör galna saker. Eftersom detta uppges i denna JSON-format, JavaScript och jQuery redan funktioner för att konvertera en sträng som ser ut så här JSON till en verklig JavaScript associativ array att vi kan arbeta med. Att göra det är så enkelt som att säga att det inte längre är här filen, suggest.php, skicka mig tillbaka bara en textsträng, men jag vet att det kommer att skicka mig tillbaka JSON. Det innebär att det JSON kan omvandlas till en JavaScript associativ array. Och så jQuery, skulle jag vilja att du gör det för mig. Det innebär att detta svar parametern här, Detta är inte längre bara en sträng. Eftersom vi har berättat jQuery som kommer här några JSON, jQuery kommer att vara smart nog att säga: "Du ville JSON?" "Jag ska omvandla det till en associativ array för dig." Låt oss verkligen ta en titt på fliken Nätverk när vi har quote4.js. Vi ska ändra på detta och ladda om sidan. Nu ska jag skriva in en-en igen. Jag har gjort ett par förfrågningar till suggest.php, men nu detta svar, snarare än bara strängen, det JSON. Så jag har en öppen klammerparentes säger, "Här kommer en associativ array." 

Den första och enda nyckel av denna associativ array kallas symboler, och då här är en samling av alla relevanta symboler kommer nu från Yahoo Finance, inte från den gigantiska lista. Det är hur jag helt enkelt kan fylla denna automatisk komplettering plugin med vissa uppgifter som inte är kommer från en lokal fil som redan är förutbestämda men från något annat. Det visar sig att vi faktiskt kan dra nytta av en teknik som kallas JSONP, eller JSON med vaddering, som kommer att eliminera denna suggest.php mellanhand. Men istället för att göra det, låt oss istället ta en titt på hur jag kan förbättra det ännu mer. Jag gillar verkligen Bootstrap är Typeahead. Det är riktigt nice. Men vi får bra på JavaScript och vi vill sorts göra detta själva, kanske ta en titt på vad denna plugin kan göra. Låt oss inte längre använda Typeahead sak, och låt oss försöka göra denna lista med förslag bestånd själva. Här i quote6.php vi ska börja på samma sätt. Varje gång någon skriver något, vill vi göra en AJAX begäran. Detta liknar vår ursprungliga CS50 Finans Direkt. Snarare än att göra en förfrågan till quote.php, Vi bevakar nu gör en begäran till samma fil som tidigare, detta suggest.php, som just kommer att dra data från Yahoo Finance. 

Återigen, vi förväntar fortfarande JSON, men nu då Typeahead inte gör detta för oss, Vi måste också skicka med det värde som är inne i den aktuella textrutan. Nu vet vi vad be Yahoo Finance för, och så nu här är den funktion som vi vill köra när begäran är klar. Vi har inte plugin för att göra listan för oss, så här är där vi faktiskt kommer att bygga en lista med förslag. För att göra det, ungefär som i PHP vi sammanlänkade dessa stora strängar av HTML då vi tryckt dem, kan vi göra exakt samma sak i JavaScript. Först ska vi börja här strängen kallas förslag, och denna sträng bara kommer att innehålla lite HTML. Vi vill att det ska vara en lista över saker, så vi kommer att börja med den här listan tagg, och nu ska vi iterera över alla symboler som returnerades tillbaka till oss. Kom ihåg att vi har sagt dataType: "JSON", detta är inte en sträng. Detta är redan en matris för oss. Det är verkligen coolt. Vi kan helt enkelt säga: "Jag vill att du bifoga en lista element." Vi sätter den i ett en del av sidan av det, Vi ska ge det en klass av förslag så att vi vet vad det är, och nu här är den symbol som vi fick tillbaka från Yahoo Finance. 

När vi har skapat ett element för varje symbolerna vi har fått tillbaka, Vi vill bara stänga listan. Så nu förslag representerar denna lilla HTML-fragment som när den tas på en sida kommer att bli en lista över saker som vi letar efter. Nu ska vi faktiskt lägga det på sidan. För att göra det jag faktiskt har skapat en annan tom div och jag har gett det en ID förslag. Ungefär som vi satt innehållet i div som skulle visa priset på stockdata, vi nu bara vill ställa innehållet i denna div till vad denna sträng är som innehåller dessa symboler. Genom att använda denna HTML metod är detta förslag variabel denna sträng, en sträng med HTML. Jag vill att du tar den HTML och lägga den inne i div kallas förslag. Vi har precis bifogas något DOM nu. Vi har lagt till några nya element till DOM att vi nu kan visa på sidan. Låt oss se vad detta ser ut. Om vi ​​sätter i quote6 och nu vi kommer tillbaka, nu när jag börjar skriva AAPL, har vi inte längre att Bootstrap Komplettera automatiskt, men vi har nu denna lista som vi gjorde själva. Detta är lite fulare än Bootstrap Typeahead, till exempel, men det tillåter oss att göra en annan sak. När vi tittar på den Bootstrap plugin, såg vi att när vi autocompleted, var en av Komplettera automatiskt värdena AAPL. Som kanske inte så bra. Som användare kan jag inte omedelbart känner igen alla börssymboler. Vad jag är nog mer sannolikt att känna igen är bolagets faktiska namn. Så skulle det inte vara riktigt bra om istället för att säga AAPL Detta sa något i stil Apple Inc. Eftersom vi har rullat detta själva, kan vi verkligen lätt att göra det. Vi öppnar upp vår sista citat fil här, så quote7. 

Samma sak. Jag har precis skapat en annan PHP-fil som kommer att återvända till oss mer än bara symboler. Det kommer också att ge oss tillbaka bolagets namn. Och så vi gör samma sak. Vi gör en AJAX begäran. När begäran har slutförts kommer vi att utföra denna funktion här, och denna funktion kommer att bygga upp en stor sträng av element. Men skillnaden här är att värdet av dessa listor är inte längre bara en symbol, det är nu namnet. Så vi har ett litet problem. När vi använder vår lookup, måste vi på något sätt låta det symbolen. Vi kan inte passera lookup något som Microsoft Corporation. Vi måste ge det MSFT. När vi skriver HTML, vi har massor av trevliga inbyggda egenskaper. En A kan ha samband med det en href eller en klass. Men vad vi verkligen behöver nu är att var och en av dessa länkar att ha ett lager som förknippas med den. Det finns ingen inbyggd HTML-attribut för lager symbol, men lyckligtvis låter HTML5 oss att skapa våra egna attribut för att vara vad vi vill. Genom att säga datasymbolsignal har jag infört ett nytt attribut vars namn jag gjorde bara upp, och det är okej eftersom jag inleds det med dessa data. Vi kommer att lagra inuti det symbolen från beståndet nu. Vad detta betyder är att även om vi visar värdet av bolagets firma insidan av vår Komplettera automatiskt, vi minns fortfarande en symbol som är associerad med varje företag. Det sätt vi gör som är inne i detta element i sig. Så det betyder att vi måste göra en ytterligare ändring. När vi klickar på det nu, måste vi faktiskt dra nytta av symbolen attribut snarare än bara dess värde. Om vi ​​tillbaka upp, fäster vi en händelsehanterare för förslag. När en av dessa förslag klickas nu vill jag göra något. Vad jag vill göra är att ändra värdet på denna inmatningsfältet. Nu vill jag ställa samma val funktion. 

Så utan några argument här val funktionen återgår till vad som är redan i textrutan, men om du ger det en sträng, det kommer att ta den strängen och lägg den i textrutan. Jag väljer sin textruta på samma sätt. Det heter symbol inuti form-citat. Nu är jag skickar det värdet på attributet data-symbolen. Denna sak här är nytt, denna $ (denna). Vad detta handlar om är det element som klickade. Vi kan här se att vi inte fäster en click-händelse till varje element med en klass av förslag individuellt. Snarare vi närmar det lite annorlunda. Istället vi säger när något insidan av denna förslagen div, vilket är minns bara behållaren för listan, om något inuti denna div klickas och har en klass av förslag, Jag vill att denna händelse att skjuta. I grund och botten vad detta innebär att vi kan göra är att vi kan återanvända samma händelsehanterare för alla de saker i listan. Så vi behöver inte ha en händelsehanterare för det första elementet och en annan händelsehanterare för det andra elementet. Vi kan istället säga: "Jag vill ha samma händelsehanterare gälla allt i min lista." Men vi måste på något sätt veta vilket element klickade. Detta "detta" nyckelordet representerar just detta. Detta är objektet som just klickade av användaren. Om jag bara klickade den 3: e länken, utgör detta den del av det 3. Länk, vilket betyder att jag kan få sin attribut, data-symbol, som vi vet måste innehålla den symbol som är knutna till företaget jag klickade. Om vi ​​hoppar tillbaka till vår ekonomi sidan, Vi kan nu se att när jag börjar skriva något som MSFT, vi inte längre får bara börssymboler, Vi bevakar nu få verkliga företag. Men när jag klickar på en av dessa företag, kan vi se att vi faktiskt är fylla textrutan inte med namnet på företaget men oavsett var lagras i dessa uppgifter attribut. Och så om jag inspektera faktiskt en av dessa element genom att högerklicka på den och klicka Inspektera element kan vi faktiskt se hur det ser ut. 

Kom ihåg att detta är något som vi skapat i detta for-slinga När vi byggde upp den strängen av HTML. Vi kan här se att denna datasymbolsignal har värdet MSFT, vilket är bra. Det är vad vi väntade. Det är symbolen och det är hur vi fick det värde som vi behövde för att använda insidan av denna textrutan. Det räcker för citatet form eftersom det är ganska tråkigt. Låt oss bara göra några snabba förbättringar i vår portfölj sida. Om du har använt CS50 Finance för en stund och du börjar köpa och sälja en massa lager, småningom denna tabell kommer att bli ganska stor, och du kommer att ha en börsinformation, naturligtvis. När bordet är verkligen, verkligen stora, skulle det vara användbart för användaren att försöka att söka över den. Inne i sökrutan om jag börjar skriva något liknande Disney och letar efter min Mickey Mouse lager, kan vi se att tabellen nu filtrering baserat på vad jag just skrev i. Denna funktion ser super komplicerat, men det är verkligen, verkligen lätt med jQuery och JavaScript. Denna portfolio.php filen innehåller en JavaScript-fil som heter portfolio.js. Låt oss ta en titt på det. Så html, js, portfölj. Här är där vi gör att söka på bordet. Det första jag måste göra är fästa en händelsehanterare som textruta eftersom vi vet att vi vill att våra filtreringsfunktion att skjuta varje gång användaren trycker något eftersom vi inte har tid för Search knappar. Det första vi behöver göra är att räkna ut vad användaren söker efter, precis som vi gjorde förr. Nyckelordet this refererar till det aktuella elementet användaren interagerar med. 

Eftersom användaren interagerar med sökrutan $ Detta representerar sökrutan så this.val ger oss vad som finns inuti sökrutan användaren för närvarande skriver. Så, nu vad vi vill göra som vi vill iterera över alla rader insidan av vårt bord. För att välja alla rader i vårt bord, gav jag att lägga fram ett ID tabell portfölj, och varje rad representeras av en TR-elementet, så detta väljare kommer att återvända till mig en stor uppsättning av alla rader i mitt bord. Nu vill jag att iterera över den arrayen. Jag kunde du en for-slinga, men jQuery faktiskt ger oss den fina funktionen kallas "varje." Vad varje gör är var tar ett argument, och argumentet är en funktion. Vad det kommer att göra är att det kommer att tillämpa denna funktion varje element inuti denna lista. Den här funktionen tar ett argument som är e, och när denna funktion utförs, Den här e kommer att ersättas med den första raden, sedan den andra raden, och sedan den tredje raden. Genom detta sätt är det samma sak som att köra en for-slinga och sedan räkna det aktuella elementet utifrån indexet insidan av din för slinga. Vid varje iteration, för vart och ett av dessa element i tabellen, Jag vill kolla om texten i elementet - texten i cellen inuti raden - matchar vad jag söker. Denna stora lång rad av kommandon är hur jag kunde göra det. Först igen, avser detta nu - eftersom det är inne i en ny funktion - detta är nu den aktuella raden i tabellen. Jag vill ta den aktuella raden i tabellen, och jag vill få alla sina barn. Kom ihåg att DOM ett hierarkiskt träd, vilket innebär att element har ett antal barn. 

Detta. Barn funktionen kommer att återvända till mig tillbaka en rad av alla element som är barn, i detta fall, en rad i tabellen. Detta är helt enkelt cellerna inne i raden. Jag vill bara söka på den första cellen. Detta. Första funktionen, säger ge mig det första elementet i den arrayen. Då funktionen TEXT säger får mig exakt vad som finns inuti för den cellen eftersom jag vill söka på den texten. Slutligen, låt oss omvandla den till gemener, så att vi kan göra text skiftlägeskänslig frågor. Slutligen vill vi se om den strängen inuti en tabell innehåller strängen vi söker efter. Den indexOf funktionen i JavaScript gör just det. Det säger oss huruvida denna sträng innehåller en annan sträng. Om det är sant att cellen innehåller vad jag söker, då vill jag vara säker på att det är visat. Showen Metoden kommer att säga, "Visa elementet." Om så inte är fallet, innebär vad jag letar efter finns inte inom den raden, så jag vill dölja är från användaren. Som uppnår det trevligt filtrering effekt där inte längre ser vi hela tabellen. Om du är intresserad av hur man gör detta ticker också, Vi kommer lägga källan på nätet. Men det är väldigt enkelt. JQuery har awesome metoder för dessa animationer och manipulera CSS-egenskaper. Så, det är det för mig. 

Vad ligger då framför oss? Som du ser i några dagar, är den slutliga projekt förslaget betalas. Den slutliga projekt Förslaget kommer att ställa några frågor, men bland dem kommer att vara tre milstolpar - en en "bra" milstolpe, en bättre milstolpe, och en en bäst. Tanken är verkligen hjälpa er ange dina förväntningar så att minimalt du blir nöjd med utgången på din slutgiltiga projektet och det kommer att vara "bra" så långt som du är orolig. Men sedan i syfte att få dig att nå bara lite till något bättre eller något bäst, vi sorterar också driva dig mot det också. Det CS50 Hack-a-thon, tiden är ett par veckor. Vanligtvis gör vi detta på ett lotteri enligt grund, eftersom ränta, men oddsen är vi tar några hundra av oss i flygbussarna från Harvard Square ner till Kendall Square där Microsoft har en vacker anläggning träffande kallas "NERD" - New England forskning och utveckling Center. Vi kommer dit runt 8 pm Vi får lite mat. Omkring 01:00 får vi lite mer mat. Runt 5 am om du fortfarande vaken vi huvudet över till IHOP eller ta dig tillbaka till campus. Målet finns att dyka in slutliga projekt vid sidan av klasskamrater och personal. Sedan ett par dagar senare är det CS50 mässan, som verkligen är tänkt att vara en möjlighet för er att visa upp ditt arbete och prestationer för terminen medan gnugga axlar med varandra och få en känsla för vad alla gjorde. Med det sagt, stort tack till Tommy och Josef, och vi kommer att se dig på måndag.  [Applåder]