[Powered by Google Translate] [Vika 9, Áframhaldandi] [David J. Malan - Harvard University] [Þetta er CS50. - CS50.TV] 

Þetta er CS50. Þetta er endir Vika 9. Þakka þú mjög mikill. Lokum. Vika 9. Ég fékk hann. Í dag höldum við áfram samræðum okkar um forritun vefur með auga í átt að lokaverkefni, ekki vegna þess að þú þarft að gera eitthvað vefur-undirstaða fyrir lokaverkefni heldur því annaðhvort að lokaverkefni eða eftir CS50 þetta er vissulega átt sem nútíma hugbúnaður er að fara. Og enn er það í raun ekki auðvelt hlutur. Í raun einn af the herða hluti til að gera er að þáttur í hönnun. 

Til dæmis með því að hönnun er átt við í raun að fá á notendaviðmóti eða reynslu notenda rétt. Ég eflaust - og við vitum úr nýlegri vandamál setja þegar nokkrar af þér aired innantökur þína um nokkur stykki af hugbúnaður eða vélbúnaður sem infuriates þig, hvort sem er á háskólasvæðinu eða Slökkva - There 'a einhver fjöldi af staður út there, there' a einhver fjöldi af vélbúnaði út there, þannig sjúga. En raunin er sú að það sem er auðvelt að nota enn er þó öflugur er mjög erfitt verkefni. Svo í dag ég spurði Joseph og Tommy að ganga mig upp hér svo að við getum haft samtal, bæði um hönnun og hvers konar hugsun ætti að byrja að fara í gegnum höfuðið þegar þú hannar lokaverkefni þinn, framtíð viðleitni þína. Og svo með hjálp Tommy er að við munum líta á sumir af the framkvæmd smáatriði. Hvernig er hægt að hafa einhverja sýn á pappír eða í huga þínum sem þú getur þá keyrt kerfisbundið með því að nota sumir af the tækni og aðferðir sem við höfum bara byrjaði að tala um, þ.e. JavaScript og eitthvað jafnvel nýrri, þ.e. AJAX, ósamstilltur JavaScript. Það leyfir þér að búa til allt meira dynamic í notendaviðmót því að sækja fleiri og fleiri gögn smám frá miðlara. Svo við munum sjá sumir af þeim snifsi og í dag. Sem innskot, ef þú ert áhuga á að einbeita í tölvunarfræði eða aukagrein í tölvunarfræði, vita að á föstudaginn á hádegi í Maxwell Dworkin 221 verður pizza atburði þar sem þú getur lært aðeins meira um tölvunarfræði. Á leið út um dyrnar í dag munt þú vera fær um að ná upp óopinber leiðarvísir CS í Harvard. Við munum setja það á ruslinu dósum utan á hæð mitti þannig að ef þú vilt að grípa þetta og læra aðeins meira um CS, sem mun vera til staðar fyrir þig eins og það var í viku 0. Einnig ef þú vilt tengja okkur fyrir CS50 hádeginu á föstudaginn á 1:15, höfuð til cs50.net/lunch. Án frekari fjaðrafok, ég gef þér kennslu náungi Joseph Ong. Hæ. [Lófaklapp] Takk. Í fyrsta skipti sem ég lærði um hönnun var í bekknum hér kallast CS179. 

Prófessorinn á þeim tíma sagt okkur söguna um annars prófessor sem höfðu farið á hótel og notaði Blöndunartæki. Getur einhver sagt mér hvað the 2 hnappa á vinstri og hægri að gera? [Nemandi] Heitt og kalt. >> Heitt og kalt. Gott. Það sem þú búast við að jafnaði, ekki satt? Þessi prófessor eftir að nota blöndunartæki vill fara í sturtu, og hann gengur að nota þetta. Hann telur vinstri og hægri hliðar eru fyrir heitt og kalt, ekki satt? En getur einhver sagt mér hvað þetta í raun og veru að gera? Allar hendur? [Inaudible nemandi svar] >> Ein tillaga er? [Inaudible nemandi svar] >> Hitastig? Svo ræður einn af þeim hita og aðra stjórna? >> [Nemandi] vatnsþrýstingur. Vatnsþrýstingur. Gott. Þessi prófessor gengur í þetta og hugsa að þeir eru að stjórna heitt og kalt, snýr rétta, sem hann hugsar er fyrir heitt, alla leið upp því hann vill fara í heita sturtu. Jæja, þetta er ekki í raun passa upp, svo hann fær þetta ekki mjög gaman reynslu að vera í köldu sturtu, og við vitum öll hvað það líður eins. Þetta er dæmi um hönnun galli. Það sem ég meina með því sem er von hans frá blöndunartæki ekki passa það sem kom út úr sturtu, sem er eins konar óheppileg fyrir hann. Svo er þetta dæmi um hönnun galli sem gerist í raunveruleikanum. En við sjáum alls konar öðrum sjálfur eins og heilbrigður. Við erum líklega ekki aðdáendur MBTA kerfi. Þetta er neðanjarðarlestinni kerfi í raun í London, sem segir: "Þessi takki er ekki í notkun." Hvers vegna er það jafnvel á það? Hvers vegna eigum við sama enn? Þegar ég var krakki, að vera tækni kunnátta einn í húsinu, þegar tölvan myndi hrun, mamma mín myndi koma til mín, sýna mér þennan skjá og spyrja mig hvað gerðist. 

Jafnvel Ég veit ekki hvað þetta þýðir. [Hlátur] What? [Hlátur] Stundum við teljum eins og forritara er bara trolling okkur. Eins og notendur við erum eins, "Hvað er að gerast? Einhver segja okkur." Þetta allt kemur niður á útgáfu hönnun. Hönnun, sem við getum séð, er ekki eingöngu um fagurfræði, það er ekki um hvernig hlutirnir líta út. Við sjáum hér að þessi litli hvellur-upp hérna í raun útlit laglegur ágætur. Það hefur falla skuggi í bakgrunninum, það hefur landamæri radiuses fara á. Það er góður af nokkuð. Það er ekki mjög vel hönnuð því það er ekki mjög notendavænt. Það lítið pop-up sem kemur upp er í raun ekki að gefa mér einhverjar upplýsingar um hvað er að gerast, er það ekki að segja mér neitt sem notandi um hvernig á að batna frá því villu. Við viljum að hugsa um hluti sem hönnun er ekki. Fyrst er það ekki fagurfræði. Það er heldur ekki að troða app með tonn af óþarfa virkni. Ef þú ert Thai veitingastað, sennilega þú vilt ekki að vera tannlæknir á sama tíma. Og með Facebook spurningum ekki að margir nota það og það var í raun ekki kjarninn í því sem þeir voru að byggja. Og svo það er gott að hugsa um ekki svo mikið magn af því sem að þú ert að setja á umsókn þinni en gæði og hvernig þú ert að gera þá reynslu notenda betur við raunverulega bæta við það sem þú hefur nú þegar. 

Í hnotskurn, hönnun segir okkur hvað við eigum að byggja upp. Til dæmis, ef við erum að byggja upp eitthvað sem láta okkur leita það upp, eins og Google, til dæmis, að við að gera hlutina á þann hátt sem krefst þess að notandi að taka fullt af smellum til að fá það sem þeir vilja, eða ættum við að gera það á þann hátt, td með Google Instant eða AutoComplete sem leyfir okkur að fá að niðurstöður okkar hraðar? Engineering felur, eins og Tommy mun sýna þér, í raun að byggja það. There ert hellingur af tegundum af hönnun. Til dæmis, ef þú ert að byggja upp eitthvað til að dreifa eitthvað í þriðja heims landi þar sem það er ekki mikið rafmagn eða að miklu tækni, þú þarft að hanna það sem þú ert að byggja upp á þann hátt sem auðvelt veitir aðgang að fólkinu þar. En hvað konar aðrar ákvarðanir hönnun gæti það verið eða gæti verið að taka þátt í einhverju svona? Já. Ég sé hönd. [Inaudible nemandi svar] >> Right. Einmitt. Aðgengi er eitt. A einhver fjöldi af fólk dont 'hugsa um, "Hvað með notendur mínum?" eins og öfgar hvors vali. Ég notendur sem kunna að hafa fötlun sem ég er ekki að hugsa um og ég er bara að hugsa um að hanna fyrir almenna notendur. Netið er aðgengilegur við alla nú á dögum, og ég ætti að vera að hanna fyrir þá eins og heilbrigður. Hvers konar aðrar ákvarðanir hönnun getur þú gert? Já. >> [Nemandi] Kostnaður. Kostnaður. Mjög gott. Annar hlutur sem við gætum byggt hönnun ákvarðanir okkar á er kostnaður. Ef við erum fyrirtæki, vilt þú að byggja eitthvað sem tekur ekki mikið kostnaður til að framleiða en getur selt á sérstaklega hár kostnaður eða hægt að fá okkur smá hagnaði. 

Þetta eru allt mismunandi tegundir af hönnun, en þegar við erum að byggja eitthvað á Netinu eða þegar við erum að byggja upp eitthvað sem líklega ekki kosta það mikið að byggja upp nú, eins og forrit Internet - Þú þarft ekki að kasta mikið fjármagn inn í það til að gera eitthvað sem virkar - það sem við erum meiri áhyggjur er notandi reynsla. Við köllum þetta notanda miðju hönnun. Í meginatriðum hvað notandinn miðju hönnun felur er að setja ykkur í spor notenda. Ef merki einhver upp fyrir það sem ég er að byggja upp, þeir eru búnir að koma augljóslega við tiltekna umsókn mína með markmið í huga, með verkefni sem þeir vilja til að ljúka. Og starf þitt er ekki aðeins að hjálpa þeim að klára það verkefni heldur til að hjálpa þeim að klára það verkefni á þann hátt sem er duglegur, innsæi, og, eins og sumir maðurinn sagði þarna, aðgengileg. Hvað þýðir skilvirkni meina? Skilvirkni þýðir hversu hratt er notandi minn ljúka verkefni gefið tengi minn. Er það tekið mikið af smellum fyrir þá að komast frá einum stað til annars? Er það leiðinlegur? Gera þeir þurfa að framkvæma margar endurteknar verkefni? Við viljum gera það ferli eins skilvirkt og mögulegt er svo þeir þurfa ekki að gera þær tegundir af hlutum. Eins og fyrir intuitiveness, sem er, til dæmis, ef notandi lítur upp tengi mína, það er auðvelt fyrir þá að komast frá einum stað til annars? Er það auðvelt fyrir þá að reikna út hvað þeir þurfa að smella á tengi minn í röð fyrir þá til að ná því markmiði eða verkefni sem þeir vilja til að ná? 

Og að lokum, eins og einn maður sagði þarna, aðgengi er mjög mikilvægt. [Karlkyns ræðumaður] Það kemur að aðgengi fyrir hluti eins og sjón, eins og hvernig ég hanna í raun eitthvað fyrir einhvern sem er blindur? Oh. Fyrir fólk sem getur ekki séð í allt, höfum við eitthvað sem kallast skjár lesendur. Það sem þú ættir að gera er að þú ættir að byggja vefsvæðið þitt á þann hátt að, til dæmis, sérstök tækni sem við köllum - There ert hellingur af hlutum núna. Ég held að það séu skjár lesendur heitir JAWS. A einhver fjöldi af þessum hlutum að treysta á það sem við köllum svæði reglur til að lesa fyrir notandann hvaða er til staðar á síðunni. Fyrir þá sem fólk sem getur ekki séð, þú þarft að ganga úr skugga um að þessi skjár lesendur getur í raun tekið upp efni á síðunni og geta í raun sýna notendum, ef þú getur ekki séð, að minnsta kosti getur þú samt skilja innihald á síðunni. Já. Allt í lagi. Nóg að tala um góða hönnun. Við skulum tala um slæma hönnun. Þetta eru hlutir sem þú ættir ekki að gera. Getur einhver sagt mér um reynslu þeirra með craigslist og það sem þeir hugsa er ekki svo mikill um þessa hönnun? Já. >> [Nemandi] Ég held að það er of mörg orð í einu sviði. Of mörg orð, ekki satt? Alveg yfirþyrmandi. Þú kemur á þessa síðu og þú ert heilsaði með a heild búnt af hlutina upp hér sem gæti ekki einu sinni máli til þín. Til dæmis, býrð þú í einu ríki sem er ekki að byrja með þessum bókstaf. Segjum að þú býrð í Texas eða eitthvað. 

Þú þarft að fletta alla leið niður á síðunni til að fá til the staðsetning þú ert á. Ég er frá Boston, svo látið mig líta í Massachusetts. Hvar er Massachusetts? Ó, það er hérna. Ó, það er Boston. Allt í lagi. Við skulum líta á Boston. [Hlátur] Pretty yfirþyrmandi, ekki satt? Óþægilega hluti þarna. [Hlátur] Við skulum segja að ég er að leita að stað til að lifa. Hversu margir hafa í raun notað craigslist? Tonn af þér. Það eru ansi slæmur leiðir til að líta á þetta, en við skulum líta á þetta. Hver er munurinn á milli IMG og mynd? Getur einhver sagt mér? Það raunverulega er enginn munur. Þeir meina nákvæmlega það sama, en þeir hafa mismunandi merki fyrir þá fyrir sumir ástæða. Ef ég smelli á hefur ímynd, ekkert gerist á síðunni. Ég hef í raun að smella á Leita aftur fyrir eitthvað að gerast. Hvað gæti verið betra hönnun ákvörðun sem hægt var að gera þar? Ef ég er að smella á þessi sía, vil ég líklega til að sía eftir viðkomandi aðgerð eða flokk. Svo í stað þess að þurfa að ýta Leita aftur, gat ég bara sjálfkrafa að gera sía konar Google stíl þar sem þeir gera það þegar í stað. [Malan] En ekki myndast eins og við höfum séð þá hefur hingað til að vera líkamlega fram með hitting inn að minnsta kosti eða að smella á hnappinn? Eins og þú hefur séð þá svo langt, hefur þú í raun að smella á Senda til að gera þá hluti. 

En eins og Tommy mun sýna þér annað, það eru í raun leiðir fyrir þig þannig að þegar þú smellir á þessi hlutur og það getur sjálfkrafa að senda það sem við köllum að AJAX beiðni og fá gögn aftur og sía niðurstöður samstundis. Það eru tonn af hlutum sem eru rangt með þessu tengi. [Malan] þú getur leitað Cambridge? Það er eitthvað örlítið anomalous hér þar sem þér þykir vænt um Cambridge og enn þú ert að fá Westford, Spring Hill, West Newton og þess háttar. Sennilega ekki hugsjón. >> Sennilega ekki hugsjón. Hvernig gæti ég verið fær um að gera reynslu notandans betur á þessari tilteknu síðu? Já. >> [Nemandi] Leiðbeiningar. Allt í lagi. Leiðbeiningar í hvers konar skilningi? [Nemandi] Til dæmis, a hlutur fyrir fyrstu notendur tíma, sem ekki einu sinni vita hvað Craigslist er eða þú veist ekki hvað þú ert að gera. Hægri. Svo útskýrir hvað Craigslist er á þessari síðu er mikilvægt. Við getum í raun segja notendum hvað þessi síða er í raun fyrir. Ef ég er bara að heimsækja það, ég a heild búnt af stöðum. Ég veit ekki einu sinni hvað þeir meina. En meira um vert, bara að horfa á þetta tengi, man ég þurfti að fletta niður tonn af hlutum til að finna tiltekna samfélag sem ég aðgát í raun um á þessu. Hvað er að festa vegur ég gæti gert það? Já. [Nemandi] skipta þeim upp í austur, vestur svæðum. >> Lagi. Ég gæti skipta þeim í fleiri flokka sem gæti hjálpað mér að ákvarða hraðar hvernig á að fá til viðkomandi stað. [Nemandi] Settu fellilista. >> Einmitt. Allt í lagi. Ég gæti notað fellivalmyndinni því að við höfum fastan sett af hlutum og við gátum sýnt þeim í fellilistanum. Þannig að það er ekki tekið upp svo mikið pláss á skjánum. En jafnvel betri en þessi, hvað getum við gert? Já. >> [Inaudible nemandi svar] >> Getur þú sagt það aftur? >> [Nemandi] leitargluggann. Já, leita kassi. Það er frábært. Það sem við getum í raun gert er að ef við lítum til baka á renna, leitargluggann. Sjálfvirkri útfyllingu. Mjög einföld leið til að leita í gegnum niðurstöður sem þú þekkir er í mengi. Ef ég byrja að slá BO, sýna bara mér allar árangri sem BO inni í þeim. Þannig ég get mjög auðveldlega fundið tiltekna sem ég vil að fara í í stað þess að þurfa að fletta í gegnum þetta mjög stór listi. 

Þetta eru alls konar mjög lág-hangandi ávöxt sem einhver sem er að innleiða craigslist geta í raun gert til að gera reynslu á vefsvæði mun betri fyrir tiltekna notandi þeirra. Allt í lagi. Nóg að tala um slæma vefsíður. Við skulum tala um Facebook. Þegar Facebook kom út, og einkum Facebook myndir, það voru fullt af öðrum þjónustu á þeim tíma sem gæti gert nákvæmlega sömu hlutina. Þeir gætu skipuleggja myndirnar þínar í albúm. Það sem þú gætir gert er að þú getur raða þeim í sett eins og heilbrigður. Þú getur raða þeim eftir dagsetningu. Þú getur gert allt þetta tiltekna hluti. En er einhver vita hvað gerði Facebook myndir sprungið á þeim tíma sem hún kom út? Já. >> [Nemandi] Tags. >> Tags. Einmitt. Við höfum Milo hérna, sem er hundur Mascot okkar með því CS50 Bandana. Þú getur séð að við höfum þessa merkingu í miðju. Og hvað gerði Facebook myndir svo áhugavert úr nothæfi sjónarhorni er það leyft í raun fólk í gegnum þetta til að taka vini sína á myndum sínum. Fyrir Facebook, þar sem vefsíða þeirra er sérstaklega félagslega, það er um að byggja þessa tegund af félagslegu umhverfi. Það að bæta reynslu af myndum miklu meira vegna þess að þeir gætu í raun að byrja að segja: "Þetta eru tengsl milli fólks, og þetta eru myndir um fólk sem þér þykir vænt raun um. " Hluti af því er líka raðað narcissism. Fólk eins og að vera komin í myndum og svoleiðis. Þó það er ekki endilega gott manna eiginleiki, á sama tíma sem það er byggt á góðum ákvörðunum hönnun vegna þess að fólk í raun sama um hluti eins og þessa. Svo er að Facebook myndir. 

En við skulum tala Facebook almennt. Ég er viss um að hellingur af fólki hér hafa skoðanir á Facebook, bæði góðar ákvarðanir hönnun og lélegar ákvarðanir hönnun. Svo skulum veg eða vera hamingjusamur. Komdu á. Ég veit allt um þig að nota Facebook. Einhver þarf að hafa eitthvað slæmt að segja eða eitthvað gott að segja um það. Já. [Nemandi] Í fréttastraumi það er margt sem ég er ekki alveg sama um. The fréttir fæða hjartarskinn sýna fullt af hlutum sem þú getur ekki vænt um. Þú átt vini á Facebook sem þú hefur ekki hitt í 2 eða 3 ár og þú sérð fréttir niðurstöður þeirra pabbi upp í fóðri fréttir og þú þarft ekki alveg sama um það. Facebook hefur í raun gert tilraun til að gera þetta betur, og þeir hafa í raun reynt að ýta niðurstöðurnar til the toppur af the fréttir fæða frá seint svo þú sérð raunverulega hluti af vinum sem eru viðeigandi fyrir þig eða nánum vinum þínum. Nokkuð fleira? Já. [Inaudible nemandi svar] >> Getur þú sagt það aftur? [Nemandi] Auglýsingarnar eru tiltölulega lítt áberandi. >> Í hvaða skilningi? [Inaudible nemandi svar] Þeir hafa ekki ljós á skjánum, eins og borðar. Allt í lagi. Það er gott. Ef þú manst internetið frá '90s - >> [Malan] ég var þarna. >> Hann var þar. [Hlátur] Þú gætir muna blikkandi Hreyfimyndir bakgrunn, sparkly hluti, Geocities stíl tegund af hlutur. Það er í raun ekki dæmi um góða hönnun því það er mjög truflandi frá Google. The Yale list website notað til að hafa Hreyfimyndir sem bakgrunnur þeirra og þú getur ekki lesið neitt á síðunni, en ég held að einhver raunverulega talaði við þá og nú er það svolítið öðruvísi. [Malan] Það er miklu betra núna. >> Það er miklu betra núna, eins og þú getur séð. >> [Malan] Ó já. Bara frábært, bara - Já. Allt í lagi. 

Hluti af því er líka að gera síðuna þína hugsanlega mjög lægstur og mjög skiljanlegt svo það á síðunni rennsli á þann hátt sem er mjög rökrétt og fæ ekki í vegi hvers annars. Konar hvað um annars eru góðar um Facebook eða slæmt um Facebook? Við skulum bara hafa hönnun samtal hér. Oh. Hvar? Já. [Nemandi] Hin nýja Timeline kerfi gerir þér kleift að leita uppsetningu viðkomandi um fortíð þeirra. Ooh, Tímalína. Timeline er a mikill hlutur vegna þess að það gerir þér kleift að læðast vinum þínum til baka þegar þeir voru í menntaskóla. Timeline er gott vegna þess að það leyfir þér að sía í gegnum efni mikið hraðar, það er hægt að finna það sem hefði annars tekið þig mjög langan tíma að finna bara að fletta upp og niður, upp, upp, upp, upp, upp, eins og að fara aftur í tímann. En þá er það líka svoleiðis í hæðir til að í skilmálar af reynslu notenda. Hvað gæti það verið? Big orð sem byrjar með P-R. >> [Nemandi] Privacy. >> Privacy, ekki satt? Privacy er a gríðarstór notandi reynsla vandamál. Þetta er eitt af því sem ég hata mest um Facebook núna. [Hlátur] [Malan] Eins og ég nú. Davíð vissi ekki þetta raunverulega gerðist fyrr en í gær. Svo nú veit hann að í hvert skipti sem ég spjalla honum að ég veit að hann hefur verið að hunsa mig. [Malan] óþægilega hluti var ég var í raun að hunsa hann, og ég vissi ekki að hann vissi að ég var að hunsa hann. [Hlátur] Privacy er a gríðarstór vandamál. Getur einhver hér sagt mér hvað gæti verið slæmt um Facebook næði auk þess sem þeir gera hlutina eins og þetta? Hvað er það sérstaklega erfitt að gera með tilliti til Facebook einkalíf? Þessi tegund af er leiðandi spurning. Já. >> [Nemandi] Fela myndir frá ákveðnum fólki. Hægri. Einmitt, til að fela myndir úr tilteknum fólk. Þeir hafa þetta litla, litla hnappinn í efra hægra sem gerir þér kleift að skipta einkalíf mynd. Næði valkostur þeirra eru mjög mismunandi á milli mismunandi tegundir af matseðlum. 

Þeir hafa fengið mikið betri um það undanfarið, en það er notað til að vera raunin að þegar þú vildir koma í veg fyrir vinum þínum frá að sjá myndir, þú þyrftir að fara í gegnum mjög flókið 5-þrepa ferli að vera eins og, láta mig smella á þennan hlekk, nú láta mig smella aftur, láta mig smella aftur, láta mig tilgreina sem fólk getur ekki séð myndirnar mínar. Það er ekki sérstaklega góður á hálfu Facebook vegna þess að svo mikið um reynslu notenda er í raun að gefa þeim frelsi að stjórna hvað fólk getur séð. Við köllum þetta notandanafn stjórn og frelsi. Ef þú ert ekki að láta notendur gera það á þann hátt sem er duglegur og innsæi, þá er notandi reynsla þín ekki raunverulega þessi mikill á öllum.  Vilt þú krakkar eins og að segja neitt um Facebook? Hvernig slekk ég þetta burt? [Ong] Þú getur ekki slökkva á þessu, og það er a gríðarstór nothæfi galli af hálfu Facebook. Þessi eiginleiki - ég leit reyndar inn í það í gær - það er annað hvort að þú getur ekki gert það eða það er grafinn einhvers staðar mjög djúpt á lífæðar Facebook vegna þess að ég get ekki fundið út hvernig á að slökkva á þessa virkni í öllum. [Malan] En stundum þessar ákvarðanir eru ekki augljós Þar sem þú krakkar hafa gefið okkur mikið af gagnlegum endurgjöf á ýmsum CS50 umsóknir og vefsíður að sjálfsögðu notar. Við höfum ekki innleitt allar þessar beiðnir og ábendingar. 

Hluti af því er að fá svo margar beiðnir um að það er fall af tíma, en stundum við tökum bara meðvitaða ákvörðun eins og "Þakka þér fyrir ábendinguna, en við ósammála." Svo hvernig gera þú ákveður í raun hvað þú ættir að gera ef notendur held þú ættir að gera eitthvað jafnvel ef þú gera ekki endilega? Það er fínt jafnvægi milli raun að hlusta á hvað notendur þínir segja og í raun og veru að hafa einhvers konar línu þar sem þú segir, "Við ætlum ekki að gera það sem þessir notendur segja." Og sérstaklega, ég held að það var tilvitnun frá Henry Ford sem dregur þetta upp nokkuð vel. "Ef ég hefði beðið fólk um það sem þeir vildu, myndu þeir hafa sagt að þeir vildu festa hesta." Getur einhver konar stríða sundur hvað að vitna í raun þýðir? Það er ekki bara að notendur vita hvað þeir vilja, en það er meira að - [Nemandi] Þeir vita ekki hvað er mögulegt. Hluta sem þeir vita ekki hvað er mögulegt. Stríða að sundur svolítið meira. Hvað áttu við með því? [Inaudible nemandi svar] Það er gott. Það sem ég held að við erum að reyna að segja hér er að fólk veit hvað þeir vilja. Þeir vilja hraðari hesta. Það sem þeir vilja raunverulega er hæfni til að færa hraðar, en þeir í raun ekki vita miðil sem að ná því. Þegar þú kemur til notenda og notendur þínir segja þér eitthvað og þeir segja þér, "Við viljum þessa þætti og þessar aðgerðir og þessar aðgerðir," þú vilt ekki endilega að hugsa um, "Leyfðu mér að fara á undan "Og framkvæma það sem þeir segja skýrt," en það sem þú vilt að hugsa um er, "Hvers konar hugmyndir get ég fengið úr því?" Hvað gera þeir vilja í raun og veru? 

Og þaðan sem þú getur gert er að hanna eitthvað sem uppfyllir þessar beiðnir en ekki endilega á þann hátt sem notandinn ráð það að vera fullnægt. Svo fyrir eitthvað eins og lokaverkefni, í mjög raunvirði hvað er gagnlegt leitandi þegar það kemur að því að gera eitthvað betur, sérstaklega ef hönnuður hefur þetta hroka um hann þar sem þú veist svona hvað er best, þú might taka inntak frá notendum, en hvernig gera þú fara í raun um að fá þessi viðbrögð? Í lokaverkefnum mjög concretely, hvað framleiðir bestu niðurstöðurnar hér? Hvað framleiðir bestu niðurstöðurnar - og ég mun fara yfir þetta í annað - er þetta ferli að þróa og prófa og þá iterating. Það sem ég meina með því að prófa er venjulega þegar þú hannar eitthvað þú heldur að það er nokkuð gott, eins og: "Ég er svo mikill hönnuður. allir eru að fara að elska það." Og þá setja það þarna úti og fólk í raun ekki eins og það fyrir sumir ástæða. Það sem þú þarft að gera er að þú þarft að taka hluta af því sem fólk líkar og hressa upp á það sem fólk líkar ekki. Það hljómar eins og a mjög augljós ferli, en þetta ferli stöðugt iterating ofan á það sem þú hefur nú þegar byggt er ferli sem hjálpar þér ekki aðeins betrumbæta eigin hönnun færni heldur einnig hjálpar þér að betrumbæta hönnun þannig að fólk þakka reyndar vöruna enn meira en þeir gerðu áður. 

Ég fer yfir fleiri áþreifanleg dæmi um hvað þú getur í raun gert. Eins konar síðasta dæmi um vöru, við skulum líta á kajak. Kajak þegar hún kom út var mjög vinsæll. Getur einhver giska á hvers vegna? Hvaða tegund af hlutum sem þú vilt um þetta ef þú hefur notað það eða hvað eru tegund af hlutum sem þú líkar ekki? Já. >> [Inaudible nemandi svar] >> lagi. Það er hluti af því er að láta notandann hafa fyrirspurn sem er meira þenjanlegur en mjög takmarkandi einn eins, "Þú verður að velja dagsetningu þinn "Og þú verður að velja lokadagsetningu." Í raun, leyfir það þú vera sveigjanlegur um það og það gefur þér allar flug á þeim svið. Nokkuð fleira? [Nemandi] Þær fela í sér gjöld á verði. Þau innihalda gjöld á verði. The skattar og hlutir fara í raun beint í því verði í efri vinstri þannig að þú ert ekki brögð í að hugsa um að þú ert í raun að borga fyrir $ 240 flug þegar það er í raun 330 $. Nokkuð fleira? Já. [Inaudible nemandi svar] Ég er ekki viss um að ef þeir láta í raun að gera það. Ég gæti verið rangt. Það gæti verið áhugaverður hlutur ef þú vilt setja meiri þyngd á tilteknum filters þannig að þeir ýta niðurstöður tengjast þeirri síu á toppinn. En getur einhver sagt mér hvað er svo sérstakt við þessa vinstri? Hvernig fannst þér að líta jafnan upp flug á internetþjónustu fyrir þetta? 

Já. >> [Inaudible nemandi svar] >> Getur þú sagt það - [Nemandi] Öll flugfélög. >> Já. Hver flugfélag hefur eigin vefsíðu sinni. Þetta styrkir það. Og? [Nemandi] Þú veist nákvæmlega hvað þú ert að fara. Þú veist nákvæmlega hvað þú ert að fara, en tengist síur sérstaklega. Leyfðu mér að draga upp kajak. Ó Guð, pop-ups. Bad notandi reynsla. Hvað gerist þegar ég flyt þetta renna? [Nemendur] Sjálfvirkar uppfærslur. >> [Ong] Sjálfvirkar uppfærslur. Það er eitthvað sem er mjög mikilvægt. Áður en þetta, þegar þú vildir að fletta upp í flug, þú þurftir að setja í stað inntak þinni, framleiðsla staðsetningu þína, stutt á Leita það myndi vinna að og sýna niðurstöður þínar. Ef þú vildir breyta fyrirspurn þína, myndir þú verða að ýta aftur tvisvar, inn í nýju fyrirspurn frá grunni, og þá gera það aftur og aftur. The ágætur hlutur óður í eitthvað svona er það notar mjög [óskiljanlegur] hlutur í miðju. Alltaf þegar þú að gera eitthvað eins og þetta, skýtur það burt beiðni og það skilar þér allar niðurstöður strax. Þessi tegund af innri viðbrögð er eitthvað sem gerði kajak stórlega vinsæll því það er mjög auðvelt fyrir mig að bara breyta fyrirspurn mína og til að reikna út hluti sem eru í kringum tiltekna án þess að þurfa að fara fram og til baka, fram og til baka, fram og til baka. Svo þetta eru alls konar hlutir sem þú vilt að hugsa um þegar þú ert að hanna vefsíðu þína. Hvernig get ég gert það mjög duglegur fyrir notendur mínir að fara í gegnum það sem þeir eru að vinna á og að fá að lokum markmiði eins fljótt og auðið er? [Malan] og benda Jósefs fyrr um notendur ekki endilega að vita hvað þeir vilja, miðað við það sem þið nú vita um HTML og þú hefur reitina, takkana skaltu velja valmyndir, inntak sviðum og þess háttar, hvernig myndir þú framkvæma hugmyndina um tína upphafstíma fyrir flug? 

Hver af þessum ýmsu aðferðum UI myndir þú nota? Ef þú veist bara magn af HTML sem var kennt áður og þú veist að aðföng eru takkana, reitina, falla-hæðir, og inntak kassi, hvað myndi náttúrulega val þitt hefur verið að tína dagsetningar? [Nemandi] Inntak. >> Inntak. Eða kannski jafnvel falla niður með öllum dagsetningum, ekki satt? Svo með flóknari HÍ kerfi eins og þetta á vinstri hlið sem þú getur innleiða, þú getur gert þetta ferli mun meira innsæi með a renna vegna þess að tími er stöðugt, og fólk yfirleitt gera ekki hugsa um það í skilmálar af stakur klumpur. Allt í lagi. Síðast hlutur. Tíu nothæfi heuristics. Allir hlutir sem við ræddum um falla líklega undir einn af þessum flokkum. Ef þú ferð á þennan tengil, sem síður verða settar á netinu, þú munt í raun að vera fær um að, eins og þú hannar síðuna þína, halda þessum heuristics í huga og þessar reglur þumalfingur. Fyrir verkefni sem ég legg til að þú gera í því skyni að hanna app betur er að gera pappír prototyping fyrst. Þegar þú ert að hugsa um umsókn þína, mjög fljótt skissa það sem þú vilt það til að líta út eins og og ganga úr skugga um alla reiti er raðað á þann hátt sem er mjög leiðandi fyrir notandann til að nota og jafnvel sýna þessum pappír frumgerð til vina og byrja rýnihópunum. Bara fá 2 eða 3 manns saman og biðja þá bara tappa á þessum pappír frumgerð, og sýna þeim nýjar skjár til að sjá hvort að þeir skilja í raun hvað er að gerast. 

Það sem þú vilt gera er að gefa þeim verkefni, hvetja það verkefni, og bara gefa þeim app og láta þá nota það. Ekki gefa þeim leiðbeiningar umfram það. Þú vilt í raun og veru að láta þá hafa samskipti við app á þann hátt sem gerir þér kleift að sjá hvernig þeir myndu nota það ef þú værir ekki að standa við hliðina á þeim. Og það er mjög mikilvægt. Það mun gefa þér fullt af innsýn að fólk fá um tiltekna hluti á þann hátt sem ég hafði ekki ætlað þeim? Eru þeir með sérstaka kerfi UI á skjánum á þann hátt sem er góður af hacky? Ég vissi ekki ætla að þá að gera það þannig. Og þegar þú ert búinn með það, hvað þú vilt gera? Hönnun björg þín, ekki satt? Það sem þú vilt gera er að þú vilt að þróa og gera það ferli aftur. Svo sýna það til vina þegar þú hefur þróað það, prófa það, þróa, prófa, þróa, prófa, iterate, á og á og áfram. Hönnun er mjög endurtekningu ferli í þessum skilningi. Þú ert í raun að byggja upp eitthvað og þá átta hluti um það að þú vissi ekki áður og fara aftur og bæta úr því. Nú, eins og fyrir þróun hluti, það er það sem Tommy er að fara að sýna þér eftir brot og hvernig þú might vera fær um að framkvæma eitthvað eins AutoComplete á þann hátt sem er nokkuð einfalt. [Malan] Eins og Tommy setur upp hér, spurning þá. A einhver fjöldi af fyrstu vefsíður - og þegar Jósef sagði 1990 stíl website, það var gerð þar sem ef þú vildir velja byrjun tíma og lok tíma, hreinskilnislega, aftur í dag og jafnvel á sumum vefsíðum í dag, eins og þú að gera þetta er að velja klukkustund frá a falla-dúnn, þú velur mínútur frá a falla-dúnn, kannski þú velur AM, PM, og þá gera það 3 sinnum í. Og svo með 6 smelli og kannski sumir að hreyfast notandi getur raunverulega veita einhvers konar dagsetningu og / eða tíma svið í þessum skilningi. 

Svo ákveðið suboptimal og enn svona langt að við höfum séð neina tjáningar getu í einhverjum af þeim tungumálum sem við höfum horft á að gera eitthvað sexier svona sleða tími upphafs-og lokatíma. En ef þú heldur aftur að viku 0 þegar við ræddum um grunni, þar líka að það voru ekki búnaður sem bara gerði ákveðna hluti. Þú virkilega bara haft þessi grundvallaratriði eins og lykkjur og skilyrði og þess háttar. Svo svona bara að hugsa mjög abstrakt nú, óháð efnisatriðum í HTML, Hvað er raunverulega að gerast með eitthvað eins og þessa byrjun tíma og lok tíma renna? Þegar ég flyt músina mína og ég smellt á þessi litla gulrót tákn á vinstri og byrja að draga, kerfisbundið, hvað er það sem þú vilt vera fær um að framkvæma til að gera það gerast? Hvaða spurningar, hvað Boolean tjáning sem þú vilt vera fær um að spyrja? Hvað er raunverulega að gerast? Sammy? [Nemandi] Hvar er staða bendilinn? >> Good. Hvar er staða bendilinn? Þetta var eitthvað sem við þurftum til að tjá aftur í grunni, hvort sem það var byggt á staðsetningu eða jafnvel lit eða þess háttar. Þú gætir muna alltaf svo stutta stund á mánudaginn voru allir af þessum hlutum sem kallast viðburðir í heiminum á vefnum, og þannig að það er hlutur eins onClick og onkeypress og onkeyup og onMouseOver og onmouseout. Svo ljóst að jafnvel þessir hlutir sem við höfum verið að taka sem sjálfsögðum hlut á vefnum með síðum eins og Facebook og Gmail, jafnvel ef þú hefur ekki hugmynd hvernig þú myndir hugsanlega koma að því að það er ekkert, jafnvel eins og það á fyrirlestri eða Vandamál Set 7, átta sig á að með þessum nákvæmlega sömu grundvallaratriði, með HTTP og breytur og FÁ og POST, með helstu HTML inntak sem við höfum skoðað í svona langt og á augnabliki við forritanlegur kerfi sem er Tommy um að kynna getur þú byrjað að tjá þig eins og þú gerðir í viku 0 með mjög innsæi draga og sleppa. 

Svo með því að segja, Tommy MacWilliam og nokkur ný stykki púsluspil fyrir okkur vefnum. Allt í lagi. Ég heiti Tommy og ég ætla að tala um JavaScript. Bara Fyrirvari: Ég er þeirrar skoðunar að JavaScript er besta forritunarmál í öllum allan heiminn. There ert hellingur af fólki sem ósammála mér, en það er bara ótrúlegt. Þegar þú ferð aftur til C, ef þú ert að skrifa C í öðrum flokki eða nokkrum öðrum tungumálum, það er bara mjög pirrandi í öllum lágmark-láréttur flötur upplýsingar sem þú þarft að fá hika við niður inn Svo ef þú ert alltaf tilfinning dapur um hversu pirrandi C er að skrifa, bara fara aftur, skrifa nokkur JavaScript. Það er nirvana. Þú munt líða miklu betur um slæma daginn. A einhver fjöldi af the galdur af JavaScript kemur frá getu þess til að vinna það sem eru nú þegar á síðunni. Þegar við skrifuðum PHP forskriftir okkar, voru þau keyrð á miðlara, og að lokum að PHP handrit framleiðsla líklega sumir HTML. Þessi HTML var send til viðskiptavinarins, og það var það. Ef PHP langaði að bæta við takka til síðu, til dæmis, getur það í raun ekki að gera það. Það þyrfti að gera alveg nýtt HTML skjal og senda það til the flettitæki. Með JavaScript við vitum að við getum uppfært hluti á meðan þeir eru nú þegar á síðunni, og vegna þessa að við getum veitt miklu meiri augnablik endurgjöf, sem raunverulega bæta upplifun notenda á heimasíðu okkar. Just a fljótur ágrip af JavaScript selectors. Við vitum að þegar við sækja HTML síðu, það er að fara að eiga fulltrúa í DOM. 

Dom er bara muna þetta stór tré þar þættir tengjast í þessu stóra stigveldi. Þegar við unnið með gagnagrunna í pset 7, einn af the fyrstur hlutur sem við þarf að vita hvernig á að gera var fyrirspurn í gagnagrunninn. Við höfum þetta stór notendur borð, og stundum viljum við bara að segja, "Ég vil bara nokkrar af þessum notendum sem passa sumir ástand." Á sama hátt, þegar við höfum DOM við þurfum á einhvern hátt að fyrirspurn það. Við þurfum á einhvern hátt að segja: "Ég vil að allir af the hnappur sem líta svona út "Eða allar myndirnar á síðunni." Og þessar selectors leyfa okkur að gera það. Svo bara fljótur ágrip. Þetta fyrsta hér, þetta # leggja, hvað er að fara að velja? Hefur einhver man? [Inaudible nemandi svar] >> Já, nákvæmlega. Þetta er að fara að velja stak á síðunni sem hefur ID fram. Og svo segir að kjötkássa merki þetta val er að fara að vinna með auðkenni. Hvað um hitt, þetta. Miðju, hvað það velur? Já. >> [Nemandi] Class. >> Einmitt. Þetta er nú að fara að velja með bekknum. Munurinn ID og bekk hér er almennt ID ætti að vera einstakt innan hvaða pláss þú ert að leita á. Svo ef þú varst að leita yfir heilt vefsíðu, þú ættir bara 1 þáttur með þeim ákveðna auðkenni, þannig að í þessu tilviki leggja. Með flokka, hins vegar getum við haft fleiri en 1 þáttur á sömu síðu með sama flokki. Þetta gæti verið gagnlegt fyrir að segja að ég vil velja allt sem er fyrir miðju á síðunni frekar en bara 1 hlutur. 

Og að lokum, þetta síðasta hérna er svolítið flóknara, en hvað er þetta að fara að velja úr DOM? [Inaudible nemandi svar] >> Hvað er það? [Nemandi] Nokkuð sem er merki. >> Við höfum 2 hlutum hér. Seinni hluti er að fara að segja að ég vil velja þetta merki með merki inntak, svo allir þáttur sem er inntak merki. En ég vil ekki bara velja allt inntak vegna þess að eitthvað eins og senda inn hnappinn gæti verið inntak og eitthvað eins og textareitinn getur verið inntak. Svo með þessum hornklofum ég að segja að ég vil bara að velja þá þætti sem eru af textagerð. Einhvers staðar í HTML tag ég hafa eiginleika sem kallast tegund, og gildi þess eiginleika að vera texti. Svo hvernig óður í þessum fyrsta hluta hér? Fyrsta orð þessum val er mynd þá hef ég pláss og þá er þetta inntak hluta. Hvað þýðir það að gera, að setja mynd framan á það? Þetta er að fara að í grundvallaratriðum að takmarka fyrirspurn okkar. Það gæti verið raunin að við höfum sumir inntak á síðunni sem eru ekki afkomendur formi. Hvað þetta mun gera er þetta mun segja að ég vil aðeins inntak tags sem hafa einhvers staðar fyrir ofan þá sumir foreldri þáttur formi. Og svo á þennan hátt getum við gert þetta meira hierarchic fyrirspurnir þannig að við gerum ekki bara að velja allt sem passar tilteknu val. Við getum konar takmarka umfang þeirrar fyrirspurn til eitthvað annað. Svo nú er að við vitum hvernig á að velja atriði á síðunni, við skulum tala svolítið um AJAX. AJAX er samt mjög töff skammstöfun sem stendur fyrir ósamstilltur JavaScript og XML. Það gerist bara svo að XML er bara leið til að tákna gögnin. 

Það konar misst vinsældir að undanförnu, þannig að X í AJAX er ekki notað allan tímann. Í grundvallaratriðum, hvað AJAX gerir okkur kleift að gera er að gera HTTP beiðnir af samhengi JavaScript. Þegar við erum í vafranum okkar og við erum að siglingar um síður og við smellt á tengilinn, hvaða vafra okkar er að fara að gera er að gera HTTP beiðni til hvaða tengill við smellur. En það er ekki alltaf hugsjón vegna þess að ef það er raunin, þá er Davíð var að segja, við þurfum alltaf að gera notendur smella á senda inn hnappinn eða smelltu á tengilinn í því skyni að gera eitthvað gerast sem er að fara að taka til HTTP beiðni. Svo með AJAX við getum gert þessar beiðnir hönd JavaScript. Það þýðir að þegar notandinn hefur virkni á síðunni eða eitthvað gerist, getum við í raun að programmatic beiðni einhverjum öðrum PHP skrá á heimasíðu okkar eða eitthvað annað og sækja gögn sem þessi skrá spits út. Við skulum taka a líta á dæmi um AJAX. Þetta er CS50 Finance síðu okkar sem vonandi sumir af okkur eru kunnugir. Ef við lítum á HTML á þessari síðu, við sjáum hér að ég hef bætt við nokkrum hlutum, eitt sem ég hef gefið þetta form auðkenni. Ég hef sagt id = "mynd-vitna". Ég hef gert þetta bara vegna þess að það er að fara að gera þetta svolítið auðveldara að velja úr DOM þar sem ég get bara gert mjög einfalda fyrirspurn. Það sem ég vil gera hér er að ég vil að festa sumir vandamál með CS50 fjármálaráðherra. Svo ef við förum til finance.cs50.net, hvert skipti sem ég vil fá tilboð, ég er að smella á þennan fá tilvísun hnappinn, og það Fá Quote takkann þá tekur mig í annað alla síðuna. Og ef ég vil annan quote, ég þarf að ýta á Back hnappinn og þá skal ég slá það inn Ég fá tilboð, og ég lenti þá á Bakk hnappinn. Þetta er í raun ekki besta notandi reynsla. Hver myndi virkilega nota síðuna ef það er svo hægt að fá hluti verð? Svo er það sem við viljum gera með AJAX fjarlægja þessi skref að fara á sérstaka síðu til að skoða niðurstöður. 

Það sem við erum í raun aðeins að biðja um er að mjög litlu verði, og það er bara mjög lítið magn af gögnum. Svo er engin þörf fyrir mig að fara aðra allt HTML síðu, sækja nýjan hópur HTML, kannski sækja sumir fleiri myndum, nokkrar aðrar CSS skrár bara fyrir mig til að svara að mjög einfaldri spurningu hversu mikið er þetta lager kostnaður. Með AJAX við getum gert þetta mikið auðveldara. Við sjáum hérna að ég er að tengja í JavaScript skrá sem heitir quote.js. Við skulum í raun að opna upp að skrá. Ekki þar. Allar JavaScript skrár mín eru að fara að vera í HTML þannig að vefur flettitæki geta nálgast það. Þá erum við með sérstakan möppu hér fyrir JavaScript og nú er hér quote.js. Efst á þessari skrá þetta segir hér að ég vil bíða eftir öllu síðu til að hlaða áður en ég reyni að gera neitt. Hvers vegna er það nauðsynlegt? Það kemur í ljós að næsta sem ég ætla að gera hér er að byrja að leita að frumefni sem passar sumir val. Ef JavaScript er alltaf framkvæmd áður en þátturinn er hlaðinn á síðunni, þá allt sem ég reyni að gera er ekki að fara að vinna því ég ætla að reyna að velja eitthvað sem er ekki þarna ennþá. Svo segir þessa línu upp ofan ég vil að þú að bíða þar til allt er hlaðinn þannig að við erum að tryggja að allir þættir sem ég er að leita að er í raun á síðunni. Þetta dollaramerki hér þýðir að ég er að nota bókasafn sem heitir jQuery. Þetta jQuery bókasafn leyfa okkur að nota þessar selectors sem við horfði bara á. Með því að segja: þá liggur í sem rök þessa # mynd-quote, Ég er nú að velja það form sem við tók bara að líta á. Nú hef ég framsetning því formi í minni einhvern veginn. 

Á þennan hlut nú, þessi framsetning formi, Ég er nú að nota aðgerðina sem kallast á. Hvað þessi aðgerð gerir er að það er að fara að hengja atburður dýraþjálfari. Ef að við erum að fara að hlusta á er á senda atburð. Svo þegar notandi smellir sem senda inn hnappinn eða þrýstir á Enter, Þessi atburður er að fara að skjóta. Með því að krækja í þetta, get ég nú forgang á sjálfgefna hegðun formi. Án JavaScript, formið myndi leggja til hvað PHP skrá við notuðum í þeirri aðgerð eiginleiki. En í staðinn, ég er nú að segja, bíddu, bíddu, bíddu, ég vil ekki að þú í raun að gera það. Ég vil þetta að gerast áður en þú ferð og reynir að leggja að einhverju PHP skrá. Nú hvað vil ég gera? Á þessum tímapunkti vil ég nota AJAX einhvern veginn að hlaða í það verð á hlutabréfum er. Það fyrsta sem ég þarf að vita er hvaða birgðir sem notandinn er að leita að. Til að gera það sem ég ætla að nota annað val. Þetta er þriðja val við skoðuðum áður. Það segir að ég vil byrja á þessu formi þáttur með ID Form-vitna. Þá einhversstaðar inni í því formi að það þarf að vera inntak þáttur sem hefur nafn tákn. Ef við lítum til baka á HTML okkar, sáum við að við höfðum aðkomu [nafn = tákn]. Það þýðir að þetta er að fara að velja að texti kassi sem notandinn er að slá inn. Það er gott. Við höfum í textareitinn. Nú þurfum við bara að vita hvað er inni í honum. Til að gera að við getum kalla þessa aðferð hér, þetta. Val, og það segir að ég veit hvaða texti kassi sem þú hefur. Ég vil að þú segir mér hvað það er notandinn slegið inn í þessi textareitinn. Nú höfum við band heitir tákn sem er jafn hvað notandinn slegið inn Það er gott. Við getum notað þessi streng núna til að gera beiðni okkar. Þetta er nýtt hlutverk hér, þetta $, nema að við erum ekki lengur að fara að velja atriði, við erum að fara að hringja í aðra aðgerð sem er veitt okkur með jQuery. Þetta AJAX virkni er það sem er í raun og veru að fara að gera þetta HTTP beiðni. Þannig að við verðum að segja það nokkrum hlutum. The fyrstur hlutur sem við þurfum að segja þessa aðgerð er þar sem ég vil að beiðni að fara. Einhvers staðar í verkefni sem ég hef þessa skrá inni af HTML skrá sem heitir quote.php. Ég get nálgast þessa skrá, sáum við, rétt eins og þetta, ef ég fer til localhost / quote.php. 

Ég vil JavaScript mína til að gera beiðni á þá síðu. Hvaða tegund af beiðni núna? Við sáum áður að mynd hefur þessi aðferð = "eftir" eigindi, og það þýðir að það er að fara að gera a staða beiðni, svo það er ekki að fara að setja neitt í slóð, fremur en fá beiðni, sem myndi bara vera rekinn ef við skoðuð bara síðu með vafra, til dæmis. Nú höfum við sagt að ég vil gera HTTP POST beiðni á síðu sem staðsett er á quote.php. Þegar við senda inn mynd, man að við gætum sjá inntak þætti inni í því formi við að $ _POST breytu. Svo langt í sögunni höfum við ekki í raun sent með öll gögn ennþá. Við höfum bara sagt að við erum að gera AJAX beiðni og hér er gerð af beiðni sem við erum að gera. Nú þurfum við í raun að senda nokkur gögn á síðunni. Til að gera að við getum notað þessa eign heitir gögn. Verðmæti þessa eign er í raun tengin array. Ástæðan fyrir þessu er að það gerir okkur kleift að senda meira en bara 1 stykki af gögn. Þess vegna höfum við þessi hrokkið axlabönd hér hreiður inni í þessum hrokkið axlabönd. Tökkunum í þessum tengin fylki eru að fara til vera the sami hlutur sem þeir nafn eiginleika í þætti formi okkar. Það þýðir að ef ég sendi eftir lykli á tákni, sem þýðir PHP síðuna mína geta nálgast þessi gögn með $ _POST [Tákn] bara eins og við gerðum áður þegar við vorum að senda inn mynd. Og nú í raun gögn sem við viljum senda er að fara til vera the gildi innan þessa tengin array. 

Við geymd þennan texta í breytu sem heitir tákn, og svo erum við að senda eftir nú lyklinum tákn og gildi hvað notandinn slegið inn Nú höfum við gert þetta HTTP beiðni, PHP skrá okkar hefur framkvæmt, og það er að fara að senda nokkur gögn til baka núna til viðskiptavinar sem bara gert þessa beiðni. Nú þurfum við að bregðast við hvaða miðlara sagði okkur. Til að gera að við höfum þetta síðasta eign hér kallast árangur. Verðmæti þessa velgengni lykill er í raun að fara að vera virka, og þetta er eitt af því sem raunverulega kaldur hlutur sem þú getur gert með JavaScript. Ekki aðeins er hægt að hafa ints eða fylki sem gildi inni á tengin array við getum líka haft hlutverk. Svo með því að segja vel, þetta er lykill. A ristill segir hér kemur gildi, og nú er gildi í raun virka. Þannig að við þurfum ekki að gefa þessa aðgerð nafn í sjálfu sér. Við getum bara sagt þetta er að fara að vera fall. Það er að fara að taka 1 rök. Þau rök að þessi aðgerð er að fara að vera hvað þjóninn sendi okkur til baka frá beiðni. Rétt eins og þegar vafrinn okkar gerir beiðni miðlara sendir eitthvað til baka og vafrinn sýnir það, í samhengi við AJAX Við gerðum bara beiðni miðlara sendi eitthvað til baka, og nú erum við að hafa fulltrúa sem streng. Með því að band sem ég vildi bara eins og að birta það á síðunni. Til að gera það sem ég ætla að hafa eitt síðasta val. Mig langar til að velja hluti með ID verð. Þetta er bara tóm div sem ég hef búið til á síðunni, og ég vil koma því að það div að vera hvað sem framreiðslumaður sendi okkur til baka. Ég hef reyndar breytt quote.php aðeins. 

Frekar en að hringja bakið og flutningur sumir síðu quote.php nú er einfaldlega að fara að prenta út verðmæti stofnsins sem streng. Svo ef þú varst í raun að heimsækja síðuna, myndir þú bara að sjá þessi litlu band um hvað gengi hlutabréfa er. Einn síðastur hlutur sem við þurfum að gera hér er bara hvort þetta skilar falskur. Hvað þetta segir er að ef ég er inni á atburði dýraþjálfari og þessi atburður dýraþjálfari False í stað þess að skila satt, sem þýðir að ég vil ekki upprunalega atburð til að skjóta. Í þessu tilfelli, ef við ekki hafa allir JavaScript og við sendum mynd, vefur flettitæki okkar er að fara að segja, "ég ætla að senda þessi gögn eftir," og hann ætlar að senda þig á aðra síðu. Þar sem við erum að nota AJAX nú, það er engin þörf á að senda notandanum á aðra síðu. Við erum bara að fara að birta niðurstöður virk á þessari sömu síðu. Við raunverulega vilt ekki að fara neitt, og ég vil vera á sömu síðu. Svo með því að fara rangt, við að tryggja að mynd er ekki að gera það fyrir okkur. Við skulum taka a líta á hvað þetta raunverulega lítur út. Vitna síðuna okkar lítur það sama. Leyfðu mér að draga upp skoðunarmanni niður hér svo við getum séð hvað er að gerast. Gerðu það aðeins minna mikið. Mundu ef við opna flipann Network, þetta er þar sem við getum séð allar HTTP beiðnir sem eru að gerast á síðunni. 

Fyrir tákn láta mig slá í AAPL og smelltu Fá tilboð. Nú sáum við að hlutdeild Apple kostar einhverja fjölda dollara bara fram á síðunni, en URL ekki breytt á öllum. Í raun, hér er HTTP beiðni um að við gert bara. Við gerðum POST beiðni quote.php. Það er skynsamlegt. Þetta er það sem miðlara sendi okkur til baka. Það er ekki lengur þessi risa HTML skjal með myndum og svoleiðis, það er bara lína af texta, og þá erum við að sýna bara línu af texta. Ef við förum aftur í haus og sjá hvað við sendum í raun inni í þessu HTTP beiðni, getum við séð niður sem við sendum með takka á tákni og verðmæti AAPL, sem er það sem notandinn slegið inn Þetta er gott, en það er samt svolítið pirrandi. Ég er enn að smella á þennan hnapp til að fá birgðir vitna. Við erum upptekinn fólk og við höfum ekki tíma til að smella hnappa. Google áttaði þetta smá en síðan þegar þeir innleitt Google augabragði. Hvað Google Instant gerir er eins og þú ert að slá það byrjar bara að birta niðurstöður fyrir þig svo þú þarft ekki að hafa áhyggjur þó að smella á Leita. Reyndar, skemmtilegur saga tengd því. Þegar Google Instant kom út, fólkið var eins og, "Vá, þetta er frábær ótrúlegt." "Þetta er svo flott." Og nemandi niður á Stanford, sem var 19 á þeim tíma gerði þessa síðu sem heitir YouTube Augnablik. All YouTube Augnablik gerir er í raun að leita á YouTube í stað. Svo frekar en að þurfa að fara til YouTube.com og högg Leita, þegar ég byrja að skrifa inn á YouTube Augnablik eitthvað eins CS50, við gátum séð hér að það er að reyna að á hægum nettenginguna byggja þessar niðurstöður lifa. Til að gera að við getum í raun gert mjög einfalda breytingar á quote.js skrá okkar. Núna erum við að festa þennan atburð þegar mynd er send inn. Við dont 'raunverulega vilja til gera the notandi skila því formi lengur, þannig að við skulum í staðinn skjóta þennan atburð í hvert skipti sem notandi þrýsta á takka. Til að gera það við skulum fyrst breyta atburð úr leggja keyup. Það þýðir að í stað þess að bíða eftir að mynd til að senda inn, í hvert skipti sem ýtt er, eitthvað er að fara að gerast. Það gerir ekki lengur vit í að hengja þessa keyup atburð til alls mynd. Við í raun bara sama um það leitargluggann. 

Til að velja það núna, getum við breytt þessu að vera, frekar en mynd-quote, mynd-vitna og við munum hafa inntak (type = texta) eða við getum sagt (nafn = tákn) - hvað við viljum. Nú er það eitt síðasta sem við þurfum að gera. Mundu niður hér þegar við sögðum return false við sögðum að við viljum ekki að sjálfgefið atburður að skjóta. En það gerist bara svo að ef við gera það núna, hvað við tegund í er ekki að fara að mæta í vafranum lengur vegna þess að það væri sjálfgefið hegðun slá í textareitinn. Við viljum ekki lengur að hunsa það, þannig að við skulum eyða þessu return false. Ef við spara sem og endurhlaða síðunni, nú þegar ég byrja að skrifa AAPL þú munt sjá að gengi hlutabréfa neðst hér er að ljúka sjálfkrafa. Svo er hér CS50 Fjármál Augnablik. Reyndar er gaman saga um YouTube Instant er að nemandi bara svona skrifaði hann sem 1-night verkefni, og næsta dag var hann boðið starf hjá YouTube forstjóra. Svo eins einfalt eins og þessi, þú CS50 nemendur, lokaverkefni geta fengið þér vinnu á YouTube. Eitthvað eins og þessi er mjög flott hugmynd fyrir lokaverkefni, ekki satt? Við höfðum sumir núverandi virkni sem við viljum að samþætta við. Við bæta upplifun notenda svolítið, og skyndilega að leita eitthvað á YouTube Instant gæti verið mikið auðveldara en að leita að því á reglulegum YouTube. Svo er það AJAX í hnotskurn. 

Í dæmum sem Jósef var að sýna, við sáum fullt af autocompletes, og þeir autocompletes eru virkilega, virkilega vel vegna þess að við þurfum ekki að muna - Til dæmis, ef þú manst ekki gengi hlutabréfa í Apple og við vitum bara að það er AA eitthvað, frekar en bara að segja við mig, "A hluti af þessu hlutur kostar þetta mikla peninga," Ég vil svona eins og til vita hvaða birgðir byrja með AA. Við getum gert það mjög vel með ræsi bókasafn sem er nú þegar með inni CS50 fjármálaráðherra. Ef þú kemur upp hér á Javascript tag og skruna niður að Typeahead, þetta er bara ágætur tappi sem einhver þegar skrifaði fyrir okkur, og við getum auðveldlega notað virkni hennar svona. Ég slóst í A og hér er listi af nokkrum ríkjum sem byrja með A. Við skulum segja að ég held að þetta sé mjög flott og það er kominn tími fyrir mig til að láta þetta á síðuna mína. Það kemur í ljós að þetta er virkilega, virkilega einfalt. Við skulum stökkva hérna til quote3.js. Skrá minn lítur svolítið öðruvísi. Down hér allt AJAX dótinu mínu er sú sama. Ég vil að hlaða lager gögn án þess að þurfa að fara á aðra síðu. En nú vil ég nota þetta tappi. The Bootstrap gögnum hefur mikill dæmi um hvernig nákvæmlega ég get gert það. Mig langar til að segja: "Hér er inntak sem ég vil AutoComplete á," og ég ætla að kalla þessa aðgerð kallast typeahead, og það er að fara að höndla allt Typeahead efni fyrir okkur. Það mun frumstilla lista, það mun gera allt sía okkar. Það eina sem það þarf að vita er hvaða gögn við erum autocompleting á. Svo ég fann út þennan takka bara með því að lesa skjöl og horfa á dæmi. Ef ég gef honum lykil uppspretta, verðmæti þessa takka er bara array af hlutum sem ég vil AutoComplete á. Þessi breyta kom af þessu aðrar skrár. Ég opna symbols.js. 

Þetta symbols.js er bara þetta virkilega, virkilega stór fylki sem inniheldur strengi allar þessar birgðir tákn frá NASDAQ. Ef ég vil að hoppa aftur til HTML, svo jharvard, vhosts, globalhost, HTML, sniðmát, quote_form. Þar sem nú heitir quote3.js, láta mig breyta javascript skrá sem ég er þar á meðal hér. Nú hef ég quote3.js, þannig að ég ætla að hlaða í því sérstaka javascript skrá, sá sem hefur þessi Bootstrap AutoComplete. Nú þegar ég hoppa aftur til the flettitæki, endurhlaða síðuna, og ég byrja að skrifa AA, það er autocompleteoff mín. Og það var í raun eins og einfaldur eins og þessi. Ég átti 1 lína af kóða sem bara sagði: "Hér eru hlutir sem ég vil AutoComplete á," og skyndilega hef ég þetta virkilega, virkilega gott virkni með ekki a heild einhver fjöldi af áreynsla á alla. Eins og þú ert að þróa vefsíður og sérstaklega framan enda hlið af hlutur, þú ert að fara að finna þetta er raunin mikið. There ert a einhver fjöldi, mikið, mikið af mjög kaldur frjáls bókasöfnum þarna úti sem gera það frábær auðvelt að gera hlutina eins og þetta. Getur einhver hugsa um hvaða göllum einfaldlega autocompleting á þessum stóra lista af táknum? Hvað gæti verið eitthvað sem er ekki það besta við þessa aðferð? Já. >> [Nemandi] tíma, ef þú hafa a einhver fjöldi af [inaudible] Já. Núna erum við að sækja þetta mikla JavaScript skrá og það er fullt af táknum. Og svo ef við höfum tonn af efni, þetta gæti konar auka leynd á ekki einungis að leita en einnig sækja í raun skrá. Frábært. Nokkuð fleira? Núna er enginn raunverulegur skilningarvit af þýðingu. Ef ég tegund í a, félaga að mæta hér gæti ekki verið vinsæll fyrirtæki sem byrja á A. 

Áður en ég fá að Apple gæti tekið við fleiri stafi til að finna það sem ég er að leita að. Þetta autocompleteoff hefur ekki þessa tilfinningu fyrir máli. Það er bara að fara að segja "eitthvað sem passar að ég ætla að sýna." Í stað þess að, langar mig til að einhvern veginn aðlagast sumir þýðingu í leitum mínum. Ef ég fer yfir hér til Yahoo! Finance, finance.yahoo.com, Ef ég reyni að slá inn tákn á blaðsíðu Yahoo! Finance er og ég byrja að slá goog, ég hef þetta ágætur listi af hlutur. Ljóst virðist, að það eins og Yahoo! Finance er að gera eitthvað meira snjall hér. Þeir hafa sumir máli og þeir hafa einnig frekari upplýsingar eins og nafn á lager. Það er eitthvað sem ég get ekki í raun fengið með bara lager listanum mínum af táknum. Ég vil þetta og ég ætla að taka það. Til að gera það við skulum gera nokkra hluti. Skulum opnar upp skoðunarmanni á þessari síðu vegna þess að við sáum að þessi síða er ekki að endurhlaða á alla, þannig að það er líklega með AJAX einhvern veginn að hlaða gögn. Við getum fundið út hvaða gögn það er hleðsla. Ef ég smelli á þennan Network flipanum eru þær að fara að vera allt um beiðnir sem byrja að vera rekinn. Nú ef ég tegund í Goo, getum við séð að ég fékk bara nýja HTTP beiðni. Þetta er líklega þar sem gögn er að koma frá. Viss nógur, ef ég horfi á þessa slóð, sem er dálítið undarlega nafni, getum við séð að það er einmitt þar sem Yahoo er að senda burt gögn frá. 

Ég hef búið til sérstaka skrá sem kallast suggest.php sem er mjög svipuð í anda við útlit virka. Það er í rauninni að fara að gera fyrirspurn til slóð Yahoo, fá aftur nokkur gögn, og senda hana aftur til mín. Nú, frekar en að nota stór, gríðarstór listi af táknum, Ég get notað ágætur samsvaranir Yahoo hluti, og ég þarf ekki að sækja að miklu JavaScript skrá. Ég ætla bara að fara að rífa niður í raun viðeigandi birgðir tákn. Við skulum hoppa inn í það. Svo HTML, JS. Við erum nú í quote4. Nú erum við ekki lengur með þessi stór listi af JavaScript skrár. En það er lítil konar vandamál hönnun hér. Við höfum sagt að A í AJAX er ósamstilltur. Hvað það þýðir er að þegar ég gera AJAX beiðni, svo hérna á línu 8, það er þar sem AJAX beiðni mín er í raun rekinn. Segjum nú að ég hef fengið kóða niður hér sem er að fara að gera smá dót eins og viðvörun the notandi eða breyta einhverju á síðunni. Hvað er ekki að fara að gerast er að vafrinn er ekki að fara að bíða eftir þessari beiðni um að halda áfram áður en kemur niður og berja þessa línu. Það er ósamstilltur hluti. Það er að fara að gera þessa beiðni og segir: "Þegar þú hefur lokið, "Koma aftur og kalla það virka sem ég sagði þér að hringja inni í velgengni." Það þýðir að við getum ekki bara sótt alla fiskistofna fyrirfram. Við þurfum að gera beiðni og bíða eftir einhverju til að koma til baka. Það þýðir að áður, þá gætum við einfaldlega sagt ræsi, "Hér er listi af hlutum sem ég vil að þú AutoComplete á." Við getum ekki lengur gert það aftur því við vitum ekki hvað við viljum raunverulega autocompleteoff á. Til allrar hamingju, Bootstrap hugsun af þessu vegna þess að þeir eru sviði krakkar þarna, og þeir gáfu í raun okkur aðra leið til að hlaða þessa Typeahead tappi. Áður gildi þessarar heimildar Hótelið var bara þetta stór fylking af hlutum til að AutoComplete á. 

Nú er uppspretta eign í raun virka, og tilgangur þessa aðgerð er að reikna út hvað það að AutoComplete á eru. The vegur það er að fara að reikna það út er það er að fara að biðja Yahoo! Finance hvaða the bestur hlutur til AutoComplete eru. Til að gera það sem ég ætla að gera mjög svipaða AJAX beiðni. Ég ætla að biðja þessa síðu á suggest.php. Ég vil senda með táknum enn. Og nú árangur minn, Bootstrap skjöl sagt mér að til að byggja þessi listi af hlutum, allt sem ég þarf að gera er að fara í þessu fylki nú í svarhringingu virka. En bíddu í eina mínútu. Ef þetta á að vera fylki og AJAX er að senda mér til baka texta, hvernig er það mögulegt? Þetta kynnir nýja leið til að skiptast á gögnum sem kallast JSON. Í þessu tilfelli erum við ekki bara að senda aftur einfalt band af texta. Nú erum við að takast á við þetta flóknari lista af táknum lager. Þessar birgðir tákn geta einnig hluti eins og nafn félagsins eða núverandi verð. Bara með því að nota stór langan streng sem er ekki sniðinn á einhvern fyrirsjáanlegri hátt er ekki að fara að vera besta leiðin til að fá þessar upplýsingar frá miðlara Yahoo mér á þann hátt sem ég get auðveldlega skilið. JSON er tækni sem tekur kostur af því hvernig við að búa tengin fylki í JavaScript. Þetta lítur mikið eins og JavaScript tengin array og í raun er það vegna þess að það er. JSON stendur fyrir JavaScript Object Ritháttur. Þetta er í grundvallaratriðum samþykkt snið til að flytja gögn fram og til baka. Hér í JSON mótmæla eða þetta JSON tengin array er að senda mér nokkur gögn um námskeið. 

Takkar þessu fylki eru hlutir eins og auðvitað sem hefur gildi cs50, og hérna getum við séð að ég geti haft gildi sem er fylki. Ég þarf ekki að gera hlutina eins og flokka út strengi og leita að kommum og gera brjálaður hluti eins og þessi. Vegna þess að þetta er lýst í JSON sniði, JavaScript og jQuery hafa nú þegar aðgerðir til að breyta streng sem lítur svona út JSON í raunveruleg JavaScript tengin array að við getum unnið með. Aðgerð sem er eins einfalt eins og að segja að ekki lengur er þetta skrá, suggest.php, senda mér til baka einfaldlega band texta, en ég veit að það er að fara að senda mig aftur JSON. Það þýðir að það JSON er hægt að breyta í Javascript tengin array. Og svo jQuery, ég vildi eins og þú að gera það fyrir mig. Það þýðir að þetta svar breytu hér, þetta er ekki lengur bara band. Þar sem við höfum sagt jQuery sem koma hér nokkur JSON, jQuery er að fara að vera klár nóg til að segja, "Þú vildir JSON?" "Ég ætla að breyta því í að tengin array fyrir þig." Skulum raunverulega taka a líta á the net flipann þegar við höfum quote4.js. Við munum breyta þessu og endurhlaða síðunni. Nú ætla ég að slá í a-a aftur. Ég hef gert nokkrar beiðnir um að suggest.php, en nú þetta svar, frekar en bara á band, það er JSON. Þannig að ég er með opinn hrokkið Brace sagði: "Hér kemur að tengin array." 

Fyrsti og eini lykillinn þessa tengin array kallast tákn, og þá er hér fylki af öllum viðeigandi táknum koma nú frá fjármálaráðherra Yahoo!, ekki frá þeim risa lista. Það er hvernig ég get einfaldlega byggja þetta AutoComplete tappi með nokkrum gögnum sem er ekki að koma frá staðnum skrá sem er nú þegar fyrirfram heldur eitthvað annað. Það kemur í ljós að við getum í raun nýtt sér tækni sem kallast JSONP, eða JSON með padding, sem mun útrýma þessum suggest.php milliliður. En í stað þess að gera það, við skulum í staðinn líta á hvernig ég get bætt þetta jafnvel meira. Mér finnst virkilega Typeahead ræsi er. Það er mjög gott. En við erum að fá góð í JavaScript og við viljum konar gera þetta sjálf, kannski taka a líta á hvað þessi tappi væri að gera. Við skulum ekki lengur nota það Typeahead hlutur, og við skulum reyna að gera þennan lista yfir tillögur fiskistofna sjálf. Hér í quote6.php við erum að fara að byrja á sama hátt. Í hvert skipti sem einhver tegund eitthvað, viljum við að gera AJAX beiðni. Þetta er svipað upprunalegu CS50 Fjármál Instant okkar. Frekar en að gera beiðni um að quote.php, við erum nú að gera beiðni um að þessi sama skrá og áður, þetta suggest.php, sem er bara að fara að draga gögn frá fjármálaráðherra Yahoo!. 

Aftur erum við enn von JSON, en nú þar sem Typeahead er ekki að gera þetta fyrir okkur, við þurfum líka að senda með gildi sem er inni í núverandi textareitinn. Nú vitum við hvað ég á að biðja Yahoo! Finance fyrir, og svo nú er hér virka sem við viljum framkvæma þegar beiðni lýkur. Við höfum ekki viðbótina til að gera lista fyrir okkur, svo hér þar sem við erum í raun að fara að byggja upp lista yfir tillögur. Til að gera það, eins og í PHP við concatenated þessar stóru strings HTML þá erum við að prenta þá, getum við gert sama nákvæmlega hlutur í JavaScript. Fyrst við erum að fara að byrja á þessari band kallast tillögur, og þetta band er bara að fara að vera smá HTML-kóða. Við viljum það til að vera listi af hlutum, svo við erum að fara að byrja á þessari lista tag, og nú erum við að fara að iterate yfir öll tákn sem var skilað aftur til okkar. Mundu, því að við höfum sagt datatype: "JSON", þetta er ekki band. Þetta er nú fylki fyrir okkur. Það er mjög svalt. Við getum einfaldlega sagt: "Ég vil að þú bæta lista þáttur." Við munum setja það inn í a þáttur í hlið þess, við munum gefa það flokki tillögur þannig að við vitum hvað það er, og nú er hér tákn sem við fengum til baka frá fjármálaráðherra Yahoo!. 

Þegar við höfum búið til hluti fyrir hvert tákn sem við höfum fengið til baka, við viljum bara að loka á lista. Svo nú tillögur táknar þetta litla HTML brot að þegar setja á síðuna er að fara til vera the listi af hlutum sem við erum að leita að. Nú skulum raunverulega setja það á síðuna. Til að gera sem ég hef reyndar búið til annan tóm div og ég hef gefið það kenni af ábendingum. Líkt við setjum innihald div sem myndi sýna að verð á hlutabréfum gögn, við nú bara að setja efni þessarar div til hvað þetta band er sem inniheldur þessi tákn. Með því að nota þennan HTML aðferð, þetta uppástungur breyta, þetta band er band af HTML. Ég vil að þú að taka þessi HTML og setja það inn í div heitir tillögur. Við höfum bara bætt eitthvað við DOM núna. Við höfum bætt við nokkrum nýjum þætti til the DOM að við getum nú birt á síðunni. Við skulum sjá hvað þetta lítur út. Ef við hlaða í quote6 og nú erum við að koma til baka, nú þegar ég byrja að skrifa AAPL, höfum við ekki lengur að ræsi AutoComplete, en við höfum nú þennan lista sem við gert okkur. Þetta er svolítið uglier en ræsi Typeahead, til dæmis, en það er að leyfa okkur að gera eitt annað hlutur. Þegar við vorum að leita á þeim ræsi tappi, sáum við að þegar við autocompleted, eitt af AutoComplete gildi var AAPL. Það gæti ekki verið svo hjálpsamur. Sem notandi, gæti ég ekki strax viðurkenna allar birgðir tákn. Það sem ég er sennilega líklegri til að viðurkenna eru raunveruleg nöfn félagsins. Svo myndi það ekki vera mjög hjálpsamur ef frekar en að segja AAPL þetta segir eitthvað eins og Apple Inc Þar sem við höfum velt þessu sjálf, við getum mjög auðveldlega gert það. Við skulum opna síðasta vitna skrá okkar hér, svo quote7. 

Sami hlutur. Ég hef bara búið til annan PHP skrá sem mun skila okkur meira en bara tákn. Það mun einnig gefa okkur aftur nöfn félagsins. Og svo við erum að gera það sama. Við erum að gera AJAX beiðni. Þegar beiðni hefur lokið, við erum að fara að framkvæma þessa aðgerð hér, og þessi aðgerð er að fara að byggja upp stór band af þáttum. En munurinn hér er að verðmæti þessara skráa er ekki lengur bara tákn, það er nú nafn. Þannig að við höfum eitt lítið vandamál. Þegar við notum útlit okkar, við þurfum einhvern veginn að fara framhjá það tákn. Við getum ekki framhjá útlit eitthvað eins og Microsoft Corporation. Við þurfum að gefa það MSFT. Þegar við erum að skrifa HTML, höfum við fullt af fallegu innbyggðum eiginleika. An A gæti hafa tengst við það href eða flokki. En það sem við þurfum í raun er nú á öllum þessum tenglum að hafa birgðir tákn í tengslum við það. Það er ekki innbyggður-í HTML eiginleiki fyrir tákn lager, en sem betur fer, HTML5 leyfa okkur að búa til eigin eiginleika okkar til að vera það sem við viljum. Með því að segja gögn-tákn, hef ég kynnt nýja eiginleiki Ég hét bara gert upp, og þetta er allt í lagi vegna þess að ég alltaf talað það með þessum gögnum. Við ætlum að geyma inni þar tákn af lager núna. Hvað það þýðir er að jafnvel þó að við erum að sýna gildi nafni félagsins inni autocompleteoff okkar, við erum enn að muna tákn sem er tengd við hvert fyrirtæki. Leiðin sem við erum að gera sem er inni í þessu frumefni sjálfs. Svo þýðir að við þurfum að gera eitt breytingar. Þegar við smellur það núna, við þurfum að raunverulega taka kostur af the tákn eiginleiki frekar en bara gildi hennar. Ef við upp aftur, hengja við atburð dýraþjálfari fyrir öllu. Þegar einn af þessum tillögum er smellt nú, langar að gera eitthvað. Það sem ég vil gera er að breyta gildi þess inntak kassi. Nú vil ég að setja þessa sömu Val virka. 

Svo án þess að rök í Val skilar þér hvað er nú þegar í textareitinn, en ef þú gefur það band, er það að fara að taka þessi band og setja það inn í textareitinn. Ég er að velja textareitinn sína á sama hátt. Nafn það er tákn innan mynd-vitna. Nú er ég að senda það gildi eiginleika gagna-tákn. Þessi hlutur hér er nýtt, þetta $ (this). Hvað er átt við er þáttur sem var smellt. Við sjáum hér að við erum ekki að festa smella atburði á hvert frumefni með flokki tillögu fyrir sig. Frekar, erum við að nálgast þetta svolítið öðruvísi. Í stað þess að við erum að segja þegar nokkuð inni þessa tillögur div, sem er mundu bara gámur fyrir þeim lista, ef eitthvað inni þessa div er smellt og það hefur flokk ábendinguna, Ég vil þessi atburður til að skjóta. Í grundvallaratriðum hvað þetta þýðir að við getum gert er að við getum endurnýtt þessa sömu atburði dýraþjálfari fyrir allt það í listanum. Þannig að við þurfum ekki að hafa einn atburð dýraþjálfari í fyrsta þáttur og annað atburður dýraþjálfari fyrir annað frumefni. Við getum í staðinn sagt, "Ég vil að sama atburður dýraþjálfari að taka til allt í listanum mínum." En við þurfum einhvern veginn að vita hver þáttur var smellt. Þetta "þetta" keyword táknar bara það. Þetta er hlutur sem var bara smellt af notanda. Ef ég smellti bara 3 hlekk, þetta táknar þáttur í því 3. hlekkur, sem þýðir að ég get eiginleiki þess, gögn-tákn, sem við vitum að innihalda táknið sem er í tengslum við fyrirtæki sem ég smellti bara. Ef við að hoppa til baka fjármál síðuna okkar, við sjáum nú að þegar ég byrja að skrifa eitthvað eins og MSFT, við erum ekki lengur að fá bara lager tákn, við erum nú að fá raunverulegt fyrirtæki. En þegar ég smelli á einn af þessum félögum, sjáum við að við erum í raun populating textareitinn ekki með nafni fyrirtækisins en hvað var geymt inni á þessum gögnum eiginleika. Og svo ef ég skoða í raun einn af þessum þáttum með því að hægri smella á það og smella Skoðið frumefni, getum við í raun sjá hvað þetta lítur út. 

Mundu að þetta er eitthvað sem við bjuggum inni í því fyrir lykkju þegar við vorum að byggja upp að streng HTML. Við sjáum hér að þessi gögn-tákn hefur gildi MSFT, sem er frábært. Það er það sem við vorum að búast. Það er tákn og það er hvernig við fengum á gildi sem við þurftum að nota innan þessa textareitinn. Það er nóg að vitna í mynd vegna þess að það er voða leiðinlegt. Við skulum bara gera sumir fljótur aukahluti á eignasafni síðuna okkar. Ef þú hefur notað CS50 Finance um stund og þú byrjar að kaupa og selja mikið af hlutabréfum, loksins þessari töflu er að fara að fá nokkuð stór, og þú ert að fara að vilja að birgðir auðkenni, að sjálfsögðu. Þegar borðið er mjög, mjög stór, það gæti verið gagnlegt fyrir notendur að reyna að leita á henni. Inni í the leita kassi ef ég byrja að skrifa eitthvað eins og Disney og útlit fyrir minn Mikki Mús lager, getum við séð að borðið er nú sía miðað við það sem ég gafst bara inn Þessi virkni lítur ofur flókið, en það er mjög, mjög auðvelt með jQuery og JavaScript. Þetta portfolio.php skrá inniheldur JavaScript skrá sem kallast portfolio.js. Við skulum taka a líta á það. Svo HTML, JS, eigu. Hér er þar sem við erum að gera að leita á borðinu. Það fyrsta sem ég þarf að gera er að hengja atburður dýraþjálfari til að textareitinn vegna þess að við vitum að við viljum að sía virka okkar til að skjóta hvert skipti sem notandi þrýstir eitthvað vegna þess að við höfum ekki tíma fyrir hnappa leit. The fyrstur hlutur sem við þurfum að gera er að reikna út það sem notandinn er að leita að, bara eins og við gerðum áður. Þetta leitarorð er átt við núverandi frumefni notandi er samskipti við. 

Þar sem notandinn er að samskipti við the leita kassi, $ Þetta táknar the leita kassi, svo gefur this.val okkur hvað er inni í the leita kassi sem notandi er að skrifa. Svo, nú það sem við viljum gera er að við viljum iterate yfir allar línur inni á borði okkar. Til að velja allar línur í töflunni okkar, gaf ég þeirri töflu kenni af eignasafni borð, og hver röð er táknuð með TR frumefni, þannig að þetta val er að fara að koma aftur til mín stór array á allar línur í töflunni minni. Nú vil ég að iterate yfir það fylki. Ég gat þér fyrir lykkju, en jQuery raun gefur okkur gott fall sem kallast "hver." Hvað hver gerir er hver tekur einn rök, og þessi röksemd er fall. Hvað það er að fara að gera er að það er að fara að beita þessi aðgerð að sérhver frumefni inni á þessum lista. Þessi aðgerð tekur eitt rifrildi sem er E, og þegar þessi aðgerð er framkvæmd, það e er að fara að skipta við fyrstu röðinni, þá seinni röðinni, og svo þriðja röð. Með þessum hætti, þetta er það sama og að keyra á fyrir lykkja og vangaveltur núverandi þáttur byggt á vísitölu innan á þinni fyrir lykkju. Á hverjum endurtekning, fyrir hvern þessara þátta í töflunni, Mig langar að athuga hvort texta frumefni - texta klefi inni í röð - passar það sem ég er að leita að. Þetta stór langan streng af skipunum er hvernig ég gæti gert það. Fyrst, aftur, þetta vísar nú til - vegna þess að það er inni í nýtt hlutverk - þetta er nú núverandi línu í töflunni. Ég vil taka núverandi röð í töflunni, og ég vil fá öll börn hennar. Mundu að DOM er hierarchic tré, sem þýðir að þættir hafa fjölda barna. 

Þetta. Börn virka er að fara að koma aftur til mín aftur á fjölbreytta alla þá þætti sem eru börn, í þessu tilfelli, röð í töflunni. Þetta er bara einfaldlega frumur inni í röð. Ég vil bara að leita á fyrsta reitnum. Þetta. Fyrsta aðgerð segir gefa mér fyrsta frumefnið í því fylki. Þá segir textinn virka fá mér hvað nákvæmlega er inni á þeim reit þar sem ég vil að leita á þeim texta. Að lokum, við skulum breyta því í lágstafi svo við getum gert texta ræða særandi fyrirspurnum. Að lokum viljum við sjá hvort það band inni í töflu inniheldur strenginn sem við erum að leita að. The indexOf virka á JavaScript er bara þessi. Það segir okkur hvort þetta band inniheldur annað band. Ef það er satt að klefi inniheldur það sem ég er að leita að, þá vil ég vera viss um að það er sýnt. Þátturinn aðferð mun segja, "Sýna þáttur." Ef þetta er ekki raunin, þá þýðir það það sem ég er að leita að er ekki að finna í röðinni, þannig að ég vil að fela er frá notanda. Það nær að ágætur sía gildi þar ekki lengur við að sjá alla töfluna. Ef þú hefur áhuga á hvernig á að gera þetta auðkenni eins og heilbrigður, við setjum uppruna netinu. En það er mjög einfalt. JQuery hefur ógnvekjandi aðferðir fyrir þessar hreyfimyndir og notfæra CSS eignir. Svo, það er það fyrir mig. 

Hvað liggur þá á undan? Eins og þú munt sjá í nokkra daga, endanleg verkefni Tillagan er vegna. Endanleg verkefni Tillagan mun spyrja þig nokkurra spurninga, en meðal þeirra munu vera þrír áfangar - einn "góður" áfangi, einn betri áfangi, og einn besta. Hugmyndin er í raun að hjálpa ykkur að setja væntingar þínar þannig að litlu að þú verður ánægð með úttak síðasta verkefni og það mun vera "góður" að svo miklu leyti sem þér er annt. En svo í hag að fá þig til að ná bara smá í eitthvað betra eða eitthvað besta, munum við einnig svona ýta þér í átt að þessi eins og heilbrigður. The CS50 Hack-a-Thon, á meðan er, í nokkrar vikur. Venjulega, við gerum þetta á grundvelli happdrætti grunni vegna áhuga, en líkurnar eru við munum taka nokkur hundruð af okkur í rútum skutla frá Harvard Square niður í Kendall Square þar sem Microsoft hefur fallega leikni viðeigandi kallast "nörd" - New England Rannsóknir og þróun Center. Við munum fá það í kringum 8:00 Við munum hafa mat. Um 01:00 við munum hafa sumir meiri mat. Um 05:00 Ef þú ert enn vakandi við munum fara yfir á IHOP eða taka þig aftur til háskólasvæðinu. Markmiðið er að kafa í lokaverkefnum hlið við skólafélaga og starfsfólk. Þá er nokkrum dögum síðar CS50 Fair, sem er í raun ætlað að vera tækifæri fyrir ykkur til að sýna vinnu þína og árangur fyrir önn en að nudda öxlum við hvert annað og fá tilfinningu fyrir því hvað allir gerðu. Með því að segja, margir þökk sé Tommy og Jósef og við munum sjá þig á mánudaginn.  [Lófaklapp]