[Powered by Google Translate] [Semajno 9, daŭrigis] [Davido J. Malan - Universitato Harvard] [Jen CS50. - CS50.TV] 

Ĉi tiu estas CS50. Ĉi tio estas la fino de semajno 9. Dankon tre multe. Fine. Semajno 9. Mi havas ĝin. Hodiaŭ ni daŭrigos nian konversacion pri ttt programado kun okulo al la fina projekto, ne ĉar vi devas fari ion ttt-bazita por fina projektoj sed ĉar jam estas por fina projektoj aŭ post CS50 ĉi tiu estas certe la direkto en kiu moderna programaro tuj. Kaj tamen ĝi ne estas vere facila afero. Fakte, unu el la plej malfacilaj aĵoj fari estas la aspekto de dezajno. 

Ekzemple, per dezajno ni mean reale atingi la uzulinterfaco aŭ la uzanto sperto pravas. Mi daresay - kaj ni scias el freŝa problemo aro kiam kelkaj el vi elsendis vian gripes pri iu peco de programaro aŭ aparataro kiu enfurece vi, ĉu en la campus aŭ ekstere - ekzistas multaj lokoj tie, tie estas multa aparataro tie, tian sucks. Sed la realo estas ke farante tion, kio estas facila por uzi ankoraŭ estas tamen potenca Estas tre malfacila defio. Do hodiaŭ mi demandis Jozef kaj Tommy kunigi min tie tiel ke ni povas havi konversacion, ambaŭ pri dezajno kaj kion specoj de penso procezoj devas komenci tuj tra via kapo kiam vi desegni vian fino projektoj, via estonta klopodoj. Kaj tiam kun Tommy helpo ni rigardu kelkajn el la efektivigo detaloj. Kiel vi povas havi iu vidado sur papero aŭ en via menso ke vi povas tiam ekzekuti programmatically uzante iu de la teknologioj kaj teknikoj ni ĵus komencis paroli pri, nome JavaScript kaj iu eĉ pli novaj, nome AJAX, asíncronas JavaScript. Tio ebligas al vi krei des pli dinamika de interfaco per ricevado pli kaj pli datumoj progresive de servilo. Do ni vidos iujn el tiuj fragmentojn tiel hodiaŭ. Kiel flanken, se vi interesiĝas koncentrante en komputiko aŭ minoring en komputiko, scias ke ĉi vendredo tagmeze en Maxwell Dworkin 221 estos pico okazaĵo kie vi povas lerni iom pli pri komputiko. Sur via elirejo la pordo hodiaŭ vi povos repreni neoficiala gvidas CS ĉe Harvard. Ni metos gxin sur la rubo tedaĵoj ekstere ĉe talio alteco tiel ke se vi ŝatus kapti tion kaj lerni iom pli pri CS, ke estos tie por vi kiel estis en semajno 0. Ankaŭ se vi volas aliĝi nin pro CS50 tagmanĝo ĉi vendredo je 1:15 ptm, direkti al cs50.net/lunch. Sen pli enkonduko, mi donos al vi instruon ulo Jozef Ong. Saluton. [Aplaŭdo] Dankon. La unua fojo mi sciiĝis pri dezajno estis en klaso tie nomis CS179. 

La profesoro en la momento diris al ni la historion pri alia instruisto kiu iris al hotelo kaj uzis la kranoj. Ĉu iu povas diri al mi kion la 2 kapetoj maldekstre kaj dekstre fari? [Studento] Varma kaj malvarma. >> Varma kaj malvarma. Bona. Kion vi kutime atendas, ĉu ne? Tiu instruisto post uzi la krano volas preni duŝon, kaj li procedas por uzi ĉi. Li pensas la maldekstra kaj la dekstra flanko estas por varma kaj malvarma, ĉu ne? Sed vi povas paroli al mi, kio tio efektive fari? Ajna manoj? [Inaudible studento respondon] >> Unu sugesto estas? [Inaudible studento respondon] >> temperaturo? Do unu el ili kontrolas temperaturo kaj la aliaj kontroloj? >> [Studento] Akvo premo. Akvo premo. Bona. Ĉi profesoro tiam venos en tio kaj, pensante ke ili kontrolis varma kaj malvarma, Igas la dekstra, kiu li pensas estas por varmega, la tuta vojo supren ĉar li volas preni varma duŝo. Nu, tiuj ne vere kongruas supren, do li ricevas ĉi ne tre amuza sperto esti en malvarma duŝo, kaj ni ĉiuj scias kion tio sentas. Ĉi tio estas ekzemplo de dezajno difekto. Kion mi celas per tio estas lia atendo de la krano ne kongruas kio eliris el la duŝo, kiu estas speco de malfeliĉa por li. Do tiu estas ekzemplo de dezajno difekto kiu okazas en la reala vivo. Sed ni vidas ĉiaj aliaj aĵoj tiel. Ni probable ne ŝatantoj de la MBTA sistemo. Tio ĉi estas metro sistemon vere en Londono, kiu diras, "Ĉi tiu butono ne estas uzata." Kial eĉ tie? Kial ni eĉ zorgas? Kiam mi estis knabo, estante la teknologio savvy oni en la domo, ĉiufoje kiam la komputilo frakasus, mia panjo venus al mi, montrante al mi ĉi tiu ekrano kaj demandante min, kio okazis. 

Eĉ mi ne scias kion tio signifas. [Ridado] Kio? [Ridado] Kelkfoje ni sentas kiel programistoj simple trolling ni. Kiel uzantoj ni kiel, "Kio okazas? Iu diru al ni." Ĉio venas malsupren al temo de dezajno. Dezajno, kiel ni povas vidi, estas ne pure pri estetiko, ĝi ne estas pri kiel la aferoj rigardi. Ni vidas tie ĉi iom popo-super tie efektive aspektas bela agrabla. Ĝi havas guto ombro en la fono, ĝi havas limon radiuses okazas. Estas ia bela. Ĝi estas ne vere bone desegnita ĉar ĝi ne estas tre uzanto amikojn. Tio iom popo-up kiu venas supren ne vere donas min ajna informo pri kio okazas, ĝi ne diri al mi ion kiel la uzanto pri kiel reakiri de tiu eraro. Ni volas pensi tion ke dezajno ne. Unue, ne estetiko. Ĝi estas ankaŭ ne plenigaĵo vian programon kun tunoj de nenecesaj funkciojn. Se vi estas Tajlanda restoracio, vi probable ne volas esti dentisto samtempe. Kaj kun Facebook Demandoj, ne ke multaj homoj uzas ĝin kaj ne estis vere en la kerno de kion ili konstruas. Kaj tial ĝi estas bela pensi ne tiom la kvanto de la aĵoj ke vi metante vian kandidatiĝon sed la kvalito kaj kiel vi faras ke uzanto sperto bona per efektive plibonigi sur kion vi jam havas. 

En vortoj, dezajno diras al ni, kion ni devas konstrui. Ekzemple, se ni konstruas iun kiu ni serĉo aĵoj supren, kiel Google, ekzemple, ni faru tion en maniero kiu postulas la uzanto por preni multajn klakoj por atingi kion ili volas, aŭ ni faru ĝin en maniero, ekzemple, kun Google Instant aŭ autocomplete kiu lasas nin alveni al niaj rezultoj rapide? Teknikaj engaĝas, kiel Tommy montros al vi, efektive konstrui ĝin. Ekzistas multaj tipoj de desegno. Ekzemple, se vi konstruas ion por disfaldi ion en la Tria Mondo lando kie ne estas multa elektro aŭ kiu multe teknologio, vi devas desegni kion vi konstruas en maniero kiu facile donas aliron al la popolo tie. Sed kion specoj de aliaj decidoj de dezajno povus tie esti aŭ povus esti implikita en iu kiel tiu? Yeah. Mi vidas mano. [Inaudible studento respondon] >> Ĝuste. Ekzakte. Alireblo estas unu afero. Multaj homoj ne kredas pri, "Kio pri mia uzantoj?" kiel la ekstremoj de ĉu spektro. Mi havas uzantoj kiuj eble malkapabloj ke mi ne pensas kaj mi ĵus pensante pri desegni por la ĝenerala uzanto. La interreto estas alirebla de ĉiuj nuntempe, kaj mi devus desegni por tiuj homoj ankaŭ. Kio specoj de aliaj decidoj de dezajno povus vin fari? Jes. >> [Studento] Kosto. Kosti. Tre bona. Alia afero ni povus bazi niajn dezajno decidojn sur estas kosto. Se ni estas komercisto, vi volas konstrui iun kiu ne prenas multan koston por produkti sed povas vendi je aparte alta kosto aŭ povas akiri al ni profito. 

Ĉi tiuj estas ĉiuj malsamaj tipoj de dezajno, sed kiam ni konstrui ion sur la interreto aŭ kiam ni konstrui iun kiu probable ne kostas tiom da konstrui nun, kiel Interreto aplikoj - vi ne devas ĵeti multe ĉefurbo en ĝin por fari iun kiu vere funkcias - kion ni pli maltrankvila pri estas la sperto de la uzanto. Ni nomas ĉi tiu uzanto centrita dezajno. Esence kio uzanto centrita dezajno engaĝas metas vin en la ŝuojn de viaj uzantoj. Se iu signoj ĉe kion mi konstruas, ili jam evidente venis al mia aparta apliko kun golo en menso, kun tasko volas kompletigi. Kaj via laboro estas ne nur por helpi ilin plenumi tiun taskon sed por helpi ilin plenumi tiun taskon en maniero, kiu estas kompetenta, intuicia, kaj, kiel iu persono diris tie, atingebla. Kion efikeco signifas? Efikeco signifas kiel rapide do mia uzanto kompletigi la taskon donis mian interfaco. Ĉu ĝi prenas multajn klakoj por ili por ricevi de unu loko al la alia? Ĉu teda? Ĉu ili devas plenumi multajn repetitivos taskoj? Ni volas fari tiu procezo kiel efika kiel eble do ili ne devas fari tiujn varojn de aĵoj. Rilate intuitiveness, tio estas, ekzemple, se oni serĉas mian interfaco, Estas facila por ili por ricevi de loko al loko? Estas facila por ili elkompreni kiel ili devas klaki en mia interfaco en ordo por ilin atingi la celon aŭ tasko, ke ili volas atingi? 

Kaj fine, kiel unu homo diris tie, alirebleco estas tre grava. [Masklo parolanto] Ĝi venas al alirebleco por aĵoj kiel vizio, like how do I actually desegni ion por iu, kiu estas blinda? Oh. Por personoj, kiuj ne povas vidi, ni havas ion nomita ekrano legantoj. Kion vi devus fari estas vi devus konstrui retpagxon en maniero ke, ekzemple, apartan teknologioj kion ni nomas - Ekzistas multaj aĵoj nun. Mi kredas ke estas ekrano legantoj nomis JAWS. Multaj tion fidi kion ni nomas areo reguloj por legi al la uzanto, kio estas aktuala en la paĝo. Por tiuj personoj, kiuj ne povas vidi, vi devas certigi, ke tiuj legantoj de ekrano povas fakte repreni la enhavo de la paĝo kaj povas reale montras vian uzantoj, se vi ne povas vidi, almenaŭ vi povas ankoraŭ kompreni la enhavon de la paĝo. Yeah. Okay. Sufiĉe parolas pri bona dezajno. Ni parolas pri malbona dezajno. Ĉi tiuj estas aferoj kiujn vi ne faros. Ĉu iu povas diri al mi pri siaj spertoj kun Craigslist kaj kion ili pensas ne estas tiel granda pri ĉi dezajno? Jes. >> [Studento] Mi kredas ke estas tro multaj vortoj en unu regiono. Tro multaj vortoj, ĉu ne? Tute blindiga. Vi venis al ĉi tiu paĝo kaj vi salutis per tuta amaso de aferoj ĉi tien kiuj povus eĉ ne gravas al vi. Ekzemple, vi loĝas en unu ŝtato kiu ne komencas kun ĉi tiu letero. Imagu ke vi loĝas en Teksaso aŭ iu. 

Vi devas rulumi la tuta vojo malsupren la paĝon por atingi la lokon vi estas je. Mi estas el Bostono, do lasu min rigardi en Massachusetts. Kie estas Masaĉuseco? Ho, ĝi estas ĉi tie. Ho, estas Bostono. Okay. Ni rigardu Bostono. [Ridado] Bela blindigaj, ĉu ne? Mallerta aferojn tie. [Ridado] Diru Mi serĉas ie vivi. Kiom da homoj reale uzata Craigslist? Tunoj de vi. Estas sufiĉe malbone manieroj rigardi tion, sed ni rigardu tion ĉi. Kio estas la diferenco inter img kaj pic? Ĉu iu povas diri al mi? Tie efektive estas diferenco. Ili signifas precize la saman aferon, sed ili havas malsamajn etiketojn por ili ial. Se mi alklaku Has Bildo, nenio okazas en la paĝo. Mi vere devas klaki Serĉu denove por io okazos. Kio povus esti pli bona dezajno decido kiu povus fari tie? Se mi klakante sur tiu filtrilo, mi probable volas filtri per tiu aparta agado aŭ kiu aparta kategorio. Do anstataŭ havi por premi Serĉu denove, mi povus simple aŭtomate fari la filtrado speco de Google stilo kie fari tion tuj. [Malan] Sed ne formas kiel ni vidis ilin tiel multe devas esti fizike afiŝita per bati Entajpu almenaŭ aŭ klakante butonon? Kiel vi vidis ilin ĝis nun, vi vere devas klaki Submetu fari tion. 

Sed kiel Tommy montros al vi en dua, estas reale manieroj por vi tia, ke kiam vi alklakas tiun aĵon kiu povas aŭtomate sendi kion ni nomas AJAX peto kaj akiri datumoj dorso kaj filtri viajn rezultojn instantáneamente. Esas tunoj de aĵoj kiuj eraras kun tiu interfaco. [Malan] Ĉu vi povas serĉi Kembriĝo? Estas io iomete anómala tie, kie vi zorgas pri Kembriĝo kaj tamen vi ricevas Westford, printempo Hill, West Newton kaj similaj. Probable ne estas ideala. >> Probable ne ideala. Kiel povus mi povos fari la uzanto sperto bona en tiu aparta paĝo? Jes. >> [Studento] Instrukcioj. Okay. Instrukcioj en kia senco? [Studento] Ekzemple, aferon por unua fojo uzantoj kiuj eĉ ne scias kio Craigslist estas aŭ vi ne scias kion vi devis fari. Ĝuste. Do klarigante kion Craigslist estas sur ĉi tiu paĝo estas grava. Ni povas vere diri uzantoj kion ĉi paĝo estas vere por. Se mi nur vizitas tiun, mi vidas tutan faskon da lokoj. Mi ecx ne scias kion ili signifas. Sed pli grave, nur rigardante tiun interfacon, memoru, ke mi devis rulumi malsupren barelon da aĵoj por trovi apartan komunumon ke mi vere zorgis pri la ĉi. Kio estas pli rapida maniero mi povus fari? Jes. [Studento] Dividu ilin en oriento, okcidento regionoj. >> Bone. Mi povus dividi ilin en pli kategorioj kiu povus helpi min pli rapide difini kiel atingi tiun apartan lokon. [Studento] Metu fallisto. >> Ĝuste. Okay. Mi povus uzi falmenuo ĉar ni havas fiksan aro de aĵoj kaj ni povus montri ilin en falmenuo. Tiu vojo ne levu tiom da spaco en la ekrano. Sed eĉ pli bona ol tio, kion ni povas fari? Jes. >> [Inaudible studento respondon] >> Cxu vi povas rediri tion? >> [Studento] Serĉi skatolo. Yeah, serĉo skatolo. Tio estas granda. Kion ni povas efektive fari estas, se ni retrorigardas al la diapozitivoj, serĉo skatolo. Autocomplete. Tre facila maniero por sercxi tra rezultojn kiuj vi scias estas en aro. Se mi ektajpu BO, nur montri al mi ĉiujn rezultojn, kiuj havas BO interne de ili. Tiun vojon mi povas tre facile trovi la aparta Mi volas iri al anstataŭ devi rulumi tra tiu vere grandan liston. 

Ĉi tiuj estas ĉiaj vere malalta pendanta frukto ke iu kiu estas apliko Craigslist povas reale fari por fari la sperto en la retejo multe pli bone por lia aparta uzanto. Okay. Sufiĉe parolas pri malbonaj retejoj. Ni parolas pri Facebook. Kiam Facebook eliris, kaj aparte Facebook fotoj, estis multaj aliaj servoj en la momento kiu povus fari precize la samajn aferojn. Ili povus organizi viajn fotojn en albumoj. Kion vi povus fari estas vi povus organizi ilin en aroj kiel bone. Vi povus organizi ilin laŭ dato. Vi povus fari cxiujn tiujn apartajn aferojn. Sed ĉu iu scias kion faris Facebook fotoj eksplodas tiutempe estis eldonita? Jes. >> [Studento] Etikedoj. >> Etikedoj. Ekzakte. Ni havas Milo super tie, kiu estas nia hundo maskoto kun tiu CS50 bandana. Vi povas vidi, ke ni havas ĉi tagging trajto en la mezo. Kaj kion faris Facebook fotoj tiel interesa el usabilidad vidpunkto estas ke ĝi efektive permesis homoj tra tiu impliki siajn amikojn en liaj fotoj. Ĉe Facebook, ĉar ilia retejo estas aparte sociaj, temas pri konstruado ĉi speco de socia atmosfero. Kiu plibonigis la sperton de fotoj multe pli ĉar ili povis reale komenci dirante, "Tio estas rilatoj inter la homo, kaj jen estas fotoj pri homoj vi vere zorgas pri. " Parto de ĝi estas ankaŭ speco narcisismo. Homoj ŝatas esti tagged en fotoj kaj aĵoj tiel. Dum ke ne estas nepre bona homa trajto, samtempe ĝi estas bazita sur bona dezajno decidoj ĉar la homo vere zorgas pri aĵoj kiel ĉi tio. Do jen Facebook fotoj. 

Sed ni parolas Facebook pli ĝenerale. Mi certas ke multaj homoj ĉi tie havas opiniojn pri Facebook, ambaŭ bona dezajno decidoj kaj malbonaj decidoj de dezajno. Do ni elverŝado aŭ esti feliĉa. Venu. Mi scias vi ĉiuj uzu Facebook. Iu devas havi ion malbonan diri aŭ ion bonan por diri pri tio. Jes. [Studento] En la novaĵo-servo ekzistas multe da aferoj mi ne vere zorgas pri. La novaĵo-servo faras montri multon vi eble ne zorgas pri. Vi havas amikojn en Facebook kiu vi ne renkontis dum 2 aŭ 3 jaroj kaj vi vidos ilian novaĵoj rezultojn krevi supre en via novaĵo-servo kaj vi ne vere zorgas pri ĝi. Facebook efektive faris penadon por fari ĉi tiu bona, kaj ili jam vere provis peli rilatajn rezultojn al la supro de la novaĵo-servo ekde malfrua tiel vi efektive vidas aĵojn por geamikoj kiuj estas gravaj por vi aŭ via proksimaj amikoj. Io alia? Jes. [Inaudible studento respondon] >> Cxu vi povas rediri tion? [Studento] La anoncoj estas relative maltrudiĝema. >> En kiu senco? [Inaudible studento respondon] Ili ne havas lumon sur la ekrano, kiel standardoj. Okay. Tio estas bona. Se vi memoras la Interreto de la 90 - >> [Malan] mi estis tie. >> Li estis tie. [Ridado] Vi povus memori brilantaj gifs fonoj, sparkly aferojn, Geocities stilo speco de aferoj. Tio vere ne estas ekzemplo de bona dezajno ĉar ĝi estas vere distri de la enhavo. La Yale arto afiŝinto kutimis havi viglan gifs kiel ilia fono kaj vi ne povis legi nenion sur la paĝo, sed mi supozas ke iu efektive parolis al ili kaj nun ĝi estas iom malsama. [Malan] Estas multe pli bone nun. >> Estas multe pli bone nun, kiel vi povas vidi. >> [Malan] Oh yeah. Simple genia, ĝuste - Yeah. Okay. 

Parto de ĝi estas ankaŭ farante vian paĝon eble tre minimalista kaj tre komprenebla do aferojn de la paĝo fluo en maniero kiu estas tre logika kaj ne meti en la vojo de ĉiu alia. Kio specoj de aliaj aferoj estas bonaj pri Facebook aŭ malbone por Facebook? Ni nur havas dezajno konversacio tie. Oh. Kie? Yeah. [Studento] La nova Kronologio sistemo permesas vin serĉi la personon profilon de sur lia pasinteco. Ooh, Kronologio. Kronologio estas granda afero, ĉar ĝi ebligas tigo viaj amikoj reen kiam ili estis en la mezlernejo. Kronologio estas bona ĉar ĝi permesas filtri tra enhavo multe pli rapida, ĝi permesas trovi aĵojn kiuj estus alie prenita vi vere longa tempo por trovi nur movo tien kaj reen, supren, supren, supren, supren, supren, kiel iri malantaŭen en la tempo. Sed tiam ekzistas ankaŭ speco de malavantaĝo ke en terminoj de uzanto sperto. Kio povus esti tiu? Big vorto, kiu komenciĝas per P-R. >> [Studento] Privateco. >> Privateco, ĉu ne? Privateco estas grandega uzanto sperto temo. Tiu estas unu el la aferoj kiujn mi malamas plej pri Facebook nun. [Ridado] [Malan] Kiel fari mi nun. David ne realigi ĉi vere okazis ĝis hieraŭ. Do nun li scias, ke ĉiufoje kiam mi babili li mi scias ke li estis ignorante mi. [Malan] La mallerta parto estis mi efektive ignoras lin, kaj mi ne scias, ke li sciis Mi estis ignorante li. [Ridado] Privateco estas grandega problemo. Ĉu iu povas tie diru al mi kio povus esti malbona pri Facebook privateco krom la fakto ke ili faras tion tiel? Kio estas aparte malfacile fari kun respekto al Facebook privatecon? Tia estas elstare demando. Jes. >> [Studento] Kaŝi vian fotoj de iuj personoj. Ĝuste. Ekzakte, por kaŝi vian fotoj de iuj personoj. Ili havas ĉi malgranda, iom butonon en la supra dekstra kiu ebligas vin Baskuligi la intimeco de foto. Iliaj privatecon ebloj estas tre diversaj inter malsamaj specoj de menuoj. 

Ili jam atingis multe pli bone pri ĝi ĵus, sed kutimis esti la kazo ke kiam ajn vi volas malhelpi vian amikojn el vidi fotojn, vi devus iri tra tre komplika 5-paŝo procezo de esti kiel, lasu min klaku ĉi ligilon, nun mi premas denove, lasu min premas denove, lasu min specifi kiuj homoj ne povas vidi Mian fotoj. Tio ne estas aparte bone en Facebook La parto ĉar tiel pri uzanto sperto efektive donante al ili la liberecon kontroli, kion homoj povas vidi. Ni nomas ĉi tiu uzanto kontrolo kaj libereco. Se vi ne lasanta viaj uzantoj fari tion en maniero kiu estas efika kaj intuicia, tiam via uzanto sperto ne estas vere ke granda ajn.  Ĉu vi infanoj ŝatas diri ion pri Facebook? Kiel mi turnu ĉi ekstere? [Ong] Oni ne povas turni tiun for, kaj tio estas grandega usabilidad difekto fare de Facebook. Ĉi tiu funkcio - Mi vere rigardis ĝin hieraŭ - ĝi estas ĉu vi ne povas fari ĝin aŭ ĝi estas enterigita ie tre, tre profunda sur la fundo de Facebook ĉar mi ne povas diveni kiel malŝalti ĉi funcionalidad ajn. [Malan] Sed kelkfoje tiuj decidoj ne estas evidenta ĉar vi infanoj donis al ni multe da utilaj sugestoj pri diversaj CS50 aplikoj kaj retejoj ke la kurso uzas. Ni ne ankoraŭ realigita ĉiuj el tiuj petoj kaj sugestoj. 

Parto de tiu estas por atingi tiom da petoj ke ĝi estas funkcio de tempo, sed kelkfoje oni nur faras konscian decidon kiel, "Dankon pro la sugesto, sed ni malkonsentas." Do kiel vi reale decidi kion vi devas fari se viaj uzantoj opinias ke vi devus fari ion eĉ se vi ne nepre? Estas fajna ekvilibro inter reale aŭskulti kion viaj uzantoj diri kaj fakte esti ia linio kie vi diris, "Ni ne volas fari, kion ĉi tiuj uzantoj diras." Kaj precipe, mi kredas ke estis citaĵo de Henry Ford kiu resumas ĉi tion sufiĉe bone. "Se mi demandis homoj kion ili volis, ili dirus ke ili volis pli rapide ĉevaloj." Ĉu iu povas ordigi de tease krom kion tiu citaĵo vere signifas? Ne nur ke la uzantoj scias kion ili volas, sed ĝi estas pli ke - [Studento] Ili ne scias kio estas ebla. En parto ili ne scias kio estas ebla. Tease ke krom iom pli. Kion vi aludas per tio? [Inaudible studento respondon] Tio estas bona. Kion mi pensas, ke ni provas diri estas, ke homoj scias kion ili volas. Ili volas rapidan ĉevaloj. Kion ili vere volas estas la kapablon movi pli rapide, sed ili ne vere konas la mediumo, per kiu atingi tion. Kiam vi venos al viaj uzantoj kaj viaj uzantoj diri al vi ion kaj ili diros al vi, "Ni volas tiuj karakterizaĵoj kaj tiuj funkcioj kaj tiuj funkcioj," vi ne volas nepre pensas, "Lasu min "Kaj efektivigu, kion ili eksplicite diras," sed kion vi volas pensi estas, "Kia ideojn mi povas preni de tio?" Kion ili efektive volas? 

Kaj de tie kion vi povas fari estas desegni iun kiu kontentigas tiuj petoj sed ne nepre en la maniero ke la uzanto atendas ĝin por esti kontenta. Do por iu kiel fina projektoj, en tre reala terminoj, kio estas utila heŭristiko kiam temas pri fari ion pli bone, precipe se la diseñador havas ĉi aroganteco pri li per vi ia scias kio estas plej bona, vi povus preni enigo de via uzantoj, sed kiel vi reale iros sur atingi ke sugestoj? En fino projektoj, tre konkrete, kion produktas optimuma rezultoj tie? Kion produktas optimuma rezultoj - kaj mi iros super ĉi en dua - Estas ĉi tiu procezo de disvolviĝo kaj tiam provi kaj poste ripetanta. Kion mi celas per testado estas kutime kiam vi desegni ion vi pensas, ke estas sufiĉe bona, kiel, "Mi estas tiom granda konceptadisto. Ĉiuj tuj amas ĉi." Kaj tiam vi metis ĝin tie kaj homoj ne vere ŝatas ĝin ial. Kion vi devas fari estas vi devas preni la partoj de aĵoj kiujn homoj faras kiel kaj revamp la aĵoj kiuj oni ne ŝatas. Ĝi sonas kiel tre evidenta procezo, sed tiu procezo de senĉese ripetanta sur supro de kion vi jam konstruita estas procezo kiu helpas vin ne nur rafini vian propran dezajnon kapabloj sed ankaux helpas vin rafini la dezajno por ke homoj reale dankas vian produkton eĉ pli ol ili faris antaŭe. 

Mi tuj iros pli konkretaj ekzemploj de tio, kion vi povus reale fari. Kiel ia lasta ekzemplo de produkto, ni rigardu kajako. Kajako kiam eliris estis tre, tre populara. Ĉu iu povas diveni kial? Kio estas la varoj de aĵoj vi ŝatas pri tiu se vi uzas ĝin aŭ kio estas la varoj de aĵoj vi ne ŝatas? Jes. >> [Inaudible studento respondon] >> Bone. Tio estas parto de ĝi lasi la uzanton havi query ke estas pli expansiva ol tre limiga unu kiel, "Vi devas elekti vian komenca dato "Kaj vi devas elekti vian fino dato." Fakte, ĝi permesas esti fleksebla pri ĝi kaj ĝi donas vin ĉiujn el la fugoj en tiu gamo. Io alia? [Studento] Ili inkluzivas la kotizoj en la prezo. Ili faras inkluzivas la kotizoj en la prezo. La impostoj kaj aĵoj vere iru rekte en tiu prezo en la supra maldekstra tial vi ne trompis en pensante, ke vi efektive pagas por $ 240 flugo kiam estas vere $ 330. Io alia? Jes. [Inaudible studento respondon] Mi ne certas se ili vere lasu vin fari tion. Mi povus esti malĝusta. Tio povus esti interesa afero, se vi volas meti pli da pezo en aparta filtriloj por ke ili puŝi rezultojn rilataj al tiu filtrilo al la supro. Sed vi povas paroli al mi kio estas tiel speciala pri tiu maldekstra flanko? Kiel vi tradicie serĉi flugo sur Interreto servon antaux tio? 

Jes. >> [Inaudible studento respondon] >> Cxu vi povas diri, ke - [Studento] Ĉiu aera. >> Jes. Ĉiu kompanio havas sian propran retejon. Ĉi solidigas aĵoj. Kaj? [Studento] Vi scias precize kion tempo vi elirante. Vi scias precize kion tempo vi lasante, sed rilate al la filtriloj en aparta. Lasu min eltiri supren kajako. Ho Dio, popo-ups. Malbona uzanto sperto. Kio okazas kiam mi movas tiunĉiŝovilon? [Studento] Aŭtomata ĝisdatigoj. >> [Ong] Aŭtomata ĝisdatigoj. Tio estas iu kiu estas tre grava. Antaŭ tio, kiam ajn vi volas serĉi al flugo, vi devis meti en via enigo situo, via eliro situo, gazetaro Search, estus procesi tio kaj montri vian rezultoj. Se vi volas ŝanĝi vian konsulto, vi devus premi reen dufoje, eniri en nova konsulto de nulo, kaj poste fari tion denove kaj denove. La belan afero pri io tiamaniere estas ĝi uzas tre [nekompreneblaj] aĵo en la mezo. Kiam ajn vi faru ion kiel tiu, ĝi pafas ekstere peto kaj denove vi ĉiuj rezultoj tuj. Tiu speco de tuja sugestoj estas iu kiu faris kajako ekstreme populara ĉar ĝi estas vere facila por mi nur ŝanĝos mian query kaj eltrovi tion, kio estas ĉirkaŭ apartan gamo sen devi iri tien kaj reen, tien kaj reen, tien kaj reen. Do jen estas ĉiaj aferoj, kiujn vi volas pensi pri kiam vi desegni vian retejon. Kiel mi povas fari ĝin tre efika por mia uzantoj iri tra ajn ili estas laborante kaj alveni al ilia eventuala celo kiel eble plej rapide? [Malan] Kaj al Jozef punkto frua pri uzantoj ne nepre scii kion ili volas, surbaze de kio vi infanoj nun scias pri HTML kaj vi devas markobutonojn, radiaj butonoj, unuaranga menuoj, enigo kampoj kaj similaj, kiel vi apliki la nocio de plukante komenco tempo por flugo? 

Kiu el tiuj diversaj UI mekanismoj estus vi uzas? Se vi ĵus konas la kvanto de HTML kiu instruis antaŭe kaj vi konas la enigoj estas radioaparato butonoj, markobutonojn, guto-montetaro, kaj eniro skatolo, kio estus via natura elekto estis por pluki datoj? [Studento] Eniro. >> Eniro. Aŭ eble eĉ desplegable kun ĉiuj de la datoj, ĉu ne? Do kun pli kompleksa UI meĥanismoj kiel tiu de la maldekstra flanko kiu vi povas apliki, vi povas fari ĉi procezo multe pli intuicia kun slider ĉar la tempo estas kontinua, kaj homoj kutime ne pensas pri tio en terminoj de diskretaj buloj. Bone. Lasta afero. Dek usabilidad heurísticas. Ĉiuj aĵoj ni parolis pri probable fali sub unu el tiuj kategorioj. Se vi iras al tiu ligilo, kiun la lokoj estos eldonita en linio, vi fakte povos, kiel vi desegni via retejo, gardu tiujn heurísticas en menso kaj ĉi tiuj reguloj de dikfingro. Por viaj projektoj, kion mi rekomendas ke vi faru por desegni vian programon bona estas fari papero prototipado unua. Kiam vi pensas pri via aplikado, tre rapide skizi, kion vi volas rigardi kiel kaj certigi ĉiuj skatoloj estas aranĝitaj en maniero kiu estas tre intuicia por la uzanto uzi kaj eĉ montras tiujn papero prototipoj al viaj amikoj kaj komenci fokuso grupoj. Nur ricevas 2 aŭ 3 personoj kune kaj peti ilin nur tap sur tiuj papero prototipoj, kaj montri al ili novajn ekranoj por vidi se ili vere komprenis kio okazas. 

Kion vi volas fari estas doni al ili taskon, motivi tiu tasko, kaj nur donos al ili la app kaj lasu ilin uzi ĝin. Ne donu al ili instrukciojn preter tiu. Vi volas vere ili interagas kun via programo en maniero kiu ebligas vidi kiel ili uzus ĝin se vi ne staris apud ili. Kaj tio estas tre grava. Kiu donos al vi multajn komprenojn pri homoj ricevas ĉirkaŭ aparta aĵoj en maniero, ke mi ne intencas ilin? Ĉu ili uzante apartan UI mekanismoj en la ekrano laŭ maniero kiu estas speco de hacky? Mi ne intencas por ili fari ĝin tiel. Kaj iam vi faris kun tio, kion vi volas fari? Via dezajno rokoj, ĉu ne? Kion vi volas fari estas vi volas evoluigi kaj tiam fari tiu procezo denove. Do montri ĝin al amikoj iam vi disvolvis ĝin, testi ĝin, disvolvi, testi, evoluigi, testi, persisti, sur kaj en kaj antaŭen. Dezajno estas tre ripeta procezo en ĉi senso. Vi vere devas konstrui ion kaj poste rimarkas aferojn pri ĝi ke vi ne rimarkas antaŭ kaj reiri kaj plibonigi de tiu. Nun, kiel por la disvolviĝo parto, tio estas kio Tommy tuj montros al vi post la paŭzo kaj kiel vi eble povos apliki iun kiel autocomplete laŭ maniero kiu estas sufiĉe simpla. [Malan] Kiel Tommy establas tie, demando tiam. Multaj el la plej fruaj retejoj - kaj kiam Jozef diris 1990 stilo TTT-ejo, estis implementaciones kie se vi volas selekti komenco tempon kaj finiĝis la tempo, sincere, reen en la tago kaj ecx en iuj retejoj hodiaŭ, la vojo vi faras ĉi estas vi elektu unu horo el falmenuo, vi prenas minutoj de desplegable, eble vi elektos AM, PM, kaj poste vi faros tion ankoraŭ 3-foje. Kaj tial kun 6 klakoj kaj eble iuj movo vian uzanto povas reale havigi ian daton kaj / aŭ tempo gamo en ĉi senso. 

Do certe _suboptimal_ kaj tamen tiel malproksime ni vidis neniun esprima kapablojn en iu ajn el la lingvoj ni rigardis fari ion sexier kiel tiu slider de komenco kaj fino tempo tempo. Sed se vi pensas reen al semajno 0 kiam ni parolis pri Scratch, tie tro ne estis widgets kiu ĵus faris iujn aĵojn. Vi vere nur havis tiujn fundamentojn kiel maŝojn kaj kondiĉoj kaj similaj. Do ia nur pensante tre abstrakte nun, sendependa de la detaloj de HTML, kio vere okazas kun io tiamaniere komenco tempo kaj fino tempo slider? Kiam mi movi mian muson kaj mi alklaku ke iom karoto simbolo maldekstre kaj komenci trenante, programmatically, kio estas vi volas povi apliki fari kiuj okazas? Kio demandoj, kion Bulea esprimojn vi volas povi demandi? Kio vere okazas? Sammy? [Studento] Kie estas la pozicio de la kursoro? >> Bona. Kie estas la pozicio de la kursoro? Tio estis io ni bezonis esprimi reen en Scratch, ĉu ĝi estis bazita sur loko aŭ eĉ koloro aŭ similaj. Vi povus memori iam tiom mallonge lundon tie estis ĉiuj de ĉi tiuj aĵoj nomata eventoj en la mondo de la TTT, kaj tial ekzistas aĵoj kiel onclick kaj onkeypress kaj onkeyup kaj onmouseover kaj onmouseout. Do rimarkas ke eĉ tion ni estis prenante por donita en la TTT kun lokoj kiel Facebook kaj Gmail, eĉ se vi ne havas ideon kiel vi eble planas akcepti ĉar tie estas nenio eĉ ŝatas ĝin en prelego aŭ Problemo Ŝanĝu 7, rimarkas ke kun ĉi tiuj ĝusta sama fundamentojn, kun HTTP kaj parametroj kaj GET kaj POST, kun la baza HTML enigoj ke ni rigardis tiel malproksime kaj post momento kun la programita mekanismoj kiuj Tommy pri enkonduki vi povas starti por esprimi vin kiel vi faris en semajno 0 per intuitivamente trenante kaj faliginte. 

Do kun kiu diris, Tommy MacWilliam kaj iuj novaj puzlo pecoj por ni por Retejo. Bone. Mia nomo estas Tommy kaj mi tuj parolos pri JavaScript. Nur disclaimer: Mi estas de la opinio ke JavaScript estas la plej bona lingvo de programado en la tuta tuta mondo. Ekzistas multaj personoj kiuj malkonsentas kun mi, sed ĝi estas nur mirinda. Kiam vi reiru al C, se vi devas skribi C por alia klaso aŭ kelkaj aliaj lingvoj, estas nur vere frustra en la tuta malalta nivelo detalojn vi devas preni bogged malsupren in Do se vi iam sentis malĝoja pri kiel ĝena C estas skribi, nur reiri, skribi iujn JavaScript. Estas nirvana. Vi sentos multe pli bone pri via malbona tago. Multaj de la magio de JavaScript devenas ĝia kapablo manipuli aĵoj kiuj estas jam sur la paĝo. Kiam ni skribis niajn PHP skriptoj, estis ekzekutitaj en la servilo, kaj eventuale kiujn PHP script probable Eligo iuj HTML. Ke HTML estis sendita al la kliento, kaj tiam tio estis ĝi. Se PHP volis aldoni butonon al paĝo, ekzemple, ĝi ne povas vere fari tion. Ĝi devus redonu tute novan HTML-dosieron kaj sendi ke al la retumilo. Kun JavaScript ni scias, ke ni povas ĝisdatigi aĵoj dum ili estas jam sur la paĝo, kaj pro tio ni povas havigi multe pli tuja sugestoj, kiu estos vere plibonigi la uzanto sperto en nia retejo. Nur rapidan recap de JavaScript selectores. Ni scias, ke kiam ni malŝarĝi HTML-paĝo, ke tuj esti reprezentita en la DOM. 

La DOM memoru estas ĝuste ĉi tiu granda arbo, kie elementoj estas rilatanta en ĉi tiu granda hierarkio. Kiam ni laboris kun datumbazoj en pset 7, unu el la unuaj aferoj ni bezonis scii fari estis konsulti la datumbazo. Ni havas ĉi granda uzantoj tablo, kaj kelkfoje ni nur volas diri, "Mi nur volas iun el tiuj uzantoj kiuj kongruas iuj kondiĉo." Simile, kiam ni havas la DOM ni bezonas iel de informpeti ĝin. Ni bezonas iujn maniero diri, "Mi deziras, ke ĉiuj el la butonoj kiuj similas tiun "Aŭ ĉiu el la bildoj en la paĝo." Kaj jen selectores nin permesas fari tion. Do nur rapidan recap. Ĉi tiu unua ĉi tie, ĉi # submetiĝi, kio estas tuj elektu? Ĉu iu memoras? [Inaudible studento respondon] >> Jes, ĝuste. Tiu tuj elektu ero en la paĝo kiu havas ID de submetiĝi. Kaj por ke hash etikedo diras ĉi selector tuj labori kun IDs. Kion pri la dua, ĉi. Centrita, kion tiu elektu? Yeah. >> [Studento] Klaso. >> Ekzakte. Tiu estas nun tuj elektu de klaso. La diferenco inter ID kaj klaso tie estas ĝenerale la ID devas esti unika ene ajn spaco vi sercxas super. Do se vi serĉas super tutan retpaĝon, vi vere devus havi nur 1 elemento kun kiu iuj ID, do en tiu ĉi kazo de submetiĝi. Kun klasoj, aliflanke, oni povas havi pli ol 1 elemento en la sama paĝo kun la sama klaso. Tio povus esti utila por diri mi volas elekti ĉio ke tio centrita sur la paĝo anstataŭ nur 1 afero. 

Kaj fine, ĉi lasta tie estas iom pli komplika, sed kio estas tio tuj elekti el la DOM? [Inaudible studento respondon] >> Kio estas tio? [Studento] Anything tio estas etikedo. >> Ni havas 2 partojn tie. La dua parto estas dironta mi volas elekti tiujn etikedoj kun etikedo de eniro, tiel ajna elemento kiu estas enigo etikedo. Sed mi ne volas simple elektu ĉiuj enigoj ĉar iu kiel submeto-butonon eblis enigo kaj io kiel teksto skatolo eblis enigo. Do kun tiuj rektaj krampoj mi jene mi nur volas elekti tiujn elementojn kiu estas de tipo teksto. Ie en mia HTML tag Mi havas atributon nomata tipo, kaj la valoro de tiu atributo devas esti tekston. Do kiel pri tiu unua parto cxi tie? La unua vorto de ĉi selector estas formo tiam mi havas spacon kaj tiam ĉi enigo parto. Kion tio do, metante la formon antaŭ ĝi? Tiu tuj esence limigi nian demando. Ĝi povus esti la kazo, ke ni havas kelkajn enigoj en la paĝo kiuj ne estas posteuloj de formo. Kio ĉi faros estas ĉi diros mi nur volas ke la enigo etikedoj kiuj havas ie super ili iuj patro elemento de formo. Kaj tiel en tiu maniero ni povas fari tiujn pli hierarkia demandoj tial ni ne nur devas elekti ĉio matching donita selector. Ni povas ia limo la medio de tiu konsulto al io alia. Do nun ni scias kiel elekti elementojn en la paĝo, ni parolu iom pri AJAX. AJAX estas ankoraŭ tre laŭmoda acrónimo kiu staras por asíncronos JavaScript kaj XML. Simple tiel okazas ke XML estas nur iel reprezenti datumojn. 

Tia perdis popularecon lastatempe, do la X en AJAX ne uzas la tutan tempon. Esence, kio AJAX nin permesas fari estas fari HTTP petojn el la kunteksto de JavaScript. Kiam ni estas en nia TTT-legilo kaj ni navigi ĉirkaŭ paĝojn kaj ni klaku ligon, kion niaj retumilo tuj fari estas fari HTTP peto al kiom ligas nin premas. Sed tio ne estas ĉiam ideala ĉar se tio estas la kazo, tiam kiel David diris, ni ĉiam devas fari uzantoj alklaku submeto-butonon aŭ alklaki ligilon por fari ion okazi, ke tuj engaĝi an HTTP peto. Do kun AJAX ni povas fari tiujn petojn nome de JavaScript. Tio signifas ĉiam la uzanto interagas kun la paĝon aŭ io okazas, ni povas efektive fari programita peton al iuj aliaj PHP-dosiero en nia retpaĝaro aŭ io ajn alia kaj elsxuti la datumoj kiujn tiu dosiero kraĉas eksteren. Ni rigardu ekzemplon de AJAX. Ĉi tiu estas nia CS50 Financoj paĝo kun kiu espereble iuj el ni bone konas. Se ni rigardas la HTML de ĉi tiu paĝo, oni vidas tie mi aldonis kelkajn aferojn, unu el kiuj mi donis ĉi tiu formo ID. Mi diris id = "formo-citaĵo". Mi faris tion nur ĉar ĝi tuj fari tiun iom pli facile elekti el la DOM kiam mi povas nur fari tre simplan demando. Kion mi volas fari tie estas mi volas fiksi iun problemon kun CS50 Financoj. Do, se ni iros al finance.cs50.net, ĉiufoje mi volas akiri citaĵo, mi devas klaki ĉi GET Citaĵo butonon, kaj ke Get Citaĵo butonon tiam prenas min por alia tuta paĝo. Kaj se mi volas alia citaĵo, mi devas bati la Back butonon kaj tiam mi tajpu ĝin en, Mi ricevas citaĵo, kaj mi trafis Back butonon. Tiu vere estas ne la plej bona uzanto sperto. Kiu vere uzi la retejon se estas ke malrapidaj akiri stock prezoj? Do kion ni volas fari kun AJAX estas forigi tiun paŝon de iri al aparta paĝo por vidi la rezultojn. 

Kion ni vere nur petante estas kiu vere malgranda prezo, kaj tio estas nur vere malgranda kvanto de datumoj. Do ne necesas ke mi iru alia tuta HTML-paĝo, elŝuti tute nova parto de HTML, eble elŝuti iuj pli bildoj, iuj aliaj CSS-dosieroj nur por mi respondi al tiu tre simpla demando de kiom faras ĉi stock kosto. Kun AJAX ni povas fari ĉi multe pli facila. Ni vidas cxi tie ke mi kunigas en JavaScript dosiero nomata quote.js. Ni vere malfermi tiu dosiero. Ne ekzistas. Ĉiuj miaj JavaScript dosieroj tuj esti lokita en HTML tiel ke la retumilo povas aliri gxin. Tiam ni havas apartan dosierujon tie por JavaScript, kaj nun jen quote.js. Sur la supro de ĉi tiu dosiero ĉi diras ĉi tie, ke mi volas atendi la tutan paĝon esti ŝarĝitaj antaŭ ol mi provos fari ion. Kial estas ke necesas? Rezultas ke la sekva afero mi faros cxi tie estas komenco serĉas ero kiu kongruas iuj selector. Se ĉi tiu JavaScript estas iam ekzekutita antaŭ tiu elemento estas ŝarĝita en la paĝo, tiam ĉio mi provos fari ne tuj funkcias ĉar mi tuj provos elekti iun kiu ne estas tie ankoraŭ. Do ĉi tiu linio ĝis supro diras mi volas ke vi atendu gxis cxio estas ŝarĝita do ni garantias ke ajna elementoj Mi serĉas estas fakte en la paĝo. Ĉi dolaro signo tie signifas Mi uzas la biblioteko nomita jQuery. Ĉi jQuery biblioteko ni permesas uzi tiujn selectores ke ni nur rigardis. Dirante $ tiam pasante en kiel argumento ĉi # form-citaĵo, Mi nun elekti tiun formon, ke ni simple prenis rigardu. Nun mi havas reprezenton de tiu formo en memoro iel. 

En ĉi tiu objekto nun, ĉi tiu prezento de la formo, Mi nun uzas funkcio nomata plu. Kio ĉi tiu funkcio faras estas ĝi tuj alfiksi okazaĵo traktilo. La okazaĵo por ke ni tuj aŭskultos por estas la submeto-evento. Do kiam la uzanto klakoj kiuj Submetu butono aŭ premas Enter, ĉi tiu okazaĵo estas tuj fari fajron. Por hooking en tiun, mi povas nun nuligi la defaŭlta konduto de la formo. Sen tiu JavaScript, la formo estus submetiĝi al kiom PHP-dosiero ni uzis en tiu ago atributo. Sed anstataŭe, mi nun diras, atendu, atendu, atendu, mi ne volas ke vi efektive fari tion. Mi volas ke ĉi tio okazas al vi iru kaj provu sendi al iu PHP-dosiero. Nun kion mi volas fari? Je ĉi tiu punkto mi volas uzi AJAX iel ŝarĝi en kio la prezo de la sako estas. La unua afero Mi bezonas scii estas kio stock la uzanto serĉi. Por fari tion mi tuj uzos alian selector. Tio estas la tria selector ni rigardis antaŭe. Ĉi tio diras, ke mi volas dividi tiun formon elemento kun ID form-kurzo. Tiam ie ene de tiu formo ekzistas devas esti enigo elemento kiu havas nomo de simbolo. Se ni retrorigardas al nia HTML, ni vidis, ke ni havis enigo [nomo = simbolo]. Tio signifas ke ĉi tiu tuj elekti tiun teksta kadro, ke la uzanto estas tajpi en. Tio estas agrabla. Ni havas la teksta kadro. Nun ni nur bezonas scii kio estas interne de ĝi. Por fari tion ni povas nomi ĉi metodo ĉi tie, ĉi. Val, kaj ĉi tio diras mi scias kion teksta kadro kiun vi havas. Mi volas ke vi diru al mi kio estas la uzanto tajpas en tiun teksta kadro. Nun ni havas ĉenon nomas simbolo kiu estas egala al kiom la uzanto tajpas in Tio estas agrabla. Ni povas uzi tiun ĉenon nun fari nian peton. Tio ĉi estas nova funkcio ĉi tie, ĉi $, krom ni ne plu tuj estos elektante elementojn, ni iras al nomante malsama funkcio ke tio havigis al ni per jQuery. Ĉi AJAX funkcio estas kio vere tuj faros ĉi HTTP peto. Do ni devas sciigi kelkajn aferojn. La unua afero ni devas diri al tiu funkcio estas kie mi deziras ke la peto iri. Ie en mia projekto mi havas ĉi tiun dosieron ene de la HTML dosierujon nomita quote.php. Mi povas aliri ĉi tiun dosieron, ni vidis, ĝuste kiel ĉi tiu, se mi iras al localhost / quote.php. 

Mi volas mian JavaScript por fari peton al tiu paĝo. Kian peton nun? Ni vidis antaŭ ke la formo havas tiun metodon = "post" atributo, kaj tio signifas ke tuj fari POST peton, do ĝi estas ne tuj metis ion en la URL, prefere ol akiri peton, kiu estus nur esti pafitaj se ni nur Montrita la paĝo kun la retumilo, ekzemple. Nun ni diris, ke mi volas fari HTTP POST peto al paĝo jacas quote.php. Kiam ni prezentas la formon, memoru ni povis aliri la enigo elementoj ene de tiu formo kun tiu $ _POST variablo. Ĝis nun en la historio ni ne vere sendis kune ajna datumoj ankoraŭ. Ni ĵus diris ni fari AJAX peto kaj jen la tipo de peto ni fari. Nun ni bezonas vere sendi iujn datumojn por la paĝo. Por fari tion ni povas uzi ĉi tiu propraĵo nomata datumoj. La valoro de ĉi tiu propraĵo estas reale asocieca tabelo. La kialo estas tio ni permesas sendi pli ol nur 1 pecon de datumoj. Tial ni havas ĉi tiujn frizita krampoj tie anidado ene de tiuj aliaj frizita krampoj. La ŝlosiloj en tiuj asociaj tabeloj tuj estos la sama afero kiel tiuj nomo atribuas en nia formo elementoj. Tio signifas ke se mi sendas kune ŝlosilo de simbolo, kiu signifu mia PHP paĝo povas aliri tiun datumojn $ _POST [simbolo] samkiel ni faris antaux kiam ni submetas formo. Kaj nun la reala datumoj volas sendi tuj estos la valoron ene de ĉi asociaj tabelo. 

Ni stokas tiun tekston en variablo nomas simbolo, kaj tiel ni sendas kune nun ŝlosilon de simbolo kaj valoro de kiom la uzanto tajpas in Nun ni faris ĉi HTTP peto, nia PHP dosiero ekzekutitaj, kaj tuj sendi iuj datumoj reen do al la kliento, ke nur faris ĉi tiun peton. Nun ni bezonas por respondi al kiom la servilo diris al ni. Por fari tion ni havas ĉi lasta propraĵo tie nomata sukceso. La valoro de ĉi tiu sukceso ŝlosilo estas vere tuj esti funkcio, kaj ĉi tiu estas unu el la vere genia aĵoj vi povas fari kun JavaScript. Ne nur vi povas havi ints aŭ arrays kiel valoron ene de asocieca tabelo, ni povas ankaŭ havas funkcion. Do dirante sukceso, tiu estas mia ŝlosilo. Al dupunkto diras tie venas la valoro, kaj nun la valoron de ĉi tiu estas efektive funkcio. Do ni ne bezonas doni tiun funkcion nomon per si mem. Ni povas nur diri ĉi tiu tuj estos iu funkcio. Ĝi tuj prenu 1 argumento. La argumento por ĉi tiu funkcio tuj estos kion ajn la servilo sendis nin for de la peto. Ĝuste kiel kiam nia retumilo faras peton, la servilo sendas ion kaj la retumilo montras ĝin, en la kunteksto de AJAX ni ĵus faris peton, la servilo sendas ion, kaj nun ni kiu reprezentis kiel linio. Kun tiu ĉeno mi nur ŝatas montri, ke en la paĝo. Por fari tion mi tuj devos unu lasta selector. Mi volas elekti la elemento kun la ID prezo. Tiu estas nur malplena div ke mi kreis en la paĝo, kaj mi volas agordi la enhavon de tiu div esti kiaj ajn estu la servilo sendis nin reen. Mi fakte modifitaj quote.php iom. 

Anstataŭ nomante render kaj farante iun paĝon, quote.php nun estas simple tuj presi la valoro de la valoroj kiel linio. Do se vi estus al reale viziti la paĝon, vi simple vidas ke malgrandaj kordoj de kiom la stock prezo estas. Unu lasta afero kiun ni bezonas por fari ĉi tie estas nur certigi ĉi funkcio redonas falsaj. Kio ĉi diras, ke se mi interne de okazaĵo traktilo kaj ke eventa traktilo revenas falsa anstataŭ reveni vera, tio signifas, ke mi ne volas la originala okazaĵo por pafi. En ĉi tiu kazo, se ni ne havis neniun JavaScript kaj ni prezentis formo, nia retumilo tuj diri, "Mi tuj sendos tiu datumo kune," kaj ili tuj sendos vin al alia paĝo. Ĉar ni uzas AJAX nun, ne necesas sendi al la uzanto al alia paĝo. Ni nur tuj montri la rezultojn dinamike sur ĉi tiu sama paĝo. Ni vere ne volas ilin iri ie ajn, kaj mi volas resti sur la sama paĝo. Do per reveni falsa, ni certigu ke la formo ne faras tion por ni. Ni rigardu, kio estas tiu fakte aspektas. Nia citaĵo paĝo aspektas same. Lasu min eltiri supren la inspektisto cxi tie do ni povas vidi kio okazas. Faru ĝin iom malpli granda. Memoru se ni malfermas la Reto langeto, ĉi tiu estas kie ni povas vidi ĉion de la HTTP-petoj kiuj okazas en la paĝo. 

Por simbolo lasu min entajpi aapl kaj klaku Get Quote. Nun ni vidis, ke parto de Apple kostas iom da dolarojn nur aperis en la paĝo, sed la URL ne ŝanĝis tute. Fakte, jen la HTTP peto ke ni ĵus faris. Ni faris POST peto al quote.php. Tio havas sencon. Ĉi tio estas kion la servilo sendis nin reen. Ĝi ne plu ĉi tiu giganta HTML dokumento kun bildoj kaj aĵoj kiel tiu, estas nur linio de teksto, kaj tiam ni nur montris la linio de teksto. Se ni reiru al la titolaj kaj vidi kion ni efektive sendis ene de ĉi HTTP peto, ni povas vidi ĉi tie ke ni sendis kune kun ŝlosilo de simbolo kaj valoron de aapl, kiu estas kiu la uzanto tajpas in Tio belas, sed ĝi estas ankoraŭ iom ĝena. Mi ankoraŭ devas klaki tiun butonon por atingi la stock citaĵo. Ni estas okupitaj homoj kaj ni ne havas tempon por klaku butonoj. Google realigita ĉi iom tempon kiam implementado de Google Instant. What Google Instant faras estas kiel vi tajpas ĝin ĝuste komencas montri rezultojn por vi tial vi ne devas maltrankviligi eĉ klakante Search. Vere, amuza rakonto rilate al tio. Iam Google Instant elvenis, personoj estis kiel, "Halt, ĉi tiu estas super amazing." "Ĉi tiu estas tiel malvarma." Kaj studento malsupren en Stanford kiu estis 19 en la momento faris ĉi tiun retejon nomata YouTube Instant. Ĉiuj YouTube Instant tio estas efektive serĉo YouTube momento. Do anstataŭ devi iri al YouTube.com kaj batis Search, kiam mi ektajpu en YouTube Instant iu kiel CS50, ni povis vidi ĉi tie ke ĝi estas provo sur malrapida interreta konekto popoli tiuj rezultoj vivi. Por fari tion ni povas efektive fari tre simplan modifo al nia quote.js dosiero. Nun ni alfiksanta tiu evento kiam la formo estas afiŝita. Ni ne vere volas fari la uzulo submetas tiun formon plu, do ni anstataŭ pafi tiun eventon ĉiufoje la uzanto premas klavon. Por fari tion estu la unua ŝanĝi la okazaĵo de submetiĝi al keyup. Tio signifas ke anstataŭ atendi la formon prezenti, ĉiufoje kiam la ŝlosilo estas premita, io tuj okazos. Ĝi jam ne havas sencon por ligi tiun keyup okazaĵo al la tuta formo. Ni vere nur zorgas pri tiu serĉo skatolo. 

Elekti ke nun, ni povas ŝanĝi ĉi tion al esti, anstataŭ formo-citaĵo, form-citaĵo kaj ni havas enigo (tajpi = teksto) aŭ ni povus diri (nomumita = simbolo) - kion ajn ni volas. Nun tie estas unu lastan aferon ni devas fari. Memoru cxi tie kiam ni diris reveno malvera ni diris ni ne volas ke defaŭlta okazaĵo por pafi. Sed ĝuste tial okazas, ke se ni malebligi, ke nun, kion ajn ni entajpi ne tuj aperas en la retumilo plu ĉar tio estus la defaŭlta konduto de tajpi en teksta kadro. Ni ne plu volas nuligi tion, do ni ekstermos cxi tiun revenon falsaj. Se ni savos ke kaj reŝarĝi la paĝon, nun kiam mi komencas tajpi aapl vi vidos, ke la prezo de la agoj ĉe la malsupro tie kompletigi aŭtomate. Do jen CS50 Financoj Instant. Fakte amuza rakonto pri la YouTube Instant estas ke studento nur ia skribis ĝin kiel 1-nokto projekto, kaj la sekvantan tagon li proponis laboron en la YouTube CEO. Do tiel simpla kiel tiu, vi CS50 studentoj, viaj lastaj projektoj povas akiri al vi laboron en YouTube. Io simila estas vere genia ideo por fina projekto, ĉu ne? Ni havis iun ekzistantan funcionalidad ke ni volis integri kun. Ni plibonigis la uzanto sperto iomete, kaj subite serĉas ion sur YouTube Instant estu multe pli facila ol serĉis ĝin sur regula YouTube. Do jen AJAX en vortoj. 

En la ekzemploj, ke Jozef estis montrante, ni vidis multajn autocompletes, kaj tiuj autocompletes estas vere, vere utila ĉar ni ne devas memori - Ekzemple, se vi ne memoras la stock prezo por Apple kaj ni nur scias ke estas aa io, anstataŭ nur diri al mi, "Al parto de tiu afero kostas ĉi multe da mono" Mi specon de ŝatus scii kion akcioj komencu per aa. Ni povas fari tion vere bele kun la Bootstrap biblioteko ke tio jam inkludis ene de CS50 Financoj. Se vi venis ĉi tien al la JavaScript etikedo kaj rulu suben ĝis Typeahead, ĉi tiu estas nur bela plugin ke iu jam skribis por ni, kaj ni povas facile uzi lian funcionalidad ŝatas tion. Mi tajpis en A kaj tie estas listo de iuj ŝtatoj kiuj komencas kun A. Diru, ke mi kredas ke tiu estas vere malvarmeta kaj estas momento por mi inkluzivi ĉi sur mia paĝo. Ĝi rezultas ke ĉi tio estas vere, vere simpla. Ni salti super cxi tien por quote3.js. Mia dosiero aspektas iom malsama. Cxi tie cxiuj miaj AJAX stuff estas la sama. Mi volas ŝarĝi la stock datumoj sen devi iri al alia paĝo. Sed nun mi volas uzi tiun kromaĵon. La Bootstrap dokumentado havas grandan ekzemploj de kiel ĝuste mi povas fari tion. Mi volas diri, "Jen la eniro, ke mi volas autocomplete sur," kaj mi tuj nomas tiun funkcion nomita typeahead, kaj ke tuj manipuli ĉiujn Typeahead ajxojn ni. Ĝi pravalorizi la listo, ĝi faros ĉiuj niaj filtrita. La sola afero, kiun ĝi bezonas scii estas kion datumoj ni autocompleting plu. Do mi trovis ĉi tiun ŝlosilon nur legante la dokumentado kaj rigardante la ekzemploj. Se mi donas ĝin ŝlosilo de fonto, la valoro de ĉi ŝlosilon estas nur kelkaj tabelo de aferoj mi volas autocomplete plu. Tiu variablo venis de tiu alia dosiero. Mi malfermu symbols.js. 

Ĉi symbols.js estas ĝuste ĉi tiu vere, vere granda tabelo enhavas kordoj de ĉiuj tiuj valoroj simboloj de la NASDAQ. Se mi volas salti reen al la HTML, do jharvard, vhosts, globalhost, html, ŝablonojn, quote_form. Ekde tiu nun nomata quote3.js, lasu min ŝanĝi la JavaScript-dosiero mi inkludante tie. Nun mi havas quote3.js, do mi tuj montru en kiuj disigas JavaScript-dosiero, kiu havas tiun Bootstrap autocomplete. Nun kiam mi saltas reen al la retumilo, reŝarĝi la paĝon, kaj mi ektajpu aa, tie estas mia autocomplete. Kaj estis vere tiel simpla kiel tiu. Mi havis 1 linio de kodo ke nur diris, "Jen la aferoj kiujn mi volas autocomplete sur," kaj subite mi havas vere, vere agrabla funcionalidad kun ne tuta multe da penoj por nenio. Kiel vi evoluantaj retejojn kaj aparte la antaŭa fino flanko de aferoj, vi tuj trovos ĉi tiu estas la kazo multe. Estas multaj, multe, multe da vere freŝaj libera bibliotekoj tie kiuj faras ĝin super facile fari aferojn kiel ĉi tio. Ĉu iu povas imagi ian malavantaĝoj de simple autocompleting sur tiu granda listo de simboloj? Kio povus esti iu kiu ne estas la plej bona kun ĉi alproksimiĝo? Yeah. >> [Studento] Tempo, se vi havas multe da [inaudible] Yeah. Nun ni elŝuti ĉi grandega JavaScript dosiero kaj estas multe da simboloj. Kaj do se ni havas ton de aĵoj, ĉi povus ia pliigi la latencia de ne nur serĉado sed ankaŭ elŝuti la reala dosiero. Granda. Io alia? Nun ne estas reala senco de graveco. Se mi tajpas en A, la entreprenoj kiuj montras ĉi tien eble ne la plej populara kompanioj kiuj komencas kun A. 

Antaŭ mi alvenas al Apple, ĝi povus porti iun pli karakteroj por trovi kion mi serĉas. Ĉi autocomplete ne havas tiun senton de graveco. Ĝi estas nur intencis diri, "Anything kiu kongruas mi iros por montri." Anstataŭ tio, mi ŝatus iel integri iu graveco en mian serĉoj. Se mi transiru cxi tien por Yahoo! Finance, finance.yahoo.com, Se mi klopodas eniri simbolo sur Yahoo! Finance la paĝon kaj mi ektajpu goog, mi havas ĉi bela listo de aĵoj. Klare, ĝi aspektas kiel Yahoo! Finance faras ion pli ruza tie. Ili havas iujn graveco kaj ili ankaŭ havas pliajn informojn kiel la nomo de la stoko. Tio estas io, kiun mi ne povas vere akiri per nur miajn akciojn listo de simboloj. Mi volas ĉi tion kaj do mi tuj preni ĝin. Por fari tion ni faru kelkajn aferojn. Ni unue malfermi la inspektisto pri tiu pagxo ĉar ni vidis, ke tiu ĉi paĝo ne estas reloading tute ne, do ĝi estas probable uzas AJAX iel esti ŝarĝo lia datumoj. Ni povas eltrovi datumoj ĝi estas ŝarĝo. Se mi alklaku ĉi Reto langeto, tiuj tuj estos ĉiujn petojn ke komenci esti pafitaj. Nun, se mi tajpas en goo, ni povas vidi ke mi ĵus nova HTTP peto. Tio estas verŝajne kie tiu datumo estas devenante. Efektive, se mi rigardas tiun URL, kiu estas iom strange nomata, ni povas vidi ke ĉi tio estas ĝuste kie Yahoo estas sendi for lia datumoj de. 

Mi kreis aparta dosiero nomata suggest.php tio estas tre simila en spirito al la lookup funkcio. Ĝi estas esence tuj faros konsulto al Yahoo La URL, reiri iuj datumoj, kaj sendu gxin al mi. Nun, anstataŭ uzi ĉi granda, grandega listo de simboloj, Mi povas uzi Yahoo La belan graveco aferojn, kaj mi ne havas por elŝuti ke amasa JavaScript dosiero. Mi nur tuj disbatos la reale rilatajn stock simboloj. Ni salti en tio. Do html, js. Ni estas nun en quote4. Nun ni ne plu uzi tiun grandan liston de JavaScript dosierojn. Sed estas malgranda speco de dezajno problemon ĉi tie. Ni diris, ke la A en AJAX estas asíncronos. Kion tio signifas ke kiam mi fari AJAX peton, tiel ĝuste sur la linio 8, ĉi tiu estas kie mia AJAX peto estas vere pafis. Diru nun mi havas iom da kodo cxi tie ke okazas fari iujn aĵojn kiel alarmi la uzanton aŭ ŝanĝo ion sur la paĝo. Kio ne tuj okazos estas la retumilo ne tuj atendi tiun peton por daŭrigi antaŭ veni malsupren kaj bati tiun linion. Tio estas la asíncronos parto. Ĝi tuj fari tiun peton, kaj diros: "Kiam ajn vi finas, "Reveni kaj nomas tiun funkcion, kiun mi diris al vi nomi ene de sukceso." Tio signifas ke ni ne povas simple elŝuti ĉiujn akcioj antaŭe. Ni bezonas fari la peton kaj atendu ion por reveni. Tio signifas ke antaŭe, ni povus simple diri Bootstrap, "Jen la listo de aferoj kiujn mi volas ke vi autocomplete plu." Ni ne plu povas fari tion plu, ĉar ni ne scias kion ni volas vere autocomplete plu. Feliĉe, Bootstrap pripensis ĉi tion ĉar tiuj estas inteligentaj infanoj tie, kaj ili efektive donis al ni alian vojon por ŝarĝi ĉi Typeahead kromaĵon. Antaŭe, la valoro de ĉi tiu fonto proprieto estis nur tiun grandan varion de aĵoj al autocomplete plu. 

Nun la fonto propraĵo estas fakte funkcio, kaj la celo de ĉi tiu funkcio estas elkompreni kiel la aĵoj al autocomplete sur estas. La maniero ĝi tuj diveni kiun el estas tuj demandi Yahoo! Finance kion la bona aferojn autocomplete estas. Por fari tion mi tuj faros tre simila AJAX peton. Mi tuj petos ĉi paĝo ĉe suggest.php. Mi volas sendi kune la simboloj ankoraŭ. Kaj nun mia sukceso, la Bootstrap dokumentado diris al mi, ke por popoli ke listo de aferoj, ĉiuj mi bezonas fari estas pasi en ĉi tabelo nun al la callback funkcio. Sed atendu momenton. Se ĉi tiu estas supozita al esti aro kaj AJAX estas sendi al mi tekston, kiel estas ke eblas? Ĉi enkondukas novan manieron de interŝanĝi datumoj nomis JSON. En ĉi tiu kazo ni ne nur sendi reen simpla ĉeno de teksto. Nun ni pritraktas tiun pli kompleksa listo de stock simboloj. Tiuj valoroj simboloj povas ankaŭ inkluzivi aĵoj kiel la kompanio nomon aŭ la nuna prezoj. Nur uzante grandan longa ĉeno kiu ne estas formatita en ajna antaŭvidebla maniero ne tuj estos la plej bona maniero akiri tiun datumojn de Yahoo La servilo al mi en maniero, kiun mi povas facile kompreni. JSON estas teknologio kiu utiligas kiel ni kreas asociaj tabeloj en JavaScript. Ĉi aspektas multe kiel JavaScript asocieca tabelo, kaj fakte, ĝi estas ĉar ĝi estas. JSON staras por aktivigi Objekto Skribmaniero. Tio estas esence akordigita formato por trapasi datumoj tien kaj reen. Jen ĉi JSON objekto aŭ ĉi JSON asocieca tabelo estas sendi al mi iuj datumoj pri kurso. 

La ŝlosiloj de tiu tabelo estas aĵoj kiel kurson kiu havas valoro de cs50, kaj cxi tie ni povas vidi ke mi povas havi valoron kiu estas tabelo. Mi ne devas fari tion kiel parse el ŝnuroj kaj serĉi komoj kaj faru freneza aferojn tiel. Ĉar ĉi estas deklarita en ĉi JSON formato, JavaScript kaj jQuery jam havas funkciojn por konverti ĉeno kiu similas tiun JSON en reala JavaScript asocieca tabelo ke ni povas laboro kun. Farante tio estas tiel simpla kiel diri ke jam ne estas ĉi tiu dosiero, suggest.php, sendi al mi nur ĉeno de teksto, sed mi scias ĝin tuj estos sendi min JSON. Tio signifas, ke tiu JSON povas esti konvertita enen JavaScript asocieca tabelo. Kaj tiel jQuery, mi volus, ke vi faru tion por mi. Tio signifas ke ĉi tiu respondo parametro ĉi tie, ĉi tio jam ne estas nur ĉeno. Ĉar ni rakontis jQuery ke tie venas iu JSON, jQuery tuj estos sufiĉe inteligenta por diri, "Vi volis JSON?" "Mi tuj konverti ke en asocieca tabelo por vi." Ni efektive rigardu la Reto langeto iam ni havos quote4.js. Ni ŝanĝi tion kaj reŝarĝi la paĝon. Nun mi iros por tajpi en-a fojo. Mi faris kelkajn petojn por suggest.php, sed nun tiu respondo, anstataŭ nur la kordoj, estas JSON. Do mi havas malfermitan frizita streĉa diris: "Jen venas asocieca tabelo." 

La unua kaj sola ŝlosilo de ĉi asociaj tabelo nomas simboloj, kaj tiam ĉi tie estas tabelo de ĉiuj gravaj simboloj venas nun de Yahoo! Finance, ne de tiu giganta listo. Tiel estas kiel mi povas simple popoli ĉi autocomplete kromaĵon kun iuj datumoj ke tio ne venas de loka dosiero ke tio jam antaŭdeterminita sed de io alia. Rezultas, ke ni povas efektive utiligi teknologio nomita JSONP, aŭ JSON kun Plenigado, ke forigos ĉi suggest.php middleman. Sed anstataŭ fari tion, ni anstataŭ rigardu kiel mi povas plibonigi ĉi eĉ pli. Mi vere ŝatas Bootstrap la Typeahead. Estas vere bela. Sed estas duumaj bona JavaScript kaj ni volas specon de fari tion mem, eble rigardu kion ĉi kromaĵo povus fari. Ni ne plu uzas tiun Typeahead aferon, kaj ni provu fari ĉi listo de sugestitaj akcioj ni mem. Tie en quote6.php nin tuj dividi la sama maniero. Ĉiufoje iu tipoj ion, ni volas fari AJAX peton. Ĉi tio estas simila al nia originala CS50 Financoj Instant. Anstataŭ fari peton al quote.php, ni nun fari peton al tiu sama dosiero kiel antaŭe, ĉi suggest.php, kio estas ĝuste tuj tiri datumoj de Yahoo! Finance. 

Denove, ni ankoraŭ atendas JSON, sed nun kiam la Typeahead ne faras tion por ni, ni ankaŭ bezonas sendi kune la valoro kiu estas ene de la nuna teksto skatolo. Nun ni scias kion peti Yahoo! Finance por, kaj nun jen la funkcio kiun ni volas ekzekuti tuj la peton kompleta. Ni ne havas la kromprogramon por fari la liston por ni, do tie estas kie ni fakte tuj konstrui liston de sugestoj. Por fari tion, tre ŝatus en PHP ni concatenados tiuj grandaj ĉenoj de HTML tiam ni presas ilin, ni povas fari same ĝusta aĵo en JavaScript. Unue ni tuj dividi ĉi ŝnuro nomita sugestojn, kaj ĉi linio estas ĝuste tuj enhavi iujn HTML. Ni volas esti listo de aferoj, do ni tuj dividi kun tiu listo etikedo, kaj nun ni iras ankaŭ persisti super ĉiuj el la simboloj kiuj revenis reen al ni. Memoru, ĉar ni diris Datumtipo: JSON ', ĉi tio ne estas cxeno. Tiu estas jam tabelo por ni. Tio estas vere genia. Ni povas simple diri, "Mi volas ke vi aldonas liston elemento." Ni metos ĝin interne oni al ero en flanko de tiu, ni donos ĝin al klaso de sugestoj tiamaniere ni scias kio ĝi estas, kaj nun jen estas la simbolo por ke ni revenis de Yahoo! Finance. 

Iam ni kreis ero por ĉiu el la simboloj ni alvenas reen, ni nur volas fermi la listo. Do nun sugestojn reprezentas tiu malgranda HTML fragmento ke kiam metis sur paĝo tuj estos la listo de aferoj kiujn ni serĉas. Nun ni efektive metis tiun sur la paĝo. Por fari tion mi efektive kreis alian malplenan div kaj mi donis gxin al ID de sugestoj. Same kiel ni starigis la enhavo de la div kiu montras la prezon de la stock datumoj, ni nun volas nur metis la enhavon de ĉi div al kiom ĉi tiu linio estas kiu enhavas tiujn simbolojn. Per uzo de ĉi HTML metodon, ĉi sugestojn variablo, ĉi ŝnuro, estas ĉeno de HTML. Mi volas ke vi prenas tiun HTML kaj metis ĝin interne de la div nomis sugestoj. Ni ĵus aldonita ion por la DOM nun. Ni aldonis kelkajn novajn elementojn al la DOM ke ni povas nun montri en la paĝo. Ni vidu kion ĉi aspektas. Se ni ŝarĝas en quote6 kaj nun ni revenos, nun kiam mi ektajpu aapl, ni ne plu havas tiun Bootstrap autocomplete, sed ni nun havas tiun liston por ke ni faris nin mem. Tio estas iomete pli malbelaj ol la Bootstrap Typeahead, ekzemple, sed ĝi permesas al ni fari unu alia afero. Kiam ni serĉis en tiu Bootstrap kromaĵon, ni vidis, ke kiam ni autocompleted, unu el la autocomplete valoroj estis aapl. Tio eble ne estus tiel helpema. Kiel uzanto, mi eble ne tuj rekonas ĉiujn stock simboloj. Kion mi estas probable pli verŝajna por rekoni estas la kompanio reala nomoj. Do ĉu ne estus vere utila se anstataŭ diri aapl ĉi diris ion kiel Apple Inc Ĉar ni ruliĝis ĉi ni mem, ni povas vere facile fari tion. Ni malfermu niajn lastajn citaĵo dosieron ĉi tie, do quote7. 

Sama afero. Mi ĵus kreis alian PHP-dosiero kiu revenos al ni pli ol nur la simboloj. Ĝi ankaŭ donas al ni redonis la kompanio nomoj. Kaj tial ni faras la samon. Ni farante AJAX peton. Iam la peto kompletigis, ni tuj ekzekuti tiu funkcio ĉi tie, kaj ĉi tiu funkcio tuj konstruos grandan ĉenon de elementoj. Sed la diferenco estas, ke la valoro de tiuj listoj ne plu estas nur la simbolo, ĝi estas nun la nomo. Do ni havas unu malgrandan problemon. Kiam ni uzas nian lookup, ni bezonas iel pasi ĝin la simbolon. Ni ne povas pasi lookup ion kiel Microsoft Corporation. Ni devas pasi ĝin MSFT. Kiam ni skribas HTML, ni havas multe da belaj korpigita atributoj. An A eble asociita al ĝi href aŭ klaso. Sed kion ni vere bezonas nun estas por ĉiu el tiuj ligiloj havi stock simbolo asociita kun ĝi. Ne enkonstruita en HTML atributo por stock simbolo, sed bonŝance HTML5 nin permesas krei nian propran atributoj esti kion ajn ni volas. Dirante datumoj-simbolo, kiun mi enkondukis novan atributon kies nomon mi ĵus faris, kaj ĉi tiu estas bone ĉar mi prefaced ĝin kun la sama enhavo. Ni tuj stoki ene de tie la simbolo de la borsa nun. Kion tio signifas estas ke kvankam ni montri la valoron de la kompanio nomo ene de nia autocomplete, ni ankoraŭ rememorante la simbolo kiu asocias kun ĉiu entrepreno. La maniero ni faras ĉi tio estas ene de ĉi elemento mem. Do tio signifas ke ni bezonas por fari pli ŝanĝon. Kiam ni alklaku ĝin nun, ni bezonas vere utiligi la simbolo atributo anstataŭ nur ĝia valoro. Se ni back up, ni alfiksi okazaĵo traktilo por sugestoj. Kiam unu el tiuj sugestoj estas clicked nun, mi volas fari ion. Kion mi volas fari estas ŝanĝi la valoron de tiu enigo skatolo. Nun mi volas meti tiun saman val funkcio. 

Do sen argumentoj ĉi val funkcio redonas al vi kio estas jam en la teksta kadro, sed se vi donas ĝin ĉenon, ĝi tuj preni tiun ĉenon kaj metis ĝin en la teksta kadro. Mi elektu lia teksto skatolo en la sama maniero. Ĝi estas nomo estas simbolo ene de form-kurzo. Nun mi sendas al ĝi la valoro de la atributo datumoj-simbolo. Tion ĉi tie estas nova, ĉi $ (ĉi tiu). Kio ĉi referencas al estas la elemento kiu klakis. Ni povas vidi ĉi tie ke ni ne alfiksanta clic okazaĵo al ĉiu elemento kun klaso de sugesto individue. Pli ĝuste, ni proksimigas ĉi iom malsame. Anstataŭe ni dirante kiam ajn io ene de ĉi sugestojn div, kiu memoras estas nur la ujo por tiu listo, se io ene de ĉi div estas klakis kaj ĝi havas klason de sugesto, Mi volas ĉi evento por pafi. Esence kion ĉi tio signifas ke ni povas fari estas ni povas reuzi tiun saman eventa traktilo por ĉiuj la aĵoj en la listo. Do ni ne devas havi unu eventa traktilo por la unua elemento kaj malsama eventa traktilo por la dua elemento. Ni povas anstataŭe diri, "Mi volas la saman eventa traktilo por apliki al ĉiu en mia listo." Sed ni devas iel scias kion elemento estis klakis. Ĉi tiu "tiu" ŝlosilvorto reprezentas ĝuste tio. Ĉi tiu estas la celo kiu estis ĵus klakis de la uzanto. Se mi nur klakis la 3a ligilo, ĉi tio reprezentas la elemento de tiu 3-a ligilo, kio signifas ke mi povas trovi ĝian atributo, datumoj-simbolo, kion ni scias devas enhavi la simbolon ke tio asociita kun la kompanio Mi nur klakis. Se ni saltas reen al nia financoj paĝo, ni povas vidi nun, ke iam mi ektajpu iu kiel msft, ni ne plu komprenis nur la stock simboloj, ni nun ricevas la realan kompanioj. Sed kiam mi alklaku unu el tiuj kompanioj, ni povas vidi ke ni reale popolante la teksta kadro ne kun la nomo de la entrepreno sed kun ĉiu stokis ene de tiuj datumoj atributoj. Kaj tial, se mi efektive inspekti unu el tiuj elementoj de dekstra klako ĝin kaj klakante Esploru Elemento, ni povas vere vidi kion ĉi aspektas. 

Memoru ĉi estas iu kiu nin kreis ene de tiu por buklo kiam ni estis konstruante ke kordoj de HTML. Ni povas vidi ĉi tie ke tiu datumo-simbolo havas la valoron de MSFT, kiu estas granda. Tio estas kion ni atendis. Tio estas la simbolo kaj tiel estas kiel ni atingis la valoron kiun ni bezonas por uzi ene de tiu teksto skatolo. Tio estas sufiĉa por la citaĵo formo ĉar tio estas speco de enuiga. Ni simple fari iujn rapidajn plibonigoj al nia biletujo paĝo. Se vi uzas CS50 Financoj por tempo kaj vi komencos aĉeti kaj vendi multajn karcero; eventuale tiu tablo tuj akiri sufiĉe granda, kaj vi tuj volas stock paperbenda, kompreneble. Tuj la tablo estas vere, vere granda, ĝi povus esti utila por la uzanto por provi serĉi super ĝi. Ene de la serĉo skatolo se mi ektajpu iu kiel Disney kaj serĉas mian Mickey Mouse stock, ni povas vidi ke la tablo estas nun filtrado surbaze de kion mi ĵus tajpis in Ĉi funcionalidad aspektas super komplikitaj, sed estas vere, vere facila kun jQuery kaj JavaScript. Ĉi portfolio.php dosieron inkludas JavaScript dosiero nomata portfolio.js. Ni rigardu tion. Do html, js, biletujo. Jen kie ni faras ke serĉado sur la tablo. La unua afero Mi bezonas fari estas alfiksi okazaĵo traktilo por tiu teksto skatolo ĉar ni scias ke ni volas nian filtrado funkcio pafi ĉiufoje kiam la uzanto premas ion ĉar ni ne havas tempon por Search butonoj. La unua afero kiun ni bezonas por fari estas eltrovi, kion la uzanto sercxas, samkiel ni faris antaŭe. Tio cxi sxlosilvorto referencas al la aktuala elemento la uzanto interagas kun. 

Ĉar la uzanto interagas kun la serĉo skatolo, $ Ĉi reprezentas la serĉo skatolo, tiel this.val donas al ni kio estas ene de la serĉo skatolo la uzanto estas aktuale tajpas. Do, nun kion ni volas fari estas ni volas persisti super ĉiuj el la vicoj ene de nia tablo. Elekti ĉiujn vicojn en nia tablo, mi donis tiun tabelo de ID de tablo biletujo, kaj ĉiu vico estas reprezentita de TR elemento, tial ĉi selector tuj revenos al mi grandan tabelo de ĉiuj vicoj en mia tablo. Nun mi volas persisti super tiu tabelo. Mi povis vin por ciklo, sed jQuery vere donas al ni la belan funkcio nomata "ĉiu". Kion ĉiu faras estas ĉiu prenas unu argumenton, kaj tiu argumento estas funkcio. Kio okazas al fari estas tio okazas apliki tiun funkcion por ĉiu ero ene de tiu listo. Ĉi tiu funkcio prenas unu argumento kiu estas e, kaj kiam ĉi tiu funkcio estas ekzekutita, ĉi TTT tuj estos anstataŭita per la unua vico, tiam la dua vico, kaj tiam la tria vico. Per ĉi tiu maniero, ĉi tiu estas la sama afero kiel kuri por buklo kaj tiam decidi la nuna ero bazita sur la indeksa ene de via por buklo. Je ĉiu ripeto, por ĉiu el tiuj elementoj en la tablo, Mi volas kontroli, ĉu la teksto de la elemento - la tekston de la ĉelo ene de la vico - kongruas kion mi sercxas. Tiu granda longa ĉeno da ordonoj estas kiel mi povis fari tion. Unue, denove, ĉi nun raportas al - ĉar ĝi estas ene de nova funkcio - ĉi tiu estas nun la aktuala vico en la tablon. Mi volas preni la aktualan vicon en la tablo, kaj mi volas akiri ĉiujn siajn filojn. Memoru, la DOM estas hierarkia arbo, kio signifas, ke elementoj havas numeron de infanoj. 

Ĉi. Infanoj funkcio tuj revenos al mi reen tabelo de ĉiuj el la elementoj kiuj estas la filoj de, en ĉi tiu kazo, vico en la tablon. Tiu estas nur simple la ĉeloj ene de la vico. Mi nur volas serĉi pri la unua ĉelo. Ĉi. Unua funkcio diras al mi la unua elemento en tiu tabelo. Tiam la teksto funkcio diras min ĝuste kio estas ene de tiu ĉelo kiam mi volas sercxi super tiu teksto. Fine, ni konverti ĝin al minuskla, do ni povas fari tekston kazo sensenta demandoj. Fine, ni deziras vidi se tiu linio ene de tablo enhavas la kordoj ni sercxas. La indexOf funkcio en JavaScript faras ĝuste tion. Ĝi diras al ni, ĉu aŭ ne tiu cxeno enhavas alian kordoj. Se estas vere ke la ĉelo enhavas kion mi serĉas, tiam mi volas certigi ke ĝi estos montrata. La show metodo diros, "Montru la ero." Se ĉi tio ne estas la kazo, tiam tiu signifas ajn mi serĉis ne enhavis ene de tiu vico, kaj tiel mi volas kaŝi estas de la uzanto. Kiu sukcesas ke bela filtrado efekto kie jam vidas la tutan tablon. Se vi interesiĝas kiel fari ĉi paperbenda tiel, ni afiŝi la fonto ensalutintaj. Sed estas vere simpla. JQuery havas awesome metodoj por tiuj kuraĝigoj kaj manipulanta CSS propraĵoj. Do, jen ĝin por mi. 

Kio do kuŝas antaŭen? Kiel vi vidos post kelkaj tagoj, la fina projektoj propono estas pro. La fina projektoj propono demandos al vi kelkajn demandojn, sed inter ili estos tri limŝtonoj - unu estis "bona" ​​mejloŝtono, unu pli bonan mejloŝtono, kaj unu pli bona. La ideo estas vere helpi vin infanoj vian atendoj por ke minimume vi estos feliĉa kun la rezulto de via fina projekto kaj ĝi estos "bona" ​​Kiom vi raportas. Sed tiam en la intereso de prenanta vi atingi malmulta ion pli bonan aŭ io pli bona, ni ankaŭ ordigi de peli vin al tiu tiel. La CS50 Hack-a-Thon, dume, estas post kelkaj semajnoj. Tipe, ni faru tion en loterio bazo bazo pro intereso, sed malakordo ni prenos kelkajn cent el ni en pramo busoj de Harvard Square malsupren al Kendall Square kie Microsoft havas belan facilecon acertadamente nomita "nerd" - la Nova Anglio Esploro kaj Disvolviĝo Centro. Ni ricevos tie ĉirkaŭ 8 ptm Ni devos iom da manĝo. Ĉirkaŭ 1-a horo matene ni havos iom pli da manĝaĵo. Ĉirkaŭ 5 pm se vi estas ankoraŭ vigla ni estrus super al IHOP aŭ preni vin al universitatoj. La objektivo estas bucear en fino projektoj apud de kompanoj kaj bastono. Tiam kelkaj tagoj poste estas la CS50 Foiro, kiu estas vere signifis esti ŝanco por vi infanoj estas montrofenestro via laboro kaj atingoj por la semestro dum frotante ŝultroj unu kun aliaj kaj ekhavi senton de kio ĉiuj faris. Kun kiu diris, multaj danke al Tommy kaj al Jozef, kaj ni vidos vin lunde.  [Aplaŭdo]