[Powered by Google Translate] [Uke 9, Fortsatt] [David J. Malan - Harvard University] [Dette er CS50. - CS50.TV] 

Dette er CS50. Dette er slutten av uke 9. Tusen takk. Slutt. Uke 9. Jeg fikk den. I dag fortsetter vi vår samtale om webprogrammering med et øye mot det endelige prosjektet, ikke fordi du trenger å gjøre noe web-basert for endelig prosjekter, men fordi enten for endelig prosjekter eller etter CS50 dette er absolutt den retningen som moderne programvare går. Og likevel er det faktisk ikke en enkel ting. Faktisk er en av de vanskeligste ting å gjøre det aspektet av motivet. 

For eksempel ved utforming mener vi faktisk får brukergrensesnittet eller brukeropplevelsen høyre. Jeg daresay - og vi vet fra en nylig problem sett når noen av dere luftet dine gripes om noen stykke programvare eller maskinvare som infuriates deg, enten på eller utenfor skoleområdet - det er en rekke nettsteder der ute, det er mye hardware der ute, den slags suger. Men realiteten er at det å gjøre ting som er lett å bruke, men er likevel kraftig er en svært vanskelig utfordring. Så i dag spurte jeg Joseph og Tommy å bli med meg opp her slik at vi kan ha en samtale, både om utforming og hva slags tankeprosesser bør begynne å gå gjennom hodet ditt når du designe din endelige prosjekter, dine fremtidige bestrebelser. Og deretter med Tommy hjelp vil vi se på noen av gjennomføringen detaljer. Hvordan kan du ha noen visjon på papir eller i tankene dine som du deretter kan utføre programmatisk ved hjelp av noen av teknologiene og teknikker har vi nettopp begynt å snakke om, nemlig JavaScript og noe enda nyere, nemlig AJAX, asynkron JavaScript. Som lar deg lage alle de mer dynamiske av et brukergrensesnitt ved henting mer og mer data gradvis fra en server. Så vi får se noen av disse tekstutdragene som godt i dag. Som en side, hvis du er interessert i å konsentrere seg i datavitenskap eller grunnfag i informatikk, vet at dette fredag ​​midt på dagen i Maxwell Dworkin 221 vil det være en pizza hendelse hvor du kan lære litt mer om informatikk. På vei ut døren i dag vil du være i stand til å plukke opp en uoffisiell guide til CS ved Harvard. Vil vi sette det på søppeldunker utenfor i hoftehøyde slik at hvis du ønsker å ta dette og lære litt mer om CS, som vil være der for deg som det var i uke 0. Også hvis du ønsker å bli med oss ​​for CS50 lunsj denne fredag ​​på 01:15, hodet til cs50.net/lunch. Uten videre, jeg gir deg undervisning stipendiat Joseph Ong. Hei. [Applaus] Takk. Første gang jeg hørte om design var i en klasse her kalt CS179. 

Professoren ved tiden fortalte oss historien om en annen professor som hadde gått til et hotell og brukte kraner. Kan noen fortelle meg hva de to knottene på venstre og høyre gjøre? [Student] Varmt og kaldt. >> Varmt og kaldt. Bra. Hva du vanligvis forventer, ikke sant? Dette professor etter bruk av kranen ønsker å ta en dusj, og han fortsetter å bruke dette. Han mener den venstre og høyre side er for varmt og kaldt, ikke sant? Men kan noen fortelle meg hva disse egentlig gjøre? Noen hender? [Uhørlig student respons] >> Ett forslag er? [Uhørlig student respons] >> Temperatur? Så en av dem styrer temperatur og de andre kontroller? >> [Student] Vanntrykk. Vanntrykk. Bra. Dette professor går inn i dette, og tro at de kontrollerende varmt og kaldt, slår den rette, som han mener er for varmt, hele veien opp fordi han ønsker å ta en varm dusj. Vel, disse ikke helt samsvarer opp, så han får ikke dette veldig morsom opplevelse av å være i en kald dusj, og vi vet alle hvordan det føles. Dette er et eksempel av en design feil. Hva jeg mener med det er hans forventning fra kranen samsvarte ikke hva som kom ut av dusjen, som er slags uheldig for ham. Så dette er et eksempel på en design feil som skjer i det virkelige liv. Men vi ser alle slags andre de også. Vi er nok ikke fans av MBTA systemet. Dette er en metrostasjon systemet faktisk i London, som sier: "Denne knappen er ikke i bruk." Hvorfor er det selv på det? Hvorfor gjør vi selv bryr? Da jeg var gutt, som er den teknisk kunnskapsrike i huset, når maskinen skulle krasje, ville min mor kommer til meg, viser meg denne skjermen og spør meg hva som skjedde. 

Selv vet jeg ikke hva dette betyr. [Latter] Hva? [Latter] Noen ganger føler vi programvareutviklere er bare trolling oss. Som brukere er vi som "Hva er det som skjer? Noen fortelle oss." Alt dette kommer ned til et spørsmål om design. Design, som vi kan se, er ikke rent om estetikk, det handler ikke om hvordan ting ser ut. Vi ser her at denne lille pop-up over her faktisk ser ganske fin. Den har en skygge i bakgrunnen, har det landegrensene radier skjer. Det er litt pen. Det er ikke veldig bra designet fordi det ikke er veldig brukervennlig. Den lille pop-up som kommer opp egentlig ikke gi meg noe informasjon om hva som skjer, betyr det ikke fortelle meg noe som brukeren om hvordan å komme seg fra denne feilen. Vi ønsker å tenke på ting som design er det ikke. Først, det er ikke estetikk. Det er heller ikke stuffing app med tonnevis av unødvendige funksjoner. Hvis du er en thailandsk restaurant, har du sannsynligvis ikke vil være en tannlege på samme tid. Og med Facebook Spørsmål, ikke at mange mennesker brukt det og det var egentlig ikke i kjernen av hva de var å bygge. Og så er det fint å tenke på ikke så mye mengden av de tingene at du setter på søknaden, men kvaliteten og hvordan du gjør det brukeropplevelsen bedre ved å faktisk bedre på det du allerede har. 

I et nøtteskall, forteller utforming oss hva vi bør bygge. For eksempel, hvis vi bygger noe som lar oss søke opp ting, som Google, for eksempel, bør vi gjøre ting på en måte som krever at brukeren til å ta mange klikk for å komme til det de ønsker, eller skal vi gjøre det på en måte, for eksempel med Google Instant eller autofullføring som lar oss komme til våre resultater raskere? Engineering innebærer, som Tommy vil vise deg, faktisk bygge det. Det er mange typer design. For eksempel, hvis du bygger noe distribuere noe i et tredje verden land der det ikke er mye strøm eller at mye teknologi, du må lage hva du bygger på en måte som lett gir tilgang til folk der. Men hva slags andre design beslutninger kan det være eller kan være involvert i noe som dette? Ja. Jeg ser en hånd. [Uhørlig student respons] >> Høyre. Akkurat. Tilgjengelighet er en ting. Mange tenker ikke: "Hva med brukerne mine?" som ytterpunktene av enten spekteret. Jeg har brukere som kan ha funksjonshemninger som jeg ikke tenker på og jeg bare tenker på å designe for den generelle bruker. Internett er tilgjengelig for alle i dag, og jeg skal designe for dem også. Hva slags andre design beslutninger kan du gjøre? Ja. >> [Student] Kostnad. Koste. Veldig bra. En annen ting vi kan basere våre design beslutninger på er pris. Hvis vi er en bedrift du ønsker å bygge noe som ikke tar mye koster å produsere men kan selge til en spesielt høy pris eller kan få oss noen fortjeneste. 

Disse er alle forskjellige typer design, men når vi bygger noe på Internett eller når vi bygger noe som sannsynligvis ikke koste så mye å bygge opp nå, som Internett-applikasjoner - du trenger ikke å kaste mye kapital inn i det for å lage noe som faktisk fungerer - hva vi er mer bekymret for er brukeropplevelsen. Vi kaller dette brukersentrert design. Egentlig hva brukersentrert design innebærer er å sette dere selv i skoene til brukerne. Hvis noen registrerer seg for hva jeg bygger, de har tydeligvis kommet til min bestemt applikasjon med et mål i tankene, med en oppgave de ønsker å fullføre. Og din jobb er ikke bare å hjelpe dem å fullføre den oppgaven men å hjelpe dem å fullføre den oppgaven på en måte som er effektiv, intuitiv, og som noen person sa der, tilgjengelig. Hva betyr effektivitet? Effektivitet betyr hvor raskt gjør fullføre min bruker oppgaven gitt min grensesnitt. Tar det mange klikk for dem å komme seg fra ett sted til et annet? Er det kjedelig? Har de å utføre mange repetitive oppgaver? Vi ønsker å gjøre denne prosessen så effektiv som mulig slik at de ikke trenger å gjøre denslags. Som for intuitiveness, er at, for eksempel, hvis en bruker ser opp min grensesnittet, er det lett for dem å komme seg fra sted til sted? Er det lett for dem å finne ut hva de har å klikke i grensesnittet min for dem å nå målet eller oppgaven som de ønsker å oppnå? 

Og til slutt, som en person sa over det, er tilgjengelighet svært viktig. [Mannlige høyttaler] Det gjelder tilgjengelighet for ting som syn, liker hvordan jeg faktisk designe noe for noen som er blind? Oh. For folk som ikke kan se i det hele tatt, har vi noe som heter skjermlesere. Hva du bør gjøre er at du bør bygge ditt nettsted på en måte som for eksempel bestemte teknologier hva vi kaller - Det er mange ting nå. Jeg tror det er skjermlesere kalt JAWS. Mange av disse tingene er avhengige av det vi kaller området regler for å kunne lese ut til brukeren hva som er tilstede på siden. For dem som ikke kan se, må du sørge for at disse skjermlesere kan faktisk plukke opp innholdet på siden, og kan faktisk vise brukerne, Hvis du ikke kan se, i det minste du kan fortsatt forstå innholdet på siden. Ja. Okay. Nok snakk om god design. La oss snakke om dårlig design. Dette er ting som du ikke bør gjøre. Kan noen fortelle meg om sine erfaringer med Craigslist og hva de tror er ikke så stor om dette design? Ja. >> [Student] Jeg tror det er altfor mange ord i ett område. For mange ord, ikke sant? Helt overveldende. Du kommer til denne siden, og du er møtt med en hel haug av ting her oppe som kanskje ikke engang noe for deg. For eksempel, du bor i en stat som ikke begynner med denne bokstaven. La oss si du bor i Texas eller noe. 

Du må bla hele veien ned på siden for å komme til det stedet du er på. Jeg er fra Boston, så la meg se i Massachusetts. Hvor er Massachusetts? Å, det er akkurat her. Å, det er Boston. Okay. La oss se på Boston. [Latter] Ganske overveldende, ikke sant? Awkward ting der borte. [Latter] La oss si jeg leter etter et sted å bo. Hvor mange mennesker har faktisk brukt Craigslist? Tonnevis av deg. Det er ganske dårlig måter å se på dette, men la oss se på dette. Hva er forskjellen mellom img og bilde? Kan noen fortelle meg? Det er faktisk ingen forskjell. De mener akkurat det samme, men de har forskjellige etiketter for dem for noen grunn. Hvis jeg klikker på har bilde, skjer det ingenting på siden. Jeg må faktisk klikker på Søk på nytt for at noe skal skje. Hva kan være et bedre design beslutning som kan gjøres der? Hvis jeg klikker på dette filteret, jeg sannsynligvis vil filtrere etter en bestemt handling eller den aktuelle kategorien. Så i stedet for å måtte trykke Søk igjen, kunne jeg bare automatisk gjøre filtrering slags Google stil der de gjør det umiddelbart. [Malan] Men danner ikke som vi har sett dem så langt må være fysisk sendes ved å treffe Skriv inn minst eller klikke på en knapp? Som du har sett dem så langt, har du faktisk nødt til å klikke Send å gjøre disse tingene. 

Men som Tommy vil vise deg i et sekund, det er faktisk måter for deg slik at når du klikker på at ting kan automatisk sende det vi kaller en AJAX forespørsel og få data tilbake og filtrere resultatene umiddelbart. Det er tonnevis av ting som er galt med dette grensesnittet. [Malan] Kan du søke etter Cambridge? Det er noe litt avvikende her hvor du bryr deg om Cambridge og likevel du får Westford, Spring Hill, West Newton og lignende. Sannsynligvis ikke ideelt. >> Sannsynligvis ikke ideelt. Hvordan kan jeg være i stand til å gjøre brukeropplevelsen bedre på denne siden? Ja. >> [Student] Instruksjoner. Okay. Instruksjoner på hva slags følelse? [Student] For eksempel, en ting for første gang brukere som ikke engang vet hva Craigslist er eller du ikke vet hva du skal gjøre. Høyre. Så forklare hva Craigslist er på denne siden er viktig. Vi kan faktisk fortelle brukerne hva denne siden er faktisk for. Hvis jeg bare besøker dette, ser jeg en hel haug av steder. Jeg vet ikke engang hva de betyr. Men enda viktigere, bare se på dette grensesnittet, husker jeg måtte rulle nedover massevis av ting å finne et bestemt samfunn at jeg faktisk brydde seg om på dette. Hva er en raskere måte jeg kunne gjøre det? Ja. [Student] Del dem opp i øst, vest regioner. >> Ok. Jeg kunne dele dem inn flere kategorier som kan hjelpe meg raskere avgjøre hvordan komme til det aktuelle stedet. [Student] Sett en drop-down listen. >> Høyre. Okay. Jeg kunne bruke en drop-down menyen fordi vi har et fast sett av ting og vi kunne vise dem i en drop-down menyen. På den måten tar ikke opp så mye plass på skjermen. Men enda bedre enn det, hva kan vi gjøre? Ja. >> [Uhørlig student respons] >> Kan du si det igjen? >> [Student] søkeboksen. Ja, en søkeboks. Det er flott. Hva vi faktisk kan gjøre er hvis vi ser tilbake på lysbilder, søkeboksen. Autofullfør. Svært enkel måte å søke gjennom resultater som du vet er i et sett. Hvis jeg begynner å skrive BO, bare vise meg alle resultater som har BO innsiden av dem. På den måten jeg kan veldig lett finne den bestemte jeg ønsker å gå til i stedet for å måtte bla gjennom dette virkelig stor liste. 

Disse er alle slags virkelig lavthengende frukt som noen som gjennomfører Craigslist kan faktisk gjøre for å gjøre opplevelsen på nettstedet mye bedre for deres bestemt bruker. Okay. Nok snakk om dårlige nettsteder. La oss snakke om Facebook. Da Facebook kom ut, og spesielt Facebook-bilder, Det var massevis av andre tjenester på den tiden som kunne gjøre akkurat de samme tingene. De kunne organisere bildene dine i album. Hva du kan gjøre er at du kan organisere dem i sett også. Du kan organisere dem etter dato. Du kan gjøre alle disse spesielle ting. Men vet noen hva som gjorde Facebook bilder eksplodere på den tiden den ble utgitt? Ja. >> [Student] Merker. >> Tags. Akkurat. Vi har Milo over her, som er vår hund maskot med at CS50 halstørkle. Du kan se at vi har denne merking i midten. Og hva gjorde Facebook-bilder så interessant fra et usability ståsted er at det faktisk er tillatt mennesker via denne for å involvere sine venner i sine bilder. For Facebook, siden deres hjemmeside er spesielt sosial, det handler om å bygge denne typen sosial atmosfære. Som forbedret opplevelsen av bilder mye mer fordi de faktisk kunne begynne å si: "Dette er forbindelser mellom mennesker, og disse er bilder om folk du faktisk bryr deg om. " En del av det er også sortere narsissisme. Folk liker å bli tagget i bilder og sånt. Selv om det ikke er nødvendigvis en god menneskelig egenskap, samtidig det er basert på god design beslutninger fordi folk faktisk bryr seg om ting som dette. Så det er Facebook-bilder. 

Men la oss snakke Facebook mer generelt. Jeg er sikker på at mange folk her har meninger om Facebook, både gode design beslutninger og dårlig design beslutninger. Så la oss ventilere eller være lykkelig. Kom igjen. Jeg vet bruker alle dere Facebook. Noen må ha noe dårlig å si eller noe godt å si om det. Ja. [Student] I nyhetsfeed det er mange ting jeg egentlig ikke bryr seg om. Nyhetsmatingen ikke viser en masse ting du kanskje ikke bryr seg om. Du har venner på Facebook som du ikke har møtt for 2 eller 3 år og du ser sine nyheter resultater dukker opp i news feed og du ikke virkelig bryr seg om det. Facebook har faktisk gjort en innsats for å gjøre dette bedre, og de har faktisk prøvd å presse relevante resultater til toppen av nyhetsfeed som for sent slik at du faktisk se ting av venner som er relevante for deg eller dine nære venner. Noe annet? Ja. [Uhørlig student respons] >> Kan du si det igjen? [Student] Annonsene er relativt påtrengende. >> I hvilken forstand? [Uhørlig student respons] De har ikke lys på skjermen, som bannere. Okay. Det er bra. Hvis du husker på Internett fra 90-tallet - >> [Malan] jeg var der. >> Han var der. [Latter] Du husker kanskje blinkende GIF bakgrunner, sparkly ting, Geocities stil slags ting. Det er egentlig ikke et eksempel på en god design fordi det er virkelig distraherende fra innholdet. The Yale art nettstedet pleide å ha animerte GIF-filer som deres bakgrunn og du ikke kunne lese noe på siden, men jeg antar at noen faktisk snakket med dem, og nå er det litt annerledes. [Malan] Det er mye bedre nå. >> Det er mye bedre nå, som du kan se. >> [Malan] Oh yeah. Like stor, bare - Ja. Okay. 

En del av det er også noe som gjør siden din muligens veldig minimalistisk og svært forståelig så ting på siden flyten i en måte som er veldig logisk og ikke komme i veien for hverandre. Hva slags andre ting er bra om Facebook eller dårlig om Facebook? La oss bare ha en utforming samtale her. Oh. Hvor? Ja. [Student] Den nye Timeline-systemet lar deg søke på personens profil om sin fortid. Ooh, Timeline. Timeline er en stor ting fordi det lar deg stengel vennene dine tilbake når de var på high school. Tidslinjen er bra fordi det lar deg filtrere gjennom innhold mye raskere, den lar deg finne ting som ellers ville ha tatt deg en veldig lang tid å finne bare å bla opp og ned, opp, opp, opp, opp, opp, som å gå tilbake i tid. Men så er det også en slags ulemper som i form av brukeropplevelsen. Hva kan det være? Store ord som starter med P-R. >> [Student] Personvern. >> Personvern, ikke sant? Personvern er et stort brukeropplevelse problemet. Dette er en av de tingene jeg hater mest om Facebook nå. [Latter] [Malan] Som jeg nå. David var ikke klar over dette faktisk skjedde før i går. Så nå vet han at hver gang jeg chatte ham jeg vet han har vært ignorerer meg. [Malan] Det klønete delen ble jeg faktisk ignorerer ham, og jeg visste ikke at han visste at jeg var ignorerer ham. [Latter] Personvern er et stort problem. Kan noen her fortelle meg hva som kan være dårlig om Facebook personvern foruten det faktum at de gjør ting som dette? Hva er det spesielt vanskelig å gjøre med hensyn til Facebook personvernet? Den slags er en ledende spørsmål. Ja. >> [Student] Skjul dine bilder fra bestemte personer. Høyre. Akkurat, for å skjule bildene dine fra bestemte personer. De har denne lille, lille knappen i øvre høyre som lar deg veksle personvernet til et bilde. Deres personvern alternativer er svært varierte mellom ulike typer menyer. 

De har fått mye bedre om det nylig, men det pleide å være tilfelle at når du ønsket å hindre dine venner fra å se bilder, du vil måtte gå gjennom en svært komplisert 5-trinns prosess for å være like, la meg klikke på denne linken, nå la meg på nytt, la meg på nytt, la meg spesifisere hvilke folk ikke kan se bildene mine. Det er ikke spesielt god på Facebook del fordi så mye om brukeropplevelse er faktisk å gi dem frihet å kontrollere hva folk kan se. Vi kaller denne brukeren kontroll og frihet. Hvis du ikke lar brukerne gjøre det på en måte som er effektiv og intuitiv, deretter din brukeropplevelse er egentlig ikke så stor på alle.  Vil dere liker å si noe om Facebook? Hvordan slår jeg av dette? [Ong] Du kan ikke slå dette av, og det er en stor brukervennlighet feil på den delen av Facebook. Denne funksjonen - jeg faktisk sett det i går - det er enten at du ikke kan gjøre det eller det er begravet et sted veldig, veldig dypt i recesses av Facebook fordi jeg ikke kan finne ut hvordan du deaktiverer denne funksjonen i det hele tatt. [Malan] Men noen ganger disse beslutningene er ikke opplagt fordi dere har gitt oss mye nyttig tilbakemelding på ulike CS50 søknader og nettsteder som kurset bruker. Vi har ikke implementert alle disse forespørslene og forslag. 

En del av det er for å få så mange forespørsler at det er en funksjon av tiden, men noen ganger er vi bare gjøre en bevisst beslutning som, "Takk for forslaget, men vi er uenige." Så hvordan kan du faktisk bestemme hva du skal gjøre hvis brukerne tror du bør gjøre noe selv om du ikke nødvendigvis? Det er en fin balanse mellom faktisk lytte til hva brukerne sier og faktisk har en slags linje der du sier, "Vi kommer ikke til å gjøre hva disse brukerne sier." Og i særdeleshet, tror jeg det var et sitat av Henry Ford som summerer dette opp ganske godt. "Hvis jeg hadde spurt folk hva de ville, ville de ha sagt de ønsket raskere hester." Kan noen slags erte hverandre hva dette sitatet egentlig betyr? Det er ikke bare at brukerne vet hva de vil, men det er mer som - [Student] De vet ikke hva som er mulig. I del de ikke vet hva som er mulig. Erte at bortsett litt mer. Hva mener du med det? [Uhørlig student respons] Det er bra. Hva jeg tror vi prøver å si her er at folk vet hva de vil. De ønsker raskere hester. Hva de egentlig ønsker er evnen til å bevege seg raskere, men de ikke vet det mediet som å oppnå det. Når du kommer til brukerne og brukerne du fortelle noe og de forteller deg: "Vi vil ha disse funksjonene og disse funksjonene og disse funksjonene," du ikke ønsker å nødvendigvis tenke på, "La meg gå videre "Og gjennomføre det de eksplisitt sier," men hva du ønsker å tenke på er: "Hva slags ideer kan jeg få fra det?" Hva gjør de egentlig vil? 

Og derfra hva du kan gjøre er å lage noe som tilfredsstiller disse forespørslene men ikke nødvendigvis på den måten at brukeren forventer det å være fornøyd. Så for noe sånt endelige prosjektene, i svært reelt, hva er et nyttig heuristisk når det gjelder å lage noe bedre, spesielt hvis designeren har denne arroganse om ham der du liksom vet hva som er best, kan du ta innspill fra brukerne, men hvordan kan du faktisk gå om å få disse tilbakemeldingene? I siste prosjekter, veldig konkret, produserer hva optimale resultater her? Hva gir optimale resultater - og jeg vil gå over dette i et sekund - er denne prosessen med å utvikle og deretter teste og deretter gjentar. Hva jeg mener med testing er vanligvis når du utformer noe du tror det er ganske bra, som "Jeg er en stor designer. Alle kommer til å elske denne." Og så lagt det ut og folk ikke liker det for noen grunn. Hva du trenger å gjøre er at du må ta deler av ting som folk gjøre som og revolusjonere de tingene som folk ikke liker. Det høres ut som en veldig tydelig prosess, men denne prosessen av stadig gjentar på toppen av hva du allerede har bygget er en prosess som hjelper deg ikke bare avgrense dine egne design ferdigheter, men også hjelper deg med å avgrense design slik at folk faktisk setter pris på din produkt enda mer enn de gjorde før. 

Jeg skal gå over flere konkrete eksempler på hva du kan faktisk gjøre. Som en slags siste eksempel på et produkt, la oss se på KAYAK. KAYAK da den kom ut var veldig, veldig populære. Kan noen gjette hvorfor? Hva er den slags ting du liker om dette hvis du har brukt den eller hva er den slags ting du ikke liker? Ja. >> [Uhørlig student respons] >> Ok. Det er en del av det er å la brukeren ha en spørring som er mer ekspansiv enn en svært restriktiv en som, "Du må velge din startdato "Og du må velge din sluttdato." Faktisk, det kan du være fleksibel om det og det gir deg alle flyreiser i dette området. Noe annet? [Student] De omfatter avgiftene i prisen. De inkluderer avgifter i prisen. Skatter og ting faktisk gå rett inn at prisen i det øvre venstre slik at du ikke lures til å tro at du faktisk betaler for en $ 240 fly når det er egentlig $ 330. Noe annet? Ja. [Uhørlig student respons] Jeg er ikke sikker på om de faktisk lar deg gjøre det. Jeg kan være galt. Det kan være en interessant ting hvis du ønsker å legge større vekt på bestemte filtre slik at de presser resultater relatert til at filteret til toppen. Men kan noen fortelle meg hva som er så spesielt med denne venstre side? Hvordan fikk du tradisjonelt slå opp et fly på en Internett-tjeneste før dette? 

Ja. >> [Uhørlig student respons] >> Kan du si at - [Student] Hvert flyselskap. >> Ja. Hvert flyselskap har sin egen hjemmeside. Dette befester ting. Og? [Student] Du vet nøyaktig hva tid du drar. Du vet nøyaktig hva tid du drar, men knyttet til filtrene spesielt. La meg trekke opp KAYAK. Å Gud, pop-ups. Dårlig brukeropplevelse. Hva skjer når jeg flytter denne slideren? [Student] Automatiske oppdateringer. >> [Ong] Automatiske oppdateringer. Det er noe som er veldig viktig. Før dette, når du ønsket å slå opp et fly, du måtte sette i dine innspill plassering, utgang plassering, trykker Søk, det ville behandle det og vise resultatene. Hvis du ønsker å endre spørringen, ville du må trykke tilbake to ganger, inn i en ny spørring fra grunnen av, og deretter gjøre det igjen og igjen. Det fine med noe sånt som dette er det bruker en svært [uforståelig] ting i midten. Når du gjør noe som dette, skyter den av en forespørsel og den returnerer deg alle resultatene umiddelbart. Denne typen umiddelbar tilbakemelding er noe som gjorde KAYAK svært populære fordi det er veldig lett for meg å bare endre mine søk og for å finne ut de tingene som er rundt et bestemt område uten å måtte gå frem og tilbake, frem og tilbake, frem og tilbake. Så disse er alle slags ting du ønsker å tenke på når du designer ditt nettsted. Hvordan kan jeg gjøre det veldig effektivt for brukerne mine til å gå gjennom hva de jobber med og for å komme til deres endelige mål så raskt som mulig? [Malan] Og til Josefs punkt tidligere om brukerne ikke nødvendigvis vet hva de vil, basert på hva dere nå vet om HTML og du har avkrysningsbokser, radioknapper, velger menyer, inntastingsfelter og lignende, hvordan ville du gjennomføre tanken om å plukke en starttid for en flyreise? 

Hvilke av disse ulike UI mekanismer vil du bruke? Hvis du bare vite hvor mye av HTML som ble undervist før og du vet at innganger radioknapper, avmerkingsbokser, drop-downs, og input-boksen, hva ville det naturlige valget har vært for å plukke datoer? [Student] Input. >> Inngang. Eller kanskje en drop-down med alle datoene, ikke sant? Så med mer komplekse UI mekanismer som dette på venstre side som du kan implementere, du kan gjøre denne prosessen mye mer intuitivt med en glidebryter fordi tiden er kontinuerlig, og folk vanligvis ikke tenker på det i form av diskrete biter. OK. Siste ting. Ti brukervennlighet heuristikk. Alle de tingene vi snakket om trolig falle under en av disse kategoriene. Hvis du går til denne linken, som nettstedene vil bli lagt ut på nettet, vil du faktisk være i stand til, som du designe ditt nettsted, holde disse heuristikk i tankene og disse tommelfingerregler. For prosjektene dine, hva jeg foreslår at du gjør for å designe din app bedre er å gjøre papir prototyping først. Når du tenker på søknaden din, veldig raskt skissere hva du vil den skal se ut og sørge for at alle boksene er ordnet på en måte som er svært intuitivt for brukeren å bruke og selv vise disse papir prototyper til vennene dine og begynne fokusgrupper. Bare få 2 eller 3 personer sammen og be dem om å bare trykke på disse papir prototyper, og vise dem nye skjermer for å se om de faktisk forstår hva som skjer. 

Hva du ønsker å gjøre er å gi dem en oppgave, motivere den oppgaven, og bare gi dem til applikasjonen og la dem bruke den. Ikke gi dem instrukser utover det. Du ønsker å faktisk la dem samhandle med programmet ditt på en måte som lar deg se hvordan de ville bruke det hvis du ikke ble stående ved siden av dem. Og det er veldig viktig. Det vil gi deg massevis av innsikt som til er folk får rundt spesielle ting på en måte som jeg ikke hadde tenkt dem til? De bruker bestemte UI mekanismer på skjermen på en måte som er slags hacky? Jeg hadde ikke tenkt for dem å gjøre det på den måten. Og når du er ferdig med det, hva vil du gjøre? Din design steiner, ikke sant? Hva du ønsker å gjøre er du ønsker å utvikle og gjøre det prosessen på nytt. Så viser det til venner når du har utviklet den, teste den, utvikle, teste, utvikle, teste, iterate, videre og videre og videre. Design er en svært iterativ prosess i denne forstand. Du har faktisk å bygge noe og deretter innse ting om det at du ikke skjønner før og gå tilbake og forbedre fra det. Nå, som for utviklingen del, det er hva Tommy kommer til å vise deg etter bruddet og hvordan du kan være i stand til å gjennomføre noe sånt autofullføring på en måte som er ganske enkel. [Malan] Som Tommy setter opp her, et spørsmål da. Mange av de tidligste nettsteder - og da Josef sa 1990 stil nettsted, det var implementeringer der hvis du ønsket å velge en starttid og en slutt tid, ærlig, tilbake i dag, og selv om noen nettsteder i dag, måten du gjør dette er du plukke en time fra en drop-down, du plukke minutter fra en drop-down, kanskje du velge AM, PM, og deretter gjøre som 3 flere ganger. Og så med 6 klikk og kanskje noen rulling bruker faktisk kan gi noen form for dato og / eller tidsrom i denne forstand. 

Så definitivt suboptimal og likevel så langt vi har sett noen uttrykksfulle evner i noen av språkene har vi sett på å gjøre noe mer sexy som denne skyvekontrollen for starttidspunkt og sluttidspunkt. Men hvis du tenker tilbake til uke 0 når vi snakket om Scratch, der også det var ikke widgets som bare gjorde visse ting. Du egentlig bare hadde disse grunnleggende som loops og betingelser og lignende. Så slags bare tenker veldig abstrakt nå, uavhengig av opplysninger om HTML, hva som egentlig skjer med noe som dette start og sluttid glidebryteren? Når jeg flytter min mus og jeg klikker på den lille gulrot symbolet på venstre og begynner å dra programmatisk, hva er det du ønsker å være i stand til å gjennomføre å gjøre det skje? Hvilke spørsmål, hva boolske uttrykk du ønsker å være i stand til å spørre? Hva som egentlig skjer? Sammy? [Student] Hvor er posisjonen til markøren? >> Bra. Hvor er plasseringen av markøren? Dette var noe vi trengte å uttrykke tilbake i Scratch, enten det var basert på plasseringen eller jevn farge eller lignende. Du husker kanskje aldri så kort på mandag var det alle disse tingene som kalles hendelser i verden av Internett, og så det er ting som onclick og onkeypress og onkeyup og onmouseover og onmouseout. Så innse at selv disse tingene vi har tatt for gitt på nettet med nettsteder som Facebook og Gmail, selv om du har ingen anelse hvordan ville du eventuelt iverksette at fordi det er ingenting selv som det i foredraget eller oppgavesettet 7, innser at med disse nøyaktig samme fundamentale forhold, med HTTP og parametere og GET og POST, med de grunnleggende HTML innganger som vi har sett på så langt og i et øyeblikk med de programmatiske mekanismer som Tommys om å innføre kan du begynne å uttrykke deg akkurat som du gjorde i uke 0 av svært intuitivt å dra og slippe. 

Så med det sagt, Tommy MacWilliam og noen nye brikkene for oss for Web. OK. Mitt navn er Tommy og jeg skal snakke om JavaScript. Bare en ansvarsfraskrivelse: Jeg er av den oppfatning at JavaScript er den beste programmeringsspråket i hele hele verden. Det er mange folk som er uenige med meg, men det er bare fantastisk. Når du går tilbake til C, hvis du må skrive C for en annen klasse eller noen andre språk, det er bare veldig frustrerende i alle lavnivå detaljer du må få kjørt seg fast i. Så hvis du noen gang følelsen trist om hvor irriterende C er å skrive, bare gå tilbake, skrive noen JavaScript. Det er nirvana. Du vil føle deg mye bedre om dårlig dag. Mye av den magiske JavaScript kommer fra dens evne til å manipulere ting som allerede er på siden. Når vi skrev våre PHP-skript, ble de henrettet på serveren, og til slutt at PHP script sannsynligvis sende noen HTML. Som HTML ble sendt til klienten, og så det var det. Hvis PHP ønsket å legge til en knapp på en side, for eksempel, kan det egentlig ikke gjør det. Det ville ha å gjengi en helt ny HTML-fil og sende den til nettleseren. Med JavaScript vet vi at vi kan oppdatere ting mens de er allerede på siden, og på grunn av dette kan vi gi mye mer umiddelbar tilbakemelding, som virkelig vil forbedre brukeropplevelsen på våre nettsider. Bare en rask oppsummering av JavaScript-velgere. Vi vet at når vi laster ned en HTML-side, som kommer til å være representert i DOM. 

DOM er husk bare dette store treet der elementer er relatert i denne store hierarkiet. Når vi jobbet med databaser i pset 7, en av de første tingene vi trengte å vite hvordan å gjøre var søke i databasen. Vi har denne store brukere tabellen, og noen ganger vi vil bare si, "Jeg vil bare ha noen av disse brukerne som stemmer overens noen tilstand." Tilsvarende når vi har DOM vi trenger noen måte å utføre en spørring. Vi trenger noen måte å si: "Jeg ønsker alle knappene som ser ut som dette "Eller alle bildene på siden." Og desse tillate oss å gjøre det. Så bare en rask oppsummering. Dette første her, denne # sende, hva er det kommer til å velge? Husker noen? [Uhørlig student respons] >> Ja, akkurat. Dette kommer til å velge et element på siden som har en ID på send. Og slik at hash tag sier denne velgeren kommer til å jobbe med IDer. Hva med den andre, dette. Sentrert, hva vil det velge? Ja. >> [Student] Class. >> Nettopp. Dette skal nå velge etter klasse. Forskjellen mellom ID og klasse her er generelt ID skal være unike innenfor hva plass du søker over. Så hvis du skulle søke over en hel nettside, du virkelig bør bare ha en del med at visse ID, så i dette tilfellet av send. Med klasser, på den annen side, kan vi ha mer enn en del på samme side med den samme klasse. Dette kan være nyttig for å si jeg ønsker å velge alt som er sentrert på siden snarere enn bare en ting. 

Og til slutt, er dette siste her litt mer komplisert, men hva dette kommer til å velge fra DOM? [Uhørlig student respons] >> Hva er det? [Student] Alt som er en kode. >> Vi har 2 deler her. Den andre delen skal si jeg ønsker å velge disse kodene med en tag av input, så noen element som er en inngang tag. Men jeg ønsker ikke å bare velge alle inngangene fordi noe som en send-knappen kan være en inngang og noe som en tekstboks kan være en inngang. Så med disse hakeparenteser jeg sier bare jeg vil velge de elementene som er av typen tekst. Et sted i min HTML-kode har jeg et attributt som heter type, og verdien av attributtet må være tekst. Så hva med denne første delen her? Det første ordet i denne velgeren er formen da jeg har en plass og deretter denne inngangen del. Hva gjør det, setter form foran den? Dette kommer til å utgangspunktet begrense vår søket. Det kan være slik at vi har noen innspill på siden som ikke er etterkommere av et skjema. Hva dette vil gjøre er dette vil si at jeg bare vil at innspill koder som har et sted over dem noen overordnede element av et skjema. Og så på denne måten kan vi gjøre disse mer hierarkiske spørringer så vi ikke bare har å velge alt matchende et gitt valg. Vi kan slags begrense omfanget av den spørringen til noe annet. Så nå som vi vet hvordan du velger elementer på siden, la oss snakke litt om AJAX. AJAX er en fortsatt veldig trendy akronym som står for Asynchronous JavaScript and XML. Det bare så skjer at XML er bare en måte å representere data. 

Den slags tapt popularitet nylig, så X i AJAX ikke brukes hele tiden. I utgangspunktet er det som gjør AJAX tillater oss å gjøre HTTP-forespørsler fra sammenhengen av JavaScript. Når vi er i vår nettleser og vi navigerer rundt sider og klikker vi en link, hva vår nettleser kommer til å gjøre er å gjøre en HTTP-forespørsel til det koblingen vi klikker. Men det er ikke alltid ideelt fordi hvis det er tilfelle, så som David sa, vi har alltid å gjøre brukerne klikker en Send-knappen eller klikk på en kobling for å gjøre noe skje som kommer til å innebære en HTTP-forespørsel. Så med AJAX kan vi gjøre disse forespørslene på vegne av JavaScript. Det betyr når brukeren samhandler med siden eller noe skjer, Vi kan faktisk gjøre en programmatisk forespørsel til en annen PHP-fil på våre nettsider eller noe annet, og hente data som filen spytter ut. La oss ta en titt på et eksempel på AJAX. Dette er vår CS50 Finance side som forhåpentligvis noen av oss er kjent. Hvis vi ser på HTML på denne siden, ser vi her at jeg har lagt et par ting, en som jeg har gitt denne formen en ID. Jeg har sagt id = "form-quote". Jeg har gjort dette bare fordi det kommer til å gjøre dette litt enklere å velge fra DOM siden jeg kan bare gjøre en veldig enkel spørring. Hva jeg vil gjøre her er at jeg ønsker å fikse noen problemer med CS50 Finance. Så hvis vi går til finance.cs50.net, hver gang jeg ønsker å få et tilbud, må jeg klikke på denne Get Quote knappen, og at Get Quote knappen og deretter tar meg til en annen hele siden. Og hvis jeg ønsker en annen sitat, må jeg treffe på Tilbake-knappen og deretter jeg skriver det inn, Jeg får et tilbud, og jeg traff på Tilbake-knappen. Dette er egentlig ikke den beste brukeropplevelsen. Hvem ville virkelig bruke området hvis det er det treg å få aksjekurser? Så det vi ønsker å gjøre med AJAX er å fjerne det skritt å gå til en egen side for å se resultatet. 

Hva vi egentlig bare ber om er at veldig liten pris, og det er bare en veldig liten mengde data. Så det er ingen grunn for meg å gå en annen hele HTML-side, laste ned en helt ny gruppe med HTML, kanskje laste ned noen flere bilder, noen andre CSS-filer bare for meg å svare på det veldig enkelt spørsmål hvor mye koster denne bestanden kostnader. Med AJAX kan vi gjøre dette mye enklere. Vi ser her nede at jeg kobler i en JavaScript-fil som heter quote.js. La oss faktisk åpne opp den filen. Ikke der. Alle mine JavaScript-filer kommer til å bli plassert i HTML slik at nettleseren kan få tilgang til den. Da har vi en egen katalog for JavaScript, og nå er her quote.js. På toppen av denne filen dette sier her at jeg ønsker å vente på at hele siden skal lastes før jeg prøver å gjøre noe. Hvorfor er det nødvendig? Det viser seg at det neste jeg skal gjøre her er starten på jakt etter et element som samsvarer noen valg. Hvis dette JavaScript er stadig gjennomført før dette elementet er lastet på siden, så alt jeg prøver å gjøre er ikke å gå på jobb fordi jeg kommer til å prøve å velge noe som ikke er der ennå. Så denne linjen opp toppen sier at jeg vil at du skal vente til alt er lastet så vi er garantert at noen elementer jeg leter etter er faktisk på siden. Dette dollartegn her betyr at jeg bruker biblioteket som heter jQuery. Dette jQuery biblioteket tillater oss å bruke desse som vi bare så på. Ved å si $ deretter passerer som et argument denne # form-sitat, Jeg er nå velge at formen at vi bare tok en titt på. Nå har jeg en representasjon av som dannes i minnet eller annen måte. 

På dette objektet nå, denne representasjonen av skjemaet, Jeg bruker nå en funksjon kalt på. Hva denne funksjonen gjør er det kommer til å feste en hendelseshåndterer. Dersom vi kommer til å høre etter er submit hendelsen. Så når brukeren klikker som send-knappen eller trykker Enter, denne hendelsen kommer til å skyte. Ved å hekte inn i dette, kan jeg nå overstyre standard virkemåte av skjemaet. Uten denne JavaScript, ville skjemaet underordne deg hva PHP-fil vi brukte i handlingen attributt. Men i stedet, er jeg nå sier, vente, vente, vente, jeg vil at du skal faktisk gjøre det. Jeg vil at dette skal skje før du går og prøver å sende til noen PHP-fil. Nå hva gjør jeg ønsker å gjøre? På dette punktet jeg ønsker å bruke AJAX eller annen måte å laste inn hva prisen på aksjen er. Det første jeg trenger å vite er hva lager brukeren ser opp. Å gjøre at jeg kommer til å bruke en annen velgeren. Dette er den tredje velgeren vi sett på før. Dette sier at jeg ønsker å starte dette skjemaet element med en ID form-sitat. Så et sted inne i den form det må være en inngang element som har et navn på symbolet. Hvis vi ser tilbake på HTML vår, så vi at vi hadde en inngang [name = symbol]. Det betyr at dette kommer til å velge det tekstboksen at brukeren skriver inn. Det er fint. Vi har tekstboksen. Nå trenger vi bare å vite hva som er inni den. For å gjøre det vi kan kalle denne metoden her, dette. Val, og dette sier jeg vet hva tekstboksen du har. Jeg vil at du skal fortelle meg hva det er brukeren har skrevet inn i den tekstboksen. Nå har vi en streng kalt symbol som er lik uansett brukeren har skrevet inn Det er fint. Vi kan bruke denne strengen nå for å gjøre vår forespørsel. Dette er en ny funksjon her, denne $, bortsett vi ikke lenger kommer til å være å velge elementer, vi kommer til å kalle en annen funksjon som er gitt til oss av jQuery. Dette AJAX funksjonen er hva som faktisk kommer til å gjøre dette HTTP-forespørsel. Så vi har å fortelle det et par ting. Det første vi må fortelle denne funksjonen er der jeg vil at forespørselen om å gå. Et sted i prosjektet mitt har jeg denne filen på innsiden av HTML katalog kalt quote.php. Jeg får tilgang til denne filen, så vi, akkurat som dette, hvis jeg går til localhost / quote.php. 

Jeg vil at min JavaScript for å gjøre en forespørsel til den aktuelle siden. Hva slags forespørsel nå? Vi så tidligere at formen har denne metoden = "post"-attributtet, og det betyr at det kommer til å gjøre en POST-forespørsel, så det kommer ikke til å sette noe i URL, snarere enn en GET-forespørsel, som ville bare bli oppsagt hvis vi bare tilgang til siden med nettleseren, for eksempel. Nå har vi sagt jeg ønsker å gjøre en HTTP POST-forespørsel til en side som ligger på quote.php. Når vi sender skjemaet, husk vi kunne få tilgang input elementer inne i det skjemaet med at $ _POST variabel. Så langt i historien har vi ikke egentlig sendes sammen alle data ennå. Vi har nettopp sagt vi gjør en AJAX forespørsel og her er den type forespørsel vi gjør. Nå må vi faktisk sende noen data til siden. Å gjøre at vi kan bruke denne egenskapen kalles data. Verdien av denne egenskapen er faktisk en assosiativ array. Grunnen til dette er det tillater oss å sende mer enn bare en bit av data. Det er derfor vi har disse klammeparentes her nestet inne i disse andre klammeparentes. Tastene i disse assosiative matriser kommer til å være det samme som de navn attributter i vårt skjema elementer. Det betyr at hvis jeg sender langs en nøkkel symbol, det betyr at min PHP side får tilgang til disse dataene med $ _POST [symbol] akkurat som vi gjorde før når vi var å sende inn et skjema. Og nå de faktiske dataene vi ønsker å sende kommer til å være verdien innsiden av denne assosiativ array. 

Vi lagret denne teksten i en variabel kalt symbol, og så vi sender sammen nå en nøkkel symbol og en verdi av hva brukeren har skrevet inn Nå har vi gjort denne HTTP-forespørsel, vår PHP-fil har utført, og det kommer til å sende noen data tilbake nå til klienten som bare gjorde denne forespørselen. Nå må vi svare på hva serveren sa til oss. For å gjøre at vi har denne siste egenskapen her kalles suksess. Verdien av denne suksessen tasten er faktisk kommer til å være en funksjon, og dette er en av de virkelig kule tingene du kan gjøre med JavaScript. Ikke bare kan du ha ints eller matriser som en verdi innsiden av en assosiativ array, Vi kan også ha en funksjon. Så ved å si suksess, dette er min nøkkel. Et kolon sier her kommer verdien, og nå verdien av dette er faktisk en funksjon. Slik at vi ikke trenger å gi denne funksjonen et navn i seg selv. Vi kan bare si dette kommer til å bli noen funksjon. Det kommer til å ta en argument. Argumentet til denne funksjonen kommer til å være uansett serveren sendte oss tilbake fra forespørselen. Akkurat som når våre nettleseren gjør en forespørsel, sender serveren noe tilbake og nettleseren viser det, i sammenheng med AJAX vi bare gjort en forespørsel, sendte serveren noe tilbake, og nå har vi det representert som en streng. Med denne strengen ville jeg bare liker å vise det på siden. Å gjøre at jeg kommer til å ha en siste valg. Jeg ønsker å velge elementet med ID pris. Dette er bare en tom div som jeg har laget på siden, og jeg ønsker å bestemme innholdet i den div å være uansett serveren sendte oss tilbake. Jeg har faktisk endret quote.php litt. 

Snarere enn å ringe render og rendring noen side, quote.php nå er rett og slett kommer til å skrive ut verdien av aksjen som en streng. Så hvis du skulle faktisk besøker siden, ville du bare se at lille strengen av hva aksjekursen er. En siste ting vi trenger å gjøre her er å bare at denne funksjonen returnerer false. Hva dette sier er at hvis jeg er inne i en hendelseshåndterer og at hendelseshåndterer returnerer false stedet for å returnere sant, det betyr at jeg ikke vil den opprinnelige hendelsen til brann. I dette tilfellet, hvis vi ikke har noen JavaScript og vi leverte et skjema, vår nettleser kommer til å si, "Jeg kommer til å sende dataene sammen," og de kommer til å sende deg til en annen side. Fordi vi bruker AJAX nå, det er ikke nødvendig å sende brukeren til en annen side. Vi skal bare vise resultatene dynamisk på den samme siden. Vi egentlig ikke vil ha dem til å gå hvor som helst, og jeg ønsker å bo på samme side. Så ved å returnere falsk, sørger vi for at skjemaet ikke gjøre det for oss. La oss ta en titt på hva dette faktisk ser ut. Vår sitat side ser det samme. La meg trekke opp inspektøren her nede, så vi kan se hva som skjer. Gjør det til en litt mindre stor. Husk at hvis vi åpner opp nettverket kategorien, er dette hvor vi kan se alle HTTP-forespørsler som skjer på siden. 

For et symbol la meg skrive AAPL og klikk på Hent Sitat. Nå er vi så at en del av Apple koster noen flere dollar bare dukket opp på siden, men URL endret ikke i det hele tatt. Faktisk, her er HTTP-forespørsel som vi nettopp laget. Vi har gjort en POST-forespørsel til quote.php. Det er fornuftig. Dette er hva serveren sendte oss tilbake. Det er ikke lenger dette gigantiske HTML-dokument med bilder og sånt, det er bare en tekstlinje, og da vi bare vises linjen med tekst. Hvis vi går tilbake til overskrifter og se hva vi faktisk har sendt innsiden av denne HTTP-forespørsel, Vi kan se her nede at vi sendte langs en nøkkel symbol og en verdi på AAPL, som er hva brukeren skrev inn Dette er hyggelig, men det er fortsatt litt irriterende. Jeg har fortsatt å klikke på denne knappen for å få aksjekursen. Vi er travle mennesker, og vi har ikke tid til å klikke på knapper. Google innsett dette en liten stund siden, da de implementert Google Instant. Hva Google Instant gjør er som du skriver det begynner bare å vise resultater for deg slik at du ikke trenger å bekymre deg selv klikke Søk. Egentlig en morsom historie knyttet til det. Når Google Instant kom ut, folk var som "Jøss, dette er super fantastisk." "Dette er så kult." Og en student ned ved Stanford som var 19 på den tiden gjort dette området kalles YouTube Instant. Alle YouTube Instant gjør er å søke effektivt YouTube umiddelbart. Så heller enn å måtte gå til YouTube.com og traff Søk, når jeg begynner å skrive inn YouTube Instant noe sånt CS50, vi kunne se her at det er forsøk på å på en treg Internett-forbindelse befolke disse resultatene bor. Å gjøre at vi faktisk kan gjøre en veldig enkel endring i vår quote.js fil. Akkurat nå er vi knytter denne hendelsen når skjemaet er sendt. Vi vet egentlig ikke ønsker å gjøre brukeren sende dette skjemaet lenger, så la oss i stedet fyre denne hendelsen hver gang brukeren trykker på en knapp. For å gjøre det la oss først endre hendelsen fra sender til keyup. Det betyr at heller enn å vente på skjemaet for å sende inn, hver gang du trykker på tasten, er noe kommer til å skje. Det ikke lenger gir mening å feste denne keyup hendelsen til hele skjemaet. Vi egentlig bare bryr seg om at søkeboksen. 

Å velge det nå, kan vi endre dette til å være, heller enn form-sitat, form-sitat, og vi vil ha en inngang (type = text) eller vi kan si (navn = symbol) - hva vi ønsker. Nå er det en siste ting vi må gjøre. Husk her nede, når vi sa return false Vi sa at vi ikke ønsker at standard hendelsen til brann. Men det bare skjer, slik at hvis vi deaktiverer det nå, hva vi skriver i ikke kommer til å dukke opp i nettleseren lenger fordi det ville være standard virkemåte for å skrive inn en tekstboks. Vi ikke lenger ønsker å overstyre det, så la oss ødelegge denne return false. Hvis vi lagre det og oppdater siden, nå når jeg begynner å skrive AAPL vil du se at aksjekursen nederst her fullfører automatisk. Så her er CS50 Finance Instant. Faktisk en morsom historie om YouTube Instant er at studenten bare slags skrev det som en 1-natt-prosjektet, og neste dag ble han tilbudt en jobb ved YouTube konsernsjef. Så så enkelt som det, du CS50 studenter, kan den endelige prosjekter får du en jobb på YouTube. Noe sånt er en veldig kul idé for et avsluttende prosjekt, ikke sant? Vi hadde noen eksisterende funksjonalitet som vi ønsket å integrere med. Vi forbedre brukeropplevelsen litt, og plutselig søker noe på YouTube Instant kan være mye enklere enn å lete etter den på vanlig YouTube. Så det er AJAX i et nøtteskall. 

I eksemplene som Joseph ble vist, så vi en masse autocompletes, og disse autocompletes er virkelig, virkelig hendig fordi vi ikke trenger å huske - For eksempel, hvis du ikke husker aksjekursen for Apple og vi bare vet at det er aa noe, heller enn å bare si til meg, "En del av denne tingen koster så mye penger," Jeg vil slags gjerne vite hva aksjer starter med aa. Vi kan gjøre som virkelig pent med Bootstrap bibliotek som allerede er inkludert innsiden av CS50 Finance. Hvis du kommer opp her til JavaScript-koden og bla ned til Typeahead, Dette er bare en fin plugin som noen allerede skrev for oss, og vi kan lett bruke sin funksjonalitet som dette. Jeg skrev i en A og her er en liste over noen stater som starter med A. La oss si at jeg tror dette er veldig kult, og det er på tide for meg å ta dette på siden min. Det viser seg at dette er veldig, veldig enkel. La oss hoppe over her til quote3.js. Filen min ser litt annerledes. Her nede alle mine AJAX ting er den samme. Jeg ønsker å laste aksjen data uten å måtte gå til en annen side. Men nå vil jeg bruke denne plugin. Den Bootstrap dokumentasjon har gode eksempler på hvordan akkurat jeg kan gjøre det. Jeg ønsker å si: "Her er innspill som jeg ønsker å Autofullfør," og jeg kommer til å kalle denne funksjonen kalles typeahead, og det kommer til å håndtere alle de Typeahead ting for oss. Den vil sette listen, vil den gjøre alle våre filtrering. Det eneste den trenger å vite er hvilke data vi autocompleting på. Så jeg fant ut denne tasten bare ved å lese dokumentasjonen og ser på eksemplene. Hvis jeg gir den en nøkkel kilde, verdien av denne nøkkelen er bare noen utvalg av ting jeg ønsker å Autofullfør. Denne variabelen kom fra dette andre filen. Jeg åpner opp symbols.js. 

Dette symbols.js er nettopp dette virkelig, virkelig stor array som inneholder strenger av alle disse aksjesymboler fra NASDAQ. Hvis jeg ønsker å gå tilbake til HTML, så jharvard, vhosts, globalhost, html, maler, quote_form. Siden det som nå kalles quote3.js, la meg endre JavaScript-filen jeg er inkludert her. Nå har jeg quote3.js, så jeg kommer til å laste i det separat JavaScript-fil, den som har det Bootstrap autofullfør. Nå når jeg hopper tilbake til nettleseren, oppdater siden, og jeg begynner å skrive aa, Det er min autofullfør. Og det var virkelig så enkelt som det. Jeg hadde en linje med kode som bare sa: "Her er de tingene jeg ønsker å Autofullfør," og plutselig har jeg dette virkelig, virkelig hyggelig funksjonalitet med ikke en hel masse arbeid i det hele tatt. Som du utvikler nettsteder og særlig fronten side av ting, du kommer til å finne dette er tilfelle mye. Det er mye, mye, mye kult gratis biblioteker der ute som gjør det super enkelt å gjøre ting som dette. Kan noen tenke på noen ulemper for bare autocompleting på denne stor liste over symboler? Hva kan være noe som ikke er det beste med denne tilnærmingen? Ja. >> [Student] Time, hvis du har en masse [hørbar] Ja. Akkurat nå er vi laster ned denne enorme JavaScript-fil, og det er mye av symboler. Og så hvis vi har massevis av ting, dette kunne slags øke ventetiden for ikke bare å søke men også laste ned selve filen. Flott. Noe annet? Akkurat nå er det ingen reell følelse av relevans. Hvis jeg skriver i en A, selskapene som dukker opp her kanskje ikke de mest populære selskapene som starter med A. 

Før jeg kommer til Apple, kan det ta litt flere tegn å finne det jeg leter etter. Dette autofullfør har ikke denne følelsen av relevans. Det er bare kommer til å si, "Alt som matcher Jeg kommer til å vise." I stedet for det, ville jeg gjerne noe integrere noen relevans i mine søk. Hvis jeg går over her til Yahoo! Finance, finance.yahoo.com, Hvis jeg prøver å skrive inn et symbol på Yahoo! Finance side og jeg begynner å skrive goog, har jeg denne fine liste over ting. Klart, det ser ut som Yahoo! Finance gjør noe mer smart her. De har noen relevans og de har også tilleggsinformasjon som navnet på lager. Det er noe som jeg ikke kan virkelig få med bare min lager liste over symboler. Jeg vil ha denne og så skal jeg ta den. For å gjøre det la oss gjøre et par ting. La oss først åpne opp inspektøren på denne siden fordi vi så at denne siden ikke er omlasting i det hele tatt, så det er nok å bruke AJAX eller annen måte å være lasting sine data. Vi kan finne ut hvilke data det er lasting. Hvis jeg klikker på denne kategorien Nettverk, er disse kommer til å være alle forespørsler som begynner å bli sparket. Nå hvis jeg skriver i goo, kan vi se at jeg fikk en ny HTTP-forespørsel. Dette er sannsynligvis der at data kommer fra. Sikker nok, hvis jeg ser på denne nettadressen, som er litt merkelig navn, Vi kan se at dette er akkurat der Yahoo sender ut sine data fra. 

Jeg har opprettet en egen fil som heter suggest.php som er veldig lik i ånden til oppslaget funksjonen. Det er i utgangspunktet kommer til å gjøre en forespørsel til Yahoo URL, få tilbake noen data, og sende det tilbake til meg. Nå, i stedet for å bruke denne stor, stor liste over symboler, Jeg kan bruke Yahoo fine relevans ting, og jeg trenger ikke å laste ned det massive JavaScript-fil. Jeg bare kommer til å trekke ned faktisk relevante aksjesymboler. La oss hoppe inn i den. Så html, js. Vi er nå i quote4. Nå er vi ikke lenger bruker den store listen av JavaScript-filer. Men det er en liten slags design problem her. Vi har sagt at A i AJAX er asynkron. Hva det betyr er at når jeg gjør en AJAX forespørsel, så rett her på linje 8, dette er hvor min AJAX forespørsel er faktisk sparken. La oss si nå har jeg noen kode her nede som kommer til å gjøre noen ting liker varsle brukeren eller endre noe på siden. Hva kommer ikke til å skje er at nettleseren ikke kommer til å vente på denne forespørselen for å fortsette før du kommer ned og treffer denne linjen. Det er asynkron del. Det kommer til å gjøre denne forespørselen og si: "Når du er ferdig, "Komme tilbake og kalle det funksjon som jeg ba deg ringe innsiden av suksess." Det betyr at vi kan ikke bare laste ned alle aksjene forhånd. Vi trenger å gjøre forespørselen og vente på at noe skal komme tilbake. Det betyr at før, kunne vi bare fortelle Bootstrap, "Her er listen over ting jeg vil du skal autofullfør på." Vi kan ikke lenger gjøre det lenger fordi vi ikke vet hva vi ønsker å faktisk Autofullfør. Heldigvis, tenkte Bootstrap av dette fordi de er smarte gutta der borte, og de faktisk ga oss en annen måte å laste denne Typeahead plugin. Før, var verdien av denne kilden egenskapen bare denne store utvalg av ting å Autofullfør. 

Nå kilden eiendommen er faktisk en funksjon, og hensikten med denne funksjonen er å finne ut hva ting til Autofullfør er. Måten det kommer til å finne det ut er det kommer til å spørre Yahoo! Finance hva de beste tingene til autofullføring er. Å gjøre at jeg kommer til å gjøre en veldig lignende AJAX forespørsel. Jeg kommer til å be om denne siden på suggest.php. Jeg ønsker å sende langs symbolene fremdeles. Og nå er min suksess, fortalte Bootstrap dokumentasjon meg at for å fylle den listen over ting, alt jeg trenger å gjøre er å passere i denne matrisen nå til tilbakekallsfunksjon. Men vent litt. Hvis dette er ment å være en matrise og AJAX sender meg tilbake tekst, hvordan er det mulig? Dette introduserer en ny måte å utveksle data kalles JSON. I dette tilfellet ikke vi bare sende tilbake en enkel tekststreng. Nå er vi håndtere dette mer kompleks liste over aksjesymboler. Disse aksjesymboler kan også inkludere ting som selskapets navn eller gjeldende priser. Bare ved hjelp av en stor lang streng som ikke formatert på noen forutsigbar måte ikke kommer til å være den beste måten å få disse dataene fra Yahoo server til meg på en måte som jeg lett kan forstå. JSON er en teknologi som utnytter hvordan vi skaper assosiative arrays i JavaScript. Dette ser mye ut som en JavaScript assosiativ array, og faktisk, er det fordi det er. JSON står for JavaScript Object Notation. Dette er i utgangspunktet en avtalt format for overføring av data frem og tilbake. Her denne JSON objekt eller denne JSON assosiativ array sender meg noen data om et kurs. 

Nøklene til denne matrisen er ting som kurs som har en verdi på CS50, og ned her vi kan se at jeg kan ha en verdi som er en matrise. Jeg trenger ikke å gjøre ting som parse ut strenger og se etter komma og gjøre gale ting som det. Fordi dette er deklarert i denne JSON-format, JavaScript og jQuery allerede har funksjoner for å konvertere en streng som ser slik ut JSON i en faktisk JavaScript assosiativ array at vi kan arbeide med. Gjør som er så enkelt som å si at ingen lenger er denne filen, suggest.php, sende meg tilbake bare en tekststreng, men jeg vet det kommer til å være å sende meg tilbake JSON. Det betyr at det JSON kan konverteres til en JavaScript assosiativ array. Og så jQuery, vil jeg gjerne at du skal gjøre det for meg. Det betyr at denne svarparameteren her, Dette er ikke lenger bare en streng. Fordi vi har fortalt jQuery som kommer her noen JSON, jQuery kommer til å være smart nok til å si, "Du ville JSON?" "Jeg kommer til å konvertere til en assosiativ array for deg." La oss faktisk ta en titt på kategorien Nettverk når vi har quote4.js. Vi kommer til å endre dette og oppdater siden. Nå skal jeg skrive i a-en på nytt. Jeg har gjort et par forespørsler til suggest.php, men nå dette svaret, snarere enn bare strengen, er det JSON. Så jeg har en åpen krøllete brace si: "Her kommer en assosiativ array." 

Den første og eneste nøkkelen av denne assosiativ array kalles symboler, og da er her en rekke av alle de relevante tabeller kommer nå fra Yahoo! Finance, ikke fra det gigantiske listen. Det er hvordan jeg kan rett og slett fylle denne autofullføring plugin med noen data som ikke kommer fra en lokal fil som allerede forutbestemt men fra noe annet. Det viser seg at vi faktisk kan dra nytte av en teknologi som kalles JSONP, eller JSON med polstring, som vil eliminere denne suggest.php mellommann. Men i stedet for å gjøre det, la oss i stedet ta en titt på hvordan jeg kan forbedre dette ytterligere. Jeg liker Bootstrap er Typeahead. Det er virkelig fint. Men vi får gode på JavaScript og vi ønsker å slags gjøre dette selv, kanskje ta en titt på hva denne plugin kan gjøre. La oss bruke ikke lenger så Typeahead ting, og la oss prøve å gjøre denne listen over foreslåtte aksjer selv. Her i quote6.php skal vi begynne på samme måte. Hver gang noen skriver noe, ønsker vi å gjøre en AJAX forespørsel. Dette ligner på vår opprinnelige CS50 Finance Instant. Snarere enn å lage en forespørsel til quote.php, Nå har vi gjort en forespørsel til den samme filen som før, dette suggest.php, som bare kommer til å trekke ut data fra Yahoo! Finance. 

Igjen, er vi fremdeles venter JSON, men nå siden Typeahead ikke gjør dette for oss, Vi trenger også å sende langs verdien som er inne i den aktuelle tekstboksen. Nå vet vi hva vi skal be Yahoo! Finance for, og så nå er her den funksjonen som vi ønsker å gjennomføre når forespørselen er fullført. Vi har ikke plugin for å gjøre listen for oss, så her er hvor vi faktisk kommer til å bygge opp en liste med forslag. For å gjøre det, mye som i PHP vi sammensatt disse store strenger av HTML så vi skrevet dem, kan vi gjøre de samme ting i JavaScript. Først skal vi begynne denne strengen som kalles forslag, og denne strengen er bare kommer til å inneholde noen HTML. Vi vil at det skal være en liste over ting, så vi kommer til å starte med denne listen tag, og nå skal vi iterere over alle symbolene som ble returnert tilbake til oss. Husk, fordi vi har sagt datatype: 'json', dette er ikke en streng. Dette er allerede en rekke for oss. Det er veldig kult. Vi kan bare si: "Jeg vil at du skal legge et listeelement." Vil vi sette det inni en en del i siden av det, Vi skal gi det en klasse for forslag, så vi vet hva det er, og nå er her selve symbolet på at vi kom tilbake fra Yahoo! Finance. 

Når vi har laget et element for hver av de symbolene vi har fått tilbake, Vi ønsker bare å stenge av listen. Så nå forslag representerer denne lille HTML fragment som da satt på en side skal være på listen over ting vi leter etter. Nå la oss faktisk sette det på siden. Å gjøre at jeg har faktisk opprettet en annen tomt div og jeg har gitt det en ID med forslag. Mye som vi setter innholdet i div som ville vise prisen på aksjen data, vi nå bare ønsker å bestemme innholdet i denne div til hva denne strengen er som inneholder disse symbolene. Ved å bruke denne HTML metoden, er dette forslag variabel, denne strengen, en streng av HTML. Jeg vil at du skal ta det HTML og sette den på innsiden av div kalt forslag. Vi har nettopp lagt noe til DOM nå. Vi har lagt til noen nye elementer til DOM at vi nå kan vise på siden. La oss se hvordan dette ser ut. Hvis vi legger i quote6 og nå kommer vi tilbake, nå når jeg begynner å skrive AAPL, har vi ikke lenger at Bootstrap autofullføring, men vi har nå denne listen som vi gjorde oss. Dette er litt styggere enn Bootstrap Typeahead f.eks men det tillater oss å gjøre en annen ting. Når vi ser på den Bootstrap plugin, Vi så at når vi autocompleted, en av de autofullfør verdier var AAPL. Som kanskje ikke er så nyttig. Som bruker, kan jeg ikke umiddelbart gjenkjenner alle aksjesymboler. Hva jeg er nok mer sannsynlig å gjenkjenne er selskapets faktiske navn. Så ville ikke det være veldig nyttig hvis stedet for å si AAPL dette sa noe sånt som Apple Inc. Fordi vi har rullet dette selv, kan vi virkelig enkelt gjøre det. La oss åpne opp vår siste sitatet fil her, så quote7. 

Samme. Jeg har nettopp opprettet en annen PHP-fil som vil komme tilbake til oss mer enn bare symboler. Det vil også gi oss tilbake selskapets navn. Og så gjør vi det samme. Vi gjør en AJAX forespørsel. Når forespørselen er fullført, skal vi utføre denne funksjonen her, og denne funksjonen er kommer til å bygge opp en stor rekke elementer. Men forskjellen her er at verdien av disse listene er ikke lenger bare symbolet, det er nå navnet. Så vi har et lite problem. Når vi bruker vår oppslag, må vi liksom passere den symbolet. Vi kan ikke passere lookup noe som Microsoft Corporation. Vi må passere det MSFT. Når vi skriver HTML, har vi mange fine innebygde egenskaper. En A kan ha forbindelse med det en href eller en klasse. Men hva vi virkelig trenger nå er for hver av disse koblingene å ha et lager symbol forbundet med det. Det er ingen innebygd i HTML-attributt for aksjesymbol, men heldigvis, kan HTML5 oss å lage våre egne attributter for å være det vi ønsker. Ved å si data-symbol, har jeg introdusert en ny attributt hvis navn jeg bare gjort opp, og dette er greit, fordi jeg innledet det med disse dataene. Vi kommer til å lagre innsiden av det symbolet fra lager nå. Hva det betyr er at selv om vi viser verdien av selskapets navn Innsiden av våre autocomplete, er vi fremdeles huske symbolet som er knyttet til hvert enkelt selskap. Måten vi gjør som er inne i dette elementet selv. Så det betyr at vi må gjøre en mer endring. Når vi klikker det nå, må vi faktisk dra nytte av symbolet attributt snarere enn bare sin verdi. Hvis vi opp igjen, legger vi en hendelseshåndterer til forslag. Når en av disse forslagene er klikket nå, ønsker jeg å gjøre noe. Hva jeg vil gjøre er å endre verdien av at boksen. Nå ønsker jeg å sette den samme val funksjonen. 

Så uten noen argumenter denne val funksjonen returnerer til deg hva som allerede er i tekstboksen, men hvis du gir den en streng, det kommer til å ta det streng og sette den inn i tekstboksen. Jeg velger sin tekstboksen på samme måte. Det heter symbol innsiden av form-sitat. Nå er jeg sender den verdien av attributtet data-symbol. Denne saken her er nytt, denne $ (denne). Hva dette refererer til er det elementet som ble klikket på. Vi ser her at vi ikke legger ved et klikk arrangement til hvert element med en klasse av forslag individuelt. Snarere, vi nærmer dette litt annerledes. I stedet vi sier når noe inni denne forslag div, som er husk bare beholderen for listen, hvis noe inne i denne div er klikket, og den har en klasse av forslag, Jeg vil ha denne hendelsen til brann. I utgangspunktet hva dette betyr at vi kan gjøre er at vi kan bruke denne samme hendelseshåndterer for alle de tingene på listen. Så vi trenger ikke å ha en hendelseshåndterer for det første elementet og en annen hendelse behandleren for det andre elementet. Vi kan i stedet si: "Jeg vil ha den samme hendelseshåndterer å gjelde alt i min liste." Men vi trenger å liksom vite hvilket element ble klikket på. Denne "dette" søkeord representerer nettopp det. Dette er gjenstanden som nettopp ble klikket av brukeren. Hvis jeg bare klikket på tredje linken, representerer dette elementet av at tredje link, noe som betyr at jeg kan få sin attributt, data-symbol, som vi vet må inneholde symbolet som er tilknyttet selskapet jeg bare klikket. Hvis vi hopper tilbake til vår økonomiavdeling side, Vi ser nå at når jeg begynner å skrive noe sånt MSFT, vi ikke lenger får bare aksjesymboler, Vi overvåker nå får de faktiske selskaper. Men når jeg klikker på en av disse selskapene, kan vi se at vi faktisk fyller tekstboksen ikke med navnet på selskapet men med hva var lagret inne av disse data attributter. Og så hvis jeg faktisk inspisere en av disse elementene ved å høyreklikke det og klikke Kontroller Element, kan vi faktisk se hvordan dette ser ut. 

Husk dette er noe som vi skapte innsiden av det for loop når vi bygger opp at strengen av HTML. Vi ser her at dette data-symbolet har verdien av MSFT, som er flott. Det er hva vi har ventet. Det er symbolet og det er hvordan vi fikk den verdien som vi trengte å bruke innsiden av denne tekstboksen. Det er nok for sitatet form fordi det er slags kjedelig. La oss bare gjøre noen raske forbedringer i vår portefølje side. Hvis du har brukt CS50 Finance for en stund og du begynner å kjøpe og selge en rekke aksjer, slutt denne tabellen kommer til å bli ganske stor, og du kommer til å ønske et lager ticker, selvfølgelig. Når bordet er virkelig, virkelig stor, kan det være nyttig for brukeren å prøve å søke over den. Innsiden av søkeboksen hvis jeg begynner å skrive noe som Disney og leter etter min Mikke Mus lager, kan vi se at det er nå filtrering basert på hva jeg nettopp skrev i. Denne funksjonaliteten ser super komplisert, men det er veldig, veldig lett med jQuery og JavaScript. Dette portfolio.php filen inneholder en JavaScript-fil som heter portfolio.js. La oss ta en titt på det. Så html, js, portefølje. Her er der vi gjør at søk på bordet. Det første jeg må gjøre er å feste en hendelseshåndterer til at tekstboksen fordi vi vet at vi ønsker at våre filtrering funksjon å skyte hver gang brukeren trykker noe fordi vi ikke har tid til Søkeknapper. Det første vi må gjøre er å finne ut hva brukeren søker etter, akkurat som vi gjorde før. Dette nøkkelordet refererer til det aktuelle elementet brukeren samarbeidsstil. 

Fordi brukeren er i samspill med søkeboksen, $ Dette representerer søkeboksen, så this.val gir oss hva som er på innsiden av søkeboksen brukeren er for tiden å skrive. Så nå hva vi ønsker å gjøre vi ønsker å iterere over alle radene innsiden av vårt bord. For å velge alle radene i tabellen vår, ga jeg at bordet en ID på tabellen portefølje, og hver rad er representert ved en TR element, så denne velgeren kommer til å returnere til meg en stor matrise av alle radene i tabellen. Nå ønsker jeg å iterere over denne matrisen. Jeg kunne du en for løkke, men jQuery faktisk gir oss fin funksjon som heter "hver". Hva hver enkelt gjør er hver tar ett argument, og at argumentet er en funksjon. Hva det kommer til å gjøre er det kommer til å bruke denne funksjonen til hvert element inne i denne listen. Denne funksjonen tar ett argument som er e, og når denne funksjonen er utført, er denne e kommer til å bli erstattet med den første raden, deretter den andre rad, og deretter den tredje rad. Ved denne måten, er dette det samme som å kjøre en for loop og deretter finne det aktuelle elementet basert på indeksen innsiden av for-løkke. Ved hver iterasjon, for hvert av disse elementene i tabellen, Jeg vil sjekke om teksten i elementet - teksten i cellen innsiden av raden - samsvarer med det jeg søker etter. Denne store lang streng av kommandoer er hvordan jeg kunne gjøre det. Først, igjen, dette refererer nå til - fordi det er inne i en ny funksjon - dette er nå gjeldende rad i tabellen. Jeg ønsker å ta den aktuelle raden i tabellen, og jeg ønsker å få alle sine barn. Husk at DOM et hierarkisk tre, noe som betyr at elementene har et antall barn. 

Dette. Barn funksjonen kommer til å returnere til meg tilbake en rekke alle elementene som er barn av, i dette tilfellet, en rad i tabellen. Dette er bare simpelthen cellene inne av raden. Jeg vil bare søke gjennom den første cellen. Dette. Første funksjonen sier gi meg det første elementet i denne matrisen. Deretter teksten funksjonen sier få meg nøyaktig hva som er inne i cellen siden jeg ønsker å søke gjennom teksten. La oss til slutt konvertere den til små bokstaver, slik at vi kan gjøre tekst case insensitive søk. Til slutt ønsker vi å se om det streng inne i en tabell inneholder strengen vi leter etter. Den indexOf funksjon i JavaScript gjør nettopp det. Den forteller oss om denne strengen inneholder en annen streng. Hvis det er sant at cellen inneholder hva jeg søker etter, så jeg vil være sikker på at det er vist. Showet metoden vil si, "Vis elementet." Hvis dette ikke er tilfelle, så betyr det at det jeg søker etter ikke finnes innenfor den raden, og så jeg ønsker å skjule er fra brukeren. Som oppnår det hyggelig filtrering effekt der vi ikke lenger se hele tabellen. Hvis du er interessert i hvordan du gjør dette ticker også, Vi vil legge kilden på nettet. Men det er veldig enkelt. JQuery har fantastisk metoder for disse animasjoner og manipulere CSS egenskaper. Så, det er det for meg. 

Hva ligger så videre? Som du vil se i noen få dager, er den endelige prosjekter forslaget grunn. Den endelige prosjekter forslaget vil stille deg noen spørsmål, men blant dem vil være tre milepæler - en en "god" milepæl, en en bedre milepæl, og en en best. Ideen er virkelig å hjelpe dere satt dine forventninger slik at minimalt du vil være fornøyd med resultatet av den endelige prosjektet og det vil være "gode" så langt som du er bekymret. Men så i interessen for å få deg til å nå bare litt til noe bedre eller noe beste, vil vi også sortere av presse deg mot det også. Den CS50 Hack-a-thon, i mellomtiden, er i et par uker. Vanligvis gjør vi dette på et lotteri basis basis på grunn av interesse, men oddsen er vi tar et par hundre av oss i skyttelbusser fra Harvard Square ned til Kendall Square der Microsoft har en vakker anlegget treffende kalt "nerd" - New England Research and Development Center. Vi får det rundt 20:00 vil vi ha litt mat. Rundt 1 a.m. vil vi ha litt mer mat. Rundt 5 am hvis du fremdeles våken vi hodet over til IHOP eller ta deg tilbake til campus. Målet er å dykke inn endelige prosjekter sammen av klassekamerater og ansatte. Så noen dager senere er CS50 Fair, som er egentlig ment å være en mulighet for dere til å presentere arbeidet ditt og prestasjoner for semesteret mens rubbing skuldre med hverandre og få en følelse av hva alle gjorde. Med det sagt, mange takk til Tommy og Josef, og vi vil se deg på mandag.  [Applaus]