[Powered by Google Translate] [Linggo 9, ipinagpatuloy] [David J. Malan - Harvard University] [Ito ay CS50. - CS50.TV] 

Ito ay CS50. Ito ang katapusan ng linggo 9. Maraming salamat sa inyo. Wakas. Linggo 9. Nakatanggap ako ito. Ngayon ipagpapatuloy namin ang aming pag-uusap tungkol sa web programming may isang mata patungo sa huling proyekto, hindi dahil mayroon kang upang gawin ang isang bagay na web-based para sa pangwakas na proyekto ngunit dahil sa alinman sa para sa panghuling proyekto o pagkatapos CS50 ito ay tiyak na direksyon kung saan modernong software ay pagpunta. At pa ito ay hindi talagang isang madaling bagay. Sa katunayan, isa ng ang hardest bagay na gawin ay ang aspeto ng disenyo. 

Halimbawa, sa pamamagitan ng disenyo aktwal na namin ibig sabihin ng pagkuha ng user interface o ang karanasan ng gumagamit sa kanan. Ako sa palagay - at alam namin mula sa isang kamakailan-lamang na hanay ng problema kapag ng ilang mo ang naisahimpapawid sa iyong mga hinaing tungkol sa ilang piraso ng software o hardware na infuriates, kung sa campus o off - may maraming mga site out doon, ng maraming ng hardware out doon, na uri ng sucks. Ngunit ang katotohanan ay na ang paggawa ng mga bagay na madaling gamitin pa gayunman makapangyarihang ay mahirap na hamon. Kaya para sa araw na Tinanong ko Joseph at Tommy sa samahan ako dito upang maaari naming magkaroon ng isang pag-uusap, parehong tungkol sa disenyo at kung ano ang mga uri ng mga proseso ng pag-iisip ay dapat simulan ang pagpunta sa pamamagitan ng iyong ulo kapag ikaw idisenyo ang iyong panghuling proyekto, ang iyong mga hinaharap na pagsusumikap. At pagkatapos ay sa Tommy ng tulong titingnan namin sa ilang ng ang mga detalye ng pagpapatupad. Paano maaari kang magkaroon ng ilang pangitain sa papel o sa iyong isip na maaari mo nang isagawa ang programa sa pamamagitan ng paggamit ng ilan sa ang mga teknolohiya at diskarte Sinimulan na namin ang pinag-uusapan, lalo JavaScript at isang bagay kahit mas bagong, lalo na ang AJAX, asynchronous JavaScript. Na pinapayagan ka na lumikha ng lahat ng mga mas dynamic ng isang user interface sa pamamagitan ng sa pagkuha ng higit pa at mas maraming data progressively mula sa isang server. Kaya makikita namin makita ang ilang mga snippet pati na rin ngayon. Bilang isang bukod, kung ikaw ay interesado sa pagtuon sa computer science o minoring sa computer science, alam na ito Biyernes sa tanghali sa Maxwell Dworkin 221 ay isang kaganapan ng pizza kung saan maaari kang matuto nang kaunti pa tungkol sa computer science. Sa iyong paraan out ang pinto ngayon, magagawa mong upang kunin ang isang hindi opisyal na gabay sa CS sa Harvard. Namin itong ilagay sa mga lata ng basura sa labas sa taas ng baywang upang kung nais mong i-grab ang mga ito at matuto nang kaunti pa tungkol CS, na doon para sa iyo ang mga ito sa linggo 0. Din kung nais mong upang sumali sa amin para sa CS50 tanghalian ito Biyernes sa 01:15, magtungo sa cs50.net/lunch. Nang walang karagdagang linggal, bigyan mo ako kapwa ng pagtuturo Joseph Ong. Hi. [Palakpakan] Salamat. Ang unang pagkakataon ko natutunan ang tungkol sa disenyo sa isang klase dito tinatawag CS179. 

Ang propesor sa oras na sinabi sa amin ang kuwento tungkol sa isa pang propesor na nawala sa hotel at ginamit ang Gripo. Maaari sinuman sabihin sa akin kung ano ang 2 knobs sa kaliwa at kanang gawin? [Mag-aaral] Hot at malamig. >> Hot at malamig. Mabuti. Ano ang inaasahan mo normal, tama? Ito propesor pagkatapos gamit ang gripo gustong shower, at siya naaayos upang magamit ang. Iniisip niya ang kaliwa at sa kanan gilid para sa mainit at malamig na, i-right? Ngunit maaari sinuman sabihin sa akin kung ano ang mga aktwal na gawin? Anumang mga kamay? [Hindi marinig na mag-aaral ng tugon] >> isang mungkahi ay? [Hindi marinig na tugon ng mag-aaral] >> Temperatura? Kaya ang isa sa kanila ay kumokontrol temperatura at ang iba pang mga kontrol? >> [Mag-aaral] Tubig presyon. Tubig presyon. Mabuti. Propesor na ito ay nagtuturo sa ito at, iniisip ang pagkontrol sa mga ito ay mainit at malamig, lumiliko sa kanan, kung saan siya palagay ni ay mainit, ang lahat ng mga paraan up dahil siya gustong kumuha ng maligamgam na shower. Well, ang mga ito ay hindi talaga tutugma, kaya siya ay nakakakuha ng ito hindi masyadong masaya na karanasan ng pagiging sa isang malamig na shower, at namin ang lahat ng malaman kung ano na nararamdaman tulad ng. Ito ay isang halimbawa ng isang disenyo kapintasan. Ano ang ibig sabihin ko sa pamamagitan ng na ang kanyang inaasahan mula sa gripo ay hindi tumugma sa kung ano ang dumating ng shower, na uri ng kapus-palad para sa kanya. Kaya ito ay isang halimbawa ng isang disenyo kapintasan na mangyayari sa tunay na buhay. Ngunit nakita namin ang lahat ng mga uri ng iba pang mga pati na rin. Humihingi kami malamang na hindi mga tagahanga ng MBTA ng system. Ito ay isang sistema ng subway sa aktwal na sa London, na nagsasabing, "Ang pindutan na ito ay hindi ginagamit." Bakit ito kahit sa may? Bakit namin kahit pinapahalagahan? Kapag ako ay isang kid, ang tech savvy isa sa bahay, kapag ang computer ay pag-crash ng, ang aking ina ay dumating sa akin, nagpapakita sa akin ang screen na ito at humihiling sa akin kung ano ang nangyari. 

Kahit na hindi ko alam kung ano ang ibig sabihin nito ay. [Tawa] Ano? [Tawa] Minsan pakiramdam namin tulad ng mga software developers lamang trolling sa amin. Tulad ng mga gumagamit na hindi namin tulad ng, "Ano ang nangyayari? May sabihin sa amin." Ito ang lahat ng pagdating down sa isang isyu ng disenyo. Disenyo, bilang maaari naming makita, ay hindi pulos tungkol sa mga aesthetics, ito ay hindi tungkol sa kung paano bagay tumingin. Nakikita namin dito na ito maliit na pop-up sa paglipas dito ay aktwal na hitsura medyo magaling. Ito ay may isang drop anino sa background, ito ay may hangganan radiuses pagpunta sa. Uri ng medyo. Hindi ito talagang mahusay na dinisenyo dahil ito ay hindi masyadong user friendly na. Na maliit na pop-up na ay lumalabas ay hindi talaga ninyo akong bigyan ng anumang impormasyon tungkol sa kung anong nangyayari sa, hindi ito sabihin sa akin anumang bagay tulad ng gumagamit tungkol sa kung paano upang mabawi mula sa na error. Gusto naming mag-isip tungkol sa mga bagay na disenyo ay hindi. Una, hindi aesthetics. Din ito hindi Pagpupuno iyong app sa tonelada ng mga hindi kinakailangang pag-andar. Kung ikaw ay isang Thai restaurant, marahil ay hindi nais na maging isang dentista sa parehong oras. At sa Facebook Tanong, hindi na ang maraming tao ay ginamit ito at ito ay hindi talagang sa core ng kung ano ang kanilang pagbuo. At kaya ito mabait sa tingin tungkol sa hindi kaya magkano ang dami ng mga bagay na naglalagay ka ng sa iyong application ngunit ang kalidad at kung paano ka sa paggawa ng mas mahusay na karanasan ng gumagamit pamamagitan ng aktwal na pagpapabuti kapag kung ano ang mayroon ka nang. 

Sa maikling sabi, ang disenyo ay nagsasabi sa amin kung ano ang dapat naming bumuo. Halimbawa, kung kami ay pagbuo ng isang bagay na ipaalam sa amin maghanap ng mga bagay up, tulad ng Google, halimbawa, ay dapat namin gawin ang mga bagay sa isang paraan na nangangailangan ng gumagamit na tumagal ng maraming ng mga pag-click upang makakuha ng sa kung ano ang gusto nilang, o dapat naming gawin ito sa isang paraan, halimbawa, gamit ang Google Instant o autocomplete na ay nagbibigay-daan sa amin sa aming mga resulta sa mas mabilis? Engineering nagsasangkot, tulad ng Tommy ay magpapakita sa iyo, aktwal na pagbuo ng ito. May maraming uri ng mga disenyo. Halimbawa, kung ikaw ay pagbuo ng isang bagay sa deploy ng isang bagay sa Third World bansa kung saan mayroong hindi magkano ang koryente o ang ganoong karaming mga teknolohiya, mayroon kang magdisenyo ng kung ano ang iyong pagbuo sa isang paraan na madali na nagbibigay ng access sa mga tao doon. Ngunit kung ano ang mga uri ng iba pang mga desisyon ng disenyo ay maaaring mayroong o maaaring maging kasangkot sa isang bagay tulad nito? Oo. Makita ko ang isang kamay. [Hindi marinig na tugon ng mag-aaral] >> Karapatan. Eksakto. Accessibility ay isang bagay. Isang maraming ng mga tao ay hindi isipin ang tungkol, "Ano ang tungkol sa aking mga user?" tulad ng mga extremes ng alinman sa spectrum. Mayroon akong mga gumagamit na maaaring magkaroon ng mga kapansanan na hindi ako nag-iisip tungkol sa at ako iniisip tungkol sa pagdidisenyo para sa pangkalahatang user. Internet ay naa-access ng lahat sa panahong ito, at dapat kong pagdidisenyo para sa mga tao pati na rin. Anong mga uri ng iba pang mga desisyon disenyo ang maaari mong gawin? Oo. >> [Mag-aaral] Gastos. Halaga. Napakabuti. Ang isa pang bagay na maaari naming ibabase ang aming mga pagpapasyang sa disenyo sa gastos. Kung hindi namin ang isang negosyo, nais mong bumuo ng isang bagay na hindi magkano ang gastos upang makabuo ng ngunit maaari magbenta sa isang partikular na mataas na gastos o maaaring makakuha ng sa amin ang ilang mga kita. 

Ito ang lahat ng mga iba't ibang mga uri ng disenyo, ngunit kapag kami ay pagbuo ng isang bagay sa Internet o kapag kami ay pagbuo ng isang bagay na malamang ay hindi gastos na magkano na bumuo ng up ngayon, tulad ng mga application sa Internet - hindi mo na kailangang magtapon magkano kabisera ito upang gawin ang isang bagay na aktwal na gumagana - kung ano ang hindi namin mas nag-aalala tungkol sa ang karanasan ng gumagamit. Tinatawag namin ito user Iginitna disenyo. Mahalaga kung ano ang user Iginitna disenyo ay nagsasangkot ng paglalagay sarili sa sapatos ng iyong mga gumagamit. Kung may isang taong nag-sign up para sa kung ano ang ako sa pagbuo, malinaw naman nila na darating sa aking partikular na application na may isang layunin sa isip, may isang gawain na gusto nila upang makumpleto. At ang iyong trabaho ay hindi lamang upang makatulong na makumpleto ang mga ito na gawain ngunit upang makatulong na makumpleto ang mga ito na gawain sa isang paraan na ay mahusay, madaling maunawaan, at, pati na ang ilang mga tao sinabi banda roon, naa-access. Ano ang ibig sabihin ay ang kahusayan? Kahusayan nangangahulugan kung gaano kabilis ang aking user kumpletuhin ang gawain na ibinigay na aking interface. Ba itong tumagal ng maraming ng mga pag-click para sa kanila upang makakuha ng mula sa isang lugar sa iba pang? Ito nakakapagod? Ba sila upang isagawa ang maraming ng mga paulit-ulit na gawain? Gusto naming gawing na proseso bilang mahusay hangga't maaari kaya hindi sila upang gawin ang mga uri ng mga bagay. Tulad para sa intuitiveness, na, halimbawa, kung ang isang gumagamit ay mukhang ang aking interface, madali para sa kanila upang makakuha ng mula sa lugar sa lugar? Madali para sa kanila upang malaman kung ano ang mayroon silang i-click sa aking interface sa order para sa kanila upang makamit ang layunin o gawain na gusto nila upang makamit? 

At sa wakas, ng isang tao sinabi banda roon, accessibility ay napakahalaga. [Lalaki speaker] Nagmumula ito sa accessibility para sa mga bagay tulad ng paningin, i paano ko aktwal na magdisenyo ng isang bagay para sa isang taong bulag? Oh. Para sa mga tao na hindi maaaring makita sa lahat, mayroon kaming isang bagay na tinatawag na screen mambabasa. Ano ang dapat mong gawin ay dapat mong bumuo ng iyong website sa isang paraan na, halimbawa, partikular na teknolohiya sa kung ano ang tinatawag naming - Mayroong maraming mga bagay na ngayon. Tingin ko may mga mambabasa ng screen na tinatawag na JAWS. Maraming ng mga bagay na ito ay umaasa sa kung ano ang tinatawag naming panuntunan lugar upang basahin sa user kung ano ang sa pahina. Para sa mga tao na hindi maaaring makita, kailangan mong tiyakin na ang mga mga mambabasa ng screen aktwal na pick-up ng nilalaman sa pahina at maaaring aktwal na ipakita ang iyong mga gumagamit, kung hindi mo makita, hindi bababa sa maaari mong pa rin maunawaan ang nilalaman sa pahina. Oo. Okay. Sapat na pakikipag-usap tungkol sa magandang disenyo. Natin makipag-usap tungkol sa masamang disenyo. Ito ang mga bagay na hindi mo dapat gawin. Maaari sinuman sabihin sa akin tungkol sa kanilang mga karanasan sa Craigslist at kung ano ang sa tingin nila ay hindi kaya mahusay na tungkol sa disenyo? Oo. >> [Mag-aaral] tingin ko may masyadong maraming mga salita sa isang lugar. Masyadong maraming mga salita, i-right? Ganap napakalaki. Pumunta ka sa pahinang ito at ikaw ay greeted na may isang buong grupo ng mga bagay up dito na maaaring hindi kahit na mahalaga sa iyo. Halimbawa, kayo ay nakatira sa isang estado na ay hindi nagsisimula sa ang sulat na ito. Ipagpalagay natin na nakatira sa Texas o isang bagay. 

Mayroon kang mag-scroll ang lahat ng mga paraan pababa sa pahina upang makakuha ng sa lokasyon ikaw ay sa. Ako mula sa Boston, kaya hayaan mo akong tumingin sa Massachusetts. Saan Massachusetts? Oh, dito mismo. Oh, ito ang Boston. Okay. Hayaan ang mga tumingin sa Boston. [Tawa] Pretty napakalaki, i-right? Mahirap na mga bagay doon. [Tawa] Sabihin nating Naghahanap ako para sa isang lugar upang manirahan. Gaano karaming mga tao ang aktwal na ginagamit Craigslist? Ton mo. May mga medyo masamang paraan upang tumingin sa ito, ngunit tingnan natin sa. Ano ang pagkakaiba sa pagitan ng img at pic? Maaari sinuman sabihin sa akin? May aktwal ay walang pagkakaiba. Ibig sabihin ng mga ito ay eksakto ang parehong bagay, ngunit mayroon silang iba't ibang mga label para sa mga ito para sa ilang mga kadahilanan. Kung nag-click ako sa May Imahe, walang mangyayari sa pahina. Aktwal na ako ay i-click ang Search muli para sa isang bagay na mangyayari. Ano ang maaaring maging isang mas mahusay na desisyon ng disenyo na maaaring gawin doon? Kung ako ng pag-click sa na filter, ako marahil ay gusto mo upang i-filter sa pamamagitan ng partikular na pagkilos o sa partikular na kategorya. Kaya sa halip na pindutin ang Search muli, maaari ko lang awtomatikong gawin ang pag-filter uri ng estilo ng Google kung saan ginagawa nila ito agad. [Malan] Ngunit hindi bumubuo bilang nasaksihan namin ito sa gayon ay malayo na pisikal na isinumite pamamagitan ng pagpindot sa Ipasok ang hindi bababa sa o ng pag-click sa isang pindutan? Tulad ng nakita mo ang mga ito sa ngayon, aktwal mong i-click ang Isumite upang gawin ang mga bagay. 

Ngunit bilang Tommy ay magpapakita sa iyo sa isang segundo, may mga aktwal na paraan para sa iyo tulad na kapag ikaw ay mag-click sa bagay na ito ay awtomatikong ipadala kung ano ang tinatawag naming isang AJAX kahilingan at makakuha ng mga data bumalik at i-filter ang iyong mga resulta ay agad na. May mga tonelada ng mga bagay na mali sa interface na ito. [Malan] Maaari kang maghanap para sa Cambridge? Mayroong isang bagay na bahagyang iregular dito kung saan mahalaga sa iyo tungkol sa Cambridge at pa nakakakuha ka ng Westford, Spring Hill, West Newton at ang mga tulad ng. Marahil hindi perpekto. >> Marahil hindi perpekto. Kung paano ko magagawang upang gumawa ng ang karanasan ng gumagamit mas mahusay sa ang partikular na pahina na ito? Oo. >> [Mag-aaral] Tagubilin. Okay. Mga tagubilin sa kung anong uri ng pakiramdam? [Mag-aaral] Halimbawa, ang isang bagay para sa unang mga gumagamit ng oras na hindi kahit na malaman kung ano ang Craigslist ay o hindi mo alam kung ano ang dapat gawin. Kanan. Kaya pagpapaliwanag kung ano ang Craigslist sa pahinang ito ay mahalaga. Maaaring aktwal na namin sabihin sa mga gumagamit kung ano ang pahinang ito ay talagang para sa. Kung ako pagbisita ito, nakikita ko ang isang buong grupo ng mga lokasyon. Hindi ko kahit na malaman kung ano ang ibig sabihin nila. Ngunit mas mahalaga, lamang ng pagtingin sa interface na ito, natatandaan ko ay mag-scroll pababa ng isang tonelada ng mga bagay upang mahanap ang isang partikular na komunidad na aktwal na ako cared tungkol dito. Ano ang isang mas mabilis na paraan maaari kong gawin na? Oo. [Mag-aaral] Hatiin ang mga ito sa silangan, rehiyon kanluran. >> Okay. Maaari kong hatiin ang mga ito sa higit pang mga kategorya na maaaring makatulong sa akin mas mabilis na matukoy kung paano upang makakuha ng na partikular na lokasyon. [Mag-aaral] Maglagay ng drop-down na listahan. >> Karapatan. Okay. Maaari ko bang gamitin ang drop-down menu dahil mayroon kaming isang nakapirming hanay ng mga bagay at maaari naming ipakita ang mga ito sa isang drop-down menu. Na paraan hindi ito ay tumagal ng hanggang kaya magkano na espasyo sa screen. Ngunit mas mahusay kaysa sa, kung ano ang maaari naming gawin? Oo. >> [Hindi marinig tugon ng mag-aaral] >> Maaari mong sabihin na muli? >> [Mag-aaral] Search box. Oo, isang kahon sa paghahanap. Mabuti iyan. Ano ang maaari naming aktwal gawin kung tinitingnan namin sa mga slide, search box. Autocomplete. Napaka-madaling paraan upang maghanap sa pamamagitan ng mga resulta na alam mo sa isang hanay. Kung sisimulan ko ang pag-type Bo, lang ipakita sa akin ang lahat ng mga resulta na may Bo sa loob ng mga ito. Na paraan ang maaari kong napaka madaling mahanap ang partikular na Gusto kong pumunta sa sa halip ng pagkakaroon upang mag-scroll sa pamamagitan ng ito talagang malaking listahan. 

Ito ang lahat ng mga uri ng talagang mababang-nagha-hang prutas na ang isang taong pagpapatupad Craigslist maaaring aktwal na gawin upang gawin ang karanasan sa website ng maraming mas mahusay para sa kanilang partikular na user. Okay. Sapat na pakikipag-usap tungkol sa masamang website. Natin makipag-usap tungkol sa Facebook. Kapag dumating ng Facebook, at partikular Facebook larawan, mayroong ng maraming iba pang mga serbisyo sa oras na maaaring gawin eksakto ang parehong bagay. Sila ay maaaring ayusin ang iyong mga larawan sa mga album. Ano ang maaari mong gawin ay maaari mong ayusin ang mga ito sa mga hanay ng pati na rin. Maaari mong ayusin ang mga ito sa pamamagitan ng petsa. Maaari mong gawin ang lahat ng mga partikular na mga bagay. Ngunit ang sinuman malaman kung ano ang Facebook larawan sumabog sa oras na ito ay inilabas? Oo. >> [Mag-aaral] Tag. >> Tag. Eksakto. Mayroon kaming Milo sa paglipas dito, na aming aso maskot may na bandana ng CS50. Maaari mong makita na mayroon kaming ang pag-tag ng tampok na ito sa gitna. At kung ano ang ginawa Facebook larawan upang kawili-wiling mula sa kakayahang magamit ng kinatatayuan ay na ito aktwal na pinapayagan ang mga tao sa pamamagitan ng ito upang makasali ang kanilang mga kaibigan sa kanilang mga larawan. Para sa Facebook, dahil ang kanilang website ay partikular na panlipunan, ito ay tungkol sa pagbuo ng ganitong uri ng panlipunang kapaligiran. Na napabuti ang karanasan ng mga larawan ng maraming mas dahil maaaring sila aktwal na simulan ang sinasabi, "Ito ang mga koneksyon sa pagitan ng mga tao, at ang mga ito ay mga larawan tungkol sa mga tao ka talagang pakialam tungkol sa. " Bahagi nito ay din-uuri paggalan sa sarili. Mga tao na gusto-tag sa mga larawan at mga bagay tulad na. Habang na hindi kinakailangan ng isang mabuting tao na kaugalian, sa parehong oras na ito batay sa magandang disenyo desisyon dahil ang mga tao ay aktwal na mahalaga sa tungkol sa mga bagay na tulad nito. Kaya na Facebook larawan. 

Ngunit sabihin makipag-usap Facebook sa mas pangkalahatang. Ako bang maraming ng mga tao dito ay may opinyon tungkol sa Facebook, parehong mahusay na disenyo ng mga desisyon at masamang disenyo desisyon. Kaya sabihin magbulalas o maging masaya. Halika sa. Alam ko ang lahat ng iyong gamitin Facebook. Isang tao ay magkaroon ng masamang sasabihin o magandang bagay upang sabihin ang tungkol dito. Oo. [Mag-aaral] Sa mga feed ng balita ng maraming mga bagay na hindi ko talagang pakialam tungkol sa. Ang balita feed ay ang ipakita ng maraming mga bagay na hindi mo maaaring pakialam tungkol sa. Mayroon kang mga kaibigan sa Facebook na hindi mo pa nakikilala para sa 2 o 3 taon at makita ang kanilang mga resulta ng balita popping sa iyong feed ng balita at hindi mo talagang pakialam tungkol dito. Facebook ay aktwal na ginawa ng isang pagsisikap upang gawin itong mas mahusay, at aktwal na sinubukan upang itulak ang mga may-katuturang resulta sa tuktok ng feed ng balita bilang ng late upang iyong aktwal na makita ang mga bagay sa pamamagitan ng mga kaibigan na may-katuturan sa iyo o sa iyong mga malapit na kaibigan. Anumang bagay? Oo. [Hindi marinig na mag-aaral ng tugon] >> Maaari mong sabihin na muli? [Mag-aaral] Ang mga ad ay medyo mahinhin. >> Sa anong kahulugan? [Hindi marinig na mag-aaral ng tugon] Hindi sila magkaroon ng ilaw sa screen, tulad ng mga banner. Okay. Iyon ay mabuti. Kung tandaan mo ang Internet mula sa '90s - >> [Malan] ako ay doon. >> Siya ay doon. [Tawa] Maaari mong tandaan ang mga kumikislap na background GIF, sparkly bagay, Mga GeoCities estilo ng uri ng bagay. Iyon ay talagang hindi isang halimbawa ng isang mahusay na disenyo dahil talagang ito ay distracting mula sa nilalaman. Ang website ng Yale art na ginamit upang magkaroon ng animated na GIF bilang kanilang background at hindi mo maaaring basahin ang anumang sa pahina, ngunit hulaan ko may aktwal uusapang sa kanila at ngayon ng kaunti ibang. [Malan] magkano ang mas mahusay na ngayon. >> Magkano ang mas mahusay na ngayon, tulad ng maaari mong makita. >> [Malan] Oh oo. Lamang mahusay, lamang - Oo. Okay. 

Bahagi ng iyong pahina posibleng napaka minimalist at napaka naiintindihan kaya ang mga bagay sa pahina ng daloy sa isang paraan na napaka lohikal at hindi makakuha ng sa paraan ng bawat isa. Ano ang mga uri ng iba pang mga bagay ang mga magandang tungkol sa Facebook o hindi magandang tungkol sa Facebook? Sabihin lamang magkaroon ng isang pag-uusap na disenyo dito. Oh. Saan? Oo. [Mag-aaral] Ang bagong sistema ng Timeline ay nagbibigay-daan sa iyo upang maghanap ng profile ng tao tungkol sa kanilang nakaraan. Ooh, Timeline. Timeline ay isang magandang bagay dahil ito ay nagbibigay-daan sa iyo unti-unting kumalat sa iyong mga kaibigan pabalik kapag sila ay sa mataas na paaralan. Timeline ay mabuti dahil ito ay nagbibigay-daan sa iyong filter sa pamamagitan ng nilalaman ng maraming mas mabilis, ito ay nagbibigay-daan sa iyo upang mahanap ang mga bagay na kung hindi man ay kinuha ka ng isang talagang mahabang panahon upang mahanap ang lamang scroll pataas at pababa, pataas, up, up, up, up, tulad ng pagpunta pabalik sa panahon. Ngunit mayroon ding uri ng isang downside sa mga tuntunin ng karanasan ng user. Ano ang maaaring na maging? Big salita na nagsisimula sa P-R. >> [Mag-aaral] Privacy. >> Privacy, tama? Privacy ay isang malaking isyu sa karanasan ng gumagamit. Ito ay isa ng mga bagay na mapoot ko ang karamihan tungkol sa Facebook ngayon. [Tawa] [Malan] Tulad ng gagawin ko ngayon. David ay hindi mapagtanto na ito aktwal na naganap hanggang kahapon. Kaya ngayon alam niya na ang bawat oras chat ko sa kanya alam ko niya pagbalewala sa akin. [Malan] Ang mahirap bahagi ay aktwal na ako pagbalewala sa kanya, at hindi ko alam kung alam niya ako ay pagbalewala sa kanya. [Tawa] Privacy ay isang malaking isyu. Maaari sinuman dito sabihin sa akin kung ano ang maaaring masamang tungkol sa Facebook privacy maliban sa katotohanan na gawin nila ang mga bagay na tulad nito? Ano ang partikular na mahirap na may paggalang sa Facebook privacy? Na uri ng tanong. Oo. >> [Mag-aaral] Itago ang iyong mga larawan mula sa ilang mga tao. Kanan. Eksakto, upang itago ang iyong mga larawan mula sa ilang mga tao. Ang mga ito ay may ito maliit, maliit na pindutan sa kanang itaas na hinahayaan i-toggle ang privacy ng isang larawan. Ang kanilang privacy pagpipilian ay napaka-iba-iba sa pagitan ng iba't-ibang uri ng menu. 

Nakuha nila na ng maraming mas mahusay na tungkol dito kamakailan, ngunit ginamit ang kaso na tuwing nais upang maiwasan ang iyong mga kaibigan mula sa nakikita ng mga larawan, mayroon kang pumunta sa pamamagitan ng isang napaka-komplikadong 5-hakbang na proseso ng pagiging tulad ng, hayaan mo akong i-click ang link na ito, ngayon ay ipaalam sa akin na i-click muli, hayaan mo akong i-click muli, hayaan mo akong tukuyin kung saan ang mga tao ay hindi maaaring makita ang aking mga larawan. Ito ay hindi partikular na mahusay sa Facebook ay bahagi dahil kaya magkano ang tungkol sa karanasan ng gumagamit ay aktwal na nagbibigay sa kanila ang kalayaan upang kontrolin kung ano ang tao ang maaaring makakita. Tinatawag namin itong user control at kalayaan. Kung hindi ka pagpapaalam gawin ang iyong mga gumagamit na sa isang paraan na ay mahusay at madaling maunawaan, ang iyong karanasan ng gumagamit ay hindi talaga ang mahusay na sa lahat.  Gusto mo guys nais na sabihin ang anumang bagay tungkol sa Facebook? Paano ko itong i-off? [Ong] Hindi mo itong i-off, at iyon ay isang malaking kasiraan sa kakayahang magamit sa bahagi ng Facebook. Ang tampok na ito - aktwal na ako ay tumingin sa ito kahapon - ito ay alinman na hindi mo maaaring gawin ito o ito ay buried sa isang lugar napaka, mahimbing sa recesses ng Facebook dahil hindi ko maaaring malaman kung paano huwag paganahin ang pag-andar na ito sa lahat ng. [Malan] Ngunit minsan ang mga desisyon na ito ay hindi halata dahil ikaw guys ibinigay sa amin ng maraming kapaki-pakinabang na feedback sa iba't ibang CS50 application at mga website na ginagamit ng kurso. Hindi namin ipinapatupad ang lahat ng mga kahilingan at mga suhestiyon. 

Bahagi ng na para sa pagkuha kaya maraming hiling na ito ay isang katangian ng oras, pero minsan lang namin gumawa ng isang nakakamalay desisyon tulad ng, "Salamat sa iyo para sa mga mungkahi, ngunit hindi sumasang-ayon kami." Kaya paano aktwal mong magpasya kung ano ang dapat mong gawin kung ang iyong mga gumagamit sa tingin dapat mong gawin ang isang bagay kahit na hindi mo pag kinakailangan? Ito ay isang masarap na balanse sa pagitan ng aktwal na nakikinig sa kung ano sabihin ang iyong mga gumagamit at aktwal na pagkakaroon ng ilang mga uri ng linya kung saan sinabi mong, "Hindi namin ay pagpunta sa gawin kung ano ang mga gumagamit sabihin." At sa partikular, sa tingin ko nagkaroon ng isang quote sa pamamagitan ng Henry Ford na sums up ito medyo na rin. "Kung ako ay tinanong mga tao kung ano ang nais nila, sila ay sinabi nais nila ang mas mabilis na kabayo." Maaari sinuman ayusin manunudyo bukod sa kung ano ang quote na talagang ay nangangahulugan? Ito ay hindi lamang na alam ng mga gumagamit kung ano ang gusto nilang, ngunit higit pa na - [Mag-aaral] Hindi nila alam kung ano posible. Sa bahagi ay hindi nila alam kung ano ay posible. Manunudyo na bukod kaunti mas. Ano ang ibig mong sabihin sa pamamagitan ng na? [Hindi marinig na mag-aaral ng tugon] Iyon ay mabuti. Ano sa tingin ko kami ay sinusubukan upang sabihin dito na alam ng mga tao kung ano ang gusto nilang. Gusto nilang mas mabilis na kabayo. Kung ano ang kanilang talagang gusto ay ang kakayahan upang ilipat ang mas mabilis, ngunit hindi sila talaga alam ang medium kung saan upang makamit na. Kapag dumating ka sa iyong mga gumagamit at sabihin ang iyong mga gumagamit ka ng isang bagay at sila sabihin sa iyo, "Gusto naming mga tampok na ito at ang mga tampok na ito at ang mga tampok na ito," hindi mo nais na kailangang isipin ang tungkol, "Hayaan akong magpatuloy "At ipatupad kung ano ang sinasabi nila tahasang," ngunit kung ano ang gusto mong isipin ang tungkol ay, "Anong uri ng mga ideya ko maaaring makuha mula sa?" Ano ang aktwal nila gusto? 

At mula doon kung ano ang maaari mong gawin ay magdisenyo ng isang bagay na natutugunan ng mga kahilingan ngunit hindi kinakailangan sa paraan na ang gumagamit inaasahan ito sa nasiyahan. Kaya para sa isang bagay tulad ng panghuling proyekto, sa tunay mga tuntunin, kung ano ang isang kapaki-pakinabang na hyuristiko pagdating sa paggawa ng isang bagay na mas mahusay, lalo na kung ang designer ang may ito kayabangan tungkol sa kanya kung saan ang uri ng malaman kung ano ang pinakamahusay na, maaari mong input mula sa iyong mga gumagamit, ngunit kung paano ang iyong aktwal na pumunta tungkol sa pagkuha na feedback? Sa panghuling proyekto, napaka concretely, kung ano ang gumagawa ng pinakamainam na mga resulta dito? Ano gumagawa pinakamainam na mga resulta - at ako pumunta sa paglipas ng ito sa isang segundo - ay ang proseso ng pagbuo at pagkatapos ay pagsubok at pagkatapos iterating. Ano ang ibig sabihin ko sa pamamagitan ng pagsubok ay karaniwang kapag ikaw magdisenyo ng isang bagay sa tingin mo ito ay medyo magandang, tulad ng, "ako tulad ng mahusay na designer bawat tao'y ay pagpunta sa ibigin ito." At pagkatapos mong ilagay ito doon at ang mga tao ay hindi talagang gusto ang mga ito para sa ilang mga kadahilanan. Ang kailangan mo lang gawin ay mayroon kang upang makuha ang mga bahagi ng mga bagay na gawin ng mga tao tulad ng at ayusin ang mga bagay na ang mga tao ay hindi gusto. Mukhang halata proseso, ngunit ang prosesong ito ng patuloy iterating sa tuktok ng kung ano na binuo ay isang proseso na tumutulong sa iyo hindi lamang pinuhin ang iyong sariling mga kasanayan sa disenyo ngunit din tumutulong sa iyo na pinuhin ang disenyo kaya na ang mga tao ay aktwal na pinahahalagahan ang iyong produkto mas kaysa sa dati. 

Makikita ko pumunta sa paglipas ng mas kongkreto halimbawa ng kung ano ang iyong aktwal na gawin. Bilang uri ng ng huling halimbawa ng isang produkto, tingnan natin sa kayak. Kayak kapag ito ay dumating out ay napaka, napaka-tanyag. Maaari sinuman hulaan kung bakit? Ano ang mga uri ng mga bagay na gusto mo tungkol sa kung ginamit mo ito o kung ano ang mga uri ng mga bagay na hindi mo gusto? Oo. >> [Hindi marinig na mag-aaral ng tugon] >> Okay. Na bahagi nito ay pagpapaalam ang user ay may isang query na mas malawak na kaysa sa isang mahigpit na isa tulad ng, "Mayroon kang pumili ng iyong petsa ng pagsisimula "At mayroon kang upang piliin ang iyong mga petsa ng pagtatapos." Sa katunayan, ito ay nagbibigay-daan sa iyo upang kakayahang umangkop tungkol dito at ito ay nagbibigay sa iyo ng lahat ng flight sa ang saklaw na iyon. Anumang bagay? [Mag-aaral] Kasama sa mga ito ang mga bayarin sa presyo. Gawin nila isama ang mga bayarin sa presyo. Ang mga buwis at mga bagay aktwal na dumiretso sa na presyo sa itaas na kaliwang kaya hindi ka tricked sa pag-iisip na aktwal na nagbabayad ka para sa isang $ 240 na flight kapag ito ay talagang $ 330. Anumang bagay? Oo. [Hindi marinig na mag-aaral ng tugon] Hindi ako sigurado kung sila aktwal na sabihin gawin mo na. Baka ako mali. Na maaaring maging isang kawili-wiling bagay kung gusto mong maglagay ng karagdagang bigat sa partikular na mga filter kaya na itulak sila ng mga resulta na may kaugnayan sa na filter sa itaas. Ngunit maaari sinuman sabihin sa akin kung ano ang kaya espesyal na tungkol sa kaliwang bahagi na ito? Paano mo tradisyonal maghanap ng flight sa isang serbisyo ng Internet bago ito? 

Oo. >> [Hindi marinig tugon ng mag-aaral] >> Maaari mong sabihin na - [Mag-aaral] bawat airline. >> Oo. Airline bawat isa ay may sariling website nito. Ito consolidates mga bagay. At? [Mag-aaral] alam mo kung ano mismo ang oras Aalis ka. Mo alam kung ano mismo ang oras Aalis ka, ngunit may kaugnayan sa mga filter sa partikular. Hayaan akong makuha ang kayak. Oh Diyos, pop-ups. Hindi magandang karanasan ng user. Ano ang mangyayari kapag nilipat ko ang slider na ito? [Mag-aaral] Awtomatikong update. >> [Ong] Awtomatikong update. Iyon ay isang bagay na napakahalaga. Bago ito, tuwing nais upang maghanap ng flight, mayroon kang upang ilagay sa iyong input na lokasyon, ang iyong output lokasyon, pindutin ang Search, ito iproseso na at ipakita ang iyong mga resulta. Kung nais mong baguhin ang iyong query, gusto mo pindutin muli nang dalawang beses, pumasok sa isang bagong query mula sa simula, at pagkatapos ay gawin ito nang paulit-ulit. Ang gandang bagay tungkol sa isang bagay tulad nito ay ito ay gumagamit ng isang napaka [hindi maintindihan] bagay sa gitna. Tuwing gagawin mo ang isang bagay tulad nito, ito shoots off ang isang kahilingan at nagbabalik mo ang lahat ng mga resulta kaagad. Ay isang bagay na ginawa kayak wildly popular na ang ganitong uri ng agarang feedback dahil ito ay talagang madali para lamang sa akin baguhin ang aking query at upang malaman kung ang mga bagay na sa paligid ng isang partikular na hanay nang hindi na kinakailangang upang bumalik-balik, papunta at pabalik, papunta at pabalik. Kaya ito ay ang lahat ng mga uri ng mga bagay na gusto mong mag-isip tungkol sa kung kailan ka pagdidisenyo ng iyong website. Paano ko mapapalitaw ang mas mahusay para sa aking mga gumagamit upang pumunta sa pamamagitan ng anumang sila ay nagtatrabaho sa at upang makakuha ng sa kanilang sa wakas layunin nang mabilis hangga't maaari? [Malan] At sa punto ng Joseph ng mas maaga tungkol sa mga gumagamit na hindi kinakailangang alam kung ano ang gusto nilang, batay sa kung ano ang iyong guys ngayon alam tungkol sa HTML at mayroon kang checkbox, mga pindutan ng radyo, piliin ang menu, mga patlang ng input at ang tulad, kung paano mo ipatupad ang paniwala ng pagpili ng isang oras ng simula para sa isang flight? 

Alin sa mga iba't ibang mga mekanismo ng UI ang gusto mong gamitin? Kung kamakailan mo lamang malaman ang halaga ng HTML na ay itinuro bago at alam mo ang mga input ang radio button, checkbox, drop-down, at input box, kung ano ang iyong natural na pagpili para sa pagpili ng petsa? [Mag-aaral] Input. >> Input. O maaari ring maging isang drop-down sa lahat ng ang mga petsa, i-right? Kaya sa mga mas kumplikadong mekanismo ng UI tulad nito sa kaliwang bahagi na maaari mong ipatupad, maaari kang gumawa ng prosesong ito mas intuitive na may isang slider dahil oras ay tuloy-tuloy, at mga taong karaniwang hindi nag-iisip ng mga ito sa mga tuntunin ng hiwalay chunks. Ayos lang. Huling bagay. Sampung heuristics sa usability. Ang lahat ng mga bagay na usapan natin ang tungkol malamang na mahulog sa ilalim ng isa sa mga kategoryang ito. Kung pupunta ka sa ang link na ito, kung saan ang site ay ipo-post online, iyong aktwal na magagawang, idisenyo ang iyong site, panatilihin ang mga heuristics na ito sa isip at ang mga panuntunang ito ng thumb. Para sa iyong mga proyekto, kung ano ang iminumungkahi kong gawin upang disenyo ng iyong app ng mas mahusay na ay gawin muna ang papel prototyping. Kapag ikaw ay nag-iisip tungkol sa iyong application, masyadong mabilis Sketch kung ano ang gusto mong ito sa hitsura at tiyakin na ang lahat ng mga kahon ay isagawa sa isang paraan na ay lubos na madaling maunawaan para sa gumagamit na gamitin ang at kahit na ipakita ang mga modelo ng papel sa iyong mga kaibigan at simulan ang focus group. Lamang makakuha ng 2 o 3 tao at hilingin sa kanila na pumindot lang sa mga modelo ng papel, at ipakita ang mga ito bagong screen upang makita kung sila aktwal na maunawaan kung ano ang nangyayari sa. 

Ano ang gusto mong gawin ay bigyan sila ng isang gawain, umudyok na gawain, at bigyan sila ng app at hayaan silang gamitin ito. Huwag bigyan ang mga ito ng mga tagubilin lampas na. Gusto mong aktwal na hayaan silang makipag-ugnay sa iyong app sa isang paraan na hinahayaan kang makita kung paano nila gamitin ito kung hindi ikaw ay nakatayo sa tabi sa kanila. At na napakahalaga. Na ay magbibigay sa iyo ng maraming pananaw bilang sa mga taong pagkuha sa paligid sa mga partikular na bagay sa isang paraan na hindi ko nilayong mga ito sa? Mga ito ang paggamit ng partikular na mga mekanismo ng UI sa screen sa isang paraan na uri ng hacky? Hindi ko nilayon para sa kanila na gawin ito na paraan. At sa sandaling tapos ka na sa na, kung ano ang gusto mong gawin? Ang iyong mga disenyo bato, i-right? Ano ang gusto mong gawin na gusto mo upang bumuo at pagkatapos ay gawin ang proseso muli. Kaya ipakita ito sa mga kaibigan sa oras na iyong binuo ito, subukan ito, bumuo, subukan, bumuo, subukan, umulit, sa at sa at ipasa. Disenyo ay isang napaka-umuulit proseso sa puntong ito. Aktwal mong upang bumuo ng isang bagay at pagkatapos ay mapagtanto ang mga bagay tungkol dito na hindi mo mapagtanto bago at bumalik at mapabuti ang mula sa. Ngayon, bilang para sa bahagi ng pag-unlad, na ang Tommy ay pagpunta upang ipakita sa iyo pagkatapos ng pahinga at kung paano mo maaaring ipatupad ang isang bagay tulad ng autocomplete sa isang paraan na ay medyo simple. [Malan] Bilang Tommy set up dito, ang isang tanong pagkatapos. Isang maraming pinakamaagang website - at kapag Joseph sinabi 1990s estilo website, ito ay ang pagpapatupad kung saan kung nais mong pumili ng isang oras ng simula at oras ng pagtatapos, lantaran, bumalik sa araw at kahit na sa ilang mga website na ngayon, ang paraan na gagawin mo ito ay mong pumili ng isang oras mula sa drop-down, pumili ka ng mga minuto mula sa drop-down, maaaring pinili mong AM, PM, at pagkatapos ay gawin mo na 3 higit pang mga beses. At ito na may 6 na mga pag-click at maaaring ilang scroll ang iyong user ay maaaring aktwal na magbigay ng ilang mga uri ng petsa at / o hanay ng oras sa puntong ito. 

Kaya tiyak suboptimal at pa sa gayon ay malayo nakakita kami ng hindi nagpapakilala kakayahan sa anuman sa mga wikang kami ay tumingin sa upang gawin ang isang bagay sexier tulad ng ito slider ng oras ng simula at oras ng pagtatapos. Ngunit kung sa tingin mo bumalik sa linggo 0 kapag usapan natin ang tungkol sa simula, doon may mga widget na lang ginawa ang ilang mga bagay. Mo ba talagang lamang ay may mga batayan tulad ng mga loop at kundisyon at ang mga tulad ng. Kaya uri ng pag-iisip napaka abstractly ngayon, hiwalay ng particular ng HTML, kung ano ang talagang pagpunta sa may isang bagay tulad ng ang oras ng simula at wakas slider ng oras? Kapag ko bang ilipat ang aking mouse at ako mag-click sa na maliit na karot simbolo sa kaliwa at simulan ang pag-drag, programa, kung ano ang nais mong ipatupad na nangyari? Ano ang tanong, ano ang Boolean expression ang gusto mong upang humingi? Kung ano talaga ang nangyayari sa? Sammy? [Mag-aaral] Saan ang posisyon ng cursor? >> Mahusay. Saan ang posisyon ng cursor? Ito ay isang bagay na kailangan namin upang ipahayag ang pabalik sa simula, kung ito ay batay sa lokasyon o kahit kulay o tulad ng. Maaari mong isipin ang kailanman kaya maikling sa Lunes mayroong lahat ng mga bagay na ito na tinatawag na mga kaganapan sa mundo ng Web, at kaya may mga bagay na tulad ng onclick at onkeypress at onkeyup at onmouseover at onmouseout. Napagtanto Kaya na kahit ang mga bagay na namin ang paglalaan para sa ipinagkaloob sa Web sa mga site tulad ng Facebook at Gmail, kahit na kung mayroon kang mga ideya kung paano mo posibleng ipatupad na dahil walang kahit tulad ito sa panayam o Problema Itakda 7, nauunawaan natin na may mga eksaktong parehong batayan, may HTTP at mga parameter at GET at POST, gamit ang basic HTML input na kami ay tumingin sa sa gayon ay malayo at sa ilang sandali na may ang program na mekanismo na Tommy ay upang ipakilala maaari mong simulan upang ipahayag ang iyong sarili tulad lang ng ginawa mo sa linggo 0 sa pamamagitan ng napaka intuitively ng pag-drag at pag-drop. 

Kaya na sinabi, Tommy MacWilliam at ilang mga bagong piraso ng puzzle para sa amin para sa Web. Ayos lang. Ang pangalan ko ay Tommy at ako pagpunta sa pakikipag-usap tungkol sa JavaScript. Lang ang disclaimer: Ako ng opinyon na JavaScript ay ang pinakamahusay na wika ng programming sa buong buong mundo. Mayroong maraming mga tao na hindi sumasang-ayon sa akin, ngunit ito lamang ang mga kamangha-manghang. Kapag pumunta ka pabalik sa C, kung mayroon kang magsulat C para sa isa pang klase o ilang iba pang mga wika, lang talaga nakakadismaya sa lahat ng mga mababang antas na mga detalye na mayroon ka upang nabalaho sa putik. Kaya kung ka pakiramdam malungkot tungkol sa kung paano nakakainis C ay na magsulat, lang bumalik, sumulat ng ilang JavaScript. Ito ay nirvana. Makikita mo pakiramdam magkano ang mas mahusay na tungkol sa iyong masamang araw. Isang maraming ng magic ng JavaScript ay mula sa kakayahan upang manipulahin ang mga bagay na nasa pahina. Kapag sinulat ni namin ang aming PHP script, sila ay isinasagawa sa server, at kalaunan na PHP marahil output ng script ilang HTML. Na HTML ay ipinadala sa client, at pagkatapos na ito. Kung nais mong magdagdag ng isang pindutan sa isang pahina ng PHP, halimbawa, hindi talaga ito maaaring gawin iyon. Na ito upang mag-render ng isang buong bagong file na HTML at ipadala na sa browser. Gamit ang JavaScript alam namin na maaari naming i-update ang mga bagay na habang sila ay sa pahina, at dahil dito maaari naming magbigay ng mas instant na feedback, na talagang mapabuti ang karanasan ng gumagamit sa aming website. Lamang ng isang mabilis na pagbabalik-tanaw ng JavaScript tagapili. Alam namin na kapag kami i-download ang isang HTML na pahina, na pagpunta kinakatawan sa DOM. 

Tandaan ang DOM ito malaking puno kung saan ang mga elemento ay may kaugnayan sa malaking hierarchy. Kapag namin nagtrabaho sa database sa pset 7, isa sa mga unang bagay na kailangan namin upang malaman kung paano gawin ay query sa database. Mayroon kaming ang malaking mga gumagamit ng talahanayan, at minsan gusto lang namin sasabihin, "Gusto ko lang ilan sa mga user na tumutugma sa ilang mga kundisyon." Katulad nito, kapag mayroon namin ang DOM kailangan namin ilang paraan ng querying ito. Kailangan namin ang ilang paraan ng pagsabi, "Gusto kong lahat ng mga pindutan na ganito ang hitsura ng "O lahat ng mga imahe sa pahina." At ang mga tagapili na ito ay nagbibigay-daan sa amin upang gawin iyon. Kaya lamang ng isang mabilis na pagbabalik-tanaw. Ito unang isa dito, ito # isumite, kung ano ay na upang piliin? Ba ang sinuman tandaan? [Hindi marinig na mag-aaral ng tugon] >> Oo, eksakto. Na ito ay upang pumili ng isang elemento sa pahina na may isang ID ng isumite. At sa gayon ay hash tag sabi ni selector na ito ay upang gumana sa mga ID. Paano tungkol sa ikalawang isa, ito. Iginitna, kung ano ang na piliin? Oo. >> [Mag-aaral] Class. >> Mismong. Na ito ay upang piliin sa pamamagitan ng klase. Ang pagkakaiba sa pagitan ng ID at klase dito ay ang ID ay dapat natatangi sa loob ng anumang espasyo naghahanap ka. Kaya kung ikaw ay naghahanap sa isang buong web page, mo ba talagang dapat lamang magkaroon ng 1 elemento na may ID na ilang, kaya sa kasong ito ng isumite. Sa mga klase, sa kabilang banda, maaari naming magkaroon ng higit sa 1 elemento sa parehong pahina na may parehong klase. Ito ay maaaring maging kapaki-pakinabang sa sinasabi gusto kong piliin ang lahat ng bagay na nakasentro sa pahina kaysa sa 1 bagay lang. 

At sa wakas, ang huling isa dito ng kaunti pa kumplikadong, ngunit kung ano ang ito upang pumili mula sa DOM? [Hindi marinig na mag-aaral ng tugon] >> Ano iyon? [Mag-aaral] anumang na ng tag. >> Mayroon kaming 2 bahagi dito. Ang ikalawang bahagi ay upang sabihin na gusto kong piliin ang mga tag na ito na may tag ng input, kaya elemento anumang na isang input tag. Ngunit hindi ko nais na lamang piliin ang lahat ng input dahil ang isang bagay tulad ng isang pindutan ng isumite isang input at ang isang bagay tulad ng isang kahon ng teksto ay maaaring maging isang input. Kaya may mga square bracket ako sinasabi gusto ko lang upang piliin ang mga elementong iyon na ng uri ng teksto. Sa isang lugar sa aking HTML tag na mayroon akong isang katangian na tinatawag na uri, at ang halaga ng katangiang iyon na teksto. Kaya kung paano tungkol sa unang bahagi na ito dito? Ang unang salita ng selector na ito ay form na mayroon akong isang espasyo at pagkatapos ay ang input bahagi. Ano ang na gawin, paglalagay ng form sa harap nito? Ito ay pagpunta sa isa lamang na limitahan ang aming query. Ito ay maaaring maging kaso na mayroon kaming ilang mga input sa pahina na hindi kaapu-apuhan ng isang form. Ano ito ay gawin ito ay sabihin gusto ko lang ang input tag na may isang lugar sa itaas sa kanila ilang elemento ng magulang ng isang form. At kaya sa ganitong paraan maaari naming gumawa ng mga mas hierarchical mga query sa kaya hindi namin na lang ay upang piliin ang lahat na tumutugma sa isang ibinigay na tagapili. Maaari namin ang uri ng limitasyon ang saklaw ng query na iyon sa iba pa. Kaya ngayon na alam namin kung paano piliin ang mga elemento sa pahina, sabihin makipag-usap ng kaunti tungkol sa AJAX. AJAX ay pa rin lubhang naka-istilong acronym na nakatayo para sa asynchronous na JavaScript at XML. Lamang kaya mangyayari na XML lamang ang ilang mga paraan upang kumatawan ng data. 

Na uri ng nawala katanyagan kamakailan, kaya ang X sa AJAX ay hindi ginamit ang lahat ng oras. Talaga, ano ang AJAX ay nagbibigay-daan sa amin upang gawin ay gumawa ng mga HTTP kahilingan mula sa konteksto ng JavaScript. Kapag hindi namin sa aming web browser at kami ay-navigate sa paligid ng mga pahina at i-click kami ng link, kung ano ang aming browser gawin ay gumawa ng HTTP na kahilingan sa anumang link na namin i-click. Ngunit na hindi laging perpekto dahil kung iyon ang kaso, pagkatapos ay bilang David ay sinasabi, lagi naming upang gumawa ng mga gumagamit na i-click ang Isumite ang pindutan o i-click ang link upang gumawa ng anumang mangyayari na may kasangkot na HTTP na kahilingan. Kaya sa AJAX maaari naming gumawa ng mga kahilingan na ito sa ngalan ng JavaScript. Iyon ay nangangahulugang tuwing may gumagamit sa makipag-ugnay ang pahina o anumang mangyayari, maaari naming aktwal na gumawa ng isang program kahilingan sa ilang iba pang mga file ng PHP sa aming website o anumang bagay at makuha ang mga data na file na spits ang. Natin tingnan ang isang halimbawa ng AJAX. Ito ay aming CS50 Finance pahina na sana ang ilan sa atin ay pamilyar. Kung titingnan namin sa HTML ng pahinang ito, tingnan namin dito na Idinagdag ko na ang ilang mga bagay, kung saan Ibinigay ko ang form na ito ng ID. Ko ang sinabi id = "form na-quote". Nagawa ko na ito dahil lang sa ito upang gumawa ito ng kaunti mas madali upang pumili mula sa DOM dahil ko lamang gumawa ng isang simpleng query. Kung ano ang gusto kong gawin dito ay gusto ko upang ayusin ang ilang problema sa CS50 Finance. Kaya kung pumunta kami sa finance.cs50.net, sa bawat oras na nais ko upang makakuha ng isang quote, mayroon akong i-click ang Kumuha ng Quote pindutan, at na Kumuha ng Quote pindutan at pagkatapos ay dadalhin ako sa isa pang buong pahina. At kung gusto ko ng isa pang quote, mayroon akong upang pindutin ang pindutang Bumalik at pagkatapos ko i-type ito sa, Nakakuha ako ng quote, at ako pindutin ang pindutang Bumalik. Ito ay talagang hindi ang pinakamahusay na karanasan ng user. Sino ang gusto talagang gamitin ang site kung ito ay na mabagal upang makakuha ng mga presyo ng stock? Kaya kung ano ang gusto naming gawin sa AJAX ay alisin na hakbang ng pagpunta sa isang hiwalay na pahina upang tingnan ang mga resulta. 

Ano talaga namin ka lamang humihingi ng na talagang maliit na presyo, at ito lamang ay isang talagang maliit na halaga ng data. Kaya walang pangangailangan para sa akin upang pumunta sa isa pang buong HTML na pahina, i-download ang isang buong bagong batch ng HTML, maaaring i-download ang ilang higit pang mga larawan, ilang iba pang mga CSS file para sa akin lamang upang sagutin na napaka-simpleng tanong kung magkano ang stock gastos na ito. Gamit ang AJAX namin ito ng maraming mas madali. Nakikita namin pababa dito na ako sa pagli-link sa JavaScript file na tinatawag na quote.js. Natin ang aktwal na buksan ang file na iyon. Hindi doon. Lahat ng aking mga file sa JavaScript ay pagpunta sa matatagpuan sa HTML kaya na web browser ay maaaring ma-access ito. Pagkatapos mayroon kaming isang hiwalay na direktoryo dito para sa JavaScript, at ngayon dito ay quote.js. Sa tuktok ng file na ito ito sabi dito na gusto kong maghintay para sa buong pahina-load bago sinusubukan kong gawin. Bakit ay na kinakailangan? Ito lumiliko out na ang susunod na bagay na ako pagpunta sa gawin dito simula ng pagtingin para sa isang elemento na tumutugma sa ilang tagapili. Kung ang JavaScript ito ay kailanman pinaandar bago ang elementong ito ay load sa pahina, ang lahat ng sinusubukan kong gawin ay hindi pagpunta sa trabaho dahil ako pagpunta sa subukan upang pumili ng isang bagay na hindi doon pa. Kaya ito line up tuktok na gusto kong mong maghintay hanggang lahat ay load kaya kami ay katiyakan na ang anumang mga elemento Naghahanap ako ng aktwal na sa pahina. Ito dollar sign dito ay nangangahulugan na ang gumagamit ako sa library na tinatawag na jQuery. JQuery library na ito ay nagbibigay-daan sa amin upang gamitin ang mga tagapili na lang namin ay tumingin sa. Sa pamamagitan ng sinasabi $ pagkatapos pagpasa sa bilang isang argument na ito # form na-quote, Ako ngayon ng pagpili ng form na iyon na lang namin kinuha ng isang pagtingin sa. Ngayon Mayroon akong isang representasyon ng form na iyon sa memorya sa paanuman. 

Sa ngayon sa bagay na ito, ang representasyon ng form, Ngayon gumagamit ako ng isang function na tinatawag na sa. Ano ang function na ito ginagawa ito upang i-attach ang isang kaganapan handler. Ang kaganapan na kami ay pagpunta sa makinig para sa ang isumite kaganapan. Kaya kapag ang user ay nag-click na Magsumite ng pindutan o pagpindot sa Ipasok, Ang kaganapan na ito ay pagpunta sa sunog. Sa pamamagitan ng hooking sa ito, maaari ko ngayon sasapaw sa default na pag-uugali ng form. Wala ang JavaScript, ang form ay isinumite sa anumang PHP file ginamit namin sa katangiang iyon ng pagkilos. Ngunit sa halip, ngayon ako sinasabi, maghintay, maghintay, maghintay, hindi ko nais na aktwal mong gawin na. Gusto ko ito mangyari bago ka pumunta at subukan upang isumite sa ilang PHP file. Ngayon kung ano ang gusto kong gawin? Sa puntong ito, gusto kong gamitin ang AJAX sa paanuman upang i-load sa kung ano ang presyo ng stock. Ang unang bagay na kailangan kong malaman kung ano stock ang user hinahanap. Upang gawin na ako pagpunta sa gumamit ng ibang selector. Ito ang pangatlong tagapili na namin tumingin sa bago. Ito ay sinasabi na gusto ko upang simulan-off ang form na ito ng elemento sa isang ID ng form na-quote. Pagkatapos sa isang lugar sa loob ng form na iyon na isang elemento ng input na may pangalan ng simbolo. Kung titingnan namin sa aming HTML, nakita namin na nagkaroon kami ng input [pangalan = simbolo]. Na nangangahulugan na ito ay upang piliin ang text box na ang gumagamit ay nagta-type sa. Na ang magaling. Mayroon kaming text box. Ngayon kailangan lang namin malaman kung ano ang sa loob nito. Upang gawin na maaari naming tawagan ang pamamaraan na ito dito, ito. Val, at ito sabi ni Alam ko kung ano ang text box na mayroon kang. Gusto ko mong sabihin sa akin kung ano ang gumagamit na nai-type sa text box na iyon. Ngayon kami ay may isang string na tinatawag na simbolo na katumbas sa anumang user-type. Na ang magaling. Maaari naming gamitin na string ngayon upang gawin ang aming kahilingan. Ito ay isang bagong function na dito, ang $, maliban sa hindi na kami ay pagpunta sa ay ang pagpili ng mga elemento, kami ay pagpunta sa ay pagtawag ng ibang function na ibinigay sa amin sa pamamagitan ng jQuery. Ang AJAX function na ay kung ano ang aktwal na pagpunta sa gawin ang kahilingang HTTP. Kaya mayroon kaming upang sabihin dito ang ilang mga bagay. Ang unang bagay na mayroon kami upang sabihin na ito function na kung saan Gusto kong pumunta ang kahilingan. Sa isang lugar sa aking proyekto ko ang file na ito sa loob ng HTML na direktoryo na tinatawag na quote.php. Ko ma-access ang file na ito, nakita namin, tulad ng ito, kung pumunta ako sa localhost / quote.php. 

Gusto ko ang aking JavaScript upang gumawa ng kahilingan sa pahinang iyon. Anong uri ng kahilingan ngayon? Nakita namin bago form na iyon ay may na paraan ng = "post" na attribute, at ito ay nangangahulugan na ito upang gumawa ng POST kahilingan, kaya hindi ito upang ilagay ang anumang bagay sa URL, kaysa sa isang Kumuha ng kahilingan, na nais lamang na fired kung lamang namin access ang pahina gamit ang web browser, halimbawa. Na namin ngayon ang sinabi Gusto kong gumawa ng isang kahilingan ng HTTP POST sa isang pahina na matatagpuan sa quote.php. Kapag naming isumite ang form, tandaan kami maaaring ma-access ang mga elemento ng input sa loob ng form na iyon may variable na $ _POST. Sa ngayon sa kuwento ay hindi namin aktwal na ipinadala sa kahabaan ng anumang data. Namin ang sinabi ginagawa namin ng isang AJAX kahilingan at narito ang uri ng kahilingan ginagawa namin. Ngayon kailangan namin upang aktwal na magpadala ng mga ilang data sa pahina. Upang gawin na maaari naming gamitin ang ari-arian na tinatawag na data. Ang halaga ng ari-arian na ito ay talagang isang nag-uugnay array. Ang dahilan para sa ay nagbibigay-daan sa amin upang magpadala ng higit pa kaysa sa may 1 piraso ng data. Iyon ay kung bakit mayroon kaming mga kulot tirante dito nested sa loob ng iba pang mga kulot tirante. Ang mga susi sa mga nag-uugnay array ay ang parehong bagay ng pangalan ng mga nagdudulot sa aming mga elemento sa form na. Nangangahulugan iyon na kung ako magpadala sa kahabaan ng key ng simbolo, na nangangahulugan na ang aking PHP pahina ay maaaring ma-access ang data na ito sa $ _POST [simbolo] lamang tulad ng ginawa namin bago kapag kami ng pagsusumite ng form. At ngayon ang aktwal na data na gusto naming magpadala ng ay ang halaga sa loob ng mga ito nag-uugnay array. 

Namin ang naka-imbak na teksto na ito sa isang variable na tinatawag na simbolo, at kaya namin ipinapadala sa kahabaan ng key ng simbolo na ngayon at isang halaga ng anumang user-type. Na namin ngayon ang HTTP na kahilingan na ito, aming PHP file ay pinaandar, at ito upang magpadala ng ilang data bumalik ngayon sa client na ginawa ang hiling na ito. Ngayon kailangan namin upang tumugon sa anumang server ang sinabi sa amin. Upang gawin na namin ito huling na ari-arian dito tinatawag na tagumpay. Ang halaga ng tagumpay ang key na ito ay aktwal na pagpunta sa isang function, at ito ay isa sa mga talagang cool na mga bagay na maaari mong gawin sa JavaScript. Hindi lamang maaari kang magkaroon ng mga ints o array bilang isang halaga sa loob ng isang nag-uugnay array, Maaari rin naming magkaroon ng isang function. Kaya sa pamamagitan ng sinasabi tagumpay, ito ay ang aking key. Tutuldok sinasabi dito ay ang halaga, at ngayon ang halaga ng mga ito ay talagang isang function. Kaya hindi namin kailangan upang bigyan ang function na ito ng pangalan per se. Maaari lang namin sabihin na ito ay pagpunta sa ilang function na. Ito ng 1 argumento. Ang argumento sa function na ito ay magiging anumang server ay nagpadala sa amin pabalik mula sa kahilingan. Tulad kapag ang aming browser gumagawa ng isang kahilingan, ang server ay nagpapadala ng isang bagay na bumalik at ang browser ay nagpapakita ng ito, sa konteksto ng AJAX ginawa namin ng isang kahilingan, ang server ay nagpadala ng isang bagay sa likod, at ngayon na aming kinakatawan bilang isang string. Gamit na string gusto ko lang i upang ipakita na sa pahina. Upang gawin na ako pagpunta sa magkaroon ng isa huling tagapili. Gusto kong piliin ang elemento ang presyo ng ID. Ito ay isang walang laman na div na aking nilikha sa pahina, at gusto ko upang itakda ang mga nilalaman ng na div sa anumang server ay nagpadala sa amin pabalik. Tunay ko na binagong quote.php bit ng. 

Kaysa sa pagtawag render at nagre-render ng ilang mga pahina, quote.php ngayon ay simpleng upang i-print ang halaga ng stock bilang isang string. Kaya't kung ikaw ay aktwal na bisitahin ang pahina, nais mong lang makita na maliit na string anuman ang presyo ng stock ay. Isang huling bagay na kailangan namin upang gawin dito ay tiyakin lamang na function na ito ay nagbabalik ng maling. Kung ano ang sinasabi ay na kung ako sa loob ng isang handler ng kaganapan at na ang handler ng kaganapan nagbabalik maling sa halip ng bumabalik totoo, na nangangahulugan na hindi ko gusto ang orihinal na kaganapan sa sunog. Sa kasong ito, kung hindi namin magkaroon ng anumang JavaScript at aming naisumite ang isang form, aming web browser upang sabihin, "ako pagpunta sa ipadala ang data na iyon kasama," at sila ay pagpunta sa magpadala sa iyo sa isa pang pahina. Dahil kami ay gamit ang AJAX ngayon, hindi na kailangan upang ipadala ang gumagamit sa isa pang pahina. Kami ay pagpunta upang ipakita ang mga resulta sa dynamic na sa parehong pahina na ito. Hindi namin talagang gusto sa kanila upang pumunta saanman, at gusto kong manatili sa parehong pahina. Kaya sa pamamagitan ng pagbalik maling, namin matiyak na ang form ay hindi gawin iyon para sa amin. Natin ng isang pagtingin sa kung ano ang aktwal na kamukha. Aming pahina ng quote hitsura ang parehong. Hayaan akong makuha ang down na ang inspector dito upang maaari naming makita kung ano ang nangyayari sa. Gawin itong isang maliit na mas mababa malaking. Tandaan kung namin buksan ang tab na Network, ito ay kung saan maaari naming makita ang lahat ng mga kahilingan ng HTTP na nangyayari sa pahina. 

Para sa isang simbolo ipaalam sa akin type sa aapl at i-click ang Kumuha ng Quote. Ngayon Nakita namin na ang isang bahagi ng Apple ay nagkakahalaga ng ilang bilang ng mga dolyar lamang lumitaw sa pahina, ngunit ang URL ay hindi nagbabago sa lahat. Sa katunayan, narito ang HTTP na kahilingan na aming ginawa. Ginawa namin ang kahilingan ng POST sa quote.php. Na saysay. Ito ay kung ano ang server ay nagpadala sa amin pabalik. Ito ay hindi na ito parang higante na HTML na dokumento na may mga imahe at mga bagay tulad na, ito ay isang linya ng teksto, at pagkatapos ay ipinapakita lamang namin ang linya ng teksto. Kung pumunta namin pabalik sa header at makita kung ano ang aming aktwal na ay nagpadala sa loob ng ang HTTP na kahilingan na ito, maaari naming makita ang dito na ipinadala namin sa kahabaan ng key ng simbolo at halaga ng aapl, na kung ano ang user-type. Ito maganda, ngunit ito ay pa rin ng kaunti nakakainis. Mayroon pa akong i-click ang pindutang ito upang makuha ang mga stock quote. Humihingi kami ng mga abalang tao at wala kaming oras na i-click ang pindutan. Google maisasakatuparan ito ng ilang sandali ang nakalipas kapag sila ay ipinatupad ang Google Instant. Ano ang Google Instant ginagawa bilang iyong tina-type ito lamang nagsisimula pagpapakita ng mga resulta para sa iyo kaya hindi mo kailangang mag-alala tungkol sa kahit ng pag-click sa Paghahanap. Aktwal, masaya kuwento na may kaugnayan sa na. Sandaling Google Instant ay dumating out, ang mga tao ay tulad ng, "Whoa, ito sobrang kamangha-manghang." "Ito ay kaya cool na." At isang mag-aaral sa Stanford na 19 sa oras gumawa site na ito na tinatawag na YouTube Instant. Lahat ng YouTube Instant na ang ay epektibo maghanap sa YouTube agad. Kaya sa halip ng pagkakaroon upang pumunta sa YouTube.com at pindutin ang Search, kapag nagsimula ako mag-type sa YouTube Instant na isang bagay tulad ng CS50, maaari naming makita dito na ito sinusubukang sa isang mabagal na koneksyon sa Internet populate nakatira ang mga resultang ito. Upang gawin na maaari namin ang aktwal na gumawa ng isang simpleng pagbabago sa aming quote.js file. Sa ngayon kami ay naglalakip ng kaganapang ito kapag ang form ay isinumite. Hindi namin talagang gusto ang user isumite ang form na iyon na ito, kaya sabihin sa halip sunog ang kaganapang ito sa bawat oras na ang user pagpindot sa isang susi. Upang gawin na natin ang unang baguhin ang mga kaganapan mula sa isinumite sa keyup. Na nangangahulugan na sa halip na naghihintay para sa form upang isumite ang, tuwing key ay pinindot, ang isang bagay ay pagpunta sa mangyayari. Ito ay hindi na saysay upang i-attach ang keyup kaganapan ang buong form. Namin lamang talagang pakialam tungkol sa box para sa paghahanap na iyon. 

Upang piliin na ngayon, maaari naming baguhin ito upang maging, sa halip na form-quote, form na-quote at magpapadala kami ng isang input (type = text) o maaari naming sabihin (pangalanan = simbolo) - anumang gusto naming. Ngayon ay mayroong isang huling bagay na kami ay may sa gawin. Tandaan pababa dito kapag sinabi namin ang return false sinabi namin na hindi namin nais na default kaganapan sa sunog. Ngunit ito lamang kaya mangyayari na kung hindi paganahin namin na ngayon, anumang type namin sa ay hindi pagpunta upang ipakita sa browser dahil iyon ay ang default na pag-uugali ng pag-type sa isang kahon ng teksto. Hindi na namin nais upang i-override na, kaya hayaan sirain return ito maling. Kung namin i-save na at i-reload ang pahina, ngayon kapag ako magsisimulang mag-type ng aapl makikita mo na ang mga presyo ng stock sa ibaba dito ay pagkumpleto awtomatikong. Kaya dito ay CS50 Finance Instant na. Talagang isang masayang kwento tungkol sa YouTube Instant ang mag-aaral na ang uri ng sinulat ni ito bilang isang 1-gabi na proyekto, at ang susunod na araw siya ay Inaalok trabaho ng YouTube CEO. Kaya bilang simpleng bilang na, CS50 mga mag-aaral, ang iyong panghuling proyekto makakuha ka ng trabaho sa YouTube. Ang isang bagay tulad na isang talagang cool na ideya para sa isang pangwakas na proyekto, i-right? Nagkaroon kami ng ilang mga umiiral na pag-andar na namin nais na isama ang. Naming mapabuti ang karanasan ng gumagamit ng kaunti, at biglang naghahanap ng isang bagay sa YouTube Instant ay maaaring maging isang maraming mas madali kaysa sa naghahanap para sa ito sa regular na YouTube. Kaya na AJAX sa maikling sabi. 

Sa halimbawa na Joseph ay nagpapakita, nakita namin ng maraming mga autocompletes, at mga autocompletes talaga, talagang madaling gamiting dahil hindi namin kailangang tandaan - Halimbawa, kung hindi mo matandaan ang presyo ng stock para sa Apple at lamang namin alam aa isang bagay, sa halip na lang sinasabi sa akin, "Isang bahagi ng bagay na ito ay nagkakahalaga ng ganito karami pera," Gusto ko uri ng bang malaman kung ano ang mga stock magsimula sa aa. Maaari naming gawin na talagang mahusay ang Bootstrap library pa kasama loob ng CS50 Finance. Kung dumating ka dito sa tag ng JavaScript at mag-scroll pababa sa Typeahead, ito ay isang magaling na plugin na isang tao na sinulat ni para sa amin, at maaari naming madaling gamitin ang pag-andar nito tulad nito. Ko na nai-type sa isang A at dito ay isang listahan ng ilang mga estado na nagsisimula sa A. Sabihin natin na sa tingin ko ito ay talagang cool na at ito ay oras para sa akin upang isama ito sa aking pahina. Ito lumiliko out na talaga ito, talagang simple. Natin lundagan dito upang quote3.js. Medyo naiiba ang hitsura ng aking file. Down dito lahat ng aking AJAX bagay ay ang parehong. Gusto ko upang i-load ang data ng stock nang hindi na kinakailangang pumunta sa isa pang pahina. Ngunit ngayon Gusto kong gamitin ito plugin. Ang Bootstrap dokumentasyon ay may mahusay na halimbawa ng kung paano eksakto ang maaari kong gawin na. Gusto kong sabihin, "Narito ang input na gusto ko sa autocomplete sa," at ako pagpunta upang tawagan ang function na ito na tinatawag na typeahead, at na upang pangasiwaan ang lahat ng ang Typeahead bagay-bagay para sa amin. Ito ay initialize sa listahan, ito ay gawin ang lahat ng aming-filter. Ang tanging bagay na kailangang malaman kung ano ang data na kami ay autocompleting sa. Kaya nakita ko ang key na ito sa pamamagitan lamang ng pagbabasa sa dokumentasyon at pagtingin sa mga halimbawa. Kung ako bigyan ito ng isang key ng source, ang halaga ng key na ito ilan lang na hanay ng mga bagay na gusto ko sa autocomplete sa. Ang variable na ito ay nagmula mula sa iba pang mga file. Buksan ko symbols.js. 

Ito mga symbols.js lang ito talaga, talagang malaking array na naglalaman ng string ng lahat ng mga simbolo ng stock mula sa NASDAQ. Kung gusto ko upang lumipat pabalik sa ang HTML, kaya jharvard, vhosts, globalhost, html, mga template, quote_form. Dahil na tinatawag na ngayong quote3.js, hayaan mo akong baguhin ang JavaScript file ako kabilang dito. Ngayon ay mayroon akong mga quote3.js, kaya ako pagpunta upang i-load sa na hiwalay na file ng JavaScript, ang isa na may na Bootstrap autocomplete. Ngayon kapag tumalon ako pabalik sa browser, i-reload ang pahina, at simulan ang pag-type ko aa, may aking autocomplete. At ito ay talagang bilang simpleng bilang na. Nagkaroon ako ng 1 linya ng code na lang sinabi, "Narito ang mga bagay na gusto kong sa autocomplete sa," at biglang mayroon akong ito talaga, talagang maganda ang pag-andar na may hindi isang buong maraming pagsisikap sa lahat. Habang ikaw ay pagbuo ng mga website at lalo na front bahagi ng pagtatapos ng bagay, ka pagpunta upang mahanap ito ang kaso ng maraming. May ng maraming, maraming, maraming ng mga talagang cool na libreng aklatan out doon na gawin itong napakadaling upang gawin ang mga bagay tulad nito. Maaari sinuman na sa tingin ng anumang mga drawbacks ng simpleng autocompleting ito malaking listahan ng mga simbolo? Ano ang maaaring maging isang bagay na hindi ang pinakamahusay na gamit ang diskarteng ito? Oo. >> [Mag-aaral] Time, kung mayroon kang maraming ng [hindi marinig] Oo. Sa ngayon nagda-download ka namin ito malaking file ng JavaScript at may maraming ng mga simbolo. At kaya kung kami ay may isang tonelada ng mga bagay-bagay, ito ay ma-uri ng taasan ang latency ng hindi lamang paghahanap ngunit din-download ang aktwal na file. Mahusay. Anumang bagay? Sa ngayon walang tunay na kahulugan ng kaugnayan. Kung type ko sa isang A, ang mga kumpanya na ipakita dito ay maaaring hindi ang pinaka-popular na mga kumpanya na nagsisimula sa A. 

Bago nakukuha ko sa Apple, maaaring tumagal ng ilang higit pang mga character upang makita kung ano ang Naghahanap ako. Ito autocomplete ay hindi ang pakiramdam na ito ng kaugnayan. Lamang ito ng pagpunta sa sabihin, "Anumang bagay na tumutugma sa ako pagpunta upang ipakita." Sa halip na, Gusto ko sa paanuman isama ang ilang kaugnayan sa aking mga paghahanap. Kung pumunta ako sa paglipas dito upang Yahoo! Finance, finance.yahoo.com, Kung sinusubukan kong ipasok ang isang simbolo sa pahina ng Yahoo! Finance at sisimulan ko ang pag-type ng GOOG, mayroon akong ito magaling listahan ng mga bagay. Malinaw, mukhang Yahoo! Finance paggawa ng isang bagay mas matalino dito. Ang mga ito ay may ilang mga kaugnayan at sila ay mayroon ding karagdagang impormasyon tulad ng pangalan ng stock. Na ang isang bagay na hindi talaga ko maaaring may lamang ang aking stock listahan ng mga simbolo. Gusto ko ito at kaya ako pagpunta sa dalhin ito. Upang gawin na natin gawin ang ilang mga bagay. Sabihin unang buksan ang inspector sa pahinang ito dahil nakita namin na ang pahinang ito ay hindi i-reload sa lahat, kaya marahil ito gamit ang AJAX sa paanuman na naglo-load ng mga data nito. Maaari naming malaman kung ano ang data na ito sa paglo-load. Kung ako i-click ang sa Network tab na ito, ang mga ito na ang lahat ng mga kahilingan na simulan na fired. Ngayon kung type ko sa goo, maaari naming makita na Nakakuha ako ng bagong kahilingan ng HTTP. Marahil ito ay kung saan ang data na nagmumula. Bang sapat, kung tiningnan ko sa URL na ito, na kung saan ay isang bit na kakaiba na may pangalang, maaari naming makita na ito ay eksaktong kung saan ang Yahoo ay pagpapadala ng off nito ang data mula sa. 

Lumikha ako ng isang hiwalay na file na tinatawag na suggest.php na katulad na katulad sa espiritu sa lookup function na. Talaga Ito ay pagpunta sa gumawa ng isang query sa Yahoo URL, bumalik ilang mga data, at ipadala ito pabalik sa akin. Ngayon, sa halip na gamitin ito malaking, malaking listahan ng mga simbolo, Maaari ko bang gamitin ang Yahoo maganda ang mga bagay ng kaugnayan, at hindi ko upang i-download na napakalaking file ng JavaScript. Lamang ako pagpunta sa pull down ang aktwal na may-katuturang mga simbolo ng stock. Natin tumalon sa na. Kaya html, js. Humihingi kami ngayon sa quote4. Ngayon kami ay hindi na ginagamit na malaking listahan ng mga file sa JavaScript. Ngunit may isang maliit na uri ng mga problema sa disenyo dito. Namin ang sinabi na ang A sa AJAX ay asynchronous. Ano na ay nangangahulugan na kapag gumawa ako ng isang AJAX kahilingan, kaya dito mismo sa linya 8, ito ay kung saan ang aking AJAX kahilingan aktwal fired. Sabihin nating ngayon Mayroon akong ilang code dito na pagpunta sa gawin ang ilang mga bagay-bagay i alertuhan ang user o pagbabago ng isang bagay sa pahina. Ano ang hindi mangyari browser ay hindi na maghintay para sa kahilingang ito upang magpatuloy bago darating down at pagpindot sa linyang ito. Iyon ang asynchronous na bahagi. Ito ay ang hiling na ito at sabihin, "Tuwing mong tapusin, "Bumalik at tumawag na function na na sinabi ko sa mong tawagan sa loob ng tagumpay." Nangangahulugan iyon na hindi lamang namin ay maaaring i-download ang lahat ng mga stock muna. Kailangan namin upang gawin ang kahilingan at maghintay para sa isang bagay na bumalik. Nangangahulugan iyon na bago, maaari lamang namin sabihin Bootstrap, "Narito ang listahan ng mga bagay na gusto kong ka sa autocomplete sa." Maaari naming hindi na gawin na ito dahil hindi namin alam kung ano ang gusto namin sa aktwal na autocomplete sa. Sa kabutihang-palad, ang Bootstrap naisip ito dahil sa mga na smart guys banda roon, at sila aktwal na nagbigay sa amin ang isa pang paraan upang i-load ito Typeahead plugin. Bago, ang halaga ng ari-arian pinagmulan na ito ay lamang ang malaking hanay ng mga bagay sa autocomplete sa. 

Ngayon ang pinagmulan ari-arian ay talagang isang function, at ang layunin ng function na ito ay upang malaman kung ano ang mga bagay sa autocomplete sa. Ang paraan na ito upang malaman na out ito ay pagpunta sa hilingin sa Yahoo! Finance kung ano ang pinakamahusay na bagay sa autocomplete ay. Upang gawin na ako pagpunta sa gumawa ng isang katulad na kahilingan AJAX. Ako humiling ng pahinang ito sa suggest.php. Gusto kong magpadala kahabaan ng simbolo pa rin. At ngayon ang aking tagumpay, ang Bootstrap dokumentasyon Sinabi sa akin na upang populate na listahan ng mga bagay, lahat ng kailangan kong gawin ay ipasa ang array na ito ngayon sa function na callback. Ngunit maghintay ng isang minuto. Kung ito ay dapat na isang array at AJAX ay pagpapadala ng ako pabalik teksto, kung paano ay na posible? Ito introduces isang bagong paraan ng pakikipagpalitan ng mga data na tinatawag JSON. Sa kasong ito, hindi namin lamang pagpapadala ng isang simpleng string ng teksto. Ngayon kami ay pagharap sa mga ito mas kumplikadong listahan ng mga simbolo ng stock. Mga stock symbol ay maaari ring isama ang mga bagay tulad ng pangalan ng kumpanya o ang kasalukuyang presyo. Gamit lamang ang isang malaking mahabang string na hindi format sa anumang predictable paraan ay hindi ang pinakamahusay na paraan upang makuha ang mga data mula sa server ng Yahoo sa akin sa isang paraan na madali kong maunawaan. JSON ay isang teknolohiya na tumatagal ng bentahe ng kung paano lumikha kami ng mga nag-uugnay array sa JavaScript. Ito hitsura ng maraming tulad ng JavaScript nag-uugnay array, at sa katunayan, ito ay dahil ito ay. JSON ay nakatayo para sa JavaScript Bagay pagtatanda. Ito ay isa lamang napagkasunduang format para sa paglilipat ng data papunta at pabalik. Narito ito JSON object o ito JSON nag-uugnay array ay pagpapadala sa akin ang ilang data tungkol sa isang kurso. 

Ang mga key ng array na ito ang mga bagay tulad ng kurso na may isang halaga ng cs50, at pababa dito maaari naming makita na maaari ba akong magkaroon ng isang halaga na ay isang array. Hindi ko upang gumawa ng mga bagay tulad parse out sa mga string at hanapin para sa mga kuwit at gawin ang mga nakatutuwang mga bagay tulad na. Dahil ito ay ipinahayag sa JSON format na ito, JavaScript at jQuery na mayroon ng mga function na i-convert ng isang string na kamukha ito JSON sa isang aktwal na JavaScript nag-uugnay array na maaari naming gawin. Paggawa na ay kasing simple ng nagsasabi na hindi na ang file na ito, suggest.php, pagpapadala ng ako pabalik lamang ng isang string ng teksto, ngunit alam ko ito ay pagpunta sa nagpapadala ako pabalik JSON. Na nangangahulugan na na JSON ay maaaring ma-convert sa isang JavaScript nag-uugnay array. At kaya jQuery, Gusto ko mo bang gawin iyon para sa akin. Nangangahulugan iyon na ang parameter ng tugon na ito dito, ito ay hindi na lamang ang string. Dahil kami Sinabi jQuery na dito ay ilang JSON, jQuery na smart sapat na upang sabihin, "gusto mong JSON?" "Pupunta ako sa na-convert sa isang nag-uugnay array para sa iyo." Natin ang aktwal na kumuha ng hitsura sa tab na Mga Network sa sandaling mayroon kaming quote4.js. Babaguhin namin ito at i-reload ang pahina. Ngayon ako i-type muli sa isang. Ginawa ko ang isang kahilingan ng ilang sa suggest.php, ngunit ngayon tugon na ito, sa halip na ang string lamang, JSON. Kaya Mayroon akong isang bukas na kulot suhay na nagsasabi, "Ito ay isang nag-uugnay array." 

Ang unang at lamang na key ng nag-uugnay array na ito ay tinatawag na simbolo, at pagkatapos dito ay isang hanay ng lahat ng may-katuturang simbolo darating ngayon mula sa Yahoo! Finance, hindi mula sa listahan na parang higante. Iyon ay kung paano ko lang populate na ito autocomplete plugin may ilang mga data na hindi pagdating mula sa isang lokal na file na na paunang natukoy na ngunit mula sa iba pa. Ito lumiliko out na maaari naming aktwal na samantalahin ng isang teknolohiya na tinatawag na JSONP, o JSON sa padding, na maalis ang suggest.php mamamakyaw. Ngunit sa halip ng paggawa na, sabihin sa halip tumagal ng isang pagtingin sa kung paano ko mapapabuti ito ng mas maraming. Gusto ko talagang Typeahead Bootstrap. Talagang magaling. Ngunit kami ay nakakakuha ng mahusay na sa JavaScript at gusto naming uri ng gawin ito ating sarili, maaaring tumagal ng isang pagtingin sa kung ano ang plugin na ito ay maaaring paggawa. Hayaan ang mga ay hindi na gamitin na Typeahead bagay, at sabihin subukan upang gawin ang listahan ng mga iminungkahing mga stock ating sarili. Narito sa quote6.php namin ay pagpunta sa magsimula sa parehong paraan. Sa tuwing may isang bagay na uri, nais naming gumawa ng AJAX kahilingan. Ito ay katulad sa aming orihinal na CS50 Finance Instant na. Kaysa sa paggawa ng isang kahilingan sa quote.php, ginagawa namin ngayon ng isang kahilingan na parehong file tulad ng dati, ang suggest.php na ito, na lamang upang makuha ang mga data mula sa Yahoo! Finance. 

Muli, pa rin namin ang umaasa JSON, ngunit ngayon dahil Typeahead ay hindi ginagawa ito para sa amin, kailangan din namin na magpadala ng kahabaan ng halaga na sa loob ng kasalukuyang text box. Ngayon alam namin kung ano ang itatanong Yahoo! Finance para sa, at kaya ngayon narito ang pag-andar na gusto naming upang maisagawa sa sandaling makumpleto ang kahilingan. Hindi namin ang plugin upang gawin ang listahan para sa amin, kaya narito kung saan aktwal na kami ay pagpunta sa bumuo ng isang listahan ng mga mungkahi. Upang gawin iyon, mas gusto sa PHP concatenated namin mga malaking string ng HTML pagkatapos ay naka-print na namin ang mga ito, maaari naming gawin ang parehong eksaktong bagay sa JavaScript. Una kami ay pagpunta sa magsimula ang string na ito na tinatawag na mga mungkahi, at ang string na ito ay lamang maglaman ng ilang mga HTML. Gusto namin ang mga ito sa isang listahan ng mga bagay, kaya kami ay pagpunta upang magsimula sa tag listahan na ito, at ngayon kami ay pagpunta upang umulit sa lahat ng mga simbolo na ibinalik pabalik sa amin. Tandaan, dahil kami sinabi datatype: 'json', ito ay hindi isang string. Ito ay isang array para sa amin. Na talagang cool na. Maaari lang namin sabihin, "gusto ko sa iyo upang isama ang isang listahan ng elemento." Susubukan naming ilagay ang mga ito sa loob ng isang elemento ng bahagi ng na, bibigyan namin ito sa isang klase ng mga mungkahi upang malaman namin kung ano ito ay, at ngayon dito ay ang simbolo na nakuha namin mula sa Yahoo! Finance. 

Kapag lumikha kami ng isang elemento para sa bawat isa ng mga simbolo na nakuha namin pabalik, gusto lang namin upang isara off ang listahan. Kaya ngayon mga mungkahi kumakatawan ito maliit na HTML fragment na kapag ilagay sa isang pahina ay ang listahan ng mga bagay na kaming naghahanap ng mga. Ngayon ipaalam sa aktwal na ilagay sa pahina. Upang gawin na aktwal ko na ng isa pang walang laman div at Ibinigay ko ito ng isang ID ng mga mungkahi. Karamihan tulad namin itakda ang mga nilalaman ng div na ipakita ang presyo ng data ng stock, namin ngayon lamang nais na itakda ang mga nilalaman ng div na ito sa anumang string na ito ay na naglalaman ng mga simbolong ito. Sa pamamagitan ng paggamit ng ang HTML pamamaraan, ang mga mungkahi ng variable, ang string na ito, ay isang string ng HTML. Gusto kong mong gawin na HTML at ilagay ito sa loob ng div na tinatawag na mga mungkahi. Namin ang ikinakabit ang isang bagay na ngayon sa DOM. Nagdagdag kami ng ilang bagong elemento sa DOM na namin ngayon ipakita sa pahina. Natin makita kung ano ito mukhang. Kung-load namin sa sa quote6 at ngayon kami ay bumalik, ngayon kapag nagsimula ako mag-type aapl, hindi na namin na Bootstrap autocomplete, ngunit ngayon namin ay ang listahang ito na ginawa namin sa aming sarili. Ito ay isang maliit na bit hindi maganda kaysa sa Typeahead Bootstrap, halimbawa, ngunit-daan sa amin upang gawin ang isa sa iba pang mga bagay. Kapag tayo ay naghahanap sa Bootstrap na plugin, Nakita namin na kapag namin autocompleted, isa sa mga autocomplete halaga ay aapl. Na hindi maaaring kapaki-pakinabang. Bilang isang gumagamit, hindi agad ako maaaring makilala ang lahat ng mga stock symbol. Ano ako marahil mas malamang na makilala ang aktwal na pangalan ng kumpanya. Kaya hindi ito ay talagang kapaki-pakinabang na kung sa halip na sinasabi aapl ito sinabi ng isang bagay tulad ng Apple Inc. Dahil kami pinagsama ito ating sarili, maaari naming talagang madaling gawin na. Natin buksan ang aming huling quote file dito, kaya quote7. 

Parehong bagay. Lang ako ng isa pang PHP file na bumalik sa amin higit pa sa simbolo. Mayroon din bigyan kami ng pangalan ng kumpanya. At kaya ginagawa namin ang parehong bagay. Kami ay ang paggawa ng isang AJAX kahilingan. Kapag ang kahilingan ay nakumpleto, kami ay pagpunta upang maisagawa ang function na ito dito, at ang function na ito ay upang bumuo ng isang malaking string ng mga elemento. Ngunit ang pagkakaiba dito ay na ang halaga ng mga listahan ay hindi na lamang ang simbolo, ito ngayon ang pangalan. Kaya kami ay may isang maliit na problema. Kapag ginagamit namin ang aming lookup, kailangan namin upang pumasa ito sa paanuman simbolo. Hindi namin maaaring ipasa ng paghahanap ng isang bagay tulad ng Microsoft Corporation. Kailangan namin upang pumasa ito MSFT. Kapag kami ay sumusulat HTML, mayroon kaming maraming ng magaling built-in na mga katangian. Isang ay maaaring nauugnay sa isang href o isang klase. Ngunit ano ang namin talagang kailangan ngayon ay para sa bawat isa sa mga link na ito isang simbolo ng stock na nauugnay dito. Walang built-in na HTML attribute para sa simbolo ng stock, ngunit sa kabutihang-palad, HTML5 ay nagbibigay-daan sa amin upang lumikha ng aming sariling mga katangian sa anumang nais naming. Sa pamamagitan ng sinasabi ng data simbolo, ko na ipinakilala ng isang bagong attribute na ang pangalan ko lang ginawa up, at ito ay okay dahil prefaced ko ito gamit ang data na ito. Kami ay pagpunta upang mag-imbak sa loob ng doon ang simbolo mula sa stock ngayon. Ano nangangahulugan iyon na kahit na namin ang pagpapakita ng halaga ng pangalan ng kumpanya sa loob ng aming mga autocomplete, alala pa namin ang simbolo na nauugnay sa bawat kumpanya. Ang paraan na ginagawa namin na sa loob ng ito elemento mismo. Sa gayon ay nangangahulugan na kailangan namin upang magsagawa ng isa pang pagbabago. Kapag namin i-click ito ngayon, kailangan namin upang aktwal na kalamangan ng katangian ng simbolo sa halip na halaga nito. Kung tayo back up, namin maglakip ng isang kaganapan handler sa mga mungkahi. Tuwing isa sa mga mungkahing ito ay nag-click sa ngayon, gusto kong gawin ang isang bagay. Kung ano ang nais kong gawin ay baguhin ang halaga ng input box na iyon. Ngayon gusto ko upang i-set ang parehong function na Val. 

Kaya nang walang anumang argumento ito Val function na nagbabalik sa iyo kung ano ang na sa kahon ng teksto, ngunit kung ikaw ay bigyan ito ng isang string, na string at ilagay ang mga ito sa kahon ng teksto. Ako pagpili sa text box nito sa parehong paraan. Pangalan ng simbolo loob ng form na-quote. Ngayon ako pagpapadala nito ang halaga ng attribute data simbolo. Ito bagay dito ay bago, ito $ (). Ano ang tumutukoy sa elemento na click. Maaari naming makita dito na hindi namin naka-attach ang isang pag-click ng kaganapan sa bawat elemento na may isang klase ng mungkahi indibidwal. Sa halip, kami ay papalapit na ito ng kaunti naiiba. Sa halip namin sinasabi na kailanman ang anumang bagay sa loob ng div mga mungkahi na ito, kung saan Tandaan lamang ang lalagyan para sa listahan, kung ang isang bagay sa loob ng div na ito ay nag-click at ito ay isang klase ng mungkahi, Gusto ko ang kaganapan na ito sa sunog. Talaga kung ano ang ibig sabihin nito ay maaari naming gawin ay maaari naming muling gamitin ang parehong handler ng kaganapan para sa lahat ng mga bagay sa listahan. Kaya hindi namin isang kaganapan handler para sa unang elemento at ng ibang handler ng kaganapan para sa pangalawang elemento. Maaari namin sa halip sabihin, "gusto ko ang parehong handler ng kaganapan upang ilapat sa lahat ng bagay sa aking listahan." Ngunit kailangan namin sa sa paanuman na malaman kung aling mga elemento ay nag-click. Ito "ito" keyword ay kumakatawan lamang na. Ito ay ang mga bagay na na-click ng user. Kung ko lang click ang 3rd link, ito ay kumakatawan sa elemento ng link na 3rd, na nangangahulugan na ako makakakuha nito attribute, data simbolo, kung saan alam namin ay naglalaman ng simbolo na nauugnay sa mga kumpanya na click ko lang. Kung tumalon namin pabalik sa aming pahina ng pananalapi, maaari naming makita na ngayon na sa sandaling sisimulan ko ang pag-type ng isang bagay tulad ng msft, kami ay hindi na pagkuha lamang ang mga simbolo ng stock, ngayon kami ay pagkuha ng aktwal na mga kumpanya. Ngunit kapag ako mag-click sa isa sa mga kumpanyang ito, maaari naming makita na aktwal na namin populating nang text box ay hindi kasama ang pangalan ng kumpanya ngunit may anumang ay naka-imbak sa loob ng mga mga katangian ng data. At kaya kung ako aktwal na siyasatin ang isa sa mga sangkap na ito sa pamamagitan ng pag-right click ito at ng pag-click sa Siyasatin Element, maaari naming aktwal makita kung ano ito mukhang. 

Tandaan na ito ay isang bagay na nilikha namin sa loob na para sa loop kapag kami ay pagbuo na string ng HTML. Maaari naming makita dito na ang data na ito simbolo ay ang halaga ng MSFT, kung saan ay mahusay. Iyon ay kung ano ang aming inaasahan. Na simbolo at na kung paano namin nakuha ang halaga na kailangan namin upang gamitin ang sa loob ng text box na ito. Sapat na para sa form na quote dahil na uri ng pagbubutas. Sabihin lang gumawa ng ilang mabilis na mga pagpapahusay sa aming pahina ng portfolio. Kung ginamit mo ang CS50 Finance para sa isang habang at simulan mo ang pagbili at pagbenta ng maraming ng mga stock, kalaunan ang talahanayan na ito ay upang makakuha ng medyo malaki, at ikaw ay pagpunta sa gusto ng stock ticker, siyempre. Kapag ang talahanayan ay talagang, talagang malaking, maaaring maging kapaki-pakinabang para sa mga gumagamit upang subukan upang maghanap sa. Inside ng search box na kung sisimulan ko ang pag-type ng isang bagay tulad ng Disney at naghahanap para sa aking Mickey Mouse stock, maaari naming makita na talahanayan ang na ngayon ang batay sa kung ano-type ko lang. Ang pagpapaandar na ito ay mukhang sobrang kumplikado, ngunit ito ay talagang, talagang madali may jQuery at JavaScript. Ito portfolio.php file kabilang ang JavaScript file na tinatawag na portfolio.js. Natin kumuha ng isang pagtingin sa na. Kaya html, js, portfolio. Narito ang kung saan ginagawa namin na naghahanap sa mesa. Ang unang bagay na kailangan kong gawin ay maglakip ng isang kaganapan handler na text box dahil alam namin na gusto namin ang aming filter ng function na sa sunog tuwing ang user pagpindot sa isang bagay dahil hindi namin magkaroon ng panahon para sa mga pindutan ng Paghahanap. Ang unang bagay na kailangan naming gawin ay malaman kung ano ang user ay naghahanap para sa, tulad ng ginawa namin bago. Ang keyword na ito ay tumutukoy sa kasalukuyang elemento ang user ay nakikipag-ugnayan sa. 

Dahil ang gumagamit ay nakikipag-ugnayan sa box para sa paghahanap, $ Kumakatawan sa search box na ito, kaya nagbibigay ng this.val sa amin kung ano ang sa loob ng search box na gumagamit ay kasalukuyang pag-type. Kaya, ngayon kung ano ang gusto naming gawin ay gusto naming upang umulit sa lahat ng mga hilera sa loob ng aming mga talahanayan. Upang piliin ang lahat ng mga hilera sa aming mga talahanayan, ibinigay ko na talahanayan isang ID ng portfolio ng talahanayan, at ang bawat hanay ay kinakatawan sa pamamagitan ng isang elemento ng tr, kaya't ang tagapili na ito ay bumalik sa akin isang malaking array ng lahat ng mga hilera sa aking mga talahanayan. Ngayon gusto ko upang umulit na array. Maaari ko sa iyo ng loop, ngunit jQuery sa aktwal na nagbibigay sa amin ang magaling na function na tinatawag na "bawat." Ano ang bawat ginagawa bawat tumatagal ng isang argument, at ang argument na ay isang function. Ano ito gawin ito mag-aplay na function na sa bawat elemento sa loob ng listahang ito. Ang function na ito ay magtatagal ng isang argument na e, at kapag ang function na ito ay pinaandar, e ito ay pagpunta sa pinalitan ng ang unang hilera, pagkatapos ang pangalawang hilera, at pagkatapos ay sa ikatlong hilera. Sa pamamagitan ng ang paraan na ito, ito ay ang parehong bagay bilang ng pagpapatakbo ng isang para sa loop at pagkatapos ay pag-uunawa sa kasalukuyang elemento na batay sa index sa loob ng iyong para sa loop. Sa bawat pag-ulit, para sa bawat isa sa mga elemento na ito sa table, Gusto kong suriin kung ang teksto ng elemento - ang teksto ng cell sa loob ng hilera - tumutugma sa kung ano ako naghahanap. Ito malaki mahabang string ng mga utos ay kung paano maaari kong gawin na. Una, muli, ito ngayon ay tumutukoy sa - dahil ito sa loob ng isang bagong function na - ngayon ito ay ang kasalukuyang hilera sa talahanayan. Gusto kong gawin ang kasalukuyang hilera sa talahanayan, at gusto ko upang makuha ang lahat ng kanyang mga anak. Tandaan, ang DOM ay isang hierarchical puno, na nangangahulugan na may isang bilang ng mga bata ang mga elemento. 

Ito function na bata ay bumalik sa akin likod ng isang hanay ng lahat ng mga elemento na ang mga anak ng, sa kasong ito, isang hilera sa talahanayan. Ito lamang ang lamang ang mga cell sa loob ng hilera. Gusto ko lang upang maghanap sa ang unang cell. Ito. Unang function na sinasabi ninyo sa akin ang unang elemento sa array na. Pagkatapos teksto ng function na nagsasabing makakuha sa akin kung ano mismo ang loob ng cell na dahil gusto ko upang maghanap sa na teksto. Sa wakas, sabihin-convert ito sa lowercase, upang maaari naming gawin ang mga text case insensitive mga query. Panghuli, nais namin upang makita kung na string sa loob ng isang talahanayan na naglalaman ng string na kami ay naghahanap para sa. Ginagawa lang na Ang indexOf function sa JavaScript. Sinasabi sa atin man o hindi ang string na ito ay naglalaman ng isa pang string. Kung ito ay totoo na cell ay naglalaman ng kung ano ako naghahanap para sa, Gusto kong upang matiyak na ipinapakita. Ang ipakita ang paraan ng sabihing, "Ipakita ang elemento." Kung hindi ito ang kaso, pagkatapos ay nangangahulugan na ang anumang ako naghahanap para sa ay hindi na nilalaman sa loob ng hilera, at sa gayon gusto ko upang itago mula sa user. Na Nakakamit na magaling filter ng epekto kung saan hindi na nakikita namin ang buong table. Kung ikaw ay interesado sa kung paano ito ticker pati na rin, post kami ng online ang pinagmulan. Ngunit talagang simple. JQuery ay may kahanga-hangang mga pamamaraan para sa mga animation at pagmamanipula ng CSS mga katangian. Kaya, na ito para sa akin. 

Ano pagkatapos ay namamalagi magpatuloy? Tulad ng makikita mo sa loob ng ilang araw, ang panghuling proyekto panukala ay dahil. Ang huling panukala proyekto ay hihilingin sa iyo ng ilang mga katanungan, ngunit kasama ng mga ito ay tatlong milestones - isa ng "maganda" milestone, isa ng mas mahusay na milestone, at isa isang pinakamahusay na. Ang ideya sa pagiging talagang upang matulungan kang guys itakda ang iyong mga inaasahan kaya na Nagnais ng pinakamababang ikaw ay masaya sa output ng iyong huling proyekto at ito ay "maganda" sa ngayon habang ikaw ay nag-aalala. Ngunit sa interes ng pagkuha mong maabot lamang ng kaunti sa isang bagay mas mahusay na o isang bagay na pinakamahusay na, makikita rin naming ayusin itulak mo papunta sa na pati na rin. Ang CS50 Hack-a-Thon, samantala, ay sa loob ng ilang linggo. Karaniwan, gawin namin ito sa isang batayan ng batayan ng lottery dahil sa interes, ngunit logro ay isasaalang-alang namin ng ilang daang sa amin sa shuttle bus mula sa Harvard Square pababa sa Kendall Square kung saan ang Microsoft ay may magandang pasilidad aptly tinatawag na "nerd" - ang New England Research at Development Center. Namin doon sa paligid ng 8 pm Magkakaroon kami ng ilang pagkain. Sa paligid ng 1 a.m. kami ng ilang higit pang mga pagkain. Ng 5 am kung hindi ka pa rin gising magpapadala kami magtungo sa IHOP o dadalhin ka pabalik sa campus. Ang layunin ay upang sumisid sa panghuling proyekto sa tabi ng mga kaklase at kawani. Pagkatapos ng ilang araw mamaya ang CS50 Fair, na talaga nilalayong maging isang pagkakataon para sa iyo guys upang ipakita ang iyong trabaho at kabutihan para sa semestre habang hudhod balikat sa bawat isa at pagkuha ng ideya ng kung ano ang lahat ginawa. Gamit na sinabi, maraming salamat sa Tommy at Joseph, at kami ay nakikita mo sa Lunes.  [Palakpakan]