[Powered by Google Translate] [Viikko 9, jatkuu] [David J. Malan - Harvardin yliopisto] [Tämä on CS50. - CS50.TV] 

Tämä on CS50. Tämä on loppuviikosta 9. Paljon kiitoksia. Lopuksi. Viikko 9. Sain sen. Tänään jatkamme keskustelua web ohjelmointi silmä kohti opinnäytetyö, ei siksi sinun täytyy tehdä jotakin web-pohjainen lopullisen hankkeita vaan joko opinnäytetyöt tai jälkeen CS50 tämä on varmasti suuntaan, jossa moderni ohjelmisto on menossa. Ja silti se ei ole oikeastaan ​​helppo juttu. Itse asiassa yksi vaikeimmista asioista tehdä, on osa suunnittelua. 

Esimerkiksi suunnittelun me tarkoitamme todella saada käyttöliittymä tai käyttökokemuksen oikea. I daresay - ja me tiedämme viime Harjoitus kun muutama teistä esiin oman vatsanväänteet joitakin ohjelmisto tai laitteisto, infuriates teitä, joko kampuksella tai off - siellä on paljon sivustoja siellä, siellä on paljon laitteita siellä, sellainen perseestä. Mutta tosiasia on, että tekee asioita, joita on helppo käyttää vielä ovat kuitenkin tehokkaita on erittäin vaikea haaste. Joten tänään kysyin Joseph ja Tommy liittyä minua täällä jotta voimme keskustella, molemmat noin suunnittelu ja millaisia ​​ajattelun prosessien tulisi aloittaa läpi pään kun voit suunnitella lopullinen projekteja, teidän tulevissa haasteissa. Ja sitten Tommyn apua me tarkastelemme joitakin täytäntöönpanon yksityiskohtia. Miten voit olla joitakin visio paperilla tai mielessäsi että voit suorittaa ohjelmallisesti käyttämällä joitakin teknologioiden ja tekniikoiden olemme juuri alkaneet puhua, nimittäin JavaScript ja jotain vielä uudempaa, eli AJAX, asynkroninen JavaScript. Jonka avulla voit luoda kaikki dynaamisen käyttöliittymän hakemalla enemmän ja enemmän dataa vähitellen palvelimelta. Joten näemme joidenkin katkelmia myös tänään. Sivuhuomautuksena, jos olet kiinnostunut keskittyvät tietotekniikassa tai sivuaineina tietojenkäsittelytiede, tiedämme, että tänä perjantaina keskipäivällä vuonna Maxwell Dworkin 221 tulee olemaan pizza tapahtuma jossa voit oppia hieman lisää tietojenkäsittelytiede. Matkalla ulos ovesta tänään voit poimia epävirallinen opas CS Harvardissa. Laitamme sen roskapönttöjä ulkopuolella klo vyötärön korkeudelle joten jos haluat napata tämä ja oppia hieman lisää CS, että tulee olemaan siellä sinua se oli viikolla 0. Myös jos haluat liittyä meihin CS50 lounas perjantaina klo 13:15, pää cs50.net/lunch. Pitemmittä puheitta, annan teille opetuksen kaveri Joseph Ong. Hei. [Aplodit] Kiitos. Ensimmäistä kertaa kuulin suunnittelu oli luokassa täällä kutsutaan CS179. 

Professori aikaan kertoi meille tarinan toisen professorin joka oli mennyt hotellin ja käytetään hanat. Voiko joku kertoa minulle, mitä 2 nupit vasemmalla ja oikealla tehdä? [Opiskelija] Kuuma ja kylmä. >> Kuuma ja kylmä. Hyvä. Mitä normaalisti odottaa, eikö? Tämä professori käytön jälkeen hana haluaa käydä suihkussa, ja hän etenee käyttää tätä. Hän ajattelee vasemmalle ja oikealle puolelle on kuuma ja kylmä, eikö? Mutta voiko joku kertoa minulle, mitä nämä todella tehdä? Käsiä? [Äänetön opiskelija vastausta] >> Yksi ehdotus on? [Äänetön opiskelija vastausta] >> Lämpötila? Joten yksi heistä valvoo lämpötilaa ja muut tarkastukset? >> [Opiskelija] Vedenpaine. Veden paine. Hyvä. Tämä professori kävelee tämän ja ajatellen niitä valvoa kuuma ja kylmä, kääntyy oikea, mikä hänen mielestään on kuuma, koko matkan ylös koska hän haluaa ottaa lämmin suihku. No, ne eivät todellakaan täsmää, niin hän saa tätä kovin hauska kokemus olemisen kylmä suihku, ja me kaikki tiedämme, miltä se tuntuu. Tämä on esimerkki suunnittelun puute. Mitä tarkoitan, että on hänen odotus hanasta ei vastaa mitä tuli ulos suihku, joka on eräänlainen valitettavaa hänelle. Joten tämä on esimerkki suunnittelun puute, joka tapahtuu tosielämässä. Mutta me näemme kaikenlaisia ​​toisilla samoin. Emme ehkä ole faneja MBTA järjestelmän. Tämä on metro järjestelmä todella Lontoossa, joka sanoo: "Tämä painike ei ole käytössä." Miksi se edes siellä? Miksi edes välitä? Kun olin lapsi, joka tech savvy yksi talo, kun tietokone olisi kaatua, äitini olisi tullut minulle, näyttää minulle näytön ja kysyy mitä tapahtui. 

Edes En tiedä, mitä tämä tarkoittaa. [Naurua] Mitä? [Naurua] Joskus meistä tuntuu ohjelmistojen kehittäjät ovat vain vetouistelu meitä. Kun käyttäjät olemme kuin, "Mitä on tekeillä? Joku kertoa." Tämä kaikki tulee alas kysymys suunnittelun. Suunnittelu, kuten voimme nähdä, ei ole pelkästään siitä estetiikkaa, se ei ole siitä, miten asiat näyttävät. Näemme tässä, että tämä pieni pop-up täällä oikeastaan ​​näyttää aika hyvältä. Se on varjon taustalla, se on raja säteet menossa. Se on tavallaan aika. Se ei oikeastaan ​​hyvin suunniteltu, koska se ei ole kovin käyttäjäystävällinen. Tuo pieni pop-up, joka tulee esille ei oikeastaan ​​anna minulle mitään tietoja mitä tapahtuu, se ei kerro mitään koska käyttäjä miten toipua tämän virheen. Haluamme ajatella asioita muotoilu ei ole. Ensinnäkin, se ei ole estetiikkaa. Se ei myöskään täytteenä App kanssa tonnia tarpeettomat toiminnot. Jos olet thaimaalainen ravintola, et luultavasti halua olla hammaslääkäri samanaikaisesti. Ja Facebook Kysymykset, ei että monet ihmiset käyttää sitä ja se ei todellakaan ytimessä, mitä he rakensivat. Ja niin se on mukava ajatella niinkään määrä asioita että olet laskemisesta hakemuksesi vaan laatu ja miten teet että käyttökokemuksen parantamiseksi by oikeastaan ​​paranna mitä sinulla jo on. 

Lyhyesti sanottuna, muotoilu kertoo meille, mitä meidän pitäisi rakentaa. Esimerkiksi, jos olemme rakentamassa jotain, että meidän etsiä asioita, kuten Google, esimerkiksi meidän pitäisi tehdä asioita tavalla joka edellyttää käyttäjän ottamaan paljon napsautuksia saada mitä he haluavat, vai pitäisikö meidän tehdä se tavalla, esimerkiksi Googlen Instant tai autocomplete jonka avulla voimme päästä meidän tuloksia nopeammin? Engineering liittyy, kuten Tommy näyttää, itse rakentaa sitä. On olemassa paljon erilaisia ​​design. Jos esimerkiksi olet rakentamassa jotain käyttöön jotain kolmannen maailman maassa, jossa ei ole paljon sähköä tai niin paljon tekniikkaa, sinun täytyy suunnitella, mitä olet rakentamassa tavalla, joka helposti antaa pääsy ihmisiä. Mutta minkälaisia ​​muita suunnittelun päätöksiä, joita ei olisi tai voi olla mukana jotain tällaista? Joo. Näen käden. [Äänetön opiskelija vastausta] >> Oikea. Aivan. Esteettömyys on yksi asia. Monet ihmiset eivät ajattele, "Entä käyttäjille?" kuten ääripään joko spektrin. Olen käyttäjät, joilla saattaa olla vamma, että en ole ajatellut ja olen vain ajatellut suunnittelemalla yleisen käyttäjän. Internet pääsee kaikkien nykyään, ja minun pitäisi suunnitella niille ihmisille samoin. Millaisia ​​muita suunnittelun päätöksiä, joita teet? Kyllä. >> [Opiskelija] Cost. Maksaa. Erittäin hyvä. Toinen asia, voisimme perustamme suunnittelu päätöksiä ovat kustannustehokkaita. Jos olemme liiketoimintaa, haluat rakentaa jotain, joka ei vie paljon kustannuksia tuottaa mutta voi myydä erityisen suuria kustannuksia tai saada meille voittoa. 

Nämä ovat kaikki erilaisia ​​suunnittelu, mutta kun olemme rakentamassa jotain Internetissä tai kun olemme rakentamassa jotain joka luultavasti ei maksa niin paljon rakentaa nyt, kuten Internet-sovellukset - sinun ei tarvitse heittää paljon pääomaa se jotta jotain, joka todella toimii - Mitä olemme enemmän huolissani on käyttökokemusta. Kutsumme tätä käyttäjäkeskeisen suunnittelun. Pohjimmiltaan mitä käyttäjäkeskeisen suunnittelun liittyy on nostamassa itsenne kengät käyttäjät. Jos joku kirjautuu mitä olen rakennus, he ilmeisesti tulleet minun erityisesti hakemuksen tavoite mielessään, kanssa tehtävän he haluavat suorittaa. Ja sinun tehtäväsi ei ole vain auttaa heitä täyttämään tätä tehtävää vaan auttaa heitä täyttämään se tehtävä tavalla, joka on tehokas, intuitiivinen, ja, kuten jotkut henkilö sanoi tuolla, saatavilla. Mitä tehokkuus tarkoittaa? Tehokkuus tarkoittaa kuinka nopeasti se minun käyttäjä suorittaa tehtävän antanut minun käyttöliittymä. Kestääkö paljon napsautuksia niitä saada paikasta toiseen? Onko se ikävä? Onko heillä suorittaa paljon toistuvia tehtäviä? Haluamme tehdä tämän prosessin mahdollisimman tehokas joten he eivät tarvitse tehdä tuollaiset asiat. Kuten intuitiivisuus, joka on, esimerkiksi, jos käyttäjä hakee minun liitäntä, on se helppo niitä saada paikasta toiseen? Onko se helppo ne selvittää, mitä heillä on sitten minun liitäntä jotta ne voivat saavuttaa tavoitteen tai tehtävän he haluavat saavuttaa? 

Ja lopuksi, yksi henkilö sanoi tuolla saavutettavuus on erittäin tärkeää. [Uros kaiutin] Se tulee esteettömyyden asioita, kuten vision, kuten miten voin itse suunnitella jotain jonkun joka on sokea? Oh. Ihmisille, jotka eivät näe ollenkaan, meillä on jotain kutsutaan näytönlukuohjelmia. Mitä sinun pitäisi tehdä, on sinun pitäisi rakentaa sivustosi tavalla että, esimerkiksi, erityisesti teknologiat mitä me kutsumme - On paljon asioita nyt. Mielestäni on olemassa näytönlukijoiden kutsutaan JAWS. Monet näistä asioista luottaa siihen, mitä me kutsumme alueen säännöt jotta luki käyttäjälle mikä on läsnä sivulla. Niille ihmisille, jotka eivät näe, sinun täytyy varmistaa, että nämä näytönlukijat voi todella poimia sivun sisällön ja voi todella näyttää käyttäjille, Jos et näe, ainakin voit silti ymmärtää sivun sisällön. Joo. Okei. Tarpeeksi puhua hyvää suunnittelua. Puhutaanpa huono suunnittelu. Nämä ovat asioita, joita sinun pitäisi tehdä. Voiko joku kertoa minulle kokemuksistaan ​​Craigslist ja mitä he ajattelevat ei ole niin hienoa tämä malli? Kyllä. >> [Opiskelija] mielestäni liian monta sanaa yhdellä alueella. Liian monta sanaa, eikö? Täysin ylivoimainen. Tulette tälle sivulle ja olet tervehditään koko joukko asioita täällä että ei ehkä edes väliä sinulle. Esimerkiksi asut yhdessä valtiossa, joka ei ala tämän kirjeen. Sanotaan asut Texasissa tai jotain. 

Sinun täytyy selata kaikki alas sivun päästä paikkaan olet. Olen Boston, joten haluan näyttää Massachusettsissa. Missä on Massachusetts? Voi, se on täällä. Voi, se on Boston. Okei. Katsotaanpa Boston. [Naurua] Melko ylivoimainen, eikö? Hankalat asiat siellä. [Naurua] Sanotaan Etsin asuntoa. Kuinka moni on todella käytetty Craigslist? Tonnia sinua. On melko huonoja tapoja tarkastella tätä, mutta katsotaanpa tätä. Mitä eroa img ja kuva? Voiko joku kertoa minulle? Ei oikeastaan ​​ole mitään eroa. Ne tarkoittavat täsmälleen samaa asiaa, mutta niillä on erilaisia ​​tarroja niitä jostain syystä. Jos minä klikkaa Has Image, mitään ei tapahdu sivulla. Minulla on oikeastaan ​​klikkaa Hae uudelleen, että jotakin tapahtuisi. Mikä voisi olla parempi muotoilu päätös, joka voitaisiin tehdä siellä? Jos olen klikkaamalla että suodatin, en luultavasti halua suodattaa kyseisen toiminnan tai tiettyyn luokkaan. Joten sen sijaan, paina Etsi uudestaan, voisin vain automaattisesti tehdä suodatus eräänlainen Google tyyli, jossa he tekevät sen heti. [Malan] Mutta älä muodostaa kuten olemme nähneet niitä toistaiseksi on fyysisesti toimitettava lyömällä Anna vähintään tai klikkaamalla painiketta? Kuten olet nähnyt niitä toistaiseksi, sinun todella täytyy klikkaa Submit tekemään niitä asioita. 

Mutta kuten Tommy näyttää toiseen, on todella miten voit sellainen, että kun napsautat että asia se voi automaattisesti lähettää mitä kutsumme AJAX pyynnöstä saada tiedot takaisin ja suodattaa tulokset välittömästi. On tonnia asioita, jotka ovat väärin tämän rajapinnan. [Malan] Voitteko etsiä Cambridge? Siinä on jotain hieman epätavallista täällä missä välität Cambridge ja silti olet saada Westford, Spring Hill, West Newton ja vastaavat. Luultavasti ei ole ihanteellinen. >> Luultavasti ei ole ihanteellinen. Kuinka saattaisin pystyä tekemään käyttäjän kokemuksia paremmin tässä sivulla? Kyllä. >> [Opiskelija] Ohjeet. Okei. Ohjeet millaisia ​​järkeä? [Opiskelija] Esimerkiksi asia ensimmäistä kertaa käyttäjille, jotka eivät edes tiedä mitä Craigslist on tai et tiedä mitä sinun pitäisi tehdä. Oikea. Joten selittää mitä craigslist on tällä sivulla on tärkeää. Voimme todella sanoa käyttäjille, mitä tämä sivu on oikeastaan. Jos olen vain käymässä tässä, näen koko joukko paikkoja. En edes tiedä, mitä ne tarkoittavat. Mutta mikä tärkeintä, vain katsomalla tämän rajapinnan, Muistan piti selaa ton asioita löytää tietty yhteisö että olen oikeastaan ​​välittänyt tästä. Mikä nopeampi tapa voisin tehdä? Kyllä. [Opiskelija] jakaa ne osaksi itään, länteen alueilla. >> Okei. Voisin jakaa ne kategoriat, jotka voisivat auttaa minua nopeammin määrittämään miten saada tähän kohteeseen. [Opiskelija] Laita pudotusvalikosta. >> Oikea. Okei. Voisin käyttää pudotusvalikosta koska meillä on kiinteä joukko asioita ja voisimme näyttää niitä pudotusvalikosta. Näin se ei vie niin paljon tilaa ruudulla. Mutta vielä parempaa, mitä voimme tehdä? Kyllä. >> [Äänetön opiskelijan vastausta] >> Voitteko sanoa uudestaan? >> [Opiskelija] hakukenttään. Joo, hakukenttä. Se on hienoa. Mitä voimme itse tehdä on, jos me katsomme taaksepäin dioja, hakukenttä. Autocomplete. Erittäin helppo tapa etsiä tuloksia, jotka tiedät ovat asetettu. Jos aloitan kirjoittamisen BO, vain näytä kaikki tulokset ovat BO sisällä niitä. Näin voin helposti löytää erityisesti yhden haluan mennä sijaan, voit selata tämän todella iso lista. 

Nämä ovat kaikenlaisia ​​todella matalalla roikkuvat hedelmät että joku toteuttaa Craigslist voi itse tehdä, jotta kokemus verkkosivuilla paljon paremmin heidän tietylle käyttäjälle. Okei. Tarpeeksi puhu huono verkkosivustoja. Puhutaanpa Facebook. Kun Facebook tuli ulos, ja erityisesti Facebook-valokuvia, siellä oli paljon muita palveluita hetkellä joka voisi tehdä täsmälleen samoja asioita. Ne voisivat järjestää valokuvia albumeihin. Mitä voisit tehdä, on voisit järjestää ne ryhmiksi samoin. Voit järjestää ne päivämäärän. Voisit tehdä kaikki nämä erityisesti asiat. Mutta ei kukaan tiedä, mitä tehdä Facebook-valokuvia räjähtää kun se julkaistiin? Kyllä. >> [Opiskelija] Tags. >> Tags. Aivan. Meillä on Milo täällä, joka on meidän koira maskotti kanssa CS50 huivi. Voit nähdä, että meillä on tämä koodaus ominaisuus keskellä. Ja mitä teki Facebook kuvia niin mielenkiintoinen käytettävyyden kannalta on, että se todella saa ihmiset tätä kautta ottamaan heidän ystäviään kuviaan. Facebook, koska niiden verkkosivuilla on erityisen sosiaalinen, se on noin rakentaa tällaista sosiaalisen ilmapiirin. Että paransi kokemusta valokuvia paljon enemmän koska he voisivat itse aloittaa sanomalla: "Nämä ovat ihmisten välisiä yhteyksiä, ja nämä ovat kuvia ihmisistä sinä todella välität. " Osa on myös eräänlainen narsismi. Ihmiset haluavat tulla nimetyksi kuvia ja tuollaista. Vaikka tämä ei ole välttämättä hyvä ihmisen piirre, Samalla se perustuu hyvään suunnitteluun päätöksistä koska ihmiset todella kiinnostaa asioita, kuten tämä. Joten se Facebook-valokuvia. 

Mutta puhutaanpa Facebook yleisemmin. Olen varma paljon ihmisiä täällä on mielipiteitä Facebook, sekä hyvä suunnittelu päätöksistä ja huonosta suunnittelusta päätöksiä. Joten purkaa tai olla onnellinen. Tule. Tiedän kaikki käytät Facebook. Jonkun täytyy olla jotain pahaa sanottavaa tai jotain hyvää sanottavaa. Kyllä. [Opiskelija] Vuonna uutisvirrasta siellä on paljon asioita, joita en oikeasti välitä. Uutissyötteen ei näytä paljon asioita et ehkä välitä. Sinulla on ystäviä Facebookissa joka et ole tavannut 2 tai 3 vuotta ja näet heidän uutistulokset avautumisen teidän uutissyöte ja et todellakaan välitä siitä. Facebook on todella pyrkinyt tekemään tämän paremmin, ja he todella yrittivät työntää asianmukaisia ​​tuloksia alkuun uutissyötteen kuin myöhään joten voit itse nähdä mitä ystävät, jotka ovat merkityksellisiä sinulle tai läheisiä ystäviä. Mitään muuta? Kyllä. [Äänetön opiskelija vastausta] >> Voitteko sanoa uudestaan? [Opiskelija] mainokset ovat melko huomaamattomia. >> Missä mielessä? [Äänetön opiskelija vastausta] Heillä ei ole valoa ruudulla, kuten bannereita. Okei. Se on hyvä. Jos muistat Internetin 90-luvun - >> [Malan] olin siellä. >> Hän oli siellä. [Naurua] Muistatte ehkä vilkkuu GIF taustat, sparkly asioita, GeoCities tyyli tavallaan asioita. Se ei todellakaan ole esimerkki hyvän suunnittelun koska se on todella häiritsevää sisällöstä. Yale art verkkosivuilla käytetään olla animoituja GIF niiden taustalla ja et voinut lukea mitään sivulla, mutta kai joku todella puhui heille ja nyt se on hieman erilainen. [Malan] Se on paljon parempi nyt. >> Se on paljon parempi nyt, kuten näette. >> [Malan] Oh yeah. Aivan loistava, vain - Joo. Okei. 

Osa on myös tehden sivulla mahdollisesti hyvin minimalistinen ja erittäin ymmärrettävää joten asiat sivulla virtauksen tavalla, joka on hyvin looginen ja ei saada tavalla toisistaan. Millaisia ​​muita asioita ovat hyviä noin Facebookissa tai huonoa Facebook? Mennään vain muotoilu keskustelua täällä. Oh. Minne? Joo. [Opiskelija] Uusi Aikajana järjestelmän avulla voit etsiä henkilön profiilia menneisyydestään. Ooh, Aikajana. Aikajana on hyvä asia, koska sen avulla voit väijyä ystävillesi takaisin, kun ne olivat lukiossa. Aikajana on hyvä, koska sen avulla voit suodattaa läpi sisältöä paljon nopeammin, sen avulla voit löytää asioita, jotka olisivat muuten vienyt todella kauan löytää vain rullata ylös ja alas, ylös, ylös, ylös, ylös, ylös, kuin mennä ajassa taaksepäin. Mutta sitten on myös eräänlainen haittapuoli, että mitä käyttökokemuksen. Mikä se voisi olla? Iso sana, joka alkaa P-R. >> [Opiskelija] Yksityisyys. >> Privacy, eikö? Yksityisyys on valtava käyttökokemuksen ongelman. Tämä on yksi niistä asioista, inhoan eniten Facebook nyt. [Naurua] [Malan] Kuten minulla nyt. David ei ymmärrä tätä todella tapahtunut vasta eilen. Joten nyt hän tietää, että joka kerta kun chat hänelle Tiedän, että hän on ollut piittaamatta minua. [Malan] hankala osa oli minulle todella välittämättä hänestä, enkä tiennyt hän tiesi minun välittämättä hänestä. [Naurua] Yksityisyys on valtava ongelma. Voiko joku täällä kertoa minulle, mitä voisi olla huonoa Facebook yksityisyys Sen lisäksi, että he tekevät asioita, kuten tämä? Mikä on se erityisen vaikea tehdä suhteen Facebook yksityisyyttä? Että sellainen on johtava kysymys. Kyllä. >> [Opiskelija] Piilota kuviasi tietyt ihmiset. Oikea. Aivan, piilottaa valokuvia tietyiltä henkilöiltä. Heillä on pieni, vähän painiketta oikeassa yläkulmassa, jonka avulla voit vaihtaa yksityisyyden kuva. Yksityisyyttään vaihtoehdot hyvin vaihteli erilaisia ​​valikoita. 

He ovat saaneet paljon paremmin siitä hiljattain, mutta sitä käytetään silloin, että aina kun halusi estää ystävillesi näkemästä kuvia, sinun pitäisi mennä läpi hyvin monimutkainen 5-askeleelta prosessi on kuin, Saanen klikkaa tätä linkkiä, nyt haluan napsauta uudelleen, saanen valitse uudelleen Saanen mitkä ihmiset eivät näe kuvia. Se ei ole erityisen hyvä Facebookissa puolelta koska niin paljon käyttökokemus on todella heille vapauden valvoa, mitä ihmiset näkevät. Kutsumme tätä käyttäjän kontrolli ja vapaus. Jos et kerroit käyttäjät tehdä tavalla, joka on tehokas ja intuitiivinen, Sitten käyttökokemusta ei ole kovinkaan suurta ollenkaan.  Olisiko teillä sanoa mitään Facebook? Miten poistan tämän käytöstä? [Ong] ei voi kytkeä tämän pois, ja se on valtava käytettävyys virhe puolelta Facebook. Tämä ominaisuus - Olen itse tutkinut sitä eilen - se on joko, että et voi tehdä sitä tai se on haudattu jonnekin hyvin, hyvin syvällä syvennyksiin Facebook koska en voi selvittää, miten poistaa tämän toiminnon ollenkaan. [Malan] Mutta joskus nämä päätökset eivät ole ilmeisiä koska te olette antanut meille paljon hyödyllistä palautetta eri CS50 sovelluksiin ja sivustot, käyttää tietysti. Emme ole toteuttanut kaikkia näitä pyyntöjä ja ehdotuksia. 

Osa, joka on saada niin paljon pyytää, että se on ajan funktiona, mutta joskus me vain tehdä tietoisen päätöksen kaltainen, "Kiitos ehdotuksesta, mutta emme hyväksy." Joten miten voit itse päättää, mitä sinun pitäisi tehdä, jos käyttäjät ajattelevat sinun pitäisi tehdä jotain vaikka et välttämättä? Se on hieno tasapaino todella kuunnella mitä käyttäjät sanovat ja todella ottaa jonkinlainen linja, jossa sanot, "Emme aio tehdä mitä nämä käyttäjät sanovat." Ja erityisesti, mielestäni oli lainaus Henry Ford, joka summaa tähän asti melko hyvin. "Jos olisin pyytänyt ihmisiä mitä he halusivat, he olisivat sanoneet haluavansa nopeammin hevosia." Voiko kukaan tavallaan erottaa toisistaan, mitä tämä lainaus todella tarkoittaa? Kyse ei ole vain siitä, että käyttäjät tietävät, mitä he haluavat, mutta se on enemmän kuin - [Opiskelija] He eivät tiedä, mitä on mahdollista. Osittain he eivät tiedä, mikä on mahdollista. Tease että toisistaan ​​hieman. Mitä tarkoitat? [Äänetön opiskelija vastausta] Se on hyvä. Mielestäni yritämme sanoa on, että ihmiset tietävät, mitä he haluavat. He haluavat nopeammin hevosia. Mitä he todella haluavat on kyky liikkua nopeammin, mutta he eivät todellakaan tiedä keskipitkällä jonka saavuttamiseksi. Kun tulet käyttäjät ja käyttäjät kertovat jotain ja he kertovat teille, "Haluamme näitä ominaisuuksia ja näitä ominaisuuksia ja näitä ominaisuuksia" et halua välttämättä ajatella, "Anna minun mennä eteenpäin "Ja toteuttaa mitä he nimenomaan sanovat," mutta mitä haluat ajatella on, "Millaisia ​​ajatuksia saan tuosta?" Mitä he oikeastaan ​​haluavat? 

Ja sieltä mitä voit tehdä on suunnitella jotain, joka täyttää nämä pyynnöt mutta ei välttämättä niin, että käyttäjä odottaa, että se täyttyy. Joten jotain lopullista hankkeita, hyvin reaalisesti mitä hyötyä heuristista kun ruvetaan tekemään jotain parempaa, varsinkin jos suunnittelija on tämä ylimielisyys hänestä jolloin te tavallaan tietää, mikä on parasta, saatat ottaa panosta käyttäjille, mutta miten te todella mennä noin saada että palautetta? Vuonna opinnäytetyöt hyvin konkreettisesti, mitä tuottaa parhaat tulokset täällä? Mikä tuottaa optimaaliset tulokset - ja aion mennä yli tämän toisessa - tämä kehittämässä ja sitten testaamalla ja sitten iteroimalla. Mitä tarkoitan testaus on yleensä kun suunnittelet jotain luulet se on melko hyvä, kuten "olen niin hyvä suunnittelija. Jokaisella on menossa rakastamaan tätä." Ja sitten laitat sen siellä ja ihmiset eivät todellakaan pidä siitä jostain syystä. Mitä sinun täytyy tehdä, on sinun täytyy ottaa osaa asioita, joita ihmiset tekevät kuten ja uudistaa asioita, joita ihmiset eivät pidä. Se kuulostaa hyvin ilmeinen prosessi, mutta tämä prosessi jatkuvasti iteroimalla päälle mitä olet jo rakentanut on prosessi, joka auttaa sinua ei vain tarkentaa oman suunnittelun taitoja, mutta myös auttaa sinua tarkentaa suunnittelun niin että ihmiset todella arvostavat tuotteen vieläkin kuin ennen. 

Menen aikana enemmän konkreettisia esimerkkejä, mitä voisi itse tehdä. Koska tavallaan viimeinen esimerkki tuotteesta, katsotaanpa KAYAK. KAYAK kun se tuli ulos oli erittäin suosittu. Voiko kukaan arvata miksi? Mitkä ovat monenlaisia ​​asioita pidät tästä, jos olet käyttänyt sitä tai mitä ovat monenlaisia ​​asioita et pidä? Kyllä. >> [Äänetön opiskelijan vastausta] >> Okei. Se on osa sitä kerroit käyttäjä on kysely, joka on entistä monimuotoisempaa kuin hyvin rajoittava yhden samankaltaisen, "Sinun täytyy valita aloituspäivä "Ja sinun täytyy valita oman päättymispäivää." Itse asiassa se voit olla joustava siitä ja se antaa sinulle kaikki lennot tällä alueella. Mitään muuta? [Opiskelija] Ne sisältävät maksut hintaan. He tekevät ovat maksuja hinnan. Verot ja asiat todellisuudessa menevät suoraan että hinta vasemmassa yläkulmassa joten et huijata luulemaan, että olet itse maksaa 240 dollaria lento kun se on todella 330 dollaria. Mitään muuta? Kyllä. [Äänetön opiskelija vastausta] En ole varma, jos he itse voit tehdä. Saatan olla väärässä. Se voisi olla mielenkiintoista jos haluat laittaa enemmän painoa erityisesti suodattimien niin, että se työntää liittyvät tulokset, että suodatin alkuun. Mutta voiko joku kertoa minulle mikä on niin erikoista tässä vasemmalla puolella? Miten te perinteisesti etsiä lennon Internetissä ennen tämän? 

Kyllä. >> [Äänetön opiskelijan vastausta] >> Voitteko sanoa, että - [Opiskelija] Kukin lentoyhtiö. >> Joo. Kukin lentoyhtiö on omat verkkosivut. Tämä vahvistaa asiaa. Ja? [Opiskelija] Tiedät tarkalleen mihin aikaan olet lähdössä. Et tiedä tarkalleen mihin aikaan olet lähdössä, mutta jotka liittyvät erityisesti suodattimien. Saanen vetää ylös KAYAK. Oi Jumala, pop-ups. Huonon käyttökokemuksen. Mitä tapahtuu kun siirrän tätä liukusäädintä? [Opiskelija] Automaattiset päivitykset. >> [Ong] Automaattiset päivitykset. Se on jotain, joka on hyvin tärkeää. Ennen tätä, aina kun halusi etsiä lennon, sinun piti laittaa syöttää paikkaan, oman tuotannon sijaintiin, paina Etsi- se käsittelee sen ja näyttää tulokset. Jos haluat muuttaa hakua, sinun pitäisi painaa kahdesti, syöttää uuden kyselyn tyhjästä, ja sitten tehdä se uudestaan ​​ja uudestaan. Kiva juttu jotain tästä on se käyttää hyvin [käsittämättömällä] juttu keskellä. Aina, kun teet jotain tällaista, se ampuu pois pyyntö ja se palaa teille kaikki tulokset välittömästi. Tällainen välitön palaute on jotakin, joka sai KAYAK hurjan suosittu koska se on todella helppoa minulle vain muuttaa kyselyä ja selvittää asioita, jotka ovat noin erityinen alue ilman mennä edestakaisin, edestakaisin, edestakaisin. Nämä ovat siis kaikenlaisia ​​asioita haluat ajatella, kun olet suunnitella sivuston. Miten voin tehdä sitä hyvin suorituskykyisenä minun käyttäjille käydä läpi mitä he työskentelevät ja saada heidän Perimmäisenä tavoitteena mahdollisimman nopeasti? [Malan] Ja Joosefin kohtaan aiemmin käyttäjistä ei välttämättä tiedä, mitä he haluavat, perusteella, mitä te nyt tietää HTML ja olet valintaruudut, valintapainikkeet, valitse valikot, syöttökenttien ja vastaavat, Miten toteuttaisit käsite poiminta aloitusaika lennon? 

Mitkä näistä eri UI mekanismien käytät? Jos vain tiedät määrää HTML opetettiin ennen ja tiedät tulot ovat radion painikkeita, valintaruutuja, avattavia ja syötekentästä mitä teidän luonnollinen valinta on poiminta päivämääriä? [Opiskelija] Input. >> Input. Tai ehkä jopa avattavan kaikkien päivämääriä, eikö? Joten monimutkaisempia UI mekanismeja näin vasemmalla puolella, että voit toteuttaa, voit tehdä tämän prosessin paljon enemmän intuitiivinen kanssa liukusäädintä koska aika on jatkuva, ja ihmiset eivät yleensä ajattele sitä kannalta diskreetti paloina. Selvä. Viimeinen asia. Kymmenen käytettävyyden heuristiikkaa. Kaikki asiat puhuimme luultavasti kuulu johonkin näistä luokista. Jos menet tätä linkkiä, joka sivustojen lähetetty verkossa, voit itse pystyä, sillä voit suunnitella sivuston, pitää nämä heuristiikka mielessä ja nämä nyrkkisäännöt. Projekteihin, mitä ehdotan teet voidakseen suunnitella app paremmin on tehdä paperia prototyyppien ensin. Kun olet ajatellut hakemuksesi, nopeasti hahmotella mitä haluat näyttää ja varmista, että kaikki laatikot on järjestetty siten, että se on erittäin intuitiivinen, että käyttäjä käyttää ja jopa näyttää nämä paperille prototyyppejä ystävillesi ja aloita kohderyhmiä. Hommaa 2 tai 3 ihmiset yhteen ja pyytää heitä juuri kosketa näitä paperille prototyyppejä, ja näyttää heille uusia näyttöjä nähdä, jos he todella ymmärtävät, mitä on tekeillä. 

Mitä haluat tehdä, on antaa heille tehtävän, motivoida tähän tehtävään, ja vain antaa heille sovellus ja anna heidän käyttää sitä. Älä anna heille ohjeita pidemmälle. Haluat todella antaa heidän olla vuorovaikutuksessa teidän app niin, että näet kuinka he käyttävät sitä, jos et ole seisoi vieressä. Ja se on erittäin tärkeää. Se antaa sinulle paljon oivalluksia siitä ovat ihmisiä liikkuminen erityisesti asioita siten, että en aio niitä? Ovatko he käyttävät erityisesti UI mekanismeja ruudulla tavalla, joka on eräänlainen hacky? En aio niitä tehdä niin. Ja kun olet tehnyt, että mitä haluat tehdä? Suunnittelua kiviä, eikö? Mitä haluat tehdä on haluat kehittää ja tehdä prosessi uudestaan. Joten näyttää sen ystäville kun olet kehittänyt sitä, testata sitä, kehittää, testata, kehittää, testata, toistaa, ja jatkuu ja eteenpäin. Muotoilu on hyvin iteratiivinen prosessi tässä mielessä. Sinulla on todellakin rakentaa jotain ja sitten ymmärtää asioita siitä että et tiennyt ennen ja mennä takaisin ja parantaa tuosta. Nyt, kuten kehityksen osa, sitähän Tommy on menossa näyttämään tauon jälkeen ja miten voit ehkä toteuttaa jotain autocomplete tavalla, joka on melko yksinkertainen. [Malan] Kuten Tommy perustaa tänne, kysymys sitten. Paljon pian sivustot - ja kun Joosef sanoi 1990 tyyli verkkosivuilla, se oli toteutuksia missä jos halusi valita alkamisaika ja päättymisaika, rehellisesti, takaisin päivän ja jopa joitakin sivustoja tänään, miten teet tämän on nostat tunti avattavasta nostat minuuttia avattavasta, ehkä voit valita AM, PM, ja sitten tehdä vielä 3 kertaa. Ja niin 6 napsautuksia ja ehkä vieritys käyttäjän voi todella tarjota jonkinlaista päivämäärä ja / tai aika-alue tässä mielessä. 

Niin varmasti optimaalinen ja vielä toistaiseksi olemme nähneet mitään ilmeikäs ominaisuuksia jollakin kielellä teimme tehdä jotain seksikkäämpää näin liukusäätimellä alkamisaika ja päättymisaika. Mutta jos luulet takaisin viikon 0, kun puhuimme Scratch, siellä ei ollut widgetit vain teki tiettyjä asioita. Olet todella vain oli nämä perustekijät kuten silmukoita ja edellytykset ja vastaavat. Eli tavallaan vain ajatella hyvin abstraktisti nyt riippumaton tiedot HTML, Mitä todella tapahtuu jotain tällaista alkamisaika ja päättymisaika liukusäädintä? Kun voin siirtää hiirtä ja osoitan, että pieni porkkana symboli vasemmalla ja aloita vetäminen, ohjelmallisesti, mitä sinä haluat pystyä toteuttamaan tehdä tämän tapahtua? Mitä kysymyksiä, mitä Boolen haluat pystyä kysymään? Mitä todella tapahtuu? Sammy? [Opiskelija] Missä kursorin paikan? >> Hyvä. Missä on kursorin paikan? Tämä oli jotain meidän piti ilmaista takaisin Scratch, onko se perustuu sijaintiin tai jopa väri tai vastaava. Saatat muistaa koskaan niin lyhyesti maanantaina oli kaikki nämä asiat nimeltään tapahtumia maailmassa Web, joten siellä on asioita, kuten onclick ja onkeypress ja onkeyup ja onmouseover ja onmouseout. Niin ymmärtää, että vaikka nämä asiat olemme ottaneet itsestäänselvyytenä Webissä kanssa sivustot kuten Facebook ja Gmail, vaikka sinulla ei ole aavistustakaan miten olisi mahdollisesti toteuttaa, että koska ei ole mitään edes pidä sitä luento tai Harjoitus 7, ymmärtää, että juuri nämä samat perusteet, HTTP ja parametrit ja GET ja POST, kanssa HTML tuotantopanosten teimme tähän asti ja hetki ohjelmallisen mekanismit Tommyn ottamassa käyttöön voit alkaa ilmaista itseäsi aivan kuten teit viikolla 0 by hyvin intuitiivisesti vetämällä ja pudottamalla. 

Niin, että sanoi, Tommy MacWilliam ja uusia palapelin palaset meidän Web. Selvä. Nimeni on Tommy ja aion puhua JavaScript. Vain Disclaimer: Olen sitä mieltä, että JavaScript on paras ohjelmointikieli koko koko maailma. On olemassa paljon ihmisiä, jotka ovat eri mieltä kanssani, mutta se on mahtavaa. Kun palaat C, jos sinulla on kirjoittaa C toisen luokan tai joillakin muilla kielillä, se on vain todella turhauttavaa kaikissa matalan tason yksityiskohdat sinun täytyy juuttua tuumaa Joten jos olet joskus surullinen siitä, kuinka ärsyttävää C kirjoittaa, vain mennä takaisin, kirjoittamaan JavaScript. Se on nirvana. Tunnet paljon paremmin about your huono päivä. Paljon taika JavaScript on sen kyky manipuloida asioita jotka ovat jo sivulla. Kun me kirjoitimme PHP-skriptit, he teloitettiin palvelimelle, ja lopulta, että PHP script luultavasti tulostaa joitakin HTML. Tämä HTML lähetettiin asiakkaalle, ja sitten se oli siinä. Jos PHP halusi lisätä painike sivulle, esimerkiksi, ei todellakaan voi tehdä sitä. Se olisi tehdä kokonaan uuden HTML-tiedoston ja lähettää sen selaimelle. JavaScript me tiedämme, että voimme päivittää asioita, kun he ovat jo sivulla, ja tämän vuoksi voimme tarjota paljon enemmän välitöntä palautetta, joka todella parantaa käyttäjäkokemusta sivuillamme. Vain nopea kertaus JavaScript valitsimia. Tiedämme, että kun me ladata HTML-sivu, että tulee olemaan edustettuna DOM. 

DOM muistakaa vain tämä iso puu, jossa elementit liittyvät tässä suuressa hierarkiassa. Kun me työskennelleet tietokantojen PSET 7, yksi ensimmäisiä asioita, joita tarvitaan tietää miten oli kyselyn tietokantaan. Meillä on tämä suuri käyttäjiä pöytä, ja joskus me vain haluamme sanoa, "Haluan vain joitakin näistä käyttäjistä, jotka vastaavat joidenkin kunnossa." Samoin kun meillä DOM tarvitsemme jotenkin istä sitä. Tarvitsemme tapa sanoa, "Haluan kaikki painikkeet, jotka näyttävät tältä "Tai kaikki sivulla olevat kuvat." Ja nämä valitsimet antaa meille mahdollisuuden tehdä niin. Joten nopea kertaus. Tämä ensimmäinen täällä, tämä # esittää, mitä se aikoo valita? Muistaako kukaan? [Äänetön opiskelija vastausta] >> Aivan. Tämä tulee valita elementti sivun on ID lähetä. Ja jotta hash tag sanoo valitsin tulee työskennellä tunnukset. Entä toinen, tämä. Centered, mitä se valita? Joo. >> [Opiskelija] Class. >> Aivan. Tämä on nyt menossa valitse luokittain. Ero ID ja luokka tässä on yleensä tunnus on oltava ainutkertainen sisällä mitä tilaa etsit yli. Joten jos olit etsivät yli koko sivun, sinun todella pitäisi olla vain 1 elementti, että tietyt ID, joten tässä tapauksessa esittää. Oppilasryhmien kanssa, toisaalta, meillä voi olla enemmän kuin 1 elementti samalla sivulla kanssa samaan luokkaan. Tämä voi olla hyödyllistä sanoa haluan valita kaiken, mitä keskittynyt sivulla eikä vain 1 juttu. 

Ja lopuksi, tämä viimeisin täällä on hieman monimutkaisempi, mutta mitä tämä aikoo valita DOM? [Äänetön opiskelija vastausta] >> Mikä tuo on? [Opiskelija] Kaikki se tag. >> Meillä on 2 osaa täällä. Toinen osa on menossa sanoa haluan valita nämä tunnisteet tunnisteen panos, joten kaikki elementin, joka on tulo tag. Mutta en halua vain valita kaikki tulot koska jotain submit-painike voisi syöttää ja jotain tekstikenttään voisi syöttää. Joten nämä hakasulkeilla sanon haluan vain valita niistä jotka ovat tyyppiä tekstiä. Jossain minun HTML tag olen määreen tyyppiä, ja arvo, joka ominaisuus on tekstiä. Joten miten tästä ensimmäisen osan tänne? Ensimmäinen sana Tämän valitsimen on lomake sitten on tilaa ja sitten tämän tulon osasta. Mitä tämä tehdä, mikä muoto sen edessä? Tämä tulee periaatteessa rajoittaa meidän kyselyn. Se voisi olla, että meillä on joitakin tuloja sivulla jotka eivät ole jälkeläisiä muodossa. Mitä tämä tekee tämä sanovat Haluan vain tulo tageja, jotka ovat jossain niiden yläpuolella jotkut vanhemman elementti muodossa. Ja niin tällä tavoin voimme tehdä näitä lisää hierarkkinen kyselyt joten meidän ei vain tarvitse valita kaiken vastaavat tietyn valitsin. Voimme tavallaan rajoittaa tämän kyselyn jotain muuta. Joten nyt me tiedämme, miten valita elementtejä sivulla, Puhutaanpa vähän siitä AJAX. AJAX on edelleen erittäin trendikäs lyhenne, joka tulee sanoista Asynchronous JavaScript ja XML. Se vain on niin, että XML on vain jotenkin edustamaan tietoihin. 

Sellainen menettänyt suosiotaan viime aikoina, joten X AJAX ei käytetä koko ajan. Periaatteessa, mitä AJAX voimme tehdä, on tehdä HTTP-pyyntöjä kontekstista JavaScript. Kun olemme meidän selain ja olemme navigointia sivuilla ja me sitten linkkiä, mitä selainta aikoo tehdä, on HTTP-pyynnön tahansa linkin me sitten. Mutta se ei ole aina ihanteellinen, sillä jos näin on, niin kuin Daavid sanoi, meidän on aina tehtävä käyttäjä napsauttaa Lähetä-painiketta tai napsauttamalla linkkiä jotta jotain tapahtuisi että menee ottamaan HTTP-pyynnön. Joten AJAX voimme tehdä näitä pyyntöjä puolesta JavaScript. Tämä tarkoittaa aina käyttäjän vuorovaikutuksessa sivun tai jotain tapahtuu, voimme itse tehdä ohjelmallista pyynnön jonkin muun PHP tiedosto sivuillamme tai jotain muuta ja hakea tietoja, että tiedosto sylkee. Katsotaanpa katsomaan esimerkki AJAX. Tämä on meidän CS50 Finance sivu joka toivottavasti jotkut meistä ovat tuttuja. Jos katsomme HTML Tämän sivun näemme täällä, että olen lisännyt muutamia asioita, joista olen antanut tämän lomakkeen tunnus. Olen sanonut id = "muoto-lainaus". Olen tehnyt tämän vain koska se tulee tehdä tästä hieman helpompi valita DOM sillä voin vain tehdä hyvin yksinkertainen kysely. Mitä haluan tehdä tässä haluan korjata joitakin ongelmia CS50 Finance. Joten jos menemme finance.cs50.net, aina kun haluan saada lainaan, minun täytyy sitten tätä Get Quote, ja että Get Quote sitten vie minut toiseen koko sivun. Ja jos haluan toisen lainaan, minun täytyy lyödä takaisin-painiketta ja sitten kirjoita se, Saan lainaan, ja osuin Back-painiketta. Tämä ei todellakaan ole paras käyttäjäkokemus. Kuka oikeastaan ​​käyttää sivustoa, jos se on niin hidas saada osakekursseja? Joten mitä me haluamme tehdä AJAX on poistaa se vaihe menossa erilliselle sivulle jotta nähdäksesi tulokset. 

Mitä me oikeastaan ​​vain pyytävät on todella pieni hinta, ja se on vain todella pieni määrä dataa. Joten ei tarvitse minun mennä toiseen koko HTML-sivun lataa kokonaan uuden erän HTML, ehkä ladata joitakin kuvia, joitakin muita CSS-tiedostoja vain minun vastata tähän hyvin yksinkertaiseen kysymykseen kuinka paljon tämä varastossa kustannukset. AJAX voimme tehdä tästä paljon helpompaa. Näemme täällä, että olen linkittämisen JavaScript-tiedoston nimeltä quote.js. Katsotaanpa todella avata tiedoston. Ei sinne. Kaikki minun JavaScript-tiedostot aiotaan sijaitsevat HTML jotta selain voi käyttää sitä. Sitten meillä on erillinen hakemisto täällä JavaScript, ja nyt on quote.js. Ylimpänä tämän tiedoston tämä sanoo, että haluan odottaa koko sivu voidaan ladata ennen Yritän tehdä mitään. Miksi se välttämätöntä? On käynyt ilmi, että seuraava asia aion tehdä tässä alkaa etsiä elementti joka vastaa joidenkin valitsin. Jos tämä JavaScript on koskaan tehty ennen tämän elementti on ladattu sivulle, Sitten kaiken yritän tehdä ei tule toimimaan koska aion yrittää valita jotain, joka ei ole siellä vielä. Joten tämä rivi ylös sanoo Haluan odottaa kunnes kaikki on ladattu joten olemme taata, että kaikki elementit Etsin todella sivulla. Tämä dollarimerkki tarkoittaa tässä Käytän kirjastoa nimeltään jQuery. Tämä jQuery kirjastoa ansiosta voimme käyttää näitä valitsimia että me vain katsoin. Sanomalla $ sitten kulkee niin argumentti tämä # form-lainaus, Olen nyt valita, että muoto, että me vain vei katsomaan. Nyt minulla on edustus kyseisessä muodossa muistiin jotenkin. 

Tämän objektin nyt, tämä esitys muodossa, Olen nyt käyttää toimintoa kehotti. Mitä tämä toiminto ei se aikoo liittää tapahtumakäsittelijän. Jos aiomme kuunnella on submit tapahtuma. Joten kun käyttäjä napsauttaa että Lähetä-painiketta tai painaa Enter, Tämä tapahtuma on menossa ampumaan. Koukkaaminen tähän, voin nyt ohittaa oletusarvoisesti muotoa. Ilman tätä JavaScript, muoto olisi toimitettava tahansa PHP-tiedoston käytimme että toiminta määrite. Mutta sen sijaan, olen nyt sanoa, odota, odota, odota, en halua sinun todella tehdä. Haluan tämän tapahtuvan ennen lähtöä, ja yrittää esittää joitakin PHP-tiedosto. Nyt mitä haluan tehdä? Tässä vaiheessa haluan käyttää AJAX jotenkin ladata missä hinta varastossa on. Ensimmäinen asia minun täytyy tietää mitä varastossa käyttäjä etsii. Voit tehdä, että aion käyttää toista valitsin. Tämä on kolmas valitsin tarkastelimme ennen. Tämä sanoo, että haluan aloittaa tämän lomakkeen elementin ID muodon-lainaus. Sitten jossain sisällä, jotka muodostavat siellä on oltava syöttöosassa että on nimi symbolin. Jos katsomme taaksepäin meidän HTML, näimme, että meillä oli input [name = symbol]. Tämä tarkoittaa, että tämä tulee valita, että tekstikehys että käyttäjä on kirjoittaa osaksi. Se on mukavaa. Meillä tekstikenttään. Nyt meidän täytyy vain tietää mitä sen sisälle. Voit tehdä, että me voimme kutsua tätä menetelmää täällä, tässä. Val- ja tämä sanoo tiedän mitä tekstikenttään olet. Haluan sinun kertovan minulle, mitä se on käyttäjä kirjoittaa tuohon tekstikenttään. Nyt meillä on merkkijono kutsutaan symboli, joka on yhtä suuri riippumatta käyttäjä kirjoittaa sisään Se on mukavaa. Voimme käyttää merkkijonon nyt tekevät pyynnöstä. Tämä on uusi toiminto, tällä $, paitsi me enää olemaan valittaessa elementtejä, aiomme olla kutsumassa eri funktio, joka on toimitettu meille jQuery. Tämä AJAX toiminto on mitä todella aikoo tehdä tämän HTTP-pyyntöön. Joten meidän on sanottava niin muutamia asioita. Ensimmäinen asia, joka meidän täytyy kertoa tämä toiminto on, jos haluan pyynnön mennä. Jossain projektin olen tämän tiedoston sisällä HTML hakemistoon quote.php. Voin käyttää tätä tiedostoa, näimme, aivan kuten tämä, jos menen localhost / quote.php. 

Haluan JavaScript esittää pyynnön, että sivulle. Millaista pyynnön nyt? Näimme ennen lomakkeen on, että menetelmä = "post"-määrite, ja se tarkoittaa sitä tulee tehdä POST pyynnön, joten se ei tule laittaa mitään URL, eikä GET-pyyntöä, joka olisi vain potkut, jos me vain pääsee sivulle selaimen, esimerkiksi. Nyt olemme sanoneet Haluan tehdä HTTP POST pyyntö sivulle, joka sijaitsee quote.php. Kun lähetät lomakkeen, muista voisimme käyttää tulo Sisällä tämän lomakkeen kanssa, että $ _POST muuttuja. Toistaiseksi tarina emme ole lähettänyt pitkin mitään tietoja vielä. Olemme juuri sanoi Teemme AJAX pyyntö ja tässä on pyynnön tyyppi Teemme. Nyt meidän on todella lähettää joitakin tietoja sivulle. Voit tehdä, että voimme käyttää tätä ominaisuutta kutsutaan tietoja. Tämän ominaisuuden arvo on todella assosiatiivinen array. Syynä tähän on se antaa meille mahdollisuuden lähettää enemmän kuin vain 1 datalohko. Siksi meillä on nämä aaltosulkeita täällä sisäkkäin näistä muista aaltosulkeita. Avaimet näitä assosiatiiviset taulukot tulevat olemaan sama asia kuin nimi määritteitä meidän lomake-elementtejä. Tämä tarkoittaa, että jos lähetän pitkin keskeinen symboli, Tämä tarkoittaa minun PHP-sivu voi käyttää näitä tietoja $ _POST [symbol] aivan kuten teimme ennen kun olimme lähettämällä lomake. Ja nyt varsinainen data haluamme lähettää tulee olemaan arvo sisäosat assosiatiivisia array. 

Me varastoidaan tätä tekstiä muuttuja nimeltä symboli, ja niin me lähetämme pitkin nyt avain symboli ja arvo riippumatta käyttäjän kirjoitettu sisään Nyt olemme tehneet tämän HTTP-pyyntö, meidän PHP tiedosto on suoritettu, ja se tulee lähettää joitakin tietoja takaisin nyt asiakkaalle että juuri teki tämän pyynnön. Nyt meidän täytyy vastata mitä palvelimelle sanoi meille. Voit tehdä, että meillä on tämä viimeinen omaisuuden täällä kutsutaan menestystä. Arvo Menestyksen avain on todellakin olemaan funktio, ja tämä on yksi todella hienoja asioita voit tehdä JavaScript. Ei vain voit olla ints tai taulukoita arvona sisällä assosiatiivisia array, voimme myös olla toiminto. Joten sanomalla menestys, tämä on minun avain. Kaksoispiste sanoo tässä tulee arvo ja nyt arvo on itse asiassa funktio. Joten meidän ei tarvitse antaa tämän toiminnon nimi sinänsä. Voimme vain sanoa tämä tulee olemaan jokin funktio. Se tulee ottaa 1 väitettä. Argumentti tämä toiminto tulee olemaan mitä palvelin lähetti meidät takaisin pyynnön. Aivan kuten kun meidän selain tekee pyynnön, palvelin lähettää jotain takaisin ja selain näyttää sen, yhteydessä AJAX me vain teki pyynnön, palvelin lähetti jotain takaisin, ja nyt olemme, että edustettuina merkkijono. Kanssa, että merkkijono haluan näyttää, että sivulla. Voit tehdä, että aion olla viimeinen valitsin. Haluan valita elementti tunnus hintaan. Tämä on vain tyhjä div, että olen luonut sivun, ja haluan asettaa sisällön jotka div olla mitä palvelin lähetti meidät takaisin. Olen oikeastaan ​​muutettu quote.php hieman. 

Sen sijaan kutsuvan render ja tekee jonkin sivun, quote.php nyt yksinkertaisesti menossa tulostaa arvon kalustoon merkkijono. Joten jos olit todella käydä sivulla, voit vain nähdä, että pienet merkkijono riippumatta osakekurssi on. Viimeinen asia, meidän täytyy tehdä tässä vain varmista tämä funktio palauttaa false. Mitä tämä kertoo, että jos olen sisällä tapahtumakäsittelijän ja että tapahtumakäsittely palauttaa false sijaan palata totta, tämä tarkoittaa, että en halua alkuperäisen tapahtuman tuleen. Tässä tapauksessa, jos meillä ei ole JavaScript ja esitimme muodossa, Web-selain on menossa sanoa, "Minä aion lähettää että tiedot yhdessä" ja he aikovat lähettää sinut toiselle sivulle. Koska me AJAX nyt ei tarvitse lähettää käyttäjän toiselle sivulle. Olemme juuri menossa näyttämään tulokset dynaamisesti tällä samalla sivulla. Emme todellakaan halua niitä lähteä minnekään, ja haluan pysyä samalla sivulla. Joten palauttamalla vääriä, voimme varmistaa, että lomake ei tee sitä meille. Katsotaanpa katsomaan mitä tämä todella näyttää. Meidän quote sivu näyttää samalta. Saanen vedä tarkastaja täällä, jotta voimme nähdä, mitä on tekeillä. Tee se hieman vähemmän valtava. Muista, jos avaamme Verkko-välilehti, tämä on jossa voimme nähdä kaikki HTTP-pyyntöjä joita tapahtuu sivulla. 

Saat tunnuksen haluan kirjoittaa AAPL ja napsauta Hae Quote. Nyt näimme, että osa Apple maksaa noin monta dollaria Juuri ilmestynyt sivulla, mutta URL ei muutu lainkaan. Itse asiassa tässä on HTTP-pyynnön, että me juuri tehty. Teimme POST pyynnön quote.php. Siinä on järkeä. Tämä on mitä palvelin lähetti meidät takaisin. Se ei ole enää tätä valtavaa HTML dokumentti kuvineen ja tuollaista, se on vain rivi tekstiä, ja sitten me vain näkyy rivi tekstiä. Jos menemme takaisin otsikot ja mitä me oikeastaan ​​lähetti sisäosat HTTP-pyynnön, voimme nähdä, alas, että me lähetetään pitkin avaimen symboli ja arvo AAPL, joka on mitä käyttäjä kirjoittaa sisään Tämä on mukavaa, mutta se on silti vähän harmittaa. Olen vielä napsauttaa tätä painiketta saat osakenoteeraus. Olemme kiireisiä ihmisiä ja meillä ei ole aikaa napsauttaa painikkeita. Google ymmärsi tämän vähän aikaa sitten, kun ne toteutetaan Google Instant. Mitä Google Instant ei on kuin kirjoitat se vain alkaa näyttämään tulokset sinulle joten sinun ei tarvitse huolehtia edes klikkaamalla Hae. Oikeastaan ​​hauska tarina liittyy siihen. Kun Google Instant tuli ulos, ihmiset olivat kuin, "Vau, tämä on super hämmästyttävä." "Tämä on niin siistiä." Ja opiskelija alas Stanford, joka oli 19 tuolloin teki tämän sivuston nimeltä YouTube Instant. Kaikki YouTube Instant ei tosiasiallisesti etsiä YouTube hetkessä. Joten sen sijaan mennä YouTube.com ja lyödä Search, kun alkaa kirjoittaa YouTubeen Instant jotain CS50, voisimme nähdä täällä, että se yrittää on hidas internet-yhteys asuttaa näitä tuloksia elää. Voit tehdä, että voimme itse tehdä hyvin yksinkertainen muutos meidän quote.js tiedostoon. Juuri nyt me liittää tähän tapahtumaan kun lomake lähetetään. Emme todellakaan halua tehdä käyttäjälle väittävät lomake enää, joten katsotaanpa sen sijaan ampua tämän tapahtuman aina käyttäjä painaa näppäintä. Voit tehdä sen Katsotaanpa ensin muuttaa tapahtuman esittää keyup. Tämä tarkoittaa, että sen sijaan odottaa lomakkeen esittämään joka kerta näppäintä painetaan, jotain tulee tapahtumaan. Se ei ole enää järkevää liittää nämä keyup tapahtuman koko lomakkeen. Meillä oikeastaan ​​vain välitä siitä hakukenttään. 

Voit valita, että nyt voimme muuttaa tämän olevan pikemminkin kuin muoto-lainaus, muoto-lainaan ja saamme tulo (type = text) tai voimme sanoa (nimi = symboli) - mitä me haluamme. Nyt on olemassa yksi asia meidän on tehtävä. Muista tänne kun sanoimme palauttaa false sanoimme emme halua, että maksukyvyttömyyden tuleen. Mutta se vain niin, että jos me poistaa nyt, mitä me kirjoittaa aio näy selaimessa enää koska se olisi oletustoimintaa kirjoittamalla osaksi tekstikenttään. Emme enää halua ohittaa, että niin katsotaanpa tuhota tätä paluuta väärä. Jos me paitsi että ja lataa sivu, nyt kun alat kirjoittaa AAPL näet, että osakekurssi alareunassa täällä loppuun automaattisesti. Joten tässä on CS50 Finance Instant. Oikeastaan ​​hauska tarina YouTube Instant on, että opiskelija juuri sellainen kirjoitti sen 1-yön projekti, ja seuraavana päivänä hän tarjosi työpaikka YouTube toimitusjohtaja. Niin yksinkertaista, te CS50 opiskelijoita, lopullinen hankkeet voivat saada sinut työtä YouTube. Jotain sellaista on todella viileä idea opinnäytetyön, eikö? Meillä oli joitakin nykyisiä toimintoja, että halusimme integroida. Parannamme käyttäjäkokemusta hieman, ja yhtäkkiä etsivät jotain YouTubessa Instant voisi olla paljon helpompaa kuin etsiä sitä säännöllisesti YouTube. Niin, että AJAX pähkinänkuoressa. 

Esimerkeissä että Joseph oli osoittaa, näimme paljon autocompletes, ja nuo autocompletes ovat todella kätevä, koska meidän ei tarvitse muistaa - Esimerkiksi, jos et muista osakekurssi Apple ja me vain tiedämme sen AA jotain, eikä vain sanoa minulle, "Osuus tästä juttu maksaa näin paljon rahaa" Olin tavallaan tietää mitä varastoja aloittaa aa. Voimme tehdä sen todella hienosti Bootstrap kirjasto, joka on jo sisällytetty sisällä CS50 Finance. Jos tulet tänne JavaScript tag ja selaa Typeahead, tämä on vain mukava plugin että joku jo kirjoitti meille, ja voimme helposti käyttää toimintoja tällä tavoin. Olen kirjoittanut ja tässä on luettelo joistakin todetaan alkavat A. Sanotaan, että tämä on mielestäni todella cool ja se on aika minun sisällyttää tämä sivuni. On käynyt ilmi, että tämä on todella, todella yksinkertaista. Mennään hypätä tänne quote3.js. My tiedosto näyttää hieman erilainen. Tänne kaikki minun AJAX kamaa on sama. Haluan ladata kantatietojen ilman mennä toiselle sivulle. Mutta nyt haluan käyttää tätä plugin. Bootstrap dokumentaatio on hyviä esimerkkejä siitä, miten tarkalleen voin tehdä sen. Haluan sanoa, "Tässä on tulon että haluan autocomplete päällä" ja aion kutsua tätä toimintoa kutsutaan typeahead, ja että menee hoitaa kaikki Typeahead tavaraa meille. Se alustaa listan, se tekee kaiken meidän suodatus. Ainoa asia, se täytyy tietää, mitä tietoja olemme autocompleting päälle. Löysin tätä näppäintä vain lukemalla asiakirjat ja katsot esimerkkejä. Jos annan sen avaimen lähteen, tämän avaimen arvo on vain muutamia erilaisia ​​asioita haluan autocomplete päälle. Tämä muuttuja tuli tästä muu tiedosto. En avaa symbols.js. 

Tämä symbols.js on vain tämä todella, todella iso joukko sisältävät merkkijonot Kaikkien näiden varastossa symboleja NASDAQ. Jos haluan hypätä takaisin HTML, joten jharvard, vhosts, globalhost, html, malleja, quote_form. Koska tämä on nyt nimeltään quote3.js, haluan muuttaa JavaScript-tiedosto Olen myös täällä. Nyt minulla on quote3.js, joten aion ladata että erillisessä JavaScript-tiedoston, joka on joka Bootstrap autocomplete. Nyt kun hypätä takaisin selaimen, lataa sivun, ja aloitan kirjoittamalla aa, siellä minun autocomplete. Ja se oli todella niin yksinkertaista. Minulla oli 1 rivi koodia, joka juuri sanoi, "Tässä on asioita haluan autocomplete päällä" ja yhtäkkiä olen tästä todella, todella mukava toiminnallisuus ei paljon vaivaa ollenkaan. Kuten olet kehittää sivustoja ja varsinkin etupään puolta, olet menossa löytää näin on paljon. On paljon, paljon, paljon todella hienoja vapaata kirjastojen siellä joiden avulla on erittäin helppoa tehdä asioita, kuten tämä. Voiko kukaan ajatella mitään haittoja yksinkertaisesti autocompleting tässä suuri lista symbolit? Mikä voisi olla jotain, joka ei ole paras tätä lähestymistapaa? Joo. >> [Opiskelija] aika, jos sinulla on paljon [kuulumattomissa] Joo. Juuri nyt olemme lataat tämän valtavan JavaScript-tiedoston, ja siellä on paljon symboleja. Ja niin, jos meillä on tonneittain tavaraa, tämä voisi tavallaan lisätä latenssi paitsi hakuja mutta myös ladata tiedoston todellinen. Suuri. Mitään muuta? Juuri nyt ei ole mitään todellista merkitystä. Jos minä kirjoita, yritykset näkyvät täällä ehkä ole kaikkein suosituin yritykset alkavat A. 

Ennen saan Applen, se voi kestää joitakin merkkejä löytää mitä etsin. Tämä automaattinen täydennys ei ole tässä mielessä merkitystä. Se juuri menossa sanoa, "Kaikki mikä vastaa aion näyttää." Sen sijaan, että haluaisin jotenkin yhdistää jotain merkitystä minun hakuja. Jos menen tänne Yahoo! Finance, finance.yahoo.com, Jos yritän tulla symboli Yahoo! Finance sivulla ja olen aloittanut kirjoittamisen goog, minulla on mukava lista asioista. On selvää, se näyttää Yahoo! Finance tekee jotain fiksu täällä. Heillä on jotain merkitystä, ja niillä on myös lisätietoja kuten nimi varastosta. Se on jotain, en voi oikeastaan ​​saada vain minun varastossa luettelo symboleista. Haluan tämän, ja niin aion tehdä sen. Voit tehdä sen Tehdään muutamia asioita. Katsotaanpa ensin avata tarkastaja tällä sivulla koska näimme, että tämä sivu ei uudelleenlastausta ollenkaan, joten se on luultavasti AJAX jotenkin latautuu sen tiedot. Voimme selvittää, mitä tietoja se latautuu. Jos minä klikkaa tästä Network välilehden nämä tulevat olemaan kaikki pyynnöt, jotka alkavat tulla potkut. Nyt jos kirjoitat Goo, voimme nähdä, että Sain uuden HTTP-pyyntö. Tämä on luultavasti kun tämä tieto on peräisin. Tosiaan, jos katson tätä URL, joka on vähän oudosti nimetty, Voimme nähdä, että juuri tässä Yahoo lähettää pois sen tietoja. 

Olen luonut erillinen tiedosto nimeltä suggest.php joka on hyvin samanlainen henki lookup toiminto. Se on pohjimmiltaan aikoo tehdä kyselyn Yahoo URL, saada takaisin joitakin tietoja, ja lähettää sen takaisin minulle. Nyt sen sijaan käyttävät tätä iso, valtava luettelo symboleja, Voin käyttää Yahoo kiva merkitystä asioita, enkä tarvitse ladata, että massiivinen JavaScript-tiedosto. Olen vain menossa kaatamaan itse asiaa osakesymboleja. Mennään hypätä tuohon. Joten html, js. Olemme nyt quote4. Nyt emme enää käyttää, että iso lista JavaScript-tiedostot. Mutta on pieni eräänlainen suunnittelun ongelma. Olemme sanoneet, että AJAX on asynkroninen. Tämä tarkoittaa, että kun teen AJAX pyynnöstä joten täällä on line 8, tämä on silloin minun AJAX pyyntö on todella ammuttu. Sanotaan nyt minulla on joitakin koodi tänne joka aikoo tehdä joitakin juttuja kuten ilmoittaa käyttäjälle tai muuttaa jotain sivulla. Mitä ei tule tapahtumaan on selain ei aio odottaa tätä pyyntöä jatkaa ennen tulossa alas ja lyödä tätä linjaa. Se asynkroninen osa. Se tulee tekemään tähän pyyntöön, ja sanovat: "Aina olet valmis, "Tulkaa takaisin ja soita, jotka toimivat joka Käskin soittaa sisällä menestystä." Tämä tarkoittaa, ettemme voi vain ladata kaikki varastot etukäteen. Meidän täytyy tehdä pyynnön ja odottaa jotain palata. Tämä tarkoittaa, että ennen, voisimme yksinkertaisesti sanoa Bootstrap, "Tässä lista asioista haluan sinun AutoComplete päälle." Emme voi enää tehdä niin enää, koska emme tiedä mitä haluamme todella autocomplete päälle. Onneksi Bootstrap ajatellut tätä, koska ne ovat älykkäitä kaverit siellä, ja he todella antoi meille uuden tavan ladata tähän Typeahead plugin. Ennen arvo tämän lähteen kiinteistö oli juuri tämä iso joukko asioita autocomplete päälle. 

Nyt lähde ominaisuus on itse asiassa funktio, ja tässä tehtävänä on selvittää, mitä asioita AutoComplete päällä ovat. Miten se tulee selvittää, että ulos on se aio kysyä Yahoo! Finance Mikä parasta asioita autocomplete ovat. Voit tehdä, että aion tehdä hyvin samankaltainen AJAX pyynnöstä. Aion pyytää tämän sivun osoitteessa suggest.php. Haluan lähettää pitkin symbolien. Ja nyt minun menestys, Bootstrap asiakirjat kertoi että jotta asuttamaan että luettelo asioista, kaikki minun täytyy tehdä on siirtää tässä array nyt on takaisinkutsufunktio. Mutta hetkinen. Jos tämä on tarkoitus olla jono ja AJAX lähettää minut takaisin tekstiin, Miten se on mahdollista? Tämä tuo uusi tapa vaihtaa tietoja kutsutaan JSON. Tässä tapauksessa emme ole vain lähettää takaisin yksinkertainen merkkijono. Nyt olemme tekemisissä tämän monimutkaisempi lista osakesymboleja. Nämä osakesymboleja voivat myös sisältää asioita, kuten yrityksen nimi tai nykyiset hinnat. Vain käyttämällä iso pitkä merkkijono, joka ei ole alustettu millään ennakoidulla tavalla ei tule olemaan paras tapa saada tämä tieto Yahoo palvelimelta minulle siten, että voin helposti ymmärtää. JSON on tekniikka, joka hyödyntää miten luomme assosiatiiviset taulukot JavaScript. Tämä muistuttaa paljon JavaScript assosiatiivisia array, ja itse asiassa, se on koska se on. JSON sanoista JavaScript Object Notation. Tämä on pohjimmiltaan sovittu muoto siirtää tietoja edestakaisin. Täällä tämä JSON esine tai tämän JSON assosiatiivisia array lähettää minulle tietoja kurssin. 

Avaimet Tämän array ovat asioita, kuten tietenkin, että arvo on cs50, ja täällä voimme nähdä, että voin olla arvo on matriisi. Minun ei tarvitse tehdä asioita, kuten jäsentää jousille ja etsiä pilkkuja ja tehdä hulluja asioita. Koska tämä on ilmoitettu tässä JSON-muodossa, JavaScript ja jQuery jo toimintoja muuntaa merkkijonon joka näyttää tältä JSON tulee todellinen JavaScript assosiatiivinen array että voimme työskennellä. Doing että on niin yksinkertainen kuin sanomalla, että ei ole enää tämän tiedoston, suggest.php, lähetä minua takaisin vain merkkijono, mutta tiedän, että se aikoo lähettää minut takaisin JSON. Tämä tarkoittaa sitä, että JSON voidaan muuntaa JavaScript-assosiatiivisia array. Ja niin jQuery, haluan sinun tekevän sen minulle. Tämä tarkoittaa sitä, että tämä vaste parametri tässä, Tämä ei ole enää pelkkä merkkijono. Koska olemme kertoneet jQuery että tässä tulee joitakin JSON, jQuery tulee olemaan fiksu sanoa, "Halusit JSON?" "Aion muuttaa sen osaksi assosiatiivisia array sinulle." Mennään itse katsomaan Verkko-välilehdessä kerran meillä quote4.js. Me muuttaa ja lataa sivu. Nyt aion kirjoittaa-taas. Olen tehnyt pari pyyntöjä suggest.php, mutta nyt tämä vastaus, eikä vain merkkijono, se JSON. Joten olen avoin kihara ahdin sanomalla, "Täältä tulee assosiatiivinen array." 

Ensimmäinen ja ainoa avain tämän assosiatiivisia array kutsutaan symboleja, ja sitten tässä on joukko kaikki asianmukaiset varoitusmerkit tulevat nyt Yahoo! Finance, eikä se jättimäinen luettelosta. Näin voin helposti asuttaa tätä autocomplete plugin joitakin tietoja, ei ole lähtöisin paikallisen tiedoston, joka on jo ennalta vaan jotain muuta. On käynyt ilmi, että voimme todella hyödyntää tekniikkaa kutsutaan JSONP, tai JSON pehmuste, joka poistaa tämän suggest.php välikäsi. Mutta sen sijaan tehdä, että mennään vaan katsomaan miten voin parantaa entisestään. Pidän todella Bootstrap n Typeahead. Se on todella mukavaa. Mutta me lähdemme hyviä JavaScript ja haluamme sellaista tehdä tämän itse, ehkä katsomaan mitä tämä plugin voisi tehdä. Katsotaanpa enää käyttää kyseistä Typeahead juttu, ja yritetään tehdä tämän luettelon suositelluista varastot itseämme. Täällä quote6.php aiomme aloittaa samalla tavalla. Joka kerta, kun joku tyypit jotain, haluamme tehdä AJAX pyyntö. Tämä on samanlainen kuin meidän alkuperäinen CS50 Finance Instant. Sen sijaan, että pyyntö quote.php, olemme nyt tekemässä pyyntöä samaan tiedostoon kuin ennen, tämä suggest.php, joka on juuri menossa vetämään tietoja Yahoo! Finance. 

Jälleen olemme yhä odottaa JSON, mutta nyt sillä Typeahead ei tee tätä meille, meidän on myös lähetettävä pitkin arvo on sisällä nykyisen tekstikenttään. Nyt tiedämme mitä kysyä Yahoo! Finance, joten nyt on toiminto, että haluamme toteuttaa, kun pyyntö on valmis. Meillä ei ole plugin tehdä listan meille, joten tässä missä olemme todella menossa rakentaa listan ehdotuksia. Voit tehdä, että mielelläni PHP me ketjuttaa nämä isot jouset HTML sitten tulostaa ne, voimme tehdä täsmälleen sama asia JavaScript. Ensin aiomme aloittaa tämä merkkijono kutsutaan ehdotuksia, ja tämä merkkijono on juuri menossa sisältää joitakin HTML. Haluamme sen olevan luettelon asioista, joten aiomme aloittaa tämän luettelon tunniste, ja nyt aiomme toistaa yli kaikkien symbolien palautettiin takaisin meille. Muista, että olemme sanoneet tietotyyppi: "JSON", tämä ei ole merkkijono. Tämä on jo array meille. Se on todella siistiä. Voimme yksinkertaisesti sanoa, "Haluan sinun liittää listan elementti." Laitamme sen sisällä osa puoli, että annamme sen luokan ehdotuksia joten tiedämme, mitä se on, ja nyt on symboli, että saimme takaisin Yahoo! Finance. 

Kun olemme luoneet osa kunkin symbolien olemme saaneet takaisin, haluamme vain sulkea pois luettelosta. Joten nyt ehdotuksia edustaa tätä pikku HTML fragmentti että kun laittaa sivun tulee olemaan lista asioita etsimme. Nyt todella laittaa että sivulla. Voit tehdä, että olen oikeastaan ​​luonut toinen tyhjä div ja olen antanut sen ID ehdotuksia. Aivan kuten asetamme sisällön div joka näyttää hinta kantatiedot, nyt vain halua asettaa sisältö div mitä tämä merkkijono on joka sisältää nämä symbolit. Käyttämällä tätä HTML menetelmää, tätä ehdotuksia muuttuja, tämä merkkijono on merkkijono HTML. Haluan ottaa että HTML ja laita se sisällä div nimeltään ehdotuksia. Olemme vain liitetään jotain DOM nyt. Olemme lisänneet joitakin uusia elementtejä DOM että voimme nyt näyttää sivulla. Katsotaan mitä tämä näyttää. Jos me latautuu quote6 ja nyt palaamme, nyt kun olen aloittanut kirjoittamisen AAPL, meillä ei enää ole, että Bootstrap autocomplete, mutta meillä on nyt tämä lista, teimme itse. Tämä on hieman rumempi kuin Bootstrap Typeahead, esimerkiksi mutta se antaa meille mahdollisuuden tehdä yksi asia. Kun olimme katsot että Bootstrap plugin, näimme, että kun me autocompleted, yksi AutoComplete arvoista oli AAPL. Se ei ehkä ole niin hyödyllistä. Koska käyttäjä, en ehkä heti tunnista kaikkia osakesymboleja. Mitä olen luultavasti todennäköisemmin tunnistaa ovat yrityksen todelliset nimet. Joten eikö olisi todella hyödyllistä, jos mieluummin kuin sanomalla AAPL Tämä sanoi jotain Apple Inc. Koska olemme valssatut tätä itsellemme, voimme todella helposti tehdä. Katsotaanpa avaamaan viimeinen quote tiedosto täällä, niin quote7. 

Sama juttu. Olen juuri luonut toinen PHP-tiedosto, joka palaa meille enemmän kuin vain symboleja. Se myös antaa meille takaisin yhtiön nimet. Ja niin me teemme samoin. Teemme AJAX pyynnön. Kun pyyntö on valmis, me aiomme suorittaa tämän toiminnon täällä, ja tämä toiminto on menossa rakentaa iso merkkijono elementtejä. Mutta ero on, että arvo näiden luetteloiden ei enää ole vain symboli, se on nyt nimi. Joten meillä on yksi pieni ongelma. Kun käytämme lookup, meidän täytyy jotenkin siirtää sen symboli. Emme voi siirtää lookup jotain Microsoft Corporation. Meidän siirtää sitä MSFT. Kun kirjoitat HTML, meillä on paljon mukavia sisäänrakennettu ominaisuuksia. Saattanut liittyä se href tai luokka. Mutta mitä me todella tarvitsemme nyt jokaisen näistä linkeistä olla osakesymboli liittyy siihen. Ei ole sisäänrakennettu HTML määritteen osakesymboli, mutta onneksi, HTML5 antaa meille mahdollisuuden luoda omia määritteitä olla mitä haluamme. Sanomalla data-symboli, olen otettu käyttöön uusi attribuutti jonka nimeä en juuri koostuu, ja tämä on ok, koska olen edeltää sitä tämän tiedon. Aiomme säilyttää sisällä siellä symboli varastosta nyt. Tämä tarkoittaa, että vaikka me näytetään arvo yhtiön nimi sisällä meidän autocomplete, olemme silti muistaa symboli , joka liittyy kunkin yrityksen. Miten teemme, että on sisällä tämän elementin itse. Joten se tarkoittaa, että meidän täytyy tehdä vielä yksi muutos. Kun me sitten nyt, meidän täytyy todellakin hyödyntää symbolin ominaisuuden eikä vain sen arvo. Jos me back up, pidämme tapahtumakäsittely ehdotuksiin. Kun yksi näistä ehdotuksista napsautetaan nyt, haluan tehdä jotain. Mitä haluan tehdä, on muuttaa arvoa, joka kenttään. Nyt haluan asettaa tämän saman val toimintoa. 

Joten ilman argumentteja tätä Val-funktio palauttaa sinulle mitä jo tekstikenttään mutta jos annat sille merkkijono, se tulee ottaa merkkijonon ja laita se tekstikenttään. Olen valinnut sen tekstikenttään samalla tavalla. Se nimi on symboli sisällä muodon-lainaus. Nyt olen lähettämistä arvo attribuutin data-symboli. Tämä juttu tässä on uusi, tämä $ (tämä). Mitä tämä tarkoittaa on elementti, joka on napsautettu. Voimme nähdä, että me emme liittämällä napsautuksen kullekin elementille, jossa on luokan ehdotus erikseen. Pikemminkin olemme lähestymässä tätä hieman eri. Sen sijaan sanomme aina jotain sisäosat ehdotuksia div, joka muistaa vain säiliö luetteloon, jos jotain sisällä tämän div napsautetaan ja se on luokan ehdotus, Haluan tämän tapahtuman tuleen. Periaatteessa mitä tämä tarkoittaa, että voimme tehdä on, voimme uudelleen saman tapahtumakäsittelijää kaikkien asioiden luettelossa. Joten meillä ei tarvitse olla yhden tapahtuman käsittelijä ensimmäinen osa ja eri tapahtumakäsittely toisen elementin. Voimme sen sijaan sanoa, "Haluan samaa tapahtumakäsittely sovelletaan kaikkeen listallani." Mutta meidän täytyy jotenkin tietää, mikä osa on napsautettu. Tämä "tämä" avainsanan edustaa juuri sitä. Tämä on esine, joka oli juuri napsautettu käyttäjä. Jos minä vain napsauttaa 3. linkkiä, tämä on osa tätä kolmas lenkki, mikä tarkoittaa, että saan sen attribuutti, data-symboli, jonka tiedämme on sisällettävä symboli, joka on liitetty yhtiön juuri napsautetaan. Jos me hypätä takaisin meidän Finance, voimme nähdä nyt, että kun olen aloittanut kirjoittamisen jotain MSFT, emme enää saada vain osakesymboleja, olemme nyt saada todellista yritystä. Mutta kun klikkaa jotakin näistä yrityksistä, Voimme nähdä, että olemme todella asuttavat tekstikenttään eikä yrityksen nimi mutta mitä oli varastoitu sisällä näiden tietojen ominaisuuksia. Ja niin jos olen itse tarkastaa näistä tekijöistä oikealla klikkaamalla sitä ja valitsemalla Tarkasta Element, voimme itse nähdä mitä tämä näyttää. 

Muista tämä on jotain, että olemme luoneet sisällä että silmukka kun olimme rakentamassa merkkijonon HTML. Voimme nähdä tässä, että tämä tieto-symboli on arvo MSFT, mikä on hienoa. Sitähän me odotimme. Tuo merkki ja näin saimme arvon että meidän piti käyttää sisällä tähän tekstiruutuun. Se riittää quote muoto, koska se on tavallaan tylsää. Toivotaan vain tehdä joitakin nopeita parannuksia meidän salkun sivulle. Jos olet käyttänyt CS50 Finance jonkin aikaa ja aloitat ostaa ja myydä paljon varastoja, Lopulta tämä taulukko on menossa aika iso, ja olet menossa halua pörssikursseja, tietenkin. Kun pöytä on todella suuri, se voisi olla hyödyllistä, että käyttäjä yrittää etsiä sen yli. Sisällä hakukentän jos aloitan kirjoittaa jotain Disney ja etsivät minun Mikki Hiiri varastossa, voimme nähdä, että taulukko on nyt suodatus perusteella, mitä olen juuri kirjoittanut tuumaa Tämä toiminto näyttää erittäin monimutkainen, mutta se on todella, todella helppoa kanssa jQuery ja JavaScript. Tämä portfolio.php tiedosto sisältää JavaScript-tiedoston nimeltä portfolio.js. Katsotaanpa katsomaan sitä. Joten html, js, portfolio. Tässä jos me teemme, että haku pöydällä. Ensimmäinen asia mitä tarvitsee tehdä on liittää tapahtumakäsittely tähän tekstikenttään sillä me tiedämme, että me haluamme suodatustoiminto tuleen joka kerta, kun käyttäjä painaa jotakin, koska meillä ei ole aikaa Haku painikkeita. Ensimmäinen asia, joka meidän täytyy tehdä, on selvittää, mitä käyttäjä etsii, aivan kuten teimme ennen. Tämä avainsana viittaa nykyisen elementin käyttäjä on vuorovaikutuksessa. 

Koska käyttäjä on vuorovaikutuksessa hakukenttään, $ Tämä edustaa hakukenttään, joten this.val antaa meille mitä sisällä hakukentän käyttäjä tällä hetkellä kirjoittaa. Joten, nyt mitä haluamme tehdä, on haluamme toistaa kaikkien rivien sisällä meidän pöytään. Voit valita kaikki rivit meidän pöytään, annoin että taulukon ID taulukon salkun, ja kukin rivi edustaa TR elementti, joten valitsin aikoo palata minulle iso joukko Kaikkien rivien minun taulukossa. Nyt haluan toistaa yli että array. Voisin teitä varten silmukka, mutta jQuery oikeastaan ​​antaa meille mukava toiminto nimeltä "jokainen." Mitä kukin tekee, on jokainen kestää yhden argumentin ja tämä väite on funktio. Mitä se aikoo tehdä, on se tulee soveltaa tätä toimintoa jokainen elementti sisällä tämän luettelon. Tämä toiminto yksi argumentti, joka on e- ja kun tämä toiminto on suoritettu, tämä e aiotaan korvata ensimmäinen rivi, Sitten toinen rivi, ja sitten kolmannessa rivissä. Tällä tavalla tämä on sama asia kuin käynnissä varten silmukka ja sitten mietitään nykyisen elementin perustuu indeksiin sisäpuolelle varten silmukka. Kussakin iteraatiossa, kunkin näiden elementtien taulukossa, Haluan tarkistaa, jos tekstin elementin - tekstin solun sisällä rivi - vastaa mitä Etsin. Tämä iso pitkä jono komentoja miten voisin tehdä sen. Ensinnäkin, jälleen, tämä viittaa nyt - koska se on sisällä uusi toiminto - tämä on nyt nykyinen rivi taulukossa. Haluan ottaa nykyisen rivin taulukossa ja haluan saada kaiken sen lapsia. Muista, DOM on hierarkkinen puu, mikä tarkoittaa, että elementeissä on lasten lukumäärä. 

Tämän. Lapset toiminto tulee palata minulle takaisin joukko kaikki elementit , jotka ovat lapsia, tässä tapauksessa, rivin taulukossa. Tämä on yksinkertaisesti solujen sisällä rivi. Haluan vain tehdä hakuja ensimmäinen solu. Tämä. Ensimmäinen funktio sanoo anna minulle ensimmäinen osa, joka array. Sitten tekstin funktion sanotaan ymmärtäkö minua juuri mitä sisällä että solun koska haluan etsiä yli että tekstiä. Lopuksi, nyt muuntaa sen pieniksi, jotta voimme tehdä tekstin kirjaimia kyselyitä. Lopuksi haluamme nähdä jos merkkijono sisällä taulukko sisältää merkkijonon olemme etsimässä. IndexOf toiminto Javascriptin tekee juuri sen. Se kertoo meille, onko tämä merkkijono sisältää toisen merkkijonon. Jos se on totta, että solu sisältää mitä etsin, sitten haluan varmistaa, että se on osoitettu. Show menetelmä sanoo, "Show elementti." Jos näin ei tapahdu, niin se tarkoittaa, että mitä olen etsimässä ei sisälly kyseisessä rivi, ja niin haluan piilottaa on käyttäjältä. Tämä saavutetaan tuo mukavaa suodattamisen vaikutukset jossa ei enää näemme koko taulukon. Jos olet kiinnostunut, miten tämä pumppu samoin, Lähetämme lähde verkossa. Mutta se on todella yksinkertaista. JQuery on mahtava menetelmiä näiden animaatioita ja manipuloida CSS-ominaisuuksia. Niin, siinäpä se minulle. 

Mikä sitten on edessä? Kuten näet muutaman päivän, viimeisten hankkeiden ehdotus johtuu. Lopullisen hankkeet Ehdotus kysyy muutamia kysymyksiä, mutta joukossa on kolme virstanpylväitä - yksi on "hyvä" virstanpylväs, yksi parempi virstanpylväs, ja yksi parhaista. Ajatuksena on todella auttaa teitä asettaa odotukset niin että vähän olet tyytyväinen tuotoksen teidän opinnäytetyön ja se on "hyvä", niin pitkälle kuin on kyseessä. Mutta sitten kiinnostus saada sinut tavoittaa vain vähän jotain parempaa tai jotain parasta, me myös tavallaan työntää sinua kohti, että samoin. CS50 Hack-a-thon puolestaan ​​on muutaman viikon. Yleensä teemme tämä arpajaiset pohjalta perusta kiinnostuksen ansiosta, mutta kertoimet ovat otamme muutaman sadan meistä bussikuljetus Harvard Square alas Kendall Square joissa Microsoft on kaunis laitos osuvasti sanottu "nörtti" - New England tutkimus-ja kehittämiskeskus. Saamme sinne noin kaksikymmentä Saamme ruokaa. Noin 1 a.m. saamme hieman ruokaa. Noin 5 pm jos olet vielä hereillä me pään yli IHOP tai viedä sinut takaisin kampukselle. Tavoitteena on sukeltaa opinnäytetöiden rinnalla luokkatoverit ja henkilökunnan. Sitten muutamaa päivää myöhemmin on CS50 Fair, joka on todella tarkoitus olla tilaisuus te esitellä työsi ja saavutukset varten lukukauden taas hankausta hartioiden keskenään ja saada tunteen mitä kaikki tekivät. Tämän sanoi, monet kiitokset Tommy ja Joseph, ja näemme sinut maanantaina.  [Aplodit]