[Powered by Google Translate] [Săptămâna 9, Continuare] [David J. Malan - Universitatea Harvard] [Acest lucru este CS50. - CS50.TV] 

Acest lucru este CS50. Acesta este sfârșitul săptămânii 9. Mulțumesc mult. În cele din urmă. Săptămâna 9. M-am prins. Astăzi vom continua conversația noastră despre programare web cu un ochi spre final al proiectului, nu, pentru că trebuie să faci ceva de web-based pentru proiectele finale, ci pentru că, fie pentru proiecte finale sau după CS50 aceasta este cu siguranță direcția în care software-ul modern, se întâmplă. Și totuși, nu e de fapt un lucru ușor. De fapt, unul dintre cele mai dificile lucruri de făcut este aspectul de proiectare. 

De exemplu, prin design-ne referim la obtinerea de fapt, interfața cu utilizatorul sau experiența utilizatorului dreapta. Îndrăznesc să spun - și știm de la un set de probleme recente atunci când o parte din tine difuzate nemulțumiri dvs. despre unele bucată de software sau hardware pe care le înfurie, fie în campus sau în afara - există o mulțime de site-uri acolo, există o mulțime de hardware acolo, acest tip de rahat. Dar realitatea este că a face lucrurile care sunt ușor de folosit, încă sunt totuși puternic este o provocare foarte dificil. Deci, pentru ziua de azi l-am întrebat Iosif și Tommy să mi se alăture aici astfel încât să putem avea o conversație, atât despre design și ce tipuri de procese de gândire ar trebui să înceapă trece prin cap Atunci când proiectați proiectele dvs. finale, eforturile tale de viitor. Și apoi cu ajutorul lui Tommy ne vom uita la unele dintre detaliile de implementare. Cum poti avea o viziune pe hârtie sau în mintea ta pe care le poate executa apoi prin programare prin utilizarea unor tehnologii și tehnici tocmai am început să vorbim despre, și anume JavaScript și ceva chiar mai nou, și anume AJAX, JavaScript asincron. Care vă permite să creați tot mai dinamic de o interfață de utilizator prin preluarea mai multe date și mai mult progresiv de la un server. Deci, vom vedea unele dintre aceste fragmente, precum și de astăzi. Ca o paranteza, dacă sunteți interesat de concentrare în informatică sau minoring în informatică, știu că această vineri la prânz în Maxwell Dworkin 221 va fi un eveniment de pizza în cazul în care puteți învăța un pic mai mult despre informatică. Pe cale de ieșire ușa de astăzi vei fi capabil de a ridica un ghid neoficial la CS la Harvard. Ne vom pune pe cutiile de gunoi din afara la înălțimea taliei astfel că, dacă doriți să apuca si de a invata aceasta un pic mai mult despre CS, că va fi acolo pentru tine, ca a fost în săptămâna 0. De asemenea, dacă doriți să ni se alăture pentru masa de prânz CS50 aceasta vineri la 1:15 pm, cap la cs50.net/lunch. Fără alte introduceri, vă dau colegii de predare Iosif Ong. Hi. [Aplauze] Multumesc. Prima dată când am aflat despre design a fost într-o clasă numită aici CS179. 

Profesor la momentul ne-a spus povestea despre un alt profesor care au dus la un hotel si a folosit robinete. Poate cineva sa-mi spui ce cele 2 butoane de pe stânga și dreapta nu? [Elev] caldă și rece. >> Caldă și rece. Bine. Ceea ce în mod normal, așteptați, nu? Acest profesor după utilizarea robinetul vrea să ia un duș, și el continuă să folosească acest lucru. El crede că stânga și în dreapta sunt pentru caldă și rece, nu? Dar poate cineva spune-mi ce aceștia fac, de fapt? Orice mâini? [Răspuns studentul nu pot fi auzite] >> O sugestie este? [Răspuns studentul nu pot fi auzite] Temperatura >>? Deci, una dintre ele controleaza temperatura și alte controale? >> [Elev] Presiunea apei. De apă sub presiune. Bine. Acest profesor merge în acest lucru și, crezând că sunt controlul la cald și rece, transformă un drept, care crede că este pentru fierbinte, tot drumul până pentru că vrea să ia un duș cald. Ei bine, acestea nu se potrivesc cu adevărat în sus, așa că primește această experiență nu foarte distractiv de a fi într-un duș rece, și știm cu toții ce simte. Acesta este un exemplu de un defect de proiectare. Ce vreau să spun cu asta este așteptarea lui de la robinet nu corespunde cu ceea ce a iesit de la dus, care este un fel de nefericit pentru el. Deci, acesta este un exemplu de un defect de design care se întâmplă în viața reală. Dar noi vedem tot felul de celelalte, precum și. Suntem, probabil, nu fani ai sistemului MBTA. Acesta este un sistem de metrou, de fapt, în Londra, care spune, "Acest buton nu este în uz." De ce este chiar pe acolo? De ce nu ne pasă, chiar? Când am fost un copil, fiind o tehnologie savvy în casă, ori de câte ori computerul-ar fi prăbușit, mama mea ar veni la mine, mi-ai aratat acest ecran și să mă întrebi ce sa întâmplat. 

Chiar nu știu ce înseamnă asta. [Râsete] Ce? [Râsete] Uneori simtim ca dezvoltatorii de software sunt doar trolling noi. Deoarece utilizatorii suntem ca, "Ce se întâmplă pe Cineva ne spune.?" Această totul se reduce la o chestiune de design. De design, așa cum se poate vedea, nu este pur estetica despre, nu e vorba de cum arata lucrurile. Vedem aici că această mică pop-up pe aici, de fapt arată destul de frumos. Ea are o umbră picătură în fundal, acesta are raze de frontieră întâmplă. E un fel de drăguță. Nu e foarte bine conceput, pentru că nu este foarte ușor de utilizat. Această mică pop-up care apare nu da ma orice informații despre ceea ce se întâmplă, nu-mi spune nimic ca utilizator despre cum a recupera de la această eroare. Dorim să ne gândim la lucruri care designul nu este. În primul rând, nu e estetica. Este, de asemenea, nu umplutura aplicația dvs. cu tone de funcționalitate inutile. Dacă sunteți un restaurant thailandez, probabil că nu vreau să fiu un medic dentist, în același timp. Întrebări și cu Facebook, nu că mulți oameni îl utilizează și nu a fost cu adevărat la miezul a ceea ce au fost construirea. Și așa e frumos să cred că nu atât de mult despre cantitatea de lucruri pe care le pui la cererea dumneavoastră, dar de calitate si cum faci ca experiență de utilizator mai bună de fapt, îmbunătățirea pe ceea ce ai deja. 

Într-un cuvânt, de design ne spune ce ar trebui să ne construim. De exemplu, dacă suntem construi ceva care să ne caute lucrurile, cum ar fi Google, de exemplu, ar trebui să facem lucrurile într-o manieră care necesită ca utilizatorul să ia o mulțime de clicuri pentru a ajunge la ceea ce doresc, sau ar trebui să o facem într-un fel, de exemplu, cu Google Instant sau completarea automată care ne permite să ajungem la rezultatele noastre mai repede? Inginerie implică, la fel ca Tommy vă va arăta, de fapt construirea. Există o mulțime de tipuri de design. De exemplu, dacă sunteți construirea ceva pentru a implementa ceva într-o țară din lumea a treia în cazul în care nu există electricitate mult sau că tehnologia de mult, va trebui să proiecteze ceea ce veți construi într-un mod care oferă cu ușurință accesul la oamenii de acolo. Dar ce fel de decizii de proiectare alte ar putea fi acolo sau ar putea fi implicat în ceva de genul asta? Da. Văd o mână. [Răspuns studentul nu pot fi auzite] Corect >>. Exact. Accesibilitatea este un lucru. O mulțime de oameni nu se gândesc, "Ce-i cu utilizatorii mei?" ca extremele spectrului, fie de. Am utilizatorii care ar putea avea dizabilități că nu mă gândesc și mă gândesc doar despre proiectarea pentru utilizatorul general. Internetul este accesibil de către toată lumea în zilele noastre, și eu ar trebui să fie de proiectare pentru acei oameni, de asemenea. Ce tipuri de decizii de proiectare alte s-ar putea face? Da. >> [Elev] cost. Cost. Foarte bine. Un alt lucru pe care am putea întemeia deciziile noastre de design pe costuri sunt. Dacă suntem o afacere, pe care doriți să construiască ceva care nu ia cost mult pentru a produce dar poate vinde la un cost deosebit de ridicat sau poate iau ceva profit. 

Acestea sunt toate diferite tipuri de design, dar atunci când suntem construi ceva pe Internet sau atunci când suntem construi ceva care, probabil, nu costa atat de mult pentru a construi acum, cum ar fi aplicații de Internet - nu trebuie să arunce capitalul de mult în ea , în scopul de a face ceva care chiar funcționează - ceea ce suntem mai îngrijorat este experiența utilizatorului. Noi numim acest design centrat pe utilizator. În esență, ceea ce implică proiectarea de utilizare centrat pe voi înșivă este punerea în pantofi de utilizatori. Dacă cineva semne pentru ceea ce eu sunt construirea, au venit în mod evident la cererea mea special, cu un scop în minte, cu o sarcină care doriți să o finalizați. Și munca ta este nu numai de a le ajuta să completeze această sarcină dar pentru a le ajuta să completeze această sarcină într-o manieră care să fie eficientă, intuitiv, și, după cum a spus o persoană acolo, accesibil. Ce înseamnă eficiența înseamnă? Eficiență înseamnă cât de repede se ghidul meu complet sarcina dat interfața meu. Durează o mulțime de clicuri pentru ei pentru a obține de la un loc la altul? Este plictisitor? Nu ei trebuie să îndeplinească o mulțime de sarcini repetitive? Vrem să facem acest proces cât mai eficient posibil, astfel încât acestea nu trebuie să facă acele felul de lucruri. În ceea ce privește intuitivitatea, care este, de exemplu, dacă un utilizator se uită în sus interfata mea, este ușor pentru ei pentru a obține de la un loc la altul? Este mai ușor pentru ei să dau seama ce trebuie să faceți clic în interfața mea în scopul de a atinge obiectivul sau activitatea pe care doresc să realizeze? 

Și, în cele din urmă, așa cum o persoană a zis acolo, accesibilitatea este foarte important. [Vorbitor de sex masculin] Se ajunge la accesibilitatea pentru lucruri cum ar fi viziune, place cum am proiecta, de fapt ceva pentru cineva care este orb? Oh. Pentru cei care nu pot vedea deloc, avem ceva numit cititoarele de ecran. Ce trebuie să faceți este să vă ar trebui să construiască site-ul dvs. într-un mod faptul că, de exemplu, tehnologii speciale ce noi numim - Există o mulțime de lucruri acum. Cred că sunt cititori de ecran JAWS numite. O mulțime de aceste lucruri se bazeaza pe ceea ce noi numim normele zonei în scopul de a citi la ghidul de ceea ce este prezent pe pagina. Pentru acei oameni care nu pot vedea, va trebui să vă asigurați că aceste cititori de ecran poate ridica de fapt, conținutul de pe pagină și poate arăta de fapt, utilizatorii dvs., în cazul în care nu puteți vedea, cel puțin puteți înțelege încă conținutul de pe pagina. Da. Bine. Gata cu vorba despre design bun. Hai sa vorbim despre design rău. Acestea sunt lucruri pe care nu ar trebui să facă. Poate cineva sa-mi spui despre experiențele lor cu Craigslist și ceea ce ei cred că nu este atât de mare despre acest design? Da. >> [Elev] Cred că e prea multe cuvinte într-o zonă. Prea multe cuvinte, nu? Complet copleșitoare. Ai venit la această pagină și sunteți întâmpinați cu o grămadă de lucruri aici care ar putea să nu mai contează pentru tine. De exemplu, tu trăiești într-un stat care nu începe cu această literă. Să spunem că locuiți în Texas sau ceva de genul. 

Trebuie să defilați tot drumul în jos pentru a ajunge la pagina de locația vă aflați. Sunt din Boston, asa ca lasa-mă să mă uit în Massachusetts. În cazul în care este Massachusetts? Oh, e chiar aici. Oh, e din Boston. Bine. Să ne uităm la Boston. [Râsete] Destul de copleșitoare, nu? Lucruri incomode acolo. [Râsete] Să spunem că eu sunt în căutarea unui loc de a trăi. Câți oameni au fost utilizate efectiv Craigslist? Tone de tine. Există mai multe moduri destul de rele să se uite la acest lucru, dar să ne uităm la asta. Care este diferența dintre img pic și? Poate cineva sa-mi spui? Nu există de fapt nici o diferență. Ele înseamnă exact același lucru, dar au etichete diferite pentru ei pentru un motiv oarecare. Dacă aș click pe imagine Are, nu se întâmplă nimic pe pagina. Am fapt trebuie să faceți clic pe Căutare din nou să se întâmple ceva. Ceea ce ar putea fi o decizie de design mai bun, care ar putea fi făcut acolo? Dacă am faceți clic pe acel filtru, probabil că doriți să filtrați prin faptul că anumită acțiune sau faptul că anumite categorii. Deci, în loc de a trebui să apăsați Search din nou, aș putea doar să facă în mod automat de filtrare un fel de stil de Google pe care o fac instantaneu. [Malan] Dar nu face așa cum le-am văzut până acum trebuie să fie transmise fizic prin apăsarea Enter sau cel puțin un click pe un buton? Așa cum le-ai vazut pana acum, de fapt trebuie să faceți clic pe Submit pentru a face aceste lucruri. 

Dar, așa cum Tommy vă va arăta într-o secundă, sunt de fapt modalități pentru tine astfel încât atunci când faceți clic pe chestia aia poate trimite în mod automat ceea ce noi numim o cerere AJAX și obțineți date înapoi și filtra rezultatele instantaneu. Nu sunt de tone de lucruri care sunt în neregulă cu această interfață. [Malan] Poți căuta Cambridge? E ceva anormal ușor aici, unde vă pasă de Cambridge și totuși ești obtinerea Westford, Spring Hill, West Newton și cum ar fi. Probabil nu este ideal. Probabil că nu >> ideală. Cum aș putea fi capabil de a face experiența utilizatorului mai bine pe această pagină special? Da. >> [Elev] manual. Bine. Instrucțiuni în ce fel de sens? [Elev] De exemplu, un lucru pentru utilizatorii prima dată, care nu știu nici măcar ce este Craigslist sau nu stii ce ar trebui să fac. Corect. Deci, explicând ce Craigslist este de pe aceasta pagina este important. Putem spune de fapt, utilizatorii ce este de fapt această pagină pentru. Dacă am în vizită la asta, văd o grămadă de locuri. Eu nici măcar nu știu ce înseamnă. Dar, mai important, doar se uită la acest interfață, aduc aminte ca am avut pentru a defila în jos o grămadă de lucruri pentru a găsi o anumită comunitate că de fapt am pasa pe asta. Ce e un mod mai rapid am putea face asta? Da. [Elev] împărțiți-le în sus, în est, vest regiuni. Bine >>. Eu le-ar putea împărți în mai multe categorii, care ar putea ajuta la mine mai repede determinarea cum să ajungi la acea locație specială. [Elev] Pune o lista drop-down. Corect >>. Bine. Am putea folosi un meniu drop-down pentru ca avem un set fix de lucruri și le-am putea arăta într-un meniu drop-down. În acest fel nu se ocupă atât de mult spațiu pe ecran. Dar, chiar mai mult decât atât, ce putem face? Da. >> [Răspunsul elevului neauzit] >> Poți să spui asta din nou? >> [Elev] caseta de căutare. Da, o casetă de căutare. Asta-i grozav. Ce putem face este de fapt, dacă ne uităm înapoi la caseta de căutare diapozitive,. Completarea automată. Mod foarte simplu de a căuta prin rezultatele pe care le cunoașteți sunt într-un set. Dacă aș începe să tastați BO, doar arata-mi toate rezultatele care au in interiorul lor BO. Că modul în care am putea foarte ușor afla unul special, vreau să merg la în loc de a avea pentru a defila prin această listă foarte mare. 

Acestea sunt tot felul de foarte joasă agățat de fructe ca cineva care este de punere în aplicare Craigslist poate face de fapt, pentru a face experiența pe site-ul mult mai bine pentru utilizatorul lor special. Bine. Destul vorbim despre site-uri proaste. Să vorbim despre Facebook. Cand Facebook a ieșit, și în special fotografii pe Facebook, au existat o mulțime de alte servicii, la timpul pe care ar putea face exact aceleași lucruri. Ele ar putea organiza fotografiile în albume. Ce ai putea face este ca le-ar putea organiza în seturi, de asemenea. Ai putea să le organizați cu data. Ai putea face toate aceste lucruri particulare. Dar nimeni nu știe ce a făcut fotografii pe Facebook exploda în momentul în care a fost eliberat? Da. >> [Studențești] Tags. Tag-uri >>. Exact. Avem aici Milo, care este mascota noastră caine cu bandană CS50. Puteți vedea că avem această caracteristică tagging în mijloc. Și ceea ce a făcut fotografiile pe Facebook atât de interesant din punct de vedere uzabilitate este că, de fapt a permis oamenilor prin aceasta să implice prietenii lor în fotografiile lor. Pentru Facebook, deoarece site-ul lor este deosebit de sociale, este vorba despre construirea acestui tip de atmosferă socială. Că a îmbunătățit experiența de fotografii mult mai mult deoarece acestea ar putea începe de fapt spune, "Acestea sunt conexiuni între oameni, și acestea sunt fotografii despre persoanele dragi de fapt, despre. " O parte din ea este, de asemenea, un fel narcisism. Oamenilor le place să fie etichetat în fotografii și lucruri de genul asta. În timp ce faptul că nu este neapărat o trăsătură umană bună, în același timp, este bazat pe decizii de proiectare bune pentru că oamenii de fapt pasă de astfel de lucruri. Așa că e fotografii pe Facebook. 

Dar hai sa vorbim pe Facebook, în general, mai mult. Sunt sigur că o mulțime de oameni de aici au opinii despre Facebook, ambele decizii bune de proiectare și de proiectare decizii proaste. Deci, hai sa ventileze sau să fie fericit. Haide. Știu că toți folosesc Facebook. Cineva trebuie să aibă ceva rău de spus sau ceva bun de spus despre asta. Da. [Elev] În news feed există o mulțime de lucruri pe care nu le pasa cu adevarat despre. News Feed nu arată o mulțime de lucruri pe care nu s-ar putea pasa. Ai prieteni pe Facebook, care nu v-ați întâlnit timp de 2 sau 3 ani și veți vedea rezultatele lor de știri popping sus în hrana știri și nu-mi pasă cu adevărat despre el. Facebook a facut, de fapt un efort de a face acest lucru mai bine, si de fapt, le-am încercat să împingă rezultate relevante pentru partea de sus a fluxului de știri de la sfârșitul anului astfel încât veți vedea de fapt, lucrurile de prietenii care sunt relevante pentru tine sau prietenii tai apropiati. Altceva? Da. [Răspuns studentul nu pot fi auzite] >> Poți să spui asta din nou? [Elev] Anunțurile sunt relativ discret. >> În ce sens? [Răspuns studentul nu pot fi auzite] Ei nu au lumina de pe ecran, cum ar fi banner. Bine. Asta e bine. Dacă vă amintiți de Internet din anii '90 - >> [Malan] Am fost acolo. El a fost acolo >>. [Râsete] S-ar putea aminti medii intermitente, GIF-uri stralucitoare lucruri, GeoCities fel de stil de lucruri. Asta nu e chiar un exemplu de bun design pentru că este într-adevăr distrage atenția de la conținut. Arta Yale site-ul utilizat pentru a avea GIF-uri animate ca fundal lor și nu putea citi nimic pe pagina, dar cred că cineva de fapt, a vorbit cu ei și acum e un pic diferit. [Malan] E mult mai bine acum. >> E mult mai bine acum, după cum puteți vedea. >> [Malan] Oh, da. Doar o mare, doar - Da. Bine. 

O parte din ea este, de asemenea, face pagina, eventual, foarte minimalist și foarte ușor de înțeles deci lucrurile pe fluxul de pagină într-un mod care este foarte logică și nu primesc în mod reciproc. Felul de alte lucruri ce sunt bune sau rele despre Facebook despre Facebook? Hai să aibă doar o conversație de design aici. Oh. În cazul în care? Da. [Elev] Sistemul Cronologie noi vă permite să căutați profilul persoanei despre trecutul lor. Ooh, Timeline. Cronologie este un lucru mare, pentru că vă permite să tulpină prietenii tăi înapoi, atunci când erau în liceu. Cronologie este bun, deoarece vă permite să filtrați prin continutul mult mai repede, aceasta vă permite să găsiți lucruri care altfel ar fi luat un timp foarte lung pentru a găsi doar derulând în sus și în jos, sus, sus, sus, sus, sus, la fel ca merge înapoi în timp. Dar, apoi, există, de asemenea, un fel de dezavantaj pentru că, în ceea ce privește experiența utilizatorului. Ce ar putea fi asta? Cuvânt mare care începe cu P-R. >> [Elev] confidentialitate. >> De confidențialitate, nu? Intimitatea este o mare experiență de utilizare problemă. Acesta este unul dintre lucrurile pe care le-am urăsc cel mai despre Facebook acum. [Râsete] [Malan] cum fac eu acum. David nu a realiza acest lucru sa întâmplat de fapt pana ieri. Deci, acum el știe că de fiecare dată când l-am discuție știu că a fost mă ignoră. [Malan] partea ciudată a fost am fost de fapt el ignorând, și nu am știut că știa că-l ignoră. [Râsete] Intimitatea este o problemă uriașă. Poate cineva de aici spune-mi ce s-ar putea să fie rău despre Facebook de confidențialitate în afară de faptul că fac lucruri de genul asta? Ce este deosebit de greu de a face cu privire la viața privată Facebook? Acest tip de lider este o întrebare. Da. >> [Elev] Ascunde-vă fotografiile de la anumite persoane. Corect. Exact, pentru a ascunde fotografiile de la anumite persoane. Ei au acest buton mic, mic, în dreapta sus care vă permite să comutați intimitatea unei fotografii. Opțiunile de confidențialitate ale acestora sunt foarte variate între diferite tipuri de meniuri. 

Ei au devenit mult mai bună despre el recent, dar este folosit pentru a fi cazul că ori de câte ori ai vrut pentru a preveni prietenii tăi din fotografii văd, va trebui să treacă printr-un foarte complicat 5-pas procesul de a fi ca, lasă-mă să faceți clic pe acest link, acum să-mi faceți clic din nou, permiteți-mi să faceți clic din nou, permiteți-mi să specificați pe care oamenii nu pot vedea fotografiile mele. Asta nu este deosebit de bun din partea Facebook pentru că atât de mult despre experiența de utilizare este, de fapt, oferindu-le libertatea pentru a controla ceea ce oamenii pot vedea. Noi numim acest control utilizator și libertate. Dacă nu sunteți permitandu-le utilizatorilor dvs. de a face asta într-un mod care este eficient și intuitiv, apoi experiența dvs. de utilizator nu este chiar atat de mare, la toate.  Ar voi dori să spun ceva despre Facebook? Cum pot transforma asta? [Ong] Nu puteți transforma acest off, și că este un defect utilizare imens pe partea de Facebook. Această caracteristică - de fapt am uitat în ea ieri - este fie că nu poți face sau e îngropat undeva foarte, foarte profund în adâncul Facebook pentru că eu nu pot da seama cum de a dezactiva această opțiune, la toate. [Malan] Dar, uneori, aceste decizii nu sunt evidente deoarece voi ne-au dat o mulțime de feedback util cu privire la diferite aplicații CS50 și site-uri care utilizează cursul. Nu am pus în aplicare toate aceste solicitări și sugestii. 

O parte din faptul că este pentru a obține atât de multe cereri ca este o funcție de timp, dar, uneori, facem doar o decizie conștientă ca, "Va multumesc pentru sugestie, dar nu suntem de acord." Deci, cum a face tu de fapt, decideți ce trebuie să faceți în cazul în care utilizatorii dvs. că ar trebui să faci ceva chiar dacă nu neapărat? E un echilibru fin între a asculta de fapt, ceea ce utilizatorii dvs. spun și având de fapt, un fel de linie pe care ai spus, "Noi nu vom face ceea ce spun acești utilizatori." Și, în special, cred că a fost un citat din Henry Ford, care rezumă asta destul de bine. "Dacă aș fi întrebat oamenii ce au vrut, ar fi spus că vrea cai mai rapide." Poate cineva să sortați a tachineze pe langa ceea ce înseamnă cu adevărat acest citat? Nu e doar faptul că utilizatorii știu ce vor, dar e mai mult de - [Elev] Ei nu stiu ceea ce este posibil. În parte ei nu știu ce este posibil. Șicana că, pe lângă un pic mai mult. Ce vrei să spui cu asta? [Răspuns studentul neauzit] Asta e bine. Ceea ce cred eu incercam sa spun aici este că oamenii știu ce vor. Ei vor cai mai rapide. Ceea ce ei doresc cu adevărat este abilitatea de a se misca mai repede, dar ei nu știu cu adevărat mediu prin care să realizeze acest lucru. Când vin la utilizatorii dvs. și utilizatorii dvs. să vă spun ceva și ei vă spun, "Vrem ca aceste caracteristici și aceste caracteristici și aceste caracteristici," nu vreau sa ma gandesc neaparat despre, "Lasă-mă să merg mai departe "Și punerea în aplicare ceea ce spun în mod explicit," dar ce vrei să ne gândim este, "Ce fel de idei pot obține de la asta?" Ce vor de fapt? 

Și de acolo ce se poate face este proiecta ceva care satisface aceste cereri dar nu neapărat în modul în care utilizatorul se așteaptă ca aceasta să fie îndeplinite. Deci, pentru ceva de genul proiecte finale, în termeni foarte reale, ceea ce e un euristic util atunci când vine vorba de a face ceva mai bun, mai ales dacă proiectantul are această aroganță despre el , prin care un fel de Știi ce e cel mai bine, s-ar putea lua de intrare de la utilizatori, dar cum te duci de fapt, despre obtinerea feedback-ul asta? În proiectele finale, foarte concret, ceea ce produce rezultate optime aici? Ce produce rezultate optime - și voi trece peste aceasta într-o secundă - este acest proces de dezvoltare și apoi de testare și apoi iterarea. Ce vreau să spun prin testare este, de obicei, atunci când proiectați ceva Crezi că e destul de bun, cum ar fi, "Sunt un astfel de designer de mare. Toată lumea este de gând să iubesc acest lucru." Și apoi l-ai pus acolo si oamenii nu prea-l place pentru un motiv oarecare. Ceea ce trebuie să faceți este să vă trebui să ia părți din lucrurile pe care le fac oamenii ca și restructura lucrurile pe care oamenii nu le place. Se pare ca un proces foarte evident, dar acest proces de continuă iterarea pe partea de sus a ceea ce ați construit deja este un proces care vă ajută să nu numai rafina abilitățile dumneavoastră proprii de proiectare, dar, de asemenea, vă ajută să vă îmbunătățiți de proiectare astfel ca oamenii apreciaza de fapt produsul dvs., chiar mai mult decât au făcut-o înainte. 

Voi trece peste mai multe exemple concrete de ceea ce s-ar putea face de fapt. Ca un fel de ultim exemplu al unui produs, să ne uităm la caiac. KAYAK atunci când a ieșit a fost foarte, foarte popular. Poate cineva ghici de ce? Care sunt felul de lucruri care iti plac despre acest lucru, dacă l-ați folosit sau care sunt felul de lucruri care nu vă plac? Da. >> [Elevului răspunsul neauzit] >> Ok. Asta e parte din el se lasa utilizator, au o interogare, care este mult mai expansiv decat una foarte restrictive, de tipul, "Trebuie să alegeți data de începere "Și va trebui să alegeți data de terminare." De fapt, aceasta vă permite să fie flexibil cu privire la aceasta și vă oferă toate zborurile din acel interval. Altceva? [Elev] Acestea includ taxele în prețul. Acestea nu includ taxele în prețul. Impozitele și lucrurile merg de fapt, direct în acest preț, în stânga sus deci nu te păcălit de gândire în care sunteți de fapt, plata pentru un zbor de 240 dolari atunci când este într-adevăr $ 330. Altceva? Da. [Răspuns studentul neauzit] Nu sunt sigur dacă au lăsat de fapt să faci asta. S-ar putea fi greșit. Asta ar putea fi un lucru interesant, dacă vrei să pui în greutate mai mult pe filtre speciale astfel încât acestea să împingă rezultatele referitoare la faptul că filtrul de la început. Dar poate cineva sa-mi spui ce este atât de special despre acest stanga? Cum te-ai uitat în mod tradițional un zbor pe un serviciu de Internet înainte de asta? 

Da. >> [Elevului răspunsul neauzit] >> Poți să spui că - [Elev] Fiecare companie aeriană. Da >>. Fiecare companie aeriană are site-ul propriu. Acest lucru consolidează lucruri. Și? [Elev] Știi exact la ce oră pleci. Știi exact la ce oră pleci, dar legate de filtrele în special. Lasă-mă să trageți în sus caiac. O, Doamne, pop-up-uri. Experiența utilizatorului Bad. Ce se întâmplă când mutați cursorul asta? [] Studențești actualizări automate. >> [Ong] actualizări automate. Asta e ceva ce e foarte important. Înainte de aceasta, ori de câte ori ai vrut să te uiți în sus un zbor, ai avut de a pune în locația dvs. de intrare, locația dvs. de ieșire, apăsați pe Căutare, s-ar procesa si arata ca rezultatele. Dacă ați fi dorit să schimbați interogare, va trebui să apăsați de două ori înapoi, introduceți într-o interogare nouă de la zero, iar apoi o fac de peste si peste din nou. Cel mai frumos lucru despre ceva de genul asta este ca foloseste un foarte [neinteligibil] lucru în mijloc. Ori de câte ori faci ceva de genul asta, se impusca pe o cerere și returnează toate rezultatele imediat. Acest tip de feedback-ul imediat este ceva care a făcut extrem de popular KAYAK pentru că este foarte ușor pentru mine să se schimbe doar interogarea mea și să dau seama de lucrurile care sunt în jurul valorii de un anumit interval fără a fi nevoie pentru a merge inainte si inapoi, inainte si inapoi, inainte si inapoi. Deci, acestea sunt tot felul de lucruri pe care doriți să se gândească atunci când sunteți proiectarea site-ul dvs.. Cum pot face foarte eficient pentru utilizatorii mei să treacă prin tot ceea ce lucrați și pentru a ajunge la scopul lor final cât mai repede posibil? [Malan] Si la punctul lui Iosif mai devreme despre utilizatori nu neapărat să știe ceea ce doresc, bazează pe ceea ce voi stiu acum despre HTML și aveți casetele, butoane radio, meniuri selectați, câmpuri de intrare și similare, cum ați pune în aplicare ideea de a alege un timp de pornire pentru un zbor? 

Care dintre aceste mecanisme diferite UI ai folosi? Dacă știți doar cantitatea de HTML care a fost învățat înainte de și știți intrarile sunt butoanele radio, casetele de validare, drop-coborâșuri, și caseta de intrare, ce s-ar aleasã naturală au fost pentru cules datele? [Elev] de intrare. >> De intrare. Sau poate chiar un drop-down, cu toate datele, nu? Deci, cu mecanisme mai complexe, cum ar fi acest UI de pe partea stanga pe care le puteți pune în aplicare, puteți face acest proces mult mai intuitiv, cu un cursor pentru că timpul este continuu, iar oamenii, de obicei, nu cred că de ea în termeni de bucăți discrete. Bine. Ultima lucru. Zece uzabilitate euristice. Toate lucrurile despre care am vorbit, probabil, se încadrează în una dintre aceste categorii. Dacă te duci la acest link, site-urile care vor fi postate on-line, vei fi de fapt posibilitatea de a, în timp ce proiectați site-ul dvs., păstrați în minte aceste euristici și aceste reguli de degetul mare. Pentru proiectele tale, ceea ce îți sugerez să faci pentru a proiecta mai bine aplicația este de a face prototipuri de hârtie prima. Când te gândești despre cererea dumneavoastră, foarte repede schița ceea ce vrei tu să arate ca și asigurați-vă că toate casetele sunt aranjate într-un mod care este foarte intuitiv pentru utilizator de a utiliza și arată chiar aceste prototipuri de hârtie pentru a-ți prietenii și începe focus-grupuri. Obține doar 2 sau 3 persoane împreună și să le cereți să apăsați doar pe aceste prototipuri de hârtie, și arată-le ecrane noi pentru a vedea dacă au înțeles de fapt ceea ce se întâmplă. 

Ce vrei să faci este să le dea o sarcină, de a motiva această sarcină, și dă-le doar aplicația și lăsați-le-l folosească. Nu le da instrucțiuni dincolo de asta. Doriți să lăsați de fapt, să interacționeze cu aplicația dvs. într-un mod care vă permite să vedeți cum s-ar folosi, dacă nu au fost în picioare lângă ele. Și asta e foarte important. Asta va va da o mulțime de perspective cu privire la obtinerea sunt oameni în jurul valorii de anumite lucruri într-un mod care nu le-am intenția de a? Sunt folosind mecanisme specifice UI pe ecran într-un mod care este un fel de hacky? Nu am intenția să facă pentru ei în felul acesta. Și odată ce ai terminat cu asta, ce vrei să faci? Roci dvs. de design, nu? Ce vrei să faci este să dezvolte pe care doriți și de a face apoi că procesul de peste tot din nou. Deci, arată-o prietenilor odată ce l-ați dezvoltat, testați-l, dezvolta, testa, a dezvolta, testa, itera, pe și de pe și mai departe. Design-ul este un proces iterativ foarte în acest sens. De fapt trebuie să construiască ceva și apoi realiza lucruri despre ea pe care nu le-am dat seama înainte și du-te înapoi și de a îmbunătăți de la asta. Acum, ca și pentru partea de dezvoltare, asta e ceea ce Tommy este de gând să-ți arăt, după pauză și modul în care ar putea fi în măsură să pună în aplicare ceva de genul completarea automată într-un mod care este destul de simplu. [Malan] Ca Tommy stabilește aici, o întrebare atunci. O mulțime de site-uri mai vechi - și când Iosif a spus site-ul anilor 1990 în stil, în cazul în care a fost implementari, dacă ai vrut să selectați un timp de pornire și un timp de final, sincer, înapoi în zi și chiar pe unele site-uri de astăzi, modul în care face acest lucru este să alegeți o oră de la un drop-down, alegeți minute de la un drop-down, poate să alegeți AM, PM, și apoi puteți realiza acest lucru de 3 ori mai mult. Și astfel, cu 6 clicuri și poate unele de defilare dvs. de utilizator poate oferi de fapt, un fel de dată și / sau intervalul de timp în acest sens. 

Deci, cu siguranta suboptimal și totuși până acum am văzut nici capacitățile expresive în oricare dintre limbile pe care le-am uitat la a face ceva mai sexy ca acest indicator de ora de începere și ora de terminare. Dar, dacă credeți înapoi la săptămâna 0 atunci când am vorbit despre Scratch, acolo nu erau widget-uri care au făcut doar anumite lucruri. Chiar avut doar aceste fundamente, cum ar fi bucle precum și condițiile și similare. Deci, un fel de doar gândire foarte abstract acum, independent de datele de HTML, ceea ce se întâmplă cu adevărat cu ceva de genul asta timp de început și ora de sfârșit indicatorul? Când m-am muta mouse-ul meu și am faceți clic pe simbolul pe care morcov pic pe partea stângă și începeți să trageți, programatic, ceea ce este pe care doriți să fie în măsură să pună în aplicare pentru a face să se întâmple asta? Ce întrebări, ce expresii booleene vrei să fie în măsură să întrebi? Ce se întâmplă de fapt? Sammy? [Elev] Unde e poziția cursorului? Bine >>. În cazul în care este poziția cursorului? Acest lucru a fost ceva ce am nevoie să-și exprime din nou în Scratch, dacă a fost bazat pe locatie sau chiar de culoare sau similar. S-ar putea aminti vreodată atât de scurt, luni, au existat toate aceste lucruri numite evenimente în lumea de web, și deci nu e lucruri, cum ar fi onclick și onkeypress și onkeyup și onmouseover și onmouseout. Deci dau seama că chiar și aceste lucruri le-am luat pentru a acordat pe Web cu site-uri ca Facebook si Gmail, chiar dacă nu au nici o idee cum v-ar pune în aplicare, eventual, asta pentru ca nu e nimic chiar ca-l în curs Problema sau Set 7, realizăm că aceste fundamente cu exact aceleași, cu HTTP și parametrii și GET si POST, cu intrări de bază HTML pe care le-am uitat la până acum și într-un moment cu mecanismele programatice care Tommy cale de a introduce puteți începe să te exprimi așa cum ai făcut-o în săptămâna 0 de foarte intuitiv glisare și fixare. 

Deci, cu care a spus, Tommy MacWilliam și unele piese de puzzle noi pentru noi pentru Web. Bine. Numele meu este Tommy și am de gând să fie vorba despre JavaScript. Doar un avertisment: Eu sunt de părere că JavaScript este limbajul cel mai bun de programare în întreaga lume intreaga. Există o mulțime de oameni care nu sunt de acord cu mine, dar e pur și simplu uimitor. Odată ce te duci înapoi la C, în cazul în care va trebui să scrie C pentru o altă clasă sau a unor alte limbi, e doar foarte frustrant în toate detaliile de nivel scăzut pe care trebuie să se împotmolească inch Deci, dacă te simți vreodată trist despre cum este C enervant de a scrie, doar du-te inapoi, scrie unele JavaScript. E nirvana. Te vei simti mult mai bine cu privire la o zi proasta. O mulțime de magia JavaScript vine de la capacitatea sa de a manipula lucruri care sunt deja pe pagina. Când am scris scenarii noastre PHP, acestea au fost executate pe server, și în cele din urmă că script PHP transmite, probabil, unele HTML. Această HTML a fost trimis la client, apoi asta a fost. Dacă PHP vrut să adăugați un buton la o pagină, de exemplu, nu se poate face într-adevăr acest lucru. Aceasta ar trebui să facă un fișier nou HTML și trimit la browser-ul. Cu JavaScript știm că putem actualiza lucruri în timp ce acestea sunt deja pe pagina, si din aceasta cauza putem oferi feedback-ul mult mai mult instantaneu, care va îmbunătăți cu adevărat experiența de utilizare pe site-ul nostru. Doar o recapitulare rapidă a selectoare JavaScript. Știm că atunci când am descărca o pagină HTML, care va fi reprezentat în DOM. 

DOM amintesc este doar acest copac mare în cazul în care elementele sunt legate în această ierarhie de mare. Când am lucrat cu baze de date în PSET 7, unul din primele lucruri pe care le necesare pentru a ști cum să facă a fost interoga baza de date. Avem această mare masă de utilizatori, și, uneori, vrem doar să spun, "Vreau doar o parte din acești utilizatori care se potrivesc cu anumite conditii." În mod similar, atunci când avem DOM avem nevoie de un mod de a-l interogare. Avem nevoie de un fel de a spune, "Vreau toate butoanele care arata ca acest "Sau toate imaginile de pe pagina." Și aceste selectoare ne permit să facem asta. Deci, doar o recapitulare rapidă. Aceasta primul aici, aceasta prezintă #, ceea ce este faptul că de gând să selectați? Are cineva aminte? [Răspuns studentul nu pot fi auzite] >> Da, exact. Acest lucru se întâmplă pentru a selecta un element de pe pagina care are un ID de prezenta. Si pentru ca tag-ul hash spune ca acest selector este de gând să lucreze cu acte de identitate. Ce zici de o secundă, acest centrat,. Ce se va selecta asta? Da. >> [Elev] Clasa. Exact >>. Acest lucru se întâmplă acum pentru a selecta de clasa. Diferența dintre ID-ul și clasa de aici este, în general, ID-ul trebuie să fie unic în orice spațiu pe care o căutați peste. Deci, dacă ați fost căutați peste o intreaga pagina web, într-adevăr ar trebui să aibă doar 1 element cu acel ID de anumite, în acest caz de prezenta. Cu clase, pe de altă parte, putem avea mai mult de 1 element de pe aceeași pagină cu aceeași clasă. Acest lucru ar putea fi util pentru că vreau să selectați tot ce centrat pe pagină , mai degrabă decât doar 1 lucru. 

Și, în cele din urmă, aceasta ultima aici este un pic mai complicat, dar ce se întâmplă acest pentru a selecta din DOM? [Răspuns studentul nu pot fi auzite] >> Ce e asta? [Elev] Orice lucru care este un tag. Avem >> 2 părți aici. Partea a doua este de gând să spun că am dori să selectați aceste tag-uri, cu o etichetă de intrare, astfel încât orice element care este o etichetă de intrare. Dar eu nu vreau să selectați doar toate intrările pentru ca ceva ca un buton submit ar putea fi o intrare și ceva ca o casetă text ar putea fi un factor. Deci, cu aceste paranteze drepte spun Vreau doar să selecteze acele elemente care sunt de tip text. Undeva în tag-ul HTML mea am un atribut numit de tip, și valoarea de atribut care trebuie să fie de text. Deci, ce zici de asta prima parte aici? Primul cuvânt al acestui selector este forma, atunci am avea un spațiu și apoi această parte de intrare. Ce face asta, punerea forma în fața lui? Acest lucru se întâmplă pentru a limita practic interogarea noastră. Acesta ar putea fi cazul în care avem câteva intrări pe pagina care nu sunt descendenți ai unui formular. Ceea ce va face este acest lucru va spune Vreau doar etichetele de intrare, care au undeva deasupra lor un element-mamă a unui formular. Și în acest fel putem face aceste interogări mai ierarhice deci nu avem doar pentru a selecta tot ce se potrivesc unui selector dat. Putem fel de limită domeniul de aplicare al interogării la altceva. Deci, acum că știm cum să selectați elemente de pe pagina, hai sa vorbim un pic despre AJAX. AJAX este un acronim încă foarte la modă, care vine de la Asynchronous JavaScript și XML. Pur și simplu așa se întâmplă că XML este doar o modalitate de a reprezenta datele. 

Acest tip de popularitate pierdut recent, astfel încât X în AJAX nu este folosit tot timpul. Practic, ceea ce ne permite AJAX pentru a face este de a face cereri HTTP din contextul JavaScript. Atunci când suntem în browser-ul nostru si noi te navigarea în jurul valorii de pagini și am faceți clic pe un link, ceea ce browser-ul nostru este de gând să faceți este să facă o cerere HTTP pentru orice legătură facem clic. Dar asta nu e întotdeauna ideale, deoarece în cazul în care este cazul, atunci cum spunea David, întotdeauna trebuie să facă utilizatorii clic pe un buton depună sau să faceți clic pe un link , în scopul de a face să se întâmple nimic, care va implica o cerere HTTP. Deci, cu AJAX, putem face aceste solicitări, în numele JavaScript. Asta înseamnă că ori de câte ori utilizatorul interacționează cu pagina sau se întâmplă ceva, putem face de fapt o cerere programatic la unele fișier PHP altele, site-ul nostru sau orice altceva și a regăsi datele pe care acel fișier scuipa. Să aruncăm o privire la un exemplu de AJAX. Aceasta este pagina noastră de Finante CS50, cu care sperăm că unii dintre noi sunt familiari. Dacă ne uităm la codul HTML al paginii, vom vedea aici că am adăugat câteva lucruri, dintre care unul mi-am dat acest formular un act de identitate. Am spus id = "forma-citat". Am făcut acest lucru doar pentru că este de gând să facă acest bit un pic mai ușor pentru a selecta din DOM din moment ce pot face doar o interogare foarte simplu. Ceea ce vreau să fac aici este că vreau să stabilească unele probleme cu CS50 Finanțe. Deci, dacă mergem la finance.cs50.net, de fiecare dată când doriți să obțineți un citat, trebuie să faceți clic pe acest buton Citat obține, Înscrieți-vă și că butonul cotatia apoi ma duce la o altă pagină întreagă. Și dacă vreau un alt citat, trebuie să apăsați pe butonul Înapoi și apoi l-am tastați în, I a lua un citat, și m-am lovit butonul Înapoi. Acest lucru chiar nu este cea mai bună experiență de utilizator. Cine s-ar folosi într-adevăr site-ul în cazul în care e lent pentru a obține prețurile de stoc? Deci, ceea ce vrem să facem cu AJAX este faptul că eliminarea pas de a merge la o pagină separată pentru a vizualiza rezultatele. 

Ceea ce ne cer într-adevăr numai pentru că prețul este foarte mic, și că e doar o cantitate foarte mică de date. Deci, nu e nevoie de mine să merg altă pagină întreagă HTML, descărca un lot cu totul nou de HTML, descarca imagini poate ceva mai mult, alte fișiere CSS doar pentru mine să răspund la această întrebare foarte simplă de cât de mult costă acest stoc. Cu AJAX, putem face acest lucru mult mai ușor o. Vedem aici că mă leagă într-un fișier numit quote.js JavaScript. Să deschidem de fapt, până acel fișier. Nu acolo. Toate fișierele mele JavaScript vor fi amplasate în HTML astfel încât browser-ul web poate fi accesat. Apoi, avem un director separat aici pentru JavaScript, iar acum aici este quote.js. În partea de sus a acestui fișier aceasta spune aici că vreau să aștept pentru întreaga pagină să fie încărcate înainte de a încerca să mă fac nimic. De ce este necesar? Se pare că următorul lucru pe care am de gând să fac aici este de a începe căutarea unui element care se potrivește cu unele selectorul. Dacă această JavaScript este executat vreodată înainte de acest element este încărcată pe pagină, atunci tot ceea ce încerc să fac, nu este de gând să lucreze pentru că am de gând să încercați să selectați ceva care nu este încă acolo. Deci, această linie până sus spune că vreau să aștepți până când totul este încărcat deci suntem garantat că toate elementele care le caut sunt de fapt pe pagina. Acest semn dolar aici, înseamnă că sunt, folosind biblioteca jQuery numit. Această bibliotecă jQuery ne permite să folosească aceste selectoare pe care tocmai l-am uitat la. Prin a spune $, apoi trece într-un argument ca acest formular #-citat, Sunt selectarea acum că forma pe care am luat doar o privire la. Acum am o reprezentare de care se formeaza in memoria cumva. 

Pe acest obiect acum, această reprezentare a formularului, Sunt folosind acum o funcție numită pe. Ce face această funcție este că va atașa o tratare a evenimentului. Cazul în care vom asculta este evenimentul submit. Deci, atunci când utilizatorul face clic pe butonul Submit care sau prese Enter, acest eveniment este de gând să tragă. Prin prindere în acest, eu pot trece peste acum comportamentul implicit al formularului. Fără această JavaScript, formularul va prezenta la orice fișier PHP am folosit în acest atribut acțiune. Dar, în loc, eu spun acum, așteaptă, așteaptă, așteaptă, nu vreau să faci asta, de fapt. Vreau ca acest lucru să se întâmple înainte de a merge și să încerce să prezinte un fisier PHP. Acum, ceea ce vreau să fac? În acest moment vreau să folosesc AJAX cumva pentru a încărca în ceea ce prețul de stoc este. Primul lucru pe care am nevoie să știu este ceea ce stocul de utilizator este în căutarea în sus. Pentru a face că am de gând să folosiți un alt selector. Aceasta este selectorul treia ne-am uitat la fața. Aceasta spune că vreau să încep acest element formular cu un ID de forma-citat. Apoi, undeva în interiorul acestui formular trebuie să existe un element de intrare care are un nume de simbol. Dacă ne uităm înapoi la HTML noastră, am văzut că am avut o intrare [nume = simbolul]. Asta înseamnă că acest lucru se întâmplă pentru a selecta caseta de text care utilizatorul este tastarea in. Asta e frumos. Avem caseta de text. Acum, avem nevoie doar să știu ce e în interiorul acestuia. Pentru a face acest lucru putem apela această metodă aici, acest val., și acest lucru spune că știu ce caseta de text aveti. Vreau să-mi spui ce este tastat de utilizator în această casetă de text. Acum avem un șir numit simbol, care este egală cu oricare utilizator tastat inch Asta e frumos. Putem folosi ca șir acum pentru a face cererea noastră. Aceasta este o funcție nou aici, acest $, cu excepția nu mai suntem de gând să fie selectarea elementelor, vom fi de asteptare o funcție diferită care este oferit pentru a ne jQuery. Această funcție AJAX este ceea ce se întâmplă de fapt să facă această solicitare HTTP. Așa că trebuie să spun că câteva lucruri. Primul lucru pe care trebuie să-i spun aceasta functie este locul unde vreau să merg cererea. Undeva în proiectul meu am acest fișier în interiorul directorul numit HTML quote.php. Eu pot accesa acest fișier, am văzut, la fel ca asta, dacă mă duc la localhost / quote.php. 

Vreau JavaScript mea de a face o cerere în acest pagină. Ce tip de cerere acum? Am văzut că înainte de a forma are ca metodă = "post" atribut, și asta înseamnă că va face o cerere POST, așa că nu se va pune nimic în URL-ul, mai degrabă decât o cerere GET, care ar fi concediat doar dacă am accesat doar pagina cu browser-ul web, de exemplu. Acum, ne-am spus că vreau să fac o cerere HTTP POST la o pagină situat la quote.php. Când ne-am trimite formularul, am putea aminti accesa elementele de intrare în interiorul acelei forme cu faptul că variabila $ _POST. Până în prezent, în povestea nu am de fapt, de-a lungul a trimis niciun fel de date încă. Am spus doar că facem o cerere AJAX și aici e tipul cererii facem. Acum, avem nevoie pentru a trimite, de fapt unele date la pagina. Pentru a face pe care le puteți folosi această proprietate numita de date. Valoarea acestei proprietăți este de fapt un tablou asociativ. Motivul pentru aceasta este că ne permite să trimiteți mai mult decât doar 1 bucată de date. De aceea avem aceste acolade aici imbricată în interiorul acestor acolade alte buclat. Cheile în aceste tablouri asociative vor fi același lucru ca și cele în nume atribuie elemente de formular noastre. Asta înseamnă că, dacă am trimite o cheie de-a lungul de simbol, înseamnă că pagina mea PHP pot accesa aceste date cu $ _POST [simbol] la fel cum am făcut-o atunci când am fost înainte de a depune un formular. Și acum datele efective dorim să trimită va fi în interiorul valoarea acestui tablou asociativ. 

Am păstrat acest text într-un simbol variabilă numită, și astfel vom trimite de-a lungul acum o cheie de simbol și o valoare de orice utilizator tastat inch Acum am făcut această cerere HTTP, PHP fișierul nostru a executat, și-l va trimite unele date înapoi acum pentru a clientului care a făcut doar această cerere. Acum, avem nevoie pentru a răspunde la orice serverul a spus la noi. Pentru a face acest lucru avem această proprietate ultimul aici, numit de succes. Valoarea acestui cheia succesului este, de fapt va fi o funcție, și acesta este unul dintre lucrurile cu adevarat interesante pe care le puteți face cu JavaScript. Nu numai că puteți avea Ints sau rețele ca o valoare în interiorul unui tablou asociativ, putem avea, de asemenea, o funcție. Deci, prin spunând succes, aceasta este cheia mea. Un colon spune aici vine valoarea, iar acum valoarea aceasta este de fapt o funcție. Așa că nu trebuie să dea această funcție un nume în sine. Noi putem spune doar acest lucru este mergi la a fi o funcție. O să iau un argument. Argumentul acestei functii va fi indiferent de serverul ne-a trimis înapoi de la solicitare. La fel ca atunci când browser-ul nostru face o cerere, serverul trimite ceva înapoi și browser-ul afișează, în contextul AJAX am făcut doar o cerere, serverul a trimis ceva înapoi, si acum ca ne-am reprezentat ca un șir. Cu acel sir aș dori doar pentru a afișa ca pe pagina. Pentru a face că am de gând să aibă un singur selector ultima. Vreau să selectați elementul cu prețul ID-ul. Acesta este doar un div gol pe care l-am creat pe pagina, și vreau să stabilească conținutul care div pentru a fi indiferent serverul ne-a trimis înapoi. Am de fapt, modificat quote.php un pic. 

, Mai degrabă decât de asteptare de randare și de a face unele pagini, quote.php acum este pur și simplu de gând să imprima valoarea stocului ca un șir de caractere. Deci, dacă ar fi să vizitați pagina de fapt, te-ar vedea doar că șirul mic indiferent de pretul actiunilor este. Un ultim lucru trebuie să facem aici este asigurați-vă doar această funcție returnează false. Ce spune aceasta este că, dacă eu sunt în interiorul unui tratare a evenimentului și că, de tratare a evenimentului returneaza false în loc de a se întoarce adevărat, asta înseamnă că nu vreau evenimentului original la foc. În acest caz, dacă nu am avea nici JavaScript și am depus un formular, Browser-ul nostru web este de gând să spun, "am de gând să trimită aceste date de-a lungul," și ei de gând să te trimit la altă pagină. Pentru că suntem folosind AJAX acum, nu este nevoie pentru a trimite utilizatorul la o altă pagină. Suntem doar de gând pentru a afișa rezultatele dinamic pe această pagină aceeași. Noi chiar nu vreau ca ei să meargă oriunde, și vreau să rămână pe aceeași pagină. Deci, prin returnarea falsă, ne asigurăm că formularul nu face asta pentru noi. Să aruncăm o privire la ceea ce de fapt arata ca acest. Pagina noastră citat arată la fel. Lasă-mă să trageți în sus inspectorul aici astfel încât să putem vedea ce se întâmplă. Face un pic mai puțin mare. Amintiți-vă, dacă ne deschidem fila Network, acest lucru este în cazul în care putem vedea toate cererile HTTP care se intampla pe pagina. 

Pentru un simbol permiteți-mi să tastați în AAPL și faceți clic pe cotatia. Acum am văzut că o parte a Apple costa un numar de dolari Tocmai a apărut pe pagina, dar URL-ul nu sa schimbat deloc. De fapt, aici este cererea HTTP pe care tocmai l-am făcut. Am făcut o cerere POST pentru a quote.php. Asta are sens. Aceasta este ceea ce ne-a trimis înapoi serverul. Nu e nici mai mult, acest document de gigantic HTML cu imagini și lucruri de genul asta, e doar o linie de text, iar apoi am afișat doar linia de text. Dacă ne întoarcem la anteturile și să vedem ce avem de fapt trimis in interiorul acestei cereri HTTP, putem vedea aici că am trimis de-a lungul o cheie de simbol si o valoare de AAPL, care este ceea ce utilizatorul tastat inch Acest lucru este frumos, dar este încă un pic enervant. Am încă mai trebuie să faceți clic pe acest buton pentru a obține oferta de stoc. Suntem oameni ocupati si nu avem timp să faceți clic pe butoanele. Google a realizat acest mic ceva vreme în urmă, când au pus în aplicare Google Instant. Ce face Google Instant este ca tu să tastați doar începe afișarea rezultatelor pentru tine astfel încât să nu trebuie să vă faceți griji cu privire la clic chiar Căutare. De fapt, o poveste distractiv legat de asta. După ce Google Instant a ieșit, oamenii erau ca, "Whoa, asta este super uimitor." "Acest lucru este atât de rece." Și un student la Stanford jos, care a fost 19 la momentul a făcut acest site numit YouTube Instant. Toate Instant YouTube nu este sa cauti eficient pe YouTube instantaneu. Deci, mai degrabă decât a fi nevoie să meargă la YouTube.com și a lovit de căutare, când am începeți să tastați în ceva asemănător YouTube Instant CS50, am putea vedea aici că se încearcă să o conexiune la Internet lentă popula aceste rezultate trăiesc. Pentru a face pe care le poate face de fapt, o modificare foarte simplu pentru a ne quote.js fișier. Chiar acum suntem atașați acest eveniment atunci când formularul este depus. Noi nu vrem cu adevărat să facă utilizatorul susțin că forma mai, deci haideți să pornim în loc acest eveniment de fiecare dată când utilizatorul apasă o cheie. Pentru a face acest lucru, primul hai schimba evenimentul de la prezenta la KeyUp. Asta înseamnă că, mai degrabă decât de așteptare pentru a depune formularul, de fiecare dată când este apăsată tasta, ceva se va întâmpla. Ea nu mai are sens să se atașeze acest eveniment KeyUp pentru a forma întregul. Noi într-adevăr pasă doar că caseta de căutare. 

Pentru a selecta pe care acum, putem schimba acest lucru să fie, mai degrabă decât forma-citat, forma-citat și vom avea o intrare (tip = text) sau am putea spune (nume = simbol) - ce vrem noi. Acum nu mai e un singur lucru ce trebuie să facem. Amintiți-vă aici când am spus retur fals am spus că nu vreau ca evenimentul implicit la foc. Dar ea doar se întâmplă, astfel că, dacă vom dezactiva că acum, tot ce ne tastați nu este de gând să apară în browser-ul mai pentru că ar fi comportamentul implicit al tastarea într-o casetă de text. Noi nu mai vrea să suprascrie această, asa ca hai sa distruga acest retur fals. Dacă vom salva ca și să reîncărcați pagina, acum, când am început să tastați AAPL veți vedea că prețul stoc la partea de jos aici este completarea în mod automat. Deci, aici este CS50 Instant Finante. De fapt, o poveste despre distracție Instant YouTube este faptul că elevul doar un fel de a scris-o ca un proiect 1-noapte, iar a doua zi i sa oferit un loc de muncă de către CEO-ul YouTube. Deci, la fel de simplu ca asta, CS50 elevii, proiectele finale pot face rost de un loc de muncă la YouTube. Ceva de genul că este o idee foarte misto pentru un proiect final, nu? Am avut unele funcționalități existente, care ne-am dorit să se integreze cu. Ne imbunatatim experienta utilizatorului un pic, și dintr-o dată ceva căutarea pe YouTube Instant ar putea fi o mai ușor mult decât să-l căutați pe YouTube regulat. Deci, asta e AJAX într-o coajă de nucă. 

În exemplele care arată Iosif a fost, am văzut o mulțime de autocompletes, și aceste autocompletes sunt foarte, foarte util pentru că nu trebuie să ne amintim - De exemplu, în cazul în care nu vă amintiți prețul de stoc pentru Apple și ne-am știu că e ceva aa, mai degrabă decât doar să-mi spui, "O parte din acest lucru costă această bani," Aș fel de vrea să știu ce stocurile începe cu AA. Putem face asta într-adevăr frumos cu biblioteca Bootstrap care este deja inclus interiorul CS50 Finanțe. Dacă ați venit aici să tag-ul JavaScript și defilați în jos la Typeahead, aceasta este doar un plugin frumos ca cineva deja a scris pentru noi, si putem folosi cu ușurință funcționalitatea acestuia ca asta. Am scris intr-un A și aici este o listă a unor state care încep cu A. Să spunem că eu cred că acest lucru este foarte cool si e timpul pentru mine să includă asta pe pagina mea. Se pare că acest lucru este foarte, foarte simplu. Să sari peste aici pentru a quote3.js. Dosarul meu pare un pic diferit. Aici toate lucrurile mele AJAX este aceeași. Vreau să încărcați datele în stoc, fără a fi nevoie să meargă la altă pagină. Dar acum vreau să folosesc acest plugin. Documentația Bootstrap are exemple de mari exact cum pot face asta. Vreau să spun, "Iată de intrare pe care vreau să autocomplete", a și am de gând pentru a apela această funcție numită typeahead, și că o să se ocupe de toate lucrurile Typeahead pentru noi. Acesta va inițializa listă, se va face tot de filtrare noastre. Singurul lucru de care are nevoie să știe este ceea ce suntem de date autocompleting pe. Asa ca am aflat această cheie doar citind documentația și se uită la exemple. Dacă eu dau o cheie de sursă, valoarea acestei chei este doar o serie de lucruri pe care vreau să completarea automată pe. Această variabilă a venit de la acest alt fișier. Am deschid symbols.js. 

Aceasta este doar symbols.js această matrice într-adevăr, foarte mare conținut de siruri de caractere de toate aceste simboluri bursiere din NASDAQ. Dacă vreau să sar înapoi în HTML, astfel jharvard, vhosts, globalhost, html, template-uri, quote_form. Din moment ce se numește acum quote3.js, permiteți-mi să modificați fișierul JavaScript eu aici, inclusiv. Acum am quote3.js, așa că am de gând să încarce în fișierul JavaScript separat, una care are ca Bootstrap completarea automată. Acum, când am sări înapoi la browser-ul, reîncărcați pagina, si am începeți să tastați AA, e completarea automată mea. Și a fost într-adevăr la fel de simplu ca asta. Am avut o linie de cod care tocmai am spus, "Aici sunt lucrurile pe care vreau să le Completare automată", a și dintr-o dată am această funcționalitate foarte, foarte frumos, cu care nu o mulțime de efort, la toate. Așa cum ești în curs de dezvoltare site-uri web și, în special partea frontală a lucrurilor, ai de gând să găsească acest caz, este mult. Există o mulțime, multe, multe biblioteci foarte cool gratuite acolo care fac foarte ușor să faci lucruri de genul asta. Poate cineva gândi la orice neajunsuri ale pur și simplu autocompleting pe această listă mare de simboluri? Ce ar putea fi ceva ce nu e cel mai bun cu această abordare? Da. >> [Elev] Ora, dacă aveți o mulțime de [neauzit] Da. Chiar acum suntem descărca acest fișier JavaScript imens și există o mulțime de simboluri. Și astfel, dacă avem o grămadă de lucruri, acest tip ar putea crește de latență de căutare nu numai dar, de asemenea, descărcarea fișierului real. Mare. Altceva? Chiar acum nu e nici un sens real al relevanței. Dacă am introduce un A, companiile care apar aici ar putea să nu fie cele mai populare companii care încep cu A. 

Înainte de a ajunge la Apple, ar putea dura mai multe caractere pentru a găsi ceva ce caut. Acest completarea automată nu are acest sens de relevanță. E doar de gând să spun, "Orice lucru care se potrivește am de gând pentru a afișa." În loc de asta, aș vrea să se integreze într-un fel oarecare relevanță în căutările mele. Dacă mă duc aici la Yahoo! Finance, finance.yahoo.com, Dacă am încerca să introduceți un simbol pe pagina Yahoo! Finanțelor și am început să tastați goog, am această listă frumos de lucruri. În mod evident, se pare ca Yahoo! Finance este de a face ceva mai inteligent aici. Ei au o anumită relevanță și au, de asemenea, informații suplimentare cum ar fi numele de stoc. Asta e ceva ce eu nu pot obține într-adevăr doar cu lista de stoc a mea de simboluri. Vreau ca acest lucru și așa am de gând să-l ia. Pentru a face acest lucru haideți să facem câteva lucruri. Să deschidem întâi inspectorul de pe aceasta pagina pentru că am văzut că această pagină nu este reîncărcarea la toate, așa că folosește probabil AJAX cumva să fie încărcarea datelor sale. Putem afla ce date se încarcă. Dacă aș faceți clic pe această filă de rețea, acestea vor fi toate cererile care încep să fie concediat. Acum, dacă tip I în goo, putem vedea că tocmai am primit o cerere HTTP nou. Acest lucru este, probabil, în cazul în care datele sunt provin din. Destul de sigur, dacă mă uit la acest URL, care este un pic ciudat pe nume, putem vedea că acest lucru este exact în cazul în care Yahoo este de a trimite pe datele de la. 

Am creat un fișier separat numit suggest.php că e foarte similare în spirit funcția de căutare. Este practic va face o interogare la adresa URL Yahoo, mă întorc unele date, și trimite-l la mine. Acum, mai degrabă decât folosind această listă mare, foarte mare de simboluri, Eu pot folosi Yahoo lucruri frumoase de relevanță, și nu trebuie să descărcați fișierul care masive JavaScript. Sunt doar de gând să trage în jos simbolurile de fapt relevante în stoc. Să sari în asta. Deci html, js. Suntem acum în quote4. Acum nu mai suntem folosind faptul că lista mare de fișiere JavaScript. Dar există un fel de problemă de design mic aici. Am spus că, în O AJAX este asincron. Ce înseamnă asta este că atunci când am face o cerere AJAX, asa de bine aici, pe linia 8, în cazul în care acest lucru este mea AJAX cerere este, de fapt concediat. Să spunem acum am unele cod care se aici că va face unele lucruri Vrei alerteze utilizatorul sau ceva schimbări pe pagina. Ce nu se va întâmpla este browser-ul nu este de gând să aștepte această cerere să continue înainte de a veni în jos și lovind această linie. Asta e partea asincron. Se va face această cerere și spune, "Ori de câte ori ați terminat, "Întoarce și sună ca functia pe care ți-am spus să sun în interiorul de succes." Asta înseamnă că nu putem pur și simplu descărca toate stocurile în prealabil. Avem nevoie pentru a face cererea și așteptați pentru ceva să se întoarcă. Asta înseamnă că, înainte, am putea spune pur și simplu Bootstrap, "Aici e lista cu lucruri pe care doriți să o completare automată pe." Noi nu mai putem face asta mai pentru că nu știm ceea ce ne dorim de fapt să completarea automată pe. Din fericire, Bootstrap gândit acest lucru, deoarece acestea sunt băieții deștepți de acolo, si ei de fapt ne-a dat un alt mod de a încărca acest plugin Typeahead. Înainte, valoarea acestei proprietăți sursă a fost doar această gamă mare de lucruri pentru a completarea automată pe. 

Acum proprietatea sursa este de fapt o funcție, și scopul acestei funcții este să dau seama ce lucruri la completarea automată pe sunt. Modul în care aceasta va seama de asta este ca va cere Yahoo! Finance ceea ce în cele mai bune lucruri la completarea automată sunt. Pentru a face că am de gând să fac o cerere foarte asemănătoare AJAX. Am de gând să solicite această pagină la suggest.php. Vreau sa trimit de-a lungul simbolurile încă. Și acum succesul meu, mi-a spus documentația Bootstrap că, pentru a popula această listă de lucruri, tot ce trebuie să faceți este să treci în această matrice acum la funcția de apel invers. Dar stai un minut. Dacă acest lucru se presupune a fi un tablou si AJAX mă trimite înapoi de text, cum este posibil acest lucru? Aceasta introduce un nou mod de schimb de date numite JSON. În acest caz, nu suntem doar trimiterea unui șir de text simplu. Acum avem de-a face cu această listă mult mai complex de simboluri bursiere. Aceste simboluri stocurilor poate include, de asemenea lucruri, cum ar fi numele companiei sau a prețurilor curente. Folosind doar un șir lung de mare, care nu este formatat în nici un fel previzibil nu va fi cel mai bun mod de a obține aceste date de la server Yahoo pentru mine într-un mod pe care le pot înțelege cu ușurință. JSON este o tehnologie care are avantajul de a cum putem crea tablouri asociative în JavaScript. Acest lucru arata foarte mult ca un tablou asociativ JavaScript, și, de fapt, e pentru că este. JSON standuri pentru Notații Obiect JavaScript. Aceasta este de fapt un format de convenit pentru transferul de date și înapoi. Aici, acest obiect JSON sau acest tablou asociativ JSON trimite-mi niste date despre un curs. 

Cheile acestei matrice sunt lucruri cum ar fi curs care are o valoare de CS50, si aici putem vedea că pot avea o valoare care este o matrice. Eu nu trebuie să fac lucruri cum ar fi elimine siruri de caractere și să caute virgule și de a face lucruri de genul asta nebun. Deoarece acest lucru este declarat în acest format JSON, JavaScript și jQuery au deja funcții pentru a converti un șir de caractere care arata ca acest JSON într-un tablou real asociativ JavaScript că putem lucra cu. Făcând care este la fel de simplu ca și spune că nu mai este acest fișier, suggest.php, trimite-mă înapoi pur și simplu un șir de text, dar știu că va fi ma trimite înapoi JSON. Asta înseamnă că JSON poate fi convertit într-un tablou asociativ JavaScript. Și așa jQuery, aș dori să faci asta pentru mine. Asta înseamnă că acest parametru de răspuns aici, aceasta nu mai este doar un șir. Pentru ca ne-am spus jQuery care vine aici unele JSON, jQuery va fi destul de inteligent pentru a spune, "Ai vrut JSON?" "Am de gând să transforme că într-un tablou asociativ pentru tine." Să aruncăm o privire la de fapt, o dată pe fila Network avem quote4.js. Vom schimba acest lucru și să reîncărcați pagina. Acum am de gând să tastați într-o-o din nou. Am facut un cuplu de cereri la suggest.php, dar acum acest răspuns, , mai degrabă decât pur și simplu șir, e JSON. Deci, am o proteza deschis cret spune, "Iată vine un tablou asociativ." 

Tasta primul si singurul de acest tablou asociativ se numește simboluri, si apoi aici este un tablou al tuturor simbolurilor relevante vine acum de la Finante Yahoo! nu, din această listă gigantic. Asta e modul în care pot popula pur și simplu, acest plugin completarea automată cu unele date care nu vine dintr-un fișier local care este deja predeterminat dar de la altceva. Se pare că putem lua de fapt profita de o tehnologie numită JSONP, sau JSON cu umplutură, care va elimina acest intermediar suggest.php. Dar, în loc de a face asta, haideți să aruncăm o privire la locul cum pot îmbunătăți acest lucru chiar mai mult. Îmi place foarte mult Typeahead Bootstrap lui. E foarte frumos. Dar noi te pricepi la JavaScript și vrem să facem acest gen de noi înșine, ia poate o privire la ceea ce ar putea fi acest plugin face. Să nu ne mai folosesc chestia aia Typeahead, și să încerce să facă această listă de stocuri propuse noi înșine. Aici, în quote6.php vom începe același fel. De fiecare dată când cineva tipuri de ceva, dorim să facem o cerere AJAX. Acest lucru este similar cu originalul nostru Instant Finante CS50. , Mai degrabă decât a face o cerere de quote.php, facem acum o cerere în acest dosar la fel ca înainte, acest suggest.php, care este doar de gând să trage de date de la Yahoo! Finance. 

Din nou, ne asteptam inca JSON, dar acum, deoarece Typeahead nu face acest lucru pentru noi, avem, de asemenea, trebuie să trimită de-a lungul valoare care este în interiorul casetei de text curent. Acum știm ce să ceară pentru Yahoo! Finance, si asa ca acum e aici, funcția pe care dorim să execute o dată cererea completeaza. Noi nu avem de a face plugin lista pentru noi, așa că aici e de fapt, în cazul în care vom merge pentru a construi o listă de sugestii. Pentru a face acest lucru, mai mult ca în PHP avem concatenate aceste șiruri mari de HTML apoi le-am tipărit, putem face exact acelasi lucru în JavaScript. În primul rând vom începe acest șir numit traduceri, și acest șir este doar de gând să conțină câteva HTML. Ne dorim ca acesta să fie o listă de lucruri, așa că o să încep cu această etichetă listă, și acum vom repeta peste toate simbolurile care au fost returnate inapoi la noi. Amintiți-vă, pentru că ne-am spus DataType: "JSON", acest lucru nu este un șir. Aceasta este deja o matrice pentru noi. Asta e foarte tare. Putem spune pur și simplu, "vreau să adăugați un element de listă." Vom pune in interiorul unui element de o parte, în a, vom da o clasă de traduceri astfel încât să știi ce este, iar acum aici este simbolul pe care ne-am întors de la Yahoo! Finance. 

După ce am creat un element pentru fiecare dintre simbolurile am ajuns înapoi, vrem doar pentru a inchide lista. Deci, acum, traduceri reprezintă acest fragment mic HTML că, atunci când a pus pe o pagina va fi lista de lucruri pe care le căutați. Acum, hai să punem de fapt, ca pe pagina. Pentru a face acest lucru l-am creat, de fapt un alt div gol și m-am dat un ID de traduceri. La fel ca ne-am stabilit conținutul div care ar afișează prețul date privind stocurile, Acum vrem doar să setați conținutul acestui div la orice acest șir este care conține aceste simboluri. Prin folosirea acestei metode HTML, această variabilă traduceri, acest șir, este un șir de HTML. Vreau să iei HTML si pune-l in interiorul div numit traduceri. Am adăugat ceva la DOM acum. Am adăugat câteva elemente noi DOM pe care le poate afișa acum pe pagina. Să vedem cum arata. Dacă vom încărca în quote6 și acum ne vom întoarce, acum, când am început să tastați AAPL, nu mai avem acea bootstrap completarea automată, dar acum avem această listă pe care ne făcut. Acesta este un pic mai urât decât Typeahead Bootstrap, de exemplu, dar aceasta nu ne permite să facem un lucru. Când ne-am uitat la acel plugin Bootstrap, am văzut că, atunci când ne autocompleted, una dintre valorile completare automată a fost AAPL. Asta ar putea să nu fie atât de util. Ca utilizator, nu s-ar putea recunoaște imediat toate simbolurile stoc. Ceea ce eu sunt, probabil, mai multe sanse de a recunoaște sunt numele companiei reale. Deci, nu ar fi foarte util în cazul în care, mai degrabă decât spune AAPL această a spus ceva de genul Apple Inc Pentru ca ne-am rostogolit asta noi înșine, putem foarte ușor să fac asta. Să deschidem fișierul nostru de oferta trecut, aici, așa quote7. 

Același lucru. Am creat doar un alt fișier PHP, care va reveni la noi mai mult decât doar simboluri. Acesta va oferi, de asemenea, ne înapoi numele companiei. Și așa facem același lucru. Facem o cerere AJAX. Odată ce a completat cererea, vom executa această funcție aici, și această funcție este de gând să construiască un șir mare de elemente. Dar diferența este că valoarea acestor liste nu mai este doar un simbol, e acum numele. Deci, avem o mică problemă. Când ne-am folosi de căutare nostru, avem nevoie de a trece cumva simbolul. Noi nu putem trece ceva de căutare cum ar fi Microsoft Corporation. Avem nevoie de ea pentru a trece MSFT. Când ne-am scriem HTML, avem o mulțime de frumoase încorporate în atribute. Un A poate fi asociat cu acesta un href sau o clasă. Dar ceea ce avem cu adevărat nevoie acum este pentru fiecare dintre aceste link-uri să aibă un simbol stoc asociate cu aceasta. Nu e nici un built-in atributul HTML pentru simbol stoc, dar, din fericire, HTML5 ne permite să creați propriile noastre atribute să fie tot ce ne dorim. Prin a spune de date-simbol, am introdus un nou atribut al cărui nume am făcut în sus, și acest lucru este în regulă pentru că l-am prefațat cu aceste date. Vom stoca în interiorul de acolo simbolul din stocul acum. Ceea ce înseamnă că, chiar dacă suntem afișarea valoarea numelui companiei interiorul autocomplete noastre, amintindu-ne în continuare simbolul care este asociat cu fiecare companie. Modul în care ne facem că este în interiorul acestui element în sine. Asta înseamnă că trebuie să facem o schimbare mai mult. Când ne-am faceți clic pe el acum, avem nevoie pentru a lua de fapt profita de atributul simbolului , mai degrabă decât doar de valoarea sa. Dacă ne back-up, am atașa un handler eveniment la traduceri. Ori de câte ori unul dintre aceste traduceri se face clic pe acum, vreau să fac ceva. Ceea ce vreau să fac este să modificați valoarea de care caseta de intrare. Acum vreau să setați această funcție val aceeași. 

Deci, fara nici un argument această funcție val se întoarce la tine ceea ce e deja în caseta de text, dar daca dau un șir, se va lua ca șir și pune-l în caseta de text. Mă selectarea caseta de text sa în același mod. Numele lui este in interiorul simbol al formularului-citat. Acum, eu trimit aceasta valoare a atributului de date simbol. Acest lucru este nou aici, aceasta $ (aceasta). Ce este acest lucru se referă la este elementul care a fost făcut clic. Putem vedea aici că nu vom atașa un eveniment clic pentru fiecare element cu o clasă de sugestie individual. Mai degrabă, ne apropiem de acest mic un mod diferit. În schimb ne spui de fiecare dată când în interiorul acestui div nimic traduceri, care amintesc este doar un container pentru această listă, în cazul în care ceva în interiorul acestui div se face clic si are o clasă de sugestie, Vreau acest eveniment la foc. Practic ce înseamnă acest lucru putem face este, putem reutiliza acest handler aceluiași eveniment pentru toate lucrurile din lista. Deci, nu avem de a avea unul de tratare a evenimentelor pentru primul element și un handler eveniment diferit pentru al doilea element. Putem spune în schimb, "Vreau de tratare același eveniment să se aplice totul în lista mea." Dar noi trebuie să știți cumva ce element a fost făcut clic. Acest "acest" cuvânt cheie reprezinta doar asta. Acesta este obiectul care tocmai a fost apasat de utilizator. Dacă am dat click pe link-ul treilea, aceasta reprezintă elementul de care se leagă treia, ceea ce înseamnă că pot obține atributul său, date-simbol, care știm că are să conțină simbolul care este asociat cu compania tocmai am dat click. Dacă ne sări înapoi la pagina noastră financiară, putem vedea acum că odată ce am început să tastați ceva de genul MSFT, nu mai suntem obtinerea doar simboluri bursiere, ne apropiem acum companiile reale. Dar când dau click pe una dintre aceste companii, putem vedea că suntem de fapt, nu popularea caseta de text cu numele companiei dar cu tot ce a fost depozitat în interiorul acestor atribute de date. Și deci, dacă am inspecta, de fapt unul dintre aceste elemente de dreapta aceasta făcând clic pe și făcând clic pe Inspect Element, putem vedea de fapt cum arata. 

Amintiți-vă acest lucru este ceva pe care noi am creat în interiorul că, pentru bucla cand am fost construirea faptul că un șir de HTML. Putem vedea aici că aceste date-simbol are valoarea de MSFT, ceea ce este minunat. Asta e ceea ce ne așteptam. Asta e simbolul și care este modul în care am ajuns la valoarea de care aveam nevoie pentru a utiliza în interiorul acestei casete de text. Asta e suficient pentru formularul de oferta pentru că e un fel de plictisitor. Să facem niște îmbunătățiri rapide la pagina portofoliul nostru. Dacă ați utilizat CS50 Finante pentru un timp și de a începe să cumpararea si vanzarea o mulțime de stocuri, în cele din urmă acest tabel este mergi la a lua destul de mare, și ai de gând să doriți un simbol stoc, desigur. Odata ce masa este foarte, foarte mare, ar putea fi util pentru utilizatorul să încerce să caute peste el. In interiorul casetei de căutare, dacă am începe să tastați ceva de genul Disney și caută pentru stocul meu Mickey Mouse, putem vedea că tabelul este acum de filtrare bazat pe ceea ce am tastat inch Această funcționalitate arata super-complicat, dar este foarte, foarte usor cu jQuery și JavaScript. Acest fișier portfolio.php include un fișier numit portfolio.js JavaScript. Să aruncăm o privire la asta. Deci html, js, portofoliul. Iată în cazul în care vom face acest lucru căutarea pe masă. Primul lucru pe care am nevoie să faceți este să atașați o rutină de tratare eveniment la care caseta de text pentru că știm că ne-o dorim funcția noastră de filtrare la foc de fiecare dată utilizatorul apasă ceva pentru că nu au timp pentru butoanele Căutare. Primul lucru pe care trebuie să faceți este să dau seama ce caută utilizatorul, la fel cum am făcut-o înainte. Acest cuvânt cheie se referă la elementul curent utilizatorul interacționează cu. 

Deoarece utilizatorul interacționează cu caseta de căutare, $ Acest lucru reprezintă caseta de căutare, astfel this.val ne oferă ceea ce este în interiorul casetei de căutare utilizatorul este în prezent tastarea. Deci, acum ce vrem să facem este să vrem itera peste toate rândurile interiorul masa noastră. Pentru a selecta toate rândurile din tabelul nostru, i-am dat acel tabel un ID de portofoliu de masă, și fiecare rând este reprezentat de un element TR, Deci, acest selector este de gând să se întoarcă la mine o matrice mare din toate rândurile din masa mea. Acum vreau să itera peste acea matrice. Te-aș putea-o pentru buclă, dar de fapt ne oferă jQuery funcția de frumos numit "fiecare." Ce face fiecare este fiecare are un argument, și acest argument este o funcție. Ce o să faceți este să-l va aplica această funcție pentru fiecare element de interiorul acestei liste. Aceasta functie are un argument care este e, și atunci când această funcție este executat, acest e va fi înlocuit cu primul rând, apoi al doilea rând, și apoi al treilea rand. Prin acest mod, acesta este același lucru ca și execută o buclă pentru și apoi imaginind elementul curent pe baza indicelui de interior pentru buclă. La fiecare iteratie, pentru fiecare dintre aceste elemente în tabel, Vreau pentru a verifica dacă textul elementului - textul celulei interiorul rând - Meciuri ceea ce caut. Acest șir lung de mare comenzi este cum am putea face asta. În primul rând, din nou, acest lucru acum se referă la - pentru că este în interiorul unei funcții noi - aceasta este acum rândul curent din tabel. Vreau să iau rândul curent din tabel, și vreau pentru a obține toate de copiii săi. Amintiți-vă, DOM este un arbore ierarhic, ceea ce înseamnă că elementele au un număr de copii. 

Această funcție copii. Este de gând să se întoarcă la mine din spate o serie de toate elementele că sunt copiii, în acest caz, un rând din tabel. Acest lucru este pur și simplu celulele din interiorul rândului. Vreau doar să căutați în prima celulă. Această funcție. Primul spune-mi dea primul element în această matrice. Atunci funcția textul spune-mi exact ce e in interiorul acelei celule din moment ce vreau să căutați în acest text. În cele din urmă, să îl transformă în litere mici, astfel încât să putem face interogări de text caz insensibile. În cele din urmă, dorim să vedem dacă acest șir în interiorul unui tabel conține șirul de caractere suntem căutați. Funcția indexOf în JavaScript nu doar asta. Ea ne spune dacă este sau nu acest șir conține un alt șir. Dacă e adevărat că celula conține ceea ce caut, atunci vreau să vă asigurați că este indicat. Metoda de spectacol va spune, "Arată element." Dacă acest lucru nu este cazul, atunci înseamnă că tot ce caut nu sunt conținute în acel rând, și așa vreau să ascund este de la utilizator. Care realizează acest sens frumos de filtrare în cazul în care nu mai vedem întregul tabel. Dacă sunteți interesat în modul de a face acest simbol, precum și, vom posta sursa on-line. Dar e foarte simplu. JQuery are metode minunat pentru aceste animații și proprietăți CSS manipulare. Deci, asta e pentru mine. 

Atunci ce se află în fața? După cum veți vedea în câteva zile, finala propuneri de proiecte este datorată. Finala propuneri de proiecte va pune câteva întrebări, dar printre ei va fi de trei etape - o un "bun" piatra de hotar, o piatră de hotar o mai bună, și una cel mai bun. Ideea fiind de a ajuta într-adevăr voi stabili așteptările dumneavoastră astfel încât minim va fi fericit cu producția de proiectul final și va fi "bun", astfel încât ceea ce vă îngrijorează. Dar apoi, în interesul de a obține vă pentru a ajunge la doar un pic la ceva mai bun sau cel mai bine ceva, vom rezolva, de asemenea, a împinge spre tine la fel de bine. CS50 Hack-un-Thon, între timp, este în câteva săptămâni. De obicei, facem acest lucru pe o bază baza loterie, datorită interesului, dar sansele sunt vom avea câteva sute de noi în autobuze de transfer de la Harvard Square în jos pentru a Kendall Piața cazul în care Microsoft are o facilitate de frumos pe bună dreptate numit "tocilar" - New England de Cercetare si Centrul de Dezvoltare. Vom ajunge acolo în jurul valorii de 20 Vom avea ceva de mâncare. În jurul valorii de 1 dimineața vom avea mâncare ceva mai mult. În jurul valorii de 5 am, dacă ești încă treaz, vom peste cap de la IHOP sau de a lua înapoi la campus. Obiectivul nu este de a se arunca cu capul în proiecte finale alături de colegii de clasă și a personalului. Apoi, câteva zile mai târziu, este Târgul CS50, care este într-adevăr menit să fie o oportunitate pentru voi de a prezenta munca ta și realizări pentru semestrul în timp ce frecarea umeri unii cu alții și a obține un sentiment de ceea ce a făcut toată lumea. Cu care a spus, multe mulțumiri Tommy și lui Iosif, si te vom vedea pe luni.  [Aplauze]