[Powered by Google Translate] [Teden 9, Nadaljevanje] [David J. Malan - Harvard University] [To je CS50. - CS50.TV] 

To je CS50. To je konec tedna 9. Najlepša hvala. Končno. Teden 9. Dobil sem ga. Danes smo nadaljevali pogovor o spletnem programiranju s pogledom proti končni projekt, ne zato, ker moraš nekaj narediti spletno Za končnih projektov, temveč zato, ker bodisi za končnih projektov ali po CS50 To je gotovo smer, v katero se bo sodobna programska oprema. In vendar je to dejansko ni lahka stvar. Pravzaprav je eden od najtežjih stvari za početi, je vidik oblikovanja. 

Na primer, z zasnovo mislimo dejansko dobili uporabniški vmesnik ali uporabniško izkušnjo prav. Upam si reči - in vemo, od nedavnega niza problem ko nekaj vas je na sporedu vaših nezadovoljstva o neki kos programske opreme ali strojne opreme, ki vas razbesni, bodisi na univerzi ali off - obstaja veliko lokacij tam, tam je veliko strojne opreme tam, da nekako zanič. Ampak dejstvo je, da bi stvari, ki so preproste za uporabo, so še vseeno močan je zelo težko izziv. Torej, danes sem vprašal, Jožef in Tommy se mi pridruži tukaj tako da bomo imeli pogovor, tako glede oblikovanja in kaj bi morala vrste miselnih procesov začeti gre po glavi Ko oblikujete svoje končne projekte, bodoča prizadevanja. In potem s pomočjo Tommy je bomo pogled na nekatere od izvedbenih podrobnostih. Kako lahko nekaj vizijo na papirju ali v tvoji glavi , ki jih lahko izvedete programsko z uporabo nekaterih tehnik in tehnologij, kar smo pravkar začela govoriti o tem, sicer JavaScript in celo nekaj novejših, in sicer AJAX, asinhroni JavaScript. To vam omogoča, da ustvarite vse bolj dinamični uporabniškega vmesnika s pridobivanjem več podatkov postopoma od strežnika. Torej bomo videli nekatere od teh izrezkov, kot tudi danes. Kot prahi, če ste zainteresirani za koncentracijo v računalništvu ali minoring v računalništvu, vedo, da je ta petek opoldne Maxwell v Dworkin 221 bo pica dogodek kjer boste izvedeli kaj več o računalništvu. Na poti ven danes boste mogli pobrati neuradno navodila za DS na Harvardu. Bomo dal na smeti zunaj na višini pasu tako da, če želite, da zgrabite to in se naučite kaj več o CS, da bo za vas, kot je bilo v tednu 0. Tudi če bi želeli, da se nam pridružite za CS50 kosilo v petek ob 01:15, glavo na cs50.net/lunch. Brez odlašanja, bom dal učno kolega Josepha Ong. Pozdravljeni. [Aplavz] Hvala. Prvič sem se naučil o oblikovanju bil v razredu tu imenuje CS179. 

Profesor času nam je povedal zgodbo o drugi profesorja , ki so šli v hotel in se uporablja za pipe. Mi lahko kdo pove, kaj je 2 gumbi na levi in ​​desni storiti? [Študent] Vroče in hladno. >> Toplo in hladno. Dobro. Kaj vam je normalno pričakovati, kajne? Ta profesor po uporabi pipa želi stuširati, in on nadaljuje z uporabo tega. Misli na levi in ​​desni strani so za vroče in hladno, kajne? Vendar pa lahko kdorkoli povej mi, kaj ti pravzaprav storiti? Vse roke? [Neslišno študentski odziv] >> Eden od predlogov je? [Neslišno študentski odziv] >> Temperatura? Torej, eden od njih nadzira temperaturo in druge kontrole? >> [Študent] pritisk vode. Vodni tlak. Dobro. Ta profesor vstopi v to in, misleč, da se nadzor vročine in mraza, Izkazalo pravega, ki misli, da je za vroče, pa vse do ker želi, da topel tuš. No, to res ne ujemajo, tako da on dobi to ni zelo zabavno izkušnjo da so v hladno prho, in vsi vemo, kaj je občutek. To je primer oblikovanja pomanjkljivost. Kaj mislim s tem je njegova pričakovanja iz pipe se ne ujema, kar je izpod tuša, ki je nekako žalostno zanj. Torej, to je primer zasnovo pomanjkljivost, kar se dogaja v resničnem življenju. Vendar pa smo videli vse vrste drugih, ki so, kot dobro. Smo verjetno ne oboževalci sistema MBTA. To je podzemni sistem dejansko v Londonu, ki pravi: "Ta gumb ni v uporabi." Zakaj je sploh tam? Zakaj sploh briga? Ko sem bil otrok, pri čemer tech zdrava pamet 1 v hiši, ko bi se računalnik zruši, bi moja mama prišla k meni, Prikaz mi ta zaslon in me sprašuje, kaj se je zgodilo. 

Tudi jaz ne vem, kaj to pomeni. [Smeh] Kaj? [Smeh] Včasih se počutim kot razvijalci programske opreme so le panulo nas. Kot smo kot uporabniki, "Kaj se dogaja? Nekdo nam povej." To vse pride k vprašanju oblikovanja. Zasnova, kot lahko vidimo, ni zgolj stvar estetike, ni o tem, kako stvari videti. Vidimo tukaj, da to malo pop-up sem dejansko izgleda zelo lepo. To je padec senco v ozadju, je meja zaobljenimi dogaja. To je nekako lepo. Ni res dobro zasnovan, saj to ni zelo uporabniku prijazen. Ta mali pop-up, da pride v resnici ne daj mi nobenih informacij o tem, kaj se dogaja, ne povej mi kaj je uporabnik o tem, kako si opomore od te napake. Želimo, da razmišljajo o stvareh, ki zasnova ni. Prvič, to ni estetika. Prav tako je ni polnjenje vaš app s tonami nepotrebnih funkcij. Če ste tajsko restavracijo, si verjetno ne želite, da se zobozdravnik ob istem času. In z vprašanjem Facebook, ne da veliko ljudi ga uporablja in ni bilo res v ospredju, kar so gradili. In tako lepo je, da razmišljajo o ne toliko količino stvari da ste dajanje na vaš zahtevek, vendar je kakovost in kako delaš, da je boljše uporabniške izkušnje za dejansko izboljšanje na tem, kar že imate. 

Na kratko, design nam pove kaj moramo graditi. Na primer, če gradimo nekaj, kar vas, da nam iskati stvari, kot so Google, na primer, delamo na način, ki zahteva, da uporabnik lahko veliko klikov, da bi dobili, kar želijo, ali bi morali to storiti na način, na primer z Google Instant ali autocomplete ki nam omogoča priti do naših rezultatih hitreje? Tehnika gre, tako kot Tommy bo pokazal, dejansko gradnjo. Obstaja veliko vrst oblikovanja. Na primer, če ste izgradnjo nekaj, da se uporabi nekaj v tretji državi, svetu, kjer je ni veliko elektrike ali da je veliko tehnologije, morate oblikovati kaj ste gradnjo tako, da lahko daje dostop do ljudi tam. Toda kaj bi lahko vrste drugih odločitvah oblikovanja obstaja ali je morda vpleten v kaj takega? Ja. Vidim roko. [Neslišno študentski odziv] >> desno. Točno tako. Dostopnost je ena stvar. Veliko ljudi ne razmišljamo, "Kaj pa moje uporabnike?" kot skrajnosti obeh spektra. Imam uporabnike, ki bi jih invalidnosti, da nisem razmišljal in jaz sem samo razmišljal o načrtovanju za splošno uporabnika. Internet je dostopen vsem danes, in bi moral biti oblikovanje za tiste ljudi, kot dobro. Kakšne vrste drugih odločitev načrtovanja lahko naredite? Da. >> [Študent] Stroškov. Stroški. Zelo dobro. Še ena stvar, ki jo lahko utemelji svoje odločitve o oblikovanju na stroškovno. Če smo podjetja, ki jih želite zgraditi nekaj, da ne bo veliko stroškov za izdelavo lahko pa prodajajo v zelo visokih stroškov ali pa nam prinesla nekaj dobička. 

To so vse različne vrste oblikovanja, toda ko gradimo nekaj na internetu ali ko gradimo nekaj, kar verjetno ne stane toliko, da zgraditi zdaj, internetnih aplikacij, kot so - ne boste vrgli veliko kapitala v to da bi nekaj, kar dejansko deluje - kaj bomo bolj skrbi je uporabniška izkušnja. Temu pravimo si osredotočen na oblikovanje. V bistvu tisto, kar si je orientirano načrtovanje vključuje dajanje sebe v čevlje vaših uporabnikov. Če nekdo prijavi za tisto, kar sem gradnjo, ki so jih očitno prišel v mojo posebno uporabo s ciljem v mislih, z nalogo, da želijo dokončati. In vaša naloga je, ne samo, da bi jim pomagali izpolniti to nalogo ampak da bi jim pomagali izpolniti svojo nalogo na način, ki je učinkovit, intuitivno in, kot nekateri oseba, je dejal tam, dostopna. Kaj učinkovitost pomeni? Učinkovitost pomeni, kako hitro se moja dokončale Glede na moje vmesnik. Ali se veliko klikov za njih priti iz enega kraja v drugega? Je to dolgočasno? Ali imajo opraviti veliko ponavljajočih se nalog? Želimo, da bi ta proces čim bolj učinkovito tako da ne bi bilo treba narediti te vrste stvari. Kot je za intuitivnost, to je, na primer, če si poišče svoj vmesnik, je enostavno za njih, da bi dobili od kraja do kraja? Je enostavno za njih, da ugotovimo, kaj imajo še v mojem vmesniku da za njih za dosego cilja ali naloge, ki jih želite doseči? 

In končno, kot je tista oseba, je dejal tam, dostopnost je zelo pomembno. [Moški govorec] Na voljo je z dostopnostjo za stvari, kot so gledanje, všeč kako dejansko oblikovati nekaj za nekoga, ki je slep? Oh. Za ljudi, ki ne vidijo sploh imamo nekaj, kar ti bralniki zaslona. Kaj morate storiti, je, da bi moral graditi svojo spletno stran tako, da, na primer, posebne tehnologije, kar mi imenujemo - Obstaja veliko stvari zdaj. Mislim, da so bralniki zaslona, ​​imenovane JAWS. Veliko teh stvari, sklicuje na to, kar imenujemo območja pravila da bi prebral do uporabnika, kar je trenutno na strani. Za tiste ljudi, ki ne morejo videti, morate zagotoviti, da so ti bralniki zaslona dejansko lahko poberem vsebine na strani in lahko dejansko pokažejo svoje uporabnike, Če ne vidite, vsaj še vedno lahko razumeli vsebine na strani. Ja. Ok. Dovolj govorimo o dobrem oblikovanju. Pogovorimo se o slabem načrtovanju. To so stvari, ki jih ne bi smeli početi. Ali lahko kdorkoli povej mi kaj o svojih izkušnjah z Craigslist in kaj mislijo, da ni tako veliko o tem design? Da. >> [Študent] Mislim, da je preveč besed na enem področju. Preveč besed, kajne? Popolnoma prepričljivo. Si prišel na to stran in si pozdravili s kopico stvari tukaj da morda sploh ni pomembno za vas. Na primer, če živite v eni državi, ki se ne začne s to črko. Recimo, da živite v Teksasu ali kaj podobnega. 

Moraš se pomaknite vso pot navzdol na stran, da bi dobili na mestu, kjer ste na. Jaz sem iz Bostona, zato naj pogledam v Massachusettsu. Kje je Massachusetts? Oh, tukaj je. Oh, to je Boston. Ok. Oglejmo si Bostonu. [Smeh] Precej veliko, kajne? Nerodni stvari tam. [Smeh] Recimo, da iščem nekje živeti. Koliko ljudi dejansko uporablja Craigslist? Tone vas. Obstaja precej slab lahko pogledaš, ampak poglejmo to. Kakšna je razlika med img in pic? Mi lahko kdo pove? Obstaja dejansko ni razlike. Pomenijo natanko isto stvar, vendar imajo različne oznake za njih iz nekega razloga. Če kliknem na slika je, se ne zgodi nič na strani. Pravzaprav sem moral še enkrat za iskanje nečesa, da se zgodi. Kaj bi lahko bilo bolje odločitev modela, ki bi se lahko tam naredili? Če sem s klikom na ta filter, najbrž želite filtrirati ki jih je ta ukrep ali posebna kategorija. Torej, namesto da bi ponovno pritisnite Iskanje, lahko sem naredil samodejno filtriranje nekako v stilu Google če to stori takoj. [Malan] A ne tvori kot smo jih videl doslej je treba fizično predložiti s pritiskom Vpišite najmanj ali s klikom na gumb? Kot ste jih videli do sedaj, boste dejansko morali klikniti Pošlji, da bi počel take stvari. 

Vendar se bo Tommy ti pokažem na sekundo, dejansko obstajajo načini za vas tako da, ko boste kliknili na to stvar lahko samodejno pošlje pravimo zahtevek AJAX in dobili boste podatke nazaj in filtrirati rezultate takoj. Obstajajo ton stvari, ki so narobe s tem vmesnikom. [Malan] Lahko iščete Cambridge? Nekaj ​​je nekoliko nenavadno, tukaj, kjer vas skrbi Cambridge in vendar ste dobili Westford, Spring Hill, West Newton in podobno. Verjetno ni idealna. >> Verjetno ni idealna. Kako bom lahko, da uporabnikova izkušnja bolj na to posebno stran? Da. >> [Študent] Navodila. Ok. Navodila v kakšno smislu? [Študent] Na primer, stvar za začetnike, ki sploh ne vedo, kaj je Craigslist ali ne veš, kaj moraš storiti. Prav. Tako razlago, kaj Craigslist je na tej strani, je zelo pomembno. Mi lahko dejansko sporočite uporabnikom, kaj ta stran je dejansko za. Če sem samo na obisku to, sem videl cel kup lokacij. Sploh ne vem, kaj pomenijo. Toda še bolj pomembno, prav tako si ogleduje ta vmesnik, spomniš, ko sem imel, da se pomaknete navzdol tono stvari najti posebno skupnost da sem dejansko mar za to. Kaj je hitrejši način, da bi lahko to storil? Da. [Študent] jih razdelili v vzhodnih, zahodnih regijah. >> Redu. Lahko jih razdelimo v več kategorij, ki bi lahko pomagali mi hitreje določi kako priti do tega določeni lokaciji. [Študent] Put spustni seznam. >> Desno. Ok. Lahko uporabite spustni meni, ker imamo določeno vrsto stvari in smo jih prikazali v spustnem meniju. Tako pa ne bo tako veliko prostora na zaslonu. Toda še bolj kot to, kaj lahko storimo? Da. >> [Neslišno študentski odziv] >> Lahko to ponoviš? >> [Študent] polje za iskanje. Ja, polje za iskanje. To je super. Kaj dejansko lahko naredimo je, če se ozremo na diapozitivov, v iskalno polje. Autocomplete. Zelo enostaven način za iskanje z rezultati, ki jih poznate, so v kompletu. Če začnem tipkati BO, samo pokaži mi vse rezultate, ki so BO znotraj njih. Na ta način lahko zelo enostavno najti posebne 1 želim iti namesto da se pomaknete skozi to res velik seznam. 

To so vse vrste res nizko viseče sadje, da nekdo, ki ga izvaja Craigslist lahko dejansko narediti, da bi izkušnje na spletni strani veliko boljši za njihovo posameznega uporabnika. Ok. Dovolj govorjenja o slabih spletnih strani. Pogovorimo se o Facebooku. Ko je prišel ven Facebook, in zlasti Facebook fotografije, je bilo veliko drugih storitev v času, ki bi lahko natančno naredil iste stvari. Lahko organizirate fotografije v albume. Kaj lahko narediš, je, da bi jih lahko organizirali v skupine, kakor tudi. Lahko jih razvrstite po datumu. Lahko naredite vse te posebne stvari. Ampak, ali kdo ve, kaj je Facebook fotografij eksplodirala v času, ko je bila sproščena? Da. >> [Študentskih] Oznake. Tags >>. Točno tako. Imamo Milo sem, kdo je naš pes maskota s tem Ruta CS50. Vidite lahko, da imamo to funkcijo označevanja na sredini. In kaj je tako zanimivega Facebook fotografij z vidika uporabnosti je, da dejansko lahko ljudje preko tega, da vključijo svoje prijatelje v svoje fotografije. Za Facebooku, saj je njihova spletna stran je zlasti socialne gre za gradnjo tovrstnega družbenega ozračja. To izboljša izkušnjo fotografij veliko več ker lahko dejansko začeli rekel: »To so povezave med ljudmi, in to so fotografije o ljudeh, ki jih dejansko zanimajo. " Del tega je tudi neke vrste narcisizem. Ljudje radi, da se je označila na fotografijah in takih stvari. Čeprav to ni nujno dobra lastnost ljudi, Hkrati se je na podlagi dobre odločitve oblikovanja ker ljudje dejansko skrbi za stvari, kot je ta. Tako, da je Facebook fotografij. 

Toda kaj je govoril Facebook bolj na splošno. Prepričan sem, da veliko ljudi tukaj so mnenja o Facebooku tako dobre in slabe odločitve, oblikovanje sklepov design. Torej odprtine ali biti srečni. Daj no. Vem, da vas vse uporabljajo Facebook. Nekdo mora nekaj slabega za povedati ali kaj dobrega za povedati o tem. Da. [Študent] V novice krme obstaja veliko stvari, ki sem res ne skrbi. Novice krma ne pokaže veliko stvari, ki jih morda ne zanimajo. Imate prijatelje na Facebooku, ki ste jih niso izpolnjeni za 2 ali 3 leta in boste videli njihove rezultate, novice popping up v vašem novice krme in ti sploh ne briga. Facebook je dejansko prizadeval, da bi to bolje, in oni dejansko poskušali push ustrezne rezultate na vrh novice krme kot prepozne tako da boste dejansko videli stvari, ki jih prijatelji, ki so pomembne za vas in vaših bližnjih prijateljev. Še kaj? Da. [Neslišen odziv študentov] >> Lahko to ponoviš? [Študent] Oglasi so razmeroma nevsiljivo. >> V kakšnem smislu? [Neslišno študentski odziv] Nimajo luč na zaslonu, kot transparenti. Ok. To je dobro. Če se spomnite na internetu od 90 let - >> [Malan] sem bil tam. >> Bil je tam. [Smeh] Morda se spomnite utripajoče ozadje gif, sparkly stvari, GeoCities slog vrsta stvari. To res ni primer dobrega oblikovanja ker je res moteča od vsebine. Umetnost Yale spletna stran uporablja, da so animirane GIF kot njihov izvor in ne moreš ničesar prebral na strani, ampak mislim, da je nekdo dejansko govoril z njimi in zdaj je malce drugače. [Malan] To je veliko bolje. >> To je veliko bolje, kot lahko vidite. >> [Malan] Oh ja. Res super, samo - Ja. Ok. 

Del tega je tudi, da vaše strani lahko zelo minimalistično in zelo razumljivo Tako stvari na strani toka na način, ki je zelo logičen in ne v napoto drug drugega. Kakšne vrste drugih stvari, ki so dobre ali slabe o Facebook o Facebooku? Naj samo še oblikovanje pogovor. Oh. Kje? Ja. [Študent] Novi Timeline Sistem omogoča iskanje te osebe profila o svoji preteklosti. Oh, Timeline. Časovnica je velika stvar, saj vam omogoča, da svojim prijateljem stebla nazaj, ko so bili v srednji šoli. Časovnica je dobro, saj to omogoča filtriranje po vsebini veliko hitreje, vam omogoča, da bi našli stvari, ki bi sicer bili sprejeti ti zelo dolgo časa, da bi našli Samo pomikate gor in dol, gor, gor, gor, gor, gor, kot bi šli nazaj v preteklost. Potem pa je tu še neke vrste negativna kot v smislu uporabniške izkušnje. Kaj bi to lahko bilo? Velika beseda, ki se začne s P-R. >> [Študent] zasebnosti. >> Zasebnosti, kajne? Zasebnost je veliko uporabniška izkušnja vprašanje. To je ena izmed stvari, sovražim o Facebooku zdaj. [Smeh] [Malan] Enako kot sem zdaj. David ni vedel, je to dejansko zgodilo šele včeraj. Torej, zdaj ve, da vsakič, ko sem ga čvek vem, da me je ignorirajo. [Malan] je nerodno del je pravzaprav sem ga ignorira, in nisem vedel, da je vedel, da ga ignorirajo. [Smeh] Zasebnost je veliko vprašanje. Ali lahko kdo tu povej mi, kaj bi lahko bilo slabo Facebook zasebnosti Poleg tega, da počnejo stvari, kot je ta? Kaj je še posebej težko narediti v zvezi s Facebookom zasebnosti? Ta vrsta je vodilno vprašanje. Da. >> [Študent] Skrij fotografije iz nekaterih ljudi. Prav. Točno tako, da skrijete svoje fotografije iz nekaterih ljudi. Imajo ta majhen, majhen gumb v zgornjem desnem kotu, ki vam omogoča, da preklopite zasebnost fotografije. Njihove možnosti za zasebnost so zelo različni med različnimi vrstami menijev. 

So gotten veliko bolje, o tem pred kratkim, vendar je nekoč veljalo da vsakič, ko je hotel preprečiti, da bi videli svoje prijatelje, fotografije, bi morali iti skozi zelo zapletene 5 korakih tega, ker, kot so, Naj kliknite na to povezavo, zdaj pa me še enkrat, mi še enkrat, Naj določiti, katere ljudje ne morejo videti mojih fotografij. To ni posebej dobra na strani Facebook ker toliko o uporabniški izkušnji, dejansko jim daje svobodo za nadzor nad tem, kaj lahko ljudje vidijo. Temu pravimo uporabniški nadzor in svobodo. Če ne dovolite, da vaši uporabniki storiti na način, ki je učinkovit in intuitiven potem vaša uporabniška izkušnja ni res, da je veliko na vseh.  Bi vi želeli povedati ničesar o Facebooku? Kako to izključite? [Ong] Ne, ne moreš je ta možnost izklopljena, in da je velika napaka uporabnost na strani Facebook. Ta funkcija - Pravzaprav sem pogledal vanj včeraj - da je bodisi, da ne morete narediti, ali pa je nekje zakopan zelo, zelo globoko V kotičku Facebook, ker ne morem ugotoviti, kako onemogočiti to funkcijo sploh. [Malan] Včasih pa ti sklepi niso očitne ker ste vi nam je dal veliko koristnih povratnih informacij o različnih aplikacij CS50 in spletne strani, ki seveda uporablja. Nismo izvajali vse te zahteve in predloge. 

Del, ki je za pridobivanje toliko prošenj, da je to funkcija časa, ampak včasih smo le zavestno odločiti, kot so, "Hvala za predlog, vendar pa se ne strinjamo." Torej, kako se dejansko odločita, kaj morate storiti, če želite uporabnikom, da bi moral nekaj storiti tudi če ni nujno? To je dobro ravnovesje med dejansko posluša, kaj pravijo uporabniki in dejansko imajo neko progo navedeno, kje si rekel, "Ne bomo storiti vse, kar ti uporabniki povedati." In predvsem, mislim, da je bil citat Henryja Forda, ki povzema to gor kar dobro. "Če bi vprašal ljudi, kaj hočejo, bi rekel, da je želel hitrejše konje." Ali lahko kdo nekako draži narazen, kaj to v resnici pomeni citat? Ne samo, da uporabniki vedo, kaj hočejo, ampak to je bolj, da - [Študent] Ne vem, kaj je mogoče. V delu ne vedo, kaj je mogoče. Tease, da razen malo več. Kaj misliš s tem? [Neslišno študentski odziv] To je dobro. Kaj mislim, da poskušamo tukaj povedati je, da ljudje vedo, kaj hočejo. Želijo hitrejše konje. Kaj v resnici želijo, je možnost za hitrejše, ampak res ne vem, medij, s katerim se doseže to. Ko ste prišli na svoje uporabnike in uporabniki povem nekaj in ti rečejo: "Želimo, da te funkcije in te značilnosti in lastnosti teh" ne želite, da nujno razmišljati o tem, "Naj gredo naprej "In izvesti tisto, kar je izrecno rekel," ampak kaj hočeš, da misliti je, "Kaj lahko vrsta idej dobim od tega?" Kaj so pravzaprav želeli? 

In od tam, kaj lahko naredite, je oblikovati nekaj, da izpolnjuje te zahteve vendar ne nujno na način, da uporabnik pričakuje, da bodo zadovoljni. Torej nekaj podobnega končnih projektov, v zelo realno, kaj je koristno, tolči, ko gre za kar nekaj boljšega, še posebej, če oblikovalec to aroganco o njem pri čemer si nekako ve, kaj je najbolje, boste morda lahko prispevek iz vaših uporabnikov, ampak kako si dejansko šel približno pridobivanje te povratne informacije? V končnih projektov, zelo konkretno, kar daje optimalne rezultate tukaj? Kaj daje optimalne rezultate - in bom šel čez to v 2. - je ta proces razvijanja in testiranja, nato pa ponavljanjem. Kaj mislim s testiranjem je ponavadi, ko načrtujete nekaj misliš, da je precej dobra, kot je: "Jaz sem tako dober oblikovalec. Vsakdo bo všeč." In potem ste jo dali ven in ljudje res ne bo všeč iz nekega razloga. Kaj morate storiti je, da moraš vzeti tiste dele, ki jih ljudje storijo, kot prenovo in stvari, ki jih ljudje ne marajo. Sliši se zelo očitno proces, vendar je to proces, ki se nenehno ponavljanjem na vrhu, kar ste že zgradili, je proces, ki pomaga ne samo izboljšati svoje sposobnosti načrtovanja, ampak tudi vam pomaga izboljšati zasnovo tako da ljudje dejansko cenijo svoj izdelek še bolj kot prej. 

Jaz bom šel v konkretne primere, kaj bi lahko dejansko narediti. Kot nekakšen zadnji primer izdelka, si oglejmo kajak. KAJAK ko je prišel ven bil zelo priljubljen. Ali lahko kdorkoli veš zakaj? Katere so vrste stvari, ki jih radi o tem, če ste ga uporabili ali kaj so vrste stvari, ki vam niso všeč? Da. >> [Neslišno študentski odziv] >> Ok. To je del tega je dajanje v najem uporabnik poizvedbo, ki je bolj zgovorni kot zelo omejevalno, kot so, "Moraš izbrati vaš začetni datum "In da boste morali izbrati vaš končni datum." Dejstvo je, da vam omogoča biti prožna o tem in vam daje vse lete v tem območju. Še kaj? [Študent] Ti vključujejo pristojbin v ceno. Oni so pristojbine v ceni. Davki in stvari dejansko šel naravnost v to ceno v zgornjem levem kotu da vam ne bo Prelisičil v razmišljanju, da ste dejansko plačuje za $ 240 let če je res 330 $. Še kaj? Da. [Neslišno študentski odziv] Nisem prepričan, če dejansko kaj narediš to. Mogoče sem narobe. To bi bilo zanimivo, če želite, da bi večjo težo od posebnih filtrov tako da jih potisnite rezultate v zvezi s tem filtrom do vrha. Ampak mi lahko kdo pove, kaj je tako posebnega na tej levi strani? Kako ste se tradicionalno poiskati let na internetne storitve pred tem? 

Da. >> [Neslišno študentski odziv] >> Lahko rečem, da - [Študent] Vsak prevoznik. >> Ja. Vsaka letalska družba ima svojo spletno stran. Ta združuje stvari. In? [Študent] Veste kaj, ko odhajaš. Veste kaj, ko odhajaš, vendar so povezani s filtri posebej. Naj potegnite navzgor kajak. Bog, pop-ups. Bad uporabniško izkušnjo. Kaj se zgodi, ko sem premakniti drsnik? [Študentskih] Samodejne posodobitve. >> [Ong] Samodejne posodobitve. To je nekaj, kar je zelo pomembno. Pred tem, ko boste želeli pogledati let, si moral dati v svoj vstopni lokaciji, tvoj izhod lokacijo, pritisnite Search, da bi proces, ki ter pokažite svoje rezultate. Če boste želeli spremeniti poizvedbo, bi morali pritisniti nazaj dvakrat vstop v novo poizvedbo iz nič, in potem to storiti znova in znova. Za lepo stvar o nečem, kot je to, ki jih uporablja zelo nerazumljiv] [stvar v sredini. Vsakič, ko kaj takega, da ustreli off zahtevo in vrne vam vse rezultate takoj. Ta vrsta takojšnjo povratno informacijo, da je nekaj, kar je KAJAK divje priljubljena zato, ker je enostavno za mene, da samo spremenite svojo poizvedbo in ugotoviti, stvari, ki so po določenem obsegu ne da bi morali iti naprej in nazaj, naprej in nazaj, naprej in nazaj. To so torej vse mogoče stvari, ki jih želite razmišljati o tem, ko ste oblikovanju vaše spletne strani. Kako lahko naredim, da je zelo učinkovito pri moji uporabniki, da gredo skozi, kar oni delajo na in da se k njihovi končni cilj, kakor hitro je to mogoče? [Malan] In s točko Jožefovi prej pa ni nujno, da uporabniki vedo, kaj hočejo, ki temelji na tisto, kar vi zdaj vem HTML in imate polja, radio gumbi, meniji, izberite vnosna polja in podobno, kako bi se izvajala pojem nabiranje začetni čas za polet? 

Katera od teh različnih mehanizmov vmesnika bi uporabili? Če ste samo vem, znesek HTML, ki je bil prej naučil in veš, vložki so izbirni gumbi, potrditvena polja, padec odpisi in vnosno polje, kakšna bi bila vaša naravna izbira je za obiranje bivanja? [Študent] vnosa. >> Vnosa. Ali morda celo s spustnim z vsemi datumi, kajne? Torej, z bolj zapletenimi mehanizmi uporabniškega vmesnika, kot je to na levi strani, ki jih lahko izvajajo, lahko bi bil ta proces bolj intuitivno z drsnikom ker čas je neprekinjeno, in ljudje ponavadi ne pomislim, da glede na diskretnih kose. V redu. Zadnja stvar. Deset uporabnosti hevristika. Vse tisto, kar smo govorili verjetno spadajo v eno od teh kategorij. Če greste na ta link, ki bodo objavljeni na spletu, spletne strani boste dejansko sposoben, kot ste design vaše spletne strani, da te hevristiko v mislih in ta pravila palca. Za svoje projekte, kaj jaz predlagam vam, da oblikujete svoje app bolje je storiti papirja prototipov prvi. Ko razmišljate o svoji vlogi, zelo hitro skico, kaj želite, da izgleda kot in poskrbite, vsa polja so razporejeni na način, ki je zelo intuitiven za uporabo uporabniku in celo pokažem papir prototipov s prijatelji in začeti fokusnih skupin. Samo dobil 2 ali 3 ljudi skupaj in jih prosili, naj preprosto dotaknete teh papirnih prototipov, in jim pokazati nove zaslone, da vidim, če jih dejansko razume, kaj se dogaja. 

Kaj želite storiti, je, da se jim nalogo, motivirati to nalogo in daj jim app in jim dovoliti, da ga uporabljajo. Ne dajejo navodil, ki presegajo. Hočeš, da dejansko pustili, da interakcijo z aplikacijo na način, ki omogoča prikaz kako bi jih lahko uporabljajo tudi, če ste bili ne stoji zraven njih. In to je zelo pomembno. To vam bo dala veliko spoznanj, da so ljudje dobili okrog določene stvari na način, ki jim nisem nameravajo? Ali so z uporabo posebnih mehanizmov uporabniškega vmesnika na zaslonu na način, ki je nekako Hacky? Nisem hotel, za njih, da to storite na ta način. In ko ste končali s tem, kaj želiš, da naredim? Vaš design kamenje, kajne? Kaj želite storiti, je, da želijo razvijati in naredite ta postopek znova. Torej, da pokažejo, da prijatelji, ko ste ga razvili, je test, razvijanje, testiranje, razvoj, testiranje, ponovitev, naprej in naprej in naprej. Dizajn je zelo iterativen proces v tem smislu. Vi dejansko morali zgraditi nekaj, nato pa spoznali stvari o njem da ni vedel, pred in iti nazaj in izboljšanje od tega. Zdaj pa, tako kot pri razvojnem delu, to je tisto, Tommy se dogaja, da vam pokažem po premoru in kako bi morali biti sposobni izvesti nekaj podobnega Samodokončaj na način, ki je dokaj preprost. [Malan] Kot določa Tommy tu gor, potem pa vprašanje. Veliko izmed prvih spletnih strani - in ko je Jožef rekel 1990 slog spletno stran, je bila izvedbe, kjer, če si hotel, da izberete začetni čas in končni čas, odkrito rečeno, nazaj v dan, in še na nekaterih spletnih straneh danes Tako vam je to izberete eno uro pred spustnem izberete minut od spustnem mogoče izbrati AM, PM, in potem narediš, da se 3-krat več. In tako s 6 klike in morda nekaj pomikati navzgor uporabniško dejansko lahko zagotovi neko datum in / ali časovni razpon v tem smislu. 

Torej, zagotovo ni optimalna, pa vendar tako daleč smo videli nobenih izrazne sposobnosti v katerem koli jeziku, smo si ogledali nekaj narediti bolj seksi kot je ta drsnik na čas začetka in konca časa. Ampak, če mislite, da nazaj v tednu 0, ko smo se pogovarjali o Scratch, Tudi tam ni bilo pripomočki, ki so pravkar naredil določene stvari. Si res samo osnove, kot so te zanke pogoji in podobno. Tako nekako samo razmišljanje zelo abstraktno zdaj, ne glede na podatke o HTML, Kaj se v resnici dogaja nekaj podobnega časa začetka in konca drsnik časa? Ko sem premakniti miško in kliknem na ta znak malo korenja na levi in začeti vleče, programsko, kaj je to želite biti sposoben izvajati da bi se to zgodilo? Katera vprašanja, kaj logični izrazi želiš, da bi lahko vprašam? Kaj se v resnici dogaja? Sammy? [Študent] Kje je položaj kazalca? Dobro >>. Če je položaj kazalca? To je nekaj, kar smo potrebovali, da izrazijo nazaj Scratch, ali je bila na podlagi lokacije ali celo barvo ali podobnega. Morda se kdaj spomni, da na kratko v ponedeljek, je bilo vse to se imenuje dogodki v svetu na spletu, tako da je stvari, kot onclick in onkeypress in onkeyup in onmouseover in onmouseout. Torej zavedati, da so tudi te stvari, ki smo jih bili pri tem samoumevno na spletu s strani kot so Facebook in Gmail, tudi če nimajo pojma kako bi lahko izvajala, ker ni nič všeč niti na predavanju ali Problem nastavite 7, zavedati, da s temi točno istem temeljih, s HTTP in parametrov in GET in POST, z osnovnimi HTML vložke, ki smo pogledal na doslej in v trenutku s programskimi mehanizmi, ki Tommy je nameraval uvesti lahko začnete, da izrazi sebe, tako kot si storil v tednu 0 z zelo intuitivno povleci in spusti. 

Torej s tem je dejal, Tommy MacWilliam in nekaj novih kosov sestavljanke, za nas, za splet. V redu. Moje ime je Tommy in bom lahko govoril JavaScript. Samo disclaimer: jaz sem mnenja, da je JavaScript je najboljši programski jezik V celotnega sveta. Obstaja veliko ljudi, ki se ne strinjajo z mano, ampak to je neverjetno. Ko greš nazaj v C, če moraš napisati C za drugo vrsto ali nekaterih drugih jezikih, to je samo res frustrirajuće v vseh nizki ravni podrobnosti, ki ste jih dobili bogged noter Torej, če ste že kdaj občutek žalosti, kako nadležno je, da napišete C, pojdi nazaj, napisati nekaj, JavaScript. To je nirvana. Počutili se boste veliko bolje o vašem slab dan. Veliko čarobno JavaScript izhaja iz njene sposobnosti, da manipulira stvari ki so že na strani. Ko smo zapisali naše skripte PHP, so bili izvaja na strežniku, in navsezadnje, da PHP skripta verjetno oddajala nekaj HTML. Ta HTML je bilo poslano stranki, nato pa, da je bilo to. Če PHP želel dodati gumb na strani, na primer, ne morem storiti. Morala bi postala popolnoma novo datoteko HTML, in pošlje da v brskalniku. Z JavaScriptom vemo, da bomo lahko posodobite stvari, medtem ko oni so že na strani, in zaradi tega lahko nudimo veliko več takojšnjo povratno informacijo, ki bo resnično izboljšanje uporabniške izkušnje na naši spletni strani. Samo hitro Rekapitulacija selektorjev JavaScript. Vemo, da ko naložite stran HTML, da se dogaja, da je treba v DOM. 

DOM zapomni si le to veliko drevo, kjer so elementi povezani v tej veliki hierarhiji. Ko smo delali z bazami podatkov v pset 7, ena od prvih stvari, ki jih potreboval, da vem, kako to storiti je zbirko podatkov. Imamo to veliko uporabnikov mizo, včasih pa samo želim povedati, "Želim samo nekatere od teh uporabnikov, ki ustrezajo nekaj pogojev." Podobno je, ko imamo DOM moramo na nek način to iskanje. Potrebujemo nek način rekel, "Hočem vse gumbe, ki so videti takole "Ali vse slike na stran." In ti selektorji nam omogočajo, da to storim. Torej, samo hitro Rekapitulacija. Ta prva tu, to # predloži, kaj je, da gre za izbiro? Ali kdo spomnite? [Neslišno študentski odziv] >> Ja, točno. To se dogaja, da izberete element na strani, ki ima ID oddajte. In da hash tag pravi, da je selektor bo delo z ID. Kaj pa druga, ta sredina,. Kaj bo, da izberete? Ja. >> [Študent] Razred. >> Točno tako. To se zdaj dogaja, da izberete glede na razred. Razlika med ID in razred tu je običajno ID mora biti enoličen v prostor, kar iščete več. Torej, če ste iskali nad celotno spletno stran, res bi morali imeti 1 element s tem določene ID-ja, tako da v tem primeru predložiti. V razredih, na drugi strani pa imamo več kot 1 element na isti strani z istega razreda. To bi lahko bilo koristno, pravi hočem, da izberete vse, kar je osredotočen na strani namesto samo 1 stvar. 

In končno, ta zadnja tukaj je malo bolj zapletena, ampak kaj se bo to eno od DOM? [Neslišno študentski odziv] >> Kaj je to? [Študent] Vse to oznako. >> Imamo 2 delov tukaj. Drugi del je reči hočem, da izberete te oznake z oznako vnosa, tako da je vsak element, ki je input tag. Ampak jaz ne želim samo izbrati vse vložke ker bi nekaj podobnega na gumb submit biti vhod in bi lahko nekaj podobnega polje z besedilom je vhod. Torej s tem oklepaju Pravim le izbrati tiste elemente da so besedila tipa. Nekje v moji HTML oznake imam atribut z imenom vrste, in vrednost tega atributa mora biti besedilo. Torej, kako o tem prvem delu sem? Prva beseda, to je izbiro oblike potem imam presledek in nato še ta vložek dela. Kaj to storiti, s čimer je v obliki pred njim? To bo v bistvu omejuje našo poizvedbo. To bi se lahko zgodilo, da imamo nekaj vhodov na strani da niso potomci obliki. Kaj bo to storiti, je, da bo to povedati želim le vstopne oznake, ki imajo nekje nad njimi nekateri starši element obrazca. In tako se na ta način bomo lahko te bolj hierarhične poizvedbe da ne bomo samo še izbrati vse ustrezne določen selektor. Mi lahko nekako omejiti obseg te poizvedbe na nekaj drugega. Torej, zdaj, ko vemo, kako izbrati elementov na strani, kaj je govoril nekaj o AJAX. AJAX je še vedno zelo popularen kratica, ki stoji za asinhroni JavaScript in XML. Samo tako se zgodi, da XML je samo nek način predstaviti podatke. 

Takšen izgubil priljubljenost v zadnjem času, tako da je X v AJAX ne uporablja ves čas. V bistvu, kaj AJAX nam omogoča narediti je, da zahteve HTTP iz konteksta JavaScript. Ko smo v naši spletni brskalnik in smo krmarjenje po straneh in se s klikom na povezavo, kaj je naš brskalnik bo narediti je, da HTTP zahtevo glede povezave kliknemo. Ampak to ni vedno idealna, saj če je temu tako, potem je David rekel, smo vedno morali uporabniki klikniti gumb predloži ali s klikom na povezavo da bi se kaj zgodi, da se dogaja, da vključujejo zahtevo HTTP. Torej, z AJAX bomo lahko te zahteve v imenu JavaScript. To pomeni, da ko uporabnik komunicira s stranjo, ali kaj se zgodi, bomo lahko dejansko tudi programski zahtevo neke druge datoteke PHP na naši spletni strani ali karkoli drugega in pridobivanje podatkov, da ta spis izpljune. Oglejmo si na primer AJAX. To je naša CS50 Finance stran, s katero upam, da nekateri od nas že poznajo. Če pogledamo HTML tej strani vidimo tukaj, da sem dodal nekaj stvari, 1, ki sem jih dal tej obliki ID-ja. Rekel sem id = "Obrazec-quote". Jaz sem to naredil samo zato, ker se dogaja, da bi to malo lažje, da izberete DOM saj sem ti zelo preprosto vprašanje. Kaj želim storiti, je tukaj želim popraviti nekatere težave z CS50 finance. Torej, če gremo na finance.cs50.net, vsakič, ko hočem, da bi dobili ponudbo, moram kliknite ta gumb Get citat, in da Get Quote potem me popelje v drugo celo stran. In če želim še eno ponudbo, moram zadeti gumb Nazaj, potem pa sem ga vnesite v, Sem dobil ponudbo, in sem udaril gumb Nazaj. To res ni najboljša uporabniška izkušnja. Kdo bi dejansko uporabljajo spletno stran, če je to tako počasi, da se cene delnic? Torej, kaj želimo storiti z AJAX je odstraniti ta korak, da bi šel na ločeno stran Za ogled rezultatov. 

Kaj smo res samo zahtevamo, je, da je res majhna cena, in da je samo zelo majhno količino podatkov. Torej ni potrebe za mene, da gredo še celo HTML strani, prenesete celotno novo serijo HTML, mogoče prenesti še nekaj slik, nekatere druge datoteke CSS samo za mene, da odgovor na to zelo preprosto vprašanje , koliko pa ta stalež stroškov. Z AJAX lahko naredimo to veliko lažje. Vidimo tukaj, da sem povezavo na datoteko, imenovano quote.js JavaScript. Naj se dejansko odpre to datoteko. Ne obstaja. Vse moje datoteke JavaScripta se bodo nahaja v HTML tako da lahko spletni brskalnik dostop. Potem imamo poseben imenik tukaj za JavaScript, in tukaj je zdaj quote.js. Na vrhu te datoteke je to tukaj piše, da želim čakati na celotno stran je naložen preden sem poskusil narediti ničesar. Zakaj je to potrebno? Izkazalo se je, da je naslednja stvar, bom tukaj storiti, je začetek išče elementa , ki se ujema nekaj selektor. Če je to Javascript vedno izvajajo, preden se ta element naložen na strani, potem pa vse, kar sem poskušal narediti je, da ne bo šlo ker bom poskusil, da izberete nekaj, kar je še tam. Torej, ta line up vrhu pravi, da želim si počakati, da se naloži vse zato smo zagotoviti, da so vsi elementi iščem so dejansko na strani. Ta znak za dolar tukaj pomeni, da sem uporabo knjižnice imenuje jQuery. Ta jQuery knjižnico nam omogoča, da uporabljajo te izbirnike, ki smo ga pravkar pogledal. Z besedami $, nato potujejo kot argument tega obrazca #-citat, Zdaj sem izbiro, da obrazec, ki smo ga pravkar si ogledal. Zdaj imam predstavitev te oblike v spomin nekako. 

Na tem objektu se zdaj ta predstavitev v obliki, Zdaj sem uporabo funkcije pozval. Kaj je ta funkcija pa je, da se bo priložiti za obravnavo dogodkov. V primeru, da bomo poslušal je dogodek, trdijo. Torej, ko uporabnik klikne gumb Pošlji, da ali pritisne Enter, Ta dogodek se bo na ogenj. Z spotikanje v to, lahko sedaj prepiše privzeto vedenje obrazca. Brez te JavaScript, bi obrazec predloži karkoli PHP datoteke smo v tem akcijskem atribut. Toda namesto, da sem zdaj rekel, čakaj, čakaj, čakaj, ne želim si, da bi dejansko storiti. Rada bi se to zgodilo, preden greš in poskusite, da predloži nekatere datoteke PHP. Zdaj, kaj hočem narediti? Na tem mestu želim uporabiti AJAX nekako naložiti v kakšni ceni staleža. Prva stvar, ki jo morate vedeti je, kaj parka uporabnik išče navzgor. Če želite to narediti, da bom uporabila drugo izbiro. To je tretji selektor smo si ogledali prej. Ta pravi, da želim, da začnete to obliko element z ID-jem obliko-ponudbo. Potem pa nekje v notranjosti tega obrazca mora obstajati vložek element , ki ima ime simbola. Če se ozremo na našo HTML, smo videli, da smo imeli prispevke [ime = symbol]. To pomeni, da se to dogaja, da izberete besedilno polje, da uporabnik piše v. To je lepo. Imamo polje z besedilom. Zdaj smo samo vedeti, kaj je v njej. Za to lahko rečemo to metodo sem, to. Val, in ta pravi, da vem, kaj imate polje z besedilom. Hočem, da mi poveš, kaj je uporabnik vnesli v to polje z besedilom. Zdaj imamo niz, imenovano simbol, ki je enaka ne glede uporabnik vtipka To je lepo. Mi lahko uporabite, da se niz zdaj, da bi naše zahteve. To je nova funkcija, tukaj, ta $, razen bova več ne bo treba izbiro elementov, bomo lahko pokličete drugo funkcijo, ki je, ki nam jih jQuery. Ta funkcija je AJAX, kaj se dejansko dogaja, da te zahteve HTTP. Zato moramo to povedati nekaj stvari. Prva stvar, ki jo moram povedati to funkcijo je, če hočem, da zahteva, da gredo. Nekje v mojem projektu imam to sliko notranjosti HTML mapi quote.php. Ne morem dostopati do te datoteke, bomo videli, tako kot je to, če grem na localhost / quote.php. 

Hočem JavaScript, da za to zahtevo strani. Kakšne vrste zahtevo zdaj? Videli smo, da je pred obliko, je ta način = "post" atributa, in to pomeni, da se dogaja, da bi zahteve POST, tako da ne bo dal nič v URL, namesto GET zahtevo, ki bi samo odpustil, če bi le pogledali stran s spletnim brskalnikom, na primer. Zdaj sva rekla, da želim, da bi zahtevek HTTP POST na stran, ki se nahaja na quote.php. Ko smo poslali obrazec, ne pozabite, da lahko dostopate do vhodnih elementov znotraj tega obrazca s tem $ _POST spremenljivko. Do sedaj je v zgodbi smo dejansko poslali skupaj z vsemi podatki, še ni. Pravkar smo rekli, da delaš zahtevek AJAX in tukaj je vrsta zahteve delamo. Zdaj moramo dejansko poslali nekaj podatkov na strani. Če želite to narediti, da lahko uporabite to lastnost, imenovano podatkov. Vrednost tega premoženja je dejansko asociativno polje. Razlog za to je, da nam pošljete več kot le 1 kos podatkov. Zato moramo te zavite oklepaje tukaj ugnezdeni znotraj teh drugih zavitih oklepajih. Tipke v teh asociativnih poljih se bo ista stvar kot so ime, atribute v naših obliki elementov. To pomeni, da če bom poslal po ključu simbolom, to pomeni, da se moje PHP stran lahko dostopajo do teh podatkov z $ _POST [Symbol] tako kot smo že naredili, ko smo se predloži obrazec. In zdaj so dejanski podatki, želimo poslati se bo vrednost znotraj tega asociativni array. 

Mi shrani to besedilo v spremenljivko, imenovano simbol, zato vam pošiljamo skupaj zdaj ključ za simbol in vrednost, kar si vtipka Zdaj smo naredili to zahtevo HTTP, naša PHP datoteko bil izveden, in to se dogaja, da pošljete nekaj podatkov nazaj, zdaj za stranko, ki pravkar ustvarili to zahtevo. Zdaj moramo odzvati na kateri koli strežnik je dejal, da nas. Za to imamo to zadnjo lastnost tukaj imenujejo uspeh. Vrednost tega uspeha ključu se dejansko dogaja, da je funkcija in to je eden od res kul stvari, ki jih lahko naredite z JavaScriptom. Ne samo, da lahko imate ints ali zaporedja kot vrednost notranji strani asociativni array, lahko imajo tudi funkcijo. Torej z besedami, uspeh, to je moj ključ. Dvopičje piše tukaj prihaja vrednosti, in zdaj je vrednost to je pravzaprav funkcija. Tako nam ni treba, da je ta funkcija ime po sebi. Lahko samo rečem to se dogaja, da se nekatere funkcije. To bo trajalo 1 argument. Argument za to funkcijo se bo ne glede na strežnik nam je poslal nazaj od zahteve. Tako kot takrat, ko smo brskalnik zaprosi, strežnik pošlje nekaj nazaj in brskalnik prikaže, v okviru AJAX smo le na zahtevo, je poslal nekaj nazaj, in zdaj smo, da je predstavljen kot niz. S tem nizu bi rad, da se prikaže, da so na strani. Če želite to narediti, da bom še eno zadnjo izbiro. Želim, da izberete element z ID ceno. To je samo prazen div, ki sem jih ustvaril na strani, in rad bi določila vsebino tega div, da se ne glede na strežnik nam je poslal nazaj. Sem dejansko spremenil quote.php malo. 

Namesto da bi omet in postanejo nekaj strani, quote.php zdaj preprosto bo izpisal vrednost zalog kot niz. Torej, če ste bili, da dejansko obiščete stran, boste videli, da je majhen niz ne glede na borzna cena je. Še zadnja stvar, ki jo morate storiti, je tu le poskrbite, da ta funkcija vrne false. Kaj to pove, da če sem v notranjosti za obravnavo dogodkov in da je dogodek trener vrne false namesto vračanja res, to pomeni, da ne želim prvotni dogodek na ogenj. V tem primeru, če ne bi imeli nobenega JavaScript in smo poslali obrazec, naš spletni brskalnik bo rekel: "Jaz bom poslal te podatke, skupaj" in da ti bomo poslali na drugo stran. Ker smo z uporabo AJAX zdaj, ni treba poslati uporabnika na drugo stran. Mi smo le, da bo prikaz rezultatov dinamično na isti strani. Mi res ne želite, da bi šel kamorkoli, in želim, da ostanete na isti strani. Torej, da ga vrne false, moramo zagotoviti, da se oblika ne naredi za nas. Oglejmo si, kaj to dejansko izgleda. Naše quote strani videti enako. Naj dvigni inšpektorja tukaj, da bomo lahko videli, kaj se dogaja. Naj bo malo manj velik. Ne pozabite, če bomo odprli zavihek Network, to je, če smo lahko videli vse zahteve HTTP , ki se dogajajo na strani. 

Za simbolom mi tip v AAPL in kliknite Pridobi ponudbo. Zdaj smo videli, da je delež Apple stane nekaj več dolarjev le pojavil na strani, vendar URL ni spremenilo. Dejstvo je, tukaj je HTTP zahtevo, da smo pravkar. Naredili smo POST zahtevek quote.php. To ima smisel. To je tisto, kar nas je strežnik poslal nazaj. To ni več to velikanski HTML dokument s sliko in stvari, kot je ta, to je samo vrstico besedila, nato pa sva se prikaže vrstico besedila. Če gremo nazaj na glavo in videti, kaj smo dejansko poslali znotraj tega HTTP zahtevo, lahko vidimo tukaj, da pošlje skupaj s ključem simbol in vrednost AAPL, , ki je tisto, kar uporabnik vtipka To je lepo, vendar je še vedno malo siten. Še vedno imam, da kliknete na ta gumb, da bi dobili osnovno ponudbo. Mi smo zaposleni ljudje in nimamo časa, da kliknete gumbe. Google spoznal, nekaj časa nazaj, ko so izvajale Google Dinamično. Kaj počne Google Instant je, kot ste vnesli to šele začne prikazovati rezultate za vas tako da vam ni treba skrbeti, tudi tako, da kliknete Išči. Pravzaprav zabavno zgodbo v zvezi s tem. Ko Google Instant prišel ven, ljudje so bili kot, "Vau, to je super neverjetno." "To je tako kul." In študent navzdol na Stanfordu, ki je bil 19 v času na to mesto imenovan YouTube trenutek. Vse Instant YouTube pa je učinkovito iskanje YouTube takoj. Torej, namesto da bi šel na YouTube.com in zadeti iskanja, Ko začnem tipkati v Instant nekaj YouTube kot CS50, smo lahko tukaj vidimo, da se poskuša s počasno internetno povezavo zapolnijo ti rezultati v živo. Da bi to lahko dejansko narediti zelo preprosto spremembo na našo datoteko quote.js. Zdaj smo pritrditev na ta dogodek, ko se predloži obrazec. Mi v resnici ne želijo, da bi uporabnik predloži obrazec, da več, tako da je namesto ogenj ta dogodek vsakič, ko uporabnik pritisne tipko. Za to lets 'najprej spremeniti dogodek iz predloži keyup. To pomeni, da namesto čakanja, da predloži obrazec, vsakič, ko pritisnete tipko, kaj se bo zgodilo. To ni več smiselno, da priložite ta keyup dogodek za celotno obliko. Smo res samo skrbi to polje za iskanje. 

Če želite izbrati, da zdaj, bomo lahko spremenili, da je to, ne pa obliko-kotacija, Obrazec-quote in bomo imeli moč (tip = besedilo) ali pa lahko rečemo (ime = simbol) - kar hočemo. Zdaj je zadnja stvar, kar moramo storiti. Se spomniš, ko smo tukaj dejal, vrne false smo rekli, da ne želimo, da neplačila na ogenj. Vendar je prav tako se zgodi, da če bomo onemogočili, da je zdaj, kar vpišemo v ne bo prikazal v brskalniku več ker bi bilo to privzeto vedenje vnesete v polje z besedilom. Mi ne želimo, da preglasijo, tako da je uničiti to vračanje napačen. Če želimo rešiti da in osvežite stran, zdaj, ko sem se začel tipkati AAPL boste videli, da cena delnice na dnu je samodejno dokončanje. Torej, tukaj je CS50 Finance Instant. Pravzaprav zabavno zgodbo o YouTube Instant je, da študent le nekako ga je napisal kot 1-nočno projekta, in naslednji dan so mu ponudili delo z YouTube direktorja. Tako preprosto je to, da CS50 študenti lahko vaš končni projekti dobili delo na YouTube. Nekaj ​​takega je res super ideja za končni projekt, kajne? Imeli smo nekaj obstoječih funkcionalnosti, ki smo želeli povezati z. Mi izboljšati uporabniško izkušnjo malo, in nenadoma bi iskali nekaj na YouTube Instant bilo veliko lažje kot iskanje za to na redni YouTube. Torej, to je AJAX na kratko. 

V primerih, da je Joseph kažejo, smo videli veliko autocompletes, in ti autocompletes so zelo, zelo priročen, saj nam ni treba zapomniti - Na primer, če se ne spomnite na ceno delnic za Apple in smo samo vedeti, da je aa nekaj, namesto da bi samo rekel, da mi, "Delež to stvar stane toliko denarja," Jaz bi nekako rad vedel, kaj zaloge začeli z AA. To lahko storimo, da res lepo s Bootstrap knjižnico, ki je že vključen Notranjost CS50 finance. Če ste prišli sem, da bi oznake JavaScript in navzdol za Typeahead, to je samo lep plugin, da je nekdo že napisal za nas, in bomo lahko z lahkoto uporabi svojo funkcijo, kot je ta. Jaz ga vnesli v in tukaj je seznam nekaterih držav, ki se začnejo z A Recimo, da mislim, da je to res kul in da je čas, da tudi ta na moji strani. Izkazalo se je, da je to zelo, zelo preprost. Naj skok čez tukaj za quote3.js. Moja slika izgleda malo drugače. Tu spodaj vse moje stvari AJAX je isto. Želim, da naložite zaloge podatke, ne da bi morali iti na drugo stran. Ampak zdaj želim uporabljati ta vtičnik. The Bootstrap dokumentacija ima odlične primere, kako točno lahko to storim. Hočem reči, "Tukaj je vhod, ki ga želim Samodokončaj« in jaz bom poklical to funkcijo imenovan typeahead, in da se bo ravnanje z vso Typeahead stvari za nas. To bo inicializacijo seznam, bo to vse naše filtriranje. Edino, kar mora vedeti, je, katere podatke bomo autocompleting naprej. Tako sem ugotovil to tipko samo z branjem dokumentacije in si ogleduje primerov. Če sem dal to tipko vira, vrednost tega ključa je le nekaj množica stvari želim Samodokončaj. Ta spremenljivka je iz te druge datoteke. Sem odprla symbols.js. 

To symbols.js je le to res, res velik niz, ki vsebuje nize vseh teh zalog simbolov iz NASDAQ. Če želim, da vrnitev na HTML, tako jharvard, vhosts, globalhost, HTML, predloge, quote_form. Ker pa to zdaj imenuje quote3.js, naj spremeni datoteko JavaScript sem tukaj, vključno. Zdaj imam quote3.js, tako da bom mogoče naložiti v tej posebni datoteki JavaScript, tisti, ki ima to Samopodizanje Samodokončaj. Zdaj, ko sem skočil nazaj v brskalniku, osvežite stran, in sem začel tipkati AA, tukaj je moj samodokončanje. In res je bilo tako enostavno, kot to. Imel sem 1 vrstico kode, ki so pravkar rekel: »Tukaj so stvari, ki jih želim Samodokončaj« in nenadoma sem to res, res lepo funkcionalnost ne celo veliko truda sploh. Ker ste v razvoju spletnih strani in predvsem sprednji konec strani stvari, boste našli to je tako veliko. Obstaja veliko, veliko, veliko res kul proste knjižnice tam da bi bilo super enostavno narediti stvari, kot je ta. Ali lahko kdo misli o vseh slabih preprosto autocompleting na tem velikem seznamu simbolov? Kaj bi lahko bilo nekaj, kar ni najboljši pri tem pristopu? Ja. >> [Študent] Čas, če imate veliko [neslišno] Ja. Zdaj smo prenos te ogromne JavaScript datoteko in tam je veliko simbolov. In tako, če imamo tone stvari, to lahko nekako poveča latence ne samo iskanje ampak tudi prenos dejansko datoteko. Čudovito. Še kaj? Zdaj ni pravi občutek pomembnosti. Če vpišem v A, družbe, ki kažejo gor morda ni najbolj priljubljeni podjetij, ki se začnejo z A 

Preden sem dobil za Apple pa bo trajalo še nekaj znakov, da bi našli tisto, kar sem iskal. Ta autocomplete nima tega občutka pomembnosti. To je samo hotel reči: »Vse, kar se ujema bom prikazati." Namesto, da bi rad nekako vključiti nekatere pomembne v svojih iskanjih. Če grem tja Finance Yahoo!, finance.yahoo.com, Če poskušam vnesti simbol na strani Yahoo! Finance je in začnem tipkati GOOG, imam lepo seznam stvari. Jasno je, da izgleda, Yahoo! Finance počne kaj bolj pameten tukaj. Imajo sicer pomembne, imajo pa tudi dodatne informacije kot je ime parka. To je nekaj, kar ne morem priti le z mojega seznama zalogi simbolov. Hočem, zato bom vzel. Za to Naredimo nekaj stvari. Naj najprej odpreti do inšpektorja na tej strani zato, ker smo videli, da ta stran ni natovarjanje na vse, tako da je verjetno z uporabo AJAX nekako se nakladanje svoje podatke. Mi lahko ugotovite, kateri podatki se je nakladanje. Če kliknem na ta omrežja kartici, se ti bo vse zahteve, ki se začnejo za kurjenje. Zdaj, če sem tip v goo, lahko vidimo, da sem dobil novo zahtevo HTTP. To je verjetno, da so podatki, kjer prihaja. Seveda dovolj, če gledam na tem URL-ju, ki je malce nenavadno ime, lahko vidimo, da je to točno tam, kjer Yahoo pošilja izven svoje podatke. 

Sem ustvaril ločeno datoteko z imenom suggest.php, ki je zelo podobna v duhu na iskanje funkcijo. To je v bistvu dogaja, da poizvedbo URL Yahoo, nazaj nekaj podatkov, in ga pošlje nazaj k meni. Zdaj, namesto da bi z uporabo tega velik, ogromen seznam simbolov, Lahko uporabite lepe relevantne Yahoo stvari, in mi ni treba prenesti, da veliko datoteko JavaScript. Jaz sem le, da bo podirajo se dejansko ustrezne simbole parka. Naj skok v to. Torej, html, js. Mi smo zdaj v quote4. Zdaj smo ne uporabljate več, da je velik seznam datotek, JavaScript. Ampak tam je majhen težavi projektiranja tukaj. Mi smo rekli, da je v AJAX asinhrono. Kaj to pomeni, da ko naredim zahtevo AJAX, tako da tukaj na liniji 8, to je, če je moja AJAX zahteva dejansko odpustili. Recimo, da zdaj imam kodo tukaj, da bo naredil nekaj stvari rad opozori uporabnika ali nekaj spremeniti na strani. Kaj se ne bo zgodilo, je brskalnik ne bo treba čakati na to zahtevo še naprej Pred spušča in hitting to vrstico. To je asinhrona del. To se dogaja, da bi to zahtevo in rekel: "Ko končate, "Vrnil in poklical te funkcije, ki sem ti rekel, da pokličete znotraj uspeh." To pomeni, da ne moremo preprosto prenesti vse zaloge vnaprej. Moramo, da bo zahtevo in počakajte nekaj, da se vrne. To pomeni, da prej, bi lahko preprosto povedati Bootstrapa, "Tukaj je seznam stvari, hočem, da Samodokončaj«. Ne moremo več narediti več, ker ne vemo, kaj želimo dejansko Samodokončaj. Na srečo, Bootstrap pomislil na to, ker ti so pametni fantje tam, in dejansko nam je dal še en način, da se bremena te Typeahead vtičnik. Preden se je vrednost tega vira premoženja je le ta velika množica stvari Samodokončaj. 

Sedaj vir lastnina je pravzaprav funkcija, in namen te naloge je, da ugotovimo, kaj so stvari za Samodokončaj so. Tako da se bo to ugotovil, je da se bo vprašati Yahoo! Finance kaj so najboljše stvari v funkciji za samodokončanje so. Če želite to narediti, da bom lahko zelo podobno zahtevo AJAX. Grem zahteva ta stran na suggest.php. Želim poslati skupaj s simboli miru. In zdaj moj uspeh, Bootstrap dokumentacija mi je povedal, da je za zapolnijo ta seznam stvari, vse, kar morate storiti, je minil v tem polju zdaj na povratni klic funkcije. Toda počakaj malo. Če naj bi to polje in AJAX me pošilja nazaj besedilo, Kako je to mogoče? Ta uvaja nov način izmenjave podatkov, imenovane JSON. V tem primeru ne bomo samo poslati nazaj preprosto niz besedila. Zdaj imamo opravka s tem bolj zapleten seznam kratic delnic. Te zaloge simboli lahko vključuje tudi stvari, kot so imena podjetja ali trenutnih cenah. Samo z veliko dolg niz, ki je ni oblikovano v nobenem predvidljiv način ne bo najboljši način, da bi dobili te podatke od strežnika Yahoo me na način, da sem lahko z lahkoto. JSON je tehnologija, ki izkorišča to, kako bomo ustvarili asociativne nize v JavaScript. To izgleda veliko kot na asociativno paleto JavaScript, in v resnici, je to zato, ker je. JSON je kratica za Object Notation JavaScript. To je v bistvu dogovorjeni obliki za prenos podatkov naprej in nazaj. Tukaj je ta predmet JSON ali to JSON asociativno polje se mi pošljete nekaj podatkov o tečaju. 

Tipke tem polju so stvari, kot pot, ki ima vrednost cs50, in tukaj lahko vidimo, da lahko dobim vrednost, ki je matrika. Nimam narediti stvari, kot izloči nizov in si za vejicami in naredil nore stvari, kot je ta. Ker je to vpisano v tej obliki JSON, JavaScript in jQuery že funkcije za pretvorbo niza Izgleda, da je to JSON v dejanski asociativnega niza JavaScript da lahko sodelujemo. S tem, da je tako enostavno, kot pravim, da ni več, je ta datoteka, suggest.php, me poslali nazaj le niz besedila, vendar vem, da se dogaja, da se me pošlje nazaj JSON. To pomeni, da je mogoče, da JSON pretvori v povezovalne matrike JavaScript. In tako jQuery, bi rad, da narediš to zame. To pomeni, da je ta parameter odgovora tukaj, To ni več le niz. Ker smo povedali, da jQuery prihaja nekaj JSON, jQuery bo dovolj pameten, da reči, "Želeli JSON?" "Jaz bom za pretvorbo, ki je v asociativni niz za vas." Kaj je dejansko si oglejte na omrežno kartico, ko imamo quote4.js. Mi bomo to spremenili, in ponovno naložite stran. Zdaj bom, da tip v-znova. Naredil sem nekaj prošenj za suggest.php, zdaj pa je to odgovor, ne le v nizu, je JSON. Torej imam odprt kodraste opornico rekel: "Tukaj prihaja asociativno polje." 

Prvi in ​​edini ključ te povezovalne matrike se imenuje simboli, in potem je tukaj množica vseh ustreznih simbolov Zdaj prihajajo iz Yahoo! Finance, ne pa iz tega velikanskega seznama. Tako lahko enostavno zapolnijo ta autocomplete plugin z nekaterimi podatki, ki se niso šolali v lokalni datoteki, ki je že vnaprej ampak nekaj drugega. Izkazalo se je, da lahko dejansko izkoristijo tehnologije, imenovane JSONP, ali JSON s polnilom, da bo odpravila te suggest.php posrednik. Toda namesto da delaš, kaj je namesto tega si oglejte, kako je mogoče izboljšati to še toliko bolj. Res mi je všeč Bootstrap je Typeahead. To je res lepo. Vendar pa smo dobili dober v JavaScriptu in želimo, da nekako to sami, Mogoče si oglejte, kaj bi to lahko počel vtičnik. Naj se ne bodo več uporabljali, da Typeahead stvar, in kaj je prizadeval, da bi ta seznam predlaganih zalog sami. Tu v quote6.php bomo začeli na enak način. Vsakič, ko nekdo vrste nekaj, kar smo želeli, da bi zahtevek AJAX. To je podobno kot naš prvotni CS50 Instant finance. Namesto da vloži zahtevo za quote.php, smo zdaj vloži zahtevo za iste datoteke kot prej, to suggest.php, ki je le, da bo potegnite podatke iz Yahoo! Finance. 

Spet smo še vedno pričakujemo JSON, vendar pa sedaj, saj Typeahead ni to za nas, moramo poslati po vrednosti, ki je znotraj sedanje polju. Zdaj vemo, kaj vprašati Yahoo! Finance za, in sedaj tukaj je naloga, ki ga želimo izvesti enkrat na zahtevo konča. Nimamo vtičnik, da seznam za nas, tako da tukaj kjer smo dejansko dogaja za izgradnjo seznam predlogov. Da bi to dosegli, podobno kot v PHP, smo sestavljenim te velike nize HTML potem smo jih natisnejo, lahko naredimo točno isto stvar JavaScript. Najprej bomo začeli ta niz se imenuje predlogov, in ta niz je le, da bo vsebovati HTML. Želimo, da je seznam stvari, tako da bomo začeli s to oznako seznam, in zdaj bomo ponoviti čez vse simbole, ki so se vrnili nazaj k nam. Ne pozabite, saj smo že rekel datatype: "JSON", to ni niz. To je že zaporedje pri nas. To je res kul. Mi lahko preprosto reči: "Želim, da priložite seznam element." Bomo pa je v elementu je na strani, da bomo izročiti to razred predlogov, da bomo vedeli, kaj je, in tukaj je zdaj simbol, da smo prišli iz Yahoo! Finance. 

Ko smo ustvarili element vsakega od znakov, ki smo jih nazaj gotten, hočemo samo zapreti seznam. Torej, zdaj predlogov predstavlja ta mali košček HTML da, kadar se odpravlja na strani, se bo seznam stvari, ki jih iščemo. Zdaj pa je dejansko dal to na strani. Če želite to narediti, da sem dejansko ustvaril še eno prazno div in sem mu dala ID predlogov. Podobno kot smo si zastavili vsebino div, ki bi prikazujejo ceno podatke o stanjih, sedaj samo želim, da določi vsebino tega div, da ne glede na to niz je ki vsebuje te simbole. Z uporabo te metode, HTML, to predlogov spremenljivka, ta niz je niz HTML. Želim si, da to HTML-ja in ga znotraj div imenom predloge. Pravkar smo priloženo nekaj DOM zdaj. Dodali smo nekaj novih elementov v Domu, da lahko zdaj prikazati na strani. Pa poglejmo, kako izgleda. Če bomo naložili na quote6 in zdaj smo prišli nazaj, Zdaj, ko sem začel tipkati AAPL, nimamo več, da Bootstrapa autocomplete, vendar imamo zdaj ta seznam, ki smo si jih naredil. To je malo grši kot Bootstrap Typeahead, na primer, vendar pa nam omogočajo, da narediti še eno stvar. Ko smo si ogleduje ta Bootstrap plugin, smo videli, da ko smo autocompleted, eden za samodokončanje vrednosti je AAPL. To morda ne bo tako v pomoč. Kot uporabnik ne bi takoj prepoznali vse zaloge simbolov. Kaj sem bolj verjetno, da priznajo, so družbe dejanska imena. Torej ne bi bilo zelo koristno, če ne pravim AAPL to je rekel nekaj podobnega Apple Inc Ker smo to zapakirano sebe, smo lahko res enostavno narediti. Naj odpre svojo zadnjo datoteko quote tukaj, tako da quote7. 

Ista stvar. Pravkar sem ustvaril novo datoteko PHP, da bo poslal k nam več kot le simboli. To bo tudi nam nazaj družbe imen. In tako delamo isto stvar. Mi smo vložitev prošnje AJAX. Ko je bila zahteva izpolnjena, bomo za izvedbo te funkcije tukaj, in ta funkcija bo zgraditi velik niz elementov. Vendar pa je razlika v tem, da je vrednost teh seznamih ni več samo simbol, to je zdaj ime. Torej imamo en majhen problem. Ko bomo uporabili naš lookup, moramo nekako dajati simbol. Ne moremo mimo iskanje nekaj podobnega Microsoft Corporation. Moramo opraviti to MSFT. Ko smo pišete HTML, imamo veliko lepih vgrajenih lastnosti. Morda povezano z njo href ali razred. Toda tisto, kar resnično potrebujemo, je za vsako od teh povezav da imajo zaloge simbol povezan z njo. Ni vgrajen v HTML atributa za simbol parka, ampak na srečo, HTML5 nam omogoča, da ustvarite lastne značilnosti, da postanejo, kar hočemo. Z besedami podatkovno simbol, ki sem jih predstavil nov atribut čigar ime Pravkar sem si izmislil, in to je v redu, ker sem jo predgovor s temi podatki. Gremo za shranjevanje v notranjosti od tam simbola iz zaloge zdaj. Kaj to pomeni, da kljub temu, da smo prikazuje vrednost imena podjetja znotraj naše autocomplete, še vedno spominja simbol , ki je povezan z vsako družbo. Tako delamo, da je znotraj tega dela samega. Torej to pomeni, da moramo narediti eno spremembo. Ko smo ga še zdaj se moramo, da dejansko izkoristijo simbol atributa ne le njegova vrednost. Če smo nazaj, smo pripisujejo velik dogodek za obravnavo predloge. Kadar se ena od teh predlogov kliknili zdaj, hočem nekaj narediti. Kaj želim storiti, je spremeniti vrednost tega vnosno polje. Zdaj hočem, naj to isto funkcijo val. 

Torej, brez kakršnih koli argumentov, ta funkcija Val vrne v vas, kar je že v polju z besedilom, če pa ji niz, ga bo trajalo, da se niz in ga v polje z besedilom. Jaz sem svojo izbiro polja z besedilom na enak način. To ime je simbol znotraj obrazca-ponudbo. Zdaj sem da mu je poslala vrednost atributa podatkov simbolov. To stvar tukaj je, nov, to $ (ta). Kaj to pomeni, da je element, ki ga je uporabnik kliknil. Tukaj lahko vidimo, da nismo pritrditev klik dogodek za vsak element s skupino predlog posebej. Namesto tega smo se tega lotiti nekoliko drugače. Namesto da bi si rekel, ko karkoli znotraj te pobude div, Zapomnite si, ki je le posoda za ta seznam, če je nekaj v teh div kliknili in ima razred predlog, Hočem ta dogodek na ogenj. V bistvu, kaj to pomeni, kar lahko naredimo, je, da lahko ponovno ta isti trener dogodek za vse stvari na seznamu. Torej nimamo, da imajo eno obravnavo dogodkov za prvi element in drugačno obravnavo dogodkov za drugi element. Mi lahko namesto tega reči, "želim isto trener dogodek, ki se uporabljajo za vse v moj seznam." Vendar moramo nekako vedeli, kateri element je kliknil. Ta "to" ključna beseda pomeni prav to. To je predmet, ki je bil pravkar kliknili s strani uporabnika. Če sem kliknil na povezavo 3. to predstavlja element tega 3. člen, kar pomeni, da lahko dobim svoj atribut, simbol podatkov, kar vemo je, da vsebuje simbol, ki je povezan z družbo, sem kliknil. Če skočimo nazaj na našo stran financ, lahko vidimo, da sedaj, ko sem začel tipkati nekaj podobnega MSFT, bomo več dobili le staležev, simbolov, smo sedaj dobili konkretne družbe. Toda, ko sem kliknite na eno od teh družb, lahko vidimo, da smo dejansko poselitve polje z besedilom, ne z imenom podjetja vendar je ne glede na shranjeni v teh podatkov atributov. In tako, če bi dejansko pregled enega od teh elementov z desnim klikom Preglejte in kliknete element, lahko dejansko videli, kako izgleda. 

Ne pozabite, to je nekaj, kar smo ustvarili v notranjosti, ki za zanko ko smo gradili ta niz HTML. Tukaj lahko vidimo, da so ti podatki, simbol ima vrednost MSFT, kar je super. To je tisto, kar smo pričakovali. To je simbol in to je, kako smo dobili vrednosti, ki jih potrebujemo za uporabo znotraj tega polja z besedilom. To je dovolj za citatom obliki, ker to je nekako dolgočasno. Reciva, da nekaj hitrih izboljšav za naše portfelja strani. Če ste uporabljali CS50 Finance za nekaj časa in boste začeli nakupom in prodajo veliko zalog, na koncu te tabele se bo dobil precej velik, in boste želeli osnovno kartico, seveda. Ko miza je zelo, zelo velika, bi bilo koristno za uporabnika, da poskusite poiskati nad njim. Znotraj iskalno polje, če začnem tipkati nekaj podobnega Disney in išče svoj vozni park Mickey Mouse, lahko vidimo, da je tabela zdaj filtriranje na to, kaj sem pravkar vtipka Ta funkcija izgleda super zapleteno, ampak to je res, enostavno s jQuery in JavaScript. Ta portfolio.php datoteka vsebuje datoteko z imenom portfolio.js JavaScript. Oglejmo pogled na to. Torej, html, js, portfolio. Tukaj, kjer delamo, da iščejo na mizi. Prva stvar, kar morate storiti, je, priložiti obravnavo dogodkov v tem polju z besedilom saj vemo, da želimo, da naši filtriranje funkcija na ogenj vsakič, ko uporabnik pritisne nekaj, ker nimamo časa za iskanje gumbov. Prva stvar, ki jo morate storiti, je ugotoviti, kaj uporabnik išče, tako kot smo že naredili. Ta ključna beseda se nanaša na trenutni element uporabnik stiku s. 

Ker je uporabnik v stiku z iskalno polje $ To pomeni polje za iskanje, Tako this.val nam daje kaj je v iskalno polje uporabnik trenutno vnašate. Torej, zdaj, kaj želimo narediti, je, da želimo ponoviti čez vse vrstice znotraj naše mize. Če želite izbrati vse vrstice v naši mizi, dal sem, da tabela ID portfelja tabele, in je vsaka vrstica predstavlja element TR, tako da to izbiro se bo vrnil k meni velika polja vseh vrstic v moji mizi. Sedaj želim ponoviti, da v matriko. Jaz bi si za zanke, vendar jQuery dejansko določa, nam lepo funkcijo imenovano "vsak". Kaj pa je vsak drug vzame en argument, in da je argument funkcije. Kaj bo naredil, je, da se dogaja, da uporabljajo to funkcijo, da bi vsak element znotraj tega seznama. Ta funkcija vzame en argument, ki je e, in ko se izvaja ta funkcija, to e bo treba nadomestiti s prvo vrstico, potem druga vrstica, nato pa tretji vrsti. Na ta način, je to isto, kot teče v zanki in nato poskušal trenutni element, na podlagi indeksa notranji strani za zanke. Pri vsaki ponovitvi za vsako od teh elementov v tabeli Želim, da preverite, če je besedilo elementa - besedilo v celici notranjost zapored - ujema s tisto, kar sem iskal. Ta velik dolg niz ukazov, kako sem lahko to naredil. Prvič, spet, to zdaj zadeva - saj je notranjost nove funkcije - To je zdaj trenutna vrstica v tabeli. Želim, da se trenutno vrstico v tabeli, in želim, da bi dobili vse svoje otroke. Ne pozabite, DOM je hierarhična drevo, kar pomeni, da elementi imajo več otrok. 

To. Otrok funkcija vrača nazaj k meni paleto vseh elementov da so otroci, v tem primeru vrstice v tabeli. To je preprosto celice v notranjosti na vrsti. Želim poiskati v prvo celico. To. Prva funkcija pravi, da mi prvi element v tem polju. Nato besedilo funkcija pravi, da me točno kaj je v tej celici ker želim iskati v tem besedilu. Končno, kaj je to pretvoriti v male črke, tako da lahko naredimo besedilne velikost črk poizvedbe. Na koncu želimo, da vidim, če je ta niz znotraj tabele vsebuje niz smo iskali. IndexOf funkcija v JavaScriptu ne samo to. To nam pove, ali je ta niz vsebuje še niz. Če je res, da celica vsebuje kar sem iskal, potem pa želim, da poskrbite, da se izkaže. Predstava način bodo rekli: "Pokaži element«. Če to ni tako, potem to pomeni, da karkoli sem iskal, ni vsebovala v tej vrstici, zato želim skrivati, je od uporabnika. To dosežemo, da se lepo filtrirni učinek, če ne vidimo celotno tabelo. Če vas zanima, kako bi to tika-taka, kot tudi, bomo objavili vir na spletu. Ampak to je zelo preprosto. JQuery je super metode za te animacije in manipuliranje lastnosti CSS. Torej, to je to za mene. 

Kaj potem nas čaka? Kot boste videli v nekaj dneh, končni predlog projekta je posledica. Končni predlog projekta bo vam zastavil nekaj vprašanj, vendar bo med njimi tri mejniki - 1 "dobro" mejnik, eden boljših mejnik, in eden najboljših. Ideja je res, da bi fantje iz vaših pričakovanj tako da se minimalno boste zadovoljni z močjo svojega končnega projekta in bo "dobro", če ste zaskrbljeni. Ampak potem je v interesu pridobivanje vas, da dosežejo samo malo k nečemu boljšemu ali kaj najbolje, bomo tudi nekako porinil proti, kot dobro. CS50 Hack-a-Thon, medtem, je v nekaj tednih. Značilno je, da to storimo na podlagi loterije posebej zaradi interesa, vendar so možnosti, da bo trajalo nekaj sto nas avtobusi iz Harvard trga do Kendall Square, kjer Microsoft ima lep objekt, aptly imenovan "NERD" - New England raziskovalni in razvojni center. Bomo tja okoli 8:00 bomo imeli nekaj hrane. Okoli 01:00 bomo imeli nekaj več hrane. Okoli 05:00, če si še vedno buden bomo čez glavo, da IHOP ali pa vas nazaj v kampusu. Cilj je, da se potopite v končnih projektov skupaj z sošolci in osebje. Nato nekaj dni kasneje je CS50 sejem, kar je res mišljeno, da bo priložnost za vama, da predstavijo svoje delo in dosežki za semester medtem ko drgnjenje ramena med seboj in dobili občutek, kaj vse naredil. S tem je dejal, najlepša hvala Tommy in Jožefu in vas bomo videli v ponedeljek.  [Aplavz]