[Powered by Google Translate] [Week 9, vervolg] [David J. Malan - Harvard Universiteit] [Hierdie is CS50. - CS50.TV] 

Dit is CS50. Dit is die einde van die week 9. Thank you very much. Finaal. Week 9. Ek het dit. Vandag is ons voortgaan om ons gesprek oor die web programmering met die oog op die finale projek nie, want jy het iets te doen web-gebaseerde vir finale projekte nie, maar omdat een vir finale projekte of na CS50 hierdie is beslis die rigting waarin moderne sagteware gaan. En tog is dit nie eintlik 'n maklike ding nie. Trouens, een van die moeilikste dinge om te doen is om die aspek van die ontwerp. 

Byvoorbeeld, deur die ontwerp bedoel ons eintlik om die gebruikerskoppelvlak of die gebruiker se ervaring. Ek daresay - en ons weet uit 'n onlangse probleem stel wanneer 'n paar van julle uitgesaai jou klagtes oor 'n stuk van sagteware of hardeware wat jy infuriates, hetsy op die kampus of af - daar is 'n baie van die sites daar buite, daar is 'n baie van die hardeware daar buite, daardie soort van suig. Maar die werklikheid is dat die maak van dinge wat is maklik om te gebruik en tog is tog kragtige is 'n baie moeilike uitdaging. Dus, vir vandag het ek het Josef en Tommy gevra om saam met my hier sodat ons kan 'n gesprek, beide oor die ontwerp en watter soort van denkprosesse moet begin gaan deur jou kop wanneer jy die ontwerp van jou finale projekte, jou toekoms streef. En dan met Tommy se hulp sal ons kyk na sommige van die implementering besonderhede. Hoe kan jy 'n visie op papier of in jou gedagtes wat jy dan kan programmaties voer deur gebruik te maak van sommige van die tegnologie en tegnieke het ons net begin praat, naamlik JavaScript en selfs iets nuwer, naamlik AJAX, asynchrone JavaScript. Wat jou toelaat om al die meer dinamiese van 'n gebruikerskoppelvlak te skep haal meer en meer data geleidelik vanaf 'n bediener. So ons sal sien 'n paar van daardie stukkies sowel vandag. As 'n eenkant, indien u belangstel in konsentreer in rekenaarwetenskap of minoring in rekenaarwetenskap, weet dat hierdie Vrydag op die middag in Maxwell Dworkin 221 daar sal 'n pizza gebeurtenis waar jy kan 'n bietjie meer leer oor rekenaarwetenskap. Op jou pad uit die ingang van vandag sal jy in staat wees om af te haal 'n nie-amptelike gids tot CS aan die Harvard. Ons sal dit op die vuilnisemmer buite by die middellyf hoogte sodat as jy wil om dit te gryp en te leer om 'n bietjie meer oor CS, wat sal daar wees vir jou as dit was in week 0. Ook as jy wil om ons aan te sluit vir CS50 middagete hierdie Vrydag op 01:15, kop te cs50.net/lunch. Sonder verdere uitstel het, ek gee jou onderrig mede Joseph Ong. Hi. [Applous] Dankie. Was die eerste keer wat ek geleer het oor die ontwerp in 'n klas wat hier genoem CS179. 

Die professor by die tyd het ons vertel die storie oor 'n ander professor wat gegaan het om 'n hotel en gebruik word om die kraan. Kan iemand vir my sê wat die 2 knoppies aan die linkerkant en reg te doen nie? [Student] Warm en koue. >> Warm en koue. Goed. Wat jy normaalweg verwag, reg? Hierdie professor na die gebruik van die kraan wil 'n stort te neem, en hy gaan voort om dit te gebruik. Hy dink die linkerkant en die regterkant is vir warm en koue, reg? Maar kan iemand my vertel wat dit eintlik doen? Enige hande? [Onhoorbaar student reaksie] >> Een voorstel is? [Onhoorbaar student reaksie] >> Temperatuur? So een van die temperatuur en die ander kontroles beheer? >> [Student] Water druk. Water druk. Goed. Hierdie professor loop in hierdie, en dink hulle is die beheer van warm en koue, draai die regte een, wat dink hy is warm, al die pad tot want hy wil 'n warm stort te neem. Wel, hierdie werklik stem nie ooreen nie, so hy kry dit nie baie pret ervaring om in 'n koue stort, en ons almal weet wat dit voel soos. Dit is 'n voorbeeld van 'n ontwerp fout. Wat ek bedoel met dit is sy verwagting van die kraan het nie ooreen met wat uit die stort gekom, wat is 'n soort van jammer vir hom. So, dit is 'n voorbeeld van 'n ontwerp fout wat in die werklike lewe gebeur. Maar ons sien alle vorme van ander kinders as well. Ons is waarskynlik nie ondersteuners van die MBTA stelsel. Dit is 'n metro-stelsel eintlik in Londen, wat sê: "Hierdie knoppie is nie in gebruik is." Hoekom is dit nog daar? Daarom vind ons selfs? Toe ek 'n kind was, synde die tegnologie vaardig een in die huis, wanneer die rekenaar crash, sou my ma kom na my toe, wys my hierdie skerm en vra my wat gebeur het. 

Selfs ek weet nie wat dit beteken. [Lag] Wat? [Lag] Soms voel ons soos sagteware-ontwikkelaars is net trolling ons. As gebruikers ons soos, "Wat gaan aan Iemand sê vir ons." Dit alles kom neer op 'n kwessie van ontwerp. Ontwerp, soos ons kan sien, is nie suiwer oor estetika, dit gaan nie oor hoe dinge lyk. Ons sien hier dat dit eintlik min pop-up hier lyk pretty nice. Dit het 'n druppel skaduwee in die agtergrond, het dit grens radiuses gaan. Dit is soort van die mooi. Dit is regtig nie goed ontwerp, want dit is nie baie gebruikers vriendelik. Daardie klein pop-up wat opkom nie regtig gee my enige inligting wat gaan aan, is dit nie vir my sê iets as die gebruiker oor hoe om te herstel van die fout. Ons wil om te dink oor dinge wat ontwerp is nie. Eerstens, dit is nie estetika. Dit is ook nie vulsel jou app met ton van onnodige funksionaliteit. As jy 'n Thai restaurant, het jy waarskynlik wil nie na 'n tandarts op dieselfde tyd te wees. En met Facebook vrae, nie dat baie mense dit gebruik en dit was nie regtig by die kern van wat hulle bou. En dus is dit lekker om na te dink oor nie soseer die hoeveelheid van die dinge wat dat jy om na jou aansoek nie, maar die gehalte en hoe jy maak dat die gebruikers ervaring beter deur 'n verbetering op wat jy reeds het. 

In 'n neutedop, ontwerp vertel ons wat ons moet bou. Byvoorbeeld, as ons iets wat laat ons soek die dinge op te bou, soos Google, byvoorbeeld, moet ons dinge doen op 'n wyse wat vereis dat die gebruiker baie van die druk te neem om te kry wat hulle wil hê, of moet ons dit doen op 'n manier, byvoorbeeld met Google Instant of outomaties waarmee ons ons resultate vinniger? Ingenieurswese behels, soos Tommy sal jou wys dit eintlik gebou. Daar is baie van die tipes van ontwerp. Byvoorbeeld, as jy die bou van iets wat iets te sit in 'n Derde Wêreld land waar daar nie veel elektrisiteit of dat 'n groot tegnologie, jy het om te ontwerp wat jy bou op 'n manier wat maklik toegang tot die mense daar gee. Maar wat vorme van ander ontwerp besluite daar sou wees nie of kan wees wat betrokke is by iets soos hierdie? Ja. Ek sien 'n hand. [Onhoorbaar student reaksie] >> Reg. Presies. Toeganklikheid is een ding. 'N baie van die mense dink nie, "Wat van my gebruikers?" soos die uiterstes van óf spektrum. Ek het gebruikers wat dalk gestremdhede dat ek nie dink oor en ek is net te dink oor die ontwerp vir die algemene gebruiker. Die Internet toeganklik is deur almal deesdae, en ek moet ontwerp word vir die mense as well. Watter vorme van ander ontwerp besluite kan jy maak? Ja. >> [Student] Koste. Kos. Baie goed. Nog 'n ding wat ons kan ons ontwerp besluite baseer op koste. As ons 'n besigheid is, wil jy iets te bou wat nie veel koste te produseer maar kan verkoop teen 'n besonder hoë koste of kan ons 'n paar wins. 

Dit is al die verskillende tipes van die ontwerp, maar toe ons die bou van iets op die Internet of wanneer ons die bou van iets wat waarskynlik nie dat daar nog baie kos om te bou nou, soos Internet-toepassings - jy hoef nie veel kapitaal te gooi in dit ten einde te maak van iets wat regtig werk - wat ons is meer bekommerd oor die gebruikers ervaring. Ons noem hierdie gebruiker gesentreerde ontwerp. Wese wat gebruiker gesentreerde ontwerp behels om jouself in die skoene van jou gebruikers. As iemand tekens vir die wat ek bou, hulle kom natuurlik met 'n doel in gedagte het na my spesifieke aansoek, met 'n taak wat hulle wil om te voltooi. En jou werk is nie net om hulle te help om daardie taak te voltooi maar om hulle te help dat die taak te voltooi in 'n wyse wat doeltreffende, intuïtief, en as 'n persoon wat daar gesê, toeganklik. Wat beteken doeltreffendheid beteken? Doeltreffendheid beteken hoe vinnig my gebruiker die taak te voltooi my koppelvlak. Is dit neem baie van die druk vir hulle te kry van die een plek na die ander? Is dit vervelig? Het hulle baie van die herhalende take uit te voer? Ons wil hê dat die proses so doeltreffend as moontlik te maak so hulle het nie hierdie soort van dinge om te doen. Intuïtie dat, byvoorbeeld, as 'n gebruiker lyk my koppelvlak, is dit maklik om vir hulle van plek tot plek te kry? Is dit maklik vir hulle om uit te vind wat hulle in my koppelvlak te kliek sodat hulle die doel of taak te bereik wat hulle wil bereik? 

En laastens, as een persoon het gesê daar, toeganklikheid is baie belangrik. [Manlike spreker] Dit kom tot toeganklikheid vir dinge soos visie, soos hoe ek eintlik ontwerp iets vir iemand wat blind is? Oh. Vir mense wat nie kan sien nie, ons het iets genoem screen readers. Wat jy moet doen is jy moet jou webwerf te bou op 'n manier dat, byvoorbeeld, veral tegnologie wat ons noem - Daar is baie van die dinge wat nou. Ek dink daar is 'n skerm lesers genoem JAWS. 'N baie van hierdie dinge staatmaak op wat ons noem area reëls ten einde aan die gebruiker om te lees wat teenwoordig is op die bladsy. Vir die mense wat nie kan sien, wat jy nodig het om seker te maak dat hierdie skerm lesers kan eintlik haal die inhoud op die bladsy en kan eintlik wys jou gebruikers, as jy nie kan sien nie, ten minste kan jy verstaan ​​nog steeds die inhoud op die bladsy. Ja. Okay. Genoeg gepraat oor goeie ontwerp. Kom ons praat oor die slegte ontwerp. Dit is dinge wat jy moet doen nie. Kan iemand my vertel oor hul ervarings met Craigslist en wat hulle dink is nie so groot oor hierdie ontwerp? Ja. >> [Student] Ek dink daar is te veel woorde in 'n gebied. Te veel woorde nie, reg? Heeltemal oorweldigend. Jy kom na hierdie bladsy en jy begroet met 'n hele klomp van die dinge wat hier wat kan selfs nie jou saak maak. Byvoorbeeld, as jy leef in 'n staat wat nie begin met hierdie brief. Kom ons sê jy woon in Texas of iets. 

Jy het al die pad af op die bladsy om te blaai om te kry om die plek waar jy is op. Ek is van Boston, so laat my kyk in Massachusetts. Waar is Massachusetts? Ag, dit is reg hier. Ag, dit is Boston. Okay. Kom ons kyk na Boston. [Lag] Nogals oorweldigend, reg? Awkward dinge daar. [Lag] Kom ons sê ek is op soek na iewers om te lewe. Hoeveel mense het eintlik gebruik Craigslist? Ton van julle. Daar is 'n redelik slegte maniere om te kyk na hierdie, maar laat ons kyk na hierdie. Wat is die verskil tussen img en pic? Kan iemand vir my sê? Daar is eintlik geen verskil nie. Dit beteken presies dieselfde ding, maar hulle het verskillende etikette vir hulle vir een of ander rede. As ek op Het Image, gebeur daar niks op die bladsy. Ek het eintlik 'Soek weer kliek vir iets om te gebeur. Wat sou 'n beter ontwerp van die besluit wat daar gedoen moet word? As ek op daardie filter, wil ek waarskynlik te filter deur die betrokke aksie of daardie spesifieke kategorie. Dus, in plaas van 'Soek weer druk, kan ek net outomaties doen die filter soort van Google styl waar hulle doen dit onmiddellik. [Malan] Maar moenie vorm soos ons gesien het hulle tot dusver fisies voorgelê moet word deur slaan ten minste of kliek op 'n knoppie Enter? Soos jy gesien het hulle tot dusver, kan jy eintlik te kliek Submit daardie dinge te doen. 

Maar as Tommy jou sal wys in 'n tweede, is daar eintlik maniere vir jou van so 'n aard dat wanneer jy op daardie ding dit outomaties kan stuur wat ons noem 'n AJAX-versoek en data terug te kry en jou resultate filter oombliklik. Daar is ton van die dinge wat is verkeerd met hierdie koppelvlak. [Malan] Kan jy soek vir Cambridge? Daar is iets wat effens onreëlmatige hier waar jy omgee Cambridge en tog jy kry Westford, Spring Hill, West Newton en dies meer. Waarskynlik nie ideaal nie. >> Waarskynlik nie ideaal nie. Hoe kan ek in staat wees om die gebruiker se ervaring beter te maak op hierdie spesifieke bladsy? Ja. >> [Student] instruksies. Okay. Instruksies in watter soort sin? [Student] Byvoorbeeld, 'n ding vir die eerste keer gebruikers wat nie eens weet wat Craigslist is of jy weet nie wat jy veronderstel is om te doen. Reg. So verduidelik wat Craigslist is op hierdie bladsy is belangrik. Ons kan eintlik sê gebruikers wat hierdie bladsy eintlik is. As ek net hierdie besoek, sien ek 'n hele klomp van die plekke. Ek het nie eens weet wat dit beteken. Maar meer belangrik, net te kyk na hierdie koppelvlak, onthou ek moes na benede 'n ton van die dinge wat 'n bepaalde gemeenskap te vind dat ek eintlik omgegee oor hierdie. Wat is 'n vinniger manier wat ek kon doen nie? Ja. [Student] Verdeel hulle in die ooste, weste streke. >> Goed. Ek kon hulle verdeel in meer kategorieë wat my kan help vinniger bepaal hoe om by daardie spesifieke plek. [Student] Sit 'n drop-down list. >> Reg. Okay. Ek kon 'n drop-down menu gebruik, want ons het 'n vaste stel van die dinge wat en ons kon hulle wys in 'n drop-down menu. So is dit nie neem so baie spasie op die skerm. Maar selfs beter as dit, wat kan ons doen? Ja. >> [Onhoorbaar student reaksie] >> Kan jy sê dat weer? >> [Student] soekkassie. Ja, 'n soekkassie. Dit is 'n groot. Wat ons eintlik kan doen, is as ons terug kyk op die skyfies, soekkassie. AutoComplete. N baie maklike manier om te soek deur die resultate wat jy ken in 'n stel. As ek begin tik BO, wys my net al die resultate wat BO binnekant van hulle het. Dié manier kan ek baie maklik die spesifieke een wat ek wil om te gaan na in plaas van om te blaai deur die lys van werklik 'n groot. 

Dit is alle soorte van 'n baie lae-hang vrugte dat iemand wat Craigslist implementering van eintlik kan doen om die ervaring op die webwerf 'n baie beter vir hul spesifieke gebruiker te maak. Okay. Genoeg gepraat oor die slegte webwerwe. Kom ons praat oor Facebook. Wanneer Facebook uitgekom het, en in die besonder Facebook foto's, was daar baie van die ander dienste by die tyd wat presies dieselfde dinge kan doen. Hulle kon organiseer jou foto's in albums. Wat jy kan doen, is jy hulle kan organiseer in stelle sowel. Jy kan organiseer hulle volgens datum. Wat jy kan doen al hierdie spesifieke dinge. Maar nie almal weet wat die Facebook foto's ontplof by die tyd wat dit is vrygestel? Ja. >> [Student] Tags. >> Tags. Presies. Ons het Milo hier, wat is ons hond gelukbringer met daardie CS50 bandana. Jy kan sien dat ons hierdie kodering funksie in die middel. En wat Facebook foto's so interessant gemaak het van 'n bruikbaarheid standpunt is dat dit eintlik mense via hierdie toegelaat om hul vriende te betrek in hul foto's. Vir Facebook, sedert hul webwerf is veral sosiale, dit is oor die bou van hierdie soort van sosiale atmosfeer. Dit verbeter die ervaring van die foto's 'n baie meer want hulle kon eintlik begin sê: "Dit is die bande tussen mense, en dit is foto's oor mense wat jy eintlik omgee. " Deel van dit is ook soort narcisme. Mense wil graag tagged in foto's en dinge soos dat. Terwyl dit is nie noodwendig 'n goeie menslike eienskap, op dieselfde tyd dit gebaseer is op goeie ontwerp besluite omdat mense werklik omgee oor dinge soos hierdie. So wat se Facebook-foto's. 

Maar laat ons praat Facebook meer in die algemeen. Ek is seker dat baie van die mense hier het menings oor Facebook, beide goeie ontwerp besluite en swak ontwerp besluite. So laat vent of gelukkig te wees. Kom op. Ek weet almal van julle gebruik Facebook. Iemand het iets sleg te sê of iets goed te sê oor dit te hê. Ja. [Student] In die nuus voer daar is 'n baie dinge wat ek nie regtig omgee. Die nuusvoer toon 'n baie van die dinge wat jy dalk nie omgee. Jy het vriende op Facebook wat jy nog nie ontmoet vir 2 of 3 jaar en jy sien die resultate van hul nuus knal in jou news feed en jy het nie regtig omgee oor dit. Facebook het eintlik 'n poging om dit beter te maak, en hulle het eintlik probeer om relevante resultate te stoot na die top van die nuus voer as van die laat sodat jy werklik dinge sien deur vriende wat relevant is vir jou of jou vriende. Enigiets anders? Ja. [Onhoorbaar student reaksie] >> Kan jy sê dat weer? [Student] Die advertensies is relatief onopsigtelik. >> In watter sin? [Onhoorbaar student reaksie] Hulle het nie die lig op die skerm, soos baniere. Okay. Dis goed. As jy onthou die internet van die '90 - >> [Malan] ek daar was. >> Hy daar was. [Lag] Jy kan onthou flikker GIFs agtergronde, sparkly dinge, Geocities styl soort van dinge. Dit is regtig nie 'n voorbeeld van 'n goeie ontwerp Want dit is baie steurende van die inhoud. Die Yale kuns webwerf wat gebruik word om animated gifs as hul agtergrond te hê en jy kan nie lees nie enigiets op die bladsy, maar ek dink iemand eintlik met hulle gepraat het en nou is dit 'n bietjie anders. [Malan] Dit is nou baie beter. >> Dit is baie beter nou, soos jy kan sien. >> [Malan] O ja. Net groot, net - Ja. Okay. 

Deel van dit is ook die maak van jou bladsy moontlik baie minimalistiese en baie verstaanbaar sodat dinge op die bladsy vloei in 'n manier wat baie logies en nie in die weg van mekaar kry nie. Wat allerhande ander dinge is goed oor Facebook of sleg oor Facebook? Laat ons net 'n ontwerp gesprek hier. Oh. Waar? Ja. [Student] Die nuwe Timeline stelsel laat jou toe om die persoon se profiel oor hul verlede te soek. Ooh, Timeline. Tydlyn is 'n groot ding, want dit kan jy steel jou vriende terug wanneer hulle in die hoërskool was. Timeline is goed, want dit kan jy deursyfer inhoud 'n baie vinniger, dit kan jy sien dinge wat andersins sou geneem het jy 'n baie lang tyd om te vind net blaai en af, op, op, op, op, op, soos die gaan terug in die tyd. Maar dan is daar ook soort van 'n nadeel aan wat in terme van die gebruiker se ervaring. Wat kan dit wees? Big woord wat begin met P-R. >> [Student] Privacy. >> Privaatheid, reg? Privaatheid is 'n groot gebruikers ervaring kwessie. Dit is een van die dinge wat ek haat die meeste oor Facebook. [Lag] [Malan] As ek nou doen. Dawid het nie besef dat dit werklik gebeur het tot gister. So nou is hy weet dat elke keer as ek hom gesels ek weet hy my geïgnoreer. [Malan] Die ongemaklike deel was ek was eintlik ignoreer hom, en ek het nie geweet hy het geweet dat ek hom ignoreer. [Lag] Privaatheid is 'n groot probleem. Kan iemand hier vir my sê wat sleg kan wees oor Facebook privaatheid behalwe die feit dat hulle dinge doen soos hierdie? Wat is dit besonder moeilik om te doen met betrekking tot Facebook privaatheid? Dat die soort van 'n leidende vraag. Ja. >> [Student] Steek jou foto's van sekere mense. Reg. Presies, jou foto's van sekere mense verberg. Hulle het hierdie klein, klein knoppie in die boonste regterkantste wat kan jy wissel die privaatheid van 'n foto. Hul privaatheid opsies is baie gevarieerd tussen verskillende vorme van spyskaarte. 

Hulle het 'n baie beter gekry het oor dit onlangs, maar dit gebruik om die geval te wees dat wanneer jy wil jou vriende te verhoed dat foto's te sien, jy sal hê om te gaan deur middel van 'n baie ingewikkelde 5-stap proses van om soos laat my op hierdie skakel kliek, laat my nou weer op, laat my weer op, laat my spesifiseer watter mense nie kan sien nie my foto's. Dit is nie baie goed op Facebook se deel omdat so baie oor die gebruikers ervaring is eintlik gee hulle die vryheid te beheer wat mense kan sien. Ons noem hierdie gebruiker rapporteer beheer en vryheid. As jy nie jou gebruikers te laat doen wat in 'n manier wat doeltreffende en intuïtief, dan is jou gebruikers ervaring is nie regtig so groot nie.  Sal julle ouens hou daarvan om te sê iets oor Facebook? Hoe skakel ek dit af? [Ong] Jy kan nie dit afskakel, en dit is 'n groot bruikbaarheid fout op die deel van Facebook. Hierdie funksie - ek eintlik kyk na dit gister - dit is óf dat jy nie kan doen nie, of dit is iewers baie, baie diep begrawe in die uithoeke van Facebook, want ek kan nie uitvind hoe om hierdie funksie te skakel. [Malan] soms Maar hierdie besluite is nie voor die hand liggend omdat julle aan ons gegee het 'n baie nuttige terugvoer op verskeie CS50 aansoeke en webwerwe wat die kursus gebruik. Ons het nie al hierdie versoeke en voorstelle geïmplementeer. 

Deel van daardie is vir die kry so baie versoeke dat dit is 'n funksie van tyd, maar soms het ons net 'n bewuste besluit soos, "Dankie vir die voorstel, maar ons nie saamstem nie." So, hoe jy besluit eintlik wat jy moet doen as jou gebruikers dink dat jy iets moet doen selfs as jy dit nie noodwendig? Dit is 'n fyn balans tussen die werklik te luister na wat jou gebruikers sê en eintlik 'n soort van die lyn waar jy sê, "Ons is nie van plan om te doen wat die gebruikers sê." En in besonder, Ek dink daar was 'n kwotasie deur Henry Ford wat vat om dit redelik goed. "As ek die mense gevra wat hulle wou, sou hulle gesê het hulle wou vinniger perde." Kan iemand sorteer terg uitmekaar wat kwotasie werklik beteken? Dit is nie net dat gebruikers weet wat hulle wil hê, maar dit is meer dat - [Student] Hulle weet nie wat moontlik is. In deel hulle nie weet wat moontlik is. Pla dat, behalwe 'n bietjie meer. Wat bedoel jy daarmee? [Onhoorbaar student reaksie] Dis goed. Wat ek dink ons ​​probeer om hier te sê, is dat die mense weet wat hulle wil hê. Hulle wil vinniger perde. Wat hulle regtig wil, is die vermoë om vinniger te beweeg, maar hulle weet nie regtig nie die medium waardeur dit te bereik. As julle kom om jou gebruikers en jou gebruikers sal jy iets sê en hulle vertel nie, "Ons wil hierdie funksies en hierdie funksies en hierdie funksies, jy wil nie noodwendig dink oor, "Laat my gaan voort "En te implementeer wat hulle uitdruklik sê," maar wat jy wil na te dink oor is, "Watter soort van idees kan ek kry?" Wat hulle eintlik wil hê? 

En van daar wat jy kan doen, is die ontwerp van iets wat aan daardie versoeke maar nie noodwendig in die manier waarop die gebruiker verwag om tevrede te wees. So vir iets soos die finale projekte, in 'n baie reële terme, wat is 'n nuttige heuristiese wanneer dit kom by die maak van iets beter, veral as die ontwerper het hierdie arrogansie omtrent hom waardeur jy soort van weet wat die beste is, kan jy die insette van jou gebruikers, maar hoe jy gaan eintlik nie om dat terugvoering? In die finale projekte, baie konkreet, wat optimale resultate hier? Wat optimale resultate produseer - en ek sal gaan oor dit in 'n tweede - is die proses van die ontwikkeling van en dan die toets en dan iterating. Wat ek bedoel deur die toets is gewoonlik wanneer jy die ontwerp van iets jy dink dit is redelik goed, soos, "Ek is so 'n groot ontwerper. Almal gaan dit om lief te hê." En dan kan jy sit dit daar buite en mense het nie regtig soos dit vir een of ander rede. Wat jy hoef te doen, is jy die dele van die dinge wat mense doen soos en blaas die dinge wat mense nie hou nie. Dit klink soos 'n baie duidelike proses, maar hierdie proses voortdurend iterating op die top van wat jy reeds gebou is 'n proses wat jou help om nie net verfyn jou eie ontwerp vaardighede, maar ook help om die ontwerp te verfyn sodat mense werklik waardeer jou produk selfs meer as wat hulle voorheen gedoen het. 

Ek gaan oor meer konkrete voorbeelde van wat jy werklik kan doen. As 'n soort van 'n laaste voorbeeld van 'n produk, laat ons kyk na KAJAK. KAJAK toe dit uitgekom het, was baie, baie gewild. Kan iemand raai hoekom? Wat is die soort van dinge wat jy graag oor hierdie as jy dit gebruik het of wat is die soort van dinge wat jy wil nie? Ja. >> [Onhoorbaar student reaksie] >> Goed. Dit is deel van dit laat die gebruiker 'n navraag wat wyer is as 'n baie beperkende soos, "Jy het jou begin datum te kies "Jy het jou einddatum te kies." Trouens, dit kan jy buigsaam wees oor dit en dit gee jou al van die vlugte in daardie reeks. Enigiets anders? [Student] Hulle sluit die gelde in die prys. Hulle doen die gelde in die prys. Die belasting en dinge eintlik gaan reguit in daardie prys in die boonste linker sodat jy nie die bos gelei om te dink dat jy eintlik betaal vir 'n $ 240 vlug wanneer dit is regtig $ 330. Enigiets anders? Ja. [Onhoorbaar student reaksie] Ek is nie seker of hulle werklik laat jy dit doen. Ek kan verkeerd wees. Dit mag dalk 'n interessante ding wees as jy wil om meer gewig te plaas op bepaalde filters sodat hulle druk resultate verwant aan dat die filter na die top. Maar kan iemand my vertel wat is so spesiaal oor hierdie linkerkant? Hoe het u die tradisioneel kyk 'n vlug op 'n Internet diens voor dit? 

Ja. >> [Onhoorbaar student reaksie] >> Kan jy sê dat - [Student] Elke lugredery. >> Ja. Elke lugredery het sy eie webwerf. Dit konsolideer dinge. En? [Student] Jy weet presies watter tyd jy verlaat. Jy weet presies watter tyd jy verlaat, maar wat verband hou met die filters in die besonder. Laat my trek kajak. O God, pop-ups. Bad gebruikers ervaring. Wat gebeur wanneer ek hierdie schuifbalk beweeg? [Student] Outomatiese updates. >> [Ong] Outomatiese updates. Dit is iets wat baie belangrik is. Voor hierdie, wanneer jy wil om 'n vlug te kyk, jy het om te sit in jou insette plek, jou uitset plek, pers Soek, sou dit verwerk en wys jou resultate. As jy wil om jou soektog te verander, sal jy het om terug te druk twee keer, tree in 'n nuwe navraag ('query') van nuuts af, en dan doen dit oor en oor weer. Die nice ding oor iets soos hierdie is dit gebruik 'n baie [onverstaanbaar] ding in die middel. Wanneer jy iets soos hierdie, is dit skiet uit 'n versoek en dit gaan terug al die resultate onmiddellik. Hierdie soort van onmiddellike terugvoer is iets wat kajak baie gewilde want dit is regtig maklik vir my om net my navraag verander en om uit te vind die dinge wat rondom 'n bepaalde reeks sonder om te heen en weer, heen en weer, heen en weer. So dit is allerhande dinge wat jy wil om te dink oor wanneer jy die ontwerp van jou webwerf. Hoe kan ek dit baie effektief vir my gebruikers om te gaan deur middel van wat hulle werk op en te kry so gou as moontlik na hul uiteindelike doel? [Malan] En Josef se punt vroeër oor gebruikers nie noodwendig weet wat hulle wil hê, wat gebaseer is op wat julle nou weet oor HTML en jy het blok, radio knoppies, kies spyskaarte, velde en die wil, hoe sou jy die uitvoering van die idee van die pluk van 'n begin van die tyd vir 'n vlug? 

Watter een van daardie verskillende UI-meganismes sal jy gebruik? As jy net weet wat die bedrag van die HTML wat voor geleer en jy weet die insette is radio knoppies, blok, drop-downs, en Input box, wat sou jou natuurlike keuse vir die pluk van datums? [Student] Input. >> Input. Of miskien selfs 'n drop-down met al die datums, reg? So met 'n meer komplekse UI meganismes soos hierdie aan die linkerkant wat jy kan implementeer, kan jy maak hierdie proses baie meer intuïtief met 'n schuifbalk want die tyd is deurlopende, en mense gewoonlik dink nie dit in terme van diskrete stukke. Alles reg. Laaste ding. Tien bruikbaarheid heuristiek. Al die dinge wat ons oor gepraat het waarskynlik onder een van hierdie kategorieë val. As jy na hierdie skakel, wat die terreine sal aanlyn gepos word, sal jy eintlik in staat wees om as jy die ontwerp van jou webwerf, hou hierdie heuristiek in gedagte en hierdie reëls van die duim. Vir jou projekte, wat Ek stel voor jy doen om te ontwerp jou app beter papier prototyping om eerste te doen. Wanneer jy dink oor jou aansoek, baie vinnig skets wat jy wil dit lyk soos en seker maak dat al die bokse is gerangskik in 'n manier wat baie intuïtief vir die gebruiker om te gebruik en selfs wys hierdie vraestel prototipes aan jou vriende en begin fokusgroepe. Kry net 2 of 3 mense saam en vra hulle om net te tik op hierdie vraestel prototipes, en wys vir hulle nuwe skerms om te sien of hulle werklik verstaan ​​wat aangaan. 

Wat jy wil doen, is hulle 'n taak gee, dat die taak te motiveer, en gee hulle net die jeug en laat hulle dit gebruik. Gee hulle geen instruksies as dit. Jy wil eintlik laat hulle in 'n manier wat kan jy sien met jou app hoe hulle dit gebruik as jy nie langs hulle staan. En dit is baie belangrik. Wat gee jou baie van die insigte met betrekking tot mense wat rondom bepaalde dinge in 'n manier dat ek nie van plan om dit te? Is hulle met behulp veral UI meganismes op die skerm op 'n manier wat is 'n soort van mag nou wel? Ek het nie van plan om te doen dit so. En sodra jy klaar is met dit, doen wat jy wil om dit te doen? Jou ontwerp rotse, reg? Wat jy wil doen, is wat jy wil te ontwikkel en dan doen om die proses weer. So wys dit vir jou vriende wanneer jy dit ontwikkel, toets dit, ontwikkel, te toets, te ontwikkel, te toets, iteraat, op en op en vorentoe. Ontwerp is 'n iteratiewe proses in hierdie sin. Jy eintlik iets op te bou en dan dinge oor dit besef dat jy nie besef voor en terug te gaan en te verbeter van daardie. Nou, vir die ontwikkeling deel, dit is wat Tommy gaan om jou te wys na die breek en hoe jy dalk in staat wees om iets soos outomaties te implementeer op 'n manier wat is redelik eenvoudig. [Malan] As Tommy sit hier, 'n vraag dan. Daar is baie van die vroegste websites - en toe Josef het gesê 1990's styl webwerf, dit was implementasies waar as jy wou 'n aanvang van die tyd te kies en 'n einde van die tyd, eerlik te wees, terug in die dag en selfs op 'n paar webwerwe vandag, die manier waarop jy dit doen, is jy kies 'n uur van 'n drop-down, jy kies minute van 'n drop-down, miskien jy kies AM, PM, en dan kan jy doen dit 3 keer. En so met 6 kliek en miskien 'n bietjie te blaai jou gebruiker kan eintlik 'n soort van die datum en / of tyd verskeidenheid in hierdie sin. 

So beslis suboptimale en tog so ver het ons gesien geen ekspressiewe vermoëns in enige van die tale wat ons het gekyk na iets sexier te doen soos hierdie schuifbalk van die aanvang van die tyd en die einde van die tyd. Maar as jy dink terug na week 0 toe het ons gepraat oor Kras, ook daar was daar nie widgets wat net sekere dinge gedoen het. Jy moet regtig net het hierdie grondbeginsels soos lusse en voorwaardes en dies meer. So soort van net dink nou baie abstrak, onafhanklik van die besonderhede van HTML, wat werklik aangaan met iets soos die aanvang van die tyd en die eindtyd schuifbalk? Toe ek my muis beweeg, en ek kliek op daardie klein wortel simbool aan die linkerkant en begin sleep, programmaties, wat is dit wat jy wil in staat wees om te implementeer te maak dat gebeur? Watter vrae, wat Boolse uitdrukkings wat jy wil in staat wees om te vra? Wat is werklik aan die gang? Sammy? [Student] Waar is die posisie van die muis? >> Goed. Waar is die posisie van die muis? Dit was iets wat ons nodig het om terug te druk in die Kras, of dit is gebaseer op die plek of selfs kleur of die wil. Jy al ooit so kortliks onthou op Maandag was daar al hierdie dinge genoem gebeure in die wêreld van die web, en so is daar dinge soos onclick en onkeypress en onkeyup en onMouseOver en onmouseout. So besef dat selfs hierdie dinge het ons neem vir toegestaan ​​op die web met webwerwe soos Facebook en Gmail, selfs as jy het geen idee hoe sou jy moontlik implementeer, want daar is niks soos dit in die lesing of probleem Stel 7, besef dat met hierdie presiese dieselfde grondbeginsels, met HTTP en parameters en AOO-en POST, met die basiese HTML insette wat ons het gekyk na dusver en in 'n oomblik met die programmatiese meganismes wat Tommy's in te voer kan jy begin om jouself uit te druk, net soos jy gedoen het in die week 0 deur baie intuïtief te sleep. 

Dus met wat gesê het, Tommy MacWilliam en 'n paar nuwe stukke van die legkaart vir ons vir die web. Alles reg. My naam is Tommy en ek gaan om te praat oor JavaScript. Net 'n disclaimer: Ek is van mening dat JavaScript is die beste programmeertaal in die hele hele wêreld. Daar is baie van die mense wat nie met my saamstem nie, maar dit is net amazing. Sodra jy gaan terug na C, as jy C te skryf vir 'n ander klas of 'n paar ander tale, dit is net regtig frustrerend in al die lae-vlak details wat jy het om te kry vasgeval. So as jy ooit voel hartseer oor hoe irriterende C is om te skryf, net terug te gaan, skryf 'n paar JavaScript. Dit is nirvana. Jy sal baie beter voel oor jou slegte dag. 'N baie van die magie van JavaScript kom van sy vermoë om dinge te manipuleer wat reeds op die bladsy. Wanneer ons ons PHP skrifte geskryf het, is hulle uitgevoer word op die bediener, en uiteindelik dat PHP script waarskynlik sommige HTML uitvoer. Dat HTML is gestuur aan die kliënt, en dan dit was dit. As PHP wou 'n knoppie by te voeg 'n bladsy, byvoorbeeld, kan dit nie regtig doen. Dit sou 'n hele nuwe HTML-lêer te lewer en wat stuur na die leser. Met JavaScript weet ons dat ons dinge kan werk terwyl hulle is reeds op die bladsy, en as gevolg van hierdie ons kan baie meer direkte terugvoer, wat sal regtig die gebruikers ervaring op ons webwerf te verbeter. Net 'n vinnige recap van JavaScript keurders. Ons weet dat wanneer ons 'n HTML-bladsy laai, wat gaan om verteenwoordig te word in die DOM. 

Die DOM is onthou net hierdie groot boom waar elemente in hierdie groot hiërargie verwant is. Toe het ons gewerk met databasisse in pset 7, een van die eerste dinge wat ons nodig het om te weet hoe om dit te doen was om die databasis navraag. Ons het hierdie groot gebruikers tafel, en soms wil ons net om te sê, "Ek wil net 'n paar van hierdie gebruikers wat ooreenstem met 'n paar toestand." Net so, as ons die DOM ons moet een of ander manier om dit te bevraagteken. Ons moet 'n manier om te sê, "Ek wil al die knoppies wat só lyk "Of al van die beelde op die bladsy." En hierdie keurders ons in staat stel om dit te doen. Sodat net 'n vinnige recap. Hierdie eerste een hier, hierdie # dien, wat is dit gaan om te kies? Is daar iemand onthou? [Onhoorbaar student reaksie] >> Ja, presies. Dit gaan om 'n element te kies op die bladsy wat 'n ID van dien. En sodat hash tag sê hierdie selector is gaan om te werk met ID's. Hoe gaan dit met die tweede een, dit gesentreerde, sal wat kies? Ja. >> [Student] Klas. >> Presies. Dit gaan nou om te kies deur die klas. Die verskil tussen die ID en klas hier is oor die algemeen die ID moet uniek wees binne watter ruimte wat jy soek. So as jy op soek was oor 'n hele web bladsy, jy moet regtig net 1 element dat sekere ID, so in hierdie geval van dien. Met klasse, aan die ander kant, kan ons meer as 1 element op dieselfde bladsy met dieselfde klas. Dit kan nuttig wees om te sê ek wil alles wat op die bladsy gesentreer te kies eerder as om net 1 ding. 

En ten slotte, hierdie laaste een hier is 'n bietjie meer ingewikkeld, maar wat gaan dit van die DOM te kies? [Onhoorbaar student reaksie] >> Wat is dit? [Student] Enigiets wat is 'n tag. >> Ons het 2 dele hier. Die tweede deel is gaan om te sê ek wil hierdie tags te kies met 'n merker van insette, so 'n element wat 'n inset-tag. Maar ek wil nie te kies al die insette omdat iets soos 'n submit knoppie kan 'n inset en iets soos 'n tekskassie 'n inset kon wees. So met hierdie vierkantige hakies ek sê Ek wil net om die elemente te kies wat van die soort teks. Iewers in my HTML tag Ek het 'n kenmerk genaamd tipe, en die waarde van die kenmerk teks te wees. So hoe het oor hierdie eerste deel hier? Die eerste woord van die selector is vorm dan het ek 'n spasie en dan is hierdie insette deel. Wat beteken dat jy doen, om die vorm in die voorkant van dit? Dit gaan basies beperk ons ​​navraag. Dit kan die geval dat ons het 'n paar insette op die bladsy wat nie afstammelinge van 'n vorm. Wat sal dit doen, is dit sal sê: Ek wil net die inset tags wat êrens bo hulle het sommige ouer element van 'n vorm. En so in hierdie manier kan ons hierdie hiërargiese navrae sodat ons nie net alles wat ooreenstem met 'n gegewe keurder te kies. Ons kan soort van beperking van die omvang van die soektog na iets anders. So nou dat ons weet hoe die elemente op die bladsy te kies, Kom ons praat 'n bietjie oor AJAX. AJAX is 'n nog baie nuwerwets akroniem wat staan ​​vir Asynchronous JavaScript and XML. Dit gebeur net so dat XML is net 'n manier om data voor te stel. 

Daardie soort van verlore gewildheid het onlangs, sodat die X in AJAX is nie gebruik om al die tyd. Basies, wat AJAX stel ons in staat om te doen HTTP-versoek uit die konteks van JavaScript. Wanneer ons in ons web browser en ons opgevolg rondom bladsye en ons op 'n skakel klik, wat ons leser gaan doen, is 'n HTTP-versoek na watter skakel ons kliek. Maar dit is nie altyd ideaal, want as dit die geval is, dan soos Dawid het gesê, ons het altyd om gebruikers 'n Submit knoppie klik of kliek op 'n skakel ten einde te maak iets gebeur wat gaan 'n HTTP-versoek te betrek. So met AJAX kan ons hierdie versoeke namens van JavaScript. Dit beteken dat wanneer die gebruiker interaksie met die bladsy of iets gebeur, ons kan eintlik maak 'n programmatiese versoek om 'n ander PHP lêer op ons webwerf of enigiets anders in die data dat lêer spoeg uit te haal. Kom ons neem 'n blik op 'n voorbeeld van AJAX. Dit is ons CS50 Finansies bladsy wat hopelik sommige van ons vertroud is. As ons kyk na die HTML-kode van hierdie bladsy, sien ons hier dat ek 'n paar dinge het bygevoeg, een wat ek gegee het hierdie vorm om 'n ID. Ek het gesê id = "vorm-quote". Ek het dit gedoen net omdat dit gaan om te maak dit 'n bietjie makliker om te kies uit die DOM want ek kan net 'n baie eenvoudige navraag. Wat ek hier wil doen is wil ek 'n probleem op te los met CS50 Finansies. So as ons gaan na finance.cs50.net, elke keer as ek wil 'n kwotasie te kry, ek het dit kry Quote knoppie te klik, en dat Kry Quote button neem my dan na 'n ander bladsy. En as ek wil 'n ander aanhaling, ek het die Back knoppie om te tref en dan het ek tik dit in, Ek kry 'n kwotasie, en ek druk die Terug-knoppie. Dit is regtig nie die beste gebruikers ervaring. Wie sou regtig gebruik van die werf as dit is wat stadig voorraad pryse te kry? So, wat ons wil doen met AJAX, is dat die stap gaan na 'n aparte bladsy te verwyder ten einde die resultate te sien. 

Wat ons eintlik net vra vir is dat baie klein prys, en dit is net 'n baie klein hoeveelheid data. Dus is daar geen noodsaaklikheid vir my nog 'n hele HTML-bladsy om te gaan, download 'n hele nuwe bondel van HTML, miskien n paar meer foto's aflaai, n paar ander CSS-lêers net vir my dat baie eenvoudige vraag te beantwoord van hoeveel hierdie voorraad koste. Met AJAX kan ons maak dit 'n baie makliker. Ons sien hier dat ek met 'n skakel in 'n JavaScript-lêer genaamd quote.js. Kom ons eintlik om die lêer oop te maak. Nie daar nie. Al van my JavaScript-lêers gaan word geleë in HTML sodat die webblaaier kan oopmaak. Dan het ons 'n aparte gids hier vir JavaScript, en nou is hier quote.js. Op die top van hierdie lêer hier sê wat ek wil om te wag vir die hele bladsy gelaai word voordat ek probeer om iets te doen. Hoekom is dit nodig? Dit blyk dat die volgende ding wat ek gaan doen is begin soek vir 'n element wat ooreenstem met n keurder. As dit JavaScript ooit uitgevoer word voordat hierdie element is op die bladsy gelaai, dan is alles wat ek probeer om te doen, is nie van plan om te werk want ek gaan om te probeer om iets wat nie daar is nie nog te kies. So hierdie lyn tot bo sê ek wil hê jy moet wag totdat alles is gelaai sodat ons gewaarborg dat enige elemente Ek is op soek na is eintlik op die bladsy. Hierdie dollar teken beteken hier Ek is die gebruik van die biblioteek genaamd jQuery. Hierdie jQuery biblioteek kan ons hierdie keurders dat ons net kyk na gebruik. Deur te sê $ dan verby in as 'n argument # vorm-aanhaling, Ek nou die keuse van daardie vorm dat ons het net 'n blik op. Ek het nou 'n voorstelling van die vorm in die geheue op een of ander manier. 

Op hierdie item nou, hierdie voorstelling van die vorm, Ek nou met 'n funksie genoem. Wat hierdie funksie doen, is dit gaan 'n event handler aan te heg. Die geval dat ons gaan om te luister is die submit gebeurtenis. So wanneer die gebruiker wat Submit knoppie of druk Enter, hierdie gebeurtenis gaan om te vuur. Deur die haak in hierdie, ek kan nou voorrang op die standaard gedrag van die vorm. Sonder hierdie JavaScript, sou die vorm aan watter PHP lêer wat ons gebruik in daardie optrede kenmerk. Maar in plaas ek nou sê, wag, wag, wag, ek wil nie hê jy eintlik doen. Ek wil dit om te gebeur voordat jy gaan en probeer om te dien tot 'n PHP-lêer. Nou wat ek wil om dit te doen? Op hierdie punt wil ek AJAX om een ​​of ander manier in wat die prys van die voorraad is gebruik om te laai. Die eerste ding wat ek nodig het om te weet wat die gebruiker is op soek na. Om te doen wat ek gaan nog 'n keurder te gebruik. Dit is die derde keurder het ons gekyk na voor. Dit sê wat ek wil om te begin hierdie vorm element met 'n ID-vorm-kwotasie. Dan iewers binnekant van daardie vorm moet daar 'n inset element wat het 'n naam van die simbool. As ons terugkyk op ons HTML, het ons gesien dat ons het 'n inset [naam = simbool]. Dit beteken dat dit gaan dat die teks boks te kies wat die gebruiker tik in. Dit is lekker. Ons het die tekskassie. Nou het ons net nodig het om te weet wat is binnekant van dit. Te doen wat ons kan hierdie metode hier noem,. Val, en dit sê ek weet watter tekskassie jy. Ek wil hê dat jy my te vertel wat is dit die gebruiker in daardie teks boks getik. Nou het ons 'n string met die naam simbool wat is gelyk aan wat die gebruiker ingetik. Dit is lekker. Ons kan dit string nou gebruik om ons versoek te maak. Dit is 'n nuwe funksie hier, $, behalwe ons nie langer gaan word kies elemente, ons gaan die uitroep van 'n ander funksie wat aan ons verskaf is deur jQuery. Dit AJAX-funksie is wat eintlik gaan hierdie HTTP-versoek te maak. So ons het dit 'n paar dinge te vertel. Die eerste ding wat ons het om hierdie funksie te vertel, is waar ek wil die versoek om te gaan. Iewers in my projek Ek het hierdie lêer binnekant van die HTML-directory genaamd quote.php. Ek kan toegang tot hierdie lêer, ons gesien het, net soos hierdie, as ek gaan na localhost / quote.php. 

Ek wil my JavaScript 'n versoek aan die bladsy te maak. Watter tipe versoek nou? Ons het gesien voor dat die vorm dat method = "post" kenmerk, en dit beteken dat dit gaan 'n POST versoek te maak, so dit is nie van plan om iets te maak in die URL, eerder as 'n GET-versoek, wat net afgedank sou word as ons net die bladsy met die webblaaier verkry, byvoorbeeld. Nou het ons het gesê ek wil 'n HTTP POST versoek te maak na 'n bladsy wat geleë op quote.php. Wanneer ons die vorm, onthou ons die inset-elemente binnekant van daardie vorm kan toegang met daardie $ _POST veranderlike. Tot dusver in die storie het ons eintlik nie langs enige data gestuur nie. Ons het net gesê ons maak 'n AJAX versoek en hier is die tipe versoek ons ​​maak. Nou het ons nodig het om werklik sommige data stuur na die bladsy. Te doen wat ons kan hierdie eienskap genoem data gebruik. Die waarde van hierdie eiendom is eintlik 'n associatieve array. Die rede hiervoor is dat dit stel ons in staat om meer as net 1 stukkie van data te stuur. Dit is waarom ons hierdie kode tussen krulhakies hier geneste binnekant van hierdie ander krullerige draadjies. Die sleutels in hierdie assosiatiewe skikkings gaan dieselfde ding as dié naam skryf in ons vorm elemente. Dit beteken dat as ek langs 'n sleutel van die simbool stuur, wat beteken dat my PHP hierdie data met $ _POST [simbool] kan toegang tot net soos ons gedoen het voor toe ons die indiening van 'n vorm. En nou die werklike data wat ons wil stuur gaan om die waarde binnekant van hierdie associatieve array. 

Ons gestoor hierdie teks in 'n veranderlike genoem simbool, en so ons stuur saam nou 'n sleutel van die simbool en 'n waarde wat die gebruiker ingetik. Nou het ons het hierdie HTTP-versoek, ons PHP lêer uitgevoer word, en dit gaan sommige data terug te stuur na die kliënt wat net hierdie versoek. Nou het ons nodig het om te reageer op wat die bediener het aan ons gesê. Te doen wat ons het hierdie laaste eiendom hier genoem sukses. Die waarde van hierdie sukses sleutel is eintlik van plan om 'n funksie te wees, en dit is een van die baie cool dinge wat jy kan doen met JavaScript. Nie net kan jy ints of skikkings as 'n waarde binnekant van 'n associatieve array, ons kan ook 'n funksie. Dus, deur te sê sukses, dit is my sleutel. 'N dubbelpunt sê hier kom die waarde, en nou is die waarde van hierdie is eintlik 'n funksie. So ons hoef nie hierdie funksie gee 'n naam per se. Ons kan nie net sê dit gaan om 'n funksie te wees. Dit gaan 1 argument te neem. Die argument vir hierdie funksie gaan wees wat die bediener gestuur ons terug van die versoek. Net soos wanneer ons leser 'n versoek, die bediener stuur iets terug en die browser vertoon, in die konteks van AJAX ons net 'n versoek, die bediener gestuur om iets terug, en nou het ons as 'n string wat verteenwoordig. Met daardie string Ek wil net om dit te vertoon op die bladsy. Om te doen wat ek gaan 'n laaste selector te hê. Ek wil die element met die ID prys te kies. Dit is net 'n leë div wat ek gemaak het op die bladsy, en ek wil hê dat die inhoud van daardie div te wees wat die bediener gestuur ons terug te stel. Ek het eintlik verander quote.php 'n bietjie. 

Eerder as die roeping van die lewer en die lewering van 'n paar bladsy, quote.php nou net gaan om die waarde van die voorraad as 'n string uit te druk. So as jy die bladsy besoek, jy sal net sien dat klein string ongeag die aandeelprys is. Een laaste ding wat ons nodig het om hier te doen is maak net seker dat hierdie funksie gee vals. Wat dit sê, is dat as ek binnekant van 'n event handler en dat die event handler terug in plaas van die terugkeer van ware vals, dit beteken dat ek nie wil hê dat die oorspronklike gebeurtenis aan die brand. In hierdie geval, as ons het nie enige JavaScript en ons 'n vorm ingedien, ons web browser gaan om te sê, "Ek gaan dat die data saam te stuur," en hulle gaan om jou te stuur na 'n ander bladsy. Want ons is met behulp van AJAX nou, daar is geen behoefte om die gebruiker te stuur na 'n ander bladsy. Ons is maar net gaan om die resultate te dinamies op hierdie bladsy vertoon. Ons wil regtig nie hulle om oral te gaan, en ek wil om te bly op dieselfde bladsy. So deur die terugkeer vals, het ons verseker dat die vorm nie doen wat vir ons. Kom ons neem 'n blik op wat dit eintlik lyk soos. Ons kwotasie bladsy lyk dieselfde. Laat my trek die inspekteur hier neer sodat ons kan sien wat aangaan. Maak dit 'n bietjie minder groot. Onthou, as ons die Netwerk blad oop te maak, dit is waar ons kan sien al die HTTP-versoek wat gebeur op die bladsy. 

Vir 'n simbool laat my tik in AAPL en klik Kry Kwotasie. Nou het ons gesien dat 'n deel van Apple n aantal dollars kos net op die bladsy verskyn, maar die URL het glad nie verander nie. In werklikheid, is hier om die HTTP-versoek dat ons nou net gemaak het. Ons het 'n POST-aanvraag tot quote.php. Dit maak sin. Dit is wat die bediener gestuur ons terug. Dit is nie meer hierdie groot HTML-dokument met beelde en dinge soos wat, dit is net 'n reël van die teks, en dan moet ons net die lyn van teks vertoon. As ons terug gaan na die headers en sien wat ons eintlik binnekant van die HTTP-versoek gestuur, kan ons sien hier dat ons langs 'n sleutel van die simbool en 'n waarde van AAPL gestuur, en dit is wat die gebruiker ingetik. Dit is mooi, maar dit is nog steeds 'n bietjie lastig. Ek het nog steeds hierdie knoppie te kliek op die voorraad kwotasie te kry. Ons is 'n besige mense en ons het nie tyd om knoppies te klik. Google besef dat dit 'n rukkie gelede wanneer hulle Google Instant geïmplementeer. Wat Google Instant is soos jy tik dit begin net die vertoon van die resultate vir jou sodat jy nie hoef te bekommer oor selfs kliek Soek. Eintlik is 'n prettige storie met betrekking tot daardie. Sodra Google Instant uitgekom, mense was soos, "Whoa, dit is super amazing." "Dit is so cool." En 'n student by Stanford wat was 19 by die tyd hierdie webwerf genaamd YouTube Instant. Alle YouTube Instant nie effektief Soek Youtube onmiddellik. So eerder as om te gaan na YouTube.com en druk Search, wanneer ek begin tik in YouTube Instant iets soos CS50, ons kan hier sien dat dit 'n poging om op 'n stadige internetkonneksie bevolk hierdie resultate leef. Te doen wat ons kan eintlik 'n baie eenvoudige verandering aan ons quote.js lêer. Reg nou is ons heg hierdie gebeurtenis wanneer die vorm ingedien word. Ons het nie regtig wil die gebruiker te maak daardie vorm indien meer, so laat hierdie gebeurtenis plaas brand elke keer as die gebruiker druk 'n sleutel. Om te doen wat jou laat se eerste verander die geval aan keyup. Dit beteken dat eerder as om te wag vir die vorm in te dien, elke keer as die sleutel gedruk word, is iets wat gaan gebeur nie. Dit maak nie meer sin om hierdie keyup gebeurtenis te heg aan die hele vorm. Ons het regtig net omgee dat die soekkassie. 

Te kies wat nou, kan ons verander om dit te wees, eerder as vorm-aanhaling, vorm-kwotasie en ons sal 'n inset (tik = teks) of ons kan sê (naam = simbool) - wat ons wil. Nou is daar 'n laaste ding wat ons moet doen. Onthou hier neer wanneer ons gesê return false ons het gesê dat ons nie wil hê dat die standaard geval aan die brand. Maar dit gebeur net so dat as ons wat nou afskakel, wat ons ook al tik is nie van plan om te wys in die leser nie want dit sou die standaard gedrag van tik in 'n tekskassie. Ons wil nie langer te omseil dat, so laat hierdie opgawe vernietig vals. As ons red en dan die bladsy te herlaai, nou wanneer ek begin tik AAPL sal jy sien dat die aandeelprys op die bodem hier outomaties voltooiing. So hier is CS50 Finansies Instant. Eintlik is 'n prettige storie oor die YouTube Instant word dat die student net soort van het dit geskryf as 'n 1-nag-projek, en die volgende dag is hy 'n werk aangebied deur die YouTube-uitvoerende hoof. So so eenvoudig soos dit, jy CS50 studente, jou finale projekte kan kry jy 'n werk by YouTube. Iets soos dit is 'n baie cool idee vir 'n finale projek, reg? Ons het 'n paar bestaande funksies wat ons wou om te integreer met. Ons het die gebruikers se ervaring te verbeter 'n bietjie, en skielik soek iets op YouTube Instant kan 'n baie makliker as op soek na dit op gereelde YouTube. So dit is AJAX in 'n neutedop. 

In die voorbeelde dat Josef wat ons gesien het 'n baie autocompletes, en die autocompletes is regtig, regtig handig, want ons hoef nie te onthou nie - Byvoorbeeld, as jy onthou nie die voorraad prys vir Apple en ons weet net dit is aa iets, eerder as om net vir my sê, "'N deel van hierdie ding kos dit baie geld," Ek wil soort van soos om te weet wat die voorraad wat begin met aa. Ons kan dit doen regtig mooi met die Skoenlus biblioteek wat reeds ingesluit binnekant van CS50 Finansies. As jy kom hier om die JavaScript-kode en scroll af na Typeahead, dit is net 'n mooi plugin dat iemand reeds vir ons geskryf het, en ons kan maklik sy funksionaliteit soos hierdie gebruik. Ek getik in 'n A en hier is 'n lys van 'n paar lande wat begin met A Kom ons sê dat ek dink dit is regtig cool en dit is tyd vir my om dit te sluit op my bladsy. Dit blyk dat dit is regtig, regtig eenvoudig. Kom se spring oor hier om te quote3.js. My lêer lyk 'n bietjie anders. Down hier al van my AJAX dinge is dieselfde. Ek wil die voorraad data te laai sonder om te gaan na 'n ander bladsy. Maar nou wil ek hierdie plugin te gebruik. Die Skoenlus dokumentasie het groot voorbeelde van presies hoe ek dit kan doen. Ek wil om te sê, "Hier is die insette wat ek wil outomaties op," en ek gaan hierdie funksie genoem typeahead te roep, en dit gaan al die Typeahead dinge vir ons om te hanteer. Dit sal die lys inisialiseer, en sal dit doen al van ons filter. Die enigste ding wat dit nodig het om te weet watter data ons autocompleting op. So het ek uitgevind hierdie sleutel net deur die lees van die dokumentasie en kyk na die voorbeelde. As ek gee dit 'n sleutel van die bron, die waarde van hierdie sleutel is net n verskeidenheid van dinge wat ek wil outomaties op. Hierdie veranderlike het van hierdie ander lêer. Ek oopmaak symbols.js. 

Dit symbols.js is net baie, baie groot skikking met stringe van alle van hierdie voorraad simbole van die NASDAQ. As ek wil om terug te spring na die HTML, so jharvard, vhosts, globalhost, html, templates, quote_form. Want dit is nou quote3.js genoem, laat my die JavaScript-lêer wat ek hier insluitende verander. Nou het ek quote3.js, so ek gaan in daardie afsonderlike JavaScript-lêer te laai, die een wat Skoenlus outomaties. Nou wanneer ek spring terug na die leser, dan die bladsy te herlaai, en ek begin tik aa, daar is my outovoltooiing. En dit was regtig so eenvoudig soos dit. Ek het 1 reël van die kode wat net gesê, "Hier is die dinge wat ek wil outomaties op," en skielik het ek het dit regtig, regtig mooi funksionaliteit met nie 'n hele klomp van die poging om op al. As jy die ontwikkeling van webwerwe en veral die voorkant kant van dinge, jy gaan om uit te vind dit die geval is 'n baie. Daar is 'n baie, baie, baie werklik 'n koel gratis biblioteke daar buite wat maak dit super maklik om dinge te doen soos hierdie. Kan iemand dink van enige nadele van net autocompleting op hierdie groot lys van simbole? Wat kan iets wat is nie die beste met hierdie benadering wees? Ja. >> [Student] Tyd, as jy het 'n baie van [onhoorbaar] Ja. Reg nou is ons hierdie groot JavaScript-lêer te laai en daar is 'n baie van die simbole. En so, as ons het 'n ton van die dinge, kan hierdie soort van die latency van nie net soek verhoog maar ook die aflaai van die lêer. Groot. Enigiets anders? Reg nou is daar geen ware sin van die relevansie. As ek in 'n A, die maatskappye wat wys hier tik dalk nie die mees gewilde maatskappye wat begin met A 

Voordat ek na Apple, kan dit meer karakters te vind wat ek soek. Hierdie outomaties nie hierdie gevoel van relevansie. Dit is net gaan om te sê, "Enigiets wat ooreenstem met wat ek gaan om te vertoon." In plaas van dat, wil ek graag na een of ander manier te integreer relevansie in my soektogte. As ek gaan hier Yahoo! Finansies finance.yahoo.com As ek probeer om 'n simbool te voer op Yahoo! Finansies se bladsy en ek begin tik goog, ek het hierdie mooi lys van dinge. Duidelik, dit lyk soos Yahoo! Finansies is om iets te doen meer slim hier. Hulle het 'n paar relevansie en hulle het ook bykomende inligting soos die naam van die voorraad. Dit is iets wat ek regtig nie kan kry met net my voorraad lys van simbole. Ek wil dit en so ek gaan om dit in te neem. Om dit te doen Kom ons doen 'n paar dinge. Laat ons eers die inspekteur op hierdie bladsy want ons sien dat hierdie bladsy is nie op alle herlaai, so dit is waarskynlik die gebruik van AJAX een of ander manier word die laai van sy data. Ons kan uitvind watter data dit laai. As ek kliek op hierdie blad Netwerk, is hierdie gaan wees al die versoeke wat begin afgedank word. Nou as ek tik in trek, kan ons sien dat Ek het net 'n nuwe HTTP-versoek. Dit is waarskynlik waar die data vandaan kom. Seker genoeg, as ek kyk na hierdie URL, wat is 'n bietjie vreemd genoem, kan ons sien dat dit presies is waar Yahoo is die stuur van sy data uit. 

Ek het 'n aparte lêer genaamd suggest.php wat baie soortgelyk is in die gees na die soek funksie. Dit is basies 'n navraag te Yahoo se URL te maak, terug te kry sommige data, en stuur dit terug na my toe. Nou, eerder as die gebruik van hierdie groot, groot lys van simbole, Ek kan gebruik Yahoo se mooi relevansie dinge, en ek het nie daardie massiewe JavaScript-lêer af te laai. Ek gaan net die werklik relevante simbole vir aandele af te trek. Kom ons spring in daardie. So html, JS. Ons is nou in quote4. Nou is ons nie meer gebruik dat 'n groot lys van JavaScript-lêers. Maar daar is 'n klein soort van ontwerp probleem hier. Ons het gesê dat die A in AJAX is asynchrone. Wat dit beteken is dat wanneer ek maak 'n AJAX-versoek, so reg hier on line 8, dit is waar my AJAX-versoek eintlik afgedank. Kom ons sê nou Ek het 'n paar kode hier onder wat gaan 'n paar dinge om te doen graag waarsku die gebruiker of verandering iets op die bladsy. Wat nie gaan gebeur nie is die leser is nie van plan om te wag vir die versoek om voort te gaan voordat neerdaal en slaan hierdie lyn. Dit is die asynchrone deel. Dit gaan om die versoek te maak en sê, "Wanneer jy klaar is, "Terug te kom en noem dat die funksie wat ek vir jou gesê het om te bel binnekant van sukses." Dit beteken dat ons nie net kan aflaai al die voorrade vooraf. Ons moet die versoek te maak en wag vir iets om terug te kom. Dit beteken dat voor, ons kan net vertel Skoenlus, "Hier is die lys van die dinge wat ek wil hê jy moet outomaties op." Ons kan nie meer dit doen nie, want ons weet nie wat ons wil eintlik outovoltooiing op. Gelukkig Skoenlus gedink van hierdie, want dit is slim ouens daar, en hulle eintlik het ons ander manier om hierdie Typeahead plugin te laai. Voor, die waarde van hierdie bron eiendom was net hierdie groot verskeidenheid van dinge om te outomaties op. 

Nou is die bron eiendom is eintlik 'n funksie, en die doel van hierdie funksie is om uit te vind wat die dinge wat outomaties op. Die manier waarop dit gaan om dit uit te figuur is dit gaan Yahoo! Finansies vra wat die beste dinge om outomaties is. Om te doen wat ek gaan 'n baie soortgelyke AJAX versoek te maak. Ek gaan hierdie bladsy te versoek suggest.php. Ek wil nog steeds langs die simbole te stuur. En nou is my sukses, die Skoenlus dokumentasie het my vertel dat dit in orde dat die lys van dinge om te vul, al wat ek hoef te doen is om nou in hierdie skikking aan die callback funksie. Maar wag 'n minuut. As dit is veronderstel om 'n skikking te wees en AJAX stuur my terug teks, hoe is dit moontlik? Dit stel 'n nuwe manier van die uitruil van data genoem into. In hierdie geval het ons nie net die stuur van 'n eenvoudige string van die teks. Nou het ons te doen het met die meer komplekse lys voorraad simbole. Hierdie voorraad simbole kan ook dinge soos die maatskappy se naam of die huidige pryse. Net die gebruik van 'n groot lang string wat nie in 'n voorspelbare manier geformateer gaan nie die beste manier om hierdie inligting te kry van Yahoo se bediener vir my in 'n manier wat ek maklik kan verstaan. Into is 'n tegnologie wat maak gebruik van hoe skep ons assosiatiewe skikkings in JavaScript. Dit lyk 'n baie soos 'n JavaScript-associatieve array, en in die waarheid te sê, dit is omdat dit is. Into staan ​​vir JavaScript Object Nota Tion. Dit is basies 'n ooreengekome formaat vir die oordrag van data heen en weer. Hier hierdie into voorwerp of hierdie into assosiatiewe skikking stuur vir my 'n paar inligting oor 'n kursus. 

Die sleutels van die skikking is dinge soos die kursus wat 'n waarde van cs50, en af ​​hier kan ons sien dat ek kan 'n waarde wat 'n skikking. Ek het nie om dinge te doen soos parse uit stringe en kyk vir kommas en doen mal dinge soos dat. Want dit is in hierdie into formaat verklaar, JavaScript en jQuery funksies 'n string te omskep reeds wat lyk soos hierdie into in 'n werklike JavaScript associatieve array dat ons kan werk. Om dit te doen, is so eenvoudig as om te sê wat nie meer is hierdie lêer, suggest.php, stuur my terug net 'n string van die teks, maar ek weet dit gaan word, stuur my terug into. Dit beteken dat into kan omskep word in 'n JavaScript-associatieve array. En so jQuery, wil ek jou om dit te doen vir my. Dit beteken dat hierdie reaksie parameter hier, dit is nie meer net 'n string. Want ons het gesê jQuery wat hier kom 'n paar into, jQuery gaan wees slim genoeg om te sê, "Jy wou into?" "Ek gaan om dit te omskep in 'n assosiatiewe skikking vir jou." Kom ons neem 'n blik op die blad Netwerk wanneer ons quote4.js. Ons sal dit verander en herlaai die bladsy. Nou gaan ek te tik in 'n 'n weer. Ek het 'n paar versoeke te suggest.php, maar nou is hierdie reaksie, eerder as net die tou, dit is into. So ek het 'n oop krullerige stut gesê: "Hier kom 'n associatieve array." 

Die eerste en enigste sleutel van hierdie associatieve array genoem simbole, en dan is hier om 'n verskeidenheid van al die relevante simbole kom nou van Yahoo! Finansies, nie van dié reuse-lys. Dit is hoe ek kan eenvoudig vul hierdie outovoltooiing plugin met 'n paar data wat nie afkomstig is van 'n plaaslike lêer wat reeds voorafbepaalde maar van iets anders. Dit blyk dat ons eintlik kan neem voordeel van 'n tegnologie genaamd JSONP, of into met padding, sal hierdie suggest.php middelman uit te skakel. Maar in plaas van om dit te doen, laat ons plaas neem 'n blik op hoe ek kan verbeter selfs meer. Ek het regtig soos Skoenlus se Typeahead. Dit is regtig mooi. Maar ons is om goed in JavaScript en ons wil soort doen dit self, miskien neem 'n blik op wat hierdie plugin kan doen. Laat ons nie langer gebruik dat Typeahead ding, en laat ons probeer om hierdie lys van voorgestelde voorraad onsself te maak. Hier in quote6.php ons gaan op dieselfde manier af te begin. Elke keer as iemand tipes iets, ons wil 'n AJAX-versoek te maak. Dit is soortgelyk aan ons oorspronklike CS50 Finansies Instant. Eerder as om 'n versoek te quote.php, ons nou 'n versoek aan dat dieselfde lêer as voorheen, hierdie suggest.php, wat net gaan om data te trek vanaf Yahoo! Finansies. 

Weereens, ons is nog steeds verwag into, maar nou sedert die Typeahead is nie om dit te doen vir ons, ons ook nodig het om te stuur langs die waarde wat binnekant van die huidige teks boks. Nou weet ons wat Yahoo! Finansies vra, en so nou hier is die funksie wat ons wil uit te voer wanneer die versoek voltooi. Ons het nie die plugin om die lys te maak vir ons, so hier is waar ons eintlik gaan om 'n lys van voorstelle te bou. Om dit te doen, net soos in PHP saamgevoeg ons hierdie groot snare van HTML dan het ons gedruk het, kan ons die presies dieselfde ding doen in JavaScript. Eerstens gaan ons begin hierdie string genoem voorstelle, en hierdie string is net gaan om HTML te bevat. Ons wil dit op 'n lys van dinge wees, so ons gaan om te begin met hierdie lys tag, en nou gaan ons itereer oor al die simbole wat teruggekeer het na ons. Onthou, want ons het gesê data type: "into", is dit nie 'n string. Dit is reeds 'n skikking vir ons. Dit is regtig cool. Ons kan net sê, "Ek wil hê dat jy 'n lys element by te voeg." Ons sal dit binne 'n element in die kant van die ons sal dit gee 'n klas van voorstelle sodat ons weet wat dit is, en nou is hier die simbool dat ons terug het vanaf Yahoo! Finansies. 

Sodra ons het 'n element vir elk van die simbole wat ons het terug gekry het, ons wil net om die lys af te sluit. So nou voorstelle hierdie klein HTML fragment dat wanneer dit op 'n bladsy geplaas word, gaan na die lys van dinge wat ons is op soek na. Laat ons nou eintlik sit dit op die bladsy. Om dit te doen dat ek eintlik nog 'n leë div gemaak het en ek het dit 'n ID voorstelle gegee. Baie soos ons die inhoud van die div wat die prys van die voorraad data vertoon, ons nou net wil om die inhoud van hierdie div te stel wat hierdie string is wat bevat hierdie simbole. Deur die gebruik van hierdie HTML-metode, hierdie voorstelle veranderlike, hierdie string, is 'n string van HTML. Ek wil hê jy moet neem dat die HTML en sit dit binnekant van die div genoem voorstelle. Ons het nou net aangeheg iets aan die DOM nou. Ons het 'n paar nuwe elemente aan die DOM dat ons nou kan vertoon op die bladsy. Kom ons kyk wat dit lyk soos. As ons laai in quote6 en nou is ons terug te kom, nou wanneer ek begin tik AAPL, ons het nie meer daardie Skoenlus outomaties, maar nou het ons hierdie lys wat ons het onsself. Dit is 'n bietjie leliker as die Skoenlus Typeahead, byvoorbeeld, maar dit nie toelaat dat ons 'n ander ding om te doen. Wanneer ons kyk na daardie Skoenlus plugin, het ons gesien dat wanneer ons autocompleted, een van die outomaties waardes was AAPL. Wat dalk nie so nuttig. As 'n gebruiker, kan ek nie onmiddellik herken al die simbole vir aandele. Wat ek waarskynlik meer geneig om te erken is die maatskappy se werklike name. So dit sou nie werklik nuttig as eerder as sê AAPL dit het iets gesê soos Apple Inc. Want ons het gerol hierdie onsself, kan ons baie maklik doen. Kom ons ons laaste kwotasie lêer hier oop te maak, so quote7. 

Dieselfde ding. Ek het net 'n ander PHP lêer wat ons sal terugkeer na meer as net die simbole. Dit sal ook ons ​​terug die maatskappy se name. En so sal ons doen dieselfde ding. Ons 'n AJAX versoek. Sodra die versoek voltooi is, gaan ons hierdie funksie om hier uit te voer, en hierdie funksie is gaan om te bou aan 'n groot string van elemente. Maar die verskil hier is dat die waarde van hierdie lyste is nie meer net die simbool, dit is nou die naam. So ons het 'n klein probleem. Wanneer ons ons lookup, ons nodig het om te slaag dit op een of ander manier die simbool. Ons kan nie slaag soek iets soos Microsoft Corporation. Ons moet dit MSFT te slaag. Wanneer ons HTML wil skryf, ons het 'n baie mooi ingeboude eienskappe. 'N A kan geassosieer het met dit 'n href of 'n klas. Maar wat ons regtig nou nodig het, is vir elk van hierdie skakels 'n beurs simbool wat verband hou met dit te hê. Daar is geen ingeboude in HTML-attribuut vir die beurs simbool, maar gelukkig, HTML5 stel ons in staat om ons eie eienskappe te skep om te wees wat ons wil. Deur sê data-simbool, het ek 'n nuwe kenmerk wie se naam ek nou net gemaak het, en dit is okay, want ek voorafgegaan met hierdie data. Ons gaan binne-in daar die simbool van die voorraad op te slaan nou. Wat dit beteken, is dat alhoewel ons die waarde van die maatskappy se naam bêre binnekant van ons outovoltooiing onthou, ons is nog steeds die simbool wat verband hou met elke maatskappy. Die manier waarop ons om dit te doen, is binnekant van hierdie element self. Dus beteken dit dat ons moet een meer verandering te maak. Wanneer ons op dit nou, ons nodig het om werklik te neem voordeel van die simbool kenmerk eerder as om net die waarde daarvan. As ons back-up, ons heg 'n event handler vir voorstelle. Wanneer een van hierdie voorstelle is nou geklik word, ek wil om iets te doen. Wat ek wil doen, is verander die waarde van daardie insette boks. Nou wil ek hierdie selfde Val funksie te stel. 

So sonder enige argumente val funksie terugkeer na wat is reeds in die teks boks, maar as jy dit gee 'n string, gaan dit dat die string te neem en dit in die tekskassie. Ek kies die tekskassie in die dieselfde manier. Dit se naam is simbool binnekant van vorm-quote. Nou is ek stuur dit die waarde van die attribuut-data-simbool. Hierdie ding hier is 'n nuwe, die $ (hierdie). Wat dit verwys na is die element wat gekliek. Ons kan hier sien dat ons nie te heg 'n klik gebeurtenis tot elke element met 'n klas van die voorstel individueel. Inteendeel, ons nader dit 'n bietjie anders. In plaas daarvan ons sê wanneer enigiets binnekant van hierdie voorstelle div, wat onthou net die houer vir die lys, as iets binnekant van hierdie div word gebruik en dit het 'n klas van die voorstel, Ek wil hierdie geleentheid aan die brand. Basies wat dit beteken ons kan doen is dat ons hierdie event handler kan hergebruik vir al die dinge wat in die lys. So ons het nie een event handler vir die eerste element en 'n ander event handler vir die tweede element. Ons kan eerder sê, "Ek wil die dieselfde event handler om aansoek te doen om alles in my lys." Maar ons moet op een of ander manier weet watter element is gekliek. Hierdie "hierdie" navraag verteenwoordig net dat. Dit is die voorwerp wat net gekliek deur die gebruiker. As ek net die 3de skakel gekliek het, dit verteenwoordig die element van daardie 3de skakel, wat beteken dat ek kan sy kenmerk, data-simbool kry, wat ons weet het die simbool te bevat wat verband hou met die maatskappy Ek het net gekliek. As ons spring terug na ons finansiële, ons kan nou sien dat wanneer ek begin tik iets soos MSFT, ons nie meer om net die voorraad simbole, ons is nou om die werklike maatskappye. Maar wanneer ek kliek op een van hierdie maatskappye, kan ons sien dat ons eintlik is die mense van die teks boks nie met die naam van die maatskappy maar met alles wat is gestoor binnekant van daardie data eienskappe. En so, as ek eintlik inspekteer een van hierdie elemente deur regs te klik en kliek op Inspekteer Element, ons kan eintlik sien wat dit lyk soos. 

Onthou, dit is iets wat ons geskep binnekant van die for-lus wanneer ons die opbou van daardie string van HTML. Ons kan hier sien dat hierdie data-simbool die waarde van MSFT, wat is 'n groot. Dit is wat ons verwag het. Dit is die simbool en dit is hoe ons die waarde wat ons nodig het om te gebruik binnekant van hierdie teks boks. Dit is genoeg vir die kwotasie vorm, want dit is soort van saai. Kom ons maak 'n paar vinnige verbeterings aan ons portefeulje bladsy. As jy gebruik CS50 Finansies vir 'n rukkie en jy begin met die koop en verkoop van 'n baie van die aandele, uiteindelik hierdie tabel gaan kry redelik groot, en jy gaan 'n aandelenkoers, natuurlik om te wil. Sodra die tabel is baie, baie groot is, kan dit nuttig wees vir die gebruiker om te probeer om te soek meer as dit. Binnekant van die soekkassie as ek begin tik iets soos Disney en soek vir my Mickey Mouse voorraad, kan ons sien dat die tafel nou filter wat gebaseer is op wat ek nou net getik. Hierdie funksie lyk super ingewikkeld, maar dit is regtig, regtig maklik met jQuery en JavaScript. Hierdie portfolio.php lêer bevat 'n JavaScript-lêer genaamd portfolio.js. Kom ons neem 'n blik op dit. So html, JS, portefeulje. Hier is waar ons is om dit te doen soek op die tafel. Die eerste ding wat ek nodig het om te doen is om heg 'n event handler dat die tekskassie omdat ons weet dat ons wil ons filter funksie aan die brand elke keer as die gebruiker druk iets omdat ons nie tyd vir Soek knoppies. Die eerste ding wat ons nodig het om te doen, is om uit te vind wat die gebruiker is op soek na, net soos ons tevore gedoen het. Hierdie navraag verwys na die huidige element wat die gebruiker interaksie met. 

Omdat die gebruiker interaksie met die soekkassie, $ Hierdie verteenwoordig die soekkassie, so this.val gee vir ons wat is binnekant van die soekkassie die gebruiker is tans tik. So, nou wat ons wil doen, ons wil itereer oor al die rye binnekant van ons tafel. Al die rye in ons tafel te kies, Ek het 'n ID van tabel portefeulje, en elke ry word verteenwoordig deur 'n TR element, sodat hierdie selector gaan om terug te keer vir my 'n groot verskeidenheid van al die rye in my tafel. Nou wil ek om oor daardie skikking te itereer. Ek kon jou 'n for-lus, maar jQuery eintlik bied ons die mooi funksie genaamd "elke." Wat elkeen doen, is elkeen neem een ​​argument, en dat die argument is 'n funksie. Wat dit gaan doen, is dit gaan om daardie funksie van toepassing op elke element binnekant van hierdie lys. Hierdie funksie neem een ​​argument wat e, en wanneer hierdie funksie uitgevoer word, is hierdie e vervang gaan word met die eerste ry, dan is die tweede ry, en dan die derde ry. Deur hierdie manier, dit is die dieselfde ding as die bestuur van 'n for-lus en dan uitzoeken die huidige element gebaseer op die indeks binnekant van jou loop. Op elke iterasie, vir elk van hierdie elemente in die tabel, Ek wil om te kyk of die teks van die element - die teks van die sel binnekant van die ry - ooreenstem met wat ek soek. Hierdie groot lang string van die opdragte is hoe ek dit kon doen. Eerste, weer, dit verwys nou na - want dit is die binnekant van 'n nuwe funksie - dit is nou die huidige ry in die tabel. Ek wil die huidige ry in die tabel te neem, en ek wil hê dat al sy kinders te kry. Onthou, die DOM is 'n hiërargiese boom, wat beteken dat elemente het 'n aantal kinders. 

Hierdie kinders funksie. Gaan om terug te keer na my terug 'n verskeidenheid van al die elemente wat die kinders van, in hierdie geval, 'n ry in die tabel. Dit is eenvoudig net die selle binne-in van die ry. Ek wil net om te soek oor die eerste sel. Die eerste funksie. Sê gee my die eerste element in die skikking. Toe het die teks funksie sê kry my presies wat is binnekant van die sel want ek wil oor daardie teks te soek. Ten slotte, laat ons skakel dit om na onderkas, so ons kan doen teks geval onsensitiewe navrae. Ten slotte, ons wil om te sien of daardie string binnekant van 'n tabel bevat die tou wat ons op soek is na. Die indexOf funksie in JavaScript nie net dat. Dit vertel ons of hierdie string bevat 'n ander string. As dit waar is dat die sel bevat wat ek is op soek na, dan sal ek wil om seker te maak dat dit getoon. Die show metode sal sê, "Toon die element." As dit nie die geval is, dan beteken dit alles wat ek soek is nie vervat binne daardie ry, en ek wil om weg te steek van die gebruiker. Dat daardie mooi filter effek bereik waar ons nie meer sien die hele tabel. As jy belangstel in hoe om te maak hierdie ENKELE asook, ons sal die bron online post. Maar dit is regtig eenvoudig. JQuery het ontsagwekkende metodes vir hierdie animasies en manipuleer CSS eienskappe. So, wat is dit vir my. 

Wat lê dan voor? Soos u sal sien in 'n paar dae, die finale projekte voorstel is te danke. Die finale projekte voorstel sal jou 'n paar vrae vra, maar onder hulle sal drie mylpale - een van 'n "goeie" mylpaal, een 'n beter mylpaal, en 'n mens 'n beste. Die idee regtig julle ouens te help jou verwagtinge sodat minimaal jy sal gelukkig wees met die opbrengs van jou finale projek en dit sal "goed" so ver as jy bekommerd is. Maar dan in die belang van die kry jy net 'n bietjie te bereik na iets beter of iets beste, ons sal ook sorteer stoot jy die rigting wat as goed. Die CS50 Hack-a-thon, intussen, is in 'n paar weke. Tipies, doen ons dit op 'n lotery basis basis as gevolg van belang is, maar die kans is ons 'n paar honderd van ons in shuttle bus neem van Harvard Square Kendall Square waar Microsoft het 'n pragtige fasiliteit gepas genaamd "NERD" - die New England Research and Development Center. Ons sal daar om 20:00 Ons sal 'n paar kos. Rondom 01:00 het ons sal 'n bietjie meer kos. Omstreeks 05:00 as jy nog wakker is, sal ons kop bo aan IHOP of neem jou terug na die kampus. Die doel daar is om te duik in die finale projekte saam van klasmaats en personeel. Dan is 'n paar dae later die CS50 Fair, wat eintlik bedoel is om 'n geleentheid te wees vir julle om jou werk ten toon te stel en prestasies vir die semester terwyl vryf skouers met mekaar en kry 'n gevoel van wat almal gedoen het. Met wat gesê het, baie dankie aan Tommy en aan Josef, en ons sal sien wat jy op Maandag.  [Applous]