[Powered by Google Translate] [Nädal 9, edasine] [David J. Malan - Harvardi Ülikool] [See on CS50. - CS50.TV] 

See on CS50. See on nädala lõpuks 9. Suur aitäh. Lõpuks. Nädal 9. Ma sain selle. Täna jätkame oma vestlust veebi programmeerimine silma suunas lõplik projekt, mitte sellepärast, et sa pead tegema midagi veebipõhine Lõpliku projektide kuid kuna kas lõplik projektide või pärast CS50 see on kindlasti suunda, kuhu kaasaegse tarkvara läheb. Ja veel see ei ole tegelikult lihtne asi. Tegelikult üks raskemaid asju teha, on aspekt disain. 

Näiteks kavandatud mean tegelikult saada kasutajaliides või kasutaja kogemus parem. Julgen öelda - ja me teame viimastel probleem komplekt kui mõni teist eetris oma koolikud umbes mõned tarkvara või riistvara, mis ajab sind raevu, kas ülikooli või välja - seal on palju saite seal, seal on palju riistvara seal, Selline asi on jama. Aga reaalsus on see, et teha asju, mida on lihtne kasutada veel on sellegipoolest võimas on väga raske väljakutse. Nii et täna ma küsisin Joosep ja Tommy minuga liituda siin nii et meil on vestlust, nii umbes disain ja milliseid mõtte protsesse tuleks alustada läbimas oma peaga Kui disaini oma lõpliku projekti, oma tuleviku pürgib. Ja siis koos Tommy abi me vaatame mõned rakendamise üksikasjad. Kuidas teil on nägemus paberkandjal või meelt et saate seejärel käivitada programmiliselt kasutades mõned tehnoloogiad ja tehnikad oleme lihtsalt hakkas rääkima, nimelt JavaScript ja midagi isegi uuemad, nimelt AJAX, asünkroonne JavaScript. See võimaldab teil luua veelgi dünaamilisem kasutajaliides tõmbamist üha rohkem andmeid järk-järgult alates server. Nii et me näeme mõningaid selliseid klippe ka täna. Nagu kõrvale, kui olete huvitatud, keskendudes infotehnoloogia või minoring infotehnoloogia, tean, et see reede keskpäeval Maxwell Dworkin 221 tekib pitsa sündmus kus saab õppida veidi rohkem arvutiteadus. Oma viis uksest välja täna saate kiirenemist mitteametlik juhend CS Harvardi. Me paneme selle prügikaste väljaspool vöökõrgusel nii et kui soovite haarata seda ja õppida veidi rohkem CS, mis on sinu jaoks olemas, kui see oli nädal 0. Ka siis, kui soovite meiega liituda CS50 lõunasöögi sel reedel kell 01:15, pea cs50.net/lunch. Ilma pikema jututa, ma annan teile õpetamise mehe Joseph Ong. Tere. [Aplaus] Aitäh. Esimest korda sain teada disain oli klassis siin nimetatakse CS179. 

Professor ajal ütles meile lugu teisest professor kes oli läinud hotelli ja kasutatud segistid. Kas keegi mulle öelda, mida 2 nupud vasakul ja paremal teha? [Üliõpilane] Soe ja külm. >> Soe ja külm. Hea. Mida sa tavaliselt oodata, eks? See professor pärast kasutades kraan tahab käia duši all, ja ta jätkab seda kasutada. Ta arvab, vasakul ja paremal küljel on kuuma ja külma, eks? Aga kas keegi mulle öelda, mida need teevad? Iga käsi? [Kuuldamatu õpilase vastus] >> Üks soovitus on? [Kuuldamatu õpilase vastus] >> Temperatuur? Nii et üks nendest kontrollib temperatuuri ja muude kontrollide? >> [Üliõpilane] Veesurve. Veesurve. Hea. See professor jalutab ja mõtlesin nad kontrollivad kuum ja külm, muutub õige, mis ta arvab, on kuum, kõik viis kuni sest ta tahab võtta soe dušš. Noh, need tõesti ei sobi omavahel, nii et ta saab seda mitte väga lõbus kogemus olemise külm dušš ja me kõik teame, mis tunne see on. See on näide disaini viga. Mida mõtlen, et on tema ootust kraan ei vasta sellele, mida tuli dušš, mis on selline kahetsusväärne talle. Nii et see on näide disaini viga, mis juhtub reaalses elus. Aga me näeme igasugu muid need samuti. Oleme ilmselt ei fännid MBTA süsteem. See on metroo süsteem tegelikult Londonis, mis ütleb: "See nupp ei ole kasutusel." Miks on see isegi olemas? Miks me isegi ei hooli? Kui ma olin laps, on tech Savvy üks maja, Kui arvuti oleks crash, mu ema oleks tulnud minu juurde, näitab mulle seda ekraani ja küsis minult, mis juhtus. 

Isegi mina ei tea, mida see tähendab. [Naer] Mida? [Naer] Vahel me tunneme, nagu tarkvara arendajad on lihtsalt trall meile. Kuna kasutajate me oleme nagu "Mis siin toimub? Keegi meile öelda." See kõik taandub projekteerimistingimuste väljaandmisele. Disain, nagu me näeme, ei puuduta mitte ainult esteetika, Asi pole selles, kuidas asju vaadata. Me näeme siin, et see väike pop-up üle siin tegelikult tundub päris kena. See on varju taustal, see on piiri raadiused toimub. See on selline ilus. See ei ole tõesti hästi kavandatud, sest see ei ole väga kasutajasõbralik. See väike pop-up, mis kerkib tegelikult ei anna mulle mingit teavet umbes mis toimub, see ei ütle mulle midagi, kui kasutaja kuidas taastuda, et viga. Me tahame mõelda asju, disain ei ole. Esiteks, see ei ole esteetika. Samuti ei täitematerjaliks oma app koos tonni tarbetuid funktsioone. Kui oled Tai restoran, sa ilmselt ei taha olla hambaarst samal ajal. Ja Facebook Küsimused, mitte, et paljud inimesed kasutasid ja see ei olnud tõesti keskmes, mida nad ehitasid. Ja nii see on tore mõelda mitte niivõrd kogus asju et sa paned oma taotluse, kuid kvaliteet ja kuidas te teete, et kasutaja kogemus parem poolt tegelikult parandada sellega, mis teil juba on. 

Lühidalt, disain ütleb meile, mida me peame lähtuma. Näiteks, kui me ehitame midagi, andke meile otsida asju, nagu Google, näiteks peaks me asju nii, mis nõuab kasutajal võtta palju klikke saada, mida nad tahavad, või peaksime tegema seda viisil, näiteks Google Instant või automaatteksti mis võimaldab meil saada meie tulemusi kiiremini? Ehitus hõlmab, nagu Tommy näitan sulle, tegelikult hoone ta. Seal on palju liike disain. Näiteks, kui sa oled hoone midagi kasutada midagi kolmanda maailma riik, kus ei ole palju elektrit või et palju tehnoloogiat, sa pead konstruktsiooni, mida sa oled hoone viisil, mis kergesti võimaldab juurdepääsu inimesi. Aga mis sorti muid disaini otsuseid võib seal olla või võib olla seotud midagi sellist? Jah. Ma näen käsi. [Kuuldamatu õpilase vastus] >> Õigus. Täpselt. Ligipääsetavus on üks asi. Paljud inimesed ei mõtle, "Mis mu kasutajat?" nagu äärmisi kas spektrit. Mul on kasutajad, kes võis puudega, et ma ei mõelnud ja ma olen lihtsalt mõelnud projekteerimisel tavakasutajale. Internet on kättesaadav kõigile tänapäeval ja ma peaks kavandama neid inimesi samuti. Mis sorti muid disaini otsuseid võib teete? Jah. >> [Üliõpilane] Kulud. Maksumus. Väga hea. Teine asi, me võiksime toetuda meie disaini otsuseid on kulu. Kui me äri, sa tahad ehitada midagi, mis ei võta palju kulu toota kuid saab müüa eriti kõrge hind või saavad meile mõned kasumit. 

Need on kõik erinevat tüüpi disain, aga kui me ehitame midagi internetist või kui me ehitame midagi, mis ilmselt ei maksa nii palju üles ehitada nüüd, nagu Interneti-rakendused - sa ei pea viskama palju kapitali sinna et teha midagi, mis tõesti töötab - mida me oleme rohkem mures on kasutaja kogemus. Me nimetame seda kasutaja keskendunud disain. Sisuliselt, mida kasutaja keskendunud disain hõlmab paneb ennast ka kingad kasutajatele. Kui keegi registreerub mida ma hoone, nad ilmselt tulevad minu eriti taotluse eesmärki silmas pidades, koos ülesanne nad tahavad täita. Ja teie ülesanne on mitte ainult aidata neil täita seda ülesannet kuid et aidata neil täita seda ülesannet viisil, mis on tõhus, arusaadav ja, nagu mõned isik ütles seal, ligipääsetav. Mis kasutegur tähendab? Tõhusus tähendab, kui kiiresti ei oma kasutajanime ülesande täitmiseks andnud oma kasutajaliides. Kas see võtab palju klikke neid saada ühest kohast teise? Kas see tüütu? Kas neil on täita palju korduvaid ülesandeid? Me tahame, et see protsess võimalikult efektiivne et nad ei pea tegema neid erinevaid asju. Nagu intuitsiooni, st näiteks kui kasutaja vaatab mu liides, on neil lihtne saada ühest kohast teise? Kas neil lihtne aru saada, mida nad tuleb klõpsata minu liides et neid eesmärgi saavutamiseks või ülesande, et nad soovivad saavutada? 

Ja lõpuks, nagu üks inimene ütles seal, kättesaadavus on väga oluline. [Mees kõneleja] See puudutab juurdepääsu asjad nägemine, meeldib, kuidas ma tegelikult disaini midagi, keegi, kes on pimedad? Oh. Inimeste jaoks, kes ei näe üldse, meil on midagi, mida nimetatakse ekraanilugejad. Mida peaks tegema, on teil tuleks ehitada oma veebilehel nii et näiteks, eelkõige tehnoloogiaid, mida me nimetame - Seal on palju asju nüüd. Ma arvan, et ekraanilugejad nimetatakse lõuad. Palju neid asju tugineda mida me kutsume ala reeglid et luges kasutajale, mis on praegu lehel. Neile inimestele, kes ei näe, siis on vaja veendumaks, et need ekraanilugejad saab tegelikult kiirenemist lehe sisu ja võib tegelikult näidata oma kasutajatele, kui sa ei näe, vähemalt saab ikka aru lehe sisu. Jah. Okei. Aitab räägime hea disain. Räägime halb disain. Need on asjad, mida ei peaks tegema. Kas keegi mulle öelda oma kogemustest Craigslistissa ja mida nad arvavad ei ole nii suur umbes see kujundus? Jah. >> [Üliõpilane] Ma arvan, et seal on liiga palju sõnu ühes valdkonnas. Liiga palju sõnu, eks? Täiesti suur. Sa tuled sellele lehele ja sa oled tervitati terve hunnik asju siin mis ei pruugi isegi asja sulle. Näiteks sa elad ühes riigis, mis ei alga käesoleva kirja sisuga. Oletame, et elate Texas või midagi. 

Sa pead kerida kogu tee alla leht saada Asukoht olete. Ma olen Boston, nii et las ma vaatan Massachusettsis. Kus on Massachusetts? Oh, see on siin. Oh, see on Boston. Okei. Vaatame Boston. [Naer] Päris suur, eks? Ebamugav asju seal. [Naer] Oletame, et ma otsin kusagil elada. Kui palju inimesi on tegelikult kasutatud Craigslistissa? Põhjatu teile. Seal on päris halb võimaluse vaadata seda, kuid vaatame seda. Mis vahe on img ja pic? Kas keegi mulle öelda? Seal tegelikult ei ole vahet. Nad tähendavad täpselt sama asi, kuid neil on erinevad sildid nende jaoks mingil põhjusel. Kui ma vajutan on pilt, midagi ei juhtu lehel. Ma tegelikult pead klikkima Otsi uuesti, et midagi juhtuks. Mis võiks olla parem disain otsus, mida saaks teha seal? Kui ma olen klõpsates et filter, ma ilmselt soovite filtreerida, et konkreetne tegevus või et konkreetse kategooria. Nii et selle asemel, et vajutage uuesti nuppu Otsi, ma võiks lihtsalt automaatselt teha filtreerimine omamoodi Google stiilis, kus nad seda teha koheselt. [Malan] Aga ärge moodustab nagu oleme näinud neid siiani olema füüsiliselt esitatud lööb Sisesta vähemalt või klikkides nuppu? Nagu olete näinud neid nii palju, kui tegelikult on klikkima Esita teha neid asju. 

Aga nagu Tommy näitab teile teiseks on tegelikult viise, kuidas teil nii et kui klõpsate et asi võib automaatselt saata mida me nimetame AJAX taotlus ja saada andmeid tagasi ja filtreerida tulemusi silmapilkselt. On tonni asju, mis on valesti selle liidese. [Malan] Kas sa otsida Cambridge? Midagi on veidi ebaharilik siin kui sa hoolid Cambridge ja veel te saate Westford, Spring Hill, West Newton jms. Ilmselt mitte ideaalne. >> Ilmselt mitte ideaalne. Kuidas võiks ma saaks teha kasutaja kogemus parem selle konkreetse lehekülje? Jah. >> [Üliõpilane] Juhised. Okei. Juhised millist mõtet? [Üliõpilane] Näiteks asi esimest korda kasutajatele, kes ei tea isegi, mis Craigslistissa on või sa ei tea, mida sa peaksid tegema. Õigus. Nii selgitades, mida Craigslistissa on siin lehel on oluline. Me ei saa tegelikult öelda kasutajatele, mida see leht on tegelikult eest. Kui ma lihtsalt külastavad seda, ma näen terve hunnik kohtades. Ma isegi ei tea, mida need tähendavad. Kuid mis veel tähtsam, lihtsalt vaatab seda liidest, mäletan ma pidin keri ton asju leida konkreetne kogukond et ma tegelikult hoolis sellest. Mis on kiirem viis ma võiks teha? Jah. [Üliõpilane] neid lihtsalt jagada ida, lääs piirkondades. >> Okei. Ma võiks jagada nad veel kategooriaid mis võiks mind aidata kiiremini kindlaks kuidas saada, et kindla koha. [Üliõpilane] Pane ripploendist. >> Õigus. Okei. Ma võiks kasutada rippmenüüd, sest meil on fikseeritud komplekti asju ja me võiksime näidata neid rippmenüüst. Nii see ei võta nii palju ruumi ekraanil. Aga isegi parem kui see, mida me saame teha? Jah. >> [Kuuldamatu õpilase vastus] >> Kas oskate öelda, et jälle? >> [Üliõpilane] otsinguväljale. Jah, otsingukasti. See on tore. Mida me tegelikult saame teha, on kui me vaatame tagasi slaidide otsingukasti. Automaatteksti. Väga lihtne otsida tulemusi, mida sa tead on seatud. Kui ma hakkan kirjutama BO, lihtsalt näita mulle kõik tulemused, mis on BO sees neist. Nii saan väga lihtne leida eelkõige ühte ma tahan minna selle asemel, et kerida see tõesti suur nimekirja. 

Need on igasuguseid tõesti kergesti kättesaadavad viljad, et keegi, kes rakendab Craigslistissa võib tõesti teha kogemusi veebilehel palju parem oma konkreetse kasutaja. Okei. Aitab räägime halb veebilehed. Räägime Facebook. Kui Facebook tuli välja, ja eriti Facebookis fotosid, seal oli palju muid teenuseid ajal, mis võib teha täpselt samu asju. Nad võiksid korraldada oma fotosid albumitesse. Mida võiks teha, on siis võiks korraldada nende kogumid hästi. Sa võiksid korraldada neile kuupäevast. Sa võid teha kõiki neid eriti asju. Aga keegi ei tea, mida teha Facebook pildigalerii plahvatada ajal see ilmus? Jah. >> [Üliõpilane] Tags. >> Sildid. Täpselt. Meil on Milo siia, kes on meie koer maskott selle CS50 bandana. Te näete, et meil on see koodaustoiminto keskel. Ja mida tegi Facebookis fotosid nii huvitav kasutatavus seisukohalt on see, et tegelikult võimaldas inimestel selle kaudu kaasata oma sõpradega oma fotosid. Facebook, sest nende kodulehel on eelkõige sotsiaalseid see on umbes hoone selline ühiskondliku hoiaku. Et parem kogemus pildigalerii palju rohkem kuna nad võivad tegelikult alustada, öeldes: "Need on ühendusi inimeste vahel, ja need on fotod inimestest sa tegelikult hoolid. " Osa sellest on ka omamoodi nartsissismi. Inimestele meeldib olla fotodel ja asjad niimoodi. Kuigi see ei ole tingimata hea inimese tunnus, samal ajal see põhineb hea disaini otsuseid sest inimesed tegelikult hoolivad asjad niimoodi. Nii et Facebook fotod. 

Aga räägime Facebook üldisemalt. Olen kindel, et paljud inimesed siin on arvamusi Facebook, nii hea disaini otsuseid ja halb disaini otsuseid. Nii et olgem vent või olla õnnelik. Tule. Ma tean, te kõik kasutada Facebook. Keegi peab midagi halba öelda või midagi head öelda. Jah. [Üliõpilane] In Uudised Sööda seal on palju asju, mida ma tõesti ei hooli. Uudistevoo ei näita palju asju, mida ei pruugi hooli. Sul on sõbrad Facebookis kes te pole täidetud 2 või 3 aastat ja näed oma uudis tulemusi avanemise oma uudistevoo ja sa tõesti ei hooli sellest. Facebook on tegelikult tehtud jõupingutusi, et muuta see paremini, ja need olen tegelikult proovinud suruda asjakohased tulemused tippu uudistevoo kui hilja nii et sa tegelikult näed asju, mida sõbrad, mis on seotud teie või teie lähedased sõbrad. Midagi veel? Jah. [Kuuldamatu õpilase vastus] >> Kas oskate öelda, et jälle? [Üliõpilane] reklaamid on suhteliselt tagasihoidlikud. >> Mis mõttes? [Kuuldamatu õpilase vastus] Neil ei ole kerge ekraanil, nagu plakatid. Okei. See on hea. Kui te mäletate Interneti '90s - >> [Malan] Ma olin seal. >> Ta oli seal. [Naer] Võite mäleta vilkuv GIF taustaga, sädelevat asju, GeoCities stiil omamoodi asju. See on tõesti ei ole näiteks hea disain sest see on tõesti segavad sisu. Yale kunst veebilehel kasutada on animeeritud GIF kui nende taustast ja sa ei loe midagi lehel aga ma arvan, et keegi tegelikult kõneles nendega ja nüüd on see natuke erinev. [Malan] See on palju parem nüüd. >> See on palju parem nüüd, nagu näete. >> [Malan] Oh jah. Lihtsalt suurepärane, lihtsalt - Jah. Okei. 

Osa sellest teeb ka oma lehekülge võib väga minimalistlik ja väga arusaadav nii asjad lehel voolu nii, et on väga loogiline ja ei saa sel viisil üksteist. Mis sorti muid asju on hea umbes Facebook või halb umbes Facebook? Lähme lihtsalt disain vestlus siin. Oh. Kus? Jah. [Üliõpilane] uus Timeline süsteem võimaldab otsida isiku konto kohta oma minevikku. Ooh, Timeline. Timeline on suur asi, sest see võimaldab teil vars oma sõprade tagasi, kui nad olid keskkoolis. Timeline on hea, sest see võimaldab teil filtreerida läbi sisu palju kiiremini, see võimaldab leida asju, mis oleks muidu võtnud sa tõesti kaua aega, et leida lihtsalt kerida üles ja alla, üles, üles, üles, üles, üles, nagu läheb ajas tagasi. Aga seal on ka omamoodi negatiivne külg, et nii kasutaja kogemus. Mis see võiks olla? Big sõna, mis algab P-R. >> [Üliõpilane] Isikuandmete. >> Probleemid, eks? Privaatsus on tohutu kasutaja kogemus küsimus. See on üks asju, mida ma vihkan kõige rohkem Facebookis nüüd. [Naer] [Malan] Nagu ma nüüd. David ei teadnud seda tegelikult juhtus alles eile. Nii et nüüd ta teab, et iga kord kui ma vestelda temaga ma tean, et ta on olnud ignoreerides mind. [Malan] ebamugav osa oli mulle tegelikult ignoreerides teda, ja ma ei teadnud, et ta teadis, et ma ignoreerides teda. [Naer] Privaatsus on suur küsimus. Kas keegi siin mulle öelda, milline võiks olla halb umbes Facebook privaatsust Lisaks asjaolule, et nad teevad selliseid asju? Mis on see eriti raske teha seoses Facebook'i? See omamoodi on juhtiv küsimus. Jah. >> [Üliõpilane] Varja oma fotosid teatud inimesed. Õigus. Täpselt, et varjata oma fotosid teatud inimesed. Neil on see väike, vähe nuppu üleval paremas mis võimaldab teil lülitada privaatsust foto. Nende privaatsuse seaded on väga erinevad eri liiki menüüsid. 

Nad on saanud palju parem sellest hiljuti, kuid see oli varem nii et kui sa tahad, et vältida oma sõpru näha fotosid, sa pead läbi minema väga keeruline 5-astmeline protsess on nagu, andke mulle klõpsate seda linki, nüüd andke mulle klõpsake uuesti, andke mulle klõpsake uuesti, Lubage mul täpsustada, mida inimesed ei näe oma fotod. See ei ole eriti hea Facebookis oma osa sest nii palju kasutaja kogemus tegelikult, andes neile vabaduse kontrollida, mida inimesed näevad. Me nimetame seda kasutajate kontroll ja vabadus. Kui sa ei lase oma kasutajad seda teha viisil, mis on tõhus ja intuitiivne, siis teie kasutaja kogemus ei ole tegelikult nii suur üldse.  Kas te kutid meeldib öelda midagi Facebook? Kuidas sellest lahti saada? [Ong] Sa ei saa seda välja lülitada, ja see on suur kasutatavus viga poolse Facebook. See funktsioon - ma tegelikult vaatasin seda eile - see on nii, et te ei saa seda teha või ta on maetud kusagil väga sügaval süvendite Facebook, sest ma ei saa aru, kuidas seda funktsiooni üldse. [Malan] Aga mõnikord need otsused ei ole selge sest kutid on andnud meile palju kasulikku tagasisidet erinevate CS50 rakendused ja veebilehed, et loomulikult kasutab. Me ei ole rakendanud kõiki neid taotlusi ja ettepanekuid. 

Osa sellest on saada nii palju taotlusi, et see on ajas kuid mõnikord me lihtsalt teha teadlikku otsust nagu, "Tänan soovituse, kuid me ei nõustu." Niisiis, kuidas sa tegelikult otsustada, mida sa peaksid tegema, kui teie kasutajad arvan, et sa peaksid tegema midagi isegi kui sa ei ole tingimata? See on habras tasakaal tegelikult kuulata, mida oma kasutajatele öelda ja tegelikult kellel mingi rida, kus te ütlete, "Me ei kavatse teha seda, mida need kasutajad ütlevad." Ja eriti, ma arvan, et seal oli tsitaat Henry Ford, mis võtab selle üles päris hästi. "Kui ma palusin inimesi, mida nad tahtsid, oleksid nad ütlesid, et nad tahtsid kiiremini hobused." Kas keegi omamoodi tease peale, mida see tsitaat tegelikult tähendab? See ei ole lihtsalt, et kasutajad teavad, mida nad tahavad, aga see on rohkem, et - [Üliõpilane] Nad ei tea, mida on võimalik. Osalt nad ei tea, mis on võimalik. Tease, et peale natuke rohkem. Mida sa sellega mõtled? [Kuuldamatu õpilase vastus] See on hea. Mida ma arvan, et oleme püüdnud öelda, siin on see, et inimesed teavad, mida nad tahavad. Nad tahavad kiiremini hobused. Mida nad tegelikult tahavad on võime liikuda kiiremini, kuid nad ei tea keskmise millega seda teha. Kui sa tuled oma kasutajate ja oma kasutajate sulle midagi öelda ja nad ütlevad sulle: "Me tahame need funktsioonid ja nende funktsioonide ja nende funktsioonide" sa ei taha tingimata mõtlema: "Lase mind minna "Ja rakendada, mida nad selgesõnaliselt öelda," aga mida sa tahad mõelda on, "Millist ideid ma saan sellest?" Mida nad tegelikult tahavad? 

Ja sealt see, mida saate teha, on luua midagi, mis vastab nendele taotlustele kuid mitte tingimata nii, et kasutaja loodab, et see saab täidetud. Nii midagi lõplikku projektid, väga reaalne, Mis on kasulik heuristiline kui tegemist teha midagi paremat, eriti siis, kui projekteerija on see ülbus temast millega sa omamoodi tean, mis on parim, võite võtta panus oma kasutajate, aga kuidas sa tegelikult minna saan, et tagasisidet? Finaalis projektid, väga konkreetselt, mida toodab optimaalsed tulemused siin? Mis tekitab optimaalsed tulemused - ja ma lähen üle käesoleva aasta teise - on see protsess arendada ja siis katsetamise ja siis itereerimise. Mida mõtlen, testimine on tavaliselt siis, kui sa disaini midagi sa arvad, et see on üsna hea, nagu: "Ma olen nii suur disainer. kõik läheb armastan seda." Ja siis paned ta sinna ja inimesed tõesti ei meeldi see mingil põhjusel. Mida sa pead tegema, on teil võtta osa asju, mida inimesed ei meeldi ja uuendada asju, mis inimestele ei meeldi. See kõlab väga selge protsess, kuid see protsess pidevalt itereerimise peal, mida olete juba ehitatud on protsess, mis aitab teil mitte ainult viimistleda oma disaini oskusi, vaid ka aitab teil täpsustada disain nii et inimesed tegelikult hindame oma toodet isegi rohkem, kui nad tegid enne. 

Ma lähen üle rohkem konkreetseid näiteid, mida sa võiksid tegelikult teevad. Nagu omamoodi viimane näide tootest, vaatame süst. SÜSTA kui ta tuli välja oli väga populaarne. Kas keegi arvata miks? Millised on igasuguseid asju, mida meeldib see, kui olete kasutanud seda või millised on igasuguseid asju sulle ei meeldi? Jah. >> [Kuuldamatu õpilase vastus] >> Okei. See on osa sellest on üürile kasutaja on päring, mis on rohkem ekspansiivne kui väga kitsalt ühe samasuguse, "Sa pead valima endale alguskuupäev "Ja teil on valida oma lõppkuupäeva." Tegelikult, see võimaldab teil olla paindlik umbes see ja see annab sulle kõik lennud, mis ulatuvad. Midagi veel? [Üliõpilane] Nende hulka kuuluvad tasud hind. Nad teevad sisaldama tasusid hind. Maksud ja asjad tegelikult minna otse, et hind ülemises vasakus seda sa ei ole ekslikult mõtlesin, et sa oled tegelikult maksab $ 240 lendu kui see on tõesti 330 $. Midagi veel? Jah. [Kuuldamatu õpilase vastus] Ma ei ole kindel, kas nad tegelikult sul seda teha lasta. Ma võiks olla vale. See võib olla huvitav asi kui sa tahad panna rohkem rõhku eelkõige filtrid et nad push seotud tulemused, mis filtreerivad üles. Aga kas keegi mulle öelda mis on nii erilist sellest vasakul? Kuidas sa traditsiooniliselt otsida lennuga internetiteenuse enne seda? 

Jah. >> [Kuuldamatu õpilase vastus] >> Kas oskate öelda, et - [Üliõpilane] Iga lennufirma. >> Jah. Kõik lennuettevõtjad on oma veebilehel. See kindlustab asju. Ja? [Üliõpilane] Sa tead täpselt, mis kell sa lahkud. Sa ei tea täpselt, mis kell sa lahkud, kuid on seotud filtreid eriti. Las ma tõmba süst. Oh Jumal, pop-ups. Bad kasutaja kogemus. Mis juhtub, kui ma liigutan seda liugurit? [Üliõpilane] Automaatne uuendamine. >> [Ong] Automaatne uuendamine. See on midagi, mis on väga oluline. Enne seda, kui sa tahad otsida lennu sa olid panna oma panuse asukoht, oma toodangu kohta, vajutage Otsi, ta töötleb seda ja näidata oma tulemusi. Kui sa tahad muuta oma päring, siis oleks vajutage kaks korda edasi, sisestada uus päring nullist, ja siis tee seda ikka ja jälle. Tore asi midagi sellist on ta kasutab väga [arusaamatu] asi keskel. Kui sa midagi sellist teha, see laseb välja taotluse ja ta naaseb teid kõiki tulemusi kohe. Selline vahetu tagasiside on midagi, mida teha SÜSTA metsikult populaarne sest see on tõesti lihtne minu jaoks lihtsalt muuta oma päring ja aru saada asjadest, mis on umbes erilist valikut ilma minna edasi ja tagasi, edasi ja tagasi, edasi ja tagasi. Nii et need on igasuguseid asju sa tahad mõelda, kui olete projekteerimisel oma veebilehel. Kuidas ma saan teha, on väga tõhus minu kasutajad läbima iganes nad töötavad ja saada oma Lõppeesmärk võimalikult kiiresti? [Malan] Ja Joosepi punkt varem umbes kasutajad ei pruugi teada, mida nad tahavad, selle põhjal, mida te nüüd teada HTML ja teil on ruudud, nööpe, valige menüüsid, sisestusväljad jms, kuidas te ellu mõiste korjamine algusaeg lend? 

Mis nende erinevate UI mehhanisme oleks te kasutate? Kui sa just teada summa HTML et õpetati enne ja sa tead sisendid on raadio nupud, ruudud, drop-mõõnad, ja sisend kasti, milline oleks teie loomulik valik olnud kuupäeva valimiseks? [Üliõpilane] lülitada. >> Sisend. Või äkki isegi rippmenüü kõigi kuupäevade, eks? Nii keerukam UI mehhanismid nagu see vasakul pool, mida saab rakendada, saad teha seda protsessi palju intuitiivsem liugurit sest aeg on pidev ja inimesed tavaliselt ei mõtle seda nii diskreetne tükkideks. Hea küll. Viimane asi. Kümme kasutatavus heuristika. Kõik asjad, mida me rääkisime ilmselt kuulu ühtegi neist kategooriatest. Kui te lähete seda linki, mis saidid pannakse online, teil tegelikult olema võimalik, nagu te disaini oma kodukale, hoida neid heuristika meeles ja need rusikareeglid. Oma projekte, mida ma soovitan teil teha, et töötada oma app parem on teha paberkandjal prototüüpide esimene. Kui sa mõtled oma taotluse, väga kiiresti visandada, mida sa tahad seda nägema ja veenduge, et kõik lahtrid on korraldatud viisil, mis on väga intuitiivne kasutaja kasutada ja isegi näidata neid paberile prototüüpe oma sõprade ja alustada fookusgrupid. Lihtsalt saada 2 või 3 inimest koos ja paluda neil lihtsalt puuduta need paberile prototüüpe, ja näidata neile uued ekraanid, et näha, kui nad tegelikult aru, mis toimub. 

Mida sa tahad teha, on anda neile ülesanne, motiveerida, et ülesanne, ja just neile rakendust ja lase neil seda kasutada. Ära anda neile juhiseid kaugemale. Sa tahad tegelikult lasta neil suhelda oma app viisil, mis võimaldab teil vaadata kuidas nad seda kasutada kui sa ei seisa kõrval. Ja see on väga oluline. See annab teile palju teadmisi, et on inimesi liikumisvahend eriti asju nii, et ma ei kavatse neid? Kas nad kasutavad eelkõige UI mehhanismid ekraanil viisil, mis on omamoodi hacky? Ma ei kavatse neid tee seda sel moel. Ja kui sa oled teinud selle, mida sa teha tahad? Sinu disain kivid, eks? Mida sa tahad teha, on soovid töötada ja siis tee seda protsessi uuesti. Nii näitavad, et sõbrad, kui olete töötanud see, test, arendada, testida, arendada, testida, itereerima, edasi ja edasi ja edasi. Disain on väga iteratiivne protsess selles mõttes. Sa tegelikult on ehitada midagi ja siis taipan asju see et sa ei teadnud varem ja minna tagasi ja parandada selle. Nüüd, kui arengu osa, see on, mida Tommy läheb näidata teile pärast vaheaega ja kuidas sa võiksid rakendada midagi automaatteksti viisil, mis on üsna lihtne. [Malan] Nagu Tommy luuakse siin, küsimus siis. Palju varem veebilehed - ja kui Joosep ütles 1990ndate stiilis koduleheküljel, see oli rakendusi kus kui sa tahad valida algus ja lõpp, ausalt öeldes juba järgmisel päeval ja isegi mõned veebilehed täna, kuidas sa seda teha on valite tund rippmenüüst, valid minuti kaugusel rippmenüüst, äkki sa valida AM, PM, ja siis sa seda veel 3 korda. Ja nii on 6 klikke ja võibolla mõned kerimine oma kasutaja võib tegelikult anda mingit kuupäeva ja / või kellaaja vahemik selles mõttes. 

Nii et kindlasti optimaalne ja veel siiani oleme näinud ühtegi väljendusrikas võimeid üheski keeles me vaatasime midagi seksikam nagu see liugur on algus ja lõpp. Aga kui sa arvad tagasi nädal 0, kui me rääkisime Scratch, ka seal ei olnud vidinate lihtsalt ei teatud asju. Sa tõesti lihtsalt pidin need põhialuste nagu silmad ja tingimused jms. Nii kena lihtsalt mõtlesin väga abstraktselt nüüd, sõltumatud andmed HTML, Mis tegelikult toimub koos midagi sellist algus-ja lõpuaeg liugur? Kui ma liikuda mu hiir ja ma vajutan et vähe porgand sümbol vasakul ja alustada tõmmates, programmiliselt, mis see on, mida soovite, et oleks võimalik rakendada see teoks saab? Milliseid küsimusi, mida Loogiline väljendeid sa tahad, et oleks võimalik küsida? Mis tegelikult toimub? Sammy? [Üliõpilane] Kus kursori? >> Hea. Kus on kursori? See oli midagi, meil oli vaja väljendada tagasi Scratch, kas see põhineb asukoha või isegi värvi vms. Võite meenutada kunagi nii lühidalt esmaspäeval oli kõik need asjad mida nimetatakse sündmused maailma Web, ja nii pole asjad onclick ja onkeypress ja onkeyup ja onmouseover ja onMouseOut. Nii mõistad, et isegi need asjad oleme olnud võttes iseenesestmõistetavana veebis koos saidid nagu Facebook ja Gmail, isegi kui sul pole aimugi kuidas oleks võimalik rakendada, sest seal on midagi isegi nagu see loeng või Ülesanded 7, mõista, et neid täpselt sama alustele, HTTP ja parameetrid ja GET ja POST, koos lihtsa HTML sisendite et me vaatasime seni ja hetk programmiline mehhanismid, et Tommy umbes tutvustada Kas hakkate ennast väljendada nii nagu sa tegid nädal 0 poolt väga intuitiivselt pukseerige. 

Nii et öelda, Tommy MacWilliam ja mõned uued puzzle tükki meie jaoks veebi. Hea küll. Minu nimi on Tommy ja ma lähen rääkima JavaScript. Lihtsalt disclaimer: ma olen arvamusel, et JavaScript on parim programmeerimiskeelt kogu kogu maailmas. Seal on palju inimesi, kes ei nõustu minuga, aga see on lihtsalt hämmastav. Kui sa lähed tagasi C, kui teil on kirjutada C teise klassi või mõne muu keele, see on lihtsalt masendav kõigis madala üksikasjad pead Tyssätä sisse Seega, kui olete kunagi tunne kurb, kuidas tüütu C on kirjutada, lihtsalt tagasi minna, kirjutada mõned JavaScript. See on nirvaana. Sul end palju paremini oma halb päev. Palju võlu JavaScript pärineb tema võime manipuleerida asjad mis on juba sellel lehel. Kui me kirjutas meie scripte, neid teostatakse serveris, ja lõpuks, et PHP skripti ilmselt väljastada mõned HTML. See HTML saadeti klient, ja siis oligi kõik. Kui PHP soovis lisada nuppu lehe, näiteks, ei saa tõesti teha. See oleks muuta täiesti uue HTML-faili ja saadab selle brauserile. Mis JavaScript me teame, et me saaksime uuendada asju, kui nad on juba lehel ja tänu sellele saame pakkuda palju kohest tagasisidet, mis tõesti parandada kasutaja kogemus meie veebilehel. Lihtsalt kiire sulgege JavaScript selektorid. Me teame, et kui me alla laadida HTML-lehe, et saab olema esindatud DOM. 

DOM meeles on ainult see suur puu, kus elemendid on seotud selle suure hierarhia. Kui me koos töötanud andmebaaside pset 7, üks esimesi asju meil vaja teada, kuidas seda teha oli päringuid andmebaasi. Meil on see suur kasutajate tabelis, ja mõnikord me lihtsalt tahan öelda, "Ma tahan ainult mõned neist kasutajate loend, kes vastavad teatud tingimus." Ka siis, kui meil on DOM peame mingi võimalus päringute ta. Me vajame viis öelda: "Ma tahan kõiki nuppe mis näeb välja selline "Või kõikide piltide lehel." Ja need valijad võimaldab meil seda teha. Nii lihtsalt kiire sulgege. See esimene siin, see # esitada, mis see läheb valima? Kas keegi mäletab? [Kuuldamatu õpilase vastus] >> Jah, täpselt. See saab valida element lehel, mis on ID esitama. Ja nii et räsi tag ütleb, et see valija läheb tööle koos IDd. Kuidas teine, see. Keskne, millised on, et valida? Jah. >> [Üliõpilane] Klass. >> Täpselt. See on nüüd valida kaupa. Vahe ID ja klassi siin on üldiselt ID peaks olema unikaalne jooksul mis tahes ruumi, mida te otsite üle. Nii et kui sa olid otsivad üle kogu veebilehe, sa tõesti peaks ainult 1 elementi, et teatud ID, nii et antud juhul esitama. Mis klassid, teisest küljest, meil on rohkem kui 1 osa samal lehel sama klassi. See võib olla kasulik öeldes ma tahan valida kõike, mis on keskendunud leht mitte ainult 1 asi. 

Ja lõpuks, see viimane siin on veidi keerulisem, aga mida see läheb valida DOM? [Kuuldamatu õpilase vastus] >> Mis see on? [Üliõpilane] Midagi, mis on silt. >> Meil ​​on 2 osa siin. Teine osa on öelda tahan valida need sildid sildi sisend, nii mõni säte, mis on sisend tag. Aga ma ei taha lihtsalt valida kõik sisendid sest midagi submit nupp võiks olla sisend ja midagi tekstiväljale võiks olla sisend. Nii et need nurksulud ma väidan ma tahan ainult valida need elemendid et tüübiks on tekst. Kuskil minu HTML teegid Mul on atribuut nimega tüüp, ja väärtus, et atribuut peab olema tekst. Niisiis, kuidas see esimene osa siin? Esimene sõna selle valijat on vormis, siis on mul ruumi ja siis selle sisendi osa. Mida see teeb, pannes vormi ees on? See saab põhimõtteliselt piirata oma päring. See võiks olla nii, et meil on mõned sisendid lehel mis ei ole järeltulijad vormi. Mis see teha on see öelda, et ma tahan ainult sisend sildid, mis on kusagil nende kohal mõned vanem element kujul. Ja nii sel viisil saame neid rohkem hierarhiline päringut nii et me ei ole lihtsalt valida kõik sobivad antud valijat. Saame liiki piirata, et päringu midagi muud. Nüüd, et me teame, kuidas valida elemendid lehel, Räägime natuke AJAX. AJAX on veel väga trendikas lühend, mis tähistab asünkroonne JavaScript ja XML. See lihtsalt nii juhtub, et XML on lihtsalt kuidagi andmete esitamiseks. 

Selline kaotanud populaarsust hiljuti, nii X AJAX ei kasutata kogu aeg. Põhimõtteliselt, mida AJAX võimaldab meil teha on teha HTTP päringuid kontekstist tulenevalt JavaScript. Kui me oleme oma veebibrauser ja me navigeerida ümber lehekülgedel ja me klõpsate linki, mida meie brauseri läheb selleks vaja on teha HTTP päringu mis iganes link me klõpsake. Aga see pole alati ideaalne, sest kui see on nii, siis nagu David ütles, meil on alati teha kasutaja klõpsab nuppu Esita või klõpsata linki et teha midagi juhtuda, et läheb kaasa HTTP taotluse. Nii AJAX me saame nende taotlused nimel JavaScript. See tähendab, et kui kasutaja suhtleb leht või midagi juhtub, saame tegelikult teha programmiline taotluse mõne muu PHP fail meie kodulehel või midagi muud ja otsida andmeid, et see fail sülitab välja. Võtame pilk näiteks AJAX. See on meie CS50 Finance lehele, mis loodetavasti mõned meist on tuttav. Kui me vaatame HTML sellest lehest, me näeme siin, et olen lisanud mõned asjad, üks, mida ma olen andnud selle vormi ID. Ma olen öelnud id = "vorm-quote". Olen teinud seda lihtsalt sellepärast, et ta läheb teeb see natuke lihtsam valida DOM kuna ma lihtsalt teha väga lihtsa päringu. Mida ma tahan teha siin ma tahan määrata mõned probleem CS50 rahandusministeerium. Nii et kui me läheme finance.cs50.net, iga kord kui ma tahan saada hinnapakkumist, pean klõpsama selle Saa Quote nuppu, ja mis Saa Quote nuppu siis võtab mind teise terve lehekülg. Ja kui ma tahan teist tsiteerida, mul on tabanud nuppu Tagasi ja siis ma kirjuta see, Ma saan tsiteerida, ja ma tabanud nuppu Back. See tõesti ei ole parim kasutaja kogemus. Kes oleks tõesti kasutada saidil, kui see on see aeglane, et saada aktsiate hinnad? Mida me tahame teha AJAX on eemaldada, et samm läheb eraldi lehele selleks et vaadata tulemusi. 

Mida me tegelikult ainult küsida on see, et tõesti väike hind, ja see on ainult väga väike hulk andmeid. Nii et pole mul vaja minna teise kogu HTML lehe, laadida kogu uus partii HTML, võibolla alla veel mõned pildid, mõned teised CSS faile ainult mulle vastata, et väga lihtne küsimus ja kui palju see varu maksumus. AJAX saame teha seda palju lihtsam. Me näeme siin all, et ma ühendamiseks JavaScript fail nimega quote.js. Olgem tegelikult avada selle faili. Mitte sinna. Kõik mu JavaScript failid hakkavad asuma HTML nii et veebibrauser on sellele juurdepääs. Siis on meil eraldi kataloog siia JavaScript, ja nüüd siin on quote.js. Ülaosas seda faili see siin ütleb, et ma tahan ootama terve leht laaditakse enne kui ma üritan teha midagi. Miks on see vajalik? Tuleb välja, et järgmine asi, mida ma teen siin hakata otsima element et leidub mõni valijat. Kui see on siis JavaScript kunagi täidetakse enne seda elementi on koormatud lehel siis kõik, mida ma üritan teha ei kavatse töötada sest ma lähen proovin, et valida midagi, mis ei ole seal veel. Nii et see rivistama top ütleb, et ma tahan, et sa ootama, kuni kõik on laetud nii me garanteerida, et kõik elemendid Otsin tegelikult lehel. See dollari märk tähendab siin ma kasutan raamatukogu nimetatakse jQuery. See jQuery library võimaldab meil kasutada neid selektorid, et me lihtsalt vaatasime. Öeldes $ seejärel läbivad argumendina see # vormi-viitega, Ma nüüd valida, et vorm, et me lihtsalt vaatasin. Nüüd on mul tähendab selle vorm mälu kuidagi. 

Selle objekti nüüd, see esitus kujul, Ma olen nüüd kasutades funktsiooni kutsunud. Mida see funktsioon teeb, on see läheb lisada sündmus. Kui me ei kavatse kuulata on submit sündmus. Nii et kui kasutaja klõpsab et Submit nuppu või vajutab Enter, Sellisel juhul läheb tulistamiseks. Pannes sinna saan nüüd vaike käitumise vorm. Ilma selleta JavaScript, vorm oleks esitada sõltumata PHP fail me kasutada, et hagi atribuut. Kuid selle asemel, ma nüüd öelda, oota, oota, oota, ma ei taha, et sa tegelikult seda teha. Ma tahan, et see juhtuks enne kui minna ja proovida esitada mõned PHP faili. Mida ma nüüd teha tahad? Sel hetkel ma tahan kasutada AJAX kuidagi laadida millises hind varu on. Esimene asi, mida ma pean teadma, mida laos kasutaja soojaks. Selleks, et ma lähen kasutada teise valiku. See on kolmas valijat me vaatasime enne. See ütleb, et ma tahan, et alustad seda vormi elemendi ID vormi-viitega. Siis kuskil sees, et vorm peab leiduma sisend element mis on nime sümbol. Kui me vaatame tagasi meie HTML nägime, et meil oli input [nimi = sümbol]. See tähendab, et see saab valida, et teksti kasti et kasutaja on kirjutades. See on kena. Meil on tekstikasti. Nüüd me lihtsalt vaja teada, mis sees on. Selleks, et me nimetame seda meetodit siin see. Val, ja see ütleb, et ma tean, mida tekstikasti olete. Ma tahan, et sa mulle öelda, mis see on kasutaja kirjutati, et tekstikasti. Nüüd on meil string nimega sümbol, mis on võrdne olenemata kasutaja sisestatud sisse See on kena. Me saame kasutada, et string nüüd, et meie taotlus. See on uus funktsioon siin, see $, välja arvatud me enam ei kavatse valida elemente, me ei kavatse olla kutsudes erinevad funktsioonid, mis on annab meile meie jQuery. See AJAX funktsioon on see, mis tegelikult toimub, et muuta see HTTP taotluse. Nii et me peame ütlema seda mõned asjad. Esimene asi, mida peame rääkima seda funktsiooni on koht, kus ma tahan taotlusel minna. Kuskil minu projekt on mul seda faili sees html kataloogi nimega quote.php. Ma ei pääse seda pilti nägime, just nagu see, kui ma lähen localhost / quote.php. 

Ma tahan, et mu JavaScript esitada taotluse sellele lehele. Mis tüüpi taotluse nüüd? Me nägime enne, et vorm on see meetod = "post" atribuut, ja see tähendab, et see saab teha POST-taotluse, nii et see ei kavatse panna midagi URL, mitte GET taotluse, mis oleks lihtsalt vallandati, kui me lihtsalt külastatud lehekülje veebilehitseja, näiteks. Nüüd olen öelnud ma tahan teha HTTP POST päring lehele, mis asub quote.php. Kui me esitada vorm, mäletad me võiks juurdepääs sisend elemendid sees, mis moodustavad selle $ _POST muutuja. Seni on lugu me ei ole tegelikult saadetakse mööda mingeid andmeid veel. Me oleme lihtsalt ütlesin, et me teeme AJAX taotlus ja siin on taotluse liik teeme. Nüüd peame tegelikult saata mõned andmed lehele. Selleks, et saame kasutada seda vara kutsus andmed. Vara väärtuse selles on tegelikult assotsiatiivne massiiv. Selle põhjuseks on see võimaldab meil saata rohkem kui vaid 1 tükk andmed. Sellepärast on meil need looksulg siin pesitses sees neid teisi looksulg. Võtmeid nende assotsiatiivse massiivi saab olema sama asja kui need nimetus omistatakse meie vormi elemendid. See tähendab, et kui ma saadan mööda võti sümbol, see tähendab, et minu PHP lehekülg pääseb neile andmetele $ _POST [sümbol] just nagu me tegime enne, kui olime plangil. Ja nüüd tegelikud andmed tahame saata saab olema väärtus sees see assotsiatiivne massiiv. 

Meil hoitakse seda teksti muutuja nimega sümbol, ja nii me saadame mööda nüüd võtme sümbol ja väärtus iganes kasutaja sisestatud sisse Nüüd oleme teinud seda HTTP taotluse, meie PHP fail on täidetud, ja see läheb saata mõned andmed nüüd tagasi klient, et just seda taotlust. Nüüd tuleb vastata mida iganes server ütles meile. Selleks, et meil on see viimane vara siin nimetatakse edu. Selle väärtus edu võti on tegelikult saab olema funktsioon, ja see on üks väga lahe asju, mida saate teha programmi JavaScript. Mitte ainult saate on ints või massiive kui väärtus sees assotsiatiivne massiiv, saame ka funktsioon. Nii öeldes edu, see on mu võti. Koolon ütleb siin on väärtus, ja nüüd väärtus on tegelikult funktsioon. Nii et me ei pea andma selle funktsiooni nimi iseenesest. Me ei saa lihtsalt öelda, et see saab olema mingi funktsioon. See saab võtta 1 argument. Argument, et seda funktsiooni saab olema mis iganes server saatis meid tagasi taotluse. Just nagu siis, kui meie brauser teeb taotluse server saadab midagi tagasi ja brauser kuvab selle, kontekstis AJAX me lihtsalt esitanud taotluse, server saatis midagi tagasi, ja nüüd oleme, et esindatud string. Seda stringi ma tahan näidata, et lehel. Selleks, et ma lähen on viimane valijat. Ma tahan valida elemendi ID hind. See on lihtsalt tühi div et olen loonud lehel ja ma tahan, et seada sisu, et div olla mis iganes server saatis meile tagasi. Olen tegelikult modifitseeritud quote.php natuke. 

Selle asemel, kutsudes krohvi ja muudavad mõningaid lehel quote.php nüüd lihtsalt läheb välja trükkida väärtus aktsia nagu string. Nii et kui sa olid tegelikult külastada lehekülge, siis oleks lihtsalt näha, et väike string olenemata aktsia hind on. Üks viimane asi, mida me peame tegema siin on lihtsalt veendumaks, et see funktsioon tagastab false. Mida see ütleb on, et kui ma olen sees sündmus ja et sündmus tagastab false tagasipöördumise asemel tõsi, see tähendab, et ma ei taha originaal sündmus tule. Sellisel juhul, kui me ei olnud JavaScript ja me esitatud kujul, meie veebibrauser on öelda: "Ma lähen Kirjuta et andmed koos" ja nad ei kavatse saata teisele lehele. Sest me AJAX nüüd, ei ole vaja saata kasutaja teisele lehele. Me lihtsalt näidata tulemusi dünaamiliselt samal lehel. Me tõesti ei taha neid kuhugi minna ja ma tahan jääda samale leheküljele. Nii et pannes vale, tagame, et vorm ei tee seda meie eest. Võtame pilk see tegelikult välja näeb. Meie quote lehekülg näeb sama. Las ma tõmba inspektor siia, et saaksime näha, mis toimub. Tee natuke vähem tohutu. Pea meeles, kui me avada vahekaarti Network, see on koht, kus saame näha kõiki HTTP päringuid mis on toimumas lehel. 

Sest sümbol lase mul kirjutad AAPL ja klõpsake Saa Quote. Nüüd nägin, et osa Apple maksab teatud arvu dollarit lihtsalt ilmus lehele, kuid link ei muutu üldse. Tegelikult siin on HTTP taotluse, et me just tehtud. Tegime POST taotluse quote.php. See on loogiline. See on see, mida server saatis meile tagasi. See ei ole enam see hiiglaslik HTML dokumendi pilte ja asju, see on lihtsalt rida teksti, ja siis me lihtsalt kuvatakse rida teksti. Kui me tagasi minna päised ja näha, mida me tegelikult saadetakse sees see HTTP taotluse, näeme siin all, et saatsime mööda võti sümbol ja väärtus AAPL, mis on see, mida kasutaja sisestatud sisse See on kena, kuid see on ikka natuke tüütu. Ma veel klõpsake seda nuppu, et saada laos tsiteerida. Oleme hõivatud inimesed ja meil ei ole aega klikkima nupud. Google mõistnud seda veidi aega tagasi, kui nad ellu Google Instant. Mida Google Instant ei ole nagu tipite see lihtsalt hakkab tulemused ilmuvad teie jaoks nii et sa ei pea muretsema isegi klikkides Otsi. Tegelikult, lõbus lugu on seotud selle. Kui Google Instant tuli välja, inimesed olid nagu: "Vau, see on super hämmastav." "See on nii lahe." Ja tudeng alla Stanfordi kes oli 19 ajal tegin selle saidi nimega YouTube Instant. Kõik YouTube Instant ei tegelikult YouTube'ist otsida koheselt. Nii et selle asemel, et minna YouTube.com ja vajuta Search, kui ma hakkan kirjutades YouTube Instant midagi CS50, me ei näe siin, et see üritab edasi aeglase internetiühenduse asustada need tulemused elada. Selleks, et me saame tegelikult teha väga lihtsate muudatuste meie quote.js faili. Praegu me lisades sellele sündmusele kui vorm esitatakse. Me ei taha teha kasutaja väidavad, et vorm enam niiet selle asemel tule see sündmus iga kord, kui kasutaja vajutab. Selleks, et Vaatame esmalt muuta sündmuse esitada keyup. See tähendab, et selle asemel et oodata vorm esitada, iga kord klahvi ei vajuta, midagi juhtub. See ei ole enam mõtet lisada see keyup sündmus kogu vorm. Me tõesti ainult hoolid, et otsingukasti. 

Et valida, et nüüd, me ei saa seda olla, mitte vormi-viitega, vormi-viitega ja me peame sisend (type = tekst) või me võiksime öelda (nimi = sümbol) - mida iganes me tahame. Nüüd on viimane asi, mida me peame tegema. Pea meeles, siin all, kui me ütlesime tagasi false ütlesime me ei taha, et maksejõuetusjuhuni tule. Aga see lihtsalt nii juhtub, et kui me keelata et nüüd, mida iganes me kirjuta ei kavatse näidata üles brauseri enam sest see oleks vaikimisi käitumist kirjutades tekstikasti. Me ei taha enam eirata, et nii teeme hävitada selle tagasi false. Kui me salvestada et ja asendusostu lehekülge, nüüd kui ma hakkan kirjutama AAPL näete, et aktsia hind allosas siin on lõpetamas automaatselt. Nii et siin on CS50 Finance Instant. Tegelikult lõbus lugu YouTube Instant on, et õpilane lihtsalt selline kirjutas seda 1 öö projekt, ja järgmisel päeval pakuti talle tööd, mida YouTube tegevjuht. Nii nii lihtne, sa CS50 õpilased, oma lõpliku projekti saan teid töö juures YouTube'i. Midagi sellist on väga lahe idee lõplik projekt, eks? Meil oli mõned olemasolevad funktsioonid, mis me tahtsime integreerida. Me parandada kasutaja kogemus natuke, ja äkki otsivad midagi YouTube Instant võiks olla palju lihtsam kui otsite seda regulaarselt YouTube. Nii et AJAX lühikokkuvõte. 

Näidetes, et Joosep oli näidata, nägime palju autocompletes, ja need autocompletes on tõesti väga mugav, sest me ei pea meeles - Näiteks, kui te ei mäleta, aktsia hind Apple ja me lihtsalt tean, et see aa midagi, mitte lihtsalt ütles mulle, "Osakaal see asi maksab see palju raha," Ma mingi tahaks teada millised varud alustada aa. Me saame teha, et tõesti kenasti koos Bootstrap raamatukogu, mis on juba lisatud sees CS50 rahandusministeerium. Kui teil tulla siia, et JavaScript tag ja kerige Typeahead, see on lihtsalt tore plugin, et keegi juba kirjutas meile, ja me oskame kasutada oma funktsionaalsuse niimoodi. Ma tipitud ja siin on nimekiri mõned riigid, mis algavad A. Ütleme, et ma arvan, et see on väga lahe ja see on minu jaoks aega, et lisada see minu lehel. Selgub, et see on tõesti väga lihtne. Vaatame üle hüpata siin quote3.js. Minu fail näeb välja natuke teistsugune. Siia alla kõik minu AJAX stuff on sama. Tahan laadida seisud ilma minna teisele lehele. Aga nüüd ma tahan kasutada seda pluginat. Bootstrap dokumentatsioon on suurepärane näide sellest, kuidas täpselt ma ei tee seda. Ma tahan öelda: "Siin on sisend, et ma tahan automaatteksti kohta," ja ma lähen kutsun seda funktsiooni nimetatakse typeahead, ja et läheb tegelema kõigi Typeahead kraami meile. See initsialiseerida nimekirja, siis teeme kõik meie filtreerimine. Ainuke asi, see peab teadma, milliseid andmeid me autocompleting kohta. Nii sain teada selle võtme lihtsalt lugedes dokumentatsioon ja vaadeldes näiteid. Kui ma annan see võti allikas, selle võtme väärtus on vaid mõned array asju ma tahan automaatteksti kohta. See muutuja tuli see teine ​​fail. Ma avada symbols.js. 

See symbols.js on lihtsalt see tõesti suur massiiv sisaldab stringid Kõigi nende varude sümbolid NASDAQ. Kui ma tahan hüpata tagasi HTML, nii jharvard, vhosts, globalhost, html, mallid, quote_form. Kuna see on nüüd nimega quote3.js, lubage mul muuta JavaScripti fail ma olen ka siin. Nüüd on mul quote3.js, nii et ma lähen laadida selles eraldi JavaScripti fail, üks, mis on, et Bootstrap automaattäitmine. Nüüd, kui ma hüpata tagasi brauser, asendusostu lehekülge, ja ma hakkan kirjutama aa, seal on minu automaattäitmine. Ja see oli tõesti nii lihtne. Mul oli 1 rida koodi, mis lihtsalt ütles: "Siin on asju, mida ma tahan automaatteksti kohta," ja äkki mul on see tõesti, tõesti kena funktsionaalsus ei kogu palju jõupingutusi. Nagu te arendada veebisaidid ja eriti esiotsa pool asju, sa lähed, et leida see on nii palju. Seal on palju, palju, palju lahedaid vabad teegid seal et muuta see super lihtne teha asju niimoodi. Kas keegi mõelda iga puudusi lihtsalt autocompleting selle suure nimekirja sümboleid? Mis võiks olla midagi, mis ei ole parim selle lähenemisega? Jah. >> [Üliõpilane] Aeg, kui teil on palju [kuuldamatu] Jah. Praegu me allalaadimine see tohutu JavaScripti fail ja seal on palju sümboleid. Ja kui meil on ton kraami, see võiks omamoodi suurendada latency mitte ainult otsivad aga ka allalaadimise tegeliku faili. Suur. Midagi veel? Praegu pole mingit tõelist tähtsust. Kui ma kirjuta, ettevõtted, mis ilmub siin pruugi olla kõige populaarsem firmad, mis algavad A. 

Enne kui ma saan Apple, see võib võtta veel mõned tegelased leida, mida ma otsin. See automaatteksti ei ole selles mõttes olulised. See on lihtsalt ütlen, "Midagi, mis sobib ma lähen kuvada." Selle asemel, et tahaks kuidagi integreerida teataval määral seotud minu otsingud. Kui ma lähen siia, et Yahoo! Finance, finance.yahoo.com, Kui ma püüan sisestada sümbol Yahoo! Finance lehekülge ja ma hakkan kirjutama goog, mul on see kena nimekiri asjadest. On selge, et see näeb välja nagu Yahoo! Finance on midagi targem siin. Nad on mõned tekst ja neil on ka täiendavat teavet nagu nimi laost. See on midagi, mida ma ei saa tõesti vaid minu stock nimekirja sümboleid. Ma tahan seda ja ma lähen ta. Selleks, et teeme paar asja. Vaatame kõigepealt avada inspektor seda lehte sest me nägime, et see leht ei pealelaadimisel üldse nii et ilmselt AJAX kuidagi tuleb laadimist oma andmeid. Saame teada, milliseid andmeid see laeb. Kui ma vajutan seda vahekaarti Network, need hakkavad olema kõik taotlused, mis algavad nähtud leegiga kuumutamiseks. Nüüd, kui ma kirjuta goo, näeme, et ma just uue HTTP taotluse. See on ilmselt, kui see info on pärit. Muidugi jah, kui ma vaatan seda URL, mis on natuke imelikult nimega, näeme, et see on täpselt, kus Yahoo saadab välja oma andmeid. 

Olen loonud eraldi faili nimega suggest.php see on väga sarnase sisuga lookup funktsiooni. See on põhimõtteliselt kavatse teha päringu Yahoo link, saada tagasi mõned andmed, ja saatke see mulle tagasi. Nüüd, selle asemel et kasutada seda suur, tohutu nimekiri sümbolid, Oskan kasutada Yahoo kena tekst asjad, ja ma ei pea alla, et massilist JavaScripti fail. Ma olen ainult kavatse lammutama tegelikult vastava varu sümboleid. Olgem hüpata seda. Nii html, js. Oleme nüüd quote4. Nüüd me enam ei kasuta, et suur nimekiri JavaScript failid. Aga seal on väike tüüpi disaini probleem siin. Me oleme öelnud, et AJAX on asünkroonne. Mida see tähendab, et kui ma teen AJAX taotlus, nii siin on line 8, see on koht, kus minu AJAX taotlus tegelikult vallandati. Oletame, et nüüd on mul natuke koodi siia alla, et kavatseb teha mõned asjad meeldib kasutajale märku või midagi muuta lehel. Mida ei juhtu on brauser ei kavatse ootama sellele soovile jätkata enne tulevad alla ja tabab seda joont. See on asünkroonne osa. See saab teha seda taotlust ja öelda: "Kui olete lõpetanud, "Tagasi tulla ja helistada, et funktsioon, mis ma ütlesin sulle helistada sees edu." See tähendab, et me ei saa lihtsalt alla laadida kõik aktsiad varem. Me peame taotluse ja ootama, et midagi tagasi tulla. See tähendab, et enne, me võiks lihtsalt öelda Bootstrap, "Siin on nimekiri asjadest, mida ma tahan, et sa automaatteksti kohta." Me ei saa enam teha enam, sest me ei tea, mida me tahame tegelikult automaatteksti kohta. Õnneks Bootstrap mõelnud seda seetõttu, et need on targad poisid seal, ja nad tegelikult andis meile veel üks võimalus laadida selles Typeahead plugin. Enne, kui kasulik oleks selline allikas vara oli lihtsalt selles suures valikus asjad automaatteksti kohta. 

Nüüd allikas vara on tegelikult funktsioon, ja selleks, et see funktsioon on välja selgitada, mis asjad automaatteksti kohta on. Kuidas see saab aru, et läbi on see saab küsida Yahoo! Finance Mis parimaid asju automaatteksti on. Selleks, et ma teen väga sarnane AJAX taotlus. Ma lähen paluda seda lehte kell suggest.php. Ma tahan saata mööda sümboleid veel. Ja nüüd minu edu, Bootstrap dokumentatsioon ütles mulle et selleks, et asustada, et nimekiri asjadest, kõik, mida ma vaja teha, on edasi antud massiivi nüüd tagasikutse funktsiooni. Kuid oodake minut. Kui see peaks olema massiiv ja AJAX saadab mulle tagasi teksti, kuidas on see võimalik? See tutvustab uut viisi Andmevahetuse nimega JSON. Sel juhul me ei ole just tagasisaatmise lihtne tekstistringi. Nüüd me tegeleme selle keerulisem nimekirja aktsiate sümboleid. Need börsisümbolid saab ka asjad firma nimi või jooksevhindades. Lihtsalt kasutades suur pikk string, mis pole vormindatud mõnes prognoositaval viisil ei kavatse olla parim viis saada see andmeid Yahoo server mulle nii et ma lihtsalt aru. JSON on tehnoloogia, mis kasutab ära kuidas me loome assotsiatiivne massiivid JavaScript. See näeb välja palju nagu JavaScript assotsiatiivne massiiv, ja tegelikult sellepärast, et see on. JSON tähistab JavaScript Object Notation. See on põhimõtteliselt kokku lepitud formaadis andmeedastusel edasi ja tagasi. Siin see JSON objekti või selle JSON assotsiatiivne massiiv saadab mulle mõned andmed muidugi. 

Võtmed see massiiv on asjad muidugi, et väärtus on cs50, ja siin all näeme, et saan raha, mis on massiiv. Ma ei pea tegema asju sõeluda välja stringid ja otsida komasid ja hulle asju niimoodi. Sest see on deklareeritud käesoleva JSON formaadis, JavaScript ja jQuery juba funktsioonid teisendada string mis näeb välja selline JSON arvesse tegelik JavaScript assotsiatiivne massiiv et saame koos töötada. Doing see on nii lihtne öelda, et ei ole enam seda pilti, suggest.php, saates mulle tagasi lihtsalt mingi teksti, aga ma tean, et see saab olema saates mulle tagasi JSON. See tähendab, et JSON on võimalik konverteerida JavaScript assotsiatiivne massiiv. Ja nii jQuery, ma tahaksin, et sa teeksid seda minu heaks. See tähendab, et vastuse parameeter siin, see ei ole enam lihtsalt stringi. Sest me oleme rääkinud jQuery et siin tuleb mõned JSON, jQuery saab olema piisavalt tark, et öelda: "Sa tahtsid JSON?" "Ma lähen selle saaks ümber assotsiatiivne massiiv teile." Olgem tegelikult vaatleme Network sakk kui meil on quote4.js. Muudame seda ja asendusostu lehekülge. Nüüd ma lähen kirjuta-jälle. Olen teinud paar taotluste suggest.php, kuid nüüd seda vastust mitte ainult nöör, see on JSON. Nii et mul on avatud lokkis traksidega, öeldes: "Siin on assotsiatiivne massiiv." 

Esimene ja ainus võti selle assotsiatiivne massiiv nimetatakse sümbolid, ja siis siin on massiivi kõik asjaomased tähised tulevad nüüd Yahoo! Finance, mitte et hiiglaslik nimekirja. See, kuidas ma lihtsalt asustada see automaatteksti plugin mõned andmed, mis pole pärit kohalikku faili, mis on juba eelnevalt vaid midagi muud. Tuleb välja, et me saame tegelikult ära tehnoloogia nimega JSONP, või JSON ja polstrist, mis kõrvaldab selle suggest.php käsi. Aga selle asemel, et teeme seda, teeme selle asemel võtta pilk kuidas ma saan parandada seda isegi rohkem. Ma tõesti nagu Bootstrap on Typeahead. See on tõesti kena. Aga me läheme hea JavaScript ja tahame sellist teha seda ise, võibolla vaatleme, mida see plugin võiks teha. Olgem enam kasutada, et Typeahead asi, ja proovime teha seda nimekirja pakutud varude ise. Siin quote6.php läheme alustad samamoodi. Iga kord, kui keegi liigid midagi, me tahame teha AJAX taotlus. See on sarnane meie algne CS50 Finance Instant. Selle asemel et teha taotluse quote.php, me nüüd teha taotluse, et sama faili enne seda suggest.php, mis on lihtsalt läheb vedama andmeid Yahoo! Finance. 

Jällegi, me ikka ootame JSON, kuid nüüd kuna Typeahead ei tee seda meie eest, meil ka on vaja saata mööda väärtus, mis on seestpoolt praeguse teksti kasti. Nüüd me teame, mida küsida Yahoo! Finance, ja nii nüüd siin on funktsioon, mida me tahame ellu pärast seda, kui lõpetab. Meil ei ole plugin teha nimekiri meie jaoks, nii siin, kus me tegelikult toimub ehitada terve rida ettepanekuid. Selleks, et meelega PHP me liitsõnumeid need suured stringid HTML siis prinditakse neid, mida me saame teha sama täpne asi JavaScript. Esiteks me läheme alustad see string nimega ettepanekuid, ja see string lihtsalt läheb sisaldada HTML. Me tahame seda nimekirja asjadest, nii et me läheme alustad seda nimekirja tag, ja nüüd me ei kavatse itereerima üle kõik sümbolid, mis olid tagastatud meile tagasi. Pea meeles, sest me oleme öelnud andmetüüp: "Jon", see ei ole string. See on juba massiivi meile. See on väga lahe. Me ei saa lihtsalt öelda: "Ma tahan, et sa lisada nimekirja element." Me paneme selle sees element pool, et anname selle klassi ettepanekuid nii et me teame, mis see on, ja nüüd siin on sümbol, mis tagasi jõudsime Yahoo! Finance. 

Kui oleme loodud element iga sümbolid oleme saanud tagasi, me lihtsalt tahame sulgeda nimekiri. Nüüd ettepanekuid esindab see väike HTML fragment et kui panna leht saab olema nimekiri asjadest, mida me otsime. Nüüd aga panid selle lehel. Selleks, et ma olen tegelikult loodud teise tühja div ja ma olen teinud selle ID ettepanekuid. Palju nagu me seada sisu div, mis kuvab hind varude andmeid, me nüüd tahan seada sisu div-mis iganes see string mis sisaldab neid sümboleid. Kasutades seda HTML meetod, seda ettepanekuid muutuja, see string, on string HTML. Ma tahan, et sa selle HTML ja pane see sees div kutsus soovitusi. Me oleme lihtsalt lisada midagi DOM nüüd. Lisasime mõned uued elemendid DOM, et saame nüüd lehel kuvada. Vaatame, mida see välja näeb. Kui me koormus quote6 ja nüüd me tuleme tagasi, nüüd kui ma hakkan kirjutama AAPL, me seda enam ei ole Bootstrap automaatteksti kuid nüüd on meil see nimekiri, et tegime ise. See on natuke koledam kui Bootstrap Typeahead, näiteks kuid see ei võimalda meil teha veel üks asi. Kui olime vaadates, et Bootstrap plugin, nägime, et kui me autocompleted, üks automaatteksti väärtuste oli AAPL. See ei pruugi olla nii kasulik. Nagu kasutaja, ma ei pruugi kohe tunda kõik laos sümboleid. Mida ma olen ilmselt tõenäolisem tunda on ettevõtte tegelikke nimesid. Nii et kas ei oleks tõesti kasulik, kui mitte öelda AAPL see ütles midagi Apple Inc Sest me oleme veeres seda ise, me tõesti lihtne teha. Avame oma viimase quote fail siin, nii quote7. 

Sama asi. Ma olen lihtsalt loonud teise PHP faili, et naaseb meile midagi enamat kui lihtsalt sümbolitega. Samuti annab meile tagasi ettevõtte nimed. Ja nii me teeme sama asja. Me teeme AJAX taotlus. Kui taotlus on täidetud, me ei kavatse täita seda funktsiooni siin, ja seda funktsiooni saab ehitada suur jada elemendid. Aga erinevus on selles, et raha nende nimekirjade ei ole enam pelgalt sümbol, see on nüüd nimi. Nii et meil on üks väike probleem. Kui me kasutame oma lookup, me peame kuidagi edastada see sümbol. Me ei saa edasi lookup midagi Microsoft Corporation. Meil on vaja läbida see MSFT. Kui me kirjalikult HTML on meil palju toredaid sisseehitatud atribuute. Oleks võinud sellega seotud href või klassi. Aga mida me tegelikult vajame nüüd on kõik need lingid on aktsia sümbol sellega seotud. Ei ole sisseehitatud HTML atribuut aktsia sümbol, kuid õnneks HTML5 võimaldab meil luua oma atribuute olla iganes me tahame. Öeldes andmete sümbol, olen lisanud uue omaduse kelle nime ma vaid koosneb, ja see on okei, sest mul eessõna seda need andmed. Me läheme salvestamiseks sees seal märki laos nüüd. Mida see tähendab, et kuigi me kuvad väärtus firma nimi sees meie automaatteksti me ikka meeles sümbol mis on seotud iga ettevõte. Kuidas me teeme, mis on sees see element ise. See tähendab, me peame tegema veel ühe muudatuse. Kui me klõpsake seda nüüd, me peame tegelikult ära sümboli atribuut mitte ainult selle väärtust. Kui me varundada, me omistame sündmus ettepanekutele. Kui üks nendest ettepanekutest on klõpsatud nüüd, ma tahan teha midagi. Mida ma tahan teha, on muuta väärtust, et sisend kasti. Nüüd tahan ma seada selle sama Val funktsioon. 

Nii et ilma ühtegi argumenti selle val funktsioon tagastab teile, mida on juba tekstikasti, aga kui annad talle stringi, see vőtab et string ja pane see tekstikasti. Olen valides oma teksti kasti samamoodi. See nimi on sümbol sees vormi-viitega. Nüüd ma saadan ta atribuudi väärtuseks andmete sümbol. See asi siin on uus, see $ (see). Mida see tähendab on element, mis klõpsatud. Me näeme siin, et me ei kinnitamise klõps iga elemendi klassi ettepanek eraldi. Pigem me oleme lähenemas seda natuke teistmoodi. Selle asemel me ütleme alati, kui midagi sees käesoleva ettepanekud div, mis meeles on lihtsalt konteiner sellesse loetellu kui midagi sees see div on klõpsatud ja see on klassi ettepanekut, Ma tahan seda sündmust tule. Põhimõtteliselt, mida see tähendab, et me saame teha, on meil võimalik taaskasutada see sama sündmus käitleja kõikide asjade nimekirjas. Nii et me ei pea olema üks sündmus käitleja esimese elemendi eest ja erinevate sündmus käitleja teise elemendi. Me saame selle asemel öelda: "Ma tahan sama sündmus käitleja taotleda kõik, mis minu nimekirjas." Aga me peame kuidagi teada, mis osa klõpsatud. See "see" võtmesõna esindab just seda. See on objekt, mis oli lihtsalt klõpsab kasutaja. Kui ma lihtsalt klõpsatud 3. link, moodustab see osa, et 3. link, mis tähendab, et ma saan selle atribuudi andmed-sümbol, mis me teame peab sisaldama sümbolit, mis on seotud firma ma lihtsalt klõpsatud. Kui me tagasi hüpata meie rahandusele lehel näeme nüüd, et kui ma hakkan kirjutama midagi MSFT, me ei saa enam lihtsalt aktsiate sümboleid, me nüüd saada tegelik ettevõtted. Aga kui ma vajutan üks nendest äriühingutest, näeme, et me tegelikult populating tekstiväljale mitte ettevõtte nimi aga mis iganes oli talletatud nende atribuute. Ja nii kui ma tegelikult kontrollida ühe elemendi õigus klõpsates seda ja klõpsates Kontrollige Element, me tegelikult saame näha, mida see välja näeb. 

Pea meeles, see on midagi, mida me loodud sees, et silmuse kui olime ülesehitamisel, et string HTML. Me näeme siin, et need andmed-sümbol on väärtus MSFT, mis on suurepärane. See, mida me ootasime. See on sümbol ja see, kuidas me saime raha, et me peame kasutama sees selle teksti kasti. See on piisavalt päring sest see on selline igav. Lihtsalt teha mõned kiired lisaseadmed meie portfelli leht. Kui oled kasutanud CS50 Finance ajal ja hakkate müües ja ostes palju varusid, lõpuks see tabel ei hakka päris suur, ja sa lähed tahan börsisümbol, muidugi. Kui tabel on tõesti väga suur, võib see olla kasulik kasutajal proovida otsida üle. Toas otsingukasti, kui ma hakkan kirjutama midagi Disney ja otsin oma Mickey Mouse laos, näeme, et see tabel nüüd filtreerimine selle põhjal, mida ma lihtsalt kirjutada sisse See funktsioon näeb välja super keeruline, kuid see on tõesti väga lihtne koos jQuery ja JavaScript. See portfolio.php fail sisaldab JavaScripti fail nimega portfolio.js. Võtame pilk seda. Nii html, js, portfell. Siin, kus me teeme, et otsida lauale. Esimene asi, mida ma pean tegema, on lisada sündmus käitleja et tekstikasti sest me teame, et me tahame, et meie filtreerimise funktsioon tule iga kord, kui kasutaja vajutab midagi, sest meil ei ole aega Otsi nuppe. Esimene asi, mida peame tegema, on aru saada, mida kasutaja otsib, just nagu me tegime enne. See märksõna tähistab praegune element kasutaja suheldes. 

Kuna kasutaja on suheldes otsingukasti, $ Tähendab see otsingukasti, nii this.val annab meile mis seal sees on otsingukasti kasutaja on hetkel kirjutades. Nii, nüüd me tahame teha, on me tahame kinnitada, üle kõigi ridade sees meie lauale. Et valida kõik read meie tabelis, andsin selle tabeli ID tabelis portfelli ja igas reas on esindatud TR element, nii et see valija läheb tagasi minu suur massiiv Kõigi ridade minu lauale. Nüüd tahan ma kinnitada, üle selle massiivi. Ma võiks sulle jaoks silmus, kuid jQuery tegelikult annab meile kena funktsioon nimega "iga." Mida igaüks teeb on iga võtab ühe argumendina, ja see argument on funktsioon. Mis see saab teha, on see saab kohaldada, et funktsiooni iga element sees selle nimekirja. See funktsioon võtab üks argument, mis on e, ja kui see funktsioon on täidetud, seda e läheb asendada esimese rea, siis teises reas, ja siis kolmas rida. Selle, kuidas see on sama asi nagu jooksmine jaoks silmus ja siis figuring praegune element põhineb indeks sees oma jaoks silmus. Igal iteratsiooni, iga nende elementide tabelis, Ma tahan vaadata, kas teksti element - teksti lahtri sees rida - sobib, mida ma otsima. See suur pikk jada käske, kuidas ma saaks seda teha. Esiteks jälle see viitab nüüd - sest see on sees uus funktsioon - see on nüüd praegune rida tabelis. Ma tahan olla praegune rida tabelis, ja ma tahan saada kõik oma lapsed. Pea meeles, DOM on hierarhiline puu, mis tähendab, et elemendid on laste arv. 

See. Lapsed funktsioon läheb tagasi minu juurde tagasi massiivi kõik elemendid et on lapsed, antud juhul rida tabelis. See on vaid lihtsalt rakkude sees rida. Tahan lihtsalt otsida üle esimese lahtri. See. Esimene funktsioon ütleb mulle esimese osa selles massiivis. Siis teksti funktsioon ütleb mulle täpselt, mis seal sees on, et raku sest ma tahan, et otsida üle, et teksti. Lõpuks, olgem teisendada see väiketähtedeks, et saaksime teha teksti tõstutundetu päringut. Lõpuks tahame näha, kui see string sees tabel sisaldab stringi me otsite. IndexOf funktsiooni JavaScript teeb just seda. See ütleb meile, kas see string sisaldab muu string. Kui see on tõsi, et lahter sisaldab, mida ma otsima, siis ma tahan veenduda, et teda näidatakse. Näita meetod ütleb: "Näita element." Kui see nii ei ole, siis see tähendab, olenemata Otsin ei sisaldu jooksul, et rida, ja nii ma tahan peita on kasutaja. See saavutab selle kena filtreerimise kus enam näeme kogu tabeli. Kui olete huvitatud, kuidas teha see ticker samuti, Saadame allikas online. Aga see on tõesti lihtne. JQuery on fantastiline meetodeid nende animatsioone ja manipuleerimine CSS omadused. Nii, et see on minu jaoks. 

Mis siis ees ootab? Nagu te näete mõne päeva, lõpliku projekti ettepanek on tingitud. Lõpliku projektide ettepaneku küsib mõned küsimused, kuid nende hulgas on kolm vahe - 1 "hea" verstapost, üks parem verstapost, ja üks parimaid. Idee on tõesti teid aidata määrata oma ootusi nii et minimaalselt siis oleks rahul väljund oma lõpliku projekti ja see "hea", kui olete mures. Aga siis huvi saada jõuad natuke midagi paremat või midagi paremini, siis me ka omamoodi push te suunas, et hästi. CS50 Hack-a-thon, vahepeal on paar nädalat. Tavaliselt teeme seda loterii alusel alus, kuna huvi, kuid koefitsiendid me võtame paarsada meist eribussid Harvardi väljakul alla Kendall Square, kus Microsoft on ilus rajatis tabavalt nimetatakse "NERD" - New England Teadus-ja Arenduskeskus. Me saame seal umbes 8:00 Me peame natuke toitu. Umbes 01:00 on meil mõned rohkem toitu. Umbes 05:00 kui sa ikka ärkvel me pea üle IHOP või teid tagasi ülikooli. Eesmärk on sukelduda lõplik projektide koos klassikaaslastega ja personal. Siis paar päeva hiljem on CS50 Näitused, mis on tegelikult mõeldud võimaluse kutid esitleda oma tööd ja saavutuste eest semestris samas Puutudes omavahel ja saada tunnet, mida igaüks tegi. Olles seda öelnud, palju tänu Tommy ja Joosep ja me näeme esmaspäeval.  [Aplaus]