[Powered by Google Translate] [Savaitė 9 Tęsinys] [David J. Malan - Harvardo universiteto] [Tai CS50. - CS50.TV] 

Tai CS50. Tai 9 savaitės pabaigos. Labai ačiū. Pagaliau. Savaitė 9. Aš jį. Šiandien mes ir toliau mūsų pokalbį apie interneto programavimo link galutinio projekto akis, ne todėl, kad turite kažką daryti, Web-based galutinius projektus, bet dėl ​​to, kad arba galutinių projektų arba po CS50 tai tikrai moderni programinė įranga kryptis, kuria vyksta. Ir vis dėlto iš tikrųjų tai ne paprastas dalykas. Iš tiesų, vienas iš sudėtingiausių dalykų, kuriuos reikia padaryti yra projektavimo aspektas. 

Pavyzdžiui, pagal projektą turime omenyje faktiškai gauti vartotojo sąsaja arba vartotojo patirtį. Aš Manyti, ir mes žinome, iš neseniai problemą, , kai iš jūsų kelias eteryje savo diegliai apie kai programinė įranga, arba aparatinė įranga, kuri jums, ar dėl kampusie arba autonominis infuriates yra daug svetainių ten, yra daug aparatūros ten, kad šios rūšies sucks. Tačiau tikrovė yra tokia, kad siekį, kad būtų lengva naudotis, tačiau vis dėlto galinga yra labai sudėtingas uždavinys. Taigi, šiandien aš paklausiau Juozapas ir Tommy prisijungti prie manęs čia taip, kad mes galime turėti pokalbį, tiek dėl dizaino ir kokių mąstymo procesų turėtų pradėti išgyvena savo galva kai kuriate savo galutinius projektus, jūsų būsimos veiklos. Ir tada su Tommy pagalba mes pažvelgti į kai kurių įgyvendinimo detales. Kaip jūs galite turėti tam tikrą viziją ant popieriaus arba savo proto kad galite vykdyti programiškai naudojant kai kurias technologijas ir metodus, mes ką tik pradėjo kalbėti apie, ty "JavaScript" ir kažkas dar naujesnis, ty AJAX Asynchronous JavaScript. , Kuri leidžia jums sukurti labiau dinamiškas vartotojo sąsaja žavingas daugiau ir daugiau duomenų, palaipsniui iš serverio. Todėl mes pamatyti kai kuriuos iš šių fragmentus, taip pat šiandien. Kaip panaikinti, jei jus domina susikaupti informatikos arba minoring informatikos, žinau, kad šį penktadienį vidurdienį Dworkin Maxwell 221 bus pica įvykis kur Jūs galite sužinoti šiek tiek daugiau apie kompiuterių mokslo. Apie savo kelią pro duris šiandien galėsite pasiimti neoficialią vadovas CS Harvarde. Mes padėkite jį ant šiukšliadėžės ne juosmens aukštyje taip, kad jei norite patraukti ir sužinoti šiek tiek daugiau apie CS, , kad bus ten jums, kaip tai buvo savaitę 0. Taip pat, jei norite prisijungti prie mūsų CS50 pietų šį penktadienį 01:15, galvą į cs50.net/lunch. Be tolesnio ceremonija, aš tau mokymo kolegos Joseph Ong. Hi. [Plojimai] Ačiū. Klasės čia vadinama CS179 buvo pirmas kartas, kai aš sužinojau apie dizainą. 

Tuo metu profesorius papasakojo istoriją apie kitą profesorius kuris buvo perregistruotas į viešbutį ir naudojo maišytuvai. Ar kas nors pasakykite man, ką 2 mygtukai kairėje ir teisę daryti? [Studentas] Karštas ir šaltas. >> Karštas ir šaltas. Geras. Tai, ką paprastai galima tikėtis, tiesa? Tai po to, naudojant maišytuvą profesorius nori nusiprausti po dušu, ir jis pajamos naudoti. Jis mano, kad kairėje ir dešinėje pusėse yra karšto ir šalto, tiesa? Bet ar gali kas nors pasakykite man, ką jie iš tikrųjų? Bet rankos? [Nesigirdi studentas atsakas] >> Vienas iš pasiūlymų yra? [Nesigirdi studentas atsakas] >> Temperatūra? Taigi, vienas iš jų kontroliuoja temperatūrą ir kitus kontrolę? >> [Studentas] Vandens slėgis. Vandens slėgis. Geras. Šis profesorius eina į tai, galvoju, jie yra kontroliuoti karšto ir šalto, paverčia tinkamą vieną, kuris, jo nuomone, yra karšta, visą kelią iki , nes jis nori imtis šiltas dušas. Na, jie tikrai ne rungtynių iki, todėl jis gauna tai nėra labai įdomus patirties šaltas dušas, ir mes visi žinome, ką tai jaučiasi. Tai yra dizaino škvalas pavyzdys. , Ką aš turiu galvoje, tai yra jo lūkesčiai iš čiaupo neatitiko, kas išėjo iš dušo, kuris yra tipo jam gaila. Taigi tai yra dizaino škvalas, kas vyksta realiame gyvenime pavyzdys. Tačiau matome, įvairių kitų, taip pat. Mes tikriausiai ne gerbėjai MBTA sistemos. Tai metro sistema iš tiesų Londone, kuris sako: "Šis mygtukas nėra naudojamas." Kodėl tai net ten? Kodėl mes net rūpėti? Kai aš buvau vaikas, yra tech išminties vienas namuose, kai kompiuteris genda, mano mama ateiti pas mane, rodo man šį ekraną ir klausia manęs, kas nutiko. 

Net aš nežinau, ką tai reiškia. [Juokas] Kas? [Juokas] Kartais jaučiamės kaip programinės įrangos kūrėjams yra tiesiog velkamosiomis mums. Būdami vartotojai, mes, pavyzdžiui, "Kas vyksta? Kažkas mums pasakyti." Tai viskas susiveda į dizaino klausimu. Dizainas, kaip matome, yra ne vien tik apie estetiką, tai ne apie tai, kaip viskas atrodo. Čia mes matome, kad tai šiek tiek pop-up čia iš tikrųjų atrodo labai gražus. Ji turi lašas šešėlis fone, ji sienos spindulys vyksta. Tai rūšies gana. Tai nėra labai gerai suprojektuoti, nes tai nėra labai patogi. Kad šiek tiek pop-up, kad ateina tikrai ne duoti man kokių nors informaciją apie tai, kas vyksta, jis negali pasakyti man nieko kaip vartotojas apie tai, kaip susigrąžinti nuo šios klaidos. Mes norime galvoti apie tokius dalykus, kad dizainas nėra. Pirma, tai ne estetika. Jis taip pat nėra įdaras su tonų nereikalingų funkcionalumą jūsų app. Jei esate Tailando restoranas, jūs tikriausiai ne nori būti tuo pačiu metu stomatologas. Ir su Facebook Klausimai, ne tai, kad daug žmonių jį naudojo ir tai buvo tikrai ne, ką jie statė pagrindas. Ir todėl malonu galvoti ne tiek daug dalykų kiekį kad jūs pateikėte į jūsų prašymą, tačiau jų kokybė ir kaip jūs darote, kad vartotojo patirtį geriau pagal faktiškai pagerinti nuo to, ką jau turite. 

Trumpai tariant, dizainas pasakoja mums, ką turėtume statyti. Pavyzdžiui, jei mes sukurti kažką, kad leido mus ieškoti dalykų, iki, kaip "Google", pavyzdžiui, mes turėtume daryti tai, ko tokiu būdu , kuri reikalauja, kad vartotojas galėtų gauti tai, ko jie nori imtis daug paspaudimų, ar turėtume tai padaryti tokiu būdu, pavyzdžiui, su "Google" Instant arba Automatinis užpildymas , kuri leidžia mums gauti į paieškos rezultatus greičiau? Inžinerija apima, pavyzdžiui, "Tommy jums parodysiu, iš tikrųjų ji yra. Yra daug tipų projektavimo. Pavyzdžiui, jei kuriate kažką įdiegti kažką į trečiojo pasaulio šalyje, kurioje yra ne daugiau elektros energijos arba, kad daug technologijų, turite sukurti tai, ką kuriate tokiu būdu, kuris lengvai suteikia prieigą prie su zmonemis. Bet kas, rūšių kitų dizaino sprendimus, ar gali būti arba gali būti įtraukti į kažką panašaus į tai? Taip. Matau ranką. [Nesigirdi studentas atsakas] >> Teisė. Tiksliai. Prieinamumas yra vienas dalykas. Daug žmonių neturi galvoti apie tai, "Ką apie mano naudotojams?" kaip ir bet kurios spektro kraštutinumų. Turiu klientams, kurie turi negalią, kad aš ne galvoti apie tai, ir aš tiesiog galvoju apie projektuojant bendrojo vartotojui. Internetas yra prieinamas visiems šiandien, ir aš turėtų rengti tiems žmonėms, taip pat. Kokios rūšies kitų dizaino sprendimus gali jums padaryti? Taip. >> [Studentas] Kurių išlaidos. Kainuos. Labai geras. Kitas dalykas, mes galėtume pagrįsti mūsų dizaino sprendimus dėl sąnaudų. Jei esate verslo, jūs norite sukurti kažką, kad neužima daug išlaidas gaminti bet gali parduoti yra labai didelė kaina, ar galite gauti mums tam tikrą pelną. 

Tai yra visų skirtingų tipų projektavimo, bet kai mes statome ką nors internete arba, kai mes sukurti kažką, kad tikriausiai neturi kainuoti, kad daug sukurti, kaip interneto programų - jūs neturite mesti daug kapitalo į jį tam, kad padaryti ką nors, kad tikrai veikia - ką mes labiau nerimauja yra vartotojo patirtis. Mes vadiname šį vartotoją orientuotą dizainą. Esmės, ką reiškia vartotojo orientuotas dizainas apima save, savo lankytojų batus. Jei kas nors prisiregistruos, ką aš pastato, jie akivaizdžiai mano pirma su tikslu, su užduotimi jie nori baigti. Ir jūsų darbas yra ne tik padėti jiems atlikti tą užduotį tačiau, siekiant padėti jiems atlikti tą užduotį tokiu būdu, kad yra efektyvus, intuityvus, ir, kaip sakė ten, kai asmuo prieinama. Ką efektyvumas reiškia? Efektyvumas rodo, kaip greitai mano vartotojo užbaigti užduotį, nes mano sąsaja. Užtrunka daug paspaudimų juos gauti iš vienos vietos į kitą? Ar tai varginantis? Ar jie turi atlikti daug kartojamų užduočių? Mes norime, kad šį procesą būtų kuo veiksmingesnė todėl jie neturi daryti tuos dalykus rūšių. Intuityvusis, tai, pavyzdžiui, jei vartotojas ieško savo sąsają, tai lengva juos gauti iš vietos į vietą? Ar lengva išsiaiškinti, ką jie turi paspausti mano sąsaja , kad jiems pasiekti tikslą ar užduotį, kad jie nori pasiekti? 

Ir galiausiai, kaip sakė vienas žmogus ten, prieinamumas yra labai svarbus. [Vyriška garsiakalbis] Jis ateina regėjimo dalykų, pavyzdžiui, prieinamumo, patinka, kaip aš iš tikrųjų kurti kažką, kad kas nors, kuris yra aklas? Oh. Žmonėms, kurie negali matyti ne visi mes turime kažką vadinama ekrano skaitytuvus. Ką jums reikia padaryti yra, kad jums reikia sukurti savo svetainę taip, , kad, pavyzdžiui, tam tikros technologijos, tai, ką mes vadiname Yra daug dalykų, kuriuos dabar. Manau, kad yra ekrano skaitytuvai vadinamas JAWS. Daug šių dalykų priklauso nuo, ką mes vadiname erdvės taisykles , kad skaityti iš vartotojo, kas yra puslapyje. Tiems žmonėms, kurie negali matyti, jums reikia įsitikinti, kad šie ekrano skaitytuvai iš tikrųjų galite pasiimti turinį į puslapį, o iš tikrųjų gali parodyti savo vartotojams, jei jūs negalite pamatyti, bent jau jūs vis dar gali suprasti turinį puslapyje. Taip. Gerai. Pakankamai kalbame apie gerą dizainą. Pakalbėkime apie netinkamą dizaino. Tai yra dalykų, kad jums neturėtų daryti. Can anyone tell me apie savo patirtį su Craigslist ir ką jie galvoja yra ne tiek daug apie šį dizainą? Taip. >> [Studentas] Manau, kad yra per daug žodžių vienoje srityje. Per daug žodžių, tiesa? Visiškai absoliuti. Jūs ateiti į šį puslapį ir jūs pasveikino su visa krūva dalykų čia kad gali net jums svarbūs. Pavyzdžiui, jūs gyvenate vienoje valstybėje, kad neprasideda su šiuo laišku. Tarkime, kad jūs gyvenate Teksase ar kažką. 

Turite slinkti žemyn puslapio kelią patekti į vietą, jūs esate. Aš esu iš Bostono, todėl leiskite man atrodo, Massachusetts. Kur yra Masačusetsas? O, tai čia. O, tai Boston. Gerai. Leiskite pažvelgti Bostone. [Juokas] Gana didele, tiesa? Nepatogi dalykų ten. [Juokas] Tarkime, aš ieškau kur gyventi. Kiek žmonių iš tikrųjų naudojamas Craigslist? Tonų su jumis. Yra gana blogų būdų pažvelgti į tai, bet pažiūrėkime į tai. Koks tarp img ir pic skirtumas? Can anyone tell me? Ten iš tikrųjų jokio skirtumo. Jie reiškia lygiai tą patį, tačiau jie turi skirtingas etiketes jiems dėl kažkokių priežasčių. Jei aš spustelėkite Turi Vaizdo, nieko neįvyksta puslapyje. Aš iš tikrųjų turi, spustelėkite Ieškoti vėl kažkas atsitiks. Kas gali būti geriau dizaino sprendimas, kuris gali būti padaryta? Jei aš paspaudę tą filtrą, aš tikriausiai norite filtruoti, kuriuos ta konkreti veiksmų arba kad pirma kategorija. Taigi vietoj to, paspauskite dar kartą atlikti paiešką, aš galėtų tiesiog automatiškai padaryti filtravimo tarsi "Google" stiliaus, kur jie tai akimirksniu. [Malan] Bet ne blankus mes matėme iki šiol turi būti fiziškai pateikiamas pataikyti Įveskite bent arba paspaudę mygtuką? Kaip jūs juos mačiau iki šiol, jūs iš tikrųjų turi, paspauskite mygtuką Siųsti daryti tuos dalykus. 

Bet, kaip Tommy jums parodysiu, per sekundės dalį, ten iš tikrųjų yra būdų jums toks, kad kai paspausite ant tą daiktą jis gali automatiškai siųsti ką mes vadiname AJAX prašymą ir gauti duomenis atgal ir filtruoti rezultatus akimirksniu. Yra tonų dalykų, kurie yra negerai su šią sąsają. [Malan] Ar jums ieškoti Cambridge? Čia yra kažkas šiek tiek nenormalu, jei jums rūpi Kembridžo ir dar jūs gaunate Westford, Spring Hill, West Newton ir panašiai. Tikriausiai ne idealus. >> Tikriausiai ne idealus. Kaip galėčiau galėti, kad vartotojo patirtis geriau šiuo konkrečiu puslapyje? Taip. >> [Studentas] instrukcijos. Gerai. Instrukcijas, kokios prasmės? [Studentas] Pavyzdžiui, pirmą kartą vartotojai, kurie net nežino, kas Craigslist yra dalykas ar jūs nežinote, ką jūs turėtų daryti. Į dešinę. Taigi, paaiškinti, ką Craigslist yra šiame puslapyje, yra labai svarbus. Mes iš tiesų gali pasakyti, naudotojus informuoti, už ką šis puslapis yra faktiškai už. Jei aš tiesiog aplankyti, matau visą ryšelyje vietų. Aš net nežinau, ką jie reiškia. Bet dar svarbiau, tiesiog žiūri į šią sąsają, atsimenu, aš turėjo slinkti žemyn dalykų toną rasti tam tikrą bendruomenę kad aš iš tikrųjų rūpinosi apie tai. , Kas greitesnis būdas galėčiau tai padaryti? Taip. [Studentas] padalyti į rytus, vakarus regionuose. >> Gerai. Aš suskirstyti jas į platesniam įvairių kategorijų asmenų, kurie galėtų man padėti greičiau nustatyti kaip nuvykti į toje konkrečioje vietoje. [Studentas] Patalpinkite išplečiamąjį sąrašą. >> Teisė. Gerai. Aš galėtų naudoti išskleidžiamajame meniu, nes mes turime nustatytą dalykų ir mes galime parodyti jiems, išskleidžiamajame meniu. Tokiu būdu ji nėra užimti tiek daug vietos ekrane. Bet dar geriau nei tai, ką mes galime padaryti? Taip. >> [Nesigirdi studento atsakymą] >> Ar galite pasakyti, kad dar kartą? >> [Studentas] Paieška dėžutė. Taip, paieškos laukelis. Tai puiku. Ką mes iš tikrųjų gali padaryti, jei mes žiūrime atgal skaidres, paieškos laukelį. Automatinis. Labai paprastas būdas ieškoti per rezultatus, kad jūs žinote, yra į rinkinį. Jei aš pradedu rašyti BO, tik parodyti man visus rezultatus, kurie BO viduje. Tokiu būdu aš galiu lengvai rasti ypač vienas, aš noriu eiti į vietoj to daryti slenkant per šį tikrai didelis sąrašą. 

Visi jie yra tikrai žemai kabančių vaisių rūšių, kad kažkas, kas vykdo Craigslist iš tikrųjų gali padaryti, kad apie svetainę patirtį daug geriau jų konkrečiam vartotojui. Gerai. Pakankamai kalbėti apie blogų tinklapis. Pakalbėkime apie "Facebook". Kai "Facebook" išėjo, ir ypač "Facebook" nuotraukos ten buvo daug kitų paslaugų, tuo metu, kuris galėtų padaryti lygiai tą patį, ką. Jie gali tvarkyti savo nuotraukas į albumus. , Ką galite padaryti, tai jums galėtų organizuoti juos į rinkinius, taip pat. Jūs galite tvarkyti juos pagal datą. Jūs galite tai padaryti visus šiuos konkrečius dalykus. Tačiau kiekvienas žino, ką padarė Facebook nuotraukos sprogti tuo metu, kai jis buvo išleistas? Taip. >> [Studentas] žymes. >> Žymos. Tiksliai. Mes turime Milo, kuris yra čia, mūsų šuo talismanas su tuo CS50 skara. Jūs galite pamatyti, kad mes turime šią funkciją viduryje. Ir tai, ką padarė "Facebook" nuotraukos taip įdomu iš praktiškumo požiūriu yra tai, kad ji iš tikrųjų leido žmonės per šį įtraukti savo draugus savo nuotraukas. "Facebook", nes savo tinklalapyje yra ypač socialines tai apie kuriant šį socialinį klimatą rūšiuoti. Kad pagerino nuotraukų patirties daug daugiau , nes jie iš tikrųjų galėtų pradėti sakydamas: "Tai yra jungtis tarp žmonių, ir tai yra nuotraukos apie žmones, jums iš tikrųjų rūpi. " Dalis tai pat rūšiuoti narcisizmą. Žmonės mėgsta būti pažymėti nuotraukų ir panašių dalykų. Nors tai nebūtinai yra geras žmogaus bruožas, tuo pačiu metu ji remiasi gerus dizaino sprendimus todėl, kad žmonės iš tikrųjų rūpi dalykų kaip šis. Taip, kad "Facebook" nuotraukos. 

Bet pakalbėkime Facebook apskritai. Aš tikiu, kad daug žmonių čia turi nuomonę apie "Facebook", abu geros dizaino sprendimus ir blogų dizaino sprendimai. Todėl galime išlieti arba būti laimingas. Come on. Aš žinau, jums visiems naudotis "Facebook". Kažkas turi kažką blogo pasakyti, ar kažką gero pasakyti apie tai. Taip. [Studentas] naujienų nėra daug dalykų, aš ne iš tikrųjų rūpi. Naujienų kanalas parodyti daug dalykų, kuriuos gali nesirūpina. Turite draugų "Facebook", kas jūs, kurie nevykdo 2 ar 3 metų ir pamatysite jų naujienų rezultatų Popping savo naujienų kanalą ir jums nereikia tikrai rūpi. "Facebook" iš tikrųjų stengėsi, kad tai geriau, ir jie iš tikrųjų bandė stumti atitinkamus rezultatus naujienų viršuje kaip vėlai kad jūs iš tikrųjų pamatyti dalykus draugų, kurie yra svarbūs jums ar savo artimų draugų. Dar ko nors? Taip. [Nesigirdi studento atsakymą] >> Ar galite pasakyti, kad vėl? [Studentas] Skelbimai yra gana nekrenta į akis. >> Kokia prasme? [Nesigirdi studentas atsakas] Jie neturi šviesos ekrane, pavyzdžiui, reklaminių antraščių. Gerai. Tai gerai. Jei prisimenate iš 90-ųjų interneto - >> [Malan] aš ten buvo. >> Jis buvo ten. [Juokas] Jūs galite prisiminti mirksi Gif foną, sparkly dalykus, "GeoCities" stiliaus rūšiuoti dalykų. Kad tikrai ne iš gero dizaino pavyzdys nes tai tikrai blaško dėmesį nuo turinio. Jeilio meno svetainė naudojamas animuotus GIF, jų kilmę, ir tu negali skaityti nieko puslapyje, bet aš manau, kas nors iš tikrųjų kalbėjosi su jais ir dabar jis šiek tiek skiriasi. [Malan] Tai daug geriau. >> Tai daug geriau dabar, kaip matote. >> [Malan] Oh yeah. Tiesiog puikus, tiesiog - Taip. Gerai. 

Dalis jo, kad jūsų puslapis gali būti labai minimalistinis ir labai suprantama taip dalykų puslapio srauto taip, kad būtų labai logiška ir negaunate vienas kitą. Kokios rūšies kitų dalykų apie "Facebook" yra gera ar bloga apie "Facebook"? Tegul tik dizaino pokalbį čia. Oh. Kur? Taip. [Studentas] Naujas Chronologija sistema leidžia jums ieškoti asmens anketą apie savo praeitį. Ooh, Laiko planavimo juosta. Chronologija yra puikus dalykas, nes ji leidžia šakelių savo draugų atgal, kai jie buvo vidurinėje mokykloje. Laiko yra gerai, nes ji leidžia filtruoti per turinį daug greičiau, jis leidžia jums rasti dalykų, kad būtų kitaip, kurių buvo imtasi jums tikrai ilgai rasti tiesiog slinkti aukštyn ir žemyn, aukštyn, aukštyn, aukštyn, aukštyn, aukštyn, tarsi grįžta laiku. , Bet ten taip pat tarsi neigiama, kad vartotojo patirtį. Tai, kas gali būti? Didelis žodis, kuris prasideda P-R. >> [Studentas] Privatumo politika. >> Privatumo politika, tiesa? Privatumas yra didžiulis vartotojo patirtis klausimas. Tai yra vienas iš dalykų, kurių nekenčiu dauguma apie "Facebook" dabar. [Juokas] [Malan] Kaip aš dabar. Davidas nesuprato, tai iš tiesų vyko iki vakar. Taigi dabar jis žino, kad kiekvieną kartą aš kalbėtis jį, aš žinau, jis ignoruoja mane. [Malan] nepatogu dalis man buvo iš tikrųjų buvo ignoruojant jo, ir aš nežinojau, jis žinojo, kad aš buvo jį ignoruodama. [Juokas] Privatumas yra didžiulė problema. Ar kas nors čia man pasakyti, kas gali būti blogai apie Facebook privatumo be to, kad jie padaryti dalykus, kaip tai? Kas tai ypač sunku padaryti dėl "Facebook" privatumo? Kad tarsi yra pagrindinis klausimas. Taip. >> [Studentas] Slėpti nuotraukas iš tam tikrų žmonių. Į dešinę. Tiksliai, paslėpti savo nuotraukas iš tam tikrų žmonių. Jie turi šį mažą, nedidelį mygtuką viršutiniame dešiniajame kampe, kad leidžia perjungti nuotraukos privatumą. Jų privatumo parinktys yra labai įvairios skirtingų rūšių meniu. 

Jie Dotarłeś daug geriau apie tai visai neseniai, tačiau jis naudojamas tuo atveju, kad, kai jūs norėjo užkirsti kelią savo draugus iš matome nuotraukas, jums reikės eiti per labai sudėtingas 5 žingsnio procesas yra kaip, leiskite spauskite šią nuorodą, dabar leiskite man dar kartą spustelėkite, leiskite man dar kartą spustelėkite, leiskite nurodykite, kurie žmonės negali matyti mano nuotraukas. Tai nėra ypač gerai "Facebook" nes tiek daug apie vartotojų patirtį, suteikiant jiems laisvę kontroliuoti, ką žmonės gali pamatyti. Mes tai vadiname Vartotojo kontrolės ir laisvę. Jei nesate leisti savo vartotojams tai padaryti taip, kad būtų veiksmingas ir intuityvus, tada jūsų vartotojo patirtis yra tikrai ne tai, kad didelis ne visiems.  Ar jums, vaikinai, patinka pasakyti ką nors apie Facebook? Kaip įjungti šią funkciją? [Ong] Jūs galite išjungti šią funkciją, ir tai yra didžiulė praktiškumo "Facebook" trūkumas. Ši funkcija - Aš iš tikrųjų pažvelgė į jį vakar - tai, kad jūs negalite padaryti jį arba jis palaidotas kažkur labai, labai giliai Facebook įdubų, nes aš negali išsiaiškinti, kaip išjungti šią funkciją. [Malan] Bet kartais šie sprendimai nėra akivaizdus nes jus vaikinai mums davė daug naudingų atsiliepimų įvairių CS50 paraiškas svetainių, kurios kursas naudoja. Mes neįgyvendino visus šiuos prašymus ir pasiūlymus. 

Dalis, kad yra gauti tiek daug prašymų, kad tai yra laiko funkcija, bet kartais mes tiesiog padaryti sąmoningą sprendimą, pavyzdžiui, "Ačiū jums už sugaištą, bet mes nepritariame." Taigi, kaip jūs iš tikrųjų nuspręsti, ką reikėtų daryti, jei manote, kad jūsų vartotojai turi kažką daryti , net jei jūs nebūtinai? Tai puikus balansas tarp faktiškai klausytis, ką jūsų vartotojai teigė, kad ir iš tikrųjų kažkokią linijos, kur jūs sakote, "Mes neketiname daryti tai, ką šie vartotojai pasakyti." Ir visų pirma, aš manau, kad buvo Henris Fordas citata, kuris apibendrina tai padaryti gana gerai. "Jei aš paprašė žmonių, ką jie norėjo, jie sakė, jie norėjo greičiau arklius." Ar kas nors rūšiuoti erzinti išskyrus ką ta kaina iš tikrųjų reiškia? Tai ne tik, kad vartotojai žinotų, ką jie nori, bet tai daugiau nei - [Studentas] Jie nežino, kas įmanoma. Iš dalies jie nežino, kas yra įmanoma. Erzinti, kad, išskyrus šiek tiek daugiau. Ką visa tai reiškia? [Nesigirdi studentas atsakas] Tai gerai. Ką aš manau, mes stengiamės pasakyti, čia yra, kad žmonės žino, ko nori. Jie nori greičiau arklius. Ką jie tikrai nori, yra galimybė judėti greičiau, bet jie tikrai nežino, vidutinės trukmės, pagal kuriuos būtų pasiekti, kad. Kai atvyksi į savo vartotojų ir jūsų vartotojai jums kai ką pasakyti ir jie pasakys "Mes norime, kad šias funkcijas ir šių funkcijų ir šių funkcijų," nenorite visada galvoti apie tai, "Leisk man eiti į priekį "Ir įgyvendinti tai, ką jie aiškiai pasakyti" bet tai, ką jūs norite galvoti apie yra "Kokios idėjų aš galiu gauti iš to?" Ką jie iš tikrųjų nori? 

, O iš ten tai, ką galite padaryti, tai kurti kažką, kad atitinka šiuos prašymus bet nebūtinai taip, kad vartotojas tikisi, kad jis būtų patenkintas. Taigi, kažką panašaus į galutinius projektus, labai realiai, kas naudinga euristinis, kai kalbama apie padaryti kažką geriau, ypač, jei dizaineris turi tokią aroganciją apie jį kuriuo tarsi žinoti, kas geriausia, jums gali prisidėti iš savo vartotojų, bet kaip jūs iš tikrųjų eiti apie tai, kaip, kad grįžtamasis ryšys? Galutiniai projektų, labai konkrečiai, ką gamina optimalius rezultatus? Ką gamina optimalius rezultatus - ir aš eisiu per tai per sekundę - yra tai kurti ir testując ir tada iteravimu procesas. Ką aš turiu galvoje atliekant bandymus paprastai, kai kuriate kažką manote, kad tai gana gera, pavyzdžiui, "Aš toks puikus dizaineris. Kiekvienas žmogus turi mylėti." Ir tada jūs jį ten ir žmonės nelabai patinka tai, kad tam tikrų priežasčių. Ką jūs turite padaryti, tai jūs turite imtis dalykų, kad žmonės patinka dalių ir pertvarkyti dalykų, kad žmonės nepatinka. Tai skamba kaip labai akivaizdus, ​​tačiau šis procesas nuolat iteravimu viršuje tai, ką jūs jau pastatyta yra procesas, kuris padeda jums ne tik patobulinti savo projektavimo įgūdžius, bet taip pat padės jums patobulinti dizainą taip, kad žmonės iš tiesų vertiname jūsų produktą, net daugiau, nei jie tai padarė anksčiau. 

Aš eisiu per daugiau konkrečių pavyzdžių, ką jūs iš tiesų gali padaryti. Jei kaip paskutiniame pavyzdyje produkto rūšies, galime pažvelgti į baidarių. Baidarių, kai jis išėjo, buvo labai, labai populiarus. Ar kas nors atspėti, kodėl? Kokie yra dalykų rūšių jums patinka apie tai, jei jūs naudojate jį ar kas yra rūšių dalykų, jums nepatinka? Taip. >> [Nesigirdi studentas atsakas] >> Gerai. Štai jo dalis, yra nuomos vartotojo užklausą, kuri yra labiau išsiplėtusi nei labai griežtesniu, kaip: "Jūs turite pasirinkti savo pradžios datą ", Ir jūs turite pasirinkti pabaigos datą." Tiesą sakant, tai leidžia būti lankstus apie tai, ir ji suteikia jums visų tame diapazone skrydžių. Dar ko nors? [Studentas] Jie apima kainą, mokesčius. Jie kainą mokesčius. Mokesčiai ir ką iš tikrųjų eiti tiesiai į tą kainą, viršutinėje kairėje todėl jūs ne apgauti, priversti galvoti, kad jūs iš tikrųjų moka už $ 240 skrydžio tada, kai tai tikrai 330 $. Dar ko nors? Taip. [Nesigirdi studentas atsakas] Aš nesu įsitikinęs, jei jie iš tikrųjų jums tai padaryti. Aš galėtų būti negerai. Kad gali būti įdomus dalykas, jei jūs norite įdėti daugiau svorio ypač filtrų , kad jie stumti rezultatus, susijusius su šiuo filtru, viršuje. Bet ar gali kas nors pasakykite man, kas yra toks ypatingas apie šį kairėje pusėje? Kaip jūs tradiciškai ieškoti skrydį dėl interneto paslaugas prieš tai? 

Taip. >> [Nesigirdi studento atsakymą] >> Ar galite pasakyti, kad - [Studentas] Kiekviena oro susisiekimo bendrovė. >> Taip. Kiekviena oro susisiekimo bendrovė turi savo interneto svetainę. Tai stiprina dalykų. Ir? [Studentas] Jūs žinote tiksliai, kiek laiko jūs paliekate. Jūs žinote tiksliai, kiek laiko jūs paliekate, , bet ir su ypač filtrų. Leiskite man atsigriebti baidarių. Dieve, pop-up langus. Blogas vartotojo patirtį. Kas atsitinka, kai aš perkelti šį slankiklį? [Studentas] Automatiniai atnaujinimai. >> [Ong] Automatiniai atnaujinimai. , Kad kažkas, kad labai svarbu. Prieš tai, kai jūs norėjote ieškoti skrydį, jums teko įdėti įvesties vietą, savo produkciją vietą, paspauskite Search, ji būtų apdoroti, kad ir parodyti savo rezultatus. Jei norėjote pakeisti savo užklausą, jums reikės paspausti du kartus: nuo nulio įvesti naują užklausą, ir tada daryti vėl ir vėl. Gražus dalykas, apie kažką panašaus į tai, ji naudoja labai [nesuprantama] dalykas viduryje. Kai jums padaryti kažką panašaus į tai, šaunantis prašymą ir ji grąžina visus rezultatus iš karto. Tai yra kažkas, kad baidarių Wściekle populiarus nedelsiant atsiliepimai rūšiuoti nes tai tikrai lengva man tiesiog pakeisti savo užklausą ir išsiaiškinti dalykus, kurie yra maždaug tam tikrą intervalą be to, kad eiti į priekį ir atgal, pirmyn ir atgal, pirmyn ir atgal. Taigi tai yra visų dalykų rūšių, norite galvoti apie tai, kai jūs projektuojant savo svetainę. Kaip aš galiu padaryti, kad tai labai veiksminga mano vartotojai eiti per ką jie dirba ir gauti jų svarbiausias siekis kuo greičiau? [Malan] Ir Juozapo taško anksčiau apie vartotojus, nebūtinai žinoti, ko jie nori, apie tai, kas jus vaikinai žinoti apie HTML ir jūs turite žymės langelius, radijo mygtuką, pasirinkite meniu, įvedimo laukų ir panašūs, kaip norėtumėte įgyvendinti skinti pradžios laiką, skrydžio sąvoką? 

Kuris iš šių skirtingų UI mechanizmų jūs naudojate? Jei jūs tiesiog žinau, HTML sumą, kuri buvo mokoma iki ir jūs žinote, sąnaudos yra radijo mygtukus, žymės langelius, išskleidžiamųjų meniu, ir įvedimo laukas, , koks būtų jūsų pasirinkimas buvo skinti datas? [Studentas] Input. >> Įėjimo. Arba gal net lašas žemyn su visais apie datas, tiesa? Taigi sudėtingesnių UI mechanizmus kaip tai kairėje pusėje, kad būtų galima įgyvendinti, jūs galite padaryti šį procesą daug labiau intuityvus slankiklį nes laikas yra tęstinis, ir žmonės paprastai neturi galvoti apie tai, atskirų gabaliukus. Gerai. Paskutinis dalykas. Dešimt praktiškumo euristika. Viskas, ką mes kalbėjome apie tikriausiai patenka į vieną iš šių kategorijų. Jeigu jūs einate į šią nuorodą, svetaines bus paskelbtas internete, jūs iš tiesų gali, kaip jums sukurti savo svetainę, kad šių euristika omenyje ir šių nykščio taisykles. Savo projektus, ką aš siūlau jums padaryti siekiant geriau projektuoti jūsų app yra padaryti popieriaus prototipų. Kai jūs galvojate apie savo programą, labai greitai nupiešti, ką jūs norite atrodyti ir įsitikinkite, kad visi langeliai yra išdėstyti taip, kad būtų labai intuityvus vartotojui naudoti ir net parodyti šių popieriaus prototipus savo draugams ir pradėti tikslines grupes. Tiesiog gauti 2 arba 3 žmones ir paprašykite jų, tiesiog bakstelėkite šių popieriaus prototipų, ir parodyti jiems naujus ekranus, kad pamatyti, jei jie iš tikrųjų suprasti, kas vyksta. 

Ką jūs norite daryti yra suteikti jiems užduotis, motyvuoti vykdyti tą užduotį, ir tiesiog suteikti jiems app ir leisti juos naudoti. Neduokite jiems nurodymus ne tik, kad. Jūs norite, kad iš tikrųjų leiskite jiems sąveikauti su jūsų app tokiu būdu, kuris leidžia matyti kaip jie ją naudoti, jei nebuvo stovi šalia jų. Ir kad tai labai svarbu. Kad duos jums daug įžvalgų, kad yra žmonių, gauti apie konkrečias dalykų tokiu būdu, kad aš ne ketina juos? Jie naudoja tam tikras UI mechanizmus ekrane tokiu būdu, kuris yra rūšies Hacky? Aš neketina juos daryti, kad taip. Ir, kai jūs baigsite su, ką jūs norite daryti? Jūsų dizaino akmenys, tiesa? Ką jūs norite daryti yra, norite, o vėliau ir padaryti šį procesą vėl. Taigi, parodyti juos savo draugams, kai jums sukūrėme, jį išbandyti, kurti, išbandyti, plėtoti, išbandyti, pakartoti, ir ir pirmyn. Dizainas yra labai pasikartojantis procesas šiuo požiūriu. Jūs iš tikrųjų turite sukurti kažką ir tada realizuoti dalykų apie tai kad tu negali suprasti, prieš ir grįžti ir pagerinti nuo to. Dabar, kaip ir plėtros dalis, tai ką Tommy ketina parodyti jums, po pertraukos ir kaip jūs galėtų įgyvendinti kažką panašaus Automatinis užpildymas tokiu būdu, kad yra gana paprasta. [Malan] Kaip Tommy įkuria čia klausimas. Daug iš pirmųjų svetainių - ir kai Juozapas sakė 1990-ųjų stiliaus svetainę, tai buvo diegimas kur, jei jūs norėjo pasirinkti pradžios laiką ir pabaigos laiko, tiesą sakant, atgal per dieną, ir net kai kurių svetainių šiandien būdas tai padaryti visiškai jums pasirinkti valandą iš išskleidžiamojo, jums pasirinkti minučių iš išplečiamojo, gal jums pasirinkti AM, PM, ir tada jums padaryti, kad 3 ir daugiau kartų. Ir taip su 6 paspaudimų ir galbūt kai kurie SCROLLING jūsų vartotojas gali faktiškai teikti tam tikrą datą ir / arba laiko intervalas šia prasme. 

Taigi tikrai optimalu, ir dar iki šiol mes matėme nėra išraiškingas galimybes bet iš kalbų, mes pažvelgė padaryti kažką seksualesnis kaip šis pradžios laikas ir pabaigos laikas slankiklį. Tačiau jei manote, atgal į savaitę 0 kai mes kalbėjome apie nulio, ten taip pat ten buvo ne raštai, kad tik padarė tam tikrus dalykus. Jūs tikrai tik šiuos, pavyzdžiui, vietinių linijų ir vietinių sąlygų ir panašių pagrindų. Toks geras, tiesiog galvoju dabar labai abstrakčiai, nepriklausomas nuo HTML duomenis, tai, kas iš tikrųjų vyksta šį pradžios laiką kažką panašaus ir pabaigos laikas slankiklį? Kai aš perkelti savo pele ir aš spustelėkite, kad šiek tiek morkų simbolio kairėje ir pradėti vilkdami, programiškai, kas tai norite, kad būtų galima įgyvendinti padaryti, kad taip atsitiktų? Kokius klausimus, ką Būlio išraiškos norite, kad būtų galima paklausti? Tai, kas iš tikrųjų vyksta? Sammy? [Studentas] Jeigu žymeklio pozicija? >> Gerai. Kur yra žymeklio pozicija? Tai buvo kažkas mums reikia išreikšti atgal nulio, ar jis buvo grindžiamas vietą ar net spalvą arba iš panašių medžiagų. Jūs tikriausiai pamenate, vis tiek trumpai, pirmadienį buvo visus šiuos dalykus, vadinamosios įvykių į interneto pasaulį, ir todėl yra dalykų, pavyzdžiui, onclick ir onkeypress onkeyup ir onmouseover ir onmouseout. Taigi suprasti, kad net šie dalykai, mes jau suteiktas internete su svetainių, kaip "Facebook" ir "Gmail", net jei jūs neturite idėjos, kaip jūs galbūt įgyvendinti, kad, nes ten nieko net kaip jį paskaitą ar problemą, 7, suprantame, kad šių tikslų pačių pagrindų, su HTTP ir parametrų ir GET ir POST, su pagrindinias HTML sąnaudų, kad mes pažvelgė iki šiol ir programinių priemonių, metu, kad Tommy įvesti galite pradėti išreikšti save, tiesiog kaip tu savaitę 0 dėl labai intuityviai velkant ir numetant. 

Taigi, su ta sako, Tommy MacWilliam ir keletą naujų įspūdį mums dėl interneto. Gerai. My name is Tommy ir aš ruošiuosi kalbėti apie "JavaScript". Tiesiog atsisakymas: aš esu tos nuomonės, kad JavaScript yra geriausia programavimo kalba viso pasaulio. Yra daug žmonių, kurie nesutinka su manimi, bet tai tiesiog nuostabi. Kai jūs einate į C, jei turite rašyti C kitai klasei arba kai kuriomis kitomis kalbomis, tai tik labai varginantis visų žemo lygio detalių, jūs turite, įklimpsta in Taigi, jei jūs kada nors jausmas liūdna apie tai, kaip erzina C rašyti, tiesiog grįžti, parašyti šiek tiek "JavaScript". Tai nirvana. Jūs jausitės daug geriau apie savo blogų dienų. JavaScript magija daug ateina iš jo gebėjimas manipuliuoti dalykų , kurios jau yra puslapyje. Kai rašėme savo PHP skriptus, jie buvo atliekami serveryje, ir galiausiai, kad PHP scenarijų, tikriausiai wypisuje HTML. Kad HTML buvo siunčiama klientui, ir kad ji buvo. Jei PHP norėjau pridėti mygtuką į puslapį, pavyzdžiui, jis negali tikrai, kad. Ji turėtų teikti visiškai naują HTML failą ir išsiųsti ją į naršyklę. Su "JavaScript" mes žinome, kad mes galėtume atnaujinti dalykų, o jie jau puslapyje, ir dėl to mes galime pateikti daug daugiau trumpąją atsiliepimus, , kuri bus tikrai pagerinti vartotojų patirtį mūsų svetainėje. Tiesiog greitai Priminti JavaScript selektoriai. Mes žinome, kad, kai mes atsisiųsti HTML puslapį, , kad bus atstovaujama DOM. 

DOM atminkite tik tai didelis medis, kai elementai yra susiję su šio didelio hierarchijos. Kai dirbome su duomenų bazių pset 7, vienas iš pirmųjų dalykų, kuriuos reikia žinoti, kaip tai padaryti užklausą duomenų bazei. Mes šią didieji vartotojai lentelę, o kartais mes tiesiog noriu pasakyti, "Aš tik noriu, kai kurie iš šių vartotojų, kurie atitinka tam tikrą sąlygą." Be to, kai mes turime DOM mums reikia šiek tiek jį užklausų būdas. Mums reikia šiek tiek pasakyti, "Aš noriu visų mygtukų, kuris atrodo taip "Arba visus vaizdus puslapyje. Ir šie selektoriai leidžia mums tai padaryti. Taigi, tiesiog greitai Priminti. Tai pirmasis, tai # pateikti, kas yra, kad ketina pasirinkti? Ar kas nors prisimena? [Nesigirdi studentas atsakas] >> Taip, tiksliai. Tai vyksta, kad pasirinktumėte elementą į puslapį, kuriame yra pateikti ID. Ir taip, kad maišos tegus sako, tai selektorius ketina dirbti su ID. Kaip apie antrąjį. Centre, kas bus, kad pasirinkti? Taip. >> [Studentas] Klasė. >> Būtent. Tai dabar ketina pasirinkti pagal klases. Tarp ID ir klasės čia skirtumas paprastai turi būti unikalus ID per kokia erdvė jūs ieškote daugiau. Taigi, jei ieškote per visą interneto puslapį, jums tikrai turėtų turėti tik 1 elementas, kad tam tikros ID, todėl šiuo atveju pateikti. Su klasėmis, kita vertus, mes galime turėti daugiau nei 1 elementas tame pačiame puslapyje toje pačioje klasėje. Tai gali būti naudinga pasakyti, kad aš norite pasirinkti viską, kas centre puslapyje , o ne tik 1 dalykas. 

Ir, pagaliau, ši naujausia čia yra šiek tiek sudėtingesnis, bet ką tai vyksta pasirinkti iš DOM? [Nesigirdi studentas atsakas] >> Kas tai? [Studentas] Viskas, kas tegus. >> Mes turime 2 dalys. Antroji dalis ketinate pasakyti, noriu pasirinkti šiuos žodžius su žymelę įvesties, todėl bet koks elementas, kuris yra įvesties šablonas. Bet aš nenoriu tiesiog pasirinkti visus žaliavų, nes gali būti kažkas panašaus į mygtuką "Siųsti" įvesties ir galėtų būti kažkas panašaus į teksto laukelio įvesties. Taigi su šiais laužtiniuose skliaustuose aš sakau, aš norite pasirinkti tik tuos elementus, , kurie yra teksto formatą. Kažkur mano HTML tegus turiu tipo atributą " ir to atributo reikšmė turi būti tekstas. Taigi, kaip apie šio pirmojo čia? Pirmasis žodis šio selektoriaus yra forma, tada turiu tarpą ir tada šis įėjimas dalis. Ką tai padaryti, formą, prieš ją? Tai vyksta iš esmės apriboti savo užklausą. Tai gali būti atvejis, kad mes turime keletą įėjimai puslapio , yra ne forma palikuonys. Kas tai padarys, tai pasakys, aš tik noriu įvesties žodžius, kažkur virš jų kai tėvų elemento forma. Ir tokiu būdu mes galime padaryti šiuos hierarchinius užklausas todėl mes negalime tiesiog turite pasirinkti viską, atitinkančių tam tikrą selektorių. Mes galime rūšies apriboti taikymo sritį, šiai užklausai į ką nors kita. Taigi dabar, kad mes žinome, kaip pasirinkti elementus puslapyje, pakalbėkime šiek tiek apie AJAX. AJAX yra vis dar labai madinga akronimas, kuris reiškia Asynchronous JavaScript ir XML. Jis tiesiog taip atsitinka, kad XML yra tik tam tikru būdu pateikti duomenis. 

Neseniai natūra, kad prarado populiarumą, todėl X AJAX nėra naudojami visą laiką. Iš esmės, ką AJAX leidžia mums daryti HTTP užklausas JavaScript. Kai mes mūsų interneto naršyklėje ir mes naršyti aplink puslapiuose ir mes spustelėkite nuorodą, mūsų naršyklę ketinate daryti yra HTTP "užklausą kokia nuoroda mes spustelėkite. Bet tai ne visada idealus, nes jei tai toks atvejis, tada kaip Dovydas buvo sakydamas, mes visada turime, kad vartotojai spustelėkite mygtuką "Pateikti" arba spustelėkite nuorodą tam, kad kas nors atsitikti, kad ketina įtraukti "HTTP" užklausą. Taigi su AJAX mes galime padaryti šiuos prašymus vardu JavaScript. Tai reiškia, kad, kai vartotojas sąveikauja su puslapio ar kas nors atsitiks, mes iš tikrųjų galite atlikti programavimo prašymą kai kurių kitų mūsų svetainėje PHP failą ar dar ką nors ir gauti duomenis, kad ši byla išspjauna. Paimkime bent AJAX Pavyzdžiui išvaizdą. Tai yra mūsų CS50 Finansai puslapis, su kuria, tikiuosi, kai kurie iš mūsų yra susipažinę. Jei pažvelgsime į šio puslapio HTML, mes matome čia, kad aš pridėjo keletą dalykų, kurių aš ŠI FORMA ID. Jau sakiau id = "forma citata". Aš padariau tai tik todėl, kad vyksta, kad tai šiek tiek lengviau pasirinkti iš DOM nes aš galiu tik padaryti labai paprasta užklausa. Ką aš noriu padaryti, čia yra, aš noriu išspręsti tam tikrą problemą su CS50 Finansų. Taigi, jei mes einame į finance.cs50.net, kiekvieną kartą aš noriu gauti pasiūlymą, aš turiu spragtelėti šį Gauti citatą mygtuką, ir kad Gauk Citata mygtuką, tada priima mane į kitą visą puslapį. Ir jei aš noriu kitą pasiūlymą, turite paspausti mygtuką "Atgal" ir tada aš įveskite jį, Galiu gauti pasiūlymą, ir aš paspauskite mygtuką "Atgal". Tai tikrai nėra geriausias vartotojo patirtį. Kas tikrai naudotis svetaine, jei tai, kad lėtai gauti akcijų kainas? Taigi, tai, ką mes norime daryti su AJAX yra pašalinti, kad vyksta į atskirą puslapį žingsnis , kad galėtumėte peržiūrėti rezultatus. 

Ką mes iš tikrųjų tik prašo, kad tikrai maža kaina, ir tai tik tikrai nedidelis duomenų kiekis. Taigi čia ne man reikia eiti kitą visą HTML puslapį, atsisiųsti visą naują partiją HTML, atsisiųsti gal šiek tiek daugiau vaizdų, kai kurie kiti failai CSS tiesiog man atsakyti į šį labai paprastą klausimą kiek kainuoja Pateikta sandelio prieinamumo kaina. Su AJAX mes galime padaryti tai daug lengviau. Mes matome čia, kad aš susiejimas "JavaScript" failą pavadinimu quote.js. Tegul iš tikrųjų atverti tą failą. Nėra. Visi mano "JavaScript" failus bus įsikūrusi HTML kad interneto naršyklė gali jį pasiekti. Tada mes turime atskirą katalogą čia pagal JavaScript, ir dabar čia yra quote.js. Šio failo viršuje, tai sako čia, kad aš noriu laukti visą puslapį, turi būti kraunamos kol aš pabandyti ką nors padaryti. Kodėl tai, kad būtina? Pasirodo, kad Kitas dalykas, aš ruošiuosi padaryti čia yra pradėti ieškoti elemento , kuris atitinka tam tikrą selektorių. Jei tai "JavaScript" yra nuolat vykdoma, kol šis elementas yra pakrautas puslapyje, tada viskas, aš stengiuosi padaryti nesiruošia dirbti nes aš ruošiuosi pabandykite pasirinkti kažką, kad nėra ten dar. Taigi tai iki viršaus linija sako, kad aš noriu, kad laukti, kol viskas yra pakrautas todėl mes garantuojame, kad aš ieškote yra iš tikrųjų jų elementai puslapyje. Šis dolerio ženklas čia reiškia, aš naudoju biblioteką, vadinama JQuery. Šis JQuery biblioteka leidžia mums naudoti šias selektoriai, kad mes tiesiog žiūrint. Sakydamas $ tai einančios kaip argumentas šiuo # form-citata, Aš dabar pasirinkę šią formą, kad mes tiesiog paėmė pažvelgti. Dabar aš turiu kažkaip tos atminties atstovavimą. 

Dabar su tuo objektu, tai formos atstovavimas, Aš dabar naudojant funkcija vadinama. Ką ši funkcija daro ji ketina pridėti įvykio apdorojimo. Įvykis, kad mes ketiname klausytis Pateikti įvykis. Taigi, kai vartotojas paspaudžia mygtuką "Siųsti" arba paspaudžia "Enter", šis renginys vyksta į ugnį. Nedėkite į tai, dabar galiu pakeisti numatytąją elgesio formos. Be šios JavaScript, tai pateikti neatsižvelgiant į PHP failą mes naudojamas toje ACTION atributas. Bet vietoj to, aš dabar sako, palauk, palauk, palauk, aš nenoriu, kad jūs, kad iš tikrųjų tai padaryti. Aš noriu, kad tai įvyktų, prieš išvykdami, ir bando pateikti kai PHP failą. Dabar, ką aš noriu padaryti? Šiuo metu aš noriu naudoti AJAX kažkaip įkelti į, ką šių išteklių kaina yra. Pirmas dalykas, kurį reikia žinoti yra tai, ką akcijų vartotojas žiūrint. Tai, kad aš ruošiuosi naudoti kitą parinkiklį. Tai yra trečiasis selektorių, mes pažvelgė į prieš. Tai sako, kad aš noriu pradėti nuo šios formos elementas su form citata ID. Tada kažkur viduje šios formos turi būti įvesties elementas , kuri turi simbolio vardą. Jei pažvelgsime atgal mūsų HTML, pamatėme, kad mes turėjome įvestį [vardas = simbolis]. Tai reiškia, kad tai vyksta pasirinkti tą teksto lauką, kad vartotojas būtų rašyti į. Tai gražus. Mes turime teksto lauką. Dabar mes tiesiog reikia žinoti, kas yra viduje ji. Norėdami tai padaryti, mes galime paskambinti šį metodą, tai. Val, ir tai sako, kad aš žinau, kokio teksto laukelį turite. Noriu pasakyti man, kur yra, vartotojas turi įvesti į šį teksto laukelį. Dabar mes turime eilutę vadinamas simbolis, kuris yra lygus tuo, ką vartotojas turi įvesti. Tai gražus. Mes galime naudoti šią eilutę dabar, kad mūsų prašymą. Tai čia, tai nauja funkcija $, išskyrus mes ne ilgiau bus pasirinkdami elementus, mes ketiname būti raginama kitą funkciją, kuri mums suteikta JQuery. Tai AJAX funkcija yra tai, kas iš tikrųjų vyksta, kad šis HTTP "užklausą. Taigi, mes turime pasakyti keletą dalykų. Pirmas dalykas, mes turime pasakyti šią funkciją, kur aš noriu, kad prašymas. Kažkur mano projektas Turiu šį failą viduje HTML katalogą vadinamas quote.php. Galiu atidaryti šį failą, mes matėme, kaip tai, jei aš einu į localhost / quote.php. 

Aš noriu, kad mano "JavaScript" pateikti prašymą tame puslapyje. Kokio tipo prašymu šiuo metu? Mes matėme prieš tai forma, kad method = "post" atributas, , o tai reiškia, kad jis ketina padaryti POST užklausos, todėl ne įdėti ką nors į URL, o ne prašymą GET, kurie tiesiog būti atleistas, jei mes tiesiog prieiti puslapį su interneto naršykle, pvz. Dabar mes sakė, kad aš noriu padaryti HTTP POST užklausą į puslapį, esančio quote.php. Kai mes pateikti formą, nepamirškite, mes galime prieiti prie įvesties elementus, viduje šios formos su tuo $ _POST kintamojo. Iki šiol į istoriją mes ne iš tikrųjų bet kokių duomenų, siunčiami kartu. Mes ką tik sakė, kad mes darome AJAX prašymą ir čia: užklausos tipas, mes darome. Dabar mes turime iš tikrųjų siųsti kai kuriuos duomenis į puslapį. Norėdami tai padaryti, mes galime naudoti šį turtą, vadinama duomenų. Šio turto vertė iš tikrųjų yra masyvą. To priežastis yra tai leidžia mums atsiųsti daugiau nei tik 1 vnt. Duomenų. Štai kodėl mes turime šiuos garbanotieji petnešų čia įdėtos viduje šių kitų klamrami. Šiose Association masyvai raktai bus tas pats kaip ir pavadinimas atributus mūsų formos elementų. Tai reiškia, kad jei galiu siųsti išilgai simbolį raktas, tai reiškia, kad mano PHP puslapis gali prisijungti prie šios $ _POST [simbolis] duomenis tiesiog, kaip mes padarėme anksčiau, kai mes pateikdami formą. Ir dabar faktiniai duomenys norime siųsti bus vertė viduje šio Association masyvas. 

Mes saugomi šį tekstą kintamu vadinamas simbolis, , ir todėl mes Siunčiame kartu simbolis mygtuką ir bet kokio vartotojas turi įvesti. vertė Dabar mes padarė šį HTTP prašymą įvykdė mūsų PHP failas, ir jis ketina siųsti kai kuriuos duomenis dabar sugrįžote pas klientui, kad tik padarė šį prašymą. Dabar mes turime reaguoti į bet serverio mums pasakė. Norėdami tai padaryti, mes turime šį paskutinį turtą čia vadinama sėkmės. Šios sėkmės raktas vertė iš tikrųjų ketiname funkcija, ir tai yra vienas iš tikrai įdomių dalykų, kuriuos galite padaryti su JavaScript. Ne tik jūs galite turėti int arba kaip vertės viduje Association masyvas masyvus, mes taip pat gali turėti funkciją. Taigi, sakydamas, sėkmės, tai yra mano raktas. Dvitaškis sako čia ateina vertę, o dabar ši vertė yra iš tikrųjų funkcija. Taigi mums nereikia suteikti šią funkciją, per se pavadinimą. Mes galime tik pasakyti, kad tai bus kai funkcija. Ji ketina imtis 1 argumentą. Argumentas šiai funkcijai bus bet serveris atsiuntė mums atgal iš prašymo. Tiesiog patinka, kai mūsų naršyklė pateikia prašymą, serveris siunčia kažką atgal ir naršyklė rodo jį, , AJAX, mes ką tik pateikė prašymą, serveris atsiuntė kažką atgal, ir dabar mes turime, kad atstovavo eilutę. Su ta eilutę, aš tiesiog norėčiau parodyti, kad puslapyje. Tai, kad aš ruošiuosi turėti vieną paskutinį selektorių. Noriu, kad pasirinktumėte elementą ID kainą. Tai tik tuščias DIV, kad aš sukūriau puslapyje, ir aš noriu nustatyti tą div būti nepriklausomai serveris atsiuntė mums atgal turinį. Aš iš tikrųjų keistas quote.php šiek tiek. 

Užuot paskambinę teikimą ir teikti tam tikrą puslapį, quote.php dabar tiesiog vyksta, jei norite spausdinti akcijų vertę kaip eilutę. Taigi, jei jums buvo aplankyti puslapį, jūs tiesiog matyti, kad mažą eilutę kokia akcijų kaina yra. Vienas paskutinis dalykas, kurį turime padaryti čia tiesiog įsitikinkite, kad ši funkcija grąžina klaidinga. Ką tai sako, kad, jei aš viduje įvykių apdorojimo ir kad renginys prižiūrėtojas False, o ne grąžinant tiesa, tai reiškia, kad aš nenoriu originalų renginį į ugnį. Šiuo atveju, jei mes neturėjo "JavaScript" ir pateikė formą, mūsų interneto naršyklė ketina pasakyti: "Aš ruošiuosi siųsti kartu, kad duomenys," ir jie nusiųs jus į kitą puslapį. Nes mes naudojant AJAX dabar nereikia siųsti vartotoją į kitą puslapį. Mes tik noriu matyti rezultatus dinamiškai, tame pačiame puslapyje. Mes tikrai nenoriu eiti bet kur, ir aš noriu likti tame pačiame puslapyje. Taigi, grįžtant klaidinga, mes užtikriname, kad forma nedaro, kad mums. Paimkime, ką tai iš tikrųjų atrodo kaip atrodo. Mūsų citata puslapis atrodo tas pats. Leiskite man atsigriebti inspektoriui žemyn čia, kad mes galėtume pamatyti, kas vyksta. Padaryti šiek tiek mažiau didžiulis. Atminkite, kad jeigu mes atverti skirtuką Network, tai kur mes galime pamatyti iš HTTP užklausos vyksta puslapyje. 

Reikalingas simbolis, leiskite man įvesti AAPL ir spustelėkite Gauti Citata. Dabar mes matome, kad "Apple" akcijų kaina šiek tiek dolerių tik pasirodė puslapyje, tačiau URL adresas nepasikeitė. Tiesą sakant, čia yra HTTP užklausa, kad mes tiesiog padarė. Mes padarėme POST užklausą į quote.php. Tai turi prasmę. Tai yra tai, ką serveris atsiuntė mums atgal. Tai nebėra Ši gigantiška HTML dokumentas su paveikslėliais ir panašių dalykų, tai tik teksto eilutė, ir tada mes tiesiog rodomas teksto eilutė. Jei mes einame atgal į antraštes ir pamatyti, ką mes iš tikrųjų perdavė viduje šio HTTP užklausa, mes galime matyti, kad čia mes išsiuntėme kartu rakto simboliu ir AAPL vertės, o tai, ką vartotojas turi įvesti. Tai yra gerai, bet ji vis dar šiek tiek erzina. Dar turiu spustelėkite šį mygtuką, jei norite gauti akcijų kursus. Mes užsiėmę žmonės ir mes neturime laiko paspausti mygtukus. "Google" suprato, kad tai šiek tiek atgal, kai jie įgyvendino intuityviąją "Google". Kas intuityvioji "Google", kaip įvedate jis tiesiog pradeda rodyti rezultatus jums todėl jūs neturite jaudintis, net spustelėdami Ieškoti. Tiesą sakant, istorija, susijusi su įdomus, kad. Kai išėjo intuityvioji "Google", žmonės buvo, pavyzdžiui, "Whoa, tai super nuostabi." "Tai so cool." Ir studentas Stanfordo universitete, kuris buvo 19 metu padarė šią svetainę vadinamas "YouTube" Momentiniai. Visi "YouTube" Instant nėra efektyviai ieškoti "YouTube" akimirksniu. Taip, o ne eiti į YouTube.com ir paspauskite "Ieškoti kai aš pradedu rašyti į "YouTube" Instant kažką kaip CS50, čia mes galime pamatyti, kad jis bando lėtas interneto ryšys gyventojų gyvena šie rezultatai. Padaryti, kad mes iš tikrųjų gali padaryti labai paprasta mūsų quote.js failo pakeitimus. Dabar mes pridedant šį įvykį, kai forma yra pateikta. Mes tikrai norite, kad vartotojas nebėra pateikti šią formą, tad vietoj ugnį Šis renginys kiekvieną kartą, kai vartotojas paspaudžia. Norėdami tai padaryti, tegul pirmas pakeisti įvykį iš pateikti keyup. Tai reiškia, kad, o ne laukti, kol forma pateikti, kiekvieną kartą, kai nuspaudžiamas klavišas, kažkas nutiks. Jis nebėra prasmės pridėti šį keyup įvykis visai forma. Mes tikrai rūpi tik tos paieškos laukelį. 

Norėdami pasirinkti, kad dabar, mes galime pakeisti tai, o ne forma-citata, forma citata ir mes turime prisidėti (įveskite = TEXT), ar mes galime pasakyti, (Name = simbolis) - ką mes norime. Dabar yra paskutinis dalykas, mes turime padaryti. Prisiminti žemyn čia, kai mes pasakėme Return FALSE mes sakėme, mes nenorime, kad pagal nutylėjimą įvykis į ugnį. Bet jis tiesiog taip atsitinka, kad jei mes išjungti, kad dabar, ką mes įvesti nesiruošia pasirodyti naršyklėje nebėra , nes tai būtų numatytieji veiksmai rašyti į teksto laukelį. Mes nebenori nepaisoma, todėl galime sunaikinti šis sugrįžimas klaidinga. Jei mes išgelbėti, kad ir perkraukite puslapį, dabar, kai aš pradedu rašyti AAPL pamatysite, kad akcijų kaina apačioje čia automatiškai baigia. Taigi čia yra CS50 Finansai patenkintų klientų. Iš tikrųjų įdomus pasakojimas apie "YouTube" Instant yra tai, kad studentas tiesiog rūšies parašiau kaip 1-naktį projekto, , o kitą dieną jis buvo pasiūlytas darbas "YouTube" generalinis direktorius. Taigi taip paprasta, jums CS50 studentai, jūsų galutiniai projektai gali jums "YouTube" darbas. Kažką panašaus, kad yra tikrai cool idėja, kad galutinė projekto, tiesa? Mes turėjome šiek tiek esamą funkcionalumą, kad mes norime integruoti su. Mes pagerinti vartotojų patirtį šiek tiek, ir staiga ieškoti kažką apie "YouTube" Instant gali būti daug lengviau nei ieškoti jo įprastą "YouTube". Taigi, kad AJAX trumpai. 

Pavyzdžių, kad Juozapas buvo parodyta, mes matėme daug autocompletes ir šie autocompletes yra tikrai, tikrai patogu, nes mes neturime prisiminti - Pavyzdžiui, jei jūs neturite prisiminti akcijų kainą Apple ir mes tiesiog žinau, kad aa kažkas, o ne tiesiog pasakyti man, "Šis dalykas akcija kainuoja tai daug pinigų," Aš rūšies norėčiau žinoti, ką atsargos pradėti aa. Mes galime padaryti, kad tikrai gražiai su "Bootstrap" biblioteką, kuri jau įtraukta viduje CS50 Finansų. Jei atvykote čia "JavaScript" žyma ir slinkite žemyn į Typeahead, tai tik gražus įskiepiai, kad kažkas jau rašė mums, ir mes galime lengvai naudotis jos funkcionalumą, kaip šis. Įvedžiau, ir čia yra sąrašas kai kurių teigiama, kad prasideda su A. Galime pasakyti, kad manau, kad tai yra tikrai cool, ir atėjo laikas man tai mano puslapyje. Pasirodo, kad tai yra tikrai, tikrai paprasta. Tegul przeskakiwać Čia quote3.js. Mano failas atrodo šiek tiek skiriasi. Žemyn čia visi mano AJAX dalykų yra tas pats. Noriu įkelti atsargų duomenys, be to, kad eiti į kitą puslapį. Bet dabar noriu naudoti šį priedą. Bootstrap dokumentus puikūs pavyzdžiai, kaip tiksliai galiu tai padaryti. Noriu pasakyti: "Štai, kad aš noriu Automatinis užpildymas ant įvesties, ir aš ruošiuosi skambinti šią funkciją, vadinamą typeahead ir kad vyksta tvarkyti visus mums Typeahead stuff. Jis bus inicijuoti sąrašą, jis bus padaryti viską, mūsų filtravimas. Vienintelis dalykas, tai turi žinoti, kokius duomenis mes jūs autocompleting. Kad aš sužinojau šį klavišą, tiesiog skaitant dokumentus ir žiūri iš pavyzdžių. Jei aš tau šaltinio raktas, šio registro rakto yra tik keletas dalykų masyvas norite Automatinis užpildymas. Šis kintamasis atėjo iš šios kitos bylos. Aš atverti symbols.js. 

Ši symbols.js yra tik tai tikrai, tikrai didelis masyvas, kuriame eilutes Visų šių NASDAQ akcijų simbolių. Jei aš noriu šokti atgal į HTML, taigi jharvard, vhosts, globalhost, html, šablonai, quote_form. Nes tai dabar vadinama quote3.js, leiskite man pakeisti "JavaScript" failą, aš taip pat čia. Dabar turiu quote3.js, todėl aš ruošiuosi įkelti toje atskirą "JavaScript" failą, vienas, kad yra, kad "Bootstrap" Automatinis užpildymas. Dabar, kai aš šokinėti atgal į naršyklę, perkraukite puslapį ir aš pradėti rašyti aa, ten mano automatinį užbaigimą. Ir tai buvo tikrai taip paprasta, kaip kad. Aš turėjau 1 eilutę kodo, tik pasakė: "Čia yra dalykų, aš nori Automatinis užpildymas" ir staiga aš ne visai daug pastangų, ne visi turi tai tikrai, tikrai gražus funkcionalumą. Kaip jūs kurti svetaines ir ypač priekinės pusės dalykų, jūs ketinate rasti, tai yra daug. Yra daug, daug, daug ten tikrai cool laisvosios bibliotekose , kad padaryti tai super lengva padaryti kažką panašaus. Ar kas nors galvoja apie visus šio didelio sąrašo simbolių tiesiog autocompleting trūkumų? Kas gali būti kažkas, kad nėra geriausias šio požiūrio? Taip. >> [Studentas] Laikas, jei turite daug [nesigirdi] Taip. Dabar mes atsisiųsti šį didžiulį "JavaScript" failą, ir ten daug simbolių. Ir todėl, jei mes turime daiktų toną, tai gali rūšies padidinti ne tik ieškoti latency , bet taip pat atsisiųsti faktinis failą. Didysis. Dar ko nors? Dabar ne nesuprantamų EEE. Jei aš tipo A, įmonių, kurios pasirodys čia gali būti iš populiariausių bendrovių, kurių pavadinimai prasideda A 

Kol aš gauti "Apple", tai gali užtrukti šiek tiek daugiau simbolių, rasti tai, ko aš ieškau. Tai automatinio užbaigimo neturi šį EEE jausmą. Tai tiesiog pasakyti: "Viskas, kas atitinka aš ketinu parodyti." Vietoj to, aš norėčiau kažkaip svarbūs integruoti į mano paieškas. Jei aš einu per Yahoo! Finance ", finance.yahoo.com Jei aš pabandyti įvesti simbolį Yahoo! Finance puslapyje ir aš pradėti rašyti GOOG, turiu šią gražią sąrašą dalykų, kuriuos. Aiškiai, atrodo, Yahoo! Finance kažką daro protingas čia. Jie yra šiek tiek aktualios, ir jie taip pat gauti papildomos informacijos kaip sandėlyje vardu. , Kad kažkas, kad aš negaliu tikrai gauti tik mano vertybinių popierių simbolių sąrašą. Noriu, kad tai ir todėl aš jį priimti. Norėdami tai padaryti, kuris leidžia padaryti keletą dalykų. Tegul pirmasis atverti inspektoriui šiame puslapyje nes pamatėme, kad šis puslapis nėra perkrovimo ne visi, todėl tikriausiai naudojant AJAX kažkaip būti įkeliama savo duomenis. Mes galime išsiaiškinti, kokie duomenys krovos. Jei aš spustelėkite skirtuko Šis tinklas, jie bus visus prašymus, kurie pradeda būti atleistas. Dabar, jei aš įvesti goo, mes galime pamatyti, kad aš ką tik gavo naują HTTP užklausa. Tai turbūt, kad duomenys būtų tiekiamos iš. Be abejo, jei aš žiūriu į šį URL, kuris yra šiek tiek keistai pavadintas, mes galime matyti, kad tai, kur tiksliai Yahoo siunčia savo duomenis. 

Aš sukūriau atskirą failą vadinamas suggest.php, kad labai panašus dvasios paieškos funkcija. Tai iš esmės ketina padaryti užklausą į Yahoo URL, grįžti tam tikrus duomenis, ir siųsti jį atgal į mane. Dabar, o ne naudojant šią didelis, didžiulis sąrašas simbolių, Aš galiu naudoti "Yahoo" gražus aktualumo dalykų, ir aš neturiu atsisiųsti šį didžiulį "JavaScript" failą. Aš tik ketina nugriauti faktiškai atitinkamus simbolius akcijų. Peršokti į tai. Taigi, html, js. Mes dabar quote4. Dabar mes nebenaudojate, kad "JavaScript" failus didelį sąrašą. Tačiau yra nedidelė rūšies projektavimo problemos čia. Mes sakė, kad AJAX asinchroninis. , Ką tai reiškia, kad kai aš AJAX prašymą, 8 on-line, kad čia, tai kur mano AJAX prašymas iš tiesų yra atleistas. Tarkime, kad dabar aš turiu tam tikrą kodą žemyn čia, kad ketina daryti kai kurių dalykų norėtų įspėti vartotoją ar ką nors keisti puslapio. Kas nesiruošia atsitikti naršyklė nesiruošia laukti šio prašymo toliau prieš nusileisdamas ir pataikyti į šią eilutę. Štai asinchroninis dalis. Jis ketina pateikti tokį prašymą, ir sako: "Kai baigsite, "Grįžti ir iškviesti šią funkciją, kad aš sakiau jums skambinti viduje sėkmės." Tai reiškia, kad mes galime ne tik parsisiųsti visas atsargas iš anksto. Mes turime padaryti prašymą ir laukti ko nors grįžti. Tai reiškia, kad prieš, galėtume tiesiog pasakyti Bootstrap "Štai sąrašas dalykų, aš noriu jus į Automatinis užpildymas". Mes nebegalime padaryti, kad nebėra, nes mes nežinome, ką mes norime iš tikrųjų automatinį užbaigimą,. Laimei, Bootstrap pagalvojau apie tai, nes yra protingas vaikinai ten, ir jie iš tikrųjų davė mums dar vienas būdas įkelti šį Typeahead įskiepį. Anksčiau, šio šaltinio turto vertė buvo tik tai didelis masyvas dalykų Automatinis užpildymas. 

Dabar šaltinis nuosavybė yra iš tikrųjų funkcija, ir šios funkcijos tikslas yra išsiaiškinti, kas dalykų, Automatinis užpildymas. Būdas, ji ketina išsiaiškinti, kad iš ta, kad jis ketina prašyti Yahoo! Finance ką iš geriausių dalykų Automatinis užpildymas. Tai, kad aš ruošiuosi labai panašus AJAX prašymą. Aš ruošiuosi paprašyti šį puslapį suggest.php. Noriu siųsti kartu simbolių. Ir dabar mano sėkmės, man pasakė, Bootstrap dokumentai , kad, siekiant užpildyti, kad iš sąrašo dalykų, viskas, ką reikia padaryti, yra išlaikyti šiame masyve su skambinimo funkcijas. Bet palaukit minutėlę. Jei tai turėtų būti masyvas ir AJAX siunčia man atgal tekstas, kaip tai įmanoma? Šis straipsnis yra naujas būdas keistis duomenimis, vadinamas JSON. Šiuo atveju mes ne tik išsiųsti atgal paprastą teksto eilutę. Dabar mes susiduriame su šiuo atveju daugiau akcijų simbolių sąrašą. Šie pradiniai simboliai taip pat gali būti dalykų, pavyzdžiui, įmonės pavadinimas arba šiuo metu galiojančias kainas. Tik naudojant didelį ilgą eilutę, kad ne, bet numatytu būdu suformatuotas nesiruošia būti geriausias būdas gauti šiuos duomenis iš "Yahoo" serverio man taip, kad aš galėtų lengvai suprasti. JSON yra technologija, kuri pasinaudoja kaip mes kuriame Association masyvų "JavaScript". Tai atrodo daug, pavyzdžiui, "JavaScript" Association masyvas, ir iš tiesų, tai, nes ji yra. JSON reiškia JavaScript Object Notation. Tai iš esmės susitarta formatą perkelti duomenis ir atgal. Čia tai JSON objektas arba tai JSON asociatyvus masyvas siųsti man keletą klausimų apie duomenis žinoma. 

Šio masyvo raktus yra dalykų, pavyzdžiui, žinoma, kad turi CS50 vertė, ir žemyn, čia mes galime pamatyti, kad aš gali turėti vertę, kuri yra masyvas. Aš neturiu daryti dalykus, pavyzdžiui, parse iš stygos ir ieškoti kableliais ir elgiasi beprotiškai, kaip kad. Nes tai yra deklaruota šio JSON formatu, JavaScript ir jQuery jau turi funkcijas konvertuoti eilutę kad atrodo kaip šis JSON į faktinį JavaScript Association masyvas , kad mes galime dirbti su. Daro, kad yra taip paprasta, kaip sakydamas, kad jau nebėra šį failą, suggest.php siųsti man tiesiog teksto eilutę, bet aš žinau, ji ketina būti išsiųsti mane atgal JSON. Tai reiškia, kad kad JSON gali būti konvertuojamos į Association masyvas JavaScript. Ir taip JQuery, aš norėčiau, kad jūs padaryti, kad man. Tai reiškia, kad šis atsakas parametras čia, tai nėra tik eilutę. , Nes mes papasakojo jQuery, kad čia ateina kai JSON, JQuery bus pakankamai protingas, kad pasakyti, "Jūs norėjote JSON?" "Aš ruošiuosi konvertuoti į Association masyvas už jus." Tegul iš tikrųjų imtis bent skirtuką Network atrodo, kai mes quote4.js. Keisime, ir perkraukite puslapį. Dabar aš ruošiuosi vėl įvesti-. Aš atlikau keletą prašymus suggest.php, bet dabar šis atsakas, , o ne tik eilutę, tai JSON. Taigi, aš turiu atvirą garbanotas petnešomis, sakydamas: "Čia ateina masyvą. 

Pirmasis ir vienintelis raktas šio Association masyvas vadinamas simboliai, ir tada čia yra visų atitinkamų simbolių masyvas dabar iš Yahoo! Finance ", o ne iš milžiniškos sąrašo. Štai kaip aš galiu tiesiog užpildyti šią Automatinis užpildymas įskiepiai su kai kurių duomenų, kad neina į vietinį failą, kuris jau iš anksto bet nuo kažko kito. Pasirodo, kad iš tiesų galime pasinaudoti technologija, vadinama JSONP, arba JSON su kamšalu, kad bus pašalinti šį suggest.php jokių tarpininkų. Bet vietoj to, tai, kad, tegul vietoj to, kaip aš galiu pagerinti tai dar atrodo. Man tikrai patinka Bootstrap "Typeahead. Tai tikrai gražus. Bet mes vis gerai JavaScript ir mes norime rūšies padaryti tai patys, gal imtis pažvelgti į tai, ką šis priedas gali daryti. Tegul nebegali naudoti, kad Typeahead dalykas, ir pabandykime siūlomų išteklių sąrašą, kad šis patys. Čia quote6.php mes ketiname pradėti nuo tuo pačiu būdu. Kiekvieną kartą, kai kas nors įveda kažką, mes norime, kad AJAX prašymą. Tai yra panašus į mūsų pradinės CS50 Finansų Instant. Užuot Pateikdamas prašymą quote.php, mes dabar Pateikdamas prašymą į tą pačią bylą, kaip ir anksčiau, šį suggest.php, kuris yra tik ketina traukti duomenis iš "Yahoo! Finance". 

Vėlgi, mes vis dar tikisi JSON, tačiau dabar, nes Typeahead nedaro tai mums, mums taip pat reikia siųsti kartu vertę, kuri yra viduje dabartinio teksto laukelyje. Dabar mes žinome, ką paprašyti Yahoo! Finance, ir todėl dabar čia yra funkcija, kad mes norime atlikti, kai prašymas baigia. Mes neturime įjungti į sąrašą, kad čia, kur mes iš tikrųjų ketiname sukurti pasiūlymų sąrašo. Norėdami tai padaryti, panašiai kaip PHP sudurtinius šių didelių eilutes HTML tada mes spausdinami juos, mes galime padaryti tą patį tiksliai dalykas JavaScript. Pirma, mes ketiname pradėti šią eilutę, pavadintą pasiūlymai ir ši eilutė yra tik ketina būti šiek tiek HTML. Mes norime, kad ji būtų sąrašas dalykų, kad mes ketiname pradėti nuo šio sąrašo žyma, ir dabar mes ketiname pakartoti per visus iš simbolių, kurie buvo grąžintos atgal į mus. Prisiminti, nes mes sakė datatype: "JSON", tai yra ne eilutę. Tai jau mums masyvo. Tai tikrai cool. Mes galime tiesiog pasakyti, "aš noriu jums pridėti sąrašo elementą". Mes įdėti jį viduje elemento pusės to, mes suteiksime pasiūlymus klasę, todėl mes žinome, kas tai yra, ir dabar čia yra simbolis, kad mes turime grįžti iš "Yahoo! Finance". 

Kai mes sukūrėme elementas kiekvienam iš simbolių, mes Dotarłeś atgal mes tiesiog nori uždaryti sąrašą. Taigi, dabar pasiūlymus šį mažą HTML fragmentą kai įdėti į puslapį, bus sąrašas dalykų, mes ieškome. Dabar galime iš tikrųjų įdėti, kad puslapyje. Norėdami tai padaryti, kad aš iš tikrųjų sukūrė kitą tuščią div ir aš jai pasiūlymus ID. Panašiai kaip mes nustatyti div turinį, kad būtų galima parodyti, kad atsargų duomenų kainą, dabar mes tiesiog norite nustatyti šio div turinį, kokia ši eilutė kuriame yra šie simboliai. Pagal naudodami šį HTML metodą, pasiūlymai kintamasis, ši eilutė yra HTML eilutę. Aš noriu, kad jūs, kad HTML ir įdėti jį viduje div vadinamas pasiūlymai. Mes tiesiog pridedama kažką į DOM. Mes pridėjome keletą naujų elementų į DOM, kad dabar mes galime rodyti puslapyje. Pažiūrėkime, kaip tai atrodo. , Jei mes įkelti quote6 ir dabar mes grįžtame, dabar, kai aš pradėti rašyti AAPL, mes jau nebeturi, kad "Bootstrap" Automatinis užpildymas, bet dabar mes turime šį sąrašą, kad mes padarėme patys. Tai yra šiek tiek atrodys prasčiau nei šis įkrovos Typeahead, pavyzdžiui, bet ji neleidžia mums daryti vienas kitas dalykas. Kai ieškojome tuo "Bootstrap" įskiepiai, mes matėme, kad kai mes autocompleted, vienas iš AutoComplete reikšmių AAPL. Kad gali būti ne taip naudinga. Kaip vartotojas, aš gali ne iš karto pripažinti visų akcijų simbolių. Ką aš turbūt labiau linkę pripažinti bendrovės faktinio pavadinimai. Taigi ar nebūtų tai būtų tikrai naudinga, jei užuot sakydamas AAPL tai sako kažką panašaus į "Apple Inc , Nes mes valcavimo tai patys, mes tikrai gali lengvai tai padaryti. Tegul atverti mūsų paskutinį citata failą čia, kad quote7. 

Tas pats. Aš ką tik sukūrė dar vieną PHP failą, kuris kreipiasi į mus daugiau nei tik simbolių. Ji taip pat suteikia mums įmonės pavadinimą. Ir taip mes darome tą patį. Mes darome AJAX prašymą. Kai prašymas bus baigtas, mes ketiname čia galėtų vykdyti šią funkciją, ir ši funkcija yra sukurti didelį elementų eilutę. Bet skirtumas yra tas, kad iš šių sąrašų vertė nebėra vien tik simbolis, tai dabar pavadinimas. Taigi, mes turime vieną mažą problemą. Kai mes naudojame mūsų peržvalgos, mums reikia kažkaip perduoti jį simbolį. Mes negalime perduoti peržvalgos kažką panašaus į "Microsoft Corporation". Mes turime perduoti jį MSFT. Kai mes HTML rašymo, mes turime daug gražus built-in požymių. Galėjo būti susijęs su juo href ar klasė. Bet ką mes tikrai turime dabar, yra kiekvienos iš šių nuorodų turėti akcijų simbolis, su juo susijusios. Nėra jokios built-in HTML atributas akcijų simbolis, bet, laimei, HTML5 leidžia mums kurti savo atributus, ką norime. Duomenų simbolį, sakydamas, aš pristatė naują atributą kurio pavadinimas aš ką tik padarė, ir tai yra gerai, nes aš ankstesnė su šiais duomenimis. Mes ketiname laikyti viduje ten simboliu sandėlyje dabar. Ką tai reiškia, kad nors mes rodote įmonės pavadinimą vertę viduje mūsų automatinį užbaigimą, mes dar prisimena simbolis kuri yra susijusi su kiekvienos bendrovės. Būdas, ką mes darome, kad yra viduje šio elemento. Taigi, tai reiškia, kad mes turime padaryti dar vieną kaita. Kai mes spustelėkite jį dabar, mums reikia, kad iš tikrųjų pasinaudoti simbolio atributas , o ne tik jo vertę. Jei mes atgal į viršų, mes pridėti įvykio apdorojimo pasiūlymus. Kai vienas iš šių pasiūlymų yra paspaudėte dabar, aš noriu kažką daryti. Ką aš noriu padaryti, tai pakeisti tos įvesties langelį vertę. Dabar aš noriu nustatyti tą patį Val funkciją. 

Taigi, be jokių argumentų val funkcija grąžina jums, kas jau esančiame tekstiniame lauke, bet jei jūs suteikiate jai eilutę, ji ketina imtis, kad eilutę, ir įdėti jį į teksto laukelį. Aš pasirinkę teksto lauką tuo pačiu būdu. Tai pavadinimas yra simbolis form citata viduje. Dabar aš siunčiu atributo duomenų simbolis vertę. Šis dalykas čia yra nauja, tai $ (this). Ką tai reiškia yra elementas, kuris buvo paspaudėte. Mes galite pamatyti čia, kad mes ne pridedant įvykis paspaudimus kiekvieną elementą su klasės užuominos. Atvirkščiai, mes artėja tai šiek tiek kitaip. Vietoj to mes sakome, kai kas nors viduje šio PASIŪLYMAI div, atminkite yra tik tame sąraše konteineris, jei kažkas viduje div paspausti ir ji turi įtaigos klasė, Noriu, šis įvykis į ugnį. Iš esmės, ką tai reiškia, kad mes galime padaryti, mes galime panaudoti tą pačią aptarnavimo įvykio visų sąraše esančių dalykų. Taigi, mes neturime turėti vieną aptarnavimo įvykio pirmojo elemento ir pats kaip antrojo elemento krautuvai. Vietoj to mes galime pasakyti, "Aš noriu, dėl to paties įvykio prižiūrėtojas taikomos viskas mano sąraše". Bet mes turime kažkaip žinoti, kuris elementas buvo paspaudėte. Šis "šį" žodį reiškia tik tai. Tai objektas, kuris buvo tiesiog spusteli naudotojas. Jei aš tiesiog paspaudėte 3-ią nuorodą, tai yra tos 3 nuorodos elementas, , o tai reiškia, kad aš galiu gauti savo atributą, duomenų simbolis, kuriuos mes žinome, joje turi būti simbolis, kuris susietas su įmone, aš tiesiog paspaudėte. Jei mes šuolis atgal į mūsų finansų puslapyje, mes galime matyti, kad dabar, kai aš pradėti rašyti kažką panašaus į MSFT, mes jau nebegauna tik simbolius akcijų, mes dabar gauti faktinius bendrovių. Bet kai aš spustelėkite vieną iš šių bendrovių, matome, kad mes iš tikrųjų užpildant teksto laukelį su įmonės pavadinimu bet kas buvo saugomi viduje šių duomenų atributų. Ir todėl, jei aš iš tikrųjų patikrinti vieną iš šių elementų, paspaudę dešiniu klavišu ir spustelėdami Tikrinti elementą, mes iš tikrųjų galite pamatyti, kaip tai atrodo. 

Atminkite, kad tai yra kažkas, kad mes sukūrėme viduje už linijos kai mes buvome sukurti, kad HTML eilutę. Mes galime matyti, kad šie duomenys simbolis turi MSFT, kuris yra puikus vertę. Štai ką mes tikėjosi. Tai simbolis, ir tai, kaip mes turime vertę, mums reikia naudoti viduje šio teksto laukas. Kad pakankamai citata forma, todėl, kad tai rūšies nuobodu. Leiskite tiesiog padaryti kai greitai patobulinimų mūsų portfelio puslapyje. Jeigu jūs naudojotės CS50 Finansai, o ir pradėdami pirkti ir parduoti daug atsargų, galiausiai ši lentelė ketina gauti gana didelis, ir jūs ketinate norite biržos juosta, žinoma. Kai lentelėje yra tikrai, tikrai didelis, tai vartotojui gali būti naudinga pabandyti ieškoti per jį. Viduje paieškos laukelį, jei aš pradėti rašyti kažką panašaus į Disney ir ieško mano Mickey Mouse sandėlyje, mes galime pamatyti, kad lentelės dabar filtravimas pagal tai, ką aš tiesiog atspausdinti. Ši funkcija atrodo itin sudėtinga, tačiau ji tikrai, tikrai paprasta su JQuery ir "JavaScript". Tai portfolio.php faile yra "JavaScript" failą pavadinimu portfolio.js. Paimkime Tuo išvaizdą. Taigi, html, js, portfelį. Štai kur mes darome, kad ieško ant stalo. Pirmas dalykas, kurį reikia padaryti, tai pridėti įvykio apdorojimo šio tekstinio laukelio nes mes žinome, kad mes norime, kad mūsų filtravimo funkcija gaisro Kiekvieną kartą, kai vartotojas paspaudžia kažką, nes mes neturime laiko Paieškos mygtukai. Pirmas dalykas, kurį reikia padaryti, tai išsiaiškinti, ko ieško vartotojas, kaip mes anksčiau. Šis raktinis žodis - tai einamųjų elemento vartotojas bendrauja su. 

Kadangi vartotojas bendrauja su paieškos laukeliu, $, Tai reiškia, kad paieškos laukelį, taip this.val suteikia mums, kas viduje paieškos laukelį vartotojas šiuo metu renkate. Taigi, dabar, ką mes norime padaryti, tai mes norime pakartoti virš visų eilučių viduje mūsų stalo. Norėdami pasirinkti visų eilučių mūsų stalo, daviau tos lentelės, stalo portfelio ID ir kiekvienoje eilutėje yra atstovaujama pagal TR elemento, taip, tai selektorius ketina grįžti į mane didelis masyvo visų eilučių mano stalo. Dabar aš noriu, kad keistumėte, kad masyvas. Aš galėtų jums kilpą, bet JQuery faktiškai teikia mums gražią funkcija vadinama "kiekvienas". Tai, ką kiekvienas daro kiekvienas trunka vieną argumentą, ir šis argumentas yra funkcija. Tai, ką jis ketina daryti, ji ketina taikyti šią funkciją kiekvieno elemento viduje šio sąrašo. Ši funkcija užima vieną argumentą, kad el, Kai ši funkcija yra vykdoma, tai e bus pakeisti pirmoje eilutėje, tada antra eilutė, o tada trečioje eilėje. Šiuo būdu, tai yra tas pats, kaip veikia už linijos ir tada suprasti esamą elementą, paremtą indekso viduje savo kilpą. Kiekvienos iteracijos, kiekvienam iš šių elementų lentelėje, Noriu patikrinti, ar elemento teksto viduje langelį eilutėje tekstą - atitinka tai, ką aš ieškoti. Tai didelis ilgą eilutę komandų, kaip galėčiau tai padaryti. Pirma, dar kartą, tai dabar daroma nuoroda į, nes jis viduje nauja funkcija - tai dabar dabartinę eilutę į lentelę. Noriu pasinaudoti dabartinę eilutę lentelėje, ir aš noriu gauti, visi jo vaikai. Atminkite, kad DOM yra hierarchinė, , o tai reiškia, kad elementai turi vaikų skaičių. 

Tai vaikai funkcija ketina grįžti į mane atgal visus elementus, masyvas kad tie vaikai, šiuo atveju, lentelės eilutė. Tai yra tiesiog ląstelės viduje iš eilės. Aš tik noriu ieškoti per pirmąjį langelį. Tai pirmoji funkcija sako duok man pirmasis elementas masyvo,. Tada tekstas funkcija sako, kad gauti man, ką tos ląstelės viduje nes noriu ieškoti per šio teksto. Galiausiai, leiskite konvertuoti jį į mažąsias, todėl mes galime padaryti teksto didžiąsias ir mažąsias raides užklausas. Galiausiai, mes norime pamatyti, jei, kad viduje lentelės eilutė yra eilutę mes ieškote. IndexOf funkcija JavaScript daro tik tai. Jis sako mums, ar ši eilutė yra dar viena eilutę. Jei tai tiesa, kad langelyje yra tai, ką aš ieškoti, tada aš noriu įsitikinti, kad jis rodomas. Rodyti metodas bus pasakyti: "Parodyk elementą." Jei tai ne tas atvejis, tai reiškia, ką aš ieškote neįtraukta toje eilutėje, ir todėl aš noriu, kad paslėpti nuo vartotojo. Kuri pasiekia, kad gražus filtravimo efektas, kai nebėra matome visą lentelę. Jei jus domina, kad šis simbolis taip pat, mes po šaltinį internete. Bet tai tikrai paprasta. JQuery yra nuostabus šių animacija ir manipuliuoti CSS savybes metodus. Taip, kad jį man. 

Kas tada laukia ateityje? Kaip pamatysite po kelių dienų, galutinis projektai pasiūlymas yra mokamas. Galutinis projektai pasiūlymas bus užduoti jums keletą klausimų, , tačiau tarp jų bus trys etapai - 1 "gera" etapas, vienas geriau etapas, ir vienas geriausias. Idėja iš tikrųjų yra padėti jus vaikinai nustatyti savo lūkesčius taip, kad minimaliai jums bus laimingas su savo galutinio projekto rezultatų ir ji bus "gera" tiek, kiek esate susirūpinęs. Bet tada gauti jums pasiekti tik šiek tiek į kažką labui geriau kažkas geriausia, mes taip pat rūšiuoti stumti jus link, kad taip pat. CS50 Hack-a-Thon, tuo tarpu, per kelias savaites. Paprastai, mes tai loterijos pagrindu, nes interesų, tačiau šansai yra, mes priimsime keli šimtai mus maršrutiniais autobusais iš Harvardo aikštėje Kendall Square, kai "Microsoft" yra gražus objektas, taikliai pavadino "NERD" - Naujosios Anglijos mokslinių tyrimų ir plėtros centras. Mes siekiame, apie 8 val. Mes turime šiek tiek maisto. Apie 01:00 mes turime šiek tiek daugiau maisto. Apie 5 val. Jei jūs vis dar miega, mes per galvą IHOP arba priimti jus atgal į kampusie. Tikslas yra pasinerti į galutinius projektus kartu su klasiokais ir darbuotojų. Tada po kelių dienų CS50 mugė, , kuris iš tikrųjų reiškia būti galimybė jums, vaikinai, pristatyti savo darbą ir pasiekimus už tą semestrą, o trina pečių vieni su kitais ir gauti tai, ką kiekvienas padarė jausmą. Turint tai sakė, labai ačiū Tommy ir Juozapui ir mes matome, pirmadienį.  [Plojimai]