[Powered by Google Translate] [Week 9, Vervolg] [David J. Malan - Harvard University] [Dit is CS50. - CS50.TV] 

Dit is CS50. Dit is het einde van week 9. Heel hartelijk bedankt. Eindelijk. Week 9. Ik heb het. Vandaag vervolgen we onze gesprek over web programmeren met een oog naar het laatste project, niet omdat je iets op het web gebaseerde doen voor de laatste projecten, maar omdat zowel voor afstudeerprojecten of na CS50 dit is zeker de richting waarin de moderne software gaat. En toch is het niet echt een eenvoudige zaak. In feite, een van de moeilijkste dingen om te doen is het aspect van het ontwerp. 

Bijvoorbeeld door het ontwerp verstaan ​​we het daadwerkelijk krijgen van de gebruikersinterface of de gebruikerservaring rechts. Ik durf te zeggen - en we weten uit een recent probleem set wanneer een paar van jullie klachten uitgezonden over enkele stukje software of hardware die je razend, zowel op de campus of off - er is een hoop sites die er zijn, is er een hoop hardware die er zijn, dat soort zuigt. Maar de realiteit is dat het maken van dingen die gemakkelijk te gebruiken maar zijn niettemin krachtig is een zeer moeilijke uitdaging. Dus voor vandaag vroeg ik Jozef en Tommy om samen met mij hier zodat wij een gesprek te hebben, zowel over design en wat voor soort denkprocessen moet beginnen door je hoofd als je je laatste projecten te ontwerpen, uw toekomstige inspanningen. En dan met de hulp van Tommy's zullen we kijken naar enkele van de implementatie details. Hoe kun je een visie hebben op papier of in je geest die u vervolgens kunt programmatisch uitvoeren met behulp van enkele van de technologieën en technieken we net begonnen te praten over, namelijk JavaScript en iets nog nieuwere, namelijk AJAX, asynchrone JavaScript. Dat maakt het mogelijk om des te meer dynamiek van een user interface door het ophalen van meer en meer gegevens geleidelijk van een server. Dus we zullen zien een aantal van deze fragmenten en vandaag. Even terzijde, als je geïnteresseerd bent te concentreren in de informatica of minoring in de informatica, weet dan dat deze vrijdag 's middags in Maxwell Dworkin 221 zal er een pizza evenement waar u kunt een beetje meer te leren over informatica. Op je weg naar buiten de deur vandaag kun je op te halen een onofficiële gids voor CS op Harvard. We zetten het op de vuilnisbakken buiten op heuphoogte zodat als je wilt dit te grijpen en een beetje meer te leren over CS, dat er voor u als het was in week 0. Ook als u wilt om met ons mee voor CS50 lunch deze vrijdag om 1:15 uur, hoofd naar cs50.net/lunch. Zonder verdere omhaal, ik geef je onderwijs collega Joseph Ong. Hi. [Applaus] Bedankt. De eerste keer dat ik geleerd over het ontwerp was een klasse hier genoemd CS179. 

De professor op het moment vertelde ons het verhaal over een andere professor die was gegaan naar een hotel en de gebruikte kranen. Kan iemand mij vertellen wat de 2 knoppen aan de linker-en rechterkant te doen? [Student] Warm en koud. >> Warm en koud. Goed. Wat je normaal gesproken verwachten, toch? Deze professor na het gebruik van de kraan wil een douche nemen, en hij overgaat tot deze gebruiken. Hij denkt dat de linker-en de rechterzijde zijn voor warme en koude, toch? Maar kan iemand mij vertellen wat deze eigenlijk doen? Elke handen? [Onverstaanbaar student reactie] >> Een suggestie is? [Onverstaanbaar student reactie] >> Temperatuur? Dus een van hen, de temperatuur en de andere besturingselementen? >> [Student] Water druk. Waterdruk. Goed. Deze professor loopt in dit en, denken dat ze de controle warm en koud, draait de juiste is, waarvan hij denkt dat voor warme, helemaal naar boven want hij wil een warme douche. Nou, deze niet echt met elkaar overeenkomen, dus hij krijgt dit niet erg leuke ervaring van het zijn in een koude douche, en we weten allemaal hoe dat voelt. Dit is een voorbeeld van een ontwerpfout. Wat ik daarmee bedoel is zijn verwachting uit de kraan niet overeenkomen met wat kwam uit de douche, dat is een beetje jammer voor hem. Dit is dus een voorbeeld van een ontwerpfout dat gebeurt in het echte leven. Maar we zien allerlei andere ook niet. We zijn waarschijnlijk niet fans van de MBTA systeem. Dit is een metro-systeem eigenlijk in Londen, die zegt: "Deze knop is niet in gebruik." Waarom is het zelfs op daar? Waarom hebben we nog schelen? Toen ik een kind was, dat de tech-savvy in het huis, wanneer de computer zou crashen, zou mijn moeder bij mij komen, laat me dit scherm en vraagt ​​me wat er is gebeurd. 

Zelfs ik weet niet wat dit betekent. [Gelach] Wat? [Gelach] Soms hebben we het gevoel dat software-ontwikkelaars zijn gewoon trollen ons. Als gebruikers zijn we als: "Wat is er aan de hand? Iemand vertellen." Dit alles komt neer op een kwestie van ontwerp. Design, zoals we kunnen zien, is niet louter over esthetiek, het gaat niet om hoe de dingen eruitzien. We zien hier dat dit eigenlijk weinig pop-up hier ziet er vrij aardig. Het heeft een slagschaduw op de achtergrond, het heeft grenzen radiussen aan de hand. Het is een beetje mooi. Het is niet echt goed ontworpen, want het is niet erg gebruiksvriendelijk. Dat kleine pop-up die opkomt niet echt geven mij geen informatie over wat er gaande is, is het niet vertel me niets als de gebruiker over hoe om te herstellen van die fout. We willen nadenken over dingen die het ontwerp niet is. Ten eerste, het is niet esthetiek. Het is ook niet vullen uw app met tonnen onnodige functionaliteit. Als je een Thais restaurant, heb je waarschijnlijk niet wilt dat naar een tandarts op hetzelfde moment te zijn. En met Facebook Vragen, niet dat veel mensen gebruikt en het was niet echt de kern van wat ze aan het bouwen waren. En dus het is leuk om na te denken over het niet zozeer de hoeveelheid van de dingen dat je zetten om uw aanvraag, maar de kwaliteit en hoe je het maken van die gebruiker ervaring beter door daadwerkelijk te verbeteren op wat je al hebt. 

In een notendop, het ontwerp vertelt ons wat we bouwen moeten zijn. Bijvoorbeeld, als we bouwen iets dat Laat ons zoeken dingen op, zoals Google, bijvoorbeeld, moeten we doen dingen op een manier die dat vereist dat de gebruiker veel klikken nemen om naar wat ze willen, of moeten we het doen op een manier, bijvoorbeeld met Google Instant of autocomplete waarmee ons naar onze resultaten sneller? Engineering worden als Tommy zal u tonen, in feite bouwen. Er zijn veel soorten van het ontwerp. Bijvoorbeeld, om als je iets aan het bouwen implementeren iets in een derde wereld land waar er niet veel elektriciteit of dat veel technologie, je moet ontwerpen wat u bouwt op een manier die gemakkelijk toegang verleent tot de mensen. Maar wat allerlei andere ontwerpbeslissingen kunnen er of zou kunnen zijn die betrokken zijn bij iets als dit? Ja. Ik zie een hand. [Onverstaanbaar student reactie] >> Klopt. Precies. Toegankelijkheid is een ding. Veel mensen denken niet na over: "Hoe zit mijn gebruikers?" zoals de extremen van beide spectrum. Ik heb gebruikers die misschien met een handicap dat ik niet na te denken over en ik ben net te denken over het ontwerpen voor de algemene gebruiker. Het internet is voor iedereen toegankelijk tegenwoordig, en ik moet ontwerpen voor die mensen ook. Welke soorten van andere ontwerpbeslissingen zou je maken? Ja. >> [Student] Kosten. Kosten. Heel goed. Een ander ding dat we kunnen onze ontwerpbeslissingen baseren op zijn kosten. Als we een bedrijf, wil je iets dat geen rekening veel kosten om te produceren op te bouwen maar kan verkopen tegen een bijzonder hoge kosten of kan ons wat winst. 

Dit zijn allemaal verschillende soorten van het ontwerp, maar als we iets aan het bouwen op het internet of als we iets aan het bouwen dat waarschijnlijk kost niet veel om nu op te bouwen, zoals Internet applicaties - je hoeft niet te veel kapitaal in te gooien met het oog op iets dat echt werkt te maken - waar we meer zorgen over de gebruikerservaring. We noemen dit user centered design. In wezen wat user centered design betreft zet jezelf in de schoenen van uw gebruikers. Als iemand zich aanmeldt voor wat ik bouwen, ze hebben blijkbaar gekomen om mijn specifieke toepassing met een doel voor ogen, met een taak die ze willen voltooien. En uw taak is niet alleen om hen te helpen voltooien die taak maar om hen die taak te voltooien op een wijze die efficiënt, intuïtief en, zoals sommigen persoon zei daar, toegankelijk. Wat betekent efficiëntie bedoel je? Efficiency betekent hoe snel kan ik mijn gebruikers de taak te voltooien gezien mijn interface. Duurt het veel klikken voor hen om van de ene plaats naar de andere? Is het vervelend? Hebben ze te veel repetitieve taken uit te voeren? We willen dat proces zo efficiënt mogelijk zodat ze niet hoeven te dat soort dingen te doen. Wat intuïtief, dat bijvoorbeeld als een gebruiker kijkt my interface, is het gemakkelijk voor hen om van plaats tot plaats? Is het gemakkelijk voor hen om erachter te komen wat ze moeten klikken in mijn interface om voor hen om het doel of de taak die ze willen bereiken bereiken? 

En tenslotte, als een persoon zei daar, bereikbaarheid is erg belangrijk. [Mannelijke spreker] Het gaat om de toegankelijkheid voor zaken als visie, zoals hoe ik eigenlijk iets te ontwerpen voor iemand die blind is? Oh. Voor mensen die niet kunnen zien op alle, hebben we iets genaamd schermlezers. Wat je moet doen is moet u uw website te bouwen op een manier dat, bijvoorbeeld, bepaalde technologieën wat wij noemen - Er zijn veel dingen nu. Ik denk dat er schermlezers genoemd JAWS. Veel van deze dingen afhankelijk van wat wij ruimte noemen regels om uit te lezen wat de gebruiker aanwezig is op de pagina. Voor die mensen die niet kunnen zien, moet u ervoor zorgen dat deze schermlezers daadwerkelijk kan ophalen van de inhoud van de pagina en kan eigenlijk op vertoon van uw gebruikers, als je niet kunt zien, in ieder geval kunt u de inhoud nog steeds begrijpen op de pagina. Ja. Oke. Genoeg gepraat over een goed ontwerp. Laten we praten over slecht ontwerp. Dit zijn dingen die je niet moet doen. Kan iemand mij vertellen over hun ervaringen met Craigslist en wat ze denken is niet zo geweldig aan dit ontwerp? Ja. >> [Student] Ik denk dat er te veel woorden in een gebied. Te veel woorden, toch? Volledig overweldigend. Je komt naar deze pagina en je begroet met een hele hoop dingen hier dat misschien niet eens relevant zijn voor u. Bijvoorbeeld, je woont in een staat die niet begint met deze letter. Laten we zeggen dat u woont in Texas of zo. 

Je moet helemaal naar beneden de pagina om naar de locatie die u bent bij scrollen. Ik kom uit Boston, dus laat me in Massachusetts. Waar is Massachusetts? Oh, het is precies hier. Oh, het is Boston. Oke. Laten we eens kijken naar Boston. [Gelach] Pretty overweldigend, toch? Awkward dingen daar. [Gelach] Laten we zeggen dat ik ben op zoek ergens te wonen. Hoeveel mensen hebben daadwerkelijk gebruikt Craigslist? Ton van u. Er zijn vrij slecht manieren om te kijken naar deze, maar laten we eens kijken naar dit. Wat is het verschil tussen img en pic? Kan iemand mij vertellen? Er is eigenlijk geen verschil. Ze bedoelen precies hetzelfde, maar ze hebben verschillende labels voor hen om wat voor reden. Als ik klik op beeld heeft, gebeurt er niets op de pagina. Ik heb eigenlijk nog een keer op Zoeken tot er iets gebeurt. Wat zou een beter ontwerp besluit dat er sprake zou kunnen worden gedaan zijn? Als ik klikken op dat filter, ik waarschijnlijk wilt filteren die bepaalde actie of dat bepaalde categorie. Dus in plaats van te moeten drukt u nogmaals op Zoeken, kon ik gewoon automatisch doen de filtering soort van Google stijl waar ze het meteen. [Malan] Maar maak je geen vormen zoals we hebben gezien dat ze tot nu toe moeten fysiek worden ingediend door het raken van Voer ten minste of het klikken op een knop? Zoals u hebt gezien ze tot nu toe, je eigenlijk moet klikken om die dingen te doen op Verzenden. 

Maar als Tommy zal u laten zien in een tweede, zijn er eigenlijk manieren voor u zodanig dat wanneer u klikt op dat ding automatisch kan versturen wat wij noemen een AJAX verzoek en terug te krijgen van gegevens en onmiddellijk uw resultaten. Er zijn vele dingen die verkeerd zijn met deze interface. [Malan] Kun je zoeken naar Cambridge? Er is iets wat afwijkend hier waar u de zorg over Cambridge en toch je krijgt Westford, Spring Hill, West Newton en dergelijke. Waarschijnlijk niet ideaal. >> Waarschijnlijk niet ideaal. Hoe zou ik in staat zijn om de gebruiker de ervaring beter te maken op deze specifieke pagina? Ja. >> [Student] instructies. Oke. Instructies in wat voor soort zin? [Student] Bijvoorbeeld, een ding voor de eerste keer gebruikers die niet eens weten wat Craigslist is of als u niet weet wat je moet doen. Juist. Dus uitleggen wat Craigslist is op deze pagina is van belang. We kunnen eigenlijk zeggen gebruikers wat deze pagina eigenlijk voor is. Als ik ben gewoon een bezoek aan deze, zie ik een hele hoop locaties. Ik weet niet eens wat ze betekenen. Maar wat nog belangrijker is, alleen maar kijken naar deze interface, herinner me dat ik moest naar beneden scrollen een hoop dingen op een bepaalde gemeenschap vinden dat ik eigenlijk gaf op dit punt. Wat is een snellere manier ik dat kon doen? Ja. [Student] Verdeel ze in oost, west regio's. >> Oke. Ik kon verdeel ze in meer categorieën die me kon helpen sneller te bepalen hoe je naar die specifieke locatie. [Student] Doe een drop-down lijst. >> Juist. Oke. Ik kon gebruik maken van een drop-down menu, want we hebben een vaste set van dingen en we konden laten zien in een drop-down menu. Op die manier duurt het niet zo veel ruimte op het scherm. Maar nog beter dan dat, wat kunnen we doen? Ja. >> [Onverstaanbaar student reactie] >> Kun je wel zeggen? >> [Student] vak Zoeken. Ja, een zoekvak. Dat is geweldig. Wat kunnen we eigenlijk doen is als we kijken terug op de dia's, zoekvak. Autocomplete. Zeer eenvoudige manier om te zoeken door middel van de resultaten die je weet dat ze in een set. Als ik begin te typen BO, maar toon mij alle resultaten die BO binnenkant van hen hebben. Op die manier kan ik heel eenvoudig de bijzondere degene die ik wil naar in plaats van te bladeren door dit echt grote lijst. 

Dit zijn allerlei echt lage-opknoping fruit dat iemand die Craigslist uitvoering daadwerkelijk kan doen om de ervaring op de website een stuk beter voor hun specifieke gebruiker te maken. Oke. Genoeg gepraat over slechte websites. Laten we praten over Facebook. Toen Facebook naar buiten kwam, en in het bijzonder Facebook foto's, Er waren tal van andere diensten op het tijdstip waarop precies kon doen dezelfde dingen. Ze konden het organiseren van uw foto's in albums. Wat je zou kunnen doen is dat je zou kunnen organiseren in sets ook. Je kon ordenen op datum. Je zou kunnen doen al die bijzondere dingen. Maar weet iemand wat maakte Facebook-foto's ontploffen op het moment dat het werd uitgebracht? Ja. >> [Student] Tags. >> Tags. Precies. We hebben Milo hier, die onze hond mascotte met dat CS50 bandana. U kunt zien dat we dit tagging functie in het midden te hebben. En wat maakte Facebook foto's zo interessant vanuit een usability standpunt is dat het eigenlijk konden mensen via deze aan hun vrienden te betrekken bij hun foto's. Voor Facebook, omdat hun website is met name sociale, het gaat over het bouwen van dit soort sociale sfeer. Dat verbeterde de ervaring van foto's veel meer omdat ze daadwerkelijk beginnen met te zeggen: "Dit zijn verbindingen tussen mensen, en dit zijn foto's over mensen die je echt om geeft. " Een deel daarvan is ook soort narcisme. Mensen willen worden gelabeld in foto's en dat soort dingen. Terwijl dat is niet per se een goede menselijke eigenschap, op hetzelfde moment het is gebaseerd op een goed ontwerp beslissingen omdat mensen eigenlijk zorgen over dit soort dingen. Dus dat is Facebook foto's. 

Maar laten we praten Facebook meer in het algemeen. Ik weet zeker dat veel mensen hier hebben meningen over Facebook, zowel goede ontwerpbeslissingen en slechte ontwerpbeslissingen. Dus laten we ventileren of gelukkig zijn. Kom op. Ik weet dat jullie allemaal gebruik maken van Facebook. Iemand moet iets slechts te zeggen of iets goeds te zeggen over. Ja. [Student] In het nieuws-feed is er een heleboel dingen die ik niet echt zorgen over. De nieuws-feed toont wel een heleboel dingen die je misschien niet schelen. Je hebt vrienden op Facebook die u niet hebt voldaan voor 2 of 3 jaar en je ziet hun nieuws resultaten opduiken in je nieuwsfeed en je hoeft niet echt zorgen over. Facebook heeft feitelijk een poging om dit verbeteren, en ze hebben echt geprobeerd om relevante resultaten te duwen naar de top van de nieuws-feed als te laat zodat je echt zien dingen door vrienden die relevant zijn voor u of uw naaste vrienden. Iets anders? Ja. [Onverstaanbaar student reactie] >> Kun je wel zeggen? [Student] De advertenties zijn relatief onopvallend. >> In welke zin? [Onverstaanbaar student reactie] Ze hebben niet licht op het scherm, zoals banners. Oke. Dat is goed. Als je het internet herinneren van de jaren '90 - >> [Malan] ik daar was. >> Hij was er. [Gelach] Je zou kunnen herinneren knipperen GIF achtergronden, glinsterende dingen, GeoCities stijl soort dingen. Dat is niet echt een voorbeeld van een goed ontwerp want het is echt af te leiden van de inhoud. De Yale kunst website gebruikt om geanimeerde GIF als hun achtergrond hebben en je kon niets lezen op de pagina, maar ik denk dat iemand daadwerkelijk sprak met hen en nu is het een beetje anders. [Malan] Het is veel beter nu. >> Het is nu veel beter, zoals je kunt zien. >> [Malan] Oh ja. Gewoon geweldig, net - Ja. Oke. 

Een deel daarvan is ook het maken van uw pagina mogelijk zeer minimalistisch en zeer begrijpelijk dus dingen op de pagina stroming in een manier die erg logisch en niet in de weg van elkaar. Welke soorten van andere dingen zijn goed over Facebook of slecht over Facebook? Laten we gewoon een ontwerp gesprek hier. Oh. Waar? Ja. [Student] De nieuwe tijdlijn-systeem kunt u de persoon's Profiel Zoek over hun verleden. Ooh, tijdlijn. Tijdlijn is een groot goed, want het laat je stalken je vrienden terug toen ze op de middelbare school. Tijdlijn is goed omdat het laat je filteren door middel van de inhoud een stuk sneller, het laat je dingen vinden die anders zou hebben genomen je een hele lange tijd te vinden gewoon op en neer bladeren, omhoog, omhoog, omhoog, omhoog, omhoog, alsof je terug in de tijd. Maar dan is er ook een soort van nadeel dat in termen van user experience. Wat zou dat zijn? Groot woord dat begint met P-R. >> [Student] Privacy. >> Privacy, toch? Privacy is een groot gebruikerservaring probleem. Dit is een van de dingen die ik haat het meest over Facebook nu. [Gelach] [Malan] Zoals doe ik nu. David wist niet dat dit echt gebeurd is tot gisteren. Dus nu hij weet dat elke keer als ik hem praten ik weet dat hij is mij te negeren. [Malan] Het lastige deel was ik was eigenlijk hem te negeren, en ik wist niet dat hij wist dat ik hem negeren. [Gelach] Privacy is een groot probleem. Kan iemand hier mij vertellen wat er slecht over Facebook privacy naast het feit dat ze dingen doen zoals dit? Wat is het bijzonder moeilijk om te doen met betrekking tot Facebook privacy? Dat soort is een toonaangevende kwestie. Ja. >> [Student] Verberg uw foto's van bepaalde mensen. Juist. Precies, om uw foto's verbergen voor bepaalde mensen. Ze hebben dit kleine, kleine knop in de rechterbovenhoek waarmee u schakelt u de privacy van een foto. Hun privacy-opties zijn erg gevarieerd tussen de verschillende soorten menu's. 

Ze hebben een stuk beter geworden over het onlangs, maar het wordt gebruikt om het geval te zijn dat wanneer je al je vrienden te voorkomen dat het zien van foto's, je zou moeten gaan door middel van een zeer gecompliceerde 5-stap-proces van het zijn, zoals, Laat me op deze link klikt, laat me nu opnieuw op, laat me nogmaals op, laat mij aangeven welke mensen niet kunnen mijn foto's te zien. Dat is niet bijzonder goed op een deel van Facebook omdat er zo veel over user experience is eigenlijk hen de vrijheid om te controleren wat mensen kunnen zien. We noemen deze gebruiker controle en vrijheid. Als je niet laat uw gebruikers doen dat op een manier die is efficiënt en intuïtief, dan is uw gebruikerservaring is niet echt zo goed in alles.  Zou jullie graag iets over Facebook zeggen? Hoe kan ik dit uitschakelen? [Ong] U kunt niet dit uitschakelen, en dat is een enorme usability fout van de kant van Facebook. Deze functie - Ik heb eigenlijk keek in het gisteren - het is of dat je niet kunt doen of het is ergens begraven heel, heel diep in de uitsparingen van Facebook, want ik kan niet achterhalen hoe deze functionaliteit uit te schakelen op alle. [Malan] Maar soms zijn deze beslissingen zijn niet voor de hand want jullie hebben ons veel nuttige feedback op verschillende CS50 toepassingen en websites die de cursus wordt gebruikt. We hebben niet geïmplementeerd al deze verzoeken en suggesties. 

Deel daarvan is voor het krijgen zoveel verzoeken dat het een functie van de tijd, maar soms hebben we gewoon een bewuste beslissing, zoals, "Bedankt voor de suggestie, maar we het niet eens." Dus hoe kan je eigenlijk beslissen wat u moet doen als uw gebruikers denkt dat je iets moet doen zelfs als je niet per se? Het is een mooie balans tussen daadwerkelijk te luisteren naar wat uw gebruikers zeggen en eigenlijk met een soort van regel waar je zegt, "We zijn niet van plan om te doen wat deze gebruikers zeggen." En in het bijzonder, ik denk dat er een citaat van Henry Ford die dit samenvat vrij goed. "Als ik had gevraagd mensen wat ze wilden, zouden ze hebben gezegd dat ze wilden sneller paarden." Kan iemand soort van plagen elkaar wat dat citaat echt betekent? Het is niet alleen dat gebruikers weten wat ze willen, maar het is meer dat - [Student] Ze weten niet wat er mogelijk is. Voor een deel dat ze niet weten wat er mogelijk is. Plagen die uit elkaar een beetje meer. Wat bedoel je daarmee? [Onverstaanbaar student reactie] Dat is goed. Wat ik denk dat we proberen te zeggen is dat de mensen weten wat ze willen. Ze willen sneller paarden. Wat ze echt willen is de mogelijkheid om sneller te bewegen, maar ze weten niet echt het medium waarmee om dat te bereiken. Wanneer u aan uw gebruikers en uw gebruikers je iets vertellen en ze vertellen je, "We willen deze functies en deze functies en deze functies," je wilt niet per se denken: "Laat me gaan "En uit te voeren wat ze expliciet zeggen," maar wat je wilt denken is: "Wat voor soort ideeën kan ik van dat?" Wat willen ze eigenlijk? 

En van daar wat je kunt doen is het ontwerpen iets dat deze verzoeken voldoet maar niet noodzakelijkerwijs op de manier die de gebruiker verwacht dat moet worden voldaan. Dus voor iets als laatste projecten, in zeer reële termen, wat is een handig heuristisch als het gaat om het maken van iets beters, vooral als de ontwerper heeft deze arrogantie over hem waarbij je soort van weet wat het beste is, kan je de input van uw gebruikers, maar hoe doe je eigenlijk gaan over het krijgen van die feedback? In de laatste projecten, heel concreet, wat produceert een optimaal resultaat hier? Wat levert een optimaal resultaat - en ik zal over deze gaan in een tweede - is dit proces van het ontwikkelen en vervolgens testen en vervolgens itereren. Wat ik bedoel met het testen is meestal bij het ontwerpen van iets je denkt dat het redelijk goed, als: "Ik ben zo'n grote ontwerper. Iedereen gaat dit geweldig." En dan zet je het daar en de mensen niet echt leuk om wat voor reden. Wat je moet doen is je de delen van dingen die mensen doen, zoals te nemen en vernieuwen van de dingen die mensen niet leuk vindt. Het klinkt als een zeer voor de hand liggende proces, maar dit proces van voortdurend itereren op de top van wat je hebt al gebouwd is een proces dat u helpt niet alleen verfijn uw eigen ontwerp vaardigheden, maar ook helpt u verfijnen van het ontwerp zodat mensen daadwerkelijk waarderen uw product nog meer dan voorheen. 

Ik ga over meer concrete voorbeelden van wat je eigenlijk zou kunnen doen. Als een soort van laatste voorbeeld van een product, laten we eens kijken naar KAYAK. KAYAK toen het uitkwam was zeer, zeer populair. Kan iemand raden waarom? Wat zijn de soorten van dingen die je graag over deze instelling als u het gebruikt of wat zijn de soorten van dingen die je niet bevalt? Ja. >> [Onverstaanbaar student reactie] >> Oke. Dat is een deel van het is laat de gebruiker een query die is meer expansieve dan een zeer restrictief als: "Je moet je startdatum halen "En je moet je einddatum te kiezen." In feite, het laat je flexibel over en het geeft je alle vluchten in dat bereik. Iets anders? [Student] Ze omvatten de kosten in de prijs. Ze doen onder meer de kosten in de prijs. De belastingen en dingen die er eigenlijk rechtdoor gaan in die prijs in de linkerbovenhoek zodat je niet misleid in het denken dat je eigenlijk betalen voor een 240 dollar vlucht als het echt $ 330. Iets anders? Ja. [Onverstaanbaar student reactie] Ik weet niet zeker of ze daadwerkelijk laten doen. Ik kan het mis hebben. Dat zou een interessante zaak zijn als je wilt meer gewicht op bepaalde filters zodat deze resultaten met betrekking tot dat filter naar boven duwen. Maar kan iemand mij vertellen wat er zo speciaal aan deze links? Hoe ben je van oudsher het opzoeken van een vlucht op een internetservice voor dit drama? 

Ja. >> [Onverstaanbaar student reactie] >> Kun je zeggen dat - [Student] Elke luchtvaartmaatschappij. >> Ja. Elke luchtvaartmaatschappij heeft een eigen website. Dit consolideert dingen. En? [Student] U weet precies hoe laat je weggaat. Je weet precies hoe laat je weggaat, maar in verband met de filters in het bijzonder. Laat me omhoog te trekken KAYAK. Oh God, pop-ups. Slechte gebruikerservaring. Wat gebeurt er als ik verhuis deze schuifknop? [Student] Automatische updates. >> [Ong] Automatische updates. Dat is iets dat is heel belangrijk. Voordat dit, wanneer je wilde opzoeken van een vlucht, moest je in je locatie voor het invoeren, uw output locatie, drukt u op Zoeken, het zou verwerken dat en laat je de resultaten. Als je wilde om uw verzoek te veranderen, zou je twee keer op terug, te voeren in een nieuwe query vanuit het niets, en doe het dan over en weer. Het leuke aan zoiets als dit is dat het een zeer [onverstaanbaar] ding in het midden. Wanneer u iets als dit te doen, het schiet uit een verzoek en het geeft u alle resultaten onmiddellijk. Dit soort directe feedback is iets dat gemaakt KAYAK razend populair want het is echt makkelijk voor mij om gewoon te veranderen mijn vraag en om erachter te komen de dingen die rond een bepaald bereik zonder heen en weer te gaan, heen en weer, heen en weer. Dus dit zijn allerlei dingen die je wilt na te denken over wanneer u het ontwerpen van uw website. Hoe kan ik het zeer efficiënt voor mijn gebruikers om te gaan door wat ze mee bezig zijn en om naar hun uiteindelijke doel zo snel mogelijk? [Malan] En om punt Jozefs eerder over gebruikers niet per se te weten wat ze willen, op basis van wat jullie nu weten over HTML en je hebt selectievakjes, keuzerondjes, menu's selecteren, invoervelden en dergelijke, hoe zou u de uitvoering van het idee van het kiezen van een starttijd voor een vlucht? 

Welke van deze verschillende UI mechanismen zou u gebruiken? Als je gewoon weet dat de hoeveelheid van HTML die werd vóór onderwezen en je weet dat de ingangen zijn keuzerondjes, selectievakjes, drop-downs, en input box, wat zou je natuurlijke keuze zijn geweest voor het kiezen van de data? [Student] Input. >> Input. Of misschien zelfs een drop-down met alle data, toch? Dus met meer complexe UI mechanismen zoals deze aan de linkerkant die u kunt uitvoeren, kunt u dit proces veel intuïtiever te maken met een slider omdat de tijd is continu, en de mensen meestal niet denken in termen van aparte stukken. Oke. Laatste ding. Tien bruikbaarheid heuristiek. Al de dingen die we gesproken over waarschijnlijk onder een van deze categorieën. Als je naar deze link, die de sites online zal worden geplaatst, je daadwerkelijk in staat zijn om, zoals het ontwerpen van uw site, houd deze heuristiek in het achterhoofd en deze vuistregels. Voor uw projecten, wat ik stel voor dat je doen om het ontwerpen van uw app beter is op papier prototyping eerst doen. Als u denkt over uw aanvraag, heel snel schetsen wat je wilt om te kijken als en ervoor zorgen dat alle vakken zijn aangebracht op een manier die is zeer handig voor de gebruiker te gebruiken en zelfs tonen deze papieren prototypes aan uw vrienden en begin focusgroepen. Gewoon samen komen 2 of 3 personen en vraag hen om gewoon tik op deze papieren prototypes, en laat ze nieuwe schermen te zien of ze echt begrijpen wat er gaande is. 

Wat u wilt doen is hen een taak, die taak te motiveren, en geef ze de app en laat ze gebruiken. Geef ze niet de instructies verder dan dat. Je wilt eigenlijk laat ze met je app communiceren op een manier die laat zien hoe zij het zou gebruiken als je niet bij ze te staan. En dat is heel belangrijk. Dat geeft je veel inzichten met betrekking tot zijn mensen om rond bepaalde dingen op een manier die ik niet voornemens zijn? Gebruiken ze bepaalde UI-mechanismen op het scherm op een manier die is een soort van hacky? Ik was niet van plan voor hen om het te doen op die manier. En als je eenmaal klaar bent met dat, wat wil je doen? Uw ontwerp rotsen, toch? Wat u wilt doen is dat u wilt ontwikkelen en dat proces te doen opnieuw. Dus laten zien aan vrienden als je eenmaal hebt ontwikkeld, testen, ontwikkelen, testen, ontwikkelen, testen, itereren, verder en verder en verder. Design is een zeer iteratief proces in deze zin. Je eigenlijk iets op te bouwen en dan dingen over het te realiseren dat je wist niet dat vóór en terug te gaan en te verbeteren van dat. Nu, als voor de ontwikkeling deel, dat is wat Tommy gaat om te laten zien na de pauze en hoe je zou kunnen iets als autocomplete implementeren op een manier die is vrij eenvoudig. [Malan] Zoals Tommy zet hier een vraag dan. Een groot deel van de vroegste websites - en toen zei Jozef jaren 1990-stijl website, Het was implementaties waar als je wilde een starttijd te selecteren en een eindtijd, eerlijk gezegd, terug in de dag en zelfs op een aantal websites vandaag de dag, de manier waarop je dit doet is dat je een uur kiezen uit een drop-down, je pick minuten van een drop-down, misschien u ook kiest AM, PM, en dan doe je dat nog 3 keer. En dus met 6 klikken en misschien wat scrollen uw gebruiker kan ook daadwerkelijk een soort van datum en / of tijd aanbod in deze zin. 

Dus zeker niet optimaal en toch tot nu toe hebben we gezien geen expressieve mogelijkheden in een van de talen die we hebben gekeken naar iets sexier te doen als deze slider van start-en eindtijd. Maar als je terugdenkt aan week 0 toen we spraken over Scratch, ook daar waren er niet widgets die net deed bepaalde dingen. Je moet echt net deze grondbeginselen, zoals lussen en voorwaarden en dergelijke. Dus soort van net te denken zeer abstract nu, onafhankelijk van de gegevens van HTML, wat er werkelijk aan de hand is met zoiets als dit begin-en eindtijd slider? Toen ik mijn muis en ik op dat kleine wortel symbool op de linker en begin te slepen, programmatisch, wat wil je in staat zijn om te implementeren om dat te realiseren? Welke vragen, wat Booleaanse uitdrukkingen u wilt in staat zijn om te vragen? Wat is er werkelijk aan de hand? Sammy? [Student] Waar is de positie van de cursor? >> Goed. Waar is de positie van de cursor? Dit was iets wat we nodig hadden om terug te drukken in Scratch, of het nu is op basis van locatie of zelfs kleur of iets dergelijks. Je zou kunnen herinneren ooit zo kort op maandag waren er al deze dingen genoemd gebeurtenissen in de wereld van het web, en dus is er dingen zoals onclick en onkeypress en onkeyup en onmouseover en onmouseout. Dus beseffen dat zelfs deze dingen hebben we zo vanzelfsprekend op het web met sites als Facebook en Gmail, zelfs als je geen idee hebt hoe zou je misschien te implementeren dat, want er is niets, zelfs als het in college of Probleem Set 7, beseffen dat met deze exact dezelfde fundamenten, met HTTP en parameters en en POST GET, met de eenvoudige HTML-ingangen die we hebben gekeken naar tot nu toe en in een moment met de programmatische mechanismen die Tommy's over de invoering van kun je beginnen om jezelf te uiten, net als je deed in week 0 door een zeer intuïtief te slepen en neer te zetten. 

Dus met dat gezegd, Tommy MacWilliam en een aantal nieuwe puzzelstukken voor ons voor Web. Oke. Mijn naam is Tommy en ik ga om te praten over JavaScript. Gewoon een disclaimer: Ik ben van mening dat JavaScript is de beste programmeertaal in de hele wereld. Er zijn veel mensen die het niet met mij, maar het is gewoon geweldig. Zodra je terug gaat naar C, als je naar C schrijven voor een andere klasse of een andere taal, het is gewoon heel frustrerend in alle low-level gegevens die u moet verzanden in Dus als je ooit verdrietig over hoe vervelend C is om te schrijven, gewoon terug te gaan, schrijf wat JavaScript. Het is nirvana. Je zult veel beter voelen over je slechte dag. Een groot deel van de magie van JavaScript is afkomstig van haar vermogen om dingen te manipuleren die al op de pagina. Wanneer we onze PHP scripts schreef, werden ze uitgevoerd op de server, en uiteindelijk dat PHP-script waarschijnlijk uitvoeren wat HTML. Dat HTML is verzonden naar de klant, en dat was het. Als PHP wilde een knop toe te voegen aan een pagina, bijvoorbeeld, kan het niet echt doen. Het zou een hele nieuwe HTML-bestand maken en die naar de browser. Met JavaScript we weten dat we dingen kunnen updaten, terwijl ze al op de pagina, en daardoor kunnen we veel meer directe feedback, die echt zal verbeteren de gebruikerservaring op onze website. Gewoon een korte samenvatting van JavaScript selectors. Wij weten dat wanneer we downloaden en een HTML-pagina, dat gaat te laten vertegenwoordigen in de DOM. 

De DOM is vergeet niet alleen deze grote boom waar de elementen zijn gerelateerd in deze grote hiërarchie. Toen werkten we met databases in PSET 7, een van de eerste dingen die we nodig hadden om te weten hoe dat te doen was query op de database. We hebben deze grote gebruikers tafel, en soms willen we gewoon zeggen, "Ik wil alleen een aantal van deze gebruikers die een bepaalde voorwaarde voldoen." Ook wanneer we de DOM hebben we een manier nodig van bevragen is. We hebben een aantal manier om te zeggen: "Ik wil alle knoppen die er zo uitzien "Of alle afbeeldingen op de pagina." En deze selectors kunnen we dat te doen. Dus gewoon een korte samenvatting. Deze eerste hier, dit # in te dienen, wat gaat dat selecteren? Heeft iemand weet je nog? [Onverstaanbaar student reactie] >> Ja, precies. Dit gaat een element te selecteren op de pagina die een ID van in te dienen heeft. En zodat hash tag zegt dat dit selector gaat werken met ID's. Hoe zit het met de tweede, dit. Gecentreerde, dat zal wat te kiezen? Ja. >> [Student] Klasse. >> Precies. Dit gaat nu selecteren klasse. Het verschil tussen ID en class hier is over het algemeen de ID moet uniek zijn binnen de ruimte waar u op zoek bent over. Dus als je op zoek waren over een gehele webpagina, je moet echt een element alleen met dat bepaalde id, dus in dit geval van in te dienen. Met klassen, anderzijds, kunnen we meer dan 1 element hebben op dezelfde pagina met dezelfde klasse. Dit kan nuttig zijn om te zeggen Ik wil alles wat er op de pagina gecentreerd te selecteren in plaats van alleen 1 ding. 

En tenslotte, deze laatste is hier een beetje ingewikkelder, maar wat gaat dit om te kiezen uit de DOM? [Onverstaanbaar student reactie] >> Wat is dat? [Student] Alles wat is een tag. >> Wij hebben hier 2 delen. Het tweede deel gaat zeggen ik wil deze tags selecteren met een tag van input, zodat elk element dat is een input-tag. Maar ik wil niet alleen selecteren van de ingangen omdat zoiets als een submit knop kan een ingang zijn en iets als een tekstvak kan een ingang zijn. Dus met deze tussen vierkante haken Ik zeg dat ik wil alleen die elementen te selecteren die zijn van het type tekst. Ergens in mijn HTML-tag heb ik een attribuut genaamd type, en de waarde van deze eigenschap moet tekst. Dus wat dacht je van dit eerste deel hier? Het eerste woord van deze keuzeschakelaar vorm dan heb ik een spatie en dan deze ingang deel te hebben. Wat doet dat te doen, waardoor de vorm in de voorkant van het? Dit gaat in principe beperken onze query. Zo kan het gebeuren dat we een aantal ingangen op de pagina hebben worden die niet zijn afstammelingen van een formulier. Wat dit zal doen is dit te zeggen zal ik wil alleen de input-tags die ergens boven hen enkele bovenliggende element van een formulier. En dus op deze manier kunnen we deze meer hiërarchische query's dus we hebben niet alleen alles overeenkomen met een gegeven selector te selecteren. We kunnen soort van limiet het toepassingsgebied van die query naar iets anders. Dus nu dat we weten hoe we elementen op de pagina wilt selecteren, Laten we een beetje praten over AJAX. AJAX is een nog steeds erg trendy acroniem dat staat voor Asynchronous JavaScript and XML. Het is gewoon zo gebeurt het dat XML is gewoon een manier om gegevens weer te geven. 

Dat soort van verloren populariteit onlangs, zodat de X in AJAX wordt niet gebruikt de hele tijd. In principe is wat AJAX stelt ons in staat te doen om ervoor te zorgen HTTP-verzoeken uit de context van JavaScript. Als we in onze web-browser en we navigeren rond de pagina's en we op een link klikt, wat onze browser gaat doen is het maken van een HTTP-verzoek naar wat koppeling klikken we. Maar dat is niet altijd ideaal, want als dat het geval is, dan als David zei, we hebben altijd te maken gebruikers op een knop Verzenden of klik op een link om iets te laten gebeuren dat gaat een HTTP-verzoek te betrekken. Dus met AJAX kunnen we deze aanvragen ten behoeve van JavaScript. Dat betekent dat wanneer de gebruiker met de pagina of er iets gebeurt, kunnen we een programmatische verzoek daadwerkelijk naar een andere PHP-bestand op onze website of iets anders en ophalen van de gegevens die dat bestand spuugt. Laten we eens een kijkje nemen op een voorbeeld van AJAX. Dit is onze CS50 Financiën pagina waarmee hopelijk een aantal van ons zijn bekend. Als we kijken naar de HTML van de pagina, zien we hier dat ik een paar dingen toegevoegd, een van die ik heb gegeven dit formulier een ID. Ik heb gezegd id = "form-quote". Ik heb dit gedaan omdat het gaat om dit een beetje makkelijker om te kiezen uit de DOM want ik kan gewoon een heel eenvoudige query. Wat ik hier wil doen is wil ik enkele probleem op te lossen met CS50 Finance. Dus als we naar finance.cs50.net, elke keer als ik wil een offerte te krijgen, moet ik deze offerte knop klikt, en dat Vraag offerte knop vervolgens me naar nog een hele pagina. En als ik wil een ander citaat, moet ik op de knop Vorige hit en dan heb ik het in te typen, Ik krijg een citaat, en ik raakte de knop Terug. Dit is echt niet de beste gebruikerservaring. Wie zou echt gebruik maken van de site als het is dat langzaam op de aandelenkoersen? Dus wat we willen doen met AJAX is het verwijderen van die stap van het gaan naar een aparte pagina om de resultaten te zien. 

Wat we eigenlijk alleen vragen is dat echt kleine prijs, en dat is gewoon een heel kleine hoeveelheid gegevens. Dus er is geen noodzaak voor mij om nog een hele HTML-pagina te gaan, downloaden van een hele nieuwe batch van HTML, misschien downloaden en wat meer foto's, een andere CSS-bestanden alleen voor mij om dat zeer eenvoudige vraag te beantwoorden van hoeveel kost dit bestand kosten. Met AJAX kunnen we dit een stuk eenvoudiger. We zien hier beneden dat ik het koppelen in een JavaScript-bestand met de naam quote.js. Laten we eigenlijk open dat bestand. Niet daar. Al mijn JavaScript-bestanden zullen worden gevestigd in HTML zodat de webbrowser toegang kan krijgen. Dan hebben we een aparte directory hier voor JavaScript, en nu hier is quote.js. Op de top van dit bestand dat zegt hier dat ik wil wachten tot de hele pagina te laden voordat ik iets doe. Waarom is dat nodig? Het blijkt dat het volgende wat ik ga doen hier is beginnen met het zoeken naar een element die overeenkomt met een aantal selector. Als dit JavaScript is ooit uitgevoerd voor dit element wordt geladen op de pagina, dan alles wat ik probeer te doen is niet van plan om te werken want ik ga proberen om iets dat er niet is nog te selecteren. Dus deze line-up boven zegt dat ik wil dat je wachten tot alles geladen is dus we gegarandeerd dat alle elementen Ik zoek eigenlijk op de pagina. Dit dollarteken betekent hier dat ik de bibliotheek genaamd jQuery gebruikt. Dit jQuery bibliotheek stelt ons in staat om gebruik maken van deze selectors die we net bekeken. Door te zeggen $ dan passeren in als argument dit # form-citaat, Ik ben nu het selecteren van die vorm dat we gewoon een kijkje op nam. Nu heb ik een voorstelling van die vorm in het geheugen of andere manier. 

Op dit object nu, deze voorstelling van de vorm, Ik ben nu met behulp van een functie genaamd op. Wat deze functie doet is dat het gaat om een ​​event handler aan te sluiten. De gebeurtenis die we gaan om te luisteren naar de submit evenement. Dus wanneer de gebruiker klikt op die knop of drukt Indienen Enter, dit evenement gaat ontslaan. Door het inhaken in deze, kan ik nu voorrang op de standaard gedrag van het formulier. Zonder deze JavaScript, zou het formulier naar wat PHP-bestand we in die actie attribuut. Maar in plaats daarvan ben ik nu zeg, wacht, wacht, wacht, ik wil niet dat je ook daadwerkelijk doen. Ik wil dat dit gebeurt voordat je gaat en probeert zich te onderwerpen aan een aantal PHP-bestand. Nu, wat wil ik doen? Op dit punt wil ik een of andere manier gebruiken AJAX te laden in wat de koers van het aandeel is. Het eerste wat ik moet weten is wat de voorraad van de gebruiker te kijken. Om dat te doen ga ik naar een andere selector te gebruiken. Dit is de derde selector hebben we gekeken naar eerder. Deze zegt dat ik wil om te beginnen uit dit formulier element met een ID van vorm-offerte. Dan ergens in van die vorm moet er een input element dat een naam symbool. Als we terugkijken naar onze HTML, zagen we dat we een ingang hadden [name = symbol]. Dat betekent dat dit gaat om dat tekstvak te selecteren die de gebruiker aan het typen in. Dat is leuk. We hebben het tekstvak. Nu hoeven we alleen maar te weten wat er in het. Om dat te doen kunnen we deze methode hier noemen, dit. Val, en dit zegt dat ik weet wat tekstvak dat u hebt. Ik wil dat je me vertellen wat het is de gebruiker heeft ingevoerd in die tekstvak. Nu hebben we een string genaamd symbool dat gelijk is aan wat de gebruiker intikt: Dat is leuk. We kunnen gebruik maken die string nu op ons verzoek te maken. Dit is een nieuwe functie hier Deze $, behalve dat we niet meer zullen worden selecteren van elementen, we gaan te bellen naar een andere functie die is aan ons geleverd door jQuery. Dit AJAX functie is wat er eigenlijk aan de hand van deze HTTP-verzoek te doen. Dus moeten we vertellen dat een paar dingen. Het eerste wat we moeten deze functie vertellen is waar ik wil het verzoek om te gaan. Ergens in mijn project heb ik dit bestand binnenkant van de HTML-directory genaamd quote.php. Ik kan dit bestand openen, zagen we, net als dit, als ik naar localhost / quote.php. 

Ik wil dat mijn JavaScript om een ​​verzoek naar die pagina te maken. Welk type verzoek nu? We zagen hierboven dat de vorm heeft die method = "post" attribuut, en dat betekent dat het gaat om een ​​POST-aanvraag te maken, dus het is niet van plan om iets neer te zetten in de URL, in plaats van een GET-aanvraag, die net zou worden ontslagen als we gewoon geopend de pagina met de web browser, bijvoorbeeld. Nu hebben we gezegd wil ik een HTTP POST-verzoek te doen een pagina op quote.php. Wanneer we het formulier, vergeet niet dat we konden de input elementen binnen van dat formulier te openen met die $ _POST variabele. Tot nu toe in het verhaal dat we hebben niet echt meegestuurd alle gegevens nog niet. We hebben net gezegd dat we een AJAX verzoek maken en hier is het soort verzoek maken we. Nu moeten we eigenlijk een aantal gegevens naar de pagina. Om dat te doen kunnen we deze eigenschap met de naam gegevens te gebruiken. De waarde van deze eigenschap is in feite een associatieve array. De reden hiervoor is het kunnen we verstuurt meer dan een stuk data. Daarom hebben we deze accolades hier genest binnen van deze andere accolades. De toetsen in deze associatieve arrays gaan hetzelfde zijn als die naam schrijft in ons formulier elementen. Dat betekent dat als ik stuur langs een sleutel van het symbool, dat betekent dat mijn PHP pagina kan toegang krijgen tot deze gegevens met $ _POST [symbool] net zoals wij deden toen we waren het indienen van een formulier. En nu de actuele gegevens die we willen sturen zal de waarde in van de associatieve array. 

We opgeslagen deze tekst in een variabele genaamd symbool, en dus sturen we langs nu een sleutel van het symbool en een waarde van wat de gebruiker intikt: Nu hebben we deze HTTP-verzoek, onze PHP-bestand is uitgevoerd, en het gaat om terug te sturen enkele gegevens nu aan de klant dat maakte dit verzoek. Nu moeten we reageren op wat de server zei tegen ons. Om dat te doen hebben we deze laatste eigenschap hier genoemd succes te hebben. De waarde van deze successleutel daadwerkelijk zal een functie zijn, en dit is een van de echt leuke dingen die je kunt doen met JavaScript. Niet alleen kunt u ints of arrays als een waarde binnen van een associatieve array, we ook een functie. Dus door te zeggen succes, dit is mijn sleutel. Een dubbele punt zegt hier komt de waarde, en nu de waarde van dit is eigenlijk een functie. We hoeven dus niet nodig om deze functie een naam te geven per se. We kunnen alleen maar zeggen dat dit gaat om een ​​aantal functie. Het gaat om een ​​argument te nemen. Het argument voor deze functie zal zijn ongeacht de server stuurde ons terug van het verzoek. Net als bij onze browser een verzoek, stuurt de server iets terug en de browser geeft dit weer, in het kader van AJAX we net een verzoek, de server verzonden iets terug, en nu hebben we dat weergegeven als een string. Met die string ik wil alleen maar dat weer te geven op de pagina. Om dat te doen ga ik nog een laatste selector hebben. Ik wil het element met de ID prijs te selecteren. Dit is slechts een lege div die ik heb gemaakt op de pagina, en ik wil de inhoud van die div te zijn, ongeacht de server ons teruggestuurd te stellen. Ik heb eigenlijk gewijzigd quote.php een beetje. 

In plaats van te bellen render en rendering sommige pagina, quote.php is nu gewoon het ter perse gaan van de waarde van de voorraad als een string. Dus als je daadwerkelijk een bezoek aan de pagina, zou je gewoon zien dat kleine snaar van welke de beurskoers is. Een laatste ding moeten we hier doen is gewoon zorgen dat deze functie valse terugkeert. Wat dit zegt is dat als ik de binnenkant van een event handler en dat event handler false retourneert in plaats van terug te keren waar, dat betekent dat ik niet wil dat de oorspronkelijke gebeurtenis om te vuren. In dit geval, als we hadden geen JavaScript en dienden we een formulier, onze web browser zal zeggen: "Ik ga mee te sturen die gegevens," en ze gaan je naar een andere pagina. Omdat we met behulp van AJAX nu, is er geen noodzaak om de gebruiker naar een andere pagina. We gaan gewoon naar dynamisch weer te geven van de resultaten op dezelfde pagina. We hebben echt willen niet dat ze ergens heen te gaan, en Ik blijf op dezelfde pagina. Dus door terug te keren vals, zorgen we ervoor dat het formulier niet betekent dat voor ons doen. Laten we eens een kijkje nemen op wat deze daadwerkelijk uitziet. Onze offerte pagina ziet er hetzelfde uit. Laat me omhoog trekken van de inspecteur hier beneden zodat we kunnen zien wat er gaande is. Maak er een beetje minder groot. Vergeet niet, als we open het tabblad Netwerk, dit is waar we kunnen zien alle HTTP-verzoeken die gebeuren op de pagina. 

Voor een symbool laat me typen in AAPL en klik op Bekijken. Nu zagen we dat een deel van Apple een aantal aantal dollars kost net is verschenen op de pagina, maar de URL niet veranderd helemaal. In feite is hier de HTTP-aanvraag die net die we maakten. We maakten een POST-aanvraag naar quote.php. Dat klinkt logisch. Dit is wat de server ons teruggestuurd. Het is niet langer deze gigantische HTML-document met beelden en dat soort dingen, het is gewoon een regel tekst, en dan gaan we gewoon de weergegeven regel tekst. Als we terug gaan naar de headers en te zien wat we in feite gestuurd binnenkant van deze HTTP-verzoek, kunnen we hier zien neer dat we gestuurd langs een sleutel van het symbool en een waarde van AAPL, dat is wat de gebruiker intikt: Dit is leuk, maar het is nog steeds een beetje vervelend. Ik moet nog op deze knop klikken om de beurskoers te krijgen. We zijn druk bezig mensen en we hebben geen tijd om de knoppen te klikken. Google besefte dat dit een tijdje geleden toen ze geïmplementeerd Google Instant. Wat Google Instant doet is als je aan het typen bent het begint gewoon het weergeven van resultaten voor u zodat u zich geen zorgen te maken over, zelfs op Zoeken te klikken. Eigenlijk, een leuk verhaal met betrekking tot dat. Zodra Google Instant uitkwam waren de mensen als: "Whoa, dit is super geweldig." "Dit is zo cool." En een student neer op Stanford, die was 19 op dat moment maakte deze site genaamd YouTube Instant. Alle YouTube Instant heeft effectief wordt direct zoeken YouTube. Dus in plaats van te gaan naar YouTube.com en druk op Zoeken, als ik begin te typen in YouTube Instant iets als CS50, konden we hier zien dat het een poging om op een trage internetverbinding bevolken deze resultaten te leven. Om dat te doen dat we eigenlijk een zeer eenvoudige wijziging van onze quote.js bestand te maken. Op dit moment zijn we het bevestigen van deze gebeurtenis wanneer het formulier wordt ingediend. We willen niet echt om de gebruiker meer in te dienen die vorm, dus laten we in plaats daarvan schieten deze gebeurtenis iedere keer dat de gebruiker op een toets drukt. Om dat te doen laten we eerst het geval veranderen van aan keyUp. Dat betekent dat in plaats van te wachten op het formulier in te dienen, Elke keer dat de toets wordt ingedrukt, wordt er iets gaat gebeuren. Het is niet langer zinvol om deze keyup evenement hechten aan de hele vorm. We hebben echt alleen de zorg over die zoekvak. 

Om te selecteren dat nu, kunnen we dit veranderen om te zijn, in plaats van de vorm-quote, vorm-offerte en wij zullen een ingang hebben (type = tekst) of we kunnen zeggen (noem = symbool) - wat we willen. Nu is er nog een laatste ding dat we moeten doen. Hier Vergeet niet naar beneden toen we zeiden return false we zeiden dat we niet willen dat geval van wanbetaling te vuren. Maar het is gewoon zo gebeurt het dat als we uit te schakelen dat nu, wat we typen is niet van plan te zien zijn in de browser niet meer want dat zou het standaardgedrag van het typen in een tekstvak te zijn. We willen niet langer negeren dat, dus laten we vernietigen return false. Als we behalve dat en de pagina geladen is, als ik nu begint te typen AAPL je zult zien dat de koers van het aandeel op de bodem hier automatisch voltooien. Dus hier is CS50 Finance Instant. Eigenlijk een leuk verhaal over de YouTube Instant is dat de student gewoon een soort van schreef het als een 1-nacht-project, en de volgende dag was hij een baan aangeboden door de YouTube-CEO. Dus zo simpel als dat, je CS50 studenten, kan je laatste projecten krijg je een baan bij YouTube. Zoiets is echt een cool idee voor een afstudeerproject, toch? We hadden een aantal bestaande functionaliteit die we wilden om te integreren met. Wij verbeteren de gebruikerservaring een beetje, en plotseling zoeken iets op YouTube Instant misschien een stuk makkelijker dan het zoeken naar het op regelmatige YouTube. Dus dat is AJAX in een notendop. 

In de voorbeelden die Jozef liet zien, we zagen heel veel van autocompletes, en die autocompletes zijn echt, echt handig omdat we niet hoeven te herinneren - Bijvoorbeeld, als je niet meer weet de koers voor Apple en we weten dat het aa iets, in plaats van alleen tegen me zei: "Een deel van dit ding kost dit veel geld," Ik zou soort van willen weten wat de voorraden beginnen met aa. We kunnen dat doen echt mooi met de Bootstrap bibliotheek die reeds is inbegrepen binnenkant van CS50 Financiën. Als je komt hier om de JavaScript-tag en neer naar Typeahead scrollen, dit is gewoon een aardige plugin dat iemand al schreef voor ons, en we kunnen makkelijk de functionaliteit als deze. Ik typte in een A en hier is een lijst van enkele staten die beginnen met A. Laten we zeggen dat ik denk dat dit is echt cool en het is tijd voor mij om dit te nemen op mijn pagina. Het blijkt dat dit is echt, echt eenvoudig. Laten we hier springen om quote3.js. Mijn bestand ziet er een beetje anders. Hier beneden al mijn AJAX spul is hetzelfde. Ik wil naar de beurs data te laden zonder dat u naar een andere pagina. Maar nu wil ik deze plugin te gebruiken. De Bootstrap documentatie heeft grote voorbeelden van hoe ik precies kan doen. Ik wil zeggen: "Hier is de ingang die ik met autocomplete wil op," en ik ga om deze functie genaamd typeahead noemen, en dat komt allemaal van de Typeahead spullen voor ons te verwerken. Het zal de lijst initialiseren, zal het doen al onze filtering. Het enige wat het nodig heeft om te weten is welke gegevens we autocompleting op. Dus kwam ik erachter deze sleutel alleen door het lezen van de documentatie en kijken naar de voorbeelden. Als ik het een belangrijke bron van de waarde van deze sleutel is slechts enkele reeks van dingen die ik te autocomplete wil op. Deze variabele kwam uit deze andere bestand. Ik open symbols.js. 

Dit symbols.js is juist dit echt, echt grote array met strings van al deze voorraad symbolen uit de NASDAQ. Als ik wil om terug te gaan naar de HTML, dus jharvard, vhosts, Globalhost, html, sjablonen, quote_form. Sinds die heet nu quote3.js, laat mij u de JavaScript-bestand dat ik hier ook. Nu heb ik quote3.js, dus ik ga om te laden in die afzonderlijke JavaScript-bestand, degene die dat Bootstrap autocomplete heeft. Nu als ik spring terug naar de browser, de pagina geladen is, en ik begin te typen aa, daar is mijn autocomplete. En het was echt zo simpel als dat. Ik had 1 regel code die zei gewoon: "Hier zijn de dingen die ik te autocomplete wil op," en opeens heb ik dit echt, echt leuk functionaliteit met niet heel veel moeite op alle. Terwijl je het ontwikkelen van websites en met name de front-end kant van de dingen, je gaat vinden dit het geval is veel. Er zijn veel, veel, veel echt coole gratis bibliotheken die er zijn dat maakt het super gemakkelijk om dingen te doen als dit. Kan iemand denken aan een nadelen van gewoon autocompleting op deze grote lijst met symbolen? Wat kan iets dat niet is het beste met deze aanpak zijn? Ja. >> [Student] Tijd, als je veel van [onverstaanbaar] Ja. Op dit moment zijn we het downloaden van deze enorme JavaScript-bestand en er is een heleboel symbolen. En dus als we een heleboel dingen, kan dit soort verhoging van de latentie van niet alleen op zoek maar ook het downloaden van het eigenlijke bestand. Geweldig. Iets anders? Op dit moment is er geen echt gevoel van relevantie. Als ik typ in een A, de bedrijven die hier zichtbaar te maken is misschien niet de meest populaire bedrijven die beginnen met A. 

Voordat ik begin met Apple, kan het even duren meer tekens om te vinden wat ik zoek. Dit autocomplete niet over dit gevoel van relevantie. Het zal alleen maar te zeggen: "Alles wat overeenkomt met ik ga om te laten zien." In plaats van dat, zou ik graag wat de relevantie of andere manier te integreren in mijn zoekopdrachten. Als ik ga hier naar Yahoo! Finance, finance.yahoo.com, Als ik probeer om een ​​symbool op pagina Yahoo! Finance in te voeren en ik begin te typen goog, ik heb deze mooie lijst van dingen. Het is duidelijk, het lijkt erop dat Yahoo! Finance doet iets slimmer hier. Ze hebben een aantal relevantie en ze hebben ook extra informatie zoals de naam van de voorraad. Dat is iets dat ik niet echt kan krijgen met alleen mijn voorraad lijst met symbolen. Ik wil dit en dus ik ga om het te nemen. Om dat te doen laten we een paar dingen te doen. Laten we eerst het openstellen van de inspecteur op deze pagina omdat we zagen dat deze pagina niet wordt herladen helemaal niet, dus het is waarschijnlijk met behulp van AJAX een of andere manier te laden zijn gegevens. We kunnen ontdekken welke gegevens het is geladen. Als ik klik op deze tabblad Netwerk, worden deze gaan worden alle verzoeken die beginnen te worden ontslagen. Nu, als ik typ in goo, kunnen we zien dat ik net een nieuwe HTTP request gekregen. Dit is waarschijnlijk waar die gegevens vandaan komt. En ja hoor, als ik kijk naar deze URL, dat is een beetje vreemd met de naam, kunnen we zien dat dit precies is waar Yahoo stuurt uit zijn gegevens uit. 

Ik heb een apart bestand met de naam suggest.php dat is zeer vergelijkbaar in de geest van de lookup functie. Het is eigenlijk gaat om een ​​query naar de URL van Yahoo's te maken, terug te krijgen sommige gegevens, en stuur het terug naar mij. Nu, in plaats van het gebruik van deze grote, enorme lijst van symbolen, Ik kan gebruik maken van leuke relevantie van Yahoo dingen, en ik heb niet om die enorme JavaScript-bestand te downloaden. Ik ga het maar pull-down de werkelijk relevante stock symbolen. Laten we springen in dat. Dus html, js. We zitten nu in quote4. Nu zijn we niet langer met behulp van dat grote lijst van JavaScript-bestanden. Maar er is een kleine soort ontwerp probleem. We hebben gezegd dat de A in AJAX asynchrone is. Wat dat betekent is dat wanneer ik een AJAX verzoek in te dienen, dus hier op lijn 8, dit is waar mijn AJAX verzoek is eigenlijk ontslagen. Laten we zeggen dat ik nu een stukje code heb hier beneden dat gaat een aantal dingen te doen graag de aandacht van de gebruiker of iets veranderen op de pagina. Wat is er niet gaat gebeuren is de browser is niet van plan om te wachten voor dit verzoek te blijven voordat ze naar beneden en raken deze lijn. Dat is het asynchrone deel. Het gaat om dit verzoek te maken en te zeggen: "Wanneer u klaar bent, "Terug te komen en noemen die functie dat ik je vertelde te bellen binnenkant van succes." Dat betekent dat we niet alleen alle voorraden op voorhand te downloaden. We moeten het verzoek te maken en om iets terug te komen wachten. Dat betekent dat vóór, konden we gewoon vertellen Bootstrap, "Hier is de lijst met dingen die ik je wilt autocomplete op." We kunnen niet langer meer doen dat omdat we niet weten wat we willen eigenlijk autocomplete op. Gelukkig, Bootstrap aan gedacht want dat zijn slimme jongens daar, en ze eigenlijk gaf ons een andere manier om dit te Typeahead plugin te laden. Voor, de waarde van deze eigenschap source was net zo groot scala aan dingen te autocomplete op. 

Nu de eigenschap source is eigenlijk een functie, en het doel van deze functie is om erachter te komen wat de dingen te autocomplete op zijn. De manier waarop het gaat om daar achter te komen is dat het gaat om Yahoo! Financiën te vragen wat de beste dingen om te autocomplete zijn. Om dat te doen ga ik een zeer vergelijkbare AJAX verzoek te doen. Ik ga deze pagina aanvragen bij suggest.php. Ik wil nog steeds mee te sturen van de symbolen. En nu mijn succes, de Bootstrap documentatie vertelde me dat om die lijst van dingen vullen, alles wat ik moet doen is nu pas in deze array om de callback functie. Maar wacht eens even. Als dit wordt verondersteld om een ​​array te zijn en AJAX stuurt me terug tekst, hoe is dat mogelijk? Dit introduceert een nieuwe manier van het uitwisselen van gegevens genoemd JSON. In dit geval hebben we het niet alleen het terugsturen van een eenvoudige tekenreeks. Nu we te maken hebben met deze complexere lijst van stock symbolen. Deze stock symbolen kunnen ook zaken als naam van het bedrijf of de huidige prijzen. Alleen met behulp van een grote lange string die niet is opgemaakt in een voorspelbare manier is niet van plan om de beste manier om deze gegevens te krijgen van de server van Yahoo om mij te zijn op een manier die ik gemakkelijk kan begrijpen. JSON is een technologie die gebruik maakt van de manier waarop we creëren associatieve arrays in JavaScript. Dit lijkt veel op een JavaScript-associatieve array, en in feite, is het omdat het is. JSON staat voor JavaScript Object Notation. Dit is eigenlijk een afgesproken formaat voor de overdracht van gegevens heen en weer. Hier deze JSON object of dit JSON associatieve array stuurt mij een aantal gegevens over een cursus. 

De sleutels van deze array zijn dingen als natuurlijk dat een waarde van CS50 heeft, en hier beneden zien we dat ik een waarde die een array hebben. Ik heb geen dingen zoals parse doen uit strijkers en zoek naar komma's en doen gekke dingen als dat. Omdat dit wordt verklaard in deze JSON-formaat, JavaScript en jQuery al functies om een ​​string om te zetten dat ziet er zo uit JSON in een daadwerkelijke JavaScript associatieve array dat we kunnen werken. Dat te doen is zo simpel als te zeggen dat niet meer is dit bestand, suggest.php, sturen me terug gewoon een stukje tekst, maar ik weet dat het gaat om het verzenden van me terug JSON. Dat betekent dat JSON kan worden omgezet in een JavaScript associatieve array. En dus jQuery, zou ik graag willen dat u dat voor mij doen. Dat betekent dat deze reactie parameter hier Dit is niet langer alleen een string. Omdat we verteld jQuery die komt hier enkele JSON, jQuery zal worden slim genoeg om te zeggen: "Je wilde JSON?" "Ik ga die om te zetten in een associatieve array voor u." Laten we eigenlijk een kijkje op het tabblad Netwerk te nemen zodra we hebben quote4.js. We zullen dit veranderen en de pagina geladen is. Nu ga ik weer typen a-a. Ik heb een paar verzoeken om suggest.php, maar nu deze reactie, in plaats van alleen de string, het is JSON. Dus ik heb een open accolade te zeggen: "Hier komt een associatieve array." 

De eerste en enige sleutel van deze associatieve array wordt genoemd symbolen, en hier is een array van alle relevante symbolen komt nu van Yahoo! Finance, niet van die gigantische lijst. Dat is hoe ik kan gewoon bevolken deze autocomplete plugin met een aantal gegevens die niet komt van een lokaal bestand dat al vooraf bepaalde maar van iets anders. Het blijkt dat we eigenlijk kunnen profiteren van een technologie genaamd JSONP, of JSON met padding, zal dat te elimineren dit suggest.php tussenpersoon. Maar in plaats van dat te doen, laten we in plaats daarvan een blik op hoe kan ik het verbeteren van deze nog meer te nemen. Ik hou echt van Bootstrap's Typeahead. Het is echt mooi. Maar we zijn er echt goed in JavaScript en we willen soort van doen dit zelf, misschien een kijkje nemen op wat deze plugin zou kunnen doen. Laten we niet langer dat Typeahead ding te gebruiken, en laten we proberen deze lijst van voorgestelde voorraden onszelf te maken. Hier in quote6.php we gaan beginnen op dezelfde manier. Elke keer als iemand iets typen, willen we een AJAX verzoek te doen. Dit is vergelijkbaar met onze originele CS50 Finance Instant. In plaats van een verzoek quote.php, we nu het maken van een verzoek in die hetzelfde bestand als voorheen, dit suggest.php, dat is gewoon om gegevens te trekken van Yahoo! Finance. 

Nogmaals, we zijn nog steeds verwacht JSON, maar nu omdat de Typeahead doet dit niet voor ons, moeten we ook mee te sturen op de waarde die binnen is van de huidige tekstvak. Nu weten we wat aan Yahoo! Finance vragen, en dus nu hier is de functie die we willen uitvoeren wanneer het verzoek is voltooid. We hebben niet de plugin om de lijst te maken voor ons, dus hier is waar we daadwerkelijk gaat om een ​​lijst met suggesties op te bouwen. Om dat te doen, net als in PHP we aaneengeschakelde deze grote strijkers van HTML dan kunnen we laten drukken, kunnen we precies hetzelfde doen in JavaScript. Eerst gaan we om te beginnen uit deze string genaamd suggesties, en deze string is gewoon wat HTML bevatten. We willen dat het een lijst van dingen te zijn, dus we gaan om te beginnen met deze lijst tag, en nu gaan we itereren over alle symbolen die werden terug naar ons teruggezonden. Vergeet niet, want we hebben gezegd dataType: 'json', dit is niet een string. Dit is al een array voor ons. Dat is echt cool. We kunnen alleen maar zeggen: "Ik wil dat je een element in de lijst toe te voegen." We zetten deze in een a element in de zijkant van dat, we geven het een klasse van suggesties, zodat we weten wat het is, en nu hier is het symbool dat we terugkwamen van Yahoo! Finance. 

Zodra we hebben gemaakt een element voor elk van de symbolen die we terug hebben gekregen, we willen gewoon af te sluiten van de lijst. Dus nu suggesties geeft deze kleine HTML-fragment dat wanneer op een pagina gaat naar de lijst van dingen die we zoeken zijn. Laten we nu eigenlijk dat op de pagina. Om dat te doen heb ik eigenlijk nog een lege div gemaakt en ik heb er een ID van suggesties. Net als we de inhoud van de div dat de prijs van de voorraad gegevens zou geven, we nu willen gewoon de inhoud van deze div ingesteld op wat deze string is die bevat deze symbolen. Door het gebruik van deze HTML methode, deze suggesties variabele, deze string, is een string van HTML. Ik wil dat je die HTML te nemen en zet het binnenste van de div genaamd suggesties. We hebben net toegevoegd iets aan de DOM nu. We hebben een aantal nieuwe elementen toe aan de DOM dat we nu kunnen worden weergegeven op de pagina. Laten we eens kijken hoe dit eruit ziet. Als we laden in quote6 en nu we terug komen, nu als ik begin te typen AAPL, we niet langer hebben dat Bootstrap autocomplete, maar we hebben nu deze lijst die we zelf gemaakt. Dit is iets lelijker dan de Bootstrap Typeahead bijvoorbeeld maar het doet ons in staat stellen een ander ding te doen. Toen we naar die Bootstrap plugin, zagen we dat als we autocompleted, een van de autocomplete waarden was AAPL. Dat is misschien niet zo behulpzaam. Als gebruiker, dan zou ik niet meteen herkent alle van de voorraad symbolen. Wat ik ben waarschijnlijk meer kans om te herkennen zijn van het bedrijf werkelijke namen. Dus zou het niet echt nuttig zijn als in plaats van te zeggen AAPL Dit zei iets als Apple Inc Omdat we rolden dit zelf, kunnen we heel gemakkelijk doen. Laten we open onze laatste citaat bestand hier, dus quote7. 

Hetzelfde. Ik heb zojuist nog een PHP-bestand dat zal terugkeren naar ons meer dan alleen de symbolen. Het zal ons ook terug van het bedrijf namen. En dus doen we hetzelfde. We maken een AJAX verzoek. Zodra het verzoek is voltooid, gaan we deze functie hier uit te voeren, en deze functie zal opbouwen grote reeks van elementen. Maar het verschil is dat de waarde van deze lijsten is niet langer alleen het symbool, het is nu de naam. Dus hebben we een klein probleem. Als we onze lookup gebruiken, moeten we een of andere manier doorgeven van het symbool. We kunnen niet voorbijgaan lookup iets als Microsoft Corporation. We moeten het MSFT passeren. Als we HTML schrijven, we hebben veel leuke ingebouwde attributen. Een A zou hebben verbonden aan een href of een klasse. Maar wat we echt nodig hebben nu voor elk van deze links om een ​​voorraad symbool verbonden aan. Er is geen ingebouwde HTML-attribuut voor voorraad symbool, maar gelukkig, HTML5 stelt ons in staat om onze eigen attributen toevoegen om wat we willen. Door te zeggen data-symbool, ik heb een nieuwe attribuut wiens naam ik net gemaakt, en dit is geen probleem omdat ik voorafgegaan met deze gegevens. We gaan naar binnen daar het symbool nu opslaan uit de voorraad. Wat dat betekent is dat, hoewel we de waarde van de naam van het bedrijf weergeven binnenkant van onze autocomplete, zijn we nog steeds herinneren het symbool die bij elk bedrijf. De manier waarop we dat doen is de binnenkant van dit element zelf. Dus dat betekent dat we nodig hebben om nog een verandering te maken. Als we het nu op, we moeten echt profiteren van het symbool attribuut in plaats van alleen de waarde ervan. Als we een back-up, hechten wij een event handler voor suggesties. Wanneer een van deze suggesties nu wordt geklikt, ik wil iets doen. Wat ik wil doen is de waarde van die invoerveld. Nu wil ik deze zelfde val functie in te stellen. 

Dus zonder argumenten deze val functie geeft je wat er al in het tekstvak, maar als je het een string, het gaat om die string te nemen en zet hem in het tekstvak. Ik ben het selecteren van het tekstvak op dezelfde manier. De naam staat symbool binnenkant van vorm-offerte. Nu ben ik het verzenden van het de waarde van het attribuut data-symbool. Dit ding hier is nieuw, dit $ (this). Wat dit betreft is het element dat is geklikt. We kunnen hier zien dat we niet een gebeurtenis click bevestigen elk element met een klasse van suggestie afzonderlijk. Integendeel, we naderen dit een beetje anders. In plaats daarvan we zeggen wanneer er iets binnenkant van deze suggesties div, die vergeet gewoon de container voor die lijst, Als iets in deze div wordt geklikt en het heeft een klasse van suggestie, Ik wil dit evenement om te vuren. In principe wat dit betekent dat we kunnen doen is dat we kunnen hergebruiken deze zelfde event handler voor alle van de dingen die in de lijst. Dus we hebben niet een event handler voor het eerste element hebben en een andere event handler voor het tweede element. We kunnen in plaats daarvan zeggen: "Ik wil hetzelfde event handler toe te passen om alles in mijn lijst." Maar we moeten een of andere manier weten welk element is geklikt. Deze "dit" keyword vertegenwoordigt alleen dat. Dit is het object dat zojuist geklikt door de gebruiker. Als ik gewoon klikte op de 3e link, betekent dit het element van die 3e link, wat betekent dat ik kan krijgen haar attribuut, data-symbool, waarvan we weten dat te bevatten het symbool dat wordt geassocieerd met het bedrijf waar ik gewoon geklikt. Als we springen terug naar onze financiën pagina, kunnen we nu dat zodra ik begin te typen iets als msft te zien, we niet langer om alleen de voorraad symbolen, we nu het krijgen van de werkelijke bedrijven. Maar als ik klik op een van deze bedrijven, we kunnen dat we in feite het tekstvak bevolken niet zien met de naam van het bedrijf maar met wat is opgeslagen in de data van attributen. En dus als ik eigenlijk inspecteren een van deze elementen door met de rechtermuisknop op te klikken en te klikken op Inspecteer element, kunnen we echt zien hoe dit eruit ziet. 

Vergeet niet dat dit iets is dat we binnen gemaakt van die for-lus toen we het opbouwen van die string van HTML. We kunnen hier zien dat deze data-symbool de waarde van MSFT, wat goed is heeft. Dat is wat we verwacht hadden. Dat is het symbool en dat is hoe we de waarde die we nodig hadden om te gebruiken kreeg binnenkant van dit tekstvak. Dat is genoeg voor de offerte formulier, want dat is een beetje saai. Laten we gewoon een paar snelle verbeteringen aan te brengen in onze portfolio pagina. Als u hebt gebruikt CS50 Financiën voor een tijdje en u beginnen met het kopen en verkopen van een heleboel van de voorraden, uiteindelijk deze tabel gaat krijgen vrij groot, en je gaat een voorraad ticker, natuurlijk willen. Zodra de tafel is echt, echt groot, kan het nuttig zijn voor de gebruiker om te proberen te zoeken over. Binnenkant van het zoekvak als ik begin te typen iets als Disney en op zoek naar mijn Mickey Mouse voorraad, kunnen we zien dat de tafel nu is het filteren op basis van wat ik net getypt inch Deze functionaliteit ziet er super ingewikkeld, maar het is echt, echt makkelijk met jQuery en JavaScript. Dit portfolio.php bestand bevat een JavaScript-bestand met de naam portfolio.js. Laten we eens een kijkje nemen op die. Dus html, js, portfolio. Hier is waar we mee bezig zijn dat het zoeken op de tafel. Het eerste wat ik moet doen is sluit u een event handler aan dat tekstvak omdat we weten dat we willen dat onze filterfunctie om te vuren iedere keer dat de gebruiker op iets, omdat we geen tijd hebben voor Search knoppen. Het eerste wat we moeten doen is erachter te komen wat de gebruiker zoekt, net zoals we eerder hebben gedaan. Dit sleutelwoord verwijst naar het huidige element wordt de gebruiker interactie met. 

Omdat de gebruiker de interactie met het zoekvak, $ Betekent dit het zoekvak, dus this.val geeft ons wat er in het zoekvak van de gebruiker op dat moment te typen. Dus, is nu wat we willen doen willen we itereren over alle rijen binnenkant van onze tafel. Om alle rijen in onze tabel te selecteren, gaf ik die tafel een ID van de tabel portfolio, en elke rij wordt weergegeven door een TR element, dus deze schakelaar gaat om terug te keren voor mij een grote reeks van alle rijen in mijn tabel. Nu wil ik itereren over die array. Ik kon je een for-lus, maar jQuery eigenlijk biedt ons de leuke functie genaamd "per stuk." Wat ieder doet is ieder neemt een argument, en dat argument is een functie. Wat het gaat doen, is dat het gaat om die functie van toepassing zijn op elk element binnenkant van deze lijst. Deze functie heeft een argument dat is e, en wanneer deze functie wordt uitgevoerd, wordt deze e zal worden vervangen door de eerste rij, dan de tweede rij, en dan de derde rij. Door op deze manier, is dit hetzelfde als het runnen van een for-lus en dan uitzoeken het huidige element op basis van de index binnenkant van je for-lus. Bij elke iteratie, voor elk van deze elementen in de tabel, Ik wil om te controleren of de tekst van het element - de tekst van de cel binnenkant van de rij - overeenkomt met wat ik ben op zoek naar. Deze grote lange reeks van commando's is hoe ik dat kon doen. Eerste nogmaals, dit verwijst nu - omdat het binnen een nieuwe functie - Dit is nu de huidige rij in de tabel. Ik wil de huidige rij in de tabel te nemen, en ik wil al haar kinderen te krijgen. Vergeet niet, de DOM is een hiërarchische boom, waardoor een aantal elementen kinderen. 

Deze. Kinderen functie gaat om terug te keren naar mij een array van alle elementen die de kinderen, in dit geval een rij in de tabel. Dit is gewoon de cellen in de rij. Ik wil alleen maar om te zoeken op de eerste cel. Deze. Eerste functie zegt geef me het eerste element in die array. Dan is de tekst-functie zegt me precies wat er in die cel want ik wil zoeken over die tekst. Tot slot, laten we converteren naar kleine letters, dus we kunnen doen tekst hoofdlettergevoelig queries. Tot slot willen we zien of die string binnenkant van een tabel bevat de string we op zoek naar. De indexOf functie in JavaScript doet precies dat. Het vertelt ons of deze string een andere string bevat. Als het waar is dat de cel bevat wat ik ben op zoek naar, dan wil ik er zeker van dat het is aangetoond. De show methode zal zeggen: "Laat het element." Indien dit niet het geval, dan betekent wat ik zoek niet opgenomen binnen die rij, en daarom wil ik te verbergen is van de gebruiker. Dat wordt bereikt dat mooie filterende werking, waar niet meer zien we de hele tabel. Als je geïnteresseerd bent in hoe deze ticker te maken ook, We plaatsen de bron online. Maar het is heel eenvoudig. JQuery is geweldig methoden, voor deze animaties en manipuleren van CSS-eigenschappen. Dus, dat is het voor mij. 

Wat ligt dan verder? Zoals u zult zien in een paar dagen, de laatste projecten voorstel is het gevolg. De laatste projecten voorstel zal u vragen een paar vragen, maar onder hen zijn drie mijlpalen - iemand een "goede" mijlpaal, een betere mijlpaal, en een een beste. Het idee is echt om jullie te helpen uw verwachtingen zodat minimaal je zal blij zijn met de uitgang van uw afstudeerproject en het zal "goed" voor zover u zich zorgen maakt. Maar dan in het belang van het krijgen van u om gewoon een beetje te bereiken iets beters of iets best, zullen we ook soort van duw je in de richting van dat ook. De CS50 Hack-a-thon, ondertussen, is in een paar weken. Meestal doen we dit op een loterij basis basis, omdat van belang, maar kansen zijn we een paar honderd van ons te nemen aan pendelbussen van Harvard Square naar Kendall Square, waar Microsoft heeft een mooie faciliteit treffend noemde "NERD" - de New England Research and Development Center. We komen er wel ongeveer 8 uur We zullen wat eten te hebben. Rond 1 uur 's morgens zullen we wat meer eten. Rond 5 uur als je nog wakker zullen we het hoofd naar IHOP of nemen u mee terug naar de campus. Het doel is om te duiken in afstudeeropdrachten naast van klasgenoten en medewerkers. Dan een paar dagen later is de CS50 Fair, dat is echt bedoeld als een kans voor jullie om je werk te presenteren en prestaties voor het semester terwijl wrijven schouders met elkaar en het krijgen van een gevoel van wat iedereen deed. Met dat gezegd, veel dank aan Tommy en aan Jozef, en we zullen zien je maandag.  [Applaus]