[Powered by Google Translate] [Aste 9, Continúa] [David J. Malan - Harvard Unibertsitatea] [Hau CS50 da. - CS50.TV] 

Hau CS50 da. 9 aste bukaera da. Eskerrik asko. Azkenik. Astea 9. Dut. Gaur egun, gure web programazio buruzko elkarrizketa jarraituko dugu azken proiektua norabidean begi bat, ez duzu web-oinarritutako zerbait egin behar delako proiektuak behin betiko, baina baita azken proiektu edo CS50 ondoren hau da, zalantzarik gabe, norabide software modernoa egingo da. Eta, hala ere, ez da gauza erraza benetan. Izan ere, gauza gogorrena egin diseinuaren alderdi bat da. 

Esate baterako, diseinua benetan esan nahi dugu erabiltzaile-interfazea lortu edo erabiltzailearen esperientzia. I daresay - eta arazoa azken multzo bat ezagutzen dugun batzuk aired zure gripes software pieza batzuei buruzko edo hardware infuriates duzu, bai campus edo off gune asko daude, ez dago hardware asko daude, mota horretako sucks. Baina errealitatea da gauza erraza oraindik erabili egiten dira, hala ere indartsu erronka oso zaila da. Beraz, gaur egun Joseph eta Tommy me hemen sartzeko eskatu I horrela, elkarrizketa bat izan dezakegu, bai buruzko diseinu eta pentsamendu prozesu mota zure burua zeharkatzen hasi behar azken proiektuak diseinatzeko, zure etorkizuneko Musikal. Eta gero, Tommy laguntza ezartzeko xehetasun batzuk bilatuko dugu. Nola egin dezaket ikuspegi batzuk paper edo zure kontuan ondoren exekutatu ditzakezun programazioaren teknologia eta teknika batzuk erabiliz besterik ez dugu buruz hitz egiten hasi, Ikusteko Javascript-a hain zuzen ere eta gauza berriagoak diren, hots, AJAX, JavaScript asinkronoak. Horrek aukera ematen du, erabiltzailearen interfaze bat dinamika gehiago sortu beharko duzu pixkanaka zerbitzari batetik gero eta datu gehiago eskuratzean. Beraz, mozkinak horietako batzuk ikusiko ditugu, baita gaur egun ere. Bat alde batera utzita, informatika baitute interesa izanez gero edo informatika minoring, jakin eguerdian ostiral honetan Maxwell Dworkin 221 pizza ekitaldi bat izango da non ikasi pixka bat gehiago dezakezu informatikako buruz. Zure atea out gaur egun On jasotzeko CS gida ofiziala Harvard ahal izango duzu. Jarriko dugu, trash latak kanpo gerriaren altueran beraz, hau hartzen eta ikasten CS buruz pixka bat gehiago nahi izanez gero, egongo aste 0 zen bezala. Era berean, bada, gurekin ostiral honetan CS50 lunch 1:15 etan nahi duzun, buru behar cs50.net/lunch. ADO gehiagorik gabe, ematen dizut irakaskuntza fellow Joseph Ong. Hi. [Txalo] Eskerrik asko. Lehen denbora diseinua buruz ikasi dut klase bat hemen izeneko CS179 zen. 

Garai hartan, irakasleak esan zigun buruzko istorioa beste irakasle zuten hotel batean joan eta txorrotak erabiltzen den. Can Edozeinek tell me zer 2 Ezkerraldean gasaren eta eskuinera do? [Ikasleak] beroa eta hotza. >> Beroa eta hotza. Good. Zer espero duzu, normalean, ezta? Txorrota erabiliz ondoren irakasle honek dutxa bat hartu nahi du, eta hau erabili ahal izateko hasten du. Ezkerraldean pentsatzen zuen, eta eskuineko aldeetan beroa eta hotza dira, eskuinera? Baina edozein tell me zer horiek benetan egiten? Eskuak Any? [Inaudible ikaslearen erantzuna] >> One suggestion da? [Inaudible ikaslearen erantzuna] Tenperatura >>? Beraz, horietako bat tenperatura eta beste kontrolak kontrolatzen? >> [Ikasleak] Ura presioa. Uraren presioa. Good. Irakasle hau sartu ibiltzen da, eta, beroa eta hotza dira kontrolatzeko pentsatzen, ko eskubidea, beroa, modu guztiak pentsatzen du bihurtzen nahi du, dutxa bero bat hartu duelako. Beno, horiek ez benetan dator, eta, beraz, ez da oso dibertigarria esperientzia hori lortzen zuen dutxa hotza, eta denok dakigu zer sentitzen duten bezala. Honek, diseinu-akats baten adibide bat da. Zer bere esperantza txorrota, esan nahi dut ez datoz bat zer izan zen dutxa, zion zorigaiztoko mota da. Beraz, diseinu flaw bizitza errealean gertatzen den adibide bat da. Baina beste batzuk era guztietako ikusiko dugu baita. Ziurrenera, ez dugu MBTA sistema zaleek. Metro sistema benetan London, dio, "Botoi hau ez da erabiltzen." Zergatik ez dago ere? Zergatik zaindu dugu, nahiz eta? Txikitan, teknologiako adituentzat bat da etxean nintzen, betiere, ordenagailua kraska litzateke, nire ama me etorriko litzateke, me pantaila hau erakusten eta me galdetuz zer gertatu zen. 

Hala eta guztiz ere, ez dakit zer, horrek esan nahi du. [Barreak] Zer da? [Barreak] Batzuetan sentitzen dugu software garatzaileei bezala besterik ez dira trolling gurekin. Erabiltzaile gisa, atsegin dugu "Zer gertatzen da? Norbaitek esango digu." Horrek guztiak dator diseinu arazo bat behera. Diseinua, ikusiko dugun bezala, ez da guztiz estetika buruz, ez da gauzak nola begiratzen. Hemen ikusten dugu hori, pop-up Hemen pasatxo benetan itxura pretty nice. Itzal bat du atzealdean, gaindiko radiuses egingo du. Pretty mota da. Ez da oso ondo diseinatuta, oso lagungarri ez delako. Txiki datorren pop-up sortu ez du benetan ematen dit edozein informazio zer ari den gertatzen, ez tell me ezer erabiltzailea error hori nola berreskuratu. Gauza diseinua ez dela pentsatu nahi dugu. Lehenik eta behin, ez da estetika. Ere ez da zure aplikazioa Relleno funtzionalitatea alferrikako tona. Oraindik Thai jatetxe bat bada, ez ziurrenik zuk ez, aldi berean, dentista bat izan nahi. Eta Facebook galderak, ez jende askok erabili zuen eta ez zen benetan zer eraikitzen ziren ardatza. Eta beraz, nice da, pentsatzeko, eta ez hainbeste gauza kantitatea ari zaren, zure aplikazioa, baina kalitatea jarriz eta nola erabiltzaile-esperientzia hobea egiten ari zaren benetan zer dagoeneko baduzu gainean hobetzeko. 

Hitz batean, diseinua kontatzen digu zer eraiki behar dugu. Esate baterako, zerbait utzi gauzak bilatzeko gaitu bada eraikitzen ari gara, Google bezala, esate baterako, behar gauzak egiteko modu batean behar duten erabiltzaileak clicks asko hartu nahi dutena, ala ez dugu modu bat, adibidez,, Google Instant edo osaketa automatikotik batera gure emaitzak lortzeko aukera ematen dizu gurekin azkarrago? Ingeniaritza dakar, Tommy erakutsi bezala, benetan eraikitzen. Diseinu mota asko daude. Esate baterako, ari zaren zerbait eraikitzen bada zerbait zabaldu Hirugarren Munduko herrialde non dago, ez da hainbeste elektrizitate edo hainbeste teknologia, zer ari zaren eraikitzeko diseinatu behar duzun modu erraz jendea bertan aukera ematen du. Baina zer gertatzen da diseinu bestelako erabakiak mota agian han egon edo antzeko zerbait parte hartzen duten izan daiteke? Bai. Esku bat ikusten dut. [Inaudible ikasleak-erantzun] Eskuin >>. Hain zuzen ere. Irisgarritasuna gauza bat da. Jende asko ez pentsatu, "Zein da nire erabiltzaile buruz?" espektro bai muturren bezala. Duten erabiltzaileek ezintasunen bat izan dezake, naiz ez dut pentsatzen dut eta besterik ez dut, erabiltzaile orokorra diseinatu pentsatzen. Internet da guztiek eskura gaur egun, eta behar duten pertsonei behar baita diseinatzen. Zer diseinu bestelako erabakiak mota egin dezakezu? Bai. >> [Ikasleak] kostua. Kostua. Oso ona. Gure diseinu erabakiak oinarritzeko genuke beste gauza bat kostua. Oraindik dugun enpresa bat bada, zerbait ez du hartzen duen kostua askoz ere ekoizteko eraiki nahi duzun baina, batez ere kostu handia saldu edo irabazi asmorik gabeko zenbait lor daiteke. 

Hauek diseinu mota desberdin guztiak dira, baina zerbait eraikitzen ari gara Interneten edo zerbait seguruenik ez du kostua askoz eraikitzeko orain eraikitzen ari gara, Internet aplikazio bezala ez duzu askoz hiriburua bota da benetan funtzionatzen duen zerbait egiteko zer gehiago kezkatuta gaude eta erabiltzailearen esperientzia da. Erabiltzaile zentratutako diseinua deitzen diogu. Funtsean erabiltzaile zentratutako diseinua dakar zuek! Zure erabiltzaile oinetakoak. Norbait seinaleak zer naiz eraikitzen bada, jakina, haiekin nire aplikazio jakin etorri kontuan helburu batekin, Zeregin bat osatu nahi dute. Eta zure lana ez da bakarrik zeregin hori bete dezaten baina zeregin hori osatzeko modu eraginkorra da, intuitiboa laguntzeko, eta, pertsona batzuk han esan, eskuragarri. Zer eraginkortasuna esan nahi du? Eraginkortasuna zein azkar esan nahi du nire erabiltzailea ez nire interfaze zeregin bete. Does klik asko leku batetik bestera joateko? Lapurtera al da? Zereginak errepikakor asko egin behar dute? Prozesu hori egin nahi dugu, ahalik eta eraginkor gisa beraz, ez dute gauza mota horiek egiteko. Intuitiveness dagokionez, hau da, esate baterako, erabiltzaile batek begiratuko nire interfaze da erraza leku batetik leku horiek lortzeko? Horiek irudikatu zer egin klik nire interfazean dute erraza da horiek lortu nahi dituzten helburu edo zereginen lortzeko? 

Eta, azkenik, pertsona bat han esan bezala, irisgarritasuna oso garrantzitsua da. [Isilean] dator ikuspegi bezalako gauzak irisgarritasuna, nola diseinatu benetan zerbait norbait da itsu? Oh. Duten pertsonak ezin guztiak ikusi, pantaila irakurgailuak izeneko zerbait egin behar dugu. Zer egin behar duzu zure web modu bat eraiki behar duzu , adibidez, zer dugu deitu, bereziki teknologia - Gauza asko daude gaur egun. Ez dira pantaila izeneko JAWS irakurleak uste dut. Gauza horiek asko fidatu zer deitzen dugun area arauak irakur erabiltzaileari zer den orrian. Dutenek ezin da ikusi nahi izanez gero, ziurtatu behar duzu, pantaila irakurgailuak horiek benetan hautatzeko edukia orrian, eta benetan zure erabiltzaile erakusteko, ezin baduzu ikusi, gutxienez, oraindik dezakezu edukia ulertzen orrian. Bai. Ongi da. Nahikoa da diseinu ona buruz hitz egiten. Dezagun diseinu txarra buruz hitz egin. Hauek dira hori ez da egin behar duzu gauzak. Can Edozeinek tell me beren Craigslist esperientziei buruz eta zer uste dute ez da beraz, diseinua honi buruz? Bai. >> [Ikasleen] ez da gehiegi hitz bat area uste dut. Hitz gehiegi, ezta? Guztiz jasanezinak. Orrialde hau, eta zu gauza sorta oso bat, hemen sortu agurtu agian ez baita axola. Esate baterako, bizi egoera hori ez da gutun honekin hasi. Demagun bizi Texas edo zerbait. 

Orri behera modu guztiak dira kokapena joan behar duzu. Boston from nago, eta, beraz, utzi begiratu Massachusetts me. Non dago Massachusetts? Oh, hemen da. Oh, Boston da. Ongi da. Dezagun Boston begiratu. [Barreak] Pretty jasanezinak, ezta? Han gauza baldar. [Barreak] Demagun bila nabil nonbait bizitzeko. Zenbat pertsona izan dira benetan erabiltzen Craigslist? Zu tona. Modu honetan, baina dezagun begiratu nahiko txarra daude. Zer da img eta pic arteko aldea? Can Edozeinek tell me? Ez dago benetan diferentzia ez da. Zehazki gauza bera esan nahi dute, baina hainbat arrazoiren batengatik horien etiketa dute. Ditu klik egiten baduzu irudia orrian, ez da ezer gertatzen. I actually sakatu Bilatu zerbait gertatuko berriro. Zer hobe baten diseinua egin ahal izango da erabakia bertan izan daiteke? Dut iragazkiak klik eginez bada, ziurrenik nahi dut ekintza jakin iragazi edo kategoria jakin hori. Beraz, Search sakatu berriro izan ordez, besterik gabe, automatikoki izan nuen egin iragazteko sort Google estilo non egiten dute berehala. [Malan] Baina ez eratzen dugu ikusi dugun bezala, beraz, orain arte horiek fisikoki aurkeztu beharreko sakatuz Sartu gutxienez edo botoi bat sakatuz? Ikusi duzun bezala, beraz, orain arte, benetan Bidali gauza horiek egin klik. 

Baina Tommy bigarren bat erakutsiko dizu, egia esan, ez duzu modu hala nola, egin klik gauza automatikoki bidal daiteke AJAX eskaera bat deitu dugu, eta datuak eskuratu eta emaitzak berehala iragazi. Interfaze honekin oker diren gauzak tona daude. [Malan] bilatu Cambridge duzu? Hemen zerbait pixka bat ezohiko non Cambridge buruz zaintzen eta oraindik WESTFORD, Spring Hill, West Newton eta atsegin ari zaren lortzean. Seguruenik, ez da aproposa. >> Seguruenik, ez da aproposa. Nola erabiltzailearen esperientzia hobea egiteko orrian zehatz honetan gai izango naiz? Bai. >> [Ikasleak] jarraibideak. Ongi da. Zer nolako zentzua jarraibideak? [Ikasleak] Esate baterako, lehenengo aldiz duten erabiltzaileek ez dakite zer Craigslist gauza bat edo ez dakit zer egin behar zu. Eskuin. Beraz, zer Craigslist orrialde hau da azaltzeko oso garrantzitsua da. Erabiltzaile kontatu ahal izango dugu benetan zer orrialde hau da, benetan. Dut besterik ez bada bisitatzen, kokaleku sorta oso bat ikusten dut. Ez dakite zer egiten duten esan nahi. Baina are garrantzitsuagoa dena, interfaze honetara begira, gogoratu behera korritzeko gauza tona bereziki komunitate bat aurkitu nahi izan nuen actually dut honi buruz zaintzen ditu. Zer da hori egin izan dut modu azkar? Bai. [Ikasleak] zatituta ekialdean, mendebaldean eskualde sartu. >> Ados. Kategoria zehazteko azkarrago me laguntzeko zatitzea izan dut sartu kokapen jakin hori nola lortu. [Ikasleak] Jarri goitibeherako zerrendan. >> Right. Ongi da. Goitibeherako menu bat erabili dugu gauza finko bat izan dut delako eta erakutsi izan dugu goitibeherako menu batean. Horrela, ez du hartzen hainbeste espazio pantailan. Hala ere, hori baino hobeto, zer egin dezakegu? Bai. >> [Inaudible ikaslearen erantzuna] >> berriro esan duzu hori? >> [Ikasleak] Search box. Bai, bilaketa-koadro bat. Hori handia da. Zer da benetan egin ahal izango dugu, atzera begiratzen dugu diapositibak, bilaketa-kutxa. Autocomplete. Oso erraz egiten diren badakiela emaitzak bidez bilaketa-multzo batean. I BO idazten bada, show me haiei barruan BO duten emaitza guztiak. Horrela, oso erraz aurkitu ahal izango dut joan nahi dut, bereziki ordez hau benetan big zerrenda bidez joan beharrik. 

Hauek dira benetan baxua zintzilik fruta mota guztietako norbait Craigslist ezartzeko benetan egiten asko bere erabiltzaile jakin hobeto web esperientzia egiteko. Ongi da. Nahikoa da webgune txarra buruz hitz egiten. Dezagun Facebook buruz hitz egiteko. Noiz Facebook atera zen, eta, bereziki, Facebook, argazkiak, beste zerbitzu batzuen zehazki egin duten gauza asko gertatu ziren. Zure argazkiak antolatu dute bilduma. Zer egin ahal izango duzu, antolatu ahal izango duzu, multzo baita. Dataren arabera antolatu dezakezu. Bereziki gauza horiek guztiak egin ahal izango duzu. Baina ez edonork jakin zer egin behar Facebook argazkiak kaleratu zen lehertu egin? Bai. >> [Ikasleak] Tags. >> Tags. Hain zuzen ere. Milo, hemen ditugu gure txakur CS50 bandana duten maskota da. Dugula erdian ezaugarri etiketatzeko honetan ikus dezakezu. Eta zer egin Facebook argazkiak hain interesgarria erabilgarritasuna ikuspegitik da, benetan dela onartzen da honen bidez pertsona beren lagunak inplikatzeko eta euren argazkiak. Facebook, bere web-orria da, bereziki gizarte geroztik, gizarte-giro moduko hau eraikitzen da. Argazki esperientzia hobetu askoz gehiago izan ere, benetan delako hasteko esanez, "horiek pertsonen arteko konexioak dira, eta horiek zaintzeko benetan zuri buruzko argazkiak dira. " Taldea ere sort narcissism. Pertsonak gustuko argazkiak eta gauzak horrela dira egunean. Ez den bitartean,, giza ezaugarri ona izan behar da, aldi berean, diseinu ona erabakiak oinarritutako pertsona delako benetan Horrelako gauzak zaintzeko. Beraz, Facebook argazkiak. 

Baina dezagun hitz Facebook, oro har. Ziur naiz jende asko hemen Facebook buruzko iritziak, bai diseinu erabakiak onak eta txarrak diseinu erabakiak. Hargatik Vent edo zoriontsu izan. Goazen. Guztiak erabiltzen Facebook ezagutzen dut. Norbaitek zerbait txarra esan edo zerbait buruz esan izan du. Bai. [Ikasleak] news feed, ez dut benetan axola buruz gauza asko. News feed ez du agian zaintzeko buruzko gauzak asko erakutsi. Facebook-en lagun ez duzu 2 edo 3 urte bete behar duzu eta beren Berri emaitzak leihoa ikusten duzu zure news feed eta ez duzu benetan axola. Facebook benetan hobeto egiteko ahalegina egin du, eta benetan haiekin emaitza push saiatu news feed goiko berandu beraz, gauzak benetan ikusi duzu zuk edo zure lagunen itxi garrantzitsuak diren lagunak. Beste ezer? Bai. [Inaudible ikaslearen erantzuna] >> berriro esan duzu hori? [Ikasleak] iragarkiak nahiko unobtrusive dira. Zer zentzu >>? [Inaudible ikaslearen erantzuna] ez dute pantailan argia, bannerrak bezala. Ongi da. Hori ona da. '90s, Gogoratzen duzu Internet badu - >> [Malan] han izan nintzen. >> Han izan zen. [Barreak] Keinukaria GIFs jatorri, sparkly gauza gogoratu ditzakezu, GeoCities style sort gauzak. Hori ez da benetan ona diseinu adibide bat benetan delako edukia distracting. Atzeko plano gisa GIFs animaziozko bat izatea erabiltzen Yale arte web eta ezin duzu ezer irakurri orrian baina uste dut norbait benetan hitz egin zuen, eta gaur egun pixka bat desberdina da. [Malan] askoz hobea da orain. >> Askoz hobea da gaur egun, ikusi dezakezu bezala. >> [Malan] Oh yeah. Just great, just - Bai. Ongi da. 

Taldea zure web orrialdean ere, seguru asko, oso minimalista eta oso ulergarria egiten da Oso logikoa da, modu bat-fluxua orrian gauzak, beraz, eta ez beste bakoitza modu lortu. Zer beste gauza mota dira Facebook buruz ona edo Facebook buruz txarra? Dezagun diseinu-elkarrizketa bat besterik ez hemen. Oh. Non? Bai. [Ikasleen] Timeline sistema berriak aukera ematen die bere iragana pertsonaren profila bilaketa. Ooh, Timeline. Timeline gauza handia da aukera dago stalk zure lagunak dituelako itzuli ziren eskola altua dute. Timeline ona da, eduki asko azkarrago bidez iragazi duzulako aukera dago, gauzak bestela izango litzateke hartu duzu benetan luze bat aurkitzeko aukera dago besterik ez sortu korritu eta behera, gora, gora, gora, gora, gora, denboran atzera joan. Baina orduan ere ez da txar baten ordena erabiltzailearen esperientzia dagokionez. Zer egin liteke hori? Big hitza, P-R batekin hasten da. >> [Ikasleak] Privacy. >> Privacy, ezta? Pribatutasuna erabiltzailearen esperientzia arazoa handi bat da. Facebook gehien gorroto dut gauza bat da. [Barreak] [Malan] bezala egin behar dut orain. David ez da konturatzen hau benetan atzo arte gertatu. Beraz, orain denbora guztietan zion chat dut ezagutzen dut, baina me jaramonik ez daki. [Malan] parte awkward zen benetan nintzen hura ez ikusi egin zaio, eta ez nekien zion jaramonik ez zen I bazekielako. [Barreak] Pribatutasuna arazoren bat erraldoia da. Can Edozeinek tell me zer Facebook pribatutasun buruz txarra izan daiteke Izan ere, gauza hau atsegin dute ez dutela gain? Zer da Facebook pribatutasun aldean bereziki gogorra al da? Sort hori galdera bat da liderra. Bai. >> [Ikasleak] Ezkutatu zure argazkiak zenbait pertsona. Eskuin. Zehazki, pertsona batzuk zure argazkiak ezkutatzeko. Txiki hau, apur botoia dute eskubidea goiko uzten argazki bat pribatutasuna txandakatzeko. Haien pribatutasun aukerak menuak mota desberdinen artean oso desberdina da. 

Ahaztuak dut asko hobeto buruz duela gutxi, baina kasua izan bakoitzean nahi duzun zure lagunak argazkiak ikusteko saihesteko, bezala 5 urratseko prozesua oso zaila bidez joan nahi duzun, utzi egin klik esteka honetan me, berriro sakatu me utzi, berriro sakatu me utzi, utzi duen pertsona ezin ikusi nire argazkiak zehaztu. Hori ez da bereziki Facebook-en parte on erabiltzailearen esperientzia askoz benetan delako askatasuna emanez jendeak ikusi ahal kontrolatzeko. Hau erabiltzaile-kontrol eta askatasuna deitzen diogu. Ez bazara dezazun zure erabiltzaile do modu eraginkorra da eta intuitiboa da, gero, zure erabiltzaile-esperientzia ez da benetan handia duten guztiak.  Nahi al duzu guys Facebook buruzko ezer esan behar? Nola biratu I off hau? [Ong] desaktibatu honetan ezin duzu, eta hori Facebook zati handi erabilgarritasuna flaw da. Ezaugarri honek horretan begiratu dut benetan atzo bai da ezin duzula egin edo lurperatuta nonbait oso, oso sakona Facebook recesses ez delako irudikatu funtzionalitate hau desgaitzeko. [Malan] Baina batzuetan erabaki horiek ez dira begi-bistakoa you guys eman delako feedback erabilgarria asko CS50 hainbat aplikazio eta webgune ikastaro erabiltzen duen. Ez dugu inplementatu eskaerak eta iradokizunak horiek guztiak. 

Horren zati bat, hainbeste eskaerak lortzeko denboraren funtzio bat dela, baina batzuetan besterik ez dugu erabaki kontziente bat, hala nola "Eskerrik asko iradokizun, baina ados ez". Beraz, nola egin erabakitzeko benetan zer egin behar duzu zure erabiltzaile uste zerbait egin behar baduzu nahiz eta ez duzu nahitaez? Benetan zure erabiltzaileek esaten dutena entzuten arteko oreka fin bat da eta, benetan, lerro moduko bat izatea non esaten da, "Ez dugu erabiltzaile horiek esaten dutena egin behar du." Eta, batez ere, ez zen Henry Ford aurrekontu honen batzen nahiko ongi uste dut. "Nuen jendeak eskatu bada, zer nahi, esan zuten azkarrago zaldiak nahi dute." Ezin inor ordenatzeko tease gain aurrekontua benetan esan nahi du? Ez da besterik gabe erabiltzaile jakin zer nahi duten, baina gehiago da [Ikasleen] ez dakite zer da posible. Zati batean, ez dakite zer den posible. Tease gain, pixka bat gehiago. Zer esan nahi duzu? [Inaudible ikaslearen erantzuna] Hori ona da. Zer uste dut hemen esan nahi saiatzen ari gara, jendeak jakin zer nahi duten. Azkarrago zaldiak nahi dute. Zer nahi dute azkarrago mugitzeko gaitasuna da, baina ez dute benetan ertain ezagutzen horren bidez lortu duten. Noiz zure erabiltzaile duzu, eta zure erabiltzaile kontatzeko zerbait eta esango dute, "ezaugarri horiek eta ezaugarri horiek eta ezaugarri horiek nahi dugu" ez duzu nahi derrigorrez pentsatu, "aurrera me "Ezartzeko, eta zer esan esplizituki dute," baina zer pentsatu nahi duzu, "Zer da ideiak sort eskuratu dut?" Zer nahi dute benetan? 

Eta hortik aurrera zer egin dezakezu eskaerak horiek betetzen dituen zerbait diseinatzea da baina ez derrigorrez erabiltzaileari, espero pozik dira. Beraz, proiektu final antzeko zerbait, termino oso errealak, heuristiko bat erabilgarria orduan zerbait egiten, hobeto, batez ere, diseinatzaile harrokeria hau berari buruz horren bidez jakin sort zer da onena, sarrera iraun dezake zure erabiltzaile baina nola egiten feedback hori lortzeko benetan? Azken proiektuak, zehazki, zer emaitza ekoizten optimoa hemen? Zer emaitzak optimoa sortzen ditu, eta horren gainean joango naiz segundo bat eta, ondoren, garatzen, probatzen eta ondoren errepikatzean prozesu hau. Zer esan nahi probak izan ohi da zerbait diseinatzea dela uste duzu, nahiko ona da, hala nola, "hain handia diseinatzaile naiz. Edonork hau maite du." Eta, ondoren, jarri duzu eta jendeak ez benetan nahi arrazoi batzuk. Zer egin behar duzun gauza pertsona bezala zatiak hartu behar duzu eta revamp gauza jendeak ez dut gogoko. Soinuak prozesu oso begi-bistakoa den bezala, baina prozesu hau etengabe errepikatzean Jadanik eraikitako gainean laguntzen duen prozesu bat da ez bakarrik birfin zure diseinua gaitasunak, baina, aldi berean, diseinu hobetzeko laguntzen beraz, benetan eskertzen zure produktua are gehiago egin baino lehenago. 

Dut zer benetan egin dezakezu adibide zehatzak. Produktu baten azken adibide bat sort bezala, dezagun KAYAK begiratu. KAYAK atera da oso, oso ezaguna izan zen. Ezin edonork asmatzen zergatik? Zer dira gauza mota honi buruz nahi duzu erabiltzen bada edo zer ez duzun gustatzen gauzak ordenatzen dira? Bai. >> [Inaudible ikaslearen erantzuna] >> Ados. Zati bat da, erabiltzaileak kontsulta bat gehiago hedapen dezazun bat oso murriztaileak bezala baino, "hasiera data jaso behar duzu "Eta zure amaiera data jaso behar duzu." Izan ere, horri buruz malgua izango duzu aukera ematen du, eta ematen du barruti horretan hegaldi guztiak. Beste ezer? [Ikasleak] prezioan kuotak ere. Sartzen prezioan tasak egiten dute. Zergak eta gauzak benetan joan zuzenean prezio horretan goiko ezkerreko beraz, ez zaude pentsatzen benetan ari zaren bat $ 240 hegaldi ordaindu sartu tricked benetan da $ 330. Beste ezer? Bai. [Inaudible ikaslearen erantzuna] Ez nago ziur benetan utzi egiten duzu. Oker dezake. Hori da gauza bat interesgarria izan daiteke, pisu gehiago jarri nahi duzun jakin iragazkiak beraz, bultzatzen dute goiko iragazkiak zerikusia duten emaitzak. Baina edozein tell me zer da hau ezkerraldean berezia? Nola ez begiratu tradizionalki nahi izanez gero, Interneteko zerbitzu bat hegaldi bat aurretik? 

Bai. >> [Inaudible ikaslearen erantzuna] >> Ezin esan - [Ikasleen] airline bakoitzak. >> Bai. Airline bakoitzak bere webgunea du. Honek gauzak sendotu. Eta? [Ikasleen] Badakizu zehazki zer denbora utziz zaren. Dakit zehazki zer denbora utziz ari zaren ez duzu, baina, bereziki, iragazkiak lotuta daude. Tira me KAYAK. Oh Jainkoa, pop-ups. Bad user esperientzia. Zer gertatzen da graduatzailea hau mugitzeko I? [Ikasleak] Eguneratze automatik. >> [Ong] Automatic eguneratzeak. Zerbait hori oso garrantzitsua da. Horren aurretik, betiere hegaldi bat begiratu nahi duzun, zure sarrera kokapena, zure irteera kokapena, sakatu Search jarri izan duzu, prozesatu eta emaitzak erakusteko. Nahi duzun zure kontsulta aldatu nahi izanez gero, sakatu bi aldiz nahi duzun, hutsetik kontsulta berri bat sartu da, eta ondoren egin behin eta berriro. Honen antzeko zerbait buruz gauza polita da, oso [ulertezina] gauza erabiltzen du erdi-erdian. Honen antzeko zerbait egin nahi duzu bakoitzean, eskaera bat off filmatzen eta itzultzen du emaitzak berehala. Berehalako feedback moduko zerbait egin KAYAK itzeleko popular da oso erraza delako me besterik ez aldatu nire kontsulta eta irudikatu barruti jakin baten inguruan dauden gauzak atzera eta aurrera joan, atzera eta aurrera, atzera eta aurrera ibili beharrik izan gabe. Horiek zure web diseinatzen ari zaren pentsatu nahi duzun gauza mota guztiak dira. Nola eraginkorra oso egin dut nire erabiltzaile bidez edozein izanda ere lanean ari dira eta bere balizko helburu lortzeko azkar ahalik eta? [Malan] Eta Jose puntu lehenago erabiltzaile ez du zertan zer nahi duten jakitea, oinarritutako duzuna guys HTML buruz jakin eta kontrol-laukiak, irrati-botoiak, hautatu menuak, sarrera eremuak eta atsegin duzu, nola Irteeran denbora hegaldi bat aukeratzea ideia ezartzeko duzu? 

UI hainbat mekanismo horiek zein erabili nahi duzun? HTML zenbatekoa irakasten izan zen aurretik besterik ez badakizu eta badakizu inputak dira, irrati-botoiak, kontrol-laukiak, jaitsiera-gorabeherak, eta sarrera-koadroa, zer egingo zenuke zure natural aukera datak biltzea izan da? [Ikasleak] Input. >> Input. Edo agian drop-down datak, ezta? Beraz, UI hau atsegin mekanismo konplexuagoa ezkerraldean ditzakezun ezartzea, prozesu hau askoz ere intuitiboagoa dezakezu graduatzailea denbora etengabeko delako, eta jendea, oro har, ez du uste zatiak diskretuen dagokienez. Guztiak eskubidea. Azken gauza. Ten erabilgarritasuna heuristics. Hitz egin dugu gauza guztiak ziurrenik kategoria horietako bat pean erori. Esteka horretan, argitaratu egingo da online guneak joaten bazara, benetan ahal izango duzu, diseinatu zure gune gisa, mantendu heuristics hauek kontuan eta thumb arau horiek. Zure proiektuak, zer egin duzu iradokitzen dut zure aplikazioa hobea diseinatzeko da lehen paper prototyping egin. Zure eskaera buruz ari zaren pentsatzen, oso azkar zirriborroa zer itxura bezala nahi duzun eta ziurtatu kaxak guztiak modu bat da, erabiltzaileak erabili oso intuitiboa antolatuta eta, are gehiago erakutsi paper prototipoak horiek zure lagunei eta foku talde hasteko. Eginzazu 2 edo 3 pertsona elkartu eta eskatu besterik ez paper prototipoak horiek sakatu, eta horien berri pantailetan benetan dute ulertzen zer ari den gertatzen. 

Zer egin nahi duzu ataza bat emateko, motibatzea zeregin horretan, eta emateko aplikazioa eta dezagun erabiltzen. Ez haratago argibideak emateko. Benetan utzi zure aplikazioarekin elkarreragin horiek aukera ematen dizu ikusteko modu bat nahi duzu nola erabili zuten ziren ez baduzu, haien ondoan zutik. Eta hori oso garrantzitsua da. Hau ikuspegi asko emango dizu eta pertsonak dira, bereziki inguruan gauza lortzean modu bat, baina ez dut nahi horiek? Erabiltzen ari UI mekanismo jakin dute pantaila modu batean hacky mota da? Ez nuen egin nahi ditu, era horretan. Eta behin egiten ari, zer egin nahi duzu? Zure diseinua arroka, ezta? Zer egin nahi duzun da, garatu eta, ondoren, egin prozesu hori berriro nahi duzun. Beraz, erakutsi lagunei duzun garatutako behin, probatu, garatzea, probatu, garatu, probatu, batetik bestera joateko, eta aurrera. Diseinu oso-etorriko prozesu Zentzu honetan. Benetan zerbait eraikitzeko eta, ondoren, konturatzen gauza ez duzula aurretik konturatu eta atzera bueltatu eta horretatik aurrera hobetzeko. Orain, garapen parte gisa, zer da Tommy erakusteko break ondoren eta nola osaketa automatikotik antzeko zerbait ezartzeko ahal izango duzu agian modu bat da, nahiko erraza da. [Malan] bezala Tommy du hemen, galdera bat ondoren. A goiztiarrena webgune asko, eta Joseph esan 1990eko hamarkadako estilo web, inplementazio non nahi duzun Irteeran denbora bat aukeratu nahi izanez gero, eta amaiera-ordua bat izan zen, Egia, eguna eta gaur egun, nahiz eta webgune batzuk Horretarako ordubete hautatzeko bat goitibeherako minutu hautatzeko goitibeherako, agian AM aukeratzen duzu, PM, eta, ondoren, 3 gehiago aldiz egin duzu. Eta beraz, 6 clicks eta agian scrolling batzuk benetan, zure erabiltzaile-data eta / edo denbora-bitartea Zentzu honetan nolabaiteko ematen. 

Beraz, behin betiko hoberenak ez diren eta oraindik, beraz, orain arte ikusi dugu espresiboa gaitasunik ez edozein hizkuntza begiratu dugu zerbait sexier hasiera-ordua eta amaiera-ordua graduatzailea hau atsegin dute. Baina uste itzuliz gero hitz Scratch gara aste 0 han ere ez ziren widgets bakarrik egin zenbait gauza. Besterik ez duzu benetan izan loops eta egoerak eta antzekoak bezalako oinarri horiek. Besterik ez oso abstraktuan pentsatzen gaur egun, HTML partikularren independentea mota Beraz, zer da benetan hau hasiera-ordua eta amaiera-ordua graduatzailea antzeko zerbait gertatzen da? Noiz dut nire sagua eta egin klik azenarioa txiki ikurra duten I Ezkerraldean eta hasi arrastatuz, programazioaren, zer da inplementatzeko gai izan nahi duzun gertatzen? Zein da galdera, zer adierazpen boolearrak ez eskatu gai izan nahi duzu? Zer da benetan gertatzen ari da? Sammy? [Ikasleen] Non kurtsorearen posizioa? >> Good. Non kurtsorearen posizioa da? Hau zen zerbait atzera adierazteko Scratch behar dugu, kokapena edo are kolore edo antzeko oinarritzen zen ala ez. Gogoratzen al duzu inoiz dezake, beraz, labur-labur, astelehena, ez ziren gauza horiek guztiak deitu gertaerak Web munduan, eta beraz, ez da OnClick eta onkeypress bezalako gauzak eta onkeyup eta onmouseover eta onmouseout. Beraz, gauza horiek ere izan ditugu hartu konturatzen webean ematen Facebook eta Gmail bezalako guneak, nahiz eta ideia ez duzu nola, seguru asko, nahi duzun ezartzeko ere bezalako ezer hitzaldia edo Arazoa Ezarri 7, konturatzen, horien zehatza oinarriak HTTP eta parametro eta GET eta POST, HTML oinarrizko inputak ditudan dugu, beraz, oso urrun begiratu eta programazioko mekanismoak une batean Tommy hori buruz aurkeztu zeure burua adierazteko bezala egin aste 0 hasten zara Oso eta intuizioa, arrastatu eta jaregiten. 

Beraz, esan, Tommy MacWilliam, eta batzuk Gurekin puzzle pieza berriak Web. Guztiak eskubidea. Nire izena Tommy eta JavaScript buruz hitz egiten dut. Just disclaimer: I am iritzia JavaScript onena programazio hizkuntza mundu osoa. Nirekin ados ez duten pertsonak asko daude, baina besterik ez amazing da. Behin atzera joan C, C klase bat edo beste hizkuntza batzuk idazteko bada, besterik ez, behe-mailako xehetasun guztiak duzu benetan frustrating bogged to get sartu da Beraz, inoiz zaren gogaikarriak C idatzi triste sentitzen, bakarrik, JavaScript batzuk idatzi. Nirvana da. Sentitzen askoz hobea izango duzu zure egun txarra. JavaScript magia asko bat dator bere gauzak manipulatzeko gaitasuna dagoeneko orrian. Gure scripts PHP idatzi dugu, zerbitzariak exekutatu ziren, eta, azkenik, PHP script ziurrenik bistaratu HTML batzuk. HTML zen bezeroari bidaliko da, eta, ondoren, hori izan da. PHP nahi botoi bat gehitzeko orri bat bada, esate baterako, ezin benetan egin dela. Osoa berria HTML fitxategia errendatu, eta bidali nabigatzailea litzateke. Ikusteko Javascript-a gauza garela eguneratu ahal izango dira, dagoeneko, berriz, orrian badakigu, eta honen baita askoz ere berehalako iritzia eman ahal izango dugu, Benetan hobetzen erabiltzaileari gure web orrian esperientzia. JavaScript selectors Just laburpena azkar bat. HTML orri bat deskargatu dugu ezagutzen dugu, DOM en irudikatzen den joan. 

DOM gogoan besterik ez Zuhaitz handi hau, non elementu handi horren hierarkia zerikusia duten da. Datu-base batekin lan egin dugu pset 7 nola egin jakin behar dugu lehen gauza bat da datu-basea kontsultatzeko. Erabiltzaile handi horren taula ditugu, eta, batzuetan, esan nahi dugu, "Nahi dut soilik bat egiten duten erabiltzaile horiek baldintza batzuk batzuk." Era berean, DOM dugu da neurketako modu bat behar dugu. Esaten nolabait behar dugu, "itxura hau botoiak guztiak nahi dut "Edo orrian irudi guztiak." Eta selectors hauek onartzea egiten digu. Beraz, azkar laburpena. Hau lehen hemen, hau # aurkeztu, zer da hori hautatu? Does Edozeinek gogoratzen? [Inaudible ikaslearen erantzuna] >> Bai, zehazki. Elementu bat hautatu aurkeztu ID bat orrialdean. Eta, beraz, hash tag dioen hautatzaileak hori IDak batera lan egingo da. Nola bigarren buruz, hau zentratua, zer egingo du hautatu? Bai. >> [Ikasleak] Class. >> Zehazki. Hau da, gaur egun klase aukeratzeko. ID arteko ezberdintasuna eta klase Hemen ID bakarra izan behar da, oro har, edozein espazio barruan baino gehiago ari zara bilatzen. Beraz, bada zinen web orri oso bat bilatzen, behar duzula soilik 1 elementu batzuk ID, eta, beraz, aurkeztu kasu honetan. Klase batera, beste alde batetik, elementu 1 baino gehiago izan dezakegu orri berean klase berean. Hau oso erabilgarria izan daiteke orrian zentratua guztia hautatu nahi dut esaten baino 1 gauza. 

Eta, azkenik, azken bat hemen pixka bat zailagoa da, baina zer da hau DOM, aukeratu? [Inaudible ikaslearen erantzuna] >> Zer da hori? [Ikasleak] Anything Etiketa bat. >> 2 zati izan dugu hemen. Bigarren zatian tags horiek input etiketa bat hautatu nahi dut esan, beraz edozein elementu sarrera tag bat da. Baina ez dut nahi hautatu input guztiak submit botoi bat antzeko zerbait sarrera bat izan baitezake eta sarrera bat testu-koadro bat antzeko zerbait izan daiteke. Beraz, hauek karratu parentesi artean esaten dut nahi bakarrik I elementu horiek hautatzeko mota testuaren dira. Somewhere nire tag HTML mota izeneko atributu bat daukat, eta atributu horren balioa testua izan behar du. Beraz, lehen zati honetan nola hemen? Hautatzaileak hau lehen hitza inprimakia da, gero espazio bat daukat, eta, ondoren, sarrerako zati honetan. Zer esan nahi du horretarako, inprimaki aurrean ipintzeko? Hau da, funtsean, gure kontsulta egingo mugatzeko. Orrian input batzuk ditugu kasuan izan daiteke ez direla ondorengo formulario bat. Zer da hau? Egingo da, hau esan nahi dut soilik sarrera tags nonbait haien gainean formulario bat elementu gurasoa batzuk. Eta beraz, modu honetan kontsulta hierarkiko hauek egin ahal izango dugu beraz, ez dugu guztia eman hautatzaileak bat datozen aukeratzeko. Muga, esparrua kontsulta horren beste zerbait mota dugu. Beraz, gaur egun ezagutzen dugun orrian nola elementuak hautatzeko, dezagun pixka bat AJAX buruz hitz egin. AJAX JavaScript eta XML asinkronoak dago oraindik oso modan akronimoa da. Beraz, zerbait gertatzen da XML nolabait datuak irudikatzeko. 

Hori ospea galdu mota duela gutxi, eta, beraz, AJAX X ez da denbora guztian. Funtsean, zer aukera ematen AJAX egin gurekin HTTP eskaerak egin da JavaScript testuinguruan. Oraindik gure web nabigatzailea dugu, eta orri ingurukoa nabigatzen ari gara eta esteka batean klik gara, zer da gure nabigatzailean egingo da edozein dela ere link dugu sakatu HTTP eskaera bat egiteko. Baina hori ez da beti ideal hori balitz, orduan delako gisa David zen esaten, izan dugu beti erabiltzaile sakatu Bidali botoia edo egin klik esteka bat egiteko ezer gertatuko den HTTP eskaera bat inplikatzeko. Beraz, AJAX eskaera horiek egin ahal izango dugu JavaScript izenean. Horrek esan nahi du, betiere, erabiltzaileak orri edo ezer gertatzen elkarreraginean, benetan PHP fitxategi batzuen programazioko eskaera bat egin ahal izango dugu, gure web-orrian edo beste ezer eta fitxategi hori spits izarrekin datuak berreskuratzeko. Dezagun AJAX adibide bat begirada bat. Hau da gure CS50 Ogasun Orrialdearen espero duten batzuk ezagunak. Orri honen HTML begiratzen badiogu, hemen ikusten ditudan gauza batzuk gehitu eta horietako batek eman dut inprimaki honetan ID bat. Esan dut id = "inprimaki-aurrekontua". Hau egin dut besterik ez delako, hau pixka bat errazagoa hautatu DOM, joan dut, oso erraza da kontsulta bat egin. Zer da hemen egin nahi dut CS50 Ogasun arazo batzuk konpondu nahi dut. Beraz, bada, joan finance.cs50.net dugu, Aurrekontu bat lortu nahi dut, aldi bakoitzean Get Quote botoia sakatu behar dut, Get Quote botoia, ondoren, beste orrialde osoa hartzen du me. Eta nahi dut aurrekontua beste, 'Atzera' botoia sakatu behar dut, eta, ondoren, idatzi dut, Aurrekontu bat lortu dut, eta Atzera botoia sakatu dut. Benetan ez da erabiltzaile esperientzia onena. Zeini benetan erabili gune motela hori bada stock prezioak lortzeko? Beraz, zer AJAX egin nahi dugu, aparteko orri bat joan urrats hori kendu da ordena emaitzak ikusteko. 

Benetan ari gara bakarrik eskatzen da, oso prezio txikian, eta hori datu zenbatekoa benetan txiki bat. Beraz, ez dago niretzat beste orri osoa HTML joan beharra, HTML batch berri osoa deskargatu, agian zenbait irudi gehiago deskargatzeko, batzuen CSS fitxategiak oso erraza da galdera horri erantzuteko zenbat stock kostua honek. AJAX egiteko asko errazagoa dezakegu. Behera ikusten dugu hemen nago I izeneko quote.js JavaScript fitxategi batean lotzen dituen. Dezagun benetan ireki fitxategi hori. Ez dago han. Nire JavaScript fitxategi guztiak HTML kokatuko beraz, web arakatzailea sar daitezke. Ondoren, bereizi bat direktorioa hemen JavaScript dugu, eta, orain, hemen quote.js da. Fitxategi honen goialdean dio hemen orri osoa itxaron kargatu behar nahi dut dut ezer egin saiatu aurretik. Zergatik da beharrezkoa? Bihurtzen da hemen egin behar dut hurrengo gauza Irteeran elementu baten bila hautatzaileak batzuk etortzeko. Ikusteko Javascript-a hau da, inoiz bada exekutatu elementu honen orrian kargatu aurretik, ondoren, egiten saiatzen naiz guztia ez da lanera joan naiz zerbait ez da oraindik aukeratu saiatuko delako. Beraz, goiko sortu line dio dena kargatu arte itxaron nahi dut beraz, bermatuta edozein elementu bila nabil gaude dira benetan orrian. Honek dolarraren ikurra izeneko liburutegia jQuery erabiltzen dut hemen esan nahi du. JQuery Liburutegi hau selectors hauek besterik ez dugu begiratu erabiltzeko aukera ematen digu. $ Esanez gero in pasatzen argumentu gisa # Inprimaki-aurrekontua, Dut orain modu bat hautatzen da, besterik ez dugun begirada bat hartu. Orain dela memoria inprimaki nolabait ordezkaritza bat daukat. 

Objektu honen On orain, inprimakia ordezkaritza honetan, Izeneko funtzio bat erabiltzen dut. Zein da funtzio hau ez da gertaera kudeatzailea bat erantsi da. Ari garen gertaera entzun submit gertaera da. Beraz, user clicks Bidali botoia edo prentsak Sartu gertaera hau da sua. Honetan sartu Pribatutasun By, gaur egun ezin dut Inprimaki portaera lehenetsia gainidatzi. Ikusteko Javascript-a hori gabe, inprimakia bidaltzeko edozein PHP fitxategia ekintza atributu hori erabili dugu. Baina, horren ordez, gaur egun dut, esaten itxaron, itxaron, itxaron, ez dut benetan hori egin nahi. Joan aurretik eta saiatu PHP fitxategi batzuk aurkeztu gertatuko nahi dut. Orain zer egin nahi dut? Puntu honetan AJAX erabili, nolabait, zer da salda prezioa kargatu nahi dut. Lehenik eta behin, jakin behar dut zer stock erabiltzaileari begira. Naiz dela I hautatzaileak bat erabiltzeko egiteko. Hirugarren hautatzaileak begiratu aurretik dugu. Dio hasiko inprimaki elementu hau forma-quote ID bat nahi dut. Ondoren, nonbait, formulario horren barruan ez du sarrera-elementu bat izan sinbolo-izen bat dauka. Atzera begiratzen dugu gure HTML bada, izan dugun sarrera bat ikusi genuen [name = ikurra]. Horrek esan nahi du, hori testu-koadroan hautatu erabiltzaileak idazten da sartu. Hori polita da. Testu-koadroan ditugu. Orain barruan jakin behar dugu. Metodo hau deitu ahal dugun hemen egiteko. Val, eta hau dio ezagutzen dut zer testu-koadroan duzu. Esango dizu zer da testu-kutxa horretan idatzitako erabiltzaile nahi dut. Izeneko kate bat sinboloa da, edozein erabiltzaileak idatzitako sartu berdina dugu orain Hori polita da. Kate hori erabili ahal izango dugu, gaur egun, gure eskaera egiteko. Funtzio berri bat da hemen, hau $ ari izan ezik, ez da aukera elementu joan deituz funtzio gurekin jQuery by goaz. AJAX funtzioa hau da, zer benetan HTTP eskaera hau egiteko. Beraz, kontatzeko gauza gutxi izan dugu. Funtzio hau esan behar dugu lehen gauza bat da, non eskaera joan nahi dut. Nire proiektua Somewhere izeneko quote.php direktorioa HTML fitxategi hau behar dut barruan. Fitxategi honetan sartu ahal izango dut, ikusi dugu hau atsegin dute, localhost / quote.php I joan bada. 

Nire JavaScript orri horretako eskaera bat egin nahi izan dut. Zer mota eskaera orain? Aurretik metodoa = "post" atributua ikusi dugu, eta horrek esan nahi du POST eskaera bat egin da, beraz, ez da ezer URLa jarri behar, baizik eta GET eskaera bat baino zein besterik ez da tiro besterik ez dugu accessed orria web nabigatzailearen bidez, esate baterako. Orain esan dugu HTTP POST eskaera bat egin nahi dut quote.php dago orri bat. Inprimakia aurkeztu dugu, gogoratu formulario horren barruan elementu sarrera eskuratu ahal izan genuen hori $ Bi_dali aldagaia. Istorioa Orain arte ez dugu benetan edozein datu batera bidaltzen oraindik. Besterik ez dugu esan AJAX eskaera bat egiten ari gara eta hemen egiten ari garen eskaera mota. Orain benetan datu batzuk orrialde behar dugu. Izeneko datuak jabetza hori erabili egin daiteke. Elkartze-array bat jabetza honen balioa da benetan. Horren arrazoia da 1 datu-pieza baino gehiago bidali digu. Hori zergatik kizkur giltza horiek hemen beste giltza kizkur horiek barruan habiaratu dugu. Elkartze-array horiek gakoak dira gauza bera izango Izen horiek gure inprimaki elementu atributu gisa. Horrek esan nahi du, sinboloa gako bat zehar dut mezu gero, horrek esan nahi du nire PHP $ Bi_dali [sinboloa] datuak honetan sartu ahal izango da formulario bat aurretik genuen bezala egin dugu. Eta orain benetako datuak bidali nahi dugu elkartze-array honen barruan balio izango du. 

Testu hau gorde dugu izeneko aldagaia sinbolo bat, eta, beraz, batera ari gara bidaltzeko gaur egun sinbolo gako bat eta edozein erabiltzaileak idatzitako sartu balio bat Orain HTTP eskaera hau egin dugu, gure PHP fitxategia exekutatu. eta datu batzuk bidaltzeko bezeroaren eskaera hau egin dute. Orain, edozein zerbitzariak esan digu erantzun behar dugu. Dugun azken jabetza hemen izeneko arrakasta. Arrakastaren gakoa honen balioa da benetan funtzio bat izango da. eta hau JavaScript egin dezakezu gauza benetan cool bat da. Ez bakarrik ints edo array duzu elkartze-array baten barruan balio gisa, funtzio bat ere izan dezakegu. Beraz, arrakasta esanez, hau da nire gakoa. Colon A dio balioa dator, eta, gaur egun, honen balioa, funtzio bat da, benetan. Beraz, ez dugu behar Funtzio hau berez izen bat eman. Bakarrik esan dezakegu, hau da, funtzio batzuk izango. Argumentu 1 hartzen da. Funtzio hau argumentua izango da edozein zerbitzariak bidali digu atzera eskaera. Just gure arakatzailearen eskaera bat egiten duenean, zerbitzariak bidaltzen zerbait itzuli eta nabigatzaileak erakusten du, AJAX testuinguruan eskaera bat egin besterik ez dugu, zerbitzariak bidalitako zerbait itzuli eta orain dela kate gisa irudikatzen dugu. Kate hori duen besterik ez nuke hori erakutsi orrian. Naiz dela I azkena hautatzaileak egiteko. ID prezioa elementu aukeratu nahi dut. Huts bat besterik ez da div orrian sortu dudan, , eta edozein zerbitzariak bidali digu atzera div duten edukiak ezarri nahi dut. Benetan Nik aldaketa quote.php pixka bat. 

Beharrean render deituz eta orri batzuk bihurtzean baino, quote.php besterik ez da inprimatu salda balioa kate gisa. Beraz, benetan orria bisitatu, besterik ez litzateke ikusiko duzu katea txikia edozein stock prezioa da. One azken gauza hemen egin behar dugu besterik ez da ziurtatu funtzio hau faltsua itzultzen. Zer da hau dio naiz event handler baten barruan gertatzen bada, event handler itzultzen faltsua egia itzuli ordez, horrek esan nahi du, ez, ez dut nahi jatorrizko gertaera sua. Kasu honetan, ez dugu Ikusteko Javascript-a ez bada edozein eta formulario bat aurkeztu dugu, gure web nabigatzailea da, esan nahi du "datu horiek batera bidali dut," eta beste orri batean bidal ari dira. Ari gara AJAX erabiltzen delako gaur egun, ez da beharrezkoa erabiltzaileak beste orri batean bidaltzeko. Ari gara emaitzak erakutsi ditu orri berean. Ez benetan ez dugu nahi edozein lekutan horiek, eta orri berean jarraitu nahi dut. Beraz, faltsuak itzuli, inprimakia ez du gaituen ziurtatzeko dugu. Ikus dezagun zer den hori benetan itxura begirada bat. Gure aurrekontua itxura bera. Tira me inspector behera hemen zer egingo dugu ikus ahal izateko. Egin erraldoi apur bat gutxiago. Gogoratu ireki dugu Network fitxan, hau da, non HTTP eskaeren guztiak ikusi ahal izango dugu orrian gertatzen diren. 

Sinbolo bat idatzi aapl me eta egin klik Talde Quote utzi. Orain Apple-kuota bat dolar zenbaki batzuk prezioa ikusi genuen. orrian agertu zen,, baina URL ez da aldatu guztietan. Izan ere, hemen da HTTP eskaera besterik ez dugu. POST eskaera bat egin dugu quote.php. Hori zentzua. Hau da, zerbitzariak bidali digu atzera. Jada ez da HTML dokumentu erraldoi honen irudi eta horrelako gauzak, testu lerro bat besterik ez da, eta, ondoren, bistaratuko besterik ez dugu testu-lerroa. Joaten gara goiburuak itzuliz gero eta ikusi zer HTTP eskaera honen barruan benetan bidaliko dugu, ikus dezakegu hemen, sinboloa eta aapl balioa gako bat batera bidaliko dugun, hau da, erabiltzaileak idatzi sartu Hau atsegina da, baina oraindik apur bat gogaikarriak. Stock quote egin klik botoi honetan. Lanpetuta pertsona gara eta ez dugu denbora botoiak sakatu. Google konturatu apur bat duela, berriz, Google Instant jarri du martxan. Zer da Google Instant ez da ari zaren idazten gisa hasten besterik ez da zuretzat emaitzak bistaratzeko beraz, ez duzu are Search klik eginez kezkatu. Egia esan, fun-istorio bat zerikusia. Google Instant atera ondoren, jendea, bezalakoak ziren: "Tira, hau da, super amazing." "Hau da, beraz, cool". Eta ikaslea behera Stanford duten 19 izan zen, garai hartan egin YouTube Instant izeneko gune honetan. YouTube Instant guztiak ez da modu eraginkorrean bilatzeko YouTube berehala. Beraz, baizik eta YouTube.com hit Search joan beharrik baino, YouTube Instant zerbait sartu idazten hasi nuen CS50 bezala, Hemen ikus genezake dela Internet konexio motela saiatu populatu emaitza horiek bizi. Benetan egin ahal izango dugu, gure quote.js fitxategia aldatzeko oso sinple bat egiteko. Oraintxe gertaera hau eransten ari gara inprimakia aurkeztu. Ez dugu benetan nahi erabiltzaileari aurkezteko inprimaki hori gehiago egiteko, beraz ordez su gertaera hau erabiltzaileak tekla bat sakatzen den bakoitzean. Let lehen aldatzen diren gertaera keyup submit egiteko. Horrek esan nahi du, baizik eta inprimakia bidaltzeko zain baino, aldi bakoitzean tekla sakatzen da, zerbait gertatuko da. Jada ez da erantzule egiten eta ez du zentzurik keyup gertaera hau erantsi Inprimaki osoa. Benetan dugu bakarrik bilaketa-kutxa horri buruzko zaintzeko. 

Gaur egun, hau aldatu ahal izango ahal izango dugu, eta ez forma-aurrekontua baino hautatzeko, inprimaki-aurrekontua eta sarrera bat izan dugu (idatzi = text), edo esatea (izendatu = sinboloa) genezake edozein dela ere nahi dugu. Gaur egun, azken gauza bat egin behar dugu. Gogoratu behera hemen bueltan faltsua esan genuen ez dugu nahi default gertaera su esan genuen. Baina besterik ez da gertatzen den desgaitu dugu orain, ez da edozein izanda ere idazten erakusteko nabigatzailean gehiago testu-kutxa batean idazten portaera lehenetsia izango lukeelako. Nahi jada ez dugu, beraz suntsitu itzulera hau faltsua jaramonik ez egiteko. Gorde dugu bada, eta orria birkargatu, orain aapl hasten naiz idazten beheko hemen prezioa stock automatikoki osatzea dela ikusi duzu. Beraz, hemen CS50 Ogasun Instant da. Buruzko istorio dibertigarria Actually YouTube Instant ikasleari besterik ez da mota horretako idatzi zuen 1-gau proiektu gisa, eta hurrengo egunean izan zen lan bat eskaintzen YouTube CEO. Beraz, hori bezain erraza da, CS50 ikasle, azken proiektuak YouTube at lanpostu bat lor daiteke. Horrelako zerbait azken proiektuaren ideia benetan cool bat da, ezta? Integratu nahi dugun batzuk existitzen den funtzionalitatea izan genuen. Erabiltzailearen esperientzia hobetzen dugu pixka bat, eta bat-batean zerbait YouTube Instant bilatzen asko errazago bat izan daiteke baino YouTube erregularra bilatzean. Beraz, AJAX Hitz batean. 

Joseph zen erakusten duen adibiderik, autocompletes asko ikusi dugu, eta autocompletes dira benetan, benetan erabilgarria izan dugu ez delako gogoratu Adibidez, ez baduzu, ez ahaztu Apple prezioa stock eta ezagutzen dugu aa zerbait, baizik eta, besterik gabe, niri esatea baino, "Gauza hau share hainbeste diru hori balio du," Mota gustatuko litzaidake zer stock aa ezagutzeko. Egin dezakegu benetan nicely Bootstrap liburutegia jadanik CS50 Ogasun barruan. Zatoz bada hemen JavaScript etiketa eta joan Typeahead polit bat besterik ez da plugin norbait dagoeneko Gurekin idatzi eta erraz erabili ahal izango dugu hau atsegin funtzionalitatea. Idatzi bat A eta hemen A. batez hasten diren estatu batzuetan zerrenda bat da Demagun hau benetan cool uste dut, eta denbora honetan, besteak beste, me nire orrian. Bihurtzen da, hau da, benetan, oso sinplea. Dezagun salto baino gehiago hemen quote3.js. Nire fitxategia itxura apur bat ezberdinak. Down hemen nire AJAX stuff guztiak berdina da. Stock datuak kargatu nahi dut, beste orri batean joan beharrik gabe. Baina orain, plugin hau erabili nahi dut. Bootstrap dokumentazioa, zer egin dezaket adibide handiak ditu. Esan nahi dut, "Hemen sarrera osaketa automatikotik nahi dut" eta deitzen typeahead funtzio hau deitu noa, eta hori Gurekin Typeahead stuff guztiak kudeatzeko. Zerrenda abiarazi du, gure iragazketa egingo da. Jakin behar duen gauza bakarra da zer datuak autocompleting ari gara. Beraz, gako hau aurkitu dut, dokumentazioa irakurri eta adibideak begira. Ematen dut bada source gakoa, gako honen balioa zenbait gauza array nahi osaketa automatikotik I da. Aldagai hau beste fitxategi zen. Ireki dut symbols.js. 

Symbols.js hau kateak duten array hau da, benetan, benetan big NASDAQ, sinboloak stock horiek guztiak. Itzuli nahi dut, beraz jharvard HTML, ostalari birtual, globalhost, html, txantiloi joateko bada, quote_form. Den geroztik izeneko quote3.js, let me Hemen nago barne JavaScript fitxategia aldatzeko. Orain quote3.js behar dut, beraz, hori JavaScript fitxategi ezberdin kargatu noa, bat du Bootstrap osaketa automatikotik hori. Orain atzera salto egin dut nabigatzailea, orrialde hori berriz kargatu, eta aa idazten hasi naiz, ez da nire automatikoki osatu '. Eta benetan izan zen bezala hori bezain erraza da. 1 kode lerro besterik esan izan nuen, "Hemen gauzak nahi osaketa automatikotik dut" eta bat-batean, benetan, benetan nice funtzionalitate hau daukat ahalegin asko ez guztiak oso bat. Ari zaren webgune eta, batez ere, gauzak frontend aldean garatuz, kasu honetan asko aurkituko duzu. Daude asko, asko, benetan cool liburutegi asko daude osatzen duten gauza erraza egin hau atsegin super da. Ezin edonork, besterik gabe, sinbolo handi zerrenda honetan autocompleting desabantaila edozein deritzozu? Zer izan daiteke zerbait hori ez da onena hurbilketa honekin? Bai. >> [Ikasleak] Denbora [inaudible] asko Bai. Oraintxe JavaScript fitxategi handi hau ari gara deskargatu eta sinbolo asko. Eta horrela dugu stuff tona bat izanez gero, hau Could mota handitzeko ez bakarrik bilatzen latentzia baina, aldi berean, uneko fitxategia deskargatzean. Great. Beste ezer? Oraintxe garrantzia benetako zentzua ez da. A, erakusten duten enpresak sortu hemen dut idazten baduzu agian ez enpresa gehien A. batekin hasten 

Apple I lortu baino lehen, zenbait karaktere gehiago iraun dezake zer bilatzen dut aurkitu. Osaketa automatikotik honek ez du garrantzi Zentzu honetan. Besterik ez da, esan du "Anything datorren erakutsi dut". Ordez, nolabait integratu garrantzia batzuk nire bilaketak nuke. Joaten naiz bada, hemen Yahoo! Finance finance.yahoo.com Saiatzen naiz, Yahoo! Finance orrian sinbolo bat sartu nahi izanez gero eta GOOG idazten hasi nintzen, gauza zerrenda nice hau daukat. Bistan denez, Yahoo! Finance antzeko zerbait egiten gehiago clever Hemen ikusten da. Garrantzia dute, eta informazio osagarria ere badute salda izena bezalakoa. Zerbait ez dut benetan nire stock sinboloen zerrenda. Nahi dut, eta beraz, hartu dut. Dezagun hori zenbait gauza egiteko. Dezagun lehen ireki inspector orri hau Orri hau ikusi dugu hori ez da birkargatzen delako, beraz, ziurrenik, AJAX erabiliz nolabait kargatzen bere datuak. Jakin ahal izango dugu zer datuak kargatzen da. Sarea fitxa hau I klik egiten baduzu, eskaerak tiro behar diren guztiak dira izango. Orain goo dut idazten gero, ikusi besterik ez da HTTP eskaera berri bat eskuratu ahal izango dugu. Hau da, ziurrenik, non datu hori datozen. Sure nahikoa, URL horretan, apur bat Harritzeko izeneko I begiratuz gero, hori da, zehatz-mehatz non Yahoo off bidaliz bere datuak ikusi ahal izango dugu. 

Nik sortutako izeneko suggest.php fitxategi ezberdin batean espirituz lookup funtzioa oso antzekoa. Funtsean, Yahoo URL-kontsulta bat egiteko, datu batzuk lortu, eta bidaltzen du atzera me. Orain, big, sinboloen zerrenda handia erabiliz ordez, Yahoo garrantzia nice gauza erabili ahal izango dut, eta nik ez dut hori masiboa JavaScript fitxategia deskargatzeko. Besterik ez naiz benetan garrantzitsuak stock sinboloak behera tira. Dezagun horretan jauzi. Html Beraz, js. Gaur egun gara quote4. Orain ez da gehiago ari gara JavaScript fitxategi zerrenda handi hori erabiliz. Baina diseinu arazo mota txiki bat dago hemen. AJAX bat dela asinkronoak esan dugu. Zer esan nahi duen denean AJAX eskaera bat egin dut, beraz, hementxe on line 8, hau da, non da nire AJAX eskaera benetan tiro. Demagun kodea batzuk behera hemen daukat hori stuff batzuk egin behar erabiltzaileak edo aldaketa-orrian zerbait nahi ohartaraztea. Zer gertatuko da nabigatzailea ez da eskaera hau itxaron jarraitu behar behera eta lerro hau sakatuz aurretik. Hori asinkronoak parte. Eskaera hau egin eta esan, "bakoitzean amaitzeko, "Itzuli eta esan nuen arrakasta barruan deitu deitu funtzio hori." Horrek esan nahi du, ezin dugu deskargatu stock guztiak aldez aurretik. Eskaera egiteko eta zerbait itzuli arte itxaron behar dugu. Horrek esan nahi du horren aurretik, nahikoa izan dugu Bootstrap dira, "Hemen gauza zerrenda nahi dut 'automatikoki osatu' on." Ez da gehiago egin ahal izango dugu, jada ez dugu ezagutzen ez delako zer nahi benetan automatikoki osatu 'on dugu. Zorionez, Bootstrap hau pentsatu dira han guys smart delako, eta benetan eman gaituzte plugin honen Typeahead kargatu beste modu bat. Aurretik, source jabetza honen balioa gauza array big osaketa automatikotik hau izan zen. 

Orain source jabetza funtzio bat da, benetan, eta funtzio honen helburua da irudikatu osaketa automatikotik gauzak dira. Dela irudikatu da, Yahoo! Finance eskatu osaketa automatikotik gauza onenak dira. Naiz dela I AJAX oso antzeko eskaera egiteko. Orri hau eskatzeko suggest.php noa. Sinboloak zehar oraindik ere bidali nahi dut. Eta orain, nire arrakasta, Bootstrap dokumentazioa esan zidan gauza zerrenda horretan populatu, guztiak egin behar dut array honetan pasatuko Atzeradei funtzioa. Baina minutu bat itxaron. Hau suposatzen da, bada, array bat izango da, eta AJAX da me bidali testua, Nola da posible? Izeneko JSON datuak trukatzeko modu berri bat aurkezten du. Kasu honetan ez dugu atzera kate sinple bat bidaltzen. Orain stock sinboloak zerrenda hau konplexuagoa ari gara aurre. Stock ikur horiek ere enpresaren izena edo uneko prezioetan bezalako gauzak. Just kate luzea ez den edozein modu aurreikus formateatuta handi bat erabiliz ez dago datu hau lortzeko modurik onena Yahoo zerbitzaria me izango modu erraz ulertu ahal izango dut. JSON elkartze-array nola sortu dugu JavaScript abantaila hartzen duten teknologia da. Hau JavaScript array elkartze bezala asko begiratzen, eta hain zuzen ere, delako da. JSON JavaScript Object Idazkeraren dago. Hau da, funtsean, bat formatu adostutako datuak transferitzeko atzera eta aurrera. Hemen hau JSON objektu edo JSON elkartze-array me bidaliz ikastaro bati buruzko datu batzuk. 

Array honen gakoak ikastaro bezalako gauza cs50 balio du, eta behera array bat da, balio bat daukat hemen ikus ahal izango dugu. Ez dut kateak out parse bezalako gauzak egin eta koma bilatzeko eta gauzak horrela egin crazy. JSON formatu honetan deklaratu delako, JavaScript eta jQuery jada funtzioak kate bat bihurtzeko JSON honetan itxura bat JavaScript benetako elkartze-array batera lan egin ahal izango dugu. Egiten ez dituen fitxategia, suggest.php esaten bezain erraza da, me back, besterik gabe, testu-kate bat bidaliz, baina bidaliz me back JSON joan ezagutzen dut. Horrek esan nahi du JSON hori JavaScript array elkartze bihur daitezke. Eta beraz, jQuery, gustatzen egin didazu nuke. Horrek esan nahi du, hau erantzun-parametroa hemen, hau ez da gehiago kate bat besterik ez da. Dugu jQuery kontatu delako hemen dator JSON batzuk, jQuery smart nahikoa esatea izango da, "JSON nahi duzu?" Elkartze-array batean hori bihurtzeko noa. " Dezagun benetan Network fitxa begirada bat hartu dugu quote4.js behin. Hau aldatu dugu, eta orria birkargatu. Orain, bat-batean berriro idatzi dut. Pare bat suggest.php eskaerak egin dut, baina, orain, erantzun hau, baizik eta kate besterik ez baino, JSON da. Beraz, giltza irekia kizkur, esaten dut "Hona hemen elkartze-array bat dator". 

Elkartze-array honen gako lehen eta bakarra deritzo sinboloak, eta, ondoren, dagokion sinbolo guztiak array bat da Orain datozen Yahoo! Finance, ez hori erraldoi zerrenda. Hori horrela, besterik gabe, ezin dut populatu automatikoki osatu 'plugin batzuk dagoeneko aurretik zehaztutako fitxategi lokal bat ez datozen datuak baina beste zerbait. Bihurtzen da benetan aprobetxatu ahal izango dugun izeneko JSONP teknologia edo JSON tarte betegarri batera, eta middleman suggest.php hau saihesteko. Baina egiten ordez, utzi ordez, hau nola are gehiago hobetu ahal izango dut begirada bat hartu. Gustatzen I Bootstrap en Typeahead. Benetan polita da. Baina JavaScript ona ari gara eta mota egin nahi dugu geure burua, agian, plugin hau zer egiten ari izan begirada bat hartu. Dezagun jada ez erabili Typeahead gauza, dezagun saiatu hau proposatutako izakinen zerrenda geure buruari egiteko. Hemen quote6.php Era berean hasiko dugu. Aldi bakoitzean norbait mota zerbait, AJAX eskaera bat egin nahi dugu. Hau da gure jatorrizko CS50 Ogasun Instant antzekoa da. Baizik eta eskaera bat egiten quote.php baino, eskaera bat egiten ari gara orain fitxategi hori bera aurretik, suggest.php honetan besterik ez da Yahoo! Finance datuak tira. 

Berriz ere, oraindik ari gara JSON espero da, baina gaur egun ez dago geroztik Typeahead Gurekin lan hau egiteko, ere egin beharko dugu, egungo testu koadroan barruan balioa dela batera bidaltzeko. Orain zer Yahoo! Finance galdetu jakin dugu, eta, beraz, orain hemen eskaera behin osatzen exekutatu nahi dugun funtzioa. Ez dugu plugin zerrenda egin digu, beraz, hemen da non benetan ari gara, iradokizun zerrenda bat eraikitzeko. Horretarako, askoz PHP HTML-kate handi horiek concatenated dugu gero inprimatutako dugu, zehatza gauza bera egin ahal izango dugu JavaScript. Lehenengo izeneko iradokizunak kate honetan hasiko dugu, eta kate hori HTML batzuk eduki. Gauzen zerrenda bat egin nahi dugu, beraz, zerrenda etiketa honekin hasiko dugu, eta gaur egun baino gehiago batetik bestera joateko atzera itzuli ziren gurekin sinbolo dugu. Gogoratu, dugu esan delako dataType: 'JSON', hau da, ez da kate bat. Hau da, dagoeneko Gurekin array bat. Hori da benetan cool. Besterik gabe, esan ahal izango dugu, "Zerrendako elementu bat erantsi nahi dut." Bat elementu baten barruan jarriko dugu horren alde, emango dugu iradokizun klase bat badakigu zer da, beraz, eta, orain, hemen lortu dugun Yahoo! Finance sinboloa da. 

Behin ahaztuak dugu atzera sinbolo bakoitzeko elementu bat sortu dugu, off zerrenda itxi nahi dugu. Beraz, gaur egun, iradokizunak HTML fragment txiki honetan adierazten orrian jarri da bilatzen ari gara gauzak zerrenda izango da. Dezagun benetan jartzen orrian. Dudan benetan hutsik div beste sortu eta eman dut iradokizunak ID egin. Much bezala, div, edukiak stock datuak prezioa erakutsi dugu, oraintxe nahi dugu edozein kate hau da div honen edukia ezartzeko biltzen dituen ikur horiek. HTML metodo hau erabiliz, iradokizun-aldagaia, katea, HTML-kate bat da. HTML hartzen duten eta deitu iradokizunak div barruan jarri nahi dut. Besterik ez dugu erantsiko zerbait DOM da orain. DOM, elementu berri batzuk gehitu ditugu, gaur egun dugun orrian erakutsi. Dezagun zer itxura ikus-en. Quote6 dugu kargatu bada, eta, gaur egun, itzuliko gara, aapl idazten hasi naiz, jada ez dugu Bootstrap hori automatikoki osatu ', baina gaur egun zerrenda hau egin dugu. Bootstrap Typeahead baino apur uglier da, esate baterako, baina beste gauza baimendu egin du. Bootstrap plugin hori bilatzen dugu, dugunean autocompleted, 'automatikoki osatu' balio bat izan zen aapl ikusi genuen. Hori agian ez da hain lagungarria. Erabiltzaile gisa, agian ez dut berehala onartu stock sinbolo guztiak. Zer ziurrenik naiz gehiago litekeena ezagutzen dira enpresaren benetako izenak. Beraz, ez litzateke benetan lagungarria izan beharrean baino aapl esaten hau esan zuen, eta antzeko zerbait Apple Inc. Dugu ijetzitako Horregatik geure burua, benetan erraz egin ahal dugu. Dezagun ireki gure azken aurrekontua fitxategia hemen, beraz quote7. 

Gauza bera. Beste PHP fitxategi egingo digu itzultzeko sinbolo bakarrik baino gehiago sortu dut. Horrez gain, ematen diguten konpainiaren izenak. Eta, beraz, gauza bera egiten ari gara. AJAX eskaera bat egiten ari gara. Behin eskaera burutu du, funtzio hau exekutatu hemen dugu, eta funtzio hori kate handi bat eraikitzeko elementu. Baina hemen diferentzia zerrendak horien balioa ez da jada sinboloa besterik ez da, Orain da izena. Beraz, txiki bat arazo izan ditugu. Gure lookup erabiltzen dugu, nolabait gainditu behar dugu sinboloa. Ezin dugu gainditu lookup Microsoft Corporation antzeko zerbait. It MSFT gainditu behar dugu. HTML idazten ari gara, inkorporatu atributuen eder asko ditugu. A href edo klase bat lotuta egon litekeen. Baina zer gertatzen da benetan behar dugu gaur egun esteka hauetako bakoitzak lotutako stock sinboloa. Ez-eraikitako atributua HTML stock sinboloa, baina, zorionez, HTML5 esker, gure atributuak sortzeko edozein izanda ere nahi dugu. Datu-sinboloa esanez, atributua berria sartu dut cuyo nombre egin dut, eta hori ongi dago datu honekin prefaced I delako. Dago sinboloa barruan gordetzeko salda ari gara orain. Zer esan nahi du da, nahiz eta enpresaren izena balioa bistaratzeko ari gara gure automatikoki osatu 'barruan, oraindik ari gara sinboloa gogoratuz hori enpresa bakoitzaren lotutako. Horrela ari gara egiten elementu honen beraren barruan dago. Beraz, horrek esan nahi du aldaketa gehiago egin behar dugu. Noiz egin klik dugu, benetan aprobetxatzen sinboloa atributua behar dugu baino bere balioa. Dugu back up bada, gertaera kudeatzailea bat erantsi dugu iradokizunak. Bakoitzean iradokizunak horietako bat sakatuta, zerbait egin nahi dut. Sarrerako kutxa balioa aldatu egin nahi dut. Orain, hau val funtzio bera ezarri nahi dut. 

Beraz, argumenturik gabe val funtzio hau itzultzen du dagoeneko testu-koadroan, baina ematen baduzu kate bat, kate hori hartu eta testu-kutxan jarri dute. Bere testu-koadroan naiz hautatzeko modu berean. Forma-quote izena sinboloa da barrutik. Orain bidaltzen dut atributuaren balioa datu-sinboloa. Gauza berria da, $ (hau). Zer da hau erreferentziatzen sakatu elementua da. Hemen ikus dezakegu ari ez garela klik gertaera bat erantsiz iradokizun klase bat elementu bakoitzari banan-banan. Izan ere, pixka bat hurbiltzen ari gara modu ezberdina du. Horren ordez, esaten ari garen, betiere ezer iradokizunak div honen barruan, gogoan besterik ez da zerrenda hori edukiontzi div honen barruan zerbait klikatu bada, eta iradokizun klase bat du, Gertaera hau sua nahi dut. Funtsean event handler horretan bertan berrerabili ahal izango dugu zer egin dezakegun, horrek esan nahi du zerrendan gauza guztiak. Beraz, ez dugu lehen elementu bat gertaera kudeatzailea izan eta bigarren elementu ekitaldi ezberdinak kudeatzailea. Ordez, esan ahal izango dugu, "event handler bera nire zerrenda guztia eskatu nahi dut." Baina nolabait ezagutzen den elementu sakatu behar dugu. Hau keyword "hau" adierazten du besterik gabe. Objektu izan zen, besterik gabe, erabiltzaileak klik egindakoan. Besterik ez dut 3. Esteka klik egin baduzu, hau 3 link horren elementu adierazten du, Horrek esan nahi du, bere atributua, datu-sinboloa I lor daiteke, ezagutzen dugun sakatu besterik ez dut enpresaren lotutako sinboloa den eduki du. Salto egin dugu atzera bada gure finantza-orria, gaur egun, behin msft antzeko zerbait idazten hasi naiz ikusi ahal izango dugu, ez da gehiago ari gara stock sinboloak eskuratzen benetako enpresa eskuratzen ari gara orain. Baina egin klik enpresa horietako bat dut, ikus benetan ari garen testu-koadroan populating ez dugu enpresaren izena baina edozein dela ere datuak atributu horien barruan gordetzen dira. Eta, beraz, I actually ikuskatu izanez gero, elementu horiek bat eskuineko klik eginez eta Inspect Element klik eginez, benetan ahal izango dugu zer itxura duen ikusteko. 

Gogoratu hau zerbait barruan sortu dugun hori begizta da sortu ziren eraikitzen HTML katea. Dugu hemen ikus ahal izango du, datu-sinboloa MSFT, handia da balioa du. Hau da, zer espero genuen. Sinboloa da, eta hori, nola erabili behar dugun balioa lortu dugu testu-koadro honen barruan. Hori da aurrekontua inprimaki nahikoa aspergarria mota delako. Dezagun gure zorroa orria azkar Osagarri batzuk besterik ez. Nik CS50 Ogasun pixka bat erabili baduzu eta salerosketa stocken asko hasten zarenean, azkenean, taula hau pretty big iritsi da, eta stock ticker, jakina, nahi duzu. Taula da benetan, benetan handia denean, erabilgarria da erabiltzailearentzat bilatu saiatzeko. Bilaketa-kutxa hasten badut Disney antzeko zerbait idazten Inside , eta nire Mickey Mouse stock bila, ikus dezakegu taula hori iragazteko zer idatzi besterik ez dut sartu Funtzionaltasun honek itxura super zaila da, baina benetan, benetan erraza da jQuery eta JavaScript-rekin. Fitxategi honek portfolio.php izeneko portfolio.js JavaScript fitxategi bat barne hartzen ditu. Ikus dezagun begirada bat. Html Beraz, js, zorroa. Hemen mahai gainean bilatzen ari gara egiten. Lehenik eta behin, egin behar dut event handler bat erantsi da testu-kutxa ezagutzen dugun nahi dugun gure iragazteko funtzioa su delako aldi bakoitzean, erabiltzaileak prentsak zerbait Search botoiak denbora izan dugu ez delako. Egin behar dugun lehenengo gauza da irudikatu zer erabiltzaileak bilatzen da, besterik ez dugu aurretik egin bezala. Hitz hori elementu uneko erabiltzaileak elkarreraginean egiten dio erreferentzia. 

Erabiltzaileak bilaketa-koadroan erlazionatzerakoan, $ Bilaketa-kutxa hau adierazten du, beraz this.val ematen digu zer Gaur egun, erabiltzaileak idazten bilaketa-kutxa barruan. Beraz, orain zer egin nahi dugun baino gehiago batetik bestera joateko errenkadetan nahi dugu gure taula barruan. Gure taulan errenkada guztiak hautatzeko, mahai hori taula zorroa ID bat eman dut, eta errenkada bakoitzeko TR elementu bat irudikatzen da, beraz, hautatzaileak hori me big array bat itzuli du nire taula errenkada guztiak. Orain baino gehiago batetik bestera joateko array hori nahi dut. Baduzu, ezin izan dut loop, baina jQuery benetan polita eskaintzen digu izeneko funtzioa "bakoitzean." Zer ez da bakoitzaren argumentu bat hartzen du, eta argumentu horrek funtzio bat da. Zer egin egingo da funtzio hori zerrenda honen barruan elementu guztietan aplikatuko da. Funtzio honek argumentu bat da, e hartzen du, funtzio hau exekutatu, e hau da lehenengo errenkadan ordezkatu behar, bigarren ilaran, eta, ondoren, hirugarren errenkadan. Modu honetan, gauza bera da bat exekutatzen ari loop eta, ondoren, zure barruan indizea loop oinarritutako uneko elementu kalkulatzen. Iterazio bakoitzean, elementu horiek taula bakoitzean, - Errenkadan barruan zelula testu elementu testua bada egiaztatu nahi dut datorrenean zer ari naiz bilatzen. Komando big kate luzea da nola egin nuen. Lehenik eta behin, berriro ere, hau da, gaur egun aipatzen da funtzio berri baten barruan delako taulako errenkada uneko hau da gaur egun. Taula uneko errenkada hartu nahi dut, eta bere seme-alaba guztiak lortu nahi dut. Gogoratu, DOM zuhaitz hierarkiko bat da, horrek esan nahi du elementu duten seme-alaben kopurua. 

Me itzultzeko. Seme-alabak funtzioa elementu guztiak array bat itzuli egingo duten seme-alabak dira, kasu honetan, taulako errenkada bat. Hau besterik ez da, besterik gabe, errenkadan barruan zelulak. Lehen gelaxkan bilatu nahi dut. Array horretan lehenengo elementua eman me. Lehenengo funtzioa dio. Ondoren, testu-funtzioa dio me zehazki zer barruan pilak testua bilatu nahi dut geroztik. Azkenik, dezagun bihurtu minuskula beraz, testu kasu minuskulak bereizten kontsultak egin ahal izango dugu. Azkenik, mahai baten barruan kate hori bilatzen ari gara kate badu ikusi nahi dugu. JavaScript funtzio indexOf ez hori bakarrik. Kontatzen digu kate honen kate beste badu ala ez. Egia da zelula hori du zer ari naiz bilatzen badu, ziur dela erakutsi nahi dut. Show metodoa, esan du "Erakutsi elementu." Hau ez bada kasua, eta gero esan nahi du edozein dela ere, ez da jasotako dut bilatzen Lerro horren barruan, eta ezkutatu nahi dut, beraz, erabiltzailea da. Hori dela nice iragazteko efektua lortzen da, non jada ez taula osoa ikusiko dugu. Zu nola ticker hau ondo egiteko interesa baduzu, source online bidal dugu. Baina oso sinplea da. JQuery animazioak eta manipulatzeko CSS propietate horiek metodo awesome ditu. Beraz, hori da niretzat. 

Zer ondoren aurretik datza? Egun batzuk bezala ikusi ahal izango dituzu, azken proiektu proposamena dela. Proiektuak behin betiko proposamena galdera batzuk eskatuko dizu, baina, horien artean, hiru mugarri izango da bat "ona" mugarria, mugarri bat hobea, eta bat onena. Ideia benetan duzu guys laguntzeko ezarri zure itxaropenak beraz, gutxi da zure proiektuaren azken irteera pozik izango duzu eta "ona" izango da hain urruti dagokienez. Baina orduan, apur bat lortu ahal izango duzu, zerbait lortzeko interesa hobeto edo zerbait onena ere, dugu push duten norabidean baita ordenatzeko. CS50 Hack-a-thon, berriz, aste batzuk. Normalean, hau egiten dugu loteria oinarri oinarria delako interes baina odds dira ehun batzuk shuttle autobus bat hartu dugu Harvard Square behera Kendall Square non Microsoft egokiekin "NERD" deitzen instalazioak eder bat - New England Ikerketa eta Garapen Zentroa. 8 ak aldera iritsi gara janari batzuk izan dugu. 1 a.m. inguruan zenbait elikagai gehiago izan dugu. 5 inguru am Oraindik bada esna zuzenduko dugu edo IHOP hartu zaitu campusean. Helburua ez da proiektu final murgiltzea ikaskideen eta langileen ondoan. Ondoren, egun batzuk geroago, CS50 azoka da, benetan ekarri den aukera bat izan duzu guys zure lana erakusteko eta lorpenen seihilekoan sorbaldak igurtziz, berriz, elkarren artean, eta zer denek zuten zentzu bat eskuratzerakoan. Esan, asko, Tommy eta Joseph esker, eta ikusiko dugu astelehena.  [Txalo]