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

2
00:00:02,700 --> 00:00:05,160
[David J. Malan - Universitas 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 minggu 9. Terima kasih banyak.

5
00:00:13,340 --> 00:00:15,310
Akhirnya. Minggu 9. Aku mendapatkannya.

6
00:00:15,310 --> 00:00:18,590
Hari ini kita melanjutkan pembicaraan kita tentang pemrograman web

7
00:00:18,590 --> 00:00:21,660
dengan mata ke arah proyek akhir, bukan karena Anda harus melakukan sesuatu berbasis web

8
00:00:21,660 --> 00:00:25,610
untuk proyek-proyek akhir tetapi karena baik untuk proyek akhir atau setelah CS50

9
00:00:25,610 --> 00:00:29,000
ini tentu arah di mana perangkat lunak modern yang terjadi.

10
00:00:29,000 --> 00:00:31,770
Namun itu tidak benar-benar suatu hal yang mudah.

11
00:00:31,770 --> 00:00:35,040
Bahkan, salah satu hal yang paling sulit untuk dilakukan adalah aspek desain.

12
00:00:35,040 --> 00:00:38,600
>> Misalnya, dengan desain berarti kita benar-benar mendapatkan user interface

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

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

15
00:00:43,200 --> 00:00:45,960
ketika beberapa dari Anda ditayangkan keluhan Anda tentang beberapa bagian dari perangkat lunak

16
00:00:45,960 --> 00:00:49,000
atau perangkat keras yang membuat marah Anda, baik di kampus atau off -

17
00:00:49,000 --> 00:00:51,930
ada banyak situs di luar sana, ada banyak perangkat keras di luar sana,

18
00:00:51,930 --> 00:00:53,900
semacam itu menyebalkan.

19
00:00:53,900 --> 00:00:58,730
Tetapi kenyataannya adalah bahwa membuat hal-hal yang mudah digunakan namun yang tetap kuat

20
00:00:58,730 --> 00:01:00,550
adalah tantangan yang sangat sulit.

21
00:01:00,550 --> 00:01:03,680
Jadi untuk hari ini saya meminta Yusuf dan Tommy untuk bergabung dengan saya di sini

22
00:01:03,680 --> 00:01:06,680
sehingga kita dapat memiliki percakapan, baik mengenai desain

23
00:01:06,680 --> 00:01:09,090
dan apa jenis proses berpikir harus mulai akan melalui kepala Anda

24
00:01:09,090 --> 00:01:12,040
ketika Anda merancang proyek akhir Anda, usaha masa depan Anda.

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

26
00:01:15,040 --> 00:01:18,440
Bagaimana Anda bisa memiliki beberapa penglihatan di atas kertas atau dalam pikiran Anda

27
00:01:18,440 --> 00:01:20,760
yang kemudian dapat mengeksekusi pemrograman

28
00:01:20,760 --> 00:01:24,030
dengan menggunakan beberapa teknologi dan teknik yang baru saja kita mulai berbicara tentang,

29
00:01:24,030 --> 00:01:29,080
yaitu JavaScript dan sesuatu yang bahkan lebih baru, yaitu AJAX, JavaScript asynchronous.

30
00:01:29,080 --> 00:01:32,950
Yang memungkinkan Anda untuk membuat semua lebih dinamis dari antarmuka pengguna

31
00:01:32,950 --> 00:01:35,780
dengan mengambil data yang lebih banyak dan lebih progresif dari server.

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

33
00:01:38,560 --> 00:01:41,800
Sebagai samping, jika Anda tertarik untuk berkonsentrasi dalam ilmu komputer

34
00:01:41,800 --> 00:01:45,010
atau minoring dalam ilmu komputer, tahu bahwa Jumat ini pada siang hari

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

36
00:01:48,750 --> 00:01:50,780
di mana Anda dapat mempelajari lebih banyak tentang ilmu komputer.

37
00:01:50,780 --> 00:01:54,860
Di jalan keluar pintu hari ini Anda akan dapat mengambil sebuah panduan tidak resmi ke CS di Harvard.

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

39
00:01:57,290 --> 00:01:59,750
sehingga jika Anda ingin ambil ini dan belajar sedikit lebih banyak tentang CS,

40
00:01:59,750 --> 00:02:02,480
yang akan berada di sana untuk Anda seperti di minggu 0.

41
00:02:02,480 --> 00:02:06,500
Juga jika Anda ingin bergabung dengan kami untuk makan siang CS50 Jumat ini di 1:15 pm,

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

43
00:02:09,800 --> 00:02:13,260
Tanpa basa-basi lagi, saya memberikan pengajaran sesama Joseph Ong.

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

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

46
00:02:20,770 --> 00:02:24,780
Pertama kali saya belajar tentang desain berada di kelas yang di sini disebut CS179.

47
00:02:24,780 --> 00:02:28,040
>> Profesor pada saat itu mengatakan kepada kami kisah tentang dosen lain

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

49
00:02:31,640 --> 00:02:35,630
Bisa ada yang bilang padaku apa yang 2 tombol di sebelah kiri dan kanan lakukan?

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

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

52
00:02:41,430 --> 00:02:46,960
Ini profesor setelah menggunakan keran ingin mandi, dan ia melanjutkan untuk menggunakan ini.

53
00:02:46,960 --> 00:02:51,310
Menurutnya kiri dan sisi kanan adalah untuk panas dan dingin, kan?

54
00:02:51,310 --> 00:02:55,470
Tapi bisa ada yang bilang padaku apa yang benar-benar melakukannya?

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

56
00:02:58,060 --> 00:03:01,740
[Respon siswa terdengar] >> Salah satu saran adalah?

57
00:03:01,740 --> 00:03:05,860
[Respon siswa terdengar] Suhu >>?

58
00:03:05,860 --> 00:03:10,460
Jadi salah satu dari mereka mengontrol suhu dan kontrol lainnya? >> [Mahasiswa] Tekanan air.

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

60
00:03:12,350 --> 00:03:15,100
Professor ini berjalan ke dalam ini dan, berpikir mereka mengendalikan panas dan dingin,

61
00:03:15,100 --> 00:03:21,470
ternyata yang benar, yang menurutnya adalah untuk panas, sepanjang jalan sampai

62
00:03:21,470 --> 00:03:23,560
karena dia ingin mengambil mandi hangat.

63
00:03:23,560 --> 00:03:28,100
Nah, ini tidak benar-benar cocok, sehingga dia mendapat pengalaman ini tidak sangat menyenangkan

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

65
00:03:31,110 --> 00:03:33,620
Ini adalah contoh dari sebuah cacat desain.

66
00:03:33,620 --> 00:03:37,040
Yang saya maksud dengan itu adalah harapannya dari keran

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

68
00:03:39,420 --> 00:03:41,780
yang merupakan jenis disayangkan untuknya.

69
00:03:41,780 --> 00:03:44,990
Jadi ini adalah contoh dari sebuah cacat desain yang terjadi dalam kehidupan nyata.

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

71
00:03:48,020 --> 00:03:50,390
Kita mungkin tidak penggemar dari sistem MBTA.

72
00:03:50,390 --> 00:03:55,560
Ini adalah sistem kereta bawah tanah sebenarnya di London, yang mengatakan, "Tombol ini tidak digunakan."

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

74
00:04:00,220 --> 00:04:02,810
Ketika aku masih kecil, menjadi orang tech savvy di rumah,

75
00:04:02,810 --> 00:04:05,050
setiap kali komputer akan crash, ibuku akan datang kepada saya,

76
00:04:05,050 --> 00:04:07,060
menunjukkan kepada saya layar ini dan bertanya padaku apa yang terjadi.

77
00:04:07,060 --> 00:04:09,210
>> Bahkan aku tidak tahu apa artinya ini.

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

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

80
00:04:18,720 --> 00:04:23,050
Kadang-kadang kita merasa seperti pengembang perangkat lunak hanya trolling kita.

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

82
00:04:28,460 --> 00:04:32,140
Ini semua bermuara pada masalah desain.

83
00:04:32,140 --> 00:04:34,650
Desain, seperti yang kita bisa lihat, tidak murni tentang estetika,

84
00:04:34,650 --> 00:04:37,230
ini bukan tentang bagaimana hal-hal terlihat.

85
00:04:37,230 --> 00:04:41,720
Kita lihat di sini bahwa ini sedikit pop-up di sini benar-benar terlihat cukup bagus.

86
00:04:41,720 --> 00:04:45,290
Memiliki drop shadow di latar belakang, ia memiliki radiuses perbatasan terjadi.

87
00:04:45,290 --> 00:04:47,550
Ini semacam cantik.

88
00:04:47,550 --> 00:04:51,480
Ini tidak benar-benar dirancang dengan baik karena tidak sangat user friendly.

89
00:04:51,480 --> 00:04:54,920
Itu sedikit pop-up yang muncul tidak benar-benar memberikan informasi apapun

90
00:04:54,920 --> 00:04:58,450
tentang apa yang terjadi, ia tidak memberitahu apa-apa sebagai pengguna

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

92
00:05:01,400 --> 00:05:05,190
Kami ingin untuk berpikir tentang hal-hal yang desain tidak.

93
00:05:05,190 --> 00:05:06,670
Pertama, itu bukan estetika.

94
00:05:06,670 --> 00:05:10,800
Ini juga tidak memasukkan aplikasi Anda dengan ton fungsi yang tidak perlu.

95
00:05:10,800 --> 00:05:14,890
Jika Anda restoran Thailand, Anda mungkin tidak ingin menjadi seorang dokter gigi pada waktu yang sama.

96
00:05:14,890 --> 00:05:17,720
Dan dengan Pertanyaan Facebook, tidak banyak orang menggunakannya

97
00:05:17,720 --> 00:05:21,130
dan itu tidak benar-benar pada inti dari apa yang mereka sedang membangun.

98
00:05:21,130 --> 00:05:24,200
Dan jadi itu bagus untuk berpikir tentang tidak begitu banyak jumlah hal-hal

99
00:05:24,200 --> 00:05:26,390
bahwa Anda menempatkan ke aplikasi Anda, tetapi kualitas

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

101
00:05:28,910 --> 00:05:32,540
dengan benar-benar meningkatkan pada apa yang sudah Anda miliki.

102
00:05:32,540 --> 00:05:37,040
>> Singkatnya, desain memberitahu kita apa yang kita harus membangun.

103
00:05:37,040 --> 00:05:41,950
Sebagai contoh, jika kita sedang membangun sesuatu yang mari kita mencari hal-hal,

104
00:05:41,950 --> 00:05:45,970
seperti Google, misalnya, kita harus melakukan hal-hal dengan cara

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

106
00:05:48,950 --> 00:05:52,580
atau sebaiknya kita melakukannya dengan cara, misalnya, dengan Google Instan atau autocomplete

107
00:05:52,580 --> 00:05:54,970
yang memungkinkan kita mendapatkan hasil kita lebih cepat?

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

109
00:05:58,740 --> 00:06:01,890
Ada banyak jenis desain.

110
00:06:01,890 --> 00:06:06,070
Misalnya, jika Anda sedang membangun sesuatu untuk menyebarkan sesuatu

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

112
00:06:09,770 --> 00:06:11,440
Anda harus merancang apa yang Anda sedang membangun

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

114
00:06:14,210 --> 00:06:18,290
Tapi apa macam keputusan desain lain mungkin ada

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

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

117
00:06:25,660 --> 00:06:37,200
[Respon siswa terdengar] Kanan >>. Tepat. Aksesibilitas adalah satu hal.

118
00:06:37,200 --> 00:06:40,870
Banyak orang tidak berpikir tentang, "Bagaimana dengan pengguna saya?"

119
00:06:40,870 --> 00:06:43,160
seperti ekstrem dari spektrum baik.

120
00:06:43,160 --> 00:06:47,770
Saya memiliki pengguna yang mungkin memiliki cacat bahwa aku tidak berpikir tentang

121
00:06:47,770 --> 00:06:50,590
dan aku hanya berpikir tentang merancang untuk pengguna umum.

122
00:06:50,590 --> 00:06:52,630
Internet dapat diakses oleh semua orang saat ini,

123
00:06:52,630 --> 00:06:54,870
dan saya harus merancang untuk orang-orang juga.

124
00:06:54,870 --> 00:06:58,620
Apa macam keputusan desain lain mungkin Anda buat?

125
00:06:58,620 --> 00:07:00,690
Ya. >> [Mahasiswa] Biaya.

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

127
00:07:02,680 --> 00:07:08,060
Hal lain yang mungkin kita mendasarkan keputusan kami pada desain adalah biaya.

128
00:07:08,060 --> 00:07:13,130
Jika kita bisnis, Anda ingin membangun sesuatu yang tidak mengambil biaya banyak untuk menghasilkan

129
00:07:13,130 --> 00:07:17,720
tetapi bisa menjual dengan biaya yang sangat tinggi atau bisa mendapatkan beberapa keuntungan kita.

130
00:07:17,720 --> 00:07:21,540
>> Ini semua adalah jenis desain, tetapi ketika kita sedang membangun sesuatu di Internet

131
00:07:21,540 --> 00:07:25,120
atau ketika kita sedang membangun sesuatu yang mungkin tidak biaya yang banyak untuk membangun sekarang,

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

133
00:07:28,630 --> 00:07:30,900
untuk membuat sesuatu yang benar-benar bekerja -

134
00:07:30,900 --> 00:07:33,490
apa yang kita lebih khawatir tentang adalah pengalaman pengguna.

135
00:07:33,490 --> 00:07:36,390
Kami menyebutnya desain user berpusat.

136
00:07:36,390 --> 00:07:41,550
Pada dasarnya apa yang pengguna desain yang berpusat melibatkan adalah menempatkan diri pada posisi pengguna Anda.

137
00:07:41,550 --> 00:07:44,870
Jika seseorang sign up untuk apa yang saya sedang membangun,

138
00:07:44,870 --> 00:07:48,250
mereka sudah jelas datang ke aplikasi tertentu saya dengan tujuan dalam pikiran,

139
00:07:48,250 --> 00:07:50,280
dengan tugas mereka ingin menyelesaikan.

140
00:07:50,280 --> 00:07:53,650
Dan pekerjaan Anda tidak hanya untuk membantu mereka menyelesaikan tugas yang

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

142
00:07:57,930 --> 00:08:01,900
dan, seperti yang beberapa orang mengatakan di sana, dapat diakses.

143
00:08:01,900 --> 00:08:03,750
Apa artinya efisiensi?

144
00:08:03,750 --> 00:08:08,050
Efisiensi berarti seberapa cepat pengguna tidak saya menyelesaikan tugas yang diberikan antarmuka saya.

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

146
00:08:11,650 --> 00:08:14,630
Apakah itu membosankan? Apakah mereka harus melakukan banyak tugas yang berulang?

147
00:08:14,630 --> 00:08:17,140
Kami ingin membuat proses yang seefisien mungkin

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

149
00:08:20,070 --> 00:08:24,230
Adapun intuitif, yaitu, misalnya, jika pengguna mendongak antarmuka saya,

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

151
00:08:27,240 --> 00:08:30,390
Apakah mudah bagi mereka untuk mencari tahu apa yang mereka harus klik pada antarmuka saya

152
00:08:30,390 --> 00:08:33,770
dalam rangka bagi mereka untuk mencapai tujuan atau tugas yang ingin mereka capai?

153
00:08:33,770 --> 00:08:37,520
>> Dan akhirnya, sebagai salah satu orang di sana mengatakan, aksesibilitas sangat penting.

154
00:08:37,520 --> 00:08:39,640
[Laki speaker] Muncul dengan aksesibilitas untuk hal-hal seperti visi,

155
00:08:39,640 --> 00:08:42,740
seperti bagaimana saya benar-benar merancang sesuatu untuk seseorang yang buta?

156
00:08:42,740 --> 00:08:46,460
Oh. Bagi orang-orang yang tidak bisa melihat sama sekali, kita memiliki sesuatu yang disebut pembaca layar.

157
00:08:46,460 --> 00:08:49,070
Apa yang harus Anda lakukan adalah Anda harus membangun website Anda dengan cara

158
00:08:49,070 --> 00:08:52,020
bahwa, misalnya, teknologi tertentu apa yang kita sebut -

159
00:08:52,020 --> 00:08:53,590
Ada banyak hal sekarang.

160
00:08:53,590 --> 00:08:55,660
Saya rasa ada pembaca layar JAWS disebut.

161
00:08:55,660 --> 00:08:58,410
Banyak hal-hal ini bergantung pada apa yang kita sebut aturan daerah

162
00:08:58,410 --> 00:09:02,010
dalam rangka untuk membacakan kepada pengguna apa yang ada di halaman.

163
00:09:02,010 --> 00:09:05,480
Bagi orang-orang yang tidak bisa melihat, Anda perlu memastikan bahwa pembaca layar

164
00:09:05,480 --> 00:09:09,130
benar-benar dapat mengambil konten pada halaman dan benar-benar dapat menunjukkan pengguna Anda,

165
00:09:09,130 --> 00:09:13,630
jika Anda tidak dapat melihat, setidaknya Anda masih dapat memahami konten pada halaman.

166
00:09:13,630 --> 00:09:16,190
Ya. Oke.

167
00:09:16,190 --> 00:09:23,410
Cukup berbicara tentang desain yang baik. Mari kita bicara tentang desain yang buruk.

168
00:09:23,410 --> 00:09:25,220
Ini adalah hal-hal yang seharusnya tidak Anda lakukan.

169
00:09:25,220 --> 00:09:27,890
Bisa ada yang bilang padaku tentang pengalaman mereka dengan Craigslist

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

171
00:09:33,690 --> 00:09:36,430
Ya. >> [Mahasiswa] saya pikir ada kata terlalu banyak di satu area.

172
00:09:36,430 --> 00:09:39,350
Terlalu banyak kata, kan? Benar-benar luar biasa.

173
00:09:39,350 --> 00:09:42,400
Anda datang ke halaman ini dan Anda akan disambut dengan sejumlah hal di sini

174
00:09:42,400 --> 00:09:43,860
yang mungkin tidak penting bagi Anda.

175
00:09:43,860 --> 00:09:47,010
Misalnya, Anda tinggal di satu negara yang tidak dimulai dengan huruf ini.

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

177
00:09:48,690 --> 00:09:53,790
>> Anda harus gulir 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 biar terlihat di Massachusetts. Dimana Massachusetts?

179
00:10:00,320 --> 00:10:03,270
Oh, itu ada di sini. Oh, itu Boston. Oke.

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

181
00:10:09,070 --> 00:10:12,250
Cukup luar biasa, kan?

182
00:10:12,250 --> 00:10:16,400
Canggung hal di sana. [Tertawa]

183
00:10:17,320 --> 00:10:19,470
Katakanlah saya sedang mencari tempat tinggal.

184
00:10:19,470 --> 00:10:24,130
Berapa banyak orang yang benar-benar digunakan Craigslist? Ton Anda.

185
00:10:24,130 --> 00:10:30,960
Ada cara yang cukup buruk untuk melihat ini, tapi mari kita lihat ini.

186
00:10:35,130 --> 00:10:38,970
Apa perbedaan antara img dan pic? Bisa ada yang bilang padaku?

187
00:10:41,350 --> 00:10:42,830
Ada sebenarnya tidak ada perbedaan.

188
00:10:42,830 --> 00:10:47,710
Mereka berarti hal yang persis sama, tetapi mereka memiliki label yang berbeda bagi mereka untuk beberapa alasan.

189
00:10:48,980 --> 00:10:53,560
Jika saya klik pada Memiliki Gambar, tidak ada yang terjadi pada halaman.

190
00:10:53,560 --> 00:10:57,490
Saya benar-benar harus klik Search lagi untuk sesuatu terjadi.

191
00:10:57,490 --> 00:11:02,430
Apa yang mungkin menjadi keputusan desain yang lebih baik yang bisa dilakukan di sana?

192
00:11:03,820 --> 00:11:08,030
Jika saya mengklik pada filter itu, saya mungkin ingin untuk menyaring oleh tindakan tertentu

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

194
00:11:09,970 --> 00:11:14,450
Jadi daripada harus tekan Cari lagi, saya bisa saja secara otomatis melakukan penyaringan

195
00:11:14,450 --> 00:11:17,060
semacam gaya Google di mana mereka melakukannya langsung.

196
00:11:17,060 --> 00:11:20,440
[Malan] Tapi jangan bentuk seperti yang kita lihat sejauh ini mereka harus secara fisik diserahkan

197
00:11:20,440 --> 00:11:23,170
dengan menekan Enter setidaknya atau mengklik tombol?

198
00:11:23,170 --> 00:11:26,830
Seperti yang Anda telah melihat mereka sejauh ini, Anda benar-benar harus klik Submit untuk melakukan hal-hal.

199
00:11:26,830 --> 00:11:30,090
>> Tapi seperti Tommy akan menunjukkan Anda dalam kedua, sebenarnya ada cara bagi Anda

200
00:11:30,090 --> 00:11:33,010
seperti bahwa ketika Anda klik pada hal yang secara otomatis dapat mengirim

201
00:11:33,010 --> 00:11:38,840
apa yang kita sebut permintaan AJAX dan mendapatkan data kembali dan menyaring hasil Anda secara instan.

202
00:11:38,840 --> 00:11:41,340
Ada ton hal-hal yang salah dengan antarmuka ini.

203
00:11:41,340 --> 00:11:43,530
[Malan] Dapatkah Anda mencari Cambridge?

204
00:11:43,530 --> 00:11:47,030
Ada sesuatu yang sedikit anomali di sini di mana Anda peduli tentang Cambridge

205
00:11:47,030 --> 00:11:54,790
namun Anda mendapatkan Westford, Spring Hill, West Newton dan sejenisnya.

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

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

208
00:12:03,900 --> 00:12:07,340
Ya. >> [Mahasiswa] Instruksi.

209
00:12:07,340 --> 00:12:09,500
Oke. Instruksi dalam apa jenis akal?

210
00:12:09,500 --> 00:12:14,630
[Mahasiswa] Sebagai contoh, suatu hal untuk pertama kalinya pengguna yang bahkan tidak tahu apa Craigslist adalah

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

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

213
00:12:20,150 --> 00:12:23,490
Kami benar-benar dapat memberitahu pengguna apa halaman ini sebenarnya untuk.

214
00:12:23,490 --> 00:12:27,090
Jika aku hanya mengunjungi ini, saya melihat sejumlah besar lokasi. Aku bahkan tidak tahu apa yang mereka maksud.

215
00:12:27,090 --> 00:12:29,730
Tapi yang lebih penting lagi, hanya melihat antarmuka ini,

216
00:12:29,730 --> 00:12:35,530
ingat aku harus gulir ke bawah satu ton hal untuk menemukan komunitas tertentu

217
00:12:35,530 --> 00:12:37,560
bahwa saya benar-benar peduli tentang hal ini.

218
00:12:37,560 --> 00:12:39,820
Apa cara yang lebih cepat aku bisa melakukan itu? Ya.

219
00:12:39,820 --> 00:12:43,290
[Mahasiswa] Membagi mereka ke timur, wilayah barat. Oke >>.

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

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

222
00:12:49,820 --> 00:12:54,510
[Mahasiswa] Letakkan daftar drop-down. >> Kanan. Oke.

223
00:12:54,510 --> 00:12:58,240
Saya bisa menggunakan menu drop-down karena kita memiliki seperangkat tetap hal-hal

224
00:12:58,240 --> 00:13:00,100
dan kami bisa menampilkannya pada menu drop-down.

225
00:13:00,100 --> 00:13:02,240
Dengan cara itu tidak memakan begitu banyak ruang pada layar.

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

227
00:13:05,630 --> 00:13:09,220
Ya. >> [Respon siswa terdengar] >> Dapatkah Anda mengatakan itu lagi? >> [Mahasiswa] kotak pencarian.

228
00:13:09,220 --> 00:13:11,260
Ya, kotak pencarian. Itu bagus.

229
00:13:11,260 --> 00:13:16,430
Apa yang kita benar-benar dapat lakukan adalah jika kita melihat kembali kotak, pencarian slide.

230
00:13:16,430 --> 00:13:21,520
Autocomplete. Cara yang sangat mudah untuk mencari melalui hasil yang Anda tahu berada dalam satu set.

231
00:13:21,520 --> 00:13:25,980
Jika saya mulai mengetik BO, hanya menunjukkan semua hasil yang telah dalam BO dari mereka.

232
00:13:25,980 --> 00:13:29,030
Dengan begitu aku bisa dengan sangat mudah menemukan satu tertentu saya ingin pergi ke

233
00:13:29,030 --> 00:13:32,390
daripada harus menelusuri daftar ini benar-benar besar.

234
00:13:32,390 --> 00:13:37,450
>> Ini adalah segala macam benar-benar buah tergantung rendah bahwa seseorang yang melaksanakan Craigslist

235
00:13:37,450 --> 00:13:42,500
benar-benar dapat lakukan untuk membuat pengalaman di situs jauh lebih baik untuk pengguna tertentu mereka.

236
00:13:42,500 --> 00:13:46,370
Oke. Cukup berbicara tentang website yang buruk.

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

238
00:13:50,880 --> 00:13:54,390
Ketika Facebook keluar, dan khususnya Facebook Foto,

239
00:13:54,390 --> 00:13:57,870
ada banyak layanan lain pada waktu yang bisa melakukan hal yang persis sama.

240
00:13:57,870 --> 00:14:00,740
Mereka bisa mengatur foto Anda ke dalam album.

241
00:14:00,740 --> 00:14:03,360
Apa yang Anda bisa lakukan adalah Anda bisa mengatur mereka ke dalam set juga.

242
00:14:03,360 --> 00:14:06,070
Anda bisa mengaturnya berdasarkan tanggal. Anda bisa melakukan semua hal tertentu.

243
00:14:06,070 --> 00:14:11,710
Tapi apakah ada yang tahu apa yang membuat Facebook Foto meledak pada saat itu dirilis?

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

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

246
00:14:21,300 --> 00:14:24,810
Anda dapat melihat bahwa kita memiliki fitur tagging di tengah.

247
00:14:24,810 --> 00:14:28,240
Dan apa yang membuat Facebook Foto begitu menarik dari sudut pandang kegunaan

248
00:14:28,240 --> 00:14:34,130
adalah bahwa hal itu benar-benar memungkinkan orang melalui ini untuk melibatkan teman-teman mereka di foto mereka.

249
00:14:34,130 --> 00:14:37,680
Untuk Facebook, karena situs web mereka sangat sosial,

250
00:14:37,680 --> 00:14:40,750
ini tentang membangun semacam ini suasana sosial.

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

252
00:14:42,620 --> 00:14:46,390
karena mereka benar-benar bisa mulai berkata, "Ini adalah hubungan antara orang-orang,

253
00:14:46,390 --> 00:14:49,220
dan ini adalah foto tentang orang-orang yang benar-benar peduli. "

254
00:14:49,220 --> 00:14:52,200
Bagian dari itu juga narsisisme semacam.

255
00:14:52,200 --> 00:14:54,980
Orang-orang ingin diberi tag pada foto dan hal-hal seperti itu.

256
00:14:54,980 --> 00:14:58,510
Sementara itu tidak selalu berarti sifat manusia yang baik,

257
00:14:58,510 --> 00:15:01,910
pada saat yang sama hal ini didasarkan pada keputusan desain yang baik

258
00:15:01,910 --> 00:15:04,860
karena orang benar-benar peduli tentang hal-hal seperti ini.

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

260
00:15:07,190 --> 00:15:09,800
>> Tapi mari kita bicara Facebook lebih umum.

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

262
00:15:13,400 --> 00:15:16,430
baik keputusan desain yang baik dan keputusan desain yang buruk.

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

264
00:15:23,480 --> 00:15:26,450
Ayo. Saya tahu kalian semua menggunakan Facebook.

265
00:15:26,450 --> 00:15:30,970
Seseorang harus memiliki sesuatu yang buruk untuk mengatakan atau sesuatu yang baik untuk mengatakan tentang hal itu. Ya.

266
00:15:30,970 --> 00:15:35,060
[Mahasiswa] Dalam feed berita ada banyak hal yang saya tidak benar-benar peduli.

267
00:15:35,060 --> 00:15:37,740
Feed berita tidak menunjukkan banyak hal yang Anda mungkin tidak peduli.

268
00:15:37,740 --> 00:15:41,660
Anda memiliki teman di Facebook yang Anda belum pernah bertemu selama 2 atau 3 tahun

269
00:15:41,660 --> 00:15:43,860
dan Anda melihat hasil berita bermunculan di feed berita Anda

270
00:15:43,860 --> 00:15:45,870
dan Anda tidak benar-benar peduli tentang hal itu.

271
00:15:45,870 --> 00:15:48,700
Facebook telah benar-benar membuat upaya untuk membuat ini lebih baik,

272
00:15:48,700 --> 00:15:53,150
dan mereka sudah benar-benar mencoba untuk mendorong hasil yang relevan dengan bagian atas feed berita akhir-akhir ini

273
00:15:53,150 --> 00:15:58,300
sehingga Anda benar-benar melihat hal-hal oleh teman-teman yang relevan dengan Anda atau teman dekat Anda.

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

275
00:16:01,110 --> 00:16:06,400
[Respon siswa terdengar] >> Dapatkah Anda mengatakan itu lagi?

276
00:16:06,400 --> 00:16:10,140
[Mahasiswa] Iklan relatif tidak mengganggu. >> Dalam arti apa?

277
00:16:10,140 --> 00:16:16,370
[Respon siswa terdengar] Mereka tidak memiliki cahaya pada layar, seperti spanduk.

278
00:16:16,370 --> 00:16:17,760
Oke. Itu bagus.

279
00:16:17,760 --> 00:16:25,030
Jika Anda ingat internet dari 90 - >> [Malan] aku ada di sana. >> Dia ada di sana. [Tertawa]

280
00:16:25,030 --> 00:16:29,210
Anda mungkin ingat berkedip latar belakang GIF, gemerlapan hal,

281
00:16:29,210 --> 00:16:31,570
GeoCities gaya semacam hal.

282
00:16:31,570 --> 00:16:34,080
Itu benar-benar bukan contoh desain yang baik

283
00:16:34,080 --> 00:16:36,690
karena itu benar-benar mengganggu dari konten.

284
00:16:36,690 --> 00:16:39,590
Seni Yale situs yang digunakan untuk memiliki animasi GIF sebagai latar belakang mereka

285
00:16:39,590 --> 00:16:41,800
dan Anda tidak bisa membaca apapun pada halaman,

286
00:16:41,800 --> 00:16:44,870
tapi kurasa seseorang benar-benar berbicara dengan mereka dan sekarang itu sedikit berbeda.

287
00:16:44,870 --> 00:16:48,940
[Malan] Ini jauh lebih baik sekarang. >> Ini jauh lebih baik sekarang, seperti yang Anda lihat. >> [Malan] Oh yeah.

288
00:16:48,940 --> 00:16:56,020
Hanya besar, hanya - Ya. Oke.

289
00:16:56,020 --> 00:17:00,560
>> Bagian dari itu juga membuat halaman Anda mungkin sangat minimalis dan sangat dimengerti

290
00:17:00,560 --> 00:17:05,690
sehingga hal-hal pada aliran halaman dengan cara yang sangat logis dan tidak mendapatkan di jalan satu sama lain.

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

292
00:17:11,849 --> 00:17:15,730
Mari kita melakukan percakapan desain di sini.

293
00:17:19,470 --> 00:17:21,339
Oh. Dimana? Ya.

294
00:17:21,339 --> 00:17:25,640
[Mahasiswa] Sistem Timeline baru memungkinkan Anda untuk mencari profil seseorang 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 hal yang besar karena memungkinkan Anda tangkai teman Anda

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

298
00:17:35,160 --> 00:17:38,060
Timeline baik karena memungkinkan Anda menyaring melalui konten jauh lebih cepat,

299
00:17:38,060 --> 00:17:41,500
itu memungkinkan Anda menemukan hal-hal yang telah dinyatakan diambil Anda waktu yang sangat lama untuk menemukan

300
00:17:41,500 --> 00:17:45,840
hanya bergulir ke atas dan ke bawah, naik, naik, naik, naik, naik, seperti mundur dalam waktu.

301
00:17:45,840 --> 00:17:48,910
Tapi kemudian ada juga semacam downside untuk itu dalam hal pengalaman pengguna.

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

303
00:17:51,190 --> 00:17:56,780
Kata besar yang dimulai dengan P-R. >> [Mahasiswa] Privasi. >> Privacy, kan?

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

305
00:17:59,970 --> 00:18:07,190
Ini adalah salah satu hal yang saya paling benci tentang Facebook sekarang. [Tertawa]

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

307
00:18:09,000 --> 00:18:11,380
David tidak menyadari hal ini benar-benar terjadi sampai kemarin.

308
00:18:11,380 --> 00:18:14,560
Jadi sekarang dia tahu bahwa setiap kali saya chatting padanya aku tahu dia sudah mengabaikan saya.

309
00:18:14,560 --> 00:18:16,880
[Malan] Bagian canggung itu aku benar-benar mengabaikannya,

310
00:18:16,880 --> 00:18:21,040
dan saya tidak tahu dia tahu aku mengabaikannya. [Tertawa]

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

312
00:18:24,030 --> 00:18:28,670
Dapatkah orang di sini memberitahu saya apa yang mungkin buruk tentang privasi Facebook

313
00:18:28,670 --> 00:18:32,270
selain fakta bahwa mereka melakukan hal-hal seperti ini?

314
00:18:32,270 --> 00:18:37,240
Apa itu sangat sulit untuk dilakukan sehubungan dengan Facebook privasi?

315
00:18:37,240 --> 00:18:40,340
Itu semacam adalah pertanyaan terkemuka.

316
00:18:41,680 --> 00:18:43,930
Ya. >> [Mahasiswa] Sembunyikan foto Anda dari orang-orang tertentu.

317
00:18:43,930 --> 00:18:46,170
Benar. Tepat, untuk menyembunyikan foto Anda dari orang-orang tertentu.

318
00:18:46,170 --> 00:18:51,290
Mereka memiliki tombol ini, kecil kecil di kanan atas yang memungkinkan Anda mengaktifkan privasi foto.

319
00:18:51,290 --> 00:18:56,360
Pilihan privasi mereka sangat bervariasi antara berbagai jenis menu.

320
00:18:56,360 --> 00:18:59,510
>> Mereka sudah mendapatkan jauh lebih baik tentang hal itu baru-baru ini, tapi dulu menjadi kasus

321
00:18:59,510 --> 00:19:04,870
bahwa setiap kali Anda ingin mencegah teman Anda dari foto melihat,

322
00:19:04,870 --> 00:19:08,280
Anda akan harus melalui proses 5-langkah yang sangat rumit menjadi seperti,

323
00:19:08,280 --> 00:19:11,150
biarkan aku klik link ini, sekarang biarkan aku klik lagi, biarkan aku klik lagi,

324
00:19:11,150 --> 00:19:13,420
biarkan aku menentukan orang tidak dapat melihat foto-foto saya.

325
00:19:13,420 --> 00:19:17,250
Itu tidak baik khususnya pada bagian Facebook

326
00:19:17,250 --> 00:19:20,530
karena begitu banyak tentang pengalaman pengguna sebenarnya memberi mereka kebebasan

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

328
00:19:22,460 --> 00:19:25,550
Kami menyebutnya kontrol pengguna dan kebebasan.

329
00:19:25,550 --> 00:19:31,090
Jika Anda tidak membiarkan pengguna Anda melakukannya dengan cara yang efisien dan intuitif,

330
00:19:31,090 --> 00:19:34,570
maka pengalaman pengguna Anda tidak benar-benar besar sekali.

331
00:19:34,570 --> 00:19:38,200
 Apakah kalian ingin mengatakan apa-apa tentang Facebook?

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

333
00:19:41,420 --> 00:19:46,290
[Ong] Anda tidak bisa mematikan ini, dan itu adalah kesalahan besar kegunaan pada bagian dari Facebook.

334
00:19:46,290 --> 00:19:49,410
Fitur ini - Saya benar-benar melihat ke dalamnya kemarin -

335
00:19:49,410 --> 00:19:53,940
itu baik bahwa Anda tidak bisa melakukannya atau itu dikuburkan di suatu tempat yang sangat, sangat dalam

336
00:19:53,940 --> 00:19:58,050
dalam relung Facebook karena saya tidak bisa mencari cara untuk menonaktifkan fungsi ini sama sekali.

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

338
00:20:00,400 --> 00:20:03,890
karena kalian telah memberikan banyak umpan balik yang berguna tentang berbagai aplikasi CS50

339
00:20:03,890 --> 00:20:05,710
dan tentu saja website yang menggunakan.

340
00:20:05,710 --> 00:20:10,260
Kami belum menerapkan semua permintaan dan saran.

341
00:20:10,260 --> 00:20:14,550
>> Bagian dari itu adalah untuk mendapatkan begitu banyak permintaan bahwa itu adalah fungsi waktu,

342
00:20:14,550 --> 00:20:17,070
tapi kadang-kadang kita hanya membuat keputusan sadar seperti,

343
00:20:17,070 --> 00:20:19,830
"Terima kasih untuk saran, tapi kami tidak setuju."

344
00:20:19,830 --> 00:20:24,350
Jadi bagaimana Anda benar-benar memutuskan apa yang harus Anda lakukan jika pengguna Anda pikir Anda harus melakukan sesuatu

345
00:20:24,350 --> 00:20:28,110
bahkan jika Anda tidak selalu?

346
00:20:28,110 --> 00:20:32,360
Ini adalah keseimbangan yang baik antara benar-benar mendengarkan apa yang Anda katakan pengguna

347
00:20:32,360 --> 00:20:35,840
dan benar-benar memiliki semacam garis di mana Anda berkata,

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

349
00:20:37,750 --> 00:20:42,520
Dan khususnya, saya pikir ada sebuah kutipan oleh Henry Ford yang meringkas ini cukup baik.

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

351
00:20:47,130 --> 00:20:51,840
Can anyone semacam menggoda selain apa kutipan yang benar-benar berarti?

352
00:20:51,840 --> 00:20:56,060
Ini bukan hanya bahwa pengguna tahu apa yang mereka inginkan,

353
00:20:56,060 --> 00:20:59,180
tapi lebih bahwa -

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

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

356
00:21:07,880 --> 00:21:11,440
Tease bahwa selain sedikit lebih. Apa yang Anda maksud dengan itu?

357
00:21:11,440 --> 00:21:21,340
[Respon siswa tidak terdengar]

358
00:21:21,340 --> 00:21:25,770
Itu bagus. Apa yang saya pikir kita coba katakan di sini adalah bahwa orang tahu apa yang mereka inginkan.

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

360
00:21:28,050 --> 00:21:29,840
Apa yang mereka inginkan adalah kemampuan untuk bergerak lebih cepat,

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

362
00:21:32,310 --> 00:21:36,330
Ketika Anda datang ke pengguna Anda dan pengguna Anda mengatakan sesuatu

363
00:21:36,330 --> 00:21:39,700
dan mereka memberitahu Anda, "Kami ingin fitur ini dan fitur ini dan fitur ini,"

364
00:21:39,700 --> 00:21:42,650
Anda tidak ingin selalu memikirkan, "Biarkan aku pergi ke depan

365
00:21:42,650 --> 00:21:44,720
"Dan menerapkan apa yang mereka secara eksplisit mengatakan,"

366
00:21:44,720 --> 00:21:48,610
tetapi apa yang Anda ingin untuk berpikir tentang adalah, "Apa macam ide yang bisa saya dapatkan dari itu?"

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

368
00:21:50,450 --> 00:21:55,560
>> Dan dari sana apa yang dapat Anda lakukan adalah merancang sesuatu yang memenuhi permintaan tersebut

369
00:21:55,560 --> 00:22:00,340
tetapi tidak harus dalam cara bahwa pengguna mengharapkan untuk menjadi puas.

370
00:22:00,340 --> 00:22:03,830
Jadi untuk sesuatu seperti proyek akhir, dalam hal yang sangat nyata,

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

372
00:22:07,900 --> 00:22:10,630
terutama jika desainer memiliki arogansi ini tentang dia

373
00:22:10,630 --> 00:22:14,360
dimana Anda semacam tahu apa yang terbaik, Anda dapat mengambil masukan dari pengguna Anda,

374
00:22:14,360 --> 00:22:16,580
tapi bagaimana Anda benar-benar pergi tentang mendapatkan umpan balik itu?

375
00:22:16,580 --> 00:22:21,610
Dalam proyek akhir, sangat konkret, apa yang menghasilkan hasil yang optimal di sini?

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

377
00:22:25,030 --> 00:22:29,190
ini proses pengembangan dan kemudian menguji dan kemudian iterasi.

378
00:22:29,190 --> 00:22:32,020
Yang saya maksud dengan pengujian biasanya ketika Anda merancang sesuatu

379
00:22:32,020 --> 00:22:36,970
Anda pikir itu cukup baik, seperti, "Saya seperti seorang desainer yang hebat. Setiap orang akan menyukai ini."

380
00:22:36,970 --> 00:22:41,600
Dan kemudian Anda meletakkannya di luar sana dan orang-orang tidak benar-benar menyukainya karena alasan tertentu.

381
00:22:41,600 --> 00:22:46,820
Apa yang harus Anda lakukan adalah Anda harus mengambil bagian dari hal-hal yang orang lakukan seperti

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

383
00:22:49,180 --> 00:22:53,080
Kedengarannya seperti proses yang sangat jelas, tapi ini proses terus iterasi

384
00:22:53,080 --> 00:22:55,980
di atas apa yang sudah dibangun adalah proses yang membantu Anda

385
00:22:55,980 --> 00:22:59,730
tidak hanya memperbaiki kemampuan Anda sendiri desain, tetapi juga membantu Anda menyempurnakan desain

386
00:22:59,730 --> 00:23:03,790
sehingga orang benar-benar menghargai produk Anda bahkan lebih dari yang mereka lakukan sebelumnya.

387
00:23:03,790 --> 00:23:07,390
>> Aku akan pergi ke contoh yang lebih konkrit dari apa yang Anda mungkin benar-benar lakukan.

388
00:23:07,390 --> 00:23:11,390
Sebagai semacam contoh terakhir dari produk, mari kita lihat KAYAK.

389
00:23:11,390 --> 00:23:14,970
KAYAK ketika keluar itu sangat, sangat populer.

390
00:23:14,970 --> 00:23:18,760
Adakah yang bisa menebak kenapa?

391
00:23:18,760 --> 00:23:20,950
Apa macam hal yang Anda sukai tentang hal ini jika Anda telah menggunakannya

392
00:23:20,950 --> 00:23:23,990
atau apa saja macam hal yang tidak Anda sukai?

393
00:23:23,990 --> 00:23:31,590
Ya. >> [Respon siswa terdengar] >> Oke.

394
00:23:31,590 --> 00:23:34,730
Itu bagian dari itu adalah membiarkan pengguna memiliki permintaan yang lebih luas

395
00:23:34,730 --> 00:23:38,150
dari yang sangat ketat seperti, "Kamu harus memilih tanggal mulai

396
00:23:38,150 --> 00:23:39,810
"Dan Anda harus memilih tanggal akhir Anda."

397
00:23:39,810 --> 00:23:44,910
Bahkan, itu memungkinkan Anda menjadi fleksibel tentang hal itu dan memberikan Anda semua penerbangan dalam kisaran tersebut.

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

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

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

401
00:23:53,330 --> 00:23:56,720
Pajak dan hal-hal benar-benar pergi langsung ke harga yang di kiri atas

402
00:23:56,720 --> 00:24:00,710
sehingga Anda tidak tertipu untuk berpikir bahwa Anda benar-benar membayar untuk penerbangan $ 240

403
00:24:00,710 --> 00:24:03,280
ketika itu benar-benar $ 330.

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

405
00:24:06,200 --> 00:24:10,140
[Respon siswa tidak terdengar]

406
00:24:10,140 --> 00:24:14,610
Saya tidak yakin apakah mereka benar-benar membiarkan Anda melakukan itu.

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

408
00:24:18,310 --> 00:24:23,360
Itu mungkin menjadi hal yang menarik jika Anda ingin menempatkan lebih berat pada filter tertentu

409
00:24:23,360 --> 00:24:27,000
sehingga mereka mendorong hasil yang terkait dengan saringan ke atas.

410
00:24:27,000 --> 00:24:31,920
Tapi bisa ada yang bilang padaku apa yang begitu istimewa tentang sisi kiri?

411
00:24:31,920 --> 00:24:39,540
Bagaimana Anda biasanya mencari penerbangan pada layanan internet sebelum ini?

412
00:24:41,600 --> 00:24:44,650
>> Ya. >> [Respon siswa terdengar] >> Dapatkah Anda mengatakan bahwa -

413
00:24:44,650 --> 00:24:47,530
[Mahasiswa] Setiap maskapai penerbangan. >> Ya. Setiap maskapai penerbangan memiliki website sendiri.

414
00:24:47,530 --> 00:24:50,110
Ini mengkonsolidasikan hal. Dan?

415
00:24:50,110 --> 00:24:52,190
[Mahasiswa] Anda tahu persis apa waktu Anda akan pergi.

416
00:24:52,190 --> 00:24:54,460
Anda tahu persis apa waktu Anda meninggalkan,

417
00:24:54,460 --> 00:24:59,380
namun terkait dengan filter pada khususnya.

418
00:25:00,710 --> 00:25:03,540
Biarkan saya berhenti KAYAK.

419
00:25:11,490 --> 00:25:14,020
Oh Tuhan, pop-up. Pengalaman pengguna yang buruk.

420
00:25:14,020 --> 00:25:17,230
Apa yang terjadi ketika saya memindahkan slider ini?

421
00:25:17,230 --> 00:25:21,010
[Mahasiswa] Pembaruan otomatis. >> [Ong] update otomatis.

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

423
00:25:23,440 --> 00:25:25,380
Sebelum ini, setiap kali Anda ingin mencari penerbangan,

424
00:25:25,380 --> 00:25:28,410
Anda harus dimasukkan ke dalam lokasi masukan Anda, lokasi output Anda, tekan Cari,

425
00:25:28,410 --> 00:25:31,190
akan memproses dan menampilkan hasil pencarian.

426
00:25:31,190 --> 00:25:34,120
Jika Anda ingin mengubah permintaan Anda, Anda akan harus menekan kembali dua kali,

427
00:25:34,120 --> 00:25:39,770
masuk dalam permintaan baru dari awal, dan kemudian melakukannya lagi dan lagi.

428
00:25:39,770 --> 00:25:43,910
Yang menyenangkan tentang sesuatu seperti ini adalah menggunakan hal yang sangat [dimengerti] di tengah.

429
00:25:43,910 --> 00:25:46,230
Setiap kali Anda melakukan sesuatu seperti ini, ia tiba-tiba permintaan

430
00:25:46,230 --> 00:25:48,420
dan ia mengembalikan Anda semua hasil dengan segera.

431
00:25:48,420 --> 00:25:51,680
Ini semacam umpan balik langsung adalah sesuatu yang membuat KAYAK sangat populer

432
00:25:51,680 --> 00:25:55,910
karena itu benar-benar mudah bagi saya untuk hanya mengubah pertanyaan saya

433
00:25:55,910 --> 00:25:58,890
dan untuk mengetahui hal-hal yang ada di sekitar rentang tertentu

434
00:25:58,890 --> 00:26:01,950
tanpa harus bolak-balik, bolak-balik, bolak-balik.

435
00:26:01,950 --> 00:26:05,200
Jadi ini adalah segala macam hal yang ingin Anda pikirkan ketika Anda sedang merancang situs web Anda.

436
00:26:05,200 --> 00:26:08,930
Bagaimana saya bisa membuatnya sangat efisien untuk pengguna saya untuk pergi melalui apa pun yang mereka kerjakan

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

438
00:26:13,010 --> 00:26:16,430
[Malan] Dan titik Yusuf sebelumnya tentang pengguna tidak selalu mengetahui apa yang mereka inginkan,

439
00:26:16,430 --> 00:26:18,640
berdasarkan apa yang kalian ketahui tentang HTML

440
00:26:18,640 --> 00:26:22,780
dan Anda memiliki kotak centang, tombol radio, menu pilih, field input dan sejenisnya,

441
00:26:22,780 --> 00:26:26,140
bagaimana Anda akan menerapkan gagasan memilih waktu mulai untuk penerbangan?

442
00:26:26,140 --> 00:26:30,030
>> Mana yang mekanisme UI berbagai yang akan Anda gunakan?

443
00:26:30,030 --> 00:26:34,100
Jika Anda hanya tahu jumlah HTML yang diajarkan sebelumnya

444
00:26:34,100 --> 00:26:39,070
dan Anda tahu input tombol radio, kotak centang, drop-down, dan kotak input,

445
00:26:39,070 --> 00:26:43,320
apa yang akan pilihan alami Anda telah untuk memilih tanggal?

446
00:26:43,320 --> 00:26:48,670
[Mahasiswa] Input. >> Masukan. Atau mungkin bahkan drop-down dengan semua tanggal, kan?

447
00:26:48,670 --> 00:26:53,170
Jadi dengan mekanisme UI lebih kompleks seperti ini di sisi kiri yang dapat menerapkan,

448
00:26:53,170 --> 00:26:55,500
Anda dapat membuat proses ini lebih intuitif dengan slider

449
00:26:55,500 --> 00:27:01,020
karena waktu kontinu, dan orang biasanya tidak berpikir tentang hal itu dalam pengertian potongan diskrit.

450
00:27:01,020 --> 00:27:04,950
Baiklah. Terakhir hal.

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

452
00:27:07,370 --> 00:27:10,820
Semua hal yang kita bicarakan mungkin termasuk dalam salah satu kategori ini.

453
00:27:10,820 --> 00:27:14,420
Jika Anda pergi ke link ini, dimana situs akan diposting online,

454
00:27:14,420 --> 00:27:18,900
Anda benar-benar akan bisa, karena Anda merancang situs Anda, menjaga heuristik dalam pikiran

455
00:27:18,900 --> 00:27:21,330
dan ini aturan praktis.

456
00:27:21,330 --> 00:27:26,610
Untuk proyek Anda, apa yang saya sarankan Anda lakukan dalam rangka untuk merancang aplikasi Anda lebih baik

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

458
00:27:28,850 --> 00:27:32,150
Ketika Anda berpikir tentang aplikasi Anda, sangat cepat sketsa apa yang Anda inginkan untuk terlihat seperti

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

460
00:27:36,230 --> 00:27:39,820
dan bahkan menunjukkan prototipe kertas ini ke teman-teman Anda dan mulai kelompok fokus.

461
00:27:39,820 --> 00:27:44,230
Hanya mendapatkan 2 atau 3 orang bersama-sama dan meminta mereka untuk hanya tekan atas prototipe kertas,

462
00:27:44,230 --> 00:27:47,650
dan menunjukkan kepada mereka layar baru untuk melihat apakah mereka benar-benar memahami apa yang terjadi.

463
00:27:47,650 --> 00:27:50,680
>> Apa yang ingin Anda lakukan adalah memberi mereka tugas, memotivasi tugas itu,

464
00:27:50,680 --> 00:27:53,270
dan hanya memberi mereka aplikasi dan membiarkan mereka menggunakannya.

465
00:27:53,270 --> 00:27:56,530
Jangan memberi mereka petunjuk di luar itu.

466
00:27:56,530 --> 00:28:00,920
Anda ingin benar-benar membiarkan mereka berinteraksi dengan aplikasi Anda dengan cara yang memungkinkan Anda melihat

467
00:28:00,920 --> 00:28:03,870
bagaimana mereka akan menggunakannya jika Anda tidak berdiri di samping mereka.

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

469
00:28:05,250 --> 00:28:08,780
Yang akan memberikan Anda banyak wawasan untuk orang-orang mendapatkan sekitar hal-hal tertentu

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

471
00:28:10,560 --> 00:28:14,680
Apakah mereka menggunakan mekanisme UI khusus pada layar

472
00:28:14,680 --> 00:28:17,490
dengan cara yang agak Hacky?

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

474
00:28:22,020 --> 00:28:23,940
Dan setelah Anda selesai dengan itu, apa yang Anda ingin lakukan?

475
00:28:23,940 --> 00:28:26,010
Batu desain Anda, kan?

476
00:28:26,010 --> 00:28:29,600
Apa yang ingin Anda lakukan adalah Anda ingin mengembangkan dan kemudian melakukan proses yang lagi.

477
00:28:29,600 --> 00:28:32,110
Jadi menunjukkan kepada teman-teman setelah Anda dikembangkan, mengujinya,

478
00:28:32,110 --> 00:28:36,630
mengembangkan, menguji, mengembangkan, menguji, iterate, dan terus dan maju.

479
00:28:36,630 --> 00:28:39,720
Desain yang sangat proses berulang-ulang dalam pengertian ini.

480
00:28:39,720 --> 00:28:43,280
Anda benar-benar harus membangun sesuatu dan kemudian menyadari hal-hal tentang hal itu

481
00:28:43,280 --> 00:28:46,520
bahwa Anda tidak menyadari sebelum dan kembali dan meningkatkan itu.

482
00:28:46,520 --> 00:28:50,890
Sekarang, seperti untuk bagian pengembangan, itulah Tommy akan menunjukkan kepada Anda setelah istirahat

483
00:28:50,890 --> 00:28:53,220
dan bagaimana Anda mungkin dapat menerapkan sesuatu seperti autocomplete

484
00:28:53,220 --> 00:28:56,610
dengan cara yang cukup sederhana.

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

486
00:28:59,550 --> 00:29:03,780
Banyak situs awal - dan ketika Yusuf mengatakan 1990 situs gaya,

487
00:29:03,780 --> 00:29:07,640
itu implementasi di mana jika Anda ingin memilih waktu mulai dan waktu akhir,

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

489
00:29:10,380 --> 00:29:13,220
cara Anda melakukan ini adalah Anda memilih satu jam dari drop-down,

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

491
00:29:15,910 --> 00:29:17,440
dan kemudian Anda melakukannya 3 kali lebih.

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

493
00:29:19,920 --> 00:29:24,000
pengguna Anda benar-benar dapat memberikan beberapa jenis tanggal dan / atau rentang waktu dalam pengertian ini.

494
00:29:24,000 --> 00:29:27,920
>> Jadi pasti optimal dan belum sejauh kita telah melihat tidak ada kemampuan ekspresif

495
00:29:27,920 --> 00:29:30,330
di salah satu bahasa yang kita telah melihat untuk melakukan sesuatu yang lebih seksi

496
00:29:30,330 --> 00:29:32,620
seperti ini slider waktu mulai dan waktu akhir.

497
00:29:32,620 --> 00:29:36,290
Tetapi jika Anda berpikir kembali ke minggu 0 ketika kita berbicara tentang Scratch,

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

499
00:29:39,080 --> 00:29:42,700
Anda benar-benar hanya memiliki fundamental seperti loop dan kondisi dan sejenisnya.

500
00:29:42,700 --> 00:29:46,910
Jadi jenis hanya berpikir sangat abstrak saat ini, terlepas dari ihwal HTML,

501
00:29:46,910 --> 00:29:51,260
apa yang sebenarnya terjadi dengan sesuatu seperti ini waktu mulai dan waktu akhir slider?

502
00:29:51,260 --> 00:29:54,960
Ketika saya menggerakkan mouse saya dan saya klik pada simbol wortel kecil di sebelah kiri

503
00:29:54,960 --> 00:29:59,220
dan mulai menyeret, pemrograman, apa itu yang Anda inginkan untuk dapat mengimplementasikan

504
00:29:59,220 --> 00:30:01,000
untuk membuat itu terjadi?

505
00:30:01,000 --> 00:30:04,920
Pertanyaan apa, apa ekspresi Boolean yang Anda ingin dapat bertanya?

506
00:30:04,920 --> 00:30:06,930
Apa yang sebenarnya terjadi? Sammy?

507
00:30:06,930 --> 00:30:10,080
[Mahasiswa] Dimana posisi kursor? >> Baik. Dimana posisi kursor?

508
00:30:10,080 --> 00:30:11,970
Ini adalah sesuatu yang kami butuhkan untuk mengekspresikan kembali Scratch,

509
00:30:11,970 --> 00:30:14,690
apakah itu berdasarkan lokasi atau bahkan warna atau sejenisnya.

510
00:30:14,690 --> 00:30:18,410
Anda mungkin ingat pernah begitu singkat pada hari Senin ada semua hal ini disebut peristiwa

511
00:30:18,410 --> 00:30:22,370
dalam dunia Web, dan jadi ada hal-hal 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 menyadari bahwa bahkan hal-hal yang kita telah mengambil begitu saja di Web

514
00:30:29,130 --> 00:30:32,190
dengan situs-situs seperti Facebook dan Gmail, bahkan jika Anda tidak tahu

515
00:30:32,190 --> 00:30:34,890
bagaimana Anda mungkin akan menerapkan bahwa karena tidak ada yang seperti itu bahkan dalam kuliah

516
00:30:34,890 --> 00:30:38,570
atau Masalah Set 7, menyadari bahwa dengan fundamental yang sama persis,

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 HTML dasar yang kami telah melihat sejauh

519
00:30:44,010 --> 00:30:47,690
dan di saat dengan mekanisme program yang Tommy akan memperkenalkan

520
00:30:47,690 --> 00:30:51,300
bisa Anda mulai untuk mengekspresikan diri seperti yang Anda lakukan di minggu 0

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

522
00:30:53,800 --> 00:30:58,950
>> Jadi dengan mengatakan bahwa, Tommy MacWilliam dan beberapa potongan teka-teki baru bagi kita untuk Web.

523
00:30:58,950 --> 00:31:03,450
Baiklah. Nama saya Tommy dan aku akan berbicara tentang JavaScript.

524
00:31:03,450 --> 00:31:07,150
Hanya disclaimer: saya berpendapat bahwa JavaScript adalah bahasa pemrograman yang terbaik

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

526
00:31:09,010 --> 00:31:11,940
Ada banyak orang yang tidak setuju dengan saya, tapi itu hanya menakjubkan.

527
00:31:11,940 --> 00:31:16,330
Setelah Anda kembali ke C, jika Anda harus menulis C untuk kelas lain atau beberapa bahasa lainnya,

528
00:31:16,330 --> 00:31:19,780
itu hanya benar-benar frustasi di semua tingkat rendah rincian Anda harus terjebak masuk

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

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

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

532
00:31:27,980 --> 00:31:31,900
Banyak keajaiban JavaScript berasal dari kemampuannya untuk memanipulasi hal-hal

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

534
00:31:33,730 --> 00:31:38,520
Ketika kita menulis naskah PHP kita, mereka dieksekusi di server,

535
00:31:38,520 --> 00:31:42,270
dan akhirnya bahwa script PHP mungkin menampilkan beberapa HTML.

536
00:31:42,270 --> 00:31:45,860
Itu HTML dikirim ke klien, dan kemudian itu saja.

537
00:31:45,860 --> 00:31:50,180
Jika PHP ingin menambahkan tombol ke halaman, misalnya, tidak bisa benar-benar melakukan itu.

538
00:31:50,180 --> 00:31:54,350
Ini harus membuat sebuah file HTML sama sekali baru dan mengirim bahwa untuk browser.

539
00:31:54,350 --> 00:31:57,840
Dengan JavaScript kita tahu bahwa kita dapat memperbarui hal-hal sementara mereka sudah berada pada halaman,

540
00:31:57,840 --> 00:32:00,840
dan karena ini kita dapat memberikan umpan balik lebih cepat,

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

542
00:32:06,150 --> 00:32:09,330
Hanya rekap cepat penyeleksi JavaScript.

543
00:32:09,330 --> 00:32:11,590
Kita tahu bahwa ketika kita men-download 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 pohon besar di mana unsur-unsur yang terkait dalam hierarki besar.

546
00:32:19,340 --> 00:32:21,810
Ketika kita bekerja dengan database di pset 7,

547
00:32:21,810 --> 00:32:26,280
salah satu hal pertama yang kita perlu tahu bagaimana melakukan itu query database.

548
00:32:26,280 --> 00:32:29,060
Kami memiliki tabel ini pengguna besar, dan kadang-kadang kita hanya ingin mengatakan,

549
00:32:29,060 --> 00:32:33,260
"Saya hanya ingin beberapa pengguna yang cocok dengan beberapa kondisi."

550
00:32:33,260 --> 00:32:36,020
Demikian pula, ketika kita memiliki DOM kita perlu beberapa cara untuk query itu.

551
00:32:36,020 --> 00:32:39,490
Kita perlu beberapa cara untuk mengatakan, "Saya ingin semua tombol yang terlihat seperti ini

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

553
00:32:41,860 --> 00:32:44,330
Dan penyeleksi memungkinkan kita untuk melakukan itu.

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

555
00:32:45,690 --> 00:32:50,770
Ini yang pertama di sini, ini # serahkan, apa itu akan memilih? Apakah ada yang ingat?

556
00:32:50,770 --> 00:32:54,880
[Respon siswa terdengar] >> Ya, tepatnya.

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

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

559
00:33:03,470 --> 00:33:07,630
Bagaimana yang kedua, ini berpusat,. Apa yang akan pilih itu?

560
00:33:11,360 --> 00:33:15,180
Ya. >> [Mahasiswa] Kelas. >> Tepat. Ini sekarang akan memilih oleh kelas.

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

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

563
00:33:20,820 --> 00:33:23,080
Jadi jika Anda sedang mencari lebih dari satu halaman web secara keseluruhan,

564
00:33:23,080 --> 00:33:27,740
Anda benar-benar hanya harus memiliki 1 elemen dengan ID tertentu, sehingga dalam hal ini klik.

565
00:33:27,740 --> 00:33:31,330
Dengan kelas, di sisi lain, kita dapat memiliki lebih dari 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
Hal ini dapat berguna untuk mengatakan saya ingin memilih segala sesuatu yang berpusat pada halaman

568
00:33:36,580 --> 00:33:38,450
bukan hanya 1 hal.

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

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

571
00:33:46,650 --> 00:33:48,810
[Respon siswa terdengar] >> Apa itu?

572
00:33:48,810 --> 00:33:53,250
[Mahasiswa] Apa itu tag. >> Kami memiliki 2 bagian di sini.

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

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

575
00:34:00,730 --> 00:34:03,080
Tapi aku tidak ingin hanya memilih semua input

576
00:34:03,080 --> 00:34:05,170
karena sesuatu seperti tombol kirim bisa menjadi masukan

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

578
00:34:08,409 --> 00:34:11,909
Jadi dengan tanda kurung siku saya katakan saya hanya ingin memilih elemen-elemen

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

580
00:34:14,110 --> 00:34:17,400
Di suatu tempat di tag HTML saya, saya memiliki sebuah atribut yang disebut jenis,

581
00:34:17,400 --> 00:34:19,750
dan nilai dari atribut yang harus berupa teks.

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

583
00:34:21,340 --> 00:34:25,489
Kata pertama dari pemilih ini adalah bentuk maka saya memiliki ruang dan kemudian ini bagian masukan.

584
00:34:25,489 --> 00:34:29,620
Apa artinya itu lakukan, menempatkan bentuk di depannya?

585
00:34:33,409 --> 00:34:35,860
Ini akan dasarnya membatasi permintaan kami.

586
00:34:35,860 --> 00:34:38,510
Ini bisa menjadi kasus bahwa kita memiliki beberapa masukan pada halaman

587
00:34:38,510 --> 00:34:41,080
yang tidak keturunan formulir.

588
00:34:41,080 --> 00:34:46,150
Apa ini akan lakukan adalah ini akan mengatakan saya hanya ingin tag masukan yang memiliki suatu tempat di atas mereka

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

590
00:34:49,030 --> 00:34:52,100
Dan sehingga dengan cara ini kita dapat membuat pertanyaan lebih hirarkis

591
00:34:52,100 --> 00:34:55,000
jadi kami tidak hanya harus memilih semuanya cocok pemilih diberikan.

592
00:34:55,000 --> 00:35:00,760
Kita bisa jenis batas lingkup dari permintaan itu untuk sesuatu yang lain.

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

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

595
00:35:06,780 --> 00:35:12,270
AJAX adalah singkatan masih sangat trendi yang berdiri untuk JavaScript asinkron dan XML.

596
00:35:12,270 --> 00:35:15,640
Kebetulan bahwa XML adalah hanya beberapa cara untuk merepresentasikan data.

597
00:35:15,640 --> 00:35:20,920
>> Semacam popularitas hilang baru, sehingga X di AJAX tidak digunakan sepanjang waktu.

598
00:35:20,920 --> 00:35:26,220
Pada dasarnya, apa yang AJAX memungkinkan 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
Ketika kita berada di peramban web kami dan kami menavigasi di sekitar halaman dan kita klik link,

601
00:35:32,310 --> 00:35:37,790
apa browser kita akan lakukan adalah membuat permintaan HTTP untuk apa pun hubungan kita klik.

602
00:35:37,790 --> 00:35:41,670
Tapi itu tidak selalu ideal karena jika itu yang terjadi, maka sebagai Daud berkata,

603
00:35:41,670 --> 00:35:45,220
kita selalu harus membuat pengguna mengklik tombol Submit atau klik link

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

605
00:35:50,380 --> 00:35:54,160
Jadi dengan AJAX kita dapat membuat permintaan atas nama JavaScript.

606
00:35:54,160 --> 00:35:57,020
Itu berarti setiap kali pengguna berinteraksi dengan halaman atau sesuatu terjadi,

607
00:35:57,020 --> 00:36:01,780
kita benar-benar dapat membuat permintaan program untuk beberapa file PHP lain di website kami

608
00:36:01,780 --> 00:36:06,280
atau apa pun dan mengambil data bahwa file yang meludah keluar.

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

610
00:36:09,860 --> 00:36:16,140
Ini adalah CS50 Keuangan halaman dengan yang mudah-mudahan beberapa dari kita yang akrab.

611
00:36:16,140 --> 00:36:21,790
Jika kita melihat HTML halaman ini, kita lihat di sini bahwa saya telah menambahkan beberapa hal,

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

613
00:36:23,820 --> 00:36:26,480
Aku sudah mengatakan id = "bentuk-kutipan".

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

615
00:36:31,910 --> 00:36:35,090
karena saya hanya bisa membuat permintaan yang sangat sederhana.

616
00:36:35,090 --> 00:36:38,960
Apa yang saya ingin lakukan di sini adalah saya ingin memperbaiki beberapa masalah dengan CS50 Keuangan.

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 penawaran, saya harus mengklik tombol ini Penawaran Get,

619
00:36:45,700 --> 00:36:48,960
dan bahwa Dapatkan Tombol Kutip kemudian membawaku ke halaman lain secara keseluruhan.

620
00:36:48,960 --> 00:36:52,400
Dan jika saya ingin kutipan lain, saya harus menekan tombol Back dan kemudian saya ketik dalam,

621
00:36:52,400 --> 00:36:54,480
Saya mendapatkan penawaran, dan aku menekan tombol Kembali.

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

623
00:36:56,840 --> 00:37:01,570
Yang benar-benar akan menggunakan situs jika itu yang lambat untuk mendapatkan harga saham?

624
00:37:01,570 --> 00:37:05,630
Jadi apa yang ingin kita lakukan dengan AJAX adalah menghapus langkah pergi ke halaman terpisah

625
00:37:05,630 --> 00:37:08,410
dalam rangka untuk melihat hasilnya.

626
00:37:08,410 --> 00:37:11,240
>> Apa yang kita benar-benar hanya meminta adalah bahwa harga yang sangat kecil,

627
00:37:11,240 --> 00:37:14,240
dan itu hanya jumlah yang sangat kecil dari data.

628
00:37:14,240 --> 00:37:17,400
Jadi tidak perlu bagi saya untuk pergi halaman lain HTML secara keseluruhan,

629
00:37:17,400 --> 00:37:20,670
mendownload batch baru seluruh HTML, mungkin men-download gambar lagi,

630
00:37:20,670 --> 00:37:24,410
beberapa CSS file lainnya hanya bagi saya untuk menjawab pertanyaan yang sangat sederhana

631
00:37:24,410 --> 00:37:27,810
dari berapa ini biaya persediaan.

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

633
00:37:31,000 --> 00:37:36,400
Kita melihat di sini bahwa aku menghubungkan dalam sebuah file JavaScript yang disebut quote.js.

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

635
00:37:42,610 --> 00:37:45,860
Semua file saya JavaScript yang akan berlokasi di HTML

636
00:37:45,860 --> 00:37:47,630
sehingga web browser dapat mengaksesnya.

637
00:37:47,630 --> 00:37:50,330
Kemudian kita memiliki direktori terpisah sini untuk JavaScript,

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

639
00:37:54,340 --> 00:38:00,930
Pada bagian atas file ini ini mengatakan di sini bahwa saya ingin menunggu seluruh halaman yang akan dimuat

640
00:38:00,930 --> 00:38:04,830
sebelum saya mencoba untuk melakukan sesuatu. Mengapa itu perlu?

641
00:38:04,830 --> 00:38:08,650
Ternyata bahwa hal berikutnya aku akan lakukan di sini adalah mulai mencari elemen

642
00:38:08,650 --> 00:38:10,810
yang cocok pemilih tertentu.

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

644
00:38:15,600 --> 00:38:17,820
maka semuanya saya coba lakukan tidak akan bekerja

645
00:38:17,820 --> 00:38:20,580
karena aku akan mencoba untuk memilih sesuatu yang belum ada di sana.

646
00:38:20,580 --> 00:38:23,780
Jadi ini line up atas bilang aku ingin kau menunggu sampai semuanya dimuat

647
00:38:23,780 --> 00:38:28,030
jadi kita dijamin bahwa setiap elemen yang saya cari sebenarnya pada halaman.

648
00:38:29,730 --> 00:38:34,310
Ini tanda dolar di sini berarti saya menggunakan perpustakaan disebut jQuery.

649
00:38:34,310 --> 00:38:38,570
Perpustakaan ini jQuery memungkinkan kita untuk menggunakan penyeleksi yang baru saja kita memandang.

650
00:38:38,570 --> 00:38:44,010
Dengan mengatakan $ kemudian lulus sebagai argumen ini # bentuk-kutipan,

651
00:38:44,010 --> 00:38:47,910
Saya sekarang memilih bentuk bahwa kami hanya mengambil melihat.

652
00:38:47,910 --> 00:38:52,290
Sekarang saya memiliki representasi yang terbentuk di memori entah bagaimana.

653
00:38:52,290 --> 00:38:56,760
>> Pada objek ini sekarang, ini representasi dari bentuk,

654
00:38:56,760 --> 00:38:58,890
Sekarang saya menggunakan fungsi dipanggil.

655
00:38:58,890 --> 00:39:02,710
Apa fungsi ini tidak itu akan melampirkan sebuah event handler.

656
00:39:02,710 --> 00:39:06,310
Acara yang kita akan mendengarkan adalah acara Submit.

657
00:39:06,310 --> 00:39:08,890
Jadi ketika pengguna mengklik tombol Submit atau yang 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 mengaitkan ke ini, sekarang saya bisa menimpa perilaku default formulir.

660
00:39:16,390 --> 00:39:19,770
Tanpa JavaScript, formulir akan tunduk pada apapun file PHP

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

662
00:39:22,110 --> 00:39:25,440
Tapi sebaliknya, aku sekarang mengatakan, tunggu, tunggu, tunggu, saya tidak ingin Anda untuk benar-benar melakukan itu.

663
00:39:25,440 --> 00:39:31,140
Saya ingin ini terjadi sebelum Anda pergi dan mencoba untuk mengirimkan beberapa file PHP.

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

665
00:39:32,870 --> 00:39:39,270
Pada titik ini saya ingin menggunakan AJAX entah bagaimana untuk memuat dalam apa harga saham tersebut.

666
00:39:39,270 --> 00:39:44,170
Hal pertama yang saya perlu tahu adalah apa saham pengguna melihat ke atas.

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

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

669
00:39:49,020 --> 00:39:54,460
Ini mengatakan bahwa saya ingin memulai ini bentuk elemen dengan ID dari bentuk-kutipan.

670
00:39:54,460 --> 00:39:58,440
Kemudian di suatu tempat dalam bentuk yang harus ada unsur masukan

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

672
00:40:01,270 --> 00:40:05,460
Jika kita melihat kembali HTML kami, kami melihat bahwa kami memiliki input [name = simbol].

673
00:40:05,460 --> 00:40:12,380
Itu berarti bahwa ini akan memilih bahwa kotak teks yang pengguna mengetik ke.

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

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

676
00:40:17,360 --> 00:40:20,290
Untuk melakukan itu kita dapat memanggil metode ini di sini, ini. Val,

677
00:40:20,290 --> 00:40:23,240
dan ini bilang aku tahu apa kotak teks yang Anda miliki.

678
00:40:23,240 --> 00:40:28,160
Aku ingin kau katakan padaku apa itu pengguna mengetik ke dalam kotak teks.

679
00:40:28,160 --> 00:40:34,440
Sekarang kita memiliki string yang disebut simbol yang sama dengan apa pun pengguna diketik masuk

680
00:40:34,440 --> 00:40:39,820
Itu bagus. Kita dapat menggunakan string yang 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 berbeda yang diberikan kepada kami oleh jQuery.

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

685
00:40:54,810 --> 00:40:57,000
Jadi kita harus memberitahu beberapa hal.

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

687
00:41:01,410 --> 00:41:08,910
Di suatu tempat di proyek saya saya memiliki file ini dalam direktori HTML disebut quote.php.

688
00:41:08,910 --> 00:41:15,150
Saya dapat mengakses file ini, kita lihat, seperti ini, jika saya pergi ke localhost / quote.php.

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

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

691
00:41:22,920 --> 00:41:27,210
Kami melihat sebelumnya bahwa bentuk memiliki bahwa metode = "post" atribut,

692
00:41:27,210 --> 00:41:29,270
dan itu berarti itu akan membuat permintaan POST,

693
00:41:29,270 --> 00:41:32,630
sehingga tidak akan memasukkan apa pun di URL, bukan permintaan GET,

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

695
00:41:36,860 --> 00:41:41,260
Sekarang kita sudah mengatakan saya ingin 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
Ketika kita mengirimkan formulir, ingat kita bisa mengakses elemen input dalam bentuk yang

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

699
00:41:54,430 --> 00:41:58,710
Sejauh ini dalam cerita kita belum benar-benar dikirim sepanjang data belum.

700
00:41:58,710 --> 00:42:00,640
Kami baru saja mengatakan kita membuat permintaan AJAX

701
00:42:00,640 --> 00:42:03,200
dan inilah jenis permintaan kita membuat.

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

703
00:42:07,090 --> 00:42:10,930
Untuk melakukan itu kita dapat menggunakan properti yang disebut data.

704
00:42:10,930 --> 00:42:14,950
Nilai dari properti ini sebenarnya merupakan array asosiatif.

705
00:42:14,950 --> 00:42:19,390
Alasan untuk ini adalah memungkinkan kita untuk mengirim lebih dari hanya 1 bagian dari data.

706
00:42:19,390 --> 00:42:24,750
Itulah sebabnya kita memiliki kurung kurawal di sini bersarang di dalam kurung kurawal ini lainnya.

707
00:42:24,750 --> 00:42:29,680
Kunci dalam array asosiatif akan menjadi hal yang sama

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

709
00:42:32,630 --> 00:42:35,740
Itu berarti bahwa jika saya mengirim sepanjang kunci simbol,

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

711
00:42:41,870 --> 00:42:44,640
seperti yang kami lakukan sebelumnya ketika kami mengirimkan formulir.

712
00:42:44,640 --> 00:42:47,090
Dan sekarang data aktual kita ingin mengirim

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

714
00:42:50,790 --> 00:42:54,070
>> Kami disimpan teks ini dalam simbol yang disebut variabel,

715
00:42:54,070 --> 00:42:57,380
dan jadi kita mengirimkan bersama sekarang kunci simbol

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

717
00:43:01,380 --> 00:43:06,270
Sekarang kita sudah membuat permintaan HTTP, file PHP kita telah dieksekusi,

718
00:43:06,270 --> 00:43:11,480
dan itu akan mengirim beberapa data kembali sekarang untuk klien yang hanya membuat permintaan ini.

719
00:43:11,480 --> 00:43:15,220
Sekarang kita perlu menanggapi apa server mengatakan kepada kami.

720
00:43:15,220 --> 00:43:20,180
Untuk melakukan itu kita memiliki properti terakhir di sini disebut sukses.

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

722
00:43:24,240 --> 00:43:26,910
dan ini adalah salah satu hal yang benar-benar keren yang dapat Anda lakukan dengan JavaScript.

723
00:43:26,910 --> 00:43:31,720
Tidak hanya dapat Anda memiliki ints atau array sebagai nilai dalam array asosiatif,

724
00:43:31,720 --> 00:43:34,170
kita juga bisa memiliki fungsi.

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

726
00:43:36,380 --> 00:43:38,830
Usus A bilang inilah nilai,

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

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

729
00:43:44,460 --> 00:43:48,820
Kami hanya bisa mengatakan ini akan menjadi beberapa fungsi. Ini akan mengambil 1 argumen.

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

731
00:43:51,190 --> 00:43:54,460
apapun server mengirimkan kembali dari permintaan tersebut.

732
00:43:54,460 --> 00:43:57,750
Sama seperti ketika browser kita membuat permintaan, server akan mengirimkan sesuatu kembali

733
00:43:57,750 --> 00:43:59,060
dan browser menampilkannya,

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

735
00:44:03,030 --> 00:44:07,110
dan sekarang kami telah yang direpresentasikan sebagai string.

736
00:44:07,110 --> 00:44:11,280
Dengan string yang saya hanya ingin menampilkan bahwa pada halaman.

737
00:44:11,280 --> 00:44:14,040
Untuk melakukan itu aku akan memiliki satu pemilih terakhir.

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

739
00:44:17,570 --> 00:44:20,710
Ini hanya sebuah div kosong yang saya buat pada halaman,

740
00:44:20,710 --> 00:44:26,640
dan saya ingin mengatur isi dari div untuk menjadi apa pun server mengirimkan kembali.

741
00:44:26,640 --> 00:44:30,280
Aku sudah benar-benar diubah quote.php sedikit.

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

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

744
00:44:38,100 --> 00:44:41,880
Jadi jika Anda adalah untuk benar-benar mengunjungi halaman, Anda hanya akan melihat bahwa string kecil

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

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

747
00:44:50,170 --> 00:44:53,560
Apa ini, dapat dikatakan bahwa jika saya dalam sebuah event handler

748
00:44:53,560 --> 00:44:57,300
dan bahwa event handler kembali palsu bukannya kembali benar,

749
00:44:57,300 --> 00:45:01,510
itu berarti bahwa saya tidak ingin acara asli untuk api.

750
00:45:01,510 --> 00:45:05,270
Dalam hal ini, jika kita tidak memiliki JavaScript apapun dan kami mengajukan formulir,

751
00:45:05,270 --> 00:45:08,280
Browser web kami akan berkata, "Aku akan mengirim data bersama,"

752
00:45:08,280 --> 00:45:10,130
dan mereka akan mengirim Anda ke halaman lain.

753
00:45:10,130 --> 00:45:14,360
Karena kita sedang menggunakan AJAX sekarang, tidak perlu untuk mengirim pengguna ke halaman lain.

754
00:45:14,360 --> 00:45:17,920
Kami hanya akan menampilkan hasil secara dinamis pada halaman yang sama.

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

756
00:45:21,460 --> 00:45:27,060
Jadi dengan kembali palsu, kami memastikan bahwa bentuk tidak melakukan itu untuk kita.

757
00:45:27,060 --> 00:45:31,170
Mari kita lihat apa ini benar-benar tampak seperti.

758
00:45:31,170 --> 00:45:34,180
Halaman kutipan kami terlihat sama.

759
00:45:34,180 --> 00:45:37,240
Mari saya menarik inspektur di sini sehingga kita bisa melihat apa yang terjadi.

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

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

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

763
00:45:47,570 --> 00:45:52,890
>> Untuk simbol biarkan aku ketik AAPL dan klik Dapatkan Penawaran.

764
00:45:52,890 --> 00:45:56,720
Sekarang kita melihat bahwa pangsa Apple biaya beberapa jumlah dolar

765
00:45:56,720 --> 00:46:00,410
hanya muncul di halaman, namun URL tidak berubah sama sekali.

766
00:46:00,410 --> 00:46:04,570
Bahkan, di sini adalah permintaan HTTP yang baru saja kita buat.

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

768
00:46:09,980 --> 00:46:12,800
Inilah server mengirimkan kembali.

769
00:46:12,800 --> 00:46:16,320
Bukan lagi ini dokumen HTML raksasa dengan gambar dan hal-hal seperti itu,

770
00:46:16,320 --> 00:46:20,920
itu hanya baris teks, dan kemudian kami hanya menampilkan baris teks.

771
00:46:20,920 --> 00:46:26,290
Jika kita kembali ke header dan melihat apa yang kita benar-benar dikirim dalam ini permintaan HTTP,

772
00:46:26,290 --> 00:46:33,950
kita dapat melihat di sini bahwa kami dikirim bersama kunci dari simbol dan nilai AAPL,

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

774
00:46:36,430 --> 00:46:39,230
Hal ini bagus, tapi masih sedikit mengganggu.

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

776
00:46:42,490 --> 00:46:45,880
Kami orang-orang sibuk dan kita tidak punya waktu untuk mengklik tombol.

777
00:46:45,880 --> 00:46:49,910
Google menyadari hal ini beberapa saat yang lalu ketika mereka menerapkan Google Instant.

778
00:46:49,910 --> 00:46:53,590
Apa Google Instant tidak adalah sebagai Anda mengetik hanya mulai menampilkan hasil bagi Anda

779
00:46:53,590 --> 00:46:56,520
sehingga Anda tidak perlu khawatir tentang bahkan mengklik Cari.

780
00:46:56,520 --> 00:46:58,730
Sebenarnya, cerita menyenangkan yang berhubungan dengan itu.

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

782
00:47:01,100 --> 00:47:02,540
"Ini sangat keren."

783
00:47:02,540 --> 00:47:05,950
Dan seorang mahasiswa turun di Stanford yang 19 pada waktu itu

784
00:47:05,950 --> 00:47:09,000
membuat situs bernama YouTube Instant.

785
00:47:09,000 --> 00:47:13,170
Semua Instan YouTube tidak secara efektif mencari YouTube langsung.

786
00:47:13,170 --> 00:47:17,020
Jadi daripada harus pergi ke YouTube.com dan tekan Cari,

787
00:47:17,020 --> 00:47:21,650
ketika saya mulai mengetik menjadi sesuatu YouTube Instan seperti CS50,

788
00:47:21,650 --> 00:47:25,320
kita bisa melihat di sini bahwa itu berusaha pada koneksi internet yang lambat

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

790
00:47:28,500 --> 00:47:35,590
Untuk melakukan itu kita benar-benar dapat membuat modifikasi yang sangat sederhana untuk berkas quote.js kami.

791
00:47:35,590 --> 00:47:40,900
Saat ini kami sedang melampirkan acara ini ketika formulir dikirimkan.

792
00:47:40,900 --> 00:47:43,760
Kami tidak benar-benar ingin membuat pengguna mengirimkan formulir itu lagi,

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

794
00:47:48,570 --> 00:47:53,200
Untuk melakukan itu pertama mari kita mengubah acara dari tunduk kepada keyup.

795
00:47:53,200 --> 00:47:55,740
Itu berarti bahwa daripada menunggu untuk formulir untuk mengirimkan,

796
00:47:55,740 --> 00:47:58,490
setiap kali tombol ditekan, ada sesuatu yang akan terjadi.

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

798
00:48:02,030 --> 00:48:05,080
Kami benar-benar hanya peduli tentang hal itu kotak pencarian.

799
00:48:05,080 --> 00:48:09,320
>> Untuk memilih yang sekarang, kita dapat mengubah ini menjadi, daripada bentuk-kutipan,

800
00:48:09,320 --> 00:48:14,220
Bentuk-kutipan dan kami akan memiliki input (mengetik teks =) atau kita bisa katakan (nama simbol =) -

801
00:48:14,220 --> 00:48:16,420
apapun yang kita inginkan.

802
00:48:16,420 --> 00:48:18,650
Sekarang ada satu hal terakhir yang harus kita lakukan.

803
00:48:18,650 --> 00:48:21,190
Ingat di sini ketika kita mengatakan return false

804
00:48:21,190 --> 00:48:24,370
kita berkata kita tidak ingin bahwa event default untuk api.

805
00:48:24,370 --> 00:48:26,390
Tapi kebetulan bahwa jika kita menonaktifkan bahwa sekarang,

806
00:48:26,390 --> 00:48:29,660
apapun yang kita ketik tidak akan muncul dalam browser lagi

807
00:48:29,660 --> 00:48:33,000
karena itu akan menjadi perilaku default mengetik ke dalam kotak teks.

808
00:48:33,000 --> 00:48:38,660
Kami tidak lagi ingin menimpa itu, jadi mari kita kembali menghancurkan ini palsu.

809
00:48:38,660 --> 00:48:44,800
Jika kita simpan itu dan kembali halaman tersebut, sekarang ketika saya mulai mengetik AAPL

810
00:48:44,800 --> 00:48:50,160
Anda akan melihat bahwa harga saham di bagian bawah di sini adalah menyelesaikan otomatis.

811
00:48:50,160 --> 00:48:53,150
Jadi di sini adalah CS50 Instan Keuangan.

812
00:48:53,150 --> 00:48:55,860
Sebenarnya cerita menyenangkan tentang Instant YouTube

813
00:48:55,860 --> 00:48:59,420
adalah siswa yang hanya jenis menulisnya sebagai proyek 1-malam,

814
00:48:59,420 --> 00:49:03,800
dan hari berikutnya ia ditawari pekerjaan oleh CEO YouTube.

815
00:49:03,800 --> 00:49:10,610
Jadi sesederhana itu, Anda CS50 siswa, proyek akhir Anda bisa mendapatkan pekerjaan di YouTube.

816
00:49:10,610 --> 00:49:14,720
Sesuatu seperti itu adalah ide yang sangat keren untuk sebuah proyek akhir, kan?

817
00:49:14,720 --> 00:49:18,170
Kami memiliki beberapa fungsi yang ada bahwa kami ingin 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 jauh lebih mudah

820
00:49:24,340 --> 00:49:27,290
daripada mencari untuk itu di YouTube reguler.

821
00:49:27,290 --> 00:49:30,790
Jadi itulah AJAX singkatnya.

822
00:49:30,790 --> 00:49:34,860
>> Dalam contoh bahwa Yusuf menunjukkan, kami melihat banyak autocompletes,

823
00:49:34,860 --> 00:49:39,250
dan orang-orang yang benar-benar autocompletes, sangat berguna karena kita tidak perlu mengingat -

824
00:49:39,250 --> 00:49:41,770
Misalnya, jika Anda tidak ingat harga saham untuk Apple

825
00:49:41,770 --> 00:49:45,110
dan kami hanya tahu itu sesuatu yang aa, bukan hanya mengatakan kepada saya,

826
00:49:45,110 --> 00:49:48,740
"Sebagian dari hal ini biaya banyak uang,"

827
00:49:48,740 --> 00:49:52,540
Aku ingin seperti ingin tahu apa saham mulai dengan aa.

828
00:49:52,540 --> 00:49:58,340
Kita bisa melakukan yang benar-benar baik dengan perpustakaan Bootstrap yang sudah disertakan

829
00:49:58,340 --> 00:50:01,380
dalam CS50 Keuangan.

830
00:50:01,380 --> 00:50:09,390
Jika Anda datang ke sini dengan tag JavaScript dan gulir ke bawah untuk Typeahead,

831
00:50:09,390 --> 00:50:13,730
ini hanya sebuah plugin yang bagus bahwa seseorang sudah menulis untuk kita,

832
00:50:13,730 --> 00:50:16,980
dan kita dapat dengan mudah menggunakan fungsionalitas seperti ini.

833
00:50:16,980 --> 00:50:21,410
Saya mengetik A dan di sini adalah daftar dari beberapa negara yang dimulai dengan A.

834
00:50:21,410 --> 00:50:25,360
Mari kita mengatakan bahwa saya pikir ini benar-benar keren dan sudah waktunya bagi saya untuk memasukkan pada halaman saya.

835
00:50:25,360 --> 00:50:28,300
Ternyata bahwa ini adalah benar-benar, benar-benar sederhana.

836
00:50:28,300 --> 00:50:32,810
Mari ke sini untuk quote3.js.

837
00:50:34,890 --> 00:50:37,380
File saya terlihat sedikit berbeda.

838
00:50:37,380 --> 00:50:39,700
Di sini semua barang AJAX saya adalah sama.

839
00:50:39,700 --> 00:50:43,170
Saya ingin memuat data saham tanpa harus pergi ke halaman lain.

840
00:50:43,170 --> 00:50:46,220
Tapi sekarang saya ingin menggunakan plugin ini.

841
00:50:46,220 --> 00:50:51,020
Dokumentasi Bootstrap memiliki contoh yang bagus tentang bagaimana tepatnya saya bisa melakukan itu.

842
00:50:51,020 --> 00:50:54,350
Saya ingin mengatakan, "Di sini ada masukan yang ingin saya autocomplete on,"

843
00:50:54,350 --> 00:50:56,640
dan aku akan memanggil fungsi ini disebut typeahead,

844
00:50:56,640 --> 00:50:59,730
dan itu akan menangani semua hal-hal Typeahead bagi kita.

845
00:50:59,730 --> 00:51:02,090
Ini akan menginisialisasi daftar, ia akan melakukan semua penyaringan kami.

846
00:51:02,090 --> 00:51:06,680
Satu-satunya hal yang perlu tahu adalah apa data kita pada autocompleting.

847
00:51:06,680 --> 00:51:10,480
Jadi saya menemukan kunci ini hanya dengan membaca dokumentasi dan melihat contoh.

848
00:51:10,480 --> 00:51:14,150
Jika saya memberikan kunci dari sumber, nilai dari kunci ini

849
00:51:14,150 --> 00:51:17,770
hanya beberapa array hal yang saya ingin AutoComplete on.

850
00:51:17,770 --> 00:51:20,180
Variabel ini berasal dari file ini lainnya.

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 hanya array ini benar-benar, benar-benar besar yang mengandung string

853
00:51:27,980 --> 00:51:32,080
dari semua simbol saham dari NASDAQ.

854
00:51:32,080 --> 00:51:42,190
Jika saya ingin melompat kembali ke HTML, sehingga 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
Karena itu sekarang disebut quote3.js, biarkan aku mengubah file JavaScript saya termasuk di sini.

857
00:51:50,910 --> 00:51:55,110
Sekarang saya memiliki quote3.js, jadi saya akan memuat dalam file JavaScript terpisah,

858
00:51:55,110 --> 00:51:57,910
salah satu yang memiliki bahwa Bootstrap autocomplete.

859
00:51:57,910 --> 00:52:04,430
Sekarang ketika saya melompat kembali ke browser, kembali halaman tersebut, dan saya mulai mengetik aa,

860
00:52:04,430 --> 00:52:06,880
ada autocomplete saya. Dan itu benar-benar sesederhana itu.

861
00:52:06,880 --> 00:52:11,400
Aku punya 1 baris kode yang hanya berkata, "Ini adalah hal yang saya ingin autocomplete on,"

862
00:52:11,400 --> 00:52:16,590
dan tiba-tiba saya memiliki fungsi ini benar-benar, benar-benar baik dengan tidak banyak usaha sama sekali.

863
00:52:16,590 --> 00:52:19,810
Saat Anda sedang mengembangkan website dan khususnya sisi ujung depan hal,

864
00:52:19,810 --> 00:52:21,840
Anda akan menemukan ini adalah kasus banyak.

865
00:52:21,840 --> 00:52:25,700
Ada banyak, banyak, banyak perpustakaan gratis benar-benar dingin di luar sana

866
00:52:25,700 --> 00:52:30,190
yang membuatnya super mudah untuk melakukan hal-hal seperti ini.

867
00:52:30,190 --> 00:52:37,230
Can anyone memikirkan kelemahan dari hanya autocompleting pada daftar besar simbol?

868
00:52:37,230 --> 00:52:41,580
Apa yang bisa menjadi sesuatu yang bukan yang terbaik dengan pendekatan ini?

869
00:52:42,790 --> 00:52:45,960
Ya. >> [Mahasiswa] Waktu, jika Anda memiliki banyak [tak terdengar]

870
00:52:45,960 --> 00:52:50,420
Ya. Saat ini kami sedang men-download file ini JavaScript besar dan ada banyak simbol.

871
00:52:50,420 --> 00:52:54,360
Dan jadi jika kita memiliki satu ton barang, semacam ini bisa dari meningkatkan latency tidak hanya mencari

872
00:52:54,360 --> 00:52:56,600
tetapi juga men-download file yang sebenarnya.

873
00:52:56,600 --> 00:52:58,670
Besar. Ada lagi?

874
00:53:01,950 --> 00:53:05,280
Saat ini tidak ada arti sebenarnya dari relevansi.

875
00:53:05,280 --> 00:53:08,190
Jika saya mengetik A, perusahaan yang muncul di sini

876
00:53:08,190 --> 00:53:11,220
mungkin bukan perusahaan yang paling populer yang dimulai dengan A.

877
00:53:11,220 --> 00:53:17,130
>> Sebelum saya sampai ke Apple, mungkin butuh karakter lagi untuk menemukan apa yang saya cari.

878
00:53:17,130 --> 00:53:20,420
Ini autocomplete tidak memiliki rasa relevansi.

879
00:53:20,420 --> 00:53:24,400
Ini hanya akan mengatakan, "Apa pun yang cocok aku akan ditampilkan."

880
00:53:24,400 --> 00:53:30,510
Alih-alih itu, saya ingin entah bagaimana mengintegrasikan beberapa relevansi dalam pencarian saya.

881
00:53:30,510 --> 00:53:36,440
Jika saya pergi ke sini untuk Yahoo! Finance, finance.yahoo.com,

882
00:53:36,440 --> 00:53:42,100
Jika saya mencoba untuk memasukkan simbol pada halaman Yahoo! Finance

883
00:53:42,100 --> 00:53:52,310
dan saya mulai mengetik goog, aku punya daftar dari hal-hal.

884
00:53:52,310 --> 00:53:57,100
Jelas, sepertinya Finance Yahoo! melakukan sesuatu yang lebih pintar di sini.

885
00:53:57,100 --> 00:53:59,790
Mereka memiliki beberapa relevansi dan mereka juga memiliki informasi tambahan

886
00:53:59,790 --> 00:54:01,430
seperti nama saham.

887
00:54:01,430 --> 00:54:05,850
Itu sesuatu yang saya tidak bisa benar-benar mendapatkan dengan hanya daftar saham saya simbol.

888
00:54:05,850 --> 00:54:09,520
Aku ingin ini dan jadi aku akan mengambilnya.

889
00:54:09,520 --> 00:54:11,790
Untuk melakukan itu mari kita melakukan beberapa hal.

890
00:54:11,790 --> 00:54:15,580
Mari kita pertama membuka inspektur pada halaman ini

891
00:54:15,580 --> 00:54:18,100
karena kita melihat bahwa halaman ini tidak reload sama sekali,

892
00:54:18,100 --> 00:54:21,960
jadi mungkin menggunakan AJAX entah bagaimana akan memuat data.

893
00:54:21,960 --> 00:54:23,920
Kita dapat mengetahui data apa itu loading.

894
00:54:23,920 --> 00:54:28,390
Jika saya klik pada tab Jaringan, ini akan menjadi semua permintaan yang mulai dipecat.

895
00:54:28,390 --> 00:54:34,020
Sekarang jika saya ketik di goo, kita dapat melihat bahwa saya hanya mendapat permintaan HTTP baru.

896
00:54:34,020 --> 00:54:37,490
Ini mungkin dimana data yang berasal dari.

897
00:54:37,490 --> 00:54:41,990
Tentu saja, jika saya melihat URL ini, yang sedikit aneh bernama,

898
00:54:41,990 --> 00:54:46,930
kita dapat melihat bahwa ini adalah persis di mana Yahoo mengirimkan off data dari.

899
00:54:46,930 --> 00:54:53,400
>> Saya telah membuat sebuah file terpisah yang disebut suggest.php yang sangat mirip dalam roh dengan fungsi lookup.

900
00:54:53,400 --> 00:54:57,730
Ini pada dasarnya akan membuat permintaan ke URL Yahoo, mendapatkan kembali beberapa data,

901
00:54:57,730 --> 00:54:59,750
dan kirimkan kembali ke saya.

902
00:54:59,750 --> 00:55:02,570
Sekarang, daripada menggunakan daftar ini, besar besar dari simbol,

903
00:55:02,570 --> 00:55:05,280
Saya dapat menggunakan hal-hal baik Yahoo relevansi,

904
00:55:05,280 --> 00:55:08,150
dan saya tidak perlu men-download file JavaScript besar.

905
00:55:08,150 --> 00:55:12,040
Aku hanya akan meruntuhkan simbol saham benar-benar relevan.

906
00:55:12,040 --> 00:55:13,960
Mari selami itu.

907
00:55:13,960 --> 00:55:17,360
Jadi html, js. Kita sekarang dalam quote4.

908
00:55:17,360 --> 00:55:22,120
Sekarang kita tidak lagi menggunakan bahwa daftar besar file JavaScript.

909
00:55:22,120 --> 00:55:24,430
Tapi ada semacam kecil dari masalah desain di sini.

910
00:55:24,430 --> 00:55:28,200
Kami telah mengatakan bahwa A dalam AJAX adalah asynchronous.

911
00:55:28,200 --> 00:55:31,000
Apa itu artinya bahwa ketika saya membuat permintaan AJAX,

912
00:55:31,000 --> 00:55:36,490
jadi di sini pada baris 8, ini adalah di mana saya AJAX permintaan sebenarnya dipecat.

913
00:55:36,490 --> 00:55:40,370
Katakanlah sekarang aku punya beberapa kode di sini yang akan melakukan beberapa hal

914
00:55:40,370 --> 00:55:43,930
like mengingatkan pengguna atau sesuatu perubahan pada halaman.

915
00:55:43,930 --> 00:55:49,830
Apa yang tidak akan terjadi adalah browser tidak akan menunggu permintaan ini untuk melanjutkan

916
00:55:49,830 --> 00:55:53,480
sebelum turun dan memukul baris ini.

917
00:55:53,480 --> 00:55:55,900
Itulah bagian asynchronous.

918
00:55:55,900 --> 00:55:58,400
Ini akan membuat permintaan ini dan berkata, "Setiap kali Anda selesai,

919
00:55:58,400 --> 00:56:03,080
"Datang kembali dan memanggil fungsi yang saya bilang untuk menelepon dalam keberhasilan."

920
00:56:03,080 --> 00:56:07,300
Itu berarti kita tidak bisa hanya mendownload semua saham sebelumnya.

921
00:56:07,300 --> 00:56:10,300
Kita perlu membuat permintaan dan menunggu sesuatu untuk datang kembali.

922
00:56:10,300 --> 00:56:13,330
Itu berarti bahwa sebelum, kita hanya bisa mengatakan Bootstrap,

923
00:56:13,330 --> 00:56:15,580
"Berikut ini adalah daftar hal-hal yang aku ingin kau autocomplete on."

924
00:56:15,580 --> 00:56:18,950
Kita tidak bisa lagi melakukan itu lagi karena kita tidak tahu

925
00:56:18,950 --> 00:56:21,780
apa yang kita ingin benar-benar autocomplete pada.

926
00:56:21,780 --> 00:56:25,190
Untungnya, Bootstrap memikirkan hal ini karena mereka adalah orang pintar di sana,

927
00:56:25,190 --> 00:56:30,160
dan mereka benar-benar memberi kita cara lain untuk memuat plugin ini Typeahead.

928
00:56:30,160 --> 00:56:35,630
Sebelumnya, nilai properti sumber ini hanya array besar hal untuk autocomplete on.

929
00:56:35,630 --> 00:56:39,580
>> Sekarang properti sumber sebenarnya fungsi,

930
00:56:39,580 --> 00:56:44,580
dan tujuan dari fungsi ini adalah untuk mencari tahu apa hal-hal yang autocomplete pada adalah.

931
00:56:44,580 --> 00:56:48,730
Cara itu akan mengetahui bahwa itu akan meminta Yahoo! Finance

932
00:56:48,730 --> 00:56:51,750
apa hal terbaik untuk autocomplete adalah.

933
00:56:51,750 --> 00:56:54,500
Untuk melakukan itu saya akan membuat permintaan AJAX sangat mirip.

934
00:56:54,500 --> 00:56:59,010
Aku akan meminta halaman ini di suggest.php.

935
00:56:59,010 --> 00:57:01,360
Saya ingin mengirim sepanjang simbol masih.

936
00:57:01,360 --> 00:57:05,570
Dan sekarang keberhasilan saya, dokumentasi Bootstrap mengatakan kepada saya

937
00:57:05,570 --> 00:57:09,130
bahwa untuk mengisi daftar hal-hal yang,

938
00:57:09,130 --> 00:57:14,370
semua harus saya lakukan adalah lulus dalam array ini sekarang untuk fungsi callback.

939
00:57:14,370 --> 00:57:15,660
Tapi tunggu dulu.

940
00:57:15,660 --> 00:57:20,240
Jika hal ini seharusnya menjadi array dan AJAX mengirim saya kembali teks,

941
00:57:20,240 --> 00:57:22,720
bagaimana mungkin?

942
00:57:22,720 --> 00:57:27,910
Ini memperkenalkan cara baru pertukaran data yang disebut JSON.

943
00:57:27,910 --> 00:57:33,000
Dalam hal ini kita tidak hanya mengirim kembali string sederhana teks.

944
00:57:33,000 --> 00:57:37,670
Sekarang kita sedang berhadapan dengan daftar yang lebih kompleks simbol saham.

945
00:57:37,670 --> 00:57:41,730
Simbol-simbol saham juga dapat mencakup hal-hal seperti nama perusahaan atau harga saat ini.

946
00:57:41,730 --> 00:57:47,550
Hanya menggunakan tali panjang yang besar yang tidak diformat dalam cara yang dapat diprediksi

947
00:57:47,550 --> 00:57:51,970
tidak akan menjadi cara terbaik untuk mendapatkan data dari server Yahoo untuk saya

948
00:57:51,970 --> 00:57:54,540
dengan cara yang saya dapat dengan mudah mengerti.

949
00:57:54,540 --> 00:58:01,280
JSON adalah teknologi yang mengambil keuntungan dari bagaimana kita membuat array asosiatif dalam JavaScript.

950
00:58:01,280 --> 00:58:04,510
Ini terlihat banyak seperti array asosiatif JavaScript,

951
00:58:04,510 --> 00:58:06,600
dan pada kenyataannya, itu karena itu.

952
00:58:06,600 --> 00:58:09,710
JSON adalah singkatan dari JavaScript Object Notation.

953
00:58:09,710 --> 00:58:15,020
Ini pada dasarnya adalah sebuah disepakati format untuk mentransfer data bolak-balik.

954
00:58:15,020 --> 00:58:18,280
Berikut ini JSON objek atau array asosiatif JSON

955
00:58:18,280 --> 00:58:21,010
mengirimkan saya beberapa data tentang kursus.

956
00:58:21,010 --> 00:58:25,110
>> Kunci dari array ini adalah hal-hal seperti kursus yang memiliki nilai cs50,

957
00:58:25,110 --> 00:58:29,140
dan di sini kita dapat melihat bahwa saya dapat memiliki nilai yang array.

958
00:58:29,140 --> 00:58:32,730
Saya tidak perlu melakukan hal-hal seperti parse string keluar dan mencari koma

959
00:58:32,730 --> 00:58:35,330
dan melakukan hal-hal gila seperti itu.

960
00:58:35,330 --> 00:58:38,820
Karena ini dinyatakan dalam format JSON,

961
00:58:38,820 --> 00:58:43,510
JavaScript dan jQuery sudah memiliki fungsi untuk mengkonversi string

962
00:58:43,510 --> 00:58:48,140
yang terlihat seperti ini JSON ke dalam sebuah array JavaScript yang sebenarnya asosiatif

963
00:58:48,140 --> 00:58:50,440
bahwa kita dapat bekerja dengan.

964
00:58:50,440 --> 00:58:56,660
Melakukan yang sesederhana mengatakan bahwa tidak ada lagi yang file ini, suggest.php,

965
00:58:56,660 --> 00:58:59,040
mengirimkan saya kembali hanya string teks,

966
00:58:59,040 --> 00:59:01,950
tapi aku tahu itu akan mengirim saya kembali JSON.

967
00:59:01,950 --> 00:59:06,760
Itu berarti bahwa JSON dapat dikonversi menjadi array asosiatif JavaScript.

968
00:59:06,760 --> 00:59:10,830
Dan begitu jQuery, saya ingin Anda melakukan itu untuk saya.

969
00:59:10,830 --> 00:59:13,990
Itu berarti bahwa parameter respon di sini,

970
00:59:13,990 --> 00:59:16,070
ini tidak lagi hanya string.

971
00:59:16,070 --> 00:59:19,860
Karena kita sudah mengatakan bahwa di sini jQuery datang beberapa JSON,

972
00:59:19,860 --> 00:59:22,950
jQuery akan menjadi cukup pintar untuk mengatakan, "Kamu ingin JSON?"

973
00:59:22,950 --> 00:59:26,890
"Aku akan mengkonversi ke dalam sebuah array asosiatif untuk Anda."

974
00:59:26,890 --> 00:59:32,100
Mari kita benar-benar melihat pada tab Jaringan setelah kami memiliki quote4.js.

975
00:59:32,100 --> 00:59:35,400
Kami akan mengubah ini dan kembali halaman tersebut.

976
00:59:37,150 --> 00:59:41,250
Sekarang aku akan mengetikkan-lagi.

977
00:59:41,250 --> 00:59:45,600
Saya telah membuat beberapa permintaan untuk suggest.php, tapi sekarang respon ini,

978
00:59:45,600 --> 00:59:48,670
bukan hanya string, itu JSON.

979
00:59:48,670 --> 00:59:52,580
Jadi saya memiliki penjepit keriting terbuka mengatakan, "Di sinilah array asosiatif."

980
00:59:52,580 --> 00:59:56,830
>> Kunci pertama dan satu-satunya ini array asosiatif disebut simbol,

981
00:59:56,830 --> 01:00:00,240
dan kemudian di sini adalah array dari semua simbol yang relevan

982
01:00:00,240 --> 01:00:04,820
datang sekarang dari Finance Yahoo!, bukan dari daftar yang raksasa.

983
01:00:06,110 --> 01:00:10,630
Begitulah cara saya hanya dapat mengisi plugin ini autocomplete

984
01:00:10,630 --> 01:00:14,280
dengan beberapa data yang tidak berasal dari file lokal yang sudah ditentukan

985
01:00:14,280 --> 01:00:17,490
tapi dari sesuatu yang lain.

986
01:00:17,490 --> 01:00:21,160
Ternyata bahwa kita benar-benar dapat mengambil keuntungan dari teknologi yang disebut JSONP,

987
01:00:21,160 --> 01:00:27,420
atau JSON dengan padding, yang akan menghilangkan perantara suggest.php.

988
01:00:27,420 --> 01:00:34,010
Tapi bukannya melakukan hal itu, mari kita bukannya kita lihat bagaimana saya bisa memperbaiki ini bahkan lebih.

989
01:00:34,010 --> 01:00:36,040
Saya sangat suka Typeahead Bootstrap ini. Ini benar-benar baik.

990
01:00:36,040 --> 01:00:39,570
Tapi kami semakin baik di JavaScript dan kami ingin melakukan hal semacam ini diri kita sendiri,

991
01:00:39,570 --> 01:00:43,870
mungkin kita lihat apa plugin ini bisa lakukan.

992
01:00:43,870 --> 01:00:46,500
Mari kita tidak lagi menggunakan hal Typeahead,

993
01:00:46,500 --> 01:00:50,550
dan mari kita coba untuk membuat daftar saham yang disarankan diri kita sendiri.

994
01:00:50,550 --> 01:00:53,790
Di sini, di quote6.php kita akan memulai dengan cara yang sama.

995
01:00:53,790 --> 01:00:58,050
Jenis seseorang Setiap kali sesuatu, kita ingin membuat permintaan AJAX.

996
01:00:58,050 --> 01:01:01,590
Hal ini mirip dengan aslinya Instan kami CS50 Keuangan.

997
01:01:01,590 --> 01:01:05,020
Daripada membuat permintaan untuk quote.php,

998
01:01:05,020 --> 01:01:08,530
kita sekarang membuat permintaan ke file yang sama seperti sebelumnya, suggest.php ini,

999
01:01:08,530 --> 01:01:12,460
yang hanya akan menarik data dari Yahoo! Finance.

1000
01:01:12,460 --> 01:01:19,480
>> Sekali lagi, kami masih mengharapkan JSON, tapi sekarang karena Typeahead tersebut tidak melakukan ini untuk kita,

1001
01:01:19,480 --> 01:01:24,850
kita juga perlu mengirim sepanjang nilai yang dalam kotak teks saat ini.

1002
01:01:24,850 --> 01:01:28,120
Sekarang kita tahu apa yang harus meminta Finance Yahoo! untuk,

1003
01:01:28,120 --> 01:01:34,160
dan jadi sekarang inilah fungsi yang kita ingin mengeksekusi sekali permintaan selesai.

1004
01:01:34,160 --> 01:01:36,520
Kami tidak memiliki plugin untuk membuat daftar bagi kita,

1005
01:01:36,520 --> 01:01:40,630
jadi di sini adalah di mana kita benar-benar akan membangun sebuah daftar saran.

1006
01:01:40,630 --> 01:01:44,850
Untuk melakukan itu, banyak seperti di PHP kita concatenated string ini besar HTML

1007
01:01:44,850 --> 01:01:48,170
maka kita dicetak mereka, kita bisa melakukan hal yang persis sama dalam JavaScript.

1008
01:01:48,170 --> 01:01:51,850
Pertama kita akan memulai ini string disebut saran,

1009
01:01:51,850 --> 01:01:54,590
dan string ini hanya akan berisi beberapa HTML.

1010
01:01:54,590 --> 01:01:58,320
Kami ingin menjadi daftar hal-hal, jadi kita akan memulai dengan tag daftar,

1011
01:01:58,320 --> 01:02:03,340
dan sekarang kita akan iterate atas semua simbol yang dikembalikan kembali kepada kami.

1012
01:02:03,340 --> 01:02:06,500
Ingat, karena kita sudah mengatakan dataType: 'json', ini bukan string.

1013
01:02:06,500 --> 01:02:09,500
Ini sudah sebuah array bagi kita. Itu benar-benar keren.

1014
01:02:09,500 --> 01:02:13,790
Kami hanya bisa mengatakan, "Saya ingin Anda untuk menambahkan elemen daftar."

1015
01:02:13,790 --> 01:02:16,000
Kami akan memasukkannya ke dalam sebuah elemen di sisi itu,

1016
01:02:16,000 --> 01:02:19,030
kami akan memberikan saran kelas sehingga kita tahu apa itu,

1017
01:02:19,030 --> 01:02:23,880
dan sekarang di sini adalah simbol bahwa kami kembali dari Yahoo! Finance.

1018
01:02:23,880 --> 01:02:27,230
>> Setelah kami telah menciptakan elemen untuk masing-masing simbol kita sudah kembali,

1019
01:02:27,230 --> 01:02:30,100
kita hanya ingin menutup daftar.

1020
01:02:30,100 --> 01:02:33,040
Jadi sekarang ini merupakan saran fragmen HTML sedikit

1021
01:02:33,040 --> 01:02:37,860
bahwa ketika diletakkan pada halaman akan menjadi daftar hal-hal yang kita cari.

1022
01:02:37,860 --> 01:02:41,070
Sekarang mari kita benar-benar menempatkan bahwa pada halaman.

1023
01:02:41,070 --> 01:02:46,390
Untuk melakukan itu saya benar-benar menciptakan div lain kosong dan saya berikan itu sebuah ID saran.

1024
01:02:46,390 --> 01:02:52,520
Sama seperti kita mengatur isi div yang akan menampilkan harga dari data saham,

1025
01:02:52,520 --> 01:02:58,600
sekarang kita hanya ingin mengatur isi dari div ini untuk apapun string ini adalah

1026
01:02:58,600 --> 01:03:00,290
yang berisi simbol-simbol.

1027
01:03:00,290 --> 01:03:07,650
Dengan menggunakan metode ini HTML, ini variabel saran, string ini, adalah string HTML.

1028
01:03:07,650 --> 01:03:13,490
Aku ingin kau mengambil HTML dan meletakkannya dalam div disebut saran.

1029
01:03:13,490 --> 01:03:15,680
Kami baru saja ditambahkan sesuatu ke DOM sekarang.

1030
01:03:15,680 --> 01:03:20,360
Kami telah menambahkan beberapa elemen baru ke DOM bahwa kita sekarang dapat menampilkan pada halaman.

1031
01:03:20,360 --> 01:03:22,540
Mari kita lihat apa ini tampak seperti.

1032
01:03:22,540 --> 01:03:29,110
Jika kita memuat dalam quote6 dan sekarang kami kembali,

1033
01:03:29,110 --> 01:03:34,480
sekarang ketika saya mulai mengetik AAPL, kita tidak lagi memiliki Bootstrap autocomplete,

1034
01:03:34,480 --> 01:03:38,470
tapi kita sekarang memiliki daftar ini bahwa kita membuat diri kita sendiri.

1035
01:03:38,470 --> 01:03:43,230
Ini adalah sedikit lebih jelek daripada Typeahead Bootstrap, misalnya,

1036
01:03:43,230 --> 01:03:45,580
tapi itu tidak memungkinkan kita untuk melakukan satu hal lainnya.

1037
01:03:45,580 --> 01:03:48,660
Ketika kami melihat bahwa plugin Bootstrap,

1038
01:03:48,660 --> 01:03:52,590
kita melihat bahwa ketika kita autocompleted, salah satu dari nilai autocomplete adalah AAPL.

1039
01:03:52,590 --> 01:03:54,820
Itu mungkin tidak sangat membantu.

1040
01:03:54,820 --> 01:03:59,100
Sebagai pengguna, saya tidak mungkin segera mengenali semua simbol saham.

1041
01:03:59,100 --> 01:04:02,370
Yang saya mungkin lebih mungkin untuk mengenali adalah nama-nama yang sebenarnya perusahaan.

1042
01:04:02,370 --> 01:04:05,310
Jadi bukankah akan sangat membantu jika daripada mengatakan AAPL

1043
01:04:05,310 --> 01:04:07,970
ini mengatakan sesuatu seperti Apple Inc

1044
01:04:07,970 --> 01:04:12,240
Karena kita sudah digulung ini diri kita sendiri, kita bisa benar-benar mudah melakukan itu.

1045
01:04:12,240 --> 01:04:17,630
Mari kita membuka penawaran terakhir kami file di sini, jadi quote7.

1046
01:04:17,630 --> 01:04:23,200
>> Sama saja. Aku baru saja menciptakan file lain PHP yang akan kembali kepada kita lebih dari sekadar simbol.

1047
01:04:23,200 --> 01:04:25,550
Ini juga akan memberi kita kembali nama-nama perusahaan.

1048
01:04:25,550 --> 01:04:28,150
Dan jadi kita melakukan hal yang sama. Kami sedang membuat permintaan AJAX.

1049
01:04:28,150 --> 01:04:32,370
Setelah permintaan telah selesai, kita akan menjalankan fungsi ini di sini,

1050
01:04:32,370 --> 01:04:36,520
dan fungsi ini akan membangun sebuah string besar elemen.

1051
01:04:36,520 --> 01:04:39,520
Namun perbedaan di sini adalah bahwa nilai dari daftar ini tidak lagi hanya simbol,

1052
01:04:39,520 --> 01:04:45,370
itu sekarang nama.

1053
01:04:45,370 --> 01:04:47,070
Jadi kita memiliki satu masalah kecil.

1054
01:04:47,070 --> 01:04:51,590
Ketika kita menggunakan lookup, kita perlu entah bagaimana lulus simbol.

1055
01:04:51,590 --> 01:04:54,950
Kita tidak bisa lewat sesuatu lookup seperti Microsoft Corporation.

1056
01:04:54,950 --> 01:04:57,900
Kita harus lulus MSFT.

1057
01:04:57,900 --> 01:05:01,640
Ketika kita sedang menulis HTML, kami memiliki banyak menyenangkan built-in atribut.

1058
01:05:01,640 --> 01:05:05,440
A mungkin terkait dengan itu suatu href atau kelas.

1059
01:05:05,440 --> 01:05:08,230
Tapi apa yang kita benar-benar butuhkan sekarang adalah untuk masing-masing link

1060
01:05:08,230 --> 01:05:11,120
memiliki simbol saham yang terkait dengannya.

1061
01:05:11,120 --> 01:05:14,240
Tidak ada built-in atribut HTML untuk simbol saham,

1062
01:05:14,240 --> 01:05:21,010
tapi untungnya, HTML5 memungkinkan kita untuk membuat atribut kita sendiri untuk menjadi apapun yang kita inginkan.

1063
01:05:21,010 --> 01:05:24,620
Dengan mengatakan data-simbol, saya telah memperkenalkan atribut baru

1064
01:05:24,620 --> 01:05:29,350
yang namanya saya hanya terdiri, dan ini tidak apa-apa karena saya mengawali dengan data ini.

1065
01:05:29,350 --> 01:05:34,270
Kita akan menyimpan dalam ada simbol dari saham sekarang.

1066
01:05:34,270 --> 01:05:39,590
Apa artinya adalah bahwa meskipun kita menampilkan nilai dari nama perusahaan

1067
01:05:39,590 --> 01:05:43,380
dalam autocomplete kami, kami masih mengingat simbol

1068
01:05:43,380 --> 01:05:47,110
yang berhubungan dengan masing-masing perusahaan.

1069
01:05:47,110 --> 01:05:50,350
Cara kita melakukan hal itu ada dalam diri ini elemen itu sendiri.

1070
01:05:50,350 --> 01:05:52,930
Jadi itu berarti kita harus melakukan satu perubahan lagi.

1071
01:05:52,930 --> 01:05:57,090
Ketika kita klik sekarang, kita harus benar-benar mengambil keuntungan dari atribut simbol

1072
01:05:57,090 --> 01:06:00,220
bukan hanya nilainya.

1073
01:06:00,220 --> 01:06:05,010
Jika kita kembali, kami lampirkan sebuah event handler untuk saran.

1074
01:06:05,010 --> 01:06:09,280
Setiap kali salah satu saran diklik sekarang, saya ingin melakukan sesuatu.

1075
01:06:09,280 --> 01:06:13,160
Apa yang saya ingin lakukan adalah mengubah nilai dari kotak input.

1076
01:06:13,160 --> 01:06:16,100
Sekarang saya ingin mengatur fungsi ini val yang sama.

1077
01:06:16,100 --> 01:06:21,060
>> Jadi tanpa argumen fungsi val kembali kepada Anda apa yang sudah dalam kotak teks,

1078
01:06:21,060 --> 01:06:27,070
tetapi jika Anda memberikan string, itu akan mengambil tali itu dan memasukkannya ke dalam kotak teks.

1079
01:06:27,070 --> 01:06:28,980
Saya memilih kotak teks dalam cara yang sama.

1080
01:06:28,980 --> 01:06:31,230
Nama itu adalah simbol dalam bentuk kutipan-.

1081
01:06:31,230 --> 01:06:37,540
Sekarang aku mengirimnya nilai atribut data-simbol.

1082
01:06:37,540 --> 01:06:41,560
Ini hal di sini yang baru, ini $ (ini).

1083
01:06:41,560 --> 01:06:46,850
Apa ini mengacu adalah elemen yang diklik.

1084
01:06:46,850 --> 01:06:50,880
Kita bisa melihat di sini bahwa kita tidak melampirkan acara klik

1085
01:06:50,880 --> 01:06:54,690
untuk setiap elemen dengan kelas sugesti individual.

1086
01:06:54,690 --> 01:06:57,140
Sebaliknya, kita mendekati ini sedikit berbeda.

1087
01:06:57,140 --> 01:07:01,700
Sebaliknya kita katakan setiap kali sesuatu dalam ini div saran,

1088
01:07:01,700 --> 01:07:04,080
yang ingat hanyalah wadah untuk daftar itu,

1089
01:07:04,080 --> 01:07:10,150
jika sesuatu dalam div ini diklik dan memiliki kelas sugesti,

1090
01:07:10,150 --> 01:07:13,000
Saya ingin acara ini api.

1091
01:07:13,000 --> 01:07:17,490
Pada dasarnya apa ini berarti dapat kita lakukan adalah kita dapat menggunakan kembali ini event handler yang sama

1092
01:07:17,490 --> 01:07:20,000
untuk semua hal dalam daftar.

1093
01:07:20,000 --> 01:07:22,080
Jadi kita tidak harus memiliki satu event handler untuk elemen pertama

1094
01:07:22,080 --> 01:07:24,550
dan handler yang berbeda event untuk elemen kedua.

1095
01:07:24,550 --> 01:07:29,880
Kami malah bisa mengatakan, "Saya ingin event handler yang sama berlaku untuk segala sesuatu di daftar saya."

1096
01:07:29,880 --> 01:07:34,420
Tapi kita perlu entah bagaimana tahu 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 mengklik link ke-3, ini merupakan unsur yang memiliki pranala ke-3,

1100
01:07:47,680 --> 01:07:51,670
yang berarti bahwa saya bisa mendapatkan atribut, data-simbol,

1101
01:07:51,670 --> 01:07:57,760
yang kita tahu harus berisi simbol yang terkait dengan perusahaan saya hanya diklik.

1102
01:07:57,760 --> 01:08:04,550
Jika kita melompat kembali ke halaman keuangan kami,

1103
01:08:04,550 --> 01:08:08,580
kita dapat melihat sekarang bahwa setelah saya mulai mengetik sesuatu seperti msft,

1104
01:08:08,580 --> 01:08:11,220
kita tidak lagi mendapatkan hanya simbol saham,

1105
01:08:11,220 --> 01:08:13,720
kita sekarang mendapatkan perusahaan yang sebenarnya.

1106
01:08:13,720 --> 01:08:20,410
Tapi ketika saya klik pada salah satu perusahaan,

1107
01:08:20,410 --> 01:08:25,180
kita dapat melihat bahwa kita benar-benar mengisi kotak teks tidak dengan nama perusahaan

1108
01:08:25,180 --> 01:08:29,850
tetapi dengan apapun yang disimpan dalam atribut-atribut data.

1109
01:08:29,850 --> 01:08:32,880
Dan jadi jika saya benar-benar memeriksa salah satu elemen dengan mengklik kanan

1110
01:08:32,880 --> 01:08:36,200
dan mengklik Inspect Element, kita sebenarnya bisa melihat apa yang tampak seperti ini.

1111
01:08:36,200 --> 01:08:40,290
>> Ingat ini adalah sesuatu yang kita buat dalam bahwa untuk loop

1112
01:08:40,290 --> 01:08:42,649
ketika kami membangun string HTML.

1113
01:08:42,649 --> 01:08:47,870
Kita bisa lihat di sini bahwa data-simbol memiliki nilai MSFT, yang besar.

1114
01:08:47,870 --> 01:08:49,189
Itulah apa yang kita harapkan.

1115
01:08:49,189 --> 01:08:53,170
Itulah simbol dan itulah bagaimana kami mendapat nilai yang kita perlu menggunakan

1116
01:08:53,170 --> 01:08:56,140
dalam kotak teks ini.

1117
01:08:56,140 --> 01:08:58,850
Itu cukup untuk bentuk kutipan karena itulah jenis membosankan.

1118
01:08:58,850 --> 01:09:02,990
Mari kita membuat beberapa perangkat tambahan cepat ke halaman portofolio kami.

1119
01:09:02,990 --> 01:09:08,109
Jika Anda telah menggunakan CS50 Keuangan untuk sementara dan Anda mulai membeli dan menjual banyak saham,

1120
01:09:08,109 --> 01:09:11,300
akhirnya tabel ini akan mendapatkan cukup besar,

1121
01:09:11,300 --> 01:09:13,850
dan Anda akan ingin ticker saham, tentu saja.

1122
01:09:13,850 --> 01:09:20,350
Setelah tabel benar-benar, benar-benar besar, itu bisa berguna bagi pengguna untuk mencoba untuk mencari di atasnya.

1123
01:09:20,350 --> 01:09:23,290
Di dalam kotak pencarian jika saya mulai mengetik sesuatu seperti Disney

1124
01:09:23,290 --> 01:09:26,359
dan mencari saham Tikus saya Mickey, kita dapat melihat bahwa meja sekarang penyaringan

1125
01:09:26,359 --> 01:09:28,189
berdasarkan apa yang saya hanya diketik masuk

1126
01:09:28,189 --> 01:09:31,640
Fungsi ini terlihat super rumit, tapi itu 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
File portfolio.php berisi file JavaScript yang disebut portfolio.js.

1129
01:09:39,189 --> 01:09:41,130
Mari kita lihat pada saat itu.

1130
01:09:41,130 --> 01:09:44,890
Jadi html, js, portofolio.

1131
01:09:44,890 --> 01:09:49,210
Di sinilah kita melakukan itu mencari di atas meja.

1132
01:09:49,210 --> 01:09:52,750
Hal pertama yang harus saya lakukan adalah melampirkan sebuah event handler dengan kotak teks

1133
01:09:52,750 --> 01:09:55,760
karena kita tahu bahwa kita ingin fungsi penyaringan kami memecat

1134
01:09:55,760 --> 01:09:59,800
setiap kali pengguna menekan sesuatu karena kita tidak punya waktu untuk tombol Search.

1135
01:09:59,800 --> 01:10:03,000
Hal pertama yang perlu kita lakukan adalah mencari tahu apa pengguna mencari,

1136
01:10:03,000 --> 01:10:04,780
seperti yang kami lakukan sebelumnya.

1137
01:10:04,780 --> 01:10:11,320
Kata kunci ini mengacu pada elemen saat pengguna berinteraksi dengan.

1138
01:10:11,320 --> 01:10:14,070
>> Karena pengguna berinteraksi dengan kotak pencarian,

1139
01:10:14,070 --> 01:10:17,020
$ Ini merupakan kotak pencarian,

1140
01:10:17,020 --> 01:10:21,820
sehingga this.val memberi kita apa dalam kotak pencarian pengguna saat mengetik.

1141
01:10:22,810 --> 01:10:27,320
Jadi, sekarang apa yang ingin kita lakukan adalah kita ingin iterate atas semua baris

1142
01:10:27,320 --> 01:10:29,240
dalam meja kami.

1143
01:10:29,240 --> 01:10:35,630
Untuk memilih semua baris di meja kami, saya memberikan tabel bahwa ID portofolio meja,

1144
01:10:35,630 --> 01:10:39,060
dan setiap baris diwakili oleh elemen TR,

1145
01:10:39,060 --> 01:10:42,080
sehingga pemilih ini akan kembali ke saya array besar

1146
01:10:42,080 --> 01:10:44,370
dari semua baris di meja saya.

1147
01:10:44,370 --> 01:10:47,010
Sekarang saya ingin iterate atas array.

1148
01:10:47,010 --> 01:10:52,390
Aku bisa Anda untuk loop, tapi jQuery sebenarnya memberikan kita fungsi yang bagus disebut "masing-masing."

1149
01:10:52,390 --> 01:10:55,220
Yang masing-masing yang dilakukan adalah masing mengambil satu argumen,

1150
01:10:55,220 --> 01:10:57,090
dan argumen bahwa adalah fungsi.

1151
01:10:57,090 --> 01:11:02,760
Apa yang akan dilakukan adalah itu akan menerapkan fungsi bahwa untuk setiap elemen dalam daftar ini.

1152
01:11:02,760 --> 01:11:05,550
Fungsi ini membutuhkan satu argumen yang e,

1153
01:11:05,550 --> 01:11:10,090
dan ketika fungsi ini dijalankan, e ini akan diganti dengan baris pertama,

1154
01:11:10,090 --> 01:11:12,070
maka baris kedua, dan kemudian baris ketiga.

1155
01:11:12,070 --> 01:11:15,150
Dengan cara ini, ini adalah hal yang sama seperti menjalankan untuk loop

1156
01:11:15,150 --> 01:11:21,360
dan kemudian mencari elemen saat ini didasarkan pada bagian dalam indeks Anda untuk loop.

1157
01:11:21,360 --> 01:11:24,750
Pada setiap iterasi, untuk masing-masing elemen dalam tabel,

1158
01:11:24,750 --> 01:11:30,560
Saya ingin memeriksa apakah teks dari elemen - teks dari sel dalam baris -

1159
01:11:30,560 --> 01:11:33,130
sesuai apa yang saya cari.

1160
01:11:33,130 --> 01:11:36,390
Ini string panjang besar perintah adalah bagaimana saya bisa melakukan itu.

1161
01:11:36,390 --> 01:11:40,900
Pertama, sekali lagi, ini sekarang mengacu pada - karena itu dalam sebuah fungsi baru -

1162
01:11:40,900 --> 01:11:45,020
sekarang ini adalah baris saat ini dalam tabel.

1163
01:11:45,020 --> 01:11:47,340
Saya ingin mengambil baris saat ini dalam tabel,

1164
01:11:47,340 --> 01:11:49,950
dan saya ingin mendapatkan semua anak-anaknya.

1165
01:11:49,950 --> 01:11:51,940
Ingat, DOM adalah pohon hirarkis,

1166
01:11:51,940 --> 01:11:54,200
yang berarti bahwa unsur-unsur memiliki sejumlah anak.

1167
01:11:54,200 --> 01:12:00,180
>> Ini anak fungsinya. Akan kembali ke saya kembali array dari semua elemen

1168
01:12:00,180 --> 01:12:03,240
yang merupakan anak-anak, dalam hal ini, sebuah baris dalam tabel.

1169
01:12:03,240 --> 01:12:07,150
Ini hanya cukup sel-sel dalam baris.

1170
01:12:07,150 --> 01:12:09,230
Saya hanya ingin mencari di sel pertama.

1171
01:12:09,230 --> 01:12:13,090
Fungsi ini. Pertama mengatakan memberikan elemen pertama dalam array itu.

1172
01:12:13,090 --> 01:12:17,070
Kemudian fungsi teks mengatakan mendapatkan saya apa yang ada di dalamnya dari sel yang

1173
01:12:17,070 --> 01:12:19,530
karena saya ingin mencari lebih dari teks itu.

1174
01:12:19,530 --> 01:12:21,040
Akhirnya, mari kita mengubahnya menjadi huruf kecil,

1175
01:12:21,040 --> 01:12:23,940
sehingga kita bisa melakukan query kasus teks sensitif.

1176
01:12:23,940 --> 01:12:29,990
Akhirnya, kami ingin melihat apakah string dalam tabel berisi string kita cari.

1177
01:12:29,990 --> 01:12:32,980
Fungsi indexOf dalam JavaScript tidak hanya itu.

1178
01:12:32,980 --> 01:12:37,060
Ini memberitahu kita apakah atau tidak string ini berisi string lain.

1179
01:12:37,060 --> 01:12:40,150
Jika memang benar bahwa sel berisi apa yang saya cari,

1180
01:12:40,150 --> 01:12:42,140
maka saya ingin memastikan bahwa itu yang ditampilkan.

1181
01:12:42,140 --> 01:12:45,330
Metode acara akan mengatakan, "Tampilkan elemen."

1182
01:12:45,330 --> 01:12:50,350
Jika hal ini tidak terjadi, maka itu berarti apapun yang aku cari tidak terkandung

1183
01:12:50,350 --> 01:12:53,550
dalam baris itu, dan jadi saya ingin menyembunyikan adalah dari pengguna.

1184
01:12:53,550 --> 01:12:59,240
Yang mencapai bahwa efek penyaringan bagus di mana tidak lagi kita melihat seluruh tabel.

1185
01:12:59,240 --> 01:13:01,480
Jika Anda tertarik pada bagaimana membuat ticker juga,

1186
01:13:01,480 --> 01:13:04,180
Kami akan posting sumber online. Tapi itu benar-benar sederhana.

1187
01:13:04,180 --> 01:13:09,860
JQuery memiliki metode mengagumkan untuk animasi ini dan memanipulasi CSS properti.

1188
01:13:09,860 --> 01:13:11,020
Jadi, itu saja bagi saya.

1189
01:13:11,020 --> 01:13:15,560
>> Lalu apa yang ada di depan? Seperti yang Anda akan melihat dalam beberapa hari, proposal proyek akhir jatuh tempo.

1190
01:13:15,560 --> 01:13:17,730
Proposal tugas akhir akan mengajukan beberapa pertanyaan,

1191
01:13:17,730 --> 01:13:19,420
namun di antara mereka akan ada tiga tonggak -

1192
01:13:19,420 --> 01:13:22,840
satu "baik" tonggak sejarah, salah satu tonggak yang lebih baik, dan satu yang terbaik.

1193
01:13:22,840 --> 01:13:25,870
Ide yang benar-benar untuk membantu kalian menetapkan harapan Anda

1194
01:13:25,870 --> 01:13:29,160
sehingga minimal Anda akan senang dengan output proyek akhir Anda

1195
01:13:29,160 --> 01:13:32,060
dan itu akan menjadi "baik" sejauh Anda khawatir.

1196
01:13:32,060 --> 01:13:34,540
Tapi kemudian dalam kepentingan mendapatkan Anda untuk mencapai hanya sedikit untuk sesuatu yang lebih baik

1197
01:13:34,540 --> 01:13:37,680
atau sesuatu yang terbaik, kita juga akan semacam mendorong Anda ke arah itu juga.

1198
01:13:37,680 --> 01:13:40,660
The CS50 Hack-a-thon, sementara itu, dalam beberapa minggu.

1199
01:13:40,660 --> 01:13:44,340
Biasanya, kami melakukan ini secara secara lotre karena kepentingan,

1200
01:13:44,340 --> 01:13:47,680
tapi kemungkinan besar kita akan mengambil beberapa ratus dari kita dalam bus antar-jemput dari Harvard Square

1201
01:13:47,680 --> 01:13:51,540
ke Kendall Square di mana Microsoft memiliki fasilitas yang indah tepat disebut "NERD" -

1202
01:13:51,540 --> 01:13:53,830
New England Pusat Penelitian dan Pengembangan.

1203
01:13:53,830 --> 01:13:56,380
Kita akan sampai di sana sekitar 8 pm Kami akan memiliki beberapa makanan.

1204
01:13:56,380 --> 01:13:58,160
Sekitar 1:00 kita akan memiliki makanan lagi.

1205
01:13:58,160 --> 01:14:02,150
Sekitar 5 am jika Anda masih terjaga kita akan kepala ke IHOP atau membawa Anda kembali ke kampus.

1206
01:14:02,150 --> 01:14:04,380
Tujuan ada untuk menyelam ke dalam proyek akhir

1207
01:14:04,380 --> 01:14:06,190
bersama teman-teman sekelas dan staf.

1208
01:14:06,190 --> 01:14:08,280
Lalu beberapa hari kemudian adalah adil CS50,

1209
01:14:08,280 --> 01:14:10,990
yang benar-benar dimaksudkan untuk menjadi kesempatan bagi kalian untuk memamerkan karya Anda

1210
01:14:10,990 --> 01:14:12,700
dan prestasi untuk semester

1211
01:14:12,700 --> 01:14:15,610
sementara menggosok bahu satu sama lain dan mendapatkan rasa apa yang semua orang lakukan.

1212
01:14:15,610 --> 01:14:17,850
Dengan mengatakan bahwa, banyak terima kasih kepada Tommy dan Yusuf,

1213
01:14:17,850 --> 01:14:19,960
dan kita akan melihat Anda pada hari Senin.

1214
01:14:19,960 --> 01:14:24,070
 [Tepuk tangan]