[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]