[Powered by Google Translate] [Wiki 9, Inaendelea] [David J. Malan - Chuo Kikuu cha Harvard] [Hii ni CS50. - CS50.TV] 

Hii ni CS50. Hii ni mwisho wa wiki 9. Asante sana. Hatimaye. Wiki 9. I got it. Leo tunaendelea mazungumzo yetu kuhusu programu mtandao kwa jicho kuelekea mradi wa mwisho, si kwa sababu una kufanya kitu mtandao msingi kwa ajili ya miradi ya mwisho lakini kwa sababu ama kwa ajili ya miradi ya mwisho au baada CS50 hii ni hakika mwelekeo ambao programu ya kisasa ni kwenda. Na bado siyo kweli jambo rahisi. Kwa kweli, moja ya mambo ya gumu kufanya ni nyanja ya design. 

Kwa mfano, kwa kubuni sisi mean kweli kupata user interface au uzoefu wa mtumiaji wa kulia. Mimi daresay - na sisi kujua kutoka kuweka hivi karibuni tatizo wakati wachache wenu kurushwa gripes yako kuhusu baadhi kipande cha programu au vifaa kwamba infuriates wewe, iwe juu ya chuo au off - kuna mengi ya maeneo ya huko nje, kuna mengi ya vifaa huko nje, kwamba aina ya sucks. Lakini ukweli ni kwamba maamuzi ya mambo ambayo ni rahisi kutumia bado ni hata hivyo nguvu ni changamoto ngumu sana. Hivyo kwa leo nilimuuliza Joseph na Tommy kujiunga me up hapa ili tuweze kuwa na mazungumzo, wote juu ya kubuni na ni aina gani ya mchakato wa mawazo lazima kuanza kwenda kwa kichwa yako wakati wewe kubuni miradi yako ya mwisho, juhudi yako ya baadaye. Na kisha kwa msaada Tommy wa tutaangalia baadhi ya maelezo ya utekelezaji. Jinsi gani unaweza kuwa na baadhi ya maono kwenye karatasi au katika akili yako kwamba unaweza basi nitafanya programmatically kwa kutumia baadhi ya teknolojia na mbinu tumekuwa tu ya kuanza kuzungumza juu, yaani JavaScript na kitu hata karibu zaidi, yaani AJAX, Asynchronous JavaScript. Hiyo inaruhusu kujenga nguvu zote zaidi ya interface user na kuchota data zaidi na zaidi kuendelea kutoka kwa seva. Hivyo tutaweza kuona baadhi ya vijisehemu wale kama vizuri leo. Kama kando, kama una nia ya kuzingatia katika sayansi ya kompyuta au minoring katika sayansi ya kompyuta, tunajua kwamba huyu Ijumaa saa sita mchana katika Maxwell Dworkin 221 kutakuwa na tukio pizza ambapo unaweza kujifunza kidogo zaidi juu ya sayansi ya kompyuta. Juu ya njia yako leo nje ya mlango wewe utakuwa na uwezo wa kuchukua mwongozo yasiyokuwa rasmi ya CS katika Harvard. Tutaweza akaiweka juu cans takataka nje katika urefu kiuno ili kwamba kama wewe Ningependa kunyakua hii na kujifunza kidogo zaidi juu ya CS, kwamba atakuwa huko kwa ajili yenu, kama ilivyokuwa katika wiki 0. Pia kama ungependa kujiunga na sisi kwa chakula cha mchana CS50 hii Ijumaa saa 1:15, kichwa na cs50.net/lunch. Bila wasiwasi zaidi, mimi kuwapa mafunzo wenzake Joseph Ong. Hi. [Applause] Shukrani. mara ya kwanza mimi kujifunza kuhusu kubuni alikuwa katika darasa hapa aitwaye CS179. 

profesa wakati walituambia hadithi kuhusu profesa mwingine ambao walikuwa wamekwenda hoteli na kutumika faucets. Je, mtu yeyote kuniambia nini knobs 2 juu ya kushoto na kulia nini? [Mwanafunzi] Moto na baridi. >> Moto na baridi. Nzuri. Nini wewe kawaida kutarajia, haki? Hii profesa baada ya kutumia bomba anataka kuchukua oga, na yeye kuendelea kutumia hii. Yeye anadhani kushoto na kulia ni kwa pande moto na baridi, sawa? Lakini yeyote anaweza kuniambia nini haya kwa kweli kufanya? Yoyote mikono? [Inaudible mwanafunzi majibu] >> Mojawapo ya mapendekezo ni? [Inaudible mwanafunzi majibu] >> Joto? Hivyo mmoja wao udhibiti joto na udhibiti nyingine? >> [Mwanafunzi] Maji ya shinikizo. Maji shinikizo. Nzuri. Profesa Hii anatembea katika hili na, wakidhani ni kudhibiti moto na baridi, anarudi moja ya haki, ambayo anadhani ni kwa moto, njia yote hadi kwa sababu yeye anataka kuchukua oga joto. Naam, haya si kweli match up, hivyo yeye anapata uzoefu huu si furaha sana ya kuwa katika oga baridi, na sisi wote kujua nini kwamba anahisi kama. Huu ni mfano wa flaw design. Nini maana na kwamba ni matumaini yake kutoka bomba haikulingana kile kitakachotoka oga, ambayo ni aina ya bahati mbaya kwa ajili yake. Hivyo hii ni mfano wa flaw kubuni kinachotokea katika maisha halisi. Lakini tunaona kila aina ya wale wengine pia. Sisi ni pengine si mashabiki wa mfumo MBTA. Hii ni mfumo Subway kweli katika London, ambayo anasema, "button Hii si katika matumizi." Kwa nini ni hata kwenye huko? Mbona sisi hata huduma? Nilipokuwa mtoto, kuwa tech savvy moja katika nyumba, kila kompyuta bila ajali, mama yangu kuja kwangu, kunionyeshea hii screen na kuuliza mimi nini kilichotokea. 

Hata mimi sijui nini maana ya hii. [Kicheko] Nini? [Kicheko] Wakati mwingine sisi kujisikia kama watengenezaji programu ni tu trolling yetu. Kama watumiaji sisi ni kama, "Ni nini kinachoendelea Mtu kutuambia?." Hii yote inakuja chini ya suala la kubuni. Design, kama tunavyoona, ni si rena kuhusu aesthetics, siyo kuhusu jinsi mambo ya kuangalia. Tunaona hapa kuwa kidogo pop-up juu hapa kweli inaonekana pretty nice. Ina kivuli tone katika background, ina radiuses mpaka kinachoendelea. Ni aina ya pretty. Ni kweli si vizuri iliyoundwa kwa sababu si sana user friendly. Hiyo kidogo pop-up kwamba anakuja juu kweli haina nipe taarifa yoyote kuhusu nini kinaendelea, haina niambie kitu chochote kama mtumiaji kuhusu jinsi ya kuokoa kutoka kosa hilo. Sisi nataka kufikiri kuhusu mambo ambayo si ya kubuni. Kwanza, si aesthetics. Ni pia si stuffing programu yako kwa tani ya utendaji usio wa lazima. Kama wewe ni mgahawa Thai, pengine hawataki kuwa daktari wa meno wakati huo huo. Na kwa Maswali Facebook, si kwamba watu wengi kutumika ni na ilikuwa si kweli katika msingi wa nini walikuwa kujenga. Na hivyo ni nzuri kufikiri juu hata kiasi wingi wa mambo kwamba wewe ni kuweka kwa maombi yako lakini ubora na jinsi wewe ni kufanya kuwa uzoefu user bora na kwa kweli kuboresha juu ya nini tayari. 

Kwa kifupi, design inatuambia nini tunapaswa kujenga. Kwa mfano, kama sisi ni kujenga kitu ambacho hebu kutafuta mambo up, kama Google, kwa mfano, tunapaswa kufanya mambo kwa namna ambayo inahitaji user kuchukua kura ya Clicks kupata wanataka nini, au lazima sisi kufanya hivyo kwa njia, kwa mfano, na Google Instant au oto kukamilisha kwamba lets sisi kupata matokeo yetu kwa kasi? Uhandisi inahusisha, kama Tommy nitakuonyeshea, kwa kweli kuijenga. Kuna kura ya aina ya design. Kwa mfano, kama wewe ni kujenga kitu fulani kupeleka kitu katika Dunia ya Tatu nchi ambapo kuna si mengi umeme au kwamba teknolojia sana, una kubuni nini wewe kujenga kwa njia ambayo inatoa urahisi upatikanaji wa watu hapo. Lakini nini aina ya maamuzi mengine kubuni ili kuwe na au inaweza kuwa wanaohusika katika kitu kama hiki? Yeah. Mimi naona mkono. [Inaudible mwanafunzi majibu] >> Haki. Hasa. Upatikanaji ni kitu kimoja. mengi ya watu sidhani juu, "Je kuhusu watumiaji yangu?" kama extremes ya wigo aidha. Nina watumiaji ambao wanaweza kuwa na ulemavu kwamba mimi si kufikiri juu ya na mimi nina tu kufikiri kuhusu kubuni kwa mtumiaji ujumla. Internet ni kupatikana kwa kila mtu siku hizi, na mimi lazima kubuni kwa watu wale pia. Nini aina ya maamuzi mengine kubuni ili kufanya? Ndiyo. >> [Mwanafunzi] Gharama. Gharama. Nzuri sana. Jambo jingine tupate msingi kubuni maamuzi yetu juu ya ni gharama. Kama sisi ni biashara, unataka kujenga kitu ambacho si kuchukua gharama sana kwa kuzalisha lakini unaweza kuuza kwa gharama hasa juu au wanaweza kupata sisi baadhi ya faida. 

Haya yote ni aina tofauti ya kubuni, lakini wakati sisi ni kujenga kitu fulani kwenye mtandao au wakati sisi ni kujenga kitu ambacho pengine haina gharama kwamba mengi ya kujenga sasa, kama maombi Internet - huna kutupa mtaji kiasi ndani yake ili kufanya kitu ambacho kwa kweli kazi - nini sisi ni wasiwasi zaidi kuhusu ni uzoefu wa mtumiaji. Sisi wito mtumiaji unaozingatia design. Kimsingi nini mtumiaji kubuni unaozingatia inahusisha ni kuweka wenyewe katika viatu ya watumiaji. Kama mtu ishara up kwa nini mimi kujenga, wameweza wazi kuja maombi yangu hasa kwa lengo katika akili, na kazi wanataka kukamilisha. Na kazi yako si tu kwa kuwasaidia kumaliza kazi hiyo lakini watu kuwasaidia kumaliza kazi hiyo kwa namna ambayo ni bora, angavu, na, kama mtu fulani alisema juu huko, kupatikana. Nini maana ya ufanisi? Ufanisi maana jinsi haraka haina mtumiaji wangu kukamilisha kazi aliyopewa interface yangu. Je, ni kuchukua kura ya Clicks kwa wao kupata kutoka sehemu moja hadi nyingine? Je, ni tedious? Je, wao inabidi kufanya kura ya kazi repetitive? Tunataka kufanya mchakato kama ufanisi kama iwezekanavyo hivyo hawana kufanya aina wale wa mambo. Kama kwa intuitiveness, kwamba ni, kwa mfano, kama mtumiaji inaonekana hadi interface yangu, ni rahisi kwa wao kupata kutoka mahali hadi mahali? Je, ni rahisi kwa wao kufikiri nini wao bonyeza katika interface yangu ili kwa wao ili kufikia lengo au kazi ambayo wanataka kufikia? 

Na hatimaye, kama mtu mmoja alisema zaidi ya hapo, upatikanaji ni muhimu sana. [Kiume msemaji] Ni huja na upatikanaji kwa mambo kama maono, kama jinsi gani mimi kwa kweli kubuni kitu kwa mtu ambaye ni kipofu? Oh. Kwa watu ambao hawawezi kuona katika yote, tuna kitu kinachoitwa screen wasomaji. Unachotakiwa kufanya ni lazima kujenga tovuti yako katika njia kwamba, kwa mfano, hasa teknolojia nini tunaita - Kuna mambo mengi ya sasa. Nadhani kuna screen wasomaji inayoitwa Jaws. mengi ya mambo haya wanategemea nini tunaita sheria eneo ili kusoma nje kwa mtumiaji ni nini sasa juu ya ukurasa. Kwa watu wale ambao hawawezi kuona, unahitaji kuhakikisha kwamba wasomaji screen hizi unaweza kweli kuchukua yaliyomo kwenye ukurasa na kweli anaweza kuonyesha watumiaji wako, ikiwa huwezi kuona, angalau bado unaweza kuelewa maudhui juu ya ukurasa. Yeah. Sawa. Kutosha kuzungumza juu ya design nzuri. Hebu majadiliano kuhusu kubuni mbaya. Haya ni mambo ambayo unapaswa kufanya. Je, mtu yeyote kuniambia kuhusu uzoefu wao na Craigslist na nini wanafikiri si kubwa sana kuhusu design hii? Ndiyo. >> [Mwanafunzi] Nadhani kuna mengi mno maneno katika eneo moja. Wengi mno maneno, haki? Kabisa balaa. Wewe kuja ukurasa huu na wewe greeted na rundo zima la mambo juu hapa kwamba wanaweza hata jambo na wewe. Kwa mfano, wewe kuishi katika moja hali ya kuwa haina kuanza na barua hii. Hebu sema wewe kuishi katika Texas au kitu. 

Una kitabu njia yote chini ya ukurasa wa kupata mahali wewe ni saa. Mimi nina kutoka Boston, hivyo basi mimi kuangalia katika Massachusetts. Ambapo ni Massachusetts? Oh, ni haki hapa. Oh, ni Boston. Sawa. Hebu tuangalie Boston. [Kicheko] Pretty balaa, haki? Awkward mambo zaidi ya hapo. [Kicheko] Hebu sema mimi nina kuangalia kwa mahali fulani kwa kuishi. Jinsi watu wengi kweli kutumika Craigslist? Tani ya wewe. Kuna pretty mbaya njia ya kuangalia hii, lakini hebu tuangalie hii. Nini tofauti kati ya img na pic? Je, mtu yeyote kuniambia? Kuna kweli ni tofauti hakuna. Wao maana hasa kitu kimoja, lakini wao wana tofauti maandiko kwa ajili yao kwa sababu fulani. Kama mimi bonyeza Ina Image, hakuna kinachotokea juu ya ukurasa. Mimi kwa kweli kuwa na bonyeza Tafuta tena kwa kitu kutokea. Nini kinaweza kuwa bora kubuni uamuzi kwamba inaweza kufanyika huko? Kama mimi nina kubonyeza chujio kwamba, mimi pengine wanataka kuchuja na hatua fulani au kwamba jamii fulani. Hivyo badala ya kuwa na vyombo vya habari Tafuta tena, mimi nilikuwa tu moja kwa moja kufanya uchujaji aina ya Google style ambapo wao kufanya hivyo mara moja. [Malan] Lakini si hutengeneza kama tumeona yao hivi sasa kuwa kimwili in kwa kupiga Ingiza angalau au kubonyeza kifungo? Kama wewe ve kuonekana yao hadi sasa, kwa kweli kuwa na bonyeza Kuwasilisha kwa kufanya mambo hayo. 

Lakini kama Tommy nitakuonyesha katika pili, kuna njia kweli kwa wewe vile kwamba wakati bonyeza juu ya jambo kwamba inaweza kutuma moja kwa moja tunaita ombi AJAX na kupata data nyuma na kuchuja matokeo yako mara moja. Kuna tani ya mambo ambayo ni makosa na interface hii. [Malan] Je, unaweza kutafuta Cambridge? Kuna kitu kidogo anomalous hapa ambapo huduma kuhusu Cambridge na bado wewe ni kupata Westford, Spring Hill, West Newton na kama. Pengine si bora. >> Pengine si bora. Jinsi gani mimi kuwa na uwezo wa kufanya uzoefu wa mtumiaji bora katika ukurasa huu? Ndiyo. >> [Mwanafunzi] Maelekezo. Sawa. Maelekezo katika aina gani ya hisia? [Mwanafunzi] Kwa mfano, kitu kwa watumiaji wa kwanza wakati ambao hawana hata kujua nini Craigslist ni au huna kujua nini wewe zinatakiwa kufanya. Haki. Hivyo kuelezea ni nini Craigslist ni juu ya ukurasa huu ni muhimu. Tunaweza kweli kuwaambia watumiaji nini ukurasa huu ni kweli kwa. Kama mimi tu kutembelea hii, naona rundo zima ya maeneo. Mimi wala hata kujua maana yake. Lakini muhimu zaidi, tu kuangalia interface hii, kumbuka nilikuwa na kitabu chini ya tani ya mambo ya kupata jamii fulani kwamba mimi kwa kweli kumjali kuhusu juu ya hili. Nini njia ya haraka mimi naweza kufanya hivyo? Ndiyo. [Mwanafunzi] Wagawe yao juu katika mashariki, magharibi ya mikoa. >> Sawa. Mimi naweza wagawe katika makundi zaidi ambayo inaweza kusaidia yangu kasi kuamua jinsi ya kupata mahali fulani. [Mwanafunzi] Weka orodha kunjuzi. >> Haki. Sawa. Mimi naweza kutumia drop-down menu kwa sababu tuna seti ya kudumu ya mambo na tunaweza kuwaonyesha katika drop-down menu. Kwa njia hiyo haina kuchukua nafasi sana kwenye screen. Lakini hata bora zaidi ya kwamba, tutafanya nini? Ndiyo. >> [Inaudible mwanafunzi majibu] >> Je, unaweza kusema kwamba tena? >> [Mwanafunzi] Tafuta sanduku. Yeah, sanduku ya utafutaji. Hiyo ni kubwa. Nini tunaweza kweli kufanya ni kama sisi kuangalia nyuma katika sanduku slides, tafuta. Oto kukamilisha. Rahisi sana kutafuta njia kupitia matokeo ya kuwa wewe unajua ni katika kuweka. Kama mimi kuanza kuandika BO, nionyeshe matokeo yote ambayo ndani BO yao. Hiyo njia naweza sana kupata urahisi wa mtu fulani Nataka kwenda kwa badala ya kuwa na kitabu kupitia orodha hii kubwa kweli kweli. 

Haya yote ni aina ya matunda kweli chini-kunyongwa kwamba mtu ambaye ni kutekeleza Craigslist unaweza kweli kufanya ili kufanya uzoefu kwenye tovuti mengi zaidi kwa mtumiaji yao maalum. Sawa. Kutosha kuzungumza juu ya Nje mbaya. Hebu majadiliano kuhusu Facebook. Wakati Facebook akatoka, na hasa photos Facebook, kulikuwa na kura ya huduma nyingine kwa wakati ambayo inaweza kufanya hasa mambo sawa. Wangeweza kuandaa photos yako katika albamu. Nini unaweza kufanya ni unaweza kupanga nao katika seti kama vizuri. Unaweza kupanga nao kwa sasa. Unaweza kufanya mambo haya yote fulani. Lakini haina mtu yeyote kujua nini alifanya Facebook photos kulipuka wakati hiyo ilitolewa? Ndiyo. >> [Mwanafunzi] Tags. Tags >>. Hasa. Tuna Milo zaidi ya hapa, ambao ni mbwa wetu mascot na kwamba bandana CS50. Unaweza kuona kwamba tuna kipengele tagging katikati. Na nini alifanya Facebook photos ili kuvutia kutoka kwa upande usability ni kwamba ni kweli kuruhusiwa watu kupitia hii kwa kuhusisha marafiki zao katika picha zao. Kwa Facebook, tangu tovuti yao ni hasa ya kijamii, ni kuhusu ujenzi wa aina hii ya anga ya kijamii. Hiyo kuboreshwa uzoefu wa photos mengi zaidi kwa sababu hawakuweza kweli kuanza kusema, "Hawa ni uhusiano kati ya watu, na haya ni photos kuhusu watu kweli huduma ya juu. " Sehemu yake ni pia aina narcissism. Watu kama kuwa tagi katika picha na vitu kama hivyo. Wakati kwamba si lazima nzuri binadamu bainishi, wakati huo huo ni msingi maamuzi mazuri kubuni kwa sababu watu kweli huduma kuhusu mambo kama hayo. Basi hiyo ni Facebook photos. 

Lakini hebu majadiliano Picha zaidi kwa ujumla. Mimi nina uhakika kura ya watu hapa kuwa na maoni kuhusu Facebook, wote mema kubuni maamuzi na maamuzi mabaya design. Basi hebu vent au kuwa na furaha. Kuja juu. Mimi najua yote ya wewe kutumia Facebook. Mtu ana kuwa na kitu kibaya cha kusema au kitu kizuri kwa kusema juu yake. Ndiyo. [Mwanafunzi] Katika kulisha habari kuna mambo mengi mimi si kweli huduma ya juu. kulisha habari gani kuonyesha mambo mengi unaweza huduma ya juu. Wewe una marafiki katika Facebook ambao una kukutana kwa miaka 2 au 3 na unaweza kuona habari matokeo yao yanajitokeza habari kulisha yako na wewe si kweli huduma kuhusu hilo. Facebook ina kweli alifanya jitihada ya kufanya vizuri zaidi, na wameweza kweli walijaribu kushinikiza matokeo husika juu ya kulisha habari kama ya marehemu hivyo kweli kuona mambo kwa rafiki ambayo ni muhimu kwa wewe au rafiki yako wa karibu. Kitu kingine? Ndiyo. [Inaudible mwanafunzi majibu] >> Je, unaweza kusema kwamba tena? [Mwanafunzi] matangazo ni kiasi unobtrusive. >> Namna gani? [Inaudible mwanafunzi majibu] Wao hawana mwanga juu ya screen, kama vilima. Sawa. Hiyo ni nzuri. Kama unakumbuka Internet kutoka '90s - >> [Malan] nilikuwa huko. >> Alikuwa huko. [Kicheko] Unaweza kukumbuka GIFs flashing asili, sparkly mambo, Geocities style aina ya mambo. Hiyo ni kweli si mfano wa design nzuri kwa sababu ni kweli bughudha kutoka maudhui. Sanaa Yale tovuti kutumika kwa kuwa GIFs animated kama background zao na wewe hakuweza kusoma chochote kwenye ukurasa, lakini mimi nadhani mtu kweli waliongea nao, sasa ni tofauti kidogo. [Malan] Ni bora sasa. >> Ni bora sasa, kama unaweza kuona. >> [Malan] Oh yeah. Kubwa tu, tu - Yeah. Sawa. 

Sehemu ya pia ni kufanya ukurasa wako uwezekano sana minimalist na sana kueleweka hivyo mambo ya mtiririko ukurasa katika njia ambayo ni mantiki sana na wala kupata katika njia ya kila mmoja. Aina gani ya mambo mengine ni mazuri kuhusu Facebook au mabaya kuhusu kuungana? Hebu tu kuwa na mazungumzo kubuni hapa. Oh. Wapi? Yeah. [Mwanafunzi] mpya Timeline mfumo utapata kutafuta profile ya mtu kuhusu nyuma yao. Ooh, Timeline. Timeline ni jambo kubwa kwa sababu inakuwezesha rafiki yako bua nyuma wakati wao walikuwa katika shule ya sekondari. Timeline ni nzuri kwa sababu inakuwezesha kuchuja kupitia maudhui mengi kasi, inakuwezesha kupata mambo ambayo ingekuwa vinginevyo kuchukuliwa wewe kweli wakati muda mrefu kupata tu scrolling juu na chini, juu, juu, juu, juu, juu, kama kwenda nyuma wakati. Lakini basi kuna pia aina ya upande wa chini kwa kuwa katika suala la uzoefu mtumiaji. Nini kinaweza kuwa ni nani? Big neno kwamba huanza na P-R. >> [Mwanafunzi] faragha. >> Faragha, haki? Privacy ni kubwa user uzoefu suala hilo. Hii ni moja ya mambo I hate zaidi kuhusu Facebook sasa. [Kicheko] [Malan] Kama mimi kufanya sasa. Daudi hakuwa kutambua hii hasa kilichotokea hadi jana. Hivyo sasa yeye anajua kwamba kila wakati mimi kuzungumza naye najua amekuwa kupuuza yangu. [Malan] sehemu Awkward alikuwa Mimi kwa kweli kupuuza yake, na sikujua alijua nilikuwa kupuuza naye. [Kicheko] Privacy ni suala kubwa. Je, mtu yeyote hapa kuniambia nini inaweza kuwa mbaya kuhusu Facebook faragha badala ya ukweli kwamba wao kufanya mambo kama haya? Ni nini hasa kwa bidii na kufanya na heshima kwa Facebook faragha? Kwamba aina ya swali ni kuongoza. Ndiyo. >> [Mwanafunzi] Ficha picha yako kutoka kwa watu fulani. Haki. Hasa, kuficha picha yako kutoka kwa watu fulani. Wao wana hii ndogo, kidogo kifungo katika haki juu ambayo inakuwezesha kugeuza faragha ya picha. Faragha chaguzi zao ni sana mbalimbali kati ya aina tofauti ya menus. 

Wameweza wamezipata mengi zaidi kuhusu hilo hivi karibuni, lakini kutumika kuwa kesi kwamba kila wewe alitaka kuzuia rafiki yako kutoka photos kuona, ungependa kwenda kupitia mchakato ngumu sana 5-hatua ya kuwa kama, basi mimi bonyeza link hii, sasa napenda bonyeza tena, basi mimi bonyeza tena, napenda kutaja watu hawawezi kuona picha yangu. Hiyo siyo hasa nzuri kwa upande wa Facebook kwa sababu sana kuhusu uzoefu user ni kweli kuwapa uhuru kudhibiti kile watu wanaweza kuona. Sisi wito kudhibiti mtumiaji na uhuru. Kama wewe si kuruhusu watumiaji yako kufanya hivyo kwa njia ambayo ni ya ufanisi na Intuitive, kisha user uzoefu wako si kweli kwamba kubwa wakati wote.  Je, wewe guys kama kusema chochote kuhusu kuungana? Ninawezaje kuzima hii? [Ong] Huwezi kuzima hii, na kwamba ni kubwa usability flaw juu ya sehemu ya Facebook. Hii kipengele - Mimi kwa kweli inaonekana katika hayo jana - ni aidha kwamba huwezi kufanya hivyo au ni kuzikwa mahali fulani sana, na kina kirefu sana katika pande za Facebook sababu siwezi kufikiri jinsi ya kulemaza hii funktionalitet wakati wote. [Malan] Lakini wakati mwingine maamuzi haya ni dhahiri si kwa sababu wewe guys wameshatoa maoni mengi ya muhimu juu ya matumizi mbalimbali CS50 na tovuti ambazo bila shaka anatumia. Sisi si kutekelezwa yote ya maombi hayo na mapendekezo. 

Sehemu ya kwamba ni kwa ajili ya kupata maombi mengi ambayo ni kazi ya muda, lakini wakati mwingine sisi tu kufanya uamuzi kama, "Asante kwa maoni, lakini sisi hawakubaliani." Hivyo ni jinsi gani wewe kweli kuamua nini unapaswa kufanya kama watumiaji yako kufikiri ni lazima kufanya kitu hata kama wewe kufanya si lazima? Ni uwiano mzuri kati ya kweli kusikiliza watumiaji nini wanasema wako na kweli kuwa baadhi ya aina ya mstari ambapo unaweza kusema, "Sisi siyo kwenda kufanya nini hawa watumiaji kusema." Na hasa, nadhani kulikuwa na quote Henry Ford kwamba sums up hii pretty vizuri. "Kama mimi aliwataka watu nini walitaka, wangeli walisema walitaka farasi kwa kasi zaidi." Je, mtu yeyote aina ya tease mbali kile quote kwamba kweli ina maana? Siyo tu kwamba watumiaji kujua nini wanataka, lakini ni zaidi ya kuwa - [Mwanafunzi] Wao hawajui nini iwezekanavyo. Katika sehemu ya wao hawajui nini inawezekana. Tease kuwa mbali kidogo zaidi. Nini maana na kwamba? [Inaudible mwanafunzi majibu] Hiyo ni nzuri. Nadhani nini sisi ni kujaribu kusema hapa ni kwamba watu kujua nini wanataka. Wanataka farasi kwa kasi zaidi. Nini kweli unataka ni uwezo wa kusonga kwa kasi, lakini wao si kweli kujua kati ambayo kwa kufikia hiyo. Wakati umefika kwa watumiaji yako na watumiaji yako kukuambia kitu na wakiwaambieni, "Tunataka makala haya na makala haya na makala haya," wewe hawataki lazima kufikiri juu, "Hebu kwenda mbele "Na kutekeleza kile waziwazi kusema," lakini nini nataka kufikiri kuhusu ni, "Ni aina gani ya mawazo ninaweza kupata kutoka kwamba?" Nini kweli unataka? 

Na kutoka huko nini unaweza kufanya ni kubuni kitu utakaokubalika maombi wale lakini si lazima katika njia kwamba mtumiaji anatarajia kuwa ameridhika. Hivyo kwa kitu kama miradi ya mwisho, katika suala halisi, nini heuristic muhimu linapokuja kufanya kitu bora, hasa kama designer ana hili kiburi kuhusu yeye ambapo wewe aina ya kujua nini bora, unaweza kuchukua maoni kutoka watumiaji wako, lakini jinsi gani unaweza kweli kwenda juu ya kupata maoni kwamba? Katika miradi ya mwisho, sana concretely, nini hutoa matokeo mojawapo hapa? Nini hutoa matokeo mojawapo - na mimi kwenda juu ya hili katika pili - hii ni mchakato wa kuandaa na kisha kupima na kisha iterating. Nini maana na kupima ni kawaida wakati wewe kubuni kitu unafikiri ni haki nzuri, kama, "Nina designer mkubwa Kila mtu anaenda upendo huu.". Na kisha kuiweka huko nje na watu si kweli kama ni kwa sababu fulani. Nini wewe kufanya ni wewe kuwa na kuchukua sehemu ya mambo ambayo watu kufanya kama na kufufua mambo ambayo watu hawapendi. Inaonekana kama mchakato dhahiri sana, lakini utaratibu huu wa mara kwa mara iterating juu ya nini wewe ve tayari kujengwa ni mchakato kwamba husaidia si tu kuboresha ujuzi wako mwenyewe kubuni lakini pia husaidia kuboresha kubuni hivyo kwamba watu kweli kufahamu bidhaa yako hata zaidi kuliko walivyofanya kabla. 

Nitakwenda juu zaidi mifano halisi ya nini unaweza kweli kufanya. Kama aina ya mfano wa mwisho wa bidhaa, hebu tuangalie Kayak. Kayak wakati alikuja nje ilikuwa sana, maarufu sana. Je, mtu yeyote nadhani kwa nini? Je, ni aina ya mambo, wewe kama kuhusu hili kama una kutumika ni au nini ni aina ya mambo kama huna? Ndiyo. >> [Inaudible mwanafunzi majibu] >> Sawa. Hiyo ni sehemu yake ni kuruhusu mtumiaji kuwa na hoja kwamba ni zaidi ya kujitanua ya moja restriktiva sana kama, "Una kuchukua kuanza tarehe yako ya "Na una pick mwisho tarehe yako." Kwa kweli, inakuwezesha kuwa rahisi kubadilika kuhusu hilo na inakupa yote ya ndege katika mbalimbali. Kitu kingine? [Mwanafunzi] Wao ni pamoja na ada katika bei. Wao kufanya ni pamoja na ada katika bei. kodi na mambo kweli kwenda moja kwa moja katika bei ya kwamba katika kushoto juu hivyo wewe si mkadanganywa katika kufikiri kwamba wewe ni kweli kulipa kwa ajili ya ndege $ 240 wakati ni kweli $ 330. Kitu kingine? Ndiyo. [Inaudible mwanafunzi majibu] Mimi nina uhakika kama kweli basi wewe kufanya hivyo. Nipate kuwa na makosa. Hiyo inaweza kuwa kitu ya kuvutia kama unataka kuweka uzito zaidi juu ya filters fulani ili kushinikiza matokeo kuhusiana na kwamba chujio hadi juu. Lakini yeyote anaweza kuniambia nini ili maalum kuhusu upande huu wa kushoto? Jinsi gani jadi kuangalia juu ya ndege juu ya huduma ya Internet kabla ya hii? 

Ndiyo. >> [Inaudible mwanafunzi majibu] >> Je, unaweza kusema kwamba - [Mwanafunzi] Kila ndege. >> Yeah. Ndege kila ina tovuti yake mwenyewe. Hii konsoliderar mambo. Na? [Mwanafunzi] Unajua nini hasa wakati wewe ni kuondoka. Huwezi kujua nini hasa wakati wewe ni kuondoka, lakini kuhusiana na filters hasa. Hebu vuta hadi Kayak. Ee Mungu, pop-ups. Bad user uzoefu. Nini kinatokea wakati mimi hoja hii slider? [Mwanafunzi] Automatic updates. >> [Ong] Automatic updates. Hiyo ni kitu ambacho ni muhimu sana. Kabla ya hii, kila alitaka kuangalia juu ya ndege, wewe alikuwa na kuweka katika mahali mchango wako, pato yako mahali, vyombo vya habari Search, ingekuwa mchakato huo na kuonyesha matokeo yako. Kama alitaka kubadili hoja yako, ungependa kuwa na vyombo vya habari nyuma mara mbili, kuingia katika swala mpya kutoka mwanzo, na kisha kufanya hivyo tena na tena. Jambo zuri kuhusu kitu kama hii ni inatumia sana [unintelligible] kitu katikati. Kila wewe kufanya kitu kama hii, ni shina mbali ombi na kuirudisha wewe matokeo yote mara moja. Hii aina ya maoni ya haraka ni kitu ambacho alifanya Kayak wildly maarufu kwa sababu ni kweli rahisi kwa mimi kubadili tu hoja yangu na kufikiri mambo ambayo ni karibu mbalimbali hasa bila ya kwenda na kurudi, na kurudi, na kurudi. Basi hizi ni kila aina ya mambo wewe nataka kufikiri kuhusu wakati wewe ni kubuni tovuti yako. Nawezaje kufanya hivyo ufanisi sana kwa watumiaji yangu kupitia chochote ni kazi ya na kupata lengo lao eventual haraka iwezekanavyo? [Malan] Na kwa uhakika wa Yusufu mapema kuhusu watumiaji si lazima kujua nini wanataka, kulingana na kile wewe guys sasa kujua kuhusu HTML na una checkboxes, redio vifungo, chagua menus, mashamba ya pembejeo na kama, jinsi gani unaweza kutekeleza dhana ya kuokota muda kuanza kwa ndege? 

Ambayo ya taratibu hizo mbalimbali UI utakazotumia? Kama wewe tu kujua kiasi cha HTML kwamba alikuwa akifundisha kabla na unajua pembejeo ni redio vifungo, checkboxes, kushuka Downs, na sanduku pembejeo, gani uchaguzi wako asili zimekuwa kwa kuokota tarehe? [Mwanafunzi] Pembejeo. >> Pembejeo. Au labda hata tone-chini na wote wa tarehe, sahihi? Hivyo, pamoja na ngumu zaidi UI taratibu kama hii ya upande wa kushoto kwamba unaweza kutekeleza, unaweza kufanya mchakato huu zaidi Intuitive na slider kwa sababu muda ni kuendelea, na watu kwa kawaida si kufikiria hivyo katika suala la chunks Diskret. Wote haki. Jambo la mwisho. Kumi usability heuristics. Mambo yote kuongelea pengine kuanguka chini ya moja ya makundi haya. Kama wewe kwenda link hii, ambayo maeneo itakuwa posted online, utasikia kweli kuwa na uwezo wa, kama wewe kubuni tovuti yako, keep heuristics haya katika akili na sheria hizi za thumb. Ajili ya miradi yako, nini mimi zinaonyesha kufanya ili kubuni programu yako bora ni kufanya karatasi prototyping kwanza. Wakati wewe ni kufikiri kuhusu maombi yako, kwa haraka sana mchoro nini unataka kuangalia kama na kuhakikisha masanduku yote ni kupangwa katika njia ambayo ni Intuitive sana kwa mtumiaji kwa kutumia na hata kuonyesha prototypes haya karatasi kwa rafiki yako na kuanza makundi mwelekeo. Kupata tu watu 2 au 3 pamoja na kuwaomba tu bomba kwenye prototypes haya karatasi, na kuwaonyesha skrini mpya ili kuona kama kweli kuelewa nini kinaendelea. 

Nini unataka kufanya ni kuwapa kazi, kuwahamasisha kwamba kazi, na tu kuwapa programu na waache matumizi yake. Usiwape maelekezo zaidi ya hapo. Unataka kweli waache kuingiliana na programu yako kwa njia ambayo inakuwezesha kuona jinsi gani wangeweza kuitumia kama haukuwa amesimama karibu nao. Na kwamba ni muhimu sana. Kwamba nitakupa kura ya ufahamu kama ni watu kupata kuzunguka mambo fulani fulani kwa kwa njia ambayo sikuwa na nia yao? Je, wao kutumia utaratibu wa UI hasa kwenye screen katika njia ambayo ni aina ya hacky? Sikuwa na nia kwa wao kufanya hivyo. Na mara moja wewe ni kosa na kwamba, unataka nini cha kufanya? Design yako miamba, haki? Nini unataka kufanya ni unataka kuendeleza na kisha kufanya kwamba mchakato juu tena. Hivyo kuonyesha kuwa na marafiki mara moja umefanya maendeleo yake, mtihani, kuendeleza, mtihani, kuendeleza, mtihani, iterate, juu na juu na mbele. Design ni sana iterative mchakato katika maana hii. Wewe kweli kuwa na kujenga kitu fulani na kisha kutambua mambo kuhusu hilo kwamba hawakujua kabla na kwenda nyuma na kuboresha kutoka hilo. Sasa, kama kwa sehemu ya maendeleo, kwamba ni nini Tommy ni kwenda kuonyesha baada ya mapumziko na jinsi ya unavyoweza kuwa na uwezo wa kutekeleza kitu kama oto kukamilisha katika njia ambayo ni haki rahisi. [Malan] Kama Tommy kuwamilikisha hapa, swali basi. mengi ya Nje mwanzo - na wakati Joseph alisema miaka ya 1990 style tovuti, ilikuwa utekelezaji ambapo kama alitaka kuchagua muda kuanza na wakati wa mwisho, kusema ukweli, nyuma katika siku na hata kwenye baadhi ya tovuti ya leo, njia ya kufanya hili ni pick saa kutoka tone-chini, pick dakika kwa tone-chini, labda wewe kuchagua AM, PM, na kisha wewe kufanya hivyo mara 3 zaidi. Na hivyo na 6 Clicks na labda baadhi scrolling user yako kweli anaweza kutoa baadhi ya aina ya tarehe na / au mbalimbali wakati katika maana hii. 

Hivyo dhahiri suboptimal na bado hivi sasa tumeona uwezo hakuna expressive yoyote ya lugha sisi Tumeangalia katika kufanya kitu sexier kama hii slider ya kuanza muda na wakati wa mwisho. Lakini kama unadhani nyuma wiki 0 wakati kuongelea Scratch, kuna pia kulikuwa na si vilivyoandikwa kwamba tu walifanya mambo fulani. Wewe kweli tu alikuwa misingi hizi kama matanzi na hali na kama. Hivyo aina ya tu kufikiri sana abstractly sasa, huru wa maelezo ya HTML, ni nini hasa kinachoendelea na kitu kama hii wakati mwanzo na mwisho slider muda? Wakati mimi hoja mouse yangu na mimi bonyeza ishara kwamba kidogo karoti upande wa kushoto na kuanza akawatoa, programmatically, ni nini unataka kuwa na uwezo wa kutekeleza kufanya kutokea? Ni maswali gani, nini Boolean misemo gani unataka kuwa na uwezo wa kuuliza? Nini kweli kinachoendelea? Sammy? [Mwanafunzi] wapi msimamo wa mshale? >> Good. Ambapo ni msimamo wa mshale? Hiki ni kitu ambacho sisi zinahitajika kueleza nyuma katika Scratch, kama ni mara ya msingi ya eneo au hata rangi au kama. Unaweza kukumbuka milele hivyo kwa ufupi juu ya Jumatatu kulikuwa mambo yote haya kuitwa matukio katika dunia ya mtandao, na hivyo kuna mambo kama onclick na onkeypress na onkeyup na onmouseover na onmouseout. Hivyo kutambua kwamba hata mambo haya tumekuwa kuchukua kwa nafasi ya juu ya Mtandao pamoja na maeneo kama Facebook na Gmail, hata kama huna wazo jinsi gani uwezekano kutekeleza kwamba kwa sababu kuna kitu hata kama ni katika hotuba Tatizo au Set 7, kutambua kwamba kwa misingi haya exact, na HTTP na vigezo na GET na POST, kwa msingi pembejeo HTML kwamba sisi Tumeangalia katika hivi sasa na katika wakati huu na mifumo ya programu kwamba Tommy kuhusu kuanzisha unaweza kuanza kueleza mwenyewe tu kama alivyofanya katika wiki 0 kwa sana intuitively dragging na kuacha. 

Hivyo kwa kuwa alisema, Tommy MacWilliam na baadhi ya vipande puzzle mpya kwa ajili yetu kwa ajili ya mtandao. Wote haki. Jina langu ni Tommy na mimi nina kwenda kuzungumza kuhusu JavaScript. Tu disclaimer: Nina mawazo kuwa JavaScript ni bora programu lugha katika dunia nzima nzima. Kuna kura ya watu ambao hawakubaliani na mimi, lakini ni ajabu tu. Mara baada ya kurudi nyuma na C, kama una kuandika C kwa darasa lingine au lugha nyingine, ni kweli tu frustrating katika maelezo yote ngazi ya chini una kupata bogged chini in Hivyo kama wewe ni milele huzuni kuhusu jinsi annoying C ni kuandika, tu kwenda nyuma, kuandika baadhi JavaScript. Ni nirvana. Wewe utakuwa kujisikia vizuri zaidi kuhusu siku yako mbaya. mengi ya uchawi wa JavaScript linatokana na uwezo wake wa kuendesha mambo kwamba tayari juu ya ukurasa. Wakati sisi aliandika wetu scripts PHP, wao waliuawa katika server, na hatimaye kwamba PHP script pengine pato baadhi HTML. Hiyo HTML alitumwa kwa mteja, na kisha kwamba alikuwa ni. Kama PHP alitaka kuongeza kifungo kwa ukurasa, kwa mfano, ni kweli hawezi kufanya hivyo. Ingekuwa kwa kutoa mpya nzima HTML faili na kutuma kwa kivinjari. Kwa JavaScript tunajua kwamba tunaweza update mambo wakati wao uko tayari kwenye ukurasa, na kwa sababu hii tunaweza kutoa zaidi ya papo maoni, ambayo itakuwa kweli kuboresha uzoefu user kwenye tovuti yetu. Tu recap ya haraka ya selectors JavaScript. Sisi tunajua kwamba wakati sisi download ukurasa HTML, ambayo inaenda kuwakilishwa katika DOM. 

DOM kumbuka ni mti huu kubwa ambapo mambo ni kuhusiana katika Hierarkia hii kubwa. Wakati sisi kazi na database katika pset 7, moja ya mambo ya kwanza sisi alihitaji kujua jinsi ya kufanya ni swala database. Sisi tuna hii watumiaji wakubwa meza, na wakati mwingine sisi nataka tu kusema, "Mimi nataka tu baadhi ya watumiaji hawa wanaofanana baadhi ya hali." Vile vile, wakati tuna DOM tunahitaji baadhi ya njia ya querying yake. Tunahitaji baadhi ya njia ya kusema, "Nataka wote wa vifungo ili kuangalia kama hii "Au yote ya picha kwenye ukurasa." Na hawa selectors kuruhusu sisi kufanya hivyo. Hivyo tu recap haraka. Hii moja ya kwanza hapa, hii # kuwasilisha, kile ni kwamba anaenda kuchagua? Je, mtu yeyote kumbuka? [Inaudible mwanafunzi majibu] >> Yeah, kwa uhakika. Hii ni kwenda kuchagua kipengele kwenye ukurasa kuwa ana ID ya kuwasilisha. Na ili tag hash anasema selector hii ni ya kwenda kufanya kazi na Vitambulisho. Vipi kuhusu moja ya pili, hii kujivuna., Itakuwaje kwamba kuchagua? Yeah. >> [Mwanafunzi] Hatari. >> Hasa. Hii sasa ni kwenda kuchagua na darasa. tofauti kati ya ID na darasa hapa ni ujumla ID lazima ziwe za kipekee ndani ya kila nafasi juu ya wewe ni kutafuta. Hivyo kama wewe walikuwa searching juu ya mtandao ukurasa mzima, wewe kweli lazima tu kuwa kipengele 1 na ID kwamba fulani, hivyo katika kesi hii ya kuwasilisha. Pamoja na madarasa, kwa upande mwingine, tunaweza kuwa na zaidi ya 1 ya kipengele katika ukurasa huo huo kwa darasa moja. Hii inaweza kuwa na manufaa kwa kusema nataka kuchagua kila kitu ambacho katikati juu ya ukurasa badala tu ya 1 kitu. 

Na hatimaye, hii moja ya mwisho hapa ni ngumu zaidi kidogo, lakini ni nini hii kwenda kuchagua kutoka DOM? [Inaudible mwanafunzi majibu] >> gani hiyo? [Mwanafunzi] Chochote kwamba tag. >> Tuna sehemu 2 hapa. sehemu ya pili ni kwenda kusema nataka kuchagua tags hizi na tag ya pembejeo, hivyo kipengele yoyote kwamba ni tag pembejeo. Lakini mimi sitaki tu kuchagua wote wa pembejeo kwa sababu kitu kama button kuwasilisha inaweza kuwa pembejeo na kitu kama sanduku Nakala inaweza kuwa pembejeo. Hivyo, pamoja na mabano mraba haya mimi kusema mimi nataka tu kuchagua vipengele wale ambayo ni ya maandishi aina. Mahali fulani katika lebo yangu HTML nina sifa kuitwa aina, na thamani ya sifa ya kuwa ina kuwa maandishi. Hivyo vipi kuhusu sehemu hii ya kwanza hapa? neno la kwanza la selector hii ni aina basi nina nafasi na kisha sehemu hii pembejeo. Je, hiyo kufanya, kuweka sura mbele yake? Hii ni kwenda kimsingi kikomo swala yetu. Inaweza kuwa kesi kwamba tuna baadhi ya pembejeo kwa ukurasa ambayo si wana wa fomu. Nini hii kufanya ni hii watasema mimi nataka tu tags pembejeo kwamba kuwa mahali fulani juu yao baadhi ya kipengele mzazi wa fomu. Na hivyo kwa njia hii tunaweza kufanya maswali haya zaidi kihierarkia hivyo hatuna tu kuchagua kila kitu vinavyolingana selector aliyopewa. Tunaweza aina ya kikomo upeo wa swala ambalo kwa kitu kingine. Hivyo sasa kwamba sisi kujua jinsi ya kuchagua vipengele kwenye ukurasa, hebu majadiliano kidogo kuhusu AJAX. AJAX ni kifupi bado trendy sana kwamba anasimama kwa JavaScript Asynchronous na XML. Ni hivyo tu hutokea kwamba XML ni baadhi tu ya njia ya kuwakilisha data. 

Kwamba aina ya umaarufu waliopotea hivi karibuni, hivyo X katika AJAX si kutumika wakati wote. Kimsingi, nini AJAX unaturuhusu kufanya ni kufanya maombi HTTP kutoka muktadha wa JavaScript. Wakati tuko katika kivinjari wetu na sisi ni navigering kuzunguka kurasa na sisi bonyeza kiungo, nini browser yetu ni kwenda kufanya ni kufanya ombi HTTP chochote kiungo sisi bonyeza. Lakini si kwamba daima bora kwa sababu kama hiyo kesi, basi kama Daudi alikuwa akisema, sisi daima na kufanya watumiaji bonyeza kifungo kuwasilisha au bonyeza kiungo ili kufanya kitu chochote kutokea ambayo inaenda kuhusisha ombi HTTP. Hivyo, pamoja na AJAX tunaweza kufanya maombi hayo kwa niaba ya JavaScript. Hiyo ina maana kila mtumiaji inaingiliana na ukurasa au kitu chochote kinachotokea, tunaweza kweli kufanya ombi kimpango na faili nyingine PHP kwenye tovuti yetu au kitu kingine chochote na kupata data kwamba faili kwamba mtemi. Hebu tuangalie mfano wa AJAX. Hii ni Fedha zetu CS50 ukurasa ambayo hopefully baadhi yetu ni ukoo. Tukiangalia HTML ya ukurasa huu, tunaona hapa kwamba nimepata aliongeza mambo machache, moja ambayo Nimekupa fomu hii ID. Nilivyosema id = "fomu-quote". Nimekuwa kufanyika hii kwa sababu tu ni kwenda kufanya hii kidogo rahisi kuchagua kutoka DOM tangu siwezi kufanya tu hoja rahisi sana. Nini nataka kufanya hapa ni nataka kurekebisha baadhi tatizo na Fedha CS50. Hivyo kama sisi kwenda finance.cs50.net, kila wakati nataka kupata quote, nina bonyeza hii Get Quote kifungo, na kwamba Kupata Quote kifungo basi inachukua yangu kwenye ukurasa mwingine nzima. Na kama nataka mwingine quote, nina hit button Nyuma na kisha ninapoandika katika, Mimi kupata quote, na mimi hit button Back. Hii kweli ni si bora user uzoefu. Nani ingekuwa kweli kutumia tovuti kama ni kuwa mwepesi wa kupata bei ya hisa? Basi nini tunataka kufanya na AJAX ni kuondoa kwamba hatua ya kwenda tofauti ukurasa ili kuona matokeo. 

Nini sisi ni kweli tu kuomba ni kwamba bei kweli ndogo, na kwamba tu kiasi kidogo cha kweli data. Hivyo hakuna haja ya mimi kwenda mwingine mzima HTML ukurasa, download nzima mwezi kundi ya HTML, labda download baadhi ya picha zaidi, baadhi nyingine CSS files tu kwa ajili yangu na kujibu swali rahisi sana ya jinsi ya kiasi gani hii gharama ya hisa. Pamoja na AJAX tunaweza kufanya hii rahisi sana. Tunaona hapa chini kwamba mimi nina kuunganisha katika faili JavaScript kuitwa quote.js. Hebu kweli kufungua faili. Si huko. Wote wa files yangu JavaScript ni kwenda kuwa iko katika HTML hivyo kwamba browser mtandao unaweza kupata hiyo. Kisha sisi kuwa directory tofauti hapa kwa JavaScript, na sasa hapa ni quote.js. Katika juu ya faili hii hii anasema hapa kwamba mimi nataka kusubiri kwa ukurasa mzima kwa kupakiwa kabla ya mimi kujaribu kufanya kitu chochote. Kwa nini ni kwamba lazima? Ni zinageuka kuwa Kilichofuata naenda kufanya hapa ni kuanza kuangalia kwa kipengele kwamba mechi baadhi selector. Kama JavaScript hii ni milele kunyongwa kabla ya kipengele hiki ni kubeba juu ya ukurasa, basi kila kitu mimi kujaribu kufanya ni si kwenda kufanya kazi kwa sababu mimi naenda kujaribu kuchagua kitu ambacho si huko bado. Hivyo hii line up juu anasema mimi nataka wewe kusubiri mpaka kila kitu ni kubeba hivyo sisi ni uhakika kwamba yeyote mambo nina kuangalia kwa kweli ni juu ya ukurasa. Hii ishara ya dola hapa ina maana mimi nina kutumia maktaba kuitwa jQuery. Hii maktaba jQuery kuturuhusu kutumia selectors haya kwamba sisi alimwangalia. Kwa kusema $ kisha kupita katika hoja hii kama # fomu-quote, Mimi sasa kuchagua kuwa fomu kuwa sisi tu alichukua kuangalia. Sasa mimi kuwa na uwakilishi wa kwamba fomu katika kumbukumbu kwa namna fulani. 

Kwenye kitu hiki sasa, hii ya uwakilishi wa fomu, Mimi sasa kutumia kazi wito kwa. Nini kazi hii haina ni itakavyo ambatisha handler tukio hilo. tukio kwamba sisi ni kwenda kusikiliza kwa ni tukio kuwasilisha. Hivyo wakati Clicks mtumiaji Kuwasilisha kifungo au mashinikizo Ingieni, tukio hili ni kwenda kwa moto. Kwa hooking katika hili, mimi sasa wanaweza override tabia default ya fomu. Bila hii JavaScript, fomu bila kuwasilisha kwa chochote PHP faili sisi kutumika katika sifa kwamba hatua. Lakini badala yake, mimi nina sasa akisema, ngoja, ngoja, ngoja, sitaki wewe kwa kweli kufanya hivyo. Nataka hii kutokea kabla ya kwenda na kujaribu kuwasilisha kwa baadhi faili PHP. Sasa nini nataka kufanya? Katika hatua hii mimi nataka kutumia AJAX namna fulani shehena katika kile bei ya hisa ni. Jambo la kwanza mimi haja ya kujua ni nini hisa user ni kuangalia juu. Ili kufanya hivyo mimi naenda kutumia mwingine selector. Hii ni selector tatu tuliyoyaangalia kabla. Hii inasema kwamba nataka kuanza mbali hii kipengele fomu na ID ya fomu quote-. Ndipo mahali fulani ndani ya fomu kuwa inabidi kuwe na kipengele pembejeo kwamba ina jina la alama. Kama sisi kuangalia nyuma katika HTML yetu, tumeona kwamba sisi alikuwa na mchango [jina = alama]. Hiyo ina maana kwamba hii ni kwenda kuchagua kwamba sanduku Nakala kwamba mtumiaji anachapa ndani. Hiyo ni nzuri. Tuna Nakala sanduku. Sasa sisi tu haja ya kujua nini ndani yake. Ili kufanya hivyo tunaweza kuwaita njia hii hapa, hii Val., na hii anasema mimi kujua nini Nakala sanduku wewe. Mimi nataka wewe uniambie nini ni mtumiaji typed katika sanduku kwamba maandishi. Sasa tuna string kuitwa ishara kwamba ni sawa kwa kila mtumiaji typed in Hiyo ni nzuri. Tunaweza kutumia kamba sasa kufanya maombi yetu. Hii ni kazi mpya hapa, hii $, ila tuko tena kwenda kuchagua vipengele, tunakwenda kuwa wito kazi tofauti ambao zinazotolewa kwetu na jQuery. Hii kazi AJAX ni nini kweli kwenda kufanya ombi hili HTTP. Hivyo tuna kuiambia mambo machache. Jambo la kwanza tuna kuwaambia kazi huu ni ambapo nataka ombi kwenda. Mahali fulani katika mradi wangu nina faili hii ndani ya saraka ya HTML kuitwa quote.php. Mimi wanaweza kupata faili hii, tuliona, tu namna hii, kama mimi kwenda kwenye localhost quote.php /. 

Mimi nataka JavaScript wangu kufanya ombi kwa ukurasa. Ni aina gani ya ombi sasa? Tuliona mbele ya kwamba fomu ina kuwa njia = "post" sifa, na hiyo ina maana ni kwenda kufanya ombi POST, hivyo si kwenda kuweka kitu chochote katika URL, badala ya kupata ombi, ambayo ingekuwa tu kuwa fired kama sisi tu kupatikana ukurasa kwa browser mtandao, kwa mfano. Sasa tumekuwa alisema nataka kufanya POST HTTP ombi kwa ukurasa iko katika quote.php. Wakati sisi kuwasilisha fomu, kumbuka tunaweza kupata pembejeo vipengele ndani ya fomu kuwa na kwamba kutofautiana $ _POST. Hadi sasa katika hadithi sisi si kweli alimtuma pamoja data yoyote. Tumekuwa tu alisema sisi ni kufanya ombi AJAX na hapa ni aina ya ombi sisi ni kufanya. Sasa tunahitaji kweli kutuma data baadhi ya ukurasa. Ili kufanya hivyo tunaweza kutumia mali hii inaitwa data. thamani ya mali hii ni kweli safu associative. Sababu hii ni inaruhusu sisi kutuma zaidi ya kipande tu 1 ya data. Hiyo ndiyo sababu tuna hizi braces curly hapa nested ndani ya hizi nyingine braces curly. funguo katika arrays haya associative ni kwenda kuwa kitu kimoja kama jina wale anahusisha katika mambo yetu ya fomu. Hiyo ina maana kwamba kama mimi kutuma pamoja na ufunguo wa ishara, kwamba maana ya ukurasa wangu PHP wanaweza kupata data hii kwa $ _POST [alama] tu kama sisi alifanya kabla tulipokuwa kuwasilisha fomu. Na sasa data halisi tunataka kutuma ni kwenda kuwa ndani ya thamani ya safu hii associative. 

Sisi kuhifadhiwa na andiko hili katika ishara variable walioitwa, na hivyo sisi ni kutuma pamoja sasa muhimu ya alama ya na thamani ya kila mtumiaji typed in Sasa tumekuwa kufanywa ombi hili HTTP, faili wetu PHP ina kunyongwa, na ni kwenda kutuma data baadhi ya nyuma sasa kwa mteja kwamba tu alifanya ombi hili. Sasa tunahitaji kujibu chochote server alisema kwetu. Ili kufanya hivyo tuna mali hii ya mwisho hapa aitwaye mafanikio. thamani ya muhimu hii ya mafanikio ni kweli kwenda kuwa kazi, na hii ni moja ya mambo ya kweli cool unaweza kufanya na javascript. Si tu unaweza kuwa na ints au arrays kama ndani ya thamani ya safu associative, tunaweza pia kuwa na kazi. Hivyo kwa kusema mafanikio, hii ni ufunguo wangu. koloni anasema hapa inakuja thamani, na sasa thamani ya hii ni kweli kazi. Hivyo hatuna haja ya kutoa kazi hii jina per se. Tunaweza tu kusema hii ni kwenda kuwa baadhi ya kazi. Ni kwenda kuchukua 1 hoja. hoja kwa kazi hii ni kwenda kuwa chochote server waliotutuma nyuma kutoka ombi. Kama wakati browser yetu inafanya ombi, server zituma kitu nyuma na browser lidhihirisha! katika mazingira ya AJAX sisi tu alifanya ombi, server alimtuma kitu nyuma, na sasa tuna kuwa kuwakilishwa kama kamba. Pamoja na kamba ya kwamba napenda tu kama kuonyesha kwamba katika ukurasa. Ili kufanya hivyo mimi naenda kuwa moja ya mwisho selector. Nataka kuchagua kipengele kwa bei ya ID. Hii ni div tupu kwamba nimepata umba kwenye ukurasa, na mimi nataka kuweka maudhui ya kwamba div kuwa chochote server waliotutuma nyuma. Nimekuwa kwa kweli iliyopita quote.php kidogo. 

Badala ya wito asimlipe na utoaji baadhi ukurasa, quote.php sasa ni tu kwenda magazeti nje thamani ya hisa kama kamba. Hivyo kama ungekuwa kwa kweli kutembelea ukurasa, ungekuwa tu kuona kwamba ile kamba ndogo ya kila bei ya hisa ni. Jambo la mwisho tunahitaji kufanya hapa ni tu kuhakikisha kazi hii anarudi uongo. Nini hii inasema ni kwamba kama nina ndani ya handler tukio na kwamba tukio handler anarudi uongo badala ya kurudi kweli, hiyo ina maana kwamba sitaki tukio awali kwa moto. Katika kesi hiyo, kama sisi hawakuwa na JavaScript na sisi in fomu, mtandao wetu Kivinjari kwenda kusema, "Mimi naenda kutuma data kwamba pamoja," na wao wanaenda kukutumia kwenye ukurasa mwingine. Kwa sababu sisi ni kutumia AJAX sasa, hakuna haja ya kutuma mtumiaji kwenye ukurasa mwingine. Sisi ni kwenda tu kuonyesha matokeo dynamically katika ukurasa huu huu. Sisi kweli si unataka waende popote, na mimi wanataka kukaa juu ya ukurasa huo. Hivyo kwa kurudi uongo, sisi kuhakikisha kwamba fomu haina kufanya hivyo kwa ajili yetu. Hebu kuangalia nini hii kwa kweli inaonekana kama. Quote yetu ukurasa inaonekana sawa. Hebu vuta hadi mkaguzi chini hapa ili tuweze kuona nini kinaendelea. Matokeo yake ni kidogo kidogo kubwa. Kumbuka kama sisi kufungua tabo Network, hii ni mahali ambapo tunaweza kuona yote ya maombi HTTP yanayotokea juu ya ukurasa. 

Kwa mfano napenda aina katika aapl na bonyeza Kupata Quote. Sasa tumeona kwamba sehemu ya Apple gharama baadhi idadi ya dola tu alionekana kwenye ukurasa, lakini URL hakubadili wakati wote. Kwa kweli, hapa ni ombi HTTP kwamba sisi tu alifanya. Tulimsihi POST kwa quote.php. Kwamba hufanya akili. Hii ni nini server waliotutuma nyuma. Ni tena hivi vikubwa HTML hati na picha na vitu kama hivyo, ni tu mstari wa maandishi, na kisha sisi tu visas mstari wa maandishi. Kama sisi kurudi nyuma kwa headers na kuona nini sisi kweli alimtuma ndani ya ombi hili HTTP, tunaweza kuona chini hapa kwamba sisi alimtuma pamoja na ufunguo wa ishara na thamani ya aapl, ambayo ni nini mtumiaji typed in Hii ni nzuri, lakini bado ni kidogo annoying. Mimi bado kuwa na bonyeza button hii ya kupata quote hisa. Sisi ni busy watu na hatuna muda wa bonyeza kifungo. Google barabara hii kidogo iliyopita wakati wao kutekelezwa Google Instant. Nini Google Instant gani ni kama wewe ni kuandika tu kuanza kuonyesha matokeo kwa wewe hivyo huna kuwa na wasiwasi juu hata kubonyeza Search. Kweli, hadithi fun kuhusiana na hilo. Mara Google Instant akatoka nje, watu walikuwa kama, "Ho, hii ni super ajabu." "Hii ni hivyo baridi." Na mwanafunzi chini saa Stanford ambaye alikuwa 19 wakati alifanya tovuti hii inaitwa YouTube Instant. Zote Instant YouTube huwa ni ufanisi kutafuta YouTube mara. Hivyo badala ya kuwa na kwenda kwa YouTube.com na hit Search, wakati mimi kuanza kuandika katika kitu YouTube Instant kama CS50, tunaweza kuona hapa kwamba ni kujaribu juu ya uhusiano polepole Internet populate matokeo haya kuishi. Ili kufanya hivyo tunaweza kweli kufanya muundo rahisi sana na faili wetu quote.js. Hivi sasa tuko attaching tukio hili wakati fomu ni kuwasilishwa. Sisi si kweli wanataka kufanya mtumiaji kuwasilisha kwamba fomu tena, hivyo hebu badala moto tukio hili kila wakati mtumiaji presses muhimu. Ili kufanya hivyo hebu kwanza kubadili tukio kutoka kuwasilisha keyup. Hiyo ina maana kwamba badala ya kusubiri kwa ajili ya kuwasilisha, kila wakati muhimu ni taabu, kitu kinaenda kutokea. Ni hakuna tena mantiki ambatisha tukio hili keyup kwa ajili ya wote. Sisi kwa kweli tu huduma ya juu sanduku kwamba search. 

Kuchagua kwamba sasa, tunaweza kubadili hili kuwa, badala ya fomu quote-, fomu-quote na sisi itabidi pembejeo (aina = asilia) au tunaweza kusema (jina = alama) - chochote tunataka. Sasa kuna moja ya mwisho kitu sisi kufanya. Kumbuka hapa chini wakati sisi alisema kurudi uongo sisi alisema hatutaki kuwa tukio default kwa moto. Lakini tu hivyo hutokea kwamba kama sisi Disable kwamba sasa, chochote sisi aina katika si kwenda kuonyesha juu katika browser tena kwa sababu hiyo itakuwa tabia default ya kuandika ndani ya sanduku asilia. Sisi tena wanataka override kwamba, hivyo hebu kuharibu kurudi hii ya uongo. Kama sisi ila na pakia ukurasa, sasa wakati mimi kuanza kuandika aapl utaona kwamba bei ya hisa chini hapa ni kumaliza moja kwa moja. Hivyo hapa ni CS50 Fedha Instant. Kweli hadithi kuhusu fun Instant YouTube ni mwanafunzi kuwa aina tu ya aliandika kama mradi 1-usiku, na siku ya pili alipewa kazi na Mkurugenzi Mtendaji wa YouTube. Hivyo kama rahisi kama kwamba, wewe CS50 wanafunzi, miradi yako ya mwisho wanaweza kupata kazi katika YouTube. Kitu kama hicho ni wazo kweli baridi kwa ajili ya mradi wa mwisho, haki? Tulikuwa na baadhi funktionalitet zilizopo kwamba sisi alitaka kuunganisha pamoja. Sisi kuboresha uzoefu user kidogo, na ghafla kutafuta kitu kwenye YouTube Instant inaweza kuwa rahisi sana kuliko kwa ajili ya kutafuta kwenye YouTube mara kwa mara. Basi hiyo ni AJAX kwa kifupi. 

Katika mifano ya kwamba Joseph alikuwa kuonyesha, tuliona mengi ya autocompletes, na wale autocompletes ni kweli, kweli Handy kwa sababu hatuna kukumbuka - Kwa mfano, kama huna kumbuka bei ya hisa kwa ajili ya Apple na sisi tu kujua ni aa kitu, badala ya kusema tu kwangu, "Sehemu ya jambo hili gharama hii fedha nyingi," Ningependa aina ya kama kujua nini hifadhi kuanza na aa. Tunaweza kufanya hivyo kwa kweli nicely na maktaba bootstrap ambayo tayari ni pamoja na ndani ya Fedha CS50. Kama wewe kuja hapa tag JavaScript na kitabu chini Typeahead, hii ni Plugin nzuri kwamba mtu tayari aliandika kwa ajili yetu, na sisi urahisi kutumia utendaji wake kama hii. Mimi typed katika na hapa ni orodha ya baadhi ya mataifa kwamba kuanza na A. Hebu kusema kwamba nadhani hii ni kweli baridi na ni wakati kwa ajili yangu na pamoja na hii katika ukurasa wangu. Ni zinageuka kuwa hii ni kweli, kweli rahisi. Hebu wanaruka juu hapa quote3.js. File yangu inaonekana tofauti kidogo. Chini hapa yote ya mambo yangu AJAX ni sawa. Nataka mzigo data hisa bila ya kwenda kwenye ukurasa mwingine. Lakini sasa mimi nataka kutumia Plugin. Nyaraka bootstrap ina mifano kubwa ya jinsi gani hasa naweza kufanya hivyo. Mimi nataka kusema, "Hapa ni pembejeo kwamba nataka oto kukamilisha juu," na mimi naenda kuwaita kazi hii inaitwa typeahead, na kwamba kinaendelea kushughulikia yote ya stuff Typeahead kwa ajili yetu. Itakuwa initialize orodha, ni kufanya yote ya filtering yetu. Kitu pekee inahitaji kujua ni nini data tuko autocompleting juu. Hivyo nimeona hii muhimu tu kwa kusoma nyaraka na kuangalia mifano. Kama mimi kutoa ufunguo wa chanzo, thamani ya muhimu hii ni baadhi tu ya safu ya mambo nataka oto kukamilisha juu. Variable Hii ilikuja kutoka faili hii nyingine. Mimi kufungua symbols.js. 

Hii ni symbols.js tu hii safu kweli, kweli kubwa zenye masharti wa wote wa ishara hizi hisa kutoka NASDAQ. Kama mimi nataka kuruka nyuma ya HTML, hivyo jharvard, vhosts, globalhost, html, templates, quote_form. Tangu hiyo sasa inaitwa quote3.js, basi mimi kubadili faili JavaScript mimi nina ikiwa ni pamoja na hapa. Sasa nina quote3.js, hivyo mimi nina kwenda kupakia katika faili kwamba tofauti JavaScript, moja ambayo ina kuwa oto kukamilisha bootstrap. Sasa wakati mimi kuruka nyuma browser, pakia ukurasa, na mimi kuanza kuandika aa, kuna oto kukamilisha yangu. Na ni kweli kama rahisi kama hayo. Mimi nilikuwa 1 mstari wa kanuni kwamba alisema tu, "Hapa ni mambo nataka oto kukamilisha juu," na ghafla nina hii funktionalitet kweli, kweli nzuri na mengi si wote wa juhudi wakati wote. Kama wewe ni kuendeleza tovuti na hasa mbele upande wa mwisho wa mambo, utaenda kupata hii ni kesi nyingi. Kuna mengi, mengi, mengi ya maktaba kweli cool bure huko nje kwamba kufanya hivyo ni super rahisi kufanya mambo kama hayo. Je, mtu yeyote kufikiri ya vikwazo yoyote ya tu autocompleting katika orodha hii kubwa ya alama? Je, inaweza kuwa kitu ambacho si bora na mfumo huu? Yeah. >> [Mwanafunzi] Muda, kama una mengi ya [inaudible] Yeah. Hivi sasa tuko kushusha huu mkubwa JavaScript faili na kuna mengi ya alama. Na hivyo kama sisi kuwa na tani ya mambo, aina hii inaweza kuongeza ya latency ya si tu kutafuta lakini pia kushusha faili halisi. Mkuu. Kitu kingine? Hivi sasa hakuna hali halisi ya umuhimu. Kama mimi aina katika, makampuni ambayo show up hapa wanaweza kuwa makampuni maarufu ya kwamba kuanza na A. 

Kabla ya mimi kupata Apple, inaweza kuchukua baadhi ya wahusika zaidi ili kupata nini nina kuangalia kwa. Hii oto kukamilisha haina maana hii ya umuhimu. Ni tu kwenda kusema, "Chochote kwamba mechi nitakacho kuonyesha." Badala ya kuwa, Ningependa namna fulani kuunganisha baadhi umuhimu katika upekuzi wangu. Kama mimi kwenda juu hapa Fedha Yahoo!, finance.yahoo.com, Kama mimi kujaribu kuingia alama juu ya ukurasa Yahoo! Fedha na mimi kuanza kuandika GOOG, nina orodha hii nzuri ya mambo. Wazi, inaonekana kama Yahoo! Finance ni kufanya kitu zaidi wajanja hapa. Wana baadhi ya umuhimu na wao pia wana maelezo ya ziada kama jina la hisa. Hiyo ni kitu ambacho siwezi kupata na tu orodha yangu ya hisa ya alama. Nataka hii na hivyo mimi nina kwenda kuchukua hiyo. Ili kufanya hivyo wacha kufanya mambo kadhaa. Hebu kwanza kufungua mkaguzi kwenye ukurasa huu kwa sababu tuliona kuwa ukurasa huu si reloading wakati wote, hivyo ni pengine kwa kutumia AJAX namna fulani kuwa upakiaji data zake. Tunaweza kujua nini data ni upakiaji. Kama mimi bonyeza tab hii Network, haya ni kwenda kuwa yote ya maombi kwamba kuanza kuwa fired. Sasa kama mimi aina katika goo, tunaweza kuona kwamba mimi tu got mpya HTTP ombi. Hii ni pengine ambapo data kwamba anakuja kutoka. Uhakika wa kutosha, ikiwa mimi kuangalia URL hii, ambayo ni kidogo strangely aitwaye, tunaweza kuona kwamba hii ni hasa ambapo Yahoo ni kutuma mbali data yake kutoka. 

Nimekuwa umba faili tofauti inayoitwa suggest.php kwamba sawa sana katika roho na kazi Luke. Ni kimsingi kwenda kufanya swala kwa URL Yahoo, kupata tena baadhi ya data, na kutuma nyuma yangu. Sasa, badala ya kutumia hii kubwa, kubwa orodha ya alama, Naweza kutumia Yahoo mambo umuhimu nice, na mimi hawana download kuwa mkubwa JavaScript faili. Mimi nina kwenda tu kubomoa alama hisa kweli husika. Hebu tuzame kwenye hilo. Hivyo html, JS. Sisi ni sasa katika quote4. Sasa sisi ni tena kutumia orodha kubwa ya files JavaScript. Lakini kuna aina ndogo ya tatizo kubuni hapa. Tumekuwa alisema kuwa katika AJAX ni Asynchronous. Nini maana ni kwamba wakati mimi kufanya ombi AJAX, hivyo hapa hapa kwenye mstari 8, hii ni wapi yangu ombi AJAX ni kweli fired. Hebu sema sasa mimi na baadhi ya kanuni chini hapa kwamba kinaendelea kufanya baadhi ya mambo kama tahadhari ya mtumiaji au kitu mabadiliko juu ya ukurasa. Nini haitaweza kutokea ni browser si kwenda kusubiri kwa ombi hili kuendelea kabla ya kuja chini na kupiga mstari huu. Hiyo sehemu Asynchronous. Ni kwenda kufanya ombi hili na kusema, "Kila wewe kumaliza, "Kurudi na wito kwamba kazi ambayo nilikuambia kuwaita ndani ya mafanikio." Hiyo ina maana hatuwezi tu download hifadhi yote kabla. Tunahitaji kufanya ombi na kusubiri kwa kitu kuja nyuma. Hiyo ina maana kwamba kabla, tunaweza tu kuwaambia bootstrap, "Hapa ni orodha ya mambo ya Mimi nataka wewe oto kukamilisha juu." Hatuwezi tena kufanya hivyo tena kwa sababu hatujui nini tunataka kweli oto kukamilisha juu. Kwa bahati, bootstrap mawazo ya hii kwa sababu wale ni smart guys zaidi ya hapo, na kwa kweli alitupa njia nyingine ya kupakia hii Plugin Typeahead. Kabla ya hapo, thamani ya mali hii chanzo mara tu hii safu kubwa ya mambo ya oto kukamilisha juu. 

Sasa mali chanzo ni kweli kazi, na madhumuni ya kazi hii ni kufikiri nini mambo oto kukamilisha juu ya ni. ndivyo itakavyo na takwimu kwamba ni nje ni kwenda kuuliza Yahoo! Finance nini mambo bora oto kukamilisha ni. Kwa kufanya kwamba mimi nina kwenda kufanya sawa sana AJAX ombi. Mimi naenda kuomba ukurasa huu katika suggest.php. Nataka kupeleka pamoja ishara bado. Na sasa mafanikio yangu, nyaraka bootstrap aliniambia kwamba ili populate kwamba orodha ya mambo, wote mimi haja ya kufanya ni kupita katika safu hii kwa sasa kazi callback. Lakini kusubiri dakika. Kama hii ni walidhani kuwa safu na AJAX ni kutuma mimi nyuma maandishi, jinsi ni kwamba inawezekana? Hii ni utangulizi njia mpya ya kubadilishana data kuitwa JSON. Katika kesi hii sisi siyo tu kutuma nyuma string rahisi ya maandishi. Sasa sisi ni kushughulika na orodha hii ngumu zaidi ya alama ya hisa. Alama hisa hizi pia ni pamoja na mambo kama jina la kampuni au bei ya sasa. Tu kwa kutumia kamba kubwa ya muda si kwamba formatted kwa njia yoyote kutabirika si kwenda kuwa njia bora ya kupata data hii kutoka server Yahoo kwangu katika njia ambayo mimi urahisi kuelewa. JSON ni teknolojia ambayo inachukua fursa ya jinsi sisi kujenga arrays associative katika JavaScript. Hii inaonekana mengi kama safu JavaScript associative, na kwa kweli, ni kwa sababu ni. JSON anasimama kwa JavaScript nukuu Object. Hii ni kimsingi walikubaliana juu format kwa ajili ya kuhamisha data na kurudi. Hapa hii JSON kitu au hii JSON associative safu ni kutuma yangu baadhi ya data kuhusu kozi. 

funguo wa safu hii ni mambo kama kozi ambayo ina thamani ya cs50, na chini hapa tunaweza kuona kwamba ninaweza kuwa thamani ambayo ni safu. Sina kufanya mambo kama Hazrat nje masharti na kuangalia kwa koma na kufanya mambo mambo kama hayo. Kwa sababu hii ni alitangaza katika hii format JSON, JavaScript na jQuery tayari wana kazi ya kubadilisha string kwamba inaonekana kama hii JSON katika safu halisi JavaScript associative kwamba tunaweza kufanya kazi pamoja. Kufanya hivyo ni rahisi kama kusema kwamba hakuna tena ni faili hii, suggest.php, kutuma mimi nyuma tu kamba ya maandishi, lakini najua ni kwenda kuwa na kutuma mimi nyuma JSON. Hiyo ina maana kwamba JSON kwamba inaweza kuwa waongofu katika safu JavaScript associative. Na hivyo jQuery, napenda wewe kufanya hivyo kwa ajili yangu. Hiyo ina maana kwamba hii parameter majibu hapa, hii ni tena tu kamba. Kwa sababu tumekuwa aliiambia jQuery kuwa inakuja baadhi JSON, jQuery ni kwenda kuwa smart kutosha kusema, "Wewe alitaka JSON?" "Mimi naenda kubadili kwamba katika safu associative kwa ajili yenu." Hebu kweli kuangalia tab Mtandao mara moja tuna quote4.js. Tutaweza kubadili hili na pakia ukurasa. Sasa mimi nina kwenda aina katika-tena. Nimekuwa alifanya maombi wanandoa suggest.php, lakini sasa hii majibu, badala ya kamba tu, ni JSON. Hivyo nina wazi curly brace akisema, "Hiyo inakuja safu associative." 

ufunguo wa kwanza na pekee ya safu hii associative inaitwa alama, na kisha hapa ni safu ya yote ya alama husika kuja sasa kutoka Fedha Yahoo!, si kutoka orodha kwamba gigantic. Hiyo ni jinsi gani naweza tu populate Plugin oto kukamilisha pamoja na baadhi ya data kwamba si kuja kutoka faili mtaa ambayo tayari predetermined lakini kutoka kitu kingine. Ni zinageuka kuwa tunaweza kweli kuchukua faida ya teknolojia iitwayo JSONP, au JSON na padding, kwamba kuondokana hii middleman suggest.php. Lakini badala ya kufanya hivyo, hebu badala ya kuangalia jinsi gani naweza kuboresha hii hata zaidi. Mimi kwa kweli kama Typeahead bootstrap ya. Ni kweli nice. Lakini sisi ni kupata bora katika JavaScript na tunataka aina ya kufanya hili sisi wenyewe, labda kuangalia nini Plugin hii inaweza kufanya. Hebu tena kutumia kitu Typeahead, na hebu jaribu kufanya orodha hii ya hifadhi ya alipendekeza wenyewe. Hapa katika quote6.php tunakwenda kuanza mbali kwa njia hiyo hiyo. Kila wakati mtu aina fulani, tunataka kufanya ombi AJAX. Hii ni sawa na Instant yetu ya awali CS50 Fedha. Badala ya kufanya ombi quote.php, sisi ni sasa na kufanya ombi faili kwamba sawa kama kabla, hii suggest.php, ambayo ni haki kwenda kuvuta data kutoka Fedha Yahoo!. 

Tena, bado tuko wanatarajia JSON, lakini sasa tangu Typeahead si kufanya hili kwa ajili yetu, sisi pia haja ya kutuma pamoja thamani kwamba ni ndani ya boksi sasa Nakala. Sasa sisi kujua nini kuuliza Yahoo! Finance kwa, na hivyo sasa hapa ni kazi ambayo tunataka kutekeleza mara moja ombi tamati. Hatuna Plugin kufanya orodha kwa ajili yetu, hivyo hapa ambapo sisi ni kweli kwenda kujenga orodha ya mapendekezo. Ili kufanya hivyo, kiasi kama katika PHP sisi concatenated masharti haya makubwa ya HTML kisha sisi kuchapishwa yao, tunaweza kufanya hivyo halisi kitu katika JavaScript. Kwanza tunakwenda kuanza mbali hii string kuitwa mapendekezo, na kamba hii ni kwenda tu na vyenye baadhi HTML. Sisi unataka kuwa katika orodha ya mambo, hivyo sisi ni kwenda kuanza mbali na tag orodha hii, na sasa tunakwenda iterate juu ya wote wa ishara waliokuwa wamerudi nyuma yetu. Kumbuka, kwa sababu tumekuwa alisema dataType: 'json', hii si kamba. Hii ni tayari safu kwa ajili yetu. Hiyo ni kweli cool. Tunaweza tu kusema, "Nataka append kipengele orodha." Tutaweza kuiweka ndani ya kipengele katika upande wa kwamba, tutaweza kuwapa darasa ya mapendekezo hivyo tunajua ni nini, na sasa hapa ni ishara kwamba sisi got nyuma kutoka Fedha Yahoo!. 

Mara tumekuwa umba kipengele kwa kila moja ya alama tumekuwa Gotten nyuma, sisi tu unataka karibu mbali orodha. Hivyo sasa mapendekezo inawakilisha hii kidogo HTML fragment kwamba wakati kuweka kwenye ukurasa ni kwenda kuwa orodha ya mambo ya sisi ni kuangalia kwa. Sasa hebu kweli kuweka kwamba kwenye ukurasa. Ili kufanya hivyo Nimekuwa kwa kweli umba mwingine div tupu na Nimekupa ni ID ya mapendekezo. Kiasi kama sisi kuweka yaliyomo div kwamba itakuwa kuonyesha bei ya data hisa, sisi sasa nataka tu kuweka yaliyomo div hii kwa kila kamba hii ni ambayo ina alama hizi. Kwa kutumia njia hii HTML, hii variable mapendekezo, hii kamba, ni kamba ya HTML. Mimi nataka wewe kuchukua HTML na kuiweka ndani ya div aitwaye mapendekezo. Tumekuwa tu umeongezewa kitu DOM sasa. Tumekuwa aliongeza baadhi ya vipengele mpya DOM kwamba sasa tunaweza kuonyesha kwenye ukurasa. Hebu kuona nini hii inaonekana kama. Kama sisi shehena katika quote6 na sasa sisi kuja nyuma, sasa wakati mimi kuanza kuandika aapl, hatuna tena kwamba bootstrap oto kukamilisha, lakini sisi sasa kuwa na orodha hii kwamba sisi alifanya wenyewe. Hii ni kidogo kidogo kuliko uglier Typeahead bootstrap, kwa mfano, lakini haina kuruhusu sisi kufanya kitu kimoja nyingine. Wakati sisi walikuwa kuangalia Plugin kwamba bootstrap, tuliona kwamba wakati sisi autocompleted, moja ya maadili oto kukamilisha ilikuwa aapl. Hiyo inaweza kuwa hivyo kusaidia. Kama mtumiaji, nipate si mara moja kutambua wote wa ishara ya hisa. Nini mimi pengine zaidi uwezekano wa kutambua ni kampuni ya majina halisi. Hivyo bila kuwa kweli kusaidia ikiwa badala ya kusema aapl hii alisema kitu kama Apple Inc Kwa sababu tumekuwa akavingirisha hii sisi wenyewe, tunaweza kweli kwa urahisi kufanya hivyo. Hebu kufungua quote yetu ya mwisho faili hapa, hivyo quote7. 

Same kitu. Nimekuwa tu umba faili nyingine PHP kwamba atarudi kwetu zaidi kuliko tu alama. Itakuwa pia kutupa nyuma majina ya kampuni. Na hivyo sisi ni kufanya kitu kimoja. Sisi ni kufanya ombi AJAX. Mara ombi amekamilisha, tunakwenda nitafanya kazi hii hapa, na kazi hii ni kwenda kujenga string kubwa ya vipengele. Lakini tofauti hapa ni kwamba thamani ya orodha hizi ni tena tu ishara, ni sasa jina. Hivyo tuna moja ndogo tatizo. Tunapotumia lookup yetu, tunahitaji kwa namna fulani kupita mfano. Hatuwezi kupitisha kitu lookup kama Microsoft Corporation. Tunahitaji kupita MSFT. Wakati sisi ni kuandika HTML, tuna kura ya sifa nzuri kujengwa katika. wanaweza kuwa na yanayohusiana na hayo href au darasa. Lakini nini sisi kweli wanahitaji sasa ni kwa kila moja ya viungo hivi kuwa ishara ya hisa yanayohusiana na hayo. Hakuna kujengwa katika sifa HTML kwa alama ya hisa, lakini bahati, HTML5 inaruhusu sisi kujenga wetu sifa mwenyewe kuwa chochote tunataka. Kwa kusema data-alama, nimekuwa ilianzisha sifa mpya ambaye jina mimi tu alifanya juu, na hii ni sawa kwa sababu mimi prefaced kwa data hii. Sisi ni kwenda kuhifadhi ndani ya huko ishara kutoka hisa sasa. Nini maana ya ni kwamba hata kama sisi ni kuonyesha thamani ya jina la kampuni ndani ya oto kukamilisha wetu, bado tuko kukumbuka alama kwamba ni kuhusishwa na kila kampuni. njia ya sisi ni kufanya kwamba ni ndani ya hii kipengele yenyewe. Hivyo kwamba maana tunahitaji kufanya moja zaidi mabadiliko. Wakati sisi bonyeza yake sasa, tunahitaji kweli kuchukua faida ya sifa ishara badala tu ya thamani yake. Kama sisi nyuma juu, sisi ambatisha handler tukio mapendekezo. Kila moja ya mapendekezo haya ni clicked sasa, nataka kufanya kitu. Nini nataka kufanya ni kubadilisha thamani ya sanduku kwamba pembejeo. Sasa nataka kuweka hiyo Val kazi. 

Hivyo bila hoja yoyote kazi hii Val anarudi wewe kile ambacho tayari katika sanduku asilia, lakini kama wewe kuwapa kamba, ni kwenda kuchukua kamba na kuiweka katika sanduku asilia. Mimi nina kuchagua matini yake sanduku kwa njia sawa. Jina Ni ni ishara ya ndani ya fomu quote-. Sasa mimi nina kupeleka thamani ya sifa data-mfano. Hii kitu hapa ni mpya, hii $ (hii). Nini hii inahusu ni kipengele kwamba alikuwa clicked. Tunaweza kuona hapa kwamba sisi siyo attaching tukio click kwa kila kipengele na darasa ya pendekezo binafsi. Badala yake, sisi ni wakikaribia tofauti kidogo. Badala yake sisi ni kusema kila kitu ndani ya hii div mapendekezo, ambayo kumbuka ni chombo tu kwa orodha hiyo, kama kitu ndani div hii ni clicked na ina darasa la pendekezo, Mimi nataka tukio hili kwa moto. Kimsingi nini maana ya hii tunaweza kufanya ni tunaweza kutumia tena hiyo tukio handler kwa mambo yote katika orodha. Hivyo hatuna kuwa tukio moja handler kwa kipengele kwanza na tofauti tukio handler kwa kipengele cha pili. Tunaweza kusema badala, "Nataka huo tukio handler yanahusu kila kitu katika orodha yangu." Lakini tunahitaji kujua namna fulani ambayo ilikuwa kipengele clicked. Hii "hii" keyword inawakilisha tu. Hii ni kifaa kwamba mara tu clicked kwa mtumiaji. Kama mimi tu clicked kiungo 3, hii inawakilisha kipengele cha kiungo kwamba 3, ambayo ina maana kwamba naweza kupata sifa yake, data-alama, ambayo tunajua ina vyenye alama hiyo kuhusishwa na kampuni mimi tu clicked. Kama sisi kuruka nyuma ya kupata fedha ukurasa wetu, tunaweza kuona kwamba mara sasa mimi kuanza kuandika kitu kama MSFT, sisi ni tena tu kupata alama ya hisa, sisi ni sasa kupata makampuni halisi. Lakini wakati mimi bonyeza mmoja wa makampuni haya, tunaweza kuona kwamba sisi ni kweli populating sanduku Nakala si kwa jina la kampuni lakini alikuwa na chochote kuhifadhiwa ndani ya sifa data hizo. Na hivyo kama mimi kweli kukagua moja ya mambo haya kwa haki kubonyeza ni na kubonyeza Kagua Element, tunaweza kweli kuona nini hii inaonekana kama. 

Kumbuka hili ni jambo ambalo sisi aliumba ndani ya kwamba kwa kitanzi tulipokuwa kujenga kwamba kamba ya HTML. Tunaweza kuona hapa kwamba hii data-ishara ina thamani ya MSFT, ambayo ni kubwa. Hiyo ni nini sisi walikuwa wanatarajia. Hiyo ni ishara na kwamba ni jinsi gani sisi got thamani ya kwamba sisi zinahitajika kutumia ndani ya sanduku hili asilia. Hiyo inatosha kwa ajili ya quote sababu hiyo ni aina ya boring. Hebu tu kufanya nyongeza baadhi ya haraka na kwingineko ukurasa wetu. Ikiwa umetumia CS50 Fedha kwa wakati na kuanza kununua na kuuza mengi ya hifadhi, hatimaye meza hii ni ya kwenda kupata pretty kubwa, na wewe ni kwenda kutaka ticker hisa, bila shaka. Mara meza ni kweli, kweli kubwa, inaweza kuwa na manufaa kwa mtumiaji kujaribu kutafuta juu yake. Ndani ya sanduku tafuta kama mimi kuanza kuandika kitu kama Disney na kuangalia kwa hisa wangu Mickey Mouse, tunaweza kuona kwamba meza sasa kuchuja kulingana na kile mimi tu typed in Utendakazi huu inaonekana super ngumu, lakini ni kweli, kweli rahisi na jQuery na javascript. Faili hii ni pamoja na faili portfolio.php JavaScript kuitwa portfolio.js. Hebu tuangalie kwamba. Hivyo html, JS, na kwingineko. Hapa ni mahali ambapo sisi ni kufanya kwamba kutafuta kwenye meza. Jambo la kwanza mimi haja ya kufanya ni ambatisha handler tukio sanduku kwamba Nakala kwa sababu tunajua kwamba tunataka kazi yetu kuchuja kwa moto wakati kila kitu kwa sababu mtumiaji mashinikizo hatuna wakati kwa vifungo Search. Jambo la kwanza tunahitaji kufanya ni kufikiri nini user ni kwa ajili ya kutafuta, tu kama sisi alifanya mbele. Hii inahusu Keyword kipengele sasa user ni mazungumzo na. 

Kwa sababu user ni mazungumzo na sanduku ya utafutaji, $ Hii inawakilisha sanduku utafutaji, hivyo this.val inatupa nini ndani ya sanduku tafuta mtumiaji sasa ni kuandika. Hivyo, sasa ni nini tunataka kufanya ni tunataka iterate juu ya yote ya mistari ndani ya meza yetu. Kuchagua aina ya safu katika meza yetu, mimi alitoa kwamba meza ID ya kwingineko meza, na kila mstari ni kuwakilishwa na kipengele TR, hivyo selector hii ni ya kwenda na kurudi kwangu safu kubwa ya mistari yote katika meza yangu. Sasa nataka iterate juu ya kwamba safu. Mimi naweza wewe kwa kitanzi, lakini jQuery kweli hutoa sisi kazi nzuri iitwayo "kila mmoja." Nini kila gani ni ya kila mmoja anachukua hoja, na hoja kuwa ni kazi. Nini ni kwenda kufanya ni itakavyo kuomba kwamba kazi kwa kipengele kila ndani ya orodha hii. Kazi hii inachukua moja hoja hiyo ni e, na wakati kazi hii ni kunyongwa, e hii ni kwenda kubadilishwa na safu ya kwanza, basi safu ya pili, na kisha safu ya tatu. Kwa njia hii, hii ni kitu kimoja kama mbio kwa kitanzi na kisha kuhesabia kipengele sasa msingi ndani ya index ya yako kwa kitanzi. Katika kila iteration, kwa kila moja ya mambo haya katika meza, Nataka kuangalia kama Nakala ya kipengele - Nakala ya kiini ndani ya safu - mechi nini mimi kwa ajili ya kutafuta. Hii kubwa ya muda mrefu ya kamba ya amri ni jinsi mimi naweza kufanya hivyo. Kwanza, tena, hii sasa inahusu - kwa sababu ni ya ndani ya kazi mpya - hii ni sasa mstari wa sasa katika meza. Nataka kuchukua mstari wa sasa katika meza, na mimi nataka kupata yote ya watoto wake. Kumbuka, DOM ni mti wa kihierarkia, ambayo ina maana kwamba mambo kuwa na idadi ya watoto. 

Hili watoto. Kazi anaenda kurudi mimi nyuma ya safu ya wote wa mambo kwamba ni watoto wa, katika kesi hii, mfululizo katika meza. Hii ni tu tu seli ndani ya mstari. Mimi nataka tu tafuta juu ya kiini kwanza. Kazi huu. Kwanza anasema nipe kipengele kwanza katika safu hiyo. Kisha kazi Nakala anasema kupata yangu hasa nini ndani ya kiini kwamba tangu mimi unataka kutafuta juu ya maandishi kwamba. Hatimaye, hebu kubadilisha kwa Herufi za chini, ili tuweze kufanya Nakala kesi maswali insensitive. Hatimaye, tunataka kuona kama kwamba kamba ndani ya meza ina string tuko kwa ajili ya kutafuta. kazi indexOf katika JavaScript anafanya tu. Inatuambia kama au kamba hii ina mwingine kamba. Kama ni kweli kwamba kiini ina nini mimi kwa ajili ya kutafuta, basi mimi nataka kuhakikisha kwamba ni umeonyesha. Njia show watasema, "Onyesha kipengele." Kama hii si kesi, basi hiyo ina maana chochote mimi nina kwa ajili ya kutafuta haipo ndani ya safu ya kwamba, na hivyo nataka kujificha ni kutoka kwa mtumiaji. Kinafikia kwamba nzuri ya kuchuja athari ambapo hakuna tena tunaona meza nzima. Kama wewe ni nia ya jinsi ya kufanya hii ticker kama vile, tutaweza post chanzo online. Lakini ni kweli rahisi. JQuery ina mbinu kushangaza kwa michoro haya na manipulating mali CSS. Hivyo, hiyo ni kwa ajili yangu. 

Nini basi uongo mbele? Kama utaona katika siku chache, mwisho miradi pendekezo ni kutokana. mwisho miradi pendekezo mapenzi ya kuuliza maswali machache, lakini kati yao itakuwa tatu Milestones - mmoja "nzuri" hatua, moja hatua bora, na bora. wazo kuwa kweli kusaidia guys kuweka matarajio yako ili minimally utakuwa na furaha na pato la mradi wako wa mwisho na itakuwa "nzuri" hadi sasa kama wewe ni wasiwasi. Lakini basi kwa maslahi ya kupata wewe kufikia kidogo tu kwa kitu bora au kitu bora, tutaweza pia aina ya kushinikiza wewe kuelekea kuwa vilevile. CS50 Hack-a-Thon, wakati huo huo, ni katika wiki chache. Kawaida, sisi kufanya hivyo kwa misingi basis bahati nasibu kwa sababu ya riba, lakini ni tabia mbaya tutaweza kuchukua mia wachache wetu katika mabasi kuhamisha kutoka Harvard Square chini Kendall Square ambapo Microsoft ina kituo nzuri aptly inayoitwa "Nerd" - New England Utafiti na Maendeleo ya Center. Tutaweza kupata huko karibu pm 8 Tutaweza kuwa na baadhi ya chakula. Around var kl 1 tutaweza kuwa na baadhi ya chakula zaidi. Around 5:00 ikiwa bado uko ari tutaweza kichwa juu IHOP au kuchukua wewe nyuma ya chuo. Lengo kuna kupiga mbizi katika miradi ya mwisho pamoja ya wanafunzi na wafanyakazi. Kisha siku chache baadaye ni Fair CS50, ambayo ni kweli maana ya kuwa fursa kwa wewe guys ya kuonyesha kazi yako na mafanikio kwa muhula wakati rubbing mabega na kila mmoja na kupata hisia ya kile kila mtu alifanya. Kwa kuwa alisema, wengi shukrani kwa Tommy na Yusufu, na sisi kuona juu ya Jumatatu.  [Applause]