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

Det er CS50. Dette er slutningen af ​​uge 9. Mange tak. Endelig. Uge 9. Jeg fik det. I dag fortsætter vi vores samtale om webprogrammering med et øje mod det endelige projekt, fordi du ikke behøver at gøre noget web-baseret for de endelige projekter, men fordi enten til endelige projekter eller efter CS50 dette er helt sikkert den retning, i hvilken moderne software er i gang. Og alligevel er det faktisk ikke en nem ting. Faktisk er en af ​​de sværeste ting at gøre det aspekt af design. 

For eksempel har vi med design betyder faktisk at få brugergrænsefladen eller brugerens oplevelse højre. Jeg tør sige - og vi ved fra en nylig problem sæt når et par af jer luftet dine kvababbelser om nogle stykke software eller hardware, der infuriates dig, hvad enten på campus eller fra - Der er en masse steder derude, der er en masse af hardware derude, den slags stinker. Men virkeligheden er, at gøre ting, der er nemme at bruge og alligevel er ikke desto mindre magtfulde er en meget vanskelig udfordring. Så for i dag spurgte jeg Joseph og Tommy til at slutte mig op her så vi kan få en samtale, både om design og hvilke typer af tankeprocesser bør begynde at gå gennem dit hoved når du designer dine endelige projekter, dine fremtidige bestræbelser. Og så med Tommy hjælp vil vi se på nogle af de nærmere oplysninger om gennemførelsen. Hvordan kan du have nogle visioner på papir eller i dit sind at du derefter kan udføre programmeringsmæssigt ved at bruge nogle af de teknologier og teknikker, vi har lige begyndt at tale om, nemlig JavaScript og noget endnu nyere, nemlig AJAX, asynkron JavaScript. Det giver dig mulighed for at oprette alle de mere dynamiske af en brugergrænseflade ved at hente flere og flere data progressivt fra en server. Så vi vil se nogle af disse stumper så godt i dag. Som en sidebemærkning, hvis du er interesseret i at koncentrere i datalogi eller minoring i datalogi, ved, at denne fredag ​​ved middagstid i Maxwell Dworkin 221 vil der være en pizza begivenhed hvor du kan lære lidt mere om datalogi. På din vej ud af døren i dag, du vil være i stand til at afhente en uofficiel guide til CS på Harvard. Vi sætter det på papirkurven dåser uden i hoftehøjde så hvis du gerne vil få fat i denne og lære lidt mere om CS, der vil være der for dig, som det var i uge 0. Også hvis du gerne vil slutte sig til os for CS50 frokost denne fredag ​​kl 01:15, hoved til cs50.net/lunch. Uden videre, giver jeg dig undervisning kollega Joseph Ong. Hi. [Bifald] Tak. Første gang jeg hørte om design var i en klasse her kaldet CS179. 

Professoren på det tidspunkt fortalte os historien om en anden professor der var gået til et hotel og brugte vandhaner. Kan nogen fortælle mig, hvad de 2 knapper på venstre og højre gøre? [Studerende] Varmt og koldt. >> Varmt og koldt. Godt. Hvad du normalt forvente, right? Denne professor efter brug af vandhanen ønsker at tage et brusebad, og han fortsætter med at bruge dette. Han mener, at venstre og højre sider er for varmt og koldt, ikke? Men kan nogen fortælle mig, hvad disse rent faktisk gøre? Eventuelle hænder? [Uhørlig student svar] >> Et forslag er? [Uhørlig student svar] >> Temperatur? Så en af ​​dem styrer temperaturen og de andre kontroller? >> [Studerende] vandtryk. Vandtryk. Godt. Denne professor går ind i dette, og tænker som de styrer varme og kulde, vender den rigtige, som han mener er for varmt, hele vejen op fordi han ønsker at tage et varmt brusebad. Nå, har disse ikke rigtig passer sammen, så han får det ikke meget sjov oplevelse af at være i et koldt brusebad, og vi ved alle, hvad det føles. Dette er et eksempel på et design fejl. Hvad jeg mener med det er hans forventning fra vandhanen svarer ikke til, hvad der kom ud af bruser, som er form for uheldig for ham. Så dette er et eksempel på en design fejl, der sker i det virkelige liv. Men vi ser alle mulige andre dem så godt. Vi er nok ikke fans af MBTA systemet. Dette er en undergrundsbane system rent faktisk i London, som siger: "Denne knap er ikke i brug." Hvorfor er det endda på der? Hvorfor har vi selv pleje? Da jeg var barn, er den teknisk dygtige i huset, når computeren ville gå ned, ville min mor kommer til mig, viser mig denne skærm, og spørger mig, hvad der skete. 

Selv jeg ved ikke, hvad det betyder. [Latter] Hvad? [Latter] Nogle gange har vi lyst til softwareudviklere er bare trolling os. Som brugere er vi ligesom, "Hvad sker der? Nogen fortælle os." Alt dette kommer ned til et spørgsmål om design. Design, som vi kan se, er ikke udelukkende om æstetik, det handler ikke om, hvordan tingene ser ud. Vi ser her, at denne lille pop-up herovre faktisk ser ret nice. Det har en slagskygge i baggrunden, har det grænseoverskridende radier foregår. Det er slags smuk. Det er ikke virkelig godt designet, fordi det ikke er meget brugervenlig. Den lille pop-up, der kommer op ikke rigtig give mig nogen oplysninger om, hvad der sker, er det ikke fortælle mig noget som brugeren om, hvordan du gendanner fra denne fejl. Vi ønsker at tænke over tingene, at design ikke. Første, det er ikke æstetik. Det er heller ikke udstopning din app med tonsvis af unødvendig funktionalitet. Hvis du er en thailandsk restaurant, har du sandsynligvis ikke ønsker at være en tandlæge på samme tid. Og med Facebook Spørgsmål, ikke, at mange mennesker har brugt det og det var egentlig ikke kernen i det, de byggede. Og så er det rart at tænke ikke så meget mængden af ​​de ting at du lægger din ansøgning, men kvaliteten og hvordan du laver det brugeroplevelse bedre ved faktisk bedre på, hvad du allerede har. 

I en nøddeskal, fortæller design os, hvad vi skal bygge videre på. For eksempel, hvis vi bygger noget, lad os søge ting op som Google, for eksempel skal vi gøre tingene på en måde, der kræver, at brugeren til at tage masser af klik for at komme til, hvad de vil, eller skal vi gøre det på en måde, for eksempel med Google Instant eller autofuldførelse der lader os komme til vores resultater hurtigere? Engineering indebærer, ligesom Tommy vil vise dig, faktisk bygge det. Der er masser af forskellige typer af design. For eksempel, at hvis du bygger noget implementere noget i et tredje verdens land, hvor der ikke er meget strøm, eller at meget teknologi, du er nødt til at designe hvad du bygger på en måde, som nemt giver adgang til de mennesker der. Men hvad mulige andre design beslutninger kan der være eller kan være involveret i noget som dette? Yeah. Jeg ser en hånd. [Uhørlig student svar] >> Højre. Præcis. Tilgængelighed er én ting. En masse mennesker ikke tænker over, "Hvad med mine brugere?" ligesom de yderste områder af begge frekvenser. Jeg har brugere, der måske har handicap, at jeg ikke tænker på og jeg er bare tænker designe for den almindelige bruger. Internettet er tilgængelige for alle i dag, og jeg skal designe for de mennesker som godt. Hvilke mulige andre design beslutninger kan du gøre? Ja. >> [Studerende] Udgifter. Koste. Meget godt. En anden ting vi kan basere vores design beslutninger på, er omkostningerne. Hvis vi er en virksomhed, du ønsker at bygge noget, der ikke tager meget koster at producere men kan sælge til en særlig høj pris, eller kan få os nogle fortjeneste. 

Disse er alle forskellige typer af design, men når vi er ved at bygge noget på internettet eller når vi er ved at bygge noget, der sandsynligvis ikke koster så meget at bygge op nu, ligesom Internet applikationer - du behøver ikke at smide meget kapital ind i det for at gøre noget, der rent faktisk virker - hvad vi er mere bekymret for er brugeroplevelsen. Vi kalder denne bruger centreret design. Hovedsagelig hvad brugercentreret design indebærer er at sætte jer selv i skoene af dine brugere. Hvis nogen tilmelder sig hvad jeg bygger, de har åbenbart kommet til min særlige ansøgning med et mål for øje, med en opgave, de ønsker at gennemføre. Og dit job er ikke kun at hjælpe dem udføre opgaven men at hjælpe dem udføre opgaven på en måde, der er effektiv, intuitiv, og, som nogle person sagde derovre, tilgængelige. Hvad betyder effektivitet betyder? Effektivitet betyder hvor hurtigt har min bruger fuldføre opgaven givet min interface. Tager det masser af klik for dem at komme fra det ene sted til det andet? Er det trættende? Har de for at udføre masser af gentagne opgaver? Vi ønsker at gøre denne proces så effektiv som muligt så de ikke behøver at gøre den slags ting. Hvad angår intuitiveness, er, for eksempel hvis en bruger ser op min grænseflade, er det nemt for dem at komme fra sted til sted? Er det nemt for dem at finde ud af, hvad de har at klikke i min grænseflade i orden for dem at nå det mål eller opgave, de ønsker at opnå? 

Og endelig, som en person sagde derovre, tilgængelighed er meget vigtigt. [Mandlig taler] Det kommer til tilgængelighed for ting som vision, gerne, hvordan kan jeg faktisk designe noget for nogen, der er blind? Oh. For folk, der ikke kan se på alle, har vi noget, der hedder skærmlæsere. Hvad du skal gøre er, at du skal bygge din hjemmeside på en måde at for eksempel særlige teknologier, hvad vi kalder - Der er masser af ting nu. Jeg tror, ​​der er skærmlæsere kaldet JAWS. En masse af disse ting er afhængige af, hvad vi kalder området regler med henblik på at udlæses til brugeren, hvad der er til stede på siden. For de mennesker, der ikke kan se, skal du sørge for, at disse skærmlæsere kan faktisk hente indholdet på siden og kan faktisk vise dine brugere, hvis du ikke kan se, i det mindste du kan stadig forstå indholdet på siden. Yeah. Okay. Nok taler om godt design. Lad os tale om dårligt design. Disse er ting, du ikke bør gøre. Kan nogen fortælle mig om deres erfaringer med Craigslist og hvad de mener, er ikke så fantastisk ved dette design? Ja. >> [Studerende] Jeg tror, ​​der er for mange ord i et område. Alt for mange ord, ikke? Helt overvældende. Du kommer til denne side, og du er mødt med en hel masse ting heroppe der måske ikke engang noget for dig. For eksempel bor du i en stat, der ikke begynder med dette bogstav. Lad os sige, at du bor i Texas eller noget. 

Du er nødt til at rulle hele vejen ned på siden for at komme til det sted, du befinder dig på. Jeg er fra Boston, så lad mig se i Massachusetts. Hvor er Massachusetts? Oh, det er lige her. Åh, det er Boston. Okay. Lad os se på Boston. [Latter] Temmelig overvældende, ikke sandt? Akavet ting derovre. [Latter] Lad os sige, jeg leder efter et sted at bo. Hvor mange mennesker har faktisk brugt Craigslist? Tonsvis af dig. Der er temmelig dårlige måder at se på dette, men lad os se på dette. Hvad er forskellen mellem img og pic? Kan nogen fortælle mig? Der er faktisk ingen forskel. De betyder præcis det samme, men de har forskellige etiketter til dem for nogle grund. Hvis jeg klikker på Has Image, sker der ingenting på siden. Jeg har faktisk at klikke på Søg igen for at noget skal ske. Hvad der kunne være et bedre design beslutning, der kunne gøres der? Hvis jeg klikker på det filter, jeg sandsynligvis vil filtrere efter den pågældende aktion eller den pågældende kategori. Så i stedet for at skulle trykke på Søg igen, kunne jeg bare automatisk gøre filtreringen slags Google stil, hvor de gør det samme. [Malan] Men ikke danner som vi har set dem hidtil at have fysisk indsendes ved at trykke på Enter i det mindste eller klikke på en knap? Som du har set dem så langt, du faktisk nødt til at klikke på Send for at gøre disse ting. 

Men da Tommy vil vise dig i en anden, er der faktisk måder for dig sådan, at når du klikker på den ting den kan automatisk sende hvad vi kalder en AJAX anmodning og få data tilbage og filtrere dine resultater øjeblikkeligt. Der er tonsvis af ting, der er galt med dette interface. [Malan] kan du søge efter Cambridge? Der er noget lidt unormal her, hvor du holder af Cambridge og alligevel du får Westford, Spring Hill, West Newton og lignende. Sandsynligvis ikke ideel. >> Sandsynligvis ikke ideel. Hvordan kan jeg være i stand til at gøre brugerens oplevelse bedre på netop denne side? Ja. >> [Studerende] instruktioner. Okay. Instruktion i hvad slags fornuft? [Studerende] For eksempel en ting for første gang brugere, der ikke engang ved, hvad Craigslist er eller du ikke ved hvad du skal gøre. Right. Så forklare, hvad Craigslist er på denne side er vigtig. Vi kan faktisk fortælle brugerne, hvad denne side er faktisk for. Hvis jeg bare besøger denne, ser jeg en hel masse steder. Jeg ved ikke engang, hvad de betyder. Men endnu vigtigere, bare at kigge på denne grænseflade, huske, at jeg var nødt til at rulle ned et ton af ting at finde en bestemt samfund at jeg faktisk plejet om på dette. Hvad er en hurtigere måde jeg kunne gøre det? Ja. [Studerende] Opdel dem op i øst, vest regioner. >> Okay. Jeg kunne opdele dem i flere kategorier, der kunne hjælpe mig hurtigere bestemme hvordan du kommer til det pågældende sted. [Studerende] Sæt en drop-down liste. >> Højre. Okay. Jeg kunne bruge en drop-down menu, fordi vi har et fast sæt af ting og vi kunne vise dem i en drop-down menu. På den måde er det ikke optager så meget plads på skærmen. Men endnu bedre end det, hvad kan vi gøre? Ja. >> [Uhørlig student svar] >> Kan du sige det igen? >> [Studerende] søgefeltet. Ja, et søgefelt. Det er godt. Hvad vi rent faktisk kan gøre, er, hvis vi ser tilbage på dias, søgefeltet. Autocomplete. Meget nem måde at søge gennem resultater, som du ved er i et sæt. Hvis jeg begynder at skrive BO, bare vise mig alle de resultater, der har BO inde i dem. På den måde kan jeg meget nemt finde den særlige, jeg ønsker at gå til stedet for at skulle bladre gennem dette virkelig store liste. 

Disse er alle mulige virkelig lavt hængende frugter, som en person, der gennemfører Craigslist kan faktisk gøre for at gøre oplevelsen på hjemmesiden meget bedre for deres særlige bruger. Okay. Nok taler om dårlige hjemmesider. Lad os tale om Facebook. Da Facebook kom ud, og især Facebook-billeder, der var masser af andre tjenester på det tidspunkt, der kunne gøre præcis de samme ting. De kunne organisere dine billeder i albummer. Hvad du kan gøre, er du kunne organisere dem i sæt så godt. Du kan organisere dem efter dato. Du kan gøre alle disse særlige ting. Men er der nogen vide, hvad der gjorde Facebook fotos eksplodere på det tidspunkt, det blev frigivet? Ja. >> [Studerende] Emner. >> Tags. Præcis. Vi har Milo herovre, der er vores hund maskot med det CS50 bandana. Du kan se, at vi har denne tagging funktion i midten. Og hvad gjorde Facebook-billeder så interessant ud fra et usability synspunkt er, at det faktisk tillod folk via dette at inddrage deres venner i deres fotos. For Facebook, da deres hjemmeside er særlig social det handler om at opbygge denne form for social atmosfære. Det forbedrede oplevelse af billeder meget mere fordi de rent faktisk kan begynde at sige: "Det er forbindelser mellem mennesker, og disse er fotos om mennesker du rent faktisk holder af. " En del af det er også slags narcissisme. Folk kan lide at blive tagget på fotos og sådan noget. Selvom det ikke er nødvendigvis en god menneskelig egenskab, på samme tid, det er baseret på gode design beslutninger fordi folk rent faktisk bekymrer sig om ting som dette. Så det er Facebook-billeder. 

Men lad os snakke Facebook mere generelt. Jeg er sikker på masser af mennesker her har meninger om Facebook, både gode design beslutninger og dårlige designbeslutninger. Så lad os lufte eller være glad. Kom nu. Jeg kender alle du bruger Facebook. Nogen er nødt til at have noget dårligt at sige eller noget godt at sige om det. Ja. [Studerende] I news feed der er en masse ting, jeg ikke virkelig bekymrer sig om. Nyheden foder gør vise en masse ting, du måske ikke holder af. Du har venner på Facebook, som du ikke har mødt i 2 eller 3 år og du kan se deres nyheder resultater dukker op i din news feed og du behøver ikke virkelig bekymrer sig om det. Facebook har faktisk gjort en indsats for at gøre dette bedre, og de har faktisk prøvet at skubbe relevante resultater til toppen af ​​news feed som for sent så du faktisk se tingene af venner, der er relevante for dig eller dine nære venner. Noget andet? Ja. [Uhørlig student svar] >> Kan du sige det igen? [Studerende] Annoncerne er relativt diskret. >> I hvilken forstand? [Uhørlig student svar] De har ikke lys på skærmen, ligesom bannere. Okay. Det er godt. Hvis du husker internettet fra 90'erne - >> [Malan] jeg var der. >> Han var der. [Latter] Du kan måske huske blinkende GIF'er baggrunde, funklende ting, GeoCities stil slags ting. Det er virkelig ikke et eksempel på et godt design fordi det er virkelig distraherende fra indholdet. The Yale kunst hjemmeside bruges til at have animerede GIF'er som deres baggrund og du kunne ikke læse noget på siden, men jeg gætte nogen rent faktisk talte med dem, og nu er det en smule anderledes. [Malan] Det er meget bedre nu. >> Det er meget bedre nu, som du kan se. >> [Malan] Oh yeah. Lige stor, blot - Ja. Okay. 

En del af det er også at gøre din side muligvis meget minimalistisk og meget forståeligt så ting på siden flow på en måde, der er meget logisk og ikke komme i vejen for hinanden. Hvilke mulige andre ting er gode om Facebook eller dårligt om Facebook? Lad os bare få et design samtale her. Oh. Hvor? Yeah. [Studerende] Den nye Timeline system giver dig mulighed for at søge personens profil om deres fortid. Ooh, Timeline. Timeline er en stor ting, fordi det lader dig stilk dine venner tilbage, når de var i high school. Timeline er godt, fordi det lader dig filtrere gennem indhold meget hurtigere, det kan du finde ting, som ellers ville have taget dig en virkelig lang tid at finde bare at rulle op og ned, op, op, op, op, op, ligesom gå tilbage i tiden. Men så er der også en slags downside til at med hensyn til brugerens oplevelse. Hvad kan det være? Big ord, der begynder med P-R. >> [Studerende] Privacy. >> Privacy, right? Privatlivets fred er en kæmpe brugeroplevelse spørgsmål. Dette er en af ​​de ting jeg hader mest om Facebook nu. [Latter] [Malan] Som gør jeg nu. David var ikke klar over dette rent faktisk er sket indtil i går. Så nu ved han, at hver gang jeg chatte ham jeg ved, at han har været ignorerer mig. [Malan] Den akavet del var jeg faktisk ignorerede ham, og jeg vidste ikke, han vidste, at jeg ignorerede ham. [Latter] Privatlivets fred er et enormt problem. Kan nogen her fortælle mig hvad der kunne være dårligt om Facebook privatliv ud over det faktum, at de gør ting som dette? Hvad er det særligt svært at gøre med hensyn til Facebook privatliv? Den slags er et ledende spørgsmål. Ja. >> [Studerende] Skjul dine billeder fra bestemte personer. Right. Præcis, for at skjule dine billeder fra bestemte personer. De har denne lille, lille knap i øverste højre, hvor du kan skifte privatlivets fred for et foto. Deres privatliv muligheder er meget varieret mellem forskellige former for menuer. 

De har fået en meget bedre om det for nylig, men det plejer at være tilfældet at når du ønskede at forhindre dine venner i at se billeder, ville du nødt til at gå gennem en meget kompliceret 5-trins proces for at være ligesom, Lad mig på dette link, lad mig klik igen, lad mig klik igen, Lad mig angive, hvilke folk kan ikke se mine billeder. Det er ikke særlig god på Facebooks side fordi så meget om brugerens oplevelse faktisk give dem frihed at kontrollere, hvad folk kan se. Vi kalder denne bruger kontrol og frihed. Hvis du ikke lader dine brugere gør det på en måde, der er effektiv og intuitiv, så din brugeroplevelse er egentlig ikke så stor på alle.  Vil du fyre gerne sige noget om Facebook? Hvordan slår jeg dette fra? [Ong] Du kan ikke slå dette fra, og det er en enorm usability fejl på den del af Facebook. Denne funktion - jeg faktisk kiggede ind i det i går - det er enten, at du ikke kan gøre det, eller det er begravet et eller andet sted meget, meget dyb i fordybningerne i Facebook, fordi jeg ikke kan finde ud af at deaktivere denne funktion på alle. [Malan] Men nogle gange disse beslutninger er ikke indlysende fordi du fyre har givet os en masse nyttig feedback på forskellige CS50 ansøgninger og hjemmesider, kurset anvender. Vi har ikke gennemført alle disse ønsker og forslag. 

En del af dette er for at få så mange anmodninger, at det er en funktion af tiden, men nogle gange er vi bare gøre en bevidst beslutning lignende, "Tak for forslaget, men vi er uenige." Så hvordan kan du faktisk beslutte, hvad du skal gøre, hvis dine brugere synes du skal gøre noget selvom du ikke nødvendigvis? Det er en fin balance mellem faktisk lytter til, hvad dine brugere siger og rent faktisk at have en form for linje, hvor du siger, "Vi kommer ikke til at gøre, hvad disse brugere siger." Og i særdeleshed, tror jeg, at der var et citat af Henry Ford, der opsummerer denne op temmelig godt. "Hvis jeg havde spurgt folk, hvad de ønskede, ville de have sagt, at de ville have hurtigere heste." Kan nogen sortere af drille hinanden, hvad det citat egentlig betyder? Det er ikke bare, at brugerne ved, hvad de vil, men det er mere, at - [Studerende] De ved ikke, hvad der er muligt. I del de ikke ved hvad der er muligt. Drille at udover en lille smule mere. Hvad mener du med det? [Uhørlig student svar] Det er godt. Hvad jeg tror, ​​vi prøver at sige her er, at folk ved, hvad de vil have. De vil have hurtigere heste. Hvad de virkelig ønsker, er evnen til at bevæge sig hurtigere, men de ikke rigtig kender mediet til at nå det. Når du kommer til dine brugere og dine brugere fortælle dig noget og de fortæller dig, "Vi ønsker, at disse funktioner og disse funktioner, og disse funktioner," du ikke ønsker at nødvendigvis tænker over, "Lad mig gå videre "Og gennemføre, hvad de udtrykkeligt siger," men hvad du ønsker at tænke på er, "Hvad slags idéer kan jeg få ud af det?" Hvad vil de egentlig have? 

Og derfra hvad du kan gøre, er at designe noget, der opfylder disse anmodninger men ikke nødvendigvis på den måde, at brugeren forventer, at være opfyldt. Så for noget afsluttende projekter i meget faste priser, hvad er en nyttig heuristisk når det kommer til at gøre noget bedre, især hvis designeren har denne arrogance om ham hvor du slags vide hvad der er bedst, kan du tage input fra dine brugere, men hvordan kan du faktisk gå om at få det feedback? I sidste projekter, meget konkret, hvad producerer optimale resultater her? Hvad producerer optimale resultater - og jeg vil gå over dette i en anden - er denne proces med at udvikle og derefter teste og derefter iteration. Hvad jeg mener med test er som regel, når du designe noget du synes, det er temmelig godt, som, "Jeg er sådan en stor designer. Alle vil elske det her." Og så skal du sætte det derude, og folk ikke rigtig lide det eller anden grund. Hvad du skal gøre, er du nødt til at tage de dele af ting, som folk gør ligesom og forny de ting, som folk ikke kan lide. Det lyder som en meget indlysende proces, men denne proces af konstant iteration på toppen af ​​hvad du allerede har bygget, er en proces, der hjælper dig ikke blot forbedre dine egne design færdigheder, men også hjælper dig med at forfine design så folk rent faktisk sætter pris på dit produkt endnu mere, end de gjorde før. 

Jeg vil gå over mere konkrete eksempler på, hvad du kan rent faktisk gør. Som en slags sidste eksempel på et produkt, så lad os se på KAYAK. KAYAK når det kom ud var meget, meget populære. Kan nogen gætte hvorfor? Hvad er den slags ting, du godt kan lide ved dette, hvis du har brugt det eller hvad er den slags ting, du ikke kan lide? Ja. >> [Uhørlig student svar] >> Okay. Det er en del af det er at lade brugeren have en forespørgsel, der er mere ekspansiv end en meget restriktiv en som "Du er nødt til at vælge din startdato "Og du er nødt til at vælge din slutdato." I virkeligheden lader det du være fleksibel om det, og det giver dig alle de flyvninger i dette område. Noget andet? [Studerende] De omfatter honorarer i prisen. De gør omfatte gebyrer i prisen. De skatter og ting faktisk gå lige ind denne pris i øverste venstre hjørne så du ikke narret til at tro, at du rent faktisk er betaler for en $ 240 fly når det er rigtig 330 USD. Noget andet? Ja. [Uhørlig student svar] Jeg er ikke sikker på, om de rent faktisk lade dig gøre det. Jeg kan være forkert. Det kunne være en interessant ting, hvis du ønsker at lægge mere vægt på bestemte filtre således at de skubber resultater relateret til dette filter til toppen. Men kan nogen fortælle mig, hvad der er så specielt ved denne venstre side? Hvordan har du traditionelt kigge op en flyvning på en internettjeneste, før dette? 

Ja. >> [Uhørlig student svar] >> Kan du sige, at - [Studerende] Hver flyselskab. >> Yeah. Hvert flyselskab har sin egen hjemmeside. Det konsoliderer ting. Og? [Studerende] Du ved præcis, hvad tid du tager afsted. Du ved præcis, hvad tid du forlader, men relateret til filtrene i særdeleshed. Lad mig trække op KAYAK. Åh Gud, pop-ups. Bad brugeroplevelse. Hvad sker der, når jeg flytter denne skyder? [Studerende] Automatiske opdateringer. >> [Ong] Automatiske opdateringer. Det er noget, der er meget vigtigt. Før dette, når du ønskede at slå op en flyvning du havde at sætte i dit input placering, dit output placering, tryk på Søg, det ville behandle det og vise dine resultater. Hvis du ønskede at ændre din forespørgsel, ville du nødt til at trykke tilbage to gange, indtaste i en ny forespørgsel fra bunden, og derefter gøre det igen og igen. Det gode ved sådan noget er det bruger en meget [uforståelige] ting i midten. Når du gør noget som dette, det skyder en anmodning og det bringer dig alle resultaterne med det samme. Denne form for øjeblikkelig feedback er noget, der gjorde KAYAK vildt populære fordi det er virkelig nemt for mig bare at ændre min forespørgsel og at finde ud af de ting, der er omkring et bestemt område uden at skulle gå frem og tilbage, frem og tilbage, frem og tilbage. Så disse er alle mulige ting, du ønsker at tænke på, når du designer din hjemmeside. Hvordan kan jeg gøre det meget effektivt for mine brugere til at gå igennem, hvad de arbejder med og at komme til deres endelige mål så hurtigt som muligt? [Malan] Og til Josefs punkt tidligere om brugerne ikke nødvendigvis at vide, hvad de ønsker, baseret på, hvad du fyre nu kender HTML og du har afkrydsningsfelter, radioknapper, vælge menuer, indtastningsfelter og lignende, hvordan ville du gennemfører begrebet plukke et starttidspunkt for en flyvning? 

Hvilke af disse forskellige UI mekanismer ville du bruge? Hvis du bare vide mængden af ​​HTML, der blev undervist før og du kender de input er radioknapper, afkrydsningsfelter, drop-nedture, og indtastningsfeltet, hvad ville dit naturlige valg har været til plukning datoer? [Elev] Input. >> Input. Eller måske endda en drop-down med alle de datoer, right? Så med mere komplekse UI mekanismer som dette på venstre side, som du kan gennemføre, du kan gøre denne proces langt mere intuitiv med en skyder fordi tiden er kontinuerlig, og folk normalt ikke tænker på det i form af diskrete bidder. Ok. Sidste ting. Ti usability heuristikker. Alle de ting, vi talte om formentlig falder ind under en af ​​disse kategorier. Hvis du går til dette link, som områderne vil blive lagt online, vil du faktisk være i stand til, da du designe dit websted, husk da disse heuristik i tankerne og disse tommelfingerregler. For dine projekter, jeg hvad foreslår du gøre for at designe din app bedre er at gøre papir prototyping først. Når du tænker på din ansøgning, meget hurtigt at skitsere, hvad du vil have det til at ligne og sørge for alle boksene er anbragt på en måde, der er meget intuitiv for brugeren at anvende og endda vise disse papir prototyper til dine venner og begynde fokusgrupper. Bare få 2 eller 3 mennesker sammen og bede dem om at bare trykke på disse papir prototyper, og vise dem nye skærme at se, om de rent faktisk forstår, hvad der foregår. 

Hvad du ønsker at gøre er at give dem en opgave, motivere denne opgave, og bare give dem den app og lad dem bruge det. Må ikke give dem instruktioner ud over dette. Du ønsker at rent faktisk lade dem interagere med din app på en måde, der lader dig se hvordan de ville bruge det, hvis du ikke stod ved siden af ​​dem. Og det er meget vigtigt. Det vil give dig masser af indsigt, at folk får omkring bestemte ting på en måde, jeg ikke havde til hensigt dem til? Er de ved hjælp af bestemte UI mekanismer på skærmen på en måde, der er slags Hacky? Jeg havde ikke til hensigt for dem at gøre det på den måde. Og når du er færdig med det, hvad vil du gøre? Dit design klipper, right? Hvad du ønsker at gøre, er du ønsker at udvikle og derefter gøre denne proces igen. Så vis det til venner, når du har udviklet det, teste det, udvikle, afprøve, udvikle, teste, gentage, om og om og fremad. Design er en meget iterativ proces i denne forstand. Du faktisk nødt til at bygge noget, og derefter indse ting om det at du ikke var klar før, og gå tilbage og forbedres fra det. Nu, som for udviklingen del, er det, hvad Tommy vil vise dig efter pausen og hvordan du kan være i stand til at gennemføre noget som autofuldførelse på en måde, er forholdsvis enkel. [Malan] Som Tommy opstiller her, et spørgsmål så. En masse af de tidligste websites - og da sagde Josef 1990'erne stil hjemmeside, Det var implementeringer, hvor, hvis du ønskede at vælge et starttidspunkt og et sluttidspunkt, helt ærligt, tilbage i dag, og selv om nogle hjemmesider i dag, den måde du gør dette, er du vælger en time fra en drop-down, du vælger minutter fra en drop-down, måske du vælger AM, PM og så du kan gøre dette 3 gange mere. Og så med 6 klik og måske nogle rulle din bruger kan faktisk give en form for dato og / eller tidsinterval i denne forstand. 

Så absolut suboptimal og alligevel hidtil har vi ikke set nogen udtryksfulde muligheder på et af de sprog, vi har kigget på at gøre noget mere sexet som denne skyder af starttidspunkt og sluttidspunkt. Men hvis du tænker tilbage til uge 0, når vi talte om Scratch, der også var der ikke widgets, der bare gjorde visse ting. Du virkelig bare havde disse grundlæggende som loops og betingelser og lignende. Så slags bare tænke meget abstrakt nu, uafhængigt af de oplysninger om HTML, hvad der virkelig foregår med noget som dette starttidspunkt og sluttidspunkt skyderen? Når jeg flytter min mus, og jeg klikker på den lille gulerod symbol på venstre og begynde at trække, programmeringsmæssigt, hvad er det du ønsker at være i stand til at gennemføre at få til at ske? Hvilke spørgsmål, hvad boolske udtryk, du ønsker at være i stand til at spørge? Hvad der virkelig foregår? Sammy? [Studerende] Hvor er markørens position? >> Godt. Hvor er markørens position? Det var noget vi behov for at udtrykke tilbage i Scratch, hvorvidt det var baseret på placering eller endda farve eller lignende. Du husker muligvis nogensinde så kortvarigt på mandag var der alle disse ting kaldet begivenheder i verden af ​​internettet, så og der er ting som onclick og onkeypress og onkeyup og onmouseover og onMouseOut. Så indse, at selv disse ting, vi har taget for givet på nettet med sites som Facebook og Gmail, selvom du ikke har nogen idé hvordan ville du muligvis implementere det fordi der er intet selv ligesom det i forelæsning eller Problem Set 7, indse, at med netop disse samme nøgletal, med HTTP og parametre og GET og POST, med de grundlæggende HTML input, som vi har kigget på hidtil og i et øjeblik med de programmatiske mekanismer, Tommys om at indføre kan du begynde at udtrykke dig, ligesom du gjorde i uge 0 ved meget intuitivt at trække og slippe. 

Så med det sagt, Tommy MacWilliam og nogle nye puslespilsbrikker for os til web. Ok. Mit navn er Tommy og jeg har tænkt mig at tale om JavaScript. Bare en disclaimer: Jeg er af den opfattelse, at JavaScript er den bedste programmeringssprog i hele hele verden. Der er masser af folk der er uenige med mig, men det er bare fantastisk. Når du går tilbage til C, hvis du nødt til at skrive C for en anden klasse eller nogle andre sprog, det er bare virkelig frustrerende i alle de lavniveau detaljer du skal få kørt ned i. Så hvis du nogensinde føler ked hvor irriterende C er at skrive, bare gå tilbage, skrive noget JavaScript. Det er nirvana. Du vil føle sig meget bedre om din dårlig dag. En stor del af magien i JavaScript kommer fra dens evne til at manipulere tingene der allerede er på siden. Da vi skrev vores PHP-scripts, blev de henrettet på serveren, og i sidste ende, at PHP script formentlig udsende nogle HTML. Denne HTML blev sendt til kunden, og så det var det. Hvis PHP ønskede at tilføje en knap til en side, for eksempel, kan det ikke rigtig gøre det. Det ville have til at gøre en helt ny HTML-fil og sende den til browseren. Med JavaScript ved vi, at vi kan opdatere ting, mens de er allerede på siden, og på grund af dette kan vi give meget mere øjeblikkelig feedback, som virkelig vil forbedre brugeroplevelsen på vores hjemmeside. Bare en hurtig resumé af JavaScript selectors. Vi ved, at når vi henter en HTML-side, der kommer til at være repræsenteret i DOM. 

DOM huske er netop denne store træ, hvor elementer er relateret på denne store hierarki. Da vi arbejdede med databaser i Pset 7, en af ​​de første ting, vi har brug for at vide, hvordan at gøre, var forespørge i databasen. Vi har denne store brugere bord, og undertiden vi vil bare sige, "Jeg ønsker kun nogle af disse brugere, der matcher nogle betingelse." Tilsvarende når vi har DOM vi har brug for en måde at forespørge den. Vi har brug for en måde at sige: "Jeg vil have alle knapperne, der ligner dette "Eller alle billeder på siden." Og disse vælgere tillader os at gøre det. Så bare en hurtig resumé. Denne første her, det # indsende, hvad der er at gå for at vælge? Er der nogen huske? [Uhørlig student svar] >> Ja, præcis. Dette vil vælge et element på den side, der har en ID på send. Og så at hash tag siger dette vælgeren kommer til at arbejde med ID'er. Hvad med den anden, det her. Centreret, hvad vil det vælge? Yeah. >> [Studerende] Klasse. >> Præcis. Dette skal nu til at vælge med klassen. Forskellen mellem ID og klasse her er generelt ID skal være unikt indenfor uanset plads, du søger over. Så hvis du ledte over en hel webside, du virkelig bør kun have 1 element med, at visse ID, så i dette tilfælde indsende. Med klasser, på den anden side kan man have mere end en bestanddel på den samme side med samme klasse. Dette kan være nyttigt for at sige jeg ønsker at vælge alt, hvad der er centreret på siden snarere end blot 1 ting. 

Og endelig denne sidste her er lidt mere kompliceret, men hvad er dette vil vælge fra DOM? [Uhørlig student svar] >> Hvad er det? [Elev] Alt, hvad der er en tag. >> Vi har 2 dele her. Den anden del vil sige, at jeg vil vælge disse tags med et tag af input, så ethvert element, er et input-tag. Men jeg ønsker ikke at bare vælge alle indgange fordi noget som en submit knap kunne være en indgang og noget som en tekstboks kunne være en indgang. Så med disse firkantede parenteser jeg siger jeg kun ønsker at vælge de elementer der er af typen tekst. Et sted i min HTML-tag jeg har en attribut kaldet type, og værdien af ​​denne attribut skal være tekst. Så hvad med denne første del her? Det første ord i denne selector er form så jeg har et mellemrum og derefter dette input del. Hvad betyder det gøre, at sætte den form foran det? Dette vil stort set begrænse vores forespørgsel. Det kunne være tilfældet, at vi har nogle input på siden der er ikke efterkommere af en formular. Hvad dette vil gøre, er dette vil sige, at jeg kun ønsker input tags, der har et eller andet sted over dem nogle forælder element i en formular. Og så på den måde kan vi gøre disse mere hierarkiske forespørgsler så vi ikke bare nødt til at vælge alt matcher en given selector. Vi kan slags grænse rækkevidden af ​​denne forespørgsel til noget andet. Så nu, at vi ved, hvordan du vælger elementer på siden, lad os snakke lidt om AJAX. AJAX er en stadig meget trendy forkortelse for asynkron JavaScript og XML. Det bare så sker det, at XML er bare en måde at repræsentere data. 

Den slags tabt popularitet for nylig, så X i AJAX ikke bruges hele tiden. Dybest set, hvad AJAX giver os mulighed for at gøre gøre HTTP-anmodninger af den sammenhæng, JavaScript. Når vi er i vores web-browser og vi navigerer rundt sider, og vi klikker på et link, hvad vores browser vil gøre, er at en HTTP-anmodning til uanset link vi klikker. Men det er ikke altid ideel, fordi hvis det er tilfældet, så som David sagde, vi altid nødt til at brugerne klikker på en Send-knappen eller klikke på et link for at gøre noget ske, at der kommer til at involvere en HTTP-anmodning. Så med AJAX kan vi gøre disse anmodninger på vegne af JavaScript. Det betyder, når brugeren interagerer med siden eller der sker noget, vi kan faktisk gøre en programmatisk anmodning til en anden PHP-fil på vores hjemmeside eller noget andet og hente de data, den pågældende fil spytter ud. Lad os tage et kig på et eksempel på AJAX. Dette er vores CS50 Finance side med som forhåbentlig nogle af os er fortrolige med. Hvis vi ser på HTML på denne side, vi ser her, at jeg har tilføjet et par ting, hvoraf jeg har givet denne formular et ID. Jeg har sagt id = "form-citat". Jeg har gjort dette bare fordi det kommer til at gøre det en lille smule nemmere at vælge fra DOM da jeg bare kan lave en meget simpel forespørgsel. Hvad jeg ønsker at gøre her er jeg ønsker at fastsætte nogle problem med CS50 Finance. Så hvis vi går til finance.cs50.net, hver gang jeg ønsker at få et tilbud, jeg er nødt til at klikke på dette Få Citat knap, og det Få Citat knappen og derefter tager mig til en anden hel side. Og hvis jeg vil have et tilbud, jeg nødt til at ramme Back-knappen og derefter jeg skrive det i, Jeg får et tilbud, og jeg ramte knappen Tilbage. Dette er virkelig ikke den bedste brugeroplevelse. Hvem ville virkelig bruge hjemmesiden, hvis det er så længe om at komme aktiekurserne? Så hvad vi ønsker at gøre med AJAX er at fjerne dette skridt for at gå til en separat side for at se resultaterne. 

Hvad vi virkelig kun beder om, er, at virkelig lille pris, og det er bare en rigtig lille mængde data. Så der er ingen grund for mig at gå en anden hele HTML-side, downloade en helt ny batch af HTML, måske hente nogle flere billeder, nogle andre CSS filer bare for mig at besvare dette meget enkle spørgsmål af, hvor meget koster denne bestand omkostninger. Med AJAX kan vi gøre dette til en hel del lettere. Vi ser herned, jeg forbinder i en JavaScript-fil, der hedder quote.js. Lad os faktisk åbne den pågældende fil. Ikke der. Alle mine JavaScript-filer vil blive placeret i HTML således at webbrowseren kan få adgang til det. Så har vi en separat mappe her for JavaScript, og nu her er quote.js. Øverst i denne fil dette står her, at jeg ønsker at vente på at hele siden skal indlæses før jeg forsøger at gøre noget. Hvorfor er det nødvendigt? Det viser sig, at det næste jeg har tænkt mig at gøre her er starten på udkig efter et element der matcher nogen selector. Hvis denne JavaScript nogensinde er udført før dette element er indlæst på siden, så alt, hvad jeg prøver at gøre, er ikke at gå på arbejde fordi jeg har tænkt mig at forsøge at vælge noget, der er der ikke endnu. Så denne linje op top siger jeg vil have dig til at vente, indtil alt er indlæst så vi er garanteret, at eventuelle elementer, jeg leder efter, er faktisk på siden. Denne dollartegn betyder her Jeg bruger biblioteket kaldet jQuery. Denne jQuery bibliotek giver os mulighed for at bruge disse vælgere, at vi bare kiggede på. Ved at sige $ derefter passerer ind som et argument dette # form-citat, Jeg er nu at vælge denne form, at vi bare tog et kig på. Nu har jeg en repræsentation af denne form i hukommelsen eller anden måde. 

På dette objekt nu, er denne repræsentation af formen Jeg er nu ved hjælp af en funktion kaldet til. Hvad denne funktion gør, er det kommer til at vedhæfte en hændelseshandler. Den begivenhed, vi vil lytte til er den submit begivenhed. Så når brugeren klikker der send-knappen eller trykker Enter, denne begivenhed kommer til at skyde. Ved at hægte ind i dette, kan jeg nu tilsidesætte standardindstillingen opførsel af formularen. Uden denne JavaScript ville formularindsendelse til, hvad PHP-fil vi brugte i dette søgsmål attribut. Men i stedet, jeg nu siger, vent, vent, vent, jeg vil ikke have dig til faktisk at gøre det. Jeg ønsker, at dette skal ske, før du gå og prøv at underkaste sig nogle PHP-fil. Nu hvad vil jeg gøre? På dette punkt, jeg ønsker at bruge AJAX eller anden måde at indlæse i, hvad prisen af ​​bestanden er. Den første ting jeg har brug for at vide er, hvad bestand brugeren ser op. For at gøre, at jeg har tænkt mig at bruge en anden selector. Dette er den tredje vælgeren vi kiggede på før. Det siger, at jeg ønsker at starte denne form element med en id på form-citat. Derefter et sted inde i den form der være et input element der har et navn på symbol. Hvis vi ser tilbage på vores HTML, så vi, at vi havde et input [name = symbol]. Det betyder, at det vil markere, at tekstboks, som brugeren er at skrive ind. Det er dejligt. Vi har tekstboksen. Nu er vi bare nødt til at vide, hvad der er inde i den. For at gøre, at vi kan kalde denne metode her, det her. Val, og det siger jeg, hvad tekstboks, du har. Jeg vil have dig til at fortælle mig, hvad det er brugeren indtastede i denne tekstboks. Nu har vi en streng kaldet symbol, der er lig med hvad brugeren skrevet i. Det er dejligt. Vi kan bruge denne streng nu for at gøre vores anmodning. Dette er en ny funktion her, denne $, undtagen vi ikke længere vil være at vælge elementer, vi kommer til at kalde en anden funktion, der er givet os jQuery. Denne AJAX funktion er hvad der rent faktisk kommer til at gøre denne HTTP-anmodning. Så vi er nødt til at fortælle det et par ting. Den første ting, vi er nødt til at fortælle denne funktion er, hvor jeg ønsker, at anmodningen om at gå. Et sted i mit projekt har jeg denne fil inde i HTML mappe kaldet quote.php. Jeg kan få adgang til denne fil, så vi, ligesom dette, hvis jeg går til localhost / quote.php. 

Jeg vil have min JavaScript til at gøre en anmodning til den pågældende side. Hvilken type anmodning nu? Vi så før, at den form har denne metode = "post" attribut, og det betyder, at det kommer til at gøre en POST anmodning, så det kommer ikke til at sætte noget i URL'en, snarere end en GET-anmodning, der ville bare blive fyret, hvis vi bare åbnede side med web browser, for eksempel. Nu har vi sagt, at jeg ønsker at gøre en HTTP POST-anmodning til en side placeret på quote.php. Når vi sender formularen, husk vi kunne få adgang til input elementer inde i denne formular med $ _POST variabel. Hidtil i den historie, vi har faktisk ikke sendt langs alle data endnu. Vi har bare sagt, at vi laver en AJAX anmodning og her er den type anmodning kan vi laver. Nu skal vi faktisk sende nogle data til siden. For at gøre, at vi kan bruge denne egenskab kaldet data. Værdien af ​​denne egenskab er faktisk et associativt array. Grunden til dette er det muligt for os at sende mere end bare 1 stykke data. Det er derfor, vi har disse krøllede parenteser her indlejret i disse andre krøllede parenteser. Tasterne i disse associative arrays vil være det samme som dem navnet egenskaber i vores formelementer. Det betyder, at hvis jeg sender langs en nøgle symbol, Det betyder min PHP side kan få adgang til disse data med $ _POST [symbol] ligesom vi gjorde før, da vi fik at indsende en formular. Og nu er de faktiske data, vi ønsker at sende bliver værdien indersiden af ​​dette associative array. 

Vi gemt denne tekst i en variabel kaldet symbol, og så vi sender langs nu en nøgle symbol og en værdi af, hvad brugeren har indtastet i. Nu har vi gjort denne HTTP-anmodning, vores PHP filen er udført, og det kommer til at sende nogle data tilbage nu til kunden, som netop har gjort denne anmodning. Nu er vi nødt til at reagere på, hvad serveren sagde til os. At gøre, at vi har denne sidste egenskab her kaldet succes. Værdien af ​​denne succes nøgle faktisk kommer til at være en funktion, og dette er en af ​​de virkelig seje ting, du kan gøre med JavaScript. Ikke alene kan du få int'er eller arrays som en værdi inde i en associativ array, Vi kan også have en funktion. Så ved at sige succes, dette er min nøgle. Et kolon siger her kommer værdien, og nu værdien af ​​dette er faktisk en funktion. Så vi behøver ikke at give denne funktion et navn i sig selv. Vi kan blot sige dette vil være en funktion. Det kommer til at tage 1 argument. Argumentet til denne funktion vil være uanset server har sendt os tilbage fra anmodningen. Ligesom når vores browser fremsætter en anmodning, serveren sender noget tilbage og browseren viser det, i forbindelse med AJAX vi lige lavet en forespørgsel, sendte server noget tilbage, og nu har vi det repræsenteret som en streng. Med denne streng jeg vil bare gerne vise, at på siden. For at gøre, at jeg har tænkt mig at have en sidste selector. Jeg ønsker at vælge elementet med ID prisen. Dette er blot en tom div, at jeg har lavet en på siden, og jeg ønsker at indstille indholdet af denne div til at være, hvad serveren sendte os tilbage. Jeg har faktisk modificeret quote.php en smule. 

Snarere end at kalde render og realisere nogle side, quote.php nu er simpelthen kommer til at udskrive værdien af ​​aktien som en streng. Så hvis du skulle faktisk besøge siden, ville du bare se, at lille streng uanset aktiekursen er. En sidste ting vi skal gøre her, er bare sørg denne funktion returnerer falsk. Hvad dette siger er, at hvis jeg er inde i en hændelseshandler og at hændelseshandler returnerer false stedet for at returnere sand, det betyder, at jeg ikke ønsker den oprindelige begivenhed til at skyde. I dette tilfælde har vi, hvis vi ikke havde nogen JavaScript og indsendt en formular, vores web browser kommer til at sige, "Jeg har tænkt mig at sende disse data sammen," og de kommer til at sende dig til en anden side. Fordi vi bruger AJAX nu, er der ingen grund til at sende brugeren til en anden side. Vi vil bare vise resultaterne dynamisk på samme side. Vi virkelig ikke vil have dem til at gå nogen steder, og jeg ønsker at bo på samme side. Så ved at returnere falsk, sikrer vi, at formularen ikke gøre det for os. Lad os tage et kig på, hvad det rent faktisk ser ud. Vores citat side ser ens ud. Lad mig trække op inspektøren hernede, så vi kan se, hvad der foregår. Gør det til en lidt mindre enorm. Husk, hvis vi åbner fanen Netværk, det er her vi kan se alle de HTTP-anmodninger der sker på siden. 

For et symbol lad mig skrive i AAPL og klik Få Citat. Nu har vi så, at en del af Apple koster nogle flere dollars bare dukkede op på siden, men URL'en ikke ændre på alle. Faktisk er her en HTTP-anmodning, som vi lige har lavet. Vi lavede en POST anmodning til quote.php. Det giver mening. Det er, hvad serveren sendte os tilbage. Det er ikke længere denne gigantiske HTML-dokument med billeder og sådan noget, det er bare en tekstlinje, og så må vi bare viste tekstlinjen. Hvis vi går tilbage til overskrifterne og se, hvad vi rent faktisk har sendt inde i denne HTTP-anmodning, vi kan se ned her, at vi sendte langs en nøgle symbol og en værdi på AAPL, hvilket er, hvad brugeren har indtastet i. Det er rart, men det er stadig lidt irriterende. Jeg har stadig nødt til at klikke på denne knap for at få aktiekursen. Vi er travle mennesker, og vi har ikke tid til at klikke på knapper. Google indset dette for lidt siden, da de implementeret Google Instant. Hvad Google Instant gør, er som du skriver det bare begynder at vise resultater for dig så du ikke behøver at bekymre sig om selv klikke på Søg. Faktisk, en sjov historie knyttet til denne. Når Google Instant kom ud, var folk som, "Whoa, det er super fantastisk." "Det er så cool." Og en elev ned på Stanford, der var 19 på det tidspunkt gjorde dette websted kaldet YouTube Instant. Alle YouTube Instant gør, er effektivt søge på YouTube med det samme. Så i stedet for at skulle gå til YouTube.com og ramte Søg, når jeg begynder at skrive ind på YouTube Instant noget CS50, vi kunne se her, at det er at forsøge at på en langsom internetforbindelse udfylde disse resultater bor. For at gøre, at vi faktisk kan gøre en meget simpel modifikation til vores quote.js fil. Lige nu er vi fastgøre denne begivenhed, når formularen er sendt. Vi har ikke rigtig lyst til at gøre brugeren indsende denne form længere, så lad os i stedet affyre denne begivenhed hver gang brugeren trykker på en tast. For at gøre dette lad os først ændre begivenheden fra underkaste sig keyup. Det betyder, at i stedet for at vente på den formular til at indsende, hver gang der trykkes på tasten, er noget vil ske. Det ikke længere giver mening at knytte denne keyup begivenhed til hele form. Vi virkelig kun bekymrer sig om det søgefelt. 

Hvis du vil vælge det nu, kan vi ændre dette for at være, snarere end form-citat, form-citat, og vi vil have en indgang (type = text) eller vi kunne sige (navn = symbol) - hvad vi vil. Nu er der en sidste ting, vi skal gøre. Husk hernede, da vi sagde return false vi sagde vi ikke ønsker, at standard-begivenhed til brand. Men det bare så sker det, at hvis vi deaktivere det nu, uanset hvad vi skriver i kommer ikke til at dukke op i browseren længere fordi det ville være standard opførsel for at skrive i en tekstboks. Vi ønsker ikke længere at tilsidesætte det, så lad os ødelægge denne return false. Hvis vi gemmer det og genindlæse siden, nu når jeg begynder at skrive AAPL vil du se, at aktiekursen på bunden her er ved at afslutte automatisk. Så her er CS50 Finance Instant. Faktisk en sjov historie om YouTube Instant er, at studerende lige slags skrev det som en 1-nat-projektet, og den næste dag blev han tilbudt et job af YouTube CEO. Så så simpelt er det, du CS50 studerende, kan dine endelige projekter får du et job hos YouTube. Noget i den stil er en virkelig cool idé til et afsluttende projekt, right? Vi havde nogle eksisterende funktionalitet, som vi ønskede at integrere med. Vi forbedrer brugeroplevelsen en lille smule, og pludselig søger noget på YouTube Instant kunne være en hel del lettere end at søge efter det på regelmæssig YouTube. Så det er AJAX i en nøddeskal. 

I eksemplerne, at Joseph var viser, oplevede vi en masse autocompletes, og disse autocompletes er virkelig, virkelig praktisk, fordi vi ikke behøver at huske - For eksempel, hvis du ikke kan huske aktiekursen for Apple og vi bare ved det er aa noget, snarere end bare at sige til mig, "En del af denne ting koster så mange penge," Jeg vil slags gerne vide, hvad bestandene starter med aa. Vi kan gøre, som virkelig pænt med Bootstrap bibliotek, der allerede er inkluderet indersiden af ​​CS50 Finance. Hvis du kommer herop til JavaScript-tag og rul ned til Typeahead, Dette er blot en nice plugin, at nogen allerede skrev for os, og vi kan sagtens bruge sin funktionalitet som denne. Jeg har skrevet i en A og her er en liste over nogle stater, der starter med A. Lad os sige, at jeg synes, det er virkelig cool, og det er tid for mig at medtage dette på min side. Det viser sig, at dette er virkelig, virkelig simpelt. Lad os springe over her til quote3.js. Min fil ser en lille smule anderledes. Hernede alle mine AJAX ting er den samme. Jeg ønsker at indlæse beholdningsdataene uden at skulle gå til en anden side. Men nu vil jeg bruge dette plugin. Den Bootstrap Dokumentationen har gode eksempler på, hvordan netop jeg kan gøre det. Jeg vil gerne sige, "Her er den indgang, som jeg gerne vil autofuldførelse på," og jeg har tænkt mig at kalde denne funktion kaldet typeahead, og det kommer til at håndtere alle de Typeahead ting for os. Det vil initialisere listen, vil det gøre alle vores filtrering. Det eneste, den har brug for at vide er, hvad data, vi autocompleting på. Så jeg fandt ud af denne tast blot ved at læse dokumentationen og ser på eksemplerne. Hvis jeg giver det en nøgle kilde, værdien af ​​denne nøgle er blot nogle vifte af ting, jeg gerne vil Autofuldførelse. Denne variabel kom fra denne anden fil. Jeg åbner symbols.js. 

Dette symbols.js er bare det virkelig, virkelig store array indeholdende strenge af alle disse aktiesymboler fra NASDAQ. Hvis jeg ønsker at springe tilbage til HTML, så jharvard, vhosts, globalhost, html, skabeloner, quote_form. Da der nu hedder quote3.js, lad mig ændre JavaScript-fil jeg også her. Nu har jeg quote3.js, så jeg har tænkt mig at indlæse i at separat JavaScript-fil, den, der har at Bootstrap autocomplete. Nu når jeg hopper tilbage til browseren, genindlæse siden, og jeg begynder at skrive aa, Der er min autocomplete. Og det var virkelig så simpelt er det. Jeg havde 1 linje kode, der bare sagde: "Her er de ting, jeg gerne vil autofuldførelse på," og pludselig har jeg det virkelig, virkelig rart funktionalitet med ikke en hel masse indsats på alle. Som du udvikler hjemmesider og især den forreste ende side af tingene, du vil finde dette er tilfældet en masse. Der er en masse, masse, masse virkelig cool gratis biblioteker derude der gør det super nemt at gøre ting som dette. Kan nogen komme i tanke om nogen ulemper for blot autocompleting på denne store liste af symboler? Hvad kunne være noget, der er ikke den bedste med denne fremgangsmåde? Yeah. >> [Studerende] Tid, hvis du har en masse [uhørlig] Yeah. Lige nu er vi henter denne enorme JavaScript-fil, og der er en masse symboler. Og så hvis vi har et væld af ting, dette kunne slags øge latensen af ​​ikke blot at søge men også at downloade den faktiske fil. Great. Noget andet? Lige nu er der ingen reel følelse af relevans. Hvis jeg skriver i en A, de virksomheder, der dukker op her måske ikke de mest populære virksomheder, der starter med A. 

Før jeg kommer til Apple, kan det tage nogle flere tegn til at finde, hvad jeg leder efter. Denne autocomplete har ikke denne følelse af relevans. Det er bare at sige, "Alt, hvad der matcher jeg har tænkt mig at vise." I stedet for det, ville jeg gerne en eller anden måde integrere en vis betydning i mine søgninger. Hvis jeg går over her til Yahoo! Finance, finance.yahoo.com, Hvis jeg forsøger at indtaste et symbol på Yahoo! Finans side og jeg begynder at skrive goog, jeg har denne fin lille liste over ting. Det er klart, det ligner Yahoo! Finans gør noget mere smart her. De har en vis relevans og de har også yderligere oplysninger ligesom navnet på bestanden. Det er noget, som jeg ikke rigtigt kan komme med blot min bestand liste over symboler. Jeg vil have denne, og så jeg har tænkt mig at tage det. For at gøre dette lad os gøre et par ting. Lad os først åbne inspektøren på denne side fordi vi så, at denne side ikke er ladning på alle, så det er formentlig ved hjælp af AJAX eller anden måde at være indlæse sine data. Vi kan finde ud af, hvilke data det er indlæst. Hvis jeg klikker på dette fanen Netværk, er disse vil være alle de anmodninger, der begynder at blive fyret. Nu, hvis jeg skriver i goo, kan vi se, at jeg har lige fået en ny HTTP-anmodning. Dette er sandsynligvis hvor de pågældende data kommer fra. Sure nok, hvis jeg ser på denne webadresse, som er en smule mærkeligt navn, Vi kan se, at dette er præcis, hvor Yahoo sender fra sine data fra. 

Jeg har oprettet en separat fil kaldet suggest.php, der er meget ens i ånd til opslag funktion. Det er dybest set kommer til at gøre en forespørgsel til Yahoos URL, komme tilbage nogle data, og sende det tilbage til mig. Nu, i stedet for at bruge denne store, enorm liste af symboler, Jeg kan bruge Yahoos pæne relevans ting, og jeg behøver ikke at hente det massive JavaScript-fil. Jeg vil kun trække ned de faktisk relevante aktiesymboler. Lad os hoppe ind i det. Så html, js. Vi er nu i quote4. Nu er vi ikke længere bruger den store liste af JavaScript-filer. Men der er en lille form for design problem her. Vi har sagt, at A i AJAX er asynkron. Hvad det betyder, er, at når jeg laver et AJAX anmodning, så lige her på linie 8, er dette hvor min AJAX anmodning er faktisk fyret. Lad os sige nu har jeg noget kode ned her, kommer til at gøre nogle ting gerne advare brugeren eller ændre noget på siden. Hvad kommer ikke til at ske, er browseren ikke kommer til at vente på denne anmodning om at fortsætte før kommer ned og rammer denne linje. Det er den asynkrone del. Det kommer til at gøre denne anmodning og sige: "Når du er færdig, "Komme tilbage og kalde denne funktion, som jeg fortalte dig at ringe inde i succes." Det betyder, at vi kan ikke bare hente alle de bestande forhånd. Vi er nødt til at gøre anmodningen og vente på noget at vende tilbage. Det betyder, at før, kunne vi blot fortælle Bootstrap, "Her er en liste over ting, jeg vil have dig til autocomplete på." Vi kan ikke længere gøre det længere, fordi vi ikke kender hvad vi ønsker rent faktisk at autofuldførelse på. Heldigvis Bootstrap tænkte på dette, fordi de er smarte fyre derovre, og de faktisk gav os en anden måde at indlæse denne Typeahead plugin. Før, at værdien af ​​denne kilde egenskab var netop denne store vifte af ting at autocomplete på. 

Nu kilden egenskaben er faktisk en funktion, og formålet med denne funktion er at regne ud, hvad de ting til Autofuldførelse er. Den måde, det kommer til at regne det ud, er det kommer til at spørge Yahoo! Finans hvad de bedste ting at autocomplete er. For at gøre, at jeg har tænkt mig at lave en meget lignende AJAX anmodning. Jeg har tænkt mig at anmode om denne side på suggest.php. Jeg vil sende langs symbolerne stadig. Og nu er min succes, Bootstrap dokumentation fortalte mig at det for at udfylde denne liste over de ting, alt hvad jeg behøver at gøre er gå i denne række nu til callback funktion. Men vent et øjeblik. Hvis dette skulle være et array og AJAX sender mig tilbage tekst, hvordan er det muligt? Dette introducerer en ny måde at udveksle data kaldes JSON. I dette tilfælde er vi ikke bare sender tilbage en simpel tekststreng. Nu vi har at gøre med dette mere komplekse liste af aktiesymboler. Disse aktiesymboler kan også omfatte ting som firmaets navn eller de aktuelle priser. Bare bruge en stor lang snor, der ikke er formateret på nogen forudsigelig måde kommer ikke til at være den bedste måde at få disse data fra Yahoos server til mig på en måde, som jeg nemt kan forstå. JSON er en teknologi, der udnytter hvordan vi skaber associative arrays i JavaScript. Det ser meget gerne et JavaScript associative array, og i virkeligheden, er det, fordi det er. JSON står for JavaScript Object Notation. Dette er grundlæggende et aftalt format til overførsel af data frem og tilbage. Her denne JSON objekt eller denne JSON associative array sender mig nogle oplysninger om et kursus. 

Nøglerne til dette array er ting som kursus, der har en værdi af CS50, og hernede kan vi se, at jeg kan have en værdi, der er et array. Jeg behøver ikke at gøre ting som frasortere strygere og lede efter kommaer og gøre skøre ting som dette. Da dette er deklareret i denne JSON format, JavaScript og jQuery allerede har funktioner til at konvertere en streng der ligner denne JSON til en egentlig JavaScript associativt array at vi kan arbejde med. Doing, der er så simpelt som at sige, at der ikke længere er denne fil, suggest.php, sende mig tilbage blot en tekststreng, men jeg ved, at det kommer til at sende mig tilbage JSON. Det betyder, at der JSON kan omdannes til et JavaScript associative array. Og så jQuery, vil jeg gerne have, at gøre det for mig. Det betyder, at denne reaktion parameter her, Dette er ikke længere bare en streng. Fordi vi har fortalt jQuery, at her kommer nogle JSON, jQuery vil være smart nok til at sige, "Du ville JSON?" "Jeg har tænkt mig at konvertere det til et associativt array for dig." Lad os faktisk tage et kig på fanen Network, når vi har quote4.js. Vi vil ændre dette og genindlæs siden. Nu jeg har tænkt mig at skrive i en-en igen. Jeg har lavet et par anmodninger til suggest.php, men nu er denne reaktion, snarere end blot strengen, er det JSON. Så jeg har en åben klammeparentes sige: »Her kommer et associativt array." 

Den første og eneste nøgle i denne associative array kaldes symboler, og her er en opstilling af alle relevante symboler kommer nu fra Yahoo! Finance, ikke fra det gigantiske liste. Det er, hvordan jeg kan simpelthen udfylde denne Autofuldførelse plugin med nogle data, der er ikke kommer fra en lokal fil, der allerede forudbestemt men fra noget andet. Det viser sig, at vi faktisk kan drage fordel af en teknologi kaldet JSONP, eller JSON med polstring, vil der fjerne denne suggest.php mellemmand. Men i stedet for at gøre det, så lad os i stedet tage et kig på, hvordan jeg kan forbedre dette endnu mere. Jeg kan virkelig godt lide Bootstrap s Typeahead. Det er virkelig rart. Men vi får gode til JavaScript, og vi ønsker at slags gør det selv, måske tage et kig på, hvad dette plugin kunne gøre. Lad os ikke længere at anvende denne Typeahead ting, og lad os prøve at gøre denne liste over foreslåede bestande os selv. Her i quote6.php vi vil starte på samme måde. Hver gang nogen typer noget, vi ønsker at gøre en AJAX anmodning. Dette svarer til vores oprindelige CS50 Finance Instant. Snarere end at gøre en anmodning til quote.php, vi nu gør en anmodning til den samme fil som før, denne suggest.php, der er bare at trække data fra Yahoo! Finance. 

Igen, vi er stadig forventer JSON, men nu da Typeahead ikke gør dette for os, vi også nødt til at sende langs den værdi, der er inde i den nuværende tekst boksen. Nu ved vi, hvad de skal spørge Yahoo! Finance for, og så nu her er den funktion, at vi ønsker at udføre, når anmodningen er fuldført. Vi har ikke et plugin for at gøre listen for os, så her er der vi skal faktisk kommer til at opbygge en liste over forslag. For at gøre dette, meget gerne i PHP vi sammenkædet disse store strenge af HTML så vi trykt dem, kan vi gøre nøjagtig de samme ting i JavaScript. Først vil vi starte denne streng kaldet forslag, og denne streng er bare at indeholde nogle HTML. Vi ønsker det skal være en liste over ting, så vi vil starte med denne liste tag, og nu skal vi til at gentage over alle de symboler, der blev returneret tilbage til os. Husk, fordi vi har sagt datatype: 'JSON', dette er ikke en streng. Det er allerede et array for os. Det er virkelig cool. Vi kan blot sige: "Jeg vil have dig til at tilføje et element på listen." Vi vil sætte det ind et et element i siden af ​​det, vi vil give det en klasse af forslag, så vi ved, hvad det er, og nu her er det symbol, vi fik tilbage fra Yahoo! Finance. 

Når vi har oprettet et element for hver af de symboler, vi har fået tilbage, Vi ønsker blot at lukke listen. Så nu forslag repræsenterer dette lille HTML fragment at når de sættes på en side vil være en liste over ting, vi leder efter. Lad os nu rent faktisk sætte det på siden. For at gøre, at jeg faktisk har lavet en anden tom div, og jeg har givet det en ID af forslag. Meget ligesom vi sætter indholdet af div, der ville vise prisen på beholdningsdata, vi nu bare ønsker at sætte indholdet af denne div til, hvad denne streng er der indeholder disse symboler. Ved at bruge denne HTML metode, er dette forslag variabel, denne streng, en perlerække af HTML. Jeg vil have dig til at tage det HTML og sætte det ind i div kaldet forslag. Vi har lige vedhæftet noget til DOM nu. Vi har tilføjet nogle nye elementer til DOM, at vi nu kan vise på siden. Lad os se hvad det ligner. Hvis vi lægger i quote6 og nu kommer vi tilbage, nu, når jeg begynder at skrive AAPL, vi ikke længere har denne Bootstrap autofuldførelse, men vi har nu denne liste, som vi gjorde os selv. Dette er en lille smule grimmere end Bootstrap Typeahead, for eksempel men det gør tillade os at gøre en anden ting. Da vi ledte på det Bootstrap plugin, så vi, at når vi automatisk kompletteret, en af ​​de autocomplete værdier var AAPL. Det er måske ikke være så hjælpsomme. Som bruger, kan jeg ikke umiddelbart genkende alle de aktiesymboler. Hvad er jeg nok mere tilbøjelige til at anerkende, er virksomhedens faktiske navne. Så ville det ikke være rigtig nyttigt, hvis stedet for at sige AAPL dette sagt noget som Apple Inc. Fordi vi har rullet det os selv, kan vi virkelig nemt gøre det. Lad os åbne vores sidste citat fil her, så quote7. 

Samme ting. Jeg har lige oprettet en anden PHP-fil, der vil vende tilbage til os mere end blot symboler. Det vil også give os tilbage selskabets navne. Og så gør vi det samme. Vi laver en AJAX anmodning. Når anmodningen er afsluttet, vil vi udføre denne funktion her, og denne funktion vil opbygge en stor streng af elementer. Men forskellen her er, at værdien af ​​disse lister er ikke længere kun et symbol, det er nu navnet. Så vi har et lille problem. Når vi bruger vores opslag, skal vi en eller anden måde passere det symbolet. Vi kan ikke passere lookup noget som Microsoft Corporation. Vi er nødt til at passere det MSFT. Når vi skriver HTML, vi har masser af nice indbyggede egenskaber. En A kunne have tilknyttet en href eller en klasse. Men hvad vi virkelig har brug for nu, er for hver af disse links at have en aktiesymbol forbundet med det. Der er ingen indbygget HTML attribut for lager symbol, men heldigvis, HTML5 giver os mulighed for at skabe vores egne egenskaber til at være, hvad vi vil. Ved at sige data-symbol, har jeg indført en ny attribut hvis navn jeg lige gjort op, og det er okay, fordi jeg indledte det med disse data. Vi kommer til at gemme inde i der et symbol fra lager nu. Hvad det betyder, er, at selv om vi får vist værdien af ​​selskabets navn inde i vores autofuldførelse, vi stadig huske symbol der er tilknyttet hver virksomhed. Den måde, vi laver, der er inde i dette element i sig selv. Så det betyder, at vi er nødt til at lave en mere forandring. Når vi klikker på det nu, er vi nødt til rent faktisk at drage fordel af symbolet attribut snarere end blot sin værdi. Hvis vi op igen, lægger vi en hændelseshandler for forslag. Hvis ét af disse forslag er klikket nu, jeg ønsker at gøre noget. Hvad jeg vil gøre, er at ændre værdien af ​​denne indtastningsfeltet. Nu vil jeg indstille denne samme val funktion. 

Så uden nogen argumenter denne val funktionen returnerer til dig, hvad er allerede i tekstfeltet, men hvis du giver det en streng, det vil tage at strengen og sætte det ind i tekstfeltet. Jeg vælger sin tekstboks på samme måde. Det navn er symbol inde i formular-citat. Nu Jeg sender det værdien af ​​attributten data-symbol. Denne ting her er ny, denne $ (this). Hvad dette henviser til er det element, der blev klikket på. Vi kan se her, at vi ikke er knyttet et klik begivenhed til hvert element med en klasse af forslag individuelt. Snarere, vi nærmer dette lidt anderledes. I stedet vi siger, når noget indersiden af ​​dette forslag div, som huske er blot beholderen til denne liste, hvis noget inde i denne div er klikket, og det har en klasse af forslag, Jeg ønsker, at denne begivenhed til at skyde. Dybest set, hvad dette betyder, at vi kan gøre, er at vi kan genbruge den samme hændelseshandler for alle de ting på listen. Så vi behøver ikke at have en hændelseshandler for det første element og en anden event handler for det andet element. Vi kan i stedet sige: "Jeg vil have den samme hændelseshandler skal gælde for alt i min liste." Men vi er nødt til en eller anden måde vide hvilket element blev klikket. Denne "dette" nøgleordet repræsenterer netop det. Dette er det objekt, der netop er klikket af brugeren. Hvis jeg bare klikkede 3. link, dette repræsenterer den del af det 3:e link, hvilket betyder, at jeg kan få sin attribut, data-symbol, som vi ved skal indeholde det symbol, der er tilknyttet den virksomhed, jeg lige har klikket på. Hvis vi hopper tilbage til vores økonomiafdeling side, Vi kan nu se, at når jeg begynder at skrive noget som MSFT, vi ikke længere får blot aktiesymboler, vi nu at få de konkrete virksomheder. Men når jeg klikker på et af disse selskaber, Vi kan se, at vi faktisk er befolker tekstboksen ikke med navnet på den virksomhed, men med hvad blev gemt inde for disse data attributter. Og så hvis jeg faktisk inspicere et af disse elementer ved at højreklikke det og klikke Inspect Element, kan vi faktisk se, hvad det ligner. 

Husk dette er noget, vi skabte inde i det for-løkke da vi var ved at bygge op, at streng af HTML. Vi kan se her, at disse data-symbol har værdien af ​​MSFT, som er stort. Det er, hvad vi havde forventet. Det er symbolet og det er, hvordan vi fik den værdi, at vi skulle bruge inde i dette tekstfelt. Det er nok for citatet form, fordi det er lidt kedeligt. Lad os bare gøre nogle hurtige forbedringer til vores portefølje side. Hvis du har brugt CS50 Finance i et stykke tid, og du begynder at købe og sælge en masse af lagrene, i sidste ende denne tabel vil få temmelig store, og du vil have en bestand ticker, selvfølgelig. Når bordet er meget, meget stor, kunne det være nyttigt for brugeren at forsøge at søge over det. Inde i søgefeltet, hvis jeg begynder at skrive noget som Disney og leder efter min Mickey Mouse lager, kan vi se, at bordet nu er filtrering baseret på hvad jeg lige har skrevet i. Denne funktionalitet ser super kompliceret, men det er virkelig, virkelig nemt med jQuery og JavaScript. Denne portfolio.php fil indeholder en JavaScript-fil kaldet portfolio.js. Lad os tage et kig på det. Så html, js, portefølje. Her er hvor vi laver, at søge på bordet. Den første ting jeg skal gøre, er vedhæfte en hændelseshandler til at tekstboks fordi vi ved, at vi ønsker, at vores filterfunktion til at fyre hver gang brugeren trykker noget, fordi vi ikke har tid til søgning knapper. Det første, vi skal gøre, er at finde ud af, hvad brugeren søger efter, ligesom vi gjorde før. Dette søgeord refererer til den aktuelle element brugeren interagerer med. 

Da brugeren interagerer med søgefeltet, $ Dette repræsenterer søgefeltet, så this.val giver os, hvad der er inde i søgefeltet brugeren skriver iøjeblikket. Så, nu er hvad vi ønsker at ønsker vi at gentage over alle rækkerne indersiden af ​​vores tabel. Hvis du vil vælge alle rækkerne i vores tabel, jeg gav denne tabel et id af tabellen portefølje, og hver række er repræsenteret ved en TR element, så denne vælger vil vende tilbage til mig en stor vifte af alle rækker i mit bord. Nu vil jeg gentage over det array. Jeg kunne du en for-løkke, men jQuery faktisk giver os nice funktion kaldet "hver." Hvad den enkelte gør, er hver tager et argument, og dette argument er en funktion. Hvad det kommer til at gøre, er det kommer til at anvende denne funktion til hvert element inde i denne liste. Denne funktion kræver ét argument, der er e, og når denne funktion er udført, er denne e vil blive erstattet med den første række, derefter den anden række, og den tredje række. Ved denne måde, er det det samme som at køre en for-løkke og derefter regne det aktuelle element er baseret på indeks indersiden af ​​dit for-løkke. Ved hver iteration, for hver af disse elementer i tabellen Jeg ønsker at kontrollere, om teksten i element - teksten af ​​cellens indvendige af rækken - matcher hvad jeg søger efter. Denne store lange række af kommandoer er, hvordan jeg kunne gøre det. Først igen, denne henviser nu til - fordi det er inde i en ny funktion - dette er nu den aktuelle række i tabellen. Jeg ønsker at tage den aktuelle række i tabellen, og jeg ønsker at få alle sine børn. Husk, at DOM er en hierarkisk træ, hvilket betyder, at elementerne har et antal børn. 

Dette. Børn funktion vil vende tilbage til mig tilbage et array af alle elementer der er børn af, i dette tilfælde en række i tabellen. Det er simpelthen cellerne inde i rækken. Jeg ønsker bare at søge over den første celle. Dette. Første funktion, siger give mig det første element i denne array. Så teksten funktionen siger få mig præcis, hvad der er inde i denne celle da jeg ønsker at søge over denne tekst. Endelig, lad os konvertere det til små bogstaver, så vi kan gøre tekst case ufølsomme forespørgsler. Endelig ønsker vi at se, om denne streng inde i en tabel indeholder strengen vi leder efter. Den indexOf funktion i JavaScript gør netop det. Det fortæller os, hvorvidt denne streng indeholder en anden streng. Hvis det er sandt, at cellen indeholder, hvad jeg søger efter, så jeg vil være sikker på, at det er vist. Showet metode vil sige, "Vis element." Hvis dette ikke er tilfældet, så det betyder, hvad jeg søger efter, er ikke indeholdt inden for denne række, så og jeg ønsker at skjule, er fra brugeren. Det opnår at nice filtrering virkning, hvor vi ikke længere se hele tabellen. Hvis du er interesseret i, hvordan man gør dette ticker så godt, vi vil sende kilden online. Men det er meget simpelt. JQuery har awesome metoder for disse animationer og manipulere CSS egenskaber. Så det er det for mig. 

Hvad så ligger forude? Som du vil se i et par dage, den afsluttende projekter forslaget skyldes. Det endelige projekter Forslaget vil stille dig et par spørgsmål, men blandt dem vil være tre milepæle - den ene en "god" milepæl, en bedre milepæl, og en en bedste. Ideen bliver virkelig at hjælpe jer angive dine forventninger så minimalt du vil være tilfreds med udgangen på din endelige projekt og det vil være "gode" så langt som du er bekymret. Men så af hensyn til at få dig til at nå bare en lille smule til noget bedre eller noget bedst, vil vi også sortere af skubbe dig mod at så godt. Den CS50 Hack-a-thon, i mellemtiden, er i et par uger. Typisk, vi gør dette på et lotteri basis basis på grund af interesse, men odds er vi vil tage et par hundrede af os i shuttlebusser fra Harvard Square ned til Kendall Square hvor Microsoft har en smuk facilitet rammende kaldes "NERD" - New England Research og Development Center. Vi får der omkring 8 pm Vi skal have noget mad. Omkring 01:00 vil vi have nogle flere fødevarer. Omkring 5 am, hvis du stadig vågen vi hovedet over til IHOP eller tage dig tilbage til campus. Målet er at dykke ned i afgangsprojekter ved siden af ​​klassekammerater og personale. Så et par dage senere er det CS50 Fair, der er virkelig tænkt som en mulighed for jer at fremvise dit arbejde og resultater for semestret mens gnide skuldre med hinanden og få en fornemmelse af, hvad alle gjorde. Med det sagt, mange tak til Tommy og til Joseph og vi vil se dig på mandag.  [Bifald]