1 00:00:00,000 --> 00:00:02,700 [Powered by Google Translate] [Nedēļa 9, Turpinājums] 2 00:00:02,700 --> 00:00:05,160 [David J. Malan - Hārvarda] 3 00:00:05,160 --> 00:00:07,020 [Tas ir CS50. - CS50.TV] 4 00:00:07,940 --> 00:00:13,340 >> Tas ir CS50. Tas ir beigu 9 nedēļas. Liels paldies. 5 00:00:13,340 --> 00:00:15,310 Beidzot. Nedēļa 9. I got to. 6 00:00:15,310 --> 00:00:18,590 Šodien mēs turpinām mūsu saruna par web programmēšanas 7 00:00:18,590 --> 00:00:21,660 ar aci uz gala projekts, nevis tāpēc, ka jums ir kaut ko darīt interneta 8 00:00:21,660 --> 00:00:25,610 galīgajiem projektiem, bet tāpēc, ka vai nu gala projektiem vai pēc CS50 9 00:00:25,610 --> 00:00:29,000 Tas noteikti ir virziens, kurā mūsdienu programmatūras notiek. 10 00:00:29,000 --> 00:00:31,770 Un tomēr tas nav reāli viegla lieta. 11 00:00:31,770 --> 00:00:35,040 Patiesībā, viens no cieta lietas darīt, ir aspekts dizainu. 12 00:00:35,040 --> 00:00:38,600 >> Piemēram, ar dizainu mēs domājam faktiski kļūst lietotāja interfeisu 13 00:00:38,600 --> 00:00:40,420 vai lietotāju pieredzi labi. 14 00:00:40,420 --> 00:00:43,200 Es daresay - un mēs zinām no nesenā problēmu kopumu 15 00:00:43,200 --> 00:00:45,960 kad no jums maz izskanējuši savu gripes par kādu gabals programmatūru 16 00:00:45,960 --> 00:00:49,000 vai aparatūra, kas infuriates tevi, vai par universitātes vai off - 17 00:00:49,000 --> 00:00:51,930 tur vietu, kas tur daudz, tur ir aparatūras, kas tur daudz, 18 00:00:51,930 --> 00:00:53,900 šāda veida sucks. 19 00:00:53,900 --> 00:00:58,730 Bet realitāte ir tāda, ka to, ka lietas, kas ir viegli izmantot vēl tomēr ir spēcīgs 20 00:00:58,730 --> 00:01:00,550 ir ļoti grūts uzdevums. 21 00:01:00,550 --> 00:01:03,680 Tāpēc šodien es jautāju Jāzeps un Tomijs pievienoties mani šeit 22 00:01:03,680 --> 00:01:06,680 lai mēs varētu sarunāties, gan par dizaina 23 00:01:06,680 --> 00:01:09,090 un kāda veida domāšanas procesus vajadzētu sākt iet cauri galvu 24 00:01:09,090 --> 00:01:12,040 kad jūs dizains jūsu gala projektu, jūsu nākotnes centienos. 25 00:01:12,040 --> 00:01:15,040 Un tad ar Tommy palīdzības mēs apskatīt dažus no īstenošanas detaļas. 26 00:01:15,040 --> 00:01:18,440 Kā jūs varat būt dažas redze uz papīra vai savā prātā 27 00:01:18,440 --> 00:01:20,760 ka jūs varat izpildīt programmiski 28 00:01:20,760 --> 00:01:24,030 izmantojot kādu no tehnoloģijām un metodēm, mēs esam tikko sāka runāt par to, 29 00:01:24,030 --> 00:01:29,080 proti JavaScript un kaut ko vēl jaunāku, proti AJAX, Asynchronous JavaScript. 30 00:01:29,080 --> 00:01:32,950 Tas ļauj jums izveidot visu dinamiskāku par lietotāja interfeisu 31 00:01:32,950 --> 00:01:35,780 ko fetching vairāk un vairāk datu pakāpeniski no servera. 32 00:01:35,780 --> 00:01:38,560 Tātad mēs redzēsim dažus no šiem fragmentus, kā arī šodien. 33 00:01:38,560 --> 00:01:41,800 Kā malā, ja jūs interesē koncentrējoties datorzinātnēs 34 00:01:41,800 --> 00:01:45,010 vai minoring datorzinātnēs, zinu, ka šo piektdien pusdienlaikā 35 00:01:45,010 --> 00:01:48,750 jo Maxwell Dworkin 221 būs pica notikums 36 00:01:48,750 --> 00:01:50,780 kur var uzzināt nedaudz vairāk par datorzinātnes. 37 00:01:50,780 --> 00:01:54,860 Pa ceļam ārā pa durvīm šodien jums būs iespēja uzņemt neoficiālu ceļvedis CS Harvard. 38 00:01:54,860 --> 00:01:57,290 Mēs nodot to uz trash kannas ārpus pie vidukļa augstumā 39 00:01:57,290 --> 00:01:59,750 tā, ka, ja jūs vēlaties, lai greifers šo un uzzināt nedaudz vairāk par CS, 40 00:01:59,750 --> 00:02:02,480 kas būs tur, lai jūs, jo tas bija 0 nedēļas. 41 00:02:02,480 --> 00:02:06,500 Arī tad, ja jūs vēlaties, lai pievienoties mums CS50 pusdienām šo piektdien plkst 01:15, 42 00:02:06,500 --> 00:02:09,800 dodies uz cs50.net/lunch. 43 00:02:09,800 --> 00:02:13,260 Bez papildu ADO, es jums skolotāja kolēģi Joseph Ong. 44 00:02:13,260 --> 00:02:19,190 Hi. [Aplausi] 45 00:02:19,190 --> 00:02:20,770 Paldies. 46 00:02:20,770 --> 00:02:24,780 Pirmo reizi es uzzināju par dizainu bija klasē šeit sauc CS179. 47 00:02:24,780 --> 00:02:28,040 >> Toreiz profesors stāstīja mums stāstu par citu profesora 48 00:02:28,040 --> 00:02:31,640 kurš bija devies uz viesnīcu un izmanto krāniem. 49 00:02:31,640 --> 00:02:35,630 Vai kāds man pateikt, ko arī 2 izaugumi uz kreiso un labo darīt? 50 00:02:35,630 --> 00:02:39,080 [Students] Karstā un aukstā. >> Karstā un aukstā. Labi. 51 00:02:39,080 --> 00:02:41,430 Ko jūs parasti gaidīt, vai ne? 52 00:02:41,430 --> 00:02:46,960 Tas pēc tam, izmantojot krānu profesors grib dušā, un viņš ieņēmumus, lai izmantotu šo. 53 00:02:46,960 --> 00:02:51,310 Viņš domā kreisi un pa labi puses ir par karstu un aukstu, labi? 54 00:02:51,310 --> 00:02:55,470 Bet var kāds man pateikt, ko tie patiesībā darīt? 55 00:02:55,470 --> 00:02:58,060 Jebkuras rokas? 56 00:02:58,060 --> 00:03:01,740 [Dzirdams studentu reaģēšanas] >> Viens ierosinājums ir? 57 00:03:01,740 --> 00:03:05,860 [Dzirdams studentu reaģēšanas] >> Temperatūras? 58 00:03:05,860 --> 00:03:10,460 Tātad viens no tiem kontrolē temperatūru un citām kontrolēm? >> [Students] Ūdens spiediens. 59 00:03:10,460 --> 00:03:12,350 Ūdens spiediens. Labi. 60 00:03:12,350 --> 00:03:15,100 Tas profesors ienāk šajā un, domāšanas viņi ir kontrolēt karsts un auksts, 61 00:03:15,100 --> 00:03:21,470 Izrādās tiesības vienu, ko viņš domā ir par karstu, visu ceļu uz augšu 62 00:03:21,470 --> 00:03:23,560 jo viņš vēlas ņemt siltu dušu. 63 00:03:23,560 --> 00:03:28,100 Nu, tie nav īsti atbilst līdz, lai viņš saņem šo ne ļoti jautru pieredzi 64 00:03:28,100 --> 00:03:31,110 par atrašanos aukstu dušu, un mēs visi zinām, kas tas jūtas līdzīgi. 65 00:03:31,110 --> 00:03:33,620 Šis ir piemērs dizaina plaisāt. 66 00:03:33,620 --> 00:03:37,040 Ko es domāju ar šo ir viņa cerības no krāna 67 00:03:37,040 --> 00:03:39,420 nesakrita kāda nāca no dušas, 68 00:03:39,420 --> 00:03:41,780 kas ir sava veida žēl par viņu. 69 00:03:41,780 --> 00:03:44,990 Tātad šis ir piemērs dizaina plaisāt, kas notiek reālajā dzīvē. 70 00:03:44,990 --> 00:03:48,020 Bet mēs redzam visādas citiem uzņēmumiem, kā arī. 71 00:03:48,020 --> 00:03:50,390 Mēs droši vien nav fani MBTA sistēmas. 72 00:03:50,390 --> 00:03:55,560 Tas ir metro sistēma faktiski Londonā, kas saka: "Šī poga nav izmantota." 73 00:03:55,560 --> 00:04:00,220 Kāpēc tas ir pat tur? Kāpēc mēs pat aprūpi? 74 00:04:00,220 --> 00:04:02,810 Kad es biju bērns, kas ir tech savvy viens mājā, 75 00:04:02,810 --> 00:04:05,050 kad dators būs crash, mana mamma nāks pie manis, 76 00:04:05,050 --> 00:04:07,060 parādot man šo ekrānu un jautā man, kas noticis. 77 00:04:07,060 --> 00:04:09,210 >> Pat es nezinu, ko tas nozīmē. 78 00:04:11,890 --> 00:04:14,700 [Smiekli] Kas? 79 00:04:16,950 --> 00:04:18,019 [Smiekli] 80 00:04:18,720 --> 00:04:23,050 Dažreiz mēs justies kā programmatūras izstrādātājiem ir tikai velcēšanas mums. 81 00:04:23,050 --> 00:04:28,460 Kā lietotājiem mēs esam līdzīgi, "Kas notiek kāds pateikt mums.?" 82 00:04:28,460 --> 00:04:32,140 Tas viss nāk uz leju, lai jautājums par dizainu. 83 00:04:32,140 --> 00:04:34,650 Dizainu, kā mēs varam redzēt, ne tikai par estētiku, 84 00:04:34,650 --> 00:04:37,230 tas nav par to, kā lietas izskatās. 85 00:04:37,230 --> 00:04:41,720 Mēs redzam, ka šis maz pop-up nekā šeit tiešām izskatās diezgan jauki. 86 00:04:41,720 --> 00:04:45,290 Tā ir piliens ēnu fonā, tā ir robežu rādiusi notiek. 87 00:04:45,290 --> 00:04:47,550 Tas ir sava veida diezgan. 88 00:04:47,550 --> 00:04:51,480 Tas nav īsti labi izstrādāta, jo tas nav ļoti lietotājam draudzīgi. 89 00:04:51,480 --> 00:04:54,920 Ka maz pop-up, kas nāk uz augšu, nav īsti man nekādu informāciju 90 00:04:54,920 --> 00:04:58,450 par to, kas notiek, tas nav man pateikt kaut kā lietotājs 91 00:04:58,450 --> 00:05:01,400 par to, kā atgūt no šīs kļūdas. 92 00:05:01,400 --> 00:05:05,190 Mēs vēlamies, lai domāt par lietām, ka dizains nav. 93 00:05:05,190 --> 00:05:06,670 Pirmkārt, tas nav estētika. 94 00:05:06,670 --> 00:05:10,800 Tas arī nav pildīšanai jūsu app ar t nevajadzīgas funkcijas. 95 00:05:10,800 --> 00:05:14,890 Ja jūs esat taizemiešu restorānu, jūs, iespējams, nevēlaties būt zobārsts, tajā pašā laikā. 96 00:05:14,890 --> 00:05:17,720 Un ar Facebook Jautājumi, nevis, ka daudzi cilvēki to izmanto 97 00:05:17,720 --> 00:05:21,130 un tas nebija īsti pamatā ko viņi ēkas. 98 00:05:21,130 --> 00:05:24,200 Un tā tas ir jauki domāt par ne tik daudz to daudzumu lietas 99 00:05:24,200 --> 00:05:26,390 ka jūs liekot uz jūsu pieteikumu, bet kvalitāte 100 00:05:26,390 --> 00:05:28,910 un kā jūs gūstat ka lietotāja pieredzi labāk 101 00:05:28,910 --> 00:05:32,540 ko faktiski uzlabojot tā, ko jums jau ir. 102 00:05:32,540 --> 00:05:37,040 >> Īsumā, dizains stāsta mums, ko mums vajadzētu būvēt. 103 00:05:37,040 --> 00:05:41,950 Piemēram, ja mēs ēkā kaut kas ļauj mums meklēt lietas uz augšu, 104 00:05:41,950 --> 00:05:45,970 piemēram, Google, piemēram, mums vajadzētu darīt lietas tādā veidā 105 00:05:45,970 --> 00:05:48,950 kas prasa lietotājam veikt daudz klikšķu, lai saņemtu to, ko viņi vēlas, 106 00:05:48,950 --> 00:05:52,580 vai mums vajadzētu darīt to tādā veidā, piemēram, ar Google Instant vai AutoComplete 107 00:05:52,580 --> 00:05:54,970 kas ļauj mums iegūt mūsu rezultātus ātrāk? 108 00:05:54,970 --> 00:05:58,740 Inženierzinātņu ietver, piemēram, Tommy jums parādīs, faktiski veidot to. 109 00:05:58,740 --> 00:06:01,890 Ir daudz veidu dizains. 110 00:06:01,890 --> 00:06:06,070 Piemēram, ja jūs esat celtniecības kaut izvietot kaut 111 00:06:06,070 --> 00:06:09,770 kādā trešās pasaules valstī, kur nav daudz elektrības vai ka daudz tehnoloģiju, 112 00:06:09,770 --> 00:06:11,440 Jums ir veidot to, ko jūs esat celtniecības 113 00:06:11,440 --> 00:06:14,210 tādā veidā, kas viegli ļauj piekļūt cilvēki tur. 114 00:06:14,210 --> 00:06:18,290 Bet kāda veida citu dizaina lēmumus varētu tur būt 115 00:06:18,290 --> 00:06:21,850 vai varētu būt iesaistīts kaut kas līdzīgs šim? 116 00:06:23,690 --> 00:06:25,660 Yeah. Es redzu roku. 117 00:06:25,660 --> 00:06:37,200 [Dzirdams studentu reaģēšanas] >> labo. Tieši tā. Pieejamība ir viena lieta. 118 00:06:37,200 --> 00:06:40,870 Daudzi cilvēki nedomā par to, "Kas par manu lietotāju?" 119 00:06:40,870 --> 00:06:43,160 tāpat kā nu spektra galējībām. 120 00:06:43,160 --> 00:06:47,770 Man ir lietotāji, kuri varētu būt invaliditāte, ka es neesmu domāju par 121 00:06:47,770 --> 00:06:50,590 un es esmu tikai domājot par projektēšana par vispārējo lietotājam. 122 00:06:50,590 --> 00:06:52,630 Internets ir pieejams ikvienam mūsdienās, 123 00:06:52,630 --> 00:06:54,870 un es būtu projektēšana tiem cilvēkiem, kā labi. 124 00:06:54,870 --> 00:06:58,620 Kāda veida citiem dizaina lēmumiem jūs varētu darīt? 125 00:06:58,620 --> 00:07:00,690 Jā. >> [Students] Izmaksas. 126 00:07:00,690 --> 00:07:02,680 Izmaksas. Ļoti labi. 127 00:07:02,680 --> 00:07:08,060 Vēl viena lieta, mēs varētu balstīt mūsu dizaina lēmumus, ir izmaksas. 128 00:07:08,060 --> 00:07:13,130 Ja mēs esam uzņēmums, jūs vēlaties, lai izveidotu kaut ko, kas nav nepieciešams daudz, izmaksas, lai ražotu 129 00:07:13,130 --> 00:07:17,720 bet var pārdot par īpaši augstas izmaksas vai var iegūt mums kādu peļņu. 130 00:07:17,720 --> 00:07:21,540 >> Tie visi ir dažāda veida dizainu, bet, kad mēs esam ēkas kaut internetā 131 00:07:21,540 --> 00:07:25,120 vai tad, kad mēs esam ēkas kaut kas, iespējams, nav izmaksas, ka daudz, lai izveidotu šim, 132 00:07:25,120 --> 00:07:28,630 piemēram, interneta lietojumprogrammas - jums nav mest daudz kapitālu tajā 133 00:07:28,630 --> 00:07:30,900 lai padarītu kaut ko, kas reāli darbojas - 134 00:07:30,900 --> 00:07:33,490 ko mēs esam vairāk uztrauc, ir lietotāju pieredzi. 135 00:07:33,490 --> 00:07:36,390 Mēs to saucam par lietotāja centrētu dizains. 136 00:07:36,390 --> 00:07:41,550 Būtībā tas, ko lietotājs centrētu dizains ietver ir liekot sevi kas savu lietotāju kurpes. 137 00:07:41,550 --> 00:07:44,870 Ja kāds pierakstās, ko es esmu ēka, 138 00:07:44,870 --> 00:07:48,250 viņi acīmredzot nāk uz manu konkrēto pieteikumu ar mērķi prātā, 139 00:07:48,250 --> 00:07:50,280 ar uzdevumu viņi vēlas, lai pabeigtu. 140 00:07:50,280 --> 00:07:53,650 Un jūsu uzdevums ir ne tikai palīdzēt viņiem pabeigt šo uzdevumu 141 00:07:53,650 --> 00:07:57,930 bet lai palīdzētu viņiem pabeigt šo uzdevumu tādā veidā, kas ir efektīva, saprātīga 142 00:07:57,930 --> 00:08:01,900 un, kā kāds cilvēks teica tur, pieejama. 143 00:08:01,900 --> 00:08:03,750 Kāda efektivitāte nozīmē? 144 00:08:03,750 --> 00:08:08,050 Efektivitāte nozīmē, cik ātri tas mans lietotājs pabeigtu uzdevumu, ņemot vērā manu interfeisu. 145 00:08:08,050 --> 00:08:11,650 Paiet daudz klikšķu, lai tie varētu nokļūt no vienas vietas uz otru? 146 00:08:11,650 --> 00:08:14,630 Tas ir garlaicīgs? Vai viņiem ir veikt daudz atkārtojošos uzdevumus? 147 00:08:14,630 --> 00:08:17,140 Mēs vēlamies padarīt šo procesu pēc iespējas efektīvāku 148 00:08:17,140 --> 00:08:20,070 tāpēc tie nav darīt tās lietas veidu. 149 00:08:20,070 --> 00:08:24,230 Attiecībā uz intuitiveness, tas ir, piemēram, ja lietotājs izskatās manu saskarni, 150 00:08:24,230 --> 00:08:27,240 tas ir viegli tos iegūt no vietas uz vietu? 151 00:08:27,240 --> 00:08:30,390 Tas ir viegli, lai tie varētu izdomāt, ko viņi ir noklikšķiniet manā interfeisā 152 00:08:30,390 --> 00:08:33,770 Lai viņiem, lai sasniegtu mērķi vai uzdevumu, viņi vēlas sasniegt? 153 00:08:33,770 --> 00:08:37,520 >> Un, visbeidzot, kā viens cilvēks teica tur, pieejamība ir ļoti svarīga. 154 00:08:37,520 --> 00:08:39,640 [Vīrietis runātājs] Tas nāk ar pieejamību lietām, piemēram, redzes, 155 00:08:39,640 --> 00:08:42,740 patīk, kā es varu tiešām dizains kaut kāds, kurš ir akls? 156 00:08:42,740 --> 00:08:46,460 Oh. Cilvēkiem, kuri nevar redzēt vispār, mums ir kaut ko sauc ekrāna lasītāji. 157 00:08:46,460 --> 00:08:49,070 Ko jums vajadzētu darīt, ir jums vajadzētu izveidot savu mājas lapu veidā 158 00:08:49,070 --> 00:08:52,020 ka, piemēram, konkrētas tehnoloģijas, ko mēs saucam - 159 00:08:52,020 --> 00:08:53,590 Ir daudz lietas tagad. 160 00:08:53,590 --> 00:08:55,660 Es domāju, ka ir ekrāna lasītāji sauc JAWS. 161 00:08:55,660 --> 00:08:58,410 No šīm lietām daudz paļaujas uz to, ko mēs saucam platība noteikumus 162 00:08:58,410 --> 00:09:02,010 lai lasītu, lai lietotājam, kas ir uz lapas. 163 00:09:02,010 --> 00:09:05,480 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 164 00:09:05,480 --> 00:09:09,130 faktiski var uzņemt saturu lapā un faktiski var parādīt saviem lietotājiem, 165 00:09:09,130 --> 00:09:13,630 ja jūs nevarat redzēt, vismaz jūs varat saprast saturu lapā. 166 00:09:13,630 --> 00:09:16,190 Yeah. Labi. 167 00:09:16,190 --> 00:09:23,410 Pietiekami runājam par labu dizainu. Parunāsim par sliktu dizainu. 168 00:09:23,410 --> 00:09:25,220 Tās ir lietas, kas jums nevajadzētu darīt. 169 00:09:25,220 --> 00:09:27,890 Vai kāds man pateikt par savu pieredzi ar Craigslist 170 00:09:27,890 --> 00:09:32,190 un ko viņi domā ir ne tik liels par šo dizainu? 171 00:09:33,690 --> 00:09:36,430 Jā. >> [Students] Es domāju, ka tur ir pārāk daudz vārdu vienā jomā. 172 00:09:36,430 --> 00:09:39,350 Pārāk daudz vārdu, labi? Pilnīgi milzīgs. 173 00:09:39,350 --> 00:09:42,400 Jūs nākt uz šo lapu, un jūs sagaidīs ar visu ķekars lietas šeit 174 00:09:42,400 --> 00:09:43,860 kas varētu pat nav svarīgi, lai jums. 175 00:09:43,860 --> 00:09:47,010 Piemēram, tu dzīvo vienā valstī, kas nesākas ar šo burtu. 176 00:09:47,010 --> 00:09:48,690 Pieņemsim, ka jūs dzīvojat Texas vai kaut. 177 00:09:48,690 --> 00:09:53,790 >> Jums ir, lai ritinātu visu ceļu uz leju lapu, lai nokļūtu vietā jums ir. 178 00:09:53,790 --> 00:10:00,320 Es esmu no Boston, tāpēc ļaujiet man izskatās Masačūsetsā. Kur ir Massachusetts? 179 00:10:00,320 --> 00:10:03,270 Ak, tas ir labi šeit. Ak, tas ir Boston. Labi. 180 00:10:03,270 --> 00:10:09,070 Apskatīsim Boston. [Smiekli] 181 00:10:09,070 --> 00:10:12,250 Diezgan milzīgs, labi? 182 00:10:12,250 --> 00:10:16,400 Neērts lietas tur. [Smiekli] 183 00:10:17,320 --> 00:10:19,470 Pieņemsim, ka es esmu meklē kaut kur dzīvot. 184 00:10:19,470 --> 00:10:24,130 Cik daudzi cilvēki ir faktiski izmantoti Craigslist? Tonnas jums. 185 00:10:24,130 --> 00:10:30,960 Ir diezgan slikti veidi, kā apskatīt to, bet pieņemsim apskatīt šo. 186 00:10:35,130 --> 00:10:38,970 Kāda ir atšķirība starp img un PIC atšķirība? Vai kāds man pateikt? 187 00:10:41,350 --> 00:10:42,830 Tur tiešām nav nekādas atšķirības. 188 00:10:42,830 --> 00:10:47,710 Tie nozīmē tieši to pašu, bet apzīmējums ir atkarīgs par viņiem kādu iemeslu dēļ. 189 00:10:48,980 --> 00:10:53,560 Ja es noklikšķiniet uz Has attēls, nekas nenotiek lapā. 190 00:10:53,560 --> 00:10:57,490 Man tiešām ir noklikšķiniet meklēt vēlreiz kaut kas notiktu. 191 00:10:57,490 --> 00:11:02,430 Kas varētu būt labāks dizaina lēmums, ko varētu darīt tur? 192 00:11:03,820 --> 00:11:08,030 Ja es esmu noklikšķinot uz šo filtru, es, iespējams, vēlas, lai filtrētu, ko šī konkrētā darbībā 193 00:11:08,030 --> 00:11:09,970 vai konkrētās kategorijas. 194 00:11:09,970 --> 00:11:14,450 Tātad tā vietā, lai nospiediet Search atkal, es varētu tikai automātiski darīt filtrēšanas 195 00:11:14,450 --> 00:11:17,060 kārtot Google stilu, kur viņi to dara uzreiz. 196 00:11:17,060 --> 00:11:20,440 [Malan] Bet ne formas, kā mēs esam redzējuši viņus līdz šim ir jābūt fiziski jāiesniedz 197 00:11:20,440 --> 00:11:23,170 hitting Enter vismaz vai nospiežot pogu? 198 00:11:23,170 --> 00:11:26,830 Kā jūs esat redzējis tik tālu, jūs faktiski ir uz Iesniegt darīt tās lietas. 199 00:11:26,830 --> 00:11:30,090 >> Bet kā Tomijs parādīs otrā, faktiski ir veidi, lai jūs 200 00:11:30,090 --> 00:11:33,010 piemēram, ja jūs noklikšķiniet uz šī lieta, tas var automātiski nosūtīt 201 00:11:33,010 --> 00:11:38,840 ko mēs saucam AJAX pieprasījumu un saņemt datus atpakaļ un filtrēt rezultātus uzreiz. 202 00:11:38,840 --> 00:11:41,340 Ir tonnas lietas, kas ir nepareizi ar šo interfeisu. 203 00:11:41,340 --> 00:11:43,530 [Malan] Vai jūs meklēt Cambridge? 204 00:11:43,530 --> 00:11:47,030 Tur ir kaut nedaudz nenormāls šeit, kur jums rūp Cambridge 205 00:11:47,030 --> 00:11:54,790 un vēl jūs saņemat Westford, Spring Hill, West Newton un līdzīgu. 206 00:11:54,790 --> 00:11:57,930 Droši vien nav ideāls. >> Droši vien ne ideāls. 207 00:11:57,930 --> 00:12:03,900 Kā varētu es varētu izdarīt lietotāja pieredzi labāk par šo konkrēto lapu? 208 00:12:03,900 --> 00:12:07,340 Jā. >> [Students] Instrukcijas. 209 00:12:07,340 --> 00:12:09,500 Labi. Instrukcijas kāda veida jēga? 210 00:12:09,500 --> 00:12:14,630 [Students] Piemēram, lieta pirmo reizi lietotājiem, kuriem nav pat zināt, ko Craigslist 211 00:12:14,630 --> 00:12:17,320 vai jūs nezināt, ko jūs vajadzēja darīt. 212 00:12:17,320 --> 00:12:20,150 Tiesības. Tātad izskaidrot, ko Craigslist ir šajā lapā, ir svarīgi. 213 00:12:20,150 --> 00:12:23,490 Mēs faktiski var pateikt lietotājiem ko šī lapa ir faktiski par. 214 00:12:23,490 --> 00:12:27,090 Ja es esmu tikai apmeklējot šo, es redzu veselu ķekars vietās. Es pat nezinu, ko tie nozīmē. 215 00:12:27,090 --> 00:12:29,730 Bet vēl svarīgāk, vienkārši apskatot šo saskarni, 216 00:12:29,730 --> 00:12:35,530 atceros, man bija, lai ritinātu uz leju ton lietas atrast konkrētu kopienu 217 00:12:35,530 --> 00:12:37,560 ka es tiešām jārūpējas arī par to. 218 00:12:37,560 --> 00:12:39,820 Kas ātrāks veids, kā es varētu darīt? Jā. 219 00:12:39,820 --> 00:12:43,290 [Students] Sadala tos augšup austrumu, rietumu reģionos. >> Labi. 220 00:12:43,290 --> 00:12:47,460 Es varētu sadalīt tos vairāk kategorijās, kas varētu man palīdzēt ātrāk noteikt 221 00:12:47,460 --> 00:12:49,820 kā nokļūt uz šo konkrēto vietu. 222 00:12:49,820 --> 00:12:54,510 [Students] Put nolaižamo sarakstu. >> Tiesības. Labi. 223 00:12:54,510 --> 00:12:58,240 Es varētu izmantot nolaižamo izvēlni, jo mums ir fiksēts kopumu lietām 224 00:12:58,240 --> 00:13:00,100 un mēs varētu parādīt tos nolaižamajā izvēlnē. 225 00:13:00,100 --> 00:13:02,240 Tādā veidā tas nav aizņem tik daudz vietas uz ekrāna. 226 00:13:02,240 --> 00:13:05,630 Bet vēl labāk, nekā tas, ko mēs varam darīt? 227 00:13:05,630 --> 00:13:09,220 Jā. >> [Dzirdams studentu reaģēšanas] >> Vai varat teikt, ka atkal? >> [Students] Meklēt lodziņš. 228 00:13:09,220 --> 00:13:11,260 Jā, meklēšanas lodziņš. Tas ir lieliski. 229 00:13:11,260 --> 00:13:16,430 Ko mēs varam reāli darīt ir, ja mēs atskatāmies uz slaidi, meklēšanas lodziņā. 230 00:13:16,430 --> 00:13:21,520 AutoComplete. Ļoti vienkāršs veids, kā meklēt, izmantojot rezultātus, kas jūs zināt, ir komplektā. 231 00:13:21,520 --> 00:13:25,980 Ja es sāktu rakstīt BO, tikai parādiet man visus rezultātus, kas ir BO iekšpusē no tiem. 232 00:13:25,980 --> 00:13:29,030 Tādā veidā es varētu ļoti viegli atrast konkrētu vienu es gribu iet uz 233 00:13:29,030 --> 00:13:32,390 tā vietā, lai ritinātu šajā patiešām lielā sarakstā. 234 00:13:32,390 --> 00:13:37,450 >> Tie ir visu veidu tiešām zemu piekārtiem augļu, ka kāds, kurš īsteno Craigslist 235 00:13:37,450 --> 00:13:42,500 faktiski var darīt, lai padarītu to pieredzi mājas lapā daudz labāk par to īpaši lietotājam. 236 00:13:42,500 --> 00:13:46,370 Labi. Pietiekami runājam par sliktu vietnēs. 237 00:13:46,370 --> 00:13:49,410 Parunāsim par Facebook. 238 00:13:50,880 --> 00:13:54,390 Kad Facebook iznāca, un jo īpaši Facebook fotogrāfijas, 239 00:13:54,390 --> 00:13:57,870 tur bija daudz citu pakalpojumu sniegšanas laikā, kas varētu darīt tieši to pašu lietas. 240 00:13:57,870 --> 00:14:00,740 Viņi varētu organizēt savas fotogrāfijas albumos. 241 00:14:00,740 --> 00:14:03,360 Ko jūs varētu darīt, ir, jūs varētu organizēt tos komplekti, kā arī. 242 00:14:03,360 --> 00:14:06,070 Jūs varētu organizēt tos pēc datuma. Jūs varētu darīt visas šīs konkrētās lietas. 243 00:14:06,070 --> 00:14:11,710 Bet vai kāds zina, ko veic Facebook fotogrāfijas eksplodēt laikā, kad tas tika izlaists? 244 00:14:11,710 --> 00:14:15,080 Jā. >> [Studentu] Tags. >> Birkas. Tieši tā. 245 00:14:15,080 --> 00:14:21,300 Mums ir Milo nekā šeit, kas ir mūsu suns talismans ar šo CS50 bandana. 246 00:14:21,300 --> 00:14:24,810 Jūs varat redzēt, ka mums ir šis marķēšanas funkciju vidū. 247 00:14:24,810 --> 00:14:28,240 Un ko veic Facebook fotogrāfijas tik interesanti no lietojamības viedokļa 248 00:14:28,240 --> 00:14:34,130 ir tas, ka faktiski ļāva cilvēkiem, izmantojot šo iesaistīt savus draugus ar savām fotogrāfijām. 249 00:14:34,130 --> 00:14:37,680 Facebook, jo viņu mājas lapā ir īpaši sociālajā, 250 00:14:37,680 --> 00:14:40,750 tas ir par ēkas šāda veida sociālo atmosfēru. 251 00:14:40,750 --> 00:14:42,620 Kas uzlaboja pieredzi fotogrāfijas daudz vairāk 252 00:14:42,620 --> 00:14:46,390 jo viņi patiešām varētu sākt, sakot: "Tie ir savienojumi starp cilvēkiem, 253 00:14:46,390 --> 00:14:49,220 un tie ir fotogrāfijas par cilvēkiem jūs tiešām rūp. " 254 00:14:49,220 --> 00:14:52,200 Daļa no tā ir arī sava veida narcisms. 255 00:14:52,200 --> 00:14:54,980 Cilvēkiem patīk būt atzīmēts fotogrāfijas un lietām, piemēram, ka. 256 00:14:54,980 --> 00:14:58,510 Kaut kas nav nekas labs cilvēka iezīme, 257 00:14:58,510 --> 00:15:01,910 tajā pašā laikā tā ir balstīta uz labu dizainu lēmumus 258 00:15:01,910 --> 00:15:04,860 jo cilvēki patiešām rūp lietas, kā šis. 259 00:15:04,860 --> 00:15:07,190 Tā ka ir Facebook fotogrāfijas. 260 00:15:07,190 --> 00:15:09,800 >> Bet parunāsim Facebook kopumā. 261 00:15:09,800 --> 00:15:13,400 Es esmu pārliecināts, ka daudzi cilvēki šeit ir viedoklis par Facebook, 262 00:15:13,400 --> 00:15:16,430 abi labs dizains lēmumus un slikts dizains lēmumus. 263 00:15:16,430 --> 00:15:20,270 Tāpēc pieņemsim vent vai būt laimīgs. 264 00:15:23,480 --> 00:15:26,450 Come on. Es zinu visu par jums izmantot Facebook. 265 00:15:26,450 --> 00:15:30,970 Kādam ir jābūt kaut ko sliktu pateikt, vai kaut ko labu teikt par to. Jā. 266 00:15:30,970 --> 00:15:35,060 [Students] Jo ziņu barības tur lietas man nav īsti rūp daudz. 267 00:15:35,060 --> 00:15:37,740 Jaunumi barības nav parādīt daudz lietas, jūs varētu nav rūp. 268 00:15:37,740 --> 00:15:41,660 Jums ir draugiem par Facebook, kas jums nav tikušies uz 2 vai 3 gadiem 269 00:15:41,660 --> 00:15:43,860 un jūs redzat to jaunumi rezultāti popping up jūsu ziņu barību 270 00:15:43,860 --> 00:15:45,870 un jums nav īsti rūp to. 271 00:15:45,870 --> 00:15:48,700 Facebook ir faktiski veikti centieni, lai padarītu šo labāk, 272 00:15:48,700 --> 00:15:53,150 un viņi faktiski mēģināja virzīt attiecīgos rezultātus uz augšu jaunumi barības, kā par vēlu 273 00:15:53,150 --> 00:15:58,300 lai jūs faktiski redzēt lietas ar draugiem, kas attiecas uz jums vai jūsu tuviem draugiem. 274 00:15:58,300 --> 00:16:01,110 Kaut kas cits? Jā. 275 00:16:01,110 --> 00:16:06,400 [Dzirdams students atbildi] >> Vai varat teikt, ka atkal? 276 00:16:06,400 --> 00:16:10,140 [Students] Reklāmas ir samērā kluss. >> Kādā ziņā? 277 00:16:10,140 --> 00:16:16,370 [Dzirdams studentu reaģēšanas] Viņiem nav gaismu ekrānā, piemēram, reklāmkarogus. 278 00:16:16,370 --> 00:16:17,760 Labi. Tas ir labi. 279 00:16:17,760 --> 00:16:25,030 Ja jūs atceraties internetam no '90s - >> [Malan] es tur biju. >> Viņš bija tur. [Smiekli] 280 00:16:25,030 --> 00:16:29,210 Jūs varētu atcerēties mirgo Gif fonus, sparkly lietas, 281 00:16:29,210 --> 00:16:31,570 GeoCities stils veida lietas. 282 00:16:31,570 --> 00:16:34,080 Tas tiešām nav piemērs labu dizainu 283 00:16:34,080 --> 00:16:36,690 jo tas tiešām novērš uzmanību no satura. 284 00:16:36,690 --> 00:16:39,590 Jēlas mākslas vietne izmanto, lai ir animācijas gifs kā savu fona 285 00:16:39,590 --> 00:16:41,800 un jūs varētu lasīt neko lapā, 286 00:16:41,800 --> 00:16:44,870 bet es domāju, kāds tiešām runāja ar viņiem, un tagad tas ir nedaudz atšķirīgs. 287 00:16:44,870 --> 00:16:48,940 [Malan] Tas ir daudz labāk tagad. >> Tas ir daudz labāk, tagad, kā jūs varat redzēt. >> [Malan] Ak jā. 288 00:16:48,940 --> 00:16:56,020 Vienkārši lieliski, tikai - Jā. Labi. 289 00:16:56,020 --> 00:17:00,560 >> Daļa no tā ir arī padarīt jūsu lapas, iespējams ļoti minimālisma un ļoti saprotami 290 00:17:00,560 --> 00:17:05,690 tāpēc lietas par lappuses plūsmu veidā, kas ir ļoti loģisks un nav iegūt tādā veidā viens otru. 291 00:17:05,690 --> 00:17:11,849 Kāda veida citas lietas ir labas par Facebook vai slikti par Facebook? 292 00:17:11,849 --> 00:17:15,730 Pieņemsim tikai ir dizaina saruna šeit. 293 00:17:19,470 --> 00:17:21,339 Oh. Kur? Yeah. 294 00:17:21,339 --> 00:17:25,640 [Students] Jaunā Timeline sistēma ļauj jums meklēt personas profila par savu pagātni. 295 00:17:25,640 --> 00:17:28,119 Ooh, Timeline. 296 00:17:28,119 --> 00:17:30,280 Grafiks ir lieliska lieta, jo tas ļauj jums sviru savus draugus 297 00:17:30,280 --> 00:17:33,300 atpakaļ, kad viņi bija vidusskolā. 298 00:17:35,160 --> 00:17:38,060 Grafiks ir labi, jo tas ļauj jums filtrēt, izmantojot satura daudz ātrāk, 299 00:17:38,060 --> 00:17:41,500 tas ļauj jums atrast lietas, kas citādi būtu veikti jums ļoti ilgu laiku, lai atrastu 300 00:17:41,500 --> 00:17:45,840 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ā. 301 00:17:45,840 --> 00:17:48,910 Bet tad tur ir arī sava veida negatīvie ka attiecībā uz lietotāju pieredzi. 302 00:17:48,910 --> 00:17:51,190 Kas varētu būt? 303 00:17:51,190 --> 00:17:56,780 Liels vārds, kas sākas ar P-R. >> [Students] Konfidencialitātes. >> Konfidencialitāte, labi? 304 00:17:56,780 --> 00:17:59,970 Privātums ir milzīgs lietotāju pieredzi jautājums. 305 00:17:59,970 --> 00:18:07,190 Šī ir viena no lietām, ko es naida visvairāk par Facebook tagad. [Smiekli] 306 00:18:07,190 --> 00:18:09,000 [Malan] Kā man tagad. 307 00:18:09,000 --> 00:18:11,380 Dāvids nav realizēt tas patiesībā notika līdz vakar. 308 00:18:11,380 --> 00:18:14,560 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. 309 00:18:14,560 --> 00:18:16,880 [Malan] neērts daļa bija man bija faktiski ignorējot viņu, 310 00:18:16,880 --> 00:18:21,040 un es nezināju, viņš zināja, ka es ignorējot viņu. [Smiekli] 311 00:18:21,040 --> 00:18:24,030 Privātums ir milzīgs jautājums. 312 00:18:24,030 --> 00:18:28,670 Vai kāds šeit man pateikt, kādi varētu būt slikti par Facebook privātuma 313 00:18:28,670 --> 00:18:32,270 neņemot vērā faktu, ka viņi dara lietas, kā šis? 314 00:18:32,270 --> 00:18:37,240 Kas tas ir īpaši grūti izdarīt attiecībā uz Facebook privātuma? 315 00:18:37,240 --> 00:18:40,340 Ka veida ir vadošais jautājums. 316 00:18:41,680 --> 00:18:43,930 Jā. >> [Students] Hide fotogrāfijas no dažiem cilvēkiem. 317 00:18:43,930 --> 00:18:46,170 Tiesības. Tieši tā, lai slēptu savu fotogrāfijas no dažiem cilvēkiem. 318 00:18:46,170 --> 00:18:51,290 Viņi ir šo mazo, maz pogu augšējā labajā, kas ļauj pārslēgt privātumu foto. 319 00:18:51,290 --> 00:18:56,360 Viņu privātuma iespējas ir ļoti atšķīrās dažādu veidu izvēlnēs. 320 00:18:56,360 --> 00:18:59,510 >> Tie esam gotten daudz labāk par to nesen, bet tas izmanto, lai būt gadījums 321 00:18:59,510 --> 00:19:04,870 ka, ja jūs vēlaties, lai novērstu savus draugus no redzēt fotogrāfijas, 322 00:19:04,870 --> 00:19:08,280 Jums būs jāiziet cauri ļoti sarežģīts 5-pakāpju process ir līdzīgi, 323 00:19:08,280 --> 00:19:11,150 ļaujiet man noklikšķiniet uz šīs saites, tagad ļaujiet man noklikšķiniet vēlreiz, ļaujiet man noklikšķiniet vēlreiz, 324 00:19:11,150 --> 00:19:13,420 ļaujiet man norādīt, kuras cilvēki nevar redzēt manas fotogrāfijas. 325 00:19:13,420 --> 00:19:17,250 Tas nav īpaši labs uz Facebook puses 326 00:19:17,250 --> 00:19:20,530 jo tik daudz par lietotāju pieredzi faktiski dodot viņiem brīvi 327 00:19:20,530 --> 00:19:22,460 kontrolēt, ko cilvēki var redzēt. 328 00:19:22,460 --> 00:19:25,550 Mēs to saucam par lietotāja kontroli un brīvību. 329 00:19:25,550 --> 00:19:31,090 Ja jūs neesat ļaujot lietotājiem darīt tādā veidā, kas ir efektīva un intuitīvu, 330 00:19:31,090 --> 00:19:34,570 tad jūsu lietotāja pieredze nav reāli, ka liels vispār. 331 00:19:34,570 --> 00:19:38,200  Jūs guys teikt kaut ko par Facebook? 332 00:19:38,700 --> 00:19:41,420 Kā es varu izslēgt šo? 333 00:19:41,420 --> 00:19:46,290 [Ong] Jūs nevarat izslēgt šo, un tas ir milzīgs lietojamības trūkums par daļu no Facebook. 334 00:19:46,290 --> 00:19:49,410 Šī funkcija - es tiešām paskatījos to vakar - 335 00:19:49,410 --> 00:19:53,940 tas ir vai nu, ka jums nevar darīt to vai tas ir aprakti kaut kur ļoti, ļoti dziļi 336 00:19:53,940 --> 00:19:58,050 darbība Facebook padziļinājumu, jo es nevaru saprast, kā atslēgt šo funkciju vispār. 337 00:19:58,050 --> 00:20:00,400 [Malan] Bet dažreiz šie lēmumi nav skaidrs 338 00:20:00,400 --> 00:20:03,890 jo jums puiši ir devuši mums daudz noderīgas atsauksmes par dažādiem CS50 pieteikumiem 339 00:20:03,890 --> 00:20:05,710 un tīmekļa vietnes, kas kurss izmanto. 340 00:20:05,710 --> 00:20:10,260 Mums nav īstenoti visi šie lūgumiem un ierosinājumiem. 341 00:20:10,260 --> 00:20:14,550 >> Daļa, kas ir, lai iegūtu tik daudz pieprasījumus, ka tas ir atkarīgs no laika, 342 00:20:14,550 --> 00:20:17,070 bet dažreiz mēs vienkārši izdarīt apzinātu lēmumu, piemēram, 343 00:20:17,070 --> 00:20:19,830 "Paldies par ieteikumu, bet mēs nepiekrītam." 344 00:20:19,830 --> 00:20:24,350 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 345 00:20:24,350 --> 00:20:28,110 pat ja jums nav obligāti? 346 00:20:28,110 --> 00:20:32,360 Tas ir precīzs līdzsvars starp faktiski klausoties to, ko jūsu lietotāji saka 347 00:20:32,360 --> 00:20:35,840 un faktiski ir sava veida līnijas, ja jūs sakāt, 348 00:20:35,840 --> 00:20:37,750 "Mēs neesam gatavojas darīt to, ko šie lietotāji saka." 349 00:20:37,750 --> 00:20:42,520 Un jo īpaši, es domāju, ka tur bija Henrijs Fords citātu, kas apkopo šo augšu diezgan labi. 350 00:20:42,520 --> 00:20:47,130 "Ja es būtu lūgusi cilvēkiem, ko viņi gribēja, viņi teica, ka viņi gribēja ātrāk zirgus." 351 00:20:47,130 --> 00:20:51,840 Vai kāds sava veida kaitināt izņemot to, ka citātu īsti nozīmē? 352 00:20:51,840 --> 00:20:56,060 Tas nav tikai tas, ka lietotāji zina, ko viņi vēlas, 353 00:20:56,060 --> 00:20:59,180 bet tas ir vairāk, ka - 354 00:20:59,180 --> 00:21:02,720 [Students] Viņi nezina, kas ir iespējams. 355 00:21:02,720 --> 00:21:06,140 Daļēji viņi nezina, kas ir iespējams. 356 00:21:07,880 --> 00:21:11,440 Ķircināt ka bez mazliet vairāk. Ko jūs ar to domājat? 357 00:21:11,440 --> 00:21:21,340 [Dzirdams studentu reaģēšanas] 358 00:21:21,340 --> 00:21:25,770 Tas ir labi. Ko es domāju, ka mēs cenšamies pateikt ir tas, ka cilvēki zina, ko viņi vēlas. 359 00:21:25,770 --> 00:21:28,050 Viņi vēlas ātrāku zirgus. 360 00:21:28,050 --> 00:21:29,840 Ko viņi patiešām vēlas, ir iespēja pārvietoties ātrāk, 361 00:21:29,840 --> 00:21:32,310 bet tie nav īsti zināt vidēja, ar kuru, lai sasniegtu to. 362 00:21:32,310 --> 00:21:36,330 Kad jūs nākt uz jūsu lietotājiem un lietotājiem pateikt kaut 363 00:21:36,330 --> 00:21:39,700 un viņi pateiks: "Mēs vēlamies šos līdzekļus un šie līdzekļi un šie līdzekļi," 364 00:21:39,700 --> 00:21:42,650 Jūs nevēlaties, lai vienmēr domāt par to, "Ļaujiet man iet uz priekšu 365 00:21:42,650 --> 00:21:44,720 "Un īstenot to, ko viņi skaidri saka," 366 00:21:44,720 --> 00:21:48,610 bet ko jūs vēlaties, lai padomātu par ir, "Kāda veida idejām var saņemt no tā?" 367 00:21:48,610 --> 00:21:50,450 Ko viņi tiešām vēlas? 368 00:21:50,450 --> 00:21:55,560 >> Un no turienes, ko jūs varat darīt, ir izveidot kaut ko, kas apmierina šos pieprasījumus 369 00:21:55,560 --> 00:22:00,340 bet ne vienmēr tā, kā lietotājs sagaida to apmierināts. 370 00:22:00,340 --> 00:22:03,830 Tātad kaut kas līdzīgs gala projektu, kas ļoti reālā izteiksmē, 371 00:22:03,830 --> 00:22:07,900 kas ir noderīgs heiristiskās kad runa ir padarīt kaut ko labāku, 372 00:22:07,900 --> 00:22:10,630 it īpaši, ja dizainers ir šo iedomību par viņu 373 00:22:10,630 --> 00:22:14,360 kurā jūs veida zināt, kas ir labākais, jūs varētu veikt ieguldījumu no saviem lietotājiem, 374 00:22:14,360 --> 00:22:16,580 bet kā jūs tiešām iet par iegūt šo atgriezenisko saiti? 375 00:22:16,580 --> 00:22:21,610 Jo gala projektiem, ļoti konkrēti, ko rada optimālus rezultātus šeit? 376 00:22:21,610 --> 00:22:25,030 Kas ražo optimālus rezultātus - un es iešu pa šo otro - 377 00:22:25,030 --> 00:22:29,190 tas ir process, izstrādājot un pēc tam testēšanas un pēc tam atkārtojot. 378 00:22:29,190 --> 00:22:32,020 Ko es domāju ar testēšana ir parasti, kad jūs dizains kaut 379 00:22:32,020 --> 00:22:36,970 Jūs domājat, ka tas ir diezgan labi, piemēram, "Es esmu tik liels dizainers. Ikvienam gatavojas mīlēt šo." 380 00:22:36,970 --> 00:22:41,600 Un tad jūs nodot to, kas tur, un cilvēki nav tiešām patīk to kāda iemesla dēļ. 381 00:22:41,600 --> 00:22:46,820 Kas jums ir jādara, ir jums ir jāņem daļas lietas, cilvēki dara, piemēram, 382 00:22:46,820 --> 00:22:49,180 un salabot lietas, ko cilvēki nepatīk. 383 00:22:49,180 --> 00:22:53,080 Tas izklausās ļoti skaidrs process, bet šis process pastāvīgi atkārtojot 384 00:22:53,080 --> 00:22:55,980 uz augšu, ko jūs esat jau uzcelta, ir process, kas palīdz jums 385 00:22:55,980 --> 00:22:59,730 ne tikai uzlabot savas dizaina prasmes, bet arī palīdz jums uzlabot dizainu 386 00:22:59,730 --> 00:23:03,790 tāpēc, ka cilvēki patiešām novērtējam jūsu produkts vēl vairāk nekā tas bija agrāk. 387 00:23:03,790 --> 00:23:07,390 >> Es iešu pa vairāk konkrētus piemērus, ko jūs varētu faktiski darīt. 388 00:23:07,390 --> 00:23:11,390 Kā sava veida pēdējo piemērs produkta, aplūkosim kajaks. 389 00:23:11,390 --> 00:23:14,970 Kajaks, kad tā iznāca bija ļoti, ļoti populāri. 390 00:23:14,970 --> 00:23:18,760 Vai kāds uzminēt, kāpēc? 391 00:23:18,760 --> 00:23:20,950 Kādas ir lietas veidu jūs vēlētos par to, ja esat lietojuši 392 00:23:20,950 --> 00:23:23,990 vai kādi ir veidu lietas jums nepatīk? 393 00:23:23,990 --> 00:23:31,590 Jā. >> [Dzirdams studentu reaģēšanas] >> Labi. 394 00:23:31,590 --> 00:23:34,730 Tas ir daļa no tā ir izīrēšanu lietotājs ir vaicājums, kas ir vairāk ekspansīvas 395 00:23:34,730 --> 00:23:38,150 nekā ļoti ierobežojoša, piemēram, "Jums ir izvēlēties sākuma datumu 396 00:23:38,150 --> 00:23:39,810 ", Un jums ir izvēlēties beigu datumu." 397 00:23:39,810 --> 00:23:44,910 Faktiski, tas ļauj būt elastīgiem par to un tas dod jums visu, kas šajā diapazonā lidojumiem. 398 00:23:44,910 --> 00:23:46,730 Kaut kas cits? 399 00:23:46,730 --> 00:23:50,530 [Students] Tās ietver maksu cenā. 400 00:23:50,530 --> 00:23:53,330 Tie ietver maksu cenā. 401 00:23:53,330 --> 00:23:56,720 Nodokļi un lietas tiešām iet taisni minētās cenas, kas atrodas augšējā kreisajā 402 00:23:56,720 --> 00:24:00,710 lai jūs nav tricked domāt, ka jūs faktiski maksājot par $ 240 lidojumu 403 00:24:00,710 --> 00:24:03,280 kad tas ir patiešām $ 330. 404 00:24:03,280 --> 00:24:06,200 Kaut kas cits? Jā. 405 00:24:06,200 --> 00:24:10,140 [Dzirdams studentu reaģēšanas] 406 00:24:10,140 --> 00:24:14,610 Es neesmu pārliecināts, vai viņi tiešām jums darīt. 407 00:24:14,610 --> 00:24:18,310 Es varētu būt nepareizi. 408 00:24:18,310 --> 00:24:23,360 Tas varētu būt interesanta lieta, ja jūs vēlaties, lai lielāku svaru uz konkrētiem filtriem 409 00:24:23,360 --> 00:24:27,000 lai viņi push rezultātus, kas saistīti ar minēto filtru uz augšu. 410 00:24:27,000 --> 00:24:31,920 Bet var kāds man pateikt, kas ir tik īpašs par šo kreisajā pusē? 411 00:24:31,920 --> 00:24:39,540 Kā jūs tradicionāli meklēt lidojumu uz interneta pakalpojumu pirms šo? 412 00:24:41,600 --> 00:24:44,650 >> Jā. >> [Dzirdams studentu reaģēšanas] >> Vai varat teikt, ka - 413 00:24:44,650 --> 00:24:47,530 [Students] Katrai aviokompānijai. >> Jā. Katrai aviokompānijai ir sava tīmekļa vietne. 414 00:24:47,530 --> 00:24:50,110 Tas apvieno lietas. Un? 415 00:24:50,110 --> 00:24:52,190 [Students] Jūs zināt, tieši cikos jūs atstājot. 416 00:24:52,190 --> 00:24:54,460 Jūs zināt, tieši to, kad jūs esat prom, 417 00:24:54,460 --> 00:24:59,380 bet ir saistīti ar īpaši filtriem. 418 00:25:00,710 --> 00:25:03,540 Ļaujiet man uzvilkt kajaks. 419 00:25:11,490 --> 00:25:14,020 Ak Dievs, pop-ups. Slikta lietotāju pieredzi. 420 00:25:14,020 --> 00:25:17,230 Kas notiek, ja es pārvietot šo slīdni? 421 00:25:17,230 --> 00:25:21,010 [Students] Autom. >> [Ong] Autom. 422 00:25:21,010 --> 00:25:23,440 Tas ir kaut kas ir ļoti svarīgi. 423 00:25:23,440 --> 00:25:25,380 Pirms tam, kad jūs gribēja uzmeklēt lidojumu, 424 00:25:25,380 --> 00:25:28,410 Jums bija likt savu ieguldījumu atrašanās vietā, jūsu produkcija atrašanās vietu, nospiediet Search, 425 00:25:28,410 --> 00:25:31,190 tas process, kas un parādīt savus rezultātus. 426 00:25:31,190 --> 00:25:34,120 Ja jūs vēlaties mainīt savu vaicājumu, jums būtu nospiest atpakaļ divreiz, 427 00:25:34,120 --> 00:25:39,770 ievadīt jaunu vaicājumu no nulles, un tad darīt to atkal un atkal. 428 00:25:39,770 --> 00:25:43,910 Jauka lieta par kaut ko tādu ir tā izmanto ļoti [neizprotamas] lieta vidū. 429 00:25:43,910 --> 00:25:46,230 Ikreiz, kad jūs darīt kaut kas līdzīgs šim, tā atvases off pieprasījumu 430 00:25:46,230 --> 00:25:48,420 un tas atgriež jums visiem rezultātus nekavējoties. 431 00:25:48,420 --> 00:25:51,680 Šī tūlītēju atgriezenisko saiti kārtošanas ir kaut kas izgatavots kajaks Putnu populārs 432 00:25:51,680 --> 00:25:55,910 jo tas tiešām viegli man vienkārši mainīt manu vaicājumu 433 00:25:55,910 --> 00:25:58,890 un izdomāt lietas, kas ir ap īpašu diapazonā 434 00:25:58,890 --> 00:26:01,950 bez iet uz priekšu un atpakaļ, uz priekšu un atpakaļ, uz priekšu un atpakaļ. 435 00:26:01,950 --> 00:26:05,200 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ā. 436 00:26:05,200 --> 00:26:08,930 Kā es varu darīt to ļoti efektīvs, lai mani lietotāji iet cauri neatkarīgi no viņi strādā 437 00:26:08,930 --> 00:26:13,010 un iegūt to iespējamo mērķi pēc iespējas ātrāk? 438 00:26:13,010 --> 00:26:16,430 [Malan] Un Jāzepa punktu agrāk par lietotājiem ne vienmēr zinot to, ko viņi vēlas, 439 00:26:16,430 --> 00:26:18,640 pamatojoties uz to, ko jūs guys tagad zinām par HTML 440 00:26:18,640 --> 00:26:22,780 un jums ir rūtiņas, radio pogas, izvēlieties izvēlnes, ievades lauki un tamlīdzīgi, 441 00:26:22,780 --> 00:26:26,140 kā jūs īstenot jēdzienu picking starta laiks lidojumam? 442 00:26:26,140 --> 00:26:30,030 >> Kura no šīm dažādajām UI mehānismu jūs izmantojat? 443 00:26:30,030 --> 00:26:34,100 Ja jūs vienkārši zināt summu HTML, kas tika mācīta pirms 444 00:26:34,100 --> 00:26:39,070 un jūs zināt izejvielas ir radio pogas, izvēles rūtiņas, drop-Downs, un ievades kaste, 445 00:26:39,070 --> 00:26:43,320 kāda būtu jūsu dabas izvēle ir bijusi par picking datus? 446 00:26:43,320 --> 00:26:48,670 [Students] Ieejas. >> Ieejas. Vai varbūt pat nolaižamo ar visiem datumiem, labi? 447 00:26:48,670 --> 00:26:53,170 Tātad ar sarežģītākiem UI mehānismu, piemēram, tas kreisajā pusē, kas var īstenot, 448 00:26:53,170 --> 00:26:55,500 Jūs varat padarīt šo procesu daudz intuitīvākas ar slīdni 449 00:26:55,500 --> 00:27:01,020 jo laiks ir nepārtraukta, un cilvēki parasti nedomā par to atkarībā no diskrētām gabalos. 450 00:27:01,020 --> 00:27:04,950 Labi. Pēdējā lieta. 451 00:27:04,950 --> 00:27:07,370 Desmit lietojamības heuristics. 452 00:27:07,370 --> 00:27:10,820 Visas lietas, ko mēs runājām par, iespējams, atbilst vienai no šīm kategorijām. 453 00:27:10,820 --> 00:27:14,420 Ja jūs iet uz šo saiti, kas vietām tiks publicēta internetā, 454 00:27:14,420 --> 00:27:18,900 jūs tiešām varētu, kā jūs dizains jūsu vietni, saglabāt šos heiristiku prātā 455 00:27:18,900 --> 00:27:21,330 un šie noteikumi īkšķis. 456 00:27:21,330 --> 00:27:26,610 Jūsu projektu, ko es ieteiktu jums, lai izstrādātu jūsu app labāk 457 00:27:26,610 --> 00:27:28,850 ir darīt papīra prototipu pirmās. 458 00:27:28,850 --> 00:27:32,150 Kad jūs domājat par savu pieteikumu, ļoti ātri uzskicēt ko jūs vēlaties, lai izskatās 459 00:27:32,150 --> 00:27:36,230 un pārliecinieties, ka visas kastes ir sakārtoti tādā veidā, kas ir ļoti intuitīva, lai lietotājs varētu izmantot 460 00:27:36,230 --> 00:27:39,820 un pat parādīt šos papīra prototipus saviem draugiem un sākt fokusa grupas. 461 00:27:39,820 --> 00:27:44,230 Tikai iegūt 2 vai 3 cilvēkus kopā un lūgt tos vienkārši pieskarieties šīm papīra prototipus, 462 00:27:44,230 --> 00:27:47,650 un parādīt viņiem jaunas ekrāniem, lai redzētu, vai viņi tiešām saprast, kas notiek. 463 00:27:47,650 --> 00:27:50,680 >> Ko jūs vēlaties darīt, ir dot viņiem uzdevumu, motivēt šo uzdevumu, 464 00:27:50,680 --> 00:27:53,270 un tikai dot viņiem app un ļaujiet viņiem to izmantot. 465 00:27:53,270 --> 00:27:56,530 Nedod viņiem norādījumus ārpus tā. 466 00:27:56,530 --> 00:28:00,920 Jūs vēlaties, lai tiešām ļaut viņiem mijiedarboties ar savu app tādā veidā, kas ļauj jums redzēt 467 00:28:00,920 --> 00:28:03,870 kā viņi varētu to izmantot, ja Jums nav stāv blakus tiem. 468 00:28:03,870 --> 00:28:05,250 Un tas ir ļoti svarīgi. 469 00:28:05,250 --> 00:28:08,780 Tas dos jums daudz ieskatu par to, ir cilvēki kļūst ap konkrētiem lietas 470 00:28:08,780 --> 00:28:10,560 tādā veidā, ka man nav paredzējis tos? 471 00:28:10,560 --> 00:28:14,680 Vai viņi izmanto īpašu UI mehānismus uz ekrāna 472 00:28:14,680 --> 00:28:17,490 tādā veidā, kas ir sava veida Hacky? 473 00:28:17,490 --> 00:28:22,020 Man nav paredzējis viņiem to darīt šādā veidā. 474 00:28:22,020 --> 00:28:23,940 Un, kad esat pabeidzis ar to, ko jūs vēlaties darīt? 475 00:28:23,940 --> 00:28:26,010 Jūsu dizains ieži, labi? 476 00:28:26,010 --> 00:28:29,600 Ko jūs vēlaties darīt, ir jūs vēlaties, lai attīstītu un tad darīt šo procesu no jauna. 477 00:28:29,600 --> 00:28:32,110 Tāpēc parādīt to draugiem, kad esat to attīstīja, pārbaudītu to, 478 00:28:32,110 --> 00:28:36,630 izstrādāt, pārbaudīt, izstrādāt, pārbaudīt, atkārtot, un tālāk un uz priekšu. 479 00:28:36,630 --> 00:28:39,720 Dizains ir ļoti iteratīvs process šajā ziņā. 480 00:28:39,720 --> 00:28:43,280 Jums tiešām ir veidot kaut ko, un tad saprast lietas, par to 481 00:28:43,280 --> 00:28:46,520 ka jums nav saprast pirms un doties atpakaļ un uzlabot tās. 482 00:28:46,520 --> 00:28:50,890 Tagad, kā par attīstības daļu, tas ko Tommy notiek, lai parādītu jums pēc pārtraukuma 483 00:28:50,890 --> 00:28:53,220 un kā jūs varētu ieviest kaut ko līdzīgu automātiski pabeigt 484 00:28:53,220 --> 00:28:56,610 tādā veidā, kas ir diezgan vienkārši. 485 00:28:57,440 --> 00:28:59,550 [Malan] Kā Tomijs izveido šeit, jautājums tad. 486 00:28:59,550 --> 00:29:03,780 No senākajiem mājas lapas daudz - un kad Jāzeps sacīja 1990.gadu stila mājas lapā, 487 00:29:03,780 --> 00:29:07,640 tas bija implementācijas, kur, ja jūs vēlētos, lai izvēlētos sākuma laiku un beigu laiku, 488 00:29:07,640 --> 00:29:10,380 atklāti sakot, atpakaļ dienā, un pat dažās vietnēs šodien, 489 00:29:10,380 --> 00:29:13,220 kā jums tas ir jums izvēlēties stundu no nolaižamā, 490 00:29:13,220 --> 00:29:15,910 Jums izvēlēties minūtes no nolaižamā, varbūt jūs izvēlaties AM, AM, 491 00:29:15,910 --> 00:29:17,440 un tad jūs, ka vēl 3 reizes. 492 00:29:17,440 --> 00:29:19,920 Un tā ar 6 klikšķiem un varbūt kādu ritinot 493 00:29:19,920 --> 00:29:24,000 jūsu lietotāja faktiski var sniegt kādu datumu un / vai laika šajā ziņā. 494 00:29:24,000 --> 00:29:27,920 >> Tāpēc noteikti optimāls un vēl līdz šim mēs esam redzējuši nekādus izteiksmīgas spējas 495 00:29:27,920 --> 00:29:30,330 jebkurā no valodām, mēs esam paskatījās kaut ko darīt sexier 496 00:29:30,330 --> 00:29:32,620 tāpat šī slīdni sākuma laiku un beigu laiku. 497 00:29:32,620 --> 00:29:36,290 Bet, ja jūs domājat atpakaļ uz 0 nedēļā, kad mēs runājām par nulles, 498 00:29:36,290 --> 00:29:39,080 Arī tur bija ne widgets, kas tikko bija dažas lietas. 499 00:29:39,080 --> 00:29:42,700 Tu tiešām tikko bija šos pamatus, piemēram, cilpu un nosacījumiem, piemēram. 500 00:29:42,700 --> 00:29:46,910 Tik veida tikai domāju ļoti abstrakti tagad, neatkarīgi no HTML ziņām, 501 00:29:46,910 --> 00:29:51,260 Kas īsti notiek ar kaut ko līdzīgu šim sākuma laiku un beigu laiku slīdni? 502 00:29:51,260 --> 00:29:54,960 Kad es pārvietot manu peli, un es noklikšķiniet uz šo maz burkānu simbola kreisajā 503 00:29:54,960 --> 00:29:59,220 un sākt velkot, programmatiski, kas tas ir jūs vēlaties, lai varētu īstenot 504 00:29:59,220 --> 00:30:01,000 lai tas notiktu? 505 00:30:01,000 --> 00:30:04,920 Kādi jautājumi, ko Būla izteiksmes jūs vēlaties, lai varētu uzdot? 506 00:30:04,920 --> 00:30:06,930 Kas īsti notiek? Sammy? 507 00:30:06,930 --> 00:30:10,080 [Students] Kur ir no kursora pozīcija? >> Labi. Kur ir no kursora pozīcija? 508 00:30:10,080 --> 00:30:11,970 Tas bija kaut kas mums bija nepieciešams izteikt atpakaļ nulles, 509 00:30:11,970 --> 00:30:14,690 vai tas bija balstīts uz vietu vai pat krāsu vai līdzīgu. 510 00:30:14,690 --> 00:30:18,410 Jūs varētu atcerēties kādreiz tik īsi, pirmdien tur bija visas šīs lietas sauc notikumi 511 00:30:18,410 --> 00:30:22,370 pasaulē Web, un tāpēc tur ir lietas, piemēram, onclick un onkeypress 512 00:30:22,370 --> 00:30:25,960 un onkeyup un onMouseOver un onMouseOut. 513 00:30:25,960 --> 00:30:29,130 Lai saprastu, ka pat šīs lietas, mēs esam ņemot par pašsaprotamu tīmeklī 514 00:30:29,130 --> 00:30:32,190 ar vietās, piemēram, Facebook un Gmail, pat ja jums nav ne jausmas 515 00:30:32,190 --> 00:30:34,890 kā jūs, iespējams, varētu ieviest, ka, jo tur nekas pat patīk lekciju 516 00:30:34,890 --> 00:30:38,570 vai problēma komplekts 7, saprotam, ka ar šiem precīzu pašiem pamatiem, 517 00:30:38,570 --> 00:30:41,090 ar HTTP un parametriem un GET un POST, 518 00:30:41,090 --> 00:30:44,010 ar pamata HTML izejvielām, ka mēs esam paskatījās līdz šim 519 00:30:44,010 --> 00:30:47,690 un pēc brīža ar programmatisku mehānismiem, kas Tommija gatavojas ieviest 520 00:30:47,690 --> 00:30:51,300 Jūs varat sākt izteikt sevi, tāpat kā jūs darīja 0 nedēļā 521 00:30:51,300 --> 00:30:53,800 ar ļoti intuitīvi vilkšanu un nomešanu. 522 00:30:53,800 --> 00:30:58,950 >> Tātad ar to teica, Tommy MacWilliam un dažas jaunas puzzle gabalus uz mums par Web. 523 00:30:58,950 --> 00:31:03,450 Labi. Mans vārds ir Tommy, un es esmu gatavojas runāt par JavaScript. 524 00:31:03,450 --> 00:31:07,150 Tikai atruna: es uzskatu, ka JavaScript ir labākais programmēšanas valoda 525 00:31:07,150 --> 00:31:09,010 visā visā pasaulē. 526 00:31:09,010 --> 00:31:11,940 Ir daudz cilvēku, kas nepiekrist ar mani, bet tas ir tikai pārsteidzošs. 527 00:31:11,940 --> 00:31:16,330 Tiklīdz jūs iet atpakaļ uz C, ja jums ir rakstīt temperatūrā citā klasē vai citās valodās, 528 00:31:16,330 --> 00:31:19,780 tas ir tikai patiešām nomākta visās zema līmeņa detaļām, kuras jūs, lai saņemtu bogged leju iekšā 529 00:31:19,780 --> 00:31:23,050 Tātad, ja jūs esat kādreiz sajūta skumji par to, kā kaitinošas C ir rakstīt, 530 00:31:23,050 --> 00:31:25,130 tikai iet atpakaļ, uzrakstīt kādu JavaScript. Tas ir nirvāna. 531 00:31:25,130 --> 00:31:27,980 Jūs jūtaties daudz labāk par savu slikto dienu. 532 00:31:27,980 --> 00:31:31,900 Par burvju JavaScript daudz nāk no tās spējas manipulēt lietas 533 00:31:31,900 --> 00:31:33,730 kas jau ir uz lapas. 534 00:31:33,730 --> 00:31:38,520 Kad mēs wrote mūsu PHP skriptus, tie tika izpildīts uz servera, 535 00:31:38,520 --> 00:31:42,270 un beidzot, ka PHP skripts iespējams izvadīt kādu HTML. 536 00:31:42,270 --> 00:31:45,860 Ka HTML tika nosūtīta uz klientu, un tad, ka tas bija. 537 00:31:45,860 --> 00:31:50,180 Ja PHP gribēja pievienot pogu uz lapu, piemēram, tas nevar īsti darīt. 538 00:31:50,180 --> 00:31:54,350 Tas būtu padarīt pilnīgi jaunu HTML failu un sūtīt ka ​​pārlūku. 539 00:31:54,350 --> 00:31:57,840 Ar JavaScript mēs zinām, ka mēs varam atjaunināt lietas, bet viņi jau lapā, 540 00:31:57,840 --> 00:32:00,840 un tādēļ mēs varam sniegt daudz vairāk tūlītēju atgriezenisko saiti, 541 00:32:00,840 --> 00:32:06,150 kas patiešām uzlabotu lietotāju pieredzi mūsu mājas lapā. 542 00:32:06,150 --> 00:32:09,330 Tikai ātri Atgādinājums par JavaScript selektori. 543 00:32:09,330 --> 00:32:11,590 Mēs zinām, ka tad, kad mēs lejupielādēt HTML lapu, 544 00:32:11,590 --> 00:32:13,890 kas notiek, lai būtu pārstāvētas DOM. 545 00:32:13,890 --> 00:32:19,340 >> DOM atceries ir tikai tas ir liels koks, kur elementi ir saistīti ar šo lielo hierarhijā. 546 00:32:19,340 --> 00:32:21,810 Kad mēs strādājām ar datubāzēm 7 PSET, 547 00:32:21,810 --> 00:32:26,280 viena no pirmajām lietām, mums vajadzēja zināt, kā to izdarīt, bija vaicājumu datu bāzē. 548 00:32:26,280 --> 00:32:29,060 Mums ir tik liels lietotāju tabula, un dažreiz mēs vienkārši vēlamies pateikt, 549 00:32:29,060 --> 00:32:33,260 "Es tikai gribu dažas no šiem lietotājiem, kas atbilst kādu nosacījumu." 550 00:32:33,260 --> 00:32:36,020 Tāpat, ja mums ir DOM mums ir nepieciešams kaut kādā veidā vaicājumiem to. 551 00:32:36,020 --> 00:32:39,490 Mums ir nepieciešams zināms veids, kā pateikt "Es gribu visas pogas, kas izskatās šis 552 00:32:39,490 --> 00:32:41,860 "Vai visi uz lapas attēlu." 553 00:32:41,860 --> 00:32:44,330 Un šie selektori ļauj mums darīt. 554 00:32:44,330 --> 00:32:45,690 Tik vienkārši ātri Atgādinājums. 555 00:32:45,690 --> 00:32:50,770 Šis pirmais šeit, tas # iesniegt, kas ir, ka gatavojas izvēlēties? Vai kāds atceras? 556 00:32:50,770 --> 00:32:54,880 [Dzirdams studentu reaģēšanas] >> Jā, tieši tā. 557 00:32:54,880 --> 00:32:59,510 Tas ir gatavojas, lai izvēlētos elementu par lapu, kas ir ID no iesniegt. 558 00:32:59,510 --> 00:33:03,470 Un tā, ka hash tag saka, ka tas pārslēgs gatavojas strādāt ar ID. 559 00:33:03,470 --> 00:33:07,630 Kā par otro, tas centrēts,. Kas būs, ka izvēlētos? 560 00:33:11,360 --> 00:33:15,180 Yeah. >> [Students] klases. >> Tieši tā. Tas tagad notiek, lai izvēlētos ar klasi. 561 00:33:15,180 --> 00:33:18,840 Atšķirība starp ID un klases šeit atšķirība ir parasti ID ir unikāls 562 00:33:18,840 --> 00:33:20,820 ietvaros neatkarīgi kosmosa jūs meklējat pāri. 563 00:33:20,820 --> 00:33:23,080 Tātad, ja jūs meklējat vairāk nekā visu interneta lapu, 564 00:33:23,080 --> 00:33:27,740 Jums tiešām vajadzētu tikai 1 elements ar šo konkrētu ID, tāpēc šajā gadījumā iesniegt. 565 00:33:27,740 --> 00:33:31,330 Ar klasēm, no otras puses, mēs varam būt vairāk nekā 1 elements vienā lapā 566 00:33:31,330 --> 00:33:33,130 ar to pašu klasi. 567 00:33:33,130 --> 00:33:36,580 Tas varētu būt noderīgi, lai sakot, es gribu, lai izvēlētos visu, kas centrēta uz lapu 568 00:33:36,580 --> 00:33:38,450 nevis tikai 1 lieta. 569 00:33:38,450 --> 00:33:40,310 >> Un visbeidzot, šis pēdējais šeit ir nedaudz sarežģītāks, 570 00:33:40,310 --> 00:33:43,890 bet ko tas notiek, lai izvēlētos no DOM? 571 00:33:46,650 --> 00:33:48,810 [Dzirdams studentu reaģēšanas] >> Kas tas ir? 572 00:33:48,810 --> 00:33:53,250 [Students] Jebkas, kas ir tag. >> Mums ir 2 daļas šeit. 573 00:33:53,250 --> 00:33:58,070 Otrā daļa ir gatavojas teikt, es gribu, lai izvēlētos šos tagus ar tag par ievadi, 574 00:33:58,070 --> 00:34:00,730 tāpēc jebkurš elements, kas ir ieejas tag. 575 00:34:00,730 --> 00:34:03,080 Bet es negribu, lai tikai izvēlēties visus ieejām 576 00:34:03,080 --> 00:34:05,170 jo kaut kā iesniegt pogu varētu būt ieeja 577 00:34:05,170 --> 00:34:08,409 un kaut kā teksta lodziņā varētu būt ieejas. 578 00:34:08,409 --> 00:34:11,909 Tātad ar šiem kvadrātiekavās es saku es tikai gribu, lai izvēlētos šos elementus 579 00:34:11,909 --> 00:34:14,110 kas ir tipa tekstu. 580 00:34:14,110 --> 00:34:17,400 Kaut manā HTML tagu man ir atribūtu sauc veids, 581 00:34:17,400 --> 00:34:19,750 un šī atribūta vērtība ir būt teksts. 582 00:34:19,750 --> 00:34:21,340 Tā kā par šo pirmo daļu šeit? 583 00:34:21,340 --> 00:34:25,489 Pirmais vārds šajā selektora ir forma, tad man ir telpa un tad šis ieguldījums daļa. 584 00:34:25,489 --> 00:34:29,620 Ko tas dara, liekot formu priekšā no tā? 585 00:34:33,409 --> 00:34:35,860 Tas ir gatavojas būtībā ierobežo mūsu vaicājumu. 586 00:34:35,860 --> 00:34:38,510 Tas varētu būt gadījums, ka mums ir dažas izejvielas lapā 587 00:34:38,510 --> 00:34:41,080 ka nav pēcteči formā. 588 00:34:41,080 --> 00:34:46,150 Ko tas būs jādara, ir tas, ka man tikai gribu ieejas tagus, kas ir kaut kur virs tiem 589 00:34:46,150 --> 00:34:49,030 daži vecāki elements formā. 590 00:34:49,030 --> 00:34:52,100 Un tāpēc šādā veidā mēs varam padarīt tos hierarhiskās vaicājumus 591 00:34:52,100 --> 00:34:55,000 tāpēc mums nav tikai izvēlēties viss atbilstības doto selektoru. 592 00:34:55,000 --> 00:35:00,760 Mēs varam veida ierobežos šo vaicājumu uz kaut ko citu. 593 00:35:00,760 --> 00:35:04,000 Tāpēc tagad, ka mēs zinām, kā izvēlēties elementus lapā, 594 00:35:04,000 --> 00:35:06,780 parunāsim mazliet par AJAX. 595 00:35:06,780 --> 00:35:12,270 AJAX ir joprojām ļoti moderns akronīms, kas apzīmē Asynchronous JavaScript un XML. 596 00:35:12,270 --> 00:35:15,640 Tas tikai tā notiek, ka XML ir tikai daži veids, lai pārstāvētu datus. 597 00:35:15,640 --> 00:35:20,920 >> Ka zaudējis popularitāti veida nesen, tāpēc AJAX X nav izmantots visu laiku. 598 00:35:20,920 --> 00:35:26,220 Būtībā, ko AJAX ļauj mums darīt, ir HTTP pieprasījumus 599 00:35:26,220 --> 00:35:28,620 no konteksta JavaScript. 600 00:35:28,620 --> 00:35:32,310 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, 601 00:35:32,310 --> 00:35:37,790 ko mūsu pārlūku gatavojas darīt, ir padarīt HTTP pieprasījumu neatkarīgi saiti mēs noklikšķiniet. 602 00:35:37,790 --> 00:35:41,670 Bet tas ne vienmēr ir ideāls, jo, ja tas ir gadījumā, tad kā Dāvids teica, 603 00:35:41,670 --> 00:35:45,220 Mums vienmēr ir, lai lietotāji noklikšķina uz iesniegšanas pogas vai noklikšķiniet uz saites 604 00:35:45,220 --> 00:35:50,380 lai padarītu kaut ko notikt kas notiek, lai iesaistītu HTTP pieprasījumu. 605 00:35:50,380 --> 00:35:54,160 Tātad ar AJAX, mēs varam padarīt šos lūgumus vārdā JavaScript. 606 00:35:54,160 --> 00:35:57,020 Tas nozīmē, ja lietotājs mijiedarbojas ar lapu vai kaut kas notiek, 607 00:35:57,020 --> 00:36:01,780 mēs faktiski var veikt programmatisku pieprasījumu uz kādu citu PHP failu uz mūsu mājas lapā 608 00:36:01,780 --> 00:36:06,280 vai kaut kas cits un iegūt datus, ka fails atklepo. 609 00:36:06,280 --> 00:36:09,860 Pieņemsim to apskatīt piemērs AJAX. 610 00:36:09,860 --> 00:36:16,140 Tas ir mūsu CS50 Finanses lapa ar kuru, cerams daži no mums ir pazīstami. 611 00:36:16,140 --> 00:36:21,790 Ja mēs skatāmies uz HTML šīs lapas, mēs redzam šeit, ka esmu pievienojis dažas lietas, 612 00:36:21,790 --> 00:36:23,820 no kuriem viens es esmu devis šo formu ID. 613 00:36:23,820 --> 00:36:26,480 Man teica id = "forma-citāts". 614 00:36:26,480 --> 00:36:31,910 Es esmu darījusi to tikai tāpēc, ka tas notiek, lai padarītu šo mazliet vieglāk izvēlēties no DOM 615 00:36:31,910 --> 00:36:35,090 jo es varu tikai veikt ļoti vienkāršu vaicājumu. 616 00:36:35,090 --> 00:36:38,960 Ko es gribu darīt, šeit ir es gribu noteikt dažas problēmas ar CS50 Finance. 617 00:36:38,960 --> 00:36:41,550 Tātad, ja mēs ejam uz finance.cs50.net, 618 00:36:41,550 --> 00:36:45,700 Katru reizi, kad es gribu, lai saņemtu cenas piedāvājumu, man ir jāaiziet uz šo Get Citēt poga, 619 00:36:45,700 --> 00:36:48,960 un ka Get Citēt poga tad ņem mani uz citu visu lapu. 620 00:36:48,960 --> 00:36:52,400 Un, ja es gribu citu citātu, man ir hit atpakaļ pogu un tad es ierakstiet to, 621 00:36:52,400 --> 00:36:54,480 Man citātu, un es hit pogas Atpakaļ. 622 00:36:54,480 --> 00:36:56,840 Tas tiešām nav labākais lietotāju pieredzi. 623 00:36:56,840 --> 00:37:01,570 Kurš tiešām izmantot šo vietni, ja tā ir, ka nesteidzas akciju cenas? 624 00:37:01,570 --> 00:37:05,630 Tātad, ko mēs gribam darīt ar AJAX ir novērst šo soli dodas uz atsevišķu lapu 625 00:37:05,630 --> 00:37:08,410 lai skatītu rezultātus. 626 00:37:08,410 --> 00:37:11,240 >> Ko mēs esam patiešām tikai lūdzot vai tiešām maza cena, 627 00:37:11,240 --> 00:37:14,240 un tas ir tikai patiešām neliels datu apjoms. 628 00:37:14,240 --> 00:37:17,400 Tāpēc tur nav man nepieciešams iet citu visu HTML lapu, 629 00:37:17,400 --> 00:37:20,670 lejupielādēt pilnīgi jaunu partiju HTML, varbūt lejupielādēt daži vairāk bildes, 630 00:37:20,670 --> 00:37:24,410 daži citi CSS failus tikai man, lai atbildētu uz šo ļoti vienkāršs jautājums 631 00:37:24,410 --> 00:37:27,810 par to, cik daudz tas krājumu izmaksas. 632 00:37:27,810 --> 00:37:31,000 Ar AJAX mēs varam padarīt šo daudz vieglāk. 633 00:37:31,000 --> 00:37:36,400 Mēs redzam šeit lejā, ka es esmu savieno ar JavaScript failu sauc quote.js. 634 00:37:36,400 --> 00:37:40,140 Pieņemsim tiešām atvērt šo failu. Tur nav. 635 00:37:42,610 --> 00:37:45,860 Visas manas JavaScript faili būs jāatrodas HTML 636 00:37:45,860 --> 00:37:47,630 lai interneta pārlūks var piekļūt. 637 00:37:47,630 --> 00:37:50,330 Tad mums ir atsevišķa direktoriju šeit JavaScript, 638 00:37:50,330 --> 00:37:54,340 un tagad šeit ir quote.js. 639 00:37:54,340 --> 00:38:00,930 Augšpusē šo failu tas saka šeit, ka es gribu gaidīt visu lapu jānoslogo 640 00:38:00,930 --> 00:38:04,830 Pirms es mēģinu darīt jebko. Kāpēc ir tā, ka nepieciešams? 641 00:38:04,830 --> 00:38:08,650 Izrādās, ka nākamā lieta es esmu gatavojas darīt, šeit ir sākums meklē elementu 642 00:38:08,650 --> 00:38:10,810 kas atbilst daži selektoru. 643 00:38:10,810 --> 00:38:15,600 Ja šis JavaScript ir kādreiz veikti pirms šīs elements ir ielādēta lapā, 644 00:38:15,600 --> 00:38:17,820 tad viss es mēģinu darīt nav dodas uz darbu 645 00:38:17,820 --> 00:38:20,580 jo es esmu gatavojas, lai mēģinātu izvēlēties kaut ko, kas nav tur vēl. 646 00:38:20,580 --> 00:38:23,780 Tātad šī up augšpusē līnija saka, ka es gribu, lai jūs gaidīt, kamēr viss tiek ielādēta 647 00:38:23,780 --> 00:38:28,030 tāpēc mēs esam garantēts, ka visi elementi, es esmu atrast ir faktiski lapā. 648 00:38:29,730 --> 00:38:34,310 Šī dolāra zīmi šeit nozīmē, ka es esmu, izmantojot bibliotēku sauc jQuery. 649 00:38:34,310 --> 00:38:38,570 Tas jQuery bibliotēka ļauj mums izmantot šos selektori ka mēs tikai paskatījās. 650 00:38:38,570 --> 00:38:44,010 Pasakot $, tad brauc, kā argumentu šo # form-quote, 651 00:38:44,010 --> 00:38:47,910 Es esmu tagad, izvēloties šo formu, mēs vienkārši ņēma apskatīt. 652 00:38:47,910 --> 00:38:52,290 Tagad man ir pārstāvību, kas veido atmiņā kaut kā. 653 00:38:52,290 --> 00:38:56,760 >> Uz šo objektu tagad, šo pārstāvību no formas, 654 00:38:56,760 --> 00:38:58,890 Es esmu tagad, izmantojot funkciju sauc par. 655 00:38:58,890 --> 00:39:02,710 Ko šī funkcija dara, ir tas, kas notiek, lai pievienotu notikuma apdarinātājs. 656 00:39:02,710 --> 00:39:06,310 Gadījumā, ja mēs ejam, lai klausītos, ir kā apgalvo notikums. 657 00:39:06,310 --> 00:39:08,890 Tātad, ja lietotājs uzklikšķina ka Iesniegt pogu vai nospiež Enter, 658 00:39:08,890 --> 00:39:11,730 Šis pasākums notiek ar uguni. 659 00:39:11,730 --> 00:39:16,390 Ar hooking šo, es tagad var ignorēt noklusējuma uzvedību formā. 660 00:39:16,390 --> 00:39:19,770 Bez šī JavaScript, veidlapa jāiesniedz neatkarīgi PHP failu 661 00:39:19,770 --> 00:39:22,110 mēs izmantojām šajā rīcības atribūtu. 662 00:39:22,110 --> 00:39:25,440 Bet tā vietā, es esmu tagad saka, pagaidiet, pagaidiet, pagaidiet, es negribu, lai jūs tiešām darīt. 663 00:39:25,440 --> 00:39:31,140 Es gribu, lai tas notiktu, pirms jūs iet un mēģināt iesniegt kādu PHP failu. 664 00:39:31,140 --> 00:39:32,870 Tagad to, ko es gribu darīt? 665 00:39:32,870 --> 00:39:39,270 Šajā brīdī es vēlos izmantot AJAX kaut ielādēt kādā akciju cena ir. 666 00:39:39,270 --> 00:39:44,170 Pirmā lieta man ir nepieciešams zināt, ko akciju lietotājs meklē augšu. 667 00:39:44,170 --> 00:39:46,760 Lai to izdarītu, es esmu gatavojas izmantot citu selektoru. 668 00:39:46,760 --> 00:39:49,020 Šis ir trešais atlasītāju mēs paskatījās agrāk. 669 00:39:49,020 --> 00:39:54,460 Šis saka, ka es gribu, lai sāktu šo formu elementu ar ID forma-citātu. 670 00:39:54,460 --> 00:39:58,440 Tad kaut kur iekšā šīs veidlapas ir jābūt ieejas elements 671 00:39:58,440 --> 00:40:01,270 kas ir nosaukums simbolu. 672 00:40:01,270 --> 00:40:05,460 Ja mēs atskatāmies uz mūsu HTML, mēs redzējām, ka mums bija ieejas [vārds = simbols]. 673 00:40:05,460 --> 00:40:12,380 Tas nozīmē, ka tas notiek, lai izvēlētos, ka lietotājs ir ierakstot šo tekstlodziņu. 674 00:40:12,380 --> 00:40:13,870 Tas ir jauki. Mums ir tekstlodziņu. 675 00:40:13,870 --> 00:40:17,360 Tagad mums ir nepieciešams zināt, kas ir iekšpusē no tā. 676 00:40:17,360 --> 00:40:20,290 Lai to izdarītu, mēs varam zvanīt šo metodi šeit, šis. Val, 677 00:40:20,290 --> 00:40:23,240 un tas saka, ka es zinu, ko tekstlodziņā jums ir. 678 00:40:23,240 --> 00:40:28,160 Es gribu, lai jūs man pateikt, kas tas ir lietotājs ievadījis šajā tekstlodziņā. 679 00:40:28,160 --> 00:40:34,440 Tagad mums ir virkne sauc simbols, kas ir vienāda ar neatkarīgi lietotājs drukāti collas 680 00:40:34,440 --> 00:40:39,820 Tas ir jauki. Mēs varam izmantot šo string tagad, lai mūsu lūgumu. 681 00:40:39,820 --> 00:40:42,450 Tas ir jauna funkcija šeit, tas $, 682 00:40:42,450 --> 00:40:44,900 izņemot mēs vairs būs izvēloties elementus, 683 00:40:44,900 --> 00:40:48,910 mēs spēsim būt aicinot dažādas funkcijas, kas ir sniegta, lai mums ar jQuery. 684 00:40:48,910 --> 00:40:54,810 Tas AJAX funkcija ir tas, kas patiesībā notiek, lai šo HTTP pieprasījumu. 685 00:40:54,810 --> 00:40:57,000 Tāpēc mums ir pateikt to dažas lietas. 686 00:40:57,000 --> 00:41:01,410 Pirmā lieta, mums ir pateikt šo funkciju ir, ja es gribu pieprasījums iet. 687 00:41:01,410 --> 00:41:08,910 Kaut manā projektā man šo failu iekšpusē HTML direktoriju sauc quote.php. 688 00:41:08,910 --> 00:41:15,150 Es varu piekļūt šo failu, mēs redzējām, tāpat kā tas, ja es eju uz localhost / quote.php. 689 00:41:15,150 --> 00:41:20,450 >> Es vēlos, lai mana JavaScript iesniegt prasību uz šo lapu. 690 00:41:20,450 --> 00:41:22,920 Kāda veida pieprasījuma tagad? 691 00:41:22,920 --> 00:41:27,210 Mēs redzējām pirms tam forma ir šo metodi = "post" atribūtu, 692 00:41:27,210 --> 00:41:29,270 un tas nozīmē, ka tas notiek, lai POST pieprasījumu, 693 00:41:29,270 --> 00:41:32,630 tāpēc tas nav gatavojas likt neko URL, nevis GET pieprasījumu, 694 00:41:32,630 --> 00:41:36,860 kas būtu vienkārši tikt atlaists, ja mēs vienkārši piekļūt lapu ar interneta pārlūku, piemēram,. 695 00:41:36,860 --> 00:41:41,260 Tagad mēs esam teica es gribu veikt HTTP POST pieprasījumu 696 00:41:41,260 --> 00:41:44,840 uz lapu atrodas quote.php. 697 00:41:44,840 --> 00:41:51,490 Kad mēs iesniegt veidlapu, atcerieties, ka mēs varētu piekļūt ievades elementiem iekšpusē šīs veidlapas 698 00:41:51,490 --> 00:41:54,430 ar šo $ _POST mainīgo. 699 00:41:54,430 --> 00:41:58,710 Līdz šim stāstā mēs faktiski nav nosūtīts kopā jebkuriem datiem vēl. 700 00:41:58,710 --> 00:42:00,640 Mēs esam tikko teica, ka mēs nesam AJAX pieprasījumu 701 00:42:00,640 --> 00:42:03,200 un šeit pieprasījuma veids mēs nesam. 702 00:42:03,200 --> 00:42:07,090 Tagad mums ir nepieciešams, lai faktiski nosūtīt dažus datus uz lapu. 703 00:42:07,090 --> 00:42:10,930 Lai to izdarītu, mēs varam izmantot šo īpašumu sauc dati. 704 00:42:10,930 --> 00:42:14,950 Par šī īpašuma vērtība ir faktiski asociatīvā masīva. 705 00:42:14,950 --> 00:42:19,390 Iemesls ir tas ļauj mums nosūtīt vairāk nekā tikai 1 gabals datus. 706 00:42:19,390 --> 00:42:24,750 Tieši tāpēc mums ir šie cirtaini bikšturi šeit ligzdotas no šiem citiem cirtaini lencēm. 707 00:42:24,750 --> 00:42:29,680 Šajās asociatīvu masīvu taustiņi ir būs tas pats 708 00:42:29,680 --> 00:42:32,630 kā tie nosaukums piedēvē mūsu formu elementiem. 709 00:42:32,630 --> 00:42:35,740 Tas nozīmē, ka, ja es nosūtīt pa atslēgas simbols, 710 00:42:35,740 --> 00:42:41,870 tas nozīmē, ka mans PHP lapas var piekļūt šos datus ar $ _POST [simbols] 711 00:42:41,870 --> 00:42:44,640 tāpat kā mēs to darījām pirms kad mēs bijām iesniedzot veidlapu. 712 00:42:44,640 --> 00:42:47,090 Un tagad faktiskos datus mēs vēlamies, lai nosūtītu 713 00:42:47,090 --> 00:42:50,790 būs vērtība iekšpuses šo asociatīvā masīva. 714 00:42:50,790 --> 00:42:54,070 >> Mēs uzglabā šo tekstu mainīgo sauc simbolu, 715 00:42:54,070 --> 00:42:57,380 un tāpēc mēs esam nosūtot pa tagad atslēgu simbola 716 00:42:57,380 --> 00:43:01,380 un vērtību neatkarīgi lietotājs drukāti collas 717 00:43:01,380 --> 00:43:06,270 Tagad mēs esam padarījuši šo HTTP pieprasījumu, mūsu PHP fails ir izpildīts, 718 00:43:06,270 --> 00:43:11,480 un tas notiek, lai nosūtītu dažus datus atpakaļ tagad klientam ka tikai padarīja šo lūgumu. 719 00:43:11,480 --> 00:43:15,220 Tagad mums ir nepieciešams, lai reaģētu uz kāda servera mums teica. 720 00:43:15,220 --> 00:43:20,180 Lai to izdarītu, mums ir šis pēdējais īpašumu šeit sauc panākumus. 721 00:43:20,180 --> 00:43:24,240 Šīs veiksmes atslēga vērtība ir faktiski būs funkcija, 722 00:43:24,240 --> 00:43:26,910 un tas ir viens no tiešām labas lietas jūs varat darīt ar JavaScript. 723 00:43:26,910 --> 00:43:31,720 Ne tikai jūs varat būt Ints vai bloki kā vērtības iekšpusē asociatīvā masīva, 724 00:43:31,720 --> 00:43:34,170 mēs varam būt arī funkcija. 725 00:43:34,170 --> 00:43:36,380 Tātad, sakot panākumus, tas ir mans galvenais. 726 00:43:36,380 --> 00:43:38,830 Kols saka šeit nāk vērtību, 727 00:43:38,830 --> 00:43:41,810 un tagad šīs vērtības ir faktiski funkcija. 728 00:43:41,810 --> 00:43:44,460 Tāpēc mums nav nepieciešams, lai dotu šī funkcija ar nosaukumu per se. 729 00:43:44,460 --> 00:43:48,820 Mēs varam tikai teikt, tas būs dažas funkcijas. Tas gatavojas veikt 1 argumentu. 730 00:43:48,820 --> 00:43:51,190 Arguments, lai šo funkciju būs 731 00:43:51,190 --> 00:43:54,460 neatkarīgi servera nosūtīta mūs atpakaļ no pieprasījuma. 732 00:43:54,460 --> 00:43:57,750 Tāpat kā, ja mūsu pārlūkprogramma lūdz, serveris sūta kaut ko atpakaļ 733 00:43:57,750 --> 00:43:59,060 un pārlūkprogramma parāda to, 734 00:43:59,060 --> 00:44:03,030 saistībā ar AJAX mēs vienkārši izteikusi lūgumu, servera nosūtīta kaut ko atpakaļ, 735 00:44:03,030 --> 00:44:07,110 un tagad mēs esam, kas pārstāvēja virkni. 736 00:44:07,110 --> 00:44:11,280 Ar šajā virknē Es tikai gribētu, lai parādītu, ka lapā. 737 00:44:11,280 --> 00:44:14,040 Lai to izdarītu, es esmu gatavojas ir viens pēdējais selektoru. 738 00:44:14,040 --> 00:44:17,570 Es gribu, lai izvēlētos elementu ar ID cenu. 739 00:44:17,570 --> 00:44:20,710 Tas ir tikai tukša div ka es esmu izveidojis lapā, 740 00:44:20,710 --> 00:44:26,640 un es gribu, lai uzstādītu saturu šīs div lai būtu kāds serveris nosūtīja mūs atpakaļ. 741 00:44:26,640 --> 00:44:30,280 Es esmu tiešām modificēta quote.php mazliet. 742 00:44:30,280 --> 00:44:33,460 >> Nevis zvana apmetumu un padarot dažus lapu, 743 00:44:33,460 --> 00:44:38,100 quote.php tagad ir vienkārši gatavojas izdrukāt vērtību krājumu kā virkni. 744 00:44:38,100 --> 00:44:41,880 Tātad, ja Jums bija faktiski apmeklē lapu, jūs vienkārši redzēt, ka mazie stīgu 745 00:44:41,880 --> 00:44:45,030 neatkarīgi no akciju cena ir. 746 00:44:45,030 --> 00:44:50,170 Viens no pēdējā lieta, kas mums jādara, šeit ir tikai pārliecinieties, ka šī funkcija atgriež nepatiess. 747 00:44:50,170 --> 00:44:53,560 Ko tas saka, ka, ja es esmu iekšā notikuma apdarinātāja 748 00:44:53,560 --> 00:44:57,300 un ka notikumu apdarinātājs atgriežas viltus bet nevis patiesa, 749 00:44:57,300 --> 00:45:01,510 tas nozīmē, ka es nevēlos sākotnējo notikumu uguns. 750 00:45:01,510 --> 00:45:05,270 Šajā gadījumā, ja mums nebūtu nekādu JavaScript un mēs iesniedzām formu, 751 00:45:05,270 --> 00:45:08,280 Mūsu interneta pārlūks ir gatavojas teikt: "Es esmu gatavojas nosūtīt šos datus kopā," 752 00:45:08,280 --> 00:45:10,130 un viņi gatavojas nosūtīt jums uz citu lapu. 753 00:45:10,130 --> 00:45:14,360 Jo mēs esam izmantojot AJAX tagad, nav nepieciešams, lai nosūtītu lietotājam uz citu lapu. 754 00:45:14,360 --> 00:45:17,920 Mēs esam tikai gatavojas parādīt rezultātus dinamiski tajā pašā lapā. 755 00:45:17,920 --> 00:45:21,460 Mēs tiešām negribam viņus doties jebkur, un es gribu palikt tajā pašā lapā. 756 00:45:21,460 --> 00:45:27,060 Tātad, atgriežoties nepatiesa, mēs nodrošinām, ka forma nav darīt, ka mums. 757 00:45:27,060 --> 00:45:31,170 Pieņemsim apskatīt to, kas tas patiesībā izskatās. 758 00:45:31,170 --> 00:45:34,180 Mūsu citāts lapa izskatās vienādi. 759 00:45:34,180 --> 00:45:37,240 Ļaujiet man uzvilkt inspektors noteikti šeit, lai mēs varētu redzēt, kas notiek. 760 00:45:37,240 --> 00:45:40,270 Padariet to mazliet mazāk milzīgs. 761 00:45:40,270 --> 00:45:44,590 Atceraties, ja mēs atvērtu cilni Network, tas ir, ja mēs varam redzēt visus HTTP pieprasījumiem 762 00:45:44,590 --> 00:45:47,570 kas notiek lapā. 763 00:45:47,570 --> 00:45:52,890 >> Par simbolu ļaujiet man rakstīt AAPL un noklikšķiniet Get Citēt. 764 00:45:52,890 --> 00:45:56,720 Tagad mēs redzējām, ka no Apple akciju maksā dažas vairākus dolāru 765 00:45:56,720 --> 00:46:00,410 tikko parādījās lapā, bet URL nemainījās vispār. 766 00:46:00,410 --> 00:46:04,570 Patiesībā, šeit ir HTTP pieprasījums ka mēs tikko veikts. 767 00:46:04,570 --> 00:46:09,980 Mēs veicām POST pieprasījumu quote.php. Tas ir jēga. 768 00:46:09,980 --> 00:46:12,800 Tas ir tas, ko serveris nosūta mūs atpakaļ. 769 00:46:12,800 --> 00:46:16,320 Tas vairs šajā gigantisks HTML dokuments ar attēliem un lietām, piemēram, ka, 770 00:46:16,320 --> 00:46:20,920 tas ir tikai teksta rindiņa, un tad mēs vienkārši parādīts līniju teksta. 771 00:46:20,920 --> 00:46:26,290 Ja mēs ejam atpakaļ uz galvenes un redzēt, ko mēs faktiski nosūtīja iekšpuses šo HTTP pieprasījumu, 772 00:46:26,290 --> 00:46:33,950 mēs varam redzēt šeit lejā, ka mēs nosūtījām pa atslēgas simbols un AAPL vērtību, 773 00:46:33,950 --> 00:46:36,430 kas ir tas, ko lietotājs drukāti collas 774 00:46:36,430 --> 00:46:39,230 Tas ir jauki, bet tas joprojām mazliet kaitinošas. 775 00:46:39,230 --> 00:46:42,490 Man joprojām ir uz šīs pogas, lai iegūtu akciju cenas. 776 00:46:42,490 --> 00:46:45,880 Mēs esam aizņemti cilvēki, un mums nav laika, lai klikšķiniet pogas. 777 00:46:45,880 --> 00:46:49,910 Google sapratu laiciņu atpakaļ, kad viņi īsteno Google Instant. 778 00:46:49,910 --> 00:46:53,590 Ko Google Instant tas ir kā jūs rakstāt tā vienkārši sāk parādot rezultātus jums 779 00:46:53,590 --> 00:46:56,520 tāpēc jums nav jāuztraucas par vēl noklikšķinot uz Meklēt. 780 00:46:56,520 --> 00:46:58,730 Patiesībā, jautri stāsts saistīts ar to. 781 00:46:58,730 --> 00:47:01,100 Kad Google Instant iznāca, cilvēki bija, piemēram, "Eh, tas ir super pārsteidzošs." 782 00:47:01,100 --> 00:47:02,540 "Tas ir tik forši." 783 00:47:02,540 --> 00:47:05,950 Un students leju Stenfordas kurš bija 19 tajā laikā 784 00:47:05,950 --> 00:47:09,000 padarījusi šo vietu sauc YouTube Instant. 785 00:47:09,000 --> 00:47:13,170 Visi YouTube Instant tas ir efektīvi meklēt YouTube uzreiz. 786 00:47:13,170 --> 00:47:17,020 Tātad, nevis ņemot iet uz YouTube.com un hit meklēšana, 787 00:47:17,020 --> 00:47:21,650 kad es sāku rakstīt par YouTube Instant kaut kā CS50, 788 00:47:21,650 --> 00:47:25,320 mēs varētu redzēt šeit, ka tas ir mēģinājums par lēnu interneta savienojumu 789 00:47:25,320 --> 00:47:28,500 apdzīvot šie rezultāti dzīvot. 790 00:47:28,500 --> 00:47:35,590 Lai to izdarītu, mēs faktiski var veikt ļoti vienkāršu izmaiņas uz mūsu quote.js failu. 791 00:47:35,590 --> 00:47:40,900 Tieši tagad mēs esam pievienojot šo notikumu, kad veidlapa tiek iesniegta. 792 00:47:40,900 --> 00:47:43,760 Mums nav īsti vēlaties, lai lietotājs iesniedz šo veidlapu vairs, 793 00:47:43,760 --> 00:47:48,570 tāpēc pieņemsim instead uguns Šis notikums ik reizi, kad lietotājs nospiež taustiņu. 794 00:47:48,570 --> 00:47:53,200 Lai to izdarītu, pieņemsim vispirms mainīt notikumu no iesniedz keyup. 795 00:47:53,200 --> 00:47:55,740 Tas nozīmē, ka nevis gaidīt veidlapa jāiesniedz, 796 00:47:55,740 --> 00:47:58,490 Katru reizi, taustiņa nospiešanas, kaut kas notiks. 797 00:47:58,490 --> 00:48:02,030 Tas vairs ir jēga, lai pievienotu šo keyup notikumu visai formu. 798 00:48:02,030 --> 00:48:05,080 Mēs tiešām tikai rūp šajā meklēšanas lodziņā. 799 00:48:05,080 --> 00:48:09,320 >> Lai atlasītu ka tagad, mēs varam mainīt, ka tas ir, nevis forma-citātu, 800 00:48:09,320 --> 00:48:14,220 forma-citāts, un mēs veikt ieguldījumus (tips = tekstu) vai mēs varētu teikt (nosaukums = simbolu) - 801 00:48:14,220 --> 00:48:16,420 neatkarīgi no mums vēlas. 802 00:48:16,420 --> 00:48:18,650 Tagad tur ir viens pēdējā lieta, kas mums ir jādara. 803 00:48:18,650 --> 00:48:21,190 Atceros noteikti šeit, kad mēs teicām atgriezties viltus 804 00:48:21,190 --> 00:48:24,370 mēs teicām, mēs negribam, ka saistību neizpildes notikuma uguns. 805 00:48:24,370 --> 00:48:26,390 Bet tas tikai tā notiek, ka, ja mēs atslēgt ka tagad, 806 00:48:26,390 --> 00:48:29,660 neatkarīgi no mums rakstīt nav gatavojas parādās pārlūkā vairs 807 00:48:29,660 --> 00:48:33,000 jo tas būtu noklusējuma uzvedību ierakstot tekstlodziņā. 808 00:48:33,000 --> 00:48:38,660 Mēs vairs vēlamies ignorēt, ka, tāpēc pieņemsim iznīcināt šī atgriešanās nepatiesa. 809 00:48:38,660 --> 00:48:44,800 Ja mēs glābt kas un pārlādēt lapu, tagad, kad es sāku rakstīt AAPL 810 00:48:44,800 --> 00:48:50,160 Jūs redzēsiet, ka akciju cena apakšā šeit ir pabeigt automātiski. 811 00:48:50,160 --> 00:48:53,150 Tātad šeit ir CS50 finanses Instant. 812 00:48:53,150 --> 00:48:55,860 Faktiski jautri stāsts par YouTube Instant 813 00:48:55,860 --> 00:48:59,420 ir tas, ka students tikai veida rakstīja tā kā 1-nakts projektu, 814 00:48:59,420 --> 00:49:03,800 un nākamajā dienā viņš tika piedāvāts darbs, ko YouTube CEO. 815 00:49:03,800 --> 00:49:10,610 Tā tik vienkārši, kā tas, jūs CS50 studenti, jūsu gala projekti var saņemt jūs darbu pie YouTube. 816 00:49:10,610 --> 00:49:14,720 Kaut kā tā ir patiešām foršs ideja par galīgo projektu, labi? 817 00:49:14,720 --> 00:49:18,170 Mums bija daži esošo funkcionalitāti, ka mēs vēlējāmies, lai integrētu ar. 818 00:49:18,170 --> 00:49:20,330 Mēs uzlabotu lietotāju pieredzi mazliet, 819 00:49:20,330 --> 00:49:24,340 un pēkšņi meklējot kaut ko par YouTube Instant varētu būt daudz vieglāk 820 00:49:24,340 --> 00:49:27,290 nekā meklējot to regulāri YouTube. 821 00:49:27,290 --> 00:49:30,790 Tā ka ir AJAX īsumā. 822 00:49:30,790 --> 00:49:34,860 >> Piemēros, ka Jāzeps bija parādot, mēs redzējām daudz autocompletes, 823 00:49:34,860 --> 00:49:39,250 un šie autocompletes ir ļoti, ļoti parocīgs, jo mums nav atcerēties - 824 00:49:39,250 --> 00:49:41,770 Piemēram, ja jums nav atcerēties akciju cenu Apple 825 00:49:41,770 --> 00:49:45,110 un mēs vienkārši zinām, tas ir aa kaut, nevis tikai man sakām 826 00:49:45,110 --> 00:49:48,740 "Šī lieta īpatsvars maksā tik daudz naudas," 827 00:49:48,740 --> 00:49:52,540 Es gribētu veida gribētu zināt, ko krājumi sāk ar AA. 828 00:49:52,540 --> 00:49:58,340 Mēs varam darīt, ka tiešām labi ar bootstrap bibliotēku, kas jau iekļauti 829 00:49:58,340 --> 00:50:01,380 iekšpusē CS50 Finance. 830 00:50:01,380 --> 00:50:09,390 Ja jūs nākt šeit uz JavaScript tagu un ritiniet uz leju līdz Typeahead, 831 00:50:09,390 --> 00:50:13,730 tas ir tikai jauka spraudnis, ka kāds jau rakstīja par mums, 832 00:50:13,730 --> 00:50:16,980 un mēs varam viegli izmantot savu funkcionalitāti, kā šis. 833 00:50:16,980 --> 00:50:21,410 Es drukāti un šeit ir dažu valstu, kas sākas ar A sarakstā 834 00:50:21,410 --> 00:50:25,360 Pieņemsim, ka es domāju, ka tas ir tiešām forši un tas ir laiks man iekļaut šo par manu lapu. 835 00:50:25,360 --> 00:50:28,300 Izrādās, ka tas ir ļoti, ļoti vienkārša. 836 00:50:28,300 --> 00:50:32,810 Pieņemsim lēkt pār šeit quote3.js. 837 00:50:34,890 --> 00:50:37,380 Mans fails izskatās mazliet atšķirīgs. 838 00:50:37,380 --> 00:50:39,700 Noteikti šeit visu savu AJAX sīkumi ir tas pats. 839 00:50:39,700 --> 00:50:43,170 Es gribu, lai ielādētu krājumu dati bez iet uz citu lapu. 840 00:50:43,170 --> 00:50:46,220 Bet tagad es vēlos izmantot šo spraudni. 841 00:50:46,220 --> 00:50:51,020 Bootstrap dokumentācija ir lieliski piemēri par to, kā tieši es varu darīt. 842 00:50:51,020 --> 00:50:54,350 Es gribu teikt: "Lūk, ieejas, ka es gribu, lai automātiski pabeigt uz" 843 00:50:54,350 --> 00:50:56,640 un es esmu gatavojas nosaukt šo funkciju sauc typeahead, 844 00:50:56,640 --> 00:50:59,730 un kas notiek, lai apstrādātu visu Typeahead stuff mums. 845 00:50:59,730 --> 00:51:02,090 Tas sāktu sarakstu, tas būs jādara visiem mūsu filtrēšanu. 846 00:51:02,090 --> 00:51:06,680 Vienīgais, tas jāzina, ir kādi dati mēs autocompleting tālāk. 847 00:51:06,680 --> 00:51:10,480 Tāpēc es uzzināju šo atslēgu vienkārši lasot dokumentāciju un meklē piemērus. 848 00:51:10,480 --> 00:51:14,150 Ja es arī tā atslēga avota, vērtība šajā atslēgā 849 00:51:14,150 --> 00:51:17,770 ir tikai daži masīvs lietas es gribu automātiski pabeigt tālāk. 850 00:51:17,770 --> 00:51:20,180 Šis mainīgais nāca no šo citu failu. 851 00:51:20,180 --> 00:51:23,400 Es atvērt symbols.js. 852 00:51:23,400 --> 00:51:27,980 >> Šī symbols.js ir tikai tas tiešām, tiešām liels masīvs satur virknes 853 00:51:27,980 --> 00:51:32,080 Visu šo akciju simbolus no NASDAQ. 854 00:51:32,080 --> 00:51:42,190 Ja es gribu, lai pārietu atpakaļ uz HTML, tā jharvard, vhosts, globalhost, html, veidnes, 855 00:51:42,190 --> 00:51:45,820 quote_form. 856 00:51:45,820 --> 00:51:50,910 Tā ka tagad sauc quote3.js, ļaujiet man mainīt JavaScript failu es esmu arī šeit. 857 00:51:50,910 --> 00:51:55,110 Tagad man ir quote3.js, tāpēc es esmu gatavojas slodze šī atsevišķā JavaScript failu, 858 00:51:55,110 --> 00:51:57,910 viens, kas ir, ka bootstrap AutoComplete. 859 00:51:57,910 --> 00:52:04,430 Tagad, kad es lēkt atpakaļ uz pārlūku, pārlādēt lapu, un es sāku rakstīt AA, 860 00:52:04,430 --> 00:52:06,880 tur ir mana automātiskās pabeigšanas. Un tas bija tiešām tik vienkārši. 861 00:52:06,880 --> 00:52:11,400 Man bija 1 līnijas kodu, kas vienkārši teica: "Šeit ir lietas, es vēlos automātiski pabeigt uz" 862 00:52:11,400 --> 00:52:16,590 un pēkšņi man ir šī ļoti, ļoti jauks funkcionalitāti ar ne visai daudz piepūles vispār. 863 00:52:16,590 --> 00:52:19,810 Kā jūs attīstīt mājas lapas un īpaši priekšgala pusē lietām, 864 00:52:19,810 --> 00:52:21,840 jūs gatavojas atrast šo ir gadījums daudz. 865 00:52:21,840 --> 00:52:25,700 Ir daudz, daudz, daudz tiešām atdzist bezmaksas bibliotēkas tur 866 00:52:25,700 --> 00:52:30,190 kas padara to super viegli darīt lietas, kā šis. 867 00:52:30,190 --> 00:52:37,230 Vai kāds domā par jebkādām vienkārši autocompleting par šo lielo sarakstā simbolu trūkumi? 868 00:52:37,230 --> 00:52:41,580 Kas varētu būt kaut kas nav labākais ar šo pieeju? 869 00:52:42,790 --> 00:52:45,960 Yeah. >> [Students] Laiks, ja jums ir daudz [dzirdams] 870 00:52:45,960 --> 00:52:50,420 Yeah. Tieši tagad mēs esam lejupielādē šo milzīgo JavaScript failu un tur simbolu daudz. 871 00:52:50,420 --> 00:52:54,360 Un tāpēc, ja mums ir ton stuff, tas varētu veida palielināt latentumu ne tikai meklējot 872 00:52:54,360 --> 00:52:56,600 bet arī lejupielādējot faktisko failu. 873 00:52:56,600 --> 00:52:58,670 Lieliski. Kaut kas cits? 874 00:53:01,950 --> 00:53:05,280 Tieši tagad tur nav reālu sajūtu nozīmi. 875 00:53:05,280 --> 00:53:08,190 Ja es rakstīt A, uzņēmumi, kas parādās šeit 876 00:53:08,190 --> 00:53:11,220 varētu būt populārākais uzņēmumi, kas sākas ar A 877 00:53:11,220 --> 00:53:17,130 >> Pirms es nokļūt Apple, tā varētu veikt dažas vairāk rakstzīmju, lai atrastu to, ko es esmu meklē. 878 00:53:17,130 --> 00:53:20,420 Tas AutoComplete nav šo sajūtu nozīmi. 879 00:53:20,420 --> 00:53:24,400 Tas ir tikai gatavojas teikt, "Jebkas, kas atbilst es esmu gatavojas parādīt." 880 00:53:24,400 --> 00:53:30,510 Vietā, ka es gribētu, lai kaut kā integrēt kāda saistība manā meklējumiem. 881 00:53:30,510 --> 00:53:36,440 Ja es eju pa šeit Yahoo! Finance, finance.yahoo.com, 882 00:53:36,440 --> 00:53:42,100 Ja es mēģinātu iekļūt simbols uz Yahoo! Finance lapu 883 00:53:42,100 --> 00:53:52,310 un es sāku rakstīt GOOG, man ir šī jauku sarakstu ar lietām. 884 00:53:52,310 --> 00:53:57,100 Skaidrs, ka tas izskatās Yahoo! Finanses dara kaut ko vairāk gudrs šeit. 885 00:53:57,100 --> 00:53:59,790 Viņiem ir svarīgas, un viņi arī ir papildu informācija 886 00:53:59,790 --> 00:54:01,430 tāpat vārdu krājumu. 887 00:54:01,430 --> 00:54:05,850 Tas ir kaut kas, es nevaru īsti iegūt tikai ar savu akciju saraksta simboliem. 888 00:54:05,850 --> 00:54:09,520 Es gribu šo un tāpēc es esmu gatavojas ņemt to. 889 00:54:09,520 --> 00:54:11,790 Lai to izdarītu, pieņemsim darīt dažas lietas. 890 00:54:11,790 --> 00:54:15,580 Pieņemsim vispirms atvērt inspektors šajā lapā 891 00:54:15,580 --> 00:54:18,100 jo mēs redzējām, ka šī lapa ir ne pārkraušanas vispār, 892 00:54:18,100 --> 00:54:21,960 tāpēc tas ir iespējams, izmantojot AJAX kaut ko iekraušanas savus datus. 893 00:54:21,960 --> 00:54:23,920 Mēs varam atrast, kādi dati ir iekraušanas. 894 00:54:23,920 --> 00:54:28,390 Ja es noklikšķiniet uz šo cilnē Network, tie būs visiem pieprasījumiem, kas sāk karsēt. 895 00:54:28,390 --> 00:54:34,020 Tagad, ja es rakstīt goo, mēs varam redzēt, ka es tikko saņēmu jaunu HTTP pieprasījumu. 896 00:54:34,020 --> 00:54:37,490 Tas ir iespējams, ja, ka dati nāk no. 897 00:54:37,490 --> 00:54:41,990 Un tik tiešām, ja es paskatos šo URL, kas ir mazliet dīvaini nosaukts, 898 00:54:41,990 --> 00:54:46,930 mēs varam redzēt, ka tas ir tieši tur, kur Yahoo nosūtot off datus no. 899 00:54:46,930 --> 00:54:53,400 >> Es esmu izveidojis atsevišķu failu sauc suggest.php kas ir ļoti līdzīgs garā uz uzmeklēšanas funkcijas. 900 00:54:53,400 --> 00:54:57,730 Tas būtībā gatavojas veikt vaicājumu Yahoo URL, saņemt atpakaļ daļu no datiem, 901 00:54:57,730 --> 00:54:59,750 un nosūtīt to atpakaļ uz mani. 902 00:54:59,750 --> 00:55:02,570 Tagad, nevis izmantojot šo lielo, milzīgu sarakstu ar simboliem, 903 00:55:02,570 --> 00:55:05,280 Es varu izmantot Yahoo jaukas nozīmība, lietas, 904 00:55:05,280 --> 00:55:08,150 un man nav, lai lejupielādētu, ka masveida JavaScript failu. 905 00:55:08,150 --> 00:55:12,040 Es esmu tikai gatavojas nojaukt faktiski attiecīgos akciju simbolus. 906 00:55:12,040 --> 00:55:13,960 Pieņemsim lēkt kas. 907 00:55:13,960 --> 00:55:17,360 Tātad html, JS. Mēs esam tagad quote4. 908 00:55:17,360 --> 00:55:22,120 Tagad mēs vairs izmanto ka liels sarakstu JavaScript faili. 909 00:55:22,120 --> 00:55:24,430 Bet tur ir neliela veida dizaina problēmu šeit. 910 00:55:24,430 --> 00:55:28,200 Mēs esam teica, ka AJAX ir asinhrons. 911 00:55:28,200 --> 00:55:31,000 Ko tas nozīmē, ka tad, kad es veicu AJAX pieprasījumu, 912 00:55:31,000 --> 00:55:36,490 tik labi šeit, 8 līnijas, tas ir, ja mans AJAX pieprasījums ir faktiski atlaists. 913 00:55:36,490 --> 00:55:40,370 Pieņemsim, ka tagad man ir daži kodu šeit lejā, kas gatavojas darīt daži sīkumi 914 00:55:40,370 --> 00:55:43,930 patīk brīdinātu lietotāju, vai kaut ko mainīt lapā. 915 00:55:43,930 --> 00:55:49,830 Kas nav gatavojas notikt, ir pārlūks nav gatavojas gaidīt, lai šo pieprasījumu, lai turpinātu 916 00:55:49,830 --> 00:55:53,480 pirms nāk uz leju un hitting šo līniju. 917 00:55:53,480 --> 00:55:55,900 Tas ir asinhronas daļa. 918 00:55:55,900 --> 00:55:58,400 Tas notiek, lai šo pieprasījumu un saka: "Kad esat beidzis, 919 00:55:58,400 --> 00:56:03,080 "Atgriezties un zvanu, ka funkciju, kas es tev teicu, lai izsauktu iekšā panākumus." 920 00:56:03,080 --> 00:56:07,300 Tas nozīmē, ka mēs varam ne tikai lejupielādēt visus krājumus iepriekš. 921 00:56:07,300 --> 00:56:10,300 Mums ir nepieciešams, lai pieprasījumu un gaidīt kaut atgriezties. 922 00:56:10,300 --> 00:56:13,330 Tas nozīmē, ka, pirms mēs varētu vienkārši pateikt Bootstrap, 923 00:56:13,330 --> 00:56:15,580 "Lūk saraksts ar lietām, ko es gribu, lai jūs automātiski pabeigt tālāk." 924 00:56:15,580 --> 00:56:18,950 Mēs vairs nevaram darīt vairs, jo mēs nezinām 925 00:56:18,950 --> 00:56:21,780 ko mēs vēlamies, lai faktiski AutoComplete tālāk. 926 00:56:21,780 --> 00:56:25,190 Par laimi, Bootstrap domāju par šo, jo tie ir gudri puiši tur, 927 00:56:25,190 --> 00:56:30,160 un tie faktiski deva mums vēl viens veids, lai ielādētu šo Typeahead spraudni. 928 00:56:30,160 --> 00:56:35,630 Pirms, šī avota īpašuma vērtība bija tieši liels masīvs lietas automātiski pabeigt tālāk. 929 00:56:35,630 --> 00:56:39,580 >> Tagad avots īpašums ir faktiski funkcija, 930 00:56:39,580 --> 00:56:44,580 un šīs funkcijas mērķis ir izdomāt ko lietas automātiski pabeigt uz esam. 931 00:56:44,580 --> 00:56:48,730 Kā tas notiek, lai izdomāt ir tas gatavojas lūgt Yahoo! Finance 932 00:56:48,730 --> 00:56:51,750 ko vislabāk lietas automātiski pabeigt ir. 933 00:56:51,750 --> 00:56:54,500 Lai to izdarītu, es esmu gatavojas veikt ļoti līdzīga Ajax pieprasījumu. 934 00:56:54,500 --> 00:56:59,010 Es esmu gatavojas pieprasīt šo lapu pie suggest.php. 935 00:56:59,010 --> 00:57:01,360 Es gribu nosūtīt pa simboliem joprojām. 936 00:57:01,360 --> 00:57:05,570 Un tagad mana veiksme, Bootstrap dokumentācija man teica 937 00:57:05,570 --> 00:57:09,130 ka, lai aizpildītu šo sarakstu ar lietām, 938 00:57:09,130 --> 00:57:14,370 visi man ir nepieciešams darīt, ir iet šajā masīvā tagad uz atzvanīšanas funkciju. 939 00:57:14,370 --> 00:57:15,660 Bet pagaidiet minūti. 940 00:57:15,660 --> 00:57:20,240 Ja tas ir vajadzēja būt masīva un AJAX sūta mani atpakaļ teksts, 941 00:57:20,240 --> 00:57:22,720 kā tas ir iespējams? 942 00:57:22,720 --> 00:57:27,910 Tas ievieš jaunu veidu datu apmaiņu sauc JSON. 943 00:57:27,910 --> 00:57:33,000 Šajā gadījumā mēs esam ne tikai nosūtot atpakaļ vienkāršu teksta virkne. 944 00:57:33,000 --> 00:57:37,670 Tagad mums ir darīšana ar šo sarežģītāku saraksta akciju simbolu. 945 00:57:37,670 --> 00:57:41,730 Šie akciju simboli var ietvert arī lietas, piemēram, uzņēmuma nosaukuma vai pašreizējās cenas. 946 00:57:41,730 --> 00:57:47,550 Tikai izmantojot liels ilgi virkni ka nav formatēts nekādā prognozējamā veidā 947 00:57:47,550 --> 00:57:51,970 nav būs labākais veids, kā iegūt šos datus no Yahoo servera man 948 00:57:51,970 --> 00:57:54,540 tādā veidā, ka es varētu viegli saprast. 949 00:57:54,540 --> 00:58:01,280 JSON ir tehnoloģija, kas ņem priekšrocība tam, kā mēs radīt asociatīvas bloki ar JavaScript. 950 00:58:01,280 --> 00:58:04,510 Tas izskatās daudz, piemēram, JavaScript asociatīvās masīvs, 951 00:58:04,510 --> 00:58:06,600 un patiesībā, tas ir tāpēc, ka tā ir. 952 00:58:06,600 --> 00:58:09,710 JSON stendi JavaScript Object notāciju. 953 00:58:09,710 --> 00:58:15,020 Tas ir būtībā vienojusies formātā datu pārsūtīšanu un atpakaļ. 954 00:58:15,020 --> 00:58:18,280 Šeit tas JSON objektu vai tas JSON asociatīvais masīvs 955 00:58:18,280 --> 00:58:21,010 sūta man datus par kursu. 956 00:58:21,010 --> 00:58:25,110 >> Šīs masīva atslēgas ir lietas, piemēram protams, ka ir vērtība CS50, 957 00:58:25,110 --> 00:58:29,140 un noteikti šeit mēs varam redzēt, ka es varētu būt vērtību, kas ir masīvs. 958 00:58:29,140 --> 00:58:32,730 Man nav darīt lietas, piemēram parsētu stīgām un meklēt komatiem 959 00:58:32,730 --> 00:58:35,330 un darīt trakas lietas, piemēram, ka. 960 00:58:35,330 --> 00:58:38,820 Jo tas ir deklarēts šajā JSON formātā, 961 00:58:38,820 --> 00:58:43,510 JavaScript un jQuery jau ir funkcijas, lai pārvērstu string 962 00:58:43,510 --> 00:58:48,140 ka izskatās šādi JSON vērā faktisko JavaScript asociatīvā masīva 963 00:58:48,140 --> 00:58:50,440 ka mēs varam strādāt. 964 00:58:50,440 --> 00:58:56,660 Doing tas ir tik vienkārši, kā sakot, ka vairs nav šo failu, suggest.php, 965 00:58:56,660 --> 00:58:59,040 nosūtot mani atpakaļ vienkārši virkni teksta, 966 00:58:59,040 --> 00:59:01,950 bet es zinu, tas būs sūtīt man atpakaļ JSON. 967 00:59:01,950 --> 00:59:06,760 Tas nozīmē, ka JSON var pārvērst JavaScript asociatīvās masīvs. 968 00:59:06,760 --> 00:59:10,830 Un tā jQuery, es vēlētos, lai jūs darīt, ka par mani. 969 00:59:10,830 --> 00:59:13,990 Tas nozīmē, ka šī atbildes parametrs šeit, 970 00:59:13,990 --> 00:59:16,070 Tas vairs nav tikai virkne. 971 00:59:16,070 --> 00:59:19,860 Jo mēs esam teicis jQuery ka šeit nāk dažas JSON, 972 00:59:19,860 --> 00:59:22,950 jQuery būs pietiekami gudrs, lai saka: "Tu gribēji JSON?" 973 00:59:22,950 --> 00:59:26,890 "Es esmu gatavojas pārvērst kas stājas asociatīvā masīva jums." 974 00:59:26,890 --> 00:59:32,100 Pieņemsim patiesībā to apskatīt cilnē Network kad mums ir quote4.js. 975 00:59:32,100 --> 00:59:35,400 Mēs mainīt šo un pārlādēt lapu. 976 00:59:37,150 --> 00:59:41,250 Tagad es esmu gatavojas rakstīt-atkal. 977 00:59:41,250 --> 00:59:45,600 Esmu veikti pāris pieprasījumus suggest.php, bet tagad šī reakcija, 978 00:59:45,600 --> 00:59:48,670 nevis tikai virknes, tā ir JSON. 979 00:59:48,670 --> 00:59:52,580 Tāpēc man ir atvērta cirtaini lencēm, sakot: "Te nāk asociatīvā masīva." 980 00:59:52,580 --> 00:59:56,830 >> Pirmais un vienīgais galvenais šī asociatīvā masīva sauc simboli, 981 00:59:56,830 --> 01:00:00,240 un tad šeit ir masīvs visas attiecīgās simboliem 982 01:00:00,240 --> 01:00:04,820 nāk tagad no Yahoo! Finance, ne no šī gigantiskā saraksta. 983 01:00:06,110 --> 01:00:10,630 Tas ir, kā es varētu vienkārši aizpildīt šo AutoComplete spraudni 984 01:00:10,630 --> 01:00:14,280 ar dažiem datiem, ka nav ievestas no vietējā failu, kas jau iepriekš 985 01:00:14,280 --> 01:00:17,490 bet no kaut kas cits. 986 01:00:17,490 --> 01:00:21,160 Izrādās, ka mēs faktiski var izmantot tehnoloģiju, ko sauc JSONP, 987 01:00:21,160 --> 01:00:27,420 vai JSON ar polsterējumu, kas novērš šo suggest.php starpnieks. 988 01:00:27,420 --> 01:00:34,010 Bet tā vietā to dara, pieņemsim vietā ņemt apskatīt, kā es varētu uzlabot šo pat vairāk. 989 01:00:34,010 --> 01:00:36,040 Man tiešām patīk bootstrap s Typeahead. Tas ir patiešām jauki. 990 01:00:36,040 --> 01:00:39,570 Bet mēs esam iegūt labi JavaScript un mēs vēlamies, lai veida darīt ar sevi, 991 01:00:39,570 --> 01:00:43,870 varbūt to apskatīt to, ko šis spraudnis varētu darīt. 992 01:00:43,870 --> 01:00:46,500 Pieņemsim vairs izmantot šo Typeahead lieta, 993 01:00:46,500 --> 01:00:50,550 un pieņemsim mēģināt padarīt šo sarakstu ieteikto krājumu paši. 994 01:00:50,550 --> 01:00:53,790 Šeit quote6.php mēs esam gatavojas sākt to pašu ceļu. 995 01:00:53,790 --> 01:00:58,050 Katru reizi, kad kāds veidiem kaut kas, mēs vēlamies, lai AJAX pieprasījumu. 996 01:00:58,050 --> 01:01:01,590 Tas ir līdzīgi mūsu sākotnējā CS50 Finance instant. 997 01:01:01,590 --> 01:01:05,020 Nevis to, pieprasījumu quote.php, 998 01:01:05,020 --> 01:01:08,530 mēs tagad padarīt lūgumu šajā pašā failā kā līdz šim, tas suggest.php, 999 01:01:08,530 --> 01:01:12,460 kas ir tikai gatavojas pull datus no Yahoo! Finance. 1000 01:01:12,460 --> 01:01:19,480 >> Atkal, mēs joprojām gaida JSON, bet tagad, jo Typeahead nedara tas mums, 1001 01:01:19,480 --> 01:01:24,850 mums arī ir nepieciešams nosūtīt pa vērtību, kas ir iekšpusē no pašreizējā teksta lodziņā. 1002 01:01:24,850 --> 01:01:28,120 Tagad mēs zinām, ko jautāt Yahoo! Finance par, 1003 01:01:28,120 --> 01:01:34,160 un tāpēc tagad šeit ir funkcija, kas mēs vēlamies izpildīt tiklīdz pieprasījums pabeidz. 1004 01:01:34,160 --> 01:01:36,520 Mums nav spraudnis, lai sarakstā mums, 1005 01:01:36,520 --> 01:01:40,630 tāpēc šeit ir, ja mēs patiešām gatavojas būvēt ieteikumu sarakstu. 1006 01:01:40,630 --> 01:01:44,850 Lai to izdarītu, līdzīgi kā PHP mēs saliktās šie lielie virknes HTML 1007 01:01:44,850 --> 01:01:48,170 tad mēs drukā tos, mēs varam darīt to pašu precīzu lieta JavaScript. 1008 01:01:48,170 --> 01:01:51,850 Vispirms mēs esam gatavojas sākt šo virkni sauc ieteikumi, 1009 01:01:51,850 --> 01:01:54,590 un tas virkne ir tikai gatavojas būt mazliet HTML. 1010 01:01:54,590 --> 01:01:58,320 Mēs vēlamies, lai to sarakstu ar lietām, tāpēc mēs esam gatavojas sākt ar šo porn, 1011 01:01:58,320 --> 01:02:03,340 un tagad mēs esam gatavojas atkārtot pār visu simbolu, kas tika atdotas atpakaļ pie mums. 1012 01:02:03,340 --> 01:02:06,500 Atcerieties, jo mēs esam teica datatype: "JSON", tas nav virkne. 1013 01:02:06,500 --> 01:02:09,500 Šis ir jau masīvs mums. Tas ir tiešām forši. 1014 01:02:09,500 --> 01:02:13,790 Mēs varam vienkārši teikt: "Es gribu, lai jūs pievienot saraksta elementu." 1015 01:02:13,790 --> 01:02:16,000 Mēs nodot to iekšā ar elementu pusē, ka, 1016 01:02:16,000 --> 01:02:19,030 mēs arī tā klasi ierosinājumus, lai mēs zinām, kas tas ir, 1017 01:02:19,030 --> 01:02:23,880 un tagad šeit ir simbols, ka mēs saņēmām atpakaļ no Yahoo! Finance. 1018 01:02:23,880 --> 01:02:27,230 >> Kad mēs esam izveidojuši elements par katru simbolu esam tikuši atpakaļ, 1019 01:02:27,230 --> 01:02:30,100 Mēs vienkārši vēlamies, lai aizvērtu no saraksta. 1020 01:02:30,100 --> 01:02:33,040 Tāpēc tagad ieteikumi pārstāv šo maz HTML fragmentu 1021 01:02:33,040 --> 01:02:37,860 ka tad, kad likts uz lapas būs saraksts ar lietām, ko mēs sagaidām. 1022 01:02:37,860 --> 01:02:41,070 Tagad tiešām likts ka lapā. 1023 01:02:41,070 --> 01:02:46,390 Lai to izdarītu, es esmu faktiski radījis citu tukšu div, un es esmu devis ID ierosinājumus. 1024 01:02:46,390 --> 01:02:52,520 Daudz, piemēram, mēs noteikti saturu div kas varētu parādīt cenu krājumu datos, 1025 01:02:52,520 --> 01:02:58,600 mēs tagad vienkārši vēlas noteikt saturu šo div lai kāds šī virkne ir 1026 01:02:58,600 --> 01:03:00,290 kas satur šos simbolus. 1027 01:03:00,290 --> 01:03:07,650 Izmantojot šo HTML metodi, tas ieteikumi mainīgs, šī virkne ir virkne HTML. 1028 01:03:07,650 --> 01:03:13,490 Es gribu, lai jūs pieņemt, ka HTML un nodot to iekšpusē div sauc ieteikumi. 1029 01:03:13,490 --> 01:03:15,680 Mēs esam tikko pievienots kaut DOM tagad. 1030 01:03:15,680 --> 01:03:20,360 Mēs esam pievienojuši dažus jaunus elementus uz DOM ka mēs tagad varam parādīt lapā. 1031 01:03:20,360 --> 01:03:22,540 Paskatīsimies, kā tas izskatās. 1032 01:03:22,540 --> 01:03:29,110 Ja mēs slodze quote6 un tagad mēs atkal, 1033 01:03:29,110 --> 01:03:34,480 Tagad, kad es sāku rakstīt AAPL, mums vairs nav, ka bootstrap AutoComplete, 1034 01:03:34,480 --> 01:03:38,470 bet tagad mums ir šis saraksts, kas mēs, sevi. 1035 01:03:38,470 --> 01:03:43,230 Tas ir nedaudz neglītāks nekā bootstrap Typeahead, piemēram, 1036 01:03:43,230 --> 01:03:45,580 bet tas ļauj mums darīt viena cita lieta. 1037 01:03:45,580 --> 01:03:48,660 Kad mēs meklējām tajā bootstrap spraudnis, 1038 01:03:48,660 --> 01:03:52,590 Mēs redzējām, ka tad, kad mēs autocompleted, viena no automātiskās pabeigšanas vērtībām bija AAPL. 1039 01:03:52,590 --> 01:03:54,820 Tas varētu nebūt tik noderīgi. 1040 01:03:54,820 --> 01:03:59,100 Kā lietotājs, es varētu uzreiz atpazīt visus akciju simbolu. 1041 01:03:59,100 --> 01:04:02,370 Ko es esmu, iespējams, vairāk varētu atpazīt ir uzņēmuma faktiskie vārdi. 1042 01:04:02,370 --> 01:04:05,310 Tāpēc tas nebūtu īsti lietderīgi, ja nevis pasakot AAPL 1043 01:04:05,310 --> 01:04:07,970 šo teica kaut ko līdzīgu Apple Inc 1044 01:04:07,970 --> 01:04:12,240 Jo mēs esam velmēto tas sevi, mēs varam patiesi viegli darīt. 1045 01:04:12,240 --> 01:04:17,630 Pieņemsim atvērt mūsu pēdējo piedāvājumu failu šeit, lai quote7. 1046 01:04:17,630 --> 01:04:23,200 >> Pats. Esmu tikko izveidojis citu PHP failu, kas atgriezīsies pie mums vairāk nekā tikai simboliem. 1047 01:04:23,200 --> 01:04:25,550 Tas arī dod mums atpakaļ uzņēmuma nosaukumu. 1048 01:04:25,550 --> 01:04:28,150 Un tāpēc mēs darām to pašu. Mēs nesam AJAX pieprasījumu. 1049 01:04:28,150 --> 01:04:32,370 Kad pieprasījums ir pabeigts, mēs spēsim izpildīt šo funkciju šeit, 1050 01:04:32,370 --> 01:04:36,520 un šī funkcija ir gatavojas veidot lielu virkni elementu. 1051 01:04:36,520 --> 01:04:39,520 Bet atšķirība ir tā, ka no šiem sarakstiem vērtība ir vairs tikai simbols, 1052 01:04:39,520 --> 01:04:45,370 tas tagad nosaukumu. 1053 01:04:45,370 --> 01:04:47,070 Tāpēc mums ir viena neliela problēma. 1054 01:04:47,070 --> 01:04:51,590 Kad mēs izmantojam mūsu lookup, mums ir nepieciešams kaut nodot to simbolu. 1055 01:04:51,590 --> 01:04:54,950 Mēs nevaram iet lookup kaut ko līdzīgu Microsoft Corporation. 1056 01:04:54,950 --> 01:04:57,900 Mums vajag nodot to MSFT. 1057 01:04:57,900 --> 01:05:01,640 Kad mēs rakstiski HTML, mums ir daudz jauku iebūvētiem atribūtiem. 1058 01:05:01,640 --> 01:05:05,440 Varētu būt saistīts ar to href vai klasi. 1059 01:05:05,440 --> 01:05:08,230 Bet tas, ko mēs tiešām ir nepieciešams tagad ir par katru no šīm saitēm 1060 01:05:08,230 --> 01:05:11,120 lai būtu akciju simbolu saistīti ar to. 1061 01:05:11,120 --> 01:05:14,240 Nav iebūvēts HTML atribūtu akciju simbolu, 1062 01:05:14,240 --> 01:05:21,010 bet par laimi, HTML5 ļauj mums radīt mūsu pašu iezīmes, lai tās neatkarīgi no mums vēlas. 1063 01:05:21,010 --> 01:05:24,620 Pasakot datu simbolu, es esmu ieviesusi jaunu atribūtu 1064 01:05:24,620 --> 01:05:29,350 kura vārds es tikai veido, un tas ir labi, jo es ievaddaļā to ar šiem datiem. 1065 01:05:29,350 --> 01:05:34,270 Mēs ejam, lai saglabātu iekšpusē tur simbolu no krājumu tagad. 1066 01:05:34,270 --> 01:05:39,590 Ko tas nozīmē, ka, lai gan mēs esam parādot vērtību uzņēmuma nosaukumu 1067 01:05:39,590 --> 01:05:43,380 iekšpusē mūsu AutoComplete, mēs joprojām atceroties simbolu 1068 01:05:43,380 --> 01:05:47,110 kas ir saistīta ar katra uzņēmuma. 1069 01:05:47,110 --> 01:05:50,350 Veids, kā mēs darām, kas ir iekšā šo elementu pati. 1070 01:05:50,350 --> 01:05:52,930 Tātad tas nozīmē, ka mums ir nepieciešams veikt vēl vienu maiņu. 1071 01:05:52,930 --> 01:05:57,090 Kad mēs noklikšķiniet uz tā tagad mums ir faktiski izmantotu simbols atribūtu 1072 01:05:57,090 --> 01:06:00,220 nevis tikai tā vērtība. 1073 01:06:00,220 --> 01:06:05,010 Ja mēs atpakaļ uz augšu, mēs piešķiram notikuma apdarinātājs ierosinājumus. 1074 01:06:05,010 --> 01:06:09,280 Ja viens no šiem priekšlikumiem ir noklikšķinājuši tagad, es gribu kaut ko darīt. 1075 01:06:09,280 --> 01:06:13,160 Ko es gribu darīt, ir mainīt vērtību, kas ievades lodziņā. 1076 01:06:13,160 --> 01:06:16,100 Tagad es vēlos, lai noteikt šo pašu val funkciju. 1077 01:06:16,100 --> 01:06:21,060 >> Tātad bez jebkādiem argumentiem šī val funkcija atgriež jums to, kas jau ir tekstlodziņā, 1078 01:06:21,060 --> 01:06:27,070 bet, ja jūs arī tā virkne, tas notiek, lai šo stīgu un nodot to tekstlodziņā. 1079 01:06:27,070 --> 01:06:28,980 Es esmu izvēloties savu tekstlodziņu tādā pašā veidā. 1080 01:06:28,980 --> 01:06:31,230 Tā nosaukums ir simbols iekšā forma-citātu. 1081 01:06:31,230 --> 01:06:37,540 Tagad es esmu nosūtot to vērtību atribūta datu simbolu. 1082 01:06:37,540 --> 01:06:41,560 Šī lieta šeit ir jauns, tas $ (this). 1083 01:06:41,560 --> 01:06:46,850 Ko tas attiecas, ir elements, kas tika uzklikšķināt. 1084 01:06:46,850 --> 01:06:50,880 Mēs varam redzēt, ka mēs esam ne pievienojot klikšķi notikumu 1085 01:06:50,880 --> 01:06:54,690 katram elementam ar klasi ierosinājumu individuāli. 1086 01:06:54,690 --> 01:06:57,140 Drīzāk mēs esam tuvojas tas nedaudz savādāk. 1087 01:06:57,140 --> 01:07:01,700 Tā vietā mēs esam sakot, ja kaut iekšpuses šo ieteikumi div, 1088 01:07:01,700 --> 01:07:04,080 kas jāatceras ir tikai konteiners šajā sarakstā, 1089 01:07:04,080 --> 01:07:10,150 ja kaut kas iekšā šī div ir noklikšķinājuši, un tas ir klasi ierosinājumu, 1090 01:07:10,150 --> 01:07:13,000 Es gribu šo notikumu uguns. 1091 01:07:13,000 --> 01:07:17,490 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 1092 01:07:17,490 --> 01:07:20,000 par visiem sarakstā lietām. 1093 01:07:20,000 --> 01:07:22,080 Tāpēc mums nav, ir viena notikuma apdarinātājs par pirmo elementu 1094 01:07:22,080 --> 01:07:24,550 un atšķirīgu notikumu apdarinātājs par otro elementu. 1095 01:07:24,550 --> 01:07:29,880 Mēs var tā vietā teikt: "Es gribu pats notikumu apdarinātājs piemērot visam manā sarakstā." 1096 01:07:29,880 --> 01:07:34,420 Bet mums kaut kā zināt, kuras elements tika noklikšķināts. 1097 01:07:34,420 --> 01:07:38,450 Šis "šo" atslēgvārds ir tikai to. 1098 01:07:38,450 --> 01:07:42,360 Tas ir objekts, kas bija tikai uzklikšķināt lietotājs. 1099 01:07:42,360 --> 01:07:47,680 Ja es tikai noklikšķinājis arī 3 saiti, tas ir elements šajā 3. saiti, 1100 01:07:47,680 --> 01:07:51,670 kas nozīmē, ka es varu saņemt savu atribūts, datu simbolu, 1101 01:07:51,670 --> 01:07:57,760 ko mēs zinām, ir jāsatur simbols, kas ir saistīta ar uzņēmumu es tikko uzklikšķināt. 1102 01:07:57,760 --> 01:08:04,550 Ja mēs pārietu atpakaļ uz mūsu finanšu lapā, 1103 01:08:04,550 --> 01:08:08,580 mēs varam redzēt, ka šobrīd, kad es sāktu rakstīt kaut ko līdzīgu MSFT, 1104 01:08:08,580 --> 01:08:11,220 mēs vairs iegūt tikai akciju simbolus, 1105 01:08:11,220 --> 01:08:13,720 mēs tagad kļūst faktisko uzņēmumus. 1106 01:08:13,720 --> 01:08:20,410 Bet, kad es noklikšķiniet uz vienas no šīm sabiedrībām, 1107 01:08:20,410 --> 01:08:25,180 mēs varam redzēt, ka mēs esam patiešām populating tekstlodziņu nevis ar uzņēmuma nosaukuma 1108 01:08:25,180 --> 01:08:29,850 bet ar kāds bija saglabāta iekšā šo datu atribūtiem. 1109 01:08:29,850 --> 01:08:32,880 Un tāpēc, ja es tiešām pārbaudīt vienu no šiem elementiem, ar labo noklikšķinot uz tā 1110 01:08:32,880 --> 01:08:36,200 un noklikšķinot Pārbaudiet Element, mēs faktiski var redzēt, kā tas izskatās. 1111 01:08:36,200 --> 01:08:40,290 >> Atcerieties, tas ir kaut kas, ka mēs esam radījuši iekšpusē ka cilpa 1112 01:08:40,290 --> 01:08:42,649 kad mēs bijām veidošanā ka virkne HTML. 1113 01:08:42,649 --> 01:08:47,870 Mēs varam redzēt, ka šis datu simbols ir vērtība MSFT, kas ir lieliski. 1114 01:08:47,870 --> 01:08:49,189 Tas, ko mēs gaidījām. 1115 01:08:49,189 --> 01:08:53,170 Tas ir simbols, un tas, kā mēs saņēmām vērtību, kas bija nepieciešams, lai izmantotu 1116 01:08:53,170 --> 01:08:56,140 iekšpuses šo tekstlodziņā. 1117 01:08:56,140 --> 01:08:58,850 Tas ir pietiekami, lai citātu veidā, jo tas ir sava veida garlaicīgi. 1118 01:08:58,850 --> 01:09:02,990 Pieņemsim tikai veikt dažas ātri uzlabojumus mūsu portfeļa lapā. 1119 01:09:02,990 --> 01:09:08,109 Ja jūs esat izmantojis CS50 Finance uz brīdi, un jūs sākat pirkšanas un pārdošanas daudz krājumu, 1120 01:09:08,109 --> 01:09:11,300 beidzot šī tabula ir gatavojas iegūt diezgan liels, 1121 01:09:11,300 --> 01:09:13,850 un jūs gatavojas vēlaties akciju biržas, protams. 1122 01:09:13,850 --> 01:09:20,350 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. 1123 01:09:20,350 --> 01:09:23,290 Iekšpusē meklēšanas lodziņa, ja es sāktu rakstīt kaut ko līdzīgu Disney 1124 01:09:23,290 --> 01:09:26,359 un meklē manu Mickey Mouse noliktavā, mēs varam redzēt, ka tabula ir tagad filtrēšanas 1125 01:09:26,359 --> 01:09:28,189 pamatojoties uz to, ko es tikko drukāti collas 1126 01:09:28,189 --> 01:09:31,640 Šī funkcionalitāte izskatās super sarežģīti, bet tas ir ļoti, ļoti viegli 1127 01:09:31,640 --> 01:09:33,859 ar jQuery un JavaScript. 1128 01:09:33,859 --> 01:09:39,189 Tas portfolio.php fails ietver JavaScript failu sauc portfolio.js. 1129 01:09:39,189 --> 01:09:41,130 Pieņemsim to apskatīt to. 1130 01:09:41,130 --> 01:09:44,890 Tātad html, JS, portfolio. 1131 01:09:44,890 --> 01:09:49,210 Lūk, kur mēs darām, ka meklējot uz galda. 1132 01:09:49,210 --> 01:09:52,750 Pirmā lieta man ir nepieciešams darīt, ir pievienot notikumu apdarinātājs šajā tekstlodziņā 1133 01:09:52,750 --> 01:09:55,760 jo mēs zinām, ka mēs vēlamies, lai mūsu filtrēšanas funkcija uguns 1134 01:09:55,760 --> 01:09:59,800 Katru reizi, kad lietotājs nospiež kaut ko, jo mums nav laika meklēšanas pogas. 1135 01:09:59,800 --> 01:10:03,000 Pirmā lieta, kas mums jādara, ir skaitlis, ko lietotājs meklē, 1136 01:10:03,000 --> 01:10:04,780 tāpat kā mēs to darījām agrāk. 1137 01:10:04,780 --> 01:10:11,320 Šis atslēgvārds attiecas uz pašreizējo elementu lietotājs mijiedarbojas ar. 1138 01:10:11,320 --> 01:10:14,070 >> Jo lietotājs mijiedarbojas ar meklēšanas lodziņu, 1139 01:10:14,070 --> 01:10:17,020 $ Tas atspoguļo meklēšanas lodziņu, 1140 01:10:17,020 --> 01:10:21,820 tāpēc this.val dod mums to, kas iekšpusē meklēšanas laukā lietotājs šobrīd rakstāt. 1141 01:10:22,810 --> 01:10:27,320 Tātad, tagad, ko mēs vēlamies darīt, ir, mēs vēlamies atkārtot pār visu rindu 1142 01:10:27,320 --> 01:10:29,240 iekšpusē mūsu galda. 1143 01:10:29,240 --> 01:10:35,630 Lai atlasītu visus mūsu tabulas rindas, es sniedza ka šī tabula ID galda portfeļa, 1144 01:10:35,630 --> 01:10:39,060 un katra rinda ir pārstāvēta ar TR elements, 1145 01:10:39,060 --> 01:10:42,080 tāpēc šis pārslēgs ir gatavojas atgriezties man liels masīvs 1146 01:10:42,080 --> 01:10:44,370 visu manā tabulas rindas. 1147 01:10:44,370 --> 01:10:47,010 Tagad es gribu atkārtot pār šo masīvu. 1148 01:10:47,010 --> 01:10:52,390 Es varētu jums par cilpu, bet jQuery faktiski sniedz mums jauku funkciju sauc "katrs." 1149 01:10:52,390 --> 01:10:55,220 Ko katrs dara, ir viena ņem vienu argumentu, 1150 01:10:55,220 --> 01:10:57,090 un šis arguments ir funkcija. 1151 01:10:57,090 --> 01:11:02,760 Ko tā gatavojas darīt, ir tas gatavojas piemērot šo funkciju, lai katru elementu iekšpusē šajā sarakstā. 1152 01:11:02,760 --> 01:11:05,550 Šī funkcija aizņem vienu argumentu, kas ir e, 1153 01:11:05,550 --> 01:11:10,090 un kad šī funkcija ir izpildīta, šī e gatavojas aizstāt ar pirmo rindu, 1154 01:11:10,090 --> 01:11:12,070 tad otrā rindā, un pēc tam trešajā rindā. 1155 01:11:12,070 --> 01:11:15,150 Ar šo ceļu, tas ir tas pats, kas darbojas uz cilpas 1156 01:11:15,150 --> 01:11:21,360 un tad norādītas pašreizējo elementu, pamatojoties uz indeksu iekšpusē jūsu par cilpu. 1157 01:11:21,360 --> 01:11:24,750 Katrā iterācijā, par katru no šiem tabulas elementiem, 1158 01:11:24,750 --> 01:11:30,560 Es gribu, lai pārbaudītu, vai teksta elementa - tekstu šūnā iekšpusē rindas - 1159 01:11:30,560 --> 01:11:33,130 sērkociņi, ko es esmu meklē. 1160 01:11:33,130 --> 01:11:36,390 Šis liels garš virkne komandu ir kā es to varētu darīt. 1161 01:11:36,390 --> 01:11:40,900 Pirmkārt, atkal, tas tagad attiecas uz - jo tas ir iekšā no jauna funkcija - 1162 01:11:40,900 --> 01:11:45,020 tas tagad pašreizējo rindu tabulā. 1163 01:11:45,020 --> 01:11:47,340 Es gribu, lai to pašreizējo rindu tabulā, 1164 01:11:47,340 --> 01:11:49,950 un es gribu, lai saņemtu visu savu bērnu. 1165 01:11:49,950 --> 01:11:51,940 Atcerieties, DOM ir hierarhiska koku, 1166 01:11:51,940 --> 01:11:54,200 kas nozīmē, ka elementi ir vairāki bērni. 1167 01:11:54,200 --> 01:12:00,180 >> Tas. Bērni funkcija ir gatavojas atgriezties ar mani atpakaļ masīvs visus elementus 1168 01:12:00,180 --> 01:12:03,240 ka ir bērni, kas šajā gadījumā, rindu tabulā. 1169 01:12:03,240 --> 01:12:07,150 Tas ir vienkārši šūnas iekšpusē rindas. 1170 01:12:07,150 --> 01:12:09,230 Es tikai vēlos, lai meklētu pa pirmo šūnu. 1171 01:12:09,230 --> 01:12:13,090 Tas. Pirmā funkcija saka man pirmais elements šajā masīvā. 1172 01:12:13,090 --> 01:12:17,070 Tad teksts funkcija saka saņemt mani tieši to iekšpusē šīs šūnas 1173 01:12:17,070 --> 01:12:19,530 jo es gribu, lai meklētu pa šo tekstu. 1174 01:12:19,530 --> 01:12:21,040 Visbeidzot, pieņemsim konvertēt to uz mazo 1175 01:12:21,040 --> 01:12:23,940 lai mēs varam darīt teksta case nejutīgas vaicājumiem. 1176 01:12:23,940 --> 01:12:29,990 Visbeidzot, mēs gribam, lai redzētu, kas iekšpusē tabulas virkne satur virkni Mēs esam meklē. 1177 01:12:29,990 --> 01:12:32,980 IndexOf funkcija JavaScript dara tikai to. 1178 01:12:32,980 --> 01:12:37,060 Tā stāsta par to, vai šī virkne satur citu virkni. 1179 01:12:37,060 --> 01:12:40,150 Ja tā ir taisnība, ka šūna satur to, ko es esmu meklē, 1180 01:12:40,150 --> 01:12:42,140 tad es gribu, lai pārliecinātos, ka tas ir pierādīts. 1181 01:12:42,140 --> 01:12:45,330 Parādīt metode saka, "Parādīt elements." 1182 01:12:45,330 --> 01:12:50,350 Ja tas tā nav, tad tas nozīmē, ka kāds es esmu meklējot nav ietverts 1183 01:12:50,350 --> 01:12:53,550 šajā rindā, un tāpēc es gribu, lai paslēptu ir no lietotāja. 1184 01:12:53,550 --> 01:12:59,240 Kas sasniedz ka jauki filtrēšanas efekts kur vairs mēs redzam visu tabulu. 1185 01:12:59,240 --> 01:13:01,480 Ja jūs interesē, kā padarīt šo svārsts, kā arī, 1186 01:13:01,480 --> 01:13:04,180 mēs pēc avotu internetā. Bet tas ir patiešām vienkārši. 1187 01:13:04,180 --> 01:13:09,860 JQuery ir laba metodes šiem animāciju un manipulējot CSS īpašības. 1188 01:13:09,860 --> 01:13:11,020 Tātad, tas ir tas par mani. 1189 01:13:11,020 --> 01:13:15,560 >> Kas tad ir priekšā? Kā jūs redzēsiet pēc dažām dienām, gala projektu priekšlikums ir saistīts. 1190 01:13:15,560 --> 01:13:17,730 Gala projekti priekšlikums uzdot jums dažus jautājumus, 1191 01:13:17,730 --> 01:13:19,420 bet starp tiem būs trīs stūrakmeņi - 1192 01:13:19,420 --> 01:13:22,840 Viens bija "labs" pavērsiens, viens labāks pavērsiens, un viens labākais. 1193 01:13:22,840 --> 01:13:25,870 Ideja ir tiešām palīdzēs jums puiši noteikti jūsu cerības 1194 01:13:25,870 --> 01:13:29,160 lai minimāli jums būs apmierināti ar rezultātu savu galīgo projektu 1195 01:13:29,160 --> 01:13:32,060 un tas būs "labs", ciktāl jums ir bažas. 1196 01:13:32,060 --> 01:13:34,540 Bet tad interesēs kļūst jums sasniegt tikai mazliet, lai kaut ko labāku 1197 01:13:34,540 --> 01:13:37,680 vai kaut labākais, mēs arī sakārtotu un push jūs pret ka labi. 1198 01:13:37,680 --> 01:13:40,660 The CS50 Hack-a-Thon, tikmēr ir pēc dažām nedēļām. 1199 01:13:40,660 --> 01:13:44,340 Raksturīgi, mēs šo par loterijas pamata, jo par procentiem, 1200 01:13:44,340 --> 01:13:47,680 bet izredzes ir, mēs ņemšu dažus simtus no mums autobusu satiksme no Hārvardas laukums 1201 01:13:47,680 --> 01:13:51,540 līdz Kendall Square, kur Microsoft ir skaista iekārtas trāpīgi sauc par "NERD" - 1202 01:13:51,540 --> 01:13:53,830 New England pētniecības un attīstības centrs. 1203 01:13:53,830 --> 01:13:56,380 Mēs tur nokļūt ap 20:00 Mums būs ēdienu. 1204 01:13:56,380 --> 01:13:58,160 Ap 01:00 mums būs daži vairāk pārtikas. 1205 01:13:58,160 --> 01:14:02,150 Ap 05:00, ja jūs joprojām nomodā mēs dodies uz IHop vai aizvedīs atpakaļ uz Campus. 1206 01:14:02,150 --> 01:14:04,380 Mērķis ir nodoties gala projektu 1207 01:14:04,380 --> 01:14:06,190 līdzās klasesbiedriem un darbiniekiem. 1208 01:14:06,190 --> 01:14:08,280 Tad dažas dienas vēlāk ir CS50 gadatirgus, 1209 01:14:08,280 --> 01:14:10,990 kas patiešām nozīmē būt iespēja, lai jūs puiši, lai parādītu savu darbu 1210 01:14:10,990 --> 01:14:12,700 un sasniegumi par pusgadu 1211 01:14:12,700 --> 01:14:15,610 bet berzes pleciem ar otru un iegūt sajūtu, ko katrs darīja. 1212 01:14:15,610 --> 01:14:17,850 Ar to teica, liels paldies Tommy un Jāzepam 1213 01:14:17,850 --> 01:14:19,960 un mēs redzēt jūs pirmdien. 1214 01:14:19,960 --> 01:14:24,070  [Aplausi]