[Powered by Google Translate] [Nedēļa 9, Turpinājums]
[David J. Malan - Hārvarda]
[Tas ir CS50. - CS50.TV]
>> Tas ir CS50. Tas ir beigu 9 nedēļas. Liels paldies.
Beidzot. Nedēļa 9. I got to.
Šodien mēs turpinām mūsu saruna par web programmēšanas
ar aci uz gala projekts, nevis tāpēc, ka jums ir kaut ko darīt interneta
galīgajiem projektiem, bet tāpēc, ka vai nu gala projektiem vai pēc CS50
Tas noteikti ir virziens, kurā mūsdienu programmatūras notiek.
Un tomēr tas nav reāli viegla lieta.
Patiesībā, viens no cieta lietas darīt, ir aspekts dizainu.
>> Piemēram, ar dizainu mēs domājam faktiski kļūst lietotāja interfeisu
vai lietotāju pieredzi labi.
Es daresay - un mēs zinām no nesenā problēmu kopumu
kad no jums maz izskanējuši savu gripes par kādu gabals programmatūru
vai aparatūra, kas infuriates tevi, vai par universitātes vai off -
tur vietu, kas tur daudz, tur ir aparatūras, kas tur daudz,
šāda veida sucks.
Bet realitāte ir tāda, ka to, ka lietas, kas ir viegli izmantot vēl tomēr ir spēcīgs
ir ļoti grūts uzdevums.
Tāpēc šodien es jautāju Jāzeps un Tomijs pievienoties mani šeit
lai mēs varētu sarunāties, gan par dizaina
un kāda veida domāšanas procesus vajadzētu sākt iet cauri galvu
kad jūs dizains jūsu gala projektu, jūsu nākotnes centienos.
Un tad ar Tommy palīdzības mēs apskatīt dažus no īstenošanas detaļas.
Kā jūs varat būt dažas redze uz papīra vai savā prātā
ka jūs varat izpildīt programmiski
izmantojot kādu no tehnoloģijām un metodēm, mēs esam tikko sāka runāt par to,
proti JavaScript un kaut ko vēl jaunāku, proti AJAX, Asynchronous JavaScript.
Tas ļauj jums izveidot visu dinamiskāku par lietotāja interfeisu
ko fetching vairāk un vairāk datu pakāpeniski no servera.
Tātad mēs redzēsim dažus no šiem fragmentus, kā arī šodien.
Kā malā, ja jūs interesē koncentrējoties datorzinātnēs
vai minoring datorzinātnēs, zinu, ka šo piektdien pusdienlaikā
jo Maxwell Dworkin 221 būs pica notikums
kur var uzzināt nedaudz vairāk par datorzinātnes.
Pa ceļam ārā pa durvīm šodien jums būs iespēja uzņemt neoficiālu ceļvedis CS Harvard.
Mēs nodot to uz trash kannas ārpus pie vidukļa augstumā
tā, ka, ja jūs vēlaties, lai greifers šo un uzzināt nedaudz vairāk par CS,
kas būs tur, lai jūs, jo tas bija 0 nedēļas.
Arī tad, ja jūs vēlaties, lai pievienoties mums CS50 pusdienām šo piektdien plkst 01:15,
dodies uz cs50.net/lunch.
Bez papildu ADO, es jums skolotāja kolēģi Joseph Ong.
Hi. [Aplausi]
Paldies.
Pirmo reizi es uzzināju par dizainu bija klasē šeit sauc CS179.
>> Toreiz profesors stāstīja mums stāstu par citu profesora
kurš bija devies uz viesnīcu un izmanto krāniem.
Vai kāds man pateikt, ko arī 2 izaugumi uz kreiso un labo darīt?
[Students] Karstā un aukstā. >> Karstā un aukstā. Labi.
Ko jūs parasti gaidīt, vai ne?
Tas pēc tam, izmantojot krānu profesors grib dušā, un viņš ieņēmumus, lai izmantotu šo.
Viņš domā kreisi un pa labi puses ir par karstu un aukstu, labi?
Bet var kāds man pateikt, ko tie patiesībā darīt?
Jebkuras rokas?
[Dzirdams studentu reaģēšanas] >> Viens ierosinājums ir?
[Dzirdams studentu reaģēšanas] >> Temperatūras?
Tātad viens no tiem kontrolē temperatūru un citām kontrolēm? >> [Students] Ūdens spiediens.
Ūdens spiediens. Labi.
Tas profesors ienāk šajā un, domāšanas viņi ir kontrolēt karsts un auksts,
Izrādās tiesības vienu, ko viņš domā ir par karstu, visu ceļu uz augšu
jo viņš vēlas ņemt siltu dušu.
Nu, tie nav īsti atbilst līdz, lai viņš saņem šo ne ļoti jautru pieredzi
par atrašanos aukstu dušu, un mēs visi zinām, kas tas jūtas līdzīgi.
Šis ir piemērs dizaina plaisāt.
Ko es domāju ar šo ir viņa cerības no krāna
nesakrita kāda nāca no dušas,
kas ir sava veida žēl par viņu.
Tātad šis ir piemērs dizaina plaisāt, kas notiek reālajā dzīvē.
Bet mēs redzam visādas citiem uzņēmumiem, kā arī.
Mēs droši vien nav fani MBTA sistēmas.
Tas ir metro sistēma faktiski Londonā, kas saka: "Šī poga nav izmantota."
Kāpēc tas ir pat tur? Kāpēc mēs pat aprūpi?
Kad es biju bērns, kas ir tech savvy viens mājā,
kad dators būs crash, mana mamma nāks pie manis,
parādot man šo ekrānu un jautā man, kas noticis.
>> Pat es nezinu, ko tas nozīmē.
[Smiekli] Kas?
[Smiekli]
Dažreiz mēs justies kā programmatūras izstrādātājiem ir tikai velcēšanas mums.
Kā lietotājiem mēs esam līdzīgi, "Kas notiek kāds pateikt mums.?"
Tas viss nāk uz leju, lai jautājums par dizainu.
Dizainu, kā mēs varam redzēt, ne tikai par estētiku,
tas nav par to, kā lietas izskatās.
Mēs redzam, ka šis maz pop-up nekā šeit tiešām izskatās diezgan jauki.
Tā ir piliens ēnu fonā, tā ir robežu rādiusi notiek.
Tas ir sava veida diezgan.
Tas nav īsti labi izstrādāta, jo tas nav ļoti lietotājam draudzīgi.
Ka maz pop-up, kas nāk uz augšu, nav īsti man nekādu informāciju
par to, kas notiek, tas nav man pateikt kaut kā lietotājs
par to, kā atgūt no šīs kļūdas.
Mēs vēlamies, lai domāt par lietām, ka dizains nav.
Pirmkārt, tas nav estētika.
Tas arī nav pildīšanai jūsu app ar t nevajadzīgas funkcijas.
Ja jūs esat taizemiešu restorānu, jūs, iespējams, nevēlaties būt zobārsts, tajā pašā laikā.
Un ar Facebook Jautājumi, nevis, ka daudzi cilvēki to izmanto
un tas nebija īsti pamatā ko viņi ēkas.
Un tā tas ir jauki domāt par ne tik daudz to daudzumu lietas
ka jūs liekot uz jūsu pieteikumu, bet kvalitāte
un kā jūs gūstat ka lietotāja pieredzi labāk
ko faktiski uzlabojot tā, ko jums jau ir.
>> Īsumā, dizains stāsta mums, ko mums vajadzētu būvēt.
Piemēram, ja mēs ēkā kaut kas ļauj mums meklēt lietas uz augšu,
piemēram, Google, piemēram, mums vajadzētu darīt lietas tādā veidā
kas prasa lietotājam veikt daudz klikšķu, lai saņemtu to, ko viņi vēlas,
vai mums vajadzētu darīt to tādā veidā, piemēram, ar Google Instant vai AutoComplete
kas ļauj mums iegūt mūsu rezultātus ātrāk?
Inženierzinātņu ietver, piemēram, Tommy jums parādīs, faktiski veidot to.
Ir daudz veidu dizains.
Piemēram, ja jūs esat celtniecības kaut izvietot kaut
kādā trešās pasaules valstī, kur nav daudz elektrības vai ka daudz tehnoloģiju,
Jums ir veidot to, ko jūs esat celtniecības
tādā veidā, kas viegli ļauj piekļūt cilvēki tur.
Bet kāda veida citu dizaina lēmumus varētu tur būt
vai varētu būt iesaistīts kaut kas līdzīgs šim?
Yeah. Es redzu roku.
[Dzirdams studentu reaģēšanas] >> labo. Tieši tā. Pieejamība ir viena lieta.
Daudzi cilvēki nedomā par to, "Kas par manu lietotāju?"
tāpat kā nu spektra galējībām.
Man ir lietotāji, kuri varētu būt invaliditāte, ka es neesmu domāju par
un es esmu tikai domājot par projektēšana par vispārējo lietotājam.
Internets ir pieejams ikvienam mūsdienās,
un es būtu projektēšana tiem cilvēkiem, kā labi.
Kāda veida citiem dizaina lēmumiem jūs varētu darīt?
Jā. >> [Students] Izmaksas.
Izmaksas. Ļoti labi.
Vēl viena lieta, mēs varētu balstīt mūsu dizaina lēmumus, ir izmaksas.
Ja mēs esam uzņēmums, jūs vēlaties, lai izveidotu kaut ko, kas nav nepieciešams daudz, izmaksas, lai ražotu
bet var pārdot par īpaši augstas izmaksas vai var iegūt mums kādu peļņu.
>> Tie visi ir dažāda veida dizainu, bet, kad mēs esam ēkas kaut internetā
vai tad, kad mēs esam ēkas kaut kas, iespējams, nav izmaksas, ka daudz, lai izveidotu šim,
piemēram, interneta lietojumprogrammas - jums nav mest daudz kapitālu tajā
lai padarītu kaut ko, kas reāli darbojas -
ko mēs esam vairāk uztrauc, ir lietotāju pieredzi.
Mēs to saucam par lietotāja centrētu dizains.
Būtībā tas, ko lietotājs centrētu dizains ietver ir liekot sevi kas savu lietotāju kurpes.
Ja kāds pierakstās, ko es esmu ēka,
viņi acīmredzot nāk uz manu konkrēto pieteikumu ar mērķi prātā,
ar uzdevumu viņi vēlas, lai pabeigtu.
Un jūsu uzdevums ir ne tikai palīdzēt viņiem pabeigt šo uzdevumu
bet lai palīdzētu viņiem pabeigt šo uzdevumu tādā veidā, kas ir efektīva, saprātīga
un, kā kāds cilvēks teica tur, pieejama.
Kāda efektivitāte nozīmē?
Efektivitāte nozīmē, cik ātri tas mans lietotājs pabeigtu uzdevumu, ņemot vērā manu interfeisu.
Paiet daudz klikšķu, lai tie varētu nokļūt no vienas vietas uz otru?
Tas ir garlaicīgs? Vai viņiem ir veikt daudz atkārtojošos uzdevumus?
Mēs vēlamies padarīt šo procesu pēc iespējas efektīvāku
tāpēc tie nav darīt tās lietas veidu.
Attiecībā uz intuitiveness, tas ir, piemēram, ja lietotājs izskatās manu saskarni,
tas ir viegli tos iegūt no vietas uz vietu?
Tas ir viegli, lai tie varētu izdomāt, ko viņi ir noklikšķiniet manā interfeisā
Lai viņiem, lai sasniegtu mērķi vai uzdevumu, viņi vēlas sasniegt?
>> Un, visbeidzot, kā viens cilvēks teica tur, pieejamība ir ļoti svarīga.
[Vīrietis runātājs] Tas nāk ar pieejamību lietām, piemēram, redzes,
patīk, kā es varu tiešām dizains kaut kāds, kurš ir akls?
Oh. Cilvēkiem, kuri nevar redzēt vispār, mums ir kaut ko sauc ekrāna lasītāji.
Ko jums vajadzētu darīt, ir jums vajadzētu izveidot savu mājas lapu veidā
ka, piemēram, konkrētas tehnoloģijas, ko mēs saucam -
Ir daudz lietas tagad.
Es domāju, ka ir ekrāna lasītāji sauc JAWS.
No šīm lietām daudz paļaujas uz to, ko mēs saucam platība noteikumus
lai lasītu, lai lietotājam, kas ir uz lapas.
Attiecībā uz tiem cilvēkiem, kuri nevar redzēt, jums ir nepieciešams, lai pārliecinātos, ka šie ekrāna lasītāji
faktiski var uzņemt saturu lapā un faktiski var parādīt saviem lietotājiem,
ja jūs nevarat redzēt, vismaz jūs varat saprast saturu lapā.
Yeah. Labi.
Pietiekami runājam par labu dizainu. Parunāsim par sliktu dizainu.
Tās ir lietas, kas jums nevajadzētu darīt.
Vai kāds man pateikt par savu pieredzi ar Craigslist
un ko viņi domā ir ne tik liels par šo dizainu?
Jā. >> [Students] Es domāju, ka tur ir pārāk daudz vārdu vienā jomā.
Pārāk daudz vārdu, labi? Pilnīgi milzīgs.
Jūs nākt uz šo lapu, un jūs sagaidīs ar visu ķekars lietas šeit
kas varētu pat nav svarīgi, lai jums.
Piemēram, tu dzīvo vienā valstī, kas nesākas ar šo burtu.
Pieņemsim, ka jūs dzīvojat Texas vai kaut.
>> Jums ir, lai ritinātu visu ceļu uz leju lapu, lai nokļūtu vietā jums ir.
Es esmu no Boston, tāpēc ļaujiet man izskatās Masačūsetsā. Kur ir Massachusetts?
Ak, tas ir labi šeit. Ak, tas ir Boston. Labi.
Apskatīsim Boston. [Smiekli]
Diezgan milzīgs, labi?
Neērts lietas tur. [Smiekli]
Pieņemsim, ka es esmu meklē kaut kur dzīvot.
Cik daudzi cilvēki ir faktiski izmantoti Craigslist? Tonnas jums.
Ir diezgan slikti veidi, kā apskatīt to, bet pieņemsim apskatīt šo.
Kāda ir atšķirība starp img un PIC atšķirība? Vai kāds man pateikt?
Tur tiešām nav nekādas atšķirības.
Tie nozīmē tieši to pašu, bet apzīmējums ir atkarīgs par viņiem kādu iemeslu dēļ.
Ja es noklikšķiniet uz Has attēls, nekas nenotiek lapā.
Man tiešām ir noklikšķiniet meklēt vēlreiz kaut kas notiktu.
Kas varētu būt labāks dizaina lēmums, ko varētu darīt tur?
Ja es esmu noklikšķinot uz šo filtru, es, iespējams, vēlas, lai filtrētu, ko šī konkrētā darbībā
vai konkrētās kategorijas.
Tātad tā vietā, lai nospiediet Search atkal, es varētu tikai automātiski darīt filtrēšanas
kārtot Google stilu, kur viņi to dara uzreiz.
[Malan] Bet ne formas, kā mēs esam redzējuši viņus līdz šim ir jābūt fiziski jāiesniedz
hitting Enter vismaz vai nospiežot pogu?
Kā jūs esat redzējis tik tālu, jūs faktiski ir uz Iesniegt darīt tās lietas.
>> Bet kā Tomijs parādīs otrā, faktiski ir veidi, lai jūs
piemēram, ja jūs noklikšķiniet uz šī lieta, tas var automātiski nosūtīt
ko mēs saucam AJAX pieprasījumu un saņemt datus atpakaļ un filtrēt rezultātus uzreiz.
Ir tonnas lietas, kas ir nepareizi ar šo interfeisu.
[Malan] Vai jūs meklēt Cambridge?
Tur ir kaut nedaudz nenormāls šeit, kur jums rūp Cambridge
un vēl jūs saņemat Westford, Spring Hill, West Newton un līdzīgu.
Droši vien nav ideāls. >> Droši vien ne ideāls.
Kā varētu es varētu izdarīt lietotāja pieredzi labāk par šo konkrēto lapu?
Jā. >> [Students] Instrukcijas.
Labi. Instrukcijas kāda veida jēga?
[Students] Piemēram, lieta pirmo reizi lietotājiem, kuriem nav pat zināt, ko Craigslist
vai jūs nezināt, ko jūs vajadzēja darīt.
Tiesības. Tātad izskaidrot, ko Craigslist ir šajā lapā, ir svarīgi.
Mēs faktiski var pateikt lietotājiem ko šī lapa ir faktiski par.
Ja es esmu tikai apmeklējot šo, es redzu veselu ķekars vietās. Es pat nezinu, ko tie nozīmē.
Bet vēl svarīgāk, vienkārši apskatot šo saskarni,
atceros, man bija, lai ritinātu uz leju ton lietas atrast konkrētu kopienu
ka es tiešām jārūpējas arī par to.
Kas ātrāks veids, kā es varētu darīt? Jā.
[Students] Sadala tos augšup austrumu, rietumu reģionos. >> Labi.
Es varētu sadalīt tos vairāk kategorijās, kas varētu man palīdzēt ātrāk noteikt
kā nokļūt uz šo konkrēto vietu.
[Students] Put nolaižamo sarakstu. >> Tiesības. Labi.
Es varētu izmantot nolaižamo izvēlni, jo mums ir fiksēts kopumu lietām
un mēs varētu parādīt tos nolaižamajā izvēlnē.
Tādā veidā tas nav aizņem tik daudz vietas uz ekrāna.
Bet vēl labāk, nekā tas, ko mēs varam darīt?
Jā. >> [Dzirdams studentu reaģēšanas] >> Vai varat teikt, ka atkal? >> [Students] Meklēt lodziņš.
Jā, meklēšanas lodziņš. Tas ir lieliski.
Ko mēs varam reāli darīt ir, ja mēs atskatāmies uz slaidi, meklēšanas lodziņā.
AutoComplete. Ļoti vienkāršs veids, kā meklēt, izmantojot rezultātus, kas jūs zināt, ir komplektā.
Ja es sāktu rakstīt BO, tikai parādiet man visus rezultātus, kas ir BO iekšpusē no tiem.
Tādā veidā es varētu ļoti viegli atrast konkrētu vienu es gribu iet uz
tā vietā, lai ritinātu šajā patiešām lielā sarakstā.
>> Tie ir visu veidu tiešām zemu piekārtiem augļu, ka kāds, kurš īsteno Craigslist
faktiski var darīt, lai padarītu to pieredzi mājas lapā daudz labāk par to īpaši lietotājam.
Labi. Pietiekami runājam par sliktu vietnēs.
Parunāsim par Facebook.
Kad Facebook iznāca, un jo īpaši Facebook fotogrāfijas,
tur bija daudz citu pakalpojumu sniegšanas laikā, kas varētu darīt tieši to pašu lietas.
Viņi varētu organizēt savas fotogrāfijas albumos.
Ko jūs varētu darīt, ir, jūs varētu organizēt tos komplekti, kā arī.
Jūs varētu organizēt tos pēc datuma. Jūs varētu darīt visas šīs konkrētās lietas.
Bet vai kāds zina, ko veic Facebook fotogrāfijas eksplodēt laikā, kad tas tika izlaists?
Jā. >> [Studentu] Tags. >> Birkas. Tieši tā.
Mums ir Milo nekā šeit, kas ir mūsu suns talismans ar šo CS50 bandana.
Jūs varat redzēt, ka mums ir šis marķēšanas funkciju vidū.
Un ko veic Facebook fotogrāfijas tik interesanti no lietojamības viedokļa
ir tas, ka faktiski ļāva cilvēkiem, izmantojot šo iesaistīt savus draugus ar savām fotogrāfijām.
Facebook, jo viņu mājas lapā ir īpaši sociālajā,
tas ir par ēkas šāda veida sociālo atmosfēru.
Kas uzlaboja pieredzi fotogrāfijas daudz vairāk
jo viņi patiešām varētu sākt, sakot: "Tie ir savienojumi starp cilvēkiem,
un tie ir fotogrāfijas par cilvēkiem jūs tiešām rūp. "
Daļa no tā ir arī sava veida narcisms.
Cilvēkiem patīk būt atzīmēts fotogrāfijas un lietām, piemēram, ka.
Kaut kas nav nekas labs cilvēka iezīme,
tajā pašā laikā tā ir balstīta uz labu dizainu lēmumus
jo cilvēki patiešām rūp lietas, kā šis.
Tā ka ir Facebook fotogrāfijas.
>> Bet parunāsim Facebook kopumā.
Es esmu pārliecināts, ka daudzi cilvēki šeit ir viedoklis par Facebook,
abi labs dizains lēmumus un slikts dizains lēmumus.
Tāpēc pieņemsim vent vai būt laimīgs.
Come on. Es zinu visu par jums izmantot Facebook.
Kādam ir jābūt kaut ko sliktu pateikt, vai kaut ko labu teikt par to. Jā.
[Students] Jo ziņu barības tur lietas man nav īsti rūp daudz.
Jaunumi barības nav parādīt daudz lietas, jūs varētu nav rūp.
Jums ir draugiem par Facebook, kas jums nav tikušies uz 2 vai 3 gadiem
un jūs redzat to jaunumi rezultāti popping up jūsu ziņu barību
un jums nav īsti rūp to.
Facebook ir faktiski veikti centieni, lai padarītu šo labāk,
un viņi faktiski mēģināja virzīt attiecīgos rezultātus uz augšu jaunumi barības, kā par vēlu
lai jūs faktiski redzēt lietas ar draugiem, kas attiecas uz jums vai jūsu tuviem draugiem.
Kaut kas cits? Jā.
[Dzirdams students atbildi] >> Vai varat teikt, ka atkal?
[Students] Reklāmas ir samērā kluss. >> Kādā ziņā?
[Dzirdams studentu reaģēšanas] Viņiem nav gaismu ekrānā, piemēram, reklāmkarogus.
Labi. Tas ir labi.
Ja jūs atceraties internetam no '90s - >> [Malan] es tur biju. >> Viņš bija tur. [Smiekli]
Jūs varētu atcerēties mirgo Gif fonus, sparkly lietas,
GeoCities stils veida lietas.
Tas tiešām nav piemērs labu dizainu
jo tas tiešām novērš uzmanību no satura.
Jēlas mākslas vietne izmanto, lai ir animācijas gifs kā savu fona
un jūs varētu lasīt neko lapā,
bet es domāju, kāds tiešām runāja ar viņiem, un tagad tas ir nedaudz atšķirīgs.
[Malan] Tas ir daudz labāk tagad. >> Tas ir daudz labāk, tagad, kā jūs varat redzēt. >> [Malan] Ak jā.
Vienkārši lieliski, tikai - Jā. Labi.
>> Daļa no tā ir arī padarīt jūsu lapas, iespējams ļoti minimālisma un ļoti saprotami
tāpēc lietas par lappuses plūsmu veidā, kas ir ļoti loģisks un nav iegūt tādā veidā viens otru.
Kāda veida citas lietas ir labas par Facebook vai slikti par Facebook?
Pieņemsim tikai ir dizaina saruna šeit.
Oh. Kur? Yeah.
[Students] Jaunā Timeline sistēma ļauj jums meklēt personas profila par savu pagātni.
Ooh, Timeline.
Grafiks ir lieliska lieta, jo tas ļauj jums sviru savus draugus
atpakaļ, kad viņi bija vidusskolā.
Grafiks ir labi, jo tas ļauj jums filtrēt, izmantojot satura daudz ātrāk,
tas ļauj jums atrast lietas, kas citādi būtu veikti jums ļoti ilgu laiku, lai atrastu
vienkārši ritinot uz augšu un uz leju, uz augšu, uz augšu, uz augšu, uz augšu, uz augšu, piemēram, dodas atpakaļ laikā.
Bet tad tur ir arī sava veida negatīvie ka attiecībā uz lietotāju pieredzi.
Kas varētu būt?
Liels vārds, kas sākas ar P-R. >> [Students] Konfidencialitātes. >> Konfidencialitāte, labi?
Privātums ir milzīgs lietotāju pieredzi jautājums.
Šī ir viena no lietām, ko es naida visvairāk par Facebook tagad. [Smiekli]
[Malan] Kā man tagad.
Dāvids nav realizēt tas patiesībā notika līdz vakar.
Tāpēc tagad viņš zina, ka katru reizi, kad es tērzēšana viņu es zinu, ka viņš ir bijis ignorējot mani.
[Malan] neērts daļa bija man bija faktiski ignorējot viņu,
un es nezināju, viņš zināja, ka es ignorējot viņu. [Smiekli]
Privātums ir milzīgs jautājums.
Vai kāds šeit man pateikt, kādi varētu būt slikti par Facebook privātuma
neņemot vērā faktu, ka viņi dara lietas, kā šis?
Kas tas ir īpaši grūti izdarīt attiecībā uz Facebook privātuma?
Ka veida ir vadošais jautājums.
Jā. >> [Students] Hide fotogrāfijas no dažiem cilvēkiem.
Tiesības. Tieši tā, lai slēptu savu fotogrāfijas no dažiem cilvēkiem.
Viņi ir šo mazo, maz pogu augšējā labajā, kas ļauj pārslēgt privātumu foto.
Viņu privātuma iespējas ir ļoti atšķīrās dažādu veidu izvēlnēs.
>> Tie esam gotten daudz labāk par to nesen, bet tas izmanto, lai būt gadījums
ka, ja jūs vēlaties, lai novērstu savus draugus no redzēt fotogrāfijas,
Jums būs jāiziet cauri ļoti sarežģīts 5-pakāpju process ir līdzīgi,
ļaujiet man noklikšķiniet uz šīs saites, tagad ļaujiet man noklikšķiniet vēlreiz, ļaujiet man noklikšķiniet vēlreiz,
ļaujiet man norādīt, kuras cilvēki nevar redzēt manas fotogrāfijas.
Tas nav īpaši labs uz Facebook puses
jo tik daudz par lietotāju pieredzi faktiski dodot viņiem brīvi
kontrolēt, ko cilvēki var redzēt.
Mēs to saucam par lietotāja kontroli un brīvību.
Ja jūs neesat ļaujot lietotājiem darīt tādā veidā, kas ir efektīva un intuitīvu,
tad jūsu lietotāja pieredze nav reāli, ka liels vispār.
Jūs guys teikt kaut ko par Facebook?
Kā es varu izslēgt šo?
[Ong] Jūs nevarat izslēgt šo, un tas ir milzīgs lietojamības trūkums par daļu no Facebook.
Šī funkcija - es tiešām paskatījos to vakar -
tas ir vai nu, ka jums nevar darīt to vai tas ir aprakti kaut kur ļoti, ļoti dziļi
darbība Facebook padziļinājumu, jo es nevaru saprast, kā atslēgt šo funkciju vispār.
[Malan] Bet dažreiz šie lēmumi nav skaidrs
jo jums puiši ir devuši mums daudz noderīgas atsauksmes par dažādiem CS50 pieteikumiem
un tīmekļa vietnes, kas kurss izmanto.
Mums nav īstenoti visi šie lūgumiem un ierosinājumiem.
>> Daļa, kas ir, lai iegūtu tik daudz pieprasījumus, ka tas ir atkarīgs no laika,
bet dažreiz mēs vienkārši izdarīt apzinātu lēmumu, piemēram,
"Paldies par ieteikumu, bet mēs nepiekrītam."
Tātad, kā jūs faktiski izlemt, ko jums vajadzētu darīt, ja jūsu lietotāji domāju, ka jums vajadzētu darīt kaut ko
pat ja jums nav obligāti?
Tas ir precīzs līdzsvars starp faktiski klausoties to, ko jūsu lietotāji saka
un faktiski ir sava veida līnijas, ja jūs sakāt,
"Mēs neesam gatavojas darīt to, ko šie lietotāji saka."
Un jo īpaši, es domāju, ka tur bija Henrijs Fords citātu, kas apkopo šo augšu diezgan labi.
"Ja es būtu lūgusi cilvēkiem, ko viņi gribēja, viņi teica, ka viņi gribēja ātrāk zirgus."
Vai kāds sava veida kaitināt izņemot to, ka citātu īsti nozīmē?
Tas nav tikai tas, ka lietotāji zina, ko viņi vēlas,
bet tas ir vairāk, ka -
[Students] Viņi nezina, kas ir iespējams.
Daļēji viņi nezina, kas ir iespējams.
Ķircināt ka bez mazliet vairāk. Ko jūs ar to domājat?
[Dzirdams studentu reaģēšanas]
Tas ir labi. Ko es domāju, ka mēs cenšamies pateikt ir tas, ka cilvēki zina, ko viņi vēlas.
Viņi vēlas ātrāku zirgus.
Ko viņi patiešām vēlas, ir iespēja pārvietoties ātrāk,
bet tie nav īsti zināt vidēja, ar kuru, lai sasniegtu to.
Kad jūs nākt uz jūsu lietotājiem un lietotājiem pateikt kaut
un viņi pateiks: "Mēs vēlamies šos līdzekļus un šie līdzekļi un šie līdzekļi,"
Jūs nevēlaties, lai vienmēr domāt par to, "Ļaujiet man iet uz priekšu
"Un īstenot to, ko viņi skaidri saka,"
bet ko jūs vēlaties, lai padomātu par ir, "Kāda veida idejām var saņemt no tā?"
Ko viņi tiešām vēlas?
>> Un no turienes, ko jūs varat darīt, ir izveidot kaut ko, kas apmierina šos pieprasījumus
bet ne vienmēr tā, kā lietotājs sagaida to apmierināts.
Tātad kaut kas līdzīgs gala projektu, kas ļoti reālā izteiksmē,
kas ir noderīgs heiristiskās kad runa ir padarīt kaut ko labāku,
it īpaši, ja dizainers ir šo iedomību par viņu
kurā jūs veida zināt, kas ir labākais, jūs varētu veikt ieguldījumu no saviem lietotājiem,
bet kā jūs tiešām iet par iegūt šo atgriezenisko saiti?
Jo gala projektiem, ļoti konkrēti, ko rada optimālus rezultātus šeit?
Kas ražo optimālus rezultātus - un es iešu pa šo otro -
tas ir process, izstrādājot un pēc tam testēšanas un pēc tam atkārtojot.
Ko es domāju ar testēšana ir parasti, kad jūs dizains kaut
Jūs domājat, ka tas ir diezgan labi, piemēram, "Es esmu tik liels dizainers. Ikvienam gatavojas mīlēt šo."
Un tad jūs nodot to, kas tur, un cilvēki nav tiešām patīk to kāda iemesla dēļ.
Kas jums ir jādara, ir jums ir jāņem daļas lietas, cilvēki dara, piemēram,
un salabot lietas, ko cilvēki nepatīk.
Tas izklausās ļoti skaidrs process, bet šis process pastāvīgi atkārtojot
uz augšu, ko jūs esat jau uzcelta, ir process, kas palīdz jums
ne tikai uzlabot savas dizaina prasmes, bet arī palīdz jums uzlabot dizainu
tāpēc, ka cilvēki patiešām novērtējam jūsu produkts vēl vairāk nekā tas bija agrāk.
>> Es iešu pa vairāk konkrētus piemērus, ko jūs varētu faktiski darīt.
Kā sava veida pēdējo piemērs produkta, aplūkosim kajaks.
Kajaks, kad tā iznāca bija ļoti, ļoti populāri.
Vai kāds uzminēt, kāpēc?
Kādas ir lietas veidu jūs vēlētos par to, ja esat lietojuši
vai kādi ir veidu lietas jums nepatīk?
Jā. >> [Dzirdams studentu reaģēšanas] >> Labi.
Tas ir daļa no tā ir izīrēšanu lietotājs ir vaicājums, kas ir vairāk ekspansīvas
nekā ļoti ierobežojoša, piemēram, "Jums ir izvēlēties sākuma datumu
", Un jums ir izvēlēties beigu datumu."
Faktiski, tas ļauj būt elastīgiem par to un tas dod jums visu, kas šajā diapazonā lidojumiem.
Kaut kas cits?
[Students] Tās ietver maksu cenā.
Tie ietver maksu cenā.
Nodokļi un lietas tiešām iet taisni minētās cenas, kas atrodas augšējā kreisajā
lai jūs nav tricked domāt, ka jūs faktiski maksājot par $ 240 lidojumu
kad tas ir patiešām $ 330.
Kaut kas cits? Jā.
[Dzirdams studentu reaģēšanas]
Es neesmu pārliecināts, vai viņi tiešām jums darīt.
Es varētu būt nepareizi.
Tas varētu būt interesanta lieta, ja jūs vēlaties, lai lielāku svaru uz konkrētiem filtriem
lai viņi push rezultātus, kas saistīti ar minēto filtru uz augšu.
Bet var kāds man pateikt, kas ir tik īpašs par šo kreisajā pusē?
Kā jūs tradicionāli meklēt lidojumu uz interneta pakalpojumu pirms šo?
>> Jā. >> [Dzirdams studentu reaģēšanas] >> Vai varat teikt, ka -
[Students] Katrai aviokompānijai. >> Jā. Katrai aviokompānijai ir sava tīmekļa vietne.
Tas apvieno lietas. Un?
[Students] Jūs zināt, tieši cikos jūs atstājot.
Jūs zināt, tieši to, kad jūs esat prom,
bet ir saistīti ar īpaši filtriem.
Ļaujiet man uzvilkt kajaks.
Ak Dievs, pop-ups. Slikta lietotāju pieredzi.
Kas notiek, ja es pārvietot šo slīdni?
[Students] Autom. >> [Ong] Autom.
Tas ir kaut kas ir ļoti svarīgi.
Pirms tam, kad jūs gribēja uzmeklēt lidojumu,
Jums bija likt savu ieguldījumu atrašanās vietā, jūsu produkcija atrašanās vietu, nospiediet Search,
tas process, kas un parādīt savus rezultātus.
Ja jūs vēlaties mainīt savu vaicājumu, jums būtu nospiest atpakaļ divreiz,
ievadīt jaunu vaicājumu no nulles, un tad darīt to atkal un atkal.
Jauka lieta par kaut ko tādu ir tā izmanto ļoti [neizprotamas] lieta vidū.
Ikreiz, kad jūs darīt kaut kas līdzīgs šim, tā atvases off pieprasījumu
un tas atgriež jums visiem rezultātus nekavējoties.
Šī tūlītēju atgriezenisko saiti kārtošanas ir kaut kas izgatavots kajaks Putnu populārs
jo tas tiešām viegli man vienkārši mainīt manu vaicājumu
un izdomāt lietas, kas ir ap īpašu diapazonā
bez iet uz priekšu un atpakaļ, uz priekšu un atpakaļ, uz priekšu un atpakaļ.
Tātad šie ir visādas lietas, jūs vēlaties, lai padomātu par to, kad jūs projektēšana jūsu mājas lapā.
Kā es varu darīt to ļoti efektīvs, lai mani lietotāji iet cauri neatkarīgi no viņi strādā
un iegūt to iespējamo mērķi pēc iespējas ātrāk?
[Malan] Un Jāzepa punktu agrāk par lietotājiem ne vienmēr zinot to, ko viņi vēlas,
pamatojoties uz to, ko jūs guys tagad zinām par HTML
un jums ir rūtiņas, radio pogas, izvēlieties izvēlnes, ievades lauki un tamlīdzīgi,
kā jūs īstenot jēdzienu picking starta laiks lidojumam?
>> Kura no šīm dažādajām UI mehānismu jūs izmantojat?
Ja jūs vienkārši zināt summu HTML, kas tika mācīta pirms
un jūs zināt izejvielas ir radio pogas, izvēles rūtiņas, drop-Downs, un ievades kaste,
kāda būtu jūsu dabas izvēle ir bijusi par picking datus?
[Students] Ieejas. >> Ieejas. Vai varbūt pat nolaižamo ar visiem datumiem, labi?
Tātad ar sarežģītākiem UI mehānismu, piemēram, tas kreisajā pusē, kas var īstenot,
Jūs varat padarīt šo procesu daudz intuitīvākas ar slīdni
jo laiks ir nepārtraukta, un cilvēki parasti nedomā par to atkarībā no diskrētām gabalos.
Labi. Pēdējā lieta.
Desmit lietojamības heuristics.
Visas lietas, ko mēs runājām par, iespējams, atbilst vienai no šīm kategorijām.
Ja jūs iet uz šo saiti, kas vietām tiks publicēta internetā,
jūs tiešām varētu, kā jūs dizains jūsu vietni, saglabāt šos heiristiku prātā
un šie noteikumi īkšķis.
Jūsu projektu, ko es ieteiktu jums, lai izstrādātu jūsu app labāk
ir darīt papīra prototipu pirmās.
Kad jūs domājat par savu pieteikumu, ļoti ātri uzskicēt ko jūs vēlaties, lai izskatās
un pārliecinieties, ka visas kastes ir sakārtoti tādā veidā, kas ir ļoti intuitīva, lai lietotājs varētu izmantot
un pat parādīt šos papīra prototipus saviem draugiem un sākt fokusa grupas.
Tikai iegūt 2 vai 3 cilvēkus kopā un lūgt tos vienkārši pieskarieties šīm papīra prototipus,
un parādīt viņiem jaunas ekrāniem, lai redzētu, vai viņi tiešām saprast, kas notiek.
>> Ko jūs vēlaties darīt, ir dot viņiem uzdevumu, motivēt šo uzdevumu,
un tikai dot viņiem app un ļaujiet viņiem to izmantot.
Nedod viņiem norādījumus ārpus tā.
Jūs vēlaties, lai tiešām ļaut viņiem mijiedarboties ar savu app tādā veidā, kas ļauj jums redzēt
kā viņi varētu to izmantot, ja Jums nav stāv blakus tiem.
Un tas ir ļoti svarīgi.
Tas dos jums daudz ieskatu par to, ir cilvēki kļūst ap konkrētiem lietas
tādā veidā, ka man nav paredzējis tos?
Vai viņi izmanto īpašu UI mehānismus uz ekrāna
tādā veidā, kas ir sava veida Hacky?
Man nav paredzējis viņiem to darīt šādā veidā.
Un, kad esat pabeidzis ar to, ko jūs vēlaties darīt?
Jūsu dizains ieži, labi?
Ko jūs vēlaties darīt, ir jūs vēlaties, lai attīstītu un tad darīt šo procesu no jauna.
Tāpēc parādīt to draugiem, kad esat to attīstīja, pārbaudītu to,
izstrādāt, pārbaudīt, izstrādāt, pārbaudīt, atkārtot, un tālāk un uz priekšu.
Dizains ir ļoti iteratīvs process šajā ziņā.
Jums tiešām ir veidot kaut ko, un tad saprast lietas, par to
ka jums nav saprast pirms un doties atpakaļ un uzlabot tās.
Tagad, kā par attīstības daļu, tas ko Tommy notiek, lai parādītu jums pēc pārtraukuma
un kā jūs varētu ieviest kaut ko līdzīgu automātiski pabeigt
tādā veidā, kas ir diezgan vienkārši.
[Malan] Kā Tomijs izveido šeit, jautājums tad.
No senākajiem mājas lapas daudz - un kad Jāzeps sacīja 1990.gadu stila mājas lapā,
tas bija implementācijas, kur, ja jūs vēlētos, lai izvēlētos sākuma laiku un beigu laiku,
atklāti sakot, atpakaļ dienā, un pat dažās vietnēs šodien,
kā jums tas ir jums izvēlēties stundu no nolaižamā,
Jums izvēlēties minūtes no nolaižamā, varbūt jūs izvēlaties AM, AM,
un tad jūs, ka vēl 3 reizes.
Un tā ar 6 klikšķiem un varbūt kādu ritinot
jūsu lietotāja faktiski var sniegt kādu datumu un / vai laika šajā ziņā.
>> Tāpēc noteikti optimāls un vēl līdz šim mēs esam redzējuši nekādus izteiksmīgas spējas
jebkurā no valodām, mēs esam paskatījās kaut ko darīt sexier
tāpat šī slīdni sākuma laiku un beigu laiku.
Bet, ja jūs domājat atpakaļ uz 0 nedēļā, kad mēs runājām par nulles,
Arī tur bija ne widgets, kas tikko bija dažas lietas.
Tu tiešām tikko bija šos pamatus, piemēram, cilpu un nosacījumiem, piemēram.
Tik veida tikai domāju ļoti abstrakti tagad, neatkarīgi no HTML ziņām,
Kas īsti notiek ar kaut ko līdzīgu šim sākuma laiku un beigu laiku slīdni?
Kad es pārvietot manu peli, un es noklikšķiniet uz šo maz burkānu simbola kreisajā
un sākt velkot, programmatiski, kas tas ir jūs vēlaties, lai varētu īstenot
lai tas notiktu?
Kādi jautājumi, ko Būla izteiksmes jūs vēlaties, lai varētu uzdot?
Kas īsti notiek? Sammy?
[Students] Kur ir no kursora pozīcija? >> Labi. Kur ir no kursora pozīcija?
Tas bija kaut kas mums bija nepieciešams izteikt atpakaļ nulles,
vai tas bija balstīts uz vietu vai pat krāsu vai līdzīgu.
Jūs varētu atcerēties kādreiz tik īsi, pirmdien tur bija visas šīs lietas sauc notikumi
pasaulē Web, un tāpēc tur ir lietas, piemēram, onclick un onkeypress
un onkeyup un onMouseOver un onMouseOut.
Lai saprastu, ka pat šīs lietas, mēs esam ņemot par pašsaprotamu tīmeklī
ar vietās, piemēram, Facebook un Gmail, pat ja jums nav ne jausmas
kā jūs, iespējams, varētu ieviest, ka, jo tur nekas pat patīk lekciju
vai problēma komplekts 7, saprotam, ka ar šiem precīzu pašiem pamatiem,
ar HTTP un parametriem un GET un POST,
ar pamata HTML izejvielām, ka mēs esam paskatījās līdz šim
un pēc brīža ar programmatisku mehānismiem, kas Tommija gatavojas ieviest
Jūs varat sākt izteikt sevi, tāpat kā jūs darīja 0 nedēļā
ar ļoti intuitīvi vilkšanu un nomešanu.
>> Tātad ar to teica, Tommy MacWilliam un dažas jaunas puzzle gabalus uz mums par Web.
Labi. Mans vārds ir Tommy, un es esmu gatavojas runāt par JavaScript.
Tikai atruna: es uzskatu, ka JavaScript ir labākais programmēšanas valoda
visā visā pasaulē.
Ir daudz cilvēku, kas nepiekrist ar mani, bet tas ir tikai pārsteidzošs.
Tiklīdz jūs iet atpakaļ uz C, ja jums ir rakstīt temperatūrā citā klasē vai citās valodās,
tas ir tikai patiešām nomākta visās zema līmeņa detaļām, kuras jūs, lai saņemtu bogged leju iekšā
Tātad, ja jūs esat kādreiz sajūta skumji par to, kā kaitinošas C ir rakstīt,
tikai iet atpakaļ, uzrakstīt kādu JavaScript. Tas ir nirvāna.
Jūs jūtaties daudz labāk par savu slikto dienu.
Par burvju JavaScript daudz nāk no tās spējas manipulēt lietas
kas jau ir uz lapas.
Kad mēs wrote mūsu PHP skriptus, tie tika izpildīts uz servera,
un beidzot, ka PHP skripts iespējams izvadīt kādu HTML.
Ka HTML tika nosūtīta uz klientu, un tad, ka tas bija.
Ja PHP gribēja pievienot pogu uz lapu, piemēram, tas nevar īsti darīt.
Tas būtu padarīt pilnīgi jaunu HTML failu un sūtīt ka ​​pārlūku.
Ar JavaScript mēs zinām, ka mēs varam atjaunināt lietas, bet viņi jau lapā,
un tādēļ mēs varam sniegt daudz vairāk tūlītēju atgriezenisko saiti,
kas patiešām uzlabotu lietotāju pieredzi mūsu mājas lapā.
Tikai ātri Atgādinājums par JavaScript selektori.
Mēs zinām, ka tad, kad mēs lejupielādēt HTML lapu,
kas notiek, lai būtu pārstāvētas DOM.
>> DOM atceries ir tikai tas ir liels koks, kur elementi ir saistīti ar šo lielo hierarhijā.
Kad mēs strādājām ar datubāzēm 7 PSET,
viena no pirmajām lietām, mums vajadzēja zināt, kā to izdarīt, bija vaicājumu datu bāzē.
Mums ir tik liels lietotāju tabula, un dažreiz mēs vienkārši vēlamies pateikt,
"Es tikai gribu dažas no šiem lietotājiem, kas atbilst kādu nosacījumu."
Tāpat, ja mums ir DOM mums ir nepieciešams kaut kādā veidā vaicājumiem to.
Mums ir nepieciešams zināms veids, kā pateikt "Es gribu visas pogas, kas izskatās šis
"Vai visi uz lapas attēlu."
Un šie selektori ļauj mums darīt.
Tik vienkārši ātri Atgādinājums.
Šis pirmais šeit, tas # iesniegt, kas ir, ka gatavojas izvēlēties? Vai kāds atceras?
[Dzirdams studentu reaģēšanas] >> Jā, tieši tā.
Tas ir gatavojas, lai izvēlētos elementu par lapu, kas ir ID no iesniegt.
Un tā, ka hash tag saka, ka tas pārslēgs gatavojas strādāt ar ID.
Kā par otro, tas centrēts,. Kas būs, ka izvēlētos?
Yeah. >> [Students] klases. >> Tieši tā. Tas tagad notiek, lai izvēlētos ar klasi.
Atšķirība starp ID un klases šeit atšķirība ir parasti ID ir unikāls
ietvaros neatkarīgi kosmosa jūs meklējat pāri.
Tātad, ja jūs meklējat vairāk nekā visu interneta lapu,
Jums tiešām vajadzētu tikai 1 elements ar šo konkrētu ID, tāpēc šajā gadījumā iesniegt.
Ar klasēm, no otras puses, mēs varam būt vairāk nekā 1 elements vienā lapā
ar to pašu klasi.
Tas varētu būt noderīgi, lai sakot, es gribu, lai izvēlētos visu, kas centrēta uz lapu
nevis tikai 1 lieta.
>> Un visbeidzot, šis pēdējais šeit ir nedaudz sarežģītāks,
bet ko tas notiek, lai izvēlētos no DOM?
[Dzirdams studentu reaģēšanas] >> Kas tas ir?
[Students] Jebkas, kas ir tag. >> Mums ir 2 daļas šeit.
Otrā daļa ir gatavojas teikt, es gribu, lai izvēlētos šos tagus ar tag par ievadi,
tāpēc jebkurš elements, kas ir ieejas tag.
Bet es negribu, lai tikai izvēlēties visus ieejām
jo kaut kā iesniegt pogu varētu būt ieeja
un kaut kā teksta lodziņā varētu būt ieejas.
Tātad ar šiem kvadrātiekavās es saku es tikai gribu, lai izvēlētos šos elementus
kas ir tipa tekstu.
Kaut manā HTML tagu man ir atribūtu sauc veids,
un šī atribūta vērtība ir būt teksts.
Tā kā par šo pirmo daļu šeit?
Pirmais vārds šajā selektora ir forma, tad man ir telpa un tad šis ieguldījums daļa.
Ko tas dara, liekot formu priekšā no tā?
Tas ir gatavojas būtībā ierobežo mūsu vaicājumu.
Tas varētu būt gadījums, ka mums ir dažas izejvielas lapā
ka nav pēcteči formā.
Ko tas būs jādara, ir tas, ka man tikai gribu ieejas tagus, kas ir kaut kur virs tiem
daži vecāki elements formā.
Un tāpēc šādā veidā mēs varam padarīt tos hierarhiskās vaicājumus
tāpēc mums nav tikai izvēlēties viss atbilstības doto selektoru.
Mēs varam veida ierobežos šo vaicājumu uz kaut ko citu.
Tāpēc tagad, ka mēs zinām, kā izvēlēties elementus lapā,
parunāsim mazliet par AJAX.
AJAX ir joprojām ļoti moderns akronīms, kas apzīmē Asynchronous JavaScript un XML.
Tas tikai tā notiek, ka XML ir tikai daži veids, lai pārstāvētu datus.
>> Ka zaudējis popularitāti veida nesen, tāpēc AJAX X nav izmantots visu laiku.
Būtībā, ko AJAX ļauj mums darīt, ir HTTP pieprasījumus
no konteksta JavaScript.
Kad mēs esam mūsu interneta pārlūku, un mēs esam navigāciju ap lapām un mēs noklikšķiniet uz saites,
ko mūsu pārlūku gatavojas darīt, ir padarīt HTTP pieprasījumu neatkarīgi saiti mēs noklikšķiniet.
Bet tas ne vienmēr ir ideāls, jo, ja tas ir gadījumā, tad kā Dāvids teica,
Mums vienmēr ir, lai lietotāji noklikšķina uz iesniegšanas pogas vai noklikšķiniet uz saites
lai padarītu kaut ko notikt kas notiek, lai iesaistītu HTTP pieprasījumu.
Tātad ar AJAX, mēs varam padarīt šos lūgumus vārdā JavaScript.
Tas nozīmē, ja lietotājs mijiedarbojas ar lapu vai kaut kas notiek,
mēs faktiski var veikt programmatisku pieprasījumu uz kādu citu PHP failu uz mūsu mājas lapā
vai kaut kas cits un iegūt datus, ka fails atklepo.
Pieņemsim to apskatīt piemērs AJAX.
Tas ir mūsu CS50 Finanses lapa ar kuru, cerams daži no mums ir pazīstami.
Ja mēs skatāmies uz HTML šīs lapas, mēs redzam šeit, ka esmu pievienojis dažas lietas,
no kuriem viens es esmu devis šo formu ID.
Man teica id = "forma-citāts".
Es esmu darījusi to tikai tāpēc, ka tas notiek, lai padarītu šo mazliet vieglāk izvēlēties no DOM
jo es varu tikai veikt ļoti vienkāršu vaicājumu.
Ko es gribu darīt, šeit ir es gribu noteikt dažas problēmas ar CS50 Finance.
Tātad, ja mēs ejam uz finance.cs50.net,
Katru reizi, kad es gribu, lai saņemtu cenas piedāvājumu, man ir jāaiziet uz šo Get Citēt poga,
un ka Get Citēt poga tad ņem mani uz citu visu lapu.
Un, ja es gribu citu citātu, man ir hit atpakaļ pogu un tad es ierakstiet to,
Man citātu, un es hit pogas Atpakaļ.
Tas tiešām nav labākais lietotāju pieredzi.
Kurš tiešām izmantot šo vietni, ja tā ir, ka nesteidzas akciju cenas?
Tātad, ko mēs gribam darīt ar AJAX ir novērst šo soli dodas uz atsevišķu lapu
lai skatītu rezultātus.
>> Ko mēs esam patiešām tikai lūdzot vai tiešām maza cena,
un tas ir tikai patiešām neliels datu apjoms.
Tāpēc tur nav man nepieciešams iet citu visu HTML lapu,
lejupielādēt pilnīgi jaunu partiju HTML, varbūt lejupielādēt daži vairāk bildes,
daži citi CSS failus tikai man, lai atbildētu uz šo ļoti vienkāršs jautājums
par to, cik daudz tas krājumu izmaksas.
Ar AJAX mēs varam padarīt šo daudz vieglāk.
Mēs redzam šeit lejā, ka es esmu savieno ar JavaScript failu sauc quote.js.
Pieņemsim tiešām atvērt šo failu. Tur nav.
Visas manas JavaScript faili būs jāatrodas HTML
lai interneta pārlūks var piekļūt.
Tad mums ir atsevišķa direktoriju šeit JavaScript,
un tagad šeit ir quote.js.
Augšpusē šo failu tas saka šeit, ka es gribu gaidīt visu lapu jānoslogo
Pirms es mēģinu darīt jebko. Kāpēc ir tā, ka nepieciešams?
Izrādās, ka nākamā lieta es esmu gatavojas darīt, šeit ir sākums meklē elementu
kas atbilst daži selektoru.
Ja šis JavaScript ir kādreiz veikti pirms šīs elements ir ielādēta lapā,
tad viss es mēģinu darīt nav dodas uz darbu
jo es esmu gatavojas, lai mēģinātu izvēlēties kaut ko, kas nav tur vēl.
Tātad šī up augšpusē līnija saka, ka es gribu, lai jūs gaidīt, kamēr viss tiek ielādēta
tāpēc mēs esam garantēts, ka visi elementi, es esmu atrast ir faktiski lapā.
Šī dolāra zīmi šeit nozīmē, ka es esmu, izmantojot bibliotēku sauc jQuery.
Tas jQuery bibliotēka ļauj mums izmantot šos selektori ka mēs tikai paskatījās.
Pasakot $, tad brauc, kā argumentu šo # form-quote,
Es esmu tagad, izvēloties šo formu, mēs vienkārši ņēma apskatīt.
Tagad man ir pārstāvību, kas veido atmiņā kaut kā.
>> Uz šo objektu tagad, šo pārstāvību no formas,
Es esmu tagad, izmantojot funkciju sauc par.
Ko šī funkcija dara, ir tas, kas notiek, lai pievienotu notikuma apdarinātājs.
Gadījumā, ja mēs ejam, lai klausītos, ir kā apgalvo notikums.
Tātad, ja lietotājs uzklikšķina ka Iesniegt pogu vai nospiež Enter,
Šis pasākums notiek ar uguni.
Ar hooking šo, es tagad var ignorēt noklusējuma uzvedību formā.
Bez šī JavaScript, veidlapa jāiesniedz neatkarīgi PHP failu
mēs izmantojām šajā rīcības atribūtu.
Bet tā vietā, es esmu tagad saka, pagaidiet, pagaidiet, pagaidiet, es negribu, lai jūs tiešām darīt.
Es gribu, lai tas notiktu, pirms jūs iet un mēģināt iesniegt kādu PHP failu.
Tagad to, ko es gribu darīt?
Šajā brīdī es vēlos izmantot AJAX kaut ielādēt kādā akciju cena ir.
Pirmā lieta man ir nepieciešams zināt, ko akciju lietotājs meklē augšu.
Lai to izdarītu, es esmu gatavojas izmantot citu selektoru.
Šis ir trešais atlasītāju mēs paskatījās agrāk.
Šis saka, ka es gribu, lai sāktu šo formu elementu ar ID forma-citātu.
Tad kaut kur iekšā šīs veidlapas ir jābūt ieejas elements
kas ir nosaukums simbolu.
Ja mēs atskatāmies uz mūsu HTML, mēs redzējām, ka mums bija ieejas [vārds = simbols].
Tas nozīmē, ka tas notiek, lai izvēlētos, ka lietotājs ir ierakstot šo tekstlodziņu.
Tas ir jauki. Mums ir tekstlodziņu.
Tagad mums ir nepieciešams zināt, kas ir iekšpusē no tā.
Lai to izdarītu, mēs varam zvanīt šo metodi šeit, šis. Val,
un tas saka, ka es zinu, ko tekstlodziņā jums ir.
Es gribu, lai jūs man pateikt, kas tas ir lietotājs ievadījis šajā tekstlodziņā.
Tagad mums ir virkne sauc simbols, kas ir vienāda ar neatkarīgi lietotājs drukāti collas
Tas ir jauki. Mēs varam izmantot šo string tagad, lai mūsu lūgumu.
Tas ir jauna funkcija šeit, tas $,
izņemot mēs vairs būs izvēloties elementus,
mēs spēsim būt aicinot dažādas funkcijas, kas ir sniegta, lai mums ar jQuery.
Tas AJAX funkcija ir tas, kas patiesībā notiek, lai šo HTTP pieprasījumu.
Tāpēc mums ir pateikt to dažas lietas.
Pirmā lieta, mums ir pateikt šo funkciju ir, ja es gribu pieprasījums iet.
Kaut manā projektā man šo failu iekšpusē HTML direktoriju sauc quote.php.
Es varu piekļūt šo failu, mēs redzējām, tāpat kā tas, ja es eju uz localhost / quote.php.
>> Es vēlos, lai mana JavaScript iesniegt prasību uz šo lapu.
Kāda veida pieprasījuma tagad?
Mēs redzējām pirms tam forma ir šo metodi = "post" atribūtu,
un tas nozīmē, ka tas notiek, lai POST pieprasījumu,
tāpēc tas nav gatavojas likt neko URL, nevis GET pieprasījumu,
kas būtu vienkārši tikt atlaists, ja mēs vienkārši piekļūt lapu ar interneta pārlūku, piemēram,.
Tagad mēs esam teica es gribu veikt HTTP POST pieprasījumu
uz lapu atrodas quote.php.
Kad mēs iesniegt veidlapu, atcerieties, ka mēs varētu piekļūt ievades elementiem iekšpusē šīs veidlapas
ar šo $ _POST mainīgo.
Līdz šim stāstā mēs faktiski nav nosūtīts kopā jebkuriem datiem vēl.
Mēs esam tikko teica, ka mēs nesam AJAX pieprasījumu
un šeit pieprasījuma veids mēs nesam.
Tagad mums ir nepieciešams, lai faktiski nosūtīt dažus datus uz lapu.
Lai to izdarītu, mēs varam izmantot šo īpašumu sauc dati.
Par šī īpašuma vērtība ir faktiski asociatīvā masīva.
Iemesls ir tas ļauj mums nosūtīt vairāk nekā tikai 1 gabals datus.
Tieši tāpēc mums ir šie cirtaini bikšturi šeit ligzdotas no šiem citiem cirtaini lencēm.
Šajās asociatīvu masīvu taustiņi ir būs tas pats
kā tie nosaukums piedēvē mūsu formu elementiem.
Tas nozīmē, ka, ja es nosūtīt pa atslēgas simbols,
tas nozīmē, ka mans PHP lapas var piekļūt šos datus ar $ _POST [simbols]
tāpat kā mēs to darījām pirms kad mēs bijām iesniedzot veidlapu.
Un tagad faktiskos datus mēs vēlamies, lai nosūtītu
būs vērtība iekšpuses šo asociatīvā masīva.
>> Mēs uzglabā šo tekstu mainīgo sauc simbolu,
un tāpēc mēs esam nosūtot pa tagad atslēgu simbola
un vērtību neatkarīgi lietotājs drukāti collas
Tagad mēs esam padarījuši šo HTTP pieprasījumu, mūsu PHP fails ir izpildīts,
un tas notiek, lai nosūtītu dažus datus atpakaļ tagad klientam ka tikai padarīja šo lūgumu.
Tagad mums ir nepieciešams, lai reaģētu uz kāda servera mums teica.
Lai to izdarītu, mums ir šis pēdējais īpašumu šeit sauc panākumus.
Šīs veiksmes atslēga vērtība ir faktiski būs funkcija,
un tas ir viens no tiešām labas lietas jūs varat darīt ar JavaScript.
Ne tikai jūs varat būt Ints vai bloki kā vērtības iekšpusē asociatīvā masīva,
mēs varam būt arī funkcija.
Tātad, sakot panākumus, tas ir mans galvenais.
Kols saka šeit nāk vērtību,
un tagad šīs vērtības ir faktiski funkcija.
Tāpēc mums nav nepieciešams, lai dotu šī funkcija ar nosaukumu per se.
Mēs varam tikai teikt, tas būs dažas funkcijas. Tas gatavojas veikt 1 argumentu.
Arguments, lai šo funkciju būs
neatkarīgi servera nosūtīta mūs atpakaļ no pieprasījuma.
Tāpat kā, ja mūsu pārlūkprogramma lūdz, serveris sūta kaut ko atpakaļ
un pārlūkprogramma parāda to,
saistībā ar AJAX mēs vienkārši izteikusi lūgumu, servera nosūtīta kaut ko atpakaļ,
un tagad mēs esam, kas pārstāvēja virkni.
Ar šajā virknē Es tikai gribētu, lai parādītu, ka lapā.
Lai to izdarītu, es esmu gatavojas ir viens pēdējais selektoru.
Es gribu, lai izvēlētos elementu ar ID cenu.
Tas ir tikai tukša div ka es esmu izveidojis lapā,
un es gribu, lai uzstādītu saturu šīs div lai būtu kāds serveris nosūtīja mūs atpakaļ.
Es esmu tiešām modificēta quote.php mazliet.
>> Nevis zvana apmetumu un padarot dažus lapu,
quote.php tagad ir vienkārši gatavojas izdrukāt vērtību krājumu kā virkni.
Tātad, ja Jums bija faktiski apmeklē lapu, jūs vienkārši redzēt, ka mazie stīgu
neatkarīgi no akciju cena ir.
Viens no pēdējā lieta, kas mums jādara, šeit ir tikai pārliecinieties, ka šī funkcija atgriež nepatiess.
Ko tas saka, ka, ja es esmu iekšā notikuma apdarinātāja
un ka notikumu apdarinātājs atgriežas viltus bet nevis patiesa,
tas nozīmē, ka es nevēlos sākotnējo notikumu uguns.
Šajā gadījumā, ja mums nebūtu nekādu JavaScript un mēs iesniedzām formu,
Mūsu interneta pārlūks ir gatavojas teikt: "Es esmu gatavojas nosūtīt šos datus kopā,"
un viņi gatavojas nosūtīt jums uz citu lapu.
Jo mēs esam izmantojot AJAX tagad, nav nepieciešams, lai nosūtītu lietotājam uz citu lapu.
Mēs esam tikai gatavojas parādīt rezultātus dinamiski tajā pašā lapā.
Mēs tiešām negribam viņus doties jebkur, un es gribu palikt tajā pašā lapā.
Tātad, atgriežoties nepatiesa, mēs nodrošinām, ka forma nav darīt, ka mums.
Pieņemsim apskatīt to, kas tas patiesībā izskatās.
Mūsu citāts lapa izskatās vienādi.
Ļaujiet man uzvilkt inspektors noteikti šeit, lai mēs varētu redzēt, kas notiek.
Padariet to mazliet mazāk milzīgs.
Atceraties, ja mēs atvērtu cilni Network, tas ir, ja mēs varam redzēt visus HTTP pieprasījumiem
kas notiek lapā.
>> Par simbolu ļaujiet man rakstīt AAPL un noklikšķiniet Get Citēt.
Tagad mēs redzējām, ka no Apple akciju maksā dažas vairākus dolāru
tikko parādījās lapā, bet URL nemainījās vispār.
Patiesībā, šeit ir HTTP pieprasījums ka mēs tikko veikts.
Mēs veicām POST pieprasījumu quote.php. Tas ir jēga.
Tas ir tas, ko serveris nosūta mūs atpakaļ.
Tas vairs šajā gigantisks HTML dokuments ar attēliem un lietām, piemēram, ka,
tas ir tikai teksta rindiņa, un tad mēs vienkārši parādīts līniju teksta.
Ja mēs ejam atpakaļ uz galvenes un redzēt, ko mēs faktiski nosūtīja iekšpuses šo HTTP pieprasījumu,
mēs varam redzēt šeit lejā, ka mēs nosūtījām pa atslēgas simbols un AAPL vērtību,
kas ir tas, ko lietotājs drukāti collas
Tas ir jauki, bet tas joprojām mazliet kaitinošas.
Man joprojām ir uz šīs pogas, lai iegūtu akciju cenas.
Mēs esam aizņemti cilvēki, un mums nav laika, lai klikšķiniet pogas.
Google sapratu laiciņu atpakaļ, kad viņi īsteno Google Instant.
Ko Google Instant tas ir kā jūs rakstāt tā vienkārši sāk parādot rezultātus jums
tāpēc jums nav jāuztraucas par vēl noklikšķinot uz Meklēt.
Patiesībā, jautri stāsts saistīts ar to.
Kad Google Instant iznāca, cilvēki bija, piemēram, "Eh, tas ir super pārsteidzošs."
"Tas ir tik forši."
Un students leju Stenfordas kurš bija 19 tajā laikā
padarījusi šo vietu sauc YouTube Instant.
Visi YouTube Instant tas ir efektīvi meklēt YouTube uzreiz.
Tātad, nevis ņemot iet uz YouTube.com un hit meklēšana,
kad es sāku rakstīt par YouTube Instant kaut kā CS50,
mēs varētu redzēt šeit, ka tas ir mēģinājums par lēnu interneta savienojumu
apdzīvot šie rezultāti dzīvot.
Lai to izdarītu, mēs faktiski var veikt ļoti vienkāršu izmaiņas uz mūsu quote.js failu.
Tieši tagad mēs esam pievienojot šo notikumu, kad veidlapa tiek iesniegta.
Mums nav īsti vēlaties, lai lietotājs iesniedz šo veidlapu vairs,
tāpēc pieņemsim instead uguns Šis notikums ik reizi, kad lietotājs nospiež taustiņu.
Lai to izdarītu, pieņemsim vispirms mainīt notikumu no iesniedz keyup.
Tas nozīmē, ka nevis gaidīt veidlapa jāiesniedz,
Katru reizi, taustiņa nospiešanas, kaut kas notiks.
Tas vairs ir jēga, lai pievienotu šo keyup notikumu visai formu.
Mēs tiešām tikai rūp šajā meklēšanas lodziņā.
>> Lai atlasītu ka tagad, mēs varam mainīt, ka tas ir, nevis forma-citātu,
forma-citāts, un mēs veikt ieguldījumus (tips = tekstu) vai mēs varētu teikt (nosaukums = simbolu) -
neatkarīgi no mums vēlas.
Tagad tur ir viens pēdējā lieta, kas mums ir jādara.
Atceros noteikti šeit, kad mēs teicām atgriezties viltus
mēs teicām, mēs negribam, ka saistību neizpildes notikuma uguns.
Bet tas tikai tā notiek, ka, ja mēs atslēgt ka tagad,
neatkarīgi no mums rakstīt nav gatavojas parādās pārlūkā vairs
jo tas būtu noklusējuma uzvedību ierakstot tekstlodziņā.
Mēs vairs vēlamies ignorēt, ka, tāpēc pieņemsim iznīcināt šī atgriešanās nepatiesa.
Ja mēs glābt kas un pārlādēt lapu, tagad, kad es sāku rakstīt AAPL
Jūs redzēsiet, ka akciju cena apakšā šeit ir pabeigt automātiski.
Tātad šeit ir CS50 finanses Instant.
Faktiski jautri stāsts par YouTube Instant
ir tas, ka students tikai veida rakstīja tā kā 1-nakts projektu,
un nākamajā dienā viņš tika piedāvāts darbs, ko YouTube CEO.
Tā tik vienkārši, kā tas, jūs CS50 studenti, jūsu gala projekti var saņemt jūs darbu pie YouTube.
Kaut kā tā ir patiešām foršs ideja par galīgo projektu, labi?
Mums bija daži esošo funkcionalitāti, ka mēs vēlējāmies, lai integrētu ar.
Mēs uzlabotu lietotāju pieredzi mazliet,
un pēkšņi meklējot kaut ko par YouTube Instant varētu būt daudz vieglāk
nekā meklējot to regulāri YouTube.
Tā ka ir AJAX īsumā.
>> Piemēros, ka Jāzeps bija parādot, mēs redzējām daudz autocompletes,
un šie autocompletes ir ļoti, ļoti parocīgs, jo mums nav atcerēties -
Piemēram, ja jums nav atcerēties akciju cenu Apple
un mēs vienkārši zinām, tas ir aa kaut, nevis tikai man sakām
"Šī lieta īpatsvars maksā tik daudz naudas,"
Es gribētu veida gribētu zināt, ko krājumi sāk ar AA.
Mēs varam darīt, ka tiešām labi ar bootstrap bibliotēku, kas jau iekļauti
iekšpusē CS50 Finance.
Ja jūs nākt šeit uz JavaScript tagu un ritiniet uz leju līdz Typeahead,
tas ir tikai jauka spraudnis, ka kāds jau rakstīja par mums,
un mēs varam viegli izmantot savu funkcionalitāti, kā šis.
Es drukāti un šeit ir dažu valstu, kas sākas ar A sarakstā
Pieņemsim, ka es domāju, ka tas ir tiešām forši un tas ir laiks man iekļaut šo par manu lapu.
Izrādās, ka tas ir ļoti, ļoti vienkārša.
Pieņemsim lēkt pār šeit quote3.js.
Mans fails izskatās mazliet atšķirīgs.
Noteikti šeit visu savu AJAX sīkumi ir tas pats.
Es gribu, lai ielādētu krājumu dati bez iet uz citu lapu.
Bet tagad es vēlos izmantot šo spraudni.
Bootstrap dokumentācija ir lieliski piemēri par to, kā tieši es varu darīt.
Es gribu teikt: "Lūk, ieejas, ka es gribu, lai automātiski pabeigt uz"
un es esmu gatavojas nosaukt šo funkciju sauc typeahead,
un kas notiek, lai apstrādātu visu Typeahead stuff mums.
Tas sāktu sarakstu, tas būs jādara visiem mūsu filtrēšanu.
Vienīgais, tas jāzina, ir kādi dati mēs autocompleting tālāk.
Tāpēc es uzzināju šo atslēgu vienkārši lasot dokumentāciju un meklē piemērus.
Ja es arī tā atslēga avota, vērtība šajā atslēgā
ir tikai daži masīvs lietas es gribu automātiski pabeigt tālāk.
Šis mainīgais nāca no šo citu failu.
Es atvērt symbols.js.
>> Šī symbols.js ir tikai tas tiešām, tiešām liels masīvs satur virknes
Visu šo akciju simbolus no NASDAQ.
Ja es gribu, lai pārietu atpakaļ uz HTML, tā jharvard, vhosts, globalhost, html, veidnes,
quote_form.
Tā ka tagad sauc quote3.js, ļaujiet man mainīt JavaScript failu es esmu arī šeit.
Tagad man ir quote3.js, tāpēc es esmu gatavojas slodze šī atsevišķā JavaScript failu,
viens, kas ir, ka bootstrap AutoComplete.
Tagad, kad es lēkt atpakaļ uz pārlūku, pārlādēt lapu, un es sāku rakstīt AA,
tur ir mana automātiskās pabeigšanas. Un tas bija tiešām tik vienkārši.
Man bija 1 līnijas kodu, kas vienkārši teica: "Šeit ir lietas, es vēlos automātiski pabeigt uz"
un pēkšņi man ir šī ļoti, ļoti jauks funkcionalitāti ar ne visai daudz piepūles vispār.
Kā jūs attīstīt mājas lapas un īpaši priekšgala pusē lietām,
jūs gatavojas atrast šo ir gadījums daudz.
Ir daudz, daudz, daudz tiešām atdzist bezmaksas bibliotēkas tur
kas padara to super viegli darīt lietas, kā šis.
Vai kāds domā par jebkādām vienkārši autocompleting par šo lielo sarakstā simbolu trūkumi?
Kas varētu būt kaut kas nav labākais ar šo pieeju?
Yeah. >> [Students] Laiks, ja jums ir daudz [dzirdams]
Yeah. Tieši tagad mēs esam lejupielādē šo milzīgo JavaScript failu un tur simbolu daudz.
Un tāpēc, ja mums ir ton stuff, tas varētu veida palielināt latentumu ne tikai meklējot
bet arī lejupielādējot faktisko failu.
Lieliski. Kaut kas cits?
Tieši tagad tur nav reālu sajūtu nozīmi.
Ja es rakstīt A, uzņēmumi, kas parādās šeit
varētu būt populārākais uzņēmumi, kas sākas ar A
>> Pirms es nokļūt Apple, tā varētu veikt dažas vairāk rakstzīmju, lai atrastu to, ko es esmu meklē.
Tas AutoComplete nav šo sajūtu nozīmi.
Tas ir tikai gatavojas teikt, "Jebkas, kas atbilst es esmu gatavojas parādīt."
Vietā, ka es gribētu, lai kaut kā integrēt kāda saistība manā meklējumiem.
Ja es eju pa šeit Yahoo! Finance, finance.yahoo.com,
Ja es mēģinātu iekļūt simbols uz Yahoo! Finance lapu
un es sāku rakstīt GOOG, man ir šī jauku sarakstu ar lietām.
Skaidrs, ka tas izskatās Yahoo! Finanses dara kaut ko vairāk gudrs šeit.
Viņiem ir svarīgas, un viņi arī ir papildu informācija
tāpat vārdu krājumu.
Tas ir kaut kas, es nevaru īsti iegūt tikai ar savu akciju saraksta simboliem.
Es gribu šo un tāpēc es esmu gatavojas ņemt to.
Lai to izdarītu, pieņemsim darīt dažas lietas.
Pieņemsim vispirms atvērt inspektors šajā lapā
jo mēs redzējām, ka šī lapa ir ne pārkraušanas vispār,
tāpēc tas ir iespējams, izmantojot AJAX kaut ko iekraušanas savus datus.
Mēs varam atrast, kādi dati ir iekraušanas.
Ja es noklikšķiniet uz šo cilnē Network, tie būs visiem pieprasījumiem, kas sāk karsēt.
Tagad, ja es rakstīt goo, mēs varam redzēt, ka es tikko saņēmu jaunu HTTP pieprasījumu.
Tas ir iespējams, ja, ka dati nāk no.
Un tik tiešām, ja es paskatos šo URL, kas ir mazliet dīvaini nosaukts,
mēs varam redzēt, ka tas ir tieši tur, kur Yahoo nosūtot off datus no.
>> Es esmu izveidojis atsevišķu failu sauc suggest.php kas ir ļoti līdzīgs garā uz uzmeklēšanas funkcijas.
Tas būtībā gatavojas veikt vaicājumu Yahoo URL, saņemt atpakaļ daļu no datiem,
un nosūtīt to atpakaļ uz mani.
Tagad, nevis izmantojot šo lielo, milzīgu sarakstu ar simboliem,
Es varu izmantot Yahoo jaukas nozīmība, lietas,
un man nav, lai lejupielādētu, ka masveida JavaScript failu.
Es esmu tikai gatavojas nojaukt faktiski attiecīgos akciju simbolus.
Pieņemsim lēkt kas.
Tātad html, JS. Mēs esam tagad quote4.
Tagad mēs vairs izmanto ka liels sarakstu JavaScript faili.
Bet tur ir neliela veida dizaina problēmu šeit.
Mēs esam teica, ka AJAX ir asinhrons.
Ko tas nozīmē, ka tad, kad es veicu AJAX pieprasījumu,
tik labi šeit, 8 līnijas, tas ir, ja mans AJAX pieprasījums ir faktiski atlaists.
Pieņemsim, ka tagad man ir daži kodu šeit lejā, kas gatavojas darīt daži sīkumi
patīk brīdinātu lietotāju, vai kaut ko mainīt lapā.
Kas nav gatavojas notikt, ir pārlūks nav gatavojas gaidīt, lai šo pieprasījumu, lai turpinātu
pirms nāk uz leju un hitting šo līniju.
Tas ir asinhronas daļa.
Tas notiek, lai šo pieprasījumu un saka: "Kad esat beidzis,
"Atgriezties un zvanu, ka funkciju, kas es tev teicu, lai izsauktu iekšā panākumus."
Tas nozīmē, ka mēs varam ne tikai lejupielādēt visus krājumus iepriekš.
Mums ir nepieciešams, lai pieprasījumu un gaidīt kaut atgriezties.
Tas nozīmē, ka, pirms mēs varētu vienkārši pateikt Bootstrap,
"Lūk saraksts ar lietām, ko es gribu, lai jūs automātiski pabeigt tālāk."
Mēs vairs nevaram darīt vairs, jo mēs nezinām
ko mēs vēlamies, lai faktiski AutoComplete tālāk.
Par laimi, Bootstrap domāju par šo, jo tie ir gudri puiši tur,
un tie faktiski deva mums vēl viens veids, lai ielādētu šo Typeahead spraudni.
Pirms, šī avota īpašuma vērtība bija tieši liels masīvs lietas automātiski pabeigt tālāk.
>> Tagad avots īpašums ir faktiski funkcija,
un šīs funkcijas mērķis ir izdomāt ko lietas automātiski pabeigt uz esam.
Kā tas notiek, lai izdomāt ir tas gatavojas lūgt Yahoo! Finance
ko vislabāk lietas automātiski pabeigt ir.
Lai to izdarītu, es esmu gatavojas veikt ļoti līdzīga Ajax pieprasījumu.
Es esmu gatavojas pieprasīt šo lapu pie suggest.php.
Es gribu nosūtīt pa simboliem joprojām.
Un tagad mana veiksme, Bootstrap dokumentācija man teica
ka, lai aizpildītu šo sarakstu ar lietām,
visi man ir nepieciešams darīt, ir iet šajā masīvā tagad uz atzvanīšanas funkciju.
Bet pagaidiet minūti.
Ja tas ir vajadzēja būt masīva un AJAX sūta mani atpakaļ teksts,
kā tas ir iespējams?
Tas ievieš jaunu veidu datu apmaiņu sauc JSON.
Šajā gadījumā mēs esam ne tikai nosūtot atpakaļ vienkāršu teksta virkne.
Tagad mums ir darīšana ar šo sarežģītāku saraksta akciju simbolu.
Šie akciju simboli var ietvert arī lietas, piemēram, uzņēmuma nosaukuma vai pašreizējās cenas.
Tikai izmantojot liels ilgi virkni ka nav formatēts nekādā prognozējamā veidā
nav būs labākais veids, kā iegūt šos datus no Yahoo servera man
tādā veidā, ka es varētu viegli saprast.
JSON ir tehnoloģija, kas ņem priekšrocība tam, kā mēs radīt asociatīvas bloki ar JavaScript.
Tas izskatās daudz, piemēram, JavaScript asociatīvās masīvs,
un patiesībā, tas ir tāpēc, ka tā ir.
JSON stendi JavaScript Object notāciju.
Tas ir būtībā vienojusies formātā datu pārsūtīšanu un atpakaļ.
Šeit tas JSON objektu vai tas JSON asociatīvais masīvs
sūta man datus par kursu.
>> Šīs masīva atslēgas ir lietas, piemēram protams, ka ir vērtība CS50,
un noteikti šeit mēs varam redzēt, ka es varētu būt vērtību, kas ir masīvs.
Man nav darīt lietas, piemēram parsētu stīgām un meklēt komatiem
un darīt trakas lietas, piemēram, ka.
Jo tas ir deklarēts šajā JSON formātā,
JavaScript un jQuery jau ir funkcijas, lai pārvērstu string
ka izskatās šādi JSON vērā faktisko JavaScript asociatīvā masīva
ka mēs varam strādāt.
Doing tas ir tik vienkārši, kā sakot, ka vairs nav šo failu, suggest.php,
nosūtot mani atpakaļ vienkārši virkni teksta,
bet es zinu, tas būs sūtīt man atpakaļ JSON.
Tas nozīmē, ka JSON var pārvērst JavaScript asociatīvās masīvs.
Un tā jQuery, es vēlētos, lai jūs darīt, ka par mani.
Tas nozīmē, ka šī atbildes parametrs šeit,
Tas vairs nav tikai virkne.
Jo mēs esam teicis jQuery ka šeit nāk dažas JSON,
jQuery būs pietiekami gudrs, lai saka: "Tu gribēji JSON?"
"Es esmu gatavojas pārvērst kas stājas asociatīvā masīva jums."
Pieņemsim patiesībā to apskatīt cilnē Network kad mums ir quote4.js.
Mēs mainīt šo un pārlādēt lapu.
Tagad es esmu gatavojas rakstīt-atkal.
Esmu veikti pāris pieprasījumus suggest.php, bet tagad šī reakcija,
nevis tikai virknes, tā ir JSON.
Tāpēc man ir atvērta cirtaini lencēm, sakot: "Te nāk asociatīvā masīva."
>> Pirmais un vienīgais galvenais šī asociatīvā masīva sauc simboli,
un tad šeit ir masīvs visas attiecīgās simboliem
nāk tagad no Yahoo! Finance, ne no šī gigantiskā saraksta.
Tas ir, kā es varētu vienkārši aizpildīt šo AutoComplete spraudni
ar dažiem datiem, ka nav ievestas no vietējā failu, kas jau iepriekš
bet no kaut kas cits.
Izrādās, ka mēs faktiski var izmantot tehnoloģiju, ko sauc JSONP,
vai JSON ar polsterējumu, kas novērš šo suggest.php starpnieks.
Bet tā vietā to dara, pieņemsim vietā ņemt apskatīt, kā es varētu uzlabot šo pat vairāk.
Man tiešām patīk bootstrap s Typeahead. Tas ir patiešām jauki.
Bet mēs esam iegūt labi JavaScript un mēs vēlamies, lai veida darīt ar sevi,
varbūt to apskatīt to, ko šis spraudnis varētu darīt.
Pieņemsim vairs izmantot šo Typeahead lieta,
un pieņemsim mēģināt padarīt šo sarakstu ieteikto krājumu paši.
Šeit quote6.php mēs esam gatavojas sākt to pašu ceļu.
Katru reizi, kad kāds veidiem kaut kas, mēs vēlamies, lai AJAX pieprasījumu.
Tas ir līdzīgi mūsu sākotnējā CS50 Finance instant.
Nevis to, pieprasījumu quote.php,
mēs tagad padarīt lūgumu šajā pašā failā kā līdz šim, tas suggest.php,
kas ir tikai gatavojas pull datus no Yahoo! Finance.
>> Atkal, mēs joprojām gaida JSON, bet tagad, jo Typeahead nedara tas mums,
mums arī ir nepieciešams nosūtīt pa vērtību, kas ir iekšpusē no pašreizējā teksta lodziņā.
Tagad mēs zinām, ko jautāt Yahoo! Finance par,
un tāpēc tagad šeit ir funkcija, kas mēs vēlamies izpildīt tiklīdz pieprasījums pabeidz.
Mums nav spraudnis, lai sarakstā mums,
tāpēc šeit ir, ja mēs patiešām gatavojas būvēt ieteikumu sarakstu.
Lai to izdarītu, līdzīgi kā PHP mēs saliktās šie lielie virknes HTML
tad mēs drukā tos, mēs varam darīt to pašu precīzu lieta JavaScript.
Vispirms mēs esam gatavojas sākt šo virkni sauc ieteikumi,
un tas virkne ir tikai gatavojas būt mazliet HTML.
Mēs vēlamies, lai to sarakstu ar lietām, tāpēc mēs esam gatavojas sākt ar šo porn,
un tagad mēs esam gatavojas atkārtot pār visu simbolu, kas tika atdotas atpakaļ pie mums.
Atcerieties, jo mēs esam teica datatype: "JSON", tas nav virkne.
Šis ir jau masīvs mums. Tas ir tiešām forši.
Mēs varam vienkārši teikt: "Es gribu, lai jūs pievienot saraksta elementu."
Mēs nodot to iekšā ar elementu pusē, ka,
mēs arī tā klasi ierosinājumus, lai mēs zinām, kas tas ir,
un tagad šeit ir simbols, ka mēs saņēmām atpakaļ no Yahoo! Finance.
>> Kad mēs esam izveidojuši elements par katru simbolu esam tikuši atpakaļ,
Mēs vienkārši vēlamies, lai aizvērtu no saraksta.
Tāpēc tagad ieteikumi pārstāv šo maz HTML fragmentu
ka tad, kad likts uz lapas būs saraksts ar lietām, ko mēs sagaidām.
Tagad tiešām likts ka lapā.
Lai to izdarītu, es esmu faktiski radījis citu tukšu div, un es esmu devis ID ierosinājumus.
Daudz, piemēram, mēs noteikti saturu div kas varētu parādīt cenu krājumu datos,
mēs tagad vienkārši vēlas noteikt saturu šo div lai kāds šī virkne ir
kas satur šos simbolus.
Izmantojot šo HTML metodi, tas ieteikumi mainīgs, šī virkne ir virkne HTML.
Es gribu, lai jūs pieņemt, ka HTML un nodot to iekšpusē div sauc ieteikumi.
Mēs esam tikko pievienots kaut DOM tagad.
Mēs esam pievienojuši dažus jaunus elementus uz DOM ka mēs tagad varam parādīt lapā.
Paskatīsimies, kā tas izskatās.
Ja mēs slodze quote6 un tagad mēs atkal,
Tagad, kad es sāku rakstīt AAPL, mums vairs nav, ka bootstrap AutoComplete,
bet tagad mums ir šis saraksts, kas mēs, sevi.
Tas ir nedaudz neglītāks nekā bootstrap Typeahead, piemēram,
bet tas ļauj mums darīt viena cita lieta.
Kad mēs meklējām tajā bootstrap spraudnis,
Mēs redzējām, ka tad, kad mēs autocompleted, viena no automātiskās pabeigšanas vērtībām bija AAPL.
Tas varētu nebūt tik noderīgi.
Kā lietotājs, es varētu uzreiz atpazīt visus akciju simbolu.
Ko es esmu, iespējams, vairāk varētu atpazīt ir uzņēmuma faktiskie vārdi.
Tāpēc tas nebūtu īsti lietderīgi, ja nevis pasakot AAPL
šo teica kaut ko līdzīgu Apple Inc
Jo mēs esam velmēto tas sevi, mēs varam patiesi viegli darīt.
Pieņemsim atvērt mūsu pēdējo piedāvājumu failu šeit, lai quote7.
>> Pats. Esmu tikko izveidojis citu PHP failu, kas atgriezīsies pie mums vairāk nekā tikai simboliem.
Tas arī dod mums atpakaļ uzņēmuma nosaukumu.
Un tāpēc mēs darām to pašu. Mēs nesam AJAX pieprasījumu.
Kad pieprasījums ir pabeigts, mēs spēsim izpildīt šo funkciju šeit,
un šī funkcija ir gatavojas veidot lielu virkni elementu.
Bet atšķirība ir tā, ka no šiem sarakstiem vērtība ir vairs tikai simbols,
tas tagad nosaukumu.
Tāpēc mums ir viena neliela problēma.
Kad mēs izmantojam mūsu lookup, mums ir nepieciešams kaut nodot to simbolu.
Mēs nevaram iet lookup kaut ko līdzīgu Microsoft Corporation.
Mums vajag nodot to MSFT.
Kad mēs rakstiski HTML, mums ir daudz jauku iebūvētiem atribūtiem.
Varētu būt saistīts ar to href vai klasi.
Bet tas, ko mēs tiešām ir nepieciešams tagad ir par katru no šīm saitēm
lai būtu akciju simbolu saistīti ar to.
Nav iebūvēts HTML atribūtu akciju simbolu,
bet par laimi, HTML5 ļauj mums radīt mūsu pašu iezīmes, lai tās neatkarīgi no mums vēlas.
Pasakot datu simbolu, es esmu ieviesusi jaunu atribūtu
kura vārds es tikai veido, un tas ir labi, jo es ievaddaļā to ar šiem datiem.
Mēs ejam, lai saglabātu iekšpusē tur simbolu no krājumu tagad.
Ko tas nozīmē, ka, lai gan mēs esam parādot vērtību uzņēmuma nosaukumu
iekšpusē mūsu AutoComplete, mēs joprojām atceroties simbolu
kas ir saistīta ar katra uzņēmuma.
Veids, kā mēs darām, kas ir iekšā šo elementu pati.
Tātad tas nozīmē, ka mums ir nepieciešams veikt vēl vienu maiņu.
Kad mēs noklikšķiniet uz tā tagad mums ir faktiski izmantotu simbols atribūtu
nevis tikai tā vērtība.
Ja mēs atpakaļ uz augšu, mēs piešķiram notikuma apdarinātājs ierosinājumus.
Ja viens no šiem priekšlikumiem ir noklikšķinājuši tagad, es gribu kaut ko darīt.
Ko es gribu darīt, ir mainīt vērtību, kas ievades lodziņā.
Tagad es vēlos, lai noteikt šo pašu val funkciju.
>> Tātad bez jebkādiem argumentiem šī val funkcija atgriež jums to, kas jau ir tekstlodziņā,
bet, ja jūs arī tā virkne, tas notiek, lai šo stīgu un nodot to tekstlodziņā.
Es esmu izvēloties savu tekstlodziņu tādā pašā veidā.
Tā nosaukums ir simbols iekšā forma-citātu.
Tagad es esmu nosūtot to vērtību atribūta datu simbolu.
Šī lieta šeit ir jauns, tas $ (this).
Ko tas attiecas, ir elements, kas tika uzklikšķināt.
Mēs varam redzēt, ka mēs esam ne pievienojot klikšķi notikumu
katram elementam ar klasi ierosinājumu individuāli.
Drīzāk mēs esam tuvojas tas nedaudz savādāk.
Tā vietā mēs esam sakot, ja kaut iekšpuses šo ieteikumi div,
kas jāatceras ir tikai konteiners šajā sarakstā,
ja kaut kas iekšā šī div ir noklikšķinājuši, un tas ir klasi ierosinājumu,
Es gribu šo notikumu uguns.
Būtībā, ko tas nozīmē, ka mēs varam darīt, ir, mēs varam atkārtoti šo pašu notikumu apdarinātājs
par visiem sarakstā lietām.
Tāpēc mums nav, ir viena notikuma apdarinātājs par pirmo elementu
un atšķirīgu notikumu apdarinātājs par otro elementu.
Mēs var tā vietā teikt: "Es gribu pats notikumu apdarinātājs piemērot visam manā sarakstā."
Bet mums kaut kā zināt, kuras elements tika noklikšķināts.
Šis "šo" atslēgvārds ir tikai to.
Tas ir objekts, kas bija tikai uzklikšķināt lietotājs.
Ja es tikai noklikšķinājis arī 3 saiti, tas ir elements šajā 3. saiti,
kas nozīmē, ka es varu saņemt savu atribūts, datu simbolu,
ko mēs zinām, ir jāsatur simbols, kas ir saistīta ar uzņēmumu es tikko uzklikšķināt.
Ja mēs pārietu atpakaļ uz mūsu finanšu lapā,
mēs varam redzēt, ka šobrīd, kad es sāktu rakstīt kaut ko līdzīgu MSFT,
mēs vairs iegūt tikai akciju simbolus,
mēs tagad kļūst faktisko uzņēmumus.
Bet, kad es noklikšķiniet uz vienas no šīm sabiedrībām,
mēs varam redzēt, ka mēs esam patiešām populating tekstlodziņu nevis ar uzņēmuma nosaukuma
bet ar kāds bija saglabāta iekšā šo datu atribūtiem.
Un tāpēc, ja es tiešām pārbaudīt vienu no šiem elementiem, ar labo noklikšķinot uz tā
un noklikšķinot Pārbaudiet Element, mēs faktiski var redzēt, kā tas izskatās.
>> Atcerieties, tas ir kaut kas, ka mēs esam radījuši iekšpusē ka cilpa
kad mēs bijām veidošanā ka virkne HTML.
Mēs varam redzēt, ka šis datu simbols ir vērtība MSFT, kas ir lieliski.
Tas, ko mēs gaidījām.
Tas ir simbols, un tas, kā mēs saņēmām vērtību, kas bija nepieciešams, lai izmantotu
iekšpuses šo tekstlodziņā.
Tas ir pietiekami, lai citātu veidā, jo tas ir sava veida garlaicīgi.
Pieņemsim tikai veikt dažas ātri uzlabojumus mūsu portfeļa lapā.
Ja jūs esat izmantojis CS50 Finance uz brīdi, un jūs sākat pirkšanas un pārdošanas daudz krājumu,
beidzot šī tabula ir gatavojas iegūt diezgan liels,
un jūs gatavojas vēlaties akciju biržas, protams.
Kad tabula ir ļoti, ļoti liels, tas varētu būt noderīgi, lai lietotājs varētu mēģināt meklēt pār to.
Iekšpusē meklēšanas lodziņa, ja es sāktu rakstīt kaut ko līdzīgu Disney
un meklē manu Mickey Mouse noliktavā, mēs varam redzēt, ka tabula ir tagad filtrēšanas
pamatojoties uz to, ko es tikko drukāti collas
Šī funkcionalitāte izskatās super sarežģīti, bet tas ir ļoti, ļoti viegli
ar jQuery un JavaScript.
Tas portfolio.php fails ietver JavaScript failu sauc portfolio.js.
Pieņemsim to apskatīt to.
Tātad html, JS, portfolio.
Lūk, kur mēs darām, ka meklējot uz galda.
Pirmā lieta man ir nepieciešams darīt, ir pievienot notikumu apdarinātājs šajā tekstlodziņā
jo mēs zinām, ka mēs vēlamies, lai mūsu filtrēšanas funkcija uguns
Katru reizi, kad lietotājs nospiež kaut ko, jo mums nav laika meklēšanas pogas.
Pirmā lieta, kas mums jādara, ir skaitlis, ko lietotājs meklē,
tāpat kā mēs to darījām agrāk.
Šis atslēgvārds attiecas uz pašreizējo elementu lietotājs mijiedarbojas ar.
>> Jo lietotājs mijiedarbojas ar meklēšanas lodziņu,
$ Tas atspoguļo meklēšanas lodziņu,
tāpēc this.val dod mums to, kas iekšpusē meklēšanas laukā lietotājs šobrīd rakstāt.
Tātad, tagad, ko mēs vēlamies darīt, ir, mēs vēlamies atkārtot pār visu rindu
iekšpusē mūsu galda.
Lai atlasītu visus mūsu tabulas rindas, es sniedza ka šī tabula ID galda portfeļa,
un katra rinda ir pārstāvēta ar TR elements,
tāpēc šis pārslēgs ir gatavojas atgriezties man liels masīvs
visu manā tabulas rindas.
Tagad es gribu atkārtot pār šo masīvu.
Es varētu jums par cilpu, bet jQuery faktiski sniedz mums jauku funkciju sauc "katrs."
Ko katrs dara, ir viena ņem vienu argumentu,
un šis arguments ir funkcija.
Ko tā gatavojas darīt, ir tas gatavojas piemērot šo funkciju, lai katru elementu iekšpusē šajā sarakstā.
Šī funkcija aizņem vienu argumentu, kas ir e,
un kad šī funkcija ir izpildīta, šī e gatavojas aizstāt ar pirmo rindu,
tad otrā rindā, un pēc tam trešajā rindā.
Ar šo ceļu, tas ir tas pats, kas darbojas uz cilpas
un tad norādītas pašreizējo elementu, pamatojoties uz indeksu iekšpusē jūsu par cilpu.
Katrā iterācijā, par katru no šiem tabulas elementiem,
Es gribu, lai pārbaudītu, vai teksta elementa - tekstu šūnā iekšpusē rindas -
sērkociņi, ko es esmu meklē.
Šis liels garš virkne komandu ir kā es to varētu darīt.
Pirmkārt, atkal, tas tagad attiecas uz - jo tas ir iekšā no jauna funkcija -
tas tagad pašreizējo rindu tabulā.
Es gribu, lai to pašreizējo rindu tabulā,
un es gribu, lai saņemtu visu savu bērnu.
Atcerieties, DOM ir hierarhiska koku,
kas nozīmē, ka elementi ir vairāki bērni.
>> Tas. Bērni funkcija ir gatavojas atgriezties ar mani atpakaļ masīvs visus elementus
ka ir bērni, kas šajā gadījumā, rindu tabulā.
Tas ir vienkārši šūnas iekšpusē rindas.
Es tikai vēlos, lai meklētu pa pirmo šūnu.
Tas. Pirmā funkcija saka man pirmais elements šajā masīvā.
Tad teksts funkcija saka saņemt mani tieši to iekšpusē šīs šūnas
jo es gribu, lai meklētu pa šo tekstu.
Visbeidzot, pieņemsim konvertēt to uz mazo
lai mēs varam darīt teksta case nejutīgas vaicājumiem.
Visbeidzot, mēs gribam, lai redzētu, kas iekšpusē tabulas virkne satur virkni Mēs esam meklē.
IndexOf funkcija JavaScript dara tikai to.
Tā stāsta par to, vai šī virkne satur citu virkni.
Ja tā ir taisnība, ka šūna satur to, ko es esmu meklē,
tad es gribu, lai pārliecinātos, ka tas ir pierādīts.
Parādīt metode saka, "Parādīt elements."
Ja tas tā nav, tad tas nozīmē, ka kāds es esmu meklējot nav ietverts
šajā rindā, un tāpēc es gribu, lai paslēptu ir no lietotāja.
Kas sasniedz ka jauki filtrēšanas efekts kur vairs mēs redzam visu tabulu.
Ja jūs interesē, kā padarīt šo svārsts, kā arī,
mēs pēc avotu internetā. Bet tas ir patiešām vienkārši.
JQuery ir laba metodes šiem animāciju un manipulējot CSS īpašības.
Tātad, tas ir tas par mani.
>> Kas tad ir priekšā? Kā jūs redzēsiet pēc dažām dienām, gala projektu priekšlikums ir saistīts.
Gala projekti priekšlikums uzdot jums dažus jautājumus,
bet starp tiem būs trīs stūrakmeņi -
Viens bija "labs" pavērsiens, viens labāks pavērsiens, un viens labākais.
Ideja ir tiešām palīdzēs jums puiši noteikti jūsu cerības
lai minimāli jums būs apmierināti ar rezultātu savu galīgo projektu
un tas būs "labs", ciktāl jums ir bažas.
Bet tad interesēs kļūst jums sasniegt tikai mazliet, lai kaut ko labāku
vai kaut labākais, mēs arī sakārtotu un push jūs pret ka labi.
The CS50 Hack-a-Thon, tikmēr ir pēc dažām nedēļām.
Raksturīgi, mēs šo par loterijas pamata, jo par procentiem,
bet izredzes ir, mēs ņemšu dažus simtus no mums autobusu satiksme no Hārvardas laukums
līdz Kendall Square, kur Microsoft ir skaista iekārtas trāpīgi sauc par "NERD" -
New England pētniecības un attīstības centrs.
Mēs tur nokļūt ap 20:00 Mums būs ēdienu.
Ap 01:00 mums būs daži vairāk pārtikas.
Ap 05:00, ja jūs joprojām nomodā mēs dodies uz IHop vai aizvedīs atpakaļ uz Campus.
Mērķis ir nodoties gala projektu
līdzās klasesbiedriem un darbiniekiem.
Tad dažas dienas vēlāk ir CS50 gadatirgus,
kas patiešām nozīmē būt iespēja, lai jūs puiši, lai parādītu savu darbu
un sasniegumi par pusgadu
bet berzes pleciem ar otru un iegūt sajūtu, ko katrs darīja.
Ar to teica, liels paldies Tommy un Jāzepam
un mēs redzēt jūs pirmdien.
[Aplausi]