1
00:00:00,000 --> 00:00:02,700
[Powered by Google Translate] [Week 9, Sambungan]

2
00:00:02,700 --> 00:00:05,160
[David J. Malan - Universiti Harvard]

3
00:00:05,160 --> 00:00:07,020
[Ini adalah CS50. - CS50.TV]

4
00:00:07,940 --> 00:00:13,340
>> Ini adalah CS50. Ini adalah akhir sebanyak 9 minggu. Thank you very much.

5
00:00:13,340 --> 00:00:15,310
Akhirnya. Minggu 9. Saya mendapat ia.

6
00:00:15,310 --> 00:00:18,590
Hari ini kita meneruskan perbualan kami tentang pengaturcaraan web

7
00:00:18,590 --> 00:00:21,660
dengan mata ke arah projek akhir, bukan kerana anda perlu untuk melakukan sesuatu yang berasaskan web

8
00:00:21,660 --> 00:00:25,610
bagi projek-projek akhir tetapi kerana sama ada untuk projek akhir atau selepas CS50

9
00:00:25,610 --> 00:00:29,000
ini sudah pasti arah di mana perisian moden akan.

10
00:00:29,000 --> 00:00:31,770
Tetapi ia sebenarnya bukan satu perkara yang mudah.

11
00:00:31,770 --> 00:00:35,040
Malah, salah satu perkara yang paling sukar untuk dilakukan adalah aspek reka bentuk.

12
00:00:35,040 --> 00:00:38,600
>> Sebagai contoh, oleh reka bentuk kita maksudkan sebenarnya mendapat antara muka pengguna

13
00:00:38,600 --> 00:00:40,420
atau pengalaman pengguna yang betul.

14
00:00:40,420 --> 00:00:43,200
Saya berani mengatakan bahawa - dan kita tahu dari set masalah baru-baru ini

15
00:00:43,200 --> 00:00:45,960
apabila beberapa anda disiarkan gripes anda tentang sekeping beberapa perisian

16
00:00:45,960 --> 00:00:49,000
atau perkakasan yang marah anda, sama ada di kampus atau di luar -

17
00:00:49,000 --> 00:00:51,930
terdapat banyak laman web di luar sana, terdapat banyak perkakasan di luar sana,

18
00:00:51,930 --> 00:00:53,900
yang jenis menghisap.

19
00:00:53,900 --> 00:00:58,730
Tetapi realitinya adalah bahawa membuat perkara-perkara yang mudah untuk digunakan lagi tetap berkuasa

20
00:00:58,730 --> 00:01:00,550
adalah satu cabaran yang amat sukar.

21
00:01:00,550 --> 00:01:03,680
Jadi untuk hari ini, saya bertanya kepada Yusuf dan Tommy untuk menyertai saya di sini

22
00:01:03,680 --> 00:01:06,680
supaya kita boleh mempunyai perbualan, kedua-duanya tentang reka bentuk

23
00:01:06,680 --> 00:01:09,090
dan apa jenis proses pemikiran harus bermula melalui kepala anda

24
00:01:09,090 --> 00:01:12,040
apabila anda reka bentuk projek akhir anda, usaha masa depan anda.

25
00:01:12,040 --> 00:01:15,040
Dan kemudian dengan bantuan Tommy kita akan melihat beberapa butiran pelaksanaan.

26
00:01:15,040 --> 00:01:18,440
Bagaimana anda boleh mempunyai wawasan beberapa di atas kertas atau dalam fikiran anda

27
00:01:18,440 --> 00:01:20,760
bahawa anda kemudiannya boleh melaksanakan programatik

28
00:01:20,760 --> 00:01:24,030
dengan menggunakan beberapa teknologi dan teknik, kita baru sahaja mula bercakap tentang,

29
00:01:24,030 --> 00:01:29,080
iaitu JavaScript dan sesuatu yang baru, iaitu AJAX, JavaScript tak segerak.

30
00:01:29,080 --> 00:01:32,950
Yang membolehkan anda untuk mewujudkan semua yang lebih dinamik antara muka pengguna

31
00:01:32,950 --> 00:01:35,780
dengan menjemput lebih dan lebih banyak data progresif dari pelayan.

32
00:01:35,780 --> 00:01:38,560
Jadi kita akan melihat beberapa coretan mereka juga hari ini.

33
00:01:38,560 --> 00:01:41,800
Sebagai mengetepikan, jika anda berminat untuk menumpukan perhatian dalam bidang sains komputer

34
00:01:41,800 --> 00:01:45,010
atau minoring dalam bidang sains komputer, tahu bahawa ini Jumaat di tengah hari

35
00:01:45,010 --> 00:01:48,750
dalam Maxwell Dworkin 221 ada akan menjadi acara pizza

36
00:01:48,750 --> 00:01:50,780
mana anda boleh belajar sedikit lebih lanjut mengenai sains komputer.

37
00:01:50,780 --> 00:01:54,860
Pada jalan keluar pintu anda hari ini, anda akan dapat memilih panduan tidak rasmi CS di Harvard.

38
00:01:54,860 --> 00:01:57,290
Kami akan meletakkan di atas tong sampah di luar pada ketinggian pinggang

39
00:01:57,290 --> 00:01:59,750
supaya jika anda ingin merebut ini dan belajar sedikit lebih lanjut mengenai CS,

40
00:01:59,750 --> 00:02:02,480
yang akan berada di sana untuk anda kerana ia adalah di titik 0 minggu.

41
00:02:02,480 --> 00:02:06,500
Juga jika anda ingin menyertai kami untuk makan tengahari CS50 Jumaat ini pada 01:15,

42
00:02:06,500 --> 00:02:09,800
mengetuai untuk cs50.net/lunch.

43
00:02:09,800 --> 00:02:13,260
Tanpa berlengah-lengah lagi, saya memberikan anda pengajaran sesama Yusuf Ong.

44
00:02:13,260 --> 00:02:19,190
Hi. [Tepukan]

45
00:02:19,190 --> 00:02:20,770
Terima kasih.

46
00:02:20,770 --> 00:02:24,780
Kali pertama saya belajar tentang reka bentuk adalah di dalam kelas yang di sini dipanggil CS179.

47
00:02:24,780 --> 00:02:28,040
>> Profesor pada masa itu memberitahu kita cerita tentang profesor lain

48
00:02:28,040 --> 00:02:31,640
yang telah pergi ke sebuah hotel dan menggunakan faucets.

49
00:02:31,640 --> 00:02:35,630
Bolehkah sesiapa beritahu saya apa 2 tombol di sebelah kiri dan kanan lakukan?

50
00:02:35,630 --> 00:02:39,080
[Pelajar] panas dan sejuk. >> Panas dan sejuk. Baik.

51
00:02:39,080 --> 00:02:41,430
Apa yang anda biasanya menjangkakan, kan?

52
00:02:41,430 --> 00:02:46,960
Ini profesor selepas menggunakan keran mahu mengambil mandi, dan dia bertindak untuk menggunakan ini.

53
00:02:46,960 --> 00:02:51,310
Beliau berpendapat kiri dan kanan adalah untuk panas dan sejuk, kan?

54
00:02:51,310 --> 00:02:55,470
Tetapi sesiapa sahaja boleh beritahu saya apa ini sebenarnya lakukan?

55
00:02:55,470 --> 00:02:58,060
Mana-mana tangan?

56
00:02:58,060 --> 00:03:01,740
[Sambutan pelajar didengar] >> Salah satu cadangan adalah?

57
00:03:01,740 --> 00:03:05,860
[Pelajar tindak balas didengar] >> Suhu?

58
00:03:05,860 --> 00:03:10,460
Jadi salah seorang daripada mereka mengawal suhu dan kawalan lain? >> [Pelajar] Air tekanan.

59
00:03:10,460 --> 00:03:12,350
Tekanan air. Baik.

60
00:03:12,350 --> 00:03:15,100
Profesor ini berjalan ke dalam ini dan, pemikiran mereka mengawal panas dan sejuk,

61
00:03:15,100 --> 00:03:21,470
bertukar yang betul, yang difikirkannya adalah untuk panas, sepanjang jalan sehingga

62
00:03:21,470 --> 00:03:23,560
kerana dia mahu mengambil mandi panas.

63
00:03:23,560 --> 00:03:28,100
Nah, ini tidak benar-benar sepadan, jadi dia mendapat pengalaman ini tidak sangat seronok

64
00:03:28,100 --> 00:03:31,110
berada di mandi sejuk, dan kita semua tahu apa yang merasakan seperti.

65
00:03:31,110 --> 00:03:33,620
Ini adalah satu contoh kecacatan reka bentuk.

66
00:03:33,620 --> 00:03:37,040
Apa yang saya maksudkan dengan itu adalah harapan dari keran

67
00:03:37,040 --> 00:03:39,420
tidak sepadan dengan apa yang keluar dari bilik mandi,

68
00:03:39,420 --> 00:03:41,780
yang merupakan jenis malang bagi dia.

69
00:03:41,780 --> 00:03:44,990
Jadi ini adalah satu contoh kecacatan reka bentuk yang berlaku dalam kehidupan sebenar.

70
00:03:44,990 --> 00:03:48,020
Tetapi kita melihat segala macam orang lain juga.

71
00:03:48,020 --> 00:03:50,390
Kami mungkin tidak peminat sistem MBTA.

72
00:03:50,390 --> 00:03:55,560
Ini adalah satu sistem keretapi bawah tanah dengan sebenarnya di London, yang berkata, "Butang ini tidak digunakan."

73
00:03:55,560 --> 00:04:00,220
Mengapa ia walaupun di sana? Mengapa kita peduli?

74
00:04:00,220 --> 00:04:02,810
Apabila saya adalah seorang kanak-kanak, menjadi satu celik teknologi di dalam rumah,

75
00:04:02,810 --> 00:04:05,050
apabila komputer akan berlanggar, ibu saya akan datang kepada saya,

76
00:04:05,050 --> 00:04:07,060
menunjukkan saya skrin ini dan meminta saya apa yang berlaku.

77
00:04:07,060 --> 00:04:09,210
>> Walaupun saya tidak tahu apa ini bermakna.

78
00:04:11,890 --> 00:04:14,700
[Ketawa] Apa?

79
00:04:16,950 --> 00:04:18,019
[Ketawa]

80
00:04:18,720 --> 00:04:23,050
Kadang-kadang kita berasa seperti pemaju perisian hanya Trolling kita.

81
00:04:23,050 --> 00:04:28,460
Sebagai pengguna kita seperti, "Apa yang sedang berlaku? Seseorang memberitahu kita."

82
00:04:28,460 --> 00:04:32,140
Ini semua datang ke isu reka bentuk.

83
00:04:32,140 --> 00:04:34,650
Reka bentuk, seperti yang kita boleh lihat, bukan semata-mata tentang estetika,

84
00:04:34,650 --> 00:04:37,230
ia bukan tentang bagaimana benda kelihatan.

85
00:04:37,230 --> 00:04:41,720
Kita lihat di sini bahawa ini sedikit pop-up di sini sebenarnya kelihatan agak baik.

86
00:04:41,720 --> 00:04:45,290
Ia mempunyai bayang-bayang jatuh di latar belakang, ia mempunyai radiuses sempadan berlaku.

87
00:04:45,290 --> 00:04:47,550
Ia adalah jenis cantik.

88
00:04:47,550 --> 00:04:51,480
Ia tidak benar-benar direka dengan baik kerana ia bukan sangat mesra pengguna.

89
00:04:51,480 --> 00:04:54,920
Itulah sedikit pop-up yang datang tidak benar-benar memberi saya apa-apa maklumat

90
00:04:54,920 --> 00:04:58,450
tentang apa yang berlaku, ia tidak beritahu saya apa-apa sebagai pengguna

91
00:04:58,450 --> 00:05:01,400
tentang bagaimana untuk pulih dari kesilapan itu.

92
00:05:01,400 --> 00:05:05,190
Kita mahu untuk berfikir tentang perkara-perkara yang reka bentuk adalah tidak.

93
00:05:05,190 --> 00:05:06,670
Pertama, ia tidak estetika.

94
00:05:06,670 --> 00:05:10,800
Ia juga tidak pemadat apl anda dengan tan fungsi yang tidak perlu.

95
00:05:10,800 --> 00:05:14,890
Jika anda sebuah restoran Thai, anda mungkin tidak mahu menjadi doktor gigi pada masa yang sama.

96
00:05:14,890 --> 00:05:17,720
Dan dengan Soalan Facebook, tidak bahawa ramai orang digunakan

97
00:05:17,720 --> 00:05:21,130
dan ia tidak benar-benar di teras apa yang mereka sedang membina.

98
00:05:21,130 --> 00:05:24,200
Dan jadi ia adalah baik untuk berfikir tentang tidak begitu banyak kuantiti perkara

99
00:05:24,200 --> 00:05:26,390
bahawa anda meletakkan permohonan anda tetapi kualiti

100
00:05:26,390 --> 00:05:28,910
dan bagaimana anda membuat bahawa pengalaman pengguna yang lebih baik

101
00:05:28,910 --> 00:05:32,540
dengan sebenarnya meningkatkan atas apa yang anda sudah mempunyai.

102
00:05:32,540 --> 00:05:37,040
>> Secara ringkas, reka bentuk memberitahu kita apa yang kita perlu membina.

103
00:05:37,040 --> 00:05:41,950
Sebagai contoh, jika kita membina sesuatu yang membolehkan kita mencari perkara,

104
00:05:41,950 --> 00:05:45,970
seperti Google, sebagai contoh, kita perlu melakukan perkara-perkara dalam cara yang

105
00:05:45,970 --> 00:05:48,950
yang memerlukan pengguna untuk mengambil banyak klik untuk mendapatkan apa yang mereka mahu,

106
00:05:48,950 --> 00:05:52,580
atau kita perlu melakukannya dengan cara yang, sebagai contoh, dengan Google Instant atau autolengkap

107
00:05:52,580 --> 00:05:54,970
yang membolehkan kita mendapat keputusan kami lebih cepat?

108
00:05:54,970 --> 00:05:58,740
Kejuruteraan melibatkan, seperti Tommy akan menunjukkan kepada anda, sebenarnya bangunan itu.

109
00:05:58,740 --> 00:06:01,890
Terdapat banyak jenis reka bentuk.

110
00:06:01,890 --> 00:06:06,070
Sebagai contoh, jika anda membina sesuatu untuk menggunakan sesuatu

111
00:06:06,070 --> 00:06:09,770
di negara Dunia Ketiga di mana tidak ada elektrik banyak atau bahawa teknologi banyak,

112
00:06:09,770 --> 00:06:11,440
anda perlu reka bentuk apa yang anda membina

113
00:06:11,440 --> 00:06:14,210
dengan cara yang mudah memberikan akses kepada penduduk di sana.

114
00:06:14,210 --> 00:06:18,290
Tetapi apa jenis keputusan reka bentuk yang lain mungkin terdapat

115
00:06:18,290 --> 00:06:21,850
atau mungkin terlibat dalam sesuatu seperti ini?

116
00:06:23,690 --> 00:06:25,660
Yeah. Saya melihat tangan.

117
00:06:25,660 --> 00:06:37,200
[Pelajar tindak balas didengar] >> Hak. Tepat sekali. Kebolehcapaian adalah satu perkara.

118
00:06:37,200 --> 00:06:40,870
Ramai orang tidak berfikir tentang, "Apa kira-kira pengguna saya?"

119
00:06:40,870 --> 00:06:43,160
seperti keterlaluan spektrum sama ada.

120
00:06:43,160 --> 00:06:47,770
Saya mempunyai pengguna yang mungkin mempunyai kurang upaya bahawa saya tidak memikirkan tentang

121
00:06:47,770 --> 00:06:50,590
dan saya hanya memikirkan tentang bentuk untuk pengguna umum.

122
00:06:50,590 --> 00:06:52,630
Internet adalah diakses oleh semua orang pada masa kini,

123
00:06:52,630 --> 00:06:54,870
dan saya harus bentuk bagi orang-orang baik.

124
00:06:54,870 --> 00:06:58,620
Apakah jenis keputusan reka bentuk yang lain yang mungkin anda buat?

125
00:06:58,620 --> 00:07:00,690
Ya. >> [Pelajar] Kos.

126
00:07:00,690 --> 00:07:02,680
Kos. Sangat baik.

127
00:07:02,680 --> 00:07:08,060
Satu lagi perkara yang kita mungkin asas keputusan reka bentuk kami adalah kos.

128
00:07:08,060 --> 00:07:13,130
Jika kita berada perniagaan, anda mahu membina sesuatu yang tidak mengambil kos yang banyak untuk menghasilkan

129
00:07:13,130 --> 00:07:17,720
tetapi boleh menjual pada kos yang amat tinggi atau boleh mendapatkan kita beberapa keuntungan.

130
00:07:17,720 --> 00:07:21,540
>> Ini adalah semua jenis reka bentuk, tetapi apabila kita membina sesuatu di Internet

131
00:07:21,540 --> 00:07:25,120
atau apabila kita sedang membina sesuatu yang mungkin tidak kos yang banyak untuk membina sekarang,

132
00:07:25,120 --> 00:07:28,630
seperti aplikasi Internet - anda tidak perlu membuang modal banyak ke dalamnya

133
00:07:28,630 --> 00:07:30,900
untuk membuat sesuatu yang sebenarnya berfungsi -

134
00:07:30,900 --> 00:07:33,490
apa yang kami lebih bimbang adalah pengalaman pengguna.

135
00:07:33,490 --> 00:07:36,390
Kami menyeru ini reka bentuk berpusatkan pengguna.

136
00:07:36,390 --> 00:07:41,550
Pada asasnya apa yang pengguna berpusatkan reka bentuk melibatkan meletakkan diri dalam kasut pengguna anda.

137
00:07:41,550 --> 00:07:44,870
Jika tanda-tanda seseorang sehingga untuk apa yang saya membina,

138
00:07:44,870 --> 00:07:48,250
mereka telah jelas datang kepada aplikasi tertentu saya dengan matlamat dalam fikiran,

139
00:07:48,250 --> 00:07:50,280
dengan tugas mereka mahu untuk melengkapkan.

140
00:07:50,280 --> 00:07:53,650
Dan kerja anda adalah bukan sahaja untuk membantu mereka melengkapkan tugas itu

141
00:07:53,650 --> 00:07:57,930
tetapi untuk membantu mereka menyelesaikan tugas itu dengan cara yang cekap, intuitif,

142
00:07:57,930 --> 00:08:01,900
dan, sebagai orang beberapa berkata di sana, boleh diakses.

143
00:08:01,900 --> 00:08:03,750
Apakah kecekapan maksudkan?

144
00:08:03,750 --> 00:08:08,050
Kecekapan bermakna berapa cepat pengguna saya menyiapkan tugasan yang diberi muka saya.

145
00:08:08,050 --> 00:08:11,650
Adakah ia mengambil banyak klik bagi mereka untuk mendapatkan dari satu tempat ke tempat yang lain?

146
00:08:11,650 --> 00:08:14,630
Adakah ia membosankan? Adakah mereka perlu melaksanakan banyak tugas-tugas berulang-ulang?

147
00:08:14,630 --> 00:08:17,140
Kami mahu menjadikan proses itu sebagai cekap yang mungkin

148
00:08:17,140 --> 00:08:20,070
supaya mereka tidak perlu melakukan perkara-macam perkara.

149
00:08:20,070 --> 00:08:24,230
Gerak hati, sebagai contoh, jika pengguna kelihatan muka saya,

150
00:08:24,230 --> 00:08:27,240
ia mudah bagi mereka untuk mendapatkan dari satu tempat ke tempat?

151
00:08:27,240 --> 00:08:30,390
Adakah ia mudah bagi mereka untuk mengetahui apa yang mereka perlu klik di antara muka saya

152
00:08:30,390 --> 00:08:33,770
dalam usaha mereka untuk mencapai matlamat atau tugas yang mereka mahu mencapai?

153
00:08:33,770 --> 00:08:37,520
>> Dan akhirnya, seperti seseorang berkata di sana, akses adalah sangat penting.

154
00:08:37,520 --> 00:08:39,640
[Penceramah lelaki] Ia datang akses untuk perkara-perkara seperti penglihatan,

155
00:08:39,640 --> 00:08:42,740
suka bagaimana saya sebenarnya reka bentuk sesuatu untuk seseorang yang buta?

156
00:08:42,740 --> 00:08:46,460
Oh. Bagi orang-orang yang tidak dapat melihat pada semua, kita mempunyai sesuatu yang dipanggil pembaca skrin.

157
00:08:46,460 --> 00:08:49,070
Apa yang anda harus lakukan ialah anda perlu membina laman web anda dengan cara yang

158
00:08:49,070 --> 00:08:52,020
bahawa, sebagai contoh, teknologi tertentu apa yang kita panggil -

159
00:08:52,020 --> 00:08:53,590
Terdapat banyak perkara sekarang.

160
00:08:53,590 --> 00:08:55,660
Saya fikir terdapat dipanggil pembaca skrin JAWS.

161
00:08:55,660 --> 00:08:58,410
Banyak perkara-perkara ini bergantung kepada apa yang kita panggil peraturan kawasan

162
00:08:58,410 --> 00:09:02,010
untuk membaca kepada pengguna apa yang hadir pada halaman.

163
00:09:02,010 --> 00:09:05,480
Bagi orang-orang yang tidak dapat melihat, anda perlu memastikan bahawa pembaca skrin

164
00:09:05,480 --> 00:09:09,130
sebenarnya boleh mengambil kandungan pada halaman dan sebenarnya boleh menunjukkan pengguna anda,

165
00:09:09,130 --> 00:09:13,630
jika anda tidak boleh melihat, sekurang-kurangnya anda masih boleh memahami kandungan pada halaman.

166
00:09:13,630 --> 00:09:16,190
Yeah. Okay.

167
00:09:16,190 --> 00:09:23,410
Cukuplah bercakap tentang reka bentuk yang baik. Mari kita bercakap tentang reka bentuk yang buruk.

168
00:09:23,410 --> 00:09:25,220
Ini adalah perkara-perkara yang anda tidak patut lakukan.

169
00:09:25,220 --> 00:09:27,890
Bolehkah sesiapa beritahu saya tentang pengalaman mereka dengan Craigslist

170
00:09:27,890 --> 00:09:32,190
dan apa yang mereka fikir tidak begitu besar tentang reka bentuk ini?

171
00:09:33,690 --> 00:09:36,430
Ya. >> [Pelajar] Saya fikir ada terlalu banyak perkataan dalam satu kawasan.

172
00:09:36,430 --> 00:09:39,350
Terlalu banyak perkataan, kan? Sepenuhnya hangat.

173
00:09:39,350 --> 00:09:42,400
Anda datang ke halaman ini dan anda disambut dengan sekumpulan seluruh perkara di sini

174
00:09:42,400 --> 00:09:43,860
yang mungkin tidak perkara itu kepada anda.

175
00:09:43,860 --> 00:09:47,010
Sebagai contoh, anda tinggal di salah satu negeri yang tidak bermula dengan huruf ini.

176
00:09:47,010 --> 00:09:48,690
Katakan anda tinggal di Texas atau sesuatu.

177
00:09:48,690 --> 00:09:53,790
>> Anda perlu untuk menatal semua jalan ke bawah halaman untuk sampai ke lokasi anda berada di.

178
00:09:53,790 --> 00:10:00,320
Saya dari Boston, jadi biarlah saya melihat di Massachusetts. Di manakah Massachusetts?

179
00:10:00,320 --> 00:10:03,270
Oh, ia di sini. Oh, ia Boston. Okay.

180
00:10:03,270 --> 00:10:09,070
Mari kita lihat di Boston. [Ketawa]

181
00:10:09,070 --> 00:10:12,250
Pretty hangat, kan?

182
00:10:12,250 --> 00:10:16,400
Perkara-perkara yang janggal di sana. [Ketawa]

183
00:10:17,320 --> 00:10:19,470
Katakan Saya mencari tempat untuk hidup.

184
00:10:19,470 --> 00:10:24,130
Berapa ramai orang sebenarnya telah digunakan Craigslist? Tan anda.

185
00:10:24,130 --> 00:10:30,960
Terdapat agak buruk cara melihat ini, tetapi mari kita lihat di ini.

186
00:10:35,130 --> 00:10:38,970
Apakah perbezaan antara img dan gambar? Bolehkah sesiapa beritahu saya?

187
00:10:41,350 --> 00:10:42,830
Terdapat sebenarnya tiada perbezaan.

188
00:10:42,830 --> 00:10:47,710
Mereka bermakna perkara yang sama, tetapi mereka mempunyai label yang berlainan bagi mereka untuk sebab-sebab tertentu.

189
00:10:48,980 --> 00:10:53,560
Jika saya klik pada Mempunyai Imej, tiada apa yang berlaku pada halaman.

190
00:10:53,560 --> 00:10:57,490
Saya sebenarnya mempunyai klik Search sekali lagi untuk sesuatu yang berlaku.

191
00:10:57,490 --> 00:11:02,430
Apa yang mungkin reka bentuk yang lebih baik keputusan yang boleh dilakukan di sana?

192
00:11:03,820 --> 00:11:08,030
Jika saya klik pada penapis itu, saya mungkin mahu untuk menapis oleh tindakan yang tertentu

193
00:11:08,030 --> 00:11:09,970
atau kategori tertentu.

194
00:11:09,970 --> 00:11:14,450
Jadi, bukannya mempunyai untuk tekan Cari lagi, saya hanya secara automatik boleh melakukan penapisan

195
00:11:14,450 --> 00:11:17,060
jenis Google gaya mana yang mereka lakukan serta-merta.

196
00:11:17,060 --> 00:11:20,440
[Malan] Tetapi tidak terbentuk seperti yang kita telah melihat mereka setakat perlu secara fizikal diserahkan

197
00:11:20,440 --> 00:11:23,170
dengan memukul Masukkan sekurang-kurangnya atau klik butang?

198
00:11:23,170 --> 00:11:26,830
Seperti yang anda lihat mereka setakat ini, anda sebenarnya perlu klik Submit untuk melakukan perkara-perkara.

199
00:11:26,830 --> 00:11:30,090
>> Tetapi sebagai Tommy akan menunjukkan kepada anda di tempat kedua, sebenarnya ada cara untuk anda

200
00:11:30,090 --> 00:11:33,010
bahawa apabila anda klik pada perkara yang ia secara automatik boleh menghantar

201
00:11:33,010 --> 00:11:38,840
apa yang kita panggil permintaan AJAX dan mendapatkan data kembali dan menapis keputusan anda serta-merta.

202
00:11:38,840 --> 00:11:41,340
Terdapat tan perkara-perkara yang salah dengan antara muka ini.

203
00:11:41,340 --> 00:11:43,530
[Malan] Bolehkah anda mencari untuk Cambridge?

204
00:11:43,530 --> 00:11:47,030
Terdapat sesuatu yang sedikit ganjil di sini di mana anda mengambil berat tentang Cambridge

205
00:11:47,030 --> 00:11:54,790
dan lagi anda mendapat Westford, Spring Hill, West Newton dan sebagainya.

206
00:11:54,790 --> 00:11:57,930
Mungkin tidak sesuai. >> Mungkin tidak ideal.

207
00:11:57,930 --> 00:12:03,900
Bagaimana saya mungkin tidak dapat untuk membuat pengalaman pengguna yang lebih baik pada halaman ini tertentu?

208
00:12:03,900 --> 00:12:07,340
Ya. >> [Pelajar] Arahan.

209
00:12:07,340 --> 00:12:09,500
Okay. Arahan dalam apa jenis rasa?

210
00:12:09,500 --> 00:12:14,630
[Pelajar] Sebagai contoh, satu perkara untuk pengguna kali pertama yang tidak tahu apa yang Craigslist adalah

211
00:12:14,630 --> 00:12:17,320
atau anda tidak tahu apa yang anda sepatutnya lakukan.

212
00:12:17,320 --> 00:12:20,150
Betul. Jadi menjelaskan apa yang Craigslist adalah pada halaman ini adalah penting.

213
00:12:20,150 --> 00:12:23,490
Kita sebenarnya boleh memberitahu pengguna apa halaman ini sebenarnya adalah untuk.

214
00:12:23,490 --> 00:12:27,090
Jika saya hanya melawat ini, saya melihat sekumpulan keseluruhan lokasi. Saya tidak tahu apa yang mereka maksudkan.

215
00:12:27,090 --> 00:12:29,730
Tetapi yang lebih penting, hanya melihat muka ini,

216
00:12:29,730 --> 00:12:35,530
ingat saya terpaksa tatal ke bawah tan perkara untuk mencari komuniti tertentu

217
00:12:35,530 --> 00:12:37,560
bahawa saya sebenarnya mengambil berat mengenai mengenai perkara ini.

218
00:12:37,560 --> 00:12:39,820
Apa cara yang lebih cepat saya boleh melakukannya? Ya.

219
00:12:39,820 --> 00:12:43,290
[Pelajar] Bahagikan mereka sehingga ke timur, barat wilayah. >> Okay.

220
00:12:43,290 --> 00:12:47,460
Saya boleh membahagikan mereka ke dalam kategori yang lebih yang boleh membantu saya lebih cepat menentukan

221
00:12:47,460 --> 00:12:49,820
bagaimana untuk sampai ke lokasi yang tertentu.

222
00:12:49,820 --> 00:12:54,510
[Pelajar] Letakkan senarai drop-down. >> Hak. Okay.

223
00:12:54,510 --> 00:12:58,240
Saya boleh menggunakan menu drop-down kerana kita mempunyai satu set tetap perkara

224
00:12:58,240 --> 00:13:00,100
dan kita boleh menunjukkan kepada mereka dalam menu drop-down.

225
00:13:00,100 --> 00:13:02,240
Dengan cara itu ia tidak mengambil ruang yang begitu banyak pada skrin.

226
00:13:02,240 --> 00:13:05,630
Tetapi lebih baik daripada itu, apa yang boleh kita lakukan?

227
00:13:05,630 --> 00:13:09,220
Ya. >> [Sambutan pelajar didengar] >> Bolehkah anda mengatakan bahawa lagi? >> [Pelajar] kotak Cari.

228
00:13:09,220 --> 00:13:11,260
Ya, kotak carian. Itu yang besar.

229
00:13:11,260 --> 00:13:16,430
Apa yang kita sebenarnya boleh lakukan ialah jika kita melihat kembali pada slaid, kotak carian.

230
00:13:16,430 --> 00:13:21,520
Autocomplete. Cara yang amat mudah untuk mencari melalui keputusan yang anda tahu dalam satu set.

231
00:13:21,520 --> 00:13:25,980
Jika saya mula menaip BO, hanya menunjukkan kepada saya semua keputusan yang mempunyai BO dalam mereka.

232
00:13:25,980 --> 00:13:29,030
Itu cara saya sangat mudah boleh mencari satu tertentu saya mahu pergi ke

233
00:13:29,030 --> 00:13:32,390
bukannya perlu untuk menatal melalui senarai ini benar-benar besar.

234
00:13:32,390 --> 00:13:37,450
>> Ini semua adalah pelbagai benar-benar buah-buahan rendah tergantung bahawa seseorang yang sedang melaksanakan Craigslist

235
00:13:37,450 --> 00:13:42,500
sebenarnya boleh lakukan untuk membuat pengalaman di laman web banyak yang lebih baik untuk pengguna tertentu mereka.

236
00:13:42,500 --> 00:13:46,370
Okay. Cukuplah bercakap tentang laman web yang buruk.

237
00:13:46,370 --> 00:13:49,410
Mari kita bercakap tentang Facebook.

238
00:13:50,880 --> 00:13:54,390
Apabila Facebook keluar, dan terutamanya Facebook gambar,

239
00:13:54,390 --> 00:13:57,870
terdapat banyak perkhidmatan lain pada masa yang boleh melakukan perkara yang sama.

240
00:13:57,870 --> 00:14:00,740
Mereka boleh mengatur gambar-gambar anda ke dalam album.

241
00:14:00,740 --> 00:14:03,360
Apa yang anda boleh lakukan ialah anda boleh menganjurkan mereka ke dalam set juga.

242
00:14:03,360 --> 00:14:06,070
Anda boleh menganjurkan mereka mengikut tarikh. Anda boleh melakukan semua perkara-perkara tertentu.

243
00:14:06,070 --> 00:14:11,710
Tetapi adakah sesiapa yang tahu apa yang dibuat Facebook gambar meletup pada masa ia dikeluarkan?

244
00:14:11,710 --> 00:14:15,080
Ya. >> [Pelajar] Tags. >> Tags Tepat sekali.

245
00:14:15,080 --> 00:14:21,300
Kami mempunyai Milo di sini, yang merupakan maskot anjing kami dengan bandana CS50 itu.

246
00:14:21,300 --> 00:14:24,810
Anda boleh melihat bahawa kita mempunyai ciri ini tagging di tengah-tengah.

247
00:14:24,810 --> 00:14:28,240
Dan apa yang dibuat gambar Facebook yang begitu menarik dari sudut pandangan kebolehgunaan

248
00:14:28,240 --> 00:14:34,130
adalah bahawa ia sebenarnya membolehkan orang melalui ini untuk melibatkan rakan-rakan mereka dalam gambar mereka.

249
00:14:34,130 --> 00:14:37,680
Untuk Facebook, sejak laman web mereka amat sosial,

250
00:14:37,680 --> 00:14:40,750
ia adalah tentang membina ini jenis suasana sosial.

251
00:14:40,750 --> 00:14:42,620
Itu meningkatkan pengalaman gambar lebih banyak

252
00:14:42,620 --> 00:14:46,390
kerana mereka sebenarnya boleh mula berkata, "Ini adalah hubungan antara rakyat,

253
00:14:46,390 --> 00:14:49,220
dan ini adalah gambar tentang orang yang anda benar-benar mengambil berat tentang. "

254
00:14:49,220 --> 00:14:52,200
Sebahagian daripada ia adalah juga jenis narsisisme.

255
00:14:52,200 --> 00:14:54,980
Orang-orang seperti untuk ditag dalam gambar dan perkara-perkara seperti itu.

256
00:14:54,980 --> 00:14:58,510
Walaupun itu tidak semestinya sifat manusia yang baik,

257
00:14:58,510 --> 00:15:01,910
pada masa yang sama ia berdasarkan keputusan reka bentuk yang baik

258
00:15:01,910 --> 00:15:04,860
kerana orang yang benar-benar mengambil berat tentang perkara-perkara seperti ini.

259
00:15:04,860 --> 00:15:07,190
Jadi itulah gambar Facebook.

260
00:15:07,190 --> 00:15:09,800
>> Tetapi mari kita bercakap Facebook lebih amnya.

261
00:15:09,800 --> 00:15:13,400
Saya pasti banyak orang di sini mempunyai pendapat tentang Facebook,

262
00:15:13,400 --> 00:15:16,430
kedua-dua reka bentuk keputusan yang baik dan keputusan reka bentuk yang buruk.

263
00:15:16,430 --> 00:15:20,270
Jadi mari kita meluahkan atau gembira.

264
00:15:23,480 --> 00:15:26,450
Datang pada. Saya tahu anda semua menggunakan Facebook.

265
00:15:26,450 --> 00:15:30,970
Seseorang perlu mempunyai sesuatu yang buruk untuk mengatakan atau sesuatu yang baik untuk mengatakan mengenainya. Ya.

266
00:15:30,970 --> 00:15:35,060
[Pelajar] Dalam berita ada banyak perkara yang saya tidak benar-benar mengambil berat tentang.

267
00:15:35,060 --> 00:15:37,740
Berita tidak menunjukkan banyak perkara yang anda mungkin tidak mengambil berat tentang.

268
00:15:37,740 --> 00:15:41,660
Anda mempunyai rakan-rakan di Facebook yang anda telah tidak dipenuhi selama 2 atau 3 tahun

269
00:15:41,660 --> 00:15:43,860
dan anda melihat keputusan berita mereka muncul dalam berita anda

270
00:15:43,860 --> 00:15:45,870
dan anda tidak benar-benar mengambil berat tentang ia.

271
00:15:45,870 --> 00:15:48,700
Facebook sebenarnya telah membuat satu usaha untuk membuat ini lebih baik,

272
00:15:48,700 --> 00:15:53,150
dan mereka telah benar-benar cuba untuk menolak keputusan yang berkaitan ke atas berita sebagai akhir-akhir ini

273
00:15:53,150 --> 00:15:58,300
jadi anda sebenarnya melihat perkara-perkara oleh rakan-rakan yang relevan kepada anda atau rakan-rakan rapat anda.

274
00:15:58,300 --> 00:16:01,110
Apa-apa lagi? Ya.

275
00:16:01,110 --> 00:16:06,400
[Respons pelajar didengar] >> Bolehkah anda mengatakan bahawa lagi?

276
00:16:06,400 --> 00:16:10,140
[Pelajar] iklan agak tidak mengganggu. >> Dalam apa rasa?

277
00:16:10,140 --> 00:16:16,370
[Pelajar tindak balas didengar] Mereka tidak mempunyai cahaya pada skrin, seperti sepanduk.

278
00:16:16,370 --> 00:16:17,760
Okay. Itulah baik.

279
00:16:17,760 --> 00:16:25,030
Jika anda ingat internet dari 90-an - >> [Malan] saya berada di sana. >> Beliau berada di sana. [Ketawa]

280
00:16:25,030 --> 00:16:29,210
Anda mungkin ingat berkelip GIF latar belakang, sparkly perkara,

281
00:16:29,210 --> 00:16:31,570
GeoCities gaya jenis perkara.

282
00:16:31,570 --> 00:16:34,080
Itu benar-benar tidak satu contoh reka bentuk yang baik

283
00:16:34,080 --> 00:16:36,690
kerana ia benar-benar mengganggu dari kandungan.

284
00:16:36,690 --> 00:16:39,590
Laman web Yale seni yang digunakan untuk mempunyai animasi GIF sebagai latar belakang mereka

285
00:16:39,590 --> 00:16:41,800
dan anda tidak boleh membaca apa-apa pada halaman,

286
00:16:41,800 --> 00:16:44,870
tetapi saya rasa seseorang sebenarnya bercakap kepada mereka dan kini ia sedikit berbeza.

287
00:16:44,870 --> 00:16:48,940
[Malan] Ia adalah lebih baik sekarang. >> Ia adalah lebih baik sekarang, seperti yang anda boleh lihat. >> [Malan] Oh yeah.

288
00:16:48,940 --> 00:16:56,020
Just great, hanya - Yeah. Okay.

289
00:16:56,020 --> 00:17:00,560
>> Sebahagian daripada ia juga membuat halaman anda mungkin sangat minimalis dan sangat difahami

290
00:17:00,560 --> 00:17:05,690
supaya perkara mengenai aliran halaman dalam cara yang sangat logik dan tidak mendapat dalam cara yang di antara satu sama lain.

291
00:17:05,690 --> 00:17:11,849
Macam Apa perkara-perkara lain yang baik mengenai Facebook atau buruk tentang Facebook?

292
00:17:11,849 --> 00:17:15,730
Mari kita hanya mempunyai perbualan reka bentuk di sini.

293
00:17:19,470 --> 00:17:21,339
Oh. Di mana? Yeah.

294
00:17:21,339 --> 00:17:25,640
[Pelajar] Sistem Timeline baru membolehkan anda untuk mencari profil orang tentang masa lalu mereka.

295
00:17:25,640 --> 00:17:28,119
Ooh, Timeline.

296
00:17:28,119 --> 00:17:30,280
Timeline adalah satu perkara yang besar kerana ia membolehkan anda tangkai kawan anda

297
00:17:30,280 --> 00:17:33,300
kembali apabila mereka berada di sekolah tinggi.

298
00:17:35,160 --> 00:17:38,060
Timeline adalah baik kerana ia membolehkan anda menapis kandungan banyak yang lebih cepat,

299
00:17:38,060 --> 00:17:41,500
ia membolehkan anda mencari perkara-perkara yang akan selainnya diambil anda masa yang benar-benar panjang untuk mencari

300
00:17:41,500 --> 00:17:45,840
hanya menatal ke bawah, up, up, up, up, up, seperti akan kembali dalam masa.

301
00:17:45,840 --> 00:17:48,910
Tetapi kemudian ada juga jenis Kelemahan dari segi pengalaman pengguna.

302
00:17:48,910 --> 00:17:51,190
Apa yang mungkin?

303
00:17:51,190 --> 00:17:56,780
Perkataan besar yang bermula dengan P-R. >> [Pelajar] Privasi. >> Privasi, betul-betul?

304
00:17:56,780 --> 00:17:59,970
Privasi adalah isu pengalaman pengguna yang besar.

305
00:17:59,970 --> 00:18:07,190
Ini adalah salah satu perkara yang saya tidak suka yang paling mengenai Facebook kini. [Ketawa]

306
00:18:07,190 --> 00:18:09,000
[Malan] Sebagaimana saya sekarang.

307
00:18:09,000 --> 00:18:11,380
Daud tidak menyedari ini sebenarnya berlaku sehingga semalam.

308
00:18:11,380 --> 00:18:14,560
Jadi sekarang dia tahu bahawa setiap kali saya berbual dia, saya tahu dia telah mengabaikan saya.

309
00:18:14,560 --> 00:18:16,880
[Malan] Bahagian janggal saya sebenarnya mengabaikan dia,

310
00:18:16,880 --> 00:18:21,040
dan saya tidak tahu dia tahu saya telah mengabaikan dia. [Ketawa]

311
00:18:21,040 --> 00:18:24,030
Privasi adalah isu yang besar.

312
00:18:24,030 --> 00:18:28,670
Sesiapa di sini boleh beritahu saya apa yang mungkin buruk tentang Facebook privasi

313
00:18:28,670 --> 00:18:32,270
selain hakikat bahawa mereka melakukan perkara-perkara seperti ini?

314
00:18:32,270 --> 00:18:37,240
Apakah ia amat sukar untuk dilakukan dengan hormat ke Facebook privasi?

315
00:18:37,240 --> 00:18:40,340
Bahawa jenis adalah soalan memimpin.

316
00:18:41,680 --> 00:18:43,930
Ya. >> [Pelajar] Sembunyikan gambar anda dari orang-orang tertentu.

317
00:18:43,930 --> 00:18:46,170
Betul. Tepat sekali, untuk menyembunyikan gambar anda dari orang-orang tertentu.

318
00:18:46,170 --> 00:18:51,290
Mereka mempunyai kecil ini, butang kecil di bahagian atas kanan yang membolehkan anda bertukar-tukar privasi foto.

319
00:18:51,290 --> 00:18:56,360
Pilihan privasi mereka sangat berbeza di antara pelbagai jenis menu.

320
00:18:56,360 --> 00:18:59,510
>> Mereka telah mendapat banyak lebih baik tentang perkara ini baru-baru ini, tetapi ia digunakan untuk menjadi kes

321
00:18:59,510 --> 00:19:04,870
bahawa apabila anda mahu untuk mencegah rakan-rakan anda dari melihat gambar,

322
00:19:04,870 --> 00:19:08,280
anda akan perlu untuk pergi melalui satu proses yang sangat rumit 5-langkah menjadi seperti,

323
00:19:08,280 --> 00:19:11,150
biarlah saya klik link ini, sekarang mari saya klik lagi, mari saya klik lagi,

324
00:19:11,150 --> 00:19:13,420
izinkan saya menyatakan yang orang tidak boleh melihat gambar saya.

325
00:19:13,420 --> 00:19:17,250
Yang tidak baik terutamanya pada bahagian Facebook

326
00:19:17,250 --> 00:19:20,530
kerana begitu banyak mengenai pengalaman pengguna sebenarnya memberikan mereka kebebasan

327
00:19:20,530 --> 00:19:22,460
untuk mengawal apa yang orang boleh melihat.

328
00:19:22,460 --> 00:19:25,550
Kami panggil ini kawalan pengguna dan kebebasan.

329
00:19:25,550 --> 00:19:31,090
Jika anda tidak membiarkan pengguna anda berbuat demikian dalam cara yang cekap dan intuitif,

330
00:19:31,090 --> 00:19:34,570
maka pengalaman pengguna anda tidak benar-benar yang besar pada semua.

331
00:19:34,570 --> 00:19:38,200
 Adakah anda semua suka untuk mengatakan apa-apa mengenai Facebook?

332
00:19:38,700 --> 00:19:41,420
Bagaimana saya mematikan ini?

333
00:19:41,420 --> 00:19:46,290
[Ong] Anda tidak boleh mematikan ini, dan itu adalah suatu kesilapan kebolehgunaan besar pada bahagian Facebook.

334
00:19:46,290 --> 00:19:49,410
Ini ciri - Saya sebenarnya melihat ke dalamnya semalam -

335
00:19:49,410 --> 00:19:53,940
ia adalah sama ada bahawa anda tidak boleh melakukannya atau ia dikebumikan tempat sangat, sangat jauh

336
00:19:53,940 --> 00:19:58,050
di ceruk Facebook kerana saya tidak dapat memikirkan bagaimana untuk mematikan fungsi ini pada semua.

337
00:19:58,050 --> 00:20:00,400
[Malan] Tetapi kadang-kadang keputusan ini tidak jelas

338
00:20:00,400 --> 00:20:03,890
kerana anda semua telah memberikan kita banyak maklum balas yang berguna pada aplikasi pelbagai CS50

339
00:20:03,890 --> 00:20:05,710
dan laman web yang menggunakan kursus.

340
00:20:05,710 --> 00:20:10,260
Kami telah tidak dilaksanakan semua permintaan dan cadangan ini.

341
00:20:10,260 --> 00:20:14,550
>> Sebahagian daripada itu adalah untuk mendapatkan permintaan begitu banyak bahawa ia adalah satu fungsi masa,

342
00:20:14,550 --> 00:20:17,070
tetapi kadang-kadang kita hanya membuat keputusan yang sedar seperti,

343
00:20:17,070 --> 00:20:19,830
"Terima kasih kerana cadangan itu, tetapi kita tidak bersetuju."

344
00:20:19,830 --> 00:20:24,350
Jadi bagaimana anda sebenarnya membuat keputusan apa yang anda perlu lakukan jika pengguna anda fikir anda perlu melakukan sesuatu

345
00:20:24,350 --> 00:20:28,110
walaupun anda tidak semestinya?

346
00:20:28,110 --> 00:20:32,360
Ia adalah satu keseimbangan antara benar-benar mendengar apa yang pengguna anda mengatakan

347
00:20:32,360 --> 00:20:35,840
dan sebenarnya mempunyai beberapa jenis baris di mana anda berkata,

348
00:20:35,840 --> 00:20:37,750
"Kami tidak akan melakukan apa-pengguna berkata."

349
00:20:37,750 --> 00:20:42,520
Dan khususnya, saya fikir ada sebut oleh Henry Ford yang merumuskan ini cukup baik.

350
00:20:42,520 --> 00:20:47,130
"Jika saya telah meminta orang ramai apa yang mereka mahu, mereka akan berkata mereka mahu lebih cepat kuda."

351
00:20:47,130 --> 00:20:51,840
Sesiapa sahaja boleh menyelesaikan mengusik selain apa yang quote itu benar-benar bermakna?

352
00:20:51,840 --> 00:20:56,060
Ia bukan hanya yang pengguna tahu apa yang mereka mahu,

353
00:20:56,060 --> 00:20:59,180
tetapi ia lebih -

354
00:20:59,180 --> 00:21:02,720
[Pelajar] Mereka tidak tahu apa yang mungkin.

355
00:21:02,720 --> 00:21:06,140
Dalam bahagian mereka tidak tahu apa yang mungkin.

356
00:21:07,880 --> 00:21:11,440
Mengusik bahawa selain lebih sedikit. Apa yang kamu maksudkan dengan itu?

357
00:21:11,440 --> 00:21:21,340
[Sambutan pelajar didengar]

358
00:21:21,340 --> 00:21:25,770
Itulah baik. Apa yang saya fikir kita sedang cuba untuk mengatakan di sini adalah bahawa orang-orang tahu apa yang mereka mahu.

359
00:21:25,770 --> 00:21:28,050
Mereka mahu lebih cepat kuda.

360
00:21:28,050 --> 00:21:29,840
Apa yang mereka benar-benar mahu adalah keupayaan untuk bergerak lebih pantas,

361
00:21:29,840 --> 00:21:32,310
tetapi mereka tidak benar-benar tahu medium yang digunakan untuk mencapai itu.

362
00:21:32,310 --> 00:21:36,330
Apabila anda datang ke pengguna anda dan pengguna anda memberitahu anda sesuatu

363
00:21:36,330 --> 00:21:39,700
dan mereka memberitahu anda, "Kami mahu ciri-ciri dan ciri-ciri dan ciri-ciri ini,"

364
00:21:39,700 --> 00:21:42,650
anda tidak mahu semestinya berfikir tentang, "Biar saya pergi ke hadapan

365
00:21:42,650 --> 00:21:44,720
"Dan melaksanakan apa yang mereka tegas mengatakan,"

366
00:21:44,720 --> 00:21:48,610
tetapi apa yang anda mahu untuk berfikir tentang adalah, "Apakah jenis idea saya boleh mendapatkan daripada itu?"

367
00:21:48,610 --> 00:21:50,450
Apa yang mereka benar-benar mahu?

368
00:21:50,450 --> 00:21:55,560
>> Dan dari sana apa yang anda boleh lakukan ialah reka bentuk sesuatu yang memenuhi permintaan mereka

369
00:21:55,560 --> 00:22:00,340
tetapi tidak semestinya dalam cara yang pengguna menjangka ia akan berpuas hati.

370
00:22:00,340 --> 00:22:03,830
Jadi untuk sesuatu seperti projek akhir, dari segi yang amat nyata,

371
00:22:03,830 --> 00:22:07,900
apa heuristik berguna apabila ia datang untuk membuat sesuatu yang lebih baik,

372
00:22:07,900 --> 00:22:10,630
terutama jika pereka bentuk mempunyai keangkuhan ini tentang dia

373
00:22:10,630 --> 00:22:14,360
di mana anda jenis tahu apa yang terbaik, anda mungkin mengambil input dari pengguna anda,

374
00:22:14,360 --> 00:22:16,580
tetapi bagaimana anda sebenarnya pergi tentang mendapatkan maklum balas yang?

375
00:22:16,580 --> 00:22:21,610
Dalam projek-projek akhir, sangat kukuh, apa yang menghasilkan hasil yang optimum di sini?

376
00:22:21,610 --> 00:22:25,030
Apa yang menghasilkan hasil yang optimum - dan saya akan pergi lebih ini dalam kedua -

377
00:22:25,030 --> 00:22:29,190
adalah proses membangun dan kemudian menguji dan kemudian iterating.

378
00:22:29,190 --> 00:22:32,020
Apa yang saya maksudkan dengan ujian biasanya apabila anda reka bentuk sesuatu

379
00:22:32,020 --> 00:22:36,970
anda fikir ia adalah agak baik, seperti, "Saya seperti seorang pereka yang hebat. Semua orang akan menyukai ini."

380
00:22:36,970 --> 00:22:41,600
Dan kemudian anda meletakkan ia di luar sana dan orang tidak benar-benar suka untuk sebab-sebab tertentu.

381
00:22:41,600 --> 00:22:46,820
Apa yang anda perlu lakukan adalah anda perlu mengambil bahagian perkara-perkara yang orang lakukan seperti

382
00:22:46,820 --> 00:22:49,180
dan merombak perkara yang orang tidak suka.

383
00:22:49,180 --> 00:22:53,080
Ia berbunyi seperti satu proses yang sangat jelas, tetapi proses ini sentiasa iterating

384
00:22:53,080 --> 00:22:55,980
di atas apa yang anda telah dibina adalah satu proses yang membantu anda

385
00:22:55,980 --> 00:22:59,730
bukan sahaja menghalusi kemahiran reka bentuk anda sendiri tetapi juga membantu anda memperbaiki reka bentuk

386
00:22:59,730 --> 00:23:03,790
supaya orang sebenarnya menghargai produk anda lebih daripada yang mereka lakukan sebelum ini.

387
00:23:03,790 --> 00:23:07,390
>> Saya akan pergi ke atas contoh-contoh konkrit yang lebih daripada apa yang anda sebenarnya mungkin melakukan.

388
00:23:07,390 --> 00:23:11,390
Sebagai jenis contoh terakhir produk, marilah kita melihat KAYAK.

389
00:23:11,390 --> 00:23:14,970
KAYAK apabila ia keluar adalah sangat, sangat popular.

390
00:23:14,970 --> 00:23:18,760
Sesiapa sahaja boleh meneka mengapa?

391
00:23:18,760 --> 00:23:20,950
Apakah jenis perkara yang anda suka tentang ini jika anda telah menggunakan

392
00:23:20,950 --> 00:23:23,990
atau apakah pelbagai perkara yang anda tidak suka?

393
00:23:23,990 --> 00:23:31,590
Ya. >> [Sambutan pelajar didengar] >> Okay.

394
00:23:31,590 --> 00:23:34,730
Itulah sebahagian daripada ia membiarkan pengguna mempunyai pertanyaan yang lebih luas

395
00:23:34,730 --> 00:23:38,150
daripada satu yang sangat terhad seperti, "Anda perlu memilih tarikh mula anda

396
00:23:38,150 --> 00:23:39,810
"Dan anda perlu untuk memilih tarikh akhir anda."

397
00:23:39,810 --> 00:23:44,910
Malah, ia membolehkan anda menjadi fleksibel mengenainya dan ia memberikan anda semua penerbangan dalam lingkungan itu.

398
00:23:44,910 --> 00:23:46,730
Apa-apa lagi?

399
00:23:46,730 --> 00:23:50,530
[Pelajar] Mereka termasuk yuran dalam harga.

400
00:23:50,530 --> 00:23:53,330
Mereka melakukan termasuk yuran dalam harga.

401
00:23:53,330 --> 00:23:56,720
Cukai dan perkara yang benar-benar pergi terus ke dalam harga yang di sebelah kiri atas

402
00:23:56,720 --> 00:24:00,710
supaya anda tidak ditipu berfikir bahawa anda sebenarnya membayar untuk penerbangan $ 240

403
00:24:00,710 --> 00:24:03,280
apabila ia benar-benar $ 330.

404
00:24:03,280 --> 00:24:06,200
Apa-apa lagi? Ya.

405
00:24:06,200 --> 00:24:10,140
[Sambutan pelajar didengar]

406
00:24:10,140 --> 00:24:14,610
Saya tidak pasti jika mereka benar-benar membolehkan anda berbuat demikian.

407
00:24:14,610 --> 00:24:18,310
Saya mungkin salah.

408
00:24:18,310 --> 00:24:23,360
Itu mungkin satu perkara yang menarik jika anda mahu meletakkan berat lanjut mengenai penapis tertentu

409
00:24:23,360 --> 00:24:27,000
supaya mereka menolak keputusan yang berkaitan dengan penapis yang ke atas.

410
00:24:27,000 --> 00:24:31,920
Tetapi sesiapa sahaja boleh beritahu saya apa yang begitu istimewa tentang sampingan ini kiri?

411
00:24:31,920 --> 00:24:39,540
Bagaimana kamu tradisinya mencari penerbangan pada perkhidmatan Internet sebelum ini?

412
00:24:41,600 --> 00:24:44,650
>> Ya. >> [Sambutan pelajar didengar] >> Bolehkah anda mengatakan bahawa -

413
00:24:44,650 --> 00:24:47,530
[Pelajar] Setiap syarikat penerbangan. >> Yeah. Setiap syarikat penerbangan mempunyai laman webnya sendiri.

414
00:24:47,530 --> 00:24:50,110
Ini mengukuhkan perkara. Dan?

415
00:24:50,110 --> 00:24:52,190
[Pelajar] Anda tahu apa yang masa anda meninggalkan.

416
00:24:52,190 --> 00:24:54,460
Anda tahu apa yang masa anda meninggalkan,

417
00:24:54,460 --> 00:24:59,380
tetapi berkaitan kepada penapis khususnya.

418
00:25:00,710 --> 00:25:03,540
Biar saya tarik sehingga KAYAK.

419
00:25:11,490 --> 00:25:14,020
Oh Tuhan, pop-up. Bad pengalaman pengguna.

420
00:25:14,020 --> 00:25:17,230
Apa yang berlaku apabila saya gerakkan slider ini?

421
00:25:17,230 --> 00:25:21,010
[Pelajar] Kemas kini automatik. >> [Ong] Kemas kini automatik.

422
00:25:21,010 --> 00:25:23,440
Itulah sesuatu yang sangat penting.

423
00:25:23,440 --> 00:25:25,380
Sebelum ini, apabila anda mahu untuk mencari penerbangan,

424
00:25:25,380 --> 00:25:28,410
anda terpaksa dimasukkan ke dalam lokasi input anda, lokasi output anda, tekan Search,

425
00:25:28,410 --> 00:25:31,190
ia akan memproses dan menunjukkan keputusan anda.

426
00:25:31,190 --> 00:25:34,120
Jika anda mahu menukar pertanyaan anda, anda akan perlu untuk menekan kembali dua kali,

427
00:25:34,120 --> 00:25:39,770
masukkan dalam pertanyaan yang baru dari awal, dan kemudian melakukannya berulang-ulang kali.

428
00:25:39,770 --> 00:25:43,910
Perkara yang baik tentang sesuatu seperti ini adalah ia menggunakan sangat perkara [difahami] di tengah-tengah.

429
00:25:43,910 --> 00:25:46,230
Apabila anda melakukan sesuatu seperti ini, ia pucuk dari permintaan

430
00:25:46,230 --> 00:25:48,420
dan ia kembali anda semua keputusan serta-merta.

431
00:25:48,420 --> 00:25:51,680
Ini jenis maklum balas segera adalah sesuatu yang dibuat KAYAK liar popular

432
00:25:51,680 --> 00:25:55,910
kerana ia adalah benar-benar mudah bagi saya untuk hanya menukar pertanyaan saya

433
00:25:55,910 --> 00:25:58,890
dan memikirkan perkara-perkara yang berada di sekeliling julat tertentu

434
00:25:58,890 --> 00:26:01,950
tanpa perlu pergi ke belakang dan sebagainya, belakang dan sebagainya, belakang dan sebagainya.

435
00:26:01,950 --> 00:26:05,200
Jadi ini adalah semua jenis perkara yang anda mahu berfikir tentang apabila anda mereka bentuk laman web anda.

436
00:26:05,200 --> 00:26:08,930
Bagaimana saya boleh membuat ia sangat berkesan untuk pengguna saya untuk pergi melalui apa yang mereka sedang bekerja di

437
00:26:08,930 --> 00:26:13,010
dan untuk sampai ke matlamat akhirnya mereka secepat mungkin?

438
00:26:13,010 --> 00:26:16,430
[Malan] Dan ke titik awal tentang pengguna tidak semestinya mengetahui apa yang mereka mahu Yusuf,

439
00:26:16,430 --> 00:26:18,640
berdasarkan apa yang anda semua kini tahu tentang HTML

440
00:26:18,640 --> 00:26:22,780
dan anda mempunyai kotak semak, butang radio, pilih menu, medan input dan sebagainya,

441
00:26:22,780 --> 00:26:26,140
bagaimana anda akan melaksanakan tanggapan memilih masa permulaan bagi penerbangan?

442
00:26:26,140 --> 00:26:30,030
>> Manakah orang-orang pelbagai mekanisme UI yang akan anda gunakan?

443
00:26:30,030 --> 00:26:34,100
Jika anda hanya tahu jumlah HTML yang telah diajar sebelum

444
00:26:34,100 --> 00:26:39,070
dan anda tahu input butang radio, kotak semak, drop-down, dan kotak input,

445
00:26:39,070 --> 00:26:43,320
apa yang akan pilihan semula jadi anda telah untuk memilih tarikh?

446
00:26:43,320 --> 00:26:48,670
[Pelajar] Input. Input. >> Atau bahkan drop-down dengan semua tarikh, betul-betul?

447
00:26:48,670 --> 00:26:53,170
Jadi dengan mekanisme UI yang lebih kompleks seperti ini pada sebelah kiri yang anda boleh melaksanakan,

448
00:26:53,170 --> 00:26:55,500
anda boleh membuat proses ini lebih intuitif dengan gelangsar

449
00:26:55,500 --> 00:27:01,020
kerana masa adalah berterusan, dan orang biasanya tidak berfikir ia dalam segi ketulan diskret.

450
00:27:01,020 --> 00:27:04,950
Semua hak. Perkara terakhir.

451
00:27:04,950 --> 00:27:07,370
Sepuluh heuristik kebolehgunaan.

452
00:27:07,370 --> 00:27:10,820
Semua perkara yang kita bercakap tentang mungkin jatuh di bawah salah satu kategori ini.

453
00:27:10,820 --> 00:27:14,420
Jika anda pergi ke link ini, yang laman web akan disiarkan dalam talian,

454
00:27:14,420 --> 00:27:18,900
anda sebenarnya akan dapat, kerana anda reka bentuk laman web anda, menyimpan heuristik ini dalam fikiran

455
00:27:18,900 --> 00:27:21,330
dan peraturan-peraturan ibu jari.

456
00:27:21,330 --> 00:27:26,610
Bagi projek-projek anda, apa yang saya cadangkan anda lakukan dalam usaha untuk mereka bentuk aplikasi anda lebih baik

457
00:27:26,610 --> 00:27:28,850
adalah untuk melakukan prototaip kertas pertama.

458
00:27:28,850 --> 00:27:32,150
Apabila anda berfikir tentang permohonan anda, sangat cepat lakarkan apa yang anda mahu ia kelihatan seperti

459
00:27:32,150 --> 00:27:36,230
dan pastikan semua kotak disusun dalam cara yang sangat intuitif bagi pengguna untuk menggunakan

460
00:27:36,230 --> 00:27:39,820
dan juga menunjukkan ini prototaip kertas kepada kawan-kawan anda dan mula kumpulan fokus.

461
00:27:39,820 --> 00:27:44,230
Hanya mendapat 2 atau 3 orang bersama-sama dan meminta mereka hanya ketuk atas prototaip kertas,

462
00:27:44,230 --> 00:27:47,650
dan menunjukkan mereka skrin baru untuk melihat jika mereka benar-benar memahami apa yang berlaku.

463
00:27:47,650 --> 00:27:50,680
>> Apa yang anda mahu lakukan adalah memberikan mereka tugas, motivasi tugas itu,

464
00:27:50,680 --> 00:27:53,270
dan hanya memberikan mereka app dan biarkan mereka menggunakannya.

465
00:27:53,270 --> 00:27:56,530
Tidak memberi mereka arahan lebih dari itu.

466
00:27:56,530 --> 00:28:00,920
Anda mahu sebenarnya membiarkan mereka berinteraksi dengan aplikasi anda dalam satu cara yang membolehkan anda melihat

467
00:28:00,920 --> 00:28:03,870
bagaimana mereka akan menggunakannya jika anda tidak berdiri di sebelah kepada mereka.

468
00:28:03,870 --> 00:28:05,250
Dan itulah yang sangat penting.

469
00:28:05,250 --> 00:28:08,780
Yang akan memberi anda banyak pandangan tentang orang mendapat sekitar perkara-perkara tertentu

470
00:28:08,780 --> 00:28:10,560
dalam cara yang saya tidak berniat mereka?

471
00:28:10,560 --> 00:28:14,680
Adakah mereka menggunakan mekanisme UI tertentu pada skrin

472
00:28:14,680 --> 00:28:17,490
dengan cara yang jenis hacky?

473
00:28:17,490 --> 00:28:22,020
Saya tidak berniat bagi mereka untuk melakukannya dengan cara itu.

474
00:28:22,020 --> 00:28:23,940
Dan sebaik sahaja anda selesai dengan itu, apa yang anda mahu lakukan?

475
00:28:23,940 --> 00:28:26,010
Batu reka bentuk anda, kan?

476
00:28:26,010 --> 00:28:29,600
Apa yang anda mahu lakukan adalah anda mahu untuk membangunkan dan kemudian melakukan proses itu lagi.

477
00:28:29,600 --> 00:28:32,110
Jadi menunjukkan ia kepada rakan-rakan apabila anda telah dibangunkan, menguji,

478
00:28:32,110 --> 00:28:36,630
membangun, menguji, membangun, menguji, melelar, atas dan ke atas dan ke hadapan.

479
00:28:36,630 --> 00:28:39,720
Reka bentuk adalah sangat proses lelaran dalam hal ini.

480
00:28:39,720 --> 00:28:43,280
Anda sebenarnya perlu untuk membina sesuatu dan kemudian menyedari perkara mengenai

481
00:28:43,280 --> 00:28:46,520
bahawa anda tidak menyedari sebelum dan kembali dan memperbaiki dari itu.

482
00:28:46,520 --> 00:28:50,890
Kini, sebagai sebahagian pembangunan, itulah yang Tommy akan menunjukkan kepada anda selepas rehat

483
00:28:50,890 --> 00:28:53,220
dan bagaimana anda mungkin tidak dapat untuk melaksanakan sesuatu seperti autolengkap

484
00:28:53,220 --> 00:28:56,610
dalam cara yang agak mudah.

485
00:28:57,440 --> 00:28:59,550
[Malan] Sebagai Tommy set up di sini, soalan kemudian.

486
00:28:59,550 --> 00:29:03,780
Banyak laman web yang terawal - dan apabila Yusuf berkata 1990-an gaya laman web,

487
00:29:03,780 --> 00:29:07,640
ia adalah pelaksanaan di mana jika anda mahu pilih masa mula dan masa akhir,

488
00:29:07,640 --> 00:29:10,380
terus-terang, kembali pada hari dan walaupun pada beberapa laman web hari ini,

489
00:29:10,380 --> 00:29:13,220
cara yang anda lakukan ini ialah anda memilih sejam dari drop-down,

490
00:29:13,220 --> 00:29:15,910
anda memilih minit dari drop-down, mungkin anda memilih AM, PM,

491
00:29:15,910 --> 00:29:17,440
dan kemudian anda lakukan bahawa 3 kali lebih.

492
00:29:17,440 --> 00:29:19,920
Dan sebagainya dengan 6 klik dan mungkin menatal beberapa

493
00:29:19,920 --> 00:29:24,000
pengguna anda sebenarnya boleh menyediakan beberapa jenis tarikh dan / atau pelbagai masa dalam erti kata ini.

494
00:29:24,000 --> 00:29:27,920
>> Jadi pasti suboptimal dan lagi setakat ini kita telah melihat tiada keupayaan ekspresif

495
00:29:27,920 --> 00:29:30,330
dalam mana-mana bahasa kita telah melihat untuk melakukan sesuatu seksi

496
00:29:30,330 --> 00:29:32,620
seperti gelangsar ini masa mula dan masa akhir.

497
00:29:32,620 --> 00:29:36,290
Tetapi jika anda berfikir kembali ke 0 minggu apabila kita bercakap tentang Gores,

498
00:29:36,290 --> 00:29:39,080
sana juga tidak ada widget yang hanya melakukan perkara-perkara tertentu.

499
00:29:39,080 --> 00:29:42,700
Anda benar-benar hanya mempunyai asas seperti gelung dan syarat dan sebagainya.

500
00:29:42,700 --> 00:29:46,910
Jadi jenis hanya memikirkan sangat abstrak kini, bebas daripada butir-butir HTML,

501
00:29:46,910 --> 00:29:51,260
apa yang benar-benar berlaku dengan sesuatu seperti ini masa mula dan akhir masa gelangsar?

502
00:29:51,260 --> 00:29:54,960
Apabila saya menggerakkan tetikus saya dan saya klik pada simbol lobak merah yang sedikit di sebelah kiri

503
00:29:54,960 --> 00:29:59,220
dan mula mengheret, programatik, apa yang anda mahu menjadi mampu untuk melaksanakan

504
00:29:59,220 --> 00:30:01,000
untuk membuat yang berlaku?

505
00:30:01,000 --> 00:30:04,920
Apa soalan, apa ungkapan Boolean yang anda mahu menjadi mampu untuk bertanya?

506
00:30:04,920 --> 00:30:06,930
Apa yang benar-benar berlaku? Sammy?

507
00:30:06,930 --> 00:30:10,080
[Pelajar] Di mana kedudukan kursor? Baik >>. Di manakah kedudukan kursor?

508
00:30:10,080 --> 00:30:11,970
Ini adalah sesuatu yang kita perlu untuk meluahkan kembali dalam Gores,

509
00:30:11,970 --> 00:30:14,690
sama ada ia berdasarkan lokasi atau bahkan warna atau sebagainya.

510
00:30:14,690 --> 00:30:18,410
Anda mungkin ingat pernah jadi secara ringkas pada hari Isnin terdapat semua perkara-perkara ini dipanggil acara

511
00:30:18,410 --> 00:30:22,370
dalam dunia web, dan sebagainya ada perkara seperti onclick dan onkeypress

512
00:30:22,370 --> 00:30:25,960
dan onkeyup dan onmouseover dan onmouseout.

513
00:30:25,960 --> 00:30:29,130
Jadi sedar bahawa walaupun ini perkara yang telah kami ambil untuk diberikan di Web

514
00:30:29,130 --> 00:30:32,190
dengan laman seperti Facebook dan Gmail, walaupun anda tidak mempunyai idea

515
00:30:32,190 --> 00:30:34,890
bagaimana anda mungkin akan melaksanakan bahawa kerana tiada apa-apa walaupun seperti ia dalam syarahan

516
00:30:34,890 --> 00:30:38,570
atau Set Masalah 7, menyedari bahawa dengan asas-asas yang sama,

517
00:30:38,570 --> 00:30:41,090
dengan HTTP dan parameter dan GET dan POST,

518
00:30:41,090 --> 00:30:44,010
dengan input asas HTML yang kita telah melihat setakat ini

519
00:30:44,010 --> 00:30:47,690
dan dalam masa dengan mekanisme perancangan yang Tommy tentang untuk memperkenalkan

520
00:30:47,690 --> 00:30:51,300
anda boleh mula untuk meluahkan diri anda sama seperti yang anda lakukan di titik 0 minggu

521
00:30:51,300 --> 00:30:53,800
oleh sangat intuitif mengheret dan menjatuhkan.

522
00:30:53,800 --> 00:30:58,950
>> Jadi dengan itu berkata, Tommy MacWilliam dan beberapa keping teka-teki baru bagi kami untuk Web.

523
00:30:58,950 --> 00:31:03,450
Semua hak. Nama saya ialah Tommy dan saya akan bercakap tentang JavaScript.

524
00:31:03,450 --> 00:31:07,150
Hanya penafian: Saya berpendapat bahawa JavaScript adalah bahasa pengaturcaraan yang terbaik

525
00:31:07,150 --> 00:31:09,010
di seluruh dunia keseluruhan.

526
00:31:09,010 --> 00:31:11,940
Terdapat banyak orang yang tidak bersetuju dengan saya, tetapi ia hanya menakjubkan.

527
00:31:11,940 --> 00:31:16,330
Sebaik sahaja anda pergi kembali kepada C, jika anda mempunyai untuk menulis C untuk kelas lain atau beberapa bahasa lain,

528
00:31:16,330 --> 00:31:19,780
ia hanya benar-benar mengecewakan dalam semua butiran tahap rendah anda mempunyai untuk menjadi buntu.

529
00:31:19,780 --> 00:31:23,050
Jadi, jika anda pernah berasa sedih tentang bagaimana menjengkelkan C adalah untuk menulis,

530
00:31:23,050 --> 00:31:25,130
hanya pergi kembali, menulis beberapa JavaScript. Ia adalah nirwana.

531
00:31:25,130 --> 00:31:27,980
Anda akan berasa lebih baik tentang hari buruk anda.

532
00:31:27,980 --> 00:31:31,900
Banyak keajaiban JavaScript datang daripada keupayaan untuk memanipulasi perkara

533
00:31:31,900 --> 00:31:33,730
yang sudah pada halaman.

534
00:31:33,730 --> 00:31:38,520
Apabila kita menulis skrip PHP kami, mereka telah dilaksanakan pada pelayan,

535
00:31:38,520 --> 00:31:42,270
dan akhirnya bahawa PHP skrip mungkin output HTML beberapa.

536
00:31:42,270 --> 00:31:45,860
Itu HTML telah dihantar kepada pelanggan, dan kemudian itu adalah ia.

537
00:31:45,860 --> 00:31:50,180
Jika PHP mahu menambah butang ke halaman, sebagai contoh, ia boleh tidak benar-benar berbuat demikian.

538
00:31:50,180 --> 00:31:54,350
Ia akan menyebabkan keseluruhan fail HTML baru dan menghantar bahawa untuk pelayar.

539
00:31:54,350 --> 00:31:57,840
Dengan JavaScript yang kita tahu bahawa kita boleh mengemas kini perkara manakala mereka sudah berada pada halaman,

540
00:31:57,840 --> 00:32:00,840
dan kerana ini kita boleh memberikan maklum balas yang lebih segera,

541
00:32:00,840 --> 00:32:06,150
yang benar-benar akan meningkatkan pengalaman pengguna di laman web kami.

542
00:32:06,150 --> 00:32:09,330
Just a recap cepat selectors JavaScript.

543
00:32:09,330 --> 00:32:11,590
Kita tahu bahawa apabila kita memuat turun halaman HTML,

544
00:32:11,590 --> 00:32:13,890
yang akan diwakili dalam DOM.

545
00:32:13,890 --> 00:32:19,340
>> DOM ingat hanya pokok ini besar mana elemen berkaitan dalam hierarki ini besar.

546
00:32:19,340 --> 00:32:21,810
Apabila kita bekerja dengan pangkalan data dalam pset 7,

547
00:32:21,810 --> 00:32:26,280
salah satu perkara pertama yang kita perlu tahu bagaimana untuk melakukannya query pangkalan data.

548
00:32:26,280 --> 00:32:29,060
Kami mempunyai jadual ini pengguna yang besar, dan kadang-kadang kita hanya mahu mengatakan,

549
00:32:29,060 --> 00:32:33,260
"Saya hanya mahu beberapa pengguna yang sepadan dengan keadaan beberapa."

550
00:32:33,260 --> 00:32:36,020
Begitu juga, apabila kita mempunyai DOM kita memerlukan beberapa cara menyoal ia.

551
00:32:36,020 --> 00:32:39,490
Kami memerlukan beberapa cara untuk mengatakan, "Saya mahu semua butang yang kelihatan seperti ini

552
00:32:39,490 --> 00:32:41,860
"Atau semua imej pada halaman."

553
00:32:41,860 --> 00:32:44,330
Dan ini selectors membolehkan kita berbuat demikian.

554
00:32:44,330 --> 00:32:45,690
Jadi hanya recap cepat.

555
00:32:45,690 --> 00:32:50,770
Ini yang pertama di sini, ini # mengemukakan, apakah yang akan pilih? Adakah sesiapa yang ingat?

556
00:32:50,770 --> 00:32:54,880
[Sambutan pelajar didengar] >> Yeah, tepat.

557
00:32:54,880 --> 00:32:59,510
Ini akan memilih elemen pada halaman yang mempunyai ID mengemukakan.

558
00:32:59,510 --> 00:33:03,470
Dan supaya tag hash kata pemilih ini akan bekerja dengan ID.

559
00:33:03,470 --> 00:33:07,630
Bagaimana kira-kira satu kedua, ini berpusatkan, apa yang akan pilih?

560
00:33:11,360 --> 00:33:15,180
Yeah. >> [Pelajar] Kelas. >> Tepat sekali. Ini kini akan pilih oleh kelas.

561
00:33:15,180 --> 00:33:18,840
Perbezaan antara ID dan kelas di sini adalah umumnya ID harus unik

562
00:33:18,840 --> 00:33:20,820
dalam apa-apa ruang anda mencari lebih.

563
00:33:20,820 --> 00:33:23,080
Jadi, jika anda mencari laman web keseluruhan,

564
00:33:23,080 --> 00:33:27,740
anda benar-benar hanya perlu mempunyai elemen 1 dengan ID yang tertentu, jadi dalam kes ini mengemukakan.

565
00:33:27,740 --> 00:33:31,330
Dengan kelas, di sisi lain, kita boleh mempunyai lebih daripada 1 elemen pada halaman yang sama

566
00:33:31,330 --> 00:33:33,130
dengan kelas yang sama.

567
00:33:33,130 --> 00:33:36,580
Ini mungkin berguna untuk mengatakan saya mahu untuk memilih semua itu berpusat pada halaman

568
00:33:36,580 --> 00:33:38,450
bukannya hanya 1 perkara.

569
00:33:38,450 --> 00:33:40,310
>> Dan akhirnya, satu ini terakhir di sini adalah sedikit lebih rumit,

570
00:33:40,310 --> 00:33:43,890
tetapi apa yang ini akan untuk memilih dari DOM?

571
00:33:46,650 --> 00:33:48,810
[Pelajar tindak balas didengar] >> Apa itu?

572
00:33:48,810 --> 00:33:53,250
[Pelajar] Apa sahaja yang tag. >> Kami mempunyai 2 bahagian di sini.

573
00:33:53,250 --> 00:33:58,070
Bahagian kedua akan mengatakan saya ingin pilih tag ini dengan tag input,

574
00:33:58,070 --> 00:34:00,730
supaya mana-mana elemen yang merupakan tag input.

575
00:34:00,730 --> 00:34:03,080
Tetapi saya tidak mahu untuk hanya pilih semua input

576
00:34:03,080 --> 00:34:05,170
kerana sesuatu seperti butang submit boleh menjadi input

577
00:34:05,170 --> 00:34:08,409
dan sesuatu seperti kotak teks boleh menjadi input.

578
00:34:08,409 --> 00:34:11,909
Jadi dengan kurungan persegi yang saya katakan saya hanya mahu untuk memilih unsur-unsur

579
00:34:11,909 --> 00:34:14,110
yang teks jenis.

580
00:34:14,110 --> 00:34:17,400
Tempat di dalam tag HTML saya, saya mempunyai sifat yang dipanggil jenis,

581
00:34:17,400 --> 00:34:19,750
dan nilai atribut yang mempunyai untuk menjadi teks.

582
00:34:19,750 --> 00:34:21,340
Jadi bagaimana pula bahagian pertama ini di sini?

583
00:34:21,340 --> 00:34:25,489
Perkataan pertama pemilih ini adalah bentuk maka saya mempunyai ruang dan kemudian bahagian ini input.

584
00:34:25,489 --> 00:34:29,620
Apakah yang dilakukan, meletakkan borang di hadapannya?

585
00:34:33,409 --> 00:34:35,860
Ini akan pada dasarnya menghadkan pertanyaan kami.

586
00:34:35,860 --> 00:34:38,510
Ia boleh menjadi kes bahawa kita mempunyai beberapa input pada halaman

587
00:34:38,510 --> 00:34:41,080
yang bukan keturunan borang.

588
00:34:41,080 --> 00:34:46,150
Apakah ini akan lakukan ini akan mengatakan saya hanya mahu tag input yang mempunyai tempat di atas mereka

589
00:34:46,150 --> 00:34:49,030
beberapa elemen induk borang.

590
00:34:49,030 --> 00:34:52,100
Dan sebagainya dengan cara ini kita boleh membuat pertanyaan lebih hierarki

591
00:34:52,100 --> 00:34:55,000
supaya kita tidak hanya perlu untuk memilih semua padanan pemilih yang diberikan.

592
00:34:55,000 --> 00:35:00,760
Kita boleh jenis had skop pertanyaan itu kepada sesuatu yang lain.

593
00:35:00,760 --> 00:35:04,000
Jadi sekarang kita tahu bagaimana untuk memilih unsur-unsur pada halaman,

594
00:35:04,000 --> 00:35:06,780
mari kita bercakap sedikit tentang AJAX.

595
00:35:06,780 --> 00:35:12,270
AJAX adalah singkatan masih sangat bergaya yang bermaksud JavaScript dan XML tak segerak.

596
00:35:12,270 --> 00:35:15,640
Ia hanya kebetulan bahawa XML adalah hanya beberapa cara untuk mewakili data.

597
00:35:15,640 --> 00:35:20,920
>> Itu jenis populariti yang hilang baru-baru ini, jadi X AJAX tidak digunakan sepanjang masa.

598
00:35:20,920 --> 00:35:26,220
Pada asasnya, apa yang AJAX membolehkan kita lakukan adalah membuat permintaan HTTP

599
00:35:26,220 --> 00:35:28,620
dari konteks JavaScript.

600
00:35:28,620 --> 00:35:32,310
Apabila kita berada dalam pelayar web kami dan kami sedang mengemudi sekitar laman dan kita klik link,

601
00:35:32,310 --> 00:35:37,790
apa yang pelayar kita akan lakukan adalah membuat permintaan HTTP untuk apa jua pautan kita klik.

602
00:35:37,790 --> 00:35:41,670
Tetapi itu bukan sentiasa ideal kerana jika itu berlaku, maka seperti Daud berkata,

603
00:35:41,670 --> 00:35:45,220
kita sentiasa perlu untuk membuat pengguna klik butang Submit atau klik pautan

604
00:35:45,220 --> 00:35:50,380
untuk membuat apa-apa yang berlaku yang akan melibatkan permintaan HTTP.

605
00:35:50,380 --> 00:35:54,160
Jadi dengan AJAX kita boleh membuat permintaan ini bagi pihak JavaScript.

606
00:35:54,160 --> 00:35:57,020
Ini bermakna apabila pengguna berinteraksi dengan halaman atau apa-apa yang berlaku,

607
00:35:57,020 --> 00:36:01,780
kita sebenarnya boleh membuat permintaan perancangan untuk fail PHP yang lain di laman web kami

608
00:36:01,780 --> 00:36:06,280
atau apa-apa lagi dan mendapatkan data bahawa fail yang memuntahkannya keluar.

609
00:36:06,280 --> 00:36:09,860
Mari kita lihat pada contoh AJAX.

610
00:36:09,860 --> 00:36:16,140
Ini adalah halaman Kewangan CS50 kami yang diharapkan sesetengah daripada kita sudah biasa.

611
00:36:16,140 --> 00:36:21,790
Jika kita melihat HTML halaman ini, kita lihat di sini bahawa saya telah menambah beberapa perkara,

612
00:36:21,790 --> 00:36:23,820
salah satu yang saya telah diberikan borang ini ID.

613
00:36:23,820 --> 00:36:26,480
Saya telah berkata id = "borang-quote".

614
00:36:26,480 --> 00:36:31,910
Saya telah melakukan ini hanya kerana ia akan membuat ini sedikit lebih mudah untuk memilih dari DOM

615
00:36:31,910 --> 00:36:35,090
kerana saya hanya boleh membuat pertanyaan yang sangat mudah.

616
00:36:35,090 --> 00:36:38,960
Apa yang saya mahu lakukan di sini ialah saya mahu menetapkan beberapa masalah dengan CS50 Kewangan.

617
00:36:38,960 --> 00:36:41,550
Jadi, jika kita pergi ke finance.cs50.net,

618
00:36:41,550 --> 00:36:45,700
setiap kali saya ingin mendapatkan sebut harga, saya perlu klik butang ini Dapatkan Quote,

619
00:36:45,700 --> 00:36:48,960
dan bahawa Dapatkan butang Quote kemudian membawa saya ke seluruh halaman lain.

620
00:36:48,960 --> 00:36:52,400
Dan jika saya ingin quote lain, saya perlu memukul butang Kembali dan kemudian saya menaip sendiri,

621
00:36:52,400 --> 00:36:54,480
Saya mendapat sebut harga, dan saya memukul butang Kembali.

622
00:36:54,480 --> 00:36:56,840
Ini benar-benar tidak adalah pengalaman pengguna yang terbaik.

623
00:36:56,840 --> 00:37:01,570
Siapa yang benar-benar akan menggunakan laman web ini jika ia lambat untuk mendapatkan harga saham?

624
00:37:01,570 --> 00:37:05,630
Jadi apa yang kita mahu lakukan dengan AJAX adalah membuang bahawa langkah pergi ke halaman yang berasingan

625
00:37:05,630 --> 00:37:08,410
untuk melihat keputusan.

626
00:37:08,410 --> 00:37:11,240
>> Apa yang kita benar-benar hanya meminta bahawa itu harga yang benar-benar kecil,

627
00:37:11,240 --> 00:37:14,240
dan itulah hanya jumlah yang benar-benar kecil data.

628
00:37:14,240 --> 00:37:17,400
Jadi tidak ada keperluan untuk saya untuk pergi satu lagi halaman HTML keseluruhan,

629
00:37:17,400 --> 00:37:20,670
download kumpulan keseluruhannya baru HTML, mungkin memuat turun beberapa lebih banyak imej,

630
00:37:20,670 --> 00:37:24,410
beberapa fail CSS yang lain hanya bagi saya untuk menjawab soalan yang sangat mudah

631
00:37:24,410 --> 00:37:27,810
berapa kos ini saham.

632
00:37:27,810 --> 00:37:31,000
Dengan AJAX kita boleh membuat banyak ini lebih mudah.

633
00:37:31,000 --> 00:37:36,400
Kita lihat di sini bahawa saya menghubungkan dalam fail JavaScript yang dipanggil quote.js.

634
00:37:36,400 --> 00:37:40,140
Mari kita sebenarnya membuka fail tersebut. Tidak ada.

635
00:37:42,610 --> 00:37:45,860
Semua fail JavaScript saya akan terletak dalam HTML

636
00:37:45,860 --> 00:37:47,630
supaya pelayar web boleh mengaksesnya.

637
00:37:47,630 --> 00:37:50,330
Kemudian kita mempunyai direktori yang berasingan di sini untuk menutup,

638
00:37:50,330 --> 00:37:54,340
dan kini di sini adalah quote.js.

639
00:37:54,340 --> 00:38:00,930
Pada bahagian atas fail ini ini mengatakan di sini bahawa saya mahu menunggu untuk keseluruhan halaman dimuatkan

640
00:38:00,930 --> 00:38:04,830
sebelum saya cuba untuk berbuat apa-apa. Mengapa yang diperlukan?

641
00:38:04,830 --> 00:38:08,650
Ia ternyata bahawa perkara yang akan datang yang saya akan lakukan di sini adalah permulaan mencari unsur

642
00:38:08,650 --> 00:38:10,810
yang sepadan dengan pemilih beberapa.

643
00:38:10,810 --> 00:38:15,600
Jika JavaScript ini pernah dilaksanakan sebelum elemen ini dimuatkan pada halaman,

644
00:38:15,600 --> 00:38:17,820
maka semua yang saya cuba lakukan tidak akan bekerja

645
00:38:17,820 --> 00:38:20,580
kerana saya akan cuba untuk memilih sesuatu yang tidak ada lagi.

646
00:38:20,580 --> 00:38:23,780
Jadi ini beratur atas mengatakan saya mahu anda menunggu sehingga semuanya dimuatkan

647
00:38:23,780 --> 00:38:28,030
jadi kita dijamin bahawa mana-mana unsur-unsur Saya cari sebenarnya pada halaman.

648
00:38:29,730 --> 00:38:34,310
Ini tanda dollar di sini bermakna saya menggunakan perpustakaan yang dipanggil jQuery.

649
00:38:34,310 --> 00:38:38,570
Ini perpustakaan jQuery membolehkan kita untuk menggunakan ini selectors bahawa kita hanya melihat.

650
00:38:38,570 --> 00:38:44,010
Dengan mengatakan $ kemudian lulus dalam sebagai hujah ini # bentuk quote,

651
00:38:44,010 --> 00:38:47,910
Saya kini memilih borang bahawa kita hanya mengambil melihat.

652
00:38:47,910 --> 00:38:52,290
Sekarang saya mempunyai perwakilan bentuk bahawa dalam ingatan entah bagaimana.

653
00:38:52,290 --> 00:38:56,760
>> Pada objek ini sekarang, perwakilan ini borang,

654
00:38:56,760 --> 00:38:58,890
Saya kini menggunakan fungsi yang dipanggil.

655
00:38:58,890 --> 00:39:02,710
Apa fungsi ini tidak adalah ia akan melampirkan pengendali acara.

656
00:39:02,710 --> 00:39:06,310
Acara bahawa kita akan mendengar adalah acara submit.

657
00:39:06,310 --> 00:39:08,890
Oleh itu, apabila pengguna klik yang butang Submit atau menekan Enter,

658
00:39:08,890 --> 00:39:11,730
acara ini akan api.

659
00:39:11,730 --> 00:39:16,390
Dengan hooking ke dalam ini, saya kini boleh mengatasi kelakuan lalai borang.

660
00:39:16,390 --> 00:39:19,770
Tanpa JavaScript ini, borang itu akan mengemukakan apa jua PHP fail

661
00:39:19,770 --> 00:39:22,110
kita digunakan dalam atribut tindakan itu.

662
00:39:22,110 --> 00:39:25,440
Tetapi sebaliknya, saya kini mengatakan, tunggu, tunggu, tunggu, saya tidak mahu anda untuk benar-benar berbuat demikian.

663
00:39:25,440 --> 00:39:31,140
Saya mahu ini berlaku sebelum anda pergi dan cuba untuk mengemukakan kepada fail PHP beberapa.

664
00:39:31,140 --> 00:39:32,870
Sekarang apa yang saya mahu lakukan?

665
00:39:32,870 --> 00:39:39,270
Pada ketika ini, saya mahu menggunakan AJAX entah bagaimana untuk memuatkan apa yang harga saham.

666
00:39:39,270 --> 00:39:44,170
Perkara pertama yang saya perlu tahu apa saham pengguna sedang mencari.

667
00:39:44,170 --> 00:39:46,760
Untuk melakukan bahawa saya akan menggunakan pemilih lain.

668
00:39:46,760 --> 00:39:49,020
Ini adalah pemilih ketiga kita melihat sebelum.

669
00:39:49,020 --> 00:39:54,460
Ini mengatakan bahawa saya mahu untuk memulakan bentuk elemen ini dengan ID borang sebut harga.

670
00:39:54,460 --> 00:39:58,440
Kemudian di suatu tempat di dalam bentuk yang perlu ada elemen input

671
00:39:58,440 --> 00:40:01,270
yang mempunyai nama simbol.

672
00:40:01,270 --> 00:40:05,460
Jika kita melihat kembali pada HTML kita, kita melihat bahawa kita mempunyai input [name = simbol].

673
00:40:05,460 --> 00:40:12,380
Ini bermakna bahawa ini akan memilih bahawa kotak teks bahawa pengguna sedang menaip ke dalam.

674
00:40:12,380 --> 00:40:13,870
Itu bagus. Kami mempunyai kotak teks.

675
00:40:13,870 --> 00:40:17,360
Sekarang kita hanya perlu tahu apa yang di dalamnya.

676
00:40:17,360 --> 00:40:20,290
Untuk berbuat demikian kita boleh memanggil kaedah ini di sini, ini Val.,

677
00:40:20,290 --> 00:40:23,240
dan ini mengatakan bahawa saya tahu apa kotak teks anda mempunyai.

678
00:40:23,240 --> 00:40:28,160
Saya mahu anda beritahu saya apa yang ia adalah pengguna yang ditaip ke dalam kotak teks yang.

679
00:40:28,160 --> 00:40:34,440
Sekarang kita mempunyai rentetan yang dipanggil simbol yang sama kepada apa yang pengguna ditaip masuk

680
00:40:34,440 --> 00:40:39,820
Itu bagus. Kita boleh menggunakan rentetan bahawa sekarang untuk membuat permintaan kami.

681
00:40:39,820 --> 00:40:42,450
Ini adalah fungsi baru di sini, ini $,

682
00:40:42,450 --> 00:40:44,900
kecuali kita tidak lagi akan memilih unsur-unsur,

683
00:40:44,900 --> 00:40:48,910
kita akan memanggil fungsi yang berbeza yang diberikan kepada kita oleh jQuery.

684
00:40:48,910 --> 00:40:54,810
AJAX fungsi ini adalah apa yang sebenarnya akan membuat ini permintaan HTTP.

685
00:40:54,810 --> 00:40:57,000
Jadi, kita perlu beritahu beberapa perkara.

686
00:40:57,000 --> 00:41:01,410
Perkara pertama yang kita perlu memberitahu fungsi ini adalah di mana saya mahu permintaan untuk pergi.

687
00:41:01,410 --> 00:41:08,910
Tempat di dalam projek saya, saya mempunyai fail ini di dalam direktori HTML dipanggil quote.php.

688
00:41:08,910 --> 00:41:15,150
Saya boleh mengakses fail ini, kita lihat, sama seperti ini, kalau saya pergi ke localhost / quote.php.

689
00:41:15,150 --> 00:41:20,450
>> Saya mahu JavaScript saya untuk membuat permintaan ke halaman tersebut.

690
00:41:20,450 --> 00:41:22,920
Apakah jenis permintaan sekarang?

691
00:41:22,920 --> 00:41:27,210
Kita melihat sebelum itu bentuk mempunyai bahawa kaedah = "post" sifat,

692
00:41:27,210 --> 00:41:29,270
dan ini bermakna ia akan membuat permintaan POST,

693
00:41:29,270 --> 00:41:32,630
jadi ia tidak akan meletakkan apa-apa dalam URL, bukannya permintaan GET,

694
00:41:32,630 --> 00:41:36,860
yang hanya akan dipecat jika kita hanya mengakses halaman dengan pelayar web, sebagai contoh.

695
00:41:36,860 --> 00:41:41,260
Sekarang kita telah berkata, saya mahu untuk membuat permintaan HTTP POST

696
00:41:41,260 --> 00:41:44,840
ke halaman yang terletak di quote.php.

697
00:41:44,840 --> 00:41:51,490
Apabila kita menyerahkan borang, ingat kita boleh mengakses elemen input dalam bentuk yang

698
00:41:51,490 --> 00:41:54,430
dengan pembolehubah yang $ _POST.

699
00:41:54,430 --> 00:41:58,710
Setakat ini dalam cerita yang telah kita sebenarnya tidak dihantar bersama-sama sebarang data lagi.

700
00:41:58,710 --> 00:42:00,640
Kami telah hanya berkata kita membuat permintaan AJAX

701
00:42:00,640 --> 00:42:03,200
dan di sini adalah jenis permintaan kita sedang membuat.

702
00:42:03,200 --> 00:42:07,090
Sekarang kita perlu sebenarnya menghantar beberapa data ke halaman.

703
00:42:07,090 --> 00:42:10,930
Untuk melakukan yang boleh kita gunakan harta ini dipanggil data.

704
00:42:10,930 --> 00:42:14,950
Nilai harta tanah ini sebenarnya adalah pelbagai bersekutu.

705
00:42:14,950 --> 00:42:19,390
Sebab untuk ini adalah ia membolehkan kita untuk menghantar lebih daripada sekadar sekeping 1 data.

706
00:42:19,390 --> 00:42:24,750
Itulah sebabnya kita mempunyai pendakap kerinting sini bersarang di dalam ini pendakap kerinting lain.

707
00:42:24,750 --> 00:42:29,680
Kekunci dalam barisan bersekutu akan menjadi perkara yang sama

708
00:42:29,680 --> 00:42:32,630
sebagai nama mereka ciri-ciri dalam elemen borang kami.

709
00:42:32,630 --> 00:42:35,740
Ini bermakna bahawa jika saya menghantar sepanjang kunci simbol,

710
00:42:35,740 --> 00:42:41,870
yang bermakna halaman PHP saya boleh mengakses data ini dengan $ _POST [simbol]

711
00:42:41,870 --> 00:42:44,640
sama seperti yang kami lakukan sebelum ini apabila kita telah menyerahkan borang.

712
00:42:44,640 --> 00:42:47,090
Dan kini data sebenar kita mahu menghantar

713
00:42:47,090 --> 00:42:50,790
akan menjadi dalam nilai array ini bersekutu.

714
00:42:50,790 --> 00:42:54,070
>> Kami disimpan teks ini dalam simbol ubah dipanggil,

715
00:42:54,070 --> 00:42:57,380
dan sebagainya kita menghantar bersama-sama kini merupakan kunci simbol

716
00:42:57,380 --> 00:43:01,380
dan nilai apa jua pengguna ditaip masuk

717
00:43:01,380 --> 00:43:06,270
Sekarang kita telah dibuat ini permintaan HTTP, fail PHP kita telah dilaksanakan,

718
00:43:06,270 --> 00:43:11,480
dan ia akan menghantar beberapa data kembali sekarang untuk pelanggan yang hanya dibuat permintaan ini.

719
00:43:11,480 --> 00:43:15,220
Sekarang kita perlu bertindak balas terhadap apa jua pelayan berkata kepada kami.

720
00:43:15,220 --> 00:43:20,180
Untuk melakukan bahawa kita mempunyai harta terakhir di sini dipanggil kejayaan.

721
00:43:20,180 --> 00:43:24,240
Nilai kunci kejayaan ini sebenarnya akan menjadi fungsi,

722
00:43:24,240 --> 00:43:26,910
dan ini adalah salah satu perkara yang benar-benar sejuk yang anda boleh lakukan dengan JavaScript.

723
00:43:26,910 --> 00:43:31,720
Bukan sahaja anda boleh mempunyai ints atau tatasusunan sebagai dalam nilai array bersekutu,

724
00:43:31,720 --> 00:43:34,170
kita juga boleh mempunyai fungsi.

725
00:43:34,170 --> 00:43:36,380
Jadi dengan mengatakan kejayaan, ini adalah kunci saya.

726
00:43:36,380 --> 00:43:38,830
Kolon A kata di sini datang nilai,

727
00:43:38,830 --> 00:43:41,810
dan kini nilai ini sebenarnya berfungsi.

728
00:43:41,810 --> 00:43:44,460
Jadi kita tidak perlu untuk memberikan fungsi ini nama per se.

729
00:43:44,460 --> 00:43:48,820
Kita hanya boleh mengatakan ini akan menjadi beberapa fungsi. Ia akan mengambil masa 1 hujah.

730
00:43:48,820 --> 00:43:51,190
Hujah fungsi ini akan menjadi

731
00:43:51,190 --> 00:43:54,460
apa jua pelayan menghantar kami kembali daripada permintaan.

732
00:43:54,460 --> 00:43:57,750
Sama seperti apabila pelayar kami membuat permintaan, pelayan menghantar sesuatu kembali

733
00:43:57,750 --> 00:43:59,060
dan pelayar memaparkan,

734
00:43:59,060 --> 00:44:03,030
dalam konteks AJAX kita hanya membuat permintaan, pelayan menghantar sesuatu kembali,

735
00:44:03,030 --> 00:44:07,110
dan kini kita telah yang diwakili sebagai rentetan.

736
00:44:07,110 --> 00:44:11,280
Dengan tali itu, saya hanya ingin memaparkan bahawa pada halaman.

737
00:44:11,280 --> 00:44:14,040
Untuk melakukan bahawa saya akan mempunyai satu pemilih lepas.

738
00:44:14,040 --> 00:44:17,570
Saya mahu memilih elemen dengan harga ID.

739
00:44:17,570 --> 00:44:20,710
Ini adalah hanya div kosong bahawa saya telah dicipta pada halaman,

740
00:44:20,710 --> 00:44:26,640
dan saya mahu untuk menetapkan kandungan div bahawa untuk menjadi apa sahaja pelayan menghantar kami kembali.

741
00:44:26,640 --> 00:44:30,280
Saya telah benar-benar diubahsuai quote.php sedikit.

742
00:44:30,280 --> 00:44:33,460
>> Bukannya memanggil render dan menjadikan beberapa halaman,

743
00:44:33,460 --> 00:44:38,100
quote.php kini hanya akan mencetak nilai saham sebagai rentetan.

744
00:44:38,100 --> 00:44:41,880
Jadi jika anda adalah untuk sebenarnya melawat halaman, anda hanya akan melihat bahawa rentetan kecil

745
00:44:41,880 --> 00:44:45,030
apa jua harga saham.

746
00:44:45,030 --> 00:44:50,170
Satu perkara terakhir yang perlu kita lakukan di sini adalah hanya memastikan fungsi ini mengembalikan palsu.

747
00:44:50,170 --> 00:44:53,560
Apa ini mengatakan adalah bahawa jika saya di dalam pengendali acara

748
00:44:53,560 --> 00:44:57,300
dan bahawa pengendali acara kembali palsu dan bukannya kembali benar,

749
00:44:57,300 --> 00:45:01,510
yang bermaksud bahawa saya tidak mahu acara asal kepada api.

750
00:45:01,510 --> 00:45:05,270
Dalam kes ini, jika kita tidak mempunyai apa-apa JavaScript dan kita mengemukakan borang,

751
00:45:05,270 --> 00:45:08,280
pelayar web kami akan berkata, "Saya akan menghantar data bersama-sama,"

752
00:45:08,280 --> 00:45:10,130
dan mereka akan menghantar anda ke laman lain.

753
00:45:10,130 --> 00:45:14,360
Kerana kita menggunakan AJAX sekarang, tidak ada keperluan untuk menghantar pengguna ke halaman lain.

754
00:45:14,360 --> 00:45:17,920
Kami hanya akan memaparkan keputusan dinamik pada halaman ini sama.

755
00:45:17,920 --> 00:45:21,460
Kami benar-benar tidak mahu mereka pergi ke mana-mana, dan saya mahu kekal di halaman yang sama.

756
00:45:21,460 --> 00:45:27,060
Jadi dengan kembali palsu, kita memastikan bahawa borang tidak berbuat demikian untuk kita.

757
00:45:27,060 --> 00:45:31,170
Mari kita melihat apa ini sebenarnya kelihatan seperti.

758
00:45:31,170 --> 00:45:34,180
Halaman quote kami kelihatan sama.

759
00:45:34,180 --> 00:45:37,240
Biar saya tarik sehingga pemeriksa turun di sini supaya kita dapat melihat apa yang berlaku.

760
00:45:37,240 --> 00:45:40,270
Jadikan ia sedikit kurang besar.

761
00:45:40,270 --> 00:45:44,590
Ingat jika kita membuka tab Network, ini adalah di mana kita boleh melihat semua permintaan HTTP

762
00:45:44,590 --> 00:45:47,570
yang berlaku pada halaman.

763
00:45:47,570 --> 00:45:52,890
>> Untuk simbol izinkan saya menaip AAPL dan klik Dapatkan Quote.

764
00:45:52,890 --> 00:45:56,720
Sekarang kita melihat bahawa saham Apple kos beberapa nombor dolar

765
00:45:56,720 --> 00:46:00,410
hanya muncul pada halaman, tetapi URL tidak berubah pada semua.

766
00:46:00,410 --> 00:46:04,570
Malah, di sini adalah permintaan HTTP yang kita hanya dibuat.

767
00:46:04,570 --> 00:46:09,980
Kami membuat permintaan POST kepada quote.php. Yang masuk akal.

768
00:46:09,980 --> 00:46:12,800
Ini adalah apa yang pelayan menghantar kami kembali.

769
00:46:12,800 --> 00:46:16,320
Ia bukan lagi dokumen ini gergasi HTML dengan imej dan hal-hal seperti itu,

770
00:46:16,320 --> 00:46:20,920
ia hanya satu baris teks, dan kemudian kita hanya dipaparkan baris teks.

771
00:46:20,920 --> 00:46:26,290
Jika kita kembali kepada tajuk dan lihat apa yang kita sebenarnya dihantar dalam permintaan HTTP ini,

772
00:46:26,290 --> 00:46:33,950
kita boleh melihat di sini bahawa kita dihantar bersama-sama kunci simbol dan nilai AAPL,

773
00:46:33,950 --> 00:46:36,430
yang adalah apa yang pengguna ditaip masuk

774
00:46:36,430 --> 00:46:39,230
Ini adalah bagus, tetapi ia masih sedikit menjengkelkan.

775
00:46:39,230 --> 00:46:42,490
Saya masih perlu klik butang ini untuk mendapatkan sebut harga saham.

776
00:46:42,490 --> 00:46:45,880
Kami orang sibuk dan kita tidak mempunyai masa untuk klik butang.

777
00:46:45,880 --> 00:46:49,910
Google menyedari ini sedikit manakala yang lalu apabila mereka melaksanakan Google Instant.

778
00:46:49,910 --> 00:46:53,590
Apa yang Google Instant tidak adalah seperti yang anda sedang menaip ia hanya bermula memaparkan keputusan untuk anda

779
00:46:53,590 --> 00:46:56,520
jadi anda tidak perlu risau tentang walaupun mengklik Search.

780
00:46:56,520 --> 00:46:58,730
Sebenarnya, cerita yang menyeronokkan berkaitan itu.

781
00:46:58,730 --> 00:47:01,100
Setelah Google Instant keluar, orang seperti, "Wah, ini adalah sangat menakjubkan."

782
00:47:01,100 --> 00:47:02,540
"Ini adalah begitu sejuk."

783
00:47:02,540 --> 00:47:05,950
Dan seorang pelajar di Stanford yang merupakan 19 pada masa itu

784
00:47:05,950 --> 00:47:09,000
membuat laman ini dipanggil YouTube Segera.

785
00:47:09,000 --> 00:47:13,170
Semua Segera YouTube tidak berkesan mencari YouTube serta-merta.

786
00:47:13,170 --> 00:47:17,020
Jadi bukannya perlu pergi untuk YouTube.com dan memukul Cari,

787
00:47:17,020 --> 00:47:21,650
apabila saya mula menaip menjadi sesuatu YouTube segera seperti CS50,

788
00:47:21,650 --> 00:47:25,320
kita boleh lihat di sini bahawa ia cuba pada sambungan internet yang perlahan

789
00:47:25,320 --> 00:47:28,500
mengisi keputusan ini hidup.

790
00:47:28,500 --> 00:47:35,590
Untuk melakukan bahawa kita sebenarnya boleh membuat pengubahsuaian yang sangat mudah ke fail quote.js kami.

791
00:47:35,590 --> 00:47:40,900
Sekarang kita sedang melampirkan acara ini apabila borang itu dikemukakan.

792
00:47:40,900 --> 00:47:43,760
Kita tidak benar-benar mahu untuk membuat pengguna mengemukakan borang itu lagi,

793
00:47:43,760 --> 00:47:48,570
jadi mari kita sebaliknya api acara ini setiap kali pengguna menekan kekunci.

794
00:47:48,570 --> 00:47:53,200
Untuk melakukan yang pertama mari menukar acara dari mengemukakan kepada keyup.

795
00:47:53,200 --> 00:47:55,740
Itu bermakna bahawa bukannya menunggu untuk mendapatkan borang untuk mengemukakan,

796
00:47:55,740 --> 00:47:58,490
setiap kali kekunci ditekan, sesuatu yang akan berlaku.

797
00:47:58,490 --> 00:48:02,030
Ia tidak lagi masuk akal untuk melampirkan acara ini keyup ke seluruh bentuk.

798
00:48:02,030 --> 00:48:05,080
Kami benar-benar hanya mengambil berat tentang kotak carian yang.

799
00:48:05,080 --> 00:48:09,320
>> Untuk memilih yang kini, kita boleh menukar ini menjadi, bukannya bentuk quote,

800
00:48:09,320 --> 00:48:14,220
borang sebut harga dan kita akan mempunyai input (menaip teks =) atau kita boleh mengatakan (namakan simbol =) -

801
00:48:14,220 --> 00:48:16,420
apa sahaja yang kita mahu.

802
00:48:16,420 --> 00:48:18,650
Sekarang ada satu perkara terakhir yang perlu kita lakukan.

803
00:48:18,650 --> 00:48:21,190
Ingat ke sini apabila kita berkata pulangan palsu

804
00:48:21,190 --> 00:48:24,370
kita kata kita tidak mahu bahawa peristiwa lalai kepada api.

805
00:48:24,370 --> 00:48:26,390
Tetapi ia hanya kebetulan bahawa jika kita melumpuhkan bahawa kini,

806
00:48:26,390 --> 00:48:29,660
apa sahaja yang kita taip tidak akan muncul dalam pelayar lagi

807
00:48:29,660 --> 00:48:33,000
kerana yang akan menjadi tingkah laku lalai menaip ke dalam kotak teks.

808
00:48:33,000 --> 00:48:38,660
Kita tidak mahu lagi untuk mengatasi itu, jadi mari kita memusnahkan pulangan palsu ini.

809
00:48:38,660 --> 00:48:44,800
Jika kita menyimpan itu dan muatkan semula halaman, kini apabila saya mula menaip, AAPL

810
00:48:44,800 --> 00:48:50,160
anda akan melihat bahawa harga saham di bawah sini ialah untuk menamatkan secara automatik.

811
00:48:50,160 --> 00:48:53,150
Jadi di sini adalah CS50 Kewangan Segera.

812
00:48:53,150 --> 00:48:55,860
Sebenarnya cerita yang menyeronokkan tentang Segera YouTube

813
00:48:55,860 --> 00:48:59,420
pelajar yang hanya jenis menulis ia sebagai projek 1-malam,

814
00:48:59,420 --> 00:49:03,800
dan keesokan harinya dia telah ditawarkan pekerjaan oleh Ketua Pegawai Eksekutif YouTube.

815
00:49:03,800 --> 00:49:10,610
Jadi semudah itu, anda CS50 pelajar, projek-projek akhir anda boleh mendapatkan anda pekerjaan di YouTube.

816
00:49:10,610 --> 00:49:14,720
Sesuatu seperti itu adalah idea yang benar-benar sejuk untuk projek akhir, kan?

817
00:49:14,720 --> 00:49:18,170
Kami mempunyai beberapa fungsi sedia ada yang kita mahu untuk mengintegrasikan dengan.

818
00:49:18,170 --> 00:49:20,330
Kami meningkatkan pengalaman pengguna sedikit,

819
00:49:20,330 --> 00:49:24,340
dan tiba-tiba mencari sesuatu di YouTube Instant mungkin mudah banyak

820
00:49:24,340 --> 00:49:27,290
daripada mencari ia di YouTube biasa.

821
00:49:27,290 --> 00:49:30,790
Jadi itulah AJAX secara ringkas.

822
00:49:30,790 --> 00:49:34,860
>> Dalam contoh-contoh bahawa Yusuf telah menunjukkan, kita menyaksikan banyak autocompletes,

823
00:49:34,860 --> 00:49:39,250
dan mereka autocompletes adalah benar-benar, benar-benar berguna kerana kita tidak perlu ingat -

824
00:49:39,250 --> 00:49:41,770
Sebagai contoh, jika anda tidak ingat harga saham untuk Apple

825
00:49:41,770 --> 00:49:45,110
dan kita hanya tahu ia adalah sesuatu aa, bukannya hanya berkata kepada saya,

826
00:49:45,110 --> 00:49:48,740
"Satu bahagian perkara ini kos banyak wang ini,"

827
00:49:48,740 --> 00:49:52,540
Saya jenis ingin tahu apa yang stok bermula dengan aa.

828
00:49:52,540 --> 00:49:58,340
Kita boleh melakukan yang benar-benar baik dengan perpustakaan Bootstrap yang sudah dimasukkan

829
00:49:58,340 --> 00:50:01,380
dalam CS50 Kewangan.

830
00:50:01,380 --> 00:50:09,390
Jika anda datang sini tag JavaScript dan tatal ke Typeahead,

831
00:50:09,390 --> 00:50:13,730
ini adalah hanya plugin baik bahawa seseorang yang sudah menulis untuk kita,

832
00:50:13,730 --> 00:50:16,980
dan kita boleh menggunakan fungsi seperti ini.

833
00:50:16,980 --> 00:50:21,410
Saya menaip dalam A dan di sini adalah senarai beberapa negeri yang bermula dengan A.

834
00:50:21,410 --> 00:50:25,360
Mari kita mengatakan bahawa saya rasa ini adalah benar-benar sejuk dan ia adalah masa untuk saya untuk memasukkan ini pada halaman saya.

835
00:50:25,360 --> 00:50:28,300
Ia ternyata bahawa ini adalah benar-benar, benar-benar mudah.

836
00:50:28,300 --> 00:50:32,810
Mari kita melompat ke atas di sini untuk quote3.js.

837
00:50:34,890 --> 00:50:37,380
Fail saya kelihatan sedikit berbeza.

838
00:50:37,380 --> 00:50:39,700
Down sini semua barangan AJAX saya adalah sama.

839
00:50:39,700 --> 00:50:43,170
Saya mahu memuatkan data saham tanpa perlu pergi ke halaman lain.

840
00:50:43,170 --> 00:50:46,220
Tetapi sekarang saya mahu untuk menggunakan plugin ini.

841
00:50:46,220 --> 00:50:51,020
Dokumentasi Bootstrap mempunyai contoh-contoh besar bagaimana sebenarnya saya boleh berbuat demikian.

842
00:50:51,020 --> 00:50:54,350
Saya mahu katakan, "Berikut adalah input yang saya mahu autoselesai,"

843
00:50:54,350 --> 00:50:56,640
dan saya akan untuk memanggil fungsi ini dipanggil typeahead,

844
00:50:56,640 --> 00:50:59,730
dan perkara yang berlaku untuk mengendalikan semua barangan Typeahead untuk kita.

845
00:50:59,730 --> 00:51:02,090
Ia akan memulakan senarai, ia akan melakukan semua penapisan kami.

846
00:51:02,090 --> 00:51:06,680
Perkara sahaja ia perlu tahu adalah apa data yang kita autocompleting pada.

847
00:51:06,680 --> 00:51:10,480
Jadi saya mendapati kunci ini hanya dengan membaca dokumentasi dan melihat contoh.

848
00:51:10,480 --> 00:51:14,150
Jika saya memberikan kunci sumber, nilai kunci ini

849
00:51:14,150 --> 00:51:17,770
adalah hanya beberapa pelbagai perkara yang saya mahu autoselesai.

850
00:51:17,770 --> 00:51:20,180
Pembolehubah ini datang dari fail ini lain.

851
00:51:20,180 --> 00:51:23,400
Saya membuka symbols.js.

852
00:51:23,400 --> 00:51:27,980
>> Ini symbols.js adalah hanya ini pelbagai benar-benar, benar-benar besar yang mengandungi rentetan

853
00:51:27,980 --> 00:51:32,080
semua ini simbol saham dari NASDAQ.

854
00:51:32,080 --> 00:51:42,190
Jika saya mahu untuk melompat kembali ke HTML, jadi jharvard, vhosts, globalhost, html, template,

855
00:51:42,190 --> 00:51:45,820
quote_form.

856
00:51:45,820 --> 00:51:50,910
Sejak itu kini dipanggil quote3.js, izinkan saya menukar fail JavaScript saya termasuk di sini.

857
00:51:50,910 --> 00:51:55,110
Sekarang saya mempunyai quote3.js, jadi saya akan memuatkan dalam fail JavaScript yang berasingan,

858
00:51:55,110 --> 00:51:57,910
satu yang mempunyai bahawa Bootstrap autoselesai.

859
00:51:57,910 --> 00:52:04,430
Sekarang apabila saya melompat kembali ke penyemak imbas, memuat semula halaman, dan saya mula menaip aa,

860
00:52:04,430 --> 00:52:06,880
ada autoselesai saya. Dan ia adalah benar-benar semudah itu.

861
00:52:06,880 --> 00:52:11,400
Saya mempunyai 1 baris kod yang hanya berkata, "Berikut adalah perkara yang saya mahu autoselesai,"

862
00:52:11,400 --> 00:52:16,590
dan tiba-tiba saya ini mempunyai fungsi yang benar-benar, benar-benar baik dengan tidak banyak keseluruhan usaha di semua.

863
00:52:16,590 --> 00:52:19,810
Seperti yang anda membangunkan laman web dan terutamanya bahagian akhir hadapan perkara,

864
00:52:19,810 --> 00:52:21,840
anda akan mendapati ini adalah kes banyak.

865
00:52:21,840 --> 00:52:25,700
Terdapat banyak, banyak, banyak perpustakaan benar-benar sejuk percuma di luar sana

866
00:52:25,700 --> 00:52:30,190
yang membuat ia super mudah untuk melakukan perkara-perkara seperti ini.

867
00:52:30,190 --> 00:52:37,230
Sesiapa sahaja boleh berfikir mana-mana kelemahan hanya autocompleting dalam senarai ini besar simbol?

868
00:52:37,230 --> 00:52:41,580
Apa yang boleh menjadi sesuatu yang tidak adalah yang terbaik dengan pendekatan ini?

869
00:52:42,790 --> 00:52:45,960
Yeah. >> [Pelajar] Masa, jika anda mempunyai banyak [didengar]

870
00:52:45,960 --> 00:52:50,420
Yeah. Sekarang kita sedang memuat turun fail ini JavaScript yang besar dan terdapat banyak simbol.

871
00:52:50,420 --> 00:52:54,360
Dan sebagainya jika kita mempunyai satu tan barangan, jenis ini boleh meningkatkan kependaman bukan sahaja mencari

872
00:52:54,360 --> 00:52:56,600
tetapi juga memuat turun fail sebenar.

873
00:52:56,600 --> 00:52:58,670
Besar. Apa-apa lagi?

874
00:53:01,950 --> 00:53:05,280
Sekarang tidak ada perasaan sebenar yang relevan.

875
00:53:05,280 --> 00:53:08,190
Jika saya menaip A, syarikat-syarikat yang muncul di sini

876
00:53:08,190 --> 00:53:11,220
tidak mungkin syarikat yang paling popular yang bermula dengan A.

877
00:53:11,220 --> 00:53:17,130
>> Sebelum saya masuk kepada Apple, ia mungkin mengambil beberapa lagi watak-watak untuk mencari apa yang saya cari.

878
00:53:17,130 --> 00:53:20,420
Ini autoselesai tidak mempunyai ini rasa yang relevan.

879
00:53:20,420 --> 00:53:24,400
Ia hanya akan berkata, "Apa sahaja yang sepadan saya akan memaparkan."

880
00:53:24,400 --> 00:53:30,510
Selain daripada itu, saya ingin entah bagaimana mengintegrasikan kaitan ke dalam carian saya.

881
00:53:30,510 --> 00:53:36,440
Jika saya pergi ke sini Yahoo! Kewangan finance.yahoo.com,

882
00:53:36,440 --> 00:53:42,100
Jika saya cuba untuk masukkan simbol pada halaman Yahoo! Finance

883
00:53:42,100 --> 00:53:52,310
dan saya mula menaip goog, saya mempunyai senarai ini bagus perkara.

884
00:53:52,310 --> 00:53:57,100
Jelas sekali, ia kelihatan seperti Yahoo! Kewangan melakukan sesuatu yang lebih bijak di sini.

885
00:53:57,100 --> 00:53:59,790
Mereka mempunyai kaitan dan mereka juga mempunyai maklumat tambahan

886
00:53:59,790 --> 00:54:01,430
seperti nama stok.

887
00:54:01,430 --> 00:54:05,850
Itu sesuatu yang saya tidak boleh benar-benar mendapatkan dengan hanya senarai saham saya simbol.

888
00:54:05,850 --> 00:54:09,520
Saya mahu ini dan jadi saya akan mengambil ia.

889
00:54:09,520 --> 00:54:11,790
Untuk melakukan yang membolehkan melakukan beberapa perkara.

890
00:54:11,790 --> 00:54:15,580
Mari kita mula-mula membuka pemeriksa pada halaman ini

891
00:54:15,580 --> 00:54:18,100
kerana kita melihat bahawa halaman ini tidak tambah nilai pada semua,

892
00:54:18,100 --> 00:54:21,960
jadi ia mungkin menggunakan AJAX entah bagaimana untuk memuatkan data.

893
00:54:21,960 --> 00:54:23,920
Kita boleh mengetahui apa data yang memuatkan.

894
00:54:23,920 --> 00:54:28,390
Jika saya klik pada tab Network ini, ini akan menjadi semua permintaan yang bermula akan dipecat.

895
00:54:28,390 --> 00:54:34,020
Sekarang jika saya menaip di goo, kita dapat melihat bahawa saya hanya mendapat permintaan HTTP baru.

896
00:54:34,020 --> 00:54:37,490
Ini mungkin di mana data yang datang dari.

897
00:54:37,490 --> 00:54:41,990
Cukup yakin, jika saya melihat URL ini, yang sedikit pelik dinamakan,

898
00:54:41,990 --> 00:54:46,930
kita dapat melihat bahawa ini adalah betul-betul di mana Yahoo menghantar data dari.

899
00:54:46,930 --> 00:54:53,400
>> Saya telah mencipta fail yang berasingan dipanggil suggest.php yang sangat serupa dalam semangat untuk fungsi lookup.

900
00:54:53,400 --> 00:54:57,730
Ia pada dasarnya akan membuat pertanyaan ke URL Yahoo, mendapatkan kembali beberapa data,

901
00:54:57,730 --> 00:54:59,750
dan menghantar kembali kepada saya.

902
00:54:59,750 --> 00:55:02,570
Sekarang, bukannya menggunakan ini besar, senarai besar simbol,

903
00:55:02,570 --> 00:55:05,280
Saya boleh menggunakan perkara kaitan nice Yahoo,

904
00:55:05,280 --> 00:55:08,150
dan saya tidak perlu untuk memuat turun fail tersebut JavaScript besar-besaran.

905
00:55:08,150 --> 00:55:12,040
Saya hanya akan merobohkan simbol saham yang sebenarnya relevan.

906
00:55:12,040 --> 00:55:13,960
Mari kita melompat ke dalam itu.

907
00:55:13,960 --> 00:55:17,360
Jadi html, js. Kami kini pada quote4.

908
00:55:17,360 --> 00:55:22,120
Sekarang kita tidak lagi menggunakan bahawa senarai besar fail JavaScript.

909
00:55:22,120 --> 00:55:24,430
Tetapi ada sejenis kecil masalah reka bentuk di sini.

910
00:55:24,430 --> 00:55:28,200
Kami telah berkata bahawa di AJAX adalah segerak.

911
00:55:28,200 --> 00:55:31,000
Apa yang bermakna adalah bahawa apabila saya membuat permintaan AJAX,

912
00:55:31,000 --> 00:55:36,490
jadi di sini on line 8, ini adalah di mana permintaan AJAX saya sebenarnya dipecat.

913
00:55:36,490 --> 00:55:40,370
Katakan sekarang saya mempunyai beberapa kod turun di sini yang akan melakukan beberapa barangan

914
00:55:40,370 --> 00:55:43,930
suka memaklumkan pengguna atau sesuatu perubahan pada halaman.

915
00:55:43,930 --> 00:55:49,830
Apa yang tidak akan berlaku adalah pelayar tidak akan menunggu untuk permintaan ini untuk meneruskan

916
00:55:49,830 --> 00:55:53,480
sebelum datang ke bawah dan memukul baris ini.

917
00:55:53,480 --> 00:55:55,900
Itulah sebahagian yang tak segerak.

918
00:55:55,900 --> 00:55:58,400
Ia akan membuat permintaan ini dan berkata, "Apabila anda selesai,

919
00:55:58,400 --> 00:56:03,080
"Kembali dan memanggil bahawa fungsi bahawa saya memberitahu anda untuk memanggil di dalam kejayaan."

920
00:56:03,080 --> 00:56:07,300
Ini bermakna kita tidak boleh hanya memuat turun semua stok terlebih dahulu.

921
00:56:07,300 --> 00:56:10,300
Kita perlu membuat permintaan dan menunggu sesuatu untuk kembali.

922
00:56:10,300 --> 00:56:13,330
Itu bermakna bahawa sebelum ini, kita hanya boleh memberitahu Bootstrap,

923
00:56:13,330 --> 00:56:15,580
"Berikut adalah senarai perkara yang saya mahu anda untuk autolengkap pada."

924
00:56:15,580 --> 00:56:18,950
Kita tidak boleh lagi berbuat demikian lagi kerana kita tidak tahu

925
00:56:18,950 --> 00:56:21,780
apa yang kita mahu sebenarnya autoselesai pada.

926
00:56:21,780 --> 00:56:25,190
Nasib baik, Bootstrap fikir ini kerana mereka adalah orang pintar di sana,

927
00:56:25,190 --> 00:56:30,160
dan mereka sebenarnya memberikan kita satu lagi cara untuk memuatkan plugin Typeahead.

928
00:56:30,160 --> 00:56:35,630
Sebelum ini, nilai harta sumber ini adalah hanya ini pelbagai besar perkara untuk autolengkap.

929
00:56:35,630 --> 00:56:39,580
>> Sekarang harta sumber sebenarnya fungsi,

930
00:56:39,580 --> 00:56:44,580
dan Tujuan fungsi ini adalah untuk mengetahui apa perkara autoselesai pada.

931
00:56:44,580 --> 00:56:48,730
Cara ia akan mengetahui bahawa ia akan bertanya Yahoo! Kewangan

932
00:56:48,730 --> 00:56:51,750
apa perkara terbaik untuk autolengkap.

933
00:56:51,750 --> 00:56:54,500
Untuk melakukan bahawa saya akan membuat permintaan AJAX sangat serupa.

934
00:56:54,500 --> 00:56:59,010
Saya akan meminta halaman ini pada suggest.php.

935
00:56:59,010 --> 00:57:01,360
Saya mahu menghantar sepanjang simbol masih.

936
00:57:01,360 --> 00:57:05,570
Dan kini kejayaan saya, dokumentasi Bootstrap memberitahu saya

937
00:57:05,570 --> 00:57:09,130
bahawa untuk mengisi bahawa senarai perkara,

938
00:57:09,130 --> 00:57:14,370
semua yang saya perlu lakukan adalah lulus dalam pelbagai ini sekarang kepada fungsi panggil balik.

939
00:57:14,370 --> 00:57:15,660
Tetapi tunggu satu minit.

940
00:57:15,660 --> 00:57:20,240
Jika ini sepatutnya menjadi array dan AJAX menghantar saya kembali teks,

941
00:57:20,240 --> 00:57:22,720
bagaimana yang mungkin?

942
00:57:22,720 --> 00:57:27,910
Ini memperkenalkan cara baru untuk bertukar-tukar data yang dipanggil JSON.

943
00:57:27,910 --> 00:57:33,000
Dalam kes ini kita tidak hanya menghantar kembali rentetan mudah teks.

944
00:57:33,000 --> 00:57:37,670
Sekarang kita sedang berurusan dengan senarai ini lebih kompleks simbol saham.

945
00:57:37,670 --> 00:57:41,730
Ini simbol saham juga boleh termasuk perkara-perkara seperti nama syarikat atau harga semasa.

946
00:57:41,730 --> 00:57:47,550
Hanya menggunakan rentetan besar lama yang tidak diformat dengan apa-apa cara yang boleh diramalkan

947
00:57:47,550 --> 00:57:51,970
tidak akan menjadi cara terbaik untuk mendapatkan data dari pelayan Yahoo kepada saya

948
00:57:51,970 --> 00:57:54,540
dalam cara yang saya boleh faham.

949
00:57:54,540 --> 00:58:01,280
JSON merupakan teknologi yang mengambil kesempatan daripada bagaimana kita mencipta array bersekutu JavaScript.

950
00:58:01,280 --> 00:58:04,510
Ini kelihatan banyak seperti pelbagai JavaScript bersekutu,

951
00:58:04,510 --> 00:58:06,600
dan pada hakikatnya, ia adalah kerana ia adalah.

952
00:58:06,600 --> 00:58:09,710
JSON berdiri untuk Tatatanda Objek JavaScript.

953
00:58:09,710 --> 00:58:15,020
Ini adalah pada dasarnya telah dipersetujui format untuk memindahkan data ke belakang dan sebagainya.

954
00:58:15,020 --> 00:58:18,280
Berikut ini objek JSON atau ini pelbagai JSON bersekutu

955
00:58:18,280 --> 00:58:21,010
menghantar saya beberapa data mengenai kursus.

956
00:58:21,010 --> 00:58:25,110
>> Kekunci array ini adalah perkara-perkara seperti kursus yang mempunyai nilai cs50,

957
00:58:25,110 --> 00:58:29,140
dan turun di sini kita dapat melihat bahawa saya boleh mempunyai nilai yang pelbagai.

958
00:58:29,140 --> 00:58:32,730
Saya tidak mempunyai untuk melakukan perkara-perkara seperti menghuraikan keluar tali dan mencari koma

959
00:58:32,730 --> 00:58:35,330
dan melakukan perkara gila seperti itu.

960
00:58:35,330 --> 00:58:38,820
Kerana ini diisytiharkan dalam format JSON ini,

961
00:58:38,820 --> 00:58:43,510
JavaScript dan jQuery sudah mempunyai fungsi untuk menukar rentetan

962
00:58:43,510 --> 00:58:48,140
yang kelihatan seperti ini JSON ke pelbagai JavaScript bersekutu sebenar

963
00:58:48,140 --> 00:58:50,440
bahawa kita boleh bekerja dengan.

964
00:58:50,440 --> 00:58:56,660
Berbuat demikian adalah semudah mengatakan bahawa tiada lagi adalah fail ini, suggest.php,

965
00:58:56,660 --> 00:58:59,040
menghantar saya kembali hanya satu rentetan teks,

966
00:58:59,040 --> 00:59:01,950
tetapi saya tahu ia akan menghantar saya kembali JSON.

967
00:59:01,950 --> 00:59:06,760
Ini bermakna bahawa JSON boleh ditukar menjadi sebuah array bersekutu JavaScript.

968
00:59:06,760 --> 00:59:10,830
Dan begitu jQuery, saya ingin anda untuk berbuat demikian bagi saya.

969
00:59:10,830 --> 00:59:13,990
Ini bermakna bahawa parameter ini sambutan di sini,

970
00:59:13,990 --> 00:59:16,070
ini tidak lagi hanya rentetan.

971
00:59:16,070 --> 00:59:19,860
Kerana kita telah diberitahu jQuery yang di sini datang beberapa JSON,

972
00:59:19,860 --> 00:59:22,950
jQuery akan menjadi bijak untuk mengatakan, "Anda mahu JSON?"

973
00:59:22,950 --> 00:59:26,890
"Saya akan untuk menukar itu ke dalam array bersekutu untuk anda."

974
00:59:26,890 --> 00:59:32,100
Mari kita sebenarnya mengambil lihat pada tab Network sekali kita mempunyai quote4.js.

975
00:59:32,100 --> 00:59:35,400
Kami akan mengubah ini dan muat semula halaman.

976
00:59:37,150 --> 00:59:41,250
Sekarang saya akan menaip dalam-lagi.

977
00:59:41,250 --> 00:59:45,600
Saya telah membuat permintaan pasangan untuk suggest.php, tetapi kini sambutan ini,

978
00:59:45,600 --> 00:59:48,670
bukannya hanya rentetan, ia JSON.

979
00:59:48,670 --> 00:59:52,580
Jadi saya perlu bersedia kerinting terbuka berkata, "Di sini datang pelbagai bersekutu."

980
00:59:52,580 --> 00:59:56,830
>> Kunci pertama dan satu-satunya array ini bersekutu dipanggil simbol,

981
00:59:56,830 --> 01:00:00,240
dan kemudian di sini adalah pelbagai semua simbol-simbol yang berkaitan

982
01:00:00,240 --> 01:00:04,820
datang sekarang dari Yahoo! Kewangan, bukan dari senarai yang gergasi.

983
01:00:06,110 --> 01:00:10,630
Itulah bagaimana saya hanya boleh mengisi pemalam autoselesai

984
01:00:10,630 --> 01:00:14,280
dengan beberapa data yang tidak datang dari fail tempatan yang sudah telah ditetapkan

985
01:00:14,280 --> 01:00:17,490
tetapi daripada sesuatu yang lain.

986
01:00:17,490 --> 01:00:21,160
Ia ternyata bahawa kita sebenarnya boleh mengambil kesempatan daripada teknologi yang dipanggil JSONP,

987
01:00:21,160 --> 01:00:27,420
atau JSON dengan padding, yang akan menghapuskan ini tengah suggest.php.

988
01:00:27,420 --> 01:00:34,010
Tetapi sebaliknya berbuat demikian, mari kita sebaliknya mengambil melihat bagaimana saya boleh memperbaiki ini lebih.

989
01:00:34,010 --> 01:00:36,040
Saya benar-benar ingin Typeahead Bootstrap. Ia adalah benar-benar baik.

990
01:00:36,040 --> 01:00:39,570
Tetapi kita mendapat baik di JavaScript dan kita mahu jenis melakukan ini diri kita,

991
01:00:39,570 --> 01:00:43,870
mungkin mengambil melihat apa plugin ini boleh melakukan.

992
01:00:43,870 --> 01:00:46,500
Mari kita tidak lagi menggunakan bahawa perkara Typeahead,

993
01:00:46,500 --> 01:00:50,550
dan mari kita cuba untuk membuat senarai ini stok yang dicadangkan sendiri.

994
01:00:50,550 --> 01:00:53,790
Berikut dalam quote6.php kita pergi untuk memulakan dengan cara yang sama.

995
01:00:53,790 --> 01:00:58,050
Jenis seseorang Setiap kali sesuatu, kita mahu untuk membuat permintaan AJAX.

996
01:00:58,050 --> 01:01:01,590
Ini adalah serupa dengan asal kita CS50 Kewangan Segera.

997
01:01:01,590 --> 01:01:05,020
Bukannya membuat permintaan untuk quote.php,

998
01:01:05,020 --> 01:01:08,530
kita sedang membuat permintaan fail yang sama seperti sebelum ini, suggest.php ini,

999
01:01:08,530 --> 01:01:12,460
yang hanya akan tarik data dari Yahoo! Kewangan.

1000
01:01:12,460 --> 01:01:19,480
>> Sekali lagi, kami masih menjangkakan JSON, tetapi sekarang sejak Typeahead tidak melakukan ini untuk kita,

1001
01:01:19,480 --> 01:01:24,850
kita juga perlu menghantar bersama nilai yang ada di dalam kotak teks semasa.

1002
01:01:24,850 --> 01:01:28,120
Sekarang kita tahu apa yang perlu meminta Yahoo! Kewangan untuk,

1003
01:01:28,120 --> 01:01:34,160
dan sebagainya sekarang di sini adalah fungsi yang kita mahu untuk melaksanakan sekali permintaan itu selesai.

1004
01:01:34,160 --> 01:01:36,520
Kami tidak mempunyai plugin untuk membuat senarai untuk kita,

1005
01:01:36,520 --> 01:01:40,630
jadi di sini adalah di mana kita sebenarnya akan membina senarai cadangan.

1006
01:01:40,630 --> 01:01:44,850
Untuk berbuat demikian, sama seperti di PHP kita concatenated ini rentetan besar HTML

1007
01:01:44,850 --> 01:01:48,170
maka kita dicetak mereka, kita boleh melakukan perkara yang sama di JavaScript.

1008
01:01:48,170 --> 01:01:51,850
Mula-mula kita pergi untuk memulakan rentetan ini dipanggil cadangan,

1009
01:01:51,850 --> 01:01:54,590
dan rentetan ini hanya akan mengandungi beberapa HTML.

1010
01:01:54,590 --> 01:01:58,320
Kami mahu ia menjadi senarai perkara, jadi kita akan mulakan dengan tag senarai ini,

1011
01:01:58,320 --> 01:02:03,340
dan sekarang kita pergi untuk melelar atas segala simbol yang telah dikembalikan semula kepada kami.

1012
01:02:03,340 --> 01:02:06,500
Ingat, kerana kita telah berkata jenisdata: 'json', ini tidak adalah rentetan.

1013
01:02:06,500 --> 01:02:09,500
Ini sudah pelbagai untuk kita. Itu benar-benar sejuk.

1014
01:02:09,500 --> 01:02:13,790
Kami hanya boleh berkata, "Saya mahu anda untuk menambah elemen senarai."

1015
01:02:13,790 --> 01:02:16,000
Kami akan meletakkan ia di dalam unsur satu di sebelah itu,

1016
01:02:16,000 --> 01:02:19,030
kita akan memberikan kelas cadangan supaya kita tahu apa yang ia adalah,

1017
01:02:19,030 --> 01:02:23,880
dan kini di sini adalah simbol bahawa kita mendapat kembali dari Yahoo! Kewangan.

1018
01:02:23,880 --> 01:02:27,230
>> Apabila kita telah mencipta satu elemen bagi setiap simbol yang kita telah mendapat kembali,

1019
01:02:27,230 --> 01:02:30,100
kami hanya mahu menutup senarai.

1020
01:02:30,100 --> 01:02:33,040
Jadi sekarang cadangan mewakili ini serpihan HTML sedikit

1021
01:02:33,040 --> 01:02:37,860
yang apabila diletakkan di halaman akan menjadi senarai perkara-perkara yang kita cari.

1022
01:02:37,860 --> 01:02:41,070
Sekarang mari kita sebenarnya meletakkan bahawa pada halaman.

1023
01:02:41,070 --> 01:02:46,390
Untuk melakukan bahawa saya telah benar-benar mencipta satu lagi div kosong dan saya telah diberikan ID cadangan.

1024
01:02:46,390 --> 01:02:52,520
Sama seperti kita menetapkan kandungan div itu yang akan memaparkan harga data saham,

1025
01:02:52,520 --> 01:02:58,600
kita kini hanya mahu menetapkan kandungan div ini untuk apa sahaja tali ini adalah

1026
01:02:58,600 --> 01:03:00,290
yang mengandungi simbol-simbol.

1027
01:03:00,290 --> 01:03:07,650
Dengan menggunakan kaedah ini HTML, ini pembolehubah cadangan, rentetan ini, adalah rentetan HTML.

1028
01:03:07,650 --> 01:03:13,490
Saya mahu anda mengambil HTML dan meletakkan ia di dalam div cadangan dipanggil.

1029
01:03:13,490 --> 01:03:15,680
Kita baru sahaja dilampirkan sesuatu untuk DOM kini.

1030
01:03:15,680 --> 01:03:20,360
Kami telah menambah beberapa elemen baru kepada DOM bahawa kita kini boleh dipaparkan pada halaman.

1031
01:03:20,360 --> 01:03:22,540
Mari kita lihat apa ini kelihatan seperti.

1032
01:03:22,540 --> 01:03:29,110
Jika kita memuatkan pada quote6 dan sekarang kita kembali,

1033
01:03:29,110 --> 01:03:34,480
sekarang apabila saya mula menaip AAPL, kita tidak lagi mempunyai bahawa Bootstrap autoselesai,

1034
01:03:34,480 --> 01:03:38,470
tetapi kita kini mempunyai senarai ini bahawa kita membuat diri kita.

1035
01:03:38,470 --> 01:03:43,230
Ini adalah uglier sedikit daripada Typeahead Bootstrap, sebagai contoh,

1036
01:03:43,230 --> 01:03:45,580
tetapi ia tidak membenarkan kita untuk melakukan satu perkara yang lain.

1037
01:03:45,580 --> 01:03:48,660
Apabila kita telah mencari pada plugin Bootstrap itu,

1038
01:03:48,660 --> 01:03:52,590
kita lihat bahawa apabila kita autocompleted, salah satu nilai autoselesai AAPL.

1039
01:03:52,590 --> 01:03:54,820
Yang mungkin tidak begitu berguna.

1040
01:03:54,820 --> 01:03:59,100
Sebagai pengguna, saya mungkin tidak segera mengiktiraf semua simbol saham.

1041
01:03:59,100 --> 01:04:02,370
Apa yang saya mungkin lebih cenderung untuk mengenali nama sebenar syarikat.

1042
01:04:02,370 --> 01:04:05,310
Jadi tidak akan ia menjadi benar-benar membantu jika bukannya mengatakan AAPL

1043
01:04:05,310 --> 01:04:07,970
ini berkata sesuatu seperti Apple Inc

1044
01:04:07,970 --> 01:04:12,240
Kerana kita telah diperkenalkan ini diri kita sendiri, kita benar-benar mudah boleh berbuat demikian.

1045
01:04:12,240 --> 01:04:17,630
Mari kita membuka fail quote terakhir kami di sini, jadi quote7.

1046
01:04:17,630 --> 01:04:23,200
>> Perkara yang sama. Saya baru sahaja mencipta satu lagi fail PHP yang akan kembali kepada kita lebih daripada sekadar simbol.

1047
01:04:23,200 --> 01:04:25,550
Ia juga akan memberikan kita kembali nama syarikat.

1048
01:04:25,550 --> 01:04:28,150
Dan supaya kita melakukan perkara yang sama. Kami membuat permintaan AJAX.

1049
01:04:28,150 --> 01:04:32,370
Setelah permintaan itu telah selesai, kita pergi untuk melaksanakan fungsi ini di sini,

1050
01:04:32,370 --> 01:04:36,520
dan fungsi ini akan membina sehingga rentetan besar unsur-unsur.

1051
01:04:36,520 --> 01:04:39,520
Tetapi perbezaan di sini adalah bahawa nilai senarai ini tidak lagi hanya simbol,

1052
01:04:39,520 --> 01:04:45,370
ia kini nama.

1053
01:04:45,370 --> 01:04:47,070
Jadi kita mempunyai satu masalah kecil.

1054
01:04:47,070 --> 01:04:51,590
Apabila kita menggunakan lookup kita, kita perlu entah bagaimana lulus simbol.

1055
01:04:51,590 --> 01:04:54,950
Kita tidak boleh lulus sesuatu yang lookup seperti Microsoft Corporation.

1056
01:04:54,950 --> 01:04:57,900
Kita perlu untuk lulus ia MSFT.

1057
01:04:57,900 --> 01:05:01,640
Apabila kita menulis HTML, kita mempunyai banyak ciri-ciri terbina dalam yang bagus.

1058
01:05:01,640 --> 01:05:05,440
A mungkin telah dikaitkan dengan ia href atau kelas.

1059
01:05:05,440 --> 01:05:08,230
Tetapi apa yang kita benar-benar perlukan sekarang ialah untuk setiap pautan ini

1060
01:05:08,230 --> 01:05:11,120
mempunyai simbol saham yang dikaitkan dengannya.

1061
01:05:11,120 --> 01:05:14,240
Tiada terbina dalam atribut HTML untuk simbol saham,

1062
01:05:14,240 --> 01:05:21,010
tetapi bernasib baik, HTML5 membolehkan kami untuk mewujudkan sifat-sifat kita sendiri untuk menjadi apa sahaja yang kita mahu.

1063
01:05:21,010 --> 01:05:24,620
Dengan berkata-simbol data, saya telah diperkenalkan atribut baru

1064
01:05:24,620 --> 01:05:29,350
yang namanya saya hanya terdiri, dan ini adalah ok kerana saya didahulukan dengan data ini.

1065
01:05:29,350 --> 01:05:34,270
Kami akan menyimpan di dalam sana simbol dari saham sekarang.

1066
01:05:34,270 --> 01:05:39,590
Apa yang bermakna adalah bahawa walaupun kita sedang memaparkan nilai nama syarikat

1067
01:05:39,590 --> 01:05:43,380
dalam autoselesai kami, kami masih mengingati simbol

1068
01:05:43,380 --> 01:05:47,110
yang dikaitkan dengan setiap syarikat.

1069
01:05:47,110 --> 01:05:50,350
Cara kita lakukan bahawa di dalam elemen ini sendiri.

1070
01:05:50,350 --> 01:05:52,930
Jadi itu bermakna kita perlu membuat satu perubahan yang lebih.

1071
01:05:52,930 --> 01:05:57,090
Apabila kita klik sekarang, kita perlu untuk benar-benar mengambil kesempatan daripada sifat simbol

1072
01:05:57,090 --> 01:06:00,220
bukannya hanya nilainya.

1073
01:06:00,220 --> 01:06:05,010
Jika kita kembali, kita melampirkan pengendali acara kepada cadangan.

1074
01:06:05,010 --> 01:06:09,280
Apabila salah satu daripada cadangan ini diklik sekarang, saya mahu melakukan sesuatu.

1075
01:06:09,280 --> 01:06:13,160
Apa yang saya mahu lakukan adalah menukar nilai kotak input itu.

1076
01:06:13,160 --> 01:06:16,100
Sekarang saya mahu untuk menetapkan fungsi ini Val yang sama.

1077
01:06:16,100 --> 01:06:21,060
>> Jadi, tanpa sebarang hujah fungsi ini Val kembali kepada anda apa yang sudah dalam kotak teks,

1078
01:06:21,060 --> 01:06:27,070
tetapi jika anda memberikan rentetan, ia akan mengambil tali itu dan meletakkan ia ke dalam kotak teks.

1079
01:06:27,070 --> 01:06:28,980
Saya memilih kotak teks dengan cara yang sama.

1080
01:06:28,980 --> 01:06:31,230
Nama ia adalah simbol dalam borang sebut harga.

1081
01:06:31,230 --> 01:06:37,540
Sekarang saya menghantar ia nilai atribut data-simbol.

1082
01:06:37,540 --> 01:06:41,560
Ini perkara di sini adalah baru, ini $ (ini).

1083
01:06:41,560 --> 01:06:46,850
Apa ini merujuk kepada elemen yang diklik.

1084
01:06:46,850 --> 01:06:50,880
Kita boleh lihat di sini bahawa kita tidak melampirkan acara klik

1085
01:06:50,880 --> 01:06:54,690
kepada setiap elemen dengan kelas cadangan individu.

1086
01:06:54,690 --> 01:06:57,140
Sebaliknya, kita menghampiri ini sedikit berbeza.

1087
01:06:57,140 --> 01:07:01,700
Sebaliknya kita mengatakan apabila apa-apa dalam div cadangan ini,

1088
01:07:01,700 --> 01:07:04,080
yang ingat hanya bekas untuk senarai itu,

1089
01:07:04,080 --> 01:07:10,150
jika sesuatu di dalam div ini diklik dan ia mempunyai kelas cadangan,

1090
01:07:10,150 --> 01:07:13,000
Saya mahu acara ini kepada api.

1091
01:07:13,000 --> 01:07:17,490
Pada asasnya apa ini bermakna yang boleh kita lakukan ialah kita boleh menggunakan semula ini pengendali acara yang sama

1092
01:07:17,490 --> 01:07:20,000
bagi semua perkara dalam senarai.

1093
01:07:20,000 --> 01:07:22,080
Jadi kita tidak perlu mempunyai satu acara pengendali untuk elemen pertama

1094
01:07:22,080 --> 01:07:24,550
dan acara pengendali yang berlainan bagi unsur kedua.

1095
01:07:24,550 --> 01:07:29,880
Kita sebaliknya boleh berkata, "Saya mahu pengendali acara yang sama untuk memohon kepada segala-galanya dalam senarai saya."

1096
01:07:29,880 --> 01:07:34,420
Tetapi kita perlu entah bagaimana tahu yang mana elemen diklik.

1097
01:07:34,420 --> 01:07:38,450
Ini "ini" kata kunci mewakili hanya itu.

1098
01:07:38,450 --> 01:07:42,360
Ini adalah objek yang hanya diklik oleh pengguna.

1099
01:07:42,360 --> 01:07:47,680
Jika saya hanya klik pautan ke-3, ini merupakan elemen pautan yang 3,

1100
01:07:47,680 --> 01:07:51,670
yang bermaksud bahawa saya boleh mendapatkan atribut, data-simbol,

1101
01:07:51,670 --> 01:07:57,760
yang kita tahu mengandungi simbol yang dikaitkan dengan syarikat saya hanya klik.

1102
01:07:57,760 --> 01:08:04,550
Jika kita melompat kembali ke halaman kewangan kami,

1103
01:08:04,550 --> 01:08:08,580
kita boleh lihat sekarang bahawa apabila saya mula menaip sesuatu seperti MSFT,

1104
01:08:08,580 --> 01:08:11,220
kita tidak lagi mendapat hanya stok simbol,

1105
01:08:11,220 --> 01:08:13,720
kita sedang mendapatkan syarikat-syarikat yang sebenar.

1106
01:08:13,720 --> 01:08:20,410
Tetapi apabila saya klik pada salah satu daripada syarikat-syarikat ini,

1107
01:08:20,410 --> 01:08:25,180
kita dapat melihat bahawa kita sebenarnya populating kotak teks tidak dengan nama syarikat

1108
01:08:25,180 --> 01:08:29,850
tetapi dengan apa yang disimpan di dalam sifat data.

1109
01:08:29,850 --> 01:08:32,880
Dan jadi jika saya benar-benar memeriksa salah satu daripada elemen-elemen ini dengan mengklik kanan

1110
01:08:32,880 --> 01:08:36,200
dan klik Periksa Unsur, kita sebenarnya boleh melihat apa ini kelihatan seperti.

1111
01:08:36,200 --> 01:08:40,290
>> Ingat ini adalah sesuatu yang kita dicipta di dalam itu untuk gelung

1112
01:08:40,290 --> 01:08:42,649
apabila kita telah membina bahawa rentetan HTML.

1113
01:08:42,649 --> 01:08:47,870
Kita boleh lihat di sini bahawa ini data-simbol mempunyai nilai MSFT, yang besar.

1114
01:08:47,870 --> 01:08:49,189
Itulah apa yang kita mengharapkan.

1115
01:08:49,189 --> 01:08:53,170
Itulah simbol dan itulah bagaimana kita mendapat nilai yang kita diperlukan untuk menggunakan

1116
01:08:53,170 --> 01:08:56,140
di dalam kotak teks ini.

1117
01:08:56,140 --> 01:08:58,850
Itu cukup untuk bentuk petikan kerana itulah jenis membosankan.

1118
01:08:58,850 --> 01:09:02,990
Mari kita hanya membuat beberapa penambahbaikan cepat untuk laman portfolio kami.

1119
01:09:02,990 --> 01:09:08,109
Jika anda telah menggunakan CS50 Kewangan untuk seketika dan anda mula membeli dan menjual banyak stok,

1120
01:09:08,109 --> 01:09:11,300
akhirnya jadual ini akan mendapat cukup besar,

1121
01:09:11,300 --> 01:09:13,850
dan anda akan mahu ticker saham, sudah tentu.

1122
01:09:13,850 --> 01:09:20,350
Setelah jadual adalah benar-benar, benar-benar besar, ia boleh berguna untuk pengguna cuba untuk mencari di atasnya.

1123
01:09:20,350 --> 01:09:23,290
Di dalam kotak carian jika saya mula menaip sesuatu seperti Disney

1124
01:09:23,290 --> 01:09:26,359
dan mencari untuk saham Mickey Mouse saya, kita dapat melihat bahawa jadual kini penapisan

1125
01:09:26,359 --> 01:09:28,189
berdasarkan apa yang saya hanya perlu ditaip masuk

1126
01:09:28,189 --> 01:09:31,640
Fungsi ini kelihatan super rumit, tetapi ia adalah benar-benar, benar-benar mudah

1127
01:09:31,640 --> 01:09:33,859
dengan jQuery dan JavaScript.

1128
01:09:33,859 --> 01:09:39,189
Fail ini portfolio.php termasuk fail JavaScript dipanggil portfolio.js.

1129
01:09:39,189 --> 01:09:41,130
Mari kita lihat pada itu.

1130
01:09:41,130 --> 01:09:44,890
Jadi html, js, portfolio.

1131
01:09:44,890 --> 01:09:49,210
Berikut adalah di mana kita lakukan bahawa mencari di atas meja.

1132
01:09:49,210 --> 01:09:52,750
Perkara pertama yang saya perlu lakukan adalah melampirkan pengendali acara untuk kotak teks yang

1133
01:09:52,750 --> 01:09:55,760
kerana kita tahu bahawa kita mahu fungsi kami penapisan untuk api

1134
01:09:55,760 --> 01:09:59,800
setiap kali pengguna menekan sesuatu kerana kita tidak mempunyai masa untuk butang Cari.

1135
01:09:59,800 --> 01:10:03,000
Perkara pertama yang perlu kita lakukan adalah memikirkan apa yang pengguna mencari,

1136
01:10:03,000 --> 01:10:04,780
seperti yang kita lakukan sebelum ini.

1137
01:10:04,780 --> 01:10:11,320
Kata kunci ini merujuk kepada elemen semasa pengguna berinteraksi dengan.

1138
01:10:11,320 --> 01:10:14,070
>> Kerana pengguna berinteraksi dengan kotak carian,

1139
01:10:14,070 --> 01:10:17,020
$ Ini mewakili kotak carian,

1140
01:10:17,020 --> 01:10:21,820
jadi this.val memberikan kita apa yang di dalam kotak carian pengguna sedang menaip.

1141
01:10:22,810 --> 01:10:27,320
Jadi, sekarang apa yang kita mahu lakukan kita mahu untuk melelar semua baris

1142
01:10:27,320 --> 01:10:29,240
di dalam jadual kami.

1143
01:10:29,240 --> 01:10:35,630
Untuk memilih semua baris dalam jadual kami, saya memberi jadual yang ID portfolio jadual,

1144
01:10:35,630 --> 01:10:39,060
dan setiap baris diwakili oleh unsur TR,

1145
01:10:39,060 --> 01:10:42,080
jadi pemilih ini akan kembali kepada saya pelbagai besar

1146
01:10:42,080 --> 01:10:44,370
semua baris dalam jadual saya.

1147
01:10:44,370 --> 01:10:47,010
Sekarang saya mahu melelar pelbagai bahawa.

1148
01:10:47,010 --> 01:10:52,390
Saya boleh anda untuk gelung, tetapi jQuery sebenarnya memberikan kita fungsi bagus yang dipanggil "setiap."

1149
01:10:52,390 --> 01:10:55,220
Setiap apa yang tidak adalah masing-masing mengambil satu hujah,

1150
01:10:55,220 --> 01:10:57,090
dan hujah yang fungsi.

1151
01:10:57,090 --> 01:11:02,760
Apa yang ia akan lakukan ialah ia akan memohon fungsi itu kepada setiap elemen di dalam senarai ini.

1152
01:11:02,760 --> 01:11:05,550
Fungsi ini mengambil satu hujah bahawa e,

1153
01:11:05,550 --> 01:11:10,090
dan apabila fungsi ini dilaksanakan, e ini akan digantikan dengan baris pertama,

1154
01:11:10,090 --> 01:11:12,070
maka baris kedua, dan kemudian barisan ketiga.

1155
01:11:12,070 --> 01:11:15,150
Dengan cara ini, ini adalah perkara yang sama seperti berjalan untuk gelung

1156
01:11:15,150 --> 01:11:21,360
dan kemudian memikirkan elemen semasa berdasarkan dalam indeks anda untuk gelung.

1157
01:11:21,360 --> 01:11:24,750
Pada setiap lelaran, bagi setiap unsur-unsur dalam jadual,

1158
01:11:24,750 --> 01:11:30,560
Saya mahu untuk memeriksa jika teks unsur - teks sel di dalam saf -

1159
01:11:30,560 --> 01:11:33,130
sepadan dengan apa yang saya mencari.

1160
01:11:33,130 --> 01:11:36,390
Rentetan ini besar panjang arahan adalah bagaimana saya boleh melakukannya.

1161
01:11:36,390 --> 01:11:40,900
Pertama, sekali lagi, ini sekarang merujuk kepada - kerana ia adalah dalam fungsi baru -

1162
01:11:40,900 --> 01:11:45,020
ini kini baris semasa dalam jadual.

1163
01:11:45,020 --> 01:11:47,340
Saya ingin mengambil baris semasa dalam jadual,

1164
01:11:47,340 --> 01:11:49,950
dan saya mahu mendapatkan semua kanak-kanak.

1165
01:11:49,950 --> 01:11:51,940
Ingat, DOM adalah pokok hierarki,

1166
01:11:51,940 --> 01:11:54,200
yang bermaksud bahawa unsur-unsur mempunyai bilangan kanak-kanak.

1167
01:11:54,200 --> 01:12:00,180
>> Fungsi ini kanak-kanak akan kembali kepada saya kembali pelbagai semua unsur-unsur

1168
01:12:00,180 --> 01:12:03,240
yang adalah anak-anak, dalam kes ini, satu baris dalam jadual.

1169
01:12:03,240 --> 01:12:07,150
Ini adalah hanya sel-sel di dalam baris.

1170
01:12:07,150 --> 01:12:09,230
Saya hanya mahu mencari lebih sel pertama.

1171
01:12:09,230 --> 01:12:13,090
Fungsi pertama mengatakan memberi saya elemen pertama dalam pelbagai itu.

1172
01:12:13,090 --> 01:12:17,070
Kemudian fungsi teks mengatakan mendapatkan saya apa yang di dalam sel yang

1173
01:12:17,070 --> 01:12:19,530
kerana saya ingin untuk mencari atas teks itu.

1174
01:12:19,530 --> 01:12:21,040
Akhirnya, mari kita menukar kepada huruf kecil,

1175
01:12:21,040 --> 01:12:23,940
supaya kita boleh melakukan pertanyaan kes teks tidak sensitif.

1176
01:12:23,940 --> 01:12:29,990
Akhirnya, kita mahu melihat jika itu rentetan dalam jadual mengandungi rentetan kita sedang mencari.

1177
01:12:29,990 --> 01:12:32,980
Fungsi indexOf dalam menutup tidak hanya itu.

1178
01:12:32,980 --> 01:12:37,060
Ia memberitahu kita sama ada atau tidak rentetan ini mengandungi rentetan yang lain.

1179
01:12:37,060 --> 01:12:40,150
Jika ia adalah benar bahawa sel mengandungi apa yang saya mencari,

1180
01:12:40,150 --> 01:12:42,140
maka saya ingin memastikan bahawa ia ditunjukkan.

1181
01:12:42,140 --> 01:12:45,330
Kaedah menunjukkan akan berkata, "Papar unsur."

1182
01:12:45,330 --> 01:12:50,350
Jika ini tidak berlaku, maka itu bermakna apa sahaja yang saya mencari tidak terkandung

1183
01:12:50,350 --> 01:12:53,550
dalam barisan itu, dan jadi saya mahu menyembunyikan daripada pengguna.

1184
01:12:53,550 --> 01:12:59,240
Yang mencapai penapisan bahawa kesan yang baik di mana tiada lagi kita lihat keseluruhan jadual.

1185
01:12:59,240 --> 01:13:01,480
Jika anda berminat dalam bagaimana untuk membuat ini ticker serta,

1186
01:13:01,480 --> 01:13:04,180
kami akan hantar sumber talian. Tetapi ia adalah benar-benar mudah.

1187
01:13:04,180 --> 01:13:09,860
JQuery mempunyai kaedah yang hebat untuk animasi dan memanipulasi CSS hartanah.

1188
01:13:09,860 --> 01:13:11,020
Jadi, itulah bagi saya.

1189
01:13:11,020 --> 01:13:15,560
>> Apa pula terletak di hadapan? Seperti yang anda akan lihat dalam beberapa hari, cadangan projek akhir adalah disebabkan.

1190
01:13:15,560 --> 01:13:17,730
Cadangan projek akhir akan meminta anda beberapa soalan,

1191
01:13:17,730 --> 01:13:19,420
tetapi di kalangan mereka akan tiga peristiwa penting -

1192
01:13:19,420 --> 01:13:22,840
1 "baik" Kejayaan, salah satu pencapaian yang lebih baik, dan salah satu yang terbaik.

1193
01:13:22,840 --> 01:13:25,870
Idea yang benar-benar untuk membantu anda semua menetapkan jangkaan anda

1194
01:13:25,870 --> 01:13:29,160
supaya minimum anda akan gembira dengan output projek akhir anda

1195
01:13:29,160 --> 01:13:32,060
dan ia akan menjadi "baik" setakat yang anda bimbang.

1196
01:13:32,060 --> 01:13:34,540
Tetapi kemudian dalam kepentingan mendapatkan anda untuk mencapai hanya sedikit kepada sesuatu yang lebih baik

1197
01:13:34,540 --> 01:13:37,680
atau sesuatu yang terbaik, kita juga akan menyusun menolak anda ke arah itu juga.

1198
01:13:37,680 --> 01:13:40,660
CS50 Hack-a-thon Sementara itu, dalam beberapa minggu.

1199
01:13:40,660 --> 01:13:44,340
Biasanya, kita lakukan ini atas dasar asas loteri kerana minat,

1200
01:13:44,340 --> 01:13:47,680
tetapi kemungkinan kita akan mengambil beberapa ratus kita dalam bas ulang-alik dari Harvard Square

1201
01:13:47,680 --> 01:13:51,540
ke Kendall Square di mana Microsoft mempunyai kemudahan indah tepat dipanggil "nerd" -

1202
01:13:51,540 --> 01:13:53,830
Penyelidikan New England dan Pusat Pembangunan.

1203
01:13:53,830 --> 01:13:56,380
Kita akan sampai ke sana sekitar 8 malam Kami akan mempunyai beberapa makanan.

1204
01:13:56,380 --> 01:13:58,160
Sekitar 1:00 kami akan mempunyai beberapa lagi makanan.

1205
01:13:58,160 --> 01:14:02,150
Sekitar 5 pagi jika anda masih berjaga, kami akan menuju ke bredden atau membawa anda kembali ke kampus.

1206
01:14:02,150 --> 01:14:04,380
Objektif terdapat untuk menyelam ke dalam projek-projek akhir

1207
01:14:04,380 --> 01:14:06,190
bersama-sama rakan sekelas dan kakitangan.

1208
01:14:06,190 --> 01:14:08,280
Kemudian beberapa hari kemudian Fair CS50,

1209
01:14:08,280 --> 01:14:10,990
yang benar-benar bertujuan untuk menjadi peluang untuk anda semua untuk mempamerkan kerja anda

1210
01:14:10,990 --> 01:14:12,700
dan pencapaian bagi semester

1211
01:14:12,700 --> 01:14:15,610
sambil menggosok bahu dengan satu sama lain dan mendapatkan rasa apa yang semua orang lakukan.

1212
01:14:15,610 --> 01:14:17,850
Dengan itu berkata, terima kasih banyak kepada Tommy dan kepada Yusuf,

1213
01:14:17,850 --> 01:14:19,960
dan kita akan melihat anda pada hari Isnin.

1214
01:14:19,960 --> 01:14:24,070
 [Tepukan]